/* ---------------------------------------------------------------------------
   Feuille commune aux pages LEGALES : conditions d'utilisation, politique de
   confidentialite, politique de cookies.

   Elle est partagee et non recopiee. Trois documents qui se ressemblent a
   peu pres finissent par ne plus se ressembler du tout : on corrige une
   couleur dans l'un, on l'oublie dans les deux autres, et le lecteur y voit
   trois textes venus d'ailleurs. `build_app.py` l'injecte par un marqueur
   (STYLE_LEGAL, cherchez-le la-bas : ecrit ici avec ses soulignes, il se
   reinjecterait dans la page et le garde-fou des marqueurs non resolus
   crierait a chaque construction) ; elle reste donc INLINE dans la page publiee, ce que la
   CSP autorise deja (`style-src 'self' 'unsafe-inline'`), et la page ne fait
   aucune requete de plus.

   Aucun JavaScript ici non plus, comme sur l'accueil : la CSP du livrable
   n'a rien de plus a autoriser pour ces pages.
   --------------------------------------------------------------------------- */
:root {
  --ground:   #F6F7FE;
  --surface:  #FFFFFF;
  --sunken:   #EDEEFA;
  --ink:      #1B1B2E;
  --ink-soft: #454563;
  --muted:    #64647E;
  --line:     #E4E5F5;
  --line-firm:#CACBE6;

  --accent:      #5B54E8;
  --accent-wash: #EDECFC;
  --on-accent:   #FFFFFF;

  --warn:      #A66A12;
  --warn-wash: #FBF0DC;
  /* Variante d'ecriture : --warn sur son propre lavis ne fait que 3,96:1.
     Meme piege que les pastilles de verdict de la page location — une
     teinte calee pour remplir n'est pas calee pour ecrire. */
  --warn-ink:  #8A5606;

  --focus: #5B54E8;

  --r-sm: 10px;
  --r-md: 16px;
  --pill: 999px;

  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:   #101018;
    --surface:  #17171F;
    --sunken:   #1C1C28;
    --ink:      #ECECF6;
    --ink-soft: #C3C3D6;
    --muted:    #9494AC;
    --line:     #272733;
    --line-firm:#3C3C4E;

    --accent:      #A9A2FF;
    --accent-wash: #1C1938;
    --on-accent:   #101018;

    --warn:      #D9A24E;
    --warn-wash: #2C2110;
    /* Sur fond sombre, la teinte de remplissage passe deja : 6,93:1. */
    --warn-ink:  #D9A24E;

    --focus: #A9A2FF;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 var(--sp-3) var(--sp-5); }

.top { border-bottom: 1px solid var(--line); }
.top .wrap {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-top: var(--sp-3); padding-bottom: var(--sp-3);
  max-width: 1180px;
}
.brand {
  font-family: var(--serif); font-size: 24px; letter-spacing: -.01em; margin: 0;
  text-decoration: none; color: var(--ink);
}
.brand em { font-style: italic; color: var(--accent); }
.back {
  margin-left: auto; font-size: 14px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.back:hover { border-bottom-color: currentColor; }

/* --- menu principal -------------------------------------------------------
   Cinq familles de pages — communes, observatoire, evolution, travaux, blog —
   qui n'etaient atteignables que par le pied de page, quand elles y etaient :
   l'observatoire et les prix de travaux n'y figuraient meme pas.
   La section courante porte `.here` : sur neuf cents pages, c'est la seule
   chose qui dise au visiteur ou il se trouve.
   ------------------------------------------------------------------------ */
/* Le calage a droite est porte par ce bloc, jamais par un element qui peut
   disparaitre : le selecteur de langue n'existe que sur les pages traduites,
   le bouton que la ou une cible est connue. */
.tools {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-left: auto; flex: none;
}
.tools .cta-top { margin-left: 0; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm);
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--ink); background: var(--sunken); }
.nav a.here { color: var(--accent); background: var(--accent-wash); }

/* L'action, et non un lien de plus. `--on-accent` plutot que `#fff` : l'accent
   s'eclaircit en theme sombre pour tenir sur fond noir, et le blanc n'y ferait
   plus que 3,5:1 — sur le bouton le plus important de la page. */
.cta-top {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: auto; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: var(--on-accent); background: var(--accent);
  padding: 10px 17px; border-radius: var(--pill);
  transition: opacity .18s;
}
.cta-top:hover { opacity: .88; }
.cta-top svg { width: 15px; height: 15px; display: block; }

