/* Socle commun : remise à zéro + composants fonctionnels (tiroir, recherche,
   commande, textes légaux, formulaires). Aucune direction artistique ici : tout
   passe par les variables ci-dessous, que chaque boutique redéfinit dans styles.css. */
:root {
  --fond: #ffffff; --fond-2: #f5f5f3; --texte: #1a1a1a; --texte-doux: #666666;
  --accent: #222222; --accent-texte: #ffffff; --bord: #e4e4e0; --rayon: 4px;
  --police-titre: Georgia, serif; --police-texte: system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.sans-defilement { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fond); padding: 10px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.a-completer { background: #fff3a3; color: #5c4a00; padding: 0 4px; font-style: normal; border-radius: 2px; }
.anim [data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim [data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* Tiroir panier */
.voile { position: fixed; inset: 0; background: rgba(20, 20, 20, .4); opacity: 0; transition: opacity .25s; z-index: 60; }
.voile.ouvert { opacity: 1; }
.tiroir { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fond); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s ease; }
.tiroir.ouvert { transform: none; }
.tiroir-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); }
.tiroir-entete h2 { margin: 0; font-size: 1.15rem; }
.tiroir-fermer { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.tiroir-liste { flex: 1; overflow-y: auto; padding: 8px 20px; }
.tiroir-pied { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); }
.tiroir-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; margin-bottom: 6px; }
.tiroir-note { font-size: .85rem; color: var(--texte-doux); margin-bottom: 12px; }
.tiroir-commander, .bouton, .achat-bouton, .formulaire button[type="submit"], .formulaire [data-confirmer], [data-payer], .barre-achat button {
  display: block; width: 100%; text-align: center; text-decoration: none; background: var(--accent); color: var(--accent-texte);
  border: 0; border-radius: var(--rayon); padding: 15px 18px; font-weight: 600; min-height: 48px;
}
.bouton { display: inline-block; width: auto; }
.tiroir-voir { display: block; text-align: center; padding: 10px; font-size: .9rem; }
.ligne-panier { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.ligne-panier img { width: 72px; height: 96px; object-fit: cover; border-radius: var(--rayon); }
.ligne-corps { flex: 1; min-width: 0; }
.ligne-nom { display: block; text-decoration: none; font-weight: 600; }
.ligne-option { display: block; font-size: .85rem; color: var(--texte-doux); }
.ligne-bas { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.quantite { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: var(--rayon); }
.quantite button { background: none; border: 0; width: 36px; height: 36px; font-size: 1.1rem; }
.quantite span { min-width: 24px; text-align: center; }
.ligne-retirer { background: none; border: 0; padding: 6px 0 0; font-size: .8rem; color: var(--texte-doux); text-decoration: underline; }
.panier-vide { text-align: center; padding: 40px 10px; }
div.page-panier, .ck, .merci { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.panier-total { max-width: 420px; margin: 20px 0 0 auto; }
.merci { max-width: 640px; text-align: center; padding-top: 64px; }

/* Barre d'achat collée */
.barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--bord); transform: translateY(110%); transition: transform .2s; }
.barre-achat.visible { transform: none; }
.barre-achat-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .85rem; }
.barre-achat-texte span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-achat button { width: auto; padding: 12px 22px; min-height: 44px; }
@media (max-width: 899px) { .barre-achat { display: flex; } .page-produit { padding-bottom: 84px; } }

/* Bloc d'achat */
.achat-option { border: 0; padding: 0; margin: 0 0 14px; }
.achat-option legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.achat-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.achat-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.achat-choix span { display: block; min-width: 48px; min-height: 44px; padding: 10px 12px; text-align: center; border: 1px solid var(--bord); border-radius: var(--rayon); cursor: pointer; }
.achat-choix input:checked + span { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.achat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.achat-erreur { color: #a4262c; font-size: .9rem; margin: 0 0 10px; }
.fiche-infos { margin: 0; }
.fiche-infos > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.fiche-infos dt { color: var(--texte-doux); }
.fiche-infos dd { margin: 0; text-align: right; }
.bloc-conformite { font-size: .85rem; color: var(--texte-doux); }
.bloc-conformite p { margin-bottom: .5em; }
.avertissements { border: 1px solid #c98a00; background: #fff8e6; color: #5a4300; padding: 10px 12px; border-radius: var(--rayon); font-size: .9rem; margin: 12px 0; }
.avertissements p { margin: 0; font-weight: 600; }
.avertissements p + p { margin-top: 6px; }

/* Bas de pied de page */
.pied-legal { font-size: .82rem; }
.pied-legal p { margin: 0 0 8px; }
.grille-vide { padding: 28px 0; }
.logos-paiement { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.logos-paiement svg { width: 42px; height: 26px; }
.lien-retractation { font-weight: 600; text-decoration: underline; }

/* Recherche */
.recherche { position: fixed; inset: 0; z-index: 80; background: var(--fond); padding: 16px; overflow-y: auto; }
.recherche-barre { display: flex; gap: 8px; max-width: 720px; margin: 0 auto 16px; align-items: center; }
.recherche-barre input { flex: 1; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.recherche-barre button { background: none; border: 0; font-size: 1.8rem; line-height: 1; padding: 4px 8px; }
.recherche-resultats { max-width: 720px; margin: 0 auto; }
.recherche-resultat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bord); text-decoration: none; }
.recherche-resultat img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--rayon); }
.recherche-resultat span { flex: 1; min-width: 0; }

/* Textes légaux */
.legal { max-width: 780px; margin: 0 auto; padding: 40px 16px 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.25rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.legal li { margin-bottom: .35em; }
.legal a { text-decoration: underline; }
.legal-intro { font-size: 1.1rem; color: var(--texte-doux); }
.legal table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--bord); }
.legal .tableau { overflow-x: auto; }
.legal-mise-a-jour { font-size: .85rem; color: var(--texte-doux); margin-top: 2.5em; }
.encadre { border: 1px solid var(--bord); background: var(--fond-2); padding: 16px 18px; border-radius: var(--rayon); margin: 1em 0; font-size: .95rem; }
.faq details { border-bottom: 1px solid var(--bord); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details div { padding-top: 10px; }

/* Formulaires */
.formulaire label, .ck-form label { display: block; margin-bottom: 14px; font-size: .92rem; font-weight: 600; }
.formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select,
.ck-form input:not([type="checkbox"]), .ck-form select {
  display: block; width: 100%; margin-top: 6px; padding: 12px; font-weight: 400; font-size: 16px; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.bouton-secondaire { width: auto !important; margin-top: 8px; background: none !important; color: var(--texte) !important; border: 1px solid var(--bord) !important; }
.form-message { font-size: .92rem; margin: 10px 0 0; min-height: 1.2em; }
.form-message.ok { color: #1c6b3c; }
.form-message.erreur { color: #a4262c; }
.contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grille { grid-template-columns: 1fr 1.3fr; } }
.newsletter-note { font-size: .78rem; margin: 8px 0 0; color: var(--texte-doux); }

/* Commande */
.ck h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.ck h2 { font-size: 1.1rem; }
.ck-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.ck-resume { order: -1; background: var(--fond-2); padding: 16px; border-radius: var(--rayon); align-self: start; }
@media (min-width: 900px) { .ck-grille { grid-template-columns: 1.3fr 1fr; } .ck-resume { order: 0; position: sticky; top: 20px; } }
.ck-form section { margin-bottom: 26px; }
.ck-duo { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ck-ligne { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.ck-ligne img { width: 56px; height: 74px; object-fit: cover; border-radius: var(--rayon); }
.ck-ligne div { flex: 1; min-width: 0; }
.ck-ligne span, .ck-ligne small { display: block; }
.ck-ligne small { color: var(--texte-doux); }
.ck-totaux { border-top: 1px solid var(--bord); margin-top: 8px; padding-top: 10px; }
.ck-totaux > div { display: flex; justify-content: space-between; padding: 3px 0; }
.ck-total { font-size: 1.15rem; font-weight: 600; margin-top: 6px; }
.ck-securite, .ck-note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0; }
.ck-indisponible { padding: 14px; background: var(--fond-2); border-radius: var(--rayon); }
.ck-form .ck-cgv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.ck-cgv input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
[data-payer]:disabled { opacity: .72; cursor: not-allowed; }

/* Consentement */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 480px; margin: 0 auto; background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); font-size: .9rem; }
.consent p { margin-bottom: 10px; }
.consent div { display: flex; gap: 8px; }
.consent button { flex: 1; padding: 10px; border: 1px solid var(--texte); background: var(--fond); border-radius: var(--rayon); }

@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-500.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-500i.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/courier-prime-400.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/courier-prime-700.woff2) format("woff2")}

