@charset "utf-8";
/* ==========================================================================
   EGCCLIM — feuille intégrale de la page d'atterrissage.
   Copie fidèle de la feuille intégrée de la page approuvée (elle contient
   son propre socle de variables et de composants). Chargée UNIQUEMENT sur
   la page d'accueil, avant site.css — même ordre que la page approuvée.
   ========================================================================== */

/* ============================================================
   1. SYSTÈME DE DESIGN — VARIABLES, RESET, TYPOGRAPHIE

   Bleus relevés dans les visuels Midea, pas choisis à la main :
     #00204F  teinte sombre dominante de design/ref-ieco-a2plus-r32.jpg
     #009DE4  cyan Midea dominant de design/ref-tableau-comparatif.jpg
   Le cyan ne passe pas le contraste AA sur blanc (3,02:1). Il reste
   donc réservé aux aplats, filets et repères, et un bleu assombri
   (#0075B4, 5,00:1 sur blanc, 4,63:1 sur bleu pâle) porte le texte
   et les boutons. Sur bleu profond, le cyan atteint 5,26:1 et
   redevient utilisable en texte.

   Titres en Manrope, texte en Inter : la page est dense en chiffres
   et Inter possède les meilleurs chiffres tabulaires du duo.
   ============================================================ */
:root{
  --blanc:#FFFFFF;
  --bleu-profond:#00204F;          /* sections pleine largeur */
  --bleu-encre:#001938;            /* dégradés, pied de page */
  --bleu-vif:#009DE4;              /* aplats, filets, repères */
  --bleu-action:#0075B4;           /* boutons, liens, icônes, texte bleu */
  --bleu-action-h:#005C90;         /* survol des boutons */
  --bleu-pale:#F2F7FB;             /* sections alternées */
  --bleu-pale-2:#E6EFF7;           /* panneaux produit */
  --texte-fort:#0A2540;            /* titres */
  --texte:#26405C;                 /* texte courant : 10,7:1 sur blanc, 9,9:1 sur bleu pale */
  --vert:#00A868;                  /* coches uniquement */
  --vert-fort:#017A49;             /* « en stock » et libellés verts */
  --line:#DDE6EF;
  --radius:16px;
  --radius-sm:10px;
  --maxw:1200px;
  --pad-section:56px;              /* mobile */
  --shadow:0 4px 24px rgba(10,37,64,.08);
  --shadow-hover:0 14px 36px rgba(10,37,64,.14);
  --shadow-cta:0 8px 22px rgba(0,117,180,.26);

  /* Alias historiques : les règles écrites avant la refonte
     continuent de résoudre vers la nouvelle palette. */
  --surface:var(--bleu-pale);
  --blue:var(--bleu-vif);
  --blue-deep:var(--bleu-action);
  --navy:var(--texte-fort);
  --navy-soft:var(--texte);
  --green:var(--vert);
  --blue-wash:rgba(0,157,228,.07);

  /* ---- Système typographique ----
     Deux familles, pas trois : Manrope porte les titres, les prix et les
     grands nombres techniques ; Inter porte tout le reste, y compris la
     navigation, qui reposait auparavant sur une troisieme famille.

     Les COULEURS sont des variables à portée contextuelle : les sections
     bleu profond les redéfinissent (voir « 1 bis »), donc un titre posé
     sur fond sombre reste blanc sans règle dédiée. Ne jamais coder une
     couleur de texte en dur sur un sélecteur de titre. */
  --font-heading:'Manrope','Inter',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --type-hero:clamp(2.125rem, 4.2vw, 3.05rem);
  --type-page-title:clamp(2rem, 4vw, 2.85rem);
  --type-section-title:clamp(1.9rem, 3.5vw, 2.75rem);
  --type-card-title:1.25rem;
  --type-intro:1.125rem;
  --type-body:1.0625rem;            /* 17px */
  --type-small:.9375rem;            /* 15px */
  --type-eyebrow:.8125rem;          /* 13px */

  --leading-title:1.04;
  --leading-section-title:1.1;
  --leading-card-title:1.3;
  --leading-intro:1.65;
  --leading-body:1.7;
  --leading-legal:1.75;
  --leading-small:1.55;

  /* Alias contextuels : ils suivent --texte-fort et --texte, qui sont déjà
     redéfinis dans les sections sombres et rétablis dans les cartes
     blanches qui y sont posées. */
  --text-heading:var(--texte-fort);
  --text-body:var(--texte);
  --text-legal:#2d4a66;
  --text-secondary:#48647d;
  --text-muted:#5b7288;
  --text-eyebrow:#1c4568;
  --text-nav:#183653;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanc);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-action);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--text-heading);margin:0;font-weight:700;
  line-height:var(--leading-section-title);letter-spacing:-.025em;
}
h1{font-size:var(--type-hero);line-height:var(--leading-title);letter-spacing:-.038em;font-weight:800}
/* Marge portée par h2 lui-même : deux sections (silence, pilotage) placent
   leur titre hors d'un bloc .head et se retrouvaient sans espace sous le titre. */
h2{font-size:var(--type-section-title);line-height:var(--leading-section-title);letter-spacing:-.032em;margin-bottom:16px}
h3{font-size:var(--type-card-title);line-height:var(--leading-card-title);letter-spacing:-.015em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}

/* Chiffres alignés partout : la page est un tableau de bord */
[data-count],.plq__n,.calc__row b{font-variant-numeric:tabular-nums}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:var(--pad-section) 0}
.section--alt{background:var(--bleu-pale)}
.section--line{border-top:1px solid var(--line)}
.lede{color:var(--text-body);font-size:var(--type-intro);line-height:var(--leading-intro);max-width:60ch}

/* Sur-titre : filet cyan court puis capitales espacées.
   Même règle que les sur-titres des pages secondaires : Inter, 13px,
   .12em, navy. La couleur passe par un jeton contextuel, sinon le
   sur-titre disparaîtrait sur les sections bleu profond. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-body);
  font-size:var(--type-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-eyebrow);margin:0 0 16px;line-height:1.3;
}
.eyebrow::before{
  content:"";flex:none;width:26px;height:3px;border-radius:2px;
  background:var(--bleu-vif);
}
.head--center .eyebrow{justify-content:center}
.head{margin-bottom:40px}
.head--tight{margin-bottom:28px}
.head h2{margin-bottom:16px}

/* ---- Plaque signature : un chiffre traité comme sur la plaque
        de caractéristiques au dos d'un appareil ---- */
.plq{
  background:var(--bleu-pale);border:1px solid var(--line);
  border-top:3px solid var(--bleu-vif);
  border-radius:var(--radius-sm);padding:20px 18px;text-align:left;
}
.plq__n{
  display:block;font-family:var(--font-heading);
  font-size:1.75rem;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--text-heading);
  font-variant-numeric:tabular-nums;
}
.plq__l{
  display:block;margin-top:8px;font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--texte);line-height:1.4;
}

/* ---- Boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  /* 20px sur un bouton de 63px de haut : franchement adouci, mais encore un
     rectangle — une pilule (31px) banaliserait la marque. Un cran plus doux
     que les 18px des cartes de chiffres posees juste dessous, l'ecart se
     lit comme une hierarchie et non comme un hasard. */
  padding:16px 32px;border-radius:20px;border:1px solid transparent;
  /* Interface en Inter : Manrope reste aux titres et aux nombres. */
  font-family:var(--font-body);
  font-size:16px;line-height:1;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease,
             transform .25s ease, box-shadow .25s ease;
}
.btn--primary{background:var(--bleu-action);color:#fff;box-shadow:var(--shadow-cta)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{text-decoration:none}
  .btn--primary:hover{background:var(--bleu-action-h);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,117,180,.32)}
}
/* Flèche qui glisse de 4px au survol */
.btn--primary::after{
  content:"";flex:none;width:17px;height:17px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease;
}
@media (hover:hover) and (pointer:fine){.btn--primary:hover::after{transform:translateX(4px)}}
.btn--ghost{background:#fff;color:var(--texte-fort);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{border-color:var(--bleu-action);color:var(--bleu-action);background:var(--bleu-pale)}}

/* Aucun delai sur un etat survole, quelle que soit la position de la carte
   dans sa grille : c'est la garantie que le fond et le texte basculent
   ensemble et immediatement. */
.card:hover,.rev:hover,.place__list li:hover,.hero__specs>div:hover,
.fn4__body:hover,.fn4__card:hover{transition-delay:0s}

/* ---- Éléments récurrents ---- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
  transition:background-color .18s ease-out, color .18s ease-out,
             transform .18s ease-out, box-shadow .18s ease-out,
             border-color .18s ease-out;
  transition-delay:0s;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:#C9DAEA}
}
.grid{display:grid;gap:20px}
/* Rarete : la ligne de stock passe au rouge et la pastille respire.
   Meme taille, meme place dans le hero, seule la couleur change. */
/* La rangee de .hero__meta a un gap de 10px : les 2px de marge portent
   l'ecart sous la ligne de stock a 12px, sans toucher aux deux suivantes. */
.stock{
  display:inline-flex;align-items:center;gap:10px;
  font-size:19px;font-weight:700;color:#D93025;margin-bottom:2px;
}
.stock::before{
  content:"";width:11px;height:11px;border-radius:50%;background:#D93025;flex:none;
  animation:stockPulse 2s ease-in-out infinite;
}
@keyframes stockPulse{
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@media (prefers-reduced-motion: reduce){
  .stock::before{animation:none;opacity:1}
}
.check{color:var(--vert);flex:none}
.note{font-size:15px;color:var(--texte);line-height:1.6}
.todo{
  color:var(--bleu-action);background:rgba(0,157,228,.08);
  border:1px dashed rgba(0,117,180,.5);border-radius:6px;
  padding:1px 7px;font-size:.9em;font-weight:600;white-space:nowrap;
}

/* Badge icône circulaire/arrondi, 56px, fond bleu pâle */
.ico{
  flex:none;width:56px;height:56px;border-radius:16px;
  background:var(--bleu-pale-2);color:var(--bleu-action);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s ease, color .25s ease;
}

/* ============================================================
   1 bis. SECTIONS BLEU PROFOND
   Les variables de texte sont redéfinies dans la portée de la
   section : tout composant descendant s'adapte sans règle dédiée.
   ============================================================ */
.section--deep,.sil{
  background:var(--bleu-profond);
  color:#fff;
  --texte-fort:#FFFFFF;
  --texte:rgba(255,255,255,.84);
  --navy:#FFFFFF;
  --navy-soft:rgba(255,255,255,.84);
  --line:rgba(255,255,255,.16);
  --surface:rgba(255,255,255,.05);
  --bleu-pale:rgba(255,255,255,.05);
  --bleu-pale-2:rgba(0,157,228,.14);
  --bleu-action:var(--bleu-vif);   /* 5,26:1 sur bleu profond */
  --blue-deep:var(--bleu-vif);
  /* Le sur-titre et la navigation ne peuvent pas rester navy ici : leurs
     jetons basculent avec le reste. --text-heading et --text-body suivent
     --texte-fort et --texte, déjà redéfinis ci-dessus. */
  --text-eyebrow:var(--bleu-vif);
  --text-nav:#FFFFFF;
  --text-legal:rgba(255,255,255,.84);
  --text-secondary:rgba(255,255,255,.78);
  --text-muted:rgba(255,255,255,.70);
}
/* Sur le bleu profond, le libelle reste blanc dans tous les etats : le navy
   d'origine se lisait a peine sur le cyan du bouton. La fleche n'est plus
   redefinie ici, elle reprend donc celle de .btn--primary, deja blanche. */
.section--deep .btn--primary,.sil .btn--primary{background:var(--bleu-vif);color:#fff}
.section--deep .btn--primary:hover,.section--deep .btn--primary:focus,
.section--deep .btn--primary:focus-visible,.section--deep .btn--primary:active,
.sil .btn--primary:hover,.sil .btn--primary:focus,
.sil .btn--primary:focus-visible,.sil .btn--primary:active{color:#fff}
.section--deep .btn--primary:hover,.sil .btn--primary:hover{background:#3FBCF0}
.section--deep .todo{background:rgba(0,157,228,.16);border-color:rgba(0,157,228,.55);color:#8FD8F7}

/* Cartes blanches posées sur le bleu : on rétablit la palette claire */
.section--deep .panel,
.section--deep .rev,
.section--deep .place__list li,
.section--deep .callout{
  --texte-fort:#0A2540;
  --texte:#26405C;
  --navy:#0A2540;
  --navy-soft:#26405C;
  --line:#DDE6EF;
  --surface:#F2F7FB;
  --bleu-pale:#F2F7FB;
  --bleu-pale-2:#E6EFF7;
  --bleu-action:#0075B4;
  --blue-deep:#0075B4;
  /* Carte blanche posée sur le bleu : la palette claire revient, jetons
     typographiques compris. */
  --text-eyebrow:#1c4568;
  --text-nav:#183653;
  --text-legal:#2d4a66;
  --text-secondary:#48647d;
  --text-muted:#5b7288;
  color:var(--texte);
}
.section--deep .panel .btn--primary{background:#0075B4;color:#fff}
.section--deep .panel .btn--primary::after{
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
}
.section--deep .panel .btn--primary:hover{background:#005C90}
.section--deep .panel .todo{background:rgba(0,157,228,.08);border-color:rgba(0,117,180,.5);color:#0075B4}

/* ============================================================
   2. ANIMATIONS — entrées au scroll, sorties rapides
   ============================================================ */
/* Entree : opacity + translate. Le survol, lui, n'agit que sur transform,
   de sorte qu'une carte survolable puisse declarer les deux sans que l'une
   annule l'autre. */
/* Entree portee par une animation, non par une transition : une
   transition-delay reste attachee a l'element une fois l'entree finie et
   retardait d'autant le survol (jusqu'a 720ms sur la quatrieme carte).
   animation-delay ne peut pas fuir vers le survol.
   Le mouvement utilise translate, jamais transform, pour que le survol
   garde transform pour lui seul. */
@keyframes rise    {from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes riseFar {from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
.reveal{opacity:0}
.reveal.is-visible{animation:rise 1s ease-out both}
.stagger>*{opacity:0}
.stagger.is-visible>*{animation:rise 1s ease-out both}
/* Montee en escalier : 40px de course, 240ms d'ecart */
.stagger--climb.is-visible>*{animation-name:riseFar}
.stagger.is-visible>*:nth-child(1){animation-delay:0ms}
.stagger.is-visible>*:nth-child(2){animation-delay:240ms}
.stagger.is-visible>*:nth-child(3){animation-delay:480ms}
.stagger.is-visible>*:nth-child(4){animation-delay:720ms}
.stagger.is-visible>*:nth-child(5){animation-delay:960ms}
.stagger.is-visible>*:nth-child(6){animation-delay:1200ms}
.stagger.is-visible>*:nth-child(7){animation-delay:1440ms}
.stagger.is-visible>*:nth-child(8){animation-delay:1680ms}


@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;translate:none !important}
  .hero__parallax{transform:none !important}
  .hero__fade{opacity:1 !important}
  .zoom:hover img{transform:none !important}
  .card:hover,.rev:hover{transform:none !important}
  /* Le panneau mobile apparaît d'un coup, sans glissement ni fondu */
  .navpanel,.navscrim,.header__burger i{transition:none !important}
  .navpanel{transform:none !important}
  /* Les entrées du menu sont posées d'emblée, sans cascade */
  .navpanel__nav a{opacity:1 !important;translate:none !important}
}

/* ============================================================
   3. HEADER STICKY
   Hauteur fixe --hh, identique avant et après défilement : seuls
   le filet et l'ombre apparaissent au défilement. --hh sert aussi
   d'appui aux ancres et au panneau mobile.
   ============================================================ */
:root{
  --hh:72px;
  /* Prélevés au pixel dans le fichier logo : navi du mot « optimea »
     et bleu du rond Midea. Portés par la navigation uniquement — le
     reste de la page garde --bleu-vif (#009DE4). */
  --logo-navy:#253454;
  --logo-blue:#0894D2;
}

.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  /* Filet posé dès le repos mais transparent : il se révèle au défilement
     sans décaler la mise en page d'un pixel. */
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease;
}
.header .wrap{max-width:1280px}
.header__in{
  position:relative;display:flex;align-items:center;gap:16px;
  height:var(--hh);
}
.header.is-stuck{
  border-bottom-color:rgba(10,37,64,.10);
  box-shadow:0 6px 24px rgba(10,37,64,.11);
}

/* ---- Logo ----
   Logo EGCClim, fichier détourné de ses marges transparentes :
   rapport 1567x254, soit 6,17:1. Il est dimensionné par la LARGEUR et
   non par la hauteur : c'est la largeur qui compte dans un bandeau, et
   la hauteur suit toute seule. Le bloc étant nettement plus large que
   l'ancien, les largeurs sont relevées à chaque palier pour retrouver
   une hauteur optique lisible. Aucun fond, aucune bordure, aucune
   ombre, aucune lueur ; la transparence du fichier est conservée. */
.header__logo{
  --logo-w:176px;
  display:flex;align-items:center;flex:none;
  width:var(--logo-w);
  transition:width .3s ease;
}
.header__logo img{
  display:block;width:100%;height:auto;max-width:none;
  /* Jamais d'étirement ni de recadrage, quelle que soit la boîte. */
  object-fit:contain;
}

.header__nav{display:none}
.header__right{display:flex;align-items:center;gap:16px;flex:none}
.header__stock{display:none}

/* ---- Panier ----
   Icone au trait, meme cible de 44px que le hamburger a cote duquel
   elle se pose sur mobile. Le trait suit color, d'ou le survol en une
   seule declaration. */
.header__cart{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border-radius:10px;color:var(--logo-navy);
  transition:color .2s ease;
}
.header__cart svg{display:block}
@media (hover:hover) and (pointer:fine){
  .header__cart:hover{color:var(--logo-blue)}
}

/* ---- Bouton hamburger, mobile seulement ----
   Dans le flux du groupe d'action : c'est ce groupe, et non un
   calage absolu, qui le tient a droite du bandeau. */
.header__burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;
  background:none;border:0;border-radius:10px;cursor:pointer;
  color:var(--logo-navy);
}
/* Cale sur le panier : 30px de large, barres a 2,5px, soit l'epaisseur
   rendue du trait SVG une fois le viewBox de 24 mis a l'echelle en 30px.
   Les trois barres se rejoignent a 10px, le centre exact de la boite. */
.header__burger-box{position:relative;display:block;width:30px;height:22.5px}
.header__burger i{
  position:absolute;left:0;width:30px;height:2.5px;border-radius:2px;
  background:currentColor;
  transition:transform .3s ease, opacity .2s ease;
}
.header__burger i:nth-child(1){top:0}
.header__burger i:nth-child(2){top:10px}
.header__burger i:nth-child(3){top:20px}
.header__burger.is-open i:nth-child(1){transform:translateY(10px) rotate(45deg)}
.header__burger.is-open i:nth-child(2){opacity:0;transform:scaleX(.3)}
.header__burger.is-open i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ---- Panneau de navigation mobile ----
   Enfant absolu de l'en-tête collante : il suit la hauteur du bandeau
   sans avoir à la recalculer en JS. */
.navpanel{
  position:absolute;top:100%;left:0;right:0;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 24px 48px rgba(10,37,64,.18);
  padding:22px 20px 34px;
  max-height:calc(100vh - var(--hh));
  max-height:calc(100dvh - var(--hh));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;opacity:0;transform:translateY(-14px);
  transition:transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
}
.navpanel.is-open{
  visibility:visible;opacity:1;transform:translateY(0);
  transition:transform .3s ease, opacity .3s ease;
}
.navpanel__nav{display:flex;flex-direction:column}
.navpanel__nav a{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:17px 2px;
  font-family:var(--font-body);
  font-size:16px;font-weight:600;letter-spacing:-.005em;
  color:var(--text-nav);
  /* Chaque entrée monte et se révèle à son tour ; les délais ne vivent
     que dans l'état ouvert, pour que la fermeture soit d'un seul bloc. */
  opacity:0;translate:0 16px;
  transition:opacity .3s ease, translate .3s ease, color .2s ease;
}
.navpanel__nav a:not(:last-child){
  border-bottom:1px solid rgba(10,37,64,.08);
}
.navpanel__nav a:hover{text-decoration:none}
.navpanel.is-open .navpanel__nav a{opacity:1;translate:0 0}
.navpanel.is-open .navpanel__nav a:nth-child(1){transition-delay:40ms}
.navpanel.is-open .navpanel__nav a:nth-child(2){transition-delay:100ms}
.navpanel.is-open .navpanel__nav a:nth-child(3){transition-delay:160ms}
.navpanel.is-open .navpanel__nav a:nth-child(4){transition-delay:220ms}
.navpanel.is-open .navpanel__nav a:nth-child(5){transition-delay:280ms}
.navpanel.is-open .navpanel__nav a:nth-child(6){transition-delay:340ms}

/* Chevron dessiné au trait : pas d'image à charger pour six flèches */
.navpanel__nav a::after{
  content:"";flex:none;width:8px;height:8px;
  border-right:2px solid rgba(10,37,64,.30);
  border-top:2px solid rgba(10,37,64,.30);
  rotate:45deg;margin-right:4px;
  transition:border-color .2s ease;
}
.navpanel__nav a.is-active{
  color:var(--logo-blue);
  box-shadow:inset 0 -2px 0 var(--logo-blue);
}
.navpanel__nav a.is-active::after{
  border-right-color:var(--logo-blue);
  border-top-color:var(--logo-blue);
}

/* ---- Voile derrière le panneau ---- */
.navscrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(10,37,64,.42);
  visibility:hidden;opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.navscrim.is-open{visibility:visible;opacity:1;transition:opacity .3s ease}

/* ---- Ancres : aucune section ne passe sous le bandeau collant ----
   100px au minimum, et davantage si l'en-tete est plus haute que
   88px. Ecrit en ID : la regle generique section[id] du bloc mobile,
   plus bas dans le fichier, ne peut pas la ramener a 70px. */
#apercu,#comparatif,#fonctions,#installation,#fiche-technique,#avis,#faq{
  scroll-margin-top:max(100px, calc(var(--hh) + 12px));
}

/* Mobile : logo à gauche, groupe d'action poussé à droite par la marge
   automatique. Panier puis hamburger, 18px entre les deux. */
@media (max-width:899px){
  .header__in{justify-content:flex-start}
  .header__right{margin-left:auto;gap:18px}
}
@media (max-width:359px){.header__logo{--logo-w:150px}}

@media (min-width:900px){
  :root{--hh:88px}
  .header__burger,.navpanel,.navscrim{display:none}
  .header__in{justify-content:flex-start}
  /* En 17px les six libellés pèsent 478px : l'écart de 40px ne rentre
     qu'au-delà de ~1180px. Logo, écart et bouton sont donc fluides
     plutôt que paliers, pour qu'aucune largeur ne bute. */
  .header__logo{--logo-w:clamp(190px, 15vw, 226px)}

  /* margin:0 auto : la barre de liens se centre dans l'espace libre.
     Le margin-left du groupe de droite est prélevé avant ce partage :
     il garantit une respiration entre navigation et zone d'action. */
  .header__nav{
    display:flex;align-items:center;margin:0 auto;
    gap:clamp(12px, 10vw - 78px, 40px);
  }
  .header__right{margin-left:clamp(10px, 4vw - 26px, 44px)}

  /* Le bandeau passe a 88px : le panier peut respirer bien au-dela des
     30px du mobile. La boite suit pour garder l'icone au centre. */
  .header__cart{width:52px;height:52px}
  .header__cart svg{width:38px;height:38px}

  /* Au repos les liens sont posés à 88% du navi : assez soutenu pour
     paraître voulu, assez en retrait pour que l'actif se détache. */
  /* Inter, comme tout le reste de l'interface. Les deux couleurs du
     logo continuent de porter les états actif et survolé. */
  .header__nav a{
    position:relative;white-space:nowrap;line-height:1.2;
    font-family:var(--font-body);
    color:var(--text-nav);
    font-size:16px;font-weight:600;letter-spacing:-.005em;
    transition:color .2s ease;transition-delay:0s;
  }
  .header__nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
    background:var(--logo-blue);
    /* origine à gauche : le filet pousse depuis le début du mot */
    transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
  }
  .header__nav a:hover{color:var(--logo-blue);text-decoration:none}
  .header__nav a:hover::after{transform:scaleX(1)}
  .header__nav a.is-active{color:var(--logo-blue)}
  .header__nav a.is-active::after{transform:scaleX(1)}
}
/* Sous 1200px la place manque pour l'échelle complète : le logo et les
   liens se resserrent et « En stock » cède son espace à la navigation. */

/* ============================================================
   4. HERO
   Le panneau produit dépasse volontairement à droite : la grille
   de 1200px est rompue une fois, et .hero masque le débordement.
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 78% 0%, rgba(0,157,228,.12) 0%, rgba(0,157,228,0) 62%),
    linear-gradient(180deg,var(--bleu-pale) 0%, #FFFFFF 78%);
  padding:36px 0 52px;
}
/* ---- Décor unique et rideau d'ouverture ----
   Le calque couvre tout le hero, sur les deux paliers. Il est en
   position:absolute et .hero est le seul ancêtre positionné : ni le
   panneau produit ni la galerie n'ont besoin d'y toucher.
   Un calque z-index 0 positionné se peint AU-DESSUS du contenu de flux
   non positionné, d'où le z-index 1 rendu au contenu juste après. */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
/* inset:-1px : le retournement mobile ne laisse aucun cheveu clair sur
   les bords du masque. */
.hero__bg-img{
  position:absolute;inset:-1px;
  background-image:url("../images/hero-airflow-premium-desktop.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* ---- Palier mobile ----
   Le seuil suit celui de la mise en page (900px) et non 767px : entre
   768 et 899 le hero est déjà empilé, un décor paysage y serait recadré
   en bandeau central.

   Le visuel portrait n'est pas retourné ; il est agrandi à 165% de la
   largeur et ancré en haut. Sa colonne blanche nacrée tombe alors sur
   le titre, son cœur bleu exactement derrière la galerie produit, et
   son bas quitte le cadre avant le bloc d'achat. Repères mesurés du
   hero mobile : titre 5-25%, produit 26-52%, vignettes 54-62%,
   prix 60-68%, avantages 72-82%, cartes 83-97%. */
@media (max-width:899px){
  /* Le visuel portrait est retourné verticalement : son cœur bleu remonte
     derrière la galerie produit, et sa zone nacrée d'origine descend sous
     le bloc d'achat et les cartes de chiffres. Le retournement porte sur
     l'IMAGE seule — jamais sur le masque, le voile ou le contenu. */
  .hero__bg-img{
    background-image:url("../images/hero-airflow-premium-mobile-v4-reference.webp");
    background-size:cover;
    background-position:center;
    transform:scaleY(-1);
  }
  /* Voile nacré très léger sur le haut : le titre et le paragraphe
     restent lisibles alors que le bleu est passé au-dessus. Il s'efface
     avant la galerie, le bleu reste donc franc derrière le produit. */
  .hero__bg::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.22) 24%,
      transparent 42%);
  }
  /* Le liseré du rideau est vertical : il n'a plus de sens quand
     l'ouverture monte du bas vers le haut. */
  .hero__bg-edge{display:none}
}
/* Liseré lumineux du rideau : toute la largeur, lumière concentrée sur
   son bord droit. GSAP le fait glisser de -100% à 0 pendant l'ouverture,
   il suit donc exactement la limite du clip. Diffus sur 12% : aucune
   barre blanche franche. */
.hero__bg-edge{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  opacity:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 88%,
    rgba(168,222,255,.16) 96%,
    rgba(255,255,255,.38) 100%);
}
.hero__lead,.hero__buy,.hero__panel,.hero__specs{position:relative;z-index:1}
/* Aucune surface derrière la colonne de texte : pas de carte, pas de
   voile local, donc aucun bord droit qui viendrait couper le décor. */
.hero__lead{background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero__lead::before,.hero__lead::after{content:none;display:none}

/* Le contraste du texte est pris en charge par le calque de fond
   lui-même : un dégradé horizontal qui traverse tout le hero et s'éteint
   avant le produit. Aucune limite visible, aucun angle.
   Desktop seulement : sur une colonne mobile, c'est le voile nacré du
   haut qui joue ce rôle. */
@media (min-width:900px){
  .hero__bg::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.06) 42%,
      transparent 66%);
  }
}
.hero__bg-img{z-index:0}
.hero__bg-edge{z-index:2}

.hero__grid{display:grid;gap:32px;align-items:center}
/* Sans min-width:0, la bande de vignettes impose sa largeur à la colonne */
.hero__grid>*{min-width:0}
.hero h1{margin-bottom:20px}
/* Teinte propre au paragraphe du hero : un cran plus contrasté que le
   texte courant sur le décor clair, sans virer au presque-noir. Aucune
   surface, aucune ombre ni flou derrière lui — taille, interligne,
   largeur et marges inchangés. */
.hero__sub{font-size:18px;line-height:1.65;color:#294866;margin-bottom:30px;max-width:54ch}

/* Ligne d'achat : prix et bouton alignés sur le même axe. flex-wrap
   laisse le bouton passer sous le prix aux largeurs très étroites,
   plutôt que de rétrécir le texte ou de déborder. */
.hero__purchase{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,3vw,26px);
}
.hero__price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0}
/* Mention fiscale : présente sur les deux paliers, mais nettement
   secondaire — ni graisse, ni taille de texte courant. */
