:root{--e-3xs: 2px;--e-2xs: 4px;--e-xs: 8px;--e-sm: 12px;--e-md: 16px;--e-lg: 24px;--e-xl: 32px;--e-2xl: 48px;--e-3xl: 64px;--e-4xl: 96px;--e-5xl: 128px;--t-2xs: 11px;--t-xs: 12px;--t-sm: 13px;--t-base: 15px;--t-md: 16px;--t-lg: 18px;--t-xl: 22px;--t-2xl: 28px;--t-3xl: 36px;--t-4xl: 48px;--t-5xl: 64px;--c-fond: #F8F6F1;--c-fond2: #F1EEE6;--c-fond3: #E8E3D8;--c-surface: #FEFDF9;--c-surfaceInversee: #18211C;--c-bordure: #DED9CE;--c-bordure2: #C8C0B2;--c-encre: #17201B;--c-encre2: #566058;--c-encre3: #858A84;--c-accent: #315443;--c-accentClair: #426B57;--c-accentFonce: #213E31;--c-surAccent: #FFFDF7;--c-accentPale: #E1EAE3;--c-sable: #C8B59B;--c-sablePale: #EDE4D7;--c-laiton: #A07843;--c-lien: #315443;--c-succes: #296043;--c-succesPale: #E1ECE5;--c-attention: #86602E;--c-attentionPale: #F2E8D7;--c-critique: #8C3B31;--c-critiquePale: #F3E4E0;--c-voile: rgba(18, 25, 21, 0.58);--r-sm: 4px;--r-md: 8px;--r-lg: 12px;--r-rond: 999px;--o-carte: 0 1px 2px rgba(28, 27, 25, 0.04);--o-releve: 0 12px 32px rgba(23, 32, 27, 0.09);--o-drawer: 0 -16px 48px rgba(23, 32, 27, 0.20);--o-menu: 0 20px 56px rgba(23, 32, 27, 0.14);--o-achat: 0 -8px 24px rgba(23, 32, 27, 0.08);--tactile: 44px;--echantillon-taille: 200px;--l-contenu: 88rem;--l-texte: 42rem;--police: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--police-titre: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;--police-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--c-fond)}
body{margin:0;min-width:0;background:var(--c-fond);color:var(--c-encre);
  font-family:var(--police);font-size:var(--t-base);line-height:1.55;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
::selection{background:var(--c-accentPale);color:var(--c-accentFonce)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,h4{margin:0;color:var(--c-encre);font-family:var(--police-titre);
  font-weight:500;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{margin:0}
@media(min-width:30rem){h1{font-size:var(--t-4xl)}h2{font-size:var(--t-3xl)}}
@media(min-width:64rem){h1{font-size:var(--t-5xl)}}

/* Trame */
.enveloppe{width:100%;max-width:var(--l-contenu);margin:0 auto;padding:0 var(--e-md)}
.enveloppe.etroit{max-width:var(--l-texte)}
@media(min-width:48rem){.enveloppe{padding:0 var(--e-xl)}}
.pile{display:grid;gap:var(--e-md)}
.pile-lg{display:grid;gap:var(--e-lg)}
.pile-xl{display:grid;gap:var(--e-xl)}
.rangee{display:flex;align-items:center;gap:var(--e-xs);flex-wrap:wrap}
.pousse{flex:1}
.section{padding:var(--e-2xl) 0}
.section-grande{padding:var(--e-3xl) 0}
@media(min-width:48rem){.section{padding:var(--e-3xl) 0}.section-grande{padding:var(--e-4xl) 0}}
.mesure{max-width:var(--l-texte)}
.discret{color:var(--c-encre2);font-size:var(--t-sm)}
.mono{font-family:var(--police-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Le lien d'evitement est une cible comme une autre des qu'il a le focus :
   mesure a 135 x 39, il passait sous les 44. */
.saut{position:fixed;top:var(--e-xs);left:var(--e-xs);z-index:100;
  transform:translateY(-200%);background:var(--c-surface);padding:var(--e-xs) var(--e-sm);
  display:inline-flex;align-items:center;min-height:var(--tactile)}
.saut:focus{transform:none}
.signature{display:inline-flex;align-items:center;gap:var(--e-xs);font-size:var(--t-xs);
  font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.signature::before{content:'';width:var(--e-lg);height:1px;background:currentColor}
.sur-fonce{color:var(--c-surAccent)}

/* Bandeau et en-tete */
.bandeau{background:var(--c-surfaceInversee);color:var(--c-surAccent);
  font-size:var(--t-xs);text-align:center;padding:var(--e-xs) var(--e-md);letter-spacing:.015em}
.entete{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--c-surface) 94%,transparent);
  border-bottom:1px solid var(--c-bordure);backdrop-filter:blur(var(--e-md))}
.entete-barre{min-height:var(--e-3xl);display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--e-xs);padding:var(--e-xs) 0}
.entete-barre>.marque{grid-column:1;grid-row:1}
.entete-barre>.actions-entete{grid-column:2;grid-row:1}
.marque{display:flex;align-items:center;gap:var(--e-xs);min-width:0;min-height:var(--tactile)}
.marque-sceau{display:grid;place-items:center;flex:0 0 auto;width:var(--e-xl);height:var(--e-xl);
  border:1px solid var(--c-accent);border-radius:var(--r-rond);color:var(--c-accent);
  font-family:var(--police-titre);font-size:var(--t-md);font-style:italic}
.marque-texte{display:grid;line-height:1.05;min-width:0}
/* Le nom ne se coupe pas en deux lignes, mais il se tronque : sa colonne est un
   minmax(0,1fr), et sans overflow un nowrap deborde par-dessus les actions au
   lieu de reculer. Mesure a 320 px : il passait sous le panier. */
.marque-texte b{font-family:var(--police-titre);font-size:var(--t-lg);font-weight:550;
  letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marque-texte span{display:none;font-size:var(--t-2xs);color:var(--c-encre2);letter-spacing:.04em}
.actions-entete{display:flex;align-items:center;gap:var(--e-2xs)}
.action-entete{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--e-2xs);min-width:var(--tactile);min-height:var(--tactile);padding:0 var(--e-xs);
  border:0;background:transparent;color:var(--c-encre);cursor:pointer}
.action-entete:hover{color:var(--c-accent)}
.action-libelle{display:none;font-size:var(--t-sm)}
/* Le commutateur de langue : deux codes, celui qu'on lit etant marque. Pas de
   drapeau — un drapeau dit un pays, pas une langue, et l'anglais n'en a pas
   un seul. Pas de liste deroulante non plus : a deux entrees, elle demande
   deux gestes la ou un suffit, et cache la moitie de l'information. */
/* La hauteur tactile est portee par le segment, pas par le cadre : posee sur
   le cadre, la bordure la rogne de deux pixels et la cible passe sous 44.
   Dans la barre, le commutateur n'apparait qu'a partir de sm : en dessous, les
   66 px qu'il occupe passent par-dessus le nom de la maison, et c'est le tiroir
   du menu qui le porte. */
.actions-entete .langues{display:none}
.langues{display:inline-flex;align-items:stretch;
  border:1px solid var(--c-bordure);border-radius:var(--r-rond);overflow:hidden}
.langue{display:grid;place-items:center;min-width:var(--e-xl);min-height:var(--tactile);
  padding:0 var(--e-2xs);font-size:var(--t-2xs);font-weight:700;letter-spacing:.04em;
  color:var(--c-encre2)}
.langue:hover{color:var(--c-accent)}
.langue[aria-current]{background:var(--c-surfaceInversee);color:var(--c-surAccent)}
/* Dans le pied, la colonne est une grille de liens pleine largeur : sans
   justify-self, le commutateur s'etire sur toute la colonne et ne ressemble
   plus a un commutateur. Le selecteur double reprend la main sur .pied-colonne a,
   plus specifique que .langue. */
.langues-pied{justify-self:start;margin-top:var(--e-2xs);
  border-color:color-mix(in srgb,var(--c-surAccent) 28%,transparent)}
.langues-pied .langue{display:grid;place-items:center;min-width:var(--e-xl);
  font-size:var(--t-2xs);color:color-mix(in srgb,var(--c-surAccent) 68%,transparent)}
.navigation-mobile-langues{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-sm);margin-top:var(--e-lg)}
.navigation-mobile-langues>span{font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--c-encre2)}
@media(min-width:30rem){
  .actions-entete .langues{display:inline-flex}
  .navigation-mobile-langues{display:none}
}
.langues-pied .langue:hover{color:var(--c-surAccent)}
.langues-pied .langue[aria-current]{background:var(--c-surAccent);color:var(--c-surfaceInversee)}
.compteur-panier{position:absolute;top:0;right:0;display:grid;place-items:center;
  min-width:var(--e-md);height:var(--e-md);padding:0 var(--e-3xs);border-radius:var(--r-rond);
  background:var(--c-accent);color:var(--c-surAccent);font-size:var(--t-2xs);font-weight:700}
.icone{width:var(--e-md);height:var(--e-md);stroke:currentColor;stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Recherche */
.recherche{position:relative;grid-column:1/-1;grid-row:2;display:flex;min-width:0;margin-top:var(--e-2xs)}
.recherche .saisie{height:var(--tactile);padding-right:calc(var(--tactile) + var(--e-xs));
  border-radius:var(--r-rond);background:var(--c-fond);border-color:var(--c-bordure)}
/* Le bouton occupe toute la hauteur de la saisie : retire de quatre pixels de
   chaque cote, il tombait a 36 x 36, sous le seuil du doigt. Le rond colle
   maintenant aux bords, ce qui se voit d'autant moins qu'il est rond. */
.recherche-bouton{position:absolute;right:0;top:0;width:var(--tactile);
  height:var(--tactile);padding:0;border:0;border-radius:var(--r-rond);
  background:var(--c-accent);color:var(--c-surAccent);display:grid;place-items:center;cursor:pointer}
.recherche-bouton:hover{background:var(--c-accentClair)}
.recherche-resultats{position:absolute;left:0;right:0;top:calc(100% + var(--e-xs));z-index:80;
  background:var(--c-surface);border:1px solid var(--c-bordure);box-shadow:var(--o-menu);
  border-radius:var(--r-md);padding:var(--e-2xs);max-height:70svh;overflow:auto}
.recherche-resultats[hidden]{display:none}
/* Le mot d'attente vient de la page : la feuille est servie une fois pour les
   deux langues, et une phrase ecrite ici serait francaise partout. */
.recherche-resultats[aria-busy=true]::before{content:attr(data-attente);display:block;
  padding:var(--e-sm);color:var(--c-encre2);font-size:var(--t-sm)}
.suggestion{display:flex;align-items:center;justify-content:space-between;gap:var(--e-sm);
  min-height:var(--tactile);padding:var(--e-xs) var(--e-sm);border-radius:var(--r-sm)}
.suggestion:hover,.suggestion:focus{background:var(--c-fond2)}
.suggestion span{display:grid;min-width:0}
.suggestion b{font-size:var(--t-sm);font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggestion small{color:var(--c-encre2);font-size:var(--t-2xs);font-family:var(--police-mono)}
.suggestion strong{font-size:var(--t-sm);white-space:nowrap}
.suggestion-vide{padding:var(--e-sm);font-size:var(--t-sm);color:var(--c-encre2)}
@media(min-width:48rem){
  /* La recherche cede avant le nom de la maison : a 18rem de plancher, elle
     prenait sa place des que la barre se chargeait, et le nom se tronquait a
     1024 px alors que la recherche gardait 457 px. Mesure a 12rem : nom entier,
     recherche a 409 px. */
  .entete-barre{min-height:var(--e-3xl);grid-template-columns:auto minmax(12rem,34rem) auto;
    gap:var(--e-lg);padding:var(--e-sm) 0}
  .marque-sceau{width:var(--e-2xl);height:var(--e-2xl);font-size:var(--t-lg)}
  .marque-texte b{font-size:var(--t-xl)}
  .marque-texte span{display:block}
  .recherche{grid-column:auto;margin:0}
  .entete-barre>.marque,.entete-barre>.actions-entete,.recherche{grid-row:auto;grid-column:auto}
  .action-libelle{display:inline}
  .action-entete{padding:0 var(--e-sm)}
}

/* Navigation */
.navigation-bureau{display:none;border-top:1px solid var(--c-bordure)}
.mega-liste{display:flex;align-items:center;gap:var(--e-lg);list-style:none;padding:0;margin:0}
.mega-liste>li{position:static}
.mega-liste>li>a{display:inline-flex;align-items:center;min-height:var(--tactile);
  font-size:var(--t-sm);font-weight:560;color:var(--c-encre2)}
.mega-liste>li>a:hover,.mega-liste>li:focus-visible,.mega-liste>li:focus-within>a{color:var(--c-accent)}
.mega-liste>li>a[aria-current=page]{color:var(--c-accent);box-shadow:inset 0 -2px 0 var(--c-accent)}
.mega-volet{position:absolute;left:0;right:0;top:100%;z-index:50;visibility:hidden;opacity:0;
  transform:translateY(var(--e-xs));background:var(--c-surface);border-bottom:1px solid var(--c-bordure);
  box-shadow:var(--o-menu);padding:var(--e-xl) 0;pointer-events:none}
.mega-liste>li:hover .mega-volet,.mega-liste>li:focus-within .mega-volet{visibility:visible;
  opacity:1;transform:none;pointer-events:auto}
.mega-contenu{display:grid;grid-template-columns:14rem minmax(0,1fr) 14rem;gap:var(--e-xl)}
.mega-intro{display:grid;align-content:start;gap:var(--e-sm)}
.mega-intro h2{font-size:var(--t-2xl)}
.mega-intro p{font-size:var(--t-sm);color:var(--c-encre2)}
.mega-rayons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--e-xl)}
.mega-rayon{display:grid;grid-template-columns:1fr auto;gap:var(--e-3xs) var(--e-sm);
  align-content:center;min-height:var(--e-3xl);padding:var(--e-xs) 0;border-bottom:1px solid var(--c-bordure)}
.mega-rayon b{font-size:var(--t-sm)}
.mega-rayon span{grid-row:1/3;grid-column:2;color:var(--c-encre3);font-size:var(--t-xs)}
.mega-rayon small{color:var(--c-encre2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-rayon:hover b{color:var(--c-accent)}
.mega-service{display:grid;align-content:start;gap:var(--e-sm);padding:var(--e-md);
  background:var(--c-accentPale)}
.mega-service b{font-family:var(--police-titre);font-size:var(--t-lg);font-weight:550}
.mega-service p{font-size:var(--t-xs);color:var(--c-encre2)}
@media(min-width:64rem){.navigation-bureau{display:block}.menu-declencheur{display:none}}

/* Navigation mobile */
.navigation-mobile{position:fixed;inset:0;z-index:90;background:var(--c-voile);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
.navigation-mobile:target{opacity:1;visibility:visible;pointer-events:auto}
.navigation-mobile-corps{position:absolute;left:0;top:0;bottom:0;width:min(92vw,28rem);
  background:var(--c-surface);transform:translateX(-100%);transition:transform .3s ease;
  overflow-y:auto;padding:var(--e-md);padding-bottom:calc(var(--e-xl) + env(safe-area-inset-bottom))}
.navigation-mobile:target .navigation-mobile-corps{transform:none}
.navigation-mobile-tete{position:sticky;top:0;z-index:1;display:flex;align-items:center;
  justify-content:space-between;background:var(--c-surface);padding-bottom:var(--e-md)}
.navigation-mobile-tete b{font-family:var(--police-titre);font-size:var(--t-xl);font-weight:550}
.navigation-mobile-liste{display:grid;border-top:1px solid var(--c-bordure)}
.navigation-mobile-liste>a{display:grid;grid-template-columns:1fr auto;align-items:center;
  min-height:var(--e-3xl);gap:var(--e-sm);border-bottom:1px solid var(--c-bordure)}
.navigation-mobile-liste b{font-size:var(--t-md)}
.navigation-mobile-liste span{font-size:var(--t-xs);color:var(--c-encre3)}
.navigation-mobile-service{display:grid;gap:var(--e-sm);margin-top:var(--e-xl);padding:var(--e-md);
  background:var(--c-accentPale)}

/* Controles */
.saisie,select,textarea{font:inherit;font-size:var(--t-md);min-height:var(--tactile);
  padding:var(--e-xs) var(--e-sm);border:1px solid var(--c-bordure2);border-radius:var(--r-sm);
  background:var(--c-surface);color:var(--c-encre);width:100%;transition:border-color .18s,box-shadow .18s}
.saisie::placeholder{color:var(--c-encre3)}
.saisie:focus,select:focus,textarea:focus{border-color:var(--c-accent);outline:none;
  box-shadow:0 0 0 3px var(--c-accentPale)}
label{display:block;font-size:var(--t-sm);font-weight:560;color:var(--c-encre2);
  margin-bottom:var(--e-3xs)}
.bouton{font:inherit;font-size:var(--t-base);font-weight:620;min-height:var(--tactile);
  padding:0 var(--e-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--e-xs);
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--c-accent);
  color:var(--c-surAccent);cursor:pointer;text-align:center;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.bouton:hover{background:var(--c-accentClair);transform:translateY(-1px)}
.bouton:disabled{opacity:.48;cursor:not-allowed;transform:none}
.bouton.large{width:100%}
.bouton.clair{background:transparent;color:var(--c-encre);border-color:var(--c-bordure2)}
.bouton.clair:hover{background:var(--c-surface);border-color:var(--c-encre)}
.bouton.sur-fonce{background:var(--c-surAccent);color:var(--c-surfaceInversee)}
.bouton.nu{background:transparent;color:var(--c-encre2);border-color:transparent;padding:0 var(--e-xs)}
.bouton.nu:hover{background:var(--c-fond2);color:var(--c-encre);transform:none}
.bouton.sm{font-size:var(--t-sm);padding:0 var(--e-sm)}
.bouton .icone{width:var(--e-md);height:var(--e-md)}
@media(min-width:48rem){.bouton.sm{min-height:var(--e-xl)}}

/* Etiquettes */
.etiq{display:inline-flex;align-items:center;gap:var(--e-3xs);justify-self:start;width:fit-content;
  font-size:var(--t-2xs);font-weight:650;letter-spacing:.045em;text-transform:uppercase;
  padding:var(--e-3xs) var(--e-xs);border-radius:var(--r-rond);background:var(--c-fond3);
  color:var(--c-encre2);white-space:nowrap}
/* Sauf celle du stock sur la fiche : « Sur commande — delai sur demande » ne
   tient pas sur une ligne a 320 px, et son nowrap poussait tout le bloc d'achat
   a 312 px de min-content — la fiche debordait de huit pixels. Deux lignes
   valent mieux qu'un defilement horizontal. Mesure porte R. */
.achat-bloc .etiq{white-space:normal;text-wrap:balance}
.etiq.dispo{background:var(--c-succesPale);color:var(--c-succes)}
.etiq.commande{background:var(--c-attentionPale);color:var(--c-attention)}
.etiq.avant{background:var(--c-accentPale);color:var(--c-accent)}
a.etiq{min-height:var(--tactile);padding:0 var(--e-sm)}
@media(min-width:48rem){a.etiq{min-height:var(--e-xl);padding:0 var(--e-xs)}}

/* Visuels de matiere */
.matiere-visuel{position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--matiere,var(--c-sablePale));isolation:isolate}
.matiere-visuel::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.34;
  background-image:repeating-linear-gradient(92deg,rgba(255,255,255,.15) 0,
    rgba(255,255,255,.15) 1px,rgba(20,27,23,.08) 1px,rgba(20,27,23,.08) 2px)}
.matiere-visuel::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(23,32,27,.06)}
.matiere-visuel img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
/* L'echantillon se repete a sa definition d'origine — 200 px — au lieu d'etre
   agrandi jusqu'au flou. Un tissu est repetitif : c'est la representation la
   plus juste, et la seule qui reste nette sur un grand ecran. */
.matiere-visuel.echantillon{background-image:var(--echantillon);background-repeat:repeat;
  background-size:var(--echantillon-taille) var(--echantillon-taille)}
.matiere-lettres{position:relative;z-index:1;font-family:var(--police-titre);font-size:var(--t-xl);
  color:color-mix(in srgb,var(--c-encre) 70%,transparent);letter-spacing:-.02em;text-align:center;
  padding:var(--e-md)}
.pastille{display:inline-block;width:var(--e-md);height:var(--e-md);border-radius:var(--r-rond);
  border:1px solid var(--c-bordure2);background:var(--matiere,var(--c-fond3));flex:0 0 auto;
  overflow:hidden}
/* La pastille montre la matiere quand elle a ete photographiee. L'image
   remplit le rond : une vignette qui laisserait voir le fond ferait croire a
   une bordure claire sur un tissu fonce. */
.pastille img{display:block;width:100%;height:100%;object-fit:cover}

/* Cartes produit */
.grille{display:grid;grid-template-columns:1fr;gap:var(--e-lg) var(--e-sm)}
.carte{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--e-sm);min-width:0}
.carte-visuel{aspect-ratio:1/1;border-radius:var(--r-sm)}
.carte-corps{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--e-2xs) 0}
.carte-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-xs);width:100%}
.carte-nom{font-family:var(--police-titre);font-size:var(--t-lg);font-weight:550;line-height:1.16;
  overflow-wrap:anywhere}
