/* ============================================================
   HAUGUEL EXPERTISE IMMOBILIÈRE
   Identité dérivée du logo : deux pans coupés à 45° (or / noir),
   Futura Md BT (embarquée) + Palermo (embarquée, capitales espacées).
   Aucune police manuscrite. CSS transposable dans Elementor.
   ============================================================ */

@font-face{
  font-family:'Futura Md BT';
  src:url('../fonts/Futura_Medium_BT.ttf?v=2') format('truetype');
  font-weight:300 600;font-display:swap;
}
@font-face{
  font-family:'Palermo';
  src:url('../fonts/Palermo.ttf?v=2') format('truetype');
  font-weight:400;font-display:swap;
}

:root{
  --noir:      #1d1d1d;
  --noir-2:    #242423;   /* panneaux sur fond noir */
  --or:        #dcc330;
  --or-fonce:  #7a6a10;   /* or lisible sur fonds clairs (WCAG AA) */
  --ivoire:    #ffffff;   /* fond clair : blanc pur */
  --blanc:     #ffffff;
  --gris:      #6a685f;
  --gris-clair:#a8a69e;
  --ligne:     rgba(253,253,251,.1);

  --futura:'Futura Md BT','Jost',-apple-system,'Helvetica Neue',sans-serif;
  --palermo:'Palermo','Futura Md BT',sans-serif;

  --max:1200px;
  --pan:18px; /* profondeur du pan coupé, dérivé du logo */
}

/* Reset explicite — ne PAS coller la règle universelle dans Elementor */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,button,figure{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:var(--futura);font-weight:400;
  color:var(--noir);background:var(--noir);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 36px}

a:focus-visible,.btn:focus-visible,.burger:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.evitement{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--or);color:var(--noir);padding:12px 20px;
  font-size:13px;letter-spacing:.1em;
}
.evitement:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js .reveal,body.js .pan-anim{transition:none!important;opacity:1!important;transform:none!important}
}

/* ---------- Éléments communs ---------- */
/* Sur-titre : Palermo, capitales très espacées — le registre de la base du logo */
.sur{
  font-family:var(--palermo);font-size:13px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--or);
}
.sur.fonce{color:var(--or-fonce)}
.h2{
  font-family:var(--futura);font-weight:500;
  font-size:clamp(30px,3.6vw,46px);line-height:1.14;
  letter-spacing:.015em;color:var(--blanc);
}
.h2.noire{color:var(--noir)}
.mt16{margin-top:16px}

/* Boutons : pilule (coins 100 %) — Cadres : coins arrondis 20 px */
.btn{
  display:inline-block;font-family:var(--futura);font-weight:500;
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  padding:17px 38px;transition:background .3s,color .3s;
  border-radius:999px;
}
.btn-or{background:var(--or);color:var(--noir)}
.btn-or:hover{background:var(--blanc)}
.btn-blanc{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 1px rgba(253,253,251,.35)}
.btn-blanc:hover{box-shadow:inset 0 0 0 1px var(--or);color:var(--or)}
.btn-noir{background:var(--noir);color:var(--blanc)}
.btn-noir:hover{background:var(--or-fonce)}

/* Apparition au défilement (uniquement si le JS tourne) */
body.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
body.js .reveal.visible{opacity:1;transform:none}
body.js .reveal.d1{transition-delay:.1s}body.js .reveal.d2{transition-delay:.2s}
body.js .reveal.d3{transition-delay:.3s}body.js .reveal.d4{transition-delay:.4s}

/* ============================================================
   01 · EN-TÊTE  (Elementor : Theme Builder / header)
   ============================================================ */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:100;padding:22px 0;
  transition:background .35s,padding .35s;
}
.entete.compacte{background:rgba(29,29,29,.96);padding:12px 0;border-bottom:1px solid var(--ligne)}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:flex;align-items:center;gap:14px}
.logo svg{width:34px;height:auto;flex-shrink:0}
/* Les deux pans du logo s'écartent au défilement via l'attribut SVG transform (voir JS) */
.logo-txt{line-height:1.2}
.logo-txt b{
  display:block;font-family:var(--futura);font-weight:500;font-size:18px;
  letter-spacing:.26em;color:var(--blanc);
}
.logo-txt span{
  display:block;font-family:var(--palermo);font-size:8.5px;
  letter-spacing:.34em;color:var(--gris-clair);text-transform:uppercase;
}
.nav{display:flex;align-items:center;gap:32px}
.nav a{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-clair);padding:6px 0;position:relative;transition:color .3s;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--or);transition:width .3s}
.nav a:hover{color:var(--blanc)}
.nav a:hover::after{width:100%}
.nav .btn{padding:12px 22px;font-size:11px}
.nav .btn::after{display:none}
.burger{display:none;background:none;border:none;cursor:pointer;width:30px;height:22px;position:relative;z-index:210}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--or);transition:.3s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}

