/* Question Pâtisserie : la vitrine d'une pâtisserie et le carnet annoté d'une cheffe.
   Fond vanille, encre chocolat, pistache pour agir, abricot pour les grands chiffres, framboise en touche.
   Quatre parfums (data-palette sur la racine) : a Pistache (défaut), b Praliné, c Framboise, n Chocolat noir (mode sombre). */
@font-face{font-family:"Yeseva One";src:url(/polices/yeseva-one.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/polices/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Caveat";src:url(/polices/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --creme:#FFF6E8; --blanc:#FFFFFF;
  --choco:#3A2219; --choco-2:#76594C; --trait:#ECDCC6;
  --pistache:#5C7A36; --pistache-c:#DDE8C6;
  --abricot:#D8771C; --abricot-c:#FBD9B2;
  --framboise:#C5374F; --rose-c:#F8D4D1;
  --vanille:#FBE6A6; --cacao-c:#E5CCBD; --caramel-c:#F8CE93; --choco-c:#96664F;
  --titre:"Yeseva One",Georgia,"Times New Roman",serif;
  --texte:"Figtree","Helvetica Neue",Arial,sans-serif;
  --main:"Caveat","Segoe Print","Comic Sans MS",cursive;
  /* rôles : ce que les variantes de palette redéfinissent */
  --prim:var(--pistache); --prim-c:var(--pistache-c); --chiffre:var(--abricot);
  --second-c:var(--abricot-c); --tiers-c:var(--rose-c); --note:var(--framboise);
  /* fixes : trait des dessins, blanc des dessins ; bande sombre ; quadrillage du labo */
  --cacao:#3A2219; --lait:#FFFFFF; --bande:var(--choco); --bande-encre:var(--creme);
  --grille-1:rgba(58,34,25,.07); --grille-2:rgba(58,34,25,.15);
}
:root[data-palette="b"]{ /* Praliné : beurre, caramel, framboise */
  --creme:#FFF2DC; --trait:#EBD7B9;
  --prim:#A4551A; --prim-c:#FBDDB0; --chiffre:#C5374F;
  --second-c:#DDE8C6; --tiers-c:#F8D4D1; --note:#5C7A36;
}
:root[data-palette="c"]{ /* Framboise : lait rosé, framboise, abricot */
  --creme:#FFF4F0; --choco:#3B1F22; --choco-2:#7A5558; --trait:#F0DAD4;
  --prim:#B5304A; --prim-c:#F8D4D1; --chiffre:#D8771C;
  --second-c:#FBE6A6; --tiers-c:#DDE8C6; --note:#5C7A36;
}
:root[data-palette="n"]{ /* Chocolat noir : le mode sombre, pour le soir et la cuisine */
  color-scheme:dark;
  --creme:#231511; --blanc:#2E1D17; --choco:#FFF0DC; --choco-2:#CDB5A4; --trait:#4B352B;
  --prim:#B5CF86; --prim-c:#45552E; --chiffre:#F4A552;
  --second-c:#6E4725; --tiers-c:#6B3742; --note:#F29BAA;
  --bande:#160C09; --bande-encre:#FFF0DC;
  --grille-1:rgba(255,240,220,.07); --grille-2:rgba(255,240,220,.15);
}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--choco);font-family:var(--texte);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.w{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:400;margin:0;text-wrap:balance;line-height:1.06}
p{margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--chiffre);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.note-main{font-family:var(--main);font-size:1.5rem;line-height:1;color:var(--note)}

/* Pictos au trait sur pastille */
.picto{stroke:var(--cacao);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;width:68%;height:68%}
.picto .t{fill:var(--f,var(--vanille))}.picto .b{fill:var(--lait)}.picto .r{fill:var(--framboise)}
.pic{flex:none;display:grid;place-items:center;width:var(--s,64px);height:var(--s,64px);background:var(--bg,var(--abricot-c));border-radius:58% 42% 55% 45%/48% 56% 44% 52%}

/* Feston : le bord cannelé d'un moule à tarte */
.feston{height:14px;background:radial-gradient(circle at 14px -2px,var(--haut) 13px,transparent 13.6px) 0 0/28px 14px repeat-x var(--bas)}

