/* ===========================================================================
   TEC'OFFICE M08 — MOBILIER : feuille des scenes de la page
   ---------------------------------------------------------------------------
   Regle d'or : cette feuille ne cache rien a elle seule.
   Toutes les regles ci-dessous ne s'appliquent qu'a des classes « mo-* »,
   « col-anim », « vu-on », « vu-js » que SEUL scenes-mobilier.js pose, et
   seulement quand GSAP est la. Sans GSAP, ou animations refusees : la page
   reste entiere (colonne en diptyque, bande en defilement horizontal natif).
   Le § 10 porte aussi la mise en page de la section #sieges : rien n'y est
   cache, ses filets valent 1 tant que la scene ne les a pas pris en charge.
   =========================================================================== */

/* ---- 1. CADRES DE PLANCHE (hero, plaques sombres) --------------------------
   La bordure du cadre est remplacee par quatre traits de meme teinte, poses
   bout a bout sans se chevaucher, qui se tracent depuis l'angle haut-gauche. */
.pl-frame.mo-cadre,
.tech-frame.mo-cadre { border-color: transparent; }
.pl-frame.mo-cadre::before,
.tech-frame.mo-cadre::before { opacity: calc(.58 * var(--mo-coin, 1)); }
.mo-cadre > .mo-ln {
  position: absolute; display: block; pointer-events: none;
  background: rgba(255, 255, 255, .13);
}
.mo-cadre > .mo-ln.t { top: -1px; left: -1px; right: 0; height: 1px; transform-origin: left center; }
.mo-cadre > .mo-ln.l { left: -1px; top: 0; bottom: -1px; width: 1px; transform-origin: center top; }
.mo-cadre > .mo-ln.r { right: -1px; top: -1px; bottom: 0; width: 1px; transform-origin: center top; }
.mo-cadre > .mo-ln.b { bottom: -1px; left: 0; right: -1px; height: 1px; transform-origin: left center; }

/* ---- 1 bis. HERO : la planche se met au net, en CSS pur ----------------------
   Deja a l'ecran au premier affichage : keyframes qui FINISSENT sur l'etat
   d'origine (fill-mode both). Animations refusees : voir § 8. */
@keyframes mo-coin  { from { opacity: 0; } to { opacity: .58; } }
@keyframes mo-tx    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-ty    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-pose  { from { clip-path: inset(0% 0% 100% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
@keyframes mo-case  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mo-fondu { from { opacity: 0; } to { opacity: 1; } }

.mo-intro::before { animation: mo-coin .5s cubic-bezier(.33, 1, .68, 1) .1s both; }
.mo-intro > .mo-ln.t { animation: mo-tx .62s cubic-bezier(.65, 0, .35, 1) .22s both; }
.mo-intro > .mo-ln.l { animation: mo-ty .62s cubic-bezier(.65, 0, .35, 1) .22s both; }
.mo-intro > .mo-ln.r { animation: mo-ty .55s cubic-bezier(.65, 0, .35, 1) .78s both; }
.mo-intro > .mo-ln.b { animation: mo-tx .55s cubic-bezier(.65, 0, .35, 1) .78s both; }
.pl-mm.mo-intro-grille { animation: mo-pose 1.5s cubic-bezier(.23, 1, .32, 1) .18s both; }

.phero.pl .pl-ref > i { transform-origin: left center; animation: mo-tx .55s cubic-bezier(.23, 1, .32, 1) .42s both; }
.phero.pl .pl-ref > i:nth-of-type(2) { animation-delay: .52s; }

.phero.pl .pl-cart > div { animation: mo-case .7s cubic-bezier(.23, 1, .32, 1) .62s both; }
.phero.pl .pl-cart > div:nth-child(2) { animation-delay: .69s; }
.phero.pl .pl-cart > div:nth-child(3) { animation-delay: .76s; }
.phero.pl .pl-cart > div:nth-child(4) { animation-delay: .83s; }
.phero.pl .plc-foot { animation: mo-fondu .6s cubic-bezier(.33, 1, .68, 1) .95s both; }

/* ---- 2. TETES DE SECTION : le filet se trace --------------------------------*/
.sec-head.mo-fil { position: relative; border-top-color: transparent; }
.sec-head.mo-fil::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); pointer-events: none;
  transform: scaleX(var(--mo-fil, 1)); transform-origin: left center;
}
.sec-head.on-dark.mo-fil::before { background: rgba(255, 255, 255, .45); }

/* Titres reveles ligne par ligne : fenetre de masque debordante vers le haut
   (accents des capitales) sans toucher a la ligne de base. */
.sec-head [data-lignes] .lg,
.col-h .lg {
  overflow: visible;
  clip-path: inset(-.26em -.3em 0 -.3em);
}

/* ---- 3. COTES COURANTES : le petit repere sable se trace ------------------ */
.cotes.mo-cotes > div::before { transform: scaleX(var(--mo-k, 1)); transform-origin: left center; }

/* ---- 4. FICHE A-D et NOMENCLATURE 01-18 : le filet se reporte -------------- */
.fiche.mo-ligne li,
.panelsec .fiche.mo-ligne li,
.nomen-list.mo-ligne li { position: relative; border-bottom-color: transparent; }
.fiche.mo-ligne li::after,
.nomen-list.mo-ligne li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line); pointer-events: none;
  transform: scaleX(var(--mo-k, 1)); transform-origin: left center;
}
.panelsec .fiche.mo-ligne li::after { background: rgba(255, 255, 255, .17); }

