/*
Theme Name: Mes Pizzas
Description: Thème maison de mes-pizzas.fr, direction artistique « Sac de farine ». Sans dépendance, polices auto-hébergées (OFL), icônes IconMind (MIT).
Version: 0.1.0
Author: Stéphane
Text Domain: mes-pizzas
Requires PHP: 8.1
*/

/* ===== polices (OFL), sous-ensemble latin ===== */
@font-face{font-family:"Rokkitt";src:url(assets/fonts/rokkitt-var.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(assets/fonts/albert-sans-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url(assets/fonts/albert-sans-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(assets/fonts/courier-prime-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ===== jetons ===== */
:root{
  --kraft:#D6BE93;--paper:#F5F3EF;--white:#FFFFFF;--ink:#1F1B17;--soft:#5E554B;--red:#B3261E;--rule:#CFC8BC;
  --title:"Rokkitt",Georgia,serif;--text:"Albert Sans",system-ui,sans-serif;--mono:"Courier Prime","Courier New",monospace;
  --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--text)}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.15em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:9;background:var(--ink);color:var(--paper);padding:10px 14px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ===== matières ===== */
.kraft{background-color:var(--kraft);background-image:repeating-linear-gradient(0deg,rgba(31,27,23,.028) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px)}
.seam{height:12px;background:
  linear-gradient(135deg,transparent 35%,var(--ink) 35% 44%,transparent 44%) 0 0/12px 12px repeat-x,
  linear-gradient(45deg,transparent 56%,var(--ink) 56% 65%,transparent 65%) 0 0/12px 12px repeat-x;opacity:.45}

/* ===== logo ===== */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo .mk{width:44px;height:44px;border:3px solid var(--red);border-radius:50%;display:grid;place-items:center;color:var(--red);font-size:24px;transform:rotate(-8deg)}
.logo b{font:900 28px/1 var(--title);text-transform:uppercase;letter-spacing:.03em}

/* ===== en-tête ===== */
.s-head{border-bottom:3px double var(--ink)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px}
.s-nav .nav-list{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font:700 17px/1 var(--title);text-transform:uppercase;letter-spacing:.05em}
.s-nav a{text-decoration:none}
.s-nav a:hover{color:var(--red)}
.s-nav .current-menu-item>a,.s-nav .current-menu-parent>a,.s-nav .current-post-parent>a{color:var(--red);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.tools{display:flex;align-items:center;gap:6px}
.tool{display:grid;place-items:center;width:40px;height:40px;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer;text-decoration:none}
.nav-toggle{display:none}
.nav-toggle .i-close{display:none}

/* ===== pied de page ===== */
.s-foot{padding:24px 0 28px}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 40px;margin-top:18px}
.s-foot h2{font:800 18px/1.1 var(--title);text-transform:uppercase;margin:0 0 10px}
.s-foot ul{list-style:none;margin:0;padding:0;font-size:15px}
.s-foot li{margin:0 0 6px}
.foot-legal{margin:22px 0 0;font:400 13px/1.5 var(--mono);max-width:80ch}

/* ===== recherche ===== */
.search-form{display:flex;max-width:360px;border:2px solid var(--ink);background:var(--white)}
.search-form input{flex:1;min-width:0;border:0;padding:10px 12px;font:16px var(--text);background:transparent;color:var(--ink)}
.search-form button{border:0;background:var(--ink);color:var(--paper);width:46px;font-size:20px;cursor:pointer;display:grid;place-items:center}

/* ===== boutons et liens ===== */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font:800 17px/1 var(--title);text-transform:uppercase;letter-spacing:.06em;padding:13px 18px;text-decoration:none}
.tlink{color:var(--red);font-weight:600;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ===== tampons ===== */
.stamp{flex:none;display:grid;place-items:center;text-align:center;width:96px;height:96px;padding:10px;border:3px solid var(--red);border-radius:50%;color:var(--red);font:900 15px/1 var(--title);text-transform:uppercase;transform:rotate(11deg);mix-blend-mode:multiply}
.stamp small{display:block;font:700 9px/1.15 var(--mono);margin-top:4px}
.stamp.st-analyse{color:var(--ink);border-color:var(--ink);transform:rotate(-7deg)}
.stamp.st-synthese{color:var(--ink);border-color:var(--ink);border-style:double;border-width:5px;transform:rotate(6deg);font-size:13px;letter-spacing:-.01em}
.st-in{display:inline-block;border:2px solid var(--red);color:var(--red);font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;transform:rotate(-2deg);white-space:nowrap}
.st-in.st-analyse,.st-in.st-synthese{border-color:var(--ink);color:var(--ink)}
.st-in.st-synthese{border-style:double;border-width:4px}

/* ===== étiquette protocole ===== */
.sack{padding:22px;margin:26px 0}
.label{background:rgba(255,255,255,.18);border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:18px 18px 14px}
.label .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.label .lt{margin:0;font:900 26px/1.02 var(--title);text-transform:uppercase}
.label .sub{margin:6px 0 0;font:400 13px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.label table{width:100%;border-collapse:collapse;margin-top:12px;font:400 15px/1.25 var(--mono)}
.label td{padding:7px 0;border-top:1px dashed rgba(31,27,23,.55);vertical-align:top}
.label td:last-child{text-align:right;font-weight:700;padding-left:12px}
.label .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:10px;font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.label .foot a{color:var(--red);text-underline-offset:3px}

/* ===== déroulé ===== */
.deroule{margin:26px 0}
.bt{font:800 22px/1.15 var(--title);margin:0 0 12px;display:flex;align-items:center;gap:9px}
.bt .ico{color:var(--red)}
.bt-big{font:800 22px/1.1 var(--title);text-transform:uppercase;margin:0 0 6px}
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--ink)}
.timeline li{position:relative;padding:0 0 16px 18px;font-size:16px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--red)}
.timeline .when{display:block;font:700 13px/1.3 var(--mono);color:var(--red)}

/* ===== barème des fours ===== */
.bareme{width:100%;border-collapse:collapse;background:var(--white);border:2px solid var(--ink)}
.bareme caption{caption-side:top;text-align:left;font:800 22px/1.1 var(--title);text-transform:uppercase;padding:0 0 10px}
.bareme thead th{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:10px 12px;border-bottom:2px solid var(--ink);background:var(--paper)}
.bareme tbody th,.bareme td{padding:14px 12px;border-bottom:1px dashed rgba(31,27,23,.45);vertical-align:top;text-align:left;font-size:15px}
.bareme tbody tr:last-child>*{border-bottom:0}
.bareme tbody th{font:800 19px/1.15 var(--title)}
.bareme tbody th .ico{font-size:20px;margin-right:6px;color:var(--red)}
.bareme tbody th a{text-decoration:none}.bareme tbody th a:hover{text-decoration:underline}
.bareme tbody th small{display:block;font:400 13px/1.35 var(--text);color:var(--soft);margin-top:3px}
.bareme .num{font:700 15px/1.2 var(--mono);white-space:nowrap}
.bareme td a{color:var(--red);font-weight:600;text-underline-offset:3px}

/* ===== registre ===== */
.ledger{width:100%;border-collapse:collapse}
.ledger caption{caption-side:top;text-align:left;font:800 22px/1.1 var(--title);text-transform:uppercase;padding:0 0 12px}
.ledger td{padding:12px 12px 12px 0;border-top:1px dashed rgba(31,27,23,.45);vertical-align:baseline;font-size:15px}
.ledger tr:last-child td{border-bottom:1px dashed rgba(31,27,23,.45)}
.ledger .d{font:400 13px/1.3 var(--mono);color:var(--soft);white-space:nowrap;width:1%}
.ledger .t a{font:700 18px/1.25 var(--text);text-decoration:none}
.ledger .t a:hover{text-decoration:underline}
.ledger .t .x{display:block;color:var(--soft);font-size:14px;margin-top:3px}
.ledger .r{font:400 13px/1.3 var(--mono);color:var(--soft);white-space:nowrap;width:1%}
.ledger .s{text-align:right;width:1%;white-space:nowrap;padding-right:0}

/* ===== accueil ===== */
.home-open{padding-top:clamp(28px,5vw,52px);padding-bottom:28px}
.h1-home{font:900 clamp(36px,4.8vw,58px)/.98 var(--title);text-transform:uppercase;margin:0;max-width:21ch;letter-spacing:.005em}
.lead{font-size:19px;line-height:1.55;color:var(--soft);max-width:56ch;margin:16px 0 0}
.home-ovens{padding-bottom:36px}
.home-start{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);padding-top:30px;padding-bottom:20px;align-items:start}
.home-start .sack{margin:0}
.home-start .deroule{margin-top:0}
.home-photo{margin:18px 0 0}
.home-photo img{display:block;width:100%;height:auto}
.home-ledger{padding-top:10px;padding-bottom:34px}
.home-sym{padding-bottom:40px}
.symptoms{columns:2;column-gap:32px;margin:0;padding:0;list-style:none}
.symptoms li{break-inside:avoid;padding:8px 0;border-top:1px solid var(--rule)}
.symptoms a{font-weight:600;text-decoration:none}
.symptoms a:hover{text-decoration:underline}
.symptoms span{display:block;font-size:14px;color:var(--soft)}

/* ===== article ===== */
.art{display:grid;grid-template-columns:minmax(0,680px) minmax(220px,1fr);gap:48px;padding-top:28px;padding-bottom:40px}
.art.no-toc{grid-template-columns:minmax(0,760px)}
.crumb{font:400 13px/1.4 var(--mono);color:var(--soft);margin-bottom:12px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.h1{font:800 clamp(32px,4.4vw,50px)/1.05 var(--title);margin:0 0 18px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:-4px 0 18px;font:400 13px/1.3 var(--mono);color:var(--soft)}
.prose{font-size:18px;line-height:1.65}
.prose>*:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:0 0 8px}
.prose h2{font:800 28px/1.15 var(--title);margin:38px 0 10px}
.prose h3{font:800 22px/1.2 var(--title);margin:28px 0 8px}
.prose a{color:var(--red);text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose strong{font-weight:700}
.prose blockquote{margin:20px 0;padding:0 0 0 18px;border-left:3px solid var(--ink);color:var(--soft)}
.prose figure{margin:24px 0}
.prose figcaption{font:400 13px/1.4 var(--mono);color:var(--soft);margin-top:6px}
.lede{font-size:20px;line-height:1.55}
.disclose{font:400 13px/1.45 var(--mono);color:var(--soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 0}
.hero-img{margin:0 0 24px}
.tw{overflow-x:auto;margin:0 0 18px}
.tw table,.prose table:not([class]){width:100%;border-collapse:collapse;font-size:16px}
.tw th,.tw td{padding:8px 10px 8px 0;border-bottom:1px dashed rgba(31,27,23,.45);text-align:left;vertical-align:top}
.tw th{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--ink)}

/* diagnostic */
.diag{width:100%;border-collapse:collapse;background:var(--white);border:2px solid var(--ink);font-size:15px;line-height:1.45;margin:26px 0}
.diag caption{caption-side:top;text-align:left;padding:0 0 10px;font:800 22px/1.15 var(--title)}
.diag th{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:9px 12px;border-bottom:2px solid var(--ink)}
.diag td{padding:10px 12px;border-bottom:1px dashed rgba(31,27,23,.4);vertical-align:top}
.diag td:first-child{font:700 13px/1.4 var(--mono);color:var(--soft);width:1%}

/* débat */
.debate{border-top:3px double var(--ink);border-bottom:3px double var(--ink);padding:16px 0;margin:28px 0}
.debate .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.debate .cols>div{padding:0 18px;font-size:16px}
.debate .cols>div:first-child{padding-left:0;border-right:1px solid var(--ink)}
.debate .side{font:700 14px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.debate .side .ico{font-size:18px;color:var(--red)}
.debate .cols p{margin:0 0 8px}
.debate .verdict{margin:12px 0 0;font-size:16px;color:var(--soft)}

/* votre four */
.oven{background:var(--white);border-left:6px solid var(--ink);padding:16px 18px;margin:26px 0}
.oven .bt{font-size:20px}
.oven dl{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:6px 16px;margin:0;font-size:16px}
.oven dt{font:700 13px/1.6 var(--mono)}
.oven dd{margin:0}

/* sécurité */
.safety{border:3px double var(--red);padding:14px 16px;background:var(--white);margin:26px 0}
.safety .bt{color:var(--red);font-size:19px;margin-bottom:6px}
.safety p{margin:0 0 6px;font-size:16px}

/* matériel */
.gear{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;margin:22px 0}
.gear .gn{margin:0 0 4px;font:800 19px/1.15 var(--title)}
.gear p{margin:0;font-size:15px;color:var(--soft)}
.prose .gear>a{font:700 14px/1 var(--mono);color:var(--red);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

/* sommaire */
.toc{position:sticky;top:16px;align-self:start;font-size:15px}
.toc .lab{font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
.toc ol{margin:0;padding:0 0 0 18px}
.toc li{margin:0 0 7px}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
.calc-box{margin-top:22px;padding:14px;border:2px solid var(--ink);background:var(--white)}
.calc-box .cb{font:800 18px/1.15 var(--title);margin:0 0 6px}
.calc-box p{margin:0 0 10px;font-size:14px;color:var(--soft)}
.related{padding-bottom:40px}

/* listes */
.list-head{padding-top:clamp(28px,5vw,48px);padding-bottom:20px}
.list-body{padding-bottom:48px}
.nav-links{display:flex;gap:8px;margin-top:20px;font:700 15px/1 var(--mono)}
.nav-links .page-numbers{padding:8px 11px;border:1px solid var(--ink);text-decoration:none}
.nav-links .current{background:var(--ink);color:var(--paper)}

/* ===== calculateur de pâte ===== */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;margin:26px 0 34px;align-items:start}
.calc fieldset{border:0;border-top:3px double var(--ink);margin:0 0 18px;padding:12px 0 0}
.calc legend{font:800 20px/1.1 var(--title);padding:0 8px 0 0}
.calc .f{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:4px 12px;align-items:center;margin:0 0 12px;font-size:16px}
.calc .f>label,.calc .f .lab{font-weight:600}
.calc .in{display:flex;align-items:center;border:2px solid var(--ink);background:var(--white)}
.calc .in input,.calc .in select{width:100%;min-width:0;border:0;background:transparent;padding:8px 10px;font:700 16px/1.2 var(--mono);color:var(--ink)}
.calc .in .u{padding:0 10px 0 4px;font:400 14px/1 var(--mono);color:var(--soft);white-space:nowrap}
.calc .f .h{grid-column:1/-1;font-size:13px;color:var(--soft)}
.calc .radios{display:flex;flex-wrap:wrap;gap:8px 18px}
.calc .radios label{font-weight:400;display:inline-flex;align-items:center;gap:6px}
.calc .radios .lab{flex-basis:100%}
.calc-out{position:sticky;top:16px;background:var(--white);border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;padding:16px 18px}
.calc-res{width:100%;border-collapse:collapse;font:400 17px/1.25 var(--mono)}
.calc-res caption{caption-side:top;text-align:left;font:900 22px/1 var(--title);text-transform:uppercase;padding:0 0 10px}
.calc-res th{text-align:left;font-weight:400;padding:8px 0;border-top:1px dashed rgba(31,27,23,.5)}
.calc-res td{text-align:right;font-weight:700;padding:8px 0 8px 12px;border-top:1px dashed rgba(31,27,23,.5);white-space:nowrap}
.calc-res .tot th,.calc-res .tot td{border-top:2px solid var(--ink)}
.calc-dose,.calc-dil{font-size:14px;color:var(--soft);margin:12px 0 0}
.calc-dil:empty{display:none}
.calc-warn{font-size:14px;color:var(--red);border-left:3px solid var(--red);padding-left:10px;margin:12px 0 0}

/* ===== formulaire de contact ===== */
.contact{margin:24px 0}
.contact form{max-width:560px}
.contact label{display:block;font:700 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.contact label span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--soft)}
.contact input[type=text],.contact input[type=email],.contact textarea{width:100%;border:2px solid var(--ink);background:var(--white);padding:10px 12px;font:16px/1.4 var(--text);color:var(--ink)}
.contact p{margin:0 0 16px}
.contact .hp{position:absolute;left:-9999px}
.contact .legal{font:400 13px/1.45 var(--mono);color:var(--soft)}
.contact .note{padding:10px 14px;border:2px solid var(--ink);background:var(--white);font-size:16px}
.contact .note.err{border-color:var(--red);color:var(--red)}
.btn .ico{font-size:20px}

/* ===== tablette et téléphone ===== */
@media (max-width:960px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc-out{position:static}
  .art,.art.no-toc{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{position:static;order:-1;display:none}
  .home-start{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:grid}
  .s-nav{display:none;flex-basis:100%;order:3}
  .head-in{flex-wrap:wrap}
  .s-head.open .s-nav{display:block}
  .s-head.open .i-open{display:none}.s-head.open .i-close{display:inline-block}
  .s-nav .nav-list{flex-direction:column;gap:0;padding:6px 0 4px}
  .s-nav .nav-list a{display:block;padding:12px 0;border-top:1px dashed rgba(31,27,23,.45)}
}
@media (max-width:640px){
  .logo .mk{width:36px;height:36px;font-size:19px}
  .logo b{font-size:23px}
  .bareme thead{display:none}
  .bareme tbody tr{display:block;border-bottom:1px dashed rgba(31,27,23,.45);padding:10px 12px}
  .bareme tbody tr:last-child{border-bottom:0}
  .bareme tbody th,.bareme td{display:block;border:0;padding:3px 0}
  .bareme td[data-l]::before{content:attr(data-l) " : ";font:700 12px/1 var(--mono);text-transform:uppercase;color:var(--soft)}
  .ledger .r{display:none}
  .ledger tr{display:grid;grid-template-columns:auto 1fr;border-top:1px dashed rgba(31,27,23,.45);padding:10px 0}
  .ledger td{border:0!important;padding:0 10px 0 0}
  .ledger .t{grid-column:1/-1;order:-1;padding-bottom:6px}
  .ledger .s{text-align:left}
  .symptoms{columns:1}
  .sack{padding:14px}
  .label .lt{font-size:22px}
  .stamp{width:76px;height:76px;font-size:12px;padding:6px}
  .stamp.st-synthese{font-size:10px}
  .debate .cols{grid-template-columns:minmax(0,1fr)}
  .debate .cols>div{padding:0}.debate .cols>div:first-child{border-right:0;border-bottom:1px solid var(--ink);padding-bottom:12px;margin-bottom:12px}
  .oven dl{grid-template-columns:minmax(0,1fr)}
  .gear{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .prose{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}