.avis{background:var(--bande);color:var(--bande-encre);font-size:.78rem;letter-spacing:.04em}
.avis .w{padding-block:7px;display:flex;gap:6px 20px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.droite{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.parfums{display:flex;align-items:center;gap:8px;padding-right:13px}
.parfums .note-main{font-size:1.3rem;margin-right:2px}
.parfums button{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid var(--blanc);background:var(--p);box-shadow:0 0 0 1.5px var(--trait);cursor:pointer}
.parfums button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--choco)}

/* En-tête */
.tete .w{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;padding-block:18px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--titre);font-size:1.42rem;line-height:1}
.logo svg{width:50px;height:50px;flex:none}
.logo small{display:block;font-family:var(--main);font-size:1.02rem;color:var(--note);margin-top:3px}
.menu{display:flex;gap:4px 6px;flex-wrap:wrap;font-weight:600;font-size:.97rem}
.menu a{text-decoration:none;padding:7px 13px;border-radius:999px}
.menu a:hover{background:var(--prim-c)}

/* Ouverture */
.ouverture .w{padding-block:clamp(14px,3vw,36px) clamp(30px,4vw,54px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:clamp(18px,3vw,44px);align-items:center}
.ouverture h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1}
.ouverture h1 span{position:relative;white-space:nowrap}
.ouverture h1 span svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.22em}
.ouverture h1 em{display:block;font-style:normal;color:var(--prim);font-size:.56em;line-height:1.15;margin-top:.35em}
.chapo{margin-top:20px;max-width:33rem;font-size:1.13rem;color:var(--choco-2)}
.recherche{margin-top:28px;display:flex;align-items:center;background:var(--blanc);border:2px solid var(--choco);border-radius:999px;padding:6px 6px 6px 20px;box-shadow:0 6px 0 var(--second-c)}
.recherche svg{flex:none;width:22px;height:22px;stroke:var(--choco);stroke-width:2.4;fill:none;stroke-linecap:round}
.recherche input{flex:1;min-width:0;border:0;background:transparent;padding:13px 12px;font-size:1.12rem;font-weight:500}
.recherche input::placeholder{color:var(--choco-2);opacity:.8}
.recherche input:focus{outline:none}
.recherche:focus-within{outline:3px solid var(--chiffre);outline-offset:3px}
.btn{display:inline-block;border:0;border-radius:999px;background:var(--prim);color:var(--blanc);padding:13px 24px;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--choco)}
.btn.clair{background:transparent;color:inherit;border:2px solid currentColor;padding:10px 20px}
.btn.clair:hover{background:var(--bande-encre);color:var(--cacao)}
.resultats{margin-top:12px;background:var(--blanc);border:2px solid var(--choco);border-radius:22px;overflow:hidden}
.resultats a{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:11px 18px;text-decoration:none;border-top:1px solid var(--trait);font-weight:600}
.resultats a:first-child{border-top:0}
.resultats a:hover{background:var(--creme)}
.chemin{font-size:.76rem;font-weight:500;color:var(--choco-2);white-space:nowrap}
.resultats .vide{padding:14px 18px;display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.vitrine{position:relative}
.vitrine svg{display:block;width:100%;height:auto;overflow:visible}
.vitrine .enc{stroke:var(--cacao);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vitrine .b{fill:var(--lait)}
.vitrine .fl{stroke:var(--choco)}
.vitrine text{font-family:var(--main);font-size:31px;fill:var(--choco)}

/* Fiche réponse */
.reponse .w{padding-block:0 clamp(34px,5vw,60px)}
.essais{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:14px}
.puce{border:2px solid var(--trait);background:var(--blanc);border-radius:999px;padding:8px 16px;font-weight:600;font-size:.95rem;cursor:pointer;text-align:left}
.puce:hover{border-color:var(--choco)}
.puce[aria-pressed="true"]{background:var(--choco);border-color:var(--choco);color:var(--creme)}
.fiche{background:var(--blanc);border:2px solid var(--choco);border-radius:28px;box-shadow:0 8px 0 var(--prim-c);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);overflow:hidden}
.fiche .gauche{padding:clamp(18px,2.6vw,30px);display:flex;flex-direction:column;gap:10px;background:
  radial-gradient(circle at 100% 0,var(--second-c) 0 110px,transparent 111px)}
.fiche .haut{display:flex;gap:14px;align-items:center}
.fiche h2{font-family:var(--texte);font-weight:700;font-size:1.28rem;line-height:1.2}
.chiffre{font-family:var(--titre);color:var(--chiffre);font-size:clamp(3.8rem,8.4vw,7rem);line-height:.95;display:flex;align-items:baseline;gap:.14em;flex-wrap:wrap}
.chiffre small{font-family:var(--texte);font-size:.3em;font-weight:700;color:var(--choco)}
.cond{font-family:var(--main);font-size:1.55rem;line-height:1.05;color:var(--note)}
.fiche dl{margin:0;border-left:2px dashed var(--trait);padding:clamp(18px,2.6vw,30px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.fiche dt{font-family:var(--titre);font-size:1.12rem;margin-bottom:4px}
.fiche dd{margin:0;color:var(--choco-2)}
.badge{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 12px;background:var(--prim-c);color:var(--choco)}
.badge.plein{background:var(--prim);color:var(--blanc)}
.badge.fictif{background:transparent;border:1.5px dashed var(--note);color:var(--note)}
.pub{margin-top:26px;border:2px dashed var(--trait);border-radius:22px;padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:var(--choco-2)}

/* Sections */
.sec .w{padding-block:clamp(40px,5.5vw,76px)}
.sec.blanc{background:var(--blanc)}
.intit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 56px;align-items:end;margin-bottom:clamp(24px,3.2vw,40px)}
.intit h2{font-size:clamp(2rem,4vw,3.1rem)}
.intit p{color:var(--choco-2)}

/* Les bases */
.bases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.base{background:var(--creme);border:2px solid transparent;border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:9px;text-decoration:none;--s:76px}
.base:hover{border-color:var(--choco);background:var(--blanc)}
.base .fam{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--choco-2)}
.base b{font-family:var(--titre);font-weight:400;font-size:1.5rem;line-height:1.1}
.base span.def{font-size:.94rem;color:var(--choco-2);flex:1}
.base u{text-decoration:none;font-weight:700;font-size:.93rem;color:var(--prim)}

/* Questions */
.questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.questions a{display:flex;gap:14px;align-items:center;background:var(--blanc);border:2px solid var(--trait);border-radius:999px;padding:9px 20px 9px 9px;text-decoration:none;--s:52px}
.questions a:hover{border-color:var(--choco)}
.questions b{flex:1;min-width:0;font-weight:700;font-size:1.06rem;line-height:1.25}

/* Diagnostic */
.diag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,4vw,52px);align-items:start}
.etape{margin-bottom:22px;display:flex;flex-direction:column;gap:10px}
.etape>span{font-family:var(--titre);font-size:1.12rem}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.sympt{display:flex;flex-direction:column;gap:8px}
.sympt .puce{border-radius:18px;padding:13px 18px;font-size:1rem}
.verdict{background:var(--creme);border:2px solid var(--choco);border-radius:28px;overflow:hidden}
.verdict .haut{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:18px;padding:18px}
.verdict .corps{display:flex;flex-direction:column;gap:10px}
.verdict h3{font-size:1.5rem}
.verdict ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px;font-size:.98rem}
.rattr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 20px;background:var(--blanc);border-top:2px dashed var(--trait)}
.rattr strong{display:block;font-family:var(--titre);font-weight:400;font-size:1.9rem;line-height:1;color:var(--chiffre)}
.rattr small{font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--choco-2)}

