/* ==========================================================================
   DraftC — feuille de style
   --------------------------------------------------------------------------
   PALETTE — relevée au pixel sur les maquettes DraftC (Squarespace).
   Trois couleurs seulement, plus un crème et le noir. Chaque section choisit
   son « ton » avec l'attribut data-tone, et TOUT le reste (titres, texte,
   filets, boutons, champs) s'adapte automatiquement.

        data-tone="lime"      fond citron, titres sauge
        data-tone="pink"      fond rose poudré, titres sauge
        data-tone="sage"      fond sauge, titres citron
        data-tone="cream"     fond crème, titres sauge
        data-tone="gradient"  dégradé citron → rose (héros)

   Pas de thème sombre : c'est un choix, pour rester fidèle à la marque.
   ========================================================================== */
:root{
  color-scheme:light;

  /* --- les cinq couleurs de la marque --- */
  --lime:#EEFC86;                    /* citron — relevé sur la maquette */
  --sage:#7CAEA9;                    /* sauge  — relevé sur la maquette */
  --pink:#E1C8CC;                    /* rose poudré — relevé sur la maquette */
  --cream:#F4F3E9;                   /* crème  — relevé sur la maquette */
  --ink:#000000;                     /* noir pur, comme les titres d'origine */

  /* --- couleurs de formes décoratives (cartes « spécialités ») --- */
  --sand:#E3D9A7;
  --steel:#ABB8B7;

  /* --- sauge foncée ---------------------------------------------------
     Sur les maquettes, la navigation et le petit texte sont en sauge clair
     (#7CAEA9) sur fond rose : 1,58 contre 1 — illisible, et le citron sur
     rose est pire encore (1,41). On garde exactement la même teinte, mais
     assombrie, pour tout ce qui doit VRAIMENT être lu (liens, étiquettes,
     champs). Le sauge et le citron clairs restent pour les très grands
     titres et le décor, où ils sont un aplat et non une information. */
  --sage-deep:#2F5C55;               /* 4,8:1 sur rose · 6,8:1 sur citron */
  --sage-ink:#10221F;                /* pour le petit texte sur fond sauge */

  /* --- jetons de ton : redéfinis par chaque section, ne pas utiliser
         --lime/--sage/--pink directement dans les composants --- */
  --bg:var(--cream);
  --fg:var(--ink);
  --fg-2:rgba(0,0,0,.74);
  --fg-3:rgba(0,0,0,.54);
  --display:var(--sage-deep);        /* couleur des TRÈS grands titres */
  --hi:var(--sage-deep);             /* accents lisibles : liens, étiquettes */
  --rule:rgba(0,0,0,.15);
  --rule-2:rgba(0,0,0,.32);
  --focus:#0A0A0A;

  /* --- rythme --- */
  --gut:clamp(20px, 4.5vw, 64px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --ease-land:cubic-bezier(.16,.9,.24,1);

  /* --- VERRE LIQUIDE ---------------------------------------------------
     Boutons et menus ne sont plus des aplats : ce sont des lames de verre.
     Le fond de la section passe au travers, flouté et un peu saturé ; le
     liseré clair du haut fait le biseau, l'ombre basse décolle la lame.
     Le reste du site (cartes, sections, formes) ne change pas. */
  --glass-film:blur(16px) saturate(175%);
  --glass-film-lg:blur(28px) saturate(165%);
  --glass-veil:rgba(255,255,255,.34);
  --glass-veil-2:rgba(255,255,255,.55);
  --glass-line:rgba(255,255,255,.62);
  --glass-bevel:inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(255,255,255,.22);
  --glass-lift:0 14px 32px -18px rgba(0,0,0,.5);
}

/* ==========================================================================
   LES TONS — UN SEUL FOND CONTINU
   --------------------------------------------------------------------------
   Le site ne pose plus un aplat par section. Les quatre couleurs de la
   marque sont fondues en UN SEUL dégradé, étiré sur toute la hauteur de la
   page (voir « le fond de page » plus bas) : les sections sont désormais
   transparentes et on traverse le mélange en défilant. Plus de frontière
   nette entre deux bandes de couleur — c'est une seule ambiance.

   Conséquence : la couleur du texte ne peut plus dépendre de la section,
   puisqu'il n'y a plus de section colorée. Tous les tons partagent donc
   exactement les mêmes jetons de texte, calculés pour rester lisibles sur
   le point le PLUS SOMBRE du dégradé (la zone sauge).

   data-tone reste dans le HTML : il ne peint plus le fond, mais il indique
   encore la couleur dominante de la zone (--bg), dont se servent la barre
   en verre et les formes décoratives.
   ========================================================================== */
[data-tone]{background:transparent; color:var(--fg)}

[data-tone="lime"],[data-tone="pink"],[data-tone="sage"],
[data-tone="cream"],[data-tone="gradient"]{
  --fg:var(--ink);
  --fg-2:rgba(0,0,0,.76);
  --fg-3:rgba(0,0,0,.62);
  --display:var(--sage-deep);
  --hi:var(--sage-deep);
  --rule:rgba(0,0,0,.17);
  --rule-2:rgba(0,0,0,.35);
}

/* couleur dominante de la zone — le sauge est donné en version claire, celle
   qu'il a réellement dans le mélange : la barre en verre qui la reprend doit
   rester dans la même famille que ce qu'on voit défiler dessous. */
[data-tone="lime"]{--bg:var(--lime)}
[data-tone="pink"]{--bg:var(--pink)}
[data-tone="sage"]{--bg:#B7D2CE}
[data-tone="cream"]{--bg:var(--cream)}
[data-tone="gradient"]{--bg:var(--pink)}

/* --------------------------------------------------------- le fond de page
   Sept nappes de couleur posées à des hauteurs différentes, sur une base
   crème. Les tailles étant en pourcentage de la PAGE ENTIÈRE, le mélange
   s'étire tout seul : une page courte et une page longue racontent le même
   parcours de couleur, du citron au rose en passant par le sauge.

   Le fond est sur <body> et non sur <html> — et <html> reçoit le crème pour
   que celui de <body> ne « remonte » pas au canevas du navigateur, ce qui
   ferait calculer les pourcentages sur la fenêtre au lieu de la page.

   Le sauge est plafonné à 50 % d'opacité : au-delà, le petit texte gris
   passait sous le seuil de lisibilité sur cette portion du dégradé. */
html{background:var(--cream)}
body{
  background:
    radial-gradient(106% 34% at 0% -6%,   rgba(238,252,134,1),   rgba(238,252,134,0) 88%),
    radial-gradient(100% 31% at 100% -2%, rgba(238,252,134,.96), rgba(238,252,134,0) 88%),
    radial-gradient(128% 34% at 88% 15%,  rgba(225,200,204,1),   rgba(225,200,204,0) 86%),
    radial-gradient(116% 32% at -4% 34%,  rgba(124,174,169,.70), rgba(124,174,169,0) 86%),
    radial-gradient(126% 32% at 104% 52%, rgba(238,252,134,.96), rgba(238,252,134,0) 86%),
    radial-gradient(118% 34% at -2% 72%,  rgba(225,200,204,1),   rgba(225,200,204,0) 86%),
    radial-gradient(128% 30% at 92% 92%,  rgba(124,174,169,.62), rgba(124,174,169,0) 88%),
    linear-gradient(180deg, #EAF2B4 0%, #EDECD4 30%, #E9DFD9 60%, #E9EFD6 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-attachment:scroll;
}

/* le titre citron sur fond rose ou sauge — réservé aux TRÈS grands titres */
.h--lime{color:var(--lime)}
.h--sage{color:var(--sage)}
.h--ink{color:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(15.5px,.35vw + 15px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --------------------------------------------------------- typographie -- */
/* Anton : la grasse ultra-condensée des maquettes. Une seule graisse,
   toujours en capitales — c'est la signature visuelle de DraftC. */
h1,h2,h3,h4,.display{
  font-family:Anton,"Archivo","Helvetica Neue",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.92;
  margin:0;
  text-wrap:balance;
}
/* INTERLIGNE DES GRANDS TITRES — ne pas resserrer sous 1.18.
   L'Anton place ses accents tres haut : le signe du « E » de DEPART monte a
   environ 1,19 em au-dessus de sa propre ligne de base. Avec un interligne
   de 1, l'accent de la ligne du dessous venait donc se loger ENTRE les
   lettres de la ligne du dessus — « COMME POINT / DE DEPART. » affichait un
   accent perdu au milieu de COMME, et « VOUS ENVIE / DE CREER ? » un accent
   au milieu de ENVIE. Rien n'etait casse dans le texte : c'est bien la
   hauteur de ligne qui etait trop courte pour des capitales accentuees.
   1.18 est la plus petite valeur qui degage l'accent sans aerer le titre. */
.h-xl{font-size:clamp(2.9rem,10.5vw,8.4rem); line-height:.9}
.h-lg{font-size:clamp(2.2rem,6.4vw,5rem);   line-height:1.18}
.h-md{font-size:clamp(1.7rem,3.9vw,3.1rem); line-height:1.18}
.h-sm{font-size:clamp(1.2rem,2vw,1.7rem)}

/* Titre « en clair » : quand un h1 n'est pas une accroche de deux mots mais
   une vraie phrase, l'Anton en capitales devient un mur de gras. On garde la
   balise (structure et référencement intacts) et les capitales — c'est le
   rythme de toutes les pages — mais on passe à l'Oswald maigre : même
   silhouette haute et condensée que l'Anton, sans le poids. Le bloc respire
   au lieu de peser.
   ATTENTION : l'Oswald n'est appelé que sur les pages qui s'en servent
   (voir le <link> des polices dans realisations.html). Si tu poses cette
   classe sur une autre page, ajoute-y « &family=Oswald:wght@300 » dans
   l'adresse des polices, sinon le navigateur retombe sur la police du site. */
.h-plain{
  font-family:Oswald,"Hanken Grotesk",sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.18;
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  max-width:34ch;
}

p{margin:0 0 1.05em; max-width:64ch; color:var(--fg-2)}
.lede{font-size:clamp(1.06rem,1.5vw,1.35rem); line-height:1.5; color:var(--fg-2); max-width:52ch}

/* micro-étiquettes : plus de police mono, on garde la sans avec de l'espacement */
.label{
  font-family:inherit;
  font-size:.78rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3);
}
.label--accent{color:var(--hi)}

a{color:inherit; text-decoration:none}
.link{
  color:var(--fg); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:opacity .2s var(--ease);
}
.link:hover{opacity:.6}

:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

img{max-width:100%; height:auto; display:block}

/* ------------------------------------------------------------- layout --- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}
/* --pt-hdr vaut la hauteur de l'entête sur la PREMIÈRE section de la page
   (celle qui passe sous la barre), et zéro partout ailleurs. */
.section{padding-block:calc(var(--pt-hdr,0px) + clamp(50px,7.4vw,122px)) clamp(50px,7.4vw,122px)}
.section--tight{padding-block:calc(var(--pt-hdr,0px) + clamp(34px,5vw,76px)) clamp(34px,5vw,76px)}
.section--flush{padding-block:var(--pt-hdr,0px) 0}
main > :first-child{--pt-hdr:var(--hdr-h,78px)}
main > .wrap:first-child{padding-top:var(--hdr-h,78px)}
.rule{border:0; border-top:1px solid var(--rule); margin:0}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--lime); padding:12px 20px;
}
.skip:focus{left:12px; top:12px}

/* -------------------------------------------------------------- entête --
   Tout en haut de page l'entête est transparente : elle prend la couleur de
   la section qui passe dessous (le script recopie son data-tone). Dès qu'on
   défile, elle devient une lame de verre : la page continue de défiler
   dessous, floutée. */
.hdr{
  position:sticky; top:0; z-index:90;
  background:transparent;
  transition:background .45s var(--ease), color .45s var(--ease);
  /* --hdr-h est mesurée par le script ; 78px est la valeur exacte sur
     grand écran, utilisée avant l'exécution du script pour éviter un saut. */
  margin-bottom:calc(-1 * var(--hdr-h, 78px));
}
/* l'entête récupère les jetons de couleur du ton, mais jamais son fond :
   transparente tout en haut, en verre dès qu'on a défilé. Le dégradé du
   héros ne doit surtout pas être repeint dans la barre : on retombe sur le
   rose. La première déclaration de chaque paire est le repli des
   navigateurs sans color-mix : ils gardent l'aplat d'origine. */
.hdr[data-tone]{background:transparent}
.hdr.is-stuck[data-tone]{
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 56%, transparent);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 34px -26px rgba(0,0,0,.6);
}
.hdr.is-stuck[data-tone="gradient"]{
  background:var(--pink);
  background:color-mix(in srgb, var(--pink) 56%, transparent);
}
.hdr__in{
  max-width:var(--maxw); margin:0 auto; padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:center; padding:10px 2px; min-height:46px;
  transition:opacity .26s var(--ease), transform .4s var(--ease), visibility .26s;
}
/* menu ouvert : le logo s'efface. Il passait par-dessus les premiers liens du
   menu, et visibility:hidden le sort aussi du parcours au clavier. */
body.menu-open .brand{opacity:0; visibility:hidden; transform:translateY(-10px)}
.brand img{
  width:clamp(122px,12vw,168px); height:auto; display:block;
  transition:opacity .25s var(--ease);
}
.brand:hover img{opacity:.7}
.ftr .brand img{width:clamp(130px,13vw,176px)}

/* --------------------------------------------------------- navigation --- */
.nav{display:flex; align-items:center; gap:2px}
@media(max-width:980px){.nav{display:none}}
/* Le lien de menu n'est plus souligné : une gélule de verre se forme
   derrière lui. isolation:isolate enferme le z-index:-1 de la gélule dans
   le lien — sans quoi elle passerait derrière le fond de l'entête. */
.nav > a,.nav__top{
  position:relative; isolation:isolate;
  padding:12px 16px; min-height:44px;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:1rem; font-weight:400; color:var(--hi);
  transition:color .22s var(--ease);
}
.nav > a::after,.nav__top::after{
  content:""; position:absolute; z-index:-1; inset:3px 2px; border-radius:99px;
  background:var(--glass-veil);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), 0 8px 18px -14px rgba(0,0,0,.55);
  opacity:0; transform:scale(.82);
  transition:opacity .26s var(--ease), transform .42s var(--ease);
}
.nav > a:hover,.nav > a[aria-current="page"],
.nav__top:hover,.nav__item.is-current > .nav__top{color:var(--fg)}
.nav > a:hover::after,.nav > a[aria-current="page"]::after,
.nav__top:hover::after,.nav__item[data-open="true"] > .nav__top::after,
.nav__item.is-current > .nav__top::after{opacity:1; transform:none}

