/* Le style commun aux articles.

   POURQUOI UN FICHIER SÉPARÉ DE `legal.css`, ALORS QUE LES DEUX SE
   RESSEMBLENT. Les pages de droit sont trois jumelles qu'on relit une
   fois par an. Les articles sont une collection qui grandit : il y en
   aura dix, puis vingt, et chacun ajouté devra hériter du style sans
   qu'on y pense. Les mêler aurait fait d'une modification de mise en
   page d'article une modification des conditions de vente — deux
   choses qui n'ont aucune raison de bouger ensemble.

   CES PAGES SONT FRANÇAISES, ET ELLES SEULES. Le reste du produit
   parle deux langues ; ces articles s'adressent au marché français et
   ne chargent pas `langue.js`. C'est un choix, pas un oubli : un
   article à moitié traduit vaut moins que pas d'article, et personne
   ne cherche « conciergerie courte durée » en anglais depuis Lille.
   Elles n'ont donc pas de sélecteur de langue, et leur en-tête ne
   propose que le retour au site. */

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

/* DEUX LARGEURS, ET C'EST VOLONTAIRE. La liste respire large parce
   qu'elle aligne des cartes ; le corps d'un article reste étroit parce
   qu'on le LIT. Une ligne de cent vingt signes se relit deux fois. */
.enveloppe{max-width:64rem;margin:0 auto;padding:0 22px}
.colonne{max-width:40rem;margin:0 auto;padding:0 22px}

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

   UN GRAND ÉCRAN NE VEUT PAS LA MÊME PAGE EN PLUS LARGE, IL EN VEUT
   UNE AUTRE. La colonne d'article était identique sur un téléphone et
   sur un moniteur : correcte à lire, mais posée au milieu du vide.
   Élargir le texte aurait donné deux cents signes par ligne, ce qui se
   relit deux fois.

   Au-delà de mille pixels, le côté gauche reçoit donc le sommaire du
   document — construit par `sommaire.js` depuis les titres présents —
   et la page devient ce qu'elle doit être sur un ordinateur : deux
   colonnes, dont une qui dit où l'on est.

   EN DESSOUS, RIEN NE CHANGE. Sur un téléphone et sur une tablette en
   portrait, le sommaire passerait devant le texte pour ne servir qu'une
   fois : il est simplement retiré. */
.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 .colonne,.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)}
  /* CE QU'ON LIT EN CE MOMENT. Un sommaire qui ne dit que ce qui
     existe vaut la moitié d'un sommaire qui dit aussi où l'on en est. */
  .sommaire a.ici{color:var(--coral-deep);border-left-color:var(--coral);font-weight:600}
  article p,article li{font-size:1.04rem}
  .chapeau{font-size:1.1rem}
}

/* Le titre visé doit s'arrêter SOUS la barre collante, pas dessous. */
article h2[id],article h3[id]{scroll-margin-top:74px}

.barre{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.barre .enveloppe{display:flex;align-items:center;gap:14px;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)}
.barre .btn{background:var(--coral);color:#fff;padding:.5em 1em;border-radius:10px;
  font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap}
.barre .btn:hover{background:var(--coral-deep)}

main{padding:40px 0 56px}
.oeil{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--coral-deep);margin-bottom:10px}

h1{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4.2vw,2.05rem);
  line-height:1.18;letter-spacing:-.02em;text-wrap:balance;margin-bottom:12px}
.chapeau{color:var(--ink-soft);font-size:1.02rem;margin-bottom:26px}
.signature{color:var(--ink-faint);font-size:.82rem;margin-bottom:30px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}

article h2{font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.012em;
  text-wrap:balance;margin:34px 0 10px}
article h3{font-family:var(--display);font-weight:600;font-size:1rem;margin:22px 0 6px}
article p{margin-bottom:13px;color:var(--ink-soft)}
article p strong,article li strong{color:var(--ink)}
article ul,article ol{margin:0 0 15px 1.2em;color:var(--ink-soft)}
article li{margin-bottom:7px}
article a{color:var(--coral-deep)}

/* CE QU'IL FAUT RETENIR, quand le lecteur ne lit pas tout — et il ne
   lit pas tout. Encadré, en tête ou en fin de section, jamais plus de
   trois lignes. */
.retenir{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--coral);
  border-radius:10px;padding:14px 16px;margin:0 0 20px;font-size:.94rem;color:var(--ink-soft)}
.retenir b{color:var(--ink)}

/* CE QUE LE PRODUIT FAIT DE CE QUI VIENT D'ÊTRE DIT. Séparé du corps
   de l'article, et signalé : un article qui glisse sa réclame au
   milieu d'un raisonnement perd le raisonnement AVEC la réclame. */
.produit{background:var(--green-soft);border:1px solid #CBE6D7;border-radius:12px;
  padding:16px 18px;margin:26px 0;font-size:.94rem;color:var(--ink-soft)}
.produit b{color:var(--ink)}
.produit p{margin-bottom:8px;color:inherit}
.produit p:last-child{margin-bottom:0}

/* ---------- la liste des articles ---------- */
.grille{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){ .grille{grid-template-columns:1fr 1fr} }
.fiche{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s,transform .12s}
.fiche:hover{border-color:var(--coral);transform:translateY(-1px)}
.fiche h2{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.3;
  letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
.fiche p{color:var(--ink-soft);font-size:.92rem;margin:0}
.fiche .pour{margin-top:auto;padding-top:8px;color:var(--coral-deep);font-size:.82rem;
  font-weight:700}
/* LA PREMIÈRE FICHE TRAVERSE : c'est l'article de fond, celui auquel
   les autres renvoient. Le mettre au même rang que ses satellites
   ferait lire une liste plate là où il y a une porte d'entrée. */
@media (min-width:760px){ .grille .fiche--socle{grid-column:1 / -1} }

/* ---------- lire la suite ---------- */
.suite{border-top:1px solid var(--line);margin-top:36px;padding-top:22px}
.suite h2{font-family:var(--display);font-size:1.05rem;font-weight:600;margin-bottom:12px}
.suite ul{margin:0;list-style:none}
.suite li{margin-bottom:8px}
.suite a{color:var(--coral-deep);font-weight:600;text-decoration:none}
.suite a:hover{text-decoration:underline}

/* ---------- l'appel, en fin d'article ---------- */
.geste{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.geste .btn{display:inline-block;background:var(--coral);color:#fff;padding:.7em 1.3em;
  border-radius:11px;font-weight:700;text-decoration:none}
.geste .btn:hover{background:var(--coral-deep)}
.geste .note{color:var(--ink-faint);font-size:.85rem;margin-top:10px}

footer{border-top:1px solid var(--line);padding:26px 0 44px;color:var(--ink-faint);
  font-size:.85rem;background:var(--paper)}
footer .enveloppe{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink-soft);text-decoration:none;font-weight:600}
footer a:hover{color:var(--ink)}
footer .fin{margin-left:auto}

@media (max-width:560px){
  .barre .enveloppe{gap:10px}
  footer .fin{margin-left:0;width:100%}
}