/* =====================================================================
   Accueil reconstruit sur
   les composants d'apple.com/chfr/macbook-pro et /chfr/macbook-air, releves
   en direct le 26/10/2026 a 1403, 1000 et 375px : film d'accueil, galerie
   des points forts, visionneuse produit, cartes a fleche, cartes a fenetre,
   fenetre modale, carte de comparaison, fleches de galerie.
   Aucune declaration forcee, aucune contre-regle, une propriete une source.
   ===================================================================== */
:root{
  /* Surfaces. Apple en tient deux par theme : le fond de section et la
     surface de tuile, qui est toujours l'autre surface de la paire. */
  --ah-noir:#000;
  --ah-gris:#1d1d1f;
  --ah-clair:#f5f5f7;
  --ah-encre:#1d1d1f;
  --ah-encre-inv:#f5f5f7;
  /* Jetons de theme — valeurs du theme sombre par defaut. */
  --ah-fond:var(--ah-noir);
  --ah-tuile:var(--ah-gris);
  --ah-encre-courante:var(--ah-encre-inv);
  --ah-second:#86868b;                 /* rgb(134,134,139) */
  /* Le mot fort du texte deux tons : blanc pur sur sombre, mesure
     rgb(255,255,255) sous la puce de la section Performances. */
  --ah-fort:#fff;
  --ah-filet:rgba(255,255,255,.24);
  --ah-lien:#2997ff;
  /* Bouton rond des tuiles (.tile-button) : encre pleine, chevron ou plus
     en blanc. Sur une tuile sombre, la paire s'inverse. */
  --ah-rond:#1d1d1f;
  --ah-rond-signe:#fff;
  /* --sk-button-background / -hover / -active : trois valeurs, identiques
     en clair et en sombre. */
  --ah-bleu:#0071e3;
  --ah-bleu-survol:#0076df;
  --ah-bleu-appui:#006edb;
  --ah-focus:#0071e3;                  /* --sk-focus-color */
  /* .header-headline de la page MacBook Pro, theme sombre */
  --ah-degrade:linear-gradient(90deg,#e4f6f0,#9dcfca 31%,#6b95ac 68%,#45657d);
  /* .gradient-text-blue de la page MacBook Air, theme clair */
  --ah-degrade-clair:linear-gradient(90deg,#022640,#5786ab);
  /* Couleurs des mots forts des cartes Environnement : violet, orange, bleu
     canard, releves rgb(134,104,255), rgb(237,99,0), rgb(0,161,179). */
  --ah-violet:#8668ff;
  --ah-orange:#ed6300;
  --ah-canard:#00a1b3;
  /* .header-violator de la page MacBook Air : rgb(191,72,0) */
  --ah-violator:#bf4800;
  --ah-texte:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ah-titre:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* .viewport-content : 87,5 % de la fenetre, plafond 1260px */
  --ah-colonne:1260px;
  --ah-colonne-reelle:min(87.5%, var(--ah-colonne));
  --ah-chrome:980px;                   /* plafond des chromes Apple */
  --ah-colonne-chrome:min(100% - 44px, var(--ah-chrome));  /* sa largeur reelle */
  --ah-ecart:20px;                     /* --ric-gap */
  --ah-mesure:840px;                   /* 8 colonnes sur 12 de 1260 */
  --ah-rythme:144px;                   /* --global-section-padding */
  --ah-rupture:216px;
  --ah-entete:82px;                    /* .header-grid{min-height:82px} */
  --ah-lnav:52px;
  /* Courbe de la cascade Apple : easeInOutQuad. */
  --ah-courbe:cubic-bezier(.455,.03,.515,.955);
  /* Ouverture d'une matiere (fenetre, pastille) : ease-out appuye. */
  --ah-sortie:cubic-bezier(.23,1,.32,1);
}
.ah-s--noir{--ah-fond:var(--ah-noir);--ah-tuile:var(--ah-gris);
  --ah-rond:var(--ah-encre-inv);--ah-rond-signe:var(--ah-encre)}
.ah-s--gris{--ah-fond:var(--ah-gris);--ah-tuile:var(--ah-noir);
  --ah-rond:var(--ah-encre-inv);--ah-rond-signe:var(--ah-encre)}
.ah-s--clair{--ah-fond:var(--ah-clair);--ah-tuile:#fff;
  --ah-encre-courante:var(--ah-encre);
  --ah-second:#6e6e73;                 /* rgb(110,110,115) */
  --ah-fort:var(--ah-encre);
  --ah-filet:rgba(0,0,0,.16);
  --ah-lien:#0066cc}
.seq,.panneaux,.ah-science__scene{--ah-fond:var(--ah-noir)}

@media (max-width:1068px){:root{--ah-rythme:120px}}
/* Sous 760px la barre du site mesure 48px (styles.css, palier 760). */
@media (max-width:760px){:root{--ah-entete:48px}}
@media (max-width:833px){:root{--ah-lnav:48px}}
@media (max-width:734px){:root{--ah-rythme:112px;--ah-rupture:196px;
  --ah-colonne-reelle:min(87.5%, 420px)}}

/* Apple cale sa racine a 17px parce que toute sa feuille est en rem.
   Celle-ci est en px : ce reglage n'apporterait rien et dilaterait de 6,25 %
   l'en-tete et le pied du site, qui eux sont en rem. Mesure : 126px au lieu
   de 120px sur l'en-tete mobile. */
html{-webkit-text-size-adjust:100%;
  scroll-padding-block-start:calc(var(--ah-lnav) + 16px)}
body.ntropyx{background:var(--ah-noir);color:var(--ah-encre-inv);
  font:400 17px/25px var(--ah-texte);letter-spacing:-.374px;
  font-synthesis:none;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden}
button{font:inherit}

/* ---------------------------------------------------------------------
   Echelle typographique. Apple n'emploie aucune taille fluide : que des
   entiers en px poses par paliers. Chaque taille est un atome — taille,
   interligne et interlettrage vont ensemble.
   --------------------------------------------------------------------- */
/* .typography-hero-headline de la page MacBook Air : 64/70. */
.ah-d1{font:600 64px/70px var(--ah-titre);letter-spacing:normal;margin:0}
/* .typography-headline-super, titre des chapitres : 80/84, 64/68, 48/52. */
.ah-super{font:600 80px/84px var(--ah-titre);letter-spacing:-1.2px;margin:0}
/* .typography-section-header-headline : 48/52, 40/44, 32/36. */
.ah-d3{font:600 48px/52px var(--ah-titre);letter-spacing:-.144px;margin:0}
/* .typography-eyebrow, surtitre des chapitres : 24/28, puis 21/25. */
.ah-eyebrow{font:600 24px/28px var(--ah-titre);letter-spacing:.216px;margin:0}
/* .typography-hero-eyebrow : 28/32, 24/28, 21/25. Aussi le titre des
   cartes (.typography-feature-card-headline, .icon-card-headline). */
.ah-accroche{font:600 28px/32px var(--ah-titre);letter-spacing:.196px;margin:0}
.ah-intro{font:600 28px/32px var(--ah-titre);letter-spacing:.196px;margin:0}
.ah-corps{font:400 17px/25px var(--ah-texte);letter-spacing:-.374px;margin:0}
/* .typography-eyebrow-reduced en deux tons : le texte en gris second, le mot
   fort en --ah-fort, meme graisse. 21/25, puis 19/23 sous 734px. */
.ah-duo{font:600 21px/25px var(--ah-texte);letter-spacing:.231px;margin:0;color:var(--ah-second)}
.ah-duo strong{font-weight:600;color:var(--ah-fort)}
/* Apple ne coupe pas ses lignes par algorithme : il pose la non-coupure
   a la main. Ni equilibrage automatique des lignes, ni cesure. */
.nowrap{display:inline-block;white-space:nowrap}

@media (max-width:1068px){
  .ah-d1{font-size:56px;line-height:60px;letter-spacing:-.28px}
  .ah-super{font-size:64px;line-height:68px;letter-spacing:-.576px}
  .ah-d3{font-size:40px;line-height:44px;letter-spacing:0}
  .ah-eyebrow{font-size:21px;line-height:25px;letter-spacing:.231px}
  .ah-accroche{font-size:24px;line-height:28px;letter-spacing:.216px}
  .ah-intro{font-size:24px;line-height:28px;letter-spacing:.216px}
}
@media (max-width:734px){
  .ah-d1{font-size:32px;line-height:36px;letter-spacing:.128px}
  .ah-super{font-size:48px;line-height:52px;letter-spacing:-.144px}
  .ah-d3{font-size:32px;line-height:36px;letter-spacing:.128px}
  .ah-accroche{font-size:21px;line-height:25px;letter-spacing:.231px}
  .ah-intro{font-size:21px;line-height:25px;letter-spacing:.231px}
  .ah-duo{font-size:19px;line-height:23px;letter-spacing:.228px}
}

/* ---------------------------------------------------------------------
   Trame. La colonne vaut 87,5 % de la fenetre, plafonnee a 1260px ; sous
   735px le plafond tombe a 420px. Les chromes ne s'alignent pas sur elle.
   --------------------------------------------------------------------- */
.ah-w{width:87.5%;max-width:var(--ah-colonne);margin-inline:auto}
@media (max-width:734px){.ah-w{max-width:420px}}
.ah-chrome{width:var(--ah-colonne-chrome);margin-inline:auto}
@media (max-width:833px){:root{--ah-colonne-chrome:min(100% - 32px, var(--ah-chrome))}}

.ah-s{padding-block:var(--ah-rythme);position:relative;
  background:var(--ah-fond);color:var(--ah-encre-courante)}
.ah-s--rupture{padding-block-end:var(--ah-rupture)}
/* Le blanc n'est double qu'au CHANGEMENT de fond : deux sections de meme
   fond se touchent, la premiere perd son padding bas. */
.ah-s--noir:has(+ .ah-s--noir),
.ah-s--gris:has(+ .ah-s--gris),
.ah-s--clair:has(+ .ah-s--clair){padding-block-end:0}

/* Tete de section commerciale (sections Contraste et Avantages d'Apple) :
   un titre 48/52 cale a gauche, sans surtitre. */
.ah-tete{display:flex;flex-direction:column;gap:0;max-width:var(--ah-mesure);
  padding-block-end:4px;margin-block-end:44px}
.ah-tete h2 + p{margin-block-start:1.2em}
@media (max-width:1068px){.ah-tete{padding-block-end:2px;margin-block-end:38px}}
@media (max-width:734px){.ah-tete{margin-block-end:30px}}
.ah-tete__lead{color:var(--ah-second)}

/* Tete de chapitre, relevee sur les sections Batterie et Mac + iPhone a
   1403px : surtitre, 20px, titre super, 56px, description deux tons. La
   colonne fait 8 sur 12, centree (810px de large, x = 289). Sous 734px le
   surtitre n'est plus qu'a 12px du titre (mesure a 375px). Quand des cartes
   suivent, le chapitre porte lui-meme l'ecart en marge interne, comme
   .product-stories-section-header d'Apple (feuille de style relevee le
   27/10/2026) : 80px, 64 sous 1068px, 48 sous 734px. Une marge interne ne
   sort jamais de la section. */
.ah-chapitre{max-width:var(--ah-mesure);margin-inline:auto}
.ah-chapitre--suivi{padding-block-end:80px}
.ah-chapitre .ah-super,.ah-chapitre .ah-eyebrow + .ah-duo{margin-block-start:20px}
.ah-chapitre .ah-super + .ah-duo{margin-block-start:56px}
.ah-chapitre .ah-duo + .ah-duo{margin-block-start:1.2em}
@media (max-width:1068px){.ah-chapitre{max-width:83.333%}.ah-chapitre--suivi{padding-block-end:64px}}
@media (max-width:734px){
  .ah-chapitre{max-width:none}
  .ah-chapitre--suivi{padding-block-end:48px}
  .ah-chapitre .ah-super,.ah-chapitre .ah-eyebrow + .ah-duo{margin-block-start:12px}
}

/* ---------------------------------------------------------------------
   Boutons. Releve decisif : le bouton Apple n'a AUCUNE transition — zero
   declaration sur .button, .button-super, .button-elevated, .button-reduced,
   .button-neutral, .button-secondary. Le retour est instantane, par la
   couleur. L'interligne est celui du cran compact (20), pas celui du titre.
   --------------------------------------------------------------------- */
.ah-btn{display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;min-width:26px;padding:11px 21px;
  border:1px solid transparent;border-radius:980px;
  background:var(--ah-bleu);color:#fff;text-decoration:none;
  font:400 17px/20px var(--ah-texte);letter-spacing:-.374px}
.ah-btn:hover{background:var(--ah-bleu-survol)}
.ah-btn:active{background:var(--ah-bleu-appui)}
.ah-btn--menu{font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;padding:3px 10px}
/* .button-elevated de la capsule MacBook Air : 17/21, 45px de haut ;
   14/18 sous 734px. */
.ah-btn--capsule{line-height:21px}

/* Le lien a chevron n'est pas un bouton : seul le texte se souligne. */
.ah-lien{display:inline-flex;align-items:center;gap:4px;color:var(--ah-lien);
  text-decoration:none;font:400 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-lien:hover .ah-lien__texte{text-decoration:underline}
.ah-chevron{flex:none;margin-block-start:1px}
.ah-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ah-ecart);
  margin-block-start:32px}

/* Un seul anneau de focus pour toute la page, au clavier seulement. Deux
   decalages : 1px pour le texte, 3px pour ce qui a une surface. L'anneau
   n'a pas de rayon propre : il suit celui de l'element. */
:focus-visible{outline:2px solid var(--ah-focus);outline-offset:1px}
.ah-btn:focus-visible,.ah-lecture-btn:focus-visible,.ah-galerie__lecture:focus-visible,
.ah-fiche__lien:focus-visible,.ah-icone__ouvrir:focus-visible,
.ah-fleche:focus-visible,.ah-pastille:focus-visible,.ah-selecteur__choix:focus-visible{outline-offset:3px}

/* ---------------------------------------------------------------------
   Barre locale. Sticky a top:0, jamais fixed. Fond transparent au repos,
   materialise seulement une fois collee. Le filet est un pseudo-element de
   1px large de 980px, qui s'etend a 100 % une fois collee. Pile de plans
   contigue : en-tete du site 9999, barre locale 9997.
   --------------------------------------------------------------------- */
/* Apple pose sa barre locale a 9997 parce que sa pile ne contient rien
   d'autre. Ici la pile est celle du site, mesuree : en-tete 40, panneau
   deroulant du menu 60, tiroir mobile 39. A 9997 la barre passait devant
   les sous-menus et mangeait leur premiere ligne. Elle se place donc sous
   eux, au-dessus du contenu. */
.ah-lnav{position:sticky;top:0;z-index:20;height:var(--ah-lnav);
  display:flex;align-items:center;color:var(--ah-encre-inv)}
.ah-lnav__fond{position:absolute;inset:0;z-index:1;background:transparent}
.ah-lnav.est-collee .ah-lnav__fond{background:rgba(22,22,23,.8)}
@supports (backdrop-filter:blur(20px)){
  .ah-lnav.est-collee .ah-lnav__fond{backdrop-filter:saturate(1.8) blur(20px)}
}
.ah-lnav__fond::after{content:"";position:absolute;left:50%;bottom:0;height:1px;
  width:var(--ah-colonne-chrome);transform:translateX(-50%);background:rgba(255,255,255,.24)}
.ah-lnav.est-collee .ah-lnav__fond::after{width:100%}
/* La largeur appartient a .ah-chrome, pose sur le meme element : la
   redeclarer ici ecrasait la gouttiere et collait le titre au bord. */
.ah-lnav__contenu{position:relative;z-index:2;display:flex;align-items:center;
  gap:var(--ah-ecart)}
.ah-lnav__titre{font:600 21px/24px var(--ah-texte);letter-spacing:.231px;color:#fff;opacity:.92;
  text-decoration:none;white-space:nowrap}
.ah-lnav__menu{display:flex;align-items:center;gap:var(--ah-ecart);margin-inline-start:auto}
.ah-lnav__lien{font:400 12px/22px var(--ah-texte);letter-spacing:-.12px;color:#fff;opacity:.8;
  text-decoration:none;white-space:nowrap}
.ah-lnav__lien:hover{opacity:1}
@media (max-width:833px){.ah-lnav__menu{display:none}}
@media (max-width:734px){.ah-lnav__titre{font-size:17px;line-height:21px;letter-spacing:-.374px}}

/* ---------------------------------------------------------------------
   Ouverture : la combustion passe du sombre au clair, en boucle.
   Mise en page du film d'accueil d'Apple, releve le 26/10/2026 : le film
   remplit l'ecran, bord a bord ; le texte se pose en bas a gauche, a 64px du
   bas : consigne 14/18, 12px, selecteur, 48px, phrase d'etat 17/21, 8px,
   surtitre 28/32, 8px,
   titre 64/70, 14px, accroche 17/21. A droite, centree sur le texte, la
   capsule et son bouton eleve. Sous 1068px la capsule passe sous le texte ;
   sous 734px le texte se centre.
   Deux etats, deux jeux de valeurs Apple mesurees :
   - clair, film MacBook Air : encre #1d1d1f, titre en degrade bleu, accroche
     orange rgb(191,72,0), capsule rgba(232,232,237,.5) ;
   - sombre, film MacBook Pro : encre #f5f5f7, titre en degrade vert d'eau,
     accroche en gris #86868b (l'orange ne tient pas le contraste sur le
     noir), capsule rgba(66,66,69,.72) floutee a 20px.
   Le bloc de texte et la capsule portent chacun leur etat : le front atteint
   le texte avant la capsule. Le titre porte les deux degrades bout a bout
   sur deux largeurs ; le script fait glisser le fond au passage du front.
   Couches de la carte, de bas en haut : la flamme claire ; la flamme
   sombre, le meme film en negatif, percee par un cercle qui grandit depuis
   la buse ; la toile (suie, etincelles, lisere du front) ; le texte ; la
   commande de pause.
   Sans script ou sous mouvement reduit, seul l'etat clair existe, fixe, et
   le selecteur n'apparait pas.
   Apple n'inscrit jamais son ouverture au systeme d'apparition.
   --------------------------------------------------------------------- */
/* La buse se lit aussi dans le script : declaree, elle s'y lit en px quand
   la feuille la pose en vw. */
@property --ah-buse-y{syntax:"<length-percentage>";inherits:true;initial-value:0%}
.ah-hero{--ah-ajustement:cover;--ah-cadrage:62% 60%;--ah-fondu-debut:40%;--ah-fondu-fin:88%;
  --ah-buse-x:4%;--ah-buse-y:86%;
  position:relative;overflow:hidden;
  height:calc(100svh - var(--ah-entete) - var(--ah-lnav))}
/* Sous 734px, le film tient toute la largeur, en haut et entier : 56,25vw
   de haut. Fondu et buse y reprennent les proportions de l'ordinateur
   (fondu de 40 a 88 %, buse a 86 % de la hauteur du film). */
@media (max-width:734px){.ah-hero{--ah-ajustement:contain;--ah-cadrage:50% 0;
  --ah-fondu-debut:22.5vw;--ah-fondu-fin:49.5vw;--ah-buse-y:48.4vw}}
/* La carte : tout le premier ecran. Elle isole les couches et leur
   melange du reste de la page. */
.ah-hero__carte{position:absolute;inset:0;isolation:isolate;overflow:hidden;
  background:var(--ah-clair);color:var(--ah-encre)}
/* Le bas de chaque film se fond dans ce qui est derriere lui : le clair de
   la carte, ou le noir de la couche sombre. Le texte se lit sur un fond uni. */
.ah-hero__flamme{position:absolute;inset:0;
  mask-image:linear-gradient(180deg,#000 var(--ah-fondu-debut),transparent var(--ah-fondu-fin))}
/* Une source par film, la meme partout : la flamme entiere. La photo reste
   l'image d'attente. Un film non affiche n'est jamais observe, donc jamais
   charge : en mouvement reduit, aucun octet de video. Les deux films durent
   5 s et tournent en boucle. */
.ah-hero__flamme img,.ah-hero__film{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:var(--ah-ajustement);object-position:var(--ah-cadrage)}
/* Le bord du cercle est un fondu de 80px ; le script ecrit --ah-r sur cet
   element seul. */
.ah-hero__sombre{position:absolute;inset:0;background:var(--ah-noir);
  mask-image:radial-gradient(circle at var(--ah-buse-x) var(--ah-buse-y),
    transparent calc(var(--ah-r,-60px) - 40px),#000 calc(var(--ah-r,-60px) + 40px))}
.ah-hero__toile{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.ah-hero__sombre,.ah-hero__toile,.ah-hero .ah-hero__pause,.ah-selecteur{display:none}
.ah-hero__marquee{position:absolute;inset-inline:0;bottom:0;padding-block:64px}
.ah-hero__rang{display:flex;align-items:center;justify-content:space-between;gap:var(--ah-ecart)}
.ah-hero__textes{--ah-encre-courante:var(--ah-encre);--ah-hero-accroche:var(--ah-violator);
  --ah-titre-position:0%;
  --ah-sel-fond:rgba(210,210,215,.64);--ah-sel-curseur:#1d1d1f;--ah-sel-lisiere:.8;
  --ah-sel-survol:rgba(0,0,0,.06);--ah-sel-reflet:.7;
  max-width:622px;color:var(--ah-encre-courante);
  transition:color .6s var(--ah-courbe)}
/* La consigne, au-dessus de la pastille : « Cliquez » au pointeur,
   « Touchez » au doigt. Elle s'efface au premier choix sans liberer sa
   place : le texte ne bouge pas. */
.ah-selecteur__consigne{display:none;margin:0 0 12px;font:400 14px/18px var(--ah-texte);letter-spacing:-.224px;
  transition:opacity .3s ease-out,visibility .3s}
.ah-selecteur__consigne.est-lue{opacity:0;visibility:hidden}
.ah-consigne-tactile{display:none}
@media (pointer:coarse){.ah-consigne-clic{display:none}.ah-consigne-tactile{display:inline}}
/* Le selecteur Sans / Avec NTROPYX : la pastille « tabnav-elevated »
   d'Apple, relevee le 27/10/2026 sur la page MacBook Pro (Modele 14″ /
   16″) : 56px de haut, 6px de marge, segments de 44px a 22px de marge
   laterale, 17/21 a -0,022em. Posee sur une image, elle prend la matiere
   « alpha » : rgba(210,210,215,.64) et curseur #1d1d1f sur le clair,
   rgba(66,66,69,.72) et curseur #f5f5f7 sur le sombre, floutee a 20px.
   La matiere est un verre Liquid Glass en relief : le flou sature la
   couleur de la flamme, une lisiere de lumiere d'1px borde le haut, une
   ombre interne fine le bas, une ombre douce porte la pastille.
   Chaque choix garde sa couleur : « Sans » en noir, « Avec » en vert
   #30d158, le vert systeme d'Apple sur fond sombre. « Sans » est toujours
   pose sur du clair (curseur blanc au sombre, verre clair au clair),
   « Avec » toujours sur du sombre (verre sombre au sombre, curseur
   #1d1d1f au clair).
   Le curseur glisse en 320ms ease-out. 48px le separent de son panneau.
   La pastille repond des l'appui : elle s'enfonce a .97 en 160ms. */
.ah-selecteur{position:relative;height:56px;padding:6px;margin:0 0 48px;border-radius:999px;
  background:var(--ah-sel-fond);font:400 17px/21px var(--ah-texte);letter-spacing:-.022em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--ah-sel-lisiere)),inset 0 -1px 0 rgba(0,0,0,.12),
    0 8px 24px rgba(0,0,0,.18);
  transition:background-color .6s var(--ah-courbe),transform .16s ease-out}
.ah-selecteur:active{transform:scale(.97)}
.ah-selecteur__curseur{position:absolute;top:6px;bottom:6px;left:6px;width:var(--ah-sel-l,0);
  border-radius:999px;background:var(--ah-sel-curseur);transform:translateX(var(--ah-sel-x,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.2)}
.ah-selecteur.est-pret .ah-selecteur__curseur{
  transition:transform .32s ease-out,width .32s ease-out,background-color .6s var(--ah-courbe)}
/* Le reflet : a chaque bascule de la boucle, une bande de lumiere traverse
   la pastille, comme la lumiere sur la matiere Liquid Glass d'Apple. */
.ah-selecteur__reflet{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ah-selecteur__reflet::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,var(--ah-sel-reflet)) 50%,transparent 65%)}
.ah-selecteur__reflet.est-actif::before{animation:ah-reflet .9s cubic-bezier(.4,0,.2,1)}
@keyframes ah-reflet{to{transform:translateX(100%)}}
.ah-selecteur__choix{position:relative;height:44px;padding:0 22px;border:0;border-radius:999px;
  background:none;font:inherit;letter-spacing:inherit;cursor:pointer;
  white-space:nowrap;transition:background-color .16s ease-out}
.ah-selecteur__choix--sans{color:#000}
.ah-selecteur__choix--avec{color:#30d158}
.ah-selecteur__choix[aria-selected="true"]{cursor:auto}
/* Au survol, le choix libre s'eclaire. */
@media (hover:hover){.ah-selecteur__choix[aria-selected="false"]:hover{background-color:var(--ah-sel-survol)}}
/* La phrase d'etat, panneau du selecteur : deux phrases superposees. Le
   front ecrit la seconde de gauche a droite pendant que la premiere s'efface
   dans un flou de 4px. */
.ah-hero__etat{--ah-ecriture:1;display:grid;justify-items:start;margin:0 0 8px;
  font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-hero__etat > span{grid-area:1/1}
.ah-hero__etat-sombre{color:var(--ah-encre-inv);
  opacity:calc(1 - var(--ah-ecriture));filter:blur(calc(var(--ah-ecriture) * 4px))}
.ah-hero__etat-clair{
  mask-image:linear-gradient(90deg,#000 calc(var(--ah-ecriture) * 112% - 12%),transparent calc(var(--ah-ecriture) * 112%))}
/* Le ® ne doit pas ouvrir la ligne du surtitre : 32px, pas 37. */
.ah-hero sup{line-height:0}
/* Premiere moitie : --ah-degrade-clair ; seconde moitie : --ah-degrade. */
.ah-hero .ah-d1{margin-block-start:8px;
  background:var(--ah-encre-courante);
  background-image:linear-gradient(90deg,#022640,#5786ab 50%,#e4f6f0 50%,#9dcfca 65.5%,#6b95ac 84%,#45657d);
  background-size:200% 100%;background-position:var(--ah-titre-position) 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.ah-hero__violator{margin:14px 0 0;color:var(--ah-hero-accroche);
  font:400 17px/21px var(--ah-texte);letter-spacing:-.374px;
  transition:color .6s var(--ah-courbe)}
.ah-hero__violator b{display:inline-flex;align-items:center;gap:6px;font-weight:inherit}
.ah-hero__violator svg{width:14px;height:14px}
.ah-capsule{--ah-capsule-fond:rgba(232,232,237,.5);--ah-capsule-encre:var(--ah-encre);
  display:flex;align-items:center;gap:25px;flex:none;
  padding:12px 20px 12px 25px;border-radius:980px;
  background:var(--ah-capsule-fond);color:var(--ah-capsule-encre);
  transition:background-color .6s var(--ah-courbe),color .6s var(--ah-courbe)}
.ah-capsule__texte{font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
/* Avec script et mouvement, l'ouverture commence sombre ; le script ecrit
   ensuite chaque etat. */
@media (prefers-reduced-motion:no-preference){
  .js .ah-hero__sombre,.js .ah-hero__toile{display:block}
  .js .ah-hero .ah-hero__pause{display:flex}
  .js .ah-selecteur{display:inline-flex}
  .js .ah-selecteur__consigne{display:block}
  .js .ah-hero__textes:not([data-etat="clair"]){--ah-encre-courante:var(--ah-encre-inv);
    --ah-hero-accroche:#86868b;--ah-titre-position:100%;
    --ah-sel-fond:rgba(66,66,69,.72);--ah-sel-curseur:#f5f5f7;--ah-sel-lisiere:.22;
    --ah-sel-survol:rgba(255,255,255,.14);--ah-sel-reflet:.35}
  .js .ah-hero__etat{--ah-ecriture:0}
  .js .ah-capsule:not([data-etat="clair"]){--ah-capsule-fond:rgba(66,66,69,.72);--ah-capsule-encre:var(--ah-encre-inv)}
  @supports (backdrop-filter:blur(20px)){
    .ah-selecteur{backdrop-filter:blur(20px) saturate(180%)}
    .js .ah-capsule:not([data-etat="clair"]){backdrop-filter:blur(20px)}
  }
}
.ah-hero .ah-hero__pause{right:20px;bottom:20px}
@media (max-width:1068px){.ah-hero__rang{flex-direction:column;align-items:flex-start;gap:24px}}
@media (max-width:734px){
  .ah-hero__marquee{padding-block:0 24px}
  .ah-hero__rang{align-items:stretch}
  .ah-hero__textes{max-width:none;text-align:center}
  .ah-hero__etat{justify-items:center;font-size:14px;line-height:18px;letter-spacing:-.224px}
  .ah-capsule{justify-content:space-between;gap:16px;padding:10px 10px 10px 20px}
  .ah-capsule__texte,.ah-btn--capsule{font-size:14px;line-height:18px;letter-spacing:-.224px}
  .ah-hero .ah-hero__pause{top:16px;bottom:auto;right:16px}
}

/* ---------------------------------------------------------------------
   Galerie des points forts, relevee sur la section « Points forts. » :
   fond #1d1d1f, titre 48/52 a 44px des tuiles. Tuiles de la largeur de la
   colonne (87,5 %, plafond 1260 ; 308px a 375px), 680px de haut (628 sous
   1068), rayon 28, ecart 20, piste aimantee. Photo paysage (2,28:1) au-dessus
   de 734 ; dessous, photo portrait et tuile allongee : la photo garde le
   format 1:2 sous la legende, presque entiere. La legende ne
   se pose jamais sur l'image : elle occupe le haut de la tuile, a 48px du
   bord (44, 32), 28/32 (24/28, 17/21), largeur 584 (555, 244), sur deux
   lignes reservees (trois sous 734) pour que toutes les images aient la
   meme hauteur ; 32px plus bas (24 sous 734), l'image remplit le reste,
   bord a bord.
   Commandes collees a 32px du bas de la fenetre, 32px sous les tuiles :
   pastilles dans une capsule de 56px, bouton rond de 56px, fond
   rgba(42,42,45,.72) floute a 7px. Pastille 8x8, courante 48x8, rayon 10.
   --------------------------------------------------------------------- */
.ah-galerie .ah-d3{margin-block-end:44px}
.ah-galerie__piste{--ah-tuile-l:min(87.5cqw, var(--ah-colonne));
  container-type:inline-size;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none}
.ah-galerie__piste::-webkit-scrollbar{display:none}
.ah-galerie__liste{display:flex;gap:var(--ah-ecart);margin:0;list-style:none;
  padding:0 calc((100cqw - var(--ah-tuile-l)) / 2)}
.ah-galerie__tuile{position:relative;flex:0 0 var(--ah-tuile-l);height:680px;margin:0;
  display:flex;flex-direction:column;
  border-radius:28px;overflow:hidden;background:#000;scroll-snap-align:center}
.ah-galerie__tuile picture{flex:1 1 0;min-height:0;display:block}
.ah-galerie__tuile img{width:100%;height:100%;display:block;object-fit:cover}
.ah-galerie__legende{flex:none;max-width:680px;min-height:144px;margin:0;padding:48px 48px 32px;
  font:600 28px/32px var(--ah-titre);letter-spacing:.196px;color:rgba(255,255,255,.92)}
.ah-galerie__commandes{position:sticky;bottom:32px;z-index:2;margin-block-start:32px;
  display:flex;justify-content:center;gap:16px}
.ah-galerie__points,.ah-galerie__lecture{height:56px;border-radius:28px;
  background:rgba(42,42,45,.72)}
@supports (backdrop-filter:blur(7px)){
  .ah-galerie__points,.ah-galerie__lecture{backdrop-filter:blur(7px)}}
.ah-galerie__points{display:flex;align-items:center;gap:16px;padding:0 24px}
.ah-galerie__point{position:relative;width:8px;height:8px;padding:0;border:0;
  border-radius:10px;overflow:hidden;cursor:pointer;
  background:rgba(245,245,247,.8);transition:background-color .25s linear}
.ah-galerie__point.est-courant{width:48px}
.ah-galerie__point.est-courant::after{content:"";position:absolute;inset-block:0;left:0;
  width:calc(var(--ah-avance,0) * 100%);background:var(--ah-encre-inv)}
.ah-galerie__lecture{width:56px;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ah-encre-inv)}
@media (max-width:1068px){
  .ah-galerie .ah-d3{margin-block-end:38px}
  .ah-galerie__tuile{height:628px}
  .ah-galerie__legende{max-width:643px;min-height:132px;padding:44px 44px 32px;
    font-size:24px;line-height:28px;letter-spacing:.216px}
}
@media (max-width:734px){
  .ah-galerie .ah-d3{margin-block-end:30px}
  .ah-galerie__piste{--ah-tuile-l:calc(87.5cqw - 20px)}
  .ah-galerie__tuile{height:calc(119px + 2 * var(--ah-tuile-l))}
  .ah-galerie__legende{max-width:308px;min-height:119px;padding:32px 32px 24px;
    font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
}

/* ---------------------------------------------------------------------
   Le chapitre du catalyseur. Comme la section Performances : le texte deux
   tons, puis l'image des huit secteurs qui s'ouvre bord a bord au
   defilement, puis la suite du texte. L'animation n'est declaree que si le
   navigateur sait la lier au defilement et si le visiteur n'a pas demande
   moins de mouvement ; sinon l'image reste ouverte.
   --------------------------------------------------------------------- */
.ah-chapitre--suite{margin-block-start:var(--ah-rythme)}
.ah-produit{margin:var(--ah-rythme) 0 0}
.ah-produit img{display:block;width:100%;height:auto}
.ah-produit figcaption{margin-block-start:24px;text-align:center;color:var(--ah-second);
  font:400 14px/20px var(--ah-texte);letter-spacing:-.224px}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ah-produit img{animation:ah-ouverture linear both;animation-timeline:view();
      animation-range:entry 0% cover 50%}
  }
}
@keyframes ah-ouverture{
  from{transform:scale(.875);border-radius:32px}
  to{transform:none;border-radius:0}}
.ah-certs{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-block-start:40px;
  padding-block-start:28px;border-block-start:1px solid var(--ah-filet)}
.ah-certs span,.ah-certs > div{font:400 14px/20px var(--ah-texte);letter-spacing:-.224px;
  color:var(--ah-second)}
.ah-certs > div strong{font-weight:600;color:var(--ah-encre-courante)}

/* ---------------------------------------------------------------------
   Visionneuse produit, relevee sur « De plus pres. » : panneau noir de
   1440x760, rayon 28, 15px de marge laterale. A gauche, centree en hauteur a
   90px du bord, une pile de pastilles de 56px, 12px d'ecart : matiere
   rgba(42,42,45,.72) floutee a 20px, rayon 28, marge 0 32 0 14, plus cercle
   de 24px, libelle 17/21 gras. Une pastille ouverte devient une carte de
   423px, marge 28, texte 17/25 au mot fort en tete ; le media change a
   droite et un bouton rond ferme la visite en haut a droite.
   Sous 734, releve sur la page iPhone 18 Pro a 375px : panneau de 640px,
   photos sur toute la surface, bouteilles entieres de 120 a 446px du haut
   comme le produit d'Apple au repos (releve du 02.11.2026) ; la photo « Le bon ordre », dont les textes
   touchent les bords, reste entiere en haut, noir dessous. Les pastilles (libelle 14/18 gras, marge
   0 32 0 16) forment une seule rangee qui defile, 12px d'ecart, a 6,25 %
   du bord, tenue a 20px du bas de l'ecran tant que le panneau le depasse.
   Ouverte, la pastille devient une carte centree (panneau moins 2 x 40px,
   marge 24, texte 14/20), en verre sur le bas du media ; les voisines
   depassent de 30px, 10px d'ecart, et glissent en 480ms. Deux fleches de
   40x88, chevron de 36 a cheval sur le bord, aucune avant la premiere
   carte ni apres la derniere. Bouton rond de 36 a 20px du coin, matiere
   rgba(42,42,45,.72).
   Chaque plage d'ecran porte ses propres valeurs : aucune regle n'en
   annule une autre.
   --------------------------------------------------------------------- */
.ah-visionneuse{position:relative;width:calc(100% - 30px);max-width:1440px;
  margin-inline:auto;border-radius:28px;overflow:clip;background:#000;color:var(--ah-encre-inv)}
.ah-visionneuse__medias{position:absolute}
.ah-visionneuse__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;opacity:0;transition:opacity .4s var(--ah-courbe)}
.ah-visionneuse__media.est-visible{opacity:1}
/* Sous 734, la photo de scene passe a sa version portrait : la balise
   picture s'efface pour que l'image reste l'enfant direct du media. */
.ah-visionneuse__media picture{display:contents}
.ah-visionneuse__media img{display:block;width:auto;max-width:100%;object-fit:contain}
.ah-visionneuse__media--paire{gap:40px}
.ah-visionneuse__media--paire img{max-width:42%}
.ah-visionneuse__pile{display:flex;margin:0;list-style:none}
.ah-pastille-bloc{border-radius:28px;background:rgba(42,42,45,.72)}
@supports (backdrop-filter:blur(20px)){.ah-pastille-bloc{backdrop-filter:blur(20px)}}
.ah-pastille{display:flex;align-items:center;gap:10px;height:56px;
  border:0;border-radius:28px;background:transparent;color:var(--ah-encre-inv);cursor:pointer;
  white-space:nowrap}
.ah-pastille svg{flex:none;width:24px;height:24px}
.ah-pastille__texte{display:none;margin:0;box-sizing:border-box;color:var(--ah-encre-inv)}
.ah-pastille__texte strong{font-weight:600}
.ah-pastille-bloc.est-ouvert .ah-pastille{display:none}
.ah-pastille-bloc.est-ouvert .ah-pastille__texte{display:block;opacity:1;
  transition:opacity .3s var(--ah-sortie)}
@starting-style{.ah-pastille-bloc.est-ouvert .ah-pastille__texte{opacity:0}}
.ah-visionneuse__fleche{display:none}
.ah-visionneuse__fermer{position:absolute;z-index:3;width:44px;height:44px;
  display:none;align-items:center;justify-content:center;border:0;padding:0;background:none;cursor:pointer}
.ah-visionneuse.est-ouvert .ah-visionneuse__fermer{display:flex}
.ah-rond{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:var(--ah-rond);color:var(--ah-rond-signe);
  transition:background-color .1s linear}
.ah-rond svg{display:block;fill:currentColor}
.ah-visionneuse__fermer .ah-rond{color:var(--ah-encre-inv)}
@media (min-width:735px){
  .ah-visionneuse__pile{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    flex-direction:column;align-items:flex-start;gap:12px;padding:0}
  .ah-visionneuse__media:not(.ah-visionneuse__media--scene,.ah-visionneuse__media--paire) img{height:82%}
  .ah-visionneuse__media--paire img{height:74%}
  .ah-visionneuse__media--scene img{width:88%;max-height:82%;border-radius:28px;object-fit:cover}
  .ah-pastille-bloc{max-width:423px}
  .ah-pastille{padding:0 32px 0 14px;font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
  .ah-pastille__texte{padding:28px;width:423px;max-width:100%;
    font:400 17px/25px var(--ah-texte);letter-spacing:-.374px}
  .ah-visionneuse__fermer{top:20px;right:20px}
  .ah-visionneuse__fermer .ah-rond{background:rgba(66,66,69,.72)}
}
@media (min-width:1069px){
  .ah-visionneuse{height:760px}
  .ah-visionneuse__medias{inset:0 0 0 34%}
  .ah-visionneuse__pile{left:90px}
}
@media (min-width:735px) and (max-width:1068px){
  .ah-visionneuse{height:680px}
  .ah-visionneuse__medias{inset:0 0 0 40%}
  .ah-visionneuse__pile{left:40px}
}
@media (max-width:734px){
  .ah-visionneuse{height:640px;display:flex;flex-direction:column;justify-content:flex-end}
  .ah-visionneuse__medias{inset:0}
  .ah-visionneuse__media:not(.ah-visionneuse__media--scene){padding:120px 0 194px}
  .ah-visionneuse__media img{height:100%}
  .ah-visionneuse__media--scene img{width:100%}
  .ah-visionneuse__media--scene:not(.ah-visionneuse__media--entiere) img{object-fit:cover}
  .ah-visionneuse__media--entiere img{object-fit:contain;object-position:50% 0}
  .ah-visionneuse__commandes{position:sticky;bottom:0;z-index:2;padding-bottom:20px}
  .ah-visionneuse__pile{align-items:flex-end}
  .ah-visionneuse:not(.est-ouvert) .ah-visionneuse__pile{gap:12px;padding:0 6.25%;
    overflow-x:auto;scroll-padding-inline:6.25%;scrollbar-width:none}
  .ah-visionneuse:not(.est-ouvert) .ah-visionneuse__pile::-webkit-scrollbar{display:none}
  .ah-visionneuse:not(.est-ouvert) .ah-pastille-bloc{flex:none}
  .ah-visionneuse.est-ouvert .ah-visionneuse__pile{gap:10px;padding:0 40px}
  .ah-visionneuse.est-ouvert .ah-pastille-bloc{flex:0 0 100%;
    transform:translateX(calc(var(--ah-vue) * (-100% - 10px)))}
  .ah-visionneuse.est-ouvert .ah-pastille-bloc:not(.est-ouvert) .ah-pastille{visibility:hidden}
  .ah-pastille{padding:0 32px 0 16px;font:600 14px/18px var(--ah-texte);letter-spacing:-.224px}
  .ah-pastille__texte{padding:24px;font:400 14px/20px var(--ah-texte);letter-spacing:-.224px}
  .ah-visionneuse__fleche{position:absolute;bottom:20px;width:40px;height:88px;padding:0;border:0;
    background:none;color:var(--ah-encre-inv);cursor:pointer}
  .ah-visionneuse.est-ouvert .ah-visionneuse__fleche{display:block}
  .ah-visionneuse__fleche:disabled{visibility:hidden}
  .ah-visionneuse__fleche--prec{left:0}
  .ah-visionneuse__fleche--suiv{right:0}
  .ah-visionneuse__fleche svg{position:absolute;bottom:10px;width:36px;height:36px;fill:none;
    stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .ah-visionneuse__fleche--prec svg{left:-6px}
  .ah-visionneuse__fleche--suiv svg{right:-6px}
  .ah-visionneuse__fermer{top:16px;right:16px}
  .ah-visionneuse__fermer .ah-rond{background:rgba(42,42,45,.72)}
}
@media (max-width:734px) and (prefers-reduced-motion:no-preference){
  .ah-visionneuse[data-glisse] .ah-pastille-bloc{transition:transform .48s cubic-bezier(.33,1,.68,1)}
}

/* ---------------------------------------------------------------------
   Cartes a fenetre, relevees sur la section Environnement : tuile de
   407x287, rayon 28, marge 28 76 52 32, pictogramme de 56px, 9px, titre 28/32
   au mot fort colore. Toute la carte ouvre une fenetre ; un bouton rond de
   36px, dans une zone de 44px a 16px du coin, porte le signe plus.
   --------------------------------------------------------------------- */
.ah-icones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ah-ecart);
  margin:0;padding:0;list-style:none}
.ah-icone{position:relative}
.ah-icone__ouvrir{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  width:100%;min-height:287px;padding:28px 76px 52px 32px;box-sizing:border-box;
  border:0;border-radius:28px;background:var(--ah-tuile);color:var(--ah-encre-courante);
  text-align:left;cursor:pointer}
.ah-icone__picto{display:block;width:56px;height:56px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ah-icone__titre{margin-block-start:9px}
.ah-icone--violet .ah-icone__picto,.ah-icone--violet strong{color:var(--ah-violet)}
.ah-icone--orange .ah-icone__picto,.ah-icone--orange strong{color:var(--ah-orange)}
.ah-icone--canard .ah-icone__picto,.ah-icone--canard strong{color:var(--ah-canard)}
.ah-icone__titre strong{font-weight:600}
.ah-coin{position:absolute;right:16px;bottom:16px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .ah-icone__ouvrir:hover .ah-rond,.ah-fiche__lien:hover .ah-rond{background:var(--ah-second)}
}
@media (max-width:1068px){.ah-icones{grid-template-columns:minmax(0,1fr)}}
@media (max-width:734px){.ah-icone__ouvrir{min-height:240px;padding:24px 64px 48px 24px}}

/* ---------------------------------------------------------------------
   Fenetre modale, relevee sur « Materiaux recycles » : voile
   rgba(0,0,0,.48) floute a 20px ; panneau blanc de 816px, rayon 28, marge
   76px en haut et en bas, 76px sur les cotes ; titre 56/60 ; intertitre 19/27
   gras ; texte 19/27 ; lien 19/27 bleu. Bouton de fermeture : rond encre de
   36px a 20px du coin. La fenetre native porte le piege du focus et la
   touche Echap ; elle s'ouvre par un fondu et un leger grossissement.
   --------------------------------------------------------------------- */
.ah-modale{width:min(816px,100% - 40px);max-width:none;max-height:calc(100% - 80px);
  box-sizing:border-box;margin:auto;padding:76px 0;border:0;border-radius:28px;
  background:#fff;color:var(--ah-encre);overflow:auto;
  opacity:0;transform:scale(.96);
  transition:opacity .3s var(--ah-sortie),transform .3s var(--ah-sortie),
    overlay .3s allow-discrete,display .3s allow-discrete}
.ah-modale[open]{opacity:1;transform:none}
@starting-style{.ah-modale[open]{opacity:0;transform:scale(.96)}}
.ah-modale::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(20px);opacity:0;
  transition:opacity .3s var(--ah-sortie),overlay .3s allow-discrete,display .3s allow-discrete}
.ah-modale[open]::backdrop{opacity:1}
@starting-style{.ah-modale[open]::backdrop{opacity:0}}
.ah-modale__corps{padding:0 76px}
.ah-modale h2{font:600 56px/60px var(--ah-titre);letter-spacing:-.28px;margin:0}
.ah-modale h2 + *{margin-block-start:20px}
.ah-modale p{margin:0;font:400 19px/27px var(--ah-texte);letter-spacing:.228px}
.ah-modale p + p{margin-block-start:1em}
.ah-modale a{color:#0066cc;text-decoration:none}
.ah-modale a:hover{text-decoration:underline}
.ah-modale__fermer{position:absolute;top:20px;right:20px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:0;padding:0;background:none;cursor:pointer;
  --ah-rond:var(--ah-encre);--ah-rond-signe:#fff}
@media (max-width:734px){
  .ah-modale{padding:56px 0}
  .ah-modale__corps{padding:0 24px}
  .ah-modale h2{font-size:32px;line-height:36px;letter-spacing:.128px}
  .ah-modale p{font-size:17px;line-height:25px;letter-spacing:-.374px}
}

/* ---------------------------------------------------------------------
   Cartes a fleche, relevees sur la section Avantages : carte de 372x576,
   rayon 28 ; texte en haut, marge 32 32 0 : etiquette 17/21 grasse, 14px,
   titre 28/32, 13px, texte 17/21 ; image de 372x284 posee en bas. Toute la
   carte est un lien ; le rond de 36px a 16px du coin porte un chevron.
   Rangee defilante aimantee, alignee sur la colonne ; fleches de 36px sous la
   rangee, a droite, 18px d'ecart, rgba(210,210,215,.64), signe
   rgba(0,0,0,.56), opacite .42 en butee. Quand la rangee tient sans
   defiler, les fleches disparaissent : regle .scroll-gallery-paddlenav.hide
   d'apple.com, visibility:hidden.
   --------------------------------------------------------------------- */
.ah-rangee__piste{display:flex;gap:var(--ah-ecart);margin:0;list-style:none;
  padding:0 calc((100% - var(--ah-colonne-reelle)) / 2);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--ah-colonne-reelle)) / 2);
  scrollbar-width:none;overscroll-behavior-x:contain}
.ah-rangee__piste::-webkit-scrollbar{display:none}
.ah-fiche{position:relative;flex:0 0 372px;height:576px;scroll-snap-align:start;
  display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
  background:var(--ah-tuile);color:var(--ah-encre-courante)}
.ah-fiche__copie{padding:32px 32px 0}
.ah-fiche__label{display:block;font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-fiche__label + .ah-intro{margin-block-start:14px}
.ah-fiche__texte{margin:13px 0 0;font:400 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-fiche__image{margin:auto 0 0;height:284px}
.ah-fiche__image img{display:block;width:100%;height:100%;object-fit:cover}
.ah-fiche__image--detoure{padding:0 24px 48px;box-sizing:border-box}
.ah-fiche__image--detoure img{object-fit:contain}
.ah-fiche__lien{position:absolute;inset:0;z-index:1;border-radius:28px}
/* Rangee courte : une carte qui ne porte que son titre prend la hauteur de son
   contenu ; les cartes d'une rangee restent egales et l'image reste posee en
   bas, 40px sous le titre le plus long. */
.ah-rangee--courte .ah-fiche{height:auto}
.ah-rangee--courte .ah-fiche__copie{padding-block-end:40px}
.ah-fleches{display:flex;justify-content:flex-end;gap:18px;margin-block-start:58px}
.ah-fleches.est-cachee{visibility:hidden}
.ah-fleche{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(210,210,215,.64);color:rgba(0,0,0,.56);
  transition:background-color .1s linear,color .1s linear,opacity .1s linear}
.ah-fleche:disabled{opacity:.42;cursor:default}
.ah-fleche svg{display:block;fill:currentColor}
@media (max-width:734px){
  .ah-fiche{flex-basis:308px;height:520px}
  .ah-fiche__image{height:236px}
  .ah-fleches{margin-block-start:32px}
}

/* ---------------------------------------------------------------------
   Carte de comparaison, relevee sur « Trouvez le Mac qu'il vous faut » :
   carte blanche de la colonne, rayon 28, marge 120px en haut et en bas ;
   jeu produit de 764px (deux colonnes de 372, ecart 20), texte centre, marge
   0 28 : titre 28/32, sous-titre 17/25 gras, texte 17/25, bouton bleu ; puis
   les arguments, 52px plus bas : pictogramme de 36x56 et texte 12/16. La
   demande n'a qu'un produit : son texte tient la colonne de 372, ses quatre
   arguments s'alignent sur la largeur du jeu.
   --------------------------------------------------------------------- */
.ah-comparer{border-radius:28px;background:#fff;color:var(--ah-encre);padding:120px 28px;text-align:center}
.ah-comparer__produit{width:372px;max-width:100%;margin:0 auto}
.ah-comparer__sous{margin:4px 0 0;font:600 17px/25px var(--ah-texte);letter-spacing:-.374px}
.ah-comparer__texte{margin:14px 0 0;font:400 17px/25px var(--ah-texte);letter-spacing:-.374px}
.ah-comparer .ah-actions{justify-content:center;margin-block-start:28px}
.ah-touts{width:764px;max-width:100%;margin:52px auto 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ah-tout svg{display:block;width:36px;height:56px;margin:0 auto 8px;fill:none;stroke:var(--ah-encre);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ah-tout span{display:block;font:400 12px/16px var(--ah-texte);letter-spacing:-.12px}
@media (max-width:734px){
  .ah-comparer{padding:64px 24px}
  .ah-touts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}

/* --------------------------------------------------------- le marche */
/* Une seule tuile pleine porte la bande et le prix du diesel : meme fond,
   meme rayon, meme encart que les tuiles. Pas de verre : rien ne defile
   dessous. Un seul voyant, celui de la bande. */
.ah-marche{background:var(--ah-tuile);border-radius:28px;padding:40px;overflow:hidden}
@media (max-width:734px){.ah-marche{padding:24px}}
.ah-live{display:block;margin-block-start:28px;padding-block-start:28px;
  border-block-start:1px solid var(--ah-filet)}
.ah-live strong{display:block;font:600 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-live .ntx-proof-fact-price{display:block;margin-block-start:12px;
  font:600 40px/44px var(--ah-titre);letter-spacing:0}
.ah-live .ntx-proof-fact-meta,.ah-live .ntx-proof-fact-savings{display:block;
  margin-block-start:.4em;color:var(--ah-second);
  font:400 17px/25px var(--ah-texte);letter-spacing:-.374px}
.ah-live .ntx-proof-fact-savings-value{font-weight:600;color:var(--ah-encre-courante)}
.ah-live .ntx-proof-fact-cta{display:inline-flex;align-items:center;gap:4px;
  margin-block-start:16px;color:var(--ah-lien);text-decoration:none;
  font:400 17px/21px var(--ah-texte);letter-spacing:-.374px}
.ah-live .ntx-proof-fact-cta:hover{text-decoration:underline}

/* --------------------------------------------------------- la bande */
/* Le composant entier est decrit ici, dans le systeme de la page, et nulle
   part ailleurs : la feuille ntropyx-market-rail.css n'est plus chargee.
   Police systeme, tailles de l'echelle (12, 17, 21), gris second, filet de
   la page, bleu de lien pour le seul voyant et le point du jour. Plus d'or,
   plus d'empattements, plus de capitales espacees, plus de verre. Le rouge
   et le vert des variations restent : ils disent un sens. Les classes lues
   par ntropyx-market-rail.js ne changent pas. */
.ntx-rail-defs{position:absolute;width:0;height:0}
.ntx-rail-wrap{position:relative}
.ntx-rail{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}
.ntx-rail__brand{display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:16px 24px 16px 0;border-inline-end:1px solid var(--ah-filet)}
.ntx-rail__label{font:600 17px/21px var(--ah-texte);letter-spacing:-.374px;
  color:var(--ah-encre-courante);white-space:nowrap}
.ntx-rail__live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;color:var(--ah-second)}
/* Le voyant est fixe : la page MacBook Pro ne fait tourner aucune boucle. */
.ntx-pulse{position:relative;display:block;width:6px;height:6px;flex:0 0 6px}
.ntx-pulse__core{position:absolute;inset:0;border-radius:50%;background:var(--ah-lien)}
.ntx-rail__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 52px),transparent)}
.ntx-rail__track::-webkit-scrollbar{display:none}
.ntx-rail__track.is-grabbing{cursor:grabbing}
.ntx-rail__inner{display:flex;will-change:transform}
/* Repos et arrivee dans la meme declaration : la cellule nait decalee de
   30px, comme les blocs d'Apple, et la classe is-in la pose. */
.ntx-rail-cell{position:relative;flex:0 0 auto;min-width:178px;padding:14px 20px 12px;
  border-inline-end:1px solid var(--ah-filet);
  opacity:0;transform:translate3d(0,30px,0);
  touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
.ntx-rail-cell:last-child{border-inline-end:0}
.ntx-rail-cell:focus-visible{outline-offset:-2px}
.ntx-rail-cell__name{display:block;white-space:nowrap;
  font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;color:var(--ah-second)}
.ntx-rail-cell__figure{display:flex;align-items:baseline;gap:6px;margin-block-start:6px}
.ntx-rail-cell__value{display:inline-flex;font:600 21px/1.05 var(--ah-titre);letter-spacing:.231px;
  font-variant-numeric:tabular-nums;color:var(--ah-encre-courante);white-space:nowrap}
.ntx-rail-cell__unit{font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;color:var(--ah-second)}
/* Chiffre en colonnes : seuls les caracteres changes roulent. */
.ntx-rail-digit{position:relative;display:inline-block;overflow:hidden;height:1.05em;
  vertical-align:baseline}
.ntx-rail-digit__inner{display:block;will-change:transform}
.ntx-rail-cell__delta{display:inline-flex;align-items:center;gap:3px;margin-block-start:6px;
  font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;font-variant-numeric:tabular-nums;
  color:var(--ah-second)}
.ntx-rail-cell__delta[data-dir="up"]{color:var(--danger)}
.ntx-rail-cell__delta[data-dir="down"]{color:var(--gain)}
.ntx-rail-cell__delta svg{display:block}
.ntx-rail-cell__delta[data-dir="down"] svg{transform:rotate(180deg)}
/* La courbe : 44px de boite, la surface qu'un doigt doit pouvoir attraper. */
.ntx-rail-cell__spark{display:block;width:100%;height:44px;padding:9px 0;overflow:visible;
  cursor:ew-resize;touch-action:pan-y}
.ntx-rail-spark__line{fill:none;stroke:var(--ah-encre-courante);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;
  transition:opacity .22s ease,stroke-width .22s ease}
.ntx-rail-cell.is-scrub .ntx-rail-spark__line{opacity:1;stroke-width:1.6}
.ntx-rail-spark__area{fill:url(#ntxRailFade);opacity:.32;transition:opacity .22s ease}
/* Le survol n'existe que pour un pointeur qui survole vraiment : sur un ecran
   tactile, le toucher laisserait la cellule allumee apres le doigt. */
@media (hover:hover) and (pointer:fine){
  .ntx-rail-cell:hover .ntx-rail-spark__line{opacity:1;stroke-width:1.6}
  .ntx-rail-cell:hover .ntx-rail-spark__area{opacity:.5}
}
/* Le point du jour porte la couleur du voyant. */
.ntx-rail-spark__now{fill:var(--ah-lien)}
.ntx-rail-cell.is-scrub .ntx-rail-spark__now{opacity:.28}
.ntx-rail-spark__cursor{opacity:0;transition:opacity .14s ease}
.ntx-rail-cell.is-scrub .ntx-rail-spark__cursor{opacity:1}
.ntx-rail-spark__cursor line{stroke:var(--ah-encre-courante);stroke-width:1;opacity:.5}
.ntx-rail-spark__cursor circle{fill:var(--ah-encre-courante)}
.ntx-rail-cell__stamp{display:block;height:0;overflow:hidden;opacity:0;white-space:nowrap;
  font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;color:var(--ah-second);
  transition:height .2s cubic-bezier(.4,0,.6,1),margin-block-start .2s cubic-bezier(.4,0,.6,1),
    opacity .16s ease}
.ntx-rail-cell.is-scrub .ntx-rail-cell__stamp{height:16px;margin-block-start:4px;opacity:1}
/* Les chiffres deviennent lisibles ensemble ; le decalage ne porte que sur
   le deplacement. */
.ntx-rail.is-in .ntx-rail-cell{opacity:1;transform:none;
  transition:opacity .3s cubic-bezier(.4,0,.6,1),transform .46s cubic-bezier(.4,0,.6,1);
  transition-delay:0s,calc(var(--ntx-rail-i) * 40ms)}
/* Filet de progression : juste sous la piste, dans le flux. */
.ntx-rail__bar{position:relative;height:2px;margin-block-start:8px;opacity:0;
  transition:opacity .3s ease;pointer-events:none}
.ntx-rail__bar.is-on{opacity:1}
.ntx-rail__bar-track{position:absolute;inset:0;border-radius:980px;background:var(--ah-filet)}
.ntx-rail__bar-thumb{position:absolute;top:0;height:2px;border-radius:980px;
  background:var(--ah-second);will-change:transform,width}
.ntx-rail-foot{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-block-start:20px}
.ntx-rail-hint{display:inline-flex;align-items:center;gap:8px;
  font:400 12px/16px var(--ah-texte);letter-spacing:-.12px;color:var(--ah-second)}
/* L'aide est immobile : la bande montre deja son geste une fois, a son
   arrivee. Une boucle sans fin a 0,29 Hz restait proche des oscillations
   lentes (vers 0,2 Hz) que la regle Apple deconseille. */
.ntx-rail-hint svg{display:block;flex:0 0 auto}
/* Telephone : l'antenne passe au-dessus de la piste, alignee sur elle. */
@media (max-width:734px){
  .ntx-rail{grid-template-columns:minmax(0,1fr)}
  .ntx-rail__brand{flex-direction:row;align-items:center;justify-content:space-between;
    padding:0 0 16px;border-inline-end:0;border-block-end:1px solid var(--ah-filet)}
  .ntx-rail-cell{min-width:160px}
  .ntx-rail-cell:first-child{padding-inline-start:0}
}

/* --------------------------------------------- scene 1 : la combustion
   Le collant fait 1px de plus que la fenetre : sans ce pixel, un filet clair
   apparait entre le bas de la scene et la section suivante. */
.seq{position:relative;background:var(--ah-fond)}
.seq__sticky{position:relative;z-index:2}
.seq__masque{position:relative;aspect-ratio:9889/1490;
  -webkit-mask-image:url("/assets/images/masque-ntropyx.svg");mask-image:url("/assets/images/masque-ntropyx.svg");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:62%;mask-size:62%;-webkit-mask-position:center;mask-position:center}
.seq__video,.seq__repli{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:bottom}
.seq__texte{width:min(600px,84vw);margin:28px auto 0;text-align:center;color:var(--ah-encre-inv)}
.seq__texte b{display:block;font:600 28px/32px var(--ah-titre);letter-spacing:.196px}
.seq__texte span{display:block;margin-block-start:.43em;color:var(--ah-second);
  font:400 17px/25px var(--ah-texte);letter-spacing:-.374px}
@media (max-width:734px){.seq__texte b{font-size:21px;line-height:25px;letter-spacing:.231px}}
/* La base ci-dessus est la page fixe, lue sans script : le mot-fenetre puis les
   quatre paliers. La scene epinglee n'existe que sous .js ; le script la pilote
   aussi en mouvement reduit, elle ne depend donc d'aucune preference de mouvement. */
.js .seq{height:800svh}
.js .seq__sticky{position:sticky;top:0;height:calc(100svh + 1px);overflow:hidden}
.js .seq__masque{position:absolute;inset:0;aspect-ratio:auto}
.js .seq__texte{position:absolute;left:50%;translate:-50% 0;margin:0;opacity:0}

/* --------------------------------------------- scene 2 : les fenetres
   Huit fenetres Vision Pro en arc ; elle n'existe que sous .js. La vue garde
   la toile et les ornements ensemble a l'ecran, et la scene n'apparait
   qu'entiere, par un seul fondu. */
.panneaux{display:none}
.js .panneaux{display:block;position:relative;height:1033svh;margin-block-start:-70svh;background:var(--ah-fond)}
.panneaux__vue{position:sticky;top:0;height:calc(100svh + 1px);overflow:hidden;z-index:1;
  opacity:0;transition:opacity .4s var(--ah-courbe)}
.panneaux.est-pret .panneaux__vue{opacity:1}
.panneaux__canvas{display:block;width:100%;height:100%}
/* L'ornement : une pastille de verre sous chaque fenetre, comme les ornements
   de visionOS (valeurs de la maquette validee). La scene la pose 14px sous le
   bas de sa fenetre projetee. */
.panneaux__ornement{position:absolute;left:0;top:0;margin:0;padding:9px 18px;border-radius:999px;
  background:rgba(128,128,128,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.35);
  color:var(--ah-encre-inv);font:600 15px/20px var(--ah-texte);letter-spacing:-.01em;white-space:nowrap}
@supports (backdrop-filter:blur(30px)){.panneaux__ornement{backdrop-filter:blur(30px) saturate(180%)}}

/* --------------------------------------------- scene 3 : la science
   Deux boites : un conteneur haut en multiples de fenetre, et un conteneur
   colle en overflow:hidden. Le voile qui rend la legende lisible est un
   degrade pose sur le collant, jamais un fichier assombri. */
.ah-science__scene{position:relative;height:260svh;background:var(--ah-fond)}
.ah-science__collant{position:sticky;top:0;height:calc(100svh + 1px);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.ah-science__collant::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5))}
.ah-science__cadre{width:72%;max-width:1120px;aspect-ratio:1280/720;position:relative;
  transform:scale(var(--ah-science-echelle,1));transform-origin:center}
.ah-science__cadre.va-bouger{will-change:transform}
.ah-science__cadre video,.ah-science__repli{width:100%;height:100%;object-fit:cover;display:block}
.ah-science__repli{display:none;position:absolute;inset:0}
.ah-science__legende{position:absolute;inset-inline:0;bottom:48px;text-align:center;z-index:1;
  color:var(--ah-second);font:400 14px/20px var(--ah-texte);letter-spacing:-.224px}
/* Commande de lecture : ronde, posee sur le media, a 20px de son bord, en haut
   a droite sur la science. Sur un media, le fond du bouton est floute plutot
   qu'opaque. */
.ah-lecture-btn{position:absolute;z-index:3;
  width:36px;height:36px;border-radius:980px;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(66,66,69,.72);color:var(--ah-encre-inv);cursor:pointer}
@supports (backdrop-filter:blur(20px)){.ah-lecture-btn{backdrop-filter:blur(20px)}}
.ah-lecture-btn svg,.ah-galerie__lecture svg{width:13px;height:14px;fill:currentColor}
.ah-lecture-btn .ah-play,.ah-galerie__lecture .ah-play{display:none}
.ah-lecture-btn[aria-pressed="true"] .ah-pause,.ah-galerie__lecture[aria-pressed="true"] .ah-pause{display:none}
.ah-lecture-btn[aria-pressed="true"] .ah-play,.ah-galerie__lecture[aria-pressed="true"] .ah-play{display:block}
.ah-science__cadre .ah-lecture-btn{top:20px;right:20px}

/* ---------------------------------------------------------------------
   Apparition. Releve Apple : StaggeredFadeIn combine exactement deux
   proprietes — opacity 0 -> 1 sur 900ms, translateY 30px -> 0 sur 700ms,
   en easeInOutQuad. Le deplacement finit donc 200ms avant le fondu. La
   cascade vaut 60ms par element, plafonnee a 240ms.
   Le masquage est conditionne a la classe .js : sans script, rien n'est
   cache et la page reste entierement lisible.
   --------------------------------------------------------------------- */
.js [data-ah-monte]{opacity:0;transform:translateY(30px);
  will-change:opacity,transform;
  transition:opacity .9s var(--ah-courbe),transform .7s var(--ah-courbe);
  transition-delay:min(calc(var(--i,0) * 60ms),240ms)}
.js [data-ah-monte].est-la{opacity:1;transform:none;will-change:auto}

/* Sous mouvement reduit, la video n'est pas seulement figee : elle est
   retiree du rendu et remplacee par son image fixe — ce qui evite aussi
   d'en telecharger les megaoctets. Les matieres s'ouvrent par un fondu seul. */
@media (prefers-reduced-motion:reduce){
  .js [data-ah-monte]{opacity:1;transform:none;transition:none}
  .seq__video,.ah-science__cadre video,.ah-hero__film{display:none}
  .ah-science__repli{display:block}
  .ntx-rail-cell,.ntx-rail.is-in .ntx-rail-cell{transform:none}
  .ntx-rail.is-in .ntx-rail-cell{transition:opacity .2s ease}
  .ah-modale,.ah-modale[open]{transform:none}
}
/* Contraste renforce, transparence reduite, couleurs inversees : une seule
   requete, et la reponse est de reposer un fond plein derriere le texte
   pose sur une image. */
@media (inverted-colors:inverted),(prefers-contrast:more),(prefers-reduced-transparency:reduce){
  .ah-science__legende,.seq__texte b,.seq__texte span{background-color:var(--ah-noir)}
  .ah-lnav.est-collee .ah-lnav__fond{background:#161617;backdrop-filter:none}
  .ah-lecture-btn,.ah-galerie__points,.ah-galerie__lecture,.ah-pastille-bloc,.panneaux__ornement{background:#424245;backdrop-filter:none}
  .ah-capsule{--ah-capsule-fond:#e8e8ed;backdrop-filter:none}
  .js .ah-capsule:not([data-etat="clair"]){--ah-capsule-fond:#424245;backdrop-filter:none}
  .ah-hero__textes{--ah-sel-fond:rgb(232,232,237)}
  .js .ah-hero__textes:not([data-etat="clair"]){--ah-sel-fond:rgb(51,51,54)}
  .ah-selecteur{backdrop-filter:none}
  .ah-modale::backdrop{background:rgba(0,0,0,.8);backdrop-filter:none}
  .ah-lnav__lien{opacity:1}
}

/* Une seule classe de masquage visuel pour toute la page. */
.ah-lecture-seule{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}