/* ============================================================
   DB Finance : refonte 2026 (sobre, éditorial, vivant)
   Chargée après base.css, dir-a.css et pages.css : elle réoriente tout
   le site vers le langage validé sur la maquette d'accueil :
   - angles droits, filets fins, pas d'ombres ni de fonds pastel ;
   - titres en Hanken Grotesk fin, mots clés en italique Spectral ;
   - numéros et repères en Spectral italique vert d'eau ;
   - mouvement lent : mots qui passent du flou au net, montées en fondu,
     monogramme vivant, orbites, frise qui se remplit.
   ============================================================ */

:root {
  --ivoire: #fbfaf6;
  --pierre: #f2f1ec;
  --filet:  #dcdfe6;
  --nuit:   #0a1433;
  --paper: var(--ivoire);
  /* Les anciens tons lavande deviennent pierre et filet */
  --lavender-bg:   var(--pierre);
  --lavender-line: var(--filet);
  /* Angles droits et pas d'ombres */
  --r-xs: 0; --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0;
  --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-lg: none;
}

body { background: var(--ivoire); }
::selection { background: rgba(69,184,174,.25); }

/* ---------- Titres ---------- */
.hero-a h1, .page-hero h1 {
  font-family: var(--font-sans); font-weight: 300; color: var(--marine);
  letter-spacing: -.048em; line-height: .96;
}
.hero-a h1 { font-size: clamp(54px, 9.4vw, 136px); }
.page-hero h1 { font-size: clamp(46px, 7.4vw, 108px); }
main h2, .shead h2, .vision-head h2, .pillars .sec-head h2, .cabinet-text h2,
.history-text h2, .cta-panel h2, .career-panel h2, .reporting-showcase .rs-text h2 {
  font-family: var(--font-sans); font-weight: 300; color: var(--marine);
  letter-spacing: -.035em; line-height: 1.04;
}
.shead h2, .vision-head h2, .pillars .sec-head h2, .cabinet-text h2, .history-text h2, .career-panel h2,
.acc-tete h2, .acc-pourquoi h2, .acc-cabinet h2 {
  font-size: clamp(34px, 4.4vw, 60px);
}
/* Mot clé : italique Spectral, même couleur */
.hero-a h1 em, .page-hero h1 em, h2 em, .cabinet-text h2 em, .history-text h2 em, .career-panel h2 em {
  font-family: var(--font-display); font-style: italic; font-weight: 400; color: inherit; letter-spacing: -.015em;
}
.hero-a h1 .dot { color: inherit; }
h3, h4 { letter-spacing: -.01em; }

/* Numéros et repères : Spectral italique vert d'eau */
.vblock .vb-index, .pillar .p-num, .mblock-head .mnum, .subcat .sc-idx, .step .st-num,
.skill-card .sc-index, .presta-num, .sector .s-pip, .profile .p-stage, .feature .f-badge {
  font-family: var(--font-display) !important; font-style: italic; font-weight: 400;
  color: var(--teal) !important; background: none !important; border: 0 !important;
  box-shadow: none !important; letter-spacing: 0; text-transform: none;
}