/* ---- 5. MAISONS DE TETE : le filet sous le logo se trace ------------------- */
/* Entree prise par la scene : le survol repond tout de suite, sans retard. */
.houses .house.mo-maison {
  transition: transform .3s var(--e-out, cubic-bezier(.23, 1, .32, 1)),
              border-color .3s var(--e-out, cubic-bezier(.23, 1, .32, 1)),
              box-shadow .3s var(--e-out, cubic-bezier(.23, 1, .32, 1));
  transition-delay: 0s;
}
/* « .js .reveal-s.in { transform: none } » l'emportait sur le survol : la
   carte ne se soulevait jamais. */
@media (hover: hover) and (pointer: fine) {
  .houses .house.mo-maison:hover { transform: translateY(-6px); }
}
.hrole.mo-hr { position: relative; border-top-color: transparent; }
.hrole.mo-hr::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line); pointer-events: none;
  transform: scaleX(var(--mo-k, 1)); transform-origin: left center;
}

/* ---- 6. NOTES TECHNIQUES : chaque etape dans son span ---------------------- */
.tech-note .mo-et { display: block; }

/* ---- 7. LA COLONNE, FERMEE PUIS OUVERTE -------------------------------------
   Sans GSAP : deux photos cote a cote (diptyque). Avec GSAP : les deux photos
   se superposent dans un seul cadre et la seconde se decouvre au defilement,
   derriere un trait de coupe sable. Les legendes passent a cote du cadre. */
.col-sc.col-anim .col-leg { display: block; }
.col-sc.col-anim .col-etat { display: flex; }
.col-sc.col-anim .col-figs {
  display: block; position: relative;
  height: clamp(420px, calc(100vh - 210px), 780px); aspect-ratio: 3 / 4;
  width: auto; max-width: 100%; margin: 0 auto;
  overflow: hidden; border-radius: 8px;
}
.col-sc.col-anim .col-f { position: absolute; inset: 0; aspect-ratio: auto; }
.col-sc.col-anim .col-f figcaption { display: none; }
.col-sc.col-anim .col-fa .ref { left: auto; right: 12px; }
.col-sc.col-anim .col-fb { z-index: 2; }
.col-wipe {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 6;
  pointer-events: none;
}
.col-wipe::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--sand); box-shadow: 0 0 0 1px rgba(10, 9, 7, .25);
}
.col-wipe b {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  font-weight: 400; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
  background: var(--sand); padding: 6px 9px 5px; border-radius: 3px;
}
.col-leg li { transition: opacity .3s cubic-bezier(.23, 1, .32, 1); }
@media (max-width: 899px) {
  .col-sc.col-anim .col-figs { height: auto; width: 100%; max-width: 520px; aspect-ratio: 3 / 4; }
  /* telephone : l'etiquette de coupe est un peu plus grande (10 px mini) */
  .col-wipe b { font-size: 10px; letter-spacing: .14em; padding: 7px 10px 6px; }
}
/* petit cadre (telephone, tablette portrait, ecran bas : 210-370 px) : il ne
   loge pas les deux references cote a cote en haut ; « A · Fermée » descend
   en bas a droite, « B · Ouverte » reste en haut a gauche : le trait de
   coupe ne les entremele plus. */