/* ============================================================
   02 · HÉROS  (Elementor : conteneur min-height 100vh, fond noir)
   Le logo lui-même, à l'échelle de l'écran, est la scène.
   ============================================================ */
.heros{
  min-height:100vh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;color:var(--blanc);
  padding:150px 0 120px;
}
.heros .wrap{display:flex;flex-direction:row;align-items:center;gap:70px;width:100%}
.col-marque{flex:0 0 30%;min-width:0}
.col-marque .marque{margin:0 auto}
.heros-col-txt{flex:1 1 0;min-width:0}
.heros h1{
  font-family:var(--futura);font-weight:500;
  font-size:clamp(40px,5.6vw,72px);line-height:1.06;
  letter-spacing:.12em;text-transform:uppercase;
}
.heros h1 em{font-style:normal;color:var(--or)}
.heros-fonction{
  margin-top:30px;display:flex;flex-direction:column;gap:5px;
  font-size:clamp(14px,1.4vw,17px);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris-clair);
}
.heros-fonction strong{color:var(--blanc);font-weight:500}
.devise{
  margin-top:40px;max-width:520px;
  font-size:clamp(17px,1.8vw,21px);line-height:1.75;color:var(--gris-clair);
}
.devise b{font-weight:500;color:var(--or)}
.heros-cta{margin-top:46px;display:flex;gap:18px;flex-wrap:wrap}

/* La marque, agrandie : les deux pans du logo se rejoignent au chargement */
.marque{position:relative;width:min(300px,85%);margin:0;aspect-ratio:85/113}
.marque svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.js .pan-anim{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s,opacity .9s ease .2s}
body.js .pan-or{transform:translate(-46px,46px);opacity:0}
body.js .pan-noir{transform:translate(46px,-46px);opacity:0}
body.js .visible .pan-or,body.js .visible .pan-noir{transform:translate(0,0);opacity:1}
.defile{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-family:var(--palermo);font-size:10px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--gris);
}

/* ============================================================
   03 · VALEURS  (Elementor : section ivoire, grille 4 cartes)
   ============================================================ */
.valeurs{background:var(--ivoire);padding:110px 0}
.valeurs-tete{max-width:660px;margin-bottom:64px}
.valeurs-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.valeur{
  background:var(--blanc);padding:44px 32px 40px;
  box-shadow:inset 0 0 0 1px #e7e5dd;
  border-radius:20px;
  transition:transform .35s,box-shadow .35s;
}
.valeur:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--or)}
.valeur h3{
  font-family:var(--futura);font-weight:500;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--noir);
  padding-bottom:16px;margin-bottom:16px;position:relative;
}
.valeur h3::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;background:var(--or)}
.valeur p{font-size:14.5px;color:var(--gris)}

/* ============================================================
   04 · LE CABINET  (Elementor : section blanche, 2 colonnes)
   ============================================================ */
.cabinet{background:var(--blanc);padding:120px 0}
.cabinet .wrap{display:flex;flex-direction:row;align-items:center;gap:80px}
.col-cab-txt{flex:1.05 1 0;min-width:0}
.col-cadre{flex:.95 1 0;min-width:0}
.cabinet-txt p{margin-bottom:18px;color:#3b3b37;font-size:16.5px;max-width:56ch}
.cabinet-txt .btn{margin-top:20px}
.cabinet-cadre{
  background:var(--noir);color:var(--blanc);padding:64px 54px;
  border-radius:20px;
}
.cabinet-cadre .citation{
  font-family:var(--futura);font-weight:400;
  font-size:clamp(19px,2vw,23px);line-height:1.6;
}
.cabinet-cadre .citation b{font-weight:500;color:var(--or)}
.cabinet-cadre .attrib{
  margin-top:26px;font-family:var(--palermo);font-size:11px;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gris-clair);
}

