/** Shopify CDN: Minification failed

Line 220:0 Unexpected "}"

**/
/* ======================================================= */
/* DESIGN "CARTE" AVEC NUMÉROTATION HIÉRARCHIQUE (1. / 1.1)
/* ======================================================= */

/* 1. Style de la carte principale (inchangé) */
#toc-container {
  background-color: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  padding: 25px 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
  margin-bottom: 2.5rem;
}

/* 2. Style du titre "Sommaire" (inchangé) */
#toc-container .text-h3 {
  text-decoration: none !important;
  padding-bottom: 15px !important;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: 1px solid #eeeeee;
}
.toggle-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #333;
}

.toggle-btn:hover {
  color: #007BFF;
}

ul {
  padding-left: 20px;
}


/* 3. NOUVEAU : Logique de numérotation avec des compteurs CSS */
#toc-container ul {
  list-style-type: none !important;
  padding-left: 0 !important;
  margin: 0;
  counter-reset: h2-counter; /* On initialise le compteur principal (pour les 1, 2, 3...) */
}

/* 4. Style pour les titres de NIVEAU 1 (H2) */
#toc-container .toc-level-1 {
  counter-reset: h3-counter; /* À chaque H2, on réinitialise le compteur des sous-titres */
  font-weight: 600; /* On met les titres principaux un peu plus en évidence */
  margin-bottom: 12px;
}

#toc-container .toc-level-1::before {
  counter-increment: h2-counter; /* On incrémente le compteur principal */
  content: counter(h2-counter) ". "; /* On affiche "1. ", "2. ", etc. */
  margin-right: 6px;
}

/* 5. Style pour les titres de NIVEAU 2 (H3) */
#toc-container .toc-level-2 {
  margin-left: 25px; /* On indente les sous-titres pour la clarté */
  margin-bottom: 10px;
  font-weight: 400; /* Police normale pour les sous-titres */
}

#toc-container .toc-level-2::before {
  counter-increment: h3-counter; /* On incrémente le compteur des sous-titres */
  content: counter(h2-counter) "." counter(h3-counter) ". "; /* On affiche "1.1. ", "1.2. ", etc. */
  margin-right: 6px;
}

/* 6. Style des liens (inchangé) */
/* Style des liens (NOUVELLE VERSION EN NOIR) */
#toc-container a {
  text-decoration: none;
  color: #000000; /* On met le texte en noir */
  transition: color 0.2s ease;
}

/* On peut mettre une couleur gris foncé au survol pour un effet subtil */
#toc-container a:hover {
  text-decoration: underline;
  color: #555555; 
}
/* ============================================= */
/* CORRECTION FINALE POUR LES PUCES FANTÔMES
/* ============================================= */

/* On cible spécifiquement le pseudo-élément que l'on a découvert
   et on lui dit de ne rien afficher et de disparaître. */
#toc-container li::before {
  content: "" !important;
  display: none !important;
}

/* ============================================= */
/* DESIGN COMPLET POUR LA SECTION FAQ
/* ============================================= */

/* 1. On stylise le conteneur principal de la FAQ */
.faq-section {
  margin-top: 3rem; /* Espace conséquent au-dessus de la section */
  border: 1px solid #e9e9e9; /* Bordure grise claire */
  border-radius: 12px;     /* Bords arrondis */
  padding: 1rem 2rem 2rem 2rem; /* Espace intérieur pour aérer */
  background-color: #fcfcfc; /* Un fond très légèrement grisé pour le distinguer */
}

/* 2. On améliore le titre "Foire aux questions" */
.faq-section h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2rem; /* Espace sous le titre */
  padding-bottom: 1rem;
  border-bottom: 1px solid #eeeeee; /* Ligne de séparation */
}

/* 3. On stylise chaque élément "question/réponse" */
.faq-section details {
  border-bottom: 1px solid #eeeeee; /* Ligne de séparation entre les questions */
  padding: 1.5rem 0; /* Espace vertical pour chaque question */
}

