/* Dépaperasse · feuille de style commune de la web v2 (IT, 16.10.2026)
   Source : web/plantilla/site.css → copiée par construir.mjs dans public/assets/site.css?v=<empreinte>.
   Chaque page est une feuille du carnet : souche perforée à gauche, folio en mono en haut à droite,
   le bleu calque seulement pour ce que le bureau « écrit » (et le foco). */

:root{
  --papier:#F4F0E6; --encre:#17140F; --gris:#5A544B; --calque:#2E3BD6; --copie:#F7EEC4; --trait:#D8CFBD; --ligne:#E8E1D1;
  --serif:'Fraunces',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --main:'Nothing You Could Do',cursive;
  --souche:132px; --gouttiere:64px; --haut-entete:84px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--haut-entete) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--encre);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;background:var(--papier) var(--grain)}
html.menu-ouvert,html.menu-ouvert body{overflow:hidden}
a{color:inherit}
p{margin:0}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0}
h1{font-size:clamp(42px,6vw,88px);letter-spacing:-.025em;line-height:.98;font-variation-settings:"opsz" 144;max-width:15ch}
h2{font-size:clamp(30px,3.8vw,50px);max-width:22ch}
h3{font-size:22px;line-height:1.2}
.main{font-family:var(--main);color:var(--calque);font-weight:400}
.mono{font-family:var(--mono)}
.etiquette{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin:0}
.gris{color:var(--gris)}
.petit{font-size:15px;color:var(--gris)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* accessibilité : foco au calque, lien d'évitement, cibles ≥ 44 px */
:focus-visible{outline:3px solid var(--calque);outline-offset:3px}
.saute{position:absolute;left:16px;top:-80px;z-index:90;background:var(--encre);color:var(--papier);font-weight:600;padding:12px 18px;border-radius:3px;text-decoration:none;min-height:44px}
.saute:focus{top:12px}
main:focus{outline:0}
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.lien:hover{color:var(--calque)}
.lien-fleche::after{content:"→";margin-left:8px;text-decoration:none;display:inline-block}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;background:var(--encre);color:var(--papier);text-decoration:none;font-weight:600;border-radius:3px;border:0;font:inherit;font-weight:600;cursor:pointer}
.bt span{font-family:var(--mono);font-weight:400;font-size:13px;opacity:.75}
.bt:hover{background:var(--calque);color:#fff}
.bt:focus-visible{outline-offset:4px}
.bt.clair{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.bt.clair:hover{background:var(--encre);color:var(--papier)}
.actions{display:flex;gap:18px 22px;align-items:center;margin-top:32px;flex-wrap:wrap}

/* ===== le carnet ===== */
.carnet{position:relative}
.carnet::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--souche) - 5px);width:10px;z-index:1;
  background:radial-gradient(circle at 5px 5px,var(--encre) 2.2px,transparent 2.6px) 0 0/10px 16px repeat-y;opacity:.5;pointer-events:none}
.feuillet{display:grid;grid-template-columns:var(--souche) minmax(0,1fr)}
.souche{display:flex;flex-direction:column;align-items:center;gap:28px;padding:32px 0}
.souche .num{text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gris);white-space:nowrap}
.souche .num b{color:var(--encre);font-weight:500}
.souche .main{writing-mode:vertical-rl;transform:rotate(180deg);font-size:26px;line-height:1;white-space:nowrap}
.souche .picto{width:40px;height:40px;color:var(--encre)}
.souche-colle{position:sticky;top:calc(var(--haut-entete) + 24px);display:flex;flex-direction:column;align-items:center;gap:22px}
.corps{padding:0 var(--gouttiere);max-width:1240px;width:100%;min-width:0}
.feuillet + .feuillet .corps{border-top:1.5px dashed var(--trait)}

/* ===== en-tête (collante) ===== */
.entete{position:sticky;top:0;z-index:40;padding-left:var(--souche);pointer-events:none;view-transition-name:entete}
.entete-in{pointer-events:auto;max-width:1240px;padding:0 var(--gouttiere);background:var(--papier) var(--grain)}
.entete-barre{display:flex;align-items:center;gap:20px;min-height:var(--haut-entete);border-bottom:1.5px solid var(--encre);padding:14px 0 10px}
/* une fois collée, l'en-tête ne change pas de taille (pas de relayout au défilement) : juste une ombre de papier */
.entete-in{transition:box-shadow .2s}
.entete.colle .entete-in{box-shadow:0 10px 18px -16px rgba(23,20,15,.45)}
.entete .logo{display:flex;align-items:center;min-height:44px;flex:none;margin-right:auto}
.entete .logo img{height:34px;width:auto;display:block}
@media (prefers-reduced-motion:reduce){.entete-in{transition:none}}