/* ---------- Boutons et liens ---------- */
.btn { border-radius: 0; padding: 16px 26px; position: relative; overflow: hidden; isolation: isolate; box-shadow: none !important; }
.btn-primary { background: var(--marine); color: #fff; transition: transform .45s var(--ease-out), color .45s; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--teal); transform: translateY(101%); transition: transform .5s var(--ease-out); }
.btn-primary:hover { background: var(--marine); transform: none; }
.btn-primary:hover::after { transform: none; }
.btn .arrow { transition: transform .45s var(--ease-out); }
.link-arrow {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size .5s var(--ease-out), color .3s;
}
.link-arrow:hover { background-size: 100% 1px; }

/* ---------- En-tête ---------- */
.nav { border-radius: 0; }
.nav.scrolled { background: rgba(251,250,246,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--filet); box-shadow: none; }
.nav-links a::after { height: 1px; }
.mobile-menu { background: var(--ivoire); }

/* ---------- Fonds de section ---------- */
.section-paper { background: var(--ivoire); }
.section-alt { background: var(--pierre); }
.aura-logo, .aura, .cta-panel .glow { display: none !important; }

/* ---------- Cartes → filets ----------
   Les blocs ne sont plus des cartes (fond, arrondi, ombre) mais des
   compartiments séparés par des filets fins. */
.vblock, .pillar, .mblock, .subcat, .sector, .tool, .step, .profile, .feature,
.skill-card, .presta, .booking-card, .h-card, .contact-alt-mail {
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
}
.vblock, .pillar, .sector, .tool, .profile, .feature, .subcat {
  border: 0 !important; border-top: 1px solid var(--filet) !important;
  transition: border-color .5s var(--ease-out);
}
.vblock:hover, .pillar:hover, .sector:hover, .tool:hover, .profile:hover, .feature:hover, .subcat:hover {
  transform: none !important; border-top-color: var(--teal) !important; background: transparent !important;
}
.vblock::after, .sector::after { display: none !important; }
.mblock { border: 0 !important; border-top: 1px solid var(--filet) !important; padding-left: 0 !important; padding-right: 0 !important; }
.chip { border-radius: 0 !important; background: transparent !important; border: 0 !important; padding: 0 !important; font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.chips { gap: 4px 16px !important; }
.checklist li .ck { color: var(--teal); background: none; }
.step::before { background: var(--teal); height: 1px; }

/* ---------- Haut des pages intérieures ---------- */
.page-hero { background: var(--ivoire); position: relative; overflow: hidden; }
.page-hero .inner { position: relative; z-index: 2; }
.crumbs { font-size: 13px; letter-spacing: .02em; }

/* ---------- Bandeau d'appel (bas de page) : clair, avec orbites ---------- */
.cta-panel {
  background: var(--pierre) !important; color: var(--marine); border-radius: 0 !important;
  position: relative; overflow: hidden; isolation: isolate; text-align: center !important;
  padding: clamp(56px, 8vw, 110px) clamp(28px, 6vw, 80px) !important;
}
.cta-panel h2 { color: var(--marine) !important; font-size: clamp(44px, 7vw, 96px) !important; margin: 18px 0 16px !important; }
.cta-panel p { color: var(--slate) !important; margin: 0 auto 30px !important; max-width: 48ch !important; }
.cta-panel .eyebrow { color: var(--teal) !important; }
.cta-panel .btn-primary { background: var(--marine) !important; color: #fff !important; }
.cta-panel > *:not(.orbite) { position: relative; z-index: 1; }

/* ---------- Orbites (bandeau d'appel, rappel du monogramme) ---------- */
.orbite { position: absolute; z-index: 0; border-radius: 50%; border: 1px solid rgba(0,25,91,.10); pointer-events: none; }
.orbite.o1 { width: 560px; height: 560px; right: -150px; top: -190px; }
.orbite.o2 { width: 380px; height: 380px; right: -60px; top: -100px; border-style: dashed; }
.orbite .rot { position: absolute; inset: 0; animation: dbTourne 46s linear infinite; }
.orbite.o2 .rot { animation-duration: 70s; animation-direction: reverse; }
.orbite .point { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(69,184,174,.18); }
.orbite.o2 .point { width: 5px; height: 5px; top: -2.5px; margin-left: -2.5px; background: var(--marine); box-shadow: none; }
@keyframes dbTourne { to { transform: rotate(360deg); } }

/* ---------- Monogramme vivant (haut de page) ----------
   Monogramme en verre dépoli devant une lumière qui dérive, tracé fin qui
   se dessine, reflet, deux orbites, respiration lente, relief à la souris.
   Inséré par js/site.js dans le haut de l'accueil et des pages. */
.vivant { position: absolute; z-index: 0; pointer-events: none; aspect-ratio: 1; opacity: 0; transition: opacity 1.6s var(--ease-out) .2s; }
.vivant.est-pret { opacity: 1; }
.hero-a .vivant { right: -40px; top: 40px; width: min(50vw, 700px); }
.page-hero .vivant { right: -80px; top: -40px; width: min(40vw, 520px); }
.vivant .v-souffle { position: absolute; inset: 0; animation: dbSouffle 9s ease-in-out infinite; }
.vivant .v-souffle > * { position: absolute; transition: transform 1.2s var(--ease-out); }
@keyframes dbSouffle { 50% { transform: scale(1.025); } }
.vivant .v-lumiere { inset: 16%; border-radius: 50%; filter: blur(46px); opacity: .9;
  background: radial-gradient(circle at 35% 35%, rgba(69,184,174,.7), rgba(69,184,174,0) 55%),
              radial-gradient(circle at 70% 70%, rgba(40,90,220,.45), rgba(40,90,220,0) 55%);
  animation: dbDerive 16s ease-in-out infinite alternate; }
@keyframes dbDerive { 0% { translate: -6% 4%; rotate: 0deg; } 50% { translate: 5% -5%; } 100% { translate: -2% 6%; rotate: 50deg; } }
.vivant .v-verre, .vivant .v-reflet { inset: 20%; rotate: 90deg;
  -webkit-mask: url("/assets/logo.svg") center / contain no-repeat; mask: url("/assets/logo.svg") center / contain no-repeat; }
.vivant .v-verre { background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 45%, rgba(0,25,91,.18) 100%);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); }
.vivant .v-reflet { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) 0 0 / 300% 100%;
  animation: dbReflet 7s ease-in-out 3s infinite; opacity: .8; }
@keyframes dbReflet { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
.vivant .v-trace { inset: 20%; width: 60%; height: 60%; overflow: visible; rotate: 90deg; }
.vivant .v-trace path { fill: none; stroke: var(--marine); stroke-opacity: .55; stroke-width: .28; stroke-dasharray: 700; stroke-dashoffset: 700; }
.vivant.est-pret .v-trace path { animation: dbTrace 3.2s cubic-bezier(.65,0,.35,1) .3s forwards; }
@keyframes dbTrace { to { stroke-dashoffset: 0; } }
.vivant .v-orbite { inset: 3%; border-radius: 50%; border: 1px solid rgba(0,25,91,.12); }
.vivant .v-orbite .rot { position: absolute; inset: 0; animation: dbTourne 38s linear infinite; }
.vivant .v-orbite .point { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(69,184,174,.18); }
.vivant .v-orbite.o2 { inset: 11%; border-style: dashed; border-color: rgba(0,25,91,.10); }
.vivant .v-orbite.o2 .rot { animation-duration: 64s; animation-direction: reverse; }
.vivant .v-orbite.o2 .point { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; background: var(--marine); box-shadow: none; }
.vivant .v-lumiere { transform: translate(calc(var(--mx, 0) * -30px), calc(var(--my, 0) * -30px)); }
.vivant .v-verre, .vivant .v-reflet { transform: translate(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 18px)); }
.vivant .v-trace { transform: translate(calc(var(--mx, 0) * 30px), calc(var(--my, 0) * 30px)); }
.vivant .v-orbite { transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px)); }
@media (max-width: 860px) {
  .hero-a .vivant, .page-hero .vivant { width: 92vw; right: -38vw; top: -10px; }
  .vivant.est-pret { opacity: .55; }
}

