/* =========================================================================
   NEXSI — feuille de style des textes légaux publiés
   01/08/2026 · monde « planche d'étiquettes » (D47) à l'encre de la marque (D48)

   Deux pages la partagent : mentions-legales.html et confidentialite.html.
   Elles se déploient ensemble, dans le même dossier que la page d'attente.

   AUCUN SCRIPT dans ces deux pages, et aucune ressource extérieure. Un texte
   légal doit rester lisible quand le JavaScript est coupé, quand la police
   ne se charge pas, et quand la feuille elle-même manque : c'est du HTML
   sémantique, la mise en forme n'ajoute rien à ce qui est écrit.

   AUCUN DÉGRADÉ, comme partout ailleurs sur cette surface.
   ========================================================================= */

:root {
  --dos: #E6E3F0;
  --etiquette: #FFFFFF;
  --seconde: #ECEAFA;
  --perforation: #ADA5C8;

  --encre: #16151A;
  --encre-douce: #55515C;
  --encre-faible: #65606F;

  --nexsi: #4B3FCB;
  --nexsi-fort: #3C32A6;
  --sur-nexsi: #FFFFFF;

  --focus: #2C21A8;
  --selection: #D9D4F6;

  --typo: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --typo-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', monospace;
  --chiffres: tabular-nums;

  --g-normale: 400; --g-moyenne: 500; --g-appuyee: 600; --g-forte: 700;

  --t-xs: 0.75rem;  --i-xs: 1rem;
  --t-s: 0.875rem;  --i-s: 1.25rem;
  --t-m: 1rem;      --i-m: 1.5rem;
  --t-l: 1.125rem;  --i-l: 1.625rem;
  --t-xl: 1.375rem; --i-xl: 1.75rem;
  --t-2xl: 1.75rem; --i-2xl: 2.125rem;
  --t-affiche: 2.25rem; --i-affiche: 2.625rem;
  --lettrage-titre: -0.011em;
  --lettrage-champ: 0.12em;

  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem;    --e-10: 2.5rem;
  --e-12: 3rem;   --e-16: 4rem;
  --marge: var(--e-4);

  --large-contenu: 44rem;
  --cible-min: 2.75rem;

  --r-etiquette: 0.5rem;
  --r-petite: 0.25rem;
  --trait: 1px; --trait-focus: 3px;

  --d-reaction: 90ms;
  --c-standard: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) { :root { --d-reaction: 1ms; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; text-size-adjust: 100%; }
html, body { min-height: 100dvh; }

body {
  margin: 0;
  color: var(--encre);
  font-family: var(--typo);
  font-size: var(--t-m); line-height: var(--i-m);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Le dorsal siliconé perforé, identique à celui de la page d'attente. */
  background-color: var(--dos);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><circle cx='1.5' cy='1.5' r='1.1' fill='%23ADA5C8'/></svg>");
  background-size: 28px 28px;
}

:focus-visible { outline: var(--trait-focus) solid var(--focus); outline-offset: 2px; border-radius: var(--r-petite); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--selection); color: var(--encre); }

@media (min-width: 600px)  { :root { --marge: var(--e-6); } }
@media (min-width: 1240px) { :root { --marge: var(--e-8); } }

.colonne { width: 100%; max-width: var(--large-contenu); margin-inline: auto; padding-inline: var(--marge); }

/* -------------------------------------------------------------------------
   L'EN-TÊTE
   ------------------------------------------------------------------------- */

.entete { padding-block: var(--e-3); background: var(--dos); border-bottom: var(--trait) solid var(--perforation); }
.entete .colonne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }

.marque {
  display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible-min);
  color: var(--encre); text-decoration: none;
  font-size: var(--t-l); font-weight: var(--g-forte); letter-spacing: 0.10em;
}
.marque-carre {
  width: 2rem; height: 2rem;
  border-radius: var(--r-petite);
  background: var(--nexsi); color: var(--sur-nexsi);
  display: grid; place-items: center;
  font-size: var(--t-m); font-weight: var(--g-forte); letter-spacing: 0;
}
.lien-entete {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-min); padding-inline: var(--e-4);
  background: var(--encre); color: var(--dos);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-petite);
  text-decoration: none;
  font-family: var(--typo-mono);
  font-size: var(--t-xs); letter-spacing: var(--lettrage-champ);
  text-transform: uppercase; font-weight: var(--g-appuyee);
  transition: opacity var(--d-reaction) var(--c-standard);
}
@media (hover: hover) and (pointer: fine) { .lien-entete:hover { opacity: 0.82; } }

