/* Le style commun aux trois pages de droit.

   POURQUOI UN FICHIER, ALORS QUE TOUT LE RESTE DU PRODUIT PORTE SON
   STYLE EN LIGNE.

   Les autres pages sont des écrans de travail : un seul fichier, rien à
   charger, rien qui manque si le réseau hoquette au mauvais moment.
   Celles-ci sont trois pages jumelles, longues et statiques, qu'on
   relit une fois par an — et qu'on modifie ensemble. Trois copies du
   même style, c'est trois occasions d'en corriger deux sur trois, et le
   défaut ne se verrait que sur la page qu'on n'a pas rouverte. */

:root{
  color-scheme:light;
  --ink:#13294B; --ink-soft:#3A4D6E; --ink-faint:#8893A8;
  --linen:#F5F8FC; --paper:#FFFFFF;
  --coral:#E0533F; --coral-deep:#C8462F; --coral-soft:#FCEDE9;
  --line:#E2E8F0;
  --display:"Avenir Next","Segoe UI Variable Display",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{font-family:var(--body);background:var(--linen);color:var(--ink);line-height:1.62;
  -webkit-font-smoothing:antialiased}

.enveloppe{max-width:44rem;margin:0 auto;padding:0 22px}

/* ---------- LA MISE EN PAGE D'ORDINATEUR ----------

   MÊME RAISON QUE POUR LES ARTICLES, et le besoin est même plus fort
   ici : des conditions de vente en dix articles se consultent plus
   qu'elles ne se lisent. « Que dit l'article 5 sur la résiliation »
   n'est pas une question à laquelle on répond en faisant défiler.

   Au-delà de mille pixels, le côté gauche reçoit le sommaire, construit
   depuis les titres présents — donc traduit en même temps qu'eux. En
   dessous, le sommaire est retiré et la page ne change pas.

   LA BARRE EST COLLANTE ICI AUSSI, pour que le sommaire reste à portée
   quand on est au milieu de l'article 8. */
.barre{position:sticky;top:0;z-index:10}
.mise-en-page{display:block}
.sommaire{display:none}

@media (min-width:1000px){
  /* LA COLONNE DE TEXTE EST DIMENSIONNÉE EN SIGNES, PAS EN PIXELS.

     `1fr` la laissait prendre toute la place restante : mesurée, elle
     donnait cent dix-neuf signes par ligne, ce qui se relit deux fois.
     Mais un plafond en pixels aurait été faux ailleurs — la même
     largeur ne porte pas le même nombre de signes selon la police
     installée, et l'écart entre deux machines dépasse vingt pour cent.

     `ch` est la largeur du ZÉRO dans la police effectivement rendue —
     et non celle d'un caractère moyen, qui est plus étroite d'environ
     un tiers. Cinquante-huit `ch` donnent donc soixante-dix-huit
     signes par ligne, ce qu'on vise : au-delà de quatre-vingts, l'œil
     perd la ligne suivante ; en deçà de soixante-cinq, le texte hache.

     CE RÉGLAGE A ÉTÉ MESURÉ TROIS FOIS, ET LES DEUX PREMIÈRES ÉTAIENT
     FAUSSES — la mesure portait sur le surtitre, en petites capitales,
     et non sur le corps du texte. Écrit ici pour la prochaine fois :
     cette unité ne se règle pas de tête, et le paragraphe qu'on mesure
     doit être un vrai paragraphe.

     LE TEXTE GROSSIT AUSSI SUR GRAND ÉCRAN. À nombre de signes égal,
     une police plus grande occupe plus de largeur — et se lit mieux à
     la distance d'un moniteur qu'à celle d'un téléphone. C'est la
     seule façon d'occuper l'écran sans allonger les lignes. */
  .mise-en-page{display:grid;grid-template-columns:15rem minmax(0,58ch);
    justify-content:center;
    gap:0 32px;max-width:76rem;margin:0 auto;padding:0 22px;align-items:start}
  .mise-en-page .enveloppe{max-width:none;margin:0;padding:0}
  .sommaire{display:block;position:sticky;top:78px;font-size:.86rem;
    max-height:calc(100vh - 100px);overflow-y:auto}
  .sommaire ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .sommaire li{margin:0}
  .sommaire a{display:block;padding:5px 0 5px 13px;margin-left:-2px;
    border-left:2px solid transparent;color:var(--ink-faint);text-decoration:none;
    line-height:1.35;transition:color .12s,border-color .12s}
  .sommaire a:hover{color:var(--ink)}
  .sommaire a.ici{color:var(--coral-deep);border-left-color:var(--coral);font-weight:600}
  main p,main li{font-size:1.02rem}
}
h2[id]{scroll-margin-top:74px}

.barre{background:var(--paper);border-bottom:1px solid var(--line)}
.barre .enveloppe{display:flex;align-items:center;gap:12px;height:58px}
.marque{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
  font-size:1.02rem;margin-right:auto;color:var(--ink);text-decoration:none}
.mark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--coral);
  display:grid;place-items:center;flex:none}