/* sous-menu « Réalisations » */
.nav__item{position:relative}
.nav__top svg{width:11px; height:11px; opacity:.7; transition:transform .3s var(--ease)}
.nav__item[data-open="true"] .nav__top svg{transform:rotate(180deg)}
.nav__sub{
  position:absolute; left:8px; top:calc(100% - 2px); min-width:210px;
  margin:0; padding:8px; list-style:none;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  border:1px solid var(--glass-line); border-radius:18px;
  box-shadow:var(--glass-bevel), 0 24px 50px -26px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item[data-open="true"] .nav__sub{opacity:1; visibility:visible; transform:none}
.nav__sub a{
  display:flex; align-items:center; min-height:44px; padding:10px 13px;
  border-radius:99px; font-size:.98rem; color:var(--hi);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__sub a:hover,.nav__sub a[aria-current="page"]{background:var(--glass-veil-2); color:var(--fg)}

.hdr__end{display:flex; align-items:center; gap:4px}

/* sélecteur de langue */
.lang{position:relative}
.lang__btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:10px 15px; border-radius:99px;
  background:transparent; border:1px solid transparent; cursor:pointer; color:var(--hi);
  font:inherit; font-size:.88rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  transition:color .22s var(--ease), background .28s var(--ease),
             border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.lang__btn:hover,.lang[data-open="true"] .lang__btn{
  color:var(--fg); background:var(--glass-veil); border-color:var(--glass-line);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), 0 8px 18px -14px rgba(0,0,0,.55);
}
.lang__btn svg{width:15px; height:15px; flex:none}
.lang__list{
  position:absolute; right:0; top:calc(100% + 4px); min-width:154px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  border:1px solid var(--glass-line); border-radius:18px;
  box-shadow:var(--glass-bevel), 0 24px 50px -26px rgba(0,0,0,.55);
  padding:6px; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.lang[data-open="true"] .lang__list{opacity:1; visibility:visible; transform:none}
.lang__list button,.lang__list a{
  display:flex; align-items:center;
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; font-size:.95rem; color:var(--hi); text-decoration:none;
  padding:11px 14px; min-height:44px; border-radius:99px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang__list button:hover,.lang__list a:hover{background:var(--glass-veil-2); color:var(--fg)}
.lang__list button[aria-current="true"],.lang__list a[aria-current="true"]{color:var(--fg); font-weight:700}

/* bouton menu (mobile) — pastille de verre */
.burger{
  display:none; width:46px; height:46px; padding:0; border-radius:50%;
  background:var(--glass-veil); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), 0 10px 22px -16px rgba(0,0,0,.55);
  cursor:pointer; color:var(--fg);
  align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.burger:active{transform:scale(.94)}
@media(max-width:980px){.burger{display:inline-flex}}
.burger span{
  display:block; width:24px; height:2px; background:currentColor;
  position:relative; transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:currentColor;
  transition:transform .38s var(--ease);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------- menu plein écran --- */
/* Le menu plein écran est une grande dalle de verre citron : la page reste
   visible derrière, floutée. Le voile reste épais (84 %) pour que le texte
   garde exactement le même contraste qu'auparavant sur l'aplat, et une
   lueur rose de la marque monte du coin bas droit. */
.menu{
  position:fixed; inset:0; z-index:80;
  background:var(--lime);
  background:
    radial-gradient(104% 92% at 94% 110%, rgba(214,177,185,.98) 0%, rgba(214,177,185,0) 58%),
    color-mix(in srgb, var(--lime) 84%, transparent);
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  color:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:100px var(--gut) 48px;
  /* defilement vertical seulement : le fond anime (plus large que l'ecran)
     laissait deplacer le menu de cote au doigt (26.10.2026) */
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y;
  /* fermé : le flou retombe à zéro. La fermeture est plus rapide que
     l'ouverture — un menu qui s'ouvre prend son temps, un menu qu'on ferme
     doit disparaître tout de suite. */
  opacity:0; visibility:hidden;
  -webkit-backdrop-filter:blur(0) saturate(100%); backdrop-filter:blur(0) saturate(100%);
  transition:opacity .26s var(--ease), visibility .26s,
             -webkit-backdrop-filter .26s var(--ease), backdrop-filter .26s var(--ease);
}
body.menu-open .menu{
  opacity:1; visibility:visible;
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  transition:opacity .4s var(--ease), visibility .4s,
             -webkit-backdrop-filter .55s var(--ease), backdrop-filter .55s var(--ease);
}
/* margin:auto centre le bloc verticalement SANS le rogner quand il est plus
   haut que l'écran — ce que justify-content:center faisait sur téléphone :
   le haut du menu passait hors de l'écran et devenait inatteignable. */
.menu__grid{
  max-width:var(--maxw); margin:auto; width:100%;
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(25px,4.2vw,68px);
}
@media(max-width:800px){.menu__grid{grid-template-columns:1fr; gap:34px}}
.menu__nav{list-style:none; margin:0; padding:0}
.menu__nav li{overflow:hidden}
/* Les liens montent depuis leur ligne, l'un après l'autre. Les retards ne
   valent QU'À L'OUVERTURE : à la fermeture ils retombent tous ensemble et
   plus vite, sinon refermer le menu durait une demi-seconde de trop. */
.menu__nav a{
  display:block; padding:4px 0;
  font-family:Anton,sans-serif; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(2.1rem,7.4vw,4rem); line-height:1.08; color:var(--sage);
  transform:translateY(105%);
  transition:transform .28s var(--ease-2), color .25s var(--ease);
}
body.menu-open .menu__nav a{
  transform:none;
  transition:transform .62s var(--ease), color .25s var(--ease);
}
body.menu-open .menu__nav li:nth-child(1) a{transition-delay:.06s}
body.menu-open .menu__nav li:nth-child(2) a{transition-delay:.12s}
body.menu-open .menu__nav li:nth-child(3) a{transition-delay:.18s}
body.menu-open .menu__nav li:nth-child(4) a{transition-delay:.24s}
body.menu-open .menu__nav li:nth-child(5) a{transition-delay:.30s}
body.menu-open .menu__nav li:nth-child(6) a{transition-delay:.36s}
body.menu-open .menu__nav li:nth-child(7) a{transition-delay:.42s}
.menu__nav a:hover{color:var(--ink)}
.menu__side{
  border-left:1px solid rgba(0,0,0,.2); padding-left:clamp(18px,3vw,40px);
  opacity:0; transform:translateY(14px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
@media(max-width:800px){.menu__side{border-left:0; border-top:1px solid rgba(0,0,0,.2); padding:26px 0 0}}
body.menu-open .menu__side{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s;
}
.menu__side .label{color:rgba(0,0,0,.55)}
.menu__projects{list-style:none; margin:14px 0 0; padding:0}
.menu__projects a{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:11px 0; min-height:44px; border-bottom:1px solid rgba(0,0,0,.16);
  font-size:1rem; color:rgba(0,0,0,.75);
  transition:color .2s var(--ease), padding-left .3s var(--ease);
}
.menu__projects a:hover{color:var(--sage); padding-left:8px}
.menu__projects .n{font-size:.78rem; font-weight:600; color:rgba(0,0,0,.45)}

/* ==========================================================================
   HÉROS — « DESIGN TO BUILD » arrive de très loin puis se pose
   ==========================================================================
   Le titre part minuscule, très en arrière dans la profondeur (translateZ
   fortement négatif + flou), grossit en s'approchant, dépasse très
   légèrement sa position finale, puis se pose. « WHAT WE DO! » suit.
   -------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-block:calc(var(--pt-hdr,0px) + clamp(48px,8vw,110px)) clamp(30px,5vw,70px);
}
/* uniquement sur l'accueil.
   La hauteur n'est plus portee par la section mais par son premier bloc
   (.hero__in--ouverture) : celui-ci remplit l'ecran a lui seul, de sorte qu'a
   l'ouverture on ne voit que « Design to build ». La signature et le
   paragraphe suivent dessous, hors champ, et se decouvrent au defilement. */
.hero--full{
  overflow:hidden;
  display:block;
  /* Marge basse volontairement courte : la section suivante apporte deja son
     propre retrait haut (~107 px). Les deux cumules creusaient un trou. */
  padding-block:0 clamp(16px,2vw,32px);
}
.hero--full .hero__in--ouverture{
  /* vh d'abord, svh ensuite : les navigateurs qui ignorent svh gardent le
     premier calcul au lieu de se retrouver sans hauteur du tout. */
  min-height:clamp(560px,100vh,1120px);
  min-height:clamp(560px,100svh,1120px);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--pt-hdr,0px) + clamp(56px,9vw,110px));
  padding-bottom:clamp(70px,11vw,120px);
}
.hero--full .hero__in--suite{padding-top:clamp(30px,5vw,64px)}
.hero__in{max-width:var(--maxw); margin:0 auto; width:100%; padding-inline:var(--gut)}
.hero__kicker{display:block; margin-bottom:26px}

/* --- la machine à écrire --------------------------------------------------
   Le script pose TOUS les caractères d'avance, invisibles, puis les allume
   un par un. La place étant réservée dès le départ, rien ne saute pendant
   la frappe et le titre ne se recompose jamais.

   .tw__w  un mot — insécable, pour que la ligne ne se coupe qu'entre deux
           mots (sans quoi « DESIGN » se casserait en « DESI / GN »)
   .tw__c  un caractère — le curseur est un ::after posé sur la dernière
           lettre frappée, en position absolue : il ne prend aucune place
           et ne décale donc pas le texte.

   .land part invisible : c'est le script qui l'allume (.is-ready). Si le
   script ne tourne pas, le repli « mouvement réduit » plus bas rend la
   ligne visible telle quelle.
   ------------------------------------------------------------------------ */
/* --- l'arrivée du titre du héros -----------------------------------------
   Le titre apparaît D'UN SEUL BLOC, en grandissant jusqu'à sa taille finale.
   Remplace la machine à écrire lettre par lettre : sur un mot aussi large
   qu'« DESIGN TO BUILD » en Anton, la frappe retardait la lecture de la
   phrase principale de près d'une seconde.

   La classe s'appelle `titre-bloc` et NON `land` : le script de frappe
   cherche `.land` dans le héros, ne le trouve plus, et ne fait rien.
   Rien n'a été retiré de site.js — la machine à écrire reste disponible
   si on veut la remettre ailleurs. */
.titre-bloc{
  display:block; opacity:0; transform:scale(.72);
  will-change:transform,opacity;
  /* Sans ombre portee : demande du 14.10.2026. Le titre est en aplat noir
     franc sur le degrade, sans relief ni halo. */
  text-shadow:none;
}
.titre-bloc.is-in{animation:titreArrive .95s var(--ease-land) both}
@keyframes titreArrive{
  from{opacity:0; transform:scale(.72)}
  to  {opacity:1; transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .titre-bloc{opacity:1; transform:none; animation:none !important}
}

.land{display:block; opacity:0}
.land.is-ready{opacity:1}
.tw__w{display:inline-block; white-space:nowrap}
.tw__c{display:inline-block; position:relative; opacity:0}
.tw__c.is-on{opacity:1}
.tw__c.is-caret::after{
  content:""; position:absolute; left:100%; top:.12em; bottom:.16em;
  width:.055em; min-width:2px; background:currentColor;
  animation:clignoter .78s steps(1,end) infinite;
}
@keyframes clignoter{0%,50%{opacity:1} 50.01%,100%{opacity:0}}

/* titre principal du héros — seule phrase de l'ouverture, donc elle prend
   toute la place : la mesure monte de 11,6 à 13,4 vw. */
.hero__title{
  font-size:clamp(3.2rem,13.4vw,11rem);
  line-height:.84;
  color:var(--ink);
  margin:0;
  letter-spacing:-.005em;
}
/* Conservé pour un éventuel second titre : plus utilisé sur l'accueil depuis
   que « What we do! » a été retiré de l'ouverture. */
.hero__sub{
  font-size:clamp(1.9rem,5.6vw,4.4rem);
  line-height:.9;
  color:var(--ink);
  margin:clamp(44px,9vw,140px) 0 0;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:clamp(32px,5vw,56px);
  padding-top:22px; border-top:1px solid var(--rule);
}

/* héros centré sur toutes les tailles d'écran (auparavant centré seulement
   sur téléphone). Le filet du bas garde sa pleine largeur ; ce sont les
   mentions qui se regroupent au milieu. */
.hero--full .hero__in{text-align:center}

/* Titre de page centre (pages interieures : contact, etc.).
   L'accueil passe deja par .hero--full. Attention : .lede porte un
   max-width:52ch, donc text-align:center ne suffit pas — sans
   margin-inline:auto le paragraphe reste colle a gauche et seul son
   texte se centre a l'interieur. */
.hero--center{text-align:center}
.hero--center .lede{margin-inline:auto}
.hero--full .hero__meta,.hero--center .hero__meta{justify-content:center}

/* --- le héros sur téléphone ----------------------------------------------
   Le bloc d'ouverture remplit l'écran comme sur grand écran, mais avec des
   marges resserrées : la signature et le paragraphe, qui le suivent, restent
   hors champ tant qu'on n'a pas fait défiler. */
@media(max-width:700px){
  .hero--full{padding-block:0 18px}
  /* meme promesse que sur grand ecran : le premier ecran ne montre que le
     titre. svh (et non vh) pour que la barre d'adresse mobile ne fasse pas
     depasser le bloc. */
  .hero--full .hero__in--ouverture{
    min-height:100vh;
    min-height:100svh;
    padding-top:calc(var(--pt-hdr,0px) + 14px);
    padding-bottom:28px;
  }
  .hero--full .hero__in--suite{padding-top:26px}
  .hero--full .hero__in{text-align:center}
  .hero--full .hero__kicker{margin-bottom:14px}
  /* « DESIGN TO BUILD » tient sur UNE seule ligne, quelle que soit la
     largeur du téléphone. Mesuré dans Anton : la phrase fait exactement
     5,921 fois la taille de la police. En divisant la largeur disponible
     par 6,1 (la marge couvre le très léger élargissement dû au découpage
     en caractères de la machine à écrire), elle remplit la ligne sans
     jamais la dépasser. cqi = largeur intérieure de .hero__in, gouttières
     déjà déduites — donc plus aucun calcul à refaire si elles changent. */
  .hero--full .hero__in{container-type:inline-size}
  .hero--full .hero__title{
    font-size:min(16.4cqi, 5.4rem);
    white-space:nowrap;
  }
  .hero--full .hero__meta{
    flex-direction:column; align-items:center; gap:7px;
    margin-top:26px; padding-top:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .land{opacity:1 !important}
  .tw__c{opacity:1 !important}
  .tw__c.is-caret::after{display:none}
}

/* --------------------------------- figure large sous le héros / sections */
.hero__figure,.figure{
  margin-top:clamp(30px,5vw,64px); overflow:hidden;
  background:rgba(0,0,0,.05); aspect-ratio:16/7;
}
@media(max-width:700px){.hero__figure,.figure{aspect-ratio:4/3}}
.hero__figure img,.figure img{width:100%; height:100%; object-fit:cover}

/* surlignage d'un mot */
.hl{
  color:inherit;
  background-image:linear-gradient(transparent 72%, var(--hi) 72%, var(--hi) 94%, transparent 94%);
  background-repeat:no-repeat; background-size:0 100%;
  transition:background-size 1.1s var(--ease) .35s;
}
.is-in .hl,.rv-line.is-in .hl{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.hl{background-size:100% 100%; transition:none}}
.u-mark{
  background-image:linear-gradient(transparent 62%, var(--hi) 62%);
  background-repeat:no-repeat; background-size:0 100%;
  transition:background-size .9s var(--ease);
}
.is-in .u-mark{background-size:100% 100%}

/* ==========================================================================
   TEXTE EN MOUVEMENT
   Tous les titres sont découpés mot par mot par le script : chaque mot monte
   depuis sa ligne, décalé de quelques centièmes de seconde.
   ========================================================================== */
/* Le mot est masqué par le BAS seulement (clip-path à valeur négative en
   haut) : sans cela, overflow:hidden rognait les accents des capitales —
   « À », « É », « Ê », « Œ » perdaient leur signe en Anton, qui est une
   police très haute. */
.w{
  display:inline-block; vertical-align:bottom;
  padding-bottom:.1em; margin-bottom:-.1em;
  clip-path:inset(-.45em -.07em 0 -.07em);
}
.w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(108%);
  transition:transform .78s var(--ease);
  transition-delay:var(--d,0s);
}
.is-in .w > i{transform:none}

/* révélation générique (paragraphes, images, blocs) */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.is-in{opacity:1; transform:none}
.rv-1{transition-delay:.07s} .rv-2{transition-delay:.14s} .rv-3{transition-delay:.21s}
.rv-4{transition-delay:.28s} .rv-5{transition-delay:.35s}

/* lignes de texte qui montent (héros, titres manuscrits) */
.rv-line{display:block; overflow:hidden}
.rv-line > span{display:block; transform:translateY(102%); transition:transform .78s var(--ease)}
.rv-line.is-in > span,.is-in .rv-line > span{transform:none}
.rv-line:nth-child(2) > span{transition-delay:.08s}
.rv-line:nth-child(3) > span{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .rv,.rv-line > span,.menu__nav a,.menu__side,.w > i{
    opacity:1 !important; transform:none !important; transition:none !important
  }
  .u-mark{background-size:100% 100%; transition:none}
}

/* ==========================================================================
   BANDEAU DÉFILANT (marquee)
   ========================================================================== */
.marquee{
  overflow:hidden; padding-block:clamp(26px,4vw,54px);
  -webkit-user-select:none; user-select:none;
}
.marquee__track{
  display:flex; width:max-content; gap:0;
  animation:defiler var(--dur,34s) linear infinite;
}
/* pause au survol de la SOURIS seulement (27.10.2026, bug vu par Benjamin) :
   sur telephone, toucher un logo laissait le bandeau « survole » pour toujours,
   il ne repartait plus. */
@media (hover:hover) and (pointer:fine){ .marquee:hover .marquee__track{animation-play-state:paused} }
.marquee__group{display:flex; align-items:center; gap:clamp(28px,4vw,64px); padding-right:clamp(28px,4vw,64px)}
.marquee__item{
  font-family:Anton,sans-serif; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(1.8rem,5.2vw,4.2rem); line-height:1; color:var(--display);
  transition:color .25s var(--ease);
}
a.marquee__item:hover{color:var(--fg)}
.marquee__dot{width:.42em; height:.42em; border-radius:50%; background:var(--display); flex:none}
@keyframes defiler{to{transform:translateX(-50%)}}
/* Bandeau qu'on tire a la souris ou au doigt (28.10.2026) : quand site.js
   prend la main, l'animation CSS s'arrete et le script deplace la bande.
   pan-y laisse le doigt faire defiler la page verticalement. */
.marquee.is-glissable{overscroll-behavior-x:contain}
.marquee.is-glissable .marquee__track{animation:none; touch-action:pan-y; cursor:grab; will-change:transform}
.marquee.is-tire .marquee__track{cursor:grabbing}
.marquee.is-tire a{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}
}

/* ==========================================================================
   LISTE DE PROJETS AVEC IMAGE AU SURVOL
   ========================================================================== */
.hoverlist{position:relative; isolation:isolate}
.hoverlist__items{
  position:relative; z-index:2; margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.6vw,26px) clamp(18px,2.6vw,44px);
}
.hoverlist__items li{display:flex; align-items:center; gap:clamp(18px,2.6vw,44px)}
.hoverlist__items li::after{
  content:""; width:.4em; height:.4em; border-radius:50%; background:var(--display);
  font-size:clamp(1.8rem,5vw,4rem);
}
.hoverlist__items li:last-child::after{display:none}
.hoverlist a{
  font-family:Anton,sans-serif; text-transform:uppercase; white-space:nowrap;
  font-size:clamp(1.8rem,5vw,4rem); line-height:1.05; color:var(--display);
  transition:color .3s var(--ease), opacity .3s var(--ease);
}
.hoverlist.is-hovering a{opacity:.42}
.hoverlist.is-hovering a.is-on{opacity:1; color:var(--fg)}
.hoverlist__img{
  position:absolute; z-index:1; top:0; left:0;
  width:clamp(220px,26vw,400px); aspect-ratio:4/3; overflow:hidden;
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .38s var(--ease), transform .55s var(--ease);
  pointer-events:none; background:rgba(0,0,0,.06);
}
.hoverlist__img.is-on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.hoverlist__img img{width:100%; height:100%; object-fit:cover}
@media(hover:none){.hoverlist__img{display:none}}
@media (prefers-reduced-motion:reduce){.hoverlist__img{display:none}}

/* ==========================================================================
   FORMES GÉOMÉTRIQUES PLATES — les trois « terrains de jeu »
   --------------------------------------------------------------------------
   Géométrie relevée au pixel sur la maquette (capture « RETAIL DESIGN /
   HOSPITALITY / DISPLAY »), rapportée en pourcentage de la carte :

     carte           carrée (652 × 660 px sur la maquette)
     rectangle       35 % × 65 %, incliné de +29°, sur carré bleu-gris
                     (la maquette le laisse sans fond ; Asser a demandé un carré
                      gris comme les deux autres cartes)

   ÉCART VOULU par rapport à la maquette : elle dessine une ellipse haute et
   étroite (33 × 68 %) et un triangle écrasé (63 × 27 %). Demande explicite
   d'Asser : un VRAI cercle et un VRAI triangle.

     cercle          66 % × 66 %, centré — largeur = hauteur, donc rond
     triangle        58 % × 50 %, centré — rapport équilatéral (h = l × 0,866)

   Les cartes arrivent en se retournant : un demi-tour complet sur l'axe
   vertical, puis elles se posent.
   ========================================================================== */
.shapes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(6px,0.9vw,12px);
  /* .shapes--4 : quatre domaines au lieu de trois (brief du 07.10.2026).
     Sous 1100 px on passe a 2x2 plutot que d'ecraser quatre carres. */
  /* la profondeur est portée par la grille : les trois cartes tournent
     dans le même espace, donc le point de fuite est commun */
  /* plus de perspective 3D : l'animation des cartes est desormais plane,
     donc rien a calculer en profondeur */
}
.shapes--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.shapes--4{grid-template-columns:repeat(2,1fr); max-width:760px; margin-inline:auto}}
@media(max-width:820px){.shapes{grid-template-columns:1fr; max-width:440px; margin-inline:auto}}
@media(max-width:560px){.shapes--4{grid-template-columns:1fr; max-width:440px}}

.shape{
  position:relative; aspect-ratio:1/1;
  display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
  opacity:0; transform:translateY(26px) scale(.965);
  /* Animation volontairement PLANE.
     L'ancienne version faisait pivoter les trois cartes en 3D
     (rotateY 180deg + translateZ + perspective:1600px). Deux defauts :
       1. backface-visibility:visible laissait voir la face MIROIR pendant
          la premiere moitie de la bascule — le texte apparaissait inverse ;
       2. trois grands calques GPU en 3D, en plus du fond anime, saccadaient
          sur une machine sans ventilateur.
     Un fondu + montee donne la meme intention pour une fraction du cout. */
}
.shape.is-in{
  animation:poser .62s var(--ease-land) forwards;
  will-change:transform,opacity;
}
/* animation terminee : on rend la memoire */
.shape.is-posee{ will-change:auto }
.shapes .shape:nth-child(2).is-in{animation-delay:.09s}
.shapes .shape:nth-child(3).is-in{animation-delay:.18s}
.shapes--4 > :nth-child(2) .shape.is-in{animation-delay:.09s}
.shapes--4 > :nth-child(3) .shape.is-in{animation-delay:.18s}
.shapes--4 > :nth-child(4) .shape.is-in{animation-delay:.27s}

@keyframes poser{
  0%{   opacity:0; transform:translateY(26px) scale(.965) }
  60%{  opacity:1 }
  100%{ opacity:1; transform:translateY(0) scale(1) }
}
@media (prefers-reduced-motion:reduce){
  .shape{opacity:1; transform:none; animation:none !important}
}

.shape__fig{position:absolute; z-index:0; background:var(--sand)}

/* 01 — rectangle incliné sur un carré bleu-gris, comme les deux autres cartes */
.shape--a{background:var(--steel)}
.shape--a .shape__fig{
  width:35%; height:65%; left:50%; top:17.5%;
  transform:translateX(-50%) rotate(29deg); transform-origin:center;
}
/* 02 — ellipse haute et étroite sur fond bleu-gris */
.shape--b{background:var(--steel)}
/* largeur = hauteur : c'est ce qui en fait un cercle et non une ellipse */
.shape--b .shape__fig{width:66%; height:66%; left:17%; top:17%; border-radius:50%}
/* 03 — triangle large et plat sur fond sable */
.shape--c{background:var(--sand)}
/* hauteur = largeur × 0,866 → les trois côtés sont égaux */
.shape--c .shape__fig{
  width:58%; height:50.2%; left:21%; top:24.9%;
  background:var(--steel);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

/* 04 — OFFICE : une arche (demi-cercle pose sur deux montants) sur fond
   sable. Meme vocabulaire que les trois autres — un aplat geometrique
   plein, pas de contour — mais une figure encore inedite, pour que les
   quatre domaines restent distinguables d'un coup d'oeil.
   PROPOSITION : le signe graphique Office reste a valider par l'agence. */
.shape--d{background:var(--sand)}
.shape--d .shape__fig{
  width:56%; height:52%; left:22%; top:24%;
  background:var(--steel);
  border-radius:50% 50% 6px 6px / 62% 62% 6px 6px;
}
.shape--d:hover .shape__fig{transform:translateY(-6px) scale(1.04)}

/* legende sous le nom du domaine */
/* La legende reste SOUS la carte, jamais par-dessus la figure : les formes
   gardent leur langage graphique d'origine (aplat + nom, rien d'autre). */
.shapes--4 > .dom-card{display:flex; flex-direction:column; gap:12px}
.shape__tag{
  margin:0; padding-inline:6px;
  font-size:clamp(.78rem,1.05vw,.9rem); line-height:1.35;
  text-align:center; color:var(--fg-2);
}

.shape__t{
  position:relative; z-index:1;
  font-family:Anton,sans-serif; text-transform:uppercase; text-align:center;
  font-size:clamp(1.2rem,2.75vw,2.25rem); line-height:1; color:var(--ink);
  padding-inline:10px;
}
.shape__link{position:absolute; inset:0; z-index:2}
.shape__link span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.shape__link:focus-visible{outline:2px solid var(--focus); outline-offset:-4px}

/* Survol : on anime les éléments INTÉRIEURS, jamais .shape elle-même —
   son animation de bascule est en « forwards » et écraserait toute
   transformation ajoutée au survol. */
.shape__fig,.shape__t{transition:transform .5s var(--ease)}
.shape--a:hover .shape__fig{transform:translateX(-50%) rotate(23deg) scale(1.05)}
.shape--b:hover .shape__fig{transform:scale(1.07)}
.shape--c:hover .shape__fig{transform:translateY(-7px) scale(1.05)}
.shape:hover .shape__t{transform:translateY(-4px)}

/* papiers crème posés en biais (section « notre vision ») */
.paper{position:absolute; background:var(--cream); z-index:0; pointer-events:none}
.paper--1{width:34%; aspect-ratio:3/4; left:2%; top:6%; transform:rotate(6deg)}
.paper--2{
  width:26%; aspect-ratio:1/1; left:6%; bottom:-6%;
  background:var(--cream); transform:rotate(-8deg);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
@media(max-width:820px){.paper{display:none}}

/* ==========================================================================
   MOSAÏQUE DE PHOTOS (pages catégorie)
   ========================================================================== */
.mosaic{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,22px); align-items:start;
}
.mosaic figure{margin:0; overflow:hidden; background:rgba(0,0,0,.06)}
.mosaic img{width:100%; height:100%; object-fit:cover; display:block}
.mosaic__lead{grid-column:1 / span 7; aspect-ratio:4/5}
.mosaic__wide{grid-column:8 / span 5; aspect-ratio:4/3; align-self:end}
.mosaic__a{grid-column:1 / span 4; aspect-ratio:3/2}
.mosaic__b{grid-column:5 / span 4; aspect-ratio:3/2}
.mosaic__c{grid-column:9 / span 4; aspect-ratio:3/2}
.mosaic__full{grid-column:1 / span 12; aspect-ratio:21/9}
@media(max-width:820px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mosaic__lead,.mosaic__wide,.mosaic__full{grid-column:1 / span 2; aspect-ratio:4/3}
  .mosaic__a,.mosaic__b,.mosaic__c{grid-column:span 1; aspect-ratio:1/1}
}
.mosaic figure{transition:transform .6s var(--ease)}



/* titre posé par-dessus la mosaïque */
.overtitle{position:relative; padding-bottom:clamp(26px,4vw,60px)}
.overtitle__t{
  position:absolute; z-index:3; right:var(--gut); top:clamp(40px,9vw,150px);
  font-size:clamp(2.2rem,8.2vw,6.6rem); line-height:.88;
  color:var(--display); text-align:right; max-width:62%;
  text-shadow:0 2px 24px rgba(0,0,0,.14);
}
@media(max-width:820px){
  .overtitle__t{position:static; max-width:100%; text-align:left; margin-bottom:22px; text-shadow:none}
}
/* pastille de couleur qui déborde derrière le titre */
/* Rectangle incliné posé DERRIÈRE la photo, comme sur la maquette : la photo
   en cache une partie, le reste dépasse sous le titre. Teinte = le fond de la
   section, assombri — relevé à #D7BFBA sur un fond rose #E1C8CC. */
.blob{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(150px,21vw,340px); aspect-ratio:1.34/1;
  background:var(--blob-c, rgba(0,0,0,.07));
  transform:rotate(13deg);
}
[data-tone="pink"] .blob{--blob-c:#D7BFBA}
[data-tone="sage"] .blob{--blob-c:#6FA39D}
[data-tone="lime"] .blob{--blob-c:#E2F074}
[data-tone="cream"] .blob{--blob-c:#E7E5D8}
/* les photos passent devant la forme */
.mosaic figure{position:relative; z-index:1}
@media(max-width:820px){.blob{display:none}}

/* ==========================================================================
   VITRINE PROJETS (accueil) — panneaux plein écran, parallaxe
   ========================================================================== */
.showcase{position:relative; display:flex; flex-direction:column; gap:clamp(14px,2vw,26px)}
.showcase__hud{
  position:sticky; top:80px; z-index:12; align-self:flex-end;
  display:inline-flex; align-items:baseline; gap:7px; margin-bottom:-46px;
  padding:8px 15px; border-radius:99px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 52%, transparent);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), 0 10px 24px -18px rgba(0,0,0,.5);
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  color:var(--fg-3); font-variant-numeric:tabular-nums; pointer-events:none;
}
.showcase__hud b{color:var(--fg); font-weight:700; font-size:.9rem}
@media(max-width:640px){.showcase__hud{top:70px; margin-bottom:-40px; font-size:.7rem}}

.show{
  position:relative; overflow:hidden; background:rgba(0,0,0,.06);
  height:clamp(520px,84vh,820px); isolation:isolate;
  opacity:0; transform:translate3d(var(--from,0px),0,0);
  transition:opacity .85s var(--ease), transform 1.1s var(--ease);
}
.show--l{--from:-76px}
.show--r{--from:76px}
.show.is-in{opacity:1; transform:translate3d(0,0,0)}
@media(max-width:900px){.show{height:clamp(400px,66vh,620px)}}
@media(max-width:520px){.show{height:clamp(360px,62vh,500px)}}

.show__media{position:absolute; inset:0; overflow:hidden}
.show__par{position:absolute; left:0; top:-14%; width:100%; height:128%; transform:translate3d(0,0,0)}
.show__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.15s var(--ease), filter .6s var(--ease);
}
.show__img.is-on{opacity:1}

.show__dots{
  position:absolute; z-index:2; right:clamp(16px,2.4vw,32px); bottom:clamp(18px,2.6vw,34px);
  display:flex; gap:6px; align-items:center;
}
.show__dots i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(244,243,233,.42); transition:background .5s var(--ease), transform .5s var(--ease);
}
.show__dots i.is-on{background:var(--lime); transform:scale(1.4)}
@media(max-width:520px){.show__dots{display:none}}

.show__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(6,10,9,.30) 0%, rgba(6,10,9,.05) 28%,
    rgba(6,10,9,.58) 60%, rgba(6,10,9,.90) 100%);
}
@media(max-width:760px){
  .show__media::after{
    background:linear-gradient(180deg,
      rgba(6,10,9,.30) 0%, rgba(6,10,9,.10) 18%,
      rgba(6,10,9,.76) 48%, rgba(6,10,9,.94) 100%);
  }
}
.show__body{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(20px,3.4vw,52px);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  color:var(--cream);
}
.show__n{font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); line-height:1.4}
@media(max-width:760px){.show__n{font-size:.68rem; letter-spacing:.12em} .show__d{font-size:.9rem}}
.show__t{
  font-family:Anton,sans-serif; text-transform:uppercase; line-height:.94;
  font-size:clamp(1.9rem,5vw,4rem); color:#FFF; max-width:16ch;
}
.show__d{margin:0; max-width:46ch; color:rgba(244,243,233,.85); font-size:clamp(.92rem,1.1vw,1.06rem); line-height:1.5}
.show__tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:2px}
.show__tags span{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,243,233,.92); border:1px solid rgba(244,243,233,.36);
  border-radius:99px; padding:6px 13px;
}
.show__go{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:4px;
  font-weight:600; font-size:1rem; color:#FFF;
}
.show__go svg{width:16px; height:16px; transition:transform .45s var(--ease)}
.show__link{position:absolute; inset:0; z-index:3}
.show__link span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.show__link:focus-visible{outline:2px solid var(--lime); outline-offset:-6px}
@media(hover:hover){
  .show:hover .show__img{filter:saturate(1.08) contrast(1.03)}
  .show:hover .show__go svg{transform:translateX(7px)}
  .show__t{transition:color .3s var(--ease)}
  .show:hover .show__t{color:var(--lime)}
}
.show__body > *{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.show.is-in .show__body > *{opacity:1; transform:none}
.show.is-in .show__body > *:nth-child(2){transition-delay:.07s}
.show.is-in .show__body > *:nth-child(3){transition-delay:.13s}
.show.is-in .show__body > *:nth-child(4){transition-delay:.19s}
.show.is-in .show__body > *:nth-child(5){transition-delay:.25s}
@media (prefers-reduced-motion:reduce){
  .show__par{top:0; height:100%; transform:none !important}
  .show{opacity:1 !important; transform:none !important; transition:none}
  .show__body > *{opacity:1 !important; transform:none !important; transition:none}
  .show__img{transition:none}
}

/* ------------------------------------------------------ grille projets -- */
.grid{display:grid; gap:clamp(15px,2vw,29px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* cinq expertises : cinq colonnes au-dela de 1200 px, puis 3 puis 2 puis 1.
   On degrade par paliers plutot que de retrecir les textes a l'infini. */
.grid--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.grid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.grid--5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid--2,.grid--3,.grid--4,.grid--5{grid-template-columns:1fr}}

.card{position:relative; display:flex; flex-direction:column; gap:14px}
.card__media{position:relative; overflow:hidden; background:rgba(0,0,0,.06); aspect-ratio:4/3}
.card__media img{width:100%; height:100%; object-fit:cover}

.card__t{font-family:Anton,sans-serif; text-transform:uppercase; font-size:1.32rem; line-height:1.02; transition:color .25s var(--ease)}
.card:hover .card__t{color:var(--hi)}
.card__m{font-size:.9rem; color:var(--fg-3); margin:0}
.card__link{position:absolute; inset:0; z-index:2}
.card__link span{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* --------------------------------------------------------- diaporama ---- */
.slider{position:relative; margin-top:clamp(24px,4vw,48px)}
.slider__stage{position:relative; overflow:hidden; background:rgba(0,0,0,.06); aspect-ratio:3/2}
@media(max-width:640px){.slider__stage{aspect-ratio:4/3}}
.slider__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility .7s;
}
.slider__slide.is-active{opacity:1; visibility:visible}
.slider__slide img{width:100%; height:100%; object-fit:cover}
.slider__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; flex-wrap:wrap}
.slider__count{font-size:.86rem; font-weight:600; color:var(--fg-3); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.slider__count b{color:var(--fg); font-weight:700}
.slider__ctl{display:flex; gap:8px}

/* Fleches de navigation : posees sur la photo, a gauche et a droite, plutot
   que dans la barre sous l'image. Le conteneur couvre toute la scene mais
   laisse passer les clics ; seuls les deux boutons les captent, de sorte que
   le clic sur l'image continue d'ouvrir le zoom. */
.slider__stage .slider__ctl{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(10px,2vw,22px);
  pointer-events:none;
}
.slider__stage .slider__ctl .btn-ico{
  pointer-events:auto;
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.55);
  color:#14201c;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
}
.slider__stage .slider__ctl .btn-ico:hover{ background:#fff; transform:scale(1.06) }
@media(max-width:640px){
  .slider__stage .slider__ctl .btn-ico{ width:40px; height:40px }
  .slider__stage .slider__ctl{ padding-inline:8px }
}
/* une seule image : pas de fleches */
.slider--single .slider__ctl{ display:none }
.btn-ico{
  width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-line); border-radius:50%;
  background:var(--glass-veil); cursor:pointer;
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), 0 10px 22px -16px rgba(0,0,0,.55);
  color:var(--fg); transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn-ico:hover:not(:disabled){background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn-ico:active{transform:scale(.94)}
.btn-ico:disabled{opacity:.34; cursor:default}
.btn-ico svg{width:17px; height:17px}
.slider__dots{display:flex; gap:2px; align-items:center}
.slider__dots button{width:34px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.slider__dots button::before{content:""; width:100%; height:2px; background:var(--rule-2); border-radius:2px; transition:background .3s var(--ease)}
.slider__dots button[aria-current="true"]::before{background:var(--hi)}
.slider__thumbs{display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.slider__thumbs button{
  flex:none; width:92px; aspect-ratio:4/3; padding:0; border:0; cursor:pointer;
  overflow:hidden; background:rgba(0,0,0,.06); opacity:.5;
  transition:opacity .3s var(--ease); outline-offset:2px;
}
.slider__thumbs button[aria-current="true"]{opacity:1}
.slider__thumbs img{width:100%; height:100%; object-fit:cover}
.slider--single .slider__bar,.slider--single .slider__thumbs{display:none}

/* zoom plein écran */
.lightbox{
  position:fixed; inset:0; z-index:120; background:rgba(10,14,13,.95);
  display:flex; align-items:center; justify-content:center; padding:4vmin;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox[data-open="true"]{opacity:1; visibility:visible}
.lightbox img{max-width:100%; max-height:88vh; object-fit:contain}
.lightbox__close{
  position:absolute; top:max(16px,3vmin); right:max(16px,3vmin);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(244,243,233,.4);
  background:rgba(244,243,233,.12); color:var(--cream); cursor:pointer;
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{background:rgba(244,243,233,.26)}


/* ------------------------------------------------------------- boutons --
   Gélule de verre. Le fond de la section passe au travers, flouté ; le
   liseré clair fait le biseau et un reflet balaie la gélule au survol,
   avant que le remplissage noir ne monte par le bas.

   Le texte du bouton plein passe du noir au crème : sur le sauge foncé, le
   noir ne donnait que 2,8 contre 1 — illisible. Le crème donne 6,4. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:16px 38px; border-radius:99px;
  /* 15 oct : la bordure est dessinee par le lisere iridescent de ::before.
     On la garde transparente pour ne pas changer la taille du bouton. */
  border:1.5px solid transparent;
  /* 7 oct : fond transparent demande par Asser — on reprend le verre de
     .btn--ghost pour tous les boutons. L'encre remplace la creme, sinon
     le texte clair deviendrait illisible sur un fond clair. */
  background:var(--glass-veil);
  color:var(--fg);   /* le halo est clair et permanent : encre, pas sage */
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), var(--glass-lift);
  font-weight:600; font-size:1rem; letter-spacing:.03em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease),
             transform .2s var(--ease);
}
.btn span{position:relative; z-index:1}
/* ------------------------------------------------------------------
   15 oct : l'iridescence ne remplit plus le bouton, elle n'eclaire que
   le LISERE, facon Apple. Le bouton redevient un simple verre clair et
   lisible ; la couleur ne vit que sur l'arete.

   Technique : ::before est un rectangle plein de degrade, puis on le
   masque pour n'en garder que l'epaisseur du bord. Les deux masques se
   superposent — l'un limite a la zone de contenu, l'autre couvrant tout
   — et `mask-composite:exclude` ne conserve que leur difference, c'est
   a dire l'anneau de 1.5px. C'est la seule facon d'avoir une bordure en
   degrade : `border` n'accepte pas les degrades.

   Il n'y a PAS de survol : le lisere est toujours la et son point le
   plus clair se deplace selon la position de la souris n'importe ou
   dans la page. Les variables --mx / --my sont mises a jour par
   assets/js/bouton-iris.js ; sans JavaScript elles valent 50% 50% et le
   lisere reste simplement centre.
   ------------------------------------------------------------------ */
.btn span{position:relative; z-index:1}
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; padding:1.5px; pointer-events:none;
  /* Deux couleurs de la marque seulement : citron (--lime) au point le plus
     proche de la souris, sauge (--sage-deep) sur le reste de l'arete. */
  background:
    radial-gradient(150% 300% at var(--mx,50%) var(--my,50%),
      #EEFC86 0%,
      #BBD98D 38%,
      #7CAEA9 70%,
      #2F5C55 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.9;
  transition:opacity .3s var(--ease);
}
/* Au survol du bouton lui-meme, l'arete s'allume franchement. */
.btn:hover::before{opacity:1}
.btn:hover{box-shadow:var(--glass-bevel), 0 18px 38px -18px rgba(0,0,0,.42)}
.btn:active{transform:translateY(1px)}

/* Navigateur sans masque CSS (tres ancien) : on retombe sur une simple
   bordure claire plutot que sur un bouton sans contour du tout. */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .btn{border-color:var(--glass-line)}
  .btn::before{display:none}
}
/* .btn--ghost est desormais identique au bouton de base : conserve comme
   alias pour ne pas modifier le balisage des pages. */
.btn--ghost{
  background:var(--glass-veil); color:var(--hi); border-color:transparent;
}

/* lien fléché */
.arrow-link{
  display:inline-flex; align-items:center; gap:11px; min-height:44px;
  font-weight:600; font-size:1.02rem; color:var(--fg);
  transition:color .25s var(--ease);
}
.arrow-link svg{width:17px; height:17px; transition:transform .4s var(--ease)}
.arrow-link:hover{color:var(--hi)}
.arrow-link:hover svg{transform:translateX(6px)}

/* ------------------------------------------------------------ services -- */
.svc{border-top:2px solid var(--fg); padding-top:24px; display:flex; flex-direction:column; gap:12px}
.svc__n{font-size:.78rem; font-weight:700; color:var(--hi); letter-spacing:.13em}
.svc h3{font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.02}
.svc p{font-size:.96rem; color:var(--fg-2); margin:0}
/* sous-titre d'une expertise : « Conception & experience », « Sourcing & achats »… */
.svc__s{font-size:.9rem; font-weight:600; color:var(--fg); margin-top:-6px}

/* cartes retournables (accueil) : recto = numéro, pictogramme isométrique et
   titre ; verso = le texte, centré verticalement. Sans JavaScript (pas de
   .flip-on), les deux faces s'affichent l'une sous l'autre. Les deux faces
   partagent la même cellule de grille : la carte prend la hauteur de la plus
   haute, sans hauteur fixe.
   Le verre reprend les jetons du site (gélules du menu) : voile blanc
   --glass-veil, --glass-film-lg, --glass-line, --glass-bevel, rayon 18px.
   Voile BLANC et non la couleur de la section : sinon les cartes virent au
   citron ; ici elles prennent les couleurs du dégradé animé qui passe
   derrière. */
.flips{align-items:stretch}
.flip{position:relative; display:flex; flex-direction:column; perspective:1400px}
.flip__in{display:grid; flex:1}
.flip__face{position:relative; display:flex; flex-direction:column; gap:12px; padding:20px 20px 24px;
  color:var(--fg); border-radius:18px;
  background:var(--glass-veil);
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), 0 24px 50px -26px rgba(0,0,0,.55)}

/* recto : filet + numéro en haut (comme les blocs services d'origine),
   pictogramme au milieu, titre en bas */
.flip__front{min-height:280px}
.flip__front .svc__n{border-top:2px solid var(--fg); padding-top:16px}
.flip__ic{display:block; width:min(70%,132px); height:auto; margin:auto; padding:8px 0; overflow:visible}
.flip__ic .ic-s{fill:var(--sage-deep); stroke:var(--sage-deep); stroke-width:2.5; stroke-linejoin:round}
.flip__ic .ic-m{fill:var(--sage); stroke:var(--sage-deep); stroke-width:2.5; stroke-linejoin:round}
.flip__ic .ic-g{fill:var(--glass-veil-2); stroke:var(--sage-deep); stroke-width:2.5; stroke-linejoin:round}
.flip__ic .ic-c{fill:var(--cream); stroke:var(--sage-deep); stroke-width:2.5; stroke-linejoin:round}
.flip__ic .ic-l{fill:none; stroke:var(--sage-deep); stroke-width:2.5}
.flip__front h3{font-size:clamp(1.15rem,1.45vw,1.5rem); line-height:1.02; padding-right:34px}

/* verso : le même verre, un peu plus dense pour la lecture, texte au milieu */
.flip__back{justify-content:center; gap:9px; padding-bottom:50px;
  background:var(--glass-veil-2)}
.flip__back .svc__s{margin-top:0}
.flip__back p{font-size:.86rem; line-height:1.48; color:var(--fg-2); margin:0}
.flip__btn{display:none}

.flip.flip-on{cursor:pointer}
.flip-on .flip__in{transform-style:preserve-3d; transition:transform .75s var(--ease)}
.flip-on .flip__face{grid-area:1/1; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transition:box-shadow .4s var(--ease)}
.flip-on .flip__back{transform:rotateY(180deg)}
.flip-on.is-flipped .flip__in{transform:rotateY(180deg)}
.flip-on:hover .flip__face{box-shadow:var(--glass-bevel), 0 30px 56px -24px rgba(0,0,0,.6)}
/* navigateur sans flou d'arrière-plan : verre plus opaque pour rester lisible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .flip__face{background:rgba(244,243,233,.86)}
  .flip__back{background:var(--cream)}
}

/* le « + » : un simple trait fin en bas à droite, qui tourne en « × » */
.flip-on .flip__btn{display:block; position:absolute; right:14px; bottom:20px; z-index:2; width:34px; height:34px;
  padding:0; border:0; background:none; color:var(--ink); cursor:pointer; border-radius:50%;
  transition:color .45s var(--ease)}
.flip__btn i{position:absolute; left:8px; top:8px; width:18px; height:18px; transition:transform .45s var(--ease)}
.flip__btn i::before,.flip__btn i::after{content:""; position:absolute; left:0; top:8px; width:18px; height:1.5px; background:currentColor}
.flip__btn i::after{transform:rotate(90deg)}
.flip-on:hover .flip__btn i{transform:rotate(90deg)}
.flip-on.is-flipped .flip__btn i{transform:rotate(45deg)}
.flip__btn:focus-visible{outline:2px solid currentColor; outline-offset:2px}
.flip__retour,.is-flipped .flip__voir{display:none}
.is-flipped .flip__retour{display:inline}

@media (max-width:640px){.flip__front{min-height:250px}}
@media (prefers-reduced-motion:reduce){
  .flip-on .flip__in,.flip-on.is-flipped .flip__in{transition:none; transform:none}
  .flip-on .flip__back{transform:none; visibility:hidden}
  .flip-on.is-flipped .flip__back{visibility:visible}
  .flip-on.is-flipped .flip__front{visibility:hidden}
}

/* phrase de conviction : une ligne qui porte, mise en avant sans guillemets */
.conviction{
  font-size:clamp(1rem,1.3vw,1.14rem); line-height:1.45; font-weight:600;
  margin-top:22px; padding-left:16px; border-left:3px solid var(--hi); max-width:56ch;
}

/* heros de l'accueil : phase 2 — la signature puis l'explication */
.hero__sig{
  margin-top:28px; margin-inline:auto; max-width:22ch;
  font-size:clamp(1.7rem,3.9vw,3.1rem); line-height:1.18; font-weight:600;
}
.hero__text{
  margin-top:16px; margin-inline:auto; max-width:60ch;
  font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.55; color:var(--fg-2);
}
/* la 6e cadence de reveal n'existait pas : le heros en a besoin */
.rv-6{transition-delay:.42s}

/* signature du pied de page : domaines et services sur deux lignes */
.ftr__sig{font-size:.84rem; letter-spacing:.04em; color:var(--fg-2); margin-top:8px; max-width:34ch}

/* fiche d'un domaine (page Services) */
.dom{border-top:2px solid var(--fg); padding-top:24px; display:flex; flex-direction:column; gap:10px}
.dom__t{font-family:Anton,sans-serif; text-transform:uppercase; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1}
.dom__tag{font-weight:600}
.dom p{font-size:.96rem; color:var(--fg-2); margin:0}
.dom__scope{font-size:.84rem; letter-spacing:.04em; color:var(--fg-3)}

/* services illustrés (rond de couleur + texte) */
.svc-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,80px) clamp(20px,4vw,60px); align-items:center}
@media(max-width:820px){.svc-row{grid-template-columns:1fr; gap:34px}}
.svc-orb{
  position:relative; aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 42% 38%, var(--sand) 0%, var(--steel) 78%);
  max-width:420px; width:100%; margin-inline:auto;
}
.svc-orb--alt{background:radial-gradient(circle at 58% 42%, var(--lime) 0%, var(--sage) 82%)}
.svc-orb img{width:100%; height:100%; object-fit:cover}
.svc-orb__n{font-family:Anton,sans-serif; font-size:clamp(3rem,9vw,7rem); color:rgba(0,0,0,.2)}

