/* meilleur-ashwagandha.com
   Palette ayurvedique : terre cuite, safran, cardamome, creme.
   Toutes les classes portent des noms francais propres a ce site. */

:root {
  --terre: #b0502f;
  --terre-sombre: #8d3e22;
  --safran: #d9932b;
  --cardamome: #5e6b4a;
  --encre: #3a2a20;
  --encre-douce: #6b5748;
  --creme: #fdf6ee;
  --creme-carte: #fffaf3;
  --sable: #f3e7d7;
  --trait: #e6d8c7;
  --ombre: 0 1px 2px rgba(58, 42, 32, .06), 0 8px 24px rgba(58, 42, 32, .07);
  --rayon: 14px;
  --serif: "Spectral", Georgia, serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  color: var(--encre);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2em; }
h3 { font-size: 1.24rem; margin-top: 1.8em; }

p { margin: 0 0 1.15em; }

a { color: var(--terre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terre-sombre); }

strong { font-weight: 700; }
em { font-style: italic; }

img { max-width: 100%; height: auto; display: block; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; background: var(--encre);
  color: #fff; padding: .7rem 1.1rem; z-index: 50; border-radius: 0 0 8px 0;
}
.saut-contenu:focus { left: 0; }

.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.conteneur--article { max-width: 820px; }

/* ---------------------------------------------------------------- entete */

.entete {
  background: var(--creme-carte);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 30;
}
.entete-barre {
  max-width: 1140px; margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.marque-site { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marque-signe { display: flex; }
.marque-nom {
  display: block; font-family: var(--serif); font-size: 1.28rem;
  font-weight: 700; letter-spacing: -.01em; color: var(--encre);
}
.marque-baseline { display: block; font-size: .76rem; color: var(--encre-douce); letter-spacing: .02em; }
.navigation { display: flex; gap: 22px; flex-wrap: wrap; }
.navigation a {
  text-decoration: none; color: var(--encre-douce); font-size: .95rem;
  font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--terre); border-bottom-color: var(--safran); }

/* --------------------------------------------------------------- bandeau */

.bandeau {
  background: linear-gradient(140deg, #fbeedd 0%, var(--creme) 58%, #f7ece0 100%);
  border-bottom: 1px solid var(--trait);
  padding: 58px 22px 46px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: center;
  max-width: 1184px; margin: 0 auto;
}
.bandeau-surtitre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--terre); font-weight: 700; margin-bottom: .9em;
}
.bandeau h1 { margin-bottom: .45em; }
.bandeau-chapo { font-size: 1.16rem; color: var(--encre-douce); max-width: 34em; }
.bandeau-reperes { list-style: none; display: flex; gap: 30px; padding: 0; margin: 26px 0 0; flex-wrap: wrap; }
.bandeau-reperes li { font-size: .88rem; color: var(--encre-douce); max-width: 11em; line-height: 1.4; }
.bandeau-reperes strong {
  display: block; font-family: var(--serif); font-size: 2rem;
  color: var(--terre); line-height: 1;
}

/* -------------------------------------------------------------- illustrations */

