/* =====================================================================
   RS Résina — système de design
   ---------------------------------------------------------------------
   Charte : jaune #FED200 (Xtreme Polishing Systems) sur anthracite
   #282828. Le cyan du logo revient comme teinte secondaire.

   RÈGLE DE CONTRASTE, non négociable :
   le jaune ne fait que 1,45:1 sur blanc — illisible en texte — mais
   10:1 sur l'anthracite. Le jaune est donc une SURFACE et un TRAIT.
   Du texte jaune : uniquement sur fond sombre. Du texte sur jaune :
   toujours anthracite, jamais blanc.

   Signature : « le bord humide ». Le filet jaune de 4 px que
   l'applicateur poursuit pendant la coulée. Il revient en crête de
   l'en-tête, en amorce de chaque surtitre, sous l'onglet actif et en
   haut du pied de page. Un seul geste, répété.
   ===================================================================== */

/* ------------------------------------------------------------- jetons */
:root {
  /* Matières */
  --ink:        #282828;   /* l'anthracite de la charte */
  --ink-deep:   #1C1C1C;   /* un cran dessous : sol des sections sombres */
  --ink-black:  #0A0A0A;   /* le noir de la plaque du logo et du camion */
  --ink-2:      #333333;
  --ink-3:      #3D3D3D;   /* texte courant appuyé */
  --steel:      #6B6B6B;   /* texte secondaire */
  --steel-2:    #A8A8A8;   /* le gris du logo, repris tel quel */
  --concrete:   #E4E1DB;   /* filets, aplats calmes */
  --quartz:     #F4F2EE;   /* fond de page, à peine chaud */
  --white:      #FFFFFF;

  /* Pigments */
  --resine:     #FED200;   /* le jaune de la charte — surface et trait */
  --resine-ink: #E5BD00;   /* survol des surfaces jaunes */
  --resine-05:  rgba(254, 210, 0, .06);
  --resine-12:  rgba(254, 210, 0, .16);
  --cuivre:     #007E8A;   /* turquoise assombri : lisible en texte sur clair */
  --cyan:       #06B4C2;   /* le turquoise exact du lettrage */
  --lagon:      #08979B;   /* le turquoise profond du rond du personnage */
  --lagon-deep: #007A93;   /* son ombre, au fond de la marbrure */
  --lame:       #EDE11F;   /* le jaune de la lame de raclette, dans le logo */

  /* États */
  --ok:   #0E7C5A;
  --warn: #9A6A00;
  --err:  #B32D1C;

  /* Typographie — deux familles, pas une de plus */
  --display: 'Cal Sans', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --body:    'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    var(--body);   /* les libellés techniques restent en Raleway */

  /* Rythme */
  --gut:     clamp(1.25rem, 4vw, 2.5rem);
  --shell:   1280px;
  --narrow:  760px;
  --radius:  3px;          /* presque nul : l'objet est coupé net */
  --radius-lg: 6px;
  --edge:    4px;          /* l'épaisseur du bord humide */

  --shadow-1: 0 1px 2px rgba(40, 40, 40, .07), 0 2px 8px rgba(40, 40, 40, .05);
  --shadow-2: 0 2px 6px rgba(40, 40, 40, .09), 0 12px 32px rgba(40, 40, 40, .11);
  --shadow-3: 0 24px 60px rgba(40, 40, 40, .20);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------- fondations */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--quartz);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--cuivre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:not([class]):hover { color: var(--ink); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--resine-12);
}

hr { border: 0; border-top: 1px solid var(--concrete); margin: 2.5rem 0; }

::selection { background: var(--resine); color: var(--ink); }

/* ------------------------------------------------------------ échelle */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.015em; }
h4 { font-size: 1.075rem; letter-spacing: -.01em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.075rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 62ch;
}

.muted   { color: var(--steel); }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.tnum    { font-variant-numeric: tabular-nums; }

/* Le libellé technique : la brique la plus répétée du système */
.eyebrow {
  font-family: var(--mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.1rem;
}
/* Le bord humide en amorce : c'est lui qui porte le jaune. */
.eyebrow::before {
  content: '';
  width: 1.6rem;
  height: var(--edge);
  background: var(--resine);
  flex-shrink: 0;
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .22;
  max-width: 4rem;
}
/* Sur fond sombre, le jaune redevient lisible : le texte peut le prendre.
   Le bandeau photo (.plate) manquait à la liste : son surtitre sortait en
   anthracite sur la photo assombrie. */
.section--dark .eyebrow,
.hero .eyebrow,
.plate .eyebrow,
.footer .eyebrow { color: var(--resine); }
.section--dark .eyebrow::before,
.hero .eyebrow::before,
.plate .eyebrow::before,
.footer .eyebrow::before { background: var(--resine); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { flex: none; }
.eyebrow--steel { color: var(--steel); }
.eyebrow--steel::before { background: var(--steel-2); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.2rem;
  font-family: var(--mono);
  font-size: .8rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------- conteneurs */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--narrow { max-width: var(--narrow); }
.shell--wide   { max-width: 1480px; }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark {
  background: var(--ink);
  color: var(--concrete);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: var(--steel-2); }
.section--concrete { background: var(--concrete); }
.section--white { background: var(--white); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------- signature : reflet spéculaire
   Un sol en résine se reconnaît à la façon dont la lumière glisse dessus.
   C'est le seul effet appuyé du site : réservé aux surfaces sombres. */
.gloss { position: relative; overflow: hidden; isolation: isolate; }
.gloss::after {
  content: '';
  position: absolute;
  inset: -60% -10%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(255, 255, 255, .045) 45%,
    rgba(255, 255, 255, .16) 50%,
    rgba(255, 255, 255, .045) 55%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: sweep 9s var(--ease) infinite;
}
@keyframes sweep {
  0%, 62%  { transform: translateX(-120%); }
  100%     { transform: translateX(120%); }
}

/* ------------------------------------------------------------ boutons */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-family: var(--display);
  font-size: .845rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .16s var(--ease), background .18s, border-color .18s, color .18s;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .55s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--resine); --btn-fg: var(--ink); border-color: var(--resine); }
.btn--primary:hover { --btn-bg: var(--resine-ink); border-color: var(--resine-ink); }
/* Le voile de survol est clair : sur du jaune il faut l'assombrir. */
.btn--primary::after {
  background: linear-gradient(100deg, transparent 40%, rgba(40,40,40,.16) 50%, transparent 60%);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.35);
}
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ink); border-color: #fff; }

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--steel);
  border-color: transparent;
  padding-inline: .4rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--body);
  font-size: .9rem;
}
.btn--quiet:hover { --btn-fg: var(--ink); transform: none; }

