/* HKsentinel · site public, thème clair. Une seule grammaire pour toutes les pages (21 octobre 2026) :
   ouverture (.s-head), sections (.s-sec), cartes (.s-cards), explications (.s-rows), portes (.s-doors),
   produits (.s-products), étapes, questions, fin de page (.s-reply). Un seul aplat pour toutes les cartes,
   les mêmes marges et cinq tailles de texte. Règles de la maison : aucun filet d'un pixel hors tableaux et
   champs, aucune ombre au repos, une seule couleur d'accent sur l'action principale.
   Couleurs et espacements : jetons de design/tokens.json. */

:root {
  --m: clamp(var(--space-4), 5vw, var(--space-18));
  --gap: var(--space-6);
  --section: clamp(64px, 7vw, 104px);
  --t-small: 14px;
  --t-body: 16px;
  --t-lead: clamp(18px, 1.3vw, 20px);
  --t-h2: clamp(22px, 2.1vw, 30px);
  --t-display: clamp(30px, 3.8vw, 54px);
  --t-card: 18px;
  --tile-gap: 8px;
  --card-pad: var(--space-6);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press: 140ms;
}

/* ——— Socle ——— */

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.room { overflow-wrap: break-word; margin: 0; background: var(--room); color: var(--room-ink); font: 400 var(--t-body)/1.6 var(--font-body); }
.room *, .room *::before, .room *::after { box-sizing: border-box; }
.room img { display: block; max-width: 100%; }
.room a { color: inherit; }
.room .s-btn, .room .s-btn:visited { color: var(--ink-950); }
.room .s-btn--solid, .room .s-btn--solid:visited, .room .skip-link, .room .s-reply__bar { color: var(--white); }
.room p { margin: 0; }
.room h1, .room h2, .room h3 { margin: 0; text-wrap: balance; }
.room :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.skip-link { position: absolute; left: var(--m); top: -100px; padding: var(--space-3) var(--space-4); background: var(--room-action); color: var(--white); font-weight: 700; z-index: 100; }
.skip-link:focus { top: var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* taste-skill-ignore : texte réservé aux lecteurs d’écran, pas un filet */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore : champ piège hors écran, pas un filet */
#contenu > section, #contenu > div, #contenu > nav, #contenu > p, #contenu > article { padding-inline: var(--m); }

/* Zones sombres : mêmes composants, encres inversées localement. */
.s-reply, .s-footer, .s-eco {
  --room: var(--room-dark);
  --room-raise: var(--room-dark-raise);
  --room-ink: var(--room-dark-ink);
  --room-soft: var(--room-dark-soft);
  --accent-text: var(--green-400);
  --room-red: var(--room-dark-red);
  --room-line: var(--room-dark-raise);
  background: var(--room);
  color: var(--room-ink);
}

/* Les cases de grille peuvent rétrécir : un texte agrandi passe à la ligne au lieu de déborder. */
.s-products > li, .s-product, .s-figures__item, .s-une > li, .s-cards > li, .s-doors > li { min-width: 0; }
.s-product__name, .s-product__note, .s-figures__value, .s-figures__label, .s-une__title, .s-une__meta, .s-door__title { overflow-wrap: anywhere; }

/* ——— Typographie ——— */

.s-h1 { font: 600 var(--t-display)/1.04 var(--font-display); letter-spacing: -0.035em; max-width: 18ch; }
.s-h2 { font: 600 var(--t-h2)/1.12 var(--font-display); letter-spacing: -0.025em; }
.s-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--room-soft); max-width: 56ch; }
.s-note, .s-meta { font-size: var(--t-small); color: var(--room-soft); }
.s-meta { margin-block: calc(var(--space-6) * -1) var(--space-12); }
.s-link { color: var(--room-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color var(--press) ease; }
.s-brand { color: var(--accent-text); font-weight: inherit; text-transform: none; letter-spacing: inherit; white-space: nowrap; }
.s-company { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.s-company:hover { color: var(--room-ink); text-decoration-thickness: 2px; }
.s-tag { display: inline-block; padding: 2px 8px; background: var(--room-tag); color: var(--white); font: 600 12px/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.s-empty { color: var(--room-soft); }

/* ——— Boutons : un seul format, coins droits ——— */

.s-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-8); border: 0; background: var(--white); color: var(--ink-950); font: 600 16px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; user-select: none; transition: transform var(--press) var(--ease-out), background var(--press) ease; }
.s-btn--solid { background: var(--room-action); color: var(--white); }
.s-btn:active, .s-reply__bar:active { transform: scale(0.97); }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.s-wa { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--room-action); text-decoration: underline; text-underline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .s-btn:hover { background: var(--room-line); }
  .s-btn--solid:hover { background: var(--room-action-hover); }
  .s-link:hover { color: var(--room-red); }
  .s-nav a:hover { color: var(--room-ink); }
}

