/* ============================================================
   LE PANNEAU A VOLETS (com_vexillum 3.71.0)
   Un tableau d'aeroport : chaque chiffre et chaque lettre est un
   volet noir coupe en deux, qui bascule quand la valeur change.
   Construit par media/js/panneau.js sur tout .vex-panneau.
   Lisible sans les couleurs : tout est ECRIT (chiffres, unites,
   libelles) ; la couleur ambre des libelles ne fait que doubler.
   Sans JavaScript, la phrase .vp-texte reste affichee.
   ============================================================ */
/* 3.73.0 : les couleurs et la police sont partagees avec le grand panneau (.vex-tableau) */
.vex-panneau, .vex-tableau {
  --vp-fond: #0d0f10;
  --vp-volet: #1b1e20;
  --vp-volet2: #15181a;
  --vp-chiffre: #f4f1e8;
  --vp-libelle: #f2c14e;
  --vp-doux: #9aa3a8;
  --vp-police: 'Roboto Mono', 'DejaVu Sans Mono', Consolas, 'Liberation Mono', monospace;
}
.vex-panneau {
  --vp-fond: #0d0f10;
  --vp-volet: #1b1e20;
  --vp-volet2: #15181a;
  --vp-chiffre: #f4f1e8;
  --vp-libelle: #f2c14e;
  --vp-doux: #9aa3a8;
  --vp-h: clamp(38px, 9vw, 60px);          /* hauteur d'un volet de chiffre */
  --vp-hl: clamp(20px, 4.4vw, 28px);       /* hauteur d'un volet de libelle */
  --vp-police: 'Roboto Mono', 'DejaVu Sans Mono', Consolas, 'Liberation Mono', monospace;
  background: var(--vp-fond);
  color: var(--vp-chiffre);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin: 18px 0 24px;
  display: grid;
  gap: 16px;
  box-shadow: inset 0 0 0 1px #2a2f33;
  font-family: var(--vp-police);
  line-height: 1;
}
/* 3.72.0 : la taille des volets suit la largeur DU PANNEAU, pas celle de
   l'ecran. Dans une colonne etroite (accueil, a cote de l'image), des
   volets calcules sur l'ecran debordaient : les secondes etaient coupees
   (sa capture du 13/10/2026). Une ligne de compte a rebours fait environ
   7,6 hauteurs de volet + 80 px (separateurs, ecarts, marges).
   Navigateurs sans unites de conteneur (Safari < 16) : les tailles
   ci-dessus, calculees sur l'ecran, restent en place. */
