/* Pages « guides » (coût matière, fiche technique, prix de vente) : le design « Le passe », le même que la page
   d'accueil et l'application (fond sombre, une seule couleur vive, titres et gros chiffres en police étroite).
   Police du texte hébergée sur le site (et non chargée chez Google) pour qu'aucune adresse IP de visiteur ne parte chez un
   tiers (RGPD). Les titres prennent la police étroite déjà présente sur l'appareil (aucun fichier à charger). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-latin.woff2) format('woff2');}
:root{
  --fond:#121416;
  --fond-2:#171a1d;
  --carte:#1b1f22;
  --carte-2:#242a2e;
  --trait:#2a3035;
  --texte:#f1f3f2;
  --gris:#a3adb2;
  --ambre:#f2a93b;
  --ambre-clair:#ffbe5f;
  --sur-ambre:#1a1205;
  --vert:#7ee2a8;
  --vert-fond:#173d2a;
  --font-titre:"Barlow Condensed","Avenir Next Condensed","DIN Condensed","Roboto Condensed","sans-serif-condensed","Bahnschrift SemiCondensed","Arial Narrow",'Archivo',sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --gutter:64px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--font-body);line-height:1.5;}
a{color:inherit;text-decoration:none;}
svg{max-width:100%;}
h1,h2,h3{text-wrap:balance;}
.gutter{padding-inline:var(--gutter);}
.wrap{max-width:992px;margin:0 auto;}
.center{text-align:center;}
[id]{scroll-margin-top:72px;}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border:none;border-radius:12px;background:none;font-family:var(--font-body);font-weight:700;font-size:15px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.btn-solid,.btn-accent{background:var(--ambre);color:var(--sur-ambre);}
.btn-solid:hover,.btn-accent:hover{background:var(--ambre-clair);}
.btn-outline,.btn-ghost-dark{border:1.5px solid var(--trait);color:var(--texte);}
.btn-outline:hover,.btn-ghost-dark:hover{background:var(--carte-2);border-color:var(--gris);}
a:focus-visible,button:focus-visible{outline:2px solid var(--ambre);outline-offset:3px;}

.top{position:sticky;top:0;z-index:20;background:rgba(18,20,22,0.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--trait);}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-titre);font-weight:700;font-size:22px;letter-spacing:.01em;white-space:nowrap;}
.brand svg{color:var(--ambre);flex:none;}
.nav{display:flex;align-items:center;gap:28px;}
.nav-link{font-weight:600;font-size:14px;color:var(--gris);transition:color .15s ease;}
.nav-link:hover{color:var(--texte);}
.top .btn{min-height:44px;padding:0 18px;font-size:14px;border-radius:10px;white-space:nowrap;}

/* En-tête d'un guide */
.hero{position:relative;border-bottom:1px solid var(--trait);background:var(--fond-2);}
.hero-row{position:relative;padding-block:64px 68px;}
.fil{font-size:12.5px;font-weight:600;color:var(--gris);margin:0 0 26px;}
.fil a{text-decoration:underline;text-underline-offset:3px;}
.fil a:hover{color:var(--texte);}
.hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ambre);margin:0 0 18px;}
.hero h1{font-family:var(--font-titre);font-weight:700;font-size:58px;line-height:1.03;letter-spacing:.005em;margin:0 0 20px;max-width:17ch;}
.hero h1 em{font-style:normal;color:var(--ambre);}
.hero-lead{font-size:17px;line-height:1.65;color:var(--gris);max-width:60ch;margin:0;}