/* ——— En-tête ——— */

.s-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-8); min-height: var(--header-h); padding-inline: var(--m); background: var(--room); }
.s-header__logo { flex: none; }
.s-nav { display: flex; align-items: center; gap: var(--space-6); flex: 1; font: 500 15px/1.2 var(--font-body); white-space: nowrap; }
.s-nav a { padding-block: 12px; color: var(--room-soft); text-decoration: none; transition: color var(--press) ease; }
.s-nav a[aria-current="page"] { color: var(--room-ink); }
.s-nav__quiet:first-of-type { margin-inline-start: auto; }
.s-header__actions { display: flex; flex: none; gap: var(--space-3); }
.s-header__action { flex: none; }
.s-header__partner { background: var(--room-raise); }
.s-nav__menu-only { display: none; }
.s-nav__menu-only.s-btn { color: var(--white); }
.s-nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--room-ink); cursor: pointer; }
.s-nav-toggle__bar, .s-nav-toggle__bar::before, .s-nav-toggle__bar::after { display: block; width: 22px; height: 2px; margin: auto; background: currentColor; transition: transform 200ms var(--ease-out); }
.s-nav-toggle__bar { position: relative; }
.s-nav-toggle__bar::before, .s-nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.s-nav-toggle__bar::before { top: -7px; }
.s-nav-toggle__bar::after { top: 7px; }

/* ——— Ouverture des pages intérieures ——— */

.s-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-small); color: var(--room-soft); }
.s-crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); }
.s-crumbs a { text-decoration: none; }
.s-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-6); padding-block: var(--space-6) var(--section); }
.s-head .s-crumbs { grid-column: 1 / -1; }
.s-head__text { grid-column: 1 / span 8; display: grid; gap: var(--space-6); align-content: center; justify-items: start; }
.s-head--media .s-head__text { grid-column: 1 / span 6; }
.s-head__media { grid-column: 7 / -1; align-self: center; }
.s-head__scene { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ——— Sections : le même en-tête partout ——— */

.s-sec { padding-block-end: var(--section); }
.s-sec__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: var(--space-3) var(--gap); align-items: end; margin-block-end: var(--space-8); }
.s-sec__head:has(> :only-child) { margin-block-end: var(--space-6); }
.s-sec__lead { color: var(--room-soft); max-width: 56ch; }
.s-sec__link { grid-column: 3; justify-self: end; white-space: nowrap; }
.s-sec__head > .s-h2:only-child, .s-sec__head > .s-h2 + .s-sec__link { grid-column: 1; }
.s-sec__head > .s-h2 + .s-sec__link { grid-column: 3; }
.s-more { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: var(--space-6) 0 0; padding: 0; list-style: none; }

/* Grilles : 1 à 4 colonnes, choisies selon le nombre de cartes. */
.s-cards, .s-doors { display: grid; gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; }
.s-cols-1 { grid-template-columns: minmax(0, 1fr); }
.s-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Carte : un titre, une phrase, une liste facultative. */
.s-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--card-pad); background: var(--room-raise); }
.room .s-card__title { font: 600 var(--t-card)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--room-ink); }
.s-card__text { color: var(--room-soft); max-width: 60ch; }
.s-card__list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.s-card__list li { display: flex; gap: var(--space-3); }
.s-card__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-block-start: 0.65em; background: var(--accent-text); }