.illustration { margin: 0; border-radius: var(--rayon); overflow: hidden; }
.illustration img { width: 100%; }
.illustration--bandeau img { border-radius: var(--rayon); box-shadow: var(--ombre); }
.illustration--article { margin: 0 0 34px; box-shadow: var(--ombre); }
.illustration--absente {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 8px; min-height: 190px; padding: 24px; text-align: center;
  background: repeating-linear-gradient(45deg, #f6e9da, #f6e9da 11px, #f0dfcc 11px, #f0dfcc 22px);
  border: 1px dashed #c9ab8b; color: #8a6c4f;
}
.attente-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.attente-brief { font-size: .88rem; max-width: 34em; line-height: 1.45; }

.vignette { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px 10px 0 0; }
.vignette--absente {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(45deg, #f6e9da, #f6e9da 9px, #f0dfcc 9px, #f0dfcc 18px);
}

/* ------------------------------------------------------------- classement */

.section-classement, .section-tableau, .section-guides { margin: 62px 0; }
.section-intro { color: var(--encre-douce); max-width: 48em; }
.section-suite { margin-top: 28px; }

.liste-cartes { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }

.carte {
  background: var(--creme-carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 26px;
  display: grid; grid-template-columns: 86px 168px 1fr; gap: 26px; align-items: start;
  box-shadow: var(--ombre);
}
.carte--premier { border-color: var(--safran); border-width: 2px; background: #fffdf8; }
.carte-rang { text-align: center; }
.rang-chiffre {
  display: inline-block; font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  color: #fff; background: var(--terre); border-radius: 50%;
  width: 62px; height: 62px; line-height: 62px;
}
.carte--premier .rang-chiffre { background: var(--safran); color: var(--encre); }
.rang-o { font-size: .62em; vertical-align: super; }
.rang-mention {
  display: block; margin-top: 8px; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--terre); font-weight: 700; line-height: 1.3;
}
.produit-photo {
  width: 168px; height: 168px; object-fit: contain; background: #fff;
  border: 1px solid var(--trait); border-radius: 10px; padding: 8px;
}
.produit-photo--absente {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--serif); font-size: .92rem; color: #a08464; padding: 10px;
  background: repeating-linear-gradient(45deg, #f8efe3, #f8efe3 9px, #f2e4d2 9px, #f2e4d2 18px);
}
.carte-titre { margin-bottom: .18em; font-size: 1.36rem; }
.carte-titre span { font-weight: 400; color: var(--encre-douce); }
.carte-note { font-family: var(--serif); margin-bottom: .7em; }
.carte-note strong { font-size: 1.85rem; color: var(--terre); }
.carte-note span { color: var(--encre-douce); font-size: 1rem; }
.carte-resume { font-size: .98rem; color: var(--encre-douce); }
.carte-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.carte-chiffres dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.carte-chiffres dd { margin: 3px 0 0; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.carte-atout { font-size: .92rem; color: var(--cardamome); margin-bottom: 1em; }
.carte-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.bouton {
  display: inline-block; padding: 11px 20px; border-radius: 9px;
  font-family: var(--sans); font-size: .94rem; font-weight: 700;
  text-decoration: none; text-align: center; border: 2px solid var(--terre); transition: .15s;
}
.bouton--plein { background: var(--terre); color: #fff; }
.bouton--plein:hover { background: var(--terre-sombre); border-color: var(--terre-sombre); color: #fff; }
.bouton--creux { background: transparent; color: var(--terre); }
.bouton--creux:hover { background: var(--terre); color: #fff; }
.bouton--large { display: block; width: 100%; padding: 15px 20px; font-size: 1.02rem; }

/* ---------------------------------------------------------------- tableau */

.tableau-enveloppe { overflow-x: auto; margin-top: 26px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--creme-carte); }
.tableau-comparatif { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 780px; }
.tableau-comparatif caption { caption-side: top; text-align: left; padding: 16px 18px 12px; font-size: .86rem; color: var(--encre-douce); }
.tableau-comparatif th, .tableau-comparatif td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--trait); }
.tableau-comparatif thead th { background: var(--sable); font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); }
.tableau-comparatif tbody th { font-family: var(--serif); font-size: 1rem; }
.ligne-premier { background: #fffaf0; }
.ligne-premier td, .ligne-premier th { font-weight: 600; }
.tableau-note { font-size: .84rem; color: var(--encre-douce); margin-top: 12px; }

/* ---------------------------------------------------------------- guides */

.grille-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.grille-guides--index { margin-top: 36px; }
.carte-guide {
  display: flex; flex-direction: column; background: var(--creme-carte);
  border: 1px solid var(--trait); border-radius: 10px; text-decoration: none;
  color: inherit; overflow: hidden; transition: .15s;
}
.carte-guide:hover { border-color: var(--safran); transform: translateY(-2px); box-shadow: var(--ombre); }
.carte-guide-titre { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; padding: 15px 16px 6px; color: var(--encre); }
.carte-guide-texte { font-size: .88rem; color: var(--encre-douce); padding: 0 16px 16px; }

/* --------------------------------------------------------------- article */

.fil-ariane { font-size: .82rem; color: var(--encre-douce); margin: 26px 0 18px; }
.fil-ariane a { color: var(--encre-douce); }
.fil-sep { margin: 0 7px; color: #bda88f; }

.article { padding-bottom: 40px; }
.article-tete { margin-bottom: 30px; }
.article-tete--index { margin-bottom: 8px; }
.article-rubrique { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; color: var(--terre); font-weight: 700; margin-bottom: .7em; }
.article-chapo { font-size: 1.13rem; color: var(--encre-douce); font-family: var(--serif); font-style: italic; }
.article-signature { font-size: .84rem; color: var(--encre-douce); border-top: 1px solid var(--trait); padding-top: 12px; }
.article-duree { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--trait); }

.sommaire { background: var(--sable); border-radius: var(--rayon); padding: 22px 26px; margin: 0 0 34px; }
.sommaire-titre { font-family: var(--serif); font-weight: 600; font-size: 1rem; margin-bottom: .6em; }
.sommaire ol { margin: 0; padding-left: 1.2em; }
.sommaire li { margin-bottom: .32em; font-size: .94rem; }
.sommaire a { color: var(--encre-douce); }
.sommaire a:hover { color: var(--terre); }

.article-corps h2 { scroll-margin-top: 92px; }
.article-corps ul, .article-corps ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.article-corps li { margin-bottom: .45em; }
.article-corps blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--safran);
  font-family: var(--serif); font-style: italic; color: var(--encre-douce);
}
.article-corps table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .94rem; }
.article-corps th, .article-corps td { padding: 10px 12px; border: 1px solid var(--trait); text-align: left; }
.article-corps thead th { background: var(--sable); font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------- encart */

.encart {
  background: var(--creme-carte); border: 1px solid var(--safran);
  border-left: 5px solid var(--safran); border-radius: var(--rayon);
  padding: 26px; margin: 38px 0; display: grid;
  grid-template-columns: 168px 1fr; gap: 26px; align-items: start; box-shadow: var(--ombre);
}
.encart--double { display: block; }
.encart-chapo { font-family: var(--serif); font-size: 1.04rem; margin-bottom: 1.2em; }
.encart-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.encart-colonne { border: 1px solid var(--trait); border-radius: 10px; padding: 20px; background: var(--creme); }
.encart-cas { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--terre); font-weight: 700; }
.encart-photo { margin-bottom: 12px; }
.encart-etiquette { font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--terre); font-weight: 700; margin-bottom: .6em; }
.encart-titre { font-size: 1.18rem; margin-bottom: .45em; }
.encart-texte { font-size: .96rem; color: var(--encre-douce); }
.encart-points { list-style: none; padding: 0; margin: 0 0 1.1em; font-size: .9rem; }
.encart-points li { padding-left: 20px; position: relative; margin-bottom: .3em; }
.encart-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--safran); }
.encart-prix { font-size: .9rem; color: var(--encre-douce); margin-bottom: 1em; }
.encart-mention { font-size: .85rem; margin: 12px 0 0; }