/* Emplacements photo */
.photo{position:relative;border-radius:22px;background:var(--bg,var(--abricot-c));display:grid;place-items:center;min-height:150px;overflow:hidden}
.photo .picto{width:58%;height:auto;margin-bottom:34px}
.photo span{position:absolute;left:10px;bottom:10px;right:10px;background:var(--blanc);border-radius:12px;padding:6px 10px;font-size:.78rem;font-weight:600;line-height:1.3}
.photo span i{display:block;font-style:normal;font-weight:500;color:var(--choco-2)}
.photo.grad{background:
  linear-gradient(var(--grille-1) 1px,transparent 1px) 0 0/100% 16px,
  linear-gradient(90deg,var(--grille-1) 1px,transparent 1px) 0 0/16px 100%,
  linear-gradient(var(--grille-2) 1px,transparent 1px) 0 0/100% 80px,
  linear-gradient(90deg,var(--grille-2) 1px,transparent 1px) 0 0/80px 100%,var(--blanc);border:1.5px solid var(--trait)}
.atlas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.atlas .photo{aspect-ratio:4/5;min-height:0}
.atlas .photo:nth-child(even){transform:translateY(16px)}

/* Labo */
.essai{background:var(--blanc);border:2px solid var(--choco);border-radius:28px;box-shadow:0 8px 0 var(--tiers-c);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);overflow:hidden}
.essai .gauche{padding:22px;display:flex;flex-direction:column;gap:14px}
.essai h3{font-size:1.9rem}
.coupes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.coupes .photo{aspect-ratio:1;min-height:0}
.essai .droite{padding:22px;display:flex;flex-direction:column;gap:18px;border-left:2px dashed var(--trait)}
.proto{margin:0;display:grid;grid-template-columns:108px minmax(0,1fr);gap:8px 14px;font-size:.97rem}
.proto dt{font-weight:700}
.proto dd{margin:0;color:var(--choco-2)}
.rech{font-size:.93rem;color:var(--choco-2);background:var(--creme);border-radius:16px;padding:12px 14px}
.recues{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.recues div{position:relative;background:var(--blanc);border:2px solid var(--trait);border-radius:24px 24px 24px 6px;padding:18px 18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.recues p{font-family:var(--titre);font-size:1.28rem;line-height:1.2}

/* Calculateur */
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,4vw,52px);align-items:start}
.moules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
fieldset{border:2px solid var(--trait);border-radius:24px;margin:0;padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column;gap:12px;background:var(--blanc)}
legend{font-family:var(--titre);font-size:1.12rem;padding:0 8px}
.champs{display:flex;gap:10px;flex-wrap:wrap}
label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600;color:var(--choco-2);flex:1;min-width:84px}
select,input[type=number]{border:2px solid var(--choco);border-radius:14px;background:var(--blanc);padding:9px 12px;width:100%;font-weight:700;font-size:1.02rem;color:var(--choco)}
.dessin{margin-top:16px;background:var(--blanc);border:2px solid var(--trait);border-radius:24px;padding:14px}
.dessin svg{display:block;width:100%;height:auto}
.dessin text{font-family:var(--texte);font-size:13px;font-weight:700;fill:var(--choco);text-anchor:middle}
.sortie{background:var(--blanc);border:2px solid var(--choco);border-radius:28px;box-shadow:0 8px 0 var(--vanille);overflow:hidden}
.sortie .chiffre{padding:20px 22px 0;font-size:clamp(3.4rem,7vw,5.6rem)}
.sortie .cond{padding:6px 22px 16px;font-family:var(--texte);font-size:1rem;font-weight:600;color:var(--choco-2)}
.sortie table{width:100%;border-collapse:collapse;font-size:.98rem}
.sortie th,.sortie td{padding:9px 22px;border-top:1.5px solid var(--trait);text-align:left;font-weight:500}
.sortie th:not(:first-child),.sortie td:not(:first-child){text-align:right}
.sortie thead th{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--choco-2)}
.sortie td:last-child{font-weight:700}
.sortie p.pied-s{padding:14px 22px;border-top:1.5px solid var(--trait);font-size:.92rem;color:var(--choco-2)}
.outils{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-weight:600;font-size:.93rem}
.outils span{border:2px solid var(--trait);border-radius:999px;padding:6px 14px;background:var(--blanc)}

