/* ---------------------------------------------------------------------------
   Logiciel metier Replaced — habillage « Glacier », le meme monde que
   www.replaced.ch : bleu nuit profond, aurore diffuse, surfaces de verre
   givre, halo froid sur les actions.

   Ecrit pour le telephone d'abord : c'est la que les salariees ouvrent la
   page, souvent le soir, souvent d'une main. Contrastes tenus, cibles larges.

   Les noms de classes n'ont pas bouge : aucune page PHP n'a ete touchee.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=Chakra+Petch:wght@600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* le fond : presque noir, legerement bleute */
  --abysse:#03060F; --nuit:#070C1A; --nuit-2:#0B1428; --marine:#111E3A;

  /* les deux lumieres : cyan glacier et violet electrique */
  --cyan:#5AE6FF; --cyan-2:#2BB8E0; --violet:#8B7BFF; --violet-2:#6C5CE0;
  --givre:#7FD4EE;  --glace:#D7ECF6; --neige:#F2FAFE;
  --accent:var(--cyan-2); --accent-2:var(--violet); --accent-clair:var(--cyan);

  /* surfaces de verre */
  --verre:rgba(90,230,255,.045);
  --verre-2:rgba(90,230,255,.025);
  --verre-fort:rgba(90,230,255,.10);
  --trait:rgba(90,230,255,.18);
  --trait-2:rgba(90,230,255,.34);

  /* textes */
  --ink:var(--glace); --ink-soft:#9FBCCE; --ink-faint:#6A8598;

  /* etats, tenus dans la meme famille froide */
  --ok:#3DF5C0;   --ok-soft:rgba(61,245,192,.13);
  --wait:#FFC46B; --wait-soft:rgba(255,196,107,.13);
  --mal:#FF7A9C;  --mal-soft:rgba(255,122,156,.13);

  /* compatibilite avec l'ancien nommage */
  --ground:var(--nuit); --surface:var(--verre); --surface-2:var(--verre-2);
  --line:var(--trait); --line-2:var(--trait-2);
  --navy:var(--accent); --navy-2:var(--accent-2);
  --accent-soft:rgba(111,169,228,.15);
  --band-soft:var(--givre);

  --halo: 0 14px 34px -16px rgba(90,230,255,.65), 0 0 0 1px rgba(90,230,255,.18) inset;

  /* Hauteur de la barre du haut sur telephone. Le menu colle juste dessous
     et s'en sert : les deux valeurs ne doivent jamais diverger. */
  --h-barre: 54px;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  /* iOS grossit tout seul le texte en paysage : on le lui interdit. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sur html et pas sur body : pose sur body, il en ferait un conteneur de
     defilement et la barre du haut cesserait de coller. */
  overflow-x: hidden;
  /* Une ancre ne doit pas atterrir sous la barre collee. Sur telephone le menu
     s'y ajoute : la valeur est reprise plus bas. */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(90,230,255,.16);
  /* Encoche et bords arrondis : seuls les cotes se traitent ici. Le haut et le
     bas sont repris par la barre et le pied, qui sont colles. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: var(--nuit);
  background-image:
    radial-gradient(1100px 620px at 10% -10%, rgba(43,184,224,.22), transparent 62%),
    radial-gradient(900px 520px at 92% 2%,   rgba(139,123,255,.20), transparent 60%),
    radial-gradient(1200px 800px at 50% 110%, rgba(17,30,58,.90),   transparent 72%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh; /* la barre d'adresse d'iOS ne doit pas couper le fond */
}

/* --- le bandeau du haut ---------------------------------------------------- */

.barre {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  padding-top: calc(13px + env(safe-area-inset-top, 0px));
  background: rgba(6,13,29,.72);
  border-bottom: 1px solid var(--trait);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
.barre .marque {
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .01em; color: var(--neige);
}
.barre .marque .fin { color: var(--givre); font-weight: 400; }
.barre .qui { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.barre .sortir {
  font-size: 12.5px; color: var(--glace); text-decoration: none;
  border: 1px solid var(--trait-2); border-radius: 100px; padding: 6px 14px;
  transition: background .2s, border-color .2s;
}
.barre .sortir:hover { background: var(--verre-fort); border-color: var(--givre); }

/* --- la charpente ---------------------------------------------------------- */

.appli {
  display: grid; grid-template-columns: 208px 1fr;
  min-height: calc(100vh - 104px);
  min-height: calc(100dvh - 104px);
  align-content: start; /* sinon les rangees s'etirent et gonflent le menu */
}
.menu {
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--trait);
  background: linear-gradient(180deg, rgba(10,22,48,.55), rgba(10,22,48,0));
}
.menu a {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
  padding: 10px 12px; border-radius: 11px; font-weight: 500;
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.menu a:hover { background: var(--verre); color: var(--glace); }
.menu a .ic {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ink-faint); transition: background .2s, box-shadow .2s;
}
.menu a.on {
  background: var(--verre-fort); color: var(--neige);
  border-color: var(--trait-2); font-weight: 600;
}
.menu a.on .ic { background: var(--cyan); box-shadow: 0 0 12px 3px rgba(90,230,255,.75); }

.corps { padding: 26px 26px 40px; min-width: 0; }
.seul  { padding: 40px 18px; }

.pied { padding: 18px 18px calc(26px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12px; color: var(--ink-faint); }

/* --- titres et blocs ------------------------------------------------------- */

h1 {
  font-family: 'Chakra Petch', sans-serif; font-size: 25px; font-weight: 600;
  margin: 0 0 5px; letter-spacing: -.015em; color: var(--neige);
}
h2 { font-family: 'Chakra Petch', sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.sous { color: var(--ink-faint); font-size: 13px; margin: 0 0 22px; }
a { color: var(--accent-clair); }

.panneau {
  background: var(--verre); border: 1px solid var(--trait); border-radius: 16px;
  overflow: hidden; margin-bottom: 18px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -32px rgba(0,0,0,.9);
}
.panneau .tete {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--verre-2); border-bottom: 1px solid var(--trait);
}
.panneau .tete h3 {
  font-family: 'Chakra Petch', sans-serif; font-size: 12.5px; font-weight: 600; margin: 0;
  letter-spacing: .05em; text-transform: uppercase; color: var(--givre);
}
.panneau .tete .compte { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.panneau .dedans { padding: 16px; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px; margin-bottom: 22px; }
.chiffre {
  background: var(--verre); border: 1px solid var(--trait); border-radius: 16px; padding: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
}
.chiffre::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(90,230,255,.55), var(--violet), transparent);
}
.chiffre .n {
  font-family: 'Chakra Petch', sans-serif; font-size: 29px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--neige);
}
.chiffre .t { font-size: 12px; color: var(--ink-soft); margin-top: 7px; }
.chiffre.attention .n { color: var(--wait); }

