/* Page d'accueil de Maille à Maille.
   Feuille autonome : l'atelier (assets/style.css) vit sa vie, la page
   d'accueil ne lit que les jetons du thème actif (assets/themes.css) et le
   nuancier du thème, posé par accueil.js en variables --l1 à --l8.
   Préfixe L- pour tout ce qui est propre à la page. */

:root {
  --r:var(--r-md);
  --titre:var(--serif);
  --mvt-vif:120ms cubic-bezier(.2,0,.2,1);
  /* Le nuancier du thème (repli : l'accent), remplacé par accueil.js. */
  --l1:var(--laine); --l2:var(--accent); --l3:var(--laine); --l4:var(--accent);
  --l5:var(--accent); --l6:var(--laine); --l7:var(--surface-2); --l8:var(--encre);
  /* Une pièce de feutrine teintée, toujours lisible : 16 % de couleur sur la surface. */
  --teinte:var(--l1);
}
/* Calculé là où la teinte change (une variable se résout où elle est déclarée). */
.L-carte,.L-vet{--pastel:color-mix(in srgb, var(--teinte) 16%, var(--surface))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background-color:var(--parchemin);background-image:var(--grain);color:var(--encre);font-family:var(--police);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--titre);font-weight:var(--w-titre);font-stretch:var(--etire);font-variation-settings:var(--var-titre);letter-spacing:-.01em;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}
[hidden]{display:none!important}

.L-saut{position:absolute;left:12px;top:-60px;z-index:20;background:var(--encre);color:var(--surface);padding:10px 14px;border-radius:var(--r-sm);text-decoration:none;font-weight:600}
.L-saut:focus{top:12px}

.L-in{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.L-in{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}}

/* --- Feutrine : une pièce de laine cousue -------------------------------- */
.L-feutre,.L-demo,.L-carte,.L-vet,.L-ruban,.L-extrait,.L-tricote,.L-faq details,.L-temps>li,.L-final{
  position:relative;isolation:isolate;
  background-color:var(--surface);background-image:var(--peluches),var(--grain);
  border-radius:var(--r-lg);box-shadow:var(--ombre-1);
}
.L-demo::after,.L-carte::after,.L-vet::after,.L-ruban::after,.L-extrait::after,.L-tricote::after,.L-faq details::after,.L-temps>li::after,.L-final::after{
  content:"";position:absolute;inset:6px;border-radius:calc(var(--r-lg) - 4px);border:var(--couture);pointer-events:none;z-index:-1;opacity:.75;
}
:root[data-theme="classique"] :is(.L-demo,.L-carte,.L-vet,.L-ruban,.L-extrait,.L-tricote,.L-faq details,.L-temps>li,.L-final){border:1px solid var(--trait)}
:root[data-theme="granny"] :is(.L-demo,.L-carte,.L-vet,.L-ruban,.L-extrait,.L-tricote,.L-faq details,.L-temps>li,.L-final){border:2px solid var(--encre)}

/* --- Navigation ----------------------------------------------------------- */
.L-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding-block:10px;
  background:color-mix(in srgb, var(--parchemin) 90%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  /* Le fond court d'un bord à l'autre de l'écran sans élargir la page. */
  box-shadow:0 0 0 100vmax color-mix(in srgb, var(--parchemin) 90%, transparent);clip-path:inset(0 -100vmax)}
@media (max-width:420px){.L-nav .court-cache{display:none}.marque{font-size:15.5px;gap:6px}.L-logo{width:30px;height:30px}.L-apparence{width:40px;height:40px}}
.marque{display:flex;align-items:center;gap:8px;font-family:var(--titre);font-weight:var(--w-titre);font-size:17px;white-space:nowrap;text-decoration:none;margin-right:auto}
.L-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--laine);color:var(--fil);box-shadow:var(--ombre-1)}
.L-logo svg{width:24px;height:24px;display:block}
.L-nav nav{display:flex;gap:4px;font-size:14.5px;color:var(--encre-2)}
.L-nav nav a{text-decoration:none;padding:8px 10px;border-radius:var(--r-pill);transition:background var(--mvt-vif),color var(--mvt-vif)}
.L-nav nav a:hover{color:var(--encre);background:var(--surface-2)}
@media (max-width:900px){.L-nav nav{display:none}}
.L-apparence{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:var(--filet);background:var(--surface);cursor:pointer;color:var(--encre-2);flex:none;transition:color var(--mvt-vif),transform var(--mvt-doux)}
.L-apparence:hover{color:var(--encre);transform:rotate(-12deg)}

