/* Feuille commune du site Mango, sortie de index.html le 2026-10-07 pour
   etre partagee par toutes les pages. Les pages secondaires ajoutent
   pages.css, toutes ajoutent boutique.css. */
/* ==========================================================================
   MANGO . site
   ==========================================================================
   Trois références mesurées, consignées dans docs/releve-references.md :
   KREME pour la discipline de palette et l'échelle, TIGRIS pour les boutons
   et les cartes produit, KORU pour la section des fonctions.

   Ce qui a changé à cette passe, d'après la revue :
   . le verrou complet est abandonné, on n'utilise QUE LE LOGOTYPE, aligné
     sur le titre du hero et beaucoup plus grand.
   . le panier grossit, le menu rétrécit et devient un VRAI menu.
   . le bouton de précommande sort du titre et va en bas à droite.
   . une SECTION LIFESTYLE arrive très tôt, avec les vidéos : c'est elle qui
     fait rêver, et elle porte les usages au lieu d'une rangée de pastilles.
   . « Where it goes » passe AVANT les fonctions.
   . les cartes produit passent en image pleine avec un dégradé pour porter
     le texte, comme celle qui marchait déjà. Les sous-titres sont coupés.
   . les fonctions ne sont plus des planches beiges : ce sont des PHOTOS,
     voilées, sur lesquelles le dessin maison est révélé en blanc.
   . le dégradé de marque revient, orange vers rose, comme sur le logotype.
     C'est le seul endroit où la palette s'autorise du mouvement.
   ========================================================================== */

:root{
  --sand:#F2E3C9;
  /* Le marine de la version en ligne. Mon turquoise tirait vers le vert
     et flottait entre les deux ; celui-ci tranche franchement. */
  --ink:#1E2A5A;
  --ocean:#1E2A5A;
  --navy-2:#3A4780;
  --soft:#E0CBA6;
  --mango:#FF7A1A;
  --pink:#FF5D8F;

  /* Le dégradé du logotype. La marque le fait, la page a le droit. */
  --grad:linear-gradient(96deg in oklab,#FF7A1A 0%,#FF6B4A 46%,#FF5D8F 100%);

  --pacific:#22B8C4; --coral:#FF6B4A; --mint:#7FB069; --coconut:#EFE0CB;

  --ink-60:rgba(30,42,90,.64);
  --ink-12:rgba(30,42,90,.12);
  --sand-lt:#FAF1E2;

  /* Les gros titres passent en Barlow Condensed, la condensée de la
     version en ligne : c'est celle que Clément a retenue à l'essai.
     Voir plus bas pourquoi Sora est sortie. */
  --disp:'Barlow Condensed',Impact,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  /* Sora est sortie. Elle ne servait qu'a quatre intitules de 11 px en
     capitales espacees, ou Inter en 700 fait exactement le meme travail :
     a cette taille, avec cette chasse, les deux sont indiscernables.
     Il reste quatre familles, une par role, et plus une de trop :
     Barlow Condensed titre, Inter lit, Permanent Marker appuie,
     Yellowtail signe. */
  --disp2:'Inter',system-ui,sans-serif;
  --script:'Yellowtail',cursive;      /* la manuscrite du hero */
  --brush:'Permanent Marker',cursive; /* le mot accentué, brossé */

  --r:16px;
  --r-pill:100px;
  --pad:clamp(20px,4.5vw,64px);
  --wrap:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* PAS de scroll-behavior:smooth. La page fait pres de 15 000 px : un
   lien d'ancre depuis le hero jusqu'a la precommande faisait defiler
   tout le fil en accelere, et chaque moteur de defilement se declenchait
   au passage. Un lien d'ancre doit sauter, pas rembobiner la page. */
html{-webkit-text-size-adjust:100%}
body{background:var(--sand);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

/* --------------------------------------------------------------------
   ÉCHELLE
   -------------------------------------------------------------------- */
/* Barlow Condensed est deux fois plus étroite qu'une grotesque : à taille égale
   elle paraît petite. Les tailles montent, l'interlignage se resserre et
   la chasse négative disparaît, une condensée n'en a pas besoin. */
.display{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(56px,11.3vw,176px);line-height:.86;letter-spacing:-.012em}
.h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(44px,7vw,110px);line-height:.90;letter-spacing:-.008em}
.h-small{font-family:var(--disp2);font-weight:700;
  font-size:clamp(24px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em}
.lede{font-size:clamp(18px,1.75vw,26px);line-height:1.42;max-width:26ch;color:var(--ink-60)}
.lede.wide{max-width:34ch}

/* LA MANUSCRITE . la phrase qui fait rêver, jamais un titre de structure.
   Le dégradé est clippé dans le texte, sans ombre : avec background-clip
   l'ombre se peindrait PAR-DESSUS le dégradé et le ternirait. */
.dream{font-family:var(--script);font-weight:400;
  font-size:clamp(32px,5vw,78px);line-height:1.06;letter-spacing:0;
  padding-inline:.04em}

/* LE MOT BROSSÉ . en capitales, légèrement incliné, dans le dégradé.
   Employé sur UN mot par titre, jamais plus : c'est un accent, pas une
   police de titre. Pas de soulignement, pas de fioriture autour. */
.bc{font-family:var(--brush);font-weight:400;text-transform:uppercase;
  font-size:1.14em;line-height:.92;letter-spacing:-.01em;
  display:inline-block;transform:skewX(-8deg);padding-inline:.06em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

.kicker{display:inline-block;font-weight:600;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mango);margin-bottom:22px}
.am{color:var(--mango)}
/* Le mot en dégradé : c'est le geste du logotype, repris dans le texte. */
.gr{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* --------------------------------------------------------------------
   BOUTONS . Tigris
   -------------------------------------------------------------------- */
.lozenge{display:inline-flex;align-items:center;gap:14px;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,2.35vw,40px);letter-spacing:-.012em;
  padding:clamp(13px,1.35vw,23px) clamp(24px,2.6vw,45px);
  border-radius:var(--r-pill);background:var(--ink);color:var(--sand);
  border:0;cursor:pointer;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),background .34s,color .34s,box-shadow .34s}
.lozenge:hover{transform:translateY(-3px)}
.lozenge svg{width:.72em;height:.72em;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lozenge.grad{background:var(--grad);color:#fff}
.lozenge.grad:hover{box-shadow:0 10px 30px rgba(255,93,143,.34)}
.lozenge.light{background:var(--sand);color:var(--ink)}
.lozenge.light:hover{background:var(--grad);color:#fff}
.lozenge.hollow{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.lozenge.hollow:hover{background:var(--ink);color:var(--sand);box-shadow:none}

/* ==========================================================================
   EN-TÊTE
   Le logotype seul, grand, et DANS la même gouttière que le titre du hero :
   les deux partagent .wrap, c'est la seule façon qu'ils s'alignent vraiment.
   ========================================================================== */
/* L'EN-TETE . une capsule qui se pose, pas une bande qui barre.

   L'etat defile etait un aplat marine sur toute la largeur : une barre
   posee sur la page, sans rapport avec le reste. Ici la barre elle-meme
   reste transparente et c'est son CONTENU qui se rassemble dans une
   capsule creme, rentree des bords, avec l'ombre d'un objet pose. Le
   creme est la couleur du fond de page : la capsule appartient au site
   au lieu de flotter par-dessus. */
.nav{position:fixed;inset:0 0 auto;z-index:70;padding-block:clamp(14px,2.2vh,24px);
  transition:padding-block .45s cubic-bezier(.2,.8,.2,1)}
.nav .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:20px}
.nav.solid{padding-block:clamp(8px,1.2vh,14px)}
/* DEUX capsules qui epousent leur contenu, pas une barre etiree : une
   seule capsule pleine largeur laissait un long vide entre le logotype
   et les boutons, ce qui refaisait une bande. */
/* 12 oct : la capsule est peinte par un calque ::before qui ne fait que
   passer d'opacite 0 a 1. Avant, on animait background ET backdrop-filter
   sur l'element lui-meme : pendant la transition Chrome peignait le flou
   sur une zone bien plus grande que la capsule, d'ou le grand aplat gris
   a coin rond qui apparaissait en haut a gauche au defilement. Le defaut
   suit backdrop-filter des qu'il s'anime, meme sur un calque a part : le
   flou est donc retire, la capsule est simplement creme presque opaque. */
.nav-g,.nav-r{position:relative;border-radius:var(--r-pill);padding:0;
  transition:padding .5s cubic-bezier(.2,.8,.2,1)}
.nav-g::before,.nav-r::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;background:rgba(247,238,222,.95);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 10px 30px -14px rgba(16,32,58,.40),
             0 0 0 1px rgba(30,42,90,.07);
  opacity:0;transition:opacity .4s ease}
.nav.solid .nav-g::before,.nav.solid .nav-r::before{opacity:1}
.nav.solid .nav-g{padding:clamp(8px,1vh,12px) clamp(18px,1.8vw,26px)}
.nav.solid .nav-r{padding:clamp(6px,.8vh,9px)}
.nav-g a{display:block}
.nav .wm{height:clamp(36px,5.6vw,88px);width:auto;transition:height .45s cubic-bezier(.2,.8,.2,1)}
.nav.solid .wm{height:clamp(26px,2.6vw,38px)}

/* Le trait de progression : tout en haut de l'ecran, 2 px, il dit ou on
   en est sur une page de pres de 15 000 px. Sa place est la, pas dans
   une capsule ou il n'aurait fait qu'ajouter du bruit. */
.nav-jauge{position:fixed;left:0;right:0;top:0;height:2px;z-index:2;
  opacity:0;transition:opacity .5s}
.nav.solid .nav-jauge{opacity:1}
/* 12 oct : retire a la demande de Clement (le trait arrondi apparaissait en haut a gauche au defilement). */
.nav-jauge{display:none!important}
.nav-jauge i{display:block;height:100%;width:0;background:var(--grad);
  border-radius:0 2px 2px 0;box-shadow:0 0 12px rgba(255,122,26,.5)}
.nav-r{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}

/* Le panier : GRAND, plein, rayon 100 %. C'est la pièce principale. */
.cart{position:relative;width:clamp(54px,5.2vw,74px);aspect-ratio:1;border-radius:100%;
  display:grid;place-items:center;background:rgba(242,227,201,.9);color:var(--ink);
  transition:background .3s,color .3s,transform .34s cubic-bezier(.2,.8,.2,1)}
.cart svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cart:hover{background:var(--grad);color:#fff;transform:translateY(-3px)}
/* Sur la capsule creme, le panier s'inverse : creme plein sur creme
   serait invisible, il devient marine. */
.nav.solid .cart{width:clamp(40px,3.4vw,46px);background:var(--ink);color:var(--sand)}
.nav.solid .cart:hover{background:var(--grad);color:#fff}
.nav.solid .cart .badge{background:var(--mango);box-shadow:0 0 0 2px rgba(247,238,222,.9)}
.nav.solid .burger{width:clamp(38px,3vw,44px);color:var(--ink);
  box-shadow:inset 0 0 0 1.4px rgba(30,42,90,.28)}
.nav.solid .burger:hover{background:rgba(30,42,90,.10)}
.cart .badge{position:absolute;top:2px;right:0;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 0 0 2px rgba(242,227,201,.9)}
.cart:hover .badge{box-shadow:0 0 0 2px rgba(255,122,26,.9)}

/* Le menu : PLUS PETIT que le panier, et il ouvre vraiment quelque chose. */
.burger{width:clamp(42px,3.4vw,48px);aspect-ratio:1;border-radius:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:0;cursor:pointer;color:#fff;
  box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.42);transition:background .3s,color .3s}
.burger:hover{background:rgba(255,255,255,.18)}
.burger i{display:block;width:44%;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.4px) rotate(-45deg)}

/* LE PANNEAU DE MENU . un lieu, pas une liste posee sur du noir.

   Les trois coloris en bas a droite sont partis : ils repetaient le
   selecteur de la precommande et n'ouvraient rien. A la place, la
   colonne de droite dit ce que le menu ne disait pas, et chaque entree
   porte maintenant sa propre legende.

   Le soleil est un disque flou qui se leve derriere la liste : c'est ce
   qui donne l'heure tropicale sans mettre une photo de plus. */
/* Le haut degage l'en-tete, qui reste visible par-dessus le panneau :
   sans cette reserve, le logotype tombait sur la premiere entree. */
.menu{position:fixed;inset:0;z-index:69;background:var(--ocean);color:var(--sand);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding-block:clamp(96px,13vh,150px) clamp(26px,4vh,50px);
  opacity:0;visibility:hidden;transition:opacity .46s,visibility .46s}
.menu[data-open="true"]{opacity:1;visibility:visible}
.menu-bg{position:absolute;inset:0;z-index:0}
.menu-bg video{width:100%;height:100%;object-fit:cover;opacity:.22}
.menu-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(86% 78% at 34% 46%,rgba(30,42,90,.60),rgba(30,42,90,.96))}

.menu-soleil{position:absolute;z-index:1;right:-6vw;top:50%;
  width:min(62vw,720px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,174,77,.34),rgba(255,93,143,.10) 58%,transparent 72%);
  filter:blur(6px);
  translate:0 -50%;scale:.72;opacity:0;
  transition:opacity 1.1s ease,scale 1.3s cubic-bezier(.2,.8,.2,1)}
.menu[data-open="true"] .menu-soleil{opacity:1;scale:1}

.menu-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,90px);align-items:center;
  width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

.menu nav{display:flex;flex-direction:column}
.menu nav a{position:relative;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:clamp(14px,1.8vw,28px);align-items:baseline;
  padding-block:clamp(9px,1.3vh,16px);
  opacity:0;transform:translateY(26px);
  transition:transform .55s cubic-bezier(.2,.8,.2,1) var(--d,0s),opacity .55s var(--d,0s)}
.menu[data-open="true"] nav a{opacity:1;transform:none}
/* Le trait de separation se trace au survol, il n'est pas dessine. */
.menu nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--mango),rgba(255,93,143,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.menu nav a:hover::after,.menu nav a:focus-visible::after{transform:scaleX(1)}
.menu nav a em{grid-row:1 / span 2;font-style:normal;font-family:var(--disp2);font-weight:700;
  font-size:clamp(11px,.85vw,13px);letter-spacing:.2em;color:var(--mango);
  transform:translateY(-.9em)}
.menu nav a b{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(34px,6.4vw,86px);line-height:1;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),color .28s}
.menu nav a s{text-decoration:none;font-size:clamp(11px,.92vw,13.5px);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,227,201,.42);
  margin-top:6px;transition:color .28s,transform .42s cubic-bezier(.2,.8,.2,1)}
