/* ── POLICES, HEBERGEES ICI ─────────────────────────────────────────
   Jusqu'au 15 octobre les quatre polices venaient de Google, en deux
   allers-retours enchaines : le navigateur demandait une feuille de
   style a fonts.googleapis.com, qui lui indiquait ou chercher les
   fichiers sur fonts.gstatic.com. Mesure sous 4G lente : feuille a
   748 ms, polices entre 2 744 et 3 170 ms, et la page Professionnels
   passait de 2,37 s a 2,77 s a cause de cette chaine.

   Les quatre familles sont sous SIL Open Font License 1.1 — dossier
   `ofl` du depot officiel google/fonts —, qui autorise l'hebergement
   sur son propre serveur.

   DOUZE fichiers et non dix-huit. Jost est une police VARIABLE : un
   seul fichier porte les graisses 300 a 500, et Google le sert trois
   fois sous la meme adresse. Idem pour l'italique de Cormorant
   Garamond, 300 et 400. Declarer une plage `font-weight:300 500`
   plutot que trois graisses separees evite de telecharger trois fois
   le meme fichier : 52 Ko economises sur une page courante.

   Seuls latin et latin-ext sont repris — ni cyrillique, ni
   vietnamien, ni symboles. Les plages de caracteres sont celles de
   Google, telles quelles : ce sont elles qui font que latin-ext
   n'est telecharge que si la page contient un de ses caracteres.

   font-display:swap conserve : le texte s'affiche tout de suite dans
   une police systeme, puis bascule.                                 */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap;
  src:url('polices/cormorant-garamond-italique-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 400;font-display:swap;
  src:url('polices/cormorant-garamond-italique-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('polices/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('polices/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('polices/lora-italique-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('polices/lora-italique-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/lora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/yeseva-one-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:swap;
  src:url('polices/yeseva-one-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* ── ECHELLE DES TITRES ─────────────────────────────────────────
     Une seule echelle pour tout le site depuis le 15 octobre. Avant,
     91 declarations portaient 30 valeurs differentes, reparties sur
     treize paliers de largeur : entre 36, 37 et 38 px aucun oeil ne
     lit une hierarchie, et sur trois pages le titre de page etait
     plus PETIT que ses propres titres de section.
     Grand ecran : echelle C. Telephone : echelle B, choisies par
     Francois le 15 octobre sur la page d'essai.
     Les ecrans du panier et de l'espace client gardent leurs propres
     tailles : ce sont des formulaires dans un panneau, pas des pages
     editoriales, et ils sont deja coherents entre eux.            */
  --t1:44px;   /* titre de page            */
  --t2:29px;   /* titre de section         */
  --t3:24px;   /* encadre, sous-titre      */
  --t4:19px;   /* titre de carte           */

  --dis:'Yeseva One',Georgia,serif; --disI:'Cormorant Garamond',Georgia,serif;
  --navy:#1F2C4E;
  --navy2:#18233F;
  --ivory:#F4F1EA;
  --ivory2:#EAE5DA;
  --brass:#C2AA7E; --brass2:#9C8657;
  --onNavy:#C3C8D6;
  --onIvory:#55586A;
  --faintN:#7F879C;
  --faintI:#9A9A9E;
  --lineN:rgba(244,241,234,.16);
  --lineI:rgba(31,44,78,.15);
  --lineI2:rgba(31,44,78,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

body{background:var(--ivory);color:var(--navy);
  font-family:'Lora',Georgia,serif;font-size:16px;line-height:1.7}
.dis{font-family:var(--dis);font-weight:400}
.sn{font-family:'Jost',system-ui,sans-serif}

/* ══ barre de pilotage ══ */
#bar{position:fixed;top:0;left:0;right:0;z-index:9999;background:#131724;color:#D8DCE6;
  font-family:'Jost',sans-serif;font-size:12.5px;display:flex;align-items:center;gap:12px;
  height:54px;padding:0 16px;overflow-x:auto}
#bar::-webkit-scrollbar{display:none}
#bar .lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6F7689;white-space:nowrap}
#bar .grp{display:flex;gap:2px}
#bar .grp button{padding:7px 14px;color:#98A0B2;border-radius:3px;white-space:nowrap;transition:.15s}
#bar .grp button:hover{color:#D8DCE6;background:#1C2233}
#bar .grp button.on{background:#D8DCE6;color:#131724}
#bar .sep{width:1px;height:22px;background:#242B3D;flex:none}
#bar .hint{font-size:10.5px;color:#5B6274;margin-left:auto;white-space:nowrap}
@media(max-width:900px){#bar .lbl,#bar .hint{display:none}}

#stage{padding-top:0}
.view{display:none}
.view.on{display:block}

/* ══ sections ══ */
.nv{background:var(--navy);color:var(--ivory)}
.nv .k{color:var(--brass)}
.nv p{color:var(--onNavy)}
.iv{background:var(--ivory);color:var(--navy)}
.iv .k{color:var(--faintI)}
.iv p{color:var(--onIvory)}
.k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:18px;font-weight:400}
h2{font-family:var(--dis);font-size:var(--t2);font-weight:400;line-height:1.16;
  letter-spacing:-.01em;margin-bottom:18px}
h2 em{font-style:italic;color:var(--brass)}
.lead{font-size:16px;line-height:1.85;max-width:600px}

/* ══ en-tête ══ */
.util{background:var(--navy);color:var(--brass);text-align:center;padding:10px;
  font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.26em;text-transform:uppercase}
header{background:var(--ivory);border-bottom:1px solid var(--lineI);position:sticky;top:0;z-index:40}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:18px 56px;gap:26px}
/* Pas de mix-blend-mode ici : les deux logos ont une couche alpha, et
   le melange les ferait disparaitre sur tout fond sombre des qu'un
   ancetre cree un contexte d'empilement. */
.brand img{height:52px}
nav{display:flex;gap:28px;font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
nav a:hover{border-bottom-color:var(--navy)}
.tools{display:flex;gap:16px;align-items:center;font-family:'Jost',sans-serif;font-size:11.5px}
.mkt{border:1px solid var(--lineI);padding:6px 11px;font-size:10.5px;letter-spacing:.1em}
.mkt em{font-style:normal;color:var(--faintI)}
/* ── selecteur de langue ── */
.lang{display:inline-flex;align-items:center;gap:7px;font-family:'Jost',sans-serif;
  font-size:10.5px;letter-spacing:.14em}
.lang button{background:none;border:none;padding:2px 1px;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:var(--faintI);transition:color .25s}
.lang button:hover{color:var(--navy)}
.lang button.on{color:var(--navy);border-bottom:1px solid var(--brass);cursor:default}
.lang em{font-style:normal;color:var(--lineI)}
.mnav .mfoot .lang button{color:var(--onNavy)}
.mnav .mfoot .lang button.on{color:var(--ivory);border-bottom-color:var(--brass)}
.mnav .mfoot .lang em{color:var(--lineN)}

/* ══ bandeau pays ══ */
.geo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 56px;
  border-bottom:1px solid var(--lineI);font-size:14px;background:var(--ivory2)}
.geo .msg{flex:1;min-width:250px;color:var(--onIvory)}
.geo b{font-weight:400;color:var(--navy);border-bottom:1px solid var(--navy)}
.geo .acts{display:flex;gap:8px}
.geo button{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--navy);padding:9px 16px;transition:.2s}
.geo button:hover{background:var(--navy);color:var(--ivory)}
.geo button.gh{border-color:var(--lineI);color:var(--faintI)}
.geo.hide{display:none}

/* ══ hero ══ */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px;align-items:center}
.hero .t{padding:0 56px}
.hero h1{font-family:var(--dis);font-size:var(--t1);font-weight:400;line-height:1.08;
  margin-bottom:22px;letter-spacing:-.015em}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero p{font-size:16.5px;line-height:1.85;max-width:420px;margin-bottom:34px}
.hero .niche{align-self:center;justify-self:center;position:relative;
  width:470px;height:470px;max-width:calc(100% - 44px);
  display:flex;align-items:center;justify-content:center;
  padding:11px;background:radial-gradient(ellipse at 50% 42%,#2B3A63 0%,var(--navy) 72%)}
.hero .niche .plate{background:linear-gradient(170deg,#F7F4ED,#E2DCCE);padding:38px;
  box-shadow:0 34px 90px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.hero .niche .plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.btn{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid currentColor;padding:14px 30px;display:inline-block;transition:.2s}
.iv .btn:hover{background:var(--navy);color:var(--ivory)}
.nv .btn{border-color:var(--brass);color:var(--brass)}
.nv .btn:hover{background:var(--brass);color:var(--navy)}
/* les CTA de la landing ne sont ni dans .iv ni dans .nv : aucune regle
   de survol ne les atteignait. */
.btn.plein{border-color:var(--navy);color:var(--navy)}
.btn.plein:hover{background:var(--navy);color:var(--ivory)}

/* ══ axes ══ */
.fams{display:flex;border-bottom:1px solid var(--lineI);background:var(--ivory);
  position:sticky;top:76px;z-index:30}
.fams button{flex:1;padding:22px 6px;font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--onIvory);
  border-right:1px solid var(--lineI2);position:relative;transition:.2s}
.fams button:last-child{border-right:none}
.fams button:hover{color:var(--navy)}
.fams button.on{color:var(--navy)}
.fams button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brass)}
/* tri par type : meme gabarit que les liens « Plus d'infos » de la landing,
   filet deploye de gauche a droite au survol, filet plein quand actif. */
.ftri{display:flex;flex-wrap:wrap;gap:28px;margin-top:22px}
.ftri button{position:relative;background:none;border:none;padding:0 0 4px;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass2);transition:color .25s}
.ftri button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ftri button:hover{color:var(--navy)}
.ftri button:hover::after{transform:scaleX(1);transform-origin:left center}
.ftri button.on{color:var(--navy);cursor:default}
.ftri button.on::after{background:var(--brass);transform:scaleX(1)}
@media(max-width:820px){.ftri{gap:18px}}

.shead .axis{padding:16px 0 0;border:none;background:none}
.axis{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 56px;
  border-bottom:1px solid var(--lineI);font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase}
.axis .lb{color:var(--faintI)}
.axis button{color:var(--onIvory);border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s}
.axis button.on{color:var(--navy);border-bottom-color:var(--brass)}

/* ══ répertoire ══ */
section{padding:92px 56px;scroll-margin-top:160px}
.shead{margin-bottom:56px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 40px}
.fr{display:block}
.fr .im{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:26px;
  margin-bottom:9px;background:var(--ivory2);transition:padding .45s ease}
.fr:hover .im{padding:12px}
.fr .im img{max-height:100%;width:auto;mix-blend-mode:multiply}
/* les 12 packshots fragrance sont detoures (masque alpha + ombre douce) :
   le multiply les ternirait et n'a plus d'objet. Body Care reste en multiply. */
.fr .im img[src*="/fragrances/"],
.same .im img[src*="/fragrances/"],
.niche .plate img[src*="/fragrances/"],
.lh-v .plate img[src*="/fragrances/"]{mix-blend-mode:normal}
.fr .fm{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:4px;color:var(--faintI)}
.fr h3{font-family:var(--dis);font-size:25px;font-weight:400;margin-bottom:7px;
  transition:color .3s}
.fr:hover h3{color:var(--brass)}
.fr .ds{font-size:13px;line-height:1.75;color:var(--onIvory);margin-bottom:14px}
/* pyramide olfactive : trois lignes, le palier a gauche, les matieres a
   droite. Un filet separe la carte de son prix. */
.fr .pyr{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
/* ── alignement des pyramides ──
   les descriptifs n'ont pas le meme nombre de lignes : sans cela, chaque
   pyramide demarre a une hauteur differente sur la rangee. Chaque carte
   occupe cinq rangees de la grille mere et les partage avec ses voisines.
   Repli pour les navigateurs sans subgrid : une hauteur plancher de quatre
   lignes sur le descriptif. */
.fr .ds{min-height:calc(13px * 1.75 * 4)}
@supports(grid-template-rows:subgrid){
  .grid > .fr{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:0}
  .fr .ds{min-height:0}
}
@media(max-width:1100px){.fr .ds{min-height:calc(13px * 1.75 * 5)}}

/* ── cartes fragrance en une colonne ──
   Le carre du packshot faisait 390 px de haut : douze cartes donnaient
   12 000 px de defilement. Hauteur reduite, blocs resserres, et un
   separateur a losange entre deux cartes puisque la grille n'a plus de
   colonnes pour les distinguer. */
@media(max-width:840px){
  .grid{gap:0}
  /* Carte collante : la suivante vient recouvrir la precedente, comme
     les rubriques de « Choisir un contenant ». Fond opaque obligatoire,
     sinon on voit au travers. Pas de z-index : une carte positionnee
     sans z-index ne cree pas de contexte d'empilement, et le
     mix-blend-mode des packshots survit. */
  .grid > .fr{display:block;grid-row:auto;padding:17px 0 19px;
    position:-webkit-sticky;position:sticky;top:var(--colleF);
    background:var(--ivory)}
  /* Visuel carre, celui d'avant la reduction d'octobre. */
  .fr .im{aspect-ratio:1/1;height:auto;padding:16px;margin-bottom:9px}
  .fr .fm{margin-bottom:5px}
  .fr h3{font-size:23px;margin-bottom:5px}
  .fr .ds{min-height:0;margin-bottom:9px}
  .fr .pyr{gap:2px 12px}
  /* Le losange separateur n'a plus lieu d'etre : les cartes ne se
     suivent plus, elles se remplacent. Un filet haut suffit a marquer
     l'arrivee de la suivante. */
  .grid > .fr + .fr{border-top:1px solid var(--lineI)}
}

/* Point de collage des cartes fragrance. Meme logique que --colle pour
   les rubriques de contenant : il suit la hauteur du bandeau. */
.grid{--colleF:88px}
@media(max-width:1380px){ .grid{--colleF:80px} }
.fr .pyr dt{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);padding-top:2px}
.fr .pyr dd{font-size:12.5px;line-height:1.55;color:var(--onIvory)}
/* la carte est deja un lien : le CTA est un repere visuel, pas un second
   lien imbrique, ce que le HTML interdit. */
.fr .ck{display:inline-block;position:relative;align-self:start;margin-top:14px;
  padding:0 0 3px;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);transition:color .25s}
.fr .ck::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.fr:hover .ck{color:var(--navy)}
.fr:hover .ck::after{transform:scaleX(1);transform-origin:left center}
.fr .pr{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.06em;color:var(--onIvory)}

/* ══ formats ══ */
.formats{border-top:1px solid var(--lineI);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.formats div{padding:44px 26px;border-right:1px solid var(--lineI2);text-align:center}
.formats div:last-child{border-right:none}
.formats h4{font-family:var(--dis);font-size:21px;margin-bottom:8px}
.formats p{font-family:'Jost',sans-serif;font-size:12px;color:var(--onIvory);line-height:1.65}


/* ── fiche appareil ─────────────────────────────────────────────── */
.appsel{margin:26px 0 0}
.appsel .k2{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faintI);margin-bottom:9px}
.appsel .row{display:grid;grid-template-columns:1fr;border:1px solid var(--lineI2)}
.appsel .row > button{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:10px;
  width:100%;text-align:left;padding:13px 15px;background:none;border:0;cursor:pointer;
  border-top:1px solid var(--lineI2);font:inherit;color:inherit}
.appsel .row > button:first-child{border-top:0}
.appsel .row > button .n{font:400 15px/1.25 'Lora',Georgia,serif}
.appsel .row > button .m{display:block;font:400 11.5px/1.4 'Jost',sans-serif;color:var(--faintI);
  letter-spacing:.02em;margin-top:3px}
.appsel .row > button .p{font:400 13px/1 'Jost',sans-serif;white-space:nowrap}
.appsel .row > button[aria-pressed="true"]{background:#fff;box-shadow:inset 2px 0 0 var(--navy)}
.appsel .row > button:hover{background:#fff}

.fragsel .rubf{border:1px solid var(--lineI2)}
.fragsel .rubf + .rubf{border-top:0}
.fragsel .rubf .ttl{font:400 10px/1 'Jost',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faintI);padding:11px 15px 10px;
  border-bottom:1px solid var(--lineI2);background:#fbf9f6}
.fragsel .rubf > button{display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:10px;width:100%;text-align:left;padding:12px 15px;background:none;border:0;
  cursor:pointer;font:inherit;color:inherit;border-top:1px solid var(--lineI2)}
.fragsel .rubf > button:first-of-type{border-top:0}
.fragsel .rubf > button .n{font:400 15px/1.25 'Lora',Georgia,serif}
.fragsel .rubf > button .m{display:block;font:400 11.5px/1.4 'Jost',sans-serif;
  color:var(--faintI);letter-spacing:.02em;margin-top:3px}
.fragsel .rubf > button .p{font:400 13px/1 'Jost',sans-serif;white-space:nowrap}
.fragsel .rubf > button[aria-pressed="true"]{background:#fff;box-shadow:inset 2px 0 0 var(--navy)}
.fragsel .rubf > button:hover{background:#fff}


/* ── selection multi-lignes ──────────────────────────────────────── */
.lrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:11px 15px;border-top:1px solid var(--lineI2);transition:background .2s}
.lrow:first-child{border-top:0}
.lrow.pr{grid-template-columns:42px 1fr auto auto}
.lrow.on{background:#fff;box-shadow:inset 2px 0 0 var(--navy)}
.lrow .tx{min-width:0}
.lrow .n{display:block;font:400 15px/1.3 'Lora',Georgia,serif}
.lrow .m{display:block;font:400 11.5px/1.4 'Jost',sans-serif;color:var(--faintI);
  letter-spacing:.02em;margin-top:3px}
.lrow .p{font:400 13px/1 'Jost',sans-serif;white-space:nowrap;color:var(--onIvory)}
.lrow .pw{display:flex;align-items:center;justify-content:center;color:var(--navy);opacity:.8}
.lrow .pw .pic{display:block;width:42px;height:42px}
.lrow .pw svg{width:100%;height:100%}

/* pastilles de finition posees sur la ligne de l'appareil */
.pmini{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap}
@media(max-width:620px){ .lrow.pr .pmini{margin-top:6px} }
.pmini button{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.18);
  padding:0;cursor:pointer;transition:box-shadow .2s}
.pmini button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ivory),0 0 0 3px var(--navy)}
.pmini em{font:400 11px/1 'Jost',sans-serif;font-style:normal;color:var(--faintI);
  letter-spacing:.03em}

/* compteur */
.selq{display:inline-flex;align-items:center;border:1px solid var(--lineI2);
  background:var(--ivory)}
.selq button{width:30px;height:30px;border:0;background:none;cursor:pointer;
  font:400 15px/1 'Jost',sans-serif;color:var(--navy);padding:0;transition:background .2s}
.selq button:hover:not(:disabled){background:rgba(31,44,78,.07)}
.selq button:disabled{color:var(--faintI);cursor:default}
.selq b{min-width:24px;text-align:center;font:400 13px/1 'Jost',sans-serif;
  color:var(--onIvory)}
.selq.on{border-color:var(--navy);background:#fff}
.selq.on b{font-weight:500}
.selq.no{opacity:.45}

/* Rupture de stock. Elle prend la place exacte du compteur pour que la
   ligne ne se deforme pas, et reste lisible plutot que discrete : c'est
   l'information que le client cherche. */
.selrup{display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 10px;border:1px solid var(--lineI2);
  background:rgba(31,44,78,.045);font:400 10px/1.2 'Jost',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faintI);
  text-align:center}

/* recapitulatif */
.rcp2{margin:24px 0 0;border:1px solid var(--navy);background:#fff;padding:0 0 2px}
.rcp2 .rt{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 16px;border-bottom:1px solid var(--lineI2);
  font:400 10px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--navy)}
.rcp2 .rt .nb{color:var(--faintI);letter-spacing:.08em}
.rcp2 .lr{display:grid;grid-template-columns:1fr auto auto 28px;align-items:baseline;
  gap:12px;padding:10px 16px;border-top:1px solid var(--lineI2)}
.rcp2 .lr:first-of-type{border-top:0}
.rcp2 .lr .nm{font:400 14px/1.35 'Lora',Georgia,serif}
.rcp2 .lr .qq{font:400 11.5px/1 'Jost',sans-serif;color:var(--faintI);white-space:nowrap}
.rcp2 .lr .pt{font:400 13px/1 'Jost',sans-serif;white-space:nowrap}
.rcp2 .lr .x{border:0;background:none;cursor:pointer;color:var(--faintI);
  font:400 17px/1 'Jost',sans-serif;padding:0;transition:color .2s}
.rcp2 .lr .x:hover{color:var(--navy)}
.rcp2 .tot{display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 16px;border-top:1px solid var(--navy);margin-top:2px;
  font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.rcp2 .tot .v{font:400 19px/1 'Jost',sans-serif;letter-spacing:.02em;
  text-transform:none;color:var(--navy)}

@media(max-width:620px){
  /* Trois colonnes conservees : picto, texte, compteur. Seul le prix
     descend sous le texte — a 360 px il ne tient pas sur la ligne du
     nom sans ecraser le compteur. */
  .lrow{grid-template-columns:1fr auto;gap:10px;row-gap:6px;padding:13px 14px}
  .lrow.pr{grid-template-columns:38px 1fr auto;column-gap:11px}
  .lrow .p{grid-column:1;order:3;justify-self:start}
  .lrow .selq{order:2;align-self:center}
  .lrow.pr .pw{grid-row:1/span 2;align-self:center}
  .lrow.pr .tx{grid-row:1;grid-column:2}
  .lrow.pr .p{grid-row:2;grid-column:2;order:0}
  .lrow.pr .selq{grid-row:1/span 2;grid-column:3;align-self:center}
  .rcp2 .lr{grid-template-columns:1fr 28px;row-gap:4px}
  .rcp2 .lr .nm{grid-column:1}
  .rcp2 .lr .x{grid-row:1;grid-column:2}
  .rcp2 .lr .qq,.rcp2 .lr .pt{grid-column:1;justify-self:start}
  .rcp2 .lr .pt{grid-row:2;grid-column:2;justify-self:end}
}
.mlist a.acc{opacity:.72}
/* ── bandeau collant en mobile ─────────────────────────────────────
   Le flou est porte par .hrow et non par <header> : backdrop-filter
   cree un bloc englobant pour les descendants fixed, et le tiroir
   .mnav, qui est un descendant du header, cesserait de couvrir
   l'ecran. .hrow et .mnav sont freres. */
@media(max-width:840px){
  header{position:-webkit-sticky;position:sticky;top:0;z-index:40;background:transparent;
    border-bottom:0}
  /* Logo centre sur la largeur du bandeau. Positionnement absolu et non
     colonne de grille : le burger (34 px) et les outils (124 px) n'ont
     pas la meme largeur, et une grille a trois colonnes egales ferait
     deborder les outils avant de centrer le logo. */
  .hrow{position:relative}
  .hrow .brand{position:absolute;left:50%;transform:translateX(-50%)}
  /* Le logo est centre sur la largeur du bandeau, les outils colles a
     droite : entre 400 et 500 px, « FR » venait toucher le logo — 1 px
     d'ecart mesure a 430. On resserre les gouttieres des outils plutot
     que de deplacer « FR », qui est le premier enfant d'un groupe cale
     a droite : lui donner une marge a gauche ne le bougerait pas d'un
     pixel. Six pixels gagnes sur chacune des deux gouttieres, donc
     douze pour « FR », et le picto comme le panier ne bougent pas. */
  .hrow .tools{gap:8px}
  .hrow .lang{gap:5px}
  /* Sous 400 px le selecteur de langue chevauchait le logo centre. Il
     reste accessible dans le tiroir, qui le porte deja en pied. */
  @media(max-width:400px){ .tools .lang{display:none} }
  .hrow{background:rgba(244,241,234,.82);
    -webkit-backdrop-filter:blur(14px) saturate(1.08);
    backdrop-filter:blur(14px) saturate(1.08);
    border-bottom:1px solid rgba(31,44,78,.07)}
  /* La ou le flou n'existe pas, le texte defilerait au travers. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .hrow{background:rgba(244,241,234,.96)}
  }
}

/* ── rubriques collantes, mobile ──────────────────────────────────
   L'intitule tient le haut de l'ecran tant que sa rubrique defile, puis
   la rubrique suivante le chasse. Comportement natif de position:sticky,
   dont le bloc englobant est .rubf.
   top:-1px n'est pas un reglage esthetique : il fait sortir l'intitule
   d'un pixel hors du cadre, ce qui permet a l'observateur de detecter
   l'etat colle. Sans ce pixel, le rapport d'intersection reste a 1. */
/* Le point de collage depend du bandeau : il est collant en desktop
   (89 px au plus large, 81 px ensuite) et statique sous 840 px. Un
   intitule cale a 0 passerait sous le bandeau en desktop. */
.fragsel .rubf{--colle:88px}
@media(max-width:1380px){ .fragsel .rubf{--colle:80px} }
/* 80 px : hauteur du bandeau mobile, desormais collant. */
@media(max-width:840px){ .fragsel .rubf{--colle:80px} }

.fragsel .rubf.sep{margin-top:22px}
/* Le bloc entier est collant, pas seulement son intitule : la rubrique
   suivante vient recouvrir la precedente. -webkit-sticky pour Safari
   avant la version 13, qui ignore la valeur non prefixee. */
.fragsel .rubf{position:-webkit-sticky;position:sticky;top:var(--colle);
  background:var(--ivory)}
/* Sans fond opaque, le bloc recouvert reste visible au travers. */
.fragsel .rubf .ttl{background:#fbf9f6}
/* Les blocs se suivent sans ecart : un intervalle laisserait voir le
   bloc precedent entre deux recouvrements. */
.fragsel .rubf.sep{margin-top:0;border-top:0}
/* Le dernier bloc n'a rien pour le recouvrir : une respiration en
   dessous evite qu'il colle au bloc suivant de la page. */
.fragsel{padding-bottom:10px}
@media(prefers-reduced-motion:reduce){
  .fragsel .rubf .ttl{transition:none}
}

.fb .ver{font-style:normal;margin-left:14px;opacity:.45;letter-spacing:.12em}
.colsel{margin:22px 0 0}
.colsel .pastilles{display:flex;gap:10px;align-items:center}
.colsel button{width:27px;height:27px;border-radius:50%;border:1px solid var(--lineI2);
  cursor:pointer;padding:0;position:relative}
.colsel button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--ivory),0 0 0 2px var(--navy)}
/* Finition sans aucun parfum commandable : barree, et non effacee.
   Une pastille pale se lit comme une autre couleur, pas comme une
   indisponibilite ; la barre, elle, ne laisse pas de doute et garde
   la teinte reelle de l'appareil. Elle reste cliquable, et son
   infobulle dit « Bientot de retour ». */
.colsel button.colrup{opacity:.5}
.colsel button.colrup::after{content:'';position:absolute;left:50%;top:-4px;bottom:-4px;
  width:1.5px;background:var(--navy);opacity:.6;transform:rotate(45deg)}
/* Choisie malgre tout — le client a le droit de la regarder — elle
   remonte : une pastille selectionnee doit rester lisible. */
.colsel button.colrup[aria-pressed="true"]{opacity:.8}
.colsel .nomcol{font:400 12px/1 'Jost',sans-serif;color:var(--faintI);letter-spacing:.04em;
  margin-left:4px}

.accf{margin:24px 0 0;border-top:1px solid var(--lineI2)}
.accf>button{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:14px 0;background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  border-bottom:1px solid var(--lineI2)}
.accf>button .t{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.accf>button .s{font:400 12px/1 'Jost',sans-serif;color:var(--faintI)}
.accf .corps{display:none;padding:14px 0 4px}
.accf.on .corps{display:block}
.accf .liste{display:grid;grid-template-columns:repeat(2,1fr);gap:1px 18px}
.accf .liste > button{display:flex;justify-content:space-between;gap:8px;width:100%;
  text-align:left;padding:7px 0;background:none;border:0;cursor:pointer;font:inherit;
  color:inherit;border-bottom:1px solid transparent}
.accf .liste > button .fn{font:400 14px/1.3 'Lora',Georgia,serif}
.accf .liste > button .ff{font:400 10.5px/1 'Jost',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faintI);align-self:center}
.accf .liste > button[aria-pressed="true"] .fn{position:relative}
.accf .liste > button[aria-pressed="true"] .fn::after{content:'';position:absolute;left:0;right:0;
  bottom:-3px;height:1px;background:var(--brass)}
.accf .liste > button:hover{background:#fff}

.apptx{max-width:720px}
.apptx p{margin:0 0 14px}
.apptx h3{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:26px 0 10px}
.apptx ul{margin:0;padding-left:18px}
.apptx li{margin:0 0 7px}
/* Prix a droite du nom, aligne sur sa ligne de base et justifie au bord
   droit de la colonne. En Lora comme le titre : en Jost il lisait comme
   un ticket de caisse a cote d'un nom en serif. */
.pdp .ligne1{display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  flex-wrap:wrap}
.pdp .ligne1 .px{display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  margin-left:auto;text-align:right}
.pdp .ligne1 .px .n{font:400 40px/1 var(--dis);color:var(--navy);letter-spacing:.005em}
.pdp .ligne1 .px .d{font:400 11.5px/1 'Jost',sans-serif;letter-spacing:.22em;
  color:var(--brass)}
@media(max-width:620px){
  /* En colonne, le prix repasse a la ligne et chevauchait le sur-titre.
     On le pose a gauche, sous le nom, avec son propre espace. */
  .pdp .ligne1{display:block}
  .pdp .ligne1 .px{margin:10px 0 12px;justify-content:flex-start}
  .pdp .ligne1 .px .n{font-size:30px}
}

/* Le texte editorial tient en quatre lignes, le reste se deplie. Un
   max-height en em plutot qu'un line-clamp : le bloc contient plusieurs
   paragraphes et une liste, que -webkit-line-clamp ne sait pas couper. */
.tx4{position:relative;overflow:hidden;max-height:7.4em;transition:max-height .35s ease}
.tx4::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3em;
  background:linear-gradient(to bottom,rgba(250,248,244,0),var(--ivory));pointer-events:none}
.tx4.ouvert{max-height:none}
.tx4.ouvert::after{display:none}
.txplus{display:inline-block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);position:relative}
.txplus::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .3s ease}
.txplus:hover::after{transform:scaleX(1);transform-origin:left center}
.pdp .apptx h3{margin-top:18px}
.pdp .apptx p,.pdp .apptx li{font-size:15px;line-height:1.7}

.accf .liste > button .sel{font:400 10.5px/1 'Jost',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faintI);align-self:center;position:relative}
.accf .liste > button:hover .sel{color:var(--navy)}
.accf .liste > button[aria-pressed="true"] .sel{color:var(--brass)}

