/* ============================================================================
   Signature by Somouest — V2 « fond sombre » (maquette Signature_webdesign_pour-remy.xd, 01/10/2026).
   Chargée APRÈS la feuille du site (assets/css/signature.css) : les composants communs (carte des revendeurs,
   liseuse, visionneuse de tissu, mentions, bandeau cookies, ouverture en panneaux de bois) gardent leur style ;
   ici, seulement le décor sombre et les blocs propres à la V2 (préfixe v2-).
   Fond sombre = DÉCOR FIXE de la page, pas un mode sombre : ⛔ aucun prefers-color-scheme (règle du site).
============================================================================ */

/* Playfair Display Bold (Google Fonts, sous-ensemble latin, 01/10/2026) : le vrai gras, pas un gras simulé par le navigateur
   (accroche du pied de page « Collection & »). Même famille que les graisses 400 déclarées dans signature.css. */
/* Inter Light (Google Fonts, sous-ensemble latin, 01/10/2026) : le texte fin de la maquette (Helvetica Neue Light), le même chez tous */
@font-face{font-family:"Inter";src:url("../../../assets/fonts/inter-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../../../assets/fonts/playfair-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:only light;
  --v2-fond:#331f14;
  --v2-creme:#f0e1d1;
  --v2-creme2:#ebdfd3;
  --v2-point:#aa9d8f;
  --v2-texte:rgba(255,255,255,.92);
  --v2-doux:rgba(240,225,209,.66);
  --v2-ligne:rgba(240,225,209,.42);
  --v2-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;   /* Inter embarquée (assets/fonts, @font-face de signature.css) : même rendu sur tous les postes */
  --v2-g:clamp(18px,8.85vw,170px);     /* marge du contenu (170 px sur la maquette 1920) */
  --v2-g2:clamp(16px,4.6vw,88px);      /* marge de l'en-tête et de la grande photo (88 px) */
  --v2-head:clamp(70px,6.4vw,124px);
  --head:var(--v2-head);
  /* fond papier des photos détourées (packshots) : grain réduit très fort, à 10 % sur blanc (voile blanc à 90 %) */
  --v2-pk-marge:13.7% 11.5%;   /* marge des produits détourés, la même partout (galerie, vignettes, pièces d'ensemble) */
  --v2-papier-pk:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),#fff url("../img/papier-grain.webp") 0 0/140px auto repeat;
}

html{background:var(--v2-fond);scroll-padding-top:calc(var(--v2-head) + 16px);touch-action:manipulation}   /* manipulation : pas de zoom au double toucher */
/* fond texturé de Rémy (Fond_website, 1920 × 6283, débarrassé de ses coutures de bandes et raccordé pour la répétition :
   scratchpad fond_raccord.py) = aplat #331f14 (couleur CSS : affiché tout de suite, sert de préchargement)
   + sa texture seule, à 30 % par-dessus. Séparer les deux supprime les blocs de compression (divisés par 3) pour un poids léger
   (360 Ko, 85 Ko en dessous de 1024 px). Toute la largeur, proportions gardées, répété vers le bas, défile avec la page. */
