/* =========================================================
   Romel DEGBOE
   Charte Aubergine & or, retenue par le client. Le fond reprend
   le costume du portrait (#331C26, assombri), l'accent reprend
   l'or de la montre.
   ========================================================= */
:root{
  --bg:#1C1017;
  --bg-2:#251620;
  --surface:rgba(255,255,255,.045);
  --ink:#F6F1EE;
  --ink-soft:rgba(246,241,238,.66);
  --h-color:var(--ink);
  --accent:#C9A84C;
  --accent-2:#E6CE8C;
  --accent-rgb:201,168,76;
  --on-accent:#1C1017;
  --bg-rgb:28,16,23;
  --line:rgba(246,241,238,.14);
  --halo:rgba(201,168,76,.16);

  --radius:6px;
  --radius-img:6px;
  --shadow:0 30px 70px -30px rgba(0,0,0,.7);

  --font-display:"Bodoni Moda",Georgia,serif;
  /* le nom a sa propre police, plus dense, à la demande du client */
  --font-nom:"Playfair Display",Georgia,serif;
  --font-body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --h-weight:500;
  --h-tracking:-.015em;
  --h-line:1.06;
  --h-transform:none;
  --eyebrow-tracking:.26em;

  --maxw:1220px;
}

/* =================== BASE =================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:var(--h-weight);color:var(--h-color);
  letter-spacing:var(--h-tracking);line-height:var(--h-line);margin:0;
}
h1,h2{text-transform:var(--h-transform)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
ol{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.section{padding:clamp(84px,11vw,150px) 0;position:relative}

.eyebrow{
  display:inline-flex;align-items:center;gap:.8em;flex-wrap:wrap;
  font-family:var(--font-body);font-size:.7rem;font-weight:700;
  letter-spacing:var(--eyebrow-tracking);text-transform:uppercase;color:var(--accent-2);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}
.eyebrow.center{justify-content:center}

.section-head{max-width:760px}
.section-head h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-top:22px}
.section-head > p{margin-top:20px;color:var(--ink-soft);font-size:1.06rem}
.center{text-align:center;margin-left:auto;margin-right:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1em 1.9em;border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{transform:translateY(-2px);background:var(--accent-2)}
.btn-ligne{border-color:var(--line);color:var(--ink)}
.btn-ligne:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-2px)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* =================== MARQUE =================== */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:var(--ink)}
.brand-nom{font-family:var(--font-nom);font-size:1.24rem;font-weight:700;letter-spacing:.005em;line-height:1.1;white-space:nowrap}
.brand-role{font-size:.76rem;font-weight:500;letter-spacing:.03em;color:var(--accent-2);white-space:nowrap}

/* =================== HEADER =================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;transition:background .3s ease,box-shadow .3s ease}
.site-header.scrolled{background:var(--bg);box-shadow:0 1px 0 var(--line);padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
/* sous-menu « Mes activités » : au survol et au clavier */
.nav-groupe{position:relative}
.nav-groupe-titre::after{
  content:"";display:inline-block;margin-left:.55em;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);
}
.nav-sous{
  position:absolute;top:100%;left:-22px;width:max-content;max-width:min(420px,90vw);padding-top:14px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-groupe:hover .nav-sous,.nav-groupe:focus-within .nav-sous{opacity:1;visibility:visible;transform:none}
.nav-sous-boite{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow)}
.nav-sous a{display:block;padding:10px 16px;border-radius:4px;font-size:.92rem;color:var(--ink)}
.nav-sous a:hover,.nav-sous a[aria-current="page"]{background:var(--surface);color:var(--accent-2)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:.75em 1.4em;font-size:.84rem}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

.mobile-menu{
  position:fixed;inset:0;z-index:60;background:var(--bg-2);
  display:flex;flex-direction:column;gap:2px;padding:84px clamp(24px,7vw,48px) 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{font-family:var(--font-display);font-size:clamp(1.5rem,6.4vw,2rem);padding:12px 0;border-bottom:1px solid var(--line);text-transform:var(--h-transform)}
.mobile-menu a:last-of-type{border:0}
/* les six activités : plus petites, pour que tout le menu tienne à l'écran */
.mm-titre{margin-top:22px;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2)}
.mobile-menu a.mm-sous{font-family:var(--font-body);font-size:1.04rem;padding:11px 0 11px 16px;border-bottom:0;border-left:1px solid var(--line);color:var(--ink)}
.mobile-menu a.mm-sous + a:not(.mm-sous){margin-top:14px;border-top:1px solid var(--line)}
/* 44 px au doigt : en dessous, la cible devient pénible à viser */
.mobile-close{
  position:absolute;top:18px;right:18px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer;
}
body.menu-open .site-header{opacity:0;pointer-events:none}