/* -------------------------------------------------------------------------
   LA FEUILLE — une seule étiquette blanche, qui porte tout le document
   ------------------------------------------------------------------------- */

main { padding-block: var(--e-10) var(--e-12); }

.feuille {
  position: relative;
  background: var(--etiquette);
  border: var(--trait) solid var(--encre);
  border-radius: var(--r-etiquette);
  padding: var(--e-6) var(--e-5);
}
@media (min-width: 600px) { .feuille { padding: var(--e-10); } }

/* Les deux encoches de découpe, sur les bords latéraux. */
.feuille::before, .feuille::after {
  content: ''; position: absolute; top: 50%;
  width: 0.5rem; height: 0.5rem;
  background: var(--dos);
  border: var(--trait) solid var(--encre);
  border-radius: 50%;
  transform: translateY(-50%);
}
.feuille::before { left: calc(-0.25rem - var(--trait)); }
.feuille::after  { right: calc(-0.25rem - var(--trait)); }

.entete-etq {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-3); flex-wrap: wrap;
  font-family: var(--typo-mono);
  font-size: var(--t-xs); letter-spacing: var(--lettrage-champ);
  text-transform: uppercase; color: var(--encre-faible);
}
.filet { border: 0; border-top: var(--trait) solid var(--encre); margin: var(--e-4) 0; opacity: 0.28; }

/* -------------------------------------------------------------------------
   LE TEXTE
   ------------------------------------------------------------------------- */

h1 {
  margin: var(--e-5) 0 var(--e-4);
  font-size: var(--t-2xl); line-height: var(--i-2xl);
  font-weight: var(--g-forte); letter-spacing: var(--lettrage-titre);
  text-wrap: balance;
}
@media (min-width: 600px) { h1 { font-size: var(--t-affiche); line-height: var(--i-affiche); } }

h2 {
  margin: var(--e-10) 0 var(--e-3);
  font-size: var(--t-xl); line-height: var(--i-xl);
  font-weight: var(--g-forte); letter-spacing: var(--lettrage-titre);
  text-wrap: balance;
}
h3 {
  margin: var(--e-6) 0 var(--e-2);
  font-size: var(--t-m); line-height: var(--i-m); font-weight: var(--g-forte);
}

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

.chapeau { color: var(--encre-douce); font-size: var(--t-l); line-height: var(--i-l); text-wrap: pretty; }
.date { font-family: var(--typo-mono); font-size: var(--t-xs); letter-spacing: var(--lettrage-champ);
        text-transform: uppercase; color: var(--encre-faible); font-variant-numeric: var(--chiffres); }

.champ-nom {
  display: block;
  font-family: var(--typo-mono);
  font-size: var(--t-xs); line-height: var(--i-xs);
  letter-spacing: var(--lettrage-champ);
  text-transform: uppercase;
  color: var(--nexsi);
  font-weight: var(--g-appuyee);
  margin-bottom: var(--e-1);
}

a { color: var(--nexsi-fort); text-underline-offset: 2px; }
a:hover { color: var(--nexsi); }

ul { margin: 0 0 var(--e-4); padding-left: var(--e-5); }
li { margin-bottom: var(--e-2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--g-forte); }

/* « 1ᵉʳ » en exposant : le défaut du navigateur descend à 10 px dans un bloc
   déjà en --t-xs, sous le plancher absolu de 12 px du §5.2 du système de
   design. On le pose au plancher plutôt qu'en relatif. */
sup { font-size: var(--t-xs); line-height: 0; }

/* Le lien qui EST l'action — écrire pour se retirer, saisir la CNIL. Les
   liens au fil du texte restent au fil du texte (WCAG 2.5.8 les excepte
   explicitement) ; celui-ci est une cible, et il a la taille d'une cible. */