/* étapes de la méthode */
.step{position:relative; padding-top:26px; border-top:2px solid var(--fg)}
.step__n{font-size:.78rem; font-weight:700; letter-spacing:.13em; color:var(--hi); display:block; margin-bottom:12px}
.step h3,.step .step__t{font-size:clamp(1.2rem,1.9vw,1.6rem); margin-bottom:12px; line-height:1.02}
.step ul{margin:0; padding-left:17px; font-size:.95rem; color:var(--fg-2)}
.step li{margin-bottom:9px}
.step li b{color:var(--fg); font-weight:700}
.step__img{margin-bottom:20px; overflow:hidden; aspect-ratio:4/5; background:rgba(0,0,0,.06)}
/* En deux colonnes (page Approche), le 4/5 d'origine donne des images d'un
   demi-ecran de haut : on les couche en 16/10, le texte reste le sujet. */
.grid--2 > .step .step__img{aspect-ratio:16/10}
.step__img img{width:100%; height:100%; object-fit:cover}

/* -------------------------------------------------------------- chiffres */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px 40px}
.stat{padding:22px 0; border-top:2px solid var(--fg)}
.stat b{
  display:block; font-family:Anton,sans-serif;
  font-size:clamp(2.4rem,5vw,4rem); line-height:.9;
  font-variant-numeric:tabular-nums; color:var(--display);
}
.stat span{display:block; margin-top:10px; font-size:.92rem; color:var(--fg-3)}