body{position:relative;background:transparent;color:var(--v2-texte);font:300 16px/1.6 var(--v2-sans)}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("../img/fond-raccord-1920.webp") center top/100% auto repeat-y;opacity:.3}
::selection{background:var(--v2-creme);color:var(--v2-fond)}
.v2-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--v2-creme);color:var(--v2-fond);padding:10px 16px;text-decoration:none}
.v2-skip:focus{top:12px}
.v2-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-lu{background:linear-gradient(90deg,#8a6a45,var(--or) 55%,var(--v2-creme))}

.v2-wrap{width:100%;max-width:calc(1580px + 2*var(--v2-g));margin:0 auto;padding:0 var(--v2-g)}
.v2-main-top{padding-top:calc(var(--v2-head) + clamp(10px,1.6vw,30px))}
.v2-titre{font:400 clamp(30px,2.1vw,40px)/1.25 var(--serif);color:#fff;margin:0}
.v2-titre--creme{color:var(--v2-creme)}
.v2-h3{font:400 clamp(21px,1.45vw,27px)/1.2 var(--serif);color:#fff;margin:0}
.v2-ligne{height:1px;background:var(--v2-ligne);border:0;margin:0}
/* liens texte : soulignés au survol avec la même animation que le menu du haut */
.v2-lien{position:relative;display:inline-block;color:#fff;text-decoration:none;font:300 clamp(14px,.94vw,18px)/1.4 var(--v2-sans);padding-bottom:2px}
.v2-lien::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.v2-lien:hover::after,.v2-lien:focus-visible::after{transform:scaleX(1)}
.v2-nb{font-size:.7em;opacity:.75;letter-spacing:.02em}   /* nombre entre parenthèses après « Voir tout » */
.v2-lien--i{font-style:italic;color:var(--v2-creme2)}
.v2-petit{font-size:clamp(13px,.8vw,15px)}

/* ------------------------------------------------------------------ En-tête (logo à gauche, menu à droite) */
.v2-head{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--v2-head);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--v2-g2);color:#fff;transition:background-color .45s var(--ease)}
.v2-head::before{content:"";position:absolute;inset:0 0 -52px;z-index:-1;opacity:0;pointer-events:none;background:linear-gradient(rgba(50,34,25,.9) calc(100% - 52px),rgba(50,34,25,0));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(#000 calc(100% - 52px),transparent);mask-image:linear-gradient(#000 calc(100% - 52px),transparent);transition:opacity .45s var(--ease)}   /* brun #322219 choisi par Rémy (celui qu'on voit sur la page) ; fond flouté sous le menu, qui s'estompe sur 52 px (réglé par Rémy : 64 px trop, 15 px trop peu, 38 px un peu court) */
.v2-head.is-scrolled::before,body.sg-menu-open .v2-head::before{opacity:1}
.v2-head__logo{display:block;color:#fff;line-height:0}
.v2-logo{width:clamp(130px,11.2vw,215px);height:auto;display:block;overflow:visible}   /* overflow visible : jamais rogné par l'arrondi au pixel (écrans haute définition) */
.v2-head__nav{display:flex;gap:clamp(26px,4.7vw,90px)}
/* menu et pied de page : même police que le texte (Inter embarquée), jamais une police « système » comme Lato ou Helvetica Neue —
   présentes sur certains postes seulement, elles changeaient le rendu d'un ordinateur à l'autre (vu chez Léa, 01/10/2026) */
.v2-head__nav a{position:relative;font:300 clamp(12px,.94vw,18px)/1 var(--v2-sans);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:10px 0}
.v2-head__nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.v2-head__nav a:hover::after,.v2-head__nav a[aria-current]::after{transform:scaleX(1)}
.v2-head .sg-burger{display:none}
.sg-menu{background:var(--v2-fond)}

/* ------------------------------------------------------------------ Pied de page (maquette « Signature_webdesign_Footer.xd »)
   logo centré entre deux traits pointillés crème + accroche, puis 3 colonnes (titre Playfair, filet gris, liens) */
.v2-foot{padding:clamp(110px,10.5vw,200px) var(--v2-g) clamp(60px,5.5vw,110px)}
.v2-foot__marque{max-width:1562px;margin:0 auto;text-align:center}
.v2-foot__logo-ligne{display:flex;align-items:center;gap:clamp(20px,2.9vw,55px)}
.v2-foot__logo-ligne::before,.v2-foot__logo-ligne::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--v2-creme2) 0 2px,transparent 2px 5px);opacity:.9}
.v2-foot__logo{flex:none;color:#fff;line-height:0}
.v2-foot__logo .v2-logo{width:clamp(145px,11.65vw,224px)}   /* -15 % (Rémy) */
.v2-foot__accroche{margin:clamp(12px,1.2vw,22px) 0 0;font:400 clamp(18px,1.36vw,26px)/1.2 var(--serif);color:var(--v2-creme2)}
.v2-foot__accroche strong{font-weight:700}
.v2-foot__accroche em{font-style:italic}
.v2-foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,350px));justify-content:center;column-gap:clamp(40px,6.1vw,117px);row-gap:44px;margin-top:clamp(70px,7.5vw,144px)}
.v2-foot__cols nav{display:flex;flex-direction:column;align-items:flex-start}
.v2-foot__cols h2{align-self:stretch;margin:0 0 clamp(16px,1.6vw,30px);padding-bottom:clamp(12px,1.2vw,22px);border-bottom:1px solid #707070;font:400 clamp(21px,1.35vw,26px)/1.2 var(--serif);color:#f9f6f0}
.v2-foot__cols a{position:relative;color:#fff;text-decoration:none;font:300 clamp(14px,.99vw,19px)/1.58 var(--v2-sans);opacity:.92}
.v2-foot__cols a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.v2-foot__cols a:hover{opacity:1}
.v2-foot__cols a.v2-foot__groupe{margin-top:6px;font-size:clamp(12px,.78vw,15px);opacity:.8}   /* mention de la marque, plus petite (maquette : 15 px) */
.v2-foot__cols a:hover::after,.v2-foot__cols a:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------------------ Accueil */
.v2-hero{position:relative;margin:0 var(--v2-g2);aspect-ratio:1747/929;overflow:hidden;background:#24150d}
.v2-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* photo et croquis superposés (avant / après) */
/* avant / après de la photo du haut : ni cercle ni trait blanc (Rémy) — on fait glisser l'image elle-même ;
   au clavier seulement, un trait discret montre où l'on en est */
.v2-hero .sg-ba__handle{background:transparent;box-shadow:none}
.v2-hero .sg-ba__knob{display:none}
.v2-hero .sg-ba__handle:focus-visible{background:rgba(255,255,255,.55)}
.v2-hero-zone{position:relative}
.v2-defiler{position:absolute;z-index:3;right:calc(var(--v2-g2) + clamp(18px,2.2vw,40px));bottom:clamp(18px,2.2vw,40px);color:#fff;font-size:11px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.v2-hero__fantome{opacity:.1}   /* côté croquis : la photo légèrement visible (Rémy : ~10 %) */
.v2-intro{display:grid;grid-template-columns:minmax(0,621fr) minmax(0,960fr);gap:clamp(24px,3vw,60px);padding-top:clamp(56px,8.3vw,160px);padding-bottom:clamp(60px,8.6vw,165px)}
.v2-intro .v2-titre{padding-top:clamp(0px,3.6vw,70px)}
.v2-intro__txt{font-size:clamp(15px,.99vw,19px);line-height:1.6;max-width:960px}
.v2-intro__txt p{margin:0 0 1.4em}

/* bandeau « atelier » : photo plein cadre + carte papier (photo d'ensemble à gauche, logo à droite) */
.v2-atelier{position:relative;min-height:clamp(380px,50.5vw,969px);display:flex;align-items:center;overflow:hidden}
.v2-atelier>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2-atelier::after{content:"";position:absolute;inset:0;background:rgba(20,12,8,.18)}
.v2-carte{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,748fr) minmax(0,792fr);align-items:center;padding:clamp(10px,1.5vw,29px);background:#e9e1d6 url("../img/carte-papier.webp") center/cover;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);text-decoration:none;color:var(--brun)}
.v2-carte__photo{aspect-ratio:748/473;overflow:hidden}
.v2-carte__photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.v2-carte:hover .v2-carte__photo img{transform:scale(1.03)}
.v2-carte__logo{display:flex;flex-direction:column;align-items:center;gap:6px;color:#4a2f20;padding:clamp(18px,2vw,40px) 0}
.v2-carte__logo .v2-logo{width:clamp(130px,9.2vw,178px)}
.v2-carte__logo span{font:400 clamp(9px,.55vw,11px)/1 var(--sans);letter-spacing:.14em}

/* Nos créations : une famille par ligne — titre + texte + « Voir tout » à gauche, 3 photos à droite */
.v2-crea{padding:clamp(70px,8.4vw,160px) 0 clamp(40px,4vw,80px)}
.v2-crea>.v2-wrap>.v2-titre{margin-bottom:clamp(30px,3.4vw,64px)}
.v2-fam{display:grid;grid-template-columns:minmax(0,482fr) minmax(0,1086fr);gap:clamp(20px,2vw,40px);padding:clamp(34px,3.4vw,66px) 0 clamp(60px,7vw,130px);border-top:1px solid var(--v2-ligne)}
.v2-fam__txt .v2-h3{margin-bottom:clamp(14px,1.4vw,28px)}
.v2-fam__txt p{font-size:clamp(14px,.94vw,18px);color:#fff;line-height:1.45;max-width:20em;margin:0 0 .2em}
/* « Voir tout » : plus bas sous le texte, plus fin (plus petit, crème doux) */
.v2-fam__txt .v2-lien{margin-top:clamp(14px,1.3vw,24px);font-size:clamp(13px,.83vw,16px);color:var(--v2-creme2);letter-spacing:.01em}
.v2-fam__vigns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,3.75vw,72px);align-self:start}
.v2-vign{display:block;text-decoration:none;color:#fff}
.v2-vign__img{display:block;aspect-ratio:314/304;overflow:hidden;background:#2a190f}
.v2-vign__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.v2-vign:hover .v2-vign__img img{transform:scale(1.045)}
.v2-vign__img.is-pk{background:var(--v2-papier-pk)}
.v2-vign__img.is-pk img{object-fit:contain;padding:var(--v2-pk-marge)}
.v2-vign__nom{display:block;margin-top:clamp(10px,1.1vw,20px);font:300 clamp(15px,1.04vw,20px)/1.3 var(--v2-sans)}

/* Tissus : cartes papier sur un bandeau de tissu, puis deux colonnes de texte */
.v2-tissus{position:relative;padding:clamp(60px,6vw,110px) 0 0}
.v2-tissus__bande{position:absolute;left:0;right:0;top:0;height:clamp(220px,23.5vw,451px);background:url("../img/tissu-bande.webp") center/cover;pointer-events:none}
.v2-tissus__bande::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(rgba(51,31,20,0),rgba(51,31,20,.55))}
.v2-tissus .v2-wrap{position:relative}
.v2-tissus__defile{--tc:clamp(150px,13.7vw,263px);--tg:clamp(14px,4.1vw,79px);max-width:calc(4*var(--tc) + 3*var(--tg));margin:0 auto}   /* 4 cartes centrées, comme la maquette */
.v2-tissus__tete{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.v2-tissus__nb{margin:0;font:italic 400 clamp(15px,1.04vw,20px)/1.4 var(--v2-sans);color:var(--v2-creme2)}   /* même style que « Découvrir nos points de vente » */
.v2-tissus__nav{display:flex;justify-content:flex-end;gap:10px}
.v2-tissus__nav button{width:44px;height:44px;border:1px solid rgba(255,255,255,.5);background:rgba(51,31,20,.35);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,color .3s}
.v2-tissus__nav button:hover{background:#fff;color:var(--v2-fond)}
.v2-tissus__nav button[disabled]{opacity:.3;pointer-events:none}
.v2-tissus__nav .sg-arrow--prev{transform:scaleX(-1)}
.v2-tissus .sg-rail{grid-auto-columns:var(--tc);gap:var(--tg);margin:0;padding:0 0 4px;scroll-padding:0}
.v2-tcarte{display:flex;flex-direction:column;padding:clamp(8px,.63vw,12px) clamp(8px,.63vw,12px) clamp(14px,1.2vw,24px);background:#f6f4f1 url("../img/papier.webp") center/cover;text-decoration:none;color:#707070;box-shadow:0 22px 40px -26px rgba(0,0,0,.7)}
.v2-tcarte__img{display:block;aspect-ratio:240/342;overflow:hidden;background:#ddd}
.v2-tcarte__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.v2-tcarte:hover .v2-tcarte__img img{transform:scale(1.06)}
/* légende comme l'exemple de Rémy : nom en Playfair, vraie référence dessous, centrés dans le bas de la carte, gris */
.v2-tcarte__nom{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.3vw,6px);min-height:clamp(64px,7.3vw,140px);padding:clamp(8px,1vw,18px) 4px 0;text-align:center;color:#6f6f6f}
.v2-tcarte__t{font:400 clamp(15px,1.09vw,19px)/1.15 var(--serif)}   /* 19 px au plus (Rémy : 20 px trop gros) */
.v2-tcarte__r{font:300 clamp(10px,.77vw,15px)/1.3 var(--v2-sans);color:#7a7a7a}   /* référence : 1 px de moins (Rémy) */
.v2-tissus__txt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,60px);padding:clamp(50px,5.9vw,113px) 0 0;font-size:clamp(14px,.94vw,18px);line-height:1.5}
.v2-tissus__txt p{margin:0}
/* lien sur sa propre ligne sous le texte (ex. « Voir tout le nuancier »), sans cadre,
   souligné au survol avec la même animation que le menu du haut */
.v2-cadre{position:relative;display:table;margin-top:16px;padding:0 0 4px;color:#fff;font-style:italic;font-size:.92em;line-height:1.3;text-decoration:none;white-space:nowrap}
.v2-cadre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.v2-cadre:hover::after,.v2-cadre:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------------------ Créations : page d'une famille (2 grandes photos par ligne) */
.v2-pagetitre{display:flex;align-items:center;gap:clamp(20px,2.4vw,44px);margin:clamp(20px,2.4vw,46px) 0 clamp(36px,3.8vw,72px)}
.v2-pagetitre::after{content:"";flex:1;height:1px;background:var(--v2-ligne);transform:translateY(.5em)}
.v2-lead{font-size:clamp(15px,1.04vw,20px);line-height:1.5;max-width:46em;margin:-12px 0 clamp(36px,3.8vw,72px)}
.v2-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,3.9vw,74px) clamp(16px,2.3vw,44px)}
.v2-grille .v2-vign__img{aspect-ratio:804/733}
.v2-grille .v2-vign__nom{font:400 clamp(19px,1.3vw,25px)/1.25 var(--serif);margin-top:clamp(14px,1.7vw,33px)}
.v2-vign__voir{display:block;margin-top:6px;font:300 clamp(13px,.78vw,15px)/1.3 var(--v2-sans);opacity:.9}
.v2-vign__meta{display:block;margin-top:4px;font-size:clamp(12.5px,.75vw,14px);color:var(--v2-doux)}
.v2-familles-nav{display:flex;flex-wrap:wrap;gap:10px 30px;margin:-18px 0 clamp(36px,3.8vw,72px)}
.v2-familles-nav a{position:relative;font:300 clamp(14px,.94vw,18px)/1.4 var(--v2-sans);text-decoration:none;color:var(--v2-doux);padding-bottom:3px;transition:color .3s}
/* soulignement animé au survol, comme le menu du haut ; la page en cours reste soulignée */
.v2-familles-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.v2-familles-nav a:hover,.v2-familles-nav a[aria-current]{color:#fff}
.v2-familles-nav a:hover::after,.v2-familles-nav a[aria-current]::after,.v2-familles-nav a:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------------------ Fiche produit : points | photo | texte */
.v2-prod{display:grid;grid-template-columns:minmax(0,993fr) minmax(0,575fr);gap:clamp(28px,5.3vw,102px);align-items:start;padding-top:clamp(36px,4vw,76px)}
.v2-prod__media{position:sticky;top:calc(var(--v2-head) + 20px);display:grid;grid-template-columns:clamp(24px,5.15vw,99px) minmax(0,1fr);align-items:center}
.v2-prod .sg-gal__main{grid-column:2;aspect-ratio:792/677;background:#2a190f}
.v2-prod .sg-gal__slide--pk{background:var(--v2-papier-pk)}
.v2-prod .sg-gal__slide--pk img{padding:var(--v2-pk-marge)}   /* produit détouré : de l'air autour (dézoomé puis +10 % à la demande de Rémy) */
.v2-points{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:16px}
.v2-points button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:var(--v2-point);cursor:pointer;transition:background-color .3s,box-shadow .3s,transform .4s var(--ease)}
.v2-points button.is-indice{transform:scale(1.6);background:#fff}
/* galerie : on change de photo en glissant à la souris (v2.js) */
.is-glissable .sg-gal__main{cursor:grab;-webkit-user-select:none;user-select:none}
.is-glissable .sg-gal__main.is-glisse{cursor:grabbing}
.is-glissable .sg-gal__main img{-webkit-user-drag:none}
.v2-points button[aria-current="true"]{background:transparent;box-shadow:inset 0 0 0 1px #fff}
.v2-points button:hover{background:#fff}
.v2-prod__txt{padding-top:0}   /* le titre s'aligne sur le haut de la photo */
.v2-prod__txt h1{font:400 clamp(26px,1.6vw,30px)/1.2 var(--serif);margin:-.296em 0 0}   /* -0,296em : le haut des capitales (pas de la ligne) pile au niveau du haut de la photo (mesuré) */
.v2-prod__txt .v2-lien--i{margin-top:4px}
/* sections pliables de la fiche (Description, Dimensions, Matières) : trait avec « − / + » au bout, comme la maquette */
.v2-bloc{position:relative;padding-bottom:clamp(24px,2vw,38px)}
.v2-prod__txt .v2-bloc:first-of-type{margin-top:clamp(18px,1.6vw,30px)}
.v2-bloc>summary{position:relative;display:block;list-style:none;cursor:pointer;padding-top:clamp(14px,1.2vw,22px)}
.v2-bloc>summary::-webkit-details-marker{display:none}
.v2-bloc>summary::before{content:"";position:absolute;top:0;left:0;right:clamp(26px,2.2vw,42px);height:1px;background:var(--v2-ligne)}
.v2-bloc>summary::after{content:"+";position:absolute;top:0;right:0;width:1em;transform:translateY(-55%);text-align:center;font:300 clamp(14px,.9vw,17px)/1 var(--v2-sans);color:var(--v2-doux);transition:color .3s}
.v2-bloc[open]>summary::after{content:"−"}
.v2-bloc>summary:hover::after{color:#fff}
.v2-bloc[open]>summary{margin-bottom:clamp(12px,1.2vw,22px)}
.v2-bloc:not([open]){padding-bottom:clamp(14px,1.2vw,22px)}
.v2-bloc h2{font:300 clamp(15px,1.04vw,20px)/1.3 var(--v2-sans);margin:0}
/* « 30 coloris » à droite de « Matières », aligné sur la fin de la rangée de tissus : 5 vignettes pile dans la largeur,
   46 px = les deux flèches (2 × 16 + 4) + l'écart de 10 px */
.v2-bloc>summary:has(.v2-tissus__nb){display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.v2-bloc>summary .v2-tissus__nb{margin-right:46px;font-size:clamp(14px,.94vw,18px)}
.v2-bloc[open]>summary:has(.v2-tissus__nb){margin-bottom:2px}   /* Matières : vignettes plus proches du titre (la rangée garde 6 px d'air pour le survol) */
@supports (interpolate-size:allow-keywords){   /* ouverture / fermeture en douceur là où le navigateur sait le faire */
  .v2-prod__txt{interpolate-size:allow-keywords}
  .v2-bloc::details-content{height:0;overflow:clip;overflow-clip-margin:8px;transition:height .45s var(--ease),content-visibility .45s allow-discrete}   /* 8 px de marge : rien n'est rogné au bord (tissu survolé) */
  .v2-bloc[open]::details-content{height:auto}
}
.v2-bloc p{font-size:clamp(14px,.94vw,18px);line-height:1.5}
.v2-bloc ul{list-style:none;margin:0;padding:0;font-size:clamp(14px,.94vw,18px);line-height:1.7}
.v2-mat{display:flex;align-items:center;gap:10px}
.v2-mat .sg-rail{flex:1;min-width:0;grid-auto-columns:calc((100% - 4 * 11px) / 5);gap:11px;margin:0 -5px;padding:6px 5px;scroll-padding:0 5px}   /* de l'air tout autour : le tissu survolé grossit sans que son contour soit rogné */
.v2-mat .sg-nuancier{grid-template-columns:none}   /* c'est un défilé, pas la grille du nuancier */
.v2-mat .sg-tissu__img{aspect-ratio:88/89;background:none;outline:1px solid transparent;outline-offset:-1px}
.v2-mat .sg-tissu__img img{width:100%;height:100%;object-fit:cover}
.v2-mat .sg-tissu:hover .sg-tissu__img,.v2-mat .sg-tissu.is-photo .sg-tissu__img{outline-color:#fff}
/* effet « dock » très léger (signature.js) : le tissu survolé grossit à peine, ses voisins s'écartent */
.v2-mat .sg-nuancier.is-dock .sg-tissu.is-grand .sg-tissu__img{transform:scale(1.06);box-shadow:0 10px 18px -10px rgba(0,0,0,.7)}
/* flèches des tissus : chevrons fins (comme le « + / − »), au niveau des échantillons, calées à droite */
.v2-mat__nav{flex:none;display:flex;align-items:center;gap:4px}
.v2-mat__nav button{width:16px;height:36px;padding:0;border:0;background:none;color:var(--v2-doux);cursor:pointer;display:grid;place-items:center;transition:color .3s}
.v2-mat__nav svg{width:7px;height:13px;fill:none;stroke:currentColor;stroke-width:1;overflow:visible}
.v2-mat__nav button:hover{color:#fff}
/* pas de cadre blanc de focus après un clic (flèches, photo de la galerie) ; au clavier, repère discret à la place */
.v2-mat__nav button:focus,.v2-prod .sg-gal__main:focus,.v2-bloc>summary:focus{outline:none}
.v2-mat__nav button:focus-visible{color:#fff}
.v2-bloc>summary:focus-visible::after{color:#fff}
.v2-mat__nav button[disabled]{opacity:.3;pointer-events:none}
.v2-mat__nav [data-rail-prev][disabled]{visibility:hidden}   /* au début : seule la flèche « > » de la maquette (place gardée : rien ne bouge en naviguant) */
.v2-coloris{margin-top:14px;font-size:clamp(13px,.83vw,16px);color:var(--v2-doux)}
.v2-coloris em{color:#fff;font-style:italic}
.v2-prod__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* boutons fins, clairs sur fond sombre */
.v2-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 26px;border:1px solid rgba(255,255,255,.7);color:#fff;font:400 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;background:transparent;transition:background-color .35s var(--ease),color .35s var(--ease)}
.v2-btn:hover{background:#fff;color:var(--v2-fond)}
.v2-btn--plein{background:var(--v2-creme);border-color:var(--v2-creme);color:var(--v2-fond)}
.v2-btn--plein:hover{background:transparent;color:#fff}

/* sections de bas de fiche et pages d'ensemble */
.v2-section{padding-top:clamp(70px,8vw,150px)}   /* padding-top seul : garde les marges latérales de .v2-wrap */
.v2-ens-photo{display:block;aspect-ratio:21/9;overflow:hidden;margin-bottom:clamp(36px,3.8vw,72px)}
.v2-ens-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.v2-ens-photo:hover img{transform:scale(1.03)}
.v2-sous{font:300 clamp(14px,.94vw,18px)/1.4 var(--v2-sans);color:var(--v2-doux);margin:0 0 clamp(20px,2vw,36px)}
.v2-grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,3vw,56px) clamp(14px,3.75vw,72px)}
.v2-rail-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.v2-rail-tete .v2-pagetitre{flex:1;margin-bottom:clamp(30px,3vw,56px)}
.v2-railnav{display:flex;gap:10px;margin-bottom:clamp(30px,3vw,56px)}
.v2-railnav button{width:46px;height:46px;border:1px solid var(--v2-ligne);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,color .3s}
.v2-railnav button:hover{background:#fff;color:var(--v2-fond)}
.v2-railnav button[disabled]{opacity:.3;pointer-events:none}
.v2-railnav .sg-arrow--prev{transform:scaleX(-1)}
.v2-rail.sg-rail{--rg:clamp(16px,2vw,28px);grid-auto-columns:calc((100% - 2 * var(--rg)) / 3);gap:var(--rg);margin:0;padding:0 0 4px;scroll-padding:0}   /* 3 photos pile : la dernière finit sous la flèche de droite */
.v2-rail .v2-vign__img{aspect-ratio:4/3}
.v2-rail .v2-vign__nom{font:400 clamp(19px,1.3vw,25px)/1.25 var(--serif)}

/* Ensemble : grande photo, composition, pièces */
.v2-ensemble-hero{margin:0 var(--v2-g2);aspect-ratio:16/7;overflow:hidden}
.v2-ensemble-hero img{width:100%;height:100%;object-fit:cover}
.v2-ens-intro{display:grid;grid-template-columns:minmax(0,621fr) minmax(0,960fr);gap:clamp(24px,3vw,60px);padding-top:clamp(50px,6vw,110px)}
.v2-ens-intro .v2-coloris{margin-top:0;margin-bottom:12px;display:flex;align-items:center;gap:14px;text-decoration:none}
.v2-ens-intro .v2-coloris img{width:56px;height:56px;object-fit:cover;flex:none}
.v2-pieces{display:grid;gap:clamp(50px,5vw,96px)}
.v2-piece{display:grid;grid-template-columns:minmax(0,792fr) minmax(0,575fr);gap:clamp(28px,5.3vw,102px);align-items:center}
.v2-piece:nth-child(even) .v2-piece__img{order:2}
.v2-piece__img{display:block;aspect-ratio:5/4;background:var(--v2-papier-pk)}
.v2-piece__img img{width:100%;height:100%;object-fit:contain;padding:var(--v2-pk-marge)}
.v2-piece .v2-h3{margin:6px 0 14px}
.v2-piece .v2-h3 a{text-decoration:none}
.v2-piece p{font-size:clamp(14px,.94vw,18px);line-height:1.55}
.v2-piece ul{list-style:none;padding:0;margin:16px 0 18px;border-top:1px solid var(--v2-ligne)}
.v2-piece li{padding:10px 0;border-bottom:1px solid var(--v2-ligne);font-size:clamp(13.5px,.88vw,16px)}
.v2-kicker{display:block;font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--v2-doux)}

/* Histoire */
.v2-histoire{display:grid;grid-template-columns:minmax(0,621fr) minmax(0,960fr);gap:clamp(24px,3vw,60px);padding-top:clamp(56px,7vw,130px)}
.v2-histoire__txt{font-size:clamp(15px,.99vw,19px);line-height:1.65}
.v2-histoire__txt p{margin:0 0 1.3em}
.v2-histoire__txt .v2-citation{font:italic 400 clamp(21px,1.6vw,30px)/1.4 var(--serif);color:var(--v2-creme)}
.v2-histoire__fin{font:italic 400 clamp(18px,1.2vw,23px)/1.4 var(--serif);color:var(--v2-creme)}
.v2-duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,2.3vw,44px);padding-top:clamp(60px,7vw,130px)}
.v2-duo>div{aspect-ratio:4/5;overflow:hidden}
.v2-duo>div:last-child{aspect-ratio:auto}
.v2-duo img{width:100%;height:100%;object-fit:cover}

/* Matières : le nuancier en cartes papier */
.v2-nuancier{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2.3vw,44px) clamp(12px,2vw,38px)}
.v2-nuancier .v2-tcarte{width:100%;border:0;font:inherit;text-align:left;cursor:pointer}
.v2-nuancier .v2-tcarte__nom{min-height:clamp(56px,5.2vw,100px)}
.v2-nuancier .v2-tcarte__img{aspect-ratio:240/342;background:#ddd}
.v2-nuancier .sg-tissu{align-self:stretch}   /* cartes d'une même rangée à la même hauteur, même si un nom passe sur 2 ou 3 lignes */
/* effet « dock » (signature.js, souris seulement) : la carte survolée grossit, ses voisines de rangée s'écartent (--dx) */
.v2-nuancier.is-dock .sg-tissu{transform:translateX(var(--dx,0px));transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,opacity 1s var(--ease)}
.v2-nuancier.is-dock .sg-tissu > span{transform:none}
.v2-nuancier.is-dock .sg-tissu.is-grand{transform:scale(1.1);box-shadow:0 26px 40px -18px rgba(0,0,0,.75)}
.v2-nuancier.is-dock .sg-tissu.is-grand .sg-tissu__img{transform:none;box-shadow:none}
.v2-note{font-size:clamp(13px,.8vw,15px);color:var(--v2-doux);margin-top:clamp(40px,4vw,70px);max-width:46em}
.sg-lb__box{color:var(--brun)}
.sg-lb__box .sg-tissu__ref{color:var(--brun-60)}

/* Panneau « papier » : les composants communs du site (carte des revendeurs, mentions) y gardent leur rendu clair */
.v2-papier{background:#f8f5f0 url("../img/papier-clair.webp") 0 0/700px auto repeat;   /* papier clair raccordable : aucune coupure */
color:var(--brun);padding:clamp(22px,3vw,56px)}
.v2-papier .sg-finder{border-top:0}
/* liste des magasins : au survol (et magasin sélectionné), léger fond brun, fin trait qui se dessine à gauche, nom qui glisse */
.v2-papier .sg-store{position:relative;transition:background-color .35s var(--ease)}
.v2-papier .sg-store::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;background:var(--brun);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--ease)}
.v2-papier .sg-store:hover,.v2-papier .sg-store.is-on{background:rgba(59,37,25,.055)}
.v2-papier .sg-store:hover::before,.v2-papier .sg-store.is-on::before{transform:scaleY(1)}
.v2-papier .sg-store h3{transition:transform .4s var(--ease)}
.v2-papier .sg-store:hover h3,.v2-papier .sg-store.is-on h3{transform:translateX(6px)}
.v2-papier .sg-legal{padding-bottom:0}
.v2-papier .sg-legal__bloc:first-child{border-top:0;padding-top:0}
.v2-pro{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding-top:clamp(60px,6vw,110px)}
.v2-pro p{font-size:clamp(15px,1vw,19px);max-width:40em}
.v2-btns{display:flex;flex-wrap:wrap;gap:12px}
.v2-ancres{display:flex;flex-wrap:wrap;gap:10px;margin:-14px 0 clamp(30px,3vw,56px)}

/* Mentions légales : le sommaire reste en haut de l'écran (sous le menu) une fois la page défilée ;
   la section à l'écran y est soulignée (v2.js). Les ancres s'arrêtent juste sous lui. */
.v2-sommaire{position:sticky;top:var(--v2-head);z-index:40;margin:-18px calc(-1 * var(--v2-g)) clamp(24px,2.5vw,48px);padding:12px var(--v2-g);transition:background-color .35s}
.v2-sommaire.is-colle{background:rgba(38,22,14,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html:has(.v2-sommaire){scroll-padding-top:calc(var(--v2-head) + 72px)}
.v2-papier .sg-legal__bloc{scroll-margin-top:0}

/* ------------------------------------------------------------------ Accessibilité : bouton partagé (stock/accessibilite.php).
   Ici, seulement ce qui est propre à la V2 : le contraste renforcé par les variables du thème, et l'arrêt des animations V2. */
.a11y-contraste{--v2-texte:#fff;--v2-doux:#fff;--v2-creme2:#fff;--v2-ligne:rgba(255,255,255,.8)}
.a11y-contraste body::before{opacity:0}
.a11y-calme .sg-rideau{display:none}
.a11y-calme .sg-reveal{opacity:1;transform:none}

/* Catalogue : la liseuse (composant commun) sur le fond texturé */
.v2-liseuse.sg-liseuse{background:transparent;min-height:calc(100svh - var(--v2-head));padding-top:calc(var(--v2-head) + 8px)}

/* Au doigt, les vignettes à moitié visibles restent affichées pendant le glissement (le masquage « par pages »
   de signature.js est fait pour les flèches à la souris ; au doigt il faisait disparaître les cartes en cours de geste). */
@media (pointer:coarse){
  .v2-tissus [data-rail-entier]>.is-coupe,.v2-mat [data-rail-entier]>.is-coupe{opacity:1;pointer-events:auto}
}

/* ------------------------------------------------------------------ Responsive */
@media (max-width:1100px){
  .v2-nuancier{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
  body::before{background-image:url("../img/fond-raccord-960.webp")}
  .v2-head__nav{display:none}
  .v2-head .sg-burger{display:block;margin-right:-10px}
  .v2-intro,.v2-ens-intro,.v2-histoire{grid-template-columns:minmax(0,1fr)}
  .v2-intro .v2-titre{padding-top:0}
  .v2-fam{grid-template-columns:minmax(0,1fr)}
  .v2-fam__txt p{max-width:40em}
  .v2-prod{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…) : la rangée des 30 tissus ne doit pas élargir la page */
  .v2-prod__media{position:relative;top:0;grid-template-columns:minmax(0,1fr)}
  .v2-prod .sg-gal__main{grid-column:1}
  .v2-points{grid-row:2;flex-direction:row;justify-content:center;margin-top:16px}
  .v2-prod__txt{padding-top:10px}
  .v2-piece{grid-template-columns:minmax(0,1fr)}
  .v2-piece:nth-child(even) .v2-piece__img{order:0}
  .v2-rail.sg-rail{grid-auto-columns:calc((100% - var(--rg)) / 2)}
  .v2-pro{grid-template-columns:1fr}
}
@media (max-width:760px){
  .v2-hero{aspect-ratio:4/3.4;margin:0}
  .v2-hero img{object-position:58% 50%}
  .v2-ensemble-hero{aspect-ratio:4/3;margin:0}
  .v2-atelier{min-height:0;padding:56px 0}
  .v2-carte{grid-template-columns:1fr}
  .v2-fam__vigns{gap:12px}
  /* accueil sur mobile : 2 produits à l'écran, le 3e à droite en défilement horizontal ; la rangée va jusqu'au bord de l'écran
     pour que le 3e dépasse un peu et invite à glisser */
  .v2-crea .v2-fam__vigns{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 14px) / 2);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--v2-g));padding-right:var(--v2-g);scroll-padding-left:0}
  .v2-crea .v2-fam__vigns::-webkit-scrollbar{display:none}
  .v2-crea .v2-fam__vigns>*{scroll-snap-align:start}
  .v2-vign__nom{font-size:14px}
  .v2-grille{grid-template-columns:1fr}
  .v2-grille3{grid-template-columns:1fr 1fr}
  .v2-tissus__txt{grid-template-columns:1fr}
  .v2-tissus__defile{max-width:none}
  /* 2 cartes pile entre les marges (alignées sur le texte et les flèches) ; la rangée va d'un bord à l'autre de l'écran
     pour que les cartes glissent sous le doigt sans être coupées net à la marge */
  .v2-tissus .sg-rail{grid-auto-columns:calc((100% - var(--tg)) / 2);margin:0 calc(-1 * var(--v2-g));padding:0 var(--v2-g) 4px;scroll-padding:0 var(--v2-g)}
  .v2-nuancier{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}   /* 3 coloris par ligne sur mobile */
  .v2-nuancier .v2-tcarte{padding:6px 6px 10px}
  .v2-nuancier .v2-tcarte__nom{min-height:46px;padding-top:6px}
  .v2-nuancier .v2-tcarte__t{font-size:13px}
  .v2-nuancier .v2-tcarte__r{font-size:10px}
  .v2-rail.sg-rail{grid-auto-columns:80%}
  .v2-railnav{display:none}
  .v2-duo{grid-template-columns:1fr}
  .v2-foot__cols{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .v2-papier{padding:18px 14px}
  .v2-sommaire{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .v2-sommaire::-webkit-scrollbar{display:none}
}