/* ==========================================================================
   Nokrav : le patron de couture.
   Papier kraft dessous, papier calque pointé dessus, pièces en papier blanc.
   Rouge tracé pour les lignes de couture et les crans, bleu craie pour les
   cotes et le droit-fil, encre pour le texte. Bodoni pour les titres,
   Courier Prime pour tout ce qui est tapé à la machine.
   ========================================================================== */
:root {
  --kraft: #e9dcc3; --kraft-fonce: #dfcda9; --calque: #f7f1e3; --papier: #fffdf8;
  --rouge: #c8102e; --rouge-fonce: #a30d25; --craie: #2b4a8b; --encre: #1d1d1b;
  --fond: var(--kraft); --fond-2: var(--calque); --texte: var(--encre); --texte-doux: #5a5246;
  --accent: var(--rouge); --accent-texte: #fffdf8; --bord: rgba(29, 29, 27, .28); --rayon: 2px;
  --police-titre: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --police-texte: "Courier Prime", "Courier New", Courier, monospace;
  --trait: rgba(29, 29, 27, .55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .16 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --points: radial-gradient(circle, rgba(43, 74, 139, .22) 1px, transparent 1.5px);
  --gouttiere: 16px;
}

/* ------------------------------------------------------------------ socle */
html { background: var(--kraft); }
body {
  background: var(--kraft) var(--grain); font-size: 1.0625rem; line-height: 1.62;
  font-family: var(--police-texte); color: var(--encre);
}
h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--rouge); color: var(--papier); }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
main { display: block; min-height: 50vh; }
ol { list-style: none; margin: 0; padding: 0; }
.calque { background: var(--calque) var(--points); background-size: 18px 18px; }

/* Boutons : étiquette tapée à la machine, rouge tracé, piqûre intérieure. */
.bouton, .achat-bouton, .tiroir-commander, [data-payer], .formulaire button[type="submit"], .formulaire [data-confirmer], .barre-achat button {
  font-family: var(--police-texte); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .95rem;
  background: var(--rouge); color: var(--papier); border: 0; border-radius: var(--rayon);
  outline: 1px dashed rgba(255, 253, 248, .75); outline-offset: -6px; min-height: 52px; padding: 15px 24px;
  transition: background-color .2s;
}
.bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bouton:hover, .achat-bouton:hover, .tiroir-commander:hover, [data-payer]:hover:not(:disabled), .formulaire button[type="submit"]:hover, .barre-achat button:hover { background: var(--rouge-fonce); }
.bouton:focus-visible, .achat-bouton:focus-visible, .tiroir-commander:focus-visible, [data-payer]:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.bouton-trait { background: transparent; color: var(--encre); outline: 0; box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton-trait:hover { background: var(--papier); }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--rouge-fonce); text-decoration: underline dashed 1px; text-underline-offset: 4px; }

/* La cote : ligne de mesure bleu craie, butées aux deux bouts. */
.cote {
  display: inline-flex; align-items: center; justify-content: center; min-width: 230px; height: 16px; margin: 0 0 14px;
  color: var(--craie); border-left: 1.5px solid; border-right: 1.5px solid;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; line-height: 1;
}
.cote span { background: var(--kraft); padding: 0 10px; }