/* Recapitulatif avant achat : double controle, les trois valeurs telles
   qu'elles partiront dans la commande. */
.rcp{margin:22px 0 0;padding:13px 16px;border:1px solid var(--lineI2);background:#fff}
.rcp .lb{font:400 10px/1 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faintI);display:block;margin-bottom:6px}
.rcp .vl{font:400 15px/1.4 'Lora',Georgia,serif;color:var(--navy)}
.manque{margin:22px 0 0;font:400 13px/1.5 'Jost',sans-serif;color:var(--faintI)}
.manque b{color:var(--navy);font-weight:400}

.specsI{margin-top:30px;border-top:1px solid var(--lineI2);max-width:720px}
.specsI div{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--lineI2)}
.specsI .lb{font:400 10px/1.5 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faintI)}
.specsI .vl{font:400 14px/1.5 'Jost',sans-serif;color:var(--navy)}
@media(max-width:840px){
  .accf .liste{grid-template-columns:1fr}
  .specsI div{grid-template-columns:1fr;gap:3px;padding:10px 0}
}

/* ══ Body Care — reprise de la plaquette ══ */
/* ── bandeau Body Care ──
   Deux colonnes sur fond bleu nuit : le texte a gauche, les flacons a
   droite. Le visuel est aligne en bas et deborde volontairement la
   hauteur du bandeau — un flacon coupe par le bas se lit comme pose sur
   une table, un flacon entier flotte. */
.bcm{display:grid;grid-template-columns:1.08fr .92fr;gap:0 48px;
  align-items:stretch;padding:0 0 0 56px;overflow:hidden}
.bcm .t{padding-top:46px}
.bcm .t{padding-bottom:50px;max-width:620px;align-self:center}
.bcm h1{font-size:var(--t1);line-height:1.1;margin:6px 0 20px}
.bcm p{color:var(--onNavy);line-height:1.9;font-size:15px;margin-bottom:16px;max-width:56ch}
.bcm blockquote{border-left:2px solid var(--brass);padding-left:22px;margin-top:26px;
  font-family:var(--disI);font-style:italic;font-size:19px;line-height:1.55;color:var(--ivory)}
/* Photo de la plaquette, non retouchee : elle a son propre decor, donc
   elle remplit sa moitie au lieu de flotter comme un packshot detoure. */
/* La photo est positionnee en absolu dans son cadre : en flux, son
   rapport portrait 672x1428 imposait sa hauteur a toute la bande, qui
   passait a 1 267 px. En absolu elle ne pese plus sur la grille et c'est
   le texte qui donne la hauteur. */
.bcm .ph{align-self:stretch;position:relative;overflow:hidden;min-height:430px}
.bcm .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 56%;display:block}

@media(max-width:1080px){
  .bcm{grid-template-columns:1fr .86fr;gap:0 28px;padding:40px 0 0 30px}
.bcm .ph{min-height:380px}
}
@media(max-width:840px){
  /* Une colonne : le visuel passe sous le texte, plus bas et plus court,
     pour ne pas repousser le premier bloc de produits hors de l'ecran. */
  .bcm{grid-template-columns:1fr;gap:0;padding:0}
  .bcm .t{padding:34px 22px 0}
  .bcm .t{padding-bottom:26px;max-width:none}
.bcm p{font-size:14.5px}
  .bcm blockquote{font-size:17px;margin-top:22px}
  /* En mobile la photo n'est plus recadree : elle s'affiche entiere, a
     son rapport 672 x 1428. Un cadre de 320 px coupait le flacon sous le
     logo, et un recadrage plus bas aurait coupe le haut. Elle reprend
     donc sa place dans le flux, ou sa hauteur est la sienne. */
  .bcm .ph{min-height:0;height:auto;position:static}
  .bcm .ph img{position:static;width:100%;height:auto;object-fit:fill}
}

.bc-manif{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:560px;scroll-margin-top:160px}
.bc-manif .t{padding:0 56px}
.bc-manif h2{font-size:var(--t2);}
.bc-manif blockquote{border-left:2px solid var(--brass);padding-left:22px;margin-top:28px;
  font-style:italic;font-size:17px;line-height:1.75;color:var(--ivory)}
.bc-manif .ph{align-self:stretch;background:radial-gradient(ellipse at 50% 40%,#2C3B66,#18233F 74%);
  display:flex;align-items:center;justify-content:center;padding:56px}
.bc-manif .ph img{max-height:470px;width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}

.gestes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--lineN)}
.gestes div{padding:40px 28px 40px 0;border-right:1px solid var(--lineN)}
.gestes .vg{height:230px;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:22px}
.gestes .vg img{max-height:100%;width:auto}
.gestes div:last-child{border-right:none;padding-right:0}
.gestes h4{font-family:var(--dis);font-size:23px;margin-bottom:5px}
.gestes .sub{font-style:italic;color:var(--brass);font-size:14px;margin-bottom:14px}
.gestes p{font-size:13.5px;line-height:1.75}

/* ── engagements Body Care ──
   Texte a gauche en deux colonnes de deux, photo a droite qui file
   jusqu'au bord. Meme precaution que sur le bandeau du manifeste : la
   photo est en absolu dans son cadre, sinon son rapport portrait
   imposerait sa hauteur a toute la bande. */
/* padding:0 : la regle globale `section{padding:92px 56px}` encadrait
   la photo d'ivoire au lieu de la laisser filer jusqu'au bord. Le texte
   porte son propre retrait. */
.eng2{display:grid;grid-template-columns:1.22fr .78fr;gap:0;padding:0;
  align-items:stretch;background:var(--ivory);overflow:hidden}
.eng2 .t{padding:84px 56px}
.eng2 h2{font-size:var(--t2);line-height:1.14;margin:8px 0 46px;max-width:17ch}
.eng2 .e4{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 48px;max-width:780px}
.eng2 .e4 > div{border-top:1px solid var(--brass2);padding-top:18px}
.eng2 .e4 h4{font-family:var(--dis);font-size:19px;font-weight:400;line-height:1.3;
  color:var(--navy);margin-bottom:10px}
.eng2 .e4 p{font-size:14px;line-height:1.85;color:var(--onIvory)}
.eng2 .ph{position:relative;overflow:hidden;min-height:520px}
.eng2 .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 55%;display:block}

@media(max-width:1080px){
  .eng2{grid-template-columns:1fr .72fr}
  .eng2 .t{padding:62px 30px}
  .eng2 h2{margin-bottom:36px}
  .eng2 .e4{gap:32px 32px}
}
@media(max-width:840px){
  /* Une colonne, photo dessous et entiere : recadree, elle couperait les
     distributeurs, qui sont le sujet. */
  .eng2{grid-template-columns:1fr;padding:0}
  .eng2 .t{padding:56px 22px 40px}
  .eng2 h2{max-width:none}
  .eng2 .e4{grid-template-columns:1fr;gap:28px}
  .eng2 .ph{min-height:0;position:static}
  .eng2 .ph img{position:static;width:100%;height:auto;object-fit:fill}
}

/* Le bloc est sur fond bleu nuit, comme la page 5 de la plaquette.
   Le gabarit .sixsig a justement ete dessine pour ce fond : ses filets
   sont en --lineN et ses notes en laiton. */
.lead6{max-width:62ch;color:var(--onNavy);line-height:1.9;font-size:15px;margin-bottom:10px}
.sixsig a{transition:background .25s}
.sixsig a:hover{background:rgba(244,241,234,.05)}
/* Le nom glisse d'un cheveu au survol : le bloc n'a aucun visuel, il lui
   faut un signe qu'on peut cliquer. */
.sixsig a h4{display:inline-block;transition:transform .25s,color .25s}
.sixsig a:hover h4{transform:translateX(4px);color:var(--brass)}
/* « Consulter » en pied de chaque fragrance. Au doigt il n'y a pas de
   survol : sans ce libelle, rien ne disait que la ligne menait quelque
   part. Meme traitement que « Acheter » sur les cartes de format. */
.sixsig .cons{display:inline-block;margin-top:14px;font-family:'Jost',sans-serif;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s}
.sixsig a:hover .cons{border-bottom-color:var(--brass)}
@media(max-width:840px){
  .sixsig{grid-template-columns:1fr;gap:0;margin-top:34px}
  .lead6{font-size:14.5px}
}

.sixsig{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin-top:48px}
.sixsig a{padding:26px 0;border-top:1px solid var(--lineN);display:block}
.sixsig h4{font-family:var(--dis);font-style:italic;font-size:24px;margin-bottom:6px}
.sixsig .nt{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:10px}
.sixsig p{font-size:13.5px;line-height:1.75}

.engs{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:48px}
.engs h4{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;margin-bottom:10px;letter-spacing:.02em}
.engs p{font-size:13px;line-height:1.75}

/* ══ finder ══ */

/* ══ atelier ══ */
.sm{text-align:center;padding:104px 56px;scroll-margin-top:160px}
.sm h2{font-size:var(--t2);max-width:860px;margin:0 auto 18px}
.sm p{max-width:540px;margin:0 auto 34px}

/* ══ pied ══ */
footer{background:var(--navy2);color:var(--onNavy);padding:68px 56px 32px;
  font-family:'Jost',sans-serif;font-size:13px;font-weight:300}
footer .fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
footer img{height:52px;margin-bottom:16px}
footer h5{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);margin-bottom:15px;font-weight:400}
footer li{list-style:none;margin-bottom:9px}
footer .fb{border-top:1px solid var(--lineN);padding-top:22px;display:flex;
  justify-content:space-between;font-size:11px;color:var(--faintN)}

/* ══ fiche ══ */
.pdp{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:0 64px;
  padding:56px 56px 80px;align-items:start}
.pdp .niche{position:sticky;top:104px;aspect-ratio:1/1;
  background:radial-gradient(ellipse at 50% 42%,#2B3A63 0%,var(--navy) 74%);
  display:flex;align-items:center;justify-content:center;padding:11px}
.pdp .niche .plate{background:linear-gradient(170deg,#F7F4ED,#E2DCCE);padding:38px;
  box-shadow:0 26px 60px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.pdp .niche .plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* Faute de packshot generique, la fiche montre la silhouette du
   contenant. Trait leger et non remplissage : c'est une attente de
   visuel, pas un produit. */
.pdp .niche .plate .pic{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--navy);opacity:.26}
.pdp .niche .plate .pic svg{width:auto;height:84%;max-width:92%}
.pdp .inf{padding:0;max-width:620px}
.pdp-bc{grid-column:1/-1;margin-bottom:8px}
.same{border-top:1px solid var(--lineI);padding:70px 56px 90px;background:var(--ivory)}
.same .k{margin-bottom:26px;color:var(--faintI)}
.same .row{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.same .im{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:26px;
  background:var(--ivory2);transition:padding .45s ease}
.same a:hover .im{padding:14px}
.same .im img{max-height:100%;width:auto;mix-blend-mode:multiply}
.same h4{font-family:var(--dis);font-size:21px;font-weight:400;margin:14px 0 4px}
/* Trois notes principales sur une ligne, sans intitules : la pyramide
   complete est sur la fiche de la fragrance, pas dans une suggestion. */
.same .nt{font-size:12.5px;color:var(--onIvory);line-height:1.6}
.same .nt .fm{display:block;color:var(--faintI);margin-bottom:7px}
.same .nt .n3{display:block;font-size:12.5px;line-height:1.6}
@media(max-width:620px){ .same .nt .n3{font-size:12px} }
.bc{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faintI);margin-bottom:26px}
.pdp h1{font-family:var(--dis);font-size:var(--t1);font-weight:400;line-height:1.06;margin-bottom:10px}
.pdp .fmb{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin-bottom:26px}
.pdp .ds{font-size:17px;line-height:1.85;color:var(--onIvory);margin-bottom:34px}
.pyr{border-top:1px solid var(--lineI);margin-bottom:34px}
.pyr div{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--lineI2)}
.pyr .lb{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faintI);padding-top:5px}
.pyr .vl{font-size:15.5px}
.fmtsel{margin-bottom:26px}
.fmtsel .ttl{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faintI);margin-bottom:14px}
.fmtsel label{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:12px 16px;border:1px solid var(--lineI2);margin-bottom:-1px;cursor:pointer;transition:.15s}
/* fente a hauteur fixe : les pictos y sont posés par le bas, donc leurs
   lignes de sol s'alignent d'une ligne a l'autre quelle que soit la taille */
.fmtsel .fpic{flex:0 0 64px;display:flex;align-items:flex-end;justify-content:center}
.fmtsel .fpic .pi{height:100%;width:100%;color:var(--brass2);transition:color .3s}
.fmtsel label:hover .pi{color:var(--navy)}
.fmtsel label.sel .pi{color:var(--navy)}
.fmtsel .n{flex:1}
.fmtsel label:hover{border-color:var(--lineI)}
.fmtsel label.sel{border-color:var(--navy);position:relative;z-index:2}
.fmtsel .n{font-size:14.5px}
.fmtsel .d{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--faintI);display:block;margin-top:3px}
.fmtsel .p{font-family:'Jost',sans-serif;font-size:13px;white-space:nowrap}
.cta{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.cta .add{flex:1;text-align:center;background:var(--navy);color:var(--ivory);padding:16px;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase}
.ship{font-family:'Jost',sans-serif;font-size:12.5px;color:var(--onIvory);margin-bottom:24px}
.ship b{color:var(--navy);font-weight:400}
.ship a{border-bottom:1px solid var(--lineI)}
.orig{border-top:1px solid var(--lineI);padding-top:22px;font-size:13.5px;color:var(--onIvory);line-height:1.8}
.orig b{color:var(--navy);font-weight:400}

/* ══ note ══ */
#anno{position:fixed;bottom:0;left:0;right:0;z-index:999;background:#131724;color:#98A0B2;
  font-family:'Jost',sans-serif;font-size:11.5px;padding:8px 18px;display:flex;
  justify-content:space-between;gap:18px;align-items:center}
#anno b{color:var(--brass)}
#anno button{border:1px solid #242B3D;padding:4px 10px}
#anno.hide{display:none}


/* ══ bandeau de navigation entre maquettes ══ */


/* ══ outil de sélection — phrase à trous ══ */
.tool{padding:52px 56px 46px;border-bottom:1px solid var(--lineI)}
.tool .sent{font-family:var(--dis);font-size:38px;font-weight:300;
  line-height:1.65;letter-spacing:-.01em;max-width:1020px}
.tool .slot{position:relative;display:inline-block}
.tool .slot > button{font-family:var(--dis);font-size:38px;font-weight:300;
  color:var(--brass);border-bottom:1px solid var(--brass);padding:0 4px;line-height:1.2}
.tool .slot > button::after{content:' ▾';font-size:15px;vertical-align:middle;opacity:.6}
.tool .slot.unset > button{color:var(--faintI);border-bottom-style:dashed}
.tool .menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:25;min-width:230px;
  background:#F4F1EA;border:1px solid var(--lineI);box-shadow:0 18px 44px rgba(31,44,78,.16)}
.tool .slot.open .menu{display:block}
.tool .menu button{display:block;width:100%;text-align:left;font-family:'Jost',sans-serif;font-size:14px;
  font-weight:300;padding:11px 18px;color:var(--onIvory);transition:.15s}
.tool .menu button:hover{background:rgba(31,44,78,.07);color:var(--navy)}
.tool .menu button.on{color:var(--navy)}
.tool .menu button.on::before{content:'— '}
.tool .fmtreco{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;
  background:rgba(31,44,78,.06);margin-top:32px;font-size:14px;line-height:1.7;max-width:1020px}
.tool .fmtreco .ic{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--brass);line-height:1}
.tool .fmtreco b{font-weight:400;color:var(--navy)}
.tool .fmtreco .why{display:block;color:var(--onIvory);font-size:13px;margin-top:4px}
.selcount{font-size:13px;color:var(--onIvory);margin-top:10px}
@media(max-width:840px){.tool{padding:38px 22px 34px}
  .tool .sent,.tool .slot > button{font-size:23px}.tool .menu{min-width:196px}}


/* — en-tête de feuille : masqué en desktop — */
.tool .menu .mh{display:none}
.tool .scrim{position:fixed;inset:0;background:rgba(23,21,15,.5);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:500}
.tool .scrim.on{opacity:0;pointer-events:none}

@media(max-width:840px){
  /* le menu devient une feuille qui monte du bas */
  .tool .scrim.on{opacity:1;pointer-events:auto}
  .tool .slot .menu{
    display:block;position:fixed;left:0;right:0;bottom:0;top:auto;
    min-width:0;width:100%;max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none;
    transform:translateY(100%);visibility:hidden;
    transition:transform .3s cubic-bezier(.32,.72,0,1),visibility .3s;
    z-index:510;padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -14px 44px rgba(23,21,15,.26);
  }
  .tool .slot.open .menu{transform:translateY(0);visibility:visible}
  .tool .menu .mh{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:24px 20px 14px;position:sticky;top:0;background:inherit;
  }
  .tool .menu .mh::before{
    content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:rgba(23,21,15,.2);
  }
  .tool .menu .mt{font-size:18px;white-space:nowrap;font-family:var(--dis)}
  .tool .menu .mx{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;padding:8px 2px}
  .tool .menu > button:not(.mx){min-height:56px;font-size:16px;padding:15px 20px}
}

@media(max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .formats,.gestes,.engs{grid-template-columns:repeat(2,1fr)}
  .gestes div{padding-right:28px;border-bottom:1px solid var(--lineN)}
}
@media(max-width:840px){
  nav{display:none}
  .hero,.pdp,.bc-manif,.sixsig{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .formats,.gestes,.engs{grid-template-columns:1fr}
  .gestes div{padding:26px 0;border-right:none}
  .fdr .qs{grid-template-columns:1fr}
  .fams{overflow-x:auto;position:static}
  .fams button{flex:none;padding:18px 20px;white-space:nowrap}
  .hrow,.geo,.axis,footer,section,.fdr,.sm{padding-left:22px;padding-right:22px}
  .hero .t,.bc-manif .t{padding:48px 22px}

  .pdp{padding:28px 22px 60px;gap:34px 0}
  .pdp .niche{position:static;padding:26px}
  .hero .niche{width:auto;height:auto;aspect-ratio:1/1;max-width:min(470px,calc(100% - 44px));
    margin:0 auto 48px;padding:11px}
  .bc-manif .ph{padding:44px 22px}
  .same{padding:50px 22px 70px}
  .same .row{grid-template-columns:1fr 1fr;gap:26px}
.pyr div{grid-template-columns:1fr;gap:4px}
  footer .fg{grid-template-columns:1fr 1fr}
}

/* ── calibrage Yeseva One ─────────────────────────────────────────────
   Yeseva One a une graisse apparente et une chasse supérieures à
   Playfair Display : sans correction les titres paraissent ~15% trop
   gros et trop serrés. On réduit la taille et on ouvre l'interlettrage. */
h2{font-size:var(--t2);letter-spacing:-.005em;line-height:1.14}
.hero h1{font-size:var(--t1);line-height:1.1;letter-spacing:-.005em}
.pdp h1{font-size:var(--t1);line-height:1.08}
.fr h3{font-size:22px}
.formats h4,.same h4{font-size:19px}
.gestes h4{font-size:21px}
.sixsig h4{font-size:22px}
.tool .sent,.tool .slot > button{font-size:33px;font-weight:400}
.fdr .res b{font-size:24px}
/* l'italique n'existe pas en Yeseva One : fonte compagne */
h2 em,.hero h1 em{font-family:var(--disI);font-style:italic;font-weight:400;
  font-size:1.14em;letter-spacing:0}
.sixsig h4{font-family:var(--disI);font-style:italic;font-size:26px}
@media(max-width:760px){

.tool .sent,.tool .slot > button{font-size:24px}
}

/* ══ entrée par le contenant / par la famille — pages secondaires ══ */
.fil{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faintN);margin-bottom:26px}
.fil a{color:var(--onNavy)} .fil a:hover{color:var(--brass)}
.fil em{font-style:normal;opacity:.45;margin:0 6px}
.phead{padding:52px 56px 72px}
.phead h1{font-family:var(--dis);font-size:var(--t1);font-weight:400;line-height:1.14;margin-bottom:18px}
.phead h1 em{font-family:var(--disI);font-style:italic;font-size:1.14em;color:var(--brass)}
.phead .lead{max-width:640px}
.specs{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--lineN)}
.specs div{padding:20px 42px 0 0;margin-right:42px;border-right:1px solid var(--lineN)}
.specs div:last-child{border-right:none;margin-right:0;padding-right:0}
.specs .lb{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faintN);display:block;margin-bottom:7px}
.specs .vl{font-family:'Jost',sans-serif;font-size:13.5px;color:var(--ivory)}
.csec{padding:84px 56px}
.csec.alt{background:var(--ivory2)}
.csec .note{font-family:'Jost',sans-serif;font-size:12.5px;color:var(--faintI);margin:-18px 0 30px}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--lineI2);border:1px solid var(--lineI2)}
.cgrid.four{grid-template-columns:repeat(4,1fr)}
.cgrid.mini{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media(max-width:1100px){.cgrid,.cgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.cgrid,.cgrid.four,.cgrid.mini{grid-template-columns:1fr}}
.cc{display:flex;flex-direction:column;background:var(--ivory);padding:30px 30px 30px;
  transition:background .3s}
.cc .vg{display:flex;align-items:center;justify-content:center;height:168px;margin:0 0 18px}
.cc .vg img{max-height:168px;max-width:76%;object-fit:contain;transition:transform .45s ease}
a.cc:hover .vg img{transform:scale(1.035)}
@media(max-width:700px){ .cc .vg{height:140px} .cc .vg img{max-height:140px} }
.csec.alt .cc{background:var(--ivory2)}
a.cc:hover{background:#fff}
.cc h3{font-family:var(--dis);font-size:21px;font-weight:400;margin-bottom:7px}
.cc .me{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faintI);margin-bottom:16px}
.cc p{font-size:14.5px;line-height:1.8;color:var(--onIvory);margin-bottom:20px}
.cc .ft{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--lineI2);
  font-family:'Jost',sans-serif;font-size:12px;color:var(--onIvory)}
/* Sous-titre du rituel : italique laiton, sous le nom du soin. Il
   remplace la ligne technique sur cette page seulement. */
/* ── rituel Body Care : blocs qui se recouvrent, mobile ──
   Meme mecanique que les rubriques de « Choisir un contenant » et les
   cartes de la page FRAGRANCES. Fond opaque obligatoire, et pas de
   z-index : une carte positionnee sans z-index ne cree pas de contexte
   d'empilement.
   Hauteurs egalisees en JavaScript plutot que rognage par clip-path :
   les quatre cartes ont la meme structure, l'ecart ne vient que de la
   longueur du texte. */
@media(max-width:840px){
  #vbody .cgrid.four > .cc{position:-webkit-sticky;position:sticky;
    top:var(--colleB,80px);background:var(--ivory)}
  #vbody .cgrid.four{--colleB:80px}
}

.cc .sub{font-family:var(--disI);font-style:italic;font-size:15px;
  color:var(--brass2);margin:2px 0 16px}
.cc.rit p{margin-bottom:22px}
@media(max-width:840px){ .cc .sub{font-size:14.5px;margin-bottom:13px} }

.cc .go{color:var(--brass2);letter-spacing:.06em}
/* Lien d'achat : un simple filet au survol. Pas une balise <a> — la
   carte entiere en est deja une, et imbriquer deux liens est invalide. */
.cc .ach{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s}
a.cc:hover .ach{border-bottom-color:var(--brass2)}

/* ══ CTA de la vignette contenant ══
   Filet seul. Au repos un trait laiton discret ; au survol un second trait
   navy se trace de gauche a droite par-dessus, en 0,45 s. Deux pseudo-
   elements plutot qu'une bordure animee : une bordure ne peut pas se
   tracer, seule une transformation le peut. */
.formats .go{display:inline-block;position:relative;margin-top:12px;
  padding:0 2px 8px;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);
  transition:color .35s ease,letter-spacing .45s cubic-bezier(.4,0,.2,1)}
.formats .go::before,.formats .go::after{content:'';position:absolute;
  left:0;right:0;bottom:0;height:1px}
.formats .go::before{background:currentColor;opacity:.4}
.formats .go::after{background:var(--navy);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.formats > a:hover .go{color:var(--navy);letter-spacing:.27em}
.formats > a:hover .go::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .formats .go,.formats .go::after{transition:none}
  .formats > a:hover .go{letter-spacing:.24em}
}
.cc.st{cursor:default}
.fgroup{margin-bottom:66px}
.fgroup:last-child{margin-bottom:0}
.fgt{font-family:var(--dis);font-size:22px;font-weight:400;margin-bottom:26px;
  padding-bottom:12px;border-bottom:1px solid var(--lineI2)}
/* cartes contenant de la page d'accueil, désormais cliquables */
.formats > a{display:block;padding:44px 26px;border-right:1px solid var(--lineI2);text-align:center;
  transition:background .3s}
.formats > a:last-child{border-right:none}
.formats > a:hover{background:var(--ivory2)}
/* (ancienne regle .formats .go retiree : remplacee par le bouton ci-dessus) */
@media(max-width:900px){
  .formats{grid-template-columns:1fr 1fr}
  .formats > a{border-bottom:1px solid var(--lineI2)}
}
@media(max-width:760px){
  .phead{padding:38px 22px 52px}
.csec{padding:56px 22px}
  .formats{grid-template-columns:1fr}
  .formats > a{border-right:none}
  .specs div{padding-right:26px;margin-right:26px}
}

/* contenances : groupe de références dans le sélecteur de la fiche */
.fgrp{border-top:1px solid var(--lineI2);padding-top:12px;margin-top:10px}
.fgrp:first-child{border-top:none;padding-top:0;margin-top:0}
.rub .ttl{margin-bottom:12px}
.specs .wide{flex-basis:100%;border-right:none;margin-right:0;padding-right:0}
.specs .tz b{font-weight:400;color:var(--brass)}
.specs .tz i{display:inline-block;width:1px;height:11px;background:var(--lineN);
  margin:0 14px;vertical-align:baseline}

/* ══ menu mobile ══ */
.burger{display:none;width:34px;height:34px;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;margin-left:-6px}
.burger i{display:block;width:20px;height:1px;background:var(--navy)}
.mnav{position:fixed;inset:0;z-index:60;background:var(--navy);color:var(--ivory);
  display:flex;flex-direction:column;padding:18px 22px 34px;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .32s ease,transform .32s ease,visibility .32s}
body.mnav-on .mnav{opacity:1;visibility:visible;transform:none}
.mnav .mtop{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:26px;border-bottom:1px solid var(--lineN)}
.mnav .mtop img{height:46px}
.mnav .mtop button{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass)}
.mnav .mlist{display:flex;flex-direction:column;gap:0;margin-top:14px;flex:1}
.mnav .mlist a{font-family:var(--dis);font-size:27px;line-height:1.1;padding:18px 0;
  border-bottom:1px solid rgba(244,241,234,.08)}
.mnav .mlist a:active{color:var(--brass)}
.mnav .mfoot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:22px;border-top:1px solid var(--lineN);
  font-family:'Jost',sans-serif;font-size:11.5px;color:var(--onNavy)}
.mnav .mfoot .mkt{border:1px solid var(--lineN);padding:6px 11px;font-size:10.5px;letter-spacing:.1em}
/* huit entrées : le bandeau se resserre avant de basculer en menu */
@media(max-width:1380px){
  nav{gap:15px;font-size:10.5px;letter-spacing:.08em}
  .hrow{padding-left:30px;padding-right:30px}
  .brand img{height:46px}
}
@media(max-width:1180px){
  .burger{display:flex}
  .hrow{justify-content:space-between}
  .brand img{height:44px}
  .tools .mkt{display:none}
}
@media(max-width:1180px){ nav{display:none} }
@media(min-width:1181px){ .mnav{display:none} }
@media(prefers-reduced-motion:reduce){ .mnav{transition:none} }

/* ══ bande des contenants — trois colonnes ══
   Six colonnes donnaient 220 px par carte : trop étroit pour des libellés
   de deux mots en display, trois titres passaient sur deux lignes et les
   lignes suivantes partaient en escalier. Trois colonnes règlent la cause.
   Les filets passent par le fond et un gap d'1 px : aucune rangée ne peut
   plus se retrouver sans séparateur, quel que soit le nombre de cartes. */
.formats{grid-template-columns:repeat(5,1fr);gap:1px;background:var(--lineI2);
  border-top:1px solid var(--lineI);border-bottom:1px solid var(--lineI2)}
.formats > a{border-right:none;background:var(--ivory);padding:24px 18px 20px;
  display:flex;flex-direction:column}
/* un descriptif sur deux lignes faisait descendre son CONSULTER :
   le lien est pousse en pied de carte, les cartes ont la meme hauteur. */
.formats > a p{margin-bottom:18px}
.formats > a .go{margin-top:auto}
.formats > a:hover{background:var(--ivory2)}
/* dix cartes : seuls 5, 2 et 1 evitent une rangee incomplete */
@media(max-width:1180px){ .formats{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .formats{grid-template-columns:1fr} }

/* ══ pictos de contenant ══
   Toutes les vignettes partagent la meme toile : il suffit de leur donner
   la meme hauteur pour que les rapports de taille soient exacts et que les
   lignes de sol tombent au meme endroit. Aucune mise a l'echelle ici. */
.formats .pic{display:block;height:92px;margin-bottom:10px}
.formats .pic .pi{height:100%;width:100%;display:block;
  /* laiton sombre au repos : le laiton clair de la charte est illisible
     en trait fin sur l'ivoire. Navy au survol = etat actif. */
  color:var(--brass2);transition:color .35s ease}
.formats > a:hover .pi{color:var(--navy)}
/* le picto est dessine a l'echelle du volume : a 100 ml le vaporisateur
   est deux fois plus petit que ses voisins. On le remonte pour la rangee,
   sans toucher au fichier commun. */
.formats > a[href="#c-vaporisateur"] .pic{overflow:hidden}
.formats > a[href="#c-vaporisateur"] .pi{transform:scale(1.34);transform-origin:center bottom}
@media(max-width:620px){ .formats .pic{height:80px;margin-bottom:10px}
  .formats > a{padding:22px 22px 20px} }
@media(prefers-reduced-motion:reduce){ .formats .pic .pi{transition:none} }

/* ══ en-tete de la bande des contenants ══
   Separe le repertoire des fragrances de la liste des contenants. Filet
   haut et rembourrage bas reduit : l'en-tete appartient a la bande qui
   la suit, pas a la section des fragrances qui la precede. */
.prodhead{border-top:1px solid var(--lineI);padding-top:86px;padding-bottom:0}
.prodhead .shead{margin-bottom:46px}
.prodhead .lead{margin-top:14px;max-width:560px}
@media(max-width:760px){ .prodhead{padding-top:58px} .prodhead .shead{margin-bottom:34px} }

/* ══════ Conseillez-moi — accordéon ══════
   Les données viennent de data.json, généré depuis APM-master-data.xlsx.
   Rien ici n'est écrit en dur, hors libellés d'interface. */
.adv .k{margin-bottom:14px}
.adv h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.22;margin-bottom:10px}
.adv h2 em{font-family:var(--disI);font-style:italic;font-weight:400}
.adv .intro{color:var(--onIvory);max-width:60ch;margin-bottom:26px}
.adv .q{border-top:1px solid var(--lineI2);padding:22px 0}
.adv .q .t{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:12px}
.adv .opts{display:flex;flex-wrap:wrap;gap:8px}
.adv .opts button{font-family:'Jost',sans-serif;font-size:13px;padding:9px 16px;
  border:1px solid var(--lineI);border-radius:2px;color:var(--onIvory);
  transition:background .2s,color .2s,border-color .2s}