.btn--sm  { padding: .58rem 1rem; font-size: .74rem; }
.btn--lg  { padding: 1.12rem 2.1rem; font-size: .9rem; }
.btn--full { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .42;
  pointer-events: none;
}
.btn--danger { --btn-bg: transparent; --btn-fg: var(--err); border-color: rgba(194,50,31,.4); }
.btn--danger:hover { --btn-bg: var(--err); --btn-fg: #fff; border-color: var(--err); }

/* ------------------------------------------------------------ en-tête */
.topbar {
  background: var(--ink);
  color: var(--steel-2);
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .04em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 38px;
  padding-block: .4rem;
}
.topbar a:hover { color: #fff; }
.topbar__list { display: flex; gap: 1.5rem; align-items: center; }
.topbar__usp { display: flex; gap: 1.5rem; }
.topbar__usp span { display: flex; align-items: center; gap: .45rem; }
.topbar__usp span::before {
  content: '';
  width: 10px; height: 2px;
  background: var(--resine);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 242, 238, .93);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--concrete);
  transition: box-shadow .2s;
}
.masthead.is-stuck { box-shadow: var(--shadow-1); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.brand__mark { height: 38px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.025em;
}
.brand__tag {
  font-family: var(--mono);
  font-size: .585rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: .28rem;
}

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__link {
  padding: .6rem .85rem;
  font-size: .935rem;
  font-weight: 500;
  border-radius: var(--radius);
  position: relative;
  transition: color .16s;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .85rem; right: .85rem; bottom: .3rem;
  height: var(--edge);
  background: var(--resine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current]::after { transform: scaleX(1); }

/* Méga-menu boutique */
.nav__item { position: relative; }
.megamenu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(920px, 92vw);
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
  z-index: 70;
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.megamenu__col > a {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  display: block;
  padding-bottom: .55rem;
  margin-bottom: .55rem;
  border-bottom: 1px solid var(--concrete);
}
.megamenu__col > a:hover { color: var(--cuivre); }
.megamenu__sub { list-style: none; margin: 0; padding: 0; }
.megamenu__sub a {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .3rem 0;
  font-size: .89rem;
  color: var(--ink-3);
}
.megamenu__sub a:hover { color: var(--cuivre); }
.megamenu__sub span { font-family: var(--mono); font-size: .72rem; color: var(--steel-2); }

.tools { display: flex; align-items: center; gap: .35rem; }
.tool {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  position: relative;
  transition: background .16s, border-color .16s;
}
.tool:hover { background: var(--concrete); }
.tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tool__badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  background: var(--resine);
  color: var(--ink);
  border-radius: 9px;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  line-height: 1;
}
.tool__badge[hidden] { display: none; }

.burger { display: none; }

/* --------------------------------------------- menu principal sur une ligne
   Sept intitulés, dont deux longs (« Formations vidéo », « Nos résines »),
   passaient sur deux lignes dès que l'écran rétrécissait. Le menu tient
   désormais en six onglets courts, et aucun intitulé n'a le droit de se
   couper : en dessous de la largeur utile, c'est le menu mobile qui prend
   le relais plutôt qu'un menu tassé. */
.nav__link { white-space: nowrap; }

.nav__link--parent { display: inline-flex; align-items: center; gap: .3rem; }
.nav__caret {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .65;
  transition: transform .2s var(--ease), opacity .2s;
}
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); opacity: 1; }

/* Sous-menu simple : Formations. Même panneau clair que le méga-menu de la
   boutique, en plus étroit. Les liens portent une classe : sans elle, ils
   tomberaient dans « .masthead a:not([class]) » et passeraient en blanc
   sur le fond blanc du panneau. */
.submenu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  display: grid;
  gap: .1rem;
  padding: .45rem;
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
  z-index: 70;
}
/* Pont invisible au-dessus du panneau : la souris traverse l'espace entre
   l'onglet et le sous-menu sans que celui-ci se referme. */
.submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: .6rem;
}
.nav__item:hover .submenu,
.nav__item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu__link {
  display: block;
  padding: .62rem .85rem;
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.submenu__link:hover,
.submenu__link:focus-visible { background: var(--quartz); color: var(--ink); }
.submenu__link[aria-current] { color: var(--ink); box-shadow: inset var(--edge) 0 0 var(--resine); }

/* Entre 1080 et 1200 px, les onglets se resserrent au lieu de déborder. */
@media (max-width: 1200px) {
  .nav { gap: 0; }
  .nav__link { padding-inline: .62rem; }
  .nav__link::after { left: .62rem; right: .62rem; }
}
/* En dessous, le menu complet ne tient plus sur une ligne à côté du logo :
   place au menu mobile. Le reste de la mise en page garde son seuil à 940. */
@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
}

/* Recherche déroulante */
.searchbar {
  display: none;
  border-bottom: 1px solid var(--concrete);
  background: var(--white);
  padding-block: 1.1rem;
}
.searchbar.is-open { display: block; }
.searchbar form { display: flex; gap: .6rem; }
.searchbar input {
  flex: 1;
  padding: .85rem 1rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--quartz);
}
.searchbar input:focus { border-color: var(--ink); outline: none; }

/* Menu mobile */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  background: var(--white);
  z-index: 120;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  overflow-y: auto;
  padding: 1.5rem var(--gut) 3rem;
  box-shadow: var(--shadow-3);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.drawer__group { border-top: 1px solid var(--concrete); padding-block: .9rem; }
.drawer__group > a { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.drawer__sub { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--concrete); }
.drawer__sub a { display: block; padding: .32rem 0; font-size: .92rem; color: var(--ink-3); }
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 26, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s, visibility .28s;
  z-index: 110;
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------- alertes */
.flashes { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: grid; gap: .6rem; max-width: 380px; }
.flash {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1.05rem;
  background: var(--white);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  font-size: .92rem;
  animation: flash-in .3s var(--ease);
}
@keyframes flash-in { from { opacity: 0; transform: translateX(12px); } }
.flash--success { border-left-color: var(--ok); }
.flash--error   { border-left-color: var(--err); }
.flash--info    { border-left-color: var(--cuivre); }
.flash button { background: none; border: 0; cursor: pointer; color: var(--steel); margin-left: auto; }

.notice {
  padding: 1rem 1.15rem;
  border: 1px solid var(--concrete);
  border-left: var(--edge) solid var(--resine);
  border-radius: var(--radius);
  background: var(--white);
  font-size: .93rem;
  margin-bottom: 1.5rem;
}
.notice--warn { border-left-color: var(--warn); background: #FBF6E6; }
.notice--err  { border-left-color: var(--err); background: #FBF1EF; }
.notice--ok   { border-left-color: var(--ok); background: #EFF7F3; }
.notice strong { display: block; margin-bottom: .2rem; }

/* --------------------------------------------------------------- héros */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(4.5rem, 12vw, 9rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(254, 210, 0, .10), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(0, 176, 192, .10), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
}
.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.hero h1 em {
  font-style: normal;
  color: var(--resine);
  position: relative;
}
.hero__lead { color: var(--steel-2); font-size: clamp(1.05rem, 1.9vw, 1.24rem); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

/* La carte-échantillon : un carré de résine avec sa fiche technique */
.swatch {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--ink-2), var(--ink-3));
  padding: 1.6rem;
}
.swatch__chip {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  margin-bottom: 1.3rem;
  background:
    radial-gradient(circle at 26% 24%, rgba(255,255,255,.26), transparent 42%),
    radial-gradient(circle at 74% 70%, rgba(0,176,192,.30), transparent 46%),
    linear-gradient(135deg, #3D3D3D, #2C2C2C 62%, #1C1C1C);
  position: relative;
  overflow: hidden;
}
.swatch__chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(0,176,192,.5) 1.2px, transparent 2px),
    radial-gradient(circle, rgba(254,210,0,.55) .9px, transparent 1.5px);
  background-size: 34px 34px, 47px 47px, 61px 61px;
  background-position: 0 0, 14px 22px, 31px 9px;
  opacity: .75;
}
.spec-list { display: grid; gap: 0; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .58rem 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-family: var(--mono);
  font-size: .765rem;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--steel-2); letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }
.spec-row dd { margin: 0; color: #fff; font-weight: 500; text-align: right; }

/* Variante claire de la fiche technique */
.spec-list--light .spec-row { border-bottom-color: var(--concrete); }
.spec-list--light .spec-row dt { color: var(--steel); }
.spec-list--light .spec-row dd { color: var(--ink); }

/* Bandeau de repères */
.marks {
  border-block: 1px solid var(--concrete);
  background: var(--white);
}
.marks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.mark {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--concrete);
}
.mark:last-child { border-right: 0; }
.mark__value {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: .2rem;
}
.mark__value sup { font-size: .45em; color: var(--steel); top: -.7em; }
.mark__label {
  font-family: var(--mono);
  font-size: .705rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: .55rem;
}

/* --------------------------------------------------------- grilles */
.grid { --grid-gap: 1.5rem; display: grid; gap: var(--grid-gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* « grid--3 » veut dire trois colonnes au plus. Avec un simple minimum de
   275 px, auto-fill ouvrait une quatrième colonne vide dès que la ligne
   dépassait 1172 px : trois cartes n'occupaient alors que les trois quarts
   de la largeur. Chaque colonne vaut donc au moins un tiers de la ligne
   (moins 1 px, pour qu'un arrondi de sous-pixel ne fasse pas retomber la
   grille à deux colonnes) et jamais moins de 275 px : sous ce seuil, les
   cartes passent à la ligne comme avant. */
.grid--3 {
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(275px, calc((100% - 2 * var(--grid-gap, 1.5rem)) / 3 - 1px))), 1fr)
  );
}
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid--split { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .grid--split { grid-template-columns: 1fr 1fr; align-items: center; } }