.carte-ref{font-family:var(--police-mono);font-size:var(--t-2xs);color:var(--c-encre3);
  margin-top:var(--e-2xs)}
.carte-meta{display:flex;flex-wrap:wrap;gap:var(--e-3xs) var(--e-xs);font-size:var(--t-xs);
  color:var(--c-encre2);margin-top:var(--e-xs)}
.carte-meta span+span::before{content:'·';margin-right:var(--e-xs);color:var(--c-encre3)}
.carte-stock{margin-top:var(--e-xs)}
.carte-prix{display:block;font-size:var(--t-md);font-weight:680;white-space:nowrap;margin-top:auto;
  padding-top:var(--e-xs);font-variant-numeric:tabular-nums}
.carte-prix small{display:block;font-size:var(--t-2xs);font-weight:450;color:var(--c-encre2)}
.carte:hover .carte-visuel img{transform:scale(1.045)}
.carte:hover .carte-nom{color:var(--c-accent)}
@media(min-width:30rem){
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-xl) var(--e-md)}
  .carte{grid-template-columns:1fr;gap:var(--e-sm)}
  .carte-visuel{aspect-ratio:5/4}
  .carte-corps{min-height:10rem}
}
@media(min-width:48rem){.grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-xl) var(--e-lg)}}
@media(min-width:64rem){.grille{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Accueil */
.hero{position:relative;min-height:36rem;display:flex;align-items:flex-end;color:var(--c-surAccent);
  overflow:hidden;background:var(--c-surfaceInversee)}
.hero-media,.hero-media img,.hero-voile{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:68% center}
.hero-voile{background:linear-gradient(90deg,rgba(12,18,15,.92) 0%,rgba(12,18,15,.78) 42%,
  rgba(12,18,15,.22) 72%,rgba(12,18,15,.08) 100%)}
.hero-contenu{position:relative;z-index:2;width:100%;padding:var(--e-3xl) 0}
.hero-copie{display:grid;gap:var(--e-md);max-width:38rem}
.hero .signature{color:var(--c-surAccent);opacity:.82}
.hero h1{color:var(--c-surAccent);max-width:14ch;font-size:var(--t-4xl)}
.hero p{font-size:var(--t-md);color:color-mix(in srgb,var(--c-surAccent) 82%,transparent);
  max-width:34rem}
.hero-actions{display:flex;align-items:center;gap:var(--e-xs);flex-wrap:wrap;margin-top:var(--e-xs)}
.hero-secondaire{display:inline-flex;align-items:center;min-height:var(--tactile);padding:0 var(--e-xs);
  color:var(--c-surAccent);font-size:var(--t-sm);font-weight:600}
.hero-secondaire:hover{text-decoration:underline;text-underline-offset:var(--e-2xs)}
.hero-note{font-size:var(--t-xs);color:color-mix(in srgb,var(--c-surAccent) 68%,transparent)}
@media(min-width:48rem){
  .hero{min-height:calc(100svh - 9rem);align-items:center}
  .hero-contenu{padding:var(--e-4xl) 0}
  .hero h1{font-size:var(--t-5xl)}
}

.entete-section{display:flex;align-items:end;justify-content:space-between;gap:var(--e-lg);
  flex-wrap:wrap;margin-bottom:var(--e-xl)}
.entete-section-copie{display:grid;gap:var(--e-xs);max-width:var(--l-texte)}
.entete-section p{color:var(--c-encre2)}
.lien-texte{display:inline-flex;align-items:center;gap:var(--e-xs);min-height:var(--tactile);
  color:var(--c-accent);font-size:var(--t-sm);font-weight:650}
.lien-texte::after{content:'\2192';transition:transform .18s}
.lien-texte:hover::after{transform:translateX(var(--e-2xs))}

.familles-grille{display:grid;grid-template-columns:1fr;gap:var(--e-md)}
.tuile{position:relative;display:flex;align-items:flex-end;min-height:18rem;overflow:hidden;
  background:var(--c-fond3);color:var(--c-surAccent);isolation:isolate}
.tuile-media{position:absolute;inset:0;z-index:-2}
.tuile-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tuile-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(18,25,21,.80),rgba(18,25,21,.02) 68%)}
.tuile-copie{display:grid;gap:var(--e-2xs);width:100%;padding:var(--e-lg)}
.tuile b{font-family:var(--police-titre);font-size:var(--t-2xl);font-weight:550;line-height:1.05}
.tuile p{font-size:var(--t-sm);color:color-mix(in srgb,var(--c-surAccent) 78%,transparent);
  max-width:30rem}
