/* ============================================================
   MOHNA — v5 « Éditorial » (23/08/2026)
   Surcharge de style.css + modern.css. Chargée en dernier.
   Même palette, même logo, mêmes hooks JS : uniquement du style.
   Toutes les couleurs passent par les tokens (thème sombre OK).
   ============================================================ */

@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/playfair-display-latin-italic.woff2') format('woff2'); }

:root {
  --v5-ink-3: #7a766d;
  --v5-line-2: #d4d0c4;
  --v5-on-dark-2: #b7b4ab;
  --v5-shadow-warm: 0 12px 32px rgba(222,100,32,.16);
  --v5-t-fast: 150ms;
  --v5-t-base: 250ms;
  --v5-t-slow: 400ms;
  --v5-ease: cubic-bezier(.2, 0, 0, 1);
  --v5-max: 1180px;
}
html[data-theme=dark] { --v5-ink-3: #9a968b; --v5-line-2: #3f3b34; }

/* ---------- Base ---------- */
body { font-size: 1rem; line-height: 1.65; }
.container { width: min(var(--v5-max), 92%); }
h1, h2, h3, h4 { letter-spacing: -.02em; text-wrap: balance; }
h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; color: var(--text-soft); max-width: 60ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Eyebrow : tiret + Inter espacé */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; flex: 0 0 auto; }
.eyebrow.is-pole::before, .card .card-pole::before, .card-pole::before { display: none !important; }

/* Sections : rythme plus ample, têtes alignées à gauche */
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 680px; margin: 0 0 clamp(32px, 4vw, 56px); text-align: left; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; }
.section-head .lead, .section-head p { margin-top: 14px; }
.section-head.center, .section-head[style*="text-align:center"] { margin-inline: auto; text-align: center; }

/* ---------- Boutons ---------- */
.btn { font-family: var(--font-body); font-weight: 600; font-size: .93rem; letter-spacing: 0; padding: 13px 24px; border-radius: 999px; border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; transition: transform var(--v5-t-fast) var(--v5-ease), background-color var(--v5-t-fast) var(--v5-ease), box-shadow var(--v5-t-fast) var(--v5-ease), border-color var(--v5-t-fast) var(--v5-ease), color var(--v5-t-fast) var(--v5-ease); }
.btn-lg { padding: 17px 30px; font-size: 1rem; }
.btn-primary { background: var(--accent-hover) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(222,100,32,.25) !important; }
.btn-primary:hover { background: var(--secondary) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(222,100,32,.32) !important; }
.btn-light { background: transparent !important; color: var(--text) !important; border-color: var(--v5-line-2) !important; }
.btn-light:hover { border-color: var(--text) !important; background: var(--surface) !important; }
.btn-outline { border-color: var(--v5-line-2); }
.btn-outline:hover { border-color: var(--text); }
.btn-dark { background: var(--pill); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); }
.btn-arrow .arrow { transition: transform var(--v5-t-fast) var(--v5-ease); }
.btn-arrow:hover .arrow { transform: translateX(3px); }
.card-link { font-weight: 600; color: var(--secondary); text-decoration: none; font-size: .93rem; }
.card-link:hover { text-decoration: underline; text-underline-offset: 3px; transform: none; }

/* ---------- Cartes ---------- */
.card { padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--v5-t-fast) var(--v5-ease), box-shadow var(--v5-t-fast) var(--v5-ease), border-color var(--v5-t-fast) var(--v5-ease); }
.card:hover { transform: translateY(-2px); box-shadow: var(--v5-shadow-warm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-soft); font-size: .93rem; }
.card-icon { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 18px; font-size: 1.1rem; }
.card-icon .icn, .card-icon svg { width: 20px; height: 20px; }
.price-note { font-size: .85rem; color: var(--text-soft); }
.grid { gap: clamp(16px, 2vw, 28px); }

/* ---------- Header ---------- */
.site-header { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.nav-wrap { min-height: 72px; }
.logo-mark { width: 40px; height: 40px; border-radius: 11px; }
.main-nav ul { gap: 4px; }
.main-nav > ul > li > a:not(.btn) { position: relative; font-weight: 500; font-size: .88rem; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.main-nav > ul > li > a:not(.btn)::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--v5-t-base) var(--v5-ease); }
.main-nav > ul > li > a:not(.btn):hover::after, .main-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav .btn { padding: 9px 16px; font-size: .82rem; min-height: 0; }
.nav-toggle { border-radius: 10px; }

/* ---------- Hero (accueil) ---------- */
.hero { background: var(--bg); border-bottom: 0; padding: clamp(56px, 7vw, 112px) 0 clamp(48px, 6vw, 96px); }
.hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(closest-side, rgba(222,100,32,.14), rgba(222,100,32,0)); pointer-events: none; }
.hero .container { grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em; }
.hero h1 .rot-word, .hero h1 .rot-word .w { font-style: italic; color: var(--accent); font-weight: 600; }
.hero .lead { margin: 22px 0 6px; }
.v3-steps { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.v3-steps li { border-radius: var(--radius-sm); padding: 14px 16px 14px 16px; transition: transform var(--v5-t-fast) var(--v5-ease), box-shadow var(--v5-t-fast) var(--v5-ease); }
.v3-steps li:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.v3-steps b { font-family: var(--font-body); font-weight: 600; font-size: .95rem; }
.v3-steps span { font-size: .82rem; color: var(--text-soft); }
.hero-ctas .btn-lg { padding: 17px 30px; }
.v3-guarantee { font-size: .82rem; color: var(--text-soft); }
.hero-card, .hero-card-glass { background: var(--pill) !important; color: var(--text-onDark); border: 1px solid transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: var(--shadow-md); padding: 26px; }
.hero-card h2 { color: #fff; font-size: 1.15rem; margin-bottom: 12px; }
.hero-card ol { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 0; }
.hero-card li { position: relative; padding-left: 30px; font-size: .92rem; color: var(--v5-on-dark-2); }
.hero-card li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(222,100,32,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de6420' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.hero-card li strong { color: #fff; font-weight: 600; }
.hero-sat { font-family: var(--font-body); }
.sat-b { display: none; }

/* Marquee */
.marquee { padding: 14px 0; }

/* Offre de lancement */
.pack-band { border-radius: var(--radius) !important; }

/* ---------- Bento « Trois pôles » (accueil) ---------- */
#expertises .grid-3 { grid-template-columns: repeat(12, 1fr); }
#expertises .grid-3 > .card { position: relative; overflow: hidden; display: flex; flex-direction: column; }
#expertises .grid-3 > .card:nth-child(1) { grid-column: span 8; min-height: 300px; background: var(--pill) !important; color: var(--text-onDark); border-color: transparent; }
#expertises .grid-3 > .card:nth-child(2) { grid-column: span 4; min-height: 300px; }
#expertises .grid-3 > .card:nth-child(3) { grid-column: span 12; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 40px; }
#expertises .grid-3 > .card:nth-child(3) h3 { flex-basis: 100%; }
#expertises .grid-3 > .card:nth-child(3) > p:not(.card-pole) { flex: 1 1 40ch; }
#expertises .grid-3 > .card:nth-child(1) h3, #expertises .grid-3 > .card:nth-child(1) p { color: #fff; }
#expertises .grid-3 > .card:nth-child(1) > p:not(.card-pole):not(.price-note) { color: var(--v5-on-dark-2); }
#expertises .grid-3 > .card h3 { font-size: 1.9rem; font-weight: 700; margin: 6px 0 10px; }
#expertises .card .card-pole { background: transparent !important; border: 0 !important; padding: 0 !important; font-family: var(--font-head) !important; font-style: italic; font-weight: 400; font-size: .9rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--accent) !important; }
#expertises .card .card-pole::after { content: attr(data-n); position: absolute; right: -10px; bottom: -34px; font: 700 9rem/1 var(--font-head); font-style: normal; color: color-mix(in srgb, currentColor 0%, var(--text) 4%); letter-spacing: 0; pointer-events: none; }
#expertises .grid-3 > .card:nth-child(1) .card-pole::after { color: rgba(255,255,255,.05); }
#expertises .card .price-note { margin-top: auto; padding-top: 22px; font-weight: 600; font-size: .88rem; position: relative; z-index: 1; }
#expertises .grid-3 > .card:nth-child(1) .price-note { color: var(--accent); }
#expertises .card .card-link { position: relative; z-index: 1; }
#expertises .grid-3 > .card:nth-child(1) .card-link { color: #fff; }

/* ---------- Process « Comment nous travaillons » ---------- */
.steps { gap: 24px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 1px; background: var(--v5-line-2); }
.step { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 52px 0 0 !important; position: relative; }
.step-num { position: absolute; top: 0; left: 0; width: 37px; height: 37px; border-radius: 50%; background: var(--surface); border: 1px solid var(--v5-line-2); display: grid; place-items: center; font-size: .78rem; font-weight: 600; font-style: italic; color: var(--secondary); letter-spacing: 0; margin: 0; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: .93rem; color: var(--text-soft); }

/* Engagements : icône à gauche, texte à gauche */
.engagements { text-align: left; gap: 24px; }
.engagement { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 0 !important; align-items: start; }
.engagement .card-icon { width: 40px; height: 40px; margin: 0; grid-row: 1 / span 3; }
.engagement h3, .engagement h4, .engagement p { grid-column: 2; }
.engagement h3, .engagement h4 { font-size: 1rem; margin-bottom: 4px; }
.engagement p { font-size: .875rem; color: var(--text-soft); }

/* Zones outre-mer */
.zone { padding: 22px 24px; display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start; background: var(--bg); box-shadow: none; }
.zone .e-ico { width: 42px; height: 42px; padding: 10px; border-radius: 12px; border: 1px solid var(--v5-line-2); }
.zone h3 { grid-column: 2; margin-bottom: 4px; }
.zone p { grid-column: 2; font-size: .9rem; color: var(--text-soft); }

/* ---------- FAQ ---------- */
.faq-list { max-width: none; gap: 0; border-top: 1px solid var(--border); }
details.faq-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
details.faq-item summary { padding: 20px 4px !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 1.02rem !important; line-height: 1.4; color: var(--text); }
details.faq-item summary::after { font-family: var(--font-head); font-size: 1.4rem; color: var(--accent); }
details.faq-item .faq-body { padding: 0 4px 22px !important; color: var(--text-soft); font-size: .95rem; max-width: 70ch; }
details.faq-item[open] .faq-body { animation: v5AccIn var(--v5-t-base) var(--v5-ease) both; }
@keyframes v5AccIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Bande CTA ---------- */
.cta-band { text-align: left; border-radius: var(--radius); padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px) !important; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(222,100,32,.35), transparent); pointer-events: none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 12px; color: #fff; }
.cta-band p { color: var(--v5-on-dark-2); max-width: 56ch; margin: 0; }
.cta-band .btn, .cta-band .hero-ctas { grid-column: 2; grid-row: 1 / span 3; }
.cta-band .btn-light { color: #fff !important; border-color: rgba(255,255,255,.3) !important; background: transparent !important; }

/* ---------- Newsletter ---------- */
.newsletter-box { border-radius: var(--radius); }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 28px; color: var(--v5-on-dark-2); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px !important; padding: 0 0 48px !important; border-bottom: 1px solid rgba(255,255,255,.1); }
.site-footer h4 { font-family: var(--font-body); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul { display: grid; gap: 9px; }
.site-footer ul a { font-size: .9rem; color: var(--v5-on-dark-2); transition: color var(--v5-t-fast) var(--v5-ease); }
.site-footer ul a:hover { color: #fff; }
.site-footer .footer-grid > div > p { font-size: .9rem; max-width: 36ch; margin-top: 18px; }
.footer-bottom { flex-wrap: wrap; padding: 22px 0 0 !important; border-top: 0 !important; font-size: .8rem; justify-content: space-between; text-align: left; }
.footer-bottom::before { content: "Mohna."; flex-basis: 100%; font: 700 clamp(3rem, 9vw, 7rem)/1 var(--font-head); color: rgba(255,255,255,.05); letter-spacing: -.03em; margin: 28px 0 8px; user-select: none; }

/* ---------- Pages intérieures ---------- */
.page-header { text-align: left; background: var(--bg); border-bottom: 0; padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.page-header::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; border-radius: 50%; background: radial-gradient(closest-side, rgba(222,100,32,.12), rgba(222,100,32,0)); pointer-events: none; }
.page-header .container { position: relative; }
.page-header h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.06; max-width: 18ch; margin: 0 0 18px; }
.page-header .lead, .page-header p { max-width: 62ch; margin-inline: 0; }
.page-header .eyebrow { margin-bottom: 14px; }
.hl { font-style: italic; color: var(--accent); }
.breadcrumb { background: transparent; border-bottom: 0; font-size: .8rem; }
.breadcrumb .container { padding-top: 14px; }

/* Tableaux (tarifs, comparateur) */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table-wrap table, table.compare, .cpt-table, .fin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .93rem; box-shadow: none !important; border-radius: 0 !important; }
.table-wrap th, table.compare th, .cpt-table th { background: color-mix(in srgb, var(--surface) 70%, var(--bg)) !important; color: var(--v5-ink-3) !important; font-family: var(--font-body) !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 14px 20px !important; border-bottom: 1px solid var(--border); }
.table-wrap td, table.compare td, .cpt-table td { padding: 16px 20px !important; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-soft); }
.table-wrap tr:last-child td, table.compare tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover, table.compare tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.table-wrap td:first-child, table.compare td:first-child { color: var(--text); font-weight: 600; }
.table-wrap .price, table.compare .price { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

/* Formulaires */
.form-field label { font-size: .8rem; font-weight: 600; color: var(--text); }
.form-field input, .form-field select, .form-field textarea, .nl-row input, .login-card input { font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--v5-line-2); border-radius: var(--radius-sm); padding: 13px 14px; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--v5-line-2)); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .nl-row input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(222,100,32,.15); }
.consent, .chk { font-size: .85rem; color: var(--text-soft); }

/* Prose (blog, légal) */
.prose { font-size: 1.05rem; line-height: 1.75; }
.prose h2 { font-size: 1.7rem; margin: 40px 0 14px; }
.prose h3 { margin: 28px 0 10px; }
.prose p, .prose ul { margin-block: 0 18px; color: var(--text-soft); }
.prose blockquote { margin: 28px 0; padding: 20px 26px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--text); }
.legal-page .prose h2 { color: var(--text); border-left: 0; padding-left: 0; font-size: 1.35rem; margin-top: 36px; }

/* Tarifs : cartes prestation */
.presta-grid { gap: clamp(16px, 2vw, 28px); }
.cpt-plan.featured, .tp-price-card { border-color: var(--accent); box-shadow: var(--v5-shadow-warm); }