/* --------------------------------------------------- carte de produit */
.card {
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--concrete);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__media--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--concrete), #D8D5CE);
}
/* Le libellé de remplacement seulement. Écrit « .card__media--empty span »,
   le sélecteur pesait plus lourd que « .tag » et attrapait aussi les
   étiquettes posées sur la vignette : texte gris sur fond anthracite ou
   turquoise, presque invisible. */
.card__media--empty span:not(.tag) {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}

.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
/* --steel-2 ne tenait que 2.4:1 sur la carte blanche : --steel tient 5.2:1. */
.card__sku { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--steel); }
.card__title { font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.28; margin: 0; }

/* Le lien d'un titre de carte n'a pas de classe : il tombait donc dans la
   règle générale « a:not([class]) » et sortait en turquoise souligné. Dans
   une grille, un titre se lit comme du texte ; l'image et le titre mènent
   tous deux à la fiche, la fonction de lien n'a pas besoin d'être criée.
   Noir au repos, turquoise souligné au survol et au focus clavier. */
.card__title a:not([class]) {
  color: var(--ink);
  text-decoration: none;
}
.card__title a:not([class]):hover,
.card__title a:not([class]):focus-visible {
  color: var(--cuivre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.card__desc { font-size: .88rem; color: var(--steel); line-height: 1.5; margin: 0; }
.card__foot { margin-top: auto; padding-top: .9rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }

.price {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price small { display: block; font-family: var(--mono); font-size: .64rem; font-weight: 400; letter-spacing: .08em; color: var(--steel); text-transform: uppercase; margin-top: .15rem; }
.price__was { font-size: .85rem; font-weight: 400; color: var(--steel); text-decoration: line-through; margin-right: .4rem; }
.price--lg { font-size: clamp(1.9rem, 3.4vw, 2.4rem); }

.tags { position: absolute; top: .7rem; left: .7rem; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; z-index: 2; }
.tag {
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
}
.tag--sale  { background: var(--resine); color: var(--ink); }
.tag--new   { background: var(--cuivre); }
.tag--out   { background: var(--steel); }

.stock { font-family: var(--mono); font-size: .705rem; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .4rem; }
.stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock--in  { color: var(--cuivre); }
.stock--low { color: var(--warn); }
.stock--out { color: var(--err); }

/* ------------------------------------------------------- fil d'Ariane */
.crumbs {
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .05em;
  color: var(--steel);
  padding-block: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .45; }

/* ------------------------------------------------------------ boutique */
.shop-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .shop-layout { grid-template-columns: 258px 1fr; gap: 3rem; } }

.facets { position: sticky; top: 96px; }
.facet { border-top: 1px solid var(--concrete); padding-block: 1.25rem; }
.facet:first-child { border-top: 0; padding-top: 0; }
.facet__title {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .85rem;
}
.facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.facet__list a {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .34rem .5rem;
  margin-inline: -.5rem;
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--ink-3);
}
.facet__list a:hover { background: var(--white); color: var(--ink); }
.facet__list a[aria-current] { background: var(--ink); color: #fff; }
.facet__list a[aria-current] em { color: rgba(255,255,255,.6); }
.facet__list em { font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--steel-2); }
.facet__list ul { list-style: none; margin: .1rem 0 .35rem; padding-left: .8rem; border-left: 1px solid var(--concrete); }

.range { display: flex; gap: .5rem; align-items: center; }
.range input { width: 100%; }

.shop-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--concrete);
}
.shop-bar__count { font-family: var(--mono); font-size: .765rem; color: var(--steel); }
.shop-bar__count strong { color: var(--ink); }
.shop-bar select {
  padding: .55rem 2rem .55rem .8rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B6B' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") no-repeat right .75rem center;
  appearance: none;
  font-size: .875rem;
  cursor: pointer;
}
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid var(--concrete);
  border-radius: 20px;
  background: var(--white);
  font-size: .8rem;
}
.chip a { color: var(--steel); font-size: 1rem; line-height: 1; }
.chip a:hover { color: var(--err); }

.pagination { display: flex; gap: .35rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding-inline: .7rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--white);
  font-family: var(--mono);
  font-size: .8rem;
}
.pagination a:hover { border-color: var(--ink); }
.pagination [aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .is-gap { border: 0; background: none; }

.empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  border: 1px dashed var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.empty h3 { margin-bottom: .5rem; }
.empty p { color: var(--steel); max-width: 40ch; margin-inline: auto; }

/* --------------------------------------------------- fiche de produit */
.product { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .product { grid-template-columns: 1.05fr 1fr; } }

.product__gallery { position: sticky; top: 96px; display: grid; gap: .7rem; }
.product__main {
  aspect-ratio: 1;
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.product__main img { width: 100%; height: 100%; object-fit: cover; }
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .55rem; }
.product__thumbs button {
  aspect-ratio: 1;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  cursor: pointer;
  padding: 0;
}
.product__thumbs button[aria-current] { border-color: var(--ink); border-width: 2px; }
.product__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product__brand { font-family: var(--mono); font-weight: 700; font-size: .715rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre); }
.product__title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: .5rem 0 .8rem; }
.product__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; font-family: var(--mono); font-size: .74rem; color: var(--steel); margin-bottom: 1.5rem; }

.buybox {
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.4rem;
  margin-block: 1.75rem;
}
.buybox__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.buybox__form { display: flex; gap: .7rem; flex-wrap: wrap; }
.buybox__form .btn { flex: 1; min-width: 180px; }

.qty { display: inline-flex; border: 1px solid var(--concrete); border-radius: var(--radius); overflow: hidden; }
.qty button {
  width: 42px;
  border: 0;
  background: var(--white);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--steel);
  transition: background .15s;
}
.qty button:hover { background: var(--concrete); color: var(--ink); }
.qty input {
  width: 54px;
  border: 0;
  border-inline: 1px solid var(--concrete);
  text-align: center;
  font-family: var(--mono);
  font-size: .92rem;
  padding-block: .78rem;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.assurances { display: grid; gap: .7rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--concrete); }
.assurance { display: flex; gap: .65rem; font-size: .85rem; color: var(--ink-3); align-items: flex-start; }
.assurance svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: .15rem; stroke: var(--ink); fill: none; stroke-width: 1.7; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: 1.15em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius-lg); margin-block: 1.5rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: .3rem 0 .3rem 1.4rem;
  border-left: var(--edge) solid var(--resine);
  font-size: 1.08rem;
  color: var(--ink-3);
}
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .92rem; }
.prose th, .prose td { padding: .7rem .85rem; border-bottom: 1px solid var(--concrete); text-align: left; }
.prose th { font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--steel); }

/* Onglets */
.tabs { border-bottom: 1px solid var(--concrete); display: flex; gap: .25rem; margin-bottom: 2rem; overflow-x: auto; }
.tabs button {
  padding: .85rem 1.1rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .16s, border-color .16s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--resine); border-bottom-width: var(--edge); margin-bottom: -1px; }
.tabpanel[hidden] { display: none; }

/* ------------------------------------ signature : calculateur de surface
   Le vrai problème du client n'est pas « combien coûte un kit » mais
   « combien de kits pour mon garage ». La page répond à sa question. */
