/* ============================================================
   NGOUVOU — les pages intérieures et la boutique.
   Complète style.css, ne le remplace pas. Les jetons de couleur
   (--jaune, --nuit, --creme…) viennent de style.css.
   ============================================================ */

/* ---------- menu mobile ----------
   Sur un site d'une seule page, cacher la nav sous 860 px ne coûtait rien.
   Sur onze pages, ça coupe le site en deux. D'où ce panneau.
   Pas de backdrop-filter : sur iOS il crée un contexte d'empilement qui
   piège le panneau sous l'entête. Un fond opaque, et ça marche partout. */
.burger{display:none;width:46px;height:46px;border:0;background:transparent;
  cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
.burger span{display:block;height:2px;background:var(--jaune);border-radius:2px;
  transition:transform .28s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.panneau{position:fixed;inset:0;z-index:55;background:#04081A;
  padding:6rem 1.4rem 2.4rem;display:none;flex-direction:column;overflow-y:auto}
.panneau.ouvert{display:flex}
.panneau-liens{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.6rem}
.panneau-liens a{font-family:var(--titre);font-size:1.5rem;color:var(--blanc);
  text-decoration:none;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.panneau-liens a.ici{color:var(--jaune)}
.panneau-bas{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;
  font-size:.8rem}
.panneau-bas a{color:var(--gris);text-decoration:none}
.panneau-bas a:hover{color:var(--jaune)}
@media(max-width:860px){
  .burger{display:flex}
  .entete .bouton.petit{padding:.55rem .9rem}
}
@media(min-width:861px){.panneau{display:none!important}}

.pastille{display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:99px;background:var(--nuit);color:var(--jaune);
  font-size:.72rem;font-weight:800;line-height:1}

/* ---------- entête des pages intérieures ---------- */
.tete{padding:9rem 0 3.4rem;position:relative;
  background:radial-gradient(80% 120% at 50% 0%,
    color-mix(in srgb,var(--teinte,#FED605) 16%,transparent),transparent 62%)}
.tete h1{font-family:var(--titre);font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;
  letter-spacing:-.02em;margin-bottom:1rem}
.tete h1 em{font-style:normal;color:var(--jaune)}
.tete .chapeau{color:var(--creme);max-width:44rem;font-size:1.03rem}
.tete-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

.fil{padding:.9rem 0 0;font-size:.78rem}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;color:var(--gris2)}
.fil li+li::before{content:'›';margin-right:.45rem;color:var(--gris2)}
.fil a{color:var(--gris);text-decoration:none}
.fil a:hover{color:var(--jaune)}
.fil [aria-current]{color:var(--creme)}

.titre-petit{font-family:var(--titre);font-size:1.05rem;letter-spacing:.01em;
  color:var(--jaune);margin-bottom:.8rem}
.lien-souligne{color:var(--jaune);text-decoration:underline;text-underline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ---------- bandeau de l'offre de lancement ---------- */
.bandeau-offre{background:linear-gradient(100deg,var(--magenta),var(--rose));
  color:#fff;font-weight:700;font-size:.9rem;text-align:center;padding:.7rem 0;
  position:relative;z-index:61}

/* ---------- cartes de la gamme, version cliquable ---------- */
.parfum-lien{display:block;text-decoration:none;color:inherit}
.parfum-prix{font-family:var(--titre);font-size:1.25rem;color:var(--jaune);
  margin-top:.5rem}
.parfum-prix i{font-style:normal;font-size:.72rem;color:var(--gris);
  font-family:var(--texte);font-weight:400}
.parfum-cta{display:inline-block;margin-top:.7rem;font-size:.82rem;color:var(--creme);
  border-bottom:1px solid rgba(239,209,171,.4);padding-bottom:2px}
.parfum:hover .parfum-cta{color:var(--jaune);border-color:var(--jaune)}

/* ---------- fiche produit ---------- */
.fiche{padding:8rem 0 3rem;
  background:radial-gradient(70% 90% at 20% 0%,
    color-mix(in srgb,var(--teinte) 26%,transparent),transparent 60%)}
.fiche-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:3rem;align-items:center}
.fiche-visuel img{max-height:64vh;width:auto;margin-inline:auto;display:block;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.fiche-txt h1{font-family:var(--titre);font-size:clamp(2.4rem,6.5vw,4.4rem);
  line-height:1;letter-spacing:-.02em;margin-bottom:1rem}
@media(max-width:820px){
  .fiche-in{grid-template-columns:1fr;gap:2rem}
  .fiche-visuel img{max-height:44vh}
}

.achat{margin:2rem 0 1.4rem;padding:1.4rem;border-radius:18px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.achat-prix{font-family:var(--titre);font-size:1.1rem;color:var(--blanc)}
.achat-prix b{font-size:2rem;color:var(--jaune);display:inline-block;
  margin-right:.4rem}
.achat-prix i{font-style:normal;font-family:var(--texte);font-size:.85rem;
  font-weight:400;color:var(--creme)}
.achat-prix span{display:block;font-family:var(--texte);font-size:.8rem;
  font-weight:400;color:var(--gris);margin-top:.15rem}
.achat-ligne{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
  margin-top:1.1rem}
.achat-note{font-size:.8rem;color:var(--gris);margin-top:.8rem}
.achat-note.ok{color:var(--jaune)}

.compteur{display:flex;align-items:center;border:1px solid rgba(255,255,255,.16);
  border-radius:99px;overflow:hidden;background:rgba(0,0,0,.3)}
.compteur button{width:46px;height:48px;border:0;background:transparent;
  color:var(--blanc);font-size:1.3rem;cursor:pointer;line-height:1}
.compteur button:hover{color:var(--jaune)}
.compteur input{width:62px;height:48px;border:0;background:transparent;
  color:var(--blanc);text-align:center;font-family:var(--titre);font-size:1.05rem;
  -moz-appearance:textfield}
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- tableaux de paliers ---------- */
.paliers{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.94rem}
.paliers th,.paliers td{padding:.8rem .9rem;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.09)}
.paliers thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--gris);font-weight:600}
.paliers tbody th{font-weight:500;color:var(--creme)}
.paliers td{font-family:var(--titre);color:var(--blanc)}
.paliers td:last-child{color:var(--gris);font-family:var(--texte);font-size:.86rem}
.paliers tr.palette td:first-of-type{color:var(--jaune)}

.tarif-bloc{margin-bottom:2.6rem;padding:1.6rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--teinte) 12%,transparent),rgba(255,255,255,.02))}
.tarif-tete{display:flex;gap:1.2rem;align-items:center}
.tarif-tete img{width:56px;height:auto;flex:none}
.tarif-tete h3{font-family:var(--titre);font-size:1.3rem}
.tarif-tete p{color:var(--gris);font-size:.9rem;margin-bottom:.3rem}

/* ---------- étapes et encarts ---------- */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;margin-top:2rem}
.etape{padding:1.5rem;border-radius:18px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03)}
.etape .num{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;
  background:var(--jaune);color:var(--nuit);font-family:var(--titre);font-size:.95rem;
  margin-bottom:.9rem}
