/** Shopify CDN: Minification failed

Line 1604:5 Unexpected "="
Line 1749:11 Expected identifier but found whitespace
Line 1749:19 Unexpected ";"

**/
/* ==================================================================
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;
}
}

/* =========================================================
HOTFIX ULTRA — CENTRAGE DESCRIPTION COLLECTION
Corrige l'alignement à gauche du bloc .collection-hero__description
sur les thèmes Dawn / Crave.
========================================================= */

body.template-collection .collection-hero,
body.template-collection .collection-hero__inner,
body.template-collection .collection-hero__text-wrapper,
body.template-collection .collection-hero__description {
  display: block;
  width: 100%;
  max-width: 1000px;         /* limite la largeur pour un rendu équilibré */
  margin-inline: auto;       /* équivaut à margin-left/right: auto */
  text-align: center;
}

/* ✅ Variante plus stricte pour s’assurer du centrage vertical et textuel */
body.template-collection .collection-hero__description > * {
  text-align: center;        /* force le centrage des paragraphes internes */
  margin-left: auto;
  margin-right: auto;
}

/* ✅ Optionnel : ajuste l’espacement vertical sous le titre */
body.template-collection .collection-hero__description {
  padding: 0 1rem 1.5rem;
  line-height: 1.6;
}

/* =========================================================
STYLISATION DU TEXTE — Bloc .collection-hero__description
Centrage et lisibilité du texte descriptif des pages collection
========================================================= */

body.template-collection .collection-hero__description :where(p, li) {
  text-align: center;        /* centre le contenu textuel */
  margin-inline: auto;       /* remplace margin-left/right: auto */
  line-height: 1.7;          /* hauteur de ligne confortable */
  color: #4F7066;            /* vert Naturel-Éthique */
  max-width: 800px;          /* limite de lecture pour éviter les lignes trop longues */
}

/* ✅ Variante mobile : un peu plus de lisibilité et aération */
@media (max-width: 767.98px) {
  body.template-collection .collection-hero__description :where(p, li) {
    padding-inline: 1rem;    /* petit padding horizontal pour respirer sur smartphone */
    font-size: 0.95rem;      /* réduit légèrement la taille si ton thème grossit trop */
    line-height: 1.8;
  }
}

/* =========================================================
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: 1.8rem;        /* 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: center;       /* 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;
  }
}

/* =========================================================
PATCH TABLEAUX v4 — ajout ligne sous entête (th)
KARINE — 2025-10-21
- Traits fins (0.7px)
- Coins arrondis
- Couleur uniforme (avec fallback)
- Liens sans bordure (mais focus conservé)
- Ligne sous le header ajoutée
========================================================= */

.ne-table, .tbl {
  --ne-border-width: 0.7px;
  --ne-border-color: var(--ne-border-color, #d9e3df);  /* fallback sécurisé */
  position: relative;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--ne-radius, 12px);
  background: transparent;
  /* Cadre externe ultra fin */
  box-shadow: inset 0 0 0 var(--ne-border-width) var(--ne-border-color);
}

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

/* Grille interne uniforme */
.ne-table th, .ne-table td,
.tbl th, .tbl td {
  border: 0;
  border-right: var(--ne-border-width) solid var(--ne-border-color);
  border-bottom: var(--ne-border-width) solid var(--ne-border-color);
}

/* Style d’en-tête cohérent sur les 2 variantes */
.ne-table th,
.tbl th {
  font-style: italic;
  font-size: 17px;
}

/* Première colonne : ajoute le trait gauche */
.ne-table tr > *:first-child,
.tbl tr > *:first-child {
  border-left: var(--ne-border-width) solid var(--ne-border-color);
}

/* Dernière ligne : pas de trait bas (cadre externe déjà présent) */
.ne-table tr:last-child > *,
.tbl tr:last-child > * {
  border-bottom: 0;
}

/* ✅ Ligne sous l'entête (ajout spécifique) */
.ne-table thead tr:last-child > *,
.tbl thead tr:last-child > * {
  border-bottom: var(--ne-border-width) solid var(--ne-border-color);
}

/* Liens : supprime uniquement les bordures, conserve le focus clavier */
.ne-table a, .tbl a {
  border: 0;
  text-decoration: underline;         /* option : assure la lisibilité des liens */
}
/* Focus visible (si tu as déjà un style global, tu peux omettre cette redondance) */
.ne-table a:focus, .tbl a:focus {
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}

/* Aération globale (ok) */
.wrap-collection p,
.wrap-page p,
.wrap-article p {
  margin-bottom: 1.2em;
  line-height: 1.7;
}

/* ——— Option mobile "cards" (si activée ailleurs) : éviter les doubles traits ——— */
@media (max-width: 767.98px) {
  /* Si td/tr deviennent display:block, on neutralise le séparateur vertical */
  .ne-table td, .tbl td {
    border-right: 0;
  }
  /* On peut aussi adoucir l’épaisseur en mobile si besoin
  .ne-table td, .tbl td { border-bottom-width: 0.5px; }
  */
}


/* ===========================================================
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;
}

/* =====================================================================
1) LIENS — CONTENU (inclut TABLEAUX) — VERSION CONSOLIDÉE
Portée : uniquement contenus RTE (articles, pages, descriptions collection, .rte/.prose)
— même rendu que ton bloc initial (couleur, gras, sans souligné) —
===================================================================== */

:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .rte,
  .prose
) a {
  color: var(--ne-link-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  transition: color .2s ease-in-out;
}

/* Survol / focus clavier : même couleur hover, pas de souligné */
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .rte,
  .prose
) a:hover,
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .rte,
  .prose
) a:focus-visible {
  color: var(--ne-link-hover);
  text-decoration: none;
  border-bottom: 0;
  /* on NE supprime PAS le focus outline ici pour accessibilité ;
     si tu veux un focus discret :
     outline: 2px dashed currentColor; outline-offset: 2px; */
}

/* Visited : même couleur que l’état normal (comme avant) */
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .rte,
  .prose
) a:visited {
  color: var(--ne-link-color);
}

/* Tableaux : éviter les débordements de longues URLs */
:where(
  .template-article .article-template__content,
  .template-page .page__content,
  .template-collection .collection__description,
  .rte,
  .prose
) table a {
  overflow-wrap: anywhere;      /* casse élégante des très longues URLs */
  word-break: break-word;       /* secours pour anciens navigateurs */
}


/*Verification CSS rendue ici*/

/* =====================================================================
2) TABLEAUX — PATCH V4 (UNIQUE) — LIGNES FINES + ANGLES ARRONDIS
Remplace les doublons du “PATCH TABLEAUX v4”. Garde ton rendu existant.
--------------------------------------------------------------------- */
.template-collection .collection__description table,
.template-page .page__content table,
.template-article .article-template__content table,
.rte table, .prose table {
width: 100%;
border-collapse: separate;     /* pour arrondis sans trous */
border-spacing: 0;
border: var(--ne-border-width) solid var(--ne-border-color);
border-radius: var(--ne-radius);
overflow: hidden;              /* évite les ‘trous’ d’angle */
}








.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);
border-bottom: var(--ne-border-width) solid var(--ne-border-color);
border-right: var(--ne-border-width) solid var(--ne-border-color);
}








/* Supprime la bordure de la dernière ligne/colonne pour un contour net */
.template-collection .collection__description tr:last-child td,
.template-page .page__content tr:last-child td,
.template-article .article-template__content tr:last-child td,
.rte tr:last-child td, .prose tr:last-child td {
border-bottom: 0;
}
.template-collection .collection__description th:last-child,
.template-collection .collection__description td:last-child,
.template-page .page__content th:last-child,
.template-page .page__content td:last-child,
.template-article .article-template__content th:last-child,
.template-article .article-template__content td:last-child,
.rte th:last-child, .rte td:last-child, .prose th:last-child, .prose td:last-child {
border-right: 0;
}








/* Séparation entête/ligne 1 manquante (ta demande) */
.template-collection .collection__description thead tr th,
.template-page .page__content thead tr th,
.template-article .article-template__content thead tr th,
.rte thead tr th, .prose thead tr th {
border-bottom: var(--ne-border-width) solid var(--ne-border-color);
}








/* =====================================================================
3) FAQ — HARMONISATION MULTI‑TEMPLATES (centrée + flèche “❓ ▼”)
À utiliser avec <summary class="faq">…❓</summary> (pas besoin d’ajouter ▼ en HTML).
--------------------------------------------------------------------- */
: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;
}








: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;
}








: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 légèrement plus basse */
gap: .25em;
list-style: none;
}
summary.faq::-webkit-details-marker { display: none !important; }








/* Flèche ▼ collée au ❓ */
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);
}








/* Hover en harmonie avec ta palette */
summary.faq:hover,
summary.faq:hover::after {
color: var(--ne-link-hover);
}








/* =====================================================================
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) ---------- */
: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;           /* espace par défaut entre blocs */
--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 */
}




/* Rythme vertical “flow” : chaque élément après un autre prend un espace doux */
: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 un peu 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 !important;
border: 0 !important;
transition: color .2s ease-in-out;
}
: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,
: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: none !important;
outline: none;
}




/* ---------- 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 : centrée, une seule flèche (ta <span class="faq-caret">), respiration ---------- */
details.faq{
display: block;
width: 100%;
text-align: center;
margin: var(--ne-space-xl) auto;     /* espace avant/après la FAQ */
}
summary.faq{
display: inline-flex;
align-items: center;
gap: .3em;
list-style: none;
margin: 0 auto;
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;
}
/* retire la flèche native */
summary.faq::-webkit-details-marker{ display:none !important; }
summary.faq::marker{ content:'' !important; }
/* on neutralise toute flèche ::after précédente (évite les doublons) */
summary.faq::after{ content:none !important; }




/* TA flèche uniquement */
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;           /* reste verte, même au hover */
}
details[open] > summary.faq .faq-caret{
transform: rotate(180deg) translateY(-1px);
}
summary.faq:hover .faq-caret{ color:#4F7066 !important; }




/* contenu FAQ sous le titre, centré, lisible */
details.faq > *:not(summary){
max-width: 1000px;
margin: var(--ne-space-sm) auto 0;
text-align: left;
}




/* ---------- Petits ajustements de confort ---------- */
/* espace supplémentaire avant le footer quand il y a une FAQ en fin de page */
details.faq:last-child{ margin-bottom: calc(var(--ne-space-xl) + 12px); }




/* é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;
}