/* Page produit « Nos barriques en chêne français ».
   Genere depuis la maquette validee ; tout est porte par .tb-produit
   pour ne rien deverser sur le reste du site (Divi). */

@font-face{font-family:'Josefin Sans';src:url(fonts/Josefin-Sans.woff2) format('woff2');font-weight:100 700;font-style:normal;font-display:block}
@font-face{font-family:'Belleza';src:url(fonts/Belleza.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Marcellus';src:url(fonts/Marcellus.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}

.tb-produit{--chai:#0D0B09;          /* le noir du chai, biais brun */
  --chai-2:#171310;
  --craie:#EDEDE9;         /* la craie de la ceramique, froide */
  --chene:#C9A870;         /* le chene reel, blond, sur les scenes noires */
  --braise:#B8431C;        /* la braise, une seule scene */

  /* Deux jetons de role. Le meme gris et le meme or ne peuvent pas etre lisibles
     sur la craie ET sur le chai : ils sont redefinis par fond, pas par element. */
  --label:#8C6E4A;         /* petites capitales : le bronze du site, 4,7:1 sur blanc */
  --or:#8C6E4A;            /* chiffres d'accent : le meme bronze, un seul accent */

  --sol:#FFFFFF;           /* le blanc du reste du site (15/09/2026) */
  --sol-2:#FFFFFF;         /* l'aplat TCA passe au blanc lui aussi */
  --encre:#666666;         /* le gris du texte courant du site (Divi, partout) */
  --encre-douce:#666666;   /* le site n'a qu'un gris de texte, pas deux */
  --titre:#8C6E4A;         /* titres, liens et boutons : la couleur de marque */
  --fort:#1A1714;          /* reserve aux aplats pleins, jamais au texte */
  --trait:rgba(140,110,74,.26);

  /* Roles typographiques calques sur l'usage reel du site : les pages produit
     titrent en Marcellus capitales, courent en Belleza, et reservent Josefin
     Sans aux petites etiquettes (menu, pied de page). */
  --d:'Marcellus',Georgia,serif;                    /* titres et grands chiffres */
  --s:'Marcellus',Georgia,serif;                    /* phrases d'accroche, bas de casse */
  --c:'Belleza',Helvetica,Arial,sans-serif;         /* texte courant */
  --u:'Josefin Sans',Helvetica,Arial,sans-serif;    /* etiquettes et donnees */

  --pad:clamp(22px,5vw,80px);
  --lg:min(1280px,92vw);}
/* Fonds sombres : la craie devient le fond, les jetons s'eclaircissent. */
.tb-produit .feu, .tb-produit .plaque--encre{--label:#C9A870;--or:#C9A870;
  --titre:#C9A870;--fort:#EDEDE9;
  --encre:var(--craie);--encre-douce:#A9A29A;--trait:rgba(237,237,233,.16)}
/* Le sol second est un ton plus bas que la craie : le gris et l'or de role
   descendent d'autant pour rester au-dessus de 4,5:1. */
/* L'aplat est blanc depuis le 15/09/2026 : il reprend les jetons de base. */
.tb-produit *{box-sizing:border-box}
.tb-produit{margin:0;background:var(--sol);color:var(--encre);font-family:var(--c);
  font-size:14px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.tb-produit img{max-width:100%;display:block}
.tb-produit a{color:inherit}
.tb-produit :focus-visible{outline:2px solid var(--chene);outline-offset:3px}
/* ---------- socle typographique ---------- */
/* Agrandi le 29/09/2026 (11-13px a 14-17px) : « ca ne se voit pas ». */
.tb-produit .eyebrow{font-family:var(--u);font-weight:600;font-size:clamp(14px,1.25vw,17px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin:0}
/* color:inherit Divi impose h1..h6{color:#333}, illisible sur le noir du chai
   (1,55:1). En heritant, chaque titre prend la couleur de sa scene. */
.tb-produit h1, .tb-produit h2, .tb-produit h3{text-wrap:balance;margin:0;color:var(--titre)}
/* Titres de page : Marcellus 40px en casse normale, comme les pages historiques
   du site (Emploi). Arbitrage de Cyril du 29/09/2026, qui remplace le Belleza
   capitales releve le 16/09 sur Nos barriques. Titres de section : Marcellus
   28px capitales, tous en #8C6E4A et sans interlettrage force. */
.tb-produit h1{font-family:var(--d);font-weight:500;letter-spacing:normal;text-transform:none;
  font-size:clamp(30px,4.4vw,40px);line-height:1.15}
.tb-produit h2{font-family:var(--d);font-weight:500;letter-spacing:normal;text-transform:uppercase;
  font-size:clamp(22px,2.4vw,28px);line-height:1.3}
.tb-produit h3{font-family:var(--d);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  font-size:clamp(18px,1.7vw,22px)}
.tb-produit .lede{font-family:var(--s);font-size:clamp(19px,2vw,24px);line-height:1.45;
  letter-spacing:normal;max-width:26ch;margin:0;color:var(--titre)}
.tb-produit .prose{max-width:62ch;color:var(--encre-douce);margin:0}
.tb-produit .num{font-family:var(--d);font-weight:400;font-variant-numeric:tabular-nums;line-height:.9;
  font-size:clamp(44px,6.6vw,96px);letter-spacing:.01em}
/* ---------- scenes ---------- */
.tb-produit .scene{padding:clamp(80px,13vh,160px) var(--pad)}
.tb-produit .scene--sombre{background:var(--chai);color:var(--craie)}
.tb-produit .scene--sombre .prose{color:#A9A29A}
/* Le texte courant des scenes noires : --encre-douce est calibree pour la craie. */
.tb-produit .feu .prose, .tb-produit .plaque--encre .prose{color:#A9A29A}
.tb-produit .wrap{width:var(--lg);margin-inline:auto}
/* Un texte qui ouvre une scene deja occupee par autre chose. */
.tb-produit .scene__ouverture{margin-bottom:clamp(46px,7vh,86px);padding-bottom:clamp(38px,5vh,60px);
  border-bottom:1px solid var(--trait)}
/* ---------- bandeau du logo ----------
   Le hero a ete retire le 15/09/2026 ; le logo qu'il portait est repose seul
   au-dessus du premier bloc, a la meme taille. */
.tb-produit .masthead{display:flex;justify-content:center;
  padding:clamp(26px,4vh,46px) var(--pad) 0}
.tb-produit .masthead img{height:clamp(46px,5.6vw,78px);width:auto}

/* Le titre de page. Le hero portait le H1 ; il est passe au premier bloc, qui
   garde l'allure d'un titre de section. */
.tb-produit .titre-page{font-family:var(--d);font-weight:500;letter-spacing:normal;
  text-transform:none;font-size:clamp(30px,4.4vw,40px);line-height:1.15;
  text-wrap:balance;margin:0;color:var(--titre)}

/* ---------- 1. ouverture (hero retire le 15/09/2026, regles conservees) ---------- */
.tb-produit .hero{position:relative;background:var(--sol);color:var(--encre);
  min-height:clamp(560px,86svh,820px);display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(26px,4vh,44px) var(--pad) 0;overflow:hidden}
.tb-produit .hero__glow{position:absolute;left:50%;top:46%;width:min(150vw,1500px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(201,168,112,.30) 0%,rgba(201,168,112,.09) 34%,transparent 66%)}
/* Le logo de la maison, en tete de page : le theme ne l'affiche nulle part. */
.tb-produit .hero__logo{position:relative;z-index:2;display:flex;justify-content:center;
  padding-bottom:clamp(8px,1.6vh,18px)}
.tb-produit .hero__logo img{height:clamp(46px,5.6vw,78px);width:auto}
.tb-produit .hero__mid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  align-content:center;justify-items:center;text-align:center;gap:clamp(18px,3vh,32px);
  padding:clamp(28px,6vh,60px) 0}
.tb-produit .hero h1{color:var(--encre)}
.tb-produit .hero h1 em{font-style:normal;display:block;font-weight:200;color:var(--or)}
.tb-produit .hero__lede{font-family:var(--s);font-size:clamp(17px,1.9vw,23px);color:var(--encre-douce);
  max-width:34ch;line-height:1.55;margin:0}
.tb-produit .hero__objet{position:relative;z-index:2;height:clamp(150px,30vh,300px);width:auto;margin:0 auto;
  filter:drop-shadow(0 34px 55px rgba(26,23,20,.28))}
.tb-produit .hero__socle{position:relative;z-index:2;border-top:1px solid rgba(201,168,112,.55);
  width:min(940px,100%);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:18px 0 clamp(20px,4vh,34px)}
.tb-produit .hero__socle .chiffre{align-items:center;text-align:center}
.tb-produit .chiffre{display:flex;flex-direction:column;gap:5px}
.tb-produit .chiffre b{font-family:var(--d);font-weight:400;color:var(--or);font-size:clamp(20px,2.4vw,30px);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1}
.tb-produit .chiffre span{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);line-height:1.4}
@media (max-width:720px){
  .tb-produit .hero__socle{grid-template-columns:repeat(2,1fr);gap:20px 8px}
}
/* ---------- galerie produit : le fut sous toutes ses faces ---------- */
.tb-produit .vues{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);margin-top:38px}
@media (max-width:980px){
  .tb-produit .vues{grid-template-columns:repeat(2,1fr)}
}
.tb-produit .vue{margin:0;display:flex;flex-direction:column;gap:14px}
.tb-produit .vue__cadre{background:#E3E2DD;aspect-ratio:4/5;display:grid;place-items:center;
  padding:clamp(16px,2.2vw,30px);overflow:hidden}
.tb-produit .vue__cadre img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tb-produit .vue:hover .vue__cadre img{transform:scale(1.045)}
.tb-produit .vue b{display:block;font-family:var(--d);font-weight:400;text-transform:uppercase;
  letter-spacing:.15em;font-size:14px;color:var(--encre);margin-bottom:4px}
.tb-produit .vue span{font-size:14.5px;line-height:1.55;color:var(--encre-douce)}
/* Bande de details : deux futs particuliers et un gros plan. */
.tb-produit .details{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:clamp(14px,2vw,30px);margin-top:clamp(14px,2vw,30px)}
@media (max-width:980px){
  .tb-produit .details{grid-template-columns:1fr}
}
.tb-produit .details .vue__cadre{aspect-ratio:1}
.tb-produit .details .vue--large .vue__cadre{padding:0;background:var(--chai)}
.tb-produit .details .vue--large img{width:100%;height:100%;object-fit:cover;max-height:none}
/* Bande pleine largeur (atelier). */
.tb-produit .bande{margin:clamp(50px,8vh,90px) 0 0;position:relative}
.tb-produit .bande img{width:100%;height:clamp(280px,52vh,560px);object-fit:cover}
.tb-produit .bande figcaption{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);padding-top:12px}
/* ---------- 2. le chene ---------- */
.tb-produit .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:900px){
  .tb-produit .duo{grid-template-columns:1fr}
}
.tb-produit .duo__fig{margin:0}
.tb-produit .duo__fig img{width:100%;height:clamp(300px,46vh,540px);object-fit:cover}
.tb-produit .duo__fig figcaption{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);padding-top:10px}
.tb-produit .pile{display:flex;flex-direction:column;gap:26px}
.tb-produit .paliers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin-top:18px}
.tb-produit .palier{padding:0}
.tb-produit .palier .num{color:var(--or)}
.tb-produit .palier p{margin:8px 12px 0 0;font-size:14px;line-height:1.55;color:var(--encre-douce)}
.tb-produit .palier small{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);display:block;margin-top:4px}
/* ---------- 3. la chauffe (la braise) ---------- */
.tb-produit .feu{position:relative;background:var(--chai);color:var(--craie);overflow:hidden;
  padding:clamp(80px,13vh,150px) var(--pad)}