/* ------------------------------------------------------------ formulaire
   Champs en gélule, contour fin, fond transparent — comme les maquettes. */
.form{display:grid; gap:22px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:1rem; font-weight:500; color:var(--fg)}
.field .req{color:var(--fg-3); font-weight:400}
.field input,.field textarea,.field select{
  font:inherit; font-size:1rem; color:var(--fg);
  background:transparent; border:1.5px solid var(--hi); border-radius:99px;
  padding:16px 22px; min-height:58px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{min-height:170px; resize:vertical; line-height:1.55; border-radius:26px; padding:18px 22px}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--fg);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 14%, transparent);
}
.field .hint{font-size:.85rem; color:var(--fg-3)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:600px){.form__row{grid-template-columns:1fr}}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__note{font-size:.86rem; color:var(--fg-3); max-width:52ch}

/* fiche contact */
.contact-block{
  display:flex; flex-direction:column; gap:1px;
  /* Carte a part entiere, comme les champs du formulaire en face.
     Avant : padding:24px 0 + border-top seule. Le passage "ombres et
     arrondis" (plus bas) a ajoute un border-radius a cet element ;
     un rayon applique a une bordure HAUTE UNIQUEMENT fait recourber ses
     deux extremites vers le bas, d'ou les crochets noirs qui mordaient
     sur le bloc precedent. Bordure complete + marge : plus de crochets. */
  /* 7 oct : cartes resserrees en deux passes a la demande d'Asser.
     Le facteur de hauteur n'etait pas le padding mais le min-height des
     liens, plus bas : ramene de 44px a 34px. 44px est la cible tactile
     recommandee, 34px reste au-dessus du minimum de 24px exige par le
     critere WCAG 2.5.8 (AA). En dessous, ne plus descendre. */
  padding:7px 12px; border:1.5px solid var(--hi); margin-bottom:5px;
  font-size:.86rem;
  /* tout le contenu de la carte est centre : le libelle, la valeur,
     l'adresse et l'horaire. align-items centre les enfants du flex
     (le lien est en inline-flex, donc il se reduit a son texte),
     text-align centre les lignes a l'interieur de chacun. */
  align-items:center; text-align:center;
}
.contact-block a{min-height:34px; display:inline-flex; align-items:center; color:var(--fg-2); transition:color .2s var(--ease)}
.contact-block a:hover{color:var(--hi)}
.contact-block address{line-height:1.35}