.tuile .n{font-size:var(--t-xs);color:color-mix(in srgb,var(--c-surAccent) 66%,transparent)}
.tuile:hover .tuile-media img{transform:scale(1.045)}
@media(min-width:30rem){.familles-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){
  .familles-grille{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:13rem}
  .tuile{grid-column:span 4;min-height:0}
  .tuile.majeure{grid-column:span 8;grid-row:span 2}
  .tuile.haute{grid-column:span 4;grid-row:span 2}
}
.liens-rayons{display:grid;margin-top:var(--e-xl);border-top:1px solid var(--c-bordure)}
.lien-rayon{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--e-sm);
  min-height:var(--e-3xl);border-bottom:1px solid var(--c-bordure)}
.lien-rayon b{font-size:var(--t-sm)}
.lien-rayon span{font-size:var(--t-xs);color:var(--c-encre3)}
.lien-rayon:hover b{color:var(--c-accent)}
@media(min-width:48rem){.liens-rayons{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-xl)}}

.selection{background:var(--c-surface)}
.defilement{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,20rem);gap:var(--e-md);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--e-sm);scrollbar-width:thin}
.defilement .carte{scroll-snap-align:start;grid-template-columns:1fr}
.defilement .carte-visuel{aspect-ratio:5/4}
@media(min-width:64rem){.defilement{grid-auto-flow:initial;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}}

