/* agence-framer.fr — socle partagé (toutes pages) */

/* --- Polices auto-hébergées --- */
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* --- Base --- */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FBFBFC; color: #0C0E10; font-family: "Satoshi", "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
* { box-sizing: border-box; }
a { color: oklch(0.52 0.15 145); text-decoration: none; }
a:hover { color: #0C0E10; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, dt { margin: 0; }
ul, ol { padding: 0; list-style: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
input, button, select, textarea { font: inherit; color: inherit; }
::selection { background: oklch(0.65 0.19 145); color: #fff; }
:focus-visible { outline:2px solid oklch(0.52 0.15 145); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }

/* --- Composants formulaire --- */
.typebtn { padding:14px 12px; border-radius:12px; text-align:center; font-size:15px; font-weight:700;
           line-height:1.35; cursor:pointer; background:#fff; border:1px solid #E6E8EA;
           transition:background .18s ease, border-color .18s ease; font-family:inherit; color:inherit; }
.typebtn:hover { border-color:#0C0E10; }
.typebtn[aria-pressed="true"] { background:#F1F7F3; border:2px solid oklch(0.52 0.15 145); }
.form-msg { padding:14px 16px; border-radius:12px; font-size:15px; display:none; }
.form-msg.ok  { display:block; background:#F1F7F3; color:#14532d; border:1px solid oklch(0.52 0.15 145); }
.form-msg.err { display:block; background:#FEF2F2; color:#991B1B; border:1px solid #FCA5A5; }

/* --- Tableaux comparatifs : défilement plutôt que coupe --- */
.table-scroll { -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid oklch(0.52 0.15 145); outline-offset: 2px; }

/* --- Menu mobile --- */
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary { display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:9px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); }
.nav-mobile > summary span { display:block; height:2px; border-radius:2px; background:#fff; transition:transform .18s ease, opacity .18s ease; }
.nav-mobile[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile[open] > summary span:nth-child(2) { opacity: 0; }
.nav-mobile[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-panel { position:fixed; top:64px; left:16px; right:16px; display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:14px; background:#15181B; border:1px solid rgba(255,255,255,0.14); box-shadow:0 16px 48px rgba(0,0,0,0.45); z-index:70; }
.nav-mobile-panel a { display:block; padding:11px 14px; border-radius:9px; color:rgba(255,255,255,0.85); font-size:15px; }
.nav-mobile-panel a:hover, .nav-mobile-panel a[aria-current="page"] { background:rgba(255,255,255,0.08); color:#fff; }

/* --- Responsive : les styles inline des pages exigent !important --- */
@media (max-width: 900px) {
  .nav-main { display: none !important; }
  .nav-mobile { display: block; }
}
@media (max-width: 1040px) {
  .g-4, .g-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 860px) {
  .g-split, .g-2 { grid-template-columns: 1fr !important; }
  .g-footer { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .g-3, .g-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .g-3s { grid-template-columns: repeat(2, 1fr) !important; }
  .g-footer { grid-template-columns: 1fr !important; }
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  header { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- Pages intérieures : prose --- */
.page-hero { padding: 148px 28px 64px; background:#0C0E10; color:#fff; }
.page-hero .inner { max-width: 860px; margin: 0 auto; display:flex; flex-direction:column; gap:20px; }
.crumbs { font-size:13.5px; color:rgba(255,255,255,0.5); display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:rgba(255,255,255,0.7); }
.crumbs a:hover { color:#fff; }
.prose { max-width: 760px; margin: 0 auto; display:flex; flex-direction:column; gap:22px; font-size:17px; line-height:1.7; color:#2A2F33; }
.prose h2 { font-size:clamp(26px, 3vw, 34px); line-height:1.12; letter-spacing:-0.025em; font-weight:900; color:#0C0E10; margin-top:26px; }
.prose h3 { font-size:20px; font-weight:700; letter-spacing:-0.02em; color:#0C0E10; margin-top:10px; }
.prose ul { display:flex; flex-direction:column; gap:10px; }
.prose ul li { padding-left:26px; position:relative; }
.prose ul li::before { content:"→"; position:absolute; left:0; color:oklch(0.52 0.15 145); font-weight:700; }
.prose ol { list-style:decimal; padding-left:24px; display:flex; flex-direction:column; gap:10px; }
.prose table { width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px; }
.prose th, .prose td { text-align:left; padding:13px 16px; border-bottom:1px solid #E6E8EA; vertical-align:top; }
.prose thead th { background:#0C0E10; color:#fff; font-size:13.5px; letter-spacing:0.04em; text-transform:uppercase; }
.prose .encart { padding:22px 26px; border-radius:14px; background:#F1F7F3; border:1px solid oklch(0.52 0.15 145 / 0.35); font-size:16px; }
.prose .table-scroll { overflow:auto; border:1px solid #DCDFE2; border-radius:14px; background:#fff; }
.prose .table-scroll table { min-width:560px; }
.faq-item { border-bottom:1px solid #E6E8EA; }
.faq-item summary { display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.faq-item summary::after { content:"+"; color:oklch(0.52 0.15 145); font-weight:700; }
.faq-item[open] summary::after { content:"–"; }
.faq-item .rep { padding:0 0 18px; font-size:16px; line-height:1.65; color:#4C5257; max-width:660px; }