.etape b{display:block;margin-bottom:.35rem;font-size:1.02rem}
.etape span{color:var(--gris);font-size:.9rem;line-height:1.55}

.encart{margin-top:2.4rem;padding:1.4rem 1.6rem;border-radius:18px;
  border:1px solid rgba(254,214,5,.28);background:rgba(254,214,5,.06)}
.encart b{display:block;color:var(--jaune);margin-bottom:.35rem}
.encart p{color:var(--creme);font-size:.94rem}
.encart a{color:var(--jaune)}

.avert-bloc{margin-top:1.6rem;padding:1rem 1.2rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);
  color:var(--gris);font-size:.82rem;line-height:1.6}

/* ---------- composition ---------- */
.fiche-compo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:2.6rem;align-items:start}
@media(max-width:900px){.fiche-compo{grid-template-columns:1fr}}
.ingredients{margin-top:1.8rem}
.ingredients b{display:block;font-family:var(--titre);color:var(--jaune);
  margin-bottom:.5rem}
.ingredients p{color:var(--gris);font-size:.88rem;line-height:1.65}
.ing-note{margin-top:.7rem;color:var(--creme)!important;font-size:.92rem!important}
.nutri-attente .attente{color:var(--gris);font-size:.9rem;margin-bottom:.8rem}
.nutri-attente{border-style:dashed}