.adv .opts button:hover{border-color:var(--brass2);color:var(--navy)}
.adv .opts button.on{background:var(--navy);border-color:var(--navy);color:var(--ivory)}

@keyframes advrev{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.adv .rev{animation:advrev .42s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){.adv .rev{animation:none}}

.adv .qc{display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;
  border-top:1px solid var(--lineI2);padding:16px 0;transition:background .2s}
.adv .qc:hover{background:rgba(31,44,78,.028)}
.adv .qc .t{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI);flex:0 0 150px}
.adv .qc .val{font-family:var(--dis);font-size:19px;color:var(--navy);flex:1;line-height:1.2}
.adv .qc .ch{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);white-space:nowrap;opacity:.75;transition:opacity .2s}
.adv .qc:hover .ch{opacity:1}
.adv .qc.fixe{cursor:default}
.adv .qc.fixe:hover{background:none}
.adv .qc.fixe .val{font-family:'Jost',sans-serif;font-size:13px;color:var(--faintI);font-style:italic}

.adv .res{margin-top:34px;border-top:1px solid var(--lineI);padding-top:30px}
.adv .pres{border:1px solid var(--lineI);border-radius:2px;overflow:hidden}
.adv .pres .hd{background:var(--navy);color:var(--ivory);padding:22px 30px;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.adv .pres .hd h3{font-family:var(--dis);font-weight:400;font-size:25px;line-height:1.2}
.adv .pres .hd .no{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-left:auto}
.adv .pres .hd .kk{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:#8A93A8;flex:1 0 100%;margin-bottom:-6px}
.adv .pres .bd{padding:28px 30px;background:var(--ivory)}
.adv .pres .desc{color:var(--onIvory);font-size:15.5px;max-width:66ch}
.adv .pres .no2{color:var(--onIvory);font-style:italic;max-width:66ch}
.adv .presc{margin-top:22px;background:#E3DDD0;padding:24px 26px;position:relative}
.adv .presc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brass)}
.adv .presc .pk{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:10px}
.adv .presc p{font-family:var(--disI);font-style:italic;font-size:20px;line-height:1.5;
  max-width:60ch;color:var(--navy)}

.adv .sect{margin-top:34px;padding:0 30px}
.adv .sect > .kk{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:16px;display:block}
.adv .rub{margin-bottom:22px}
.adv .rub .rt{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass2);padding-bottom:7px;
  border-bottom:1px solid var(--lineI2);margin-bottom:10px}
.adv .ln{display:flex;align-items:flex-end;gap:14px;padding:10px 0}
.adv .ln .n{flex:1;min-width:0}
.adv .ln .c{font-family:'Jost',sans-serif;font-size:12px;color:var(--faintI)}
.adv .ln .p{font-family:'Jost',sans-serif;font-size:13px;color:var(--brass2);white-space:nowrap}
/* gabarit commun des pictos : hauteur CSS égale = tailles relatives exactes.
   Sous 60px le trait passe sous le demi-pixel et le picto disparaît. */
.adv .pic{flex:0 0 76px;display:flex;align-items:flex-end;justify-content:center;color:var(--navy)}
.adv .pic svg{display:block;width:auto;height:100%}
.adv .alt{margin-top:16px;padding:18px 20px;border:1px solid var(--lineI);border-radius:2px}
.adv .alt .kk{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:8px;display:block}
.adv .alt p{color:var(--onIvory);font-size:15px}
.adv .vide{padding:22px;border:1px dashed var(--lineI);border-radius:2px;
  color:var(--onIvory);font-style:italic}
.adv .charge{color:var(--faintI);font-style:italic;padding:20px 0}
@media(max-width:620px){
  .adv .qc{flex-wrap:wrap;gap:4px 12px;padding:14px 0}
  .adv .qc .t{flex:1 0 100%}
  .adv .qc .val{font-size:17px;flex:1}
  .adv .pres .hd{padding:20px;gap:6px}
  .adv .pres .hd h3{font-size:23px}
  .adv .pres .hd .no{margin-left:0;flex:1 0 100%}
  .adv .pres .bd{padding:22px 20px}
  .adv .presc{padding:20px 18px}
  .adv .presc p{font-size:18px}
  .adv .pic{flex:0 0 42px}
  .adv .sect{padding:0 20px}
  .adv .ln{flex-wrap:wrap;gap:4px 12px}
  .adv .ln .n{flex:1 0 100%}
}

/* CTA du résultat : filet seul, animé au survol — variante retenue le 06/10 */
.adv .go{display:inline-block;position:relative;padding:0 2px 8px;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);
  transition:color .35s ease,letter-spacing .45s cubic-bezier(.4,0,.2,1)}
.adv .go::before,.adv .go::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px}
.adv .go::before{background:currentColor;opacity:.4}
.adv .go::after{background:var(--navy);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.adv .go:hover{color:var(--navy);letter-spacing:.27em}
.adv .go:hover::after{transform:scaleX(1)}

/* la page sélecteur réutilise .phead, comme les huit autres vues ;
   l'outil se cale dessous sans doubler le filet */
.phead.nv + .tool{padding-top:4px;border-bottom:none}
.phead.nv + .tool .q:first-child{border-top:none}

/* rappel du sélecteur en tête du catalogue : une ligne, pas une carte */
.advband{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:26px 56px;border-bottom:1px solid var(--lineI);transition:background .25s}
.advband:hover{background:#EFEBE1}
/* place sous la liste depuis le 9 oct. : il lui faut un peu d'air au-dessus */
.advband.bas{margin-top:52px;border-bottom:none}
/* ── jonction collection / diffusion ──
   178 px de vide separaient les deux sections. On les supprime et on garde
   le meme separateur que la landing : un filet et un losange laiton. */
#vfragrances #rep{padding-top:52px;padding-bottom:0}
@media(max-width:840px){#vfragrances #rep{padding-top:36px}}
#vfragrances .prodhead{position:relative;padding-top:62px}
/* le filet de la grille doublait le titre d'un trait inutile */
#vfragrances .formats{border-top:none}
/* la rangee ne compte plus que cinq cartes : a deux colonnes, la sixieme
   cellule reste vide et laisse voir le fond gris qui sert de filet.
   Cinq n'a que deux diviseurs, on passe donc de cinq colonnes a une. */
@media(max-width:1180px){#vfragrances .formats{grid-template-columns:repeat(5,1fr)}}
@media(max-width:780px){#vfragrances .formats{grid-template-columns:1fr}}
/* ecart picto -> titre reduit de moitie */
#vfragrances .formats .pic{margin-bottom:5px}
/* 70 px entre le titre et le premier picto : trop pour une seule rangee */
#vfragrances .prodhead .shead{margin-bottom:16px}
#vfragrances .prodhead::before{content:'';position:absolute;top:0;left:56px;right:56px;
  height:1px;background:var(--lineI);z-index:2}
#vfragrances .prodhead::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;
  width:8px;height:8px;background:var(--brass);transform:rotate(45deg);z-index:3;
  box-shadow:0 0 0 5px var(--ivory)}
@media(max-width:820px){
  #vfragrances .prodhead{padding-top:46px}
  #vfragrances .prodhead .shead{margin-bottom:10px}
  #vfragrances .prodhead::before{left:22px;right:22px}
}
.advband .t{font-family:var(--dis);font-size:21px;color:var(--navy)}
.advband .go{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);position:relative;padding-bottom:6px}
.advband .go::before,.advband .go::after{content:'';position:absolute;left:0;right:0;
  bottom:0;height:1px}
.advband .go::before{background:currentColor;opacity:.4}
.advband .go::after{background:var(--navy);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.advband:hover .go::after{transform:scaleX(1)}
@media(max-width:620px){
  .advband{padding:20px;gap:8px}
  .advband .t{font-size:18px;flex:1 0 100%}
}

/* ══ page d'accueil ══ gabarit propre, rien de .phead ══════════════ */
.lhero{display:grid;grid-template-columns:1fr 470px;gap:0 72px;align-items:center;
  padding:76px 56px 84px;max-width:1360px;margin:0 auto}
.lhero .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:22px}
.lhero h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.06;
  letter-spacing:-.01em;margin-bottom:26px}
.lhero h1 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.lhero .lead{font-size:17px;line-height:1.85;max-width:46ch;margin-bottom:38px}
.lh-acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.lh-acts .btn{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.lh-acts .btn:hover{background:transparent;color:var(--navy)}
.lh-acts .lnk{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);border-bottom:1px solid currentColor;
  padding-bottom:4px;transition:color .2s}
.lh-acts .lnk:hover{color:var(--navy)}
.lh-v .niche{width:470px;height:470px;max-width:100%;padding:11px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 42%,#2B3A63 0%,var(--navy) 72%)}
.lh-v .plate{width:100%;height:100%;padding:38px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(170deg,#F7F4ED,#E2DCCE);
  box-shadow:0 34px 90px rgba(0,0,0,.45)}
.lh-v .plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* trois portes */
.portes{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--lineI);border-bottom:1px solid var(--lineI)}
.porte{padding:40px 44px 44px;border-right:1px solid var(--lineI);transition:background .25s}
.porte:last-child{border-right:none}
.porte:hover{background:#EFEBE1}
.porte .p-n{font-family:var(--dis);font-size:23px;line-height:1.25;color:var(--navy);
  margin-bottom:14px}
.porte p{font-size:14.5px;line-height:1.8;color:var(--texte,inherit);margin-bottom:22px;min-height:78px}
.porte .go{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);position:relative;padding-bottom:6px}
.porte .go::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--navy);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
.porte:hover .go::after{transform:scaleX(1)}

/* quatre familles */
.lfam{padding:76px 56px 84px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:34px}
.fcard{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  min-height:170px;padding:26px 24px;background:var(--ivory2);transition:background .25s}
.fcard:hover{background:#E2DCCE}
.fc-n{font-size:21px;line-height:1.2;color:var(--navy)}
.fc-c{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass2)}

/* la maison */
.lmaison{display:grid;grid-template-columns:1.15fr 1fr;gap:0 72px;padding:84px 56px}
.lmaison h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.15;
  margin:14px 0 22px}
.lmaison h2 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.lmaison p{color:var(--onNavy);line-height:1.9;max-width:52ch;margin-bottom:32px}
.lm-c{list-style:none;align-self:center}
.lm-c li{padding:20px 0;border-top:1px solid var(--lineN)}
.lm-c li:last-child{border-bottom:1px solid var(--lineN)}
.lm-c b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:7px}
.lm-c span{font-size:14.5px;line-height:1.75;color:var(--onNavy)}

/* professionnels */
.lpro{padding:76px 56px 90px;border-top:1px solid var(--lineI)}
.lp-g{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:34px}
.lp-c{display:block;padding:34px 36px 38px;background:var(--ivory2);transition:background .25s}
.lp-c:hover{background:#E2DCCE}
.lp-c b{display:block;font-family:var(--dis);font-weight:400;font-size:22px;
  color:var(--navy);margin-bottom:12px}
.lp-c span{display:block;font-size:14.5px;line-height:1.8;margin-bottom:20px}
.lp-c .go{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:0}

@media(max-width:980px){
  .lhero{grid-template-columns:1fr;gap:48px;padding:52px 22px 60px}
.lh-v{order:-1}
  .lh-v .niche{width:auto;height:auto;aspect-ratio:1/1;max-width:min(470px,100%);margin:0 auto}
  .portes{grid-template-columns:1fr}
  .porte{border-right:none;border-bottom:1px solid var(--lineI);padding:30px 22px 34px}
  .porte p{min-height:0}
  .lfam,.lpro{padding:54px 22px 62px}
  .fgrid{grid-template-columns:1fr 1fr}
  .lmaison{grid-template-columns:1fr;gap:40px;padding:56px 22px}
.lp-g{grid-template-columns:1fr}
}
@media(max-width:620px){
.fgrid{grid-template-columns:1fr}
}
.chgp{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .2s}
.chgp:hover{border-bottom-color:currentColor}

/* ══ accueil — mise en page 2, 8 oct. ══════════════════════════════ */
.sld{position:relative;height:56vh;min-height:390px;max-height:620px;overflow:hidden}
.sld-v{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease-in-out}
.sld-v.on{opacity:1}
.sld-v img{width:100%;height:100%;object-fit:cover}
/* voile par le haut : il ne couvre que la zone du texte, la scene reste claire */
.sld-voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,44,78,.40) 0%,rgba(31,44,78,.10) 38%,transparent 60%)}
.sld-t{position:absolute;z-index:3;left:56px;top:4%;transform:none;
  max-width:42ch;color:var(--ivory)}
.sld-t .k{color:var(--brass)}
.sld-t h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.14;
  margin:0 0 30px}
.sld-t h1 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.sld-t .btn{border-color:var(--ivory)}
.sld-t .btn:hover{background:var(--ivory);color:var(--navy)}
.sld-p{position:absolute;z-index:4;left:56px;bottom:34px;display:flex;gap:9px}
.sld-p button{width:7px;height:7px;border-radius:50%;background:rgba(244,241,234,.42);
  padding:0;border:none;transition:.3s}
.sld-p button.on{background:var(--ivory);transform:scale(1.25)}

.lsec{padding:74px 56px}
.lhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:32px}
.lhead h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.16;margin-top:10px}
.lhead h2 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.lcartes{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.lcarte{background:var(--ivory2);transition:background .25s}
.lcarte:hover{background:#E2DCCE}
.lcarte img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px}
.lcarte .n{font-size:17px;padding:0 18px 4px;color:var(--navy)}
.lcarte .f{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass2);padding:0 18px 20px}
/* deux CTA empiles, meme gabarit : la largeur est celle du plus long */

.llarge{position:relative;height:460px;overflow:hidden}
.llarge > picture{display:block;width:100%;height:100%}
.llarge > img,.llarge > picture > img{width:100%;height:100%;object-fit:cover}
/* L'ENCART PASSE EN BLEU NUIT le 21 octobre, texte en ivoire. Il etait
   ivoire sur une photographie claire : le cadre se lisait mal et le
   bloc flottait. Le fond sombre le pose sur l'image, et tout ce qu'il
   contient doit suivre — le surtitre, le paragraphe et le bouton, qui
   portaient des couleurs faites pour un fond clair. */
/* TOUTE LA HAUTEUR DE LA SECTION, le 23 octobre. L'encart etait une
   carte flottante : 420 px de large, centree verticalement, detachee du
   bord droit de 56 px. Seul bloc du site construit ainsi — partout
   ailleurs (.lmoitie, .lsec) les pans de couleur vont d'un bord a
   l'autre et de haut en bas. Francois : « visuellement ca n'est pas
   coherent par rapport au reste du site ».
   On le colle au bord droit et on l'etire du haut vers le bas ; le
   contenu, lui, reste centre — d'ou le flex, qui remplace le translate
   devenu inutile. */
.lencart{position:absolute;right:0;top:0;bottom:0;
  width:420px;max-width:calc(100% - 44px);background:var(--navy);color:var(--ivory);
  padding:42px 38px;
  display:flex;flex-direction:column;justify-content:center}
.lencart .k{color:var(--brass)}
.lencart h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.18;
  margin:12px 0 16px;color:var(--ivory)}
.lencart h2 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.lencart p{font-size:15px;line-height:1.85;margin-bottom:24px;color:var(--onNavy)}
.lencart .btn.plein{border-color:var(--brass);color:var(--brass)}
.lencart .btn.plein:hover{background:var(--brass);color:var(--navy)}

.lmoitie{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.lmoitie .v{background:var(--ivory2);display:flex;align-items:center;justify-content:center;
  padding:52px;min-height:440px}
.lmoitie .v img{max-height:340px;width:auto}
.lmoitie .v.photo{padding:0}
.lmoitie .v.photo img{width:100%;height:100%;max-height:none;object-fit:cover}
/* bloc inverse : texte a gauche, image a droite. L'ordre DOM reste
   visuel-puis-texte pour que le mobile garde l'image en tete. */
.lmoitie.inv .v{order:2}
.lmoitie.inv .t{order:1}
.lmoitie .t{padding:66px 56px}
.lmoitie h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.18;margin:12px 0 18px}
.lmoitie h2 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.lmoitie p{line-height:1.9;max-width:44ch;margin-bottom:26px}

.llogos{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-bottom:26px}
.llogos span{background:rgba(244,241,234,.07);padding:20px 10px;text-align:center;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onNavy)}
.lp{max-width:58ch}

.lsante{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;
  padding:32px 56px;border-top:1px solid var(--lineI);border-bottom:1px solid var(--lineI)}
.lsante .t{font-family:var(--dis);font-size:19px;color:var(--navy)}
.lsante .n{display:flex;gap:10px}
.lsante .n span{border:1px solid var(--lineI);padding:8px 16px;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;color:var(--onIvory)}

@media(max-width:900px){
  .sld{height:48vh;min-height:320px}
  .sld-t{left:20px;right:20px;max-width:none;top:auto;transform:none;bottom:62px}
.sld-p{left:20px;bottom:26px}
  .lsec{padding:48px 22px}
  .lcartes{grid-template-columns:1fr 1fr}
  .llarge{height:auto}
  .llarge > picture{height:auto}
  .llarge > img,.llarge > picture > img{height:280px}
  /* DE BORD A BORD SUR MOBILE, le 23 octobre. Les 22 px de marge
     laterale faisaient flotter le pan comme une carte posee, seul de
     son espece : partout ailleurs (.lsec, .lmoitie .t) le fond va d'un
     bord a l'autre et le retrait est INTERIEUR. La marge passe donc
     dans le padding — 24 + 22 = 46 px — et le texte ne bouge pas d'un
     pixel. `max-width` est remis a plat : herite du bloc de bureau, il
     valait calc(100% - 44px) et aurait reintroduit la marge. */
  .lencart{position:static;transform:none;width:auto;max-width:none;
    margin:0;padding:32px 46px}
  .lmoitie{grid-template-columns:1fr}
  .lmoitie.inv .v,.lmoitie.inv .t{order:0}
  .lmoitie .t{padding:44px 22px}
  .lmoitie .v{min-height:300px;padding:34px}
.llogos{grid-template-columns:1fr 1fr 1fr}
  .lsante{padding:24px 22px;gap:16px}
}

/* ── accueil : resserrage et separateurs ─────────────────────────── */
/* la regle generale section{padding:92px 56px} s'ajoutait aux paddings
   de la landing : d'ou l'impression de blocs qui flottent. */
#vaccueil section{padding:0}
#vaccueil .lsec{padding:54px 56px 58px}
#vaccueil .lmoitie .t{padding:48px 56px}
#vaccueil .lmoitie{min-height:470px;align-items:stretch}
#vaccueil .lmoitie .v{min-height:0;height:100%;padding:42px}
#vaccueil .lmoitie .v.photo{padding:0;position:relative;overflow:hidden}
/* sans position absolue, la hauteur intrinseque de la photo imposait sa
   taille a la rangee : le bloc faisait le double des autres */
#vaccueil .lmoitie .v.photo img{position:absolute;inset:0;width:100%;height:100%;
  max-height:none;object-fit:cover}
#vaccueil .lmoitie .t{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start}  /* sinon les boutons s'etirent sur toute la colonne */
#vaccueil .llarge{height:420px}
#vaccueil .lsante{padding:26px 56px}

/* separateur : un filet qui s'arrete avant les marges, interrompu
   par un losange de laiton */
#vaccueil .lsec,#vaccueil .llarge,#vaccueil .lmoitie,#vaccueil .lsante{position:relative}
#vaccueil .lsec::before,#vaccueil .llarge::before,
#vaccueil .lmoitie::before,#vaccueil .lsante::before{
  content:'';position:absolute;top:0;left:56px;right:56px;height:1px;
  background:var(--lineI);z-index:2}
#vaccueil .lsec::after,#vaccueil .llarge::after,
#vaccueil .lmoitie::after,#vaccueil .lsante::after{
  content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;
  background:var(--brass);transform:rotate(45deg);z-index:3;
  box-shadow:0 0 0 5px var(--ivory)}
/* sur fond sombre, le filet et le halo changent de valeur */
#vaccueil .nv::before{background:var(--lineN)}
#vaccueil .nv::after{box-shadow:0 0 0 5px var(--navy)}
#vaccueil .llarge::after{box-shadow:0 0 0 5px var(--ivory)}
/* pas de separateur juste sous le diaporama */
#vaccueil .sld + .lsec::before,#vaccueil .sld + .lsec::after{display:none}

@media(max-width:900px){
  #vaccueil .lsec{padding:40px 22px 44px}
  #vaccueil .lmoitie{min-height:0}
  #vaccueil .lmoitie .t{padding:36px 22px}
  #vaccueil .lmoitie .v{min-height:260px;padding:28px}
  #vaccueil .llarge{height:auto}
  #vaccueil .lsante{padding:22px 22px}
  #vaccueil .lsec::before,#vaccueil .llarge::before,
  #vaccueil .lmoitie::before,#vaccueil .lsante::before{left:22px;right:22px}
}

/* bandeau conseil : la phrase guide d'achat reprise de l'ancien sélecteur */
@media(max-width:900px){
}

/* phrase cliquable du bandeau conseil */
@media(max-width:900px){
  /* en mobile le menu déborderait à droite : on le recale sur la colonne */
}


/* ── résultat du sélecteur : bloc agrandi ────────────────────────── */
.adv .pres.grand .bd{display:grid;grid-template-columns:300px 1fr;gap:0 34px;
  align-items:start;padding:30px}
.adv .pres.grand .vis{background:var(--ivory2);aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;padding:18px}
.adv .pres.grand .vis img{width:100%;height:100%;object-fit:contain}
.adv .pres.grand .txt{min-width:0}
.adv .pres.grand .desc{font-size:16.5px;line-height:1.85}
/* marqueur de maquette : visible, retire des que les textes sont valides */
.adv .presc.brn{position:relative;border-left:2px solid #C98A1E}
.adv .presc .brn-t{font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#8A5E00;background:#F6E7C6;border:1px solid #E0C58A;
  padding:3px 8px;margin-left:12px;white-space:nowrap;vertical-align:middle}
.adv .go.fiche{display:inline-block;margin-top:24px;font-family:'Jost',sans-serif;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass2);
  border:1px solid currentColor;padding:13px 26px;transition:.2s}
.adv .go.fiche:hover{background:var(--navy);border-color:var(--navy);color:var(--ivory)}

/* ── liste des formats : infos à gauche, prix et achat à droite ──── */
.adv .ln{display:flex;align-items:center;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--lineI2)}
.adv .ln:last-child{border-bottom:none}
.adv .ln .inf{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.adv .ln .inf .n{font-size:15.5px;color:var(--navy)}
.adv .ln .inf .c{font-family:'Jost',sans-serif;font-size:12px;color:var(--faintI)}
/* Réserve de couverture, sous la contenance : ce n'est pas une
   caractéristique mais un avertissement, d'où le laiton. */
.appsel .res-cv{display:block;font-family:'Jost',sans-serif;font-size:10.5px;
  line-height:1.45;color:var(--brass2);margin-top:4px}
.adv .ln .res-cv{display:block;font-family:'Jost',sans-serif;font-size:11px;
  line-height:1.45;color:var(--brass2);margin-top:3px;max-width:46ch}
.adv .ln .act{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  text-align:right;white-space:nowrap}
.adv .ln .act .p{font-family:'Jost',sans-serif;font-size:14px;color:var(--navy);
  letter-spacing:.02em}
/* « Acheter » est un <a> depuis le 14 octobre, plus un <button> :
   il mène à la fiche du parfum, contenant présélectionné. Le bouton
   avait ses marges à zéro par la règle globale sur button ; un lien,
   non — d'où le display:inline-block et le padding explicites. */
.adv .ln .buy{display:inline-block;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);background:none;border:none;padding:0 0 3px;
  cursor:pointer;position:relative}
.adv .ln .buy::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.adv .ln:hover .buy::after,.adv .ln .buy:hover::after{transform:scaleX(1);transform-origin:left center}
.adv .ln .buy:hover{color:var(--navy)}

@media(max-width:820px){
  .adv .pres.grand .bd{grid-template-columns:1fr;gap:24px;padding:22px 20px}
  .adv .pres.grand .vis{max-width:260px;margin:0 auto}
  /* en mobile la ligne reste sur un rang : picto etroit, prix a droite */
  .adv .ln{flex-wrap:nowrap;gap:12px}
  .adv .ln .inf{flex:1 1 auto}
  .adv .ln .inf .n{font-size:14.5px}
  .adv .ln .act{flex:0 0 auto;margin-left:auto}
  .adv .ln .act .p{font-size:13px}
}

/* ══ sur mesure : la methode en cinq etapes, version horizontale ══ */
/* titre et chapo resserres : 50 px d'ecart etaient trop lus comme une rupture */
#vaccueil .lsec.nv .lhead{margin-bottom:14px}
@media(max-width:820px){#vaccueil .lsec.nv .lhead{margin-bottom:30px}}
.lmeth{margin-top:38px}
.lmeth .rail{position:relative;height:1px;background:var(--lineN);margin-bottom:30px}
.lmeth .rail .fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--brass);
  transition:width 3.12s cubic-bezier(.22,.61,.36,1)}
.lmeth.go .rail .fill{width:100%}
.lmeth ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0 26px}
.lmeth li{position:relative;padding-right:18px;opacity:0;transform:translateY(16px);
  transition:opacity .84s ease,transform .84s cubic-bezier(.22,.61,.36,1)}
.lmeth.go li{opacity:1;transform:none}
.lmeth.go li:nth-child(1){transition-delay:.06s}
.lmeth.go li:nth-child(2){transition-delay:.42s}
.lmeth.go li:nth-child(3){transition-delay:.78s}
.lmeth.go li:nth-child(4){transition-delay:1.14s}
.lmeth.go li:nth-child(5){transition-delay:1.5s}
.lmeth .dot{position:absolute;left:0;top:-36px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--lineN);background:var(--navy);display:flex;
  align-items:center;justify-content:center;transition:border-color .5s}
.lmeth .dot i{width:3px;height:3px;border-radius:50%;background:var(--lineN);
  transition:background .5s,transform .5s}
.lmeth.go li:nth-child(1) .dot,.lmeth.go li:nth-child(2) .dot,
.lmeth.go li:nth-child(3) .dot,.lmeth.go li:nth-child(4) .dot,
.lmeth.go li:nth-child(5) .dot{border-color:var(--brass)}
.lmeth.go .dot i{background:var(--brass);transform:scale(1.6)}
.lmeth .num{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.26em;
  color:var(--brass);margin-bottom:10px}
.lmeth h3{font-family:var(--dis);font-weight:400;font-size:17.5px;line-height:1.3;
  color:var(--ivory);margin-bottom:9px}
.lmeth p{font-size:13.5px;line-height:1.75;color:var(--onNavy)}

/* ══ retour en haut de page ══
   Telephone seulement : au-dessus de 840 px le bandeau de navigation
   est visible en permanence et la molette remonte vite. Le bouton se
   pose au-dessus du contenu mais SOUS les surfaces qui se ferment
   elles-memes — menu mobile, tiroir du panier, fenetre destination —
   pour ne pas disputer le coin de l'ecran a leur propre bouton.
   Le retrait du bas suit la barre de l'iPhone : sans
   env(safe-area-inset-bottom) le bouton se loge dessous. */
.haut{display:none}
@media(max-width:840px){
  .haut{position:fixed;right:16px;z-index:400;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--brass);background:rgba(31,44,78,.92);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
  .haut.on{opacity:1;transform:none;pointer-events:auto}
  /* Le chevron est dessine, pas ecrit : aucune police a attendre, et
     il reste net a toutes les densites d'ecran. */
  .haut i{display:block;width:10px;height:10px;margin-top:3px;
    border-left:1.5px solid var(--brass);border-top:1.5px solid var(--brass);
    transform:rotate(45deg)}
  .haut:active{transform:scale(.94)}
  /* Le menu mobile pose une classe sur <body> ; le tiroir du panier et
     le tunnel, eux, n'en posent aucune — ils passent simplement
     au-dessus par leur z-index. On ne masque donc explicitement que le
     menu. Une regle sur une classe inexistante serait un leurre. */
  body.mnav-on .haut{opacity:0;pointer-events:none}
}
@media(max-width:840px) and (prefers-reduced-motion:reduce){
  .haut{transition:none}
}

/* ══ bande de references : defilement horizontal continu ══ */
.lmarq{background:var(--ivory);overflow:hidden}
#vaccueil .lmarq{padding:32px 0 36px}
.lmarq > .k{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI);padding:0 56px;margin-bottom:22px}
.lmarq .mq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lmarq .tr{display:flex;align-items:center;width:max-content;animation:lmq 64s linear infinite}
.lmarq:hover .tr{animation-play-state:paused}
.lmarq .lg{flex:0 0 auto;padding:0 38px;display:flex;align-items:center;justify-content:center}
.lmarq .lg img{height:46px;width:auto;max-width:152px;object-fit:contain;display:block;
  opacity:.9;transition:opacity .4s}