.hero__tax{
  margin:8px 0 0;
  /* Plus d'alpha : la transparence la délavait sur le fond clair du hero.
     Couleur pleine du texte courant, et une graisse de 500 pour lui
     donner du corps — sa taille de 13px suffit à la garder secondaire. */
  font-size:13px;font-weight:500;line-height:1.4;
  color:var(--texte);
}
.hero__price .amount{
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(2rem,4.6vw,2.45rem);font-weight:800;   /* -25% : le titre reste le plus grand */
  line-height:1;letter-spacing:-.04em;color:var(--texte-fort);
  font-variant-numeric:tabular-nums;
}
.hero__price .was{
  font-size:20px;font-weight:600;color:var(--texte);
  text-decoration:line-through;text-decoration-thickness:2px;
}
.hero__price .tax{font-size:15px;color:var(--texte);font-weight:500}
/* Même teinte que le paragraphe du hero : « Expédition sous 24-48 h » et
   « Aucun installateur » se lisent aussi franchement que lui sur le
   décor clair. La ligne de stock garde son rouge, elle est à part. */
.hero__meta{display:flex;flex-direction:column;gap:10px;margin:20px 0 0;font-size:16px;color:#294866}
.hero__meta span{display:flex;align-items:center;gap:10px}

/* Les etiquettes energie ne vivent plus ici : la classe A++ / A+ est
   passee dans la premiere carte de chiffres, sous le hero. */

/* ---- Panneau + galerie produit ---- */
/* Aucun panneau derriere le produit : la galerie repose directement sur le
   degrade du hero, si bien que les deux moities forment une seule surface. */
.hero__panel{position:relative;background:none;border:0;border-radius:0;padding:0}
/* Opacite pilotee au scroll, image par image : aucune transition ici, sinon
   chaque ecriture serait amortie et le suivi deviendrait mou. */
.hero__fade{will-change:opacity}
.gal{position:relative}
.gal__stage{
  position:relative;width:100%;height:330px;
  display:flex;align-items:center;justify-content:center;
}
/* Parallaxe très discrète, 24px au maximum sur toute la page */
.hero__parallax{will-change:transform}
/* Les deux calques occupent exactement la même scène, au même centre :
   changer de vignette ne déplace jamais rien. GSAP écrit opacity et
   transform ; sans lui, .is-on suffit à afficher le calque actif. */
.gal__layer{
  position:absolute;top:50%;left:50%;
  max-width:82%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
  opacity:0;transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 24px 40px rgba(0,32,79,.18));
}
.gal__layer.is-on{opacity:1}
/* Pré-masquage anti-clignotement : les trois pièces de la galerie
   restent invisibles tant que GSAP n'a pas posé ses états de départ.
   GSAP écrit ensuite visibility/opacity en ligne, qui l'emportent. */
.hero-anim .gal__layer,
.hero-anim .gal__caption,
.hero-anim .gal__thumbs{visibility:hidden}
/* produit-duo-int-ext.webp était le seul visuel produit à fond blanc incrusté.
   Un mix-blend-mode reste sans effet ici : la scène de la galerie forme un
   groupe de composition isolé (la parallaxe lui applique transform et
   will-change), l'image n'a donc aucun arrière-plan avec lequel se fondre.
   Le fond a été détouré dans le fichier, comme les cinq autres visuels. */