.mark svg{width:17px;height:17px}
.barre a.lien{color:var(--ink-soft);text-decoration:none;font-size:.88rem;font-weight:600;
  white-space:nowrap}
.barre a.lien:hover{color:var(--ink)}

main{padding:38px 0 60px}
h1{font-family:var(--display);font-weight:600;font-size:1.75rem;letter-spacing:-.02em;
  margin-bottom:6px}
.maj{color:var(--ink-faint);font-size:.85rem;margin-bottom:28px}
h2{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;
  margin:30px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
h2:first-of-type{border-top:0;padding-top:0}
h3{font-family:var(--display);font-weight:600;font-size:.98rem;margin:16px 0 4px}
p{margin-bottom:11px;color:var(--ink-soft)}
p strong,li strong{color:var(--ink)}
ul,ol{margin:0 0 12px 1.25em;color:var(--ink-soft)}
li{margin-bottom:5px}
a{color:var(--coral-deep)}

table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:.92rem}
td,th{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;
  color:var(--ink-soft)}
th{background:var(--paper);color:var(--ink);font-weight:600;width:14rem}

/* CE QUI RESTE À REMPLIR.

   Les mentions d'identité — dénomination, siège, immatriculation — ne
   peuvent pas être devinées, et une page de droit qui en invente est
   pire que pas de page du tout. Elles portent donc un marqueur VISIBLE,
   en rouge, impossible à ne pas voir sur l'écran ; et « Préparer la
   mise en ligne » refuse le colis tant qu'il en reste un. Une mention
   légale fausse engage celui qui la publie. */
.trou{background:var(--coral-soft);color:var(--coral-deep);border:1px dashed var(--coral);
  border-radius:5px;padding:0 .35em;font-family:var(--mono);font-size:.86em;
  font-weight:700;white-space:nowrap}

footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--ink-faint);
  font-size:.85rem;background:var(--paper)}
footer .enveloppe{display:flex;gap:16px;flex-wrap:wrap}
footer a{color:var(--ink-soft);text-decoration:none;font-weight:600}
footer a:hover{color:var(--ink)}

@media (max-width:560px){
  h1{font-size:1.4rem}
  th{width:auto}
  table,tbody,tr,td,th{display:block}
  th{border-bottom:0}
  td{border-top:0}
}

/* ---- le choix de la langue, et la clause qui l'encadre ----

   LA CLAUSE N'EST PAS UNE NOTE DE BAS DE PAGE. Un texte de droit
   français traduit sans dire laquelle des deux versions fait foi crée
   exactement l'ambiguïté qu'un contrat existe pour lever. Elle est donc
   posée sous le titre, encadrée, et lisible avant le premier article —
   pas reléguée où l'on ne descend pas. */
.langue-hote{display:inline-flex;align-items:center;margin-right:14px}
.langue-choix{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:.35em 1.6em .35em .55em;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238893A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55em center}
.langue-choix:hover{border-color:var(--ink-soft);color:var(--ink)}
.prevaut{font-size:.85rem;line-height:1.5;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink-soft);
  border-radius:9px;padding:11px 13px;margin:0 0 22px}