/* ---------- le tunnel de commande ---------- */
.tunnel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:2.4rem;align-items:start}
@media(max-width:900px){.tunnel{grid-template-columns:1fr}}
.aide{color:var(--gris);font-size:.88rem;margin-bottom:1.4rem}

.choix{display:flex;align-items:center;gap:1rem;padding:1rem;margin-bottom:.9rem;
  border-radius:16px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03)}
.choix img{width:42px;height:auto;flex:none}
.choix-txt{flex:1;min-width:0}
.choix-txt b{display:block;font-family:var(--titre);font-size:1.02rem}
.choix-prix{color:var(--gris);font-size:.84rem}
.choix.actif{border-color:rgba(254,214,5,.45);background:rgba(254,214,5,.06)}

.tunnel-total{position:sticky;top:5.5rem;padding:1.6rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(0,0,0,.35))}
@media(max-width:900px){.tunnel-total{position:static}}
.recap-lignes{list-style:none;margin-bottom:1rem}
.recap-lignes li{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:.92rem}
.recap-lignes span{color:var(--gris)}
.recap-palier{font-size:.84rem;color:var(--jaune);margin-bottom:.8rem}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:.9rem 0;border-top:1px solid rgba(255,255,255,.14)}
.recap-total b{font-family:var(--titre);font-size:1.9rem;color:var(--jaune)}
.recap-tva{font-size:.78rem;color:var(--gris);margin-bottom:1.2rem;line-height:1.5}
.recap-note{font-size:.76rem;color:var(--gris);margin-top:.7rem;line-height:1.5}
.recap-note.ko{color:#ff8f9b}
.recap-note.ok{color:var(--jaune)}
.recap-gros{font-size:.9rem;color:var(--creme);margin-bottom:1rem;line-height:1.6}
.recap-gros b{color:var(--jaune)}
.bouton.large{width:100%}
/* le « ou » entre les deux façons de commander */
.ou{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;
  color:var(--gris2);font-size:.78rem;text-transform:uppercase;letter-spacing:2px}
.ou::before,.ou::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.12)}
.vider{display:block;width:100%;margin-top:1rem;padding:.6rem;border:0;
  background:transparent;color:var(--gris2);font-size:.8rem;cursor:pointer;
  text-decoration:underline}
.vider:hover{color:var(--creme)}

/* ---------- formulaires ---------- */
.champ{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.champ label{font-size:.82rem;color:var(--gris)}
.champ label span{color:var(--jaune)}
.champ input,.champ textarea,.champ select{width:100%;min-height:48px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:.7rem .9rem;color:#fff;font-family:inherit;
  font-size:.95rem}
.champ textarea{min-height:110px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;
  border-color:var(--jaune)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.duo{grid-template-columns:1fr}}
.accord{display:flex;gap:.7rem;align-items:flex-start;margin:.6rem 0 1.1rem;
  font-size:.82rem;color:var(--gris);line-height:1.5}
.accord input{margin-top:.2rem;width:20px;height:20px;flex:none;accent-color:var(--jaune)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demande-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.6rem;align-items:start}
@media(max-width:900px){.demande-grille{grid-template-columns:1fr}}
.form-gros,.form-devis{padding:1.6rem;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28)}
.form-devis{padding:0;border:0;background:transparent}

/* ---------- FAQ ---------- */
.faq{margin-top:1.6rem;border-top:1px solid rgba(255,255,255,.1)}
.faq details{border-bottom:1px solid rgba(255,255,255,.1)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;
  position:relative;font-size:1rem;color:var(--blanc);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.3rem;top:50%;
  transform:translateY(-50%);color:var(--jaune);font-size:1.3rem}
.faq details[open] summary::after{content:'×'}
.faq p{padding:0 0 1.2rem;color:var(--gris);font-size:.93rem;line-height:1.7}
.faq a{color:var(--jaune)}

