/* ============================================================
   COUCHE 2027 — shader hero, typo cinétique, compteur, marquee,
   images flottantes. Fichier autonome et réversible :
   supprimer ce fichier + fx-2027.js restaure le site d'origine.
   ============================================================ */

/* ---- 0. CURSEUR CERCLE PLEIN (remplace les anciens curseurs) ---- */
@media (hover:hover) and (pointer:fine){
  html.fx27cur, html.fx27cur *{cursor:none !important}
  /* on neutralise les deux systèmes préexistants */
  #cursor,#cursor2,#fxdot,#fxring{display:none !important}

  #fx27cur{
    position:fixed;top:0;left:0;z-index:100001;pointer-events:none;
    width:24px;height:24px;border-radius:50%;
    background:var(--ambre);
    transform:translate(-50%,-50%);
    opacity:0;
    transition:width .3s cubic-bezier(.2,.7,.2,1),
               height .3s cubic-bezier(.2,.7,.2,1),
               background-color .3s, opacity .25s;
    will-change:transform;
  }
  html.fx27cur.fx27ready #fx27cur{opacity:1}
  /* survol d'un élément interactif : le cercle s'ouvre et se translucidifie
     pour laisser lire le texte en dessous */
  body.fx27hot #fx27cur{
    width:52px;height:52px;
    background:rgba(242,184,75,.28);
    box-shadow:inset 0 0 0 1.5px var(--ambre);
  }
  /* état "pressé" : le cercle se resserre nettement pour désigner
     précisément le point cliqué (y compris au survol d'un lien) */
  body.fx27down #fx27cur,
  body.fx27hot.fx27down #fx27cur{
    width:16px;height:16px;
    background:var(--ambre);
    box-shadow:none;
    transition:width .12s ease, height .12s ease, background-color .12s;
  }
}
@media (hover:none),(pointer:coarse){#fx27cur{display:none}}

/* ---- 1. SHADER WEBGL DU HERO (matière générative) ---- */
#glhero{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:2}

/* ---- 2. TYPO CINÉTIQUE (entrée ligne par ligne + mot en contour) ---- */
.fx27-hollow{color:transparent;-webkit-text-stroke:1.5px var(--blanc)}
@supports not ((-webkit-text-stroke:1px #000)){.fx27-hollow{color:var(--blanc)}}
.fx27-kine{animation:none!important;opacity:1!important}
.fx27-kine .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.fx27-kine .ln>span{display:inline-block;transform:none}
body.fx27arm .fx27-kine .ln>span{transform:translateY(115%)}
body.fx27go .fx27-kine .ln>span{transform:none;transition:transform 1s cubic-bezier(.22,1,.36,1)}
body.fx27go .fx27-kine .ln:nth-child(2)>span{transition-delay:.12s}
@media(prefers-reduced-motion:reduce){
  body.fx27arm .fx27-kine .ln>span{transform:none!important;transition:none!important}
}

/* ---- 3. COMPTEUR DU PRELOADER ---- */
#loader .lpct{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(2.4rem,7vw,4.2rem);color:var(--ambre);line-height:1;margin-top:20px;font-variant-numeric:tabular-nums}

/* ---- 4. MARQUEE GÉANT RÉACTIF AU SCROLL ---- */
.fx27-giant{padding:9vh 0;background:var(--sombre);border-top:1px solid rgba(169,201,180,.14);border-bottom:1px solid rgba(169,201,180,.14);overflow:hidden}
.fx27-line{display:flex;width:max-content;will-change:transform}
.fx27-line b{font-weight:700;font-size:clamp(3.2rem,9vw,8rem);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;padding-right:5vw;color:transparent;-webkit-text-stroke:1.2px rgba(169,201,180,.55)}
.fx27-line b em{font-style:normal;color:var(--ambre);-webkit-text-stroke:0}
@supports not ((-webkit-text-stroke:1px #000)){.fx27-line b{color:rgba(169,201,180,.35)}}
/* animations réduites : le bandeau reste visible, simplement immobile */
@media(prefers-reduced-motion:reduce){.fx27-line{transform:none!important}}

/* ---- 5. IMAGE FLOTTANTE AU SURVOL (data-peek) ---- */
#fx27peek{position:fixed;left:0;top:0;z-index:95;width:min(300px,30vw);aspect-ratio:4/3;border-radius:14px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.86) rotate(-3deg);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 26px 70px rgba(0,0,0,.45);border:1px solid rgba(242,184,75,.35)}
#fx27peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.fx27peek #fx27peek{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
@media(hover:none){#fx27peek{display:none}}
@media(prefers-reduced-motion:reduce){#fx27peek{display:none}}

/* ============================================================
   BANDEAU LOGOS CLIENTS — mis en valeur
   (couleur pleine, plus grands, avec intitulé)
   ============================================================ */
.marquee{padding:58px 0 62px}
.marquee .mqlabel{
  text-align:center;margin:0 0 34px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--or);
}
body.dark .marquee .mqlabel{color:var(--ambre)}
.marquee img{width:190px;height:80px;object-fit:contain;filter:none;opacity:.92}
.marquee img:hover{filter:none;opacity:1;transform:scale(1.06)}
/* en mode sombre, les logos (encres foncées) reçoivent une plaque claire
   pour rester lisibles, plutôt qu'un filtre qui dénature les couleurs */
/* Mode sombre : cartouche blanc de dimensions IDENTIQUES pour tous les logos.
   object-fit:contain centre chaque logo dans la même boîte ; la marge interne
   est ajustée pour les logos recadrés au plus juste (mopga, resoeau) afin que
   leur encre pèse visuellement autant que celle des autres. */
body.dark .marquee img{
  filter:none;opacity:1;
  width:196px;height:76px;
  object-fit:contain;
  padding:10px 18px;
  background:rgba(255,255,255,.95);
  border-radius:12px;
}
body.dark .marquee img[src*="mopga"],
body.dark .marquee img[src*="iemp"],
body.dark .marquee img[src*="inca"]{width:196px;height:76px;padding:21px 26px}
body.dark .marquee img[src*="resoeau"]{width:196px;height:76px;padding:17px 22px}
body.dark .marquee img:hover{filter:none;opacity:1;background:#fff}
@media(max-width:820px){
  .marquee img{height:58px}
  .marquee .mqlabel{font-size:.55rem;letter-spacing:.2em;margin-bottom:24px}
}


/* logo double (deux régies) : plus large que les autres, donc plus bas ;
   son fond JPG est blanc opaque, on l'assoit sur une plaque pour que ce soit assumé */
.marquee img[src*="resoeau"]{padding:9px 22px}
@media(max-width:820px){.marquee img[src*="resoeau"]{padding:7px 16px}}
/* MOPGA est recadré au plus juste (97 % d'encre) là où les autres logos gardent
   des marges internes (54 % en moyenne) : à hauteur égale il paraissait 80 % plus
   gros. On réduit sa hauteur pour équilibrer le poids visuel du bandeau. */
.marquee img[src*="mopga"],
.marquee img[src*="iemp"],
.marquee img[src*="inca"]{padding:16px 36px}
@media(max-width:820px){.marquee img[src*="mopga"],.marquee img[src*="iemp"],.marquee img[src*="inca"]{padding:10px 22px}}
/* ============================================================
   MENU MOBILE — la croix de fermeture doit rester au-dessus
   Le burger se transforme en croix (body.mopen), mais la barre de
   navigation (z-index 50) passait sous l'overlay du menu (z-index 110) :
   la croix était invisible et incliquable. On remonte la nav au-dessus.
   ============================================================ */
body.mopen #nav{z-index:120}
body.mopen #nav.scrolled .wrap{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.mopen #burger{border-color:rgba(242,184,75,.7)}
body.mopen #burger i{background:var(--ambre)}

/* ---- bandeau logos : respiration adaptée aux petits écrans ---- */
@media(max-width:820px){
  .marquee .track{gap:22px}
  .marquee img{width:126px;height:56px}
  .marquee{padding:44px 0 46px}
  body.dark .marquee img{width:148px;height:58px;padding:8px 13px;border-radius:10px}
  body.dark .marquee img[src*="mopga"],body.dark .marquee img[src*="iemp"],body.dark .marquee img[src*="inca"]{width:148px;height:58px;padding:16px 20px}
  body.dark .marquee img[src*="resoeau"]{width:148px;height:58px;padding:13px 17px}
}
/* ============================================================
   TABLEAU D'HONNEUR (page Références)
   Certains logos sont recadrés au plus juste (leur encre remplit
   presque tout le fichier) : on réduit leur hauteur pour qu'ils
   pèsent visuellement autant que les logos à marges d'origine.
   ============================================================ */
.honneur .cell img[src*="resoeau"]{height:46px}
.honneur .cell img[src*="mopga"],
.honneur .cell img[src*="iemp"],
.honneur .cell img[src*="inca"],
.honneur .cell img[src*="epide"]{height:38px}
/* Région Île-de-France : format très allongé (4,2:1), on limite la largeur
   plutôt que la hauteur pour qu'il ne domine pas sa cellule */
.honneur .cell img[src*="region-idf"]{height:auto;width:100%;max-width:170px}
/* ============================================================
   VIEW TRANSITIONS INTER-PAGES (natif, zéro librairie)
   Les 26 pages s'enchaînent en fondu ; la barre de navigation
   persiste d'une page à l'autre. Navigateurs non compatibles :
   le rideau historique prend automatiquement le relais.
   ============================================================ */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vtSortie .28s ease both; }
::view-transition-new(root){ animation: vtEntree .42s ease both; }
@keyframes vtSortie{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes vtEntree{ from{ opacity:0; transform:translateY(12px); } }
#nav{ view-transition-name: barre-navigation; }
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}
/* ============================================================
   HEROS INTERNES — voix éditoriale unifiée
   Les accents <em> passent en serif italique, comme l'accueil v2,
   en conservant le dégradé ambre existant.
   ============================================================ */

/* entrée douce des banners internes (l'accueil a sa propre chorégraphie) */
@media(prefers-reduced-motion:no-preference){
  .banner .eyebrow{animation:banIn .7s cubic-bezier(.22,1,.36,1) both}
  .banner h1{animation:banIn .8s cubic-bezier(.22,1,.36,1) .08s both}
  .banner p{animation:banIn .8s cubic-bezier(.22,1,.36,1) .18s both}
  @keyframes banIn{from{opacity:0;transform:translateY(22px)}}
}
/* ============================================================
   VAGUE 2 — micro-langage sensoriel
   ============================================================ */
/* curseur contextuel : annonce « Voir / Découvrir » sur les vignettes */
#fx27cur span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.55rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#2A1D02;
  opacity:0;transition:opacity .18s;
}
body.fx27voir #fx27cur{width:76px;height:76px;background:var(--ambre);box-shadow:none}
body.fx27voir #fx27cur span{opacity:1}

/* photos éditoriales : parallax interne piloté par le défilement (natif) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    figure.curtain{overflow:hidden}
    figure.curtain img{
      scale:1.14;
      animation:photoDerive linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:transform;
    }
    @keyframes photoDerive{
      from{ transform:translateY(-5.5%); }
      to  { transform:translateY(5.5%); }
    }
  }
}
/* ============================================================
   FORMULAIRE — validation en direct et confirmation
   :user-invalid ne se declenche qu'apres interaction : pas de
   rouge au chargement, seulement apres une vraie erreur.
   ============================================================ */
.fx27form input:user-invalid,
.fx27form textarea:user-invalid{
  border-color:#B4552E !important;
  box-shadow:0 0 0 3px rgba(180,85,46,.12);
}
.fx27form input:user-valid,
.fx27form textarea:user-valid{
  border-color:#3E7C63;
}
.fx27ok{
  background:#EFF5F1;border:1px solid #3E7C63;color:#2E6B52;
  border-radius:12px;padding:16px 20px;margin-bottom:26px;
  font-weight:600;
}
body.dark .fx27ok{background:rgba(62,124,99,.16);color:#A9C9B4}
.fx27form [type="submit"]:disabled{opacity:.65;cursor:progress}
/* ============================================================
   PROMESSES — coup de surligneur ambre
   La police du titre reste intacte ; un trait de marqueur se
   peint derrière le mot-clé quand la section entre à l'écran.
   ============================================================ */
.banner h1 em,.contactc h2 em{
  position:relative;display:inline-block;
  font-style:normal;
}
.banner h1 em::after,.contactc h2 em::after{
  content:"";position:absolute;z-index:-1;
  left:-.10em;right:-.12em;bottom:.04em;height:.34em;
  background:linear-gradient(97deg,rgba(242,184,75,.42),rgba(217,196,138,.46) 70%,rgba(242,184,75,.34));
  border-radius:.14em .10em .16em .08em;   /* bords irréguliers, geste de marqueur */
  transform:skewX(-9deg) scaleX(0);transform-origin:left center;
}
@media(prefers-reduced-motion:no-preference){
  /* banners : en haut de page, le trait se peint juste après l'entrée du titre */
  .banner h1 em::after{
    animation:coupMarqueur .7s cubic-bezier(.25,1,.4,1) .75s both;
  }
  /* sections d'appel : déclenché quand le bloc devient visible */
  .contactc .reveal h2 em::after{transform:skewX(-9deg) scaleX(0)}
  .contactc .reveal.visible h2 em::after{
    animation:coupMarqueur .7s cubic-bezier(.25,1,.4,1) .35s both;
  }
  @keyframes coupMarqueur{to{transform:skewX(-9deg) scaleX(1)}}
}
@media(prefers-reduced-motion:reduce){
  .banner h1 em::after,.contactc h2 em::after{transform:skewX(-9deg) scaleX(1)}
}
/* bandeau logos : cases de largeur identique -> espacement optique égal
   (l'écart réel entre logos = le vide des cases + ce gap fixe) */
.marquee .track{gap:34px}
/* ============================================================
   PACK CREA 2026 — l'écrin étendu à tout le site
   ============================================================ */

/* ---- R1 · HEROS INTERNES : le clair-obscur de gala ---- */
.banner{background:linear-gradient(178deg,#0A1F18 0%,#071711 62%,#04100C 100%)}
body.dark .banner{background:linear-gradient(178deg,#081A13 0%,#051209 62%,#030D0A 100%)}
.banner::before{ /* le lustre champagne, qui respire */
  content:"";position:absolute;right:-18vw;top:-26vw;width:64vw;height:64vw;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 55%,rgba(233,201,121,.24) 0%,rgba(217,196,138,.09) 36%,rgba(217,196,138,.03) 56%,transparent 72%);
  animation:lustreBanner 15s ease-in-out infinite alternate;
}
.banner::after{ /* profondeur émeraude + vignette */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 90% at 8% 100%,rgba(30,92,70,.38),transparent 60%),
    radial-gradient(130% 105% at 50% 40%,transparent 55%,rgba(2,9,7,.5) 100%);
}
@keyframes lustreBanner{
  from{transform:scale(1) translate(0,0);opacity:.85}
  to{transform:scale(1.1) translate(-2vw,1.5vw);opacity:1}
}
.banner>.wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.banner::before{animation:none}}

/* ---- R2 · TEMOIGNAGES : citations de gala ---- */
.pquote{border-radius:22px;border-color:rgba(199,154,62,.30)}
.pquote::before{
  content:"\00AB";font-size:6.4rem;top:2px;right:20px;
  opacity:.5;color:var(--ambre);
}
.pquote:hover{
  border-color:var(--ambre);
  box-shadow:0 24px 60px rgba(0,0,0,.12),0 0 0 1px rgba(242,184,75,.25);
}
.pquote .who b{letter-spacing:.01em}
.pquote .who{border-top:1px solid rgba(199,154,62,.25) !important;padding-top:16px}

/* ---- R3 · TABLEAU D'HONNEUR : le spotlight ---- */
@media(hover:hover){
  .honneur:hover .cell{opacity:.32;filter:grayscale(1)}
  .honneur .cell{transition:opacity .45s ease,filter .45s ease,background .3s,transform .3s}
  .honneur .cell:hover{
    opacity:1;filter:none;background:var(--creme);
    transform:scale(1.04);z-index:2;position:relative;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
  }
  body.dark .honneur .cell:hover{background:var(--d-carte)}
}
@media(prefers-reduced-motion:reduce){
  .honneur:hover .cell{opacity:1;filter:none}
  .honneur .cell:hover{transform:none}
}

/* ---- R4 · PHOTOS : passe-partout de galerie ---- */
figure.fphoto{position:relative}
figure.fphoto::before{
  content:"";position:absolute;inset:12px;z-index:1;pointer-events:none;
  border:1px solid rgba(217,196,138,.55);border-radius:10px;
}
figure.curtain img{border-radius:18px}

/* ---- R5 · CHIFFRES CLES : la précision d'un carton d'invitation ---- */
.a2-nums{border-top:1px solid rgba(199,154,62,.35)}
.a2-num{border-left:1px solid rgba(199,154,62,.30)}
.a2-num b{
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-weight:400;letter-spacing:0;
  font-size:clamp(2.4rem,4.8vw,3.8rem);
}
body.dark .a2-nums{border-color:rgba(233,201,121,.30)}
body.dark .a2-num{border-color:rgba(233,201,121,.22)}
.a2-num span{font-size:.82rem;letter-spacing:.015em;line-height:1.55}
@media(max-width:860px){.a2-num{border-left:none}}
/* ---- métiers : la frappe à l'écran ---- */
.fx27type{min-height:1.25em}   /* la place est réservée : aucun saut de mise en page */
.fx27typing::after{
  content:"";display:inline-block;width:.09em;height:.95em;
  background:var(--ambre);margin-left:3px;vertical-align:-.08em;
  animation:fx27caret .75s steps(1) infinite;
}
@keyframes fx27caret{50%{opacity:0}}
.a2-pole p{transition:opacity .65s ease,transform .65s ease}
.a2-pole p.fx27wait{opacity:0;transform:translateY(10px)}

/* ============================================================
   ONGLETS — la pastille glissante
   Les lettres ne bougent plus ; un halo ambré glisse d'un
   onglet à l'autre, souple et précis.
   ============================================================ */
#nav ul a .ltr{transform:none !important;transition:none !important}

.fx27pill{
  position:absolute;left:0;top:0;z-index:0;pointer-events:none;
  border-radius:999px;
  background:rgba(242,184,75,.14);
  box-shadow:inset 0 0 0 1px rgba(242,184,75,.28);
  opacity:0;
  transition:transform .38s cubic-bezier(.3,.85,.25,1),
             width .38s cubic-bezier(.3,.85,.25,1),
             height .3s ease,opacity .22s ease;
}
.fx27pill.on{opacity:1}
#nav .wrap > ul > li{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .fx27pill{transition:opacity .2s ease}
}
/* ============================================================
   CADRES-PROMESSES — le fil d'or vivant (border beam)
   Une comète de lumière champagne parcourt le cadre en continu,
   comme un fil d'or que l'on tend. Pur CSS, composé par le GPU.
   ============================================================ */
@property --fxa{syntax:'<angle>';initial-value:0deg;inherits:false}

.cadre,.cadre2{position:relative}
.cadre::before,.cadre2::before{
  content:"";position:absolute;inset:-2.5px;padding:2.5px;
  background:conic-gradient(from var(--fxa),
    transparent 0deg 288deg,
    rgba(233,201,121,.0) 296deg,
    rgba(233,201,121,.85) 324deg,
    #FFF2CC 338deg,
    rgba(233,201,121,.85) 348deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(233,201,121,.65));
  animation:fxbeam 8s linear infinite;
  pointer-events:none;
}
@keyframes fxbeam{to{--fxa:360deg}}

/* la seconde lisière (champagne, décalée) s'illumine doucement en écho */
.cadre,.cadre2{transition:outline-color 1.2s ease}
.contactc:hover .cadre,.contactc:hover .cadre2{outline-color:rgba(233,201,121,.85)}

@media(prefers-reduced-motion:reduce){
  .cadre::before,.cadre2::before{
    animation:none;
    background:conic-gradient(from 40deg,
      transparent 0deg 200deg, rgba(233,201,121,.35) 300deg, transparent 360deg);
    filter:none;
  }
}
/* ---- manifeste : les mots s'allument au fil du défilement ---- */
.fx27mot{opacity:.15;transition:opacity .4s ease}
.fx27mot.lu{opacity:1}
@media(prefers-reduced-motion:reduce){
  .fx27mot{opacity:1 !important;transition:none}
}
/* ============================================================
   TEXTE — deux gestes de plus
   ============================================================ */

/* ---- A · la signature se signe : la wordmark géante du pied de
   page se remplit d'or au fil du défilement (natif, réversible) ---- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .wordmark div{
      background:linear-gradient(100deg,var(--ambre) 0%,var(--champagne) 55%,var(--ambre) 100%)
                 no-repeat 0 0 / 0% 100%;
      -webkit-background-clip:text;background-clip:text;
      animation:wmRemplit linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 55%;
    }
    @keyframes wmRemplit{to{background-size:100% 100%}}
  }
}

/* ---- B · les liens de texte : le souligné qui se dessine ----
   Un trait ambre plein se trace de gauche à droite au survol,
   par-dessus un souligné discret toujours présent. */
.a2-note a,.note a,.srnote a{
  border-bottom:none !important;
  padding-bottom:2px;
  background:
    linear-gradient(var(--ambre),var(--ambre)) no-repeat 0 100% / 0% 1.5px,
    linear-gradient(rgba(242,184,75,.35),rgba(242,184,75,.35)) no-repeat 0 100% / 100% 1px;
  transition:background-size .38s cubic-bezier(.3,.75,.25,1);
}
.a2-note a:hover,.note a:hover,.srnote a:hover{
  background-size:100% 1.5px,100% 1px;
}
@media(prefers-reduced-motion:reduce){
  .a2-note a,.note a,.srnote a{transition:none}
}
/* ============================================================
   CARTE — le rayonnement (variante B validée)
   Des ondes concentriques partent des deux maisons et balaient
   la France entière, jusqu'au Sud. Aucune ville inventée :
   seulement le mouvement.
   ============================================================ */
.fmap .ondes{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:8px}
.fmap .onde{
  position:absolute;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);
  left:49.8%;top:24.07%;             /* Paris */
  /* une bande de lumière à deux tons : cœur champagne, lisières d'or */
  background:radial-gradient(circle,
    transparent 58%,
    rgba(199,154,62,.18) 64%,
    rgba(255,242,204,.42) 69%,
    rgba(233,201,121,.30) 74%,
    transparent 82%);
  animation:ondeGo 7.5s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes ondeGo{
  from{transform:translate(-50%,-50%) scale(1);opacity:.9}
  70% {opacity:.35}
  to  {transform:translate(-50%,-50%) scale(82);opacity:0}
}
.fmap .onde.o2{animation-delay:2.6s}
.fmap .onde.o3{animation-delay:5.2s}
.fmap .onde.caen{left:35.8%;top:18.6%;animation-duration:9.5s;animation-delay:1.4s;opacity:.7}
body.dark .fmap .onde{filter:brightness(1.25)}

.fmap .badge11{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--or);
  background:rgba(255,255,255,.88);border:1px solid rgba(199,154,62,.4);
  border-radius:999px;padding:6px 14px;white-space:nowrap;
}
body.dark .fmap .badge11{background:rgba(16,38,29,.85);color:var(--ambre);border-color:rgba(233,201,121,.35)}

@media(prefers-reduced-motion:reduce){.fmap .onde{animation:none;opacity:0}}
/* ============================================================
   CADRES-PROMESSES — l'écrin chaleureux
   Le luxe qui tend la main : angles ronds, velours et lustre,
   une lumière qui suit la souris, et un humain joignable.
   ============================================================ */
.cadre,.cadre2{
  border-radius:30px;
  border:1px solid rgba(233,201,121,.38);
  outline:none;                        /* le second filet rigide s'efface */
  text-align:left;
  background:
    radial-gradient(75% 95% at 84% 6%, rgba(233,201,121,.13), transparent 56%),
    radial-gradient(70% 85% at 8% 102%, rgba(30,92,70,.38), transparent 62%),
    linear-gradient(168deg,#0D2C21 0%,#081A13 68%,#06130E 100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s;
}
.cadre:hover,.cadre2:hover{transform:translateY(-3px);border-color:rgba(233,201,121,.7)}
/* le fil d'or épouse désormais les angles ronds */
.cadre::before,.cadre2::before{border-radius:30px}
/* liseré intérieur souple + lumière qui suit la souris */
.cadre::after,.cadre2::after{
  content:"";position:absolute;inset:11px;border-radius:21px;
  border:1px solid rgba(217,196,138,.20);
  background:radial-gradient(440px circle at var(--gx,80%) var(--gy,20%),
             rgba(233,201,121,.11),transparent 62%);
  pointer-events:none;
}
.contactc .cadre2 h2,.contactc .cadre h2{margin-left:0;margin-right:0}
.cadre .eyebrow,.cadre2 .eyebrow{display:block;margin-bottom:6px}

/* le canal humain, a cote du bouton */
.btn-tel{
  display:inline-flex;align-items:baseline;gap:8px;
  margin:30px 0 0 22px;font-size:.94rem;color:var(--menthe);
  transition:color .3s;
}
.btn-tel b{color:var(--champagne);font-weight:700;letter-spacing:.03em}
.btn-tel:hover,.btn-tel:hover b{color:var(--ambre)}
@media(max-width:640px){
  .cadre,.cadre2{text-align:center}
  .btn-tel{display:flex;justify-content:center;margin:16px 0 0}
}
/* ============================================================
   TÉMOIGNAGES — la parole en soie
   Les mots des clients en italique de livre, guillemet en
   filigrane, la pièce centrale mise sur socle.
   ============================================================ */
.pquote{
  border-radius:24px;
  border-color:rgba(199,154,62,.32);
  padding:44px 34px 30px;
}
.pquote::before{
  content:"\00AB";
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  left:20px;right:auto;top:-10px;
  font-size:7.5rem;line-height:1;
  color:var(--or);opacity:.16;
}
body.dark .pquote::before{color:var(--ambre);opacity:.2}
.pquote blockquote{
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.16rem;line-height:1.62;
}
.pquote blockquote em{font-style:italic;font-weight:700;color:var(--or)}
body.dark .pquote blockquote em{color:var(--ambre)}
.pquote:hover{
  border-color:rgba(233,201,121,.75);
  box-shadow:0 22px 55px rgba(0,0,0,.10),0 0 0 1px rgba(233,201,121,.2);
}
/* la pièce centrale, sur son socle */
@media(min-width:900px){
  .parole .grid3 .pquote:nth-child(2){
    transform:translateY(-16px) scale(1.02);
    box-shadow:0 30px 70px rgba(0,0,0,.16);
  }
  .parole .grid3 .pquote:nth-child(2):hover{
    transform:translateY(-21px) scale(1.02);
  }
}
/* la grande citation de la page Paroles de clients, en soie aussi */
.parole blockquote{
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-style:italic;font-weight:400;
}
@media(prefers-reduced-motion:reduce){
  .parole .grid3 .pquote:nth-child(2),.pquote:hover{transform:none}
}

/* ============================================================
   PAROLES DE CLIENTS — la une éditoriale (accueil)
   + la rivière de paroles (page paroles-clients).
   Clair par défaut : le vert sur blanc, lisible et théâtral.
   En mode sombre (bouton ☾), la scène retrouve son velours.
   ============================================================ */
body:has(.a2-hero) .parole{
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(217,196,138,.20), transparent 55%),
    radial-gradient(75% 85% at 4% 100%, rgba(169,201,180,.20), transparent 60%),
    linear-gradient(172deg,#FDFDFB 0%,#F6F7F3 70%,#F0F2EB 100%);
  padding:13vh 0 11vh;
}
body:has(.a2-hero) .parole .eyebrow{color:var(--or)}
body:has(.a2-hero) .parole h2{color:var(--vert)}

/* ---- la une éditoriale : sommaire à gauche, citation en majesté ---- */
.edito{
  display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start;
  max-width:1080px;margin:7vh auto 0;padding:0 28px;text-align:left;
}
.sommaire{display:flex;flex-direction:column;gap:4px;border-left:1px solid rgba(29,74,59,.12)}
.sommaire button{
  all:unset;cursor:pointer;padding:16px 24px;position:relative;
  transition:color .3s;-webkit-tap-highlight-color:transparent;
}
.sommaire button i{
  font-style:normal;font-family:'JetBrains Mono','Consolas',monospace;
  font-size:.68rem;letter-spacing:.22em;color:rgba(199,154,62,.65);display:block;
}
.sommaire button b{
  color:#8A968F;font-size:.98rem;font-weight:500;transition:color .3s,font-weight .3s;
}
.sommaire button span{display:block;font-size:.76rem;color:#9AA8A0;margin-top:2px}
.sommaire button::before{
  content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;
  background:var(--or);transform:scaleY(0);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.sommaire button.on::before{transform:scaleY(1)}
.sommaire button.on b{color:var(--vert);font-weight:700}
.sommaire button:hover b,.sommaire button:focus-visible b{color:var(--vert)}
.sommaire button:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:6px}

.scene{position:relative}
.scene::before{
  content:"\00AB";position:absolute;top:-.62em;left:-14px;z-index:0;
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-size:clamp(7rem,13vw,11rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(199,154,62,.30);
  pointer-events:none;
}
.gq{
  position:absolute;inset:0;margin:0;
  opacity:0;transform:translateY(16px);filter:blur(6px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease;
  pointer-events:none;
}
.gq.on{position:relative;opacity:1;transform:none;filter:none;pointer-events:auto}
.gq blockquote{
  position:relative;z-index:1;margin:0;
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,2.7vw,2.25rem);line-height:1.45;
  color:var(--vert);text-wrap:balance;
}
.gq blockquote em{font-style:italic;color:var(--or)}
.gq figcaption{margin-top:28px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.gq figcaption::before{content:"";width:44px;height:1px;background:var(--or);align-self:center}
.gq figcaption b{color:var(--vert);font-size:.95rem;font-weight:700}
.gq figcaption small{color:#8A968F;font-size:.82rem;font-style:italic}

/* la ligne d'or : le temps de lecture avant la parole suivante */
.fil{height:2px;background:rgba(29,74,59,.08);border-radius:99px;margin-top:46px;overflow:hidden}
.fil i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--or),#E9C979);border-radius:99px}
.fil i.anime{animation:fxfil 7.5s linear forwards}
@keyframes fxfil{to{width:100%}}

@media(max-width:860px){
  .edito{grid-template-columns:1fr;gap:26px}
  .sommaire{flex-direction:row;overflow-x:auto;border-left:none;border-bottom:1px solid rgba(29,74,59,.12);padding-bottom:2px}
  .sommaire button{padding:12px 16px;flex:0 0 auto}
  .sommaire button::before{left:0;right:0;top:auto;bottom:-1px;width:auto;height:2px;transform:scaleX(0)}
  .sommaire button.on::before{transform:scaleX(1)}
  .scene::before{left:-6px}
}

/* ---- mode sombre : la scène retrouve son velours ---- */
body.dark:has(.a2-hero) .parole{
  background:
    radial-gradient(70% 90% at 85% 5%, rgba(233,201,121,.10), transparent 55%),
    radial-gradient(75% 85% at 6% 100%, rgba(30,92,70,.35), transparent 60%),
    linear-gradient(172deg,#0B241B 0%,#061511 70%,#04100C 100%);
}
body.dark:has(.a2-hero) .parole .eyebrow{color:var(--ambre)}
body.dark:has(.a2-hero) .parole h2{color:var(--blanc)}
body.dark .sommaire{border-left-color:rgba(233,201,121,.18)}
body.dark .sommaire button i{color:rgba(233,201,121,.55)}
body.dark .sommaire button b{color:rgba(242,233,208,.55)}
body.dark .sommaire button span{color:rgba(169,201,180,.55)}
body.dark .sommaire button.on b,body.dark .sommaire button:hover b{color:#F2E9D0}
body.dark .scene::before{-webkit-text-stroke-color:rgba(233,201,121,.28)}
body.dark .gq blockquote{color:#F2E9D0}
body.dark .gq blockquote em{color:var(--ambre)}
body.dark .gq figcaption b{color:var(--blanc)}
body.dark .gq figcaption small{color:rgba(169,201,180,.75)}
body.dark .fil{background:rgba(233,201,121,.14)}
@media(max-width:860px){
  body.dark .sommaire{border-bottom-color:rgba(233,201,121,.18)}
}

/* ---- la rivière de paroles (page paroles-clients) ----
   Le JS répartit les cartes en 3 colonnes qui dérivent chacune
   à son rythme ; le survol suspend la lecture. Les doublons de
   boucle sont aria-hidden. Jamais construite en mobile ni en
   animations réduites (la grille d'origine reste). ---- */
.pgrille.riviere{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  height:74vh;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
}
.pgrille.riviere .rcol{overflow:hidden;min-width:0}
.pgrille.riviere .rflux{animation:fxderive 46s linear infinite}
.pgrille.riviere .rcol:nth-child(2) .rflux{animation-duration:60s}
.pgrille.riviere .rcol:nth-child(3) .rflux{animation-duration:52s}
.pgrille.riviere:hover .rflux{animation-play-state:paused}
.pgrille.riviere .rset{display:flex;flex-direction:column;gap:26px;margin-bottom:26px}
.pgrille.riviere .pquote{margin:0}
@keyframes fxderive{to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){
  .gq{transition:none}
  .fil{display:none}
  .pgrille.riviere .rflux{animation:none}
}

/* ============================================================
   ÉLÉGANCE SOBRE — paroles de clients.
   La citation se lit droite, légère et aérée (Poppins 300) ;
   la serif Cormorant ne reste qu'en touches : noms d'auteurs
   et guillemet décoratif. Lisibilité d'abord.
   ============================================================ */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-italic.woff2') format('woff2');
  font-style:italic;font-weight:300 700;font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('fonts/cormorant-upright.woff2') format('woff2');
  font-style:normal;font-weight:300 700;font-display:swap;
}

/* la citation : droite, légère, très lisible */
.gq blockquote{
  font-family:'Poppins',sans-serif;
  font-style:normal;
  font-weight:300;
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  line-height:1.58;
  letter-spacing:.002em;
}
.gq blockquote em{font-style:normal;font-weight:500;color:var(--or)}

/* le guillemet décoratif : discret, en retrait */
.scene::before{
  font-family:'Cormorant Garamond','Constantia',Georgia,serif;
  font-style:italic;
  -webkit-text-stroke-width:1.2px;
  opacity:.75;
}

/* les auteurs du sommaire : serif droite, gravée, lisible */
.sommaire button b{
  font-family:'Cormorant Garamond','Constantia',Georgia,serif;
  font-weight:600;font-size:1.22rem;letter-spacing:.01em;
}
.sommaire button.on b{font-weight:700}

/* la signature : petites capitales espacées, sobres */
.gq figcaption b{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.17em;font-weight:600;
}
.gq figcaption small{font-style:normal;color:#8A968F}

/* la touche : chaque parole se pose mot a mot */
.gq .mot{display:inline-block;opacity:0;transform:translateY(.3em);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i)*22ms)}
.gq.on .mot{opacity:1;transform:none}
.gq:not(.on) .mot{transition:none}
@media(prefers-reduced-motion:reduce){.gq .mot{opacity:1;transform:none;transition:none}}

/* le trait de plume : un fin filet d or se dessine sous les
   passages-cles une fois la citation posee mot a mot */
.gq blockquote em{
  background:linear-gradient(var(--or),var(--or)) no-repeat left 100%;
  background-size:0% 1.5px;
  padding-bottom:.1em;
  transition:background-size .01s;
}
.gq.on blockquote em{
  background-size:100% 1.5px;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) 1.15s;
}
body.dark .gq blockquote em{
  background-image:linear-gradient(var(--ambre),var(--ambre));
}
@media(prefers-reduced-motion:reduce){
  .gq blockquote em{background-size:100% 1.5px;transition:none}
}

/* les noms des villes d arrivee sur la carte */
.fmap .envtxt{
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:2.4px;letter-spacing:.45px;font-weight:500;
  fill:#1D4A3B;paint-order:stroke;stroke:rgba(253,253,251,.85);stroke-width:.55px;
  pointer-events:none;
}
body.dark .fmap .envtxt{fill:#F2E9D0;stroke:rgba(4,16,12,.75)}

/* les points du pays s illuminent au passage du vol */
.fmap svg circle{transition:fill 1.1s ease}
.fmap svg circle.dlit{fill:#D9B45E;transition:fill .1s ease}
body.dark .fmap svg circle.dlit{fill:#E9C979}

/* ondes retirees : les envolees racontent seules la France */
.fmap .onde{display:none}

/* le numero en filigrane : l echelle qui tranche */
.scene::after{
  content:attr(data-num);
  position:absolute;top:-.28em;right:-8px;z-index:0;
  font-family:'Cormorant Garamond','Constantia',Georgia,serif;
  font-weight:600;font-size:clamp(7.5rem,13vw,12rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.3px rgba(199,154,62,.25);
  pointer-events:none;
}
body.dark .scene::after{-webkit-text-stroke-color:rgba(233,201,121,.22)}
@media(max-width:860px){.scene::after{font-size:6rem;right:0;top:-.5em}}

/* WORDMARK SOBRE : ton sur ton, grave dans le velours */
.wordmark div{-webkit-text-stroke:1.2px rgba(169,201,180,.20)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .wordmark div{
      background:linear-gradient(100deg,rgba(169,201,180,.28) 0%,rgba(242,233,208,.32) 55%,rgba(169,201,180,.28) 100%)
                 no-repeat 0 0 / 0% 100%;
      -webkit-background-clip:text;background-clip:text;
    }
  }
}

/* ============================================================
   LA SCENE — fin de page plein velours, typographie monumentale.
   Plus de cadre, plus d objets : le projecteur, la promesse en
   lettres immenses, un seul bouton d or. (Design A, sans le
   defilement redondant avec le bandeau du haut.)
   ============================================================ */
.contactc{
  background:
    radial-gradient(58% 70% at 50% -12%, rgba(233,201,121,.13), transparent 62%),
    linear-gradient(170deg,#0F2F23 0%,#0B241B 52%,#04100C 100%) !important;
}

/* le cadre disparait : il ne reste que la parole */
.cadre,.cadre2{
  background:none !important;
  border:none !important;outline:none !important;
  box-shadow:none !important;border-radius:0;
  max-width:960px;margin-left:auto;margin-right:auto;
  text-align:center;
}
.cadre::before,.cadre2::before,
.cadre::after,.cadre2::after{display:none !important;animation:none !important}

/* la lettre monumentale */
.cadre .eyebrow,.cadre2 .eyebrow,.contactc .eyebrow.light{
  color:var(--champagne);letter-spacing:.42em;
}
.cadre h2,.cadre2 h2,.contactc .cadre h2,.contactc .cadre2 h2{
  font-family:'Poppins',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(2.1rem,4.8vw,3.7rem);
  line-height:1.1;letter-spacing:-.015em;
  max-width:17em;margin:18px auto 16px;
  text-wrap:balance;
}
.cadre h2 em,.cadre2 h2 em{
  font-style:normal;background:none !important;animation:none !important;padding:0;
  color:var(--ambre) !important;-webkit-text-fill-color:var(--ambre) !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
}
.cadre h2 em::before,.cadre2 h2 em::before,
.cadre h2 em::after,.cadre2 h2 em::after{display:none !important}
.cadre p,.cadre2 p{color:var(--menthe);max-width:36em;margin-left:auto;margin-right:auto}

/* les gestes, centres */
.cadre .btn-tel,.cadre2 .btn-tel{color:var(--menthe)}
.cadre .btn-tel b,.cadre2 .btn-tel b{color:var(--champagne)}
.cadre .btn-tel:hover b,.cadre2 .btn-tel:hover b{color:#fff}

/* l entree en scene : la promesse monte des cintres */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .cadre,.cadre2{
      animation:fxleve linear both !important;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
    @keyframes fxleve{
      from{opacity:0;transform:translateY(40px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ============================================================
   LA SCENE, ACTE II — la vie : la promesse se pose mot a mot,
   la lumiere du projecteur suit la souris dans le velours.
   ============================================================ */

/* la montee d ensemble cede la place a la cascade */
.cadre,.cadre2{animation:none !important}

/* la lumiere qui repond a la presence (les --gx/--gy existants) */
.cadre,.cadre2{
  background:radial-gradient(460px 340px at var(--gx,50%) var(--gy,18%),
             rgba(233,201,121,.09), transparent 62%) !important;
}

/* chaque mot de la promesse monte des cintres */
.cadre h2 .smot,.cadre2 h2 .smot{
  display:inline-block;opacity:0;
  transform:translateY(.45em);filter:blur(7px);
  transition:opacity .6s ease,transform .75s cubic-bezier(.22,1,.36,1),filter .65s ease;
  transition-delay:calc(var(--i)*45ms);
}
.cadre.joue h2 .smot,.cadre2.joue h2 .smot{opacity:1;transform:none;filter:none}

/* l etiquette ouvre, les gestes ferment le rideau */
.cadre .eyebrow,.cadre2 .eyebrow{opacity:0;transition:opacity .9s ease .05s}
.cadre.joue .eyebrow,.cadre2.joue .eyebrow{opacity:1}
.cadre p,.cadre2 p,
.cadre .btn,.cadre2 .btn,
.cadre .btn-tel,.cadre2 .btn-tel{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease 1.05s,transform .9s cubic-bezier(.22,1,.36,1) 1.05s;
}
.cadre.joue p,.cadre2.joue p,
.cadre.joue .btn,.cadre2.joue .btn,
.cadre.joue .btn-tel,.cadre2.joue .btn-tel{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .cadre h2 .smot,.cadre2 h2 .smot,
  .cadre .eyebrow,.cadre2 .eyebrow,
  .cadre p,.cadre2 p,
  .cadre .btn,.cadre2 .btn,
  .cadre .btn-tel,.cadre2 .btn-tel{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
}

.fpouss{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fpouss i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#F7E7B4 0%,rgba(233,201,121,0) 70%);
  opacity:0;
  animation:fpoussVol var(--d) linear infinite;
  animation-delay:var(--del);
}
@keyframes fpoussVol{
  0%{transform:translate(0,0);opacity:0}
  14%{opacity:var(--o)}
  80%{opacity:calc(var(--o)*.55)}
  100%{transform:translate(var(--vx),-110px);opacity:0}
}
.contactc .wrap{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.fpouss{display:none}}

/* ============================================================
   LA SCENE, ACTE FINAL — c est vous qui tenez le projecteur.
   La promesse est en penombre ; la lumiere la revele.
   Le mot ambre reste allume : c est l etoile.
   ============================================================ */
@property --hx{syntax:'<percentage>';initial-value:50%;inherits:false}
@property --hy{syntax:'<percentage>';initial-value:45%;inherits:false}

.cadre h2,.cadre2 h2,.contactc .cadre h2,.contactc .cadre2 h2{
  color:transparent !important;
  background:radial-gradient(clamp(240px,36vw,460px) circle at var(--hx) var(--hy),
    #FFFFFF 0%,
    rgba(255,255,255,.94) 30%,
    rgba(255,255,255,.55) 72%,
    rgba(255,255,255,.46) 100%);
  -webkit-background-clip:text;background-clip:text;
}
/* le mot ambre echappe a la penombre : il brille en permanence */
.cadre h2 em,.cadre2 h2 em{
  color:var(--ambre) !important;
  -webkit-text-fill-color:var(--ambre) !important;
}

/* le balayage d ouverture : la lumiere traverse la promesse */
.cadre h2.balaye,.cadre2 h2.balaye{
  animation:fxbalaye 1.9s cubic-bezier(.3,.9,.3,1) both;
}
@keyframes fxbalaye{
  from{--hx:-28%}
  to{--hx:50%}
}

@media(prefers-reduced-motion:reduce){
  .cadre h2,.cadre2 h2,.contactc .cadre h2,.contactc .cadre2 h2{
    color:#fff !important;background:none !important;
    -webkit-background-clip:initial !important;background-clip:initial !important;
  }
}

/* ============================================================
   LE LEVER DE RIDEAU — le preloader de l accueil devient une
   ouverture de spectacle : deux pans de velours a plis, ourlet
   d or, qui s ecartent quand la maison est prete.
   ============================================================ */
#loader{background:transparent}
#loader::before,#loader::after{
  content:"";position:absolute;top:0;bottom:0;width:50.6%;z-index:-1;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.030) 0 2px, rgba(0,0,0,.10) 2px 13px,
      rgba(255,255,255,.016) 13px 15px, rgba(0,0,0,.05) 15px 27px),
    linear-gradient(105deg,#143B2C 0%,#0B241B 55%,#071A13 100%);
  box-shadow:inset 0 -110px 140px -70px rgba(0,0,0,.6);
  transition:transform 1.4s cubic-bezier(.72,.02,.22,1);
  will-change:transform;
}
#loader::before{left:0;border-right:2px solid rgba(199,154,62,.5)}
#loader::after{right:0;border-left:2px solid rgba(199,154,62,.5);transition-delay:.05s}

/* a l ouverture : la montee d origine est annulee, les pans partent
   en coulisses, la lettre s efface la premiere */
#loader.done{transform:none !important;pointer-events:none}
#loader.done::before{transform:translateX(-104%)}
#loader.done::after{transform:translateX(104%)}
#loader > div{transition:opacity .45s ease}
#loader.done > div{opacity:0}

.fsigne{display:block;margin:12px auto 0;width:min(230px,54%);height:auto;overflow:visible;opacity:.9}

/* L HORIZON D OR : la ligne de feu au pied de la scene, et sa comete en cinemascope */
.contactc{position:relative}
.contactc::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
  pointer-events:none;z-index:2;
  background:
    radial-gradient(150px 3px at 0% calc(100% - 30px), #FFF6D8 0%, rgba(255,246,216,.9) 30%, transparent 75%) no-repeat,
    linear-gradient(90deg, transparent 2%, rgba(199,154,62,.55) 22%, #F2DFA6 50%, rgba(199,154,62,.55) 78%, transparent 98%) no-repeat,
    radial-gradient(56% 52px at 50% calc(100% - 30px), rgba(233,201,121,.20), transparent 72%) no-repeat;
  background-size:280px 100%, 100% 1.5px, 100% 100%;
  background-position:-40% 0, 50% calc(100% - 30px), 0 0;
  animation:fxhorizon 7s cubic-bezier(.45,.05,.4,.95) infinite;
}
@keyframes fxhorizon{
  0%  {background-position:-40% 0, 50% calc(100% - 30px), 0 0}
  34% {background-position:140% 0, 50% calc(100% - 30px), 0 0}
  100%{background-position:140% 0, 50% calc(100% - 30px), 0 0}
}
@media(prefers-reduced-motion:reduce){
  .contactc::after{animation:none;background-position:140% 0, 50% calc(100% - 30px), 0 0}
}
.wordmark{border-top:1px solid rgba(199,154,62,.26)}

/* LA DOUBLURE : les finitions que seuls les connaisseurs touchent */


::selection{background:rgba(233,201,121,.45);color:#123528}
::-moz-selection{background:rgba(233,201,121,.45);color:#123528}
body.dark ::selection{background:rgba(233,201,121,.30);color:#F7EED6}

html{scrollbar-width:thin;scrollbar-color:#1D4A3B #EDEFE8}
body.dark html,body.dark{scrollbar-color:#C79A3E #0B241B}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#EDEFE8}
::-webkit-scrollbar-thumb{background:#1D4A3B;border-radius:99px;border:3px solid #EDEFE8}
::-webkit-scrollbar-thumb:hover{background:#C79A3E}
body.dark ::-webkit-scrollbar-track{background:#0B241B}
body.dark ::-webkit-scrollbar-thumb{background:#2E5B48;border-color:#0B241B}
body.dark ::-webkit-scrollbar-thumb:hover{background:#C79A3E}

input,textarea,select{caret-color:var(--or)}

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

[data-count],.lpct,.dnum{font-variant-numeric:tabular-nums}

*{-webkit-tap-highlight-color:transparent}

/* WORDMARK D ORIGINE : lettres en contour, non remplies */
.wordmark{padding:10px 0 34px}
.wordmark div{
  font-family:'Poppins',sans-serif;font-style:normal;font-weight:700;
  font-size:clamp(3rem,9vw,8.2rem);
  letter-spacing:.01em;line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,184,75,.30);
  background:none !important;animation:none !important;text-shadow:none;
}

.fbati{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}

/* correctif : plus de double apparition sur le titre de la scene — la cascade seule */
.cadre h2.blup,.cadre2 h2.blup{
  opacity:1 !important;transform:none !important;
  filter:none !important;transition:none !important;
}

/* LE DECK MOMA : images plein ecran bord a bord, titre monumental sur l image */
.a2-deck .deck{max-width:none;padding-left:0;padding-right:0}
.a2-deck .dcard{
  width:100%;
  height:92vh;top:4vh;
  border-radius:0;border:none;
  box-shadow:0 40px 90px rgba(2,9,7,.5);
}
.a2-deck .dwrap{height:104vh}
.a2-deck .dwrap:nth-child(2) .dcard{top:calc(4vh + 10px)}
.a2-deck .dwrap:nth-child(3) .dcard{top:calc(4vh + 20px)}
.a2-deck .dwrap:nth-child(4) .dcard{top:calc(4vh + 30px)}
.a2-deck .dwrap:nth-child(5) .dcard{top:calc(4vh + 40px)}
.a2-deck .dcard::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(85% 65% at 50% 55%, rgba(4,16,12,.38), rgba(4,16,12,.10) 72%),
    linear-gradient(180deg, rgba(4,16,12,.22), rgba(4,16,12,.08) 30%, rgba(4,16,12,.34) 100%);
}
.a2-deck .dtxt{
  left:6vw;right:6vw;top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.a2-deck .dcli{font-size:.74rem;letter-spacing:.34em;margin-bottom:20px}
.a2-deck .dtxt b{
  font-size:clamp(2.2rem,6.4vw,5rem);
  font-weight:800;letter-spacing:-.012em;line-height:1.06;
  max-width:15ch;
  text-shadow:0 6px 44px rgba(0,0,0,.55);
}
.a2-deck .dgo{margin-top:30px;font-size:.68rem;letter-spacing:.26em}
.a2-deck .dnum{display:none}

/* DECK MOMA, ACTE II : parallaxe de camera, entree en trois temps, arete de lumiere */
.a2-deck .dcard{border-top:1px solid rgba(233,201,121,.30)}
.a2-deck .dcard::after{transition:opacity .5s ease}
.a2-deck .dcard:hover::after{opacity:.78}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .a2-deck .dcard img{
      animation:dparallaxe linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes dparallaxe{
      from{transform:scale(1.16) translateY(-3.5%)}
      to{transform:scale(1.02) translateY(3.5%)}
    }
    .a2-deck .dcli{
      animation:dcliEntre linear both;
      animation-timeline:view();
      animation-range:entry 18% entry 60%;
    }
    @keyframes dcliEntre{
      from{opacity:0;letter-spacing:.7em}
      to{opacity:1;letter-spacing:.34em}
    }
    .a2-deck .dtxt b{
      animation:dtitreEntre linear both;
      animation-timeline:view();
      animation-range:entry 28% entry 72%;
    }
    @keyframes dtitreEntre{
      from{opacity:0;transform:translateY(38px)}
      to{opacity:1;transform:none}
    }
    .a2-deck .dgo{
      animation:dgoEntre linear both;
      animation-timeline:view();
      animation-range:entry 50% entry 85%;
    }
    @keyframes dgoEntre{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ============================================================
   AUDIT MOBILE — corrections d ensemble pour les petits ecrans :
   deck en hauteur de portrait, titres calibres, guillemet reduit,
   horizon resserre, noms de villes plus lisibles.
   ============================================================ */
@media(max-width:700px){
  .a2-deck .dcard,
  .a2-deck .dwrap:nth-child(2) .dcard,
  .a2-deck .dwrap:nth-child(3) .dcard,
  .a2-deck .dwrap:nth-child(4) .dcard,
  .a2-deck .dwrap:nth-child(5) .dcard{height:72vh;top:6vh}
  .a2-deck .dwrap{height:86vh}
  .a2-deck .dtxt b{font-size:clamp(1.5rem,7vw,2.1rem);max-width:14ch}
  .a2-deck .dcli{font-size:.6rem;letter-spacing:.24em;margin-bottom:14px}
  .a2-deck .dgo{margin-top:20px;font-size:.58rem}
  .edito .scene::before{font-size:4.4rem;top:-.5em}
  .cadre h2,.cadre2 h2,.contactc .cadre h2,.contactc .cadre2 h2{font-size:clamp(1.5rem,6.4vw,2rem)}
  .fsigne{width:min(180px,60%)}
  .contactc::after{height:34px;background-size:220px 100%,100% 1.5px,100% 100%}
}
.fmap .envtxt{font-size:2.8px}

/* ============================================================
   LA FRISE HORIZONTALE (notre histoire) — la section s epingle
   et le defilement fait voyager la trajectoire de 2004 a nos
   jours, de gauche a droite, le long d un fil d or.
   ============================================================ */
.fhsection{background:linear-gradient(180deg,#FDFDFB,#F1F3EC);overflow:clip}
.fhwrap{height:520vh;view-timeline:--fh block}
.fhsticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.fhhead{width:100%;max-width:1180px;margin:0 auto 5vh;padding:0 28px}
.fhhead h2{margin-top:10px}

.frise.fh{margin-top:0;padding:0 12vw 0 8vw}
.frise.fh::before{display:none}
.frise.fh{
  display:flex;align-items:stretch;gap:34px;width:max-content;
  animation:fhGlisse linear both;
  animation-timeline:--fh;
  animation-range:contain 0% contain 100%;
}
@keyframes fhGlisse{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-100% + 100vw))}
}

.frise.fh .et,.frise.fh .chap{
  display:flex;flex-direction:column;flex:0 0 330px;
  padding:0;border:none;opacity:1;transform:none;transition:none;
}
.frise.fh .et::after{display:none}
.frise.fh .an{
  text-align:left;background:none;border:none;box-shadow:none;
  min-width:0;border-radius:0;padding:0 0 18px;line-height:1;
  font-size:2.2rem;color:transparent;-webkit-text-stroke:1.4px var(--ambre);
  position:relative;
}
.frise.fh .an::after{
  content:"";position:absolute;left:0;right:-34px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--ambre),rgba(233,201,121,.28));
}
.frise.fh .et:last-child .an::after{right:0}
.frise.fh .an::before{
  content:"";position:absolute;left:0;bottom:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--ambre);
  box-shadow:0 0 12px rgba(242,184,75,.5);
}
.frise.fh .et.fort .an{font-size:2.9rem;-webkit-text-stroke:0;color:var(--ambre)}
.frise.fh .et>div{
  margin-top:24px;flex:1;
  background:#fff;border:1px solid #E8E5D9;border-radius:18px;
  padding:24px 24px 26px;
}
.frise.fh h3{font-size:1.02rem;margin-bottom:8px}
.frise.fh p{font-size:.88rem;line-height:1.62}
.frise.fh .aparte{font-size:.8rem}

/* les chapitres : des couvertures de velours qui rythment le fil */
.frise.fh .chap{
  flex:0 0 290px;justify-content:center;text-align:left;
  padding:34px 30px;border-radius:20px;
  background:linear-gradient(165deg,#123528,#0B241B 80%);
  box-shadow:0 26px 54px -30px rgba(11,36,27,.5);
}
.frise.fh .chap span{color:var(--champagne)}
.frise.fh .chap h3{
  font-size:1.55rem;-webkit-text-stroke:0;color:#F2E9D0;
  letter-spacing:.04em;margin:10px 0 8px;
}
.frise.fh .chap p{color:var(--menthe);font-style:italic;font-size:.88rem;margin:0}

/* la barre de progression du voyage */
.fhbar{
  position:absolute;left:28px;right:28px;bottom:5vh;height:2px;
  background:rgba(29,74,59,.1);border-radius:99px;overflow:hidden;
}
.fhbar i{
  display:block;height:100%;width:100%;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--or),var(--champagne));
  animation:fhBar linear both;
  animation-timeline:--fh;
  animation-range:contain 0% contain 100%;
}
@keyframes fhBar{to{transform:scaleX(1)}}

/* replis : mobile et animations reduites -> frise verticale simple */
@media(max-width:860px),(prefers-reduced-motion:reduce){
  .fhwrap{height:auto;view-timeline:none}
  .fhsticky{position:static;height:auto;overflow:visible;display:block;padding-bottom:44px}
  .fhhead{margin-bottom:28px}
  .frise.fh{flex-direction:column;width:auto;padding:0 28px;animation:none;gap:28px}
  .frise.fh .et,.frise.fh .chap{flex-basis:auto}
  .frise.fh .an::after{right:0}
  .fhbar{display:none}
}
@supports not (animation-timeline: view()){
  .fhwrap{height:auto}
  .fhsticky{position:static;height:auto;overflow:visible;display:block;padding-bottom:44px}
  .fhhead{margin-bottom:28px}
  .frise.fh{flex-direction:column;width:auto;padding:0 28px;animation:none;gap:28px}
  .frise.fh .et,.frise.fh .chap{flex-basis:auto}
  .frise.fh .an::after{right:0}
  .fhbar{display:none}
}

/* ============================================================
   LES ROULEAUX — les chiffres roulent comme un compteur de
   coffre-fort, colonne par colonne, amorti elastique.
   Et l ORBE DECOUVRIR : le curseur devient une pastille d or
   sur les panneaux de realisations.
   ============================================================ */
.a2-num b{white-space:nowrap}
.rlx{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:baseline}
.rls{display:inline-block}

/* le 20 devient 20+ : l exposant d or */
.chplus{
  display:inline-block;font-style:normal;
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-weight:400;line-height:1;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  color:var(--ambre);margin-left:3px;
  transform:translateY(-.8em);
}

/* l orbe DECOUVRIR sur le deck */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{
    width:96px;height:96px;
    background:rgba(242,184,75,.95);
    box-shadow:0 18px 44px -14px rgba(242,184,75,.55);
  }
  #fx27cur::after{
    content:"Découvrir";
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-family:'JetBrains Mono','Consolas',monospace;
    font-size:.55rem;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;
    color:#231A05;opacity:0;transition:opacity .25s ease;
  }
  body.fx27deck #fx27cur::after{opacity:1}
}

/* ============================================================
   LE DECK EN FLUX — les panneaux se suivent l un sous l autre,
   separes de velours ; chacun leve son rideau a son entree,
   au rythme du defilement.
   ============================================================ */
.a2-deck .dcard,
.a2-deck .dwrap:nth-child(2) .dcard,
.a2-deck .dwrap:nth-child(3) .dcard,
.a2-deck .dwrap:nth-child(4) .dcard,
.a2-deck .dwrap:nth-child(5) .dcard{
  position:relative;top:auto;height:86vh;margin:0;
}
.a2-deck .dwrap{display:block;height:auto;margin:0 0 9vh}
.a2-deck .dwrap:last-of-type{margin-bottom:0}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .a2-deck .dcard{
      animation:dZoom linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 32%;
      transform-origin:50% 50%;
    }
    @keyframes dZoom{
      from{transform:scale(.74);border-radius:30px}
      to{transform:scale(1);border-radius:0}
    }
  }
}
@media(max-width:700px){
  .a2-deck .dcard,
  .a2-deck .dwrap:nth-child(2) .dcard,
  .a2-deck .dwrap:nth-child(3) .dcard,
  .a2-deck .dwrap:nth-child(4) .dcard,
  .a2-deck .dwrap:nth-child(5) .dcard{height:64vh}
  .a2-deck .dwrap{margin:0 0 7vh}
}

/* CHIFFRES EN MAJESTE : l echelle comme seule eloquence */
.a2-num b{font-size:clamp(3.4rem,6.5vw,5.6rem)}
.a2-num span{font-size:.8rem;letter-spacing:.02em;max-width:26ch;margin-top:14px}
.a2-num{padding-top:38px;padding-bottom:6px}
.chplus{font-size:clamp(1.7rem,3.2vw,2.7rem);transform:translateY(-.85em)}
@media(max-width:700px){
  .a2-num b{font-size:clamp(2.6rem,11vw,3.4rem)}
  .chplus{font-size:1.5rem}
}

/* ============================================================
   LE MARIAGE 1+3+5 (deck) — zoom d immersion (deja en place via
   dZoom) + couches de profondeur + reflet de lumiere.
   Defilement libre : l intuitivite d abord.
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* 3 · les couches : titre, etiquette et lien glissent chacun a leur vitesse */
    .a2-deck .dtxt b{
      animation:dTitFade linear both, cDrift40 linear both;
      animation-timeline:view(), view();
      animation-range:entry 28% entry 72%, cover 0% cover 100%;
    }
    .a2-deck .dcli{
      animation:dcliEntre linear both, cDrift75 linear both;
      animation-timeline:view(), view();
      animation-range:entry 18% entry 60%, cover 0% cover 100%;
    }
    .a2-deck .dgo{
      animation:dGoFade linear both, cDrift75 linear both;
      animation-timeline:view(), view();
      animation-range:entry 50% entry 85%, cover 0% cover 100%;
    }
    @keyframes dTitFade{from{opacity:0}to{opacity:1}}
    @keyframes dGoFade{from{opacity:0}to{opacity:1}}
    @keyframes cDrift40{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
    @keyframes cDrift75{from{transform:translateY(72px)}to{transform:translateY(-72px)}}
    /* 5 · le reflet : un eclat satine traverse l image au passage du centre */
    .a2-deck .dcard::before{
      content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(112deg,transparent 38%,rgba(255,250,235,.22) 50%,transparent 62%) no-repeat;
      background-size:220% 100%;background-position:-160% 0;
      animation:cReflet linear both;
      animation-timeline:view();
      animation-range:cover 24% cover 76%;
    }
    @keyframes cReflet{
      from{background-position:-160% 0}
      to{background-position:190% 0}
    }
  }
}

/* RESPIRATIONS CLAIRES : du blanc entre les realisations */
.a2-deck{background:linear-gradient(180deg,#FDFDFB 0%,#F2F4EE 100%)}
.a2-deck .a2-shead h2{color:var(--vert)}
.a2-deck .a2-shead h2 em{color:var(--or)}
.a2-deck .a2-shead .eyebrow{color:var(--or)}
.a2-deck .dcard{box-shadow:0 34px 80px -34px rgba(11,36,27,.35)}
body.dark .a2-deck{background:linear-gradient(180deg,#0A1F18,#061511)}
body.dark .a2-deck .a2-shead h2{color:var(--blanc)}
body.dark .a2-deck .a2-shead h2 em{color:var(--ambre)}
body.dark .a2-deck .a2-shead .eyebrow{color:var(--ambre)}
body.dark .a2-deck .dcard{box-shadow:0 34px 90px rgba(2,9,7,.55)}

/* L ORBE 2027 : verre depoli, lisere champagne — la loupe givree */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{
    width:104px;height:104px;
    background:rgba(18,42,32,.30);
    backdrop-filter:blur(10px) saturate(1.25);
    -webkit-backdrop-filter:blur(10px) saturate(1.25);
    box-shadow:inset 0 0 0 1px rgba(233,201,121,.6),
               inset 0 0 26px rgba(233,201,121,.10),
               0 20px 54px -18px rgba(4,16,12,.65);
  }
  body.fx27deck #fx27cur::after{
    color:#F7EED6;
    letter-spacing:.22em;
    text-shadow:0 1px 10px rgba(4,16,12,.5);
  }
}

/* RESPIRATIONS, PRISE 2 : specificite boostee (accueil-v2 charge apres) + LA CAPSULE BLANCHE */
section.a2-deck{background:linear-gradient(180deg,#FDFDFB 0%,#F2F4EE 100%)}
section.a2-deck .a2-shead h2{color:var(--vert)}
section.a2-deck .a2-shead h2 em{color:var(--or)}
section.a2-deck .a2-shead .eyebrow{color:var(--or)}
body.dark section.a2-deck{background:linear-gradient(180deg,#0A1F18,#061511)}
body.dark section.a2-deck .a2-shead h2{color:var(--blanc)}
body.dark section.a2-deck .a2-shead h2 em{color:var(--ambre)}
body.dark section.a2-deck .a2-shead .eyebrow{color:var(--ambre)}

@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{
    width:142px;height:46px;border-radius:99px;
    background:#FFFFFF;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 16px 40px -14px rgba(11,36,27,.4);
  }
  body.fx27deck #fx27cur::after{
    content:"Découvrir →";
    color:#123528;
    font-size:.6rem;letter-spacing:.16em;
    text-shadow:none;
  }
}

/* LE SCEAU TOURNANT : l orbe ambree originelle + texte circulaire en rotation */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{
    width:104px;height:104px;border-radius:50%;
    background:rgba(242,184,75,.96);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 18px 46px -16px rgba(242,184,75,.6);
  }
  body.fx27deck #fx27cur::after{
    content:"→";
    color:#231A05;font-size:1.35rem;letter-spacing:0;
    text-shadow:none;font-family:'Poppins',sans-serif;font-weight:700;
  }
  .fx27orbtxt{
    position:absolute;inset:6px;
    opacity:0;transform:scale(.6) rotate(0deg);
    transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  .fx27orbtxt text{
    font-family:'JetBrains Mono','Consolas',monospace;
    font-size:10.6px;font-weight:700;letter-spacing:1.4px;
    fill:#231A05;
  }
  body.fx27deck .fx27orbtxt{
    opacity:1;transform:scale(1);
    animation:fx27sceau 9s linear infinite;
  }
  @keyframes fx27sceau{to{transform:scale(1) rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){
    body.fx27deck .fx27orbtxt{animation:none}
  }
}

/* LE PLUS INCANDESCENT : grand, champagne, et il respire */
.chplus{
  font-size:clamp(2rem,3.8vw,3.3rem);
  margin-left:7px;
  transform:translateY(-.4em);
  background:linear-gradient(150deg,#F7E7B4 0%,#F2B84B 55%,#C79A3E 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:plusLueur 3.2s ease-in-out infinite alternate;
}
@keyframes plusLueur{
  from{filter:drop-shadow(0 0 5px rgba(242,184,75,.2))}
  to{filter:drop-shadow(0 0 18px rgba(242,184,75,.65))}
}
@media(max-width:700px){
  .chplus{font-size:1.9rem;margin-left:5px}
}
@media(prefers-reduced-motion:reduce){
  .chplus{animation:none;filter:drop-shadow(0 0 10px rgba(242,184,75,.4))}
}

/* le sceau, taille reduite */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{width:86px;height:86px}
  body.fx27deck #fx27cur::after{font-size:1.1rem}
  .fx27orbtxt{inset:5px}
}

/* LES BORNES CLAIRES : les chiffres passent au clair, vert profond sur creme */
section.a2-chiffres{
  background:linear-gradient(180deg,#FDFDFB 0%,#F4F6F1 100%);
  padding:10vh 0 12vh;
}
/* (ancien libelle genere retire : remplace par la signature manuscrite .fx27manuc) */
section.a2-chiffres .wrap::before{content:none}
section.a2-chiffres .a2-nums{border-top:1px solid rgba(29,74,59,.14)}
section.a2-chiffres .a2-num{border-left:1px solid rgba(29,74,59,.12)}
section.a2-chiffres .a2-num:first-child{border-left:none}
section.a2-chiffres .a2-num b{color:var(--vert)}
section.a2-chiffres .a2-num span{color:#68766F}

body.dark section.a2-chiffres{background:#0E2A20}
body.dark section.a2-chiffres .wrap::before{color:var(--ambre)}
body.dark section.a2-chiffres .a2-nums{border-top-color:rgba(233,201,121,.30)}
body.dark section.a2-chiffres .a2-num{border-left-color:rgba(233,201,121,.22)}
body.dark section.a2-chiffres .a2-num b{color:var(--ambre)}
body.dark section.a2-chiffres .a2-num span{color:var(--menthe)}

/* LE POINCON : le + dans son anneau d or, frappe comme sur un bijou */
.chplus{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(1.9rem,3vw,2.5rem);height:clamp(1.9rem,3vw,2.5rem);
  border:2px solid var(--or);border-radius:50%;
  font-family:'Poppins',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1;
  color:var(--or);-webkit-text-fill-color:var(--or);
  background:none;-webkit-background-clip:initial;background-clip:initial;
  animation:none;filter:none;
  margin-left:9px;transform:translateY(-.55em);
}
body.dark .chplus{border-color:var(--ambre);color:var(--ambre);-webkit-text-fill-color:var(--ambre)}
@media(max-width:700px){
  .chplus{width:1.6rem;height:1.6rem;font-size:.95rem;margin-left:6px}
}

/* LE DERNIER TABLEAU : la promesse sur une vraie soiree — le reve sous le velours */
.contactc{position:relative;isolation:isolate}
.contactc::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(172deg, rgba(11,36,27,.88) 0%, rgba(7,26,19,.74) 45%, rgba(4,16,12,.93) 100%),
    radial-gradient(70% 80% at 50% 0%, rgba(233,201,121,.12), transparent 60%),
    url('img/visuel_gala.webp') center 40% / cover no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  .contactc::before{
    animation:tableauVie 36s ease-in-out infinite alternate;
  }
  @keyframes tableauVie{
    from{transform:scale(1)}
    to{transform:scale(1.07)}
  }
}

/* le poincon en vrai exposant, colle au sommet du 20 */
.chplus{transform:translateY(-1.18em);margin-left:5px}
@media(max-width:700px){.chplus{transform:translateY(-1.05em);margin-left:4px}}

/* PROJETS COLOSSE : le mot geant traverse par le degrade maison, facon PublicisLive */
section.a2-deck > .wrap{max-width:none;padding:0}
.pgeant{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(4.2rem,19.5vw,17.5rem);
  line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;white-space:nowrap;
  margin:0;padding:0 0 0 2vw;
  background:linear-gradient(90deg,#F2B84B 0%,#E8A93C 24%,#C79A3E 46%,#E9C979 70%,#A9C9B4 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.pgsous{
  margin:22px 0 0 2.4vw;
  font-size:.95rem;color:#68766F;letter-spacing:.02em;
}
body.dark .pgsous{color:var(--menthe)}
.a2-deck .a2-shead{margin-bottom:7vh}
@media(max-width:700px){
  .pgeant{font-size:19vw;padding-left:4vw}
  .pgsous{margin-left:4.4vw;font-size:.86rem}
}

/* poincon aligne au sommet des chiffres, sans acrobatie */
.chplus{transform:none !important;vertical-align:top;margin-top:.1em;margin-left:6px}
@media(max-width:700px){.chplus{margin-top:.06em;margin-left:4px}}

/* ============================================================
   CADRES FACON PUBLICISLIVE — cadre centre a marges, angles
   droits, texte blanc en bas a gauche, pastille blanche en
   haut a droite. Typo : client fin / titre gras sans capitales.
   ============================================================ */
.a2-deck .dcard,
.a2-deck .dwrap:nth-child(2) .dcard,
.a2-deck .dwrap:nth-child(3) .dcard,
.a2-deck .dwrap:nth-child(4) .dcard,
.a2-deck .dwrap:nth-child(5) .dcard{
  width:min(80vw,1560px);
  margin-left:auto;margin-right:auto;
  height:88vh;
  border-top:none;border-radius:0;
}
.a2-deck .dwrap{margin:0 0 10vh}
.a2-deck .dcard::after{
  background:linear-gradient(180deg,rgba(4,16,12,0) 42%,rgba(4,16,12,.5) 100%);
}
.a2-deck .dtxt{
  left:5.5%;right:5.5%;top:auto;bottom:7%;
  display:block;text-align:left;
}
.a2-deck .dcli{
  color:#fff;text-transform:none;
  letter-spacing:0 !important;
  font-family:'Poppins',sans-serif;font-weight:400;
  font-size:1.05rem;margin-bottom:26px;
  animation:none !important;opacity:1;transform:none;
}
.a2-deck .dtxt b{
  color:#fff;font-weight:800;
  font-size:clamp(1.7rem,3.2vw,3.2rem);
  line-height:1.15;letter-spacing:-.01em;
  max-width:24ch;text-wrap:balance;margin:0;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
  animation:none !important;opacity:1;transform:none;
}
.a2-deck .dgo{
  display:inline-block;margin-top:26px;
  color:#fff;border-bottom:none;padding-bottom:0;
  font-family:'Poppins',sans-serif;font-weight:400;
  font-size:1rem;letter-spacing:0;text-transform:none;
  animation:none !important;opacity:1;transform:none;
}
.a2-deck .dcard:hover .dgo{color:#fff;text-decoration:underline;text-underline-offset:5px}
.a2-deck .dnum{
  display:flex;align-items:center;
  position:absolute;top:34px;right:34px;left:auto;bottom:auto;inset:auto 34px auto auto;
  z-index:2;
  background:#FFFFFF;color:#111;
  border:none;border-radius:99px;
  padding:15px 24px;
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  -webkit-text-stroke:0;text-shadow:none;
  opacity:1;animation:none !important;
}
.a2-deck .dnum small{
  display:inline;color:#111;
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 0 7px;-webkit-text-stroke:0;
}
@media(max-width:700px){
  .a2-deck .dcard,
  .a2-deck .dwrap:nth-child(2) .dcard,
  .a2-deck .dwrap:nth-child(3) .dcard,
  .a2-deck .dwrap:nth-child(4) .dcard,
  .a2-deck .dwrap:nth-child(5) .dcard{width:92vw;height:70vh}
  .a2-deck .dwrap{margin:0 0 7vh}
  .a2-deck .dtxt b{font-size:clamp(1.3rem,6.4vw,1.8rem)}
  .a2-deck .dcli{font-size:.92rem;margin-bottom:16px}
  .a2-deck .dgo{font-size:.88rem;margin-top:18px}
  .a2-deck .dnum{top:16px;right:16px;padding:10px 16px;font-size:.64rem}
  .a2-deck .dnum small{font-size:.64rem}
}

/* le sceau blanc sur cercle transparent, comme l original */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{
    background:transparent;
    box-shadow:none;
  }
  body.fx27deck #fx27cur::after{
    color:#fff;
    text-shadow:0 1px 12px rgba(0,0,0,.5);
  }
  .fx27orbtxt text{fill:#fff}
  body.fx27deck .fx27orbtxt{filter:drop-shadow(0 1px 10px rgba(0,0,0,.45))}
}

/* le sceau a la publicis : petit, transparent, la goutte au coeur */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{width:82px;height:82px}
  body.fx27deck #fx27cur::after{content:""}
  .fx27orblogo{
    position:absolute;left:50%;top:50%;
    width:24px;height:auto;
    transform:translate(-50%,-50%);
    opacity:0;transition:opacity .25s ease;
    pointer-events:none;
    filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));
  }
  body.fx27deck .fx27orblogo{opacity:1}
}

/* le sceau un chouilla plus grand et plus lisible */
@media (hover:hover) and (pointer:fine){
  body.fx27deck #fx27cur{width:96px;height:96px}
  .fx27orbtxt text{font-size:11.4px;font-weight:700;letter-spacing:1.2px}
  body.fx27deck .fx27orbtxt{filter:drop-shadow(0 1px 6px rgba(0,0,0,.65))}
  .fx27orblogo{width:28px}
}

/* la parole partout : les styles de la section ne dependent plus de l accueil */
.parole{
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(217,196,138,.20), transparent 55%),
    radial-gradient(75% 85% at 4% 100%, rgba(169,201,180,.20), transparent 60%),
    linear-gradient(172deg,#FDFDFB 0%,#F6F7F3 70%,#F0F2EB 100%);
  padding:13vh 0 11vh;
}
.parole .eyebrow{color:var(--or)}
.parole h2{color:var(--vert)}
body.dark .parole{
  background:
    radial-gradient(70% 90% at 85% 5%, rgba(233,201,121,.10), transparent 55%),
    radial-gradient(75% 85% at 6% 100%, rgba(30,92,70,.35), transparent 60%),
    linear-gradient(172deg,#0B241B 0%,#061511 70%,#04100C 100%);
}
body.dark .parole .eyebrow{color:var(--ambre)}
body.dark .parole h2{color:var(--blanc)}

/* ============================================================
   LA PROMESSE BLANCHE — la fin de page passe au clair : le
   velours et la photo s effacent, l encre verte prend la scene.
   Le mode sombre conserve la version velours.
   ============================================================ */
.contactc{
  background:linear-gradient(180deg,#FDFDFB 0%,#F4F6F1 100%) !important;
}
.contactc::before{display:none}
.fpouss{display:none !important}

/* le titre : encre verte, la souris intensifie */
.cadre h2,.cadre2 h2,.contactc .cadre h2,.contactc .cadre2 h2{
  background:radial-gradient(clamp(240px,36vw,460px) circle at var(--hx,50%) var(--hy,45%),
    #0C271D 0%,
    rgba(14,42,32,.96) 30%,
    rgba(29,74,59,.52) 72%,
    rgba(29,74,59,.44) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;
}
.cadre h2 em,.cadre2 h2 em{
  color:var(--or) !important;
  -webkit-text-fill-color:var(--or) !important;
}
.contactc .eyebrow.light,.cadre .eyebrow,.cadre2 .eyebrow{color:var(--or)}
.cadre p,.cadre2 p{color:#68766F}
.cadre .btn-tel,.cadre2 .btn-tel{color:#68766F}
.cadre .btn-tel b,.cadre2 .btn-tel b{color:var(--vert)}
.cadre .btn-tel:hover b,.cadre2 .btn-tel:hover b{color:var(--or)}

/* l horizon d or s adoucit sur le clair */
.contactc::after{opacity:.75}

/* mode sombre : la scene retrouve son velours et sa photo */
body.dark .contactc{
  background:
    radial-gradient(58% 70% at 50% -12%, rgba(233,201,121,.13), transparent 62%),
    linear-gradient(170deg,#0F2F23 0%,#0B241B 52%,#04100C 100%) !important;
}
body.dark .contactc::before{display:block}
body.dark .fpouss{display:block !important}
body.dark .cadre h2,body.dark .cadre2 h2{
  background:radial-gradient(clamp(240px,36vw,460px) circle at var(--hx,50%) var(--hy,45%),
    #FFFFFF 0%,
    rgba(255,255,255,.94) 30%,
    rgba(255,255,255,.55) 72%,
    rgba(255,255,255,.46) 100%);
  -webkit-background-clip:text;background-clip:text;
}
body.dark .cadre h2 em,body.dark .cadre2 h2 em{
  color:var(--ambre) !important;
  -webkit-text-fill-color:var(--ambre) !important;
}
body.dark .contactc .eyebrow.light,body.dark .cadre .eyebrow,body.dark .cadre2 .eyebrow{color:var(--champagne)}
body.dark .cadre p,body.dark .cadre2 p{color:var(--menthe)}
body.dark .cadre .btn-tel,body.dark .cadre2 .btn-tel{color:var(--menthe)}
body.dark .cadre .btn-tel b,body.dark .cadre2 .btn-tel b{color:var(--champagne)}
body.dark .contactc::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  .cadre h2,.cadre2 h2{color:var(--vert) !important;background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important}
  body.dark .cadre h2,body.dark .cadre2 h2{color:#fff !important}
}

/* PROMESSE, FINITIONS : le bati s efface, les lueurs des sections claires, le trait de ceremonie */
.fbati{display:none !important}
.contactc{
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(217,196,138,.16), transparent 55%),
    radial-gradient(75% 85% at 4% 100%, rgba(169,201,180,.16), transparent 60%),
    linear-gradient(180deg,#FDFDFB 0%,#F4F6F1 100%) !important;
}
.contactc .eyebrow.light,.cadre .eyebrow,.cadre2 .eyebrow{letter-spacing:.42em}
.cadre h2::after,.cadre2 h2::after{
  content:"";display:block;width:52px;height:1px;
  background:var(--or);margin:28px auto 0;
}
.cadre p,.cadre2 p{max-width:34em;margin-left:auto;margin-right:auto}
body.dark .contactc{
  background:
    radial-gradient(58% 70% at 50% -12%, rgba(233,201,121,.13), transparent 62%),
    linear-gradient(170deg,#0F2F23 0%,#0B241B 52%,#04100C 100%) !important;
}
body.dark .cadre h2::after,body.dark .cadre2 h2::after{background:var(--ambre)}

/* signature retiree : la plume tire sa reverence */
.fsigne{display:none !important}

/* LA PORTE D OR : la pilule references en blanc pur, halo qui respire, fleche qui bondit */
.a2-refcta{
  background:#FFFFFF;
  border:1px solid rgba(199,154,62,.38);
  padding:24px 38px 24px 28px;gap:20px;
  box-shadow:0 22px 55px -24px rgba(11,36,27,.30);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .3s ease;
}
.a2-refcta:hover{
  background:#FFFFFF;
  transform:translateY(-4px);
  border-color:var(--ambre);
  box-shadow:0 34px 72px -26px rgba(199,154,62,.5);
}
.a2-refcta::after{
  content:"";position:absolute;inset:-18px;border-radius:999px;z-index:-1;
  background:radial-gradient(62% 100% at 50% 62%, rgba(242,184,75,.24), transparent 70%);
  animation:refHalo 3.6s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes refHalo{
  from{opacity:.45;transform:scale(.97)}
  to{opacity:1;transform:scale(1.05)}
}
.a2-refcta .nbr{color:var(--or)}
.a2-refcta .nbr i{color:var(--ambre)}
.a2-refcta .lib{color:var(--vert);font-weight:700}
.a2-refcta .fleche{
  width:48px;height:48px;font-size:1.25rem;
  background:linear-gradient(125deg,#F2B84B,#E8A93C);
  box-shadow:0 10px 24px -10px rgba(242,184,75,.6);
}
.a2-refcta:hover .fleche{transform:translateX(8px) scale(1.1)}
body.dark .a2-refcta{background:rgba(6,21,17,.7);border-color:rgba(217,196,138,.4);box-shadow:0 22px 55px -24px rgba(0,0,0,.5)}
body.dark .a2-refcta:hover{background:rgba(6,21,17,.85)}
body.dark .a2-refcta .lib{color:var(--blanc)}
body.dark .a2-refcta .nbr{color:var(--ambre)}
@media(prefers-reduced-motion:reduce){
  .a2-refcta::after{animation:none;opacity:.7}
}

/* ============================================================
   LE PACK APPLE — loupe de dock, carrousel spatial du tableau
   d honneur, physique de ressort des boutons.
   ============================================================ */
/* 1 · la loupe de dock : les logos grossissent pres du curseur */
@media (hover:hover) and (pointer:fine){
  .marquee img{
    transform-origin:50% 100%;
    transition:transform .18s ease-out;
  }
}

/* 5 · la physique de ressort : les boutons s enfoncent et rebondissent */
.btn,.btn-a,.btn-ghost,.a2-refcta,.pill,.mfil button,.sommaire button,.tnav button{
  transition:transform .5s cubic-bezier(.3,1.65,.35,1) !important;
}
.btn:active,.btn-a:active,.btn-ghost:active,.a2-refcta:active,.pill:active{
  transform:scale(.94) !important;
  transition:transform .12s ease-in !important;
}
@media(prefers-reduced-motion:reduce){
  .marquee img{transition:none}
  .btn:active,.btn-a:active,.btn-ghost:active,.a2-refcta:active,.pill:active{transform:none !important}
}

/* projets pose : retour dans la colonne de lecture, sous-titre aligne */
section.a2-deck > .wrap{max-width:1180px;padding:0 28px}
.pgsous{margin:20px 0 0 4px;font-size:.95rem}
body.dark .pgeant{color:var(--ambre) !important}

/* la goutte d or au coeur du O — le logo s invite dans la typo */
.opoint{position:relative;display:inline-block}
.opoint::after{
  content:"";position:absolute;
  left:50%;top:54%;transform:translate(-50%,-50%);
  width:.34em;height:.34em;border-radius:50%;
  background:var(--ambre);
}
body.dark .opoint::after{background:var(--vert)}

/* l accent d or de METIERS — la touche jaune en trait de plume */
.eacc{position:relative;display:inline-block}
.eacc::before{
  content:"";position:absolute;
  left:54%;top:-.14em;
  width:.36em;height:.09em;
  background:var(--ambre);border-radius:.05em;
  transform:translateX(-50%) rotate(-21deg);
}
body.dark .eacc::before{background:var(--vert)}

/* LE BALAYAGE INVERSE : la vague de vert remplit la pilule au survol */
.a2-refcta{
  background:linear-gradient(105deg,#123528 0%,#1D4A3B 49.5%,#FFFFFF 50%,#FFFFFF 100%);
  background-size:225% 100%;
  background-position:100% 0;
  transition:background-position .55s cubic-bezier(.22,1,.36,1),
             transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s ease,border-color .3s ease;
}
.a2-refcta:hover{
  background-position:0 0;
  border-color:rgba(233,201,121,.6);
}
.a2-refcta .lib{transition:color .4s ease}
.a2-refcta:hover .lib{color:#F2E9D0}
.a2-refcta .nbr{transition:color .4s ease}
.a2-refcta:hover .nbr{color:var(--champagne)}
.a2-refcta .fleche{
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s ease,color .35s ease;
}
.a2-refcta:hover .fleche{
  transform:translateX(8px) rotate(-45deg);
  background:#FFFFFF;color:#123528;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.3);
}
body.dark .a2-refcta{
  background:linear-gradient(105deg,#F2B84B 0%,#E8A93C 49.5%,rgba(6,21,17,.7) 50%,rgba(6,21,17,.7) 100%);
  background-size:225% 100%;background-position:100% 0;
}
body.dark .a2-refcta:hover{background-position:0 0}
body.dark .a2-refcta:hover .lib{color:#231A05}
body.dark .a2-refcta:hover .nbr{color:#5A451C}
@media(prefers-reduced-motion:reduce){
  .a2-refcta{transition:none;background:#fff}
  body.dark .a2-refcta{background:rgba(6,21,17,.7)}
}

/* REFCTA IMBATTABLE : a.a2-refcta bat accueil-v2 charge apres */
a.a2-refcta{
  background:linear-gradient(105deg,#123528 0%,#1D4A3B 49.5%,#FFFFFF 50%,#FFFFFF 100%);
  background-size:225% 100%;
  background-position:100% 0;
  border:1px solid rgba(199,154,62,.38);
  padding:24px 38px 24px 28px;gap:20px;
  box-shadow:0 22px 55px -24px rgba(11,36,27,.30);
  transition:background-position .55s cubic-bezier(.22,1,.36,1),
             transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s ease,border-color .3s ease;
}
a.a2-refcta:hover{
  background-position:0 0;
  transform:translateY(-4px);
  border-color:rgba(233,201,121,.6);
  box-shadow:0 34px 72px -26px rgba(199,154,62,.5);
}
a.a2-refcta .nbr{color:var(--or);transition:color .4s ease}
a.a2-refcta .nbr i{color:var(--ambre)}
a.a2-refcta .lib{color:var(--vert);font-weight:700;transition:color .4s ease}
a.a2-refcta:hover .lib{color:#F2E9D0}
a.a2-refcta:hover .nbr{color:var(--champagne)}
a.a2-refcta .fleche{
  width:48px;height:48px;font-size:1.25rem;
  background:linear-gradient(125deg,#F2B84B,#E8A93C);
  transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s ease,color .35s ease;
}
a.a2-refcta:hover .fleche{
  transform:translateX(8px) rotate(-45deg);
  background:#FFFFFF;color:#123528;
}
body.dark a.a2-refcta{
  background:linear-gradient(105deg,#F2B84B 0%,#E8A93C 49.5%,rgba(6,21,17,.72) 50%,rgba(6,21,17,.72) 100%);
  background-size:225% 100%;background-position:100% 0;
  border-color:rgba(217,196,138,.4);
}
body.dark a.a2-refcta:hover{background-position:0 0}
body.dark a.a2-refcta .lib{color:var(--blanc)}
body.dark a.a2-refcta:hover .lib{color:#231A05}
body.dark a.a2-refcta .nbr{color:var(--ambre)}
body.dark a.a2-refcta:hover .nbr{color:#5A451C}
@media(max-width:700px){
  a.a2-refcta{padding:18px 26px 18px 20px;gap:14px}
  a.a2-refcta .fleche{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  a.a2-refcta{transition:none;background:#fff}
  body.dark a.a2-refcta{background:rgba(6,21,17,.72)}
}

/* STABILITE SVH : la barre d adresse mobile ne fait plus sauter les cadres */
@supports (height:1svh){
  .a2-deck .dcard,
  .a2-deck .dwrap:nth-child(2) .dcard,
  .a2-deck .dwrap:nth-child(3) .dcard,
  .a2-deck .dwrap:nth-child(4) .dcard,
  .a2-deck .dwrap:nth-child(5) .dcard{height:88svh}
  @media(max-width:700px){
    .a2-deck .dcard,
    .a2-deck .dwrap:nth-child(2) .dcard,
    .a2-deck .dwrap:nth-child(3) .dcard,
    .a2-deck .dwrap:nth-child(4) .dcard,
    .a2-deck .dwrap:nth-child(5) .dcard{height:70svh}
  }
  .fhsticky{height:100svh}
  .fhwrap{height:520svh}
}

/* TITRES EN ITALIQUE : les grands mots prennent de l elan */
.pgeant{font-style:italic;padding-right:.14em}
.pgeant .chplus{font-style:normal}
.pgeant .opoint::after{left:53.5%}
.pgeant .eacc::before{left:57%}

/* PoppinsTitre : seule la graisse epaisse existe, l italique est donc penchee SUR le gras */
@font-face{
  font-family:'PoppinsTitre';
  src:url('fonts/poppins-700.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* la pastille participants en ambre maison */
.a2-deck .dnum{
  background:linear-gradient(125deg,#F2B84B,#E8A93C);
  color:#231A05;
  box-shadow:0 10px 26px -10px rgba(242,184,75,.55);
}
.a2-deck .dnum small{color:#3A2A08}

/* pastille ambre, blanc dessus : plus profonde, liseret de lumiere, texte blanc */
.a2-deck .dnum{
  background:linear-gradient(130deg,#EFAF45 0%,#D8992F 60%,#C48A28 100%);
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 30px -12px rgba(180,130,40,.65), inset 0 1px 0 rgba(255,255,255,.35);
  padding:13px 22px;
  letter-spacing:.09em;
  text-shadow:0 1px 2px rgba(120,80,10,.35);
}
.a2-deck .dnum small{
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 2px rgba(120,80,10,.35);
}

/* le verre fume du chip participants : sombre, flou, champagne */
.a2-deck .dnum{
  background:rgba(8,22,16,.52);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid rgba(233,201,121,.45);
  color:#F2E9D0;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  padding:13px 22px;
  letter-spacing:.09em;
  text-shadow:none;
}
.a2-deck .dnum small{
  color:var(--menthe);
  text-shadow:none;
}

/* verre fume, plus lisible : plus dense, plus grand, liseret plus franc */
.a2-deck .dnum{
  background:rgba(6,18,13,.74);
  border:1px solid rgba(233,201,121,.7);
  padding:15px 24px;
  font-size:.92rem;
  letter-spacing:.1em;
  color:#FFF6DE;
}
.a2-deck .dnum small{
  font-size:.8rem;
  color:#CFE3D6;
}
@media(max-width:700px){
  .a2-deck .dnum{padding:11px 18px;font-size:.74rem}
  .a2-deck .dnum small{font-size:.66rem}
}

/* LE CHIFFRE NU : plus de pastille — le grand contour champagne pose sur l image */
.a2-deck .dnum{
  display:block;
  background:none;border:none;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  top:30px;right:34px;left:auto;bottom:auto;inset:auto 34px auto auto;
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-weight:400;line-height:1;
  font-size:clamp(2.6rem,5vw,4.8rem);
  color:transparent;
  -webkit-text-stroke:1.6px rgba(240,220,160,.95);
  letter-spacing:.01em;text-align:right;
  font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55));
  text-shadow:none;
}
.a2-deck .dnum small{
  display:block;margin:12px 0 0;
  font-family:'JetBrains Mono','Consolas',monospace;
  font-weight:700;font-size:.62rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:#F2E9D0;-webkit-text-stroke:0;
}
@media(max-width:700px){
  .a2-deck .dnum{top:18px;right:18px;font-size:2rem;-webkit-text-stroke-width:1.2px}
  .a2-deck .dnum small{font-size:.52rem;margin-top:8px}
}
/* ============================================================
   BOUTONS HARMONISES - intitules en majuscules sur tout le site,
   espacement de caps, meme voix pour chaque bouton.
   ============================================================ */
.btn,.a2-refcta{
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.88em;
}

/* ============================================================
   PROJETS EN AVANT - la preuve des le heros (trust row) et la
   passerelle de fin de page metiers vers les projets.
   ============================================================ */
.fx27trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;
  border-top:1px dashed rgba(29,74,59,.22);padding-top:18px;max-width:660px}
.fx27trust .tvign{display:flex;flex:0 0 auto}
.fx27trust .tvign i{display:block;width:42px;height:42px;border-radius:50%;overflow:hidden;
  border:2px solid #FDFDFB;margin-left:-10px;box-shadow:0 2px 8px rgba(14,42,32,.2);font-style:normal}
.fx27trust .tvign i:first-child{margin-left:0}
.fx27trust .tvign img{width:100%;height:100%;object-fit:cover;display:block}
.fx27trust p{font-size:.86rem;color:#3D4A44;margin:0;line-height:1.55}
.fx27trust p b{color:#1D4A3B}
.fx27trust p a{color:#B8892F;font-weight:600;text-decoration:none;white-space:nowrap}
.fx27trust p a:hover{text-decoration:underline}
body.dark .fx27trust{border-top-color:rgba(233,201,121,.25)}
body.dark .fx27trust p{color:#A9C9B4}
body.dark .fx27trust p b{color:#F7F4EA}
body.dark .fx27trust p a{color:#E9C979}
body.dark .fx27trust .tvign i{border-color:#0B241B}

.fx27pass{padding:9vh 0 10vh}
.fx27pass h2{font-size:clamp(1.4rem,2.8vw,2rem);color:#1D4A3B;margin:10px 0 26px}
.fx27pass .pgrille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fx27pass .pcarte{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:block;
  text-decoration:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.fx27pass .pcarte img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fx27pass .pcarte:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,42,32,.22)}
.fx27pass .pcarte:hover img{transform:scale(1.06)}
.fx27pass .pleg{display:block;position:absolute;inset:auto 0 0 0;padding:34px 16px 13px;color:#fff;
  font-size:.82rem;font-weight:500;background:linear-gradient(180deg,transparent,rgba(6,20,14,.82))}
.fx27pass .ptous{display:inline-flex;align-items:center;gap:10px;margin-top:28px;text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#1D4A3B;
  border:1.5px solid #1D4A3B;border-radius:999px;padding:12px 26px;transition:all .35s}
.fx27pass .ptous:hover{background:#1D4A3B;color:#F7F4EA;gap:16px}
body.dark .fx27pass h2{color:#F7F4EA}
body.dark .fx27pass .ptous{color:#E9C979;border-color:#E9C979}
body.dark .fx27pass .ptous:hover{background:#E9C979;color:#0B241B}
@media(max-width:760px){
  .fx27pass .pgrille{grid-template-columns:1fr}
  .fx27trust{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .fx27pass .pcarte,.fx27pass .pcarte img{transition:none}
}

/* ============================================================
   RESPIRATIONS - de l'air apres chaque moment fort de l'accueil
   ============================================================ */
.a2-deck{padding-bottom:12vh}
.a2-metiers{padding-top:5vh}
section.fx27-giant{margin:9vh 0}
.a2-chiffres{margin-top:7vh}

/* ============================================================
   PAGES REALISATION - le mariage B + C : heros magazine
   (photo plein ecran, titre pose dessus) + chapo Cormorant
   + chiffre nu dore pour le resultat.
   ============================================================ */
.rea27hero{position:relative;height:86vh;min-height:480px;overflow:hidden;display:block;padding:0}
@supports (height:1svh){.rea27hero{height:86svh}}
.rea27hero>img{width:100%;height:100%;object-fit:cover;display:block}
.rea27hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(200deg,rgba(6,20,14,.06) 30%,rgba(6,20,14,.84) 100%)}
.rea27hero .retour{position:absolute;top:104px;left:0;right:0;z-index:3;width:max-content;
  margin:0 auto 0 max(24px,calc((100% - 1180px)/2 + 24px));
  color:#F7F4EA;border-color:rgba(247,244,234,.45);background:rgba(6,20,14,.32)}
.rea27hero .retour:hover{background:rgba(6,20,14,.55);color:#fff}
.rea27bas{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:6vh}
.rea27hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.1;
  max-width:18em;margin-top:10px;font-weight:700}
.rea27hero h1 em{font-family:'Cormorant Garamond',Constantia,serif;font-style:italic;
  font-weight:500;color:#E9C979;letter-spacing:.01em}
.rea27hero .eyebrow{color:#A9C9B4}

.rea27chapos{padding:7vh 0 1vh}
.rea27chapo{font-family:'Cormorant Garamond',Constantia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.45rem,2.7vw,2.05rem);line-height:1.45;color:#1D4A3B;max-width:32em;margin:0}
body.dark .rea27chapo{color:#E9C979}

.rea27result{padding:8vh 0 5vh}
.r27flex{display:flex;align-items:center;gap:5vw;flex-wrap:wrap;margin-top:16px}
.r27num{font-family:Constantia,'Cormorant Garamond',serif;font-size:clamp(4.2rem,10vw,8.2rem);
  line-height:.9;color:transparent;-webkit-text-stroke:2px rgba(199,154,62,.95);
  text-align:center;font-variant-numeric:tabular-nums;flex:0 0 auto}
.r27num small{display:block;font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.28em;text-transform:uppercase;color:#B8892F;margin-top:12px;
  -webkit-text-stroke:0;font-weight:500}
.r27flex>p{flex:1;min-width:260px;font-size:1rem;line-height:1.8;color:#3D4A44;margin:0;max-width:56ch}
body.dark .r27num{-webkit-text-stroke-color:rgba(240,220,160,.95)}
body.dark .r27num small{color:#E9C979}
body.dark .r27flex>p{color:#A9C9B4}
@media(max-width:760px){
  .rea27hero{min-height:420px}
  .rea27hero .retour{top:92px}
  .r27flex{gap:26px}
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .r27num{animation:r27pop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes r27pop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
  }
}

/* ============================================================
   BASELINE SOUS LE LOGO - texte net a toutes les tailles,
   l'image du logo redevient un logo pur.
   ============================================================ */
.fx27blogo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1}
.fx27base{font-family:'JetBrains Mono',monospace;font-size:.5rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#EFE6CC;white-space:nowrap;opacity:.95}
nav.clair .fx27base{color:#8A6216}
body.dark .fx27base{color:#E9C979}
.fx27base::after{content:"";display:inline-block;width:8px;height:10px;margin-left:7px;vertical-align:-1px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 30%27%3E%3Cpath d=%27M12 1c4.6 7 8.4 11.6 8.4 17a8.4 8.4 0 1 1-16.8 0C3.6 12.6 7.4 8 12 1z%27 fill=%27%233FB9C4%27/%3E%3C/svg%3E") no-repeat center/contain}
@media(min-width:901px){
  nav .fx27blogo img{height:50px}
  nav.clair .fx27blogo img{height:50px}
}
@media(max-width:900px){.fx27base{display:none}}

/* ============================================================
   BANDEAU CLIENTS FACON MCI - deux rangees croisees.
   La 2e rangee rejoue l'animation existante en sens inverse ;
   pastilles, reglages par logo et pause au survol herites.
   ============================================================ */
.marquee .track{padding:7px 0}
.marquee .track.tretour{animation-direction:reverse}

/* ============================================================
   ZERO-BUG - la baseline salue en haut de page puis s'efface
   quand la pilule apparait ; contact sombre lisible ; bandeaux
   en pause quand ils sortent de l'ecran.
   ============================================================ */
#nav.scrolled .fx27base{display:none}
@media(min-width:901px){
  #nav.scrolled .fx27blogo img{height:44px}
}
body.dark nav.clair .fx27base{color:#E9C979}
.marquee.mqhors .track{animation-play-state:paused}

/* ============================================================
   PIED DE PAGE ALLEGE - 3 colonnes, les engagements en une
   ligne de labels.
   ============================================================ */
@media(min-width:981px){
  .bigfoot .fgrid{grid-template-columns:1.4fr 1fr 1.2fr}
}
.fcerts{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:#8Aa596;text-align:center;line-height:2;margin:0 0 26px;padding-top:26px;border-top:1px solid rgba(233,201,121,.16)}
body.dark .fcerts{color:#7E9C8C}

/* le point d'or dans le contre du A (titre AGENCES) */
.apoint{position:relative;display:inline-block}
.apoint::after{content:'';position:absolute;left:54%;top:47%;transform:translate(-50%,-50%);width:.17em;height:.17em;border-radius:50%;background:var(--ambre,#F2B84B)}

/* pastilles des nouveaux logos clients */
.marquee img[src*='cnrs'],.marquee img[src*='epide'],.marquee img[src*='ministere']{padding:13px 30px}
@media(max-width:760px){.marquee img[src*='cnrs'],.marquee img[src*='epide'],.marquee img[src*='ministere']{padding:11px 22px}}

/* ============================================================
   LE QUADRIPTYQUE DES METIERS - quatre volets d'image qui
   s'ouvrent au survol (accueil, remplace la grille a pictos).
   ============================================================ */
.fx27quad{display:flex;gap:10px;height:72vh;min-height:430px;margin-top:44px}
@supports (height:1svh){.fx27quad{height:72svh}}
.fx27volet{position:relative;flex:1;border-radius:16px;overflow:hidden;cursor:pointer;
  transition:flex .65s cubic-bezier(.25,.9,.2,1)}
.fx27volet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.fx27volet::after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(6,20,14,.05) 30%,rgba(6,20,14,.86) 100%)}
.fx27volet .vtxt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px}
.fx27volet .vn{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.26em;color:#E9C979}
.fx27volet h3{color:#fff;font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.15;margin:8px 0 0;font-weight:700}
.fx27volet p{color:#A9C9B4;font-size:.85rem;line-height:1.6;max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .6s cubic-bezier(.25,.9,.2,1),opacity .45s .1s,margin-top .5s}
.fx27volet:hover,.fx27volet:focus-within,.fx27volet:focus{flex:2.6}
.fx27volet:hover img,.fx27volet:focus img{transform:scale(1)}
.fx27volet:hover p,.fx27volet:focus-within p,.fx27volet:focus p{max-height:9em;opacity:1;margin-top:10px}
@media(max-width:820px){
  .fx27quad{flex-direction:column;height:auto}
  .fx27volet{height:150px;transition:height .55s cubic-bezier(.25,.9,.2,1)}
  .fx27volet:hover,.fx27volet:focus{flex:1;height:300px}
}
@media(prefers-reduced-motion:reduce){
  .fx27volet,.fx27volet img,.fx27volet p{transition:none}
  .fx27volet p{max-height:none;opacity:1;margin-top:10px}
}
/* ============================================================
   LOGOS UNIFORMISES - tous les fichiers sont au gabarit 400x200
   (contenu recadre, centre), donc une seule pastille pour tous.
   ============================================================ */
.marquee img[src*='img/']{padding:12px 22px}
@media(max-width:760px){.marquee img[src*='img/']{padding:9px 15px}}

/* la baseline suit le logo partout (pilule, mobile, footer) */
#nav.scrolled .fx27base{display:block}
@media(max-width:900px){.fx27base{display:block;font-size:.46rem;letter-spacing:.1em}}
.bigfoot .fbrand img{margin-bottom:3px}
.fx27basef{display:block;margin:0 0 16px}

/* ============================================================
   LA MOSAIQUE RESPIRANTE - tableau d'honneur : noir et blanc
   au repos, couleurs + elevation au survol, secteur revele.
   ============================================================ */
.honneur .cell{background:#fff;border:1px solid #E7E5DB;border-radius:14px;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}
.honneur .cell img{filter:grayscale(1) opacity(.55);transition:filter .4s;transform:none}
.honneur .cell:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,42,32,.14);border-color:#E9C979}
.honneur .cell:hover img{filter:none;transform:none}
.honneur .cell .depuis{opacity:0;transition:opacity .35s}
.honneur .cell:hover .depuis{opacity:1}
body.dark .honneur .cell{background:#F7F4EA;border-color:rgba(233,201,121,.25)}
@media(prefers-reduced-motion:reduce){
  .honneur .cell,.honneur .cell img,.honneur .cell .depuis{transition:none}
  .honneur .cell img{filter:none}
  .honneur .cell .depuis{opacity:1}
}

/* ============================================================
   LE MOODBOARD EPINGLE - les clients punaises comme au mur de
   l'agence : punaise doree, cartes de travers, pose au scroll,
   redressement a ressort au survol.
   ============================================================ */
.fx27board{display:flex;flex-wrap:wrap;gap:24px 26px;justify-content:center;align-items:center;
  margin-top:44px;padding:16px 0 6px}
.fx27epingle{position:relative;background:#fff;border:1px solid #E7E5DB;border-radius:12px;
  padding:14px 20px 10px;width:172px;box-shadow:0 8px 22px rgba(14,42,32,.09);cursor:pointer;
  transition:transform .55s cubic-bezier(.3,1.6,.4,1),box-shadow .45s,border-color .3s}
.fx27epingle img{width:100%;display:block}
.fx27epingle::before{content:'';position:absolute;left:50%;top:-7px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--ambre,#F2B84B);
  box-shadow:0 2px 5px rgba(14,42,32,.3)}
.fx27epingle:nth-child(4n+1){transform:rotate(-2.4deg) translateY(6px)}
.fx27epingle:nth-child(4n+2){transform:rotate(1.8deg) translateY(-8px)}
.fx27epingle:nth-child(4n+3){transform:rotate(-1.2deg) translateY(10px)}
.fx27epingle:nth-child(4n){transform:rotate(2.6deg) translateY(-4px)}
.fx27epingle:hover{transform:rotate(0) translateY(-6px) scale(1.06);z-index:4;
  box-shadow:0 20px 46px rgba(14,42,32,.2);border-color:#E9C979}
.fx27epingle small{display:block;margin-top:8px;text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:#A9A493;line-height:1.5}
body.dark .fx27epingle{background:#F7F4EA;border-color:rgba(233,201,121,.28)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fx27epingle{animation:fx27pose linear backwards;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes fx27pose{from{opacity:0;transform:translateY(46px) rotate(0)}}
  }
}
@media(prefers-reduced-motion:reduce){
  .fx27epingle{transition:none}
}
/* ============================================================
   LE TRIO D'ELEGANCE - souligne d'or dessine sous les titres,
   heure de l'agence au pied de page (les boutons magnetiques
   vivent dans le JS, section 25).
   ============================================================ */
.wrap > h2:not(.pgeant)::after{content:'';display:block;width:118px;height:2px;margin-top:14px;
  border-radius:2px;background:linear-gradient(90deg,#C79A3E,#E9C979);transform-origin:left;transform:scaleX(1)}
section.contactc .wrap > h2::after{display:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .wrap > h2:not(.pgeant)::after{transform:scaleX(0);
      animation:fx27trait linear both;animation-timeline:view();animation-range:entry 30% entry 85%}
    @keyframes fx27trait{to{transform:scaleX(1)}}
  }
}
.fx27heure{display:block;text-align:center;margin:0 0 14px;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#7E9C8C}
/* ============================================================
   31) PROJETS LATERAUX — rail epingle (bureau) + galerie (mobile)
   Fond clair : la zone collee est transparente, le fond de page suffit.
   ============================================================ */
.fx27railzone{position:relative;height:380vh}
.fx27colle{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.fx27rail{display:flex;gap:4vw;padding:0 8vw;will-change:transform}
.fx27wagon{position:relative;flex:0 0 auto;width:min(62vw,880px);height:64vh;border-radius:22px;overflow:hidden;
  box-shadow:0 24px 60px rgba(14,42,32,.18);display:block}
.fx27wagon img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fx27wagon:hover img{transform:scale(1.01)}
.fx27wagon::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(6,20,13,0) 38%,rgba(6,20,13,.78) 100%)}
.fx27wnum{position:absolute;top:26px;right:30px;z-index:2;font-family:'JetBrains Mono','JBMono',monospace;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.4rem);color:var(--champagne,#E9C979);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.fx27wnum small{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;text-align:right;color:#E9DFC5}
.fx27wtxt{position:absolute;left:32px;right:32px;bottom:26px;z-index:2;color:#fff}
.fx27wcli{font-family:'JetBrains Mono','JBMono',monospace;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ambre,#F2B84B)}
.fx27wtxt b{display:block;font-size:clamp(1.05rem,1.8vw,1.55rem);font-weight:700;margin-top:6px;letter-spacing:-.01em}
.fx27wgo{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--champagne,#E9C979)}
.fx27jauge{position:absolute;left:5vw;right:5vw;bottom:5vh;height:2px;background:#E4E2D8}
.fx27jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--or,#C79A3E),var(--ambre,#F2B84B))}
.fx27souffle{position:absolute;right:5vw;bottom:calc(5vh + 14px);font-family:'JetBrains Mono','JBMono',monospace;font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:#68766F;animation:fx27pulse 2.4s infinite}
@keyframes fx27pulse{50%{opacity:.35}}
body.dark .fx27jauge{background:rgba(233,201,121,.18)}
body.dark .fx27souffle{color:#B9CDBB}

.fx27galzone{padding:10px 0 6px}
.fx27galerie{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 26px;
  scrollbar-width:none;cursor:grab}
.fx27galerie::-webkit-scrollbar{display:none}
.fx27galerie.tire{cursor:grabbing;scroll-snap-type:none}
.fx27galerie .fx27wagon{width:min(78vw,540px);height:56vh;min-height:320px;border-radius:18px;scroll-snap-align:center;
  box-shadow:0 16px 40px rgba(14,42,32,.15)}
.fx27galerie .fx27wtxt{left:24px;right:24px;bottom:20px}
.fx27galerie .fx27wnum{top:20px;right:24px}
.fx27galpied{display:flex;align-items:center;gap:14px;padding:0 24px 8px}
.fx27galpied .compte{font-family:'JetBrains Mono','JBMono',monospace;font-size:.64rem;letter-spacing:.2em;color:#68766F;white-space:nowrap}
.fx27galjauge{flex:1;height:2px;background:#E4E2D8}
.fx27galjauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--or,#C79A3E),var(--ambre,#F2B84B))}
.fx27galpied button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--or,#C79A3E);background:transparent;
  color:var(--or,#C79A3E);font-size:1rem;cursor:pointer;flex:0 0 auto;transition:background .3s,color .3s}
.fx27galpied button:hover{background:var(--or,#C79A3E);color:#fff}
body.dark .fx27galjauge{background:rgba(233,201,121,.18)}
body.dark .fx27galpied .compte{color:#B9CDBB}

@media (min-width:981px){
  .fx27galzone{display:none}
}
@media (max-width:980px){
  .fx27railzone{display:none}
}
@media (prefers-reduced-motion: reduce){
  .fx27railzone{height:auto}
  .fx27colle{position:static;height:auto;padding:20px 0}
  .fx27rail{overflow-x:auto;padding:10px 24px 26px}
  .fx27wagon{height:52vh;min-height:300px}
  .fx27jauge,.fx27souffle{display:none}
}

/* 31b) rail : resserrage sous le titre PROJETS (demande Romain : trop de blanc) */
.a2-deck .a2-shead{margin-bottom:0}
.fx27railzone{margin-top:-8vh}
.fx27rail{margin-top:-4vh}
@media (max-width:980px){
  .fx27railzone{margin-top:0}
  .fx27galzone{margin-top:-10px}
}
@media (prefers-reduced-motion: reduce){
  .fx27railzone{margin-top:0}
  .fx27rail{margin-top:0}
}
/* ============================================================
   32) HERO CENTRE facon manifeste + CTA projets harmonise
   ============================================================ */
.a2-hero .fx27manu{display:block;text-align:center;margin:0 0 20px}
.fx27manu em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.4rem,2.4vw,2rem);color:#F2E9D0;letter-spacing:.01em}
.fx27manu b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(.7rem,1vw,.88rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--ambre,#F2B84B);margin-left:12px}
.a2-kine.fx27centre{text-align:center;margin-left:auto;margin-right:auto;max-width:1100px}
.a2-herotail.fx27tailc{display:block;text-align:center}
.a2-herotail.fx27tailc .a2-serifline{margin:0 auto;text-align:center;max-width:660px}
.a2-cta.fx27ctac{display:flex;justify-content:center;text-align:center}
.fx27lieux{text-align:center;margin:20px 0 0;font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.24em;text-transform:uppercase;color:#A9C9B4}
.ordor{color:var(--ambre,#F2B84B)}
.fx27refc{text-align:center}
@media (max-width:700px){
  .fx27manu b{display:block;margin:8px 0 0;letter-spacing:.28em}
}
/* 32b) lieux sous la phrase, pas de collision avec le scrollhint */
.fx27lieux{margin:14px 0 0}

/* ============================================================
   33) MANIFESTE "NOTRE METIER" facon declaration centree
   (le bloc 32 hero est neutralise : hero revenu a l origine)
   ============================================================ */
.fx27mani{text-align:center}
.fx27mani .fx27manu{display:block;margin:0 0 20px}
.fx27mani .fx27manu em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--vert,#1D4A3B);letter-spacing:.01em}
.fx27mani .fx27manu b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(.72rem,1vw,.9rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--or,#C79A3E);margin-left:10px}
.fx27mani .fx27decl{font-family:PoppinsTitre,Poppins,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:1.14;letter-spacing:-.015em;color:var(--vert,#1D4A3B);
  max-width:1020px;margin:0 auto}
.fx27mani .fx27decl .ordor{color:var(--or,#C79A3E)}
.fx27mani .a2-lede{margin:28px auto 0;text-align:center;max-width:740px}
.fx27mani .a2-signature{margin:24px auto 0;max-width:740px;border-left:0;padding-left:0;text-align:center}
body.dark .fx27mani .fx27manu em{color:#F2E9D0}
body.dark .fx27mani .fx27decl{color:#F2E9D0}
body.dark .fx27mani .fx27decl .ordor{color:var(--champagne,#E9C979)}
/* 33b) bas du rail resserre (Romain : trop d espace jauge -> bouton -> METIERS) */
.fx27jauge{bottom:26px}
.fx27souffle{bottom:44px}
.a2-deck{padding-bottom:36px}
.a2-refwrap.fx27refc{margin-top:14px}
.a2-metiers{padding-top:0}
@media (max-width:980px){
  .a2-deck{padding-bottom:44px}
}
.fx27souffle{transition:opacity .4s}

/* 33c) carte finale du rail : le CTA vit DANS le voyage (plus de bouton flottant) */
.fx27fin{display:flex;align-items:center;justify-content:center;width:min(34vw,440px);
  background:linear-gradient(160deg,#1D4A3B 0%,#123527 70%,#0E2A20 100%)}
.fx27fin::after{display:none}
.fx27finin{text-align:center;color:#F7F4EA}
.fx27finin b{display:block;font-family:PoppinsTitre,Poppins,sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(3rem,6vw,5.2rem);line-height:1;color:var(--champagne,#E9C979);letter-spacing:-.02em}
.fx27finin > span{display:block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:#DCE8DD}
.fx27finin em{display:inline-block;margin-top:16px;font-style:normal;font-size:1.5rem;color:var(--ambre,#F2B84B);
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fx27fin:hover .fx27finin em{transform:translateX(10px)}
.fx27galerie .fx27fin{width:min(64vw,380px)}
/* 33d) carte finale du rail en BLANC (demande Romain) */
.fx27fin{background:#fff;border:1px solid #E7E5DB}
.fx27finin{color:#3D4A44}
.fx27finin b{color:var(--vert,#1D4A3B)}
.fx27finin > span{color:#68766F}
body.dark .fx27fin{background:#163327;border-color:rgba(233,201,121,.22)}
body.dark .fx27finin b{color:var(--champagne,#E9C979)}
body.dark .fx27finin > span{color:#DCE8DD}
/* 34) signature manuscrite des CHIFFRES : deux registres, chacun regulier */
.fx27manuc{display:block;text-align:center;margin:0 0 38px}
.fx27manuc em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--vert,#1D4A3B);letter-spacing:.01em}
.fx27manuc b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(.72rem,1vw,.9rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--or,#C79A3E);margin-left:10px}
body.dark .fx27manuc em{color:#F2E9D0}
/* 33e) carte du voyage : affordance de clic (fleche en bouton rond + carte qui se souleve) */
.fx27fin{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .3s}
.fx27fin:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(14,42,32,.22);border-color:var(--champagne,#E9C979)}
.fx27finin em{width:54px;height:54px;margin-top:20px;border:1.5px solid var(--or,#C79A3E);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--or,#C79A3E);
  transition:background .3s,color .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.fx27fin:hover .fx27finin em{background:var(--or,#C79A3E);color:#fff;transform:translateX(8px)}
@media (prefers-reduced-motion: no-preference){
  .fx27finin em{animation:fx27nudge 2.6s ease-in-out infinite}
  .fx27fin:hover .fx27finin em{animation:none}
  @keyframes fx27nudge{50%{transform:translateX(7px)}}
}
body.dark .fx27fin:hover{border-color:var(--champagne,#E9C979)}
/* 33f) carte du voyage : version orfevrerie (matiere, filet d or, respiration) */
.fx27fin{background:linear-gradient(170deg,#FFFFFF 0%,#FBFAF4 100%);border-color:#EFEDE2;padding:30px}
.fx27finin b{font-size:clamp(2.7rem,5vw,4.6rem)}
.fx27finin b::after{content:"";display:block;width:46px;height:1px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--or,#C79A3E),transparent)}
.fx27finin > span{margin-top:18px;font-size:.64rem;letter-spacing:.32em;line-height:2;color:#77837C}
.fx27finin em{width:48px;height:48px;margin-top:22px;border-width:1px;font-size:1.15rem}
.fx27fin:hover{border-color:#E4D9B8}
body.dark .fx27fin{background:linear-gradient(170deg,#173428 0%,#122A20 100%)}
body.dark .fx27finin > span{color:#B9CDBB}