/* ============================================================
   Harmony — composants canoniques partagés (design system)
   Chargé en plus de global.css. Objectif : une seule version
   de chaque bloc répété, plus de CSS recopié/divergent par page.
   ============================================================ */

/* ---- CTA final « prochaine étape » : carte navy posée sur crème ---- */
.cta-final{position:relative;background:var(--cream);padding:clamp(72px,10vh,120px) 0 0;overflow:hidden}
.cta-in{max-width:1180px;margin:0 auto;padding:0 clamp(22px,4vw,60px)}
.cta-card{position:relative;background:linear-gradient(135deg,#0e1d40,#0a1730);color:var(--cream);border-radius:26px;
  padding:clamp(44px,6vw,82px) clamp(28px,5vw,72px);text-align:center;overflow:hidden;box-shadow:0 30px 64px -34px rgba(20,22,30,.30)}
.cta-card::after{content:"";position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:120%;height:120%;
  background:radial-gradient(circle at 50% 0%,rgba(243,96,54,.18),transparent 55%);pointer-events:none}
.cta-card .mk{width:58px;height:26px;position:relative;z-index:1;margin:0 auto 22px}
.cta-card h2{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.8vw,48px);line-height:1.1;letter-spacing:-.025em;color:#fff;max-width:17em;margin:0 auto}
.cta-card h2 .ex{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--acc-2)}
.cta-card p{position:relative;z-index:1;font-size:clamp(15.5px,1.4vw,18px);color:var(--cream-dim,#c3ccda);max-width:38em;margin:18px auto 0;line-height:1.6}
.cta-actions{position:relative;z-index:1;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.cta-reassure{position:relative;z-index:1;margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.cta-reassure .sep-dot{width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none}
.cta-card .btn-ghost{font-family:var(--body);font-weight:600;font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;border-radius:12px;padding:14px 26px;border:1px solid rgba(244,237,226,.28);color:var(--cream)}
.cta-card .btn-ghost:hover{border-color:rgba(244,237,226,.55);background:rgba(255,255,255,.04)}
@media(max-width:560px){.cta-actions{flex-direction:column}.cta-actions .btn,.cta-actions .btn-ghost{justify-content:center}}

/* ---- Cartes « portes » photo (2 contextes, secteurs) : version canonique ---- */
.sect-grid{display:grid;gap:16px;margin-top:clamp(34px,5vh,56px)}
.sect-grid--duo{grid-template-columns:repeat(2,1fr);gap:22px}
.sect-grid--duo .secteur{height:400px}
.secteur{position:relative;display:block;height:340px;border-radius:16px;overflow:hidden;text-decoration:none;border:1px solid rgba(255,255,255,.09);transition:transform .25s,box-shadow .25s}
.secteur:hover{transform:translateY(-5px);box-shadow:0 34px 70px -28px rgba(0,0,0,.5)}
.sect-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.secteur:hover .sect-bg{transform:scale(1.06)}
.sect-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,16,32,.64) 0%,rgba(7,16,32,.16) 30%,rgba(7,16,32,.52) 60%,rgba(7,16,32,.95) 100%)}
.sect-c{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.sect-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:auto;text-shadow:0 1px 4px rgba(0,0,0,.85),0 1px 10px rgba(0,0,0,.6)}
.sect-c h3{font-family:var(--disp);font-weight:700;font-size:24px;color:#fff;letter-spacing:-.01em;line-height:1.15;text-shadow:0 2px 16px rgba(7,16,32,.7)}
.sect-c p{font-size:14px;color:#e8e3d8;margin-top:8px;line-height:1.5;max-width:24em;text-shadow:0 1px 12px rgba(7,16,32,.7)}
.sect-link{margin-top:15px;font-family:var(--body);font-weight:600;font-size:13.5px;color:var(--acc-2);display:flex;align-items:center;gap:8px}
.sect-link svg{width:16px;height:11px;transition:transform .2s}
.secteur:hover .sect-link svg{transform:translateX(5px)}
@media(max-width:760px){.sect-grid--duo{grid-template-columns:1fr}.sect-grid--duo .secteur{height:330px}}

/* ---- Cartes « valeur » éditoriales numérotées (canonique) ---- */
.vtrio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px);margin-top:clamp(34px,4.5vh,52px)}
@media(max-width:820px){.vtrio{grid-template-columns:1fr;gap:26px}}
.vcard{position:relative;border-top:1px solid rgba(16,24,40,.82);padding:20px 6px 2px}
.vcard .vx{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.vcard .vx b{font-family:var(--disp);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.vcard .vx i{width:7px;height:7px;border-radius:50%;background:var(--acc);font-style:normal;flex:none}
.vcard h3{font-family:var(--disp);font-size:19px;font-weight:700;color:var(--navy);margin:0 0 9px;letter-spacing:-.01em;line-height:1.2}
.vcard p{font-size:14.5px;color:#56627a;line-height:1.6;margin:0;max-width:32ch}
.osec--navy .vcard,.vtrio.on-dark .vcard{border-top-color:rgba(164,188,253,.45)}
.osec--navy .vcard .vx b,.osec--navy .vcard h3{color:#fff}
.osec--navy .vcard p{color:var(--cream-dim,#c3ccda)}

/* .vcard mode « kicker libellé » (acteurs nommés, pas une séquence) */
.vcard .vk{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.vcard .vk::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.osec--navy .vcard .vk{color:#fff}

/* ---- Section FAQ (details/summary, fond navy) — canonique pages secteur ---- */
.faqsec{position:relative;background:linear-gradient(180deg,#0a1730,#0c1a3a);color:var(--cream,#F4EDE2);padding:clamp(60px,9vh,104px) clamp(22px,4vw,48px);overflow:hidden}
.faqsec-in{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.faqsec .eyebrow{color:var(--navy-acc)}
.faqsec h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.025em;color:#fff;margin:0}
.faqsec h2 .ex{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--acc-2)}
.faq{max-width:860px;margin:clamp(32px,4vh,46px) auto 0}
.faq details{border-bottom:1px solid rgba(255,255,255,.12);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;font-family:var(--disp);font-weight:700;font-size:clamp(15.5px,1.4vw,18px);color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;color:var(--acc-2);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--cream-dim,#c3ccda);font-size:14.5px;line-height:1.62;padding:0 40px 20px 0;margin:0}

/* ---- Hero : photo unique en cadre « vitrine » (double filet) ---- */
.hframe{position:relative;padding:10px;border:1px solid rgba(164,188,253,.28);border-radius:28px;background:rgba(255,255,255,.03)}
.hphoto{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -36px rgba(0,0,0,.5)}
.hphoto-chip{position:absolute;left:16px;bottom:16px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#fff;background:rgba(8,18,40,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(164,188,253,.25);border-radius:999px;padding:8px 14px}
.hphoto-onde{position:absolute;top:15px;right:17px}
.hphoto-onde svg{width:44px;height:auto;display:block}
@media(max-width:920px){.hphoto{aspect-ratio:3/2}}

/* ---- Mobile : la vague du logo (header) suffit → on retire le doublon des eyebrows ---- */
@media(max-width:920px){.eyebrow .wave{display:none}}