.nav-site{display:none}
.nav-site > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-site li{position:relative}
.nav-site .entree{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font:inherit;font-size:16px;font-weight:600;color:var(--encre);text-decoration:none;background:none;border:0;cursor:pointer;border-radius:3px}
.nav-site .entree:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px}
.nav-site .entree[aria-current="page"],.nav-site .entree.ici{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:8px}
.nav-site .entree svg{width:12px;height:12px;transition:transform .2s}
.nav-site .entree[aria-expanded="true"] svg{transform:rotate(180deg)}
.reserver{min-height:48px;padding:0 18px;font-size:16px;flex:none}
.reserver[aria-current="page"]{background:var(--calque)}
.entete .reserver span{font-family:inherit;font-size:inherit;font-weight:inherit;opacity:1}
.burger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;padding:0 10px;background:none;border:1.5px solid var(--encre);border-radius:3px;color:var(--encre);font:inherit;font-weight:600;font-size:15px;cursor:pointer;flex:none}
.burger:hover{background:var(--encre);color:var(--papier)}
.burger svg{width:20px;height:20px}

/* panneaux déroulants : une fiche blanche, bord perforé, ombre « décalquée » */
.panneau{position:absolute;top:calc(100% + 10px);left:-8px;z-index:50;background:#fff;border:1.5px solid var(--encre);box-shadow:8px 8px 0 var(--ligne);padding:18px 14px 12px;min-width:340px}
.panneau::before{content:"";position:absolute;left:0;right:0;top:-6px;height:10px;background:radial-gradient(circle at 8px 5px,var(--papier) 3px,transparent 3.4px) 0 0/16px 10px repeat-x}
.panneau ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.panneau.metiers{min-width:560px;left:-140px}
.panneau.metiers ul{grid-template-columns:1fr 1fr}
.panneau a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 10px;align-items:center;min-height:52px;padding:8px 10px;text-decoration:none;border-radius:3px}
.panneau a:hover{background:var(--papier)}
.panneau a[aria-current="page"]{background:var(--papier);box-shadow:inset 3px 0 0 var(--encre)}
.panneau .pos{font-family:var(--mono);font-size:12px;color:var(--gris);align-self:start;padding-top:4px}
.panneau .picto{width:24px;height:24px;color:var(--encre)}
.panneau b{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.2;display:block}
.panneau small{grid-column:2;display:block;font-size:14px;color:var(--gris);line-height:1.35}
.panneau .tous{display:flex;justify-content:flex-end;border-top:1px solid var(--ligne);margin-top:8px;padding-top:4px}
.panneau .tous a{display:inline-flex;min-height:44px;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:5px}

/* ===== ligne de folio : fil d'Ariane à gauche, numéro de feuille à droite ===== */
.folio-ligne{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0 0;min-height:44px}
.folio{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-left:auto;view-transition-name:folio}
.folio b{color:var(--encre);font-weight:500}
.ariane ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--gris)}
.ariane li{display:flex;align-items:center;min-height:44px}
.ariane li + li::before{content:"›";margin:0 8px}
.ariane a{display:inline-flex;align-items:center;min-height:44px;color:var(--encre)}

/* ===== tête de page : sobretítulo + H1 + entradilla + une pièce ===== */
.tete-page{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:40px 0 88px}
.tete-page.seule{grid-template-columns:minmax(0,1fr)}
.tete-page h1{margin-top:18px}
.chapeau{font-size:21px;line-height:1.5;color:var(--gris);max-width:44ch;margin-top:24px}
.sous-chapeau{font-size:15px;color:var(--gris);margin-top:18px;max-width:56ch}
.tete-page .picto-titre{width:56px;height:56px;color:var(--encre);margin-bottom:6px;display:block}