.lmarq .lg:hover img{opacity:1}
@keyframes lmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .lmarq .tr{animation:none}
  .lmarq .mq{overflow-x:auto}
  .lmeth li{opacity:1;transform:none}
  /* scaleY(1) en plus de la largeur : en mobile le trait se deplie par
     transformation, et sans cette ligne il resterait a zero. */
  .lmeth .rail .fill{transition:none;width:100%;transform:scaleY(1)}
}
@media(max-width:820px){
  .lmeth{position:relative;padding-left:32px}
  .lmeth ol{grid-template-columns:1fr;gap:30px}
  .lmeth .rail{position:absolute;left:5px;top:8px;bottom:8px;width:1px;height:auto;margin:0}
  /* Meme piege qu'au-dessus : en mobile ce trait-ci s'animait aussi en
     hauteur pourcentage. Il se deplie desormais par transformation. */
  .lmeth .rail .fill{width:1px;height:100%;transform:scaleY(0);transform-origin:top center;
    transition:transform 3.12s cubic-bezier(.22,.61,.36,1)}
  .lmeth.go .rail .fill{width:1px;height:100%;transform:scaleY(1)}
  .lmeth .dot{left:-32px;top:2px}
  .lmeth li{padding-right:0}
  .lmarq > .k{padding:0 22px}
  .lmarq .lg{padding:0 24px}
  #vaccueil .lmarq{padding:24px 0 28px}
  .lmarq .lg img{height:38px;max-width:118px}
}

/* ══ trois blocs carres : creatrice, atelier, normes ══════════════ */
.ltrois{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ltrois .lc{display:flex;flex-direction:column;padding:0 0 46px}
.ltrois .lc + .lc{border-left:1px solid var(--lineI)}
.ltrois .v{aspect-ratio:1/1;overflow:hidden;background:var(--ivory2);margin-bottom:28px}
.ltrois .v img{width:100%;height:100%;object-fit:cover;display:block}
.ltrois .v.nm{position:relative;display:flex;align-items:flex-end;justify-content:center;
  padding:0}
.ltrois .v.nm .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* les deux marques sont posees a meme la photo : le bas de l'image est
   uni, aucun cadre ni voile n'est necessaire. Le fichier IFRA a ete
   debarrasse de sa signature sur deux lignes, sinon les deux logos ne
   peuvent pas s'aligner optiquement. */
.ltrois .v.nm .bande{position:absolute;right:5%;bottom:4%;width:auto;background:none;
  border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2}
/* les deux fichiers sont normalises sur une toile carree identique :
   meme hauteur CSS = memes proportions et meme axe horizontal. */
.ltrois .v.nm .bande img{width:auto;height:104px;max-width:none;object-fit:contain}
/* contour ouvert : le centre optique de l'ifra est plus haut que son
   centre geometrique, on le redescend vers le reach. */
.ltrois .v.nm .bande img:first-child{transform:translateY(12px)}
.ltrois .k,.ltrois h2,.ltrois p,.ltrois .lk{margin-left:38px;margin-right:38px}
.ltrois .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:12px}
.ltrois h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.22;
  margin-bottom:16px}
.ltrois h2 em{font-family:var(--disI);font-style:italic;font-weight:400;color:var(--brass)}
.ltrois p{font-size:14.5px;line-height:1.85;margin-bottom:16px}
.ltrois .lk{align-self:flex-start;margin-top:auto;position:relative;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass2);padding:0 0 3px}
.ltrois .lk::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.ltrois .lc:hover .lk::after,.ltrois .lk:hover::after{transform:scaleX(1);
  transform-origin:left center}
.ltrois .lk:hover{color:var(--navy)}
.ltrois p:last-of-type{margin-bottom:30px}
#vaccueil .ltrois{position:relative}
/* apparition au premier passage dans le viewport, en decale.
   Les images gardent leur loading="lazy" : le navigateur charge,
   l'observateur revele — deux mecanismes distincts. */
.ltrois[data-rev] .lc{opacity:0;transform:translateY(22px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.ltrois[data-rev].go .lc{opacity:1;transform:none}
.ltrois[data-rev].go .lc:nth-child(1){transition-delay:.05s}
.ltrois[data-rev].go .lc:nth-child(2){transition-delay:.25s}
.ltrois[data-rev].go .lc:nth-child(3){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  .ltrois[data-rev] .lc{opacity:1;transform:none;transition:none}
}
@media(max-width:980px){
  .ltrois{grid-template-columns:1fr}
  .ltrois .lc + .lc{border-left:none;border-top:1px solid var(--lineI)}
  .ltrois .lc{padding-bottom:40px}
  .ltrois .v{margin-bottom:24px}
  .ltrois .k,.ltrois h2,.ltrois p,.ltrois .lk{margin-left:22px;margin-right:22px}
  .ltrois .v.nm .bande img{height:84px}
  .ltrois .v.nm .bande img:first-child{transform:translateY(9px)}
  .ltrois .v.nm .bande{gap:2px}
}

/* ── apparition des cartes fragrance ──
   Desktop : la rangee de quatre monte ensemble, avec un leger decalage de
   gauche a droite pour qu'elle se lise comme un bloc. Mobile : une colonne,
   donc une carte a la fois, sans decalage. */
/* L'apparition ne vaut plus qu'au-dessus de 840 px. En mobile les cartes
   se recouvrent : une carte a opacite partielle laisse voir la
   precedente au travers, et une carte jamais revelee reste invisible.
   La regle etait posee plus bas dans la feuille que la correction du
   bloc mobile, donc elle la gagnait a specificite egale. */
@media(min-width:841px){
  #vfragrances .grid > .fr{opacity:0;transform:translateY(18px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
  #vfragrances .grid > .fr.vu{opacity:1;transform:none}
}
#vfragrances .grid > .fr.vu:nth-child(4n+2){transition-delay:.07s}
#vfragrances .grid > .fr.vu:nth-child(4n+3){transition-delay:.14s}
#vfragrances .grid > .fr.vu:nth-child(4n+4){transition-delay:.21s}
@media(max-width:1080px){
  #vfragrances .grid > .fr.vu:nth-child(n){transition-delay:0s}
  #vfragrances .grid > .fr.vu:nth-child(2n){transition-delay:.07s}
}
@media(max-width:840px){
  #vfragrances .grid > .fr.vu:nth-child(n){transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){
  #vfragrances .grid > .fr{opacity:1;transform:none;transition:none}
}
/* ══════════════════════════════════════════════════════════════
   PROFESSIONNELS — quatre blocs.
   Pose en FIN de feuille : a specificite egale, la derniere regle
   l'emporte, et la feuille d'index.html contient des regles generiques
   plus bas qui reprenaient la main sur les miennes.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · « Ce que nous composons » ──
   Trois colonnes, un visuel par metier. Le visuel est facultatif :
   sans lui la carte garde son filet haut et le rang reste aligne. */
.metiers{padding:30px 56px 96px}
.metiers > .k{margin-top:34px}
.metiers h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.16;
  letter-spacing:-.004em;margin-bottom:22px;color:var(--navy)}
.metiers h1 em{font-family:var(--disI);font-style:italic;color:var(--brass2);font-size:1.14em}
.mlead{max-width:66ch;margin-bottom:54px}
.mlead p{font-size:16px;line-height:1.9;color:var(--onIvory)}
.mlead p + p{margin-top:12px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 34px}
.mc .mph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ivory2);
  margin-bottom:20px}
.mc .mph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.mc:hover .mph img{transform:scale(1.035)}
.mc.nph{border-top:1px solid var(--lineI2);padding-top:18px}
.mc h3{font-family:var(--dis);font-weight:400;font-size:21px;line-height:1.25;
  margin-bottom:9px;color:var(--navy)}
.mc p{font-size:14px;line-height:1.8;color:var(--onIvory);max-width:40ch}

/* ── 2 · marketing olfactif ──
   Texte a gauche, visuel en portrait a droite. La photo est en absolu
   dans son cadre : en flux, son rapport imposerait sa hauteur a toute
   la bande. */
.molf{display:grid;grid-template-columns:1.1fr .9fr;gap:0 64px;
  padding:92px 56px;align-items:center}
/* ── jonction One Day / Marketing olfactif ──
   Deux bandes marine qui se suivent : sans filet elles se lisent comme
   un seul bloc. Meme separateur que la landing — un filet interrompu
   par un losange de laiton — en valeurs sombres. */
.oneday + .molf{position:relative}
/* Le filet ne court QUE sur la moitie marine. A gauche, la photo de One
   Day descend jusqu'a la jonction : un filet a 16 % de blanc y serait
   invisible sur l'image claire, et son bord inferieur fait deja la
   separation. 45 % = la colonne .9fr de la grille .oneday ; le losange
   se place au milieu du filet, soit 72,5 % moins la demi-marge. */
.oneday + .molf::before{content:'';position:absolute;top:0;left:45%;right:56px;
  height:1px;background:var(--lineN);z-index:2}
.oneday + .molf::after{content:'';position:absolute;top:-4px;left:calc(72.5% - 28px);
  margin-left:-4px;
  width:8px;height:8px;background:var(--brass);transform:rotate(45deg);z-index:3;
  box-shadow:0 0 0 5px var(--navy)}
/* Sous 980 px la section One Day s'empile : la photo passe au-dessus du
   texte, la jonction devient marine sur toute la largeur. */
@media(max-width:980px){
  .oneday + .molf::before{left:56px;right:56px}
  .oneday + .molf::after{left:50%}
}
.molf .t{max-width:680px}
.molf h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.16;
  letter-spacing:-.004em;margin-bottom:22px}
.molf h2 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.14em}
.molf .lead{font-size:16px;line-height:1.9;color:var(--onNavy);max-width:60ch;
  margin-bottom:34px}
.arg{list-style:none;display:grid;gap:22px}
.arg li{font-size:15px;line-height:1.85;color:var(--onNavy);
  border-top:1px solid var(--lineN);padding-top:16px;max-width:62ch}
.arg b{font-family:var(--dis);font-weight:400;font-size:16.5px;color:var(--ivory);
  display:block;margin-bottom:5px}
.molf .ph{position:relative;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(150deg,#243253,#1A2440);
  border:1px solid var(--lineN);display:flex;align-items:center;justify-content:center}
.molf .ph span{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintN)}
.molf .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── 3 · APM Body Care ──
   Visuel centre entre le titre et le texte : 1 584 x 672, un rapport
   2,36 qui ne supporte aucun recadrage. On le borne en largeur. */
.bcpro{padding:96px 56px 76px}
.bcpro .shd{max-width:760px;margin-bottom:46px}
.bcpro h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.16;
  letter-spacing:-.004em}
.bcpro h2 em{font-family:var(--disI);font-style:italic;color:var(--brass2);font-size:1.14em}
.bcph{margin:0 auto;max-width:1180px}
/* la cale de parallaxe ne sert qu'en mobile */
.bcpcale{display:none}
.bcph img{width:100%;height:auto;display:block}
.bcols{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:stretch}
.bcpro2 .arg{display:flex;flex-direction:column;justify-content:space-between;
  gap:20px;height:100%}
.bcpro2 .bcf{display:flex;flex-direction:column;height:100%}
.bcpro2 .frg{margin-top:auto}
.bcpro2{padding:86px 56px 96px}
.bcpro2 .arg li{color:var(--onNavy);border-top-color:var(--lineN)}
.bcpro2 .arg b{color:var(--ivory)}
.bcf .chapo{font-size:15.5px;line-height:1.85;color:var(--onNavy);
  border-top:1px solid var(--lineN);padding-top:16px;margin-bottom:22px;max-width:46ch}
.frg{list-style:none}
.frg li{border-bottom:1px solid var(--lineN)}
.frg li:last-child{border-bottom:0}
.frg a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;
  padding:13px 0}
.frg .n{font-family:var(--dis);font-size:17px;color:var(--ivory);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);display:inline-block}
.frg .d{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);text-align:right}
.frg a:hover .n{transform:translateX(5px)}

/* ── 4 · « Ils nous font confiance » ──
   La page 12 de la plaquette, telle quelle : logos en couleurs
   d'origine sur le fond ivoire, six par rang, cinq rangs. Chaque rang
   se decouvre au defilement. loading="lazy" est sans danger ici : la
   grille est statique, rien ne depend de la largeur des images. */
.confi{padding:92px 56px 104px}
.confi .chd{margin-bottom:52px}
.confi h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.16;
  letter-spacing:-.004em}
.confi h2 em{font-family:var(--disI);font-style:italic;color:var(--brass2);font-size:1.14em}
.cgr{display:grid;gap:0;border-top:1px solid var(--lineI2)}
.crow{display:grid;grid-template-columns:repeat(6,1fr);
  border-bottom:1px solid var(--lineI2);
  opacity:0;transform:translateY(26px);
  transition:opacity 1.25s cubic-bezier(.2,.7,.3,1),transform 1.25s cubic-bezier(.2,.7,.3,1)}
.crow.on{opacity:1;transform:none}
.cl{display:flex;align-items:center;justify-content:center;padding:24px 22px;min-height:112px}
/* Cadre fixe, et non « au plus 60 px de haut ». Les fichiers de
   references/ portent leur propre cadre de 152 x 46, logo centre
   dedans : on sert ce cadre tel quel. Laisser chaque image negocier sa
   taille ramenerait le desordre que la normalisation vient de retirer. */
.cl img{width:152px;height:46px;max-width:none;max-height:none;object-fit:contain}

/* ══ en dessous de 1000 px ══ */
@media(max-width:1000px){
  .mgrid{grid-template-columns:repeat(2,1fr);gap:38px 26px}
  .metiers h1{margin-bottom:18px}
  .mlead{margin-bottom:40px}
  .molf{grid-template-columns:1fr;gap:38px;padding:72px 30px}
  .oneday + .molf::before{left:30px;right:30px}
  .molf .t{max-width:none}
.molf .ph{aspect-ratio:4/3;order:-1}
  /* Meme parallaxe que la section One Day, demandee le 15 octobre :
     la photo reste collee sous le bandeau, le bloc marine glisse
     par-dessus. Trois precautions, les memes qu'au-dessus —
     1. le texte porte son propre fond, sinon la photo se voit au
        travers ;
     2. la gouttiere de 38 px est supprimee et reportee en haut du
        texte, sinon une bande de photo reste visible entre les deux ;
     3. photo et texte debordent les 30 px de marge de la section pour
        occuper toute la largeur, comme One Day. */
  .molf{position:relative;gap:0}
  .molf .ph{position:-webkit-sticky;position:sticky;top:71px;z-index:0;
    margin-left:-30px;margin-right:-30px}
  .molf .t{position:relative;z-index:1;background:rgba(31,44,78,.86);
    -webkit-backdrop-filter:blur(18px) saturate(1.06);
    backdrop-filter:blur(18px) saturate(1.06);
    margin-left:-30px;margin-right:-30px;padding:38px 30px 0}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .molf .t{background:var(--navy)}
  }
  @media(prefers-reduced-motion:reduce){ .molf .ph{position:static} }
  .bcols{grid-template-columns:1fr;gap:42px}
.bcpro{padding:72px 30px 56px}
  /* Body Care : ici le texte est AU-DESSUS de la photo, l'inverse des
     deux sections precedentes. La photo est donc collee et c'est la
     section suivante, marine, qui vient la recouvrir en montant.

     Une photo collee en DERNIER element de sa section ne colle pas :
     il ne lui reste aucune place pour voyager. On ouvre donc sous elle
     une reserve egale a sa propre hauteur, et on remonte la section
     suivante d'autant. La mise en page ne bouge pas d'un pixel, mais
     la photo a desormais de quoi tenir pendant que le marine la
     recouvre. 42,43 % = 1 / (1584 / 672), les proportions du fichier,
     la photo occupant toute la largeur. */
  .bcpro{position:relative}
  .bcpcale{display:block;height:0;padding-top:calc(42.43% + 150px)}
  .bcpro .bcphw{position:-webkit-sticky;position:sticky;top:71px;z-index:0;
    margin-left:-30px;margin-right:-30px}
  .bcpro2{position:relative;z-index:1;margin-top:calc(-42.43% - 150px);
    background:rgba(31,44,78,.86);
    -webkit-backdrop-filter:blur(18px) saturate(1.06);
    backdrop-filter:blur(18px) saturate(1.06)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bcpro2{background:var(--navy)}
  }
  @media(prefers-reduced-motion:reduce){
    .bcpro{padding-bottom:56px}
    .bcpcale{display:none}
    .bcpro .bcphw{position:static}
    .bcpro2{margin-top:0}
  }
  .bcpro2{padding:64px 30px 76px}
  .confi{padding:72px 30px 84px}
.crow{grid-template-columns:repeat(3,1fr)}
  .cl{padding:22px 14px;min-height:104px}
  .cl img{max-height:46px}
}
/* ══ telephone ══ */
@media(max-width:640px){
  .metiers{padding:22px 22px 70px}
  .mgrid{grid-template-columns:1fr;gap:30px}
  .mc .mph{aspect-ratio:3/2;margin-bottom:16px}
  .metiers h1{margin-bottom:16px}
  .mlead{margin-bottom:32px}
  .mlead p{font-size:15px;line-height:1.85}
  .mc p{max-width:none}
  .molf{padding:60px 22px}
  /* La marge de section tombe a 22 px sous 820 : les debordements de
     la parallaxe suivent, sinon la photo depassait de 8 px de chaque
     cote — mesure 406 px de large pour un ecran de 390. */
  .molf .ph,.molf .t{margin-left:-22px;margin-right:-22px}
  .molf .t{padding-left:22px;padding-right:22px}
  .oneday + .molf::before{left:22px;right:22px}
.molf .lead{font-size:15px;margin-bottom:28px}
  .arg{gap:18px}
  .arg li{font-size:14.5px}
  .bcpro{padding:66px 22px 0}
  .bcpro .bcphw{margin-left:-22px;margin-right:-22px}
  .bcpro2{padding:54px 22px 66px}
  @media(prefers-reduced-motion:reduce){ .bcpro{padding-bottom:46px} }
  .bcpro2{padding-top:54px}
.bcpro .shd{margin-bottom:30px}
.frg a{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .frg .d{text-align:left}
}
@media(max-width:560px){
  .confi{padding:60px 22px 70px}
.confi .chd{margin-bottom:34px}
  .crow{grid-template-columns:repeat(2,1fr)}
  .cl{padding:18px 12px;min-height:92px}
  .cl img{max-height:40px}
}
@media(prefers-reduced-motion:reduce){
  .crow{opacity:1;transform:none;transition:none}
  .mc .mph img{transition:none}
}


/* ═══ SAVOIR-FAIRE · portrait Latifa Asri ═══════════════════════════ */
.lati{display:grid;grid-template-columns:1fr auto;gap:0 72px;
  align-items:center;padding:86px 56px 94px}
.lati .t{max-width:600px}
.lati .fil{margin-bottom:26px}
.lati .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:18px}
.lati h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.1;
  letter-spacing:-.006em;margin:0 0 26px}
.lati h1 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.1em}
.lati p{font-size:15.5px;line-height:1.95;color:var(--onIvory);margin-bottom:16px;max-width:54ch}
.lati p:last-child{margin-bottom:0}
.lati .ph{position:relative;width:480px;flex:0 0 auto}
.lati .ph img{width:480px;height:640px;object-fit:cover;object-position:50% 28%;display:block}

@media(max-width:1180px){
  .lati{gap:0 44px;padding:70px 34px 78px}
.lati .ph,.lati .ph img{width:400px}
  .lati .ph img{height:533px}
}
@media(max-width:880px){
  .lati{grid-template-columns:1fr;gap:34px 0;padding:46px 22px 56px}
  .lati .t{max-width:none;order:2}
  .lati .ph{order:1;width:100%}
  .lati .ph img{width:100%;height:auto;aspect-ratio:3/4}
.lati p{font-size:14.5px}
}

/* ═══ SAVOIR-FAIRE · la frise chronologique ═════════════════════════ */
.hist{padding:84px 56px 96px}
.hist .hh{margin-bottom:54px}
.hist .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.hist h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.16;
  letter-spacing:-.004em;color:var(--ivory)}
.hist h2 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.12em}
.tl .rail{position:relative;height:1px;background:var(--lineN);margin-bottom:34px}
.tl .rail .fill{position:absolute;left:0;top:0;height:1px;width:0;background:var(--brass);
  transition:width 2.9s cubic-bezier(.22,.61,.36,1)}
.tl.go .rail .fill{width:100%}
.tl ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.tl li{position:relative;padding-right:22px;opacity:0;transform:translateY(16px);
  transition:opacity .84s ease,transform .84s cubic-bezier(.22,.61,.36,1)}
.tl.go li{opacity:1;transform:none}
.tl.go li:nth-child(1){transition-delay:.08s}
.tl.go li:nth-child(2){transition-delay:.52s}
.tl.go li:nth-child(3){transition-delay:.96s}
.tl.go li:nth-child(4){transition-delay:1.4s}
.tl .dot{position:absolute;left:0;top:-40px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--lineN);background:var(--navy);display:flex;
  align-items:center;justify-content:center;transition:border-color .5s}
.tl .dot i{width:3px;height:3px;border-radius:50%;background:var(--lineN);
  transition:background .5s,transform .5s}
.tl.go li .dot{border-color:var(--brass)}
.tl.go .dot i{background:var(--brass);transform:scale(1.6)}
.tl .an{display:block;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.26em;
  color:var(--brass);margin-bottom:12px}
.tl h3{font-family:var(--dis);font-weight:400;font-size:18px;line-height:1.3;
  color:var(--ivory);margin-bottom:10px}
.tl p{font-size:13.5px;line-height:1.8;color:var(--onNavy)}
.tl p a{color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--brass2);
  transition:border-color .3s}
.tl p a:hover{border-color:var(--brass)}
@media(prefers-reduced-motion:reduce){
  .tl li{opacity:1;transform:none}
  .tl .rail .fill{transition:none;width:100%}
}
@media(max-width:1180px){
  .hist{padding:70px 34px 78px}
.tl ol{gap:0 28px}
}
@media(max-width:820px){
  .hist{padding:52px 22px 60px}
  .hist .hh{margin-bottom:38px}
.tl{position:relative;padding-left:32px}
  .tl ol{grid-template-columns:1fr;gap:34px}
  .tl .rail{position:absolute;left:5px;top:8px;bottom:8px;width:1px;height:auto;margin:0}
  .tl .rail .fill{width:1px;height:0;
    transition:height 2.9s cubic-bezier(.22,.61,.36,1)}
  .tl.go .rail .fill{width:1px;height:100%}
  .tl .dot{left:-32px;top:2px}
  .tl li{padding-right:0}
}

/* ═══ SAVOIR-FAIRE · l'univers ══════════════════════════════════════ */
.univ{padding:88px 56px 96px}
.univ .uh{margin-bottom:46px}
.univ .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:16px}
.univ h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.2;
  letter-spacing:-.004em;color:var(--navy);max-width:22ch}
.univ h2 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.1em}
.uph{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.uph figure{margin:0;overflow:hidden;background:var(--ivory2)}
.uph img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.uph figure:hover img{transform:scale(1.035)}
.ucf{display:grid;grid-template-columns:repeat(4,1fr);gap:0 34px;margin-top:62px;
  border-top:1px solid var(--lineI);padding-top:34px}
.ucf > div{position:relative;padding-right:24px}
.ucf > div + div::before{content:'';position:absolute;left:-17px;top:4px;bottom:4px;
  width:1px;background:var(--lineI2)}
.ucf .n{display:block;font-family:var(--dis);font-weight:400;font-size:40px;
  line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;margin-bottom:12px}
.ucf .l{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintI)}
@media(max-width:1180px){
  .univ{padding:72px 34px 80px}
.uph{gap:16px}
  .ucf .n{font-size:34px}
}
@media(max-width:820px){
  .univ{padding:54px 22px 62px}
  .univ h2{max-width:none}
  .uph{grid-template-columns:1fr;gap:14px}
  .ucf{grid-template-columns:1fr 1fr;gap:30px 24px;margin-top:44px}
  .ucf > div{padding-right:0}
  .ucf > div + div::before{display:none}
  .ucf .n{font-size:32px}
}

/* ═══ univers · six visuels carres, titre rehausse ══════════════════ */
.univ .uh{margin-bottom:44px}
.univ h2{font-size:var(--t2);max-width:none}
.univ .ul{font-size:15.5px;line-height:1.9;color:var(--onIvory);margin-top:16px;max-width:52ch}
.uph{grid-template-columns:repeat(3,1fr);gap:20px}
.uph img{aspect-ratio:1/1}
@media(max-width:1180px){.uph{gap:14px}}
@media(max-width:820px){
.uph{grid-template-columns:1fr 1fr;gap:10px}
  .univ .ul{font-size:14.5px;max-width:none}
}

/* le bandeau de chiffres passe dans NOTRE HISTOIRE, sur fond bleu */
.hist .ucf{margin-top:64px;border-top:1px solid var(--lineN);padding-top:36px}
.hist .ucf > div + div::before{background:var(--lineN)}
.hist .ucf .n{color:var(--ivory)}
.hist .ucf .l{color:var(--faintN)}
@media(max-width:820px){.hist .ucf{margin-top:44px}}

/* ═══ CONTACT ══════════════════════════════════════════════════════ */
.ctop{padding:84px 56px 92px}
.cg{display:grid;grid-template-columns:1fr minmax(360px,.78fr);gap:0 72px;align-items:start}
.cadr h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.1;
  letter-spacing:-.006em;color:var(--navy);margin:24px 0 20px}
.cadr h1 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.1em}
.clead{font-size:15.5px;line-height:1.95;color:var(--onIvory);max-width:50ch;margin-bottom:46px}
.bur{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;
  border-top:1px solid var(--lineI);padding-top:32px}
.bu h3{font-family:var(--dis);font-weight:400;font-size:17px;color:var(--navy);margin-bottom:9px}
.bu p{font-size:14px;line-height:1.8;color:var(--onIvory)}
.bu a{display:inline-block;margin-top:7px;font-size:14px;color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--brass2);transition:border-color .3s}
.bu a:hover{border-color:var(--brass)}
.cform{background:transparent;padding:0;border:0}
.cform .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass2);margin-bottom:12px}
.cform h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);color:var(--navy);
  margin-bottom:26px}
.cform label{display:block;margin-bottom:18px}
.cform label span{display:block;font-family:'Jost',sans-serif;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faintI);margin-bottom:8px}
.cform input,.cform textarea{width:100%;font-family:'Lora',Georgia,serif;font-size:14.5px;
  color:var(--navy);background:transparent;border:0;border-bottom:1px solid var(--lineI);
  padding:8px 0;transition:border-color .3s;border-radius:0}
.cform textarea{resize:vertical;line-height:1.7}
.cform input:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--brass)}
.cform label.ko span{color:#A3423C}
.cform label.ko input,.cform label.ko textarea{border-bottom-color:#A3423C}
.cform .btn{margin-top:8px}
.cnote{font-size:12px;line-height:1.7;color:var(--faintI);margin-top:16px}
.cnote strong{font-weight:400;color:var(--onIvory)}
.cmap{display:grid;grid-template-columns:.86fr 1.14fr;align-items:stretch}
.cmap .mh{padding:76px 48px 80px 56px;align-self:center}
.cmap .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.cmap h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);line-height:1.18;
  color:var(--ivory);margin-bottom:18px}
.cmap h2 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.1em}
.cmap p{font-size:15px;line-height:1.9;color:var(--onNavy);margin-bottom:26px;max-width:40ch}
.mfr{position:relative;min-height:440px;background:var(--navy2)}
.mfr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.34) contrast(1.04)}
@media(max-width:1180px){
  .ctop{padding:70px 34px 78px}
  .cg{gap:0 40px}
.bur{grid-template-columns:1fr;gap:26px}
  .cmap .mh{padding:60px 32px 64px 34px}
}
@media(max-width:880px){
  .ctop{padding:46px 22px 54px}
  .cg{grid-template-columns:1fr;gap:44px 0}
.clead{max-width:none;margin-bottom:34px}
  .bur{grid-template-columns:1fr 1fr;gap:24px 20px}
  .cmap{grid-template-columns:1fr}
  .cmap .mh{padding:44px 22px 36px}
.mfr{min-height:300px}
}
@media(max-width:520px){.bur{grid-template-columns:1fr}}

/* la section carte doit toucher les bords : la gouttiere generale est reprise par .mh */
.cmap{padding:0}
/* meme inversion que les CTA du site, plus le curseur : c'est un <button> */
.cform .btn.plein{background:var(--navy);color:var(--ivory);border-color:var(--navy);
  cursor:pointer;font-family:'Jost',sans-serif;transition:background .28s ease,color .28s ease}
.cform .btn.plein:hover,.cform .btn.plein:focus-visible{background:transparent;
  color:var(--navy);border-color:var(--navy)}
.cform .btn.plein:active{transform:translateY(1px)}
@media(max-width:880px){.cmap .mh{padding:44px 22px 36px}}

/* le formulaire reprend le fond de page : plus de carte blanche */
.cform{background:transparent;padding:0;border:0}
.cg{align-items:start}
.cform .k{margin-top:4px}

/* ═══ CONTACT · zones de grille, titres alignes ═════════════════════ */
.cg{grid-template-columns:1fr minmax(360px,.78fr);
  grid-template-areas:'t f' 'a f';align-items:start}
.ctitre{grid-area:t}
.bur{grid-area:a}
.cform{grid-area:f}
.ctitre h1{font-family:var(--dis);font-weight:400;font-size:var(--t1);line-height:1.1;
  letter-spacing:-.006em;color:var(--navy);margin:24px 0 20px}
.ctitre h1 em{font-family:var(--disI);font-style:italic;color:var(--brass);font-size:1.1em}
/* le fil d'Ariane ne doit pas decaler le titre : le h2 du formulaire part du meme bord */
.cform{padding-top:41px}
.cform .k{margin:0 0 12px}
.bur{position:relative;margin-top:14px;border-top:1px solid var(--lineI);padding-top:32px}
/* ═══ CONTACT mobile · bandeau bleu, formulaire, puis les adresses ══ */
@media(max-width:880px){
  .ctop{padding:0 0 0 0}
  .cg{grid-template-columns:1fr;grid-template-areas:'t' 'f' 'a';gap:0}
  .ctitre{background:var(--navy);color:var(--ivory);padding:34px 22px 40px}
  .ctitre .fil,.ctitre .fil a{color:var(--faintN)}
  .ctitre .fil a:hover{color:var(--ivory)}
  .ctitre h1{color:var(--ivory);margin:18px 0 16px}
  .ctitre .clead{color:var(--onNavy);max-width:none;margin:0}
  .cform{padding:36px 22px 42px;margin:0}
  .bur{margin:0;border-top:0;padding:0;display:block}
  /* les fiches s'empilent et se recouvrent, comme les blocs de SUR MESURE */
  /* colle sous l'en-tete fixe : plus besoin d'une grande marge haute */
  .bu{position:-webkit-sticky;position:sticky;top:68px;
    background:var(--ivory);padding:34px 22px 38px;box-sizing:border-box;display:block}
  .bu::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;
    background:var(--lineI);z-index:2}
  .bu::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;
    width:8px;height:8px;background:var(--brass);transform:rotate(45deg);z-index:3;
    box-shadow:0 0 0 5px var(--ivory)}
  .bu h3{font-size:24px;margin-bottom:14px}
  .bu p{font-size:15px;line-height:1.9}
  .bu a{margin-top:12px;font-size:15px}
}