/* On retire la bordure du tout dernier élément pour un fini parfait */
.faq-section details:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* 4. On stylise la question cliquable */
.faq-section summary {
  font-weight: 500;
  font-size: 1.1rem;
  color: #333;
  cursor: pointer; /* Le curseur se transforme en main pour indiquer que c'est cliquable */
  position: relative; /* Nécessaire pour positionner notre icône personnalisée */
  padding-right: 2rem; /* Espace à droite pour l'icône +/-, pour éviter que le texte ne passe dessous */
  list-style: none; /* Force la suppression des puces */
}

/* On s'assure de cacher la flèche par défaut sur tous les navigateurs */
.faq-section summary::-webkit-details-marker {
    display: none;
}


/* 5. On crée notre propre icône "+" et "-" */
.faq-section summary::after {
  content: '+'; /* Par défaut, on affiche un "+" */
  font-size: 1.8rem;
  font-weight: 300;
  color: #888;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease-in-out;
}

/* Quand la question est ouverte, on transforme le "+" en "-" */
.faq-section details[open] > summary::after {
  content: '−'; /* C'est un vrai signe "moins", pas un tiret */
}

/* 6. On stylise le bloc de la réponse qui s'ouvre */
.faq-section details > div {
  margin-top: 1rem; /* Espace entre la question et la réponse */
  padding-left: 0.5rem; /* Léger décalage à gauche */
  line-height: 1.7; /* Hauteur de ligne confortable pour la lecture */
  color: #555; /* Un gris foncé, moins dur que le noir pur */
}

/* ============================================= */
/* NOUVEAU DESIGN "CARTE" POUR LA BOÎTE D'AUTEUR
/* ============================================= */

.author-box {
  margin-top: 4rem;
  /* On crée un vrai conteneur "carte" */
  background-color: #f9fafb; /* Un gris très clair et moderne */
  border: 1px solid #e5e7eb; /* Bordure assortie */
  border-radius: 16px;       /* Bords un peu plus arrondis */
  padding: 24px;             /* Espace intérieur uniforme */
  
  /* C'est ici que la magie de l'alignement opère */
  display: flex;
  align-items: center; /* On centre verticalement l'image et le texte */
  gap: 24px;           /* On augmente un peu l'espace entre l'image et le texte */

  /* On retire l'ancienne bordure du haut qui n'est plus nécessaire */
  border-top: none !important;
}

/* 1. On stylise le CONTENEUR de l'image pour qu'il devienne le cercle */
.author-box__avatar {
  width: 80px;
  height: 80px;
  min-width: 80px; /* Empêche le conteneur de se réduire */
  border-radius: 50%;
  overflow: hidden; /* C'est la clé : on cache tout ce qui dépasse du cercle */
}

/* 2. On dit à l'IMAGE de remplir 100% de son nouveau conteneur (le cercle) */
.author-box__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cette règle s'assurera que l'image n'est pas déformée à l'intérieur */
}
}
.author-box__info {
  /* Pas de style spécifique nécessaire ici, il s'adapte automatiquement */
}

.author-box__label {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 0 2px 0;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.author-box__name {
  font-size: 1.15rem;
  font-weight: 700; /* Plus d'impact */
  color: #111827;
  margin: 0;
}

.author-box__bio {
  font-size: 0.95rem;
  color: #4b5563;
  margin: 8px 0 0 0;
  line-height: 1.6;
}
/* ============================================= */
/* AJUSTEMENT DE LA TAILLE DES TITRES SUR MOBILE
/* ============================================= */

/* Cette règle ne s'appliquera que sur les écrans de 768px de large ou moins */
@media (max-width: 768px) {

  /* On cible les titres H2 à l'intérieur du contenu de l'article */
  .article-wrapper h2 {
    font-size: 1.6rem; /* Ajustez cette valeur selon vos préférences */
  }

  /* Optionnel : vous pouvez aussi réduire les H3 si besoin */
  .article-wrapper h3 {
    font-size: 1.3rem;
  }

}