/* ===== sections ===== */
.section{padding:72px 0 80px;border-top:1.5px dashed var(--trait)}
.section > .etiquette + h2{margin-top:14px}
.section .intro{font-size:20px;color:var(--gris);max-width:54ch;margin-top:18px}
.texte{font-size:19px;line-height:1.6;max-width:62ch;margin-top:20px}
.texte p + p{margin-top:14px}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:40px}
.renvois{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:22px}

/* liste à tête en gras (« Vos papiers… ») : chaque ligne une position du carnet */
.positions{list-style:none;margin:36px 0 0;padding:0;border-top:1.5px solid var(--encre);counter-reset:p}
.positions > li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--trait);counter-increment:p}
.positions > li::before{content:"Pos. " counter(p);font-family:var(--mono);font-size:13px;color:var(--gris);padding-top:5px;white-space:nowrap}
.positions b,.positions strong{font-family:var(--serif);font-weight:800;font-size:21px;letter-spacing:-.01em;display:block;margin-bottom:2px}
.positions p,.positions span{color:var(--gris)}
.positions.coches > li::before{content:"✓";font-family:var(--main);color:var(--calque);font-size:26px;line-height:1;padding-top:2px}

/* ce qui pèse → ce que fait le carnet */
.douleurs{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:18px}
.douleur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1.5px solid var(--encre);background:#fff}
.douleur .avant{padding:24px 26px;border-right:1.5px dashed var(--trait)}
.douleur .avant .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gris);display:block;margin-bottom:8px}
.douleur .avant h3{font-size:22px}
.douleur .avant p{color:var(--gris);margin-top:8px}
.douleur .apres{padding:24px 26px;background:linear-gradient(var(--copie),var(--copie)) 0 0/100% 100%;position:relative}
.douleur .apres .etiquette{color:var(--encre);margin-bottom:8px;display:block}
.douleur .apres p + p{margin-top:8px}

/* devis d'exemple (papier blanc, positions en mono, tampon EXEMPLE) */
.devis-carte{position:relative;background:#fff;border:1.5px solid var(--encre);box-shadow:10px 10px 0 var(--ligne);padding:24px 26px 26px;margin-top:36px;overflow:hidden}
.devis-carte .tete{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);border-bottom:1px solid var(--ligne);padding-bottom:10px}
.devis-carte table{width:100%;border-collapse:collapse;font-size:16px}
.devis-carte th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);text-align:left;padding:14px 8px 8px 0;border-bottom:1.5px solid var(--encre)}
.devis-carte td{padding:12px 8px 12px 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.devis-carte td.pos{font-family:var(--mono);font-size:13px;color:var(--gris);width:48px}
.devis-carte td.nb,.devis-carte th.nb{font-family:var(--mono);font-size:14px;text-align:right;white-space:nowrap}
.devis-carte th.nb{font-size:12px}
.devis-carte tr.total td{border-bottom:0;border-top:1.5px solid var(--encre);font-weight:600;padding-top:14px}
.devis-carte tr.total td.nb{font-size:16px}
.devis-carte .sous{font-size:15px;color:var(--gris);margin-top:14px}
.devis-carte .tete{padding-right:132px}
/* le tampon se pose en haut à droite, sur l'en-tête du devis : il ne couvre jamais une position ni le total */
.tampon-exemple{position:absolute;right:30px;top:20px;border:3px solid var(--calque);color:var(--calque);font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.3em;padding:6px 10px 6px 14px;transform:rotate(-9deg);background:rgba(255,255,255,.85);pointer-events:none}
.devis-wrap{overflow-x:auto}

/* carte d'exemple (« Sur le chantier ») et bulle du bureau (il écrit : le calque) */
.exemple{background:#fff;border:1.5px solid var(--encre);padding:22px 24px;box-shadow:8px 8px 0 var(--ligne)}
.exemple .etiquette{display:block;margin-bottom:10px}
.exemple p + p{margin-top:10px}
.bulle-bureau{display:block;margin-top:14px;padding:12px 16px 10px;background:var(--papier);border:1px solid var(--trait);border-radius:12px 12px 12px 3px;font-size:17px}
.bulle-bureau .qui{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--calque);margin-bottom:4px}

/* petites étapes numérotées */
.etapes-n{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:28px;counter-reset:e}
.etapes-n > li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;counter-increment:e}
.etapes-n > li::before{content:counter(e,decimal-leading-zero);font-family:var(--mono);font-size:14px;color:var(--calque);padding-top:6px}
.etapes-n h3{margin-bottom:6px}
.etapes-n p{color:var(--gris)}
.etapes-n p + p{margin-top:8px}