.lumieres{display:grid;gap:1px;background:var(--c-bordure);border:1px solid var(--c-bordure)}
.lumiere{position:relative;display:grid;align-content:end;min-height:16rem;padding:var(--e-lg);
  overflow:hidden;background:var(--lumiere,var(--c-fond2));isolation:isolate}
.lumiere::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.48;
  background:radial-gradient(circle at 72% 22%,rgba(255,255,255,.82),transparent 28%),
    repeating-linear-gradient(88deg,transparent 0,transparent 14px,rgba(23,32,27,.05) 14px,
    rgba(23,32,27,.05) 20px)}
.lumiere b{font-family:var(--police-titre);font-size:var(--t-xl);font-weight:550}
.lumiere p{font-size:var(--t-sm);color:var(--c-encre2);margin-top:var(--e-xs);max-width:22rem}
.lumiere:hover b{color:var(--c-accent)}
.lumiere.blanc{--lumiere:var(--c-surface)}
.lumiere.translucide{--lumiere:var(--c-sablePale)}
.lumiere.naturel{--lumiere:var(--c-accentPale)}
@media(min-width:48rem){.lumieres{grid-template-columns:repeat(3,minmax(0,1fr))}}

.atelier{background:var(--c-surfaceInversee);color:var(--c-surAccent)}
.atelier-grille{display:grid;gap:var(--e-xl)}
.atelier h2{color:var(--c-surAccent);max-width:12ch}
.atelier-copie{display:grid;align-content:start;gap:var(--e-md)}
.atelier-copie>p{color:color-mix(in srgb,var(--c-surAccent) 72%,transparent);max-width:34rem}
.formes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-sm);align-items:end;
  min-height:18rem;padding:var(--e-xl);border:1px solid rgba(255,255,255,.16)}
