/* =============================================================
   Jonathan Lucchetta — Conseiller en gestion de patrimoine
   Feuille de style du site vitrine (page unique, statique)
   Charte : confiance institutionnelle, sobriété, lisibilité.
   Aucune ressource externe : polices auto-hébergées (SIL OFL).
   ============================================================= */

/* ---------- Polices auto-hébergées ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/sourceserif4-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/sourceserif4-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Jetons de design ---------- */
:root{
  /* Palette : bleu nuit patrimonial + laiton chaleureux + ivoire */
  --c-navy-900:#0B2035;
  --c-navy-800:#0E2B45;
  --c-navy-700:#163B5C;
  --c-navy-600:#245078;
  --c-navy-100:#E4EBF2;
  --c-navy-050:#F2F6FA;

  --c-brass-700:#8A6C33;
  --c-brass-600:#A8823F;
  --c-brass-500:#B08D4F;
  --c-brass-100:#F3EADA;

  --c-ink:#16202B;
  --c-ink-soft:#4E5C6B;
  --c-ink-mute:#71808F;
  --c-line:#E2E6EB;
  --c-line-soft:#EEF1F4;
  --c-paper:#FFFFFF;
  --c-ivory:#FBF9F5;
  --c-green:#2E6B52;

  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(11,32,53,.05),0 2px 8px rgba(11,32,53,.045);
  --shadow-md:0 2px 4px rgba(11,32,53,.05),0 12px 32px rgba(11,32,53,.075);

  --ff-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ff-serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  --wrap:1140px;
  --gutter:clamp(20px,5vw,40px);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--c-paper);color:var(--c-ink);
  font-family:var(--ff-sans);font-size:17px;line-height:1.65;
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-navy-700);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--c-brass-700)}
h1,h2,h3,h4{font-family:var(--ff-serif);font-weight:600;line-height:1.18;letter-spacing:-.011em;color:var(--c-navy-900);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.35rem + 2.6vw,3.35rem);letter-spacing:-.021em}
h2{font-size:clamp(1.55rem,1.15rem + 1.35vw,2.2rem)}
h3{font-size:clamp(1.09rem,1rem + .38vw,1.3rem)}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.32em 0}
strong{font-weight:600;color:var(--c-navy-900)}
:focus-visible{outline:3px solid var(--c-brass-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--c-brass-100);color:var(--c-navy-900)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,7vw,96px)}
.section--ivory{background:var(--c-ivory);border-block:1px solid var(--c-line-soft)}
.section--navy{background:var(--c-navy-800);color:#DCE6EF}
.section--navy h2,.section--navy h3{color:#fff}
.lede{font-size:clamp(1.06rem,1rem + .35vw,1.24rem);color:var(--c-ink-soft);max-width:62ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.735rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-brass-700);margin:0 0 .9em;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--c-brass-500);display:block}
.section--navy .eyebrow{color:var(--c-brass-500)}
.section--navy .eyebrow::before{background:var(--c-brass-500)}

/* ---------- Accessibilité ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--c-navy-800);color:#fff;padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Marqueur de contenu à personnaliser ---------- */
.todo{background:#FFF4C2;outline:1px dashed #C99A00;padding:0 .25em;border-radius:3px;font-style:normal}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--c-line);
}
.site-header__inner{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  margin-right:auto;min-width:0;
}
.brand__mark{flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand__name,.brand__role{overflow:hidden;text-overflow:ellipsis}
.brand__name{font-family:var(--ff-serif);font-weight:600;font-size:1.05rem;color:var(--c-navy-900);letter-spacing:-.01em}
.brand__role{font-size:.735rem;color:var(--c-ink-mute);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px)}
/* Les libellés ne doivent jamais se couper en deux lignes : un en-tête sur
   deux étages se remarque plus que l'espace qu'il économise. */
.nav a{
  font-size:.925rem;font-weight:500;color:var(--c-ink-soft);text-decoration:none;
  white-space:nowrap;
}
/* Le sous-titre n'est masqué que dans la fourchette où la navigation complète
   et lui se disputent la place. Sous 900 px, la navigation cède la place au
   menu : le sous-titre peut revenir. */