@supports (width: 1cqi) {
  .vex-panneau { container-type: inline-size;
    --vp-h: clamp(24px, calc((100cqi - 80px) / 7.6), 60px);
    --vp-hl: clamp(14px, calc((100cqi - 40px) / 13.5), 28px); }
  /* telephone : les « : » sont caches (plus bas), les chiffres prennent leur place */
  @media (max-width: 420px) {
    .vex-panneau { --vp-h: clamp(24px, calc((100cqi - 60px) / 6.3), 60px); }
  }
}
.vex-panneau *, .vex-panneau *::before, .vex-panneau *::after { box-sizing: border-box; }
.vex-panneau .vp-texte { margin: 0; color: var(--vp-chiffre); font: 600 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
/* avec JavaScript : la phrase reste pour les lecteurs d'ecran, hors de la vue */
.vex-panneau.vp-pret .vp-texte {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* chaque ligne : le libelle en volets, puis les valeurs dessous, centres */
.vex-panneau .vp-ligne { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vex-panneau [hidden] { display: none !important; }
.vex-panneau .vp-mot { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.vex-panneau .vp-groupes { display: flex; align-items: flex-start; gap: 6px; }
.vex-panneau .vp-groupe { display: grid; justify-items: center; gap: 4px; }
.vex-panneau .vp-chiffres { display: flex; gap: 3px; }
.vex-panneau .vp-unite { font: 700 11px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: .12em; color: var(--vp-doux); text-transform: uppercase; }
.vex-panneau .vp-sep { font-weight: 700; font-size: calc(var(--vp-h) * .55); color: var(--vp-doux); align-self: center; padding-bottom: 14px; }
.vex-panneau .vp-barre { font-weight: 700; font-size: calc(var(--vp-h) * .6); color: var(--vp-doux); align-self: center; }

/* ---------- un volet ---------- */
:is(.vex-panneau, .vex-tableau) .vp-c {
  --h: var(--vp-h);
  position: relative; display: inline-block;
  width: calc(var(--h) * .72); height: var(--h);
  perspective: calc(var(--h) * 6);
  font-weight: 700; font-size: calc(var(--h) * .74); color: var(--vp-chiffre);
  /* 3.85.3 : une lettre qui change ne fait pas recalculer le reste de la page
     (la case a sa taille propre : largeur et hauteur fixees ici) */
  contain: layout size style;
}
.vex-panneau .vp-mot .vp-c { --h: var(--vp-hl); width: calc(var(--h) * .74); color: var(--vp-libelle); font-size: calc(var(--h) * .7); }
:is(.vex-panneau, .vex-tableau) .vp-c > span {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  background: var(--vp-volet); backface-visibility: hidden;
}
:is(.vex-panneau, .vex-tableau) .vp-c > span > b { display: block; height: var(--h); line-height: var(--h); text-align: center; font-weight: 700; }
:is(.vex-panneau, .vex-tableau) .vp-h, :is(.vex-panneau, .vex-tableau) .vp-fh { top: 0; border-radius: 4px 4px 0 0; }
:is(.vex-panneau, .vex-tableau) .vp-b, :is(.vex-panneau, .vex-tableau) .vp-fb { bottom: 0; border-radius: 0 0 4px 4px; background: var(--vp-volet2); }
:is(.vex-panneau, .vex-tableau) .vp-b > b, :is(.vex-panneau, .vex-tableau) .vp-fb > b { margin-top: calc(var(--h) / -2); }
/* la fente au milieu du volet */
:is(.vex-panneau, .vex-tableau) .vp-c::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: #000; z-index: 3;
}
:is(.vex-panneau, .vex-tableau) .vp-fh { transform-origin: 50% 100%; z-index: 2; visibility: hidden; }
:is(.vex-panneau, .vex-tableau) .vp-fb { transform-origin: 50% 0; z-index: 2; visibility: hidden; transform: rotateX(90deg); }
:is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne .vp-fh { visibility: visible; animation: vp-haut var(--vp-d, 160ms) ease-in forwards; }
:is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne .vp-fb { visibility: visible; animation: vp-bas var(--vp-d, 160ms) ease-out var(--vp-d, 160ms) forwards; }
/* 3.85.3 : la meme animation sous un second nom ; panneau.js passe de l'une a
   l'autre a chaque plaque : le nouveau nom relance l'animation sans forcer de
   mise en page */
:is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne2 .vp-fh { visibility: visible; animation: vp-haut2 var(--vp-d, 160ms) ease-in forwards; }
:is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne2 .vp-fb { visibility: visible; animation: vp-bas2 var(--vp-d, 160ms) ease-out var(--vp-d, 160ms) forwards; }
@keyframes vp-haut { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes vp-bas { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes vp-haut2 { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes vp-bas2 { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* le lien sous le panneau */
.vex-panneau .vp-lien { justify-self: center; font: 700 15px/1 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: #1a1304; background: var(--vp-libelle); border: 2px solid #ffe7a3; border-radius: 8px; padding: 10px 16px; text-decoration: none; }
.vex-panneau .vp-lien:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 420px) {
  .vex-panneau { padding: 12px 8px 10px; }
  .vex-panneau .vp-groupes { gap: 9px; }
  .vex-panneau .vp-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne .vp-fh, :is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne .vp-fb,
  :is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne2 .vp-fh, :is(.vex-panneau, .vex-tableau) .vp-c.vp-tourne2 .vp-fb { animation: none; visibility: hidden; }
}

/* ============================================================
   LE GRAND PANNEAU (3.73.0) : 4 lignes de 22 cases, au-dessus du
   compte a rebours. Construit par panneau.js sur tout .vex-tableau.
   La taille d'une case suit la largeur DU PANNEAU (unites de
   conteneur) : 22 cases tiennent toujours, du telephone au PC.
   Le haut-parleur (en bas a droite) dit son etat par sa FORME
   (ondes ou croix) et par son texte (aria-label, info-bulle).
   ============================================================ */
.vex-tableau {
  --vp-d: 90ms;                       /* le grand panneau bascule plus vite */
  --vt-c: 22;
  --vt-h: clamp(16px, calc((min(100vw, 1100px) - 110px) / 22 / .72), 54px);
  position: relative;
  background: var(--vp-fond);
  color: var(--vp-chiffre);
  border-radius: 12px;
  padding: 12px 12px 38px;
  margin: 14px 0 10px;
  box-shadow: inset 0 0 0 1px #2a2f33;
  font-family: var(--vp-police);
  line-height: 1;
}
@supports (width: 1cqi) {
  .vex-tableau { container-type: inline-size;
    --vt-h: clamp(14px, calc((100cqi - 24px - 42px) / 22 / .72), 64px); }
}
.vex-tableau *, .vex-tableau *::before, .vex-tableau *::after { box-sizing: border-box; }
.vex-tableau[hidden] { display: none !important; }
.vex-tableau .vt-texte { margin: 0; font: 600 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.vex-tableau.vt-pret .vt-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vex-tableau .vt-grille { display: grid; gap: 5px; }
.vex-tableau .vt-ligne { display: grid; grid-template-columns: repeat(var(--vt-c), minmax(0, 1fr)); gap: 2px; }
.vex-tableau .vp-c { --h: var(--vt-h); width: 100%; height: var(--h); perspective: calc(var(--h) * 6);
  font-weight: 700; font-size: calc(var(--h) * .72); color: var(--vp-chiffre); }
.vex-tableau .vp-c > span { border-radius: 0; }
.vex-tableau .vp-h, .vex-tableau .vp-fh { border-radius: 3px 3px 0 0; }
.vex-tableau .vp-b, .vex-tableau .vp-fb { border-radius: 0 0 3px 3px; }
.vex-tableau .vt-son {
  position: absolute; right: 8px; bottom: 6px; width: 30px; height: 26px; padding: 0; margin: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #cfd5d9; border: 1px solid #3a4045; border-radius: 6px; box-shadow: none;
}
.vex-tableau .vt-son:hover { border-color: var(--vp-libelle); color: #fff; background: transparent; }
.vex-tableau .vt-son:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vex-tableau .vt-son[aria-pressed="true"] { border-width: 2px; }
/* le compte a rebours colle sous le grand panneau */
.vex-tableau + .vex-panneau { margin-top: 0; }
@media (max-width: 420px) {
  .vex-tableau { padding: 8px 6px 36px; }
  .vex-tableau .vt-ligne { gap: 1px; }
  .vex-tableau .vt-grille { gap: 3px; }
}
@supports (width: 1cqi) {
  @media (max-width: 420px) { .vex-tableau { --vt-h: clamp(12px, calc((100cqi - 12px - 21px) / 22 / .72), 64px); } }
}