/* --- Boutons -------------------------------------------------------------- */
.L-cta{display:inline-flex;align-items:center;gap:10px;position:relative;isolation:isolate;
  background-color:var(--accent);background-image:var(--peluches),var(--grain);color:var(--sur-accent);
  border:0;border-radius:var(--r-pill);padding:15px 24px;font-weight:600;font-size:16.5px;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:var(--ombre-1);transition:background-color var(--mvt-vif),transform var(--mvt-doux)}
.L-cta:hover{background-color:var(--accent-2);transform:translateY(-2px) rotate(-1deg)}
.L-cta:active{transform:scale(.97)}
.L-cta::after{content:"";position:absolute;inset:4px;border-radius:inherit;border:var(--couture);border-color:color-mix(in srgb, var(--sur-accent) 60%, transparent);pointer-events:none;z-index:-1}
.L-cta svg{transition:transform var(--mvt-doux)}
.L-cta:hover svg{transform:translateX(3px)}
.L-cta.petit{padding:10px 16px;font-size:14px;gap:8px}
.L-cta.petit::after{inset:3px}
:root[data-theme="classique"] .L-cta{background-color:var(--encre);color:var(--parchemin)}
:root[data-theme="classique"] .L-cta::after{content:none}
:root[data-theme="granny"] .L-cta{outline:2px solid var(--encre);outline-offset:-2px}
/* Le bouton cousu : un disque de laine claire percé de quatre trous. */
.L-bouton{width:18px;height:18px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 6px 6px, var(--accent) 1.2px, transparent 1.6px),
    radial-gradient(circle at 12px 6px, var(--accent) 1.2px, transparent 1.6px),
    radial-gradient(circle at 6px 12px, var(--accent) 1.2px, transparent 1.6px),
    radial-gradient(circle at 12px 12px, var(--accent) 1.2px, transparent 1.6px),
    color-mix(in srgb, var(--sur-accent) 88%, var(--accent));
  box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--accent) 40%, transparent)}
:root[data-theme="classique"] .L-bouton{display:none}
.L-cta-2{display:inline-flex;align-items:center;padding:13px 20px;border:2px dashed var(--trait-fort);border-radius:var(--r-pill);background:var(--surface);color:var(--encre);font-weight:600;font-size:15.5px;text-decoration:none;transition:border-color var(--mvt-vif),transform var(--mvt-doux)}
.L-cta-2:hover{border-color:var(--encre);transform:translateY(-2px)}