/* Explication : titre à gauche, texte à droite, sur le même aplat que les cartes. */
.s-rows { display: grid; gap: var(--tile-gap); padding-block-end: var(--section); }
.s-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-3); padding: var(--space-8) var(--card-pad); background: var(--room-raise); }
.room .s-row__title { grid-column: 1 / span 4; font: 600 var(--t-card)/1.25 var(--font-display); letter-spacing: -0.01em; }
.s-row__body { grid-column: 5 / -1; display: grid; gap: var(--space-3); max-width: 70ch; }

/* Porte : lien vers une autre page, photo en haut si toutes les portes en ont une. */
.s-door { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--room-raise); color: var(--room-ink); text-decoration: none; overflow: hidden; transition: transform var(--press) var(--ease-out), background var(--press) ease; }
.s-door__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms var(--ease-out); }
.s-door__text { display: grid; align-content: start; gap: var(--space-2); padding: var(--card-pad); padding-inline-end: calc(var(--card-pad) + 24px); }
.s-door__title { font: 600 var(--t-card)/1.25 var(--font-display); letter-spacing: -0.01em; transition: color var(--press) ease; }
.s-door__note { color: var(--room-soft); font-size: 15px; }
.s-door__meta { font-size: var(--t-small); color: var(--room-soft); }
.s-door__arrow { position: absolute; right: var(--card-pad); bottom: var(--card-pad); color: var(--accent-text); font-weight: 600; transition: transform 200ms var(--ease-out); }
.s-door:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .s-door:hover { background: var(--room-tint); }
  .s-door:hover .s-door__title { color: var(--accent-text); }
  .s-door:hover .s-door__img { transform: scale(1.03); }
  .s-door:hover .s-door__arrow { transform: translateX(4px); }
}

/* Liste à cocher (« Avant de choisir »). */
.s-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; }
.s-checks li { display: flex; gap: var(--space-3); padding: var(--space-4) var(--card-pad); background: var(--room-raise); font-weight: 500; }
.s-checks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-block-start: 0.6em; background: var(--accent-text); }

/* Étapes : une rangée de cases numérotées. */
.s-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.s-steps li { position: relative; padding: var(--space-12) var(--card-pad) var(--card-pad); background: var(--room-tint); font-weight: 600; counter-increment: step; }
.s-steps li::before { content: counter(step); position: absolute; top: var(--space-4); left: var(--card-pad); font: 600 var(--t-lead)/1 var(--font-display); color: var(--accent-text); }

/* Questions fréquentes : pleine largeur, sous l'en-tête de section. */
.s-faq { display: grid; gap: var(--tile-gap); }
.s-faq__item { background: var(--room-raise); }
.s-faq__item summary { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-5, 20px) var(--card-pad); font-weight: 600; cursor: pointer; list-style: none; }
.s-faq__item summary::after { content: "+"; flex: none; color: var(--accent-text); font-weight: 700; transition: transform 200ms var(--ease-out); }
.s-faq__item[open] summary::after { transform: rotate(45deg); }
.s-faq__item summary::-webkit-details-marker { display: none; }
.s-faq__item p { padding: 0 var(--card-pad) var(--card-pad); max-width: 72ch; color: var(--room-soft); }

/* ——— Produits : la même tuile partout ——— */

