/* =========================================================
   LPE STRATEGIE — feuille de style principale
   ========================================================= */

:root{
  /* Bleus */
  --navy-950:#04172b;
  --navy-900:#061d37;
  --navy-850:#082746;
  --navy-800:#0b2f50;
  --navy-700:#123a5e;
  --navy-ink:#16233f;      /* titres foncés sur fond clair */
  --blue-accent:#1f6fd6;   /* "expertises" / mots-clés */
  --blue-accent-dark:#1b3a8a;

  /* Ors */
  --gold-600:#d9a441;
  --gold-500:#e5b354;
  --gold-400:#f1ca73;
  --gold-300:#f8dd9a;

  /* Neutres */
  --white:#f7f9fc;
  --muted:#d8e0e8;
  --paper:#eef3f8;
  --ink:#18314a;

  /* Layout */
  --menu-h:98px;
  --header-h:134px;
  --radius:26px;
  --maxw:1200px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;            /* iOS : ne crée pas de conteneur de défilement parasite */
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

/* Boutons "pilule" or */
.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 30px;
  height:60px;
  border:0;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  color:#0a1c2e;
  font-family:Poppins, Inter, sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow:0 12px 30px rgba(229,179,84,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-gold:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 16px 38px rgba(229,179,84,.36), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold svg{ width:22px; height:22px; stroke:#0a1c2e; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.btn-gold .arrow{ font-size:22px; font-weight:400; line-height:1; }

/* =========================================================
   MENU BANNIÈRE (composant fixe et indépendant)
   — sur desktop : bannière flottante à bords arrondis
   — sur mobile  : barre + menu déroulant classique
   ========================================================= */
.lpe-header-shell{
  position:fixed;
  inset:0 0 auto 0;
  z-index:9999;
  padding:18px 24px;
  background:transparent;            /* pas de fond bleu marine */
  pointer-events:none;               /* seuls les éléments internes captent les clics */
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.lpe-header-shell > *{ pointer-events:auto; }

/* Masqué par défaut : réapparaît au scroll vers le haut ou souris en haut de page */
.lpe-header-shell.is-hidden{
  transform:translateY(-125%);
  opacity:0;
}
.lpe-header-shell.is-hidden > *{ pointer-events:none; }

/* ---- Bannière desktop ---- */
.lpe-nav{
  position:relative;
  max-width:1500px;
  height:var(--menu-h);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(420px,1fr) auto;
  align-items:center;
  column-gap:28px;
  padding:0 26px;
  border:1px solid rgba(248,221,154,.45);
  border-radius:var(--radius);
  background:
    radial-gradient(700px 180px at 88% 120%, rgba(229,179,84,.12), transparent 58%),
    linear-gradient(180deg, rgba(8,39,70,.97), rgba(4,25,46,.97));
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

.lpe-logo-link{ display:flex; align-items:center; height:100%; text-decoration:none; }
.lpe-logo{ width:88px; height:auto; object-fit:contain; display:block; }

.lpe-links{ min-width:0; display:flex; align-items:center; justify-content:center; gap:48px; }
.lpe-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--white);
  text-decoration:none;
  white-space:nowrap;
  font-size:18px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.01em;
  transition:color .2s ease, transform .2s ease;
}
.lpe-link:hover,
.lpe-link[aria-current="page"]{ color:var(--gold-400); }
.lpe-link:hover{ transform:translateY(-1px); }
.lpe-icon{
  width:28px; height:28px; flex:0 0 auto;
  stroke:var(--gold-500); stroke-width:1.9; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

.lpe-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  color:#0a1c2e;
  font-family:Poppins, Inter, sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
  white-space:nowrap;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow:0 10px 28px rgba(229,179,84,.25), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.lpe-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 14px 34px rgba(229,179,84,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.lpe-cta .lpe-icon{ width:22px; height:22px; stroke:#0a1c2e; }
.lpe-arrow{ font-size:22px; font-weight:400; line-height:1; }

/* ---- Sous-menu déroulant "Nos expertises" (desktop) ---- */
.lpe-navitem{ position:relative; display:flex; }
.lpe-navitem--sub > .lpe-link{ cursor:pointer; }
.lpe-caret{
  width:15px; height:15px; margin-left:-4px;
  stroke:var(--gold-400); stroke-width:2.4; fill:none;
  transition:transform .2s ease;
}
.lpe-navitem--sub:hover .lpe-caret,
.lpe-navitem--sub:focus-within .lpe-caret,
.lpe-navitem--sub.is-open .lpe-caret{ transform:rotate(180deg); }

.lpe-submenu{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:236px;
  padding:8px;
  display:flex; flex-direction:column; gap:2px;
  border:1px solid rgba(248,221,154,.4);
  border-radius:16px;
  background:linear-gradient(180deg, #08284a, #041a30);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:5;
}
.lpe-submenu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.lpe-navitem--sub:hover .lpe-submenu,
.lpe-navitem--sub:focus-within .lpe-submenu,
.lpe-navitem--sub.is-open .lpe-submenu{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(10px);
}
.lpe-submenu a{
  padding:12px 14px;
  border-radius:10px;
  color:var(--white);
  text-decoration:none;
  font-size:15.5px; font-weight:500;
  white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.lpe-submenu a:hover,
.lpe-submenu a[aria-current="page"]{ color:var(--gold-400); background:rgba(255,255,255,.05); }

/* ---- Barre + menu mobile (masqués sur desktop) ---- */
.lpe-mobile-bar{ display:none; }
.lpe-mobile-menu{ display:none; }

@media (max-width:1300px){
  .lpe-nav{ grid-template-columns:auto minmax(360px,1fr) auto; column-gap:20px; }
  .lpe-links{ gap:30px; }
  .lpe-link{ font-size:16px; gap:10px; }
  .lpe-icon{ width:26px; height:26px; }
  .lpe-cta{ height:48px; font-size:14px; padding:0 18px; }
}

@media (max-width:1040px){
  :root{ --menu-h:70px; --header-h:104px; }
  .lpe-header-shell{ padding:12px 14px; }

  .lpe-nav{ display:none; }

  .lpe-mobile-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:640px;
    margin:0 auto;
    height:var(--menu-h);
    padding:0 14px 0 18px;
    border:1px solid rgba(248,221,154,.45);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(8,39,70,.98), rgba(4,25,46,.98));
    box-shadow:0 14px 40px rgba(0,0,0,.3);
  }
  .lpe-mobile-bar .lpe-logo{ width:78px; }

  .lpe-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px; height:44px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }
  .lpe-burger span{
    display:block;
    height:2px;
    width:24px;
    margin:0 auto;
    border-radius:2px;
    background:var(--gold-400);
    transition:transform .25s ease, opacity .2s ease;
  }
  .lpe-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .lpe-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .lpe-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .lpe-mobile-menu{
    display:block;
    max-width:640px;
    margin:10px auto 0;
    padding:8px;
    border:1px solid rgba(248,221,154,.4);
    border-radius:18px;
    background:linear-gradient(180deg, #08284a, #041a30);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    overflow:hidden;
    transform-origin:top;
  }
  .lpe-mobile-menu[hidden]{ display:none; }
  .lpe-mobile-menu a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 16px;
    color:var(--white);
    text-decoration:none;
    font-size:17px;
    font-weight:500;
    border-radius:12px;
  }
  .lpe-mobile-menu a + a{ border-top:1px solid rgba(255,255,255,.06); }
  .lpe-mobile-menu a[aria-current="page"]{ color:var(--gold-400); }
  .lpe-mobile-menu a .lpe-icon{ width:24px; height:24px; }
  .lpe-mobile-menu .lpe-sublink{ padding:13px 16px 13px 54px; font-size:15px; color:rgba(247,249,252,.82); }
  .lpe-mobile-menu .lpe-sublink span::before{ content:"–"; margin-right:10px; color:var(--gold-500); }
  .lpe-mobile-cta{
    margin-top:6px;
    justify-content:center;
    color:#0a1c2e !important;
    font-family:Poppins, Inter, sans-serif;
    font-weight:700;
    background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  }
  .lpe-mobile-cta .lpe-icon{ stroke:#0a1c2e; }
}

/* =========================================================
   SECTIONS génériques
   ========================================================= */
.section{ position:relative; overflow:hidden; }
.section-inner{ position:relative; z-index:2; }

/* Décale l'ancre sous le header fixe */
.section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

.eyebrow{
  font-size:14px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(247,249,252,.92);
}

/* =========================================================
   ÉCRAN 1 — Accueil / Hero
   ========================================================= */
.hero{
  min-height:100svh;
  display:flex;
  align-items:stretch;
  padding:calc(var(--header-h) + 18px) 0 46px;
  color:var(--white);
  background:
    linear-gradient(90deg, rgba(4,20,40,.92) 0%, rgba(4,20,40,.72) 34%, rgba(4,20,40,.28) 58%, rgba(4,20,40,.05) 78%),
    var(--hero1-bg) center right / cover no-repeat;
}
:root{ --hero1-bg:url("../img/hero1-bg-desktop.jpg"); }

.hero .container{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.hero-eyebrow{ margin:0 0 22px; }

.hero-title{
  margin:0 0 26px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(34px, 4.1vw, 56px);
  line-height:1.12;
  letter-spacing:-.005em;
}
.hero-title .gold{ color:var(--gold-400); display:block; }
.hero-title .light{ color:var(--white); display:block; }
@media (min-width:1081px){
  .hero-title .gold, .hero-title .light{ white-space:nowrap; }
}

.hero-sub{
  margin:0 0 38px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:6px;
  font-size:clamp(15px, 1.6vw, 20px);
  font-weight:400;
  color:rgba(247,249,252,.94);
}
.hero-sub > span{ display:inline-flex; }
.hero-sub > span + span::before{ content:"•"; margin:0 11px; color:var(--gold-400); font-weight:700; }
.hero-sub .dot{ color:var(--gold-400); margin:0 12px; font-weight:700; }

.hero-words{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.hero-words li{
  font-size:clamp(15px, 1.35vw, 19px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(247,249,252,.96);
}

.hero-baseline{
  position:absolute;
  left:32px;
  bottom:8px;
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:rgba(247,249,252,.9);
}

@media (max-width:1080px){
  .hero{
    min-height:100svh;
    align-items:flex-start;
    background:
      linear-gradient(180deg, rgba(4,20,40,.92) 0%, rgba(4,20,40,.66) 42%, rgba(4,20,40,.25) 66%, rgba(4,20,40,.55) 88%, rgba(4,20,40,.92) 100%),
      var(--hero1-bg-m) center / cover no-repeat;
  }
  :root{ --hero1-bg-m:url("../img/hero1-bg-mobile.jpg"); }
  .hero .container{ display:flex; flex-direction:column; min-height:calc(100svh - var(--header-h) - 130px); }
  .hero-title{ max-width:none; }
  .hero-words{
    position:static;
    transform:none;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding-top:38px;
  }
  .hero-words li{ letter-spacing:.1em; font-size:12px; position:relative; text-align:center; }
  .hero-words li + li::before{
    content:"";
    position:absolute;
    left:-6px; top:50%;
    height:14px; width:1px;
    background:rgba(247,249,252,.4);
    transform:translateY(-50%);
  }
  .hero-baseline{ position:static; margin-top:26px; }
}

@media (max-width:700px){
  .hero{ padding:calc(var(--header-h) + 24px) 0 60px; }
  .hero-words{ gap:7px; }
  .hero-words li{ font-size:11px; letter-spacing:.06em; }
  .eyebrow{ font-size:12px; letter-spacing:.18em; }
  .hero-eyebrow{ margin-bottom:16px; }
  .hero-sub .dot:first-of-type{ margin-left:0; }
}

/* =========================================================
   ÉCRAN 2 — Vous dirigez
   ========================================================= */
.diriger{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#dfe7ef;
  padding:90px 0 96px;
}
/* Image de fond légèrement floutée pour détacher les cartes */
.diriger::before{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:-2;
  background:#dfe7ef url("../img/ecran3-bg.jpg") center top / cover no-repeat;
  filter:blur(7px) saturate(1.04);
  transform:scale(1.03);
}
.diriger::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(238,243,248,.55), rgba(238,243,248,.3));
}
.diriger-title{
  margin:0 0 46px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(30px, 3.6vw, 52px);
  line-height:1.14;
  letter-spacing:-.005em;
  color:var(--navy-ink);
}
.diriger-title .gold{ color:var(--gold-600); }

.diriger-cards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
}
.q-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:430px;
  display:flex;
  align-items:flex-start;
  box-shadow:0 22px 45px rgba(9,24,45,.28);
  isolation:isolate;
}
.q-card img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
}
.q-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(9,22,42,.94) 0%, rgba(10,25,46,.82) 32%, rgba(11,28,52,.35) 60%, rgba(11,31,58,0) 82%);
}
.q-card span{
  padding:26px 24px 30px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(21px, 1.55vw, 26px);
  line-height:1.26;
  color:#fff;
}

@media (max-width:900px){
  .diriger-cards{ grid-template-columns:repeat(2, 1fr); gap:18px; }
  .q-card{ min-height:340px; }
  .q-card span{ font-size:20px; padding:22px 20px 26px; }
}
@media (max-width:430px){
  .q-card{ min-height:300px; }
  .q-card span{ font-size:19px; }
}

/* =========================================================
   ÉCRAN 4 — Nos expertises
   ========================================================= */
.expertises{
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(31,111,214,.08), transparent 60%),
    linear-gradient(180deg, #eef3f9, #e7eef6);
  padding:88px 0 96px;
}
.expertises-title{
  margin:0 0 54px;
  text-align:center;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(32px, 4.2vw, 56px);
  letter-spacing:-.005em;
  color:var(--navy-ink);
}
.expertises-title .blue{ color:var(--blue-accent); }

.exp-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.exp-card{
  background:#fff;
  border-radius:22px;
  padding:20px 20px 30px;
  box-shadow:0 26px 50px rgba(20,45,80,.12), 0 2px 6px rgba(20,45,80,.06);
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
}
.exp-card__img{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
}
.exp-card__img img{ width:100%; height:100%; object-fit:cover; }

.exp-card h3{
  margin:18px 0 14px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:23px;
  line-height:1.18;
  letter-spacing:-.005em;
  color:var(--navy-ink);
  min-height:2.36em;              /* 2 lignes : aligne le trait et la description */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.exp-card__sep{ width:56px; height:1px; margin:0 auto 16px; background:rgba(20,45,80,.18); }
.exp-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.exp-card li{ font-size:17px; color:var(--blue-accent); font-weight:500; }


@media (max-width:1080px){
  .exp-grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
}

@media (max-width:760px){
  .expertises{ overflow:hidden; }
  .expertises-title{ margin-bottom:34px; }
  .exp-grid{
    display:flex;
    grid-template-columns:none;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    padding:10px 0 6px;
    scrollbar-width:none;
    /* espace pour laisser dépasser les cartes voisines */
    padding-inline:calc(50vw - 39% - 16px);
  }
  .exp-grid::-webkit-scrollbar{ display:none; }
  .exp-card{
    flex:0 0 78%;
    scroll-snap-align:center;
    padding-bottom:26px;
  }

  .exp-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:22px;
  }
  .exp-dots button{
    width:11px; height:11px;
    padding:0; border:0;
    border-radius:50%;
    background:rgba(20,45,80,.22);
    cursor:pointer;
    transition:background .2s, transform .2s;
  }
  .exp-dots button[aria-current="true"]{ background:var(--blue-accent); transform:scale(1.15); }
}
@media (min-width:761px){
  .exp-dots{ display:none; }
}

/* =========================================================
   ÉCRAN 5 — Derrière les chiffres
   ========================================================= */
.humain{
  background:var(--navy-950);
  color:var(--white);
}
.humain-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:stretch;
  min-height:78svh;
}
.humain-text{
  align-self:center;
  padding:96px 4vw 96px 0;
}
.humain-title{
  margin:0 0 30px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(34px, 4.4vw, 58px);
  line-height:1.1;
  letter-spacing:-.005em;
}
.humain-title span{ display:block; }
.humain-title .white{ color:var(--white); }
.humain-title .gold{ color:var(--gold-500); }
.humain-text p{
  margin:0 0 40px;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.65;
  color:rgba(247,249,252,.9);
  max-width:46ch;
}
.humain-media{ position:relative; }
.humain-media img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:57% 14%;
}
.humain-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--navy-950) 0%, rgba(4,23,43,.55) 14%, rgba(4,23,43,.12) 34%, rgba(4,23,43,0) 55%);
}

@media (max-width:1080px){
  .humain-wrap{ display:flex; flex-direction:column; min-height:0; }
  .humain-media{ order:-1; height:52svh; margin:0 -32px; }
  .humain-media img{ position:static; height:100%; }
  .humain-media::after{ background:linear-gradient(180deg, rgba(4,23,43,0) 55%, var(--navy-950) 100%); }
  .humain-text{ padding:34px 0 60px; align-self:auto; }
  .humain-text .btn-gold{ width:100%; }
}

/* =========================================================
   ÉCRAN 6 — Et si on parlait de vos chiffres
   ========================================================= */
.contact{
  color:var(--white);
  background:
    radial-gradient(900px 500px at 82% 40%, rgba(31,90,160,.28), transparent 60%),
    linear-gradient(180deg, #06213c, #041a30);
  padding:96px 0 104px;
}
.contact-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "text portrait"
    "text script";
  column-gap:6vw;
  row-gap:24px;
  align-items:center;
  justify-items:start;
}
.contact-text{ grid-area:text; }
.contact-portrait{ grid-area:portrait; justify-self:center; }
.contact-script{ grid-area:script; justify-self:center; }
.contact-title{
  margin:0 0 26px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(32px, 4.2vw, 56px);
  line-height:1.12;
  letter-spacing:-.005em;
}
.contact-title span{ display:block; }
.contact-title .white{ color:var(--white); }
.contact-title .gold{ color:var(--gold-500); }
.contact-sub{
  margin:0 0 40px;
  font-size:clamp(17px,1.7vw,23px);
  line-height:1.5;
  color:rgba(247,249,252,.92);
  max-width:22ch;
}

.contact-portrait{
  margin:0;
  position:relative;
  width:clamp(240px, 28vw, 340px);
  aspect-ratio:1;
  flex:0 0 auto;
}
.contact-portrait::before{
  content:"";
  position:absolute;
  inset:-26px auto auto -34px;
  width:82%;
  height:82%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(229,179,84,.22), rgba(4,26,48,0) 72%);
}
.contact-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--gold-500);
  box-shadow:0 0 0 7px rgba(4,26,48,.45), 0 30px 60px rgba(0,0,0,.4);
}
.contact-portrait img{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  z-index:1;
}
.contact-script{
  margin:0;
  font-family:"Caveat", cursive;
  font-size:clamp(27px,2.4vw,36px);
  font-weight:500;
  line-height:1.2;
  text-align:center;
  color:var(--white);
}
.contact-script::after{
  content:"";
  display:block;
  width:78%;
  height:12px;
  margin:2px auto 0;
  border-bottom:3px solid var(--gold-500);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}

@media (max-width:900px){
  .contact{ padding:80px 0 90px; }
  .contact-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "portrait"
      "text"
      "script";
    justify-items:center;
    text-align:center;
    row-gap:34px;
  }
  .contact-text{ display:flex; flex-direction:column; align-items:center; }
  .contact-sub{ max-width:34ch; margin-bottom:34px; }
  .contact-title, .contact-sub{ text-align:center; }
  .contact-wrap .btn-gold{ width:100%; }
  .contact-portrait{ width:clamp(230px, 62vw, 300px); }
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer{
  position:relative;
  background:
    radial-gradient(1200px 300px at 15% 0%, rgba(229,179,84,.06), transparent 60%),
    linear-gradient(180deg, #06213c, #04162b);
  color:rgba(247,249,252,.66);
  font-size:14px;
}
.site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(248,221,154,.4), transparent);
}
.site-footer a{ text-decoration:none; color:inherit; transition:color .18s ease; }
.site-footer a:hover{ color:var(--gold-400); }

.site-footer__main{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,72px) clamp(36px,4vw,48px);
}
.site-footer__brand img{ width:132px; height:auto; display:block; margin-bottom:16px; }
.site-footer__brand p{ margin:0 0 20px; max-width:30ch; line-height:1.6; }
.site-footer__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  border-radius:999px;
  border:1px solid rgba(248,221,154,.4);
  color:var(--gold-400) !important;
  font-weight:600; font-size:13.5px;
}
.site-footer__cta:hover{ background:rgba(248,221,154,.08); }

.site-footer__col h3{
  margin:0 0 16px;
  font-family:Inter, sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-500);
}
.site-footer__col a,
.site-footer__col p{ display:block; margin:0 0 11px; line-height:1.5; }
.site-footer__contact a{ color:rgba(247,249,252,.82); }
.site-footer__contact .fic-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:11px; }
.site-footer__contact .fic-row svg{
  width:16px; height:16px; flex:0 0 auto; margin-top:2px;
  stroke:var(--gold-500); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

.site-footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 28px;
  padding-block:22px 30px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;
  color:rgba(247,249,252,.5);
}
.site-footer__legal-info{ margin:0; }
.site-footer__legal{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.site-footer__legal a{ color:rgba(247,249,252,.6); }

@media (max-width:900px){
  .site-footer__main{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .site-footer__main{ grid-template-columns:1fr; }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   PAGES LÉGALES (mentions légales, CGV, confidentialité)
   ========================================================= */
.legal-lede{
  background:linear-gradient(180deg, #06213c, #041a30);
  color:var(--white);
  padding:calc(var(--header-h) + 64px) 0 64px;
}
.legal-lede h1{
  margin:0 0 12px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(30px,4vw,48px);
  letter-spacing:-.005em;
}
.legal-lede h1 .gold{ color:var(--gold-500); }
.legal-lede p{ margin:0; color:rgba(247,249,252,.8); font-size:16px; }

.legal-body{ padding:56px 0 80px; }
.legal-body .container{ max-width:820px; }
.legal-body h2{
  margin:38px 0 12px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(19px,2vw,24px);
  color:var(--navy-ink);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ margin:24px 0 8px; font-size:15px; font-weight:700; color:var(--navy-ink); }
.legal-body p, .legal-body li{ font-size:15px; line-height:1.7; color:rgba(24,49,74,.82); }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ margin:0 0 14px; padding-left:22px; }
.legal-body li{ margin-bottom:6px; }
.legal-body a{ color:var(--blue-accent); }
.legal-body dl{ margin:0 0 14px; }
.legal-body dt{ font-weight:700; color:var(--navy-ink); font-size:14px; margin-top:10px; }
.legal-body dd{ margin:2px 0 0; font-size:15px; color:rgba(24,49,74,.82); }
.legal-note{
  margin:8px 0 32px;
  padding:14px 18px;
  border-left:3px solid rgba(31,111,214,.4);
  border-radius:0 10px 10px 0;
  background:rgba(31,111,214,.05);
  font-size:13.5px; color:rgba(24,49,74,.7);
}

/* =========================================================
   PAGES INTÉRIEURES (gabarit simple)
   ========================================================= */
.page-lede{
  background:linear-gradient(180deg, #06213c, #041a30);
  color:var(--white);
  padding:calc(var(--header-h) + 70px) 0 90px;
}
.page-lede h1{
  margin:0 0 16px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(34px,4.4vw,56px);
  letter-spacing:-.005em;
}
.page-lede h1 .gold{ color:var(--gold-500); }
.page-lede p{ margin:0; font-size:19px; color:rgba(247,249,252,.85); max-width:56ch; }

.page-body{ padding:70px 0 90px; }
.page-body .placeholder{
  border:1px dashed rgba(20,45,80,.3);
  border-radius:18px;
  padding:48px;
  text-align:center;
  color:rgba(24,49,74,.7);
}

#calendly-embed{ min-height:700px; }

/* =========================================================================
   PAGES EXPERTISES — système de composants
   ========================================================================= */
:root{
  --green:#3ab98a;
  --red:#e06b70;
  --chart-1:#2f6fd0;
  --chart-2:#66a3e8;
  --chart-3:#9cc6f2;
}

/* ---- Rythme des sections (alternance marine / blanc) ---- */
.xp{ position:relative; overflow:hidden; }
.xp-section{ padding:clamp(64px, 8vw, 104px) 0; position:relative; }
.xp-section--navy{ background:linear-gradient(180deg,#06213c,#04182e); color:var(--white); }
.xp-section--paper{ background:#eef3f8; color:var(--ink); }
.xp-section--white{ background:#fff; color:var(--ink); }
.xp-section--tight{ padding:clamp(52px,6vw,80px) 0; }
.xp-section + .xp-section{ border-top:1px solid transparent; }

.xp-kicker{
  display:inline-block;
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.xp-h2{
  margin:0 0 22px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(27px, 3.3vw, 44px);
  line-height:1.16;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.xp-section--navy .xp-h2 .accent{ color:var(--gold-500); }
.xp-section--white .xp-h2 .accent,
.xp-section--paper .xp-h2 .accent{ color:var(--blue-accent); }
.xp-lead{
  margin:0 0 16px;
  max-width:56ch;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.68;
}
.xp-section--navy .xp-lead{ color:rgba(247,249,252,.86); }
.xp-section--white .xp-lead,
.xp-section--paper .xp-lead{ color:rgba(24,49,74,.82); }
.xp-punch{
  margin:26px 0 0;
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic;
  font-size:clamp(19px,2vw,26px);
  line-height:1.4;
  color:var(--gold-500);
  max-width:40ch;
}
.xp-center{ text-align:center; }
.xp-center .xp-lead{ margin-left:auto; margin-right:auto; }

/* ---- HERO ---- */
.xp-hero{
  background:
    radial-gradient(900px 460px at 88% 20%, rgba(31,90,160,.30), transparent 62%),
    linear-gradient(180deg,#06213c,#04182e);
  color:var(--white);
  padding:calc(var(--header-h) + 30px) 0 clamp(56px,7vw,92px);
}
.xp-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:center;
}
.xp-hero h1{
  margin:12px 0 20px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(30px,3.9vw,46px);
  line-height:1.12;
  letter-spacing:-.008em;
  text-wrap:balance;
}
.xp-hero h1 .gold{ color:var(--gold-500); display:block; }
.xp-hero__sub{
  margin:0 0 22px;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.55;
  color:rgba(247,249,252,.9);
  max-width:44ch;
}
.xp-tags{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 0;
  margin:0 0 30px;
  font-size:14px;
  letter-spacing:.04em;
  color:rgba(247,249,252,.8);
}
.xp-tags span{ display:inline-flex; align-items:center; }
.xp-tags span + span::before{
  content:"•"; margin:0 13px; color:var(--gold-500);
}
.xp-cta-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  height:60px; padding:0 26px;
  border-radius:999px;
  border:1px solid rgba(248,221,154,.5);
  color:var(--white);
  text-decoration:none;
  font-family:Poppins, Inter, sans-serif;
  font-size:15px; font-weight:600;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-ghost:hover{ background:rgba(248,221,154,.1); transform:translateY(-2px); }
.btn-ghost svg{ width:18px; height:18px; stroke:var(--gold-400); fill:none; stroke-width:2; }

/* ---- Cartes "problème / question" ---- */
.xp-problems{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.xp-problem{
  border-radius:20px;
  padding:26px 24px 30px;
  min-height:220px;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:18px;
  background:linear-gradient(180deg,#0b2f50,#082033);
  border:1px solid rgba(248,221,154,.14);
  color:var(--white);
}
.xp-problem__label{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-500);
}
.xp-problem__q{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(18px,1.5vw,22px);
  line-height:1.3;
  text-wrap:balance;
}

/* ---- Grille de 6 cartes ---- */
.xp-cards6{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.xp-cards6--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .xp-cards6--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .xp-cards6--4{ grid-template-columns:1fr; } }
.xp-card6{
  background:#fff;
  border:1px solid rgba(20,45,80,.08);
  border-radius:20px;
  padding:28px 26px 30px;
  box-shadow:0 20px 44px rgba(20,45,80,.10);
}
.xp-section--navy .xp-card6{
  background:linear-gradient(180deg,#0b2f50,#082033);
  border-color:rgba(248,221,154,.14);
  color:var(--white);
  box-shadow:none;
}
.xp-card6__label{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-accent);
}
.xp-section--navy .xp-card6__label{ color:var(--gold-500); }
.xp-card6 h3{
  margin:10px 0 10px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:21px;
  line-height:1.25;
  text-wrap:balance;
}
.xp-card6 p{
  margin:0 0 16px;
  font-size:14.5px; line-height:1.6;
  color:rgba(24,49,74,.72);
}
.xp-section--navy .xp-card6 p{ color:rgba(247,249,252,.78); }
.xp-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.xp-chips span{
  font-size:12.5px; font-weight:500;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(31,111,214,.09);
  color:var(--blue-accent);
}
.xp-section--navy .xp-chips span{
  background:rgba(248,221,154,.12);
  color:var(--gold-400);
}

/* ---- Étapes 01–04 ---- */
.xp-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
}
.xp-step__num{
  font-family:"Playfair Display", Georgia, serif;
  font-size:40px; font-weight:600;
  color:var(--gold-500);
  line-height:1;
}
.xp-step h3{
  margin:14px 0 8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.xp-section--navy .xp-step h3{ color:var(--white); }
.xp-step p{ margin:0; font-size:14.5px; line-height:1.6; }
.xp-section--navy .xp-step p{ color:rgba(247,249,252,.78); }
.xp-section--white .xp-step p,
.xp-section--paper .xp-step p{ color:rgba(24,49,74,.72); }
.xp-step + .xp-step{ position:relative; }

/* ---- Avant / Après ---- */
.xp-ba{ display:flex; flex-direction:column; gap:16px; max-width:820px; }
.xp-ba__row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:18px 22px;
  border-radius:16px;
  background:rgba(31,111,214,.06);
}
.xp-section--navy .xp-ba__row{ background:rgba(255,255,255,.04); }
.xp-ba__b{ color:rgba(24,49,74,.6); font-size:15px; }
.xp-section--navy .xp-ba__b{ color:rgba(247,249,252,.6); }
.xp-ba__arrow{ color:var(--gold-500); font-size:18px; }
.xp-ba__a{ font-weight:600; font-size:15.5px; }

/* ---- Comparaison ---- */
.xp-compare{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(248,221,154,.16);
}
.xp-compare__row{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:1px;
}
.xp-compare__row > *{
  padding:16px 20px;
  background:#0b2f50;
  font-size:14.5px;
}
.xp-compare__row--head > *{
  background:#082033;
  font-weight:700; letter-spacing:.04em;
  color:var(--gold-400);
}
.xp-compare__row > *:first-child{ font-weight:600; color:rgba(247,249,252,.9); }
.xp-compare__pos{ color:var(--green) !important; }
.xp-compare__neu{ color:rgba(247,249,252,.7) !important; }

/* ---- Comparaison élégante : DAF externalisé vs salarié (2 cartes) ---- */
.df-cmp{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
  margin-top:36px;
}
.df-cmp__card{
  position:relative;
  border-radius:22px;
  padding:30px 28px 12px;
  background:#fff;
  border:1px solid rgba(20,45,80,.1);
  box-shadow:0 24px 50px rgba(20,45,80,.1);
}
.df-cmp__card--hl{
  background:linear-gradient(180deg, #fffaf0, #fff);
  border:1px solid rgba(229,179,84,.55);
  box-shadow:0 30px 66px rgba(229,179,84,.22), 0 0 0 1px rgba(229,179,84,.25);
  transform:translateY(-10px);
}
.df-cmp__badge{
  position:absolute; top:-13px; left:28px;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color:#0a1c2e;
  font-family:Poppins, Inter, sans-serif;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.df-cmp__title{
  margin:0 0 6px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:22px;
  color:var(--navy-ink);
}
.df-cmp__sub{
  margin:0 0 16px;
  font-size:13px;
  color:rgba(24,49,74,.55);
}
.df-cmp__list{ margin:0; }
.df-cmp__list > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid rgba(20,45,80,.1);
}
.df-cmp__card--hl .df-cmp__list > div{ border-color:rgba(229,179,84,.28); }
.df-cmp__list dt{
  flex:0 0 auto;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(24,49,74,.55);
}
.df-cmp__list dd{
  margin:0;
  text-align:right;
  font-size:15px; line-height:1.35;
  color:var(--navy-ink);
}
.df-cmp__card--hl .df-cmp__list dd{
  font-weight:600;
  display:inline-flex; align-items:flex-start; gap:8px;
}
.df-cmp__card--hl .df-cmp__list dd::before{
  content:"";
  flex:0 0 auto;
  width:16px; height:16px;
  margin-top:2px;
  border-radius:50%;
  background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5-5L13.6 5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5-5L13.6 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.df-cmp__note{
  margin:22px 0 0;
  font-size:13.5px;
  color:rgba(24,49,74,.62);
  font-style:italic;
}

@media (max-width:820px){
  .df-cmp{ grid-template-columns:1fr; gap:26px; }
  .df-cmp__card--hl{ transform:none; }
  .df-cmp__list > div{ flex-direction:column; align-items:stretch; gap:4px; }
  .df-cmp__list dd{ text-align:left; }
  .df-cmp__card--hl .df-cmp__list dd{ display:flex; }
}

/* ---- Personas / "pour qui" ---- */
.xp-personas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.xp-persona{ display:flex; flex-direction:column; }
.xp-persona__img{
  border-radius:18px; overflow:hidden;
  aspect-ratio:3/4;
  background:linear-gradient(160deg,#0d355a,#071f33);
}
.xp-persona__img img{ width:100%; height:100%; object-fit:cover; }
.xp-persona__label{
  margin:16px 0 6px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-500);
}
.xp-persona p{ margin:0; font-size:14.5px; line-height:1.55; }
.xp-section--navy .xp-persona p{ color:rgba(247,249,252,.82); }
.xp-section--white .xp-persona p,
.xp-section--paper .xp-persona p{ color:rgba(24,49,74,.78); }

/* ---- Section humaine (photo large + texte) ---- */
.xp-human{ background:linear-gradient(180deg,#06213c,#04182e); color:var(--white); }
.xp-human__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:stretch;
  min-height:min(72svh,640px);
}
.xp-human__media{ position:relative; overflow:hidden; }
.xp-human__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:58% 18%;
  opacity:.86;
  -webkit-mask-image:
    radial-gradient(125% 115% at 62% 40%, #000 34%, rgba(0,0,0,.4) 64%, transparent 86%);
  mask-image:
    radial-gradient(125% 115% at 62% 40%, #000 34%, rgba(0,0,0,.4) 64%, transparent 86%);
}
.xp-human__media::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:#04182e;
  mix-blend-mode:normal;
  opacity:.34;
}
.xp-human__media::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, #04182e 0%, rgba(4,24,46,.55) 16%, rgba(4,24,46,0) 46%),
    linear-gradient(180deg, #04182e 0%, rgba(4,24,46,0) 20%, rgba(4,24,46,0) 78%, #04182e 100%),
    linear-gradient(270deg, #04182e 0%, rgba(4,24,46,0) 14%);
}
.xp-human__text{ align-self:center; padding:clamp(48px,6vw,92px) 0 clamp(48px,6vw,92px) clamp(24px,5vw,72px); }
.xp-human__text .xp-h2{ margin-bottom:18px; }

/* ---- Maillage inter-expertises ---- */
.xp-mesh{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.xp-mesh a{
  display:flex; flex-direction:column; gap:10px;
  padding:26px 24px;
  border-radius:18px;
  text-decoration:none;
  background:linear-gradient(180deg,#0b2f50,#082033);
  border:1px solid rgba(248,221,154,.16);
  color:var(--white);
  transition:transform .2s ease, border-color .2s ease;
}
.xp-mesh a:hover{ transform:translateY(-3px); border-color:rgba(248,221,154,.5); }
.xp-mesh__label{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500); }
.xp-mesh h3{ margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:20px; }
.xp-mesh__tags{ font-size:13px; color:rgba(247,249,252,.7); }
.xp-mesh__go{ margin-top:4px; color:var(--gold-400); font-size:14px; }

/* ---- FAQ (accordéons natifs) ---- */
.xp-faq{ max-width:840px; margin:0 auto; }
.xp-faq details{
  border-bottom:1px solid rgba(20,45,80,.14);
}
.xp-section--navy .xp-faq details{ border-color:rgba(255,255,255,.12); }
.xp-faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 44px 22px 0;
  position:relative;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.4;
}
.xp-faq summary::-webkit-details-marker{ display:none; }
.xp-faq summary::after{
  content:"";
  position:absolute; right:6px; top:26px;
  width:12px; height:12px;
  border-right:2px solid var(--gold-500);
  border-bottom:2px solid var(--gold-500);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.xp-faq details[open] summary::after{ transform:rotate(-135deg); }
.xp-faq__a{
  padding:0 30px 24px 0;
  margin:0;
  font-size:15px; line-height:1.7;
}
.xp-section--navy .xp-faq__a{ color:rgba(247,249,252,.82); }
.xp-section--white .xp-faq__a,
.xp-section--paper .xp-faq__a{ color:rgba(24,49,74,.8); }

/* =========================================================================
   "INTERFACE LPE STRATEGIE" — maquettes de dashboard (HTML/CSS/SVG)
   ========================================================================= */
.lpe-ui{
  border-radius:20px;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(180deg, rgba(12,42,74,.92), rgba(6,22,40,.96));
  border:1px solid rgba(120,170,235,.28);
  box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06),
             0 0 0 1px rgba(120,170,235,.08);
  color:var(--white);
}
.lpe-ui--wide{ max-width:1040px; margin:0 auto; }
.lpe-ui__bar{
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(247,249,252,.55);
}
.lpe-ui__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(120,170,235,.4); }
.lpe-ui__bar i:nth-child(2){ background:rgba(120,170,235,.28); }
.lpe-ui__bar i:nth-child(3){ background:rgba(120,170,235,.18); }
.lpe-ui__bar span{ margin-left:auto; text-transform:none; letter-spacing:0; color:rgba(247,249,252,.4); font-size:11px; }

.lpe-ui__grid{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.lpe-ui__grid--2{ grid-template-columns:repeat(2,1fr); }
.lpe-ui__span2{ grid-column:span 2; }
.lpe-ui__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.lpe-ui__panels{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; margin-top:14px; }

.kpi{
  border-radius:14px;
  padding:16px 16px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
}
.kpi__label{ font-size:12px; color:rgba(247,249,252,.6); }
.kpi__value{
  margin:6px 0 4px;
  font-family:Poppins, Inter, sans-serif;
  font-weight:700;
  font-size:clamp(17px,1.7vw,23px);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.kpi__delta{ font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.kpi__delta--up{ color:var(--green); }
.kpi__delta--down{ color:var(--red); }
.kpi__delta--flat{ color:rgba(247,249,252,.55); }

.ui-panel{
  border-radius:14px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
}
.ui-panel__title{ font-size:12.5px; color:rgba(247,249,252,.62); margin-bottom:12px; }
.ui-chart{ width:100%; height:auto; display:block; overflow:visible; }
.ui-chart .grid{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.ui-chart .area{ fill:url(#uiArea); }
.ui-chart .line{ fill:none; stroke:var(--chart-2); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ui-chart .line--gold{ stroke:var(--gold-500); }
.ui-chart .line--dash{ stroke-dasharray:5 5; opacity:.7; }
.ui-chart .bar{ fill:var(--chart-2); }
.ui-chart .bar--soft{ fill:rgba(120,170,235,.4); }
.ui-chart text{ fill:rgba(247,249,252,.5); font-size:9px; font-family:Inter,sans-serif; }

.ui-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; font-size:12px; color:rgba(247,249,252,.7); }
.ui-legend span{ display:inline-flex; align-items:center; gap:7px; }
.ui-legend i{ width:10px; height:10px; border-radius:3px; }

.ui-scn{ display:grid; gap:10px; }
.ui-scn__row{ display:grid; grid-template-columns:110px 1fr 64px; align-items:center; gap:12px; font-size:12.5px; }
.ui-scn__track{ height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.ui-scn__fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--chart-3),var(--chart-1)); }
.ui-scn__fill--gold{ background:linear-gradient(90deg,var(--gold-300),var(--gold-500)); }
.ui-scn__val{ text-align:right; font-variant-numeric:tabular-nums; color:rgba(247,249,252,.85); }

.ui-tag{
  display:inline-block;
  margin-top:12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(58,185,138,.14);
  color:var(--green);
  font-size:12px; font-weight:600;
}

/* ---- Zone image à fournir (placeholder stylé) ---- */
.xp-ph{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(120,170,235,.18), transparent 60%),
    linear-gradient(160deg,#0d355a,#071f33);
  border:1px dashed rgba(248,221,154,.3);
  display:flex; align-items:center; justify-content:center;
  min-height:260px;
  color:rgba(247,249,252,.5);
  font-size:13px;
  text-align:center;
  padding:24px;
}
.xp-ph[data-ratio="4/3"]{ aspect-ratio:4/3; min-height:0; }
.xp-ph[data-ratio="3/4"]{ aspect-ratio:3/4; min-height:0; }
.xp-ph[data-ratio="16/9"]{ aspect-ratio:16/9; min-height:0; }
.xp-ph svg{ width:34px; height:34px; margin-bottom:10px; stroke:rgba(248,221,154,.5); fill:none; stroke-width:1.5; }
.xp-ph__inner{ max-width:34ch; }

/* ---- Page mère : parcours ANALYSER → PILOTER ---- */
.xp-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  counter-reset:flow;
}
.xp-flow__step{
  position:relative;
  padding:26px 20px;
  border-radius:18px;
  background:linear-gradient(180deg,#0b2f50,#082033);
  border:1px solid rgba(248,221,154,.16);
}
.xp-flow__step::after{
  content:"→";
  position:absolute; right:-13px; top:50%;
  transform:translateY(-50%);
  color:var(--gold-500);
  font-size:20px;
  z-index:2;
}
.xp-flow__step:last-child::after{ display:none; }
.xp-flow__k{ font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--gold-500); }
.xp-flow__t{ margin:8px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:19px; }
.xp-flow__d{ margin:8px 0 0; font-size:13.5px; color:rgba(247,249,252,.72); line-height:1.5; }

/* Parcours vertical (colonne étroite : hero page mère) */
.xp-flow--v{ grid-template-columns:1fr; gap:14px; }
.xp-flow--v .xp-flow__step{ padding:18px 20px; }
.xp-flow--v .xp-flow__step::after{ content:"↓"; right:50%; top:auto; bottom:-13px; transform:translateX(50%); }
.xp-flow--v .xp-flow__step:last-child::after{ display:none; }

/* ---- Page mère : 4 grandes cartes expertises ---- */
.xp-big{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.xp-big__card{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  color:var(--white);
  min-height:340px;
  background:linear-gradient(180deg,#0d355a,#06203a);
  border:1px solid rgba(248,221,154,.16);
  transition:transform .25s ease, border-color .25s ease;
}
.xp-big__card:hover{ transform:translateY(-4px); border-color:rgba(248,221,154,.55); }
.xp-big__media{ position:absolute; inset:0; z-index:0; }
.xp-big__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.xp-big__card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,33,60,.35) 0%, rgba(4,24,46,.92) 78%);
}
.xp-big__body{ position:relative; z-index:2; margin-top:auto; padding:28px 26px 30px; }
.xp-big__k{ font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--gold-500); }
.xp-big__card h3{ margin:8px 0 8px; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:clamp(22px,2.4vw,30px); }
.xp-big__card p{ margin:0 0 14px; font-size:14.5px; color:rgba(247,249,252,.82); }
.xp-big__go{ font-size:14px; color:var(--gold-400); }
.xp-big__badge{
  position:absolute; top:18px; left:18px; z-index:3;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-300),var(--gold-500));
  color:#0a1c2e;
  font-size:11px; font-weight:800; letter-spacing:.08em;
}

/* ---------- Responsive pages expertises ---------- */
@media (max-width:1080px){
  .xp-hero__grid{ grid-template-columns:1fr; }
  .xp-hero__media{ order:2; }
  .xp-cards6{ grid-template-columns:repeat(2,1fr); }
  .xp-personas{ grid-template-columns:repeat(2,1fr); }
  .xp-mesh{ grid-template-columns:1fr; }
  .xp-flow{ grid-template-columns:repeat(2,1fr); }
  .xp-flow__step:nth-child(2n)::after{ display:none; }
  .xp-big{ grid-template-columns:1fr; }
  .xp-human__grid{ grid-template-columns:1fr; min-height:0; }
  .xp-human__media{ height:52svh; }
  .xp-human__media img{
    position:static; height:100%;
    -webkit-mask-image:radial-gradient(130% 100% at 50% 40%, #000 32%, rgba(0,0,0,.4) 64%, transparent 88%);
    mask-image:radial-gradient(130% 100% at 50% 40%, #000 32%, rgba(0,0,0,.4) 64%, transparent 88%);
  }
  .xp-human__media::after{
    background:
      linear-gradient(180deg, #04182e 0%, rgba(4,24,46,0) 22%, rgba(4,24,46,0) 62%, #04182e 100%),
      linear-gradient(90deg, #04182e 0%, rgba(4,24,46,0) 16%, rgba(4,24,46,0) 84%, #04182e 100%);
  }
  .xp-human__text{ padding:40px 0 8px; }
  .lpe-ui__grid{ grid-template-columns:repeat(2,1fr); }
  .lpe-ui__kpis{ grid-template-columns:repeat(2,1fr); }
  .lpe-ui__panels{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .lpe-ui__kpis{ grid-template-columns:1fr; }
  .xp-problems{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding-inline:max(0px, calc(50vw - 46% - 16px));
  }
  .xp-problems::-webkit-scrollbar{ display:none; }
  .xp-problem{ flex:0 0 78%; scroll-snap-align:center; }

  .xp-cards6{ grid-template-columns:1fr; }
  .xp-personas{ grid-template-columns:1fr; }
  .xp-flow{ grid-template-columns:1fr; }
  .xp-flow__step::after{ content:"↓"; right:50%; top:auto; bottom:-14px; transform:translateX(50%); }
  .xp-ba__row{ grid-template-columns:1fr; text-align:center; gap:8px; }
  .xp-ba__arrow{ transform:rotate(90deg); }
  .xp-compare__row{ grid-template-columns:1fr; }
  .xp-compare__row > *{ padding:12px 16px; }
  .xp-compare__row--head{ display:none; }
  .lpe-ui__grid{ grid-template-columns:1fr; }
  .lpe-ui__span2{ grid-column:auto; }
}

/* Points de carrousel (réutilisé) */
.xp-dots{ display:flex; justify-content:center; gap:9px; margin-top:22px; }
.xp-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(120,150,190,.35); cursor:pointer; transition:transform .2s, background .2s;
}
.xp-dots button[aria-current="true"]{ background:var(--gold-500); transform:scale(1.25); }
@media (min-width:761px){ .xp-dots{ display:none; } }

/* ---- Compléments pages expertises ---- */

/* Note / disclaimer discret */
.xp-note{
  margin:22px 0 0;
  padding:14px 18px;
  border-left:3px solid rgba(248,221,154,.5);
  border-radius:0 10px 10px 0;
  background:rgba(248,221,154,.06);
  font-size:13.5px; line-height:1.6;
  color:rgba(247,249,252,.7);
}
.xp-section--white .xp-note,
.xp-section--paper .xp-note{ background:rgba(20,45,80,.05); color:rgba(24,49,74,.7); }

/* Verdict / arbitrage : critère → gagnant */
.xp-verdict{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; max-width:520px; margin:24px 0 0; }
.xp-verdict div{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14.5px; }
.xp-section--white .xp-verdict div,
.xp-section--paper .xp-verdict div{ border-color:rgba(20,45,80,.14); }
.xp-verdict b{ color:var(--gold-500); font-weight:700; }

/* Équation d'impact : +/- items */
.xp-equation{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:28px 0 0; }
.xp-equation__item{
  padding:20px 18px;
  border-radius:16px;
  background:linear-gradient(180deg,#0b2f50,#082033);
  border:1px solid rgba(248,221,154,.14);
}
.xp-section--white .xp-equation__item,
.xp-section--paper .xp-equation__item{ background:#fff; border-color:rgba(20,45,80,.1); box-shadow:0 14px 30px rgba(20,45,80,.08); }
.xp-equation__v{ font-family:Poppins,Inter,sans-serif; font-weight:700; font-size:clamp(19px,1.8vw,24px); font-variant-numeric:tabular-nums; }
.xp-equation__v--up{ color:var(--green); }
.xp-equation__v--down{ color:var(--red); }
.xp-equation__l{ margin-top:6px; font-size:13px; color:rgba(247,249,252,.62); }
.xp-section--white .xp-equation__l,
.xp-section--paper .xp-equation__l{ color:rgba(24,49,74,.62); }

/* Livrable : maquette de rapport */
.xp-doc{
  max-width:520px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(248,221,154,.22);
  background:linear-gradient(180deg,#0c2a4a,#06182e);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.xp-doc__cover{
  padding:28px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(229,179,84,.16), rgba(6,24,46,0) 70%);
}
.xp-doc__k{ font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--gold-500); }
.xp-doc__t{ margin:8px 0 0; font-family:"Playfair Display",Georgia,serif; font-size:22px; color:#fff; }
.xp-doc__toc{ list-style:none; margin:0; padding:18px 26px 24px; display:grid; gap:2px; }
.xp-doc__toc li{ display:flex; gap:14px; padding:9px 0; font-size:13.5px; color:rgba(247,249,252,.82); border-bottom:1px solid rgba(255,255,255,.05); }
.xp-doc__toc li span{ color:var(--gold-400); font-variant-numeric:tabular-nums; }

/* KPI signalé (effet loupe) */
.kpi--flag{ border-color:rgba(229,179,84,.55); box-shadow:0 0 0 1px rgba(229,179,84,.25), 0 12px 26px rgba(229,179,84,.12); }

/* Section --white : accent doré possible aussi pour le punch */
.xp-section--white .xp-punch,
.xp-section--paper .xp-punch{ color:var(--blue-accent-dark); }

/* 2 grandes cartes comparatives (audit ≠ légal) */
.xp-duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.xp-duo__card{ border-radius:20px; padding:28px 26px; border:1px solid rgba(20,45,80,.1); background:#fff; box-shadow:0 20px 44px rgba(20,45,80,.1); }
.xp-duo__card--muted{ background:#eef3f8; box-shadow:none; }
.xp-duo__card h3{ margin:0 0 14px; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:20px; }
.xp-duo__card ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.xp-duo__card li{ font-size:14.5px; color:rgba(24,49,74,.8); padding-left:20px; position:relative; }
.xp-duo__card li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--blue-accent); }
.xp-duo__card--muted li::before{ background:rgba(24,49,74,.35); }

@media (max-width:900px){
  .xp-equation{ grid-template-columns:repeat(2,1fr); }
  .xp-verdict{ grid-template-columns:1fr; }
  .xp-duo{ grid-template-columns:1fr; }
}

/* ---- Pages corporate & conversion ---- */

/* Mots très grands (Le cabinet — écran Notre mission) */
.xp-words{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin:36px 0 0;
}
.xp-words div{
  padding:22px 20px 26px;
  border-radius:16px;
  border:1px solid rgba(248,221,154,.16);
  background:linear-gradient(180deg,#0b2f50,#082033);
}
.xp-words b{
  display:block;
  font-family:"Playfair Display",Georgia,serif;
  font-weight:600;
  font-size:clamp(24px,2.6vw,34px);
  color:var(--gold-500);
}
.xp-words span{ display:block; margin-top:10px; font-size:13.5px; color:rgba(247,249,252,.72); line-height:1.5; }

/* Schéma décision → ramifications (Pourquoi LPE — approche dirigeant) */
.xp-schema{ max-width:520px; }
.xp-schema svg{ width:100%; height:auto; display:block; }
.xp-schema .node{ fill:rgba(255,255,255,.05); stroke:rgba(120,170,235,.35); stroke-width:1.5; }
.xp-schema .node--c{ fill:rgba(229,179,84,.14); stroke:rgba(229,179,84,.6); }
.xp-schema .lnk{ stroke:rgba(120,170,235,.4); stroke-width:1.5; fill:none; }
.xp-schema text{ fill:#fff; font-family:Inter,sans-serif; font-size:12px; font-weight:600; }
.xp-schema text.c{ fill:var(--gold-400); font-family:"Playfair Display",Georgia,serif; font-size:14px; }

/* Fondateur */
.xp-founder{ display:grid; grid-template-columns:280px 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
.xp-founder__photo{ border-radius:20px; overflow:hidden; aspect-ratio:4/5; background:linear-gradient(160deg,#0d355a,#071f33); border:1px solid rgba(248,221,154,.2); }
.xp-founder__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
/* Le Cabinet — hero : scène de rendez-vous (David à droite) dans un cadre 4/3 */
.xp-hero__media .xp-founder__photo img{ object-position:60% 22%; }
.xp-founder__name{ margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:clamp(24px,2.6vw,32px); }
.xp-founder__role{ margin:6px 0 20px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); }
.xp-founder__note{ margin-top:16px; font-size:12.5px; font-style:italic; color:rgba(247,249,252,.5); }
.xp-section--white .xp-founder__note,
.xp-section--paper .xp-founder__note{ color:rgba(24,49,74,.5); }

/* Formulaire prise de rendez-vous */
.rdv-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(30px,4vw,60px); align-items:start; }
.xp-form{
  background:#fff;
  border-radius:22px;
  padding:clamp(22px,3vw,34px);
  box-shadow:0 30px 70px rgba(20,45,80,.18);
  border:1px solid rgba(20,45,80,.08);
}
.xp-form h2{ margin:0 0 4px; font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:21px; color:var(--navy-ink); }
.xp-form p.sub{ margin:0 0 18px; font-size:13.5px; color:rgba(24,49,74,.6); }
.xp-field{ margin-bottom:14px; }
.xp-field label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--navy-ink); }
.xp-field label .req{ color:var(--red); }
.xp-field input,
.xp-field select,
.xp-field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(20,45,80,.2);
  border-radius:10px;
  font:inherit;
  font-size:15px;
  color:var(--navy-ink);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.xp-field input:focus,
.xp-field select:focus,
.xp-field textarea:focus{
  outline:none;
  border-color:var(--blue-accent);
  box-shadow:0 0 0 3px rgba(31,111,214,.14);
}
.xp-field textarea{ min-height:82px; resize:vertical; }
.xp-field--err input,
.xp-field--err select{ border-color:var(--red); }
.xp-field__err{ margin:6px 0 0; font-size:12.5px; color:var(--red); }
.xp-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.xp-form .btn-gold{ width:100%; margin-top:6px; }
.xp-form__legal{ margin:14px 0 0; font-size:12px; color:rgba(24,49,74,.55); }
.xp-form__legal a{ color:var(--blue-accent); }
.xp-form__ok{
  margin-top:14px; padding:14px 16px;
  border-radius:12px;
  background:rgba(58,185,138,.12);
  color:#1c7d5c;
  font-size:14px;
}

/* Cartes sujet cliquables (préremplissage) */
.xp-subjects{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
.xp-subject{
  text-align:left;
  padding:20px 18px;
  border-radius:16px;
  border:1px solid rgba(20,45,80,.12);
  background:#fff;
  cursor:pointer;
  font:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.xp-section--navy .xp-subject{ background:linear-gradient(180deg,#0b2f50,#082033); border-color:rgba(248,221,154,.16); color:var(--white); }
.xp-subject:hover{ transform:translateY(-3px); border-color:var(--blue-accent); box-shadow:0 16px 34px rgba(20,45,80,.12); }
.xp-section--navy .xp-subject:hover{ border-color:rgba(248,221,154,.55); }
.xp-subject b{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-accent); }
.xp-section--navy .xp-subject b{ color:var(--gold-500); }
.xp-subject span{ display:block; margin-top:8px; font-family:"Playfair Display",Georgia,serif; font-size:17px; }

@media (max-width:1080px){
  .rdv-grid{ grid-template-columns:1fr; gap:26px; }
  .rdv-grid .xp-hero__text h1{ font-size:clamp(28px,7vw,38px); }
}
@media (max-width:900px){
  .xp-words{ grid-template-columns:repeat(2,1fr); }
  .xp-founder{ grid-template-columns:1fr; text-align:center; }
  .xp-founder__photo{ max-width:260px; margin:0 auto; }
  .xp-subjects{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .xp-words{ grid-template-columns:1fr; }
  .xp-form__row{ grid-template-columns:1fr; }
}

/* =========================================================================
   CORRECTIONS FINALES (passe production)
   ========================================================================= */

/* Accessibilité : focus visible + mouvement réduit */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Mention "données fictives" sous les dashboards / scénarios */
.xp-fic{
  margin:10px 0 0;
  font-size:11.5px;
  font-style:italic;
  color:rgba(247,249,252,.5);
}
.xp-section--white .xp-fic,
.xp-section--paper .xp-fic,
.diriger .xp-fic{ color:rgba(24,49,74,.55); }
.xp-fic--center{ text-align:center; }

/* Homepage — cartes "Nos expertises" entièrement cliquables */
a.exp-card{
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.exp-card:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 60px rgba(20,45,80,.18);
}
a.exp-card h3{ transition:color .2s ease; }
a.exp-card:hover h3{ color:var(--blue-accent); }

/* Homepage — section phare DAF externalisé (VISUEL 01) */
.home-daf{
  background:linear-gradient(180deg,#06213c,#04182e);
  color:var(--white);
  padding:clamp(60px,8vw,100px) 0;
  overflow:hidden;
}
.home-daf__grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.home-daf__title{
  margin:14px 0 18px;
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.12;
  letter-spacing:-.005em;
}
.home-daf__title .white{ display:block; color:#fff; }
.home-daf__title .gold{ display:block; color:var(--gold-500); }
.home-daf__sub{
  margin:0 0 28px;
  max-width:42ch;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;
  color:rgba(247,249,252,.85);
}
.home-daf__media{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(120,170,235,.22);
  box-shadow:0 44px 90px rgba(0,0,0,.42);
}
.home-daf__media img{ width:100%; height:auto; display:block; }
.home-daf__media .xp-fic{ padding:6px 14px 10px; margin:0; background:rgba(4,24,46,.6); }

@media (max-width:960px){
  .home-daf__grid{ grid-template-columns:1fr; }
  .home-daf__media{ order:2; }
  .home-daf__text{ order:1; }
}

/* Page RDV — calendrier immédiatement visible à droite */
.rdv-embed{
  position:relative;
  background:#fff;
  border-radius:22px;
  padding:14px;
  box-shadow:0 30px 70px rgba(20,45,80,.2);
  border:1px solid rgba(20,45,80,.08);
}
.rdv-embed .calendly-inline-widget{ min-width:280px; border-radius:14px; overflow:hidden; }

/* État de chargement : petite zone + spinner discret centré (pas de grand vide).
   Le widget Calendly se construit normalement à l'intérieur, on clippe juste
   la boîte à une petite hauteur le temps du chargement. */
.rdv-embed.is-loading{ min-height:220px; max-height:220px; overflow:hidden; }
.rdv-embed__spinner{
  position:absolute; left:50%; top:50%;
  width:24px; height:24px;
  margin:-12px 0 0 -12px;
  border-radius:50%;
  border:2.5px solid rgba(20,45,80,.16);
  border-top-color:var(--blue-accent);
  animation:rdv-spin .8s linear infinite;
}
.rdv-embed:not(.is-loading) .rdv-embed__spinner{ display:none; }
@keyframes rdv-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .rdv-embed__spinner{ animation-duration:2.4s; } }

/* Message affiché uniquement en cas d'échec réel */
.rdv-embed__error{
  margin:0;
  padding:26px 22px;
  text-align:center;
  font-size:14.5px;
  line-height:1.65;
  color:rgba(24,49,74,.72);
}
.rdv-embed__error a{ color:var(--blue-accent); font-weight:600; }

/* Page RDV — chip sujet + cartes sujet en liens */
.rdv-subject{
  margin:18px 0 0;
  font-size:14px;
  color:rgba(247,249,252,.75);
}
.rdv-subject b{ color:var(--gold-400); }
.rdv-subject a{ color:var(--gold-400); }
a.xp-subject{ text-decoration:none; color:inherit; display:block; }
/* une fois Calendly chargé : hauteur pilotée par l'iframe (data-resize) */
.rdv-embed:not(.is-loading) .calendly-inline-widget{ min-height:640px; }
@media (max-width:600px){
  .rdv-embed{ padding:8px; }
  .rdv-embed:not(.is-loading) .calendly-inline-widget{ min-height:560px; }
}

/* ---- Comparaison de scénarios A / B (page Conseil financier) ---- */
.sc-cmp{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:36px;
}
.sc-cmp__card{
  border-radius:22px;
  padding:26px 26px 12px;
  background:#fff;
  border:1px solid rgba(20,45,80,.1);
  box-shadow:0 24px 50px rgba(20,45,80,.1);
}
.sc-cmp__tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:Poppins, Inter, sans-serif;
  font-weight:700; font-size:13px; letter-spacing:.06em;
  padding:6px 14px;
  border-radius:999px;
}
.sc-cmp__tag::before{ content:""; width:8px; height:8px; border-radius:50%; }
.sc-cmp__tag--a{ background:rgba(31,111,214,.1); color:var(--blue-accent); }
.sc-cmp__tag--a::before{ background:var(--blue-accent); }
.sc-cmp__tag--b{ background:rgba(229,179,84,.14); color:var(--gold-600); }
.sc-cmp__tag--b::before{ background:var(--gold-500); }
.sc-cmp__lead{
  margin:14px 0 4px;
  font-family:"Playfair Display", Georgia, serif;
  font-size:18px;
  color:var(--navy-ink);
}
.sc-cmp__list{ margin:8px 0 0; }
.sc-cmp__list > div{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 0;
  border-top:1px solid rgba(20,45,80,.1);
}
.sc-cmp__list dt{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(24,45,80,.5);
}
.sc-cmp__list dd{
  margin:0;
  font-family:Poppins, Inter, sans-serif;
  font-weight:600; font-size:16px;
  font-variant-numeric:tabular-nums;
  color:var(--navy-ink);
}
.sc-cmp__pill{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-family:Inter, sans-serif;
  font-size:12.5px; font-weight:600;
}
.sc-cmp__pill--mod{ background:rgba(58,185,138,.14); color:#1c7d5c; }
.sc-cmp__pill--high{ background:rgba(224,107,112,.14); color:#b23b40; }

.sc-synth{
  margin-top:24px;
  padding:24px 26px;
  border-radius:20px;
  background:linear-gradient(180deg, #0b2f50, #082033);
  color:#fff;
}
.sc-synth__title{
  margin:0 0 16px;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-500);
}
.sc-synth__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.sc-synth__item{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.sc-synth__item > span{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(247,249,252,.6);
}
.sc-synth__item b{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600; font-size:17px;
}
.sc-synth__a{ color:#8ab6ec; }
.sc-synth__b{ color:var(--gold-400); }

@media (max-width:820px){
  .sc-cmp{ grid-template-columns:1fr; gap:18px; }
  .sc-synth__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:460px){
  .sc-synth__grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   REFONTE MOBILE — cohérence et lisibilité (≤ 768 px puis ≤ 560 px)
   ========================================================================= */
@media (max-width:768px){

  /* --- Kickers : moins d'interlettrage, jamais de coupe disgracieuse --- */
  .xp-kicker{ font-size:11.5px; letter-spacing:.14em; line-height:1.4; }
  .eyebrow{ font-size:12px; letter-spacing:.16em; }

  /* --- Titres de section un cran plus compacts --- */
  .xp-h2{ font-size:clamp(24px,6vw,32px); line-height:1.18; }
  .xp-hero h1{ font-size:clamp(27px,7.4vw,36px); line-height:1.14; }
  .hero-title{ font-size:clamp(29px,8vw,40px); line-height:1.14; }
  .xp-lead{ font-size:15px; }
  .xp-punch{ font-size:clamp(18px,4.6vw,22px); }

  /* --- CTA : boutons pleine largeur, empilés, texte centré et adaptable --- */
  .xp-cta-row{ flex-direction:column; gap:12px; width:100%; }
  .xp-cta-row .btn-gold,
  .xp-cta-row .btn-ghost{ width:100%; }
  .btn-gold, .btn-ghost{
    height:auto; min-height:54px;
    padding:15px 22px;
    text-align:center;
    line-height:1.35;
    white-space:normal;
  }
  .btn-ghost{ justify-content:center; }
  .btn-gold{ justify-content:center; }

  /* --- Listes à puces des héros : format "chips" propre --- */
  .xp-tags,
  .hero-sub{
    gap:8px;
    justify-content:flex-start;
  }
  .xp-tags span,
  .hero-sub > span{
    padding:6px 13px;
    border-radius:999px;
    border:1px solid rgba(248,221,154,.28);
    background:rgba(248,221,154,.06);
    font-size:12.5px;
  }
  .xp-tags span + span::before,
  .hero-sub > span + span::before{ display:none; }

  /* --- Hero accueil : moins de vide, mots-clés en grille 2×2 --- */
  .hero{ min-height:auto; padding:calc(var(--header-h) + 20px) 0 44px; }
  .hero .container{ min-height:0; }
  .hero-eyebrow{ margin-bottom:14px; }
  .hero-words{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:12px 10px;
    margin-top:34px;
    padding-top:26px;
    border-top:1px solid rgba(247,249,252,.14);
  }
  .hero-words li{
    font-size:12px; letter-spacing:.16em; text-align:left;
    padding:0 !important;
  }
  .hero-words li + li::before{ display:none !important; }
  .hero-baseline{ margin-top:22px; font-size:13.5px; }

  /* --- Hero pages expertises : padding-haut réduit (menu masqué au chargement) --- */
  .xp-hero{ padding:calc(var(--header-h) + 20px) 0 clamp(44px,9vw,64px); }
  .xp-hero__grid{ gap:26px; }

  /* --- Écran 2 accueil : 1 carte par ligne, question lisible --- */
  .diriger-cards{ grid-template-columns:1fr; gap:16px; }
  .q-card{ min-height:240px; }
  .q-card span{ font-size:clamp(19px,5.2vw,22px); padding:22px 22px 24px; }

  /* --- Cartes "problème" (carrousel) : moins de vide interne --- */
  .xp-problem{ min-height:auto; gap:22px; padding:24px 22px 26px; }

  /* --- Dashboards "interface LPE" : compacts et lisibles --- */
  .lpe-ui{ padding:14px; }
  .lpe-ui__bar{ font-size:11px; flex-wrap:wrap; gap:6px 8px; }
  .lpe-ui__bar span{ width:100%; margin:0; text-align:left; }
  .lpe-ui__grid,
  .lpe-ui__kpis{ grid-template-columns:1fr 1fr; gap:10px; }
  .lpe-ui__span2{ grid-column:span 2; }
  .lpe-ui__panels{ grid-template-columns:1fr; }
  .kpi{ padding:13px 13px 14px; }
  .kpi__label{ font-size:11px; }
  .ui-panel{ padding:13px; }

  /* --- Comparatifs : espacement homogène --- */
  .df-cmp__card,
  .sc-cmp__card{ padding:24px 22px 10px; }
  .df-cmp__badge,
  .sc-cmp__tag{ font-size:11px; }

  /* --- Personas / grandes cartes : hauteurs raisonnables --- */
  .xp-big__card{ min-height:280px; }
  .xp-persona__img{ aspect-ratio:4/3; }

  /* Parcours (xp-flow) en 1 colonne : flèche entre chaque étape */
  .xp-flow{ grid-template-columns:1fr; }
  .xp-flow__step:nth-child(2n)::after{ display:block; }
  .xp-flow__step::after{ content:"↓"; right:50%; top:auto; bottom:-14px; transform:translateX(50%); }
  .xp-flow__step:last-child::after{ display:none; }

  /* --- Sections : rythme vertical resserré --- */
  .xp-section{ padding:clamp(52px,11vw,72px) 0; }
  .xp-section--tight{ padding:clamp(40px,9vw,56px) 0; }

  /* --- Bloc conversion : portrait + texte centrés proprement --- */
  .contact-portrait{ width:clamp(190px,54vw,240px); }
  .contact-title{ font-size:clamp(24px,6.4vw,32px); }
  .contact-sub{ font-size:16px; }

  /* --- Pied de page --- */
  .site-footer__brand p{ max-width:none; }

  /* --- Pages légales --- */
  .legal-lede{ padding:calc(var(--header-h) + 32px) 0 40px; }
  .legal-lede h1{ font-size:clamp(26px,7vw,34px); }
  .legal-body{ padding:40px 0 60px; }
  .legal-body h2{ font-size:19px; }
}

@media (max-width:360px){
  .lpe-ui__grid,
  .lpe-ui__kpis{ grid-template-columns:1fr; }
  .lpe-ui__span2{ grid-column:auto; }
  .sc-synth__grid{ grid-template-columns:1fr; }
}
@media (max-width:340px){
  .hero-words{ grid-template-columns:1fr; gap:9px; }
}

/* --- Page RDV : module Calendly, état de chargement discret --- */
.rdv-embed:not(.is-loading) .calendly-inline-widget{ min-height:600px; }
@media (max-width:768px){
  .rdv-grid{ gap:22px; }
  .rdv-embed{ padding:10px; }
  .rdv-embed:not(.is-loading) .calendly-inline-widget{ min-height:560px; }
}

/* =========================================================
   MOBILE — Grilles de cartes en carrousel (pages plus courtes)
   Actif uniquement < 760 px. Défilement horizontal natif, snap
   "proximity" + overscroll contenu : ne fait jamais défiler la page.
   ========================================================= */
@media (max-width:760px){
  .is-carousel{
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:4px 0 2px;
    padding-inline:calc(50vw - 43% - 14px);
    scroll-padding-inline:calc(50vw - 43% - 14px);
  }
  .is-carousel::-webkit-scrollbar{ display:none; }
  .is-carousel > *{
    flex:0 0 86%;
    scroll-snap-align:center;
    min-width:0;
    margin:0 !important;
  }
  .xp-big.is-carousel > *{ flex-basis:88%; min-height:300px; }
  .xp-personas.is-carousel .xp-persona__img{ aspect-ratio:16/10; }

  /* points de navigation communs (déjà stylés par .xp-dots) */
  .is-carousel + .xp-dots{ margin-top:16px; }

  /* Rythme vertical encore resserré sur mobile */
  .xp-section{ padding:clamp(38px,8vw,54px) 0; }
  .xp-steps{ gap:18px; }
  .xp-step__num{ font-size:32px; }
  .xp-step h3{ margin:8px 0 6px; }
  .xp-flow{ gap:14px; }
  .xp-flow__step{ padding:16px 18px; }
}

/* ---- MOBILE : 2e passe de compactage (héros, FAQ, section finale) ---- */
@media (max-width:760px){
  .xp-hero{ padding-bottom:clamp(30px,7vw,44px); }
  .xp-hero__grid{ gap:20px; }
  .xp-hero__sub{ margin-bottom:20px; }

  .xp-faq summary{ padding:16px 40px 16px 0; font-size:16px; }
  .xp-faq summary::after{ top:20px; }
  .xp-faq__a{ padding-bottom:18px; }

  .xp-h2 + .xp-lead{ margin-top:10px; }
  .xp-center .xp-lead{ margin-bottom:0; }

  .contact{ padding:clamp(48px,10vw,64px) 0; }
  .contact-wrap{ gap:16px; }
  .contact-portrait{ width:clamp(148px,40vw,184px); }
  .contact-sub{ margin-bottom:20px; }
  .contact-script{ font-size:19px; }

  /* dashboards : un cran plus courts */
  .lpe-ui__panels{ margin-top:10px; }
  .ui-legend{ margin-top:8px; }
}

/* ---- MOBILE : comparatifs A/B resserrés (restent empilés, plus compacts) ---- */
@media (max-width:760px){
  .sc-cmp,
  .df-cmp{ gap:14px; }
  .sc-cmp__list > div{ padding:9px 0; }
  .sc-cmp__lead{ margin:10px 0 2px; }
  .df-cmp__card,
  .sc-cmp__card{ padding:20px 18px 8px; }
  .sc-synth{ margin-top:16px; }
}

/* ---- MOBILE : cartes en carrousel — contenu centré verticalement ---- */
@media (max-width:760px){
  .xp-cards6.is-carousel .xp-card6{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .xp-cards6.is-carousel .xp-card6 > :last-child{ margin-bottom:0; }
  .xp-mesh.is-carousel a{ justify-content:center; }
}