/* Polices servies par cette feuille :
   · Luciole © Laurent Bourcellier & Jonathan Perez — CC BY 4.0
     https://creativecommons.org/licenses/by/4.0/
   · Archivo Narrow © Omnibus-Type — SIL Open Font License 1.1
   L'attribution CC BY vit ICI, dans la ressource qui sert les polices, et non plus
   à l'écran : un crédit typographique n'a rien à faire devant un poseur sur un toit.
   Licences complètes dans design/. */

/* Field — feuille unique. Toute valeur vient de tokens.css : aucune couleur, aucun
   rayon, aucune police en dur ici. */

@font-face {
  font-family: 'Luciole';
  src: url('polices/Luciole-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('polices/Luciole-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('polices/ArchivoNarrow-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('polices/ArchivoNarrow-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--f-fond);
  color: var(--f-encre);
  font-family: var(--f-texte);
  font-size: var(--f-t-texte);
  line-height: var(--f-i-texte);
  /* La coque se termine par une barre fixe : on réserve sa hauteur. */
  padding-bottom: calc(var(--f-bas-h) + env(safe-area-inset-bottom));
}

/* Grain : 3 %, jamais cliquable. Il évite l'aplat parfaitement lisse d'un écran
   d'administration sans ajouter une couleur. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}
main, header, nav { position: relative; z-index: 1; }

h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0 0 var(--f-e-2); text-wrap: pretty; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--f-accent);
  outline-offset: 2px;
}

/* ── Coque : barre haute ────────────────────────────────────────────────── */
/* Collée en haut : sur un toit, on revient à l'accueil sans remonter la page. */
.f-haut {
  position: sticky; top: 0; z-index: 2;
  min-height: var(--f-haut-h);
  border-bottom: 1px solid var(--f-trait);
  background: var(--f-carte);
  padding-top: env(safe-area-inset-top);
}
.f-haut-int, .f-bas-int, .f-contenu {
  max-width: var(--f-contenu-max); margin: 0 auto;
}
.f-haut-int {
  display: flex; align-items: center; gap: var(--f-e-2);
  min-height: var(--f-haut-h); padding: 0 var(--f-e-2);
}
.f-marque {
  display: flex; align-items: center; gap: var(--f-e-1);
  min-height: var(--touch-min);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--f-t-sous); letter-spacing: var(--f-l-titre);
  text-decoration: none; white-space: nowrap;
}
.f-marque::before {
  content: ''; flex: none; width: 4px; height: 22px; background: var(--f-accent);
}
.f-marque img { display: block; height: 28px; width: auto; }
/* Menu du poseur : le nom est la poignée, la liste se pose sous lui, alignée à droite. */
.f-menu { margin-left: auto; position: relative; }
.f-qui {
  display: flex; align-items: center; gap: var(--f-e-1);
  min-height: var(--touch-min); padding: 0 var(--f-e-1);
  color: var(--f-encre-2); font-size: var(--f-t-petit);
  white-space: nowrap; cursor: pointer; list-style: none;
  border-radius: var(--f-r-bouton);
}
.f-qui::-webkit-details-marker { display: none; }
.f-menu[open] .f-qui { color: var(--f-encre); }
.f-menu[open] .f-qui .f-picto { transform: rotate(180deg); }
.f-menu-liste {
  position: absolute; right: 0; top: calc(100% + var(--f-e-1)); z-index: 3;
  min-width: 14rem;
  border: 1px solid var(--f-trait); border-radius: var(--f-r-bouton);
  background: var(--f-carte);
}
.f-menu-liste a {
  display: flex; align-items: center; gap: var(--f-e-2);
  min-height: var(--touch-min); padding: 0 var(--f-e-2);
  text-decoration: none; font-size: var(--f-t-texte);
}
.f-menu-liste a:hover { background: var(--f-fond); }
.f-picto { flex: none; color: var(--f-encre-2); }
.f-mini {
  flex: none; width: var(--f-mini); height: var(--f-mini);
  border-radius: var(--f-r-rond); object-fit: cover;
  border: 1px solid var(--f-trait); background: var(--f-carte);
}
.f-mini-initiale {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: var(--f-t-petit); color: var(--f-encre-2);
}
.f-contenu { padding: var(--f-e-3) var(--f-e-2); }

/* ── Le geste : l'heure de départ, coupée par le bord droit ──────────────── */
/* overflow:clip — les chiffres sortent du cadre SANS jamais faire défiler la page
   latéralement : la coupe est faite par la section, pas par le viewport. */