.gal__caption{
  text-align:center;font-size:15px;color:var(--texte);
  margin:16px 0 0;min-height:1.5em;transition:opacity .2s ease;
}
.gal__thumbs{
  display:flex;gap:10px;margin-top:18px;min-width:0;
  overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.gal__thumb{
  flex:0 0 auto;width:64px;height:64px;padding:6px;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  scroll-snap-align:start;
}
.gal__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (hover:hover) and (pointer:fine){.gal__thumb:hover{border-color:#9CC9E6;transform:translateY(-2px)}}
.gal__thumb.is-active{border-color:var(--bleu-vif);box-shadow:0 0 0 2px rgba(0,157,228,.35)}

/* Le duo relie par le tuyau est le seul detoure au format paysage : a 82%
   il ne remplit que 281px des 440px de la scene, la ou les autres produits
   detoures montent a 440px. D'ou l'impression de petitesse. Le selecteur
   porte sur le fichier, donc la regle suit le src pose par la galerie sans
   qu'aucun calque n'ait besoin d'une classe. Desktop uniquement : sous
   900px la scene est deja bien remplie. */
@media (min-width:900px){
  .gal__layer[src$="produit-duo-tuyau-v2.webp"]{max-width:107%}
  .gal__thumb img[src$="produit-duo-tuyau-v2.webp"]{max-width:112%;max-height:112%}
}

/* ---- Quatre carrés de caractéristiques ----
   Des petits carres compacts, pas des bandeaux : aspect-ratio 1/1, contenu
   pousse en bas a gauche, le haut de la carte reste vide. Aucune bordure :
   les cartes tiennent par deux ombres superposees, une proche et une tres
   diffuse, pour qu'elles flottent au-dessus du fond du hero.
   Ici, la base est le mobile : 2 colonnes. La ligne unique de quatre est
   declaree plus bas, a partir de 900px. */
.hero__specs{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  gap:12px;margin-top:32px;
}
/* Des rectangles legerement plus larges que hauts, jamais l'inverse, et
   jamais plus de 150px de haut : max-height garde le plafond meme si la
   colonne devient large. Contenu centre verticalement, cale a gauche. */
.hero__specs>div{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-width:0;text-align:left;
  /* Cartes informatives, jamais cliquables : elles restent claires en
     toutes circonstances. Plus de bascule en bleu profond ni de texte
     blanc — le survol se contente d'un dégradé très pâle, d'un liseré
     cyan plus franc et d'une élévation de 3px. */
  background:rgba(255,255,255,.92);
  border:1px solid rgba(12,157,218,.72);border-radius:18px;padding:15px 16px;
  box-shadow:0 10px 26px rgba(18,101,148,.08);
  transition:transform 280ms cubic-bezier(.2,.8,.2,1),
             background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  transition-delay:0s;
}
@media (hover:hover) and (pointer:fine){
  .hero__specs>div:hover{
    transform:translateY(-3px);
    background:linear-gradient(145deg,
      rgba(255,255,255,.98),
      rgba(228,247,255,.98));
    border-color:rgba(12,170,230,.95);
    box-shadow:
      0 15px 34px rgba(15,126,181,.15),
      0 0 20px rgba(65,191,239,.08);
  }
}
/* Le chiffre tient sur une seule ligne et ne touche jamais le bord. */
.hero__specs b{
  display:flex;align-items:center;gap:8px;max-width:100%;
  font-family:'Manrope','Inter',sans-serif;
  font-size:1.4rem;font-weight:700;line-height:1.15;
  letter-spacing:-.035em;color:#111;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* La carte energetique porte l'icone en plus du texte : un cran en dessous
   pour que l'ensemble tienne sur la ligne sans jamais passer a la ligne. */
.spec--nrj b{font-size:1.25rem}
/* Chaque libelle tient desormais sur une seule ligne : plus de reservation
   de deux lignes, plus de bande vide. */
.hero__specs small{
  display:block;margin-top:10px;max-width:100%;
  font-size:10px;font-weight:500;white-space:nowrap;
  letter-spacing:.06em;text-transform:uppercase;color:#6B7A90;line-height:1.3;
}
/* Etiquette energie : cinq barres empilees, du vert en haut a l'orange en
   bas, sur la meme ligne que le chiffre et juste avant lui. Elle garde ses
   couleurs au survol. */
.spec__ico{display:inline-flex;flex:none;align-items:center}
.spec__ico svg{display:block;width:26px;height:21px}
@media (min-width:900px){
  .hero{padding:64px 0 84px}
  /* Trois blocs : sur desktop, lead et buy s'empilent a gauche, la galerie
     occupe la colonne de droite sur les deux lignes. En dessous de 900px
     l'ordre du DOM suffit : titre, galerie, prix et boutons. */
  .hero__grid{
    grid-template-columns:1.2fr .8fr;
    grid-template-areas:"lead media" "buy media";
    column-gap:56px;row-gap:28px;align-items:center;
  }
  .hero__lead{grid-area:lead;align-self:end;padding-left:26px}
  /* -10% : applique ici et non sur le clamp de base, pour ne pas toucher
     a la taille mobile, qui est correcte. */
  .hero__price .amount{font-size:2.2rem}
  .hero__buy{grid-area:buy;align-self:start;padding-left:26px}
  .hero__panel{grid-area:media;align-self:center}
  .hero__sub{font-size:19px}
  .hero__panel{padding:0}
  .gal__stage{height:440px}
  /* Six vignettes sur une seule ligne : 6 x 64 + 5 x 8 = 424px dans une
     colonne de 442px a 1440px. On conserve flex-wrap:nowrap et l'overflow-x
     auto de la regle de base : sous 1200px la bande defile, elle ne repasse
     pas a la ligne et n'elargit pas la page. */
  /* Sept vignettes : 7 x 56 + 6 x 6 = 428px dans une colonne de 442px. */
  .gal__thumb{width:56px;height:56px}
  .gal__thumbs{justify-content:center;flex-wrap:nowrap;gap:6px}
  /* Une seule ligne de quatre carres, calee sur la colonne de texte : meme
     bord gauche que les boutons (les 26px de padding de .hero__buy) et meme
     largeur que la colonne lead, soit 1,2 part sur 2 une fois la gouttiere
     de 56px retiree. La grille ne deborde donc jamais sous la galerie. */
  /* 188px est la largeur ou le rapport 5/4 atteint pile le plafond de
     150px : les colonnes sont donc fixees la plutot qu'etirees, la rangee
     reste calee a gauche sous le bouton et laisse le vide a sa droite.
     C'est aussi la seule largeur ou « SURFACE COUVERTE » tient sur une
     ligne sans rapetisser le libelle. */
  .hero__specs{
    grid-template-columns:repeat(4,188px);
    justify-content:start;
    gap:16px;margin-top:32px;
    margin-left:26px;
    max-width:none;
  }
  /* La hauteur suit le contenu : c'est la seule facon pour que les 15px de
     padding soient reellement l'espace visible au-dessus du chiffre. Avec
     une hauteur figee, le centrage ravalait tout le padding et l'ecart
     restait a 50px quelle que soit la valeur. Largeur inchangee. */
  .hero__specs>div{padding:15px 20px}
  .hero__specs b{font-size:1.4rem;gap:8px}
  .spec--nrj b{font-size:1.25rem}
  .hero__specs small{font-size:11px}
}

/* ============================================================
   5. BARRE DE CONFIANCE — dégradé bleu très pâle

   Le bandeau marine a laissé la place à un dégradé glacé, bordé en
   haut et en bas d'un bleu Midea translucide. Cinq repères, chacun
   sur deux lignes : un intitulé en marine et un détail en bleu-gris.

   Le vert ne sert qu'à un seul endroit, la pastille d'état du stock.
   Toutes les icônes sont au trait, jamais pleines, jamais un emoji.
   ============================================================ */
.trust{
  background:linear-gradient(135deg,#f7fbfe 0%,#eaf6fc 100%);
  border-top:1px solid rgba(0,157,228,.16);
  border-bottom:1px solid rgba(0,157,228,.16);
  color:var(--texte-fort);
}
.trust__list{
  list-style:none;margin:0;padding:22px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;
}
.trust li{
  display:flex;align-items:center;gap:12px;
  line-height:1.3;min-width:0;
}
/* Le conteneur d'icône : 42px, identique pour les cinq. */
.trust__ico{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:13px;
  background:#EAF4FC;border:1px solid rgba(0,157,228,.22);
  box-shadow:0 2px 8px rgba(0,117,180,.10);
  display:flex;align-items:center;justify-content:center;
  color:var(--bleu-action);
}
.trust__ico svg{width:21px;height:21px}
/* Pastille d'état, seul vert de la barre. */
.trust__dot{
  position:absolute;top:-2px;right:-2px;
  width:11px;height:11px;border-radius:50%;
  background:var(--vert-fort,#1E9E57);
  border:2px solid #F4FAFE;
}
.trust__txt{display:flex;flex-direction:column;min-width:0}
.trust__label{
  font-family:'Manrope','Inter',sans-serif;
  font-size:14.5px;font-weight:700;color:var(--texte-fort);
}
.trust__sub{
  /* Nettement moins gris : ce detail porte la promesse commerciale,
     il doit se lire d'un coup d'oeil, sur les deux largeurs. */
  margin-top:2px;font-size:12.5px;font-weight:600;color:#2A4763;
}

@media (min-width:900px){
  .trust__list{
    grid-template-columns:repeat(5,1fr);grid-auto-flow:column;
    padding:26px 0 18px;gap:0;
  }
  .trust li{
    justify-content:flex-start;padding:0 18px;
    /* Séparateurs volontairement à peine visibles. */
    border-left:1px solid rgba(0,157,228,.13);
    min-width:0;
  }
  .trust li:first-child{border-left:0;padding-left:0}
  .trust li:last-child{padding-right:0}
}
@media (min-width:1200px){
  .trust li{padding:0 14px;gap:12px}
  .trust__label{font-size:15px}
  .trust__sub{font-size:13px}
}

/* ============================================================
   6. COMPARATIF EN IMAGE
   Le tableau HTML a laisse la place a deux visuels : une image large
   au-dessus de 900px, trois diapositives glissables en dessous.
   ============================================================ */
/* Desktop : image unique, centree */
.cmpi__wide{display:none}
.cmpi__wide img{
  display:block;width:100%;max-width:1200px;height:auto;margin:0 auto;
  border-radius:var(--radius);
}

/* Mobile : trois diapositives, glissement manuel, aucun defilement
   automatique. La piste sort des 20px de gouttiere du .wrap et la diapo
   monte a 94% : le texte imprime dans ces visuels est petit, chaque
   pixel de largeur regagne compte. Les 6% restants laissent voir la
   voisine de chaque cote. */
.cmpi__car{position:relative;margin-inline:-20px}
.cmpi__track{
  display:flex;gap:10px;
  padding-inline:3%;scroll-padding-inline:3%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cmpi__track::-webkit-scrollbar{display:none}
.cmpi__slide{flex:0 0 94%;scroll-snap-align:center;scroll-snap-stop:always}
.cmpi__slide img{display:block;width:100%;height:auto;border-radius:var(--radius)}

/* Pastilles : cible tactile de 28px, point de 9px a l'interieur */
.cmpi__dots{display:flex;justify-content:center;gap:4px;margin-top:14px}
.cmpi__dot{
  width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cmpi__dot::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#C9DAEA;
  transition:background-color .25s ease, transform .25s ease;
}
.cmpi__dot.is-active::before{background:var(--logo-blue);transform:scale(1.3)}

/* Loupe posee sur la diapositive active et non sur le conteneur : la
   diapo occupe 94% centres, son bord droit tombe donc a 3% du bord. */
.cmpi__car .img__zoom{top:12px;right:calc(3% + 12px);bottom:auto;width:40px;height:40px}

@media (min-width:900px){
  .cmpi__wide{display:block}
  .cmpi__car{display:none}
}

/* ============================================================
   7. 4-EN-1
   ============================================================ */
/* Bloc image + texte, alterné image-droite / image-gauche */
.split{display:grid;gap:28px;align-items:center}
.split+.split{margin-top:44px}
.split__media{
  margin:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--bleu-pale-2);box-shadow:var(--shadow);
}
.split__media img{width:100%;height:300px;object-fit:cover;display:block}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .split+.split{margin-top:72px}
  .split--rev .split__text{order:2}
  .split--rev .split__media{order:1}
  .split__media img{height:440px}
}
/* Le visuel chauffage porte un titre imprimé en haut : le cadrage le laisse
   hors champ, tout en gardant l'encart entier. La hauteur du cadre change
   selon l'écran, donc le point de cadrage aussi. */
.img-chauffage{object-position:center 74%}
@media (min-width:900px){.img-chauffage{object-position:center 62%}}

/* Dans un demi-bloc, les cartes se superposent au lieu de se juxtaposer */
.split .split__text.fn{grid-template-columns:1fr}
/* Zoom discret au survol, à l'intérieur du cadre */
/* Grossissement au survol, identique partout : 1,05 sur 500ms, a l'interieur
   d'un cadre a debordement masque. La galerie du hero fait exception : sa
   couche porte deja un transform (centrage + fondu) et la parallaxe en ecrit
   un autre, on agit donc sur la propriete scale, qui se compose sans conflit. */
.zoom img,.place__img img,.kit__photo img,.fn4__media img{
  transition:transform .5s ease-out;
}
.gal__stage{transition:scale .5s ease-out}
@media (hover:hover) and (pointer:fine){
  .zoom:hover img,
  .place__img:hover img,
  .kit__photo:hover img,
  .fn4__media:hover img{transform:scale(1.05)}
  .gal__stage:hover{scale:1.05}
}
/* Sous 900px il n'y a pas de survol : l'appui du doigt prend le relais.
   On agit sur scale et non sur transform pour la meme raison qu'au-dessus :
   le calque porte deja un transform de centrage et la parallaxe en ecrit un
   autre, alors que scale se compose sans les ecraser. */
@media (max-width:899px){
  .gal__stage{transition:scale .25s ease-out}
  .gal__stage.is-press{scale:1.05}
}

.fn{display:grid;gap:20px}
.fn h3{margin:20px 0 10px}
.fn p{font-size:16px;color:var(--texte);margin:0;line-height:1.65}
.fn__icon{
  flex:none;width:56px;height:56px;border-radius:16px;
  background:var(--bleu-pale-2);color:var(--bleu-action);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s ease, color .25s ease;
}
.fn .card{transition:background-color .18s ease-out, color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;transition-delay:0s}
.fn .card h3,.fn .card p{transition:color .18s ease-out;transition-delay:0s}
@media (hover:hover) and (pointer:fine){
  /* Même traitement que les cartes de pilotage : fond bleu profond, texte
     blanc, élévation de 8px. La pastille d'icône est délibérément laissée
     intacte : au repos elle est discrète, sur fond bleu elle devient
     l'élément le plus clair de la carte.
     Anneau plutôt qu'une bordure de 2px : le liseré suit le rayon du bloc
     et n'entraîne aucun décalage de mise en page au survol. */
  .fn .card:hover{
    transform:translateY(-8px);
    background:var(--bleu-profond);
    border-color:var(--bleu-profond);
    box-shadow:0 0 0 1px var(--bleu-profond), 0 18px 40px rgba(0,32,79,.32);
  }
  .fn .card:hover h3,.fn .card:hover p{color:#fff}
}
@media (min-width:760px){.fn{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.fn{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   5 bis. BANNIÈRES MIDEA — bandeau défilant pleine largeur
   Défilement continu piloté en JavaScript : uniquement des
   transforms, décalage repris tel quel après un glissement.
   ============================================================ */
/* Interlude visuel autonome : le carrousel a sa propre atmosphère bleu
   très clair, indépendante des sections voisines. Elle occupe toute la
   largeur, l'air au-dessus et en dessous des cartes, et se voit entre
   elles. Base mobile, desktop plus bas. */
.bann{
  padding:32px 0;
  background:
    radial-gradient(circle at 18% 45%,
      rgba(49,178,224,.10),
      transparent 30%),
    radial-gradient(circle at 82% 55%,
      rgba(91,194,232,.08),
      transparent 28%),
    linear-gradient(180deg,
      #f7fbfe 0%,
      #edf7fc 50%,
      #f7fbfe 100%);
}
.bann__viewport{position:relative;width:100%;overflow:hidden}

/* Fondu latéral : les cartes entrent et sortent au lieu d'être coupées
   net. Le voile reprend exactement le dégradé vertical de la section et
   s'efface horizontalement — aucun rectangle blanc, aucune teinte
   étrangère. pointer-events:none : ni la souris, ni le doigt, ni le
   glissement ne le rencontrent. */
.bann__viewport::before,
.bann__viewport::after{
  content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:28px;pointer-events:none;
  background:linear-gradient(180deg,#f7fbfe 0%,#edf7fc 50%,#f7fbfe 100%);
}
.bann__viewport::before{
  left:0;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}
.bann__viewport::after{
  right:0;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent);
  mask-image:linear-gradient(270deg,#000,transparent);
}
.bann__track{
  display:flex;align-items:stretch;
  width:max-content;
  will-change:transform;
  cursor:grab;
  touch-action:pan-y;              /* le défilement vertical de la page reste possible */
  user-select:none;-webkit-user-select:none;
}
.bann__track.is-grabbing{cursor:grabbing}
.bann__slide{
  flex:0 0 auto;margin:0 24px 0 0;   /* marge et non gap : la demi-longueur tombe juste */
}
/* La hauteur est portee par l'image, plus par la figure, et la largeur
   suit le rapport propre a chaque fichier : 2,44:1, 2,96:1 et 1,38:1
   cohabitent alignes sur une meme ligne de base, sans recadrage.
   Le cadre arrondi passe donc aussi sur l'image. */
.bann__slide img{
  height:clamp(150px,27vw,270px);width:auto;display:block;
  border-radius:var(--radius);background:var(--bleu-pale);
  border:1px solid var(--line);
  /* Les cartes se posent doucement sur le fond, sans effet de verre */
  box-shadow:0 10px 30px rgba(14,83,122,.10);
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
@media (min-width:900px){
  .bann{padding:56px 0}
  .bann__viewport::before,.bann__viewport::after{width:72px}
}

/* ============================================================
   8. NIVEAU SONORE — scène de nuit et échelle sonore

   La scène est désormais une SEULE image par palier : l'appareil, la
   fenêtre coulissante, la gaine et le souffle bleu y sont déjà cuits.
   Plus aucun calque produit, plus aucune gaine dessinée, plus aucune
   ombre rapportée : ils entraient en conflit avec le visuel livré.

   Deux mises en page :
     desktop — image pleine largeur en fond de section, texte à gauche,
       échelle sonore en bas à gauche ;
     mobile  — copie sur fond marine, puis la scène PLEINE LARGEUR
       (aucun cadre, aucun arrondi, aucune ombre), puis l'échelle.

   Le plein cadre mobile ne demande aucune marge négative : la section
   n'a pas de gouttière, ce sont la copie et l'échelle qui portent la
   leur via .wrap.
   ============================================================ */
.sil{
  position:relative;isolation:isolate;overflow:hidden;
  background:#08152a;                 /* marine de repli pendant le chargement */
  padding:0;
  /* Palette de l'échelle : un seul endroit à retoucher. */
  --sound-rail-muted:rgba(122,180,218,.52);
  --sound-cyan:#13b8ef;
  --sound-azure:#078fca;
  --sound-glow:rgba(31,190,245,.72);
}

/* --- Décor desktop : l'image est le seul visuel, jamais retouchée --- */
.sil__bg{
  position:absolute;inset:0;z-index:0;
  background-image:url("../images/bruit-sonor-background-desktop2.webp");
  background-size:cover;
  background-position:62% center;     /* garde la fenêtre et la gaine à droite */
  background-repeat:no-repeat;
  background-color:#08152a;
  pointer-events:none;
}
/* Aucun voile général : l'image est déjà étalonnée. Seule une amorce
   très douce à gauche, sous le texte, et rien au-delà de 46 %. */
.sil__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(6,18,38,.42)  0%,
    rgba(6,18,38,.20) 28%,
    rgba(6,18,38,.07) 44%,
    rgba(6,18,38,0)   58%);
}

.sil__layout{position:relative;z-index:2;width:100%}

/* --- Copie : aucun cadre, aucune plaque --- */
.sil__copy{max-width:590px}
.sil__copy h2{color:#fff}
.sil__lede{
  margin:0;max-width:56ch;
  font-size:17px;line-height:1.7;
  color:rgba(233,242,252,.90);
}
.sil__lede--mobile{display:none}

/* --- Scène mobile : masquée au-dessus de 900px --- */
.sil__scene{display:none}

/* ------------------------------------------------------------
   ÉCHELLE SONORE
   Tout est en HTML : deux lumières mobiles réelles, un repère 39 dB
   réel qui sert d'ancre unique, trois anneaux réels. Aucun pseudo-
   élément mobile, aucun nœud cloné, aucune animation CSS infinie.
   ------------------------------------------------------------ */
.sound{position:relative}
.sound__track{
  position:relative;
  height:132px;
  container-type:inline-size;container-name:sound;
}
/* Le rail sourd. Il pousse de la gauche vers la droite : l'origine de
   transformation est posée ici, jamais dans le script. */
.sound__rail{
  position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;border-radius:2px;
  background:var(--sound-rail-muted);
  transform-origin:left center;
  /* ombre nulle mais déclarée : sans valeur de départ, l'éclat unique
     joué à la fin du tracé n'aurait rien à interpoler. */
  box-shadow:0 0 0 rgba(31,190,245,0);
}
/* Pointe du tracé : un éclat cyan-blanc avec une courte traîne, calé
   sur l'extrémité du rail qui grandit. Fin et allongé, jamais un néon. */
.sound__rail-tip{
  position:absolute;left:0;top:50%;
  width:34px;height:8px;margin:-4px 0 0 -32px;
  border-radius:4px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(53,198,247,0)   0%,
    rgba(124,226,255,.50) 56%,
    #EAFBFF 100%);
  box-shadow:0 0 12px 2px rgba(53,198,247,.50);
}

/* Segment allumé autour du repère 39, révélé à la convergence.
   Le centrage passe par une marge, pas par translateX(-50%) : GSAP ne
   pilote alors que scaleX, sans avoir à recomposer la translation. */
.sound__rail-lit{
  position:absolute;top:50%;left:var(--sound-x-39);
  width:132px;margin:-1.5px 0 0 -66px;height:3px;
  transform:scaleX(.4);
  border-radius:3px;opacity:0;
  background:linear-gradient(90deg,
    rgba(19,184,239,0) 0%,
    rgba(19,184,239,.85) 50%,
    rgba(19,184,239,0) 100%);
}

/* Chaque repère est un point de taille nulle posé sur le rail : sa
   valeur, son libellé et son pastille se centrent tous dessus, donc
   sur une seule et même coordonnée. */
.sound__mark{position:absolute;left:var(--x);top:50%;width:0;height:0}
.sound__dot{
  position:absolute;left:0;top:0;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#A9C7E2;
}
.sound__val,.sound__name{
  position:absolute;left:0;transform:translateX(-50%);
  text-align:center;white-space:nowrap;
}
.sound__val{
  bottom:17px;
  font-family:'Manrope','Inter',sans-serif;font-weight:700;
  /* interligne explicite : hérité du corps de page, il valait 1,65 et
     la boîte de « 39 dB » mordait sur son libellé. */
  font-size:13px;line-height:1;letter-spacing:-.01em;
  color:rgba(240,247,255,.95);
}
.sound__name{
  top:17px;
  font-family:'Inter',sans-serif;font-weight:500;
  font-size:11.5px;line-height:1.25;color:rgba(213,230,247,.86);
}

/* --- Repère 39 dB : l'ancre partagée --- */
.sound__mark--hero .sound__val{bottom:22px;font-size:18px;color:#fff}
.sound__mark--hero .sound__name{top:22px;font-weight:600;font-size:12.5px;color:#fff}
.sound__core{
  position:absolute;left:0;top:0;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #ffffff 0%, #9DEEFF 24%, var(--sound-cyan) 56%, #0a86c4 100%);
  box-shadow:
    0 0 0 4px rgba(19,184,239,.16),
    0 0 18px 4px rgba(31,190,245,.55),
    0 0 42px 10px rgba(19,150,220,.26);
}
/* Halo permanent du repère : c'est lui qui s'allume lentement à
   l'arrivée, comme une étoile, et qui reste ensuite. */
.sound__glow{
  position:absolute;left:0;top:0;
  width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;pointer-events:none;opacity:.55;
  background:radial-gradient(circle at 50% 50%,
    rgba(120,232,255,.42) 0%,
    rgba(31,190,245,.20) 32%,
    rgba(19,150,220,.07) 58%,
    rgba(19,150,220,0)   76%);
}
.sound__halo{
  position:absolute;left:0;top:0;
  width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2px solid rgba(74,210,252,.85);
  opacity:0;pointer-events:none;
}

/* --- Les deux lumières mobiles, et elles seules --- */
.sound-pulse{
  position:absolute;top:50%;
  width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    #ffffff 0%, #A6EEFF 32%, #26BFF5 66%, rgba(38,191,245,0) 100%);
  box-shadow:0 0 16px 4px rgba(38,191,245,.62);
}
.sound-pulse-left{left:0}
.sound-pulse-right{left:100%}

.sound__note{
  margin:10px 0 0;font-size:12px;letter-spacing:.04em;
  color:rgba(190,212,236,.62);
}

/* Sous 760px de RAIL — et non de fenêtre : un portable de 1024px a
   déjà un rail trop court — les libellés s'alternent au-dessus et en
   dessous, sinon « Réfrigérateur… » chevauchait « Climatiseur… ». */
@container sound (max-width:760px){
  .sound__name{white-space:normal;width:min(108px,30vw)}
  .sound__mark--up .sound__val{bottom:20px;top:auto}
  .sound__mark--up .sound__name{bottom:45px;top:auto}
  .sound__mark--down .sound__val{top:20px;bottom:auto}
  .sound__mark--down .sound__name{top:43px;bottom:auto}
  .sound__mark--hero.sound__mark--up .sound__val{bottom:26px}
  .sound__mark--hero.sound__mark--up .sound__name{bottom:55px}
}

/* ------------------------------------------------------------
   MOBILE — copie, puis scène pleine largeur, puis échelle
   ------------------------------------------------------------ */
@media (max-width:899px){
  .sil{padding:32px 0 28px}
  .sil__bg,.sil__veil{display:none}
  .sil__layout{display:flex;flex-direction:column;gap:22px}

  .sil__lede--desktop{display:none}
  .sil__lede--mobile{display:block;font-size:16px}

  /* Plein cadre : pas de carte, pas d'arrondi, pas d'ombre, pas de
     bord. L'image porte sa propre composition verticale. */
  .sil__scene{
    display:block;position:relative;
    width:100%;aspect-ratio:5/5.4;max-height:min(76vh,700px);
    background-image:url("../images/bruit-sonor-background-mobile2.webp");
    background-size:cover;
    background-position:center 58%;
    background-repeat:no-repeat;
    background-color:#08152a;
    border-radius:0;box-shadow:none;border:0;overflow:hidden;
  }
  .sil__metric{
    position:absolute;left:20px;top:20px;z-index:2;
    font-family:'Manrope','Inter',sans-serif;line-height:1;
  }
  .sil__metric-rule{
    display:block;width:44px;height:2px;border-radius:2px;
    background:var(--bleu-vif);margin-bottom:10px;
  }
  .sil__num{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0}
  .sil__prefix{
    display:block;width:100%;margin-bottom:3px;
    font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:rgba(232,244,255,.94);text-shadow:0 1px 10px rgba(2,12,28,.8);
  }
  .sil__digits{
    font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-.045em;
    font-variant-numeric:tabular-nums;
    text-shadow:0 2px 14px rgba(2,12,28,.75);
  }
  .sil__unit{font-size:1rem;font-weight:700;color:var(--bleu-vif)}

  .sound__track{height:176px}
  .sound__note{text-align:center}
}

/* ------------------------------------------------------------
   DESKTOP — décor pleine largeur derrière le contenu
   ------------------------------------------------------------ */
@media (min-width:900px){
  .sil{
    min-height:clamp(540px,39vw,680px);
    display:flex;align-items:stretch;
  }
  .sil__layout{
    display:grid;grid-template-rows:1fr auto;
    align-content:space-between;
    padding-block:clamp(42px,4.2vw,60px);
  }
  /* C'est la colonne .wrap qui est l'élément de grille : centrer
     .sil__copy n'aurait eu aucun effet, la copie restait collée en haut. */
  .sil__copy-wrap{align-self:center}
  .sil__copy{max-width:min(590px,46%)}
  .sil__scale-wrap{padding-bottom:2px}
  /* L'échelle s'arrête avant l'appareil cuit dans l'image : sans cette
     largeur, « 65 dB » et son libellé passaient derrière lui. */
  .sound{max-width:66%}
  .sound__track{height:132px}
}

/* Entre 900 et 1200px le rail passe sous 760px : la requête de
   conteneur bascule les libellés en deux lignes alternées, et la piste
   doit leur laisser la même hauteur que sur mobile. Sans cela « 39 dB »
   et son libellé se touchaient et trois libellés sortaient de la piste. */
@media (min-width:900px) and (max-width:1200px){
  .sound__track{height:180px}
}

/* ------------------------------------------------------------
   MOUVEMENT RÉDUIT — l'état final est déjà celui de la feuille de
   style ; il ne reste qu'à allumer le segment central.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .sound__rail{box-shadow:0 0 6px rgba(31,190,245,.16)}
  .sound__rail-lit{opacity:.85;transform:scaleX(1)}
  .sound-pulse,.sound__halo,.sound__rail-tip{opacity:0}
  .sound__glow{opacity:.55}
}

/* ============================================================
   9. INSTALLATION EN 3 ÉTAPES — RÉCIT DÉFILANT

   L'ancien carrousel (flèches, pastilles, piste coulissante) est
   retiré : trois grandes cartes racontent désormais l'installation
   au fil du défilement.

   Deux principes tiennent toute la section :

   1. TOUT EST PRÉFIXÉ .inst3. Aucune règle n'est partagée avec une
      autre section, aucune classe globale n'est redéfinie. La section
      peut être reprise ou retirée sans toucher au reste de la page.

   2. AUCUN ÉTAT DE DÉPART N'EST ÉCRIT ICI. Les opacités nulles et
      les décalages d'entrée sont posés par le script, jamais par la
      feuille de style. Sans JavaScript, ou si GSAP manque à l'appel,
      les trois cartes s'affichent simplement complètes et immobiles.
      Seul le rideau fait exception : il part à scale(0), donc
      invisible, et c'est le script qui le déploie avant de le
      rétracter.
   ============================================================ */

/* ---- En-tête de section ----
   Écrit avec #installation, et non .inst3__head seul : la règle
   générique .head{margin-bottom:56px} du bloc desktop est plus bas
   dans le fichier et l'emporterait à spécificité égale. */
#installation .inst3__head{max-width:64ch;margin-bottom:32px}
.inst3__lede{margin:0}

/* ---- La pile ----
   La respiration sous la dernière carte est portée ici : elle se
   fusionne avec la marge haute du bloc vidéo (marges adjacentes),
   c'est donc la plus grande des deux qui s'applique. */
.inst3{list-style:none;padding:0;margin:28px 0 56px}

/* Chaque étape vit dans une enveloppe. Séparer l'enveloppe de la
   carte n'est pas décoratif : GSAP écrit transform et opacity sur
   l'enveloppe (profondeur de la pile), le survol écrit transform sur
   la carte. Deux propriétés transform sur un même élément, l'une
   pilotée image par image au défilement et l'autre par une
   transition CSS, se seraient écrasées l'une l'autre. */
.inst3__slot{position:relative}
.inst3__slot + .inst3__slot{margin-top:20px}

/* Le temps d'une mesure, les enveloppes redeviennent statiques. Une
   enveloppe déjà collée renverrait sa position collée au lieu de sa
   place réelle dans le flux, et ScrollTrigger en tirerait des
   distances fausses. Posé et retiré dans la même image, donc
   invisible à l'œil. Vaut aux deux largeurs : la pile est collante
   sur mobile comme sur desktop. */
.inst3--measuring .inst3__slot{position:static}

.inst3__card{
  position:relative;
  display:grid;grid-template-columns:1fr;
  background:#fff;
  border:1px solid rgba(0,157,228,.18);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,117,180,.09);
  transition:transform 350ms cubic-bezier(.22,.61,.36,1),
             box-shadow 350ms ease, border-color 350ms ease;
}

/* ---- Panneau visuel ----
   order:1 : dans le DOM le texte vient en premier (l'ordre de lecture
   d'une étape est son numéro, son titre, puis son visuel), mais en
   pile verticale le visuel doit s'afficher en haut. */
.inst3__media{
  order:1;
  position:relative;margin:0;overflow:hidden;
  background:var(--bleu-pale-2);
  aspect-ratio:4 / 3;   /* réservé avant chargement : aucun saut de mise en page */
}
/* Aucune mise à l'échelle continue, aucun filtre, aucune parallaxe :
   la source 1672x941 est rendue telle quelle, donc nette. */
.inst3__img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;
}
/* Le rideau. Un aplat opaque qui se rétracte : il ne touche jamais
   l'image, seulement lui-même, la résolution reste intacte.
   scale(0) au repos = invisible sans script. */
.inst3__curtain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(160deg,#F6FAFD,#E2EDF6);
  transform:scale(0);transform-origin:bottom center;
}
/* Le liseré clair au bord du visuel : horizontal en pile verticale,
   vertical en deux colonnes (voir le bloc desktop). */
.inst3__media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    rgba(0,157,228,0),rgba(0,157,228,.42),rgba(0,157,228,0));
  pointer-events:none;
}

/* ---- Panneau de texte ---- */
.inst3__panel{
  order:2;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:20px 20px 24px;
}
.inst3__num{
  font-family:'Manrope','Inter',sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.18em;
  color:#0678A8;font-variant-numeric:tabular-nums;line-height:1.2;
}
/* Le filet de progression : l'unique accent bleu franc du panneau.
   flex:none — dans une colonne flex, un filet de 2px reste
   compressible et disparaîtrait par arrondi. */
.inst3__rule{
  display:block;width:100%;max-width:190px;height:2px;flex:none;
  margin:12px 0 20px;border-radius:2px;overflow:hidden;
  background:rgba(0,157,228,.15);
}
.inst3__rule-fill{
  display:block;width:100%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--bleu-vif),var(--bleu-action));
  transform-origin:left center;
}
.inst3__ico{
  flex:none;width:52px;height:52px;border-radius:15px;
  background:#DCEDF9;color:#0678A8;
  display:flex;align-items:center;justify-content:center;
  transition:background-color 350ms ease,color 350ms ease,box-shadow 350ms ease;
}
.inst3__h{margin:16px 0 10px;font-size:1.25rem;line-height:1.25}
.inst3__p{margin:0;font-size:16px;line-height:1.65;color:var(--texte)}

/* ------------------------------------------------------------
   MOBILE — sous 768px
   Même principe que le desktop : la carte reste verticale (visuel en
   haut, texte dessous), mais les trois étapes s'empilent au
   défilement au lieu de se suivre en liste. Chaque enveloppe se colle
   à 85px du haut — la hauteur réelle de l'en-tête collante (73px)
   plus une respiration — et la suivante vient la recouvrir. Les 10vh
   qui séparent deux enveloppes fournissent la distance de défilement
   d'une transition, et garantissent au passage que la carte suivante
   n'a pas encore atteint sa ligne de départ (top 78%) quand la
   précédente s'installe : jamais deux entrées en même temps.

   Trois hauteurs commandent la mise en page :
     85px  en haut, sous l'en-tête ;
     65px  en bas, la barre d'achat fixe ;
     36vh  de plafond sur le visuel, pour que la carte tienne
           entièrement entre les deux sur les écrans courts. Réduire
           la hauteur du visuel élargit son rapport, donc RECADRE
           MOINS une source 16/9 : la géométrie de l'installation
           reste entière.
   ------------------------------------------------------------ */
@media (max-width:767px){
  .inst3__title{font-size:clamp(28px,8vw,34px);line-height:1.08;letter-spacing:-.03em}
  #installation .inst3__head{margin-bottom:26px}

  /* La pile ressort volontairement du padding de .wrap : ce sont les
     16px de la carte qui font les marges latérales, pas ceux du
     conteneur. La carte reste donc à calc(100% - 32px) de la fenêtre. */
  .inst3{margin:22px -20px 56px}

  .inst3__slot{position:sticky;top:85px}
  .inst3__slot + .inst3__slot{margin-top:10vh}
  .inst3__slot:not(:last-child){will-change:transform,opacity}

  .inst3__card{
    width:calc(100% - 32px);max-width:430px;
    margin-left:auto;margin-right:auto;
    border-radius:18px;
    /* auto / 1fr : le visuel garde son 4/3, et c'est le panneau de
       texte qui absorbe la hauteur ajoutée par l'égalisation des
       trois cartes (voir equalise() dans le script). Sans cela une
       carte plus courte laisserait dépasser celle du dessous. */
    grid-template-rows:auto 1fr;
  }
  .inst3__media{max-height:36vh}
  .inst3__panel{padding:20px}
  .inst3__ico{width:46px;height:46px;border-radius:13px}
  .inst3__h{margin:14px 0 8px;font-size:1.1875rem}
  .inst3__rule{margin:11px 0 18px;max-width:150px}

  /* Retour tactile bref, jamais un survol resté collé. Écrit sur la
     carte et non sur l'enveloppe : transform et opacity de
     l'enveloppe appartiennent à GSAP. */
  .inst3__card:active{transform:scale(.994);transition:transform 120ms ease}
}

/* ------------------------------------------------------------
   DESKTOP — 1024px et plus
   Deux colonnes 42 / 58, et une pile collante : les cartes restent
   dans le flux normal, chacune se colle à 8vh du haut et la suivante
   lui passe dessus. Les 12vh qui séparent deux enveloppes fournissent
   la distance de défilement d'une transition. La pile est donc
   purement CSS — retirez le script, elle fonctionne encore ; GSAP
   n'ajoute que la profondeur (échelle, léger recul, fondu partiel).
   Aucun épinglage, donc aucune zone vide après la dernière carte :
   elle se libère d'elle-même vers le bloc vidéo.
   ------------------------------------------------------------ */
@media (min-width:1024px){
  #installation .inst3__head{margin-bottom:44px}
  .inst3{margin-top:40px;margin-bottom:96px}

  /* 104px : la hauteur réelle de l'en-tête collante (89px) plus une
     respiration. En vh, la carte se serait accrochée DERRIÈRE
     l'en-tête sur toute fenêtre de moins de 1110px de haut. */
  .inst3__slot{position:sticky;top:104px}
  .inst3__slot + .inst3__slot{margin-top:12vh}
  .inst3__slot:not(:last-child){will-change:transform,opacity}

  /* La carte doit être franchement opaque : une carte translucide
     laisserait voir celles qui dorment dessous, ce qui se lit comme
     un défaut d'affichage plutôt que comme de la profondeur. */
  .inst3__card{
    grid-template-columns:42fr 58fr;
    align-items:stretch;
    min-height:540px;          /* les trois cartes sont donc identiques */
    border-radius:24px;
    box-shadow:0 18px 46px rgba(0,117,180,.10);
  }
  .inst3__panel{order:1;justify-content:center;padding:48px 52px}
  .inst3__media{order:2;aspect-ratio:auto;height:100%;min-height:540px}
  .inst3__ico{width:56px;height:56px;border-radius:16px}
  .inst3__h{margin:20px 0 12px;font-size:1.5rem}
  .inst3__p{max-width:38ch}

  /* Le liseré passe du bas au flanc gauche du visuel */
  .inst3__media::after{
    left:0;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(180deg,
      rgba(0,157,228,0),rgba(0,157,228,.45),rgba(0,157,228,0));
  }
}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .inst3__card:hover{
    transform:translateY(-5px) scale(1.006);
    border-color:rgba(0,157,228,.34);
    box-shadow:0 24px 54px rgba(0,117,180,.16);
  }
  .inst3__card:hover .inst3__ico{
    background:#CDE8F8;color:#05699B;
    box-shadow:0 6px 16px rgba(12,157,218,.20);
  }
  /* Le visuel ne bouge pas au survol : la géométrie de l'installation
     doit rester lisible, c'est elle qu'on est venu regarder. */
}

/* Colonne un cran plus large là où la fenêtre le permet, sans jamais
   déborder : .wrap est plafonné à 1200px, l'enveloppe l'atteint donc
   exactement et ne le dépasse pas. */
@media (min-width:1240px){
  .inst3{margin-left:-20px;margin-right:-20px}
}

/* ------------------------------------------------------------
   MOUVEMENT RÉDUIT
   Le script ne pose aucun état de départ dans ce mode (voir la
   matchMedia du bloc GSAP), il reste donc à défaire l'adhérence :
   trois cartes qui se suivent, sans recouvrement ni décalage.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .inst3__slot{position:static}
  .inst3__slot + .inst3__slot{margin-top:24px}
  .inst3__card,.inst3__ico{transition:none}
  .inst3__curtain{display:none}
}

/* ============================================================
   9 bis. DÉMONSTRATION VIDÉO

   Chargement au clic. Tant que le visiteur n'a pas demandé la
   lecture, la page n'adresse aucune requête à YouTube : seule
   l'affiche locale est chargée. Au clic, l'iframe remplace l'affiche
   DANS LE MÊME CADRE. La lecture se fait sur place, jamais en
   quittant le site : aucun lien, aucune nouvelle fenêtre.

   Tout est préfixé .vdemo, comme la section installation au-dessus
   est préfixée .inst3 : rien n'est partagé, rien de global n'est
   redéfini. Aucun état de départ n'est écrit ici, ils sont posés par
   le script : sans JavaScript le bloc est complet et immobile.
   ============================================================ */
.vdemo{max-width:1160px;margin:0 auto}
#installation .vdemo__head{margin-bottom:26px}
.vdemo__lede{margin:0}

/* La scène porte le halo ; le cadre porte l'image. Deux boîtes
   séparées : un halo dessiné sur le cadre lui-même aurait été coupé
   par son overflow:hidden. */
.vdemo__stage{position:relative;max-width:1040px;margin:0 auto}
.vdemo__stage::before{
  content:"";position:absolute;left:50%;top:50%;
  /* 116% du cadre, mais jamais plus large que la fenêtre : à 1024px la
     colonne touche déjà les bords, et un halo débordant de 78px de
     chaque côté ouvrait une barre de défilement horizontale. Le
     débordement vertical, lui, ne coûte rien. */
  width:min(116%, calc(100vw - 60px));height:126%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(0,157,228,.17), rgba(0,157,228,.06) 58%, rgba(0,157,228,0) 78%);
}

.vdemo__frame{
  position:relative;z-index:1;width:100%;aspect-ratio:16 / 9;
  border:1px solid rgba(0,157,228,.24);border-radius:18px;
  overflow:hidden;background:var(--bleu-pale-2);
  box-shadow:0 16px 40px rgba(0,117,180,.15);
}
.vdemo__poster{width:100%;height:100%;object-fit:cover;display:block}
.vdemo__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}

/* Le rideau d'entrée. scale(0) au repos, donc invisible sans script. */
.vdemo__curtain{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(160deg,#F6FAFD,#E2EDF6);
  transform:scale(0);transform-origin:center bottom;
}

/* ---- Badge ---- */
.vdemo__badge{
  position:absolute;left:14px;top:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:99px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.72);
  color:var(--texte-fort);
  font-family:'Manrope','Inter',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;line-height:1;
}
.vdemo__badge svg{color:var(--bleu-vif);flex:none;display:block}

/* ---- Bouton de lecture ----
   Le bouton couvre tout le cadre : l'affiche entière est cliquable,
   mais seul le disque central se voit. C'est un vrai <button>, donc
   Entrée et Espace le déclenchent sans une ligne de code. */
.vdemo__play{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;cursor:pointer;
}
.vdemo__disc{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:50%;background:#fff;
  box-shadow:0 12px 30px rgba(0,60,110,.26), 0 0 34px rgba(0,157,228,.22);
  transition:transform 280ms cubic-bezier(.22,.61,.36,1), box-shadow 280ms ease;
}
/* L'anneau cyan. Élément réel et non pseudo-élément : GSAP doit
   pouvoir le faire luire une fois à l'entrée. */
.vdemo__ring{
  position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(0,157,228,.5);pointer-events:none;
}
.vdemo__tri{margin-left:5px;display:block}  /* recentre le triangle à l'œil */

@media (hover:hover) and (pointer:fine){
  .vdemo__play:hover .vdemo__disc{
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 18px 38px rgba(0,60,110,.30), 0 0 46px rgba(0,157,228,.38);
  }
}
.vdemo__play:focus-visible{outline:0}
.vdemo__play:focus-visible .vdemo__disc{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--bleu-action),
             0 12px 30px rgba(0,60,110,.26);
}

/* ------------------------------------------------------------
   MESURE À VÉRIFIER : carte de compatibilité
   Trois zones sur desktop : pastille, explication, deux repères
   chiffrés. Une colonne sur mobile, les deux repères côte à côte.
   ------------------------------------------------------------ */
.mesure{
  position:relative;overflow:hidden;
  max-width:960px;margin:26px auto 0;
  display:grid;gap:14px;
  padding:20px 20px 20px 23px;
  border:1px solid rgba(0,157,228,.20);border-radius:18px;
  background:linear-gradient(135deg,#FFFFFF 0%,#F7FBFE 55%,#EEF6FC 100%);
  box-shadow:0 8px 24px rgba(0,117,180,.08);
}
/* Le filet cyan sur le flanc gauche */
.mesure::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--bleu-vif),var(--bleu-action));
}
.mesure__ico{
  flex:none;width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:#DCEDF9;color:#0678A8;
  box-shadow:inset 0 0 0 1px rgba(0,157,228,.22);
}
.mesure__ico svg{width:23px;height:23px}
.mesure__h{margin:0 0 7px;font-size:1.125rem;line-height:1.3}
.mesure__p{margin:0;font-size:16px;line-height:1.6;color:var(--texte)}

/* Bascule des deux versions du paragraphe. Par défaut la longue est
   affichée : si la feuille mobile ne s'applique pas, c'est le message
   accompagné des deux repères chiffrés qui reste. */
.mesure__short{display:none}

.mesure__metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mesure__metric{
  padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,157,228,.22);
}
.mesure__n{
  display:block;font-family:'Manrope','Inter',sans-serif;
  font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--texte-fort);font-variant-numeric:tabular-nums;
}
.mesure__u{font-size:.6em;font-weight:700;color:var(--bleu-vif);margin-left:3px}
.mesure__cap{
  display:block;margin-top:7px;font-size:11px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:var(--texte);line-height:1.35;
}