/* --- Promesse ------------------------------------------------------------- */
.L-hero{position:relative;isolation:isolate;display:grid;gap:28px;padding-block:20px 32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.L-hero{grid-template-columns:minmax(0,10fr) minmax(0,11fr);align-items:center;gap:48px;padding-block:44px 48px}}
.L-hero-texte{position:relative;z-index:1}
.L-ecusson{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:var(--r-pill);background-color:var(--accent-doux);background-image:var(--peluches);border:var(--couture);font-size:13px;font-weight:600;color:var(--encre)}
.L-point{width:18px;height:18px;border-radius:50%;background:var(--laine);box-shadow:inset 0 0 0 2px var(--fil)}
.L-hero h1{font-size:clamp(36px,6.2vw,66px);letter-spacing:-.025em;line-height:1.04;margin-top:16px}
.L-souligne{color:var(--accent);text-decoration:underline wavy var(--laine);text-decoration-thickness:.08em;text-underline-offset:.2em;text-decoration-skip-ink:none}
:root[data-theme="classique"] .L-souligne{color:inherit;text-decoration-style:solid}
.L-hero .chapo{font-size:17.5px;color:var(--encre-2);max-width:48ch;margin-top:16px}
.L-actions{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:24px}
.L-pastilles{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.L-pastilles li{font-family:var(--mono);font-size:12.5px;color:var(--encre-2);background:var(--surface);border:var(--filet);border-radius:var(--r-pill);padding:4px 11px}
.L-pastilles li::before{content:"✓ ";color:var(--ok);font-weight:600}

/* Feuilles d'automne en feutrine, qui flottent derrière la promesse. */
.L-feuilles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.L-feuille{position:absolute;display:block;opacity:.9;animation:feuille-flotte var(--du,18s) ease-in-out var(--d,0s) infinite alternate;transform-origin:50% 10%}
.L-feuille svg{display:block;width:100%;height:auto;overflow:visible}
.L-feuille .f{fill:var(--teinte);stroke:color-mix(in srgb, var(--teinte) 65%, var(--encre));stroke-width:1.4;stroke-linejoin:round}
.L-feuille .n{fill:none;stroke:color-mix(in srgb, var(--teinte) 35%, var(--surface));stroke-width:1.4;stroke-linecap:round;stroke-dasharray:2.4 2.2}
@keyframes feuille-flotte{
  0%{transform:translate(0,-6px) rotate(-14deg)}
  35%{transform:translate(10px,14px) rotate(10deg)}
  70%{transform:translate(-6px,34px) rotate(-6deg)}
  100%{transform:translate(8px,56px) rotate(18deg)}
}
@media (max-width:979px){.L-feuille:nth-child(n+3){display:none}.L-feuille{opacity:.75}}

/* --- Démonstration -------------------------------------------------------- */
.L-demo{display:grid;min-width:0;z-index:1;scroll-margin-top:72px}
.L-demo-tete{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;padding:16px 18px 6px;flex-wrap:wrap}
.L-demo-titre{font-size:18px}
.m-seg{display:inline-flex;gap:2px;padding:3px;border:var(--filet);border-radius:var(--r-pill);background:var(--surface)}
.m-seg button{background:none;border:0;padding:6px 14px;min-height:34px;font-size:13.5px;font-weight:500;color:var(--encre-2);cursor:pointer;border-radius:var(--r-pill);transition:background var(--mvt-vif),color var(--mvt-vif)}
.m-seg button[aria-pressed="true"]{background-color:var(--encre);color:var(--surface);font-weight:600}
:root:not([data-theme="classique"]) .m-seg button[aria-pressed="true"]{background-color:var(--accent);background-image:var(--peluches);color:var(--sur-accent)}

.L-vets-mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:8px 14px 10px}
.L-vm{display:grid;justify-items:center;gap:2px;padding:7px 2px 6px;border:var(--filet);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-width:0;transition:background var(--mvt-vif),transform var(--mvt-doux),border-color var(--mvt-vif)}
.L-vm svg{width:26px;height:26px;display:block}
.L-vm span{font-size:11.5px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.L-vm:hover{transform:translateY(-2px);border-color:var(--trait-fort)}
.L-vm[aria-pressed="true"]{background-color:var(--laine-clair);background-image:var(--peluches);border:2px solid var(--fil);font-weight:600;color:var(--encre)}
:root[data-mode="sombre"] .L-vm[aria-pressed="true"]{background-color:color-mix(in srgb, var(--laine) 30%, var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-mode="clair"]) .L-vm[aria-pressed="true"]{background-color:color-mix(in srgb, var(--laine) 30%, var(--surface))}}

.L-demo-scene{position:relative;aspect-ratio:7/5;max-width:100%;overflow:hidden;margin:0 14px;border-radius:var(--r-md);background-color:var(--scene);background-image:var(--motif);box-shadow:inset 0 0 0 2px var(--trait)}
 @media (max-width:600px){.L-demo-scene{aspect-ratio:1/1}}
.L-vues{justify-self:start;margin:0 14px 8px}
.L-vues button{padding:4px 12px;min-height:32px;font-size:13px}
.L-sch{position:absolute;inset:10px}
.L-sch.petit .etiq:not(.etiq-fantome){display:none}
.L-sch svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:visible;display:block}
.L-porte{position:absolute;inset:0;z-index:1;display:grid;place-items:center;text-align:center;color:var(--encre-2);font-size:14px;padding:20px;background:var(--scene)}
.L-porte b{color:var(--encre);font-family:var(--titre);font-size:16px}
.L-porte--3d{display:block;padding:0;background:var(--surface);overflow:hidden}
.L-porte-msg{display:grid;place-items:center;align-content:center;gap:10px;height:100%}
.L-porte .apercu-vue{position:relative;width:100%;height:100%;background:var(--surface)}
.L-porte .apercu-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.L-porte .apercu-etat{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px}
.L-porte .apercu-etat[hidden]{display:none}
.L-porte .apercu-barre{display:none}