/* =================== HERO ===================
   Le nom d'abord, puis ce que je fais et mes centres d'intérêt. Les titres
   réglementés et les diplômes ne sont plus ici : les premiers sont sur la
   page des services financiers, les seconds sur la page À propos. */
.hero{position:relative;overflow:hidden;background:var(--bg);padding:clamp(128px,14vw,170px) 0 clamp(64px,8vw,104px)}

.hero-photo{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0;pointer-events:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 0%;display:block}
/* le raccord avec la page se fait par un voile, jamais par un bord net */
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.72) 26%,rgba(var(--bg-rgb),0) 64%),
             linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),0) 26%);
}
.hero-fond{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.14;pointer-events:none;user-select:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 44%);
  mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 44%);
}

/* Le bloc garde la largeur du cadre de page, sinon il se centre tout seul
   (le .wrap a margin:0 auto) et se décale à droite de la navigation.
   C'est la mesure du texte qui est bornée, pas le bloc. */
.hero-contenu{position:relative;z-index:2;width:100%}
.hero-identite > *{max-width:620px}
.hero-salut{font-size:clamp(1.02rem,1.5vw,1.3rem);color:var(--ink)}
.hero-nom{
  margin-top:8px;font-family:var(--font-nom);font-weight:800;color:var(--ink);
  font-size:clamp(3.4rem,8.6vw,6rem);line-height:.96;letter-spacing:-.02em;
}
.hero-roles{margin-top:18px;font-size:clamp(1.1rem,1.7vw,1.42rem);font-weight:600;line-height:1.3;color:var(--ink)}
.hero-roles,.hero-interets{text-wrap:balance}
.hero-roles i,.hero-interets i{font-style:normal;color:var(--accent);margin:0 .3em}
.hero-interets{
  position:relative;margin-top:16px;padding-top:16px;
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.5;color:var(--ink-soft);
}
.hero-interets::before{content:"";position:absolute;top:0;left:0;width:54px;height:2px;background:var(--accent)}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero-signature{
  margin-top:28px;padding-top:20px;border-top:1px solid rgba(var(--accent-rgb),.5);
  font-family:var(--font-display);font-style:italic;line-height:1.2;
  font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--accent-2);
}
.btn .fleche{display:inline-block;margin-left:.7em;transition:transform .25s ease}
.btn:hover .fleche{transform:translateX(4px)}

@media (min-width:981px){
  /* 86svh et non 100 : la bande des environnements reste visible sous le hero */
  .hero{min-height:86svh;display:flex;align-items:center}
}
/* écran large mais court : tout doit tenir dans la hauteur visible */
@media (min-width:981px) and (max-height:800px){
  .hero{padding-top:96px;padding-bottom:40px}
  .hero-nom{font-size:clamp(3.2rem,7vw,5rem)}
  .hero-roles{margin-top:12px}
  .hero-interets{margin-top:12px;padding-top:12px}
  .hero-actions{margin-top:20px}
  .hero-signature{margin-top:20px;padding-top:14px}
}

/* liens vers les deux sites du groupe */
.lien{color:var(--accent-2);border-bottom:1px solid rgba(var(--accent-rgb),.5);transition:color .2s ease,border-color .2s ease}
.lien:hover{color:var(--ink);border-color:var(--ink)}
.lien-titre{transition:color .2s ease}
.lien-titre:hover{color:var(--accent-2)}

/* Bande des environnements traversés.
   Le logo s'affiche s'il existe, sinon le nom en toutes lettres prend sa
   place : c'est le script qui retire l'image absente. */
.logos{overflow:hidden;background:var(--bg-2);padding:22px 0;border-block:1px solid var(--line)}
.logos-piste{display:flex;align-items:center;gap:clamp(38px,5vw,72px);width:max-content;animation:defile 58s linear infinite}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:clamp(26px,3vw,36px);width:auto;display:block;opacity:.72;transition:opacity .25s ease}
.logo:hover img{opacity:1}
.logo b{
  font-size:.76rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.logo:has(img) b{display:none}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos-piste{animation:none}}



/* bandeau d'image en pleine largeur de section */
.bandeau-image{margin:clamp(44px,6vw,68px) 0 0;overflow:hidden;border-radius:var(--radius)}
.bandeau-image img{width:100%;height:clamp(200px,30vw,380px);object-fit:cover;display:block}

/* =================== CHIFFRES ===================
   Quatre repères, lus d'un coup d'œil, juste après les logos. */
.chiffres{background:var(--bg);padding:clamp(48px,6vw,76px) 0}
.chiffres-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px)}
.chiffre{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid var(--accent)}
.c-val{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;color:var(--h-color)}
.c-lab{font-size:.9rem;color:var(--ink-soft);max-width:22ch}
.c-lab b{font-weight:700;color:var(--ink)}
.chiffres-suite{margin-top:clamp(28px,4vw,44px)}

/* =================== EST-CE POUR VOUS ===================
   Une liste de situations, pas une liste de services : le visiteur doit se
   reconnaître avant de lire ce que je sais faire. */
.pourvous{background:var(--bg-2)}
.pourvous-grille{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,72px);align-items:center}
.pourvous-txt h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:20px}
.coches{margin-top:28px;display:grid;gap:14px}
.coches li{position:relative;padding-left:34px;color:var(--ink);font-size:1.04rem;line-height:1.55}
.coches li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:9px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.pourvous .btn{margin-top:32px}
.pourvous-micro{margin-top:14px;font-size:.86rem;color:var(--ink-soft)}
.pourvous-photo{margin:0;overflow:hidden;border-radius:var(--radius)}
.pourvous-photo img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}

/* =================== BARRE D'ACTION MOBILE =================== */
.barre-mobile{display:none}

/* =================== IDÉE CENTRALE =================== */
.idee{background:var(--bg)}
.idee-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,80px);margin-top:52px;align-items:start}
.grande{font-family:var(--font-display);font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.28;color:var(--ink)}
.idee-corps p{color:var(--ink-soft)}
.idee-corps p + p{margin-top:20px}

.fil{margin-top:clamp(56px,7vw,86px);display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fil-carte{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px 34px;transition:transform .3s ease,border-color .3s ease;
}
.fil-carte:hover{transform:translateY(-6px);border-color:var(--accent)}
.fil-carte .f-num{font-family:var(--font-display);font-size:.9rem;color:var(--accent-2);letter-spacing:.12em}
.fil-carte h3{margin-top:14px;font-size:1.36rem}
.fil-carte p{margin-top:14px;color:var(--ink-soft);font-size:.98rem}

/* =================== PARCOURS =================== */
.parcours{background:var(--bg)}
.jalons{margin-top:44px;display:grid;gap:0}
.jalon{
  position:relative;padding:34px 0 34px clamp(0px,4vw,54px);
  border-top:1px solid var(--line);
}
.jalon:last-child{border-bottom:1px solid var(--line)}
.j-tete{display:flex;align-items:center;gap:16px}
.j-num{font-family:var(--font-display);font-size:1.5rem;color:var(--accent)}
.j-lieu{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.jalon h3{margin-top:12px;font-size:clamp(1.4rem,2.5vw,1.9rem)}
.jalon p{margin-top:14px;color:var(--ink-soft);max-width:64ch}
.j-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.j-tags span{
  font-size:.74rem;font-weight:600;padding:5px 13px;border-radius:999px;
  color:var(--ink);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);
}
.j-liste{margin-top:16px;display:grid;gap:9px;max-width:64ch}
.j-liste li{position:relative;padding-left:22px;color:var(--ink-soft)}
.j-liste li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1px;background:var(--accent)}
.parcours-note{margin-top:38px;max-width:72ch;color:var(--ink-soft);font-size:.98rem}
.parcours-suite{margin-top:clamp(30px,4vw,46px)}

/* =================== ARCHITECTE =================== */
.architecte{background:var(--bg)}
.versants{margin-top:44px;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.versant{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px}
.versant h3{font-size:1.6rem;color:var(--accent-2)}
.versant ul{margin-top:22px;display:grid;gap:12px}
.versant li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:.99rem}
.versant li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}
.versant-lien{display:flex;flex-direction:column;align-items:center;gap:14px}
.vl-trait{width:1px;height:46px;background:var(--line)}
.vl-mot{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);writing-mode:vertical-rl}
.collab{margin-top:42px;max-width:78ch;color:var(--ink-soft);font-size:1rem}

.clients{margin-top:clamp(50px,6vw,74px);display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.client{padding:28px 0 0;border-top:2px solid var(--accent)}
.client h4{font-size:1.14rem}
.client p{margin-top:12px;color:var(--ink-soft);font-size:.96rem}
.clients-note{margin-top:34px;color:var(--ink-soft);font-size:.94rem;max-width:74ch}

/* =================== CONTACT =================== */
.contact{background:var(--bg-2)}
.contact-carte{
  max-width:780px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(36px,5vw,64px);box-shadow:var(--shadow);
}
/* la photo est coupée à la taille : une ombre portée dessinerait
   un trait droit sous elle, on s'en passe */
.contact-photo{width:132px;height:auto;margin:0 auto 4px}
.contact-carte h2{margin-top:20px;font-size:clamp(1.9rem,3.8vw,2.7rem)}
.contact-carte > p{margin-top:16px;color:var(--ink-soft)}
.contact-form{margin-top:32px;display:grid;gap:14px;text-align:left}
.cf-ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form textarea{
  width:100%;padding:1em 1.1em;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:.98rem;resize:vertical;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--ink-soft)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.contact-form .btn{justify-self:start}
.contact-actions{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.contact-note{margin-top:16px;font-size:.84rem;color:var(--ink-soft)}
.contact-ok{margin-top:18px;font-weight:700;color:var(--accent);display:none}

/* =================== MES ACTIVITÉS (accueil) ===================
   Six lignes, dans l'ordre fixé par le client. Chaque ligne entière est le
   lien vers la page de l'activité. */
.activites-section{background:var(--bg-2)}
/* un titre de section sans surtitre ne garde pas la marge prévue pour lui */
.section-head > h2:first-child{margin-top:0}
.activites{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
.activite{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:clamp(18px,3vw,44px);
  padding:clamp(22px,2.6vw,32px) clamp(0px,1.6vw,22px);border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.activite:hover{background:var(--surface)}
.a-num{font-family:var(--font-display);font-size:1.5rem;color:var(--accent);min-width:1.4em}
.a-titre{display:block;font-family:var(--font-display);font-size:clamp(1.4rem,2.7vw,2.1rem);line-height:1.14;color:var(--ink)}
/* le titre se coupe avant la barre, jamais après */
.nb{white-space:nowrap}
.a-titre .sep,.page-tete h1 .sep{color:var(--accent);font-weight:400;margin-right:.18em}
.a-points{display:block;margin-top:8px;color:var(--ink-soft);font-size:.99rem;line-height:1.5}
.a-points + .a-points{margin-top:2px}
.a-lien{font-weight:700;font-size:.9rem;color:var(--accent-2);white-space:nowrap}
.a-lien .fleche{display:inline-block;margin-left:.5em;transition:transform .25s ease}
.activite:hover .a-lien .fleche{transform:translateX(5px)}

/* =================== PAGES D'ACTIVITÉ =================== */
.page-tete{position:relative;overflow:hidden;background:var(--bg);padding:clamp(128px,13vw,170px) 0 clamp(56px,7vw,96px)}
.page-image{position:absolute;top:0;right:0;bottom:0;width:48%;margin:0;z-index:0}
.page-image img{width:100%;height:100%;object-fit:cover;display:block}
.page-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.62) 34%,rgba(var(--bg-rgb),.18) 100%),
             linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),0) 30%);
}
.page-tete-contenu{position:relative;z-index:1}
.page-tete-contenu > *{max-width:700px}
.retour{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-size:.86rem;font-weight:600;color:var(--ink-soft);transition:color .2s ease}
.retour:hover{color:var(--accent-2)}
/* l'entreprise qui porte l'activité : nommée ici, pas sur l'accueil */
.page-entite{margin-top:18px;font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.36rem);color:var(--accent-2)}
.page-tete h1{margin-top:12px;font-size:clamp(2.3rem,5.2vw,3.9rem)}
.page-points{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.page-points + .page-points{margin-top:8px}
.page-points li{
  font-size:.84rem;font-weight:600;padding:6px 14px;border-radius:999px;
  color:var(--ink);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.34);
}
.page-chapo{margin-top:26px;font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.6;color:var(--ink)}
.page-tete .hero-cta{margin-top:30px}

/* les titres réglementés : une bande à part, sur la seule page des services financiers */
.titres{background:var(--bg-2);border-block:1px solid var(--line);padding:clamp(26px,3vw,40px) 0}
.titres-grille{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,84px);align-items:center}
.titres h2{font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.3;font-size:clamp(1.14rem,1.8vw,1.5rem)}
.titres ul{display:grid;gap:6px;border-left:1px solid var(--accent);padding-left:clamp(22px,4.5vw,64px)}
.titres li{font-size:clamp(.98rem,1.25vw,1.12rem);color:var(--ink)}

.section-alt{background:var(--bg-2)}
.deux-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,84px);align-items:start}
.prose{max-width:68ch}
.prose p{color:var(--ink-soft)}
.prose p:first-child{color:var(--ink);font-size:1.08rem}
.prose p + p{margin-top:18px}
.prose .j-tags,.prose .j-liste{margin-top:24px}

/* liste de champs d'intervention, sur deux colonnes */
.champs{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,84px)}
.champs li{position:relative;padding:18px 0 18px 28px;border-top:1px solid var(--line);color:var(--ink);font-size:1.04rem;line-height:1.45}
.champs li::before{content:"";position:absolute;left:0;top:1.72em;width:12px;height:1px;background:var(--accent)}

.portes{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,84px)}
.porte{padding:26px 0;border-top:1px solid var(--line)}
.porte h3{font-size:clamp(1.24rem,2vw,1.5rem)}
.porte p{margin-top:10px;color:var(--ink-soft);font-size:.99rem;max-width:44ch}

/* =================== À PROPOS ===================
   Une biographie, à lire de haut en bas comme un texte. */
.apropos-tete{background:var(--bg);padding:clamp(128px,13vw,170px) 0 clamp(36px,5vw,64px)}
.apropos-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,84px);align-items:center}
.apropos-tete h1{margin-top:22px;font-size:clamp(2.4rem,5.4vw,4.2rem)}
.apropos-nom{margin-top:26px;font-family:var(--font-nom);font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--ink)}
.apropos-nom span{display:block;margin-top:5px;font-family:var(--font-body);font-weight:500;font-size:.88rem;letter-spacing:.03em;color:var(--accent-2)}
.apropos-chapo{margin-top:22px;max-width:30ch;font-family:var(--font-display);font-size:clamp(1.25rem,2.1vw,1.66rem);line-height:1.3;color:var(--ink)}
/* les diplômes : ils ont quitté le hero de l'accueil pour venir ici */
.diplomes{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 44px}
.diplomes li{font-size:.86rem;letter-spacing:.04em;color:var(--ink-soft)}
.diplomes b{
  display:block;font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.36rem);letter-spacing:0;color:var(--accent-2);
}
.apropos-photo{margin:0}
.apropos-photo img{width:100%;height:auto;display:block}

.bio{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:start;
  padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(70px,9vw,120px);
}
.bio-sommaire{position:sticky;top:104px}
.bio-sommaire p{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2)}
.bio-sommaire ol{margin-top:14px;border-left:1px solid var(--line)}
.bio-sommaire a{
  display:block;margin-left:-1px;padding:6px 0 6px 16px;border-left:1px solid transparent;
  font-size:.88rem;line-height:1.35;color:var(--ink-soft);transition:color .2s ease,border-color .2s ease;
}
.bio-sommaire a:hover,.bio-sommaire a.actif{color:var(--ink);border-color:var(--accent)}
.bio-texte{max-width:68ch}
.bio-texte section{scroll-margin-top:100px}
.bio-texte section + section{margin-top:clamp(46px,6vw,76px)}
.bio-texte h2{font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.14}
.bio-texte p{margin-top:18px;font-size:1.06rem;line-height:1.75;color:rgba(246,241,238,.82)}
.bio-texte section:first-child h2 + p{font-size:1.2rem;line-height:1.65;color:var(--ink)}
/* les phrases qui portent : plus grandes que le texte courant */
.bio-texte .exergue{
  position:relative;margin-top:clamp(30px,3.8vw,46px);padding-top:22px;
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.7vw,2.05rem);line-height:1.25;color:var(--accent-2);
}
.bio-texte .exergue::before{content:"";position:absolute;top:0;left:0;width:54px;height:2px;background:var(--accent)}
.bio-liste{margin-top:22px;border-top:1px solid var(--line)}
.bio-liste li{position:relative;padding:16px 0 16px 28px;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.6}
.bio-liste li::before{content:"";position:absolute;left:0;top:1.75em;width:12px;height:1px;background:var(--accent)}
.bio-suite{display:inline-flex;align-items:center;margin-top:20px;min-height:44px;font-weight:700;font-size:.92rem;color:var(--accent-2);border-bottom:1px solid rgba(var(--accent-rgb),.5);transition:color .2s ease,border-color .2s ease}
.bio-suite:hover{color:var(--ink);border-color:var(--ink)}
.bio-suite .fleche{display:inline-block;margin-left:.6em;transition:transform .25s ease}
.bio-suite:hover .fleche{transform:translateX(4px)}
.bio-image{margin:clamp(40px,5vw,60px) 0 0;overflow:hidden;border-radius:var(--radius)}
.bio-image img{width:100%;height:clamp(180px,24vw,300px);object-fit:cover;display:block}
.bio-texte .bio-fin{
  margin-top:clamp(28px,3.6vw,44px);padding-top:clamp(24px,3vw,36px);border-top:2px solid var(--accent);
  font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.22;color:var(--ink);
}

/* =================== FOOTER =================== */
.site-footer{background:var(--bg);border-top:1px solid var(--line);padding:56px 0 34px}
.footer-haut{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.footer-marque{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.footer-liens{display:flex;flex-wrap:wrap;gap:22px}
.footer-liens a{font-size:.9rem;color:var(--ink-soft);transition:color .2s}
.footer-liens a:hover{color:var(--accent-2)}
.footer-activites{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 26px}
.footer-activites a{font-size:.86rem;color:var(--ink-soft);transition:color .2s}
.footer-activites a:hover{color:var(--accent-2)}
.footer-bas{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--ink-soft);
}
.footer-bas p{max-width:62ch}
.footer-devise{font-family:var(--font-display);font-size:.95rem;color:var(--ink)}

/* =========================================================
   CARTE DE CONTACT (contact.html)
   Page à part, pensée pour être partagée : la carte, les liens,
   puis le parcours de prise de rendez-vous.
   ========================================================= */
.page-carte{background:var(--bg-2)}
.carte-page{padding:clamp(28px,5vw,64px) 0 clamp(70px,8vw,110px)}
.carte-wrap{width:100%;max-width:620px;margin:0 auto;padding:0 clamp(18px,5vw,28px)}

.carte{
  position:relative;overflow:hidden;text-align:center;
  background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) * 3);
  padding:clamp(26px,5vw,40px) clamp(20px,4vw,36px) clamp(26px,4vw,34px);
  box-shadow:var(--shadow);
}
.carte-lumiere{
  /* le dégradé doit être éteint avant d'atteindre le bord du bloc,
     sinon la lumière se coupe net en travers de la carte */
  position:absolute;inset:-30% -20% auto -20%;height:110%;pointer-events:none;
  background:radial-gradient(64% 52% at 50% 58%,var(--halo),rgba(0,0,0,0) 72%);
}
.carte-photo{position:relative;width:148px;height:auto;margin:0 auto}
.carte-nom{position:relative;margin-top:10px;font-family:var(--font-nom);font-weight:800;font-size:clamp(1.9rem,6vw,2.5rem)}
.carte-role{position:relative;margin-top:8px;font-size:.9rem;font-weight:500;letter-spacing:.03em;color:var(--accent-2)}
.carte-intro{position:relative;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);text-align:left;display:grid;gap:12px}
.carte-intro p{color:var(--ink);font-size:1rem;line-height:1.6}
.carte-titres{position:relative;margin-top:22px;text-align:left;display:grid;gap:6px;border-left:1px solid var(--accent);padding-left:18px}
.carte-titres li{font-size:.9rem;color:var(--ink-soft)}
.carte-phrase{position:relative;margin-top:14px;font-family:var(--font-display);font-style:italic;font-size:1.06rem;color:var(--ink-soft)}
.carte-interets{position:relative;margin-top:16px;font-size:.92rem;color:var(--ink-soft)}
.carte-retour{display:inline-flex;align-items:center;gap:.5em;margin-bottom:10px;min-height:44px;font-size:.88rem;font-weight:600;color:var(--ink-soft);transition:color .2s ease}
.carte-retour:hover{color:var(--accent-2)}

/* ---- parcours de rendez-vous ---- */
.rdv{
  scroll-margin-top:14px;
  margin-top:clamp(26px,4vw,38px);
  background:var(--bg);border:1px solid var(--line);border-radius:calc(var(--radius) * 3);
  padding:clamp(26px,5vw,40px) clamp(20px,4vw,36px) clamp(28px,4vw,38px);
}
.rdv-tete h2{margin-top:16px;font-size:clamp(1.5rem,4.4vw,2rem)}
.rdv-tete > p{margin-top:12px;color:var(--ink-soft);font-size:.96rem}
.rdv-barre{margin-top:26px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.rdv-barre span{
  display:block;height:100%;background:var(--accent);border-radius:3px;
  transform-origin:left center;transform:scaleX(0);transition:transform .4s ease;
}
.rdv-etape{margin-top:10px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
/* le sujet choisi (ou imposé par la page d'où l'on vient) reste affiché */
.rdv-sujet{margin-top:18px;padding:10px 14px;border-left:2px solid var(--accent);background:var(--surface);font-size:.9rem;font-weight:600;color:var(--accent-2)}
.rdv-question{margin-top:20px;font-size:clamp(1.25rem,4vw,1.6rem)}
.rdv-aide{margin-top:8px;font-size:.88rem;color:var(--ink-soft)}
.rdv-choix{margin-top:20px;display:grid;gap:9px}
.rdv-option{
  width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:.97rem;font-weight:500;
  padding:14px 18px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.rdv-option-nom{display:block}
.rdv-option-detail{display:block;margin-top:5px;font-size:.84rem;font-weight:400;color:var(--ink-soft);line-height:1.45}
.rdv-option:hover{border-color:var(--accent);transform:translateY(-2px)}
.rdv-option.est-choisi{border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}
.rdv-coordonnees{margin-top:20px;display:grid;gap:12px}
.rdv-ligne{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rdv-coordonnees input,.rdv-coordonnees textarea{
  width:100%;padding:.95em 1.1em;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink);font-family:inherit;font-size:.96rem;resize:vertical;
}
.rdv-coordonnees input::placeholder,.rdv-coordonnees textarea::placeholder{color:var(--ink-soft)}
.rdv-coordonnees input:focus,.rdv-coordonnees textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.rdv-coordonnees .btn{justify-self:start}
.rdv-erreur{font-size:.88rem;color:var(--accent-2);font-weight:600}
.rdv-note{font-size:.8rem;color:var(--ink-soft)}
.rdv-retour{
  margin-top:18px;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.88rem;color:var(--ink-soft);transition:color .2s ease;
}
.rdv-retour:hover{color:var(--accent-2)}
.rdv-merci{text-align:center;padding:14px 0 6px}
.rdv-merci h2{margin-top:16px;font-size:clamp(1.5rem,4.4vw,2rem)}
.rdv-merci p{margin-top:12px;color:var(--ink-soft)}
.rdv-merci .btn{margin-top:22px}

.carte-pied{margin-top:26px;text-align:center;font-size:.76rem;color:var(--ink-soft);line-height:1.6}

@media (max-width:520px){
  .rdv-ligne{grid-template-columns:1fr}
  .carte-page{padding-bottom:70px}
}

/* Au-delà de 1560 px, le cadre de page s'élargit. Sans ça le texte du hero
   se retrouve poussé vers le milieu, avec un grand vide à gauche, pendant que
   la photo occupe toute la moitié droite de la fenêtre. */
@media (min-width:1560px){
  .wrap{max-width:1480px}
  .hero-photo{width:48%;max-width:1040px}
}
@media (min-width:2200px){
  .wrap{max-width:1760px}
}

/* =================== RESPONSIVE =================== */
@media (max-width:980px){
  .nav-links,.nav-cta .btn{display:none}
  .contact-actions .btn{width:100%}
  .menu-btn{display:block}
  .section{padding:68px 0}
  .section-head h2{font-size:clamp(1.9rem,8vw,2.6rem)}

  /* Hero mobile : le portrait en haut, le texte en bas sur le fondu. */
  .hero-fond{display:none}
  .hero{min-height:100svh;padding:0 0 26px;display:flex;align-items:flex-end}
  /* décalée vers le bas : le haut du crâne ne passe plus sous le nom de l'en-tête */
  .hero-photo{width:100%;max-width:none;top:44px}
  .hero-photo img{object-position:56% 0%}
  .hero-photo::after{
    /* le fondu doit être installé avant la première ligne de texte :
       sans ça « Bonjour, moi c'est » tombe en blanc sur la chemise blanche */
    background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 0%,rgba(var(--bg-rgb),0) 24%,rgba(var(--bg-rgb),.9) 37%,var(--bg) 50%);
  }
  .hero-contenu{padding-top:36svh}
  .hero-nom{font-size:clamp(2.9rem,14.5vw,4.6rem)}
  .hero-roles{margin-top:12px;font-size:1.02rem}
  .hero-interets{margin-top:12px;padding-top:12px;font-size:.96rem}
  .hero-actions{margin-top:18px;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-signature{margin-top:18px;padding-top:14px;font-size:clamp(1.12rem,5vw,1.45rem)}
  .chiffres-grille{grid-template-columns:repeat(2,1fr)}
  .idee-grid{grid-template-columns:1fr;gap:26px}
  /* trois idées lues à la suite, sans boîtes */
  .fil{grid-template-columns:1fr;gap:0;margin-top:40px}
  .fil-carte{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0}
  .fil-carte:hover{transform:none}

  /* le parcours se feuillette au doigt, un jalon par carte */
  .bandeau-image img{height:180px}
  .jalons{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(clamp(20px,5vw,52px) * -1);padding-inline:clamp(20px,5vw,52px);padding-bottom:6px;
  }
  .jalons::-webkit-scrollbar{display:none}
  .jalon,.jalon:last-child{
    flex:0 0 84%;scroll-snap-align:center;padding:24px 22px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  }
  .jalon h3{font-size:1.4rem}
  .parcours-note{margin-top:26px}

  .pourvous-grille{grid-template-columns:1fr;gap:0}
  .pourvous-photo{display:none}
  .pourvous .btn{width:100%}

  .versants{grid-template-columns:1fr;gap:18px}
  .versant-lien{flex-direction:row;gap:14px}
  .vl-trait{width:46px;height:1px}
  .vl-mot{writing-mode:horizontal-tb}
  .clients{grid-template-columns:1fr}

  /* mes activités : le lien passe sous le texte */
  .activite{grid-template-columns:auto 1fr;align-items:start;padding:22px 0}
  .a-num{font-size:1.2rem;padding-top:.28em}
  .a-lien{grid-column:2;margin-top:12px}

  /* pages d'activité : l'image reste un fond, l'information passe devant */
  .page-tete{padding:112px 0 52px}
  .page-image{width:100%;opacity:.5}
  .page-image::after{background:linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,rgba(var(--bg-rgb),.86) 55%,var(--bg) 100%)}
  .page-tete .hero-cta{width:100%}
  .titres-grille,.deux-col,.champs,.portes{grid-template-columns:1fr}
  .titres ul{border-left:0;padding-left:0;padding-top:16px;border-top:1px solid var(--accent)}
  .titres-grille{gap:16px}
  .deux-col{gap:22px}

  /* à propos : le titre, puis le portrait en petit, puis le texte */
  .apropos-tete{padding:112px 0 26px}
  .apropos-grille{grid-template-columns:1fr;gap:28px}
  .apropos-photo{max-width:250px;margin:0 auto}
  .bio{grid-template-columns:1fr;padding-top:26px}
  .bio-sommaire{display:none}

  /* L'action reste à portée de pouce, mais seulement une fois le bouton du
     hero sorti de l'écran (voir script.js). */
  .barre-mobile{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(var(--bg-rgb),.94);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);
    transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .barre-mobile.est-visible{transform:none}
  .barre-mobile .btn{width:100%}
  body.menu-open .barre-mobile{display:none}
  .site-footer{padding-bottom:110px}
  /* au doigt : chaque lien du pied de page fait au moins 44 px de haut */
  .footer-liens,.footer-activites{gap:0 24px}
  .footer-liens a,.footer-activites a{display:inline-flex;align-items:center;min-height:44px}
  .footer-activites{flex-direction:column}
}
@media (max-width:600px){
  body{font-size:16px}
  .brand-nom{font-size:1.1rem}
  .brand-role{font-size:.68rem}
  .cf-ligne{grid-template-columns:1fr}
  .footer-bas{font-size:.76rem}
}