/* 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. */
.nav-g,.nav-r{border-radius:var(--r-pill);padding:0;
  transition:background .5s,box-shadow .5s,padding .5s cubic-bezier(.2,.8,.2,1),
             backdrop-filter .5s}
.nav.solid .nav-g,.nav.solid .nav-r{
  background:rgba(247,238,222,.84);backdrop-filter:blur(20px) saturate(1.4);
  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)}
.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}
.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:860px){.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:820px){.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);
  margin-top:0;
  margin-bottom:calc(-1 * clamp(84px,9.5vw,148px));
  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;
  font-family:var(--script);font-weight:400;white-space:nowrap;
  font-size:clamp(56px,9.4vw,158px);line-height:.86;color:var(--mot,var(--halo));
  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(46px,14vw,96px)}
}

/* ==========================================================================
   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{width:clamp(22px,2.2vw,38px);height:0;border-top:2px dashed var(--mango)}

@media(max-width:980px){
  .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 h5{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)}
}
@media(max-width:560px){.ft-cols{grid-template-columns:1fr}}


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

/* LA PLANCHE . les autocollants flottent sur une eau de piscine.
   L'eau : deux nappes de reflets qui derivent lentement l'une contre
   l'autre. Chaque autocollant a sa forme, sa couleur, son inclinaison
   (--r) et son decalage de houle (--d) ; il se redresse au survol. Le
   bord blanc epais et l'ombre courte en font des autocollants decoupes,
   pas des cartes. */
.stk{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--r) * 1.6);
  padding:clamp(26px,3vw,46px) clamp(16px,2.4vw,40px) clamp(22px,3vw,40px);
  background:linear-gradient(160deg,#5AD2DC 0%,#22B8C4 46%,#1592A6 100%)}
.stk::before,.stk::after{content:'';position:absolute;inset:-30%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(255,255,255,.34),transparent 70%) 0 0/170px 120px,
    radial-gradient(closest-side,rgba(255,255,255,.22),transparent 72%) 60px 40px/230px 150px;
  mix-blend-mode:soft-light;animation:reflets 18s linear infinite}
.stk::after{animation-duration:27s;animation-direction:reverse;opacity:.8;
  background-size:210px 140px,150px 110px}
@keyframes reflets{to{transform:translate(120px,70px)}}
.stk-planche{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(12px,1.6vw,22px) clamp(10px,1.4vw,18px)}
.st{--fond:#fff;--encre:var(--ink);position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:4px;
  padding:16px 22px;background:var(--fond);color:var(--encre);
  box-shadow:0 0 0 5px #fff,0 10px 18px rgba(8,40,60,.28);
  rotate:var(--r);animation:houle 6.5s ease-in-out infinite;animation-delay:var(--d);
  transition:rotate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1)}
.st:hover{rotate:0deg;scale:1.06;animation-play-state:paused}
@keyframes houle{0%,100%{translate:0 0}50%{translate:0 -6px}}
.st b{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.92;
  font-size:clamp(22px,2vw,30px);letter-spacing:.005em}