.brand__role{white-space:nowrap}
@media (min-width:901px) and (max-width:1150px){.brand__role{display:none}}
/* Sous 400 px, le sous-titre ne tient plus sans tronquer le nom lui-même. */
@media (max-width:400px){.brand__role{display:none}}
.nav a:hover{color:var(--c-navy-800)}
/* Deux classes l'emportent sur « .nav a » : le bouton conserve son texte blanc. */
.nav .btn--primary,.nav .btn--primary:hover{color:#fff}
@media (max-width:900px){.nav{display:none}}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ff-sans);font-size:.96rem;font-weight:600;line-height:1;
  padding:.92em 1.5em;border-radius:var(--radius-sm);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--c-navy-800);color:#fff}
.btn--primary:hover{background:var(--c-navy-700);color:#fff}
.btn--ghost{background:transparent;color:var(--c-navy-800);border-color:var(--c-navy-100)}
.btn--ghost:hover{background:var(--c-navy-050);color:var(--c-navy-900);border-color:var(--c-navy-600)}
.btn--brass{background:var(--c-brass-500);color:#1B1408}
.btn--brass:hover{background:var(--c-brass-600);color:#1B1408}
.btn--sm{padding:.6em 1.05em;font-size:.86rem}
.btn--sur-sombre{color:#fff;border-color:rgba(255,255,255,.28)}
.btn--sur-sombre:hover{color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.5)}

/* ---------- Héros ---------- */
.hero{position:relative;overflow:hidden;background:var(--c-navy-800);color:#D9E4EE}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(72ch 42ch at 88% -8%,rgba(176,141,79,.20),transparent 62%),
    radial-gradient(64ch 40ch at 6% 108%,rgba(36,80,120,.55),transparent 60%);
}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.28fr .82fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(56px,7.5vw,104px)}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr;padding-block:52px}}
.hero h1{color:#fff;margin-bottom:.32em}
.hero__role{font-family:var(--ff-serif);font-size:clamp(1.1rem,1rem + .55vw,1.4rem);color:var(--c-brass-500);margin:0 0 1.15em;font-weight:400}
.hero__txt{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:#C3D2E0;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:#A9BDCF}
.hero__meta span{display:inline-flex;align-items:center;gap:.5em}
.hero__portrait{position:relative}
.portrait{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(160deg,#1B4568,#0B2035);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;
}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait{margin:0}
@media (max-width:900px){.hero__portrait{max-width:320px}}

/* ---------- Bandeau de confiance ---------- */
.trust{background:var(--c-ivory);border-bottom:1px solid var(--c-line-soft)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border-inline:1px solid var(--c-line)}
@media (max-width:820px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.trust__grid{grid-template-columns:1fr}}
.trust__cell{background:var(--c-ivory);padding:22px 24px}
.trust__k{font-family:var(--ff-serif);font-size:1.02rem;color:var(--c-navy-900);font-weight:600;margin:0 0 .15em}
.trust__v{font-size:.83rem;color:var(--c-ink-mute);margin:0;line-height:1.5}

/* ---------- Grilles ---------- */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:26px 26px 22px;box-shadow:var(--shadow-sm);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.card:hover{border-color:var(--c-navy-100);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--c-ink-soft);font-size:.95rem}
.card__ico{
  width:42px;height:42px;border-radius:10px;background:var(--c-navy-050);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--c-navy-700);
}
.card__ico svg{width:22px;height:22px}

/* ---------- Chronologie de la démarche ---------- */
.chrono{
  list-style:none;margin:2.6rem 0 0;padding:0;position:relative;
}
/* Rail vertical : gris clair en fond, laiton pour la progression. */
.chrono__rail{
  position:absolute;left:23px;top:14px;bottom:14px;width:2px;
  background:var(--c-line);border-radius:2px;
}
.chrono__progres{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--c-navy-600),var(--c-brass-500));
  transition:height 1.1s cubic-bezier(.22,.61,.36,1);
}
.chrono__etape{
  position:relative;padding:0 0 34px 74px;margin:0;
  opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--retard,0ms);
}
.chrono__etape:last-child{padding-bottom:0}
.chrono__etape.est-visible{opacity:1;transform:none}

.chrono__pastille{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-serif);font-size:1.02rem;font-weight:600;
  color:var(--c-ink-mute);background:var(--c-paper);
  border:1px solid var(--c-line);
  transition:color .5s ease,border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:var(--retard,0ms);
}
.chrono__etape.est-visible .chrono__pastille{
  color:var(--c-brass-700);border-color:var(--c-brass-500);
  box-shadow:0 0 0 5px var(--c-brass-100);transform:scale(1.04);
}
.chrono__carte{
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow-sm);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.chrono__etape:hover .chrono__carte{
  border-color:var(--c-navy-100);box-shadow:var(--shadow-md);transform:translateY(-2px);
}
.chrono__carte h3{margin:0 0 .3em;font-size:1.12rem}
.chrono__carte p{margin:0;color:var(--c-ink-soft);font-size:.95rem;max-width:66ch}