.L-commandes{display:grid;gap:10px;padding:12px 18px}
.L-rang{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;min-height:32px}
.L-rang .lbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3);width:44px}
.L-taille-note{font-size:13px;color:var(--encre-2)}
.m-chips{display:flex;flex-wrap:wrap;gap:5px}
.m-chip{font-family:var(--mono);font-size:13px;min-width:38px;min-height:32px;text-align:center;border:var(--filet);background:var(--surface);border-radius:var(--r-pill);padding:4px 10px;cursor:pointer;transition:background var(--mvt-vif),color var(--mvt-vif),border-color var(--mvt-vif)}
.m-chip:hover{border-color:var(--trait-fort)}
.m-chip[aria-pressed="true"]{background:var(--encre);color:var(--surface);border-color:var(--encre)}
.m-nuancier{display:flex;flex-wrap:wrap;gap:8px}
.m-nuancier button{width:28px;height:28px;border-radius:50%;border:2px solid color-mix(in srgb, var(--encre) 25%, transparent);display:block;cursor:pointer;padding:0;transition:transform var(--mvt-doux)}
.m-nuancier button:hover{transform:scale(1.12)}
.m-nuancier button[aria-pressed="true"]{outline:3px solid var(--encre);outline-offset:2px}
/* Au doigt : 44 x 44 px de zone active autour de la pastille, sans changer son dessin. */
@media (pointer:coarse){.m-nuancier{gap:16px}.m-nuancier button{position:relative}.m-nuancier button::after{content:'';position:absolute;inset:-8px}.m-chips{gap:6px}.m-chip{position:relative}.m-chip::after{content:'';position:absolute;inset:min(0px,calc((100% - 44px)/2))}}

.L-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 14px}
.L-chiffres div{display:grid;gap:0;padding:10px 12px;border-radius:var(--r-md);background-color:var(--surface-2);background-image:var(--peluches);min-width:0}
.L-chiffres b{font-family:var(--titre);font-weight:var(--w-titre);font-size:clamp(22px,3vw,28px);line-height:1.1;font-variant-numeric:tabular-nums;display:inline-block}
.L-chiffres span{font-size:12px;color:var(--encre-2);line-height:1.3}

.L-sortie{padding:12px 18px 20px;font-size:14px;display:grid;gap:6px}
.L-sortie .src{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3)}
.L-sortie b,.L-extrait b,.L-tricote b,.L-mini-patron b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.L-ech{font-size:12px;color:var(--encre-3)}
.L-ouvrir{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:600;color:var(--accent-2);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;padding-block:6px}
:root[data-mode="sombre"] .L-ouvrir{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-mode="clair"]) .L-ouvrir{color:var(--accent)}}
.L-ouvrir:hover{text-decoration-style:solid}