/* ---------------------------------------------------------- pied de page */
.ftr{padding-block:clamp(56px,8vw,110px) 34px}
.ftr__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(26px,4vw,50px)}
@media(max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr; gap:30px}}
.ftr .ftr__h{
  font-family:inherit; font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:14px;
}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:2px}
.ftr a{display:inline-flex; align-items:center; min-height:44px; font-size:.98rem; color:var(--fg-2); transition:color .2s var(--ease)}
.ftr a:hover{color:var(--hi)}
.ftr address{font-style:normal; font-size:.98rem; color:var(--fg-2); line-height:1.75}
.ftr__base{
  margin-top:48px; padding-top:12px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center; gap:4px 14px; flex-wrap:wrap;
  font-size:.86rem; color:var(--fg-3);
}
.ftr__base a{font-size:.86rem; min-height:44px; display:inline-flex; align-items:center}

/* grande adresse en Anton, comme la maquette */
.ftr__big{
  display:grid; grid-template-columns:1fr auto; gap:18px 40px; align-items:end;
  margin-top:clamp(40px,6vw,80px);
}
@media(max-width:760px){.ftr__big{grid-template-columns:1fr}}
.ftr__big a,.ftr__big span{
  font-family:Anton,sans-serif; text-transform:uppercase; line-height:1.02;
  font-size:clamp(1.3rem,3.4vw,2.6rem); color:var(--display);
  transition:color .25s var(--ease);
}
.ftr__big a:hover{color:var(--fg)}
.ftr__big > :last-child{text-align:right}
@media(max-width:760px){.ftr__big > :last-child{text-align:left}}

/* réseau social */
.social{display:flex; gap:8px}
.social a{
  width:46px; height:46px; border:1.5px solid var(--glass-line); border-radius:50%;
  background:var(--glass-veil);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), 0 10px 22px -16px rgba(0,0,0,.5);
  display:inline-flex; align-items:center; justify-content:center; color:var(--fg);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.social a:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.social svg{width:17px; height:17px}

/* ------------------------------------------------------------- notices -- */
.notice{
  background:rgba(0,0,0,.045); border-left:4px solid var(--hi);
  padding:20px 24px; margin:26px 0;
}
.notice p{margin:0; color:var(--fg-2); font-size:.97rem}
.notice p + p{margin-top:9px}
.notice b{color:var(--fg)}

/* fil d'ariane */
.crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:.88rem; color:var(--fg-3); padding-top:26px}
.crumb a{color:var(--fg-3); min-height:44px; display:inline-flex; align-items:center}
.crumb a:hover{color:var(--hi)}
.crumb svg{width:11px; height:11px; opacity:.5}

/* pagination projet */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:2px 30px; border-top:2px solid var(--fg); margin-top:clamp(40px,6vw,80px)}
@media(max-width:640px){.pager{grid-template-columns:1fr}}
.pager a{padding:28px 0; display:flex; flex-direction:column; gap:8px; transition:padding-left .4s var(--ease)}
.pager a:hover{padding-left:10px}
.pager a:last-child{text-align:right; align-items:flex-end}
@media(max-width:640px){.pager a:last-child{text-align:left; align-items:flex-start; border-top:1px solid var(--rule)}}
.pager strong{font-family:Anton,sans-serif; font-weight:400; text-transform:uppercase; font-size:1.3rem; line-height:1.05}
.pager a:hover strong{color:var(--hi)}

/* contenu long (pages légales) */
.prose h2{font-size:clamp(1.4rem,2.4vw,2rem); margin:44px 0 14px}
.prose h3{font-size:clamp(1.05rem,1.6vw,1.3rem); margin:28px 0 10px}
.prose p,.prose li{color:var(--fg-2)}
.prose ul{padding-left:19px}
.prose li{margin-bottom:8px}
.prose table{border-collapse:collapse; width:100%; margin:18px 0; font-size:.94rem}
.prose th,.prose td{border:1px solid var(--rule); padding:10px 13px; text-align:left}
.prose th{background:rgba(0,0,0,.05); font-weight:700}

/* ==========================================================================
   PASSAGE D'UNE PAGE À L'AUTRE
   --------------------------------------------------------------------------
   La page qu'on quitte s'efface en montant, celle qui arrive monte à son
   tour depuis le bas : le mouvement va toujours dans le sens de la lecture.
   Chrome, Edge et Safari 18+ savent le faire nativement.

   Pour tous les autres navigateurs, un simple fondu à l'arrivée — d'où le
   @supports, qui évite de jouer les deux effets l'un sur l'autre.
   ========================================================================== */
@view-transition{navigation:auto}

@keyframes page-sortie{to{opacity:0; transform:translateY(-25%)}}
@keyframes page-entree{from{opacity:0; transform:translateY(25%)}}
@keyframes page-fondu{from{opacity:0}}

::view-transition-old(root){animation:page-sortie .55s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:page-entree .55s cubic-bezier(.65,0,.35,1) both}

@supports not (view-transition-name:none){
  body{animation:page-fondu .4s cubic-bezier(.22,1,.36,1) both}
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body{animation:none}
}

/* liste de liens cliquables (404) */
.tap-list{list-style:none; padding:0; margin:0; border-top:2px solid var(--fg); max-width:460px}
.tap-list li{margin:0}
.tap-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:54px; padding:13px 0; border-bottom:1px solid var(--rule);
  color:var(--fg-2); font-weight:500; transition:color .2s var(--ease), padding-left .3s var(--ease);
}
.tap-link::after{content:"\2192"; color:var(--fg-3); transition:transform .3s var(--ease)}
.tap-link:hover{color:var(--hi); padding-left:8px}
.tap-link:hover::after{transform:translateX(4px); color:var(--hi)}

/* ==========================================================================
   REPLIS DU VERRE
   --------------------------------------------------------------------------
   Deux cas où le verre doit redevenir un aplat : le navigateur ne sait pas
   flouter un arrière-plan, ou la personne a demandé moins de transparence
   dans les réglages de son système. Dans les deux cas, le texte doit rester
   aussi lisible qu'avant.
   ========================================================================== */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hdr.is-stuck[data-tone]{background:var(--bg)}
  .hdr.is-stuck[data-tone="gradient"]{background:var(--pink)}
  .nav__sub,.lang__list,.showcase__hud{background:var(--bg)}
  .menu{background:var(--lime)}
  /* aplat opaque : le texte doit repasser en creme, sinon il serait de la
     meme couleur que le fond et disparaitrait. */
  .btn{background:var(--hi); color:var(--cream)}
  .btn::before{display:none}   /* pas de halo sur un aplat opaque */
  .btn--ghost,.btn-ico,.social a,.burger,.nav > a::after,.nav__top::after,
  .lang__btn:hover,.lang[data-open="true"] .lang__btn{background:rgba(255,255,255,.82)}
}
@media (prefers-reduced-transparency:reduce){
  .hdr.is-stuck[data-tone]{background:var(--bg)}
  .hdr.is-stuck[data-tone="gradient"]{background:var(--pink)}
  .nav__sub,.lang__list,.showcase__hud{background:var(--bg)}
  .menu{background:var(--lime)}
  .btn{background:var(--hi); color:var(--cream)}
  .btn::before{display:none}   /* pas de halo sur un aplat opaque */
  .btn--ghost,.btn-ico,.social a,.burger,.nav > a::after,.nav__top::after,
  .lang__btn:hover,.lang[data-open="true"] .lang__btn{background:rgba(255,255,255,.94)}
}

/* utilitaires */
.u-center{text-align:center}
.u-mt-s{margin-top:12px} .u-mt{margin-top:25px} .u-mt-l{margin-top:clamp(25px,4.2vw,50px)}
.u-mb{margin-bottom:25px}
.u-hide{display:none !important}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.two-col{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(24px,5vw,80px); align-items:start}
@media(max-width:860px){.two-col{grid-template-columns:1fr; gap:26px}}
.two-col--even{grid-template-columns:1fr 1fr}
@media(max-width:860px){.two-col--even{grid-template-columns:1fr}}

/* en-tête de section centrée : le label au-dessus, le titre au milieu.
   ⚠ Doit rester APRÈS .two-col : même spécificité, c'est l'ordre qui tranche.
   Modificateur volontaire — les autres .two-col gardent label-à-gauche. */
.two-col--center{display:block; text-align:center}
.two-col--center > div + div{margin-top:12px}
/* les blocs internes se recentrent aussi : sans ça le texte est centré mais
   le BLOC reste calé à gauche, et les paragraphes cassent n'importe où */
.two-col--center > div{margin-inline:auto}
.two-col--center p,
.two-col--center blockquote,
.two-col--center .lede{margin-inline:auto; max-width:60ch}
.two-col--center .lede,
.two-col--center blockquote p{max-width:46ch}
/* boutons et liens fléchés au centre */
.two-col--center .btn,
.two-col--center .lnk,
.two-col--center a.btn--ghost{margin-inline:auto}
.two-col--center blockquote{margin-left:auto; margin-right:auto}

/* Page contact : le formulaire est premier dans le code (ordre de lecture au
   clavier = ordre affiché sur mobile). Sur grand écran seulement, on replace
   les coordonnées à gauche. */
@media(min-width:861px){
  .two-col--contact > *:first-child{order:2}
  .two-col--contact > *:last-child{order:1}
}
@media(max-width:860px){.two-col--contact{gap:34px}}
.sticky-side{position:sticky; top:110px}
@media(max-width:860px){.sticky-side{position:static}}


/* bandeau d'avertissement « photos de démonstration » */
.stub{
  display:flex; gap:12px; align-items:flex-start;
  border:2px dashed var(--rule-2); padding:18px 22px; margin:0 0 30px;
}
.stub p{margin:0; font-size:.94rem; color:var(--fg-2); max-width:70ch}
.stub b{color:var(--fg)}

/* =====================================================================
   CARTE PROJET  ·  .pcard
   Ajoutée le 25.09.2026. Ne touche pas à .card (plate, sans rayon), qui
   reste utilisée ailleurs.

   Réglages retenus avec le client : voile 0.31 · ombre 0.52 · coins 25px.

   Trois décisions à ne pas « corriger » plus tard :

   1. L'ombre est teintée en rgba(16,34,31) — le --sage-ink de la palette —
      et non en noir. Sur le crème et le rose, une ombre noire tourne au
      gris sale ; celle-ci reste dans la famille de couleurs.

   2. Elle est en DEUX couches. La première, serrée (1px), fait poser
      l'objet sur la page ; la seconde, large et très diffuse, le détache
      du fond. Une seule couche donne un objet qui flotte.

   3. Le nom est posé SUR la photo, sans plaque. Le contraste est assuré
      par un voile dégradé qui monte du bas de l'image : il n'a ni bord ni
      forme, donc on ne le lit pas comme un panneau, mais il garantit la
      lisibilité aussi bien sur une photo sombre (le sol noir de Holy Cow)
      que très claire (le carrelage Tissot). Sa couleur est un vert-noir
      très foncé, pas du noir, pour ne pas griser les photos chaudes.
   ===================================================================== */
.pgrid{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:900px){ .pgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .pgrid{grid-template-columns:1fr} }

.pcard{
  --pc-radius:25px;
  /* .52 -> .72 le 14.10.2026 : ombres plus marquees, au repos comme au
     survol. Ce reglage unique pilote les deux etats (voir les calc plus bas),
     donc c'est ici qu'on dose, pas dans les box-shadow. */
  --pc-shadow:.72;
  --pc-voile:.31;

  position:relative; display:block; isolation:isolate;
  border-radius:var(--pc-radius); overflow:hidden;
  background:var(--bg); text-decoration:none; color:inherit;
  box-shadow:
    0 1px 2px rgba(16,34,31,calc(var(--pc-shadow) * .9)),
    0 14px 34px -6px rgba(16,34,31,calc(var(--pc-shadow) * .9));
  transition:box-shadow .4s var(--ease);
}
/* Survol : l'ombre se creuse nettement — demande du 14.10.2026. Trois
   couches au lieu de deux : un contact net, une ombre moyenne, puis une
   grande ombre tres etalee qui decolle franchement la carte du fond. */
.pcard:hover{
  box-shadow:
    0 2px 4px rgba(16,34,31,calc(var(--pc-shadow) * 1.3)),
    0 12px 24px -6px rgba(16,34,31,calc(var(--pc-shadow) * .95)),
    0 34px 64px -14px rgba(16,34,31,calc(var(--pc-shadow) * 1.2));
}
.pcard:focus-visible{ outline:3px solid var(--sage-deep); outline-offset:3px }

.pcard__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:rgba(0,0,0,.06) }
.pcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --------------------------------------------------------------------------
   DIAPORAMA SUR LA CARTE  —  14.10.2026
   Quand une carte possede plusieurs photos, elles se succedent toutes seules
   en fondu. La premiere reste dans le flux (c'est elle qui donne sa hauteur
   a la carte) ; les suivantes se superposent en absolu.
   Sans JavaScript, ou avec une seule photo, on voit simplement la premiere.
   -------------------------------------------------------------------------- */
.pcard__media--diapo img{
  transition:opacity 1.1s var(--ease);
}
.pcard__media--diapo img + img{
  position:absolute; inset:0; opacity:0;
}
.pcard__media--diapo img.is-on{opacity:1}
.pcard__media--diapo img.is-off{opacity:0}
@media (prefers-reduced-motion:reduce){
  .pcard__media--diapo img{transition:none}
}


.pcard__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,14,13,calc(var(--pc-voile) * 1.00)) 0%,
    rgba(10,14,13,calc(var(--pc-voile) * 0.72)) 18%,
    rgba(10,14,13,calc(var(--pc-voile) * 0.30)) 38%,
    rgba(10,14,13,0) 60%);
}
.pcard__plate{ position:absolute; left:0; right:0; bottom:0; padding:0 20px 20px; z-index:2 }

.pcard__t{
  margin:0;
  font-family:Anton,sans-serif; text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.02;
  letter-spacing:.005em; color:var(--cream);
}
.pcard__m{ margin:5px 0 0; font-size:.82rem; line-height:1.3; color:rgba(244,243,233,.80) }

@media(prefers-reduced-motion:reduce){
  .pcard,.pcard__media img{transition:none}
  .pcard:hover .pcard__media img{transform:none}
}