.menu nav a:hover b{transform:translateX(clamp(8px,1.1vw,18px));
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.menu nav a:hover s{color:rgba(242,227,201,.74);transform:translateX(clamp(8px,1.1vw,18px))}

/* La colonne de droite : ce que la liste ne dit pas. */
.menu-cote{opacity:0;transform:translateY(22px);
  transition:opacity .6s .34s,transform .6s .34s cubic-bezier(.2,.8,.2,1)}
.menu[data-open="true"] .menu-cote{opacity:1;transform:none}
.menu-br{display:block;font-family:var(--script);font-weight:400;
  font-size:clamp(34px,3.8vw,58px);line-height:1;margin-bottom:16px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.menu-cote p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.55;
  color:rgba(242,227,201,.68);max-width:32ch;margin-bottom:clamp(20px,3vh,30px)}
.menu-cote p b{font-family:var(--brush);font-weight:400;color:var(--sand);
  font-size:1.12em;letter-spacing:.01em}

.menu-foot{position:relative;z-index:2;margin-top:clamp(26px,5vh,60px);
  padding-top:clamp(16px,2.4vh,26px);
  width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  border-top:1px solid rgba(242,227,201,.14);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.menu-foot .sig{font-family:var(--script);font-weight:400;
  font-size:clamp(19px,2vw,28px);color:rgba(242,227,201,.72)}
.menu-lieu{font-family:var(--disp2);font-weight:700;font-size:11px;letter-spacing:.24em;
  color:rgba(242,227,201,.38)}
/* Les liens secondaires, sous le bouton : petites capsules au trait,
   comme les reseaux du pied. Discrets tant qu'on ne les survole pas. */
.menu-plus{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(22px,3.4vh,34px);padding-top:clamp(16px,2.4vh,22px);
  border-top:1px solid rgba(242,227,201,.14)}
.menu-plus a{display:inline-block;padding:8px 14px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,227,201,.72);box-shadow:inset 0 0 0 1.2px rgba(242,227,201,.24);
  transition:background .3s,color .3s,box-shadow .3s}
.menu-plus a:hover,.menu-plus a:focus-visible{background:var(--grad);color:#fff;box-shadow:none}
@media(max-width:900px){
  .menu-in{grid-template-columns:1fr;gap:clamp(22px,4vh,40px)}
  /* La colonne se replie : seuls les liens secondaires restent, sous
     la navigation. */
  .menu-cote>:not(.menu-plus){display:none}
  .menu-plus{margin-top:0}
  .menu nav a s{display:none}
}
/* Ecran bas : le panneau est centre, donc un contenu plus haut que la
   fenetre se fait rogner EN HAUT et devient inatteignable. Mesure faite
   sur une fenetre de 461 px, le bloc debordait de 136 px. On repasse en
   alignement haut, on deroule, et les entrees redescendent en taille. */
@media(max-height:700px){
  .menu{justify-content:flex-start;overflow-y:auto;
    padding-block:clamp(74px,13vh,104px) clamp(20px,4vh,34px)}
  .menu nav a{padding-block:6px}
  .menu nav a b{font-size:clamp(26px,4.6vw,44px)}
  .menu nav a s{display:none}
  .menu-br{font-size:clamp(26px,3vw,38px);margin-bottom:10px}
  .menu-cote p{margin-bottom:16px}
  .menu-foot{margin-top:20px;padding-top:14px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;
  background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* Sans vague au pied, le hero se ferme sur une coupe franche : le voile
   du bas descend plus bas pour que la césure soit voulue et non subie. */
.hero-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,42,90,.90) 0%,rgba(30,42,90,.34) 44%,transparent 72%),
             linear-gradient(to bottom,rgba(30,42,90,.42) 0%,transparent 22%)}
.hero-in{position:relative;z-index:3;color:#fff;
  padding-bottom:clamp(40px,7vh,86px);
  width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
/* La précommande est insérée DANS la phrase, juste avant « and sun ». */
.hero h1{max-width:15ch}
.hero .lozenge{vertical-align:middle;margin:0 .22em .14em 0}

/* La signature : posée haut à gauche, inclinée, avec son trait.
   Le dégradé est clippé dans le texte ET peint dans le trait, sans
   ombre : avec background-clip, une ombre se peindrait par-dessus le
   dégradé et le ternirait. */
.hero-sig{position:relative;z-index:4;width:max-content;max-width:100%;
  transform:rotate(-7deg);transform-origin:0 100%;
  margin-left:.06em;margin-bottom:clamp(6px,1.4vh,20px);pointer-events:none}
.hero-sig .dream{display:block;font-size:clamp(50px,8.6vw,132px);line-height:.96}
.hero-sig .swash{display:block;width:min(100%,clamp(270px,37vw,580px));height:auto;
  margin-top:-.26em;margin-left:.1em}
/* Le trait du hero reste dans la page (index.html) : dans une feuille
   externe, url(#gAcc) chercherait le degrade dans la feuille elle-meme. */
@media(max-width:760px){.hero-sig{transform:rotate(-5deg)}}

/* ==========================================================================
   SOUNDTRACK . une bande bord à bord, la vidéo en fond, le texte dessus.
   ========================================================================== */
.track{position:relative;overflow:hidden;min-height:clamp(420px,62vh,700px);
  display:grid;align-items:start;background:var(--ocean)}
.track-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Le bloc se cale en HAUT à gauche, et l'ensemble descend d'un cran en
   taille : le titre occupait tout le cadre. */
.track-in{position:relative;z-index:2;color:#fff;width:100%;
  padding-block:clamp(44px,7vh,80px) clamp(50px,8vh,90px)}
.track .h2{font-size:clamp(40px,6.3vw,99px)}
.track .lede{font-size:clamp(16px,1.6vw,23px)}
.track::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(30,42,90,.90) 0%,rgba(30,42,90,.48) 44%,rgba(30,42,90,.04) 76%)}
.track .lede{max-width:34ch;color:rgba(255,255,255,.80)}
/* La ligne qui portait sa propre section : elle vient soutenir ce titre. */
.track-sub{margin-top:14px;font-family:var(--script);
  font-size:clamp(22px,2.4vw,36px);line-height:1;color:var(--amber)}

