/* ============================================================
   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}
  .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: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)}
  .valeurs-grille{grid-template-columns:1fr}
  .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)}