/* ---------- Titres : mots qui passent du flou au net ---------- */
.mot { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.18em);
  transition: opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
.is-visible .mot, .mot.is-visible { opacity: 1; filter: blur(0); transform: none; }

/* Le titre du haut de page attend la fin de l'ouverture pour s'écrire */
html:not(.site-ouvert) .attend-ouverture .mot { opacity: 0; filter: blur(12px); transform: translateY(.18em); }

/* ---------- Ouverture du site : enrichissements ---------- */
.intro-ondes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.intro-ondes i { position: absolute; left: 0; top: 0; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%;
  border: 1px solid rgba(0,25,91,.16); opacity: 0; transform: scale(.4); animation: dbOnde 2.4s var(--ease-out) forwards; }
.intro-ondes i:nth-child(2) { animation-delay: .35s; }
.intro-ondes i:nth-child(3) { animation-delay: .7s; }
@keyframes dbOnde { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
.intro-nom { position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% + 9vmax); text-align: center;
  font-family: var(--font-display); font-size: clamp(16px, 2.6vmin, 26px); color: var(--marine); letter-spacing: .6em; opacity: 0;
  animation: dbNom 1.1s var(--ease-out) 1.1s forwards; }
@keyframes dbNom { from { opacity: 0; letter-spacing: .6em; filter: blur(6px); } to { opacity: 1; letter-spacing: .04em; filter: blur(0); } }
.intro--zoom .intro-ondes { display: none; }
.intro--zoom .intro-nom { animation: dbNomPart .35s ease-in forwards; }
@keyframes dbNomPart { from { opacity: 1; letter-spacing: .04em; } to { opacity: 0; transform: translateY(12px); } }
.intro { cursor: pointer; }

/* ---------- Fenêtre de contact ---------- */
.modal { border-radius: 0 !important; }
.modal-close { border-radius: 50% !important; }
.field input, .field textarea, .field select { border-radius: 0 !important; }
.contact-tabs, .contact-tabs [role=tab], .contact-tabs-pill { border-radius: 0 !important; }

/* ---------- Pied de page clair ---------- */
.site-footer { background: var(--ivoire) !important; color: var(--slate) !important; border-top: 1px solid var(--filet); }
.site-footer a { color: var(--ink) !important; }
.site-footer a:hover { color: var(--teal) !important; }
.footer-brand .brand-name, .footer-col h5 { color: var(--marine) !important; }
.footer-bottom { border-top: 1px solid var(--filet) !important; color: var(--slate-soft) !important; }
.footer-siege span { color: var(--teal) !important; }
.ordre-badge { border-radius: 0 !important; background: var(--marine) !important; }

@media (prefers-reduced-motion: reduce) {
  .mot { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .vivant, .vivant * , .orbite .rot { animation: none !important; transition: none !important; }
  .vivant { opacity: 1 !important; }
  .vivant .v-trace path { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   ACCUEIL
   ============================================================ */
.acc-tete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 60px); }
.acc-tete p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--slate); max-width: 50ch; }
.acc-tete h2 { margin: 16px 0 0; max-width: 18ch; }

/* 1. Ouverture */
.acc-ouverture { position: relative; overflow: hidden; padding: clamp(132px, 13vw, 180px) 0 clamp(64px, 8vw, 100px); background: var(--ivoire); }
.acc-ouverture .container { position: relative; z-index: 2; }
.acc-ouverture h1 { margin: 26px 0 0; }
.acc-bas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); margin-top: clamp(40px, 5vw, 64px); padding-top: 30px; border-top: 1px solid var(--filet); }
.acc-ouverture .lede { font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; line-height: 1.55; margin: 0; max-width: 32ch; color: var(--ink); }
.acc-ouverture .hero-actions { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-self: end; align-self: start; margin: 0; }

/* 2. Phases */
.acc-phases { padding: clamp(80px, 9vw, 120px) 0 clamp(72px, 8vw, 110px); border-top: 1px solid var(--filet); }
.frise { position: relative; margin-top: 12px; }
.frise-ligne { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--filet); }
.frise-progres { position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--p, 0)); }
.frise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.frise li { position: relative; padding: 44px 32px 0 0; }
.jalon { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ivoire); border: 1px solid var(--slate-soft);
  transition: background .5s var(--ease-out), border-color .5s, box-shadow .6s var(--ease-out); }
