/* pages.css — feuille de style des pages de contenu (À propos, Légal).
   Séparée de index.html, dont le CSS est inline et taillé pour la landing :
   dupliquer 50 Ko de styles pour des pages de texte n'aurait aucun sens. */

:root{
  --p:#4B53BC; --p-dark:#3D44A8;
  --bg:#FFFFFF; --surface:#F6F6FA; --border:#E7E7EE;
  --text:#1B1B24; --dim:#54545F; --faint:#8A8A93;
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

header{border-bottom:1px solid var(--border);padding:18px 0;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:10}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--text);text-decoration:none}
.brand svg{width:32px;height:32px;border-radius:9px}
.hd-actions{display:flex;align-items:center;gap:8px}
.lang-btn{border:1px solid var(--border);background:var(--surface);color:var(--dim);border-radius:9px;
          padding:7px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.lang-btn[aria-pressed="true"]{background:var(--p);color:#fff;border-color:var(--p)}
.back{font-size:14.5px;color:var(--dim);text-decoration:none}
.back:hover{color:var(--p)}

main{padding:56px 0 80px}
h1{font-size:clamp(30px,5vw,42px);line-height:1.2;letter-spacing:-.02em;margin-bottom:10px}
.lead{font-size:18px;color:var(--dim);margin-bottom:12px}
.maj{font-size:13.5px;color:var(--faint);margin-bottom:40px}
h2{font-size:22px;margin:40px 0 12px;letter-spacing:-.01em}
h3{font-size:16.5px;margin:24px 0 8px}
p,li{color:var(--dim);font-size:16px}
p{margin-bottom:14px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:7px}
a{color:var(--p)}
strong{color:var(--text)}
hr{border:0;border-top:1px solid var(--border);margin:44px 0}

table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
td{color:var(--dim)}

/* Zone à compléter après immatriculation de la société. Volontairement
   voyante : une mention légale incomplète qui passe inaperçue est pire
   qu'une absence de page. */
.todo{background:#FFF6E5;border:1px solid #F0D9A8;border-radius:12px;padding:16px 18px;margin:18px 0}
.todo p{color:#7A5A12;margin:0;font-size:15px}
.todo strong{color:#5E440C}

.note{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:18px 0}
.note p:last-child{margin-bottom:0}

footer{border-top:1px solid var(--border);padding:30px 0;font-size:14px;color:var(--faint)}
.ft{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--dim);text-decoration:none;margin-left:18px}
footer a:hover{color:var(--p)}

/* Secteurs : une grille de cartes, pour qu'on repère le sien d'un coup d'œil
   plutôt que de lire une liste à puces. */
.secteurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:22px 0 30px}
.sec-c{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 17px}
.sec-c h3{margin:0 0 6px;font-size:15.5px;color:var(--text)}
.sec-c p{margin:0;font-size:14px;color:var(--dim);line-height:1.55}

/* Avant / après : le contraste porte l'argument mieux qu'un paragraphe. */
.avap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 28px}
.avap>div{border-radius:14px;padding:16px 18px}
.avap .av{background:#FBF0EE;border:1px solid #F0D9D4}
.avap .ap{background:#EDF7F2;border:1px solid #C9E7DA}
.avap h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.avap .av h4{color:#A8412C} .avap .ap h4{color:#0F7D55}
.avap ul{margin:0 0 0 18px} .avap li{font-size:14.5px;margin-bottom:6px}
@media(max-width:620px){ .avap{grid-template-columns:1fr} }

.chiffre{font-size:15px;color:var(--dim);border-left:3px solid var(--p);padding-left:14px;margin:18px 0}

[data-lang]{display:none}
[data-lang].on{display:block}