/* Méthode : la bande chocolat */
.methode{background:var(--bande);color:var(--bande-encre)}
.methode .intit p{color:var(--bande-encre);opacity:.82}
.methode .note-main{color:var(--vanille)}
.methode .cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,4vw,52px)}
.niveaux{margin:0;padding:0;list-style:none;counter-reset:n}
.niveaux li{counter-increment:n;display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1.5px dashed rgba(255,246,232,.28);align-items:center}
.niveaux li::before{content:counter(n);display:grid;place-items:center;width:52px;height:52px;border-radius:58% 42% 55% 45%/48% 56% 44% 52%;background:var(--vanille);color:var(--cacao);font-family:var(--titre);font-size:1.6rem}
.niveaux b{font-family:var(--titre);font-weight:400;font-size:1.3rem;display:block}
.niveaux span{font-size:.96rem;opacity:.82}
.niveaux li.jamais::before{content:"×";background:var(--framboise);color:var(--lait);font-family:var(--texte);font-weight:700;font-size:1.9rem}
.preuves{display:flex;flex-direction:column;gap:14px}
.preuves div{border:1.5px solid rgba(255,246,232,.3);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.preuves .badge{background:var(--bande-encre);color:var(--cacao)}
.preuves .badge.plein{background:var(--vanille);color:var(--cacao)}
.preuves p{font-size:.96rem;opacity:.86}
.preuves .actions{flex-direction:row;flex-wrap:wrap;border:0;padding:0;gap:10px}

/* Matériel + pied */
.materiel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.materiel a{background:var(--blanc);border:2px solid var(--trait);border-radius:24px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:8px;--s:70px}
.materiel a:hover{border-color:var(--choco)}
.materiel b{font-family:var(--titre);font-weight:400;font-size:1.22rem;line-height:1.15}
.materiel span.def{font-size:.94rem;color:var(--choco-2)}
.pied{background:var(--blanc)}
.pied .w{padding-block:34px 44px;display:flex;flex-direction:column;gap:22px}
.az{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.az b{font-family:var(--titre);font-weight:400;font-size:1.2rem;margin-right:10px}
.az a{width:34px;height:34px;display:grid;place-items:center;font-weight:700;text-decoration:none;border-radius:50%;background:var(--creme)}
.az a:hover{background:var(--choco);color:var(--creme)}
.liens{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:600;font-size:.93rem}
.pied small{color:var(--choco-2);font-size:.86rem;max-width:60rem}

@media (max-width:900px){
  .ouverture .w,.intit,.diag,.calc,.essai,.fiche,.methode .cols{grid-template-columns:minmax(0,1fr)}
  .vitrine{max-width:440px;margin-inline:auto}
  .fiche dl{border-left:0;border-top:2px dashed var(--trait)}
  .essai .droite{border-left:0;border-top:2px dashed var(--trait)}
  .bases,.materiel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .questions{grid-template-columns:minmax(0,1fr)}
  .questions a{border-radius:26px}
  .atlas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .atlas .photo:nth-child(even){transform:none}
  .recues{grid-template-columns:minmax(0,1fr)}
  .menu{font-size:.92rem}
  .droite{align-items:flex-start}
  .parfums{padding-right:0;padding-left:10px}
  .menu a{padding:6px 10px}
}
@media (max-width:560px){
  .moules,.verdict .haut{grid-template-columns:minmax(0,1fr)}
  .bases{gap:10px}.base{padding:14px;--s:60px}.base b{font-size:1.24rem}
  .recherche{padding-left:14px}.recherche .btn{padding:12px 16px}
    .chemin{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .base,.materiel a,.questions a{transition:transform .18s,border-color .18s,background .18s}
  .base:hover,.materiel a:hover{transform:translateY(-4px) rotate(-.6deg)}
    .vitrine .flotte{animation:flotte 5s ease-in-out infinite alternate;transform-origin:262px 120px}
  @keyframes flotte{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
}

/* ===== Pages intérieures ===== */
.evite{position:absolute;left:-9999px;top:0;background:var(--blanc);padding:10px 16px;border-radius:12px;z-index:9}
.evite:focus{left:16px;top:10px}
.menu a[aria-current="page"]{background:var(--prim-c)}
.avis a{color:inherit;font-weight:700}
.fil{font-size:.86rem;color:var(--choco-2);display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.fil li+li::before{content:"›";margin-right:8px;opacity:.7}
.fil a{text-decoration:none;font-weight:600}
.fil a:hover{text-decoration:underline}
.ptete .w{padding-block:8px clamp(26px,4vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 26px;align-items:center}
.ptete .fil{grid-column:1/-1}
.ptete .pic{--s:clamp(74px,10vw,112px)}
.ptete h1{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04}
.ptete .chapo{margin-top:12px;max-width:44rem}
.ptete.sans-pic .w{grid-template-columns:minmax(0,1fr)}
.meta-page{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:var(--choco-2);align-items:center}
.brouillon{background:var(--tiers-c);border-radius:18px;padding:12px 18px;margin-bottom:22px;font-size:.95rem;display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
.brouillon b{font-family:var(--titre);font-weight:400;font-size:1.12rem}
.corps .w{padding-block:clamp(30px,4.5vw,60px)}
.colonnes{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:start}
.colonnes>aside{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.encadre{background:var(--blanc);border:2px solid var(--trait);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.encadre h2,.encadre h3{font-family:var(--titre);font-size:1.22rem}
.encadre ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.encadre a{font-weight:600}
.prose{max-width:46rem}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.6rem,3vw,2.15rem);margin-top:1.6em}
.prose h3{font-family:var(--texte);font-weight:700;font-size:1.18rem;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.35em}
.prose a{color:var(--prim);font-weight:600;text-underline-offset:2px}
.prose blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--prim);background:var(--blanc);border-radius:0 18px 18px 0}
.prose blockquote p+p{margin-top:.4em}
.prose cite{display:block;font-style:normal;font-size:.9rem;color:var(--choco-2);margin-top:6px}
.tableau{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:18px;overflow:hidden;font-size:.97rem}
.tableau th,.tableau td{padding:10px 14px;border-top:1.5px solid var(--trait);text-align:left;vertical-align:top}
.tableau thead th{border-top:0;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--choco-2)}
.defile{overflow-x:auto}
.val{font-weight:700;white-space:nowrap}
.val.a-sourcer{background:var(--tiers-c);border-radius:6px;padding:0 4px}
.source{font-size:.9rem;color:var(--choco-2)}
.securite{background:var(--blanc);border:2px solid var(--framboise);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.securite h2{font-family:var(--titre);font-size:1.3rem;margin:0!important}
.securite::before{content:"Sécurité";align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 12px;background:var(--framboise);color:var(--lait)}
.essentiel{background:var(--prim-c);border-radius:24px;padding:18px 22px}
.essentiel h2{font-family:var(--titre);font-size:1.25rem;margin:0!important}
.essentiel ul{margin:.6em 0 0}
.bloc.a-faire{border:2px dashed var(--trait);border-radius:24px;padding:16px 20px;background:transparent;margin-top:1.4em}
.bloc.a-faire h2{font-size:1.45rem;margin-top:0}
.bloc.a-faire p.consigne{color:var(--choco-2);font-size:.95rem}
.bloc.a-faire p.consigne::before{content:"À compléter · ";font-weight:700;color:var(--note)}
.bloc.a-faire .relire{font-size:.86rem;font-weight:700;color:var(--note)}
.fiche.seule{margin-top:6px}
.fiche .gauche .pic{--s:64px}
.grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grille.quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
.carte{background:var(--blanc);border:2px solid var(--trait);border-radius:24px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:8px;--s:64px}
a.carte:hover{border-color:var(--choco)}
.carte b{font-family:var(--titre);font-weight:400;font-size:1.3rem;line-height:1.12}
.carte span.def{font-size:.94rem;color:var(--choco-2);flex:1}
.carte u{text-decoration:none;font-weight:700;font-size:.93rem;color:var(--prim)}
.etat{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1.5px dashed var(--choco-2);color:var(--choco-2)}
.famille+.famille{margin-top:clamp(30px,4vw,46px)}
.famille>h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px}
.questions.une{grid-template-columns:minmax(0,1fr)}
.questions a .etat{flex:none}
.pubs .encart{margin-top:26px}
.encart{border:2px dashed var(--trait);border-radius:22px;padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px}
.encart[hidden]{display:none}
.encart>.badge{background:transparent;border:1.5px solid var(--trait);color:var(--choco-2)}
.lexique dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.lexique .lettre{font-family:var(--titre);font-size:2.2rem;color:var(--chiffre);margin:1.2em 0 .2em;scroll-margin-top:16px}
.lexique dt{font-family:var(--titre);font-size:1.3rem;margin-top:.9em;scroll-margin-top:16px}
.lexique dd{margin:4px 0 0;color:var(--choco-2);max-width:44rem}
.conv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:46rem}
.conv .sortie{padding-bottom:4px}
.proposer{margin-top:14px;display:flex;flex-direction:column;gap:10px;max-width:40rem}
.proposer textarea{font:inherit;border:2px solid var(--choco);border-radius:18px;padding:12px 14px;min-height:96px;background:var(--blanc);color:var(--choco)}
.proposer .piege{position:absolute;left:-9999px}
.message{font-weight:600}
.liste-sources{font-size:.92rem;color:var(--choco-2)}
.liste-sources li+li{margin-top:.5em}
.lien-retour{display:inline-block;margin-top:22px;font-weight:700;color:var(--prim)}
.offres{display:flex;flex-direction:column;gap:10px}
.offres a{display:flex;justify-content:space-between;gap:12px;background:var(--blanc);border:2px solid var(--trait);border-radius:18px;padding:12px 16px;text-decoration:none;font-weight:600}
.vide-404 .w{padding-block:clamp(40px,8vw,90px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.vide-404 .pic{--s:120px}
@media (max-width:900px){
  .colonnes{grid-template-columns:minmax(0,1fr)}
  .colonnes>aside{position:static}
  .grille,.grille.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grille,.grille.quatre,.conv{grid-template-columns:minmax(0,1fr)}
  .ptete .w{grid-template-columns:minmax(0,1fr)}
  .ptete .pic{--s:72px}
}
@media print{
  .avis,.tete .droite,.pied,.encart,.feston,aside{display:none!important}
  body{background:#fff;color:#000}
}
.resultats a.prep{font-weight:500;color:var(--choco-2)}
.resultats .vide .message{flex-basis:100%;font-size:.95rem}
.calc-ingr{width:100%;border-collapse:collapse;margin-top:16px;background:var(--blanc);border:2px solid var(--trait);border-radius:24px;overflow:hidden}
.calc-ingr th,.calc-ingr td{padding:8px 10px;border-top:1.5px solid var(--trait);text-align:left}
.calc-ingr thead th{border-top:0;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--choco-2)}
.calc-ingr input,.calc-ingr select{border:2px solid var(--trait);border-radius:12px;background:var(--blanc);padding:7px 10px;width:100%;font-weight:600;color:var(--choco);min-width:0}
.calc-ingr td:nth-child(2) input{width:76px}.calc-ingr select{min-width:76px}.calc-ingr td:last-child{text-align:right}
.calc-ingr output{font-weight:700;white-space:nowrap}
.calc-ingr tfoot td{padding:10px}
.calc-ingr .btn{padding:8px 16px;font-size:.92rem}
@media (max-width:560px){.calc-ingr th,.calc-ingr td{padding:6px 5px}.calc-ingr input,.calc-ingr select{padding:6px 6px}}
[hidden]{display:none!important}
.diag{grid-template-areas:"prep verdict" "sympt verdict";grid-template-rows:auto 1fr;row-gap:0}
.diag>.onglets-p,.diag .d-prep,.diag .d-prep>.onglets-p{display:contents}
.diag .prep-zone{grid-area:prep;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.diag .prep-zone>span{flex-basis:100%;margin-bottom:2px}
.diag .sympt{grid-area:sympt}
.diag .verdict{grid-area:verdict}
.diag .rattr a{font-weight:700;color:var(--prim)}
@media (max-width:900px){.diag{grid-template-areas:"prep" "sympt" "verdict";grid-template-rows:auto}}
.etat{white-space:nowrap}
.ptete+.corps>.w{padding-top:6px}
.ptete .w{align-items:end}