/* ---- Mobile : sous 768px ---- */
@media (max-width:767px){
  .vdemo__title{font-size:clamp(28px,7.6vw,32px);line-height:1.1;letter-spacing:-.03em}
  #installation .vdemo__head{margin-bottom:20px}
  .vdemo__frame{border-radius:18px}
  .vdemo__disc{width:62px;height:62px}
  .vdemo__tri{width:22px;height:26px;margin-left:4px}
  .vdemo__ring{inset:-7px}
  .vdemo__badge{left:10px;top:10px;padding:6px 10px;font-size:10px;letter-spacing:.06em}
  .vdemo__badge svg{width:12px;height:12px}

  /* Sous 768px l'avertissement se réduit à trois éléments : pastille,
     titre sur la même ligne, paragraphe dessous. Les deux repères
     chiffrés sortent, leurs valeurs passent dans le texte court.

     display:contents sur le corps : le titre et le paragraphe
     deviennent des cellules de la grille de la carte, ce qui permet
     de poser le titre à côté de la pastille et le paragraphe en
     dessous sur toute la largeur. Sans cela, le paragraphe serait
     resté indenté dans la colonne du titre. */
  .mesure{
    margin-top:20px;padding:16px 16px 16px 19px;border-radius:16px;
    grid-template-columns:38px minmax(0,1fr);
    column-gap:11px;row-gap:11px;align-items:center;
    background:linear-gradient(150deg,#FFFFFF 0%,#F7FBFE 100%);
  }
  .mesure__body{display:contents}
  /* La bascule des deux paragraphes. Indispensable ici et pas
     seulement pour le texte : avec display:contents, un paragraphe
     resté visible devient une cellule de grille placée d'office dans
     la colonne de 38px de la pastille, et son texte s'y étire sur
     vingt lignes. */
  .mesure__long{display:none}
  .mesure__short{display:block}
  .mesure__ico{width:38px;height:38px;border-radius:11px;grid-column:1;grid-row:1}
  .mesure__ico svg{width:20px;height:20px}
  .mesure__h{grid-column:2;grid-row:1;margin:0;font-size:1.0625rem;line-height:1.25}
  /* Pleine largeur, directement sous la ligne pastille + titre.
     15px : resserré, mais jamais sous le plancher de 14px. */
  .mesure__p.mesure__short{grid-column:1 / -1;grid-row:2;font-size:15px;line-height:1.55}
  .mesure__metrics{display:none}
}
/* Écrans très étroits : les deux repères se rangent l'un sous l'autre
   plutôt que de casser leurs libellés en quatre lignes. */
@media (max-width:339px){
  .mesure__metrics{grid-template-columns:1fr}
}

/* ---- Desktop : 1024px et plus ---- */
@media (min-width:1024px){
  #installation .vdemo__head{margin-bottom:36px;max-width:none;text-align:center}
  .vdemo__head .eyebrow{justify-content:center}
  .vdemo__lede{max-width:62ch;margin-left:auto;margin-right:auto}
  .vdemo__frame{border-radius:24px}
  .vdemo__badge{left:18px;top:18px;padding:8px 14px}

  /* Une seule ligne, tout centré verticalement : pastille, texte, puis
     les deux repères chiffrés. Aucune hauteur minimale, la carte fait
     exactement la hauteur de son contenu. */
  .mesure{
    margin-top:30px;padding:22px 26px 22px 29px;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;gap:20px;
  }
  .mesure__metrics{grid-template-columns:repeat(2,minmax(128px,auto))}
  .mesure__p{max-width:58ch}
}

@media (prefers-reduced-motion:reduce){
  .vdemo__disc{transition:none}
  .vdemo__play:hover .vdemo__disc{transform:none}
  .vdemo__curtain{display:none}
}

/* ============================================================
   10. UNITÉ EXTÉRIEURE — SÉLECTEUR DE CONFIGURATION

   Tout est préfixé .uext : aucune règle n'est partagée avec une autre
   section, aucune classe globale n'est redéfinie.

   UN SEUL BALISAGE, DEUX MISES EN PAGE.
   Au-dessus de 1024px, display:contents efface la boîte de
   .uext__item : les trois en-têtes deviennent trois onglets sur la
   première ligne de la grille, les trois panneaux se superposent dans
   la seconde, et seul l'actif est affiché. En dessous, .uext__item
   redevient une carte et la paire en-tête + panneau se lit comme un
   accordéon. Aucune image n'est donc écrite deux fois dans le
   document, et aucune n'est chargée pour rien.

   REPLI SANS SCRIPT.
   Toutes les règles qui masquent un panneau sont écrites sous
   .uext--js, classe posée par le script lui-même. Sans JavaScript, les
   trois panneaux restent ouverts et empilés : la section est
   entièrement lisible, simplement sans sélecteur.
   ============================================================ */
.uext{position:relative;background:#fff;overflow:hidden}
/* Base architecturale : blanc, un voile cyan très pâle en haut et un
   soupçon de bleu sur les deux bords. Aucune vague, aucune particule. */
.uext::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(0,157,228,.055), rgba(0,157,228,0) 62%),
    linear-gradient(90deg,
      rgba(0,157,228,.07), rgba(0,157,228,0) 20%,
      rgba(0,157,228,0) 80%, rgba(0,157,228,.07));
}
.uext>.wrap{position:relative;z-index:1}

#unite-exterieure .uext__head{max-width:64ch;margin-bottom:28px}
.uext__lede{margin:0}

/* ------------------------------------------------------------
   L'ENSEMBLE ET SES TROIS ÉLÉMENTS
   ------------------------------------------------------------ */
.uext__set{display:grid;gap:14px}

.uext__item{
  background:#fff;
  border:1px solid rgba(0,157,228,.20);border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,117,180,.07);
  transition:transform 280ms cubic-bezier(.22,.61,.36,1),
             box-shadow 280ms ease, border-color 280ms ease;
}

/* ---- L'en-tête : onglet en grand écran, ligne d'accordéon en petit ---- */
.uext__hd{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}
.uext__btn{
  width:100%;display:flex;align-items:center;gap:12px;
  margin:0;padding:15px 16px;
  background:none;border:0;border-radius:0;
  font:inherit;color:var(--texte-fort);text-align:left;cursor:pointer;
  transition:transform 280ms cubic-bezier(.22,.61,.36,1),
             box-shadow 280ms ease, border-color 280ms ease,
             background-color 280ms ease;
}
.uext__bn{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#EAF4FC;color:#0678A8;
  font-family:'Manrope','Inter',sans-serif;
  font-size:12px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  transition:background-color 280ms ease, color 280ms ease;
}
.uext__bt{
  flex:1;min-width:0;
  font-family:'Manrope','Inter',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-.012em;line-height:1.25;
}
.uext__plus{
  flex:none;width:20px;height:20px;color:var(--bleu-action);
  transition:transform .35s ease;
}
.uext--js .uext__btn.is-open .uext__plus{transform:rotate(45deg)}

/* ---- Le panneau ----
   Sous 1024px, la hauteur est animée par grid-template-rows 0fr -> 1fr :
   aucune hauteur n'est mesurée ni figée, donc un texte plus long, une
   traduction ou un retour à la ligne imprévu ne peuvent pas être
   coupés. .uext__panin porte min-height:0 et overflow:hidden, sans
   quoi la ligne de grille ne saurait pas descendre sous la hauteur
   naturelle de son contenu. */
.uext--js .uext__pan{
  display:grid;grid-template-rows:0fr;opacity:0;
  /* visibility, et pas seulement une hauteur nulle : un panneau replié
     à 0fr reste dans l'arbre d'accessibilité et ses liens comme ses
     images continueraient d'être annoncés et atteignables au clavier.
     Le délai de 0,45s laisse la fermeture se jouer entièrement avant
     que le contenu ne disparaisse. */
  visibility:hidden;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),
             opacity .3s ease, visibility 0s linear .45s;
}
.uext--js .uext__pan.is-open{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),
             opacity .3s ease, visibility 0s;
}
.uext__panin{min-height:0;overflow:hidden}

.uext__media{margin:0;position:relative;overflow:hidden;background:var(--bleu-pale-2)}
.uext__img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:60% 55%;
}
/* Un cadrage par visuel : le groupe extérieur, son support et le
   contexte de pose ne doivent jamais être entamés. */
.uext__img--balcon{object-position:56% 50%}
.uext__img--appui{object-position:62% 52%}

.uext__info{display:flex;flex-direction:column;align-items:flex-start}
/* Le numéro de configuration n'existe plus qu'à un seul endroit :
   l'onglet en grand écran, l'en-tête d'accordéon en petit. Le répéter
   au-dessus du titre du panneau ne disait rien de plus. */
.uext__h{margin:0 0 8px;font-size:1.125rem;line-height:1.3;letter-spacing:-.02em}
.uext__p{margin:0;font-size:15px;line-height:1.6;color:var(--texte)}
.uext__badge{
  margin-top:14px;display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:99px;
  background:#EAF4FC;border:1px solid rgba(0,157,228,.26);color:#0678A8;
  font-family:'Manrope','Inter',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;white-space:nowrap;
}

/* ------------------------------------------------------------
   LA NOTE COPROPRIÉTÉ
   Elle suit directement le sélecteur : le bandeau de cotes qui
   s'intercalait ici a été retiré, et sa marge avec lui.
   Une carte de réassurance, pas un bandeau d'alerte. Trois éléments
   et rien d'autre : pastille, question, réponse.
   ------------------------------------------------------------ */
.uext__note{
  max-width:640px;margin:22px auto 0;
  display:grid;grid-template-columns:40px minmax(0,1fr);
  column-gap:12px;row-gap:4px;align-items:center;
  padding:15px 17px;
  border:1px solid rgba(0,157,228,.22);border-radius:14px;
  background:linear-gradient(140deg,#FFFFFF 0%,#F7FBFE 100%);
  box-shadow:0 6px 20px rgba(0,117,180,.07);
}
.uext__nico{
  grid-column:1;grid-row:1;
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#EAF4FC;color:#0678A8;
  box-shadow:inset 0 0 0 1px rgba(0,157,228,.20);
}
.uext__nq{
  grid-column:2;grid-row:1;margin:0;
  font-family:'Manrope','Inter',sans-serif;
  font-size:15px;font-weight:700;line-height:1.3;color:var(--texte-fort);
}
.uext__na{
  grid-column:1 / -1;grid-row:2;margin:0;
  font-size:14.5px;line-height:1.5;color:var(--texte);
}

/* ------------------------------------------------------------
   MOBILE ET TABLETTE — sous 1024px : accordéon
   ------------------------------------------------------------ */
@media (max-width:1023px){
  .uext__btn{min-height:56px;padding:16px 17px}
  /* Le visuel occupe toute la largeur de la carte, en paysage constant.
     16/10 est le rapport natif des trois sources : aucun recadrage,
     donc aucun risque d'entamer la pose. */
  .uext__media{aspect-ratio:16 / 10;border-radius:14px;margin:0 17px}
  /* Aucun rembourrage sur .uext__panin : c'est LUI que la ligne de
     grille réduit à zéro, et un rembourrage sur l'élément réduit
     survit à la réduction. Une carte fermée gardait ainsi une bande
     vide de 18px sous son en-tête. La respiration du bas revient donc
     au panneau de texte, qui disparaît avec le reste. */
  .uext__panin{display:block;padding:0}
  .uext__info{padding:14px 17px 18px}
  /* En accordéon, le titre est déjà porté par l'en-tête dépliable.
     Le panneau ouvert ne contient donc que le visuel, la description
     et le badge. Le titre reste dans le document pour le grand écran,
     où le panneau est le seul endroit qui le porte. */
  .uext__h{display:none}
  .uext__p{max-width:none}
}

@media (max-width:767px){
  .uext__title{font-size:clamp(28px,8vw,34px);line-height:1.08;letter-spacing:-.03em}
  #unite-exterieure .uext__head{margin-bottom:22px}
  .uext__set{gap:12px}
  .uext__btn{padding:15px 16px;min-height:54px}
  .uext__media{margin:0 16px;border-radius:14px}
  .uext__info{padding:13px 16px 16px}
  .uext__note{margin-top:18px;padding:14px 15px}
}

/* ------------------------------------------------------------
   DESKTOP — 1024px et plus : onglets et panneau de présentation
   ------------------------------------------------------------ */
@media (min-width:1024px){
  /* Le halo cyan derrière le panneau. Posé sur la section, dont
     overflow:hidden le contient : il ne peut pas ouvrir de barre de
     défilement horizontale. */
  .uext::after{
    content:"";position:absolute;left:50%;top:56%;
    width:min(1180px,92vw);height:620px;transform:translate(-50%,-50%);
    z-index:0;pointer-events:none;
    background:radial-gradient(closest-side,
      rgba(0,157,228,.14), rgba(0,157,228,.04) 55%, rgba(0,157,228,0) 74%);
  }

  #unite-exterieure .uext__head{margin-bottom:34px}
  /* Le titre reste franc sans devenir démesuré : il tient sur une
     ligne aux largeurs de bureau courantes. */

  .uext--js .uext__set{
    grid-template-columns:repeat(3,1fr);
    column-gap:14px;row-gap:22px;
  }
  /* La boîte de l'élément disparaît : l'en-tête et le panneau
     deviennent des cellules de la grille de .uext__set. */
  .uext--js .uext__item{
    display:contents;background:none;border:0;border-radius:0;
    box-shadow:none;overflow:visible;
  }
  /* Placement explicite, jamais automatique : trois onglets sur la
     première ligne, les trois panneaux dans la même cellule de la
     seconde. */
  .uext--js .uext__item:nth-child(1) .uext__hd{grid-column:1;grid-row:1}
  .uext--js .uext__item:nth-child(2) .uext__hd{grid-column:2;grid-row:1}
  .uext--js .uext__item:nth-child(3) .uext__hd{grid-column:3;grid-row:1}
  .uext--js .uext__pan{grid-column:1 / -1;grid-row:2}

  /* L'onglet redevient une carte à part entière */
  .uext--js .uext__btn{
    padding:15px 18px;border:1px solid rgba(0,157,228,.20);
    border-radius:15px;background:#fff;
    box-shadow:0 4px 14px rgba(0,117,180,.06);
  }
  .uext--js .uext__btn.is-open{
    background:linear-gradient(140deg,#FFFFFF 0%,#EAF5FD 100%);
    border-color:rgba(0,157,228,.55);
    box-shadow:0 10px 26px rgba(0,117,180,.15), 0 0 24px rgba(0,157,228,.16);
  }
  .uext--js .uext__btn.is-open .uext__bn{background:#CDE8F8;color:#05699B}
  /* Le plus n'a pas de sens en onglets : il n'y a rien à replier. */
  .uext__plus{display:none}

  /* Le panneau. Hauteur commandée par le visuel, identique pour les
     trois : aucun saut de hauteur au changement d'onglet. */
  /* En onglets, c'est display:none qui écarte les panneaux inactifs,
     de l'écran comme de l'arbre d'accessibilité : la visibilité
     retrouve donc sa valeur normale. */
  .uext--js .uext__pan{
    display:none;grid-template-rows:none;opacity:1;
    visibility:visible;transition:none;
  }
  .uext--js .uext__pan.is-open{display:block;transition:none}
  .uext__panin{
    display:grid;grid-template-columns:62fr 38fr;align-items:stretch;
    border:1px solid rgba(0,157,228,.24);border-radius:24px;
    background:#fff;overflow:hidden;padding:0;
    box-shadow:0 16px 40px rgba(0,117,180,.13);
    transition:transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease;
  }
  .uext__media{
    aspect-ratio:auto;height:100%;min-height:420px;border-radius:0;margin:0;
  }
  .uext__info{
    justify-content:center;padding:36px 38px;
  }
  .uext__h{margin:0 0 10px;font-size:1.375rem}
  .uext__p{font-size:16px;line-height:1.65}
  .uext__badge{margin-top:20px}

  .uext__note{
    max-width:700px;margin-top:30px;padding:16px 22px;
    grid-template-columns:44px minmax(0,1fr) auto;
    column-gap:16px;row-gap:0;
  }
  .uext__nico{width:44px;height:44px;border-radius:13px}
  .uext__nq{grid-column:2;grid-row:1;font-size:15.5px}
  .uext__na{grid-column:3;grid-row:1;font-size:15px;text-align:right}
}

/* ------------------------------------------------------------
   SURVOL — le même vocabulaire bleu clair que les cartes corrigées
   des quatre fonctions et des chiffres du hero. Jamais de marine,
   jamais de voile sombre, jamais de teinte posée sur l'image.
   ------------------------------------------------------------ */
@media (hover:hover) and (pointer:fine){
  .uext--js .uext__btn:hover{
    transform:translateY(-3px) scale(1.015);
    border-color:rgba(0,157,228,.5);
    box-shadow:0 12px 28px rgba(0,117,180,.14), 0 0 22px rgba(0,157,228,.18);
  }
  .uext--js .uext__btn:hover .uext__bn{background:#CDE8F8;color:#05699B}
  .uext__panin:hover{
    transform:translateY(-2px);
    box-shadow:0 22px 50px rgba(0,117,180,.17);
  }
  /* Sans survol matériel, l'accordéon garde sa propre carte : elle se
     soulève de la même façon. */
  .uext__item:hover{
    border-color:rgba(0,157,228,.42);
    box-shadow:0 12px 26px rgba(0,117,180,.12);
  }
}
/* Appareils tactiles : un appui bref, jamais un survol resté collé. */
@media (hover:none){
  .uext__item:active{transform:scale(.994)}
  .uext__item{transition:transform 140ms ease, box-shadow 240ms ease}
}

@media (prefers-reduced-motion:reduce){
  .uext__item,.uext__btn,.uext__panin,.uext__plus,.uext__bn{transition:none}
  .uext--js .uext__pan{transition:none}
  .uext--js .uext__btn:hover,.uext__panin:hover{transform:none}
}

/* Bloc de reassurance : une carte posee, pas un bandeau d'alerte. */
.callout{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bleu-pale);padding:32px;margin-top:28px;box-shadow:var(--shadow);
}
.callout__head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.callout__ico{
  flex:none;width:46px;height:46px;border-radius:14px;
  background:#fff;border:1px solid var(--line);color:var(--bleu-profond);
  display:flex;align-items:center;justify-content:center;
}
.callout__head h3{margin:0;font-size:1.125rem}
.callout h3{font-size:1.125rem}
.callout p{font-size:16px;color:var(--texte);margin:0 0 .8em;line-height:1.65}
/* Puces dessinees : le marqueur natif ne se cale pas sur cette mise en page */
.callout ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  font-size:16px;color:var(--texte);line-height:1.65}
.callout li{position:relative;padding-left:24px;margin:0}
.callout li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--bleu-profond);
}
.place__legal .callout{margin-top:0}
@media (min-width:900px){
  .place__legal .callout{padding:40px 44px}
  .place__legal .callout p,.place__legal .callout ul{max-width:78ch}
}

/* La section 11 (WI-FI / SMARTHOME) a été supprimée avec l'ancienne
   section Pilotage : ses règles .wifi*, .pilot* et .mcar* ne servaient
   qu'à elle. La nouvelle section vit dans le bloc « PILOTAGE
   CINÉMATIQUE — DESKTOP », en fin de feuille. */

/* ============================================================
   13. CARACTERISTIQUES — accordeon clair
   Section entierement sur fond clair : aucun aplat marine, aucun
   degrade. Un seul groupe ouvert a la fois.
   ============================================================ */
#fiche-technique{background:#F4F8FC;padding:56px 0}

/* Rien de local sur l'en-tete : il occupe toute la largeur du .wrap,
   exactement comme le bloc titre de Pilotage, et l'eyebrow comme le h2
   heritent des composants partages. Seul l'ecart au bloc est pose ici.
   Les marges basses du h2 et du bloc fusionnent : 40px ici donne bien
   40px au rendu, pas 16 + 40. */
.cx__head{margin:0 0 40px}

