/* ============================================================
   PHOCEA PAIE — Feuille de styles partagée
   Charte : bleu ardoise #132A3A, or #B07B2E, vert sauge #3F7A63
   Polices : Source Serif 4 (titres), Inter Tight (texte), IBM Plex Mono (données)
============================================================ */
:root{
  --ink:#132A3A; --ink-2:#22465C; --muted:#5B7385;
  --paper:#F5F3EE; --paper-2:#EBE7DE; --white:#FFFFFF;
  --gold:#B07B2E; --gold-soft:#F0E3CB;
  --sage:#3F7A63; --sage-soft:#E1EDE7;
  --red:#B3462F; --red-soft:#F3DCD5;
  --line:rgba(19,42,58,.14); --line-strong:rgba(19,42,58,.28);
  --radius:8px;
  --shadow:0 20px 44px -26px rgba(19,42,58,.45);
  --shadow-soft:0 8px 24px -12px rgba(19,42,58,.2);
}
*{box-sizing:border-box; margin:0}
body{background:var(--paper); color:var(--ink); font-family:'Inter Tight',system-ui,sans-serif; font-size:15.5px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif; font-weight:600; letter-spacing:-.02em; line-height:1.2}
h1{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.6em}
h2{font-size:clamp(1.3rem,3vw,1.8rem); margin-bottom:.5em}
h3{font-size:clamp(1.05rem,2vw,1.3rem); margin-bottom:.4em}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
.mono{font-family:'IBM Plex Mono',monospace}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ===== Boutons ===== */
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:4px; font-weight:600; font-size:.88rem; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:background .2s,color .2s,border-color .2s; text-decoration:none}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--gold)}
.btn-ghost{border-color:var(--line-strong); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-sm{padding:9px 15px; font-size:.82rem}
.btn-link{background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--gold); cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.btn-link:hover{text-decoration:underline}

/* ===== Navigation ===== */
.topbar{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.topbar-in{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:'Source Serif 4',serif; font-weight:600; font-size:1.1rem; white-space:nowrap}
.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{padding:8px 13px; font-size:.86rem; font-weight:500; color:var(--muted); border-radius:4px; transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink); background:var(--paper)}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:12px}
.nav-cta{white-space:nowrap}
.burger{display:none; flex-direction:column; gap:5px; width:28px; padding:4px 0; background:none; border:none; cursor:pointer}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s}
.mobile-nav{display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--paper); z-index:39; padding:24px; flex-direction:column; gap:8px; overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 0; font-size:1.05rem; font-weight:500; border-bottom:1px solid var(--line)}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}

/* ===== Breadcrumb ===== */
.breadcrumb{padding:14px 0; font-size:.82rem; color:var(--muted); max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px}
.breadcrumb a{color:var(--gold); font-weight:500}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{margin:0 8px; color:var(--line-strong)}

/* ===== Sections ===== */
.section{padding:64px 0}
.section.alt{background:var(--white)}
.section.dark{background:var(--ink); color:var(--paper)}
.section.dark h2,.section.dark h3{color:var(--paper)}
.section.dark p{color:rgba(245,243,238,.8)}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:12px}
.lead{font-size:1.08rem; color:var(--ink-2); max-width:68ch; line-height:1.7; margin-bottom:24px}

/* ===== BLUF : réponse directe (premier paragraphe fort) ===== */
.bluf{font-size:1.05rem; font-weight:500; color:var(--ink); line-height:1.7; margin-bottom:20px; padding:20px 24px; background:var(--white); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0}
.bluf b{color:var(--ink)}