@media (max-width:560px){
  .chrono__rail{left:17px}
  .chrono__etape{padding-left:56px;padding-bottom:26px}
  .chrono__pastille{width:36px;height:36px;font-size:.86rem}
  .chrono__carte{padding:16px 18px}
}
/* Sans JavaScript, ou si l'utilisateur limite les animations, tout est visible. */
@media (prefers-reduced-motion:reduce){
  .chrono__etape{opacity:1;transform:none}
  .chrono__progres{transition:none}
}
.no-js .chrono__etape{opacity:1;transform:none}

/* ---------- Déroulé RDV (sur fond navy) ---------- */
.rdv{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px}
.rdv__item{border-top:2px solid var(--c-brass-500);padding-top:18px}
.rdv__item h3{font-size:1.08rem;margin-bottom:.35em}
.rdv__item p{color:#B7C8D7;font-size:.93rem;margin:0}
.rdv__dur{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brass-500);font-weight:600;display:block;margin-bottom:.55em}

/* Empilées, les trois étapes se suivaient de trop près : le filet laiton de
   la suivante arrivait presque au contact du texte de la précédente, et le
   déroulé se lisait comme un seul bloc. On desserre, et on numérote : sur une
   seule colonne, le rang n'est plus donné par la position horizontale. */
@media (max-width:820px){
  .rdv{grid-template-columns:1fr;gap:0;margin-top:20px;counter-reset:etape}
  .rdv__item{
    counter-increment:etape;position:relative;
    border-top:1px solid rgba(255,255,255,.14);
    padding:28px 0 32px 52px;
  }
  .rdv__item:first-child{border-top:2px solid var(--c-brass-500);padding-top:26px}
  .rdv__item:last-child{padding-bottom:8px}

  .rdv__item::before{
    content:counter(etape);
    position:absolute;left:0;top:26px;
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(176,141,79,.14);border:1px solid rgba(176,141,79,.45);
    color:var(--c-brass-500);font:600 .95rem/1 var(--ff-sans);
  }
  .rdv__item:first-child::before{top:34px}

  .rdv__dur{margin-bottom:.7em}
  .rdv__item h3{font-size:1.14rem;margin-bottom:.5em}
  .rdv__item p{font-size:.95rem;line-height:1.65}
}

/* ---------- Le pacte : engagements et garanties ---------- */
/* Deux colonnes courtes, séparées par un filet, sans puces : la légèreté
   vient de la brièveté des formulations autant que de la mise en forme. */
.pacte{
  margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
/* Le filet est une bordure de la seconde colonne, et non un element de grille.
   Un pseudo-element place en colonne 2 decalait le placement automatique :
   le premier bloc partait en colonne 3, le second a la ligne suivante. */
.pacte__col{padding-right:clamp(20px,3vw,44px)}
.pacte__col + .pacte__col{
  border-left:1px solid rgba(255,255,255,.13);
  padding-left:clamp(24px,4vw,52px);padding-right:0;
}
.pacte__titre{
  font:600 .78rem/1.3 var(--ff-sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-brass-500);margin:0 0 1rem;
}
.pacte__liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pacte__liste li{
  position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.55;
  color:rgba(255,255,255,.82);
}
.pacte__liste li::before{position:absolute;left:0;top:0;font-weight:700}
.pacte__liste--oui li::before{content:"\2713";color:var(--c-brass-500)}
.pacte__liste--non li::before{content:"\2715";color:#5E7B95}
.pacte__liste--non li{color:#9FB4C6}

/* ---------- FAQ ---------- */
.faq{max-width:820px;border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--ff-serif);font-size:1.08rem;font-weight:600;color:var(--c-navy-900);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--c-brass-600);border-bottom:2px solid var(--c-brass-600);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--c-navy-700)}
.faq__body{padding:0 8px 22px 0;color:var(--c-ink-soft);font-size:.97rem}
.faq__body p:last-child{margin-bottom:0}