/* ------------------------------------------- la pièce de patron (cartes) */
.trace { position: absolute; top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); overflow: visible; pointer-events: none; z-index: 0; }
.trace rect {
  fill: none; stroke: var(--rouge); stroke-width: 1.3;
  stroke-dasharray: .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 .55 .45 0 100;
}
.trace-fixe rect { stroke-dasharray: 7 5; stroke-width: 1.2; }
@keyframes tracer { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.piece:hover .trace rect, .piece:focus-within .trace rect, .coupe-encart:hover .trace rect, .coupe-encart:focus-visible .trace rect { animation: tracer .9s cubic-bezier(.3, .6, .3, 1); }
.crans { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.crans i { position: absolute; width: 11px; height: 8px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.crans .cran-h { top: -1px; left: 34%; }
.crans .cran-b { bottom: -1px; left: 62%; transform: rotate(180deg); }
.crans .cran-g { left: -3px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.crans .cran-d { right: -3px; top: 42%; transform: translateY(-50%) rotate(90deg); }

.piece { position: relative; background: var(--papier); box-shadow: 0 0 0 1px var(--trait); padding: 12px; }
.piece-lien { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.piece-no { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rouge-fonce); padding: 0 0 7px; }
.piece-photo { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--kraft); }
.piece-photo img { width: 100%; height: 100%; object-fit: cover; }
.piece-nom { font-size: 1.12rem; line-height: 1.15; margin: 10px 0 8px; hyphens: manual; }
.piece-bas { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.piece-prix { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.piece-coupe { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--craie); border: 1px dashed var(--craie); padding: 1px 6px; white-space: nowrap; }
.piece-lien:focus-visible { outline-offset: 4px; }

/* Droit-fil : flèche à deux pointes, bleu craie. */
.droit-fil { position: absolute; right: 18px; top: 16%; height: 46%; width: 16px; display: flex; flex-direction: column; align-items: center; pointer-events: none; color: var(--craie); }
.droit-fil svg { width: 12px; height: 100%; overflow: visible; }
.droit-fil path { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.droit-fil span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); background: var(--calque); padding: 1px 6px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* ------------------------------------------------------------------ entête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(247, 241, 227, .97); }
.entete-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px var(--gouttiere); min-height: 58px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--encre); text-decoration: none; min-height: 44px; }
.logo-p { width: 28px; height: 34px; flex: none; overflow: visible; }
.logo-fut { fill: var(--encre); }
.logo-panse { fill: none; stroke: var(--rouge); stroke-width: 2.6; stroke-dasharray: 3.4 2.4; }
.logo-cran { fill: var(--rouge); }
.logo-nom { font-family: var(--police-titre); font-size: .98rem; text-transform: uppercase; letter-spacing: .22em; padding-top: 3px; }
.nav { display: none; }
.entete-actions { margin-left: auto; display: flex; align-items: center; }
.ico { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--encre); font-size: .9rem; }
.icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icone-rabat { stroke: var(--rouge); stroke-dasharray: 2.4 1.8; }
.ico-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compteur { position: absolute; top: 3px; right: 0; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: var(--rouge); color: var(--papier); font-size: .7rem; font-weight: 700; line-height: 19px; text-align: center; }
.compteur[data-n="0"] { background: var(--kraft); color: var(--texte-doux); }
.ruban { display: block; width: 100%; height: 18px; border-top: 1px solid rgba(29, 29, 27, .18); border-bottom: 1px solid rgba(29, 29, 27, .18); }
.ruban-fond { fill: #f1e5c8; }
#ruban-mm path, .ruban-longs { stroke: rgba(29, 29, 27, .5); stroke-width: 1; fill: none; }
.ruban-longs { stroke: rgba(29, 29, 27, .7); }
.ruban text { font-family: var(--police-texte); font-size: 7.5px; fill: var(--rouge-fonce); }
.entete-leger .entete-in { justify-content: space-between; padding-right: var(--gouttiere); }
.entete-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .92rem; color: var(--encre); }

/* Le menu mobile s'ouvre comme une pochette de patron : rabat en pointe en bas. */
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 75; max-height: 100dvh; overflow-y: auto;
  background: var(--kraft) var(--grain); padding: 14px var(--gouttiere) 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), 50% 100%, 0 calc(100% - 38px));
  transform: translateY(-105%); transition: transform .34s cubic-bezier(.2, .7, .2, 1);
}
.menu.ouvert { transform: none; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--rouge); }
.menu-ref { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rouge-fonce); }
.menu-fermer { width: 44px; height: 44px; flex: none; background: var(--papier); border: 1px solid var(--trait); border-radius: 50%; font-size: 1.6rem; line-height: 1; color: var(--encre); }
.menu-liste li a { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 8px; padding: 13px 0; border-bottom: 1px dashed rgba(29, 29, 27, .28); color: var(--encre); text-decoration: none; }
.menu-lettre { font-family: var(--police-titre); font-style: italic; font-size: 1.3rem; color: var(--rouge-fonce); }
.menu-nom { font-family: var(--police-titre); font-size: 1.55rem; line-height: 1.1; }
.menu-compte { font-size: .8rem; color: var(--texte-doux); }
.menu-aide { margin-top: 12px; }
.menu-aide a { display: block; padding: 10px 0; color: var(--encre); }
.menu-promesse { margin: 10px 0 0; font-size: .82rem; color: var(--texte-doux); }
.menu-rabat { height: 64px; margin: 6px calc(-1 * var(--gouttiere)) 0; background:
  linear-gradient(to top right, transparent calc(50% - 1px), rgba(29, 29, 27, .3) 50%, transparent calc(50% + 1px)) left bottom / 50% 38px no-repeat,
  linear-gradient(to top left, transparent calc(50% - 1px), rgba(29, 29, 27, .3) 50%, transparent calc(50% + 1px)) right bottom / 50% 38px no-repeat; }

/* ------------------------------------------------------- 1. la pochette */
.pochette { max-width: 1180px; margin: 14px auto 0; padding: 0 var(--gouttiere); }
.pochette-bande { display: flex; justify-content: space-between; gap: 8px; margin: 0; background: var(--rouge); color: var(--papier); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 7px 12px; }
.pochette-bande span:first-child { display: none; }
.pochette-corps { position: relative; background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); padding: 14px 16px 18px; }
.pochette-sur { text-wrap: balance; margin: 0 0 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rouge-fonce); }
.pochette h1 { font-size: clamp(2rem, 8.6vw, 4.5rem); line-height: 1.02; margin: 0 0 14px; }
.pochette h1 em { color: var(--rouge); }
.pochette-photo { position: relative; margin: 0; background: var(--papier); padding: 7px; box-shadow: 0 0 0 1px var(--trait); }
.pochette-photo-lien { display: block; }
.pochette-photo img { width: 100%; aspect-ratio: 10 / 11; object-fit: cover; object-position: 50% 22%; }
.pochette-photo figcaption { position: absolute; left: 16px; bottom: 16px; right: 56px; pointer-events: none; }
.pochette-photo figcaption a { pointer-events: auto; display: inline-block; background: var(--calque); border: 1px dashed var(--rouge); padding: 4px 9px; font-size: .78rem; letter-spacing: .03em; color: var(--encre); text-decoration: none; }
.pochette-photo figcaption strong { color: var(--rouge-fonce); white-space: nowrap; }
.pochette-photo figcaption a:hover { border-style: solid; }
.pochette-action { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pochette-action .bouton { width: 100%; }
.pochette-promesse { text-wrap: balance; margin: 0; font-size: .84rem; color: var(--texte-doux); text-align: center; }
.pochette-liste { margin-top: 18px; border-top: 1.5px dashed var(--rouge); padding-top: 10px; }
.pochette-liste-titre { margin: 0 0 2px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rouge-fonce); }
.pochette-liste li a { display: flex; align-items: baseline; gap: 10px; min-height: 46px; padding: 9px 0; color: var(--encre); text-decoration: none; }
.pl-lettre { width: 20px; font-family: var(--police-titre); font-style: italic; font-size: 1.3rem; color: var(--rouge); }
.pl-nom { font-family: var(--police-titre); font-size: 1.32rem; }
.pl-points { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(29, 29, 27, .35); transform: translateY(-5px); }
.pl-compte { font-size: .84rem; white-space: nowrap; }
.pochette-liste li a:hover .pl-nom { color: var(--rouge-fonce); }
.pochette-fournitures { margin: 12px 0 0; font-size: .86rem; color: var(--texte-doux); }
.pochette-fournitures span { font-weight: 700; color: var(--encre); }