/* ===== Contenu article / guide ===== */
.content-body{max-width:75ch; line-height:1.8; font-size:1rem; color:var(--ink-2)}
.content-body p{margin-bottom:18px}
.content-body b,.content-body strong{color:var(--ink)}
.content-body h2{margin-top:40px; margin-bottom:16px; color:var(--ink)}
.content-body h3{margin-top:28px; margin-bottom:12px; color:var(--sage)}
.content-body ul,.content-body ol{margin:16px 0; padding-left:24px}
.content-body li{margin-bottom:8px}
.content-body table{width:100%; border-collapse:collapse; margin:24px 0; font-size:.92rem}
.content-body th{background:var(--ink); color:var(--paper); text-align:left; padding:10px 14px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.content-body td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.content-body tr:hover td{background:var(--white)}

/* ===== Cartes ===== */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft)}
.card-top{height:4px}
.card-body{padding:24px}
.card-body h3{font-size:1.05rem; margin-bottom:8px}
.card-body p{font-size:.9rem; color:var(--muted); margin-bottom:14px}
.card-meta{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted); display:flex; gap:12px}
.card-tag{font-family:'IBM Plex Mono',monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:10px}

/* ===== Liens officiels ===== */
.ext-links{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:28px}
.ext-card{display:flex; flex-direction:column; gap:5px; background:var(--white); border:1px solid var(--line); border-radius:6px; padding:16px 18px; transition:border-color .2s,box-shadow .2s; text-decoration:none}
.ext-card:hover{border-color:var(--gold); box-shadow:var(--shadow-soft)}
.ext-card .en{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:7px}
.ext-card .ed{font-size:.8rem; color:var(--muted); line-height:1.5; flex:1}
.ext-card .eu{font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--gold); margin-top:4px}

/* ===== Boutons d'action naturels ===== */
.next-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.nx{display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border:1px solid var(--line-strong); border-radius:30px; background:var(--white); font:inherit; font-size:.9rem; font-weight:600; color:var(--ink); transition:background .2s,color .2s,border-color .2s; text-decoration:none; cursor:pointer}
.nx:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* ===== Source / note ===== */
.src-note{display:flex; gap:12px; padding:16px 20px; background:var(--white); border-radius:var(--radius); border:1px solid var(--line); font-size:.86rem; color:var(--muted); margin-top:28px}
.src-note .i{flex:none; width:22px; height:22px; border-radius:50%; background:var(--sage-soft); color:var(--sage); display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700}

/* ===== Article meta ===== */
.article-meta{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:28px; font-size:.85rem; color:var(--muted)}
.article-meta .tag{font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; background:var(--gold-soft); color:var(--gold); padding:5px 11px; border-radius:3px; font-weight:600}
.author-line{display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
.author-line .av{width:36px; height:36px; border-radius:50%; background:var(--sage-soft); color:var(--sage); display:grid; place-items:center; font-family:'Source Serif 4',serif; font-weight:700; font-size:.9rem}
.author-line .an{font-weight:600; font-size:.88rem}
.author-line .ar{font-size:.78rem; color:var(--muted)}

/* ===== Simulateur ===== */
.sim-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:20px}
.sim-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:20px}
.sim-field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px}
.sim-field input,.sim-field select{width:100%; padding:11px 13px; border:1px solid var(--line-strong); border-radius:4px; font-family:'Inter Tight',sans-serif; font-size:.95rem; background:var(--paper); color:var(--ink)}
.sim-field input:focus,.sim-field select:focus{outline:none; border-color:var(--gold); background:var(--white)}
.sim-results{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px}
.sim-res-card{background:var(--paper); border-radius:var(--radius); padding:20px 22px}
.sim-res-card .rv{font-family:'Source Serif 4',serif; font-size:1.8rem; font-weight:700; letter-spacing:-.02em}
.sim-res-card .rl{font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:6px}
.sim-res-card .rd{font-size:.82rem; color:var(--muted); margin-top:6px}
.sim-res-card.c-net{border-left:4px solid var(--sage)}
.sim-res-card.c-brut{border-left:4px solid var(--gold)}
.sim-res-card.c-emp{border-left:4px solid var(--ink)}
.sim-alert{display:none; margin-top:18px; background:var(--red-soft); color:var(--red); border:1px solid rgba(179,70,47,.35); border-radius:6px; padding:14px 18px; font-size:.88rem; font-weight:600; line-height:1.55; align-items:flex-start; gap:10px}
.sim-alert.show{display:flex}
.sim-alert .w{flex:none; font-size:1rem}