/* fiches liées (feuillets, métiers) */
.fiches{list-style:none;margin:36px 0 0;padding:0;border-top:1.5px solid var(--encre)}
.fiches > li{border-bottom:1px solid var(--trait)}
.fiches a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 18px;align-items:center;min-height:72px;padding:14px 4px;text-decoration:none}
.fiches a:hover b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.fiches .picto{width:30px;height:30px;color:var(--encre)}
.fiches b{font-family:var(--serif);font-weight:800;font-size:22px;letter-spacing:-.01em;display:block;line-height:1.2}
.fiches small{display:block;font-size:16px;color:var(--gris);margin-top:2px}
.fiches .px{font-family:var(--mono);font-size:14px;white-space:nowrap;color:var(--encre)}
.fiches .px::after{content:"→";font-size:22px}

/* boîte de prix d'un feuillet */
.prix-boite{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:22px;padding:12px 16px;border:1.5px solid var(--encre);background:var(--copie);width:fit-content;max-width:100%}
.prix-boite .m{font-family:var(--mono);font-size:16px;font-weight:500}
.prix-boite .mp{font-family:var(--mono);font-size:14px;color:var(--gris)}

/* questions (même tracé que / et /prix) */
.questions{margin-top:32px;border-top:1.5px solid var(--encre)}
.questions details{border-bottom:1px solid var(--trait)}
.questions summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:72px minmax(0,1fr) 32px;gap:24px;align-items:baseline;padding:20px 0;min-height:48px}
.questions summary::-webkit-details-marker{display:none}
.questions summary .pos{font-family:var(--mono);font-size:13px;color:var(--gris)}
.questions summary .q{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.3}
.questions summary::after{content:"+";font-family:var(--mono);font-size:24px;color:var(--calque);text-align:right}
.questions details[open] summary::after{content:"–"}
.questions .r{color:var(--gris);padding:0 32px 24px 96px;max-width:calc(62ch + 96px)}
.questions .r p + p{margin-top:10px}
.questions .r a{color:var(--encre);font-weight:600}

/* texte long (pages légales, rendues depuis legal/*.md) */
.prose{max-width:72ch;font-size:18px;line-height:1.65}
.prose h2{font-size:clamp(26px,3vw,34px);margin:56px 0 14px;max-width:none}
.prose h3{font-size:21px;margin:32px 0 10px}
.prose p{margin:12px 0}
.prose ul,.prose ol{padding-left:22px;margin:12px 0}
.prose li{margin:6px 0}
.prose a{font-weight:600;text-underline-offset:4px}
.prose em{color:var(--gris)}
.prose hr{border:0;border-top:1.5px dashed var(--trait);margin:40px 0}
.prose .tableau{overflow-x:auto;margin:20px 0}
.prose table{border-collapse:collapse;font-size:16px;min-width:560px;width:100%}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--trait)}
.prose th{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border-bottom:1.5px solid var(--encre)}
.a-confirmer{background:#F7EEC4;box-shadow:0 0 0 3px #F7EEC4}

/* emplacement d'un texte ou d'une pièce pas encore livrés (aperçu seulement) */
.a-ecrire{border:1.5px dashed var(--gris);border-radius:3px;padding:18px 20px;margin-top:24px;color:var(--gris);font-size:16px;background:rgba(255,255,255,.4)}
.a-ecrire::before{content:attr(data-quoi);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre);margin-bottom:6px}

