/* peaux/halo.css — se charge APRES commun.css et le repeint.
   Direction : la famille du tuto, mais tenue. Tres sombre, sans-serif serre,
   une seule teinte et une lueur unique derriere le titre. Prete a recevoir
   un visuel 3D ou une boucle video en fond de bandeau.
   Aucune police externe : pile systeme, donc zero dependance. */

:root, :root:not([data-theme]){
  --papier:#07060c;
  --encre:#eeecf7;
  --gris:#8b87a6;
  --filet:#1a1730;
  /* --filet ne fait que 1,16 de contraste sur le fond : parfait pour un
     separateur, insuffisant pour la limite visible d'une commande, ou la
     norme demande 3:1. --filet-actif (3,26) sert aux boutons, aux cartes
     cliquables et aux champs — partout ou la bordure DIT qu'on peut agir. */
  --filet-actif:#605a8d;
  --pale:#272242;
  --rouge:#a78bfa;
  --serif:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

/* une seule lueur, en haut, la ou se trouve le titre. Pas de degrade partout :
   c'est la repetition de l'effet qui fait bon marche, pas l'effet. */
body::before{
  opacity:1;
  background:
    radial-gradient(1100px 620px at 50% -18%,
      color-mix(in srgb, var(--rouge) 22%, transparent), transparent 68%);
}
body{font-size:17.5px; line-height:1.68; letter-spacing:-.011em}

h1{
  font-size:clamp(38px,6.4vw,64px); line-height:1.06; letter-spacing:-.042em;
  font-weight:600; max-width:16ch; margin-top:50px;
}
h1 em{
  font-style:normal; color:transparent;
  background:linear-gradient(96deg, var(--rouge), #f0abfc 55%, var(--encre));
  -webkit-background-clip:text; background-clip:text;
}
h2{
  font-size:13px; text-transform:uppercase; letter-spacing:.2em;
  font-family:var(--mono); color:var(--gris);
  border-bottom:1px solid var(--filet); padding-bottom:14px; margin-top:78px;
}
h3{font-size:21px; font-weight:600; letter-spacing:-.02em}
.sous-titre{font-size:19.5px; color:var(--gris); line-height:1.66; max-width:33em}
.bandeau{border-bottom:1px solid var(--filet)}
.enseigne{letter-spacing:.2em; font-size:14px}

.onglets{gap:0 8px; border-bottom:1px solid var(--filet); padding-top:14px}
.onglets a{
  font-size:11.5px; letter-spacing:.1em; padding:7px 12px; border-bottom:0;
  border-radius:7px; margin-bottom:8px;
}
.onglets a:hover{background:var(--filet)}
.onglets a[aria-current="page"]{
  background:color-mix(in srgb, var(--rouge) 16%, transparent);
  color:var(--encre); border-bottom:0;
}

/* les entrees deviennent des cartes : c'est ce que fait le style, autant
   l'assumer proprement plutot qu'a moitie */
.piece{
  position:relative;
  border:1px solid var(--filet); border-radius:14px; padding:26px 28px;
  margin-bottom:14px; background:color-mix(in srgb, var(--encre) 3%, transparent);
  /* align-items:center centrait le numero dans toute la hauteur de la carte :
     sur une carte de 281 px, le « 01 » se retrouvait 103 px SOUS le titre
     qu'il numerote. Ca se lit comme un defaut d'alignement, pas comme un
     parti pris. Il revient se poser sur la ligne du titre. */
  align-items:start;
}
.piece:first-child{border-top:1px solid var(--filet)}
.sommaire{margin-top:22px}
.num{color:var(--rouge); font-size:12px; padding-top:7px}

/* Toute la carte devient cliquable. Mesure avant : le lien du titre couvrait
   1 a 3 % de la surface — une carte bordee de 774 px de large qui ne repond
   pas quand on clique sa description est une promesse non tenue. Le procede
   n'ajoute AUCUN lien a l'arbre d'accessibilite : c'est toujours le titre
   qu'un lecteur d'ecran annonce, sa zone de clic est simplement etendue. */
.piece h3 a{border-bottom:0}
.piece h3 a::after{content:""; position:absolute; inset:0}
.piece:hover{
  border-color:color-mix(in srgb, var(--rouge) 40%, var(--filet));
  background:color-mix(in srgb, var(--rouge) 5%, transparent);
}
.piece:hover h3 a{color:var(--rouge)}
/* Le halo de focus se pose sur la carte entiere plutot que sur les seuls mots
   du titre. Si :has() manque, la regle tombe et le lien garde son propre
   contour : rien a perdre. */
.piece:has(a:focus-visible){outline:3px solid var(--rouge); outline-offset:3px}
.piece:has(a:focus-visible) h3 a:focus-visible{outline:0}
.etiquettes span:not(.etat){
  border:1px solid var(--filet); border-radius:999px; padding:3px 10px; font-size:11px;
}
.etiquettes .etat{
  background:color-mix(in srgb, var(--rouge) 18%, transparent);
  border-radius:999px; padding:3px 10px; font-size:11px; color:var(--encre);
}

table.releve th{font-family:var(--mono); font-size:11px; letter-spacing:.12em}
.pt{font-family:var(--mono)}
.pas{
  border:1px solid var(--filet); border-left:2px solid var(--rouge);
  border-radius:12px; padding:24px 28px;
  background:color-mix(in srgb, var(--rouge) 7%, transparent);
}
.fiche dt{color:var(--rouge); letter-spacing:.12em}
.visuel img{border-radius:14px; border-color:var(--filet)}
.video-verticale video{border-radius:14px; border-color:var(--filet)}
.contact a{border-bottom-color:var(--rouge)}