.cx{
  max-width:900px;margin:0 auto;
  background:#FFFFFF;border:1px solid #EDF2F7;border-radius:26px;
  box-shadow:0 10px 40px rgba(37,52,84,.08);
  overflow:hidden;
}
.cx__item+.cx__item{border-top:1px solid #E8EDF3}
.cx__h{margin:0}

/* --- En-tete --- */
.cx__btn{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:24px 28px;text-align:left;cursor:pointer;
  background:#FFFFFF;border:0;
  font-family:inherit;
  transition:background-color .18s ease-out;
}
.cx__ico{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0894D2;color:#FFFFFF;
}
.cx__ico svg{display:block;width:22px;height:22px}
.cx__txt{flex:1 1 auto;min-width:0}
.cx__name{
  display:block;font-family:'Manrope','Inter',sans-serif;
  font-size:20px;font-weight:600;color:#0894D2;line-height:1.25;
}
.cx__desc{display:block;margin-top:4px;font-size:15px;font-weight:400;color:#5A6B85;line-height:1.4}
/* Toujours le meme +, jamais une croix : il pivote de 45 degres */
.cx__plus{
  flex:none;width:20px;height:20px;color:#8497AE;
  transition:transform .3s ease-out, color .18s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .cx__btn:hover{background:#FAFCFE}
}
/* En-tete blanc, donnees sur fond bleu : le contraste suffit a marquer
   l'ouverture, avec le + qui pivote. Aucun autre repere d'etat. */
.cx__btn[aria-expanded="true"] .cx__plus{transform:rotate(45deg);color:#0894D2}
.cx__btn:focus-visible{outline:2px solid #0894D2;outline-offset:2px}

/* --- Panneau --- */
.cx__panel{overflow:hidden;max-height:0;background:#EFF6FC;transition:max-height .35s ease-out}
.cx__panel>dl{
  margin:0;opacity:0;transform:translateY(6px);
  transition:opacity .2s ease-out, transform .2s ease-out;
}
.cx__panel.is-open>dl{opacity:1;transform:none}

/* --- Lignes de donnees --- */
.cx__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:14px 28px;
}
.cx__row+.cx__row{border-top:1px solid rgba(37,52,84,.08)}
.cx__row dt{font-size:15px;font-weight:400;color:#5A6B85;line-height:1.45}
.cx__row dd{
  margin:0;font-size:15px;font-weight:600;color:#253454;
  text-align:right;line-height:1.45;font-variant-numeric:tabular-nums;
}

@media (min-width:900px){#fiche-technique{padding:96px 0}}

/* --- Sous 768px : valeur sous son libelle, tout aligne a gauche --- */
@media (max-width:767px){
  .cx__btn{padding:20px;gap:14px;min-height:44px}
  .cx__ico{width:38px;height:38px}
  .cx__ico svg{width:19px;height:19px}
  .cx__name{font-size:17px}
  .cx__desc{font-size:14px}
  .cx__row{display:block;padding:14px 20px}
  .cx__row dd{text-align:left;margin-top:3px}
}

@media (prefers-reduced-motion:reduce){
  .cx__panel{transition:none}
  .cx__panel>dl{transition:none;opacity:1;transform:none}
  .cx__btn,.cx__plus{transition:none}
}

/* ============================================================
   14. CONTENU DE LA BOÎTE
   ============================================================ */
/* La légende numérotée est imprimée sur le visuel : rien à répéter en HTML.
   Le visuel et son indication ferment la section : pas d'espace en trop
   sous eux, la respiration vient du padding de section. */
.kit{display:grid;gap:14px}
#contenu-boite{padding-bottom:calc(var(--pad-section) - 14px)}
.kit__photo{
  margin:0 auto;max-width:1200px;width:100%;
  border:1px solid var(--line);border-radius:var(--radius);
  /* Blanc pur, du haut jusqu'en bas. Le fond bleu pale d'origine ne se
     voyait que dans le court instant ou le visuel n'etait pas encore
     charge, mais il suffisait qu'un element reprenne un pixel de
     hauteur dans le flux pour qu'il ressorte en bandeau derriere la
     premiere rangee de pastilles. Le visuel lui-meme est blanc a
     (254,254,254) sur ses quatre bords : rien ne doit differer. */
  background:#fff;overflow:hidden;box-shadow:var(--shadow);
  position:relative;                 /* repere des pastilles */
}
/* Aucun recadrage. Le rapport est pose par palier : les deux fichiers
   n'ont pas la meme forme, la boite est donc juste avant meme le
   telechargement et les pastilles ne bougent pas au chargement. */
.kit__photo img{width:100%;height:auto;display:block;aspect-ratio:1024/1536}
@media (min-width:900px){.kit__photo img{aspect-ratio:1672/941}}

/* ---- Pastilles numerotees ----
   Coordonnees relevees carte par carte sur chaque fichier, exprimees en
   pourcentages : left en % de la largeur, top en % de la hauteur, donc
   exactes a n'importe quelle taille d'affichage. Les lignes du visuel
   mobile ne sont pas regulierement espacees, d'ou des valeurs qui ne
   suivent pas une progression constante.
   pointer-events:none : le tap traverse la pastille et ouvre le calque
   plein ecran, comme sur le reste de l'image. */
.kit__badge{
  position:absolute;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:#0894D2;color:#fff;
  font-family:'Manrope','Inter',sans-serif;
  font-size:13px;font-weight:700;line-height:1;
  box-shadow:0 2px 6px rgba(0,32,79,.38);
}
/* Mobile, 2 colonnes x 5 lignes, pastille au coin haut-gauche.
   Bords releves sur le fichier 1024x1536 : colonnes a 32 et 522 px,
   lignes a 13, 354, 692, 958 et 1225 px. Les lignes ne sont pas
   regulierement espacees, d'ou des valeurs qui ne progressent pas d'un
   pas constant. Un seul et meme decalage partout, 12px CSS pour un
   conteneur de 375px, soit +3,20% en largeur et +2,13% en hauteur :
   les deux pastilles d'une meme ligne partagent donc exactement le
   meme top, et les cinq d'une meme colonne le meme left.
   Pose sur la ligne du libelle : essaye, abandonne. Les noms sont
   centres dans l'image, l'espace disponible a cote varie de 22 a 55px
   et les noms longs se faisaient manger. */
.kit__badge--1,.kit__badge--3,.kit__badge--5,.kit__badge--7,.kit__badge--9{left:6.33%}
.kit__badge--2,.kit__badge--4,.kit__badge--6,.kit__badge--8,.kit__badge--10{left:54.18%}
.kit__badge--1,.kit__badge--2{top:2.98%}
.kit__badge--3,.kit__badge--4{top:25.18%}
.kit__badge--5,.kit__badge--6{top:47.19%}
.kit__badge--7,.kit__badge--8{top:64.5%}
.kit__badge--9,.kit__badge--10{top:81.89%}

@media (min-width:900px){
  /* Desktop : coin haut-gauche des cartes, la place ne manque pas.
     Colonnes a 14, 349, 677, 990 et 1332 px, lignes a 14 et 497 px sur
     les 1672x941. Decalage de 12px CSS pour un conteneur de 1160px,
     soit +1,03% et +1,84%. Pastille rendue a sa taille pleine. */
  .kit__badge{width:30px;height:30px;font-size:15px}
  .kit__badge--1,.kit__badge--6{left:1.87%}
  .kit__badge--2,.kit__badge--7{left:21.91%}
  .kit__badge--3,.kit__badge--8{left:41.52%}
  .kit__badge--4,.kit__badge--9{left:60.25%}
  .kit__badge--5,.kit__badge--10{left:80.7%}
  .kit__badge--1,.kit__badge--2,.kit__badge--3,.kit__badge--4,.kit__badge--5{top:3.33%}
  .kit__badge--6,.kit__badge--7,.kit__badge--8,.kit__badge--9,.kit__badge--10{top:54.65%}
}

/* Loupe du kit : coin haut-droit et 40px, la ou les deux autres visuels
   gardent 46px en bas a droite. Le reste (cercle blanc, ombre, masquage
   au-dela de 900px) vient de la regle .img__zoom commune. */
.kit__photo .img__zoom{top:12px;right:12px;bottom:auto;width:40px;height:40px}

/* ---- Format desktop : plus compact, plus éditorial ----
   Le visuel passe de 1200 à 1060px et la section se resserre au-dessus
   et en dessous. Les pastilles sont posées en pourcentages : elles
   suivent la réduction sans qu'une seule coordonnée ne bouge, et le
   fichier source fait 1672px de large, donc l'image reste réduite,
   jamais agrandie. La mise en page sous 900px n'est pas touchée. */
@media (min-width:900px){
  .kit__photo{max-width:950px}

  /* Au-dessus de 900px la règle commune masque la loupe : c'est
     l'image qui ouvre la visionneuse. Mais une image ne prend pas le
     focus, si bien qu'il n'existait aucun chemin clavier vers
     l'agrandissement, et rien où rendre le focus à la fermeture. La
     loupe est donc rendue à l'affichage, invisible et traversée par la
     souris, et redevient visible dès qu'elle reçoit le focus au
     clavier.

     position:absolute est OBLIGATOIRE ici. La règle qui la porte vit
     dans le bloc max-width:899px : au-dessus, la loupe redevient un
     bloc dans le flux, haut de 40px, qui pousse le visuel vers le bas
     et ouvre un bandeau derrière la première rangée de pastilles. Les
     autres propriétés sont reprises pour que le bouton garde son
     aspect quand le focus le révèle. */
  .kit__photo .img__zoom{
    display:flex;opacity:0;pointer-events:none;
    position:absolute;z-index:2;
    align-items:center;justify-content:center;
    border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.94);color:var(--bleu-profond);
    border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,32,79,.22);
  }
  .kit__photo .img__zoom:focus-visible{opacity:1;pointer-events:auto}
  #contenu-boite .head{margin-bottom:34px}
  #contenu-boite{
    padding-top:calc(var(--pad-section) - 10px);
    padding-bottom:calc(var(--pad-section) - 24px);
  }
}

/* ============================================================
   15. AVIS CLIENTS — DIAPORAMA DE TÉMOIGNAGES

   Onze avis, un seul visible à la fois. Deux principes tiennent toute
   la section :

   1. LA CARTE A UNE TAILLE FIXE. 500px de haut en grand écran, 540px
      en petit. Un avis long ne peut donc PAS faire grandir la carte,
      et les onze ont exactement les mêmes dimensions. L'excédent de
      texte est masqué derrière un fondu et se lit dans un rideau
      flottant, qui ne prend aucune place dans le document tant qu'il
      est fermé.

   2. AUCUNE MARGE NÉGATIVE. .rv__stage vit hors de .wrap : sous 900px
      la piste occupe toute la fenêtre et centre exactement une carte
      grâce à son seul rembourrage.

   Tout est préfixé .rv. Le texte des avis est écrit en dur dans le
   HTML : il reste indexable, et sans JavaScript les onze avis
   s'affichent les uns sous les autres, entiers.
   ============================================================ */
.rv{position:relative;background:var(--bleu-pale);overflow:hidden}
.rv::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 52% at 50% 32%, rgba(255,255,255,.86), rgba(255,255,255,0) 70%),
    linear-gradient(90deg,
      rgba(0,157,228,.07), rgba(0,157,228,0) 18%,
      rgba(0,157,228,0) 82%, rgba(0,157,228,.07));
}
.rv>.wrap,.rv>.rv__stage{position:relative;z-index:1}
#avis .rv__head{max-width:64ch;margin-bottom:28px}
.rv__lede{margin:0}

/* ------------------------------------------------------------
   LA PISTE ET LA CARTE
   ------------------------------------------------------------ */
.rv__stage{position:relative;overflow:hidden}
.rv__slides{display:grid}

.rv__slide{
  grid-area:1 / 1;position:relative;
  display:grid;grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr);
  background:#fff;
  border:1px solid rgba(0,157,228,.24);border-radius:20px;overflow:hidden;
  box-shadow:0 14px 36px rgba(0,117,180,.12), 0 0 24px rgba(0,157,228,.07);
}
/* Sans script les onze sont empilées et lisibles ; .rv--js n'en laisse
   qu'une. */
.rv--js .rv__slide{visibility:hidden;opacity:0;pointer-events:none}
.rv--js .rv__slide.is-on{visibility:visible;opacity:1;pointer-events:auto}

/* ---- La photo du client ----
   object-fit:contain, jamais cover : ces photos sont prises au
   téléphone, en portrait pour la plupart. Recadrées pour remplir le
   cadre, elles coupaient l'appareil en deux. La photo tient donc
   ENTIÈRE dans un cadre glacé de hauteur fixe, sans recadrage ni
   mise à l'échelle. Les onze cadres ont la même hauteur, quel que
   soit le rapport de la source. */
/* ---- La photo du client ----
   Elle REMPLIT son cadre, bord a bord, sans rembourrage ni bande
   bleue autour. Le cadre garde exactement la meme hauteur sur les
   onze diapositives : object-fit:cover recadre pour y parvenir, sans
   jamais etirer ni deformer l'image. Les coins hauts arrondis sont
   tenus par l'overflow:hidden de la carte. */
.rv__media{
  position:relative;margin:0;overflow:hidden;padding:0;
  background:var(--bleu-pale-2);
  height:220px;
}
.rv__img{
  position:relative;z-index:1;
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--pos,center 50%);transform:none;
}
/* Quelques photos perdaient l'appareil au recadrage : elles passent en
   contain, entieres, et c'est une copie agrandie et floutee du meme
   fichier qui remplit le cadre derriere. Aucune bande vide, aucun bord
   net, et la partie importante reste toujours visible. */
.rv__media--fit .rv__img{
  object-fit:contain;
  /* Un cran plus grande que le strict contain : la photo occupe mieux
     le cadre, l'appareil reste entier. */
  transform:scale(1.12);
  /* Ses deux bords verticaux se fondent dans le fond : plus de
     cassure nette entre la photo nette et sa copie floue. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
/* Copie agrandie et floutée du MÊME fichier. Pleine opacité et
   saturation relevée : elle garde les couleurs de la photo au lieu de
   virer au gris plat sur les côtés. */
.rv__blur{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--pos,center 50%);
  filter:blur(15px) saturate(128%);transform:scale(1.32);
  opacity:1;pointer-events:none;
}

/* ---- Le panneau d'avis ----
   Colonne flex : l'identité, la note et le titre gardent leur hauteur,
   le texte prend ce qui reste (min-height:0, sinon un contenu long
   refuserait de se réduire) et les boutons ferment la carte. */
.rv__body{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  padding:16px 16px 14px;
}
.rv__ident{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.rv__who{
  margin:0;font-family:'Manrope','Inter',sans-serif;
  font-size:15px;font-weight:700;color:var(--texte-fort);
}
.rv__badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:99px;
  background:#E4F5EA;color:#186B3A;border:1px solid rgba(24,107,58,.20);
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  line-height:1;white-space:nowrap;
}
.rv__badge svg{flex:none}
.rv__rate{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:7px}
.rv__stars{display:flex;gap:3px}
.rv__star{color:#D3E1EC;flex:none}
.rv__star.is-on{color:var(--bleu-vif)}
/* Demi-etoile : deux etoiles superposees, la bleue rognee a moitie. */
.rv__star--half{position:relative;display:inline-flex;width:16px;height:16px;flex:none}
.rv__star--half svg{position:absolute;inset:0}
.rv__star-bg{color:#D3E1EC}
.rv__star-fg{color:var(--bleu-vif);clip-path:inset(0 50% 0 0)}
.rv__date{margin:0;font-size:13px;color:#5A7590}
.rv__title{
  margin:11px 0 0;font-size:1rem;line-height:1.32;
  color:var(--texte-fort);letter-spacing:-.015em;
}

.rv__quote{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  margin-top:9px;
}
/* Fondu blanc sur la dernière ligne. Retiré quand l'avis tient en
   entier (classe posée par le script). */
.rv__quote::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:44px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 86%);
  pointer-events:none;transition:opacity 220ms ease;
}
.rv__quote.is-short::after{opacity:0}
.rv__text{margin:0;padding:0;border:0;font-size:15px;line-height:1.58;color:#1E3853}
.rv__text p{margin:0 0 .7em}
.rv__text p:last-child{margin-bottom:0}

.rv__acts{
  flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:11px;
}
.rv__more{
  padding:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--bleu-action);
  transition:color 220ms ease;
}
.rv__more[hidden]{display:none}

/* ------------------------------------------------------------
   LE RIDEAU DE LECTURE
   Fermé, il porte l'attribut hidden : il ne s'affiche pas, ne prend
   aucune place dans le document et sort de l'arbre d'accessibilité.
   Il ne peut donc rien ajouter à la hauteur du diaporama.
   ------------------------------------------------------------ */
.rv__read[hidden]{display:none}
.rv__read{
  position:absolute;z-index:5;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px) saturate(115%);
  backdrop-filter:blur(16px) saturate(115%);
  border:1px solid rgba(0,157,228,.34);
  box-shadow:0 22px 54px rgba(0,117,180,.20);
  /* Rideau : découvert du haut vers le bas. */
  clip-path:inset(0 0 100% 0);
  transition:clip-path 500ms cubic-bezier(.22,.61,.36,1);
}
.rv__read.is-in{clip-path:inset(0 0 0 0)}
.rv__read-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rv__read-x{
  flex:none;width:36px;height:36px;min-width:36px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#EAF4FC;border:1px solid rgba(0,157,228,.34);color:var(--texte-fort);
  transition:transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms ease;
}
.rv__read-title{
  margin:11px 0 0;font-family:'Manrope','Inter',sans-serif;
  font-size:1rem;font-weight:700;line-height:1.32;color:var(--texte-fort);
}
/* La seule zone qui défile : le texte, jamais la page ni le diaporama. */
.rv__read-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  margin-top:10px;
  /* 64px de réserve en bas : la dernière phrase peut défiler
     entièrement au-dessus du bord et du bouton « Réduire ». */
  padding:0 6px 64px 0;
}
/* ---- Mode déplié : plus AUCUN effet d'aperçu ----
   Déplacée dans le rideau, la citation perd sa hauteur bornée, son
   fondu de bas de bloc, tout masque, tout flou, toute réduction
   d'opacité et toute limite de lignes. Le texte y est net et
   pleinement opaque, du premier au dernier mot. */
.rv__read .rv__quote{
  flex:none;min-height:0;max-height:none;
  overflow:visible;margin-top:0;
  -webkit-mask-image:none;mask-image:none;
  filter:none;opacity:1;
}
.rv__read .rv__quote::after{content:none;display:none}
.rv__read .rv__text,
.rv__read .rv__text p{
  filter:none;opacity:1;
  -webkit-line-clamp:none;-webkit-box-orient:initial;
  display:block;overflow:visible;
}
.rv__less{
  flex:none;align-self:flex-start;margin-top:12px;padding:0;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:var(--bleu-action);
}

/* ------------------------------------------------------------
   COMMANDES — aucun compteur chiffré
   ------------------------------------------------------------ */
/* Fleches posees a cheval sur les bords de la carte : moitie dedans,
   moitie dehors. Masquees en petit ecran, ou l'on ne navigue qu'au
   doigt. */