/* ===== clôture commune : bon pour accord ===== */
.cloture{padding:72px 0 88px;border-top:1.5px dashed var(--trait)}
.bon{margin-top:32px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:1.5px solid var(--encre);background:#fff}
.bon > div{padding:28px 30px}
.bon > div + div{border-left:1.5px dashed var(--trait);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.bon p{color:var(--gris)}
.bon .bt{margin-top:22px}
.bon .autres{display:flex;flex-direction:column;gap:2px}
.bon .signe{font-size:44px;line-height:1;transform:rotate(-4deg);transform-origin:left;display:block}

/* ===== pied : la couverture cartonnée au dos du carnet ===== */
.couverture{position:relative;background:var(--encre) var(--grain);color:var(--papier);padding:64px 0 40px calc(var(--souche));font-size:16px}
.couverture::before{content:"";position:absolute;left:0;right:0;top:-7px;height:14px;background:radial-gradient(circle at 10px 7px,var(--papier) 4px,transparent 4.5px) 0 0/20px 14px repeat-x}
.couv-in{max-width:1240px;padding:0 var(--gouttiere)}
.couv-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1.5px solid rgba(244,240,230,.28)}
.couv-tete img{height:30px;width:auto;display:block}
.couv-tete .bt{background:var(--papier);color:var(--encre)}
.couv-tete .bt:hover{background:#fff;color:var(--encre)}
.couv-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:32px 0 36px}
.couv-cols h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C9C0B0;margin:0 0 8px;max-width:none}
.couv-cols ul{list-style:none;margin:0;padding:0}
.couv-cols a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--papier)}
.couv-cols a:hover{text-decoration:underline;text-underline-offset:5px}
.couv-cols a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.couv-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;border-top:1.5px dashed rgba(244,240,230,.28);padding-top:24px;color:#C9C0B0;font-size:15px}
.couv-bas p{max-width:60ch}
.couv-bas a{color:var(--papier)}
.couv-bas .lema{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:-.01em;color:var(--papier);transform:rotate(-2deg);transform-origin:right}

