/** Shopify CDN: Minification failed

Line 980:72 Expected identifier but found whitespace
Line 1589:5 Unexpected "="
Line 1734:11 Expected identifier but found whitespace
Line 1734:19 Unexpected ";"
Line 1767:0 Comments in CSS use "/* ... */" instead of "//"

**/
/* ==================================================================
KARINE — karinecustom.css (nettoyé & organisé)
Thème: Dawn/Crave — centrages, typographies, tableaux responsives
Dernière maj: 2025-10-21
================================================================== */

/* ===================== 0) VARIABLES GLOBALES ===================== */
:root {
--ne-border-color: #4F7066;
--ne-border-width: 1.2px;
--ne-radius: 12px;
--ne-cell-pad: 12px 14px;
--ne-card-gap: 14px;
}

/* Titres (Playball) */
.wrap-home h2, .wrap-home h3,
.wrap-collection h2, .wrap-collection h3,
.template-collection .collection__description h2,
.template-collection .collection__description h3,
.template-page .page__content h2,
.template-page .page__content h3,
.template-article .article-template__content h2,
.template-article .article-template__content h3 {
font-family: 'Playball', cursive;
color: #4F7066;
text-align: center;
margin: 28px 0 16px;
font-weight: 400;
letter-spacing: 0.5px;
}

/* Paragraphes centrés dans les zones wrap */
.wrap-home p,
.wrap-collection p,
.template-collection .collection__description p,
.template-page .page__content p,
.template-article .article-template__content p {
text-align: center;
}

/* Liens dans la home (hérite ailleurs) */
.wrap-home a {
color: #4F7066;
text-decoration: underline;
}

/* ===================== 2) LISTES PROPRES ===================== */
/* Puces à gauche mais bloc recentré (utile pour .rte) */
.wrap-home ul,
.wrap-collection ul,
.template-collection .collection__description ul,
.template-page .page__content ul,
.template-article .article-template__content ul {
display: inline-block;         /* garde la liste dans la zone centrée */
text-align: left;              /* puces à gauche */
margin: 8px auto 18px;
padding-left: 22px;            /* léger retrait pour l’équilibre */
list-style-position: outside;  /* puce légèrement à l’extérieur */
}

/* ===================== 3) TABLES — BASE NEUTRE ===================== */
/* Noms “officiels” */
.ne-table-wrap,
.tbl-wrap {
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border: var(--ne-border-width) solid var(--ne-border-color);
border-radius: var(--ne-radius);
background: transparent;
padding-bottom: 2px;
box-sizing: border-box;
margin: 0 auto; /* centre le bloc */
}

.ne-table,
.tbl {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
border: 0;
background: transparent;
color: inherit;
box-sizing: border-box;
margin: 0 auto; /* centre la table */
}

.ne-table th, .ne-table td,
.tbl th, .tbl td {
padding: var(--ne-cell-pad);
vertical-align: top;
border: var(--ne-border-width) solid var(--ne-border-color);
background: transparent;
color: inherit;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
text-align: center;
}

.ne-table thead th,
.tbl thead th {
font-weight: 600;
}

/* ===== 3.1 Desktop (≥768px) : tableau classique ===== */
@media (min-width: 768px)
.ne-table, .tbl{
   display: table;
   }

.ne-table thead, .tbl thead {
   display: table-header-group; 
  }

.ne-table tbody, .tbl tbody { 
  display: table-row-group;
 }

.ne-table tr, .tbl tr {
   display: table-row; 
  }

  .ne-table th, .ne-table td,
.tbl th, .tbl td {
   display: table-cell;
   }

/* ===================== TABLES — MODE "CARDS" MOBILE (<768px) =====================
Remplace les blocs 3.2 et 3.3. Masque thead (accessible), empile les cellules,
et espace les cartes via gap (plus fiable que des margins).
=================================================================================== */
@media (max-width: 767.98px) {

  /* 1) Masquer l’en-tête visuellement (accessibilité OK) */
  .ne-table thead,
  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  /* 2) Le tbody devient une pile de cartes avec espacement régulier */
  .ne-table tbody,
  .tbl tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px; /* ajuste à 14/16px si tu veux plus d’air */
  }

  /* 3) Chaque ligne = carte */
  .ne-table tr,
  .tbl tr {
    display: block;
    overflow: hidden;
    border-radius: var(--ne-radius, 12px);
    background: transparent;
    /* pas de margin : c’est le gap qui gère l’espacement */
  }

  /* 4) Les cellules s’empilent ; on supprime le séparateur vertical */
  .ne-table td,
  .tbl td {
    display: block;
    border-right: 0 !important; /* évite les doubles traits en mode carte */
    border-bottom: var(--ne-border-width) solid var(--ne-border-color);
  }

  /* 5) Dernière cellule : pas de trait bas */
  .ne-table td:last-child,
  .tbl td:last-child {
    border-bottom: 0;
  }

  /* 6) Labels de colonnes via data-label */
  .ne-table td[data-label]::before,
  .tbl td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.4;
    text-align: left;
  }
}

/* ===================== 4) ACCESSIBILITÉ ===================== */
/* Améliore la compréhension et la navigation clavier des tableaux */

.ne-table caption,
.tbl caption {
  caption-side: top;       /* Place le titre du tableau au-dessus */
  text-align: left;        /* Alignement naturel pour lecture assistée */
  padding: 8px 0;          /* Espace vertical pour la lisibilité */
  font-weight: 600;        /* Accentue le titre pour distinction visuelle */
}

/* Styles de focus pour les éléments interactifs (liens, boutons, etc.) */
.ne-table *:focus,
.tbl *:focus {
  outline: 2px dashed currentColor; /* Contour visible et contrasté */
  outline-offset: 2px;              /* Légère séparation du contenu */
}


/* ===================== 5) SPÉCIFIQUE “Description de collection” =====================
   Concerne UNIQUEMENT le bloc texte des pages collection (Shopify Dawn/Crave).
   Objectif : centrer titres/paragraphes, conserver les listes alignées à gauche,
   recentrer tableaux et éléments larges, le tout sans impacter le reste du thème.
*/

.template-collection .collection__description {
  /* Centre le conteneur et limite la largeur pour un meilleur confort de lecture */
  width: min(100%, var(--page-width, 1200px));
  margin-inline: auto;              /* équivaut à margin-left/right: auto */
  padding: 0 20px 32px;             /* léger padding horizontal + espace bas */
  text-align: center;               /* centre les éléments de base (titres, etc.) */
}