.rv__arrow{
  position:absolute;top:50%;z-index:6;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(0,157,228,.30);color:var(--texte-fort);
  box-shadow:0 6px 20px rgba(0,117,180,.16);
  transition:transform 200ms ease, background-color 200ms ease,
             color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.rv__arrow--prev{left:-23px;transform:translateY(-50%)}
.rv__arrow--next{right:-23px;transform:translateY(-50%)}
/* Les deux flèches s'effacent pendant la lecture d'un avis complet :
   elles chevauchent le bord de la carte, donc le bord du rideau. La
   classe est posée sur la section par le script et retirée à la
   fermeture. */
.rv--reading .rv__arrow{opacity:0;pointer-events:none}

/* ---- Indice de glissement, petit ecran ---- */
.rv__hint{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px 10px;margin:12px 0 0;
  font-size:13px;line-height:1.4;color:var(--bleu-action);text-align:center;
}
.rv__hint-swipe{color:#3B7EA8}
.rv__hint-arrow{display:inline-block;font-style:normal}
/* Deux allers-retours de 5px a l'arrivee de la section, puis plus
   rien : l'animation n'a que deux iterations, elle ne boucle pas. */
@keyframes rvNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.rv__hint.is-cue .rv__hint-arrow{animation:rvNudge 720ms ease-in-out 2}
.rv__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------
   MOBILE — sous 900px
   UNE seule carte, centrée, sans aperçu de la suivante. Le pas
   d'écart vaut exactement (100vw - largeur de carte) : la carte
   voisine commence donc au-delà du bord de la fenêtre et rien ne
   dépasse, à aucune largeur.
   ------------------------------------------------------------ */
@media (max-width:899px){
  .rv__slides{
    --rv-cw:min(360px, calc(100vw - 32px));
    display:flex;align-items:start;
    gap:calc(100vw - var(--rv-cw));
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px calc((100vw - var(--rv-cw)) / 2) 8px;
    scroll-padding-inline:calc((100vw - var(--rv-cw)) / 2);
  }
  .rv__slides::-webkit-scrollbar{display:none}
  .rv--js .rv__slide,
  .rv--js .rv__slide.is-on{visibility:visible;opacity:1;pointer-events:auto}
  .rv__slide{
    grid-area:auto;flex:0 0 var(--rv-cw);scroll-snap-align:center;
    /* Hauteur identique pour les onze : la piste ne peut pas prendre
       celle du plus long avis, et aucun blanc ne traîne sous les
       courts. */
    height:540px;
  }
  .rv__media{height:220px}
  /* Sous 900px on ne change d'avis qu'au doigt : ni fleches, ni
     filet, ni vignettes. Seul l'indice de glissement reste. */
  .rv__arrow{display:none !important}
  #avis{padding-bottom:26px}

  /* Panneau de lecture plein ecran. Le script le deplace dans <body>
     a l'ouverture : sinon il restait prisonnier du contexte
     d'empilement de .rv__stage (position:relative, z-index:1) et
     passait SOUS le voile, quel que soit son propre z-index.
     Fond blanc plein, jamais de flou sur le panneau lui-meme. */
  .rv__read{
    position:fixed;inset:0;top:0;left:0;right:0;bottom:0;
    z-index:400;
    width:auto;max-height:none;padding:0;
    background:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border:0;border-radius:0;box-shadow:none;
    clip-path:none;
    transform:translateY(100%);
    transition:transform 450ms cubic-bezier(.22,.61,.36,1);
  }
  .rv__read.is-in{transform:translateY(0)}
  /* En-tete fixe : nom, badge et fermeture restent visibles pendant
     que seul le texte defile. */
  .rv__read-head{
    flex:none;padding:14px 16px 12px;
    border-bottom:1px solid rgba(0,157,228,.18);background:#fff;
  }
  .rv__read>.rv__rate,.rv__read>.rv__read-title{
    flex:none;padding:0 16px;
  }
  .rv__read>.rv__rate{margin-top:10px}
  .rv__read-body{margin-top:10px;padding:0 16px 26px}
  .rv__less{margin:0 0 16px 16px}
}



/* ------------------------------------------------------------
   DESKTOP — 900px et plus
   Carte de taille strictement fixe : 1000px de large au plus, 500px
   de haut, deux colonnes 49 / 51.
   ------------------------------------------------------------ */
@media (min-width:900px){
  #avis .rv__head{margin-bottom:32px}
  .rv__stage{
    width:min(1000px, calc(100vw - 64px));margin-left:auto;margin-right:auto;
    /* Les fleches debordent de 23px : la scene ne doit plus rogner.
       Chaque diapositive garde son propre overflow:hidden, rien ne
       depasse de la carte elle-meme. */
    overflow:visible;
  }
  .rv__arrow{display:flex}
  .rv__hint{display:none}
  /* Toutes les diapositives en position absolue dans une piste de
     hauteur fixe : la hauteur ne dépend donc d'aucun avis, et
     changer de diapositive ne peut pas faire bouger la page. */
  .rv--js .rv__slides{position:relative;height:500px}
  .rv--js .rv__slide{position:absolute;inset:0}
  .rv__slide{
    grid-template-columns:49fr 51fr;grid-template-rows:100%;
    height:500px;
  }
  /* Bord à bord : la photo remplit toute la colonne de gauche, sans
     rembourrage, sans marge, sans bande grise ni cyan autour. Les
     quatre visuels qui passent en contain + fond flou en petit écran
     repassent ici en cover : la colonne est presque carrée, ils la
     remplissent sans laisser de vide. Le recadrage est assumé, jamais
     l'étirement : le rapport de chaque source est préservé. Les coins
     arrondis de gauche sont tenus par overflow:hidden. */
  .rv__media{height:100%;padding:0;overflow:hidden}
  /* En grand écran la colonne est presque carrée : les quatre visuels
     traités en contain + fond flou repassent en cover et la
     remplissent. Ni agrandissement, ni masque, ni copie floue. */
  .rv__media--fit .rv__img{
    object-fit:cover;transform:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .rv__blur{display:none}
  .rv__body{padding:26px 28px 24px}
  .rv__who{font-size:16px}
  .rv__date{font-size:13.5px}
  .rv__title{font-size:1.0625rem;margin-top:12px}
  .rv__text{font-size:15.5px;line-height:1.6}
  .rv__more{font-size:14.5px}

  /* Le rideau ne couvre QUE la colonne de droite et reste dans les
     500px de la carte : la page ne bouge pas d'un pixel. */
  .rv__read{
    top:0;bottom:0;right:0;width:51%;
    padding:24px 26px 22px;
    border-radius:0 20px 20px 0;
  }
}

@media (hover:hover) and (pointer:fine){
  .rv__arrow:hover{
    background:var(--bleu-action);color:#fff;
    border-color:var(--bleu-action);
    box-shadow:0 10px 26px rgba(0,117,180,.28);
  }
  .rv__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
  .rv__arrow--next:hover{transform:translateY(-50%) translateX(3px)}
    .rv__more:hover,.rv__less:hover{color:var(--bleu-vif)}
  .rv__read-x:hover{transform:scale(1.06);box-shadow:0 0 16px rgba(0,157,228,.28)}
}
.rv__arrow:focus-visible,
.rv__more:focus-visible,.rv__less:focus-visible,.rv__read-x:focus-visible{
  outline:3px solid rgba(0,157,228,.45);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .rv__arrow,.rv__read,.rv__quote::after,.rv__read-x{transition:none}
  .rv__arrow--prev:hover,.rv__arrow--next:hover{transform:translateY(-50%)}
  .rv__hint.is-cue .rv__hint-arrow{animation:none}
  .rv__slides{scroll-behavior:auto}
}

/* ============================================================
   16. FAQ
   ============================================================ */
/* Bloc FAQ centré : titre, sur-titre et accordéon sur la même colonne */
.faq{
  max-width:840px;margin:0 auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 26px;box-shadow:var(--shadow);
}
.head--center{max-width:840px;margin-left:auto;margin-right:auto;text-align:center}
.head--center .lede{margin-left:auto;margin-right:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:'Manrope','Inter',sans-serif;
  font-size:1.0625rem;font-weight:700;color:var(--texte-fort);line-height:1.45;
  letter-spacing:-.015em;transition:color .18s ease-out;transition-delay:0s;
}
@media (hover:hover) and (pointer:fine){.faq__q:hover{color:var(--bleu-action)}}
.faq__icon{
  flex:none;width:26px;height:26px;margin-top:1px;color:var(--bleu-action);
  transition:transform .25s ease;
}
.faq__q[aria-expanded="true"]{color:var(--bleu-action)}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a>div{padding:0 0 26px;font-size:16px;color:var(--texte);max-width:70ch;line-height:1.7}
.faq__a p{margin-bottom:.9em}
@media (min-width:900px){.faq{padding:8px 40px}}

/* ============================================================
   17. OFFRE FINALE — FONDS RESPONSIVES ET PORTAIL

   Le fond marine a disparu. Deux visuels le remplacent, servis par un
   <picture> : le navigateur n'en télécharge qu'un seul.

   LE PROBLÈME RÉSOLU ICI, ET COMMENT.
   Un fond en object-fit:cover est recadré différemment à chaque
   largeur : le portail circulaire se déplace, et un produit posé à un
   pourcentage fixe de la SECTION en sortirait. La parade tient en une
   boîte intermédiaire, .final__frame, dont les dimensions reproduisent
   exactement celles du visuel une fois couvert :

     largeur  = max(largeur de section, hauteur de section x rapport)
     hauteur  = max(hauteur de section, largeur de section / rapport)

   Les deux termes sont connus en CSS parce que la section est en pleine
   largeur (100vw) et que sa hauteur est écrite ici (--fh). Le cadre est
   centré et déborde comme le visuel, la section le rogne. Un
   pourcentage exprimé DANS ce cadre tombe donc toujours au même endroit
   du visuel, à toutes les largeurs, sans une ligne de JavaScript.

   Deux cadres superposés et strictement identiques : l'un porte le
   fond (z-index 0, pointer-events:none), l'autre le portail et le
   produit (z-index 1). Le contenu marchand est au-dessus (z-index 2).
   ============================================================ */
.final{
  /* Rapports natifs des deux fichiers, jamais déformés. La valeur de
     base est celle du MOBILE (941x1672) puisque la feuille est écrite
     en mobile-first ; le bloc 900px la remplace par celle du desktop
     (1981x793). Une seule des deux doit s'appliquer à la fois, sans
     quoi le cadre prend la forme d'un fichier et l'image en couvre un
     autre : le cercle sortait alors complètement de l'écran. */
  --fw-ar:0.56280;
  --fh:clamp(760px,200vw,800px);      /* mobile */
  position:relative;overflow:hidden;
  background:#fff;
  padding:0 0 44px;
  min-height:var(--fh);
  display:flex;flex-direction:column;justify-content:flex-start;
}

.final__frame{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:max(100vw, calc(var(--fh) * var(--fw-ar)));
  height:max(var(--fh), calc(100vw / var(--fw-ar)));
  /* Filets de sécurité : si le contenu rend la section plus haute que
     --fh, le cadre ne peut pas laisser de bande vide. Le rapport cède
     alors, mais object-fit:cover sur l'image recadre au lieu de
     l'étirer. */
  min-width:100%;min-height:100%;
  pointer-events:none;
}
.final__frame--bg{z-index:0}
.final__frame--fg{z-index:1}

.final__bg{display:block;width:100%;height:100%}
.final__bg img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;
}

/* Le rideau d'entrée. scale(0) au repos, donc invisible sans script. */
.final__curtain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(140deg,#FFFFFF,#EAF3FB);
  transform:scale(0);transform-origin:center bottom;
}

/* ------------------------------------------------------------
   LE PORTAIL
   Coordonnées relevées sur chaque fichier, en pourcentages du CADRE
   et non de la section. Le produit y est calé sur le bord bas
   intérieur, avec une réserve pour ne jamais toucher l'anneau.
   ------------------------------------------------------------ */
.final__portal{
  position:absolute;left:50%;top:29%;
  width:78%;height:38%;
  transform:translate(-50%,-50%);
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.final__glow{
  position:absolute;left:50%;top:50%;width:126%;height:126%;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,
    rgba(0,157,228,.34), rgba(0,157,228,.10) 58%, rgba(0,157,228,0) 76%);
}
.final__product{
  position:relative;z-index:1;
  display:block;width:auto;height:auto;
  max-width:min(310px,78vw);max-height:100%;
  object-fit:contain;
  pointer-events:auto;
  /* Ombre de contact douce, suivant l'alpha du WebP et non une boîte.
     Aucun fond blanc rectangulaire. */
  filter:drop-shadow(0 22px 30px rgba(8,64,110,.20));
  transition:transform 350ms cubic-bezier(.22,.61,.36,1), filter 350ms ease;
}

/* ------------------------------------------------------------
   LE CONTENU
   ------------------------------------------------------------ */
.final__in{position:relative;z-index:2;width:100%}
.final__body{text-align:center;display:flex;flex-direction:column;align-items:center}
.final__title{
  margin:0 0 10px;color:var(--texte-fort);
  font-size:clamp(30px,7.6vw,34px);line-height:1.1;letter-spacing:-.03em;
}
/* Les trois textes secondaires sont assombris d'un cran pour tenir sur
   le fond glacé, tout en restant plus doux que le titre (#0A2540) et
   que le prix : description, mention de prix et réassurance vont du
   plus foncé au plus clair, dans cet ordre. */
.final__sub{
  margin:0;max-width:330px;
  font-size:15.5px;line-height:1.45;color:#1E3853;
}
.final__price{
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(36px,10vw,42px);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin:20px 0 6px;color:var(--texte-fort);
  font-variant-numeric:tabular-nums;
}
.final__tax{margin:0;font-size:14px;color:#3B536D;line-height:1.4}

/* Le bouton reprend .btn.order-button, le style commun aux trois CTA de
   la page : dégradé azur, 14px d'angle, aucune flèche. Seuls la taille
   et la nuance du survol sont resserrées ICI, en (0,3,0), pour ne rien
   changer au CTA du hero ni à celui de la barre collante. */
.final__cta.btn.order-button{
  margin-top:18px;min-height:52px;padding:0 30px;font-size:16px;
}
@media (hover:hover) and (pointer:fine){
  .final__cta.btn.order-button:hover{transform:translateY(-3px) scale(1.02)}
}
.final__cta.btn.order-button:active{transform:translateY(0) scale(.985)}

.final__legal{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
  margin:16px 0 0;font-size:14px;line-height:1.45;color:#2A4663;
}
/* Le bouclier reste dans la même famille cyan-bleu, simplement plus
   franc : son tracé de 1,8px se diluait sur le fond glacé. */
.final__legal svg{flex:none;color:#0670AD;opacity:1}

/* ------------------------------------------------------------
   MOBILE — l'ordre visuel est celui du DOM : produit, puis contenu
   ------------------------------------------------------------ */
/* La scène réserve la place du produit en tête de section : le contenu
   commence donc sous le cercle, sans qu'aucune hauteur ne soit figée
   sur le texte lui-même.

   Sa hauteur n'est pas un nombre choisi à la main mais la MÊME formule
   que celle qui place le portail. Le produit est calé sur le bas du
   portail, donc son bord inférieur tombe toujours à
   top + height/2 = 29% + 19% = 48% du cadre, quelle que soit la taille
   du produit. Une valeur fixe s'en écartait dès que la largeur
   changeait, et le visuel recouvrait le titre. */
/* Les 44px de marge ne sont pas décoratifs. Aux largeurs les plus
   étroites le texte se replie sur davantage de lignes, la section
   dépasse alors --fh, le cadre grandit avec elle et le portail
   redescend de 48 % de ce dépassement. La marge absorbe ce report et
   garde une vingtaine de pixels entre le produit et le titre. */
.final__stage{height:calc(var(--fh) * 0.48 + 44px);flex:none}
.final__in{padding-bottom:8px}

@media (max-width:479px){
  .final__sub{max-width:300px}
}

/* ------------------------------------------------------------
   DESKTOP ET TABLETTE PAYSAGE — 900px et plus
   Deux colonnes : contenu à gauche, produit dans le portail à droite.
   ------------------------------------------------------------ */
@media (min-width:900px){
  .final{
    --fw-ar:2.4981;
    --fh:clamp(610px,48vw,700px);
    padding:0;
    justify-content:center;
  }
  .final__stage{display:none}          /* la scène mobile n'a plus lieu d'être */

  .final__portal{
    left:65.5%;top:47%;
    width:43%;height:80%;
  }
  /* Le plafond de 310px n'a de sens qu'en pile mobile : ici le produit
     doit remplir le portail. */
  .final__product{max-width:100%;max-height:88%}

  .final__in{
    max-width:var(--maxw);margin:0 auto;padding:76px 20px;
    display:grid;grid-template-columns:44fr 56fr;gap:48px;align-items:center;
  }
  .final__body{
    text-align:left;align-items:flex-start;
    grid-column:1;
  }
  .final__title{
    font-size:clamp(42px,4vw,60px);line-height:1.02;letter-spacing:-.038em;
    margin:0 0 14px;
  }
  .final__sub{max-width:520px;font-size:19px;line-height:1.6}
  .final__price{font-size:clamp(50px,3.6vw,58px);margin:28px 0 6px}
  .final__tax{font-size:15px}
  .final__cta.btn.order-button{margin-top:24px;min-height:56px;padding:0 32px}
  .final__legal{justify-content:flex-start;margin-top:20px;font-size:15px}
}

/* ============================================================
   OFFRE FINALE — CONTRASTE MOBILE (sous 900px uniquement)

   Sur petit écran, le décor bleu prenait le pas sur la copie. Un voile
   radial est posé AU-DESSUS de l'image de fond et SOUS tout le contenu :
   il calme le centre et laisse la profondeur bleue sur les bords.

   Ce n'est ni un rectangle blanc ni une carte : un dégradé radial n'a
   pas d'arête, et la teinte navy des bords évite toute cassure nette.
   Aucun flou, aucune animation ajoutée : GSAP n'est pas concerné.
   ============================================================ */
@media (max-width:899px){
  .final::after{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    z-index:1;
    background:
      radial-gradient(circle at 50% 48%,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.48) 34%,
        rgba(255,255,255,.12) 66%,
        rgba(0,32,79,.10) 100%),
      linear-gradient(180deg,
        rgba(0,32,79,.03),
        rgba(0,32,79,.10));
  }
  /* Le cadre avant porte le portail et le produit : il remonte d'un cran
     pour rester devant le voile. Le contenu passe encore au-dessus. */
  .final__frame--fg{z-index:2}
  .final__in{z-index:3}

  /* Encre foncée : la copie redevient l'élément principal. Ces valeurs
     ne vivent que dans ce palier, le desktop garde exactement les
     siennes. */
  .final__eyebrow{color:#0d3d63}
  .final__title{color:#082b4a}
  .final__sub{color:#294866;font-weight:500}
  .final__price{color:#061f38}
  .final__tax{color:#35536f}
  .final__avail{color:#12633f}
  .final__legal{color:#294866;font-weight:500}
}

/* Le survol du produit n'existe qu'avec une vraie souris : sur un écran
   tactile il resterait collé après le tap. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .final__product:hover{
    transform:translateY(-5px) scale(1.025);
    filter:drop-shadow(0 30px 42px rgba(8,64,110,.26));
  }
}

/* Sur-titre du bloc de commande : même composant .eyebrow que les autres
   sections, simplement centré comme tout le contenu de ce bloc. */
.final__eyebrow{justify-content:center;margin-bottom:14px}
/* Rappel de disponibilité, entre le prix et le bouton. Les deux faits
   sont déjà affirmés plus haut dans la page. */
.final__avail{
  margin:10px 0 0;
  font-size:15px;font-weight:600;line-height:1.5;
  color:var(--vert-fort);
}

@media (prefers-reduced-motion:reduce){
  .final__product{transition:none}
  .final__product:hover{transform:none}
  .final__curtain{display:none}
  .final__glow{display:none}
}

/* ============================================================
   18. FOOTER
   Le pied de page provisoire (.footer) a cédé la place au composant
   EGCClim (.site-footer), partagé par les cinq pages. Ses règles vivent
   dans assets/egcclim-site.css, chargé en fin de <head>.
   ============================================================ */

/* ============================================================
   19. ÉCHELLE DESKTOP — 80px de respiration verticale
   ============================================================ */
@media (min-width:900px){
  :root{--pad-section:80px}
  .head{margin-bottom:56px}
  .head--tight{margin-bottom:36px}
  .grid{gap:26px}
  .fn{gap:26px}
}


/* ============================================================
   20. PASSE MOBILE — moins de 900px
   Reference de mise au point : 375px de large.
   ============================================================ */
@media (max-width:899px){

  /* --- 11. ancres qui ne passent pas sous l'en-tete collante
         (les hauteurs d'en-tete sont pilotees en section 3) --- */
  section[id],div[id]{scroll-margin-top:70px}

  /* --- 12. typographie : 16px de plancher, interligne 1,65 --- */
  body{line-height:1.65}
  .lede,.note,.gal__caption,.callout p,.callout ul,.place__list p,
  .fn p,.faq__a>div,.footer__legal,
  .calc__row,.calc__total>span,.final__tax,.final__legal,.footer{font-size:16px}
  .rev__date{font-size:15px}
  /* La ligne de stock garde ses 19px sur mobile : c'est le signal de rarete,
     il ne redescend pas au plancher typographique des lignes voisines. */
  .stock{font-size:19px}

  /* --- 12. cibles tactiles de 44px minimum --- */
  .btn{min-height:48px}
  /* Pastilles : le bouton mesure reellement 44px, la pilule visible est
     dessinee au centre. Des zones de 44px superposees a un pas de 19px
     rendaient la pastille voisine cliquable a la place de la bonne, d'ou
     gap:0 et une boite pleine largeur plutot qu'un simple calque. */
  .fn4__dots{gap:0}
  .fn4__dot,
  .fn4__dot.is-active{
    position:relative;width:44px;height:44px;
    background:none;border-radius:0;
  }
  .fn4__dot::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:9px;height:9px;border-radius:50%;background:#C4D6E5;
    transition:background-color .25s ease, width .25s ease;
  }
  .fn4__dot.is-active::after{
    background:var(--bleu-vif);width:28px;border-radius:99px;
  }

  /* --- 1. etat au repos deja fini, et retour tactile a l'appui --- */
  /* Les cartes de chiffres sont volontairement absentes de cette liste :
     elles gardent leurs deux ombres flottantes et n'ont aucune bordure. */
  .card,.rev,.place__list li,.calc{
    border-color:var(--line);box-shadow:var(--shadow);
  }
  .card:active,.rev:active,.place__list li:active,
  .btn:active,.gal__thumb:active,.img__zoom:active{
    transform:scale(.98);
    transition:transform .12s ease;
  }

  /* --- 2. hero : sur-titre entier, reference non coupee --- */
  .hero{padding:26px 0 40px}
  .eyebrow{font-size:12px;letter-spacing:.10em;gap:9px;margin-bottom:13px}
  .eyebrow::before{width:20px}
  .hero h1{margin-bottom:16px}
  .hero__sub{font-size:17px;margin-bottom:24px}
  .hero__lead{margin-bottom:22px}
  .hero__buy{margin-top:24px}
  .hero__grid{gap:0}

  /* Sur mobile, la preuve avant le prix : stock, délai et « aucun
     installateur » se lisent d'abord, la ligne d'achat vient ensuite,
     et la mention fiscale reste collée sous elle. Ordre visuel seul —
     l'ordre du DOM, donc de lecture par les technologies d'assistance
     et le desktop, est inchangé. */
  .hero__buy{display:flex;flex-direction:column}
  .hero__meta{order:1;margin:0 0 20px}
  .hero__tax{order:3;margin:8px 0 0;text-align:center}

  /* Bloc d'achat centré : le prix et le bouton sur une seule ligne, la
     mention fiscale centrée juste dessous. flex-wrap reste en dernier
     recours — si la ligne ne tient vraiment pas, elle s'empile au centre
     plutôt que de déborder. Ni le prix ni le libellé du bouton ne se
     coupent, eux, jamais. */
  .hero__purchase{
    order:2;
    justify-content:center;align-items:center;
    gap:14px;width:100%;
  }
  .hero__price .amount{white-space:nowrap}

  .hero__purchase .btn.order-button{
    height:48px;min-height:48px;padding:0 24px;
    border-radius:13px;
    background:linear-gradient(135deg,#0a9aca 0%,#087eaf 100%);
    color:#fff;font-weight:700;white-space:nowrap;
    border:1px solid rgba(255,255,255,.24);
    box-shadow:
      0 10px 24px rgba(4,124,174,.25),
      inset 0 1px 0 rgba(255,255,255,.24);
    transition:transform 220ms cubic-bezier(.2,.8,.2,1),
               background 220ms ease, box-shadow 220ms ease;
  }
  @media (hover:hover) and (pointer:fine){
    .hero__purchase .btn.order-button:hover{
      transform:translateY(-2px);
      background:linear-gradient(135deg,#0fa8db 0%,#0a8bc0 100%);
      box-shadow:
        0 14px 30px rgba(4,124,174,.30),
        inset 0 1px 0 rgba(255,255,255,.26);
    }
  }
  .hero__purchase .btn.order-button:active{transform:scale(.98)}

  /* Sous 340px, quelques pixels rendus par les marges du bouton : la
     ligne tient d'un bloc au lieu de se scinder. */
  @media (max-width:339px){
    .hero__purchase{gap:10px}
    .hero__purchase .btn.order-button{padding:0 18px}
  }

  @media (prefers-reduced-motion:reduce){
    .hero__purchase .btn.order-button{transition:none}
    .hero__purchase .btn.order-button:hover,
    .hero__purchase .btn.order-button:active{transform:none}
  }

  /* --- 3. six vignettes sur une seule ligne : 6x48 + 5x6 = 318px --- */
  .gal__stage{height:290px}
  .gal__thumbs{gap:3px;justify-content:center;flex-wrap:nowrap;overflow-x:visible}
  /* 6 x 44 + 5 x 3 = 279px ; 44px reste la cible tactile mini. */
  .gal__thumb{width:44px;height:44px;padding:3px;border-radius:9px}

  /* --- 4. cartes de chiffres : la ligne de quatre repasse en 2 x 2, sur
     toute la largeur disponible. Les carres restent carres, le libelle a le
     droit de passer sur deux lignes et rien ne doit deborder a 390px. --- */
  /* Deux colonnes, meme rapport 5/4, plafond a 120px. */
  .hero__specs{
    grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;
    margin-left:0;max-width:none;justify-content:stretch;
  }
  /* Meme principe qu'en desktop : la hauteur suit le contenu, les 15px de
     padding sont l'ecart reellement visible. La carte occupe toute sa
     colonne et reste bien plus large que haute. */
  .hero__specs>div{padding:15px 16px}
  .hero__specs b{font-size:1.2rem;gap:7px}
  .spec--nrj b{font-size:1.2rem}
  .hero__specs small{
    margin-top:8px;text-align:left;
    font-size:10px;letter-spacing:.06em;line-height:1.3;
  }
  .spec__ico svg{width:22px;height:18px}

  /* --- 5. barre de confiance : bandeau defilant ---
     La piste avance en continu comme un train, s'arrete sous le doigt
     ou le curseur, et se laisse tirer a la main. touch-action:pan-y :
     le glissement horizontal nous revient, le defilement vertical de
     la page reste au navigateur. */
  .trust__viewport{width:100%;overflow:hidden}
  .trust__list{
    display:flex;width:max-content;gap:0;padding:18px 0;
    will-change:transform;cursor:grab;touch-action:pan-y;
  }
  .trust__list.is-held{cursor:grabbing}
  .trust li{
    flex:0 0 auto;padding:0 20px;border-left:0;
    /* Meme hauteur pour tous, detail sur une ou deux lignes. */
    min-height:46px;align-items:center;white-space:nowrap;
  }

  /* --- 6. paragraphes alignes a gauche, titres centres --- */
  .head--center{text-align:center}
  .head--center .lede{text-align:left}

  /* --- 7. les quatre fonctions : carrousel, un visuel par fonction --- */
  #fonctions .split{display:none}
  .fn4{position:relative;margin-top:4px}
  /* Aucun debord lateral : la marge negative de 4px, reprise du carrousel
     des etapes, laissait apparaitre un liseré de la carte suivante. Le
     rembourrage ne subsiste qu'en bas, pour l'ombre. */
  .fn4__viewport{overflow:hidden;padding-bottom:8px}
  /* touch-action:pan-y indispensable : sans lui le navigateur revendique le
     geste horizontal, emet un pointercancel en cours de glissement et la
     carte revenait a sa place au lieu de changer. */
  .fn4__track{
    display:flex;transition:transform .4s ease-out;will-change:transform;
    touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  }
  .fn4__card{
    flex:0 0 100%;min-width:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);
    display:flex;flex-direction:column;
  }
  .fn4__media{background:var(--bleu-pale-2)}
  .fn4__media img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;display:block}
  .fn4__body{padding:22px 22px 26px}
  .fn4__body h3{margin:16px 0 9px}
  .fn4__body p{font-size:16px;color:var(--texte);margin:0;line-height:1.65}
  .fn4__dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
  /* Taille et pilule visible fournies par la regle de cibles tactiles
     ci-dessus : redefinir width ici l'emportait par ordre de source et
     ramenait le bouton a 9px. */
  .fn4__dot{padding:0;border:0;cursor:pointer}

  /* --- 9. bouton d'agrandissement des visuels pleine largeur --- */
  .img__zoom{
    position:absolute;right:12px;bottom:12px;z-index:2;
    width:46px;height:46px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.94);color:var(--bleu-profond);
    border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,32,79,.22);
  }

  /* --- 10. bannieres plus hautes, donc plus lisibles au passage ---
     L'ecart de 16px reste dans la fourchette voulue sur mobile, et la
     respiration verticale de 32px est deja portee par la regle de base. */
  .bann__slide{margin-right:16px}
  .bann__slide img{height:200px}

  /* --- 13. aucune parallaxe, aucune colonne collante --- */
  .hero__parallax{transform:none !important}
  .hero__fade{opacity:1 !important}
  .place__sticky{position:static}
}

/* Le bouton d'agrandissement n'existe que sur petit ecran. Formule en
   min-width : place apres le bloc mobile, un simple display:none sur une
   classe fille l'emportait partout a specificite egale. */
@media (min-width:900px){.img__zoom{display:none}}
/* Pas d'indication sur desktop : le curseur suffit a annoncer l'agrandissement */
@media (hover:hover) and (pointer:fine){
  .kit__photo img{cursor:zoom-in}
}

/* Au-dessus de 900px la copie du jeu de confiance est inutile : elle ne sert
   qu'a la boucle sans couture du bandeau defilant sous 900px. Laissee
   visible, la grille en repeat(5,1fr) recevait dix elements et les rangeait
   sur deux rangees de cinq. Les cinq doublons portent deja aria-hidden,
   l'attribut sert donc d'accroche : aucun balisage a toucher, et la copie
   reste en place pour le mobile. */
@media (min-width:900px){
  .trust li[aria-hidden="true"]{display:none}
}

/* La section 25 (AUCUN CARROUSEL AU-DESSUS DE 900px) est partie avec
   l'ancienne section Pilotage : elle ne neutralisait que #pilot-car. */


/* ============================================================
   23. LES QUATRE FONCTIONS — quatre lignes alternées (desktop)
   Même balisage que le carrousel mobile : la carte porte son propre
   visuel, si bien que le texte français n'existe qu'une fois.
   L'ordre du DOM place le visuel avant le texte ; les lignes impaires
   inversent l'ordre visuel pour obtenir texte / image / texte / image.
   ============================================================ */
@media (min-width:900px){
  .fn4__viewport{overflow:visible;padding:0}
  .fn4__track{display:grid;gap:88px;transition:none;transform:none !important}
  .fn4__dots{display:none}

  .fn4__card{
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
    background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  }
  .fn4__card:nth-child(odd) .fn4__body{order:1}
  .fn4__card:nth-child(odd) .fn4__media{order:2}

  .fn4__media{
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    background:var(--bleu-pale-2);box-shadow:var(--shadow);
  }
  .fn4__media img{aspect-ratio:16 / 10;object-fit:cover;height:auto}

  /* Le bloc de texte devient la carte : même traitement, même survol que
     les autres cartes de la page, pastille d'icône inchangée au survol. */
  .fn4__body{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:34px 36px 38px;box-shadow:var(--shadow);
    transition:background-color .18s ease-out, color .18s ease-out,
             transform .18s ease-out, box-shadow .18s ease-out,
             border-color .18s ease-out;
  transition-delay:0s;
  }
  .fn4__body h3{margin:18px 0 10px;font-size:1.5rem}
  .fn4__body p{font-size:16px;line-height:1.65;color:var(--texte)}
  .fn4__body h3,.fn4__body p{transition:color .18s ease-out;transition-delay:0s}
}

/* ============================================================
   23 bis. LES QUATRE FONCTIONS — PILE COLLANTE (desktop)
   Aucun epinglage, aucune carte en position absolue : les quatre
   cartes restent dans le flux normal. Chacune se colle a 9vh du haut
   et la suivante lui passe dessus ; les 10vh qui separent deux cartes
   fournissent la distance de defilement d'une transition. La pile est
   donc purement CSS — retirez le script, elle fonctionne encore.
   GSAP n'ajoute que la profondeur : echelle et fondu.
   ============================================================ */

/* --- Elements communs aux deux mises en page (carrousel et pile) ---
   En <span> et non en <p> : la regle .fn4__body p impose 16px et la
   couleur du texte courant, et l'emporterait sur une classe seule. */
.fn4__num,.fn4__metric,.fn4__label{display:block}
.fn4__num{
  font-family:'Manrope','Inter',sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.16em;
  /* Gris sourd donne par la couleur, jamais par opacity : l'etat marine ne
     doit toucher aucune propriete que GSAP pilote sur la carte. */
  color:#647890;font-variant-numeric:tabular-nums;
}
.fn4__rule{
  display:block;height:1px;border:0;background:var(--line);margin:12px 0 18px;
  /* flex:none : en colonne flex (mise en page desktop) un filet de 1px
     reste compressible et disparaissait par arrondi. */
  flex:none;
  transition:background-color .18s ease-out;transition-delay:0s;
}
.fn4__rule--metric{margin:22px 0 18px}
.fn4__metric{
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;line-height:1.05;
  color:var(--bleu-action);font-variant-numeric:tabular-nums;
}
.fn4__label{
  margin-top:8px;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--texte);
}

/* ------------------------------------------------------------
   LA PILE, COMMUNE AUX DEUX LARGEURS
   Ces regles doivent rester APRES le bloc carrousel (section 7 du
   bloc mobile) : a specificite egale, c'est l'ordre du fichier qui
   trie. Elles y defont trois choses qui empechent toute adherence :
     overflow:hidden sur l'enveloppe — un ancetre qui coupe le
       debordement devient le conteneur de defilement, et l'element
       colle n'a plus rien a quoi se raccrocher ;
     will-change:transform et transform sur la piste — l'un comme
       l'autre creent un bloc conteneur, ce qui transforme un enfant
       colle en enfant fixe ;
     display:flex sur la piste — les cartes doivent redevenir des
       blocs empiles verticalement.
   ------------------------------------------------------------ */
.fn4__viewport{overflow:visible;padding:0}
.fn4__track{
  display:block;gap:0;
  transform:none;transition:none;will-change:auto;
  touch-action:auto;user-select:auto;cursor:auto;
}

/* La carte est le bloc blanc opaque. Indispensable : une carte
   translucide laisserait voir celles qui dorment dessous, ce qui est
   precisement l'effet de bug a eviter. */
.fn4__card{
  position:sticky;
  display:grid;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
/* Les 10vh qui font la distance de defilement d'une transition */
.fn4__card+.fn4__card{margin-top:10vh}
.fn4__card:not(:last-child){will-change:transform,opacity}

/* Le temps d'une mesure, les cartes redeviennent statiques : une carte
   deja collee renvoie sa position collee, pas sa place reelle dans le
   flux, et ScrollTrigger en tirerait des distances fausses. Pose et
   retire dans la meme image, donc invisible a l'oeil. */
.fn4--measuring .fn4__card{position:static}

/* ------------------------------------------------------------
   MOBILE — une colonne, visuel au-dessus du texte
   Contrainte dure : une carte plus haute que l'ecran ne s'empile pas,
   elle se contente de defiler. Tout est donc resserre pour tenir sous
   85vh a 375px de large : visuel en 16/9, pastille a 40px, corps a
   14px et chiffre a 22px. Hauteur calculee : environ 504px, soit 76vh
   sur un ecran de 667px de haut.
   ------------------------------------------------------------ */
@media (max-width:899px){
  /* 80px : la hauteur de l'en-tete collante (68px) plus une marge */
  .fn4__card{top:80px;grid-template-columns:1fr}
  .fn4__media{order:1}
  .fn4__body{order:2;padding:14px 18px 18px}

  .fn4__media img{aspect-ratio:16 / 9;height:auto;min-height:0}

  /* Visuel chauffage (source v2, deja recadree, exactement 4/3). En 16/9 sur
     une source 4/3, le recadrage est purement vertical : la largeur entiere
     tient, et seuls 25% de la hauteur sont retires. « center top » les
     retire donc tous par le BAS — le sol — et laisse la pastille « kit
     mousse non inclus », qui occupe le haut de l'image (y 6,1% a 38,1%),
     toujours entiere. Ces proportions ne dependent pas de la largeur de
     l'ecran : la regle vaut de 320px a 899px. */
  .fn4__card:nth-child(2) .fn4__media img{object-position:center top}

  .fn4__num{font-size:12px;line-height:1.2}
  .fn4__rule{margin:8px 0 10px}
  .fn4__rule--metric{margin:12px 0 10px}
  .fn4 .fn__icon{width:40px;height:40px;border-radius:12px}
  .fn4__body h3{margin:10px 0 6px;font-size:1.125rem;line-height:1.25}
  .fn4__body p{font-size:14px;line-height:1.5}
  .fn4__metric{font-size:1.375rem}
  .fn4__label{margin-top:5px;font-size:11px;line-height:1.3}

  /* transform retire de la liste : GSAP pilote l'echelle image par image
     au defilement, une transition de 400ms dessus la faisait trainer.
     Le reste passe a 180ms pour basculer avec le texte, pas apres lui.
     Ecrit .fn4 .fn4__card et non .fn4__card : le bloc 24, plus bas dans
     le fichier, redeclare .fn4__card a 400ms avec transform. A
     specificite egale il l'emporterait par simple ordre de source ; la
     specificite superieure tranche sans avoir a toucher a sa regle,
     qu'il partage avec les cartes de pilotage. */
  .fn4 .fn4__card{
    transition:background-color .18s ease-out, border-color .18s ease-out,
               box-shadow .18s ease-out;
    transition-delay:0s;
  }

  /* ---- Empilement : la carte active doit être franchement opaque ----
     La carte fournit déjà un blanc plein, mais le panneau de texte, lui,
     n'avait aucun fond : il laissait passer ce qui dormait dessous dès
     que la carte du dessus n'était pas encore à pleine opacité. Un blanc
     plein sur le panneau ferme définitivement ce passage. Aucun rgba,
     aucun backdrop-filter, aucun pseudo-élément translucide. */
  .fn4__body{background:#fff}

  /* ---- Plus de texte fantôme derrière la carte active ----
     Une carte suivie d'une carte active est une carte déjà lue : son
     panneau de texte n'a plus rien à montrer, seul le haut de son visuel
     reste perceptible pour la profondeur. On écrit ici sur .fn4__body —
     jamais sur .fn4__card, dont opacity et transform appartiennent à
     GSAP. La séquence, les distances et les durées sont intactes. */
  .fn4__card:has(~ .fn4__card.is-focus) .fn4__body{
    opacity:0;visibility:hidden;
    transition:opacity .18s ease-out, visibility 0s linear .18s;
  }
}

@media (min-width:900px){
  .fn4__card{top:9vh;grid-template-columns:1fr 1fr;align-items:stretch}

  /* Texte a gauche, visuel a droite, pour les quatre. L'alternance
     paire/impaire du bloc 23 n'a plus de sens une fois les cartes
     empilees : deux mises en page miroir se recouvrant l'une l'autre
     donnaient l'impression que le contenu sautait d'un cote a l'autre. */
  .fn4__card:nth-child(odd) .fn4__body,
  .fn4__card:nth-child(even) .fn4__body{order:1}
  .fn4__card:nth-child(odd) .fn4__media,
  .fn4__card:nth-child(even) .fn4__media{order:2}

  /* Le bloc de texte n'est plus une carte dans la carte : c'est la
     colonne gauche, pleine hauteur, sur le blanc de la carte. */
  .fn4__body{
    align-self:stretch;
    display:flex;flex-direction:column;justify-content:center;
    background:none;border:0;border-radius:0;box-shadow:none;
    padding:46px 50px;
  }
  /* La cellule porte le rapport 4/3 et son plancher de 30rem ; c'est elle
     qui donne sa hauteur a la carte quand la colonne de texte est plus
     courte. align-self:stretch la laisse grandir si le texte, lui, est
     plus haut : sans quoi un blanc se serait ouvert sous le visuel. */
  .fn4__media{
    align-self:stretch;aspect-ratio:4 / 3;min-height:30rem;
    border:0;border-radius:0;box-shadow:none;overflow:hidden;
    background:var(--bleu-pale-2);
  }
  /* aspect-ratio:auto sur l'image : le rapport appartient a la cellule,
     l'image se contente de la remplir. Sans cela le 16/10 herite du bloc
     23 aurait continue de s'appliquer. */
  .fn4__media img{
    width:100%;height:100%;min-height:30rem;
    aspect-ratio:auto;object-fit:cover;display:block;
  }

  /* Le visuel chauffage n'a plus aucun object-position sur desktop : la
     source v2 est deja recadree, le centrage par defaut convient. */

}

/* ============================================================
   23 ter. QUATRE FONCTIONS — SURVOL BLEU CLAIR, JAMAIS MARINE

   L'ancien état marine (fond bleu profond, texte blanc) est retiré des
   DEUX déclencheurs : le survol souris ET la classe .is-focus posée au
   défilement sous 900px. Les cartes restent blanches, le texte navy et
   les accents bleu clair, en toutes circonstances.

   Le survol reprend mot pour mot le vocabulaire des quatre cartes de
   chiffres du hero : même dégradé très pâle, même liseré cyan renforcé,
   même ombre bleutée, même courbe de 280ms.

   AUCUNE de ces règles ne touche transform ni opacity sur .fn4__card :
   ces deux propriétés appartiennent à GSAP sur les cartes 1 à 3. La
   carte entière n'est jamais déplacée ni mise à l'échelle.
   ============================================================ */
.fn4__num,.fn4__metric,.fn4__label{
  transition:color .18s ease-out;
  transition-delay:0s;
}

/* Pastille d'icône de CETTE section seulement : le bleu pâle d'origine
   (#E6EFF7 / #0075B4) se lisait à peine. Un fond un cran plus bleu et un
   trait franchement plus soutenu, sans virer au marine ni à l'électrique.
   Les autres sections gardent leur .fn__icon d'origine. */
.fn4 .fn__icon{
  background:#DCEDF9;color:#0678A8;
  transition:background-color 280ms ease, color 280ms ease, box-shadow 280ms ease;
}

/* ------------------------------------------------------------
   LA CARTE ACTIVE RESTE NETTE

   Les fenêtres de fondu de GSAP se chevauchent : la carte qu'on est en
   train de lire avait déjà commencé la sienne, et se retrouvait à la
   fois pâlie (opacity ~0,6) et à une échelle fractionnaire (0,9755) —
   c'est ce demi-pixel qui rendait le texte flou.

   Ces deux règles ne touchent QUE la carte active : la pile, les
   distances, les durées et les fondus des cartes précédentes sont
   inchangés. Elles rendent simplement à cette carte-là son opacité
   pleine, son échelle 1 et aucun filtre.

   Le saut au moment où la carte suivante prend le relais est invisible :
   c'est précisément l'instant où cette suivante devient elle-même
   opaque et la recouvre entièrement.
   ------------------------------------------------------------ */
.fn4__card.is-focus{
  opacity:1 !important;
  transform:none !important;
  filter:none;
}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  /* Sur desktop la classe .is-focus n'existe pas : c'est le survol qui
     désigne la carte lue, elle doit donc y être aussi nette. */
  .fn4__card:hover{
    opacity:1 !important;
    transform:none !important;
    filter:none;
  }
}

@media (min-width:900px) and (hover:hover) and (pointer:fine){
  /* La carte porte le liseré et l'ombre ; le panneau de gauche porte le
     dégradé. Ni l'un ni l'autre n'est une propriété pilotée par GSAP. */
  .fn4__card{
    transition:border-color 280ms ease, box-shadow 280ms ease;
  }
  .fn4__body{
    transition:background 280ms ease;
  }
  .fn4__card:hover{
    border-color:rgba(12,170,230,.95);
    box-shadow:
      0 15px 34px rgba(15,126,181,.15),
      0 0 20px rgba(65,191,239,.08);
  }
  .fn4__card:hover .fn4__body{
    background:linear-gradient(145deg,
      rgba(255,255,255,.98),
      rgba(228,247,255,.98));
  }
  /* Le grand chiffre gagne un cran d'azur, le reste du texte ne bouge pas */
  .fn4__card:hover .fn4__metric{color:var(--bleu-vif)}
  /* Pastille d'icône : un bleu un peu plus soutenu et une aura très douce */
  .fn4__card:hover .fn__icon{
    background:#CDE8F8;color:#05699B;
    box-shadow:0 6px 16px rgba(12,157,218,.20);
  }
  /* Zoom minime, uniquement sur l'image dans sa boîte à overflow caché */
  .fn4__card:hover .fn4__media img{transform:scale(1.015)}
}

/* ============================================================
   21. CALQUE PLEIN ÉCRAN
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,16,38,.96);
  display:flex;align-items:center;justify-content:center;
}
.lb[hidden]{display:none}
/* La scene occupe exactement la fenetre. L'image y est contenue, donc
   l'echelle 1 correspond a « image entiere visible ». Le zoom et le
   deplacement sont ensuite portes par un transform, jamais par un
   defilement : c'est ce defilement qui faisait ouvrir le calque sur un
   coin arbitraire de la photo. */
.lb__stage{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;            /* les gestes sont traites ici, pas par le navigateur */
  cursor:default;
}
.lb__stage.is-zoomed{cursor:grab}
.lb__stage.is-grabbing{cursor:grabbing}
.lb__stage img{
  width:100%;height:100%;object-fit:contain;display:block;
  transform-origin:center center;
  will-change:transform;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.lb__close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28);
}
@media (hover:hover) and (pointer:fine){
  .lb__close:hover{background:rgba(255,255,255,.24)}
}

/* ------------------------------------------------------------
   21 bis. VARIANTE « DANS LE CARTON » — voile givré clair

   Le calque .lb est partagé avec le comparatif et le visuel de
   pilotage : rien de ce bloc ne s'applique sans .lb--kit, classe posée
   par le script au seul moment où c'est le visuel des accessoires qui
   est agrandi, et retirée à la fermeture. Les deux autres
   visionneuses gardent donc très exactement leur fond marine, leur
   bouton et leur absence de transition.
   ------------------------------------------------------------ */
.lb.lb--kit{
  background:rgba(232,245,252,.90);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  opacity:0;
  transition:opacity 300ms ease;
}
.lb.lb--kit.is-in{opacity:1}

/* La scène cesse d'occuper la fenêtre entière : elle devient la
   surface blanche de lecture, dimensionnée pour que l'image entière y
   tienne. object-fit:contain plus max-width/max-height : jamais
   d'agrandissement au-delà de la résolution native, jamais de
   déformation. Aucune zone sombre au-dessus ni en dessous. */
.lb.lb--kit .lb__stage{
  position:relative;inset:auto;
  width:min(1100px,90vw);max-height:88vh;
  padding:12px;
  background:#fff;
  border:1px solid rgba(14,165,233,.25);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,117,180,.20), 0 8px 24px rgba(0,117,180,.10);
  overflow:hidden;
  transform:scale(.97);
  transition:transform 300ms cubic-bezier(.22,.61,.36,1);
}
.lb.lb--kit.is-in .lb__stage{transform:scale(1)}
.lb.lb--kit .lb__stage img{
  width:auto;height:auto;
  max-width:100%;max-height:calc(88vh - 24px);
  object-fit:contain;
}

/* Bouton de fermeture clair, ancré au coin de la fenêtre : il reste
   donc visible quoi que fasse le contenu de la surface. */
.lb.lb--kit .lb__close{
  top:18px;right:18px;
  width:46px;height:46px;min-width:44px;min-height:44px;
  background:rgba(255,255,255,.94);
  color:var(--texte-fort);
  border:1px solid rgba(0,157,228,.38);
  box-shadow:0 8px 22px rgba(0,117,180,.18);
  transition:transform 250ms cubic-bezier(.22,.61,.36,1), box-shadow 250ms ease;
}
@media (hover:hover) and (pointer:fine){
  .lb.lb--kit .lb__close:hover{
    background:rgba(255,255,255,.94);
    transform:scale(1.06);
    box-shadow:0 10px 26px rgba(0,117,180,.22), 0 0 22px rgba(0,157,228,.34);
  }
}
.lb.lb--kit .lb__close:focus-visible{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--bleu-action);
}

@media (max-width:767px){
  .lb.lb--kit .lb__stage{
    width:94vw;max-height:90dvh;padding:10px;border-radius:16px;
  }
  .lb.lb--kit .lb__stage img{max-height:calc(90dvh - 20px)}
  .lb.lb--kit .lb__close{top:12px;right:12px}
}

@media (prefers-reduced-motion:reduce){
  .lb.lb--kit,
  .lb.lb--kit .lb__stage,
  .lb.lb--kit .lb__close{transition:none}
  .lb.lb--kit .lb__stage{transform:none}
  .lb.lb--kit .lb__close:hover{transform:none}
}


/* ============================================================
   22. IMAGES AGRANDISSABLES, ACCORDEON
   Le carrousel générique .mcar__* vivait ici : plus aucun élément
   de la page ne le porte depuis le retrait de l'ancienne section
   Pilotage, il a donc été retiré avec elle.
   ============================================================ */
@media (max-width:899px){

  /* G3. La boite copropriete touchait la carte du dessus */
  .place__legal{margin-top:32px}

  /* --- 3. visuel du kit pleine largeur, comme le bandeau de commandes --- */
  .kit__photo{
    margin-left:-20px;margin-right:-20px;max-width:none;width:auto;
    border-left:0;border-right:0;border-radius:0;position:relative;
  }
  .kit{gap:12px}

}


/* ============================================================
   24. ÉTAT ACTIF AU DÉFILEMENT (sous 900px)
   Faute de survol sur un écran tactile, la carte qui traverse le
   milieu de la fenêtre prend le même bleu profond que le survol du
   desktop. La pastille d'icône reste pâle, comme sur desktop.
   ============================================================ */
@media (max-width:899px){
  /* Fond et couleur dans une seule declaration, meme duree, meme courbe,
     aucun delai : ils basculent ensemble, comme au survol du desktop. */
  .fn4__card{
    transition:background-color .4s ease-out, color .4s ease-out,
               border-color .4s ease-out, box-shadow .4s ease-out,
               transform .4s ease-out;
    transition-delay:0s;
  }
  /* Cartes de chiffres : a l'appui, exactement le rendu du survol desktop.
     Fond, texte, bordure et elevation partagent la meme declaration de
     180ms sans delai, ils basculent donc au meme instant : jamais de texte
     blanc sur une carte encore blanche. */
  .hero__specs>div{
    transition:transform 280ms cubic-bezier(.2,.8,.2,1),
               background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
    transition-delay:0s;
  }
  /* G2. Les cartes d'emplacement reposent sur un fond bleu profond : les
     passer au bleu les ferait disparaitre. Elevation seule. */
  .place__list li{
    transition:box-shadow .4s ease-out, transform .4s ease-out;
    transition-delay:0s;
  }
  .place__list li.is-focus{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,32,79,.34);
  }
  /* Plus aucune inversion marine au défilement : sous 900px la carte
     active reste blanche, son texte navy et ses accents bleu clair.
     La classe .is-focus continue d'être posée par ScrollTrigger — elle
     ne sert plus qu'à repérer la carte courante pour le calque, plus
     jamais à repeindre quoi que ce soit. */

  /* Retour tactile des cartes de chiffres : le meme bleu profond, le meme
     texte blanc et la meme elevation qu'au survol du desktop. */
  /* Retour tactile des cartes de chiffres : le même geste clair qu'au
     survol du desktop. Ni fond marine, ni texte blanc. */
  .hero__specs>div.is-press{
    transform:translateY(-3px);
    background:linear-gradient(145deg,
      rgba(255,255,255,.98),
      rgba(228,247,255,.98));
    border-color:rgba(12,170,230,.95);
    box-shadow:
      0 15px 34px rgba(15,126,181,.15),
      0 0 20px rgba(65,191,239,.08);
  }


}
@media (prefers-reduced-motion: reduce){
  /* .fn4__card.is-focus n'a plus rien à annuler : la carte active est
     déjà blanche en toutes circonstances. */
  .place__list li.is-focus{transform:none;box-shadow:var(--shadow)}
}

/* Variante a l'etude : premiere ligne du titre en bleu d'accent.
   Desactivee ; il suffit d'ajouter la classe hero--bicolore sur .hero
   pour la voir. Le mobile n'est pas concerne. */
@media (min-width:900px){
  .hero--bicolore .hero__h1-lead{color:var(--bleu-action)}
}

/* ============================================================
   26. ENCADRÉ COPROPRIÉTÉ — repli sous 900px
   Le titre pose la question, une ligne y répond tout de suite, et le
   détail juridique ne s'ouvre qu'à la demande. Au-dessus de 900px il
   n'y a pas de repli : le commande est masquée et le détail reste ouvert.
   ============================================================ */
.callout__lead{
  font-size:17px;font-weight:600;color:var(--texte-fort);
  margin:0 0 .6em;
}
/* La ligne de resume est une bequille mobile : sur desktop le detail est
   deja ouvert juste en dessous, et elle repetait mot pour mot la premiere
   phrase du paragraphe. Elle disparait donc au-dela de 900px. */
/* Dans la section bleu profond, la commande doit rester lisible */
.section--deep .callout__more{color:var(--bleu-vif);border-top-color:rgba(255,255,255,.18)}
.callout__more{display:none}
.callout__detail{overflow:hidden}

@media (max-width:899px){
  .callout__more{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:46px;margin:4px 0 0;padding:11px 0;
    background:none;border:0;border-top:1px solid var(--line);cursor:pointer;
    font-family:'Manrope','Inter',sans-serif;
    font-size:15px;font-weight:700;color:var(--bleu-action);
    text-align:left;
  }
  .callout__more-ico{
    flex:none;width:22px;height:22px;
    transition:transform .3s ease;
  }
  .callout__more[aria-expanded="true"] .callout__more-ico{transform:rotate(45deg)}
  .callout__detail{max-height:0;transition:max-height .35s ease}
  .callout__detail>p:first-child{margin-top:.9em}
}

/* Accessibilité focus */
:focus-visible{outline:3px solid var(--bleu-vif);outline-offset:3px;border-radius:4px}
.section--deep :focus-visible,.sil :focus-visible{outline-color:#7FD3F5}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:#fff;padding:12px 18px;border:1px solid var(--line);border-radius:10px}
/* ============================================================
   BARRE DE COMMANDE COLLANTE
   Chemin d'achat permanent, present sur toute la page. z-index 60 :
   au-dessus du bandeau collant (50), sous le calque plein ecran (200)
   qui doit pouvoir la recouvrir.
   ============================================================ */
:root{--obar-h:72px}
.obar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--blanc);color:var(--texte);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(10,37,64,.10);
  padding-bottom:env(safe-area-inset-bottom);
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.obar.is-in{opacity:1;transform:translateY(0)}
/* Retiree tant que le CTA final est a l'ecran : jamais deux boutons
   « Commander » visibles en meme temps. Posee apres .is-in, donc
   l'emporte a specificite egale. */
.obar.is-hidden{
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.obar__in{
  max-width:1280px;margin:0 auto;padding:0 20px;height:var(--obar-h);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.obar__left{display:flex;align-items:center;gap:14px;min-width:0}
.obar__img{flex:none;display:block;width:auto;height:56px;object-fit:contain}
.obar__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.obar__name{
  font-family:'Manrope','Inter',sans-serif;
  font-size:15px;font-weight:600;color:var(--texte-fort);line-height:1.2;
}
.obar__spec{
  font-size:13px;color:var(--texte);line-height:1.2;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.obar__right{display:flex;align-items:center;gap:18px;flex:none}
.obar__price{
  font-family:var(--font-heading);
  font-size:20px;font-weight:800;color:var(--text-heading);line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* Repose sur .btn--primary pour la fleche et son glissement de 4px au
   survol ; seuls le fond, la forme et la graisse sont repris ici. Pas
   de soulevement au survol : la barre est fixe, elle ne bouge pas. */
.obar__cta{
  /* 18px : un cran sous les 20px du bouton principal. La barre collante est
     une surface utilitaire compacte, son bouton ne doit pas paraitre plus
     doux que la vraie demande d'achat. */
  padding:14px 30px;border-radius:18px;
  font-size:15px;font-weight:600;
  background:#0894D2;color:#fff;box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .obar__cta:hover{background:#0A7CB0;transform:none;box-shadow:none}
}
/* La page se termine au-dessus de la barre : le pied de page n'est
   jamais recouvert, encoche iPhone comprise. */
body{padding-bottom:calc(var(--obar-h) + env(safe-area-inset-bottom))}

@media (max-width:899px){
  :root{--obar-h:64px}
  /* Deux blocs et non trois elements repartis : le visuel seul a
     gauche, le prix colle au bouton a droite. */
  .obar__id{display:none}
  .obar__img{height:46px}
  .obar__right{gap:12px}
  .obar__price{font-size:18px}
  .obar__cta{padding:11px 16px;font-size:15px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .obar,.obar.is-hidden{transition:none}
  .obar{opacity:1;transform:none}
}

/* ============================================================
   BOUTON « COMMANDER » — SYSTÈME PARTAGÉ

   Un seul jeu de règles pour les trois boutons de la page : le CTA du
   hero, celui du bloc de commande final et celui de la barre collante.
   Aucun style n'est redéfini section par section ; seule la taille
   change, via le modificateur --compact.

   Placé en fin de feuille et écrit en .btn.order-button (0,2,0) : il
   l'emporte sur .section--deep .btn--primary et sur .obar__cta, qui
   repeignaient le bouton dans leur contexte.

   Azur moyen, jamais marine. Angle contemporain (14px), aucune flèche.
   ============================================================ */
.btn.order-button{
  min-height:54px;
  padding:0 28px;
  border:1px solid rgba(4,119,166,.25);
  border-radius:14px;
  background:linear-gradient(135deg,#0a91c6 0%,#087caf 100%);
  color:#fff;
  font-weight:700;
  line-height:1;
  gap:0;                                   /* plus d'écart réservé à l'icône */
  box-shadow:
    0 12px 28px rgba(5,125,174,.22),
    inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform 280ms cubic-bezier(.2,.8,.2,1),
             background 280ms ease, box-shadow 280ms ease;
}
/* La flèche vivait dans .btn--primary::after : elle est retirée pour les
   trois boutons, sans toucher aux flèches des liens et des cartes. */
.btn.order-button::after{content:none;display:none}

@media (hover:hover) and (pointer:fine){
  .btn.order-button:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#079bd1 0%,#0876a6 100%);
    box-shadow:
      0 16px 34px rgba(5,125,174,.28),
      inset 0 1px 0 rgba(255,255,255,.22);
    text-decoration:none;
  }
}
.btn.order-button:active{transform:translateY(0) scale(.985)}
.btn.order-button:focus-visible{
  outline:3px solid rgba(55,190,238,.40);
  outline-offset:3px;
}
/* Variante resserrée : barre de commande collante */
.btn.order-button--compact{
  min-height:46px;padding:0 22px;border-radius:12px;font-size:15px;
  box-shadow:0 8px 18px rgba(5,125,174,.20), inset 0 1px 0 rgba(255,255,255,.20);
}
@media (max-width:899px){
  .btn.order-button--compact{min-height:44px;padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .btn.order-button{transition:none}
  .btn.order-button:hover,.btn.order-button:active{transform:none}
}

/* Masqué visuellement mais lu par les lecteurs d'écran */
.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;
}

/* ============================================================
   PILOTAGE CINÉMATIQUE — DESKTOP

   Une seule section pleine largeur, trois colonnes de grille :
   texte éditorial, téléphone détouré, quatre cartes de verre.
   Le fond WebP porte lui-même la lumière (pâle à gauche, saturé à
   droite) : aucun voile blanc général n'est posé dessus, seulement
   un dégradé local sur le tiers gauche pour le contraste du titre.

   AUCUNE règle ne pose opacity:0 ici. Les états de départ de
   l'animation sont écrits par GSAP, et seulement s'il a démarré :
   sans script, la section est complète et immobile.

   Desktop seulement pour l'instant : sous 900px la section entière
   est retirée du flux, la version mobile viendra séparément.
   ============================================================ */
.pilotage-cine{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  min-height:clamp(640px,44vw,710px);
  display:flex;align-items:center;
  padding-block:clamp(34px,3vw,54px);
  /* Repli si le WebP de fond ne charge pas : la section reste bleue,
     jamais blanche sous des cartes blanches. */
  background:#E9F2FA;
  color:var(--texte);
}

/* Le fond doit couvrir, pas s'adapter : les deux déclarations globales
   img{max-width:100%;height:auto} sont neutralisées ici. object-position
   à 38% garde la nappe lumineuse et rogne le canapé du bas. */
.pilotage-cine__background{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 38%;
  pointer-events:none;
}
.pilotage-cine__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(97deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.52) 20%,
    rgba(255,255,255,.14) 38%,
    rgba(255,255,255,0)   54%);
}

.pilotage-cine__container{
  position:relative;z-index:2;
  width:100%;max-width:1400px;margin-inline:auto;
  padding-inline:clamp(24px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,33fr) minmax(0,34fr) minmax(0,33fr);
  align-items:center;
  gap:clamp(16px,2.4vw,48px);
}

/* ---- Colonne 1 : texte éditorial, jamais dans une carte ---- */
.pilotage-cine__copy{position:relative;z-index:3;min-width:0}
.pilotage-cine__eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 15px;
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(12px,.92vw,15px);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu-action);line-height:1.2;
}
.pilotage-cine__eyebrow::before{
  content:"";flex:none;width:clamp(26px,2.4vw,44px);height:3px;border-radius:2px;
  background:var(--bleu-vif);
}
.pilotage-cine__title{
  margin:0;
  font-family:'Manrope','Inter',sans-serif;
  /* Calé pour tenir en trois lignes pleines de 900 à 1920 :
     « Contrôlez votre / climatiseur où / que vous soyez ». Le plancher de
     2,1rem suffit à la colonne la plus étroite (259px à 900), il n'y a
     donc plus de palier séparé sous 1024px. */
  font-size:clamp(2.1rem,2.75vw,2.85rem);
  line-height:1.05;letter-spacing:-.035em;font-weight:800;
  color:var(--texte-fort);
  overflow-wrap:break-word;
}
/* Filet puis trois points : la même ponctuation cyan que le sur-titre,
   posée sous le titre pour fermer le bloc. Dessinée, jamais chargée. */
.pilotage-cine__accent{
  display:flex;align-items:center;gap:9px;
  margin:clamp(13px,1.35vw,20px) 0 clamp(14px,1.5vw,22px);
}
.pilotage-cine__accent i{
  display:block;width:clamp(40px,3.8vw,64px);height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--bleu-action),var(--bleu-vif));
}
.pilotage-cine__accent span{
  display:block;width:5px;height:5px;border-radius:50%;
  background:var(--bleu-vif);
}
.pilotage-cine__lede{
  margin:0;max-width:34ch;
  font-size:clamp(14px,1.08vw,17px);line-height:1.72;
  color:var(--texte);
}

/* ---- Marques compatibles : trois blocs égaux, PNG déjà détourés ---- */
.pilotage-cine__compat{
  list-style:none;margin:clamp(19px,2.1vw,31px) 0 0;padding:0;
  display:flex;align-items:flex-start;gap:clamp(10px,1.5vw,26px);
  max-width:34ch;
}
.pilotage-cine__compat li{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s ease;
}
.pilotage-cine__compat img{
  flex:none;width:clamp(38px,3.8vw,56px);height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,50,105,.14));
  transition:transform .28s ease, filter .28s ease;
}
.pilotage-cine__compat b{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(11px,.92vw,14px);font-weight:700;
  color:var(--texte-fort);line-height:1.2;
}
.pilotage-cine__compat b::after{
  content:"";display:block;width:20px;height:2px;border-radius:2px;
  background:var(--bleu-vif);
  transition:width .28s ease, background-color .28s ease;
}