/* ===== menu mobile : une feuille du carnet à plein écran ===== */
.menu-feuille{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--encre);background:var(--papier) var(--grain);overflow-y:auto;overscroll-behavior:contain}
.menu-feuille::backdrop{background:rgba(23,20,15,.35)}
.menu-feuille[open]{animation:feuille-monte .32s cubic-bezier(.2,.8,.2,1)}
@keyframes feuille-monte{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.mf{position:relative;display:grid;grid-template-columns:var(--souche) minmax(0,1fr);min-height:100%}
.mf::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--souche) - 5px);width:10px;background:radial-gradient(circle at 5px 5px,var(--encre) 2.2px,transparent 2.6px) 0 0/10px 16px repeat-y;opacity:.5}
.mf-souche{display:flex;justify-content:center;align-items:flex-start;padding:24px 0}
.mf-souche .num{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gris);white-space:nowrap}
.mf-corps{padding:0 var(--gouttiere) 40px;min-width:0}
.mf-haut{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--haut-entete);border-bottom:1.5px solid var(--encre);padding:14px 0 10px}
.mf-haut img{height:26px;width:auto;display:block}
.mf-haut .logo{display:flex;align-items:center;min-height:44px}
.mf-fermer{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;background:var(--encre);color:var(--papier);border:0;border-radius:3px;font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.mf-fermer svg{width:16px;height:16px}
.mf-liste{list-style:none;margin:18px 0 0;padding:0;counter-reset:m}
.mf-liste > li{border-bottom:1px solid var(--trait);counter-increment:m}
.mf-liste > li > a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;min-height:60px;padding:12px 0;text-decoration:none;font-family:var(--serif);font-weight:800;font-size:clamp(26px,7vw,34px);letter-spacing:-.02em;line-height:1.1}
.mf-liste > li > a::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--gris)}
.mf-liste > li > a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.mf-metiers{list-style:none;margin:0 0 14px 40px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.mf-metiers a{display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2}
.mf-metiers a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}
.mf-metiers .picto{width:22px;height:22px;flex:none}
.mf-petits{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.mf-petits a{display:inline-flex;align-items:center;min-height:48px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.mf-bas{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.mf-bas .bt{width:100%}
.mf-bas .main{font-size:24px;transform:rotate(-2deg);transform-origin:left}

/* ===== transitions entre pages (View Transitions) : la feuille se tourne, l'en-tête reste ===== */
@view-transition{navigation:auto}
.page{view-transition-name:page}
::view-transition-old(page){animation:feuille-part .2s ease-in both}
::view-transition-new(page){animation:feuille-arrive .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes feuille-part{to{opacity:0;transform:translateY(-10px)}}
@keyframes feuille-arrive{from{opacity:0;transform:translateY(16px)}}
::view-transition-group(folio){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .menu-feuille[open]{animation:none}
}

/* ===== tailles ===== */
@media (min-width:1200px){
  .nav-site{display:block}
  .burger{display:none}
  .reserver .court{display:none}
}
@media (max-width:1199px){
  .reserver .long{display:none}
  .entete .logo{margin-right:auto}
}
@media (max-width:1100px){
  .tete-page{grid-template-columns:minmax(0,1fr);gap:48px}
  .deux{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:900px){
  :root{--souche:40px;--gouttiere:18px;--haut-entete:68px}
  body{font-size:17px}
  .corps{padding:0 16px 0 18px}
  .entete-in{padding:0 16px 0 18px}
  .entete-barre{gap:10px;padding:10px 0 8px}
  .entete .logo img{height:24px}
  .reserver{padding:0 14px;font-size:15px}
  .burger .mot{display:none}
  .souche{padding:20px 0}
  .souche .main{display:none}
  .souche .picto{width:24px;height:24px}
  .tete-page{padding:28px 0 56px;gap:40px}
  .chapeau{font-size:19px}
  .section{padding:56px 0 64px}
  .cloture{padding:56px 0 64px}
  .positions > li{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .positions > li::before{font-size:12px}
  .douleur{grid-template-columns:minmax(0,1fr)}
  .douleur .avant{border-right:0;border-bottom:1.5px dashed var(--trait)}
  .douleur .avant,.douleur .apres{padding:18px 18px}
  .devis-carte{padding:18px 14px 20px;box-shadow:6px 6px 0 var(--ligne)}
  .tampon-exemple{top:16px;right:16px;font-size:13px}
  .devis-carte .tete{padding-right:118px}
  .questions summary{grid-template-columns:36px minmax(0,1fr) 24px;gap:12px}
  .questions summary .q{font-size:18px}
  .questions .r{padding:0 8px 22px 48px}
  .bon{grid-template-columns:minmax(0,1fr)}
  .bon > div{padding:22px 20px}
  .bon > div + div{border-left:0;border-top:1.5px dashed var(--trait)}
  .couverture{padding:56px 0 32px var(--souche)}
  .couv-in{padding:0 16px 0 18px}
  .couv-cols{grid-template-columns:1fr 1fr;gap:20px 18px}
  .mf-corps{padding:0 16px 32px 18px}
  .fiches a{grid-template-columns:34px minmax(0,1fr);}
  .fiches .px{grid-column:2}
}
@media (max-width:600px){
  .folio-ligne{flex-wrap:nowrap}
  .ariane li[aria-current]{display:none}
  .folio{white-space:nowrap}
  .folio-ligne:has(.ariane) .folio-nom{display:none}
}
@media (max-width:560px){
  /* devis étroit : quantité et prix sous la désignation */
  .devis-carte thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .devis-carte tbody tr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;border-bottom:1px solid var(--ligne);padding:4px 0}
  .devis-carte tbody td{border:0;padding:6px 4px 2px 0}
  .devis-carte td.qte,.devis-carte td.pu{grid-column:2;font-size:13px;color:var(--gris);text-align:left;padding-top:0}
  .devis-carte td.qte::before{content:"Qté ";}
  .devis-carte td.pu::before{content:"Prix ";}
  .devis-carte td.qte:empty,.devis-carte td.pu:empty{display:none}
  .devis-carte td.tt{grid-column:3;grid-row:1}
  .devis-carte tr.total{border-bottom:0;border-top:1.5px solid var(--encre);margin-top:4px}
  .devis-carte tr.total td{border:0}
  .mf-metiers{margin-left:0;grid-template-columns:1fr}
}
@media (max-width:420px){
  .couv-cols{grid-template-columns:1fr}
}
@media (max-width:359px){
  .entete .logo img{height:19px}
  .reserver{padding:0 10px}
  .entete-barre{gap:6px}
}
@media print{.entete,.couverture,.saute,.menu-feuille,.cloture .bt{display:none!important}body{background:#fff}}
/* aperçu de relecture : https://…/page?revision → chaque texte à confirmer / à valider est encadré et étiqueté */
html.revision [data-revision]{outline:2px dashed #B8860B;outline-offset:4px;position:relative}
html.revision [data-revision]::after{content:attr(data-revision);display:block;width:fit-content;margin-top:6px;padding:2px 8px;background:#FFF3C4;color:#17140F;font:500 12px/1.4 var(--mono);letter-spacing:.04em}