.st b.br{font-family:var(--brush);font-weight:400;font-size:clamp(30px,2.8vw,44px);line-height:.9}
.st span{font-size:12.5px;line-height:1.3;max-width:17ch;opacity:.86}
.st svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
/* les formes */
.st-rond{width:clamp(138px,11vw,158px);aspect-ratio:1;border-radius:50%;padding:18px}
.st-ovale{width:clamp(170px,14vw,196px);aspect-ratio:1.35;border-radius:50%;padding:16px 20px}
.st-pilule{border-radius:var(--r-pill);padding:16px 28px}
.st-carre{width:clamp(140px,11vw,160px);aspect-ratio:1;border-radius:26px}
.st-etiquette{border-radius:14px 40px 40px 14px;padding:16px 30px 16px 36px}
.st-etiquette::before{content:'';position:absolute;left:13px;top:50%;width:10px;height:10px;
  margin-top:-5px;border-radius:50%;background:#1592A6;box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
/* Le soleil : deux couches decoupees, la blanche un peu plus grande
   dessous, pour garder le liseré d'autocollant que clip-path rognerait. */
.st-soleil{width:clamp(168px,13vw,190px);aspect-ratio:1;padding:34px;isolation:isolate;
  background:none;box-shadow:none;filter:drop-shadow(0 8px 10px rgba(8,40,60,.26))}
.st-soleil::before,.st-soleil::after{content:'';position:absolute;z-index:-1;clip-path:polygon(50% 0,59% 13%,75% 7%,77% 23%,93% 25%,87% 40%,100% 50%,87% 60%,93% 75%,77% 77%,75% 93%,59% 87%,50% 100%,41% 87%,25% 93%,23% 77%,7% 75%,13% 60%,0 50%,13% 40%,7% 25%,23% 23%,25% 7%,41% 13%)}
.st-soleil::before{inset:-7px;background:#fff}
.st-soleil::after{inset:0;background:#FFCC33}
.st-sceau{width:clamp(132px,10.4vw,150px);aspect-ratio:1;border-radius:50%;padding:18px;
  background:radial-gradient(circle,#FFAE4D 0 58%,#FF7A1A 59% 100%);color:var(--ink)}
.st-sceau::after{content:'';position:absolute;inset:9px;border-radius:50%;border:1.5px dashed rgba(30,42,90,.4)}
/* les couleurs */
.st-grad{background:var(--grad);--encre:#fff}
.st-nuit{--fond:var(--ink);--encre:var(--sand);
  box-shadow:0 0 0 5px #fff,0 0 0 9px rgba(255,174,77,.55),0 10px 22px rgba(8,40,60,.3)}
.st-nuit .br{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.st-rose{--fond:#FF5D8F;--encre:#fff}
.st-creme{--fond:#FFF6E6}
.st-blanc{--fond:#fff;--encre:#1592A6}
.st-encre{--fond:#FFF6E6;box-shadow:0 0 0 5px #fff,inset 0 0 0 2px var(--ink),0 10px 18px rgba(8,40,60,.28)}
.st-corail{--fond:#FF6B4A;--encre:#fff}
.st-etiquette{--fond:#fff}
.st-lien{display:flex;rotate:-3deg}
.stk-tout{display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;
  box-shadow:0 0 0 5px #fff,0 10px 18px rgba(8,40,60,.28);padding:15px 28px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--sand);font-family:var(--disp);font-weight:800;
  text-transform:uppercase;font-size:clamp(18px,1.6vw,23px);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.stk-tout:hover{transform:translateY(-3px);background:#141d44}
.stk-tout svg{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.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 . mise a plat sur le degrade, comme sur la table au
   deballage. Chaque piece a son ruban adhesif ecrit a la main ; la piece
   absente est un contour en pointilles. En bureau, les pieces sont
   posees en desordre controle sur une grille de 12 ; en mobile, elles
   s'alignent par deux. */
.boite{position:relative;margin-top:clamp(44px,7vh,84px);border-radius:calc(var(--r) * 1.6);
  background:var(--grad);color:var(--ink);overflow:hidden;isolation:isolate;
  padding:clamp(26px,3vw,48px) clamp(20px,3vw,48px) clamp(34px,4vw,60px)}
.boite::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(60% 80% at 22% 30%,rgba(255,236,190,.55),transparent 70%)}
.boite-t{font-family:var(--disp);font-weight:800;text-transform:uppercase;color:#fff;
  font-size:clamp(46px,5.6vw,90px);line-height:.86}
.boite-t .bc{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.boite-plat{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:center;gap:clamp(10px,1.4vw,22px);margin-top:clamp(6px,1vh,14px)}
.bp{position:relative;display:grid;justify-items:center;gap:14px}
.bp-prod{grid-column:1 / span 4;grid-row:1 / span 2}
.bp-prod img{width:100%;height:auto;rotate:-6deg;filter:drop-shadow(0 22px 22px rgba(90,30,0,.30))}
.bp-cable{grid-column:5 / span 3;grid-row:1}
.bp-carte{grid-column:8 / span 3;grid-row:1}
.bp-notice{grid-column:6 / span 3;grid-row:2}
.bp-non{grid-column:9 / span 3;grid-row:2}
.ruban{display:inline-block;white-space:nowrap;padding:6px 14px 7px;rotate:var(--r);
  background:rgba(255,250,236,.86);box-shadow:0 2px 6px rgba(90,30,0,.14);
  font-family:var(--script);font-size:clamp(19px,1.6vw,24px);line-height:1;color:var(--ink);
  clip-path:polygon(2% 0,98% 4%,100% 92%,1% 100%,0 50%)}
.ruban-non{background:rgba(30,42,90,.86);color:var(--sand)}
.cable{width:min(100%,250px);height:auto;rotate:8deg;overflow:visible;
  filter:drop-shadow(0 10px 10px rgba(90,30,0,.26))}
.cable .fil{fill:none;stroke:#FFF8EE;stroke-width:10;stroke-linecap:round}
.cable .usb{fill:#FFF8EE;stroke:rgba(30,42,90,.18);stroke-width:1}
.carton{position:relative;display:grid;align-content:start;gap:8px;width:min(100%,180px);
  aspect-ratio:1.45;padding:16px 18px;border-radius:10px;background:#FFF8EE;rotate:7deg;
  box-shadow:0 14px 18px rgba(90,30,0,.24)}
.carton img{width:62px;height:auto}
.carton i{font-family:var(--script);font-style:normal;font-size:26px;line-height:1;color:var(--mango)}
.carton em{display:block;height:5px;border-radius:3px;background:rgba(30,42,90,.14)}
.carton em:nth-of-type(2){width:72%}.carton em:nth-of-type(3){width:48%}
.depliant{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;
  width:min(100%,170px);aspect-ratio:1.25;padding:16px 18px;rotate:-5deg;color:var(--ink);
  background:linear-gradient(90deg,#FFF8EE 0 49.6%,#F1E6D3 50% 100%);border-radius:4px;
  box-shadow:0 14px 18px rgba(90,30,0,.22)}
.depliant b{font-family:var(--brush);font-weight:400;font-size:52px;line-height:.8;color:var(--mango)}
.depliant small{font-weight:700;font-size:12px;line-height:1.15;text-transform:uppercase;letter-spacing:.06em}
.absent{display:grid;place-items:center;width:clamp(96px,8vw,118px);aspect-ratio:1;border-radius:22px;
  border:2.5px dashed rgba(30,42,90,.55);rotate:-4deg}
.absent svg{width:46%;height:46%;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.75}

@media(max-width:980px){
  .boite-plat{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(22px,4vw,34px)}
  .bp-prod{grid-column:1 / -1;grid-row:auto}
  .bp-prod img{width:min(78%,380px)}
  .bp-cable,.bp-carte,.bp-notice,.bp-non{grid-column:auto;grid-row:auto}
  .carton,.depliant{width:min(86%,160px)}
  .ruban{font-size:17px;padding:5px 10px 6px}
}
@media(max-width:520px){
  .st-rond,.st-carre,.st-sceau{width:132px}
  .st-soleil{width:156px;padding:30px}
  .st-ovale{width:166px}
  .st span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .st,.stk::before,.stk::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}
.ugc-ig{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:11px 18px 11px 13px;border-radius:var(--r-pill);font-size:14px;font-weight:600;
  box-shadow:inset 0 0 0 1.4px rgba(242,227,201,.3);transition:background .3s,box-shadow .3s}
.ugc-ig svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ugc-ig:hover{background:var(--grad);box-shadow:none}
.ugc-ig .ph{color:var(--sand)}

.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 . une conversation (voir le commentaire du bloc)
   ========================================================================== */
/* FAQ . une conversation. A gauche le titre et les pastilles de
   questions, de quatre couleurs douces ; a droite une fenetre de
   discussion marine ou la question part en bulle degradee et ou Mango
   repond en bulle creme, apres trois points qui tapent. */
.qa{background:linear-gradient(180deg,var(--sand) 0%,#F7E7CC 100%)}
/* L'attribut hidden doit gagner sur les display des bulles. */
.qa [hidden]{display:none!important}
.qa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:start}
.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,18px);line-height:1.5;
  color:var(--ink-60);max-width:34ch}
.qa-puces{list-style:none;display:flex;flex-wrap:wrap;gap:10px 10px;margin-top:clamp(22px,3.4vh,34px)}
.qa-puce{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:11px 17px 11px 12px;border-radius:var(--r-pill);background:var(--c,#FFF6E6);color:var(--ink);
  font:600 15px/1.1 var(--body);box-shadow:0 0 0 1.5px rgba(30,42,90,.10);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .3s}
.qa-puces li:nth-child(4n+1) .qa-puce{--c:#FFF6E6}
.qa-puces li:nth-child(4n+2) .qa-puce{--c:#FFE7A3}
.qa-puces li:nth-child(4n+3) .qa-puce{--c:#FFD3DF}
.qa-puces li:nth-child(4n+4) .qa-puce{--c:#C6EEF1}
.qa-puce em{display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;
  background:rgba(30,42,90,.10);font-style:normal;font-size:11px;font-weight:700}
.qa-puce:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 8px 16px rgba(30,42,90,.12)}
.qa-puce[aria-pressed="true"]{background:var(--ink);color:var(--sand);box-shadow:none}
.qa-puce[aria-pressed="true"] em{background:var(--grad);color:#fff}
.qa-puce:focus-visible{outline:2px solid var(--mango);outline-offset:3px}
.qa-autre{background:transparent!important;box-shadow:inset 0 0 0 1.6px var(--ink)!important}
.qa-autre:hover{background:var(--grad)!important;color:#fff;box-shadow:none!important}

.qa-chat{position:sticky;top:clamp(96px,13vh,130px);border-radius:28px;background:var(--ink);
  color:var(--sand);padding:clamp(18px,2vw,26px);box-shadow:0 30px 60px rgba(30,42,90,.22);
  isolation:isolate;overflow:hidden}
.qa-chat::before{content:'';position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;z-index:-1;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,26,.30),transparent 72%)}
.qa-chat-t{display:flex;align-items:center;gap:12px;padding-bottom:16px;
  border-bottom:1px solid rgba(242,227,201,.14)}
.qa-av{position:relative;width:46px;aspect-ratio:1;border-radius:50%;background:#2a3870;display:grid;place-items:center}
.qa-av img{width:120%;max-width:none;height:auto;animation:tourne 26s linear infinite}
.qa-av::after{content:'';position:absolute;right:0;bottom:2px;width:11px;height:11px;border-radius:50%;
  background:#5BD68A;box-shadow:0 0 0 2.5px var(--ink)}
.qa-chat-t b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1}
.qa-chat-t span{font-family:var(--script);font-size:18px;color:rgba(242,227,201,.66)}
.qa-fil{display:grid;gap:12px;padding:20px 0 6px;min-height:clamp(260px,34vh,360px);align-content:start}
.qa-paire{display:grid;gap:12px}
.bulle{max-width:88%;padding:13px 17px;border-radius:20px;font-size:15.5px;line-height:1.55}
.bulle-moi{justify-self:end;background:var(--grad);color:#fff;font-weight:600;border-bottom-right-radius:6px}
.bulle-mango{justify-self:start;background:#FFF6E6;color:var(--ink);border-bottom-left-radius:6px}
.bulle-mango p{margin:0}
.bulle-mango a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--mango);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.qa-paire.entre .bulle-moi{animation:monte .35s cubic-bezier(.2,.8,.2,1) both}
.qa-paire.entre .bulle-mango{animation:monte .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes monte{from{opacity:0;translate:0 12px}}
.qa-tape{display:inline-flex;gap:5px;padding:16px 18px}
.qa-tape i{width:7px;height:7px;border-radius:50%;background:var(--ink-60);animation:tape 1s ease-in-out infinite}
.qa-tape i:nth-child(2){animation-delay:.15s}.qa-tape i:nth-child(3){animation-delay:.3s}
@keyframes tape{0%,60%,100%{translate:0 0;opacity:.5}30%{translate:0 -5px;opacity:1}}
.qa-pied{margin-top:14px;padding-top:14px;border-top:1px solid rgba(242,227,201,.14);
  font-size:13.5px;color:rgba(242,227,201,.66)}
.qa-pied a{color:var(--sand);text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .qa-grid{grid-template-columns:1fr}
  .qa-chat{position:relative;top:auto}
  .qa-fil{min-height:0}
}
@media(max-width:520px){
  .qa-puce{font-size:14px;padding:10px 14px 10px 10px}
  .bulle{max-width:94%}
}
@media(prefers-reduced-motion:reduce){
  .qa-av img,.qa-tape i,.qa-paire.entre .bulle-moi,.qa-paire.entre .bulle-mango{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}
}