.frise li.atteint .jalon { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 7px rgba(69,184,174,.16); }
.frise .k { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--teal); }
.frise .v { display: block; font-size: clamp(28px, 2.6vw, 36px); font-weight: 300; letter-spacing: -.025em; margin: 8px 0 12px; color: var(--slate-soft); transition: color .6s var(--ease-out); }
.frise li.atteint .v { color: var(--marine); }
.frise p { font-size: 15px; line-height: 1.6; color: var(--slate); margin: 0; max-width: 28ch; }

/* 3. Expertises */
.acc-expertises { padding: clamp(80px, 9vw, 110px) 0 0; }
.acc-duo { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.acc-duo > div { display: block; padding: 48px 56px 56px 0; color: inherit; }
.acc-duo > div + div { border-left: 1px solid var(--filet); padding-left: 56px; }
.acc-num { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--teal); }
.acc-duo h3 { font-family: var(--font-sans); font-weight: 300; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; color: var(--marine); margin: 14px 0 16px; transition: color .4s; }
.acc-duo h3 a:hover { color: var(--teal); }
.acc-duo p { margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: var(--slate); max-width: 40ch; }
.acc-duo ul { list-style: none; margin: 0 0 34px; padding: 0; columns: 2; column-gap: 28px; font-size: 14.5px; color: var(--ink); }
.acc-duo li { padding: 9px 0; border-top: 1px solid var(--filet); break-inside: avoid; }


/* 4. Nos clients */
.acc-clients { padding: clamp(90px, 10vw, 120px) 0 clamp(80px, 9vw, 110px); }
.acc-secteurs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.acc-secteurs li { display: grid; grid-template-columns: 90px 1.3fr 1fr; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--filet); transition: background .5s var(--ease-out); }
.acc-secteurs .n { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--teal); }
.acc-secteurs .s { display: inline-block; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.025em; color: var(--marine); transition: transform .6s var(--ease-out), color .4s; }
.acc-secteurs .e { font-size: 15px; line-height: 1.55; color: var(--slate); }
.acc-secteurs li:hover { background: linear-gradient(90deg, rgba(11,124,116,.06), transparent 70%); }
.acc-secteurs li:hover .s { transform: translateX(14px); color: var(--teal); }

/* 5. Pourquoi DB Finance */
.acc-pourquoi { background: var(--pierre); padding: clamp(80px, 9vw, 110px) 0; }
.acc-pourquoi h2 { margin: 16px 0 0; max-width: 20ch; }
.acc-grille { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; border-top: 1px solid var(--filet); }
.acc-grille > div { display: grid; grid-template-columns: 56px 1fr; padding: 38px 56px 44px 0; border-bottom: 1px solid var(--filet); }
.acc-grille > div:nth-child(even) { padding-left: 56px; border-left: 1px solid var(--filet); }
.acc-grille .n { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--teal); padding-top: 6px; }
.acc-grille h3 { font-family: var(--font-sans); font-weight: 400; font-size: 24px; letter-spacing: -.015em; color: var(--marine); margin: 0 0 10px; }
.acc-grille p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate); }