/* --- tableaux -------------------------------------------------------------- */

.defile { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.liste th, table.liste td { padding: 11px 16px; text-align: left; border-top: 1px solid var(--trait); }
table.liste th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-weight: 700; border-top: none; white-space: nowrap;
}
table.liste td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
table.liste tr:hover td { background: var(--verre-2); }
table.liste a { color: var(--accent-clair); text-decoration: none; font-weight: 600; }
table.liste a:hover { text-decoration: underline; }

.etiquette { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }
.etiquette.actif   { background: var(--ok-soft);   color: var(--ok); }
.etiquette.archive { background: var(--verre-fort); color: var(--ink-faint); }
.etiquette.attente { background: var(--wait-soft); color: var(--wait); }
.etiquette.chef    { background: var(--accent-soft); color: var(--accent-clair); }
/* Ce qui ne va pas du tout : un travail qui s'est tu, un contrat qui s'arrete. */
.etiquette.mal     { background: var(--mal-soft);  color: var(--mal); }

/* --- formulaires ----------------------------------------------------------- */

label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 7px; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], input[type=month], select, textarea {
  width: 100%; font: inherit; color: var(--neige);
  padding: 12px 14px; border: 1px solid var(--trait-2); border-radius: 12px;
  background: rgba(6,13,29,.45);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-2); background: rgba(6,13,29,.65);
  box-shadow: 0 0 0 3px rgba(111,169,228,.22);
}
input.code {
  font-family: 'Chakra Petch', sans-serif; font-size: 27px; letter-spacing: .3em;
  text-align: center; font-variant-numeric: tabular-nums; color: var(--accent-clair);
}

button {
  font: inherit; font-weight: 600; cursor: pointer;
  margin-top: 20px; padding: 13px 18px; width: 100%;
  color: #04101F; border: 0; border-radius: 12px;
  background: linear-gradient(120deg, var(--cyan) 0%, #7FD0FF 45%, var(--violet) 100%);
  box-shadow: var(--halo);
  transition: transform .18s, box-shadow .22s, filter .2s;
}
button:hover { transform: translateY(-1px); filter: brightness(1.06); }
button:active { transform: translateY(0); }
button.discret {
  background: var(--verre-fort); color: var(--glace);
  border: 1px solid var(--trait-2); box-shadow: none;
}
button.discret:hover { background: var(--verre); filter: none; }
button.lien {
  background: none; border: none; color: var(--accent-clair); text-decoration: underline;
  padding: 0; margin-top: 14px; width: auto; font-weight: 500; font-size: 13.5px; box-shadow: none;
}
button.lien:hover { background: none; transform: none; color: var(--neige); }
.secondaire { text-align: center; }

.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* --- messages -------------------------------------------------------------- */

.mot { margin: 0 0 16px; padding: 12px 15px; border-radius: 12px; font-size: 13.5px;
       border: 1px solid transparent; }
.mot.erreur { background: var(--mal-soft);  color: var(--mal);  border-color: rgba(255,139,139,.3); }
.mot.avis   { background: var(--accent-soft); color: var(--accent-clair); border-color: var(--trait-2); }
.mot.bien   { background: var(--ok-soft);   color: var(--ok);   border-color: rgba(91,214,174,.3); }

/* --- la carte de connexion ------------------------------------------------- */

.carte-connexion {
  max-width: 410px; margin: 0 auto;
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  border: 1px solid var(--trait-2); border-radius: 22px;
  padding: 32px 28px 34px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 80px -50px #000, 0 0 110px -48px rgba(90,230,255,.85);
}
.carte-connexion .enseigne {
  margin: 0 0 16px; font-family: 'Chakra Petch', sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-clair); background: var(--accent-soft); display: inline-block;
  padding: 6px 13px; border-radius: 100px; border: 1px solid var(--trait-2);
}
.carte-connexion h1 { font-size: 23px; margin-bottom: 12px; }
.explique { color: var(--ink-soft); font-size: 14px; margin: 0 0 4px; }

