/* FINARE — feuille de style partagée
   Palette
   --ink:      #14181C  (texte principal)
   --slate:    #5B6470  (texte secondaire)
   --paper:    #FFFFFF  (fond principal)
   --stone:    #F2F1EC  (fond alterné)
   --line:     #DBDAD3  (traits, séparateurs)
   --brass:    #8E6A3C  (accent — laiton/bronze, sobre, institutionnel)
   --brass-dark:#6E5230
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#14181C;
  --slate:#5B6470;
  --paper:#FFFFFF;
  --stone:#F2F1EC;
  --line:#DBDAD3;
  --brass:#8E6A3C;
  --brass-dark:#6E5230;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'IBM Plex Sans', Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
}

p{margin:0 0 1em 0; color:var(--slate);}

a{color:inherit; text-decoration:none;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:0.01em;
}
.logo span{color:var(--brass);}
nav.main{display:flex; gap:36px;}
nav.main a{
  font-size:15px;
  color:var(--ink);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease;
}
nav.main a:hover, nav.main a.active{border-color:var(--brass);}
.nav-toggle{display:none;}

.btn{
  display:inline-block;
  padding:13px 26px;
  border-radius:2px;
  font-size:15px;
  font-weight:500;
  border:1px solid var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--brass-dark); border-color:var(--brass-dark);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

/* ---------- Hero ---------- */
.hero{
  padding:110px 0 90px;
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{
  font-size:14px;
  color:var(--brass);
  margin-bottom:22px;
  display:block;
}
.hero h1{
  font-size:clamp(34px, 5vw, 54px);
  max-width:15ch;
  margin-bottom:26px;
}
.hero p.lead{
  font-size:19px;
  max-width:52ch;
  margin-bottom:36px;
}
.hero .actions{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Section scaffolding ---------- */
section{padding:88px 0;}
section.alt{background:var(--stone);}
section + section{border-top:1px solid var(--line);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:16px;}

/* ---------- Expertise cards (accueil + listing) ---------- */
.grid-4{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--paper);
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.card .num{font-family:'Fraunces', serif; color:var(--brass); font-size:15px;}
.card h3{font-size:21px;}
.card p{margin:0; font-size:15px;}
.card .go{margin-top:auto; font-size:14px; font-weight:500; color:var(--brass-dark); padding-top:8px;}

/* ---------- Conviction / differentiation block ---------- */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:start;
}
.split blockquote{
  font-family:'Fraunces', serif;
  font-size:26px;
  line-height:1.3;
  margin:0 0 20px 0;
  color:var(--ink);
}

/* ---------- Tabs (Nos expertises) ---------- */
.tabs-nav{
  display:flex;
  border-bottom:1px solid var(--line);
  margin-bottom:56px;
  flex-wrap:wrap;
}
.tabs-nav button{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:15px;
  font-weight:500;
  background:none;
  border:none;
  cursor:pointer;
  padding:18px 4px;
  margin-right:40px;
  color:var(--slate);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tabs-nav button.active{color:var(--ink); border-color:var(--brass);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.trio{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin:44px 0;
}
.trio .item .num{
  font-family:'Fraunces', serif;
  color:var(--brass);
  font-size:15px;
  display:block;
  margin-bottom:10px;
}
.trio .item h4{font-size:17px; margin-bottom:10px; font-family:'IBM Plex Sans'; font-weight:600;}
.trio .item ul{margin:0; padding-left:18px; color:var(--slate); font-size:15px;}
.trio .item li{margin-bottom:4px;}

.callout{
  background:var(--stone);
  border-left:3px solid var(--brass);
  padding:28px 32px;
  margin:44px 0;
}
.callout p{margin:0; color:var(--ink); max-width:70ch;}

.keywords{font-size:14px; color:var(--slate); margin-top:32px; padding-top:20px; border-top:1px solid var(--line);}

/* ---------- Raison d'être — timeline / duo ---------- */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:20px;
}
.duo .pane{background:var(--paper); padding:40px;}
.duo .pane .tag{font-size:13px; color:var(--brass-dark); font-weight:500; margin-bottom:14px; display:block;}
.duo .pane h3{font-size:20px; margin-bottom:18px;}
.duo .pane ul{padding-left:18px; color:var(--slate); margin:0;}
.duo .pane li{margin-bottom:6px;}

.founder{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:40px;
  align-items:start;
  margin-top:36px;
}
.founder .plate{
  width:200px; height:200px;
  background:var(--stone);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:44px; color:var(--brass);
}
.founder .plate{padding:0; overflow:hidden;}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
}
.contact-info dl{margin:0;}
.contact-info dt{font-size:13px; color:var(--slate); margin-top:26px;}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{margin:4px 0 0 0; font-size:17px;}

form.contact-form{display:flex; flex-direction:column; gap:18px;}
form.contact-form label{font-size:13px; color:var(--slate); display:block; margin-bottom:6px;}
form.contact-form input[type="text"],
form.contact-form input[type="email"],
form.contact-form input[type="tel"],
form.contact-form select,
form.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--paper);
  font-family:'Inter', sans-serif;
  font-size:15px;
  border-radius:2px;
}
form.contact-form textarea{resize:vertical; min-height:100px; font-family:inherit;}
form.contact-form input:focus,
form.contact-form select:focus,
form.contact-form textarea:focus{outline:2px solid var(--brass); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.checkbox-row{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--slate);}
.checkbox-row input{margin-top:3px;}

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding:40px 0;
}
footer.site .wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  font-size:14px; color:var(--slate);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  nav.main{display:none;}
  .grid-4{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr; gap:32px;}
  .trio{grid-template-columns:1fr; gap:28px;}
  .duo{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .founder{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ============================================================
   V2 — Direction graphique renforcée + navigation en menu déroulant
   ============================================================ */

/* ---------- Header dropdown ---------- */
nav.main{align-items:center;}
.nav-item{position:relative; display:flex; align-items:center;}
.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:-24px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(20,24,28,0.10);
  padding:22px;
  width:440px;
  z-index:60;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown{display:block;}
.dropdown a.drop-link{
  display:flex; flex-direction:column;
  padding:12px 10px;
  border-left:2px solid transparent;
}
.dropdown a.drop-link:hover{border-color:var(--brass); background:var(--stone);}
.dropdown a.drop-link strong{font-size:14.5px; color:var(--ink); font-weight:500;}
.dropdown a.drop-link span{font-size:13px; color:var(--slate); margin-top:3px;}
.dropdown .drop-all{
  display:block; margin-top:8px; padding:12px 10px 4px;
  font-size:13px; color:var(--brass-dark); font-weight:600;
  border-top:1px solid var(--line);
}

/* ---------- Architectural grid backdrop (hero) ---------- */
.hero{position:relative; overflow:hidden;}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.45;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 88%);
          mask-image:linear-gradient(to bottom, black, transparent 88%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
.hero-visual{width:100%; height:auto; color:var(--brass);}
.rule-accent{width:44px; height:3px; background:var(--brass); margin-bottom:22px; border:none;}

/* ---------- Icon boxes ---------- */
.icon-box{
  width:52px; height:52px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--brass);
  margin-bottom:18px;
  background:var(--paper);
}
.icon-box svg{width:26px; height:26px;}
.card .icon-box{margin-bottom:16px;}

/* ---------- Overview cards (nos-expertises listing) ---------- */
.expertise-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:8px;
}
.expertise-list a.exp-card{
  background:var(--paper);
  padding:40px;
  display:flex; flex-direction:column; gap:12px;
}
.expertise-list a.exp-card:hover{background:var(--stone);}
.expertise-list a.exp-card h3{font-size:22px;}
.expertise-list a.exp-card p{margin:0; font-size:15px;}
.expertise-list a.exp-card .go{margin-top:auto; font-size:14px; font-weight:500; color:var(--brass-dark);}

