/* ---------------------------------------------------------------------------
   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); }
}


/* ===========================================================================
   L'ESPACE SALARIE EN APPLICATION IPHONE — 28.09.2026

   D'apres la maquette validee par Pierre le 28.09. Tout ce qui suit ne vaut
   que pour l'espace salarie (la classe « espace-salarie » posee sur <html>
   par le gabarit) et seulement sur telephone. Le bureau et la direction ne
   changent pas.

   Grands titres, groupes en cartes arrondies comme les listes d'iPhone,
   boutons larges sous le pouce, police du systeme, barre du bas translucide.
   Clair ou sombre selon le reglage du telephone : les variables du portail
   sont simplement redefinies, les pages n'ont rien a savoir.

   Les selecteurs commencent par :where(.espace-salarie) pour garder
   exactement le poids des regles d'origine : c'est l'ordre du fichier qui
   tranche, et ces regles-ci viennent en dernier.
   =========================================================================== */

/* Ce qui n'existe que sur l'une des deux tailles d'ecran. */
@media (min-width: 721px) { .tel-seul { display: none !important; } }
@media (max-width: 720px) { .bureau-seul { display: none !important; } }

/* La ligne de vacation de l'accueil : au bureau, exactement l'ancien rendu,
   qui etait ecrit en dur dans la page. */