/* ==========================================================================
   SMALL IN SIZE . le produit coté, et la carte de précommande qui
   chevauche la section, exactement comme sur la planche.
   ========================================================================== */
.size-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,64px);
  align-items:center}
.size-say ul{list-style:none;margin-top:clamp(20px,2.6vh,30px);
  display:flex;flex-direction:column;gap:11px}
.size-say li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink-60)}
.size-say li::before{content:'';width:7px;aspect-ratio:1;border-radius:50%;
  background:var(--grad);flex:none}
.size-shot{position:relative;display:grid;place-items:center;padding:clamp(34px,4.6vw,66px) clamp(40px,5vw,78px)}
.size-box{position:relative;width:min(100%,560px);margin-inline:auto}
.size-shot img{width:100%;height:auto;position:relative;z-index:1;display:block}
/* Les cotes n'apparaissent qu'une fois le PROFIL atteint : tant que la
   camera plonge, la hauteur apparente comprend l'ellipse du dessus et
   la cote mentirait. Un objet de revolution garde en revanche la meme
   largeur sous toutes les rotations, d'ou ce balayage en elevation
   plutot qu'un tour d'horizon, qui serait invisible. */
.size-shot svg,.size-shot .cote-lbl{opacity:0;transition:opacity .45s ease}
.size-shot.mesure svg,.size-shot.mesure .cote-lbl{opacity:1}
/* Les cotes, tracées comme sur un plan : deux tirets, un trait, la
   valeur. Ce sont NOS cotes, 14,4 et 5,8, pas celles de la maquette. */
.size-box svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible}
.size-shot .cote{fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.42;
  stroke-dasharray:3 4;stroke-linecap:round}
.size-shot .cote-t{font-family:var(--body);font-size:13px;font-weight:600;
  fill:var(--ink);opacity:.72}
@media(max-width:600px){.size-grid{grid-template-columns:1fr}
  /* La cote de hauteur et sa valeur sortent a droite de l'image : on
     reserve leur place, sinon elles debordaient de l'ecran. */
  .size-shot{padding-inline:4px 0}
  .size-box{width:calc(100% - 84px);margin-left:0}}

/* ==========================================================================
   LIGNE D'EAU . la couture est la vraie ligne d'eau de la photo.
   Le voile du bas est supprimé : la section suivante est claire, il n'y
   avait rien à raccorder et il salissait l'image pour rien.
   ========================================================================== */
.waterline{position:relative;margin-top:-1px;background:var(--ink);
  min-height:clamp(460px,78vh,860px);display:grid;align-items:end;
  justify-items:center;overflow:hidden}
.waterline video,.waterline img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.waterline::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,42,90,.82) 0%,rgba(30,42,90,.28) 34%,transparent 62%)}
.waterline .wl{position:relative;z-index:2;text-align:center;color:#fff;
  padding:0 var(--pad) clamp(46px,8vh,96px);transform:none}


/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding-block:clamp(80px,12vh,150px)}
.sec.tight{padding-block:clamp(56px,8vh,104px)}
.sec.dark{background:var(--ocean);color:var(--sand)}
.sec.dark .lede{color:rgba(242,227,201,.64)}

/* --------------------------------------------------------------------
   CARTES PRODUIT . toutes en image pleine, avec un dégradé qui porte le
   texte. Le bandeau de couleur posé au-dessus d'une photo est abandonné.
   -------------------------------------------------------------------- */
.pcards{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;padding:clamp(26px,2.6vw,40px);
  min-height:clamp(430px,56vh,660px);display:flex;flex-direction:column;
  color:#fff;transition:transform .48s cubic-bezier(.2,.8,.2,1)}
.pcard:hover{transform:translateY(-5px)}
.pcard .bg{position:absolute;inset:0;z-index:0}
.pcard .bg img{width:100%;height:100%;object-fit:cover}
/* LE VOILE DES CARTES . un degrade DIRECTIONNEL sur toute la carte.

   La version precedente posait un degrade radial dans une boite calee
   autour du texte. Une boite a des bords : des que la photo est claire
   d'un cote et sombre de l'autre, on voyait la boite, un rectangle
   marine en plein milieu de l'image. Un radial ne pardonne pas dans un
   cadre.

   Ici le degrade couvre la carte ENTIERE et part du coin ou le texte se
   pose. Il n'a donc aucun bord interieur, et il meurt avant le milieu
   pour laisser la photo respirer. */
.pcard .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(152deg,
    rgba(30,42,90,.88) 0%,rgba(30,42,90,.58) 21%,
    rgba(30,42,90,.18) 44%,rgba(30,42,90,0) 64%)}
.pcard>*{position:relative;z-index:2}
.pcard .cap{position:relative;z-index:2;max-width:24ch}
.pcard.cap-right{align-items:flex-end;text-align:right}
.pcard.cap-right .bg::after{
  background:linear-gradient(208deg,
    rgba(30,42,90,.88) 0%,rgba(30,42,90,.58) 21%,
    rgba(30,42,90,.18) 44%,rgba(30,42,90,0) 64%)}
.pcard h3{font-family:var(--disp);font-weight:800;line-height:.98;letter-spacing:-.04em;
  font-size:clamp(28px,3.3vw,48px)}
.pcard .sub{margin-top:12px;font-size:15.5px;font-weight:500;color:rgba(255,255,255,.82)}
.pcard.wide{grid-column:span 2;min-height:clamp(340px,46vh,540px)}
@media(max-width:760px){.pcards{grid-template-columns:1fr}.pcard.wide{grid-column:span 1}}

/* LES COTES . deux repères posés sur le produit, comme sur un plan.
   Les positions sont en pourcentage de la boîte de l'image, donc elles
   suivent le rendu : elles avaient décroché quand le détourage a été
   remplacé par la vue 3D, qui n'a pas le même cadrage. */
.cote-lbl{position:absolute;z-index:3;font-family:var(--body);font-size:13px;
  font-weight:600;color:var(--ink);opacity:.72;white-space:nowrap}
.cote-lbl.w{top:calc(-1% - 24px);left:50%;translate:-50% 0}
.cote-lbl.h{top:48.6%;left:calc(106% + 8px);translate:0 -50%}

/* --------------------------------------------------------------------
   PRÉCOMMANDE . une bande pleine largeur, pas une carte posée.

   Le produit est en grand sur sa lueur, le bon de commande en face. Le
   coloris choisi change le produit ET la couleur de la lueur : c'est ce
   qui rend le choix tangible, et ça ne coûte que trois images.
   -------------------------------------------------------------------- */
.buy{position:relative;overflow:hidden;background:var(--ink);color:var(--sand);
  padding-block:clamp(60px,9vh,120px)}
/* Une lueur froide très large derrière le tout, pour que la bande ne
   soit pas un aplat mort. */
.buy::before{content:'';position:absolute;left:-10%;top:-40%;width:70%;aspect-ratio:1;
  border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(90,210,220,.16),rgba(90,210,220,0) 70%)}
.buy-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.6vw,86px);align-items:center}

.buy-stage{position:relative;display:grid;place-items:center;padding:clamp(8px,1.6vw,26px)}
.buy-stage img{width:min(72%,520px);height:auto;position:relative;z-index:1;
  animation:derive 7s ease-in-out infinite}
/* La lueur suit le coloris : elle est pilotée par une variable. */
.buy-glow{position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:78%;aspect-ratio:1.9;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,var(--halo,#FFAE4D),transparent 72%);
  filter:blur(26px);opacity:.62;transition:background .5s;
  animation:haloRespire 6s ease-in-out infinite}

.buy-panel h2{font-size:clamp(34px,4.4vw,70px);margin-bottom:clamp(20px,3vh,32px)}
.buy-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.buy-price b{font-family:var(--disp);font-weight:800;letter-spacing:-.016em;
  font-size:clamp(56px,7vw,116px);line-height:.9}
.buy-price .save{background:var(--grad);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r-pill)}
.buy-price s{color:rgba(242,227,201,.5);font-size:14px}
.buy-note{margin-top:10px;font-size:13.5px;color:rgba(242,227,201,.56);max-width:34ch}

/* Le choix du coloris se fait sur le PRODUIT, pas sur une pastille. */
.buy-cols{display:flex;gap:clamp(8px,1.2vw,18px);margin-top:clamp(26px,3.6vh,40px)}
.pod{border:0;background:transparent;cursor:pointer;padding:12px 10px 10px;
  border-radius:18px;display:grid;justify-items:center;gap:7px;
  transition:background .34s,transform .34s cubic-bezier(.2,.8,.2,1)}
.pod img{width:clamp(48px,5vw,74px);height:auto;display:block;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.pod s{text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,227,201,.6);transition:color .3s}
.pod:hover{background:rgba(242,227,201,.07)}
.pod:hover img{transform:translateY(-4px)}
.pod.on{background:rgba(242,227,201,.12);box-shadow:inset 0 0 0 1.4px rgba(242,227,201,.34)}
.pod.on s{color:var(--sand)}

.buy-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:clamp(26px,3.6vh,40px)}
.qty{display:flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:8px 10px;box-shadow:inset 0 0 0 1.4px rgba(242,227,201,.26)}
.qty button{width:36px;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:transparent;color:var(--sand);font-size:18px;line-height:1;
  transition:background .25s}
.qty button:hover{background:rgba(242,227,201,.14)}
.qty span{min-width:26px;text-align:center;font-weight:700;font-size:16px}