/* Le schéma, rendu par les moteurs de l'atelier */
.zone .zb{fill:var(--laine);transition:fill var(--mvt-papier)}
.zone .zt{fill:var(--accent);opacity:.07}
.zone .zf{stroke:none}
.zone .zo{fill:none;stroke:var(--trait-fort);stroke-width:.45;stroke-linejoin:round}
:root:not([data-theme="classique"]) .zone .zo{stroke:var(--contour);stroke-width:calc(var(--contour-w) * .55px / var(--ppu, 4))}
:root[data-theme="laine"][data-filtres] .zone .zo{stroke:url(#torsade);stroke-width:calc(var(--contour-w) * 1px / var(--ppu, 4))}
.renoue .zone .zo[pathLength]{stroke-dasharray:1;animation:fil-renoue calc(1.1s * var(--lent)) var(--rebond-doux) both}
@keyframes fil-renoue{0%{stroke-dashoffset:.82}100%{stroke-dashoffset:0}}
.trame{stroke:var(--fil)}
.raglan path{fill:none;stroke:var(--accent);stroke-width:.5;stroke-dasharray:1.6 1.6;opacity:.7}
.raglan path.tour{stroke-dasharray:none;stroke-width:.42;opacity:.55}
.raglan path.epaule{stroke-dasharray:.8 1.2;opacity:.5}
.cote path{fill:none;stroke:var(--encre-3);stroke-width:.3}
.cote .cote-hit{stroke:transparent}
.cote text,.etiq{paint-order:stroke;stroke:var(--scene);stroke-width:.6px;stroke-linejoin:round}
.cote text{fill:var(--encre);font-size:2.6px;font-family:var(--police);font-weight:500;font-variant-numeric:tabular-nums}
.etiq{fill:var(--encre);font-size:3.1px;font-family:var(--police);font-weight:600;letter-spacing:.02em}
.etiq-fantome{font-style:italic;opacity:.7}
/* Les cotes gardent à peu près la même taille à l'écran, quel que soit le
   vêtement : le texte suit l'échelle du dessin (--ppu, posé par accueil.js). */
.L-sch .cote text,.L-mini-sch .cote text,.sch-box .cote text{font-size:clamp(1.2px, calc(10.5px / var(--ppu, 4)), 3.4px)}
.L-sch .etiq,.L-mini-sch .etiq,.sch-box .etiq{font-size:clamp(1.4px, calc(11.5px / var(--ppu, 4)), 3.8px)}

/* --- L'étiquette de la pelote --------------------------------------------- */
.L-ruban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-block:8px 8px;background-color:var(--laine-clair)}
:root[data-mode="sombre"] .L-ruban{background-color:color-mix(in srgb, var(--laine) 22%, var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-mode="clair"]) .L-ruban{background-color:color-mix(in srgb, var(--laine) 22%, var(--surface))}}
.L-ruban div{padding:16px 18px;border-left:2px dashed color-mix(in srgb, var(--encre) 22%, transparent);display:grid;gap:2px;min-width:0}
.L-ruban div:first-child{border-left:0}
.L-ruban span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--encre-2)}
.L-ruban b{font-family:var(--titre);font-size:19px;font-weight:var(--w-titre);color:var(--encre)}
@media (max-width:700px){.L-ruban{grid-template-columns:1fr 1fr}.L-ruban div{border-left:0;border-top:2px dashed color-mix(in srgb, var(--encre) 22%, transparent);padding:12px 16px}.L-ruban div:nth-child(-n+2){border-top:0}.L-ruban div:nth-child(even){border-left:2px dashed color-mix(in srgb, var(--encre) 22%, transparent)}.L-ruban div:last-child{grid-column:1/-1;border-left:0}}

/* --- Sections ------------------------------------------------------------- */
.L-sec{padding-block:48px 8px;display:grid;gap:22px;scroll-margin-top:72px}
.L-sec>header{display:grid;gap:8px;max-width:680px}
.L-sur{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-2);font-weight:500}
:root[data-mode="sombre"] .L-sur{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-mode="clair"]) .L-sur{color:var(--accent)}}
.L-sec h2{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.02em}
.L-sec>header p:not(.L-sur),.L-lead{color:var(--encre-2);font-size:16.5px}

/* Ce qu'il y a dans la pelote : des pièces de feutrine de couleurs différentes. */
.L-bento{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.L-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.L-c-patron{grid-column:1/-1}}
@media (min-width:1000px){
  .L-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .L-c-patron{grid-column:1/3}
  .L-c-schema{grid-column:3;grid-row:1/3}
}
.L-carte{background-color:var(--pastel);padding:22px 22px 20px;display:grid;gap:10px;align-content:start;min-width:0;overflow:hidden}
.L-carte h3{font-size:21px}
.L-carte p{color:var(--encre-2);font-size:15px}
.L-tag{justify-self:start;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface);color:var(--encre);border:var(--filet)}
.L-c-patron{--teinte:var(--l2)}
.L-c-schema{--teinte:var(--l3)}
.L-c-3d{--teinte:var(--l5)}
.L-c-tricote{--teinte:var(--l4)}
.L-c-photo{--teinte:var(--l6)}
.L-c-fil{--teinte:var(--l1)}
.L-c-hors{--teinte:var(--l3)}
.L-mini-patron{background:var(--surface);border-radius:var(--r-md);padding:14px 16px;font-size:13.5px;display:grid;gap:8px;box-shadow:inset 0 0 0 1px var(--trait)}
.L-mini-patron .tete{font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
.L-mini-patron ol{margin:0;padding-left:20px;display:grid;gap:6px}
.L-mini-sch{background-color:var(--scene);border-radius:var(--r-md);padding:12px;box-shadow:inset 0 0 0 1px var(--trait);margin-top:auto}
.L-c-schema{align-content:stretch;grid-template-rows:auto auto auto 1fr}
.L-mini-sch svg{width:100%;height:auto;max-height:340px;display:block;overflow:visible}
.L-lien{justify-self:start;margin-top:4px;background:var(--surface);border:2px dashed var(--trait-fort);border-radius:var(--r-pill);padding:9px 16px;font-weight:600;cursor:pointer;transition:transform var(--mvt-doux)}
.L-lien:hover{transform:translateY(-2px)}
.L-jauges{display:flex;flex-wrap:wrap;gap:6px}
.L-jauges span{font-family:var(--mono);font-size:12px;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface);border:2px solid currentColor}
.L-jauges .ok{color:var(--ok)}
.L-jauges .moy{color:var(--alerte)}
.L-jauges .non{color:var(--erreur)}