/* -------------------------------------------------------- blocs de l'accueil */
.bloc { max-width: 1180px; margin: 64px auto 0; padding: 0 var(--gouttiere); }
.bloc-tete { max-width: 660px; margin-bottom: 22px; }
.bloc-tete h2 { font-size: clamp(2rem, 7.4vw, 3.3rem); line-height: 1.05; margin: 0 0 10px; }
.bloc-tete p { margin: 0; color: var(--texte-doux); font-size: .98rem; }

/* 2. Les pièces à assembler */
.assemblage-liste { display: grid; gap: 0; }
.assemblage-item + .assemblage-item::before { content: "+"; display: block; text-align: center; font-family: var(--police-titre); font-size: 2.1rem; line-height: 1; color: var(--rouge); padding: 8px 0 10px; }
.assemblage-num { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--craie); }
.assemblage-num strong { font-size: 1rem; color: var(--rouge-fonce); margin-right: 4px; }
.piece-assemblage .piece-lien { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; }
.piece-assemblage .piece-photo { grid-row: 1 / 4; grid-column: 1; }
.piece-assemblage .piece-no { grid-column: 2; padding-top: 4px; }
.piece-assemblage .piece-nom { grid-column: 2; font-size: 1.45rem; margin: 2px 0 10px; }
.piece-assemblage .piece-bas { grid-column: 2; align-self: end; flex-direction: column; align-items: flex-start; }
.piece-assemblage .piece-prix { font-size: 1.15rem; }
.assemblage-total { margin-top: 22px; border-top: 2px solid var(--encre); padding-top: 12px; }
.assemblage-total p:first-child { margin: 0; font-family: var(--police-titre); font-size: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.assemblage-total p:first-child::before { content: "="; color: var(--rouge); }
.assemblage-total strong { font-family: var(--police-texte); font-weight: 700; font-size: 1.6rem; color: var(--rouge-fonce); white-space: nowrap; }
.assemblage-note { margin: 6px 0 0; font-size: .9rem; color: var(--texte-doux); }

/* 3. Le tableau des mesures : le dos de la pochette, sur papier quadrillé. */
.mesures-feuille {
  position: relative; padding: 24px 16px 20px; box-shadow: 0 0 0 1px rgba(43, 74, 139, .45);
  background: var(--calque);
  background-image: linear-gradient(rgba(43, 74, 139, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 74, 139, .11) 1px, transparent 1px);
  background-size: 100% 20px, 20px 100%;
}
.mesures-feuille .crans i { background: var(--craie); }
.mesures-feuille .cote span { background: var(--calque); }
.mesures-grille { display: grid; gap: 18px; }
.mesures-corps { margin: 0; display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.mesures-corps svg { width: 92px; height: auto; overflow: visible; }
.corps-trait { fill: var(--papier); stroke: var(--encre); stroke-width: 1.2; }
.corps-mesure { fill: none; stroke: var(--craie); stroke-width: 1.6; stroke-dasharray: 4 3; }
.mesures-corps text { font-family: var(--police-texte); font-size: 12px; font-weight: 700; fill: var(--craie); }
.mesures-corps ol li { font-size: .9rem; line-height: 1.4; padding: 4px 0; }
.mesures-corps strong { color: var(--craie); }
.mesures-tableau table { width: 100%; border-collapse: collapse; background: rgba(255, 253, 248, .7); font-size: .9rem; }
.mesures-tableau th, .mesures-tableau td { padding: 9px 4px; text-align: center; border-bottom: 1px solid rgba(43, 74, 139, .28); white-space: nowrap; }
.mesures-tableau thead th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--craie); font-weight: 700; border-bottom: 1.5px solid var(--craie); white-space: normal; }
.mesures-tableau tbody th { font-family: var(--police-titre); font-weight: 500; font-size: 1.25rem; color: var(--rouge-fonce); }
.mesures-tableau tbody tr:nth-child(even) { background: rgba(43, 74, 139, .05); }
.mesures-unite { margin: 10px 0 0; font-size: .84rem; color: var(--texte-doux); }

/* 4. La coupe, en trois mots */
.coupes-liste { display: grid; gap: 14px; }
.coupe-encart { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 18px 18px 18px 14px; background: var(--papier); box-shadow: 0 0 0 1px var(--trait); color: var(--encre); text-decoration: none; height: 100%; }
.patron-dessin { width: 84px; height: auto; overflow: visible; }
.patron-coupe { fill: var(--calque); stroke: var(--encre); stroke-width: 1; }
.patron-couture { fill: none; stroke: var(--rouge); stroke-width: 1.3; stroke-dasharray: 4 3; }
.patron-fil { fill: none; stroke: var(--craie); stroke-width: 1.3; }
.patron-cran { fill: var(--rouge); }
.patron-note { font-family: var(--police-texte); font-size: 7.5px; fill: var(--craie); letter-spacing: .06em; }
.coupe-texte { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.coupe-mot { font-family: var(--police-titre); font-size: 2rem; line-height: 1; }
.coupe-phrase { font-size: .9rem; line-height: 1.45; color: var(--texte-doux); }
.coupe-compte { font-weight: 700; font-size: .88rem; color: var(--rouge-fonce); }
.coupe-encart:hover .coupe-mot { color: var(--rouge-fonce); }

/* 5. Repères : lignes de couture pointillées */
.reperes-liste { border-top: 1px solid var(--trait); }
.reperes-liste li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(29, 29, 27, .14); }
.repere-point { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--rouge); background: radial-gradient(circle, var(--rouge) 2px, transparent 2.5px); }
.repere-texte { flex: 0 1 auto; font-size: 1.02rem; }
.repere-ligne { flex: 1 1 24px; min-width: 24px; border-top: 2px dashed var(--rouge); }
.repere-lettre { flex: none; font-size: .78rem; color: var(--craie); letter-spacing: .1em; }
.reperes-notice { margin: 18px 0 0; font-size: .92rem; color: var(--texte-doux); }
.reperes-notice a { color: var(--rouge-fonce); font-weight: 700; display: inline-block; padding: 8px 0; }

