/* LinkReport, INAH Group / Tech. Hani Walakiyim (HLB). 11/09/2026. */
/* Style commun aux quatre pages légales (09/09/2026).
   Volontairement séparé de index.html : ces pages sont statiques, lues
   rarement, et doivent rester lisibles même si le reste du site évolue.
   Mêmes couleurs et mêmes polices que le site, en beaucoup plus sobre.
   La police des titres est déclarée juste en dessous et servie par notre
   propre domaine, jamais appelée chez Google : un appel à Google Fonts
   transmet l'adresse IP de chaque visiteur à un tiers sans son
   consentement, et c'est ce qui obligerait à un bandeau de consentement.
   Le texte courant reste en police système, volontairement : c'est ce qui
   se lit le mieux sur un long document juridique, et cela ne coûte aucun
   téléchargement. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/polices/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/polices/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nuit: #140a1e;
  --prune: #2c1544;
  --framboise: #a12461;
  --texte: #F6F1FA;
  --texte-doux: rgba(246, 241, 250, .72);
  /* ACCESSIBILITÉ 09/09/2026 : .45 donnait 4,2 pour 1 sur le fond nuit,
     juste sous le minimum de 4,5 pour 1 des WCAG AA. .55 donne 5,7 pour 1. */
  --texte-faible: rgba(246, 241, 250, .55);
  --bord: rgba(255, 255, 255, .14);
  --verre: rgba(255, 255, 255, .05);
  --marque: linear-gradient(135deg, #2c1544, #5a1f6b, #a12461, #c2611f, #4a2049);
  --corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* LARGEUR (09/09/2026, option 1 validée par l'utilisateur). Ces pages
   étaient plafonnées à 760 pixels, ce qui laissait plus de 600 pixels de
   vide de chaque côté sur un grand écran, alors que le texte, lui, était
   coincé au milieu. Le conteneur occupe maintenant presque toute la
   largeur, avec la même marge que YouTube, et c'est le TEXTE qui garde une
   largeur de lecture, calé à gauche : une ligne de 200 caractères serait
   illisible, une ligne perdue au centre d'un écran vide aussi. */
.enveloppe { width: 100%; max-width: 100%; margin: 0; padding: 0 24px; }

/* CORRECTION du 09/09/2026, proposition 3 retenue par l'utilisateur après
   comparaison de trois largeurs sur écran de 1900 pixels. Le texte était
   plafonné à 78 caractères par ligne, ce qui, sur un grand écran, coupait
   les phrases très tôt et donnait l'impression que la page était divisée en
   deux, avec une moitié droite vide. Il n'y a plus aucun plafond : le texte
   occupe la largeur du conteneur, donc celle de la fenêtre moins la marge.
   Le retour à la ligne redevient l'affaire du navigateur, qui le calcule
   selon la largeur réelle de la fenêtre et le niveau de zoom : sur un
   téléphone, le texte revient à la ligne beaucoup plus tôt, sans une seule
   règle de plus à écrire ici. */

/* BANDEAU DE TÊTE (09/09/2026). Il portait un dégradé de marque et un
   bouton "Retour au site" ; les deux ont été retirés à la demande
   explicite de l'utilisateur : le bouton faisait doublon avec les flèches
   de navigation du navigateur, et le dégradé coupait ces pages du reste du
   site. Le bandeau garde seulement sa hauteur, sur le fond normal du
   site. */
header.tete {
  background: transparent;
  padding: 18px 0 8px;
  margin-bottom: 18px;
}

header.tete a.retour {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}

header.tete a.retour:hover { background: rgba(255, 255, 255, .12); }

h1 { font-family: var(--display); font-size: clamp(26px, 6vw, 38px); font-weight: 800; letter-spacing: -.02em; margin: 22px 0 6px; }
h2 { font-family: var(--display); font-size: clamp(18px, 4vw, 22px); font-weight: 800; margin: 38px 0 10px; }
h3 { font-size: 16px; font-weight: 700; margin: 24px 0 6px; }

p, li { color: var(--texte-doux); }
li { margin-bottom: 8px; }
strong { color: var(--texte); }

.maj { color: var(--texte-faible); font-size: 13px; margin-top: 0; }

a { color: #f0a8c8; }
a:hover { color: var(--texte); }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--texte); font-weight: 700; }
td { color: var(--texte-doux); }

.encadre {
  background: var(--verre);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
}

.encadre p:first-child { margin-top: 0; }
.encadre p:last-child { margin-bottom: 0; }

footer.pied {
  margin-top: 60px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--bord);
  font-size: 13.5px;
  color: var(--texte-faible);
}

footer.pied a { color: var(--texte-faible); text-decoration: none; margin-right: 18px; }
/* CET ECART DE 18 PIXELS EST CELUI QUI SEPARE LES ONGLETS DE LA PREMIERE
   LIGNE, et rien d'autre. Defaut vu en capture le 15/09/2026 : il
   s'appliquait a TOUT lien du pied, donc aussi aux logos de reseaux
   sociaux, qui ont deja leur propre ecart, et au nom de la maison rendu
   cliquable dans la ligne de droits d'auteur, ce qui ouvrait un trou
   avant le point : « INAH Group    . Tous droits reserves ». */
footer.pied .pied-bas a { margin-right: 0; }
footer.pied a:hover { color: var(--texte); }
/* LE PIED DE PAGE TIENT SUR DEUX LIGNES (13/09/2026 pour la premiere,
   15/09/2026 pour la seconde).
   PREMIERE LIGNE : les liens de navigation a gauche, la signature poussee
   tout au fond a droite ("la signature doit etre sur la meme ligne que
   Accueil, Mentions legales, Confidentialite, Telecharger, INAH Group, de
   l'autre cote, a droite, a la fin de la ligne").
   SECONDE LIGNE : les logos des pages publiques de nos plateformes, puis la
   ligne de droits d'auteur, le tout aligne a gauche.
   DEFAUT REEL CORRIGE LE 15/09/2026, capture a l'appui : il n'y avait
   qu'UNE ligne, tout melange. La cause est ici : `.enveloppe` est une
   rangee flex, et le bloc du bas ajoute par `pied.js` s'y rangeait comme un
   element de plus, a la suite de la signature. Son trait de separation ne
   faisait donc que sa propre largeur, ce qui donnait ce trait qui ne
   commence qu'au milieu de l'ecran. Il occupe maintenant toute la largeur,
   donc il passe a la ligne, et il n'a plus besoin de trait a lui.
   Sur un ecran trop etroit, la signature passe en dessous, alignee a
   droite, et la seconde ligne ne bouge pas. Ajouter une page plus tard ne
   change rien : c'est la rangee qui s'allonge, jamais la structure. */
footer.pied .enveloppe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
/* SECONDE LIGNE : les logos et les droits a gauche, la signature au fond a
   droite (15/09/2026). Le retour a la ligne est force par `.pied-saut`,
   pose par `pied.js` juste apres les onglets : voir l'explication complete
   dans ce fichier. La signature n'est donc plus sur la premiere ligne. */
footer.pied .signature { margin: 0 0 0 auto !important; text-align: right; order: 4; }
footer.pied .pied-bas { flex: 1 1 auto; width: auto; order: 3; }
footer.pied .pied-saut { order: 2; }


/* Accessibilité : un contour net et visible sur tout élément atteint au
   clavier. Sans cette règle, la navigation à la tabulation est invisible sur
   fond sombre. */
a:focus-visible, button:focus-visible {
  outline: 2px solid #f0a8c8;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  table, thead, tbody, tr, th, td { display: block; }
  th { padding-bottom: 2px; }
  td { padding-top: 2px; border-bottom: none; }
  tr { border-bottom: 1px solid var(--bord); padding: 8px 0; }
}


/* Respect du réglage système "réduire les animations" (09/09/2026). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}