/*
Theme Name: ARTES Patrimoine
Theme URI: https://artespatrimoine.fr
Author: KOMKAB, Regis KUMAR
Author URI: https://komkab.fr
Description: Theme sur mesure du cabinet ARTES Patrimoine. Porte la charte
 validee en octobre 2026 : en-tete, pied de page, gabarits d'article et
 d'archive, typographie Instrument Serif et Inter auto-hebergee. Concu pour
 fonctionner avec Elementor en version gratuite et sans pack d'extensions.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: Proprietaire, usage reserve a ARTES Patrimoine
Text Domain: artes-komkab

NE PAS MODIFIER CE FICHIER A LA MAIN.
Il est genere par theme/construire-css.py a partir de assets/css/.
*/

/* =========================================================
   Polices auto-hebergees
   Aucun appel a Google Fonts : un domaine tiers en moins a
   resoudre au chargement, et pas de transfert d'adresse IP
   vers Google sans consentement.
   Les URL sont reecrites par le theme a l'enregistrement
   de la feuille (voir fonction artes_feuille_de_style).
   ========================================================= */

@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/instrument-serif-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:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/instrument-serif-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:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/instrument-serif-italic-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:300 600;
  font-display:swap;
  src:url('assets/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:300 600;
  font-display:swap;
  src:url('assets/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;
}


/* ==================== CHARTE, REPRISE DE LA MAQUETTE ==================== */

:root{
  --nuit:#102840;
  --bleu-fonce:#1d4670;
  --bleu:#336099;
  --bleu-moyen:#3F9EBC;
  --bleu-clair:#B3DCE8;
  --orange:#FBBF54;
  --cta:#ED7427;
  --cta-survol:#D9651B;
  --cta-texte:#fff;
  --orange-survol:#FCCD76;
  --encre:#12304C;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --hauteur-nav:84px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--nuit);color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-top:var(--hauteur-nav);
  background:
    radial-gradient(ellipse 120% 70% at 50% 38%, rgba(179,220,232,.30), transparent 62%),
    linear-gradient(180deg,
      #0d2238 0%,
      #1d4670 20%,
      var(--bleu) 44%,
      var(--bleu-moyen) 73%,
      var(--bleu-clair) 100%);
}
/* halo sombre en haut pour la lisibilite de la navigation */
.hero::before{
  content:"";position:absolute;inset:0 0 auto 0;height:220px;
  background:linear-gradient(180deg,rgba(6,20,34,.55),transparent);
  z-index:2;pointer-events:none;
}

/* ---- trame de tuiles vitrees ---- */
.trame{
  position:absolute;inset:0;z-index:1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:10px;padding:10px;
}
.tuile{
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
/* les tuiles s'estompent vers le bas, la ou le fond s'eclaircit */
.trame .tuile:nth-child(n+33){border-color:rgba(255,255,255,.16)}
.trame .tuile:nth-child(n+41){border-color:rgba(255,255,255,.22)}

/* ---- tuiles et portraits qui se soulevent autour du curseur ---- */
/* --l varie de 0 a 1 selon la proximite de la souris (calcule en JS) ;
   translate et scale sont independants de transform, ce qui laisse
   l'animation de flottement des portraits intacte */
.trame .tuile,.photos .portrait{
  --l:0;
  translate:0 calc(var(--l) * -12px);
  scale:calc(1 + var(--l) * .045);
  transition:translate .45s cubic-bezier(.22,.8,.3,1),scale .45s cubic-bezier(.22,.8,.3,1),box-shadow .45s ease;
}
.trame .tuile{
  background:linear-gradient(150deg,rgba(255,255,255,calc(.055 + var(--l) * .1)),rgba(255,255,255,calc(.012 + var(--l) * .03)));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,calc(var(--l) * .38)),
    0 calc(var(--l) * 22px) calc(var(--l) * 38px) rgba(6,20,34,calc(var(--l) * .38));
}
.photos .portrait{
  box-shadow:0 calc(18px + var(--l) * 20px) calc(44px + var(--l) * 22px) rgba(6,22,40,calc(.38 + var(--l) * .18));
}
@media(prefers-reduced-motion:reduce){.trame .tuile,.photos .portrait{transition:none}}

/* ---- photos des associes, posees dans la trame ---- */
.photos{
  position:absolute;inset:0;z-index:3;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(6,1fr);
  gap:10px;padding:10px;
  pointer-events:none;
}
.portrait{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(6,22,40,.38);
  animation:flotte 9s ease-in-out infinite;
}
/* portrait entier ancre en haut : la tete reste toujours dans le cadre,
   seul le bas du buste est rogne selon la forme de la tuile */
.portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;
  filter:saturate(.55) contrast(1.04);
}
/* voile bleu qui fond les portraits dans la palette */
.portrait::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(51,96,153,.38),rgba(63,158,188,.26));
  mix-blend-mode:screen;
}
.portrait::before{
  content:"";position:absolute;inset:0;z-index:2;
  border:1px solid rgba(255,255,255,.22);border-radius:12px;
}
/* emplacements fixes, hors de la colonne centrale du texte */
.p1{grid-column:1;grid-row:2}
.p2{grid-column:8;grid-row:2;animation-delay:-2.2s}
.p3{grid-column:2;grid-row:4;animation-delay:-4.5s}
.p4{grid-column:7;grid-row:5;animation-delay:-6.6s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.portrait{animation:none}}

/* ============ NAVIGATION FIXE ============ */
.nav-zone{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 20px 0;
  transition:padding .3s;
}
.nav{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;gap:22px;
  padding:9px 9px 9px 20px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:100px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:background .3s,box-shadow .3s,border-color .3s;
}
/* au defilement, la barre se densifie pour rester lisible sur les zones claires */
.nav-zone.defile{padding-top:12px}
.nav-zone.defile .nav{
  background:rgba(13,34,56,.42);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(6,20,34,.14);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}
