/* Couleurs et polices de la marque (book/docs/commercial/marque.md). Polices servies par le site : aucun appel à un tiers. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-serif-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#ffffff; --fg:#1d2426; --muted:#5b6a6d; --rule:#d7dedf;
  --accent:#0f6b70; --logo:#071931; --accent-ink:#ffffff; --tint:#e6f1f1;
  --display:"IBM Plex Serif",Georgia,serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141a1b; --fg:#e8eced; --muted:#a3b0b2; --rule:#33403f;
  --accent:#5fc3c6; --logo:#e8eced; --accent-ink:#0f1c1d; --tint:#1f3335; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body)}
a{color:var(--accent)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(1.75rem,4.6vw,2.9rem);line-height:1.12;letter-spacing:-.01em}
h2{font-size:1.4rem;line-height:1.25}
h3{font-family:var(--body);font-size:1.02rem}
p{margin:.7rem 0;max-width:66ch}
strong{font-weight:600}

/* En-tête : logo à gauche du nom, pied de la pyramide sur le pied des lettres. */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
.lockup{display:flex;align-items:flex-end;gap:10px;color:var(--logo);text-decoration:none}
.lockup svg{height:44px;width:auto;display:block}
.lockup span{font-weight:600;font-size:1.5rem;line-height:.8;color:var(--fg)}
.top a.tel{color:var(--muted);text-decoration:none;font-size:.95rem;white-space:nowrap}
.top a.hcta{display:none;margin:0;padding:8px 12px;font-size:.9rem}

.hero{display:grid;grid-template-columns:1fr 260px;gap:56px;align-items:center;padding:40px 0 8px}
.hero .mark{width:100%;height:auto;color:var(--logo)}
.lead{font-size:1.1rem;color:var(--muted)}

/* L'offre d'essai : une bande, prix à gauche, bouton à droite. */
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;margin-top:32px;padding:22px 0;border-top:3px solid var(--accent);border-bottom:1px solid var(--rule)}
.offer>div:first-child{flex:1 1 420px}
.offer .price{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.25;margin:0}
.offer p{margin:.4rem 0 0}
.btn{display:inline-block;padding:12px 20px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.alt{font-size:.95rem;color:var(--muted);margin:.5rem 0 0}
.who{color:var(--muted);margin-top:14px}

/* Sections : titre dans la marge à gauche sur grand écran. */
.sec{display:grid;grid-template-columns:220px 1fr;gap:12px 40px;margin-top:64px;padding-top:18px;border-top:1px solid var(--rule)}

ol.steps{list-style:none;padding:0;margin:0;counter-reset:s}
ol.steps li{counter-increment:s;padding:0 0 18px 40px;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-3px;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--accent)}
ol.steps b{font-weight:600}
ol.steps p{margin:.2rem 0 0}

table{border-collapse:collapse;width:100%;margin-top:.4rem;font-size:.97rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td:first-child{font-weight:600;width:30%}
td small{display:block;color:var(--muted);font-size:.88rem}
.note{color:var(--muted);font-size:.95rem;margin-top:0}
.ex{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:1.4rem 0}
#contact .btn{margin-top:8px}

footer{margin-top:72px;padding:24px 0 40px;border-top:1px solid var(--rule);color:var(--muted);font-size:.93rem}
footer p{margin:.25rem 0}
footer a{color:inherit}

/* Mentions légales et 404 : une seule colonne. Ce qui manque encore se voit. */
.page h2{margin:2.4rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--rule)}
.page .hero{display:block}
.todo{background:#fff3c4;color:#5a4500;padding:0 .25em}
main>h1:first-child{margin-top:24px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:20px}
  .hero .mark{display:none}
  .sec{grid-template-columns:1fr;margin-top:48px}
}
@media (max-width:600px){
  body{font-size:16px}
  .top a.tel{display:none}
  .top a.hcta{display:inline-block}
  .offer{margin-top:20px}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  td{border:0;padding:2px 0}
  td:first-child{width:100%}
  td[data-l]::before{content:attr(data-l) " : ";color:var(--muted)}
}