/* Reveal : stagger doux */
.reveal { transition-timing-function: var(--v5-ease) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  #expertises .grid-3 > .card:nth-child(1), #expertises .grid-3 > .card:nth-child(2), #expertises .grid-3 > .card:nth-child(3) { grid-column: span 12; min-height: 0; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px !important; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn, .cta-band .hero-ctas { grid-column: 1; grid-row: auto; }
  .hero .container { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .nav-wrap { min-height: 62px; }
  .logo-mark { width: 34px; height: 34px; }
  .v3-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .engagements { grid-template-columns: 1fr; }
  .page-header h1 { max-width: none; }
  .table-wrap th, .table-wrap td, table.compare th, table.compare td { padding: 12px 14px !important; }
  h3 { font-size: 1.12rem; }
  .btn-lg { padding: 15px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .btn:hover, .v3-steps li:hover { transform: none; }
}

/* ============================================================
   ESPACE CLIENT (espace-client.html) — styles inline de la page
   chargés après v5 : sélecteurs préfixés #login-view / #dashboard.
   ============================================================ */
#login-view .login-layout { gap: clamp(20px, 3vw, 36px); max-width: 1060px; }
#login-view .login-card { padding: 28px; border-radius: var(--radius); }
#login-view .login-card h2 { font-size: 1.4rem; margin-bottom: 6px; }
#login-view .member-side { background: var(--pill); border-radius: var(--radius); padding: 28px; }
#login-view .member-side h2 { font-size: 1.4rem; }
#login-view .member-side li { color: var(--v5-on-dark-2); }
#login-view .member-side .btn-primary { margin-top: auto; }

#dashboard .dash-head { margin-bottom: 24px; }
#dashboard .dash-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; }
#dashboard .dash-head .eyebrow { margin-bottom: 8px; }
#dashboard .dossier-switch select { font-family: var(--font-body); font-size: .85rem; padding: 8px 34px 8px 12px; border: 1px solid var(--v5-line-2); border-radius: 999px; background-color: var(--surface); color: var(--text); }
#dashboard .ec-kpis { gap: clamp(10px, 1.4vw, 20px); margin: 20px 0 22px; }
#dashboard .ec-kpi { padding: 18px 20px; border-radius: var(--radius); }
#dashboard .ec-kpi b { font-size: 2rem; line-height: 1; color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; }
#dashboard .ec-kpi b::first-letter { color: inherit; }
#dashboard .ec-kpi span, #dashboard .ec-kpi small { font-size: .8rem; color: var(--text-soft); }
#dashboard .ec-tabs { gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 22px; }
#dashboard .ec-tabs::after { display: none; }
#dashboard .ec-tab { font-family: var(--font-body); font-weight: 500; font-size: .86rem; padding: 9px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-soft); transition: background-color var(--v5-t-fast) var(--v5-ease), color var(--v5-t-fast) var(--v5-ease); }
#dashboard .ec-tab:hover { background: var(--bg); color: var(--text); }
#dashboard .ec-tab.active { background: var(--accent-soft); color: var(--secondary); border-color: transparent; font-weight: 600; }
html[data-theme=dark] #dashboard .ec-tab.active { color: #f0a878; }
#dashboard .ec-tab .ec-badge, #dashboard .ec-tab .badge { background: var(--accent); color: #fff; }
#dashboard .ec-tab-premium { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
#dashboard .panel { padding: 26px; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
#dashboard .panel h3 { font-size: 1.12rem; margin-bottom: 16px; gap: 10px; }
#dashboard .panel h3 svg, #dashboard .panel h3 .e-ico { width: 18px; height: 18px; color: var(--secondary); }
#dashboard .panel p, #dashboard .panel li { font-size: .92rem; }
#dashboard .action-list li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface); transition: transform var(--v5-t-fast) var(--v5-ease), box-shadow var(--v5-t-fast) var(--v5-ease), border-color var(--v5-t-fast) var(--v5-ease); }
#dashboard .action-list li:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
#dashboard .doc-list li { border-radius: var(--radius-sm); padding: 12px 14px; transition: background-color var(--v5-t-fast) var(--v5-ease), border-color var(--v5-t-fast) var(--v5-ease); }
#dashboard .doc-list li:hover { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
#dashboard .deadline-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); }
#dashboard .deadline-list li:last-child { border-bottom: 0; }
#dashboard .deadline-list b, #dashboard .deadline-list strong { font-family: var(--font-head); color: var(--secondary); }
#dashboard .fin-table th { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--v5-ink-3); padding: 10px 10px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
#dashboard .fin-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#dashboard .fin-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
#dashboard .msg { border-radius: 16px; padding: 12px 16px; font-size: .9rem; }
#dashboard .msg.me, #dashboard .msg.client { background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 4px; }
#dashboard .msg.advisor, #dashboard .msg.them { background: var(--bg); border-bottom-left-radius: 4px; }
#dashboard .msg small { font-size: .7rem; color: var(--v5-ink-3); }
#dashboard .msg-form input, #dashboard .msg-form textarea { border: 1px solid var(--v5-line-2); border-radius: 999px; padding: 11px 16px; font-family: var(--font-body); background: var(--surface); color: var(--text); }
#dashboard .msg-form input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(222,100,32,.15); }
#dashboard .advisor-avatar { width: 52px; height: 52px; font-weight: 700; }
#dashboard .doc-notice { border-radius: var(--radius-sm); border-left-width: 3px; }
#dashboard .badge-inclus { font-family: var(--font-body); font-size: .72rem; letter-spacing: .06em; border-radius: 999px; background: var(--accent-hover); }
#dashboard .timeline li::before { border-color: var(--v5-line-2); }
#dashboard .btn-outline { border-color: var(--v5-line-2); }
@media (max-width: 960px) {
  #dashboard .ec-kpis { grid-template-columns: repeat(2, 1fr); }
  #dashboard .ec-tabs { border-radius: 14px; }
}
@media (max-width: 680px) {
  #dashboard .ec-kpi b { font-size: 1.6rem; }
  #dashboard .panel { padding: 18px; }
}

/* ============================================================
   BACK-OFFICE (admin.html) — complète admin.css
   ============================================================ */
.admin-body { font-family: var(--font-body); }
.admin-login-card { padding: 34px; border-radius: var(--radius); }
.admin-login-card h1 { font-size: 1.7rem; letter-spacing: -.02em; }
.admin-tag { font-family: var(--font-body); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.admin-field span { font-size: .8rem; }
.admin-field input { border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface); border: 1px solid var(--v5-line-2); }
.admin-field input:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(222,100,32,.15); }
.admin-secnote { border-radius: var(--radius-sm); font-size: .82rem; }
.admin-side { background: var(--pill); }
.admin-navitem { font-family: var(--font-body); font-weight: 500; font-size: .84rem; padding: 8px 14px; border-radius: 999px; transition: background-color var(--v5-t-fast) var(--v5-ease), color var(--v5-t-fast) var(--v5-ease); }
.admin-navitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-navitem.active { background: var(--accent-hover); color: #fff; }
.admin-top { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); }
.admin-top h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.admin-search, .admin-top-actions input[type=search] { border-radius: 999px; border: 1px solid var(--v5-line-2); padding: 9px 14px; font-family: var(--font-body); background: var(--surface); color: var(--text); }
.admin-period, .admin-badge { border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .06em; }
.admin-content { padding: 26px 28px; }
.admin-card, .adm-panel { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); }
.admin-card h3, .adm-panel h3, .adm-panel-head h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.kpi { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); padding: 18px 20px; }
.kpi-label { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v5-ink-3); }
.kpi-value { font-family: var(--font-head); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.05; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .8rem; color: var(--text-soft); }
.kpi-sub.up { color: var(--success); }
.adm-table { font-size: .9rem; }
.adm-table th { font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--v5-ink-3); background: color-mix(in srgb, var(--surface) 70%, var(--bg)); padding: 12px 14px; border-bottom: 1px solid var(--border); }
.adm-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.adm-table .num, .admin-body .num { font-family: var(--font-head); font-weight: 700; color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-body .tag { border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 600; background: var(--accent-soft); color: var(--secondary); border: 0; }
.admin-body .chip-filter { border-radius: 999px; font-family: var(--font-body); font-size: .82rem; }
.admin-body .btn { min-height: 40px; padding: 9px 18px; font-size: .86rem; }
.admin-body .icon-btn { border-radius: 10px; }
.admin-body .f-field input, .admin-body .f-field select, .admin-body .f-field textarea { border-radius: var(--radius-sm); border: 1px solid var(--v5-line-2); padding: 11px 13px; font-family: var(--font-body); background: var(--surface); color: var(--text); }
.admin-body .f-field input:focus, .admin-body .f-field select:focus, .admin-body .f-field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(222,100,32,.15); }
.admin-body .doc-item { border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--v5-t-fast) var(--v5-ease), background-color var(--v5-t-fast) var(--v5-ease); }
.admin-body .doc-item:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.admin-modal-box { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.admin-modal-head h3 { font-size: 1.15rem; }
@media (max-width: 680px) {
  #dashboard .dash-head { align-items: stretch; }
  #dashboard .dossier-switch { flex-wrap: wrap; max-width: 100%; }
  #dashboard .dossier-switch select { width: 100%; min-width: 0; max-width: 100%; white-space: normal; text-overflow: ellipsis; }
  #dashboard .dash-head .btn { width: auto; align-self: flex-start; }
}

/* ============================================================
   DENSITÉ (23/08/2026) — moins de scroll, même hiérarchie.
   Règles placées après les précédentes : elles les remplacent.
   ============================================================ */
body { line-height: 1.55; }
.site :where(p), .card p, .step p, .zone p, .engagement p { line-height: 1.5; }
.lead { font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.5; }
.site h1, h1 { line-height: 1.02; }
.section { padding: clamp(34px, 4.6vw, 64px) 0; }
.section-head { margin-bottom: clamp(18px, 2.4vw, 30px); max-width: 760px; }
.section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
.section-head .lead, .section-head p { margin-top: 8px; }
.eyebrow { margin-bottom: 10px; }
.grid { gap: clamp(12px, 1.4vw, 18px); }
.card { padding: 20px 22px; }
.card h3 { margin-bottom: 6px; font-size: 1.12rem; }
.card p { font-size: .9rem; }
.card-icon { width: 38px; height: 38px; margin-bottom: 12px; }
.card-icon .icn, .card-icon svg { width: 18px; height: 18px; }
.btn { padding: 11px 20px; min-height: 42px; }
.btn-lg { padding: 13px 24px; font-size: .97rem; }

/* Hero accueil : tient dans le premier écran desktop */
.hero { padding: clamp(30px, 4vw, 56px) 0 clamp(24px, 3vw, 44px); }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); }
.hero .lead { margin: 14px 0 4px; max-width: 58ch; }
.v3-steps { margin-top: 18px; gap: 8px; }
.v3-steps li { padding: 10px 12px; }
.v3-steps b { font-size: .88rem; }
.v3-steps span { font-size: .78rem; }
.hero-ctas { margin-top: 16px !important; }
.hero-card, .hero-card-glass { padding: 20px 22px; }
.hero-card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.hero-card ol { gap: 7px; }
.hero-card li { font-size: .86rem; }
.marquee { padding: 8px 0; }
.pack-band { padding: 16px 22px !important; }
.pack-band .pb-p { font-size: .86rem; }

/* Pages intérieures */
.page-header { padding: clamp(26px, 3.6vw, 48px) 0 clamp(16px, 2.4vw, 28px); }
.page-header h1 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin-bottom: 10px; }
.breadcrumb .container { padding-top: 8px; }
.tp-hero, .tp-lead { line-height: 1.5; }

/* Bento, étapes, engagements, zones */
#expertises .grid-3 > .card:nth-child(1), #expertises .grid-3 > .card:nth-child(2) { min-height: 230px; }
#expertises .grid-3 > .card h3 { font-size: 1.6rem; margin: 4px 0 6px; }
#expertises .card .card-pole::after { font-size: 7rem; bottom: -26px; }
#expertises .card .price-note { padding-top: 14px; }
.steps { gap: 18px; }
.step { padding-top: 46px !important; }
.step-num { width: 32px; height: 32px; font-size: .72rem; }
.step h3 { font-size: 1.05rem; }
.step p { font-size: .88rem; }
.engagements { gap: 16px; }
.engagement p { font-size: .84rem; }
.zone { padding: 16px 18px; }
.zone p { font-size: .86rem; }

/* FAQ, CTA, newsletter, footer */
details.faq-item summary { padding: 13px 4px !important; font-size: .97rem !important; }
details.faq-item .faq-body { padding: 0 4px 14px !important; font-size: .92rem; }
.cta-band { padding: clamp(26px, 3.6vw, 44px) clamp(22px, 4vw, 48px) !important; gap: 20px; }
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 8px; }
.cta-band p { font-size: .95rem; }
.newsletter-box { padding: 22px !important; }
.site-footer { padding: 40px 0 18px; }
.footer-grid { padding: 0 0 26px !important; gap: 28px !important; }
.site-footer ul { gap: 6px; }
.site-footer ul a { font-size: .86rem; }
.site-footer .footer-grid > div > p { margin-top: 12px; font-size: .86rem; }
.footer-bottom { padding: 14px 0 0 !important; }
.footer-bottom::before { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 10px 0 6px; }

/* Tableaux, prose, légal, blog */
.table-wrap th, table.compare th, .cpt-table th { padding: 10px 16px !important; }
.table-wrap td, table.compare td, .cpt-table td { padding: 11px 16px !important; }
.prose { font-size: 1rem; line-height: 1.62; max-width: 840px; }
.prose h2 { font-size: 1.45rem; margin: 28px 0 10px; }
.prose h3 { margin: 20px 0 8px; }
.prose p, .prose ul { margin-block: 0 12px; }
.legal-page .prose { max-width: 960px; }
.legal-page .prose h2 { font-size: 1.2rem; margin-top: 24px; }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.presta-grid { gap: 14px; }

/* Espace client */
#dashboard .dash-head { margin-bottom: 14px; }
#dashboard .dash-head h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
#dashboard .ec-kpis { gap: 12px; margin: 12px 0 14px; }
#dashboard .ec-kpi { padding: 12px 16px; }
#dashboard .ec-kpi b { font-size: 1.6rem; margin-bottom: 2px; }
#dashboard .ec-tabs { margin-bottom: 14px; padding: 4px; }
#dashboard .ec-tab { padding: 7px 12px; font-size: .82rem; }
#dashboard .panel { padding: 18px 20px; margin-bottom: 14px; }
#dashboard .panel h3 { font-size: 1.02rem; margin-bottom: 10px; }
#dashboard .panel p, #dashboard .panel li { font-size: .88rem; }
#dashboard .dash-grid { gap: 14px; }
#dashboard .action-list { gap: 8px; }
#dashboard .action-list li, #dashboard .doc-list li { padding: 9px 12px; }
#dashboard .timeline li { padding-bottom: 12px; }
#dashboard .msg-thread { max-height: 220px; }
#login-view .login-card, #login-view .member-side { padding: 22px; }

/* Back-office */
.admin-content { padding: 18px 20px; }
.admin-top { padding: 10px 20px; }
.kpi { padding: 14px 16px; }
.kpi-value { font-size: 1.7rem; margin: 4px 0 2px; }
.adm-table th { padding: 9px 12px; }
.adm-table td { padding: 10px 12px; }
.admin-card, .adm-panel { padding: 16px 18px; }
.admin-navitem { padding: 6px 12px; font-size: .82rem; }