.marque{display:flex;align-items:center;text-decoration:none;flex:none}
.marque img{height:34px;width:auto;display:block}
.liens{display:flex;gap:26px;margin:0 auto}
.liens a{
  font-size:.875rem;font-weight:400;color:rgba(255,255,255,.86);
  text-decoration:none;white-space:nowrap;transition:color .2s;
}
.liens a:hover{color:#fff}
.nav-cta{
  flex:none;
  font-size:.83rem;font-weight:600;color:var(--cta-texte);
  background:var(--cta);
  padding:11px 21px;border-radius:100px;text-decoration:none;white-space:nowrap;
  transition:background .25s,transform .25s;
}
.nav-cta:hover{background:var(--cta-survol);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:9px;flex:none}
.burger span{display:block;width:21px;height:2px;background:#fff;border-radius:2px;margin:4px 0}

/* ============ CONTENU DU HERO ============ */
.contenu{
  position:relative;z-index:5;
  flex:1;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:62px 24px 30px;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,6.4vw,5.7rem);
  line-height:1.04;letter-spacing:-.005em;
  color:#EDF7FB;
  max-width:16ch;
  text-shadow:0 2px 30px rgba(8,26,44,.34);
}
.sous-titre{
  margin-top:26px;max-width:640px;
  font-size:clamp(.95rem,1.5vw,1.05rem);font-weight:500;line-height:1.65;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 14px rgba(8,26,44,.28);
}
.sous-titre .lieux{display:block;margin-top:11px;color:rgba(255,255,255,.84)}
.actions{margin-top:34px;display:flex;gap:13px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.925rem;font-weight:500;text-decoration:none;
  padding:15px 29px;border-radius:100px;
  transition:transform .25s,box-shadow .25s,background .25s;
}
.btn-primaire{background:var(--cta);color:var(--cta-texte);font-weight:600;box-shadow:0 12px 30px rgba(8,26,44,.30)}
.btn-primaire:hover{background:var(--cta-survol);transform:translateY(-2px);box-shadow:0 16px 38px rgba(8,26,44,.38)}
.btn-secondaire{background:#0f2c48;color:#fff;box-shadow:0 12px 30px rgba(8,26,44,.26)}
.btn-secondaire:hover{background:#163b5e;transform:translateY(-2px);box-shadow:0 16px 38px rgba(8,26,44,.36)}
.btn-secondaire svg{transition:transform .25s}
.btn-secondaire:hover svg{transform:translate(2px,-2px)}

/* fleche de defilement */
.defilement{
  position:relative;z-index:5;
  margin:0 auto 40px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;color:#fff;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.defilement{animation:none}}

/* ============ CHIFFRES CLES ============ */
.chiffres{
  position:relative;z-index:5;
  padding:72px 20px 0;
}
.chiffres-grille{
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.pave{
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:24px 22px;
  text-align:left;
  transition:transform .3s,background .3s;
}
.pave:hover{transform:translateY(-4px);background:rgba(255,255,255,.58)}
.pave .valeur{
  font-family:var(--serif);font-weight:400;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1;
  color:var(--encre);
}
.pave .libelle{
  margin-top:8px;font-size:.8rem;font-weight:500;
  color:rgba(18,48,76,.72);letter-spacing:.01em;
}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .liens{display:none}
  .burger{display:block}
  .nav{padding:9px 9px 9px 18px;gap:12px}
  .nav-cta{font-size:.78rem;padding:10px 16px;margin-left:auto}
  .trame,.photos{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(7,1fr)}
  .p1{grid-column:1;grid-row:2}
  .p2{grid-column:6;grid-row:2}
  .p3{grid-column:1;grid-row:5}
  .p4{grid-column:6;grid-row:5}
  .chiffres-grille{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  :root{--hauteur-nav:76px}
  .nav-cta{display:none}
  .burger{margin-left:auto}
  .marque img{height:29px}
  .trame{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,1fr);gap:7px;padding:7px}
  /* sous 620px chaque rangee de la trame porte du contenu : les portraits
     passeraient derriere le titre puis sous les boutons. On les retire ici,
     les associes gardent leur section dediee plus bas dans la page. */
  .photos{display:none}
  .contenu{padding:40px 20px 24px}
  .chiffres{padding-top:48px}
  h1{max-width:13ch}
  .actions{width:100%;flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .chiffres-grille{gap:10px}
  .pave{padding:18px 16px}
}

/* menu mobile */
.menu-mobile{
  display:none;position:relative;
  max-width:1120px;margin:11px auto 0;
  border:1px solid rgba(255,255,255,.17);border-radius:20px;
  background:rgba(12,34,56,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:15px 20px;
}
.menu-mobile.ouvert{display:block}
.menu-mobile a{
  display:block;padding:11px 0;color:rgba(255,255,255,.9);
  text-decoration:none;font-size:.94rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.menu-mobile a:last-child{border-bottom:0;color:#F29E68;font-weight:600}

.defilement{text-decoration:none}

/* ============ SECTIONS SUIVANTES ============ */
.suite{
  background:linear-gradient(180deg,#B3DCE8 0,#E3F1F6 230px,#F5FAFC 640px,#F5FAFC 100%);
  color:var(--encre);
}
.conteneur{max-width:1120px;margin:0 auto;padding:0 20px}
.insecable{white-space:nowrap}
.methode h2,.parcours-tete h3,.engagement h3{text-wrap:balance}
section[id]{scroll-margin-top:96px}
.surtitre{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#B85E24;
}

/* ---- 04 bandeau de reassurance ---- */
.reassurance{padding:30px 0 6px}
.reassurance ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.reassurance li{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 17px 10px 13px;border-radius:100px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(18,48,76,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.84rem;font-weight:500;color:var(--encre);white-space:nowrap;
}
.reassurance svg{width:18px;height:18px;flex:none;color:var(--bleu)}

/* ---- 05 notre methode ---- */
.methode{padding:84px 0 70px}
.methode-tete{max-width:760px;margin:0 auto 50px;text-align:center}
.methode-tete h2{
  margin-top:14px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.005em;
  color:var(--encre);
}
.methode-tete p{
  margin:18px auto 0;max-width:600px;
  font-size:1.02rem;line-height:1.7;color:rgba(18,48,76,.8);
}
.engagements{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.engagement{
  position:relative;padding:30px 28px;border-radius:20px;
  background:linear-gradient(160deg,#fff,rgba(255,255,255,.74));
  border:1px solid rgba(51,96,153,.12);
  box-shadow:0 18px 44px rgba(18,48,76,.07);
  transition:transform .35s,box-shadow .35s;
}
.engagement:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(18,48,76,.11)}
.engagement .icone{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--bleu),var(--bleu-moyen));color:#fff;
  box-shadow:0 10px 22px rgba(51,96,153,.28);
}
.engagement .icone svg{width:23px;height:23px}
.engagement .num{
  position:absolute;top:24px;right:26px;
  font-family:var(--serif);font-size:2.3rem;line-height:1;color:rgba(236,140,79,.42);
}
.engagement h3{
  margin-top:22px;font-family:var(--serif);font-weight:400;
  font-size:1.7rem;line-height:1.15;color:var(--encre);
}
.engagement p{margin-top:11px;font-size:.93rem;line-height:1.68;color:rgba(18,48,76,.78)}

/* ---- parcours en 4 piliers ---- */
.parcours{margin-top:84px}
.parcours-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:30px}
.parcours-tete h3{
  margin-top:12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;color:var(--encre);
}
.parcours-tete p{max-width:800px;text-wrap:pretty;font-size:.94rem;line-height:1.65;color:rgba(18,48,76,.76)}
.piliers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none}
.pilier{display:flex;flex-direction:column}
.pilier-cadre{
  height:320px;display:flex;flex-direction:column;justify-content:flex-end;
}
.pilier-remplissage{
  height:var(--h);
  display:flex;flex-direction:column;
  padding:20px;border-radius:13px;
  background:linear-gradient(0deg,#52ADCC 0%,var(--bleu-moyen) 30%,var(--bleu) 100%);
  box-shadow:0 14px 30px rgba(51,96,153,.26),inset 0 1px 0 rgba(255,255,255,.3);
  transform-origin:bottom;
}
.pilier-num{font-family:var(--serif);font-size:2.6rem;line-height:1;color:#fff}
/* trame de tuiles vitrees dans le pilier, sous le numero et le titre */
.pilier-remplissage{position:relative;overflow:hidden}
.pilier-num,.pilier-titre{position:relative;z-index:1;text-shadow:0 1px 10px rgba(13,34,56,.45)}
.pilier-tuiles{
  position:absolute;inset:6px;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:end;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 24%,#000 64%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 24%,#000 64%);
}
.pilier-tuiles span{
  aspect-ratio:1;border-radius:9px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
}
.pilier-titre{margin-top:8px;font-size:.98rem;font-weight:600;line-height:1.3;color:#fff}
.pilier-texte{margin-top:16px;padding:0 4px;font-size:.88rem;line-height:1.62;color:rgba(18,48,76,.78)}

/* apparition en escalier au defilement (reprend le rythme de ProcessPillars) */
.js .pilier-remplissage{transform:scaleY(0);transition:transform .8s cubic-bezier(.4,0,.2,1) var(--d)}
.js .pilier-num,.js .pilier-titre{opacity:0;transition:opacity .3s ease calc(var(--d) + .4s)}
.js .pilier-texte{opacity:0;transform:translateY(8px);transition:opacity .5s ease calc(var(--d) + .55s),transform .5s ease calc(var(--d) + .55s)}
.js .piliers.visible .pilier-remplissage{transform:scaleY(1)}
.js .piliers.visible .pilier-num,.js .piliers.visible .pilier-titre{opacity:1}
.js .piliers.visible .pilier-texte{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .pilier-remplissage,.js .pilier-num,.js .pilier-titre,.js .pilier-texte{transition:none}
}

.parcours-cta{margin-top:44px;display:flex;align-items:center;justify-content:center;gap:14px 20px;flex-wrap:wrap;text-align:center}
.parcours-cta p{font-size:.98rem;font-weight:500;color:var(--encre)}

@media(max-width:900px){
  .engagements{grid-template-columns:1fr;max-width:560px;margin:0 auto}
}
@media(max-width:760px){
  .methode{padding:62px 0 56px}
  .methode-tete{margin-bottom:36px}
  .parcours{margin-top:60px}
  .piliers{grid-template-columns:1fr;gap:18px}
  /* sur mobile les piliers deviennent des barres qui croissent vers la droite */
  .pilier-cadre{height:auto;flex-direction:row;justify-content:flex-start}
  .pilier-remplissage{
    width:var(--l);height:auto;min-height:62px;
    flex-direction:row;align-items:center;gap:12px;padding:12px 16px;
    transform-origin:left;
  }
  .js .pilier-remplissage{transform:scaleX(0)}
  .js .piliers.visible .pilier-remplissage{transform:scaleX(1)}
  .pilier-num{font-size:1.9rem}
  .pilier-titre{margin-top:0;white-space:nowrap}
  .pilier-tuiles{grid-template-columns:repeat(6,1fr);gap:5px}
  .pilier-texte{margin-top:9px}
  .parcours-cta{flex-direction:column}
  .parcours-cta .btn{width:100%;justify-content:center}
}

/* ---- en-tete de section commun aux blocs 6 a 8 ---- */
.section-tete{max-width:740px;margin:0 auto 46px;text-align:center}
.section-tete h2{
  margin-top:14px;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.005em;
  color:var(--encre);text-wrap:balance;
}
.section-tete p{margin:18px auto 0;max-width:580px;font-size:1.02rem;line-height:1.7;color:rgba(18,48,76,.8)}

/* ============ 06 VOTRE OBJECTIF ============ */
/* chaque prestation garde sa couleur du site actuel :
   --c = couleur en r,g,b (fond au survol), --ci = teinte lisible pour icone et libelles,
   --cih = couleur de l'icone quand son fond se remplit */
.objectifs{padding:26px 0 96px}
.cartes-objectifs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.objectif{
  --c:51,97,155;--ci:#33619b;--cih:#fff;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:258px;padding:30px 28px 26px;border-radius:20px;
  background:#fff;
  border:1px solid rgba(51,96,153,.12);
  box-shadow:0 14px 36px rgba(18,48,76,.06);
  color:var(--encre);text-decoration:none;
  transition:border-color .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);
}
/* calque de couleur en diagonale, qui apparait en fondu (principe de Feature Velocity) */
.objectif::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom right,rgba(var(--c),.36) 0%,rgba(var(--c),.12) 48%,transparent 82%);
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1);
}
.objectif>*{position:relative;z-index:1}
.objectif:hover,.objectif:focus-visible{
  border-color:rgb(var(--c));transform:translateY(-4px);
  box-shadow:0 24px 50px rgba(var(--c),.22);
}
.objectif:hover::before,.objectif:focus-visible::before{opacity:1}
.objectif:focus-visible{outline:2px solid rgb(var(--c));outline-offset:3px}
.objectif .icone{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(var(--c),.14);color:var(--ci);
  transition:background .5s,color .5s;
}
.objectif:hover .icone,.objectif:focus-visible .icone{background:rgb(var(--c));color:#fff}
.objectif .icone svg{width:27px;height:27px}
.objectif .expertise{
  margin-top:22px;font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ci);
}
.objectif h3{margin-top:7px;font-family:var(--serif);font-weight:400;font-size:1.72rem;line-height:1.12;color:var(--encre)}
.objectif p{margin-top:10px;font-size:.92rem;line-height:1.64;color:rgba(18,48,76,.78)}
.objectif .lien{
  margin-top:auto;padding-top:18px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--ci);
}
.objectif .lien svg{width:15px;height:15px;transition:transform .35s}
.objectif:hover .lien svg{transform:translateX(4px)}
/* couleurs par prestation */
.o-retraite{--c:158,174,136;--ci:#5F7550;--cih:#12304C}
.o-fiscal{--c:82,125,177;--ci:#527DB1;--cih:#fff}
.o-immo{--c:51,97,155;--ci:#33619b;--cih:#fff}
.o-financier{--c:65,158,189;--ci:#2B7F9C;--cih:#12304C}
.o-transmission{--c:251,191,84;--ci:#A9740F;--cih:#12304C}
.o-courtage{--c:236,140,79;--ci:#B85E24;--cih:#12304C}

/* ============ 07 PARTICULIERS OU DIRIGEANTS ============ */
.profils{padding:0 0 100px}
.cartes-profils{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.profil{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:42px 40px 38px;border-radius:26px;
}
.profil .surtitre{position:relative}
.profil h3{
  position:relative;margin-top:14px;
  font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1.08;
}
.profil>p{position:relative;margin-top:14px;max-width:440px;font-size:.97rem;line-height:1.68}
.etiquettes{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px;list-style:none}
.etiquettes a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;
  font-size:.83rem;font-weight:500;text-decoration:none;
  transition:background .3s,border-color .3s,transform .3s;
}
.etiquettes a:hover{transform:translateY(-2px)}
.etiquettes .pastille{width:8px;height:8px;border-radius:50%;background:rgb(var(--c));flex:none}
.profil .btn{position:static;margin-top:auto;align-self:flex-start}

.profil-particulier{
  background:linear-gradient(160deg,#fff 0%,#EAF5F9 100%);
  border:1px solid rgba(51,96,153,.14);color:var(--encre);
  box-shadow:0 18px 44px rgba(18,48,76,.07);
}
.profil-particulier>p{color:rgba(18,48,76,.8)}
.profil-particulier .etiquettes a{background:#fff;border:1px solid rgba(51,96,153,.16);color:var(--encre)}
.profil-particulier .etiquettes a:hover{border-color:rgb(var(--c))}

.profil-dirigeant{
  background:linear-gradient(155deg,#0f2c48 0%,#1d4670 58%,#336099 100%);
  border:1px solid rgba(255,255,255,.08);color:#fff;
  box-shadow:0 22px 50px rgba(15,44,72,.28);
}
.profil-dirigeant .surtitre{color:#F29E68}
.profil-dirigeant>p{color:rgba(255,255,255,.84)}
.profil-dirigeant .etiquettes a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.profil-dirigeant .etiquettes a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
/* rappel des tuiles vitrees du hero dans l'angle de la carte dirigeant */
.profil-deco{
  position:absolute;top:-18px;right:-18px;width:210px;height:210px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  opacity:.55;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 100% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(circle at 100% 0%,#000 20%,transparent 75%);
}
.profil-deco span{border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.04)}

/* ============ 08 LES CONSEILLERS ============ */
.equipe{
  padding:64px 0 96px;
  background:#fff;
}
.conseillers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;list-style:none}
.conseiller{text-align:center}
.conseiller-photo{
  position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:#DCE8EE;box-shadow:0 16px 36px rgba(18,48,76,.12);
}
.conseiller-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;
  filter:saturate(.82);
  transition:transform .7s cubic-bezier(.4,0,.2,1),filter .5s;
}
.conseiller:hover .conseiller-photo img{transform:scale(1.04);filter:saturate(1)}
.conseiller-photo::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  border:1px solid rgba(255,255,255,.45);
}
.conseiller h3{margin-top:16px;font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.15;color:var(--encre)}
.conseiller .role{margin-top:3px;font-size:.8rem;color:rgba(18,48,76,.66)}
.conseiller .linkedin{
  margin:12px auto 0;width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  color:#0A66C2;background:rgba(10,102,194,.09);
  transition:background .3s,color .3s,transform .3s;
}
.conseiller .linkedin:hover,.conseiller .linkedin:focus-visible{background:#0A66C2;color:#fff;transform:translateY(-2px)}
.conseiller .linkedin svg{width:17px;height:17px}
.equipe-cta{margin-top:46px;text-align:center}

@media(max-width:900px){
  .cartes-objectifs{grid-template-columns:1fr 1fr}
  .cartes-profils{grid-template-columns:1fr}
  .conseillers{grid-template-columns:repeat(3,1fr);max-width:640px;margin:0 auto}
}
@media(max-width:620px){
  .objectifs{padding:10px 0 70px}
  .cartes-objectifs{grid-template-columns:1fr}
  .objectif{min-height:0}
  .profils{padding-bottom:70px}
  .profil{padding:32px 24px 28px}
  .profil .btn{align-self:stretch;justify-content:center}
  .profil-deco{width:150px;height:150px}
  .equipe{padding:70px 0}
  .conseillers{grid-template-columns:1fr 1fr;gap:14px}
  .conseiller:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
}

/* ============ ZONE COLOREE : BLOCS 6 ET 7 ============ */
/* fond bleu qui marque une cassure, puis degrade jusqu'au blanc sous les cartes particuliers et pros */
.zone-couleur{
  position:relative;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(179,220,232,.28),transparent 70%),
    linear-gradient(180deg,#0d2238 0%,#16395e 14%,#27517f 28%,#3A7FAE 44%,#8CC6DA 62%,#CFE8F0 78%,#fff 94%);
}
.zone-couleur .objectifs{padding-top:96px}
.zone-couleur .section-tete .surtitre{color:#F29E68}
.zone-couleur .section-tete h2{color:#fff}
.zone-couleur .section-tete p{color:rgba(255,255,255,.88)}
.zone-couleur .objectif{border-color:rgba(255,255,255,.7);box-shadow:0 18px 44px rgba(13,34,56,.16)}
.zone-couleur .objectif:hover,.zone-couleur .objectif:focus-visible{border-color:rgb(var(--c))}

/* bouton contour blanc, pour la carte dirigeants */
.btn-contour{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8);padding:13.5px 27.5px}
.btn-contour:hover,.btn-contour:focus-visible{background:#fff;color:var(--bleu);border-color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(6,20,34,.28)}

/* ============ 09 AVIS CLIENTS ============ */
.avis{
  position:relative;overflow:hidden;
  padding:100px 0 96px;color:#fff;
  background:
    radial-gradient(ellipse 80% 55% at 50% 35%,rgba(179,220,232,.24),transparent 66%),
    linear-gradient(170deg,#0d2238 0%,#1d4670 46%,var(--bleu) 100%);
}
.avis-trame{
  position:absolute;inset:0;z-index:0;
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);
  gap:10px;padding:10px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
.avis .conteneur{position:relative;z-index:2}
.avis .section-tete .surtitre{color:#F29E68}
.avis .section-tete h2{color:#fff}
.cartes-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none}
.temoignage{
  position:relative;
  display:flex;flex-direction:column;height:100%;
  padding:32px 30px 28px;border-radius:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 22px 50px rgba(6,20,34,.26),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .4s cubic-bezier(.4,0,.2,1),background .4s;
}
.temoignage:hover{transform:translateY(-4px);background:linear-gradient(150deg,rgba(255,255,255,.23),rgba(255,255,255,.08))}
.guillemet{display:block;height:30px;font-family:var(--serif);font-size:4.4rem;line-height:.9;color:#EC8C4F}
.temoignage blockquote{margin-top:12px;font-family:var(--serif);font-size:1.4rem;line-height:1.36;color:#F1F8FB}
.temoignage figcaption{
  margin-top:auto;padding-top:26px;
  display:flex;align-items:center;gap:12px;
  font-size:.92rem;font-weight:600;color:#fff;
}
.initiales{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  background:rgba(179,220,232,.18);border:1px solid rgba(255,255,255,.32);
}

/* ============ BANDEAU DES PARTENAIRES ============ */
.partenaires{padding:52px 0 50px;background:#fff}
.partenaires-titre{
  margin-bottom:30px;text-align:center;
  font-size:1.05rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bleu);
}
.defileur{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.defileur-piste{display:flex;width:max-content;animation:defile 40s linear infinite}
.defileur:hover .defileur-piste{animation-play-state:paused}
.defileur ul{display:flex;align-items:center;gap:68px;padding-right:68px;list-style:none}
.defileur img{height:23px;width:auto;max-width:120px;object-fit:contain;display:block;opacity:.72;transition:opacity .3s}
.defileur img:hover{opacity:1}
@keyframes defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .defileur{-webkit-mask-image:none;mask-image:none}
  .defileur-piste{animation:none;width:auto;justify-content:center}
  .defileur ul{flex-wrap:wrap;justify-content:center;gap:28px 44px;padding:0 20px}
  .defileur ul[aria-hidden]{display:none}
}

@media(max-width:900px){
  .cartes-avis{grid-template-columns:1fr;max-width:560px;margin:0 auto}
}
@media(max-width:620px){
  .zone-couleur .objectifs{padding-top:70px}
  .avis{padding:72px 0 70px}
  .temoignage blockquote{font-size:1.25rem}
  .defileur img{height:18px}
  .defileur ul{gap:44px;padding-right:44px}
}

/* ============ 10 BILAN PATRIMONIAL ============ */
.bilan{padding:96px 0}
.bilan-panneau{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;
  padding:58px;border-radius:30px;color:#fff;
  background:
    radial-gradient(ellipse 60% 70% at 12% 18%,rgba(179,220,232,.22),transparent 65%),
    linear-gradient(150deg,#0d2238 0%,#1d4670 52%,var(--bleu) 100%);
  box-shadow:0 30px 70px rgba(13,34,56,.28);
}
.bilan-trame{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);gap:8px;padding:8px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 0% 40%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 90% at 0% 40%,#000 0%,transparent 72%);
}
.bilan-texte,.bilan-form{position:relative;z-index:1}
.bilan .surtitre{color:#F29E68}
.bilan h2{
  margin-top:14px;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,3.8vw,3.1rem);line-height:1.08;text-wrap:balance;
}
.bilan-texte>p{margin-top:16px;max-width:470px;font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.86)}
.atouts{list-style:none;margin-top:28px;display:grid;gap:13px}
.atouts li{display:flex;align-items:center;gap:12px;font-size:.96rem;font-weight:500}
.atouts svg{width:26px;height:26px;flex:none;padding:5px;border-radius:50%;background:rgba(236,140,79,.2);color:#F29E68}
.bilan-contact{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.78)}
.bilan-contact a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s}
.bilan-contact a:hover{border-color:#fff}

.bilan-form{
  background:#fff;color:var(--encre);
  border-radius:22px;padding:34px 32px 30px;
  box-shadow:0 24px 60px rgba(6,20,34,.35);
}
.bilan-form h3{font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1.1}
.bilan-form .mention{margin-top:6px;font-size:.8rem;color:rgba(18,48,76,.6)}
.obligatoire{color:#B85E24}
.champ{margin-top:16px}
.champ label{display:block;margin-bottom:6px;font-size:.83rem;font-weight:600}
.champ label .facultatif{font-weight:400;color:rgba(18,48,76,.55)}
.champ input,.champ select{
  width:100%;height:48px;padding:0 14px;
  border:1px solid rgba(18,48,76,.18);border-radius:12px;
  background-color:#F7FBFD;
  font:inherit;font-size:.95rem;color:var(--encre);
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--bleu);background-color:#fff;box-shadow:0 0 0 4px rgba(51,96,153,.14)}
.champ select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2312304C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.consentement{margin-top:18px;display:flex;align-items:flex-start;gap:10px;font-size:.8rem;line-height:1.5;color:rgba(18,48,76,.74)}
.consentement input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--bleu)}
.consentement a{color:var(--bleu)}
.bilan-form .btn{margin-top:20px;width:100%;justify-content:center;border:0;cursor:pointer;font-family:inherit}
.form-merci{padding:34px 6px;text-align:center}
.form-merci:focus{outline:none}
.form-merci .coche{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:rgba(82,125,177,.12);color:var(--bleu)}
.form-merci .coche svg{width:28px;height:28px}
.form-merci p{margin-top:10px;font-size:.95rem;line-height:1.65;color:rgba(18,48,76,.78)}

/* ============ 11 ARTICLES RECENTS ============ */
.articles{padding:10px 0 100px}
.articles-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;margin-bottom:36px}
.articles-tete h2{
  margin-top:12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;color:var(--encre);
}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-size:.93rem;font-weight:600;color:var(--bleu);text-decoration:none}
.lien-fleche svg{width:15px;height:15px;transition:transform .3s}
.lien-fleche:hover svg{transform:translateX(4px)}
.cartes-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none}
.article{
  height:100%;display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid rgba(51,96,153,.12);
  box-shadow:0 14px 36px rgba(18,48,76,.06);
  color:var(--encre);text-decoration:none;
  transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.article:hover,.article:focus-visible{transform:translateY(-5px);box-shadow:0 24px 50px rgba(18,48,76,.12)}
.article-visuel{aspect-ratio:3/2;overflow:hidden;background:#DCE8EE}
.article-visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.article:hover .article-visuel img{transform:scale(1.05)}
.article-corps{flex:1;display:flex;flex-direction:column;padding:22px 24px 24px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;white-space:nowrap;font-size:.78rem;color:rgba(18,48,76,.62)}
.categorie{padding:4px 10px;border-radius:100px;font-size:.72rem;font-weight:600;background:rgba(var(--c),.15);color:var(--ci)}
.article h3{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.18;text-wrap:balance}
.article p{margin-top:10px;font-size:.9rem;line-height:1.62;color:rgba(18,48,76,.76)}
.article .lien{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--bleu)}
.article .lien svg{width:15px;height:15px;transition:transform .3s}
.article:hover .lien svg{transform:translateX(4px)}

/* ============ 12 QUESTIONS FREQUENTES ============ */
.faq{padding:100px 0;background:#fff}
.faq-grille{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:start}
.faq-intro{position:sticky;top:112px}
.faq-intro h2{
  margin-top:12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;color:var(--encre);text-wrap:balance;
}
.faq-intro p{margin-top:16px;font-size:1rem;line-height:1.7;color:rgba(18,48,76,.78)}
.faq-intro .btn{margin-top:26px}
.faq-liste{border-top:1px solid rgba(18,48,76,.12)}
.faq-liste details{border-bottom:1px solid rgba(18,48,76,.12)}
.faq-liste summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:22px 4px;
  font-family:var(--serif);font-size:1.38rem;line-height:1.25;color:var(--encre);
  transition:color .25s;
}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary:hover{color:var(--bleu)}
.faq-liste summary:focus-visible{outline:2px solid var(--bleu);outline-offset:4px;border-radius:6px}
.faq-plus{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(51,96,153,.28);color:var(--bleu);
  transition:transform .35s cubic-bezier(.4,0,.2,1),background .35s,color .35s,border-color .35s;
}
.faq-plus svg{width:14px;height:14px}
.faq-liste details[open] .faq-plus{transform:rotate(45deg);background:#EC8C4F;border-color:#EC8C4F;color:var(--encre)}
.faq-reponse{padding:0 56px 24px 4px;font-size:.96rem;line-height:1.74;color:rgba(18,48,76,.8)}
.faq-liste details[open] .faq-reponse{animation:faq-ouvre .45s cubic-bezier(.4,0,.2,1)}
@keyframes faq-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq-liste details[open] .faq-reponse{animation:none}}

/* ============ 13 PIED DE PAGE ============ */
.pied-page{
  position:relative;overflow:hidden;
  padding-top:82px;color:rgba(255,255,255,.8);
  background:
    radial-gradient(ellipse 55% 60% at 100% 0%,rgba(63,158,188,.2),transparent 62%),
    linear-gradient(170deg,#0d2238 0%,#102840 62%,#15365a 100%);
}
.pied-trame{
  position:absolute;top:0;right:0;width:46%;height:330px;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:8px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 100% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 80% 90% at 100% 0%,#000 0%,transparent 70%);
}
.pied-page .conteneur{position:relative;z-index:1}
.pied-grille{display:grid;grid-template-columns:1.2fr 1fr 1.2fr .9fr 1.25fr;gap:30px}
.pied-marque img{height:110px;width:auto;display:block}
.pied-marque p{margin-top:18px;max-width:280px;font-size:.9rem;line-height:1.65}
.pied-social{
  margin-top:22px;width:40px;height:40px;border-radius:12px;
  display:inline-grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:background .3s,border-color .3s;
}
.pied-social:hover,.pied-social:focus-visible{background:#0A66C2;border-color:#0A66C2}
.pied-social svg{width:18px;height:18px}
.pied-col h4{margin-bottom:16px;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu-clair)}
.pied-col ul{list-style:none;display:grid;gap:10px}
.pied-col a{font-size:.88rem;color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
.pied-col a:hover{color:#fff}
.pied-adresse{font-style:normal;font-size:.88rem;line-height:1.7}
.pied-adresse a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.pied-legal{margin-top:58px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.76rem;line-height:1.75;color:rgba(255,255,255,.56)}
.pied-legal a{color:rgba(255,255,255,.78)}
.a-completer{color:#F29E68;font-weight:600}
.pied-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem;color:rgba(255,255,255,.6);
}
.pied-bas ul{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none}
.pied-bas a{color:rgba(255,255,255,.72);text-decoration:none}
.pied-bas a:hover{color:#fff}
@media(max-width:1000px){
  .pied-grille{grid-template-columns:repeat(3,1fr)}
  .pied-marque{grid-column:1/-1}
}
@media(max-width:900px){
  .bilan-panneau{grid-template-columns:1fr;gap:36px;padding:44px 32px}
  .cartes-articles{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .faq-grille{grid-template-columns:1fr;gap:30px}
  .faq-intro{position:static}
}
@media(max-width:620px){
  .bilan{padding:70px 0}
  .bilan-panneau{padding:32px 20px;border-radius:24px}
  .bilan-form{padding:26px 20px 24px}
  .articles{padding-bottom:70px}
  .faq{padding:70px 0}
  .faq-liste summary{font-size:1.18rem;padding:18px 2px}
  .faq-reponse{padding:0 4px 20px 2px}
  .pied-page{padding-top:60px}
  .pied-grille{grid-template-columns:1fr 1fr;gap:34px 20px}
  .pied-contact{grid-column:1/-1}
  .pied-trame{width:80%}
}

/* ============ SURLIGNAGE ORANGE ============ */
/* trait de surligneur sous le bas des lettres, trace de gauche a droite a l'apparition */
.surligne{
  padding:0 .06em;
  background-image:linear-gradient(transparent 56%,rgba(236,140,79,.5) 56%,rgba(236,140,79,.5) 92%,transparent 92%);
  background-repeat:no-repeat;background-size:100% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.js .surligne{background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .25s}
.js .surligne.visible{background-size:100% 100%}
@media(prefers-reduced-motion:reduce){.js .surligne{background-size:100% 100%;transition:none}}

/* ============ CARTES PARTICULIERS / PROS : CARTE ENTIERE CLIQUABLE ============ */
.profil{cursor:pointer}
.profil .btn::after{content:"";position:absolute;inset:0;border-radius:26px}
.profil .etiquettes{z-index:2}
.profil-particulier:hover .btn-secondaire,.profil-particulier:focus-within .btn-secondaire{background:#fff;color:var(--bleu);transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--bleu),0 14px 32px rgba(18,48,76,.14)}
.profil-particulier:hover .btn-secondaire svg{transform:translate(2px,-2px)}
.profil-dirigeant:hover .btn-contour,.profil-dirigeant:focus-within .btn-contour{background:#fff;color:var(--bleu);border-color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(6,20,34,.28)}
.profil-dirigeant .btn-contour svg{transition:transform .25s}
.profil-dirigeant:hover .btn-contour svg{transform:translate(2px,-2px)}


/* ==================== COMPLEMENTS WORDPRESS ==================== */

/* =========================================================
   ARTES Patrimoine, complements WordPress
   Gabarits article, archive, recherche, 404, blocs Gutenberg
   et garde-fous Elementor. La charte vient du bloc precedent.
   ========================================================= */

/* ---------- accessibilite ---------- */
.lien-evitement{
  position:absolute;left:-9999px;top:0;z-index:999;
  padding:12px 20px;background:var(--cta);color:#fff;
  font-weight:600;border-radius:0 0 10px 0;
}
.lien-evitement:focus{left:0}

body.menu-ouvert{overflow:hidden}

.texte-lecteur{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--cta);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- surface de lecture claire ---------- */
body.page-claire{background:#fff;color:var(--encre)}
body.page-claire .nav-zone:not(.defile) .nav{
  background:rgba(255,255,255,.72);
  border-color:rgba(18,48,76,.10);
}
body.page-claire .nav-zone:not(.defile) .liens a,
body.page-claire .nav-zone:not(.defile) .marque{color:var(--encre)}
body.page-claire .burger span{background:var(--encre)}

/* ---------- en-tete d'article ---------- */
.tete-article{
  padding:calc(var(--hauteur-nav) + 56px) 0 40px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(179,220,232,.34), transparent 64%),
    linear-gradient(180deg,#F3F8FB 0%,#fff 100%);
  border-bottom:1px solid rgba(18,48,76,.08);
}
.tete-article .conteneur{max-width:800px}
.fil-ariane{
  font-size:13px;letter-spacing:.04em;color:rgba(18,48,76,.58);
  margin-bottom:18px;
}
.fil-ariane a{color:inherit;text-decoration:none}
.fil-ariane a:hover{color:var(--cta)}
.fil-ariane span[aria-current]{color:var(--encre)}

/* .surtitre est deja defini par la charte, on le reprend tel quel */
.tete-article h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,54px);line-height:1.12;
  color:var(--encre);text-wrap:balance;
}
.chapeau-article{
  margin-top:18px;font-size:19px;line-height:1.62;
  color:rgba(18,48,76,.76);text-wrap:pretty;
}
.meta-article{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  margin-top:26px;font-size:14px;color:rgba(18,48,76,.60);
}
.meta-article .point{width:4px;height:4px;border-radius:50%;background:rgba(18,48,76,.28)}
.fraicheur{color:var(--bleu);font-weight:500}

.visuel-article{
  margin:36px auto 0;max-width:1000px;padding:0 20px;
}
.visuel-article img{
  width:100%;height:auto;display:block;
  border-radius:18px;box-shadow:0 22px 50px rgba(18,48,76,.16);
}

/* ---------- corps d'article ---------- */
.corps-article{padding:52px 0 72px}
.corps-article .conteneur{max-width:760px}

.texte-article{font-size:17.5px;line-height:1.78;color:rgba(18,48,76,.88)}
.texte-article > * + *{margin-top:1.15em}
/* le premier element ne doit pas ajouter sa marge haute au padding de la zone */
.texte-article > :first-child{margin-top:0}

.texte-article h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,34px);line-height:1.22;
  color:var(--encre);margin-top:2.1em;text-wrap:balance;
}
.texte-article h3{
  font-family:var(--sans);font-weight:600;
  font-size:21px;line-height:1.34;color:var(--bleu-fonce);
  margin-top:1.8em;
}
.texte-article h4{font-weight:600;font-size:18px;color:var(--encre);margin-top:1.6em}

.texte-article p{text-wrap:pretty}
.texte-article strong{color:var(--encre);font-weight:600}
.texte-article a{
  color:var(--bleu);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(51,96,153,.42);
  transition:color .18s,text-decoration-color .18s;
}
.texte-article a:hover{color:var(--cta);text-decoration-color:var(--cta)}

.texte-article ul,.texte-article ol{padding-left:1.35em}
.texte-article li + li{margin-top:.5em}
.texte-article ul li::marker{color:var(--cta)}
.texte-article ol li::marker{color:var(--bleu);font-weight:600}

.texte-article img{max-width:100%;height:auto;border-radius:14px;display:block}
.texte-article figure{margin-top:1.8em}
.texte-article figcaption{
  margin-top:10px;font-size:14px;color:rgba(18,48,76,.56);text-align:center;
}

.texte-article blockquote{
  margin:1.9em 0;padding:4px 0 4px 24px;
  border-left:3px solid var(--cta);
  font-family:var(--serif);font-size:21px;line-height:1.5;
  color:var(--encre);
}
.texte-article blockquote p + p{margin-top:.6em}

.texte-article table{
  width:100%;border-collapse:collapse;font-size:15.5px;
  margin-top:1.9em;
}
.texte-article thead th{
  background:var(--bleu-fonce);color:#fff;font-weight:600;
  text-align:left;padding:13px 16px;
}
.texte-article thead th:first-child{border-radius:10px 0 0 0}
.texte-article thead th:last-child{border-radius:0 10px 0 0}
.texte-article tbody td{
  padding:12px 16px;border-bottom:1px solid rgba(18,48,76,.10);
  vertical-align:top;
}
.texte-article tbody tr:nth-child(even){background:rgba(179,220,232,.16)}

.texte-article hr{
  border:0;height:1px;background:rgba(18,48,76,.12);margin:2.6em 0;
}

.texte-article code{
  background:rgba(18,48,76,.07);padding:2px 6px;border-radius:5px;
  font-size:.92em;
}

/* blocs Gutenberg courants */
.texte-article .wp-block-image{margin-top:1.9em}
.texte-article .wp-block-table{overflow-x:auto}
.texte-article .wp-block-buttons{margin-top:2em}
.texte-article .wp-element-button,
.texte-article .wp-block-button__link{
  display:inline-block;background:var(--cta);color:#fff;
  padding:14px 26px;border-radius:999px;font-weight:600;
  text-decoration:none;transition:background .18s,transform .18s;
}
.texte-article .wp-element-button:hover,
.texte-article .wp-block-button__link:hover{
  background:var(--cta-survol);transform:translateY(-1px);
}
.texte-article .alignleft{float:left;margin:0 1.6em 1.2em 0;max-width:46%}
.texte-article .alignright{float:right;margin:0 0 1.2em 1.6em;max-width:46%}
.texte-article .aligncenter{margin-left:auto;margin-right:auto}
.texte-article .alignwide{
  width:min(1000px,92vw);margin-left:50%;transform:translateX(-50%);
}

/* encadre de mise en avant, repris du gabarit KOMKAB */
.texte-article .encadre{
  background:linear-gradient(180deg,rgba(179,220,232,.30),rgba(179,220,232,.12));
  border:1px solid rgba(63,158,188,.26);
  border-radius:16px;padding:24px 26px;
}
.texte-article .encadre > :first-child{margin-top:0}

/* ---------- FAQ d'article, balisee FAQPage par le theme ---------- */
.faq-article{
  margin-top:3.2em;padding-top:2.4em;
  border-top:1px solid rgba(18,48,76,.12);
}
.faq-article > h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,32px);color:var(--encre);margin-bottom:1.1em;
}
.faq-q{
  border:1px solid rgba(18,48,76,.12);border-radius:14px;
  background:#fff;margin-bottom:12px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.faq-q[open]{
  border-color:rgba(63,158,188,.40);
  box-shadow:0 10px 28px rgba(18,48,76,.08);
}
.faq-q summary{
  list-style:none;cursor:pointer;
  padding:18px 54px 18px 22px;position:relative;
  font-weight:600;font-size:17px;color:var(--encre);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);
  transform:rotate(45deg);transition:transform .22s;
}
.faq-q[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-q summary:hover{color:var(--cta)}
/* Le bloc natif core/details ne pose pas de conteneur autour de la reponse :
   on cible donc tout ce qui n'est pas le resume. */
.faq-q > :not(summary){
  margin:0 22px .9em;
  color:rgba(18,48,76,.80);line-height:1.72;
}
.faq-q > :not(summary):first-of-type{margin-top:0}
.faq-q > :not(summary):last-child{margin-bottom:20px}
.faq-q > ul,.faq-q > ol{padding-left:1.35em;margin-left:22px}

.titre-faq{
  margin-top:3.2em !important;padding-top:2.4em;
  border-top:1px solid rgba(18,48,76,.12);
}

/* ---------- encart auteur ---------- */
.encart-auteur{
  margin-top:3em;padding:26px;border-radius:18px;
  background:linear-gradient(135deg,rgba(16,40,64,.04),rgba(63,158,188,.08));
  border:1px solid rgba(18,48,76,.10);
  display:flex;gap:20px;align-items:flex-start;
}
.encart-auteur img{
  width:62px;height:62px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.encart-auteur h3{
  font-size:16px;font-weight:600;color:var(--encre);margin-bottom:6px;
}
.encart-auteur p{font-size:15px;line-height:1.62;color:rgba(18,48,76,.72)}

/* ---------- CTA de fin d'article ---------- */
.cta-article{
  margin-top:3em;padding:36px 32px;border-radius:22px;text-align:center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(63,158,188,.34), transparent 66%),
    linear-gradient(160deg,var(--nuit),var(--bleu-fonce));
  color:#fff;
}
.cta-article h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.2vw,32px);color:#fff;margin:0 0 12px;
}
.cta-article p{
  color:rgba(255,255,255,.80);max-width:52ch;margin:0 auto 24px;line-height:1.66;
}
.cta-article .bouton{
  display:inline-block;background:var(--cta);color:#fff;
  padding:15px 30px;border-radius:999px;font-weight:600;text-decoration:none;
  transition:background .18s,transform .18s;
}
.cta-article .bouton:hover{background:var(--cta-survol);transform:translateY(-2px)}

/* ---------- cartes d'articles, surface claire ---------- */
.grille-articles{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.carte-article{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(18,48,76,.10);
  border-radius:18px;overflow:hidden;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.carte-article:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(18,48,76,.14);
  border-color:rgba(63,158,188,.38);
}
.carte-article .vignette{
  aspect-ratio:3/2;overflow:hidden;background:rgba(179,220,232,.30);
}
.carte-article .vignette img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s;
}
.carte-article:hover .vignette img{transform:scale(1.04)}
.carte-article .corps{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.carte-article .rubrique{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cta);margin-bottom:10px;
}
.carte-article h2,.carte-article h3{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.26;
  color:var(--encre);margin-bottom:10px;
}
.carte-article h2 a,.carte-article h3 a{color:inherit;text-decoration:none}
.carte-article p{
  font-size:15px;line-height:1.62;color:rgba(18,48,76,.68);margin-bottom:16px;
}
.carte-article .date{
  margin-top:auto;font-size:13px;color:rgba(18,48,76,.52);
}

/* ---------- archive et recherche ---------- */
.tete-archive{
  padding:calc(var(--hauteur-nav) + 56px) 0 44px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(179,220,232,.34), transparent 64%),
    linear-gradient(180deg,#F3F8FB 0%,#fff 100%);
  text-align:center;
}
.tete-archive h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.6vw,48px);color:var(--encre);text-wrap:balance;
}
.tete-archive p{
  margin:16px auto 0;max-width:62ch;
  color:rgba(18,48,76,.70);line-height:1.64;
}
.liste-archive{padding:48px 0 72px}

.pagination{
  display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap;
}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border-radius:12px;
  border:1px solid rgba(18,48,76,.14);color:var(--encre);
  text-decoration:none;font-weight:500;
  transition:background .18s,color .18s,border-color .18s;
}
.pagination .page-numbers:hover{border-color:var(--cta);color:var(--cta)}
.pagination .page-numbers.current{
  background:var(--cta);border-color:var(--cta);color:#fff;
}

.recherche{display:flex;gap:10px;max-width:520px;margin:28px auto 0}
.recherche input[type=search]{
  flex:1;padding:14px 18px;border-radius:999px;
  border:1px solid rgba(18,48,76,.16);background:#fff;
  font-family:var(--sans);font-size:16px;color:var(--encre);
}
.recherche button{
  border:0;background:var(--cta);color:#fff;cursor:pointer;
  padding:14px 26px;border-radius:999px;font-weight:600;font-family:var(--sans);
  transition:background .18s;
}
.recherche button:hover{background:var(--cta-survol)}

/* ---------- 404 ---------- */
.page-404{
  min-height:70vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--hauteur-nav) + 60px) 20px 80px;
}
.page-404 .code{
  font-family:var(--serif);font-size:clamp(72px,14vw,140px);
  line-height:1;color:rgba(63,158,188,.34);
}
.page-404 h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,4vw,40px);color:var(--encre);margin:10px 0 14px;
}
.page-404 p{color:rgba(18,48,76,.70);max-width:52ch;margin:0 auto 28px;line-height:1.66}

/* ---------- garde-fous Elementor ---------- */
.elementor-widget:not(:last-child){margin-bottom:0}
body .elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px}
.elementor-page .site-contenu{padding:0}

/* ---------- impression ---------- */
@media print{
  .nav-zone,.menu-mobile,.pied-page,.cta-article,.encart-auteur,.lien-evitement{display:none !important}
  body.page-claire{background:#fff;color:#000}
  .texte-article a{text-decoration:underline;color:#000}
  .texte-article a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .tete-article{padding-top:calc(var(--hauteur-nav) + 32px)}
  .corps-article{padding:36px 0 52px}
  .texte-article{font-size:16.5px}
  .texte-article .alignleft,.texte-article .alignright{float:none;margin:1.6em 0;max-width:100%}
  .texte-article .alignwide{width:auto;margin-left:0;transform:none}
  .encart-auteur{flex-direction:column}
  .cta-article{padding:28px 22px}
}

/* ---------- mouvement reduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   Menus WordPress
   wp_nav_menu rend des listes, la maquette dessinait des liens
   directs. Ces regles raccordent l'un a l'autre sans toucher
   a la charte.
   ========================================================= */

.liens{list-style:none;padding:0}
.liens li{margin:0;display:flex;align-items:center}
.liens li.current-menu-item > a,
.liens li.current-menu-ancestor > a{color:#fff}
body.page-claire .nav-zone:not(.defile) .liens li.current-menu-item > a{color:var(--cta)}

/* La charte dessine « .menu-mobile a:last-child » pour son dernier lien.
   Dans une liste, chaque lien est seul dans son li, donc ce selecteur les
   atteindrait tous. Les regles ci-dessous reprennent la main avec une
   specificite superieure, sans modifier la charte. */
.menu-mobile ul{list-style:none;padding:0;margin:0}
.menu-mobile li a:last-child{
  border-bottom:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.9);font-weight:400;
}
.menu-mobile li:last-child a:last-child{border-bottom:0}
.menu-mobile li.cta a:last-child{color:#F29E68;font-weight:600;border-bottom:0}
.menu-mobile a.menu-mobile-cta{
  display:block;padding:11px 0;text-decoration:none;font-size:.94rem;
  color:#F29E68;font-weight:600;border-bottom:0;
}

/* un element de menu portant la classe « cta » prend le bouton orange */
.liens li.cta > a{
  font-size:.83rem;font-weight:600;color:var(--cta-texte);
  background:var(--cta);padding:11px 21px;border-radius:100px;
  transition:background .25s,transform .25s;
}
.liens li.cta > a:hover{background:var(--cta-survol);transform:translateY(-1px)}

/* colonnes du pied de page rendues par wp_nav_menu */
.pied-col ul{list-style:none;padding:0;margin:0}

/* =========================================================
   Sous-menus
   Les entrees Particuliers et Professionnels ouvrent la liste
   de leurs prestations. Sur la barre principale, en panneau
   flottant au survol. Dans le menu mobile, a plat.
   ========================================================= */

.liens li.menu-item-has-children{position:relative}
.liens li.menu-item-has-children > a::after{
  content:"";display:inline-block;margin-left:7px;
  width:5px;height:5px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s;
}
.liens li.menu-item-has-children:hover > a::after{transform:rotate(225deg) translate(-1px,-1px)}

.liens .sub-menu{
  position:absolute;top:100%;left:50%;z-index:20;
  min-width:272px;margin-top:16px;padding:10px;
  list-style:none;
  background:rgba(13,34,56,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  box-shadow:0 18px 44px rgba(6,20,34,.32);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
/* passerelle invisible : le pointeur traverse l'espace sans refermer le menu */
.liens .sub-menu::before{
  content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
}
.liens li.menu-item-has-children:hover > .sub-menu,
.liens li.menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.liens .sub-menu li{display:block}
.liens .sub-menu a{
  display:block;padding:10px 14px;border-radius:11px;
  font-size:.875rem;line-height:1.35;color:rgba(255,255,255,.86);
  white-space:normal;transition:background .18s,color .18s;
}
.liens .sub-menu a:hover{background:rgba(255,255,255,.12);color:#fff}

.menu-mobile .sub-menu{padding-left:14px}
.menu-mobile .sub-menu a{font-size:.88rem;opacity:.82}

/* Le menu ouvert defile dans sa propre hauteur : la page derriere est
   bloquee (body.menu-ouvert), sans cela le bas du menu restait hors d'atteinte. */
.menu-mobile.ouvert{
  max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* Sous-menus replies, deplies par la fleche orange */
.menu-mobile li.menu-item-has-children{
  display:flex;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.menu-mobile li.menu-item-has-children > a{flex:1;min-width:0;border-bottom:0}
.menu-mobile li.menu-item-has-children > .sub-menu{display:none;flex-basis:100%;padding-bottom:6px}
.menu-mobile li.menu-item-has-children.deplie > .sub-menu{display:block}
.menu-mobile .sub-menu li:last-child a:last-child{border-bottom:0}
.menu-mobile .deplier{
  flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--cta);
}
.menu-mobile .deplier svg{width:18px;height:18px;transition:transform .25s}
.menu-mobile li.deplie > .deplier svg{transform:rotate(180deg)}
.menu-mobile .deplier:focus-visible{outline:2px solid var(--cta);outline-offset:-4px;border-radius:10px}

/* =========================================================
   Pieces complementaires des gabarits
   ========================================================= */

.site-contenu{display:block}

.titre-section-lies{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.2vw,30px);color:var(--encre);
  margin-bottom:24px;
}

.articles-lies{
  margin-top:3.2em;padding-top:2.4em;
  border-top:1px solid rgba(18,48,76,.12);
}
/* La colonne de lecture fait 720 px utiles : une grille auto-fill y
   retomberait sur deux colonnes. On impose donc les trois colonnes. */
.articles-lies .grille-articles{
  grid-template-columns:repeat(3,1fr);gap:18px;
}
.articles-lies .carte-article h3{font-size:17px;margin-bottom:8px}
.articles-lies .carte-article .resume{display:none}
.articles-lies .carte-article .corps{padding:16px 18px 18px}
@media (max-width:700px){
  .articles-lies .grille-articles{grid-template-columns:1fr}
}

.chapeau-archive{
  margin:16px auto 0;max-width:62ch;
  color:rgba(18,48,76,.70);line-height:1.64;
}
.chapeau-archive p + p{margin-top:.8em}

.aucun-resultat{
  text-align:center;color:rgba(18,48,76,.64);
  padding:48px 0;font-size:17px;
}

.retour-accueil{margin-top:26px}
.bouton-404{
  display:inline-block;background:var(--cta);color:#fff;
  padding:14px 28px;border-radius:999px;font-weight:600;text-decoration:none;
  transition:background .18s,transform .18s;
}
.bouton-404:hover{background:var(--cta-survol);transform:translateY(-2px)}

.page-404 .recherche{margin-top:8px}

/* page montee avec Elementor : aucune contrainte de largeur du theme */
.page-elementor{display:block}

/* =========================================================
   Corrections d'heritage
   La charte pose un selecteur « h1 » nu, dessine pour le hero
   sombre de la page d'accueil : halo lumineux et largeur
   limitee a 16 caracteres. Il faut le neutraliser sur les
   surfaces de lecture, ou le titre est sur fond clair.
   ========================================================= */

.tete-article h1,
.tete-archive h1,
.page-404 h1{
  max-width:none;
  text-shadow:none;
  letter-spacing:0;
}

/* le surtitre sert aussi de lien vers la rubrique */
a.surtitre{text-decoration:none;transition:color .18s}
a.surtitre:hover{color:var(--cta)}

/* =========================================================
   Cartes de maillage interne
   Reprises des widgets image-box d'Elementor : une image, un
   titre, un texte et un lien vers une page de prestation.
   ========================================================= */

/* Les elements de la carte sont des blocs freres a plat. Une grille les
   repartirait colonne par colonne, image puis titre puis texte. Le flottement
   donne le resultat voulu : l'image a gauche, le texte qui s'ecoule a cote. */
.carte-solution{
  margin:1.8em 0;padding:20px 22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(179,220,232,.22),rgba(179,220,232,.08));
  border:1px solid rgba(63,158,188,.24);border-radius:18px;
}
.carte-solution h3{
  margin:0 0 8px;font-family:var(--sans);font-weight:600;
  font-size:18px;line-height:1.3;color:var(--encre);
}
.carte-solution p{margin:0;font-size:15.5px;line-height:1.6;color:rgba(18,48,76,.76)}
.carte-solution .lien-carte{margin-top:10px}
.carte-solution .lien-carte a{
  font-weight:600;color:var(--cta);text-decoration:none;
}
.carte-solution .lien-carte a::after{content:" \2192"}
.carte-solution .lien-carte a:hover{text-decoration:underline}


/* =========================================================
   Formulaire de bilan, rendu par Contact Form 7
   Le gabarit du formulaire reprend les classes de la charte,
   champ, obligatoire, consentement. Il ne reste donc qu'a
   neutraliser ce que Contact Form 7 ajoute de son cote :
   un paragraphe et un retour a la ligne autour de chaque
   controle, et une enveloppe en ligne.
   ========================================================= */

.bilan-form .wpcf7{margin-top:4px}
.bilan-form .wpcf7 .screen-reader-response{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.bilan-form .champ p{margin:0;font:inherit}
.bilan-form .champ br{display:none}
.bilan-form .wpcf7-form-control-wrap{display:block;margin-top:6px}
.bilan-form .champ label{margin-bottom:0}

/* Zone de message : absente de la maquette, elle reprend l'habillage des
   champs d'une ligne. Sans largeur imposee, elle garde ses 40 colonnes par
   defaut et deborde du panneau sur mobile. */
.bilan-form .champ textarea{
  display:block;width:100%;min-height:110px;padding:12px 14px;resize:vertical;
  border:1px solid rgba(18,48,76,.18);border-radius:12px;
  background-color:#F7FBFD;
  font:inherit;font-size:.95rem;line-height:1.5;color:var(--encre);
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.bilan-form .champ textarea:focus{outline:none;border-color:var(--bleu);background-color:#fff;box-shadow:0 0 0 4px rgba(51,96,153,.14)}

/* Une piste de grille en 1fr ne descend pas sous la largeur minimale de son
   contenu : on l'autorise, pour qu'aucun element ne pousse le panneau. */
.bilan-panneau > *{min-width:0}

/* Le cadre anti-spam de Cloudflare mesure 300 px quoi qu'il arrive. Sur un
   telephone, on reprend sur les marges du panneau de quoi le loger. */
@media(max-width:420px){
  .bilan-panneau{padding-left:10px;padding-right:10px}
  .bilan-form{padding-left:14px;padding-right:14px}
}

/* Case de consentement */
.bilan-form .wpcf7-acceptance .wpcf7-list-item{margin:0}
.bilan-form .wpcf7-acceptance label{
  display:flex;align-items:flex-start;gap:10px;
  margin:18px 0 0;font-size:.8rem;font-weight:400;line-height:1.5;
  color:rgba(18,48,76,.74);cursor:pointer;
}
.bilan-form .wpcf7-acceptance input{
  margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--bleu);
}
.bilan-form .wpcf7-acceptance a{color:var(--bleu)}

/* Bouton d'envoi : il porte deja les classes btn et btn-primaire */
.bilan-form .wpcf7-submit{margin-top:20px;width:100%;border:0;cursor:pointer;font-family:inherit}
.bilan-form .wpcf7-spinner{display:block;margin:12px auto 0}

/* Messages de validation */
.bilan-form .wpcf7-not-valid-tip{
  margin-top:6px;font-size:.78rem;font-weight:500;color:#B3261E;
}
.bilan-form .wpcf7-form-control.wpcf7-not-valid{border-color:#B3261E}
.bilan-form .wpcf7-response-output{
  margin:16px 0 0;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(18,48,76,.18);
  font-size:.86rem;font-weight:400;line-height:1.5;
}
.bilan-form .wpcf7-form.sent .wpcf7-response-output{
  border-color:rgba(63,158,188,.5);background:rgba(179,220,232,.28);color:var(--encre);
}
.bilan-form .wpcf7-form.invalid .wpcf7-response-output,
.bilan-form .wpcf7-form.failed .wpcf7-response-output{
  border-color:rgba(179,38,30,.4);background:rgba(179,38,30,.07);color:#8C1D18;
}

/* Anti-spam Turnstile
   L'extension insere son widget en tete de formulaire. La maquette le place
   juste avant le bouton : on reordonne en colonne plutot que de toucher au
   balisage de Contact Form 7. */
.bilan-form .wpcf7-form{display:flex;flex-direction:column}
.bilan-form .wpcf7-turnstile{order:5;margin:18px 0 0}
.bilan-form .champ-envoi{order:6}
.bilan-form .wpcf7-response-output{order:7}
.bilan-form .champ-envoi p{margin:0}

/* =========================================================
   Remise a zero des conteneurs Elementor
   Elementor pose un rembourrage, des marges, un ecart entre
   elements et une largeur maximale sur chacun de ses
   conteneurs. Nos sections portent deja leur propre mise en
   page : ces reglages produisaient un cadre blanc autour du
   hero et un filet blanc entre les sections.
   ========================================================= */

.site-contenu .elementor .e-con,
.site-contenu .elementor .e-con-inner{
  --padding-block-start:0;
  --padding-block-end:0;
  --padding-inline-start:0;
  --padding-inline-end:0;
  --margin-block-start:0;
  --margin-block-end:0;
  --container-max-width:100%;
  --gap:0px;
  --row-gap:0px;
  --column-gap:0px;
  width:100%;
  max-width:100%;
}

.site-contenu .elementor .elementor-widget{width:100%}
.site-contenu .elementor .elementor-widget:not(:last-child){margin-block-end:0}
.site-contenu .elementor .elementor-widget-container{margin:0;padding:0}
.site-contenu .elementor .elementor-widget-html,
.site-contenu .elementor .elementor-widget-shortcode{width:100%}
.site-contenu .elementor .elementor-shortcode{display:block}

/* =========================================================
   Pages d'atterrissage Particuliers et Professionnels
   Elles reprennent la grille des tuiles Objectifs, sans hero.
   ========================================================= */

.page-profil{padding-top:calc(var(--hauteur-nav) + 60px)}
.page-profil .section-tete{max-width:820px}
.page-profil .section-tete h1{
  margin-top:14px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;letter-spacing:0;
  color:var(--encre);text-wrap:balance;
  max-width:none;text-shadow:none;
}
.page-profil .parcours-cta{margin-top:52px}

@media (max-width:700px){
  .page-profil{padding-top:calc(var(--hauteur-nav) + 32px)}
}

/* =========================================================
   Bandeau des partenaires
   Les logos sont stockes en couleur, la desaturation se fait
   a l'affichage. On peut donc revenir en arriere sans
   retoucher les fichiers.
   ========================================================= */

/* Les fichiers sont deja en niveaux de gris, avec une encre normalisee pour
   que les marques aux couleurs claires restent lisibles. Pas de filtre ici. */
.defileur img{transition:opacity .3s}

/* Invitation a detailler sa situation, affichee apres l'envoi du
   formulaire court. Masquee tant que le message n'est pas parti. */
.apres-envoi{order:8;padding:14px 0 6px;text-align:center}
.apres-envoi:focus{outline:none}
.apres-envoi p{font-size:.92rem;line-height:1.65;color:rgba(18,48,76,.78)}
/* Place apres la regle generale : a specificite egale, c'est l'ordre qui tranche. */
.apres-envoi p.apres-envoi-titre{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;
  color:var(--encre);margin-bottom:12px;
}
.apres-envoi .btn{margin-top:20px;width:100%;justify-content:center}

/* =========================================================
   Pages de prestation
   Reprennent la surface de lecture des articles, avec un
   en-tete propre et la grille des cartes de maillage.
   ========================================================= */

.prestation{padding:calc(var(--hauteur-nav) + 60px) 0 90px}
.prestation .conteneur{max-width:820px}

.prestation-tete{margin-bottom:40px}
.prestation-tete .surtitre{display:block;margin-bottom:14px}
.prestation-tete h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;letter-spacing:0;
  color:var(--encre);text-wrap:balance;
  max-width:none;text-shadow:none;
}

.prestation .texte-article > :first-child{margin-top:0}

.cartes-solutions{
  margin-top:3.2em;padding-top:2.4em;
  border-top:1px solid rgba(18,48,76,.12);
}

@media (max-width:700px){
  .prestation{padding:calc(var(--hauteur-nav) + 32px) 0 60px}
}

/* Les pictos de dispositif restent mesures, meme hors carte. */
.prestation .texte-article > figure.wp-block-image{
  max-width:200px;margin-left:0;
}
.prestation .texte-article > figure.wp-block-image img{width:100%;height:auto}

/* =========================================================
   Page Notre equipe
   Reprend la grille des conseillers de la page d'accueil, en
   plus large, avec la biographie sous chaque portrait.
   ========================================================= */

/* Les quatre associes tiennent sur une ligne, le conseiller mandataire
   se place seul sur la suivante. */
.conseillers-detail{
  grid-template-columns:repeat(4,1fr);
  gap:34px 26px;margin-top:8px;
}
@media (max-width:980px){
  .conseillers-detail{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .conseillers-detail{grid-template-columns:1fr}
}
.conseillers-detail .conseiller{text-align:left}
/* La charte centre a demi-largeur le dernier conseiller seul sur sa ligne,
   pour la grille de l'accueil. Ici il garde la taille et l'alignement des
   autres. */
.conseillers-detail .conseiller:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto}
.conseillers-detail .conseiller-photo{aspect-ratio:4/5;border-radius:18px;overflow:hidden}
.conseillers-detail h3{
  margin-top:16px;font-family:var(--serif);font-weight:400;
  font-size:1.35rem;line-height:1.2;color:var(--encre);
}
.conseillers-detail .role{
  margin-top:2px;font-size:.86rem;color:rgba(18,48,76,.62);
}
.conseillers-detail .linkedin{margin:12px 0 0}
.conseiller-bio{
  margin-top:12px;font-size:.92rem;line-height:1.68;color:rgba(18,48,76,.80);
}
.conseiller-bio p + p{margin-top:.8em}

.apres-equipe{margin-top:3.2em;padding-top:2.4em;border-top:1px solid rgba(18,48,76,.12)}

/* Pages de formulaire : le panneau de la section Bilan, en pleine page. */
.page-formulaire{padding:calc(var(--hauteur-nav) + 60px) 0 90px}
.page-formulaire .bilan-texte h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.1;letter-spacing:0;
  color:#fff;max-width:none;text-shadow:none;margin-top:14px;
}
.page-formulaire .bilan-form h2{
  font-family:var(--serif);font-weight:400;font-size:1.8rem;line-height:1.1;
  color:var(--encre);margin:0 0 4px;
}
@media (max-width:700px){
  .page-formulaire{padding:calc(var(--hauteur-nav) + 32px) 0 60px}
}

/* Formulaire detaille : deux colonnes et groupes de choix. */
.bilan-form .rang-form{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.bilan-form .champ-choix{margin-top:18px}
.bilan-form .champ-choix .intitule{
  display:block;margin-bottom:8px;font-size:.83rem;font-weight:600;color:var(--encre);
}
.bilan-form .champ-choix .facultatif{font-weight:400;color:rgba(18,48,76,.55)}
.bilan-form .wpcf7-checkbox,
.bilan-form .wpcf7-radio{display:flex;flex-direction:column;gap:9px}
.bilan-form .wpcf7-list-item{margin:0}
.bilan-form .wpcf7-list-item label{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:.86rem;font-weight:400;line-height:1.45;color:rgba(18,48,76,.82);
}
.bilan-form .wpcf7-list-item input{
  margin-top:1px;width:17px;height:17px;flex:none;accent-color:var(--bleu);
}
@media (max-width:560px){
  .bilan-form .rang-form{grid-template-columns:1fr}
}

/* La page equipe tient sur toute la largeur : quatre portraits par ligne
   demandent plus de place que la colonne de lecture. */
.page-equipe .conteneur{max-width:1120px}
.page-equipe .texte-article,
.page-equipe .faq-article,
.page-equipe .cta-article{max-width:820px;margin-left:auto;margin-right:auto}

/* =========================================================
   Glossaire
   ========================================================= */

.page-glossaire .conteneur{max-width:900px}

.glossaire-nav{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:36px 0 10px;padding:18px 20px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(18,48,76,.10);border-radius:16px;
}
.glossaire-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;border-radius:10px;
  font-weight:600;font-size:.92rem;color:var(--bleu);text-decoration:none;
  border:1px solid rgba(51,96,153,.20);
  transition:background .18s,color .18s,border-color .18s;
}
.glossaire-nav a:hover{background:var(--cta);border-color:var(--cta);color:#fff}

.glossaire-lettre{margin-top:40px;scroll-margin-top:calc(var(--hauteur-nav) + 20px)}
.glossaire-lettre > h2{
  font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;
  color:var(--bleu);margin-bottom:6px;
  padding-bottom:10px;border-bottom:1px solid rgba(18,48,76,.12);
}
.glossaire-lettre dl{margin:0}
.glossaire-lettre dt{
  margin-top:22px;font-size:1.06rem;font-weight:600;color:var(--encre);
}
.glossaire-lettre dd{
  margin:6px 0 0;font-size:1rem;line-height:1.72;color:rgba(18,48,76,.84);
}
.glossaire-lettre dd a{
  color:var(--bleu);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(51,96,153,.42);
  transition:color .18s,text-decoration-color .18s;
}
.glossaire-lettre dd a:hover{color:var(--cta);text-decoration-color:var(--cta)}

.glossaire-suite{margin-top:4em;padding-top:2.6em;border-top:1px solid rgba(18,48,76,.12)}
.glossaire-suite > h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.15;
  color:var(--encre);margin-bottom:28px;text-align:center;
}
.glossaire-suite .cartes-objectifs{grid-template-columns:repeat(3,1fr)}
.glossaire-pro{
  margin-top:26px;text-align:center;font-size:.98rem;color:rgba(18,48,76,.78);
}
.glossaire-pro a{color:var(--bleu)}

@media (max-width:900px){
  .glossaire-suite .cartes-objectifs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .glossaire-suite .cartes-objectifs{grid-template-columns:1fr}
}

/* =========================================================
   Bloc des six tuiles, partage entre l'accueil, le glossaire
   et les pages de prestation.
   ========================================================= */

.objectifs-suite{padding:10px 0 96px}
.objectifs-suite > .conteneur > h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.15;
  color:var(--encre);margin-bottom:32px;text-align:center;
}
.objectifs-suite .cartes-objectifs{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .objectifs-suite .cartes-objectifs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .objectifs-suite .cartes-objectifs{grid-template-columns:1fr}
  .objectifs-suite{padding-bottom:64px}
}

/* Le titre d'introduction de la page equipe est centre. */
.page-equipe .texte-article h2{text-align:center}


/* =========================================================
   Habillage des pages Professionnels
   En-tete sur le bleu profond de la carte dirigeant de
   l'accueil, avec la trame de carres en haut a droite.
   ========================================================= */

.prestation-pro .prestation-tete,
.page-profil-pro .section-tete{
  /* z-index cree le contexte d'empilement : sans lui, les fonds poses en
     pseudo-elements passent derriere le degrade de la page et disparaissent. */
  position:relative;z-index:0;
  margin-top:calc(-1 * (var(--hauteur-nav) + 60px));
  margin-bottom:48px;
  padding:calc(var(--hauteur-nav) + 76px) 0 58px;
  color:#fff;
}
.prestation-pro .prestation-tete::before,
.page-profil-pro .section-tete::before{
  content:"";position:absolute;inset:0 -50vw;z-index:-2;
  background:
    radial-gradient(ellipse 70% 90% at 86% 0%, rgba(63,158,188,.30), transparent 62%),
    linear-gradient(155deg,#0f2c48 0%,#1d4670 58%,#336099 100%);
}
.prestation-pro .prestation-tete::after,
.page-profil-pro .section-tete::after{
  content:"";position:absolute;inset:0 -50vw;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:104px 104px;
  background-position:right -20px top -20px;
  -webkit-mask-image:radial-gradient(circle at 88% -10%,#000 12%,transparent 62%);
  mask-image:radial-gradient(circle at 88% -10%,#000 12%,transparent 62%);
}
.prestation-pro .prestation-tete h1,
.page-profil-pro .section-tete h1{color:#fff}
.prestation-pro .prestation-tete .surtitre,
.page-profil-pro .section-tete .surtitre{color:#F29E68}
.page-profil-pro .section-tete p{color:rgba(255,255,255,.84)}

/* La page garde son fond clair sous l'en-tete. */
.prestation-pro,
.page-profil-pro{padding-top:calc(var(--hauteur-nav) + 60px)}

@media (max-width:700px){
  .prestation-pro .prestation-tete,
  .page-profil-pro .section-tete{
    margin-top:calc(-1 * (var(--hauteur-nav) + 32px));
    padding:calc(var(--hauteur-nav) + 44px) 0 40px;
  }
}

/* Le panneau deroulant reste sombre sur toutes les pages. Sans cette regle,
   les liens heritent de la couleur encre des pages claires et disparaissent
   sur le fond bleu nuit du panneau. */
body.page-claire .nav-zone .liens .sub-menu a{color:rgba(255,255,255,.86)}
body.page-claire .nav-zone .liens .sub-menu a:hover{color:#fff}
body.page-claire .nav-zone .liens li.menu-item-has-children > .sub-menu{color:#fff}

/* Sur une page de prestation, la colonne de lecture fait 820 px. Le bloc des
   six tuiles deborde pour retrouver la largeur des pages d'atterrissage. */
.prestation .objectifs-suite{
  width:min(1120px, calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
  padding-top:3.4em;
  margin-top:2.6em;
  border-top:1px solid rgba(18,48,76,.12);
}
.prestation .objectifs-suite > .conteneur{max-width:none;padding:0}

/* Respiration entre le titre d'introduction et la grille des conseillers. */
.page-equipe .texte-article{margin-bottom:46px}
.page-equipe .conseillers-detail{margin-top:0}

/* Les six tuiles sous le formulaire de bilan, sur fond clair. */
.page-formulaire + .objectifs-suite,
.s-formulaire .objectifs-suite{padding:76px 0 96px}

/* =========================================================
   Cartes de dispositif : mise en grille
   Le flottement laissait le texte venir au contact du picto,
   la marge du flottant n'etant pas toujours respectee selon
   le contexte de formatage des elements voisins. La grille
   place le picto dans sa colonne, une bonne fois pour toutes.
   ========================================================= */

.carte-solution{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  column-gap:26px;
  row-gap:6px;
  align-items:start;
}
.carte-solution > .wp-block-image{
  grid-column:1;
  grid-row:1 / span 2;
  width:72px;margin:0;
}
.carte-solution > .wp-block-image img{width:100%;height:auto;display:block}
.carte-solution > *:not(.wp-block-image){grid-column:2}
.carte-solution h3,
.carte-solution p{overflow:visible}

@media (max-width:640px){
  .carte-solution{grid-template-columns:1fr;row-gap:10px}
  .carte-solution > .wp-block-image{grid-column:1;grid-row:auto;width:64px}
  .carte-solution > *:not(.wp-block-image){grid-column:1}
}

/* =========================================================
   Bandeau de consentement aux cookies
   Les deux boutons ont exactement le meme poids visuel : la
   CNIL exige que refuser soit aussi simple qu'accepter.
   ========================================================= */
.consentement-bandeau{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  max-width:560px;margin:0 auto;padding:18px 20px;
  background:rgba(16,40,64,.96);color:#fff;
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  font-family:var(--sans);font-size:.9rem;line-height:1.55;
}
.consentement-bandeau[hidden]{display:none}
.consentement-bandeau p{margin:0 0 14px;color:rgba(255,255,255,.9)}
.consentement-bandeau a{color:#F29E68;text-decoration:underline}
.consentement-actions{display:flex;gap:10px;flex-wrap:wrap}
.consentement-actions button{
  flex:1 1 140px;min-height:44px;padding:10px 18px;border-radius:100px;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  font:inherit;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;
}
.consentement-actions button:hover,
.consentement-actions button:focus-visible{background:var(--cta);border-color:var(--cta);outline:none}

/* =========================================================
   Accessibilite : contrastes et cibles tactiles
   Les petits textes de couleur (rubriques, surtitres et liens des
   cartes) gardent la teinte de leur thematique, assombrie pour
   atteindre le ratio de 4,5:1 exige pour le texte courant. Les
   pictos, eux, gardent la teinte d'origine.
   ========================================================= */
.categorie,
.objectif .expertise,
.objectif .lien{color:color-mix(in srgb, var(--ci) 70%, #000)}
.champ label .facultatif,
.bilan-form .champ-choix .facultatif{color:rgba(18,48,76,.72)}
.article-meta{color:rgba(18,48,76,.78)}

/* Titres de colonnes du pied de page : h2 pour respecter l'ordre des
   titres de la page, meme apparence que les anciens h4. */
.pied-col h2{
  margin:0 0 16px;font-family:var(--sans);font-size:.74rem;font-weight:600;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bleu-clair);
}

/* Liens du bas de page : zone tactile d'au moins 24 px. */
.pied-bas ul{gap:4px 22px}
.pied-bas a{display:inline-block;padding:6px 0}
/* Cartes d'articles : rubrique en orange fonce (l'orange du bouton,
   2,9:1 sur fond clair, est trop pale pour du petit texte) et date lisible. */
.carte-article .rubrique{color:#B4520F}
.carte-article .date,.carte-article time{color:rgba(18,48,76,.74)}

/* Portraits de l'accueil cliquables vers la page Notre equipe */
.conseiller-lien{display:block;border-radius:18px;text-decoration:none}
.conseiller-lien:focus-visible{outline:3px solid var(--cta);outline-offset:4px}