.vacation.v-ligne { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

@media (max-width: 720px) {

  /* --- les couleurs, en sombre par defaut --------------------------------- */

  :root:where(.espace-salarie) {
    --police-ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

    --trait: #1F2A40; --trait-2: #2A3853;

    --ios-fond: #070C1A;
    --ios-carte: #111A2E;
    --ios-remplissage: rgba(255,255,255,.06);
    --ios-champ: rgba(255,255,255,.05);
    --ios-barre: rgba(10,17,33,.80);
    --ios-feuille: #111A2E;
    --ios-voile: rgba(2,6,16,.62);
    --ios-ombre: none;
    --ios-accent: #2BB8E0;
    --ios-accent-fond: rgba(43,184,224,.16);
    --ios-sur-accent: #04101F;
  }

  /* --- les memes, en clair, si le telephone est regle ainsi ---------------- */

  @media (prefers-color-scheme: light) {
    :root:where(.espace-salarie) {
      --ink: #0B1426; --ink-soft: #5D6B80; --ink-faint: #6B7789;
      --neige: #0B1426; --glace: #1B2A40; --givre: #0B7FA6;
      --cyan: #0B7FA6; --cyan-2: #0B7FA6; --violet: #6C5CE0;
      --accent: #0B7FA6; --accent-clair: #0B7FA6; --accent-soft: #E3F4FA;
      --verre: rgba(11,20,38,.04); --verre-2: rgba(11,20,38,.025); --verre-fort: rgba(11,127,166,.10);
      --trait: #DDE3EA; --trait-2: #C9D2DD;
      --ok: #1F8A4C;   --ok-soft: #E4F4EA;
      --wait: #A86B00; --wait-soft: #FBF1DC;
      --mal: #C4314B;  --mal-soft: #FBE7EA;

      --ios-fond: #EEF1F5;
      --ios-carte: #FFFFFF;
      --ios-remplissage: #F0F3F7;
      --ios-champ: #FFFFFF;
      --ios-barre: rgba(255,255,255,.82);
      --ios-feuille: #FFFFFF;
      --ios-voile: rgba(11,20,38,.35);
      --ios-ombre: 0 1px 2px rgba(11,20,38,.06), 0 6px 18px rgba(11,20,38,.06);
      --ios-accent: #0B7FA6;
      --ios-accent-fond: #E3F4FA;
      --ios-sur-accent: #FFFFFF;
    }
    html:where(.espace-salarie) { color-scheme: light; }

    /* Le calendrier des champs de date etait inverse pour le fond sombre. */
    :where(.espace-salarie) input[type=date]::-webkit-calendar-picker-indicator,
    :where(.espace-salarie) input[type=time]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }

    /* Les bandeaux etaient ecrits pour le fond sombre. */
    :where(.espace-salarie) .bandeau-signer { background: var(--wait-soft); border-bottom-color: #EBD9B0; }
    :where(.espace-salarie) .bandeau-signer strong,
    :where(.espace-salarie) .bandeau-apercu strong { color: var(--wait); }
    :where(.espace-salarie) .bandeau-signer a { background: var(--wait); color: #FFFFFF; }
    :where(.espace-salarie) .bandeau-demo { background: var(--ios-accent-fond); border-bottom-color: var(--trait); color: var(--ink); }
    :where(.espace-salarie) .bandeau-demo strong { color: var(--ios-accent); }
    :where(.espace-salarie) .bandeau-demo a { background: var(--ios-accent); color: var(--ios-sur-accent); }
  }

  /* --- le fond et la police ------------------------------------------------ */

  :where(.espace-salarie) body {
    font-family: var(--police-ios);
    background: var(--ios-fond);
    background-image: none;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  /* L'aurore et la grille : un iPhone montre un fond uni. */
  :where(.espace-salarie) body::before,
  :where(.espace-salarie) body::after { content: none; }

  :where(.espace-salarie) h2,
  :where(.espace-salarie) .panneau .tete h3,
  :where(.espace-salarie) .chiffre .n,
  :where(.espace-salarie) .compteur-vacances b,
  :where(.espace-salarie) .v-txt b,
  :where(.espace-salarie) input.code,
  :where(.espace-salarie) .tuile b,
  :where(.espace-salarie) .tuile .pastille,
  :where(.espace-salarie) .jour-tete b,
  :where(.espace-salarie) .panier-pas em,
  :where(.espace-salarie) .tel-titre b { font-family: var(--police-ios); }

  /* --- la barre du haut reste marine, dans les deux modes ------------------
     Pose sur l'ecran d'accueil, l'iPhone ecrit l'heure et la batterie en
     blanc par-dessus : sur une barre claire, elles disparaitraient. */
  :where(.espace-salarie) .barre {
    background: rgba(7,12,26,.88);
    border-bottom: 1px solid rgba(90,230,255,.16);
  }
  :where(.espace-salarie) .barre .marque { color: #F2FAFE; }
  :where(.espace-salarie) .barre .marque .fin { color: #7FD4EE; }
  :where(.espace-salarie) .barre .sortir { color: #D7ECF6; border-color: rgba(90,230,255,.34); }

  :where(.espace-salarie) .corps { padding: 14px 16px 32px; }

  /* --- les grands titres --------------------------------------------------- */

  :where(.espace-salarie) h1 {
    font-family: var(--police-ios); font-size: 34px; font-weight: 700; line-height: 1.1;
    letter-spacing: -.02em; margin: 4px 0 6px; text-wrap: balance;
    background: none; -webkit-text-fill-color: currentColor; color: var(--neige);
  }
  :where(.espace-salarie) .sur-titre {
    margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .06em;
  }
  :where(.espace-salarie) .sur-titre + h1 { margin-bottom: 20px; }
  :where(.espace-salarie) .sous { font-size: 15px; color: var(--ink-soft); margin: 0 0 22px; }
  :where(.espace-salarie) h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  :where(.espace-salarie) a { color: var(--accent-clair); }

  /* --- les groupes, en cartes arrondies ------------------------------------ */

  :where(.espace-salarie) .panneau {
    background: var(--ios-carte); border: 0; border-radius: 18px;
    box-shadow: var(--ios-ombre);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :where(.espace-salarie) .panneau::before,
  :where(.espace-salarie) .panneau::after,
  :where(.espace-salarie) .chiffre::before,
  :where(.espace-salarie) .chiffre::after,
  :where(.espace-salarie) .tuile::before { content: none; }

  :where(.espace-salarie) .panneau .tete {
    padding: 14px 16px 12px; background: transparent; border-bottom: 1px solid var(--trait);
  }
  :where(.espace-salarie) .panneau .tete h3 {
    font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--ink-soft);
  }
  :where(.espace-salarie) .panneau .tete .compte { font-size: 13px; color: var(--ink-soft); }
  :where(.espace-salarie) .panneau .tete .compte.ok {
    background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 12.5px;
    padding: 4px 10px; border-radius: 999px;
  }
  :where(.espace-salarie) .panneau .dedans { padding: 14px 16px 16px; }
  :where(.espace-salarie) .explique { font-size: 15px; color: var(--ink-soft); }

  /* Les lignes d'un groupe : un filet entre deux, rien d'autre. */
  :where(.espace-salarie) .rang { padding: 14px 16px; border-top: 1px solid var(--trait); }
  :where(.espace-salarie) .rang:first-of-type { border-top: none; }
  :where(.espace-salarie) .rang:hover { background: transparent; }
  :where(.espace-salarie) .rang-txt b { font-size: 16px; color: var(--ink); }
  :where(.espace-salarie) .rang-txt span { font-size: 14px; color: var(--ink-soft); }

  :where(.espace-salarie) .jour { padding: 14px 16px; }
  :where(.espace-salarie) .jour-tete b { font-size: 15px; color: var(--ink); }

  :where(.espace-salarie) .vacation {
    background: var(--ios-remplissage); border: 0; border-radius: 14px; padding: 14px;
  }
  :where(.espace-salarie) .vacation.faite { background: var(--ok-soft); }
  :where(.espace-salarie) .v-txt b { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--neige); }
  :where(.espace-salarie) .v-txt span { font-size: 14px; color: var(--ink-soft); }

  /* --- les chiffres ---------------------------------------------------------- */

  :where(.espace-salarie) .chiffre {
    background: var(--ios-carte); border: 0; border-radius: 18px; box-shadow: var(--ios-ombre);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :where(.espace-salarie) .chiffre .n {
    font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--neige); text-shadow: none;
  }
  :where(.espace-salarie) .chiffre.attention .n { color: var(--wait); }
  :where(.espace-salarie) .chiffre .t { font-size: 13.5px; color: var(--ink-soft); }

  :where(.espace-salarie) .compteur-vacances {
    background: var(--ios-accent-fond); border: 0; border-radius: 18px;
  }
  :where(.espace-salarie) .compteur-vacances b {
    font-size: 34px; font-weight: 700; color: var(--ios-accent); text-shadow: none;
  }

  /* --- les tuiles de l'accueil deviennent une liste d'iPhone ----------------- */

  :where(.espace-salarie) .tuiles {
    display: block; background: var(--ios-carte); border-radius: 18px;
    overflow: hidden; box-shadow: var(--ios-ombre);
  }
  :where(.espace-salarie) .tuile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "titre marque fleche" "texte marque fleche";
    align-items: center; column-gap: 10px; row-gap: 1px;
    min-height: 62px; padding: 12px 14px 12px 16px;
    background: transparent; border: 0; border-top: 1px solid var(--trait); border-radius: 0;
    box-shadow: none; overflow: visible;
  }
  :where(.espace-salarie) .tuile:first-child { border-top: 0; }
  :where(.espace-salarie) a.tuile:hover { transform: none; background: transparent; box-shadow: none; border-color: var(--trait); }
  :where(.espace-salarie) a.tuile:active { background: var(--ios-remplissage); }
  :where(.espace-salarie) .tuile b { grid-area: titre; font-size: 17px; font-weight: 600; color: var(--ink); }
  :where(.espace-salarie) .tuile em { grid-area: texte; font-size: 14px; color: var(--ink-soft); }
  :where(.espace-salarie) .tuile .pastille {
    grid-area: marque; align-self: center; margin: 0;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  }
  /* Le chevron de droite, a la place du coin marque. */
  :where(.espace-salarie) .tuile::after {
    content: "\203A"; position: static; grid-area: fleche;
    width: auto; height: auto; border: 0; border-radius: 0; opacity: 1;
    font-size: 24px; line-height: 1; color: var(--ink-faint); margin-top: -2px;
  }
  :where(.espace-salarie) a.tuile:hover::after { opacity: 1; }

  /* --- la vacation du jour, en grand ----------------------------------------- */

  :where(.espace-salarie) .panneau-jour .v-liste { display: flex; flex-direction: column; }
  :where(.espace-salarie) .panneau-jour .vacation.v-ligne {
    background: transparent; border-radius: 0; padding: 14px 16px;
    border-top: 0; border-bottom: 1px solid var(--trait);
  }
  :where(.espace-salarie) .panneau-jour .vacation.vedette {
    order: -1; display: block; padding: 20px 16px 18px; background: transparent;
  }
  :where(.espace-salarie) .vedette .v-txt { gap: 2px; }
  :where(.espace-salarie) .vedette .v-quand { font-size: 14px; font-weight: 600; color: var(--ios-accent); }
  :where(.espace-salarie) .vedette .v-txt b {
    font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums; margin: 2px 0;
  }
  :where(.espace-salarie) .vedette .v-txt span { font-size: 15px; }
  :where(.espace-salarie) .vedette form { display: block; margin-top: 18px; }
  :where(.espace-salarie) .vedette .mini-vert {
    width: 100%; min-height: 56px; border-radius: 16px; font-size: 18px; font-weight: 700;
  }
  :where(.espace-salarie) .vedette .mini-vert .b-pic { width: 22px; height: 22px; }
  /* Les jours oublies passent au second plan : un seul gros bouton plein par ecran. */
  :where(.espace-salarie) .panneau-jour .v-ligne:not(.vedette) .mini-vert {
    background: var(--ios-accent-fond); color: var(--ios-accent);
  }

  /* Deja confirmee : tout passe au vert. */
  :where(.espace-salarie) .vacation.faite.vedette { border-bottom: 1px solid var(--trait); }
  :where(.espace-salarie) .vacation.faite.vedette .v-quand { color: var(--ok); }
  :where(.espace-salarie) .v-confirme {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 56px; margin-top: 18px; border-radius: 16px;
    background: var(--ok-soft); color: var(--ok); font-size: 18px; font-weight: 700;
  }
  :where(.espace-salarie) .v-confirme svg { width: 22px; height: 22px; flex: none; }

  /* --- les boutons, larges et pleins ----------------------------------------- */

  :where(.espace-salarie) button {
    background: var(--ios-accent); color: var(--ios-sur-accent);
    border-radius: 14px; box-shadow: none; letter-spacing: 0; font-weight: 600; font-size: 17px;
  }
  :where(.espace-salarie) button:hover { transform: none; filter: none; }
  :where(.espace-salarie) button:active { opacity: .85; }
  :where(.espace-salarie) button::after,
  :where(.espace-salarie) .bouton-lien::after { display: none; }
  :where(.espace-salarie) button.discret {
    background: var(--ios-remplissage); color: var(--ink); border: 0;
  }
  :where(.espace-salarie) .bouton-lien {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px;
    background: var(--ios-accent); color: var(--ios-sur-accent); box-shadow: none;
    border-radius: 14px; letter-spacing: 0; font-size: 17px; font-weight: 600;
  }
  :where(.espace-salarie) .mini-vert {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 0;
    background: var(--ios-accent); color: var(--ios-sur-accent); box-shadow: none;
    font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  :where(.espace-salarie) .mini-vert .b-pic { width: 18px; height: 18px; flex: none; }
  :where(.espace-salarie) .mini-gris {
    min-height: 44px; border: 0; border-radius: 12px;
    background: var(--ios-remplissage); color: var(--ink); font-size: 16px;
  }
  :where(.espace-salarie) .mini-gris:hover { background: var(--ios-remplissage); }
  :where(.espace-salarie) .rang-bouton {
    border: 0; border-radius: 12px; font-size: 16px;
    background: var(--ios-accent-fond); color: var(--ios-accent);
  }
  :where(.espace-salarie) .rang-bouton:hover { background: var(--ios-accent-fond); color: var(--ios-accent); }

  /* --- les onglets d'une page : le selecteur segmente d'iPhone ---------------- */

  :where(.espace-salarie) .onglets {
    gap: 2px; padding: 3px; border: 0; border-radius: 12px; background: var(--ios-remplissage);
  }
  :where(.espace-salarie) .onglets a {
    flex: 1 0 auto; margin: 0; padding: 0 14px; border: 0; border-radius: 9px;
    font-size: 14.5px; color: var(--ink);
  }
  :where(.espace-salarie) .onglets a:hover { background: transparent; color: var(--ink); }
  :where(.espace-salarie) .onglets a.on {
    background: var(--ios-carte); color: var(--ink); border: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
  }

  /* --- les champs ------------------------------------------------------------ */

  :where(.espace-salarie) input[type=text], :where(.espace-salarie) input[type=email],
  :where(.espace-salarie) input[type=tel], :where(.espace-salarie) input[type=date],
  :where(.espace-salarie) input[type=time], :where(.espace-salarie) input[type=number],
  :where(.espace-salarie) input[type=month], :where(.espace-salarie) select,
  :where(.espace-salarie) textarea {
    background-color: var(--ios-champ); color: var(--ink); border: 1px solid var(--trait-2);
  }
  :where(.espace-salarie) input:focus, :where(.espace-salarie) select:focus,
  :where(.espace-salarie) textarea:focus {
    background-color: var(--ios-champ); border-color: var(--ios-accent);
    box-shadow: 0 0 0 3px var(--ios-accent-fond);
  }
  :where(.espace-salarie) label { color: var(--ink-soft); letter-spacing: .05em; }

  /* --- messages, tableaux, catalogue ------------------------------------------ */

  :where(.espace-salarie) .mot { border-radius: 14px; font-size: 15px; }
  :where(.espace-salarie) table.liste tr:hover td { background: transparent; }
  :where(.espace-salarie) table.liste.cartes td:first-child {
    font-family: var(--police-ios); color: var(--ink); font-size: 16px;
  }
  :where(.espace-salarie) .poser-appli {
    background: var(--ios-carte); border: 0; border-radius: 18px; box-shadow: var(--ios-ombre);
  }
  :where(.espace-salarie) .carte-produit {
    background: var(--ios-carte); border: 0; border-radius: 16px; box-shadow: var(--ios-ombre);
  }

  /* --- la barre d'onglets du bas, translucide ---------------------------------
     Le flou est pose sur un calque dessous, et pas sur la barre : pose sur
     la barre, il enfermerait la feuille du menu dans ses 68 px (voir plus
     haut, 24.09). */
  :where(.espace-salarie) .tel-barre {
    background: transparent; border-top: 1px solid var(--trait);
  }
  :where(.espace-salarie) .tel-barre::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--ios-barre);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :where(.espace-salarie) .tel-barre::before { background: var(--ios-carte); }
  }
  :where(.espace-salarie) .tel-barre > a,
  :where(.espace-salarie) .tel-tout > summary {
    position: relative; color: var(--ink-soft); font-size: 11px; font-weight: 600;
    border-radius: 12px; letter-spacing: 0;
  }
  :where(.espace-salarie) .tel-barre .pic { width: 26px; height: 26px; }
  :where(.espace-salarie) .tel-barre > a.on,
  :where(.espace-salarie) .tel-tout > summary.on,
  :where(.espace-salarie) .tel-tout[open] > summary {
    color: var(--ios-accent); background: transparent;
  }
  :where(.espace-salarie) .tel-barre > a.on .pic,
  :where(.espace-salarie) .tel-tout > summary.on .pic,
  :where(.espace-salarie) .tel-tout[open] > summary .pic { color: var(--ios-accent); filter: none; }
  :where(.espace-salarie) .tel-barre > a:active,
  :where(.espace-salarie) .tel-tout > summary:active { background: var(--ios-remplissage); }

  /* Les pastilles rouges, comme sur l'ecran d'accueil de l'iPhone. */
  .tel-pastille {
    position: absolute; top: 3px; left: calc(50% + 5px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #E5484D; color: #FFFFFF;
    font: 700 11px/18px var(--police-ios, sans-serif); text-align: center;
  }

  /* La feuille « Menu » : une liste d'iPhone. */
  :where(.espace-salarie) .tel-tout[open]::before { background: var(--ios-voile); }
  :where(.espace-salarie) .tel-feuille {
    padding: 6px 16px 12px; background: var(--ios-feuille);
    border-top: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  }
  :where(.espace-salarie) .tel-titre { background: var(--ios-feuille); }
  :where(.espace-salarie) .tel-titre b { font-size: 20px; font-weight: 700; color: var(--ink); }
  :where(.espace-salarie) .tel-fermer { background: var(--ios-remplissage); color: var(--ink-soft); }
  :where(.espace-salarie) .tel-feuille > a {
    min-height: 52px; margin: 0; padding: 0 6px; gap: 14px;
    border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: transparent;
    color: var(--ink); font-size: 17px; font-weight: 400;
  }
  :where(.espace-salarie) .tel-titre + a { border-top: 0; }
  :where(.espace-salarie) .tel-feuille > a .pic { color: var(--ios-accent); }
  :where(.espace-salarie) .tel-feuille > a.on {
    color: var(--ios-accent); font-weight: 600; background: transparent;
  }
  :where(.espace-salarie) .tel-feuille > a:active { background: var(--ios-remplissage); }
  :where(.espace-salarie) .tel-feuille > a.tel-sortir {
    margin-top: 0; border-style: solid; color: var(--mal);
  }
  :where(.espace-salarie) .tel-feuille > a.tel-sortir .pic { color: var(--mal); }

  /* Le contour du clavier reste bien visible. */
  :where(.espace-salarie) a:focus-visible,
  :where(.espace-salarie) button:focus-visible,
  :where(.espace-salarie) summary:focus-visible {
    outline: 3px solid var(--ios-accent); outline-offset: 2px;
  }
}

/* Un bouton qui s'enfonce sous le doigt, sauf pour qui a demande moins
   d'animation. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  :where(.espace-salarie) button:active,
  :where(.espace-salarie) .bouton-lien:active { transform: scale(.98); }
}


/* ---------------------------------------------------------------------------
   Le menu du telephone s'ouvre A GAUCHE (pmd 28.09.2026 : « il faut bien un
   menu sur la gauche, vraiment facile »). Le bouton Menu est le premier de la
   barre du bas, et le panneau glisse depuis le bord gauche sur toute la
   hauteur, comme un tiroir. Place en fin de feuille pour passer devant les
   regles precedentes, y compris la couche iPhone.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html .tel-feuille {
    top: 0; bottom: 0; left: 0; right: auto;
    width: min(86vw, 340px); max-height: none; height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px calc(env(safe-area-inset-bottom, 0px) + 20px);
    border-top: 0; border-right: 1px solid var(--trait-2);
    border-radius: 0 22px 22px 0;
    box-shadow: 18px 0 40px -12px rgba(0,0,0,.55);
    animation: tiroir-gauche .22s ease-out;
  }
  html .tel-feuille > a { min-height: 56px; font-size: 17px; }
  html .tel-titre { top: 0; }
  @keyframes tiroir-gauche { from { transform: translateX(-100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { html .tel-feuille { animation: none; } }
}

/* Le tiroir de gauche s'arrete au-dessus de la barre du bas et sous la barre
   du haut : rien ne le recouvre, « Se deconnecter » reste lisible (captures
   iPhone et Android du 28.09.2026). */
@media (max-width: 720px) {
  html .tel-feuille {
    top: calc(var(--h-barre) + env(safe-area-inset-top, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    height: auto;
    padding-top: 8px; padding-bottom: 16px;
    border-radius: 0 22px 22px 0;
  }
}

/* ---------------------------------------------------------------------------
   La page de connexion, claire et pleine page, comme l'espace sur iPhone
   (pmd 28.09.2026 : « la police n'est pas belle, ça prend pas toute la place »).
   Ne vise que la page qui porte la carte de connexion.
   --------------------------------------------------------------------------- */
html:has(.carte-connexion) {
  --cx-fond: #F2F4F7; --cx-carte: #FFFFFF; --cx-encre: #0B1426; --cx-doux: #5D6B80;
  --cx-trait: #D9E0E8; --cx-accent: #0B7FA6; --cx-champ: #F7F9FB;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html:has(.carte-connexion) {
    --cx-fond: #070C1A; --cx-carte: #111A2E; --cx-encre: #EAF2FA; --cx-doux: #8E9BB0;
    --cx-trait: #22304A; --cx-accent: #2BB8E0; --cx-champ: #0B1324;
    color-scheme: dark;
  }
}
html:has(.carte-connexion) body {
  background: var(--cx-fond); color: var(--cx-encre);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html:has(.carte-connexion) body::before, html:has(.carte-connexion) body::after { display: none; }
html:has(.carte-connexion) .carte-connexion {
  max-width: 440px; margin: 40px auto; padding: 32px 28px 30px;
  background: var(--cx-carte); border: 1px solid var(--cx-trait); border-radius: 24px;
  box-shadow: 0 10px 30px rgba(11,20,38,.08);
}
html:has(.carte-connexion) .carte-connexion::before,
html:has(.carte-connexion) .carte-connexion::after { display: none; }
html:has(.carte-connexion) .connexion-logo { display: block; width: 72px; height: 72px; border-radius: 18px; margin: 0 0 18px; }
html:has(.carte-connexion) .carte-connexion .enseigne {
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cx-doux); background: none; border: 0; padding: 0; margin: 0 0 4px; box-shadow: none;
}
html:has(.carte-connexion) .carte-connexion h1 {
  font-family: inherit; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em;
  color: var(--cx-encre); margin: 0 0 14px; background: none; -webkit-text-fill-color: currentColor;
}
html:has(.carte-connexion) .carte-connexion .explique { color: var(--cx-doux); font-size: 16px; line-height: 1.5; }
html:has(.carte-connexion) .carte-connexion label {
  font-family: inherit; color: var(--cx-doux); font-size: 13px; letter-spacing: .05em;
}
html:has(.carte-connexion) .carte-connexion input[type=email],
html:has(.carte-connexion) .carte-connexion input[type=text] {
  font-family: inherit; font-size: 18px; min-height: 56px; border-radius: 14px;
  background: var(--cx-champ); color: var(--cx-encre); border: 1px solid var(--cx-trait); box-shadow: none;
}
html:has(.carte-connexion) .carte-connexion input:focus { border-color: var(--cx-accent); outline: 3px solid color-mix(in srgb, var(--cx-accent) 25%, transparent); }
html:has(.carte-connexion) .carte-connexion button {
  width: 100%; min-height: 56px; margin-top: 14px; border-radius: 16px; border: 0;
  font-family: inherit; font-size: 18px; font-weight: 700; letter-spacing: 0;
  background: var(--cx-accent); color: #fff; box-shadow: none; text-shadow: none; filter: none;
}
html:has(.carte-connexion) .barre { background: var(--cx-fond); border-bottom: 0; box-shadow: none; }
html:has(.carte-connexion) .barre .marque { color: var(--cx-encre); }
html:has(.carte-connexion) .pied { color: var(--cx-doux); }
@media (max-width: 720px) {
  html:has(.carte-connexion) .carte-connexion {
    margin: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none;
    background: transparent; padding: 28px 20px 36px; min-height: calc(100dvh - 140px);
  }
  html:has(.carte-connexion) .carte-connexion h1 { font-size: 34px; }
}

/* Le tiroir de gauche s'arrete au-dessus de la barre du bas et sous la barre
   du haut : rien ne le recouvre, « Se deconnecter » reste lisible (captures
   iPhone et Android du 28.09.2026). */
@media (max-width: 720px) {
  html .tel-feuille {
    top: calc(var(--h-barre) + env(safe-area-inset-top, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    height: auto;
    padding-top: 8px; padding-bottom: 16px;
  }
}


/* --- fiches d'intervention : les photos avant / apres (06.10.2026) ---------- */
.photos-intervention { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.photos-intervention img {
  width: 92px; height: 92px; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--trait-2); background: #fff;
}