/* Google impose sa fiche d'adresse en haut a gauche de l'iframe et aucun parametre
   ne la retire. On agrandit le cadre de 220 px en haut comme en bas et on le
   remonte d'autant : la fiche sort du champ, le centre de la carte ne bouge pas. */
.mfr{overflow:hidden}
.mfr iframe{top:-230px;height:calc(100% + 340px)}

/* ═══ ACCUEIL mobile · hero sombre, accroche en haut ════════════════ */
.sld-v picture{display:block;position:absolute;inset:0}
@media(max-width:900px){
  .sld{height:66svh;min-height:430px;max-height:none}
  .sld-v img{object-position:50% 50%}
  /* le haut du cliche est deja noir : un voile leger suffit pour le texte */
  .sld-voile{background:linear-gradient(180deg,rgba(10,12,18,.46) 0%,
    rgba(10,12,18,.20) 34%,transparent 58%)}
  .sld-t{left:22px;right:22px;top:26px;bottom:auto}
  .sld-t h1{line-height:1.16;margin:0;text-shadow:none}
  .sld-t .btn{display:none}
}

/* Chrome ancre le defilement sur un element lors d'un changement de
   mise en page ; avec des blocs collants empiles il corrige dans le
   mauvais sens et renvoie vers le bas. Safari n'a pas ce mecanisme. */
html,body,
.grid > .fr,
#vbody .cgrid.four > .cc,
.fragsel .rubf,
.bu{overflow-anchor:none}

/* ═══ BODY CARE mobile · les six signatures s'empilent ══════════════
   Meme mecanique que les quatre formats : fond opaque, pas de z-index
   sur les fiches (un element positionne sans z-index ne cree pas de
   contexte d'empilement, donc la suivante passe naturellement devant).
   L'intitule de section, lui, porte un z-index : il doit rester
   au-dessus de la pile. */
@media(max-width:840px){
  #vbody .sig{padding-top:40px}
  #vbody .sig .shead{position:-webkit-sticky;position:sticky;top:72px;z-index:5;
    background:var(--navy);margin-bottom:0;padding:14px 0 12px}
  #vbody .sig .lead6{padding-top:14px}
  #vbody .sixsig{margin-top:22px}
  #vbody .sixsig > a{position:-webkit-sticky;position:sticky;top:var(--colleS,190px);
    background:var(--navy);overflow-anchor:none;padding:22px 0 26px}
}

/* ═══ FICHE CONTENANT mobile · les fragrances s'empilent ════════════
   Meme mecanique que les rubriques de la page fragrance : fond opaque,
   aucun z-index, la ligne suivante recouvre la precedente. L'accordeon
   n'ecrete rien (il bascule display:none/block), le collage tient. */
@media(max-width:840px){
  .pdp .accf .liste.lq > .lrow{position:-webkit-sticky;position:sticky;top:72px;
    background:var(--ivory);overflow-anchor:none}
  .pdp .accf .liste.lq > .lrow.on{background:#fff}
}

/* Entree de menu de la page ouverte : meme trait qu'au survol, maintenu. */
nav a.on{border-bottom-color:var(--navy)}
.mlist a.on{color:var(--brass)}

/* La page index des fragrances n'avait aucun h1 : son intitule etait un
   h2. Passe en h1 pour le referencement, il garde le dessin du h2. */
#vfragrances .shead h1{font-family:var(--dis);font-size:var(--t1);font-weight:400;
  line-height:1.16;letter-spacing:-.006em}
@media(max-width:860px){#vfragrances .shead h1{letter-spacing:-.005em;line-height:1.14}}

/* Provenance d'une fragrance, sous le descriptif de la fiche. Ton
   plus bas que le descriptif : c'est une mention d'origine, pas un
   argument de vente. Le filet a gauche la detache sans l'encadrer. */
.pdp .prov{font-family:'Lora',Georgia,serif;font-style:italic;font-size:14.5px;
  line-height:1.7;color:var(--onIvory);opacity:.72;margin:-22px 0 32px;
  padding-left:14px;border-left:1px solid rgba(0,0,0,.14)}
.pdp .prov b{font-style:normal;font-weight:400;opacity:1}

/* ══ pages legales ══════════════════════════════════════════════════
   CGV, confidentialite, mentions legales. Une colonne unique, etroite,
   sans image : ce sont des textes qu'on lit en entier ou qu'on parcourt
   a la recherche d'un article, pas des pages de vente. La mesure de
   ligne est volontairement plus courte que sur le reste du site —
   autour de 70 signes — parce que le texte juridique est dense.
   Ajoute en fin de fichier : a specificite egale la derniere regle
   l'emporte, donc une regle posee ailleurs la neutraliserait. */
.lg{background:var(--ivory);padding:64px 0 96px}
.lgw{max-width:760px;margin:0 auto;padding:0 28px}
.lgw .k{margin:18px 0 10px}
.lgw h1.dis{font-size:var(--t1);line-height:1.14;letter-spacing:-.006em;margin:0 0 26px}

/* Mention de traduction de courtoisie, en tete des pages anglaises.
   Encadree a gauche pour qu'on la distingue du contrat lui-meme :
   elle n'en fait pas partie. */
.lgfoi{font-family:'Jost',sans-serif;font-size:13px;line-height:1.65;
  letter-spacing:.01em;color:var(--onIvory);opacity:.74;
  margin:0 0 34px;padding:12px 0 12px 16px;border-left:2px solid rgba(0,0,0,.16)}
/* Date d'entree en vigueur, juste sous le titre : c'est la premiere
   chose qu'un client ou un juriste cherche sur une page de CGV. */
.lgdate{font-family:'Jost',sans-serif;font-size:12px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;opacity:.58;
  margin:-16px 0 28px}

.lgnote{font-family:'Lora',Georgia,serif;font-style:italic;font-size:15px;
  line-height:1.7;color:var(--onIvory);opacity:.78;margin:0 0 30px}

.lgb{font-family:'Jost',sans-serif;font-size:15px;line-height:1.78;
  color:var(--onIvory)}
.lgb p{margin:0 0 17px}
.lgb h2.dis{font-size:var(--t3);line-height:1.24;letter-spacing:-.003em;
  margin:46px 0 16px;padding-top:26px;border-top:1px solid rgba(0,0,0,.12)}
.lgb h2.dis:first-child{margin-top:8px;padding-top:0;border-top:0}
/* Les sous-titres d'article gardent leur casse. La capitale, employee
   ailleurs sur le site pour des intitules courts, deforme ici des
   phrases entieres (« Garantie contre les defauts et vices caches ») et
   rend le document plus lourd a parcourir qu'a lire. */
.lgb h3{font-family:'Jost',sans-serif;font-size:15px;font-weight:500;
  letter-spacing:.012em;margin:30px 0 11px}
.lgb h4{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;opacity:.6;margin:22px 0 9px}
.lgb address{font-style:normal;margin:0 0 20px;padding:16px 18px;
  background:rgba(0,0,0,.035);line-height:1.6}
.lgb ul.lgl{margin:0 0 20px;padding-left:20px}
.lgb ul.lgl li{margin:0 0 9px}
/* Lignes a completer de l'annexe 1 : le filet dit qu'on ecrit dessus. */
.lgb .lgf{margin:0 0 15px;padding-bottom:9px;
  border-bottom:1px dotted rgba(0,0,0,.28)}

@media(max-width:860px){
  .lg{padding:44px 0 72px}
  .lgw{padding:0 20px}
  .lgw h1.dis{letter-spacing:-.005em}
  .lgb h2.dis{margin:38px 0 14px;padding-top:22px}
}


/* ── tableaux des pages legales ────────────────────────────────────
   Durees de conservation, sous-traitants, finalites : des donnees qui
   se lisent en colonnes. Pas de bordure exterieure, un filet par
   ligne : le tableau doit se lire comme la suite du texte, pas comme
   une piece rapportee. */
.lgb table.lgt{width:100%;border-collapse:collapse;margin:4px 0 26px;
  font-size:14px;line-height:1.6}
.lgb table.lgt th{text-align:left;font-weight:500;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;opacity:.6;
  padding:0 14px 9px 0;border-bottom:1px solid rgba(0,0,0,.22);
  vertical-align:bottom}
.lgb table.lgt td{padding:12px 14px 12px 0;vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,.09)}
.lgb table.lgt th:last-child,.lgb table.lgt td:last-child{padding-right:0}

/* ── point en suspens ──────────────────────────────────────────────
   Ce qui n'est pas tranche se voit. Fond ambre et filet epais : on ne
   publie pas une politique de confidentialite incomplete en silence.
   Ces blocs disparaitront un a un ; la page est faite pour qu'on ne
   puisse pas les oublier. */
.lgatt{font-family:'Jost',sans-serif;font-size:13.5px;line-height:1.65;
  margin:0 0 22px;padding:14px 16px;
  background:rgba(176,124,38,.07);border-left:3px solid rgba(176,124,38,.55);
  color:var(--onIvory)}
.lgatt::before{content:'À SUIVRE';display:block;font-size:10px;
  font-weight:500;letter-spacing:.17em;margin-bottom:6px;
  color:rgba(140,96,26,.95)}
html[lang="en"] .lgatt::before{content:'PENDING'}

@media(max-width:860px){
  /* Les tableaux a trois colonnes ne tiennent pas sous 500 px : on les
     deplie en blocs, chaque cellule precedee de son intitule. */
  .lgb table.lgt,.lgb table.lgt tbody,.lgb table.lgt tr,.lgb table.lgt td{
    display:block;width:100%}
  .lgb table.lgt thead{position:absolute;left:-9999px}
  .lgb table.lgt tr{padding:14px 0;border-bottom:1px solid rgba(0,0,0,.14)}
  .lgb table.lgt td{border:0;padding:0 0 8px}
  .lgb table.lgt td:first-child{font-weight:500}
}

/* ══ fenetre destination + langue ═══════════════════════════════════
   Centree, sur voile sombre. Elle pose une question, elle n'annonce
   rien : pas d'image, pas d'argument, deux listes et un bouton. Le
   voile est assez dense pour que la page cesse de solliciter l'oeil,
   assez clair pour qu'on voie qu'elle est toujours la. */
.dest{position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(20,26,44,.62)}
.dest.on{display:flex}
.destb{position:relative;width:100%;max-width:560px;background:var(--ivory);
  padding:52px 54px 48px;box-shadow:0 26px 80px rgba(12,18,34,.3)}
.destx{position:absolute;top:18px;right:20px;width:38px;height:38px;
  border:0;background:none;cursor:pointer;font-size:26px;line-height:1;
  color:var(--onIvory);opacity:.5}
.destx:hover{opacity:1}
.destlogo{display:block;width:74px;height:auto;margin:0 0 26px}
.destb h2.dis{font-size:var(--t3);line-height:1.16;letter-spacing:-.005em;
  margin:0 0 14px;padding-right:34px}
.destl{font-family:'Jost',sans-serif;font-size:14px;line-height:1.65;
  color:var(--onIvory);opacity:.76;margin:0 0 30px}

.destg{display:grid;gap:18px;margin:0 0 28px}
.destg label{display:block}
.destg span{display:block;font-family:'Jost',sans-serif;font-size:11px;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  opacity:.6;margin:0 0 7px}
/* appearance:none retire le chevron natif : on le redessine en fond
   pour que les deux listes soient identiques d'un navigateur a
   l'autre. */