/* =====================================================================
   OMBRES ET COINS — SYSTEME UNIFIE
   Ajoute le 25.09.2026, a la demande du client : la carte projet (.pcard)
   a plu, on etend son traitement aux autres blocs du site.

   Deux regles tenues volontairement :

   1. L'ombre est TEINTEE en rgba(16,34,31) — le --sage-ink de la palette —
      jamais en noir. Sur le creme (#F4F3E9) et le rose (#E1C8CC), une ombre
      noire tourne au gris sale ; celle-ci reste dans la famille.

   2. Elle est en DEUX couches : une serree (1-2 px) qui fait POSER l'objet
      sur la page, une large et diffuse qui le detache du fond. Une seule
      couche donne un objet qui flotte.

   Le rayon VARIE selon la taille de l'element — il n'est pas identique
   partout. Un grand bloc photo supporte 20 px ; un champ de formulaire
   serait deforme au-dela de 8. Anton est une police a arretes dures : un
   rayon trop genereux se bat avec les titres.
   ===================================================================== */
:root{
  --om-teinte: 16,34,31;              /* --sage-ink en composantes */
  --om-douce:
    0 1px 2px  rgba(var(--om-teinte),.10),
    0 6px 18px -4px rgba(var(--om-teinte),.14);
  --om-moyenne:
    0 1px 2px  rgba(var(--om-teinte),.16),
    0 10px 28px -6px rgba(var(--om-teinte),.22);
  --om-forte:
    0 1px 2px  rgba(var(--om-teinte),.22),
    0 16px 40px -8px rgba(var(--om-teinte),.30);
  /* Un CERCLE ne s'ombre pas comme une carte. Une carte a une arete
     inferieure plate qui touche la page : il lui faut une ombre de
     contact serree. Un cercle ne touche la page qu'en un point — on
     reduit donc le contact et on augmente l'ambiante, avec un decalage
     vertical plus marque, pour qu'il se lise comme une sphere posee
     et non comme un disque colle. */
  --om-ronde:
    0 2px 6px   rgba(var(--om-teinte),.10),
    0 24px 54px -14px rgba(var(--om-teinte),.30);
  --r-grand:  20px;   /* blocs photo, cartes */
  --r-moyen:  14px;   /* blocs de contenu */
  --r-petit:   8px;   /* champs, boutons */
}

/* ---- .card : profils de l'equipe et cartes de secteur --------------- */
.card__media{ border-radius:var(--r-grand); box-shadow:var(--om-moyenne) }
.card:hover .card__media{ box-shadow:var(--om-forte) }
.card__media{ transition:box-shadow .4s var(--ease) }

/* ---- les trois formes « terrains de jeu » --------------------------- */
.shape{ border-radius:var(--r-grand); box-shadow:var(--om-moyenne) }

/* ---- bloc de contact ------------------------------------------------ */
.contact-block{ border-radius:var(--r-moyen); box-shadow:var(--om-douce) }

/* ---- formulaire ----------------------------------------------------- */
.field{ border-radius:var(--r-petit) }
.field:focus{ box-shadow:var(--om-douce) }

/* ---- boutons -------------------------------------------------------- */
/* 15 oct : le bouton garde la pilule (99px) et ne repasse plus au coin
   de 8px des champs de formulaire — c'est la forme Apple demandee. */
.btn{ box-shadow:var(--om-douce); transition:box-shadow .3s var(--ease), transform .3s var(--ease) }
.btn--ghost{ box-shadow:none }

/* ---- le diaporama, s'il reste utilise ------------------------------- */
.slider__stage{ border-radius:var(--r-grand); box-shadow:var(--om-moyenne) }

/* ---- respect du mouvement reduit ------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .card__media,.btn{ transition:none }
}

/* ---- le role, place SOUS le nom (demande du client, 25.09.2026) -----
   .label est un span inline : il lui faut display:block pour tenir sa
   propre ligne sous le titre. Classe dediee plutot qu'un style en
   ligne, pour que ca reste modifiable en un seul endroit. */
.card__role{
  display:block; margin-top:6px;
  font-size:.78rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-3);
}

/* ---- l'orbe circulaire de la section services ----------------------- */
.svc-orb{ box-shadow:var(--om-ronde) }

/* ==========================================================================
   LE TRACE NEON — page equipe
   --------------------------------------------------------------------------
   Toutes les classes sont prefixees « neon » : le fichier d'origine utilisait
   .line / .halo / .tube / .light / .core, et .light existe deja cinq fois
   plus haut dans cette feuille. Sans prefixe, le neon repeignait le site.
   ========================================================================== */
.neon{
  display:block; margin:0 auto;
  width:min(560px, 76%);
  /* la bande vide fait environ 120 px : on ne la laisse pas doubler */
  max-height:230px;
  overflow:visible;
  cursor:pointer;
}
@media(max-width:700px){ .neon{ width:88%; max-height:170px } }

.neon__l{ fill:none; stroke-linecap:round; stroke-linejoin:round }
.neon--halo   { stroke:#ff00d9; stroke-width:22;  opacity:.45; filter:url(#neon-glow) }
.neon--tube   { stroke:#ee00ff; stroke-width:12;  filter:url(#neon-glow-fin) }
.neon--lumiere{ stroke:#ff66fa; stroke-width:5 }
.neon--coeur  { stroke:#ffc4ff; stroke-width:1.5; opacity:.8 }

/* Sans JavaScript, les .neon__src restent affichees telles quelles : on les
   masque, le script les remplace par les quatre calques. */
.neon__src{ display:none }


/* ---------------------------------------------------------------- marques --
   Bandeau des marques. Tant qu'un logo n'est pas fourni, l'element affiche le
   nom en toutes lettres : le bandeau reste lisible et complet des maintenant.
   Les logos sont ramenes a une meme hauteur optique et dessatures, pour que
   dix chartes graphiques differentes ne se battent pas entre elles. */
.marquee--marques .marquee__group{ align-items:center }
.marque{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; text-decoration:none; color:inherit;
}
/* --k (pose dans le HTML) compense la forme du logo : un embleme carre
   (Holy Cow) monte, un mot tres large (G-Star) descend, pour que tous
   pesent le meme poids visuel. k = racine(3 / largeur:hauteur), 0,75 a 1,55. */
.marque--logo img{
  height:calc(var(--k,1) * clamp(26px,2.6vw,40px)); width:auto; display:block;
  filter:grayscale(1); opacity:.72;
  transition:filter .3s var(--ease), opacity .3s var(--ease);
}
a.marque--logo:hover img{ filter:grayscale(0); opacity:1 }
a.marque:not(.marque--logo){ transition:opacity .25s var(--ease) }
a.marque:not(.marque--logo):hover{ opacity:.6 }
span.marque{ opacity:.55 }          /* marque sans site officiel confirme */
@media(prefers-reduced-motion:reduce){ .marque--logo img{ transition:none } }


/* ==========================================================================
   FLECHE DU SOUS-MENU « PROJETS »  —  14.10.2026
   « Projets » est desormais un vrai lien vers la page de tous les projets ;
   seule la fleche ouvre le sous-menu. Les deux elements partagent la gelule
   de verre des autres liens de navigation.
   ========================================================================== */
.nav__top--split{padding-right:8px}
.nav__arrow{
  position:relative; isolation:isolate;
  padding:12px 10px 12px 4px; min-height:44px;
  display:inline-flex; align-items:center;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--hi); transition:color .22s var(--ease);
}
.nav__arrow::after{
  content:""; position:absolute; z-index:-1; inset:3px 2px; border-radius:99px;
  background:var(--glass-veil);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), 0 8px 18px -14px rgba(0,0,0,.55);
  opacity:0; transform:scale(.82);
  transition:opacity .26s var(--ease), transform .42s var(--ease);
}
.nav__arrow svg{width:11px; height:11px; opacity:.7; transition:transform .3s var(--ease)}
.nav__item[data-open="true"] .nav__arrow svg{transform:rotate(180deg)}

/* --------------------------------------------------------------------------
   15.10.2026 — UNE SEULE GELULE POUR « PROJETS » + LA FLECHE
   Avant, le lien et la fleche avaient chacun leur propre gelule de verre :
   au survol on voyait deux pastilles separees par un creux, comme un bouton
   coupe en deux. Desormais la gelule est portee par le bloc entier et les
   deux pastilles internes sont neutralisees. Le lien et la fleche restent
   deux zones cliquables distinctes — seul le dessin est unifie.
   -------------------------------------------------------------------------- */
.nav__item{
  display:inline-flex; align-items:center;
  isolation:isolate;        /* enferme le z-index:-1 de la gelule */
  z-index:1;                /* le sous-menu passe au-dessus des liens voisins */
}
.nav__item::before{
  content:""; position:absolute; z-index:-1; inset:3px 0; border-radius:99px;
  background:var(--glass-veil);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), 0 8px 18px -14px rgba(0,0,0,.55);
  opacity:0; transform:scale(.82); pointer-events:none;
  transition:opacity .26s var(--ease), transform .42s var(--ease);
}
.nav__item:hover::before,
.nav__item:focus-within::before,
.nav__item[data-open="true"]::before,
.nav__item.is-current::before{opacity:1; transform:none}
/* les deux pastilles internes ne doivent plus apparaitre */
.nav__item .nav__top::after,.nav__arrow::after{display:none}
/* le texte et le chevron s'allument ensemble, plus chacun de son cote */
.nav__item:hover .nav__top,.nav__item:hover .nav__arrow,
.nav__item[data-open="true"] .nav__top,
.nav__item[data-open="true"] .nav__arrow,
.nav__item.is-current .nav__top{color:var(--fg)}
/* on recolle les deux moities : plus de creux entre le mot et le chevron */
.nav__top--split{padding-right:4px}
.nav__arrow{padding:12px 14px 12px 2px}

/* ==========================================================================
   INDICATEUR DE DEFILEMENT  —  14.10.2026
   Une petite souris sous le heros : elle dit simplement « la page continue ».
   Elle s'efface au defilement et revient en haut de page (classe is-gone
   posee par site.js) ; elle disparait sur mobile, ou le geste est evident.
   ========================================================================== */
.scroll-hint{
  display:flex; flex-direction:column; align-items:center;
  margin-top:clamp(28px,5vw,56px);
  opacity:.62; transition:opacity .5s var(--ease), transform .5s var(--ease);
  animation:hintFlotte 2.6s var(--ease) infinite;
}
.scroll-hint.is-gone{opacity:0; transform:translateY(10px); animation:none; pointer-events:none}
.scroll-hint__mouse{
  position:relative; width:25px; height:40px; border-radius:99px;
  border:1.8px solid currentColor; opacity:.75;
}
.scroll-hint__wheel{
  position:absolute; left:50%; top:8px; width:3px; height:7px;
  margin-left:-1.5px; border-radius:99px; background:currentColor;
  animation:hintMolette 2.1s var(--ease) infinite;
}
@keyframes hintFlotte{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
@keyframes hintMolette{
  0%{transform:translateY(0); opacity:0}
  22%{opacity:1}
  70%{transform:translateY(15px); opacity:0}
  100%{transform:translateY(15px); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .scroll-hint,.scroll-hint__wheel{animation:none}
}
@media (max-width:620px){ .scroll-hint{display:none} }


/* ==========================================================================
   OUVERTURE AEREE  ·  .hero--aere  —  14.10.2026
   Page contact : le titre descend et la section suivante ne depasse plus en
   bas du premier ecran. On ne veut pas voir la moitie du formulaire avant
   d'avoir defile.
   ========================================================================== */
.hero--aere{
  padding-top:clamp(56px,12vh,140px);
  padding-bottom:clamp(96px,22vh,220px);
}
@media (max-width:620px){
  .hero--aere{padding-top:40px; padding-bottom:56px}
}

/* ==========================================================================
   OUVERTURE PLEIN ECRAN  ·  14.10.2026
   Demande d'Asser : sur un ecran large et bas (ultra-large, portable 16/10),
   on voyait deja la moitie de la section suivante avant d'avoir defile. Le
   premier ecran ne doit montrer QUE le titre, comme sur l'accueil.

   La hauteur n'est plus portee par du padding (qui ignore la hauteur reelle
   de l'ecran) mais par un min-height en svh. svh = hauteur visible reelle,
   barre d'adresse mobile deduite. Le clamp garde un plancher (460px, ecran
   tres bas) et un plafond (1120px, grand ecran 4K) pour que le titre ne se
   perde pas au milieu d'un vide immense.

   Deux montages coexistent dans le site, d'ou deux calculs :

   - le fil d'Ariane est AU-DESSUS de la section (approche, services, contact,
     agence, les 17 pages projets). Son conteneur occupe deja
     78px (hauteur de l'entete, voir `main > .wrap:first-child`) + ~70px de
     fil d'Ariane. La section ne doit donc remplir que le reste.
   - le fil d'Ariane est DANS la section (realisations et les 4 secteurs).
     La section part du haut de la page, sous l'entete : elle prend tout.

   Equipe est volontairement exclue (pas de data-ouverture sur son <body>),
   ainsi que les pages de texte : 404, merci, mentions legales et
   confidentialite — un titre plein ecran devant un texte juridique n'a
   aucun sens.
   ========================================================================== */
body[data-ouverture="plein"]{--crumb-h:0px}  /* plus de fil d'Ariane depuis le 20.10.2026 */

body[data-ouverture="plein"] #main > section:first-of-type{
  display:flex; flex-direction:column;
}

/* --- cas 1 : fil d'Ariane au-dessus ------------------------------------- */
body[data-ouverture="plein"] #main > section:first-of-type:not(:has(.crumb)){
  justify-content:center;
  min-height:clamp(460px, calc(100vh  - var(--hdr-h,78px) - var(--crumb-h)), 1120px);
  min-height:clamp(460px, calc(100svh - var(--hdr-h,78px) - var(--crumb-h)), 1120px);
}

/* --- cas 2 : fil d'Ariane dans la section ------------------------------- */
body[data-ouverture="plein"] #main > section:first-of-type:has(.crumb){
  min-height:clamp(460px, 100vh,  1120px);
  min-height:clamp(460px, 100svh, 1120px);
}
/* le fil d'Ariane reste colle en haut — c'est un reperage, pas un titre ;
   seul le bloc titre se centre dans la hauteur restante */
body[data-ouverture="plein"] #main > section:first-of-type:has(.crumb) > .wrap:not(:has(.crumb)){
  margin-block:auto;
}

/* L'indicateur de defilement respire : sur un grand ecran il etait colle au
   sous-titre alors qu'il reste beaucoup de place dessous. */
body[data-ouverture="plein"] #main > section:first-of-type .scroll-hint{
  margin-top:clamp(28px,6vh,72px);
}

/* ==========================================================================
   STORYBOARD V3 — Augmented Emotional Design (19.10.2026)
   Composants ajoutes pour les sequences du storyboard V3 : etiquettes,
   frise des quatre temps, trois modes d'engagement, liste des expertises,
   manifeste, filtres de la grille projets.
   ========================================================================== */

/* etiquettes (expertises, perimetres, partenaires) */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-inline:0; margin-bottom:0; padding:0; list-style:none}
.chips li,.chips span{
  font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hi); border:1.5px solid var(--hi); border-radius:99px; padding:8px 14px;
}
.chips--plein li{background:var(--hi); color:var(--cream)}

/* signature sous un texte : « — Benjamin Bouhan, fondateur » */
.signe{margin-top:18px; font-weight:600; color:var(--fg)}

/* frise des quatre temps : pastilles de couleur reliees par une ligne */
.frise{
  list-style:none; margin-inline:0; margin-bottom:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px);
}
.frise::before{
  content:""; position:absolute; left:0; right:0; top:27px; height:2px;
  background:var(--fg); opacity:.18;
}
.frise li{position:relative}
.frise__p{
  position:relative; display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  font-family:Anton,sans-serif; font-size:1.4rem; color:var(--ink);
  box-shadow:0 0 0 6px var(--bg);
}
.frise li:nth-child(1) .frise__p{background:var(--lime)}
.frise li:nth-child(2) .frise__p{background:var(--sage)}
.frise li:nth-child(3) .frise__p{background:var(--pink)}
.frise li:nth-child(4) .frise__p{background:var(--sand)}
.frise__t{
  display:block; margin-top:18px;
  font-family:Anton,sans-serif; text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.8rem); line-height:1;
}
.frise__d{margin-top:10px; font-size:.95rem; color:var(--fg-2)}
.frise__d b{display:block; margin-top:10px; color:var(--fg); font-weight:600}
@media(max-width:820px){
  .frise{grid-template-columns:1fr; gap:28px}
  .frise::before{left:27px; right:auto; top:0; bottom:0; width:2px; height:auto}
  .frise li{padding-left:76px}
  .frise__p{position:absolute; left:0; top:0}
  .frise__t{margin-top:12px}
}