/* ---------- Coordonnées ---------- */
.coord{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;
}
@media (max-width:760px){.coord{grid-template-columns:1fr;gap:6px}}
.coord__item{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px 0;border-bottom:1px solid var(--c-line);
}
@media (min-width:761px){
  /* Sur deux colonnes, les deux dernières lignes n'ont pas de séparateur. */
  .coord__item:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
}
@media (max-width:760px){.coord__item:last-child{border-bottom:0}}
.coord__ico{
  flex:none;width:38px;height:38px;border-radius:10px;background:var(--c-navy-050);
  display:flex;align-items:center;justify-content:center;color:var(--c-navy-700);
}
.coord__ico svg{width:19px;height:19px}
.coord__corps{min-width:0;display:flex;flex-direction:column;gap:3px}
.coord__k{
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-ink-mute);font-weight:600;
}
.coord__v{font-size:1.02rem;color:var(--c-navy-900);font-weight:500;line-height:1.45}
.coord__note{font-size:.87rem;color:var(--c-ink-soft);line-height:1.5;margin-top:2px}

/* ---------- Coordonnées révélées au clic ---------- */
.reveal{display:inline-flex;align-items:center}
.reveal__btn{
  display:inline-flex;align-items:center;gap:.55em;
  font:600 .96rem/1 var(--ff-sans);color:var(--c-navy-800);
  background:var(--c-paper);border:1px solid var(--c-navy-100);
  padding:.62em 1.05em;border-radius:99px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .1s;
}
.reveal__btn:hover{background:var(--c-navy-050);border-color:var(--c-navy-600);color:var(--c-navy-900)}
.reveal__btn:active{transform:translateY(1px)}
.reveal__btn svg{width:16px;height:16px;flex:none;opacity:.75}

/* Variante mise en avant, dans le héros */
.reveal--brass .reveal__btn{
  background:var(--c-brass-500);border-color:var(--c-brass-500);color:#1B1408;
  font-size:.96rem;padding:.92em 1.5em;border-radius:var(--radius-sm);
}
.reveal--brass .reveal__btn:hover{background:var(--c-brass-600);border-color:var(--c-brass-600);color:#1B1408}
.reveal--brass .reveal__btn svg{opacity:1}

/* Valeur affichée après le clic */
.reveal__valeur{
  font-size:1.02rem;font-weight:600;color:var(--c-navy-900);
  text-decoration:none;letter-spacing:.01em;word-break:break-word;
  animation:reveal-apparait .35s cubic-bezier(.22,.61,.36,1) both;
}
.reveal__valeur:hover{color:var(--c-brass-700);text-decoration:underline}
.reveal--brass .reveal__valeur{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--c-brass-500);color:#1B1408;
  padding:.92em 1.5em;border-radius:var(--radius-sm);font-size:1.02rem;
}
.reveal--brass .reveal__valeur:hover{background:var(--c-brass-600);color:#1B1408;text-decoration:none}
@keyframes reveal-apparait{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal__valeur{animation:none}}

/* Sans JavaScript : la valeur est affichée directement, sans lien cliquable. */
.reveal__repli{font-size:1.02rem;font-weight:600;color:var(--c-navy-900)}

/* ---------- Encart d'avertissement (mentions légales) ---------- */
.notice{
  border-left:3px solid var(--c-brass-500);background:var(--c-brass-100);
  padding:18px 22px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.89rem;color:#5C4A24;
}
.notice p:last-child{margin-bottom:0}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--c-navy-900);color:#8FA6BA;font-size:.8rem;padding-block:44px 32px}
.site-footer a{color:#C0D1E0;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
/* Les liens rapides tiennent sur une seule ligne : la gouttière se resserre
   avec la place disponible, et aucun libellé ne se coupe. Sous 900 px, où
   neuf liens ne tiennent plus, ils reprennent le droit de se répartir. */
.site-footer__nav{
  display:flex;flex-wrap:nowrap;gap:clamp(9px,1.4vw,20px);
  /* La taille suit la largeur disponible entre 900 et 1300 px : c'est la
     seule façon de tenir sur une ligne sans jamais déborder. */
  font-size:clamp(.7rem, .5rem + .36vw, .79rem);
}
.site-footer__nav a{white-space:nowrap}
@media (max-width:900px){
  .site-footer__nav{flex-wrap:wrap;gap:2px 18px}
}
.site-footer__legal{padding-top:22px;line-height:1.65;color:#7C93A8;font-size:.755rem;max-width:none}
.site-footer__legal p{margin:0 0 .7em}

/* ---------- Contenu long (mentions légales) ---------- */
.doc{max-width:78ch}
.doc h2{margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--c-line);font-size:1.42rem}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:1em}
.doc h3{margin-top:1.7em;font-size:1.1rem}
.doc p,.doc li{color:var(--c-ink-soft)}
.doc__toc{background:var(--c-ivory);border:1px solid var(--c-line);border-radius:var(--radius);padding:20px 24px;margin-bottom:2.5rem}
.doc__toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:32px}
@media (max-width:640px){.doc__toc ol{columns:1}}
.doc__toc li{margin:.3em 0;font-size:.93rem}
.doc dl{margin:0}
.doc dt{font-weight:600;color:var(--c-navy-900);margin-top:1em}
.doc dd{margin:.15em 0 0;color:var(--c-ink-soft)}