/* Le texte de la chauffe et l'illustration maison des etapes. Le dispositif
   d'origine (barrique qui changeait de teinte, quatre crans de chauffe, lecture
   automatique, halo de braise) a ete retire le 16/09/2026 a la demande du
   client. Les quatre chauffes restent lisibles sur les cartes de gamme. */
.tb-produit .chauffe{position:relative;z-index:2;display:grid;gap:clamp(26px,3.6vw,48px);
  margin-top:clamp(56px,7vh,92px)}
/* Le titre court sur toute la largeur, les deux paragraphes se rangent en deux
   colonnes : seuls, en colonne de lecture unique, ils laissaient la moitie
   droite du bloc vide. */
.tb-produit .chauffe__texte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px clamp(34px,5vw,72px);align-items:start}
.tb-produit .chauffe__texte .eyebrow,
.tb-produit .chauffe__texte h2{grid-column:1/-1}
.tb-produit .chauffe__texte h2{margin-bottom:6px}
.tb-produit .chauffe__texte .prose{max-width:none}
@media (max-width:820px){
  .tb-produit .chauffe__texte{grid-template-columns:1fr}
}
/* Les quatre etapes de l'atelier de chauffe (refaites le 20/09/2026).
   C'etait une image unique par langue : pastilles rondes et legendes gravees
   dans le PNG, donc ni la forme ni la typographie n'etaient reglables. Les
   photographies sont maintenant quatre fichiers 300x400 et les legendes du
   texte, dans la Belleza du site.
   La largeur du bloc est bornee a 1000px : les photographies sont redecoupees
   d'un montage de 2020 et n'ont pas un pixel de plus a donner. */