/* ===== Glossaire ===== */
.glossary-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.gterm{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; text-decoration:none; transition:transform .2s,box-shadow .2s}
.gterm:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft)}
.gterm .gt{font-family:'IBM Plex Mono',monospace; font-size:.82rem; font-weight:600; color:var(--gold)}
.gterm h3{font-size:1rem; margin:6px 0 8px}
.gterm p{font-size:.85rem; color:var(--muted); line-height:1.5}

/* ===== CTA band ===== */
.cta-band{background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.cta-band h2{color:var(--paper); max-width:28ch}
.cta-band .btn-primary{background:var(--gold); color:var(--ink)}

/* ===== Hero accueil ===== */
.hero{padding:80px 0 60px}
.hero h1{max-width:18ch}
.hero h1 em{color:var(--gold); font-style:italic}
.hero .lead{max-width:56ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

/* ===== Formulaire ===== */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px}
.fgroup{margin-bottom:20px}
.flabel{display:block; font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
input,select,textarea{width:100%; padding:11px 14px; border:1px solid var(--line-strong); border-radius:4px; font-family:'Inter Tight',sans-serif; font-size:.95rem; background:var(--paper); color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); background:var(--white)}
.hint{font-size:.78rem; color:var(--muted); margin-top:8px; line-height:1.55}
.choices{display:flex; flex-wrap:wrap; gap:8px}
.choice{cursor:pointer}
.choice input{position:absolute; opacity:0; width:0}
.choice span{display:inline-block; padding:10px 16px; border:1px solid var(--line-strong); border-radius:4px; font-size:.88rem; font-weight:500; transition:all .15s}
.choice input:checked+span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.82rem; line-height:1.55; color:var(--ink-2)}
.consent input[type="checkbox"]{width:auto; flex:none; margin-top:3px; accent-color:var(--sage)}
.ferror{color:var(--red); font-size:.82rem}
.hp-field{position:absolute; left:-9999px; opacity:0; height:0}

/* ===== Footer ===== */
.site-footer{background:var(--ink); color:rgba(245,243,238,.75); margin-top:80px; padding:52px 0 0}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
.site-footer h4{color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:14px}
.site-footer a{display:block; padding:4px 0; font-size:.88rem; color:rgba(245,243,238,.7); transition:color .2s}
.site-footer a:hover{color:var(--gold)}
.site-footer p{font-size:.85rem; line-height:1.6}
.brand-foot{display:flex; align-items:center; gap:10px; font-family:'Source Serif 4',serif; font-weight:600; font-size:1.1rem; color:var(--paper); margin-bottom:14px}
.footer-bottom{display:flex; justify-content:space-between; padding:20px 0; margin-top:36px; border-top:1px solid rgba(245,243,238,.12); font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:rgba(245,243,238,.45); flex-wrap:wrap; gap:12px}

/* ===== Mobile ===== */
@media (max-width:820px){input,select,textarea{font-size:16px}}
@media (max-width:720px){
  .hero{padding:48px 0 36px}
  .hero-actions .btn{width:100%; justify-content:center}
  .card-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-band{flex-direction:column; align-items:flex-start; padding:32px 28px}
  .frow{grid-template-columns:1fr}
  .sim-row{grid-template-columns:1fr}
  .bluf{padding:16px 18px}
  .next-actions .nx{width:100%; justify-content:space-between}
  .ext-links{grid-template-columns:1fr}
  .glossary-grid{grid-template-columns:1fr}
  .section{padding:44px 0}
}
@media (max-width:460px){
  .wrap{padding:0 16px}
  .footer-grid{grid-template-columns:1fr}
}