/* 6. Outils */
.acc-outils { padding: clamp(80px, 9vw, 110px) 0; }
.acc-tableau { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--marine); }
.acc-tableau > div { padding: 22px 24px 0 0; }
.acc-tableau .c { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.acc-tableau h4 { font-weight: 400; font-size: 18px; color: var(--marine); margin: 10px 0 14px; }
.acc-tableau p { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.5; color: var(--ink); }

/* 7. Cabinet */
.acc-cabinet { border-top: 1px solid var(--filet); padding: clamp(80px, 9vw, 110px) 0; }
.acc-cabinet .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); }
.acc-cabinet h2 { margin: 16px 0 0; }
.acc-cabinet p { font-size: 18px; line-height: 1.7; color: var(--slate); margin: 30px 0; }
.acc-valeurs { display: flex; margin-bottom: 36px; border-top: 1px solid var(--filet); }
.acc-valeurs span { flex: 1; padding: 16px 0; font-family: var(--font-display); font-size: 20px; color: var(--marine); border-bottom: 1px solid var(--filet); }
.acc-ordre { align-self: end; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 300px; padding: 44px 48px 38px; background: #fff; border: 1px solid var(--filet); color: var(--marine); transition: border-color .5s; }
.acc-logo-oec { position: relative; display: block; width: 240px; max-width: 100%; aspect-ratio: 150 / 21; background: var(--marine);
  -webkit-mask: url("/assets/oec-white.svg") left center / contain no-repeat; mask: url("/assets/oec-white.svg") left center / contain no-repeat; }
.acc-voir { position: relative; font-size: 15px; font-weight: 600; border-top: 1px solid var(--filet); padding-top: 18px; transition: color .4s; }
.acc-voir span { display: inline-block; transition: transform .5s var(--ease-out); }
.acc-ordre-lumiere { position: absolute; z-index: -1; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; filter: blur(60px); background: rgba(69,184,174,.18); transition: transform 1.2s var(--ease-out); }
.acc-ordre:hover { border-color: var(--teal); }
.acc-ordre:hover .acc-voir { color: var(--teal); }
.acc-ordre:hover .acc-voir span { transform: translate(4px, -4px); }
.acc-ordre:hover .acc-ordre-lumiere { transform: translate(-60px, 50px); }

/* Accueil : écrans étroits */
@media (max-width: 900px) {
  .acc-tete, .acc-bas, .acc-cabinet .container { grid-template-columns: 1fr; gap: 26px; }
  .acc-ouverture .hero-actions { justify-self: start; }
  .frise ol { grid-template-columns: 1fr 1fr; row-gap: 52px; }
  .frise-ligne { display: none; }
  .frise li { border-top: 1px solid var(--filet); padding-top: 34px; }
  .jalon { top: -8px; }
  .acc-duo, .acc-grille { grid-template-columns: 1fr; }
  .acc-duo > div, .acc-duo > div + div { padding: 36px 0 40px; border-left: 0; }
  .acc-duo > div + div { border-top: 1px solid var(--filet); }
  .acc-grille > div, .acc-grille > div:nth-child(even) { padding: 28px 0 32px; border-left: 0; }
  .acc-secteurs li { grid-template-columns: 44px 1fr; row-gap: 6px; }
  .acc-secteurs .e { grid-column: 2; }
  .acc-tableau { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .acc-ordre { min-height: 0; gap: 40px; padding: 32px 28px 28px; }
}
@media (max-width: 560px) {
  .frise ol, .acc-tableau { grid-template-columns: 1fr; }
  .acc-duo ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .frise-progres { transform: none !important; }
  .frise li .v { color: var(--marine) !important; }
}

/* ---------- Pages intérieures : titres de blocs et alignements ---------- */
.mblock-head h3 { font-family: var(--font-sans) !important; font-weight: 300 !important; font-size: clamp(28px, 2.7vw, 40px) !important; letter-spacing: -.028em !important; color: var(--marine); line-height: 1.1; }
.subcat h4, .sector h3, .step h4, .profile h3, .feature h3, .presta-body h3, .tool h4, .skill-card h3, .vblock h3, .pillar h3 {
  font-family: var(--font-sans) !important; font-weight: 400 !important; letter-spacing: -.015em; color: var(--marine);
}
.subcat, .sector, .profile, .feature, .tool { padding-left: 0 !important; padding-right: 24px !important; }
.subcat { padding-top: 22px !important; }
.subcat:hover h4, .sector:hover h3, .profile:hover h3, .feature:hover h3 { color: var(--teal); }
.subcat h4, .sector h3 { transition: color .4s; }

/* À propos : les deux cartes superposées deviennent une liste à filets */
.history-visual, .portrait-stack { aspect-ratio: auto !important; height: auto !important; display: block; }
.history-visual .h-card.skill-card, .portrait.skill-card {
  position: relative !important; inset: auto !important; transform: none !important; width: auto !important;
  border: 0 !important; border-top: 1px solid var(--filet) !important; padding: 26px 0 28px !important; margin: 0 !important;
}
.history-visual .h-card.skill-card:last-child, .portrait.skill-card:last-child { border-bottom: 1px solid var(--filet) !important; }
.skill-card .sc-tools { border-top: 0 !important; padding-top: 6px !important; }
.values-band .v-words span em { color: inherit; }
.career-panel { background: transparent !important; border-radius: 0 !important; border-top: 1px solid var(--filet); }

/* ============================================================
   DÉVELOPPEMENT : structure commune à toutes les pages
   ============================================================ */

/* Haut des pages intérieures : titre en pleine largeur, puis un filet
   et deux colonnes (chapeau à gauche, actions à droite), comme l'accueil. */
.page-hero { padding-top: clamp(132px, 13vw, 180px) !important; padding-bottom: clamp(56px, 7vw, 90px) !important; }
.page-hero .inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; max-width: var(--container) !important; }
.page-hero .inner > * { grid-column: 1 / -1; }
.page-hero .inner > .lede, .page-hero .inner > .hero-actions {
  margin-top: clamp(36px, 4.5vw, 60px) !important; padding-top: 30px; border-top: 1px solid var(--filet);
}
.page-hero .inner > .lede { grid-column: 1; padding-right: clamp(24px, 5vw, 80px); max-width: none !important; font-weight: 300; color: var(--ink) !important; }
.page-hero .inner > .hero-actions { grid-column: 2; justify-content: flex-end; align-content: start; align-self: stretch; }
.page-hero .inner > .lede:last-child { grid-column: 1 / -1; }
.page-hero h1 { margin-top: 20px; }

/* En-têtes de section : titre à gauche, chapeau à droite */
.shead { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 6vw, 80px); align-items: end; max-width: none !important; text-align: left !important; }
.shead > .eyebrow, .shead > h2 { grid-column: 1; }
.shead > h2 { margin-top: 16px; max-width: 18ch; }
.shead > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 !important; max-width: 50ch; color: var(--slate); font-size: 17px; line-height: 1.65; }

/* Secteurs : une liste à filets, comme sur l'accueil */
.sectors-grid { display: block !important; border-top: 1px solid var(--filet); }
.sector { display: grid !important; grid-template-columns: 90px 1.2fr 1fr; align-items: baseline; max-width: none !important;
  padding: 24px 0 !important; border: 0 !important; border-bottom: 1px solid var(--filet) !important; transition: background .5s var(--ease-out) !important; }