/* trois modes d'engagement / deux colonnes IA : cartes arrondies en couleur */
.modes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.modes--2{grid-template-columns:repeat(2,1fr)}
.mode{
  border-radius:var(--r-grand); padding:clamp(24px,3vw,38px);
  color:var(--ink); display:flex; flex-direction:column; gap:12px;
}
.mode:nth-child(1){background:var(--lime)}
.mode:nth-child(2){background:var(--sage)}
.mode:nth-child(3){background:var(--pink)}
.modes--2 .mode:nth-child(2){background:var(--pink)}
.mode h3{font-family:Anton,sans-serif; text-transform:uppercase; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1}
.mode p{margin:0; font-size:.98rem; line-height:1.55}
.mode ul{margin:0; padding-left:18px; font-size:.98rem; line-height:1.55}
.mode li{margin-bottom:6px}
@media(max-width:900px){.modes,.modes--2{grid-template-columns:1fr}}

/* cinq expertises : rangées separees par un filet, nom a gauche en grand */
.xp{list-style:none; margin:0; padding:0}
.xp li{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px clamp(20px,4vw,60px);
  padding:clamp(22px,3vw,34px) 0; border-top:1px solid var(--rule);
}
.xp li:last-child{border-bottom:1px solid var(--rule)}
.xp h3{font-family:Anton,sans-serif; text-transform:uppercase; font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:.95}
.xp .svc__s{display:block; margin-top:10px}
.xp p{margin:0; font-size:1rem; line-height:1.6; color:var(--fg-2)}
@media(max-width:820px){.xp li{grid-template-columns:1fr}}

/* domaines en rangées alternées (page Expertises) */
.dom-rows{display:grid; gap:clamp(40px,6vw,90px)}
.dom-row{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,80px); align-items:center}
.dom-row:nth-child(even) .dom-row__fig{order:2}
.dom-row__fig{max-width:360px; width:100%; margin-inline:auto}
.dom-row__fig .shape{pointer-events:none}
.dom__proof{font-size:.92rem; font-weight:600; color:var(--fg)}
@media(max-width:820px){
  .dom-row{grid-template-columns:1fr}
  .dom-row:nth-child(even) .dom-row__fig{order:0}
  .dom-row__fig{max-width:240px}
}

/* manifeste : portrait a gauche, texte a droite */
.manif{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:start}
.manif__img{border-radius:var(--r-grand); overflow:hidden; aspect-ratio:1/1}
.manif__img img{width:100%; height:100%; object-fit:cover}
.manif p{margin-top:16px}
@media(max-width:820px){.manif{grid-template-columns:1fr}.manif__img{max-width:420px}}

/* filtres de la grille projets */
.filtres{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,34px)}
.filtres button{
  font:inherit; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg); background:transparent; cursor:pointer;
  border:1.5px solid var(--fg); border-radius:99px; padding:10px 18px; min-height:44px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.filtres button[aria-pressed="true"]{background:var(--fg); color:var(--bg)}
.pcard[hidden]{display:none}

/* titre long sur une seule ligne (« Augmented Emotional Design », approche) */
.h-xl--ligne{font-size:clamp(1.5rem,6.4vw,5.7rem); max-width:none; white-space:nowrap}
/* signature du heros de l'accueil : une seule ligne (la regle .hero__sig
   la bridait a 22ch, d'ou le retour a la ligne) */
.hero__sig--ligne{max-width:none}

/* pastilles de la frise en VERRE : teinte de la palette translucide,
   flou d'arriere-plan et biseau, comme les boutons du site */
.frise__p{
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), var(--glass-lift);
}
.frise li:nth-child(1) .frise__p{background:rgba(238,252,134,.5)}
.frise li:nth-child(2) .frise__p{background:rgba(124,174,169,.5)}
.frise li:nth-child(3) .frise__p{background:rgba(225,200,204,.55)}
.frise li:nth-child(4) .frise__p{background:rgba(227,217,167,.55)}

/* cartes de couleur en VERRE (3 modes d'engagement, 2 colonnes IA) :
   meme recette que les pastilles de la frise */
.mode{
  -webkit-backdrop-filter:var(--glass-film-lg); backdrop-filter:var(--glass-film-lg);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-bevel), var(--glass-lift);
}
.mode:nth-child(1){background:rgba(238,252,134,.5)}
.mode:nth-child(2){background:rgba(124,174,169,.5)}
.mode:nth-child(3){background:rgba(225,200,204,.55)}
.modes--2 .mode:nth-child(2){background:rgba(225,200,204,.55)}
/* variante pour un titre d'une ligne un peu plus long (« Ce que nous créons ensemble. », services) */
.h-xl--ligne.h-xl--long{font-size:clamp(1.3rem,5.8vw,5.2rem)}

/* VERRE INCOLORE (19.10.2026, demande d'Asser) : plus de teinte de la
   palette sur les cartes et les pastilles — seulement le verre (voile
   blanc tres leger + flou + biseau). Remplace les fonds colores ci-dessus. */
/* :nth-child(n) donne a ce selecteur le meme poids que les regles par
   couleur (li:nth-child(1)...) : sinon elles gagnent et la teinte revient. */
.frise li:nth-child(n) .frise__p,
.modes .mode:nth-child(n),
.modes--2 .mode:nth-child(n){background:rgba(255,255,255,.16)}

/* ==========================================================================
   OUVERTURE DES PAGES INTERIEURES  ·  .hero--page  —  20.10.2026
   Demande d'Asser : toutes les pages s'ouvrent comme l'accueil (etiquette,
   titre geant, filet + une ligne, souris), avec les memes espacements. Le
   texte d'introduction passe juste dessous, comme la signature de l'accueil.
   Seule difference avec l'accueil : un titre long a le droit de passer sur
   deux lignes (l'accueil force « DESIGN TO BUILD » sur une seule).
   ========================================================================== */
/* site.js ajuste la taille pour tenir sur une ligne ; s'il doit quand meme
   passer a la ligne, l'interligne de l'accueil (.84) ferait se toucher les
   deux lignes : on l'ouvre un peu. */
.hero--page .hero__title{text-wrap:balance; line-height:.92}
/* Les titres des pages interieures restent plus petits que « DESIGN TO
   BUILD » (demande d'Asser, 20.10.2026) : plafond a 7rem au lieu de 11rem,
   et toujours sur une seule ligne sur ordinateur (site.js reduit encore
   si la phrase est trop longue). */
.hero--page .hero__title{font-size:clamp(2.6rem,7.4vw,7rem); white-space:nowrap}
.hero--page .hero__in--suite .neon{margin-inline:auto}
@media(max-width:700px){
  .hero--page .hero__title{white-space:normal; font-size:clamp(2.6rem,14cqi,4.8rem)}
}

/* ==========================================================================
   PIED DE PAGE  ·  colonnes pliables  —  20.10.2026
   Navigation et Projets (17 projets) s'ouvrent au clic sur leur titre, avec
   une petite fleche : la liste complete etait trop longue a faire defiler
   sur telephone. Ouvertes a l'arrivee sur ordinateur, fermees sur
   telephone (site.js).
   ========================================================================== */
.ftr__plie > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  width:max-content; max-width:100%;
}
/* sur telephone les colonnes s'empilent : le titre devient une vraie zone
   de doigt (44 px). Sur ordinateur il reste aligne sur « Nos adresses ». */
@media(max-width:900px){ .ftr__plie > summary{min-height:44px} }
.ftr__plie > summary::-webkit-details-marker{display:none}
.ftr__plie > summary .ftr__h{margin:0}
.ftr__plie > summary::after{
  content:""; width:7px; height:7px; margin-top:-4px;
  border-right:1.6px solid var(--fg-3); border-bottom:1.6px solid var(--fg-3);
  transform:rotate(45deg); transition:transform .25s var(--ease), margin .25s var(--ease);
}
.ftr__plie[open] > summary::after{transform:rotate(-135deg); margin-top:4px}
.ftr__plie > summary:hover .ftr__h,
.ftr__plie > summary:hover::after{color:var(--hi); border-color:var(--hi)}
.ftr__plie > summary:focus-visible{outline:2px solid var(--hi); outline-offset:4px; border-radius:4px}
.ftr__plie > ul{margin-top:6px}

/* ouverture : Retail · Hospitality · Office · Experience menent chacun a sa page */
.hero__secteurs a{color:inherit; text-decoration:none; transition:color .2s var(--ease)}
.hero__secteurs a:hover{color:var(--hi); text-decoration:underline; text-underline-offset:4px}

/* ==========================================================================
   OUVERTURE : LA SOURIS PUIS LE TEXTE  ·  .hero__bascule  —  20.10.2026
   Demande d'Asser : a l'ouverture on ne voit que le titre ; le texte
   d'introduction apparait juste sous le filet des qu'on defile, et repart
   quand on remonte. Il partageait avant un grand vide avec la souris.
   La souris et le texte sont empiles dans la MEME case de grille : la place
   du texte est reservee d'avance, rien ne saute quand il apparait.
   ========================================================================== */
.hero__bascule{display:grid; margin-top:clamp(28px,5vw,56px)}
.hero__bascule > *{grid-area:1/1; align-self:start}
.hero__bascule .scroll-hint{margin-top:0; justify-self:center}
.hero__revele{
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__revele.is-on{opacity:1; transform:none; pointer-events:auto}
.hero__revele .hero__text{margin-top:0}
.hero__revele .hero__text + .hero__text{margin-top:12px}
@media (prefers-reduced-motion:reduce){ .hero__revele{transition:none; transform:none} }

/* Equipe : l'ouverture ne montre que le logo neon, en grand, centre dans le
   premier ecran ; titre et texte prennent la place de la souris au defilement. */
.equipe-ouverture{
  display:flex; flex-direction:column; justify-content:center;
  min-height:clamp(560px,100vh,1120px); min-height:clamp(560px,100svh,1120px);
  padding-bottom:clamp(40px,6vw,80px);
}
.equipe-ouverture__in{width:100%; text-align:center}
.equipe-ouverture .neon{width:min(820px, 82%); max-height:none}
.equipe-ouverture .lede{margin-inline:auto}

/* Contact : la colonne « Nous trouver » reste en place sous l'entete pendant
   que le formulaire defile a cote (20.10.2026). Seulement quand les deux
   colonnes sont cote a cote (au-dessus de 860 px, cf. .two-col). */
@media(min-width:861px){
  .contact-colle__fixe{position:sticky; top:calc(var(--hdr-h,78px) + 24px)}
}
/* Equipe : le logo doit etre au MILIEU du premier ecran. Le texte ne reserve
   donc plus sa place dans l'ecran (il est pose sous le logo) : seuls le logo
   et la souris comptent pour le centrage. Pour qu'il ne recouvre jamais la
   section suivante (ecran de portable peu haut), la section recoit une marge
   basse egale a la hauteur reelle du texte, mesuree par site.js
   (--revele-h). */
.equipe-ouverture{padding-bottom:0; margin-bottom:var(--revele-h,320px)}
.equipe-ouverture .hero__bascule{position:relative}
.equipe-ouverture .hero__revele{position:absolute; top:0; left:0; right:0}

/* ==========================================================================
   TOUT LE TEXTE CENTRE  —  20.10.2026 (demande d'Asser)
   Couche finale : le contenu de toutes les pages est centre. Exceptions
   voulues : le formulaire de contact (des champs centres se lisent mal) et
   les pages juridiques (.prose), ou un long texte centre devient illisible.
   Le pied de page garde ses colonnes.
   ========================================================================== */
main{text-align:center}
main form, main .prose{text-align:left}
/* tout bloc de texte a largeur limitee (ch) se recentre dans sa colonne */
main :is(p, .lede, h1, h2, h3, h4, blockquote, ul, ol, .conviction, .signe){margin-inline:auto}
main form :is(p, h2, h3), main .prose :is(p, h1, h2, h3, ul, ol){margin-inline:0}

/* « etiquette a gauche, titre a droite » : empile et centre, comme
   .two-col--center (sauf le contact, ou la colonne de gauche reste fixe) */
main .two-col:not(.two-col--center):not(.contact-colle){display:block}
main .two-col:not(.two-col--center):not(.contact-colle) > * + *{margin-top:12px}

/* rangees d'etiquettes, de filtres et de liens */
main :is(.chips, .filtres, .social){justify-content:center}

/* la frise des quatre temps : pastilles au milieu de leur colonne */
main .frise__p{margin-inline:auto}

/* citation : le filet passe au-dessus du texte au lieu d'a gauche */
main .conviction{border-left:0; padding-left:0; border-top:3px solid var(--hi); padding-top:14px}

/* projet precedent / suivant */
main .pager a, main .pager a:last-child{text-align:center; align-items:center}
main .pager a:hover{padding-left:0}

/* titre pose sur la photo des cartes projet */
main .pcard__plate{text-align:center}
/* empilee, la colonne « Prestations » des projets ne doit plus coller :
   elle glisserait par-dessus le texte qui la suit */
main .two-col:not(.two-col--center):not(.contact-colle) .sticky-side{position:static}
main .slider__thumbs{justify-content:center}

/* ==========================================================================
   OUVERTURE MOINS HAUTE  —  22.10.2026 (demande de Benjamin)
   L'ouverture remplissait tout le premier ecran : sous le texte
   d'introduction restaient 280 a 370 px de vide avant la section suivante.
   Elle s'arrete maintenant juste apres son contenu ; l'espace restant est
   celui, habituel, du haut de la section suivante.
   ========================================================================== */
.hero--full .hero__in--ouverture{min-height:0; padding-bottom:clamp(20px,2.4vw,36px)}
.hero--full .hero__in--suite{padding-top:clamp(20px,3vw,40px)}

/* ==========================================================================
   QUATRE DOMAINES ANIMES  —  22.10.2026 (GIF envoyes par Benjamin)
   Chaque forme tourne en boucle sur son propre axe, comme dans les GIF :
     Retail       rectangle  tourne a plat (axe Z)              1,8 s / tour
     Hospitality  cercle     pivote comme une piece (axe Y)     2,0 s / tour
     Experience   triangle   bascule vers l'avant (axe X)       2,4 s / tour
     Office       carre      se plie sur sa diagonale           2,2 s / tour
   Office n'avait pas de GIF : forme et mouvement sont une proposition,
   dans la meme famille que les trois autres. L'arche du 07.10 a ete
   remplacee par un carre : tournant sur la diagonale, l'arche devenait une
   feuille informe ; le carre reste net (losange, puis trait, puis carre).
   Couleurs relevees au pixel sur les GIF ; sauge et rose sont exactement
   ceux du site, seul le citron est plus doux (#E5E581).
   Seule la figure tourne : le nom du domaine reste immobile et lisible.
   Rotation sans perspective, comme les GIF (la forme s'aplatit puis
   revient), donc aucun calque 3D lourd.
   ========================================================================== */
.shape{--lime-gif:#E5E581}
.shape--a{background:var(--pink)}
.shape--b{background:var(--sage)}
.shape--c{background:var(--lime-gif)}
.shape--d{background:var(--pink)}
.shape--a .shape__fig,
.shape--b .shape__fig{background:var(--lime-gif)}
.shape--c .shape__fig,
.shape--d .shape__fig{background:var(--sage)}

/* rectangle debout, centre sans translateX : la rotation occupe le transform */
.shape--a .shape__fig{left:32.5%; transform:none}
/* Office : carre centre, meme surface que le cercle a peu pres */
.shape--d .shape__fig{width:50%; height:50%; left:25%; top:25%; border-radius:0}

.shape .shape__fig{animation:var(--tour) linear infinite; transition:none}
.shape--a{--tour:tourZ 1.8s}
.shape--b{--tour:tourY 2s}
.shape--c{--tour:tourX 2.4s}
.shape--d{--tour:tourDiag 2.2s}
@keyframes tourZ{ to{transform:rotate(360deg)} }
@keyframes tourY{ to{transform:rotateY(360deg)} }
@keyframes tourX{ to{transform:rotateX(360deg)} }
@keyframes tourDiag{ to{transform:rotate3d(1,1,0,360deg)} }

/* le survol ne touche plus la figure (elle tourne deja) ; le nom monte
   toujours un peu. Utile aussi sans animation (mouvement reduit). */
.shape--a:hover .shape__fig,.shape--b:hover .shape__fig,
.shape--c:hover .shape__fig,.shape--d:hover .shape__fig{transform:none}

/* hors de l'ecran, les formes s'arretent (site.js pose .is-visible) */
.shape:not(.is-visible) .shape__fig{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .shape .shape__fig{animation:none}
}

/* Accueil : la signature et son texte apparaissent a la place de la souris
   (22.10.2026), comme le texte d'introduction des pages interieures. */
.hero__revele .hero__sig{margin-top:0}
.hero__revele .hero__sig + .hero__text{margin-top:16px}

/* Accueil, « Ce qui nous anime » : photo a gauche, texte a droite
   (22.10.2026). La couche « tout centre » empile les .two-col ; celle-ci
   reste en deux colonnes sur ordinateur, et s'empile sous 860 px. */
main .two-col.two-col--even.aed-duo{display:grid}
main .two-col.two-col--even.aed-duo > * + *{margin-top:0}
/* 3/4 depuis le 27.10.2026 : la nouvelle photo (entree, choisie par Andreas) s'affiche entiere, sans recadrage */
.aed-photo{margin:0; border-radius:var(--r-grand); overflow:hidden; box-shadow:var(--om-moyenne); aspect-ratio:3/4}
.aed-photo img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:860px){ .aed-photo{max-width:420px; margin-inline:auto} }

/* ==========================================================================
   ENTÊTE SUR FOND SOMBRE (site.js mesure la photo qui passe dessous)
   Le logo noir devient blanc, le menu aussi ; le verre de l'entête se teinte
   de noir au lieu du rose pour garder le contraste.
   ========================================================================== */
.brand img{transition:opacity .25s var(--ease), filter .35s var(--ease)}
.hdr.logo-blanc .brand img{filter:invert(1) brightness(1.15)}
.hdr.nav-blanc .nav > a,
.hdr.nav-blanc .nav__top,
.hdr.fin-blanc .lang__btn,
.hdr.fin-blanc .burger{color:rgba(255,255,255,.9)}
.hdr.nav-blanc .nav > a:hover,.hdr.nav-blanc .nav > a[aria-current="page"],
.hdr.nav-blanc .nav__top:hover,.hdr.nav-blanc .nav__item.is-current > .nav__top,
.hdr.fin-blanc .lang__btn:hover,.hdr.fin-blanc .lang[data-open="true"] .lang__btn{color:#fff}
/* la gélule de survol : du verre fumé, pas du verre clair, sous un texte blanc */
.hdr.nav-blanc .nav > a::after,.hdr.nav-blanc .nav__top::after{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22)}
.hdr.fin-blanc .lang__btn:hover,.hdr.fin-blanc .lang[data-open="true"] .lang__btn{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22)}
.hdr.fin-blanc .burger{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22)}
.hdr.is-stuck.is-sur-sombre[data-tone]{
  background:rgba(12,14,13,.38);
  background:color-mix(in srgb, #0c0e0d 38%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 34px -26px rgba(0,0,0,.8);
}
.hdr .nav > a,.hdr .nav__top,.hdr .lang__btn,.hdr .burger{transition:color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease), box-shadow .28s var(--ease)}