.calc {
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--concrete);
  padding: 1.5rem;
  margin-block: 1.75rem;
}
.calc__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.calc__head h3 { color: #fff; font-size: 1.02rem; margin: 0; }
.calc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc__field label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-2);
  margin-bottom: .4rem;
}
.calc__field input, .calc__field select {
  width: 100%;
  padding: .72rem .8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--mono);
  font-size: .92rem;
}
.calc__field input:focus, .calc__field select:focus { border-color: var(--resine); outline: none; }
.calc__field select option { color: var(--ink); }
.calc__out {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.calc__result { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.1; }
.calc__result span { color: var(--resine); }
.calc__note { font-family: var(--mono); font-size: .68rem; color: var(--steel-2); margin-top: .35rem; }

/* --------------------------------------------------------------- panier */
.cart-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .cart-layout { grid-template-columns: 1fr 366px; gap: 2.5rem; } }

.line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--concrete);
  align-items: start;
}
.line:first-child { border-top: 1px solid var(--concrete); }
.line__media {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--concrete);
  position: relative;
}
.line__media img { width: 100%; height: 100%; object-fit: cover; }
.line__type {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .18rem;
}
.line__type--training { background: var(--cuivre); }
.line__type--course { background: var(--resine); color: var(--ink); }
.line__body { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; align-items: flex-start; }
.line__main { flex: 1; min-width: 190px; }
.line__title { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 0 0 .28rem; }
.line__meta { font-family: var(--mono); font-size: .715rem; color: var(--steel); }
.line__opts { font-size: .82rem; color: var(--steel); margin-top: .3rem; }
.line__actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.line__price { font-family: var(--display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 96px; }
.line__remove { background: none; border: 0; color: var(--steel); cursor: pointer; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.line__remove:hover { color: var(--err); }

.summary {
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.5rem;
  position: sticky;
  top: 96px;
}
.summary h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .93rem;
}
.summary__row--total {
  border-top: 1px solid var(--ink);
  margin-top: .7rem;
  padding-top: .9rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  align-items: baseline;
}
.summary__row--discount { color: var(--ok); }
.summary__row span:last-child { font-variant-numeric: tabular-nums; }
.summary__vat { font-family: var(--mono); font-size: .68rem; color: var(--steel); margin-top: .5rem; }
.summary .btn { margin-top: 1.2rem; }

.progress-free { margin-top: 1.1rem; }
.progress-free__bar { height: 4px; background: var(--concrete); border-radius: 2px; overflow: hidden; }
.progress-free__fill { height: 100%; background: var(--ink); transition: width .4s var(--ease); }
.progress-free p { font-family: var(--mono); font-size: .705rem; color: var(--steel); margin: .5rem 0 0; }

.promo { display: flex; gap: .5rem; margin-top: 1.1rem; }
.promo input { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ formulaires */
.field { margin-bottom: 1.1rem; }
.field > label, .label {
  display: block;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: .42rem;
}
.field .req { color: var(--err); }

.input, .field input[type='text'], .field input[type='email'], .field input[type='tel'],
.field input[type='password'], .field input[type='number'], .field input[type='date'],
.field input[type='time'], .field input[type='url'], .field select, .field textarea {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--white);
  font-size: .96rem;
  transition: border-color .16s, box-shadow .16s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 40, 40, .07);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B6B' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--err); }
.field__error { color: var(--err); font-size: .82rem; margin-top: .35rem; display: block; }
.field__hint { color: var(--steel); font-size: .82rem; margin-top: .35rem; display: block; }

.row { display: grid; gap: 1.1rem; }
.row--2 { grid-template-columns: 1fr 1fr; }
.row--3 { grid-template-columns: repeat(3, 1fr); }
.row--npa { grid-template-columns: 130px 1fr; }
@media (max-width: 620px) { .row--2, .row--3, .row--npa { grid-template-columns: 1fr; } }

.check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .92rem; margin-bottom: .7rem; }
.check input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--ink); flex-shrink: 0; cursor: pointer; }
.check span { line-height: 1.5; }

/* Choix radio en carte : livraison, paiement, sessions */
.choices { display: grid; gap: .7rem; }
.choice {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}
.choice:hover { border-color: var(--steel); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input { margin-top: .2rem; accent-color: var(--resine); width: 17px; height: 17px; flex-shrink: 0; }
.choice__body { flex: 1; }
.choice__title { font-weight: 600; font-size: .96rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.choice__price { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice__desc { font-size: .855rem; color: var(--steel); margin-top: .25rem; line-height: 1.5; }
.choice__lead { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--steel-2); margin-top: .35rem; }
.choice__logo { height: 22px; width: auto; }

/* ----------------------------------------------------------- commande */
.checkout-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .checkout-layout { grid-template-columns: 1fr 380px; gap: 3rem; } }

.step { margin-bottom: 2.5rem; }
.step__head { display: flex; gap: .85rem; align-items: center; margin-bottom: 1.25rem; }
.step__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  flex-shrink: 0;
}
.step__head h2 { font-size: 1.22rem; margin: 0; }

.recap { display: grid; gap: .85rem; padding-bottom: 1.1rem; margin-bottom: .6rem; border-bottom: 1px solid var(--concrete); }
.recap__line { display: flex; gap: .75rem; font-size: .875rem; align-items: flex-start; }
.recap__qty {
  font-family: var(--mono);
  font-size: .74rem;
  min-width: 26px;
  height: 26px;
  border-radius: var(--radius);
  background: var(--concrete);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.recap__name { flex: 1; line-height: 1.4; }
.recap__name small { display: block; color: var(--steel); font-size: .78rem; }
.recap__price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------- virement / QR */
.qr-panel {
  display: grid;
  gap: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
}
@media (min-width: 760px) { .qr-panel { grid-template-columns: 230px 1fr; } }
.qr-panel__code {
  aspect-ratio: 1;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: .8rem;
  background: #fff;
}
.qr-panel__code img, .qr-panel__code svg { width: 100%; height: auto; }
.qr-fallback { text-align: center; padding: 1.5rem 1rem; }
.qr-fallback__cross {
  width: 46px; height: 46px;
  background: var(--ink);
  margin: 0 auto 1rem;
  position: relative;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--ink);
}
.qr-fallback__cross::before, .qr-fallback__cross::after {
  content: '';
  position: absolute;
  background: #fff;
}
.qr-fallback__cross::before { inset: 45% 22%; }
.qr-fallback__cross::after  { inset: 22% 45%; }
.qr-fallback p { font-family: var(--mono); font-size: .72rem; color: var(--steel); }

.pay-data { display: grid; gap: 0; }
.pay-data__row { display: grid; grid-template-columns: 148px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--concrete); align-items: baseline; }
.pay-data__row:last-child { border-bottom: 0; }
.pay-data__label { font-family: var(--mono); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.pay-data__value { font-family: var(--mono); font-size: .95rem; font-weight: 500; word-break: break-word; }
.pay-data__value strong { font-size: 1.1rem; }
@media (max-width: 560px) { .pay-data__row { grid-template-columns: 1fr; gap: .2rem; } }

.copy-btn {
  background: none;
  border: 1px solid var(--concrete);
  border-radius: 2px;
  padding: .12rem .4rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
  cursor: pointer;
  margin-left: .5rem;
  vertical-align: middle;
}
.copy-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ------------------------------------------------------------ formations */
.session-card {
  display: grid;
  gap: 1.1rem;
  padding: 1.35rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color .18s, box-shadow .18s;
}
.session-card:hover { border-color: var(--ink); box-shadow: var(--shadow-1); }
@media (min-width: 700px) { .session-card { grid-template-columns: 92px 1fr auto; align-items: center; } }

.datebox {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  text-align: center;
  padding: .6rem .4rem;
  background: var(--ink);
  color: #fff;
  width: 92px;
}
.datebox__day { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.datebox__month { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; margin-top: .25rem; color: var(--steel-2); }
/* L'année était en --steel sur l'anthracite : 2.8:1. --steel-2 tient 6:1. */
.datebox__year { font-family: var(--mono); font-size: .6rem; color: var(--steel-2); margin-top: .1rem; }
.datebox--range { background: linear-gradient(160deg, var(--ink), var(--ink-3)); }

/* Une carte blanche posée dans une section sombre (les prochaines sessions de
   l'accueil, ou l'état vide qui les remplace) héritait du texte clair de la
   section : titre de la formation en blanc sur blanc, prix en gris pâle.
   Elle reprend ici les couleurs d'une surface claire, liens compris, et
   s'affiche comme dans l'agenda de la page Formations. */
.section--dark .session-card,
.section--dark .empty { color: var(--ink); }
.section--dark .session-card :is(h2, h3, h4),
.section--dark .empty :is(h2, h3, h4) { color: var(--ink); }
.section--dark .session-card a:not([class]) {
  color: var(--cuivre);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.section--dark .session-card a:not([class]):hover { color: var(--ink); }

.session-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-family: var(--mono); font-size: .72rem; color: var(--steel); margin-top: .4rem; }
.session-card__cta { display: grid; gap: .4rem; justify-items: end; text-align: right; }

.seats { font-family: var(--mono); font-size: .705rem; letter-spacing: .04em; }
.seats--few { color: var(--warn); }
.seats--none { color: var(--err); }
.seats--ok { color: var(--ok); }

.program { counter-reset: day; display: grid; gap: 0; }
.program__day {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--concrete);
}
.program__day::before {
  counter-increment: day;
  content: 'J' counter(day);
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--resine);
  letter-spacing: -.02em;
}
.program__day h4 { margin-bottom: .4rem; }
.program__day p { color: var(--steel); font-size: .93rem; margin: 0; }