/* Corps d'un guide */
.guide{max-width:760px;padding-block:60px 24px;}
.guide h2{font-family:var(--font-titre);font-weight:700;font-size:36px;line-height:1.08;margin:56px 0 14px;}
.guide h2:first-child{margin-top:0;}
.guide h3{font-size:17px;font-weight:700;margin:28px 0 8px;}
.guide p{font-size:16px;line-height:1.7;margin:0 0 16px;}
.guide ul,.guide ol{font-size:16px;line-height:1.7;margin:0 0 18px;padding-left:22px;}
.guide li{margin-bottom:6px;}
.guide li::marker{color:var(--ambre);font-weight:700;}
.guide strong{font-weight:700;}
.guide a.lien{color:var(--ambre);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.guide a.lien:hover{color:var(--ambre-clair);}
.formule{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--carte);border:1px solid var(--trait);border-left:4px solid var(--ambre);border-radius:12px;padding:16px 18px;margin:0 0 18px;overflow-x:auto;}
.formule span{display:block;}
.formule span + span{margin-top:6px;}
.note{background:rgba(242,169,59,0.10);border:1px solid rgba(242,169,59,0.38);border-radius:12px;padding:16px 18px;font-size:15px;line-height:1.6;margin:0 0 18px;}
.table-wrap{overflow-x:auto;margin:0 0 18px;background:var(--carte);border:1px solid var(--trait);border-radius:14px;}
table.tab{width:100%;border-collapse:collapse;font-size:14.5px;}
table.tab th{font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--gris);text-align:left;padding:12px 14px;border-bottom:1px solid var(--trait);white-space:nowrap;}
table.tab td{padding:11px 14px;border-bottom:1px solid var(--trait);}
table.tab tr:last-child td{border-bottom:none;}
table.tab .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
table.tab tfoot td{font-weight:700;background:var(--carte-2);}
table.tab .fort{color:var(--ambre);}

/* Calculateur */
.calc{background:var(--carte);border:1px solid var(--ambre);border-radius:18px;padding:28px;margin:22px 0 26px;box-shadow:0 30px 60px rgba(0,0,0,0.35);}
.calc h3{font-family:var(--font-titre);font-weight:700;font-size:30px;line-height:1.1;margin:0 0 6px;}
.calc-lead{font-size:14.5px;color:var(--gris);margin:0 0 20px;}
.calc label{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin:0 0 5px;}
/* 16 px : en dessous, l'iPhone agrandit l'écran quand on touche un champ. */
.calc input{width:100%;font-family:var(--font-body);font-size:16px;padding:10px 12px;border:1px solid var(--trait);border-radius:10px;background:var(--fond);color:var(--texte);}
.calc input::placeholder{color:#6f797e;}
.calc input:focus{outline:none;border-color:var(--ambre);box-shadow:0 0 0 2px rgba(242,169,59,0.25);}
.calc input.num{text-align:right;font-variant-numeric:tabular-nums;}
.calc-lignes{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;}
.calc-ligne{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;align-items:center;}
.calc-tete{font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--gris);margin-bottom:8px;}
.calc-tete span:nth-child(n+2){text-align:right;}
.calc-total{font-size:14.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc-suppr{width:40px;height:40px;border:none;border-radius:10px;background:transparent;color:var(--gris);font-size:16px;cursor:pointer;}
.calc-suppr:hover{background:var(--carte-2);color:var(--texte);}
.calc-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 0;}
.calc-cinq{grid-template-columns:repeat(5,minmax(0,1fr));}
.calc-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--trait);}
.calc-res div{background:var(--carte-2);border-radius:14px;padding:14px 16px;}
.calc-res span{display:block;font-size:12.5px;color:var(--gris);margin-bottom:2px;}
.calc-res strong{display:block;font-family:var(--font-titre);font-weight:700;font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums;}
.calc-res .cle{background:var(--ambre);}
.calc-res .cle span{color:rgba(26,18,5,0.78);font-weight:600;}
.calc-res .cle strong{color:var(--sur-ambre);}
.calc-avis{font-size:14px;line-height:1.55;color:var(--gris);margin:14px 0 0;min-height:22px;}