/* --------------------------------------------- planches : boutique, rayons */
.planche { max-width: 1240px; margin: 0 auto; padding: 18px var(--gouttiere) 24px; }
.planche-ref { text-wrap: balance; margin: 0 0 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rouge-fonce); }
.planche-tete h1 { font-size: clamp(2.4rem, 10vw, 4.6rem); line-height: 1; margin: 0 0 8px; }
.planche-accroche { margin: 0; max-width: 620px; color: var(--texte-doux); }
.onglets { display: flex; gap: 8px; overflow-x: auto; margin: 16px calc(-1 * var(--gouttiere)) 0; padding: 2px var(--gouttiere) 6px; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--calque); box-shadow: inset 0 0 0 1px var(--trait); color: var(--encre); text-decoration: none; font-size: .92rem; }
.onglet-lettre { font-family: var(--police-titre); font-style: italic; color: var(--rouge-fonce); margin-right: 7px; font-size: 1.05rem; }
.onglets a[aria-current="page"] { background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--rouge); color: var(--rouge-fonce); font-weight: 700; }
.outils { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; padding: 12px 0; border-top: 1.5px dashed rgba(200, 16, 46, .7); border-bottom: 1.5px dashed rgba(200, 16, 46, .7); }
.outils-coupes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.outils-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--craie); margin-right: 2px; }
.filtre { min-height: 44px; padding: 8px 16px; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); font-size: .95rem; color: var(--encre); }
.filtre:hover { border-color: var(--rouge); }
.filtre.actif { background: var(--rouge); border-color: var(--rouge); color: var(--papier); font-weight: 700; }
.outils-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.outils-compte { margin: 0; font-size: .9rem; }
.outils-tri { display: flex; align-items: center; gap: 8px; }
.outils-tri span { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--craie); }
.outils-tri select { min-height: 44px; max-width: 200px; padding: 8px 10px; font-size: 16px; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre); }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px; background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px rgba(29, 29, 27, .22); }
.grille .piece { padding: 12px; }
.grille-vide { padding: 26px 18px; margin-top: 12px; background: var(--papier); border: 1.5px dashed var(--rouge); }
.grille-vide p { margin: 0 0 14px; }
.grille-vide strong { font-family: var(--police-titre); font-weight: 500; font-size: 1.25rem; display: block; margin-bottom: 4px; }

/* --------------------------------------------------------- fiche produit */
.fiche-page { max-width: 1240px; margin: 0 auto; padding: 6px var(--gouttiere) 24px; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .8rem; color: var(--texte-doux); margin-bottom: 4px; }
.fil a { color: var(--encre); display: inline-block; padding: 10px 0; }
.fiche-vues { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere) 4px; scrollbar-width: none; }
.fiche-vues::-webkit-scrollbar { display: none; }
.vue { position: relative; flex: 0 0 84%; scroll-snap-align: center; margin: 0; background: var(--papier); padding: 7px; box-shadow: 0 0 0 1px var(--trait); }
.vue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.vue figcaption { position: absolute; left: 16px; top: 16px; background: var(--calque); border: 1px dashed var(--rouge); padding: 2px 8px; font-size: .72rem; letter-spacing: .04em; }
.fiche-technique { position: relative; margin-top: 18px; padding: 26px 20px 20px; background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); }
.fiche-technique > *:not(.trace):not(.crans) { position: relative; z-index: 2; }
.fiche-ref { margin: 0 0 8px; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rouge-fonce); }
.fiche-titre { font-size: clamp(2.1rem, 8vw, 3.1rem); line-height: 1.04; margin: 0 0 14px; }
.fiche-no { display: block; font-family: var(--police-texte); font-size: .9rem; letter-spacing: .08em; color: var(--craie); margin-bottom: 6px; }
.fiche-sur { color: var(--texte-doux); }
.fiche-cotes { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 16px; border-top: 1.5px solid var(--craie); }
.fiche-cotes div { padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(43, 74, 139, .28); }
.fiche-cotes div:nth-child(odd) { border-right: 1px solid rgba(43, 74, 139, .28); }
.fiche-cotes div:nth-child(even) { padding-left: 12px; }
.fiche-cotes dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--craie); }
.fiche-cotes dd { margin: 0; font-size: .92rem; line-height: 1.35; }
.fiche-prix { margin: 0 0 14px; font-size: 1.7rem; font-weight: 700; }
.fiche-prix small { font-size: .78rem; font-weight: 400; color: var(--texte-doux); }
.achat-option legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--craie); font-weight: 700; }
.achat-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.achat-choix span { min-width: 46px; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; background: var(--papier); border: 1px solid var(--trait); border-radius: 0; font-weight: 700; font-size: .95rem; }
.achat-choix span:hover { border-color: var(--rouge); }
.achat-choix input:checked + span { background: var(--rouge); border-color: var(--rouge); color: var(--papier); }
.achat-erreur { color: var(--rouge-fonce); font-weight: 700; }
.achat-guide { margin: 0 0 10px; }
.achat-guide a { display: inline-block; padding: 8px 0; font-size: .88rem; color: var(--craie); text-decoration: underline dashed 1px; }
.achat-bouton { width: 100%; letter-spacing: .06em; padding: 15px 12px; }
.fiche-promesses { margin: 14px 0 0; }
.fiche-promesses li { position: relative; padding: 5px 0 5px 26px; font-size: .88rem; }
.fiche-promesses li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; border-top: 2px dashed var(--rouge); }
.fiche-notes { margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--rouge); }
.fiche-notes h2 { font-family: var(--police-texte); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rouge-fonce); font-weight: 700; margin: 0 0 8px; }
.fiche-resume { font-family: var(--police-titre); font-style: italic; font-size: 1.28rem; line-height: 1.3; margin-bottom: 10px; }
.fiche-notes p { font-size: .96rem; }
.fiche-details li { position: relative; padding: 4px 0 4px 20px; font-size: .92rem; }
.fiche-details li::before { content: ""; position: absolute; left: 3px; top: .85em; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); }
.fiche-plus { border-top: 1px solid rgba(29, 29, 27, .22); }
.fiche-plus:last-child { border-bottom: 1px solid rgba(29, 29, 27, .22); }
.fiche-plus summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.fiche-plus summary::-webkit-details-marker { display: none; }
.fiche-plus summary::after { content: "+"; font-size: 1.3rem; color: var(--rouge); font-weight: 400; }
.fiche-plus[open] summary::after { content: "–"; }
.fiche-plus .fiche-infos, .fiche-plus .bloc-conformite { padding-bottom: 12px; font-size: .86rem; }
.fiche-infos > div { border-bottom: 1px dashed rgba(29, 29, 27, .22); }
.bloc-conformite { color: var(--texte-doux); }
.assemble { margin-top: 48px; }
.assemble .bloc-tete h2 { font-size: clamp(1.8rem, 6.4vw, 2.6rem); }
/* Sur mobile, les pièces à assembler défilent de côté : pas de carte orpheline sur une ligne. */
.assemble-grille { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); margin: 0 calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere) 8px; scrollbar-width: none; }
.assemble-grille::-webkit-scrollbar { display: none; }
.assemble-grille .piece { flex: 0 0 46%; scroll-snap-align: start; }
.barre-achat { background: var(--calque); border-top: 1.5px dashed var(--rouge); }
.barre-achat-texte span { font-family: var(--police-titre); font-size: 1rem; }
.barre-achat-texte strong { font-size: .95rem; }
.barre-achat button { outline-offset: -5px; padding: 12px 20px; }

