/* Mesh Universe : feuille de style partagée des pages de contenu.
   Variables et base extraites de la home (landing/index.html, styles inline).
   Les pages de contenu (piliers, offres) lient ce fichier via <link rel="stylesheet" href="/site.css">. */

:root{
  --bg:#0B0D12; --panel:#141821; --panel2:#1B2130; --border:#232A38;
  --text:#E7E9EE; --muted:#8A90A2; --prose:#C7CCD8;
  --mint:#6EE7B7; --blue:#38BDF8; --amber:#FBBF24;
  --display:"Century Schoolbook","Bookman Old Style",Georgia,serif;
  --body:Calibri,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(1.15rem,4vw,2.5rem);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:66rem;margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;line-height:1.15}
a{color:inherit}
.mono{font-family:var(--mono)} .muted{color:var(--muted)}
.grad{background:linear-gradient(90deg,var(--mint),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--display)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* ---- Barre du haut ---- */
header.top{position:sticky;top:0;z-index:5;background:rgba(11,13,18,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
header.top .bar{display:flex;align-items:center;gap:.8rem;padding-block:.8rem}
header.top .brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
header.top .name{font-family:var(--display);font-size:1.35rem;font-weight:600}
.topnav{margin-left:auto;display:flex;gap:1.1rem;align-items:center;font-size:.86rem}
.topnav a{color:var(--muted);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--text)}
@media(max-width:720px){.topnav{display:none}}
.cta{font-weight:600;color:#0B0D12;text-decoration:none;border-radius:8px;padding:.55rem 1rem;background:linear-gradient(90deg,var(--mint),var(--blue));white-space:nowrap;display:inline-block}
.cta.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.cta.big{padding:.7rem 1.3rem;font-size:1.02rem}

/* ---- Article / contenu ---- */
.article{max-width:48rem;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem) var(--pad) clamp(2.4rem,6vw,4rem)}
.breadcrumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--muted);margin-bottom:1.2rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin-bottom:.7rem}
.article h1{font-size:clamp(1.95rem,4.6vw,2.9rem);letter-spacing:-.01em;margin:.2rem 0 1rem}
.article h2{font-size:clamp(1.4rem,3vw,1.95rem);margin:2.4rem 0 .7rem;padding-top:.4rem}
.article h3{font-size:1.16rem;margin:1.7rem 0 .5rem}
.article p{color:var(--prose);margin:.7rem 0}
.article ul,.article ol{color:var(--prose);padding-left:1.3rem}
.article li{margin:.4rem 0}
.article strong{color:var(--text)}
.article a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.article a:hover{border-bottom-color:var(--blue)}
.article a.cta:not(.ghost){color:#0B0D12;border-bottom:none}
.baseline{color:var(--muted);font-style:italic}

/* réponse « en bref » autoportante en tête */
.enbref{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--mint);border-radius:12px;padding:1.1rem 1.3rem;margin:1.4rem 0}
.enbref p{margin:.3rem 0;color:var(--text)}
.enbref .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);display:block;margin-bottom:.35rem}

/* note d'honnêteté / limites */
.note{border-left:3px solid var(--amber);background:var(--panel2);padding:.9rem 1.2rem;border-radius:8px;color:var(--muted);margin:1.4rem 0}
.note strong{color:var(--text)}

/* étiquette « démo » */
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--border);border-radius:999px;padding:.12rem .55rem;color:var(--muted);vertical-align:middle}

/* tableaux comparatifs */
.article table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.94rem}
.article th,.article td{border:1px solid var(--border);padding:.6rem .7rem;text-align:left;vertical-align:top;color:var(--prose)}
.article th{background:var(--panel2);color:var(--text);font-family:var(--display)}

/* sommaire */
.sommaire{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.4rem;margin:1.6rem 0}
.sommaire b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sommaire ul{margin:.5rem 0 0;padding-left:1.1rem;color:var(--prose)}
.sommaire a{color:var(--blue);text-decoration:none}
.sommaire a:hover{text-decoration:underline}

/* FAQ visible */
.faq{margin:2.4rem 0 0}
.faq h2{margin-bottom:.4rem}
.faq .qa{border-top:1px solid var(--border);padding:1.1rem 0}
.faq .qa h3{margin:0 0 .35rem;font-size:1.08rem}
.faq .qa p{margin:.3rem 0}

/* bande CTA */
.cta-band{text-align:center;border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:clamp(1.4rem,4vw,2.2rem);margin:2.6rem 0 0}
.cta-band h2{margin:0 0 .5rem}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.2rem}
.mailline{font-family:var(--mono);color:var(--blue);margin-top:1rem;font-size:.95rem}
.mailline a{color:var(--blue);text-decoration:none}

/* ---- Adresse de courriel brouillée (mail.js) ----
   Avant le premier geste du visiteur, l'adresse est un span : lisible,
   copiable, restituée par un lecteur d'écran, mais sans « mailto: » ni motif
   utilisateur@domaine dans le HTML servi. mail.js la remplace par un vrai lien
   au premier mouvement de souris, appui de touche ou prise de focus. Les deux
   états ont la même couleur : rien ne saute à l'écran au moment du passage. */
   La forme de repli garde ses espaces sécables : dans un paragraphe justifié,
   un jeton de vingt-neuf caractères insécable ouvrirait une lézarde. */
.mx{color:var(--blue);hyphens:manual;-webkit-hyphens:manual}
a.mx{text-decoration:none}
a.mx:hover{text-decoration:underline}

/* liens connexes (maillage) */
.related{margin:2.4rem 0 0;border-top:1px solid var(--border);padding-top:1.4rem}
.related b{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chips a{border:1px solid var(--border);background:var(--panel2);border-radius:999px;padding:.4rem .9rem;font-size:.88rem;text-decoration:none;color:var(--text)}
.chips a:hover{border-color:var(--mint);color:var(--mint)}

/* pied de page */
footer{border-top:1px solid var(--border);padding-block:2rem;color:var(--muted);font-size:.85rem;margin-top:2rem}
footer .row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between}
footer a{color:var(--blue);text-decoration:none}
/* liens légaux du pied : troisième élément de la rangée, il passe à la ligne
   avant de comprimer les deux autres sur les écrans étroits. */
footer .legal{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center}
footer .legal a{color:var(--muted)}
footer .legal a:hover{color:var(--text)}

/* ---- Texte courant justifié ----
   La prose est justifiée et coupée automatiquement : chaque page porte son
   attribut lang, hyphens:auto dispose donc du dictionnaire de césure de la
   bonne langue et évite les lézardes en colonne étroite.
   Restent alignés par défaut : titres, cellules de tableau, sommaire, fil
   d'Ariane, eyebrows, puces et libellés d'interface, formules et blocs
   monospace. Les paragraphes placés dans un bloc centré héritent de leur
   conteneur au lieu d'être justifiés. */
.article p,
.article li,
.article dd,
.article blockquote,
.enbref p,
.note,
.form-wrap .lead,
.form-wrap .collecte{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
}
/* blocs centrés : le paragraphe reprend l'alignement de son conteneur,
   et la césure y est désactivée (un texte centré ne se coupe pas) */
.cta-band p,
.cta-band li,
.calc .out p{text-align:inherit;hyphens:manual;-webkit-hyphens:manual}
/* listes de navigation, cellules, libellés courts et monospace */
.sommaire li,
.chips a,
.article th p,
.article td p,
.article .mono,
.article code,
.article pre,
.article p[style*="monospace"]{text-align:left;hyphens:manual;-webkit-hyphens:manual}