/* Shared stylesheet for the SEO/content pages: /lire/ and /modeles/.
   Palette is locked by HANDOVER-FRANCE.md (Paquet France, Etape 1):
     paper #FBF7EF · ink #16323A · petrol #0D7D6E (edge #0B6355)
     lines #ECE2D0 · secondary text #55636B
     on dark #16323A: text #E4F1EC, accent mint #7FD1C0
   NO GOLD on these pages - deliberate, do not reintroduce the landing page's
   --gold token here. Fonts are the two self-hosted brand faces. */

@font-face{font-family:Bricolage;src:url(/fonts/bricolage-latin.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:Figtree;src:url(/fonts/figtree-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}

:root{
  --paper:#fbf7ef;
  --ink:#16323a;
  --body:#55636b;
  --teal:#0d7d6e;
  --teal-edge:#0b6355;
  --line:#ece2d0;
  --dark:#16323a;
  --on-dark:#e4f1ec;
  --mint:#7fd1c0;
  --r:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Figtree,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* ---- header / footer ---- */
.site-head{border-bottom:1px solid var(--line)}
.site-head .in{max-width:680px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:11px}
.site-head a.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.site-head img{width:32px;height:32px;object-fit:contain}
.site-head span{font-family:Bricolage,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink)}

.site-foot{border-top:1px solid var(--line);margin-top:64px}
.site-foot .in{max-width:680px;margin:0 auto;padding:28px 24px 56px;font-size:15px;color:var(--body)}
.site-foot a{color:var(--teal)}
.site-foot .claim{font-family:Bricolage,sans-serif;font-weight:700;color:var(--teal-edge);margin:0 0 12px}

/* ---- layout ---- */
main{max-width:680px;margin:0 auto;padding:44px 24px 0}
.wide{max-width:760px}

h1{font-family:Bricolage,sans-serif;font-weight:800;font-size:clamp(29px,5.2vw,42px);line-height:1.14;letter-spacing:-.02em;margin:0 0 18px}
h2{font-family:Bricolage,sans-serif;font-weight:700;font-size:clamp(21px,3.2vw,26px);line-height:1.25;letter-spacing:-.01em;margin:44px 0 12px;color:var(--teal-edge)}
h3{font-family:Bricolage,sans-serif;font-weight:700;font-size:19px;margin:28px 0 6px}
p{margin:0 0 18px;color:var(--body)}
p strong,li strong{color:var(--ink);font-weight:700}
a{color:var(--teal);text-underline-offset:2px}
a:hover{color:var(--teal-edge)}
ul{padding-left:22px;margin:0 0 18px}
li{margin:0 0 10px;color:var(--body)}
em{color:var(--body)}

.date{font-size:14px;color:var(--body);opacity:.75;margin:0 0 26px;letter-spacing:.02em}
.lead{font-size:20px;color:var(--ink)}

img.shot{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);margin:26px 0}

/* ---- buttons ---- */
.btn{
  display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-family:Figtree,sans-serif;font-weight:700;font-size:18px;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(10,40,35,.25);
}
.btn:hover{background:var(--teal-edge);color:#fff}
.btn-note{font-size:15px;color:var(--body);margin:10px 0 0}

/* ---- signup box (article end box + set offer) ---- */
.signup{
  background:var(--dark);color:var(--on-dark);border-radius:var(--r);
  padding:30px 28px;margin:40px 0 0;
}
.signup p{color:var(--on-dark);margin:0 0 16px}
.signup .accent{color:var(--mint)}
.signup form{display:flex;flex-wrap:wrap;gap:10px}
.signup input[type=email]{
  flex:1 1 240px;min-width:0;padding:14px 16px;border-radius:10px;border:1px solid rgba(228,241,236,.28);
  background:rgba(255,255,255,.06);color:var(--on-dark);font-family:Figtree,sans-serif;font-size:17px;
}
.signup input[type=email]::placeholder{color:rgba(228,241,236,.55)}
.signup input[type=email]:focus{outline:2px solid var(--mint);outline-offset:1px}
.signup button{
  flex:0 0 auto;background:var(--mint);color:#0b3c34;border:0;border-radius:999px;
  padding:14px 24px;font-family:Figtree,sans-serif;font-weight:700;font-size:17px;cursor:pointer;
}
.signup button:hover{background:#96dccd}
.signup .small{font-size:14.5px;color:rgba(228,241,236,.75);margin:14px 0 0}
.signup .small a{color:var(--mint)}
.signup .msg{margin:14px 0 0;font-size:16px;color:var(--mint);min-height:1px}

/* light variant used on the modeles page next to the direct download */
.set-offer{background:var(--dark);color:var(--on-dark);border-radius:var(--r);padding:30px 28px;margin:12px 0 0}

/* ---- misc blocks ---- */
.disclaimer{font-size:14.5px;color:var(--body);border-top:1px solid var(--line);padding-top:18px;margin-top:40px}
.claim-end{font-family:Bricolage,sans-serif;font-weight:700;font-size:19px;color:var(--teal-edge);margin:32px 0 0}
.faq h3{margin-top:24px}

/* ---- /lire/ index list ---- */
.list{list-style:none;padding:0;margin:26px 0 0}
.list li{border-top:1px solid var(--line);margin:0;padding:22px 0}
.list li:last-child{border-bottom:1px solid var(--line)}
.list a{font-family:Bricolage,sans-serif;font-weight:700;font-size:21px;line-height:1.3;color:var(--ink);text-decoration:none;display:block;letter-spacing:-.01em}
.list a:hover{color:var(--teal)}
.list p{margin:6px 0 0;font-size:17px}

@media(max-width:560px){
  body{font-size:17px}
  main{padding:32px 20px 0}
  .signup,.set-offer{padding:24px 20px}
}

/* Etape 3: discreet pillar backlink, sits under the closing line,
   above the signup box. Deliberately quiet - it must not compete
   with the article's own ending. */
.guide-link{font-size:15.5px;color:var(--body);margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.guide-link a{color:var(--teal)}