.f-maintenant { padding: var(--f-e-3) 0 var(--f-e-3) var(--f-e-2); overflow: clip; }
.f-quand {
  color: var(--f-encre-2); font-size: var(--f-t-petit);
  letter-spacing: var(--f-l-petit);
}
.f-heure {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--f-t-geste); line-height: var(--f-i-geste);
  letter-spacing: var(--f-l-geste);
  /* Le geste : les chiffres vont d'un bord à l'autre et mordent la marge droite.
     Ils restent ENTIERS — couper un chiffre coûterait l'information elle-même. */
  margin: 0 calc(var(--f-e-2) * -1) 0 calc(var(--f-e-1) * -1);
  white-space: nowrap; overflow: visible;
}
.f-heure.f-retard { color: var(--f-retard); }
.f-filet {
  height: 1px; background: var(--f-encre);
  margin: var(--f-e-1) calc(var(--f-e-2) * -1) var(--f-e-2) calc(var(--f-e-2) * -1);
}
.f-titre-chantier {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--f-t-titre); line-height: var(--f-i-titre);
  letter-spacing: var(--f-l-titre);
}
.f-sous {
  margin: var(--f-e-1) 0 0; color: var(--f-encre-2);
  font-size: var(--f-t-sous);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.f-actions-page { padding-left: var(--f-e-2); }
.f-actions { display: flex; gap: var(--f-e-1); margin-top: var(--f-e-2); padding-right: var(--f-e-2); }
.f-bouton {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-min); padding: 0 var(--f-e-2);
  border: 1px solid var(--f-encre); border-radius: var(--f-r-bouton);
  background: var(--f-carte); color: var(--f-encre);
  font: inherit; text-decoration: none; cursor: pointer;
}
.f-bouton-primaire {
  flex: 2 1 auto;
  border-color: var(--f-accent); background: var(--f-accent); color: var(--f-carte);
  font-weight: 700;
}
.f-bouton[disabled] { color: var(--f-encre-2); border-color: var(--f-trait); cursor: not-allowed; }

/* ── La suite de la journée ──────────────────────────────────────────────── */
.f-ensuite { margin-top: var(--f-e-4); }
.f-ensuite > h2 {
  padding: 0 var(--f-e-2); color: var(--f-encre-2);
  font-family: var(--f-texte); font-weight: 400; font-size: var(--f-t-petit);
  letter-spacing: var(--f-l-petit);
}
.f-liste { list-style: none; margin: var(--f-e-1) 0 0; padding: 0; }
.f-liste li { border-top: 1px solid var(--f-trait); }
.f-liste li:last-child { border-bottom: 1px solid var(--f-trait); }
.f-ligne {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: var(--f-e-1);
  align-items: baseline;
  min-height: var(--touch-min);
  padding: var(--f-e-2) var(--f-e-2) var(--f-e-2) var(--f-e-2);
  text-decoration: none;
  /* Le liseré d'état touche le bord gauche de l'écran, sans rayon ni marge. */
  border-left: 4px solid transparent; border-radius: var(--f-r-lisere);
}
.f-ligne-encours { border-left-color: var(--f-accent); }
.f-ligne-retard  { border-left-color: var(--f-retard); }
.f-ligne time { font-family: var(--f-display); font-weight: 600; }
.f-ligne small { display: block; color: var(--f-encre-2); }

.f-alerte {
  margin: var(--f-e-2); padding: var(--f-e-2);
  border: 1px solid var(--f-retard); border-radius: var(--f-r-fiche);
  color: var(--f-retard);
}

/* ── Vide : une invitation, pas un bilan à zéro ─────────────────────────── */
.f-vide { padding: var(--f-e-4) var(--f-e-2); }
.f-vide h1 { font-family: var(--f-display); font-size: var(--f-t-titre); line-height: var(--f-i-titre); }
.f-vide p { margin-top: var(--f-e-1); color: var(--f-encre-2); }

/* ── Photos ─────────────────────────────────────────────────────────────── */
.f-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--f-e-1); margin: var(--f-e-2); }
.f-photos img { width: 100%; height: auto; display: block; border-radius: var(--f-r-bouton); }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.f-form { padding: var(--f-e-3) var(--f-e-2); max-width: 30rem; }
.f-form label { display: block; margin-bottom: var(--f-e-1); color: var(--f-encre-2); font-size: var(--f-t-petit); }
.f-champ {
  width: 100%; min-height: var(--touch-min);
  margin-bottom: var(--f-e-2); padding: 0 var(--f-e-1);
  border: 1px solid var(--f-encre); border-radius: var(--f-r-bouton);
  background: var(--f-carte); color: var(--f-encre);
  font: inherit;
}
.f-erreur { color: var(--f-retard); }

