/* Feuille commune aux pages legales : CGV, mentions legales, confidentialite.
   Volontairement distincte de la vitrine : on lit un contrat, on ne le regarde
   pas. Serif pour le corps, sans-serif pour la structure, une seule couleur
   d'accent, aucune animation. */

:root{
  --fond:       #F6F5F2;
  --papier:     #FFFFFE;
  --encre:      #1B1D22;
  --encre-douce:#5C6070;
  --trait:      #DEDDD6;
  --accent:     #3A4A6B;
  --accent-pale:#E6E9F0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:       #14161A;
    --papier:     #1B1E24;
    --encre:      #E7E8EC;
    --encre-douce:#9A9FAE;
    --trait:      #2C3038;
    --accent:     #8FA6D0;
    --accent-pale:#222835;
  }
}
:root[data-theme="dark"]{
  --fond:       #14161A;
  --papier:     #1B1E24;
  --encre:      #E7E8EC;
  --encre-douce:#9A9FAE;
  --trait:      #2C3038;
  --accent:     #8FA6D0;
  --accent-pale:#222835;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"Spectral", Georgia, "Times New Roman", serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:760px; margin:0 auto; padding:40px 24px 90px;
  display:flex; flex-direction:column; gap:32px;
}

.retour{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:13.5px; color:var(--encre-douce); text-decoration:none;
  align-self:flex-start;
}
.retour:hover{ color:var(--accent); }

header{ display:flex; flex-direction:column; gap:12px; }
.surtitre{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent);
}
h1{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:clamp(28px, 5vw, 40px); font-weight:600;
  letter-spacing:-.02em; line-height:1.1; margin:0; text-wrap:balance;
}
.sous{ margin:0; color:var(--encre-douce); font-size:17px; }

.aremplir{
  background:var(--accent-pale); border:1px dashed var(--accent);
  border-radius:2px; padding:1px 6px;
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:.86em; font-weight:600; color:var(--accent);
  /* Ces encadres portent parfois une phrase entiere, pas seulement « SIRET ».
     En `nowrap` la plus longue mesurait 360 px et faisait deborder toute la
     page sur telephone. On laisse donc couper, et `box-decoration-break`
     redessine le cadre proprement sur chaque ligne. */
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.sommaire{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:4px; padding:20px 24px;
  font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:14px;
}
.sommaire ol{
  margin:10px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:5px 22px; counter-reset:s;
}
.sommaire li{ counter-increment:s; }
.sommaire li::before{
  content:counter(s) ". "; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.sommaire a{ color:var(--encre); text-decoration:none; }
.sommaire a:hover{ color:var(--accent); text-decoration:underline; }
.titre-sommaire{
  font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--encre-douce);
}

article{ display:flex; flex-direction:column; gap:9px; scroll-margin-top:20px; }
article h2{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:16px; font-weight:600; margin:0;
  letter-spacing:-.005em; text-wrap:balance;
  display:flex; gap:11px; align-items:baseline;
}
article h2 .num{
  color:var(--accent); font-variant-numeric:tabular-nums;
  font-size:13px; flex:none; min-width:2.1em;
}
article p{ margin:0; }
article ul{ margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:5px; }
article li::marker{ color:var(--accent); }

.corps{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:4px; padding:30px 34px;
  display:flex; flex-direction:column; gap:26px;
}
.corps > article + article{ border-top:1px solid var(--trait); padding-top:26px; }

.fort{
  background:var(--accent-pale); border-left:3px solid var(--accent);
  padding:12px 16px; border-radius:0 3px 3px 0;
}
.fort p + p{ margin-top:9px; }

table.donnees{
  width:100%; min-width:520px; border-collapse:collapse;
  font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:13.5px;
}
table.donnees th, table.donnees td{
  text-align:left; vertical-align:top;
  padding:9px 12px 9px 0; border-bottom:1px solid var(--trait);
}
table.donnees th{
  font-weight:600; color:var(--accent);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
}
/* `min-width:0` n'est pas decoratif : un enfant de flex vaut min-width:auto,
   donc le conteneur s'elargit a la taille du tableau au lieu de le faire
   defiler, et c'est la page entiere qui part de travers sur telephone. */
.tableau-glissant{ overflow-x:auto; min-width:0; }

footer{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-size:13.5px; color:var(--encre-douce);
  border-top:1px solid var(--trait); padding-top:18px;
  display:flex; flex-direction:column; gap:14px;
}
footer a{ color:var(--encre-douce); }

/* L'identite civile complete. La loi impose qu'elle figure et qu'elle soit
   lisible, pas qu'elle soit mise en avant : elle vit donc ici, en pied de
   page, dans un corps plus petit que le texte courant mais superieur au
   seuil de lisibilite. */
.identite{
  font-size:11.5px; line-height:1.6; color:var(--encre-douce);
  border-top:1px solid var(--trait); padding-top:13px;
  display:flex; flex-direction:column; gap:2px;
}
.identite b{ font-weight:600; color:var(--encre); }
.identite .aremplir{ font-size:.95em; }

@media (max-width:620px){
  .corps{ padding:22px 20px; }
  .page{ padding:28px 16px 70px; }
  .sommaire{ padding:16px 18px; }
}