/* ============================================================
   05 · EXPERTISES  (Elementor : section noire, grille 2×2)
   ============================================================ */
.expertises{background:var(--noir);padding:120px 0}
.expertises-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.expertises-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.exp-carte{
  display:block;background:var(--noir-2);padding:44px 42px;
  border-radius:20px;overflow:hidden;
  transition:background .35s,transform .35s;position:relative;
}
.exp-carte::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .4s;
}
.exp-carte:hover{background:#2a2a28;transform:translateY(-4px)}
.exp-carte:hover::before{transform:scaleX(1)}
.exp-carte .question{
  display:block;font-family:var(--palermo);font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--or);margin-bottom:18px;
}
.exp-carte h3{
  font-family:var(--futura);font-weight:500;font-size:21px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blanc);margin-bottom:14px;
}
.exp-carte p{font-size:14.5px;color:var(--gris-clair);margin-bottom:20px}
.exp-carte .lien{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--or)}
.exp-carte .lien::after{content:"\00a0\2192"}

/* ============================================================
   06 · VOUS ÊTES…  (Elementor : section ivoire, liste)
   ============================================================ */
.profils{background:var(--ivoire);padding:120px 0}
.profils-tete{max-width:660px;margin-bottom:56px}
.profils-liste{border-top:1px solid #dbd8ce}
.profil{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:28px 16px;border-bottom:1px solid #dbd8ce;
  transition:background .3s,padding-left .3s;
}
.profil:hover{background:#f7f6f2;padding-left:28px}
.profil h3{
  font-family:var(--futura);font-weight:500;font-size:18px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--noir);
}
.profil p{font-size:14px;color:var(--gris);flex:1;margin-left:36px}
.profil .fleche{color:var(--or-fonce);font-size:20px;flex-shrink:0;transition:transform .3s}
.profil:hover .fleche{transform:translateX(8px)}

/* ============================================================
   07 · SIGNATURE + CTA  (Elementor : section noire centrée)
   ============================================================ */
.bandeau{background:var(--noir);color:var(--blanc);padding:130px 0;text-align:center}
.bandeau .marque-mini{width:52px;margin:0 auto 40px}
.bandeau .phrase{
  font-family:var(--futura);font-weight:500;max-width:820px;margin:0 auto;
  font-size:clamp(24px,3.2vw,40px);line-height:1.35;letter-spacing:.02em;
}
.bandeau .phrase b{font-weight:500;color:var(--or)}
.bandeau .sous{
  margin:34px auto 44px;font-family:var(--palermo);font-size:12px;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gris-clair);
}

/* ============================================================
   08 · PIED DE PAGE  (Elementor : Theme Builder / footer)
   ============================================================ */
.pied{background:#171716;color:var(--gris-clair);padding:70px 0 30px;border-top:1px solid var(--ligne)}
.pied .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px}
.pied p{font-size:13.5px;margin-top:16px;max-width:320px}
.pied h4{
  font-family:var(--palermo);font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--or);margin-bottom:20px;
}
.pied li{margin-bottom:10px}
.pied li a{font-size:13.5px;transition:color .3s}
.pied li a:hover{color:var(--or)}
.pied-bas{margin-top:56px;padding-top:24px;border-top:1px solid var(--ligne);font-size:11.5px}
.pied-bas .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1060px){
  .heros .wrap{flex-direction:column;gap:60px}
  .heros .col-marque{order:2;flex:none;width:100%}
  .marque{width:min(200px,55%);margin:0 auto}
  .valeurs-grille{grid-template-columns:repeat(2,1fr)}
  .expertises-grille{grid-template-columns:repeat(2,1fr)}
  .cabinet .wrap{flex-direction:column;align-items:stretch;gap:54px}
  .col-cab-txt,.col-cadre{flex:none;width:100%}
}
@media (max-width:820px){
  .nav{
    position:fixed;inset:0;background:rgba(29,29,29,.98);
    flex-direction:column;justify-content:center;gap:30px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s,visibility .35s;
  }
  .nav.ouverte{opacity:1;visibility:visible;pointer-events:auto}
  .nav a{font-size:15px}
  .burger{display:block}
  .burger.actif span:nth-child(1){top:10px;transform:rotate(45deg)}
  .burger.actif span:nth-child(2){opacity:0}
  .burger.actif span:nth-child(3){top:10px;transform:rotate(-45deg)}
  .profil{flex-wrap:wrap}
  .profil p{margin-left:0;flex-basis:100%}
  .pied .wrap{grid-template-columns:1fr;gap:40px}
}