/* ── Coque : barre basse ────────────────────────────────────────────────── */
.f-bas {
  position: fixed; inset: auto 0 0 0; z-index: 2;
  border-top: 1px solid var(--f-trait);
  background: var(--f-carte);
  padding-bottom: env(safe-area-inset-bottom);
}
.f-bas-int { display: flex; min-height: var(--f-bas-h); }
.f-bas a {
  flex: 1; min-height: var(--touch-min);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: var(--f-t-petit);
  border-top: 3px solid transparent;
}
.f-bas a[aria-current='page'] { font-weight: 700; border-top-color: var(--f-accent); }

/* Tablette et PC : gouttière plus large ; la barre basse cesse d'être une rangée
   d'onglets bord à bord et devient un bandeau dont les entrées s'alignent à gauche,
   sur la même colonne que le contenu. */
@media (min-width: 48rem) {
  .f-haut-int, .f-contenu { padding-left: var(--f-e-3); padding-right: var(--f-e-3); }
  .f-bas-int { padding: 0 var(--f-e-3); gap: var(--f-e-2); }
  .f-bas a { flex: 0 0 auto; padding: 0 var(--f-e-2); }
}

.f-pied { padding: var(--f-e-3) var(--f-e-2); color: var(--f-encre-2); font-size: var(--f-t-petit); }

/* ── Ma fiche ───────────────────────────────────────────────────────────── */
.f-titre-page {
  font-family: var(--f-display); font-size: var(--f-t-titre);
  line-height: var(--f-i-titre); letter-spacing: var(--f-l-titre);
  margin-bottom: var(--f-e-3);
}
/* Le reste de la page (cartes, champs, modale photo, tuiles, mot de passe) est la COPIE
   du profil socle, portée dans fiche.php avec ses propres styles. */

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

/* Le nom du chantier est lui-même la porte vers sa fiche : un bouton « Ouvrir »
   en plus n'aurait fait qu'aligner trois actions de même poids. */
.f-titre-chantier a { text-decoration: none; text-decoration-skip-ink: auto; }
.f-titre-chantier a:hover, .f-titre-chantier a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Champ de fichier masqué : c'est son libellé qui fait le bouton. Masqué sans
   display:none, sinon le clavier et le lecteur d'écran ne l'atteignent plus. */
.f-invisible {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.f-invisible:focus-visible + .f-bouton { outline: 3px solid var(--f-accent); outline-offset: 2px; }

/* [hidden] doit l'emporter sur display:inline-flex, sinon l'élément reste visible. */
.f-bouton[hidden] { display: none; }

/* ── Écrans d'authentification ───────────────────────────────────────────
   Miroir du patron des autres espaces Allyo (portail client, banque) : panneau
   de marque à gauche, colonne de formulaire à droite, une seule colonne sous
   900px. L'ordre de lecture y est toujours le même — marque, titre, sous-titre,
   erreur éventuelle, carte de saisie.
   Deux écarts assumés par rapport au portail : le panneau est un APLAT de la
   couleur du tenant et non un dégradé, et la carte n'a pas d'ombre portée —
   FIELD se lit en plein soleil, où le contraste franc gagne toujours. */
body.f-auth {
  padding-bottom: 0;          /* pas de barre basse sur ces écrans */
  min-height: 100dvh;
}
.f-authwrap { display: flex; min-height: 100dvh; }

/* Panneau de marque : décoratif, donc absent en mobile où l'écran est au poseur. */
.f-authmarque { display: none; }

.f-authmain {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 30rem; margin: 0 auto;
  padding: var(--f-e-4) var(--f-e-2);
}
.f-authmark { display: flex; align-items: center; gap: var(--f-e-1); margin-bottom: var(--f-e-3); }
.f-authmark img { display: block; width: auto; max-height: 44px; max-width: 200px; }
.f-authmark .f-authnom {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--f-t-titre); line-height: var(--f-i-titre); letter-spacing: var(--f-l-titre);
}
.f-authhead h1 {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--f-t-titre); line-height: var(--f-i-titre); letter-spacing: var(--f-l-titre);
}
.f-authcarte { margin-top: var(--f-e-3); }
.f-authcarte .f-form { padding: 0; max-width: none; }