.tb-produit .chauffe__etapes{margin:0;width:min(1000px,100%);margin-inline:auto}
.tb-produit .chauffe__etapes ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);align-items:start}
.tb-produit .chauffe__etapes li{margin:0}
.tb-produit .chauffe__etapes img{display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover}
/* La legende : la typographie courante de la page, alignee a gauche sous la
   photo, interligne resserre. Le PNG l'ecrivait en gris clair, centre, avec
   deux lignes separees par un blanc de paragraphe. */
.tb-produit .chauffe__etapes li p{font-family:var(--c);font-size:13.5px;line-height:1.45;
  color:var(--encre);margin:14px 0 0;text-wrap:balance}
.tb-produit .chauffe__etapes figcaption{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label);margin-top:26px;text-align:center}
@media (max-width:720px){
  .tb-produit .chauffe__etapes ol{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,4vw,22px) clamp(12px,3vw,18px)}
}

/* ---------- la chauffe en clair (15/09/2026) ----------
   La scene garde ses deux classes .feu .feu--clair : le noir du chai a laisse la
   place au fond du site et les jetons reviennent a leurs valeurs claires. */
.tb-produit .feu--clair{background:var(--sol);color:var(--encre);
  --label:#8C6E4A;--or:#8C6E4A;--titre:#8C6E4A;--fort:#1A1714;
  --encre:#666666;--encre-douce:#666666;
  --trait:rgba(140,110,74,.26)}