/* ------------------------------------------------------------------ pied */
.pied { margin-top: 72px; }
.pied-coupe { max-width: 1240px; margin: 0 auto; padding: 0 var(--gouttiere); display: flex; align-items: center; gap: 10px; color: var(--texte-doux); font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; }
.pied-coupe::after { content: ""; flex: 1; border-top: 2px dashed rgba(29, 29, 27, .5); }
.ciseaux { width: 36px; height: 22px; flex: none; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; }
.pied-kraft { margin-top: 10px; background: var(--kraft-fonce) var(--grain); padding: 30px var(--gouttiere) 22px; }
.pied-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px; }
.pied-marque, .pied-lettre { grid-column: 1 / -1; }
.pied-col:nth-child(4) { grid-column: 1 / -1; }
.pied-col:nth-child(4) ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.pied-marque p { margin: 8px 0 0; font-size: .9rem; color: var(--texte-doux); max-width: 320px; }
.pied-titre { font-family: var(--police-texte); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rouge-fonce); font-weight: 700; margin: 0 0 4px; }
.pied-col a { display: inline-block; padding: 10px 0; color: var(--encre); font-size: .92rem; }
.pied-lettre p { margin: 0 0 10px; font-size: .9rem; }
.newsletter { display: grid; grid-template-columns: 1fr auto; gap: 0; }
.newsletter input[type="email"] { min-width: 0; min-height: 50px; padding: 12px; font-size: 16px; background: var(--papier); border: 1px solid var(--trait); border-right: 0; border-radius: 0; }
.newsletter button { min-height: 50px; padding: 0 16px; background: var(--rouge); color: var(--papier); border: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.newsletter .form-message, .newsletter .newsletter-note { grid-column: 1 / -1; }
.newsletter-note { color: var(--texte-doux); }
.newsletter-note a { color: var(--encre); }
.pied-legal { max-width: 1240px; margin: 26px auto 0; padding-top: 16px; border-top: 1.5px dashed rgba(29, 29, 27, .4); font-size: .82rem; }
.pied-legal-coord a, .pied-legal-liens a { color: var(--encre); }
.pied-legal-coord { overflow-wrap: anywhere; }
.lien-retractation { display: inline-block; padding: 8px 0; color: var(--rouge-fonce) !important; }
.logos-paiement { margin: 10px 0; }
.logos-paiement svg { width: 46px; height: 29px; }
.pied-leger { margin-top: 48px; }
.pied-leger .pied-kraft { padding-top: 18px; }
.pied-ligne { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0 18px; }
.pied-ligne a { display: inline-block; padding: 8px 0; font-size: .84rem; color: var(--encre); }

/* -------------------------------------- tiroir, panier, recherche, commande */
.voile { background: rgba(29, 29, 27, .38); }
.tiroir { background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: -1px 0 0 var(--trait); }
.tiroir-entete { background: var(--kraft) var(--grain); border-bottom: 1.5px dashed var(--rouge); padding: 12px 12px 12px 20px; }
.tiroir-entete h2 { font-size: 1.6rem; }
.tiroir-fermer { width: 44px; height: 44px; border-radius: 50%; background: var(--papier) !important; border: 1px solid var(--trait) !important; font-size: 1.5rem !important; padding: 0 !important; }
.ligne-panier { border-bottom: 1px dashed rgba(29, 29, 27, .3); padding: 14px 0; }
.ligne-panier img { border-radius: 0; box-shadow: 0 0 0 1px var(--trait); background: var(--papier); }
.ligne-nom { font-family: var(--police-titre); font-weight: 500; font-size: 1.12rem; line-height: 1.2; }
.ligne-option { font-size: .8rem; color: var(--craie); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.ligne-bas strong { font-size: 1rem; }
.quantite { border: 1px solid var(--trait); border-radius: 0; background: var(--papier); }
.quantite button { width: 44px; height: 44px; }
.ligne-retirer { padding: 10px 0 0; font-size: .8rem; color: var(--rouge-fonce); min-height: 34px; }
.tiroir-pied { background: var(--kraft) var(--grain); border-top: 1.5px dashed var(--rouge); }
.tiroir-ligne span { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.tiroir-ligne strong { font-size: 1.35rem; }
.tiroir-note { color: var(--texte-doux); }
.tiroir-voir { color: var(--encre); padding: 12px; }
.panier-vide { padding: 48px 12px; }
.panier-vide p { font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; line-height: 1.3; }
.panier-vide a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; background: var(--rouge); color: var(--papier); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .88rem; outline: 1px dashed rgba(255, 253, 248, .75); outline-offset: -6px; }
div.page-panier { max-width: 900px; padding: 24px var(--gouttiere) 24px; }
.page-panier h1 { font-size: clamp(2.3rem, 9vw, 3.6rem); margin-bottom: 14px; }
.page-panier [data-panier-page] { background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); padding: 6px 16px 18px; }
.panier-total { margin-top: 16px; }

.recherche { background: var(--calque) var(--points); background-size: 18px 18px; }
.recherche-barre input { border: 1px solid var(--encre); border-radius: 0; background: var(--papier); font-size: 17px; min-height: 52px; }
.recherche-barre button { width: 48px; height: 48px; }
[data-recherche-champ]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche-resultat { border-bottom: 1px dashed rgba(29, 29, 27, .3); color: var(--encre); }
.recherche-resultat img { border-radius: 0; box-shadow: 0 0 0 1px var(--trait); }
.recherche-resultat span { font-family: var(--police-titre); font-size: 1.15rem; }
.recherche-vide { font-family: var(--police-titre); font-style: italic; font-size: 1.2rem; }

.ck { padding: 20px var(--gouttiere) 24px; counter-reset: etape; }
.ck h1 { font-size: clamp(2.1rem, 8vw, 3.2rem); margin-bottom: 16px; }
.ck-form section { counter-increment: etape; position: relative; background: var(--papier); box-shadow: 0 0 0 1px var(--trait); padding: 18px 16px 6px; margin-bottom: 18px; }
.ck-form section h2 { font-size: 1.5rem; margin-bottom: 12px; }
.ck-form section h2::before { content: "Étape " counter(etape) " sur 4"; display: block; font-family: var(--police-texte); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-fonce); margin-bottom: 4px; }
.ck-form section.ck-valider { padding-top: 16px; padding-bottom: 16px; background: var(--calque); }
.ck-form section.ck-valider::before { content: "Étape 4 sur 4 · Valider"; display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-fonce); margin-bottom: 8px; }
.ck-form label, .formulaire label { font-size: .86rem; font-weight: 700; }
.ck-form input:not([type="checkbox"]), .ck-form select, .formulaire input:not([type="checkbox"]):not(.piege), .formulaire textarea, .formulaire select {
  border: 1px solid var(--trait); border-radius: 0; background: var(--papier); font-family: var(--police-texte); min-height: 48px;
}
.ck-form input:focus, .ck-form select:focus, .formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--rouge); outline-offset: 0; border-color: var(--rouge); }
.ck-cgv span { font-weight: 400; font-size: .9rem; }
.ck-cgv input { accent-color: var(--rouge); }
.ck-resume { background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); border-radius: 0; padding: 18px 16px; }
.ck-resume h2 { font-size: 1.5rem; }
.ck-ligne img { border-radius: 0; box-shadow: 0 0 0 1px var(--trait); }
.ck-ligne span { font-family: var(--police-titre); font-size: 1.05rem; line-height: 1.2; }
.ck-ligne small { font-size: .8rem; }
.ck-totaux { border-top: 1.5px dashed var(--rouge); }
.ck-total strong { font-size: 1.3rem; color: var(--rouge-fonce); }
.ck-indisponible { background: var(--calque); border: 1.5px dashed var(--rouge); border-radius: 0; font-size: .92rem; }
.ck-securite, .ck-note { color: var(--texte-doux); }