/* Champ mot de passe : l'œil est un bouton à part entière, cible tactile pleine. */
.f-mdp { position: relative; display: block; }
.f-mdp .f-champ { padding-right: calc(var(--touch-min) + var(--f-e-1)); }
.f-oeil {
  position: absolute; inset: 0 0 auto auto;
  width: var(--touch-min); height: var(--touch-min);
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--f-encre-2); cursor: pointer;
}
.f-oeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Photo du panneau : un poseur au travail, pas un décor. Monochrome et mêlée en
   LUMINANCE à l'aplat de marque — la couleur vient du tenant, jamais du fichier,
   donc la série reste cohérente d'un espace à l'autre. Chargée en background et
   sous media query : en mobile le panneau n'existe pas, l'image n'est pas
   téléchargée du tout. */
.f-authphoto { display: none; }

@media (min-width: 900px) {
  .f-authmarque {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    flex: 1;
    padding: var(--f-auth-marge);
    background: var(--f-marque-fond); color: var(--f-marque-encre);
  }
  .f-authphoto {
    display: block; position: absolute; inset: 0;
    /* Deux déclarations, dans cet ordre : les navigateurs qui ne comprennent pas
       image-set(... type(...)) ignorent la seconde et gardent le JPEG. Sans ce
       repli, la règle entière est invalide et AUCUNE image ne s'affiche. */
    background-image: url('images/poseur.jpg');
    background-image: image-set(url('images/poseur.webp') type('image/webp'),
                                url('images/poseur.jpg')  type('image/jpeg'));
    background-size: cover; background-position: var(--f-photo-cadrage);
    opacity: var(--f-photo-opacite);
    mix-blend-mode: luminosity;
    /* État FINAL par défaut : sans JavaScript la page est déjà juste. */
    transform: none;
  }
  /* Le contenu passe DEVANT la photo. `:not()` est indispensable : sans lui cette
     règle écrase le `position: absolute` de la photo, qui retombe dans le flux,
     se retrouve haute de 0 et disparaît sans rien signaler. */
  .f-authmarque > *:not(.f-authphoto) { position: relative; z-index: 1; }
  .f-authmarque .f-discours {
    margin: 0;
    /* Seule trace de la couleur du tenant sur le panneau : un filet, pas un fond. */
    padding-left: var(--f-e-2);
    border-left: 3px solid var(--f-accent);
    font-family: var(--f-display); font-weight: 700;
    font-size: var(--f-t-discours); line-height: var(--f-i-titre);
    letter-spacing: var(--f-l-titre); max-width: 16ch;
    text-wrap: balance;
  }
  .f-authmarque .f-appui { margin: var(--f-e-2) 0 0; max-width: 34ch; text-wrap: pretty; }
  .f-authmarque .f-pied { font-size: var(--f-t-petit); }
  .f-authmain { flex: 0 0 var(--f-auth-colonne); max-width: none; margin: 0; padding: var(--f-auth-marge); }
}

/* ── Langues, cases à cocher, listes déroulantes ──────────────────────────
   Tout ce qui se touche fait au moins --touch-min : sur un toit, on vise mal,
   souvent avec des gants. */
.f-langues {
  display: flex; flex-wrap: wrap; gap: var(--f-e-1);
  margin-top: var(--f-e-3);
}
.f-langues a {
  min-height: var(--touch-min); min-width: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--f-trait); border-radius: var(--f-r-bouton);
  text-decoration: none; opacity: .55;
}
.f-langues a:hover, .f-langues a:focus-visible { opacity: 1; }
.f-langues a[aria-current] { border-color: var(--f-encre); opacity: 1; }
.f-drapeau {
  width: var(--f-drapeau-taille); height: calc(var(--f-drapeau-taille) * 2 / 3);
  display: block; border-radius: 2px; overflow: hidden;
}

/* Le sélecteur natif est conservé : c'est le seul qui reste utilisable d'une main,
   et le téléphone l'affiche dans sa propre langue système. */
select.f-champ { appearance: none; padding-right: var(--f-e-3); background-color: var(--f-carte); }

.f-cases { margin: 0 0 var(--f-e-2); padding: 0; border: 0; }
.f-cases legend {
  padding: 0; margin-bottom: var(--f-e-1);
  color: var(--f-encre-2); font-size: var(--f-t-petit);
}
.f-case {
  display: flex; align-items: center; gap: var(--f-e-1);
  min-height: var(--touch-min);
  margin-bottom: 0;                      /* les cases se suivent, sans trou */
  color: var(--f-encre); font-size: var(--f-t-texte);
}
.f-case input { width: 1.5rem; height: 1.5rem; accent-color: var(--f-accent); }