.s-exhibit { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--white); transition: transform 600ms var(--ease-out); }
.s-exhibit--packshot { padding: 14%; mix-blend-mode: multiply; }
.s-exhibit--stage { aspect-ratio: 4 / 5; }
.s-exhibit--stage.s-exhibit--packshot { padding: 6%; aspect-ratio: 1 / 1; max-width: 420px; justify-self: end; }
.s-exhibit--empty { display: grid; place-items: center; padding: var(--space-6); text-align: center; color: var(--room-soft); font: 500 var(--t-lead)/1.3 var(--font-display); }
.s-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; }
.s-product { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-2); height: 100%; padding: var(--space-4); background: var(--white); text-decoration: none; color: var(--room-ink); transition: transform var(--press) var(--ease-out); }
.s-product .s-exhibit { padding: 10%; background: var(--white); }
.s-product .s-exhibit--packshot { padding: 12%; }
.s-product__name { font-weight: 700; transition: color var(--press) ease; }
.s-product__note { font-size: var(--t-small); color: var(--room-soft); }
.s-product:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .s-product:hover .s-exhibit { transform: scale(1.04); } .s-product:hover .s-product__name { color: var(--accent-text); } }
.s-row-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-padding-inline: var(--m); }
.s-products--row { display: flex; width: max-content; }
.s-products--row > li { width: clamp(180px, 18vw, 240px); scroll-snap-align: start; }

/* Système type : photo, nom et rôle, sur une ligne. */
.s-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; }
.s-equip a { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-1); height: 100%; padding: var(--space-4); background: var(--white); text-decoration: none; transition: transform var(--press) var(--ease-out); }
.s-equip a:active { transform: scale(0.98); }
.s-equip img, .s-equip a > span:first-child { grid-row: span 2; width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.s-equip__name { font-weight: 600; }
.s-equip__note { font-size: var(--t-small); color: var(--room-soft); }
@media (hover: hover) and (pointer: fine) { .s-equip a:hover .s-equip__name { color: var(--accent-text); } }

/* Catalogue : recherche, filtres, pagination. */
.s-search { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-end: var(--space-8); }
.s-input { min-height: 52px; padding: 0 var(--space-4); border: 0; background: var(--room-raise); color: var(--room-ink); font: 400 16px var(--font-body); }
.s-search .s-input[type="search"] { flex: 1 1 280px; }
.s-pager, .s-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); }
.s-pager { margin-block-start: var(--space-8); }
.s-filters { justify-content: flex-start; margin-block-end: var(--space-6); }
.s-filters a { color: var(--room-soft); text-decoration: none; font-weight: 500; }
.s-filters a[aria-current="page"] { color: var(--room-ink); text-decoration: underline; text-underline-offset: 6px; }
.s-empty-card { display: grid; justify-items: start; gap: var(--space-6); padding: var(--space-8) var(--card-pad); background: var(--room-raise); }

/* Liste datée : actualités et guides. */
.s-schedule { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tile-gap); }
.s-schedule__row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); row-gap: var(--space-1); align-items: baseline; padding: var(--space-5, 20px) var(--card-pad); background: var(--room-raise); text-decoration: none; transition: background var(--press) ease; }
.s-schedule__name { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font: 600 var(--t-card)/1.3 var(--font-display); }
.s-schedule__note { grid-column: 1; color: var(--room-soft); font-size: 15px; }
.s-schedule__date { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--room-soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .s-schedule__row a:hover { background: var(--room-tint); } .s-schedule__row a:hover .s-schedule__name { color: var(--accent-text); } }

/* ——— Fiche produit ——— */