/* --- depot de fichiers ----------------------------------------------------- */

input[type=file]{
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink-soft);
  padding: 14px; border: 1.5px dashed var(--trait-2); border-radius: 12px;
  background: var(--verre-2); cursor: pointer;
}
input[type=file]:hover{ border-color: var(--givre); background: var(--verre); }
input[type=file]::file-selector-button{
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  margin-right: 12px; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--trait-2); background: var(--verre-fort); color: var(--glace);
}
table.liste form{ display: inline; }

/* --- les tuiles de l'accueil salariee -------------------------------------- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.tuile {
  display: flex; flex-direction: column; gap: 4px; min-height: 104px;
  background: var(--verre); border: 1px solid var(--trait); border-radius: 16px;
  padding: 16px 15px; text-decoration: none; color: var(--ink);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .2s, border-color .2s, box-shadow .25s, background .2s;
  position: relative; overflow: hidden;
}
a.tuile:hover {
  transform: translateY(-2px); border-color: var(--trait-2); background: var(--verre-fort);
  box-shadow: 0 22px 44px -30px rgba(111,169,228,.9);
}
.tuile b { font-family: 'Chakra Petch', sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--neige); }
.tuile em { font-style: normal; font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.tuile .pastille {
  align-self: flex-start; margin-top: auto;
  font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px;
  background: var(--verre-fort); color: var(--ink-soft);
}
.tuile .pastille.vert   { background: var(--ok-soft);   color: var(--ok); }
.tuile .pastille.alerte { background: var(--wait-soft); color: var(--wait); }
.tuile.bientot { background: transparent; border-style: dashed; }
.tuile.bientot b, .tuile.bientot em { color: var(--ink-faint); }

/* --- une rangee de document ------------------------------------------------ */