/* ---------- Detail page hero (per-expertise) ---------- */
.expertise-hero{padding:96px 0 64px;}
.expertise-hero .eyebrow-row{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.expertise-hero .icon-box{margin-bottom:0;}
.breadcrumb{font-size:13px; color:var(--slate); margin-bottom:18px;}
.breadcrumb a{color:var(--brass-dark);}

/* ---------- Skyline decorative divider ---------- */
.skyline-divider{width:100%; height:auto; display:block; color:var(--line);}

/* ============================================================
   V3 — Palette issue du logo, finitions, menu mobile, "peps"
   ============================================================ */

/* ---------- Palette recalée sur le logo (navy / bleu-slate) ---------- */
:root{
  --ink:#13233A;         /* texte principal, proche du navy du logo */
  --slate:#5C7089;       /* texte secondaire — bleu-gris du logo */
  --paper:#FFFFFF;
  --stone:#F3F5F8;       /* fond alterné froid, plus de beige */
  --line:#E1E5EB;
  --brass:#2F4E76;       /* accent — bleu du logo (nom de variable conservé) */
  --brass-dark:#152A44;  /* accent foncé — hover/active */
  --brass-light:#7C93AC; /* teinte claire du dégradé du logo, badges/icônes */
}

/* ---------- Logo ---------- */
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces', serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:0.08em;
}
.logo-icon{height:34px; width:auto; display:block;}

/* ---------- Boutons : hover / active plus marqués ---------- */
.btn{
  position:relative;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.btn-primary{background:var(--ink); border-color:var(--ink); box-shadow:0 1px 2px rgba(19,35,58,0.12);}
.btn-primary:hover{background:var(--brass); border-color:var(--brass); box-shadow:0 6px 16px rgba(19,35,58,0.18); transform:translateY(-1px);}
.btn-primary:active{background:var(--brass-dark); border-color:var(--brass-dark); transform:translateY(0); box-shadow:0 2px 6px rgba(19,35,58,0.18);}
.btn-ghost{background:var(--paper);}
.btn-ghost:hover{background:var(--stone); border-color:var(--brass); color:var(--brass-dark); transform:translateY(-1px);}
.btn-ghost:active{background:var(--line); transform:translateY(0);}
.btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ---------- Cartes : finition premium au lieu du quadrillage plat ---------- */
.grid-4, .expertise-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  background:none;
  border:none;
}
.card, .exp-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:32px;
  box-shadow:0 1px 3px rgba(19,35,58,0.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, .exp-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(19,35,58,0.10);
  border-color:var(--brass-light);
}
.card .icon-box, .expertise-hero .icon-box{
  width:52px; height:52px;
  border:none;
  border-radius:6px;
  background:linear-gradient(135deg, var(--brass-light), var(--brass));
  color:#fff;
  transition:transform .18s ease;
}
.card:hover .icon-box{transform:scale(1.06) rotate(-2deg);}
.card .go, .exp-card .go{color:var(--brass); transition:gap .15s ease;}
.card:hover .go, .exp-card:hover .go{color:var(--brass-dark);}