.s-pbanner { margin-block: 0 var(--space-8); }
.s-pbanner img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; }
.s-plead { max-width: 68ch; margin-block-end: var(--space-12); font-size: var(--t-lead); }
.s-subnav { position: sticky; top: var(--header-h); z-index: 10; display: flex; align-items: center; gap: var(--space-6); min-height: 64px; margin-block-end: var(--space-12); background: var(--room-raise); }
.s-subnav__name { font-weight: 600; margin-inline-end: auto; }
.s-subnav a:not(.s-btn) { text-decoration: none; color: var(--room-soft); }
.s-subnav__action { min-height: 44px; }
.s-subnav__short { display: none; }
.s-spec { padding-block-end: var(--section); }
.s-spec__id { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8) var(--gap); margin: 0; }
.s-spec__id dt { font-size: var(--t-small); color: var(--room-soft); }
.s-spec__id dd { margin: 0; }
.s-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); padding-block-end: var(--section); }
.s-figures__item { display: grid; align-content: space-between; gap: var(--space-6); min-height: 160px; padding: var(--card-pad); background: var(--room-raise); }
.s-figures__item:first-child { background: var(--room-action); color: var(--white); }
.s-figures__item:first-child .s-figures__label { color: var(--white); }
.s-figures__value { font: 600 clamp(32px, 3.4vw, 48px)/1 var(--font-display); letter-spacing: -0.03em; }
.s-figures__label { color: var(--room-soft); }
.s-points { display: grid; row-gap: var(--section); padding-block-end: var(--section); }
.s-point { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.s-point__text { grid-column: 1 / span 5; display: grid; gap: var(--space-4); align-content: start; }
.s-point__text > p { max-width: 56ch; color: var(--room-soft); }
.s-point__media { grid-column: 7 / -1; }
.s-point__media img { display: block; width: 100%; height: auto; }
.s-point--flip .s-point__text { grid-column: 8 / -1; grid-row: 1; }
.s-point--flip .s-point__media { grid-column: 1 / span 6; grid-row: 1; }
.s-point--text .s-point__text { grid-column: 1 / span 8; }
.s-point__facts { padding: var(--space-4) var(--card-pad); background: var(--room-raise); }
.s-core-link { padding-block-end: var(--section); }
.s-core-link a { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--space-8); padding: var(--card-pad); background: var(--room-tint); text-decoration: none; transition: transform var(--press) var(--ease-out); }
.s-core-link a:active { transform: scale(0.98); }
.s-core-link img { width: 120px; height: 120px; object-fit: contain; mix-blend-mode: multiply; }
.s-core-link__title { display: block; font: 600 var(--t-h2)/1.15 var(--font-display); letter-spacing: -0.02em; }
.s-core-link__text { display: block; margin-block-start: var(--space-2); color: var(--room-soft); max-width: 60ch; }
.s-table { width: 100%; border-collapse: collapse; }
.s-table th, .s-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--room-line); text-align: start; vertical-align: top; }
.s-table th { font-weight: 600; color: var(--room-soft); }
.s-docs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.s-docs li { display: grid; gap: var(--space-1); }
.s-docs span { font-size: var(--t-small); color: var(--room-soft); }
.s-article { display: grid; gap: var(--space-4); max-width: 68ch; padding-block-end: var(--section); }
.s-article h2 { font: 600 var(--t-h2)/1.15 var(--font-display); margin-block-start: var(--space-8); }
.s-article h3 { font: 600 var(--t-lead)/1.3 var(--font-display); }
.s-article ul, .s-article ol { margin: 0; padding-inline-start: 1.2em; }

/* ——— Accueil ——— */

/* Ouverture « à la une » : le titre, puis l'actualité principale en grande photo et deux autres à côté. */
.s-open { padding-block: var(--space-12) var(--section); }
.s-open__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6) 48px; align-items: end; margin-block-end: var(--space-8); }
.room .s-open__title { font: 600 clamp(32px, 3.6vw, 54px)/1.04 var(--font-display); letter-spacing: -0.035em; }
.s-open__side { display: grid; gap: var(--space-5, 20px); justify-items: start; }
.s-open__sentence { font-size: var(--t-lead); color: var(--room-soft); max-width: 46ch; }
.s-une { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); height: clamp(420px, 38vw, 560px); margin: 0; padding: 0; list-style: none; }
.s-une__lead { grid-row: span 2; }
.s-une--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.s-une--2 { grid-template-rows: minmax(0, 1fr); }
.s-une--2 .s-une__lead { grid-row: auto; }
.s-une > li { min-height: 0; }
.s-une__card { position: relative; display: block; height: 100%; overflow: hidden; background: var(--room-dark); color: var(--white); text-decoration: none; transition: transform var(--press) var(--ease-out); }
.s-une__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.s-une__lead img { object-position: 70% 50%; }
.s-une__card:not(.s-une__card--still)::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(to bottom, transparent, var(--room-dark) 78%); } /* taste-skill-ignore : voile neutre sur photo, pour lire le titre */
.room .s-une__title { color: var(--white); }
.s-une__text { position: absolute; z-index: 1; inset: auto var(--space-6) var(--space-6); display: grid; gap: var(--space-2); }
.s-une__lead .s-une__text { inset: auto 40px 40px; gap: var(--space-3); }
.s-une__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--room-dark-ink); }
.s-une__title { font: 600 20px/1.15 var(--font-display); letter-spacing: -0.01em; max-width: 24ch; }
.s-une__lead .s-une__title { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.s-une__card:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .s-une__card:hover img { transform: scale(1.03); } }
.s-open__links { display: flex; gap: var(--space-6); margin-block-start: var(--space-4); }