.buy-rea{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:clamp(22px,3vh,34px)}
.buy-rea li{display:flex;align-items:center;gap:9px;font-size:13.5px;
  color:rgba(242,227,201,.66)}
.buy-rea li::before{content:'';width:13px;height:8px;flex:none;
  border-left:2px solid var(--mango);border-bottom:2px solid var(--mango);
  transform:rotate(-45deg) translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .buy-stage img,.buy-glow{animation:none}
}
@media(max-width:900px){
  .buy-grid{grid-template-columns:1fr;gap:clamp(24px,4vh,44px)}
  .buy-stage img{width:min(56%,300px)}
}

/* Celle-ci annonce le pied : elle en porte la couleur, et elle monte
   par-dessus la bande de précommande. */
/* --------------------------------------------------------------------
   LES VAGUES . deux SVG superposes qui glissent a des vitesses
   differentes. La tuile contient DEUX periodes de 1440 sur 2880, donc
   un decalage de 50 % boucle sans couture a n'importe quelle largeur.

   max-width:none est indispensable : la remise a zero plafonne les SVG
   a 100 % de leur conteneur, ce qui ramene la tuile a une seule periode
   et fait sauter la boucle.

   Ce bloc avait DISPARU du fichier : sans lui les deux SVG ne se
   superposaient plus, ils se posaient l'un sous l'autre a leur taille
   naturelle, d'ou les formes fantomes au-dessus du pied.
   -------------------------------------------------------------------- */
.wave{position:relative;display:block;line-height:0;color:var(--ocean);
  height:clamp(56px,7vw,108px);overflow:hidden}
.wave svg{position:absolute;left:0;bottom:0;display:block;
  width:200%;max-width:none;height:100%;animation:waveGo 19s linear infinite}
.wave svg.back{opacity:.40;animation-duration:31s;animation-direction:reverse}
.wave.over{margin-top:calc(-1 * clamp(56px,7vw,108px));z-index:5}
@keyframes waveGo{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.wave svg{animation:none}}

/* Les deux respirations de la precommande, elles aussi perdues : le
   produit derivait et sa lueur battait, plus rien ne bougeait. */
@keyframes derive{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* Le centrage est deja porte par la propriete translate de .buy-glow :
   le remettre ici l'appliquait DEUX fois et envoyait la lueur a un
   bord de largeur sur la gauche, loin du produit. */
@keyframes haloRespire{0%,100%{opacity:.62;transform:scaleX(.92)}
  50%{opacity:.95;transform:scaleX(1.06)}}

/* LE GRAIN . le fond creme etait plat, sans matiere, alors que le
   produit se vend sur le tissu et la lumiere. Tres faible, et fixe. */
body::after{content:'';position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* LA COUTURE AVEC LE PIED . la regle qui compte.

   Une vague de separation n'est visible que la ou son remplissage passe
   DEVANT une autre couleur. Le remplissage porte ici le marine de la
   precommande : toute la portion de bande qui reste au-dessus de la
   couture est donc du marine sur du marine, invisible. A cheval, on ne
   voyait que la moitie basse de la courbe, d'ou la vague partielle.

   La bande est donc posee ENTIEREMENT sur la photo du pied : son bord
   haut sur la couture, son bord bas 1 hauteur plus bas, la marge basse
   negative annulant sa place dans le flux pour ne rien decaler. Toute
   l'amplitude du trace se lit, du plus haut au plus bas.

   Le trace, mesure : la courbe avant occupe 50 % de la bande et l'arriere
   35 %, retournes le plein vient en haut et la langue marine descend
   entre 23 % et 73 % de la hauteur de bande dans la photo. */
.wave-foot{color:var(--ink);
  height:clamp(84px,9.5vw,148px);
  /* Sur ecran Retina, les hauteurs en vw tombent sur des demi-pixels :
     un interstice laissait voir le fond tres sombre du pied, en ligne.
     La vague remonte de 6 px dans la section du dessus et porte une bande pleine de sa couleur
     sur son bord (en bas dans son repere retourne, en haut a l'ecran). */
  background:linear-gradient(currentColor,currentColor) bottom/100% 10px no-repeat;
  margin-top:-6px;
  /* ... et le pied reste cale EXACTEMENT au bas de la section du dessus
     (+6 px). Sans cette compensation, le pied remontait sous le bord de
     la vague : ce bord adouci se melangeait au fond tres sombre du pied,
     d'ou la ligne sombre mesuree sur ecran Retina. */
  margin-bottom:calc(-1 * clamp(84px,9.5vw,148px) + 6px);
  transform:scaleY(-1);
  z-index:5}

/* --------------------------------------------------------------------
   CORIS . le relais des coloris.

   Trois vues alignees avec un bouton, c'est un nuancier : on a deja
   ce selecteur dans la precommande, le redonner ici n'apprend rien.
   Le defilement fait donc DEFILER les couleurs : un rail horizontal
   pousse par le scroll vertical, le fond se teinte de la couleur
   courante, et le prenom passe en grand derriere l'objet.
   -------------------------------------------------------------------- */
.coris{position:relative;height:320svh;background:var(--sand);overflow:clip}
.coris-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;align-content:center}

/* Le voile teinte : c'est lui qui fait respirer la section. */
.coris-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 56%,var(--teinte,#FFAE4D),transparent 72%);
  opacity:.34}
.coris-tete{position:relative;z-index:3;text-align:center;
  padding-top:clamp(28px,5vh,64px)}

/* Le rail fait trois ecrans de large et se deplace d'un tiers par temps. */
.coris-rail{position:relative;z-index:2;display:flex;width:300%;height:100%;
  will-change:transform}
.coris-pan{position:relative;width:33.3333%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Le prenom etait DERRIERE l'objet, donc illisible : c'est l'objet qui
   occupait exactement le milieu du mot. Il passe au-dessus, et l'objet
   ne mord plus que sur les jambages. */
.coris-mot{position:relative;z-index:2;
  /* ESSAI 12 oct : la brosse du mot « escapes » a la place de la manuscrite.
     Pour revenir : font-family:var(--script), sans text-transform,
     font-size:clamp(56px,9.4vw,158px). */
  font-family:var(--brush);font-weight:400;white-space:nowrap;text-transform:uppercase;
  font-size:clamp(46px,7.4vw,124px);line-height:.86;color:var(--mot,var(--halo));
  /* La manuscrite deborde de sa boite (boucles, attaques). Sur un calque
     compose (will-change), ce qui depasse est rogne : la marge interieure
     agrandit la boite pour englober l'encre. */
  padding:.12em .32em .2em;
  will-change:transform}
.coris-pan img{position:relative;z-index:1;width:min(31vw,370px);height:auto;
  display:block;margin-top:-3.5%;will-change:transform;
  filter:drop-shadow(0 30px 46px rgba(16,32,58,.22))}
.coris-lbl{position:absolute;left:50%;bottom:4%;translate:-50% 0;z-index:3;
  display:flex;align-items:baseline;gap:10px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)}
.coris-lbl b{font-family:var(--disp);font-weight:800;font-style:italic;
  font-size:22px;letter-spacing:0;color:var(--ink)}

/* La jauge dit ou on en est. Elle ne se clique pas : ce n'est pas un choix. */
.coris-jauge{position:relative;z-index:3;display:flex;gap:8px;justify-content:center;
  padding-bottom:clamp(24px,4.4vh,54px)}
.coris-jauge i{display:block;width:54px;height:2px;background:rgba(16,32,58,.16);
  overflow:hidden}
.coris-jauge i::after{content:'';display:block;height:100%;width:0;background:var(--ink);
  transition:width .18s linear}

@media(max-width:760px){
  .coris-pan img{width:48vw}
  .coris-mot{font-size:clamp(38px,11vw,76px)}
}

/* ==========================================================================
   CE QU'IL FAIT . la grille
   ==========================================================================
     colonnes 1 et 2, rangees 1 et 2 : le 360°, sur marine
     colonne 3, rangee 1              : la photo
     colonne 4, rangee 1              : 16 h, sur le degrade mangue
     colonne 3, rangee 2              : 10 min, sur turquoise
     colonne 4, rangee 2              : 30 m, sur creme

   Le PEPS vient des couleurs franches, des produits qui debordent un peu
   de leur carte, et des chiffres qui comptent a l'arrivee. Rien n'est
   coupe : un produit qui depasse sort de la carte, il n'est jamais rogne.
   ========================================================================== */
/* Les produits debordent de leurs cartes : la section coupe a ses
   propres bords, pour qu'aucun ne cree de defilement horizontal. */
.wid{overflow-x:clip}
.wid-tete{margin-bottom:clamp(26px,4vh,48px)}
.wid-tete .h2{margin-top:10px;font-size:clamp(36px,5.4vw,84px)}

.wid-grille{display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(2,minmax(clamp(300px,36vh,380px),auto));
  gap:clamp(12px,1.5vw,22px)}

.tuile{position:relative;border-radius:var(--r);padding:clamp(20px,1.9vw,30px);
  display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tuile:hover,.tuile.rv.in:hover{transform:translateY(-5px)}

/* Le chiffre compte a l'arrivee (voir le script), et reste a la brosse. */
.tuile .num{font-family:var(--brush);font-weight:400;line-height:.86;
  font-size:clamp(64px,6.4vw,112px);letter-spacing:-.01em;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.tuile .num span{font-family:var(--disp);font-weight:800;font-size:.38em;
  letter-spacing:0;padding-left:.05em}
.tuile h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,1.7vw,27px);line-height:.98;letter-spacing:.005em;margin-bottom:8px}
.tuile p{font-size:clamp(14px,1.05vw,16px);line-height:1.45;max-width:30ch}
.tuile p b{font-family:var(--brush);font-weight:400;font-size:1.12em;letter-spacing:.01em}
.t-txt{position:relative;z-index:2}

/* Le produit d'une petite carte se pose en HAUT, et deborde du bord
   superieur : c'est ce qui la fait vivre. Il n'est jamais rogne. */
.t-prod{position:absolute;z-index:1;height:auto;pointer-events:none;
  filter:drop-shadow(0 18px 22px rgba(30,20,10,.22));
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tuile:hover .t-prod{transform:translateY(-6px) rotate(-3deg)}

/* 360 . le grand bloc, marine, le produit vu de dessus dans ses ondes. */
.t-360{grid-column:1 / span 2;grid-row:1 / span 2;background:var(--ink);color:var(--sand);
  overflow:hidden;justify-content:flex-end}
.t-360::before{content:'';position:absolute;right:-12%;top:-18%;width:90%;aspect-ratio:1;
  border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(255,122,26,.42),rgba(255,93,143,.12) 58%,transparent 74%)}
.t-360 .num{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;font-size:clamp(96px,11vw,200px)}
.t-360 h3{font-size:clamp(26px,2.6vw,42px)}
.t-360 p{color:rgba(242,227,201,.72);max-width:34ch;font-size:clamp(15px,1.2vw,18px)}
.t-360 p b{color:var(--mango)}
.t-vis{position:absolute;right:4%;top:6%;width:56%;aspect-ratio:1;z-index:1;
  display:grid;place-items:center}
.t-vis img{position:relative;z-index:1;width:78%;height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.38));
  animation:tourne 26s linear infinite}