.destg select{width:100%;font-family:'Jost',sans-serif;font-size:15px;
  color:var(--onIvory);background:transparent;border:0;
  border-bottom:1px solid rgba(0,0,0,.3);padding:10px 28px 10px 0;
  border-radius:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) 19px,calc(100% - 4px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.destg select:focus{outline:0;border-bottom-color:var(--onIvory)}

/* Ailleurs sur le site, .btn.plein est un bouton cerne qui ne se
   remplit qu'au survol. Ici c'est la seule action de la fenetre, et
   elle doit se voir sans avoir a la chercher : plein des le repos,
   comme chez les maisons que Francois cite en reference. */
/* .btn.destok et non .destok : « .btn.plein » vaut deux classes, une
   regle a classe unique perd meme ecrite plus bas. Le texte sortait
   navy sur navy. */
.btn.destok{width:100%;background:var(--navy);color:var(--ivory);
  border-color:var(--navy)}
.btn.destok:hover{background:#0f1830;border-color:#0f1830;color:var(--ivory)}

@media(max-width:620px){
  .dest{padding:0;align-items:flex-end}
  .destb{max-width:none;padding:40px 24px 32px}
}

/* ── formulaire de contact ─────────────────────────────────────────
   La liste d'objets reprend le dessin des champs voisins : meme
   filet, meme hauteur. Sans appearance:none, Chrome et Safari
   dessinent chacun le leur et la ligne casse. */
.cform select{width:100%;font-family:'Jost',sans-serif;font-size:15px;
  color:var(--onIvory);background:transparent;border:0;
  border-bottom:1px solid rgba(0,0,0,.22);padding:9px 26px 9px 0;
  border-radius:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) 18px,calc(100% - 4px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cform select:focus{outline:0;border-bottom-color:var(--onIvory)}
.cform label.ko select{border-bottom-color:#9c3b2e}
/* Tant qu'aucun objet n'est choisi, la liste reste grisee comme un
   texte indicatif, pas comme une reponse deja donnee. */
.cform select:invalid{opacity:.5}

.cmerci{font-family:'Lora',Georgia,serif;font-size:17px;line-height:1.72;
  color:var(--onIvory);margin:8px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(0,0,0,.14)}

/* ══ pied de page, version du 12 octobre ═══════════════════════════
   La grille a quatre colonnes ne bouge pas. Ce qui change : les
   rubriques sont desormais des liens, les reseaux sociaux entrent sous
   la signature, et la ligne du bas porte quatre blocs au lieu de deux.
   Ajoute en fin de fichier : a specificite egale, la derniere regle
   l'emporte. */
footer li a{color:inherit;text-decoration:none;transition:color .2s}
footer li a:hover{color:var(--ivory)}
/* La FAQ n'a pas encore de page : meme place, meme graisse, pas de
   survol — rien ne doit laisser croire qu'on peut cliquer. */
footer .fsoon{opacity:.45;cursor:default}

/* Reseaux sociaux. Trait blanc, jamais de remplissage : les deux
   pictogrammes sont dessines, pas importes, et se tiennent a la meme
   graisse que le reste du pied. */
/* Sans la phrase de signature, les reseaux remontent sous le logo. */
.frs{display:flex;gap:14px;margin-top:18px}
.frs a{display:inline-flex;width:34px;height:34px;align-items:center;
  justify-content:center;border:1px solid var(--lineN);border-radius:50%;
  color:var(--onNavy);transition:color .2s,border-color .2s}
.frs a:hover{color:var(--ivory);border-color:var(--ivory)}
.frs svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.frs svg .pl{fill:currentColor;stroke:none}

/* Ligne du bas : quatre blocs, alignes sur une meme ligne de base,
   qui se replient d'eux-memes quand la place manque. */
footer .fb{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  justify-content:space-between}
footer .fb .fcop{flex:1 1 auto}
footer .fb .ver{font-style:normal;opacity:.42;margin-left:10px;letter-spacing:.1em}

/* Moyens de paiement, dans les couleurs des deux reseaux. Le bleu
   Visa (#1434CB) sur le bleu du pied (#18233F) se distingue mal : les
   deux marques sont donc posees sur une plaque blanche, comme sur les
   pages de paiement. Hauteur commune, largeurs libres — un cadre
   unique ecraserait le logotype Visa, large et bas. */
.fpay{display:inline-flex;gap:7px;align-items:center;line-height:0}
/* Meme hauteur de plaque pour les deux : les logotypes n'ont pas les
   memes proportions, seule la plaque peut les aligner. line-height:0
   sur le conteneur evite l'espace que laisse sinon la ligne de base
   sous une image. */
/* margin:0 n'est pas decoratif : 'footer img' pose 16 px de marge
   basse pour le logo APM. Sans cette remise a zero, la plaque Visa
   trainait 16 px sous elle, le bloc faisait 39 px au lieu de 23, et
   Mastercard se recentrait 8 px plus bas que Visa. */
.fpay .ivisa,.fpay .imc{display:block;height:13px;width:auto;margin:0;
  background:#fff;border-radius:3px;padding:5px 8px;box-sizing:content-box}

.frea a{color:var(--onNavy);text-decoration:none;
  border-bottom:1px solid var(--lineN);transition:color .2s,border-color .2s}
.frea a:hover{color:var(--ivory);border-bottom-color:var(--ivory)}

@media(max-width:1100px){
  footer .fg{grid-template-columns:1fr 1fr 1fr}
  .fid{grid-column:1/-1}
}
@media(max-width:700px){
  footer{padding:52px 22px 28px}
  footer .fg{grid-template-columns:1fr 1fr;gap:34px 24px}
  .fid{grid-column:1/-1}
  /* En mobile la ligne du bas s'empile : quatre blocs cote a cote
     deviendraient quatre fragments illisibles. */
  footer .fb{flex-direction:column;align-items:flex-start;gap:16px}
  footer .fb .fcop{flex:none}
}

/* ══ Texte des familles olfactives ═════════════════════════════════
   Ajoute le 13 octobre : les quatre pages de famille faisaient 54 a
   116 mots et ne portaient aucun h2. Colonne de lecture bornee, comme
   les pages juridiques : au-dela de 68 caracteres par ligne l'oeil
   perd le debut de la ligne suivante. */
.famtx{max-width:62ch;margin-inline:auto}
.famtx h2{font-size:var(--t2);line-height:1.2;margin:0 0 14px}
.famtx h2 + p{margin-top:0}
.famtx p{margin:0 0 34px;font-size:16px;line-height:1.72}
.famtx p:last-child{margin-bottom:0}
.famtx h2 ~ h2{margin-top:6px}

/* Titre de la grille des quatre familles. Ajoute le 13 octobre : les
   cartes etaient des h3 sans h2 au-dessus. Centre comme la grille. */
.cgh2{font-size:var(--t2);line-height:1.2;margin:0 0 26px;text-align:center}

/* ══ Titres promus — plan de page ══════════════════════════════════
   Le 13 octobre, quatre sous-titres qui existaient visuellement mais
   etaient balises en div ou en h4 sont passes en h2 et h3 : les douze
   fiches parfum n'avaient AUCUN titre de rang 2, et leur plan sautait
   du rang 1 aux cartes.

   Ces regles ne changent rien a l'apparence : elles annulent ce que la
   balise apporte par defaut, la ou la classe ne le disait pas deja.
   '.k' et '.k2' fixent deja fonte, taille et graisse ; il reste la
   regle generale 'h2' du site, qui impose 46 px et var(--dis). */
h2.k, h2.k2{font-family:'Jost',sans-serif;font-size:10px;line-height:1;
  letter-spacing:.28em;font-weight:400;margin-top:0}
h2.k2{font-size:11px;letter-spacing:.16em}
h3.ttl{margin:0;font-weight:400}
/* Les fiches suggerees etaient des h4 ; elles sont des h3 depuis
   qu'un h2 les surplombe. Les deux selecteurs cohabitent pour que la
   grille des formats, restee en h4, ne perde rien. */
.same h3, .same h4{font-family:var(--dis);font-size:21px;font-weight:400;
  margin:14px 0 4px;letter-spacing:normal}
@media (max-width:840px){ .formats h4, .same h3, .same h4{font-size:19px} }

/* La FAQ reprend la colonne de lecture des familles, avec un rythme
   plus serre : onze questions a la suite, pas deux. */
/* ── FAQ en accordéon ─────────────────────────────────────────────
   <details> natif et non un accordéon en JavaScript : la réponse est
   DANS le HTML servi même repliée. Un accordéon qui insère sa réponse
   au clic la retire du fichier, et le bloc FAQPage déclarerait alors à
   Google des réponses absentes de la page — c'est une faute qu'il
   sanctionne. Le natif donne aussi le clavier et le lecteur d'écran
   sans une ligne de script.
   name="faq" : une seule réponse ouverte à la fois. Là où l'attribut
   n'est pas reconnu, chaque question s'ouvre indépendamment — on perd
   l'exclusivité, jamais le contenu. */
.faqtx{max-width:68ch}
.faqq{border-bottom:1px solid var(--lineI2)}
.faqq:first-of-type{border-top:1px solid var(--lineI2)}
.faqq > summary{list-style:none;cursor:pointer;display:flex;gap:18px;
  align-items:baseline;padding:22px 0;position:relative}
.faqq > summary::-webkit-details-marker{display:none}
.faqq > summary::after{content:'';flex:0 0 11px;height:11px;margin-left:auto;
  margin-top:6px;border-right:1.5px solid var(--brass2);
  border-bottom:1.5px solid var(--brass2);transform:rotate(45deg);
  transition:transform .3s ease}
.faqq[open] > summary::after{transform:rotate(-135deg)}
.faqq > summary:hover h2{color:var(--brass2)}
.faqtx h2{font-size:var(--t4);line-height:1.3;margin:0;
  transition:color .25s}
.faqr{padding:0 0 26px}
.faqr p{margin:0;font-size:16px;line-height:1.72;max-width:62ch}
@media(prefers-reduced-motion:reduce){
  .faqq > summary::after,.faqtx h2{transition:none}
}

/* Bloc questions-réponses des 22 pages de fiche, de format et de
   famille. Il réutilise le composant .faqq de la page FAQ, mais pas
   .faqtx : là-bas la question est un h2 posé sous le h1 de la page,
   ici elle est un h3 posé sous le h2 du bloc. Sans cette distinction
   le titre du bloc et les questions auraient la même taille. */
.qatx{max-width:68ch}
.qatx .faqq h3{font-size:var(--t4);line-height:1.3;margin:0;
  font-weight:400;transition:color .25s}
.qatx .faqq > summary:hover h3{color:var(--brass2)}
.qatx > h2{margin-bottom:22px}
@media(prefers-reduced-motion:reduce){
  .qatx .faqq h3{transition:none}
}

/* ══════ Sélecteur — la scène du flacon ═══════════════════════════
   Portée du prototype du 13 octobre. TOUT est préfixé .selx : la
   feuille du prototype posait des règles nues sur body, h1, h2 et
   [hidden], et huit de ses classes — d, ff, go, iv, opts, pt, res,
   rev — existent déjà ici. Déposée telle quelle, elle cassait les
   160 pages. Les groupes du SVG qui portaient .rev et .res ont été
   renommés .scn-rev et .scn-res : .adv .rev porte une animation et
   .adv .res une bordure, toutes deux auraient frappé le SVG.

   Les questions restent sur l'ivoire du site ; seule la scène est un
   panneau Bleu Nuit, comme la vitrine du prototype.               */
/* Colonne de droite ramenée de 460 à 350 px. La scène y faisait
   776 px de haut pour un bloc qui en fait 800 avant les réponses :
   rien ne pouvait la tenir immobile, faute de course. Mesurée, la
   proportion du dessin est de 1,682 ; un cadre de 308 px de large
   donne donc 520 px de haut, et le bloc garde ~280 px de course dès
   la première question. Les 110 px rendus vont à la colonne des
   choix, qui en manquait. */
.selx .selx-l{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,350px);
  gap:clamp(26px,4vw,64px);align-items:start;max-width:1180px}
@media (min-width:821px){
  .selx .selx-s figure{max-width:308px;margin-inline:auto}
  /* Un élément ne reste ancré que tant que son bloc est à l'écran.
     Avant les réponses, le bloc ne fait que la hauteur de la scène :
     la course est nulle et la scène glisse dès qu'on défile de
     150 px, alors que la question est encore cliquable. Ce plancher
     lui donne ~200 px de course dès la première question. Il ne
     s'applique qu'à la phase où le bloc est court : dès la deuxième
     réponse le contenu le dépasse largement. */
  .selx .selx-l{min-height:calc(100vh - 160px)}
}
.selx .selx-p{min-width:0}
/* Plus de position:sticky : l'ancrage est calcule en JavaScript
   (voir le bloc ANCRAGE DE LA SCENE dans app.js). Le sticky ne
   tenait pas — son conteneur change de hauteur a chaque reponse. */
.selx .selx-s{min-width:0}
.selx .selx-s.ancre{z-index:6}
.selx .selx-cale{width:100%}
.selx .selx-s figure{background:var(--navy2);border:1px solid var(--lineN);
  padding:14px 6px 10px;text-align:center}
.selx .selx-s svg{display:block;width:100%;height:auto;max-height:calc(100vh - 150px)}
.selx .selx-alt{font-family:'Jost',sans-serif;font-size:12px;line-height:1.45;
  color:var(--onNavy);padding:10px 12px 2px}

/* les quatre blocs, empilés et tous ouverts.
   padding:0 — la règle globale `section{padding:92px 56px}` ajoutait
   184 px de hauteur et 112 px de largeur à chaque bloc : 296 px pour
   une question qui en fait 112. C'est la troisième fois qu'elle mord,
   après #vaccueil et le bloc des formats. */
.selx .blk{width:100%;padding:0;scroll-margin-top:0}
.selx .blk .rc{display:none}
.selx .blk > .q{border-top:1px solid var(--lineI2);padding:20px 0}
.selx .blk:first-child > .q{border-top:0;padding-top:0}

/* le dessin au trait : décor, cote et ligne de sol */
.selx .deco{fill:none;stroke:var(--onNavy);stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;opacity:.8}
.selx .deco .br{stroke:var(--brass)}
.selx .deco .ff{fill:rgba(244,241,234,.06);stroke:none}
.selx .occ{fill:var(--navy2);stroke:none}
.selx .ctext{fill:var(--ivory);stroke:none;font-family:'Jost',sans-serif;
  font-size:22px;letter-spacing:.06em}

/* la silhouette du 150 ml */
.selx .sil{fill:none;stroke:var(--ivory);stroke-width:2.2;stroke-linejoin:round;
  stroke-linecap:round;opacity:.26;transition:opacity .6s}
.selx .sil.on{opacity:.95}
.selx .fine{opacity:0}
.selx .fine.on{opacity:.8;transition:opacity .9s .5s}

/* la matière, dans le volume du flacon. data-lvl porte l'intensité :
   c'est elle qui densifie le trait et le remplissage. */
.selx .mat{fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linecap:round;
  transition:stroke-width .5s,opacity .5s}
.selx .mat .iv{stroke:var(--ivory)}
.selx .mat .fl{fill:var(--brass);stroke:none}
.selx .mat .ff{fill:rgba(194,170,126,.16);stroke:none;transition:fill .5s}
.selx .mat .fi{fill:var(--ivory);stroke:none}
.selx .mat[data-lvl="0"]{stroke-width:1.1;opacity:.6}
.selx .mat[data-lvl="2"]{stroke-width:2.6}
.selx .mat[data-lvl="0"] .ff{fill:rgba(194,170,126,.05)}
.selx .mat[data-lvl="2"] .ff{fill:rgba(194,170,126,.34)}
.selx .wave{fill:none;stroke:var(--brass);stroke-linecap:round;stroke-linejoin:round}

/* la révélation : le vrai flacon prend la place du dessin, au même
   endroit. isolation:isolate garde le mélange indépendant de tout
   parent animé. */
.selx .scn-rev{isolation:isolate;opacity:0;pointer-events:none;transition:opacity 1.1s ease}
.selx .scn-rev.on{opacity:1}
.selx svg.scn-res .sil,.selx svg.scn-res .fine,.selx svg.scn-res .mat{
  opacity:0!important;transition:opacity .7s ease}
.selx .vs line{stroke:#0a0a0a;stroke-linecap:butt;fill:none}
.selx .rk{font-family:'Jost',sans-serif;font-size:15px;font-weight:500;
  letter-spacing:.2em;fill:var(--onNavy);text-anchor:middle}
.selx .rn{font-family:var(--dis);font-size:36px;fill:var(--ivory);text-anchor:middle}

/* les animations de tracé */
.selx .d{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  animation:selxdr var(--t,1.1s) cubic-bezier(.5,0,.2,1) forwards;
  animation-delay:calc(var(--i,0)*16ms)}
@keyframes selxdr{0%{opacity:1;stroke-dashoffset:1}100%{opacity:1;stroke-dashoffset:0}}
.selx .pt{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:selxpop .7s cubic-bezier(.3,1.4,.5,1) forwards;
  animation-delay:calc(var(--i,0)*5ms)}
@keyframes selxpop{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
.selx .fd{opacity:0;animation:selxfd .6s .7s ease forwards}
@keyframes selxfd{from{opacity:0}to{opacity:1}}
.selx .cfade{opacity:0;animation:selxcf 1.1s .45s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes selxcf{from{opacity:0;letter-spacing:.24em}to{opacity:1;letter-spacing:.06em}}

/* la carte et les contenants paraissent avec le flacon, pas avant */
.selx .res.selx-wait{opacity:0;pointer-events:none}
.selx .res{transition:opacity .7s ease}

@media (max-width:820px){
  /* La scène passe en premier et se colle en haut : elle doit rester
     visible pendant qu'on répond dessous, sinon l'animation se joue
     hors de l'écran. Chaque réponse validée se replie en ligne récap. */
  /* La scène se colle SOUS le bandeau et le reste jusqu'au bout du
     bloc : le parfum conseillé et la liste des contenants défilent
     dessous. Elle était jusqu'ici enfermée dans .selx-l, donc elle se
     décollait dès que la révélation commençait — c'est-à-dire au
     moment précis où elle sert. display:contents dissout la colonne
     et rend la scène fille directe de .selx, dont la hauteur couvre
     tout le parcours. */
  .selx{display:flex;flex-direction:column}
  .selx .selx-l{display:contents}
  /* .selx-c se dissout aussi : le titre doit rester AU-DESSUS de la
     scène sur mobile, les questions dessous. */
  .selx .selx-c{display:contents}
  .selx .selqh{order:-2}
  .selx .selx-p{order:0}
  .selx .res{order:1}
  .selx .selx-l{grid-template-columns:1fr;gap:0}
  /* La cale prend la place de la scène dans la pile, au même rang.
     Sans order:-1 elle serait tombée sous les questions et la scène
     aurait laissé un trou en haut du bloc. */
  /* Plancher mobile, même raison que sur grand écran : avant les
     réponses le bloc dépasse à peine la scène, qui glissait dès
     qu'on défilait un peu.
     Valeur CHOISIE, pas maximale. À 100vh + 70 px la scène tenait
     jusqu'à 300 px de défilement, mais la page montrait 450 px
     d'ivoire vide sous les quatre boutons, à chaque visite. À
     100vh − 90 px il reste 82 px de vide et la scène tient jusqu'à
     150 px — au-delà, la question elle-même a quitté l'écran. */
  .selx{min-height:calc(100vh - 90px)}
  .selx .selx-cale{order:-1}
  .selx .selx-s{order:-1;z-index:5;
    margin:0 -22px;background:var(--ivory);padding:8px 0 10px;
    box-shadow:0 14px 16px -12px rgba(10,16,34,.28)}
  /* Ancrée, la scène est posée en position:fixed sur toute la largeur
     de l'écran : la marge négative de -22 px n'a plus lieu d'être, le
     JavaScript la remet à zéro et donne left:0 / width:100vw. Le fond
     et l'ombre restent sur l'élément, donc ils voyagent avec lui. */
  .selx .selx-s.ancre{padding-left:22px;padding-right:22px}
  /* Le cadre prend toute la hauteur disponible une fois la question
     posée dessous. Calcul : bandeau 71 + cadre + écart 14 + la plus
     haute des questions (« Quelle pièce ? », 212 px avec ses sept
     boutons) + 60 px de contenu visible dessous = 844. D'où 487 px
     de cadre, soit 463 px de dessin une fois le cadre retiré. */
  .selx .selx-s svg{max-height:463px}
  /* La question ancrée porte le même fond que le cadre : elle flotte
     au-dessus des récapitulatifs qui défilent dessous. */
  /* Les 14 px d'écart entre le cadre et la question étaient
     transparents : le bandeau du résultat défilait dedans et on
     lisait « bois vanillé » entre les deux. La première ombre peint
     cet écart en ivoire sans rien déplacer ; la seconde est l'ombre
     portée sous la question. */
  .selx .selx-p > .blk.ancre{z-index:5;background:var(--ivory);
    padding:0 22px 12px;
    box-shadow:0 -14px 0 var(--ivory), 0 14px 16px -12px rgba(10,16,34,.28)}
  /* Sous la scène, une seule question : celle à laquelle on répond.
     Les réponses déjà données passent SOUS les options au lieu de
     s'empiler au-dessus. Elles ne disparaissent pas : « Modifier »
     vit dans la ligne récap, et sans elle on ne peut plus changer de
     réponse sur mobile. */
  .selx .selx-p{display:flex;flex-direction:column}
  .selx .selx-p > .blk{order:5}
  .selx .selx-p > .blk.col{order:9}
  .selx .selx-s figure{max-width:300px;margin:0 auto}
  /* remplacé par le plafond calculé plus haut dans ce même bloc :
     40vh valait 337 px et bridait le cadre à 382 px. */
  .selx .rk{font-size:24px}
  .selx .rn{font-size:46px}
  .selx .ctext{font-size:28px}
  .selx .blk.col > :not(.rc){display:none!important}
  .selx .blk.col > .rc{display:grid;
    grid-template-columns:minmax(0,1fr) 9.25em max-content;
    gap:10px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--lineI2)}
  /* La colonne de la VALEUR est en max-content : c'est la réponse, elle
     ne passe jamais à la ligne. Le libellé prend ce qui reste et se
     coupe s'il le faut — il est secondaire, en 9,5 px capitales.
     Mesuré sur une colonne de 346 px : il reste 252 px pour le libellé
     et la valeur une fois « MODIFIER » (74 px) et les gouttières
     retirés. La valeur la plus longue, « Frais & Hespéridé », fait
     154 px ; le libellé le plus long, « AFFINER — QUELLE INTENSITÉ ? »,
     en fait 168. Les deux sur une ligne demanderaient 322 px : c'est
     impossible, il fallait choisir lequel se coupe. Une largeur fixe de
     8,6 em donnait la place au libellé et coupait « Boisé & Ambré ».
     La colonne de valeur est FIXE (10 em = 160 px) et non max-content :
     en max-content chaque ligne prenait sa propre largeur et les
     valeurs se calaient à droite, en escalier. Fixe, elles commencent
     toutes au même endroit, et 160 px couvrent la plus longue. */
  .selx .blk .rl{font-family:'Jost',sans-serif;font-size:9.5px;line-height:1.5;
    letter-spacing:.13em;text-transform:uppercase;color:var(--faintI)}
  .selx .blk .rv{font-family:var(--dis);font-size:16px;line-height:1.25;color:var(--navy)}
  .selx .blk .rm{background:none;border:0;color:var(--brass2);font-family:'Jost',sans-serif;
    font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
    cursor:pointer;padding:8px 0 8px 8px}
}

@media(prefers-reduced-motion:reduce){
  .selx .scn-rev{transition:none}
  .selx .mat,.selx .mat .ff,.selx .res{transition:none}
  .selx .d{animation:none;stroke-dashoffset:0;opacity:1}
  .selx .pt{animation:none;opacity:1}
  .selx .fd,.selx .cfade{animation:none;opacity:1}
  .selx .sil,.selx .fine.on{transition:none}
}

/* ── La phrase de réponse (chantier G4) ───────────────────────────
   Elle précède la description sensorielle et dit ce que la chose est.
   Plus sobre que le texte qui la suit : c'est une fiche d'identité,
   pas de la littérature. */
.rep{font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.65;
  color:var(--onIvory);max-width:62ch;margin:0 0 18px;
  padding-left:14px;border-left:2px solid var(--brass)}
.pdp .rep{margin-top:4px}


/* Section éditoriale de la page sélecteur : surtitre + titre, puis un
   seul paragraphe dans une colonne mesurée. Elle portait trois h2 et
   trois pavés au kilomètre, dont deux ont été supprimés et un déplacé
   dans le bloc questions-réponses. */
.seltx{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  column-gap:72px;align-items:start}
.seltx .shead{margin-bottom:0}
.seltx .seltx-c{max-width:62ch}
.seltx .seltx-c p{margin:0;font-size:17px;line-height:1.75}
@media (max-width:980px){
  .seltx{grid-template-columns:1fr}
  .seltx .shead{margin-bottom:34px}
}
@media (max-width:820px){
  .seltx .seltx-c p{font-size:16px;line-height:1.72}
}


/* ══════ Page sélecteur — bloc 1, bloc 2 ═════════════════════════
   Refonte du 14 octobre. Le bandeau ne décrit plus la page, il
   annonce les trois questions et donne un bouton pour descendre.
   Les trois entrées sont une liste ORDONNÉE : l'ordre est le même
   que celui de l'outil — matière, pièce, surface — et il n'est pas
   décoratif, le sélecteur raisonne dans cet ordre. */
.selintro .seltri{list-style:none;margin:34px 0 30px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:44px;row-gap:26px;max-width:1120px}
.selintro .seltri li{display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:14px;align-items:start}
.selintro .seltri .sn{font-family:var(--dis);font-size:22px;line-height:1.1;
  color:var(--brass)}
.selintro .seltri .st{font-size:15px;line-height:1.72;color:var(--onNavy)}
.selintro .selpr{max-width:640px;margin-bottom:30px}
.selintro .selgo{font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--brass);padding:15px 30px;
  transition:background .25s ease,color .25s ease}
.selintro .selgo:hover{background:var(--brass);color:var(--navy)}

/* Le titre du bloc 2, en rang 2 : c'est l'ancien h1 de la page, il
   annonce l'outil au lieu d'annoncer la page. */
.selqh h2{font-size:var(--t2);line-height:1.15}
.selqh h2 em{font-family:var(--disI);font-style:italic;font-size:1.12em;color:var(--brass2)}
/* la règle d'origine visait .phead.nv + .tool ; le bloc 2 s'est
   intercalé entre les deux. */
.phead.nv + .tool{padding-top:52px;border-bottom:none}

/* Le titre et les questions forment UNE case de la grille à deux
   colonnes ; la scène est l'autre. Les deux commencent donc à la même
   hauteur, sans qu'aucun élément n'ait à enjamber de rangée. */
.selx .selx-c{min-width:0}
/* La cale est une case de plus dans la grille à deux colonnes : sans
   placement explicite elle prenait la colonne 2 et repoussait la scène
   en ligne 2, colonne 1. Les deux occupent donc la MÊME case — jamais
   en même temps, puisque la scène ancrée sort du flux et que la cale
   est alors seule à tenir la place. */
@media (min-width:821px){
  .selx .selx-l > .selx-c{grid-column:1;grid-row:1}
  .selx .selx-l > .selx-cale,
  .selx .selx-l > .selx-s{grid-column:2;grid-row:1}
}
.selx .selqh{padding-bottom:34px}
@media (max-width:820px){
  .selx .selqh{padding-bottom:22px}
}

@media (max-width:980px){
  .selintro .seltri{grid-template-columns:1fr;row-gap:20px;margin:28px 0 26px}
  /* Le <br> du titre est neutralisé sur mobile : il imposait une
     coupure APRÈS « quelle pièce, », qui tombait déjà en fin de
     ligne — d'où trois lignes dont une de deux mots. Sans lui le
     titre se coupe tout seul en deux lignes (mesuré à 26 px sur un
     écran de 390 px).
     La locale porte désormais une espace AVANT le <br> : sans elle,
     neutraliser la balise collait « pièce,quelle ». */
  .selqh h2{text-wrap:balance}
  .selqh h2 br{display:none}
}


/* ══════ Page professionnels — ajouts du 14 octobre ══════════════ */

/* 1. Le texte de présentation dans un cadre bleu nuit, sur grand
      écran seulement. Sous 980 px il reprend sa forme simple : un
      pavé marine pleine largeur sur mobile écrase la page. */
/* Le cadre bleu nuit sur TOUS les ecrans : limite au grand ecran, il
   donnait une page mobile sans aucune des modifications demandees.
   Seul le rembourrage change — 52 px de respiration ne tiennent pas
   dans 390 px de large. */
.metiers .mhead{background:var(--navy);color:var(--ivory);
  padding:30px 24px 32px;margin:12px 0 44px}
.metiers .mhead > .k{color:var(--brass);margin-top:0}
.metiers .mhead h1{color:var(--ivory)}
/* laiton clair et non laiton sombre : sur le marine, var(--brass2)
   descend sous le seuil de lisibilité. */
.metiers .mhead h1 em{color:var(--brass)}
.metiers .mhead .mlead{max-width:none;margin-bottom:0}
.metiers .mhead .mlead p{color:var(--onNavy)}
@media (min-width:981px){
  .metiers .mhead{background:var(--navy);color:var(--ivory);
    padding:44px 52px 48px;margin:12px 0 64px}
  .metiers .mhead > .k{color:var(--brass);margin-top:0}
  .metiers .mhead h1{color:var(--ivory)}
  /* laiton clair et non laiton sombre : sur le marine, var(--brass2)
     descend sous le seuil de lisibilité. */
  .metiers .mhead h1 em{color:var(--brass)}
  .metiers .mhead .mlead{max-width:none;margin-bottom:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .metiers .mhead .mlead p{color:var(--onNavy);font-size:16.5px;line-height:1.85;max-width:52ch}
  .metiers .mhead .mlead p + p{margin-top:0}
}

/* 3. Mobile : les six cartes se recouvrent au défilement. Chacune est
      collée sous le bandeau et porte un fond opaque, donc la suivante
      remplace la précédente au lieu de la pousser. Le conteneur donne
      le repère de collage ; sans fond opaque on verrait les deux
      cartes l'une à travers l'autre. */
@media (max-width:820px){
  .metiers .mgrid{gap:0}
  .metiers .mgrid .mc{position:-webkit-sticky;position:sticky;top:71px;
    background:var(--ivory);padding:18px 0 26px;
    box-shadow:0 -1px 0 var(--ivory)}
  .metiers .mgrid .mc .mph{margin-bottom:14px}
}

/* ══════ APM One Day ═════════════════════════════════════════════
   BANDE PLEINE LARGEUR, VISUEL A GAUCHE.

   Premiere version, jetee : le bloc etait pose DANS la gouttiere de
   page (56 px a gauche) alors que « marketing olfactif », juste
   dessous, est pleine largeur. Deux aplats marine qui ne commencaient
   pas au meme endroit, separes par une bande d'ivoire. Un seul bloc
   de la page desobeissait a la regle, et c'etait celui-la.

   Le visuel passe a GAUCHE : les deux sections marine s'enchainent
   alors en alternance — photo a gauche, puis photo a droite — et la
   jonction se lit comme une suite editoriale. Le separateur a losange
   n'a plus lieu d'etre : le passage de l'ivoire des metiers au marine
   de One Day est celui que la page fait partout ailleurs. */
.oneday{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;padding:0;
  align-items:stretch}
.oneday .odph{order:-1;margin:0;position:relative;overflow:hidden;min-height:100%}
.oneday .odph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oneday .odtx{padding:clamp(48px,4.6vw,78px) clamp(32px,4vw,64px)}
.oneday .odlogo{width:150px;height:auto;margin-bottom:24px;display:block}
.oneday h2{font-family:var(--dis);font-weight:400;font-size:var(--t2);
  line-height:1.2;margin-bottom:8px;max-width:24ch;color:var(--ivory)}
.oneday .odst{font-family:var(--disI);font-style:italic;font-size:17px;
  color:var(--brass);margin-bottom:22px}
.oneday .odin{font-size:16px;line-height:1.78;color:var(--onNavy);margin-bottom:26px;
  max-width:62ch}
.oneday h3{font-family:var(--dis);font-weight:400;font-size:19px;line-height:1.3;
  margin-bottom:8px;color:var(--ivory)}
.oneday .odtx > p{font-size:15.5px;line-height:1.75;color:var(--onNavy);max-width:62ch;
  margin-bottom:24px}
.oneday .odpas{list-style:none;margin:0;padding:0;counter-reset:od}
.oneday .odpas li{counter-increment:od;position:relative;padding-left:38px;
  font-size:15.5px;line-height:1.75;color:var(--onNavy);max-width:60ch}
.oneday .odpas li + li{margin-top:13px}
.oneday .odpas li::before{content:counter(od);position:absolute;left:0;top:-1px;
  font-family:var(--dis);font-size:19px;color:var(--brass)}
/* Le lien vers la page contact doit se voir : sur le marine, le texte
   courant est gris-bleu, un lien sans marque passerait inapercu. */
.oneday .odpas a{color:var(--brass);border-bottom:1px solid rgba(194,170,126,.45);
  transition:border-color .25s ease}
.oneday .odpas a:hover{border-bottom-color:var(--brass)}

@media (max-width:980px){
  .oneday{grid-template-columns:1fr;padding:0}
  /* le visuel est un PORTRAIT : en 4/3 il tombait a 260 px de haut */
  /* PAS d'aspect-ratio ici. Le cadre ne portait sa hauteur que par
     cette propriete ; la ou elle n'est pas honoree — Safari avant la
     version 15, donc des iPhone encore en service — le cadre retombe a
     zero, et la photo, qui est en absolu dedans, devient invisible.
     Le logo, lui, est en flux normal : il s'affichait. C'est
     exactement ce que Francois constatait depuis le 14 octobre.
     Le rapport 3/4 est donc obtenu par le remplissage haut, qui
     fonctionne partout depuis toujours. aspect-ratio reste declare
     apres, pour les navigateurs recents : s'il est compris il reprend
     la main, sinon il est ignore sans dommage. */
  /* Paysage 3/2 en mobile, demande de Francois le 15 octobre : un
     portrait plein ecran obligeait a trois gestes de defilement avant
     d'atteindre le texte. Le visuel du mobile est cadre pour ce
     rapport, celui du bureau reste en portrait. */
  /* RIEN DE SAVANT ICI, ET C'EST VOLONTAIRE.
     Trois mecaniques ont ete essayees pour donner sa hauteur au cadre
     — aspect-ratio, puis le remplissage haut, l'image restant en
     absolu dedans — et aucune n'a affiche la photo sur l'iPhone de
     Francois, alors que le logo juste en dessous s'affichait. Seule
     difference entre les deux : le logo est une image ORDINAIRE, dans
     le flux, qui porte sa propre hauteur.
     On fait donc pareil : plus de cadre a hauteur calculee, plus de
     position absolue, plus d'object-fit. L'image occupe la largeur et
     deduit sa hauteur de ses proportions, 1600 x 1067, soit 3:2. Une
     image en flux ne peut pas retomber a zero. */
  .oneday .odph{min-height:0;order:-1;height:auto;padding-top:0;aspect-ratio:auto}
  .oneday .odph img{position:static;width:100%;height:auto;display:block}
  /* Parallaxe du 15 octobre, sans une ligne de JavaScript : la photo
     est COLLANTE sous le bandeau, le bloc marine glisse par-dessus en
     defilant. L'effet se paie en deux precautions —
     1. le bloc de texte doit porter son propre fond, sinon la photo se
        voit au travers ;
     2. position:sticky cree un contexte d'empilement : aucun packshot
        detoure par mix-blend-mode ne doit vivre la-dedans. Il n'y en a
        pas dans cette section, et il ne faudra pas en mettre. */
  .oneday{position:relative}
  /* Le prefixe -webkit- d'abord : les Safari anciens ne connaissent
     que position:-webkit-sticky, et une valeur inconnue fait jeter la
     declaration entiere. Le reste du site l'ecrit deja ainsi. */
  .oneday .odph{position:-webkit-sticky;position:sticky;top:71px;z-index:0}
  /* Verre depoli, demande du 15 octobre : le bloc laisse deviner la
     photo au lieu de la masquer. Le fond reste a 86 % d'opacite, ce
     qui garde le texte lisible — en dessous, les gris du corps de
     texte passent sous le seuil de contraste. Meme recette que le
     bandeau du site en mobile. */
  .oneday .odtx{position:relative;z-index:1;background:rgba(31,44,78,.86);
    -webkit-backdrop-filter:blur(18px) saturate(1.06);
    backdrop-filter:blur(18px) saturate(1.06)}
  /* La ou le flou n'existe pas, le fond redevient plein : un marine a
     86 % sans flou laisserait lire la photo au travers du texte. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .oneday .odtx{background:var(--navy)}
  }
  @media(prefers-reduced-motion:reduce){
    .oneday .odph{position:static}
  }
  .oneday .odtx{padding:40px 24px 48px}
  .oneday .odlogo{width:132px}
}

/* ═══ BOUTIQUE — panier, tunnel de commande, compte ═══════════════
   Ajoute en V145. Tout est porte par deux racines, .pntir pour le
   tiroir et #pnbox pour les ecrans pleine page : aucune regle ne peut
   atteindre le reste du site. Les ecrans sont des surcouches et non
   des vues du routeur : rien a generer, aucune route de plus.
   ═════════════════════════════════════════════════════════════════ */
.pnb{font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.02em;color:inherit}
.pnb:hover{color:var(--brass2)}
.pnvoile{position:fixed;inset:0;background:rgba(15,24,48,.42);opacity:0;visibility:hidden;
  transition:opacity .3s;z-index:60}
.pnvoile.on{opacity:1;visibility:visible}
.pntir{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:92vw;background:var(--ivory);
  z-index:61;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-30px 0 70px rgba(15,24,48,.18)}
.pntir.on{transform:none}
.pntir .th{display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px;border-bottom:1px solid var(--lineI)}
.pntir .th h2{font-family:var(--dis);font-weight:400;font-size:var(--t4);margin:0}
.pntir .th button,.pntir .cont{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--onIvory)}
.pntir .tb{flex:1;overflow-y:auto;padding:8px 26px}
.pntir .vide{padding:60px 0;text-align:center;color:var(--onIvory);font-size:15px}
.pntir .tf{border-top:1px solid var(--lineI);padding:22px 26px 26px;background:var(--ivory2)}
.pntir .tot,#pnbox .tot{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Jost',sans-serif;font-size:13px;margin-bottom:4px}
.pntir .tot.gros,#pnbox .tot.gros{font-size:17px;margin:12px 0 6px}
.pntir .liv{font-size:12px;color:var(--onIvory);font-family:'Jost',sans-serif;margin-bottom:16px}
.pntir .go,#pnbox .suiv{width:100%;background:var(--navy);color:var(--ivory);
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  padding:17px;transition:background .25s}
.pntir .go:hover,#pnbox .suiv:hover{background:#0F1830}
.pntir .go[disabled]{opacity:.35;cursor:default}
.pntir .cont{display:block;width:100%;text-align:center;margin-top:12px;letter-spacing:.18em}

.pnlg{display:grid;grid-template-columns:76px 1fr auto;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--lineI2);align-items:start}
.pnlg .pk{display:flex;align-items:center;justify-content:center;background:var(--ivory)}
.pnlg .pk img{max-height:86px;width:auto;mix-blend-mode:multiply}
.pnlg h4{font-family:var(--dis);font-weight:400;font-size:15px;line-height:1.3;margin-bottom:2px}
.pnlg .ct{font-family:'Jost',sans-serif;font-size:11px;color:var(--onIvory);margin-bottom:10px}
.pnlg .px{font-family:'Jost',sans-serif;font-size:13.5px;text-align:right;white-space:nowrap}
.pnq{display:inline-flex;align-items:center;border:1px solid var(--lineI)}
.pnq button{width:30px;height:30px;font-family:'Jost',sans-serif;font-size:14px;color:var(--onIvory)}
.pnq button:hover{color:var(--navy)}
.pnq b{min-width:26px;text-align:center;font-family:'Jost',sans-serif;font-size:12.5px;font-weight:400}
.pnsup{display:block;margin-top:9px;font-family:'Jost',sans-serif;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faintI);text-align:right}
.pnsup:hover{color:var(--navy)}

/* ── ecrans pleine page ── */
#pnbox{display:none;position:fixed;inset:0;z-index:70;background:var(--ivory);overflow-y:auto}
#pnbox.on{display:block}
#pnbox .cmdh{border-bottom:1px solid var(--lineI);padding:22px 56px;display:flex;
  align-items:center;justify-content:space-between;background:var(--ivory)}
#pnbox .cmdh img{height:44px}
#pnbox .cmdh .sec,#pnbox .cmdh button{font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--onIvory)}
#pnbox .cmd{display:grid;grid-template-columns:1fr 400px;align-items:start}
#pnbox .cmdl{padding:54px 56px 92px;max-width:720px}
/* pas de position:sticky : elle isolerait le mix-blend-mode des packshots */
#pnbox .cmdr{background:var(--ivory2);padding:54px 44px 92px;
  border-left:1px solid var(--lineI2);min-height:100vh;position:relative}
#pnbox .cmdr .pnlg{grid-template-columns:62px 1fr auto;padding:16px 0}
#pnbox .cmdr .pnlg .pk{background:var(--ivory2)}
#pnbox .cmdr .pnlg .pk img{max-height:66px}
#pnbox .cmdr h3{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--onIvory);margin-bottom:22px;font-weight:400}
#pnbox .tot.gros{border-top:1px solid var(--lineI);padding-top:14px;margin-top:16px}
#pnbox .mention{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--faintI);
  line-height:1.7;margin-top:22px}
#pnbox .recbt{display:none}

#pnbox .pas{display:flex;margin-bottom:44px;border-bottom:1px solid var(--lineI)}
#pnbox .pas div,#pnbox .pas button{flex:1;padding-bottom:14px;font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faintI);position:relative}
#pnbox .pas div,#pnbox .pas button.on{color:var(--navy)}
#pnbox .pas div,#pnbox .pas button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--navy)}
#pnbox .pas div,#pnbox .pas button.fait{color:var(--brass2)}
#pnbox .pas em{font-style:normal;color:var(--faintI);margin-right:8px}
#pnbox .etp{display:none}
#pnbox .etp.on{display:block}
#pnbox .etp h2{font-family:var(--dis);font-weight:400;font-size:var(--t3);margin-bottom:8px}
#pnbox .etp .sst{color:var(--onIvory);font-size:15px;margin-bottom:28px;max-width:56ch}
/* L'attribut `hidden` du navigateur pose `display:none`, mais avec une
   specificite nulle : la moindre regle de classe le bat. `#pnbox .chp`
   pose `display:grid` et gagnait — le bloc entreprise s'affichait case
   decochee, raison sociale et ICE visibles d'emblee. Vu par Francois le
   20 octobre sur capture. Cette regle rend a `hidden` son dernier mot.
   A RETENIR : tout bloc masque par `hidden` qui porte aussi une classe
   de mise en page est visible, sauf regle explicite. */
#pnbox [hidden]{display:none!important}
/* « Vous avez deja un compte ? » — pose juste sous le chapeau, avant
   les champs : apres, le client a deja tape et le detour lui coute. */
/* DEUX PORTES SUR UNE LIGNE, le 23 octobre : « déjà un compte ? » a
   gauche, « pas encore client ? » a droite. Elles se repondent, elles
   se lisent ensemble. Sur telephone la ligne se casse et les deux
   passent l'une sous l'autre : les coller serait illisible. */
#pnbox .dejacpt{margin-top:-18px;margin-bottom:28px;
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
/* L'offre de compte, sous les quatre champs. Elle apparait en cours
   de saisie : une marge franche evite qu'elle pousse le bloc suivant
   d'un demi-interligne quand elle se montre. */
#pnbox .nouvcpt{margin:-10px 0 26px}
/* LE BLOC DE CREATION DE COMPTE SE DISTINGUE DE LA SAISIE ORDINAIRE :
   il n'est pas un champ de plus, c'est une decision. Un filet et un
   fond tres leger suffisent a le dire sans l'encadrer lourdement. */
#pnbox .ouvrcpt{border-left:2px solid var(--navy);background:rgba(31,44,78,.028);
  padding:18px 20px 4px;margin:0 0 26px}
#pnbox .ouvrcpt .ouvrt{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);margin:0 0 8px}
#pnbox .ouvrcpt .ouvri{font-size:13px;line-height:1.6;color:var(--onIvory);margin:0 0 16px}
#pnbox .nouvcpt button,
#pnbox .dejacpt a,
#pnbox .dejacpt button{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  font:inherit;cursor:pointer;background:none;border:none;padding:0}
#pnbox .dejacpt a:hover,#pnbox .dejacpt button:hover,
#pnbox .nouvcpt button:hover{color:var(--brass2)}
/* Le lien qui referme la creation, pose dans l'aide sous le champ. */
#pnbox .lienb{font:inherit;font-size:inherit;color:var(--onIvory);
  text-decoration:underline;text-underline-offset:3px;background:none;border:none;
  padding:0;cursor:pointer}
#pnbox .lienb:hover{color:var(--navy)}
#pnbox .chp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
#pnbox .chp .l{grid-column:1/-1}
#pnbox label{display:block;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--onIvory);margin-bottom:7px}
#pnbox input[type=text],#pnbox input[type=email],#pnbox input[type=tel],
#pnbox input[type=password],#pnbox select{
  width:100%;background:transparent;border:1px solid var(--lineI);padding:14px 15px;
  font-family:'Jost',sans-serif;font-size:14px;color:var(--navy);transition:border-color .2s}
#pnbox input:focus,#pnbox select:focus{outline:none;border-color:var(--navy)}
#pnbox .aide{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--faintI);margin-top:7px}
#pnbox .coche{display:flex;align-items:center;gap:11px;cursor:pointer;margin:4px 0 24px;
  font-family:'Jost',sans-serif;font-size:14px;color:var(--navy)}
#pnbox .coche input{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
/* QUATRE COLONNES DEPUIS LE 23 OCTOBRE, et non plus trois : la marque
   du prestataire s'intercale entre le libelle et le prix. Avec trois
   colonnes elle passait a la ligne et cassait l'alignement du bloc. */
#pnbox .opt{border:1px solid var(--lineI);padding:19px 20px;margin-bottom:12px;cursor:pointer;
  display:grid;grid-template-columns:18px 1fr auto auto;gap:15px;align-items:start;transition:border-color .2s}
/* Discrete : c'est une mention de confiance, pas une signature.
   LA TAILLE EST DONNEE EN HAUTEUR, PAS EN LARGEUR — 23 octobre.
   Stripe a un rapport de 2,40, DHL de 4,53 : a largeur egale, le
   second ferait moitie moins haut que le premier. Les deux fichiers
   sont recadres sur leur encre pour que cette hauteur soit celle du
   dessin et non celle d'une marge. */
/* ALIGNEE SUR LA LIGNE DU LIBELLE, pas centree dans le bloc. Centree,
   la marque flottait entre le libelle et sa description — defaut vu par
   Francois le 24 octobre sur Aramex. On la cale donc sur la PREMIERE
   ligne, celle qui porte le nom et le prix : hauteur de ligne 23,8 px,
   d'ou le demi-ecart. La hauteur passe par --mh pour que la marge suive
   toute seule quand une marque demande sa propre taille. */
#pnbox .opt .presta{--mh:18px;height:var(--mh);width:auto;align-self:start;
  margin-top:calc((24px - var(--mh)) / 2);opacity:.72}
/* DEUX MARQUES DEMANDENT LEUR PROPRE HAUTEUR, et ce n'est pas un
   caprice : la regle en hauteur egalise les BOITES, pas les LETTRES.
     • le CMI est un ecusson borde — ses lettres n'occupent que 47 % de
       sa hauteur. A 18 px, elles tombaient a 8 px, illisibles. A 24 px
       elles retrouvent la taille des lettres de DHL, et l'ecusson fait
       43 px de large, soit exactement la largeur de la marque Stripe ;
     • « aramex » est un mot tout en bas-de-casse, sans jambage : son
       encre EST sa hauteur d'x. A 18 px il ecrasait tout le bloc. */
#pnbox .opt .presta.cmi{--mh:24px}
#pnbox .opt .presta.aramex{--mh:13px}
/* Le logo FedEx Express tient sur deux etages — le mot FedEx, puis
   « Express » dessous. A 18px, hauteur du logo FedEx seul, le second
   etage devient illisible. On lui donne donc plus de hauteur. */