.tb-produit .feu--clair .prose{color:var(--encre-douce)}
/* La legende de la bande photo suit. */
.tb-produit .feu--clair .bande figcaption{color:var(--label)}

/* ---------- 4. selections et gammes ---------- */
.tb-produit .bascule{display:inline-flex;border:1px solid rgba(140,110,74,.45);padding:4px;gap:4px}
.tb-produit .bascule button{font-family:var(--u);font-weight:500;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;padding:11px 24px;border:0;background:none;color:var(--or);
  cursor:pointer;transition:all .3s}
.tb-produit .bascule button:hover{background:rgba(140,110,74,.10)}
/* L'actif en bronze plein : sur le fond blanc, l'encre ne disait pas assez
   qu'il s'agit d'un choix (15/09/2026). */
.tb-produit .bascule button[aria-pressed="true"]{background:var(--or);color:#FFFFFF}
/* Cinq fiches de gammes, plus une grille de tableau : chacune tient sur sa carte,
   la Culte 140 prend toute la largeur sur le noir du chai. */
/* Le titre des gammes : il etait le H1 jusqu'au 16/09/2026, il introduit
   maintenant la grille, la ou la page 878 le place deja. */
.tb-produit .titre-gammes{margin-top:clamp(52px,6vh,78px)}
.tb-produit .titre-gammes + .gammes{margin-top:26px}
.tb-produit .gammes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px);margin-top:34px}
@media (max-width:1250px){
  .tb-produit .gammes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .tb-produit .gammes{grid-template-columns:1fr}
}
.tb-produit .gamme{position:relative;background:var(--sol);border:1px solid var(--trait);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:18px;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease}
.tb-produit .gamme[hidden]{display:none}
/* Le filet d'or se tire au survol : le seul mouvement de la grille. */
.tb-produit .gamme::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.tb-produit .gamme:hover{border-color:rgba(201,168,112,.5);transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(13,11,9,.12)}
.tb-produit .gamme:hover::before{transform:scaleX(1)}
.tb-produit .gamme__tete{display:flex;flex-direction:column;gap:6px}
.tb-produit .gamme h3{color:var(--titre)}
.tb-produit .gamme__rare{font-family:var(--u);font-size:12.5px;letter-spacing:.03em;text-transform:none;
  color:var(--titre);line-height:1.45;max-width:44ch}