.rang {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--trait);
  transition: background .2s;
}
.rang:hover { background: var(--verre-2); }
.rang:first-of-type { border-top: none; }
.rang-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rang-txt b { font-size: 14px; font-weight: 600; color: var(--glace); }
.rang-txt span { font-size: 11.5px; color: var(--ink-faint); }
.rang-bouton {
  margin-left: auto; flex: none; text-decoration: none;
  font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 100px;
  background: var(--verre-fort); color: var(--glace); border: 1px solid var(--trait-2);
  transition: background .2s, border-color .2s, color .2s;
}
.rang-bouton:hover { background: var(--accent-clair); color: #04101F; border-color: var(--accent-clair); }

.bouton-lien {
  display: inline-block; margin-top: 14px; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 12px;
  color: #04101F; background: linear-gradient(120deg, var(--cyan) 0%, #7FD0FF 45%, var(--violet) 100%);
  box-shadow: var(--halo);
}

textarea { resize: vertical; min-height: 76px; font-family: inherit; }

/* --- les onglets ----------------------------------------------------------- */

.onglets {
  display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto;
  border-bottom: 1px solid var(--trait); padding-bottom: 0;
}
.onglets a {
  flex: none; text-decoration: none; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding: 11px 16px; border-radius: 11px 11px 0 0;
  border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
  transition: background .2s, color .2s;
}
.onglets a:hover { background: var(--verre-2); color: var(--glace); }
.onglets a.on {
  background: var(--verre-fort); color: var(--neige);
  border-color: var(--trait); border-bottom: 1px solid transparent;
  box-shadow: inset 0 2px 0 var(--accent-clair);
}

/* --- une journee de planning ------------------------------------------------ */

.jour { border-top: 1px solid var(--trait); padding: 13px 16px; }
.jour:first-of-type { border-top: none; }
.jour-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.jour-tete b { font-family: 'Chakra Petch', sans-serif; font-size: 13.5px; font-weight: 600;
               text-transform: capitalize; color: var(--givre); }

.vacation {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; margin-top: 8px;
  background: var(--verre-2); border: 1px solid var(--trait);
}
.vacation.faite  { background: var(--ok-soft); border-color: rgba(91,214,174,.3); }
.vacation.avenir { opacity: .55; }
.v-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v-txt b { font-family: 'Chakra Petch', sans-serif; font-size: 14px; font-weight: 600;
           font-variant-numeric: tabular-nums; color: var(--neige); }
.v-txt span { font-size: 11.5px; color: var(--ink-faint); }
.vacation form { margin-left: auto; flex: none; }

.mini-vert, .mini-gris {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  width: auto; margin: 0; padding: 9px 17px; border-radius: 100px;
}
.mini-vert { background: linear-gradient(120deg, #6BFFD9, var(--ok)); color: #01261D; border: 0;
             box-shadow: 0 12px 26px -14px rgba(61,245,192,.95); }
.mini-gris { background: var(--verre-fort); color: var(--glace); border: 1px solid var(--trait-2);
             box-shadow: none; }
.mini-gris:hover { background: var(--verre); }

/* --- le solde de vacances, en gros, dans le formulaire ---------------------- */

.compteur-vacances {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 20px; border-radius: 16px; margin-bottom: 6px;
  background: linear-gradient(120deg, rgba(90,230,255,.16), rgba(139,123,255,.12));
  border: 1px solid var(--trait-2);
}
.compteur-vacances b {
  font-family: 'Chakra Petch', sans-serif; font-size: 33px; font-weight: 600; color: var(--accent-clair);
  line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(90,230,255,.65);
}
.compteur-vacances span { font-size: 12.5px; color: var(--ink-soft); }

/* --- le bandeau d'apercu : la direction regarde l'espace d'une salariee ----- */

.bandeau-apercu {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 11px 18px; background: var(--wait-soft); color: var(--wait);
  border-bottom: 1px solid rgba(240,188,107,.3); font-size: 13px;
}
.bandeau-apercu strong { color: #FFD79A; }
.bandeau-apercu a { margin-left: auto; color: var(--wait); font-weight: 600; }

/* --- telephone ------------------------------------------------------------- */

@media (max-width: 720px) {
  /* 16 px, pas un dixieme de moins : en dessous, Safari sur iPhone zoome tout
     seul des qu'on touche un champ, et la page part de travers. */
  body { font-size: 16px; }

  .appli { grid-template-columns: 1fr; }

  /* La barre garde une hauteur connue, parce que le menu vient se coller juste
     dessous et doit savoir a quelle hauteur s'arreter. */
  .barre {
    height: calc(var(--h-barre) + env(safe-area-inset-top, 0px));
    padding: 0 16px; padding-top: env(safe-area-inset-top, 0px);
  }
  .barre .qui { display: none; }
  .barre .sortir { margin-left: auto; padding: 9px 15px; }

  /* Le menu reste sous le pouce. Avant, il fallait remonter toute la page pour
     changer d'ecran ; maintenant il suit. */
  .menu {
    position: sticky; top: calc(var(--h-barre) + env(safe-area-inset-top, 0px));
    z-index: 19;
    flex-direction: row; overflow-x: auto; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--trait);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px) * 0);
    background: rgba(6,13,29,.80);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scroll-padding-left: 12px;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a {
    white-space: nowrap; flex: none; scroll-snap-align: start;
    min-height: 44px; padding: 0 15px; align-items: center;
  }
  .corps { padding: 20px 16px 36px; }
  .seul { padding: 30px 16px; }
  /* la barre et le menu, cumules */
  html { scroll-padding-top: 116px; }
  h1 { font-size: 22px; }
  .chiffre .n { font-size: 26px; }
  .carte-connexion { padding: 26px 22px 28px; }

  /* Les bandeaux : le lien de droite tombait seul sur une ligne, colle au bord.
     Sur telephone il se met simplement a la suite du texte. */
  .bandeau-demo, .bandeau-signer, .bandeau-apercu { padding: 10px 16px; font-size: 13px; }
  .bandeau-demo a, .bandeau-apercu a, .bandeau-signer a { margin-left: 0; }

  /* Cibles au doigt : 44 px, la regle commune a Apple et a Android. */
  .rang-bouton, .mini-vert, .mini-gris, .onglets a, .bouton-lien {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .panier-pas button { width: 40px; height: 40px; }

  /* Une ligne d'heures : l'horaire d'un cote, les boutons de l'autre, ca tenait
     mal en 390 px et « + heures » se coupait en deux. On empile. */
  .vacation, .rang {
    flex-wrap: wrap; align-items: flex-start; gap: 10px;
  }
  .vacation .v-txt, .rang .rang-txt { flex: 1 1 100%; }
  .vacation form, .vacation .mini-gris { margin-left: 0; }
  .vacation form { flex: 1 1 auto; }
  .vacation form button { width: 100%; }
  .rang .rang-bouton { margin-left: 0; width: 100%; }

  /* Le panneau et ses actions de tete. */
  .panneau .tete { flex-wrap: wrap; row-gap: 4px; }
  .panneau .tete .compte { margin-left: auto; }

  /* Les onglets defilent, comme le menu, sans barre grise au milieu. */
  .onglets { scroll-snap-type: x proximity; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* ===========================================================================
   COUCHE FUTURISTE — 17.09.2026
   Une grille froide en fond, une aurore qui derive lentement, des chiffres en
   Orbitron et des angles marques aux coins des panneaux. Tout est decoratif :
   rien ici ne porte d'information, donc rien ne se perd si le navigateur est
   vieux ou si la personne a demande moins d'animations.
   =========================================================================== */

body::before {
  content: ""; position: fixed; inset: -20vmax; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38vmax 38vmax at 20% 16%, rgba(90,230,255,.20), transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 64%, rgba(139,123,255,.20), transparent 62%),
    radial-gradient(24vmax 24vmax at 58% 10%, rgba(61,245,192,.08), transparent 60%);
  animation: derive 44s ease-in-out infinite alternate;
  will-change: transform;
}

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(90,230,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,230,255,.07) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120vmax 90vmax at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120vmax 90vmax at 50% 0%, #000 20%, transparent 78%);
}

@keyframes derive {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* La barre est volontairement absente de cette liste : elle est « sticky », et
   lui repasser position:relative la decollait — le bandeau du haut disparaissait
   des qu'on faisait defiler, sur telephone comme au bureau. Son z-index lui
   vient deja de sa propre regle. */
.appli, .seul, .pied, .bandeau-apercu { position: relative; z-index: 1; }

/* --- la marque, en lettres d'enseigne --------------------------------------- */

.barre .marque {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .22em; color: var(--neige);
  text-shadow: 0 0 24px rgba(90,230,255,.7);
}
.barre .marque .fin {
  font-family: 'Hanken Grotesk', sans-serif; text-transform: none;
  letter-spacing: .01em; font-size: 12.5px; color: var(--givre);
}

.carte-connexion .enseigne {
  font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: .3em;
}

/* --- les chiffres, en machine ------------------------------------------------ */

.chiffre .n, .compteur-vacances b, .v-txt b, input.code, .tuile .pastille {
  font-family: 'Orbitron', sans-serif;
}
.chiffre .n { font-weight: 600; letter-spacing: .01em; color: var(--neige);
               text-shadow: 0 0 28px rgba(90,230,255,.5); }
.compteur-vacances b { font-weight: 700; }
.v-txt b { font-weight: 600; font-size: 13.5px; letter-spacing: .02em; }
.tuile .pastille { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
input.code { font-weight: 700; }

/* --- un titre qui s'allume --------------------------------------------------- */

h1 {
  background: linear-gradient(100deg, #FFFFFF 6%, var(--cyan) 48%, var(--violet) 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--neige);
  letter-spacing: -.01em;
}

/* --- les coins marques des panneaux ----------------------------------------- */

.panneau, .chiffre, .tuile, .carte-connexion { position: relative; }
.panneau::before, .chiffre::before, .tuile::before, .carte-connexion::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px;
  border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan);
  border-top-left-radius: 16px; opacity: .55; pointer-events: none;
}
.carte-connexion::before, .carte-connexion::after {
  width: 26px; height: 26px; border-width: 1.5px;
  border-top-left-radius: 22px; border-bottom-right-radius: 22px; opacity: .8;
}
.panneau::after, .tuile::after, .carte-connexion::after {
  content: ""; position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px;
  border-bottom: 1px solid var(--violet); border-right: 1px solid var(--violet);
  border-bottom-right-radius: 16px; opacity: .3; pointer-events: none;
}
a.tuile:hover::after { opacity: .85; }

/* --- les boutons, avec leur reflet ------------------------------------------ */

button, .bouton-lien {
  letter-spacing: .03em;
  position: relative; overflow: hidden;
}
button::after, .bouton-lien::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 50%; width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}
button.lien::after, button.discret::after { display: none; }

.mini-vert { letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }

/* --- le menu, avec sa barre lumineuse ---------------------------------------- */

.menu a.on { position: relative; }
.menu a.on::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px 2px rgba(90,230,255,.85);
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* --- le rappel des documents a signer, sur toutes les pages ----------------- */
.bandeau-signer {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 11px 18px; font-size: 13px;
  background: linear-gradient(90deg, rgba(255,196,107,.16), rgba(255,122,156,.10));
  border-bottom: 1px solid rgba(255,196,107,.35);
  color: var(--wait); position: relative; z-index: 1;
}
.bandeau-signer strong { color: #FFD79A; }
.bandeau-signer a {
  color: #04101F; background: var(--wait); text-decoration: none;
  font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 100px;
}
.bandeau-signer a:hover { filter: brightness(1.08); }

/* --- le catalogue : on commande en regardant, pas en ecrivant -------------- */
.grille-produits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.grille-produits[hidden] { display: none; }
.carte-produit {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--verre); border: 1px solid var(--trait); border-radius: 14px;
  padding: 12px 10px; cursor: pointer; width: auto; margin: 0;
  color: var(--ink); font: inherit; text-align: center;
  transition: transform .18s, border-color .2s, background .2s;
  box-shadow: none;
}
.carte-produit::after { display: none; }
.carte-produit:hover { transform: translateY(-2px); border-color: var(--cyan); background: var(--verre-fort); }
.carte-produit img {
  width: 100%; height: 86px; object-fit: contain; background: #fff;
  border-radius: 8px; padding: 4px;
}
.carte-produit b { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--glace); }
.carte-produit em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.carte-produit .sans-photo {
  width: 100%; height: 86px; display: flex; align-items: center; justify-content: center;
  background: var(--verre-2); border: 1px dashed var(--trait-2); border-radius: 8px;
  font-size: 10.5px; color: var(--ink-faint);
}
.carte-produit .formats { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.carte-produit .formats button {
  width: auto; margin: 0; padding: 4px 11px; border-radius: 100px;
  font-size: 11px; font-weight: 600; color: var(--glace);
  background: var(--verre-fort); border: 1px solid var(--trait-2); box-shadow: none;
}
.carte-produit .formats button::after { display: none; }
.carte-produit .formats button:hover { background: var(--cyan); color: #04101F; border-color: var(--cyan); transform: none; }

/* --- signer avec le doigt --------------------------------------------------- */
.zone-signature { position: relative; margin-top: 4px; }
.zone-signature canvas {
  width: 100%; height: 170px; display: block; touch-action: none; cursor: crosshair;
  background: #fff; border: 1px solid var(--trait-2); border-radius: 12px;
}
.zone-signature .mini-gris { position: absolute; right: 10px; bottom: 10px; }
.trace-signature {
  display: block; margin-top: 14px; max-width: 320px; width: 100%;
  background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 6px;
}


/* --- la visite de demonstration -------------------------------------------- */
.bandeau-demo {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 11px 18px; font-size: 13px; position: relative; z-index: 1;
  background: linear-gradient(90deg, rgba(90,230,255,.14), rgba(139,123,255,.12));
  border-bottom: 1px solid var(--trait-2); color: var(--glace);
}
.bandeau-demo strong { color: var(--cyan); }
.bandeau-demo a {
  margin-left: auto; color: #04101F; background: var(--cyan); text-decoration: none;
  font-weight: 600; font-size: 12px; padding: 6px 14px; border-radius: 100px;
}


/* --- le panier de commande -------------------------------------------------- */
.panier { margin-top: 6px; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.panier-vide { padding: 14px 16px; font-size: 13px; color: var(--ink-faint); }
.panier-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--trait);
}
.panier-ligne:first-child { border-top: none; }
.panier-ligne b { font-size: 13.5px; font-weight: 600; color: var(--glace); }
.panier-pas { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.panier-pas button {
  width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%;
  font-size: 16px; font-weight: 700; line-height: 1; color: var(--glace);
  background: var(--verre-fort); border: 1px solid var(--trait-2); box-shadow: none;
}
.panier-pas button::after { display: none; }
.panier-pas button:hover { background: var(--cyan); color: #04101F; border-color: var(--cyan); transform: none; }
.panier-pas em {
  font-style: normal; font-family: 'Orbitron', sans-serif; font-size: 14px;
  min-width: 26px; text-align: center; color: var(--neige);
}
.panier-pas .panier-x { font-size: 13px; color: var(--ink-faint); }
.panier-pas .panier-x:hover { background: var(--mal); border-color: var(--mal); color: #1A0508; }


/* ===========================================================================
   LE TELEPHONE POUR DE BON — 21.09.2026

   L'espace salarie s'ouvre presque toujours sur un telephone, un iPhone ou un
   Android, souvent le soir, d'une main. Ce qui suit ne change rien au bureau :
   tout est sous condition de taille d'ecran ou d'orientation.
   =========================================================================== */

/* --- ce qu'on touche ------------------------------------------------------- */

/* Pas d'attente avant qu'un bouton reagisse, et pas de zoom par double tape
   sur les commandes. */
button, a, label, input, select, textarea, summary { touch-action: manipulation; }

/* --- les champs, vus d'un iPhone ------------------------------------------- */

@media (max-width: 720px) {
  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=time], input[type=number], input[type=month], input[type=password],
  select, textarea, button, .bouton-lien {
    font-size: 16px;   /* la limite en dessous de laquelle Safari zoome */
  }
  input[type=text], input[type=email], input[type=tel], input[type=date],
  input[type=time], input[type=number], input[type=month], select {
    min-height: 48px;  /* un doigt, pas une souris */
  }
  input.code { font-size: 30px; letter-spacing: .28em; }
  label { font-size: 12px; margin: 18px 0 8px; }
  textarea { min-height: 110px; }
  button { padding: 15px 18px; }

  /* Les cases a cocher du document a signer : minuscules par defaut sur
     Android, et impossibles a viser. */
  input[type=checkbox], input[type=radio] {
    width: 22px; height: 22px; accent-color: var(--cyan); vertical-align: -4px;
  }
}

/* iOS dessine ses propres listes deroulantes et ignore notre fond : on lui
   retire l'habillage et on repose la fleche nous-memes. */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--givre) 50%),
    linear-gradient(135deg, var(--givre) 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Les champs de date et d'heure d'iOS arrivent avec leur propre hauteur et se
   collent a gauche : on les remet dans le moule des autres champs. */
input[type=date], input[type=time], input[type=month] {
  -webkit-appearance: none; appearance: none;
  display: block; text-align: left;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value { text-align: left; }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8); cursor: pointer; padding: 6px;
}

/* --- un tableau ne tient pas dans 390 px ------------------------------------ */

/* La feuille d'heures a cinq colonnes. Sur telephone il faut la faire glisser
   du doigt pour en voir la moitie. Marquee « cartes », elle devient une pile de
   lignes ou chaque valeur porte son intitule (l'attribut data-t, pose en PHP). */
@media (max-width: 560px) {
  table.liste.cartes, table.liste.cartes tbody { display: block; width: 100%; }
  table.liste.cartes thead { display: none; }
  table.liste.cartes tr {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
    padding: 12px 16px; border-top: 1px solid var(--trait);
  }
  table.liste.cartes tbody tr:first-child { border-top: none; }
  table.liste.cartes td {
    display: block; padding: 2px 0; border: none; text-align: left;
    grid-column: 1 / -1; font-size: 14px;
  }
  table.liste.cartes td.nombre { text-align: left; }
  table.liste.cartes td[data-t]::before {
    content: attr(data-t) " · ";
    color: var(--ink-faint); font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; font-weight: 700;
  }
  /* La premiere colonne, le jour, fait le titre de la carte. */
  table.liste.cartes td:first-child {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600; color: var(--givre); font-size: 14.5px; margin-bottom: 2px;
  }
  table.liste.cartes td:first-child::before { content: none; }
  table.liste.cartes td:empty { display: none; }
}

/* --- ce qui coute cher a un telephone --------------------------------------- */

/* Le fond fixe, la grille et l'aurore qui derive sont de la decoration. Sur un
   Android d'entree de gamme ils font sauter le defilement et vident la
   batterie. On les allege sans rien perdre d'utile. */
@media (max-width: 720px) {
  body {
    background-attachment: scroll;   /* fixed saccade, ou ne marche pas, sur iOS */
    background-image:
      radial-gradient(760px 420px at 12% -8%, rgba(43,184,224,.20), transparent 62%),
      radial-gradient(620px 360px at 92% 2%, rgba(139,123,255,.18), transparent 60%);
  }
  body::before { animation: none; inset: -8vmax; }
  body::after { background-size: 48px 48px; opacity: .55; }

  /* Le verre depoli est empile une dizaine de fois sur l'accueil. Deux couches
     de flou suffisent a l'effet, le reste se contente d'un fond. */
  .panneau, .chiffre, .tuile, .carte-produit {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background-color: rgba(11,20,40,.72);
  }
  .panneau { box-shadow: none; }
}

/* Quand la personne a demande moins d'animation, plus rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* --- telephone couche ------------------------------------------------------- */

/* En paysage l'ecran ne fait plus que ~390 px de haut : la barre et le menu
   colles mangeraient un quart de la page. On les laisse defiler. */
@media (max-height: 460px) and (orientation: landscape) {
  .barre, .menu { position: static; }
  .barre { height: auto; padding: 8px 16px; }
  .corps { padding: 16px; }
}

/* --- le trace de la signature ----------------------------------------------- */

@media (max-width: 720px) {
  /* Plus haut qu'au bureau : on signe avec un doigt, pas avec une souris. */
  .zone-signature canvas { height: 200px; }
  .zone-signature .mini-gris { right: 8px; bottom: 8px; min-height: 36px; }
}

/* --- l'invitation a poser l'espace sur l'ecran d'accueil --------------------- */

.poser-appli {
  display: none; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 13px 15px;
  background: linear-gradient(120deg, rgba(90,230,255,.12), rgba(139,123,255,.10));
  border: 1px solid var(--trait-2); border-radius: 14px; font-size: 13.5px;
}
.poser-appli .dit { flex: 1 1 200px; min-width: 0; }
.poser-appli b { display: block; color: var(--neige); font-weight: 600; margin-bottom: 2px; }
.poser-appli span { color: var(--ink-soft); }
.poser-appli .fermer {
  margin-left: auto; flex: none; width: auto; margin-top: 0; padding: 6px 10px;
  background: none; border: 0; box-shadow: none; color: var(--ink-faint);
  font-size: 20px; line-height: 1;
}
.poser-appli .fermer::after { display: none; }
.poser-appli .poser {
  width: auto; margin: 6px 0 0; padding: 10px 18px; font-size: 13.5px; border-radius: 100px;
}
@media (max-width: 720px) { .poser-appli.visible { display: flex; } }

/* Le lien de droite des bandeaux etait pousse au bord par margin-left:auto, ce
   qui le laissait seul sur sa ligne dans 390 px. Il se remet a la suite du
   texte. Cette regle vient apres celles de la couche futuriste, qui la
   contredisaient. */
@media (max-width: 720px) {
  .bandeau-demo a, .bandeau-apercu a, .bandeau-signer a { margin-left: 0; }
}

/* Le trait lumineux du menu est dessine pour la colonne de gauche du bureau :
   sur telephone il tombait a gauche de l'onglet actif et donnait une barre
   verticale egaree au milieu de l'ecran. La pastille allumee et le fond de
   l'onglet suffisent a dire ou l'on est. */
@media (max-width: 720px) {
  .menu a.on::before { content: none; }
}

/* ---------------------------------------------------------------------------
   La fiche de bionettoyage.

   Elle se remplit debout, un gant a la main, dans une salle d'operation : les
   lignes sont hautes, toute la ligne est cliquable, et la case reste a gauche
   pour qu'on suive la colonne du regard. Ces regles viennent apres la couche
   futuriste, qui redefinit les fonds et les bordures.
   --------------------------------------------------------------------------- */
.facultatif {
  margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ink-faint); font-size: .92em;
}
ul.cocher { list-style: none; margin: 0; padding: 0; }
ul.cocher li { border-top: 1px solid var(--trait, rgba(255, 255, 255, .08)); }
ul.cocher li:first-child { border-top: 0; }
ul.cocher label {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0; padding: 14px 2px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500;
  color: var(--ink-soft);
}
ul.cocher input[type=checkbox] {
  width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--cyan);
}
ul.cocher .quoi { display: block; line-height: 1.35; }
ul.cocher .quoi em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 12.5px; color: var(--ink-faint);
}
ul.cocher input[type=checkbox]:checked + .quoi { color: var(--ink); }
.choix-zone { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choix-zone form { flex: 1 1 220px; }
.choix-zone button { width: 100%; margin-top: 0; }
.choix-zone .bouton-lien {
  flex: 1 1 220px; margin-top: 0; text-align: center; padding: 15px 20px; font-size: 15px;
}
@media (max-width: 720px) {
  ul.cocher label { padding: 16px 2px; font-size: 16px; }
  .choix-zone form, .choix-zone .bouton-lien { flex: 1 1 100%; }
}

/* Les pictogrammes du protocole, et le « tout a ete fait ».
   Ces regles viennent apres la couche futuriste, qui redefinit les fonds. */
ul.cocher .picto {
  width: 26px; height: 26px; flex: none; margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-faint); opacity: .85;
}
ul.cocher input[type=checkbox]:checked ~ .picto { color: var(--cyan); opacity: 1; }
.tout-fait {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 6px; padding: 15px 16px; cursor: pointer;
  border: 1px solid var(--cyan); border-radius: 12px;
  background: rgba(43, 184, 224, .12);            /* repli : Safari ancien ignore color-mix */
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.tout-fait input[type=checkbox] {
  width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--cyan);
}
.tout-fait em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12.5px; font-weight: 400; color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   Le menu du telephone, refait le 24.09.2026.

   Le bandeau qui defilait de cote ne montrait que trois entrees sur douze :
   les salariees ne voyaient pas le reste. A la place, une barre fixe en bas,
   sous le pouce, avec les quatre pages de tous les jours et « Menu », qui
   ouvre une feuille avec toutes les entrees en lignes pleines. Au bureau,
   rien ne change : la colonne de gauche reste et la barre n'existe pas.
   --------------------------------------------------------------------------- */