@keyframes tourne{to{rotate:360deg}}
.t-vis i{position:absolute;inset:11%;border-radius:50%;border:2px solid var(--mango);
  opacity:0;animation:onde 4.2s cubic-bezier(.15,.7,.3,1) infinite}
.t-vis i:nth-child(2){animation-delay:1.4s}
.t-vis i:nth-child(3){animation-delay:2.8s}
@keyframes onde{0%{opacity:0;scale:.9}12%{opacity:.6}100%{opacity:0;scale:1.55}}

/* La photo, et sa pastille. */
.t-photo{grid-column:3;grid-row:1;margin:0;padding:0;overflow:hidden}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.t-photo:hover img{transform:scale(1.05)}
.t-photo figcaption{position:absolute;left:14px;bottom:14px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(30,42,90,.82);backdrop-filter:blur(10px);color:var(--sand);
  font-family:var(--disp2);font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase}

/* 16 h . le degrade mangue, chiffre blanc, le halo du produit en haut. */
.t-16{grid-column:4;grid-row:1;background:var(--grad);color:#fff}
.t-16 p{color:rgba(255,255,255,.9)}
.t-16 .t-prod{width:74%;right:-6%;top:-14%}

/* 10 min . turquoise, l'arriere et son USB-C. */
.t-10{grid-column:3;grid-row:2;background:#5AD2DC;color:var(--ink)}
.t-10 p{color:rgba(30,42,90,.78)}
.t-10 .num{color:var(--ink)}
.t-10 p b{color:#fff}
.t-10 .t-prod{width:80%;right:-8%;top:-6%}

/* 30 m . creme, la paire posee de part et d'autre d'un trait, a egale
   distance : le trait est au milieu exact, les deux ecarts sont egaux. */
.t-30{grid-column:4;grid-row:2;background:#FFF6E6;color:var(--ink)}
.t-30 .num{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.t-30 p{color:var(--ink-60)}
.t-30 p b{color:var(--mango)}
.t-paire{position:absolute;left:-5%;right:-5%;top:-3%;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:3%}
.t-paire img{width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(30,20,10,.18))}
.t-lien{display:none}
/* 12 oct : la paire vivante (accueil 30 m, fiche 03). Les deux enceintes s'ecartent et se
   rapprochent lentement ; un trait les relie par-dessous, et ce qui en devient visible grandit
   avec l'ecart. Une impulsion fait l'aller-retour sur le trait : « one taps, both play ». */
.paire-vivante{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8%!important}
.paire-vivante>img{position:relative;z-index:1;width:84%!important}
.paire-vivante>img:first-of-type{justify-self:start}
.paire-vivante>img:last-of-type{justify-self:end}
.paire-vivante>img:first-of-type{animation:pvG 7s ease-in-out infinite}
.paire-vivante>img:last-of-type{animation:pvD 7s ease-in-out infinite}
@keyframes pvG{0%,100%{translate:12% 0}50%{translate:-4% 0}}
@keyframes pvD{0%,100%{translate:-12% 0}50%{translate:4% 0}}
.paire-vivante .lien{position:absolute;left:24%;right:24%;top:52%;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--lien,var(--mango)) 12%,var(--lien,var(--mango)) 88%,transparent);opacity:.55}
.paire-vivante .lien::after{content:'';position:absolute;top:50%;left:0;width:9%;aspect-ratio:1/1;min-width:10px;translate:0 -50%;
  border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--lien,var(--mango)) 45%,transparent 72%);
  box-shadow:0 0 14px 4px var(--lien,var(--mango));animation:pvPulse 1.75s cubic-bezier(.6,0,.4,1) infinite alternate}
@keyframes pvPulse{to{left:91%}}
@media(prefers-reduced-motion:reduce){.paire-vivante>img,.paire-vivante .lien::after{animation:none}}

/* En dessous de 1100 px, les quatre colonnes deviennent trop etroites :
   la paire du 30 m debordait sur la carte 16 h du dessus. */
@media(max-width:1100px){
  .wid-grille{grid-template-columns:repeat(2,1fr);grid-template-rows:none;
    grid-auto-rows:minmax(300px,auto)}
  .t-360{grid-column:1 / span 2;grid-row:auto;min-height:540px}
  .t-photo,.t-16,.t-10,.t-30{grid-column:auto;grid-row:auto}
  .t-photo{min-height:300px}
}
@media(max-width:600px){
  .wid-grille{grid-template-columns:1fr;gap:14px}
  .tuile{min-height:330px}
  /* Apres .tuile, sinon sa hauteur minimale ecrase celle du grand bloc
     et le produit recouvre le texte. */
  .t-360{grid-column:1;min-height:600px}
  .t-vis{width:80%;right:10%;top:3%}
  .t-16 .t-prod{width:62%;right:-4%;top:-10%}
  .t-10 .t-prod{width:66%;right:-4%;top:-4%}
  .t-paire{left:2%;right:2%;top:5%}
}
@media(prefers-reduced-motion:reduce){
  .t-vis img,.t-vis i{animation:none}
  .tuile:hover,.tuile:hover .t-prod{transform:none}
}

/* Révélation au défilement */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
  .wave svg{animation:none}}

/* Pied */
/* Le champ et le bouton forment une seule pièce, au même rayon. */
@media(max-width:760px){
    }
/* ==========================================================================
   PIED
   ==========================================================================
   Sa couleur lui appartient : un vert de jungle très sombre, tiré des
   photos de la page. Le marine servait déjà à quatre sections, le pied
   se confondait avec elles.

   La bande à l'image porte la parole et l'inscription. La MARQUE, elle,
   descend dans le pied proprement dit, en grand à gauche, les trois
   menus tassés à côté. La rangée « free shipping, 2 ans de garantie »
   est retirée : elle n'apportait rien.
   ========================================================================== */
/* Après deux essais trop verts : un vrai bleu d'océan, teinte 208.
   Plus profond et plus bleu que le marine des sections, donc le pied se
   distingue toujours, mais on est franchement dans l'eau. */
:root{--forest:#0A2742}
.foot{background:var(--forest);color:var(--sand)}

.ft-top{position:relative;overflow:hidden;background:#071D33;
  /* Le haut degage la langue la plus profonde de la vague, soit 73 % de
     sa hauteur de bande, quelle que soit la largeur d'ecran. */
  padding:calc(clamp(84px,9.5vw,148px) * 0.73 + clamp(34px,5vh,64px)) 0 clamp(90px,13vh,170px)}
.ft-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.72}
/* Voile allégé : l'image a le droit de se voir. */
.ft-top::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(7,29,51,.86) 0%,rgba(7,29,51,.50) 48%,rgba(7,29,51,.20) 100%)}
.ft-top-in{position:relative;z-index:3;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,86px);align-items:start}
.ft-say h2{font-size:clamp(34px,4.6vw,72px)}
.ft-say p{margin-top:clamp(18px,2.6vh,28px);color:rgba(242,227,201,.82);max-width:30ch;
  font-size:clamp(15px,1.3vw,18px)}
.ft-loop h3{font-size:clamp(30px,4vw,62px)}
.ft-loop p{margin:clamp(14px,2vh,22px) 0 clamp(20px,3vh,30px);
  color:rgba(242,227,201,.76);font-size:15px;max-width:36ch}
.ft-form{display:grid;gap:12px;max-width:440px}
.ft-form input{border:0;border-radius:var(--r-pill);padding:19px 28px;
  background:rgba(242,227,201,.12);color:var(--sand);font-family:var(--body);font-size:15px;
  box-shadow:inset 0 0 0 1.4px rgba(242,227,201,.28);transition:box-shadow .3s,background .3s}
.ft-form input::placeholder{color:rgba(242,227,201,.52)}
.ft-form input:focus{outline:0;background:rgba(242,227,201,.18);
  box-shadow:inset 0 0 0 1.6px var(--mango)}
.ft-form button{border:0;border-radius:var(--r-pill);padding:19px 28px;cursor:pointer;
  background:var(--grad);color:#fff;font-family:var(--disp);font-weight:800;
  text-transform:uppercase;font-size:20px;letter-spacing:-.01em;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
.ft-form button:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,93,143,.30)}
.ft-social{display:flex;gap:clamp(14px,1.8vw,24px);margin-top:clamp(24px,3.6vh,38px)}
.ft-social a{display:grid;place-items:center;width:42px;aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 0 0 1.3px rgba(242,227,201,.28);transition:background .3s,transform .3s}
.ft-social svg{width:18px;height:18px;fill:rgba(242,227,201,.9)}
.ft-social a:hover{background:var(--grad);transform:translateY(-3px);box-shadow:none}
.ft-social a:hover svg{fill:#fff}
.ft-wave{position:absolute;left:0;bottom:-1px;width:100%;z-index:4;
  height:clamp(46px,6vw,92px);line-height:0;color:var(--forest);overflow:hidden}
.ft-wave svg{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;
  animation:waveGo 24s linear infinite}

/* La marque en grand, les menus tassés à côté. */
.ft-menu{padding-block:clamp(42px,6.4vh,84px);
  border-bottom:1px solid rgba(242,227,201,.14)}
.ft-menu-in{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(30px,5vw,96px);align-items:start}
.ft-mark img{width:clamp(180px,20vw,300px);height:auto;display:block}
.ft-sig{display:block;margin-top:12px;font-family:var(--script);
  font-size:clamp(17px,1.7vw,24px);color:rgba(242,227,201,.66)}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,48px)}