.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.includes li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; }
.includes li::before {
  content: '';
  width: 15px; height: 15px;
  flex-shrink: 0;
  margin-top: .28rem;
  background: var(--resine);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 8%, 38% 71%);
}

/* --------------------------------------------------- formations vidéo */
.course-hero { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .course-hero { grid-template-columns: 1.1fr .9fr; } }

.player-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.player-frame iframe, .player-frame video { width: 100%; height: 100%; border: 0; display: block; }
.player-frame--poster { display: grid; place-items: center; background: linear-gradient(140deg, var(--ink-2), var(--ink)); }
.player-frame__play {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--resine);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s var(--ease);
}
.player-frame__play:hover { transform: scale(1.08); }
.player-frame__play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }

.curriculum { border: 1px solid var(--concrete); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.curriculum__module { border-bottom: 1px solid var(--concrete); }
.curriculum__module:last-child { border-bottom: 0; }
.curriculum__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--quartz);
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-weight: 600;
  font-size: .96rem;
}
.curriculum__head:hover { background: var(--concrete); }
.curriculum__count { font-family: var(--mono); font-size: .7rem; color: var(--steel); font-weight: 400; }
.curriculum__list { list-style: none; margin: 0; padding: 0; }
.curriculum__list li { border-top: 1px solid var(--concrete); }
.curriculum__lesson {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .82rem 1.25rem;
  font-size: .91rem;
  width: 100%;
}
a.curriculum__lesson:hover { background: var(--quartz); }
.curriculum__lesson[aria-current] { background: var(--resine-05); box-shadow: inset 3px 0 0 var(--resine); }
.curriculum__idx { font-family: var(--mono); font-size: .72rem; color: var(--steel-2); min-width: 1.6rem; }
.curriculum__name { flex: 1; }
.curriculum__dur { font-family: var(--mono); font-size: .72rem; color: var(--steel); }
.curriculum__done { width: 16px; height: 16px; flex-shrink: 0; }
.curriculum__done svg { width: 100%; height: 100%; stroke: var(--ok); fill: none; stroke-width: 2.4; }
.lock { width: 13px; height: 13px; stroke: var(--steel-2); fill: none; stroke-width: 1.8; }

/* ---------------------------------------------------------- espace client */
.account-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) { .account-layout { grid-template-columns: 232px 1fr; gap: 3rem; } }

.account-nav { position: sticky; top: 96px; display: grid; gap: .1rem; }
.account-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .68rem .85rem;
  border-radius: var(--radius);
  font-size: .93rem;
  color: var(--ink-3);
}
.account-nav a:hover { background: var(--white); color: var(--ink); }
.account-nav a[aria-current] { background: var(--ink); color: #fff; }
.account-nav svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.account-nav hr { margin: .7rem 0; }

.panel {
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.panel__head h2, .panel__head h3 { margin: 0; font-size: 1.08rem; }

.table-wrap { overflow-x: auto; margin-inline: -1.5rem; padding-inline: 1.5rem; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--concrete);
  white-space: nowrap;
  font-weight: 500;
}
.table td { padding: .78rem .7rem; border-bottom: 1px solid var(--concrete); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--quartz); }
.table__num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table__right { text-align: right; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--concrete);
  color: var(--ink-3);
  white-space: nowrap;
}
.badge--ok      { background: #E4F2EA; color: #1F6547; }
.badge--warn    { background: #FBF0DE; color: #8A5810; }
.badge--err     { background: #FBE7E4; color: #9E2718; }
.badge--info    { background: var(--resine-12); color: var(--resine-ink); }
.badge--neutral { background: var(--concrete); color: var(--steel); }

.progress { height: 5px; background: var(--concrete); border-radius: 3px; overflow: hidden; }
.progress__fill { height: 100%; background: var(--resine); transition: width .4s var(--ease); }

/* Lecteur de formation vidéo */
.player-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .player-layout { grid-template-columns: 1fr 340px; } }

/* --------------------------------------------------------- réalisations */
.work {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
  display: block;
}
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.work:hover img { transform: scale(1.05); opacity: .68; }
.work__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.15rem;
  background: linear-gradient(transparent, rgba(20,23,26,.88));
  color: #fff;
}
.work__cap h3 { font-size: 1.05rem; margin: 0 0 .2rem; color: #fff; }
.work__cap p { font-family: var(--mono); font-size: .705rem; color: var(--steel-2); margin: 0; letter-spacing: .04em; }

/* ------------------------------------------------------------ actualités */
.post-card { display: grid; gap: 1rem; }
.post-card__media { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--concrete); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta { font-family: var(--mono); font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: var(--steel); display: flex; gap: .8rem; }
.post-card__meta span:first-child { color: var(--resine); }
.post-card h3 { font-size: 1.15rem; margin: .1rem 0 .35rem; }
.post-card p { font-size: .9rem; color: var(--steel); margin: 0; }

/* ---------------------------------------------------------- galerie photo
   Grille de trois colonnes aux cases carrées. Les vignettes sont livrées
   déjà carrées (800 px) : object-fit ne recadre donc rien pour elles, il ne
   sert qu'aux photos ajoutées plus tard depuis l'administration, qui
   arrivent dans leur format d'origine. */
.photo-grid__count {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1rem;
}

/* Trois colonnes à toutes les largeurs, comme sur Instagram. Seul
   l'espacement se resserre sur téléphone, pour garder des carrés lisibles. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.3rem, 1.3vw, 1rem);
}

.photo-grid__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--concrete);
  cursor: zoom-in;
}
.photo-grid__item picture,
.photo-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-grid__item img {
  object-fit: cover;
  transition: transform .6s var(--ease), opacity .3s var(--ease);
}
.photo-grid__item:hover img,
.photo-grid__item:focus-visible img { transform: scale(1.05); opacity: .8; }
.photo-grid__item:focus-visible { outline: 3px solid var(--resine); outline-offset: 3px; }

.photo-grid__zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--resine);
  color: var(--ink);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.photo-grid__zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.photo-grid__item:hover .photo-grid__zoom,
.photo-grid__item:focus-visible .photo-grid__zoom { opacity: 1; transform: none; }

@media (max-width: 620px) {
  /* Coins presque droits et pas de loupe : sur des carrés de 110 px, un
     arrondi de 6 px et une pastille de 34 px mangeaient la photo. */
  .photo-grid__item { border-radius: var(--radius); }
  .photo-grid__zoom { display: none; }
}

.photo-grid__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--concrete);
  display: grid;
  gap: 1rem;
}
.photo-grid__foot p { margin: 0; color: var(--steel); max-width: 46ch; }
@media (min-width: 780px) {
  .photo-grid__foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* ------------------------------------------------------- l'agrandissement */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: clamp(.75rem, 2vw, 1.5rem);
  /* Le fond reprend le noir de la plaque du logo, pas un gris neutre. */
  background: rgba(10, 10, 10, .94);
  /* Les encoches et la barre de gestes des téléphones mangeaient les
     boutons : on repousse le contenu à l'intérieur de la zone sûre. */
  padding-top: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(.75rem, 2vw, 1.5rem), env(safe-area-inset-bottom, 0px));
}
.lightbox[hidden] { display: none; }

