@charset "utf-8";
/* ==========================================================================
   EGCCLIM — socle repris de preview.html pour les pages secondaires

   NE PAS MODIFIER A LA MAIN. Copie VERBATIM de cinq blocs de la feuille
   integree de preview.html : systeme de design, animations d'entree,
   en-tete collant (bandeau, panier, hamburger, panneau mobile, voile),
   echelle desktop, focus visible et .sr-only.

   Garantit que contact.html et les trois pages legales partagent
   exactement le meme en-tete et les memes variables que la page
   d'atterrissage. preview.html ne charge pas ce fichier : sa feuille
   integree reste sa seule source.
   ========================================================================== */

/* ============================================================
   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;
}

/* ============================================================
   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. */

/* ============================================================
   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}
}

/* 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;
}