/* ---------- Mobile nav toggle (icône menu déroulant) ---------- */
.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  color:var(--ink);
}
.nav-toggle .icon-burger, .nav-toggle .icon-close{width:22px; height:22px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.is-open .icon-burger{display:none;}
.nav-toggle.is-open .icon-close{display:block;}

.mobile-menu{
  display:none;
  position:fixed;
  top:76px; left:0; right:0; bottom:0;
  background:var(--paper);
  z-index:49;
  overflow-y:auto;
  border-top:1px solid var(--line);
}
.mobile-menu.open{display:block;}
.mobile-menu .wrap{
  display:flex; flex-direction:column;
  padding-top:28px; padding-bottom:60px;
}
.mobile-menu a{
  padding:14px 0;
  font-size:17px;
  border-bottom:1px solid var(--line);
}
.mobile-menu a.mm-sub{
  font-size:15px;
  color:var(--slate);
  padding-left:14px;
  border-bottom:1px solid var(--line);
}
.mobile-menu .mm-label{
  font-size:13px;
  color:var(--brass);
  text-transform:none;
  padding-top:18px;
  font-weight:500;
}

@media (max-width: 860px){
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
}
@media (min-width: 861px){
  .mobile-menu{display:none !important;}
}

/* ---------- Homepage hero : occupe l'espace, plus de "peps" ---------- */
.hero-full{
  min-height:calc(100vh - 76px);
  display:flex;
  align-items:center;
  padding:60px 0;
}
.hero-full::after{
  content:"";
  position:absolute;
  right:-120px; top:50%; transform:translateY(-50%);
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(47,78,118,0.08), transparent 70%);
  pointer-events:none;
}

/* ---------- Contact : icônes à côté des coordonnées ---------- */
.contact-info dl{display:flex; flex-direction:column; gap:0;}
.contact-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.contact-item:first-child{padding-top:0;}
.contact-item .icon-box{
  width:42px; height:42px; flex:none;
  border-radius:6px;
  background:linear-gradient(135deg, var(--brass-light), var(--brass));
  color:#fff;
}
.contact-item .icon-box svg{width:20px; height:20px;}
.contact-item dt{font-size:13px; color:var(--slate); margin:0;}
.contact-item dd{margin:2px 0 0 0; font-size:17px; color:var(--ink);}

/* ============================================================
   V4 — Finitions "cadres" : trio, callout, duo, founder plate
   ============================================================ */
.trio{gap:20px;}
.trio .item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:24px 22px;
  box-shadow:0 1px 3px rgba(19,35,58,0.04);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.trio .item:hover{box-shadow:0 10px 24px rgba(19,35,58,0.08); transform:translateY(-2px); border-color:var(--brass-light);}

.callout{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:0 6px 6px 0;
  box-shadow:0 1px 3px rgba(19,35,58,0.04);
}

.duo{
  background:none; border:none; gap:20px;
}
.duo .pane{
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:0 1px 3px rgba(19,35,58,0.04);
  transition:box-shadow .18s ease, transform .18s ease;
}
.duo .pane:hover{box-shadow:0 10px 26px rgba(19,35,58,0.08); transform:translateY(-2px);}

.founder .plate{
  border-radius:8px;
  background:linear-gradient(135deg, var(--stone), var(--line));
  color:var(--brass-dark);
  box-shadow:inset 0 0 0 1px var(--line);
}

/* Petits pictogrammes dans les listes "01/02/03" pour casser le mur de texte */
.trio .item h4{display:flex; align-items:center; gap:8px;}

/* ============================================================
   V5 — Refonte : police, échelle typo, navigation, griffe, couleur
   ============================================================ */

/* ---------- Police : Lora remplace Fraunces (glyphes plus sobres/lisibles) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

h1, h2, h3, .serif{
  font-family:'Lora', Georgia, serif;
  font-weight:600;
}

/* ---------- Échelle typographique unifiée ---------- */
h1{font-size:clamp(32px, 4vw, 46px); line-height:1.15;}
h2{font-size:clamp(25px, 2.6vw, 32px); line-height:1.2;}
h3{font-size:20px; line-height:1.3;}
h4{font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:16px; margin:0;}
p.lead{font-size:18px; line-height:1.5;}
p{font-size:16px;}
.text-sm{font-size:14px;}
.card h3, .exp-card h3{font-size:19px;}
.trio .item h4{font-size:16px;}

/* ---------- Couleur additionnelle (accent chaud, en complément du bleu) ---------- */
:root{
  --accent2:#B8763E;      /* terracotta doux — pour badges/tags, touches ponctuelles */
  --accent2-bg:#F7EEE4;
  --prose:800px;
}

/* ---------- Griffe de marque (remplace le quadrillage) ---------- */
.hero::before{content:none;}  /* on retire le quadrillage */
.brand-bar{
  height:4px;
  background:linear-gradient(90deg, var(--brass) 0%, var(--brass) 60%, var(--accent2) 100%);
}
.hero-full::after{
  background:radial-gradient(circle, rgba(184,118,62,0.10), transparent 70%);
}

/* ---------- Header : logo intact + slogan, navigation centrée, Contact distinct ---------- */
:root{ --header-h: 92px; }

header.site .wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:var(--header-h);
  gap:24px;
}
header.site{position:sticky; top:0;}
.mobile-menu{top:var(--header-h);}
.hero-full{min-height:calc(100vh - var(--header-h));}