.lightbox__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lightbox__rank {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-2);
}
.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.lightbox__close svg,
.lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--resine); border-color: var(--resine); color: var(--ink); }
.lightbox__nav[disabled] { opacity: .3; cursor: default; }
.lightbox__nav[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, .22); color: #fff; }

.lightbox__stage {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: .75rem;
  justify-items: center;
  align-content: center;
}
.lightbox__stage img {
  max-width: 100%;
  /* Hauteur bornée pour que la légende reste visible sous la photo. */
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--ink-2);
}
.lightbox__stage figcaption {
  font-size: .88rem;
  color: var(--steel-2);
  text-align: center;
  max-width: 60ch;
}

@media (max-width: 620px) {
  /* Les flèches passent sous la photo : sur les côtés, elles recouvraient
     l'image au lieu de l'encadrer. */
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; }
  .lightbox__stage { grid-column: 1 / -1; }
  .lightbox__stage img { max-height: calc(100vh - 14rem); max-height: calc(100dvh - 14rem); }
  .lightbox__nav--prev { justify-self: start; }
  .lightbox__nav--next { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-grid__item img,
  .photo-grid__zoom,
  .nav__caret,
  .submenu { transition: none; }
  .photo-grid__item:hover img { transform: none; }
}

/* ------------------------------------------------------- authentification */
.auth-card {
  max-width: 460px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-1);
}
.auth-card h1 { font-size: 1.75rem; margin-bottom: .4rem; }
.auth-card > p { color: var(--steel); margin-bottom: 1.75rem; }
.auth-alt { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--concrete); font-size: .92rem; color: var(--steel); }

/* --------------------------------------------------------- partenaire XPS */
.partner {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  border: 1px solid var(--concrete);
  border-radius: var(--radius);
  background: var(--white);
}
.partner__label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.3;
  max-width: 8rem;
}
.partner__logo { height: 34px; width: auto; }
.partner--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.partner--dark .partner__label { color: var(--steel-2); }

/* ------------------------------------------------------------- pied de page */
.footer { background: var(--ink); color: var(--steel-2); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.footer h4 {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 3rem; } }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { font-size: .91rem; }
.footer a:hover { color: #fff; }
.footer__brand .brand__name { color: #fff; }
.footer__blurb { font-size: .89rem; line-height: 1.6; margin-block: 1.1rem; max-width: 34ch; }

.newsletter { display: flex; gap: .5rem; margin-top: .9rem; }
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: .72rem .85rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  color: #fff;
  font-size: .9rem;
}
.newsletter input::placeholder { color: var(--steel); }
.newsletter input:focus { border-color: var(--resine); outline: none; }

.footer__bottom {
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .04em;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.paylogos { display: flex; gap: .55rem; align-items: center; }
.paylogos span {
  padding: .28rem .5rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  font-size: .62rem;
  letter-spacing: .08em;
}

/* -------------------------------------------------- invite d'installation */
.pwa-prompt {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
  max-width: 480px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--concrete);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 1.15rem 1.25rem;
  display: none;
  gap: 1rem;
  align-items: flex-start;
  animation: pwa-in .35s var(--ease);
}
.pwa-prompt.is-open { display: flex; }
@keyframes pwa-in { from { opacity: 0; transform: translateY(14px); } }
.pwa-prompt__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pwa-prompt__icon img { width: 26px; }
.pwa-prompt__body { flex: 1; }
.pwa-prompt__body strong { display: block; font-family: var(--display); font-size: .98rem; margin-bottom: .18rem; }
.pwa-prompt__body p { font-size: .85rem; color: var(--steel); margin: 0 0 .8rem; line-height: 1.45; }
.pwa-prompt__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pwa-prompt__close { position: absolute; top: .5rem; right: .5rem; background: none; border: 0; color: var(--steel); cursor: pointer; padding: .3rem; }
.pwa-steps { font-size: .85rem; color: var(--ink-3); display: grid; gap: .45rem; margin-top: .5rem; }
.pwa-steps li { display: flex; gap: .5rem; align-items: center; }
.pwa-steps svg { width: 16px; height: 16px; stroke: var(--resine); fill: none; stroke-width: 1.7; flex-shrink: 0; }

/* ------------------------------------------------------------ utilitaires */
.stack   { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: .5rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .75rem; } .mb-2 { margin-bottom: 1.5rem; } .mb-3 { margin-bottom: 2.5rem; }
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- adaptatif */
@media (max-width: 940px) {
  .nav, .topbar__usp { display: none; }
  .burger { display: grid; }
  .masthead__inner { min-height: 66px; }
  .facets { position: static; }
  .product__gallery, .summary, .account-nav { position: static; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .mark { border-right: 0; border-bottom: 1px solid var(--concrete); padding: 1.5rem 1.25rem; }
  .marks__grid { grid-template-columns: 1fr 1fr; }
  .mark:nth-child(odd) { border-right: 1px solid var(--concrete); }
  .line { grid-template-columns: 72px 1fr; }
  .line__actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .calc__fields { grid-template-columns: 1fr; }
  .flashes { left: 1rem; right: 1rem; max-width: none; }
}

/* ---------------------------------------------------- confort et impression */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .gloss::after { display: none; }
}

@media print {
  .masthead, .topbar, .footer, .pwa-prompt, .flashes, .btn, .account-nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .panel, .qr-panel { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href]::after { content: ''; }
}


/* =====================================================================
   Identité RS Résina — pièces propres à la charte
   ===================================================================== */

/* ------------------------------------------------- le logo dans le décor
   Le lettrage est fourni en image : on ne le redessine pas, on lui donne
   seulement une hauteur fiable et une zone de respiration. */
.brand__mark {
  height: 31px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand__tag {
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: .38rem;
}
.footer .brand__mark { height: 54px; }
.footer .brand__tag  { color: var(--steel-2); }
@media (max-width: 620px) {
  .brand__mark { height: 26px; }
  .brand__tag  { display: none; }
}

/* --------------------------------------------------- LE BORD HUMIDE
   Le filet jaune que l'applicateur poursuit pendant la coulée.
   Il ne sert qu'à marquer un début : crête d'en-tête, amorce de section,
   arête haute du pied de page. */
.masthead { border-top: var(--edge) solid var(--resine); }
.footer   { border-top: var(--edge) solid var(--resine); }

.edge {
  display: block;
  width: 3.5rem;
  height: var(--edge);
  background: var(--resine);
  margin-bottom: 1.4rem;
}
.edge--center { margin-inline: auto; }

/* ------------------------------------------------------ héros photographié
   La coulée elle-même occupe le fond. Le voile assure que le texte tient
   ses 4,5:1 quel que soit l'endroit clair de l'image. */
.hero--shot { padding-block: clamp(5rem, 13vw, 10rem); }
.hero__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,28,28,.55) 0%, rgba(28,28,28,.74) 55%, rgba(28,28,28,.92) 100%),
    linear-gradient(90deg, rgba(28,28,28,.86) 0%, rgba(28,28,28,.42) 62%, transparent 100%);
}
.hero--shot .hero::before { display: none; }

/* --------------------------------------------------------- carte-échantillon
   L'échantillon n'est plus un dégradé simulé : c'est une vraie photo de sol.
   La marge est remise à zéro : sans cela, la marge par défaut de <figure>
   (40 px de chaque côté) rentrait la photo par rapport à la fiche technique. */
.swatch__shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  margin: 0 0 1.3rem;
  overflow: hidden;
  position: relative;
  background: var(--ink-deep);
}
.swatch__shot img { width: 100%; height: 100%; object-fit: cover; }
.swatch__shot figcaption {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--resine);
  color: var(--ink);
  font-family: var(--body);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .6rem;
}