/* Matériel, logiciels et intégrations : la partie sombre de l'accueil. */
.s-eco { margin-block-end: var(--section); padding-block: var(--section); }
.s-eco__layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); margin: 0; padding: 0; list-style: none; }
.s-eco__layer { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--space-2); padding: var(--card-pad) var(--card-pad) 0; background: var(--room-raise); overflow: hidden; }
.s-eco__layer--text { padding-block-end: var(--card-pad); }
.s-eco__media { display: block; height: 240px; margin: var(--space-6) calc(var(--card-pad) * -1) 0; overflow: hidden; }
.s-eco__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.s-eco__media--tall { display: flex; justify-content: center; }
.s-eco__media--tall img { width: 58%; height: auto; object-fit: initial; }
.s-eco__note { margin-block-start: var(--space-8); font-size: var(--t-small); color: var(--room-soft); }

/* ——— Fin de page ——— */

.s-reply { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding-block: var(--space-18); }
.s-reply__aside { grid-column: 1 / span 4; display: grid; gap: var(--space-6); font-size: var(--t-lead); }
.s-reply__card { grid-column: 6 / -1; display: grid; gap: var(--space-6); justify-items: center; padding: var(--space-12); background: var(--room-ink); color: var(--room); text-align: center; }
.s-reply__title { font: 600 var(--t-h2)/1.1 var(--font-display); letter-spacing: -0.02em; }
.s-reply__card p { max-width: 40ch; }
.s-reply__bar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; background: var(--room-action); color: var(--white); font-weight: 600; text-decoration: none; transition: transform var(--press) var(--ease-out); }

/* ——— Formulaires (les champs gardent leurs bords, comme le veut la règle) ——— */

.s-form-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-12); padding-block-end: var(--section); }
.s-form { grid-column: 1 / span 8; display: grid; gap: var(--space-6); }
.s-form-layout--single .s-form { grid-column: 1 / span 9; }
.s-form-aside { grid-column: 10 / -1; display: grid; gap: var(--space-4); align-content: start; padding: var(--card-pad); background: var(--room-raise); }
.s-form-aside .s-h2 { font-size: var(--t-lead); }
.s-form-aside .s-h2 + * { margin-block-start: calc(var(--space-2) * -1); }
.s-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.s-form__wide { grid-column: 1 / -1; }
.s-fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-6); }
.s-fieldset legend { font: 600 var(--t-lead)/1.3 var(--font-display); margin-block-end: var(--space-4); }
.s-alert { padding: var(--space-4) var(--space-6); background: var(--room-raise); color: var(--red-alert-text); font-weight: 600; }
.room textarea { min-height: 160px; }
.room .hk-field { font-size: 16px; font-weight: 600; color: var(--room-ink); }
.room .hk-field-label { color: var(--room-ink); }
.room .hk-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; cursor: pointer; }
.room .hk-check input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--green-500); flex: none; }
.room .hk-input { background: var(--room-raise); color: var(--room-ink); }
.room .hk-field-hint { color: var(--room-soft); font-weight: 400; font-size: var(--t-body); }
.room .hk-field-req { color: var(--accent-text); }
.s-form .s-note { font-size: var(--t-body); }
.s-crosslinks { display: grid; gap: var(--space-4); padding-block-end: var(--section); }

