/* ===========================================================================
   SEAVEN RP — systeme visuel
   ---------------------------------------------------------------------------
   Trois familles, chacune avec un role qui lui est propre :
     Bricolage Grotesque  titres — grotesque a contrastes marques, elle
                          evite la neutralite d'Inter qui signe les sites
                          generes automatiquement.
     Karla                texte courant — un peu ouverte, tres lisible aux
                          petites tailles.
     JetBrains Mono       tout ce qui est une donnee technique : IP, UID,
                          references de commande, montants. Sur un serveur
                          RP, ces chaines SONT du contenu : les mettre en
                          chasse fixe est une information, pas un ornement.

   Le rayon des angles varie par role (8 / 14 / 22 px). Un meme rayon
   partout aplatit la hierarchie et se reconnait au premier coup d'oeil.
   =========================================================================== */

:root{
  /* ---- charte Seaven ---- */
  --accent:      #5ee08a;
  --accent-vif:  #6fe897;
  --accent-bas:  #4dd47a;
  --encre:       #0d1710;
  --encre-haut:  #0a120c;
  --panneau:     #141715;
  --panneau-haut:#191d1a;
  --texte:       #f5f6f9;
  --doux:        rgba(245,246,249,.62);
  --eteint:      rgba(245,246,249,.42);
  --trait:       rgba(255,255,255,.09);
  --trait-vif:   rgba(94,224,138,.34);
  --fond:        rgba(255,255,255,.05);
  --danger:      #e0554e;
  --danger-bas:  #c9463f;
  --alerte:      #e8b64c;

  /* ---- typographie ---- */
  --titre: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --corps: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- rythme ---- */
  --r-petit:  8px;    /* champs, pastilles */
  --r-moyen:  14px;   /* boutons, lignes */
  --r-grand:  22px;   /* panneaux */
  /* ---- echelle d'espacement ----
     Six pas, et rien entre les deux. Sans cadre pour absorber les ecarts,
     une marge de 18px a cote d'une de 20px se voit immediatement : c'est
     ce qui donne l'impression que la page est mal montee. */
  --e1: 8px;
  --e2: 16px;
  --e3: 28px;
  --e4: 48px;
  --e5: 80px;
  --e6: 128px;

  --gouttiere: clamp(20px, 5vw, 56px);
  --mesure:    68ch;
  --ease:      cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  background: var(--encre);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- TYPO */
h1, h2, h3, h4{
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
}
h1{ font-size: clamp(2.4rem, 7vw, 5.2rem); }
h2{ font-size: clamp(1.8rem, 4vw, 3rem); }
h3{ font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: -.02em; }
h4{ font-size: 1rem; letter-spacing: -.01em; }

p{ margin: 0 0 1rem; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-vif); }

strong{ color: var(--texte); font-weight: 700; }

code, .mono, .donnee{
  font-family: var(--mono);
  font-size: .92em;
  font-variant-ligatures: none;
}

/* Chiffres alignes partout ou ils se comparent en colonne. */
.chiffre, td.num, .stat-valeur{ font-variant-numeric: tabular-nums; }

::selection{ background: rgba(94,224,138,.28); color: #fff; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-petit);
}

/* ------------------------------------------------------------ STRUCTURE */
.enveloppe{
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* La mesure etroite : le texte long ne depasse jamais 68 caracteres,
   meme dans un conteneur large. */
.mesure{ max-width: var(--mesure); }

section{ position: relative; }

/* Les sections n'ont pas toutes la meme densite : c'est ce qui evite le
   rythme regulier des pages generees. */
.section{ padding-block: clamp(72px, 11vh, 132px); }
.section--dense{ padding-block: clamp(48px, 7vh, 80px); }
.section--ample{ padding-block: clamp(96px, 16vh, 180px); }

/* Filet de separation, plus discret qu'une bordure pleine. */
.filet{
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--trait) 18%, var(--trait) 82%, transparent);
}