/* ----------------------------------------------------------- bande d'images
   Deux ou trois photos plein cadre qui séparent les grands blocs de texte. */
.band {
  display: grid;
  gap: 2px;
  background: var(--ink);
}
@media (min-width: 720px) { .band--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .band--2 { grid-template-columns: repeat(2, 1fr); } }
.band figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.band img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.band figure:hover img { transform: scale(1.04); }
.band figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.15rem .95rem;
  background: linear-gradient(transparent, rgba(28,28,28,.88));
  color: #fff;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.band figcaption::before {
  content: '';
  display: block;
  width: 1.6rem;
  height: var(--edge);
  background: var(--resine);
  margin-bottom: .55rem;
}

/* -------------------------------------------------------- bandeau plein cadre
   Une image traversante, très assombrie, qui porte une phrase courte. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink-deep);
  color: #fff;
  isolation: isolate;
}
.plate__shot { position: absolute; inset: 0; z-index: 0; }
.plate__shot img { width: 100%; height: 100%; object-fit: cover; }
.plate__shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28,28,28,.94) 0%, rgba(28,28,28,.78) 55%, rgba(28,28,28,.55) 100%);
}
.plate > .shell { position: relative; z-index: 2; }
.plate h2 { color: #fff; }
.plate .lead { color: #E3E1DD; }

/* --------------------------------------------------- portrait d'applicateur */
.figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--ink-deep);
}
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(28,28,28,.9));
  color: #fff;
  font-size: .84rem;
  line-height: 1.45;
}

/* Le même portrait, en tête de la page Formations. Debout à côté du titre
   sur grand écran ; recadré au carré quand il passe sous le texte (tête,
   raclette et reflet du sol restent dans le cadre), et limité en largeur
   pour ne pas repousser les programmes loin sous la ligne de flottaison. */
.hero__portrait {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 25rem;
}
.hero__portrait picture { display: block; height: 100%; }
.hero__portrait img { height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (min-width: 940px) {
  .hero__portrait {
    aspect-ratio: 4 / 5;
    justify-self: end;
  }
}

/* ------------------------------------------------------- accroche jaune
   Le seul endroit où le jaune couvre une pleine surface. Texte anthracite,
   obligatoirement. */
.strike {
  background: var(--resine);
  color: var(--ink);
}
.strike h2, .strike h3 { color: var(--ink); }
.strike .lead { color: rgba(40, 40, 40, .78); }
.strike .eyebrow { color: var(--ink); }
.strike .eyebrow::before { background: var(--ink); }
.strike .eyebrow::after  { background: var(--ink); opacity: .3; }
.strike .btn--ghost { --btn-fg: var(--ink); border-color: var(--ink); }
.strike .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--resine); }
.strike .spec-row { border-bottom-color: rgba(40, 40, 40, .18); }
.strike .spec-row dt { color: rgba(40, 40, 40, .62); }
.strike .spec-row dd { color: var(--ink); }

/* ------------------------------------------- mention du partenaire XPS
   Discrète : une ligne, jamais un bandeau. Le bouclier reste en couleur,
   son jaune est déjà celui de la charte. */
.partner-line {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.partner-line img { height: 40px; width: auto; }
.partner-line span {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--steel);
  max-width: 15rem;
  line-height: 1.5;
}
.section--dark .partner-line span,
.hero .partner-line span,
.footer .partner-line span { color: var(--steel-2); }

/* ------------------------------------------ corrections de lisibilité tardives
   Raleway est plus étroit qu'Inter Tight : les petites capitales espacées
   ont besoin d'un demi-cran de graisse pour ne pas s'effacer. */
.eyebrow,
.facet__title,
.field > label, .label,
.calc__field label,
.mark__label,
.footer h4,
.tag, .card__sku, .brand__tag,
.post-card__meta,
.prose th { font-weight: 600; }

.tag { font-weight: 700; }

/* Cal Sans n'a qu'un gras : on neutralise toute tentative de faux gras. */
h1, h2, h3, h4,
.brand__name, .card__title, .price, .mark__value,
.calc__result, .summary__row--total, .line__title, .line__price, .work__cap h3 {
  font-synthesis-weight: none;
}

/* Le carnet reprenait l'orange en catégorie : le cyan du logo le remplace. */
.post-card__meta span:first-child { color: var(--cuivre); }

/* Champ de newsletter : le focus jaune sur fond sombre fonctionne. */
.newsletter input:focus { border-color: var(--resine); }


/* =====================================================================
   Identité 2026 — le personnage, le filigrane, la plaque noire
   ---------------------------------------------------------------------
   Le client a fait évoluer sa marque : le lettrage seul est devenu un
   verrou complet, posé sur une plaque noire marbrée, avec l'applicateur
   dessiné et sa raclette. Trois choses en découlent.

   1. Le noir de la plaque (#0A0A0A) devient la vraie couleur sombre de
      la marque. L'anthracite #282828 reste pour les cartes et les
      surfaces intermédiaires.
   2. Le filigrane — la marbrure de résine — se pose à quatre endroits sur
      tout le site, pas un de plus : la bande jaune, le pied de page et
      les deux héros des pages formation, dont le fond n'est pas une photo.
      Répété à chaque section il devient un papier peint et ne veut plus
      rien dire. Teinté du turquoise du rond, sous 15 % d'opacité.
   3. Le jaune ne disparaît pas. Il est déjà dans le logo, sur la lame
      de la raclette (#EDE11F). Il reste le trait, le bord humide, et
      la couleur des produits de la boutique. Rien de plus.
   ===================================================================== */

/* ---------------------------------------------------------- LE FILIGRANE
   Une image blanche sur transparent, utilisée en masque : la couleur
   vient du CSS, donc la même image sert en turquoise sur noir et en
   noir sur jaune. Sous @supports : un navigateur sans masque n'affiche
   simplement rien, ce qui est le comportement correct pour un décor. */
@supports (mask-image: url('')) or (-webkit-mask-image: url('')) {

  /* Le filigrane ne s'applique JAMAIS en masse. Deux surfaces le portent
     d'office parce qu'elles sont uniques — la bande jaune et le pied de
     page. Partout ailleurs il faut le poser à la main, en glissant un
     <span class="fil"> en premier enfant. C'est volontairement pénible :
     un décor qui revient à chaque section cesse d'être un décor. */
  .fil,
  .footer::before,
  .strike::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--lagon);
    opacity: .15;
    -webkit-mask-image: url('../img/filigrane.png');
            mask-image: url('../img/filigrane.png');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
    -webkit-mask-size: cover;
            mask-size: cover;
  }

  /* Les deux surfaces d'office deviennent des cadres. */
  .footer,
  .strike { position: relative; isolation: isolate; }
  .footer > *,
  .strike > * { position: relative; z-index: 1; }

  /* Une section qui accueille un <span class="fil"> doit devenir un cadre
     elle aussi, et tout ce qui suit le span repasse au-dessus. */
  .hero,
  .section--dark { position: relative; isolation: isolate; }
  .fil ~ * { position: relative; z-index: 1; }

  /* La bande de bas de page : le motif y remonte depuis le pied. */
  .footer::before {
    -webkit-mask-position: 50% 100%;
            mask-position: 50% 100%;
    opacity: .13;
  }

  /* Sur le jaune, le filigrane passe en noir : c'est le même geste. */
  .strike::before {
    background-color: var(--ink);
    opacity: .085;
  }

  .hero > .fil       { opacity: .13; }
  .hero--shot > .fil { display: none; }   /* la photo occupe déjà le fond */
}

/* ------------------------------------------------------- LA PLAQUE NOIRE
   En-tête et bandeau supérieur ne font plus qu'un seul bloc noir, comme
   le flanc de la camionnette. Le filet jaune les sépare. */