/* ——— Pied de page ——— */

.s-footer { display: grid; padding: var(--space-12) var(--m) var(--space-8); }
.s-foot__reach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8) var(--gap); align-items: end; padding-block-end: var(--space-12); }
.s-foot__brand { display: grid; gap: var(--space-4); justify-items: start; }
.s-foot__brand img { margin-block-end: var(--space-6); }
.room .s-foot__title { font: 600 var(--t-h2)/1.1 var(--font-display); letter-spacing: -0.02em; }
.s-foot__message { color: var(--room-soft); max-width: 46ch; }
.s-foot__ways { display: grid; gap: var(--space-2); justify-items: start; }
.s-foot__phone { font: 600 clamp(30px, 3.8vw, 54px)/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; }
.s-foot__mail { padding-block: 4px; margin-block-end: var(--space-4); font: 500 clamp(18px, 1.5vw, 22px)/1.3 var(--font-display); color: var(--room-soft); text-decoration: none; }
.s-foot__map { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.7fr)); gap: var(--space-8) var(--gap); margin-inline: calc(var(--m) * -1); padding: 40px var(--m); background: var(--room-raise); }
.s-foot__place { display: grid; gap: var(--space-8); align-content: start; }
.s-foot__place p { display: grid; gap: var(--space-1); margin: 0; justify-items: start; }
.s-foot__label { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--room-soft); }
.s-foot__hours { font-size: var(--t-small); color: var(--room-soft); }
.s-foot__socials a { display: inline-flex; gap: 6px; font-weight: 600; text-decoration: none; }
.s-foot__col { display: grid; gap: var(--space-1); align-content: start; justify-items: start; }
.s-foot__col a { padding-block: 4px; color: var(--room-ink); text-decoration: none; font-size: 15px; }
.s-footer__proofs { padding-block: var(--space-8) var(--space-2); }
.s-proofs { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); margin: 0; padding: 0; list-style: none; }
.s-proofs a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: var(--t-small); font-weight: 600; color: var(--room-ink); text-decoration: none; }
.s-proofs a::before { content: ""; width: 6px; height: 6px; background: var(--accent-text); }
.s-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding-block-start: var(--space-6); font-size: var(--t-small); color: var(--room-soft); }
.s-footer__legal a { display: inline-block; padding-block: 4px; color: var(--room-soft); }
@media (hover: hover) and (pointer: fine) { .s-proofs a:hover, .s-foot__col a:hover, .s-foot__socials a:hover, .s-foot__phone:hover, .s-foot__mail:hover { color: var(--room-red); } }

/* ——— Mouvement : entrées une seule fois, retour sur chaque contrôle ——— */

@media (prefers-reduced-motion: no-preference) {
  .js .s-head__text > *, .js .s-head__media { animation: s-rise 700ms var(--ease-out) both; }
  .js .s-head__text > :nth-child(2) { animation-delay: 80ms; }
  .js .s-head__text > :nth-child(3) { animation-delay: 160ms; }
  .js .s-head__media { animation-delay: 120ms; }
  .js [data-reveal-part] { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .js [data-reveal-part].is-in { opacity: 1; transform: none; }
}
@keyframes s-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .room *, .room *::before, .room *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ——— Écrans moyens : en-tête resserré, puis menu repliable ——— */

@media (max-width: 1360px) {
  .s-header { gap: var(--space-6); }
  .s-nav { gap: var(--space-5, 20px); }
  .s-header__action { padding-inline: var(--space-5, 20px); }
}

@media (max-width: 1260px) {
  .s-nav { display: none; }
  .s-nav-toggle { display: block; margin-inline-start: auto; }
  body.nav-open .s-nav { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); display: flex; flex-direction: column; align-items: flex-start; position: fixed; inset: var(--header-h) 0 0 0; padding: var(--space-8) var(--m); gap: var(--space-6); background: var(--room); font-size: var(--t-lead); overflow-y: auto; }
  body.nav-open .s-nav__quiet:first-of-type { margin-inline-start: 0; }
  body.nav-open .s-nav__menu-only { display: block; }
  @starting-style { body.nav-open .s-nav { opacity: 0; transform: translateY(-8px); } }
  body.nav-open .s-nav-toggle__bar { background: transparent; }
  body.nav-open .s-nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
  body.nav-open .s-nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }
  .s-header__partner { display: none; }
}