/* Le grain en tete de carte (29/09/2026) : la maison ne veut plus que les
   mois de sechage portent la carte. Le sechage redescend dans la liste. */
.tb-produit .gamme__grain{margin:0;display:flex;flex-direction:column;gap:8px;
  border-bottom:1px solid var(--trait);padding-bottom:16px}
.tb-produit .gamme__grain small{font-family:var(--u);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label);line-height:1.4}
.tb-produit .gamme__grain span{font-family:var(--d);font-weight:400;font-size:clamp(22px,2vw,28px);
  line-height:1.2;color:var(--or);text-wrap:balance}
.tb-produit .gamme dl{margin:0;display:flex;flex-direction:column;gap:13px;padding-top:0;border-top:0}
.tb-produit .gamme dl > div + div{border-top:1px solid var(--trait);padding-top:13px}
.tb-produit .gamme dt{font-family:var(--u);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.tb-produit .gamme dd{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--encre)}
.tb-produit .gamme__profil{font-family:var(--s);font-size:14px;line-height:1.7;color:var(--encre);
  margin:0;flex:1;padding-top:2px}
.tb-produit .gamme__profil::before{content:"";display:block;width:28px;height:1px;background:var(--or);
  margin-bottom:15px}
/* Les plaquettes : un lien par format, comme sur les pages de selection. */
/* Repli natif. Les douze libelles de format doublaient la hauteur de la carte,
   pour la meme liste repetee d'une gamme a l'autre : le format se choisit une
   fois la gamme retenue, il n'a pas a etre lu cinq fois. <details> plutot qu'un
   accordeon maison le contenu reste dans le DOM (indexable, et trouvable par
   la recherche du navigateur, qui ouvre le repli sur les moteurs recents), le
   clavier et le lecteur d'ecran marchent sans une ligne de JS. */
.tb-produit .gamme__fiches{border-top:1px solid var(--trait);padding-top:16px}
.tb-produit .gamme__fiches-tete{font-family:var(--u);font-weight:500;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label);margin:0;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:10px;position:relative;padding-right:22px;
  transition:color .25s ease}
.tb-produit .gamme__fiches-tete::-webkit-details-marker{display:none}
.tb-produit .gamme__fiches-tete:hover{color:var(--or)}
.tb-produit .gamme__fiches-tete:focus-visible{outline:2px solid var(--or);outline-offset:4px}
/* Pastille du nombre de formats et chevron de repli : les deux ont ete lus
   comme un second bouton a cote de « Fiches techniques ». La pastille est
   retiree du HTML, le chevron ici. Les regles restent servies a la copie figee
   de l'avant/apres, qui a sa propre feuille. */
.tb-produit .gamme__fiches-nb{font-size:11px;letter-spacing:.14em;line-height:1;
  color:var(--encre-douce);border:1px solid var(--trait);padding:3px 7px}