.forme{display:grid;place-items:center;gap:var(--e-sm);font-size:var(--t-xs);
  color:color-mix(in srgb,var(--c-surAccent) 68%,transparent)}
.forme svg{width:100%;max-height:12rem;stroke:var(--c-surAccent);stroke-width:1;fill:none;opacity:.84}
.etapes{display:grid;border-top:1px solid rgba(255,255,255,.18)}
.etape{display:grid;grid-template-columns:var(--e-xl) 1fr;gap:var(--e-sm);padding:var(--e-md) 0;
  border-bottom:1px solid rgba(255,255,255,.18)}
.etape span{font-family:var(--police-mono);font-size:var(--t-xs);color:var(--c-sable)}
.etape b{font-size:var(--t-sm);font-weight:620}
.etape p{font-size:var(--t-xs);color:color-mix(in srgb,var(--c-surAccent) 66%,transparent)}
@media(min-width:48rem){.atelier-grille{grid-template-columns:1fr 1fr;align-items:center;gap:var(--e-3xl)}}

.reassurance{display:grid;gap:0;border-top:1px solid var(--c-bordure)}
.reassurance>div{display:grid;gap:var(--e-2xs);padding:var(--e-md) 0;border-bottom:1px solid var(--c-bordure)}
.reassurance b{font-size:var(--t-sm)}
.reassurance p{font-size:var(--t-xs);color:var(--c-encre2)}
@media(min-width:30rem){.reassurance{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-xl)}}
@media(min-width:64rem){.reassurance{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Fil d'Ariane et entete catalogue */
.fil{display:flex;align-items:center;gap:0;overflow-x:auto;white-space:nowrap;
  font-size:var(--t-xs);color:var(--c-encre2);padding:var(--e-xs) 0;scrollbar-width:none}
.fil::-webkit-scrollbar{display:none}
.fil a,.fil>span{display:inline-flex;align-items:center;min-height:var(--tactile)}
.fil>*+*::before{content:'\203A';margin:0 var(--e-xs);color:var(--c-encre3)}
.fil a:hover{color:var(--c-accent)}
@media(min-width:48rem){.fil{padding:var(--e-sm) 0}.fil a,.fil>span{min-height:var(--e-lg)}}
.catalogue-entete{display:grid;gap:var(--e-xs);padding:var(--e-lg) 0 var(--e-xl)}
.catalogue-entete p{color:var(--c-encre2);max-width:var(--l-texte)}
.sous-categories{display:flex;gap:var(--e-xs);overflow-x:auto;padding-bottom:var(--e-sm);scrollbar-width:none}
.sous-categories a{display:inline-flex;align-items:center;gap:var(--e-xs);min-height:var(--tactile);
  flex:0 0 auto;padding:0 var(--e-sm);border:1px solid var(--c-bordure);background:var(--c-surface);
  font-size:var(--t-sm)}
.sous-categories a:hover{border-color:var(--c-accent);color:var(--c-accent)}
.sous-categories span{font-size:var(--t-2xs);color:var(--c-encre3)}

/* Catalogue et filtres */
.catalogue{display:grid;gap:var(--e-lg)}
.catalogue-resultats{min-width:0}
.barre-outils{display:flex;gap:var(--e-xs);align-items:center;flex-wrap:wrap;
  padding:var(--e-sm) 0;border-top:1px solid var(--c-bordure);border-bottom:1px solid var(--c-bordure);
  margin-bottom:var(--e-lg)}
.compte{font-size:var(--t-sm);color:var(--c-encre2)}
.compte b{color:var(--c-encre);font-size:var(--t-base)}
.tri-form{display:flex;align-items:center;gap:var(--e-xs)}
/* La taille de la saisie ne descend pas ici non plus : a 13 px, Safari iOS
   zoomait a la mise au point et faisait sauter la barre d'outils. La regle
   generale posait bien 16 px — cette surcharge la defaisait. */
.tri-form select{width:auto;max-width:12rem}
.jetons-actifs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-xs);padding-bottom:var(--e-lg)}
.jeton{display:inline-flex;align-items:center;gap:var(--e-2xs);min-height:var(--tactile);
  padding-left:var(--e-sm);border:1px solid var(--c-accent);border-radius:var(--r-rond);
  background:var(--c-accentPale);color:var(--c-accent);font-size:var(--t-xs);font-weight:560}
