/* Gamelle Juste, thème « gamelle émaillée » (08/11/2026). Émail blanc, liseré bleu marine, croquette, étiquette de rayon.
   Fiche : theme/DA.md. Remplace gabarits/style.css : style tout ce que les pages et les outils écrivent. */
:root{
  --fond:#f5f3ee; --surface:#ffffff; --email:#fbfaf7; --bleu-doux:#e4e9f3; --bleu-pale:#f0f3f9;
  --marine:#1b2d5b; --marine-2:#24396f; --nuit:#111c3a;
  --encre:#1a2133; --doux:#566074; --filet:#d9dde6;
  --croquette:#a84a14; --croquette-h:#8f3d0f; --croq-clair:#e3a25e; --croq-pale:#f7e6d2;
  --etiq:#fff0b3; --etiq-bord:#e8c95a; --etiq-encre:#3b2f05;
  --lien:#1f4fa8; --ok:#2f6b3a; --ko:#9a2f2a;
  --r:18px; --r-p:10px;
  --titre:'Fredoka',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --texte:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --croq-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cg fill='%23e3a25e'%3E%3Cellipse cx='10' cy='11' rx='6' ry='4.5' transform='rotate(-20 10 11)'/%3E%3Cellipse cx='34' cy='10' rx='5.5' ry='4' transform='rotate(25 34 10)'/%3E%3Cellipse cx='58' cy='12' rx='6' ry='4.5' transform='rotate(-35 58 12)'/%3E%3Cellipse cx='82' cy='10' rx='5' ry='4' transform='rotate(15 82 10)'/%3E%3Cellipse cx='106' cy='12' rx='6' ry='4.5' transform='rotate(-10 106 12)'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){:root{
  --fond:#0f1422; --surface:#172036; --email:#1b2540; --bleu-doux:#22305a; --bleu-pale:#1a2440;
  --marine:#0a1020; --marine-2:#16224a; --nuit:#070b17;
  --encre:#eef1f7; --doux:#aab3c5; --filet:#2d3a5c;
  --croquette:#b14f17; --croquette-h:#c45d1f; --croq-clair:#d9914a; --croq-pale:#3a2716;
  --etiq:#3a3418; --etiq-bord:#8c7a2a; --etiq-encre:#ffeaa0;
  --lien:#9fc0ff; --ok:#8fd19c; --ko:#ff9d96;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.65 var(--texte);overflow-x:hidden}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--lien);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--croq-clair);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;line-height:1.15;letter-spacing:-.005em;color:var(--encre)}
strong,b{font-weight:700}
.evitement{position:absolute;left:-999px;top:0;background:var(--marine);color:#fff;padding:.6rem 1rem;z-index:50}
.evitement:focus{left:1rem}
.petit{font-size:.86rem;color:var(--doux);line-height:1.5}

/* ===== En-tête : barre d'émail, liseré marine ===== */
.ent{background:var(--email);border-bottom:5px solid var(--marine);position:sticky;top:0;z-index:20}
.ent__l{max-width:1180px;margin:0 auto;padding:.55rem 16px;display:flex;align-items:center;gap:1.2rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--encre);flex:none}
.logo__ic svg{width:38px;height:38px;display:block;fill:none;stroke:var(--marine);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.logo__ic .ic-plein{fill:var(--croquette);stroke:none}
.logo__ic .ic-fin{stroke-width:1.6}
.logo__nom{font:600 1.35rem/1 var(--titre)}
.logo__nom b{font-weight:700;color:var(--croquette)}
.ent__nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.ent__nav::-webkit-scrollbar{display:none}
.ent__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem;white-space:nowrap}
.ent__nav a{display:block;padding:.45rem .8rem;border-radius:999px;text-decoration:none;color:var(--encre);font-weight:600;font-size:.95rem}
.ent__nav a:hover{background:var(--bleu-doux)}
.ent__nav a[aria-current]{background:var(--marine);color:#fff}
@media (prefers-color-scheme: dark){.ent__nav a[aria-current]{background:#2b4180}.logo__ic svg{stroke:#9fb4e8}}
.ent__cta{flex:none;background:var(--croquette);color:#fff;text-decoration:none;font:600 .95rem/1 var(--titre);padding:.7rem 1.1rem;border-radius:999px}
.ent__cta:hover{background:var(--croquette-h)}
@media (max-width:820px){
  .ent__l{flex-wrap:wrap;gap:.3rem .8rem;padding-bottom:.35rem}
  .ent__nav{order:3;flex-basis:100%;margin:0 -16px;padding:0 16px}
  .ent__cta{margin-left:auto;padding:.6rem .9rem;font-size:.88rem}
  .logo__ic svg{width:32px;height:32px}
  .logo__nom{font-size:1.18rem}
}
@media (max-width:380px){.ent__cta{display:none}}

/* ===== Boutons ===== */
.btn{display:inline-block;font:600 1rem/1.2 var(--titre);padding:.85rem 1.35rem;border-radius:999px;text-decoration:none;border:2px solid transparent;text-align:center}
.btn--croquette{background:var(--croquette);color:#fff}
.btn--croquette:hover{background:var(--croquette-h)}
.btn--email{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--email:hover{background:rgba(255,255,255,.12)}
.btn--marine{background:var(--marine);color:#fff}
.btn--marine:hover{background:var(--marine-2)}
@media (prefers-color-scheme: dark){.btn--marine{background:#2b4180}.btn--marine:hover{background:#344c94}}
.cta{display:inline-block;background:var(--croquette);color:#fff;text-decoration:none;font:600 .98rem/1.2 var(--titre);padding:.78rem 1.2rem;border-radius:999px;text-align:center}
.cta:hover{background:var(--croquette-h);color:#fff}
.cta--tab{padding:.38rem .8rem;font-size:.85rem;background:transparent;color:var(--croquette);border:2px solid var(--croquette);white-space:nowrap}
.cta--tab:hover{background:var(--croquette);color:#fff}
@media (prefers-color-scheme: dark){.cta--tab{color:#f2b27a;border-color:#d9914a}.cta--tab:hover{background:var(--croquette);color:#fff;border-color:var(--croquette)}}
.cta--petit{padding:.5rem .9rem;font-size:.88rem}

/* ===== Motif de croquettes (filet de section) ===== */
.croquettes{height:22px;background:var(--croq-motif) repeat-x center/120px 22px;opacity:.9}
.croquettes--heros{position:absolute;left:0;right:0;bottom:14px;opacity:.55}

/* ===== Héros : émail bleu marine moucheté ===== */
.heros{position:relative;background:var(--marine);color:#fff;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.6px),radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.4px);
  background-size:26px 26px,17px 17px;background-position:0 0,9px 13px}
.heros__l{max-width:1180px;margin:0 auto;padding:3.2rem 16px 4.4rem;display:grid;grid-template-columns:1.25fr .9fr;gap:2.5rem;align-items:center}
.surtitre{margin:0 0 .8rem;font:600 .86rem/1.3 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--croq-clair)}
.heros h1{color:#fff;font-size:clamp(2rem,4.6vw,3.35rem);margin:0 0 1rem;font-weight:700}
.heros__chapo{font-size:1.18rem;margin:0 0 1.5rem;color:#dfe5f2;max-width:36em}
.heros__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.6rem}
.heros__preuves{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.heros__preuves li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:.55rem .9rem;display:flex;flex-direction:column;min-width:7.5rem}
.heros__preuves strong{font:700 1.4rem/1.1 var(--titre);color:#fff}
.heros__preuves span{font-size:.82rem;color:#c3cce0}
.heros__meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem;color:#c3cce0}
.heros__meta .signature,.heros__meta .maj{color:#c3cce0;margin:0}
.heros__meta a,.heros__meta .signature a{color:#fff}
.heros__gamelle{position:relative;justify-self:center;width:min(340px,100%)}
.heros__gamelle svg{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.g-rebord{fill:#fbfaf7;stroke:#0e1a3a;stroke-width:10}
.g-email{fill:#eef1f7}
.g-fond{fill:#dde3ef}
.g-croq ellipse{fill:#b8601f;stroke:#8f3d0f;stroke-width:2}
.g-reflet{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;opacity:.65}
.heros__etiq{position:absolute;right:-4px;bottom:16%;background:var(--etiq);color:var(--etiq-encre);border:2px solid var(--etiq-bord);border-radius:8px 8px 8px 0;padding:.4rem .75rem;font:600 1.05rem/1 var(--titre);transform:rotate(-6deg);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.heros__etiq span{font-size:1.5rem;margin-right:.25rem}
@media (max-width:820px){
  .heros__l{grid-template-columns:1fr;padding:2rem 16px 3.4rem;gap:1.4rem}
  .heros__gamelle{width:min(150px,45%);grid-row:1;justify-self:start}
  .heros__etiq{font-size:.8rem;right:-30px;bottom:8%}
  .heros__chapo{font-size:1.06rem}
}

/* ===== Calculateur sur l'accueil : la gamelle posée sur la table ===== */
.calcul{padding:0 16px;margin-top:-2.2rem;position:relative;z-index:2}
.calcul__l{max-width:1060px;margin:0 auto;background:var(--surface);border:3px solid var(--marine);border-radius:28px;padding:1.6rem 1.6rem 1.2rem;box-shadow:0 14px 34px rgba(17,28,58,.14)}
@media (prefers-color-scheme: dark){.calcul__l{border-color:#2b4180;box-shadow:none}}
.calcul__tete{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.calcul__ic svg{width:56px;height:56px;fill:none;stroke:var(--marine);stroke-width:2.4;stroke-linecap:round}
@media (prefers-color-scheme: dark){.calcul__ic svg{stroke:#9fb4e8}}
.calcul__ic .ic-plein{fill:var(--croquette);stroke:none}
.calcul__ic .ic-fin{stroke-width:1.4}
.calcul__sur{margin:0;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--croquette)}
@media (prefers-color-scheme: dark){.calcul__sur{color:#f2b27a}}
.calcul__tete h2{margin:.1rem 0 .3rem;font-size:clamp(1.45rem,3vw,1.9rem)}
.calcul__tete p:last-child{margin:0;color:var(--doux)}
.calcul .outil{margin:0;border:0;padding:0;background:none;box-shadow:none}
.calcul__pied{margin:1rem 0 0;font-weight:600}
@media (max-width:600px){.calcul{margin-top:-1.6rem;padding:0 10px}.calcul__l{padding:1.1rem 14px 1rem;border-radius:22px}.calcul__ic{display:none}}

/* ===== Outils (pages et accueil) ===== */
.outil{background:var(--surface);border:2px solid var(--filet);border-top:6px solid var(--marine);border-radius:var(--r);padding:1.3rem;margin:1.6rem 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.2rem;align-items:end}
@media (prefers-color-scheme: dark){.outil{border-top-color:#2b4180}}
.outil > label{grid-column:span 1;font-weight:600;font-size:.92rem;color:var(--encre);margin-top:.5rem;align-self:end}
.outil > div:not(.res){display:contents}
.outil > div:not(.res) > label{font-weight:600;font-size:.92rem;margin-top:.5rem;align-self:end}
.outil select,.outil input[type=number]{width:100%;font:500 1.02rem/1.3 var(--texte);color:var(--encre);background:var(--bleu-pale);border:2px solid var(--filet);border-radius:12px;padding:.7rem .8rem;min-height:3rem}
.outil select:focus,.outil input:focus{border-color:var(--marine);outline:none;box-shadow:0 0 0 3px var(--croq-clair)}
@media (prefers-color-scheme: dark){.outil select:focus,.outil input:focus{border-color:#9fb4e8}}
/* labels et champs : une colonne de libellés puis une de champs, par paires sur grand écran */
.outil{grid-auto-flow:row dense}
.outil .case{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;font-weight:500;margin-top:.8rem}
.outil .case input{width:1.3rem;height:1.3rem;accent-color:var(--croquette);flex:none}
.res{grid-column:1/-1;margin-top:1.1rem;background:var(--bleu-pale);border-radius:14px;padding:1rem 1.1rem;border-left:6px solid var(--croquette);min-width:0}
.res p{margin:.3rem 0}
.res__top{font-size:1.05rem}
.gros{display:inline-block;font:700 1.9rem/1.1 var(--titre);color:var(--croquette);background:var(--etiq);border:2px solid var(--etiq-bord);border-radius:8px;padding:.05rem .5rem;margin-left:.2rem}
@media (prefers-color-scheme: dark){.gros{color:var(--etiq-encre)}}
.res table{margin:.8rem 0}
tr.ref td{background:var(--etiq)!important;color:var(--etiq-encre)}
tr.ref td a{color:inherit}
@media (max-width:600px){.outil{grid-template-columns:1fr;padding:1rem 12px}.gros{font-size:1.6rem}}

/* ===== Portes : pour qui, la gamelle ? ===== */
.portes{padding:3.2rem 16px 1rem}
.portes__l{max-width:1180px;margin:0 auto}
.portes h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 .35rem}
.portes__intro{margin:0 0 1.4rem;color:var(--doux)}
.portes__grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.portes__grille a{height:100%;display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1rem 1.2rem;background:var(--surface);border:2px solid var(--filet);border-bottom:6px solid var(--marine);border-radius:22px 22px 30px 30px;text-decoration:none;color:var(--encre);transition:transform .15s,border-color .15s}
@media (prefers-color-scheme: dark){.portes__grille a{border-bottom-color:#2b4180}}
.portes__grille a:hover{transform:translateY(-3px);border-color:var(--croq-clair)}
.portes__ic{width:58px;height:58px;border-radius:50%;background:var(--croq-pale);display:grid;place-items:center;margin-bottom:.3rem}
.portes__ic svg{width:36px;height:36px;fill:none;stroke:var(--marine);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme: dark){.portes__ic svg{stroke:#f2b27a}}
.portes__ic .ic-plein{fill:var(--croquette);stroke:none}
.portes__ic .ic-fin{stroke-width:1.5}
.portes__ic .ic-barre{stroke:var(--croquette);stroke-width:2.6}
.portes__qui{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--croquette)}
@media (prefers-color-scheme: dark){.portes__qui{color:#f2b27a}}
.portes__grille strong{font:600 1.12rem/1.2 var(--titre)}
.portes__txt{font-size:.9rem;color:var(--doux);line-height:1.45}
@media (max-width:1000px){.portes__grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.portes{padding-top:2.4rem}.portes__grille{grid-template-columns:1fr 1fr;gap:.7rem}.portes__grille li:first-child{grid-column:1/-1}.portes__grille a{padding:.9rem .8rem}.portes__txt{display:none}.portes__grille li:first-child .portes__txt{display:block}}

/* ===== Vitrine et sélection : le plateau de gamelles ===== */
.vitrine{padding:2rem 16px 1rem}
.vitrine__l{max-width:1180px;margin:0 auto}
.vitrine__suite{text-align:center;margin:1.2rem 0 0}
.selection{margin:1.8rem 0;background:var(--bleu-doux);border-radius:28px;padding:1.6rem 1.4rem 1.2rem;position:relative}
.selection::before{content:"";position:absolute;left:1.4rem;right:1.4rem;top:-11px;height:22px;background:var(--croq-motif) repeat-x center/120px 22px}
.selection__tete{max-width:46em}
.selection__sur{margin:0;font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--croquette)}
@media (prefers-color-scheme: dark){.selection__sur{color:#f2b27a}}
.selection .selection__titre{margin:.15rem 0 .4rem;font-size:clamp(1.45rem,3vw,2rem)}
.selection__intro{margin:0 0 1rem;color:var(--doux)}
.selection__glisse{display:none}
.selection__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;align-items:stretch}
.selection__note{margin:1rem 0 0}
.methode-lien{margin:.7rem 0 0}
@media (max-width:700px){
  .selection{padding:1.2rem 0 1rem;border-radius:22px;margin-left:-6px;margin-right:-6px}
  .selection__tete,.selection__note,.methode-lien,.selection__glisse{padding:0 14px}
  .selection__glisse{display:block;margin:0 0 .5rem;font-size:.85rem;font-weight:600;color:var(--doux)}
  .selection__grille{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;padding:0 14px .6rem;scrollbar-width:thin}
  .selection__grille > .prod{flex:0 0 84%;scroll-snap-align:start}
}

/* ===== Encart produit : une gamelle émaillée ===== */
.prod{background:var(--surface);border:2px solid var(--filet);border-radius:24px;padding:1.1rem 1.1rem 1rem;display:flex;flex-direction:column;gap:.45rem;position:relative;margin:1rem 0;min-width:0}
.selection .prod{margin:0}
.prod--un{border:3px solid var(--marine);box-shadow:0 10px 26px rgba(17,28,58,.12)}
@media (prefers-color-scheme: dark){.prod--un{border-color:#5f78c0;box-shadow:none}}
.prod__tete{display:flex;align-items:center;gap:.6rem;min-height:2.4rem}
.prod__rang{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font:700 1.15rem/1 var(--titre);box-shadow:inset 0 0 0 3px var(--email),0 0 0 2px var(--marine)}
@media (prefers-color-scheme: dark){.prod__rang{background:#2b4180;box-shadow:inset 0 0 0 3px var(--surface),0 0 0 2px #2b4180}}
.prod--un .prod__rang{background:var(--croquette);box-shadow:inset 0 0 0 3px var(--email),0 0 0 2px var(--croquette)}
.prod__badge{margin:0;font-weight:700;font-size:.86rem;line-height:1.3;color:var(--marine);background:var(--bleu-pale);border-radius:999px;padding:.3rem .7rem}
@media (prefers-color-scheme: dark){.prod__badge{color:#cdd8f5}}
.prod__img{border-radius:14px;background:var(--bleu-pale)}
.prod__marque{margin:.2rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--croquette)}
@media (prefers-color-scheme: dark){.prod__marque{color:#f2b27a}}
.prod__marque span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--doux)}
.prod__nom{margin:0;font:600 1.12rem/1.25 var(--titre);color:var(--encre)}
.prod__pourquoi{margin:0;font-size:.93rem;color:var(--encre);line-height:1.5}
.prod__caracs{margin:.2rem 0;padding:0;list-style:none;font-size:.9rem}
.prod__caracs > div,.prod__caracs > li{display:flex;justify-content:space-between;gap:.8rem;padding:.32rem 0;border-bottom:1px dotted var(--filet)}
.prod__caracs dt,.prod__caracs li > span{color:var(--doux)}
.prod__caracs dd,.prod__caracs li > strong{margin:0;font-weight:600;text-align:right}
.prod__pm{display:grid;gap:.3rem;font-size:.88rem}
.prod__pm ul{list-style:none;margin:0;padding:0}
.prod__pm li{padding-left:1.4rem;position:relative;margin:.15rem 0;line-height:1.4}
.prod__plus li::before{content:"+";position:absolute;left:.15rem;font-weight:800;color:var(--ok)}
.prod__moins li::before{content:"−";position:absolute;left:.15rem;font-weight:800;color:var(--ko)}
.prod__achat{margin-top:auto;padding-top:.6rem;display:flex;flex-direction:column;gap:.6rem}
.prod__achat .cta{width:100%}
/* étiquette de rayon : fond jaune, encoche, gros prix */
.prod__etiq,.prod__prix{margin:0;background:var(--etiq);color:var(--etiq-encre);border:2px solid var(--etiq-bord);border-radius:10px 10px 10px 2px;padding:.45rem .8rem .5rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .6rem;position:relative}
.prod__etiq::after,.prod__prix::after{content:"";position:absolute;right:.7rem;top:50%;width:.6rem;height:.6rem;margin-top:-.3rem;border-radius:50%;background:var(--surface);border:2px solid var(--etiq-bord)}
.prod__etiq-l{flex-basis:100%;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.prod__etiq strong,.prod__prix strong{font:700 1.7rem/1.05 var(--titre)}
.prod__etiq s,.prod__prix s{font-size:.92rem;opacity:.75}
.prod__date,.prod__prix span{flex-basis:100%;font-size:.78rem;opacity:.85;padding-right:1.4rem}
.prod__etiq--vide{font-weight:600}

/* ===== Bandeau livraison ===== */
.colis{padding:2rem 16px}
.colis__l{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;background:var(--croq-pale);border-radius:28px;padding:1.4rem 1.6rem;border:2px dashed var(--croq-clair)}
.colis__ic svg{width:64px;height:64px;fill:none;stroke:var(--croquette);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
@media (prefers-color-scheme: dark){.colis__ic svg{stroke:#f2b27a}}
.colis__ic .ic-fin{stroke-width:1.5}
.colis__txt{flex:1;min-width:0}
.colis__sur{margin:0;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--croquette)}
@media (prefers-color-scheme: dark){.colis__sur{color:#f2b27a}}
.colis h2{margin:.1rem 0 .3rem;font-size:1.45rem}
.colis__txt p:last-child{margin:0;color:var(--doux)}
.colis .btn{flex:none}
@media (max-width:700px){.colis__l{flex-direction:column;align-items:flex-start;padding:1.2rem 14px;gap:.7rem}.colis__ic svg{width:48px;height:48px}.colis .btn{width:100%}}

/* ===== Tête des pages intérieures ===== */
.tete{background:var(--bleu-doux);border-bottom:0;position:relative}
.tete__l{max-width:880px;margin:0 auto;padding:1.4rem 16px 1.8rem}
.tete h1{font-size:clamp(1.8rem,4.2vw,2.75rem);margin:.6rem 0 .7rem;font-weight:700}
.tete__chapo{font-size:1.15rem;margin:0 0 .9rem;color:var(--encre);max-width:40em}
.tete__meta{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.tete .croquettes{position:absolute;left:0;right:0;bottom:-11px}
.tete--outil{background:var(--marine);color:#fff}
.tete--outil h1,.tete--outil .tete__chapo{color:#fff}
.tete--outil .fil,.tete--outil .fil a,.tete--outil .signature,.tete--outil .maj,.tete--outil .signature a{color:#c3cce0}
.fil{font-size:.86rem;color:var(--doux)}
.fil a{color:var(--doux)}
.signature,.maj{margin:0;font-size:.88rem;color:var(--doux)}
.signature a{color:var(--encre);font-weight:600}

/* ===== Corps d'article ===== */
.cont{max-width:880px;margin:0 auto;padding:2.2rem 16px 3rem}
.accueil .cont{padding-top:2.6rem}
.art__sur{margin:0 0 .4rem;font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--croquette)}
@media (prefers-color-scheme: dark){.art__sur{color:#f2b27a}}
.art > p,.art li{max-width:46em}
.art h2{font-size:clamp(1.4rem,3vw,1.85rem);margin:2.4rem 0 .8rem}
.art > h2{padding-top:1.4rem;background:var(--croq-motif) no-repeat left top/120px 22px}
.art h3{font-size:1.25rem;margin:1.8rem 0 .5rem}
.art ul,.art ol{padding-left:1.3rem}
.art li{margin:.3rem 0}
.art li::marker{color:var(--croquette)}
.aff{font-size:.88rem;color:var(--doux);background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-p);padding:.6rem .85rem;margin:0 0 1.2rem}
.encadre{background:var(--email);border:2px solid var(--marine);border-radius:var(--r);padding:.9rem 1.1rem;margin:1.4rem 0;position:relative}
@media (prefers-color-scheme: dark){.encadre{border-color:#2b4180;background:var(--surface)}}
.encadre p{margin:.3rem 0}
.encadre strong:first-child{color:var(--croquette)}
@media (prefers-color-scheme: dark){.encadre strong:first-child{color:#f2b27a}}
.illu{margin:1.4rem 0;text-align:center}
.illu img,.illu svg{border-radius:var(--r)}
.mois{font-variant-numeric:tabular-nums}

/* tableaux : défilement interne, jamais la page */
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:separate;border-spacing:0;width:100%;max-width:100%;margin:1.2rem 0;font-size:.93rem;background:var(--surface);border:2px solid var(--filet);border-radius:16px;font-variant-numeric:tabular-nums}
thead,tbody{width:100%}
th{background:var(--marine);color:#fff;font:600 .88rem/1.3 var(--texte);text-align:left;padding:.65rem .75rem;vertical-align:bottom}
@media (prefers-color-scheme: dark){th{background:#16224a}}
td{padding:.6rem .75rem;border-top:1px solid var(--filet);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--bleu-pale)}
td .petit{font-size:.8rem}
@media (min-width:1100px){.art > table{width:calc(100% + 160px);max-width:none;margin-left:-80px}}
s{color:var(--doux)}

/* sommaire */
.sommaire{background:var(--surface);border:2px solid var(--filet);border-radius:var(--r);padding:.9rem 1.2rem;margin:1.4rem 0}
.sommaire p,.sommaire h2{margin:0 0 .4rem;font:600 1rem/1.3 var(--titre);padding:0;background:none}
.sommaire ol,.sommaire ul{margin:0;padding-left:1.2rem}

/* verdict */
.verdict{background:var(--marine);color:#fff;border-radius:24px;padding:1.3rem 1.4rem;margin:2rem 0}
.verdict h2{color:#fff;margin:.1rem 0 .5rem;padding:0;background:none}
.verdict__sur{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--croq-clair)}
.verdict__liste{list-style:none;padding:0;margin:.8rem 0 0}
.verdict__liste li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;border-top:1px solid rgba(255,255,255,.18)}
.verdict__liste em{display:block;font-style:normal;font-size:.85rem;color:#c3cce0}

/* FAQ */
.faq{margin:2.6rem 0 1rem}
.faq h2{margin-top:0}
details{background:var(--surface);border:2px solid var(--filet);border-radius:16px;margin:.6rem 0;overflow:hidden}
details[open]{border-color:var(--marine)}
@media (prefers-color-scheme: dark){details[open]{border-color:#2b4180}}
summary{cursor:pointer;list-style:none;padding:.85rem 2.6rem .85rem 1rem;font:600 1.02rem/1.35 var(--titre);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.9rem;top:50%;transform:translateY(-50%);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--croq-pale);color:var(--croquette);display:grid;place-items:center;font:700 1.1rem/1 var(--texte)}
details[open] summary::after{content:"−"}
details > p{margin:0;padding:0 1rem 1rem}

/* à lire aussi */
.suite{margin:2.4rem 0 0}
.cartes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.cartes a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1rem;background:var(--surface);border:2px solid var(--filet);border-radius:20px;text-decoration:none;color:var(--encre)}
.cartes a:hover{border-color:var(--croq-clair)}
.cartes strong{font:600 1.05rem/1.25 var(--titre);color:var(--lien)}
.cartes span{font-size:.9rem;color:var(--doux)}

/* ===== Barre collante mobile ===== */
.collant{position:fixed;left:8px;right:8px;bottom:8px;z-index:30;display:flex;align-items:center;gap:.6rem;background:var(--marine);color:#fff;border-radius:18px;padding:.55rem .55rem .55rem .7rem;box-shadow:0 10px 28px rgba(0,0,0,.3);transform:translateY(140%);transition:transform .25s}
.collant.vu{transform:none}
.collant__rang{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--croquette);display:grid;place-items:center;font:700 1rem/1 var(--titre);box-shadow:inset 0 0 0 2px #fff}
.collant__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.collant__txt strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collant__txt span{font-size:.76rem;color:#c3cce0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta--collant{flex:none;padding:.6rem .85rem;font-size:.86rem}
.collant__x{flex:none;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;width:2rem;height:2rem;cursor:pointer;opacity:.8}
@media (min-width:900px){.collant{display:none}}
body.a-collant{padding-bottom:0}
@media (max-width:899px){body.a-collant .pied{padding-bottom:5rem}}

/* ===== Pied : le dessous de la gamelle ===== */
.pied{background:var(--nuit);color:#c3cce0;margin-top:2rem}
.pied__rebord{height:12px;background:var(--marine);border-top:4px solid var(--email)}
@media (prefers-color-scheme: dark){.pied__rebord{border-top-color:#2b4180}}
.pied__l{max-width:1180px;margin:0 auto;padding:2.2rem 16px 2rem;display:grid;grid-template-columns:1.3fr 1fr;gap:1.2rem 2.5rem}
.logo--pied{color:#fff}
.logo--pied .logo__ic svg{stroke:#dfe5f2}
.logo--pied .logo__nom b{color:var(--croq-clair)}
.pied__phrase{font:600 1.15rem/1.35 var(--titre);color:#fff;margin:.9rem 0 .4rem}
.pied__marque p:last-child{margin:0;font-size:.92rem}
.pied__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.pied__nav a,.pied__legal a{color:#fff;text-decoration:none}
.pied__nav a:hover,.pied__legal a:hover{text-decoration:underline}
.pied__legal{grid-column:1/-1;margin:.6rem 0 0;font-size:.9rem;border-top:1px solid rgba(255,255,255,.14);padding-top:1rem}
.pied .petit{grid-column:1/-1;color:#98a3bb;margin:0}
@media (max-width:700px){.pied__l{grid-template-columns:1fr}}