/* Paragraphes centrés (sur cette zone uniquement) */
.template-collection .collection__description :where(p) {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Listes affichées en “bloc centré” mais contenu lisible à gauche */
.template-collection .collection__description :where(ul, ol) {
  display: inline-block;            /* pour que la liste ait sa largeur propre */
  text-align: left;                 /* le texte reste aligné à gauche, plus lisible */
  margin: 8px auto 18px;
  padding-left: 22px;               /* alinéa pour puces */
  list-style-position: outside;
}

/* Optionnel : un peu d’air entre les items de liste */
.template-collection .collection__description :where(li) {
  margin-bottom: 6px;
}

/* Tables centrées dans la description de collection */
.template-collection .collection__description :where(table) {
  margin-left: auto;
  margin-right: auto;
}

/* Si tu utilises des tableaux “cards” (avec data-label) : assure la lisibilité mobile */
@media (max-width: 767.98px) {
  .template-collection .collection__description td[data-label]::before {
    text-align: left; /* label des colonnes aligné à gauche sur mobile */
  }
}

/* —————————————————————— NOTES ——————————————————————
- .template-collection limite l’effet à la page collection.
- On évite les doublons .collection__description .rte : les styles s’appliquent
  à tout le contenu interne via :where(...).
- On réduit drastiquement les !important. Si le thème réécrit encore certaines
  règles chez toi, ajoute !important UNIQUEMENT sur la propriété qui résiste.
- var(--page-width) : si tu l’as défini ailleurs, parfait ; sinon la valeur de
  repli 1200px s’applique.
*/

/* ===================== 6) PATCHS OPTIONNELS ===================== */
/* 6.1 Retirer le liseré global des “wrap” de tableaux (partout) */
.ne-table-wrap,
.tbl-wrap {
border: 0 !important;
background: transparent !important;
padding-bottom: 0 !important;
box-shadow: none !important;
}

/* 6.2 Retirer le liseré global UNIQUEMENT sur mobile (décommente si besoin)*/
@media (max-width: 767.98px) {
.ne-table-wrap,
.tbl-wrap {
border: 0 !important;
background: transparent !important;
padding-bottom: 0 !important;
}
}

/* 6.3 Couleur du liseré des “cards” en mobile (si tu veux une teinte de marque) */
@media (max-width: 767.98px) {
.ne-table tr, .tbl tr {
border-color: #4F7066 !important;
}
.ne-table td, .tbl td {
border-bottom-color: #4F7066 !important;
}
}


/* =========================================================
TITRES — Bloc .collection-hero__description
Style harmonisé pour les H2/H3 des pages collection
========================================================= */

body.template-collection .collection-hero__description :where(h2, h3) {
  font-family: 'Playball', cursive; /* police titres Naturel-Éthique */
  color: #4F7066;                   /* vert principal */
  text-align: center;               /* centrage horizontal */
  margin: 28px auto 16px;           /* espace haut/bas équilibré */
  font-weight: 400;                 /* plus léger, effet fluide */
  letter-spacing: 0.5px;            /* légère ouverture pour lisibilité */
  line-height: 1.3;                 /* confort de lecture */
}

/* ✅ Ajustement mobile : marges réduites et taille fluide */
@media (max-width: 767.98px) {
  body.template-collection .collection-hero__description :where(h2, h3) {
    margin: 22px auto 12px;
    font-size: 1.4rem;              /* taille adaptable pour petits écrans */
    line-height: 1.25;
  }
}

/* =========================================================
LISTES — Bloc .collection-hero__description
Centre le bloc tout en gardant un texte lisible aligné à gauche
========================================================= */

body.template-collection .collection-hero__description :where(ul, ol) {
  display: inline-block;        /* centre la liste dans la zone hero */
  text-align: left;             /* aligne les éléments pour lisibilité */
  margin: 8px auto 18px;        /* équilibre verticalement */
  padding-left: 22px;           /* espace pour les puces ou numéros */
  list-style-position: outside; /* puces à l’extérieur du texte */
  max-width: 800px;             /* limite la largeur pour garder la cohérence visuelle */
}

/* ✅ Espacement entre les items */
body.template-collection .collection-hero__description :where(li) {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ✅ Variante mobile : plus de respirations et lisibilité accrue */
@media (max-width: 767.98px) {
  body.template-collection .collection-hero__description :where(ul, ol) {
    padding-left: 18px;
    margin: 10px auto 20px;
  }
  body.template-collection .collection-hero__description :where(li) {
    margin-bottom: 8px;
    line-height: 1.7;
  }
}

/* Au lieu de toucher .page-width, cible seulement le hero/description pour centrage */
body.template-collection .collection-hero,
body.template-collection .collection-hero__inner,
body.template-collection .collection-hero__text-wrapper,
body.template-collection .collection-hero__description {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/*
1. Centrer le tableau avec margin auto (affecte uniquement le bloc table).
2. Forcer text-align: left sur les cellules pour préserver la lecture en colonne.
========================================================= */

.template-collection .collection__description table {
  margin-left: auto;  /* centre le tableau horizontalement */
  margin-right: auto;
  max-width: 1000px;  /* optionnel : limite la largeur pour éviter la surcharge sur grand écran */
}

.template-collection .collection__description td {
  text-align: left;   /* garde le contenu aligné à gauche, plus naturel pour les données */
  vertical-align: top; /* améliore la structure visuelle des lignes */
  line-height: 1.6;   /* lisibilité accrue pour les contenus multi-lignes */
  padding: 6px 10px;  /* espace interne agréable sur desktop */
}

/*
 Ce correctif remet un flux vertical propre :
- Les éléments s’empilent (flex-direction: column)
- Le contenu est centré horizontalement
- Le tout reste compatible avec le centrage de texte appliqué plus bas
========================================================= */

body.template-collection .collection-hero__inner {
  display: flex;               /* garde le comportement flexible du thème */
  flex-direction: column;      /* empile le titre + description verticalement */
  align-items: center;         /* centre horizontalement le contenu */
  justify-content: center;     /* centre verticalement le bloc si hauteur fixe */
  text-align: center;          /* sécurité : aligne le texte centré */
  gap: 0.5rem;                 /* légère respiration entre les éléments */
}

/* ✅ Variante mobile : évite l’écrasement vertical sur petits écrans */
@media (max-width: 767.98px) {
  body.template-collection .collection-hero__inner {
    justify-content: flex-start; /* on aligne en haut pour garder le hero lisible */
    gap: 0.75rem;
  }
}

/* =========================================================
STYLISATION — Bloc description après le titre de collection
------------------------------------------------------------
Objectif :
Harmoniser le style de la description qui suit le titre principal
(H1 / .collection-hero__title) dans les pages collection :
- largeur maîtrisée pour le confort visuel
- centrage des titres
- taille de texte unifiée pour listes et tableaux
========================================================= */

/* Conteneur direct après le titre */
.collection-hero__title + .collection-hero__description {
  max-width: 1000px;        /* largeur lisible, cohérente avec le reste du site */
  font-size: 17px;        /* taille adaptée à l’intro ou au premier paragraphe */
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-inline: auto;      /* centre le bloc lui-même */
  text-align: left;       /* centre le contenu globalement */
  color: #4F7066;           /* cohérence avec la charte Naturel-Éthique */
  line-height: 1.6;
}

/* Titres secondaires à l’intérieur du bloc */
.collection-hero__title + .collection-hero__description :where(h2, h3) {
  text-align: center;
  font-family: 'Playball', cursive;
  color: #4F7066;
  font-weight: 400;
  margin: 24px auto 16px;
  letter-spacing: 0.5px;
}

/* Listes et tableaux internes : texte lisible, taille homogène */
.collection-hero__title + .collection-hero__description :where(ul, ol, td, th) {
  font-size: 17px;
  line-height: 1.6;
}

/* ✅ Variante mobile : confort visuel sur petits écrans */
@media (max-width: 767.98px) {
  .collection-hero__title + .collection-hero__description {
    font-size: 1.1rem;
    padding-inline: 1rem;
  }

  .collection-hero__title + .collection-hero__description :where(ul, ol, td, th) {
    font-size: 16px;
  }
}

/* =========================================================
TABLES — Unified PATCH v4.1 — ligne sous <th> + coins arrondis
KARINE — 2025-10-27
- Traits fins (0.7px) + cadre externe via inset box-shadow
- Coins arrondis, pas de “trous”
- Couleur via var(--ne-border-color) avec fallback
- Liens inside tables: pas de bordure, focus visible
- Séparateur sous l’entête (<thead>)
========================================================= */

/* ——— 0) WRAPPERS OPTIONNELS ——— */
.ne-table-wrap, .tbl-wrap {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: var(--ne-radius, 12px);
  overflow: hidden;
}

/* ——— 1) TABLE ELEMENT: portée large (RTE + pages + classes .ne-table/.tbl) ——— */
.ne-table,
.tbl,
.template-collection .collection__description table,
.template-page .page__content table,
.template-article .article-template__content table,
.rte table,
.prose table {
  width: 100%;
  position: relative;
  border: 0;
  border-collapse: separate;     /* indispensable pour les arrondis propres */
  border-spacing: 0;
  border-radius: var(--ne-radius, 12px);
  background: transparent;
  /* Cadre externe ultra fin, évite le “double contour” avec les cellules */
  box-shadow: inset 0 0 0 var(--ne-border-width, 0.7px) var(--ne-border-color, #d9e3df);
  overflow: hidden;              /* supprime les “trous” d’angle */
}

/* ——— 2) CELLULES (grille interne) ——— */
.ne-table th, .ne-table td,
.tbl th, .tbl td,
.template-collection .collection__description th,
.template-collection .collection__description td,
.template-page .page__content th,
.template-page .page__content td,
.template-article .article-template__content th,
.template-article .article-template__content td,
.rte th, .rte td,
.prose th, .prose td {
  padding: var(--ne-cell-pad, 12px 14px);
  border: 0; /* reset */
  border-right: var(--ne-border-width, 0.7px) solid var(--ne-border-color, #d9e3df);
  border-bottom: var(--ne-border-width, 0.7px) solid var(--ne-border-color, #d9e3df);
}

/* Première colonne : trait gauche pour fermer la grille interne */
.ne-table tr > *:first-child,
.tbl tr > *:first-child,
.template-collection .collection__description tr > *:first-child,
.template-page .page__content tr > *:first-child,
.template-article .article-template__content tr > *:first-child,
.rte tr > *:first-child,
.prose tr > *:first-child {
  border-left: var(--ne-border-width, 0.7px) solid var(--ne-border-color, #d9e3df);
}

/* Dernière ligne/colonne : pas de trait pour laisser le cadre externe faire le boulot */
.ne-table tr:last-child > *,
.tbl tr:last-child > *,
.template-collection .collection__description tr:last-child > *,
.template-page .page__content tr:last-child > *,
.template-article .article-template__content tr:last-child > *,
.rte tr:last-child > *,
.prose tr:last-child > * {
  border-bottom: 0;
}
.ne-table tr > *:last-child,
.tbl tr > *:last-child,
.template-collection .collection__description tr > *:last-child,
.template-page .page__content tr > *:last-child,
.template-article .article-template__content tr > *:last-child,
.rte tr > *:last-child,
.prose tr > *:last-child {
  border-right: 0;
}

/* ——— 3) ENTÊTES — style + ligne sous <thead> ——— */
.ne-table th, .tbl th,
.template-collection .collection__description th,
.template-page .page__content th,
.template-article .article-template__content th,
.rte th, .prose th {
  font-style: italic;
  font-size: 17px;
}

/* ✅ Séparateur sous l’entête (même si <thead> a plusieurs lignes) */
.ne-table thead tr:last-child > *,
.tbl thead tr:last-child > *,
.template-collection .collection__description thead tr:last-child > *,
.template-page .page__content thead tr:last-child > *,
.template-article .article-template__content thead tr:last-child > *,
.rte thead tr:last-child > *,
.prose thead tr:last-child > * {
  border-bottom: var(--ne-border-width, 0.7px) solid var(--ne-border-color, #d9e3df);
}

/* ——— 4) LIENS DANS LES TABLES ——— */
.ne-table a, .tbl a,
.rte table a, .prose table a,
.template-collection .collection__description table a,
.template-page .page__content table a,
.template-article .article-template__content table a {
  border: 0;
  text-decoration: underline; /* lisible sans ajouter de bordure */
}
.ne-table a:focus, .tbl a:focus,
.rte table a:focus, .prose table a:focus,
.template-collection .collection__description table a:focus,
.template-page .page__content table a:focus,
.template-article .article-template__content table a:focus {
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* ——— 5) AÉRATION DE TEXTE (inchangé) ——— */
.wrap-collection p,
.wrap-page p,
.wrap-article p {
  margin-bottom: 1.2em;
  line-height: 1.7;
}

/* ——— 6) MOBILE / MODE “CARDS” — éviter les doubles traits verticaux ——— */
@media (max-width: 767.98px) {
  .ne-table td, .tbl td,
  .template-collection .collection__description td,
  .template-page .page__content td,
  .template-article .article-template__content td,
  .rte td, .prose td {
    border-right: 0; /* si les lignes deviennent block, on garde seulement les séparateurs horizontaux */
  }
  /* Option : adoucir encore le bas en mobile
  .ne-table td, .tbl td,
  .template-collection .collection__description td,
  .template-page .page__content td,
  .template-article .article-template__content td,
  .rte td, .prose td { border-bottom-width: 0.5px; }
  */
}
/* =====================================================================
TABLEAUX — PATCH GLOBAL v4.2 (tous templates)
KARINE — 2025-10-27
- Marges verticales uniformes
- Coins arrondis sans “trous”
- Ligne fine (var(--ne-border-width))
- Compatibilité RTE / Collection / Page / Article / Produit / Blog
===================================================================== */

:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) table{
  margin: var(--ne-space-md, 20px) auto;
  border-collapse: separate;   /* pour arrondis sans fuites */
  border-spacing: 0;
  border: var(--ne-border-width, 1px) solid var(--ne-border-color, #c3c3c3);
  border-radius: var(--ne-radius, 12px);
  overflow: hidden;            /* masque les “trous” d’angle */
  width: 100%;
  background: transparent;
}

/* Cellules */
:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) th,
:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) td{
  padding: var(--ne-cell-pad, 12px 14px);
  border-bottom: var(--ne-border-width, 1px) solid var(--ne-border-color, #c3c3c3);
  border-right: var(--ne-border-width, 1px) solid var(--ne-border-color, #c3c3c3);
}

/* Supprime la bordure du bas de la dernière ligne */
:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) tr:last-child td{
  border-bottom: 0;
}

/* Supprime la bordure droite de la dernière colonne */
:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) tr > *:last-child{
  border-right: 0;
}

/* Séparateur sous les <th> si thead présent */
:where(
  .rte, .prose,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) thead tr:last-child > *{
  border-bottom: var(--ne-border-width, 1px) solid var(--ne-border-color, #c3c3c3);
}

/* ===========================================================
KARINE — 2025-10-21 — Patch aération titres / paragraphes / tableaux / FAQ
- Corrige les sélecteurs qui fuyaient
- Aération homogène et limitée aux zones concernées
=========================================================== */

/* 0) TITRES DANS LE BLOC QUI SUIT LE H1 DU HERO (scopé) */
.collection-hero__title + .collection-hero__description :where(h2, h3) {
  text-align: center;
}

/* 1) AÉRATION — Texte et tableaux dans le hero (scopé) */
.collection-hero__text-wrapper :where(h1, h2, h3, table, p) {
  margin-block: 0.5em; /* équivaut à margin-top/bottom */
}

/* 2) AÉRATION — Paragraphes globaux de tes wraps (comme avant, mais clair) */
.wrap-collection p,
.wrap-page p,
.wrap-article p {
  margin-bottom: 1.2em;
  line-height: 1.7;
}

/* 3) TABLEAUX — Lisibilité par défaut dans les pages (scopé aux contextes utiles) */
.wrap-collection :where(td, th),
.template-page  .page__content :where(td, th),
.template-article .article-template__content :where(td, th) {
  font-size: inherit;     /* annule d’éventuels surstyles précédents */
  line-height: 1.6;
  vertical-align: top;
}

/* 4) FAQ — Aération du résumé (sélecteur corrigé) */
details.faq > summary,
.faq summary {
  margin-block: 0.5em;
}

/* 5) (Optionnel) LISTES dans l’intro sous le H1 du hero, si tu veux les garder */
.collection-hero__title + .collection-hero__description :where(ul) {
  /* Ajoute ici tes réglages de listes si nécessaire */
  /* ex: display:inline-block; text-align:left; padding-left:22px; */
}

/* =========================================================
BREADCRUMB — Reset total des séparateurs + séparateur unique
Compatible Dawn/Crave (li/ol/ul ou spans sans <li>)
========================================================= */

/* Conteneur */
.ne-breadcrumb-wrap {
  max-width: min(100%, var(--page-width, 1200px));
  margin-inline: auto;
  padding-inline: 0;
}

/* Liste / nav */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;                 /* on gère l’espace via le séparateur */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* —— 1) RESET : on retire tous les séparateurs du thème —— */

/* Eléments dédiés souvent utilisés par les thèmes */
.breadcrumbs [class*="delim"],
.breadcrumbs [class*="divid"],
.breadcrumbs [class*="separ"],
.breadcrumbs .breadcrumb-delimiter,
.breadcrumbs .breadcrumb-delimeter, /* coquille tolérée */
.breadcrumbs svg,
.breadcrumbs .icon {
  display: none !important;
}

/* Pseudo-éléments posant des chevrons/puces natifs */
.breadcrumbs *::before,
.breadcrumbs *::after {
  content: none; /* pas d'!important pour pouvoir reposer le nôtre ensuite */
}

/* —— 2) SÉPARATEUR UNIQUE (chevron) —— */
/* Cas avec <li> */
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: '›';
  display: inline-block;
  margin: 0 1rem;
  opacity: .9;
}

/* Cas sans <li> (certains thèmes mettent des <a><span> directement) */
.breadcrumbs > * + *::before {
  content: '›';
  display: inline-block;
  margin: 0 1rem;
  opacity: .9;
}

/* Lisibilité */
.breadcrumbs a,
.breadcrumbs [aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

/* =====================================================================
FAQ — PATCH UNIFIÉ v4.1 (centrée + flèche ❓ ▼ / ▲, accessibilité)
KARINE — 2025-10-27
- Multi-templates via :where(...)
- Zone cliquable élargie, focus clavier visible
- Couleurs: #4F7066 + var(--ne-link-hover, #d13b53)
===================================================================== */

/* 1) Conteneur <details class="faq"> centré partout */
:where(.collection-hero__description.rte,
       .article-template__content,
       .page__content,
       .product, .product__info-container, .product__accordion, .product__description)
details.faq{
  display:flex;
  justify-content:center;
  margin:2em 0;
}

/* 2) <summary class="faq"> style (Playball, centré) */
:where(.collection-hero__description.rte,
       .article-template__content,
       .page__content,
       .product, .product__info-container, .product__accordion, .product__description)
summary.faq,
:where(.collection-hero__description.rte,
       .article-template__content,
       .page__content,
       .product, .product__info-container, .product__accordion, .product__description)
summary.faq strong{
  font-family:'Playball',cursive !important;
  font-weight:400 !important;
  font-size:24px;
  color:#4F7066;
  text-align:center;
  letter-spacing:.5px;
  cursor:pointer;
  transition:color .25s ease;
  -webkit-tap-highlight-color:transparent;
}

/* 3) Hit area & layout du summary */
:where(.collection-hero__description.rte,
       .article-template__content,
       .page__content,
       .product, .product__info-container, .product__accordion, .product__description)
summary.faq{
  display:inline-flex;
  align-items:flex-end;          /* flèche un peu plus basse */
  gap:.25em;
  list-style:none;
  padding:.25em .5em;            /* zone cliquable plus confortable */
  border-radius:8px;             /* pour focus visible */
  outline:none;
  user-select:none;
}

/* Supprime les markers natifs (Safari/WebKit/Firefox/Chromium) */
summary.faq::-webkit-details-marker{ display:none !important; }
summary.faq::marker{ content:''; }

/* 4) Icône flèche ▼ / ▲ (ajout automatique) */
summary.faq::after{
  content:'▼';
  font-size:.8em;
  color:#4F7066;
  display:inline-block;
  line-height:1;
  transform:translateY(2px);
  transition:transform .3s ease, color .3s ease;
}

/* Ouvert → rotation */
details[open] > summary.faq::after{
  transform:rotate(180deg) translateY(-1px);
}

/* 5) Hover + focus cohérents avec ta palette */
summary.faq:hover,
summary.faq:hover::after{
  color:var(--ne-link-hover, #d13b53);
}

/* Focus clavier clair et accessible */
summary.faq:focus-visible{
  outline:2px dashed currentColor;
  outline-offset:2px;
}

/* 6) Corps de réponse (le contenu à l’intérieur du <details>) */
:where(.collection-hero__description.rte,
       .article-template__content,
       .page__content,
       .product, .product__info-container, .product__accordion, .product__description)
details.faq > *:not(summary){
  max-width: min(72ch, 100%);
  margin: .8em auto 0;
  text-align: left;              /* lisible pour paragraphes/listes */
  line-height:1.7;
}

/* 7) Réduction de mouvement si préférée */
@media (prefers-reduced-motion: reduce){
  summary.faq,
  summary.faq::after{
    transition:none;
  }
}

/* =====================================================================
4) BREADCRUMBS — NOTE DE NETTOYAGE
Si tu as deux blocs .breadcrumbs / .breadcrumb-delimiter::after, garde UNE seule version.
(Pas de style ici pour éviter de surécrire tes réglages actuels.)
--------------------------------------------------------------------- */

/* ===== FAQ — 1 seule flèche, verte, basée sur <span class="faq-caret"> ===== */
/* supprime la flèche auto du navigateur */
summary.faq::-webkit-details-marker { display: none !important; }
summary.faq::marker { content: '' !important; }

/* désactive la flèche ajoutée en ::after qui causait le doublon */
summary.faq::after { content: none !important; }

/* style et rotation de TA flèche <span class="faq-caret"> */
summary.faq .faq-caret{
display: inline-block;
font-size: .9em;
line-height: 1;
transform: translateY(1px) rotate(0deg);
transition: transform .25s ease;
color: #4F7066 !important;   /* vert foncé, ne bouge pas au hover */
}
details[open] > summary.faq .faq-caret{
transform: rotate(180deg) translateY(-1px);
}

/* (optionnel) si un hover colorait aussi le summary, on fige la couleur de la flèche */
summary.faq:hover .faq-caret { color: #4F7066 !important; }

/* =============== KARINE — AERATION + LIENS + FAQ + TABLE — 2025-10-21 =============== */

/* ---------- Variables spacing (douces & constantes) ---------- */
:/* =====================================================================
PATCH ESPACEMENTS & LIENS — v1.2
KARINE — 2025-10-27
- Variables de spacing & couleurs
- Wrappers de contenu centrés (multi-templates)
- Rythme vertical “flow”
- Titres harmonisés
- Liens cohérents + focus accessible
===================================================================== */

/* ---------- Variables globales ---------- */
:root{
  --ne-space-xxs: 6px;
  --ne-space-xs: 10px;
  --ne-space-sm: 14px;
  --ne-space-md: 20px;
  --ne-space-lg: 28px;
  --ne-space-xl: 40px;
  --ne-flow: 0.75em;
  --ne-link-color: #4F7066;         /* vert foncé thème */
  --ne-link-hover: #d57176;         /* hover demandé */
}

/* ---------- Zones de contenu (tous modèles) ---------- */
:where(
  .wrap-home,
  .wrap-collection,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
){
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: var(--ne-space-xl);   /* évite de coller au footer */
}

/* Padding latéral un peu réduit en mobile */
@media (max-width: 640px){
  :where(
    .wrap-home,
    .wrap-collection,
    .template-collection .collection__description,
    .template-page .page__content,
    .template-article .article-template__content,
    .template-blog .blog__posts,
    .product .product__description,
    .product .rte
  ){
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Rythme vertical “flow” ---------- */
:where(
  .wrap-home,
  .wrap-collection,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) > * + *{
  margin-top: var(--ne-flow);
}

/* ---------- Titres : marges haut/bas harmonisées ---------- */
:where(h1,h2,h3){ line-height: 1.25; }
:where(h1){ margin-top: var(--ne-space-lg); margin-bottom: var(--ne-space-sm); }
:where(h2){ margin-top: var(--ne-space-lg); margin-bottom: var(--ne-space-sm); }
:where(h3){ margin-top: var(--ne-space-md); margin-bottom: var(--ne-space-xs); }

/* Si un titre est le premier élément d’un bloc, pas de marge haute */
:where(
  .wrap-home,
  .wrap-collection,
  .template-collection .collection__description,
  .template-page .page__content,
  .template-article .article-template__content,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte
) :is(h1,h2,h3):first-child{
  margin-top: 0;
}

/* ---------- Paragraphes & listes respirants ---------- */
:where(.rte, .prose,
       .wrap-home, .wrap-collection,
       .template-collection .collection__description,
       .template-page .page__content,
       .template-article .article-template__content,
       .template-blog .blog__posts,
       .product .product__description, .product .rte)
:is(p, ul, ol){
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

/* ---------- Liens (global contenu, tableaux, FAQ…) ---------- */
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte,
  .rte, .prose
) a{
  color: var(--ne-link-color) !important;
  font-weight: 700;
  text-decoration: none;             /* lisible, propre ; voir hover/focus */
  border: 0;
  transition: color .2s ease-in-out, text-decoration-color .2s ease-in-out;
  text-decoration-skip-ink: auto;
}

/* Hover + Focus clavier (accessible) */
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte,
  .rte, .prose
) a:hover{
  color: var(--ne-link-hover) !important;
  text-decoration: underline;
}

:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .template-blog .blog__posts,
  .product .product__description,
  .product .rte,
  .rte, .prose
) a:focus-visible{
  color: var(--ne-link-hover) !important;
  text-decoration: underline;
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* ---------- Tableaux (mêmes réglages partout) ---------- */
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) table{
margin: var(--ne-space-md) auto;       /* espace autour du tableau */
border-collapse: separate;
border-spacing: 0;
}
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) table{
border: var(--ne-border-width) solid var(--ne-border-color);
border-radius: var(--ne-radius);
overflow: hidden;                       /* évite les “trous” d’angle */
}
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) th,
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) td{
padding: var(--ne-cell-pad);
border-bottom: var(--ne-border-width) solid var(--ne-border-color);
}
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) tr:last-child td{
border-bottom: 0;
}


/* =====================================================================
FAQ — UNE SEULE FLÈCHE via <span class="faq-caret">…</span>
KARINE — 2025-10-27
- Centrage, respiration
- Pas de flèche native ni pseudo-élément ::after
- Focus clavier visible, zone cliquable élargie
- Caret qui pivote (texte ou SVG)
===================================================================== */

/* ---------- Conteneur ---------- */
details.faq{
  display:block;
  width:100%;
  text-align:center;
  margin: var(--ne-space-xl, 40px) auto;
}

/* ---------- Résumé (titre cliquable) ---------- */
summary.faq{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  list-style:none;
  margin:0 auto;
  padding:.25em .6em;               /* hit-area confortable */
  border-radius:8px;                 /* pour focus visible */
  font-family:'Playball', cursive !important;
  font-weight:400 !important;
  font-size:24px;
  color:#4F7066;                     /* vert foncé */
  letter-spacing:.5px;
  cursor:pointer;
  transition: color .25s ease;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}

/* Mobile : titre légèrement plus petit */
@media (max-width: 640px){
  summary.faq{ font-size:20px; }
}

/* Retirer la flèche native (tous moteurs) */
summary.faq::-webkit-details-marker{ display:none !important; }
summary.faq::marker{ content:'' !important; }

/* Neutraliser toute ancienne pseudo-flèche */
summary.faq::after{ content:none !important; }

/* Hover : le texte peut changer, la caret reste verte (voir règles caret) */
summary.faq:hover{
  color: var(--ne-link-hover, #d57176);
}

/* Focus clavier accessible */
summary.faq:focus-visible{
  outline:2px dashed currentColor;
  outline-offset:2px;
}

/* ---------- Caret contrôlée par TON <span class="faq-caret"> ---------- */
summary.faq .faq-caret{
  display:inline-block;
  font-size:.9em;                    /* si caret = caractère (ex. ▼) */
  line-height:1;
  transform: translateY(1px) rotate(0deg);
  transition: transform .25s ease;
  color:#4F7066 !important;          /* reste verte même au hover */
}

/* Si tu utilises un SVG dans .faq-caret */
summary.faq .faq-caret svg{
  display:block;
  transform: rotate(0deg);
  transition: transform .25s ease;
  /* la couleur se gère via fill: currentColor; dans le SVG */
}

/* Ouvert → caret pivote */
details[open] > summary.faq .faq-caret{
  transform: rotate(180deg) translateY(-1px);
}
details[open] > summary.faq .faq-caret svg{
  transform: rotate(180deg);
}

/* Ne recolore jamais la caret au survol */
summary.faq:hover .faq-caret{ color:#4F7066 !important; }

/* ---------- Corps de la FAQ ---------- */
details.faq > *:not(summary){
  max-width: 1000px;
  margin: var(--ne-space-sm, 14px) auto 0;
  text-align:left;
  line-height:1.7;
}

/* Espace supplémentaire si la FAQ clôt la page */
details.faq:last-child{
  margin-bottom: calc(var(--ne-space-xl, 40px) + 12px);
}

/* Respecte la préférence “reduce motion” */
@media (prefers-reduced-motion: reduce){
  summary.faq,
  summary.faq .faq-caret,
  summary.faq .faq-caret svg{
    transition:none !important;
  }
}

/* évite que certains thèmes resserrent trop les <li> */
:where(.rte, .prose,
     .template-collection .collection__description,
     .template-page .page__content,
     .template-article .article-template__content,
     .template-blog .blog__posts,
     .product .product__description, .product .rte) li + li{
margin-top: .35em;
}
/* ============================================================
 KARINE — 2025-10-21 — PATCH AERATION DOUCE + ESPACE FOOTER
 ============================================================ */

/* ↑ Aère les titres (plus d’air au-dessus et en dessous) */
:where(h1,h2,h3){
margin-top: 32px !important;
margin-bottom: 20px !important;
}

/* ↑ Aère les listes à puces */
:where(.rte, .prose,
    .wrap-home, .wrap-collection,
    .template-collection .collection__description,
    .template-page .page__content,
    .template-article .article-template__content,
    .template-blog .blog__posts,
    .product .product__description, .product .rte)
ul {
margin-top: 18px !important;
margin-bottom: 22px !important;
}


/* ↑ Aère les tableaux */
:where(.rte, .prose,
    .template-collection .collection__description,
    .template-page .page__content,
    .template-article .article-template__content,
    .template-blog .blog__posts,
    .product .product__description, .product .rte)
table {
margin-top: 28px !important;
margin-bottom: 28px !important;
}




/* ↑ Aère la FAQ, surtout au-dessus du footer */
details.faq {
margin-top: 48px !important;
margin-bottom: 64px !important;
}




/* ↑ Petit bonus : espace plus doux entre paragraphes */
:where(p){
margin-top: 0.75em !important;
margin-bottom: 0.75em !important;
}
/* ============================================================
 KARINE — 2025-10-21 — PATCH AÉRATION FINESSE (H2 + LISTES + GUIDES)
 ============================================================ */




/* Espace entre les titres h2 et le texte qui suit (paragraphe ou liste) */
:where(h2) + :where(p, ul, ol, table) {
margin-top: 14px !important;  /* espace doux sous le titre */
}




/* Cas particuliers : titres “catégories phares”, “Engagement”, “Conseils express”, etc. */
.collection-hero__description h2 + ul,
.collection-hero__description h2 + p,
.collection-hero__description h3 + ul,
.collection-hero__description h3 + p {
margin-top: 16px !important;
}




/* Aération supplémentaire pour les listes sous les titres thématiques */
.collection-hero__description ul {
margin-top: 16px !important;
margin-bottom: 22px !important;
}




/* Espace entre “Conseils express” et le paragraphe ou la liste */
.collection-hero__description h3:has(+ ul),
.collection-hero__description h3:has(+ p) {
margin-bottom: 18px !important;
}




/* Bloc final “Pour aller plus loin” — espace avant et après */
.collection-hero__description p:has(a[href*="guide"]),
.collection-hero__description p:has(a[href*="comparatif"]) {
margin-top: 24px !important;
margin-bottom: 32px !important;
}




/* Optionnel : légère marge supplémentaire avant la FAQ */
details.faq {
margin-top: 52px !important;
}


/* ===========================================================
KARINE — 2025-10-22
Patch : hauteur uniforme & centrage vertical des lignes de tableau
=========================================================== */


:where(.tbl, .ne-table) th,
:where(.tbl, .ne-table) td {
 padding: 14px 18px !important;      /* un peu plus d’air */
 vertical-align: middle !important;  /* texte centré verticalement */
 min-height: 60px !important;        /* hauteur minimale harmonisée */
 line-height: 1.5;                   /* équilibre du texte */
}


/* Sur mobile : on réduit un peu pour éviter les “blocs trop hauts” */
@media (max-width: 767.98px) {
 :where(.tbl, .ne-table) th,
 :where(.tbl, .ne-table) td {
   padding: 12px 14px !important;
   min-height: 48px !important;
 }
}
/* ===========================================================
KARINE — 2025-10-22
Mobile : supprimer le liseré global du tableau, ne garder que les cartes
=========================================================== */
@media (max-width: 767.98px) {
 /* 1) plus de contour global sur la table et son wrap */
 .ne-table, .tbl {
   box-shadow: none !important;
   border: 0 !important;
   border-radius: 0 !important;     /* pas d’arrondi “global” */
 }
 .ne-table-wrap, .tbl-wrap {
   box-shadow: none !important;
   border: 0 !important;
   padding-bottom: 0 !important;
   background: transparent !important;
 }


 /* 2) on garde le style “carte” sur chaque ligne */
 .ne-table tr, .tbl tr {
   border: var(--ne-border-width) solid var(--ne-border-color) !important;
   border-radius: var(--ne-radius) !important;
   background: transparent !important;
   margin: 0 0 var(--ne-card-gap) 0 !important; /* espace entre cartes */
   overflow: hidden !important;
 }


 /* 3) pas de traits latéraux parasites dans les cellules */
 .ne-table td, .tbl td {
   border: 0 !important;
   border-bottom: var(--ne-border-width) solid var(--ne-border-color) !important;
 }
 .ne-table td:last-child, .tbl td:last-child {
   border-bottom: 0 !important;
 }
}
/* ===========================================================
KARINE — 2025-10-22
Mobile : rétablir le trait sous la dernière ligne + couleur du liseré vert foncé
=========================================================== */
@media (max-width: 767.98px) {
 /* Liseré = vert foncé du thème */
 .ne-table tr,
 .tbl tr,
 .ne-table td,
 .tbl td {
   border-color: #4F7066 !important;
 }


 /* Chaque “carte” garde un cadre complet */
 .ne-table tr,
 .tbl tr {
   border: 1px solid #4F7066 !important;
   border-radius: var(--ne-radius) !important;
   margin: 0 0 var(--ne-card-gap) 0 !important;
   background: transparent !important;
 }


 /* Rétablit le trait sous la dernière cellule de chaque carte */
 .ne-table tr:last-child td,
 .tbl tr:last-child td {
   border-bottom: 1px solid #4F7066 !important;
 }


 /* Empêche le trou visuel entre deux cartes (espacement régulier) */
 .ne-table td:last-child,
 .tbl td:last-child {
   border-bottom: 0 !important;
 }
}


/* === FAQ Titre sur deux lignes === */
.faq summary {
 display: flex;
 flex-direction: column;   /* empile FAQ + sous-titre */
 align-items: center;
 justify-content: center;
 text-align: center;
 gap: 6px;
 cursor: pointer;
 list-style: none;
 background: transparent;
 border: none;
}


/* Ligne 1 — mot "FAQ" seul */
.faq summary strong {
 display: block;
 font-family: 'Playball', cursive;
 color: #4F7066;
 font-size: 24px;
 line-height: 1.2;
}


/* Ligne 2 — mot-clé + icônes */
.faq summary .faq-subtitle {
 font-family: 'Playball', cursive;
 font-size: 24px;
 color: #4F7066;
 display: flex;
 align-items: center;
 gap: 6px;
}


/* Icône question rouge */
.faq summary .faq-icon {
 color: #d94b3d;
 font-weight: bold;
}


/* Flèche verte */
.faq summary .faq-caret {
 color: #4F7066;
 transition: transform 0.2s ease;
}


/* Flèche qui pivote à l'ouverture */
.faq[open] summary .faq-caret {
 transform: rotate(180deg);
}


/* =========================================================
  FAQ des articles de blog — Couleur texte #4f7066
  Sans soulignement au survol
  (Karine - Naturel Éthique)
  ========================================================= */
.wrap details.faq,
.wrap summary.faq,
.wrap details.faq p,
.wrap details.faq a,
.wrap details.faq strong,
.wrap details.faq em {
 color: #4f7066 !important;
 text-decoration: none !important;
}


/* Flèche ▼ de la FAQ */
.wrap summary.faq .faq-caret {
 color: #4f7066 !important;
 border-color: #4f7066 !important;
}


/* Désactive tout soulignement au survol */
.wrap summary.faq:hover,
.wrap details.faq a:hover {
 color: #4f7066 !important;
 text-decoration: none !important;
}
<!-- =====================================================
BLOG — COMPARATIFS PRODUITS
Version SEO optimisée (Karine — Naturel Éthique, 2025-10-22)
===================================================== -->
.wrap{
 max-width:1000px;
 margin:0 auto;
 padding:0 8px;
 font-size:18px;
 line-height:1.7;
 color:#0f172a;
}
.wrap a{color:#0b5f4e;text-decoration:underline}
.wrap h1{margin:0 0 30px 0;line-height:1.25}
.muted{color:#475569}


/* Carte produit */
.prod-block{
 margin:28px auto 26px;
 border:1px solid #e5e7eb;
 background:#fff;
 border-radius:16px;
 padding:18px;
}


/* FIX — centre + pas de clipping + ratio stable */
.prod-photo{
 display:flex;
 justify-content:center;
 align-items:center;
 margin-top:6px;
 overflow:visible;
 padding-bottom:10px; /* anti-rognage bas */
}
.prod-photo img{
 max-width:320px;
 width:100%;
 height:auto;
 display:block;             /* supprime la baseline */
 object-fit:contain;
 box-sizing:border-box;
 border:1px solid #e5e7eb;
 border-radius:12px;
 transform:translateZ(0);   /* anti-glitch rare */
}


.prod-title{margin:16px 0 10px 0;line-height:1.25}
.prod-intro p{margin:10px 0}


/* Mini tableau comparatif */
.mini-table{width:100%;border-collapse:collapse;margin:12px 0 4px 0}
.mini-table th,.mini-table td{border:1px solid #e5e7eb;padding:12px;vertical-align:middle}
.mini-table th{background:#f8fafc;text-align:left;width:180px}
.stars{white-space:nowrap}


 /* Style pour la liste d'accès rapide */
.quick-access {
 margin: 18px auto 28px;
 padding-left: 22px;
 font-size: 18px;
 color: #0f172a;
 line-height: 1.7;
}


.quick-access ol {
 list-style: decimal inside;
 padding-left: 0;
 counter-reset: item;
}


.quick-access li {
 margin: 6px 0;
}


.quick-access li::marker {
 color: #4F7066; /* vert foncé Naturel-Éthique */
 font-weight: bold;
}


.quick-access a {
 color: #0b5f4e;
 text-decoration: underline;
}
.quick-access a:hover {
 color: #d57176;
 text-decoration: none;
}
/* === HARMONISATION COULEURS (Karine 2025-10-22) === */
.wrap,
.wrap p,
.wrap h2,
.wrap h3,
.wrap th,
.wrap td,
.wrap a {
 color: #4F7066; /* Vert thème Naturel-Éthique */
}


/* Lien au survol */
.wrap a:hover {
 color: #d57176;
 text-decoration: none;
}


/* Étoiles jaunes dorées */
.stars {
 color: #FFC000;
 font-weight: bold;
}


/* Légère touche sur le fond des cartes */
.prod-block {
 background: #ffffff; /* reste blanc pour le contraste */
 border-color: #d7e1dc; /* vert clair légèrement grisé */
}


/* Tableaux plus doux */
.mini-table th {
 background: #f9fbf9; /* vert très pâle */
 color: #4F7066;
}
.mini-table td {
 color: #4F7066;
}
/* === PATCH ÉTOILES JAUNES (Karine — 2025-10-22) === */
.mini-table td.stars,
.mini-table td .stars,
.stars {
 color: #FFC000 !important;   /* Jaune doré */
 font-weight: bold;
 letter-spacing: 1px;         /* légère aération visuelle */
}
background: #fffbea; /* fond crème léger pour cellules étoiles */

#ci .collection-intro .rte .page-width { 
  max-width: 1200px;
}
/* ==============================================================
KARINE — PATCH ESPACEMENTS HOMEPAGE
But : réduire les espaces verticaux entre sections (H2, grilles, blocs)
Date : 2025-10-27
================================================================ */

/* Réduit l’espace entre chaque section principale */
.index-section, .shopify-section {
  margin-top: 30px !important;  /* avant : ~60-80px selon le thème */
  margin-bottom: 30px !important;
}
/* EXCEPTION — pas d'espace entre annonce et header */
.shopify-section.announcement-bar { 
  margin-bottom: 0 !important; 
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.shopify-section[id^="shopify-section-header"],
.announcement-bar + .shopify-section-header,
.announcement-bar + .shopify-section-header .header-wrapper,
.announcement-bar + .shopify-section-header .header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Si un petit filet persiste, décommente la ligne suivante */
// .announcement-bar + .shopify-section-header .header-wrapper { margin-top: -2px !important; }

/* Resserre l’espace entre un H2 et la grille produits ou la liste */
h2, h3 {
  margin-bottom: 12px !important;  /* avant souvent 24-40px */
}

/* Réduit la marge supérieure des grilles produits */
.grid, .collection-list, .collection {
  margin-top: 10px !important;
}

/* Pour la section des meilleures ventes / featured collections */
.featured-collection, .featured-products {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Resserre la section newsletter et bas de page */
.footer, .newsletter-section {
  margin-top: 20px !important;
}

/* Optionnel : si tu veux que la page entière soit plus compacte */
main {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* ==============================================================
KARINE — PATCH ESPACEMENTS HOMEPAGE v2 (plus compact)
Date : 2025-10-27
================================================================ */


/* Resserre l'espace sous le H1 (titre principal du site) */
h1, .shopify-section h1 {
  margin-bottom: 16px !important;  /* avant souvent 40-60px */
}

/* H2 et H3 légèrement plus rapprochés du contenu suivant */
h2, h3 {
  margin-top: 14px !important;
  margin-bottom: 10px !important;
}

/* Réduit la marge au-dessus des grilles produits / listes */
.grid, .collection-list, .collection {
  margin-top: 6px !important;
}

/* Bannières et sections visuelles (comme “Des lubrifiants sains”) */
.section-banner, .image-banner, .image-with-text {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* Section newsletter / footer compacte */
.newsletter-section, .footer {
  margin-top: 16px !important;
}

/* Optionnel : homogénéise la densité de la page */
main {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* ==============================================================
KARINE — PATCH ESPACEMENTS SECTIONS COLLECTIONS HOMEPAGE
Objectif : uniformiser la distance entre "Soins intimes", 
"Accessoires hommes" et "Plaisirs féminins"
Date : 2025-10-27
================================================================ */

/* Cible uniquement les blocs de collections successifs sur la home */
.index-section + .index-section,
.shopify-section + .shopify-section {
  margin-top: 28px !important;   /* même espace partout */
}

/* Supprime le grand espace spécifique à la première section */
.index-section:first-of-type,
.shopify-section:first-of-type {
  margin-bottom: 28px !important;
}

/* Harmonise les paddings internes au cas où */
.index-section,
.shopify-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Optionnel : espace entre H2 et la grille (très léger) */
.index-section h2,
.shopify-section h2 {
  margin-bottom: 12px !important;
}

/* KARINE — 2025-10-27 — Supprime espace entre menu et haut de la page (Crave 15.04) */

/* 1. Supprimer marge + padding du header en haut de page */
header.header,
.header-wrapper,
.shopify-section-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2. Supprimer padding du conteneur de la première section (souvent le diaporama) */
.shopify-section:first-of-type,
.index-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. S’assurer qu’aucun pseudo-élément décoratif n’ajoute de vide */
.shopify-section:first-of-type::before,
.header-wrapper::before {
  content: none !important;
  display: none !important;
}

/* 4. Supprimer éventuellement la fine bordure/ombre parfois ajoutée par le thème */
.header-wrapper {
  box-shadow: none !important;
  border-bottom: none !important;
}
/* KARINE — 2025-10-27 — Élimination totale de l'espace entre barre d'annonces et menu (Crave 15.04) */

/* Supprimer toute marge et tout padding sur la barre d'annonce */
.shopify-section.announcement-bar,
.announcement-bar,
.announcement-bar__message {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Supprimer le padding supérieur du header */
.shopify-section.announcement-bar + .shopify-section-header,
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper,
.shopify-section.announcement-bar + .shopify-section-header .header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Certains thèmes ajoutent un léger pseudo-élément (trait ou ombre) entre les deux */
.shopify-section.announcement-bar::after,
.shopify-section.announcement-bar + .shopify-section-header::before,
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper::before {
  content: none !important;
  display: none !important;
}

/* Si un infime espace subsiste, colle-les visuellement */
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper {
  margin-top: -3px !important; /* ajuste à -2 ou -4 si besoin */
}
/* KARINE — 2025-10-27 — Zéro espace entre barre d'annonces et menu (Crave 15.04) */

/* 1) Annule TOUT ce qui ajoute de la hauteur dans la barre d’annonces */
.shopify-section.announcement-bar,
.shopify-section.announcement-bar .announcement-bar,
.shopify-section.announcement-bar .announcement-bar__message,
.shopify-section.announcement-bar .page-width {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.1 !important;   /* évite un saut de ligne généreux */
}

/* 2) Pas d’espace en haut du header collé à la barre d’annonce */
.shopify-section.announcement-bar + .shopify-section-header,
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper,
.shopify-section.announcement-bar + .shopify-section-header .header {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;   /* certains thèmes tracent un filet */
}

/* 3) Coupe les pseudo-éléments décoratifs éventuels */
.shopify-section.announcement-bar::after,
.shopify-section.announcement-bar + .shopify-section-header::before,
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper::before {
  content: none !important;
  display: none !important;
}

/* 4) Dernier millimètre : colle visuellement (ajuste -1 → -2 si besoin) */
.shopify-section.announcement-bar + .shopify-section-header .header-wrapper {
  margin-top: -1px !important;
}

/* 5) Sécurité si deux barres d’annonces sont actives à la suite */
.shopify-section.announcement-bar + .shopify-section.announcement-bar {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Ne pas appliquer le margin-bottom global à la barre d'annonces ni au header */
.index-section,
.shopify-section:not(.announcement-bar):not([id^="shopify-section-header"]) {
  margin-top: 0 !important;
  margin-bottom: 5px !important; /* ou 0 si tu veux zéro espace global */
}

/* Listes "centrées visuellement mais texte aligné à gauche" */
.centered-list { display: grid; place-items: center; }
.centered-list ul, .centered-list dl { 
  margin: var(--ne-space-md) auto; 
  text-align: left; 
}

/* DL propre, sans <br> dans le HTML */
.centered-list dl { max-width: 72ch; }
.centered-list dl dt {
  font-weight: 700;
  margin-top: 0.9rem;   /* espace avant chaque terme */
}
.centered-list dl dd {
  margin: .25rem 0 0.75rem 0; /* espace sous la définition */
}

/* Tableaux : caption discret + respiration cohérente */
.tbl caption {
  caption-side: top;
  font-weight: 600;
  margin-bottom: .5rem;
  text-align: left;
}

/* Titres avec emoji accessibles */
h3 .emoji { aria-hidden: true; }
.tbl th,
.tbl td {
  text-align: left;              /* lisibilité maximale */
  vertical-align: top;           /* évite le texte “au milieu” */
  padding: 0.6em 0.8em;
  line-height: 1.5;
}

/* Option : centrer seulement les titres si tu veux une esthétique plus rigide */
.tbl th {
  text-align: center;
  font-weight: 700;
}
/* ---------- Paragraphes discrets (muted) en vert + italique ---------- */
p.muted {
  color: #4F7066 !important;     /* ton vert de marque */
  font-style: italic;            /* italique */
  font-size: 15px;            /* un peu plus fin que le corps du texte */
  line-height: 1.6;
  text-align: left;
  margin: var(--ne-space-md) 0;
}

/* Lien à l'intérieur du paragraphe muted : vert foncé, soulignement léger au survol */
p.muted a {
  color: #4F7066;
  text-decoration: underline dotted;
  transition: opacity 0.2s ease;
}

p.muted a:hover {
  opacity: 0.8;
}

/* Optionnel : icône ou emoji initial légèrement plus clair */
p.muted::first-letter {
  color: #4F7066;
}

/* === HOTFIX — Cartes mobile : pas de trait dans la dernière carte + angles doux === */
@media (max-width: 767.98px) {

  /* 1) Supprime le séparateur interne de la DERNIÈRE carte */
  .ne-table tr:last-child td,
  .tbl tr:last-child td {
    border-bottom: 0 !important; /* annule le "rétablit le trait" précédent */
  }

  /* 2) Angles plus arrondis sur les cartes et leurs wrappers */
  :root { --ne-radius: 18px; } /* ↑ mets 20px ou 24px si tu préfères */

  .ne-table tr,
  .tbl tr,
  .ne-table,
  .tbl,
  .ne-table-wrap,
  .tbl-wrap {
    border-radius: var(--ne-radius) !important;
    overflow: hidden; /* évite tout “carré sec” */
  }
}

.mini-visuel {
  text-align: center;
  margin: 0.5rem auto 1rem;
}
.mini-visuel img {
  max-width: 120px; /* Taille discrète */
  height: auto;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.3s ease-in-out;
}
.mini-visuel img:hover {
  opacity: 1;
}
/* Rapprocher le fil d’Ariane du H1 – MOBILE SEULEMENT */
@media screen and (max-width: 749px) {
  nav.breadcrumbs,
  .breadcrumbs,
  .breadcrumb,
  .breadcrumb__list {
    margin-bottom: 6px !important;   /* ↓ espace sous le fil d’Ariane */
  }

  /* différents thèmes/variantes de H1 */
  .collection-hero__title,
  .collection-hero .title-wrapper,
  .section-header h1,
  .page-header h1,
  h1.title,
  h1.page-title,
  h1.h0 {
    margin-top: 6px !important;      /* ↓ espace au-dessus du H1 */
  }
}
/* =========================================================
   PATCH UX ACCORDÉONS — Naturel & Ethique
   Aération + fonds alternés
   S'applique à tout bloc .ne-accordion
   ========================================================= */

.ne-accordion {
  max-width: 720px;              /* colonne lisible, centrée */
  margin: 2.5rem auto 3rem;      /* air au-dessus / au-dessous */
}

/* Chaque <details> devient une “carte” arrondie, bien séparée */
.ne-accordion > details {
  margin: 0.5rem 0;              /* espace vertical entre les accordéons */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(79, 112, 102, 0.18);  /* #4f7066 très léger */
}

/* Fonds alternés dans ta palette (vert clair / vert moyen) */
.ne-accordion > details:nth-of-type(odd) {
  background-color: rgba(166, 215, 155, 0.18); /* #a6d79b doux */
}

.ne-accordion > details:nth-of-type(even) {
  background-color: rgba(99, 140, 128, 0.10);  /* #638c80 très subtil */
}

/* Titre cliquable : un peu de padding pour le confort */
.ne-accordion > details > summary {
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  list-style: none;              /* enlève la puce par défaut si besoin */
}

/* Masque la flèche native pour éviter le doublon avec ta caret ▼ */
.ne-accordion > details > summary::-webkit-details-marker {
  display: none;
}

/* Contenu interne : on évite que le texte colle aux bords */
.ne-accordion > details > div {
  padding: 0 1.6rem 1.2rem;
}

/* ===== Variante mobile : un peu moins de padding, toujours aéré ===== */
@media (max-width: 640px) {
  .ne-accordion {
    max-width: 100%;
    padding-inline: 4px;
  }

  .ne-accordion > details {
    margin: 0.35rem 0;
    border-radius: 16px;
  }

  .ne-accordion > details > summary {
    padding: 0.6rem 1rem;
  }

  .ne-accordion > details > div {
    padding: 0 1.1rem 1rem;
  }
}

/* --- Desktop : barre d'annonce une seule ligne --- */
section-announcement-bar .announcement-bar__message,
.announcement-bar__message span,
.announcement-bar__message p {
  white-space: nowrap;
}

/* --- Mobile : barra d'annonce on autorise la ligne à revenir + texte un peu plus petit --- */
@media (max-width: 749px) {
  .section-announcement-bar .announcement-bar__message,
  .announcement-bar__message span,
  .announcement-bar__message p {
    white-space: normal;     /* autorise le retour à la ligne */
    font-size: 16px;         /* un peu plus petit que tes 20px actuels */
    text-align: center;
  }
}


/* =========================================================
   ACCORDÉONS VERSION ESPAGNE — PALETTE ALTERNÉE
   Couleurs utilisées :
   1. #e88982 (rose doux)
   2. #6c8a6b (vert)
   3. #c8102e (rose foncé)
   4. #ffc400 (jaune)
   5. #ff6f61 (corail)
   ========================================================= */

.ne-accordion--es > details {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 1) Características & puntos fuertes — rose doux */
.ne-accordion--es > details:nth-of-type(1) {
  background-color: rgba(232, 137, 130, 0.18); /* #e88982 */
}

/* 2) Consejos de uso — vert */
.ne-accordion--es > details:nth-of-type(2) {
  background-color: rgba(108, 138, 107, 0.20); /* #6c8a6b */
}

/* 3) Recarga y mantenimiento — rose foncé */
.ne-accordion--es > details:nth-of-type(3) {
  background-color: rgba(200, 16, 46, 0.16); /* #c8102e léger */
}

/* 4) Ficha técnica — jaune */
.ne-accordion--es > details:nth-of-type(4) {
  background-color: rgba(255, 196, 0, 0.18); /* #ffc400 */
}

/* 5) FAQ – Preguntas frecuentes — corail */
.ne-accordion--es > details:nth-of-type(5) {
  background-color: rgba(255, 111, 97, 0.18); /* #ff6f61 */
}

/* Summary lisible sur toutes les couleurs */
.ne-accordion--es > details > summary {
  font-weight: 600;
}
/*/* ================================================
   AMÉLIORATION : accordéons plus larges + espaces
   ================================================ */

/* Augmente la largeur des panneaux eux-mêmes */
.ne-accordion--es > details {
  width: 95%;                /* élargit l’accordéon */
  margin: 0 auto 14px auto;  /* ajoute un espace entre chaque bloc */
  padding-left: 10px;        /* espace intérieur léger */
  padding-right: 10px;
}

/* Option : augmenter un peu l’épaisseur visuelle du titre */
.ne-accordion--es > details > summary {
  padding: 12px 18px;
}

/* Option : contenu plus aéré à l’intérieur */
.ne-accordion--es > details > div {
  padding: 16px 18px;
}
/* Même hauteur pour tous les titres d'accordéons ES */
.ne-accordion--es > details > summary {
  display: flex;
  align-items: center;      /* centre verticalement le texte */
  justify-content: space-between; /* texte à gauche, flèche à droite (si tu as un span) */
  min-height: 56px;         /* ajuste la valeur selon la hauteur du premier bloc */
  padding: 12px 18px;       /* un peu d'air autour */
  box-sizing: border-box;
}

/* ===========================================
   DDL Espagne – Espacement amélioré DT / DD
   (Karine – Intimo Natural)
   =========================================== */

/* Soulignement + stylisation des <dt> */
.ne-accordion--es dt {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
  color: #4F7066; /* vert de ta palette */
  margin-top: 1rem;            /* ↑ espace avant le DT */
  margin-bottom: 0.55rem;      /* ↑ meilleure séparation DT → DD */
}

/* Espacement des <dd> */
.ne-accordion--es dd {
  margin: 0 0 1rem 0;          /* ↑ plus d’air sous le paragraphe */
  line-height: 1.7;            /* lisibilité douce */
}


/* ===========================================
   Espagne – Plus d’espace entre les items 1,2,3,4,5
   (Consejos de uso)
   =========================================== */

.ne-accordion--es ol > li {
  margin-bottom: 0.9rem;   /* ↑ plus d’air */
  line-height: 1.7;        /* lisibilité douce */
}

/* Option : si le dernier li colle trop au texte suivant */
.ne-accordion--es ol > li:last-child {
  margin-bottom: 1.1rem;
}
/* ===========================================
   Espagne – Fiche técnica : première colonne en gras
   =========================================== */

.ne-accordion--es .tbl td:first-child,
.ne-accordion--es .tbl th:first-child {
  font-weight: 700 !important;   /* Texte en gras */
  color: #4F7066;                /* cohérent avec ta palette */
}
/* Aération titres → paragraphes */
.ne-accordion--es h3 {
  margin-bottom: 1.2rem; /* espace sous le titre */
  margin-top: 1.4rem; /* espace avant le titre suivant */
}

/* Aération paragraphes */
.ne-accordion--es p {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}
/* 6) Compromiso body-safe & garantías — vert doux */
.ne-accordion--es > details:nth-of-type(6) {
  background-color: rgba(108, 138, 107, 0.18); /* #6c8a6b adouci */
}

/* =========================================================
   ACCORDÉONS FICHE COLLECTION — VERSION ESPAGNE 
   IDENTIQUES AUX FICHES PRODUITS (mêmes couleurs / mêmes espacements)
   ========================================================= */

.ne-accordion-collection-es > details {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  width: 95%;
  margin: 0 auto 14px auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* Couleurs alternées — même palette que produits */
.ne-accordion-collection-es > details:nth-of-type(1) {
  background-color: rgba(232,137,130,0.18); /* rose doux */
}

.ne-accordion-collection-es > details:nth-of-type(2) {
  background-color: rgba(108,138,107,0.20); /* vert */
}

.ne-accordion-collection-es > details:nth-of-type(3) {
  background-color: rgba(200,16,46,0.16); /* rose foncé */
}

.ne-accordion-collection-es > details:nth-of-type(4) {
  background-color: rgba(255,196,0,0.18); /* jaune */
}

.ne-accordion-collection-es > details:nth-of-type(5) {
  background-color: rgba(255,111,97,0.18); /* corail (FAQ) */
}

/* Summary identiques aux fiches produits */
.ne-accordion-collection-es > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 12px 18px;
  font-weight: 600;
  box-sizing: border-box;
}

/* Contenu interne */
.ne-accordion-collection-es > details > div {
  padding: 16px 18px;
}

/* ===========================================
   TITRES H3 — aération identique produit
   =========================================== */
.ne-accordion-collection-es h3 {
  margin-top: 1.4rem;
  margin-bottom: 1.2rem;
}

/* ===========================================
   Paragraphes — aération identique produit
   =========================================== */
.ne-accordion-collection-es p {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* ===========================================
   DT / DD — DDL IDENTIQUE FICHES PRODUITS
   =========================================== */

.ne-accordion-collection-es dt {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
  margin-top: 1rem;
  margin-bottom: 0.55rem;
  color: #4F7066;
}

.ne-accordion-collection-es dd {
  margin: 0 0 1rem 0;
  line-height: 1.7;
}

/* ===========================================
   LISTES — même rendu mobile produit
   =========================================== */
.ne-accordion-collection-es ul,
.ne-accordion-collection-es ol {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  padding-left: 0;
}

.ne-accordion-collection-es li {
  margin-bottom: 0.9rem;
  line-height: 1.7;
}

/* ===========================================
   TABLEAUX — même style que produit
   =========================================== */
.ne-accordion-collection-es .tbl td:first-child,
.ne-accordion-collection-es .tbl th:first-child {
  font-weight: 700 !important;
  color: #4F7066;
}
/* ================================
   TITRES CENTRÉS + SOULIGNÉS
   pour les fiches collections ES
   ================================ */

.ne-accordion--es h3 {
  text-align: center;
  font-weight: 400;
  color: #4F7066; /* ton vert NaturelEthic */
  margin-top: 1.8rem;
  margin-bottom: 2.2rem;

  /* Soulignement propre */
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
/* Cartes texte pour fiches COLLECTION ES */
.ne-accordion--es .card-list {
  max-width: 52rem;
  margin: 0 auto;
}

.ne-accordion--es .card-item {
  margin-bottom: 1.4rem;
}

.ne-accordion--es .card-item-title {
  display: block;
  text-align: center;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.2px;
  color: #4F7066; /* ton vert Naturel&Ethique */
  margin-bottom: 0.6rem;
}

.ne-accordion--es .card-item-text {
  margin: 0;
  text-align: left;
  line-height: 1.7;
}
/* ===========================================
   FAQ — Harmonisation avec les autres blocs
   =========================================== */

/* Transforme la FAQ Shopify en accordéon identique */
.ne-accordion--es details.faq,
details.faq {
  width: 95%;
  margin: 0 auto 14px auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  background-color: rgba(255, 111, 97, 0.18); /* couleur corail pastel */
}

/* Summary FAQ même style */
details.faq > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-weight: 600;
  color: #4F7066;
  cursor: pointer;
  min-height: 56px;
}

/* Contenu interne : même aération */
details.faq > div {
  padding: 18px 20px;
}

/* Esthétique des questions */
details.faq p strong {
  color: #4F7066;
  font-weight: 700;
}

/* Aération entre les Q/R */
details.faq p {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}
.ne-accordion--es details > summary {
  text-align: center !important;
}

.ne-accordion--es details > summary strong {
  display: inline-block;
  width: 100%;
  text-align: center !important;
}

/* ===== Personnalisation bloc avis Judge.me ===== */

/* Couleur des étoiles */
.jdgm-star,
.jdgm-star.jdgm--on,
.jdgm-prev-badge__stars,
.jdgm-rev__rating .jdgm-star {
  color: #ffc400 !important;
}

/* Bouton "Écrire un avis" et autres boutons Judge.me */
.jdgm-write-rev-link,
.jdgm-btn,
.jdgm-btn.jdgm-btn--primary {
  background-color: #4F7066 !important;
  border-color: #4F7066 !important;
  color: #ffffff !important;
}

/* Pastille "Vérifié" */
.jdgm-rev__buyer-badge {
  background-color: #4F7066 !important;
  border-color: #4F7066 !important;
  color: #ffffff !important;
}

/* Liens dans le bloc avis (ex: Plus récents, etc.) */
.jdgm-sort-dropdown,
.jdgm-sort-dropdown button,
.jdgm-rev__author,
.jdgm-rev__timestamp {
  color: #4F7066 !important;
}

/* Optionnel : encadré général des avis */
.jdgm-all-reviews-widget,
.jdgm-rev-widg {
  border-radius: 8px;
  border: 1px solid #4F70661a; /* vert très léger */
}

/* ===== ESPACEMENTS AUTOUR DU WIDGET JUDGE.ME ===== */

/* Espace au-dessus du bloc Avis */
#judgeme_product_reviews,
.jdgm-all-reviews-widget,
.jdgm-widget {
  margin-top: 150px !important; /* augmente si tu veux encore plus */
}

/* Espace en-dessous du bloc Avis (avant "produits associés") */
#judgeme_product_reviews,
.jdgm-all-reviews-widget,
.jdgm-widget {
  margin-bottom: 60px !important;
}

/* === JUDGE.ME - VERSION ESPAGNOLE (INTIMONATURAL.ES) === */
/* On cible uniquement les pages où la langue HTML est "es" */
html[lang="es"] .jdgm-rev-widg__title {
  font-size: 0; /* on cache le texte FR */
}

html[lang="es"] .jdgm-rev-widg__title::after {
  content: "Opiniones de clientes";
  font-size: 2.4rem;    /* adapte si besoin */
  font-weight: 400;
}

/* Texte "Soyez le premier à écrire un avis" */
html[lang="es"] .jdgm-rev-widg__summary .jdgm-rev-widg__summary-text {
  font-size: 0;
}

html[lang="es"] .jdgm-rev-widg__summary .jdgm-rev-widg__summary-text::after {
  content: "Sé el primero en escribir una reseña";
  font-size: 1.6rem;
}

/* Bouton "Écrire un avis" */
html[lang="es"] .jdgm-write-rev-link {
  font-size: 0;
}

html[lang="es"] .jdgm-write-rev-link::after {
  content: "Escribir una reseña";
  font-size: 1.6rem;
  display: inline-block;
}
/* =============================== */
/*    Checkout Naturel Ethique     */
/*      Bordures eucalyptus        */
/* =============================== */

/* Bordures des champs */
.input__field,
.field__input,
.select__select,
.checkbox__input {
  border-color: #4F7066 !important;
  box-shadow: none !important;
}

/* Focus (quand l’utilisateur clique dans un champ) */
.input__field:focus,
.field__input:focus,
.select__select:focus {
  border-color: #4F7066 !important;
  box-shadow: 0 0 0 2px rgba(79,112,102,0.25) !important; /* eucalyptus doux */
}

/* Bordures des zones distinctes (ex: adresse, livraison…) */
.section__content {
  border-color: #4F7066 !important;
}

/* Bouton principal (valider la commande) */
.button--primary {
  background-color: #4F7066 !important;
  border-color: #4F7066 !important;
  color: #ffffff !important;
}

/* Hover du bouton */
.button--primary:hover {
  background-color: #3f5f57 !important;
  border-color: #3f5f57 !important;
}