.sector .s-pip i { display: none; }
.sector h3 { margin: 0 !important; font-size: clamp(22px, 2.3vw, 32px) !important; font-weight: 300 !important; letter-spacing: -.025em; transition: transform .6s var(--ease-out), color .4s !important; }
.sector p { margin: 0 !important; font-size: 15px; color: var(--slate); }
.sector:hover { background: linear-gradient(90deg, rgba(11,124,116,.06), transparent 70%) !important; border-top: 0 !important; }
.sector:hover h3 { transform: translateX(14px); color: var(--teal); }

/* Listes à cocher : un trait fin à la place de la coche */
.checklist li .ck { display: none !important; }
.checklist li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--teal); vertical-align: middle; margin-right: 12px; flex: none; }

/* Méthode : les étapes deviennent une frise qui se remplit au défilement
   (même principe que les phases de l'accueil ; classes ajoutées par le script) */
.steps.frise { display: grid; gap: 0 !important; position: relative; }
.steps.frise .frise-ligne { top: 7px; }
.steps.frise .step { border-top: 0 !important; padding: 44px 32px 0 0 !important; }
.steps.frise .step::before { display: none !important; }
.steps.frise .step .st-num { font-size: 16px !important; width: auto !important; height: auto !important; display: inline !important; }
.steps.frise .step h4 { margin: 8px 0 12px !important; font-size: clamp(20px, 1.9vw, 26px) !important; font-weight: 300 !important; color: var(--slate-soft); transition: color .6s var(--ease-out); }
.steps.frise .step.atteint h4 { color: var(--marine); }
.steps.frise .step.atteint .jalon { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 7px rgba(69,184,174,.16); }

/* Indicateur de lecture : un filet vert d'eau sous l'en-tête */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--teal);
  transform: scaleX(var(--lecture, 0)); transform-origin: left; pointer-events: none; }

/* Transitions entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: dbSortie .35s var(--ease) both; }
::view-transition-new(root) { animation: dbEntree .55s var(--ease-out) both; }
@keyframes dbSortie { to { opacity: 0; filter: blur(6px); } }
@keyframes dbEntree { from { opacity: 0; filter: blur(6px); } }


@media (max-width: 900px) {
  .page-hero .inner { grid-template-columns: 1fr; }
  .page-hero .inner > .lede, .page-hero .inner > .hero-actions { grid-column: 1; }
  .page-hero .inner > .hero-actions { margin-top: 0 !important; border-top: 0; padding-top: 22px; justify-content: flex-start; }
  .shead { grid-template-columns: 1fr; }
  .shead > p { grid-column: 1; grid-row: auto; margin-top: 22px !important; }
  .sector { grid-template-columns: 44px 1fr; row-gap: 6px; }
  .sector p { grid-column: 2; }
  .steps.frise { grid-template-columns: 1fr 1fr !important; row-gap: 52px !important; }
  .steps.frise .frise-ligne { display: none; }
  .steps.frise .step { border-top: 1px solid var(--filet) !important; padding-top: 34px !important; }
  .steps.frise .jalon { top: -8px; }
}
@media (max-width: 560px) { .steps.frise { grid-template-columns: 1fr !important; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .steps.frise .step h4 { color: var(--marine); }
}

/* ============================================================
   EN-TÊTE : marque et navigation à gauche, liens secondaires à droite
   (plus de gros bouton : « Nous rejoindre » et « Contact » en texte)
   ============================================================ */
.nav { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; }
.nav-links { justify-self: start; margin: 0 0 0 clamp(36px, 5vw, 88px) !important; gap: clamp(20px, 2.4vw, 38px) !important; }
.nav-links a, .nav-sec { font-size: 15px; font-weight: 400; color: var(--ink); padding: 6px 0 !important; background: none !important; border-radius: 0 !important; position: relative; }
.nav-links a::after, .nav-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.nav-links a:hover::after, .nav-sec:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--marine); }
.nav-cta { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nav-links a, .nav-sec { white-space: nowrap; }
@media (max-width: 1220px) { .nav-links { margin-left: 28px !important; gap: 20px !important; } .nav-cta { gap: 20px; } .nav-links a, .nav-sec { font-size: 14.5px; } }
.nav-sec:last-of-type { color: var(--marine); font-weight: 500; }
@media (max-width: 1020px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-sec { display: none; }
  .nav-cta { justify-self: end; }
}
/* Menu mobile : liens sobres, liens secondaires séparés par un filet */
.mobile-menu a { font-family: var(--font-sans) !important; font-weight: 300 !important; letter-spacing: -.02em; }
.mobile-menu .mm-sep { display: block; width: 48px; height: 1px; background: var(--filet); margin: 10px 0; }
.mobile-menu .mm-sec { font-size: 18px !important; font-weight: 400 !important; color: var(--slate) !important; }

/* ============================================================
   FENÊTRE DE CONTACT : sobre et haut de gamme
   ============================================================ */
.modal-overlay { background: rgba(10, 20, 51, .32) !important; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }
.modal { background: var(--ivoire) !important; border: 1px solid var(--filet); box-shadow: 0 40px 120px -40px rgba(10,20,51,.45) !important; padding: clamp(32px, 4.5vw, 60px) !important; }
.modal h3 { font-family: var(--font-sans) !important; font-weight: 300 !important; font-size: clamp(32px, 4vw, 48px) !important; letter-spacing: -.035em; color: var(--marine); margin: 14px 0 8px !important; }
.modal .modal-sub { color: var(--slate) !important; margin-bottom: 28px !important; }
.modal-close { border: 1px solid var(--filet) !important; background: transparent !important; }
.modal-close:hover { border-color: var(--marine) !important; transform: rotate(90deg); }

/* Onglets : texte souligné par un filet qui glisse (plus de pastille pleine) */
.contact-tabs { display: flex !important; gap: 30px !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--filet) !important; background: transparent !important; margin-bottom: 28px !important; }
.contact-tabs[hidden] { display: none !important; }
.contact-tabs [role=tab] { padding: 0 0 14px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--slate-soft) !important; background: transparent !important; flex: none !important; }
.contact-tabs [role=tab][aria-selected="true"] { color: var(--marine) !important; background: transparent !important; }
.contact-tabs [role=tab]:hover { color: var(--marine) !important; }
.contact-tabs-pill { top: auto !important; bottom: -1px !important; left: 0 !important; height: 1px !important; background: var(--marine) !important; }
.contact-tabs:not(.a-pastille) [role=tab][aria-selected="true"] { box-shadow: inset 0 -1px 0 var(--marine); }