/* ---------- Confort tactile ---------- */
/* Les critères d'accessibilité recommandent une cible d'au moins 44 px de côté.
   Les liens intégrés à un paragraphe en sont dispensés : les élargir casserait
   l'interligne du texte courant. */
.reveal__btn{min-height:44px}
.brand{min-height:44px}
.site-footer__nav a{display:inline-flex;align-items:center;min-height:44px}
.faq summary{min-height:56px;display:flex;align-items:center}
@media (max-width:760px){
  .site-footer__nav{gap:0 22px}
  .btn{min-height:46px}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Impression ---------- */
@media print{
  .site-header,.hero__cta,.skip,.nav{display:none!important}
  .reveal__btn{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero,.section--navy{background:#fff!important;color:#000!important}
  .hero h1,.section--navy h2,.section--navy h3{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .section{padding-block:18px}
  .card{break-inside:avoid;box-shadow:none}
}

/* =============================================================================
   Bouton en icône seule — profil LinkedIn
   ========================================================================== */
.btn-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.28);color:#E7EEF5;
  background:transparent;transition:background .16s,border-color .16s,color .16s;
}
.btn-icone svg{width:20px;height:20px}
.btn-icone:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.btn-icone:focus-visible{outline:3px solid var(--c-brass-500);outline-offset:2px}

/* Sur fond clair — l'en-tête — le contour et l'icône doivent s'inverser. */
.btn-icone--clair{
  width:40px;height:40px;border-color:var(--c-navy-100);color:var(--c-navy-700);
}
.btn-icone--clair:hover{
  background:var(--c-navy-050);border-color:var(--c-navy-600);color:var(--c-navy-900);
}
.btn-icone--clair svg{width:18px;height:18px}

/* Le bouton « Ajouter à mes contacts » est révélé par le script : sans lui,
   il n'y aurait rien à télécharger. L'attribut hidden est retiré en JS. */
[data-carte] svg{width:19px;height:19px;flex:none}

/* Dans le héros, les deux icônes accompagnent les boutons de la même ligne :
   même hauteur, contour plus discret pour qu'on lise d'abord « Voir le
   numéro » et « Prendre contact ». */
.hero__cta .btn-icone{width:48px;height:48px;border-color:rgba(255,255,255,.24);color:#C8D6E3}
.hero__cta .btn-icone:hover{border-color:rgba(255,255,255,.48);color:#fff}

/* =============================================================================
   Confort de lecture sur petit écran
   ========================================================================== */

/* Une adresse électronique n'a pas d'espace où se couper : sans cette règle,
   elle impose sa largeur au conteneur et fait déborder la page. « anywhere »
   agit aussi sur la largeur minimale calculée, ce que « break-word » ne fait
   pas dans tous les navigateurs — Safari notamment. */
.reveal{max-width:100%;min-width:0}
.reveal__valeur,.reveal__repli{
  overflow-wrap:anywhere;word-break:normal;min-width:0;max-width:100%;
}
.coord__corps,.coord__item > *{min-width:0}
.coord__v,.coord__note{overflow-wrap:anywhere}

@media (max-width:760px){
  /* Un seul débordement horizontal suffit à donner l'impression d'un site
     mal fini : on neutralise la cause, puis on ferme la porte. */
  html,body{overflow-x:hidden}

  .hero__inner > div:first-child{text-align:center}
  .hero__cta{justify-content:center;flex-wrap:wrap}
  /* Les losanges séparent bien deux mentions sur une ligne ; empilées, ils
     se retrouvent orphelins en bout de ligne. On empile, on les retire. */
  .hero__meta{flex-direction:column;align-items:center;gap:.5rem}
  .hero__meta [aria-hidden="true"]{display:none}
  .hero__portrait{margin-inline:auto}

  .eyebrow,.section > .wrap > h2,.section > .wrap > .lede{text-align:center}
  .section > .wrap > .lede{margin-inline:auto}

  .pacte{grid-template-columns:1fr;gap:26px}
  .pacte__col{padding-right:0}
  .pacte__col + .pacte__col{
    border-left:0;padding-left:0;
    border-top:1px solid rgba(255,255,255,.13);padding-top:22px;
  }

  .coord__item{align-items:center}

  /* Un numéro révélé est un lien qu'on touche : il lui faut la même surface
     qu'à un bouton. Les liens en pleine phrase, eux, en sont dispensés. */
  .reveal--ligne .reveal__valeur{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

@media (max-width:760px){
  /* Deux rangs : l'action principale seule sur toute la largeur, puis les
     trois autres côte à côte. « Prendre contact » prend la place restante,
     les deux icônes gardent leur carré. */
  .hero__cta{flex-wrap:wrap;align-items:stretch;gap:10px}

  .hero__cta .reveal{flex:1 0 100%}
  .hero__cta .reveal__btn,.hero__cta .reveal__valeur{width:100%;justify-content:center}

  /* base 0 et non « auto » : le navigateur décide du retour à la ligne sur
     la taille de base, avant tout rétrécissement. Avec « auto », le bouton
     réclamait sa largeur naturelle et repoussait les icônes au rang suivant. */
  .hero__cta > .btn{flex:1 1 0;justify-content:center;min-width:0}
  .hero__cta .btn-icone{flex:0 0 52px;width:52px;height:auto;min-height:52px}
}

/* =============================================================================
   Menu de navigation sur petit écran
   ========================================================================== */

/* Le bouton n'apparaît que là où la navigation complète ne tient pas, et
   seulement si le script a pu prendre la main : un menu qui ne s'ouvre pas
   serait pire que pas de menu du tout. */
.menu-btn{
  display:none;margin-left:auto;flex:none;
  width:46px;height:46px;align-items:center;justify-content:center;
  background:var(--c-paper);border:1px solid var(--c-navy-100);
  border-radius:var(--radius-sm);cursor:pointer;color:var(--c-navy-800);
}
.menu-btn:hover{background:var(--c-navy-050);border-color:var(--c-navy-600)}
.menu-btn:focus-visible{outline:3px solid var(--c-brass-500);outline-offset:2px}

.menu-btn__barres{display:block;width:20px;height:14px;position:relative}
.menu-btn__barres span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .22s ease,opacity .16s ease;
}
.menu-btn__barres span:nth-child(1){top:0}
.menu-btn__barres span:nth-child(2){top:6px}
.menu-btn__barres span:nth-child(3){top:12px}

/* Ouvert, les trois barres deviennent une croix : l'état du menu se lit sur
   le bouton lui-même, sans avoir à regarder ailleurs. */
.menu-btn[aria-expanded="true"] .menu-btn__barres span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__barres span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__barres span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu-panneau{
  border-top:1px solid var(--c-line);background:var(--c-paper);
  padding:8px clamp(18px,5vw,32px) 20px;
  box-shadow:0 12px 24px rgba(11,32,53,.08);
}
.menu-panneau[hidden]{display:none}
.menu-panneau__nav{display:flex;flex-direction:column}
.menu-panneau__nav a{
  display:flex;align-items:center;min-height:52px;
  font:600 1rem/1.3 var(--ff-sans);color:var(--c-navy-800);text-decoration:none;
  border-bottom:1px solid var(--c-line-soft);
}
.menu-panneau__nav a:last-child{
  border-bottom:0;color:var(--c-brass-700);
}
.menu-panneau__nav a:hover,.menu-panneau__nav a:focus-visible{color:var(--c-brass-700)}

.menu-panneau__actions{display:flex;gap:10px;padding-top:14px}
.menu-panneau__actions .btn-icone{
  width:48px;height:48px;border-color:var(--c-navy-100);color:var(--c-navy-700);
}
.menu-panneau__actions .btn-icone:hover{
  background:var(--c-navy-050);border-color:var(--c-navy-600);color:var(--c-navy-900);
}

@media (max-width:900px){
  /* La navigation complète est déjà masquée à cette largeur ; le bouton
     prend sa place, aligné à droite de l'en-tête. */
  .menu-btn{display:flex}
  .site-header__inner{gap:12px}
}
@media (min-width:901px){
  /* Sur grand écran, ni bouton ni panneau : la navigation suffit. */
  .menu-btn,.menu-panneau{display:none!important}
}