/* ---- Colonne 2 : téléphone, ancre visuelle, jamais recadré ---- */
.pilotage-cine__phone{
  position:relative;z-index:3;margin:0;
  display:flex;align-items:center;justify-content:center;
}
/* Halo cyan derrière l'appareil : dans la boîte du <figure>, donc
   toujours centré sur lui quelle que soit la largeur.

   Une nappe, pas un disque. Trois choix tiennent ensemble :
   - la dernière butée est rgba(0,117,180,0), jamais le mot-clé
     transparent : celui-ci vaut rgba(0,0,0,0) et l'interpolation vers
     du noir laissait un liseré gris sur le bord ;
   - blur(42px) achève de dissoudre ce bord dans le fond ;
   - scale(1.12,.9) l'aplatit légèrement : une ellipse posée au sol se
     lit comme une lumière, un cercle parfait comme une pastille.
   L'ombre portée sous l'appareil, elle, reste franche : elle est portée
   par le filter de l'image, pas par ce halo. */
.pilotage-cine__phone::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:50%;
  /* translate(-50%,-50%) fait partie du centrage : toute règle de survol
     doit le réécrire, sinon le halo se décale d'un demi-halo. */
  transform:translate(-50%,-50%) scale(1.12,.9);
  width:132%;aspect-ratio:1 / 1;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,157,228,.22) 0%,
    rgba(0,117,180,.10) 42%,
    rgba(0,117,180,0) 72%);
  filter:blur(42px);
  opacity:.55;
  pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.75,.25,1), opacity .42s ease;
}
/* GSAP tient le transform du <figure> (entrée puis respiration). Le survol
   et l'appui n'écrivent donc QUE sur l'image et sur le halo : les deux
   transformations ne se marchent jamais dessus. */