.jeton a{display:grid;place-items:center;width:var(--tactile);height:var(--tactile);
  border-radius:var(--r-rond);font-size:var(--t-lg)}
.jeton a:hover{background:color-mix(in srgb,var(--c-accent) 12%,transparent)}
.rail{display:none}
.groupe-filtre{border-bottom:1px solid var(--c-bordure);padding:var(--e-sm) 0}
.groupe-filtre:last-child{border-bottom:0}
.groupe-filtre>summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--tactile);
  list-style:none;cursor:pointer;font-size:var(--t-xs);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-encre2)}
.groupe-filtre>summary::-webkit-details-marker{display:none}
.groupe-filtre>summary::after{content:'+';font-size:var(--t-lg);font-weight:400}
.groupe-filtre[open]>summary::after{content:'\2212'}
.choix{display:grid;gap:var(--e-3xs);padding-top:var(--e-xs);max-height:16rem;overflow:auto}
.choix a{display:flex;align-items:center;gap:var(--e-xs);min-height:var(--tactile);
  padding:0 var(--e-xs);font-size:var(--t-sm);color:var(--c-encre2);border-left:2px solid transparent}
.choix a:hover{color:var(--c-encre);background:var(--c-fond2)}
.choix a[aria-current=true]{border-left-color:var(--c-accent);color:var(--c-accent);
  background:var(--c-accentPale);font-weight:620}
.choix .n{margin-left:auto;font-size:var(--t-2xs);color:var(--c-encre3)}
.puce{width:var(--e-sm);height:var(--e-sm);border-radius:var(--r-rond);border:1px solid var(--c-bordure2)}
.tiroir{position:fixed;inset:0;z-index:70;background:var(--c-voile);display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,visibility .22s}
.tiroir:target{opacity:1;visibility:visible;pointer-events:auto}
.tiroir-corps{width:100%;max-height:90svh;overflow-y:auto;background:var(--c-surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--o-drawer);padding:var(--e-md);
  padding-bottom:calc(var(--e-md) + env(safe-area-inset-bottom));display:grid;gap:var(--e-sm);
  transform:translateY(100%);transition:transform .28s ease}
.tiroir:target .tiroir-corps{transform:none}
.tiroir-tete{display:flex;align-items:center;gap:var(--e-sm);position:sticky;top:0;
  background:var(--c-surface);padding:var(--e-xs) 0;z-index:1}
.tiroir-tete b{font-family:var(--police-titre);font-size:var(--t-xl);font-weight:550}
.tiroir-pied{position:sticky;bottom:0;background:var(--c-surface);padding-top:var(--e-sm);
  display:grid;gap:var(--e-xs)}