/* ——— Tablette ——— */

@media (max-width: 1100px) {
  .s-open__head, .s-sec__head, .s-foot__reach { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .s-sec__head > .s-sec__link, .s-sec__head > .s-h2 + .s-sec__link { grid-column: 1; justify-self: start; white-space: normal; }
  .s-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-cols-3 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .s-row__title, .s-row__body { grid-column: 1 / -1; }
  .s-eco__layers { grid-template-columns: minmax(0, 1fr); }
  .s-eco__media { height: 280px; }
  .s-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-point, .s-point--flip { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .s-point__text, .s-point__media, .s-point--flip .s-point__text, .s-point--flip .s-point__media, .s-point--text .s-point__text { grid-column: 1; grid-row: auto; }
  .s-foot__map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-foot__place { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-subnav a:not(.s-btn), .s-subnav__long { display: none; }
  .s-subnav__short { display: inline; }
}

/* ——— Téléphone ——— */

@media (max-width: 760px) {
  :root { --gap: var(--space-4); --section: var(--space-16, 64px); --card-pad: var(--space-5, 20px); }
  .s-header { gap: var(--space-4); }
  .s-header__action { min-height: 44px; padding: 0 var(--space-4); }
  .s-head, .s-form-layout, .s-reply, .s-row { grid-template-columns: minmax(0, 1fr); }
  .s-head__text, .s-head--media .s-head__text, .s-head__media, .s-form, .s-form-layout--single .s-form, .s-form-aside, .s-reply__aside, .s-reply__card { grid-column: 1; }
  .s-head__media { order: -1; }
  .s-cols-2, .s-cols-3, .s-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .s-cols-3 > li:last-child:nth-child(odd) { grid-column: auto; }
  .s-doors--photo.s-cols-4, .s-doors--photo.s-cols-3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-padding-inline: var(--m); scrollbar-width: none; }
  .s-doors--photo > li { scroll-snap-align: start; }
  .s-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-products--row { display: flex; }
  .s-open { padding-block: var(--space-8) var(--section); }
  .s-une { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 300px 200px; height: auto; }
  .s-une__lead { grid-row: auto; grid-column: 1 / -1; }
  .s-une--1, .s-une--2 { grid-template-rows: 300px; }
  .s-une--2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px 200px; }
  .s-une__text { inset: auto var(--space-4) var(--space-4); }
  .s-une__lead .s-une__text { inset: auto 20px 20px; }
  .s-une__title { font-size: 16px; }
  .s-pbanner img { aspect-ratio: 4 / 3; object-position: 70% 50%; }
  .s-figures__item { min-height: 120px; padding: var(--space-4); }
  .s-core-link a { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); }
  .s-core-link img { width: 72px; height: 72px; }
  .s-reply { row-gap: var(--space-12); padding-block: var(--space-12); }
  .s-reply__card { padding: var(--space-8); }
  .s-reply__bar { min-height: 52px; }
  .s-form__grid { grid-template-columns: minmax(0, 1fr); }
  .s-schedule__row a { grid-template-columns: minmax(0, 1fr); }
  .s-schedule__date { grid-column: 1; grid-row: auto; }
  .s-foot__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-foot__place { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-table { font-size: var(--t-small); }
  input, select, textarea { font-size: 16px; }
}

.s-consent-link { display: inline-block; margin: calc(-1 * var(--space-2)) 0 0 32px; font-size: 14px; color: var(--room-action); text-decoration: underline; text-underline-offset: 3px; }