/* ================= CHARTE BP AVOCATS (couleurs extraites du logo) ================= */
:root{
  --bleu:#1A4E8E;          /* bleu icône BP */
  --bleu-clair:#2E66AC;
  --marine:#012A58;        /* marine du logo */
  --marine-2:#03356B;
  --nuit:#021D3C;          /* fond très sombre */
  --jaune:#F7B417;         /* jaune icône (boutons) */
  --jaune-vif:#FEC51B;     /* jaune logo (accents sur fond sombre) */
  --jaune-h:#E9A607;
  --noir:#161616;
  --texte:#22303F;
  --gris:#5B6B7C;
  --gris-clair:#9AA9B9;
  --fond:#FFFFFF;
  --fond-2:#F4F7FB;        /* bleu très pâle */
  --ligne:#E3E9F1;
  --r:16px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-sm:0 1px 2px rgba(1,42,88,.05), 0 8px 24px rgba(1,42,88,.07);
  --sh-md:0 2px 8px rgba(1,42,88,.07), 0 24px 56px rgba(1,42,88,.14);
  --mont:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --inter:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--inter); color:var(--texte); background:var(--fond); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--mont); color:var(--marine); margin:0; line-height:1.15; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px}
::selection{background:var(--jaune); color:var(--marine)}
:focus-visible{outline:3px solid var(--jaune); outline-offset:2px}
.skip{position:fixed; left:-9999px; top:0; z-index:200; background:var(--jaune); color:var(--marine); padding:12px 18px; border-radius:0 0 12px 0; font-family:var(--mont); font-weight:700; font-size:14px}
.skip:focus{left:0}
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--jaune),var(--jaune-vif)); z-index:99}
section{scroll-margin-top:86px}
.sec{padding:96px 0}
.sec.pale{background:var(--fond-2)}
.sec.marine{background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); color:#fff}
.sec.marine .sec-head h2{color:#fff}
.sec.marine .lead{color:#B9CBDF}
.sec.marine .kicker{color:var(--jaune-vif)}
.sec.marine .diag-note{color:#B9CBDF}
.sec.marine .diag-note strong{color:#fff}
.sec.marine .diag-note a{color:var(--jaune-vif)}
/* quiz interactif */
.diag-wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:22px; align-items:stretch}
.quiz-preview{background:#fff; border-radius:var(--r); padding:30px 32px; box-shadow:var(--sh-md); display:flex; flex-direction:column}
.qhead{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.qtag{font-family:var(--mont); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marine); background:rgba(247,180,23,.18); border:1px solid rgba(247,180,23,.5); padding:6px 12px; border-radius:100px}
.qcount{font-family:var(--mont); font-size:12px; font-weight:700; color:var(--gris)}
.qbar{height:6px; background:var(--fond-2); border-radius:4px; margin:16px 0 20px; overflow:hidden}
.qbar span{display:block; height:100%; width:8%; background:linear-gradient(90deg,var(--jaune),var(--jaune-vif)); border-radius:4px; transition:width .5s var(--ease)}
.quiz-preview h3{font-size:19.5px; font-weight:700; line-height:1.4; color:var(--marine); min-height:56px}
.qopts{margin-top:16px; display:flex; flex-direction:column; gap:10px; flex:1}
.qopt{text-align:left; font:inherit; font-size:15px; color:var(--texte); background:#fff; border:1.5px solid var(--ligne); border-radius:12px; padding:13px 16px; cursor:pointer; transition:border-color .2s, background .2s, transform .2s}
.qopt:hover{border-color:var(--bleu); transform:translateX(3px)}
.qopt.sel{border-color:var(--jaune); background:rgba(247,180,23,.12)}
.qfoot{margin-top:18px; font-size:13px; color:var(--gris)}
.diag-list{display:flex; flex-direction:column; gap:14px}
.dmini{flex:1; display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:18px 20px; transition:background .25s, border-color .25s, transform .25s}
.dmini:hover{background:rgba(255,255,255,.1); border-color:var(--jaune-vif); transform:translateX(4px)}
.dmini .badge{flex:none; font-family:var(--mont); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--marine); background:var(--jaune); padding:6px 11px; border-radius:100px}
.dmini h3{color:#fff; font-size:16.5px; font-weight:700}
.dmini p{color:#AFC3D8; font-size:13.5px; margin-top:3px; line-height:1.5}
.dmini .ar{flex:none; margin-left:auto; color:var(--jaune-vif)}
.dmini .ar svg{width:17px; height:17px}

/* ---------- titres ---------- */
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mont); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--bleu)}
.kicker::before{content:""; width:22px; height:3px; background:var(--jaune); border-radius:2px}
.kicker.jaune{color:var(--jaune-vif)}
.sec-head{max-width:780px; margin-bottom:48px}
.sec-head h2, .h2{font-size:clamp(28px,3.8vw,42px); font-weight:800; margin-top:16px; position:relative; padding-bottom:18px}
.sec-head h2::after, .h2::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:3px; background:var(--jaune)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center h2::after{left:50%; transform:translateX(-50%)}
.sec-head .lead{margin-top:18px; font-size:18.5px; color:var(--gris)}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--mont); font-weight:700; font-size:14px; letter-spacing:.03em; padding:15px 27px; border-radius:100px; border:2px solid transparent; transition:all .25s var(--ease); white-space:nowrap}
.btn svg{width:16px; height:16px; flex:none}
.btn-j{background:var(--jaune); color:var(--marine); box-shadow:0 10px 26px rgba(247,180,23,.35)}
.btn-j:hover{background:var(--jaune-h); transform:translateY(-2px)}
.btn-m{background:var(--marine); color:#fff}
.btn-m:hover{background:var(--bleu); transform:translateY(-2px)}
.btn-o{background:transparent; color:var(--marine); border-color:#C9D6E5}
.btn-o:hover{border-color:var(--bleu); color:var(--bleu); transform:translateY(-2px)}
.btn-ol{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ol:hover{border-color:var(--jaune-vif); color:var(--jaune-vif)}
.lien{display:inline-flex; align-items:center; gap:8px; font-family:var(--mont); font-weight:700; font-size:14px; color:var(--bleu); transition:color .2s}
.lien svg{width:15px; height:15px; transition:transform .25s var(--ease)}
.lien:hover{color:var(--marine)}
.lien:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.header{position:fixed; top:0; left:0; right:0; z-index:80; --c:var(--marine); --c2:#42566C; transition:background .3s var(--ease), box-shadow .3s}
body.on-page .header:not(.scrolled){--c:#fff; --c2:rgba(255,255,255,.85)}
body.on-page .header:not(.scrolled) .nav-tel svg{color:var(--jaune-vif)}
.header.scrolled{--c:var(--marine); --c2:var(--texte); background:rgba(255,255,255,.95); backdrop-filter:saturate(150%) blur(10px); box-shadow:0 1px 0 var(--ligne), 0 6px 24px rgba(1,42,88,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px}
.brand{display:flex; align-items:center; gap:14px; flex:none}
.brand img{height:46px; width:auto; flex:none}
.brand .logo-light{display:none}
body.on-page .header:not(.scrolled) .brand .logo-dark{display:none}
body.on-page .header:not(.scrolled) .brand .logo-light{display:block}
.wordmark{display:flex; flex-direction:column; align-items:center; line-height:1.15}
.wordmark .w1{font-family:var(--mont); font-weight:500; font-size:14.5px; letter-spacing:.2em; color:var(--c); white-space:nowrap}
.wordmark .w2{display:flex; align-items:center; gap:8px; font-family:var(--mont); font-weight:500; font-size:9.5px; letter-spacing:.42em; color:var(--c); margin-top:2px; padding-left:.42em}
.wordmark .w2 i{display:block; height:1.5px; width:26px; background:var(--marine)}
.wordmark .w2 i:last-child{background:var(--jaune)}
body.on-page .header:not(.scrolled) .wordmark .w2 i:first-child{background:#fff}
.wordmark.light .w1,.wordmark.light .w2{color:#fff}
.wordmark.light .w2 i:first-child{background:#fff}
.footer .brand img{height:56px}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt .n{font-family:var(--mont); font-weight:800; font-size:14.5px; letter-spacing:.02em; color:var(--c); white-space:nowrap}
.brand-txt .s{font-family:var(--mont); font-weight:600; font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--c2)}
.nav-links{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav-links a{white-space:nowrap; font-family:var(--mont); font-size:14px; font-weight:600; color:var(--c2); position:relative; transition:color .2s}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-7px; width:0; height:3px; border-radius:2px; background:var(--jaune); transition:width .28s var(--ease)}
.nav-links a:hover{color:var(--c)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--c)}
.nav-links a.active::after{width:100%}
.nav-right{display:flex; align-items:center; gap:14px}
.nav-tel{white-space:nowrap; display:inline-flex; align-items:center; gap:8px; font-family:var(--mont); font-weight:700; font-size:13.5px; color:var(--c)}
.nav-tel svg{width:15px; height:15px; color:var(--bleu)}
.header.scrolled .nav-tel svg{color:var(--bleu)}
.burger{display:none; width:44px; height:44px; border:none; border-radius:10px; background:transparent; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:22px; height:2.5px; border-radius:2px; background:var(--c); position:relative; transition:.3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:22px; height:2.5px; border-radius:2px; background:var(--c); transition:.3s}
.burger span::before{top:-7px}.burger span::after{top:7px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0; transform:rotate(45deg); background:var(--marine)}
body.menu-open .burger span::after{top:0; transform:rotate(-45deg); background:var(--marine)}
.mobile-menu{display:none}
body.menu-open .mobile-menu{display:block; position:fixed; inset:76px 0 auto 0; z-index:79; background:#fff; border-bottom:1px solid var(--ligne); box-shadow:var(--sh-md); padding:10px 28px 24px}
.mobile-menu a{display:block; padding:14px 2px; font-family:var(--mont); font-weight:600; font-size:16px; color:var(--marine); border-bottom:1px solid var(--ligne)}
body.menu-open .header{--c:var(--marine); --c2:var(--texte); background:#fff}

/* ---------- hero (fond blanc : duo + citation) ---------- */
.hero{position:relative; background:linear-gradient(180deg,#FFFFFF 0%,#F4F6F9 26%,#EDF0F4 100%); overflow:hidden; isolation:isolate}
.hero::after{content:""; position:absolute; right:-180px; top:-200px; width:660px; height:660px; border-radius:50%; background:radial-gradient(circle, rgba(26,78,142,.07), transparent 65%)}
.hero .container{position:relative; z-index:1}
.hero-top{padding:150px 0 30px; text-align:center; max-width:900px; margin:0 auto}
.hero .devise{display:inline-flex; align-items:center; gap:12px; font-family:var(--mont); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bleu)}
.hero .devise::before,.hero .devise::after{content:""; width:28px; height:3px; border-radius:2px; background:var(--jaune)}
.hero h1{font-size:clamp(34px,5vw,58px); font-weight:800; color:var(--marine); letter-spacing:-.02em; margin-top:22px}
.hero h1 .j{color:var(--jaune-h)}
.hero .sous{margin:20px auto 0; font-size:clamp(16.5px,2vw,19.5px); color:var(--gris); max-width:58ch}
.hero-cta{margin-top:30px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px}
.hduo{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:end; padding-top:22px}
.duo{position:relative; display:flex; align-items:flex-end; justify-content:center; gap:26px}
.duo::before{content:""; position:absolute; z-index:0; bottom:-4px; left:50%; transform:translateX(-50%); width:86%; height:40px; background:radial-gradient(ellipse at center, rgba(1,42,88,.20), transparent 62%); filter:blur(5px)}
.duo img{position:relative; z-index:1; display:block; width:auto; height:min(52vh,490px); filter:drop-shadow(0 16px 26px rgba(1,42,88,.16))}
.duo-cap{position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:16px; background:rgba(1,42,88,.92); border-radius:100px; padding:10px 22px; text-align:center; box-shadow:var(--sh-md); width:max-content; max-width:94%}
.duo-cap strong{display:block; font-family:var(--mont); font-weight:700; font-size:13px; color:#fff}
.duo-cap span{display:block; margin-top:2px; font-family:var(--mont); font-weight:600; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--jaune-vif)}
.quote-card{align-self:center; margin-bottom:64px; background:var(--jaune); color:var(--marine); border-radius:18px; padding:36px 38px; box-shadow:0 24px 50px rgba(247,180,23,.35); position:relative}
.quote-card p{font-family:var(--mont); font-weight:700; font-size:clamp(20px,2.1vw,26px); line-height:1.45}
.quote-card .who{margin-top:16px; display:flex; align-items:center; gap:10px; font-family:var(--mont); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(1,42,88,.72)}
.quote-card .who::before{content:""; width:26px; height:3px; border-radius:2px; background:var(--marine)}
/* ---------- bandeau domaines (marquee) ---------- */
.marquee{background:var(--jaune); overflow:hidden; padding:15px 0; position:relative}
.marquee .track{display:flex; gap:0; width:max-content; animation:defile 36s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee .item{display:inline-flex; align-items:center; gap:26px; padding-right:26px; font-family:var(--mont); font-weight:700; font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--marine); white-space:nowrap}
.marquee .item::after{content:"◆"; font-size:8px; color:var(--marine); opacity:.55}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- associés (fond blanc, photo + texte) ---------- */
.asso{display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:center}
.asso+.asso{margin-top:80px}
.asso .ph{position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:410px; padding-bottom:26px}
.asso .ph::before{content:""; position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:68%; height:26px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(1,42,88,.15), transparent 65%); filter:blur(4px)}
.asso .ph::after{content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:92px; height:8px; border-radius:5px; background:var(--jaune)}
.asso .ph img{position:relative; z-index:1; height:430px; width:auto; filter:drop-shadow(0 16px 26px rgba(1,42,88,.16))}
.asso .ph img.solo-l{height:398px}
.asso .ph img.solo-c{height:448px}
.asso .bio h3{font-size:29px; font-weight:800; margin-top:14px}
.asso .bio p{margin-top:14px; color:var(--gris); font-size:16px; line-height:1.7}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.chip{font-family:var(--mont); font-weight:600; font-size:12px; color:var(--marine); background:var(--fond-2); border:1px solid var(--ligne); border-radius:100px; padding:8px 14px}
.asso-cta{margin-top:22px}
.asso.rev .ph{order:2}


/* ---------- cabinet (sobre : texte + valeurs) ---------- */
.cab-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.cab-txt .lead{margin-top:22px; font-size:18px; color:var(--gris)}
.cab-txt .lead strong{color:var(--marine); font-weight:600}
.cab-cta{margin-top:26px}
.valeurs{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding-top:8px}
.valeur{display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--ligne); border-radius:14px; padding:18px 18px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.valeur:hover{transform:translateY(-3px); box-shadow:var(--sh-sm)}
.valeur .ic{flex:none; width:40px; height:40px; border-radius:10px; background:var(--marine); color:var(--jaune-vif); display:grid; place-items:center}
.valeur .ic svg{width:19px; height:19px}
.valeur h3{font-size:16px; font-weight:700; margin-bottom:4px}
.valeur p{font-size:13.5px; color:var(--gris); line-height:1.5}



/* ---------- vision : encart à cheval sur deux sections ---------- */
.vision{position:relative; z-index:2}
.v-photo{height:clamp(400px,62vh,660px); overflow:hidden}
.v-card.left{margin-left:0; margin-right:auto}
.v-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.vision.bzh .v-photo img{object-position:center 30%}
.v-card{position:relative; background:linear-gradient(135deg,var(--nuit),var(--marine) 55%,var(--marine-2)); color:#fff; border-radius:20px; padding:46px 48px 44px; max-width:620px; margin:-230px 0 -60px auto; box-shadow:0 30px 70px rgba(1,29,60,.38)}
.v-card h2{color:#fff; font-size:clamp(24px,2.6vw,32px); font-weight:800; margin-top:14px; line-height:1.25}
.v-card p{margin-top:18px; color:#C9D7E6; font-size:16px; line-height:1.7}
.v-card p strong{color:var(--jaune-vif); font-weight:700}
.v-card .btn{margin-top:28px}

/* ---------- six familles ---------- */
.fam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.fam{position:relative; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:28px 26px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.fam::after{content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--jaune); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.fam:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:transparent}
.fam:hover::after{transform:scaleX(1)}
.fam-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.fam .num{font-family:var(--mont); font-weight:800; font-size:13px; letter-spacing:.08em; color:var(--gris-clair)}
.fam .ic{width:46px; height:46px; border-radius:12px; background:var(--fond-2); color:var(--bleu); display:grid; place-items:center; transition:background .3s, color .3s}
.fam:hover .ic{background:var(--marine); color:var(--jaune-vif)}
.fam .ic svg{width:23px; height:23px}
.fam h3{font-size:19.5px; font-weight:700; margin-bottom:9px}
.fam p{font-size:14.5px; color:var(--gris); line-height:1.6}
.fam-foot{margin-top:42px; text-align:center}

/* ---------- diagnostics ---------- */
.diag-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.diag{display:flex; flex-direction:column; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:30px 28px; position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.diag:hover{transform:translateY(-6px); box-shadow:var(--sh-md)}
.diag .badge{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-family:var(--mont); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marine); background:rgba(247,180,23,.16); border:1px solid rgba(247,180,23,.5); padding:7px 13px; border-radius:100px; margin-bottom:20px}
.diag .badge svg{width:13px; height:13px; color:var(--jaune-h)}
.diag h3{font-size:21px; font-weight:700; margin-bottom:11px}
.diag p{font-size:15px; color:var(--gris); flex:1}
.diag .go{margin-top:22px}
.diag-note{margin-top:34px; text-align:center; color:var(--gris); font-size:15px}
.diag-note strong{color:var(--marine)}
.diag-note a{color:var(--bleu); font-weight:600}
/* ---------- diagnostic interactif (modale) ---------- */
#diagModal .box{max-width:640px;max-height:90vh;overflow:auto}
.dstep{font-family:var(--mont);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gris);margin-bottom:8px}
.dprog{height:6px;background:var(--fond-2);border-radius:4px;overflow:hidden;margin:0 0 20px}
.dprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jaune),var(--jaune-vif));border-radius:4px;transition:width .4s var(--ease)}
.dfam{font-family:var(--mont);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu);margin-bottom:8px}
.dq{font-size:20px;font-weight:800;color:var(--marine);line-height:1.35}
.dopts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.dopt{text-align:left;font:inherit;font-size:15.5px;color:var(--texte);background:#fff;border:1.5px solid var(--ligne);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.dopt:hover{border-color:var(--bleu);background:var(--fond-2);transform:translateX(3px)}
.dscore{display:flex;align-items:center;gap:18px;margin:4px 0 16px}
.dgauge{--v:0;width:92px;height:92px;border-radius:50%;flex:none;background:conic-gradient(var(--jaune-vif) calc(var(--v)*1%),var(--fond-2) 0);display:grid;place-items:center;position:relative}
.dgauge::before{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}
.dgauge b{position:relative;font-family:var(--mont);font-weight:800;font-size:21px;color:var(--marine)}
.dlabel{font-size:14px;color:var(--gris);line-height:1.5}
.dlabel strong{display:block;color:var(--marine);font-size:17px;margin-bottom:3px}
.carto2{margin:14px 0 4px}
.crow{display:grid;grid-template-columns:104px 1fr 1fr 1fr;gap:6px;margin-bottom:6px}
.crow.chead>div{font-size:10px;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:2px 0}
.cyl{font-size:10px;color:var(--gris);font-weight:700;display:flex;align-items:center}
.ccell{min-height:46px;border-radius:8px;padding:5px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;background:var(--fond-2)}
.ccell.lo{background:rgba(28,122,68,.12)}.ccell.mid{background:rgba(247,180,23,.18)}.ccell.hi{background:rgba(179,64,42,.15)}
.cchip{font-size:10px;font-weight:700;color:#fff;background:var(--marine);border-radius:6px;padding:3px 6px;height:fit-content}
.ccell.mid .cchip{background:#8a6a12}.ccell.hi .cchip{background:#b3402a}
.dprio{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.dprio .pr{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--ligne);border-radius:12px;background:var(--fond-2)}
.dprio .pr .rank{font-family:var(--mont);font-weight:800;font-size:15px;color:var(--jaune-h)}
.dprio .pr h4{font-size:14.5px;color:var(--marine);font-weight:800}
.dprio .pr p{font-size:13.5px;color:var(--gris);margin-top:2px;line-height:1.5}
.dverdict{border-radius:14px;padding:16px 18px;margin:6px 0 8px;font-size:14.5px;line-height:1.55}
.dverdict b{display:block;font-size:17px;margin-bottom:4px}
.dverdict.v-green{background:rgba(28,122,68,.10);border:1px solid rgba(28,122,68,.35);color:#14532d}
.dverdict.v-amber{background:rgba(247,180,23,.14);border:1px solid rgba(247,180,23,.55);color:#7a5600}
.dverdict.v-red{background:rgba(179,64,42,.10);border:1px solid rgba(179,64,42,.45);color:#8a1c1c}
.droad{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.droad .ri{display:flex;gap:10px;align-items:baseline;font-size:14px;color:#2b3a49;line-height:1.5}
.droad .ri .rk{font-family:var(--mont);font-weight:800;font-size:10px;color:var(--marine);background:var(--jaune);border-radius:6px;padding:2px 7px;white-space:nowrap}
.dform-intro{margin:18px 0 12px;padding-top:16px;border-top:1px solid var(--ligne)}
.dform-intro b{color:var(--marine);font-size:16px}
.section-t2{font-family:var(--mont);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bleu);margin:18px 0 8px}
.dpenal{display:flex;flex-direction:column;gap:8px}
.dpenal .pq{display:flex;gap:12px;padding:11px 13px;border:1px solid rgba(179,64,42,.3);background:rgba(179,64,42,.06);border-radius:10px;font-size:13px;color:#2b3a49}
.dpenal .pqa{font-family:var(--mont);font-weight:800;font-size:11px;color:#b3402a;white-space:nowrap}
.dpenal .pq b{color:var(--marine)}
.dpenal .pq span{display:block;color:var(--gris);margin-top:2px;font-size:12.5px}
.dflags{font-size:13.5px;color:#8a1c1c;background:rgba(179,64,42,.07);border-radius:10px;padding:10px 13px;margin:8px 0}
.droad .ri i{color:var(--jaune-h);font-style:normal;font-weight:700}
.dq em{font-style:normal;color:var(--bleu);font-weight:600}
.dq b{color:var(--marine)}
a.dom{cursor:pointer;text-decoration:none;color:inherit}
a.dom .dgo{margin-left:auto;align-self:center;color:var(--bleu);font-weight:800;font-size:18px;opacity:0;transform:translateX(-5px);transition:opacity .22s,transform .22s}
a.dom:hover .dgo{opacity:1;transform:translateX(0)}
a.dom.hl .dgo{color:var(--jaune-vif)}
a.fam{cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.fam h3{color:var(--marine)}
a.fam .fgo{margin-top:16px;font-family:var(--mont);font-weight:700;font-size:13.5px;color:var(--bleu);display:inline-flex;align-items:center;gap:7px}
a.fam .fgo svg{width:15px;height:15px;transition:transform .25s var(--ease)}
a.fam:hover .fgo svg{transform:translateX(4px)}


/* ---------- cas-types ---------- */
.cas-list{border-top:1px solid var(--ligne)}
.cas{display:grid; grid-template-columns:52px 1.1fr 1.35fr; gap:24px; align-items:center; padding:26px 10px; border-bottom:1px solid var(--ligne); transition:background .25s}
.cas:hover{background:#fff}
.cas .cnum{font-family:var(--mont); font-weight:800; font-size:22px; color:transparent; -webkit-text-stroke:1.5px var(--bleu)}
.cas .situ h4{font-family:var(--mont); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--bleu); margin-bottom:7px}
.cas .situ p{font-size:15px; color:var(--gris); line-height:1.55}
.cas .rip{display:flex; align-items:flex-start; gap:14px}
.cas .rip .fl{flex:none; width:30px; height:30px; border-radius:50%; background:var(--jaune); color:var(--marine); display:grid; place-items:center; margin-top:2px}
.cas .rip .fl svg{width:15px; height:15px}
.cas .rip p{font-family:var(--mont); font-weight:600; font-size:16.5px; line-height:1.45; color:var(--marine)}
.cas-foot{margin-top:40px; text-align:center}

/* ---------- ressources ---------- */
.res-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.res-col{background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:32px 30px; transition:box-shadow .3s var(--ease)}
.res-col:hover{box-shadow:var(--sh-md)}
.res-col .rk{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.res-col .rk .ic{width:42px; height:42px; border-radius:11px; background:var(--marine); color:var(--jaune-vif); display:grid; place-items:center}
.res-col .rk .ic svg{width:20px; height:20px}
.res-col .rk h3{font-size:20px; font-weight:700}
.res-tag{font-family:var(--mont); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marine); background:rgba(247,180,23,.2); border-radius:100px; padding:4px 10px; margin-left:8px; vertical-align:2px}
.res-item{display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--ligne); transition:padding-left .25s var(--ease)}
.res-item:hover{padding-left:6px}
.res-item:first-of-type{border-top:none}
.res-item .dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--jaune); margin-top:9px}
.res-item .rt{font-weight:600; font-size:16px; color:var(--marine)}
.res-item .rd{font-size:13.5px; color:var(--gris); margin-top:2px}
.res-btn{width:100%; text-align:left; background:none; border:none; border-top:1px solid var(--ligne); font:inherit; cursor:pointer; align-items:flex-start; border-radius:0}
.res-btn:first-of-type{border-top:none}
.res-btn .get{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--mont); font-weight:700; font-size:12.5px; color:var(--bleu); opacity:.85; margin-top:6px; white-space:nowrap}
.res-btn .get svg{width:14px; height:14px; transition:transform .25s var(--ease)}
.res-btn:hover .get{color:var(--marine)}
.res-btn:hover .get svg{transform:translateX(4px)}
/* modale de demande */
.modal{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(2,29,60,.62); backdrop-filter:blur(4px)}
.modal.open{display:flex}
.modal .box{background:#fff; border-radius:20px; width:100%; max-width:560px; padding:34px 34px 30px; box-shadow:var(--sh-md); position:relative; max-height:92vh; overflow:auto}
.modal .close{position:absolute; top:14px; right:14px; width:38px; height:38px; border:none; border-radius:50%; background:var(--fond-2); color:var(--marine); font-size:20px; cursor:pointer}
.modal .close:hover{background:var(--jaune)}
.modal h3{font-size:22px; font-weight:800; padding-right:40px}
.modal .doc{margin-top:8px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mont); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--marine); background:rgba(247,180,23,.2); border-radius:100px; padding:6px 12px}
.modal .form{border:none; box-shadow:none; padding:0; margin-top:8px}
.modal .form label{margin-top:16px}
.res-foot{margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.res-note{font-size:14px; color:var(--gris)}

/* ---------- chiffres ---------- */
.stats{background:linear-gradient(120deg, var(--marine), var(--marine-2)); color:#fff}
.stats .container{padding:70px 28px}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center}
.stat .n{font-family:var(--mont); font-weight:800; font-size:clamp(38px,4.6vw,56px); color:var(--jaune-vif); line-height:1}
.stat .n .plus{font-size:.6em; vertical-align:.35em}
.stat .l{margin-top:10px; font-family:var(--mont); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#C7D6E7}

/* ---------- actus ---------- */
.actu-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.actu{display:flex; flex-direction:column; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:26px 26px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.actu:hover{transform:translateY(-6px); box-shadow:var(--sh-md)}
.actu .cat{align-self:flex-start; font-family:var(--mont); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--bleu); background:var(--fond-2); border-radius:100px; padding:6px 12px; margin-bottom:16px}
.actu h3{font-size:18.5px; font-weight:700; line-height:1.35; flex:1}
.actu .go{margin-top:18px}
.actu-foot{margin-top:38px; text-align:center}

/* ---------- contact ---------- */
.contact{position:relative; background:var(--nuit); color:#fff; overflow:hidden; isolation:isolate}
.contact .bgimg{position:absolute; inset:0; z-index:-2}
.contact .bgimg img{width:100%; height:100%; object-fit:cover; object-position:center 30%}
.contact .veil{position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(1,29,60,.97) 0%, rgba(1,42,88,.93) 45%, rgba(1,42,88,.72) 100%)}
.contact .container{padding:96px 28px}
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start}
.contact h2{color:#fff; font-size:clamp(28px,3.8vw,42px); font-weight:800; margin-top:16px; position:relative; padding-bottom:18px}
.contact h2::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:3px; background:var(--jaune-vif)}
.contact .lead{margin-top:18px; color:#C7D6E7; font-size:18px; max-width:44ch}
.contact-actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:13px}
.bureaux{display:grid; gap:16px}
.bureau{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:22px 24px; backdrop-filter:blur(5px)}
.bureau .bh{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.bureau .bh svg{width:17px; height:17px; color:var(--jaune-vif)}
.bureau .bh h4{font-family:var(--mont); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.bureau p{color:#C7D6E7; font-size:15px}
.bureau .lignes{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.bureau .lignes a{display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:500; font-size:15px; transition:color .2s}
.bureau .lignes a:hover{color:var(--jaune-vif)}
.bureau .lignes a svg{width:15px; height:15px; color:var(--jaune-vif)}

/* ---------- signature ---------- */
.signature{background:#fff; text-align:center}
.signature .container{padding:72px 28px 64px}
.signature img{max-width:340px; width:70%; margin:0 auto}
.signature .devise{margin-top:6px; font-family:var(--mont); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris)}
.signature .devise .j{color:var(--jaune-h)}

/* ---------- footer ---------- */
.footer{background:var(--nuit); color:#9FB3C9}
.footer .container{padding:56px 28px 30px}
.f-top{display:flex; justify-content:space-between; gap:44px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12)}
.f-brand .brand-txt .n{color:#fff}
.f-brand .brand-txt .s{color:#7E93AB}
.f-brand p{max-width:34ch; margin-top:16px; font-size:14px; color:#8FA3BA}
.f-nav{display:flex; gap:58px; flex-wrap:wrap}
.f-col h5{font-family:var(--mont); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--jaune-vif); margin:0 0 15px}
.f-col a{display:block; color:#A9BCD2; font-size:14px; margin-bottom:9px; transition:color .2s}
.f-col a:hover{color:#fff}
.f-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:22px; font-size:12.5px; color:#748AA3}
.f-bot a{color:#748AA3}.f-bot a:hover{color:#fff}

/* ---------- pages intérieures ---------- */
.page[hidden]{display:none}
.page-hero{background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); color:#fff; padding:150px 0 62px}
.page-hero .crumb{font-family:var(--mont); font-weight:600; font-size:12.5px; color:#8FA6C0; margin-bottom:18px}
.page-hero .crumb a{color:#B9CBDF}
.page-hero .crumb a:hover{color:var(--jaune-vif)}
.page-hero h1{color:#fff; font-size:clamp(30px,4.4vw,48px); font-weight:800; margin-top:14px; position:relative; padding-bottom:18px}
.page-hero h1::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:3px; background:var(--jaune-vif)}
.page-hero .plead{margin-top:16px; color:#B9CBDF; font-size:18px; max-width:62ch}
.dots{margin:18px 0 0; padding:0; list-style:none}
.dots li{position:relative; padding-left:22px; margin-top:9px; color:var(--gris); font-size:15px; line-height:1.6}
.dots li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--jaune)}
.contact-page-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:start}
.form{background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:34px 34px 30px; box-shadow:var(--sh-sm)}
.form label{display:block; font-family:var(--mont); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--marine); margin:18px 0 7px}
.form .frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form .frow > div > label{margin-top:18px}
.form .frow > div:first-child > label{margin-top:18px}
.form input,.form select,.form textarea{width:100%; border:1.5px solid var(--ligne); border-radius:12px; padding:13px 15px; font:inherit; font-size:15.5px; color:var(--texte); background:#fff; transition:border-color .2s; -webkit-appearance:none; appearance:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--bleu); outline:none}
.form textarea{min-height:150px; resize:vertical}
.fsubmit{margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.fsubmit .btn{border:none}
.fnote{font-size:13px; color:var(--gris)}
.bureau.light{background:#fff; border:1px solid var(--ligne)}
.bureau.light .bh h4{color:var(--marine)}
.bureau.light .bh svg{color:var(--jaune-h)}
.bureau.light p{color:var(--gris)}
.bureau.light .lignes a{color:var(--marine)}
.bureau.light .lignes a:hover{color:var(--bleu)}
.bureau.light .lignes a svg{color:var(--jaune-h)}

/* ---------- compliance (page domaines) ---------- */
.compliance{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center; background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); color:#fff; border-radius:22px; padding:52px 54px; box-shadow:0 30px 70px rgba(1,29,60,.28); position:relative; overflow:hidden}
.compliance::before{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(254,197,27,.16), transparent 65%)}
.compliance h2{color:#fff; font-size:clamp(26px,3vw,36px); font-weight:800; margin-top:14px; line-height:1.2}
.compliance p{margin-top:18px; color:#C9D7E6; font-size:16.5px; line-height:1.7; max-width:60ch}
.compliance p strong{color:var(--jaune-vif)}
.cp-points{margin-top:22px; display:flex; flex-wrap:wrap; gap:9px}
.cp-points span,.cp-points .cp-link{font-family:var(--mont); font-weight:600; font-size:12.5px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:8px 14px}
.cp-points .cp-link{color:var(--jaune-vif); border-color:rgba(254,197,27,.5)}
.cp-points .cp-link:hover{background:rgba(254,197,27,.15)}
.cp-cta{margin-top:28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.cp-cta .lien{color:var(--jaune-vif)}
.cp-cta .lien:hover{color:#fff}
.cp-visual{position:relative; display:grid; place-items:center; min-height:300px}
.ring{width:250px; height:250px; border-radius:50%; border:1.5px dashed rgba(254,197,27,.5); display:grid; place-items:center; animation:spin 40s linear infinite}
.ring2{width:180px; height:180px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); display:grid; place-items:center; animation:spin 28s linear infinite reverse}
.core{width:112px; height:112px; border-radius:50%; background:var(--jaune); color:var(--marine); display:grid; place-items:center; box-shadow:0 20px 44px rgba(247,180,23,.4)}
.core svg{width:56px; height:56px}
@keyframes spin{to{transform:rotate(360deg)}}
.cp-visual .tag{position:absolute; font-family:var(--mont); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--marine); background:#fff; border-radius:100px; padding:7px 13px; box-shadow:var(--sh-sm)}
.cp-visual .t1{top:6%; left:8%}.cp-visual .t2{top:44%; right:0}.cp-visual .t3{bottom:6%; left:16%}
.fam .star{font-family:var(--mont); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--marine); background:var(--jaune); border-radius:100px; padding:4px 9px; margin-left:auto; margin-right:12px}
@media (prefers-reduced-motion:reduce){.ring,.ring2{animation:none}}

/* ---------- domaines : aperçu accueil ---------- */
.dom-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
.dom{display:flex; gap:15px; align-items:flex-start; padding:16px 18px; border:1px solid var(--ligne); border-radius:14px; background:#fff; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s}
.dom:hover{transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:transparent}
.dom .dic{flex:none; width:42px; height:42px; border-radius:11px; background:var(--fond-2); color:var(--bleu); display:grid; place-items:center}
.dom .dic svg{width:21px; height:21px}
.dom .dt{font-family:var(--mont); font-weight:700; font-size:16px; color:var(--marine)}
.dom .dtag{font-size:13.5px; color:var(--gris); margin-top:2px; line-height:1.45}
.dom.hl{background:linear-gradient(135deg,var(--nuit),var(--marine)); border-color:transparent}
.dom.hl .dic{background:var(--jaune); color:var(--marine)}
.dom.hl .dt{color:#fff}
.dom.hl .dtag{color:var(--jaune-vif)}

/* ---------- méthode : 4 étapes ---------- */
.methode{position:relative; overflow:hidden}
.methode::before{content:""; position:absolute; left:-140px; bottom:-200px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(26,78,142,.06), transparent 65%)}
.etapes{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.etapes::before{content:""; position:absolute; left:6%; right:6%; top:26px; height:2px; background:linear-gradient(90deg, rgba(247,180,23,.15), rgba(247,180,23,.85), rgba(247,180,23,.15))}
.etape{position:relative; padding:0 26px 0 0}
.etape+.etape{padding-left:26px}
.etape .n{position:relative; z-index:1; display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--jaune); color:var(--marine); font-family:var(--mont); font-weight:800; font-size:15px; box-shadow:0 12px 30px rgba(247,180,23,.35)}
.etape h3{color:var(--marine); font-size:19px; font-weight:700; margin-top:22px; line-height:1.3}
.etape p{color:var(--gris); font-size:14.5px; line-height:1.65; margin-top:10px}

/* ---------- formation : formats ---------- */
.fmt-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
.fmt-card{background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); color:#fff; border-radius:20px; padding:36px 36px 32px; box-shadow:var(--sh-md)}
.fmt-card .fic{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:13px; background:var(--jaune); color:var(--marine); margin-bottom:16px}
.fmt-card .fic svg{width:26px; height:26px}
.fmt-card h3{color:#fff; font-size:22px; font-weight:800}
.fmt-card p{color:#C9D7E6; font-size:15px; margin-top:16px; line-height:1.65}
.ftags{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px}
.ftags span{font-family:var(--mont); font-weight:600; font-size:12.5px; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:8px 13px}
.fmt-card .lien{color:var(--jaune-vif); margin-top:20px; display:inline-flex}
.fmt-card .lien:hover{color:#fff}

/* ---------- blog ---------- */
.post-feat{display:block; background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); color:#fff; border-radius:20px; padding:44px 46px; box-shadow:var(--sh-md); margin-bottom:34px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.post-feat:hover{transform:translateY(-4px); box-shadow:0 30px 66px rgba(1,29,60,.3)}
.post-feat h2{color:#fff; font-size:clamp(24px,3vw,34px); font-weight:800; margin-top:12px; max-width:22ch}
.post-feat p{color:#C9D7E6; font-size:16.5px; margin-top:14px; max-width:64ch; line-height:1.6}
.post-feat .pmore{margin-top:20px}
.pcat{display:inline-flex; align-items:center; font-family:var(--mont); font-weight:700; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--bleu); background:var(--fond-2); border-radius:100px; padding:6px 12px}
.pcat.feat{color:var(--marine); background:var(--jaune)}
.pmore{display:inline-flex; align-items:center; gap:8px; font-family:var(--mont); font-weight:700; font-size:14px; color:var(--jaune-vif)}
.post-feat .pmore{color:var(--jaune-vif)} .post-feat .pmore svg{width:15px;height:15px}
.blog-filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.chipf{font-family:var(--mont); font-weight:600; font-size:13.5px; color:var(--ink-soft); background:#fff; border:1.5px solid var(--ligne); border-radius:100px; padding:9px 16px; cursor:pointer; transition:all .2s}
.chipf:hover{border-color:var(--bleu); color:var(--marine)}
.chipf.on{background:var(--marine); border-color:var(--marine); color:#fff}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.blog-grid.three{grid-template-columns:repeat(3,1fr)}
.post{display:flex; flex-direction:column; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:26px 26px 22px; transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s}
.post:hover{transform:translateY(-6px); box-shadow:var(--sh-md); border-color:transparent}
.post .pcat{align-self:flex-start; margin-bottom:15px}
.post h3{font-size:18.5px; font-weight:700; line-height:1.34; color:var(--marine); flex:1}
.post .pmore{margin-top:18px; color:var(--bleu)}
.post .pmore svg{width:15px; height:15px; transition:transform .25s var(--ease)}
.post:hover .pmore svg{transform:translateX(4px)}

/* ---------- article ---------- */
.art-meta{margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; font-family:var(--mont); font-weight:600; font-size:13.5px; color:#B9CBDF}
.article{max-width:800px}
.art-lead{font-size:20px; line-height:1.6; color:var(--marine); font-weight:500}
.reflexes{margin-top:30px; display:flex; flex-direction:column; gap:2px}
.reflexe{display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--ligne)}
.reflexe .rn{flex:none; font-family:var(--mont); font-weight:800; font-size:20px; color:transparent; -webkit-text-stroke:1.5px var(--jaune-h); width:44px}
.reflexe h3{font-size:19px; font-weight:700; color:var(--marine)}
.reflexe p{margin-top:7px; font-size:16px; color:var(--gris); line-height:1.65}
.art-cta{margin-top:40px; background:var(--fond-2); border:1px solid var(--ligne); border-radius:var(--r); padding:30px 32px; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap}
.art-cta h3{font-size:20px; font-weight:800; color:var(--marine)}
.art-cta p{margin-top:8px; font-size:15px; color:var(--gris); max-width:46ch}
.art-cta-btns{display:flex; gap:12px; flex-wrap:wrap}
.art-note{margin-top:26px; font-size:13.5px; color:var(--gris); font-style:italic; border-left:3px solid var(--ligne); padding-left:16px}
.related-head{margin:8px 0 22px}
/* ---------- article de blog : lecture ---------- */
.article{max-width:760px}
.post-hero .art-meta{margin-top:20px}
.art-meta{display:flex; gap:9px 14px; flex-wrap:wrap; align-items:center; font-family:var(--mont); font-weight:600; font-size:13.5px; color:#9FB4CC}
.art-meta .am-au{display:inline-flex; align-items:center; gap:9px; color:#fff}
.art-meta .am-au i{width:27px; height:27px; border-radius:50%; background:var(--jaune-vif); color:var(--marine); display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.02em}
.art-meta .am-dot{opacity:.45}

.art-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none}
.art-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--jaune),var(--jaune-vif))}
body:not(.on-post) .art-progress{display:none}
body.on-post #progress{display:none}
.form-ok{background:rgba(28,122,68,.08); border:1px solid rgba(28,122,68,.35); border-radius:14px; padding:22px 24px; color:#14532d; line-height:1.6}
.form-ok h3{color:#14532d; font-weight:800; margin-bottom:6px}
.hp{position:absolute!important; left:-9999px!important}

.art-toc{background:var(--fond-2); border:1px solid var(--ligne); border-left:4px solid var(--jaune); border-radius:12px; padding:20px 24px 22px; margin:0 0 36px}
.art-toc-h{font-family:var(--mont); font-weight:800; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--bleu); margin-bottom:13px}
.art-toc ol{list-style:none; counter-reset:toc; display:flex; flex-direction:column; gap:10px; margin:0; padding:0}
.art-toc li{counter-increment:toc}
.art-toc a{color:var(--marine); font-weight:600; font-size:15px; line-height:1.4; display:flex; gap:13px; align-items:baseline; text-decoration:none}
.art-toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--mont); font-weight:800; font-size:12px; color:var(--jaune-h); min-width:22px}
.art-toc a:hover{color:var(--bleu)}

.art-lead{font-size:20.5px; line-height:1.62; color:var(--marine); font-weight:500; margin-bottom:6px}
.art-body{font-size:17.5px; line-height:1.85; color:#2B3A49}
.art-body>p{margin-top:19px}
.art-body h2{font-family:var(--mont); font-weight:800; font-size:23px; line-height:1.25; color:var(--marine); margin:40px 0 6px; scroll-margin-top:100px}
.art-body h2::before{content:""; display:block; width:34px; height:4px; border-radius:3px; background:var(--jaune); margin-bottom:15px}
.art-body h3{font-family:var(--mont); font-weight:700; font-size:18.5px; color:var(--marine-2); margin:28px 0 4px}
.art-body strong{color:var(--marine); font-weight:700}
.art-body em{color:#3a4b5c}
.art-body ul{margin:17px 0 4px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.art-body li{position:relative; padding-left:27px; font-size:17px; line-height:1.7}
.art-body li::before{content:""; position:absolute; left:2px; top:10px; width:8px; height:8px; border-radius:2px; background:var(--jaune); transform:rotate(45deg)}
.art-body a{color:var(--bleu); font-weight:600; text-decoration:underline; text-underline-offset:3px}

.art-share{display:flex; align-items:center; gap:12px; margin-top:42px; padding-top:24px; border-top:1px solid var(--ligne)}
.art-share-l{font-family:var(--mont); font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--gris); margin-right:2px}
.art-share .sh{width:42px; height:42px; border-radius:12px; border:1px solid var(--ligne); background:#fff; color:var(--marine); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s}
.art-share .sh:hover{background:var(--marine); color:#fff; border-color:var(--marine); transform:translateY(-2px)}
.art-share .sh svg{width:18px; height:18px}
.art-share .sh.ok{background:#1c7a44; color:#fff; border-color:#1c7a44}

.author-card{margin-top:34px; display:flex; gap:22px; align-items:center; background:var(--fond-2); border:1px solid var(--ligne); border-radius:var(--r); padding:24px 26px}
.author-card img{width:80px; height:80px; border-radius:50%; object-fit:cover; object-position:top center; flex:none; box-shadow:var(--sh-sm)}
.author-card .ac-role{font-family:var(--mont); font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--bleu)}
.author-card h4{font-size:19px; font-weight:800; color:var(--marine); margin-top:3px}
.author-card p{font-size:14.5px; color:var(--gris); margin-top:7px; line-height:1.6; max-width:54ch}
.author-card .ac-link{margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mont); font-weight:700; font-size:13.5px; color:var(--bleu)}
.author-card .ac-link svg{width:14px; height:14px}
@media(max-width:640px){
  .author-card{flex-direction:column; align-items:flex-start; text-align:left}
  .art-body{font-size:16.5px} .art-lead{font-size:18.5px}
  .art-body h2{font-size:21px}
}


/* ---------- pages légales ---------- */
.legal{max-width:840px}
.legal-flag{background:rgba(247,180,23,.14); border:1px solid rgba(247,180,23,.5); border-radius:12px; padding:14px 18px; font-size:14px; color:var(--marine); margin-bottom:28px}
.legal h2{font-size:22px; font-weight:800; color:var(--marine); margin-top:34px}
.legal h2:first-of-type{margin-top:0}
.legal p{margin-top:12px; font-size:16px; color:var(--ink-soft); line-height:1.75}
.legal a{color:var(--bleu); font-weight:600}
.legal-back{margin-top:38px}

/* ---------- hero : chiffres ---------- */
.hero-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:0; max-width:820px; margin:26px auto 0; padding-top:24px; border-top:1px solid var(--ligne)}
.hstat{padding:2px 40px; text-align:center}
.hstat+.hstat{border-left:1px solid var(--ligne)}
.hstat .hn{display:block; font-family:var(--mont); font-weight:800; font-size:clamp(19px,2.3vw,25px); color:var(--marine); letter-spacing:-.01em}
.hstat .hl{display:block; margin-top:5px; font-size:13px; color:var(--gris)}

/* ---------- terrain : bureaux + départements ---------- */
.bureaux2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px}
.bxc{border:1px solid var(--ligne); border-radius:var(--r); padding:26px 28px; background:#fff; display:flex; gap:16px; align-items:flex-start; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.bxc:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.bxc .ic{flex:none; width:46px; height:46px; border-radius:12px; background:var(--marine); color:var(--jaune-vif); display:grid; place-items:center}
.bxc .ic svg{width:22px; height:22px}
.bxc h3{font-size:19px; font-weight:700}
.bxc h3 a{color:var(--marine)}
.bxc h3 a:hover{color:var(--bleu)}
.bxc .ad{margin-top:6px; color:var(--gris); font-size:15px; line-height:1.5}
.bxc .tag{margin-top:12px; display:inline-block; font-family:var(--mont); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--marine); background:rgba(247,180,23,.2); padding:5px 11px; border-radius:100px}
.dept-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.dc{border:1px solid var(--ligne); border-radius:var(--r); padding:26px; background:#fff; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.dc:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.dc .dn{font-family:var(--mont); font-weight:800; font-size:12px; letter-spacing:.05em; color:var(--jaune-h); text-decoration:none; display:inline-block}
a.dn:hover{color:var(--jaune)}
.dc h3{font-size:18px; font-weight:700; margin-top:4px}
.dc .t{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.dc .t a{color:var(--marine); font-size:15px; font-weight:600; display:flex; align-items:center; gap:9px; transition:color .2s}
.dc .t a::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--jaune); flex:none}
.dc .t a:hover{color:var(--bleu)}
.dc.hl{background:linear-gradient(135deg,var(--nuit),var(--marine)); border-color:transparent}
.dc.hl .dn{color:var(--jaune-vif)}
.dc.hl h3{color:#fff}
.dc.hl .t a{color:#D4E0EE}
.dc.hl .t a:hover{color:#fff}

/* ---------- newsletter ---------- */
.news-card{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:linear-gradient(135deg,var(--nuit),var(--marine) 60%,var(--marine-2)); border-radius:22px; padding:46px 50px; box-shadow:var(--sh-md); position:relative; overflow:hidden}
.news-card::before{content:""; position:absolute; right:-100px; top:-100px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(254,197,27,.16), transparent 65%)}
.news-card h2{color:#fff; font-size:clamp(24px,2.8vw,32px); font-weight:800; margin-top:12px}
.news-card .news-txt p{margin-top:14px; color:#C9D7E6; font-size:16px; line-height:1.6; max-width:44ch}
.news-form{position:relative; z-index:1}
.news-row{display:flex; gap:10px; flex-wrap:wrap}
.news-row input{flex:1; min-width:200px; border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); border-radius:100px; padding:15px 22px; font:inherit; font-size:15.5px; color:#fff}
.news-row input::placeholder{color:#9FB3C9}
.news-row input:focus{outline:none; border-color:var(--jaune-vif); background:rgba(255,255,255,.12)}
.news-form .btn{border:none}
.news-ok{margin-top:16px; color:var(--jaune-vif); font-family:var(--mont); font-weight:700; font-size:15px}
.news-note{margin-top:14px; color:#8FA6C0; font-size:13px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} .marquee .track{animation:none}}

/* ---------- responsive ---------- */
@media (max-width:1280px){.nav-tel{display:none}}
@media (max-width:1010px){.nav-links{display:none}.burger{display:flex}}
@media (max-width:1020px){
  .fam-grid,.diag-grid,.actu-grid,.blog-grid,.blog-grid.three{grid-template-columns:repeat(2,1fr)}
  .diag-wrap{grid-template-columns:1fr}
  .dom-grid{grid-template-columns:1fr}
  .etapes{grid-template-columns:repeat(2,1fr); gap:34px 0}
  .etapes::before{display:none}
  #methode{padding-top:120px !important}
  .contact-page-grid{grid-template-columns:1fr}
  .dept-grid{grid-template-columns:repeat(2,1fr)}
  .bureaux2{grid-template-columns:1fr}
  .news-card{grid-template-columns:1fr; gap:24px; padding:36px 30px}
  .compliance{grid-template-columns:1fr; padding:38px 30px}
  .fmt-grid{grid-template-columns:1fr; gap:30px}
  .cp-visual{min-height:280px}
  .cab-grid{grid-template-columns:1fr; gap:36px}
  .contact-grid{grid-template-columns:1fr; gap:40px}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:36px 20px}
  .hero-top{padding:140px 0 24px}
  .v-card{margin:-170px 0 -40px auto}
  .hduo{grid-template-columns:1fr; gap:28px}
  .quote-card{margin-bottom:0}
  .duo img{height:min(44vh,400px)}
  .asso{grid-template-columns:1fr; gap:30px}
  .asso.rev .ph{order:0}
  .asso .ph{min-height:0; padding-top:26px}
  .asso .ph img{height:370px}
  .asso .ph img.solo-l{height:345px}
  .asso .ph img.solo-c{height:385px}
}
@media (max-width:740px){
  body{font-size:16px}
  .nav .btn-j{display:none}
  .sec{padding:66px 0}
  .fam-grid,.diag-grid,.actu-grid,.res-grid{grid-template-columns:1fr}
  .valeurs{grid-template-columns:1fr; gap:10px}
  .valeur{padding:14px}
  .blog-grid,.blog-grid.three{grid-template-columns:1fr}
  .art-cta{flex-direction:column; align-items:flex-start}
  .cas{grid-template-columns:34px 1fr; gap:12px 14px; padding:22px 4px}
  .cas .rip{grid-column:1/-1; padding-left:48px}
  .hero-top{padding:118px 0 18px}
  .v-card{margin:-120px 0 -20px; padding:30px 26px}
  #cas{padding-top:100px !important}
  .duo{gap:14px}
  .duo img{height:300px}
  .quote-card{padding:26px 24px}
  .form .frow{grid-template-columns:1fr}
  .duo{display:none}
  .hduo{grid-template-columns:1fr}
  .btn{white-space:normal; text-align:center}
  .hstat{padding:6px 18px}
  .hstat+.hstat{border-left:none}
  .hero-stats{gap:8px 0; padding-top:18px}
  .news-row{flex-direction:column}
  .news-row .btn{justify-content:center}
  .dept-grid{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr; gap:28px}
  .etape,.etape+.etape{padding:0}
  #methode{padding-top:90px !important}
  .page-hero{padding:120px 0 46px}
  .asso .ph img{height:300px}
  .asso .ph img.solo-l{height:280px}
  .asso .ph img.solo-c{height:312px}
  .asso+.asso{margin-top:56px}
  .hero-points{gap:10px 20px}
  .duo-cap{bottom:14px; padding:10px 15px}
  .duo-cap strong{font-size:12.5px}
  .duo-cap span{font-size:11px}
  .contact .container,.vision .container{padding-top:66px; padding-bottom:66px}
  .brand-txt .n{font-size:14px}
}