/* ------------------------------------- notices : pages légales et d'aide */
.legal.notice { position: relative; max-width: 820px; margin: 18px 10px 0; padding: 24px 18px 34px; background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); }
.notice-ref { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rouge-fonce); }
.legal .legal-entete { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--rouge); }
.legal h1 { font-size: clamp(2rem, 8.4vw, 3.2rem); line-height: 1.04; margin: 0; overflow-wrap: break-word; }
.legal-intro { color: var(--texte-doux); font-size: 1rem; margin: 12px 0 0; }
.notice-corps > .legal-intro:first-child { margin-top: 10px; }
.legal h2 { position: relative; font-size: 1.45rem; line-height: 1.15; margin-top: 1.8em; padding-left: 24px; }
.legal h2::before { content: ""; position: absolute; left: 0; top: .32em; width: 9px; height: 9px; border: 2px solid var(--rouge); border-radius: 50%; background: radial-gradient(circle, var(--rouge) 1.6px, transparent 2px); }
.legal h3 { font-family: var(--police-texte); font-weight: 700; font-size: .98rem; }
.legal p, .legal li { font-size: .96rem; }
.legal ul { list-style: none; padding-left: 0; }
.legal ul li { position: relative; padding-left: 22px; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; border-top: 2px dashed var(--rouge); }
.legal a { color: var(--rouge-fonce); }
.legal table { background: rgba(255, 253, 248, .75); font-size: .9rem; }
.legal th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--craie); border-bottom: 1.5px solid var(--craie); }
.legal td { border-bottom: 1px solid rgba(43, 74, 139, .25); }
.legal .tableau { margin: 0 -4px; }
.encadre { background: var(--papier); border: 1.5px dashed var(--rouge); border-radius: 0; }
.legal-mise-a-jour { color: var(--texte-doux); }
.notice-buste { float: right; width: 128px; margin: 12px 0 10px 14px; background: var(--papier); padding: 5px; box-shadow: 0 0 0 1px var(--trait); }
.faq details { border-bottom: 1px dashed rgba(29, 29, 27, .3); padding: 4px 0; }
.faq summary { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 0; list-style: none; font-family: var(--police-titre); font-weight: 500; font-size: 1.2rem; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; width: 18px; font-family: var(--police-texte); color: var(--rouge); font-weight: 700; }
.faq details[open] summary::before { content: "–"; }
.faq details div { padding: 0 0 12px 30px; }
.contact-infos h2, .formulaire h2 { padding-left: 0; margin-top: 0; }
.contact-infos h2::before, .formulaire h2::before { display: none; }
.contact-infos strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--craie); }
.formulaire { background: var(--papier); box-shadow: 0 0 0 1px var(--trait); padding: 18px 16px; }
.formulaire button[type="submit"], .formulaire [data-confirmer] { width: 100%; }
.bouton-secondaire { outline: 0 !important; min-height: 48px; }
.form-message.erreur { color: var(--rouge-fonce); }
.form-message.ok { color: #1f5b33; }

/* Notre histoire : la notice de la maison */
.notice-maison { max-width: 1100px; margin: 0 auto; padding: 22px var(--gouttiere) 0; }
.notice-tete { max-width: 760px; }
.notice-tete h1 { font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1; margin: 0 0 14px; }
.notice-chapo { font-family: var(--police-titre); font-style: italic; font-size: 1.35rem; line-height: 1.35; }
.notice-photo { margin: 20px 0; background: var(--papier); padding: 7px; box-shadow: 0 0 0 1px var(--trait); }
.notice-photo img { width: 100%; }
.notice-photo figcaption { font-size: .78rem; color: var(--texte-doux); padding: 8px 2px 2px; }
.notice-etapes { counter-reset: etape; }
.notice-etapes li { counter-increment: etape; padding: 18px 0; border-top: 1.5px dashed var(--rouge); }
.notice-etapes li::before { content: "Étape 0" counter(etape); display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--craie); margin-bottom: 4px; }
.notice-etapes h2 { font-size: 1.75rem; margin: 0 0 8px; }
.notice-etapes p { margin: 0; }
.notice-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 24px 0 0; }