/* ---------- pages légales ---------- */
.legal{padding:1rem 0 4.5rem}
.legal .prose{max-width:47rem}
.legal h2{font-family:var(--titre);font-size:1.2rem;color:var(--jaune);
  margin:2.2rem 0 .7rem}
.legal p,.legal li{color:var(--gris);font-size:.94rem;line-height:1.75;
  margin-bottom:.7rem}
.legal ul{margin:0 0 .9rem 1.1rem}
.legal a{color:var(--jaune)}
.legal table{width:100%;border-collapse:collapse;margin:.8rem 0 1.2rem;
  font-size:.86rem}
.legal th,.legal td{padding:.6rem .7rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.09);color:var(--gris)}
.legal th{color:var(--creme);font-weight:600;white-space:nowrap}
.legal .ident th{width:11rem}
.legal .maj{margin-top:2.4rem;font-size:.8rem;color:var(--gris2)}
.legal b{color:var(--creme)}

/* ---------- bloc final ---------- */
.final{padding:4.5rem 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.09);
  background:radial-gradient(90% 120% at 50% 0%,rgba(254,214,5,.09),transparent 62%)}
.final h2{font-family:var(--titre);font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1.1;margin-bottom:.9rem}
.final p{color:var(--gris);max-width:36rem;margin:0 auto 1.9rem}
.final-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---------- WhatsApp flottant ---------- */
.wa-flottant{position:fixed;right:1rem;bottom:1rem;z-index:50;width:54px;height:54px;
  border-radius:99px;display:grid;place-items:center;background:#25D366;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wa-flottant svg{width:28px;height:28px;fill:#fff}
@media(max-width:900px){.wa-flottant{width:50px;height:50px}}

/* ---------- pied ---------- */
.pied-liens{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-bottom:.7rem;
  font-size:.85rem}
.relien{border:0;background:transparent;padding:0;cursor:pointer;color:var(--gris);
  font:inherit;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.relien:hover{color:var(--jaune)}

/* ---------- bandeau de consentement ----------
   Il est en bas, pas en plein écran : on ne prend pas le visiteur en
   otage. « Tout refuser » a exactement le même poids visuel que
   « Tout accepter », c'est ce que la CNIL contrôle en premier. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:80;
  transform:translateY(110%);transition:transform .35s ease;
  background:#04081A;border-top:1px solid rgba(254,214,5,.3);
  box-shadow:0 -20px 50px rgba(0,0,0,.6)}
.cookies.ouvert{transform:none}
.cookies-in{width:var(--large);margin-inline:auto;padding:1.3rem 0 1.5rem;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:1.2rem 2rem;align-items:start}
.cookies-txt b{display:block;font-family:var(--titre);font-size:1rem;
  color:var(--jaune);margin-bottom:.4rem}
.cookies-txt p{color:var(--gris);font-size:.86rem;line-height:1.6}
.cookies-txt a{color:var(--creme);text-decoration:underline}
.cookies-ligne{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem;
  font-size:.82rem;color:var(--gris);line-height:1.5;cursor:pointer}
.cookies-ligne input{width:20px;height:20px;flex:none;margin-top:.15rem;
  accent-color:var(--jaune)}
.cookies-ligne b{color:var(--creme)}
.cookies-boutons{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem}
.cookies-boutons .bouton{flex:1 1 auto;min-width:11rem}
@media(max-width:820px){
  .cookies-in{grid-template-columns:1fr;padding:1.1rem 0 1.3rem}
  .cookies{max-height:86svh;overflow-y:auto}
  /* Accepter et refuser côte à côte, même largeur exactement : c'est la
     présentation que la CNIL considère comme un choix libre. Le troisième
     bouton passe dessous, il ne concerne que ceux qui ont coché. */
  .cookies-boutons{display:grid;grid-template-columns:1fr 1fr}
  .cookies-boutons .bouton{min-width:0;padding:.8rem .6rem;font-size:.86rem}
  .cookies-boutons .bouton:last-child{grid-column:1/-1}
}

/* la page cookies */
.cookies-etat{margin:1.2rem 0;padding:1rem 1.2rem;border-radius:14px;
  border:1px solid rgba(254,214,5,.28);background:rgba(254,214,5,.06);
  color:var(--creme);font-size:.92rem}