/* Sous 1080 px, les liens passent sur une seconde ligne qui defile du doigt.
   PAS de bouton « hamburger » : il demanderait du JavaScript, et ces pages
   n'en portent aucun — c'est ce qui garde la CSP du domaine a un seul script
   declare. Le rail defile au lieu de se replier sur trois lignes : un menu
   qui repousse le titre sous la ligne de flottaison coute plus qu'il ne sert.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .top .wrap { flex-wrap: wrap; row-gap: 10px; }
  .top .nav {
    order: 3; width: 100%; gap: 6px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav a {
    background: var(--sunken); border-radius: var(--pill);
    padding: 6px 12px; font-size: 13.5px;
  }
  .top .nav a.here { background: var(--accent-wash); }
}

.mast { padding: var(--sp-5) 0 var(--sp-3); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px;
}
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5vw, 54px); line-height: 1.04;
  letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance;
}
.lede { color: var(--ink-soft); font-size: 17px; margin: 0; }

h2 {
  font-family: var(--serif); font-weight: 400; font-size: 27px;
  line-height: 1.14; letter-spacing: -.01em;
  margin: var(--sp-5) 0 12px; text-wrap: balance;
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
/* La numerotation des sections vient d'ici, plus du HTML.
   Ecrite a la main, elle vivait aussi dans les cles de traduction : inserer
   une section imposait de renumeroter 32 titres et une centaine de chaines
   de catalogue. Un compteur suit l'ordre du document, dans les trois langues,
   sans que rien ne le declare.
   `h2[id]` exclut le titre « Sommaire », seul h2 de ces pages sans id. */
body { counter-reset: sec; }
h2[id]::before {
  counter-increment: sec;
  content: counter(sec) ".";
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  letter-spacing: .06em; margin-right: 10px; vertical-align: 3px;
}
h3 { font-size: 16px; font-weight: 600; margin: var(--sp-3) 0 6px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }
strong, b { font-weight: 600; color: var(--ink); }
a { color: var(--accent); }

.date {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  margin: var(--sp-3) 0 0;
}

/* Encadre d'avertissement : ce qui doit etre complete avant toute mise en
   ligne. Il est volontairement voyant — un contrat publie avec des mentions
   manquantes est pire qu'un contrat absent. */
.todo {
  background: var(--warn-wash); border: 1px solid var(--warn);
  border-radius: var(--r-md); padding: var(--sp-3); margin: var(--sp-3) 0;
}
.todo h3 { margin-top: 0; color: var(--warn-ink); }
.todo p, .todo li { color: var(--ink-soft); }
.todo code {
  font-family: var(--mono); font-size: .88em; color: var(--ink);
  background: var(--surface); padding: 1px 5px; border-radius: 3px;
}

.note {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: var(--sp-3); margin: var(--sp-3) 0;
}
.note p:last-child { margin-bottom: 0; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3); margin: var(--sp-4) 0 0;
}
.toc h2 {
  margin: 0 0 10px; padding: 0; border: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.toc ol { margin: 0; padding-left: 20px; font-size: 14.5px; }
.toc li { margin-bottom: 5px; }

footer {
  border-top: 1px solid var(--line); margin-top: var(--sp-5);
  padding-top: var(--sp-3); font-size: 13.5px; color: var(--muted);
}

/* --- selecteur de langue --------------------------------------------------
   Trois liens, aucun JavaScript, comme sur l'accueil. La langue courante
   n'est pas un lien mort : c'en est un vers la page elle-meme, marque
   `aria-current`, ce qui la designe au lecteur d'ecran sans la retirer de la
   navigation. */
.langs { display: flex; gap: 2px; margin-left: 14px; flex: none; }
.langs a {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-decoration: none; color: var(--muted);
  padding: 6px 8px; border-radius: 8px;
}
.langs a:hover { color: var(--ink); background: var(--sunken); }
.langs a[aria-current] { color: var(--accent); background: var(--accent-wash, transparent); }


/* ---------------------------------------------------------------------- *
   [hidden] NE MASQUE PAS UN BLOC QUI PORTE UN display EN CSS.

   La valeur que le navigateur applique a [hidden] est la plus faible qui
   soit, et elle perd contre n'importe quel display pose ici. Le defaut a
   frappe DEUX FOIS dans ce depot : le formulaire du rapport affichait les
   champs qu'il ne devait pas demander, et la page d'evolution annoncait un
   « calcul elargi » sur 41 communes qui n'en avaient pas. Rien ne casse,
   rien ne s'affiche en rouge : la page se contente de mentir.

   Elle vivait dans le seul gabarit de l'evolution. Elle est ici parce que
   toute page qui masque un bloc en grid ou en flex en a besoin, et que la
   troisieme fois ne doit pas arriver.                                      */
[hidden] { display: none !important; }

/* Encadre d'avertissement. Vient du gabarit de la page d'evolution, ou il
   signale un repli de zone ; l'observatoire s'en sert pour dire qu'un
   chiffre manque, qu'une part d'habitants est exclue d'une statistique, ou
   qu'une valeur vient du parent. Recopie dans chaque gabarit, il aurait
   diverge au premier ajustement. */
.avis { display: flex; align-items: flex-start; gap: 14px;
        background: var(--sunken); border: 1px solid var(--line);
        border-radius: var(--r-md); padding: 18px 20px; margin-top: 26px; }
.avis.net { border-color: var(--line-firm); }
.avis svg { flex: none; width: 20px; height: 20px; margin-top: 1px;
            stroke: var(--accent); fill: none; stroke-width: 1.6;
            stroke-linecap: round; stroke-linejoin: round; }
.avis div { display: flex; flex-direction: column; gap: 5px; }
.avis strong { font-size: 15px; }
.avis p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }


/* --- pages « prix par commune » -------------------------------------------
   Meme feuille que les pages legales et le blog : meme colonne, meme
   echelle. Ce qui s'ajoute ici ne concerne que les chiffres — des cartes,
   des tableaux, et le fil d'Ariane.
   ----------------------------------------------------------------------- */
.fil {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding-top: var(--sp-3); margin: 0;
}
.fil a { color: var(--muted); text-decoration: none; }
.fil a:hover { color: var(--accent); }
.fil span { color: var(--line-firm); margin: 0 6px; }

.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px; margin: var(--sp-4) 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
}
.chiffre { background: var(--surface); padding: 20px 18px; }
.chiffre dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.chiffre dd {
  margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
/* Un intervalle fait trois fois la longueur d'un nombre : a 30px il
   deborderait d'une colonne de 160px. Il se compose plus petit et accepte
   de passer sur deux lignes — les espaces internes des nombres sont
   insecables, la coupure tombe donc autour du tiret. */
.chiffre dd.plage { font-size: 21px; line-height: 1.25; }
.chiffre .app { display: block; margin-top: 7px; font-family: var(--sans);
  font-size: 13px; color: var(--muted); letter-spacing: 0; }

.tw { overflow-x: auto; margin: var(--sp-3) 0; }
.tw table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.tw th, .tw td {
  text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tw th:first-child, .tw td:first-child { text-align: left; }
.tw thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw td i { color: var(--muted); font-style: normal; }

.cta {
  margin: var(--sp-5) 0; padding: var(--sp-3);
  background: var(--accent-wash); border-radius: var(--r-md);
}
.cta h2 { margin-top: 0; }
.cta p { max-width: 58ch; }
.cta a.bouton {
  display: inline-block; margin-top: 8px; padding: 13px 22px;
  background: var(--accent); color: var(--on-accent); border-radius: var(--pill);
  text-decoration: none; font-weight: 600; font-size: 15px;
}
.cta a.bouton:hover { opacity: .9; }

.voisines { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-3) 0; padding: 0; list-style: none; }
.voisines li { margin: 0; }
.voisines a {
  display: inline-block; padding: 7px 14px; border: 1px solid var(--line-firm);
  border-radius: var(--pill); text-decoration: none; font-size: 14px;
  color: var(--ink-soft);
}
.voisines a:hover { border-color: var(--accent); color: var(--accent); }

/* Deux rubriques de l'observatoire, en cartes. PAS `.voisines` : celles-ci
   sont des pastilles d'un mot, faites pour se lire en rafale ; ici chaque
   entree porte un titre et une phrase, et deux lignes dans une pastille
   arrondie se lisent mal. Le maillage etait le sujet — voir `bloc_autres()`. */
.rubriques { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0;
             padding: 0; list-style: none;
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rubriques li { margin: 0; }
.rubriques a {
  display: block; height: 100%; padding: var(--sp-3);
  border: 1px solid var(--line-firm); border-radius: var(--r-md);
  text-decoration: none; color: inherit;
}
.rubriques a:hover { border-color: var(--accent); background: var(--accent-wash); }
.rubriques b { display: block; color: var(--accent); font-size: 16px; }
.rubriques span { display: block; margin-top: 6px; font-size: 14px;
                  color: var(--ink-soft); }

/* .note existe deja dans la feuille des pages legales — un encadre a filet
   bleu. Reprendre le nom donnait un cadre vide autour d'un bloc qui ne
   demandait qu'un trait de separation. */
.methode {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.methode h2 {
  font-size: 17px; color: var(--ink-soft); font-family: var(--sans);
  font-weight: 600; letter-spacing: 0; border: 0; padding: 0;
  margin: 0 0 10px;
}
.methode p { margin: 0 0 10px; }

/* Les intertitres d'un article ont besoin d'air : sans cela, la fin d'une
   section et le titre de la suivante se touchent presque. */
.post h3 { margin-top: var(--sp-4); }
.post p, .post li { max-width: 68ch; }

/* Sans cette regle, une image posee a sa taille native (souvent 900 px et
   plus) deborde du .wrap (780 px) : elle etait plus large que la colonne
   de texte qu'elle illustre. */
.post figure { margin: var(--sp-3) 0; max-width: 68ch; }
.post figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.post figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Les graphiques d'article, SANS JAVASCRIPT, et ce n'est pas un choix de
   style : le robot du blog publie sans relancer --mode entetes, donc un
   script neuf serait bloque par la CSP et la figure resterait vide en
   ligne. Le detail s'ouvre au survol ET au focus — tabindex sur chaque
   ligne, sinon un clavier ou un doigt n'y accede pas. Les valeurs restent
   ecrites en clair a droite de chaque barre : la bulle commente, elle ne
   porte jamais seule un chiffre. */
.post .graphe {
  max-width: 68ch; padding: var(--sp-3) var(--sp-3) 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.graphe .g-titre { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.graphe .g-sous { margin: 2px 0 14px; font-size: 14px; color: var(--muted); }
.graphe ul { list-style: none; margin: 0; padding: 0; }
.graphe li {
  position: relative; display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(84px, 140px) 1fr 4.2em;
  max-width: none; margin: 0; padding: 6px; border-radius: var(--r-sm); outline: none;
}
.graphe li:hover, .graphe li:focus-visible { background: var(--sunken); }
.graphe li:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.graphe .g-lab { font-size: 14px; color: var(--ink-soft); }
.graphe .g-fort .g-lab { color: var(--ink); font-weight: 600; }
.graphe .g-val { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.graphe .g-piste { position: relative; height: 16px; }
.graphe .g-zero { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--line-firm); }
.graphe .g-barre { position: absolute; top: 0; height: 16px; border-radius: 4px; background: var(--line-firm); }
.graphe .g-baisse { background: var(--warn); }
.graphe .g-accent { background: var(--accent); }
.graphe .g-bulle {
  position: absolute; z-index: 2; left: 6px; right: 6px; top: 100%; margin-top: 2px;
  padding: 6px 10px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.4;
  background: var(--ink); color: var(--surface);
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
/* :focus et non :focus-visible pour la bulle : un doigt qui touche la ligne
   la focalise sans « focus visible », et la bulle doit s'ouvrir quand meme. */
.graphe li:hover .g-bulle, .graphe li:focus .g-bulle { opacity: 1; visibility: visible; }
/* Sur telephone, libelle et valeur sur une ligne, la barre sur la suivante
   et sur toute la largeur : en trois colonnes, la piste tombait a 50 px et
   la barre du Luxembourg ne se distinguait plus de celle de l'Allemagne. */
@media (max-width: 560px) {
  .graphe li { grid-template-columns: 1fr auto; row-gap: 4px; }
  .graphe .g-piste { grid-column: 1 / -1; grid-row: 2; }
}
.graphe details { margin-top: 6px; font-size: 13px; }
.graphe summary { cursor: pointer; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .graphe .g-bulle { transition: none; } }

/* Les questions frequentes. Les <h3> heritent deja leur corps et leur
   graisse de la feuille des pages legales : il ne manque que l'air autour
   du bloc et la mesure de la colonne, sans quoi une reponse de cinquante
   mots court sur toute la largeur du .wrap. */
.faq { margin: var(--sp-5) 0; }
.faq h2 { margin-bottom: var(--sp-2); }
.faq h3 { margin-top: var(--sp-3); }
.faq p { max-width: 68ch; }

.index { columns: 3 200px; column-gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-4); padding: 0; list-style: none; }
.index li { margin: 0 0 7px; break-inside: avoid; font-size: 14.5px; }
.index a { text-decoration: none; color: var(--ink-soft); }
.index a:hover { color: var(--accent); }
.index i { color: var(--muted); font-style: normal; font-size: 13px; }

/* --- banniere de consentement (posee par build_app.py) ------------------ */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: flex; justify-content: center; padding: 16px;
  pointer-events: none;
}
.ck[hidden] { display: none !important; }
.ck .ck-in {
  /* LA PALETTE CLAIRE EN DUR D'ABORD, ET LE THEME PAR-DESSUS.
     `light-dark()` n'existe que depuis 2024, et jusqu'ici SEUL L'ACCUEIL en
     dependait — les neuf cents pages de contenu calent leur theme sur une
     requete de media. La banniere y ajoute donc une dependance qu'elles
     n'avaient pas.
     Une var() dont la valeur ne peut pas etre calculee ne retombe PAS sur la
     declaration precedente : la propriete devient `unset`, donc `transparent`
     pour un fond. Sur un navigateur d'avant 2024, la banniere aurait ete du
     texte gris sur la page, sans boite ni boutons — illisible, et invisible
     depuis ici. Ecrire deux fois le jeton n'y change rien : c'est a la
     SUBSTITUTION que l'invalidite apparait, pas au parsing. Il faut donc un
     `@supports`, et la palette claire comme plancher. */
  --ck-bg:    #FFFFFF;
  --ck-ink:   #1B1B2E;
  --ck-soft:  #454563;
  --ck-mute:  #64647E;
  --ck-line:  #CACBE6;
  --ck-sunk:  #EDEEFA;
  --ck-acc:   #5B54E8;
  --ck-on:    #FFFFFF;
  --ck-ombre: rgba(27,27,46,.28);
  pointer-events: auto;
  width: 100%; max-width: 620px;
  background: var(--ck-bg); color: var(--ck-ink);
  border: 1px solid var(--ck-line); border-radius: 16px;
  box-shadow: 0 18px 48px -12px var(--ck-ombre);
  padding: 20px 22px 18px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
}
@supports (color: light-dark(#000, #fff)) {
  .ck .ck-in {
    --ck-bg:    light-dark(#FFFFFF, #17171F);
    --ck-ink:   light-dark(#1B1B2E, #ECECF6);
    --ck-soft:  light-dark(#454563, #C3C3D6);
    --ck-mute:  light-dark(#64647E, #9494AC);
    --ck-line:  light-dark(#CACBE6, #3C3C4E);
    --ck-sunk:  light-dark(#EDEEFA, #1C1C28);
    --ck-acc:   light-dark(#5B54E8, #A9A2FF);
    --ck-on:    light-dark(#FFFFFF, #101018);
    --ck-ombre: light-dark(rgba(27,27,46,.28), rgba(0,0,0,.7));
  }
}
.ck .ck-in h2 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400; font-size: 23px; line-height: 1.2;
  margin: 0 0 7px; padding: 0; border: 0; color: var(--ck-ink);
  letter-spacing: -.005em; text-transform: none;
  max-width: none; text-wrap: wrap;
}
.ck .ck-in h2::before { content: none; }
.ck .ck-in p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ck-soft); }
.ck .ck-in p b { color: var(--ck-ink); font-weight: 600; }
.ck .ck-acts { display: flex; gap: 10px; }
.ck .ck-acts button {
  flex: 1 1 0; min-width: 0;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
  padding: 11px 16px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer;
}
.ck .ck-acts .ck-non { background: var(--ck-sunk); color: var(--ck-ink); border-color: var(--ck-line); }
.ck .ck-acts .ck-oui { background: var(--ck-acc); color: var(--ck-on); }
.ck .ck-acts button:focus-visible { outline: 2px solid var(--ck-acc); outline-offset: 2px; }
.ck .ck-in .ck-more { margin: 14px 0 0; font-size: 12.5px; color: var(--ck-mute); }
.ck .ck-in .ck-more a { color: var(--ck-mute); text-underline-offset: 2px; }
/* Le bouton de rappel, sur la politique de cookies. */
.ck-again {
  font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 18px; border-radius: 12px; cursor: pointer;
  background: var(--accent, #5B54E8); color: var(--on-accent, #FFFFFF);
  border: 1px solid transparent;
}
.ck-again:focus-visible { outline: 2px solid var(--accent, #5B54E8); outline-offset: 2px; }
@media (max-width: 560px) {
  .ck { padding: 0; }
  .ck .ck-in { border-radius: 18px 18px 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ck .ck-in { animation: ck-up .28s cubic-bezier(.22,.61,.36,1); }
}
@keyframes ck-up { from { transform: translateY(14px); opacity: 0; } }