.tb-produit .gammes .gamme--large .gamme__fiches-nb{color:var(--encre-douce);border-color:var(--trait)}
/* Le titre seul porte desormais l'affordance : il se souligne comme les liens
   de la page, sinon plus rien ne dit qu'il s'ouvre. */
.tb-produit .gamme__fiches-tete{border-bottom:1px solid transparent;align-self:start;
  width:fit-content;transition:color .25s ease,border-color .25s ease}
.tb-produit .gamme__fiches-tete:hover{border-bottom-color:var(--or)}
.tb-produit .gamme__fiches ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tb-produit .gamme__fiches a{position:relative;display:inline-block;padding-right:26px;
  font-size:13px;line-height:1.5;color:var(--encre-douce);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.tb-produit .gamme__fiches a:hover, .tb-produit .gamme__fiches a:focus-visible{color:var(--or);border-bottom-color:var(--or)}
/* Le theme ajoute sa fleche au survol seulement (a.dltrigger:hover::after,
   flottante) : elle poussait le libelle a la ligne et faisait grandir la
   carte au passage de la souris. On la sort du flux, sa place est reservee
   en permanence et seule son opacite varie. */
.tb-produit .gamme__fiches a.dltrigger::after{content:url(/wp-content/uploads/2019/03/Arrow-right-hover.png);
  position:absolute;right:0;top:50%;transform:translateY(-50%);float:none;line-height:0;
  opacity:0;transition:opacity .25s ease}
.tb-produit .gamme__fiches a.dltrigger:hover::after,
.tb-produit .gamme__fiches a.dltrigger:focus-visible::after{opacity:1}
/* Culte 140 : serie commemorative, traitee en bandeau sombre. */
.tb-produit .gammes .gamme--large{grid-column:1/-1;background:var(--sol);color:var(--encre);
  border-color:rgba(140,110,74,.38)}
/* Le filet d'or de la serie limitee est permanent, pas seulement au survol. */
.tb-produit .gammes .gamme--large::before{transform:scaleX(1)}
.tb-produit .gammes .gamme--large h3{color:var(--titre)}
.tb-produit .gammes .gamme--large dd{color:var(--encre)}
.tb-produit .gammes .gamme--large .gamme__rare{color:var(--titre)}
.tb-produit .gammes .gamme--large .gamme__profil{color:var(--encre);max-width:82ch}
.tb-produit .gammes .gamme--large:hover{box-shadow:0 18px 42px rgba(13,11,9,.12)}
.tb-produit .gammes .gamme--large dl{flex-direction:row;flex-wrap:wrap;gap:16px clamp(24px,4vw,64px)}
.tb-produit .gammes .gamme--large dl > div{min-width:150px}
.tb-produit .gammes .gamme--large dl > div + div{border-top:0;padding-top:0}
@media (min-width:721px){
  /* :not([hidden]) : sans lui, ce display:grid rallume la fiche de l'autre
     selection, masquee par le script (meme specificite, regle plus tardive). */
  .tb-produit .gammes .gamme--large:not([hidden]){display:grid;grid-template-columns:auto 1fr;gap:0 clamp(28px,4vw,56px);align-items:start}
  .tb-produit .gammes .gamme--large .gamme__tete{grid-column:1;grid-row:1}
  .tb-produit .gammes .gamme--large .gamme__grain{grid-column:1;grid-row:2;margin-top:22px}
  .tb-produit .gammes .gamme--large dl{grid-column:2;grid-row:1/3;padding-top:6px}
  .tb-produit .gammes .gamme--large .gamme__profil{grid-column:1/-1;grid-row:3;margin-top:24px}
  .tb-produit .gammes .gamme--large .gamme__fiches{grid-column:1/-1;grid-row:4;margin-top:22px}
  .tb-produit .gammes .gamme--large .gamme__fiches ul{flex-direction:row;flex-wrap:wrap;gap:8px clamp(24px,4vw,56px)}
}
/* ---------- le film de la selection ---------- */
.tb-produit .films{margin:34px 0 0}
.tb-produit .film{margin:0;display:flex;flex-direction:column;gap:12px}
.tb-produit .film[hidden]{display:none}
.tb-produit .film__cadre{background:var(--chai);position:relative;aspect-ratio:16/9;overflow:hidden}
.tb-produit .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--chai);display:block}
.tb-produit .film figcaption{font-family:var(--u);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
/* La duree « 0:00 / 0:40 » que la maison voit encore sous le film n'est pas une
   legende : c'est le compteur du lecteur du navigateur. Il se masque par les
   pseudo-elements de la barre de controle, que Chrome, Edge et Safari exposent.
   Firefox ne les expose pas et continuera de l'afficher ; le seul moyen de
   l'enlever partout serait de retirer `controls` et de refaire le lecteur. */
.tb-produit .film video::-webkit-media-controls-current-time-display,
.tb-produit .film video::-webkit-media-controls-time-remaining-display{display:none}
/* ---------- 6. la garantie ---------- */
.tb-produit .aplat{background:var(--sol-2);color:var(--encre);padding:clamp(80px,14vh,150px) var(--pad);text-align:center}
.tb-produit .titre-tca{display:flex;flex-direction:column;align-items:center;gap:24px;
  font-family:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}
.tb-produit .aplat .enorme{display:block;font-family:var(--d);font-weight:400;line-height:.95;letter-spacing:.01em;
  font-size:clamp(44px,9.4vw,140px);font-variant-numeric:tabular-nums}
.tb-produit .titre-tca__suite{font-family:var(--s);font-weight:400;font-size:clamp(17px,1.8vw,21px);
  color:var(--encre);max-width:26ch;line-height:1.4;letter-spacing:.005em;text-transform:none}
.tb-produit .aplat .enorme em{font-style:normal;color:var(--or)}
.tb-produit .aplat p{margin:26px auto 0;max-width:52ch;color:var(--encre-douce)}
.tb-produit .aplat sup{font-size:.42em;vertical-align:super;color:var(--label)}
/* ---------- 7. pleine image ---------- */
.tb-produit .plaque{position:relative;min-height:min(92vh,780px);display:grid;
  grid-template-columns:1fr 1fr;background:var(--sol);color:var(--encre)}
@media (max-width:900px){
  .tb-produit .plaque{grid-template-columns:1fr}
}
/* Les deux blocs illustres (ALMA, la foret) gardent le noir du chai sous leur
   texte : c'est la que la maison le voulait. */
.tb-produit .plaque--encre{background:var(--chai);color:var(--craie)}
.tb-produit .plaque--encre .plaque__specs{border-color:rgba(237,237,233,.15)}
.tb-produit .plaque + .plaque{border-top:1px solid var(--trait)}
.tb-produit .plaque--encre + .plaque--encre{border-top-color:rgba(237,237,233,.16)}
.tb-produit .plaque__img{position:relative;overflow:hidden;min-height:300px}
.tb-produit .plaque__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ALMA dezoomee le 20/09/2026 : la photo est un portrait 1068x1600 tres serre,
   et `cover` dans une demi-plaque paysage n'en laissait voir qu'une bande de
   douelles, vanne coupee. En `contain` la cuve entiere revient ; le fond de la
   plaque reprend le blanc du studio, les bandes laterales ne se voient pas. */
.tb-produit #alma .plaque__img{background:var(--sol)}
.tb-produit #alma .plaque__img img{object-fit:contain;object-position:center}
/* Quand la plaque montre un objet detoure et non une photo cadree. */
.tb-produit .plaque__img--objet{background:#12100D;display:grid;place-items:center;padding:clamp(30px,5vw,70px)}
.tb-produit .plaque__img--objet img{position:static;width:auto;height:auto;max-width:100%;max-height:min(70vh,620px);
  object-fit:contain;filter:drop-shadow(0 40px 70px rgba(0,0,0,.75))}
.tb-produit .plaque__txt{padding:clamp(44px,8vw,96px) var(--pad);display:flex;flex-direction:column;
  justify-content:center;gap:22px}
.tb-produit .plaque__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 26px;
  border-top:1px solid var(--trait);padding-top:24px}
/* La Culte 140 ouvre la page : la craie prend le relais du noir du hero. */
/* La Culte 140 d'ouverture ne va plus bord a bord : contenue et centree, elle
   se pose sous un hero lui-meme centre. ALMA et la foret gardent la pleine
   largeur, c'est ce que la maison a retenu pour elles. */
/* Scene d'ouverture Tribute to french coopers (03/09/2026, demande d'Audrey
   Ducraux). Le sceau de la mediatheque est un PNG noir sur blanc opaque :
   `multiply` fait disparaitre son fond sur la craie, sans retouche du fichier. */
.tb-produit .tribute__sceau{width:min(230px,58%);height:auto;margin:2px 0 -4px;mix-blend-mode:multiply}
.tb-produit .tribute__lexique{margin:0;padding-left:18px;border-left:1px solid var(--or)}
.tb-produit .tribute__lexique p{font-family:var(--s);font-size:14px;line-height:1.7;color:var(--encre);margin:0 0 10px}
.tb-produit .tribute__lexique footer{font-family:var(--u);font-size:11.5px;letter-spacing:.05em;
  line-height:1.5;color:var(--label)}
.tb-produit .tribute__renvoi{margin:0;font-family:var(--u);font-size:13px;letter-spacing:.04em}
.tb-produit .tribute__lexique a,.tb-produit .tribute__renvoi a{color:var(--or);text-decoration:none;
  border-bottom:1px solid rgba(201,168,112,.45);transition:border-color .25s ease}
.tb-produit .tribute__lexique a:hover,.tb-produit .tribute__renvoi a:hover,
.tb-produit .tribute__lexique a:focus-visible,.tb-produit .tribute__renvoi a:focus-visible{border-bottom-color:var(--or)}
.tb-produit .tribute__vues{width:var(--lg);margin:clamp(14px,1.6vw,22px) auto 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.tb-produit .tribute__vues img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
@media (max-width:720px){
  .tb-produit .tribute__vues{grid-template-columns:1fr}
  .tb-produit .tribute__vues img{aspect-ratio:4/3}
}
.tb-produit .plaque--ouverture{min-height:min(82vh,700px);width:var(--lg);margin-inline:auto}
/* Le voile blanc qui fondait le bord gauche de la photo Tribute dans le texte a
   ete retire le 20/09/2026 : la maison y voyait un halo. La photo va desormais
   bord a bord, comme celles des autres plaques. */
@media (max-width:900px){
  .tb-produit .plaque--ouverture{min-height:0}
  .tb-produit .plaque--ouverture .plaque__img{min-height:clamp(260px,42vh,420px)}
}
/* ---------- lien de fiche technique ----------
   Pose sous le texte d'une plaque, dans le registre des boutons de la page
   mais en plus discret : c'est un document, pas un appel a l'action. */
.tb-produit .fiche-lien{margin:4px 0 0}
.tb-produit .fiche-lien a{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--u);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--titre);text-decoration:none;
  border:1px solid rgba(140,110,74,.45);padding:13px 22px;transition:all .3s}
.tb-produit .fiche-lien a:hover{background:var(--or);color:#FFFFFF;border-color:var(--or)}
.tb-produit .fiche-lien__ext{font-size:11px;letter-spacing:.12em;opacity:.75;
  border-left:1px solid currentColor;padding-left:12px}

/* ---------- 8. sortie ---------- */
.tb-produit .sortie{padding:clamp(80px,13vh,150px) var(--pad);border-top:1px solid var(--trait)}
.tb-produit .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.tb-produit .bouton{font-family:var(--u);font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
  padding:16px 34px;text-decoration:none;border:1px solid var(--titre);color:var(--titre);
  transition:all .3s}
.tb-produit .bouton:hover{background:var(--titre);color:#FFFFFF}
.tb-produit .bouton--plein{background:var(--titre);color:#FFFFFF}
.tb-produit .bouton--plein:hover{background:transparent;color:var(--titre)}
@media (prefers-reduced-motion:reduce){
  .tb-produit *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}