.ft-menu h4{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mango);margin-bottom:16px}
.ft-menu a{display:block;padding:6px 0;font-size:15px;color:rgba(242,227,201,.80);
  transition:color .25s,transform .25s}
.ft-menu a:hover{color:var(--sand);transform:translateX(4px)}

.ft-base{padding-block:22px 30px}
.ft-base-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;font-size:12.5px;color:rgba(242,227,201,.56)}
.sr{position:absolute;left:-9999px}
/* Les liens legaux, en ligne, discrets, dans la bande du bas. */
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.ft-legal a{color:rgba(242,227,201,.62);transition:color .25s}
.ft-legal a:hover{color:var(--sand)}

@media(max-width:860px){
  .ft-top-in{grid-template-columns:1fr}
  .ft-menu-in{grid-template-columns:1fr;gap:clamp(28px,4vh,44px)}
}



/* ==========================================================================
   TECH SPECS . la fiche, et la boite
   ==========================================================================
   A gauche une carte marine qui tient sa place pendant la lecture, le
   produit sort de son bord haut. A droite cinq groupes, chacun avec son
   pictogramme de la charte dans sa couleur. Chaque valeur porte sa
   condition en dessous, en plus petit : jamais un chiffre seul.
   ========================================================================== */
.spx{overflow-x:clip}
.spx-tete{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(18px,4vw,64px);align-items:end;margin-bottom:clamp(30px,5vh,60px)}
.spx-tete .h2{margin-top:10px;font-size:clamp(36px,5.4vw,84px)}
.spx-lede{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--ink-60);max-width:36ch}

.spx-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);
  gap:clamp(18px,3vw,48px);align-items:start}

.spx-carte{position:sticky;top:clamp(96px,13vh,130px);isolation:isolate;
  margin-top:clamp(70px,8vw,120px);border-radius:var(--r);background:var(--ink);color:var(--sand);
  padding:0 clamp(22px,2.2vw,34px) clamp(22px,2.2vw,34px)}
.spx-carte img{width:88%;height:auto;margin:calc(-1 * clamp(70px,8vw,120px)) auto 0;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.34))}
.spx-id{margin-top:clamp(14px,2vh,22px)}
.spx-id b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,3.4vw,52px);line-height:.9}
.spx-id span{display:block;margin-top:6px;font-size:14px;color:rgba(242,227,201,.66)}
.spx-cles{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:clamp(18px,2.6vh,28px);padding-top:clamp(16px,2.2vh,22px);
  border-top:1px solid rgba(242,227,201,.16)}
.spx-cles li{display:grid;gap:4px;align-content:start}
.spx-cles b{font-family:var(--brush);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:.9;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-right:.05em}
.spx-cles b small{font-family:var(--disp);font-weight:800;font-size:.5em;padding-left:.08em}
.spx-cles span{font-size:12px;line-height:1.35;color:rgba(242,227,201,.62)}

/* L'ANATOMIE . trois colonnes : legendes, produit, legendes. Le produit
   flotte doucement sur un cercle soleil ; les traits partent de pastilles
   posees sur ses vraies zones et rejoignent chaque legende a sa hauteur.
   Les hauteurs (top) sont en % de la boite image, comme les traits. */
.ana{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(10px,2vw,30px);align-items:center;margin-top:clamp(10px,2vh,24px)}
.ana-vis{position:relative;display:grid;place-items:center;padding-block:clamp(20px,4vh,50px)}
.ana-soleil{position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,174,77,.55),rgba(255,122,26,.16) 55%,transparent 72%)}
.ana-boite{position:relative;width:100%;aspect-ratio:1400/1248;animation:flotte 7s ease-in-out infinite}
@keyframes flotte{50%{translate:0 -10px}}
.ana-boite img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 34px 34px rgba(90,40,10,.22))}
.ana-boite svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ana-boite line{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 4;vector-effect:non-scaling-stroke;opacity:.55}
.ana-pt{position:absolute;translate:-50% -50%;width:14px;height:14px;border-radius:50%;
  background:var(--sand-lt);box-shadow:0 0 0 2px var(--mango),0 0 0 7px rgba(255,122,26,.18)}
.ana-pt::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(255,122,26,.5);
  animation:pulse 2.8s ease-out infinite}
@keyframes pulse{from{scale:.6;opacity:1}to{scale:1.8;opacity:0}}
.ana-pt i{display:none}
.ana-col{position:relative;list-style:none;margin:0;padding:0;align-self:stretch}
.ana-col li{position:absolute;left:0;right:0;translate:0 -50%}
.ana-g li{text-align:right}
.ana-col .br{display:block;font-family:var(--brush);font-weight:400;font-size:clamp(22px,1.8vw,28px);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ana-col h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(20px,1.7vw,26px);line-height:1;margin:4px 0 6px}
.ana-col p{font-size:14px;line-height:1.45;color:var(--ink-60);max-width:28ch}
.ana-g p{margin-left:auto}

/* La bande des chiffres, marine, comme la carte qu'elle remplace. */
.ana-bande{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px;
  margin-top:clamp(20px,4vh,44px);border-radius:var(--r);background:var(--ink);color:var(--sand);
  padding:clamp(20px,2.4vw,32px) clamp(22px,3vw,44px)}
.ana-bande ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:16px clamp(24px,4vw,64px)}
.ana-bande li{display:grid;gap:4px}
.ana-bande .br{font-family:var(--brush);font-weight:400;font-size:clamp(36px,3.4vw,54px);line-height:.9;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.05em}
.ana-bande .br small{font-family:var(--disp);font-weight:800;font-size:.42em;padding-left:.06em}
.ana-bande span{font-size:13px;color:rgba(242,227,201,.66)}
.ana-bande .lozenge{font-size:clamp(17px,1.5vw,21px);padding:13px 24px}

.spx-lede a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--mango);
  text-decoration-thickness:1.5px;text-underline-offset:3px}

/* LA BOITE . une grille de cartes, la grammaire de « What it does ». */
.bx{margin-top:clamp(50px,8vh,96px)}
.bx-t{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(40px,4.6vw,72px);line-height:.9;
  margin-bottom:clamp(54px,9vh,90px)}
.bx-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(clamp(200px,24vh,250px),auto));
  gap:clamp(12px,1.5vw,22px)}