/* ---- pastilles des expertises qui se retournent (accueil) -----------------
   face avant : le nom ; face arriere : l'icone (dossier ICONS du marketing).
   Survol a la souris, ou toucher sur telephone (:focus, la pastille a tabindex). */
.chips--flip li{border:0; padding:0; perspective:600px; cursor:default; outline:none}
.chips--flip .flip{border:0; padding:0; display:grid; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.chips--flip .flip > span{
  grid-area:1/1; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--hi); border-radius:99px; padding:8px 14px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* toutes les pastilles a la meme taille : « Project Management » passe sur
   deux lignes, et toutes prennent la hauteur de deux lignes (26.10.2026) */
.chips--flip li{width:12.5em}
.chips--flip .flip > span{min-height:3.7em; padding:6px 12px; text-align:center; line-height:1.25}
.chips--flip .flip__b{transform:rotateX(180deg); background:transparent; color:var(--hi)}   /* comme la face avant : contour seul */
.chips--flip .flip__b svg{width:2.3em; height:2.3em}
/* elles se retournent toutes seules, dans l'ordre (Design → Consulting), restent un
   moment sur leur icone, puis reviennent en sens inverse (Consulting → Design).
   27.10.2026 (retour de Benjamin : on n'avait pas le temps de lire) : cycle de 12 s,
   les cinq noms restent affiches ensemble ~5,8 s, puis 0,4 s d'ecart entre chaque
   pastille ; icones de 2 s (Consulting) a 5 s (Design). Souris et clic : aucun effet. */
.chips--flip li:nth-child(1) .flip{animation:chipFlip1 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chipFlip1{0%,41.67%{transform:none} 45%,90%{transform:rotateX(180deg)} 93.33%,100%{transform:none}}
.chips--flip li:nth-child(2) .flip{animation:chipFlip2 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chipFlip2{0%,45%{transform:none} 48.33%,86.67%{transform:rotateX(180deg)} 90%,100%{transform:none}}
.chips--flip li:nth-child(3) .flip{animation:chipFlip3 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chipFlip3{0%,48.33%{transform:none} 51.67%,83.33%{transform:rotateX(180deg)} 86.67%,100%{transform:none}}
.chips--flip li:nth-child(4) .flip{animation:chipFlip4 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chipFlip4{0%,51.67%{transform:none} 55%,80%{transform:rotateX(180deg)} 83.33%,100%{transform:none}}
.chips--flip li:nth-child(5) .flip{animation:chipFlip5 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chipFlip5{0%,55%{transform:none} 58.33%,76.67%{transform:rotateX(180deg)} 80%,100%{transform:none}}
/* (26.10.2026) plus d'effet au survol ni au clic : les pastilles tournent seules */
@media (prefers-reduced-motion:reduce){ .chips--flip .flip{transition:none; animation:none} }

/* ---- telephone : le texte d'introduction est visible des l'ouverture ----
   (demande d'Asser, 26.10.2026). Sur ordinateur il apparait toujours au
   defilement ; sur telephone on n'attend plus : texte affiche, souris masquee
   (elle partage la meme case que le texte). */
@media (max-width:760px){
  .hero__revele{opacity:1; transform:none; pointer-events:auto; transition:none}
  .hero__bascule .scroll-hint{display:none}
}

/* Services : l'icone de chaque expertise au-dessus de son titre (26.10.2026),
   memes icones que les pastilles de l'accueil (dossier ICONS du marketing) */
.xp__icone{display:block; width:clamp(40px,4.4vw,56px); height:clamp(40px,4.4vw,56px); margin:0 auto 14px; color:var(--hi)}
.xp__icone svg{width:100%; height:100%}

/* pastilles des expertises (accueil) : meme recette que les cartes en verre
   (« Design seul »…), en petit — verre incolore, biseau blanc, coins arrondis,
   titre en Anton (26.10.2026) */
.chips--flip .flip > span{
  border:1px solid var(--glass-line); border-radius:14px;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:var(--glass-film); backdrop-filter:var(--glass-film);
  box-shadow:var(--glass-bevel), 0 10px 22px -16px rgba(0,0,0,.5);
  color:var(--ink);
  font-family:Anton,Impact,sans-serif; font-weight:400; font-size:1.05rem; letter-spacing:.02em; line-height:1.05;
}
.chips--flip .flip__b{color:var(--ink)}
.chips--flip li{width:9.4rem}

/* pages projets : titre puis photos, presque sans vide entre les deux
   (26.10.2026 — la souris et le texte d'intro ont ete retires de ces pages) */
.hero--page:has(+ section [data-slider]),
.hero--page:has(+ section [data-slider]) .hero__in{padding-bottom:0}
.hero--page + section:has([data-slider]){margin-top:clamp(20px,2.6vw,32px) !important}
.hero--page + section > [data-slider]{margin-top:0}

/* projets, sur telephone : « Projet precedent » a gauche, « Projet suivant »
   a droite, cote a cote (26.10.2026) */
@media(max-width:640px){
  main .pager{grid-template-columns:1fr 1fr; gap:2px 16px}
  main .pager a{text-align:left; align-items:flex-start; padding:22px 0}
  main .pager a:last-child{text-align:right; align-items:flex-end; border-top:0}
  main .pager strong{font-size:1.05rem}
}

/* pas de clignement a l'ouverture (26.10.2026) : le titre des pages interieures
   attend sa taille definitive (classe posee par site.js) ; filet de securite :
   il apparait de toute facon apres 2 s, meme si le script ne tourne pas */
/* l'animation d'entree attend html.titres-ok (site.js) : jusque-la le titre
   reste a son etat de depart (invisible, a 72 %) puis grandit en entier */
html:not(.titres-ok) .titre-bloc.is-in{animation:none}

/* ouverture sans « clignement » (26.10.2026) : seul le titre fait son entree
   (il grandit) ; la petite ligne au-dessus et la ligne Client / Lieu sous le
   filet sont la des le depart, au lieu d'arriver en dernier */
.hero .hero__kicker.rv,.hero .hero__meta.rv,.hero .hero__meta .rv{opacity:1; transform:none; transition:none}

/* ==========================================================================
   OUVERTURE PLEIN ECRAN SUR ORDINATEUR  —  26.10.2026 (demande d'Asser)
   Sur toutes les resolutions d'ordinateur, chaque page s'ouvre sur son seul
   bloc titre, centre dans le premier ecran ; le reste se decouvre au
   defilement. Le telephone (760 px et moins) garde l'ouverture courte.
   (Annule, pour l'ordinateur seulement, l'ouverture moins haute du 22.10.)
   ========================================================================== */
@media (min-width:761px){
  .hero--full .hero__in--ouverture,
  .hero--page:has(+ section [data-slider]) .hero__in--ouverture{
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding-bottom:clamp(40px,6vh,90px);
  }
  /* projets : pas de souris sous le titre ; une marge basse egale a la marge
     haute garde le titre au meme endroit que sur les autres pages */
  .hero--page:has(+ section [data-slider]) .hero__in--ouverture{
    padding-bottom:calc(var(--pt-hdr,0px) + clamp(56px,9vw,110px));
  }
  /* Equipe : le logo neon remplit aussi tout l'ecran, meme tres grand */
  .equipe-ouverture{min-height:100vh; min-height:100svh}
}

/* ==========================================================================
   MEME MISE EN PAGE QUE L'ACCUEIL SUR TOUTES LES PAGES — ordinateur
   (26.10.2026, reference : l'accueil). Au lieu de centrer chaque ouverture
   selon son propre contenu (titre plus ou moins haut, texte plus ou moins
   long), toutes partent du meme point : la petite ligne au meme endroit que
   « Lausanne · Zurich », le titre occupe la meme hauteur que « DESIGN TO
   BUILD », donc filet, ligne du dessous et souris tombent au meme endroit.
   ========================================================================== */
@media (min-width:761px){
  .hero--full .hero__in--ouverture,
  .hero--page:has(+ section [data-slider]) .hero__in--ouverture{
    justify-content:flex-start;
    padding-top:max(calc(var(--pt-hdr,0px) + 48px), calc(50vh - 205px));
    padding-top:max(calc(var(--pt-hdr,0px) + 48px), calc(50svh - 205px));
    padding-bottom:clamp(40px,6vh,90px);
  }
  /* la case du titre a la hauteur de celle de l'accueil, le titre au milieu */
  .hero--page .hero__title{
    min-height:calc(clamp(3.2rem,13.4vw,11rem) * .84);
    display:flex; align-items:center; justify-content:center;
  }
}

/* Safari : il dessine le titre comme une image pendant qu'il grandit, puis
   revient au texte normal a la fin — d'ou un eclair d'une image. On garde le
   titre sur son propre calque du debut a la fin (translateZ), sans rien
   changer a l'effet. Chrome n'a pas ce passage, d'ou « Safari seulement ». */
.titre-bloc{transform:translateZ(0) scale(.72); -webkit-backface-visibility:hidden; backface-visibility:hidden}
@keyframes titreArrive{
  from{opacity:0; transform:translateZ(0) scale(.72)}
  to  {opacity:1; transform:translateZ(0) scale(1)}
}

/* ==========================================================================
   ENTREE DU TITRE SANS CLIGNEMENT DANS SAFARI (ordinateur) — 26.10.2026
   Analyse image par image de l'enregistrement d'Asser : Safari Mac dessine
   le titre une fois a 72 %, etire cette image pendant qu'il grandit, puis le
   redessine net d'un coup vers la fin -> les contours sautent (le clignement).
   Sur ordinateur, le titre grandit donc par sa VRAIE taille de police : il est
   dessine net a chaque image, rien a redessiner a la fin. Meme effet (de 72 %
   a 100 %, en partant du centre). La case du titre garde sa hauteur finale :
   filet, ligne du dessous et souris ne bougent pas. Telephone : inchange.
   ========================================================================== */
.hero__title{display:flex; align-items:center; justify-content:center}
.titre-bloc{font-size:.72em; transform:none; will-change:auto; -webkit-backface-visibility:visible; backface-visibility:visible}
.titre-bloc.is-in{animation-name:titreArriveTexte}
@keyframes titreArriveTexte{
  from{opacity:0; font-size:.72em}
  to  {opacity:1; font-size:1em}
}
@media (prefers-reduced-motion:reduce){ .titre-bloc{font-size:1em} }
/* (26.10.2026) applique aussi au telephone, a la demande d'Asser */

/* Equipe, sur telephone seulement : le logo neon se pose juste sous l'entete
   au lieu d'etre centre dans tout l'ecran (trop de vide au-dessus, 26.10.2026) */
@media (max-width:760px){
  .equipe-ouverture{min-height:0; justify-content:flex-start; padding-top:calc(var(--pt-hdr,81px) + 28px)}
}

/* ==========================================================================
   ENTREE DU TITRE : COULEUR AU LIEU D'OPACITE (Safari) — 26.10.2026
   Mesure sur l'enregistrement d'Asser : jusqu'a 3,73 s le titre grandit de
   2 px par image et reste gris, puis en UNE image il prend +9 px et devient
   noir. Safari joue l'opacite a part (sur la carte graphique) et se recale
   d'un coup a la fin. On fait donc apparaitre le titre par sa COULEUR
   (transparente -> encre) et grandir par sa taille de police : tout est
   dessine image par image, rien a recaler. Meme rendu.
   ========================================================================== */
.titre-bloc{opacity:1; color:rgba(0,0,0,0)}
.titre-bloc.is-in{animation-name:titreArriveCouleur}
@keyframes titreArriveCouleur{
  from{color:rgba(0,0,0,0); font-size:.72em}
  to  {color:var(--ink); font-size:1em}
}
@media (prefers-reduced-motion:reduce){ .titre-bloc{color:var(--ink); font-size:1em} }

/* ==========================================================================
   MOINS D'ESPACE, ET LE MEME SUR TOUS LES ECRANS — 26.10.2026 (Asser)
   Les marges des sections grandissaient avec la largeur (jusqu'a 122 px en
   haut ET en bas) : sur grand ecran les vides s'additionnaient. ~30 % de
   moins, et un plafond plus bas. L'ouverture plein ecran (ordinateur) s'arrete
   pile en bas de l'ecran, marge de la section suivante comprise : le premier
   ecran ne montre toujours que le titre, mais la suite arrive tout de suite.
   ========================================================================== */
.section{padding-block:calc(var(--pt-hdr,0px) + clamp(38px,5vw,84px)) clamp(38px,5vw,84px)}
.section--tight{padding-block:calc(var(--pt-hdr,0px) + clamp(26px,3.4vw,54px)) clamp(26px,3.4vw,54px)}
@media (min-width:761px){
  .hero--full .hero__in--ouverture,
  .hero--page:has(+ section [data-slider]) .hero__in--ouverture{
    min-height:calc(100vh - clamp(38px,5vw,84px));
    min-height:calc(100svh - clamp(38px,5vw,84px));
    padding-bottom:clamp(24px,3vh,48px);
  }
}

/* Equipe · Nos partenaires (26.10.2026) : X8, Flexmob et Minnig n'ont pas de
   site confirme (span) -> meme gris que les autres logos, pas plus pale. */
.marquee--partenaires span.marque{ opacity:1 }


/* ==========================================================================
   MEME ESPACE SOUS L'OUVERTURE SUR TOUS LES ECRANS — ordinateur (27.10.2026)
   Asser : « le meme espace sur tous les ecrans, grand, moyen, petit ».
   L'ouverture ne remplit plus tout l'ecran : sous le texte d'intro il reste
   toujours ~180 px avant le contenu suivant (marge de la section suivante
   comprise). Le titre garde sa place ; sur un grand ecran, le haut de la
   section suivante apparait simplement en bas du premier ecran.
   ========================================================================== */
@media (min-width:761px){
  .hero--full .hero__in--ouverture,
  .hero--page:has(+ section [data-slider]) .hero__in--ouverture{min-height:0}
  .hero--full .hero__in--ouverture{padding-bottom:calc(180px - clamp(38px,5vw,84px))}
}