/* Champs : un simple filet sous la saisie */
.field label { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--slate) !important; }
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea, .field select {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--filet) !important; border-radius: 0 !important;
  padding: 10px 0 12px !important; font-size: 16px !important; color: var(--ink) !important; box-shadow: none !important;
  transition: border-color .4s var(--ease-out);
}
.field select { padding-right: 28px !important; background-position: right 2px center !important; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--marine) !important; background: transparent !important; box-shadow: none !important; }
.field textarea { min-height: 96px !important; }
.form-grid { column-gap: 32px !important; row-gap: 22px !important; }
.modal .form-actions { border-top: 0; }
.form-note { font-size: 13px !important; }

/* Adresse email et cartes de rendez-vous : filets au lieu de cadres */
.contact-alt-mail { border: 0 !important; border-top: 1px solid var(--filet) !important; border-bottom: 1px solid var(--filet) !important; padding: 24px 0 !important; }
.contact-alt-mail .ca-value { font-family: var(--font-sans) !important; font-weight: 300 !important; letter-spacing: -.02em; }
.booking-cards { gap: 0 !important; border-top: 1px solid var(--filet); }
.booking-card { border: 0 !important; border-bottom: 1px solid var(--filet) !important; padding: 24px 24px 24px 0 !important; }
.booking-card + .booking-card { border-left: 1px solid var(--filet) !important; padding-left: 24px !important; }
.booking-card:hover { transform: none !important; }
.booking-card:hover .bc-title { color: var(--teal); }
.booking-card .bc-title { font-family: var(--font-sans) !important; font-weight: 300 !important; font-size: 24px !important; letter-spacing: -.02em; transition: color .4s; }
@media (max-width: 600px) { .booking-card + .booking-card { border-left: 0 !important; padding-left: 0 !important; } }

/* Accueil : fiscalité du dirigeant (pôle mis en avant) */
.acc-fiscal { padding: clamp(90px, 10vw, 130px) 0; border-top: 1px solid var(--filet); position: relative; }
.acc-fiscal .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 7vw, 110px); align-items: start; }
.acc-fiscal-tete { position: sticky; top: 130px; }
.acc-fiscal-tete h2 { margin: 16px 0 24px; font-size: clamp(36px, 4.6vw, 64px); max-width: 14ch; }
.acc-fiscal-tete p { font-size: 17px; line-height: 1.65; color: var(--slate); margin: 0 0 28px; max-width: 46ch; }
.acc-fiscal-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.acc-fiscal-liste a { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--filet); color: var(--marine); transition: background .5s var(--ease-out); }
.acc-fiscal-liste .n { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--teal); }
.acc-fiscal-liste .s { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.025em; transition: transform .6s var(--ease-out), color .4s; }
.acc-fiscal-liste .arrow { color: var(--slate-soft); transition: transform .5s var(--ease-out), color .4s; }
.acc-fiscal-liste a:hover { background: linear-gradient(90deg, rgba(11,124,116,.06), transparent 70%); }
.acc-fiscal-liste a:hover .s { transform: translateX(14px); color: var(--teal); }
.acc-fiscal-liste a:hover .arrow { transform: translateX(4px); color: var(--teal); }
@media (max-width: 900px) {
  .acc-fiscal .container { grid-template-columns: 1fr; }
  .acc-fiscal-tete { position: static; }
  .acc-fiscal-liste a { grid-template-columns: 44px 1fr auto; }
}

/* Pied de page : cinq colonnes (marque, expertises, secteurs, cabinet, contact) */
@media (min-width: 881px) { .footer-top { grid-template-columns: 1.3fr repeat(4, 1fr) !important; } }