/* La garde-robe */
.L-vets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:900px){.L-vets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.L-vet{display:grid;gap:6px;align-content:start;justify-items:start;text-align:left;padding:16px 16px 14px;border:0;cursor:pointer;min-width:0;transition:transform var(--mvt-doux)}
.L-vet:hover{transform:translateY(-3px) rotate(-.6deg)}
.L-vet-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pastel);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--teinte) 45%, transparent)}
.L-vet-ic svg{width:32px;height:32px;color:var(--encre)}
.L-vet b{font-family:var(--titre);font-size:17px;font-weight:var(--w-titre)}
.L-vet-note{font-size:13px;color:var(--encre-2);line-height:1.35}
.L-vet-tags{display:flex;gap:4px;margin-top:2px}
.L-vet-tags i{font-style:normal;font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--encre-2)}

/* Trois temps */
.L-temps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.L-temps{grid-template-columns:1fr}}
.L-temps>li{padding:22px 20px 20px;display:grid;gap:10px;align-content:start;min-width:0}
.L-temps .num{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background-color:var(--accent);background-image:var(--peluches);color:var(--sur-accent);font-family:var(--titre);font-weight:var(--w-titre);font-size:20px;box-shadow:var(--ombre-1)}
.L-temps h3{font-size:21px}
.L-temps p{color:var(--encre-2)}
.L-temps .preuve{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);padding:10px 12px;border-radius:var(--r-md);color:var(--encre)}

/* L'extrait */
.L-extrait{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);overflow:hidden}
.L-extrait .sch-box{background-color:var(--scene);background-image:var(--motif);display:grid;align-items:center;padding:24px;min-width:0}
.L-extrait .sch-box svg{width:100%;height:auto;display:block;overflow:visible}
.L-extrait .texte{padding:24px 26px;display:grid;gap:14px;align-content:start;font-size:14.5px;min-width:0}
.L-extrait .texte .tete{font-family:var(--mono);font-size:12px;color:var(--encre-2);border-bottom:2px dashed var(--trait);padding-bottom:10px}
.L-extrait h3{font-size:17px;margin-bottom:6px}
.L-extrait ol{margin:0;padding-left:22px;display:grid;gap:7px}
.L-extrait .suite{font-size:13px;color:var(--encre-3);font-family:var(--mono)}
@media (max-width:760px){.L-extrait{grid-template-columns:1fr}.L-extrait .sch-box{padding:16px 30px}.L-extrait .texte{padding:20px 18px}}