/* Fiche d'exemple */
.fiche{background:var(--carte);border:1px solid var(--trait);border-radius:20px;padding:26px;margin:22px 0 26px;box-shadow:0 30px 60px rgba(0,0,0,0.35);}
.fiche-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.mono-label{font-size:12px;font-weight:600;color:var(--gris);}
.pill{font-size:12px;font-weight:700;background:var(--vert-fond);color:var(--vert);padding:4px 10px;border-radius:10px;}
.fiche h3{font-family:var(--font-titre);font-weight:700;font-size:28px;line-height:1.1;margin:0 0 4px;}
.fiche-meta{font-size:13.5px;color:var(--gris);margin:0 0 16px;}
.fiche .table-wrap{background:var(--fond-2);margin-bottom:0;}
.fiche-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px;}
.fiche-chiffres div{background:var(--carte-2);border-radius:14px;padding:12px 14px;}
.fiche-chiffres span{display:block;font-size:12px;color:var(--gris);margin-bottom:2px;}
.fiche-chiffres strong{display:block;font-family:var(--font-titre);font-weight:700;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums;}
.fiche-chiffres .good{color:var(--vert);}

/* Appel et autres guides */
.appel{background:var(--fond-2);border:1px solid var(--trait);border-radius:18px;padding:36px;margin:48px 0 0;}
.appel h2{font-family:var(--font-titre);font-weight:700;font-size:34px;line-height:1.08;margin:0 0 12px;}
.appel p{font-size:15.5px;line-height:1.65;color:var(--gris);margin:0 0 22px;max-width:58ch;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.autres{padding-block:56px 80px;}
.autres h2{font-family:var(--font-titre);font-weight:700;font-size:32px;line-height:1.08;margin:0 0 20px;}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.carte{display:block;background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:22px 20px;transition:border-color .2s ease,transform .2s ease;}
.carte:hover{border-color:var(--ambre);transform:translateY(-3px);}
.carte .mono-label{display:block;margin-bottom:10px;font-weight:700;color:var(--ambre);text-transform:uppercase;letter-spacing:0.1em;}
.carte h3{font-size:16.5px;font-weight:700;margin:0 0 6px;}
.carte p{font-size:14px;line-height:1.55;color:var(--gris);margin:0;}
.carte.ici{border-color:var(--ambre);box-shadow:0 0 0 1px var(--ambre);}

.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-block:32px;font-size:13px;color:var(--gris);border-top:1px solid var(--trait);}
.foot .copy{font-size:12px;}
.foot nav{display:flex;flex-wrap:wrap;gap:20px;}
.foot a:hover{color:var(--ambre);}