.tel-barre { display: none; }

@media (max-width: 720px) {
  /* L'ancien bandeau s'efface, la page ne garde que la barre du haut. */
  .appli > .menu { display: none; }
  html { scroll-padding-top: 72px; }

  /* De la place en bas, pour que le dernier bouton de la page ne passe pas
     sous la barre. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  .tel-barre {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    /* Fond plein et pas de flou : un backdrop-filter ferait de la barre le
       repere des elements « fixed » qu'elle contient, et la feuille du menu
       s'ouvrirait coincee dans ses 68 px au lieu de monter sur l'ecran. */
    background: #060D1D;
    border-top: 1px solid var(--trait-2);
  }
  .tel-barre > a, .tel-tout > summary {
    flex: 1 1 0; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border-radius: 12px;
    color: var(--ink-soft); text-decoration: none;
    font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .tel-barre > a span, .tel-tout > summary span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .tel-barre .pic { width: 24px; height: 24px; flex: none; }
  .tel-barre > a.on, .tel-tout > summary.on, .tel-tout[open] > summary {
    color: var(--neige); background: var(--verre-fort); font-weight: 600;
  }
  .tel-barre > a.on .pic, .tel-tout > summary.on .pic, .tel-tout[open] > summary .pic {
    color: var(--cyan); filter: drop-shadow(0 0 6px rgba(90,230,255,.7));
  }
  .tel-barre > a:active, .tel-tout > summary:active { background: var(--verre); }

  /* « Menu » est un <details> : son bouton prend la meme place que les autres. */
  .tel-tout { flex: 1 1 0; min-width: 0; display: flex; }
  .tel-tout > summary { list-style: none; cursor: pointer; }
  .tel-tout > summary::-webkit-details-marker { display: none; }
  .tel-tout > summary::marker { content: ""; }

  /* Ouvert, le reste de l'ecran s'assombrit ; un doigt dessus referme. */
  .tel-tout[open]::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(2,6,16,.62);
  }
  .tel-feuille {
    position: fixed; left: 0; right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 68px - env(safe-area-inset-bottom, 0px) - 70px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 6px 12px 12px;
    background: #0A1630;
    border-top: 1px solid var(--trait-2); border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 40px -10px rgba(0,0,0,.6);
  }
  .tel-titre {
    display: flex; align-items: center; padding: 12px 6px 10px;
    position: sticky; top: -6px; background: #0A1630; z-index: 1;
  }
  .tel-titre b {
    font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 16px; color: var(--neige);
  }
  .tel-fermer {
    margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; line-height: 1; color: var(--ink-soft); background: var(--verre);
    cursor: pointer;
  }
  .tel-feuille > a {
    display: flex; align-items: center; gap: 14px;
    min-height: 54px; padding: 0 14px; margin-top: 4px; border-radius: 13px;
    color: var(--glace); text-decoration: none; font-size: 16px; font-weight: 500;
    border: 1px solid var(--trait);
    background: rgba(255,255,255,.025);
  }
  .tel-feuille > a .pic { width: 22px; height: 22px; flex: none; color: var(--ink-soft); }
  .tel-feuille > a.on {
    color: var(--neige); font-weight: 600; background: var(--verre-fort); border-color: var(--trait-2);
  }
  .tel-feuille > a.on .pic { color: var(--cyan); }
  .tel-feuille > a:active { background: var(--verre); }
  .tel-feuille > a.tel-sortir { margin-top: 14px; color: var(--ink-soft); border-style: dashed; }
}

/* En paysage, la barre reste : elle ne prend que 68 px, et c'est le seul
   chemin vers les autres pages maintenant que le bandeau n'existe plus. */
@media (max-height: 460px) and (orientation: landscape) {
  .tel-feuille { max-height: calc(100dvh - 80px); }
}