/* CHÂSSIS COMMUN DES DIX MVP. Chaque page pose ses propres encres sur :root (--fond, --encre,
   --accent, --accent2, --sur-accent) et choisit sa voix : `body.famille` titre en Fraunces,
   `body.outil` titre en Figtree gras et étiquettes en mono. Aucune ressource tierce : les polices
   sont ici, sous licence OFL. Ce sont des outils, pas des affiches : sobres, denses, lisibles. */
@font-face{font-family:"Fraunces";src:url("fontes/fraunces-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url("fontes/figtree-var.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fontes/mono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url("fontes/noto-naskh-arabic-var.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
:root{--fond:#FAF7F2;--encre:#1B1F24;--accent:#1E5540;--accent2:#E9AE3E;--sur-accent:#fff;
  --doux:color-mix(in srgb,var(--encre) 68%,var(--fond));--filet:color-mix(in srgb,var(--encre) 16%,var(--fond));
  --voile:color-mix(in srgb,var(--encre) 5%,var(--fond));--teinte:color-mix(in srgb,var(--accent) 10%,var(--fond));
  --texte:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Plex Mono",ui-monospace,Menlo,monospace;--titre:var(--texte);
  --gouttiere:clamp(16px,4vw,40px);--rayon:10px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.02rem/1.55 var(--texte)}
body.famille{--titre:"Fraunces",Georgia,serif}
h1,h2,h3{font-family:var(--titre);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.08}
body.famille h1,body.famille h2,body.famille h3{font-weight:560;font-variation-settings:"SOFT" 100}
body.outil h1,body.outil h2,body.outil h3{font-weight:750}
h1{font-size:clamp(2rem,1.3rem + 3.4vw,3.7rem)}
h2{font-size:clamp(1.45rem,1.2rem + 1.2vw,2.1rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0}a{color:inherit}
.saut{position:absolute;left:-999px}.saut:focus{left:12px;top:12px;background:var(--encre);color:var(--fond);padding:8px 12px;z-index:9}
.etiq{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tete{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--gouttiere);border-bottom:1px solid var(--filet)}
.tete .nom{font-family:var(--titre);font-weight:700;font-size:1.12rem;text-decoration:none;letter-spacing:-.01em}
.tete .etat{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--doux);border:1px solid var(--filet);border-radius:999px;padding:4px 10px;white-space:nowrap}
main{display:grid;gap:clamp(36px,6vw,72px);padding:clamp(28px,5vw,64px) var(--gouttiere) clamp(40px,6vw,80px);max-width:1120px;margin:0 auto}
.ouverture{display:grid;gap:18px;max-width:46rem}
.chapo{font-size:1.14rem;color:var(--doux);max-width:60ch}
.gestes{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.bouton{display:inline-flex;align-items:center;gap:8px;font:600 .98rem var(--texte);padding:12px 18px;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:var(--sur-accent);cursor:pointer;text-decoration:none}
.bouton.fin{background:transparent;color:var(--accent)}
.bouton.petit{padding:7px 12px;font-size:.86rem;border-width:1.5px}
.bouton:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.bloc{display:grid;gap:18px}
.bloc>p{max-width:66ch}
.outil-cadre{border:1px solid var(--filet);border-radius:var(--rayon);background:color-mix(in srgb,#fff 55%,var(--fond));padding:clamp(16px,3vw,28px);display:grid;gap:18px}
.champs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
label{display:grid;gap:6px;font-size:.9rem;font-weight:600}
label small{font-weight:400;color:var(--doux)}
input,select,textarea{font:inherit;color:inherit;background:var(--fond);border:1.5px solid var(--filet);border-radius:8px;padding:10px 12px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
.choix{display:grid;gap:8px}
.choix label{display:flex;gap:10px;align-items:flex-start;font-weight:400;padding:10px 12px;border:1.5px solid var(--filet);border-radius:8px;cursor:pointer}
.choix label:has(input:checked){border-color:var(--accent);background:var(--teinte)}
.defile{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-top:1px solid var(--filet)}
th{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--doux);border-top:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pastille{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.rouge{color:#B3261E}.orange{color:#9A5B00}.vertok{color:#1B6B45}
.trois{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.trois>div{border-top:2px solid var(--accent);padding-top:12px;display:grid;gap:6px;align-content:start}
.trois p{color:var(--doux);font-size:.97rem}
.offre{background:var(--teinte);border-radius:var(--rayon);padding:clamp(18px,3vw,32px);display:grid;gap:16px}
.offre ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.prix{font-family:var(--mono);font-size:.9rem}
.prix b{font:700 1.5rem var(--titre);letter-spacing:-.02em}
.attente{display:grid;gap:12px;max-width:34rem}
.attente .ligne{display:flex;flex-wrap:wrap;gap:10px}
.attente .ligne input{flex:1 1 220px}
.gratuit label{display:grid;gap:4px}
.gratuit .ligne label{flex:1 1 200px}
.gratuit label.case{display:flex;gap:8px;align-items:flex-start}
.achat{display:grid;gap:12px;max-width:40rem}
.case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.95rem}
.case input{margin-top:4px;flex:none}
.bouton:disabled{opacity:.45;cursor:not-allowed}
.note{font-size:.84rem;color:var(--doux);max-width:62ch}
.retour{font-weight:600;color:var(--accent)}
details{border-top:1px solid var(--filet);padding:12px 0}
details:last-of-type{border-bottom:1px solid var(--filet)}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--doux);max-width:66ch}
.pied{border-top:1px solid var(--filet);padding:24px var(--gouttiere) 40px;font-size:.84rem;color:var(--doux);display:grid;gap:8px;max-width:1120px;margin:0 auto}
.pied nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.encart{border-left:3px solid var(--accent2);padding:6px 0 6px 16px;max-width:66ch}
[hidden]{display:none!important}
@media print{.tete,.pied,.gestes,.attente,.offre,.pas-imprimer,.bouton{display:none!important}body{background:#fff}main{padding:0;gap:18px}.outil-cadre{border:0;padding:0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- LA MARQUE ET LE MOUVEMENT (21/09/2026) ---------------------------------------------------
   Le carreau du K mène à l'accueil ; le pied est un bloc d'encre ; l'offre montre trois vraies pages
   du produit. `html.mouvement` n'existe que si Framer Motion va jouer (voir construire.py) : sans lui,
   ou avec « réduire les animations », rien n'est caché et l'éventail est simplement ouvert. */
.tete{position:sticky;top:0;z-index:8;background:color-mix(in srgb,var(--fond) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.marque{display:flex;align-items:center;gap:12px;min-width:0}
.marque .logo{display:block;line-height:0;border-radius:9px;flex:none}
.marque .logo:focus-visible,.tete .etat:focus-visible,.pied a:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.marque .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tete .etat{text-decoration:none}
a.etat:hover{border-color:var(--encre);color:var(--encre)}
.bouton{transition:filter .18s ease}.bouton:hover:not(:disabled){filter:brightness(1.08)}
.offre{background:color-mix(in srgb,var(--part,var(--accent2)) 15%,var(--fond));grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(18px,4vw,48px);overflow:clip}
.offre-texte{display:grid;gap:16px;min-width:0}
.apercu{--page-l:clamp(138px,19vw,214px);position:relative;margin:0;display:grid;justify-items:center;align-content:center;gap:18px;padding:26px 0 8px;min-width:0}
.apercu img{grid-area:1/1;width:var(--page-l);height:auto;border-radius:5px;background:#fff;box-shadow:0 1px 2px rgba(20,22,43,.14),0 14px 30px -10px rgba(20,22,43,.34);transform-origin:50% 92%}
.apercu img:nth-child(1){z-index:3;transform:translateY(-8px)}
.apercu img:nth-child(2){z-index:1;transform:translate(-46px,6px) rotate(-7deg)}
.apercu img:nth-child(3){z-index:2;transform:translate(46px,6px) rotate(7deg)}
.apercu figcaption{grid-area:2/1;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--doux);text-align:center}
@media(max-width:820px){.offre{grid-template-columns:1fr}.offre .apercu{order:-1}}
.pied{display:block;max-width:none;margin:clamp(24px,5vw,56px) 0 0;padding:0;border-top:0;background:#14162B;color:color-mix(in srgb,#F7F5F0 72%,#14162B)}
.pied-dedans{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,48px) var(--gouttiere) 44px;display:grid;gap:10px}
.pied-logo{display:inline-block;line-height:0;margin-bottom:10px;justify-self:start}
.pied a{color:#F7F5F0}
html.mouvement [data-apparait],html.mouvement [data-cascade]>*,html.mouvement #k-hero path{opacity:0}
@media print{.apercu{display:none!important}}

[id]{scroll-margin-top:84px}

/* Cibles tactiles de 44 px au moins (UI UX Pro Max, « touch-target-size »), sans changer le dessin. */
.marque .logo{padding:5px;margin:-5px}
.marque .nom{display:block;line-height:44px}
.tete .etat{display:inline-flex;align-items:center;min-height:44px}
.tete .etat{padding:0 14px}
.pied nav{gap:0 18px}.pied nav a{display:inline-flex;align-items:center;min-height:44px}
/* Guides (05/10/2026) */
.article .puce{font:600 .8rem/1.2 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--doux)}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95rem}
.article th,.article td{border-top:1px solid var(--filet,#ddd);padding:8px 6px;text-align:left;vertical-align:top}
.article .encadre{border:1px solid var(--filet,#ddd);border-radius:10px;padding:18px;margin:24px 0}
.article .source{font-size:.85rem;color:var(--doux);margin-top:28px}
.guides li{margin:0 0 18px}