#pnbox .opt .presta.fdx{--mh:18px}
#pnbox .opt .presta.fdxx{--mh:28px}
/* EN COLONNE ETROITE, LA MARQUE PREND SA PROPRE LIGNE. Mesure le
   23 octobre sur 390 px : avec quatre colonnes, « DHL Express — 24 a
   48 h ouvrees » se repliait en trois lignes et la marque se retrouvait
   plantee au milieu du libelle. On place alors explicitement les quatre
   elements plutot que de laisser la grille serrer : radio, libelle et
   prix sur la premiere ligne, la marque dessous, alignee a gauche du
   libelle et reduite a 14 px. */
@media (max-width:620px){
  #pnbox .opt{grid-template-columns:18px 1fr auto;column-gap:13px;row-gap:9px}
  #pnbox .opt i{grid-area:1/1}
  #pnbox .opt > div{grid-area:1/2}
  #pnbox .opt .p{grid-area:1/3}
  /* En colonne etroite la marque a sa propre ligne : plus rien a
     aligner, la marge repart a zero. */
  #pnbox .opt .presta{grid-area:2/2;justify-self:start;align-self:start;
    --mh:14px;margin-top:0}
  #pnbox .opt .presta.cmi{--mh:19px}
  #pnbox .opt .presta.aramex{--mh:11px}
  #pnbox .opt .presta.fdx{--mh:14px}
  #pnbox .opt .presta.fdxx{--mh:23px}
}
#pnbox .opt:hover{border-color:var(--navy)}
#pnbox .opt.sel{border-color:var(--navy);background:#EFEBE1}
#pnbox .opt i{width:14px;height:14px;border:1px solid var(--navy);border-radius:50%;margin-top:4px;display:block}
#pnbox .opt.sel i{background:var(--navy);box-shadow:inset 0 0 0 3px var(--ivory)}
#pnbox .opt b{font-weight:400;font-family:'Jost',sans-serif;font-size:14px;display:block;margin-bottom:3px}
#pnbox .opt span{font-size:13px;color:var(--onIvory);font-family:'Jost',sans-serif;line-height:1.6}
#pnbox .opt .p{font-family:'Jost',sans-serif;font-size:13.5px;white-space:nowrap}
#pnbox .avert{border-left:2px solid var(--brass);background:#EFEBE1;padding:16px 18px;
  font-family:'Jost',sans-serif;font-size:12.5px;line-height:1.7;color:var(--onIvory);margin-bottom:26px}
#pnbox .nav2{display:flex;align-items:center;gap:22px;margin-top:34px}
#pnbox .nav2 .suiv{width:auto;padding:17px 40px}
#pnbox .nav2 .ret{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--onIvory)}
#pnbox .nav2 .ret:hover{color:var(--navy)}

#pnbox .conf{padding:86px 56px 110px;max-width:760px;margin:0 auto;text-align:center}
#pnbox .conf .los{width:9px;height:9px;background:var(--brass);transform:rotate(45deg);margin:0 auto 26px}
#pnbox .conf h1{font-family:var(--dis);font-weight:400;font-size:34px;line-height:1.2;margin-bottom:14px}
#pnbox .conf .lead{color:var(--onIvory);margin:0 auto 34px;max-width:52ch}
#pnbox .conf .num{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:46px}
/* LES DEUX SORTIES DE LA CONFIRMATION, le 23 octobre. L'ecran etait un
   cul-de-sac : le client venait de payer et n'avait plus rien a
   cliquer. Le lien vers l'espace client ne s'affiche que s'il y a un
   compte — c'est le script qui le decide, pas cette feuille. */
#pnbox .confsorties{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
@media(max-width:560px){
  #pnbox .confsorties{flex-direction:column;align-items:stretch}
  #pnbox .confsorties .btn{text-align:center}
}

/* LES COORDONNEES BANCAIRES SUR LA CONFIRMATION, le 23 octobre.
   Meme cadre que le bloc du compte, pour qu'ils se suivent sans se
   disputer. Les valeurs en Jost : un IBAN se recopie, il doit se lire
   caractere par caractere. */
#pnbox .banq{border:1px solid var(--lineI);padding:30px 34px 26px;text-align:left;margin-bottom:22px}
#pnbox .banq h2{font-family:var(--dis);font-weight:400;font-size:var(--t4);margin-bottom:16px}
#pnbox .banq dl{display:grid;grid-template-columns:auto 1fr;gap:7px 22px;margin:0 0 14px}
#pnbox .banq dt{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onIvory);align-self:center}
#pnbox .banq dd{margin:0;font-family:'Jost',sans-serif;font-size:14.5px;letter-spacing:.02em;
  word-break:break-word}
#pnbox .banq .aide{font-size:13px;color:var(--onIvory);line-height:1.6}
@media(max-width:560px){ #pnbox .banq dl{grid-template-columns:1fr;gap:2px 0}
  #pnbox .banq dd{margin-bottom:10px} }

#pnbox .ccpt{border:1px solid var(--lineI);padding:34px 34px 30px;text-align:left}
#pnbox .ccpt h2{font-family:var(--dis);font-weight:400;font-size:var(--t4);margin-bottom:8px}
#pnbox .ccpt p{color:var(--onIvory);font-size:14.5px;margin-bottom:22px}

#pnbox .cpt{padding:58px 56px 100px}
#pnbox .cpt h1{font-family:var(--dis);font-weight:400;font-size:32px;margin-bottom:6px}
#pnbox .cpt .sst{color:var(--onIvory);margin-bottom:40px}
#pnbox .ongl{display:flex;gap:30px;border-bottom:1px solid var(--lineI);margin-bottom:38px}
#pnbox .ongl button{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faintI);padding-bottom:14px;position:relative}
#pnbox .ongl button.on{color:var(--navy)}
#pnbox .ongl button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--navy)}
#pnbox .vcpt{display:none}
#pnbox .vcpt.on{display:block}
#pnbox .cde,#pnbox .adrb{border:1px solid var(--lineI);padding:24px 26px;margin-bottom:14px}
#pnbox .cde{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
#pnbox .cde .ref,#pnbox .adrb .ref{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:6px}
#pnbox .cde h4{font-family:var(--dis);font-weight:400;font-size:17px;margin-bottom:4px}
#pnbox .cde .det{font-family:'Jost',sans-serif;font-size:13px;color:var(--onIvory)}
#pnbox .cde .eta{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass2);border:1px solid var(--brass);padding:8px 14px;white-space:nowrap}

@media(max-width:1100px){
  #pnbox .cmd{grid-template-columns:1fr}
  #pnbox .cmdr{min-height:0;border-left:none;border-top:1px solid var(--lineI2);
    border-bottom:1px solid var(--lineI2);padding:0;order:-1}
  #pnbox .cmdr > h3{display:none}
  #pnbox .recbt{display:flex;width:100%;align-items:center;justify-content:space-between;
    gap:16px;padding:18px 22px;font-family:'Jost',sans-serif;font-size:12.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--onIvory)}
  #pnbox .recbt b{letter-spacing:0;font-size:15px;color:var(--navy);text-transform:none;font-weight:400}
  #pnbox .recbt::after{content:'';position:absolute;right:22px;bottom:14px;width:7px;height:7px;
    border-right:1px solid var(--onIvory);border-bottom:1px solid var(--onIvory);transform:rotate(45deg)}
  #pnbox .cmdr.ouvert .recbt::after{transform:rotate(-135deg);bottom:10px}
  #pnbox .corps{display:none;padding:0 22px 26px}
  #pnbox .cmdr.ouvert .corps{display:block}
  #pnbox .cmdl{padding:40px 22px 70px;max-width:none}
}
@media(max-width:820px){
  #pnbox .cmdh{padding:16px 22px}
  #pnbox .chp{grid-template-columns:1fr}
  #pnbox .conf,#pnbox .cpt{padding-left:22px;padding-right:22px}
  #pnbox .pas div,#pnbox .pas button{font-size:9.5px;letter-spacing:.1em}
  #pnbox .pas em{display:none}
  #pnbox .nav2 .suiv{flex:1;text-align:center;padding:17px 20px}
  .pntir{width:100%;max-width:100%}
}

/* ═══ ESPACE CLIENT ═══════════════════════════════════════════════
   Quatre vues du routeur, ajoutees en V147. Elles portent le vrai
   bandeau et le vrai pied ; seul le tunnel de commande garde son
   bandeau reduit.
   ═════════════════════════════════════════════════════════════════ */

/* pictogramme du compte dans le bandeau */
.icpt{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.1;
  stroke-linecap:round;display:block}
.icpt-l{display:inline-flex;align-items:center;color:var(--navy);transition:color .2s}
.icpt-l:hover{color:var(--brass2)}

/* ── gabarit des pages isolees : connexion, creation, mot de passe ── */
.cpseul{max-width:560px;margin:0 auto;padding:62px 24px 96px}
.cpseul.centre{text-align:center}
.cpseul .fil{margin-bottom:22px}
.cpseul h1{font-family:var(--dis);font-weight:400;font-size:30px;line-height:1.2;margin-bottom:12px}
.cplead{color:var(--onIvory);font-size:15.5px;margin-bottom:26px;line-height:1.8}
.cpavert{font-family:'Jost',sans-serif;font-size:11.5px;line-height:1.7;color:var(--brass2);
  border-left:2px solid var(--brass);padding:10px 14px;margin-bottom:28px;text-align:left}

.cpchp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px;text-align:left}
.cpchp .l{grid-column:1/-1}
.cpetroit{max-width:620px}
.cpseul label,.cpcorps label{display:block;font-family:'Jost',sans-serif;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--onIvory);margin-bottom:7px}
/* Les champs de mot de passe manquaient a cette liste : ils etaient
   rendus sans aucune mise en forme, petits et arrondis, a cote des
   champs e-mail pleine largeur. Trouve le 18 octobre par Francois, sur
   la page Se connecter puis sur Creer un compte. Ils etaient de type
   texte jusqu'au 17 octobre, d'ou l'oubli. */
.cpseul input[type=text],.cpseul input[type=email],.cpseul input[type=tel],
.cpseul input[type=password],
.cpcorps input[type=text],.cpcorps input[type=email],.cpcorps input[type=tel],
.cpcorps input[type=password]{
  width:100%;background:transparent;border:1px solid var(--lineI);padding:14px 15px;
  font-family:'Jost',sans-serif;font-size:14px;color:var(--navy);transition:border-color .2s}
.cpseul input:focus,.cpcorps input:focus{outline:none;border-color:var(--navy)}
/* Afficher le mot de passe. Le bouton se pose DANS le cadre du champ,
   a droite ; le champ reserve la place par un retrait interieur, sinon
   une longue phrase de passe passerait dessous. */
.cpmdpw{position:relative}
.cpmdpw input{padding-right:92px!important}
.cpoeil{position:absolute;right:1px;top:1px;bottom:1px;width:86px;background:none;border:0;
  cursor:pointer;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onIvory);transition:color .2s}
.cpoeil:hover,.cpoeil[aria-pressed="true"]{color:var(--navy)}
.cpoeil:focus-visible{outline:1px solid var(--navy);outline-offset:-2px}
.cpaide,.cpjaugel{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--faintI);margin-top:7px}
/* Les valeurs lues sur le compte portent leurs retours a la ligne dans
   le texte : une adresse tient sur trois lignes, pas sur une. */
[data-cpf]{white-space:pre-line}
/* Une commande dans « Mes commandes » : l'entete, puis une ligne par
   article, puis le total. Les articles tenaient sur une seule ligne,
   separes par des virgules, et le total passait pour un prix. */
/* La carte n'est plus une grille a trois colonnes : l'etat est passe
   dans l'entete, et les articles s'empilent dessous. */
.cpcde{display:block}
.cpcde .cdh{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:16px}
.cpcde .cdart{list-style:none;margin:0;padding:0}
.cpcde .cdart li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid var(--lineI);font-size:14.5px}
.cpcde .cdart li em{font-style:normal;color:var(--navy);font-family:'Jost',sans-serif;font-size:13px}
.cpcde .cdart li b{font-weight:400;white-space:nowrap}
.cpcde .cdtot{display:flex;justify-content:space-between;gap:18px;margin-top:14px;
  font-family:var(--dis);font-size:17px}

/* ══ LE DETAIL D'UNE COMMANDE — 24 octobre ═════════════════════════
   La liste disait « 69 € » puis « Total 84 € » sans rien entre les
   deux. Le compte est desormais toujours detaille : sous-total, port
   AVEC SON LIBELLE, total. Meme decomposition que le courriel, parce
   qu'un client qui compare les deux ne doit pas trouver d'ecart. */
.cpcde .cdart li .cdimg{width:40px;height:40px;flex:0 0 40px;object-fit:contain;
  background:rgba(31,44,78,.04);display:block}
.cpcde .cdart li{align-items:center}
.cpcde .cdart li > span{flex:1 1 auto}
.cpcde .cdcompte{margin-top:16px}
.cpcde .cdl{display:flex;justify-content:space-between;gap:18px;margin:0 0 7px;
  font-size:14px;color:var(--onIvory)}
.cpcde .cdl b{font-weight:400;color:var(--navy);white-space:nowrap}
.cpcde .cdl.cdtot{margin-top:12px;padding-top:12px;border-top:1px solid var(--lineI);
  color:var(--navy)}
.cpcde .cdl.cdpai{margin-top:10px}
.cpcde .cdplus{margin:18px 0 0}
.cpcde .cdadrs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--lineI2)}
@media (max-width:620px){.cpcde .cdadrs{grid-template-columns:1fr;gap:20px}}
.cpcde .cdadr p:last-child{margin:0;font-size:14px;line-height:1.7}
.cpcde .cdsuivi{margin-top:24px;padding:16px 18px;background:rgba(31,44,78,.04)}
.cpcde .cdsuivi p:last-child{margin:0;font-size:15px}
.cpcde .cdtot b{font-weight:400}
.cpjaugel.centre{text-align:center}
.cpjauge{display:flex;gap:4px;margin-top:9px}
.cpjauge i{height:3px;flex:1;background:var(--lineI);transition:background .25s}
.cpjauge.f1 i:nth-child(1){background:#B45B4A}
.cpjauge.f2 i:nth-child(-n+2){background:var(--brass2)}
.cpjauge.f3 i{background:#5E7B55}

.cpseul label.cpcoche,.cpcorps label.cpcoche{display:flex;align-items:flex-start;gap:11px;
  cursor:pointer;margin:6px 0 20px;font-family:'Jost',sans-serif;font-size:13.5px;
  line-height:1.6;color:var(--navy);text-transform:none;letter-spacing:0;text-align:left}
.cpcoche input{width:16px;height:16px;margin-top:2px;accent-color:var(--navy);flex:none}

.cpbtn{background:var(--navy);color:var(--ivory);font-family:'Jost',sans-serif;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:17px 36px;
  display:inline-block;text-align:center;transition:background .25s}
.cpbtn:hover{background:#0F1830}
.cplien{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--onIvory)}
.cplien:hover{color:var(--navy)}
.cpact{display:flex;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.cpact.centre{justify-content:center}
.cpsous{margin-top:24px;padding-top:20px;border-top:1px solid var(--lineI2);
  font-family:'Jost',sans-serif;font-size:13px;color:var(--onIvory)}
.cpsous a{color:var(--navy);border-bottom:1px solid var(--lineI)}

.cpmsg{border-left:2px solid var(--brass);background:#EFEBE1;padding:15px 18px;text-align:left;
  font-family:'Jost',sans-serif;font-size:13px;line-height:1.7;color:var(--onIvory);margin-bottom:24px}
.cpmsg.err{border-left-color:#B45B4A;background:#F3E7E3;color:#7A3A2E}
.cplos{width:9px;height:9px;background:var(--brass);transform:rotate(45deg);margin:0 auto 26px}
.cpenv{width:62px;height:62px;margin:0 auto 24px;border:1px solid var(--lineI);
  display:flex;align-items:center;justify-content:center}
.cpenv svg{width:26px;height:26px;stroke:var(--brass2);fill:none;stroke-width:1.1}

/* ── espace connecte ── */
.cphead{padding:46px 56px 0}
.cphead h1{font-family:var(--dis);font-weight:400;font-size:32px;margin-bottom:6px}
.cpsst{color:var(--onIvory);margin-bottom:22px}
.cpong{display:flex;gap:28px;border-bottom:1px solid var(--lineI);padding:0 56px;flex-wrap:wrap;
  background:var(--ivory)}
.cpong button{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faintI);padding-bottom:14px;position:relative}
.cpong button.on{color:var(--navy)}
.cpong button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--navy)}
/* La deconnexion est poussee a droite de la meme ligne, demande de
   Francois le 18 octobre : elle etait au-dessus, sur sa propre ligne,
   ou elle ressemblait a un onglet de plus. */
.cpong .cpdeco{margin-left:auto;font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faintI);
  padding-bottom:14px;text-decoration:underline;text-underline-offset:4px}
.cpong .cpdeco:hover{color:var(--navy)}
.cpcorps{padding:40px 56px 96px}
.cpv{display:none}
.cpv.on{display:block}
.cpt2{font-size:26px;margin:14px 0 4px}

.cptuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cptuile{border:1px solid var(--lineI);padding:26px}
.cptuile .ref,.cpbloc .ref{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:12px}
.cptuile h3{font-size:18px;line-height:1.3;margin-bottom:6px}
.cptuile p,.cpbloc p{font-family:'Jost',sans-serif;font-size:13.5px;color:var(--onIvory);line-height:1.75}
.cptuile .go{display:inline-block;margin-top:14px;font-family:'Jost',sans-serif;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brass2)}

/* EN BLOC, PLUS EN TROIS COLONNES — 24 octobre. La commande etait
   mise en page comme une ligne de tableau : l'en-tete a gauche, les
   articles au milieu, le total a droite. Lisible pour une commande d'un
   article, illisible des qu'il y en a deux, et impossible a detailler.
   La commande se lit maintenant de haut en bas, comme le courriel. */
.cpcde{border:1px solid var(--lineI);padding:24px 26px;margin-bottom:14px;display:block}
.cpcde .ref{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faintI);margin-bottom:6px}
.cpcde h4{font-weight:400;font-size:17px;margin-bottom:4px}
.cpcde .det{font-family:'Jost',sans-serif;font-size:13px;color:var(--onIvory)}
.cpeta{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass2);border:1px solid var(--brass);padding:8px 14px;white-space:nowrap}

.cpdet{display:grid;grid-template-columns:1fr 330px;gap:46px;align-items:start;margin-top:26px}
.cplg{display:grid;grid-template-columns:72px 1fr auto;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--lineI2);align-items:center}
.cplg .pk{display:flex;align-items:center;justify-content:center;background:var(--ivory)}
.cplg .pk img{max-height:78px;width:auto;mix-blend-mode:multiply}
.cplg h4{font-weight:400;font-size:16px;margin-bottom:2px}
.cplg .ct{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--onIvory)}
.cplg .px{font-family:'Jost',sans-serif;font-size:13.5px;white-space:nowrap}
.cptot{display:flex;justify-content:space-between;font-family:'Jost',sans-serif;font-size:13px;margin-top:10px}
.cptot.gros{font-size:17px;border-top:1px solid var(--lineI);padding-top:14px;margin-top:16px}
.cpbloc{border:1px solid var(--lineI);padding:24px 26px;margin-bottom:14px}

.cpsuivi{list-style:none;margin:6px 0 0;padding:0}
.cpsuivi li{position:relative;padding:0 0 22px 26px;font-family:'Jost',sans-serif;
  font-size:13.5px;color:var(--onIvory);line-height:1.6}
.cpsuivi li::before{content:'';position:absolute;left:0;top:5px;width:9px;height:9px;
  border:1px solid var(--lineI);background:var(--ivory);border-radius:50%}
.cpsuivi li::after{content:'';position:absolute;left:4px;top:14px;bottom:0;width:1px;background:var(--lineI)}
.cpsuivi li:last-child::after{display:none}
.cpsuivi li.fait::before{background:var(--brass);border-color:var(--brass)}
.cpsuivi li.fait{color:var(--navy)}
.cpsuivi li b{font-weight:400;display:block}
.cpsuivi li span{font-size:12px;color:var(--faintI)}

.cpdanger{border:1px solid #D9C4BE;background:#F7EFEC;padding:26px 28px;margin-top:30px}
.cpdanger h3{font-weight:400;font-size:19px;margin-bottom:8px;color:#7A3A2E}
.cpdanger p{font-size:14px;line-height:1.75;color:#7A3A2E;margin-bottom:18px}
.cpdanger .cpbtn{background:#8B4436}
.cpdanger .cpbtn:hover{background:#73372B}
.cpdanger .cpmsg.err{margin:18px 0 0}

@media(max-width:900px){
  .cphead,.cpong,.cpcorps{padding-left:22px;padding-right:22px}
  .cphead{padding-top:30px}
  .cpcorps{padding-top:28px}
  .cptuiles{grid-template-columns:1fr}
  .cpdet{grid-template-columns:1fr;gap:26px}
  .cpcde{grid-template-columns:1fr;gap:12px;align-items:start}
  .cpeta{justify-self:start}
  .cpchp{grid-template-columns:1fr}
  .cpseul{padding:38px 22px 64px}
  .cpseul h1{font-size:26px}
  .cpong{gap:18px}
}

/* L'echelle bascule a 980 px, le palier ou le grand titre de
   l'accueil changeait deja de taille. UN SEUL palier pour toute la
   typographie, au lieu des treize d'avant. */
@media (max-width:980px){:root{--t1:34px;--t2:28px;--t3:23px;--t4:20px}}
/* 34 / 28 / 23 / 20 : ce sont les valeurs DOMINANTES d'avant le
   15 octobre sur telephone — 34 px sur 24 pages pour le titre de
   page, 28 px sur 15 pages pour les titres de section, 20 px sur
   23 pages pour les titres de carte. L'aspect connu est conserve,
   mais applique partout de la meme facon, et 34 reste au-dessus de
   28 : la hierarchie ne peut plus s'inverser. L'echelle B essayee
   d'abord (38/27/23/19) grossissait le titre de page. */



/* ══ SUR MESURE ══════════════════════════════════════════════════
   Reprise de sur-mesure.html le 15 octobre. Chaque regle est
   prefixee `#vsur-mesure .smwrap` : les 49 noms de classe que les
   deux fichiers avaient en commun ne peuvent plus se contredire,
   et le bandeau, qui est hors de .smwrap, garde les regles du
   site. Les tailles de titre suivent l'echelle commune.      */

/* LA REGLE GLOBALE `section{padding:92px 56px}` MORD ICI AUSSI.
   Quatrieme fois sur ce projet, apres #vaccueil, le bloc des formats
   et le selecteur. Les cinq sections de Sur mesure posent elles-memes
   leurs marges : sans cette ligne elles recevaient 184 px de hauteur
   et 44 px de largeur en trop — mesure du 15 octobre sur 390 px, la
   section d'ouverture passait de 1 054 a 1 372 px et la photo perdait
   son bord perdu. */
#vsur-mesure .smwrap > section{padding:0}
#vsur-mesure .smwrap img{display:block;max-width:100%}
#vsur-mesure .smwrap a{color:inherit;text-decoration:none}
#vsur-mesure .smwrap button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
#vsur-mesure .smwrap .dis{font-family:var(--dis);font-weight:400}
#vsur-mesure .smwrap .sn{font-family:'Jost',system-ui,sans-serif}
#vsur-mesure .smwrap .nv{background:var(--navy);color:var(--ivory)}
#vsur-mesure .smwrap .nv p{color:var(--onNavy)}
#vsur-mesure .smwrap .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  margin-bottom:18px;font-weight:400}
#vsur-mesure .smwrap .nv .k{color:var(--brass)}
#vsur-mesure .smwrap .iv .k{color:var(--faintI)}
#vsur-mesure .smwrap h2{font-family:var(--dis);font-size:var(--t2);font-weight:400;line-height:1.16;
  letter-spacing:-.01em;margin-bottom:18px}
#vsur-mesure .smwrap h2 em{font-style:italic;color:var(--brass)}
#vsur-mesure .smwrap .lead{font-size:16.5px;line-height:1.85;max-width:620px}
#vsur-mesure .smwrap .btn{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid currentColor;padding:15px 32px;display:inline-block;transition:.25s}
#vsur-mesure .smwrap .iv .btn:hover{background:var(--navy);color:var(--ivory)}
#vsur-mesure .smwrap .nv .btn{border-color:var(--brass);color:var(--brass)}
#vsur-mesure .smwrap .nv .btn:hover{background:var(--brass);color:var(--navy)}
#vsur-mesure .smwrap nav{display:flex;gap:22px;font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;flex-wrap:wrap}
@media(max-width:1380px){
#vsur-mesure .smwrap nav{gap:15px;font-size:10.5px;letter-spacing:.08em}
}
@media(max-width:1180px){
#vsur-mesure .smwrap nav{display:none}
}
#vsur-mesure .smwrap .pan-sm{color:inherit;transition:color .25s}
#vsur-mesure .smwrap .pan-sm i{font-style:normal}
#vsur-mesure .smwrap .pan-sm:hover{color:var(--brass2)}
#vsur-mesure .smwrap nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:.2s}
#vsur-mesure .smwrap nav a:hover,#vsur-mesure .smwrap nav a.on{border-bottom-color:var(--navy)}
#vsur-mesure .smwrap .propos{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0}
#vsur-mesure .smwrap .propos .t{padding:96px 56px}
#vsur-mesure .smwrap .propos .ph{align-self:stretch;min-height:520px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#E7E1D4,#CFC5B0)}
#vsur-mesure .smwrap .propos .ph picture,#vsur-mesure .smwrap .propos .ph img{position:absolute;inset:0;width:100%;height:100%}
#vsur-mesure .smwrap .propos .ph img{object-fit:cover;object-position:52% 46%;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.2s cubic-bezier(.2,.7,.3,1),transform 1.6s cubic-bezier(.2,.7,.3,1)}
#vsur-mesure .smwrap .propos .ph.in img{opacity:1;transform:none}
#vsur-mesure .smwrap .propos .ph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,241,234,.30) 0%,rgba(244,241,234,0) 26%),
             linear-gradient(0deg,rgba(20,29,53,.62) 0%,rgba(20,29,53,0) 24%)}
#vsur-mesure .smwrap .propos .ph figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;
  font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,241,234,.86);text-shadow:0 1px 10px rgba(20,29,53,.5)}
#vsur-mesure .smwrap .propos p{font-size:16.5px;line-height:1.9;color:var(--onIvory);margin-bottom:16px;max-width:520px}
#vsur-mesure .smwrap .secteurs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
#vsur-mesure .smwrap .secteurs span{font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.06em;
  border:1px solid var(--lineI);padding:8px 14px;color:var(--onIvory)}
#vsur-mesure .smwrap .etapes{padding:88px 56px 86px}
#vsur-mesure .smwrap .etapes .head{max-width:680px;margin-bottom:58px}
#vsur-mesure .smwrap .etapes .wrap{position:relative;max-width:900px;margin-left:clamp(0px,6vw,120px)}
#vsur-mesure .smwrap .rail{position:absolute;left:23px;top:14px;bottom:14px;width:1px;background:var(--lineN)}
#vsur-mesure .smwrap .rail .fill{position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--brass),var(--brass2));
  transition:height .45s cubic-bezier(.4,0,.2,1)}
#vsur-mesure .smwrap .step{position:relative;padding:0 0 42px 86px;opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
#vsur-mesure .smwrap .step:last-child{padding-bottom:0}
#vsur-mesure .smwrap .step.in{opacity:1;transform:none}
#vsur-mesure .smwrap .step .num{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--faintN);margin-bottom:12px;transition:color .5s}
#vsur-mesure .smwrap .step.on .num{color:var(--brass)}
#vsur-mesure .smwrap .step h3{font-family:var(--dis);font-size:var(--t4);font-weight:400;line-height:1.24;
  margin-bottom:12px}
#vsur-mesure .smwrap .step p{font-size:15.5px;line-height:1.85;max-width:520px}
/* ══ L'ANIMATION DE LA LANDING, reprise ici le 21 octobre ══
   AVANT : le rail suivait le defilement et chaque pastille s'allumait
   au passage de la ligne de declenchement. Le trait balaie desormais
   une seule fois, a l'entree de la section dans l'ecran, et les cinq
   etapes montent en cascade — meme cadence, aux memes centiemes, que
   « Haute couture en parfumerie d'interieur » sur l'accueil.
   Les pastilles n'avaient aucun style sur cette page : le balisage les
   portait, le CSS les ignorait, elles etaient donc invisibles. Elles
   reprennent celles de la landing. */
/* SAFARI N'ANIME PAS UNE HAUTEUR EN POURCENTAGE sur un element
   absolu dont le bloc contenant est defini par top et bottom : il
   saute directement a la valeur finale, ou ne bouge pas du tout.
   Chromium, lui, interpole — d'ou un balayage impeccable au bac et un
   trait fige chez Francois, signale le 21 octobre. On passe donc par
   une TRANSFORMATION, que tous les navigateurs animent : le trait fait
   toute la hauteur des le depart et se deplie du haut vers le bas. */
/* VITESSE RALENTIE D'UN TIERS environ le 21 octobre, a la demande de
   Francois. La cadence de la landing — 3,12 s pour le trait, cinq
   blocs toutes les 36 centiemes — convient a cinq colonnes courtes
   cote a cote. Ici le rail fait 1 100 pixels en grand ecran et 1 500
   sur un telephone : a la meme vitesse le trait file trop vite pour
   qu'on le suive, et les cinq blocs sont tous poses avant qu'il ait
   atteint le troisieme. */
#vsur-mesure .smwrap .etapes .rail .fill{height:100%;transform:scaleY(0);
  transform-origin:top center;
  transition:transform 5.3s cubic-bezier(.22,.61,.36,1)}
#vsur-mesure .smwrap .etapes.go .rail .fill{transform:scaleY(1)}
#vsur-mesure .smwrap .etapes .step{transition-duration:1.1s}
#vsur-mesure .smwrap .etapes.go .step{opacity:1;transform:none}
#vsur-mesure .smwrap .etapes.go .step:nth-of-type(1){transition-delay:.10s}
#vsur-mesure .smwrap .etapes.go .step:nth-of-type(2){transition-delay:.72s}
#vsur-mesure .smwrap .etapes.go .step:nth-of-type(3){transition-delay:1.34s}
#vsur-mesure .smwrap .etapes.go .step:nth-of-type(4){transition-delay:1.96s}
#vsur-mesure .smwrap .etapes.go .step:nth-of-type(5){transition-delay:2.58s}
#vsur-mesure .smwrap .etapes.go .step .num{color:var(--brass)}
#vsur-mesure .smwrap .step .dot{position:absolute;left:18px;top:3px;width:11px;height:11px;
  border-radius:50%;border:1px solid var(--lineN);background:var(--navy);display:flex;
  align-items:center;justify-content:center;transition:border-color .5s}