/* Mobile : chaque pixel compte */
@media (max-width: 680px) {
  .section { padding: 28px 0; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 1.5rem; }
  .hero { padding: 22px 0 18px; }
  .hero h1 { font-size: 2rem; }
  .hero .lead { font-size: .95rem; margin: 10px 0 2px; }
  .hero-sat { display: none; }
  .hero-card, .hero-card-glass { padding: 16px; }
  .card { padding: 16px; }
  .grid { gap: 10px; }
  .page-header { padding: 22px 0 14px; }
  .page-header h1 { font-size: 1.75rem; }
  .page-header .lead { font-size: .95rem; }
  .step { padding-top: 40px !important; }
  .steps { gap: 12px; }
  .cta-band { padding: 24px 20px !important; }
  .cta-band h2 { font-size: 1.5rem; }
  .site-footer { padding: 28px 0 14px; }
  .footer-grid { gap: 18px !important; padding-bottom: 16px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom::before { font-size: 2.2rem; margin: 6px 0 4px; }
  details.faq-item summary { padding: 11px 2px !important; font-size: .93rem !important; }
  .btn-lg { padding: 12px 20px; font-size: .93rem; }
  .marquee { padding: 6px 0; }
  .prose { font-size: .97rem; }
  #dashboard .ec-kpis { gap: 8px; }
  #dashboard .ec-kpi { padding: 10px 12px; }
  #dashboard .ec-kpi b { font-size: 1.35rem; }
  #dashboard .panel { padding: 14px; margin-bottom: 10px; }
  .admin-content { padding: 12px; }
}
#dashboard .dash-head .eyebrow { display: block; letter-spacing: .1em; font-size: .66rem; line-height: 1.5; }
#dashboard .dash-head .eyebrow::before { display: none; }

/* ============================================================
   PRIORITÉS AUDIT (23/08/2026)
   ============================================================ */
/* P1 — LCP : le H1 est lisible dès le premier paint (plus d'opacité 0 ni de flou) */
.line-in, .word-in { opacity: 1 !important; filter: none !important; transform: translateY(.3em); transition: transform .5s cubic-bezier(.2, 0, 0, 1) !important; }
.words-go .line-in, .words-go .word-in { transform: none; }
body { animation: none !important; }
h1.t-armed .dot-o { opacity: 1; }
.hero .container { will-change: auto; }

/* P2 — une seule règle pour les petits textes orange : #ad4810 sur clair, #de6420 sur charbon */
.presta .p-price, .tp-lab, .tp-xs, .tp-micro, .pr em, .price-card .amt small, .choice-price, .dj-price, .cmp-badge, .sim-tab.active, .filter-btn.active, .card-pole, .eyebrow.is-pole, .ec-tab .n, .ec-tab .badge, .ec-tab-premium, .hero h1 em .word-in, .t-good, .good, .t-bad, .bad, .price-note b, .price-note strong, .breadcrumb a { color: var(--secondary) !important; }
small[style*="de6420"], .choice small, .presta-note small { color: var(--secondary) !important; }
.t-good, .good, .cmp-flag.good { color: #2f4a1f !important; }
.t-bad, .bad, .cmp-flag.bad { color: #8a3a0d !important; }
html[data-theme=dark] .t-good, html[data-theme=dark] .good { color: #9fd38f !important; }
html[data-theme=dark] .t-bad, html[data-theme=dark] .bad { color: #f0a878 !important; }
.presta .p-badge, .pack-badge, .ribbon, .price-tag, .badge-inclus, .ec-tab .n, .ec-tab .badge, .cmp-badge, .tp-lab::before { background: var(--accent-hover) !important; color: #fff !important; font-size: .75rem !important; }
.cookie-banner a, .cookie-banner .btn-ghost { color: #e8894f !important; }
#expertises .grid-3 > .card:nth-child(1) .price-note, #expertises .grid-3 > .card:nth-child(1) .price-note * { color: var(--accent) !important; }
html[data-theme=dark] .presta .p-price, html[data-theme=dark] .card-pole, html[data-theme=dark] .breadcrumb a { color: #f0a878 !important; }
/* Bouton WhatsApp : vert lisible (blanc 4,0:1 / 4,9:1) */
a[href*="wa.me"].btn { background: #1a8f4c !important; color: #fff !important; border-color: transparent !important; }
.wa-fab { background: transparent !important; }
.wa-fab > a { background: #1a8f4c !important; }

/* P3 — cibles tactiles ≥ 40 px */
.card-link, .btn-link, a.tp-xs, .read-more { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 0; }
.site-footer ul { gap: 0; }
.site-footer ul a { display: inline-block; padding: 7px 0; }
.breadcrumb { font-size: .86rem; }
.breadcrumb a, .breadcrumb [aria-current=page] { display: inline-block; padding: 8px 0; }
.breadcrumb li, .breadcrumb span { color: var(--text-soft); }
#login-view a:not(.btn), .login-card a:not(.btn) { display: inline-block; padding: 9px 0; }
.choice input[type=checkbox], .choice input[type=radio], .consent input, .chk input, .nl-consent input { width: 20px; height: 20px; }
.post .meta, .blog-grid .card p.meta, .tp-micro, .presta-note, .table-wrap small, .price-note small { font-size: .78rem; }

/* P4 — écran mobile allégé */
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.quote-bar.is-empty { display: none !important; }
@media (max-width: 680px) {
  .cookie-banner { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; }
  .cookie-banner .cookie-inner { display: grid; gap: 6px; }
  .cookie-banner p { margin: 0; font-size: .76rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cookie-banner .cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .cookie-banner .cookie-actions .btn { min-height: 36px; padding: 7px 14px; font-size: .82rem; }
  body.has-cookie .wa-fab, body.has-cookie .wa-reopen, body.has-cookie .to-top { bottom: calc(var(--cookie-h, 0px) + 12px + env(safe-area-inset-bottom)) !important; }
  body.wizard-active .wa-fab, body.wizard-active .wa-reopen { display: none !important; }
}
.wizard-progress span.done { cursor: pointer; }

/* P5 — comparateur en cartes sur mobile, tableau à la demande ; back-office en colonne latérale ≥ 1280 px

   26/08/2026 — SEUIL PORTÉ DE 680 À 767 px.
   Le style écrit dans comparateur-statuts.html cachait le tableau jusqu'à
   768 px, et le bouton « Voir le tableau » n'était créé que sous 680 px.
   Entre les deux, le comparateur était invisible ET inouvrable — un iPad
   en portrait fait exactement 768 px. Les trois seuils (page, feuille,
   script) disent désormais la même chose. */
@media (max-width: 767px) {
  .compare-scroll:not(.is-open) { display: none !important; }
  .compare-toggle { width: 100%; margin: 6px 0 14px; }
}
@media (min-width: 1280px) {
  .admin-shell { display: grid !important; grid-template-columns: 232px 1fr; min-height: 100vh; }
  .admin-side { flex-direction: column !important; align-items: stretch !important; height: 100vh; position: sticky !important; top: 0; padding: 18px 14px !important; gap: 12px !important; overflow-y: auto; box-shadow: none !important; }
  .admin-brand { margin-bottom: 6px; }
  .admin-nav { flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important; align-items: stretch !important; }
  .admin-nav .admin-navitem { border-radius: 10px; width: 100%; justify-content: flex-start; white-space: normal; }
  .admin-nav .admin-navitem:nth-child(1)::before { content: "Pilotage"; }
  .admin-nav .admin-navitem:nth-child(4)::before { content: "Commercial"; }
  .admin-nav .admin-navitem:nth-child(9)::before { content: "Comptabilité"; }
  .admin-nav .admin-navitem:nth-child(11)::before { content: "Documents & IA"; }
  .admin-nav .admin-navitem:nth-child(14)::before { content: "Système"; }
  .admin-nav .admin-navitem::before { display: none; }
  .admin-nav .admin-navitem:nth-child(1)::before, .admin-nav .admin-navitem:nth-child(4)::before, .admin-nav .admin-navitem:nth-child(9)::before, .admin-nav .admin-navitem:nth-child(11)::before, .admin-nav .admin-navitem:nth-child(14)::before { display: block; position: absolute; top: -14px; left: 12px; font: 600 .6rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--v5-on-dark-2); }
  .admin-nav .admin-navitem:nth-child(1), .admin-nav .admin-navitem:nth-child(4), .admin-nav .admin-navitem:nth-child(9), .admin-nav .admin-navitem:nth-child(11), .admin-nav .admin-navitem:nth-child(14) { margin-top: 22px; position: relative; }
  .admin-nav .admin-navitem:nth-child(1) { margin-top: 10px; }
  .admin-side-foot { margin-top: auto; }
  .admin-main { min-width: 0; }
}

/* Priorités audit — reprises après mesure */
.breadcrumb, .breadcrumb li, .breadcrumb span, .breadcrumb ol { color: var(--text-soft) !important; font-size: .86rem !important; }
.breadcrumb a { color: var(--secondary) !important; display: inline-block; padding: 8px 0 !important; }
.table-wrap small, table small, .price small, .cpt-price small, .p-price small { color: var(--secondary) !important; font-size: .78rem !important; }
.table-wrap td:last-child, table.compare td:last-child, table.compare td:last-child strong, .op-table td:last-child { color: var(--secondary) !important; }
#expertises .card .card-pole { color: var(--secondary) !important; }
#expertises .grid-3 > .card:nth-child(1) .card-pole { color: var(--accent) !important; }
.pack-band .pb-eb span, .pack-band .pb-badge, .pack-band [class*="badge"] { background: var(--accent-hover) !important; color: #fff !important; font-size: .75rem !important; }
a[href*="wa.me"].btn, .wa-fab > a { background: #157347 !important; }
.wa-fab .wa-txt { font-size: 12px !important; }
.compare-scroll.is-open { display: block !important; }
.mohna-breadcrumb, .mohna-breadcrumb a, .mohna-breadcrumb span { color: var(--text-soft) !important; font-size: .86rem !important; }
.mohna-breadcrumb a { display: inline-block; padding: 8px 0; color: var(--secondary) !important; }
.cta-band a:not(.btn), .sec-dark a:not(.btn), .site-footer a:not(.btn) { color: #e8894f !important; }
.tp-xsell .pr, .tp-xsell span:last-child, .tp-xs .pr, .tp-xs em, .tp-xsell em { color: var(--secondary) !important; }
.mobile-actionbar a { font-family: var(--font-body); font-size: .75rem; }
.mobile-actionbar.ab5 .ab-wa { color: #0f7a3e !important; }
html[data-theme=dark] .mobile-actionbar.ab5 .ab-wa { color: #7fd49a !important; }
@media (max-width: 680px) { .hero h1 { margin-bottom: 6px; } .hero .lead { margin-top: 6px; } }


/* ============================================================
   BRIEF 23/08/2026 — hero « parcours », pôles, responsive, a11y
   ============================================================ */
/* Alias demandés par le brief, mappés sur la charte réelle (pas de teal : charte sable/charbon/orange conservée) */
:root { --color-brand: var(--accent-hover); --color-brand-dark: var(--secondary); --color-ink: var(--text); --color-body: var(--text-soft); --color-muted: var(--v5-ink-3); --color-surface: var(--surface); --color-background: var(--bg); --color-border: var(--border); --radius-card: var(--radius); --radius-button: 999px; --container-max: var(--v5-max); }

/* Hero accueil */
.hero .container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.hero-eyebrow { margin-bottom: 14px; }
.hero h1 { max-width: 16ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-proof { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .86rem; color: var(--text-soft); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .e-ico { width: 16px; height: 16px; color: var(--secondary); flex: 0 0 auto; }
.hero-path { padding: 22px 24px; }
.hero-path .eyebrow { color: var(--accent); margin-bottom: 12px; }
.path-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.path-list::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1px; background: rgba(255,255,255,.14); }
.path-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; padding: 9px 0; position: relative; }
.path-n { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-hover); color: #fff; display: grid; place-items: center; font: 600 .74rem var(--font-head); font-style: italic; letter-spacing: 0; }
.path-list b { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.path-list span:not(.path-n) { font-size: .82rem; color: var(--v5-on-dark-2); }

/* Pôles (page Expertises) */
.pole-grid { align-items: start; }
.pole-section h3 { font-size: 1.05rem; margin: 18px 0 8px; }
.pole-section .card h3:first-child { margin-top: 0; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--text-soft); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ad4810' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.check-list b { color: var(--text); font-weight: 600; }
.pole-section .price-note b { color: var(--secondary); }

/* Responsive : grilles qui ne débordent jamais, médias proportionnels */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.engagements, .zones, .presta-grid, .steps, .kpi-grid, .ec-kpis, .dash-grid, .login-layout, .form-grid, .cpt-plans, .tp-grid, .tp-inc-grid, .cmp-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.login-layout { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hero-ctas, .cta-row, .flex, .nav-wrap, .footer-bottom, .dash-head, .adm-toolbar, .filters, .cookie-actions { flex-wrap: wrap; }
img, video, svg, iframe { max-width: 100%; height: auto; }
.site-header .logo img, .logo-mark { height: auto; }
.table-wrap, .compare-scroll, .adm-table-wrap, .fin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wrap, .container { min-width: 0; }
/* ⚠️ « anywhere » coupait les mots n'importe où — corrigé le 25/08/2026.
   Constaté sur mobile : « STRUCTU/RE », « HONOR/AIRES », « Société commerci/ale ».
   La valeur « anywhere » ne se contente pas d'autoriser la coupure : elle
   réduit aussi la largeur minimale que le navigateur accorde au bloc, ce qui
   le pousse à couper bien avant d'y être obligé.
   « break-word » garde la protection contre les débordements — une URL trop
   longue est toujours coupée — mais n'attaque un mot que s'il ne peut pas
   tenir seul sur une ligne. */
h1, h2, h3, p, li, td, th, a, button { overflow-wrap: break-word; }
/* Les intitulés courts d'un tableau n'ont aucune raison d'être coupés : on
   préfère une colonne qui s'élargit à un mot cassé en deux. */
th { hyphens: none; word-break: keep-all; }
.btn { overflow-wrap: normal; white-space: normal; text-align: center; }
.site h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.2rem); }
.page-header h1 { font-size: clamp(1.8rem, 1.1rem + 3vw, 3.4rem); }
.section-head h2, .site h2 { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.4rem); }

@media (min-width: 1536px) { .container, .wrap { max-width: 1240px; } .hero h1 { max-width: 18ch; } }
@media (max-width: 1279px) and (min-width: 1024px) { .hero .container { gap: 36px; } }
@media (max-width: 1023px) { .hero .container { grid-template-columns: minmax(0, 1fr); } .hero-path { max-width: 640px; } }
@media (max-width: 767px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn, .btn-lg, .mobile-actionbar a, .ec-tab, .filter-btn { min-height: 48px; }
  .hero-ctas .btn, .cta-band .btn, .wizard-nav .btn { width: 100%; }
  .hero-ctas, .cta-row { gap: 10px; }
  .cookie-banner .cookie-actions .btn { min-height: 44px; }
  body.has-actionbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.has-actionbar .cookie-banner { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .wa-fab, .to-top { right: 14px; }
}
@media (max-width: 479px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .container, .wrap { width: calc(100% - 32px); }
  .hero-path { padding: 18px; }
  .path-list li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .path-n { width: 32px; height: 32px; }
}

/* Accessibilité : contraste renforcé et focus */
@media (prefers-contrast: more) {
  :root { --text-soft: #2b2925; --border: #9b968a; --v5-line-2: #8a857a; }
  .btn-light, .btn-ghost { border-color: var(--text) !important; }
  .card, .panel, .kpi { border-color: #8a857a; }
}
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; }

/* Formulaires : validation inline, états */
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea { border-color: #b4231f !important; box-shadow: 0 0 0 3px rgba(180,35,31,.12); }
.field-error { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: .82rem; color: #b4231f; }
.field-error::before { content: "!"; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: #b4231f; color: #fff; font: 700 .7rem/16px var(--font-body); text-align: center; }
html[data-theme=dark] .field-error { color: #f58f8a; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: v5spin .8s linear infinite; }
@keyframes v5spin { to { transform: rotate(360deg); } }
.form-success { border-radius: var(--radius); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-footer h3.ftr-h { font: 600 .7rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.card h2.card-h, h2.card-h { font-size: 1.12rem; font-weight: 600; margin-bottom: 6px; line-height: 1.3; }
/* Texte toujours lisible : la révélation au scroll ne joue plus que sur le déplacement (plus de fondu d'opacité) */
.reveal { opacity: 1 !important; transform: translateY(12px); transition: transform .45s var(--v5-ease) !important; }
.reveal.in { transform: none !important; }
.step-num { color: var(--secondary) !important; font-size: .8rem; }
html[data-theme=dark] .step-num { color: #f0a878 !important; }

/* ---- Bandes CTA : blob décoratif hors flux, boutons groupés, hauteur au contenu ---- */
.cta-band > .fx-blob, .cta-band > [class*="blob"], .cta-band > [aria-hidden="true"]:empty { position: absolute !important; z-index: 0; grid-area: auto; }
.cta-band { grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: auto; row-gap: 10px; column-gap: clamp(24px, 4vw, 56px); min-height: 0; }
.cta-band > h2, .cta-band > p, .cta-band > .btn-link, .cta-band > small { grid-column: 1; }
.cta-band > h2 { margin-bottom: 2px; }
.cta-band > p { margin: 0; }
.cta-band > .btn, .cta-band > .hero-ctas, .cta-band > .cta-actions, .cta-band > .cta-row { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.cta-band .cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.cta-band .cta-actions .btn { width: 100%; }
@media (max-width: 767px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band > .btn, .cta-band > .hero-ctas, .cta-band > .cta-actions, .cta-band > .cta-row { grid-column: 1; grid-row: auto; }
}

/* ---- Trois pôles : trois cartes égales, sans vide ---- */
#expertises .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
#expertises .grid-3 > .card:nth-child(1), #expertises .grid-3 > .card:nth-child(2), #expertises .grid-3 > .card:nth-child(3) { grid-column: auto; min-height: 0; flex-direction: column; flex-wrap: nowrap; }
#expertises .grid-3 > .card:nth-child(3) h3 { flex-basis: auto; }
#expertises .grid-3 > .card:nth-child(3) > p:not(.card-pole) { flex: 0 0 auto; }
#expertises .grid-3 > .card h3 { font-size: 1.5rem; margin: 4px 0 6px; }
#expertises .card .card-pole::after { font-size: 5.5rem; right: 6px; bottom: -18px; }
#expertises .card .price-note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); font-size: .86rem; }
#expertises .grid-3 > .card:nth-child(1) .price-note { border-top-color: rgba(255,255,255,.12); }
#expertises .card .card-link { margin-top: 10px; }
@media (max-width: 1023px) { #expertises .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } }
#expertises .grid-3 > .card:nth-child(3) { align-items: stretch; text-align: left; }
#expertises .grid-3 > .card:nth-child(3) .price-note { align-self: stretch; }

/* ---- Polish global : moins d'air, blocs structurés, contenu ancré ---- */
.section-head::after { display: none; }                      /* le tiret de l'eyebrow suffit ; le tiret centré hérité était égaré */
.section-head { margin-bottom: clamp(16px, 2vw, 26px); }
.section-head .lead, .section-head p { margin-top: 6px; }

/* Engagements : cartes compactes, icône + titre sur une ligne, texte dessous */
.engagements { gap: 12px; }
.engagement { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 16px !important; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sec-dark .engagement, .section-alt .engagement { background: var(--bg); }
.engagement .card-icon { width: 36px; height: 36px; margin: 0; grid-row: 1; }
.engagement h3, .engagement h4 { grid-column: 2; grid-row: 1; margin: 0; font-size: .98rem; }
.engagement p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .86rem; line-height: 1.45; }

/* Zones (outre-mer) et étapes : mêmes proportions */
.zone { padding: 14px 16px; gap: 12px; }
.zone h3 { font-size: .98rem; }
.zone p { font-size: .86rem; line-height: 1.45; }
.step h3 { margin-bottom: 4px; }
.step p { line-height: 1.45; }

/* Cartes en grille : hauteur égale mais contenu ancré (lien/prix en bas, pas de vide flottant) */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card > h3, .grid > .card > h2 { margin-bottom: 6px; }
.grid > .card > p { margin: 0 0 8px; line-height: 1.45; }
.grid > .card > .card-link:last-child, .grid > .card > .btn:last-child, .grid > .card > .price-note:last-child, .grid > .card > .p-go:last-child, .grid > .card > .arrow:last-child { margin-top: auto; padding-top: 10px; }
.grid > .card > .price-note + .card-link { margin-top: 6px; }
.card .card-icon { margin-bottom: 12px; }

/* Listes de points, notes et petits textes : interlignes plus serrés */
.check-list li, .checks li, .faq-body p, .price-note, .tp-micro { line-height: 1.45; }
.section .lead { line-height: 1.5; }

/* Bandes CTA : halo recentré, paragraphe limité, hauteur minimale supprimée */
.cta-band > p { max-width: 58ch; }
.cta-band > .btn-link, .cta-band > p:has(> a:only-child) { margin-top: 4px; }

/* ---- Bandes CTA v3 : flex texte / actions, hauteur = contenu ---- */
.cta-band { display: flex !important; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px); padding: clamp(22px, 3vw, 36px) clamp(22px, 4vw, 44px) !important; min-height: 0; }
.cta-band .cta-text { flex: 1 1 360px; min-width: 0; }
.cta-band .cta-text > h2 { margin: 0 0 6px; }
.cta-band .cta-text > p { margin: 0; max-width: 60ch; }
.cta-band .cta-text > p + p, .cta-band .cta-text > .btn-link { margin-top: 8px; }
.cta-band .cta-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 100%; }
.cta-band .cta-actions .hero-ctas, .cta-band .cta-actions .cta-row { display: flex; flex-direction: column; gap: 10px; margin: 0; }
@media (max-width: 767px) { .cta-band { flex-direction: column; align-items: stretch; } .cta-band .cta-text { flex-basis: auto; } }

/* ============================================================
   ARTICLES DE BLOG — mise en page éditoriale
   ============================================================ */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.article-layout > .container { padding-left: 0; padding-right: 0; }
.article-layout .prose, .article-layout .article-body { max-width: 720px; width: 100%; margin: 0; font-size: 1.05rem; line-height: 1.7; }
.article-layout .prose > p:first-of-type:not(.notice), .article-layout .article-body > p:first-of-type:not(.notice) { font-size: 1.15rem; line-height: 1.6; color: var(--text); }
.article-layout .prose > .eyebrow + p, .article-layout .article-body > .eyebrow + p { font-size: 1.15rem; line-height: 1.6; color: var(--text); }
.prose h2, .article-body h2 { font-size: 1.55rem; margin: 38px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.prose h3, .article-body h3 { font-size: 1.15rem; margin: 22px 0 8px; }
.prose p, .article-body p { margin: 0 0 14px; }
.prose ul, .prose ol, .article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li, .prose ol li, .article-body ul li, .article-body ol li { position: relative; padding-left: 26px; color: var(--text-soft); }
.prose ul li::before, .article-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ad4810' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat; }
.prose ol, .article-body ol { counter-reset: li; }
.prose ol li::before, .article-body ol li::before { counter-increment: li; content: counter(li); position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-hover); color: #fff; font: 600 .68rem/18px var(--font-body); text-align: center; }
.prose b, .prose strong, .article-body b, .article-body strong { color: var(--text); }
.prose .notice, .article-body .notice { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; margin: 22px 0; font-size: .95rem; }
.prose blockquote, .article-body blockquote { margin: 24px 0; padding: 16px 22px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-head); font-style: italic; font-size: 1.12rem; color: var(--text); }
.prose table, .article-body table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.prose th, .article-body th { font: 600 .7rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--v5-ink-3); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.prose td, .article-body td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.prose img, .article-body img { border-radius: var(--radius-sm); }
.article-aside { position: sticky; top: 88px; display: grid; gap: 14px; }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 16px 10px; }
.toc summary { list-style: none; cursor: pointer; font: 600 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--v5-ink-3); padding: 10px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; font: 400 1.1rem/1 var(--font-head); color: var(--accent); }
.toc details[open] summary::after { content: "–"; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.toc li a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid transparent; font-size: .86rem; line-height: 1.35; color: var(--text-soft); text-decoration: none; min-height: 0; }
.toc li a:hover, .toc li a.is-on { color: var(--secondary); border-left-color: var(--accent); }
.article-cta { background: var(--pill); color: var(--v5-on-dark-2); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 10px; }
.article-cta .eyebrow { color: var(--accent); margin: 0; }
.article-cta p { margin: 0; font-size: .9rem; line-height: 1.45; }
.article-cta b { color: #fff; }
.article-cta .btn { width: 100%; }
.article-cta .btn-link { color: #e8894f !important; font-size: .86rem; min-height: 0; padding: 0; }
@media (max-width: 1023px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-layout .prose { max-width: none; }
  .article-aside { position: static; grid-template-columns: 1fr; order: -1; }
  .article-cta { display: none; }
  .toc details[open] ol { margin-bottom: 6px; }
}
@media (max-width: 767px) { .prose h2 { font-size: 1.35rem; margin-top: 28px; } .article-layout .prose { font-size: 1rem; } }
.page-header .article-meta { font: 500 .8rem/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--v5-ink-3); margin: -6px 0 10px !important; }
.article-layout .prose > h2:first-child, .article-layout .article-body > h2:first-child, .article-layout .prose > .eyebrow + h2, .article-layout .article-body > .eyebrow + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.article-layout { margin-top: -8px; }

/* ============================================================
   EN-TÊTES DE PAGE — hauteur réduite (23/08/2026)
   ============================================================ */
.page-header { padding: clamp(18px, 2.6vw, 34px) 0 clamp(12px, 1.8vw, 20px); }
.page-header h1 { font-size: clamp(1.7rem, 1rem + 2.2vw, 2.7rem); line-height: 1.08; max-width: 26ch; margin-bottom: 8px; }
.page-header .lead, .page-header p:not(.eyebrow):not(.article-meta) { font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.5; margin-bottom: 0; }
.page-header .eyebrow, .page-header .hero-badge { margin-bottom: 10px !important; }
.page-header + .section, .page-header + section { padding-top: clamp(18px, 2.4vw, 30px); }
.page-header .hero-ctas, .page-header .cta-row { margin-top: 14px; }
@media (max-width: 767px) {
  .page-header { padding: 16px 0 10px; }
  .page-header h1 { font-size: 1.6rem; }
  .page-header + .section, .page-header + section { padding-top: 18px; }
}
.mohna-breadcrumb { padding-top: 6px !important; padding-bottom: 2px !important; }
@media (hover: hover) and (pointer: fine) { .mohna-breadcrumb a { padding: 2px 0; } }
/* Barre de navigation toujours visible (plus de masquage au défilement) */
.site-header.hidden-up { transform: none !important; }

/* ============================================================
   BARRE DE NAVIGATION — proposition C « Charbon éditorial » (23/08/2026)
   ============================================================ */
:root { --nav-bg: #141413; --nav-panel: #1d1c1a; --nav-ink: #f3ede5; --nav-ink-2: rgba(243, 237, 229, .82); --nav-line: rgba(255, 255, 255, .09); --nav-hover: rgba(255, 255, 255, .07); --nav-orange: #e8894f; }
.site-header { background: var(--nav-bg) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--nav-line) !important; }
.site-header::after { display: none; }
.site-header.scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, .28); }
.site-header .logo { background-image: url("../logo-horizontal-white.svg?v=logo3") !important; }
.main-nav > ul > li > a:not(.btn) { color: var(--nav-ink-2); }
.main-nav > ul > li > a:not(.btn):hover, .main-nav > ul > li > a:not(.btn):focus-visible { color: #fff; }
.main-nav > ul > li > a:not(.btn)[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
.main-nav .nav-ic { color: var(--nav-orange); }
.main-nav a.btn-primary, .main-nav a.btn-primary[aria-current="page"] { background: var(--accent) !important; color: var(--nav-bg) !important; border-color: var(--accent) !important; }
.main-nav a.btn-primary:hover { background: var(--nav-orange) !important; }
.nav-search-btn, .theme-toggle { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: var(--nav-ink) !important; }
.nav-search-btn:hover, .theme-toggle:hover { background: rgba(255, 255, 255, .14) !important; }
.site-header .main-nav .dropdown-toggle { color: var(--nav-ink-2); }
.nav-toggle { background: rgba(255, 255, 255, .08) !important; box-shadow: none !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: var(--nav-ink); }
.burger i { background: var(--nav-ink); }
/* Sous-menus (desktop) */
.site-header .main-nav .dropdown { background: var(--nav-panel) !important; border: 1px solid var(--nav-line) !important; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .6) !important; }
.site-header .main-nav .dropdown a { color: var(--nav-ink) !important; }
.site-header .main-nav .dropdown a:hover, .site-header .main-nav .dropdown a:focus-visible { background: var(--nav-hover) !important; color: #fff !important; }
.site-header .main-nav .dropdown a[aria-current="page"] { background: rgba(232, 137, 79, .14) !important; color: var(--nav-orange) !important; }
.site-header .main-nav .dropdown .dd-ic { color: var(--nav-orange); }
.site-header .main-nav .dropdown .dd-h { color: var(--nav-orange); }
.site-header .main-nav .dropdown a.all { color: var(--nav-orange) !important; border-top: 1px solid var(--nav-line) !important; }
.site-header .main-nav .dropdown .ddc + .ddc { border-left: 1px solid var(--nav-line); }
/* Tiroir mobile */
@media (max-width: 960px) {
  .main-nav { background: var(--nav-bg) !important; border-left: 1px solid var(--nav-line) !important; box-shadow: -8px 0 40px rgba(0, 0, 0, .5) !important; }
  .nav-drawer-head { background: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-line) !important; }
  .nav-drawer-head .logo-word { color: var(--nav-ink); }
  .nav-drawer-head .logo-co { color: var(--nav-orange); }
  .nav-close { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: var(--nav-ink) !important; }
  .main-nav > ul > li { border-color: var(--nav-line) !important; }
  .main-nav > ul > li > a:not(.btn) { color: var(--nav-ink); }
  .main-nav > ul > li > a:not(.btn)[aria-current="page"] { color: var(--nav-orange); background: rgba(232, 137, 79, .08); }
  .site-header .main-nav .dropdown { background: rgba(255, 255, 255, .04) !important; border: 0 !important; box-shadow: none !important; }
  .nav-quick { border-top: 1px solid var(--nav-line) !important; }
  .nav-quick a { background: rgba(255, 255, 255, .08) !important; color: var(--nav-ink) !important; box-shadow: none !important; }
  .nav-quick a.wa { background: rgba(37, 211, 102, .16) !important; color: #7be0a2 !important; }
  .nav-search-btn { justify-content: flex-start; }
}
/* Thème sombre : même barre, panneau légèrement plus clair que le fond */
html[data-theme="dark"] .site-header { border-bottom-color: rgba(255, 255, 255, .12) !important; }
html[data-theme="dark"] .site-header .main-nav .dropdown { background: #24221f !important; }

/* ============================================================
   PAGES LÉGALES — mentions, confidentialité, cookies, CGV, CGU (23/08/2026)
   ============================================================ */
.legal-page .page-header .eyebrow { margin-bottom: 8px !important; }
.legal-page .page-header h1 { max-width: 30ch; }
.legal-page .legal-meta { font: 500 .8rem/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--v5-ink-3); margin: -2px 0 0 !important; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.legal-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: .84rem; font-weight: 500; text-decoration: none; transition: color .15s, border-color .15s, background-color .15s; }
.legal-nav a:hover { color: var(--secondary); border-color: var(--accent); }
.legal-nav a[aria-current="page"] { background: var(--pill); border-color: var(--pill); color: #fff; }
.legal-page .article-layout .prose { max-width: 720px; font-size: 1rem; line-height: 1.65; }
.legal-page .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-page .prose h2 { font-size: 1.3rem; margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid var(--border); scroll-margin-top: 90px; }
.legal-page .prose h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.legal-page .prose p { margin: 0 0 12px; color: var(--text-soft); }
.legal-page .prose p strong, .legal-page .prose li strong { color: var(--text); font-weight: 600; }
.legal-page .prose ul li::before { background: var(--accent-soft); width: 7px; height: 7px; top: 9px; left: 6px; border-radius: 50%; background-image: none; box-shadow: 0 0 0 2px var(--accent-soft); background-color: var(--secondary); }
.legal-page .prose ul li, .legal-page .prose ol li { padding-left: 22px; }
/* Blocs d'identité (éditeur, hébergeur, coordonnées) : paragraphes multi-lignes en fiche */
.legal-page .prose p:has(> br) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; line-height: 1.7; margin: 0 0 14px; }
.legal-page .prose p:has(> br) strong { display: inline-block; }
.legal-page .prose a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }
.legal-page .prose a:hover { color: var(--accent-hover); }
.legal-page .article-cta { background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); }
.legal-page .article-cta .eyebrow { color: var(--secondary); }
.legal-page .article-cta p { color: var(--text-soft); }
.legal-page .article-cta .btn-link { color: var(--secondary) !important; font-weight: 600; word-break: break-all; }
.legal-page .article-cta .legal-print { width: 100%; min-height: 40px; font-size: .86rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; cursor: pointer; }
.legal-page .article-cta .legal-print:hover { border-color: var(--text); }
.legal-page .article-layout .prose > p:first-of-type, .legal-page .article-layout .prose > .eyebrow + p { font-size: inherit; line-height: inherit; color: var(--text-soft); }
@media (max-width: 767px) { .legal-nav { gap: 5px; } .legal-nav a { min-height: 34px; padding: 0 12px; font-size: .8rem; } }
@media print {
  .site-header, .site-footer, .mohna-breadcrumb, .legal-nav, .article-aside, .cookie-banner, .wa-fab, .wa-reopen, .to-top, .mobile-actionbar, .mohna-fab, .page-header::before { display: none !important; }
  .legal-page .article-layout { display: block; }
  .legal-page .article-layout .prose { max-width: none; font-size: 11pt; }
  .legal-page .prose p:has(> br) { border: 1px solid #bbb; background: none; }
  .page-header { padding: 0 0 10px !important; }
  a { color: inherit; text-decoration: none; }
}

/* ============================================================
   BRANCHE A — Accessibilité / contraste barre de navigation (23/08/2026)
   À coller à la FIN de css/v5.css (après le bloc « PAGES LÉGALES »).
   Toutes les règles ci-dessous ont été testées par injection Playwright
   (copie de test, thèmes clair + sombre, 1350 px et 390 px). Aucune
   modification de JS, de HTML ni de script inline (CSP par hash).
   Cascade : modern.css utilise `.main-nav .dropdown … !important` et
   `.main-nav > ul > li > a[aria-current=page]{background … !important}`,
   d'où les sélecteurs préfixés `.site-header .main-nav …` et les
   `!important` ciblés ci-dessous.
   ============================================================ */

/* A1 — Bouton « Ressources » (.nav-ddbtn, injecté par js/nav.js) : texte
   var(--text) #141413 sur barre #141413 = 1,0:1 (invisible). Le bloc
   « proposition C » ne couvrait pas ce bouton ni son méga-menu.
   Mesuré après : 10,85:1 au repos, 15,45:1 survol/ouvert/focus.
   NB : modern.css applique `transition: color .2s` sur .nav-ddbtn. */
.site-header .main-nav .nav-ddbtn { color: var(--nav-ink-2); }
.site-header .main-nav .nav-group:hover .nav-ddbtn,
.site-header .main-nav .nav-group.open .nav-ddbtn,
.site-header .main-nav .nav-group.active .nav-ddbtn,
.site-header .main-nav .nav-ddbtn:focus-visible { background: var(--nav-hover); color: #fff; }

/* A2 — Méga-menu « Ressources » (.nav-mega) : restait un panneau sable
   (#f3ede5) sous la barre charbon, seul sous-menu clair du site. Aligné
   sur .dropdown (fond --nav-panel, titres/icônes --nav-orange).
   Mesuré après : titres 6,59:1, liens 14,64:1, « Tous les … » 6,59:1,
   icônes 6,59:1 ; thème sombre : panneau #24221f comme les .dropdown. */
.site-header .main-nav .nav-mega { background: var(--nav-panel) !important; border: 1px solid var(--nav-line) !important; box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .6) !important; }
.site-header .main-nav .nav-mega .col h4 { color: var(--nav-orange); }
.site-header .main-nav .nav-mega a { color: var(--nav-ink); }
.site-header .main-nav .nav-mega a:hover,
.site-header .main-nav .nav-mega a:focus-visible { background: var(--nav-hover); color: #fff; }
.site-header .main-nav .nav-mega a[aria-current="page"] { background: rgba(232, 137, 79, .14); color: var(--nav-orange); }
.site-header .main-nav .nav-mega a.all { color: var(--nav-orange); }
.site-header .main-nav .nav-mega a svg { stroke: var(--nav-orange); }
html[data-theme="dark"] .site-header .main-nav .nav-mega { background: #24221f !important; }

/* A3 — Icônes des sous-menus desktop (.dd-ic) : modern.css force
   `stroke: var(--secondary)` (#ad4810) -> 3,01:1 sur #1d1c1a (icônes
   décoratives aria-hidden, donc pas un échec WCAG strict, mais ternes).
   Mesuré après : 6,59:1 ; blanc au survol/focus du lien. */
.site-header .main-nav .dropdown a .dd-ic { stroke: var(--nav-orange); }
.site-header .main-nav .dropdown a:hover .dd-ic,
.site-header .main-nav .dropdown a:focus-visible .dd-ic { stroke: #fff; }

/* A4 à A7 — Tiroir mobile (≤ 960 px) */
@media (max-width: 960px) {
  /* A4 — Lien de la page courante : modern.css impose
     `background: var(--surface) !important` (carte BLANCHE) sous le texte
     orange #e8894f -> 2,59:1 (échec AA). Mesuré après : 5,98:1
     (thème sombre : 5,98:1 également). */
  .site-header .main-nav > ul > li > a:not(.btn)[aria-current="page"] { background: rgba(232, 137, 79, .12) !important; color: var(--nav-orange) !important; box-shadow: none !important; }
  .site-header .main-nav > ul > li > a:not(.btn)[aria-current="page"] .nav-ic { stroke: var(--nav-orange); }
  /* A5 — Icônes des liens du tiroir : stroke #ad4810 sur charbon 3,01:1
     -> 7,13:1 (décoratives, cohérence avec --nav-orange). */
  .site-header .main-nav .nav-ic { stroke: var(--nav-orange); }
  /* A6 — Libellés générés en CSS par modern.css sur fond charbon :
     « Navigation » (ul::before, 9,9 px) et « Thème » (.nav-theme-li::before,
     14,4 px) en var(--text-soft) #494640 -> 1,96:1 ; « MENU »
     (.logo-name::after, 9,6 px) en var(--secondary) #ad4810 -> 3,26:1.
     Mesuré après : 6,63:1 / 10,85:1 / 7,13:1. */
  .site-header .main-nav ul::before { color: rgba(243, 237, 229, .62); }
  .site-header .main-nav .nav-theme-li::before { color: var(--nav-ink-2); }
  .site-header .main-nav .nav-drawer-head .logo-name::after { color: var(--nav-orange); }
  /* A7 — Icônes Appeler / WhatsApp : stroke #ad4810 sur #272726 (~2,8:1)
     et #0f7a41 sur #173320 (~1,9:1) -> currentColor : 12,89:1 / 8,55:1. */
  .site-header .main-nav .nav-quick a svg,
  .site-header .main-nav .nav-quick a.wa svg { stroke: currentColor; }
}

/* A8 — Échecs « color-contrast » Lighthouse hors navigation */
/* cgv.html : style.css définit `em { color: var(--accent) }` (#de6420) ->
   3,3:1 sur le fond des fiches légales (#faf7f2). Mesuré après : 5,3:1.
   Portée volontairement limitée aux corps de texte (les `em` du hero
   sont en grand texte, ratio ≥ 3:1 suffisant). */
.prose em, .article-body em, .legal-page em { color: var(--secondary); }
/* tarifs.html : en-têtes du comparateur en --v5-ink-3 #7a766d, 11,5 px,
   sur #fbfaf7 -> 4,33:1. Mesuré après : 9,4:1 (thème sombre : 9,4:1). */
.table-wrap th, table.compare th, .compare th, .cpt-table th { color: var(--text-soft) !important; }

/* A9 — CLS : le fil d'Ariane (.mohna-breadcrumb, inséré par
   js/nav-enhance.js entre .site-header et main APRÈS le premier paint)
   pousse tout le contenu : mesuré 0,15 à 0,34 (desktop) et 0,05 à 0,08
   (mobile, Lighthouse). On réserve sa hauteur exacte (ligne .86rem × 1,55
   + padding 6+2 px + padding des liens 2 px ×2 desktop / 8 px ×2 tactile)
   sur les pages qui le reçoivent (main commençant par .page-header, pages
   légales) et on l'annule dès que le fil d'Ariane est présent -> position
   finale du contenu inchangée, plus de décalage. Mesuré après (production,
   2 runs × 3 pages) : desktop 0,005 à 0,02, mobile 0. Les pages exclues
   par le JS (accueil, espace-client, merci, 404, offline, reset, admin) ne
   commencent pas par .page-header : aucun espace ajouté. Les pages
   tarifs-*.html sans .page-header ne sont pas couvertes (inchangées). */
.site-header + main:has(> .page-header:first-child),
.site-header + main.legal-page { margin-top: calc(1.333rem + 24px); }
@media (hover: hover) and (pointer: fine) {
  .site-header + main:has(> .page-header:first-child),
  .site-header + main.legal-page { margin-top: calc(1.333rem + 12px); }
}
.site-header + .mohna-breadcrumb + main { margin-top: 0; }

/* ============================================================
   BRANCHE C — Espace client, back-office, pages outils (23/08/2026)
   À coller en FIN de css/v5.css (chargé en dernier). Uniquement des
   règles testées par injection dans la copie de test (navigateur
   intégré, 320 / 390 / 768 / 1024 / 1440). Tokens v5 + tokens --nav-*
   de la barre « Charbon éditorial ». Aucune modification de markup
   ni de script. Voir branche-C-rapport.md pour les mesures.
   ============================================================ */

/* ---------- 1. Fil d'Ariane statique (nav.breadcrumb, 48 pages) ----------
   Le bloc « EN-TÊTES DE PAGE » ne compacte que .mohna-breadcrumb (0 page
   dans le HTML) ; les 48 pages à <nav class="breadcrumb"> gardaient
   63 px (ol 12,8 px + liens 8 px). Même compaction : 63 → 33 px,
   en-tête de page 30 px plus haut. Les liens gardent 37 px au tactile. */
.breadcrumb ol, .breadcrumb .container { padding-top: 6px !important; padding-bottom: 2px !important; }
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a, .breadcrumb [aria-current=page] { padding: 2px 0 !important; }
}

/* ---------- 2. Espace client — vue connexion (#login-view) ----------
   Carte sombre étirée à la hauteur du formulaire : 232 px de vide entre
   la liste et le bouton à 1440. On laisse la carte à sa hauteur de
   contenu (CTA 20 px sous la liste). Variante : remplacer `align-items:
   start` par `#login-view .member-side { justify-content: center }` pour
   garder les deux cartes à la même hauteur, vide réparti haut/bas. */
#login-view .login-layout { align-items: start; }
#login-view .member-side .side-ctas { margin-top: 20px; padding-top: 0; }
/* 64 px de padding bas (desktop) avant le pied de page : 138 → 114 px. */
#login-view.section { padding-bottom: clamp(28px, 3vw, 40px); }
/* Cibles : œil 31 → 40 px, ligne « Afficher le mot de passe » 20 → 40 px. */
#login-view .pwd-toggle { width: 40px; height: 40px; }
#login-view .pwd-show { display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 2px 0 0; }
#login-view .pwd-show input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* ---------- 3. Back-office (admin.html) ----------
   3a. DÉFAUT : `.admin-shell { display: grid !important }` (bloc P5,
   ≥ 1280 px) l'emporte sur `[hidden] { display: none !important }`
   (même poids, écrit plus tôt) : la coquille du back-office (barre
   latérale + en-tête vides) est rendue SOUS l'écran de connexion,
   page 900 → 1800 px, avant toute authentification. */
.admin-shell[hidden] { display: none !important; }

/* 3b. Barre latérale alignée sur la barre de navigation charbon :
   fond --nav-bg, liens crème --nav-ink-2, icônes et titres de groupe
   --nav-orange (comme les sous-menus), actif = CTA de la barre
   (--accent + texte charbon). Remplace le gris #b8b5ac d'admin.css et
   l'actif #c4551a/blanc de v5. Spécificité ≥ admin.css
   (`.admin-brand .logo-name span`, `:nth-child(n)::before`). */
.admin-side { background: var(--nav-bg); color: var(--nav-ink-2); border-right: 1px solid var(--nav-line); }
.admin-brand .logo-name span.logo-word { color: var(--nav-ink); }
.admin-brand .logo-name span.logo-dot, .admin-brand .logo-name span.logo-co { color: var(--nav-orange); }
.admin-badge { background: rgba(232, 137, 79, .14); color: var(--nav-orange); border-color: rgba(232, 137, 79, .35); }
.admin-navitem { color: var(--nav-ink-2); }
.admin-navitem .ni-ico { color: var(--nav-orange); }
.admin-navitem:hover, .admin-navitem:focus-visible { background: var(--nav-hover); color: var(--nav-ink); }
.admin-navitem.active { background: var(--accent); color: var(--nav-bg); font-weight: 600; }
.admin-navitem.active .ni-ico { color: currentColor; }
@media (min-width: 1280px) {
  .admin-nav .admin-navitem:nth-child(n)::before { color: var(--nav-orange); }
}
.admin-user b { color: var(--nav-ink); }
.admin-user small { color: var(--nav-ink-2); }
.admin-logout { color: var(--nav-ink-2); border-color: var(--nav-line); }
.admin-logout:hover { background: var(--nav-hover); color: var(--nav-ink); }

/* 3c. Écran de connexion : bouton 40 → 46 px ; sur mobile la carte
   (padding 34 px) ne laissait que 272 px au formulaire et dépassait
   l'écran (875 px) : 729 px, tient dans 844 px. */
.admin-login-card .btn-block { min-height: 46px; }
@media (max-width: 680px) {
  .admin-login { padding: 16px; }
  .admin-login-card { padding: 24px 20px; }
  .admin-secnote { margin-top: 18px; padding: 12px 14px; }
}

/* ---------- 4. Pages outils (simulateurs, comparateur) ----------
   Sections à 64 px haut et bas → 40 px max ; le premier bloc après le
   .page-header garde sa règle (30 px). Ciblage par :has() des blocs
   propres à chaque outil (pas de classe body dans le HTML). */
main:has(.sim-layout, #simulator, .aid-form, .compare-scroll) > .section { padding-bottom: clamp(24px, 3vw, 40px); }
main:has(.sim-layout, #simulator, .aid-form, .compare-scroll) > .section ~ .section { padding-top: clamp(24px, 3vw, 40px); }
main:has(.sim-layout, #simulator, .aid-form, .compare-scroll) .prose > h2:first-child { margin-top: 0; }
/* H1 « Simulateur charges & net : toutes entreprises » sur 2 lignes
   (max-width 26ch) : 1 ligne, en-tête 233 → 186 px. */
main:has(.sim-layout, #simulator, .aid-form, .compare-scroll) .page-header h1 { max-width: none; }

/* 4a. outils.html : 5 cartes sur 2 colonnes = 3 rangées (orphelin).
   3 colonnes dès 1024 px : 2 rangées, page 2047 → 1765 px, les 5 outils
   visibles au premier écran 1440×900. Grille identifiée par le lien
   « Simulateur d'aides » (seule .grid-2 du site à le contenir). */
@media (min-width: 1024px) {
  .grid-2:has(> .card > .card-link[href="/simulateur-aides"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
main:has(> .section > .container > .grid-2 > .card > .card-link[href="/simulateur-aides"]) > .section { padding-bottom: clamp(28px, 3.5vw, 44px); }
main:has(> .section > .container > .grid-2 > .card > .card-link[href="/simulateur-aides"]) > .section:last-child { padding-top: 0; }
main:has(> .section > .container > .grid-2 > .card > .card-link[href="/simulateur-aides"]) .price-note { margin-top: 18px !important; }

/* 4b. simulateur-charges.html : le champ « Charges d'exploitation »
   porte une aide sous son libellé, son input était 21 px plus bas que
   les trois autres. Alignement des champs par le bas. */
main:has(.sim-layout, .aid-form) .form-grid { align-items: end; }

/* 4c. simulateur-aides.html : 4 listes déroulantes en 1 colonne de
   674 px (.form-grid porte style="grid-template-columns:1fr", d'où le
   !important). 2 × 2 dès 680 px : formulaire 494 → 311 px, résultats
   visibles au premier écran. Résultats calés sur la largeur du
   formulaire (780 → 720 px). */
@media (min-width: 680px) {
  main:has(.aid-form) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 18px; }
}
main:has(.aid-form) #aid-results { max-width: 720px; }

/* 4d. comparateur-statuts.html : tableau 988 → 900 px (cellules
   14,4 → 11 px) ; 5 fiches statut en 3 colonnes dès 1024 px (2 rangées
   au lieu de 3). Page 4743 → 4143 px à 1440. */
.compare-scroll table.statuts td, .compare-scroll table.statuts th { padding: 11px 16px !important; }
@media (min-width: 1024px) {
  .grid-2:has(> .stat-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   SECTIONS « titre + un seul bloc » — hauteur réduite (23/08/2026)
   Cible générique : toute .section dont le container ne contient
   qu'un .section-head suivi d'un unique bloc (note, grille, carte).
   ============================================================ */
.section:has(> .container > .section-head + :last-child) { padding-block: clamp(20px, 2.6vw, 34px); }
.section:has(> .container > .section-head + :last-child) .section-head { margin-bottom: clamp(12px, 1.6vw, 18px); }
.section-head { max-width: 900px; }
.section-head .lead, .section-head p { max-width: 62ch; }
.section-head .eyebrow { margin-bottom: 10px; }
.cpt-note { padding: 18px 22px; }
.cpt-note p { margin-bottom: 10px; }

/* ============================================================
   SECTIONS À BLOC UNIQUE — hauteur réduite au maximum, partout (24/08/2026)
   Toute .section dont le container ne contient qu'un seul enfant direct
   (bande CTA, note, grille, engagements, zones...), avec ou sans titre.
   ============================================================ */
.section:has(> .container > :only-child),
.section:has(> .container > .section-head + :last-child) { padding-block: clamp(16px, 2vw, 28px); }
.section:has(> .container > .section-head + :last-child) .section-head { margin-bottom: clamp(10px, 1.4vw, 16px); }
/* Deux sections à bloc unique qui se suivent : pas de double marge, mais toujours une séparation minimale visible */
.section:has(> .container > :only-child) + .section:has(> .container > :only-child) { padding-top: clamp(14px, 1.8vw, 22px); }
.cta-band { padding-block: clamp(20px, 2.6vw, 30px) !important; }
@media (max-width: 767px) {
  .section:has(> .container > :only-child),
  .section:has(> .container > .section-head + :last-child) { padding-block: 14px; }
  .cta-band { padding-block: 18px !important; }
}

/* ============================================================
   ZONES (Outre-mer, accueil) — cartes lisibles, icônes de marque (24/08/2026)
   Avant : fond identique à la page (sable sur sable) + icône neutre non
   colorée → cartes presque invisibles. Aligné sur le traitement des
   cartes .engagement (fond blanc, icône accent, ombre légère).
   ============================================================ */
.zones { grid-template-columns: 1fr !important; gap: 12px; }
.zone { display: block; grid-template-columns: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px; }
.zone h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: .98rem; }
.zone h3 .e-ico, .zone > .e-ico { grid-column: auto; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--accent-soft); color: var(--secondary); border: 0; flex: none; box-sizing: border-box; }
.zone p { grid-column: auto; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }

/* ============================================================
   FAQ (accueil + pages tarifs/démarches) — cadre carte, cohérent
   avec kpi/engagement/zone ; callout consolidé (24/08/2026)
   ============================================================ */
.faq-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px 22px; border-top: 1px solid var(--border); }
details.faq-item:last-of-type { border-bottom: 0 !important; }
details.faq-item summary { border-radius: var(--radius-sm); transition: color .15s; }
details.faq-item summary:hover { color: var(--secondary); }
details.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .faq-list { padding: 2px 16px; } }

/* Callout (articles de blog) : composant unique, remplace les 17 copies
   inline identiques ; même traitement que .notice (bord plat côté accent,
   surface blanche dans la mise en page 2 colonnes des articles). */
.callout { background: var(--accent-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; margin: 22px 0; font-size: .95rem; line-height: 1.5; color: var(--text-soft); }
.callout strong { color: var(--text); }
.prose .callout, .article-body .callout { background: var(--surface); }

/* ── Filtre d'intention et appel à l'action unique — 25/08/2026 ───────────── */
.intent-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.intent-btn{font:inherit;font-size:.86rem;font-weight:500;padding:.45rem .95rem;
  border:1.5px solid var(--line,#e7ddd0);background:var(--paper,#fff);
  color:var(--body,#514b44);border-radius:999px;cursor:pointer;
  transition:border-color .15s,color .15s}
.intent-btn:hover{border-color:var(--soft,#7b746b)}
.intent-btn.on{border-color:#c4551a;color:#c4551a;background:#f8e7db}
.intent-btn:focus-visible{outline:2px solid #c4551a;outline-offset:2px}
.site-header .btn-primary{transition:opacity .18s ease}
body.hero-en-vue .site-header .btn-primary{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .intent-btn,.site-header .btn-primary{transition:none}}


/* ═══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE COMPACT — 25 août 2026
   Demande : la plus petite hauteur possible, sur tous les supports.

   Le mot décoratif « Mohna. » (.footer-bottom::before) montait jusqu'à 7 rem
   et ne portait aucune information : c'est le plus gros poste de hauteur, et
   le seul qu'on retire sans rien perdre.

   ⚠️ Cibler « .ftr-h », PAS « h4 » : les titres du pied de page sont des
   <h3 class="ftr-h"> sur les 65 pages qui en ont un. La règle
   « .site-footer h4 » de la ligne 175 ne s'applique à aucune page du site.

   Les cibles tactiles ne descendent pas sous 30 px : on ne resserre les
   liens qu'à la souris, où viser est précis (@media pointer: fine).
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-bottom::before { content: none !important; }

.site-footer { padding: 34px 0 14px !important; }
.footer-grid { gap: 24px 32px !important; padding: 0 0 18px !important; }
.site-footer .ftr-h, .site-footer h3, .site-footer h4 { margin-bottom: 8px !important; }
.site-footer ul { gap: 2px !important; }
.site-footer ul a { padding: 5px 0 !important; line-height: 1.3 !important; }
.site-footer .footer-grid > div > p { margin-top: 8px !important; line-height: 1.45 !important; }
.footer-bottom { padding: 10px 0 0 !important; margin-top: 0 !important; }

/* À la souris : viser est précis, on peut resserrer. */
@media (hover: hover) and (pointer: fine) {
  .site-footer ul a { padding: 2px 0 !important; }
}

/* Téléphone : logo et phrase en pleine largeur, les listes en deux colonnes. */
@media (max-width: 680px) {
  .site-footer { padding: 22px 0 10px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important;
                 gap: 14px 18px !important; padding-bottom: 12px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  .site-footer .footer-grid > div > p { max-width: none !important; }
  .footer-bottom { padding: 8px 0 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — TABLETTES ET TÉLÉPHONES · 25 août 2026, second passage
   Demande : contenu flexible, hauteur la plus faible possible.

   CE QUI COÛTAIT LA HAUTEUR
   La grille impose des rangées : chaque rangée prend la hauteur de son bloc
   le plus haut. Sur deux colonnes, « Démarches » (6 liens) était aligné sur
   « Mohna » (9 liens), et « Légal » (5 liens) occupait seule une rangée
   entière. Trois liens de vide, deux fois — 505 px mesurés à 480 px de large.

   CE QU'ON FAIT
   On abandonne la grille sous 900 px pour des COLONNES ÉQUILIBRÉES. Le
   navigateur répartit lui-même les quatre blocs pour que les colonnes
   finissent à la même hauteur : c'est lui qui décide, pas nous, et il décide
   mieux parce qu'il connaît la largeur réelle de l'écran. Hauteur cumulée des
   blocs ≈ 722 px ; sur deux colonnes, la plus haute devrait tomber vers
   350 px, soit environ un tiers de moins.

   « break-inside: avoid » garde chaque titre avec sa liste : sans lui, une
   colonne pourrait se terminer sur « Légal » et l'autre commencer sur ses
   liens, orphelins de leur titre.

   « min-width: 0 » corrige le débordement horizontal constaté sous 480 px :
   un enfant de grille refuse par défaut de descendre sous la largeur de son
   contenu, et « Politique de confidentialité » forçait la colonne à déborder.

   ⚠️ MESURE NON FAITE. Les hauteurs annoncées ci-dessus sont calculées, pas
   constatées : la fenêtre de contrôle n'a pas pu être réduite, et le site
   refuse d'être chargé dans un cadre. À vérifier sur un vrai téléphone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Téléphones : deux colonnes équilibrées ─────────────────────────────── */
@media (max-width: 599px) {
  .footer-grid {
    display: block !important;
    columns: 2;
    column-gap: 18px;
    padding-bottom: 12px !important;
  }
  .footer-grid > div {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    min-width: 0;
    margin: 0 0 14px !important;
  }
  .footer-grid > div:first-child { margin-bottom: 16px !important; }
  .site-footer .footer-grid > div > p {
    max-width: none !important;
    font-size: .8rem !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }
  .site-footer ul a { font-size: .82rem !important; }
  .site-footer .ftr-h { margin-bottom: 6px !important; }
}

/* ── Très petits écrans : une seule colonne pour le bloc d'introduction,
      qui sinon se retrouve écrasé sur 150 px de large. ─────────────────── */
@media (max-width: 359px) {
  .footer-grid { column-gap: 12px; }
  .site-footer ul a { font-size: .8rem !important; }
}

/* ── Tablettes : trois colonnes équilibrées, logo en bandeau ────────────── */
@media (min-width: 600px) and (max-width: 899px) {
  .footer-grid {
    display: block !important;
    columns: 3;
    column-gap: 22px;
    padding-bottom: 14px !important;
  }
  /* Le bloc logo + phrase passe en pleine largeur AU-DESSUS des colonnes.
     Mesuré à 768 px : 482 px en bandeau contre 500 px en colonne.
     ⚠️ L'inverse sur téléphone — voir la règle plus haut : en deux colonnes,
     le bandeau coûte 146 px de plus (778 contre 632), parce que la phrase
     s'étale sur toute la largeur au lieu de compter comme un bloc à
     équilibrer. La même idée aide ici et nuit là : d'où la mesure. */
  .footer-grid > div:first-child {
    column-span: all;
    margin-bottom: 14px !important;
  }
  .footer-grid > div {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    min-width: 0;
    margin: 0 0 12px !important;
  }
  .site-footer .footer-grid > div > p {
    max-width: none !important;
    font-size: .84rem !important;
    margin-top: 6px !important;
  }
}

/* ── Grands écrans : la grille reste, elle mesurait 416 px et convenait. ── */
@media (min-width: 900px) {
  .footer-grid > div { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOC FINANCEMENT & SUBVENTIONS — 25 août 2026

   Ce qui n'allait pas, et pourquoi :

   1. La grille était centrée sur 920 px quand le titre suivait le conteneur.
      Deux axes de lecture différents dans le même bloc : l'œil le voit, même
      sans savoir le nommer. La grille suit désormais le conteneur, comme le
      titre. C'est la correction qui se remarque le plus.

   2. La carte de gauche portait un bloc d'information, celle de droite deux :
      hauteurs inégales, et un vide en bas à gauche. On les a mises au même
      rythme — icône, titre, sous-titre, prix, deux conditions, action — et
      l'argument qui manquait à gauche existait déjà : « aucun honoraire de
      succès sur les prêts ». Il est vrai, il est différenciant, il comble.

   3. Le prix se lisait en corps de texte. On réemploie « .tp-big », la classe
      des neuf pages tarifs : le même chiffre se présente partout pareil.

   4. La note de bas de bloc était centrée sur toute la largeur et en gras.
      Deux lignes de 150 caractères en gras, personne ne les lit. Alignée à
      gauche, limitée à 78 caractères par ligne, poids normal.

   5. Cinq styles en ligne. Zéro désormais.
   ═══════════════════════════════════════════════════════════════════════════ */

.fin-duo { gap: 22px; align-items: stretch; }

.fin-card { display: flex; flex-direction: column; }

.fin-sous {
  font-size: .88rem;
  color: var(--text-soft);
  margin: 2px 0 0;
}

/* Le prix, détaché par un filet plutôt que par du vide : la séparation se
   lit même quand les deux cartes n'ont pas la même quantité de texte. */
.fin-prix {
  margin: 18px 0 0;
  padding: 16px 0 0;
  /* var(--border) et non une valeur en dur : elle est redéfinie pour le mode
     sombre et le mode contraste. Un filet écrit en rgba() serait resté clair
     sur fond sombre. */
  border-top: 1px solid var(--border);
}
.fin-des {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.fin-prix .tp-big { margin: 4px 0 6px; }
.fin-cond {
  font-size: .85rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
}

/* Les conditions : deux lignes, même nombre dans les deux cartes. */
.fin-liste {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
  font-size: .86rem;
  line-height: 1.45;
}
.fin-liste li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
}
.fin-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}
.fin-liste b { color: var(--text); font-weight: 600; }

/* « margin-top: auto » colle l'action en bas : les deux boutons s'alignent,
   quelle que soit la longueur du texte au-dessus. */
.fin-cta { margin-top: auto; align-self: flex-start; }
.fin-card .fin-cta { margin-top: 22px; }

.fin-note {
  margin: 22px 0 0;
  max-width: 78ch;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-soft);
  font-weight: 400;
}

/* Téléphone : une carte sous l'autre, et l'action prend toute la largeur —
   viser un bouton court au pouce est inconfortable. */
@media (max-width: 680px) {
  .fin-duo { gap: 16px; }
  .fin-cta { align-self: stretch; text-align: center; }
  .fin-cond { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHIFFRES TABULAIRES — TENTÉ LE 25 AOÛT 2026, SANS EFFET. NE PAS REFAIRE.

   La charte « Registre » demande des chiffres tabulaires pour que les montants
   s'alignent en colonne. C'est une bonne règle : par défaut le 1 est plus
   étroit que le 5, donc « 190 € » et « 500 € » ne tombent pas à la même
   largeur, et l'œil ne peut plus comparer deux prix — il doit les lire.

   J'ai écrit la règle, puis je l'ai MESURÉE dans le navigateur plutôt que de
   la supposer acquise. Résultat, sur le site en ligne :

       Inter               « 111 » 48,9 px · « 555 » 71,3 px → avec tnum : 0 d'écart
       Playfair Display    « 111 » 45,5 px · « 555 » 53,5 px → avec tnum : 7,9 d'écart

   PLAYFAIR DISPLAY NE PORTE PAS LA VARIANTE TABULAIRE. Ni « tabular-nums »,
   ni « font-feature-settings: tnum », ni la combinaison avec « lining-nums »,
   qui aggrave même l'écart à 17 px.

   Or TOUS les prix du site sont en Playfair : 10 sur 10 sur /tarifs,
   27 sur 27 dans le tunnel. Effet réel de la règle : AUCUN.

   La règle a donc été retirée. Une déclaration qui ne fait rien est pire
   qu'une absence : elle laisse croire que le sujet est traité.

   POUR ALIGNER VRAIMENT LES PRIX, il faudrait l'un des deux :
     · composer les chiffres des prix en Inter (change l'aspect des montants) ;
     · leur donner une largeur minimale et un alignement à droite en colonne
       (marche avec toute police, mais touche la mise en page).
   Les deux dépassent le cadre « sans toucher aux couleurs ni au contenu » :
   à arbitrer.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   ALIGNER LES MONTANTS DANS LES TABLEAUX — 25 août 2026

   Suite du constat ci-dessus : Playfair Display ne porte pas de chiffres
   tabulaires, donc « font-variant-numeric » n'y produit rien. Mesuré, pas
   supposé : « 111 » et « 555 » gardent 7,9 px d'écart, quelle que soit
   l'écriture de la propriété.

   OÙ LE PROBLÈME EXISTE VRAIMENT. Un prix seul dans une carte n'a personne
   avec qui s'aligner — sa police peut rester élégante. Un montant dans un
   TABLEAU, lui, se lit en colonne, contre ses voisins. Relevé sur le site :

       .compare     30 cellules   (tarifs)
       .fl-table    21 cellules   (article frais légaux — 33,83 · 19,33 · 174 · 9)
       .statuts      6 cellules   (comparateur de statuts)
       .cpt-table    6 cellules   (comptabilité)

   Dans l'article des frais légaux, vingt-et-un montants s'empilent, avec et
   sans décimales. C'est le cas d'école : sans chasse fixe, la virgule de
   « 33,83 » et celle de « 19,33 » ne tombent pas au même endroit, et l'œil
   ne peut plus balayer la colonne — il doit lire chaque ligne.

   CE QU'ON FAIT. Ces cellules-là passent en Inter, qui porte la variante
   tabulaire (écart mesuré : 22,4 px → 0). Les prix vedettes des cartes
   — .tp-big, .p-price — gardent Playfair : on compare dans un tableau,
   on annonce sur une carte.

   L'alignement horizontal n'est PAS touché : « text-align: left » est un
   choix de mise en page existant, et la chasse fixe suffit à aligner les
   chiffres entre eux. Un changement de moins.

   LA VRAIE RAISON, VUE À L'ÉCRAN. En comparant les deux versions côte à côte,
   le gain dépasse la question de la chasse : Playfair compose ses chiffres en
   STYLE ANCIEN — le 3, le 9, le 4 descendent sous la ligne de base, le 1 et le
   2 restent courts. C'est très beau dans une phrase, où les chiffres épousent
   le rythme des minuscules. Dans une colonne de montants à comparer, ça
   produit une ligne de crête irrégulière que l'œil ne peut pas suivre.

   MESURE À L'APPUI, sur « 33,83 € » et « 19,33 € » de l'article des frais
   légaux, texte mesuré au Range et non la cellule :
       avant  46,58 px et 44,63 px  →  1,95 px d'écart, virgules décalées
       après  56,17 px et 56,17 px  →  0
   ═══════════════════════════════════════════════════════════════════════════ */

.fl-table td.p,
.fl-table th.p,
table.compare .price,
.statuts td.num,
.cpt-table td.num,
.adm-table td.num {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LES PRIX ONT UNE SEULE COULEUR — 25 août 2026

   Relevé en ligne le jour même : les montants du site s'affichaient en SIX
   couleurs différentes selon la classe et la page. Le plus visible, sur
   /comptabilite : « 100 € » en noir et « HT / mois » en gris, quand le même
   prix ailleurs était orange en entier.

   Une seule règle désormais : chiffre, symbole et mention dans « --price-ink ».
   Cette variable vaut #ad4810 sur fond clair et #de6420 sur fond sombre — ce
   n'est pas une incohérence mais la condition de la lisibilité : mesuré,
   #ad4810 donne 4,87 : 1 sur le crème du site (niveau AA), là où #de6420
   tomberait à 3,03 : 1, insuffisant pour du texte courant.

   Le « small » compte autant que le chiffre : c'est lui qui portait le gris.
   ═══════════════════════════════════════════════════════════════════════════ */

.tp-big, .tp-big small,
.p-price, .p-price small,
.cpt-price, .cpt-price small,
.choice-price, .choice-price small,
.price, .price small,
.pr, .pr small,
.dj-price, .price-strong, .price-tag,
.p-foot .p-price, .p-foot .p-price small,
.cpt-table td.num, table.compare td.num,
table.compare .price, table.compare .price small {
  color: var(--price-ink) !important;
}

/* DEUX EXCEPTIONS, toutes deux voulues.

   1 · Sur un aplat sombre, le prix reste blanc : l'orange n'y passerait pas
       le contraste. C'est le cas du « à régler maintenant ».

   2 · LES DÉBOURS NE SONT PAS DES PRIX. « .legal-v » porte les frais légaux
       estimés — greffe, annonce légale, INPI. Ce ne sont pas vos honoraires :
       vous les avancez et les refacturez à l'euro. Le site le répète partout
       (« honoraires annoncés à part, débours refacturés au coût réel »), et
       la couleur doit dire la même chose que les mots. En orange, ils se
       confondraient avec vos prix. Ils gardent donc la couleur du texte. */
.pay-summary .pay-amount,
.pay-due .pay-amount {
  color: #fff !important;
}

.legal-v, .legal-table td:last-child, .fin-note .legal-v,
.fl-table td.p, .fl-table th.p,
table.compare td.deb,
.statuts td.num {
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — UNE SEULE STRUCTURE · 26 août 2026

   Relevé avant d'écrire : le pied de page existait en HUIT variantes sur les
   65 pages — de 9 à 22 liens, des colonnes qui changeaient de nom d'une page
   à l'autre (« Mohna » ici, « Blog » là, « Outils » ailleurs). Chaque
   modification devait viser huit cibles, et c'est ce qui a fait dérailler
   l'insertion de « À propos » et « Téléchargements » la veille.

   Une seule structure désormais, sur le modèle demandé : la marque et sa
   phrase à gauche, trois colonnes thématiques, un filet, puis une barre
   basse à deux blocs — l'identité à gauche, les mentions à droite.

   ⚠️ CE BLOC NE TOUCHE NI AU LOGO NI AUX COULEURS. Aucune déclaration
   « color », « background » ni « border-color » ici : elles restent celles
   de la maison. On ne règle que l'organisation — grille, rythme, capitales,
   espacements, points de bascule.

   AUCUN LIEN N'A ÉTÉ PERDU. Le modèle en compte cinq par colonne ; nous en
   gardons six à huit, parce que réduire aurait rendu « À propos » et
   « Téléchargements » de nouveau orphelines — elles ne sont atteignables
   que par ici.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.05fr;
  gap: 2rem 2.4rem;
  align-items: start;
  padding: 2.6rem 0 1.4rem;
}

/* La colonne de marque : logo, puis la phrase, sous une largeur de lecture. */
.site-footer .ftr-marque p {
  margin: .85rem 0 0;
  font-size: .86rem;
  line-height: 1.6;
  max-width: 30ch;
}

/* Les sur-titres : petites capitales espacées, comme le modèle. Le corps
   reste celui du site — on ne change que la casse et l'interlettrage. */
.site-footer .ftr-h {
  font-family: var(--font-body);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 1.05rem;
}

.site-footer .footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .62rem;
}
.site-footer .footer-grid li { margin: 0; }
.site-footer .footer-grid ul a {
  font-size: .875rem;
  line-height: 1.35;
  text-decoration: none;
  display: inline-block;
}

/* La barre basse : deux blocs qui s'écartent, séparés d'un filet. */
.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: .95rem 0 1.2rem;
  font-size: .74rem;
  letter-spacing: .01em;
}
.site-footer .footer-bottom a { text-decoration: none; }
.site-footer .ftr-legal { text-align: right; }

/* ⚠️ L'ADRESSE ET LE NUMÉRO NE SE COUPENT JAMAIS.
   Un navigateur coupe volontiers après un trait d'union : sans cette règle,
   « contact@mohna-consulting.com » se brise en « contact@mohna- » puis
   « consulting.com » dès que la ligne se resserre. Une adresse coupée en
   deux ne se recopie pas, ne se sélectionne pas d'un geste, et donne
   l'impression d'une faute de frappe.
   Le retour à la ligne reste possible AVANT le lien, jamais dedans : les
   séparateurs « · » sont précédés d'une espace insécable, ce qui offre au
   navigateur des points de coupure propres, entre les mentions. */
.site-footer .footer-bottom a,
.site-footer .ftr-id a,
.site-footer .ftr-legal a { white-space: nowrap; }

/* ── TOUS LES SUPPORTS ────────────────────────────────────────────────────
   Quatre paliers, choisis sur ce que le contenu supporte et non sur des
   largeurs d'appareils : la marque tient jusqu'à ce que les colonnes
   deviennent trop étroites pour un libellé comme « Créer une
   micro-entreprise », qui est le plus long du lot. */

/* Tablette en paysage : la marque passe en pleine largeur, trois colonnes. */
@media (max-width: 1080px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; }
  .site-footer .ftr-marque { grid-column: 1 / -1; }
  .site-footer .ftr-marque p { max-width: 46ch; }
}

/* Tablette en portrait : deux colonnes, le pied reste lisible d'un regard. */
@media (max-width: 767px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; padding: 2rem 0 1rem; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer .ftr-legal { text-align: left; }
}

/* Téléphone : une colonne. Les titres deviennent des dépliants — voir
   « js/nav.js », qui les rend cliquables. Sans cela, huit liens par
   colonne feraient un pied de page plus long que la page elle-même. */
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer .ftr-marque { margin-bottom: 1rem; }
  .site-footer .footer-bottom { font-size: .72rem; line-height: 1.7; }
}

/* Zones tactiles : sur écran tactile, un lien de pied de page doit rester
   attrapable au pouce. 44 px est le minimum retenu par les recommandations
   d'accessibilité, et c'est aussi ce que le site applique déjà ailleurs. */
@media (pointer: coarse) {
  .site-footer .footer-grid ul a,
  .site-footer .footer-bottom a { min-height: 34px; display: inline-flex; align-items: center; }
}

/* ── LA COULEUR DU PIED DE PAGE · 26 août 2026 ─────────────────────────────

   Relevé sur la page publiée avant d'y toucher : les sur-titres étaient en
   BLANC PUR (18,4 : 1) et les vingt-deux liens en ORANGE (7,1 : 1).
   L'accent portait donc le corps de texte, et les repères le blanc — soit
   l'inverse de ce qu'on attend. Quand vingt-deux liens sont orange, l'orange
   ne signale plus rien : il devient la couleur du texte courant.

   On échange les rôles. Trois sur-titres prennent l'accent — trois repères,
   c'est ce qu'un œil retient. Les liens redeviennent du texte, et ne
   s'allument qu'au survol, là où la couleur veut dire « celui-ci ».

   CONTRASTES MESURÉS sur le fond #141413 du pied :
     accent #de6420 . . . . . 5,22 : 1   (seuil AA texte normal : 4,5)
     texte clair #e9e7df  . . 15,9 : 1
   Les deux tiennent, y compris pour les sur-titres qui sont en petit corps. */

.site-footer .ftr-h {
  color: var(--accent) !important;
}

/* Les liens de colonnes redeviennent du texte. Le « !important » n'est pas
   un caprice : une règle générale « .site-footer a:not(.btn) » les force en
   orange avec la même arme, et il faut la contredire ici précisément. */
.site-footer .footer-grid ul a {
  color: var(--text-onDark) !important;
  transition: color .18s;
}
.site-footer .footer-grid ul a:hover,
.site-footer .footer-grid ul a:focus-visible {
  color: var(--accent) !important;
}

/* Le point de la marque, comme partout ailleurs sur le site. */
.site-footer .logo-dot { color: var(--accent); }

/* Un filet d'accent au-dessus du pied : il ferme la page au lieu de la
   laisser filer dans le noir. Deux pixels suffisent — au-delà, on lit une
   barre, pas une limite. */
.site-footer {
  border-top: 2px solid var(--accent);
}

/* La barre du bas garde son gris de mention légale : ce sont des liens
   d'obligation, pas d'invitation. Ils s'éclairent seulement au survol. */
.site-footer .footer-bottom a {
  color: inherit !important;
  transition: color .18s;
}
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible {
  color: var(--accent) !important;
}

/* Sur téléphone, le chevron des dépliants prend l'accent : c'est le seul
   élément qui dit « ceci s'ouvre ». */
@media (max-width: 560px) {
  .site-footer .foot-acc > h3::after,
  .site-footer .foot-acc > h4::after { color: var(--accent); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PAGES LÉGALES : ON N'Y LIT PAS, ON Y CHERCHE · 26 août 2026

   Mesuré sur les cinq pages avant d'écrire : CGV 1 315 mots et onze articles,
   confidentialité 554 mots et dix sections — et pas une seule ancre, pas un
   seul sommaire. Or personne ne lit des CGV d'un bout à l'autre : on y
   cherche une clause, souvent parce qu'un désaccord a commencé. Sans ancre,
   impossible d'écrire à un client « voyez l'article 7 » avec un lien.

   ⚠️ CE CSS SOUFFRE DÉJÀ D'ACCUMULATION. Relevé le même jour : ONZE règles
   de marge se disputent le « h2 » de ces pages, réparties sur trois feuilles.
   On n'en ajoute donc pas une douzième — la marge est bonne (30 px, vérifié)
   et on n'y touche pas. Ce bloc n'ajoute QUE ce qui manquait : le sommaire,
   la colonne de lecture, l'impression.

   FAUSSE PISTE ÉCARTÉE : le premier h2 affiche « margin-top: 0 ». Ce n'est
   pas un défaut mais le comportement voulu d'un premier enfant ; les dix
   autres ont bien leurs 30 px. Mesurer un seul élément m'avait fait conclure
   à un défaut qui n'existait pas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · LE SOMMAIRE, construit par v5-ux.js à partir des titres réels. */
.legal-page .legal-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem .9rem;
  margin: 1.6rem 0 2.2rem;
}
.legal-page .legal-toc-t {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 .6rem;
}
.legal-page .legal-toc ol {
  margin: 0;
  padding-left: 1.3rem;
  display: grid;
  gap: .3rem;
}
.legal-page .legal-toc li::marker { color: var(--secondary); font-weight: 700; }
.legal-page .legal-toc a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: .93rem;
}
.legal-page .legal-toc a:hover,
.legal-page .legal-toc a:focus-visible {
  color: var(--secondary);
  border-bottom-color: currentColor;
}
/* Un titre atteint par le sommaire ne doit pas se coller sous l'en-tête
   collant du site, sinon on arrive « avant » la clause qu'on cherchait. */
.legal-page .prose h2[id] { scroll-margin-top: 96px; }

/* 2 · LA COLONNE DE LECTURE. Mesuré : 78 caractères par ligne, jusqu'à 84 sur
      grand écran. La plage confortable en lecture suivie est 60 à 75 ; au-delà,
      l'œil peine à retrouver le début de la ligne suivante — ce qui compte
      doublement dans un texte qu'on relit ligne à ligne.

   ⚠️ « ch » N'EST PAS UN CARACTÈRE, et c'est un piège à deux étages.

   Premier étage : « ch » vaut la largeur du chiffre ZÉRO, plus large que les
   minuscules. Mesuré dans la page, en Inter : 1ch = 10,13 px quand un
   caractère de texte français courant vaut 7,50 px. « 68ch » donnait donc
   585 px, soit SOIXANTE-DIX-HUIT caractères lus — la règle s'appliquait
   parfaitement et manquait sa cible de treize caractères.

   Second étage, et c'est le plus instructif : ma première mesure de ce
   rapport annonçait 1,18, obtenue en interrogeant un « canvas ». Or le
   canvas n'utilisait pas Inter mais une police de repli : l'instrument
   mesurait autre chose que ce que l'écran affiche. Le rapport réel est
   1,35 — vérifié en posant une sonde DANS le paragraphe, avec sa police.
   Une mesure faite à côté du rendu ne vaut pas mieux qu'une estimation.

   D'où une valeur en « rem », qui ne dépend d'aucune police : 32rem = 512 px.
   Vérifié sur la page publiée avant d'être écrit ici — 30rem donnait 64
   caractères, 34rem en donnait 73, 32rem en donne 68, au milieu de la plage
   confortable de 60 à 75. */
.legal-page .prose > p,
.legal-page .prose > ul,
.legal-page .prose > ol { max-width: 32rem; }

/* 3 · LA DATE DE MISE À JOUR. Elle existait, en gris pâle. Sur un document
      contractuel, savoir DE QUAND date le texte n'est pas un détail : c'est
      la première chose que vérifie quiconque conteste. */
.legal-page .legal-meta {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--secondary);
  font-weight: 600;
  font-size: .84rem;
  padding: .35rem .85rem;
  border-radius: 999px;
}

/* 4 · L'IMPRESSION. Des CGV s'impriment et se classent. Sans cette feuille,
      la page sort avec sa navigation, son pied de page et ses boutons, et
      les liens y perdent leur destination. */
@media print {
  .site-header, .site-footer, .breadcrumb, .mobile-actionbar,
  .to-top, .cookie-banner, .mohna-chat-btn, .wa-fab,
  .legal-page .article-cta, .legal-page .cta-band { display: none !important; }
  .legal-page .prose > p,
  .legal-page .prose > ul,
  .legal-page .prose > ol { max-width: none; }
  .legal-page .legal-toc { border: 1px solid #999; break-inside: avoid; }
  .legal-page .prose h2 { break-after: avoid; }
  /* Un lien imprimé sans son adresse est un lien perdu. */
  .legal-page .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  body { background: #fff; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLUS D'ORANGE — MAIS HORS DU TEXTE · 26 août 2026

   Relevé avant d'écrire une ligne : sur l'accueil, 32 % des éléments de texte
   portaient DÉJÀ l'accent — prix, sur-titres, liens de cartes, numéros
   d'étapes. En ajouter sur du texte aurait rendu l'orange moins visible, pas
   plus : passé un certain seuil, un accent cesse d'accentuer.

   Ce qui était resté entièrement neutre, en revanche : les puces de listes
   (gris #494640), les bordures de cartes (beige #e3e0d5), les fonds de
   section (blanc). C'est là que la couleur avait de la place — sur les
   marqueurs, les filets et les aplats, jamais sur les mots.

   CONTRASTE, MESURÉ : les marqueurs prennent --secondary (#ad4810) et non
   --accent (#de6420). Sur le crème du site, #de6420 tombe à 3,03 : 1, sous
   le seuil de 3 : 1 exigé pour un élément graphique dès que le fond change ;
   #ad4810 tient 4,87 : 1 sur crème et 5,4 : 1 sur blanc. La nuance ne se voit
   pas, l'écart de lisibilité si.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · LES PUCES — le geste le plus rentable : il rythme chaque liste du site
      sans toucher un seul mot. « ::marker » n'accepte que la couleur et la
      typographie ; un navigateur qui l'ignore garde simplement le gris. */
.prose li::marker,
.section li::marker,
main ul li::marker,
main ol li::marker {
  color: var(--secondary);
  font-weight: 700;
}

/* 2 · LES CARTES — un filet de 3 px en haut. Écrit en ombre interne plutôt
      qu'en bordure : une bordure de 3 px décalerait le contenu de 2 px et
      romprait l'alignement des grilles, l'ombre suit le rayon sans rien
      déplacer. Au survol, la bordure entière prend l'accent. */
.card {
  box-shadow: inset 0 3px 0 var(--accent), var(--shadow-sm);
}
.card:hover {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent), var(--shadow-md);
}

/* 3 · LES SECTIONS ALTERNÉES — le blanc devient crème orangé. C'est le
      changement le plus visible du lot : il colore les longues pages sans
      rien ajouter à l'écran. Le texte y garde tout son contraste (#141413
      sur #f8e7db : 15,9 : 1), et les cartes blanches ressortent mieux
      qu'auparavant, où elles étaient blanches sur blanc. */
.section-alt {
  background: var(--accent-soft);
}

/* 4 · LES INTERTITRES DE CONTENU — un filet vertical, pour donner des points
      d'accroche dans les pages longues. Le titre reste noir : c'est la
      hiérarchie qui prime, la couleur ne fait que la signaler.

   ⚠️ PREMIÈRE VERSION MORTE-NÉE, corrigée le 26/08/2026 après mesure.
   Elle visait « .prose h3, article h3 ». Or « .prose » n'existe que sur 15
   pages, « article » sur 12, et les articles du blog n'utilisent NI L'UN NI
   L'AUTRE : leurs intertitres sont des h2 posés dans un « .container ».
   Sur la page d'un article, la règle touchait exactement zéro élément —
   publiée, invisible, et réputée faite. Le même piège que les chiffres
   tabulaires du 25/08.

   Le sélecteur retenu vise l'enfant DIRECT d'un « .container » : c'est ce qui
   distingue un intertitre éditorial d'un titre de section — lequel vit dans
   « .section-head » et porte déjà son trait — ou d'un titre de carte.
   Mesuré sur un article : 5 intertitres visés, 0 titre de section touché,
   0 titre de carte touché. */
main .container > h2,
main .container > h3 {
  position: relative;
  padding-left: .85rem;
}
main .container > h2::before,
main .container > h3::before {
  content: "";
  position: absolute;
  left: 0; top: .15em; bottom: .15em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* 5 · LES CHIFFRES-CLÉS — la valeur d'un indicateur est une information, pas
      une décoration : elle mérite l'accent, son libellé reste sobre. */
.kpi-value { color: var(--secondary); }
.kpi { border-top: 3px solid var(--accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   LE LOGO DU PIED DE PAGE EST UN LIEN — 26 août 2026

   Il était un « div » : le seul logo du site sur lequel on ne pouvait pas
   cliquer. Celui de l'en-tête ramène à l'accueil depuis toujours ; en bas de
   page, après avoir lu, le geste est au moins aussi naturel.

   ⚠️ LA BALISE NE SUFFIT PAS. « .footer-logo » porte une largeur, une hauteur
   et une image de fond : sur un « a », qui est « inline » par défaut, largeur
   et hauteur sont ignorées et le logo disparaîtrait. D'où le « inline-block »
   ci-dessous — sans lui, la correction se serait retournée en régression.

   Le texte du logo est repoussé hors écran par « text-indent », donc invisible :
   le lien reçoit un « aria-label » pour que le lecteur d'écran l'annonce, et
   un contour au clavier pour qu'on sache où l'on est. */
a.footer-logo {
  display: inline-block;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: opacity .2s;
}
a.footer-logo:hover { opacity: .82; }
a.footer-logo:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }


/* ── 26/08/2026 · LE FILET, PARCE QUE LA COULEUR N'EST PAS QU'AFFAIRE DE CSS

   « js/icons.js » parcourt le texte de chaque page et enveloppe tout montant
   dans un « span.dj-price » — lequel figure dans la liste orange ci-dessus.
   Résultat sur /tarifs : la cellule « ≈ 400 à 500 € » restait neutre, mais le
   « 500 € » qu'elle contenait passait en orange. Un débours prenait la couleur
   d'un honoraire, sous l'œil d'un contrôle qui déclarait la page conforme.

   Le contrôle lisait la feuille de style ; l'orange était fabriqué à
   l'exécution. La cause est corrigée dans icons.js, qui ne balaie plus ces
   zones. Cette règle-ci reste le filet : elle protège les pages encore
   servies par un ancien cache, et le jour où un autre script fera pareil.

   Règle générale : dans une zone de débours, AUCUN descendant ne prend la
   couleur des prix. */
td.deb .dj-price,
.legal-v .dj-price,
.legal-table td:last-child .dj-price,
.fl-table td.p .dj-price,
.fl-table th.p .dj-price,
.statuts td.num .dj-price {
  color: var(--text) !important;
}

/* ============================================================
   CARTES « SOUVENT CHOISIS ENSEMBLE » (.tp-xs) — cartes lisibles
   sur fond blanc, cohérent avec .engagement/.zone (28/08/2026)
   Avant : fond blanc sur section blanche, aucune ombre au repos,
   uniquement un liseré 1px → cartes plates, quasi invisibles
   jusqu'au survol (l'effet visible sur une capture au survol).
   ============================================================ */
a.tp-xs { background: var(--surface); box-shadow: var(--shadow-sm); }
a.tp-xs:hover { border-color: var(--accent); box-shadow: var(--v5-shadow-warm, var(--shadow-md)); }
.tp-xsell { gap: 16px; }

/* ============================================================
   02/09/2026 — CARTES « SOUVENT CHOISIS ENSEMBLE » (.tp-xs)
   Correction d'un bug de mise en page, puis reprise du dessin.

   Le bug : la règle d'accessibilité « cible tactile 40 px » plus
   haut dans ce fichier applique display:inline-flex + align-items
   à .tp-xs. Elle écrasait le display:block de modern.css, si bien
   que les quatre enfants de la carte (étiquette, titre, description,
   prix) s'alignaient HORIZONTALEMENT : titre écrasé sur trois
   lignes, prix collé au texte, carte illisible.

   Le correctif rétablit une colonne, garde la hauteur de cible
   tactile, et pousse le prix en bas pour que les cartes d'une même
   rangée s'alignent quelle que soit la longueur du texte.
   ============================================================ */
.tp-xsell { align-items: stretch; }

a.tp-xs,
.tp-xs {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
  height: 100%;
  padding: 18px 20px 16px !important;
  border-radius: 12px;
  gap: 0;
}

.tp-xs .tg {
  display: inline-block;
  background: var(--accent-soft, #f8e7db);
  color: var(--secondary, #ad4810);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 10px;
  letter-spacing: .12em;
}

.tp-xs b {
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0 0 6px !important;
}

/* la description occupe l'espace libre : le prix reste en bas, aligné d'une carte à l'autre */
.tp-xs p { flex: 1 1 auto; margin: 0 0 12px !important; }

.tp-xs .pr {
  margin: 0 !important;
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid var(--border, #e7ddd0);
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* la flèche naît du survol : elle indique que la carte est cliquable sans alourdir le repos */
.tp-xs .pr::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
  opacity: .45;
  transform: translateX(-3px);
  transition: transform .18s ease, opacity .18s ease;
}
.tp-xs:hover .pr::after { opacity: 1; transform: translateX(0); }

@media (max-width: 720px) {
  .tp-xs { padding: 16px 18px 14px !important; }
  .tp-xs b { font-size: 1rem; }
}

/* ============================================================================
   02/09/2026 — page « conformité facture électronique ».
   La page était juste : bon contenu, bonne typographie, mais entièrement plate —
   huit sections claires à la suite, aucun point d'ancrage pour l'œil, et le seul
   endroit qui aurait dû arrêter le lecteur (le calendrier légal) était traité en
   texte courant. Trois composants sont ajoutés, réutilisables sur les autres
   pages tarifaires : une frise de calendrier claire, des cartes de forfait avec
   un choix mis en avant, et une section sombre pour le moment fort de la page.
   ========================================================================== */

/* --- Frise de calendrier, version claire (le pendant du bandeau de la home) --- */
.tf-frise{margin:22px 0 8px}
.tf-rail{position:relative;height:3px;border-radius:99px;background:var(--border,#e7ddd0);margin:30px 0 48px}
.tf-rail i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#de6420,#ff9a52);transition:width 1.6s cubic-bezier(.22,1,.36,1)}
.tf-pt{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--bg,#fdfaf6);border:2px solid var(--border,#d9cec0)}
.tf-pt.done{background:#de6420;border-color:#de6420}
.tf-pt .cap{position:absolute;top:16px;bottom:auto;width:max-content;max-width:46vw;white-space:normal;line-height:1.35;font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted,#7b746b)}
.tf-pt .cap b{color:var(--text,#1c1917);font-weight:700}
.tf-pt.done .cap b{color:#ad4810}
.tf-pt.first .cap{left:-7px}
.tf-pt.last .cap{right:-7px;text-align:right}
.tf-now{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#1c1917;box-shadow:0 0 0 0 rgba(28,25,23,.4);animation:tf-ping 2.4s ease-out infinite;
  transition:left 1.6s cubic-bezier(.22,1,.36,1);left:0;z-index:2}
.tf-now::after{content:"aujourd'hui";position:absolute;left:50%;transform:translateX(-50%);top:auto;bottom:14px;
  font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text,#1c1917);white-space:nowrap;font-weight:700}
.tf-now.at-start::after{left:-2px;transform:none}
.tf-now.at-end::after{left:auto;right:-2px;transform:none}
@keyframes tf-ping{0%{box-shadow:0 0 0 0 rgba(196,85,26,.45)}70%{box-shadow:0 0 0 10px rgba(196,85,26,0)}100%{box-shadow:0 0 0 0 rgba(196,85,26,0)}}
.tf-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:8px}
.tf-d{background:var(--surface,#fff);border:1px solid var(--border,#e7ddd0);border-radius:12px;padding:18px 20px}
.tf-d.now{border-color:#de6420;box-shadow:0 6px 18px -12px rgba(222,100,32,.6)}
.tf-d .k{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono,'IBM Plex Mono',monospace);
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:#ad4810;font-weight:700;margin-bottom:.5rem}
.tf-d .k .st{background:#de6420;color:#fff;border-radius:999px;padding:.1rem .5rem;font-size:.58rem;letter-spacing:.07em}
.tf-d:not(.now) .k{color:var(--muted,#7b746b)}
.tf-d:not(.now) .k .st{background:var(--border,#e7ddd0);color:#514b44}
.tf-d h3{font-family:var(--font-head);font-size:1.14rem;margin:0 0 .45rem;color:var(--text,#1c1917)}
.tf-d p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted,#5f584f)}

/* --- Cartes de forfait : un tableau ne fait pas choisir, des cartes si ------- */
.tf-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin:28px 0 10px;align-items:stretch}
.tf-p{position:relative;display:flex;flex-direction:column;background:var(--surface,#fff);
  border:1px solid var(--border,#e7ddd0);border-radius:14px;padding:22px 22px 20px;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tf-p:hover{transform:translateY(-4px);border-color:#de6420;box-shadow:0 16px 34px -20px rgba(60,25,0,.55);color:inherit}
.tf-p.reco{border-color:#de6420;border-width:1.5px;box-shadow:0 14px 30px -20px rgba(222,100,32,.75)}
.tf-p .flag{position:absolute;top:-11px;left:22px;background:#de6420;color:#fff;border-radius:999px;
  padding:.22rem .7rem;font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.tf-p .who{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#ad4810;font-weight:700;margin-bottom:.5rem}
.tf-p h3{font-family:var(--font-head);font-size:1.2rem;line-height:1.25;margin:0 0 .5rem;color:var(--text,#1c1917)}
.tf-p .pr{display:flex;align-items:baseline;gap:.4rem;margin:0 0 .7rem}
.tf-p .pr .n{font-family:var(--font-head);font-size:1.85rem;line-height:1;color:#c4551a;font-weight:700}
.tf-p .pr .u{font-size:.78rem;color:var(--muted,#7b746b)}
.tf-p ul{list-style:none;padding:0;margin:0 0 1rem;flex:1 1 auto}
.tf-p li{position:relative;padding-left:1.15rem;margin-bottom:.42rem;font-size:.875rem;line-height:1.5;color:var(--muted,#5f584f)}
.tf-p li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:#de6420;opacity:.55}
.tf-p .go{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border,#e7ddd0);
  padding-top:.75rem;font-weight:700;font-size:.9rem;color:#c4551a}
.tf-p .go::after{content:"→";transition:transform .18s ease}
.tf-p:hover .go::after{transform:translateX(4px)}

/* --- Le moment sombre de la page : un seul, sinon il ne veut plus rien dire -- */
.tf-dark{background:radial-gradient(120% 150% at 100% 0%,#3b2617 0%,#241f1b 55%,#1c1917 100%);
  color:#e8e3db;position:relative;overflow:hidden}
.tf-dark::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,#8a3c0c,#de6420,#ffb47a,#de6420,#8a3c0c)}
.tf-dark .eyebrow{color:#e8956a}
.tf-dark h2,.tf-dark h3{color:#fff}
.tf-dark p{color:#c3bcb2}
.tf-dark p b,.tf-dark b{color:#fff}
.tf-dark .tp-pull{background:rgba(255,255,255,.055);border-left-color:#de6420;color:#e8e3db;border-radius:0 10px 10px 0}
.tf-dark .tp-pull .price-note{color:#a8a099}
.tf-dark .tp-pull .price-note b{color:#ffb47a}
.tf-dark .tf-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;background:linear-gradient(135deg,#e8702a,#c4551a);
  color:#fff;border-radius:10px;padding:.8rem 1.25rem;font-weight:700;text-decoration:none;font-size:.93rem;
  box-shadow:0 8px 20px -8px rgba(222,100,32,.85);transition:transform .18s ease,box-shadow .18s ease}
.tf-dark .tf-cta:hover{transform:translateY(-2px);color:#fff;box-shadow:0 14px 26px -8px rgba(222,100,32,.95)}

/* --- Rappel d'action à mi-page ---------------------------------------------- */
.tf-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;
  background:linear-gradient(120deg,#f8e7db,#fdf3ea);border:1px solid #e0b193;border-radius:14px;padding:20px 24px;margin-top:30px}
.tf-mid p{margin:0;font-size:.95rem;color:#514b44;max-width:60ch}
.tf-mid p b{color:#1c1917}

@media (max-width:560px){
  .tf-pt .cap{letter-spacing:.06em;max-width:42vw}
  .tf-pt .cap b{display:block}
  .tf-rail{margin-bottom:54px}
  .tf-mid{padding:16px 18px}
  .tf-p{padding:20px 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  .tf-rail i,.tf-now{transition:none}
  .tf-now,.tf-dark::before{animation:none}
  .tf-p:hover,.tf-dark .tf-cta:hover{transform:none}
}

/* --- 02/09/2026 — page Expertises : repères du hero et sommaire des pôles ---------- */
.sv-reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:1.6rem;max-width:760px}
.sv-r{background:var(--surface,#fff);border:1px solid var(--border,#e7ddd0);border-radius:12px;padding:14px 16px;
  border-top:3px solid #de6420}
.sv-r b{display:block;font-family:var(--font-head);font-size:1.5rem;line-height:1;color:#c4551a;margin-bottom:.35rem}
.sv-r span{font-size:.82rem;line-height:1.4;color:var(--muted,#5f584f)}
.sv-poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.sv-p{position:relative;display:flex;flex-direction:column;background:var(--surface,#fff);border:1px solid var(--border,#e7ddd0);
  border-radius:14px;padding:22px 22px 18px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.sv-p::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#de6420,#ffb47a);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sv-p:hover{transform:translateY(-4px);border-color:#de6420;box-shadow:0 16px 34px -20px rgba(60,25,0,.55);color:inherit}
.sv-p:hover::before{transform:scaleX(1)}
.sv-p .n{font-family:var(--font-head);font-size:2rem;line-height:1;color:#de6420;opacity:.55;margin-bottom:.6rem}
.sv-p .t{font-family:var(--font-head);font-size:1.35rem;color:var(--text,#1c1917);margin-bottom:.45rem}
.sv-p .d{font-size:.9rem;line-height:1.55;color:var(--muted,#5f584f);flex:1 1 auto;margin-bottom:1rem}
.sv-p .go{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border,#e7ddd0);
  padding-top:.7rem;font-weight:700;font-size:.88rem;color:#c4551a}
.sv-p .go::after{content:"↓";transition:transform .18s ease}
.sv-p:hover .go::after{transform:translateY(3px)}
@media (prefers-reduced-motion:reduce){.sv-p,.sv-p::before,.sv-p .go::after{transition:none}.sv-p:hover{transform:none}}

/* ============================================================================
   02/09/2026 — Responsive : plancher de lisibilité et cibles tactiles.
   Mesuré sur 6 pages à 375 px : aucun débordement horizontal, mais deux défauts
   uniformes sur tout le site — des micro-libellés sous 11,5 px (surtitres en
   capitales espacées, badges, titres du pied de page, barre d'action mobile) et
   des liens de pied de page de 34 px de haut, sous le minimum tactile de 40 px.
   Les règles ci-dessous sont globales : elles corrigent les 75 pages d'un coup.
   ========================================================================== */
@media (max-width: 767px) {
  /* Aucun texte lu sous 12 px sur un écran tenu à bout de bras. Les surtitres en
     capitales espacées se lisent encore moins bien que leur taille ne l'indique :
     on relâche aussi l'espacement des lettres. */
  .eyebrow, .fe-eb, .fe-date .k, .tf-d .k, .tf-p .who, .tf-p .flag, .tf-pt .cap, .fe-pt .cap,
  .fe-compte .l, .tf-d .k .st, .p-tag, .legal-badge, .fe-badge, .fe-jours, .tp-lab, .tp-step .d,
  .site-footer h3.ftr-h, .card-pole, small, .tp-micro, .sv-p .go, .tf-p .go, .fe-jauge-lg {
    font-size: max(.75rem, 12px) !important;
    letter-spacing: .08em;
  }
  .mobile-actionbar .ab-tx { font-size: 11px !important; }   /* 5 libellés sur 375 px : 11 px est le maximum tenable */
  .fe-now::after { font-size: 11px; }
  .fe-eb { letter-spacing: .1em; line-height: 1.4; }

  /* Cibles tactiles : 44 px pour les listes de liens (pied de page, sous-menus mobiles).
     On agrandit la zone cliquable sans agrandir le texte. */
  .site-footer ul li a, .main-nav li a:not(.btn), .breadcrumb a {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: 2px;
  }
  .site-footer ul li { margin: 0 !important; }
  .breadcrumb ol { row-gap: 0; }

  /* Les champs de formulaire : 16 px minimum pour éviter le zoom automatique d'iOS,
     et 48 px de haut pour le pouce. */
  input:not([type=radio]):not([type=checkbox]):not([type=hidden]), select, textarea {
    font-size: max(1rem, 16px) !important; min-height: 48px;
  }
  textarea { min-height: 120px; }
  /* Boutons : jamais plus étroits que le pouce. */
  .btn { min-height: 44px; }
  /* Tableaux : défilement horizontal à l'intérieur de leur conteneur, jamais de la page. */
  .table-wrap, .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap { padding-bottom: 10px; }   /* une barre de défilement classique ne masque pas la dernière ligne */
  table.compare { min-width: 560px; }
}