/* Listes de secteurs cliquables (accueil, page Expertise) */
.acc-secteurs a { display: grid; grid-template-columns: 90px 1.3fr 1fr auto; align-items: baseline; gap: 0 16px; color: inherit; }
.acc-secteurs li:has(a) { display: block; padding: 0; }
.acc-secteurs li a { padding: 26px 0; }
.acc-secteurs .arrow { color: var(--slate-soft); transition: transform .5s var(--ease-out), color .4s; }
.acc-secteurs li:hover .arrow { transform: translateX(4px); color: var(--teal); }
@media (max-width: 900px) { .acc-secteurs a { grid-template-columns: 44px 1fr auto; } .acc-secteurs a .e { grid-column: 2; grid-row: 2; } }

/* ============================================================
   ALIGNEMENTS
   ============================================================ */
/* L'en-tête s'aligne sur la colonne de contenu (et non sur les bords de
   l'écran) : le logo tombe exactement au-dessus des titres. */
.nav { padding-inline: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)) !important; }
.nav-links { grid-column: 2; }
.nav-cta { grid-column: 3; justify-self: end; }

/* Pied de page sur mobile : la marque en tête, puis les liens sur deux
   colonnes (au lieu d'une longue colonne unique). */
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr 1fr !important; column-gap: 24px !important; row-gap: 36px !important; }
  .footer-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-bottom: 26px; border-bottom: 1px solid var(--filet); }
  .footer-brand .logo { margin: 0 !important; width: 32px !important; height: 32px !important; }
  .footer-brand .brand-name { margin: 0 !important; }
  .footer-brand .ordre-badge { margin: 0 0 0 auto !important; }
  .footer-col h5 { margin-bottom: 14px !important; }
  .footer-col ul { gap: 10px !important; }
  .footer-col li, .footer-col a { font-size: 14.5px; }
  .footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .footer-legal { gap: 20px !important; }
}
@media (max-width: 380px) {
  .footer-brand .ordre-badge { margin-left: 0 !important; }
}

/* ============================================================
   CANDIDATURE (page À propos)
   ============================================================ */
.career-panel { grid-template-columns: .8fr 1.2fr !important; align-items: start !important; border: 0 !important; border-top: 1px solid var(--filet) !important; padding: clamp(40px, 5vw, 64px) 0 0 !important; }
.career-panel > div:first-child { position: sticky; top: 120px; }
.candidature-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.candidature-form .form-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.candidature-form .form-note { font-size: 13px; color: var(--slate-soft); margin: 0; }
.candidature-form .form-note a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }
.candidature-form .form-verif:not(:empty) { margin-top: 18px; }
.candidature-form [type=submit][disabled] { opacity: .6; cursor: progress; }
/* Pièce jointe : une zone sobre, le champ natif reste accessible au clavier */
.cv-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.cv-zone { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--slate-soft); cursor: pointer; transition: border-color .4s var(--ease-out); }
.cv-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cv-zone .cv-nom { font-size: 16px; color: var(--marine); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-zone .cv-nom::before { content: "+ "; color: var(--teal); }
.cv-zone .cv-aide { font-size: 13px; color: var(--slate-soft); flex: none; }
.cv-zone:hover, .cv-zone:focus-within { border-bottom-color: var(--marine); border-bottom-style: solid; }
.candidature-form.a-cv .cv-nom::before { content: "✓ "; }
/* Une fois envoyée, la confirmation remplace les champs */
.candidature-form.is-sent .form-grid, .candidature-form.is-sent .form-actions, .candidature-form.is-sent .form-verif { display: none; }
.candidature-form.is-sent .form-status { font-size: 18px; color: var(--marine); margin-top: 0; padding-top: 24px; border-top: 1px solid var(--filet); }
@media (max-width: 760px) {
  .career-panel { grid-template-columns: 1fr !important; }
  .career-panel > div:first-child { position: static; }
  .candidature-form .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PARCOURS : liens directs vers chaque page
   ============================================================ */
.acc-duo h3 a { color: inherit; transition: color .4s; }
.acc-duo li a { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); transition: color .3s, padding .4s var(--ease-out); }
.acc-duo li a::after { content: "→"; color: var(--slate-soft); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease-out), color .3s; }
.acc-duo li a:hover { color: var(--teal); }
.acc-duo li a:hover::after { opacity: 1; transform: none; color: var(--teal); }
/* Phases de l'accueil : le nom de chaque phase mène à la page correspondante */
.frise a.v { display: flex; width: fit-content; align-items: baseline; gap: 10px; }
.frise a.v .arrow { font-size: .55em; color: var(--slate-soft); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease-out), color .3s; }
.frise a.v:hover { color: var(--teal) !important; }
.frise a.v:hover .arrow { opacity: 1; transform: none; color: var(--teal); }
/* Page Fiscalité : le titre de chaque domaine est cliquable */
.mblock-head h3 a { color: inherit; transition: color .4s; }
.mblock-head h3 a:hover { color: var(--teal); }
.mblock-body > .link-arrow { display: inline-block; margin-top: 22px; color: var(--marine); font-weight: 600; font-size: 15px; }
/* Sous-pages : « Voir aussi » (pages de la même rubrique) */
.voir-aussi .acc-secteurs .s { font-size: clamp(20px, 2vw, 28px); }
.voir-parent { display: inline-block; margin-top: 30px; color: var(--marine); font-weight: 600; font-size: 15px; }

/* Bloc de missions à deux entrées : deux colonnes plutôt qu'une case vide */
.subcats:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .subcats:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } }