/*
Theme Name:  Bidon Perso
Theme URI:   https://bidonperso.fr
Author:      Spécialités T.A.
Description: Thème sur mesure pour bidonperso.fr — bidons de vélo personnalisés fabriqués en France. Structure inspirée de reparermaroue.fr, charte marine Spécialités T.A. Le configurateur est fourni par l'extension « Configurateur de bidons T.A. ».
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License:     GPL-2.0-or-later
Text Domain: bidonperso
Tags:        custom-menu, custom-logo, translation-ready
*/

/* ============================================================
   bidonperso.fr — feuille de style unique
   Charte : Spécialités T.A. (marine) — structure inspirée de
   reparermaroue.fr (hero sombre, surtitres mono, rayon 3 px)
   ============================================================ */

:root{
  --nuit:#0E1620;
  --nuit-2:#16202C;
  --nuit-3:#1E2A38;
  --marine:#1F4E79;
  --marine-fonce:#173B5C;
  --bleu:#2E74B5;
  --bleu-vif:#4FA3E3;
  --papier:#FFFFFF;
  --gris:#F4F6F9;
  --gris-2:#E4E9F0;
  --gris-3:#C9D2DE;
  --texte:#1B2430;
  --texte-2:#586A7C;
  --texte-clair:#C6CDD6;
  --ok:#00843D;
  --alerte:#C4451C;
  /* Les memes, eclaircis pour tenir sur les fonds sombres. */
  --ok-clair:#3FBF6A;
  --alerte-clair:#F0724A;
  --r:3px;
  --max:1200px;
  --gout:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --corps:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:130px}
/*
 * LE RYTHME VERTICAL, RESSERRÉ SUR TOUT LE SITE.
 *
 * L'interligne était à 1,62 et les sections à 76 px : confortable pour un
 * article, trop aéré pour un site de produit qu'on parcourt. L'accueil
 * faisait onze écrans et demi, et il fallait descendre pour tout. 1,52
 * reste au-dessus du minimum de lisibilité (1,5 pour WCAG 1.4.12) et rend
 * environ un écran par page longue.
 */
body{
  margin:0;font-family:var(--corps);font-size:17px;line-height:1.52;
  color:var(--texte);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--gout);font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:0 0 .42em}