/* ============================================================
   ADAPTATIONS ELEMENTOR — conteneurs natifs (seed/accueil.json)
   ============================================================ */
.valeurs-grille>.elementor-element,.expertises-grille>.elementor-element{min-width:0;height:100%}
.valeurs-grille .valeur,.expertises-grille .exp-carte{height:100%}
.slot-entete.e-con,.slot-pied.e-con,
.heros.e-con,.valeurs.e-con,.cabinet.e-con,.expertises.e-con,.profils.e-con,.bandeau.e-con,
.heros .e-con,.valeurs .e-con,.cabinet .e-con,.expertises .e-con,.profils .e-con,.bandeau .e-con{
  --padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0;
  --row-gap:0;--column-gap:0;--gap:0;
}
/* Le wrapper Elementor du « Défiler » sert d'ancre pleine largeur en bas du héros */
.elementor-widget.defile-slot{position:absolute;bottom:0;left:0;width:100%;height:0;overflow:visible;flex:none}
/* Le style de thème Elementor colore les titres avec la couleur globale « primary » (noir) :
   on ré-impose le blanc du héros (les autres titres ont déjà une couleur explicite par classe). */
.heros h1{color:var(--blanc)}
/* Éditeur Elementor : contenus toujours visibles — les animations ne jouent
   que sur le site publié (le JS s'auto-désactive aussi en mode édition). */
.elementor-editor-active .reveal,.elementor-editor-active .pan-anim{opacity:1!important;transform:none!important;transition:none!important}

/* ============================================================
   EN-TÊTE & PIED NATIFS (Theme Builder — widgets Elementor)
   ============================================================ */
.entete .wrap{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:28px}
.entete .wrap>.e-con{width:auto;flex:0 0 auto;min-width:0}
.entete-col-nav{margin-left:auto}
/* — Variante FOND OR de l'en-tête — */
.entete{background:var(--or)}
.entete.compacte{background:var(--or);border-bottom:1px solid rgba(29,29,29,.12);box-shadow:0 2px 16px rgba(0,0,0,.18)}
.entete .evitement{background:var(--noir);color:var(--or)}
.entete .logo-txt b{color:var(--noir)}
.entete .logo-txt span{color:rgba(29,29,29,.6)}
/* Widget Nav Menu (Pro) au style maquette, sur or */
.entete .elementor-nav-menu--main ul.elementor-nav-menu{display:flex;align-items:center;gap:32px}
.entete .elementor-nav-menu--main .elementor-item{font-family:var(--futura);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(29,29,29,.72);padding:6px 0;margin:0;position:relative;transition:color .3s}
.entete .elementor-nav-menu--main .elementor-item::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--noir);transition:width .3s}
.entete .elementor-nav-menu--main .elementor-item:hover{color:var(--noir)}
.entete .elementor-nav-menu--main .elementor-item:hover::after{width:100%}
.entete .elementor-menu-toggle{color:var(--noir)}
.entete-nav .elementor-nav-menu--dropdown{background:var(--or)}
.entete-nav .elementor-nav-menu--dropdown .elementor-item{color:rgba(29,29,29,.75);font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.entete-nav .elementor-nav-menu--dropdown .elementor-item:hover{color:var(--noir)}
/* Bouton CTA : pilule noire sur fond or */
.entete-cta .elementor-button{display:inline-block;font-family:var(--futura);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:12px 22px;border-radius:999px;background:var(--noir);color:var(--blanc);transition:background .3s,color .3s}
.entete-cta .elementor-button:hover,.entete-cta .elementor-button:focus{background:var(--blanc);color:var(--noir)}
@media (max-width:820px){.entete-col-cta{display:none}}
/* Pied de page natif */
.pied .wrap>.e-con{min-width:0}
.pied .elementor-icon-list-items{list-style:none;margin:0;padding:0}
.pied .elementor-icon-list-text{font-size:13.5px;color:var(--gris-clair);transition:color .3s}
.pied .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--or)}
.pied-bas .wrap{flex-direction:row}
.pied-bas .wrap .elementor-widget{width:auto}

/* ============================================================
   HÉROS VIDÉO (section client 4478eee)
   ============================================================ */