@media (max-width: 899px), (max-width: 1100px) and (max-height: 500px) {
  .col-sc.col-anim .col-fa .ref { top: auto; bottom: 12px; }
}
/* telephone a l'horizontale (ecran bas) : le cadre tient dans l'ecran */
@media (max-width: 1100px) and (max-height: 500px) {
  .col-sc.col-anim .col-figs { height: max(240px, calc(100vh - 110px)); width: auto; max-width: 100%; }
  .vu.vu-on { --vu-h: max(170px, calc(100vh - 250px)); }
}

/* ---- 8. BANDE « VU CHEZ NOS CLIENTS » ---------------------------------------
   vu-js : le script est la (jauge de progression active).
   vu-on : grand ecran, la bande est epinglee et avance avec le defilement. */
.vu.vu-js .vu-prog { display: block; }
.vu.vu-on { --vu-h: clamp(260px, calc(100vh - 400px), 620px); }
.vu.vu-on .vu-pin {
  height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(64px, 8vh, 88px);
}
.vu.vu-on .vu-pin > .wrap { width: 100%; }
.vu.vu-on .vu-sc { overflow: hidden; scroll-snap-type: none; padding-bottom: 0; }
.vu.vu-on .vu-sc:focus-visible { outline: none; }
.vu.vu-on .vu-ph img { left: -7%; width: 114%; }
.vu.vu-on .vh-m { display: none; }
.vu.vu-on .vh-d { display: inline; }

/* ---- 9. ANIMATIONS REDUITES -------------------------------------------------
   GSAP n'est jamais charge dans ce cas : aucune classe ci-dessus n'est posee.
   L'entree CSS du hero : traits et calque poses d'emblee, les cases du
   cartouche gardent leur seul fondu (aucun deplacement). */
@media (prefers-reduced-motion: reduce) {
  .mo-intro::before,
  .mo-intro > .mo-ln,
  .pl-mm.mo-intro-grille,
  .phero.pl .pl-ref > i { animation: none !important; }
  .phero.pl .pl-cart > div { animation-name: mo-fondu !important; }
}
html.doux .mo-intro::before,
html.doux .mo-intro > .mo-ln,
html.doux .pl-mm.mo-intro-grille,
html.doux .phero.pl .pl-ref > i { animation: none !important; }
html.doux .phero.pl .pl-cart > div { animation-name: mo-fondu !important; }
html.doux .mo-cadre::before { opacity: .58; }
html.doux .mo-cadre > .mo-ln,
html.doux .sec-head.mo-fil::before,
html.doux .cotes.mo-cotes > div::before,
html.doux .mo-ligne li::after,
html.doux .hrole.mo-hr::before { transform: none !important; }

/* ---- 10. SIEGES ERGONOMIQUES (#sieges) — passe du 07/10 ---------------------
   Mise en page de la section (pourquoi le siege compte, planche 3D des six
   reglages, sieges Sedus et Rim). Tout est visible sans JS et sans GSAP :
   les filets tracés lisent --mo-k, qui vaut 1 par defaut ; seule la scene 14
   de scenes-mobilier.js le pose a 0 avant de le tracer.
   Les visuels fabricants ont un fond exactement --paper : ils restent poses
   sur --paper (jamais sur --paper2 ni sur blanc), le carre ne se voit pas.
   Telephone : cartouche puis raisons en colonne, planche 3D puis cartes de
   reglages a faire glisser, puis une bande a faire glisser par marque. */
#sieges .sg-pq {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap); align-items: start;
}
#sieges .sg-lede { margin: 0; }

/* le cartouche des reperes */
.sg-cart {
  border: 1px solid var(--line2); border-radius: 6px; overflow: hidden;
  background: #fbfaf7;
}
.sg-cart-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--paper2);
  font-family: var(--mono); font-size: 9px; line-height: 1.5; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tech);
}
.sg-cart-hd b {
  font-weight: 500; color: var(--ink); letter-spacing: .15em; padding: 3px 8px 2px;
  border: 1px solid var(--line2); border-radius: 3px; background: var(--white);
}
.sg-ks { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.sg-k {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  column-gap: clamp(16px, 1.8vw, 26px); align-items: center;
  margin: 0; padding: clamp(16px, 2vh, 22px) 18px;
}
.sg-k::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
  background: var(--line); pointer-events: none;
  transform: scaleX(var(--mo-k, 1)); transform-origin: left center;
}
.sg-k-n {
  font-family: var(--disp); font-weight: 900; font-size: clamp(28px, 2.7vw, 40px);
  letter-spacing: -.035em; line-height: 1; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sg-k-n sup { font-size: .42em; letter-spacing: 0; vertical-align: top; position: relative; top: .1em; margin-left: .04em; }
.sg-k-l { font-size: 14px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.sg-src {
  margin: 0; padding: 12px 18px 13px;
  font-family: var(--mono); font-size: 9px; line-height: 1.6; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.sg-src a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2);
  text-underline-offset: 3px; transition: text-decoration-color .3s var(--ease);
}

/* les trois raisons A, B, C */
.sg-raisons {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 52px); margin-top: clamp(56px, 8.5vh, 108px);
}
.sg-r { position: relative; padding-top: 18px; min-width: 0; }
.sg-r::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  pointer-events: none; transform: scaleX(var(--mo-k, 1)); transform-origin: left center;
}
.sg-r-no {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--line2); border-radius: 3px; background: var(--white);
  font-family: var(--mono); font-size: 10px; line-height: 1; letter-spacing: .04em; color: var(--ink);
}
.sg-r h3 {
  margin: 14px 0 10px; font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(16px, 1.35vw, 19px); letter-spacing: -.005em; line-height: 1.2; color: var(--ink);
  text-wrap: balance;
}
.sg-r p { max-width: 46ch; font-size: 15px; line-height: 1.66; color: var(--ink2); text-wrap: pretty; }
.sg-r p b { color: var(--ink); font-weight: 600; }

/* intertitres des deux blocs (reglages, sieges de travail) */
.sg-bloc { margin-top: clamp(100px, 14vh, 184px); }
.sg-sub {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 14px var(--gap); align-items: end;
}
.sg-h {
  margin: 0; font-family: var(--disp); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 42px); letter-spacing: -.04em; line-height: .98; color: var(--ink);
  text-wrap: balance;
}
.sg-h .lg { overflow: visible; clip-path: inset(-.26em -.3em 0 -.3em); }
.sg-p { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.68; color: var(--ink2); text-wrap: pretty; }
.sg-p b { color: var(--ink); font-weight: 600; }
.sg-regl .s3d { margin-top: clamp(32px, 4.6vh, 58px); }
/* planche collante : sous l'en-tete reduit (88 px) avec un peu d'air ; sur
   un ecran bas (portable 768 px), la vue carree retrecit pour que la planche
   collante tienne entiere a l'ecran, pied compris */
#sieges .s3d { --s3d-haut: 92px; }
@media (min-width: 960px) {
  #sieges .s3d-vue { max-width: min(680px, max(400px, calc(100vh - 236px))); }
}
/* tablette en hauteur : la vue carree laisse la place aux cartes de reglage,
   pour voir le siege bouger pendant qu'on fait glisser les cartes (768 x 1024 :
   planche et carte tiennent ensemble a l'ecran). Sans effet sur telephone,
   ou la largeur limite deja la vue. */
@media (max-width: 959px) {
  #sieges .s3d-vue { max-width: min(680px, max(300px, calc(100vh - 430px))); }
}

/* les sieges de travail, par marque */
.sg-gal .tech-note { margin-bottom: clamp(18px, 2.6vh, 30px); }
.sg-mq { margin-top: clamp(44px, 6.4vh, 76px); }
.sg-mq + .sg-mq { margin-top: clamp(52px, 7.4vh, 92px); }
.sg-mq-hd { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 14px; }
.sg-mq-hd::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink);
  pointer-events: none; transform: scaleX(var(--mo-k, 1)); transform-origin: left center;
}
.sg-logo { display: block; width: auto; height: 28px; }
.sg-logo-rim { height: 25px; }
.sg-mq-pays, .sg-mq-n {
  font-family: var(--mono); font-size: 9.5px; line-height: 1.6; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mute);
}
.sg-mq-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.sg-glisse { display: none; }

/* trois colonnes egales : chaque carte a la meme marge des deux cotes, la
   bande deborde d'autant pour que les visuels extremes tombent sur le bord */
.sg-strip {
  --sg-m: clamp(16px, 2.2vw, 34px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 calc(-1 * var(--sg-m)); padding: 0; list-style: none;
}
.sg-c { position: relative; min-width: 0; padding: clamp(18px, 2.2vw, 30px) var(--sg-m) clamp(22px, 2.6vw, 34px); }
/* filet vertical entre deux sieges : il se trace avec la scene (--mo-k) */
.sg-c + .sg-c::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--line);
  pointer-events: none; transform: scaleY(var(--mo-k, 1)); transform-origin: center top;
}
.sg-ph { position: relative; display: block; aspect-ratio: 1 / 1; }
/* reperes d'angle, comme la planche 3D */
.sg-ph::before {
  content: ""; position: absolute; inset: 4px; z-index: 1; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left top / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / 1px 12px no-repeat;
}
.sg-ph img {
  width: 100%; height: 100%; object-fit: contain; background: var(--paper);
  transform-origin: 50% 62%; transition: transform .8s var(--ease);
}
/* etiquette en haut a DROITE : sur les six visuels, le haut du dossier occupe
   28 a 57 % de la largeur ; en haut a gauche, l'etiquette mordait sur le
   dossier des 1024 px (et franchement a 768 et sur telephone) */
.sg-ref {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--mono); font-size: 8.5px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding: 3px 8px 2px; border: 1px solid var(--line2); border-radius: 3px;
  background: rgba(251, 250, 247, .9); font-variant-numeric: tabular-nums;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sg-nm {
  margin: clamp(10px, 1.4vw, 18px) 0 0; font-family: var(--disp); font-weight: 800;
  font-size: clamp(21px, 1.9vw, 28px); letter-spacing: -.025em; line-height: 1.05; color: var(--ink);
}
.sg-mk {
  display: block; margin-bottom: 8px; font-family: var(--mono); font-weight: 400; font-size: 9px;
  line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.sg-acc { margin: 10px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }

/* essai au showroom */
.sg-essai {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px 44px;
  margin-top: clamp(44px, 6.4vh, 80px); padding: clamp(22px, 2.6vw, 34px);
  border: 1px dashed var(--line2); border-radius: 6px; background: var(--paper2);
}
.sg-essai-t { flex: 1 1 420px; max-width: 72ch; font-size: 15px; line-height: 1.68; color: var(--ink2); }
.sg-essai-t b { color: var(--ink); font-weight: 600; }
.sg-essai-lab {
  display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mute);
}
.sg-credit {
  margin-top: 16px; font-family: var(--mono); font-size: 9px; line-height: 1.8; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mute);
}

@media (hover: hover) and (pointer: fine) {
  .sg-src a:hover { text-decoration-color: var(--ink); }
  .sg-c:hover .sg-ph img { transform: translateY(-1.5%) scale(1.035); }
  .sg-c:hover .sg-ref { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}

/* tablettes et telephones : etiquettes mono lisibles (>= 10 px), une colonne
   pour l'introduction, les raisons en lignes titre | texte */
@media (max-width: 1100px) {
  .sg-cart-hd, .sg-src, .sg-mq-pays, .sg-mq-n, .sg-ref, .sg-mk, .sg-essai-lab, .sg-credit { font-size: 10px; }
  .sg-cart-hd, .sg-src, .sg-ref, .sg-mk, .sg-credit { letter-spacing: .12em; }
  #sieges .sg-pq { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vh, 40px); }
  .sg-raisons { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(44px, 6vh, 64px); }
  .sg-r { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr;
    column-gap: var(--gap); align-items: start; padding: 18px 0 26px; }
  .sg-r-no { grid-column: 1; grid-row: 1; }
  .sg-r h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .sg-r p { grid-column: 2; grid-row: 1 / span 2; max-width: 60ch; }
}
/* tablettes : les trois reperes cote a cote */
@media (min-width: 761px) and (max-width: 1100px) {
  .sg-ks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-k { grid-column: auto; display: block; padding: 20px 18px 22px; }
  .sg-k + .sg-k { border-left: 1px solid var(--line); }
  .sg-k::after { display: none; }
  .sg-k-l { display: block; margin-top: 10px; }
  .sg-ks { border-bottom: 1px solid var(--line); }
  /* visuels etroits (3 colonnes) : l'etiquette se serre dans son angle */
  .sg-ref { top: 8px; right: 8px; padding: 3px 6px 2px; letter-spacing: .1em; }
}
@media (max-width: 760px) {
  /* telephone : la valeur au-dessus de son libelle (la colonne des valeurs
     prenait la moitie de la largeur et serrait les libelles sur cinq lignes) */
  .sg-k { display: block; padding: 16px 16px 17px; }
  .sg-k::after { left: 16px; right: 16px; }
  .sg-k-n { display: block; font-size: 30px; }
  .sg-k-l { display: block; margin-top: 8px; font-size: 14px; }
  .sg-cart-hd { padding: 10px 16px; }
  .sg-src { padding: 11px 16px 12px; }
  .sg-r { display: block; padding: 16px 0 24px; }
  .sg-r h3 { margin: 12px 0 8px; }
  .sg-bloc { margin-top: clamp(72px, 10vh, 96px); }
  .sg-sub { grid-template-columns: minmax(0, 1fr); }
  .sg-glisse { display: inline; }
  .sg-mq-n { margin-left: 0; flex-basis: 100%; }
  /* une bande a faire glisser par marque, accrochee carte par carte */
  .sg-strip {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)); padding: 16px var(--pad) 6px; scroll-padding-inline: var(--pad);
  }
  .sg-strip::-webkit-scrollbar { display: none; }
  .sg-c {
    flex: 0 0 min(80%, 330px); scroll-snap-align: start;
    padding: 12px 14px 18px; border: 1px solid var(--line); border-radius: 6px;
  }
  .sg-c + .sg-c::before { display: none; }
  .sg-ref { top: 8px; right: 8px; }
  .sg-nm { font-size: 22px; }
  .sg-essai { flex-direction: column; align-items: flex-start; }
  .sg-essai-t { flex: 0 1 auto; }
}

/* animations reduites : traits poses, rien ne bouge */
html.doux .sg-k::after,
html.doux .sg-r::before,
html.doux .sg-c::before,
html.doux .sg-mq-hd::after { transform: none !important; }
html.doux .sg-ph img { transition: none; }