/* ----------------------------------------------------------- SURTITRE */
.surtitre{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Le libelle passe en gris : sept surtitres verts sur la page d'accueil
     dispersaient l'accent au point qu'il n'accentuait plus rien. Seul le
     petit trait reste vert — une marque, pas une etiquette. */
  color: var(--doux);
  margin-bottom: 18px;
}
.surtitre::before{
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: .8;
}

.chapo{
  color: var(--doux);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 56ch;
  margin-top: 18px;
}

/* -------------------------------------------------------------- BOUTONS */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--r-moyen);
  font-family: var(--corps);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s, color .25s;
}
.btn--plein{
  background: var(--accent);
  color: var(--encre);
  /* Une ombre portee neutre, pas un halo colore. Le halo vert lisait
     « bouton de jeu » ; l'ombre sombre pose le bouton sur la page. */
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8);
}
.btn--plein:hover{
  background: var(--accent-vif);
  color: var(--encre);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9);
}
.btn--ligne{
  background: transparent;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.btn--ligne:hover{
  background: var(--fond);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--trait-vif);
}
.btn--discret{
  background: var(--fond);
  color: var(--doux);
  padding: 9px 15px;
  font-size: .85rem;
  border-radius: var(--r-petit);
}
.btn--discret:hover{ color: var(--texte); background: rgba(255,255,255,.09); }
.btn--danger{ background: var(--danger); color: #fff; }
.btn--danger:hover{ background: var(--danger-bas); color: #fff; transform: translateY(-2px); }
.btn[disabled], .btn.charge{ opacity: .55; pointer-events: none; }

/* Point lumineux qui pulse : sert a signaler que le serveur est en ligne. */
.pastille{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(94,224,138,.6);
  animation: pouls 2.4s ease-out infinite;
}
@keyframes pouls{
  0%   { box-shadow: 0 0 0 0 rgba(94,224,138,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(94,224,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(94,224,138,0); }
}

/* -------------------------------------------------------------- PANNEAUX */
.panneau{
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  padding: clamp(20px, 3vw, 30px);
}
.panneau--serre{ padding: 18px 20px; border-radius: var(--r-moyen); }

/* Les cartes ne sont volontairement pas toutes de la meme taille : la
   grille les laisse respirer selon leur poids reel. */
.cartes{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.carte{
  position: relative;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  padding: 26px;
  overflow: hidden;
  transition: border-color .35s, background .35s, transform .4s var(--ease);
}
.carte:hover{
  border-color: var(--trait-vif);
  background: var(--panneau-haut);
  transform: translateY(-3px);
}
.carte--large{ grid-column: span 2; }
.carte--haute{ grid-row: span 2; }
.carte h3{ margin-bottom: 10px; }
.carte p{ color: var(--doux); font-size: .95rem; }


/* ------------------------------------------------------------- ETIQUETTES */
.etiquette{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Une etiquette peut etre un bouton (bascule de verification) : elle doit
   alors reagir au survol, sinon rien n'indique qu'elle est cliquable. */
button.etiquette{ transition: filter .2s, transform .2s; }
button.etiquette:hover{ filter: brightness(1.35); transform: translateY(-1px); }

.etiquette--ok     { background: rgba(94,224,138,.14); color: var(--accent); }
.etiquette--attente{ background: rgba(232,182,76,.14); color: var(--alerte); }
.etiquette--ko     { background: rgba(224,85,78,.14);  color: var(--danger); }
.etiquette--neutre { background: var(--fond);          color: var(--doux); }

/* ------------------------------------------------------------ PASTILLES
   Filtres cliquables (categories de la FAQ, tris). Ce sont des <button> :
   sans ces regles, le navigateur les dessine en gris systeme, ce qui casse
   completement la page. */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }

.chip{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--fond);
  color: var(--doux);
  font-family: var(--corps);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s, border-color .22s, color .22s, transform .28s var(--ease);
}
.chip:hover{ background: rgba(255,255,255,.09); color: var(--texte); transform: translateY(-1px); }
.chip .eteint{ font-family: var(--mono); font-size: .74rem; }
.chip.active{
  background: rgba(94,224,138,.14);
  border-color: var(--trait-vif);
  color: var(--accent);
}
.chip.active .eteint{ color: var(--accent); opacity: .7; }

/* --------------------------------------------------------------- CHAMPS */
.champ{ display: grid; gap: 7px; margin-bottom: 16px; }
.champ label{
  font-size: .82rem;
  font-weight: 700;
  color: var(--doux);
  letter-spacing: -.01em;
}
.champ .aide{ font-size: .78rem; color: var(--eteint); }

/* Selecteur inverse : on style TOUT sauf ce qui doit garder son rendu
   natif. Enumerer les types un par un a deja laisse passer `search`, puis
   `tel` — chaque oubli donne un champ blanc au milieu d'une page sombre.
   Avec cette formulation, un type ajoute plus tard est couvert d'office.

   Les :not() sont enfermes dans un :where(), qui ne compte pour rien dans
   le calcul de specificite. Sans lui, ce selecteur pesait 0,7,1 : plus
   lourd que n'importe quelle classe, si bien qu'un `.recherche input{
   padding-left: 38px }` etait ignore en silence et que le texte du champ
   passait sous l'icone de loupe. Ici la regle ne pese que 0,0,1 et se
   laisse redefinir normalement. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"])),
select, textarea{
  width: 100%;
  padding: 12px 14px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: .95rem;
  transition: border-color .25s, background .25s;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  background: rgba(94,224,138,.06);
}
input::placeholder, textarea::placeholder{ color: var(--eteint); }

/* La croix native du champ de recherche est dessinee en sombre par le
   navigateur : invisible sur notre fond. On la remplace par la notre. */
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
input[type="search"]{ -webkit-appearance: none; appearance: none; }

/* Champ fichier visible : le bouton interne du navigateur reste natif, mais
   le cadre suit la charte. Le selecteur ::file-selector-button habille ce
   bouton sans avoir a masquer le champ. */
input[type="file"]{
  width: 100%;
  padding: 10px 12px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--doux);
  font-family: var(--corps);
  font-size: .88rem;
}
input[type="file"]::file-selector-button{
  margin-right: 12px;
  padding: 7px 14px;
  background: rgba(94,224,138,.13);
  border: 1px solid var(--trait-vif);
  border-radius: var(--r-petit);
  color: var(--accent);
  font-family: var(--corps);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover{ background: rgba(94,224,138,.2); }

/* Le remplissage automatique de Chrome impose son propre fond clair. On le
   neutralise par une ombre interne, seule methode qui fonctionne. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--texte);
  -webkit-box-shadow: 0 0 0 1000px #161a17 inset;
  caret-color: var(--texte);
  transition: background-color 9999s ease-in-out 0s;
}
textarea{ min-height: 130px; resize: vertical; line-height: 1.6; }

/* Saisie du code a 6 chiffres : chasse fixe et grande interlettre pour
   qu'on distingue chaque caractere sans effort. */
.code-saisie{
  font-family: var(--mono) !important;
  font-size: 1.6rem !important;
  letter-spacing: .5em;
  text-align: center;
  padding-left: .5em !important;
}

/* -------------------------------------------------------------- MESSAGES */
.message{
  padding: 12px 16px;
  border-radius: var(--r-moyen);
  font-size: .9rem;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.message--ko{ background: rgba(224,85,78,.10); border-color: rgba(224,85,78,.3); color: #ffb3ae; }
.message--ok{ background: rgba(94,224,138,.10); border-color: var(--trait-vif); color: var(--accent); }
.message--info{ background: var(--fond); border-color: var(--trait); color: var(--doux); }
.message[hidden]{ display: none !important; }

/* --------------------------------------------------------------- TABLEAU */
.tableau-cadre{
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  overflow: hidden;
  background: var(--panneau);
}
/* Un tableau large defile dans son propre cadre : le corps de page ne
   doit jamais defiler lateralement. */
.tableau-defile{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

table{ width: 100%; border-collapse: collapse; font-size: .89rem; }
thead th{
  position: sticky; top: 0;
  background: var(--panneau-haut);
  padding: 13px 16px;
  text-align: left;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eteint);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
tbody td{
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--doux);
  vertical-align: middle;
}
tbody tr:last-child td{ border-bottom: 0; }
tbody tr:hover td{ background: rgba(255,255,255,.025); color: var(--texte); }
td.num{ text-align: right; font-family: var(--mono); }
.vide{ padding: 40px 20px; text-align: center; color: var(--eteint); }

/* ------------------------------------------------------------ UTILITAIRES */
.rangee{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rangee--bout{ justify-content: space-between; }
.pile{ display: grid; gap: 14px; }
.doux{ color: var(--doux); }
.eteint{ color: var(--eteint); }
.petit{ font-size: .85rem; }
.centre{ text-align: center; }
.rien{ display: none !important; }

.saut-contenu{
  position: absolute; left: -9999px;
  padding: 12px 18px; background: var(--accent); color: var(--encre);
  border-radius: var(--r-petit); font-weight: 700; z-index: 999;
}
.saut-contenu:focus{ left: 16px; top: 16px; }

/* ------------------------------------------------------------- MOUVEMENT
   Les entrees ne sont pas toutes identiques : c'est le meme fondu applique
   partout qui trahit une page automatique. Trois variantes, choisies selon
   ce que le bloc raconte.
   Rien n'est masque tant que <html> ne porte pas .js : sans script, la page
   reste entierement lisible. */
.js .venir      { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .venir-cote { opacity: 0; transform: translateX(-22px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .venir-net  { opacity: 0; transform: scale(.97); transition: opacity .5s ease, transform .55s var(--ease); }
.js .vu{ opacity: 1; transform: none; }

/* Cascade legere a l'interieur d'un groupe. */
.js .cascade > *:nth-child(1){ transition-delay: .00s; }
.js .cascade > *:nth-child(2){ transition-delay: .07s; }
.js .cascade > *:nth-child(3){ transition-delay: .14s; }
.js .cascade > *:nth-child(4){ transition-delay: .21s; }
.js .cascade > *:nth-child(5){ transition-delay: .28s; }
.js .cascade > *:nth-child(6){ transition-delay: .35s; }
.js .cascade > *:nth-child(7){ transition-delay: .42s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .js .venir, .js .venir-cote, .js .venir-net{ opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 900px){
  .carte--large, .carte--haute{ grid-column: auto; grid-row: auto; }
  .cartes{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  body{ font-size: 15.5px; }
  .cartes{ grid-template-columns: 1fr; }
  .carte{ padding: 22px; }
  .panneau{ border-radius: var(--r-moyen); }
  .btn{ width: 100%; }
  .btn--discret{ width: auto; }
  /* Au doigt, les etats de survol restent colles : on les desarme. */
  .carte:hover{ transform: none; }
}

/* ------------------------------------------------------------- COOKIES
   Bandeau bas de page. Les deux boutons ont le même poids visuel : rendre
   « Refuser » moins visible que « Accepter » est précisément ce que la
   CNIL sanctionne. */
.cookies{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 300;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 900px;
  margin-inline: auto;
  padding: 20px 24px;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);

  opacity: 0;
  transform: translateY(18px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.cookies.visible{ opacity: 1; transform: none; }

.cookies__texte{ flex: 1; min-width: 260px; }
.cookies__texte h2{ font-size: 1.05rem; margin-bottom: 6px; }
.cookies__texte p{ color: var(--doux); font-size: .88rem; line-height: 1.6; margin: 0; }

.cookies__actions{ display: flex; gap: 10px; flex-shrink: 0; }
.cookies__actions .btn{ padding: 11px 22px; font-size: .9rem; }

@media (max-width: 640px){
  .cookies{ left: 12px; right: 12px; bottom: 12px; padding: 18px; gap: 14px; }
  .cookies__actions{ width: 100%; }
  .cookies__actions .btn{ flex: 1; }
}

@media (prefers-reduced-motion: reduce){
  .cookies{ transition: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   COMPOSANTS SANS CADRE
   ---------------------------------------------------------------------------
   Une bordure avec un fond dit : « ceci est un objet separe, sur lequel on
   agit ». Quand tout en porte une, plus rien ne le dit et la hierarchie
   s'aplatit. Le cadre est donc reserve au rail serveur, aux packs et aux
   formulaires. Tout le reste — le contenu editorial — se separe par le
   blanc et par un filet d'un pixel.
   =========================================================================== */

/* ---- liste editoriale : remplace les grilles de cartes ---- */
.edito{
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  /* Trois colonnes fixes, et non un auto-fit. Avec l'item « fort » qui
     occupe deux cellules, les huit blocs remplissent exactement trois
     rangees. En auto-fit, l'ecran large donnait quatre colonnes : le
     huitieme bloc se retrouvait seul sur une rangee vide aux trois quarts,
     ce qui se voit immediatement. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Cadre discret : pas de bordure au repos, seulement une surface a peine
   eclaircie. Le trait n'apparait qu'au survol, ce qui evite la grille de
   boites tout en donnant une assise a chaque bloc.
   La bordure est declaree transparente des le repos : sinon son apparition
   decalerait le contenu d'un pixel au survol. */
.edito__item{
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(255, 255, 255, .022);
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .32s, border-color .32s, transform .38s var(--ease);
}
.edito__item:hover{
  background: rgba(255, 255, 255, .042);
  border-color: var(--trait);
  transform: translateY(-2px);
}
.edito__item h3{
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  margin-bottom: 10px;
}
.edito__item p{
  color: var(--doux);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 46ch;
}
/* Un item peut peser plus que les autres : c'est la taille qui le dit,
   pas une bordure. */
.edito__item--fort{ grid-column: span 2; }
.edito__item--fort h3{ font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.edito__item--fort p{ font-size: 1.02rem; max-width: 60ch; }

/* ---- deux colonnes de texte, separees par un filet ---- */
/* Chaque colonne recoit la meme surface discrete que les blocs editoriaux.
   Le filet vertical qui les separait disparait : avec deux surfaces cote a
   cote, il ferait double emploi et alourdirait au lieu de separer. */
.colonnes{
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.colonnes > *{
  padding: clamp(24px, 2.8vw, 32px);
  background: rgba(255, 255, 255, .022);
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .32s, border-color .32s;
}
.colonnes > *:hover{
  background: rgba(255, 255, 255, .042);
  border-color: var(--trait);
}
.colonnes h3{
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.colonnes p, .colonnes li{ color: var(--doux); font-size: .95rem; line-height: 1.7; }

/* ---- listes ---- */
.liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

/* La puce est posee en absolu, PAS en flex.
   Mettre le <li> en display:flex ferait de chacun de ses enfants un element
   flex : un <strong> au milieu d'une phrase deviendrait un bloc separe, avec
   le gap insere autour. Le texte se disloquait mot par mot. */
.liste li{
  position: relative;
  padding-left: 20px;
  color: var(--doux);
  font-size: .95rem;
  line-height: 1.65;
}
.liste li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Liste numerotee : le rang compte, il s'affiche en chasse fixe. */
.liste--rang{ counter-reset: r; }
.liste--rang li{ padding-left: 34px; }
.liste--rang li::before{
  counter-increment: r;
  content: counter(r, decimal-leading-zero);
  top: .12em;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--accent);
}

/* ---- respiration ---- */
/* Le vide assume est ce qui distingue un site sur de lui d'un site qui
   essaie de convaincre. */
.section{ padding-block: clamp(88px, 14vh, 176px); }
.section--dense{ padding-block: clamp(64px, 9vh, 110px); }
.section--ample{ padding-block: clamp(112px, 19vh, 220px); }

/* ---- l'ecart typographique remplace les bordures ---- */
h2{ font-size: clamp(2rem, 4.6vw, 3.4rem); }
.surtitre{ margin-bottom: 22px; letter-spacing: .2em; }
.chapo{ font-size: 1.08rem; margin-top: 20px; }
.tete{ margin-bottom: clamp(44px, 7vh, 78px); }

@media (max-width: 900px){
  /* Deux colonnes, et l'item « fort » redevient normal : les huit blocs
     font alors quatre rangees pleines. */
  .edito{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edito__item--fort{ grid-column: auto; }
  /* Les colonnes s'empilent : rien de particulier a faire, chaque bloc
     porte deja sa propre surface. */
}

/* ---- utilitaires d'espacement ----
   Ils remplacent les style="margin-top:..." poses au juge. */
@media (max-width: 620px){
  .edito{ grid-template-columns: 1fr; }
}

.mt1{ margin-top: var(--e1); }
.mt2{ margin-top: var(--e2); }
.mt3{ margin-top: var(--e3); }
.mt4{ margin-top: var(--e4); }
.mt5{ margin-top: var(--e5); }

/* ---- largeurs de lecture ----
   Un texte long au-dela de ~68 caracteres devient penible a suivre : l'oeil
   perd la ligne au retour. Ces trois pas couvrent tous les cas du site. */
.mesure-s{ max-width: 38ch; }
.mesure-m{ max-width: 62ch; }
.mesure-l{ max-width: 860px; }

/* ---- bloc centre ----
   Centrer un bloc entier demande trois choses, et en oublier une suffit a
   ce que ca paraisse de travers : le texte centre, le conteneur centre par
   ses marges, et les enfants en ligne (pastilles, boutons) centres eux
   aussi par leur propre alignement. */
.centre-bloc{ text-align: center; }
.centre-bloc .surtitre{ justify-content: center; }
.centre-bloc .chapo{ margin-inline: auto; }
.centre-bloc h2{ margin-inline: auto; }

.chips--centre{ justify-content: center; }
.rangee--centre{ justify-content: center; }

/* Le contenu des pliants reste aligne a gauche : un paragraphe centre est
   penible a lire des qu'il depasse deux lignes. */
.pliants--centre{ margin-inline: auto; text-align: left; }

/* ---- en-tete de section aligne a droite ----
   Alterner gauche/droite d'une section a l'autre donne un rythme a la
   lecture : l'oeil repart du cote oppose a chaque fois, au lieu de
   descendre en ligne droite.

   Trois choses a basculer, et en oublier une se voit : le texte, le bloc
   lui-meme (par sa marge automatique) et le surtitre, dont le filet est un
   ::before et se retrouverait a gauche sans row-reverse. */
.bloc-droite{
  text-align: right;
  margin-left: auto;
}
.bloc-droite .surtitre{ flex-direction: row-reverse; }
.bloc-droite .chapo{ margin-left: auto; margin-right: 0; }
.bloc-droite h2{ margin-left: auto; }

@media (max-width: 780px){
  /* Sur telephone, le texte aligne a droite devient penible : chaque ligne
     commence a un endroit different et l'oeil cherche son depart. */
  .bloc-droite{ text-align: left; margin-left: 0; }
  .bloc-droite .surtitre{ flex-direction: row; }
  .bloc-droite .chapo{ margin-left: 0; }
}

/* ---- colonnes inversees ----
   Pour une section a deux colonnes, l'alternance ne se fait pas en alignant
   le texte a droite dans sa colonne — ce serait bancal — mais en deplacant
   la colonne elle-meme. On agit sur l'ordre visuel, pas sur le HTML : les
   lecteurs d'ecran et le clavier gardent l'ordre logique du document. */
.colonnes--inverse > *:first-child{ order: 2; }
.colonnes--inverse > *:last-child{ order: 1; }

@media (max-width: 780px){
  /* Empilees, les colonnes reprennent leur ordre naturel : le texte
     d'abord, l'illustration ensuite. */
  .colonnes--inverse > *:first-child,
  .colonnes--inverse > *:last-child{ order: 0; }
}

/* ===========================================================================
   MESSAGERIE
   Meme composant cote joueur et cote administration : un fil se lit de la
   meme facon des deux bords, seul l'alignement des bulles change.
   =========================================================================== */

.fils{ display: grid; gap: 8px; }

.fil{
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid transparent;
  border-radius: var(--r-moyen);
  text-align: left;
  font-family: var(--corps);
  color: var(--texte);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.fil:hover{ background: rgba(255, 255, 255, .05); border-color: var(--trait); }
.fil.actif{ background: rgba(94, 224, 138, .09); border-color: var(--trait-vif); }

.fil__tete{ display: flex; align-items: center; gap: 9px; }
.fil__sujet{ flex: 1; font-weight: 700; font-size: .93rem; letter-spacing: -.01em; }
.fil__extrait{
  color: var(--doux);
  font-size: .84rem;
  line-height: 1.5;
  /* Un extrait doit tenir sur deux lignes, jamais deformer la liste. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fil__pied{ display: flex; gap: 10px; color: var(--eteint); font-size: .74rem; font-family: var(--mono); }

/* Pastille de non-lus : elle ne s'affiche que s'il y a vraiment a lire. */
.fil__badge{
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--encre);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}
.fil__badge[hidden]{ display: none; }

/* ---- le fil ouvert ---- */
.discussion{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;             /* laisse le flex parent imposer la hauteur */
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 8px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.discussion::-webkit-scrollbar{ width: 8px; }
.discussion::-webkit-scrollbar-track{ background: transparent; }
.discussion::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }

.bulle{
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: .93rem;
  line-height: 1.6;
  /* Un message colle peut contenir de longues chaines sans espace : sans
     cela, une URL deborderait du cadre. */
  overflow-wrap: anywhere;
}
.bulle p{ margin: 0 0 .6rem; }
.bulle p:last-child{ margin-bottom: 0; }

/* Le joueur a droite, l'equipe a gauche — vu depuis l'espace joueur.
   L'administration inverse via .discussion--admin. */
.bulle--user{
  align-self: flex-end;
  background: rgba(94, 224, 138, .13);
  border: 1px solid var(--trait-vif);
}
.bulle--admin{
  align-self: flex-start;
  background: var(--fond);
  border: 1px solid var(--trait);
}
.discussion--admin .bulle--user{
  align-self: flex-start;
  background: var(--fond);
  border-color: var(--trait);
}
.discussion--admin .bulle--admin{
  align-self: flex-end;
  background: rgba(94, 224, 138, .13);
  border-color: var(--trait-vif);
}

.bulle__meta{
  margin-top: 7px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--eteint);
}

/* ---- piece jointe ---- */
.jointe{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 13px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--texte);
  font-size: .86rem;
  text-decoration: none;
}
.jointe:hover{ border-color: var(--trait-vif); color: var(--texte); }
.jointe__icone{ font-family: var(--mono); color: var(--accent); font-size: .9rem; }
.jointe__poids{ color: var(--eteint); font-family: var(--mono); font-size: .74rem; }

.jointe--image{ display: block; padding: 0; overflow: hidden; max-width: 260px; }
.jointe--image img{ display: block; width: 100%; height: auto; }

/* ---- zone d'ecriture ---- */
.repondre{ display: grid; gap: 10px; margin-top: 16px; }
.repondre textarea{ min-height: 84px; }
.repondre__barre{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repondre__fichier{ flex: 1; min-width: 180px; font-size: .84rem; }

@media (max-width: 640px){
  .bulle{ max-width: 92%; }
  .discussion{ max-height: 60vh; }
}

/* ---- barre d'ecriture facon messagerie ----
   Le champ fichier natif est laid et illisible sur fond sombre : on le
   masque et on declenche le meme selecteur par un bouton. Le fichier
   choisi apparait alors comme une pastille qu'on peut retirer. */
.ecrire{
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
}
.ecrire__zone{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.ecrire textarea{
  flex: 1;
  min-width: 0;              /* sans ca, un flex item refuse de retrecir */
  min-height: 52px;
  max-height: 200px;
  padding: 14px 16px;
  resize: none;              /* la hauteur suit le contenu, voir le script */
  line-height: 1.55;
  border-radius: var(--r-moyen);
}
.ecrire__fichier{ display: none; }

.attacher{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--r-petit);
  color: var(--doux);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.attacher:hover{ background: rgba(94,224,138,.12); color: var(--accent); border-color: var(--trait-vif); }

.ecrire__envoi{ flex-shrink: 0; height: 52px; padding-inline: 26px; }

/* Pastille du fichier choisi, avant envoi. */
.apercu-fichier{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: rgba(94,224,138,.09);
  border: 1px solid var(--trait-vif);
  border-radius: var(--r-petit);
  font-size: .86rem;
}
.apercu-fichier[hidden]{ display: none; }
.apercu-fichier__nom{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-fichier__poids{ color: var(--eteint); font-family: var(--mono); font-size: .74rem; }
.apercu-fichier button{
  background: none; border: 0; padding: 2px 6px;
  color: var(--doux); cursor: pointer; font-size: 1.05rem; line-height: 1;
  border-radius: var(--r-petit);
}
.apercu-fichier button:hover{ background: var(--fond); color: var(--texte); }

.ecrire__aide{
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--eteint); font-size: .76rem;
}
/* La zone d'ecriture est collee en bas du panneau : c'est la que l'oeil
   la cherche, et le fil defile au-dessus. */
.ecrire{ margin-top: auto; }

/* ---- boite de dialogue « nouveau message » ---- */
dialog.boite{
  width: min(460px, calc(100vw - 32px));
  padding: 26px;
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  color: var(--texte);
}
dialog.boite::backdrop{ background: rgba(0, 0, 0, .68); }
dialog.boite h2{ font-size: 1.15rem; margin-bottom: 18px; }

/* ---- separateur de jour dans le fil ---- */
.jour{
  align-self: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--fond);
  color: var(--eteint);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
}

/* ---- disposition du chat ----
   Liste etroite a gauche, conversation large a droite. L'erreur a ne pas
   refaire : reutiliser une grille prevue pour autre chose. Celle des
   commandes met 1fr a gauche et 340px a droite — le chat s'y retrouvait
   ecrase dans la colonne etroite.

   La hauteur est imposee, sinon le panneau se replie sur le volume de ses
   messages et un fil de deux lignes donne une boite minuscule. */
.grille-chat{
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: stretch;
}
.grille-chat > [data-discussion]{
  display: flex;
  flex-direction: column;
  min-height: min(620px, 72vh);
}
.grille-chat > [data-discussion] .discussion{ flex: 1; max-height: none; }
.grille-chat > [data-fils]{
  align-content: start;
  max-height: min(620px, 72vh);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.grille-chat > [data-fils]::-webkit-scrollbar{ width: 8px; }
.grille-chat > [data-fils]::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 99px; }

@media (max-width: 900px){
  .grille-chat{ grid-template-columns: 1fr; }
  .grille-chat > [data-fils]{ max-height: 280px; }
  .grille-chat > [data-discussion]{ min-height: 520px; }
}