@media(min-width:48rem){
  .catalogue{grid-template-columns:15rem minmax(0,1fr);gap:var(--e-xl);align-items:start}
  .rail{display:block;position:sticky;top:9rem;max-height:calc(100svh - 10rem);overflow-y:auto;
    padding-right:var(--e-sm)}
  .ouvre-tiroir{display:none}
  .choix a{min-height:var(--e-xl)}
  .jeton{min-height:var(--e-xl)}
  .jeton a{width:var(--e-xl);height:var(--e-xl)}
  .catalogue-resultats .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:64rem){.catalogue-resultats .grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:80rem){.catalogue-resultats .grille{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Fiche produit */
.fiche-page{padding-bottom:var(--e-xl)}
.fiche{display:grid;gap:var(--e-xl)}
.fiche-media{display:grid;gap:var(--e-xs)}
/* Pas de min-height : avec aspect-ratio, une hauteur plancher devient une
   largeur plancher, et le visuel debordait de huit pixels a 320 px — la place
   utile y est de 273. Le carre suit sa colonne, qui vaut au moins 20 rem des
   que la fiche passe en deux colonnes. Mesure porte R. */
.produit-visuel{aspect-ratio:1/1;border-radius:var(--r-sm)}
.produit-visuel img{object-fit:cover}
.produit-legende{font-size:var(--t-xs);color:var(--c-encre3)}
.fiche-infos{display:grid;align-content:start;gap:var(--e-md)}
.fiche-infos h1{font-size:var(--t-3xl)}
.fiche-reference{font-size:var(--t-xs);color:var(--c-encre3)}
.fiche-description{font-size:var(--t-md);color:var(--c-encre2);max-width:38rem}
.fiche-achat{display:grid;gap:var(--e-md)}
.achat-bloc{display:grid;gap:var(--e-md);padding:var(--e-lg);border:1px solid var(--c-bordure);
  background:var(--c-surface)}
.prix-grand{font-family:var(--police-titre);font-size:var(--t-3xl);font-weight:550;
  letter-spacing:-.03em;line-height:1.05}
.prix-grand small{display:block;font-family:var(--police);font-size:var(--t-sm);font-weight:450;
  color:var(--c-encre2);letter-spacing:0;margin-top:var(--e-xs)}
/* Une colonne d'abord, deux a partir de sm. Le bouton porte white-space:nowrap
   — « Ajouter au panier » ne se coupe pas — et son min-content, ajoute aux
   7 rem du champ de quantite et au padding du bloc, depassait la place a 320 px :
   la fiche debordait de huit pixels. Mesure porte R. */
.achat-form{display:grid;gap:var(--e-xs)}
@media(min-width:30rem){
  .achat-form{grid-template-columns:7rem minmax(0,1fr);align-items:end}
}
.achat-form button{height:var(--tactile)}
.achat-confiance{display:grid;gap:var(--e-xs);padding-top:var(--e-sm);border-top:1px solid var(--c-bordure)}
.achat-confiance span{display:flex;align-items:center;gap:var(--e-xs);font-size:var(--t-xs);color:var(--c-encre2)}
.achat-confiance .icone{width:var(--e-sm);height:var(--e-sm);color:var(--c-accent)}
.variantes{display:grid;gap:var(--e-xs);padding:var(--e-md) 0;border-top:1px solid var(--c-bordure);
  border-bottom:1px solid var(--c-bordure)}
.variantes-titre{display:flex;justify-content:space-between;gap:var(--e-sm);font-size:var(--t-xs);
  color:var(--c-encre2)}
.variantes-liste{display:flex;gap:var(--e-xs);overflow-x:auto;padding-bottom:var(--e-2xs)}
.variante{display:grid;grid-template-columns:var(--e-lg) auto;align-items:center;gap:var(--e-xs);
  min-height:var(--tactile);padding:0 var(--e-xs);border:1px solid var(--c-bordure);flex:0 0 auto;
  font-size:var(--t-xs);background:var(--c-surface)}
.variante:hover{border-color:var(--c-accent);color:var(--c-accent)}
.fiche-details{display:grid;gap:var(--e-xl);padding-top:var(--e-xl);border-top:1px solid var(--c-bordure)}
.fiche-details h2{font-size:var(--t-2xl)}
.faits{display:grid;margin:0;border-top:1px solid var(--c-bordure)}
.faits>div{display:grid;grid-template-columns:minmax(7rem,40%) 1fr;gap:var(--e-sm);
  padding:var(--e-sm) 0;border-bottom:1px solid var(--c-bordure)}
.faits dt{color:var(--c-encre2);font-size:var(--t-sm)}
.faits dd{margin:0;text-align:right;font-weight:560;font-size:var(--t-sm);overflow-wrap:anywhere}
.commande-info{display:grid;gap:var(--e-sm);padding:var(--e-lg);background:var(--c-accentPale)}
.commande-info h3{font-family:var(--police);font-size:var(--t-base);font-weight:680;letter-spacing:0}
.commande-info p{font-size:var(--t-sm);color:var(--c-encre2)}
.achat-colle{position:sticky;bottom:0;z-index:30;display:flex;gap:var(--e-sm);align-items:center;
  background:var(--c-surface);border-top:1px solid var(--c-bordure);box-shadow:var(--o-achat);
  padding:var(--e-xs) var(--e-md);padding-bottom:calc(var(--e-xs) + env(safe-area-inset-bottom));
  margin:0 calc(var(--e-md) * -1)}
.achat-colle-prix{min-width:0;flex:1}
.achat-colle-prix b{display:block;font-family:var(--police-titre);font-size:var(--t-lg);font-weight:550}
@media(min-width:48rem){
  .fiche{grid-template-columns:minmax(0,1.08fr) minmax(20rem,.92fr);align-items:start;gap:var(--e-2xl)}
  .fiche-media{position:sticky;top:9rem}
  .fiche-infos h1{font-size:var(--t-4xl)}
  .fiche-achat{position:static}
  .achat-colle{display:none}
  .fiche-details{grid-template-columns:minmax(0,1fr) minmax(18rem,.65fr);gap:var(--e-2xl)}
}
@media(min-width:64rem){.fiche{grid-template-columns:minmax(0,1.15fr) minmax(24rem,.85fr)}}

/* Panneaux, tableaux, etats */
.panneau{background:var(--c-surface);border:1px solid var(--c-bordure);padding:var(--e-md)}
.panneau.plein{padding:0;overflow:hidden}
.panneau-titre{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-encre2);margin-bottom:var(--e-xs)}
.tableau-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th,td{text-align:left;padding:var(--e-xs) var(--e-sm);border-bottom:1px solid var(--c-bordure)}
th{font-size:var(--t-2xs);font-weight:650;color:var(--c-encre2);background:var(--c-fond2);
  text-transform:uppercase;letter-spacing:.04em}
td.droite,th.droite{text-align:right}
.vide{display:grid;gap:var(--e-xs);justify-items:center;text-align:center;
  padding:var(--e-3xl) var(--e-md);color:var(--c-encre2)}
.vide b{font-family:var(--police-titre);font-size:var(--t-xl);font-weight:550;color:var(--c-encre)}
.note{border-left:2px solid var(--c-accent);background:var(--c-accentPale);
  padding:var(--e-sm) var(--e-md);font-size:var(--t-sm);color:var(--c-encre2)}
.note b{color:var(--c-encre)}
.note.critique{border-left-color:var(--c-critique);background:var(--c-critiquePale)}
details>summary{display:flex;align-items:center;min-height:var(--tactile);cursor:pointer}
.pages{display:flex;gap:var(--e-sm);align-items:center;justify-content:space-between;padding:var(--e-xl) 0}

/* Panier et tunnel */
.panier-page,.commande-page{display:grid;gap:var(--e-xl)}
.panier-lignes{display:grid;border-top:1px solid var(--c-bordure)}
.panier-ligne{display:grid;gap:var(--e-md);padding:var(--e-lg) 0;border-bottom:1px solid var(--c-bordure)}
.panier-ligne-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-sm)}
.panier-ligne h2{font-family:var(--police-titre);font-size:var(--t-lg);font-weight:550}
.panier-actions{display:flex;align-items:end;gap:var(--e-xs);flex-wrap:wrap}
.panier-quantite{display:flex;align-items:end;gap:var(--e-xs);flex:1}
.panier-quantite .saisie{width:7rem}
.resume-panier{display:grid;gap:var(--e-sm);padding:var(--e-lg);background:var(--c-surface);
  border:1px solid var(--c-bordure)}