/* ----------------------------------------------------------------- fiche */

.fiche-tete { display: grid; grid-template-columns: 1fr 200px; gap: 30px; align-items: start; margin-bottom: 34px; }
.fiche-rang { font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; color: var(--terre); font-weight: 700; margin-bottom: .8em; }
.fiche-note { font-family: var(--serif); margin: 0; }
.fiche-note-valeur { font-size: 2.6rem; font-weight: 700; color: var(--terre); }
.fiche-note-max { color: var(--encre-douce); }
.fiche-technique { background: var(--sable); border-radius: var(--rayon); padding: 26px 28px; margin-bottom: 34px; }
.fiche-technique h2 { margin-top: 0; font-size: 1.3rem; }
.fiche-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 26px; margin: 0; }
.fiche-liste > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.fiche-liste dt { color: var(--encre-douce); font-size: .9rem; }
.fiche-liste dd { margin: 0; font-weight: 600; font-size: .94rem; text-align: right; }
.fiche-bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 40px 0; }
.fiche-bilan-colonne { border-radius: var(--rayon); padding: 22px 24px; border: 1px solid var(--trait); }
.fiche-bilan--forts { background: #f4f6ee; border-color: #d8e0c8; }
.fiche-bilan--limites { background: #fbf0ea; border-color: #eed6c8; }
.fiche-bilan h2 { margin-top: 0; font-size: 1.16rem; }
.fiche-bilan ul { margin: 0; padding-left: 1.2em; font-size: .95rem; }
.fiche-bilan li { margin-bottom: .5em; }
.fiche-sortie { background: var(--creme-carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 28px; text-align: center; box-shadow: var(--ombre); }
.fiche-sortie-texte { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 1.2em; }
.fiche-sortie-mention { font-size: .82rem; color: var(--encre-douce); margin: 14px 0 0; }

.liste-avis { list-style: none; padding: 0; margin: 24px 0 0; }
.liste-avis li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--trait); font-size: .98rem; }
.liste-avis a { text-decoration: none; }
.liste-avis-rang { color: var(--terre); font-weight: 700; margin-right: 8px; }
.liste-avis-note { color: var(--encre-douce); font-family: var(--serif); }

/* ------------------------------------------------------------------- faq */

.faq { margin-top: 48px; }
.faq-item { border-bottom: 1px solid var(--trait); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; }
.faq-item p { margin: .8em 0 .2em; color: var(--encre-douce); }
.sources { margin-top: 44px; font-size: .88rem; color: var(--encre-douce); }
.sources ul { padding-left: 1.2em; }
.a-suivre { margin: 52px 0; padding-top: 34px; border-top: 1px solid var(--trait); }

/* ------------------------------------------------------------------ pied */

.pied { background: var(--encre); color: #e8ddd2; margin-top: 70px; padding: 52px 22px 26px; }
.pied-grille { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.pied-titre { font-family: var(--serif); font-size: 1.04rem; color: #fff; margin-bottom: .7em; }
.pied-texte { font-size: .9rem; color: #bfae9e; }
.pied-liens { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.pied-liens li { margin-bottom: .45em; }
.pied-liens a, .pied a { color: #e8ddd2; text-decoration: none; }
.pied-liens a:hover, .pied a:hover { color: var(--safran); text-decoration: underline; }
.pied-bas { max-width: 1140px; margin: 38px auto 0; padding-top: 22px; border-top: 1px solid #554134; font-size: .82rem; color: #a8968a; }
.pied-bas p { margin-bottom: .6em; }
.pied-copyright { margin-top: 1.2em; }

/* ----------------------------------------------------------- adaptations */

@media (max-width: 980px) {
  .bandeau { grid-template-columns: 1fr; padding: 40px 22px 34px; }
  .carte { grid-template-columns: 64px 1fr; }
  .carte-visuel { grid-column: 2; }
  .produit-photo { width: 140px; height: 140px; }
  .carte-corps { grid-column: 1 / -1; }
  .carte-chiffres { grid-template-columns: repeat(2, 1fr); }
  .grille-guides { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .fiche-tete { grid-template-columns: 1fr; }
  .fiche-liste { grid-template-columns: 1fr; }
  .fiche-bilan { grid-template-columns: 1fr; }
  .encart { grid-template-columns: 1fr; }
  .encart-colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .entete-barre { padding: 12px 18px; }
  .navigation { gap: 16px; width: 100%; }
  .navigation a { font-size: .88rem; }
  .marque-baseline { display: none; }
  .bandeau-reperes { gap: 18px; }
  .carte { grid-template-columns: 1fr; padding: 20px; }
  .carte-rang { text-align: left; }
  .grille-guides { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .carte-actions .bouton { width: 100%; }
}

/* ---------- Bandeau de consentement ----------
   Le site ne depose aucun cookie : mesure.js n'ecrit rien dans le navigateur.
   Le choix porte sur le cookie que le marchand depose si l'on clique vers sa
   boutique. En cas de refus, cookies.js ajoute rel="noreferrer" aux liens
   sortants et le marchand ne peut plus rattacher la visite a ce site. */

.cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999;
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: var(--creme-carte); color: var(--encre);
  border: 1px solid var(--trait); border-left: 4px solid var(--terre);
  border-radius: var(--rayon); padding: 1.1rem 1.4rem;
  box-shadow: var(--ombre);
  font-size: .94rem; line-height: 1.55;
  animation: cookies-entree .35s ease;
}
@keyframes cookies-entree { from { opacity: 0; transform: translateY(16px); } }
.cookies-parti { opacity: 0; transform: translateY(16px); transition: .3s; }
.cookies-txt { flex: 1 1 380px; color: var(--encre-douce); }
.cookies-txt strong { color: var(--terre); }
.cookies-txt a { color: var(--terre); text-decoration: underline; }
.cookies-btns { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookies button {
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  padding: .6rem 1.3rem; border-radius: 50px; cursor: pointer;
  border: 1px solid var(--trait); transition: .2s;
}
.cookies-refus { background: transparent; color: var(--encre-douce); }
.cookies-refus:hover { background: var(--sable); color: var(--encre); }
.cookies-ok { background: var(--terre); color: #fff; border-color: var(--terre); }
.cookies-ok:hover { background: var(--terre-sombre); }
@media (max-width: 600px) {
  .cookies { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookies-btns button { flex: 1; }
}
/* Le bandeau est fixe : on degage le bas de page pour qu'il ne masque
   jamais le pied de page. */
body.avec-bandeau { padding-bottom: 170px; }
@media (min-width: 900px) { body.avec-bandeau { padding-bottom: 140px; } }