h1{font-size:clamp(2.1rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:1.24rem;letter-spacing:-.01em}
p{margin:0 0 .82em}
hr{border:0;border-top:1px solid var(--gris-2);margin:2rem 0}

.enveloppe{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:56px 0}
.section--gris{background:var(--gris)}
.section--nuit{background:var(--nuit);color:var(--texte-clair)}
.section--nuit h2,.section--nuit h3{color:#fff}
.section--serre{padding:40px 0}

.surtitre{
  font-family:var(--mono);font-size:.735rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);margin:0 0 14px;font-weight:500;
}
/* Le surtitre passe au bleu vif sur TOUS les fonds sombres, et non sur la
   seule .section--nuit : sur le nuit du hero et de l'entete de page, le bleu
   de la charte ne donne que 3,71:1. Le bleu vif en donne 6,65:1. */
.section--nuit .surtitre,.hero .surtitre,.page-tete .surtitre,
.carte--sombre .surtitre{color:var(--bleu-vif)}
.chapo{font-size:1.08rem;line-height:1.48;color:var(--texte-2);max-width:66ch}
.section--nuit .chapo{color:var(--texte-clair)}
.accent{color:var(--bleu)}
.section--nuit .accent{color:var(--bleu-vif)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--corps);font-weight:700;font-size:.96rem;
  padding:13px 22px;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  text-decoration:none!important;line-height:1.2;
}
.btn--plein{background:var(--marine);color:#fff}
.btn--plein:hover{background:var(--marine-fonce)}
/*
 * Le blanc est repose explicitement la ou le bouton est pose dans un bloc
 * qui teinte ses liens : .nav a, .pied a et consorts sont plus specifiques
 * que .btn--vif et lui passaient --texte-clair. Sur le bleu du bouton, ce
 * gris ne donnait que 3,06:1 — sous le minimum de 4,5:1 pour du texte de
 * 14 px. En blanc, 4,90:1.
 */
.btn--vif,.nav .btn--vif,.pied .btn--vif,.hero .btn--vif,
.page-tete .btn--vif,.ruban .btn--vif{background:var(--bleu);color:#fff}
.btn--vif:hover{background:var(--marine);color:#fff}
.btn--contour{background:transparent;color:var(--marine);border-color:var(--gris-3)}
.btn--contour:hover{border-color:var(--bleu);background:var(--bleu);color:#fff}
.section--nuit .btn--contour,
.hero .btn--contour,
.ruban .btn--contour,
.page-tete .btn--contour,
.carte--sombre .btn--contour{color:#fff;border-color:rgba(255,255,255,.38)}
.section--nuit .btn--contour:hover,
.hero .btn--contour:hover,
.ruban .btn--contour:hover,
.page-tete .btn--contour:hover,
.carte--sombre .btn--contour:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--blanc{background:#fff;color:var(--marine)}
/* Le cube devant « Voir ce bidon en 3D » : bp_page_tete() echappe le libelle,
   l'icone passe donc par un masque CSS, dans la couleur du texte. */
.btn--3d::before{
  content:"";flex:0 0 auto;width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 3.5 7v10L12 21.5l8.5-4.5V7L12 2.5z'/%3E%3Cpath d='M3.5 7 12 11.5 20.5 7M12 11.5v10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 3.5 7v10L12 21.5l8.5-4.5V7L12 2.5z'/%3E%3Cpath d='M3.5 7 12 11.5 20.5 7M12 11.5v10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn--blanc:hover{background:var(--bleu);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- en-tête ---------- */
/* ---------- le bandeau de tête ----------
 *
 * Une bande nuit de 36 px au-dessus de la barre, quatre faits en petites
 * capitales, séparés par un point bleu. Même composition et mêmes cotes que
 * reparermaroue.fr, relevées sur la capture : 36 px pour la bande, 82 pour
 * la barre.
 */
/* Le gris était à #8B98A8 : lisible sur le papier du contraste, illisible en
   vrai. Le texte est en 10,9 px, en capitales, en mono et espacé d'un dixième
   de cadratin — quatre choses qui amincissent le trait, et qu'aucun calcul de
   contraste ne prend en compte. Relevé à #C6D2E0, et la taille d'un cran. */
.bandeau{background:var(--nuit);color:#C6D2E0}
.bandeau__inner{
  display:flex;align-items:center;justify-content:center;gap:0;
  height:36px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;
}
.bandeau__fait{display:flex;align-items:center;gap:8px;padding:0 18px}
/* Le point qui sépare : il n'existe qu'entre deux faits, jamais devant le
   premier — d'où le sélecteur sur le frère précédent plutôt qu'un ::after
   qu'il faudrait ensuite retirer du dernier. */
.bandeau__fait + .bandeau__fait::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--bleu-vif);
  margin-right:8px;flex:0 0 5px;
}
.bandeau__fait--drapeau{color:#fff;font-weight:600}
.bandeau__fait img{width:21px;height:14px;display:block;border-radius:1px}
@media (max-width:980px){ .bandeau{display:none} }

/* ---------- la barre, sur fond BLANC ----------
 *
 * Elle était nuit, comme le hero qui la suit : on ne voyait pas où l'en-tête
 * finissait ni où la page commençait, et les deux se confondaient en un seul
 * aplat sombre. Sur blanc, la barre se détache, les libellés se lisent en
 * texte foncé, et le bandeau garde la couleur de la charte en tête d'écran.
 */
.entete{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  /* Safari a besoin du prefixe ; sans le filtre l'en-tete reste lisible,
     son fond est deja opaque a 97 %. */
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--gris-2);
}
/* La barre s'aligne sur le contenu, comme le pied de page : même enveloppe,
   même largeur, mêmes bords. L'élargir à 1 440 px pour gagner de la place
   faisait dépasser le logo à gauche et le sélecteur de langue à droite des
   colonnes de la page — on voyait le décalage. La place se gagne sur les
   libellés, pas en sortant du cadre. */
.entete__inner{display:flex;align-items:center;gap:20px;height:82px;max-width:var(--max);margin:0 auto;padding:0 24px}
.marque{display:flex;align-items:center;gap:16px;text-decoration:none!important;flex:0 0 auto}
/* Le logo du BAT porte deja la marque et sa baseline : on lui laisse de la
   place, et un filet le separe du nom de domaine plutot qu'un simple espace. */
.marque img{height:64px;width:auto;display:block}
.marque__nom{
  font-family:var(--gout);font-weight:800;color:var(--texte);font-size:1.3rem;letter-spacing:-.02em;
  padding-left:16px;border-left:1px solid var(--gris-2);line-height:1.15;white-space:nowrap;
}
.marque__nom span{color:var(--bleu)}
/* gap 2 px (et non 4) : voir la regle @media (min-width:881px) plus bas,
   c'est elle qui fixe les marges des liens en barre. */
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav a{
  color:var(--texte-2);font-size:.9rem;font-weight:500;text-decoration:none!important;
  white-space:nowrap;padding:9px 12px;border-radius:var(--r);
  border:1.5px solid transparent;transition:border-color .14s,background .14s,color .14s;
}

/*
 * LE CONFIGURATEUR SORT DU MENU.
 *
 * C'est le point clé du site : le visiteur y compose son bidon, et toutes
 * les pages y ramènent. Aligné avec « La gamme » et « FAQ », il se
 * confondait avec elles.
 *
 * Il devient donc la seule pastille pleine de l'en-tête, en bleu ciel sur
 * texte nuit — 6,65:1, largement lisible — et « Demander un devis » passe
 * en contour juste à côté. Deux boutons pleins l'un contre l'autre ne
 * hiérarchisent rien ; un seul dit où aller.
 */
.nav a.nav__cle{
  background:var(--bleu-vif);color:var(--nuit)!important;font-weight:700;
  border-color:var(--bleu-vif);
}
.nav a.nav__cle:hover,.nav a.nav__cle:focus-visible{
  background:#7CC0EE;border-color:#7CC0EE;color:var(--nuit)!important;
}
/*
 * Sur la page du configurateur elle-meme, la pastille reste une pastille.
 *
 * Sans cette regle, .nav a[aria-current="page"] — plus specifique — lui
 * reposait le fond blanc translucide de la page courante en gardant le
 * texte nuit : 1,35:1, illisible, et uniquement sur cette page-la. La
 * page courante se signale ici par le filet du dessous, pas par un fond.
 */
.nav a.nav__cle[aria-current="page"]{
  background:var(--bleu-vif);border-color:var(--bleu-vif);
  box-shadow:inset 0 -3px 0 var(--marine);
}
/* « Demander un devis » est L'ACTION de l'en-tête, pas un onglet de plus.
   Il était en contour translucide, exactement comme les liens autour : rien
   ne le distinguait. Il est maintenant plein, dans le bleu de la charte. */
.nav .btn--vif{
  background:var(--bleu);color:#fff;border-color:var(--bleu);font-weight:700;
}
.nav .btn--vif:hover,
.nav .btn--vif:focus-visible{background:var(--bleu-vif);border-color:var(--bleu-vif);color:var(--nuit)}
/* Encadre bleu au survol et au clic : bien plus lisible que la variation
   gris/blanc, et coherent avec le reste du site. */
.nav a:hover{color:var(--marine);border-color:var(--gris-2);background:var(--gris)}
.nav a:active{background:var(--gris-2)}
.nav a[aria-current="page"]{color:var(--marine);border-color:var(--gris-2);background:var(--gris)}
.nav .btn{padding:11px 20px;font-size:.9rem;white-space:nowrap;margin-left:10px}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--texte);font-size:1.5rem;cursor:pointer;padding:6px 8px}

/* ---------- sélecteur de langue ---------- */
/* Même composition que reparermaroue.fr : bouton encadré drapeau + code,
   panneau blanc au-dessous. <details> natif : clavier et sans-JS d'office. */
.langues{position:relative;flex:0 0 auto}
.langues summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:9px 10px;border:1.5px solid var(--gris-3);border-radius:var(--r);
  color:var(--texte);transition:border-color .14s,background .14s;
}
.langues summary::-webkit-details-marker{display:none}
.langues summary:hover{border-color:var(--bleu);background:var(--gris)}
.langues summary:focus-visible{outline:2px solid var(--bleu-vif);outline-offset:2px}
.langues[open] summary{border-color:var(--bleu);background:var(--gris)}
.langues__drapeau{
  width:26px;height:17px;flex:0 0 26px;display:block;border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.langues__code{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;font-weight:600}

.langues__liste{
  position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:236px;
  margin:0;padding:8px 0;list-style:none;background:#fff;
  border:1px solid var(--gris-2);border-radius:var(--r);box-shadow:0 18px 40px rgba(14,22,32,.34);
}
.langues__liste a{
  display:flex;align-items:center;gap:14px;padding:11px 20px;
  color:var(--texte);font-size:1rem;text-decoration:none!important;
}
.langues__liste a:hover{background:#EDF4FB;color:var(--marine)}
.langues__liste .langues__code{color:var(--bleu);font-size:.86rem}
.langues__liste a[aria-current="true"]{background:var(--gris);font-weight:600}
.langues__liste a[aria-current="true"] .langues__nom{font-weight:700}
.langues__nom{font-family:var(--corps)}

/* ---------- hero ---------- */
.hero{background:var(--nuit);color:var(--texte-clair);position:relative;overflow:hidden}
/* Les bandes vides du hero : 82 px au-dessus, 78 en dessous, plus 28 avant
   les boutons et 22 avant la ligne de notes. La colonne de texte s'arrêtait
   bien avant le bas de la photo, et tout ce blanc-là ne dit rien. */
.hero__grille{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:52px 0 48px;
}
.hero h1{color:#fff;margin-bottom:20px}
.hero__texte p{font-size:1.14rem;max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.hero__note{font-family:var(--mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:#8B98A8;margin-top:16px}
.hero__visuel{position:relative}
.hero__visuel img{border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.45)}
/* Ruban au pied de la photo : le degrade s'eteint dans l'image au lieu d'y
   percer un rectangle blanc, et le bloc reste dans les tons du hero. */
.hero__ruban{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;
  padding:16px 20px 14px;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(to top,rgba(11,15,23,.94),rgba(11,15,23,.74) 62%,rgba(11,15,23,0));
}
.hero__ruban img{height:44px;width:44px;border-radius:50%;box-shadow:none;flex:0 0 44px}
.hero__ruban b{
  display:block;font-family:var(--gout);font-size:.86rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;line-height:1.2;
}
.hero__ruban small{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:3px;
}

/* ---------- bandeau chiffres ---------- */
.chiffres{background:var(--marine);color:#fff}
/* Deux lignes, ALIGNÉES d'une tuile à l'autre : la grille porte les deux
   rangées — les nombres, puis les libellés — et chaque tuile s'y inscrit par
   subgrid. Un libellé qui passe sur deux lignes dans une autre langue
   n'entraîne plus son nombre avec lui. */
.chiffres__grille{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:1px;background:rgba(255,255,255,.18)}
.chiffre{background:var(--marine);padding:22px 18px;text-align:center;display:flex;flex-direction:column;justify-content:center}
@supports (grid-template-rows: subgrid){
  .chiffre{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:center}
  .chiffre b{align-self:end}
  .chiffre span{align-self:start}
}
.chiffre b{display:block;font-family:var(--gout);font-weight:800;font-size:2.05rem;line-height:1;margin-bottom:7px}
.chiffre span{
  display:block;font-family:var(--mono);font-size:.73rem;letter-spacing:.11em;
  text-transform:uppercase;color:#BBD3E8;
}
/* Il n'y a PAS de troisième ligne dans une tuile. La grille porte deux
   rangées, le nombre et l'intitulé ; un troisième enfant sortirait du
   subgrid et s'imprimerait sur le deuxième — c'est ce qui est arrivé avec
   les précisions de la gamme standard. Le garde-fou : s'il en reste une,
   elle ne s'affiche pas. */
.chiffre > :nth-child(n+3){display:none}
/* Le compteur : largeur figee sur la valeur finale, sinon la tuile tremble
   pendant l'animation (« 1 234 » puis « 12 345 » n'ont pas la meme largeur). */
.chiffre b.compteur{font-variant-numeric:tabular-nums}

/* ---------- grilles génériques ---------- */
.grille{display:grid;gap:26px}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grille--asym{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}

.carte{
  background:#fff;border:1px solid var(--gris-2);border-radius:var(--r);padding:26px;
  transition:border-color .15s,box-shadow .15s;
}
.carte:hover{border-color:var(--gris-3);box-shadow:0 6px 22px rgba(27,36,48,.07)}
/*
 * Les cartes d'une meme grille s'alignent entre elles.
 *
 * La grille les etire deja a la meme hauteur ; encore faut-il que leur
 * contenu s'y cale. Le tableau de cotes est donc plaque en bas de la carte,
 * si bien que deux cartes voisines ont leurs tableaux exactement en face,
 * quelle que soit la longueur du texte au-dessus — deux lignes ici, trois
 * la. Les deux tableaux ayant le meme nombre de lignes, aligner le bas
 * aligne aussi le haut.
 */
.carte{display:flex;flex-direction:column}
.carte__cotes{margin-top:auto;padding-top:32px}
.carte h3{margin-bottom:8px}
.carte p{color:var(--texte-2);font-size:.97rem;margin-bottom:0}
.carte__num{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--bleu);
  display:block;margin-bottom:14px;
}
.carte--sombre{background:var(--nuit-2);border-color:var(--nuit-3);color:var(--texte-clair)}
.carte--sombre h2,.carte--sombre h3,.carte--sombre h4{color:#fff}
.carte--sombre p{color:var(--texte-clair)}

.picto{
  width:42px;height:42px;border-radius:var(--r);background:#EAF2FA;color:var(--marine);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.picto svg{width:22px;height:22px;stroke-width:1.7}
.carte--sombre .picto{background:rgba(79,163,227,.16);color:var(--bleu-vif)}

/* ---------- étapes ---------- */
.etapes{counter-reset:e;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.etape{position:relative;padding:0 22px 0 0}
.etape::before{
  counter-increment:e;content:counter(e,decimal-leading-zero);
  font-family:var(--mono);font-size:.78rem;color:var(--bleu);display:block;margin-bottom:16px;
}
.etape::after{
  content:'';position:absolute;top:8px;left:0;right:12px;height:1px;background:var(--gris-2);
  transform:translateY(-16px);
}
.etape:last-child::after{display:none}
.etape h3{font-size:1.06rem;margin-bottom:7px}
.etape p{font-size:.94rem;color:var(--texte-2);margin:0}
.section--nuit .etape p{color:var(--texte-clair)}
.section--nuit .etape::after{background:var(--nuit-3)}

/* ---------- nuancier ---------- */
.nuancier{display:flex;flex-wrap:wrap;gap:10px}
.teinte{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--texte-2);
  border:1px solid var(--gris-2);border-radius:var(--r);padding:6px 11px 6px 7px;background:#fff}
.pastille{
  width:19px;height:19px;border-radius:50%;flex:0 0 19px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.pastille--translucide{position:relative;overflow:hidden}
.pastille--translucide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.75) 0 45%,rgba(255,255,255,0) 45%);
}

/* ---------- tableau ---------- */
/* ⚠ min-width:0 — un élément de grille ou de flex ne descend pas sous la
   largeur minimale de son contenu tant qu'on ne le lui dit pas. Sans cela,
   le tableau des cotes (520 px de minimum) poussait sa carte à 576 px, la
   grille à 1 202 px, et TOUTE la page défilait latéralement sur mobile et
   sur tablette — alors que .table-scroll était justement là pour que seul
   le tableau défile. */
.table-scroll{overflow-x:auto;border:1px solid var(--gris-2);border-radius:var(--r);min-width:0}
.carte,.carte__cotes{min-width:0}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:520px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--gris-2)}
th{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte-2);background:var(--gris);font-weight:500}
tr:last-child td{border-bottom:0}
td b{font-family:var(--gout)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--gris-2)}
.faq details{border-bottom:1px solid var(--gris-2)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;font-family:var(--gout);font-weight:800;
  font-size:1.04rem;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:6px;top:17px;font-size:1.5rem;font-weight:400;
  color:var(--bleu);font-family:var(--corps);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq__rep{padding:0 40px 20px 0;color:var(--texte-2);font-size:.98rem}
.faq .faq__rep p:last-child{margin-bottom:0}

/* ---------- ruban / CTA ---------- */
.ruban{background:var(--nuit);color:#fff;text-align:center;padding:48px 0}
.ruban h2{color:#fff;margin-bottom:14px}
.ruban p{color:var(--texte-clair);max-width:58ch;margin:0 auto 20px}
/*
 * ⚠ LARGEURS ÉGALES DANS UN BANDEAU (Rémy, 23/09/2026 — règle des boutons).
 *
 * Mesuré AVANT : les 42 bandeaux du site, dans les six langues, avaient tous
 * deux boutons de largeurs différentes — 187/160 px sur Impression, 184/194
 * sur Bon à tirer, 199/184 sur Atelier.
 *
 * Une largeur fixe ne pouvait pas régler ça : le libellé le plus long du site
 * est une adresse de courriel de 243 px (bandeau de la FAQ), et les
 * traductions allemandes dépassent régulièrement le français. Des colonnes de
 * grille ÉGALES s'en sortent sans nombre magique : la plus large commande, les
 * autres suivent, quelle que soit la langue.
 */
/*
 * LA PAGE « CRÉATION DE BAT » — deux règles, et rien d'autre.
 *
 * 1. Le picto d'une ÉTAPE perd sa pastille. Une étape n'a pas de carte
 *    blanche sous elle : le bleu pâle de .picto posé sur le gris de la
 *    section donnait quatre rectangles fantômes.
 * 2. Les trois adjectifs sous le nom d'un style : chasse fixe, petit, bleu.
 *    Ils se lisent comme une étiquette, pas comme une phrase.
 */
.etape .picto{background:none;width:auto;height:auto;margin-bottom:10px;justify-content:flex-start}
.etape .picto svg{width:24px;height:24px}
.style-bat{margin:0}
/*
 * ⚠ LE CADRE DE L'IMAGE A UNE COTE, IL NE SE LAISSE PAS MESURER PAR L'IMAGE.
 *
 * Posée nue dans la grille à lignes partagées, une <img> est un élément
 * REMPLACÉ : le navigateur mesure la ligne autrement que la taille affichée —
 * relevé 301,75 px de ligne pour 315 px d'image sous Chromium, et un trou de
 * la hauteur d'une image entière chez Rémy le 23/09/2026. Le cadre porte donc
 * le rapport des vues de bidon (1109 × 952) : sa hauteur ne dépend plus que
 * de sa largeur, elle est la même dans les trois colonnes, et les légendes
 * tombent au même niveau quoi qu'il arrive. Une image d'un autre rapport s'y
 * inscrit en entier (contain), elle n'est pas recadrée d'office.
 */
.style-bat__vue{display:block;aspect-ratio:1109/952;border-radius:var(--r);overflow:hidden}
.style-bat img{width:100%;height:100%;object-fit:contain;display:block}
.style-bat figcaption{margin-top:14px}
.style-bat figcaption b{display:block}
.adjectifs{
  display:block;margin-top:3px;
  font:500 .78rem/1.5 var(--mono);letter-spacing:.04em;color:var(--bleu);
}

/*
 * ════════════════════════════════════════════════════════════════════════
 * LES RANGÉES ALIGNÉES — RÈGLE OBLIGATOIRE, SUR TOUT LE SITE
 * ════════════════════════════════════════════════════════════════════════
 *
 * Rémy, 06/09 : « encore une fois les titres et textes doivent être alignés ».
 * Rémy, 23/09 : « aligne les écritures entre les 2 tuiles, encore une fois !!!
 * tu ne peux pas le noter comme demande OBLIGATOIRE dans toutes mes
 * discussions avec toi ? »
 *
 * CE QUI DOIT S'ALIGNER N'EST PAS LE TITRE, C'EST LE TEXTE. Un titre qui passe
 * sur deux lignes quand son voisin tient sur une décale tout ce qui suit — et
 * c'est ce décalage-là qu'on voit. Un contrôle qui ne mesure que les h2/h3
 * conclut « aligné » et laisse passer le défaut : il faut relever le haut du
 * PREMIER PARAGRAPHE de chaque colonne.
 *
 * On ne raccourcit pas les titres à l'estime : ça retombe en panne à la
 * première traduction — l'allemand est plus long que le français presque à
 * chaque ligne. Les tuiles d'une rangée PARTAGENT DONC LES LIGNES de la
 * grille (`subgrid`) : chaque ligne prend la hauteur de la plus haute des
 * tuiles, dans les six langues et à toutes les largeurs, sans nombre magique.
 *
 * Le chiffre de la classe est le NOMBRE D'ENFANTS DIRECTS de chaque tuile :
 *   -2  figure : image + légende          (#exemples)
 *   -3  carte  : image + titre + texte    (#methode, #livrables)
 *   -4  colonne: surtitre + titre + chapô + texte   (#prestation)
 * Ajouter un enfant sans changer le chiffre casse l'alignement.
 */
.carte__image{
  margin:-26px -26px 18px;border-bottom:1px solid var(--gris-2);
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;
}
.carte__image img{display:block;width:100%;height:auto}

@supports (grid-template-rows:subgrid){
  .grille--alignee-2{grid-template-rows:repeat(2,auto)}
  .grille--alignee-3{grid-template-rows:repeat(3,auto)}
  .grille--alignee-4{grid-template-rows:repeat(4,auto)}
  .grille--alignee-2>*,
  .grille--alignee-3>*,
  .grille--alignee-4>*{display:grid;grid-template-rows:subgrid;gap:0}
  .grille--alignee-2>*{grid-row:span 2}
  .grille--alignee-3>*{grid-row:span 3}
  .grille--alignee-4>*{grid-row:span 4}
}
/* Filet de sécurité pour un navigateur sans subgrid (avant Chrome 117) :
   deux lignes réservées au titre, ce qui couvre tous les titres de la page. */
@supports not (grid-template-rows:subgrid){
  .grille--alignee-3>.carte>h3{min-height:2.5em}
  .grille--alignee-4>*>h2{min-height:2.6em}
}

/*
 * LES MÊMES LIGNES PARTAGÉES, POUR LES RANGÉES QUI NE SONT PAS DES .grille.
 *
 * Les 72 pages ont été remesurées le 24/09/2026 — six langues, 1440, 1280 et
 * 1024 px, le haut de CHAQUE enfant de chaque colonne. Quatre rangées se
 * décalaient encore, toujours pour la même raison : un intitulé passe sur
 * deux lignes dans une colonne et pas dans l'autre, et tout ce qui suit
 * descend d'une ligne.
 *
 *   .matieres      accueil         16 px   dans les six langues
 *   .fabrication   atelier         17 px   en, de, es
 *   .etapes        accueil         18 px   de, es, à 1024 px
 *   .etapes-paire  configurateur   20 px   en, nl, it, à 1024 px
 *
 * Même remède que pour les tuiles : la rangée réserve ses lignes, chaque
 * colonne les partage. Le chiffre est le NOMBRE D'ENFANTS D'UNE COLONNE, y
 * compris ce qu'un ::before ajoute — le « 01 » d'une étape en est un, et il
 * compte pour une ligne.
 *
 * gap:0 sur la colonne : l'écart vertical du parent sert à séparer deux
 * rangs de tuiles, pas les lignes d'une même tuile. Sans lui, il s'insère
 * aussi entre l'intitulé et son texte.
 */
@supports (grid-template-rows:subgrid){

  /* Accueil, les quatre pastilles matière : pictogramme, nom, précision.
     align-items:start, et non le center hérité de la version flex : dans une
     ligne haute de deux lignes de texte, un nom qui n'en fait qu'une serait
     centré, donc décalé d'une demi-ligne. */
  .matieres{grid-template-rows:repeat(3,auto)}
  .matieres>.matiere{
    display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0;
    justify-items:center;align-items:start;
  }

  /* Atelier, les cinq étapes de fabrication — et les quatre de la
     sérigraphie, même gabarit : visuel, numéro, titre, procédé, texte.
     Deux classes sur la carte, pas une : « .fabrication .carte » pose
     display:flex huit cents lignes plus bas, à poids égal, et c'est la
     dernière écrite qui l'emporte. */
  .grille.fabrication{grid-template-rows:repeat(5,auto)}
  .fabrication>.carte.carte--fab{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0}

  /* Accueil, le parcours en quatre étapes : le « 01 » du ::before, l'intitulé,
     le texte. Un picto dans l'étape en ferait quatre — c'est le cas sur
     « Création de BAT », dont les étapes ne portent donc pas cette classe (et
     n'en ont pas besoin : mesurées alignées dans les six langues). */
  .etapes--alignee-3{grid-template-rows:repeat(3,auto)}
  .etapes--alignee-3>.etape{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}

  /* Configurateur, le modèle et la collerette : titre, aide, choix, note.
     La réserve de deux lignes sous l'intitulé (min-height:2.7em, plus haut)
     reste en place : elle ne gêne pas et tient encore le repli sans subgrid.
     Elle ne suffisait plus dès qu'une traduction demandait une troisième
     ligne — anglais, néerlandais et italien à 1024 px. */
  .etapes-paire{grid-template-rows:repeat(4,auto)}
  .etapes-paire>.etape-config{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}
}

.ruban__actions{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.ruban__actions .btn{width:100%;justify-content:center;white-space:nowrap}
.ruban .btn+.btn{margin-left:0}
/* Sur un téléphone, deux boutons côte à côte ne tiennent pas dans la largeur :
   on empile, et chacun prend toute la colonne — donc toujours la même. */
@media (max-width:560px){
  .ruban__actions{display:grid;grid-auto-flow:row;grid-auto-columns:auto}
}

/* ---------- pied ---------- */
.pied{background:var(--nuit);color:#8B98A8;padding:56px 0 30px;font-size:.92rem;border-top:1px solid rgba(255,255,255,.08)}
.pied a{color:var(--texte-clair)}
.pied a:hover{color:#fff}
.pied__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
/*
 * Les intitulés des colonnes.
 *
 * Le gabarit les écrit en <h2> — c'est le bon niveau pour le plan du
 * document —, mais la règle était restée sur h4 : elles retombaient donc sur
 * la taille générale des h2, près de trois fois trop grosse, et le pied de
 * page criait plus fort que la page. Les deux sélecteurs sont là, pour que
 * le prochain changement de balise ne refasse pas le coup.
 *
 * Le bleu vif plutôt que le blanc : sur le fond nuit il tient 6,6:1, bien
 * au-delà des 4,5 exigés, et il distingue l'intitulé des liens qu'il coiffe.
 */
.pied h2,.pied h4{
  font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bleu-vif);font-weight:500;margin:0 0 14px;line-height:1.4;
}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:8px}
.pied__bas{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem}
.pied__logo{height:58px;width:auto;margin-bottom:18px}

/* ---------- formulaire ---------- */
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:600;font-size:.91rem;margin-bottom:6px}
.champ .aide{font-weight:400;color:var(--texte-2);font-size:.85rem}
.champ input,.champ select,.champ textarea{
  width:100%;padding:11px 13px;border:1px solid var(--gris-3);border-radius:var(--r);
  font-family:var(--corps);font-size:.97rem;background:#fff;color:var(--texte);
  /* Même hauteur pour une case et un menu déroulant : le navigateur donne
     deux pixels de plus au second, et deux cases voisines d'une même ligne
     ne s'alignaient pas tout à fait. */
  line-height:1.3;
}
.champ input,.champ select{min-height:44px}
/*
 * Le menu déroulant reprend la main sur son propre dessin.
 *
 * Laissé à son apparence native (`-webkit-appearance:menulist`), Safari
 * IGNORE la hauteur, les marges intérieures et l'interligne d'un <select> :
 * il le rend à sa taille intrinsèque, environ 28 px, quand les cases voisines
 * en font 44. Sur la page de devis, « Modèle » flottait donc 16 px au-dessus
 * de « Quantité », et le formulaire paraissait de travers — alors que sous
 * Chrome tout était aligné, ce qui a longtemps fait chercher la panne du
 * mauvais côté.
 *
 * `appearance:none` rend les règles applicables, au prix de la flèche, qu'on
 * redessine ici. Elle est écrite en SVG dans la feuille de style : aucune
 * requête, donc rien à demander à un tiers.
 */
.champ select{
  -webkit-appearance:none;appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23586A7C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}
/* Le sélecteur natif de la date se cale, lui aussi, sur la hauteur voulue :
   sous Safari son contenu se centre autrement que dans une case ordinaire. */
.champ input[type="date"]{display:block}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:2px solid var(--bleu);outline-offset:-1px;border-color:var(--bleu);
}
.champ textarea{min-height:120px;resize:vertical}
/* ---------- les champs par deux ----------
 *
 * Chaque champ empile son étiquette et sa case. Quand une étiquette passe à
 * deux lignes — « Organisation club, société, collectivité », et bien plus
 * souvent une fois traduite — sa case descend d'autant, et la paire part de
 * travers. Mesuré sur la page de devis : 24 px d'écart en anglais entre
 * « Full name » et « Organisation », 9 px dans les cinq autres langues.
 *
 * La grille du couple porte donc DEUX rangées — les étiquettes, puis les
 * cases — et chaque champ s'y inscrit par subgrid. Les deux étiquettes
 * prennent alors la hauteur de la plus haute, et les deux cases commencent
 * sur la même ligne, quelle que soit la langue et quel que soit le nombre
 * de lignes de l'étiquette.
 *
 * L'écartement vertical reste porté par les marges (étiquette et champ) et
 * non par un row-gap : sous subgrid, un row-gap du parent s'insérerait
 * AUSSI entre l'étiquette et sa case.
 *
 * Sans subgrid — navigateurs d'avant 2023 —, la version de repli aligne les
 * cases par le bas : même résultat à l'œil, l'espace se prenant au-dessus de
 * l'étiquette la plus courte.
 */
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:end}
.champs-2 > .champ{display:flex;flex-direction:column;justify-content:flex-end}

@supports (grid-template-rows: subgrid){
  .champs-2{align-items:stretch}
  /* Une seule colonne, et qui prend toute la place : sans elle, la grille
     interne se dimensionnait sur son contenu, les cases se rétrécissaient
     à la longueur de leur étiquette et les deux colonnes partaient en
     dents de scie. minmax(0,1fr) plutôt que 1fr, sinon un menu déroulant
     au texte long refuse de se laisser rétrécir. */
  .champs-2 > .champ{
    display:grid;grid-row:span 2;grid-template-rows:subgrid;
    grid-template-columns:minmax(0,1fr);
  }
  /* La case garde sa hauteur propre : sans cela un menu déroulant s'étirait
     sur toute la hauteur d'une zone de texte voisine. */
  .champs-2 > .champ > input,
  .champs-2 > .champ > select,
  .champs-2 > .champ > textarea{align-self:start}
  /* L'étiquette se colle à SA case, pas au haut de la rangée. Quand la
     voisine tient sur deux lignes — « Organisation club, société,
     collectivité » —, l'étiquette courte restait suspendue en l'air avec un
     trou sous elle. Le vide se prend maintenant au-dessus, où il se confond
     avec l'écart entre deux lignes de champs. */
  .champs-2 > .champ > label{align-self:end}
}

/* ---------- fil d'ariane / entête de page ---------- */
.page-tete{background:var(--nuit);color:var(--texte-clair);padding:46px 0 40px}
.page-tete h1{color:#fff;margin-bottom:14px;font-size:clamp(1.9rem,4.2vw,3rem)}
.page-tete p{max-width:62ch;font-size:1.08rem;margin:0}

/* ---------- équipes partenaires ----------
 *
 * Cinq cases, et la liste tourne dedans. Les onze tuiles sont écrites dans
 * le HTML ; le script masque celles qui ne sont pas de service. Sans lui,
 * les onze s'affichent — une liste de références se lit très bien entière.
 */
.equipes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
.equipe{display:flex;align-items:stretch;transition:opacity .26s ease}
.equipe--cachee{display:none}
.equipe--sort{opacity:0}

/*
 * LA TUILE ENTIÈRE EST LE LIEN.
 *
 * Seul le nom l'était : une cible de deux centimètres au bas d'une carte
 * qui en fait douze, et rien n'indiquait que le bidon menait quelque part.
 */
.equipe__carte{
  display:flex;flex-direction:column;width:100%;align-self:stretch;
  border:1px solid var(--gris-2);border-radius:var(--r);background:#fff;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.equipe__carte:hover,
a.equipe__carte:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(27,36,48,.10),0 2px 4px rgba(27,36,48,.06);
  border-color:var(--gris-3);
}
a.equipe__carte:focus-visible{outline:2px solid var(--marine);outline-offset:2px}

/* LE FOND RESTE BLANC. Le socle dégradé se voyait dès que le bidon tournait :
   la planche du tour est détourée, et le dégradé réapparaissait derrière
   chaque vue en formant un halo qui bougeait avec elle. */
/* LA HAUTEUR RESTE ÉCRITE, ET LE RÉTRÉCISSEMENT EST COUPÉ.
   .
   `height:150px` seul ne suffisait pas : la scène est un article de boîte
   flexible, et une hauteur définie ne l'empêche pas d'être COMPRIMÉE quand
   le reste de la carte réclame de la place — ce que faisait un bandeau à
   deux lignes, de quelques pixels, et pas des mêmes d'un moteur à l'autre.
   `flex-shrink:0` ferme cette porte.
   .
   La hauteur, elle, doit rester : remplacée par `flex-basis`, elle laissait
   `min-height:auto` reprendre la main — la taille minimale automatique d'un
   article flexible, c'est son contenu, ici un calque de 240 px de haut, et
   la scène passait de 150 à 343 px. Une hauteur explicite borne ce minimum. */
.equipe__scene{
  position:relative;display:block;height:150px;flex-shrink:0;
  padding:14px 12px 8px;background:#fff;
}
.equipe__bidon{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  width:100%;height:100%;
}
.equipe__bidon img{display:block;width:auto;max-width:100%;max-height:100%}

/* Le bidon pas encore décoré : le vrai PRO 600 sorti du configurateur, sans
   décor ni collerette. Un contour dessiné à la main aurait été un dessin de
   plus à tenir à jour ; celui-ci vient du même moteur que les autres. */
.equipe__attente{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;height:100%;
}
.equipe__attente img{display:block;width:auto;max-height:100%;opacity:.42}
.equipe__attente__mot{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-2);
}

/* Le bandeau du club : marine plein, texte blanc. C'est lui qui donne sa
   couleur à la grille — onze rectangles blancs sur fond blanc ne faisaient
   pas une vitrine. */
/* HAUTEUR FIXE, TAILLÉE POUR DEUX LIGNES.
 *
 * Le bandeau tenait sur `flex:1` et un minimum de 2,9 em : il valait une
 * ligne quand les cinq noms visibles tenaient sur une ligne, deux dès qu'un
 * seul en demandait deux. Or les cinq cases tournent — « Vélo Club Roubaix
 * Cyclotourisme » entre, la rangée grandit, les cinq bandeaux montent d'un
 * cran ; il sort, ils redescendent. Un mouvement toutes les deux secondes,
 * sur la grille entière, que rien ne justifiait.
 *
 * La hauteur est donc celle de deux lignes, toujours : 2 × 1,2 em de
 * texte, plus les marges hautes et basses. Un nom d'une ligne se centre
 * dedans, un nom de deux la remplit, et le bord bleu ne bouge plus jamais.
 * Un nom qui demanderait TROIS lignes serait rogné : à ce jour le plus long
 * — Roubaix — en fait deux, y compris à 390 px de large. Un club au nom
 * plus long se raccourcit dans bp_equipes(), on ne rouvre pas la hauteur.
 */
.equipe__nom{
  display:flex;align-items:center;justify-content:center;text-align:center;
  flex:0 0 auto;height:calc(2.4em + 21px);padding:10px 10px 11px;
  background:var(--marine);color:#fff;
  font-family:var(--gout);font-weight:800;font-size:.82rem;line-height:1.2;
  letter-spacing:-.01em;
  transition:background-color .18s ease;
}
a.equipe__carte:hover .equipe__nom,
a.equipe__carte:focus-visible .equipe__nom{background:var(--bleu)}

@media (prefers-reduced-motion:reduce){
  .equipe,.equipe__carte,.equipe__nom{transition:none}
  a.equipe__carte:hover,a.equipe__carte:focus-visible{transform:none}
}
@media (max-width:900px){ .equipes{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){
  .equipes{grid-template-columns:repeat(2,1fr);gap:10px}
  .equipe__scene{height:124px}
}

/* Le bloc « équipes partenaires » vivait ICI EN DOUBLE : une première fois
   plus haut, une seconde ici, et c'est la seconde — la plus tardive — qui
   l'emportait. La grille reprenait ses cinq colonnes fixes et les tuiles se
   recentraient verticalement, quoi qu'on écrive en amont. Le bloc n'existe
   plus qu'à un seul endroit : chercher « équipes partenaires » plus haut. */

/* Lu par les synthèses vocales, invisible à l'œil : la mention « nouvelle
   fenêtre » qui accompagne un lien sortant. On garde 1 px plutôt que
   display:none, qui la retirerait aussi de l'arbre d'accessibilité. */
.hors-ecran{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap }


/* ---------- les deux modèles, sur l'accueil ----------
 *
 * Le bidon à gauche, la fiche à droite, et les cotes sur une seule ligne :
 * le bloc passait 730 px à empiler un titre, un paragraphe et un tableau de
 * trois rangées pour six chiffres, dont quatre identiques d'une carte à
 * l'autre.
 */
.modele{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:18px 20px}
/*
 * LARGEUR FIXE POUR L'EMPLACEMENT DU BIDON, ET NON « auto ».
 *
 * Les deux rendus n'ont pas la même silhouette : à 170 px de haut, le PRO
 * occupe 65 px de large et le MAX 51. La colonne « auto » suivait donc le
 * dessin, et les deux colonnes de texte n'avaient pas la même largeur — à
 * 1024 px, le tableau de cotes tenait sur une ligne dans une carte et sur
 * deux dans l'autre, en anglais comme en italien. Deux tuiles qui ne se
 * replient pas au même endroit ne s'alignent pas, quoi qu'on fasse ensuite.
 * 70 px : le plus large des deux dessins, plus une marge. (24/09/2026)
 */
.modele__vue{margin:0;display:flex;align-items:flex-end;justify-content:center;height:170px;width:70px}
.modele__vue img{display:block;width:auto;height:100%;max-width:none}
/*
 * Le texte part du HAUT de la carte, le bidon reste centré.
 *
 * La carte entière était centrée (align-items:center ci-dessus) : dès que le
 * texte du PRO et celui du MAX n'avaient pas la même hauteur — ce qui arrive
 * dans toutes les langues sauf le français —, les deux blocs démarraient à
 * 8 à 11 px l'un de l'autre. On aligne donc le texte par le haut et on laisse
 * le centrage à la photo, qui en a besoin : elle est plus courte que le texte.
 * (Relevé le 24/09/2026 en anglais, néerlandais, allemand et italien.)
 *
 * Le bloc prend toute la hauteur de la carte et les cotes se calent en bas —
 * même mécanique que .carte__cotes. Sinon le tableau de cotes suit le
 * paragraphe : trois lignes de texte d'un côté, quatre de l'autre, et les
 * deux séries de cotes se lisaient à 22 px l'une de l'autre.
 */
.modele__texte{min-width:0;align-self:stretch;display:flex;flex-direction:column}
.modele__vue{align-self:center}
.modele__texte h3{margin:2px 0 6px}
.modele__texte p{font-size:.92rem;margin:0 0 12px}
/* Les trois cotes en ligne : elles se lisent d'un balayage, et deux cartes
   côte à côte se comparent sans descendre. */
.modele__cotes{display:flex;flex-wrap:wrap;gap:0 22px;margin:auto 0 0}
.modele__cotes > div{display:flex;flex-direction:column;gap:1px}
.modele__cotes dt{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte-2);
}
.modele__cotes dd{margin:0;font-family:var(--gout);font-weight:800;font-size:.94rem;color:var(--texte)}
@media (max-width:560px){
  .modele{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .modele__vue{height:140px}
  .modele__cotes{justify-content:center}
}

/* ---------- pictogrammes de la matière ---------- */
/* Quatre pictogrammes EN LIGNE, et plus petits. En carré de deux, avec des
   vignettes de 104 px, le bloc « matière » prenait autant de hauteur que la
   colonne de texte à côté — pour dire ce que le texte disait déjà. */
/* La photo de l'usine, à droite du renvoi vers la fabrication. Elle est en
   portrait — le bidon géant est plus haut que large —, donc rognée à la
   hauteur du texte plutôt que laissée filer sur trois écrans. */
.usine{margin:0;border-radius:var(--r);overflow:hidden}
/* Le bidon géant, sur la page de la fabrication : il est plus haut que
   large, on le laisse donc entier plutôt que de le rogner en bandeau. */
.usine--haute img{max-height:none;aspect-ratio:3/4}
.usine img{
  display:block;width:100%;height:100%;max-height:380px;object-fit:cover;object-position:50% 30%;
}
@media (max-width:760px){ .usine img{max-height:240px} }

.matieres{
  list-style:none;margin:0;padding:0;
  /* minmax(0,1fr) et non 1fr : une piste « 1fr » garde un minimum égal à la
     largeur minimale de son contenu. « Sans bisphénol A » poussait donc la
     grille à 469 px sur un écran de 390, et toute la page avec. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
}
/* Quatre de front tiennent tant qu'on est sur une colonne large ; en dessous,
   deux et deux. */
@media (max-width:900px){ .matieres{grid-template-columns:repeat(2,minmax(0,1fr))} }
.matiere{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:14px 8px 12px;border:1px solid var(--gris-2);border-radius:var(--r);background:#fff;
}
.matiere__vue{display:block;width:58px;height:58px;color:var(--marine)}
.matiere__vue svg{display:block;width:100%;height:100%}
.matiere__nom{
  margin-top:9px;font-family:var(--gout);font-weight:800;font-size:.82rem;
  line-height:1.25;letter-spacing:-.01em;color:var(--texte);
}
.matiere__detail{margin-top:3px;font-size:.72rem;line-height:1.3;color:var(--texte-2)}

/* ---------- utilitaires ---------- */
.centre{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-16{margin-top:16px}.mt-32{margin-top:24px}.mt-48{margin-top:34px}
.tete-section{max-width:64ch;margin-bottom:30px}
.tete-section.centre{margin-left:auto;margin-right:auto}
.liste-check{list-style:none;padding:0;margin:0}
.liste-check li{position:relative;padding-left:28px;margin-bottom:7px;color:var(--texte-2)}
.liste-check li::before{
  content:'';position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}
/*
 * Sur fond sombre, la liste reprend la couleur claire de son bloc.
 *
 * Sans cette regle, .liste-check li imposait --texte-2 (#586A7C), pense pour
 * du texte sur blanc : sur le #16202C d'une carte sombre, le rapport de
 * contraste tombait a 2,95:1, sous le minimum de 4,5:1. Avec --texte-clair
 * il passe a 10,3:1.
 *
 * La coche suit : le vert de la charte (#00843D) ne donnait que 3,4:1 sur ce
 * meme fond. Le vert clair en donne 7,0:1, et reste le meme vert, eclairci.
 */
.carte--sombre .liste-check li,
.section--nuit .liste-check li,
.hero .liste-check li{color:var(--texte-clair)}
.carte--sombre .liste-check li::before,
.section--nuit .liste-check li::before,
.hero .liste-check li::before{border-color:var(--ok-clair)}
.carte--sombre .liste-croix li::before,
.section--nuit .liste-croix li::before,
.hero .liste-croix li::before{color:var(--alerte-clair)}

.liste-croix li::before{
  border:0;left:2px;top:.15em;content:'\00d7';color:var(--alerte);font-size:1.2rem;
  transform:none;width:auto;height:auto;line-height:1;
}
.etiquette{
  display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;background:#EAF2FA;color:var(--marine);padding:5px 10px;border-radius:var(--r);
}
.etiquette--vert{background:#E4F4EA;color:var(--ok)}

/* ============================================================
   CONFIGURATEUR
   ============================================================ */
/* Deux colonnes de même largeur (Rémy, 03/09/2026). ⚠ Cette règle existe
   AUSSI dans la feuille de l'extension ; celle-ci est chargée après, c'est
   elle qui gagne — la première correction n'avait donc rien changé en ligne. */
.config{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
/*
 * La colonne de gauche reste collee en haut, mais bornee a la hauteur de
 * l'ecran : la vue, ses commandes et le debut du recapitulatif tiennent
 * dedans, le reste s'atteint en faisant defiler la colonne. Sans cette
 * borne elle faisait 1 400 px et debordait de tous les ecrans.
 */
.config__scene{
  position:sticky;top:100px;
  max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin;
}
/*
 * LA SCÈNE ET SA TOILE SONT DANS configurateur.css, ET NULLE PART AILLEURS.
 *
 * Elles étaient écrites deux fois, ici et là-bas, avec la consigne « les
 * deux doivent rester d'accord ». Elles ne le sont pas restées : le cadrage
 * par modèle a été posé dans configurateur.css, et cette copie — chargée en
 * dernier — l'a annulé en silence. Le rendu n'a pas bougé d'un pixel et
 * rien n'a signalé la panne.
 *
 * Une déclaration, un seul endroit. La scène n'existe que dans le
 * raccourci du configurateur, qui apporte toujours sa propre feuille : il
 * n'y a rien à doubler ici.
 */
/* ---------- curseur de rotation ----------
   Un vrai curseur plutot qu'un « glissez sur le bidon » que personne ne lit.
   Les crans de 10 degres viennent du pas de l'input, pas du script. */
.rotation{
  display:flex;align-items:center;gap:12px;margin:18px auto 0;max-width:340px;
}
.rotation__titre{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-2);white-space:nowrap;
}
.rotation__valeur{
  font-family:var(--mono);font-size:.82rem;font-variant-numeric:tabular-nums;
  color:var(--marine);min-width:3.4em;text-align:right;
}
.rotation__curseur{
  flex:1;-webkit-appearance:none;appearance:none;background:transparent;height:22px;margin:0;cursor:pointer;
}
.rotation__curseur:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:3px}
.rotation__curseur::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--gris-2);
}
.rotation__curseur::-moz-range-track{height:4px;border-radius:2px;background:var(--gris-2)}
.rotation__curseur::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--bleu);border:2px solid #fff;box-shadow:0 1px 4px rgba(27,36,48,.35);
}
.rotation__curseur::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--bleu);
  box-shadow:0 1px 4px rgba(27,36,48,.35);
}
@media (max-width:480px){.rotation__titre{display:none}}
.scene__vides{display:flex;justify-content:center;gap:7px;margin-top:12px}
.vue-btn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:6px 12px;
  border:1px solid var(--gris-3);background:#fff;border-radius:var(--r);cursor:pointer;color:var(--texte-2);
  transition:border-color .14s,background .14s,color .14s;
}
.vue-btn:hover{border-color:var(--bleu);background:#EDF4FB;color:var(--marine)}
.vue-btn[aria-pressed="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.vue-btn--tour{display:inline-flex;align-items:center;gap:6px;padding-left:9px}
.vue-btn--tour svg{width:14px;height:14px;flex:none}
.vue-btn--tour.est-actif{
  background:var(--bleu);border-color:var(--bleu);color:#fff;
}
.vue-btn--tour.est-actif svg{animation:bp-tourne 2s linear 2}
@keyframes bp-tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  /* Sans animation, le bouton n'a plus d'objet. */
  .vue-btn--tour{display:none}
  .vue-btn--tour.est-actif svg{animation:none}
}
.scene__aide{font-size:.78rem;line-height:1.45;color:var(--texte-2);margin:10px 0 0}
.scene__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.scene__actions .btn{flex:1 1 46%;justify-content:center;padding:10px 12px;font-size:.85rem;text-align:center}
/* le bouton de devis garde sa ligne : c'est l'action principale */
.scene__actions .btn--vif{flex-basis:100%}

.recap{margin-top:18px;border:1px solid var(--gris-2);border-radius:var(--r);background:#fff;padding:20px}
.recap h3{font-size:1rem;margin-bottom:14px}
.recap dl{margin:0;font-size:.9rem}
.recap dl div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--gris-2)}
.recap dl div:last-child{border-bottom:0}
.recap dt{color:var(--texte-2)}
.recap dd{margin:0;font-weight:600;text-align:right}


/* Les etapes etaient trop aerees : on resserre le pas vertical sans toucher
   a la lisibilite des intitules. */
/* Le modele et la collerette cote a cote : deux choix binaires qui
   prenaient deux ecrans a eux seuls. Le filet vertical remplace le filet
   horizontal qui les separait. */
.etapes-paire{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.etapes-paire .etape-config{padding-top:0;border-top:0}
.etapes-paire .etape-config + .etape-config{border-left:1px solid var(--gris-2);padding-left:30px}
/* Les deux colonnes portent la meme suite — titre, aide, choix, note — mais
   pas des textes de meme longueur : on reserve deux lignes a l'aide pour que
   les cases tombent a la meme hauteur. */
.etapes-paire .etape-config__aide{min-height:2.7em}
@media (max-width:900px){.etapes-paire .etape-config__aide{min-height:0}}
.etapes-paire .choix label{padding:9px 6px}
.etapes-paire .choix b{font-size:.9rem}
/* Entre 900 et 1200 px les deux colonnes sont a l'etroit : « MAX 800 ml »
   frole le bord. On resserre le corps plutot que de laisser le mot
   deborder de la pastille. */
@media (max-width:1200px){.etapes-paire .choix b{font-size:.86rem}}
.etapes-paire .choix small{font-size:.78rem}
@media (max-width:900px){
  .etapes-paire{grid-template-columns:1fr;gap:0}
  .etapes-paire .etape-config + .etape-config{
    border-left:0;padding-left:0;border-top:1px solid var(--gris-2);padding-top:18px;
  }
}
.etape-config{border-top:1px solid var(--gris-2);padding:16px 0}
.etape-config:first-child{border-top:0;padding-top:0}
.etape-config__tete{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.etape-config__num{font-family:var(--mono);font-size:.75rem;color:var(--bleu)}
.etape-config h2{font-size:1.2rem;margin:0}
.etape-config__aide{font-size:.88rem;line-height:1.4;color:var(--texte-2);margin:-2px 0 10px}
.etape-config__note{margin-top:9px;font-size:.83rem;line-height:1.4}
/* ---------- les deux choix binaires : le bouton segmente de la 3D ----------
   Meme objet que la bascule PRO/MAX du simulateur (.simu3d .onglets) : un
   etui clair aux bords ronds, le cote actif en pastille marine sur texte
   blanc. L'etui prend TOUTE la largeur du bloc : ses deux bords tombent
   d'aplomb sur le titre au-dessus et sur la note en dessous.
   /!\ Regle presente aussi dans configurateur.css ; style.css est chargee
   apres, donc c'est CELLE-CI qui s'applique en ligne. Les deux doivent
   rester identiques. */
.choix{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:0;width:100%;
  margin-bottom:30px;padding:3px;background:#fff;
  border:1px solid var(--gris-2);border-radius:999px;
}
.choix:focus-within{box-shadow:0 0 0 3px rgba(46,116,181,.22)}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{
  display:flex;align-items:center;justify-content:center;
  padding:9px 10px;border-radius:999px;text-align:center;cursor:pointer;
  white-space:nowrap;color:var(--texte-2);transition:background .2s,color .2s;
}
.choix label:hover{color:var(--bleu)}
.choix input:checked+label{background:var(--marine);color:#fff}
.choix input:focus-visible+label{outline:2px solid var(--bleu);outline-offset:2px}
.choix b{font-family:var(--gout);font-size:.95rem;font-weight:600;line-height:1.2}
/* La legende ne tient pas DANS la pastille : deux lignes de plus et le
   bouton devient un oeuf. Elle se pose sous l'etui, centree, et seule
   celle du cote actif s'affiche — d'ou le positionnement absolu, qui la
   sort du flux et permet aux deux de se superposer. */
.choix small{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  font-size:.8rem;line-height:1.3;text-align:center;color:var(--texte-2);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.choix input:checked+label small{opacity:1}

.swatches{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- le nuancier du corps, en deux familles ----------
   Les opaques d'abord, les translucides ensuite, chacune sous son intitule
   (Remy, 03/09/2026, proposition A). Dix-neuf teintes dont onze
   translucides : sans ce partage, l'oeil ne savait plus ou il en etait.
   Les autres pieces gardent une seule rangee — la collerette n'a qu'une
   teinte translucide sur dix, un intitule pour une pastille ferait plus de
   bruit que de service.
   /!\ Regle presente dans configurateur.css ET dans style.css, chargee
   apres : les deux doivent rester identiques. */
.nuance-titre{
  display:block;margin:14px 0 8px;
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris-3);
}
.nuance-titre:first-child{margin-top:0}

.swatch{position:relative;line-height:0}
.swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch label{
  /* flex et non block : la pastille est un span inline, ses dimensions
     seraient ignorees dans un conteneur en flux normal. */
  display:flex;border:2px solid transparent;border-radius:50%;padding:2px;cursor:pointer;
  transition:border-color .14s;
}
.swatch label:hover{border-color:var(--gris-3)}
.swatch input:checked+label{border-color:var(--marine)}
.swatch input:focus-visible+label{outline:2px solid var(--bleu);outline-offset:2px}

/* ---------- choix des teintes : une ligne par piece ----------
   Quatre nuanciers ouverts en permanence prenaient trois ecrans de haut.
   La ligne rappelle la teinte retenue, la palette s'ouvre a la demande. */
/* Dans la palette la pastille est la seule cible : elle doit etre assez
   grosse pour se cliquer au doigt. Dans le rappel de ligne, elle reste
   petite, elle n'est la que pour situer la teinte. */
.piece__palette .pastille{width:28px;height:28px;flex:0 0 28px}
.pieces{margin-bottom:14px}
.piece{border:1px solid var(--gris-2);border-radius:var(--r);margin-bottom:6px;background:#fff}
.piece--ouverte{border-color:var(--marine)}
.piece__tete{
  display:flex;align-items:center;gap:12px;width:100%;padding:9px 14px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;
}
.piece__tete:hover{background:#F7FAFD}
.piece__tete:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
.piece__nom{font-family:var(--gout);font-size:.9rem;color:var(--texte);flex:0 0 128px}
.piece__val{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;color:var(--texte-2);flex:1;min-width:0}

/* « Sélection actuelle : » — seulement palette ouverte (Remy, 03/09/2026).
   Fermee, la ligne dit la teinte retenue et n'a rien a nommer ; ouverte, la
   meme teinte est aussi cerclee dans le nuancier juste en dessous, et c'est
   ce doublon qu'il faut expliquer.
   /!\ Regle presente dans configurateur.css ET dans style.css. */
.piece__val-libelle{display:none}
/* white-space:nowrap : dans le panneau 3D, plus etroit, « SÉLECTION
   ACTUELLE » et son deux-points se retrouvaient l'un au-dessus de l'autre.
   La ligne entiere, elle, a le droit de passer a la ligne. */
.piece--ouverte .piece__val-libelle{
  display:inline;white-space:nowrap;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris-3);
}
.piece__val-teinte{display:flex;align-items:center;gap:8px;min-width:0}

.piece__val b{font-weight:500;color:var(--texte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece__act{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu);white-space:nowrap;
}
.piece__act-fermer{display:none}
.piece__tete[aria-expanded="true"] .piece__act-ouvrir{display:none}
.piece__tete[aria-expanded="true"] .piece__act-fermer{display:inline}
.piece__palette{padding:2px 14px 14px}
@media (max-width:520px){
  .piece__nom{flex-basis:100%;margin-bottom:2px}
  .piece__tete{flex-wrap:wrap;gap:8px}
}

.bloc-couleur{margin-bottom:16px}
.bloc-couleur h3{font-size:.95rem;margin-bottom:10px;display:flex;align-items:center;gap:9px}
.bloc-couleur h3 .etiquette{font-weight:400}

.depose{
  border:2px dashed var(--gris-3);border-radius:var(--r);padding:30px 22px;text-align:center;
  background:var(--gris);transition:border-color .14s,background .14s;cursor:pointer;
}
.depose:hover,.depose.survol{border-color:var(--bleu);background:#EDF4FB}
.depose b{display:block;font-family:var(--gout);margin-bottom:5px}
.depose small{color:var(--texte-2);display:block;font-size:.86rem}
.depose input{display:none}
.fichier{
  display:flex;align-items:center;gap:14px;border:1px solid var(--gris-2);border-radius:var(--r);
  padding:12px 14px;margin-top:12px;background:#fff;
}
.fichier img{width:52px;height:52px;object-fit:contain;background:var(--gris);border-radius:2px;flex:0 0 52px}
.fichier__info{flex:1;min-width:0;font-size:.88rem}
.fichier__info b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fichier__info small{color:var(--texte-2)}
.fichier button{
  background:none;border:0;color:var(--alerte);cursor:pointer;font-size:.85rem;font-weight:600;
  font-family:var(--corps);padding:6px;
}

/* --- commande segmentee : nombre de couleurs d'impression --- */
.segmente{position:relative;display:inline-flex;border:1.5px solid var(--gris-2);border-radius:var(--r);overflow:hidden;background:#fff}
.segmente input{position:absolute;opacity:0;pointer-events:none}
.segmente label{
  display:block;min-width:46px;padding:9px 6px;text-align:center;cursor:pointer;
  font-family:var(--mono);font-size:.92rem;color:var(--texte-2);
  border-left:1px solid var(--gris-2);transition:background .14s,color .14s;
}
.segmente label:first-of-type{border-left:0}
.segmente label:hover{background:#EDF4FB;color:var(--marine)}
.segmente input:checked+label{background:var(--marine);color:#fff;font-weight:600}
.segmente input:focus-visible+label{outline:2px solid var(--bleu);outline-offset:-2px}

/* --- encres : pastilles cliquables + une seule palette --- */
.encres-slots{display:flex;flex-wrap:wrap;gap:9px}
.encre-slot{
  display:flex;align-items:center;gap:9px;background:#fff;cursor:pointer;text-align:left;
  border:1.5px solid var(--gris-2);border-radius:var(--r);padding:6px 13px 6px 8px;
  font-family:var(--corps);transition:border-color .14s,background .14s;
}
.encre-slot:hover{border-color:var(--bleu);background:#EDF4FB}
.encre-slot.est-actif{border-color:var(--marine);background:#F4F8FC}
.encre-slot:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.encre-slot__txt{display:block;line-height:1.25}
.encre-slot__txt small{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-2)}
.encre-slot__txt b{font-size:.85rem;color:var(--texte);font-weight:600}
.encres-palette{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding:12px;
  border:1px solid var(--gris-2);border-radius:var(--r);background:var(--gris);
}
.encres-palette[hidden]{display:none}
.encre-choix{
  display:flex;align-items:center;gap:7px;background:#fff;cursor:pointer;
  border:1.5px solid var(--gris-2);border-radius:var(--r);padding:5px 11px 5px 6px;
  font-family:var(--corps);font-size:.83rem;color:var(--texte-2);transition:border-color .14s,color .14s;
}
.encre-choix:hover{border-color:var(--bleu);background:#EDF4FB}
.encre-choix.est-pris{border-color:var(--marine);color:var(--texte);font-weight:600;background:#F4F8FC}
/* Une teinte de collerette identique au corps ne se verrait pas : elle est
   RETIREE de la rangee. Elle etait barree, avec une bulle d'explication ;
   Remy, le 04/09/2026 : « ne pas faire apparaitre la teinte qui ne sert a
   rien ». Une case barree prend une place et appelle un clic pour rien. */
.swatch.est-cachee{display:none}
.swatch input:disabled + label,
.swatch label.est-indisponible{opacity:.3;cursor:not-allowed;filter:grayscale(.55)}
.swatch input:disabled + label:hover{transform:none}
.encre-choix.est-indisponible{
  opacity:.34;cursor:not-allowed;border-style:dashed;
}
.encre-choix.est-indisponible:hover{border-color:var(--gris-2);background:#fff}
.encre-choix:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}

.alerte{
  border-left:3px solid var(--bleu);background:#EDF4FB;padding:14px 18px;border-radius:0 var(--r) var(--r) 0;
  font-size:.92rem;color:var(--texte-2);margin-top:18px;
}
.alerte b{color:var(--texte)}
.alerte--attention{border-left-color:var(--alerte);background:#FCF1ED}
.alerte--ok{border-left-color:var(--ok);background:#EDF7F0}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .config{grid-template-columns:1fr;gap:34px}
  .config__scene{position:static}
  .hero__grille{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .grille--4{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr);gap:32px 22px}
  .etape::after{display:none}
  .pied__grille{grid-template-columns:1fr 1fr}
  .grille--asym{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:1180px){
  .nav{gap:2px}
  .nav a{font-size:.85rem;padding:8px 9px}
  .marque__nom{display:none}
}
@media (max-width:900px){
  .nav a{font-size:.8rem;padding:7px 7px}
  .marque img{height:54px}
}
/*
 * LE MENU PASSE AU BURGER QUAND IL NE TIENT PLUS — MESURÉ, PAS DEVINÉ.
 *
 * Le seuil était un nombre écrit à la main : 760 px, puis 880 px après
 * qu'une tablette en portrait eut fait déborder la barre de cinq pixels.
 * Ajouter deux pages au menu l'a fait déborder de SOIXANTE pixels sur un
 * écran de 1280 — toute la page se décalait latéralement, en-tête coupé à
 * droite. Un seuil en dur ne peut pas connaître la longueur des libellés,
 * qui change à chaque page ajoutée et à chaque langue : « Impression &
 * BAT » en allemand n'occupe pas la même largeur qu'en français.
 *
 * site.js mesure donc la barre et pose `entete--compact` quand elle ne
 * tient pas. La requête média reste en dessous, comme plancher : sans
 * JavaScript, le burger apparaît quand même sur les petits écrans.
 */
/* Le palier intermédiaire : le nom du site s'efface, le menu reste entier.
   Le logo T.A. dit déjà la marque, et le titre de la page dit déjà le site. */
.entete--sans-nom .marque__nom{display:none}

.entete--compact .burger{display:block}
.entete--compact .nav{
  display:none;position:absolute;top:82px;left:0;right:0;background:#fff;box-shadow:0 12px 24px rgba(27,36,48,.12);
  flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;
  border-bottom:1px solid var(--gris-2);
}
.entete--compact .nav.ouvert{display:flex}
.entete--compact .nav a{padding:12px 0;border-bottom:1px solid var(--gris-2)}
.entete--compact .nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
.entete--compact .langues{margin-top:14px}
.entete--compact .langues summary{justify-content:flex-start}
.entete--compact .langues__liste{position:static;min-width:0;margin-top:10px;box-shadow:none}
.entete--compact .langues__liste a{border-bottom:0}

/* Un cran de plus avant le burger : à sept entrées, la barre gagne à se
   resserrer plutôt qu'à disparaître. Sans borne haute — l'enveloppe est
   plafonnée à 1200 px de toute façon, si bien qu'un écran de 1600 px n'offre
   pas un pixel de plus à la barre qu'un écran de 1280. */
/* 9 px de cote (et non 11), gap 2 px : c'est ce qui permet au menu retenu le
   03/09/2026 — « Creer mon bidon », « 3D beta », « Bon a tirer », « Atelier »,
   « Catalogue » — de tenir avec le nom « bidonperso.fr » visible. Mesure
   (site.js) : 833 px demandes pour 857 disponibles a 1 200 px. */
@media (min-width:881px){
  .nav a{font-size:.86rem;padding:9px 9px}
  .nav .btn{padding:11px 18px;font-size:.88rem;margin-left:8px}
}

@media (max-width:880px){
  .nav{
    display:none;position:absolute;top:82px;left:0;right:0;background:#fff;box-shadow:0 12px 24px rgba(27,36,48,.12);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav.ouvert{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--gris-2)}
  .nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .burger{display:block}
  /* en menu déroulant, le sélecteur redevient une simple ligne */
  .langues{margin-top:14px}
  .langues summary{justify-content:flex-start}
  .langues__liste{position:static;min-width:0;margin-top:10px;box-shadow:none}
  .langues__liste a{border-bottom:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:52px 0}
  .chiffres__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* minmax(0,1fr) et non 1fr : une piste « 1fr » garde un minimum
     automatique egal a la largeur minimale de son contenu. Le tableau des
     cotes (520 px de minimum) poussait donc la piste, la carte et la page
     entiere a 546 px sur un ecran de 375 — alors que .table-scroll etait
     la pour que seul le tableau defile. Mesure faite a 375 px. */
  .grille--2,.grille--3,.grille--4{grid-template-columns:minmax(0,1fr)}
  .etapes{grid-template-columns:1fr;gap:26px}
  .choix{grid-template-columns:1fr}
  .champs-2{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr}
  .hero__ruban{padding:14px 16px 12px}
  .hero__ruban small{font-size:.64rem}
}

@media print{
  .entete,.pied,.ruban,.burger{display:none}
  body{font-size:12px}
}


/* ============================================================
   VIDÉO — façade cliquable, YouTube n'est chargé qu'au clic
   (aucun cookie Google avant l'action du visiteur)
   ============================================================ */
.video{position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  aspect-ratio:16/9;max-width:960px;margin:0 auto}
.video img,.video iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.video__lecture{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(14,22,32,.15),rgba(14,22,32,.6));
  border:0;cursor:pointer;color:#fff;font-family:var(--gout);font-weight:800;font-size:1.02rem;
  transition:background .2s;
}
.video__lecture:hover{background:linear-gradient(180deg,rgba(14,22,32,.05),rgba(14,22,32,.5))}
.video__rond{
  width:72px;height:72px;border-radius:50%;background:var(--bleu);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.video__rond::after{
  content:'';border-left:20px solid #fff;border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px;
}
.video__mention{font-family:var(--corps);font-weight:400;font-size:.82rem;opacity:.85;max-width:34ch;text-align:center}
/* le lien de secours, quand YouTube refuse l'embarquement */
.video__secours{
  position:absolute;right:12px;bottom:10px;z-index:2;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:#fff;opacity:.72;text-decoration:underline;
}
.video__secours:hover{opacity:1;color:#fff}


/* ---------- arguments « pour qui » ---------- */
.atouts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gris-2);
  border:1px solid var(--gris-2);border-radius:var(--r);overflow:hidden;margin-top:40px}
.atout{background:#fff;padding:26px 22px}
.atout b{display:block;font-family:var(--gout);font-weight:800;font-size:1.5rem;
  line-height:1;color:var(--marine);margin-bottom:9px}
.atout span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-2)}
/* L'icone tient sur la meme ligne que l'intitule : les cartes du dessus ont
   deja un picto en pave, deux rangees de paves feraient repetition. */
.atout__tete{display:flex;align-items:center;gap:9px;margin:0 0 10px}
.atout__picto{width:19px;height:19px;flex:0 0 19px;color:var(--bleu)}
.atout p{font-size:.93rem;color:var(--texte-2);margin:0}
/* Le renvoi vers le bloc des équipes, sous la tuile « Référence ». */
.atout__lien{margin-top:10px !important}
.atout__lien a{font-weight:600;color:var(--bleu);text-decoration:none;text-underline-offset:3px}
.atout__lien a::after{content:' \2193'}
.atout__lien a:hover,.atout__lien a:focus-visible{text-decoration:underline}

/* ---------- note de tarif ----------
   La question revient a chaque devis : melanger les teintes ne coute rien.
   Elle est posee la ou le visiteur choisit ses couleurs, pas dans un coin. */
.note-prix{
  margin:26px 0 0;padding:13px 16px;font-size:.9rem;line-height:1.5;
  border-left:3px solid var(--bleu);background:#F2F7FC;color:var(--texte-2);border-radius:0 var(--r) var(--r) 0;
}

/* ---------- passerelle gamme standard ---------- */
.passerelle{
  border:1px solid var(--gris-2);border-left:3px solid var(--bleu);border-radius:var(--r);
  padding:26px 30px;background:#fff;display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.passerelle__texte{flex:1;min-width:280px}
.passerelle h3{margin-bottom:6px}
.passerelle p{margin:0;color:var(--texte-2);font-size:.97rem}

@media (max-width:1000px){ .atouts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .atouts{grid-template-columns:1fr} }

/* ---------- accessibilité et divers ---------- */
.ecran-lecteur{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#fff;color:var(--marine);padding:12px 18px;border-radius:0 0 var(--r) 0;
  font-weight:700;
}
.ecran-lecteur:focus{left:0}
.enveloppe--etroite{max-width:840px}
.enveloppe--moyenne{max-width:960px}

.note-douce{color:var(--texte-2);font-size:.95rem}
.titre-ok{color:var(--ok)}
.titre-ko{color:var(--alerte)}
.schema{background:var(--gris);border:1px solid var(--gris-2);border-radius:var(--r);padding:28px}
.schema svg{width:100%;height:auto}
.contenu-libre h2{margin-top:1.6em}
.contenu-libre ul,.contenu-libre ol{padding-left:1.3em;color:var(--texte-2)}
.contenu-libre li{margin-bottom:.5em}
.contenu-libre img{border-radius:var(--r);margin:1.6em 0}
.contenu-libre blockquote{
  border-left:3px solid var(--bleu);padding-left:20px;margin:1.6em 0;color:var(--texte-2);
}
.pied__adresse{font-style:normal;line-height:1.6;margin-top:12px}

/* ---------- catalogue PDF ---------- */
.catalogue{
  display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:center;
  background:#fff;border:1px solid var(--gris-2);border-radius:var(--r);padding:34px;
}
.catalogue__couv img{
  border-radius:2px;box-shadow:0 16px 40px rgba(27,36,48,.20);
  border:1px solid var(--gris-2);
}
/* La double page du catalogue est un montage : elle porte deja son ombre
   portee et ses coins arrondis. Le cadre du bloc ferait un liseré autour
   d'un fond blanc, ce qui se voit et ne sert a rien. */
/* On garde le petit arrondi : le fond gris du montage ferait sinon un
   rectangle a angles vifs pose sur le blanc de la carte. */
.catalogue__couv--nue img{box-shadow:none;border:0}
.catalogue__texte h3{font-size:1.6rem;margin-bottom:10px}
.catalogue__texte p{color:var(--texte-2);max-width:52ch}
.catalogue__note{font-size:.85rem;margin-top:16px}
.lecteur{margin-top:28px;border:1px solid var(--gris-2);border-radius:var(--r);overflow:hidden;background:#fff}
.lecteur__barre{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;background:var(--nuit);color:#fff;
}
.lecteur__barre b{font-family:var(--gout);font-size:.95rem}
.lecteur__fermer{background:none;border:0;color:#fff;font-size:1.1rem;cursor:pointer;padding:4px 8px}
.lecteur__cadre{height:78vh;min-height:520px}
.lecteur__cadre iframe{width:100%;height:100%;border:0;display:block}
.produit__desc{font-size:.82rem;color:var(--texte-2);margin:0 0 8px;line-height:1.4}
@media (max-width:900px){
  .catalogue{grid-template-columns:1fr;gap:26px;padding:24px}
  .catalogue__couv{max-width:280px}
  .lecteur__cadre{height:70vh;min-height:420px}
}

/* ---------- gamme standard : catalogue photo ----------
 *
 * DENSITE. La page faisait 8,6 ecrans, la plus longue du site, et les
 * quarante-trois references en occupaient les trois cinquiemes : cinq
 * colonnes de vignettes de 349 px de haut. Un catalogue se parcourt du
 * regard, il ne se lit pas ligne a ligne — la vignette est donc resserree
 * (photo plus petite, marges reduites) et la grille passe a six colonnes sur
 * un ecran large. Rien n'est retire, tout tient sur moins de hauteur.
 *
 * CES REGLES EXISTENT EN DOUBLE, ici et dans l'extension
 * (assets/css/configurateur.css). Ce n'est pas un oubli : l'extension doit
 * savoir s'habiller seule sous WordPress, ou le theme peut ne pas etre
 * actif. Sur le site plat, style.css est charge en dernier et l'emporte.
 * Les deux copies se modifient ENSEMBLE.
 */
.gamme-std__famille{margin:0 0 36px}
.gamme-std__famille h3{font-size:1.34rem;margin:0 0 4px}
.gamme-std__intro{color:var(--texte-2);font-size:.95rem;margin:0 0 14px}
/*
 * UNE SEULE LIGNE QUI GLISSE, par famille (Remy, 04/09/2026).
 *
 * La grille repliait : huit vignettes puis une neuvieme seule sur sa ligne.
 * Le defilement est celui du navigateur — d'ou le doigt, le pave tactile et
 * la molette inclinee sans une ligne de script ; gamme.js n'ajoute que les
 * deux fleches.
 *
 * scroll-snap aligne la vignette sur le bord gauche apres chaque saut : sans
 * lui on s'arretait au milieu d'une carte, et on ne savait plus si on l'avait
 * vue. scroll-padding tient compte du retrait qui laisse la place aux
 * fleches.
 */
.gamme-std__grille{
  display:flex;gap:14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:2px;
  /* la carte qui depasse ne doit pas etre coupee net par le cadre */
  padding:4px 2px 12px;margin:0 -2px;
  scrollbar-width:thin;
}
/* Les vignettes gardent leur largeur : c'est ce qui fait la rangee. */
.gamme-std__grille > .produit{flex:0 0 168px;scroll-snap-align:start}
@media (max-width:600px){.gamme-std__grille > .produit{flex-basis:150px}}

/*
 * LES DEUX FLECHES. Posees SUR les bords de la rangee plutot qu'a cote :
 * a cote, elles volaient 96 px de largeur a chaque famille, soit une
 * vignette de moins visible sur un portable.
 */
.defil{position:relative}
.defil__fleche{
  position:absolute;top:calc(50% + 6px);transform:translateY(-50%);
  z-index:2;width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gris-2, #E4E9F0);border-radius:50%;
  background:#fff;color:var(--marine, #1F4E79);cursor:pointer;
  box-shadow:0 4px 16px rgba(20,40,70,.18);
  transition:background .15s,color .15s,border-color .15s,opacity .15s;
}
.defil__fleche svg{width:20px;height:20px}
.defil__fleche--gauche{left:-6px}
.defil__fleche--droite{right:-6px}
.defil__fleche:hover:not(:disabled),.defil__fleche:focus-visible:not(:disabled){
  background:var(--bleu, #2E74B5);border-color:var(--bleu, #2E74B5);color:#fff;
}
/* Eteinte au bout de la course : elle dit ou l'on en est. */
.defil__fleche:disabled{opacity:.28;cursor:default;box-shadow:none}
/* Famille assez courte pour tenir : pas de fleches du tout. */
.defil--inutile .defil__fleche{display:none}
/* Au doigt, la barre et le geste suffisent ; les fleches prendraient la
   place d'une vignette. */
@media (hover:none){.defil__fleche{display:none}}
.produit{
  background:#fff;border:1px solid var(--gris-2);border-radius:var(--r);padding:10px 10px 13px;
  text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.produit:hover{border-color:var(--bleu);box-shadow:0 8px 26px rgba(46,116,181,.16);transform:translateY(-2px)}
.produit__photo{background:var(--gris);border-radius:2px;margin-bottom:8px}
.produit__photo img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.produit__nom{font-family:var(--gout);font-size:.95rem;margin:0 0 4px;line-height:1.25}
.produit__ref{font-family:var(--mono);font-size:.72rem;color:var(--texte-2);margin:0;letter-spacing:.02em}

/* Renvoi vers la fiche de la boutique T.A. : le nom devient un lien discret,
   le bouton d'achat n'apparait qu'au survol de la vignette (et toujours au
   clavier, sinon il serait inatteignable). */
.produit__nom a{color:inherit;text-decoration:none}
.produit__nom a:hover,.produit__nom a:focus-visible{color:var(--bleu);text-decoration:underline}
.produit{display:flex;flex-direction:column}
.produit__achat{margin:auto 0 0;padding-top:10px}
/*
 * LE SÉLECTEUR DE CONTENANCE (Rémy, 06/09/2026, variante « curseur seul »).
 * Deux moitiés d'exactement la même largeur — c'est une grille 1fr 1fr, pas
 * deux boutons posés côte à côte — et la même hauteur partout. Un seul
 * format : une seule colonne, pleine largeur.
 */
.produit__tailles{
  display:grid;grid-template-columns:1fr 1fr;width:100%;
  border:1px solid rgba(46,116,181,.34);border-radius:2px;overflow:hidden;
}
.produit__tailles--seule{grid-template-columns:1fr}
.produit__taille{
  display:flex;align-items:center;justify-content:center;height:38px;
  font-family:var(--gout);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  /* Marine et non bleu : sur son propre fond bleute, le bleu tombait a
     4,42:1 pour un texte de 11,5 px. Le marine donne 7,8:1. */
  color:var(--marine);background:rgba(46,116,181,.08);
  transition:background .15s,color .15s;
}
.produit__taille + .produit__taille{border-left:1px solid rgba(46,116,181,.34)}
.produit__taille:hover,.produit__taille:focus-visible{background:var(--bleu);color:#fff}
.produit__achat--nc{font-size:.74rem;color:var(--texte-2);font-style:italic}
.gamme-std__note{font-size:.9rem;color:var(--texte-2);border-top:1px solid var(--gris-2);padding-top:20px}
.gamme-std__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.gamme-std__grille{gap:12px}}

/* ---------- fabrication : les 5 étapes internalisées ---------- */
/* Les cinq sur une seule ligne : la chaîne se lit d'un coup d'œil, de la
   matière au carton. En dessous de 1080 px on repasse à trois puis à deux. */
.fabrication{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* La meme grille sert aux quatre etapes de serigraphie. Une classe plutot
   que :has() : le selecteur n'existe pas avant Firefox 121. */
.fabrication--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fabrication .carte{display:flex;flex-direction:column;padding:0;overflow:hidden}
.carte--fab>*:not(.fab__visuel){padding-left:18px;padding-right:18px}
/* L'emplacement photo garde le meme gabarit, photo ou pictogramme. */
.fab__visuel{
  margin:0;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#EDF2F8 0%,#DDE6F0 100%);
  border-bottom:1px solid var(--gris-2);color:var(--marine);
}
.fab__visuel img{width:100%;height:100%;object-fit:cover;display:block}
.fab__visuel--photo{background:none}
.fab__picto{width:62%;height:auto;opacity:.62}
/* Selecteur assez fort pour passer devant « .carte p », sinon le procede
   retombe en gris comme les autres paragraphes de carte. */
.carte--fab p.fabrication__procede{
  font-family:var(--mono);font-size:.72rem;line-height:1.35;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bleu);margin:0 0 10px;
}
.fabrication .carte h3{margin-bottom:6px;font-size:1.02rem}
.fabrication .carte p:last-child{font-size:.9rem}
.carte--fab .carte__num{margin-top:16px}
.carte--fab p:last-child{padding-bottom:20px}
.fabrication__pied{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--gris-2);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--texte-2);
}
@media (max-width:1080px){.fabrication{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fabrication{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fabrication{grid-template-columns:1fr}}

/* ---------- deux vues : produit / design ---------- */
/* ---------- le plan en grand ---------- */
.plan{position:relative}
.plan__loupe{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 11px;border:1px solid var(--gris-3);background:rgba(255,255,255,.94);
  border-radius:var(--r);cursor:pointer;color:var(--texte-2);
}
.plan__loupe:hover{border-color:var(--bleu);color:var(--marine);background:#fff}
.plan__indice{margin-top:8px}
.loupe{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(11,15,23,.86);padding:24px;
}
.loupe__boite{position:relative;width:100%;max-width:1600px}
.loupe__boite canvas{display:block;width:100%;height:auto;background:#fff;border-radius:var(--r)}
.loupe__fermer{
  position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;
  border:0;background:#fff;color:var(--marine);font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.loupe__fermer:hover{background:var(--bleu);color:#fff}
body.loupe-ouverte{overflow:hidden}
@media (max-width:600px){
  .loupe{padding:14px}
  .loupe__fermer{top:-12px;right:-6px;width:32px;height:32px}
}

.vues-onglets{display:flex;gap:6px;margin-bottom:14px}
.vues-onglet{
  flex:1;padding:11px 10px;cursor:pointer;font-size:.88rem;font-weight:600;
  font-family:var(--corps);color:var(--texte-2);background:var(--gris);
  border:1.5px solid var(--gris-2);border-bottom-color:transparent;
  border-radius:var(--r) var(--r) 0 0;transition:background .14s,color .14s,border-color .14s;
}
.vues-onglet:hover{background:#EDF4FB;border-color:var(--bleu);color:var(--marine)}
.vues-onglet[aria-selected="true"]{
  background:#fff;color:var(--marine);border-color:var(--gris-2);border-bottom-color:#fff;
  box-shadow:inset 0 3px 0 var(--bleu);
}
.vues-onglet:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.plan{
  border:1px solid var(--gris-2);border-radius:0 0 var(--r) var(--r);background:#fff;
  padding:18px 16px 6px;text-align:center;
}
.plan canvas{width:100%;height:auto;display:block}

/* ---------- durabilité : l'argumentaire matière ---------- */
.durab{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 40px}
.durab__point{
  padding:20px 0;border-top:1px solid var(--gris-2);
  display:grid;grid-template-columns:1fr;gap:4px;
}
.durab__point b{font-family:var(--gout);font-size:1.04rem;color:var(--texte)}
.durab__point span{color:var(--texte-2);font-size:.96rem;line-height:1.55}

/* ---------- Schema eclate de la serigraphie ---------- */
/*
 * Vue eclatee : typon, emulsion, cadre, racle, bidon. La geometrie est posee
 * dans rendu.php, en projection orthographique ; ici on ne fixe que les
 * couleurs et l'echelle.
 *
 * Sous 720 px les legendes deviendraient illisibles : on laisse alors le
 * schema defiler horizontalement dans son cadre plutot que de le reduire.
 */
/*
 * LE DESSIN D'UN CÔTÉ, LE TEXTE DE L'AUTRE.
 *
 * Le schéma portait ses cinq légendes à l'intérieur du SVG, dans une colonne
 * de droite : il lui fallait donc 820 px de large pour 920 de haut, prenait
 * toute la largeur de la page et 1 250 px de hauteur à l'écran, pour un
 * dessin qui en occupait les deux tiers. Les légendes sont sorties en HTML,
 * le dessin est seul dans sa colonne et plafonné en hauteur : le bloc entier
 * tient maintenant sous 600 px.
 */
.schema-serigraphie{
  margin:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:32px;align-items:center;
}
.schema-serigraphie__cadre{
  background:var(--gris);border:1px solid var(--gris-2);border-radius:var(--r);
  padding:18px 14px;display:flex;justify-content:center;
}
.schema-serigraphie svg{display:block;width:auto;max-width:100%;max-height:470px;height:auto}
.schema-serigraphie figcaption{
  margin-top:18px;color:var(--texte-2);font-size:.92rem;
}
/* Les cinq étages, en regard du dessin. */
.sch-etages{list-style:none;margin:0;padding:0;counter-reset:etage}
.sch-etages li{
  counter-increment:etage;position:relative;padding-left:34px;margin-bottom:12px;
}
.sch-etages li::before{
  content:counter(etage);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:var(--marine);color:#fff;
  font-family:var(--mono);font-size:.7rem;display:flex;align-items:center;justify-content:center;
}
.sch-etages b{display:block;font-family:var(--gout);font-size:1rem;line-height:1.2}
.sch-etages span{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--texte-2)}
@media (max-width:860px){
  .schema-serigraphie{grid-template-columns:minmax(0,1fr);gap:22px}
  .schema-serigraphie svg{max-height:380px}
}

/* les plaques */
.sch{stroke:var(--marine);stroke-width:2}
.sch__film{fill:#FFFFFF;fill-opacity:.94}
.sch__emulsion{fill:var(--bleu);fill-opacity:.9}
/* la toile tendue, nue : une maille claire et neutre */
.sch__toile{fill:var(--gris);stroke-width:1.4}
/* la meme, une fois enduite d'emulsion et insolee : le motif y est ouvert */
.sch__toile--enduite{fill:var(--bleu)}
/* le cadre et son epaisseur : deux flancs, l'un a l'ombre */
.sch__cadre{fill:var(--gris-3)}
.sch__flanc--sombre{fill:#9AA6B6;stroke:var(--marine);stroke-width:2}
.sch__flanc--clair{fill:var(--gris-3);stroke:var(--marine);stroke-width:2}

/* La racle, en volume. La lame est chargee d'encre : elle est donc NOIRE,
   comme le bourrelet qu'elle pousse devant elle. Seul le manche, qui est
   l'outil, garde la couleur de la charte. */
.sch__lame{stroke:#0E1620;stroke-width:1.4}
.sch__lame--dessus{fill:#2A313B}
.sch__lame--flanc{fill:#1B2430}
.sch__lame--bout{fill:#11161E}
.sch__encre{stroke:#0E1620;stroke-width:1.2}
.sch__encre--dessus{fill:#232A34}
.sch__encre--flanc{fill:#161C25}
.sch__encre--bout{fill:#0E1620}
.sch__manche{stroke:var(--marine-fonce);stroke-width:1.6}
.sch__manche--dessus{fill:var(--bleu)}
.sch__manche--flanc{fill:var(--marine)}
.sch__manche--bout{fill:var(--marine-fonce)}

/* l'encre : elle est noire, c'est la seule du bon a tirer */
.sch__pot-corps{fill:#1B2430;stroke:var(--marine-fonce)}
.sch__pot-bouche{fill:#3A424E;stroke:var(--marine-fonce)}
.sch__pot-anse{stroke:var(--marine-fonce);stroke-width:2.4}
.sch__coulee{stroke:#1B2430;stroke-width:7;stroke-linecap:round;fill:none}

/* le bidon : rendu calcule, detoure ; une ombre de contact le pose */
/* le roulement : un arc au-dessus de chaque bidon, la course sous la file */
.sch__tourne{stroke:var(--bleu);stroke-width:2.2;fill:none;opacity:.85}
.sch__course{stroke:var(--texte-2);stroke-width:2.4;fill:none;opacity:.6}
.sch__course-txt{
  font-family:var(--mono);font-size:13px;fill:var(--texte-2);opacity:.85;
}

/* les legendes */
.sch-legende__trait{stroke:var(--texte-2);stroke-width:2;fill:none}
.sch-legende__titre{
  font-family:var(--gout);font-size:21px;font-weight:600;fill:var(--texte);
}
.sch-legende__note{
  font-family:var(--mono);font-size:14px;fill:var(--texte-2);
}

@media (max-width:640px){
  .schema-serigraphie__cadre{padding:16px 12px}
}

/* le lien de secours, quand YouTube refuse l'embarquement */
.video__secours:hover{opacity:1;color:#fff}


/* La photo produit est detouree : plus de fond blanc a masquer. Une ombre
   de contact la pose sur le plan, sinon elle flotte. */
.sch__ombre{fill:#1B2430;opacity:.09;stroke:none;filter:blur(9px)}

/* --- tableau des données personnelles (mentions légales) ------------------
   Un tableau plutôt qu'un pavé : « combien de temps » et « qui y a accès »
   se lisent en diagonale, ce qui est tout l'intérêt de l'information. */
/* ⚠ min-width:0 — la règle générale « table{min-width:520px} » sert aux
   tableaux de cotes, qui doivent défiler dans leur cadre. Celui-ci, lui,
   se replie en blocs sur mobile : sans cette remise à zéro il gardait ses
   520 px et faisait défiler la page entière. */
.mentions__donnees{width:100%;min-width:0;border-collapse:collapse;margin:14px 0 22px;font-size:.94rem}
.mentions__donnees th{
  text-align:left;vertical-align:top;padding:10px 16px 10px 0;width:200px;
  color:var(--marine);font-weight:600;border-top:1px solid var(--trait)
}
.mentions__donnees td{vertical-align:top;padding:10px 0;border-top:1px solid var(--trait)}
@media (max-width:640px){
  /* Le tableau redevient une suite de blocs : sur un téléphone, deux colonnes
     dont l'une fait 200 px ne laissent plus rien à la seconde. Il faut passer
     TOUS les niveaux en bloc — table et tbody compris — sinon l'algorithme de
     table continue de calculer une largeur minimale sur le contenu. */
  .mentions__donnees,.mentions__donnees tbody,.mentions__donnees tr{display:block;width:auto}
  .mentions__donnees th,.mentions__donnees td{display:block;width:auto;padding:2px 0}
  .mentions__donnees th{border-top:1px solid var(--trait);padding-top:12px}
  .mentions__donnees td{border-top:0;padding-bottom:12px}
}

/* ---------- bouton PRO -----------------------------------------------------
   L'entrée de l'espace de travail interne. Volontairement sobre et distincte
   du « Demander un devis » : ce n'est pas un appel au visiteur, c'est une
   porte de service. Le point vert dit « accès réservé » sans le mot. */
.btn-pro{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:4px;padding:8px 13px;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;font-weight:600;
  color:#CFE0EF;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-pro:hover,.btn-pro:focus-visible{
  background:rgba(46,116,181,.34);border-color:var(--cyan);color:#fff;
}
.btn-pro__cadenas{font-size:.5rem;color:#5FD08A;line-height:1}
.btn-pro:hover .btn-pro__cadenas{color:#8CF0B4}
@media (max-width:880px){
  .btn-pro{
    margin:12px 0 0;justify-content:center;
    border-color:rgba(255,255,255,.22);padding:11px 13px;
  }
}
@media print{ .btn-pro{display:none} }


/* ============================================================
   CORRECTIONS RELEVÉES À L'AUDIT RESPONSIVE
   ============================================================ */

/*
 * 1. LES BOUTONS DE VUE DU CONFIGURATEUR, SOUS 380 px.
 *
 * .scene__vides est une rangée qui ne se replie pas, dans une scène en
 * overflow:hidden : à 320 px la rangée demandait 283 px pour 238 de place,
 * « 0° » n'en montrait plus que 13 et un appui en son centre tombait hors
 * de la zone cliquable — le bouton était injouable, sans que rien ne le
 * laisse voir.
 *
 * Elle se replie donc, et les boutons prennent la hauteur d'une cible
 * tactile digne de ce nom.
 */
@media (max-width:400px){
  .scene__vides{flex-wrap:wrap;gap:6px}
  .scene__vides .vue-btn,.scene__vides .btn{min-height:44px}
}

/*
 * 2. LES 17 px DE DÉBORDEMENT À 320 px, sur l'accueil et la gamme.
 *
 * .passerelle__texte porte min-width:280px ; avec les 30 px de marge
 * intérieure de chaque côté et les bordures, le bloc réclamait 337 px. La
 * page débordait donc de 17 px — et sur un téléphone, le navigateur
 * dézoomait tout de 5 % pour le faire entrer.
 */
@media (max-width:420px){
  .passerelle{padding:20px 16px}
  .passerelle__texte{min-width:0}
}

/*
 * 3. LE TEXTE DE 10,24 px DU BANDEAU HÉROS.
 *
 * Il rétrécissait précisément là où l'écran est le plus petit. 12 px est
 * le plancher de lisibilité ; la ligne tient très bien à cette taille.
 */
@media (max-width:760px){
  .hero__ruban small{font-size:.75rem}
}

/*
 * 4. LES CIBLES TACTILES.
 *
 * Le burger faisait 38 × 40, les pastilles de teinte 36 × 36, les boutons
 * d'export 38 de haut. Sous le doigt, 44 × 44 est le minimum utilisable.
 *
 * Les pastilles gardent leur taille visible : c'est leur zone d'appui qui
 * s'étend, par une marge intérieure négative compensée — la grille ne
 * bouge pas d'un pixel.
 */
@media (max-width:820px){
  .burger{padding:10px 12px;min-width:44px;min-height:44px}
}
@media (max-width:820px){
  /* La pastille garde ses 28 px visibles ; c'est sa zone d'appui qui
     s'étend à 44, par un pseudo-élément centré. La grille ne bouge pas. */
  .piece__palette .swatch label{position:relative}
  .piece__palette .swatch label::after{
    content:'';position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;
  }
  #telecharger,#telechargerPdf,#devisPdf,#ongletProduit,#ongletDesign{min-height:44px}
  .produit__taille{min-height:44px}
}


/* ============================================================
   LE TOUR COMPLET DES BIDONS D'ÉQUIPE
   ============================================================

   Une planche de vingt-quatre vues rangées côte à côte, tirées du même
   configurateur que le reste. La planche fait vingt-quatre fois la largeur
   d'une case ; on la fait glisser d'une vue à chaque cran.

   steps(24) montre exactement les vingt-quatre vues et jamais la
   vingt-cinquième : la dernière position, à -100 %, n'est atteinte qu'à
   l'instant où l'animation reboucle. C'est ce qui rend le tour continu,
   sans à-coup au raccord.

   La planche n'est chargée que lorsque le bloc entre dans l'écran, et
   jamais si le visiteur a demandé moins de mouvement — voir site.js.

   LA LUCARNE FAIT LA LARGEUR D'UNE SEULE VUE.
   Sans elle, la planche s'affichait en entier : quatre bidons alignés dans
   chaque case, qui glissaient ensemble. Le débordement caché ne suffisait
   pas — il était posé sur la case, large de toute la carte, et non sur la
   vue.

   Cette largeur ne peut pas s'écrire ici : elle vaut la hauteur de la case
   multipliée par le rapport d'une vue, que seule la planche connaît. C'est
   donc site.js qui pose --vue au chargement de l'image, et aspect-ratio qui
   en tire la largeur. Le rapport est LU SUR LA PLANCHE et non déduit du PNG
   fixe : les deux sont mis à l'échelle séparément, et leurs arrondis
   diffèrent d'un demi-pixel — de quoi laisser paraître un liseré du bidon
   voisin sur le bord droit.
   ============================================================ */
/* .equipe__bidon porte déjà position:relative dans le bloc « équipes
   partenaires » : le redéclarer ici en ferait une règle de plus à tenir
   d'accord avec l'autre. */
.equipe__tour{position:absolute;inset:0;pointer-events:none}
/* La largeur est POSÉE EN PIXELS PAR LE SCRIPT, mesurée sur la planche
   rendue. Elle tenait sur `aspect-ratio` et une largeur automatique : Safari
   ne sait pas en tirer la largeur d'une boîte absolue calée haut et bas, et
   montrait la planche entière — des demi-bidons côte à côte. Le 1 px ici
   n'est qu'un garde-fou avant la mesure. */
.equipe__tour__lucarne{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:1px;
  overflow:hidden;
}
.equipe__tour img{
  /* Calée sur le BAS : la hauteur est déduite d'une largeur entière et peut
     manquer d'une fraction de pixel ; c'est en bas que le bidon doit poser. */
  position:absolute;left:0;bottom:0;height:auto;width:auto;max-width:none;
  /* PAS D'OMBRE PORTÉE ICI. Elle y était, et elle posait un voile gris
     autour du bidon dès qu'il tournait.
     .
     `filter` s'applique à l'ÉLÉMENT ENTIER, c'est-à-dire à la planche des
     trente-six vues — 3 312 px de large — et non à la vue visible. Les vues
     sont détourées au ras du bidon : l'ombre de la vue voisine tombe donc
     dans la lucarne, des deux côtés à la fois, et forme un rectangle gris à
     bords francs que le survol allumait et éteignait.
     .
     Le bidon fixe, lui, n'a jamais porté d'ombre — il n'y a qu'un
     drop-shadow dans toute la feuille, celui-ci. L'ombre n'était donc pas
     « la même que le bidon fixe » : elle apparaissait au moment du tour.
     Sans elle, les deux états sont enfin identiques. */
  /* UN tour, pas une rotation perpétuelle : la planche défile une fois par
     survol et s'arrête. `forwards` la laisserait sur la dernière vue, qui
     est la même que la première — mais la classe est retirée avant. */
  animation:bp-tour var(--duree,2s) steps(var(--vues,36)) 1;
}
/* La course en PIXELS, posée par le script : « -100 % » se résolvait sur
   la largeur rendue de la planche, une fraction, et l'arrondi différait
   d'un navigateur à l'autre. */
@keyframes bp-tour{to{transform:translateX(calc(-1 * var(--course, 100%)))}}
/* La planche n'existe dans la page qu'après le premier survol ; tant que la
   case ne tourne pas, elle reste cachée derrière le bidon fixe. */
.equipe__bidon:not(.equipe__bidon--tourne) .equipe__tour{visibility:hidden}

/* Le bidon fixe reste en place — il tient la taille de la case — mais
   s'efface pendant que la planche tourne. */
.equipe__bidon--tourne>img{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .equipe__tour{display:none}
  .equipe__bidon--tourne>img{visibility:visible}
}


/* ============================================================
   LA PAGE DE DEVIS, RESSERRÉE
   ============================================================

   Un formulaire ne se lit pas comme une page : on le parcourt du regard,
   d'un champ au suivant, et tout ce qui n'entre pas dans l'écran oblige à
   descendre pour savoir ce qui reste à remplir. La page faisait trois
   écrans pleins ; le rythme des pages de lecture — 76 px entre les blocs,
   18 px entre les champs — y jouait contre elle.

   Rien de tout cela ne bouge ailleurs sur le site : la règle est portée par
   la classe de page, posée sur <body> (voir bp_classe_page).

   Les tailles de texte, elles, ne bougent pas : resserrer n'est pas
   rapetisser, et un formulaire écrit plus petit se remplit moins bien.
   ============================================================ */
.page-devis .page-tete{padding:34px 0 30px}
.page-devis .page-tete h1{margin-bottom:10px}
.page-devis .section{padding:44px 0}

.page-devis .champ{margin-bottom:12px}
.page-devis .champ label{margin-bottom:4px}
.page-devis .champ input,
.page-devis .champ select,
.page-devis .champ textarea{padding:9px 12px}
/* La marge de droite du menu déroulant n'est pas décorative : elle réserve
   la place de la flèche. Le raccourci `padding` ci-dessus la rabattait à
   12 px et le texte passait dessous. */
.page-devis .champ select{padding-right:36px}

/* Les deux grandes zones de texte : de quoi voir ce qu'on écrit, pas un
   demi-écran chacune. Elles restent étirables à la souris. */
.page-devis .champ textarea{min-height:82px}
.page-devis #configuration{min-height:70px}

/* Les deux titres du formulaire sont des repères, pas des titres de page :
   « Vous » s'affichait en 40 px, plus gros que la question posée juste au-
   dessus. Ramenés à la taille d'un intertitre, ils rendent 60 px chacun. */
.page-devis .devis__form h2{font-size:1.45rem;margin-bottom:12px}
.page-devis .devis__form h2:not(:first-child){margin-top:4px}
.page-devis .devis__form hr{margin:18px 0}
.page-devis .champs-2{gap:0 16px}
/* Un menu déroulant à côté d'une zone de texte : les deux se calent en haut,
   sinon le menu flottait au milieu de la hauteur de sa voisine. Et les deux
   étiquettes prennent la même hauteur — l'une tient sur une ligne, l'autre
   sur deux, et les champs partaient décalés de vingt pixels. */
/* La rangée « visuel / configuration » n'a plus besoin de rien : les
   étiquettes partagent leur rangée, et les cases la leur. La béquille qui
   forçait la hauteur des étiquettes a été retirée. */

/* La mention sur les données : elle doit rester lisible et cessible du
   regard, pas occuper cinq lignes sous le bouton. */
.page-devis .devis__mentions{margin-top:12px;line-height:1.5}
/*
 * LE BLOC DE VÉRIFICATION (captcha Turnstile), 10/09/2026.
 * Le contrôle de Cloudflare mesure 300 x 65 px et se dessine dans un iframe :
 * on lui réserve sa hauteur pour que la page ne saute pas quand il arrive,
 * et on le laisse tel quel — il n'est pas habillable.
 */
.devis__verif{max-width:340px}
.devis__verif .cf-turnstile{min-height:65px}
@media (max-width:359px){
  .devis__verif .cf-turnstile{transform:scale(.92);transform-origin:0 0;min-height:60px}
}


.page-devis .tete-section{margin-bottom:22px}
.page-devis .mt-32{margin-top:20px}


/* ============================================================
   LA LOUPE, ÉTENDUE AUX PHOTOS

   Elle existait déjà, pour le plan d'impression agrandi du configurateur :
   `.loupe`, `.loupe__boite`, `.loupe__fermer` et `body.loupe-ouverte` sont
   à lui. On ne la redessine pas — le garde-fou des doublons a d'ailleurs
   arrêté la copie que j'allais écrire. On ajoute seulement ce qu'une photo
   demande de plus qu'un canevas : se caler sur la hauteur de la fenêtre.
   ============================================================ */
/* Le curseur est le seul indice qu'une photo s'ouvre — une pastille posée
   dessus masquerait ce qu'on vient justement regarder. */
.agrandissable{cursor:zoom-in}
.agrandissable:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}

/* Un fond plus dense que celui du plan : à 86 % d'opacité, la barre de menu
   restée blanche dessous transparaissait au-dessus de la photo. */
.loupe--photo{cursor:zoom-out;background:rgba(11,15,23,.965)}
.loupe--photo .loupe__boite{width:auto;max-width:100%;max-height:100%;display:flex}
.loupe--photo .loupe__boite img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:calc(100vh - 48px);
  background:#fff;border-radius:var(--r);
}

/* ---------- la 3D vue depuis le configurateur -------------------------------
   Le configurateur affiche le simulateur dans un cadre (iframe) qui charge
   simulateur-3d.html#nu. « nu » veut dire : la scène, et rien d'autre — ni
   en-tête du site, ni titre de page, ni pied, ni panneau de la maquette. Les
   commandes du configurateur sont à côté, dans la même page ; les répéter
   dans le cadre donnerait deux jeux de boutons pour un seul bidon.

   La classe est posée sur <html> par un script du gabarit, avant le rendu :
   rien ne clignote au chargement. */
.simu3d-nu .entete,
.simu3d-nu .bandeau,
.simu3d-nu .ruban,
.simu3d-nu .pied,
.simu3d-nu .page-tete,
.simu3d-nu .note-douce,
.simu3d-nu .ecran-lecteur,
.simu3d-nu .simu3d .panneau,
/* Le modèle se choisit dans la colonne de droite du configurateur, et le
   bandeau technique de la maquette redit ce que dit déjà l'aide sous le
   cadre : deux commandes pour un seul bidon, c'est une de trop. */
.simu3d-nu .simu3d #bascule,
.simu3d-nu .simu3d .repere{display:none!important}
.simu3d-nu body{background:#fff}
.simu3d-nu .section{padding:0}
.simu3d-nu .enveloppe{max-width:none;padding:0}
.simu3d-nu .simu3d{--simu3d-hauteur:100vh}
.simu3d-nu .simu3d .appli{min-height:0;height:100vh}

/* Le bouton « En savoir + » du configurateur. ⚠ La feuille de l'extension
   porte la même règle, mais celle-ci est chargée après : les deux doivent
   rester identiques (cf. .config, corrigé le 03/09/2026).
   Les ancres visées : les boutons envoient sous l'en-tête collante, d'où le
   retrait de défilement — sans lui, le titre visé passe derrière la barre. */
#gamme,#nuancier,#zone,#fichier,#encres,[id^="fab-"]{scroll-margin-top:28px}

/* ============================================================
   LE MODE INTÉGRÉ — la page dans le cadre de specialites-ta.com
   (03/10/2026, proposition C). La classe html.integre est posée par
   le script de tête de header.php, et seulement dans un cadre.
   Il ne reste que le configurateur (ou le devis) : ni bandeau, ni
   en-tête, ni titre de page, ni ruban, ni pied. Les liens vers le
   reste du site s'ouvrent dans un nouvel onglet (js/site.js).
   ============================================================ */
html.integre .ecran-lecteur,
html.integre .bandeau,
html.integre .entete,
html.integre .page-tete,
html.integre .ruban,
html.integre .pied{display:none!important}
html.integre body{background:#fff}
html.integre .page-tete + .section{padding-top:20px}
/* Plus d'en-tête collante au-dessus : la vue colle au haut du cadre, et
   gagne la hauteur de l'en-tête. */
html.integre .config__scene{top:8px;max-height:calc(100vh - 16px)}
@media (max-width:1000px){
  /* Une colonne : la vue ne défile plus dans sa propre boîte. Bornée à la
     hauteur du cadre, elle gardait sous son bord les boutons de devis —
     les seuls qui restent une fois l'en-tête et le ruban retirés. */
  html.integre .config__scene{max-height:none;overflow:visible}
}