.lien-action {
  display: inline-flex; align-items: center;
  min-height: var(--cible-min); padding-inline: var(--e-3);
  border: var(--trait) solid var(--nexsi); border-radius: var(--r-petite);
  background: var(--seconde); color: var(--nexsi-fort);
  text-decoration: none; font-weight: var(--g-appuyee);
  transition: background-color var(--d-reaction) var(--c-standard);
}
.lien-action:hover { background: var(--etiquette); }

/* La fiche d'identification : intitulé de champ à gauche, valeur à droite.
   Sous 600 px, l'intitulé passe au-dessus — deux colonnes de 160 px chacune
   couperaient « Commission Nationale de l'Informatique et des Libertés » en
   sept lignes. */
.fiche { margin: 0 0 var(--e-6); display: grid; gap: var(--e-3) var(--e-5); }
.fiche dt {
  font-family: var(--typo-mono);
  font-size: var(--t-xs); line-height: var(--i-s);
  letter-spacing: var(--lettrage-champ); text-transform: uppercase;
  color: var(--nexsi); font-weight: var(--g-appuyee);
}
.fiche dd { margin: 0 0 var(--e-3); }
.fiche dd:last-child { margin-bottom: 0; }
@media (min-width: 600px) {
  .fiche { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--e-4) var(--e-6); align-items: baseline; }
  .fiche dt { grid-column: 1; }
  .fiche dd { grid-column: 2; margin-bottom: 0; }
}

/* Le bloc mis en évidence : encre pleine sur l'étiquette seconde, jamais une
   ombre ni un fondu. */
.appui {
  margin: var(--e-6) 0;
  padding: var(--e-4) var(--e-5);
  background: var(--seconde);
  border: var(--trait) solid var(--nexsi);
  border-radius: var(--r-petite);
}
.appui > :last-child { margin-bottom: 0; }

.note {
  margin: var(--e-6) 0 0;
  padding: var(--e-4);
  border: var(--trait) dashed var(--perforation); border-radius: var(--r-petite);
  color: var(--encre-faible); font-size: var(--t-s); line-height: var(--i-s);
}
.note > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   LE SOMMAIRE — une planche a un index
   ------------------------------------------------------------------------- */

.sommaire { margin: var(--e-6) 0 0; padding: 0; list-style: none;
            display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sommaire li { margin: 0; }
.sommaire a {
  display: inline-flex; align-items: center;
  min-height: var(--cible-min); padding-inline: var(--e-3);
  border: var(--trait) solid var(--perforation); border-radius: var(--r-petite);
  background: var(--etiquette); color: var(--encre-douce);
  font-size: var(--t-s); text-decoration: none;
  transition: border-color var(--d-reaction) var(--c-standard),
              color var(--d-reaction) var(--c-standard);
}
.sommaire a:hover { border-color: var(--nexsi); color: var(--nexsi-fort); }

h2[id] { scroll-margin-top: var(--e-4); }

/* -------------------------------------------------------------------------
   LE PIED
   ------------------------------------------------------------------------- */

.pied {
  margin-top: var(--e-12); padding-block: var(--e-8) var(--e-12);
  border-top: var(--trait) solid var(--perforation);
  color: var(--encre-faible); font-size: var(--t-xs); line-height: var(--i-xs);
}
.pied p { margin: 0 0 var(--e-2); }
.pied a { display: inline-flex; align-items: center; min-height: var(--cible-min);
          color: var(--encre-douce); text-underline-offset: 2px; margin-right: var(--e-4); }

/* -------------------------------------------------------------------------
   L'IMPRESSION — un texte légal se garde, donc il s'imprime
   ------------------------------------------------------------------------- */

@media print {
  /* La trame de perforation est du décor d'écran : à l'impression elle devient
     une page grise et une cartouche vidée. C'est la seule chose à retirer —
     les encres de la marque s'impriment telles quelles, en couleur comme en
     niveaux de gris. */
  body { background-image: none; background-color: transparent; }
  .entete, .sommaire { display: none; }
  main { padding: 0; }
  .feuille { border: 0; padding: 0; }
  .feuille::before, .feuille::after { display: none; }
  /* Une adresse cliquable ne se clique pas sur papier : elle s'écrit. */
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}