#vsur-mesure .smwrap .step .dot i{width:3px;height:3px;border-radius:50%;background:var(--lineN);
  transition:background .5s,transform .5s}
#vsur-mesure .smwrap .etapes.go .step .dot{border-color:var(--brass)}
#vsur-mesure .smwrap .etapes.go .step .dot i{background:var(--brass);transform:scale(1.6)}
/* Mouvement reduit : tout est pose d'emblee, rien ne bouge. */
@media(prefers-reduced-motion:reduce){
  #vsur-mesure .smwrap .etapes .rail .fill{transition:none;transform:scaleY(1)}
  #vsur-mesure .smwrap .etapes .step{opacity:1;transform:none;transition:none}
}
#vsur-mesure .smwrap .etapes .foot{margin-top:54px;padding-top:30px;border-top:1px solid var(--lineN);
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
#vsur-mesure .smwrap .etapes .foot .big{font-family:var(--dis);font-size:56px;color:var(--brass);line-height:1}
#vsur-mesure .smwrap .etapes .foot .lb{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--onNavy)}
#vsur-mesure .smwrap .refs{padding:96px 56px;border-top:1px solid var(--lineI)}
#vsur-mesure .smwrap .refs .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:1px solid var(--lineI)}
#vsur-mesure .smwrap .refs .grid div{padding:30px 28px 30px 0;border-bottom:1px solid var(--lineI2);
  border-right:1px solid var(--lineI2)}
#vsur-mesure .smwrap .refs .grid div:nth-child(3n){border-right:none;padding-right:0}
#vsur-mesure .smwrap .refs .grid h4{font-family:var(--dis);font-size:21px;font-weight:400;margin-bottom:6px}
#vsur-mesure .smwrap .refs .grid p{font-size:13.5px;line-height:1.7;color:var(--onIvory)}
#vsur-mesure .smwrap .ask{padding:96px 56px 104px;text-align:center}
#vsur-mesure .smwrap .ask h2{font-size:var(--t2);max-width:780px;margin:0 auto 34px}
#vsur-mesure .smwrap .ask .btn{margin-top:4px}
#vsur-mesure .smwrap .ask .lead{margin:0 auto 38px;text-align:center}
#vsur-mesure .smwrap .form{max-width:640px;margin:0 auto;text-align:left}
#vsur-mesure .smwrap .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#vsur-mesure .smwrap .form label{display:block;margin-bottom:14px}
#vsur-mesure .smwrap .form .lb{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faintN);margin-bottom:7px;display:block}
#vsur-mesure .smwrap .form input,#vsur-mesure .smwrap .form select,#vsur-mesure .smwrap .form textarea{width:100%;background:transparent;
  border:1px solid var(--lineN);color:var(--ivory);font-family:'Lora',serif;font-size:15px;
  padding:13px 14px;transition:border-color .2s}
#vsur-mesure .smwrap .form input:focus,#vsur-mesure .smwrap .form select:focus,#vsur-mesure .smwrap .form textarea:focus{outline:none;border-color:var(--brass)}
#vsur-mesure .smwrap .form select{font-family:'Jost',sans-serif;font-size:14px}
#vsur-mesure .smwrap .form select option{background:var(--navy);color:var(--ivory)}
#vsur-mesure .smwrap .form textarea{min-height:110px;resize:vertical}
#vsur-mesure .smwrap .form .send{width:100%;margin-top:10px;background:var(--brass);color:var(--navy);
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:17px;transition:.2s}
#vsur-mesure .smwrap .form .send:hover{background:var(--ivory)}
#vsur-mesure .smwrap .form .note{font-family:'Jost',sans-serif;font-size:11.5px;color:var(--faintN);margin-top:14px;
  text-align:center}
@media(max-width:1000px){
#vsur-mesure .smwrap .propos{grid-template-columns:1fr}
#vsur-mesure .smwrap .propos .ph{min-height:320px;order:-1}
#vsur-mesure .smwrap .refs .grid{grid-template-columns:1fr 1fr}
#vsur-mesure .smwrap .refs .grid div:nth-child(3n){border-right:1px solid var(--lineI2);padding-right:28px}
#vsur-mesure .smwrap .refs .grid div:nth-child(2n){border-right:none;padding-right:0}
}
@media(max-width:760px){
#vsur-mesure .smwrap nav{display:none}
#vsur-mesure .smwrap .propos .t,#vsur-mesure .smwrap .etapes,#vsur-mesure .smwrap .refs,#vsur-mesure .smwrap .ask{padding-left:22px;padding-right:22px}
#vsur-mesure .smwrap .etapes{padding-top:70px;padding-bottom:80px}
#vsur-mesure .smwrap .etapes .head{margin-bottom:56px}
#vsur-mesure .smwrap .etapes .wrap{margin-left:0}
#vsur-mesure .smwrap .rail{left:11px}
#vsur-mesure .smwrap .step{padding-left:52px;padding-bottom:56px}
#vsur-mesure .smwrap h2{font-size:var(--t2)}
#vsur-mesure .smwrap .step h3{font-size:var(--t4)}
#vsur-mesure .smwrap .etapes .foot .big{font-size:42px}
#vsur-mesure .smwrap .form .row{grid-template-columns:1fr}
#vsur-mesure .smwrap .refs .grid{grid-template-columns:1fr}
#vsur-mesure .smwrap .refs .grid div{border-right:none!important;padding-right:0!important}
}
@media(prefers-reduced-motion:reduce){
#vsur-mesure .smwrap .step{opacity:1;transform:none;transition:none}
#vsur-mesure .smwrap .rail .fill{transition:none}
#vsur-mesure .smwrap .propos .ph img{opacity:1;transform:none;transition:none}
}
#vsur-mesure .smwrap .refh{padding:104px 56px 70px;border-top:1px solid var(--lineI)}
#vsur-mesure .smwrap .refh .rhead{max-width:720px}
#vsur-mesure .smwrap .refh h2{font-size:var(--t2);line-height:1.16;margin-bottom:18px}
#vsur-mesure .smwrap .refh .lead{color:var(--onIvory);font-size:16px;line-height:1.85}
#vsur-mesure .smwrap .rnum{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:40px;padding-top:26px;
  border-top:1px solid var(--lineI2)}
#vsur-mesure .smwrap .rnum span{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faintI);display:flex;align-items:baseline;gap:9px}
#vsur-mesure .smwrap .rnum b{font-family:var(--dis);font-weight:400;font-size:26px;letter-spacing:0;
  color:var(--brass2);text-transform:none}
#vsur-mesure .smwrap .hstack{position:relative}
#vsur-mesure .smwrap .hblk{position:-webkit-sticky;position:sticky;top:0;height:100svh;
  background:var(--navy);color:var(--ivory)}
#vsur-mesure .smwrap .hblk::before{content:'';position:absolute;top:0;left:56px;right:56px;height:1px;
  background:var(--lineN);z-index:2}
#vsur-mesure .smwrap .hblk::after{content:'';position:absolute;top:-4px;left:50%;margin-left:-4px;
  width:8px;height:8px;background:var(--brass);transform:rotate(45deg);z-index:3;
  box-shadow:0 0 0 5px var(--navy)}
#vsur-mesure .smwrap .hstack > .hblk:first-child::before,#vsur-mesure .smwrap .hstack > .hblk:first-child::after{display:none}
#vsur-mesure .smwrap .hbi{display:grid;grid-template-columns:1fr min(46vw,800px);height:100%;
  padding-top:88px;box-sizing:border-box}
#vsur-mesure .smwrap .ht{padding:clamp(28px,5vh,64px) 56px clamp(28px,5vh,56px);
  display:flex;flex-direction:column;justify-content:center;max-width:760px}
#vsur-mesure .smwrap .hnum{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;
  color:var(--brass);margin-bottom:26px}
#vsur-mesure .smwrap .hnum em{font-style:normal;color:var(--faintN)}
#vsur-mesure .smwrap .hv{font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faintN);margin-bottom:12px;
  display:flex;align-items:center;gap:14px}
#vsur-mesure .smwrap .het{color:var(--brass);letter-spacing:.14em;font-size:9px}
#vsur-mesure .smwrap .hblk h3{font-family:var(--dis);font-weight:400;font-size:var(--t1);
  line-height:1.06;letter-spacing:-.012em;margin-bottom:18px}
#vsur-mesure .smwrap .hfg{font-family:var(--disI);font-style:italic;font-size:clamp(21px,2.5vw,36px);
  color:var(--brass);margin-bottom:32px}
#vsur-mesure .smwrap .hde{font-size:clamp(16px,1.32vw,19px);line-height:1.8;color:var(--onNavy);
  max-width:46ch;margin-bottom:40px}
#vsur-mesure .smwrap .hblk .pyr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:700px}
#vsur-mesure .smwrap .hblk .pyr > div{border-top:1px solid var(--lineN);padding-top:12px}
#vsur-mesure .smwrap .hblk .pv{font-size:clamp(14px,1.11vw,16px);line-height:1.55;color:var(--ivory)}
#vsur-mesure .smwrap .hblk .cons{display:inline-block;align-self:flex-start;margin-top:34px;
  font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);border-bottom:1px solid transparent;padding-bottom:3px;
  transition:border-color .25s}
#vsur-mesure .smwrap .hblk .cons:hover{border-bottom-color:var(--brass)}
#vsur-mesure .smwrap .hph{position:relative;overflow:hidden}
#vsur-mesure .smwrap .hph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%}
#vsur-mesure .smwrap .hph::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(31,44,78,.55) 0%,rgba(31,44,78,0) 18%)}
#vsur-mesure .smwrap .hblk.nph .hbi{grid-template-columns:1fr}
@media(max-width:1000px){
#vsur-mesure .smwrap .hbi{grid-template-columns:1fr;grid-template-rows:26svh 1fr;padding-top:66px}
#vsur-mesure .smwrap .hph{order:-1}
#vsur-mesure .smwrap .hph::after{background:linear-gradient(0deg,rgba(31,44,78,.55) 0%,rgba(31,44,78,0) 22%)}
#vsur-mesure .smwrap .ht{padding:18px 22px 20px;max-width:none;justify-content:flex-start}
#vsur-mesure .smwrap .hblk::before{left:22px;right:22px}
#vsur-mesure .smwrap .hnum{display:none}
#vsur-mesure .smwrap .hv{margin-bottom:8px}
#vsur-mesure .smwrap .hblk h3{font-size:var(--t1);margin-bottom:10px}
#vsur-mesure .smwrap .hfg{font-size:clamp(16px,4.4vw,20px);margin-bottom:12px}
#vsur-mesure .smwrap .hde{font-size:14px;line-height:1.65;margin-bottom:16px}
#vsur-mesure .smwrap .hblk .pyr{grid-template-columns:1fr;gap:7px;max-width:none}
#vsur-mesure .smwrap .hblk .pyr > div{padding-top:7px}
#vsur-mesure .smwrap .hblk .pv{font-size:12.5px;line-height:1.45}
#vsur-mesure .smwrap .hblk .cons{margin-top:14px}
}
@media(max-width:380px),(max-height:660px) and (max-width:1000px){
#vsur-mesure .smwrap .hbi{grid-template-rows:23svh 1fr}
#vsur-mesure .smwrap .hde{margin-bottom:13px}
}
@media(max-width:760px){
#vsur-mesure .smwrap .refh{padding:72px 22px 48px}
#vsur-mesure .smwrap .rnum{gap:12px 26px}
#vsur-mesure .smwrap .rnum b{font-size:22px}
}
@media(max-height:620px) and (max-width:1000px){
#vsur-mesure .smwrap .hblk .pyr{display:none}
#vsur-mesure .smwrap .hbi{grid-template-rows:30svh 1fr}
}
#vsur-mesure .smwrap .propos.nv p{color:var(--onNavy)}
#vsur-mesure .smwrap .propos.nv .secteurs span{border-color:var(--lineN);color:var(--onNavy)}
#vsur-mesure .smwrap .propos.nv .ph::after{background:linear-gradient(90deg,rgba(31,44,78,.42) 0%,rgba(31,44,78,0) 26%),
             linear-gradient(0deg,rgba(20,29,53,.62) 0%,rgba(20,29,53,0) 24%)}
#vsur-mesure .smwrap .propos.nv .ph{background:linear-gradient(150deg,#243253,#1A2440)}
#vsur-mesure .smwrap .propos.nv .t{padding-top:104px;padding-bottom:104px}
@media(max-width:1000px){
#vsur-mesure .smwrap .propos.nv .t{padding-top:52px;padding-bottom:62px}
}
#vsur-mesure .smwrap .ident{padding:104px 56px 110px}
#vsur-mesure .smwrap .ident .ihead{display:grid;grid-template-columns:1.06fr 1fr;gap:0 72px;align-items:start}
#vsur-mesure .smwrap .ident h2{font-size:var(--t2);line-height:1.16;margin-bottom:26px}
#vsur-mesure .smwrap .ident .it::after{content:'';display:block;width:74px;height:2px;background:var(--brass)}
#vsur-mesure .smwrap .ident .ip{font-size:16px;line-height:1.95;color:var(--onIvory);max-width:58ch;
  padding-top:34px}
#vsur-mesure .smwrap .itrois{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
#vsur-mesure .smwrap .itrois figure{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--ivory2)}
#vsur-mesure .smwrap .itrois img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){
#vsur-mesure .smwrap .ident .ihead{grid-template-columns:1fr;gap:30px}
#vsur-mesure .smwrap .ident h2{font-size:var(--t2);max-width:none}
#vsur-mesure .smwrap .ident .ip{padding-top:0}
#vsur-mesure .smwrap .itrois{gap:18px;margin-top:48px}
}
@media(max-width:760px){
#vsur-mesure .smwrap .ident{padding:72px 22px 80px}
#vsur-mesure .smwrap .ident h2{font-size:var(--t2)}
#vsur-mesure .smwrap .ident .ip{font-size:15px;line-height:1.85}
#vsur-mesure .smwrap .itrois{grid-template-columns:1fr;gap:14px;margin-top:38px}
#vsur-mesure .smwrap .itrois figure{aspect-ratio:3/2}
}
#vsur-mesure .smwrap h2{font-size:var(--t2);letter-spacing:-.004em;line-height:1.15}
#vsur-mesure .smwrap .step h3{font-size:var(--t4);line-height:1.26}
#vsur-mesure .smwrap .refs .grid h4{font-size:19px}
#vsur-mesure .smwrap .etapes .foot .big{font-size:50px}
#vsur-mesure .smwrap .propos h2{font-size:var(--t2)}
@media(max-width:760px){
#vsur-mesure .smwrap h2,#vsur-mesure .smwrap .propos h2{font-size:var(--t2)}
#vsur-mesure .smwrap .step h3{font-size:var(--t4)}
#vsur-mesure .smwrap .etapes .foot .big{font-size:38px}
}
#vsur-mesure .smwrap .propos h1{font-family:var(--dis);font-size:var(--t1);font-weight:400;line-height:1.15;
  letter-spacing:-.004em;margin-bottom:18px}
#vsur-mesure .smwrap .propos h1 em{font-family:var(--disI);font-style:italic;font-weight:400;
  font-size:1.14em;letter-spacing:0;color:var(--brass)}
@media(max-width:760px){
#vsur-mesure .smwrap .propos h1{font-size:var(--t1)}
}

/* ── Tunnel refait le 18 octobre ────────────────────────────────── */
/* Les pas sont des boutons depuis qu'on peut revenir en arriere. Un
   pas a venir est desactive : ni curseur, ni survol, il ne se donne
   pas l'air cliquable. */
#pnbox .pas button{background:none;border:0;font:inherit;text-align:left}
#pnbox .pas button:not(:disabled){cursor:pointer}
#pnbox .pas button:not(:disabled):hover{color:var(--navy)}
#pnbox .pas button:disabled{cursor:default}

/* Titre de sous-section dans une etape — « Adresse de livraison »,
   « Adresse de facturation ». Plus petit que le titre d'etape, pour
   qu'on voie d'un coup d'oeil ce qui est principal. */
#pnbox .etp h2.sect{font-size:17px;margin:38px 0 16px;padding-top:26px;
  border-top:1px solid var(--lineI)}

/* Message de refus sous un champ. */
#pnbox .err{font-family:'Jost',sans-serif;font-size:11.5px;color:#9b2c2c;margin-top:7px}
#pnbox input.faux{border-color:#9b2c2c}
/* V167 — les champs du tunnel et du compte sont passes dans de vrais
   `form` pour que le remplissage automatique du navigateur les
   reconnaisse. Un `form` n'a pas le meme vide qu'un `div` selon les
   navigateurs : on le remet a plat. */
#pnbox form.etp,#pnbox form.ccpt,form.cpchp{margin:0}
/* La case des CGV refusee : un lisere rouge, comme un champ fautif. */
#pnbox input[type=checkbox].faux{outline:1px solid #9b2c2c;outline-offset:2px}

/* Date de livraison estimee : c'est l'information que le client
   cherche, elle ne doit pas avoir l'air d'une note de bas de page. */
#pnbox .livd{font-family:'Jost',sans-serif;font-size:13.5px;color:var(--navy);
  margin-top:14px;letter-spacing:.02em}


/* ═══ LA FENETRE DE COMPATIBILITE DE LA CAPSULE 200 ML ═══════════
   Portee de la maquette du 23 octobre, validee par Francois. Les
   couleurs viennent des variables de la charte : la fenetre doit
   suivre un changement de charte sans etre retouchee. */
.caps{position:fixed;inset:0;z-index:1200;display:none;
      background:rgba(24,35,63,.72);overflow-y:auto;
      padding:28px 16px 64px}
.caps.on{display:flex;align-items:flex-start;justify-content:center}
.capsb{background:var(--ivory);color:var(--navy);width:100%;max-width:760px;
       padding:44px 48px 40px;position:relative;
       box-shadow:0 24px 70px rgba(0,0,0,.35)}
@media (max-width:640px){.capsb{padding:34px 22px 30px}}

.capsx{position:absolute;top:18px;right:20px;width:30px;height:30px;border:0;
       background:transparent;cursor:pointer;color:var(--navy);opacity:.5;
       font-size:20px;line-height:1}
.capsx:hover{opacity:1}

.capssur{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--faintI);margin:0 0 14px}
.caps h2.dis{font-size:26px;line-height:1.3;margin:0 0 14px;color:var(--navy)}
@media (max-width:640px){.caps h2.dis{font-size:21px}}
.capsl{font-size:14.5px;line-height:1.75;color:var(--onIvory);margin:0 0 30px;
       max-width:54ch}
.capsk{font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--navy);margin:0 0 16px}

.capsg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.capsg{grid-template-columns:1fr}}

.capsc{border:1px solid var(--lineI);background:transparent;cursor:pointer;padding:0;
       text-align:left;transition:border-color .2s,background .2s;display:flex;
       flex-direction:column}
.capsc:hover{border-color:var(--navy)}
.capsc.sel{border-color:var(--navy);background:#EFEBE1}
.capsv{height:230px;display:flex;align-items:flex-end;justify-content:center;
       padding:18px 10px 0}
.capsv img{max-height:100%;width:auto;display:block}
.capsp{display:flex;align-items:center;gap:11px;padding:16px 18px 18px}
.capsp i{width:14px;height:14px;border:1px solid var(--navy);border-radius:50%;
         display:block;flex:0 0 auto}
.capsc.sel .capsp i{background:var(--navy);box-shadow:inset 0 0 0 3px var(--ivory)}
.capsp b{font-weight:400;font-size:14px;color:var(--navy);line-height:1.35}
.capsp em{display:block;font-style:normal;font-size:12px;color:var(--faintI);
          margin-top:3px}

.capsaide{font-size:12.5px;color:var(--faintI);margin:18px 0 0;line-height:1.7}
.capsaide a{color:var(--onIvory);text-decoration:underline;text-underline-offset:3px}

.capsbas{display:flex;align-items:center;justify-content:space-between;gap:18px;
         margin-top:30px;padding-top:24px;border-top:1px solid var(--lineI2)}
@media (max-width:560px){.capsbas{flex-direction:column-reverse;align-items:stretch}}
.capsret{background:transparent;border:0;cursor:pointer;font-size:13px;
         color:var(--onIvory);text-decoration:underline;text-underline-offset:3px;
         padding:0}
.caps .capsok[disabled]{opacity:.35;cursor:not-allowed}

/* La mention du modele retenu, sous le compteur de la fiche. */
.selcaps{display:block;font-size:11.5px;line-height:1.5;color:var(--faintI);
         margin-top:6px}
.selcaps:empty{display:none}
.selcaps a{color:var(--onIvory);text-decoration:underline;text-underline-offset:2px}

/* ECRANS BAS. La fenetre fait pres de 900 px de haut avec ses visuels
   a 230 px : sur un portable de 768 px, le bouton « Ajouter au panier »
   tombait sous la ligne de flottaison et le client ne voyait pas qu'il
   y avait quelque chose a valider. On resserre plutot que de compter
   sur le defilement. */
@media (max-height:860px){
  .capsb{padding:30px 48px 28px}
  .capsv{height:160px}
  .capsl{margin-bottom:20px}
  .capsbas{margin-top:22px;padding-top:18px}
}
@media (max-height:860px) and (max-width:640px){.capsb{padding:26px 22px 24px}}

/* TELEPHONE. La maquette empile les deux cartes en pleine hauteur : sur
   un telephone la fenetre faisait alors 976 px pour un ecran de 844, et
   le bouton « Ajouter au panier » n'etait atteignable qu'en devinant
   qu'il fallait defiler. Les cartes deviennent des lignes — visuel a
   gauche, libelle a droite —, les deux modeles restent visibles
   ensemble, et la question tient dans un ecran. Seule entorse a la
   maquette du 23 octobre, et seulement sous 560 px. */
@media (max-width:560px){
  .capsc{flex-direction:row;align-items:center}
  .capsv{height:auto;width:96px;flex:0 0 96px;padding:12px 6px;
         align-items:center}
  .capsv img{max-height:92px}
  .capsp{padding:12px 14px 12px 4px}
}
.capsb:focus{outline:none}
.capsc:focus-visible{outline:2px solid var(--laiton);outline-offset:2px}

/* LES LISTES DEROULANTES DE L'ESPACE CLIENT. Le formulaire d'adresse,
   pose le 26 octobre, porte un choix de pays : il sortait aux mesures
   du navigateur, petit et arrondi, a cote de champs pleine largeur —
   le meme defaut que les champs de mot de passe le 18 octobre. */
.cpseul select,.cpcorps select{
  width:100%;background:transparent;border:1px solid var(--lineI);padding:13px 15px;
  font-family:'Jost',sans-serif;font-size:14px;color:var(--navy);
  border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color .2s;
  background-image:linear-gradient(45deg,transparent 50%,var(--onIvory) 50%),
                   linear-gradient(135deg,var(--onIvory) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.cpseul select:focus,.cpcorps select:focus{border-color:var(--navy);outline:none}


/* ══ LA CARTE AU CLIC ══════════════════════════════════════════════
   Le bouton occupe exactement la place de l'iframe qu'il remplace :
   .mfr est deja en position:relative et porte la hauteur, il n'y a
   donc aucun deplacement de mise en page au moment du clic. */
.mcarte{position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:30px 24px;text-align:center;
  background:var(--navy2);color:var(--ivory);border:0;cursor:pointer;
  font-family:inherit;transition:background .25s}
.mcarte:hover,.mcarte:focus-visible{background:var(--navy)}
.mcarte .mpin{color:var(--brass)}
.mcarte .mvoir{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--brass);padding-bottom:5px}
.mcarte .mnote{font-size:11.5px;line-height:1.6;color:#9AA3BC;max-width:330px}

/*  Nous rendre visite  porte trois adresses depuis le 29 octobre.
   Sans separation, le bouton d'une carte touchait le titre de la
   suivante : trois blocs colles se lisent comme un seul. */
.cmap .mb + .mb{margin-top:2.4rem;padding-top:2.4rem;
  border-top:1px solid rgba(255,255,255,.14)}
.cmap .mb .btn{margin-top:.4rem}
.bu .bun{margin-top:.6rem;opacity:.78}

/* ── Famille non commercialisee sur ce marche ──────────────────────
   Trois blocs qui n'existent que sur un arbre ou la gamme n'est pas
   encore proposee a la vente : la mention, la liste des parfums sans
   parcours d'achat, et le renvoi vers l'offre professionnels.
   Voir horsVenteMarche() dans app.js. */
.pdp .hvdit{font-family:'Jost',sans-serif;font-size:13.5px;line-height:1.6;
  color:var(--navy);background:rgba(194,170,126,.13);
  border-left:2px solid var(--brass);padding:13px 16px;margin:0 0 24px}

.hvfrags{margin-top:30px}
.hvfrags .k2{font:400 11px/1 'Jost',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.hvfrags ul{list-style:none;margin:0;padding:0}
.hvfrags li{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:11px 0;border-bottom:1px solid var(--lineI)}
.hvfrags li:last-child{border-bottom:0}
.hvfrags li .n{font-size:16px;color:var(--navy)}
.hvfrags li .m{font-family:'Jost',sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass2)}

.hvpro{background:var(--navy);color:var(--ivory)}
.hvpro p,.hvpro .k{color:var(--ivory)}
.hvpro .k{color:var(--brass)}
.hvpro .k{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.hvpro p{max-width:62ch;font-size:16.5px;line-height:1.8;margin:0 0 26px}
.hvpro .btn{border-color:var(--brass);color:var(--brass)}
.hvpro .btn:hover{background:var(--brass);color:var(--navy)}


/* ══ consentement aux traceurs ════════════════════════════════════
   Variante retenue par Francois le 29 octobre, apres comparaison des
   cinq propositions posees sur la vraie page d'accueil : bandeau bas
   ivoire, titre dans la police des titres du site.

   LES DEUX BOUTONS ONT LE MEME POIDS. « Tout refuser » a la meme
   taille, le meme lettrage et un contraste comparable a « Tout
   accepter ». Un refus relegue en petit texte gris est le motif de
   sanction le plus frequent de la CNIL — ce n'est pas une question de
   gout, et aucune retouche graphique ne doit l'amoindrir.           */
/* Le z-index va sur les elements FIXES, pas sur leur conteneur :
   #rgpd est en position:static, ou un z-index n'a aucun effet. Sans
   cela l'en-tete du site, en sticky z-index:40, passait au-dessus du
   voile — mesure du 30 octobre. */

.rgpd-b5{position:fixed;left:0;right:0;bottom:0;z-index:9000;background:var(--ivory);
  border-top:1px solid var(--lineI);padding:26px 46px 24px;
  display:grid;grid-template-columns:1fr auto;gap:46px;align-items:end;
  box-shadow:0 -12px 34px rgba(31,44,78,.14)}
.rgpd-b5 h2{font:400 21px/1.2 var(--dis);color:var(--navy);margin:0 0 9px}
.rgpd-b5 p{font:400 13px/1.75 'Lora',Georgia,serif;color:var(--onIvory);
  margin:0;max-width:640px}
.rgpd-b5 .rgpd-act{display:flex;flex-direction:column;gap:9px;min-width:196px}
.rgpd-l{display:flex;gap:9px}

.rgpd-b{flex:1;font:400 10.5px/1 'Jost',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 14px;cursor:pointer;
  border:1px solid var(--navy);background:none;color:var(--navy);white-space:nowrap}
.rgpd-b.rgpd-pl{background:var(--navy);color:var(--ivory)}
.rgpd-b:hover{opacity:.82}
.rgpd-rg{font:400 10.5px/1 'Jost',sans-serif;letter-spacing:.1em;
  background:none;border:0;color:var(--onIvory);cursor:pointer;padding:2px}
.rgpd-rg:hover{color:var(--navy)}

/* ── le panneau de reglage ─────────────────────────────────────── */
.rgpd-voile{position:fixed;inset:0;z-index:9000;background:rgba(31,44,78,.5)}
.rgpd-boite{position:fixed;left:50%;top:50%;z-index:9001;transform:translate(-50%,-50%);
  width:min(560px,calc(100vw - 32px));max-height:min(84vh,760px);overflow:auto;
  background:var(--ivory);padding:30px 34px 26px;
  box-shadow:0 24px 70px rgba(0,0,0,.34)}
.rgpd-boite h2{font:400 24px/1.2 var(--disI);color:var(--navy);margin:0 0 10px}
.rgpd-in,.rgpd-du{font:400 12.5px/1.7 'Lora',Georgia,serif;color:var(--onIvory);margin:0 0 18px}
.rgpd-du{margin:18px 0 20px;font-size:11.5px;color:var(--faintI)}

.rgpd-cat{border-top:1px solid var(--lineI2);padding:15px 0 2px}
.rgpd-cat label{display:flex;align-items:center;gap:10px;cursor:pointer}
.rgpd-cat input{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;margin:0}
.rgpd-cat input:disabled{cursor:default;opacity:.55}
.rgpd-nom{font:400 13.5px/1 'Jost',sans-serif;letter-spacing:.08em;color:var(--navy)}
.rgpd-tj{margin-left:auto;font:400 9.5px/1 'Jost',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass2)}
.rgpd-cat p{font:400 12px/1.7 'Lora',Georgia,serif;color:var(--onIvory);margin:7px 0 0 25px}
.rgpd-cat p em{font-style:italic;color:var(--faintI)}

.rgpd-p .rgpd-act{display:flex;gap:9px;margin-bottom:9px}
.rgpd-en{display:block;width:100%;font:400 10.5px/1 'Jost',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 14px;cursor:pointer;
  background:none;border:1px solid var(--lineI);color:var(--onIvory)}
.rgpd-en:hover{border-color:var(--navy);color:var(--navy)}

.rgpd-pl2{color:var(--onIvory);text-decoration:none;border-bottom:1px solid var(--lineI);
  padding-bottom:1px;white-space:nowrap}
.rgpd-pl2:hover{color:var(--navy);border-bottom-color:var(--navy)}

html.rgpd-ouvert{overflow:hidden}

/* lien du pied de page : un bouton deguise en lien, pour qu'il se
   confonde avec ses voisins sans mentir sur ce qu'il fait */
.fcook{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}

@media(max-width:900px){
  .rgpd-b5{grid-template-columns:1fr;gap:18px;padding:20px 22px 18px}
  .rgpd-boite{padding:24px 22px 20px}
}