@media (max-width:860px){
  .cartes{grid-template-columns:minmax(0,1fr);}
  .calc-grille,.calc-cinq{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fiche-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  :root{--gutter:20px;}
  .nav-hide{display:none;}
  .brand{font-size:20px;}
  .hero-row{padding-block:44px 48px;}
  .hero h1{font-size:42px;}
  .guide{padding-block:44px 16px;}
  .guide h2{font-size:30px;margin-top:44px;}
  .calc{padding:20px;}
  .calc-res{grid-template-columns:minmax(0,1fr);}
  .calc-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;}
  .calc-ligne .calc-nom{grid-column:1 / -1;}
  .calc-ligne .calc-total{display:none;}
  .calc-tete{display:none;}
  .calc-lignes{gap:14px;}
  .calc-suppr{width:44px;height:44px;}
  .fiche{padding:18px;}
  .appel{padding:26px;}
}
@media (max-width:560px){
  table.tab{font-size:14px;}
  table.tab th,table.tab th.num{white-space:normal;vertical-align:bottom;padding:10px 8px;font-size:10.5px;letter-spacing:0.04em;}
  table.tab td{padding:10px 8px;}
  /* Tableau d'un plat (ingrédient, quantité, prix, coût) : deux lignes par ingrédient, le nom et son coût puis
     « quantité × prix », pour que la colonne des coûts reste visible sans faire défiler le tableau. */
  table.plat thead{display:none;}
  table.plat tbody tr,table.plat tfoot tr{display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;column-gap:6px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--trait);}
  table.plat tbody tr:last-child,table.plat tfoot tr:last-child{border-bottom:0;}
  table.plat tfoot tr{background:var(--carte-2);}
  table.plat tfoot tr:first-child{border-top:1px solid var(--trait);}
  table.plat td,table.plat tfoot td{padding:0;border:0;background:none;}
  table.plat tbody td:nth-child(1){grid-column:1 / 4;font-weight:600;}
  table.plat tbody td:nth-child(4){grid-column:4;grid-row:1;}
  table.plat tbody td:nth-child(2),table.plat tbody td:nth-child(3){grid-row:2;text-align:left;font-size:13px;color:var(--gris);}
  table.plat tbody td:nth-child(3)::before{content:"× ";}
  table.plat tfoot td:first-child{grid-column:1 / 4;}
}
@media (max-width:400px){
  .brand svg{display:none;}
  .brand{font-size:18px;}
  .top .btn{padding:0 14px;font-size:13.5px;}
  .hero h1{font-size:36px;}
}
@media (max-width:340px){
  .brand{white-space:normal;line-height:1.1;font-size:16px;}
  .top .btn{padding:0 12px;font-size:13px;}
}
@media (prefers-reduced-motion: reduce){
  .btn,.nav-link,.carte{transition:none;}
  .carte:hover{transform:none;}
}
/* Impression : page blanche, texte noir, sans la navigation ni les appels. */
@media print{
  :root{--fond:#fff;--fond-2:#fff;--carte:#fff;--carte-2:#f1f1f1;--trait:#bdbdbd;--texte:#000;--gris:#444;--ambre:#8a5a00;--ambre-clair:#8a5a00;--sur-ambre:#000;--vert:#0a6b3a;--vert-fond:#e3f3ea;}
  .top,.appel,.autres,.foot,.calc-suppr,#cc-ajouter{display:none;}
  .hero{border-bottom:1px solid #bdbdbd;}
  .calc,.fiche{box-shadow:none;border-color:#bdbdbd;}
  .calc-res .cle{background:#fff;border:1px solid #000;}
  .calc-res .cle span{color:#444;}
}

/* ===================== DESIGN « FAÇON APPLE » des trois pages de guides (essai du 9 octobre 2026, sur une copie) =====================
   Une couche posée après « Le passe », pour l'écran seulement : l'impression des guides ne change pas. Page blanche,
   panneaux gris sans bord, un seul bleu, l'écriture de l'appareil. Les textes et les calculateurs sont ceux d'aujourd'hui. */
@media screen{
:root{
  --fond:#ffffff; --fond-2:#f5f5f7; --carte:#f5f5f7; --carte-2:#e8e8ed; --trait:#d2d2d7; --texte:#1d1d1f; --gris:#6e6e73;
  --ambre:#0071e3; --ambre-clair:#0077ed; --sur-ambre:#ffffff; --vert:#1a7431; --vert-fond:#e3f5e8; --bleu-texte:#0066cc;
  --font-titre:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{-webkit-font-smoothing:antialiased;}
.btn{border-radius:980px;font-weight:400;font-size:17px;min-height:44px;padding:0 22px;}
.btn-outline,.btn-ghost-dark{border:1px solid var(--ambre);color:var(--bleu-texte);}
.btn-outline:hover,.btn-ghost-dark:hover{background:rgba(0,113,227,.08);border-color:var(--ambre);}
a:focus-visible,button:focus-visible{outline:3px solid rgba(0,113,227,.55);outline-offset:2px;}

.top{background:rgba(22,22,23,.92);border-bottom:0;color:#f5f5f7;}
.topbar{padding-block:6px;min-height:48px;}
.brand{font-size:17px;font-weight:600;letter-spacing:-0.01em;}
.brand svg{display:none;}
.nav-link{font-weight:400;font-size:13px;color:rgba(255,255,255,.82);}
.nav-link:hover{color:#fff;}
.top .btn{min-height:36px;padding:0 16px;font-size:14px;border-radius:980px;}

.hero{background:#f5f5f7;border-bottom:0;}
.hero-row{padding-block:56px 60px;}
.fil{font-size:13px;font-weight:400;}
.fil a{color:var(--bleu-texte);text-decoration:none;}
.fil a:hover{color:var(--bleu-texte);text-decoration:underline;}
.hero-eyebrow{font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;color:#6e6e73;margin:0 0 10px;}
.hero h1{font-size:56px;line-height:1.07;font-weight:600;letter-spacing:-0.005em;max-width:18ch;}
.hero h1 em{color:#86868b;}
.hero-lead{font-size:21px;line-height:1.38;}

.guide h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-0.01em;}
.guide h3{font-size:21px;font-weight:600;letter-spacing:-0.01em;}
.guide p, .guide ul, .guide ol{font-size:17px;line-height:1.58;}
.guide li::marker{color:#6e6e73;font-weight:400;}
.guide strong{font-weight:600;}
.guide a.lien{color:var(--bleu-texte);font-weight:400;text-decoration:none;}
.guide a.lien:hover{color:var(--bleu-texte);text-decoration:underline;}
.formule{font-size:16px;font-weight:600;border:0;border-radius:18px;padding:18px 22px;}
.note{background:#f5f5f7;border:0;border-radius:18px;padding:18px 22px;font-size:16px;}
.table-wrap{border:0;border-radius:18px;}
table.tab{font-size:15px;}
table.tab th{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;}
table.tab tfoot td{font-weight:600;}
table.tab .fort{color:var(--bleu-texte);}

.calc{background:#fff;border:2px solid var(--ambre);border-radius:18px;box-shadow:none;}
.calc h3{font-size:28px;font-weight:600;letter-spacing:-0.012em;}
.calc-lead{font-size:16px;}
.calc label{font-size:13px;font-weight:400;}
.calc input{border-color:#86868b;border-radius:12px;background:#fff;}
.calc input::placeholder{color:#86868b;}
.calc input:focus{border-color:var(--ambre);box-shadow:0 0 0 3px rgba(0,113,227,.3);}
.calc-tete{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;}
.calc-suppr{border-radius:50%;}
.calc-res div{background:#f5f5f7;border-radius:18px;}
.calc-res span{font-size:13px;}
.calc-res strong{font-weight:600;letter-spacing:-0.015em;}
.calc-res .cle{background:var(--ambre);}
.calc-res .cle span{color:rgba(255,255,255,.9);font-weight:400;}

.fiche{border:0;border-radius:18px;box-shadow:none;}
.fiche h3{font-size:26px;font-weight:600;letter-spacing:-0.012em;}
.mono-label{font-weight:400;}
.pill{border-radius:980px;}
.fiche .table-wrap{background:#fff;}
.fiche-chiffres div{background:#fff;border-radius:14px;}
.fiche-chiffres strong{font-weight:600;letter-spacing:-0.015em;}

.appel{border:0;border-radius:18px;}
.appel h2, .autres h2{font-size:32px;font-weight:600;letter-spacing:-0.01em;}
.appel p{font-size:17px;}
.carte{border:1px solid transparent;border-radius:18px;}
.carte:hover{border-color:transparent;background:#e8e8ed;transform:none;}
.carte .mono-label{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--bleu-texte);}
.carte h3{font-size:19px;font-weight:600;letter-spacing:-0.01em;}
.carte p{font-size:15px;}
.carte.ici, .carte.ici:hover{border:2px solid var(--ambre);box-shadow:none;background:#fff;padding:21px 19px;}
.foot{font-size:12px;}
.foot a:hover{color:#1d1d1f;text-decoration:underline;}

@media (max-width:760px){
  .top .btn{min-height:40px;}
  .hero-row{padding-block:40px 44px;}
  .hero h1{font-size:38px;}
  .hero-lead{font-size:19px;}
  .guide h2{font-size:28px;}
}
@media (max-width:400px){
  .brand{font-size:16px;}
  .hero h1{font-size:33px;}
}
}