.bx-c{position:relative;border-radius:var(--r);padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;
  justify-content:flex-end;gap:10px;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bx-c:hover{transform:translateY(-4px)}
.bx-c .br{font-family:var(--brush);font-weight:400;font-size:24px;line-height:1}
.bx-c h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(21px,1.8vw,27px);line-height:.98;margin:2px 0 4px}
.bx-c p{font-size:14px;line-height:1.45;opacity:.82}
.bx-c a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bx-prod{grid-column:1 / span 2;grid-row:1 / span 2;background:var(--grad);color:#fff}
/* L'eventail des trois coloris : celui du milieu devant et plus grand. */
.bx-eventail{position:absolute;z-index:-1;left:50%;top:-12%;width:min(108%,720px);aspect-ratio:1.45;translate:-50% 0}
.bx-eventail img:nth-child(2){bottom:2%!important}
.bx-eventail img{position:absolute;bottom:0;width:48%;height:auto;filter:drop-shadow(0 26px 30px rgba(90,30,0,.30))}
.bx-eventail img:nth-child(1){left:2%;bottom:10%;rotate:-8deg;width:40%}
.bx-eventail img:nth-child(3){right:2%;bottom:10%;rotate:8deg;width:40%}
.bx-eventail img:nth-child(2){left:50%;translate:-50% 0;z-index:1;width:54%}
.bx-prod h4{font-size:clamp(30px,3vw,46px)}
.bx-cable{background:var(--ink);color:var(--sand)}
.bx-cable .br{color:var(--mango)}
.bx-fil{width:min(100%,230px);height:auto;margin:0 auto auto;overflow:visible}
.bx-carte{background:#FFF6E6;color:var(--ink)}
.bx-carte .br,.bx-notice .br{color:var(--mango)}
.bx-mini{display:grid;gap:7px;align-content:start;width:min(100%,170px);aspect-ratio:1.5;margin:0 auto auto;padding:14px 16px;
  border-radius:10px;background:#fff;box-shadow:0 14px 24px rgba(30,42,90,.12)}
.bx-mini img{width:56px;height:auto}
.bx-mini i{font-family:var(--script);font-style:normal;font-size:24px;line-height:1;color:var(--mango)}
.bx-mini em{display:block;height:4px;border-radius:2px;background:rgba(30,42,90,.14)}
.bx-mini em:nth-of-type(2){width:60%}
.bx-notice{background:#5AD2DC;color:var(--ink)}
.bx-notice .br{color:var(--ink)}
/* Le livret de garantie, entrouvert en perspective, ses pages derriere. */
.bx-livret{position:relative;width:min(100%,150px);aspect-ratio:.78;margin:4px auto auto;
  transform:perspective(600px) rotateY(-16deg) rotateX(6deg);transform-style:preserve-3d}
.bx-page,.bx-couv{position:absolute;inset:0;border-radius:3px 8px 8px 3px}
.bx-page{background:#F4F0E8;box-shadow:0 10px 22px rgba(10,60,70,.18)}
.bx-page:nth-child(1){translate:10px 6px}
.bx-page:nth-child(2){translate:5px 3px;background:#FBF8F2}
.bx-couv{display:grid;align-content:start;justify-items:start;gap:2px;padding:14px 14px 12px 18px;
  background:linear-gradient(90deg,rgba(0,0,0,.10) 0 5px,transparent 6px),#fff;color:var(--ink);
  box-shadow:0 18px 26px rgba(10,60,70,.22)}
.bx-couv svg{width:22px;height:22px;fill:none;stroke:var(--mango);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.bx-couv b{font-family:var(--brush);font-weight:400;font-size:46px;line-height:.8;color:var(--mango)}
.bx-couv small{font-weight:700;font-size:10.5px;line-height:1.15;text-transform:uppercase;letter-spacing:.07em}
.bx-couv em{position:absolute;left:18px;bottom:12px;font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)}
/* Pas de chargeur : le bloc dessine, barre, sur une fine rayure de
   parasol. */
.bx-non{color:var(--ink);background:repeating-linear-gradient(135deg,#FBF3E4 0 14px,#F6EAD5 14px 28px);
  box-shadow:inset 0 0 0 1px rgba(30,42,90,.10)}
/* 12 oct : photos detourees (lot 2, dossier 05 - In the box) a la place des dessins. */
.bx-photo{display:block;width:min(100%,230px);height:auto;margin:0 auto auto;
  filter:drop-shadow(0 14px 18px rgba(30,42,90,.22))}
.bx-photo-carte{width:min(88%,190px);transform:rotate(-4deg)}
.bx-photo-livret{width:min(80%,170px);transform:rotate(3deg)}
.bx-chargeur{width:min(80%,190px);height:auto;margin:auto;display:block}

@media(max-width:980px){
  .ana{grid-template-columns:1fr;gap:0}
  .ana-vis{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .ana-boite svg{display:none}
  .ana-pt{width:24px;height:24px;display:grid;place-items:center;background:var(--ink);box-shadow:0 0 0 3px var(--sand-lt)}
  .ana-pt::after{display:none}
  .ana-pt i{display:block;font-style:normal;font-weight:700;font-size:12px;color:var(--sand)}
  .ana-col{display:grid;gap:18px;align-self:auto;margin-top:18px}
  .ana-col li{position:static;translate:none;text-align:left;display:grid;grid-template-columns:40px 1fr;column-gap:10px}
  .ana-col li .br{grid-row:span 2}
  .ana-col h3{margin-top:0}
  .ana-g p{margin-left:0}
  .bx-grille{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(220px,auto)}
  .bx-prod{grid-column:1 / -1;grid-row:auto;min-height:clamp(400px,90vw,480px)}
  .bx-eventail{top:-10%;width:100%;aspect-ratio:1.9}
}
@media(max-width:520px){
  .bx-grille{grid-template-columns:1fr}
  .bx-c{min-height:220px}
  .bx-prod img{width:66%;top:-10%}
}
@media(prefers-reduced-motion:reduce){.ana-boite,.ana-pt::after{animation:none}}

@media(max-width:980px){
  .spx-grille{grid-template-columns:1fr}
  .spx-carte{position:relative;top:auto;max-width:520px;width:100%;margin-inline:auto}
}
@media(max-width:700px){
  .spx-tete{grid-template-columns:1fr}
}

/* ==========================================================================
   #MANGOSOUND . la galerie des photos clients
   ==========================================================================
   Sur marine, entre deux sections claires. Une grille dense de tailles
   variees : chaque tuile ne porte qu'un enfant, aujourd'hui un
   placeholder, demain une <img> qui la remplit et se recadre seule.
   ========================================================================== */
.ugc{position:relative;overflow:hidden;background:var(--ink);color:var(--sand);
  padding-block:clamp(70px,11vh,140px)}
.ugc::before{content:'';position:absolute;right:-14%;top:-30%;width:62%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,93,143,.20),rgba(255,93,143,0) 70%)}
.ugc .wrap{position:relative}
.ugc-tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(18px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4.6vh,54px)}
.ugc .h2{margin-top:10px;font-size:clamp(34px,5.1vw,80px)}
.ugc-say p{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:rgba(242,227,201,.74);max-width:36ch}
.ugc-say p b{color:var(--sand);font-weight:600}
/* 12 oct : pas encore de compte Instagram, le bouton n'est branche a rien (span, pas de lien).
   Pastille du logo dans le degrade de la marque, libelle en capitales condensees, fleche. */
.ugc-ig{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:7px 20px 7px 7px;
  border-radius:var(--r-pill);background:rgba(242,227,201,.08);box-shadow:inset 0 0 0 1.5px rgba(242,227,201,.28);
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--sand);
  cursor:default;transition:background .35s,box-shadow .35s}
.ugc-ig i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad);
  box-shadow:0 6px 16px rgba(255,93,143,.35)}
.ugc-ig i svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
.ugc-ig b{font-weight:800;color:#FFAE4D}
.ugc-ig .fl{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.ugc-ig:hover{background:rgba(242,227,201,.14);box-shadow:inset 0 0 0 1.5px rgba(255,174,77,.6)}
.ugc-ig:hover .fl{translate:4px 0}
.ugc-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;
  grid-auto-rows:clamp(120px,13.5vw,196px);gap:clamp(8px,1vw,14px)}
.ugc-t{position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  background:rgba(242,227,201,.06)}
.ugc-t>*{position:absolute;inset:0;width:100%;height:100%}
.ugc-t>img{object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.ugc-t:hover>img{transform:scale(1.04)}
.ugc-big{grid-column:span 2;grid-row:span 2}
.ugc-tall{grid-row:span 2}
.ugc-wide{grid-column:span 2}
.ugc .ph-bloc{color:rgba(242,227,201,.72);border-color:rgba(255,174,77,.5)}

@media(max-width:760px){
  .ugc-tete{grid-template-columns:1fr}
  /* Deux colonnes : les vingt cases des dix tuiles tombent juste, sans
     trou. A trois colonnes le remplissage dense en laissait. */
  .ugc-grille{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(84px,25vw,130px)}
  .ugc .ph-bloc{padding:8px;font-size:11px}
}

/* ==========================================================================
   FAQ . rubriques et accordeons (voir le commentaire du bloc)
   ========================================================================== */
/* FAQ . vivante et tenue. Les rubriques en pastilles avec les icones de
   la charte ; les questions en cartes creme numerotees a la brosse ; la
   carte ouverte passe en marine. La vue de dessus tourne doucement sous
   le titre. */
.qa{background:var(--sand)}
.qa [hidden]{display:none!important}
.qa-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(28px,5vw,90px);align-items:start}
.qa-tete{position:sticky;top:clamp(100px,14vh,140px)}
.qa-tete .h2{margin-top:10px;font-size:clamp(40px,5.6vw,88px)}
.qa-lede{margin-top:clamp(14px,2vh,22px);font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink-60);max-width:32ch}
.qa-prod{display:block;width:clamp(110px,10vw,150px);height:auto;margin-top:clamp(18px,3vh,28px);
  filter:drop-shadow(0 18px 22px rgba(90,40,10,.22));animation:tourne 26s linear infinite}
.qa-nav ul{list-style:none;margin:clamp(18px,3vh,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.qa-cat{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:10px 15px 10px 12px;
  border-radius:var(--r-pill);background:#FFF6E6;color:var(--ink);font:600 14px/1 var(--body);
  box-shadow:inset 0 0 0 1px rgba(30,42,90,.12);transition:background .25s,color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.qa-cat svg{width:17px;height:17px;fill:none;stroke:var(--mango);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qa-cat span{font-size:11.5px;color:rgba(30,42,90,.45)}
.qa-cat:hover{transform:translateY(-2px)}
.qa-cat[aria-pressed="true"]{background:var(--ink);color:var(--sand);box-shadow:none}
.qa-cat[aria-pressed="true"] span{color:rgba(242,227,201,.55)}
.qa-cat:focus-visible{outline:2px solid var(--mango);outline-offset:3px}

.qa-liste{display:grid;gap:10px}
.qa-q{border-radius:18px;background:#FFF6E6;box-shadow:inset 0 0 0 1px rgba(30,42,90,.08);
  transition:background .35s,color .35s;interpolate-size:allow-keywords}
.qa-q summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:clamp(16px,2vh,20px) clamp(16px,1.8vw,24px)}
.qa-q summary::-webkit-details-marker{display:none}
.qa-q summary:focus-visible{outline:2px solid var(--mango);outline-offset:3px;border-radius:18px}
.qa-q summary .br{font-family:var(--brush);font-weight:400;font-size:20px;line-height:1;color:var(--mango);min-width:30px}
.qa-q summary span{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(19px,1.6vw,24px);line-height:1.05}
.qa-q summary i{position:relative;width:34px;height:34px;border-radius:50%;background:var(--sand);flex:none;
  transition:background .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.qa-q summary i::before,.qa-q summary i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.8px;
  margin:-.9px 0 0 -6px;border-radius:2px;background:var(--ink)}
.qa-q summary i::after{transform:rotate(90deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qa-q summary:hover i{background:var(--grad)}
.qa-q[open]{background:var(--ink);color:var(--sand);box-shadow:none}
.qa-q[open] summary i{background:var(--grad)}
.qa-q[open] summary i::before,.qa-q[open] summary i::after{background:#fff}
.qa-q[open] summary i::after{transform:rotate(0)}
.qa-q::details-content{block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
.qa-q[open]::details-content{block-size:auto}
.qa-r{padding:0 clamp(16px,1.8vw,24px) clamp(18px,2.4vh,24px) calc(clamp(16px,1.8vw,24px) + 46px)}
.qa-r p{margin:0;font-size:15.5px;line-height:1.65;color:rgba(242,227,201,.86);max-width:62ch}
.qa-r a{color:#fff;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--mango);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.qa-fin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(16px,3vh,28px)}
.qa-fin p{font-size:15px;color:var(--ink-60)}
.qa-ecrire{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--ink);
  padding-bottom:3px;border-bottom:1.5px solid var(--mango);transition:gap .3s cubic-bezier(.2,.8,.2,1)}
.qa-ecrire:hover{gap:16px}
.qa-ecrire svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .qa-grid{grid-template-columns:1fr}
  .qa-tete{position:static}
  .qa-prod{display:none}
  .qa-r{padding-left:clamp(16px,1.8vw,24px)}
}
@media(prefers-reduced-motion:reduce){.qa-prod{animation:none}}

/* Le lien sous le bouton de la precommande. */
.buy-how{display:inline-block;margin-top:14px;font-size:13.5px;color:rgba(242,227,201,.66);
  text-decoration:underline;text-decoration-color:rgba(242,227,201,.3);text-underline-offset:3px;
  transition:color .25s,text-decoration-color .25s}
.buy-how:hover{color:var(--sand);text-decoration-color:var(--mango)}

/* ==========================================================================
   LA BARRE D'ACHAT . elle suit le defilement entre le hero et la
   precommande (voir le script). Bureau : une capsule creme centree, de la
   meme matiere que l'en-tete. Mobile : une barre basse, vignette, prix,
   bouton. Centree par les marges, sans transform : la translation de
   l'apparition reste libre.
   ========================================================================== */
.sbar{position:fixed;z-index:60;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  width:max-content;max-width:calc(100% - 32px);margin-inline:auto;
  opacity:0;visibility:hidden;transform:translateY(calc(100% + 26px));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s,visibility 0s .55s}
.sbar[data-show="true"]{opacity:1;visibility:visible;transform:none;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s,visibility 0s}
.sbar-in{display:flex;align-items:center;gap:18px;padding:7px 7px 7px 10px;
  border-radius:var(--r-pill);background:rgba(247,238,222,.88);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -16px rgba(16,32,58,.45),
             0 0 0 1px rgba(30,42,90,.08)}
.sbar-vig{position:relative;flex:none;width:50px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,var(--halo),rgba(255,246,230,.9) 92%)}
.sbar-vig img{position:absolute;width:112%;max-width:none;left:-6%;top:-22%;height:auto;
  filter:drop-shadow(0 6px 7px rgba(30,20,10,.22))}
.sbar-id{display:grid;line-height:1.1}
.sbar-id b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:22px;line-height:.95}
.sbar-id span{font-size:12px;color:var(--ink-60)}
.sbar-prix{display:flex;align-items:baseline;gap:8px;padding-left:18px;border-left:1px solid var(--ink-12)}
.sbar-prix b{font-family:var(--disp);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.01em}
.sbar-prix s{font-size:13px;color:var(--ink-60)}
.sbar-cols{display:flex;gap:9px;padding-left:18px;border-left:1px solid var(--ink-12)}
.sbar-cols button{width:20px;aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--p);box-shadow:inset 0 0 0 1px rgba(30,42,90,.16);
  transition:box-shadow .25s,transform .25s}
.sbar-cols button:hover{transform:scale(1.12)}
.sbar-cols button[aria-checked="true"]{box-shadow:inset 0 0 0 1px rgba(30,42,90,.16),
  0 0 0 2.5px rgba(247,238,222,1),0 0 0 4px var(--ink)}
.sbar-go{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:13px 22px;border-radius:var(--r-pill);background:var(--grad);color:#fff;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:18px;
  letter-spacing:-.005em;line-height:1;transition:box-shadow .3s,transform .3s}
.sbar-go svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.sbar-go:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,93,143,.34)}
.sbar :focus-visible{outline:2px solid var(--mango);outline-offset:3px}

@media(max-width:640px){
  .sbar{left:10px;right:10px;width:auto;max-width:none;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .sbar-in{gap:12px;border-radius:20px;padding:8px 8px 8px 10px}
  .sbar-id,.sbar-cols{display:none}
  .sbar-prix{flex:1;padding-left:0;border-left:0}
  .sbar-vig{width:46px}
}
@media(prefers-reduced-motion:reduce){
  .sbar,.sbar[data-show="true"]{transform:none;transition:opacity .2s,visibility 0s}
  .qa-q::details-content{transition:none}
  .qa-q summary span,.qa-q summary i::before,.qa-q summary i::after{transition:none}
  .qa-q summary:hover span{transform:none}
}

/* ==========================================================================
   TELEPHONE . refonte du 12 oct.
   ==========================================================================
   Sur telephone on ne compresse pas la grille du bureau : on garde le
   message et on change la forme. Les grilles de cartes deviennent des
   rails a balayer, la carte suivante depasse du bord pour inviter au
   geste. Les sections epinglees au defilement redeviennent des
   carrousels natifs : un epinglage de trois ecrans sur un telephone,
   c'est trois ecrans ou le pouce ne fait rien.
   ========================================================================== */
@media(max-width:760px){
  /* Le rail commun : bord a bord, aimante, sans barre. Les cartes y
     entrent deja revelees : la revelation verticale n'a pas de sens pour
     une carte qui arrive de cote. */
  .wid-grille,.coris-rail,.qa-nav ul{
    display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wid-grille::-webkit-scrollbar,.coris-rail::-webkit-scrollbar,.qa-nav ul::-webkit-scrollbar{display:none}

  /* HERO . le bouton quitte la phrase et se pose dessous, en grand. */
  .hero h1{display:flex;flex-direction:column;align-items:flex-start;max-width:none}
  .hero h1 br{display:none}
  .hero h1 .lozenge{order:1;margin:22px 0 0;font-size:19px;padding:16px 28px}
  .hero-in{padding-bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 30px))}

  /* CE QU'IL FAIT . cinq cartes a balayer, meme hauteur, produits DANS
     la carte (un rail rogne ce qui deborde). */
  .wid-grille{gap:12px;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);grid-template-columns:none;grid-template-rows:none}
  .wid-grille>.tuile{flex:0 0 82%;min-height:460px;scroll-snap-align:start;
    grid-column:auto;grid-row:auto;opacity:1;transform:none}
  .wid-grille>.tuile:hover{transform:none}
  .t-360{min-height:460px}
  .t-360 .num{font-size:96px}
  .t-vis{width:76%;right:12%;top:5%}
  .t-photo{min-height:460px}
  .t-16 .t-prod{width:78%;right:-6%;top:5%}
  .t-10 .t-prod{width:84%;right:-4%;top:8%}
  .t-30 .t-paire{left:4%;right:4%;top:14%}
  .tuile .num{font-size:84px}

  /* SOUNDTRACK . le texte descend au pied de l'image, sur un voile qui
     monte du bas. */
  .track{min-height:clamp(440px,122vw,560px);align-items:end}
  .track::after{background:linear-gradient(to top,rgba(30,42,90,.92) 0%,rgba(30,42,90,.55) 42%,rgba(30,42,90,0) 74%)}
  .track .h2{font-size:42px}
  .track-in{padding-block:0 44px}

  /* LES CARTES PHOTO . plus courtes, le texte reste lisible. */
  .pcard,.pcard.wide{min-height:clamp(360px,104vw,440px);padding:24px}
  .pcard h3{font-size:34px}

  /* LIGNE D'EAU . une bande carree : la video est en 1000 px, une
     bande haute l'agrandissait jusqu'au flou. */
  .waterline{min-height:0;aspect-ratio:1/1.05}
  .waterline .wl{padding-bottom:34px}
  .waterline .h2{font-size:40px}

  /* LES COLORIS . plus d'epinglage : un carrousel au pouce, la jauge
     suit le balayage (voir le script). */
  .coris{height:auto;overflow:clip}
  .coris-pin{position:relative;height:auto;display:block;padding-block:64px 36px}
  .coris-tete{text-align:left;padding-top:0}
  .coris-rail{width:auto;height:auto;transform:none!important;margin-top:8px}
  .coris-pan{flex:0 0 100%;width:100%;scroll-snap-align:center;padding:30px 0 70px}
  .coris-pan img{width:66vw;margin-top:-6%;transform:none!important}
  .coris-mot{transform:none!important;font-size:64px}
  .coris-lbl{bottom:22px}
  .coris-jauge{padding-bottom:0}
  .coris-jauge i{width:42px}

  .sec.tight#size{padding-top:40px}

  /* LA BOITE . deux colonnes : le produit en grand, les trois pieces
     en carres, le chargeur absent en bandeau. */
  .bx-grille{grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:auto}
  .bx-prod{grid-column:1 / -1;min-height:340px}
  .bx-eventail{top:-14%;width:104%}
  .bx-c{min-height:236px;padding:16px;gap:8px}
  .bx-c h4{font-size:19px}
  .bx-c p{font-size:12.5px;line-height:1.4}
  .bx-c .br{font-size:20px}
  .bx-prod h4{font-size:34px}
  .bx-photo{width:92%}
  .bx-mini{width:100%;padding:11px 12px;gap:5px}
  .bx-mini img{width:44px}
  .bx-mini i{font-size:19px}
  .bx-livret{width:92px}
  .bx-couv b{font-size:34px}
  .bx-couv small{font-size:8.5px}
  .bx-couv em{display:none}
  /* 13 oct : la carte « No charger » reste dans la grille, en bas a droite,
     au lieu de prendre sa propre ligne. */
  .bx-chargeur{width:min(78%,120px);margin:0 auto auto}
  .bx-t{margin-bottom:70px}

  /* FAQ . les rubriques sur une ligne qui defile, les questions plus
     compactes. */
  .qa-grid{grid-template-columns:minmax(0,1fr)}
  .qa-tete,.qa-nav{min-width:0}
  .qa-nav ul{flex-wrap:nowrap;gap:8px;margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);padding-bottom:4px}
  .qa-cat{flex:none;white-space:nowrap}
  .qa-q summary{gap:12px;padding:15px 14px}
  .qa-q summary span{font-size:17px}
  .qa-q summary i{width:30px;height:30px}

  /* PIED . deux colonnes de liens, pas une liste de trois ecrans. */
  .ft-cols{grid-template-columns:1fr 1fr;row-gap:28px}
  .ft-mark img{width:150px}
  .ft-menu a{padding:5px 0;font-size:14.5px}
}

/* TABLETTE . entre le telephone et le bureau, on garde deux colonnes
   partout ou une seule colonne faisait des blocs demesures. */
@media(min-width:761px) and (max-width:980px){
  /* L'anatomie : le produit en tete, les deux listes de legendes cote a
     cote dessous, au lieu de six legendes en file. */
  .ana{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,40px)}
  .ana-vis{grid-column:1 / -1}
  .pcard{min-height:clamp(380px,50vw,480px)}
}
@media(min-width:601px) and (max-width:860px){
  .size-grid{grid-template-columns:1fr 1.1fr}
  .size-box{width:calc(100% - 70px)}
}