/* Je tricote, patron papier */
.L-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;align-items:start}
.L-col{display:grid;gap:12px;min-width:0}
.L-col h2{font-size:clamp(25px,3vw,34px)}
@media (max-width:760px){.L-duo{grid-template-columns:1fr;gap:44px}}
.L-tricote{padding:20px;display:grid;gap:14px;max-width:440px;margin-top:6px}
.L-tricote .n{font-family:var(--mono);font-size:11.5px;color:var(--encre-3);text-transform:uppercase;letter-spacing:.06em}
.L-tricote p{font-size:17px;line-height:1.45}
.compteur{display:grid;grid-template-columns:60px minmax(0,130px) 60px;gap:10px;align-items:center}
.compteur button{height:60px;border:var(--filet);background:var(--surface);border-radius:50%;font-size:26px;cursor:pointer;transition:transform var(--mvt-vif);touch-action:manipulation}
.compteur button.p{background-color:var(--accent);background-image:var(--peluches);color:var(--sur-accent);border:0;box-shadow:var(--ombre-1)}
:root[data-theme="classique"] .compteur button.p{background-color:var(--encre);color:var(--parchemin)}
.compteur button:active{transform:scale(.92)}
.roule{height:60px;overflow:hidden;position:relative;font-family:var(--mono);font-size:42px;text-align:center;line-height:60px;font-variant-numeric:tabular-nums}
.roule span{position:absolute;inset:0}
.jauge{height:8px;background:var(--surface-2);width:100%;border-radius:var(--r-pill);overflow:hidden;box-shadow:inset 0 0 0 1px var(--trait)}
.jauge i{display:block;height:100%;background-color:var(--laine);background-image:var(--peluches);transform-origin:left;transform:scaleX(0);transition:transform var(--mvt-papier)}
.L-rangs{font-size:12px;color:var(--encre-3)}
.L-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center;margin-top:6px}
.L-papier{background:var(--surface-2);color:var(--encre);border:1px solid var(--trait-fort);padding:16px 14px;font-family:"Courier New",monospace;font-size:12px;line-height:1.55;transform:rotate(-2.5deg);border-radius:var(--r-xs);box-shadow:var(--ombre-1);position:relative}
.L-papier::before{content:"";position:absolute;left:42%;top:-10px;width:56px;height:20px;background:color-mix(in srgb, var(--l4) 55%, transparent);transform:rotate(4deg);border-radius:2px}
 @media (max-width:420px){.L-papier{font-size:11px;padding:14px 10px}.L-photo{gap:12px}}
.L-lu{display:grid;gap:6px;font-size:13px;min-width:0}
.L-lu div{border-bottom:2px dashed var(--trait);padding:5px 0;display:flex;justify-content:space-between;gap:6px}
.L-lu .v{font-family:var(--mono);font-size:11.5px;color:var(--ok);white-space:nowrap;font-weight:500}
.L-lu .a{color:var(--alerte)}

/* Questions */
.L-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:760px){.L-faq{grid-template-columns:1fr}}
.L-faq details{padding:4px 6px;border-radius:var(--r-md)}
.L-faq details::after{border-radius:calc(var(--r-md) - 2px)}
.L-faq summary{list-style:none;cursor:pointer;padding:14px 44px 14px 14px;font-family:var(--titre);font-weight:var(--w-titre);font-size:17px;position:relative;border-radius:var(--r-md)}
.L-faq summary::-webkit-details-marker{display:none}
.L-faq summary::after{content:"+";position:absolute;right:14px;top:50%;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;border-radius:50%;background:var(--accent-doux);color:var(--encre);font-family:var(--mono);font-size:18px;line-height:1;transition:transform var(--mvt-doux)}
.L-faq details[open] summary::after{transform:rotate(45deg)}
.L-faq details p{padding:0 14px 16px;color:var(--encre-2)}