/* 404 */
.introuvable { position: relative; max-width: 720px; margin: 28px 10px 0; padding: 28px 20px; background: var(--calque) var(--points); background-size: 18px 18px; box-shadow: 0 0 0 1px var(--trait); }
.introuvable h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1.04; }
.introuvable-liens { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 18px 0 0; }

/* ----------------------------------------------------------- 600 px et + */
@media (min-width: 600px) {
  .pochette-bande span:first-child { display: inline; }
  .pochette-action { flex-direction: row; align-items: center; gap: 18px; }
  .pochette-action .bouton { width: auto; }
  .pochette-promesse { text-align: left; }
  .coupes-liste { grid-template-columns: 1fr; }
  .notice-buste { width: 200px; }
}

/* ----------------------------------------------------------- 760 px et + */
@media (min-width: 760px) {
  :root { --gouttiere: 28px; }
  .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 18px; }
  .grille .piece { padding: 12px; }
  .piece-nom { font-size: 1.3rem; }
  .outils { flex-direction: row; align-items: center; justify-content: space-between; }
  .outils-bas { gap: 24px; }
  .assemble-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; gap: 18px; overflow: visible; margin: 0; padding: 0; }
  .mesures-feuille { padding: 34px 32px 30px; }
  .mesures-grille { grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
  .mesures-corps { grid-template-columns: 1fr; }
  .mesures-corps svg { width: 150px; margin: 0 auto 6px; }
  .mesures-tableau table { font-size: 1rem; }
  .mesures-tableau th, .mesures-tableau td { padding: 10px 8px; }
  .mesures-tableau thead th { font-size: .74rem; }
  .coupes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .coupe-encart { grid-template-columns: 92px 1fr; padding: 24px 22px 22px 18px; gap: 18px; }
  .patron-dessin { width: 92px; }
  .pied-in { gap: 26px 40px; }
  .achat-choix { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .legal.notice { margin: 36px auto 0; padding: 40px 44px 48px; }
  .introuvable { margin: 48px auto 0; padding: 40px 44px; }
  .ck-form section { padding: 22px 22px 8px; }
  .notice-etapes li { display: grid; grid-template-columns: 150px 1fr; column-gap: 24px; }
  .notice-etapes li::before { grid-row: 1 / 3; padding-top: 10px; }
}

/* ----------------------------------------------------------- 900 px et + */
@media (min-width: 900px) {
  .pochette-corps { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "photo texte" "photo suite"; column-gap: 52px; padding: 26px; }
  .pochette-photo { grid-area: photo; align-self: start; }
  .pochette-photo img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
  .pochette-texte { grid-area: texte; align-self: end; padding-top: 18px; }
  .pochette-suite { grid-area: suite; }
  .pochette h1 { margin-bottom: 18px; }
  .pochette-liste { max-width: 520px; }
  .bloc { margin-top: 104px; }
  .assemblage-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; }
  .assemblage-item { position: relative; display: flex; flex-direction: column; }
  .assemblage-item .piece { flex: 1; }
  .assemblage-item + .assemblage-item::before { position: absolute; left: -48px; top: 48%; width: 32px; padding: 0; }
  .piece-assemblage .piece-lien { display: flex; }
  .piece-assemblage .piece-nom { font-size: 1.5rem; margin: 12px 0 8px; }
  .piece-assemblage .piece-bas { flex-direction: row; align-items: center; align-self: stretch; }
  .assemblage-total { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
  .assemblage-total p:first-child { font-size: 1.9rem; }
  .assemblage-total strong { font-size: 2rem; }
  .fiche { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 44px; align-items: start; }
  .fiche-vues { display: grid; gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .vue { flex: none; }
  .fiche-technique { position: sticky; top: 96px; margin-top: 0; padding: 32px 30px 26px; }
  .barre-achat { display: none !important; }
  .page-produit { padding-bottom: 0; }
  .ck { max-width: 1120px; }
  .notice-maison { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 56px; }
  .notice-tete, .notice-photo-large, .notice-fin { grid-column: 1 / -1; }
  .notice-photo-large { max-width: 736px; }
  .notice-maison > .notice-photo:not(.notice-photo-large) { position: sticky; top: 100px; align-self: start; margin-top: 18px; }
  .notice-etapes li { grid-template-columns: 1fr; }
  .notice-etapes li::before { grid-row: auto; padding-top: 0; }
}

/* ---------------------------------------------------------- 1000 px et + */
@media (min-width: 1000px) {
  .entete-in { gap: 18px; padding-right: var(--gouttiere); }
  .nav { display: block; flex: 1; }
  .nav ul { display: flex; justify-content: center; align-items: center; }
  .nav li + li::before { content: "·"; color: var(--rouge); margin: 0 16px; font-size: 1.2rem; }
  .nav a { display: inline-block; padding: 10px 0; font-family: var(--police-titre); font-size: 1.15rem; color: var(--encre); text-decoration: none; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--rouge-fonce); text-decoration: underline dashed 1px; text-underline-offset: 6px; }
  .entete-actions { margin-left: 0; gap: 6px; }
  .ico { padding: 0 10px; }
  .ico-texte { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ico-panier .compteur { position: static; }
  .ico-menu { display: none; }
  .logo-p { width: 32px; height: 39px; }
  .logo-nom { font-size: 1.08rem; }
}

/* ---------------------------------------------------------- 1100 px et + */
@media (min-width: 1100px) {
  .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 22px; }
  .pied-in { grid-template-columns: 1.2fr .9fr .9fr 1fr 1.35fr; }
  .pied-marque, .pied-lettre, .pied-col:nth-child(4) { grid-column: auto; }
  .pied-col:nth-child(4) ul { display: block; }
}