/* ============================================================
   leplanretraite.fr : typographie et composants.
   Toutes les hauteurs, marges et interlignages sont des
   multiples de 8 px (ligne de base). Les filets sont dessinés
   en box-shadow ou en dégradé pour ne jamais décaler le rythme.
   ============================================================ */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/inter-400i.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2");}

:root{ --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; }

/* ---------- texte ---------- */
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
fieldset{border:0;padding:0;margin:0;min-width:0;}
.result .line small{display:block;font-size:13px;line-height:24px;color:rgba(250,247,242,.7);}
h1,h2,h3,h4{font-weight:700;color:var(--navy);letter-spacing:-.01em;text-wrap:balance;}
.masthead{font-size:56px;line-height:64px;letter-spacing:-.025em;margin:0 0 var(--lh);font-weight:700;}
.masthead.xl{font-size:72px;line-height:80px;}
.h2b,h2{font-size:32px;line-height:40px;margin:0 0 var(--lh);}
h3{font-size:20px;line-height:24px;margin:0 0 var(--bl);}
h4{font-size:16px;line-height:24px;margin:0;}
h2.q{font-size:20px;line-height:24px;margin:0 0 var(--bl);letter-spacing:-.01em;}
.lede{font-size:20px;line-height:32px;color:var(--navy-2);margin:0 0 var(--lh);text-wrap:pretty;}
.body,p{margin:0 0 var(--lh);text-wrap:pretty;}
p:last-child,.body:last-child{margin-bottom:0;}
.small,.cap{font-size:14px;line-height:24px;color:var(--ink-soft);}
.cap{margin:0 0 var(--lh);}
.kicker{font-family:var(--mono);font-size:12px;line-height:24px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 var(--bl);display:block;}
.kicker.light{color:var(--gold);}
.numeral,.figure{font-size:64px;line-height:72px;font-weight:700;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums lining-nums;margin:0;}
.numeral.md,.figure.md{font-size:48px;line-height:56px;}
.numeral small,.figure small{font-size:20px;line-height:24px;letter-spacing:0;font-weight:500;color:var(--ink-soft);margin-left:4px;}
.muted{color:var(--ink-soft);}
.gold{color:var(--gold-deep);}
.red{color:var(--red);}
.green{color:var(--green);}
.tnum{font-variant-numeric:tabular-nums lining-nums;}
a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--gold-deep);}
strong{font-weight:600;}
ul.list,ol.list{padding:0 0 0 24px;margin:0 0 var(--lh);}
ul.list li,ol.list li{margin:0;}
ul.clean{list-style:none;padding:0;margin:0 0 var(--lh);}
ul.ticks{list-style:none;padding:0;margin:0 0 var(--lh);}
ul.ticks li{position:relative;padding-left:24px;}
ul.ticks li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:4px;background:var(--gold);}
ul.ticks.no li::before{background:var(--red);}
blockquote{padding-left:24px;box-shadow:inset 2px 0 0 var(--gold);color:var(--navy-2);font-size:20px;line-height:32px;margin:0 0 var(--lh);}
.rule{height:var(--lh);background-image:linear-gradient(to bottom,var(--line) 0 1px,transparent 1px);}
.rule.navy{background-image:linear-gradient(to bottom,var(--navy) 0 2px,transparent 2px);}
.hairline-top{box-shadow:inset 0 1px 0 var(--line);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

@media (max-width:1024px){
  .masthead{font-size:44px;line-height:48px;}
  .masthead.xl{font-size:56px;line-height:64px;}
  .numeral,.figure{font-size:48px;line-height:56px;}
}
@media (max-width:640px){
  .masthead,.masthead.xl{font-size:32px;line-height:40px;}
  .h2b,h2{font-size:24px;line-height:32px;}
  .lede{font-size:18px;line-height:24px;}
  .numeral,.numeral.md,.figure,.figure.md{font-size:40px;line-height:48px;}
}

/* ---------- planches ---------- */
.spread.ivory{background:var(--paper-2);}
.spread.navy{background:var(--navy);color:var(--paper-2);}
.spread.navy h1,.spread.navy h2,.spread.navy h3,.spread.navy .numeral{color:#fff;}
.spread.navy .lede{color:rgba(250,247,242,.85);}
.spread.navy a{color:#fff;}
.spread.navy a:hover{color:var(--gold);}
.spread.navy .muted,.spread.navy .small,.spread.navy .cap{color:rgba(250,247,242,.72);}
.spread.navy .rule{background-image:linear-gradient(to bottom,rgba(250,247,242,.25) 0 1px,transparent 1px);}
.spread.navy .kicker{color:var(--gold);}

/* ---------- en-tête ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);box-shadow:inset 0 -1px 0 var(--line);}
.site-head .wrap{padding-top:16px;padding-bottom:16px;}
.site-head .wrap .guides .rows{top:16px;}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);height:40px;}
.brand .mark{width:40px;height:40px;flex:none;}
.brand .word{font-weight:700;font-size:18px;line-height:24px;letter-spacing:-.01em;}
.brand .word small{display:block;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--ink-soft);}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:24px;height:40px;list-style:none;margin:0;padding:0;}
.nav a{text-decoration:none;font-weight:500;font-size:15px;line-height:24px;color:var(--navy);white-space:nowrap;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-deep);box-shadow:inset 0 -2px 0 var(--gold);}
.nav .btn{height:40px;padding:8px 16px;}
.nav a.btn-primary,.nav a.btn-primary:hover,.nav a.btn-primary[aria-current="page"]{color:#fff;box-shadow:none;}
.nav a.btn-primary:hover{background:var(--navy-2);}
.nav-toggle{display:none;height:40px;width:100%;border:0;background:transparent;cursor:pointer;padding:9px 0;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0 5px auto;transition:transform .2s,opacity .2s;}
/* menu compact jusqu'à 1 180 px : entre 1 025 et 1 075 px, le menu à 15 px chevauchait le logo (marges de 72 px) */
@media (max-width:1180px){ .nav{gap:16px;} .nav a{font-size:14px;} }
@media (max-width:1024px){
  .site-head .band > .brand{grid-column:1 / 5 !important;} .site-head .band > .nav{grid-column:5 / 13 !important;}
}
/* menu replié sous 960 px (et non 900) : entre 901 et 907 px, le menu touchait encore le logo */
@media (max-width:960px){
  .site-head .band > .brand{grid-column:1 / 12 !important;} .site-head .band > .nav-toggle{grid-column:12 / 13 !important;}
  .nav-toggle{display:block;}
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;flex-direction:column;align-items:stretch;height:auto;padding:16px var(--margin) 24px;gap:0;box-shadow:0 12px 24px rgba(14,36,68,.12);}
  .nav.open{display:flex;}
  .nav li{box-shadow:inset 0 -1px 0 var(--line);} .nav li:last-child{box-shadow:none;padding-top:16px;}
  .nav a{display:block;padding:12px 0;font-size:16px;}
  .nav a:hover,.nav a[aria-current="page"]{box-shadow:none;}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:12px 24px;border:0;border-radius:2px;
  font:inherit;font-weight:600;font-size:15px;line-height:24px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-2);color:#fff;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:#C9AC75;color:var(--navy);}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);}
.btn-ghost:hover{background:var(--navy);color:#fff;}
.spread.navy .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}
.spread.navy .btn-ghost:hover{background:#fff;color:var(--navy);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55;cursor:default;}
.btn-row{display:flex;flex-wrap:wrap;gap:16px 24px;margin:0 0 var(--lh);}
.btn-row:last-child{margin-bottom:0;}
.btn-row .small{align-self:center;}

/* ---------- cartes, encarts, tuiles ---------- */
.card{background:var(--paper);box-shadow:0 0 0 1px var(--line);padding:24px;border-radius:2px;}
.card.ivory{background:var(--paper-2);}
.card.navy{background:var(--navy);color:var(--paper-2);box-shadow:none;}
.card.navy h3,.card.navy .numeral,.card.navy .figure{color:#fff;}
.card.navy .cap,.card.navy .small{color:rgba(250,247,242,.72);}
.card.gold{box-shadow:inset 4px 0 0 var(--gold),0 0 0 1px var(--line);}
.card.red{box-shadow:inset 4px 0 0 var(--red),0 0 0 1px var(--line);}
.card > :last-child{margin-bottom:0;}
.card .h3{min-height:48px;}
.note{padding:24px;background:var(--gold-pale);box-shadow:inset 4px 0 0 var(--gold);margin:0 0 var(--lh);}
.note.warn{background:#FBEFEC;box-shadow:inset 4px 0 0 var(--red);}
.note > :last-child{margin-bottom:0;}
.tile{padding:24px;background:var(--paper-2);box-shadow:0 0 0 1px var(--line);}
.tile .numeral{margin:0;}
.steps{list-style:none;padding:0;margin:0 0 var(--lh);counter-reset:step;}
.steps li{position:relative;padding-left:56px;margin:0 0 var(--lh);counter-increment:step;}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--mono);font-size:14px;line-height:24px;color:var(--gold-deep);letter-spacing:.06em;}
.steps li:last-child{margin-bottom:0;}
.steps h3{margin-bottom:0;}
.badge{display:inline-block;font-family:var(--mono);font-size:12px;line-height:24px;letter-spacing:.1em;text-transform:uppercase;padding:0 8px;background:var(--gold-pale);color:var(--gold-deep);}
.badge.navy{background:var(--navy);color:#fff;}
.badge.red{background:#FBEFEC;color:var(--red);}
.badge.green{background:#E8F3EE;color:var(--green);}

/* ---------- tableaux ---------- */
.tbl{width:100%;border-collapse:collapse;margin:0 0 var(--lh);font-variant-numeric:tabular-nums lining-nums;}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;line-height:24px;box-shadow:inset 0 -1px 0 var(--line);}
.tbl th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;}
.tbl td.num,.tbl th.num{text-align:right;padding-right:0;}
.tbl tr:last-child td{box-shadow:none;}
.tbl.compact th,.tbl.compact td{padding-top:4px;padding-bottom:4px;}
.tbl-scroll{overflow-x:auto;margin:0 0 var(--lh);}
.tbl-scroll .tbl{margin:0;min-width:560px;}

/* ---------- FAQ ---------- */
details.faq{box-shadow:inset 0 -1px 0 var(--line);}
details.faq summary{cursor:pointer;list-style:none;padding:12px 40px 12px 0;line-height:24px;font-weight:600;color:var(--navy);position:relative;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";position:absolute;right:0;top:12px;width:24px;height:24px;text-align:center;font-weight:400;color:var(--gold-deep);font-size:20px;line-height:24px;}
details.faq[open] summary::after{content:"\2013";}
details.faq .ans{padding:0 0 24px;}
details.faq .ans p{margin-bottom:var(--lh);}
details.faq .ans p:last-child{margin-bottom:0;}

/* ---------- formulaires ---------- */
.field{margin:0 0 var(--lh);}
.field label,.field .lab{display:block;font-weight:600;line-height:24px;margin:0 0 8px;color:var(--navy);}
.field .help{display:block;font-size:14px;line-height:24px;color:var(--ink-soft);margin:0;}
.field .help.above{margin:0 0 8px;}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;height:48px;padding:11px 16px;font:inherit;line-height:24px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;}
textarea{height:auto;min-height:96px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold);}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230E2444' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.row2{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;}
@media (max-width:640px){ .row2{grid-template-columns:1fr;} }
.choices{display:grid;gap:8px;margin:0 0 var(--lh);}
.choices.two{grid-template-columns:1fr 1fr;}
@media (max-width:640px){ .choices.two{grid-template-columns:1fr;} }
label.opt{display:flex;gap:12px;align-items:flex-start;padding:11px 15px;background:#fff;border:1px solid var(--line);border-radius:2px;cursor:pointer;line-height:24px;min-height:48px;transition:border-color .15s,background .15s;}
label.opt:hover{border-color:var(--navy-2);}
label.opt input{margin:4px 0 0;width:16px;height:16px;flex:none;accent-color:var(--navy);}
label.opt:has(input:checked){border-color:var(--navy);background:var(--gold-pale);}
label.opt b{display:block;font-weight:600;color:var(--navy);}
label.opt small{display:block;font-size:14px;line-height:24px;color:var(--ink-soft);}
label.chk{display:flex;gap:12px;align-items:flex-start;line-height:24px;font-size:14px;color:var(--ink);margin:0 0 8px;}
label.chk input{margin:4px 0 0;width:16px;height:16px;flex:none;accent-color:var(--navy);}
.err{display:none;color:var(--red);font-size:14px;line-height:24px;margin:0 0 var(--lh);}
.err.show{display:block;}
.progress{display:flex;gap:8px;margin:0 0 var(--lh);height:24px;align-items:center;}
.progress i{flex:1;height:4px;background:var(--line);}
.progress i.on{background:var(--gold);}
.progress i.done{background:var(--navy);}
.step{display:none;} .step.on{display:block;}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* ---------- simulateur ---------- */
.sim{background:var(--paper-2);box-shadow:0 0 0 1px var(--line);padding:24px;}
.sim .field{margin-bottom:16px;}
.sim .field:last-child{margin-bottom:0;}
input[type=range]{width:100%;height:24px;margin:0;accent-color:var(--navy);}
.range-val{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;}
.result{padding:24px;background:var(--navy);color:var(--paper-2);}
.result .kicker{color:var(--gold);}
.result .numeral,.result .figure{color:#fff;}
.result .cap,.result .small{color:rgba(250,247,242,.75);}
.result .line{display:flex;justify-content:space-between;gap:16px;line-height:24px;padding:12px 0;box-shadow:inset 0 -1px 0 rgba(250,247,242,.18);font-variant-numeric:tabular-nums;}
.result .line:last-child{box-shadow:none;}
.result .line b{font-weight:600;color:#fff;}
.bars{display:grid;gap:8px;margin:0 0 var(--lh);}
.bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;line-height:24px;}
.bar .track{height:16px;background:var(--line);position:relative;}
.bar .track i{position:absolute;left:0;top:0;bottom:0;background:var(--navy);transition:width .3s;}
.bar .track i.gold{background:var(--gold);}
.bar .track i.red{background:var(--red);}
.bar .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy);min-width:88px;text-align:right;}
.bar .l{grid-column:1 / -1;font-size:14px;line-height:24px;color:var(--ink-soft);margin-top:-8px;}

/* ---------- pied de page ---------- */
.site-foot{background:var(--navy);color:rgba(250,247,242,.85);}
.site-foot .wrap{padding-top:64px;padding-bottom:40px;}
.site-foot .wrap .guides .rows{top:64px;}
.site-foot .foot-h{color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 16px;}
.site-foot ul{list-style:none;padding:0;margin:0 0 24px;}
.site-foot li{line-height:24px;margin:0 0 8px;}
.site-foot a{color:#fff;text-decoration:none;}
.site-foot a:hover{color:var(--gold);}
.site-foot .legal{font-size:13px;line-height:24px;color:rgba(250,247,242,.7);}
.site-foot .legal p{margin:0 0 16px;}
.site-foot .brand{color:#fff;}
.site-foot .brand .word small{color:rgba(250,247,242,.7);}

/* ---------- pages d'atterrissage ---------- */
.lp .site-head .nav{display:none;}
.lp .site-head .nav-toggle{display:none;}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0;margin:0 0 var(--lh);font-size:14px;line-height:24px;color:var(--ink-soft);}
.trust li{padding-left:20px;position:relative;}
.trust li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:4px;background:var(--gold);}
.pub{font-family:var(--mono);font-size:11px;line-height:24px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- divers ---------- */
.toc{list-style:none;padding:0;margin:0 0 var(--lh);}
.toc li{line-height:24px;padding:4px 0;box-shadow:inset 0 -1px 0 var(--line);}
.toc a{text-decoration:none;}
.anchor{scroll-margin-top:96px;}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.center{text-align:center;}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 16px;z-index:200;}
.skip:focus{left:8px;}
@media (max-width:640px){ .site-head .band > .brand{grid-column:1 / 10 !important;} .site-head .band > .nav-toggle{grid-column:10 / 13 !important;} }
@media print{ .site-head,.site-foot,.toggle,.guides,#lpr-consent{display:none!important;} body{font-size:12px;} }