/* Logo copié (widget 1cdad9a) : align-self:center effondrait la largeur
   en fit-content -> la figure en % tombait à 0px. Largeur fixe + centrage. */
.elementor-element-1cdad9a{width:auto;margin-top:min(60px,14vw);margin-bottom:min(110px,24vw)}
.elementor-element-1cdad9a .marque{width:min(220px,50vw);margin:0 auto}
/* Mobile : logo plus compact, marges resserrées (le bloc sticky doit tenir
   dans ~100vh avec les 4 blocs de texte), débordement des pans réduit. */
@media (max-width:820px){
  .elementor-element-1cdad9a .marque{width:min(132px,34vw)}
  .elementor-element-1cdad9a{margin-top:min(26px,7vw);margin-bottom:min(56px,15vw)}
  .entete .wrap{flex-direction:row;align-items:center}
  .entete .wrap>.e-con{width:auto;flex:0 0 auto}
}

/* Montée fluide liée au scroll : chaque bloc part du bas de l'écran et sa
   progression suit le défilement (animation-timeline). La classe utilitaire
   `monte-au-scroll` est posable sur n'importe quel widget (Avancé > Classes CSS).
   Ces règles prennent le pas sur les Motion Effects / animations d'entrée
   Elementor posés sur les mêmes widgets. */
@keyframes hg-monte{
  from{opacity:0;transform:translateY(42vh)}
  to{opacity:1;transform:none}
}
/* Textes du héros vidéo : pilotés par GSAP (scrub lié à la section sticky).
   On neutralise les animations Elementor (fadeIn/zoomIn) qui écraseraient
   les styles inline de GSAP. */
.elementor-element-e9bd5b6,
.elementor-element-2784254,
.elementor-element-20ba764,
.elementor-element-68b6ad4{animation:none!important}
.elementor-element-e9bd5b6.elementor-invisible,
.elementor-element-2784254.elementor-invisible,
.elementor-element-20ba764.elementor-invisible,
.elementor-element-68b6ad4.elementor-invisible{visibility:visible!important}
/* Classe générique (widgets HORS zone sticky) : montée liée au scroll. */
@supports (animation-timeline: view()) {
  .monte-au-scroll{
    animation-name:hg-monte!important;
    animation-duration:auto!important;
    animation-timing-function:linear!important;
    animation-fill-mode:both!important;
    animation-delay:0s!important;
    animation-timeline:view()!important;
    animation-range:entry 0% cover 42%!important;
  }
  .monte-au-scroll.elementor-invisible{visibility:visible!important}
}
@media (prefers-reduced-motion:reduce){
  .monte-au-scroll{animation:none!important}
}

/* ============================================================
   CARTES EXPERTISES — survol : l'or BALAIE la carte de gauche à
   droite (l'ancienne barre jaune devient une couche pleine hauteur),
   textes en noir. Le contenu passe au-dessus de la couche.
   ============================================================ */
.exp-carte::before{left:0;top:0;width:100%;height:100%;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:0}
.exp-carte>*{position:relative;z-index:1}
.exp-carte .question,.exp-carte h3,.exp-carte p,.exp-carte .lien{transition:color .3s .1s}
.exp-carte:hover{background:var(--noir-2);transform:translateY(-4px)}
.exp-carte:hover::before{transform:scaleX(1)}
.exp-carte:hover .question{color:rgba(29,29,29,.65)}
.exp-carte:hover h3{color:var(--noir)}
.exp-carte:hover p{color:rgba(29,29,29,.8)}
.exp-carte:hover .lien{color:var(--noir)}

/* ============================================================
   CARTES VALEURS — survol : balayage gauche -> droite,
   alterné noir / or (1re noir, 2e or, 3e noir, 4e or)
   ============================================================ */
.valeur{position:relative;overflow:hidden}
.valeur::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.valeur>*{position:relative;z-index:1}
.valeur h3,.valeur p{transition:color .3s .1s}
.valeur h3::after{transition:background .3s .1s}
.valeur:hover::before{transform:scaleX(1)}
/* cartes impaires : révélation NOIRE */
.valeurs-grille>.elementor-element:nth-child(odd) .valeur::before{background:var(--noir)}
.valeurs-grille>.elementor-element:nth-child(odd) .valeur:hover h3{color:var(--blanc)}
.valeurs-grille>.elementor-element:nth-child(odd) .valeur:hover p{color:var(--gris-clair)}
/* cartes paires : révélation OR */
.valeurs-grille>.elementor-element:nth-child(even) .valeur::before{background:var(--or)}
.valeurs-grille>.elementor-element:nth-child(even) .valeur:hover h3{color:var(--noir)}
.valeurs-grille>.elementor-element:nth-child(even) .valeur:hover p{color:rgba(29,29,29,.8)}
.valeurs-grille>.elementor-element:nth-child(even) .valeur:hover h3::after{background:var(--noir)}