.resume-panier h2{font-family:var(--police);font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
/* Le choix du pays, en tête du récapitulatif : on choisit la destination, puis
   on lit ce qu'elle coûte. Placé après le total, il donnait un prix avant qu'on
   sache pour quel pays — et le total changeait sous les yeux. */
.port-pays{display:grid;gap:var(--e-xs);padding-bottom:var(--e-sm);
  border-bottom:1px solid var(--c-bordure)}
.port-pays label,.code-remise label{font-size:var(--t-sm);color:var(--c-texte-2)}
.port-pays .bouton{justify-self:start}
/* Avec JavaScript, le bouton est superflu : le menu se soumet seul. Sans lui, il
   reste la seule façon de recalculer — il ne disparaît donc jamais du HTML.
   Portée au seul .port-pays : .code-remise n'a pas d'attribut qui soumette le
   formulaire à sa place, et cachait son propre bouton Appliquer quand elle
   empruntait cette même classe — plus aucun moyen de poser un code. */
@media (scripting: enabled){.port-pays .bouton{display:none}}
.code-remise{display:grid;gap:var(--e-xs);padding-bottom:var(--e-sm);
  border-bottom:1px solid var(--c-bordure)}
.code-remise .rangee-code{display:flex;gap:var(--e-xs)}
.code-remise .rangee-code .saisie{flex:1;min-width:0}
.code-remise .rangee-code .bouton{flex:none}
.resume-total{display:flex;align-items:end;justify-content:space-between;gap:var(--e-sm);
  padding-top:var(--e-sm);border-top:1px solid var(--c-bordure)}
.resume-total b{font-family:var(--police-titre);font-size:var(--t-2xl);font-weight:550}
.formulaire{display:grid;gap:var(--e-md)}
.champs-deux{display:grid;gap:var(--e-md)}
.progression{display:flex;align-items:center;gap:var(--e-xs);font-size:var(--t-xs);color:var(--c-encre3)}
.progression b{color:var(--c-accent)}
.commande-page:has(.commande-formulaire){grid-template-areas:'resume' 'form'}
.commande-formulaire{grid-area:form}
.commande-resume{grid-area:resume}
@media(min-width:48rem){
  .panier-page,.commande-page{grid-template-columns:minmax(0,1fr) 22rem;align-items:start;gap:var(--e-2xl)}
  .commande-page:has(.commande-formulaire){grid-template-areas:'form resume'}
  .resume-panier{position:sticky;top:9rem}
  .panier-ligne{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .champs-deux{grid-template-columns:1fr 1fr}
}

/* Pages editoriales */
.hero-interieur{background:var(--c-surfaceInversee);color:var(--c-surAccent);padding:var(--e-3xl) 0}
.hero-interieur h1{color:var(--c-surAccent);max-width:12ch}
.hero-interieur p{color:color-mix(in srgb,var(--c-surAccent) 72%,transparent);max-width:var(--l-texte)}
.contenu-editorial{display:grid;gap:var(--e-xl);max-width:52rem}
.contenu-editorial section{display:grid;gap:var(--e-sm)}
.contenu-editorial h2{font-size:var(--t-xl)}
.contenu-editorial p,.contenu-editorial li{color:var(--c-encre2)}
/* Un trou dans un texte juridique doit arreter l'oeil. Une page qui aurait
   l'air complete engagerait la maison sur ce qu'elle n'a pas decide. */
.contenu-editorial .trou{background:var(--c-attentionPale);color:var(--c-attention);
  border:1px solid var(--c-attention);padding:.05em .35em;border-radius:var(--r-sm);
  font-size:.92em;white-space:nowrap}
.recherche-page{position:relative;display:flex;max-width:var(--l-texte);margin-top:var(--e-lg)}
.recherche-page .saisie{padding-right:var(--e-sm);border-radius:var(--r-sm)}

/* Pied */
.pied{background:var(--c-surfaceInversee);color:var(--c-surAccent);margin-top:var(--e-3xl);
  padding:var(--e-2xl) 0 calc(var(--e-xl) + env(safe-area-inset-bottom))}
.pied-marque{display:grid;gap:var(--e-md);padding-bottom:var(--e-xl);border-bottom:1px solid rgba(255,255,255,.16)}
.pied-marque b{font-family:var(--police-titre);font-size:var(--t-2xl);font-weight:550}
.pied-marque p{font-size:var(--t-sm);color:color-mix(in srgb,var(--c-surAccent) 68%,transparent);
  max-width:32rem}
.pied-contact{display:flex;gap:var(--e-md);flex-wrap:wrap}
.pied-contact a{display:inline-flex;align-items:center;min-height:var(--tactile);font-size:var(--t-sm)}
.pied-grille{display:grid;gap:var(--e-xl);grid-template-columns:1fr;padding:var(--e-xl) 0}
.pied-colonne{display:grid;align-content:start}
.pied-colonne>b{font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-surAccent) 54%,transparent);margin-bottom:var(--e-xs)}
.pied-colonne a{display:flex;align-items:center;min-height:var(--tactile);font-size:var(--t-sm);
  color:color-mix(in srgb,var(--c-surAccent) 78%,transparent)}
.pied-colonne a:hover{color:var(--c-surAccent)}
.pied-bas{display:flex;justify-content:space-between;gap:var(--e-md);flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16);padding-top:var(--e-md);font-size:var(--t-xs);
  color:color-mix(in srgb,var(--c-surAccent) 52%,transparent)}
@media(min-width:30rem){.pied-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.pied-grille{grid-template-columns:1.4fr repeat(3,1fr)}}

/* Configurateur */
.configurateur{display:grid;gap:var(--e-xl);align-items:start}
.configurateur-reglages{display:grid;gap:var(--e-lg);padding:var(--e-lg);
  background:var(--c-surface);border:1px solid var(--c-bordure);border-radius:var(--r-lg)}
.configurateur-reglages label{display:block;font-size:var(--t-sm);color:var(--c-encre2);
  margin-bottom:var(--e-2xs)}
.formes-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-sm);
  border:0;margin:0;padding:0}
.formes-choix legend{font-size:var(--t-sm);color:var(--c-encre2);padding:0;
  margin-bottom:var(--e-2xs)}
.forme-choix{display:grid;justify-items:center;gap:var(--e-2xs);min-height:var(--tactile);
  padding:var(--e-md) var(--e-sm);border:1px solid var(--c-bordure);border-radius:var(--r-md);
  background:var(--c-fond);text-align:center;color:var(--c-encre2)}
.forme-choix b{font-size:var(--t-sm);color:var(--c-encre)}
.forme-choix span{font-size:var(--t-xs);color:var(--c-encre3)}
.forme-choix.choisie{border-color:var(--c-accent);background:var(--c-accentPale);color:var(--c-accentFonce)}
.silhouette{width:2.5rem;height:2rem;color:var(--c-encre2)}
.forme-choix.choisie .silhouette{color:var(--c-accent)}
/* Le bloc du patron et de ses mesures. Sans cette règle, le dessin et les
   faits se touchaient : la classe existait dans le gabarit et nulle part
   ailleurs — c'est le test des classes employées qui l'a trouvée. */
.configurateur-apercu{display:grid;gap:var(--e-md);align-content:start;min-width:0}
.patron-cadre{margin:0;display:grid;gap:var(--e-sm);padding:var(--e-lg);
  background:var(--c-surface);border:1px solid var(--c-bordure);border-radius:var(--r-lg);
  overflow-x:auto;color:var(--c-encre)}
.patron-cadre .patron{max-width:100%;height:auto}
/* Les trois traits du patron. Le domaine les nomme, la feuille les habille :
   sans ces règles, leur apparence tiendrait à des attributs SVG figés dans un
   paquet qui ne connaît pas le design system. */
.patron-coupe{stroke:var(--c-encre)}
.patron-collage{stroke:var(--c-accent)}
.patron-repere{stroke:var(--c-encre3)}
.patron-texte{font-family:var(--police);fill:var(--c-encre2)}
.motifs{margin:0;padding-left:var(--e-md);display:grid;gap:var(--e-2xs);
  font-size:var(--t-sm);color:var(--c-encre2);text-align:left}
.configurateur-prix .faits dt{display:grid;gap:var(--e-3xs)}
.bloc{display:block}
@media(min-width:48rem){
  .configurateur{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .configurateur-prix{grid-column:1 / -1}
}
@media(min-width:64rem){
  .configurateur{grid-template-columns:20rem minmax(0,1fr) 20rem}
  .configurateur-prix{grid-column:auto}
}

@keyframes hero-copie{from{opacity:0;transform:translateY(var(--e-md))}to{opacity:1;transform:none}}
@keyframes hero-image{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){
  .hero-copie{animation:hero-copie .7s ease-out both}
  .hero-media img{animation:hero-image 1.4s ease-out both}
  .tuile,.carte,.lumiere{transition:color .18s,transform .18s}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;
  transition-duration:.01ms!important}}