.pilotage-cine__phone-img{
  width:clamp(208px,19.4vw,282px);height:auto;
  /* Ombre bleutée et non noire : elle pose l'appareil sans le salir */
  filter:drop-shadow(0 26px 40px rgba(0,50,105,.28))
         drop-shadow(0 6px 12px rgba(0,50,105,.16));
  transform-origin:50% 50%;
  -webkit-tap-highlight-color:transparent;
  transition:transform .42s cubic-bezier(.2,.75,.25,1), filter .42s ease;
}

/* ---- Colonne 3 : quatre cartes de verre ---- */
/* Quatre rangées en 1fr : le conteneur est dimensionné par son contenu,
   les rangées se partagent donc la hauteur de la plus haute et les quatre
   cartes sortent rigoureusement égales, quelle que soit la longueur du
   texte ou la largeur d'écran. Les points lumineux des liaisons visent
   le centre de chaque carte : à hauteurs égales, ils sont régulièrement
   espacés sans rien avoir à corriger. */
.pilotage-cine__features{
  position:relative;z-index:3;
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:12px;
}
.pilotage-cine__card{
  display:grid;
  /* Maxima calés sur ce que donne 1440px : au-delà, le conteneur est
     bloqué à 1400px alors que les clamps en vw continuaient de grandir.
     L'icône et les marges gagnaient donc de la place SUR le texte, et les
     cartes étaient plus hautes en 1920 qu'en 1440. */
  grid-template-columns:clamp(46px,4.2vw,60px) minmax(0,1fr) 18px;
  align-items:center;
  gap:clamp(10px,1.15vw,17px);
  padding:clamp(12px,1.1vw,16px) clamp(14px,1.35vw,20px);
  min-height:126px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
  border:1px solid rgba(163,203,235,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(0,42,90,.06),
    0 14px 34px rgba(0,42,90,.14);
  transform-origin:50% 50%;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  transition-delay:0s;
}
.pilotage-cine__card-icon{width:100%;height:auto;transition:transform .28s ease}
.pilotage-cine__card-title{
  margin:0 0 6px;
  font-family:'Manrope','Inter',sans-serif;
  font-size:clamp(.95rem,1.12vw,1.2rem);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;
  color:var(--texte-fort);
}
.pilotage-cine__card p{
  margin:0;font-size:clamp(12.5px,.96vw,15px);line-height:1.55;
  color:var(--texte);
}
.pilotage-cine__arrow{
  width:18px;height:18px;color:var(--bleu-action);
  transition:transform .28s ease;
}
/* Sous 1080px la colonne de texte d'une carte tombe à ~147px et les
   descriptions repassaient à cinq lignes, ce qui rallongeait la section
   au lieu de la raccourcir. L'icône, les marges et la flèche cèdent donc
   quelques pixels au texte : quatre lignes au pire, cartes plus basses. */
@media (max-width:1080px){
  .pilotage-cine__card{
    grid-template-columns:40px minmax(0,1fr) 14px;
    gap:9px;padding:11px 12px;
  }
  .pilotage-cine__card-title{font-size:.9rem;margin-bottom:4px}
  .pilotage-cine__card p{font-size:12px;line-height:1.45}
  .pilotage-cine__arrow{width:14px;height:14px}
}

/* ---- Réponse au survol et à l'appui ----
   Les cartes ne sont pas cliquables : le survol précise la profondeur,
   il ne mime jamais un lien. L'appui est purement CSS (:active), il ne
   dépend d'aucun script et ne laisse aucun état sélectionné derrière lui. */
@media (hover:hover) and (pointer:fine){
  .pilotage-cine__card:hover{
    transform:translateY(-5px) scale(1.01);
    border-color:rgba(0,157,228,.68);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.94),
      0 2px 5px rgba(0,42,90,.08),
      0 22px 48px rgba(0,42,90,.22);
  }
  .pilotage-cine__card:hover .pilotage-cine__arrow{transform:translateX(3px)}
  .pilotage-cine__card:hover .pilotage-cine__card-icon{transform:scale(1.05)}

  .pilotage-cine__compat li:hover{transform:translateY(-4px)}
  .pilotage-cine__compat li:hover img{
    transform:scale(1.05);
    filter:drop-shadow(0 8px 18px rgba(0,50,105,.18))
           drop-shadow(0 0 14px rgba(0,157,228,.45));
  }
  .pilotage-cine__compat li:hover b::after{width:30px;background:var(--bleu-action)}

  /* Zoom produit : l'appareil grossit sur place, parfaitement droit.
     Aucune rotation, aucun déplacement latéral, aucune perspective
     suivant la souris. Le halo s'ouvre du même geste, un peu plus vite
     que l'appareil ne grandit, ce qui évite qu'il paraisse coller. */
  .pilotage-cine__phone:hover .pilotage-cine__phone-img{
    transform:scale(1.04);
    filter:drop-shadow(0 30px 48px rgba(0,32,79,.24))
           drop-shadow(0 0 30px rgba(0,157,228,.18));
  }
  .pilotage-cine__phone:hover::before{
    transform:translate(-50%,-50%) scale(1.25,1.01);
    opacity:.72;
  }
}

/* Appui : le même geste sur écran tactile comme à la souris. Toujours
   transitoire, jamais mémorisé. */
.pilotage-cine__card:active{transform:scale(.985)}
.pilotage-cine__compat li:active{transform:scale(.97)}
.pilotage-cine__phone:active .pilotage-cine__phone-img{transform:scale(1.02)}
@media (hover:hover) and (pointer:fine){
  /* Posé après le survol : l'appui l'emporte tant que le doigt ou le
     bouton reste enfoncé, puis le survol reprend la main. */
  .pilotage-cine__card:active{transform:translateY(-5px) scale(.985)}
}

/* ---- Liaisons lumineuses ---- */
.pilotage-cine__connections{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;overflow:visible;
}
.pilotage-cine__link{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:1.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 4px rgba(110,205,255,.9));
}
.pilotage-cine__spark{
  fill:#fff;
  filter:drop-shadow(0 0 6px rgba(0,175,255,.95));
}
/* Sous 1100px la distance téléphone-cartes ne suffit plus à dessiner une
   courbe lisible : mieux vaut aucune liaison qu'un enchevêtrement. */
@media (max-width:1099px){
  .pilotage-cine__connections{display:none}
}

/* Mouvement réduit : plus aucun déplacement, ni élévation, ni échelle,
   ni rotation. Le retour d'état passe alors uniquement par la bordure et
   l'ombre, qui ne bougent pas. */
@media (prefers-reduced-motion:reduce){
  .pilotage-cine__card,
  .pilotage-cine__card-icon,
  .pilotage-cine__arrow,
  .pilotage-cine__compat li,
  .pilotage-cine__compat img,
  .pilotage-cine__compat b::after,
  .pilotage-cine__phone-img,
  .pilotage-cine__phone::before{transition:none}

  .pilotage-cine__card:hover,
  .pilotage-cine__card:active,
  .pilotage-cine__card:hover .pilotage-cine__arrow,
  .pilotage-cine__card:hover .pilotage-cine__card-icon,
  .pilotage-cine__compat li:hover,
  .pilotage-cine__compat li:active,
  .pilotage-cine__compat li:hover img,
  .pilotage-cine__phone:hover .pilotage-cine__phone-img,
  .pilotage-cine__phone:active .pilotage-cine__phone-img{transform:none}

  /* Le halo garde son centrage et sa forme, il ne bouge simplement plus.
     Seule la luminosité répond encore au survol. */
  .pilotage-cine__phone:hover::before{
    transform:translate(-50%,-50%) scale(1.12,.9);
    opacity:.68;
  }
}

/* La branche mobile n'existe pas au-dessus de 900px. Masquée par
   display:none, elle sort aussi de l'arbre d'accessibilité. */
.pilotage-cine-m{display:none}

/* ============================================================
   PILOTAGE CINÉMATIQUE — MOBILE (sous 900px)

   Aucune règle de ce bloc ne franchit les 899px : la composition
   desktop approuvée n'est touchée nulle part. La branche desktop est
   entièrement retirée du flux, la branche mobile prend sa place.

   Le parti est l'inverse du desktop : le texte quitte l'image. Le
   panneau bleu ne porte plus que l'appareil, le fond n'a donc plus
   besoin de sa moitié pâle et se recadre sur la zone la plus riche.
   ============================================================ */
@media (max-width:899px){

  /* ---- La section redevient un simple empilement blanc ---- */
  .pilotage-cine{
    display:block;
    min-height:0;
    padding-block:0 0;
    background:var(--blanc);
    overflow:hidden;              /* aucun débordement horizontal possible */
  }
  .pilotage-cine__background,
  .pilotage-cine__wash,
  .pilotage-cine__container{display:none}
  .pilotage-cine-m{display:block}

  /* ---- 1. Introduction : texte hors de l'image, jamais dessus ----
     Le blanc pur paraissait nu. Une seule nappe cyan très diluée, posée
     dans l'angle bas-droit, prépare l'arrivée du panneau bleu : c'est
     de l'atmosphère, pas un aplat. Aucune marge négative dans ce bloc,
     le titre garde ses 20px à gauche et sa capitale entière. */
  .pcm__intro{
    position:relative;
    padding:46px 20px 28px;
    background:
      radial-gradient(110% 80% at 100% 100%,
        rgba(0,157,228,.09),
        transparent 58%),
      linear-gradient(180deg,#fff 0%,#f9fcfe 100%);
  }
  /* Filet dégradé : la jonction avec le panneau bleu se lit comme une
     transition, pas comme une coupure. */
  .pcm__intro::after{
    content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;
    background:linear-gradient(90deg,
      rgba(0,157,228,0) 0%,
      rgba(0,157,228,.26) 28%,
      rgba(0,157,228,.26) 72%,
      rgba(0,157,228,0) 100%);
  }
  .pcm__eyebrow{
    display:flex;align-items:center;gap:11px;margin:0 0 14px;
    font-family:'Manrope','Inter',sans-serif;
    font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:var(--bleu-action);line-height:1.2;
  }
  .pcm__eyebrow::before{
    content:"";flex:none;width:24px;height:3px;border-radius:2px;
    background:var(--bleu-vif);
  }
  .pcm__title{
    margin:0;
    font-family:'Manrope','Inter',sans-serif;
    /* Deux lignes, imposées : white-space:nowrap empêche tout retour
       automatique, le <br> du balisage fournit le seul autorisé.
       nowrap plutôt que text-wrap:nowrap, encore inégalement supporté ;
       le résultat est le même et le <br> passe outre dans les deux cas. */
    font-size:clamp(1.35rem,5.5vw,1.65rem);
    line-height:1.08;letter-spacing:-.035em;font-weight:800;
    color:var(--texte-fort);
    max-width:100%;white-space:nowrap;
    margin-bottom:16px;
  }
  .pcm__accent{
    display:flex;align-items:center;gap:8px;margin:15px 0 16px;
  }
  .pcm__accent i{
    display:block;width:40px;height:3px;border-radius:2px;
    background:linear-gradient(90deg,var(--bleu-action),var(--bleu-vif));
  }
  .pcm__accent span{
    display:block;width:5px;height:5px;border-radius:50%;background:var(--bleu-vif);
  }
  /* Filet cyan en amorce plutôt qu'un encadré : le paragraphe reste du
     texte courant, il ne devient pas une carte. */
  .pcm__lede{
    margin:0;max-width:36ch;
    font-size:16px;line-height:1.65;color:var(--texte);
    padding-left:14px;
    border-left:2px solid rgba(0,157,228,.30);
  }

  /* ---- 2. Panneau bleu : l'appareil et le rail des marques ----
     Hauteur plafonnée à 440px, contrainte ferme. object-position à 74%
     écarte la moitié pâle de gauche, devenue inutile puisque le texte
     n'est plus posé dessus, et garde les rubans lumineux.

     L'appareil et le rail forment UN groupe, centré dans la boîte de
     contenu ; un padding droit de 10% décale ce groupe vers la gauche.
     Le centre de l'appareil tombe ainsi entre 33 et 36% de la largeur
     du panneau à toutes les largeurs testées, et l'écart appareil-rail
     est réglé directement par le gap, sans décalage codé en dur qui
     casserait à 320px. */
  .pcm__panel{
    position:relative;isolation:isolate;
    height:clamp(390px,105vw,440px);
    margin-inline:16px;
    border-radius:24px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    gap:clamp(22px,6.6vw,32px);
    padding:14px 10% 14px 14px;
    background:#E9F2FA;           /* repli si le WebP ne charge pas */
  }
  /* Équivalent <img> de background-size:auto 116% / background-position:
     64% top : la boîte déborde de 16% vers le bas, l'overflow du panneau
     la rogne, et le canapé flou du bas de la photo sort du cadre. Les
     rubans bleus, eux, sont dans la moitié haute : ils restent entiers. */
  .pcm__bg{
    position:absolute;left:0;right:0;top:0;bottom:auto;z-index:0;
    width:100%;height:116%;max-width:none;
    object-fit:cover;object-position:64% top;
    pointer-events:none;
  }
  /* Voile atmosphérique sur le dernier cinquième : ce qui subsisterait
     du canapé se dissout dans un bleu très pâle. Posé en ::after, donc
     au-dessus du fond mais sous le téléphone (z-index 1) et sous le rail
     (2) : il ne passe jamais devant un contenu. */
  .pcm__panel::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom,
      transparent 76%,
      rgba(224,244,255,.90) 100%);
  }
  .pcm__phone{
    position:relative;z-index:1;margin:0;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  /* Même nappe diffuse que sur desktop, jamais un disque net */
  .pcm__phone::before{
    content:"";position:absolute;z-index:-1;
    left:50%;top:50%;transform:translate(-50%,-50%) scale(1.1,.88);
    width:150%;aspect-ratio:1 / 1;
    background:radial-gradient(ellipse at 50% 50%,
      rgba(0,157,228,.20) 0%,
      rgba(0,117,180,.09) 42%,
      rgba(0,117,180,0) 72%);
    filter:blur(34px);opacity:.55;pointer-events:none;
  }
  /* 430x960 : à 180px de large l'appareil ferait 402px de haut et
     toucherait les bords d'un panneau de 440. La fourchette est donc
     ramenée d'un cran, l'air autour de l'appareil compte davantage que
     ses derniers pixels de largeur. */
  .pcm__phone-img{
    width:clamp(146px,38vw,168px);height:auto;
    filter:drop-shadow(0 18px 30px rgba(0,50,105,.30))
           drop-shadow(0 5px 10px rgba(0,50,105,.16));
    cursor:zoom-in;
    transform-origin:50% 50%;
    transition:transform .42s cubic-bezier(.2,.75,.25,1), filter .42s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .pcm__zoom{
    position:absolute;z-index:4;top:12px;right:12px;
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    padding:0;border:1px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    color:var(--bleu-profond);cursor:pointer;
    box-shadow:0 6px 16px rgba(0,32,79,.18);
    transition:transform .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .pcm__zoom svg{width:20px;height:20px}

  /* ---- 3. Rail des marques : trois bulles posées près de l'appareil ----
     Plus aucun rectangle blanc : le conteneur de chaque marque est
     transparent, seule une bulle de verre ronde porte le logo. Le
     libellé et son filet cyan vivent à l'air libre sur le fond bleu.
     Rail au-dessus du fond (z-index 1) et sous la loupe (4). */
  .pcm__rail{
    position:relative;z-index:2;flex:none;
    margin:0;padding:0;list-style:none;
    display:flex;flex-direction:column;gap:14px;
  }
  /* Le mouvement est porté par la marque entière : image, libellé et
     filet montent ensemble, comme un seul objet. */
  .pcm__rail li{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    width:clamp(58px,17vw,68px);
    background:none;border:0;padding:0;
    transition:transform 320ms cubic-bezier(.2,.8,.2,1),
               filter 320ms ease;
    -webkit-tap-highlight-color:transparent;
  }
  /* Enveloppe purement structurelle : le PNG porte DÉJÀ son médaillon
     circulaire. Toute pastille ajoutée en CSS produisait un second
     cercle concentrique derrière le premier. Aucune de ces propriétés
     ne doit revenir : ni fond, ni bordure, ni ombre, ni flou d'arrière-
     plan, ni pseudo-élément. Exactement le traitement du desktop. */
  .pcm__rail-ico{
    flex:none;display:block;
    width:auto;height:auto;padding:0;
    background:transparent;border:0;border-radius:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .pcm__rail-ico::before,
  .pcm__rail-ico::after{display:none;content:none}
  .pcm__rail-ico img{
    display:block;
    width:clamp(42px,12vw,50px);aspect-ratio:1 / 1;height:auto;
    object-fit:contain;
  }
  .pcm__rail b{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    font-family:'Manrope','Inter',sans-serif;
    font-size:10.5px;font-weight:700;color:var(--texte-fort);
    line-height:1.15;text-align:center;
    /* Le libellé n'a plus de plaque derrière lui : une ombre blanche
       très douce le décolle du fond bleu sans boîte. */
    text-shadow:0 1px 2px rgba(255,255,255,.75);
  }
  .pcm__rail b::after{
    content:"";display:block;width:16px;height:2px;border-radius:2px;
    background:var(--bleu-vif);
    transition:width .28s ease, background-color .28s ease;
  }

  /* ---- 4. Carrousel : défilement natif, accroche CSS, aucun automate ---- */
  .pcm__car{margin-top:26px}
  .pcm__track{
    display:flex;gap:14px;
    padding:6px 20px 14px;       /* le padding bas laisse respirer les ombres */
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .pcm__track::-webkit-scrollbar{display:none}
  /* align-items par défaut = stretch : les quatre cartes prennent la
     hauteur de la plus haute, l'égalité est structurelle. */
  .pcm__card{
    flex:0 0 86%;max-width:340px;min-width:0;min-height:158px;
    scroll-snap-align:center;
    display:grid;grid-template-columns:62px minmax(0,1fr);
    align-items:center;gap:14px;
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(163,203,235,.62);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 1px 2px rgba(0,42,90,.06),
      0 10px 26px rgba(0,42,90,.12);
    transition:transform 300ms cubic-bezier(.2,.8,.2,1),
               box-shadow 300ms ease, border-color 300ms ease;
    -webkit-tap-highlight-color:transparent;
  }
  .pcm__card-icon{
    width:100%;height:auto;
    transition:transform 300ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
  }
  .pcm__card-title{
    margin:0 0 6px;
    font-family:'Manrope','Inter',sans-serif;
    font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;line-height:1.22;
    color:var(--texte-fort);
  }
  .pcm__card p{
    margin:0;font-family:'Inter',sans-serif;
    font-size:13.5px;line-height:1.5;color:var(--texte);
  }

  /* ---- 5. Pastilles : cible de 44px, pilule cyan pour l'active ---- */
  .pcm__dots{
    display:flex;justify-content:center;gap:0;
    margin-top:2px;padding-bottom:8px;
  }
  .pcm__dot{
    position:relative;width:44px;height:44px;
    padding:0;border:0;background:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .pcm__dot::after{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:9px;height:9px;border-radius:50%;background:#C4D6E5;
    transition:background-color .25s ease, width .25s ease;
  }
  .pcm__dot.is-active::after{
    background:var(--bleu-vif);width:26px;border-radius:99px;
  }

  /* ---- 6. Survol et appui ----
     Deux requêtes disjointes : le survol pour ce qui sait survoler, la
     réponse à l'appui pour tout le reste. Un vrai téléphone ne survole
     pas, c'est donc :active qui porte la totalité du retour tactile.
     Toutes ces règles sont en CSS pur : elles ne dépendent d'aucun
     script et survivent à l'échec du carrousel. */
  @media (hover:hover) and (pointer:fine){
    .pcm__card:hover{
      transform:translateY(-5px) scale(1.015);
      border-color:rgba(0,157,228,.70);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 2px 5px rgba(0,42,90,.08),
        0 18px 40px rgba(0,42,90,.22);
    }
    .pcm__card:hover .pcm__card-icon{
      transform:scale(1.05);
      filter:brightness(1.06)
             drop-shadow(0 0 10px rgba(0,157,228,.40));
    }

    /* Élévation et aura sur la marque entière : le médaillon du PNG
       reste le seul cercle, il n'y a plus de bulle CSS à animer. */
    .pcm__rail li:hover{
      transform:translateY(-4px) scale(1.06);
      filter:drop-shadow(0 8px 14px rgba(0,145,220,.28));
    }
    .pcm__rail li:hover b::after{width:24px;background:var(--bleu-action)}

    /* Même zoom produit que sur desktop : droit, sans rotation ni
       glissement. Porté par l'image, jamais par le <figure> que GSAP
       tient pendant l'entrée — et un transform ne bloque pas le clic,
       l'ouverture de la visionneuse reste intacte. */
    .pcm__phone:hover .pcm__phone-img{
      transform:translateY(-5px) scale(1.035);
      filter:drop-shadow(0 28px 46px rgba(0,32,79,.30))
             drop-shadow(0 0 26px rgba(0,157,228,.18));
    }
    .pcm__phone:hover::before{
      transform:translate(-50%,-50%) scale(1.22,.99);
      opacity:.7;
    }
  }

  /* Retour à l'appui — le seul que verra un téléphone réel. Court,
     franc, et rendu dès le relâchement : aucun état ne persiste.
     Aucune de ces règles ne touche au défilement : le balayage
     horizontal du carrousel reste entièrement natif. */
  @media (hover:none),(pointer:coarse){
    .pcm__card:active{transform:scale(.985)}
    .pcm__rail li:active{transform:scale(1.04)}
    .pcm__phone:active .pcm__phone-img{transform:scale(1.025)}
    .pcm__zoom:active{transform:scale(.94)}
  }
  /* La souris a droit au même appui, sans annuler son survol */
  @media (hover:hover) and (pointer:fine){
    .pcm__card:active{transform:translateY(-5px) scale(.985)}
    .pcm__rail li:active{transform:translateY(-4px) scale(1.04)}
    .pcm__zoom:active{transform:scale(.94)}
  }

  /* ---- Écrans étroits : l'icône cède au texte ----
     Palier à 389px et non 360 : à 375 la colonne de texte tombait sous
     185px et les cartes repassaient à 183px de haut, plus hautes qu'à
     390. L'icône rend donc ses pixels dès que la carte se resserre. */
  @media (max-width:389px){
    .pcm__intro{padding:40px 16px 22px}
    .pcm__panel{margin-inline:12px}
    .pcm__card{grid-template-columns:50px minmax(0,1fr);gap:12px;padding:14px}
    .pcm__card-title{font-size:1rem}
    .pcm__card p{font-size:13px}
    .pcm__track{padding-inline:16px;scroll-padding-inline:16px}
    .pcm__panel{padding:12px 9% 12px 12px}
    .pcm__rail{gap:12px}
    .pcm__rail b{font-size:10px}
  }
  /* Sous 340px la première ligne du titre ne tient plus à 1,35rem : on
     rend quelques dixièmes plutôt que de la rogner. */
  @media (max-width:339px){
    .pcm__title{font-size:1.18rem}
  }

  /* ---- Mouvement réduit : plus rien ne bouge, tout reste lisible ----
     Le carrousel reste balayable : seule la transformation disparaît,
     jamais le défilement. */
  @media (prefers-reduced-motion:reduce){
    .pcm__card,.pcm__card-icon,.pcm__zoom,.pcm__dot::after,
    .pcm__rail li,.pcm__rail-ico,.pcm__rail b::after,
    .pcm__phone-img,.pcm__phone::before{transition:none}

    .pcm__card:hover,.pcm__card:active,
    .pcm__card:hover .pcm__card-icon,
    .pcm__rail li:hover,.pcm__rail li:active,
    .pcm__phone:hover .pcm__phone-img,
    .pcm__phone:active .pcm__phone-img,
    .pcm__zoom:active{transform:none}
    .pcm__rail li:hover{filter:none}

    /* Le halo garde son centrage et sa forme, il ne respire plus */
    .pcm__phone:hover::before{
      transform:translate(-50%,-50%) scale(1.1,.88);opacity:.55;
    }
  }
}

/* ============================================================
   VISIONNEUSE PLEIN ÉCRAN — FOND PILOTAGE (mobile)

   Le calque .lb est partagé avec d'autres visuels de la page : le
   décor n'est donc posé QUE lorsqu'il a été ouvert depuis le téléphone
   Pilotage, via la classe lb--pilotage, et seulement sous 900px. Toutes
   les autres ouvertures gardent leur fond marine d'origine.

   ::before porte l'image floutée et agrandie, ::after la couche de
   profondeur ; la scène et le bouton de fermeture passent au-dessus
   des deux et restent parfaitement nets.
   ============================================================ */
@media (max-width:899px){
  .lb.lb--pilotage{
    overflow:hidden;isolation:isolate;
    background:#041F43;            /* socle si l'image ne charge pas */
  }
  .lb.lb--pilotage::before{
    content:"";position:absolute;inset:-16px;z-index:0;
    background:
      linear-gradient(180deg,
        rgba(4,31,67,.38),
        rgba(5,41,83,.52)),
      /* 62% en horizontal comme prévu ; en vertical 40% et non center :
         l'image est en paysage, le cadre en portrait, et « center »
         cadrait sous le faisceau de rubans. */
      url("../images/pilotage-background-clean.webp.webp")
        62% 40% / cover no-repeat;
    filter:blur(5px);
    transform:scale(1.04);
    pointer-events:none;
  }
  .lb.lb--pilotage::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:radial-gradient(circle at 50% 42%,
      rgba(120,211,255,.16),
      rgba(3,26,59,.26) 72%);
    pointer-events:none;
  }
  /* L'appareil et la fermeture au-dessus des deux couches, sans flou */
  .lb.lb--pilotage .lb__stage{z-index:2}
  .lb.lb--pilotage .lb__close{z-index:3}
}