/* ============================================================
   SURVOLS — version adoucie : balayages plus lents, courbe
   très progressive, textes et élévations synchronisés
   ============================================================ */
.exp-carte::before,.valeur::before{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.exp-carte .question,.exp-carte h3,.exp-carte p,.exp-carte .lien,
.valeur h3,.valeur p{transition:color .55s ease .15s}
.valeur h3::after{transition:background .55s ease .15s}
.exp-carte{transition:background .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.valeur{transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s ease}

/* Sections sombres : couleurs explicites (la couleur globale « Texte » du kit
   — noir — s'applique aux widgets Éditeur de texte et bat l'héritage). */
.bandeau .phrase{color:var(--blanc)}
.bandeau .sous{color:var(--gris-clair)}
.cabinet-cadre .citation{color:var(--blanc)}
.cabinet-cadre .attrib{color:var(--gris-clair)}

/* ============================================================
   SECTION VIDÉO EXPERTISES (0c57e11, 300vh) — le bloc de contenu
   (5d1c0c5, 100vh : vidéo + titre + grille) reste ÉPINGLÉ à l'écran
   pendant toute la traversée ; le conteneur de contenu retrouve la
   largeur du site (équivalent du « wrap » supprimé).
   ============================================================ */
.elementor-element-5d1c0c5{position:sticky;top:0;height:100vh;overflow:hidden}
.elementor-element-3f89db4{width:100%;max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:36px;padding-right:36px}

/* Section vidéo expertises : la vidéo devient une COUCHE DE FOND du bloc
   épinglé — plein cadre, calée en haut (plus de centrage vertical) — et le
   conteneur titre + cartes passe au-dessus, sans couleur de fond. */
.elementor-element-5dbb696{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0}
.elementor-element-5dbb696 .elementor-widget-container,
.elementor-element-5dbb696 .elementor-wrapper{height:100%}
.elementor-element-5dbb696 video{width:100%;height:100%;min-height:0;object-fit:cover;object-position:top center}
.elementor-element-3f89db4{position:relative;z-index:1;background:transparent!important}
.elementor-element-3f89db4>.e-con-inner{background:transparent!important}

/* Le bloc épinglé démarre TOUT EN HAUT de la section 300vh (l'alignement
   « centré » du conteneur le poussait un écran plus bas -> grand vide
   avant l'enclenchement de l'épinglage). */
.elementor-element-0c57e11{justify-content:flex-start!important;align-content:flex-start!important}
.elementor-element-5d1c0c5{margin-top:0!important}

/* Vidéo expertises : PLEIN CADRE à toutes les tailles (comme le héros),
   centrée horizontalement — le recadrage mange les deux côtés équitablement,
   le sujet centré reste toujours visible. */
.elementor-element-5dbb696 video{object-position:top center}

/* ============================================================
   GABARIT PAGES INTÉRIEURES (seed v1.3.0)
   ============================================================ */
.page-hero{background:var(--noir);padding:180px 0 70px}
.page-hero .elementor-heading-title{font-family:var(--futura);font-weight:500;font-size:clamp(32px,4.4vw,56px);line-height:1.12;letter-spacing:.1em;text-transform:uppercase;color:var(--blanc)}
.page-hero .chapeau{margin-top:16px;font-size:clamp(16px,1.6vw,20px);line-height:1.7;color:var(--gris-clair);max-width:640px}
.page-hero .chapeau b{color:var(--or);font-weight:500}
.page-corps{background:var(--blanc);padding:80px 0 90px}
.page-corps .elementor-widget-heading .elementor-heading-title{font-family:var(--futura);font-weight:500;color:var(--noir);letter-spacing:.04em}
.page-corps h2.elementor-heading-title{font-size:clamp(24px,2.6vw,34px);margin:34px 0 6px}
.page-corps h3.elementor-heading-title{font-size:19px;letter-spacing:.12em;text-transform:uppercase;margin:26px 0 4px}
.page-corps p{color:#3b3b37;font-size:16.5px;max-width:72ch}
.page-corps ul{margin:8px 0;padding-left:22px;color:#3b3b37;font-size:16px;max-width:72ch}
.page-corps li{margin:5px 0}
.page-corps ul.liste-coche{list-style:none;padding-left:0}
.page-corps .liste-coche li{position:relative;padding-left:28px}
.page-corps .liste-coche li::before{content:"✓";position:absolute;left:0;color:var(--or-fonce);font-weight:700}
.page-corps em{color:#8a8578}
.page-corps .cabinet-cadre{margin-top:44px}
.page-corps .valeurs-grille{margin:26px 0 10px}
.page-corps .valeur{box-shadow:inset 0 0 0 1px #e7e5dd}
.page-cta{margin-top:34px}
/* Formulaire de contact (widget Formulaire Pro) */
.form-hauguel .elementor-field-group label{font-family:var(--futura);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--noir)}
.form-hauguel input,.form-hauguel select,.form-hauguel textarea{border:1px solid #d8d5ca;border-radius:10px;background:#fbfaf6;padding:12px 14px}
.form-hauguel input:focus,.form-hauguel select:focus,.form-hauguel textarea:focus{border-color:var(--or-fonce);outline:none}
.form-hauguel .elementor-button{font-family:var(--futura);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:16px 34px;border-radius:999px;background:var(--noir);color:var(--blanc);transition:background .4s}
.form-hauguel .elementor-button:hover{background:var(--or-fonce)}
/* La grille expertises de la page mère : cartes non cliquables mais mêmes survols */
.page-hero+.expertises{padding:90px 0}

/* Bandeaux de titre des pages intérieures : FOND OR (textes noirs, accent blanc) */
.page-hero{background:var(--or)}
.page-hero .sur{color:rgba(29,29,29,.6)}
.page-hero .elementor-heading-title{color:var(--noir)}
.page-hero .chapeau{color:rgba(29,29,29,.78)}
.page-hero .chapeau b{color:var(--blanc)}

/* Listes simples des pages intérieures : puces réactivées (le reset maquette
   les supprimait globalement), marqueur or foncé charte. */
.page-corps ul:not(.liste-coche){list-style:disc;padding-left:26px}
.page-corps ul:not(.liste-coche) li::marker{color:var(--or-fonce)}

/* ============================================================
   MÉGA-MENU « Vous êtes… » (JetMenu, gabarit seed/mega-vous-etes.json)
   ============================================================ */
.mega-profils{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:var(--noir-2);padding:20px;border-radius:0 0 14px 14px;min-width:600px}
.mega-profils .elementor-widget{min-width:0}
.mega-lien{display:block;padding:12px 14px;border-radius:10px;transition:background .35s}
.mega-lien b{display:block;font-family:var(--futura);font-weight:500;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blanc);transition:color .35s}
.mega-lien span{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--gris-clair);transition:color .35s}
.mega-lien:hover{background:var(--or)}
.mega-lien:hover b{color:var(--noir)}
.mega-lien:hover span{color:rgba(29,29,29,.75)}
@media (max-width:820px){.mega-profils{grid-template-columns:1fr;min-width:0}}

/* Widget Mega Menu JetMenu dans l'en-tête : mêmes styles que l'ancien menu (sur or) */
.entete .jet-mega-menu-list{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.entete .jet-mega-menu-item__link--top-level{padding:6px 0}
.entete .jet-mega-menu-item__label{font-family:var(--futura);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(29,29,29,.72);transition:color .3s}
.entete .jet-mega-menu-item__inner{position:relative}
.entete .jet-mega-menu-item__inner::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--noir);transition:width .3s}
.entete .jet-mega-menu-item:hover .jet-mega-menu-item__label{color:var(--noir)}
.entete .jet-mega-menu-item:hover .jet-mega-menu-item__inner::after{width:100%}
.entete .jet-mega-menu-item__dropdown{color:var(--noir)}
/* Panneau méga : coller sous l'en-tête, sans fond parasite (le fond vient de .mega-profils) */
.entete .jet-mega-menu-mega-container{background:transparent;box-shadow:0 18px 40px rgba(0,0,0,.25)}

/* Menu mobile JetMenu (tablette/téléphone) : bascule visible sur l'or */
.entete-nav-mobile{display:flex;align-items:center}
.entete-nav-mobile .jet-mobile-menu__toggle,
.entete-nav-mobile [class*="toggle"]{color:var(--noir)}
.entete-nav-mobile svg{fill:currentColor}

/* Panneau méga plein écran : suppression du cadre blanc interne de JetMenu
   (fond blanc + padding par défaut de __inner). */
.jet-mega-menu-mega-container__inner{background:transparent!important;padding:0!important;border:none!important}

/* ============================================================
   TEXTES DE CONTENU : pleine largeur du bloc et JUSTIFIÉS
   (équilibre visuel). Exceptions : listes à puces, cartes,
   encadrés citation — alignés à gauche, plus lisibles courts.
   ============================================================ */
.page-corps p{max-width:none;text-align:justify;hyphens:none;-webkit-hyphens:none}
.page-corps ul{max-width:none;text-align:left}
.page-corps .cabinet-cadre .citation,.page-corps .cabinet-cadre .attrib{text-align:left;hyphens:none}
.page-corps .page-cta{text-align:left}
.page-corps em{hyphens:none}
.page-hero .chapeau{max-width:none}
/* Accueil et page Cabinet : colonne de texte du bloc cabinet */
.cabinet-txt p{max-width:none;text-align:justify;hyphens:none;-webkit-hyphens:none}
/* Jamais de justification dans les éléments courts et étroits */
.valeur p,.exp-carte p,.profil p,.mega-lien span,.pied p{text-align:left}

/* Césure interdite sur tout le site (règle charte) */
body,body *{hyphens:none!important;-webkit-hyphens:none!important}

/* Cartes missions (page Nos expertises) : lien discret dans la carte .valeur */
.valeur .v-lien{margin-top:16px}
.valeur .v-lien a{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--or-fonce);text-decoration:none;transition:color .3s .1s}
.valeur .v-lien a::after{content:"\00a0\2192"}
.valeurs-grille>.elementor-element:nth-child(odd) .valeur:hover .v-lien a{color:var(--or)}
.valeurs-grille>.elementor-element:nth-child(even) .valeur:hover .v-lien a{color:var(--noir)}
.page-corps .valeurs-grille{margin:18px 0 34px}

/* Méga-menu « Nos expertises » : variante compacte 4 colonnes groupées */
.mega-missions{grid-template-columns:repeat(4,auto);gap:18px;align-items:start;min-width:860px}
.mega-groupe{font-family:var(--futura);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);margin:0 0 6px;padding:12px 14px 0}
.mega-missions .mega-lien{padding:7px 14px}
.mega-missions .mega-lien b{font-size:12.5px}
@media (max-width:820px){.mega-missions{grid-template-columns:1fr;min-width:0}}

/* Formulaire contact : choix Particulier / Professionnel côte à côte */
.form-hauguel .elementor-field-subgroup{display:flex;gap:26px;align-items:center}
.form-hauguel .elementor-field-subgroup .elementor-field-option{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;width:auto}
.form-hauguel .elementor-field-subgroup label{font-size:14px;text-transform:none;letter-spacing:0}

/* Logo image de l'en-tête (remplace le SVG) */
.entete .logo img{height:52px;width:auto;display:block}
@media (max-width:820px){.entete .logo img{height:42px}}

/* ============================================================
   CALAGE RESPONSIVE (audit 2026-07-25)
   ============================================================ */
/* Les panneaux méga fermés débordaient de ~25px à droite sur bureau :
   on borne leur largeur. ATTENTION : jamais d'overflow-x sur html ou body,
   la propagation vers body casse les sections sticky (héros vidéo). */
.jet-mega-menu-mega-container{max-width:100vw}
/* Cartes : 1 colonne seulement sous 640px (2 colonnes en tablette) */
@media (max-width:640px){
  .valeurs-grille{grid-template-columns:1fr}
  .expertises-grille{grid-template-columns:1fr}
}
/* Cible tactile du burger : 44px minimum */
.jet-mobile-menu__toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}

/* Bouton « Appeler » du pied de page : pilule charte */
.elementor-element-ftappel1 .elementor-button,.elementor-element-ctappel1 .elementor-button{border-radius:999px;padding:14px 32px}
.pied-adresse{margin-top:18px;font-size:14px;line-height:1.6;color:var(--gris-clair)}