/* Le mot de la fin */
.L-final{margin-block:56px 28px;padding:44px 24px 40px;display:grid;gap:12px;justify-items:center;text-align:center;background-color:var(--accent-doux);overflow:hidden}
.L-final h2{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.02em;max-width:18ch;position:relative}
.L-final>p{color:var(--encre-2);font-size:17px;position:relative}
.L-final .L-actions{justify-content:center;margin-top:10px;position:relative}
.L-final-fil{position:absolute;left:0;right:0;top:34px;width:100%;height:90px;z-index:-1;overflow:visible}
.L-final-fil path{fill:none;stroke:var(--laine);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.L-final:not(.vu) .L-final-fil path{stroke-dashoffset:0}
:root:not([data-calme]) .L-final.vu .L-final-fil path{animation:fil-devide calc(1.8s * var(--lent)) cubic-bezier(.3,.7,.2,1) both}
@keyframes fil-devide{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.L-final-pelote{width:72px;height:72px;position:relative}
.L-final-pelote svg{width:100%;height:100%;display:block}
:root:not([data-calme]) .L-final.vu .L-final-pelote{animation:pelote-arrive calc(1.8s * var(--lent)) cubic-bezier(.3,.7,.2,1) both}
@keyframes pelote-arrive{0%{transform:translateX(-40vw) rotate(-540deg)}100%{transform:none}}

/* La pelote (même dessin que l'atelier, src/animations.js) */
.pelote .pelote-corps{fill:var(--laine);stroke:var(--laine-fonce);stroke-width:1.8}
.pelote .pelote-brins{fill:none;stroke:var(--laine-fonce);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.pelote .pelote-reflet{fill:none;stroke:var(--laine-clair);stroke-width:1.6;stroke-linecap:round;opacity:.8}
.pelote .pelote-visage{display:var(--visage);fill:var(--encre)}
.pelote .pelote-visage path{fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linecap:round}
:root[data-theme="laine"] .pelote .pelote-visage,:root[data-theme="guimauve"] .pelote .pelote-visage{display:inline}
.L-pelote-roule{width:40px;height:40px;display:block}
.L-pelote-roule svg{width:100%;height:100%;animation:pelote-tourne 1.4s linear infinite}
@keyframes pelote-tourne{to{transform:rotate(360deg)}}

.L-pied{border-top:2px dashed var(--trait);padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--encre-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.L-pied a{color:var(--encre)}

/* --- La fenêtre « Apparence » (src/theme.js), comme dans l'atelier --------- */
.apparence{width:min(30rem, calc(100vw - 1.2rem));max-height:calc(100dvh - 1.2rem);overflow-y:auto;padding:1.1rem 1.2rem 1.2rem;border:var(--filet);border-radius:var(--r-lg);background:var(--surface);color:var(--encre);box-shadow:var(--ombre-1)}
.apparence::backdrop{background:var(--voile)}
.partage-tete{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.partage-tete h2{font-size:1.2rem}
.fermer{width:44px;height:44px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--encre-2)}
.fermer:hover{color:var(--encre);background:var(--surface-2)}
.partage-note{margin:.7rem 0 0;font-size:.78rem;line-height:1.45;color:var(--encre-3)}
.apparence-groupe{border:0;margin:.9rem 0 0;padding:0;min-width:0}
.apparence-groupe legend{padding:0;margin-bottom:.45rem;font-family:var(--mono);font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-2)}
.themes-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.theme-choix{position:relative;display:grid;gap:.35rem;min-width:0;padding:.5rem .55rem .55rem;cursor:pointer;border:var(--filet);border-radius:var(--r-md);background-color:var(--surface)}
.theme-choix:hover{border-color:var(--encre-2)}
.theme-choix:has(input:checked){border:2px solid var(--encre);background-image:var(--peluches),var(--grain)}
.theme-choix:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.theme-choix input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.theme-pastille{display:flex;height:18px;border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--trait)}
.theme-pastille i{flex:1}
.theme-nom{display:grid;gap:1px;font-size:.86rem;font-weight:600;line-height:1.25;min-width:0}
.theme-nom small{font-weight:400;font-size:.74rem;color:var(--encre-2)}
.apparence-seg{display:flex;gap:.3rem}
.apparence-seg label{flex:1 1 0;position:relative;min-width:0}
.apparence-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.apparence-seg span{display:block;padding:.55rem .4rem;text-align:center;cursor:pointer;border:var(--filet);border-radius:var(--r-pill);background:var(--surface);font-size:.84rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apparence-seg input:checked + span{background:var(--encre);color:var(--surface);border-color:var(--encre);font-weight:600}
.apparence-seg input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.apparence-seg span{padding:.75rem .4rem}}

/* --- Mouvement réduit ou animations coupées : tout est posé, rien ne bouge -- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0ms!important;animation:none!important}
}
:root[data-calme]{scroll-behavior:auto}
:root[data-calme] *,:root[data-calme] *::before,:root[data-calme] *::after{transition-duration:0ms!important;animation:none!important}
/* Les feuilles ne flottent que dans les thèmes qui ont des animations de fil. */
:root[data-anims=""] .L-feuille{animation:none}

/* --- Les pages patrons, liées depuis la garde-robe (référencement) -------- */
.L-patrons{display:grid;gap:10px;padding:16px 18px;border-radius:var(--r-lg);background-color:var(--surface);background-image:var(--peluches);box-shadow:var(--ombre-1)}
.L-patrons h3{font-size:17px}
.L-patrons ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:2px 16px;font-size:14px}
.L-patrons li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;padding-block:4px;border-bottom:1px dashed var(--trait);min-width:0}
.L-patrons li b{font-weight:600;min-width:6.5em}
.L-patrons a:not(.L-ouvrir){color:var(--encre-2);text-underline-offset:3px;padding-block:6px}
.L-patrons a:not(.L-ouvrir):hover{color:var(--encre)}