.topbar  { background: var(--ink-black); }
.masthead {
  background: rgba(10, 10, 10, .94);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.masthead.is-stuck { box-shadow: 0 12px 34px rgba(0, 0, 0, .38); }

.masthead .brand__tag { color: var(--steel-2); }
.nav__link            { color: #EAEAEA; }
.nav__link:hover,
.nav__link[aria-current] { color: #fff; }
.tool:hover           { background: rgba(255, 255, 255, .10); }

/* Les panneaux qui descendent de l'en-tête restent clairs : un catalogue
   se lit en noir sur blanc. Il faut donc leur rendre leur couleur de
   texte, que l'en-tête vient de passer en blanc.

   Attention à la spécificité. Les liens du méga-menu n'ont pas d'attribut
   class, ils tombent donc dans « .masthead a:not([class]) » plus bas, qui
   pèse (0,2,1) et l'emporte sur « .megamenu__sub a » à (0,1,1) : sans les
   règles ci-dessous, tout le panneau s'affiche en blanc sur blanc. On
   repasse donc par .masthead pour reprendre la main, y compris au survol
   où la règle générale ajoute un soulignement dont on ne veut pas ici. */
.megamenu { color: var(--ink); }

.masthead .megamenu a:not([class]) {
  color: var(--ink-3);
  text-decoration: none;
}
.masthead .megamenu__col > a:not([class]) {
  color: var(--ink);
}
.masthead .megamenu a:not([class]):hover,
.masthead .megamenu a:not([class]):focus-visible {
  color: var(--cuivre);
  text-decoration: none;
}

/* Le compteur d'articles était en --steel-2, le gris du logo : 2.4:1 sur
   blanc, donc illisible à 0.72rem. --steel tient 5.2:1. */
.megamenu__sub span { color: var(--steel); }

.searchbar {
  background: rgba(255, 255, 255, .04);
  border-bottom-color: rgba(255, 255, 255, .09);
}
.searchbar input {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.searchbar input::placeholder { color: var(--steel); }
.searchbar input:focus { border-color: var(--resine); }

/* ------------------------------------------------- LES LIENS SUR LE NOIR
   Le turquoise ne tient que sur fond clair. Sur le noir, un lien est
   blanc ; c'est le survol qui prend le jaune, en soulignement. */
.footer a:not([class]),
.section--dark a:not([class]),
.hero a:not([class]),
.plate a:not([class]),
.topbar a:not([class]),
.masthead a:not([class]),
.drawer--dark a:not([class]) {
  color: #fff;
  text-decoration: none;
}
.footer a:not([class]):hover,
.section--dark a:not([class]):hover,
.hero a:not([class]):hover,
.plate a:not([class]):hover,
.topbar a:not([class]):hover,
.masthead a:not([class]):hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--resine);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Le pied de page : colonnes de liens, donc pas de soulignement au repos.
   Le texte courant reste gris, les liens sont blancs — la hiérarchie se
   lit sans couleur. Les sélecteurs restent sur :not([class]) pour ne
   jamais déteindre sur un bouton posé là plus tard. */
.footer                       { color: var(--steel-2); }
.footer a:not([class]):hover  { color: #fff; }
.footer ul a:not([class])     { display: inline-block; }

/* Dans un paragraphe sombre, un lien isolé a encore besoin d'un repère :
   on lui laisse le soulignement, mais en jaune. */
.section--dark p a:not([class]),
.hero p a:not([class]),
.plate p a:not([class]) {
  text-decoration: underline;
  text-decoration-color: rgba(254, 210, 0, .55);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------- LE PERSONNAGE
   Fourni détouré, il se pose sur n'importe quel fond. On ne le retouche
   pas, on ne le recadre pas : on lui donne une taille et de l'air. */
.face { display: block; width: auto; height: auto; }

/* Pastille d'en-tête : le personnage précède le lettrage sur toutes les
   pages. Le rond du dessin porte déjà son cerne, on n'en rajoute pas. */
.brand__face {
  display: block;
  width: 46px;
  flex-shrink: 0;
}
.brand__face img { width: 100%; height: auto; display: block; }
@media (max-width: 620px) { .brand__face { width: 38px; } }

/* La signature : le personnage et une phrase courte, là où le site
   promet quelqu'un au bout du fil. */
.signature {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.25rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.signature > picture { display: block; width: 84px; flex-shrink: 0; }
.signature img { width: 100%; height: auto; display: block; }
.signature p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--steel-2);
  max-width: 32ch;
}
.signature strong { color: #fff; display: block; font-weight: 600; }

/* Sur le fond clair, la même signature en version encadrée. */
.signature--light {
  border-top: 0;
  border: 1px solid var(--concrete);
  border-left: var(--edge) solid var(--resine);
  border-radius: var(--radius);
  background: var(--white);
  padding: 1.15rem 1.35rem;
  margin-top: 1.5rem;
}
.signature--light p      { color: var(--steel); }
.signature--light strong { color: var(--ink); }

/* Le personnage dans la bande jaune : il déborde vers le bas, comme
   s'il sortait du bandeau. Masqué en dessous de deux colonnes. */
.strike { overflow: hidden; }
.strike__face {
  display: block;
  width: clamp(150px, 17vw, 232px);
  flex-shrink: 0;
  margin-block: -1.5rem -3.25rem;
  align-self: flex-end;
}
.strike__face img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .strike__face { display: none; } }

/* Un état vide n'est plus une boîte grise : quelqu'un y répond. */
.empty__face {
  display: block;
  width: 108px;
  margin: 0 auto .9rem;
}
.empty__face img { width: 100%; height: auto; display: block; }

/* La page introuvable : le personnage cherche avec le visiteur. */
.lost__face {
  display: block;
  width: clamp(150px, 22vw, 220px);
  margin: 0 auto 1.5rem;
}
.lost__face img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------- LE VERROU COMPLET
   Le pied de page porte le logo entier — plaque, marbrure, personnage,
   lettrage, baseline. C'est le seul endroit du site où il apparaît en
   entier, et il n'apparaît que sur du noir : son gris et sa marbrure
   ne tiennent pas sur un fond clair. */
.footer .brand         { display: block; }
.footer .brand picture { display: block; max-width: 320px; }
.footer .brand__mark   { width: 100%; height: auto; }
@media (max-width: 620px) { .footer .brand picture { max-width: 260px; } }

/* Le pied de page descend au noir de la plaque, pour que le verrou s'y
   fonde au lieu d'y flotter. */
.footer { background: var(--ink-black); }

/* --------------------------------------------------- LE MENU DE POCHE
   Le tiroir mobile reprend la plaque : c'est la première chose qu'on
   voit sur un téléphone, autant que ce soit la marque. */
.drawer--dark {
  background: var(--ink-black);
  color: var(--concrete);
}
.drawer--dark .drawer__group      { border-top-color: rgba(255, 255, 255, .12); }
.drawer--dark .drawer__group > a  { color: #fff; }
.drawer--dark .drawer__sub        { border-left-color: rgba(255, 255, 255, .16); }
.drawer--dark .drawer__sub a      { color: var(--steel-2); }
.drawer--dark .drawer__sub a:hover{ color: #fff; }
.drawer--dark .tool:hover         { background: rgba(255, 255, 255, .10); }
.drawer__brand {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.drawer__brand img { width: 40px; height: 40px; object-fit: contain; }
.drawer__brand span {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel-2);
}

/* ----------------------------------------------- L'INVITE D'INSTALLATION
   L'icône de l'application, c'est désormais le personnage. */
.pwa-prompt__icon     { background: var(--ink-black); overflow: hidden; }
.pwa-prompt__icon img { width: 40px; height: 40px; object-fit: contain; }

/* ------------------------------------------------------- RAPPELS DE TON
   Le turquoise profond du rond sert aux petits repères sur fond sombre,
   là où le jaune serait trop fort : compteurs, puces, filets. */
.section--dark .spec-row dt,
.footer .spec-row dt { color: var(--steel-2); }


/* Le bandeau supérieur : la puce des arguments passe au turquoise du
   logo, le jaune restant réservé aux boutons et au bord humide. */
.topbar__usp span::before { background: var(--cyan); }