/* Fichier généré par tools/build-css.sh : ne pas modifier, éditer les sources. */
/* ---- css/style.css ---- */
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2')}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2')}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2')}@font-face{font-family:Lora;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lora-latin-400-normal.woff2') format('woff2')}@font-face{font-family:Lora;font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lora-latin-500-normal.woff2') format('woff2')}@font-face{font-family:Lora;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/lora-latin-600-normal.woff2') format('woff2')}@font-face{font-family:Lora;font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/lora-latin-400-italic.woff2') format('woff2')}:root{--primary:#0c2d57;--primary-dark:#071e3d;--pill:#071e3d;--pill-2:#071e3d;--slate:#33414f;--secondary:#b8430f;--accent:#cf4a12;--accent-hover:#b8430f;--accent-soft:#eaf2fb;--bg:#fafbfd;--surface:#FFFFFF;--text:#0c2d57;--text-soft:#44515f;--border:#e2e8f0;--text-onDark:#e9eff5;--success:#0f6b4f;--radius:18px;--radius-sm:12px;--shadow-sm:0 1px 2px rgba(10,10,10,.04),0 4px 12px rgba(10,10,10,.04);--shadow-md:0 2px 6px rgba(10,10,10,.05),0 16px 40px rgba(10,10,10,.08);--font-head:'Playfair Display',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;--price-ink:#b8430f;--action:#0f4c8a;--action-hover:#0c2d57;--link:#0f4c8a;--link-hover:#0c2d57;--accent-surface:#b8430f;--brand-logo:#cf4a12}*,::after,::before{box-sizing:border-box}fieldset{border:none;padding:0;margin:0}legend{padding:0}[hidden]{display:none!important}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;font-family:var(--font-body);font-size:1.06rem;line-height:1.75;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;animation:.35s both page-in}h1,h2,h3,h4{font-family:var(--font-head);line-height:1.08;color:var(--primary);text-wrap:balance;margin:0 0 .55em;font-weight:700;letter-spacing:-.025em}h1{font-size:clamp(2.4rem, 5.4vw, 4rem)}h2{font-size:clamp(1.8rem, 3.6vw, 2.7rem)}h3{font-size:1.22rem;letter-spacing:-.01em}p{text-wrap:pretty;margin:0 0 1em}a{color:var(--link)}img{max-width:100%;height:auto}em{font-style:normal;color:var(--accent)}.container{width:min(1140px,92%);margin-inline:auto}.section{padding:clamp(2rem,4vw,3.4rem) 0}.section-alt{background:var(--surface);border-block:1px solid var(--border)}.section-head{max-width:680px;margin:0 auto 2.2rem;text-align:center}.section-head::after{content:"";display:block;width:40px;height:3px;border-radius:2px;background:var(--accent);margin:1.5rem auto 0}.eyebrow{display:inline-block;font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary);margin-bottom:1rem}.lead{font-size:1.15rem;color:var(--text-soft)}.skip-link{position:absolute;left:-999px;top:0;background:var(--pill);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 var(--radius-sm) 0}.skip-link:focus{left:0}@media (prefers-reduced-motion:reduce){*,::after,::before{animation:none!important;transition:none!important}html{scroll-behavior:auto}}.site-header{position:sticky;top:0;z-index:100;background:rgba(246,243,238,.66);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-bottom:none}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(rgba(12,45,87,.06),transparent);pointer-events:none}.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px}.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}.logo-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:url("../logo-mark.svg") center/contain no-repeat;border:0;box-shadow:none;color:transparent;text-indent:-9999px;overflow:hidden;font-family:var(--font-head);font-weight:700;font-size:1.2rem;flex:0 0 auto}.logo-name{font-family:var(--font-head);display:inline-flex;flex-direction:column;line-height:1.02;letter-spacing:-.02em}.logo-word{font-weight:700;font-size:1.3rem;color:var(--primary)}.logo-word .logo-dot{color:var(--brand-logo)}.logo-co{font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--brand-logo);margin-top:2px}.footer-logo .logo-word{color:#fff}.footer-logo .logo-co{color:var(--brand-logo)}.footer-logo .logo-mark{box-shadow:none}.main-nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;align-items:center}.main-nav a{text-decoration:none;color:var(--text);font-weight:500;font-size:.93rem;padding:.4rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.main-nav a:hover{color:var(--secondary)}.main-nav a[aria-current=page]{color:var(--secondary);border-bottom-color:var(--accent)}.main-nav a.btn{padding:.6rem 1.4rem;border-bottom:2px solid transparent}.main-nav a.btn,.main-nav a.btn[aria-current=page]{color:var(--primary);border-bottom-color:transparent}.main-nav a.btn-primary,.main-nav a.btn-primary[aria-current=page]{color:#fff}.nav-toggle{display:none;background:0 0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.55rem .7rem;cursor:pointer;color:var(--primary)}.btn{display:inline-block;text-decoration:none;text-align:center;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:.97rem;letter-spacing:0;padding:.85rem 1.8rem;border-radius:999px;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background-color .2s,color .2s}.btn:active{transform:scale(.96)}.btn-primary{background:var(--action);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--action-hover);box-shadow:0 6px 20px rgba(18,57,94,.32);transform:translateY(-1px)}.btn-outline{border-color:var(--primary);color:var(--primary);background:0 0}.btn-outline:hover{background:var(--pill);color:#fff}.btn-light{background:#f1f1f3;color:var(--primary)}.btn-light:hover{background:var(--accent-soft);color:var(--secondary)}.btn-dark{background:var(--pill);color:#fff}.btn-dark:hover{background:var(--slate)}.btn-lg{padding:1rem 2.3rem;font-size:1.05rem}.hero{background:var(--surface);color:var(--text);padding:clamp(3rem,6vw,5.5rem) 0;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(10,10,10,.055) 1.5px,transparent 1.5px);background-size:26px 26px;mask-image:radial-gradient(ellipse 68% 90% at 82% 12%,#000 25%,transparent 72%)}.hero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-140px;top:-180px;pointer-events:none;filter:blur(60px);background:radial-gradient(circle,rgba(207,74,18,.14),transparent 62%);animation:16s ease-in-out infinite hero-float;translate:var(--px,0) var(--py,0);translate:var(--px,0) calc(var(--py,0px) + var(--sy,0px))}@keyframes hero-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,40px) scale(1.12)}}.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;will-change:transform,opacity}.hero h1{color:var(--primary)}.hero h1 em{font-style:normal;color:var(--accent)}.hero .lead{color:var(--text-soft);font-size:1.18rem}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--accent-soft);border:1px solid rgba(207,74,18,.25);padding:.4rem 1.1rem;border-radius:999px;margin-bottom:1.5rem;color:var(--secondary)}.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}.hero-points{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:.55rem;color:var(--text-soft);font-size:.95rem}.hero-points li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:.6rem}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-md)}.hero-card h2{color:var(--primary);font-size:1.22rem;letter-spacing:-.01em;margin-bottom:1.1rem}.hero-card ol{margin:0;padding-left:1.2rem;color:var(--text-soft);display:grid;gap:.75rem;font-size:.95rem}.hero-card ol strong{color:var(--secondary)}.grid{display:grid;gap:1.5rem}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{background:var(--surface);border-radius:var(--radius);padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;position:relative;will-change:transform}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(207,74,18,.35)}.card::after{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:0;background:var(--accent);border-radius:var(--radius) 0 0 0;transition:width .35s}.card:hover::after{width:52%}.card-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--secondary);font-size:1.5rem;margin-bottom:1.2rem}.card p{color:var(--text-soft);font-size:.96rem}.card .card-link{margin-top:auto;font-weight:600;text-decoration:none;font-family:var(--font-head)}.card ul{color:var(--text-soft);font-size:.93rem;padding-left:1.1rem;margin:0 0 1rem;display:grid;gap:.4rem}.card-pole{font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--secondary);margin-bottom:.5rem}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.steps-3{grid-template-columns:repeat(3,1fr);max-width:960px;margin-inline:auto}.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm)}.step-num{font-family:var(--font-head);font-size:2.4rem;font-weight:700;letter-spacing:-.03em;color:var(--accent);margin-bottom:.5rem;line-height:1}.step p{color:var(--text-soft);font-size:.92rem;margin:0}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.zone{border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;background:var(--surface);box-shadow:var(--shadow-sm)}.zone h3{display:flex;align-items:center;gap:.6rem}.zone p{color:var(--text-soft);font-size:.94rem;margin:0}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}.price-card{position:relative}.price-card.featured{border-color:var(--accent);box-shadow:0 8px 30px rgba(207,74,18,.14)}.price-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent-hover);color:#fff;font-family:var(--font-head);font-size:.78rem;padding:.28rem 1.1rem;border-radius:999px;white-space:nowrap}.price{font-family:var(--font-head);font-size:2.6rem;letter-spacing:-.03em;color:var(--primary);font-variant-numeric:tabular-nums}.price small{font-size:.95rem;color:var(--text-soft);font-family:var(--font-body);letter-spacing:0}.price-note{font-size:.85rem;color:var(--text-soft)}.choice-price,.dj-price,.oa-montant,.price,.price small,.price-note,.price-strong,.price-tag,table.compare td:last-child,table.compare td:last-child strong{font-weight:700}.check-list{list-style:none;padding:0;margin:1rem 0 1.5rem;display:grid;gap:.6rem;font-size:.94rem;color:var(--text-soft)}.check-list li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:.55rem}.check-list li.off{opacity:.45}.check-list li.off::before{content:"—";color:var(--text-soft)}.engagements{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}.engagement{padding:1.4rem 1rem}.engagement .card-icon{margin-inline:auto}.engagement h3{font-size:1.05rem}.engagement p{font-size:.88rem;color:var(--text-soft);margin:0}.faq-list{max-width:800px;margin-inline:auto;display:grid;gap:.9rem}details.faq-item{background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border);padding:0;overflow:hidden;transition:border-color .2s}details.faq-item[open]{border-color:rgba(207,74,18,.4)}details.faq-item summary{cursor:pointer;font-family:var(--font-head);font-weight:600;color:var(--primary);padding:1.15rem 1.4rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}details.faq-item summary::-webkit-details-marker{display:none}details.faq-item summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;font-weight:400;transition:transform .3s cubic-bezier(.4,0,.2,1),color .2s}details.faq-item[open] summary::after{content:"–";content:"+";transform:rotate(45deg)}details.faq-item .faq-body{padding:0 1.4rem 1.2rem;color:var(--text-soft);font-size:.96rem;overflow:hidden}.cta-band{background:var(--pill);border-radius:calc(var(--radius) + 6px);color:#fff;text-align:center;padding:clamp(3rem,6vw,4.8rem) 2rem;position:relative;overflow:hidden}.cta-band::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-120px;bottom:-220px;filter:blur(60px);pointer-events:none;background:radial-gradient(circle,rgba(207,74,18,.5),transparent 65%)}.cta-band p{color:var(--text-onDark);max-width:580px;margin-inline:auto}.cta-band .btn{margin-top:1.3rem;position:relative;z-index:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}.form-field{display:flex;flex-direction:column;gap:.35rem}.form-field.full{grid-column:1/-1}.form-field label{font-weight:600;font-size:.9rem;color:var(--primary)}.form-field input,.form-field select,.form-field textarea{font:inherit;padding:.8rem .95rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%;min-width:0}.contact-layout>*,.form-grid>*,.grid>*{min-width:0}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(207,74,18,.15)}.consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.87rem;color:var(--text-soft)}.consent input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--accent)}.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}.form-success{display:none;background:#e1f0ea;border:1.5px solid var(--success);color:#14532d;border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-top:1rem;font-weight:500}.form-success.visible{display:block}.contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}.contact-info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow-sm)}.contact-info-card ul{list-style:none;padding:0;margin:0;display:grid;gap:1rem}.contact-info-card li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text-soft);font-size:.95rem}.contact-info-card li strong{color:var(--primary);display:block}.page-header{background:var(--surface);border-bottom:1px solid var(--border);color:var(--text);padding:clamp(3.2rem,7vw,5.5rem) 0;text-align:center;position:relative;overflow:hidden}.page-header::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(10,10,10,.05) 1.5px,transparent 1.5px);background-size:26px 26px;mask-image:radial-gradient(ellipse 60% 100% at 85% 0%,#000 20%,transparent 70%)}.page-header h1{color:var(--primary);margin-bottom:.5rem;position:relative}.page-header p{color:var(--text-soft);max-width:640px;margin:0 auto;font-size:1.1rem;position:relative}.prose{max-width:780px;margin-inline:auto}.prose h2{margin-top:2.4rem;font-size:1.55rem}.prose h3{margin-top:1.6rem}.prose li,.prose p{color:var(--text-soft)}.prose .notice{background:var(--accent-soft);border-left:3px solid var(--link);padding:1rem 1.2rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.92rem}.table-wrap{overflow-x:auto}table.compare{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}table.compare td,table.compare th{padding:.95rem 1.15rem;text-align:left;border-bottom:1px solid var(--border);font-size:.93rem}table.compare th{background:var(--pill);color:#fff;font-family:var(--font-head);font-weight:600}table.compare td{color:var(--text-soft)}table.compare tr:last-child td{border-bottom:none}table.compare td:first-child{font-weight:600;color:var(--primary)}.site-footer{background:var(--pill);color:#9aabbd}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:.5rem 1.8rem;padding:1.25rem 0 .65rem}.site-footer h4{font-size:.92rem;margin-bottom:.3rem}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.18rem}.site-footer a{color:#9aabbd;text-decoration:none;font-size:.89rem}.site-footer a:hover{color:#fff}.site-footer p{font-size:.86rem;margin:0;max-width:42ch;color:#9aabbd}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:.55rem 0;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem}.footer-logo{display:flex;align-items:center;gap:.55rem;margin-bottom:.3rem}.footer-logo .logo-mark{background:url("../logo-mark.svg") center/contain no-repeat;color:transparent}.footer-logo .logo-name{color:#fff}.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
@media (max-width:960px){
  .reveal{opacity:.55;transform:translateY(6px);transition:opacity .28s ease-out,transform .28s ease-out;transition-delay:0s!important}
  .reveal.in{opacity:1;transform:none}
}.reveal.in{opacity:1;transform:none}.engagements>.reveal:nth-child(2),.grid>.reveal:nth-child(2),.steps>.reveal:nth-child(2){transition-delay:.08s}.engagements>.reveal:nth-child(3),.grid>.reveal:nth-child(3),.steps>.reveal:nth-child(3){transition-delay:.16s}.engagements>.reveal:nth-child(4),.grid>.reveal:nth-child(4),.steps>.reveal:nth-child(4){transition-delay:.24s}::selection{background:rgba(207,74,18,.2);color:var(--primary)}@supports (scrollbar-color:red blue){html{scrollbar-color:#9aabbd #fafbfd;scrollbar-width:thin}}.logo-mark{transition:transform .25s}.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}@media (max-width:1080px){.main-nav ul{gap:1.1rem}}@media (max-width:960px){.hero .container{grid-template-columns:1fr}.engagements,.grid-3,.grid-4,.pricing,.steps,.zones{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.contact-layout{grid-template-columns:1fr}.nav-toggle{display:block}}@media (max-width:680px){.engagements,.footer-grid,.form-grid,.grid-2,.grid-3,.grid-4,.pricing,.steps,.zones{grid-template-columns:1fr}}.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:var(--accent-surface);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}.site-header{transition:box-shadow .25s,transform .3s}.site-header.scrolled{box-shadow:0 4px 24px rgba(10,10,10,.07)}.site-header.hidden-up{transform:translateY(-100%)}.site-header:focus-within{transform:none}.line-in{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(6px);transition:opacity .6s cubic-bezier(.2,0,0,1),transform .6s cubic-bezier(.2,0,0,1),filter .6s}.words-go .line-in{opacity:1;transform:none;filter:blur(0)}.card,.step,.zone{--mx:50%;--my:50%}@media (hover:hover) and (pointer:fine){.card::before,.step::before,.zone::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(207,74,18,.07),transparent 65%);opacity:0;transition:opacity .3s}.card:hover::before,.step:hover::before,.zone:hover::before{opacity:1}.step,.zone{position:relative}}.btn-primary{position:relative;overflow:hidden}.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}.btn-primary:hover::after{left:120%}.marquee{overflow:hidden;border-block:1px solid var(--border);background:var(--surface)}.marquee-track{display:flex;width:max-content;animation:45s linear infinite marquee}.marquee:hover .marquee-track{animation-play-state:paused}.mq-group{display:flex;align-items:stretch}.mq-item{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.7rem;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--text-soft);white-space:nowrap;border-right:1px solid var(--border)}.mq-ic{width:15px;height:15px;color:var(--secondary);flex:none}@keyframes marquee{to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.word-in{opacity:1;transform:none;filter:none}.site-header.hidden-up{transform:none}}.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:.6s ease-out forwards ripple}.btn{position:relative;overflow:hidden}@keyframes ripple{to{transform:scale(2.2);opacity:0}}@view-transition{navigation:auto}::view-transition-old(root){animation:.22s both vt-out}::view-transition-new(root){animation:.3s both vt-in}@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}@keyframes page-in{from{opacity:0}}.main-nav a:not(.btn){position:relative;border-bottom:none!important}.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .25s}.main-nav a:not(.btn):hover::after,.main-nav a:not(.btn)[aria-current=page]::after{right:0}.card-link{display:inline-block;transition:transform .2s}.card-link:hover{transform:translateX(4px)}@media (prefers-reduced-motion:reduce){body{animation:none}.btn .ripple{display:none}::view-transition-new(root),::view-transition-old(root){animation:none}}.nav-search-btn{background:0 0;border:1px solid var(--border);border-radius:999px;cursor:pointer;width:38px;height:38px;display:grid;place-items:center;font-size:1rem;color:var(--primary);transition:border-color .2s,background-color .2s}.nav-search-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.nav-search-btn svg{width:18px;height:18px}.nav-search-label{display:none}.dropdown a{display:flex;align-items:center;gap:.55rem}.dropdown .dd-ic{width:18px;height:18px;flex:none;color:var(--secondary)}@media (max-width:960px){.main-nav li:has(> .nav-search-btn){order:0}.nav-search-btn{width:100%;height:auto;min-height:48px;justify-content:flex-start;display:flex;align-items:center;gap:.6rem;border-radius:var(--radius-sm);padding:.7rem;font-size:1rem}.nav-search-label{display:inline}.main-nav a.btn{position:static;margin-top:.8rem}.main-nav{padding-bottom:calc(3rem + env(safe-area-inset-bottom))}}.search-overlay{position:fixed;inset:0;z-index:250;background:rgba(12,45,87,.45);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding-top:12vh}.search-overlay.open{display:flex;animation:.18s fade-in}@keyframes fade-in{from{opacity:0}}.search-box{width:min(600px,92%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}.search-input{width:100%;border:none;border-bottom:1px solid var(--border);padding:1.1rem 1.3rem;font:inherit;font-size:1.05rem;color:var(--text)}.search-input:focus{outline:0}.search-results{max-height:52vh;overflow-y:auto}.search-result{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1.3rem;text-decoration:none;border-bottom:1px solid var(--border)}.search-result:last-child{border-bottom:none}.search-result.active,.search-result:hover{background:var(--accent-soft)}.sr-title{font-family:var(--font-head);font-weight:600;color:var(--primary);font-size:.96rem}.sr-desc{font-size:.84rem;color:var(--text-soft)}.search-empty{padding:1.4rem 1.3rem;color:var(--text-soft);font-size:.92rem}.search-hint{margin:0;padding:.6rem 1.3rem;font-size:.76rem;color:var(--text-soft);background:var(--bg);border-top:1px solid var(--border)}.breadcrumb{background:var(--surface);border-bottom:1px solid var(--border)}.breadcrumb ol{max-width:1140px;width:92%;margin-inline:auto;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:.8rem 0;margin-block:0;font-size:.85rem}.breadcrumb li{display:flex;align-items:center;gap:.5rem;color:var(--text-soft)}.breadcrumb li:not(:last-child)::after{content:"›";color:var(--text-soft)}.breadcrumb a{color:var(--secondary);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb [aria-current=page]{color:var(--text);font-weight:600}.filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2rem}.filter-btn{font-family:var(--font-head);font-size:.86rem;font-weight:600;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-soft);cursor:pointer;transition:.2s}.filter-btn:hover{border-color:var(--accent);color:var(--secondary)}.filter-btn.active{background:var(--pill);color:#fff;border-color:var(--primary)}.demarche-card.hidden{display:none}@media (max-width:720px){.filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-4%;padding:.2rem 4% .6rem;gap:.5rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}.filter-btn{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;min-height:42px;display:inline-flex;align-items:center}}.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:260;background:var(--pill);color:#fff;padding:1.1rem 1.3rem;box-shadow:0 -6px 24px rgba(12,45,87,.2);display:none}.cookie-banner.show{display:block;animation:.35s cookie-up}@keyframes cookie-up{from{transform:translateY(100%)}}.cookie-inner{max-width:1140px;width:92%;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between}.cookie-inner p{margin:0;font-size:.9rem;color:#d1d4d6;flex:1;min-width:260px}.cookie-inner a{color:var(--link)}.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}.cookie-actions .btn{padding:.6rem 1.3rem;font-size:.88rem}.btn-ghost{background:0 0;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.btn-ghost:hover{background:rgba(255,255,255,.1)}.draft-banner{max-width:820px;margin:0 auto 1.5rem;background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:1rem 1.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-size:.92rem}.draft-actions{display:flex;gap:.5rem}.draft-actions .btn{padding:.5rem 1.1rem;font-size:.85rem}.btn-ghost-dark{background:0 0;border:1.5px solid var(--border);color:var(--text-soft)}.btn-ghost-dark:hover{background:var(--surface)}.nav-toggle{width:44px;height:44px}.burger{display:inline-grid;gap:5px;width:22px}.burger i{display:block;height:2px;background:var(--pill);border-radius:2px;transition:transform .3s,opacity .2s}.nav-toggle.is-open .burger i:first-child{transform:translateY(7px) rotate(45deg)}.nav-toggle.is-open .burger i:nth-child(2){opacity:0}.nav-toggle.is-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.main-nav .has-dropdown{position:relative}.dropdown-toggle{display:none;background:0 0;border:none;cursor:pointer;color:var(--text-soft);font-size:1rem;padding:0 .2rem;line-height:1}.dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:250px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:.5rem;display:grid;gap:.1rem;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:120}.dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}.main-nav .has-dropdown:focus-within .dropdown,.main-nav .has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.dropdown a{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text);font-family:var(--font-body);font-size:.9rem;border:none!important;white-space:nowrap}.dropdown a .icn,.dropdown a>span[aria-hidden=true]{flex:0 0 auto}.dropdown a:hover,.dropdown a[aria-current=page]{background:var(--accent-soft);color:var(--secondary)}.nav-backdrop{position:fixed;inset:0;z-index:90;background:rgba(12,45,87,.4);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s}.nav-backdrop.show{opacity:1;visibility:visible}body.nav-lock{overflow:hidden}.nav-close,.nav-drawer-head{display:none}.to-top{position:fixed;bottom:94px;right:24px;left:auto;z-index:150;width:52px;height:52px;border-radius:50%;border:none;background:var(--accent-surface);color:var(--primary);font-size:1.35rem;cursor:pointer;box-shadow:0 6px 22px rgba(207,74,18,.45);display:grid;place-items:center;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s,background-color .2s}.to-top.show{opacity:1;transform:none;pointer-events:auto}.to-top:hover{background:var(--accent-hover);transform:translateY(-2px)}.mobile-actionbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:130;background:var(--surface);border-top:1px solid var(--border);padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr 1.4fr;gap:.4rem;box-shadow:0 -4px 20px rgba(12,45,87,.08)}.mobile-actionbar a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-family:var(--font-head);font-size:.72rem;font-weight:600;color:var(--text-soft);padding:.5rem .3rem;border-radius:var(--radius-sm);min-height:48px;justify-content:center}.mobile-actionbar a span{font-size:1.15rem}.mobile-actionbar a.primary{background:var(--accent-surface);color:var(--primary)}.mobile-actionbar a:active{transform:scale(.96)}@media (max-width:960px){.nav-wrap{min-height:66px}.main-nav{position:fixed;top:0;right:0;left:auto;width:min(340px,88vw);height:100vh;height:100dvh;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 40px rgba(12,45,87,.18);padding:0 0 calc(2rem + env(safe-area-inset-bottom));display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:110}body.nav-lock .cookie-banner,body.nav-lock .mobile-actionbar,body.nav-lock .mohna-chat-btn,body.nav-lock .to-top{display:none!important}.main-nav .has-dropdown .dropdown,.main-nav .has-dropdown:focus-within .dropdown,.main-nav .has-dropdown:hover .dropdown{transform:none}.main-nav.open{display:block;animation:.28s cubic-bezier(.4,0,.2,1) drawer-in}@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;gap:1rem;padding:1rem 1.2rem;margin-bottom:.4rem;background:var(--surface);border-bottom:1px solid var(--border)}.nav-drawer-head .logo-name{line-height:1.02}.nav-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--primary);font-size:1.15rem;cursor:pointer;transition:background-color .2s,border-color .2s}.nav-close:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--secondary)}.nav-close:active{transform:scale(.94)}.main-nav ul{flex-direction:column;align-items:stretch;gap:.2rem;padding:0 1rem}.main-nav li{width:100%}.main-nav a{display:flex;align-items:center;min-height:48px;padding:.7rem;border-bottom:1px solid var(--border);font-size:1rem;border-radius:var(--radius-sm)}.main-nav a.btn{justify-content:center;text-align:center;margin-top:1rem;border-bottom:none;min-height:50px}.main-nav a[aria-current=page]{color:var(--secondary);background:var(--accent-soft)}.dropdown-toggle{display:inline-flex;position:absolute;right:.2rem;top:4px;width:48px;height:48px;align-items:center;justify-content:center;font-size:1.3rem;transition:transform .25s;z-index:1}.main-nav .has-dropdown{position:relative}.main-nav .has-dropdown.open .dropdown-toggle{transform:rotate(180deg)}.dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:var(--bg);border-radius:var(--radius-sm);margin:0 0 .3rem;padding:0 .2rem;display:grid;gap:.1rem;max-height:0;overflow:hidden;transition:max-height .32s,padding .32s}.main-nav .has-dropdown.open .dropdown{max-height:720px;padding:.25rem .2rem}.dropdown::before{display:none}.main-nav .dropdown a{white-space:normal}.nav-search-btn{width:100%;border-radius:var(--radius-sm);justify-content:flex-start;gap:.6rem;padding:.85rem .6rem}.nav-search-btn::after{content:"Rechercher sur le site";font-family:var(--font-body);font-size:1rem;color:var(--text)}.engagements,.grid-4,.steps{grid-template-columns:repeat(2,1fr)}.mobile-actionbar{display:grid}body.has-actionbar{padding-bottom:68px}body.has-actionbar .to-top{bottom:150px}body.has-actionbar .mohna-chat-btn{bottom:80px}body.has-actionbar .cookie-banner{bottom:64px}}@media (max-width:600px){.container{width:90%}h1{font-size:clamp(2rem, 8vw, 2.6rem)}.engagements,.grid-2,.grid-3,.grid-4,.pricing,.steps,.zones{grid-template-columns:1fr}.section-head{margin-bottom:2rem}.btn{min-height:46px}.card-link,.main-nav a{min-height:44px;display:flex;align-items:center}.dropdown a{min-height:44px}.to-top{width:44px;height:44px;bottom:90px}.compare-scroll,.table-wrap{position:relative}}@media (pointer:coarse){.btn,.choice,.faq-item summary,.filter-btn{min-height:44px}}details.faq-item summary:hover::after{color:var(--secondary)}.hero::before,.page-header::before{transform:translateY(var(--sd,0))}[data-par]{transform:translateY(var(--par,0))}.cta-band[data-par]{transition:none}.btn-dark,.btn-primary{translate:var(--mag-x,0) var(--mag-y,0);transition-property:transform,box-shadow,background-color,translate;transition-duration:.15s,.2s,.2s,.25s}.fx-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(46px);z-index:0}.fx-blob-a{width:300px;height:300px;left:-110px;bottom:-140px;background:radial-gradient(circle,rgba(207,74,18,.16),transparent 65%);animation:18s ease-in-out infinite blob-a}.fx-blob-b{width:200px;height:200px;right:18%;bottom:-60px;background:radial-gradient(circle,rgba(12,45,87,.08),transparent 65%);animation:14s ease-in-out infinite blob-b}.fx-blob-c{width:260px;height:260px;left:-80px;top:-120px;background:radial-gradient(circle,rgba(207,74,18,.35),transparent 65%);animation:16s ease-in-out infinite blob-a}@keyframes blob-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}@keyframes blob-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-34px,22px) scale(.9)}}.reveal-left{transform:translateX(-28px)}.reveal-right{transform:translateX(28px)}.reveal-left.in,.reveal-right.in{transform:none}.hero h1 em,.hero h1 em .word-in{color:var(--accent)}@media (prefers-reduced-motion:reduce){.fx-blob,.main-nav.open{animation:none}.reveal-left,.reveal-right{transform:none}}@media (max-width:960px){.contact-layout,.dash-grid{grid-template-columns:1fr}.section{padding:clamp(1.8rem,4vw,2.8rem) 0}.breadcrumb ol{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.breadcrumb li{white-space:nowrap}table.compare td,table.compare th,table.statuts td,table.statuts th{padding:.7rem .8rem;font-size:.86rem}}@media (max-width:680px){.quote-bar{flex-direction:column;align-items:stretch;text-align:center;gap:.6rem}.quote-bar .wizard-nav{justify-content:center}.cta-band{padding:2.4rem 1.4rem}.mq-item{font-size:.82rem;padding:.7rem 1.15rem}.hero-card{padding:1.4rem}.card{padding:1.1rem 1.2rem}.step{padding:1.4rem}.prose .notice{font-size:.88rem}}@media (max-width:480px){.hero-ctas{flex-direction:column}.cta-band .btn,.hero-ctas .btn,.price-card .btn{width:100%}h2{font-size:clamp(1.5rem, 6.5vw, 1.9rem)}.lead{font-size:1.05rem}.container{width:92%}.search-overlay{padding-top:6vh}.mohna-chat{width:calc(100vw - 20px);right:10px}.form-grid{gap:.9rem}.footer-bottom{justify-content:center;text-align:center}.filters{gap:.45rem}.filter-btn{font-size:.8rem;padding:.45rem .85rem}.engagement{padding:1rem .6rem}}@media (max-width:960px){.page-wizard .wizard{padding-bottom:calc(126px + env(safe-area-inset-bottom))}.page-wizard .quote-bar{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;z-index:140;flex-direction:row;flex-wrap:nowrap;align-items:center;text-align:left;gap:.8rem;padding:.65rem 4% calc(.65rem + env(safe-area-inset-bottom));box-shadow:0 -8px 26px rgba(12,45,87,.24)}.page-wizard .quote-bar>div:first-child{flex:1 1 auto;min-width:0}.page-wizard .quote-bar strong{font-size:1.2rem;line-height:1.1}.page-wizard .quote-bar .quote-label{font-size:.72rem}.page-wizard .quote-bar .quote-legal{display:none}.page-wizard .quote-bar .wizard-nav{flex:0 0 auto;margin:0;gap:.5rem;justify-content:flex-end}.page-wizard .quote-bar .wizard-nav .btn{padding:.78rem 1.2rem;min-height:46px;white-space:nowrap}.page-wizard .mohna-chat-btn,.page-wizard .to-top{bottom:calc(96px + env(safe-area-inset-bottom))}}@media (max-width:380px){.page-wizard .quote-bar .wizard-nav #btn-prev{font-size:0;padding:.78rem .85rem}.page-wizard .quote-bar .wizard-nav #btn-prev::before{content:"←";font-size:1.05rem}}@media (max-width:900px){.footer-grid{grid-template-columns:repeat(3,1fr);gap:1rem 1.4rem;padding:1.8rem 0 1rem}.footer-grid>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.footer-grid>div:first-child p{margin:0;flex:1 1 260px}.footer-logo{margin-bottom:0}}@media (max-width:560px){.footer-grid{grid-template-columns:1fr 1fr;gap:.8rem 1.2rem;padding:1.5rem 0 .8rem}.footer-grid>div:first-child{grid-column:1/-1}.site-footer p{font-size:.82rem}.site-footer a{font-size:.85rem}.footer-bottom{justify-content:center;text-align:center;padding:.7rem 0;font-size:.76rem}}@media (max-width:767px){.cpt-plans,.grid-2,.grid-3,.grid-4,.plan-grid,.pricing,.steps,.steps-3,.zones{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}.section-head{margin-bottom:2.2rem}h1{font-size:clamp(2rem, 8vw, 2.8rem)}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.btn{min-height:44px}.compare-scroll,.table-wrap{-webkit-overflow-scrolling:touch;background:linear-gradient(to right,var(--surface,#fff) 30%,rgba(255,255,255,0)) left/24px 100% no-repeat,linear-gradient(to left,var(--surface,#fff) 30%,rgba(255,255,255,0)) right/24px 100% no-repeat,radial-gradient(farthest-side at 0 50%,rgba(12,45,87,.14),rgba(0,0,0,0)) left/12px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(12,45,87,.14),rgba(0,0,0,0)) right/12px 100% no-repeat;background-attachment:local,local,scroll,scroll}}@media (max-width:480px){.kpi-grid{grid-template-columns:1fr}.cpt-price{font-size:1.7rem}.cpt-table td,.cpt-table th,.fl-table td,.fl-table th{padding:.6rem .7rem;font-size:.85rem}}@media (min-width:1600px){.container{width:min(1220px,88%)}}.icn{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em}.card-icon .icn{width:25px;height:25px;vertical-align:middle}.icn-inline{margin-right:.3rem}.mobile-actionbar .icn{width:1.25rem;height:1.25rem}.to-top .icn{width:1.15rem;height:1.15rem}.dropdown .icn{width:1rem;height:1rem;color:var(--secondary)}.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-surface);position:relative;flex:none}.pulse-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);animation:2s cubic-bezier(.4,0,.2,1) infinite pulse-ring}@keyframes pulse-ring{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.4);opacity:0}}.btn-arrow .arrow{display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1);margin-left:.2rem}.btn-arrow:hover .arrow{transform:translateX(5px)}.hero-chips{display:flex!important;flex-wrap:wrap;gap:.5rem!important}.hero-chips li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.4rem .9rem;font-size:.84rem;box-shadow:var(--shadow-sm)}.hero-card-glass{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border:1px solid rgba(207,74,18,.25);animation:7s ease-in-out infinite card-float}.hero-card-glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(207,74,18,.5),transparent 40%,transparent 65%,rgba(207,74,18,.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-sat{position:absolute;display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.45rem .9rem;font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--primary);box-shadow:var(--shadow-md);white-space:nowrap;z-index:2}.hero-sat .icn{color:var(--secondary)}.sat-a{top:-16px;right:8%;animation:6s ease-in-out infinite sat-float}.sat-b{bottom:14%;left:-34px;animation:7.5s ease-in-out infinite reverse sat-float}.sat-c{bottom:-14px;right:14%;animation:5.5s ease-in-out .8s infinite sat-float}@keyframes sat-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--border);border-radius:999px;display:none;align-items:flex-start;justify-content:center;padding-top:7px;z-index:2;transition:border-color .2s}.scroll-cue:hover{border-color:var(--accent)}.scroll-cue-wheel{width:4px;height:9px;border-radius:4px;background:var(--accent-surface);animation:1.8s cubic-bezier(.4,0,.2,1) infinite cue}@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}@media (min-width:961px){.scroll-cue{display:inline-flex}}@media (max-width:960px){.hero-sat{display:none}.hero-card-glass{animation:none}}@media (prefers-reduced-motion:reduce){.hero-card-glass,.hero-sat,.pulse-dot::after,.scroll-cue-wheel{animation:none}}.member-cta{display:grid;grid-template-columns:1.4fr .9fr;gap:2rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow-md)}.member-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}.member-list li{position:relative;padding-left:1.7rem;color:var(--text-soft);font-size:.95rem}.member-list li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.member-preview{text-align:center;background:linear-gradient(160deg,var(--pill-2),var(--pill));color:#fff;border-radius:var(--radius);padding:2rem 1.4rem}.member-preview p{color:#dfe4ea;font-size:.9rem;margin:.6rem 0 1rem}.member-lock{width:68px;height:68px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:rgba(207,74,18,.18);border:1px solid rgba(207,74,18,.4);font-size:1.8rem}@media (max-width:767px){.member-cta{grid-template-columns:1fr}}.newsletter-box{max-width:720px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-md)}.newsletter-box .section-head{text-align:center}.nl-profil{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.nl-radio{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border);border-radius:999px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;background:var(--bg);transition:border-color .15s}.nl-radio:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--secondary);font-weight:600}.nl-radio input{accent-color:var(--accent)}.nl-row{display:flex;gap:.6rem}.nl-row input{flex:1;padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;background:var(--bg);color:var(--text)}.nl-row input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}.nl-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.82rem;color:var(--text-soft);margin-top:.9rem}.nl-consent input{margin-top:.2rem;accent-color:var(--accent)}.nl-msg{min-height:1.2em;margin:.7rem 0 0;font-size:.9rem}.nl-msg.ok{color:var(--success)}.nl-msg.ko{color:#b91c1c}@media (max-width:520px){.nl-row{flex-direction:column}.nl-row .btn{width:100%}}.legal-est{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--secondary);border-radius:var(--radius-sm);padding:1.1rem 1.25rem;margin:1rem 0;box-shadow:var(--shadow-sm)}.legal-est-head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.7rem;font-family:var(--font-head)}.legal-est-head .legal-ic{font-size:1.1rem}.legal-badge{margin-left:auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--accent-soft);color:var(--secondary);padding:.2rem .55rem;border-radius:999px}.legal-table{width:100%;border-collapse:collapse;font-size:.92rem}.legal-table td{padding:.5rem 0;border-bottom:1px dashed var(--border)}.legal-table td.legal-v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:1rem}.legal-table .legal-total td{border-bottom:none;border-top:2px solid var(--primary);font-family:var(--font-head);font-weight:700;padding-top:.6rem}.legal-note{font-size:.78rem;color:var(--text-soft);margin:.7rem 0 0}.legal-free{display:flex;align-items:center;gap:.7rem;border-left-color:var(--success)}.legal-free .legal-ic{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#e7f4ec;color:var(--success);font-weight:700}.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}.fin-kpi{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.7rem .8rem}.fin-kpi span{display:block;font-size:.74rem;color:var(--text-soft)}.fin-kpi b{font-family:var(--font-head);font-size:1.15rem;font-variant-numeric:tabular-nums}.fin-kpi b.ok{color:var(--success)}.fin-kpi b.due{color:var(--secondary)}.fin-sub{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-soft);margin:1rem 0 .4rem}.fin-table-wrap{overflow-x:auto}.fin-table{width:100%;border-collapse:collapse;font-size:.86rem}.fin-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-soft);padding:.4rem .5rem;border-bottom:1px solid var(--border)}.fin-table td{padding:.5rem;border-bottom:1px solid var(--border);vertical-align:middle}.fin-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.fin-table td.muted{color:var(--text-soft)}.fin-table .doc-dl{white-space:nowrap}.histo-full{list-style:none;padding:0;margin:0;max-height:340px;overflow-y:auto}.hf-item{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px dashed var(--border)}.hf-ic{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;background:var(--bg);border-radius:8px;font-size:.9rem}.hf-body{display:flex;flex-direction:column}.hf-label{font-size:.9rem}.hf-date{font-size:.74rem;color:var(--text-soft)}.contact-channels{display:grid;gap:.5rem;margin-top:1rem}.cc-btn{display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);text-decoration:none;color:var(--text);font-weight:500;font-size:.9rem;background:var(--surface);transition:border-color .15s,transform .12s}.cc-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.cc-wa{background:#e9f8ee;border-color:#b8e6c6;color:#157347}.doc-notice{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;background:linear-gradient(120deg,rgba(120,140,93,.12),rgba(207,74,18,.1));border:1px solid rgba(120,140,93,.35);border-left:4px solid var(--success,#788c5d);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1.5rem;box-shadow:var(--shadow-sm);animation:.5s both notice-in}.doc-notice>span:first-child{font-size:1.4rem;line-height:1;animation:2.5s ease-in-out infinite notice-ring;transform-origin:50% 0}.doc-notice>span:nth-child(2){flex:1 1 220px;font-size:.95rem;color:var(--text-soft)}.doc-notice>span:nth-child(2) strong{color:var(--text)}.doc-notice .btn{margin-left:auto}@keyframes notice-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes notice-ring{0%,100%,88%{transform:rotate(0)}90%{transform:rotate(14deg)}94%{transform:rotate(-12deg)}97%{transform:rotate(6deg)}}@media (prefers-reduced-motion:reduce){.doc-notice,.doc-notice>span:first-child{animation:none}}@media (max-width:560px){.doc-notice .btn{margin-left:0;width:100%}}.captcha{margin:1rem 0;padding:.9rem 1.1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}.captcha.done{border-color:var(--success);background:#e1f0ea}.captcha-q{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.92rem;color:var(--primary);font-weight:500}.captcha-input{width:90px;font:inherit;padding:.5rem .7rem;border:1.5px solid var(--border);border-radius:var(--radius-sm)}.captcha-input:focus{outline:0;border-color:var(--accent)}.captcha-state{font-weight:700}.captcha-state.ok{color:var(--success);font-size:1.1rem}.captcha-state.ko{color:#b8430f;font-size:.85rem}.captcha.shake{animation:.4s shake}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}.pwd-wrap{position:relative;display:flex;align-items:center}.pwd-wrap input{flex:1;width:100%;padding-right:2.8rem}.pwd-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:0 0;border:0;padding:.35rem;cursor:pointer;color:var(--text-soft);display:inline-flex;align-items:center;justify-content:center;border-radius:6px}.pwd-toggle:hover{color:var(--accent)}.pwd-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pwd-toggle .icn{width:20px;height:20px}.pwd-show{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--text-soft);margin-top:.5rem;cursor:pointer}.pwd-show input{width:auto;margin:0}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:0}html[data-theme=dark]{--bg:#111213;--surface:#1a1c1d;--text:#e2e8f0;--text-soft:#9aabbd;--text-onDark:#e2e8f0;--border:#2d3032;--accent-soft:#3a2b22;--primary:#e2e8f0;--pill:#212324;--pill-2:#181919;--shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4);--shadow-md:0 2px 6px rgba(0,0,0,.5),0 16px 40px rgba(0,0,0,.55);color-scheme:dark;--price-ink:#cf4a12}html[data-theme=dark] body{background:var(--bg);color:var(--text)}html[data-theme=dark] .site-header{background:rgba(17,18,19,.92);border-bottom:1px solid var(--border)}html[data-theme=dark] .main-nav a{color:var(--text-soft)}html[data-theme=dark] .main-nav a:hover{color:var(--text)}html[data-theme=dark] .adm-card,html[data-theme=dark] .card,html[data-theme=dark] .panel{background:var(--surface);border-color:var(--border)}.nav-theme-li{display:flex;align-items:center}.theme-toggle{background:0 0;border:1.5px solid var(--border);color:var(--primary);width:38px;height:38px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer;font-size:1rem;line-height:1;transition:background-color .2s,border-color .2s}.theme-toggle:hover{border-color:var(--accent);background:var(--bg)}@media (max-width:767px){body.has-actionbar #wa-float{bottom:calc(84px + env(safe-area-inset-bottom))!important}.page-wizard #wa-float{bottom:calc(104px + env(safe-area-inset-bottom))!important}.cookie-banner{padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(12,45,87,.18)}.cookie-inner{flex-direction:column;align-items:stretch;gap:.5rem}.cookie-inner p{font-size:.8rem;min-width:0;width:100%;flex:none;line-height:1.4;margin:0}.cookie-actions{gap:.45rem;justify-content:flex-end}.cookie-actions .btn{padding:.5rem 1.05rem;font-size:.82rem}.dropdown-toggle,.nav-toggle,.theme-toggle,.to-top{min-width:44px;min-height:44px}}.site-header .logo{background:url("../logo-horizontal.png") left center/contain no-repeat;width:172px;height:46px;flex:0 0 auto;text-indent:-9999px;overflow:hidden;white-space:nowrap}.site-header .logo .logo-mark,.site-header .logo .logo-name{display:none}.footer-logo{background:url("../logo-horizontal-white.png") left center/contain no-repeat;width:186px;height:52px;text-indent:-9999px;overflow:hidden;white-space:nowrap}.footer-logo .logo-mark,.footer-logo .logo-name{display:none}@media(max-width:560px){.site-header .logo{width:148px;height:40px}}:root,html[data-theme=dark]{--heading-accent:var(--primary)}.card h3,.feature h3,.prose h2,.section-head h2,.step h3,article h2{color:var(--heading-accent)}.section-head::after{background:linear-gradient(90deg,var(--accent),var(--secondary))}.feature h4,.prose h3,.prose h4,.section h3,.section h4,.step h4,article h3,article h4{color:var(--heading-accent)}.cta-band h2,.cta-band h3,.cta-band h4,.footer-grid h4,.site-footer h4{color:#fff}
/* iOS : éviter le zoom automatique au focus (taille minimale 16px sur mobile/tablette) */
@media (max-width:960px){
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=url],select,textarea{font-size:16px!important}
}

/* ---- Micro-interactions (retour immédiat au toucher) ---- */
.btn:active{transform:scale(.965)}
.card:active,a.presta:active,.choice:active,.tp-xs:active{transform:translateY(-1px) scale(.985)}
@media (prefers-reduced-motion:reduce){.btn:active,.card:active,a.presta:active,.choice:active,.tp-xs:active{transform:none}}
@media (prefers-reduced-transparency:reduce){.site-header{background:#fafbfd;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--border)}}

/* ===== titres-vivants v1 ===== */
h1 em.hl-sweep{font-style:normal;color:var(--accent);background:linear-gradient(transparent 55%,rgba(207,74,18,.45) 55%);padding:0 .08em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-size:100% 100%}
h1.t-armed em.hl-sweep{color:inherit;background-size:0% 100%}
h1.t-armed.words-go em.hl-sweep{color:var(--accent);background-size:100% 100%;transition:background-size .55s cubic-bezier(.2,0,0,1) .5s,color .3s .55s}
h1 .dot-o{color:var(--accent)}
h1.t-armed .dot-o{opacity:0}
h1.t-armed.words-go .dot-o{opacity:1;transition:opacity .45s ease .95s}
h1 .nb{white-space:nowrap}
.rot-word{display:inline-block;white-space:nowrap;text-align:left;vertical-align:baseline;transition:width .35s cubic-bezier(.2,0,0,1)}
.rot-word .w{display:inline-block;color:var(--accent);background:linear-gradient(transparent 55%,rgba(207,74,18,.45) 55%);padding:0 .08em;border-radius:.06em;transition:opacity .28s ease,transform .28s ease,filter .28s ease}
.rot-word .w.out{opacity:0;transform:translateY(-.3em);filter:blur(3px)}
.rot-word .w.pre{transition:none;opacity:0;transform:translateY(.3em);filter:blur(3px)}
@media (prefers-reduced-motion:reduce){h1.t-armed em.hl-sweep{color:var(--accent);background-size:100% 100%}h1.t-armed .dot-o{opacity:1}.rot-word .w{transition:none}}

/* ---- css/modern.css ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2')}@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2')}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}.page-header h1,h1{text-wrap:balance}.lead,.section-head h2,h2,h3,li,p{text-wrap:pretty}.admin-content .num,.choice-price,.kpi b,.pay-amount,.price,.quote-bar strong,.stat b,td:last-child strong{font-variant-numeric:tabular-nums}::selection{background:var(--accent-soft);color:var(--primary)}.card,.choice,.contact-info-card,.pay-summary,.pricing-card,.recap{box-shadow:0 1px 2px rgba(12,45,87,.03),0 4px 14px rgba(12,45,87,.05)}.card:hover,.contact-info-card:hover,.pricing-card:hover{box-shadow:0 2px 4px rgba(12,45,87,.04),0 14px 34px rgba(12,45,87,.09);transform:translateY(-2px)}.card,.contact-info-card,.pricing-card{transition-property:box-shadow,transform,border-color;transition-duration:.28s;transition-timing-function:cubic-bezier(.2,0,0,1)}.btn{transition-property:background-color,color,box-shadow,transform,border-color;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1)}.btn:active{transform:scale(.97)}.btn-primary{box-shadow:0 1px 2px rgba(12,45,87,.12),0 6px 16px rgba(207,74,18,.28)}.btn-primary:hover{box-shadow:0 2px 4px rgba(12,45,87,.14),0 10px 26px rgba(207,74,18,.36);transform:translateY(-1px)}.btn-primary:active{transform:scale(.97)}.choice:focus-within,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:rgba(207,74,18,.55) solid 3px;outline-offset:2px;border-radius:6px}.choice:focus-within{outline-offset:0;border-radius:var(--radius-sm)}input,select,textarea{transition-property:border-color,box-shadow;transition-duration:.18s}input:hover,select:hover,textarea:hover{border-color:var(--accent)}.choice.selected{box-shadow:0 0 0 3px rgba(207,74,18,.18),0 4px 14px rgba(12,45,87,.06)}.choice input{transition-property:transform;transition-duration:.15s}.choice:active{transform:scale(.99)}.quote-bar{backdrop-filter:blur(8px);background:rgba(12,45,87,.94)}.compare tbody tr{transition-property:background-color;transition-duration:.15s}.compare tbody tr:nth-child(2n){background:rgba(228,222,212,.25)}.compare tbody tr:hover{background:var(--accent-soft)}.main-nav a:not(.btn){position:relative}.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent);transition-property:right;transition-duration:.22s;transition-timing-function:cubic-bezier(.2,0,0,1)}.main-nav a:not(.btn):hover::after,.main-nav a[aria-current=page]:not(.btn)::after{right:0}img{border-radius:inherit}.card img,article img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}@media (pointer:coarse){.admin-navitem,.btn,.choice,.main-nav a{min-height:44px}.main-nav a{display:inline-flex;align-items:center}}.wizard-progress span{position:relative}.wizard-progress span::before{content:attr(data-label);position:absolute;top:10px;left:0;font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);white-space:nowrap}.wizard-progress span.done::before{color:var(--secondary)}@media (max-width:560px){.wizard-progress span::before{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.card,.choice,.main-nav a::after{transition:none!important}.card:hover{transform:none}}.admin-navitem{transition-property:background-color,color,transform;transition-duration:.16s}.admin-navitem:active{transform:scale(.98)}.adm-panel,.admin-login-card,.admin-modal-box{box-shadow:0 1px 2px rgba(12,45,87,.04),0 8px 24px rgba(12,45,87,.07)}.adm-table tbody tr{transition-property:background-color;transition-duration:.12s;cursor:pointer}.adm-table tbody tr:hover{background:var(--accent-soft,#eaf2fb)}.adm-table td,.adm-table th,.admin-period,.kpi-value{font-variant-numeric:tabular-nums}.admin-search{transition-property:border-color,box-shadow,width;transition-duration:.2s}.admin-modal-box{animation:.22s cubic-bezier(.2,0,0,1) adm-pop}@keyframes adm-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}.cd-card,.ec-card,.portal-card{box-shadow:0 1px 2px rgba(12,45,87,.03),0 4px 14px rgba(12,45,87,.05);transition-property:box-shadow,transform;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1)}.cd-card:hover,.ec-card:hover,.portal-card:hover{box-shadow:0 2px 4px rgba(12,45,87,.04),0 12px 30px rgba(12,45,87,.09)}@media (prefers-reduced-motion:reduce){.admin-modal-box{animation:none}}.main-nav a{white-space:nowrap}.main-nav ul{flex-wrap:nowrap}@media (min-width:861px) and (max-width:1420px){.main-nav ul{gap:1.05rem}.main-nav a:not(.btn){font-size:.88rem}.main-nav a.btn{padding:.55rem 1.05rem;font-size:.88rem}}@media (min-width:861px) and (max-width:1180px){.main-nav ul{gap:.8rem}.main-nav a:not(.btn){font-size:.84rem}.main-nav a.btn{padding:.5rem .9rem;font-size:.84rem}}@media (max-width:960px){.main-nav .nav-search-btn{display:none!important}.main-nav li:has(> .nav-search-btn){display:none!important}}h2{font-size:clamp(1.5rem, 2.6vw, 2.15rem)}h3{font-size:1.15rem}.section-head h2{font-size:clamp(1.5rem, 2.7vw, 2.2rem)}.page-header h1{font-size:clamp(1.7rem, 3.4vw, 2.5rem)}.prose h2,article h2{font-size:clamp(1.25rem, 2vw, 1.45rem)}.prose h3,article h3{font-size:1.12rem}.cta-band h2{font-size:clamp(1.4rem, 2.4vw, 2rem)}@media (max-width:680px){.section-head h2,h2{font-size:clamp(1.3rem, 5.4vw, 1.6rem)}.prose h2,article h2{font-size:1.25rem}}.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.6rem);line-height:1.08;letter-spacing:-.02em}.hero h1 em.hl{font-style:normal;color:var(--accent);background:linear-gradient(transparent 55%,rgba(207,74,18,.45) 55%);padding:0 .08em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}.v3-steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:2.2rem 0 0;padding:0}.v3-steps li{counter-increment:s;list-style:none;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:1.05rem 1.1rem;position:relative;box-shadow:0 1px 2px rgba(12,45,87,.03),0 4px 14px rgba(12,45,87,.05)}.v3-steps li::before{content:counter(s);position:absolute;top:-14px;left:14px;width:28px;height:28px;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.9rem;display:grid;place-items:center;border-radius:99px;box-shadow:0 4px 10px rgba(207,74,18,.4)}.v3-steps b{display:block;font-family:var(--font-head);color:var(--primary);font-size:.95rem;margin-bottom:.2rem}.v3-steps span{font-size:.83rem;color:var(--text-soft)}.v3-guarantee{display:inline-flex;align-items:center;gap:.6rem;background:var(--accent-soft);border-radius:999px;padding:.55rem 1.2rem;font-size:.86rem;color:var(--secondary);font-weight:600}@media (max-width:680px){.v3-steps{grid-template-columns:1fr;gap:1.3rem;margin-top:1.9rem}.hero h1{font-size:clamp(1.9rem, 7.4vw, 2.3rem)}.v3-guarantee{font-size:.8rem;padding:.5rem 1rem}}.icn{width:1.1em;height:1.1em;vertical-align:-.18em;display:inline-block;flex:none}.icn-inline{margin-right:.1em;color:var(--secondary)}.icn-num{width:1.25em;height:1.25em;vertical-align:-.25em}.btn .icn,.quote-bar .icn{color:currentColor}.card-icon .icn,.hero-sat .icn{color:var(--accent)}.nav-toggle .icn{width:1.4em;height:1.4em;color:var(--primary)}.section-head p.lead{margin-top:.4rem}.page-header{padding:clamp(1.8rem,4vw,3.2rem) 0}.hero{padding:clamp(2rem,4vw,3.4rem) 0}.hero .lead{margin:.9rem 0 0}.v3-steps{margin-top:1.6rem}.hero-ctas{margin-top:1.4rem}.v3-guarantee{margin-top:1.1rem}.grid{gap:1rem}.card,.contact-info-card{padding:1.25rem 1.3rem}.card h3{margin-bottom:.4rem}.card p{margin:0}.check-list{margin:.7rem 0 1rem;gap:.45rem}.prose h2{margin-top:1.6rem}.prose h3{margin-top:1.1rem}.prose ol,.prose p,.prose ul{margin-block:.65rem}.cta-band{padding:clamp(1.8rem,3.6vw,2.8rem) 0}.footer-grid{padding:1.4rem 0 .9rem;gap:.9rem 1.6rem}.site-footer li,.site-footer p{margin-block:.2rem}.marquee{padding:.55rem 0}.wizard-progress{margin-bottom:2rem}.wizard-step h2{margin-bottom:.6rem}.choice-grid{margin:1rem 0;gap:.75rem}.choice{will-change:auto;padding:.85rem 1rem}.form-grid{gap:.8rem 1rem}.form-field{margin-bottom:.2rem}.compare td,.compare th{padding:.55rem .8rem}@media (max-width:680px){.page-header,.section{padding:1.5rem 0}.hero{padding:1.6rem 0 1.9rem}.section-head{margin-bottom:1.1rem}h2{margin-bottom:.5rem}.grid{gap:.8rem}.footer-grid{padding:1.2rem 0 .8rem}}.section{padding:clamp(1.5rem,3vw,2.6rem) 0}.section-head{margin-bottom:1.1rem}h2{margin-bottom:.55rem}.lead{margin-top:.35rem;font-size:1.08rem}ol,p,ul{margin-block:.55rem}.hero-card ol li{margin-block:.45rem}.engagement,.pricing-card,.zone{padding:1.15rem 1.2rem}.cta-band h2{margin-bottom:.5rem}.steps{gap:.9rem}@media (max-width:680px){.contact-info-card,.hero-card{padding:1.1rem 1.15rem}}.card-pole,.eyebrow.is-pole{color:var(--accent)!important;background:var(--accent-soft);padding:.28rem .7rem;border-radius:999px}.card-pole{display:inline-block}table.compare td:last-child,table.compare td:last-child strong{color:var(--accent)!important;font-weight:700}.choice-price,.price{color:var(--price-ink)!important}.pay-summary .pay-amount{color:#fff}.dj-price,.price-strong{color:var(--price-ink);font-weight:700}.btn .dj-price,.cta .dj-price,a[class*=btn] .dj-price,button .dj-price{color:inherit}.dj-date{color:var(--secondary);font-weight:600;white-space:nowrap}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}:root{--font-body:'Inter',system-ui,sans-serif}body{font-family:var(--font-body);font-size:.98rem;letter-spacing:.001em}.badge-inclus{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-hover);color:#fff!important;font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.35rem .85rem;border-radius:999px;box-shadow:0 4px 12px rgba(207,74,18,.35)}.card .card-pole{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .75rem .3rem .35rem;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:var(--accent-soft);font-size:.7rem;letter-spacing:.12em;margin-bottom:.75rem}.card .card-pole::before{counter-reset:pole;content:attr(data-n);display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:999px;background:var(--accent);color:#fff;font-size:.68rem;letter-spacing:0;font-weight:700}.card .card-pole+h3{font-size:1.35rem;letter-spacing:-.01em;margin-bottom:.55rem}.card .price-note{font-weight:600;font-size:.92rem}.card>p.price-note:last-child{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--border)}.card .price-note+.card-link{margin-top:.8rem}.card .card-link{display:inline-flex;align-items:center;gap:.35rem}.card .card-link .icn,.card .card-link svg.icn{transition:transform .25s cubic-bezier(.2,0,0,1)}.card:hover .card-link .icn{transform:translateX(4px)}.eyebrow.is-pole{border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}.ec-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:.9rem 0 1.1rem}.ec-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.75rem .95rem;box-shadow:var(--shadow-sm)}.ec-kpi b{display:block;font-family:var(--font-head);font-size:1.25rem;color:var(--accent);font-variant-numeric:tabular-nums}.ec-kpi span{font-size:.8rem;color:var(--text-soft)}@media (max-width:900px){.ec-kpis{grid-template-columns:repeat(2,1fr)}}.ec-tab-premium{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)!important;color:var(--accent)!important}.ec-tab-premium.active{background:var(--accent-surface)!important;color:#fff!important}.panel-premium{border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);position:relative}.panel-premium::before{content:"Premium · inclus";position:absolute;top:-.62rem;right:1rem;background:var(--accent);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .6rem;border-radius:999px}.op-form{display:grid;gap:.8rem;margin-bottom:1rem}.op-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:end}@media (max-width:720px){.op-row{grid-template-columns:1fr}}.op-form label{display:block;font-size:.85rem;font-weight:600;color:var(--primary)}.op-form label small{font-weight:400;color:var(--text-soft)}.op-form input[type=number],.op-form select{width:100%;margin-top:.3rem;padding:.55rem .7rem;border:1px solid var(--border);border-radius:10px;font:inherit;background:var(--surface)}.op-check{display:flex!important;align-items:center;gap:.45rem;font-weight:500!important}.op-table{width:100%;border-collapse:collapse;font-size:.92rem}.op-table td{padding:.5rem .4rem;border-bottom:1px dashed var(--border)}.op-table td:last-child{text-align:right;color:var(--accent);font-weight:600;white-space:nowrap}.op-warn{background:var(--accent-soft);border-radius:10px;padding:.7rem .9rem;margin-top:.8rem}.op-warn p{margin:.25rem 0;font-size:.88rem}.op-src{margin-top:.8rem!important}.oa-card{border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;margin-bottom:.7rem;background:var(--surface)}.oa-head{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;flex-wrap:wrap}.oa-org{font-size:.78rem;color:var(--secondary);font-weight:600}.oa-montant{color:var(--price-ink);font-weight:700;margin:.25rem 0 .35rem}.oa-card p{font-size:.88rem;margin:.25rem 0}.oa-actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}.btn-sm{padding:.4rem .8rem;font-size:.82rem}.oa-acc-list{display:grid;gap:.45rem}.oa-acc{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}.oa-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem .9rem;font-size:.9rem}.oa-acc>summary::-webkit-details-marker{display:none}.oa-acc>summary::after{content:"⌄";color:var(--text-soft);font-size:1.1rem;transition:transform .2s;flex:none}.oa-acc[open]>summary::after{transform:rotate(180deg)}.oa-acc[open]>summary{border-bottom:1px solid var(--border)}.oa-acc-t{display:flex;flex-direction:column;gap:.1rem;min-width:0}.oa-acc-t strong{line-height:1.2}.oa-acc-m{color:var(--secondary);font-weight:700;font-size:.82rem;white-space:nowrap;text-align:right}.oa-acc-body{padding:.3rem .9rem .8rem}.oa-acc-body p{font-size:.88rem;margin:.35rem 0}.oc-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}.oc-list label{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--border);border-radius:10px;cursor:pointer}.oc-list input:checked+span{opacity:.55;text-decoration:line-through}.dashboard .panel>h3{position:relative;padding-left:.75rem}.dashboard .panel>h3::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:4px;background:var(--accent)}.legal-page .prose h2{color:var(--accent);padding-left:.7rem;border-left:4px solid var(--accent)}.legal-page .prose h3{color:var(--secondary)}.legal-page .prose a{color:var(--secondary);text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}.legal-page .prose strong{color:var(--secondary)}.legal-page .prose ul li::marker{color:var(--accent)}.legal-page .prose table th{background:var(--accent-soft);color:var(--primary)}.legal-page .prose blockquote{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;padding:.8rem 1rem;margin:1rem 0}.card p.step-num{color:var(--accent);font-size:1.7rem}#ec-overlay{position:fixed;inset:0;z-index:1000;background:rgba(12,45,87,.55);display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px)}.eco-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.3));width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}.eco-head{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--border)}.eco-head h3{margin:0;font-size:1.05rem}.eco-close{background:0 0;border:0;font-size:1.1rem;cursor:pointer;color:var(--text-soft);padding:.3rem .5rem;border-radius:8px}.eco-close:hover{background:var(--accent-soft);color:var(--accent)}.eco-body{padding:1rem 1.2rem 1.2rem;overflow:auto}.eco-frame{width:100%;height:62vh;border:1px solid var(--border);border-radius:10px;background:#fff}.eco-table{width:100%;border-collapse:collapse;font-size:.93rem}.eco-table td{padding:.5rem .4rem;border-bottom:1px dashed var(--border)}.eco-table td:first-child{color:var(--text-soft);width:38%}.eco-table td:last-child{font-weight:600}.acc-hero{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem;padding:.8rem;background:var(--accent-soft);border-radius:12px}.acc-avatar{width:52px;height:52px;border-radius:999px;background:var(--accent-surface);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-size:1.4rem;font-weight:700;flex:none}.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}@media (max-width:640px){.acc-grid{grid-template-columns:1fr}}.acc-sec{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.65rem 0;border-bottom:1px dashed var(--border)}.acc-status{color:var(--secondary);font-size:.88rem;margin-top:.6rem;min-height:1.2em}.crm-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin:0 0 1rem}.crm-stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem}.crm-stat .crm-k{font-family:var(--font-head,inherit);font-weight:700;font-size:1.25rem;line-height:1.1}.crm-stat .crm-l{font-size:.76rem;color:var(--muted,#617180);text-transform:uppercase;letter-spacing:.03em}.crm-dupe{background:#fdece3;border:1px solid #f6c9b0;color:#8a481e;border-radius:12px;padding:.7rem .9rem;margin:0 0 1rem;font-size:.88rem;display:flex;gap:.4rem;align-items:flex-start}html[data-theme=dark] .crm-dupe{background:#2a1d15;border-color:#5a3822;color:#cf4a12}.crm-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.crm-search{flex:1;min-width:220px;display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:.55rem .8rem;transition:border-color .15s,box-shadow .15s}.crm-search:focus-within{border-color:var(--accent,#cf4a12);box-shadow:0 0 0 3px rgba(207,74,18,.12)}.crm-search .ni-ico{width:18px;height:18px;flex:none;opacity:.6}.crm-search input{flex:1;border:0;background:0 0;font:inherit;font-size:.92rem;color:inherit;outline:0}.crm-views{display:flex;gap:.35rem}.cli-cell{display:flex;align-items:center;gap:.65rem}.cli-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;background:linear-gradient(135deg,#cf4a12,#cf4a12)}.up-bad{color:#cf4a12;font-weight:600}.crm-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:.9rem}.pipe-col{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.6rem;min-height:120px}.pipe-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.85rem;padding:.2rem .3rem .55rem;border-bottom:1px solid var(--border);margin-bottom:.55rem}.pipe-head span{background:var(--pill,#eee);color:inherit;border-radius:999px;padding:.05rem .5rem;font-size:.75rem}.pipe-card{background:var(--bg,#fff);border:1px solid var(--border);border-radius:10px;padding:.6rem .65rem;margin-bottom:.5rem;cursor:pointer;transition:transform .1s,box-shadow .15s}.pipe-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.07)}.pipe-card b{display:block;font-size:.9rem}.pipe-card small{display:block}.pipe-meta{margin-top:.3rem;font-size:.78rem;color:var(--muted,#617180)}@media(max-width:900px){.crm-stats{grid-template-columns:repeat(2,1fr)}.crm-pipe{grid-template-columns:1fr 1fr}}@media(max-width:560px){.crm-pipe{grid-template-columns:1fr}}
/* ============================================================
   CHARTE ICÔNES — couleur unique terracotta #cf4a12 (MàJ 05/08/2026)
   Emojis des tuiles remplacés par icônes SVG ; couleur d'icône unifiée.
   ============================================================ */
.card-icon { color: var(--accent); }
.card-icon svg, .card-icon .icn { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.card-icon.is-emoji { color: transparent; text-shadow: 0 0 0 var(--accent); }
.icn, .icn-inline, .dd-ic, .dropdown .icn, .ni-ico, .es-ico, .kpi-ico,
.doc-ic, .tpl-ic, .dl-ic, .mq-ic, .upload-ic, .ec-ic, .hero-sat .icn,
.nav-toggle .icn, .nav-search-btn svg, svg.icn { color: var(--accent); }
.btn .icn, .quote-bar .icn { color: currentColor; }

/* ============================================================
   CORRECTIFS 05/08 — logo header/footer visibles + flèche retour-haut lisible
   ============================================================ */
.to-top .icn, .to-top svg { color: var(--primary) !important; }

/* ============================================================
   ICÔNES INLINE (.e-ico) — émojis décoratifs remplacés par SVG terracotta (MàJ 05/08/2026)
   ============================================================ */
.e-ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--accent);flex:none}
h1 .e-ico,h2 .e-ico,h3 .e-ico,h4 .e-ico,summary .e-ico,.choice-group-title .e-ico,.callout .e-ico,.v3-guarantee .e-ico,.filter-btn .e-ico,li .e-ico,.admin-secnote .e-ico,.pay-box .e-ico,.price-note .e-ico,.warn .e-ico,.lock .e-ico,.pay-methods .e-ico{margin-right:.35em}
.v3-guarantee .e-ico{color:var(--secondary)}
.hero-sat .e-ico{color:var(--accent)}
.good .e-ico{color:#1f9d55}
.bad .e-ico,.warn .e-ico{color:#cf4a12}
.btn .e-ico,.quote-bar .e-ico{color:currentColor}
.dl-ic .e-ico,.stat-emoji .e-ico{color:var(--accent)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   CHIFFRES / MONTANTS — couleur unique terracotta (MàJ 06/08/2026)
   ============================================================ */
.price, .choice-price, .dj-price, .price-strong, .oa-montant, .oa-acc-m,
.kpi b, .stat b, .num, .step-num, .crm-stat .crm-k, .ec-kpi b,
.cmp-net, .result-net, .result-net span,
table.compare td:last-child, table.compare td:last-child strong,
table.statuts td.reco-col { color: var(--accent) !important; }
/* lisibilité : garder blanc sur boutons pleins et fonds foncés */
.btn .dj-price, .cta .dj-price, a[class*="btn"] .dj-price, button .dj-price,
.quote-bar .dj-price, .pay-summary .pay-amount { color: #fff !important; }

/* Dashboard admin : accès direct à l'espace client depuis la fiche client */
.cli-espace{display:inline-block;margin-top:.15rem;font-size:.72rem;font-weight:600;color:var(--accent);text-decoration:none}
.cli-espace:hover{text-decoration:underline}

/* refonte: UI en Inter (Playfair reserve aux titres) */
.btn,.eyebrow,.hero-badge,.card .card-link,.card-pole,.filter-btn,.mobile-actionbar a,table.compare th,details.faq-item summary,.mq-item,.badge-inclus,.v3-steps b{font-family:var(--font-body)}

/* refonte-responsive-cluster-bas */
@media (max-width:960px){
  body.has-actionbar{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .to-top{bottom:calc(164px + env(safe-area-inset-bottom))!important;top:auto!important}
  .mohna-fab{bottom:calc(90px + env(safe-area-inset-bottom))!important}
  .mohna-chat-btn{bottom:auto!important}
  #wa-float,.wa-fab{bottom:calc(90px + env(safe-area-inset-bottom))!important}
}
body:has(.cookie-banner.show) .mobile-actionbar,
body:has(.cookie-banner.show) .to-top,
body:has(.cookie-banner.show) .mohna-fab,
body:has(.cookie-banner.show) .mohna-chat-btn,
body:has(.cookie-banner.show) .mohna-reopen,
body:has(.cookie-banner.show) #wa-float,
body:has(.cookie-banner.show) .wa-fab{display:none!important}
body.has-actionbar .cookie-banner{bottom:0!important}
.page-wizard .mobile-actionbar{display:none!important}

/* refonte-responsive-densite */
/* anti-debordement horizontal (ceinture) */
html,body{overflow-x:clip;max-width:100%}
/* wizard : assistant au-dessus de la quote-bar + pas de debordement */
@media (max-width:960px){
  .page-wizard .mohna-fab{bottom:calc(120px + env(safe-area-inset-bottom))!important}
  .page-wizard .to-top{bottom:calc(188px + env(safe-area-inset-bottom))!important}
  .page-wizard .quote-bar{max-width:100vw;box-sizing:border-box}
}
/* densite mobile : moins de scroll, lisibilite conservee */
@media (max-width:600px){
  .section{padding:2.1rem 0}
  .hero{padding:2.3rem 0 1.7rem}
  .section-head{margin-bottom:1.5rem}
  .grid,.steps,.zones,.engagements,.pricing,.grid-2,.grid-3,.grid-4{gap:1rem}
  .card,.step,.zone{padding:1.35rem}
  .hero-ctas{margin-top:1.5rem;gap:.7rem}
  .hero-points{margin-top:1.4rem}
  .cta-band{padding:2.4rem 1.3rem}
  p{margin:0 0 .85em}
}
@media (max-width:900px) and (min-width:601px){
  .section{padding:2.6rem 0}
}

/* refonte-condense-mobile */
@media (max-width:600px){
  /* sections plus courtes */
  .section{padding:1.7rem 0}
  .section-head{margin-bottom:1.15rem}
  .section-head p{font-size:.94rem;margin-top:.5rem}
  /* cartes plus basses */
  .card,.step,.zone{padding:1.05rem}
  .card-icon{width:42px;height:42px;margin-bottom:.55rem;font-size:1.15rem}
  .card h3,.zone h3{font-size:1.02rem;margin-bottom:.3rem}
  .card p,.zone p{font-size:.9rem;line-height:1.5}
  .card ul{font-size:.88rem;gap:.3rem}
  /* processus : bande 2x2 compacte */
  .steps{grid-template-columns:1fr 1fr!important;gap:.6rem}
  .step{padding:.9rem}
  .step-num{font-size:1.7rem;margin-bottom:.15rem}
  .step p{font-size:.86rem}
  /* simulateurs & grilles 4 : 2 colonnes compactes */
  .grid-4{grid-template-columns:1fr 1fr!important;gap:.6rem}
  /* zones : 2 colonnes compactes */
  .zones{grid-template-columns:1fr 1fr!important;gap:.6rem}
  .zone{padding:.9rem}
  /* hero-card resserré */
  .hero-card{padding:1.15rem}
  .hero-card ol{gap:.5rem;font-size:.9rem}
  /* premium condensé */
  #premium{padding:1.7rem 0}
  #premium .member-preview,#premium .card{padding:1.2rem}
}
@media (max-width:380px){
  .steps,.grid-4,.zones{grid-template-columns:1fr!important}
}

/* refonte-flottants-stables-cta */
/* boutons flottants : stables (plus de disparition au scroll) */
.mohna-fab.fab-away,.wa-fab.fab-away,#wa-float.fab-away{transform:none!important;opacity:1!important}
/* Démarrer / primaire : orange action + texte blanc (AA 4.51), plus affirmé */
.btn-primary{background:var(--action)!important;color:#fff!important;box-shadow:0 4px 14px rgba(18,57,94,.30)!important}
.btn-primary:hover{background:var(--action-hover)!important;color:#fff!important;box-shadow:0 8px 22px rgba(18,57,94,.42)!important;transform:translateY(-1px)}
.mobile-actionbar a.primary{background:#b8430f!important;color:#fff!important;font-weight:700}

/* refonte-barre-A */
@media (max-width:960px){
  .mobile-actionbar.ab5{grid-template-columns:repeat(5,1fr)!important;gap:.2rem;padding:.3rem .25rem calc(.35rem + env(safe-area-inset-bottom))}
  .mobile-actionbar.ab5 a,.mobile-actionbar.ab5 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:0;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:.66rem;color:var(--text-soft);min-height:54px;text-decoration:none;padding:.4rem .1rem;border-radius:12px;line-height:1.05}
  .mobile-actionbar.ab5 .ab-ic{width:22px;height:22px;display:block}
  .mobile-actionbar.ab5 .ab-ic svg{width:22px;height:22px;display:block}
  .mobile-actionbar.ab5 .ab-tx{white-space:nowrap}
  .mobile-actionbar.ab5 .ab-wa{color:#128C4B}
  .mobile-actionbar.ab5 a.primary{background:#b8430f;color:#fff}
  .mobile-actionbar.ab5 a.primary .ab-ic{color:#fff}
  .mobile-actionbar.ab5 a:active,.mobile-actionbar.ab5 button:active{transform:scale(.95)}
  #wa-float,.wa-fab,.mohna-fab{display:none!important}
  body.has-actionbar{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}

/* refonte-barre-A-fix */
@media (max-width:960px){
  .mobile-actionbar.ab5 a,.mobile-actionbar.ab5 button{min-width:0;overflow:hidden}
  .mobile-actionbar.ab5 a span,.mobile-actionbar.ab5 button span{font-size:inherit!important}
  .mobile-actionbar.ab5 .ab-tx{font-size:.6rem!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600}
  .mobile-actionbar.ab5 .ab-ic{font-size:0!important}
  .mobile-actionbar.ab5 .ab-ic svg{width:21px;height:21px}
}

/* dark-mode-eyebrow-fix */
html[data-theme=dark]{--secondary:#cf4a12}

/* logos-webp */
.site-header .logo{background-image:url("../logo-horizontal.svg?v=logo3")}
.footer-logo{background-image:url("../logo-horizontal-white.svg?v=logo3")}

/* A11y contraste (audit 2026-08-09) : orange vif reserve au decor -> texte en orange fonce (AA) */
.dj-price{color:#b8430f!important}
.mq-p,.mq-p b{color:#b8430f!important}
.card-pole{color:#b8430f!important}
#wa-float{background:#0f7a41!important}

/* Reveal au scroll plus lisible (2026-08-09) : apparition plus tot, plus rapide, moins de deplacement */
.reveal{transform:translateY(10px)!important;transition:opacity .32s ease,transform .32s ease!important}
.reveal.in{opacity:1!important;transform:none!important}
.reveal.reveal-left{transform:translateX(-14px)!important}
.reveal.reveal-right{transform:translateX(14px)!important}
.reveal.reveal-left.in,.reveal.reveal-right.in{transform:none!important}


/* Menu mobile v2 (burger + tiroir) — 2026-08-09 */
.nav-ic{width:19px;height:19px;flex:none}
@media (min-width:961px){ .main-nav .nav-ic{display:none} .nav-quick{display:none} }
@media (max-width:960px){
  .nav-toggle{border:0!important;background:var(--surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.05),0 3px 10px rgba(12,45,87,.09)!important;position:relative}
  .nav-toggle::after{content:"";position:absolute;top:9px;right:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);transition:opacity .2s}
  .nav-toggle.is-open::after{opacity:0}
  .burger i{height:2.5px}
  .main-nav{background:var(--bg)!important;border-left:0!important}
  .nav-drawer-head{background:var(--bg)!important;border-bottom:0!important;padding-bottom:.2rem}
  .nav-drawer-head .logo-name::after{content:"MENU";display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.22em;color:var(--secondary);margin-top:2px}
  .nav-close{border:0!important;border-radius:50%!important;background:var(--surface)!important;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .main-nav ul::before{content:"Navigation";display:block;font-family:var(--font-body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);padding:6px 8px 4px}
  .main-nav > ul > li > a{gap:12px;border-bottom:0!important;border-radius:12px;min-height:46px;color:var(--text)}
  .main-nav .nav-ic{stroke:var(--secondary)}
  .main-nav > ul > li > a[aria-current=page]{background:var(--surface)!important;color:var(--secondary);box-shadow:0 1px 3px rgba(12,45,87,.07);position:relative}
  .main-nav > ul > li > a[aria-current=page]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
  .main-nav > ul > li > a[aria-current=page] .nav-ic{stroke:var(--accent-hover)}
  .main-nav a.btn,.main-nav a.btn-primary{background:var(--action)!important;color:#fff!important;border:0!important;box-shadow:0 4px 14px rgba(18,57,94,.3)!important;min-height:52px;border-radius:14px}
  .nav-theme-li{display:flex!important;align-items:center;justify-content:space-between;padding:8px 12px;margin-top:4px}
  .nav-theme-li::before{content:"Th\00e8me";font-size:.9rem;color:var(--text-soft)}
  .nav-quick{display:flex;gap:10px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border);margin-top:6px}
  .nav-quick a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:.9rem;font-weight:600;color:var(--text);text-decoration:none}
  .nav-quick a svg{width:16px;height:16px}
  .nav-quick a.wa svg{stroke:#0f7a41}
  .nav-quick a:not(.wa) svg{stroke:var(--secondary)}
}

/* ===== Barre de navigation v3 (2026-08-09) : espace, pastilles, sous-menus + menu Ressources ===== */
@media (min-width:961px){
  .site-header{backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-bottom:none}
  .nav-wrap{min-height:74px}
  .site-header .logo{margin-right:1.7rem}
  .main-nav>ul{gap:.18rem}
  .main-nav>ul>li>a:not(.btn){font-size:.9rem;font-weight:500;padding:.5rem .72rem;border-radius:10px;color:var(--text);transition:background .2s ease,color .2s ease}
  .main-nav>ul>li>a:not(.btn)::after{display:none!important}
  .main-nav>ul>li>a:not(.btn):hover{background:rgba(169,103,60,.09);color:var(--link)}
  .main-nav>ul>li>a[aria-current=page]:not(.btn){background:rgba(169,103,60,.13);color:var(--link);font-weight:600}
  .main-nav a.btn{margin-left:.55rem;box-shadow:0 6px 18px rgba(207,74,18,.3)}
  /* sous-menus existants harmonises */
  .main-nav .dropdown{background:var(--bg)!important;border:1px solid rgba(12,45,87,.09)!important;border-radius:14px!important;box-shadow:0 16px 40px rgba(12,45,87,.16)!important;padding:7px!important;min-width:252px}
  .main-nav .dropdown a{border-radius:9px!important;padding:.55rem .65rem!important;font-size:.9rem!important;color:var(--text)!important;display:flex;align-items:center;gap:.6rem;white-space:normal;line-height:1.3}
  .main-nav .dropdown a:hover{background:rgba(169,103,60,.1)!important;color:var(--link)!important}
  .main-nav .dropdown a[aria-current=page]{background:rgba(169,103,60,.13)!important;color:var(--link)!important;font-weight:600}
  .main-nav .dropdown a .dd-ic{stroke:var(--secondary);width:17px;height:17px}
  .main-nav .dropdown a:hover .dd-ic{stroke:var(--link)}
  /* menu Ressources (mega) */
  .nav-group{position:relative;display:flex;align-items:center}
  .nav-ddbtn{font-family:inherit;font-size:.9rem;font-weight:500;color:var(--text);background:none;border:0;cursor:pointer;padding:.5rem .72rem;border-radius:10px;display:inline-flex;align-items:center;gap:.28rem;transition:background .2s,color .2s}
  .nav-ddbtn .ddcar{transition:transform .2s}
  .nav-group:hover .nav-ddbtn,.nav-group.open .nav-ddbtn,.nav-group.active .nav-ddbtn{background:rgba(169,103,60,.1);color:var(--link)}
  .nav-group:hover .ddcar,.nav-group.open .ddcar{transform:rotate(180deg)}
  .nav-mega{position:absolute;top:calc(100% + 10px);right:0;background:var(--bg);border:1px solid rgba(12,45,87,.09);border-radius:16px;box-shadow:0 20px 50px rgba(12,45,87,.18);padding:16px 18px;display:none;grid-template-columns:repeat(3,minmax(196px,220px));gap:7px 28px;max-width:calc(100vw - 24px);z-index:130}
  .nav-group:hover .nav-mega,.nav-group.open .nav-mega{display:grid}
  .nav-mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
  .nav-mega .col h4{font-family:var(--font-body);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);margin:2px 0 6px;padding:0 8px}
  .nav-mega a{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .6rem;border-radius:9px;font-size:.88rem;line-height:1.3;color:var(--text);text-decoration:none;white-space:normal;transition:background .2s,color .2s}
  .nav-mega a span{min-width:0}
  .nav-mega a::after{display:none!important}
  .nav-mega a:hover{background:rgba(169,103,60,.1);color:var(--link)}
  .nav-mega a[aria-current=page]{background:rgba(169,103,60,.13);color:var(--link);font-weight:600}
  .nav-mega a.all{margin-top:3px;font-weight:600;color:var(--link)}
  .nav-mega a svg{width:16px;height:16px;stroke:var(--secondary);flex:none;margin-top:2px}
}
@media (max-width:960px){
  .nav-group{display:block;border-top:1px solid var(--border);margin-top:.35rem;padding-top:.2rem}
  .nav-ddbtn{width:100%;text-align:left;background:none;border:0;font-family:var(--font-body);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);padding:10px 8px 2px;display:flex;align-items:center;gap:.3rem}
  .nav-ddbtn .ddcar{display:none}
  .nav-mega{display:block}
  .nav-mega .col{margin:0 0 4px}
  .nav-mega .col h4{font-family:var(--font-body);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);padding:6px 10px 2px;margin:0}
  .nav-mega a{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .75rem;border-radius:10px;font-size:.96rem;color:var(--text);text-decoration:none}
  .nav-mega a[aria-current=page]{color:var(--link);font-weight:600}
  .nav-mega a svg{width:17px;height:17px;stroke:var(--secondary);flex:none}
  .nav-mega a.all{font-weight:600;color:var(--link)}
}

/* ===== Correctifs THÈME SOMBRE (2026-08-09) : logo + contenus a contraste ===== */
/* Logo : en-tete sombre -> version claire (M creme + C cuivre + texte cuivre) */
[data-theme=dark] .site-header .logo{background-image:url("../logo-horizontal-white.svg?v=logo3")!important}
/* Bouton clair : fond clair code en dur -> surface sombre lisible */
[data-theme=dark] .btn-light{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)}
[data-theme=dark] .btn-light:hover{background:var(--pill)!important}
/* Carte "verre" du hero : blanc translucide -> sombre translucide */
[data-theme=dark] .hero-card-glass{background:rgba(26,28,29,.74)!important;border-color:rgba(207,74,18,.4)!important}
/* Overrides d'accessibilite (cuivre fonce) illisibles sur fond sombre -> tons clairs */
[data-theme=dark] .dj-price{color:var(--accent)!important}
[data-theme=dark] .mq-p,[data-theme=dark] .mq-p b{color:var(--text)!important}
[data-theme=dark] .card-pole{color:var(--accent)!important}
[data-theme=dark] a[class*=btn] .dj-price,[data-theme=dark] .cta .dj-price,[data-theme=dark] button .dj-price{color:#fff!important}
/* Champs de formulaire : fond clair -> fond sombre + texte clair */
[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-theme=dark] select,[data-theme=dark] textarea{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:var(--text-soft)!important}
/* Espace client : carte promo (degrade primary-dark->primary) vire au blanc en sombre -> degrade sombre */
[data-theme=dark] .member-side{background:linear-gradient(160deg,#3a2b22,#1a1c1d)!important;color:var(--text)}

/* ===== View Transitions (2026-08-09) : fondu doux entre pages, progressif ===== */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .18s ease both}
  ::view-transition-new(root){animation:vt-in .22s ease both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ===== Nav compacte 961-1200px (evite le debordement du CTA/theme, sans coller) — 2026-08-09 ===== */
@media (min-width:961px) and (max-width:1200px){
  .site-header .logo{margin-right:.3rem;width:130px;height:35px}
  .main-nav>ul{gap:.02rem}
  .main-nav>ul>li>a:not(.btn){padding:.46rem .42rem;font-size:.84rem}
  .nav-ddbtn{padding:.46rem .42rem;font-size:.84rem;gap:.18rem}
  .main-nav a.btn{margin-left:.26rem;padding:.5rem .66rem;font-size:.84rem}
}

/* === Thème sombre — corrections de lisibilité (2026-08-10) === */
html[data-theme=dark]{--muted:#9aabbd}
html[data-theme=dark] .dropdown,html[data-theme=dark] .nav-dd,html[data-theme=dark] .has-dropdown .dropdown{background:#1a1c1d!important;border-color:#2d3032!important}
html[data-theme=dark] .dropdown a,html[data-theme=dark] .has-dropdown>a,html[data-theme=dark] .nav-ddbtn,html[data-theme=dark] .main-nav .dropdown a,html[data-theme=dark] .main-nav a:not(.btn){color:#e2e8f0!important}
html[data-theme=dark] .dropdown a:hover{background:rgba(207,74,18,.16)!important;color:#fff!important}
html[data-theme=dark] .btn-outline{color:#e2e8f0!important;border-color:rgba(207,74,18,.55)!important}
html[data-theme=dark] .btn-outline:hover{background:#212324!important}
html[data-theme=dark] .cpt-table th,html[data-theme=dark] .compare th,html[data-theme=dark] .op-table th,html[data-theme=dark] .eco-table th,html[data-theme=dark] .adm-table th{background:#212324!important;color:#e2e8f0!important;border-color:#2d3032!important}
html[data-theme=dark] .card-pole,html[data-theme=dark] .eyebrow.is-pole,html[data-theme=dark] .up-bad{color:#cf4a12!important}
html[data-theme=dark] .card .card-pole::before{background:var(--accent)!important;color:#111213!important}
html[data-theme=dark] .mohna-breadcrumb,html[data-theme=dark] .mohna-breadcrumb a,html[data-theme=dark] .mohna-breadcrumb span,html[data-theme=dark] .breadcrumb,html[data-theme=dark] .breadcrumb a,html[data-theme=dark] .breadcrumb span{color:#9aabbd!important}
html[data-theme=dark] .mohna-breadcrumb [aria-current],html[data-theme=dark] .mohna-breadcrumb span:last-child{color:#e2e8f0!important;font-weight:600}

.wa-fab{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}


/* ===== Sous-menu Tarifs "méga" (2026-08-11) ===== */
@media (min-width:961px){
  .main-nav .dropdown.dd-mega{display:flex!important;flex-wrap:wrap;gap:14px 20px;width:max-content;min-width:0;padding:14px 16px!important}
  .dd-mega .ddc{display:flex;flex-direction:column;gap:2px;min-width:180px}
  .dd-mega .ddc+.ddc{border-left:1px solid var(--border);padding-left:16px}
  .dd-mega .dd-h{font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--secondary);margin:2px 0 6px;padding:0 8px;display:flex;align-items:center;gap:.45em}
  .dd-mega .dd-h::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .dd-mega a.all{flex-basis:100%;justify-content:center;margin-top:2px;font-weight:600;color:var(--secondary)!important;border-top:1px solid var(--border)!important;border-radius:0 0 9px 9px!important;padding-top:.7rem!important}
  .dd-mega a.all::after{content:"\2192";display:inline-block!important;position:static!important;width:auto!important;height:auto!important;background:none!important;color:var(--accent);margin-left:.35rem}
}
@media (max-width:960px){
  .dd-mega .ddc{display:contents}
  .dd-mega .dd-h{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-soft);padding:8px 10px 2px;margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace}
  .dd-mega a.all{font-weight:600;color:var(--secondary)}
  .has-dropdown.open .dropdown.dd-mega{max-height:900px}
}

/* ===== tarifs.html — grille "Le détail par prestation" (2026-08-11) ===== */
.presta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.presta-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.presta-grid{grid-template-columns:1fr}}
a.presta{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--text);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}
a.presta:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.presta .p-tag{font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary)}
.presta h3{font-size:1rem;color:var(--text);font-weight:700;margin:0;line-height:1.35}
.presta h3::after{content:".";color:var(--accent)}
.presta .p-hook{font-size:.84rem;color:var(--text-soft);flex:1;margin:0;line-height:1.45}
.presta .p-foot{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--border);padding-top:8px;margin-top:4px}
.presta .p-price{font-family:var(--font-head);font-size:1.45rem;color:var(--accent);font-weight:700;line-height:1.1}
.presta .p-price small{font-family:var(--font-body);font-size:.72rem;color:var(--text-soft);font-weight:500;margin-left:2px}
.presta .p-price .des{font-family:var(--font-body);font-size:.72rem;color:var(--text-soft);font-weight:500;display:block;line-height:1;margin-bottom:2px}
.presta .p-go{font-size:.82rem;font-weight:600;color:var(--secondary);white-space:nowrap}
.presta .p-go::after{content:" \2192";color:var(--accent)}
a.presta.star{border:1.5px solid var(--accent)}
.presta .p-badge{position:absolute;top:-11px;right:14px;background:var(--accent-surface);color:#fff;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.presta-note{text-align:center;font-size:.85rem;color:var(--text-soft);margin-top:22px}

/* ===== Pages tarifs détaillées — gabarit v2 (2026-08-11) ===== */
.tp-hero{padding:52px 0 40px}
.tp-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start}
@media (max-width:860px){.tp-grid{grid-template-columns:1fr}}
.tp-hero h1{font-family:var(--font-head);font-size:clamp(1.9rem,4vw,2.5rem);line-height:1.15;color:var(--text);margin:14px 0}
.tp-hero h1 em{font-style:normal;color:var(--accent)}
.tp-hero .tp-lead{font-size:1.05rem;max-width:540px;color:var(--text-soft)}
.tp-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;padding:0;list-style:none}
.tp-trust li{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:500;color:var(--text)}
.tp-ck{width:18px;height:18px;flex:none;stroke:var(--success);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:rgba(15,107,79,.12);border-radius:50%;padding:3px}
.tp-price-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:12px;padding:15px 17px 12px;box-shadow:var(--shadow-md);position:sticky;top:86px}
.tp-price-card .tp-lab{font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--secondary);display:inline-flex;align-items:center;gap:.5em}
.tp-price-card .tp-lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tp-price-card .tp-big{font-family:var(--font-head);font-size:2.1rem;color:var(--text);line-height:1;margin:6px 0 2px}
.tp-price-card .tp-big small{font-family:var(--font-body);font-size:.85rem;color:var(--text-soft);font-weight:500}
.tp-price-card .tp-big .des{font-family:var(--font-body);font-size:.85rem;color:var(--text-soft);font-weight:500;display:block;line-height:1;margin-bottom:4px}
.tp-zero{display:inline-flex;align-items:center;gap:7px;background:rgba(15,107,79,.12);color:var(--success);font-size:.75rem;font-weight:600;border-radius:20px;padding:3px 10px;margin:5px 0 10px}
.tp-price-card ul{list-style:none;border-top:1px solid var(--border);padding:10px 0 0;margin:6px 0 12px}
.tp-price-card li{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;padding:4px 0;align-items:baseline;line-height:1.4}
.tp-price-card li b{color:var(--text);font-weight:600}
.tp-price-card li .v{font-family:var(--font-body);font-weight:600;font-size:.76rem;color:var(--secondary);white-space:normal;text-align:right;max-width:55%;line-height:1.35;flex:none}
.tp-price-card .btn{width:100%;text-align:center;margin-bottom:8px;padding:11px 18px}
.tp-price-card .tp-micro{font-size:.7rem;color:var(--text-soft);text-align:center;line-height:1.45;margin:0}
.tp-price-card .tp-micro b{color:var(--text)}
.tp-pull{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 10px 10px 0;padding:18px 20px;font-size:.95rem;color:var(--text);font-weight:500;line-height:1.6}
.tp-inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
@media (max-width:700px){.tp-inc-grid{grid-template-columns:1fr}}
.tp-inc{display:flex;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 13px;font-size:.86rem;align-items:flex-start}
.tp-inc b{color:var(--text);display:block;font-weight:600}
.tp-inc span{font-size:.83rem;color:var(--text-soft)}
.tp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;counter-reset:tpst}
@media (max-width:820px){.tp-steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tp-steps{grid-template-columns:1fr}}
.tp-step{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 15px;position:relative}
.tp-step::before{counter-increment:tpst;content:counter(tpst,decimal-leading-zero);font-family:var(--font-head);font-size:1.7rem;color:var(--accent);display:block;margin-bottom:6px}
.tp-step b{color:var(--text);font-size:.94rem;display:block;margin-bottom:4px}
.tp-step p{font-size:.83rem;margin:0;color:var(--text-soft);line-height:1.5}
.tp-step .d{font-family:var(--font-body);font-weight:600;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);display:block;margin-top:10px}
.tp-xsell{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media (max-width:767px){.tp-xsell{grid-template-columns:1fr}}
a.tp-xs{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px;text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s;display:block}
a.tp-xs:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.tp-xs .tg{font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--secondary)}
.tp-xs b{display:block;color:var(--text);margin:5px 0 3px}
.tp-xs p{font-size:.82rem;margin:0;color:var(--text-soft);line-height:1.5}
.tp-xs .pr{font-family:var(--font-head);color:var(--accent);font-weight:700;margin-top:8px;display:block}


/* ===== Navbar stable v2 (2026-08-14) : Ressources groupé en desktop, liens directs dans le burger ===== */
@media (min-width:961px){
.main-nav>ul>li:has(>a[href='/outils']),
.main-nav>ul>li:has(>a[href='/blog']),
.main-nav>ul>li:has(>a[href='/outre-mer']),
.main-nav>ul>li:has(>a[href='/methode']){display:none}
.main-nav>ul>li.nav-group{display:flex}
}
@media (max-width:960px){.main-nav>ul>li.nav-group{display:none!important}}


/* ===== Bouton retour en haut (2026-08-14) : bas droite, aligné avec l'assistant, plus discret ===== */
.to-top{right:92px!important;left:auto!important;bottom:22px!important;top:auto!important;width:44px!important;height:44px!important;font-size:1.1rem!important}
@media (max-width:960px){.to-top{right:16px!important;bottom:calc(84px + env(safe-area-inset-bottom))!important;display:grid!important}}

/* ===== Burger simplifié (2026-08-14) : liste plate en mobile/tablette ===== */
@media (min-width:961px){
  .nav-resource-li{display:none}
}
@media (max-width:960px){
  .nav-group{display:none}                       /* le menu Ressources devient inutile : liens directs affichés */
  .main-nav .dropdown,.main-nav .nav-mega{display:none!important}   /* pas de sous-menus dans le burger */
  .main-nav .dropdown-toggle{display:none!important}
  .main-nav > ul > li > a{min-height:48px;display:flex;align-items:center}
}


/* ---- css/v5.css ---- */
/* ============================================================
   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: #617180;
  --v5-line-2: #c8ccd0;
  --v5-on-dark-2: #9aabbd;
  --v5-shadow-warm: 0 12px 32px rgba(207,74,18,.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: #8e9397; --v5-line-2: #363a3d; }

/* ---------- 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(--action) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(18,57,94,.26) !important; }
.btn-primary:hover { background: var(--action-hover) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(18,57,94,.34) !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(207,74,18,.14), rgba(207,74,18,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(207,74,18,.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-on-dark); }
#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(207,74,18,.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(207,74,18,.12), rgba(207,74,18,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(207,74,18,.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: #cf4a12; }
#dashboard .ec-tab .ec-badge, #dashboard .ec-tab .badge { background: var(--accent-surface); 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(207,74,18,.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(207,74,18,.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(207,74,18,.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 : #b8430f sur clair, #cf4a12 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: #b8430f !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: #cf4a12 !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: #cf4a12 !important; }
#expertises .grid-3 > .card:nth-child(1) .price-note, #expertises .grid-3 > .card:nth-child(1) .price-note * { color:var(--accent-on-dark) !important; }
html[data-theme=dark] .presta .p-price, html[data-theme=dark] .card-pole, html[data-theme=dark] .breadcrumb a { color: #cf4a12 !important; }
/* Bouton WhatsApp : vert lisible (blanc 4,0:1 / 4,9:1) */
a[href*="wa.me"].btn { background: #0f6b4f !important; color: #fff !important; border-color: transparent !important; }
.wa-fab { background: transparent !important; }
.wa-fab > a { background: #0f6b4f !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-on-dark) !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: #cf4a12 !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: #26282a; --border: #8e9397; --v5-line-2: #617180; }
  .btn-light, .btn-ghost { border-color: var(--text) !important; }
  .card, .panel, .kpi { border-color: #617180; }
}
.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: #b8430f !important; box-shadow: 0 0 0 3px rgba(156,58,26,.12); }
.field-error { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: .82rem; color: #b8430f; }
.field-error::before { content: "!"; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: #b8430f; 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; inset: 0; margin: auto; 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: #cf4a12 !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: #cf4a12 !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: #0c2d57; --nav-panel: #071e3d; --nav-ink: #fafbfd; --nav-ink-2: rgba(246,243,238, .82); --nav-line: rgba(255, 255, 255, .09); --nav-hover: rgba(255, 255, 255, .07); --nav-orange: #cf4a12; }
.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(--action) !important; color: #fff !important; border-color: var(--action) !important; }
.main-nav a.btn-primary:hover { background: var(--action-hover) !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(219,142,92, .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(219,142,92, .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: #071e3d !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(--link); border-color: var(--link); }
.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(--link); text-decoration: underline; text-underline-offset: 2px; }
.legal-page .prose a:hover { color: var(--link-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; overflow-wrap: break-word; }
.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) #0c2d57 sur barre #0c2d57 = 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
   (#fafbfd) 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 #071e3d 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(219,142,92, .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: #071e3d !important; }

/* A3 — Icônes des sous-menus desktop (.dd-ic) : modern.css force
   `stroke: var(--secondary)` (#b8430f) -> 3,01:1 sur #071e3d (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 #cf4a12 -> 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(219,142,92, .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 #b8430f 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) #44515f -> 1,96:1 ; « MENU »
     (.logo-name::after, 9,6 px) en var(--secondary) #b8430f -> 3,26:1.
     Mesuré après : 6,63:1 / 10,85:1 / 7,13:1. */
  .site-header .main-nav ul::before { color: rgba(246,243,238, .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 #b8430f 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) }` (#cf4a12) ->
   3,3:1 sur le fond des fiches légales (#fafbfd). 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 #617180, 11,5 px,
   sur #fafbfd -> 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 #afb2b5 d'admin.css et
   l'actif #b8430f/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(219,142,92, .14); color: var(--nav-orange); border-color: rgba(219,142,92, .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-surface); 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(34px, 4vw, 60px); }
.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(28px, 3.4vw, 48px); }
.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(20px, 2.4vw, 32px); }
.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,#e2e8f0);background:var(--paper,#fff);
  color:var(--body,#44515f);border-radius:999px;cursor:pointer;
  transition:border-color .15s,color .15s}
.intent-btn:hover{border-color:var(--soft,#617180)}
.intent-btn.on{border-color:#b8430f;color:#b8430f;background:#eaf2fb}
.intent-btn:focus-visible{outline:2px solid #b8430f;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 #b8430f sur fond clair et #cf4a12 sur fond sombre — ce
   n'est pas une incohérence mais la condition de la lisibilité : mesuré,
   #b8430f donne 4,87 : 1 sur le crème du site (niveau AA), là où #cf4a12
   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 #0c2d57 du pied :
     accent #cf4a12 . . . . . 5,22 : 1   (seuil AA texte normal : 4,5)
     texte clair #e9eff5  . . 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  .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 #44515f), les bordures de cartes (beige #e2e8f0), 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 (#b8430f) et non
   --accent (#cf4a12). Sur le crème du site, #cf4a12 tombe à 3,03 : 1, sous
   le seuil de 3 : 1 exigé pour un élément graphique dès que le fond change ;
   #b8430f 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 (#0c2d57
      sur #eaf2fb : 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, #eaf2fb);
  color: var(--secondary, #b8430f);
  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, #e2e8f0);
  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,#e2e8f0);margin:30px 0 48px}
.tf-rail i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#cf4a12,#cf4a12);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,#fafbfd);border:2px solid var(--border,#d9cac0)}
.tf-pt.done{background:var(--accent-surface);border-color:#cf4a12}
.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,#617180)}
.tf-pt .cap b{color:var(--text,#0c2d57);font-weight:700}
.tf-pt.done .cap b{color:#b8430f}
.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:#0c2d57;box-shadow:0 0 0 0 rgba(12,45,87,.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,#0c2d57);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(207,74,18,.45)}70%{box-shadow:0 0 0 10px rgba(207,74,18,0)}100%{box-shadow:0 0 0 0 rgba(207,74,18,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,#e2e8f0);border-radius:12px;padding:18px 20px}
.tf-d.now{border-color:#cf4a12;box-shadow:0 6px 18px -12px rgba(207,74,18,.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:#b8430f;font-weight:700;margin-bottom:.5rem}
.tf-d .k .st{background:var(--accent-surface);color:#fff;border-radius:999px;padding:.1rem .5rem;font-size:.58rem;letter-spacing:.07em}
.tf-d:not(.now) .k{color:var(--muted,#617180)}
.tf-d:not(.now) .k .st{background:var(--border,#e2e8f0);color:#44515f}
.tf-d h3{font-family:var(--font-head);font-size:1.14rem;margin:0 0 .45rem;color:var(--text,#0c2d57)}
.tf-d p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted,#54606d)}

/* --- 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,#e2e8f0);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:#cf4a12;box-shadow:0 16px 34px -20px rgba(49,26,11,.55);color:inherit}
.tf-p.reco{border-color:#cf4a12;border-width:1.5px;box-shadow:0 14px 30px -20px rgba(207,74,18,.75)}
.tf-p .flag{position:absolute;top:-11px;left:22px;background:var(--accent-surface);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:#b8430f;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,#0c2d57)}
.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:#b8430f;font-weight:700}
.tf-p .pr .u{font-size:.78rem;color:var(--muted,#617180)}
.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,#54606d)}
.tf-p li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55}
.tf-p .go{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border,#e2e8f0);
  padding-top:.75rem;font-weight:700;font-size:.9rem;color:#b8430f}
.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%,#3b2517 0%,#071e3d 55%,#0c2d57 100%);
  color:#e2e8f0;position:relative;overflow:hidden}
.tf-dark::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,#b8430f,#cf4a12,#cf4a12,#cf4a12,#b8430f)}
.tf-dark .eyebrow{color:#cf4a12}
.tf-dark h2,.tf-dark h3{color:#fff}
.tf-dark p{color:#b6bbbf}
.tf-dark p b,.tf-dark b{color:#fff}
.tf-dark .tp-pull{background:rgba(255,255,255,.055);border-left-color:#cf4a12;color:#e2e8f0;border-radius:0 10px 10px 0}
.tf-dark .tp-pull .price-note{color:#9ca1a5}
.tf-dark .tp-pull .price-note b{color:#cf4a12}
.tf-dark .tf-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;background:linear-gradient(135deg,#1b4b78,#0f4c8a);
  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(207,74,18,.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(207,74,18,.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,#eaf2fb,#fdece3);border:1px solid #cf4a12;border-radius:14px;padding:20px 24px;margin-top:30px}
.tf-mid p{margin:0;font-size:.95rem;color:#44515f;max-width:60ch}
.tf-mid p b{color:#0c2d57}

@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,#e2e8f0);border-radius:12px;padding:14px 16px;
  border-top:3px solid #cf4a12}
.sv-r b{display:block;font-family:var(--font-head);font-size:1.5rem;line-height:1;color:#b8430f;margin-bottom:.35rem}
.sv-r span{font-size:.82rem;line-height:1.4;color:var(--muted,#54606d)}
.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,#e2e8f0);
  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,#cf4a12,#cf4a12);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sv-p:hover{transform:translateY(-4px);border-color:#cf4a12;box-shadow:0 16px 34px -20px rgba(49,26,11,.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:#cf4a12;opacity:.55;margin-bottom:.6rem}
.sv-p .t{font-family:var(--font-head);font-size:1.35rem;color:var(--text,#0c2d57);margin-bottom:.45rem}
.sv-p .d{font-size:.9rem;line-height:1.55;color:var(--muted,#54606d);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,#e2e8f0);
  padding-top:.7rem;font-weight:700;font-size:.88rem;color:#b8430f}
.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; }
}

/* ===== charte v6 : lisibilite du cuivre sur fonds sombres ===== */
:root{--accent-on-dark:#cf4a12}
.hero-path .eyebrow,
.tf-dark .eyebrow,.tf-dark .card-pole,.tf-dark .dj-price,.tf-dark .price,
.cta-band .eyebrow,.site-footer .eyebrow,
.hero-card .eyebrow,.hero-card .card-pole,.hero-card .dj-price{color:var(--accent-on-dark)}
.fe-badge{background:var(--accent-hover)!important;color:#fff!important}
.dj-price{color:var(--price-ink)}


/* ===== charte v6 : lisibilite du texte sur surfaces sombres ===== */
/* Les tokens sont redefinis DANS le conteneur sombre : tout descendant qui lit
   var(--text-soft), var(--secondary) ou var(--accent) herite d'une valeur lisible,
   y compris les regles qu'on n'a pas listees. --primary n'est volontairement pas
   touche : il sert aussi de fond ailleurs (.admin-side, .chip-filter.on). */
.tf-dark,.cta-band,.site-footer,.hero-card,.hero-card-glass,.cookie-banner,.member-preview,#expertises .grid-3 > .card:nth-child(1),.on-dark{
  --text:#f1f5f9;
  --text-soft:#c3cedb;
  --muted:#9aabbd;
  --v5-on-dark-2:#c3cedb;
  --secondary:#cf4a12;
  --accent:#cf4a12;
  --price-ink:#cf4a12;
  --border:rgba(255,255,255,.16);
  color:var(--text-soft);
}
.tf-dark h1,.tf-dark h2,.tf-dark h3,.tf-dark h4,.cta-band h1,.cta-band h2,.cta-band h3,.cta-band h4,.hero-card h1,.hero-card h2,.hero-card h3,.hero-card h4,.hero-card-glass h1,.hero-card-glass h2,.hero-card-glass h3,.hero-card-glass h4,.member-preview h1,.member-preview h2,.member-preview h3,.member-preview h4,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,#expertises .grid-3 > .card:nth-child(1) h1,#expertises .grid-3 > .card:nth-child(1) h2,#expertises .grid-3 > .card:nth-child(1) h3,#expertises .grid-3 > .card:nth-child(1) h4{color:#fff}
.tf-dark .price-tag,.tf-dark .badge-inclus,.tf-dark .fe-badge,.tf-dark .tag,.tf-dark .pill,.tf-now .price-tag,.tf-now .badge-inclus,.tf-now .fe-badge,.tf-now .tag,.tf-now .pill,.cta-band .price-tag,.cta-band .badge-inclus,.cta-band .fe-badge,.cta-band .tag,.cta-band .pill,.hero-card .price-tag,.hero-card .badge-inclus,.hero-card .fe-badge,.hero-card .tag,.hero-card .pill,.on-dark .price-tag,.on-dark .badge-inclus,.on-dark .fe-badge,.on-dark .tag,.on-dark .pill{background:#b8430f;color:#fff}

/* ===== charte v6 : lisibilite, second passage ===== */
/* une surface cuivre porte toujours du texte blanc : l encre sombre n y depasse pas 3,2:1 */
#dashboard .ec-tab .badge,#dashboard .ec-tab .ec-badge,.acc-avatar,.admin-avatar,.admin-navitem.active,.doc-print .dp-accept-dot,.ec-tab-premium.active,.mobile-actionbar a.primary,.presta .p-badge,.presta-bar i,.pulse-dot,.scroll-cue-wheel,.scroll-progress,.tf-d .k .st,.tf-p .flag,.tf-pt.done,.to-top{color:#fff}
/* sections sombres oubliees au premier passage */
.fe-sec,.fe-timeline{
  --text:#f1f5f9;--text-soft:#c3cedb;--muted:#9aabbd;--v5-on-dark-2:#c3cedb;
  --secondary:#cf4a12;--accent:#cf4a12;--price-ink:#cf4a12;--link:#7fb3e0;--link-hover:#a8cdee;--border:rgba(255,255,255,.16);
}
.fe-sec>.container>h2,.fe-sec>.container>h3{color:#fff}
/* le mot CONSULTING du bloc de marque etait a 2,88:1 sur l en-tete sombre */
.site-header .logo-co{color:#cf4a12}

/* ===== charte v6 : lisibilite, troisieme passage ===== */
/* Une surface claire imbriquee dans une section sombre reprend les tokens clairs :
   sans ce retour, elle heritait du contexte sombre et son texte devenait illisible. */
.tf-dark .card,.tf-dark .fe-o,.tf-dark .tp-card,.tf-dark .panel,.tf-dark .surface,.tf-dark .box-light,.tf-now .card,.tf-now .fe-o,.tf-now .tp-card,.tf-now .panel,.tf-now .surface,.tf-now .box-light,.cta-band .card,.cta-band .fe-o,.cta-band .tp-card,.cta-band .panel,.cta-band .surface,.cta-band .box-light,.member-preview .card,.member-preview .fe-o,.member-preview .tp-card,.member-preview .panel,.member-preview .surface,.member-preview .box-light,.fe-sec .card,.fe-sec .fe-o,.fe-sec .tp-card,.fe-sec .panel,.fe-sec .surface,.fe-sec .box-light,.on-dark .card,.on-dark .fe-o,.on-dark .tp-card,.on-dark .panel,.on-dark .surface,.on-dark .box-light,.hero-card-glass .card,.hero-card-glass .fe-o,.hero-card-glass .tp-card,.hero-card-glass .panel,.hero-card-glass .surface,.hero-card-glass .box-light{
  --text:#0c2d57;--text-soft:#44515f;--muted:#617180;--v5-on-dark-2:#44515f;
  --secondary:#b8430f;--accent:#cf4a12;--price-ink:#b8430f;--link:#0f4c8a;--link-hover:#0c2d57;--border:#e2e8f0;
  color:var(--text-soft);
}
/* Tout ce qui repose sur une surface cuivre, y compris les enfants, passe en blanc. */
.fe-go,.flag,.st,.fe-badge,.badge-inclus,.price-tag{color:#fff}
/* En-tete sombre : le bloc de marque compose en CSS etait a 2,88:1. */
.site-header .logo,.site-header .logo-co,.site-header .logo-word{color:#cf4a12}
.site-header .logo-word{color:#f1f5f9}
/* En-tetes de tableau comparatif, fond sombre. */
html[data-theme="dark"] table.compare th,html[data-theme="dark"] table.compare th *{color:#fff}

/* ===== charte v6 : le marine porte l action et l information ===== */
/* Partage des roles : le cuivre reste l identite (pastilles d eyebrow, point des titres,
   prix, filets decoratifs), le marine prend tout ce qui est actionnable ou informatif. */
.card .card-link,.card-link,.more,.read-more,.breadcrumb a,.bc a,
.prose a,.faq-body a,.post-body a,.legal-body a{color:var(--link)}
.card .card-link:hover,.card-link:hover,.breadcrumb a:hover,.prose a:hover{color:var(--link-hover)}
.prose h2{border-left-color:var(--link)}
.prose table th,.legal-body table th{background:var(--pill);color:#fff}
.prose .notice,.prose blockquote,.legal-body .notice{border-left-color:var(--link)}
/* Sur fond sombre le lien passe en bleu clair, lisible a 7,95:1. */
.tf-dark a,.tf-now a,.cta-band a,.site-footer .prose a,.on-dark a{color:var(--link)}

/* ===== charte v6 : derniers ajustements de lisibilite ===== */
/* .article-cta est sombre partout, sauf sur les pages legales ou il est blanc.
   On lui rend le contexte sombre, puis on le neutralise sur .legal-page. */
.article-cta{
  --text:#f1f5f9;--text-soft:#c3cedb;--muted:#9aabbd;--v5-on-dark-2:#c3cedb;
  --secondary:#cf4a12;--accent:#cf4a12;--price-ink:#cf4a12;--link:#7fb3e0;--link-hover:#a8cdee;
  --border:rgba(255,255,255,.16);
}
.legal-page .article-cta{
  --text:#0c2d57;--text-soft:#44515f;--muted:#617180;--v5-on-dark-2:#44515f;
  --secondary:#b8430f;--accent:#cf4a12;--price-ink:#b8430f;--link:#0f4c8a;--link-hover:#0c2d57;
  --border:#e2e8f0;
}
/* Un prix pose sur une surface marine se lit en blanc, pas en cuivre clair. */
.tf-dark .tf-cta .dj-price,.tf-dark .tf-cta .dj-price *,
.tf-cta .dj-price,.fe-go .dj-price,.btn-primary .dj-price,
.tf-cta .dj-price *,.fe-go .dj-price *{color:#fff}
/* Pastille de frise franchie : blanc plein plutot qu un creme a 4,39:1. */
.fe-pt.done,.fe-pt.done b,.tf-pt.done,.tf-pt.done b{color:#fff}

/* ===== charte v6 : conteneurs sombres a fond degrade ===== */
/* Ces conteneurs ont un fond en degrade : le balayage par couleur plate les avait manques.
   Un prix y ressortait a 2,97:1, mesure sur les pixels rendus. */
.fe-band,.email-band,.member-side,.result-card{
  --text:#f1f5f9;--text-soft:#c3cedb;--muted:#9aabbd;--v5-on-dark-2:#c3cedb;
  --secondary:#cf4a12;--accent:#cf4a12;--price-ink:#cf4a12;--link:#7fb3e0;--link-hover:#a8cdee;
  --border:rgba(255,255,255,.16);
}
.fe-band h1,.fe-band h2,.fe-band h3,.fe-band h4,.email-band h1,.email-band h2,.email-band h3,.email-band h4,.member-side h1,.member-side h2,.member-side h3,.member-side h4,.result-card h1,.result-card h2,.result-card h3,.result-card h4{color:#fff}
/* ilots clairs imbriques : retour aux tokens clairs */
.fe-band .card,.fe-band .fe-o,.fe-band .panel,.fe-band .surface,.email-band .card,.email-band .fe-o,.email-band .panel,.email-band .surface,.member-side .card,.member-side .fe-o,.member-side .panel,.member-side .surface,.result-card .card,.result-card .fe-o,.result-card .panel,.result-card .surface{
  --text:#0c2d57;--text-soft:#44515f;--muted:#617180;--v5-on-dark-2:#44515f;
  --secondary:#b8430f;--accent:#cf4a12;--price-ink:#b8430f;--link:#0f4c8a;--link-hover:#0c2d57;
  --border:#e2e8f0;
}

/* ===== charte v6 : legendes de frise ===== */
/* Legendes de 10 px sous les pastilles de frise, mesurees sur les pixels rendus :
   1,05:1 sur la bande sombre de l accueil, 4,07:1 sur le fond bleute de la page tarif. */
.fe-band .fe-pt .cap,.fe-band .fe-pt .cap b{color:#c3cedb}
.fe-band .fe-pt.done .cap b{color:#cf4a12}
.tf-pt .cap{color:#54606d}
.tf-pt .cap b{color:#0c2d57}
.tf-pt.done .cap b{color:#b8430f}

/* ===== charte v6 : l orange du logo sur fond sombre (21/09/2026) ===== */
/* #cf4a12 sur #071e3d = 3,93:1. Conforme AA seulement en grand (>= 18,7 px en gras).
   Regle : un texte orange sur fond sombre est grand, ou il n est pas orange.
   Petits textes (sur-titres, liens, boutons fantomes) : texte clair, l orange passe
   au decor (pastille, filet, soulignement, bordure). */
.site-footer h3.ftr-h,.site-footer .ftr-h{font-size:1.17rem!important;font-weight:700!important;letter-spacing:.07em!important;line-height:1.25;color:#cf4a12!important}

/* Sur-titres sur fond sombre : texte clair, le filet reste orange (::before) */
.tf-dark .eyebrow,.tf-now .eyebrow,.cta-band .eyebrow,.site-footer .eyebrow,.hero-card .eyebrow,.hero-card-glass .eyebrow,.hero-path .eyebrow,
.member-preview .eyebrow,.member-side .eyebrow,.on-dark .eyebrow,.fe-sec .eyebrow,.fe-band .eyebrow,.email-band .eyebrow,.result-card .eyebrow,
.article-cta .eyebrow,.safety .eyebrow,.fe-eb,.fe-eb sup,.pb-eb,.tf-dark .card-pole,.hero-card .card-pole,#expertises .grid-3>.card:nth-child(1) .card-pole{color:#e9eff5!important}
.legal-page .article-cta .eyebrow{color:#b8430f!important}

/* Liens sur fond sombre : blancs, soulignes d orange */
.cookie-banner a,.cta-band a:not(.btn),.sec-dark a:not(.btn),.tf-dark a:not(.btn),.tf-now a:not(.btn),.on-dark a:not(.btn),.fe-band a:not(.btn):not(.fe-go),.fe-note a,
.article-cta .btn-link,.hero-card a:not(.btn),.member-side a:not(.btn){color:#fff!important;text-decoration:underline;text-decoration-color:#cf4a12;text-decoration-thickness:2px;text-underline-offset:3px}
.legal-page .article-cta .btn-link{color:var(--link)!important}
.site-footer a:not(.btn){color:#e9eff5!important}
.site-footer .footer-bottom a{color:inherit!important}

/* Bouton fantome du bandeau cookies : texte blanc, bordure orange */
.cookie-banner .btn-ghost{color:#fff!important;border:1px solid #cf4a12!important;background:transparent!important}
.cookie-banner .btn-ghost:hover{background:rgba(207,74,18,.18)!important}

/* Prix sur fond sombre : blancs et gras (l orange garde les grands montants) */
.tf-dark .dj-price,.tf-now .dj-price,.cta-band .dj-price,.hero-card .dj-price,.fe-band .dj-price,.fe-sec .dj-price,.member-side .dj-price,.on-dark .dj-price,
.tf-dark .price-note,.tf-dark .price-note b,.fe-sec .price-note,.fe-sec .price-note b,.hero-card .price-note,.on-dark .price-note,.on-dark .price-note b,
.tf-cta .dj-price,.tf-cta .dj-price *{color:#fff!important}

/* ilots clairs dans un conteneur sombre : le prix reprend l encre claire */
:is(.tf-dark,.cta-band,.hero-card,.fe-band,.fe-sec,.member-side,.on-dark) :is(.card,.fe-o,.tp-card,.panel,.surface,.box-light) :is(.dj-price,.price-note,.price-note b){color:var(--price-ink,#b8430f)!important}
/* carte sombre de la grille Expertises */
#expertises .grid-3>.card:nth-child(1) :is(.price-note,.price-note b,.dj-price){color:#fff!important}
/* Filtres actifs sur fond sombre */
.filters .filter-btn.active{color:#fff!important}
/* En-tete de tableau sombre : le montant restait en encre fonce (1,06:1) */
.fl-table thead th,.fl-table thead th.p{color:#fff!important}

/* Fonds clairs : cuivre trop clair pour du petit texte actif => marine */
.intent-btn.on,.sim-tab.active,.sim-tab[aria-selected=true]{color:#0f4c8a!important}
.email-btn{background:#0f4c8a!important;color:#fff!important}.email-btn.email-btn-ghost{background:#fff!important;color:#0f4c8a!important;box-shadow:inset 0 0 0 1.5px #0f4c8a!important}

/* Pas de cesure sur le site : les mots ne sont jamais coupes par un trait d union automatique.
   Un mot trop long (adresse, lien) passe a la ligne entier ; seul un mot plus large que son
   conteneur peut etre renvoye, sans tiret. */
html,body,*{-webkit-hyphens:manual!important;hyphens:manual!important}

/* Prix des cartes « Souvent choisis ensemble » : un script enveloppe le montant dans un
   span, ce qui coupait « dès » et le montant aux deux extremites de la ligne flex. */
.tp-xs .pr{display:block!important;position:relative;padding-right:1.6em}
.tp-xs .pr::after{position:absolute;right:0;top:10px}
/* Les boutons poses dans un conteneur sombre ne sont pas des liens de texte : pas de soulignement */
.tf-cta,.tf-cta *,.fe-go,.fe-go *,a[class*="btn"],a[class*="btn"] *,a[class*="cta"]:not(.btn-link),a[class*="cta"]:not(.btn-link) *{text-decoration:none!important}

/* Baremes sur telephone : le tableau a 3 ou 4 colonnes cachait le prix hors de l ecran.
   Chaque ligne devient une fiche : intitule et prix sur la premiere ligne, detail dessous. */
@media (max-width:560px){
  .table-wrap table.compare{min-width:0!important;width:100%}
  table.compare thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.compare tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:3px;padding:12px 14px;border-bottom:1px solid var(--border,#e2e8f0)}
  table.compare tbody td{display:block;padding:0!important;border:0!important;background:none!important}
  table.compare tbody td:first-child{grid-column:1;grid-row:1;font-weight:700;color:var(--text,#0c2d57)}
  table.compare tbody td:last-child{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  table.compare tbody td:last-child small{display:block;white-space:normal;max-width:9.5rem;margin-left:auto;font-size:.76rem}
  table.compare tbody td:not(:first-child):not(:last-child){grid-column:1/-1;font-size:.9rem;color:var(--text-soft,#44515f)}
  table.compare tbody td:nth-child(3):not(:last-child){font-size:.82rem;color:var(--muted,#617180)}
  table.compare tbody td:nth-child(3):not(:last-child)::before{content:"Pour qui\00a0: ";font-weight:600}
}
/* Descriptions des choix (Demarrer) : texte courant en gris lisible, sans espacement de capitales */
.choice small{color:var(--text-soft,#44515f)!important;letter-spacing:0!important;font-family:var(--font-body)!important}
/* Sur telephone, l espacement des capitales ne concerne que les libelles en capitales, pas le texte courant en <small> */
@media (max-width:767px){small{letter-spacing:normal}.eyebrow small,.p-tag small,.fe-badge small{letter-spacing:inherit}}
/* Tablette : le titre d accueil occupe la largeur disponible (colonne unique),
   et une frise de 4 etapes se range en 2 x 2 au lieu de 3 + 1 orpheline. */
@media (min-width:600px) and (max-width:1023px){
  .hero h1{max-width:24ch}
  .steps:has(> :nth-child(4):last-child){grid-template-columns:1fr 1fr!important}
}
/* Telephone : les colonnes du pied de page sont des depliants fermes.
   En deux colonnes CSS ils se rangeaient de travers (un titre sous le logo, deux a droite) :
   on les empile sur toute la largeur, le logo au-dessus. */
@media (max-width:560px){
  .site-footer .footer-grid{columns:auto!important;column-count:auto!important;display:block!important}
  .site-footer .footer-grid>div{margin:0!important}
  .site-footer .footer-grid>.ftr-marque,.site-footer .footer-grid>div:first-child{margin:0 0 14px!important}
}

/* ═══════════ Passe lisibilité 23/09/2026 — audit programmatique (contraste AA + micro-textes ≥11,5px) ═══════════ */
/* 1. En-têtes de tableaux : la régression venait des règles « sections sombres » v6 (corrigées à la source plus haut : table.compare th retiré des listes sombres, blanc scoped au data-theme=dark) */
/* 2. Frises facture électronique (bandeaux marine) : jalons 9,6px → 11,5px, teintes AA sur marine */
.fe-pt .cap,.fe-band .fe-pt .cap b,.fe-pt .cap b{color:#dbe4ee}
.fe-pt .cap{font-size:11.5px!important;letter-spacing:.08em!important}
/* frise tf (sections claires) : encre foncée + 11,5px */
.tf-pt .cap{font-size:11.5px!important;letter-spacing:.08em!important;color:#44515f}
.tf-pt .cap b{color:#0c2d57}
.tf-d .k{font-size:11.5px!important}
.tf-d .k .st{background:#8f4517}
.fe-pt.done .cap b{color:#e8894f}
.tf-pt.done .cap b{color:#b8430f}
/* 3. Micro-textes remontés (chips, étiquettes, catégories) */
.fe-eb,.pb-eb{font-size:11.5px!important}
.p-tag{font-size:11.5px!important}
.card-pole{font-size:11.5px!important}
.tg{font-size:11px!important}
.tp-lab{font-size:11.5px!important}
.tp-micro{font-size:12px!important}
label small{font-size:.75rem!important}
.article-aside summary,.toc summary,.legal-nav + * summary{font-size:.75rem!important}
.choice-group-title span[style*="text-soft"]{font-size:12px!important}
.fe-d .k{font-size:11.5px!important}
.fe-band .l,.fe-cd .l{font-size:11px!important}
.fe-badge,.legal-badge{font-size:11.5px!important}
.tf-d .who,.tp-card .who{font-size:11px!important}
.flag{font-size:10.5px!important}
.tf-d .k .st,.tf-d .st{font-size:.7rem!important}
.k{font-size:.7rem!important}
.who{font-size:.7rem!important}

/* ═══════════ Respiration 23/09/2026 — confort de lecture sur tout le site ═══════════
   Constat mesuré : sections à 22-30px d'écart, titres collés (mb 8.8px), grilles 10-14px,
   cartes tassées (padding 12-14px, texte 13.4px/1.45). On aère sans rien retirer.
   Les compactages volontaires (règles :has() « bloc unique » et paddings inline) gardent la main. */
.section{padding-top:clamp(2.5rem,4.6vw,4rem);padding-bottom:clamp(2.5rem,4.6vw,4rem)}
.section-head{margin-bottom:clamp(1.5rem,2.6vw,2.3rem)}
.section h2{margin-bottom:.55em}
p.lead{margin-bottom:1.05rem}
/* grilles : les cartes se détachent les unes des autres */
.presta-grid{gap:20px}
.grid,.grid-2,.grid-3,.steps,.engagements,.zones,.kpis,.tools-grid,.faq-list{gap:clamp(14px,1.7vw,22px)}
/* cartes : plus d'air intérieur, texte plus confortable */
a.presta{padding:18px 18px 16px}
.presta .p-hook{font-size:.87rem;line-height:1.55}
.presta h3{margin:.35rem 0 .4rem}
.card,.zone{padding:22px 22px 20px}
/* prose : interligne détendu partout */
.section p{line-height:1.6}
/* mobile : de l'air, mais mesuré (les pages sont déjà hautes) */
@media (max-width:640px){
  .section{padding-top:2.1rem;padding-bottom:2.1rem}
  .presta-grid{gap:14px}
  .grid,.grid-2,.grid-3,.steps,.engagements,.zones{gap:14px}
  .section-head{margin-bottom:1.3rem}
}

/* ═══ Essentiel visible / détail replié (23/09/2026) — composant natif <details class="plus"> ═══ */
details.plus{border:1px solid var(--border,#e2e8f0);border-radius:12px;background:#fff;margin:1.2rem 0 0;box-shadow:0 1px 2px rgba(12,45,87,.05)}
details.plus>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:15px 20px;font-weight:600;color:#0c2d57;font-size:.96rem}
details.plus>summary::-webkit-details-marker{display:none}
details.plus>summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(207,74,18,.1);color:#b8430f;font-family:var(--font-head);font-size:1.15rem;line-height:1;transition:transform .2s ease}
details.plus[open]>summary::after{transform:rotate(45deg)}
details.plus>summary:hover{color:#b8430f}
details.plus>.plus-body{padding:2px 18px 18px;border-top:1px solid var(--border,#e2e8f0)}
details.plus>.plus-body>.table-wrap{margin-top:.8rem}
details.plus .price-note{text-align:left!important}
@media print{details.plus>.plus-body{display:block}}

/* ---- css/v7.css ---- */
/* ==========================================================================
   MOHNA v7 · accueil modernisé (prototype, branche prototype-v7, 29/09/2026)
   Charte Marine & Cuivre inchangée, modernisée : échelle typographique fixe
   (13 px minimum), une seule carte par usage, preuve sous le héros.
   Toutes les classes sont préfixées v7- : aucune collision avec style.css,
   modern.css ou v5.css.
   ========================================================================== */
.v7{--m9:#071e3d;--m8:#0c2d57;--m7:#0f4c8a;--cu:#cf4a12;--cu6:#b8430f;--cu3:#ff9a6b;--cu1:#fdece3;
 --iv:#fafbfd;--ink:#0c2d57;--ink2:#44515f;--ink3:#617180;--line:#e2e8f0;--line2:#d9d2c5;
 --r:16px;--rl:24px;--sh:0 1px 2px rgba(12,45,87,.06),0 8px 24px rgba(12,45,87,.07);--shl:0 24px 60px rgba(7,30,61,.22);
 --f13:.8125rem;--f14:.875rem;--f16:1rem;--f18:1.125rem;--f24:1.5rem;--f32:2rem;
 font-family:var(--font-body,'Inter',system-ui,sans-serif);color:var(--ink);font-size:var(--f16);line-height:1.6}
.v7 *,.v7 *::before,.v7 *::after{box-sizing:border-box}
.v7-w{width:min(1180px,100% - 40px);margin-inline:auto}
.v7 h1,.v7 h2{font-family:var(--font-head,'Playfair Display',Georgia,serif);font-weight:700;letter-spacing:-.01em;line-height:1.1;text-wrap:balance;margin:0}
.v7 h2{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.5rem)}
.v7 h3{font-family:var(--font-body,'Inter',sans-serif);font-size:var(--f18);font-weight:600;line-height:1.3;margin:0}
.v7 p{margin:0;text-wrap:pretty}
.v7-eb{display:inline-flex;align-items:center;gap:10px;font-size:var(--f13);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cu6)}
.v7-eb::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px}
.v7-ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.v7-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:var(--f16);text-decoration:none!important;border:1.5px solid transparent;white-space:nowrap;transition:transform .2s,background .2s,box-shadow .2s}
.v7-btn:hover{transform:translateY(-1px)}
.v7-btn:focus-visible,.v7 a:focus-visible{outline:3px solid var(--cu3);outline-offset:3px}
.v7-bp{background:var(--cu);color:#fff!important;box-shadow:0 8px 20px rgba(207,74,18,.3)}.v7-bp:hover{background:var(--cu6)}
.v7-bg{border-color:rgba(255,255,255,.3);color:#fff!important}
.v7-bm{background:var(--m8);color:#fff!important}
/* mot-clé cuivre souligné d'un trait (remplace l'ancien surlignage en aplat) */
.v7-kw{font-style:italic;color:var(--cu3);position:relative;white-space:nowrap}
.v7-kw svg{position:absolute;left:0;bottom:-.12em;width:100%;height:.28em;overflow:visible}
.v7-kw path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.55}

/* ---------- Héros marine + devis ---------- */
.v7-hero{position:relative;overflow:hidden;color:#fff;padding:72px 0 0;
 background:radial-gradient(700px 420px at 78% 30%,rgba(207,74,18,.22),transparent 65%),radial-gradient(600px 400px at 0% 100%,rgba(47,91,134,.35),transparent 60%),var(--m9)}
.v7-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.v7-hero>.v7-w{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.v7-hero .v7-eb{color:var(--cu3)}
.v7-hero h1{font-size:clamp(2.4rem,1.4rem + 3.4vw,4rem);margin:18px 0 20px;color:#fff}
.v7-lead{font-size:var(--f18);color:#c3cedb;max-width:36em}
.v7-ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.v7-quote{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--rl);padding:26px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shl)}
.v7-quote-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.v7-quote-h h2{font-family:var(--font-body,'Inter',sans-serif);font-size:var(--f16);font-weight:600;color:#fff;letter-spacing:0}
.v7-quote-h small{font-size:var(--f13);color:#9aabbd}
.v7-opt{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);margin-top:8px;font-size:var(--f14);color:#fff!important;text-decoration:none!important;transition:background .2s,border-color .2s}
.v7-opt i{width:18px;height:18px;border-radius:50%;border:1.5px solid #9aabbd;flex:none;transition:border .2s}
.v7-opt b{margin-left:auto;font-weight:600;color:var(--cu3);white-space:nowrap}
.v7-opt:hover,.v7-opt:focus-visible{background:rgba(207,74,18,.14);border-color:rgba(240,163,122,.55)}
.v7-opt:hover i,.v7-opt:focus-visible i{border:5px solid var(--cu3)}
.v7-quote .v7-btn{width:100%;margin-top:16px}
.v7-note{font-size:var(--f13);color:#9aabbd;margin-top:10px!important;text-align:center}
.v7-proof{position:relative;margin-top:64px;border-top:1px solid rgba(255,255,255,.1)}
.v7-proof ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.v7-proof li{display:flex;gap:12px;align-items:flex-start;padding:22px 24px;border-left:1px solid rgba(255,255,255,.1)}
.v7-proof li:first-child{border-left:0}
.v7-proof .v7-ico{color:var(--cu3);margin-top:2px}
.v7-proof b{display:block;font-size:var(--f14);font-weight:600;color:#fff}
.v7-proof span{font-size:var(--f13);color:#9aabbd;line-height:1.45}
.v7-proof a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Sections claires ---------- */
.v7-s{padding:88px 0;background:var(--iv)}
.v7-s+.v7-s{padding-top:0}
.v7-sh{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px}
.v7-sh h2{margin-top:12px}
.v7-sh p{color:var(--ink2);max-width:30em}
.v7-bento{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.v7-pole{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:30px;display:flex;flex-direction:column;gap:14px;transition:box-shadow .2s,transform .2s}
.v7-pole:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.v7-pi{width:44px;height:44px;border-radius:12px;background:var(--cu1);color:var(--cu6);display:grid;place-items:center}
.v7-pole h3{font-family:var(--font-head,'Playfair Display',serif);font-size:var(--f24);font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v7-pole p{color:var(--ink2);font-size:var(--f14)}
.v7-tag{font-family:var(--font-body,'Inter',sans-serif);display:inline-block;font-size:var(--f13);font-weight:600;padding:3px 10px;border-radius:999px;background:var(--cu1);color:var(--cu6)}
.v7-pf{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--f14);font-weight:600}
.v7-pf a{color:var(--cu6)!important;display:inline-flex;gap:6px;align-items:center;text-decoration:none!important}
.v7-pole.v7-big{grid-row:1/3;background:var(--m8);color:#fff;border-color:var(--m8)}
.v7-big p{color:#c3cedb}.v7-big .v7-pi{background:rgba(207,74,18,.18);color:var(--cu3)}.v7-big .v7-pf{border-color:rgba(255,255,255,.12)}.v7-big .v7-pf a{color:var(--cu3)!important}
.v7-big ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--f14);color:#dfe6ee}
.v7-big li{display:flex;gap:8px;align-items:center}.v7-big li .v7-ico{color:var(--cu3);width:16px;height:16px}
.v7-fe{grid-column:2/4;background:linear-gradient(120deg,var(--m7),var(--m8));color:#fff;border-radius:var(--rl);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.v7-fe-l{display:flex;gap:18px;align-items:center}
.v7-fe-l b{display:block;font-size:var(--f14)}.v7-fe-l .v7-sub{display:block;font-size:var(--f13);color:#c3cedb}
.v7-cd{font:700 2.25rem/1 var(--font-head,'Playfair Display',serif);color:var(--cu3);white-space:nowrap}
.v7-fe .v7-btn{min-height:42px;font-size:var(--f14)}
.v7-tools{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--rl);background:#fff;overflow:hidden}
.v7-tool{padding:26px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;color:var(--ink)!important;text-decoration:none!important;transition:background .2s}
.v7-tool:first-child{border-left:0}.v7-tool:hover{background:#fafbfd}
.v7-tool .v7-ico{color:var(--cu);width:24px;height:24px}.v7-tool p{font-size:var(--f14);color:var(--ink2)}
.v7-tool span{margin-top:auto;font-size:var(--f14);font-weight:600;color:var(--m7);display:inline-flex;gap:6px;align-items:center}
.v7-end{background:var(--m8);color:#fff;border-radius:var(--rl);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;position:relative;overflow:hidden}
.v7-end::after{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(207,74,18,.35),transparent 65%);pointer-events:none}
.v7-end>*{position:relative;z-index:1}
.v7-end h2{color:#fff;max-width:16em}.v7-end p{color:#c3cedb;margin-top:10px}

/* ---------- Mode sombre du site ---------- */
[data-theme="dark"] .v7-s{background:var(--bg,#0b1624)}
[data-theme="dark"] .v7-pole:not(.v7-big),[data-theme="dark"] .v7-tools{background:#122236;border-color:#223449}
[data-theme="dark"] .v7-tool{border-color:#223449;color:#f1f5f9!important}
[data-theme="dark"] .v7-sh p,[data-theme="dark"] .v7-pole p,[data-theme="dark"] .v7-tool p{color:#c3cedb}
[data-theme="dark"] .v7 h2,[data-theme="dark"] .v7 h3{color:#f1f5f9}
[data-theme="dark"] .v7-pf{border-color:#223449}
[data-theme="dark"] .v7-tool span{color:#a8cdee}
[data-theme="dark"] .v7-eb{color:var(--cu3)}

/* ---------- Mobile ---------- */
@media (max-width:900px){
 .v7-hero{padding-top:40px}.v7-hero>.v7-w{grid-template-columns:1fr;gap:36px}.v7-ctas .v7-btn{flex:1}
 .v7-proof{margin-top:44px}.v7-proof ul{grid-template-columns:1fr 1fr}
 .v7-proof li{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:16px 12px}.v7-proof li:nth-child(-n+2){border-top:0}
 .v7-s{padding:56px 0}.v7-sh{display:block}.v7-sh p{margin-top:12px}
 .v7-bento{grid-template-columns:1fr}.v7-pole.v7-big{grid-row:auto}.v7-fe{grid-column:auto;flex-direction:column;align-items:flex-start}
 .v7-tools{grid-template-columns:1fr 1fr}.v7-tool{border-left:0;border-top:1px solid var(--line)}.v7-tool:nth-child(-n+2){border-top:0}.v7-tool:nth-child(2n){border-left:1px solid var(--line)}
 .v7-end{flex-direction:column;align-items:flex-start;padding:36px 24px}
}
@media (max-width:380px){.v7-tools{grid-template-columns:1fr}.v7-tool:nth-child(2n){border-left:0}.v7-tool:nth-child(2){border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.v7 *{transition:none!important}}
/* icons.js enveloppe automatiquement les prix dans .dj-price (cuivre) : dans v7, le prix hérite de son contexte */
.v7 .dj-price{color:inherit!important;font-weight:inherit}
/* Couleurs de titres explicites : style.css colore h2/h3 globalement */
.v7 h2,.v7 h3{color:var(--ink)}
.v7-hero h1,.v7-quote-h h2,.v7-big h3,.v7-end h2,.v7-fe b{color:#fff}

/* ==========================================================================
   COUCHE SITE v7 · appliquée à toutes les pages (chargée après v5.css)
   Moderniser sans réécrire : mêmes gabarits HTML, nouveaux jetons.
   ========================================================================== */
:root{--v7-cu:#cf4a12;--v7-cu6:#b8430f;--v7-cu3:#ff9a6b;--v7-m8:#0c2d57;--v7-m9:#071e3d;--v7-line:#e2e8f0;--v7-iv:#fafbfd}
/* 1. Surlignage en aplat → italique cuivre + trait fin (SVG en data URI, autorisé par la CSP img-src data:) */
body em.hl,body em.hl-sweep,body .hero h1 em.hl,body h1 em.hl-sweep,body h1.t-armed em.hl-sweep,body h1.t-armed.words-go em.hl-sweep{
 font-style:italic!important;color:var(--v7-cu)!important;padding:0 0 .08em!important;border-radius:0!important;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-5 90-7 196-2' fill='none' stroke='%23c4551a' stroke-width='3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat 0 100%/100% .26em!important;
 transition:none!important}
[data-theme="dark"] body em.hl,[data-theme="dark"] body em.hl-sweep{color:var(--v7-cu3)!important}
/* 2. En-têtes de pages (65 pages « page-header » + 10 pages tarifs « tp-hero ») */
body .page-header{background:radial-gradient(900px 420px at 85% 0%,rgba(207,74,18,.08),transparent 60%),var(--v7-iv);border-bottom:1px solid var(--v7-line)}
body .page-header h1,body .tp-hero h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem)!important;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
body .page-header p,body .tp-hero .tp-lead{font-size:1.0625rem;text-wrap:pretty}
body .tp-hero{background:radial-gradient(900px 420px at 85% 0%,rgba(207,74,18,.08),transparent 60%),var(--v7-iv)}
[data-theme="dark"] body .page-header,[data-theme="dark"] body .tp-hero{background:radial-gradient(900px 420px at 85% 0%,rgba(207,74,18,.12),transparent 60%),var(--bg,#0b1624);border-color:#223449}
/* 3. Titres de sections : gauche/centre conservés, trait décoratif supprimé, échelle fixe */
body .section-head::after{display:none!important}
body .section-head h2,body .section h2{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.35rem);letter-spacing:-.01em;text-wrap:balance}
body .eyebrow{font-size:.8125rem;letter-spacing:.12em}
/* 4. Cartes : une seule famille, plus d'accent qui grandit au survol */
body .card::after{display:none!important}
body .card{border-radius:20px;box-shadow:0 1px 2px rgba(12,45,87,.05);border:1px solid var(--v7-line)}
body .card:hover{box-shadow:0 1px 2px rgba(12,45,87,.06),0 10px 28px rgba(12,45,87,.08)}
body .sv-r{border-top:1px solid var(--v7-line)!important;border-radius:14px}
body .tp-price-card{border-top:1px solid var(--v7-line)!important;border-radius:20px}
[data-theme="dark"] body .card,[data-theme="dark"] body .sv-r,[data-theme="dark"] body .tp-price-card{border-color:#223449!important}
/* 5. Boutons : pilule unique, action principale cuivre */
body .btn{border-radius:999px}
body .btn-primary{background:var(--v7-cu);border-color:var(--v7-cu);color:#fff}
body .btn-primary:hover{background:var(--v7-cu6);border-color:var(--v7-cu6)}
/* 6. Bandeau d'appel final : même traitement que l'accueil */
body .cta-band{background:radial-gradient(420px 420px at 100% 0%,rgba(207,74,18,.35),transparent 65%),var(--v7-m8);border-radius:24px}
/* 7. En-tête : une ligne, 68 px, le bouton ne repousse plus le menu (défaut n° 1 du diagnostic) */
@media (min-width:1101px){
 body .site-header .nav-wrap{flex-wrap:nowrap;min-height:68px}
 body .site-header .main-nav ul{flex-wrap:nowrap}
 body .site-header .main-nav a{white-space:nowrap}
}
/* 8. Bandeau cookies : carte flottante compacte au lieu d'une barre pleine largeur */
@media (min-width:768px){
 body .cookie-banner{left:20px!important;right:auto!important;bottom:20px!important;max-width:420px;border-radius:18px;padding:18px 20px!important;box-shadow:0 18px 50px rgba(7,30,61,.35)!important}
 body .cookie-banner .cookie-inner{flex-direction:column;align-items:stretch;gap:12px}
 body .cookie-banner .cookie-actions{justify-content:flex-end}
}
/* 9. Plancher de lisibilité : aucun texte courant sous 13 px */
body .article-meta,body .price-note,body .s-lbl,body .breadcrumb,body .ftr-legal,body .footer-bottom,body .choice-price small,body .card small{font-size:max(.8125rem,1em)}
/* 10. Bouton de l'en-tête en cuivre (même action principale que dans les pages) */
body .site-header .main-nav a.btn-primary{background:var(--v7-cu)!important;border-color:var(--v7-cu)!important;color:#fff!important;box-shadow:0 6px 16px rgba(207,74,18,.3)}
body .site-header .main-nav a.btn-primary:hover{background:var(--v7-cu6)!important}
/* 11. Tunnel de commande : étapes et titres de catégories en sans empattement lisible */
body .wizard-progress span::before{font-family:var(--font-body,'Inter',sans-serif)!important;font-size:.8125rem!important;letter-spacing:.02em!important;text-transform:none!important}
body .choice-group-title{font-family:var(--font-body,'Inter',sans-serif)!important;font-size:.8125rem!important;letter-spacing:.1em!important}

/* ===== v7 audit 2026-09-29 : contrastes AA en mode sombre (auto via prefers-color-scheme) ===== */
html[data-theme=dark]{--link:#8fbfe8;--link-hover:#b9d7f1;--secondary:#ff9a6b;--price-ink:#ff9a6b;--v7-cu-t:#ff9a6b}
html[data-theme=dark] body .eyebrow,html[data-theme=dark] body .dj-date,html[data-theme=dark] body .dj-price,html[data-theme=dark] body .choice-price,html[data-theme=dark] body .price,
html[data-theme=dark] body .p-tag,html[data-theme=dark] body .p-go,html[data-theme=dark] body .p-price small,html[data-theme=dark] body .tp-lab,html[data-theme=dark] body .tp-micro,html[data-theme=dark] body .tp-big small,
html[data-theme=dark] body .tg,html[data-theme=dark] body .pr,html[data-theme=dark] body .v,html[data-theme=dark] body .d,html[data-theme=dark] body .t-bad,html[data-theme=dark] body .go,html[data-theme=dark] body .card-pole,
html[data-theme=dark] body .tpl-agent,html[data-theme=dark] body .price-note strong,html[data-theme=dark] body .card p.step-num{color:var(--v7-cu-t)!important}
html[data-theme=dark] body a[class*=btn] .dj-price,html[data-theme=dark] body button .dj-price,html[data-theme=dark] body .cta .dj-price,html[data-theme=dark] body .v7 .v7-hero .dj-price{color:inherit!important}
html[data-theme=dark] body .breadcrumb a,html[data-theme=dark] body nav[aria-label*="fil" i] a,html[data-theme=dark] body .btn-link{color:var(--link)!important}
html[data-theme=dark] body .article-cta p,html[data-theme=dark] body .article-cta{color:var(--text)}
html[data-theme=dark] body .btn:not(.btn-primary):not(.btn-light):not(.btn-accent){border-color:#3b4a5c}
html[data-theme=dark] body legend{color:var(--text)}
/* Aperçus de documents (modèles) : papier clair aussi en mode sombre */
html[data-theme=dark] .email,html[data-theme=dark] .doc,html[data-theme=dark] .tpl-body,html[data-theme=dark] .tpl-head,html[data-theme=dark] .sig-grid{--primary:#0c2d57;--secondary:#b8430f;--text:#0c2d57;--text-soft:#44515f;--border:#e2e8f0;--accent-soft:#fdece3;--surface:#fff;--link:#0f4c8a;color:#0c2d57;color-scheme:light}
html[data-theme=dark] .email .var,html[data-theme=dark] .tpl .var{color:#b8430f!important}
html[data-theme=dark] .tpl-agent{color:#b8430f!important}
html[data-theme=dark] body .tpl .tpl-agent,html[data-theme=dark] body .tpl .dj-price,html[data-theme=dark] body .tpl .dj-date,html[data-theme=dark] body .tpl .var,html[data-theme=dark] body .tpl .price{color:#b8430f!important}
html[data-theme=dark] body .tpl em{color:#b8430f}
html[data-theme=dark] body .tpl strong,html[data-theme=dark] body .tpl b{color:#0c2d57}
html[data-theme=dark] body .article-cta{background:#122236!important;color:#c3cedb!important}
html[data-theme=dark] body .article-cta p{color:#c3cedb!important}
html[data-theme=dark] body .article-cta .eyebrow,html[data-theme=dark] body .eyebrow.is-pole,html[data-theme=dark] body .sv-p .n,html[data-theme=dark] body .who,html[data-theme=dark] body .k,html[data-theme=dark] body .tf-pt .cap sup{color:#ff9a6b!important;opacity:1!important}
html[data-theme=dark] body .btn-ghost{color:var(--text)!important;border-color:#5b6b7d!important}
html[data-theme=dark] body .tf-pt .cap,html[data-theme=dark] body .st{color:#c3cedb!important}
html[data-theme=dark] body .tf-pt .cap b{color:#e2e8f0!important}
html[data-theme=dark] body .sim-tab[aria-selected=true]{color:#ff9a6b!important}
html[data-theme=dark] body [style*="background:#eaf2fb"]{background:var(--accent-soft)!important}
html[data-theme=dark] body [style*="background:#eaf2fb"] strong{color:var(--text)!important}
html[data-theme=dark] body .v7-pf span{color:#c3cedb}
html[data-theme=dark] body .tp-zero{color:#5fd0a6!important}
html[data-theme=dark] body .article-cta .btn-link{color:#8fbfe8!important}
html[data-theme=dark] body .article-cta .legal-print{color:#e2e8f0!important;background:transparent!important;border-color:#5b6b7d!important}
html[data-theme=dark] body [style*="background:#fafbfd"]{background:var(--surface)!important;border-color:var(--border)!important}
html[data-theme=dark] body .logo-co{color:#ff9a6b}
html[data-theme=dark] body .md-intro .var{color:#b8430f!important}
html[data-theme=dark] body .now .st{color:#fff!important}
/* v7 audit 2026-09-29 : petits mobiles (≤ 400 px) — titre du héros coupé à 360 px */
@media (max-width:900px){.v7-hero>.v7-w{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.v7-hero h1{font-size:min(2.4rem,9.2vw)}}
@media (max-width:330px){.v7-kw{white-space:normal}.v7-kw svg{display:none}}
.v7-quote-h small{white-space:nowrap}@media (max-width:400px){.v7-quote-h h2{font-size:1rem}}
/* v7 audit 2026-09-29 : plancher de lisibilité 12 px sur les textes publics (aperçus de documents imprimables exclus) */
html body .ftr-id,html body .footer-bottom span,html body .card-pole,html body .eyebrow.is-pole,html body a.tp-xs .tg,html body .tp-step .d,html body main table th:not(.sheet *):not(.paper-inner *),html body .tp-lab,html body .p-tag,html body .p-price .des,html body .tf-pt .cap,html body .tf-pt .cap b,html body .fe-pt .cap,html body .who{font-size:.75rem!important}
/* Bandeau cookies : icône vectorielle à la place de l'emoji */
.cookie-banner .ck-ic{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:6px;fill:none;stroke:#ff9a6b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===================== v7 · Réagencement « Replier » + couleurs « Marine & Cuivre ravivés » (validé le 29/09/2026) ===================== */
/* Rythme resserré */
html body .section{padding-top:clamp(1.25rem,2.6vw,2.25rem)!important;padding-bottom:clamp(1.25rem,2.6vw,2.25rem)!important}
html body .section-head{margin-bottom:clamp(.8rem,1.5vw,1.25rem)!important}
html body .page-header,html body .tp-hero{padding-top:clamp(1rem,2.4vw,2rem)!important;padding-bottom:clamp(1rem,2.4vw,2rem)!important}
html body .v7-s{padding-top:clamp(28px,4vw,56px)!important;padding-bottom:clamp(28px,4vw,56px)!important}
html body .v7-hero{padding-top:clamp(24px,3.5vw,48px)!important}
html body .cta-band{padding-top:clamp(1.2rem,2.6vw,2rem)!important;padding-bottom:clamp(1.2rem,2.6vw,2rem)!important}
@media (min-width:681px){html body .card{padding:1rem 1.15rem!important}html body .grid{gap:.85rem!important}}
@media (max-width:680px){
 html body .grid-4,html body .tp-inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 html body .blog-grid{gap:0!important}
 html body .blog-grid>.card{padding:.75rem 0!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
 html body .blog-grid>.card>p:not(.card-pole){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.2rem 0!important}
 html body .site-footer .footer-grid{padding:.8rem 0 .3rem!important}
}
@media (max-width:680px){html body .section{padding-top:14px!important;padding-bottom:14px!important}html body .section-head{margin-bottom:.75rem!important}html body .page-header,html body .tp-hero{padding-top:14px!important;padding-bottom:16px!important}}
/* Listes de cartes en carrousel horizontal (mobile et tablette) */
@media (max-width:760px){
 html body .presta-grid,html body .grid-3,html body .grid-4,html body .v7-bento,html body .steps,html body .v7-tools,html body .tp-steps,html body .tp-xsell,html body .sv-poles{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:minmax(80%,1fr)!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:12px!important;margin-inline:-20px!important;padding:2px 20px 12px!important;scroll-padding-inline:20px;scrollbar-width:thin}
 html body .presta-grid>*,html body .grid-3>*,html body .grid-4>*,html body .v7-bento>*,html body .steps>*,html body .v7-tools>*,html body .tp-steps>*,html body .tp-xsell>*,html body .sv-poles>*{scroll-snap-align:start;min-width:0}
}
@media (max-width:760px){html body [role=region][tabindex="0"]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}}
/* Accordéons (pages légales, FAQ d'article) */
html body details.v7-acc{border-bottom:1px solid var(--border);padding:.1rem 0}
html body details.v7-acc>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0}
html body details.v7-acc>summary::-webkit-details-marker{display:none}
html body details.v7-acc>summary>h2,html body details.v7-acc>summary>h3{margin:0!important;font-size:1.05rem!important}
html body details.v7-acc-s>summary>h3{font-size:1rem!important}
html body details.v7-acc>summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 1.1rem/1 var(--font-body)}
html body details.v7-acc[open]>summary::after{content:"–"}
html body details.v7-acc>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
/* Onglets des pôles (Expertises) */
html body .v7-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:12px 20px 4px}
html body .v7-tabs button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.55rem 1.1rem;min-height:44px;font:600 .92rem var(--font-body);color:var(--primary);cursor:pointer}
html body .v7-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}
html body .v7-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html body .v7-more{display:flex;margin:1.1rem auto 0}
@media print{html body details.v7-acc>*{display:block!important}html body .v7-tabs,html body .v7-more{display:none!important}html body [data-v7-panel][hidden],html body .blog-grid>[hidden]{display:block!important}}
html body .v7-more{background:var(--surface)!important;color:var(--primary)!important;border:1.5px solid var(--primary)!important;border-radius:999px;padding:.65rem 1.4rem;font-weight:600;min-height:44px}
html body .v7-more:hover{background:var(--primary)!important;color:#fff!important}
html body .sv-p .n{color:var(--secondary)!important;opacity:1!important}
html[data-theme=dark] body .v7-more{color:var(--text)!important;border-color:var(--text)!important}
html body .v7-folded>.legal-toc{display:none!important}
@media print{html body details.v7-acc::details-content{content-visibility:visible!important;display:block!important;height:auto!important}}
@media (max-width:680px){html body .v7-proof{margin-top:28px!important}html body .v7-proof li{padding:12px 10px 12px 12px!important;gap:8px!important}html body .v7-proof li p{font-size:.88rem;line-height:1.4;margin:0}html body .v7-proof li:nth-child(odd){padding-left:0!important}}
html body .tf-d .k,html body .tf-d .st,html body .fin-prix .fin-des,html body .dl-meta .tag,html body .legal-est-head .legal-badge,html body .choice-group-title small,html body .tf-p .flag{font-size:.75rem!important}