.logo{
  display:flex; align-items:center; gap:12px;
  font-size:20px;
}
.logo-icon{height:38px; width:auto;}
.logo-text{display:flex; flex-direction:column; line-height:1.15;}
.logo-name{font-family:'Lora', serif; font-weight:600; font-size:19px; letter-spacing:0.06em;}
.logo-tagline{font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:10.5px; letter-spacing:0.03em; color:var(--slate); text-transform:none;}

nav.main{
  justify-self:center;
  display:flex; gap:40px;
}

.contact-btn{
  justify-self:end;
  background:var(--accent2);
  color:#fff;
  border:1px solid var(--accent2);
  padding:11px 24px;
  border-radius:2px;
  font-size:14.5px;
  font-weight:500;
  transition:background .16s ease, transform .1s ease, box-shadow .16s ease;
}
.contact-btn:hover{background:#9C6234; border-color:#9C6234; box-shadow:0 6px 16px rgba(184,118,62,0.28); transform:translateY(-1px);}
.contact-btn:active{background:#7E4F29; transform:translateY(0);}

@media (max-width: 860px){
  header.site .wrap{grid-template-columns:auto auto;}
  nav.main{display:none;}
  .contact-btn{display:none;}
}

/* ---------- Largeur de lecture homogène pour le contenu long ---------- */
.prose{max-width:var(--prose); margin-left:auto; margin-right:auto;}
.prose.left{margin-left:0;}

/* ---------- Tags/pills (remplace les listes de mots-clés isolées) ---------- */
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
.tag-pill{
  display:inline-block;
  font-size:13px;
  color:var(--accent2);
  background:var(--accent2-bg);
  border-radius:20px;
  padding:6px 14px;
}

/* ---------- Hero visual en image (remplace l'illustration SVG immeubles) ---------- */
.hero-visual-img{
  width:100%; height:100%;
  min-height:320px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 20px 50px rgba(19,35,58,0.18);
}

/* ---------- Footer : logo intact ---------- */
/* ============================================================
   V6 — Police unique, onglet actif, grille 4 cartes, centrage
   ============================================================ */

/* ---------- Police unique sur tout le site (Inter) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, h1, h2, h3, h4, .logo, .serif{
  font-family:'Inter', -apple-system, Helvetica, Arial, sans-serif;
}
h1, h2, h3{font-weight:700; letter-spacing:-0.01em;}
h4{font-weight:600;}
.logo-name{font-family:'Inter', sans-serif; font-weight:700;}

/* ---------- Onglet de navigation actif : surbrillance légère ---------- */
nav.main a{border-radius:5px; padding:8px 12px; border-bottom:none;}
nav.main a:hover{background:var(--stone); border-bottom:none;}
nav.main a.active{
  background:var(--stone);
  color:var(--brass-dark);
  font-weight:600;
}
.nav-item:has(a.active) > a{
  background:var(--stone);
  color:var(--brass-dark);
  font-weight:600;
}

/* ---------- Grille à 4 cartes égales (Structurer/Contrôler/Piloter/Sécuriser) ---------- */
.quad{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin:44px 0;
}
.quad .item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px 20px;
  box-shadow:0 1px 3px rgba(19,35,58,0.04);
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.quad .item:hover{box-shadow:0 10px 24px rgba(19,35,58,0.08); transform:translateY(-2px); border-color:var(--brass-light);}
.quad .item h4{margin-bottom:8px;}
.quad .item ul{margin:0; padding-left:16px; color:var(--slate); font-size:14.5px;}
.quad .item li{margin-bottom:3px;}

@media (max-width: 900px){
  .quad{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 520px){
  .quad{grid-template-columns:1fr;}
}

/* ---------- Contenu long : centré plutôt qu'aligné à gauche du conteneur ---------- */
.prose{margin-left:auto; margin-right:auto;}

/* ---------- Icône inline à côté du titre (au lieu d'une ligne isolée) ---------- */
.title-row{display:flex; align-items:center; gap:18px; margin-top:18px;}
.title-row h1{margin-top:0;}
.title-row .icon-box{flex:none; margin-bottom:0;}

/* ============================================================
   V7 — Logo intact, police unifiée réparée, pictogrammes,
   bandeau cookies, espacement des lignes
   ============================================================ */

/* ---------- Logo : image intacte uniquement, plus de texte retapé ---------- */
.logo{display:flex; align-items:center;}
.logo-img{height:46px; width:auto; display:block;}
/* ---------- Correction : polices orphelines encore sur Fraunces/Lora ---------- */
.split blockquote,
blockquote,
.card .num,
.hero-visual{
  font-family:'Inter', -apple-system, Helvetica, Arial, sans-serif !important;
}
blockquote{font-size:22px; line-height:1.4; font-weight:600; color:var(--ink); margin:0;}

/* ---------- Espacement des lignes, cohérence verticale ---------- */
body{line-height:1.65;}
p{line-height:1.7; margin-bottom:1.1em;}
h1{line-height:1.2; margin-bottom:0.4em;}
h2{line-height:1.3; margin-bottom:0.5em;}
h3, h4{line-height:1.35;}
.lead{line-height:1.6;}
li{line-height:1.6;}

/* ---------- Pictogrammes retirés des pages d'expertise (conservés sur nos-expertises) ---------- */
.expertise-hero .icon-box{display:none;}

/* ---------- Bandeau de consentement cookies ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px;
  max-width:640px; margin:0 auto;
  background:var(--ink);
  color:#fff;
  border-radius:8px;
  padding:20px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  z-index:100;
}
.cookie-banner.hidden{display:none;}
.cookie-banner p{color:#D8DEE6; font-size:13.5px; margin:0; flex:1 1 260px;}
.cookie-banner .cookie-actions{display:flex; gap:10px;}
.cookie-banner button{
  border:none; cursor:pointer; border-radius:4px;
  padding:9px 18px; font-size:13.5px; font-weight:500;
}
.cookie-accept{background:var(--brass); color:#fff;}
.cookie-decline{background:transparent; color:#D8DEE6; border:1px solid #465266 !important;}

/* ---------- Motto d'accueil ---------- */
.motto{
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
  margin-bottom:20px;
}
.motto span:not(:last-child)::after{content:"·"; margin-left:10px; color:var(--line);}

/* ---------- Sections pleine largeur alternées (rythme visuel type cabinet de conseil) ---------- */
.band-dark{
  background:var(--ink);
  color:#fff;
}
.band-dark h2, .band-dark h3{color:#fff;}
.band-dark p{color:#B7C2D0;}

/* ---------- Fil d'Ariane / maillage interne en bas de page ---------- */
.related{border-top:1px solid var(--line); padding-top:32px; margin-top:56px;}
.related h3{font-size:16px; margin-bottom:16px; color:var(--slate); font-weight:600;}
.related-links{display:flex; flex-wrap:wrap; gap:12px;}
.related-links a{
  font-size:14px; padding:9px 16px; border:1px solid var(--line); border-radius:20px;
  color:var(--ink); transition:border-color .15s ease, background .15s ease;
}
.related-links a:hover{border-color:var(--brass); background:var(--stone);}

/* ============================================================
   V8 — Hero photo plein écran, motto, bouton ghost sur fond sombre
   ============================================================ */
.hero-photo{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:center; justify-content:center;
  background:url('assets/hero-office.jpg') center/cover no-repeat;
  overflow:hidden;
}
.hero-photo-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,35,58,0.72), rgba(19,35,58,0.82));
}
.hero-photo-content{
  position:relative; z-index:1;
  text-align:center;
  max-width:800px;
  padding:60px 32px;
}
.hero-photo-content .motto{justify-content:center; color:#D9B98A;}
.hero-photo-content .motto span:not(:last-child)::after{color:rgba(255,255,255,0.35);}
.hero-photo-content h1{color:#fff;}
.hero-photo-content .lead{color:#E4E8ED;}
.btn-ghost-dark{border-color:rgba(255,255,255,0.55); color:#fff;}
.btn-ghost-dark:hover{background:rgba(255,255,255,0.12); border-color:#fff; color:#fff;}

@media (max-width: 760px){
  .band-dark .wrap[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr !important;}
}

/* ============================================================
   V9 — Logo agrandi, portrait fondateur élégant, finitions "peps"
   ============================================================ */

/* ---------- Logo : plus présent, surtout sur grand écran ---------- */
:root{ --header-h: 104px; }
.logo-img{height:64px;}
@media (min-width: 1400px){
  .logo-img{height:78px;}
}

/* ---------- Portrait du fondateur : cadrage élégant ---------- */
.founder{
  grid-template-columns:230px 1fr;
  gap:44px;
  align-items:center;
}
.founder .plate{
  width:230px; height:290px;
  border-radius:6px;
  background:var(--stone);
  padding:0;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(19,35,58,0.16);
}
.founder-photo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 12%;
  display:block;
}

/* ---------- Finitions générales : plus de "peps", élégant sans excès ---------- */

/* légère entrée en fondu du hero (impression de finition soignée, pas gadget) */
@keyframes riseIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-photo-content > *{animation:riseIn .7s ease both;}
.hero-photo-content .motto{animation-delay:.05s;}
.hero-photo-content h1{animation-delay:.15s;}
.hero-photo-content .lead{animation-delay:.25s;}
.hero-photo-content .actions{animation-delay:.35s;}

/* bouton principal : léger relief au lieu d'un aplat plat */
.btn-primary{
  background:linear-gradient(180deg, var(--ink), var(--brass-dark));
}
.btn-primary:hover{
  background:linear-gradient(180deg, var(--brass), var(--brass-dark));
}

/* accent2 (bouton Contact) : même traitement, un rien plus vivant */
.contact-btn{
  background:linear-gradient(180deg, #C6864C, var(--accent2));
}
.contact-btn:hover{
  background:linear-gradient(180deg, #D08F52, #9C6234);
}

/* rythme des sections un peu plus généreux, plus posé */
section{padding:96px 0;}
.hero, .expertise-hero{padding-top:96px;}

/* survol des cartes : très légère teinte de couleur au lieu du blanc pur */
.card:hover, .exp-card:hover{background:linear-gradient(180deg, #fff, var(--stone));}

@media (max-width: 640px){
  .founder{grid-template-columns:1fr; justify-items:center; text-align:center;}
  .founder .plate{width:200px; height:250px;}
}

/* ============================================================
   V10 — Cohérence avec la plaquette : bouton photo, sections,
   références, chiffres Groupe Global
   ============================================================ */

/* ---------- Bouton secondaire sur fond photo (corrige le bouton blanc cassé) ---------- */
.btn-secondary-photo{
  background:transparent;
  border:1px solid rgba(255,255,255,0.7);
  color:#fff;
}
.btn-secondary-photo:hover{
  background:rgba(255,255,255,0.14);
  border-color:#fff;
  color:#fff;
  transform:translateY(-1px);
}
.btn-secondary-photo:active{background:rgba(255,255,255,0.22);}

/* ---------- Situations déclenchantes (accueil) ---------- */
.trigger-row{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  margin-top:28px;
}
.trigger-chip{
  font-size:14.5px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:24px;
  color:var(--ink);
  background:var(--paper);
}

/* ---------- Les 3 clés (financier / contractuel / usages) ---------- */
.keys-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:40px;
}
.keys-grid .item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px 26px;
}
.keys-grid .item h3{font-size:18px; margin-bottom:14px;}
.keys-grid .item ul{margin:0; padding-left:18px; color:var(--slate); font-size:14.5px;}
.keys-grid .item li{margin-bottom:6px;}
@media (max-width:900px){.keys-grid{grid-template-columns:1fr;}}

/* ---------- Pourquoi Finare Conseil (différenciation, depuis la plaquette) ---------- */
.diff-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:40px;
}
.diff-grid .item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px;
  display:flex; gap:16px;
}
.diff-grid .item .icon-box{flex:none; margin-bottom:0;}
.diff-grid .item h3{font-size:17px; margin-bottom:8px;}
.diff-grid .item p{font-size:14.5px; margin:0;}
@media (max-width:760px){.diff-grid{grid-template-columns:1fr;}}

/* ---------- Chiffres Groupe Global ---------- */
.stats-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:28px;
}
.stats-row .stat{text-align:center; padding:20px;}
.stats-row .stat .num{
  font-size:34px; font-weight:700; color:var(--brass-dark); display:block;
}
.stats-row .stat .label{font-size:13.5px; color:var(--slate);}
@media (max-width:640px){.stats-row{grid-template-columns:1fr;}}

/* ---------- Références clients ---------- */
.refs-group{margin-bottom:28px;}
.refs-group h4{font-size:15px; margin-bottom:10px;}
.refs-group .names{font-size:14.5px; color:var(--slate);}

/* ---------- Tableau bailleur / preneur ---------- */
.lease-table{width:100%; border-collapse:collapse; margin-top:32px; font-size:14px;}
.lease-table th{
  background:var(--ink); color:#fff; font-weight:600;
  padding:12px 14px; text-align:left;
}
.lease-table td{
  padding:14px; border-bottom:1px solid var(--line); vertical-align:top;
}
.lease-table td:first-child{font-weight:600; background:var(--stone); width:110px;}
.lease-table ul{margin:0; padding-left:16px; color:var(--slate);}
.lease-table li{margin-bottom:4px;}
@media (max-width:760px){
  .lease-table{display:block; overflow-x:auto; white-space:nowrap;}
}

/* ============================================================
   V11 — Bandeau motto responsive, chips-boutons, centrage
   ============================================================ */
.band-motto{
  display:grid;
  grid-template-columns:repeat(3, minmax(200px, 1fr));
  gap:40px;
  padding-top:20px;
  padding-bottom:20px;
}
.band-motto h3{
  color:var(--accent2); font-size:14px; letter-spacing:0.1em;
  text-transform:uppercase; margin-bottom:12px;
}
@media (max-width: 900px){
  .band-motto{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width: 600px){
  .band-motto{grid-template-columns:1fr;}
}

/* ---------- Situations déclenchantes devenues boutons ---------- */
.trigger-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px;}
a.trigger-chip{
  font-size:14.5px;
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:24px;
  color:var(--ink);
  background:var(--paper);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
a.trigger-chip:hover{border-color:var(--brass); background:var(--stone); color:var(--brass-dark);}

/* ---------- Centrage garanti des blocs "text-align:center" ---------- */
.wrap.prose[style*="text-align:center"] p,
.wrap.prose[style*="text-align:center"] .lead{
  margin-left:auto; margin-right:auto;
}

/* ============================================================
   V12 — Footer légal, page mentions légales / confidentialité,
   téléchargement de la plaquette
   ============================================================ */
.footer-legal{display:flex; gap:20px; font-size:13px;}
.footer-legal a{color:var(--slate);}
.footer-legal a:hover{color:var(--brass-dark);}
/* ---------- Page légale : simple, lisible ---------- */
.legal-page h2{font-size:20px; margin-top:36px; margin-bottom:10px;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p, .legal-page li{font-size:15px; color:var(--slate);}
.legal-page strong{color:var(--ink);}
.legal-placeholder{
  background:var(--accent2-bg); color:var(--accent2);
  padding:2px 8px; border-radius:4px; font-size:13px; font-weight:600;
}

/* ---------- Téléchargement de la plaquette ---------- */
.download-card{
  display:flex; align-items:center; gap:18px;
  background:var(--stone);
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px 26px;
  margin-top:32px;
  max-width:480px;
  margin-left:auto; margin-right:auto;
}
.download-card .icon-box{flex:none; margin-bottom:0;}
.download-card .info{flex:1; text-align:left;}
.download-card .info strong{display:block; font-size:15px; color:var(--ink);}
.download-card .info span{font-size:13px; color:var(--slate);}

/* ============================================================
   V13 — Footer centré, LinkedIn, icônes "Ce qui nous distingue"
   ============================================================ */
.footer-centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
.footer-linkedin{
  display:flex; align-items:center; gap:8px;
  color:var(--slate); font-size:14px;
}
.footer-linkedin svg{width:20px; height:20px;}
/* ---------- Surbrillance de l'expertise en cours dans le menu mobile plein écran ---------- */
.mobile-menu a.mm-sub.active{
  color:var(--brass-dark);
  font-weight:600;
  background:var(--stone);
}

/* ============================================================
   V13 — Corrections: citation centrée, footer centré + LinkedIn,
   nouveaux pictos "Pourquoi Finare Conseil", surlignage menu mobile
   ============================================================ */

/* ---------- Citation "Notre conviction" : centrage garanti ---------- */
.conviction-quote{
  max-width:600px;
  margin:0 auto 20px auto !important;
  text-align:center;
}

/* ============================================================
   V14 — Footer en 3 colonnes centrées verticalement
   ============================================================ */
.footer-3col .footer-legal{display:flex; gap:20px; font-size:13px; justify-self:start;}
.footer-3col .footer-brand{
  justify-self:center; text-align:center;
  font-size:14px; color:var(--slate); font-weight:600;
}
.footer-3col .footer-social{display:flex; justify-self:end;}
.footer-3col .footer-social a{display:flex; color:var(--slate);}
.footer-3col .footer-social a:hover{color:var(--brass-dark);}
.footer-3col .footer-social svg{width:20px; height:20px;}

@media (max-width:700px){
  footer.site .wrap{grid-template-columns:1fr; justify-items:center; text-align:center;}
  .footer-3col .footer-legal{justify-content:center; justify-self:center;}
  .footer-3col .footer-social{justify-self:center;}
}

/* ============================================================
   V15 — Surlignage de l'expertise en cours dans le menu déroulant
   desktop uniquement (pas dans le menu plein écran mobile)
   ============================================================ */
.dropdown a.drop-link.active{
  border-left-color:var(--brass);
  background:var(--stone);
}
.dropdown a.drop-link.active strong{color:var(--brass-dark);}

/* ============================================================
   V16 — Page merci : centrage garanti + plaquette mise en avant
   ============================================================ */
.download-card-highlight{
  flex-direction:column;
  text-align:center;
  max-width:420px;
  padding:32px 28px;
  background:var(--paper);
  border:2px solid var(--brass);
  box-shadow:0 16px 40px rgba(19,35,58,0.14);
  gap:14px;
}
.download-card-highlight .icon-box{
  width:56px; height:56px;
  background:linear-gradient(135deg, var(--brass-light), var(--brass));
  color:#fff;
}
.download-card-highlight .info{text-align:center;}
.download-card-highlight .info strong{font-size:17px;}
.download-card-highlight .btn{margin-top:6px;}

/* ============================================================
   V17 — Hero fusionné : eyebrow et chips adaptés au fond photo
   ============================================================ */
.eyebrow-photo{
  display:block;
  font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent2); font-weight:600;
  margin-bottom:18px;
}
.trigger-row-photo{margin-top:32px; margin-bottom:32px;}
a.trigger-chip-photo{
  font-size:14px; font-weight:600;
  padding:11px 20px;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:24px;
  color:#fff;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(2px);
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
  transition:background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease;
}
a.trigger-chip-photo:hover{
  background:var(--accent2);
  border-color:var(--accent2);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(184,118,62,0.35);
}

/* ============================================================
   V18 — Grille des 5 situations (accueil), largeur unique 760px
   ============================================================ */
.verb-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:36px;
}
.verb-item{
  display:flex; flex-direction:column; gap:4px;
  padding:20px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.verb-item:hover{
  border-color:var(--brass-light);
  box-shadow:0 10px 24px rgba(19,35,58,0.08);
  transform:translateY(-2px);
}
.verb-item strong{font-size:15px; color:var(--ink);}
.verb-item span{font-size:13px; color:var(--slate);}

@media (max-width:640px){
  .verb-grid{grid-template-columns:1fr 1fr; gap:12px;}
}
@media (max-width:420px){
  .verb-grid{grid-template-columns:1fr;}
}


/* ============================================================
   V19 — Boutons, header mobile avec Contact, échelle typo stricte,
   blocs de largeur égale, sections d'accueil (méthode, FAQ, fin de page)
   ============================================================ */

/* ---------- Échelle typographique : un titre est TOUJOURS plus grand que le texte ---------- */
p, li{font-size:16px;}
h3{font-size:20px;}
h4, .trio .item h4, .quad .item h4, .refs-group h4{font-size:18px;}
.card h3, .exp-card h3, .keys-grid .item h3, .diff-grid .item h3{font-size:20px;}
.related h3{font-size:18px;}
/* texte des blocs : même taille partout (plus de texte réduit dans le 1er bloc) */
.card p, .expertise-list a.exp-card p, .trio .item ul, .trio .item li, .quad .item ul,
.quad .item li, .keys-grid .item ul, .keys-grid .item li, .diff-grid .item p,
.duo .pane ul, .duo .pane li, .callout p{font-size:16px;}

/* ---------- Blocs de largeur strictement égale ---------- */
@media (min-width:861px){
  .trio, .grid-4, .expertise-list, .duo{grid-template-columns:repeat(var(--cols,2), minmax(0,1fr));}
  .trio{--cols:3;}
}
@media (min-width:901px){ .quad{grid-template-columns:repeat(4, minmax(0,1fr));} }
.prose .section-head{max-width:none; margin-bottom:40px;}
.eyebrow-section{
  display:block; font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brass); font-weight:600; margin-bottom:12px;
}

/* ---------- Boutons : zone tactile confortable, rayon cohérent avec les cartes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 28px; border-radius:6px;
  font-size:15px; font-weight:600; letter-spacing:0.01em; line-height:1.2; text-align:center;
}
.btn-accent{
  background:linear-gradient(180deg,#C6864C,var(--accent2));
  border-color:var(--accent2); color:#fff;
  box-shadow:0 1px 2px rgba(184,118,62,0.25);
}
.btn-accent:hover{background:linear-gradient(180deg,#D08F52,#9C6234); border-color:#9C6234; box-shadow:0 8px 18px rgba(184,118,62,0.30); transform:translateY(-1px);}
.btn-accent:active{background:#7E4F29; border-color:#7E4F29; transform:translateY(0);}
.contact-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; border-radius:6px; font-weight:600; white-space:nowrap;
}
.contact-btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.text-link{
  font-size:15px; font-weight:500; color:var(--brass);
  border-bottom:1px solid var(--line); padding-bottom:2px; align-self:flex-start;
  transition:color .15s ease, border-color .15s ease;
}
.text-link:hover{color:var(--brass-dark); border-color:var(--brass);}

/* ---------- Header : le bouton Contact reste visible à côté du menu en fenêtre étroite et sur mobile ---------- */
@media (max-width:860px){
  header.site .wrap{grid-template-columns:1fr auto auto; gap:10px;}
  .contact-btn{display:inline-flex; padding:0 16px; min-height:42px; font-size:14px;}
  .nav-toggle{width:44px; height:44px;}
}
@media (max-width:480px){
  :root{--header-h:84px;}
  header.site .wrap{padding:0 16px; gap:8px;}
  .logo-img{height:46px;}
  .contact-btn{padding:0 14px; font-size:13.5px;}
}

/* ---------- Méthodologie : pictogrammes dans les blocs ---------- */
.trio .item .icon-box{
  width:52px; height:52px; border:none; border-radius:6px;
  background:linear-gradient(135deg, var(--brass-light), var(--brass)); color:#fff;
}
.trio .item .icon-box svg{width:26px; height:26px;}

/* ---------- FAQ : accordéon natif, fonctionne au toucher comme à la souris ---------- */
.faq details{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  margin-bottom:12px; box-shadow:0 1px 3px rgba(19,35,58,0.04);
}
.faq details[open]{border-color:var(--brass-light);}
.faq summary{
  list-style:none; cursor:pointer; position:relative; min-height:48px;
  padding:20px 60px 20px 24px; font-size:18px; font-weight:600; line-height:1.4; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--brass); border-bottom:2px solid var(--brass);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq summary:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:6px;}
.faq details p{margin:0; padding:0 24px 22px;}
@media (hover:hover){ .faq summary:hover{color:var(--brass-dark);} }

/* ---------- Fin de page : deux blocs égaux ---------- */
.duo .pane{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.duo .pane h3{font-size:22px; margin-bottom:14px;}
.duo .pane p{margin-bottom:22px;}
.duo .pane .btn, .duo .pane .text-link{margin-top:auto;}

/* ---------- Tactile : pas d'effet de survol qui reste "collé" ---------- */
@media (hover:none){
  .card:hover, .exp-card:hover, .trio .item:hover, .quad .item:hover, .duo .pane:hover,
  .verb-item:hover, .btn:hover, .contact-btn:hover, a.trigger-chip-photo:hover{transform:none;}
}


/* ============================================================
   V20 — Titres homogènes et colorés, largeur des en-têtes alignée sur les blocs
   ============================================================ */
:root{--title-accent:#9C6234;}  /* terracotta foncé de la palette (lisible sur blanc) */

/* Titres de section en couleur */
section h2{color:var(--title-accent);}
.legal-page h2{color:var(--ink);}

/* Un seul format pour tous les titres de section d'une page */
h1.h-section, h2.h-section{
  font-size:clamp(26px, 3vw, 34px);
  line-height:1.25;
  color:var(--title-accent);
  margin-bottom:0.5em;
}

/* Blocs "Finare Conseil / Groupe Global" : le titre de catégorie devient le titre dominant */
.duo .pane .tag{
  font-size:22px; font-weight:700; color:var(--title-accent);
  margin-bottom:10px; letter-spacing:-0.01em;
}
.duo .pane .tag + h3{font-size:18px; color:var(--ink); margin-bottom:14px;}
.duo .pane h3{color:var(--title-accent);}
.duo .pane .tag + h3{color:var(--ink);}

/* En-têtes de page : même largeur que les blocs situés en dessous */
.hero .wrap.prose > h1,
.hero .wrap.prose > p.lead{max-width:none !important;}

/* ============================================================
   V21 — Correctif mobile : les 4 cartes d'expertise s'empilent
   (la règle mobile précédente était écrasée par une règle 2 colonnes placée plus bas)
   ============================================================ */
@media (max-width:860px){
  .grid-4, .expertise-list{grid-template-columns:minmax(0,1fr);}
  .card, .exp-card{padding:24px 22px;}
}


/* ============================================================
   V22 — FAQ : réponses avec liste ou plusieurs paragraphes
   ============================================================ */
.faq details p.tight{padding-bottom:10px;}
.faq details ul{margin:0; padding:0 24px 22px 46px;}
.faq details li{margin-bottom:8px; line-height:1.65;}
.faq details li:last-child{margin-bottom:0;}