/* Shell app type dashboard : en-tête, tiroir, rails de fiches, bas de page.
   Jetons uniquement (CHARTE). Structure inspirée d’un tableau de bord à
   bandes horizontales — identité easyextra, pas les couleurs de la concurrence. */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: var(--i-corps);
  color: var(--texte-principal);
  background: var(--fond-app);
  padding-bottom: calc(var(--esp-16) + var(--cible));
}

@media (min-width: 64rem) {
  body { padding-bottom: var(--esp-4); }
}

/* Seconde passe V0 — cadre mobile centre et composants Hotelis. */
.champ-recherche { border-radius: var(--rayon-carte); }
.btn-filtre { border-radius: var(--rayon-photo); }

.rail-voir-tout {
  min-width: 4.75rem;
  min-height: 2.5rem;
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--rayon-carte);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--bordure);
  font-family: var(--police-donnees);
  font-size: var(--t-titre-3);
  letter-spacing: 0.35em;
  text-align: center;
}

.carte-mission {
  min-height: 17rem;
  border-radius: var(--rayon-carte);
}

.carte-action {
  /* Repère textuel, pas un second bouton : la carte entière est déjà
     cliquable (voir monterCarteMission, addEventListener('click', …)) — un
     bloc plein `--navigation-fond` ici dupliquait l'affordance. */
  margin-top: auto;
  align-self: flex-end;
  display: block;
  padding: 0;
  background: none;
  color: var(--action);
  font-weight: var(--g-semi);
  text-align: right;
}

/* Cadre large (charte §11) — pas de coque téléphone. */
@media (min-width: 32rem) {
  body:has(#app-connectee:not([hidden])),
  body:has(#app-extra:not([hidden])) {
    background: var(--fond-app);
    padding-bottom: 0;
  }

  #app-connectee,
  #app-extra {
    min-height: 100dvh;
    max-width: var(--contenant-max);
    margin-inline: auto;
    padding-left: 0;
    background: var(--fond-app);
    box-shadow: none;
    overflow: visible;
  }

  #tiroir[hidden],
  #ex-tiroir[hidden] { display: none; }

  #tiroir,
  #ex-tiroir { width: min(82%, 20rem); }

  #tiroir-voile,
  #ex-tiroir-voile {
    max-width: none;
    left: 0;
    transform: none;
  }

  #btn-menu,
  #btn-ex-menu { display: inline-flex; }

  .barre-haute {
    grid-template-columns: var(--cible) minmax(0, 1fr) auto;
    padding-inline: var(--esp-4);
    align-items: center;
  }

  .barre-haute > :last-child { display: block; }
  .bande-recherche { padding-inline: var(--esp-4); }

  .onglets {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    bottom: 0;
    border-top: 1px solid var(--bordure);
  }

  .ecran-dashboard,
  .panneau-onglet {
    max-width: var(--contenant-max);
    width: 100%;
    margin-inline: auto;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Mode démonstration (stub SMS) — codes non envoyés. */
.bandeau-demo {
  margin: 0 0 var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  background: var(--surface-discrete);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-controle);
  color: var(--texte-principal);
  font-size: var(--t-petit);
  line-height: var(--i-petit);
}

.zone-a-faire-ligne + .zone-a-faire-ligne {
  margin-top: var(--esp-2);
}

.zone-engagements {
  margin: 0 0 var(--esp-4);
}

/* ——— Barre haute : menu · marque · actions ——— */
.barre-haute {
  display: grid;
  grid-template-columns: var(--cible) 1fr var(--cible);
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 20;
}

.btn-icone {
  width: var(--cible);
  height: var(--cible);
  min-width: var(--cible);
  border: none;
  background: transparent;
  color: var(--texte-principal);
  border-radius: var(--rayon-controle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
}

.btn-icone:focus-visible {
  outline: 2px solid var(--bordure-active);
  outline-offset: 2px;
}

.marque-centre {
  margin: 0;
  text-align: center;
  font-family: var(--police-titre);
  font-size: var(--t-titre-3);
  font-weight: var(--g-forte);
  color: var(--texte-principal);
  letter-spacing: -0.02em;
}
.marque-centre::after {
  content: '.';
  color: var(--action);
}

/* ——— Recherche (contrôle, pas pilule — CHARTE §2.3) ——— */
.bande-recherche {
  display: flex;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4) 0;
  align-items: center;
}

.champ-recherche {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--cible);
  padding: 0 var(--esp-3);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-controle);
}

.champ-recherche input {
  flex: 1;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--texte-principal);
  min-height: var(--cible-min);
  padding: 0;
}
.champ-recherche input:focus { outline: none; }
.champ-recherche input::placeholder { color: var(--texte-tertiaire); }

.btn-filtre {
  width: var(--cible);
  height: var(--cible);
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-radius: var(--rayon-controle);
  color: var(--action);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ——— Tiroir latéral ——— */
.tiroir-voile {
  position: fixed;
  inset: 0;
  background: var(--texte-principal);
  opacity: 0.4;
  z-index: 30;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tiroir {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 20rem);
  z-index: 40;
  background: var(--surface);
  box-shadow: var(--ombre-panneau);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--transition-lente);
}

.tiroir[hidden],
.tiroir-voile[hidden] { display: none; }

.tiroir-entete {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-4);
  background: var(--surface-discrete);
  border-bottom: 1px solid var(--bordure);
}

.tiroir-avatar {
  width: var(--esp-12);
  height: var(--esp-12);
  border-radius: var(--rayon-photo);
  background: var(--surface-selection);
  color: var(--action);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--g-semi);
  font-size: var(--t-titre-3);
  flex-shrink: 0;
}

.tiroir-nom {
  margin: 0;
  font-weight: var(--g-semi);
}

.tiroir-role {
  margin: var(--esp-1) 0 0;
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
}

.tiroir-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-2) 0;
  display: flex;
  flex-direction: column;
}

.tiroir-lien {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--cible);
  padding: var(--esp-2) var(--esp-4);
  border: none;
  background: transparent;
  font: inherit;
  color: var(--texte-principal);
  text-align: left;
  cursor: pointer;
}
.tiroir-lien:hover,
.tiroir-lien:focus-visible {
  background: var(--surface-selection);
  outline: none;
}
.tiroir-lien--actif {
  background: var(--surface-discrete);
  color: var(--action);
  font-weight: var(--g-semi);
}

.tiroir-pied {
  margin-top: auto;
  border-top: 1px solid var(--bordure);
  background: var(--texte-marque);
  color: var(--texte-inverse);
}
.tiroir-pied .tiroir-lien {
  color: var(--texte-inverse);
  width: 100%;
  justify-content: space-between;
}
.tiroir-pied .tiroir-lien:hover {
  background: var(--action-survol);
}

/* ——— Rails horizontales de fiches ——— */
.ecran-dashboard {
  padding: var(--esp-4) 0 var(--esp-8);
}

.rails-missions {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

.rail-section {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.rail-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
}

.rail-titre {
  margin: 0;
  font-size: var(--t-titre-3);
  font-weight: var(--g-forte);
  color: var(--texte-principal);
}

.rail-compteur {
  font-weight: var(--g-normale);
  color: var(--texte-tertiaire);
  font-size: var(--t-petit);
}

.rail-voir-tout {
  border: none;
  background: none;
  color: var(--action);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: var(--g-semi);
  cursor: pointer;
  padding: 0;
  min-height: auto;
}

.rail-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--esp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--esp-1) var(--esp-4) var(--esp-3);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.rail-scroll::-webkit-scrollbar { display: none; }

/* Une carte < viewport → aperçu (« peek ») de la suivante = rail horizontal perceptible */
.rail-scroll > .carte-mission,
.rail-scroll > .carte {
  /* Règle la plus spécifique du fichier pour ces deux sélecteurs (pas de
     media query) : c'est elle qui détermine la largeur réellement rendue,
     avant tout media query plus bas dans ce fichier — voir --carte-largeur
     (design-tokens.css) pour la valeur unique. */
  flex: 0 0 min(var(--carte-largeur), calc(100vw - 4.75rem));
  max-width: calc(100vw - 4.75rem);
  scroll-snap-align: start;
}
.rail-scroll > .carte-mini,
.rail-scroll > .tuile-mission {
  flex: 0 0 min(17.5rem, calc(100vw - 4.75rem));
  max-width: calc(100vw - 4.75rem);
  scroll-snap-align: start;
}

.tuile-mission {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  box-sizing: border-box;
}
.tuile-mission > .carte-mission,
.tuile-mission > .carte {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}
.tuile-mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.carte-mini--personne {
  text-align: left;
  flex: none;
  width: 100%;
  box-sizing: border-box;
}
.carte-personne-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-2);
}
.carte-personne-entete strong {
  flex: 1;
  min-width: 0;
}
.carte-personne-expand {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.carte-personne-lignes {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--esp-1);
}
.carte-personne-lignes p {
  margin: 0;
  font-size: var(--t-petit);
}
.carte-personne-detail {
  margin-top: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--bordure);
}
.carte-personne-detail p {
  margin: 0 0 var(--esp-1);
  font-size: var(--t-petit);
}

.rail-scroll > .carte-mini {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--surface-discrete);
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure);
  box-sizing: border-box;
}

.rail-scroll > .carte-mini strong {
  font-size: var(--t-corps);
}

.rail-scroll > .carte-mini .texte-secondaire {
  margin: 0;
  font-size: var(--t-petit);
}

.rail-scroll > .carte-mini .carte-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: auto;
}

.carte-mini-carac {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--t-petit);
  color: var(--texte-secondaire, inherit);
}

/* ZONE vide type Hotelis */
.zone-vide {
  margin: 0 var(--esp-4);
  padding: var(--esp-6) var(--esp-4);
  background: var(--surface-discrete);
  border-radius: var(--rayon-carte);
  color: var(--texte-tertiaire);
  font-style: italic;
  text-align: center;
  font-size: var(--t-petit);
}

.rail-vide {
  flex: 0 0 min(16rem, 80vw);
  margin: 0;
  padding: var(--esp-6) var(--esp-4);
  background: var(--surface-discrete);
  border-radius: var(--rayon-carte);
  color: var(--texte-tertiaire);
  font-style: italic;
  font-size: var(--t-petit);
  text-align: center;
  scroll-snap-align: start;
}

/* ——— Carte fiche (anatomie type offre) ——— */
.carte {
  flex: 0 0 min(var(--carte-largeur), 82vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--surface);
  border: 2px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: var(--cible);
  cursor: pointer;
  transition: border-color var(--transition);
}

.carte:hover,
.carte:focus-visible {
  border-color: var(--bordure-active);
  outline: 2px solid var(--bordure-active);
  outline-offset: 0;
}

.carte-haut {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
}

.carte-avatar {
  /* Cadre fin, pas un aplat : les initiales suffisent à identifier.
     Bordure --bordure (charte §6.4) — arbitrage PR #74 : la charte avait
     raison, le code (--texte-principal, noir) était en tort. */
  width: var(--esp-8);
  height: var(--esp-8);
  border-radius: var(--rayon-photo);
  background: var(--surface);
  color: var(--texte-principal);
  font-weight: var(--g-semi);
  font-size: var(--t-etiquette);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--bordure);
}

.carte-infos {
  flex: 1;
  min-width: 0;
}

.carte-titre-ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  justify-content: space-between;
}

.carte-titre {
  margin: 0;
  font-weight: var(--g-forte);
  font-size: var(--t-corps);
  line-height: var(--i-petit);
  /* deux lignes max */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte-badge {
  /* Compteur (candidatures, notifications…) — juste le chiffre, plus de
     pastille pleine autour (voir carte-avatar, même logique : un aplat de
     couleur ici double le poids visuel sans ajouter d'information).
     Arbitrage PR #74 : composant distinct de l'urgence, --texte-secondaire
     (ni --marque ni --action — charte §6.7bis). */
  flex-shrink: 0;
  color: var(--texte-secondaire);
  font-size: var(--t-etiquette);
  font-weight: var(--g-semi);
}
.carte-badge--urgence {
  /* Marqueur d'urgence — composant séparé du compteur (arbitrage PR #74) :
     texte noir, sans fond, comme .etiquette--urgence (charte §3.2/§3.5). */
  color: var(--urgence);
}

.carte-sous-titre {
  margin: var(--esp-1) 0 0;
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-details {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.carte-ligne-meta {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--t-petit);
  color: var(--texte-secondaire);
  line-height: var(--i-petit);
}
/* Puce décorative (déjà aria-hidden, toujours doublée d'un mot) retirée :
   un aplat coloré par ligne alourdit la liste sans ajouter d'information. */
.carte-ligne-meta .ico { display: none; }

.carte-ligne-texte {
  font-family: var(--police);
  min-width: 0;
}
.carte-ligne-meta .heure,
.carte-montant {
  font-family: var(--police-donnees);
  font-variant-numeric: tabular-nums;
}

/* Icônes linéaires (CSS, trait ~1.75, sans library) — CHARTE §6.7 */
.ico {
  width: var(--esp-4);
  height: var(--esp-4);
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--action);
  opacity: 0.85;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.ico--calendrier {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.ico--salaire,
.ico--cout {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v10M9 10h4.5a1.5 1.5 0 0 1 0 3H9m0 0h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v10M9 10h4.5a1.5 1.5 0 0 1 0 3H9m0 0h5'/%3E%3C/svg%3E");
}
.ico--lieu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-4.5 7-11a7 7 0 1 0-14 0c0 6.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.ico--etab,
.ico--statut {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='1'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='1'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}
.ico--menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E");
  background: var(--texte-principal);
  width: var(--esp-6);
  height: var(--esp-6);
  margin: 0;
  opacity: 1;
}
.ico--loupe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background: var(--texte-tertiaire);
  margin: 0;
  opacity: 1;
}
.ico--filtre {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='10' y1='17' x2='14' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='10' y1='17' x2='14' y2='17'/%3E%3C/svg%3E");
  background: var(--action);
  margin: 0;
  opacity: 1;
  width: var(--esp-6);
  height: var(--esp-6);
}
.ico--sortie {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  background: var(--texte-inverse);
  margin: 0;
  opacity: 1;
  width: var(--esp-6);
  height: var(--esp-6);
}

/* ——— Navigation FIXE : bas (compact) / haut (large) ——— */
.onglets {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--couche-fixe);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--bordure);
  padding: var(--esp-1) 0 env(safe-area-inset-bottom, 0);
}

.onglet {
  min-height: calc(var(--cible) + var(--esp-1));
  width: auto;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--t-etiquette);
  color: var(--texte-tertiaire);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.25rem var(--esp-1);
}

.onglet--actif {
  color: var(--action);
  font-weight: var(--g-semi);
}

.onglet-ico {
  width: calc(1.5rem * var(--facteur-texte));
  height: calc(1.5rem * var(--facteur-texte));
  background: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.onglet-ico--missions,
.onglet-ico--travail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.onglet-ico--planning {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}
.onglet-ico--reseau {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M14 19c.3-1.5 1.5-3 3.5-3s3 1 3.5 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 19c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M14 19c.3-1.5 1.5-3 3.5-3s3 1 3.5 3'/%3E%3C/svg%3E");
}
.onglet-ico--historique {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 9 8 9'/%3E%3C/svg%3E");
}
.onglet-ico--admin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M17 7l2.1-2.1'/%3E%3C/svg%3E");
}
.onglet-ico--entreprise,
.onglet-ico--profil {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.5-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}
.onglet-ico--revenus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M4 19V5M4 19h16'/%3E%3Crect x='7' y='10' width='3' height='6'/%3E%3Crect x='12' y='7' width='3' height='9'/%3E%3Crect x='17' y='12' width='3' height='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M4 19V5M4 19h16'/%3E%3Crect x='7' y='10' width='3' height='6'/%3E%3Crect x='12' y='7' width='3' height='9'/%3E%3Crect x='17' y='12' width='3' height='4'/%3E%3C/svg%3E");
}
.onglet-ico--paie {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M8 14h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M8 14h3'/%3E%3C/svg%3E");
}

/* Large : navigation en haut, fixe au scroll */
@media (min-width: 1025px) {
  body {
    padding-bottom: var(--esp-4);
    padding-top: calc(var(--cible) + var(--esp-6));
  }
  .onglets {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-carte);
  }
  #app-connectee:not([hidden]),
  #app-extra:not([hidden]) {
    max-width: var(--contenant-max);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tiroir { transition: none; }
  .carte { transition: none; }
}

/* =============================================================
   Direction V0 adaptee a easyextra — aout 2026
   REQ-TEC-020b / REQ-UI-010 / REQ-UI-012

   Le prototype V0 sert ici de reference de composition (navigation
   bleu nuit, accents turquoise, cartes de tableau de bord). Les
   contenus et les interactions restent ceux des deux applications
   easyextra, et continuent d'utiliser les jetons semantiques.
   ============================================================= */

.barre-haute {
  min-height: 4.25rem;
  padding-inline: clamp(var(--esp-4), 4vw, var(--esp-6));
  box-shadow: var(--ombre-ligne);
}

.barre-haute .marque-centre {
  text-align: left;
  color: var(--texte-marque);
}

.entete-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
}

.role-badge,
.langue-badge {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--esp-3);
  border-radius: var(--rayon-carte);
  background: var(--surface-discrete);
  color: var(--navigation-fond);
  font-size: var(--t-etiquette);
  font-weight: var(--g-semi);
}

.langue-badge {
  width: 2.25rem;
  padding: 0;
}

.bande-recherche {
  padding: var(--esp-3) clamp(var(--esp-4), 4vw, var(--esp-6));
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.champ-recherche {
  background: var(--fond-app);
  border-color: var(--bordure);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.champ-recherche:focus-within {
  border-color: var(--bordure-active);
  box-shadow: var(--ombre-focus-sel);
}

.btn-filtre {
  background: var(--surface-discrete);
  border-color: transparent;
}

.tiroir {
  background: var(--navigation-fond);
  color: var(--navigation-texte);
  box-shadow: var(--ombre-tiroir);
}

.tiroir-entete {
  background: transparent;
  border-bottom-color: var(--navigation-accent-soft);
  padding-block: var(--esp-6);
}

.tiroir-avatar {
  background: var(--navigation-accent);
  color: var(--navigation-texte);
  box-shadow: var(--ombre-focus-nav);
}

.tiroir-role { color: var(--navigation-texte-soft); }

.tiroir-nav { padding: var(--esp-3) var(--esp-2); }

.tiroir-lien {
  color: var(--navigation-texte);
  border-radius: var(--rayon-controle);
  padding-inline: var(--esp-3);
}

.tiroir-lien:hover,
.tiroir-lien:focus-visible,
.tiroir-lien--actif {
  background: var(--navigation-surface-soft);
  color: var(--navigation-texte);
}

.tiroir-lien--actif {
  box-shadow: inset 3px 0 0 var(--navigation-accent);
}

.tiroir-pied {
  background: transparent;
  border-top-color: var(--navigation-accent-soft);
  padding: var(--esp-2);
}

.ecran-dashboard {
  padding-top: var(--esp-4);
  background: var(--fond-app);
}

.rails-missions { gap: var(--esp-8); }

.rail-entete {
  align-items: flex-end;
  padding-inline: clamp(var(--esp-4), 4vw, var(--esp-6));
}

.rail-titre {
  font-family: var(--police-titre);
  letter-spacing: -0.02em;
}

.rail-scroll {
  gap: var(--esp-4);
  padding-inline: clamp(var(--esp-4), 4vw, var(--esp-6));
  padding-bottom: var(--esp-4);
}

.carte-mission {
  flex-basis: min(82vw, var(--carte-largeur));
  min-height: 13rem;
  padding: var(--esp-3);
  border-color: var(--bordure);
  box-shadow: var(--ombre-carte-m);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.carte-mission:hover,
.carte-mission:focus-visible {
  border-color: var(--bordure-active);
  box-shadow: var(--ombre-carte-l);
  transform: translateY(-2px);
}

.carte-haut {
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--bordure);
}

.carte-titre { font-family: var(--police-titre); }
.carte-details { padding-top: var(--esp-2); gap: var(--esp-1); }

.carte-ligne-meta:has(.ico--salaire) {
  color: var(--texte-principal);
  font-family: var(--police-donnees);
  font-size: var(--t-montant);
  font-weight: var(--g-semi);
}

.zone-vide {
  margin-inline: clamp(var(--esp-4), 4vw, var(--esp-6));
  border: 1px dashed var(--bordure);
  background: color-mix(in srgb, var(--surface) 72%, var(--fond-app));
}

.onglets {
  box-shadow: var(--ombre-bas);
}

.onglet { transition: color var(--transition), background var(--transition); }
.onglet--actif { background: var(--surface-selection); }

@media (min-width: 64rem) {
  #app-connectee,
  #app-extra {
    min-height: 100dvh;
    padding-left: 18rem;
  }

  #tiroir[hidden],
  #ex-tiroir[hidden],
  #tiroir,
  #ex-tiroir {
    display: flex;
    width: 18rem;
  }

  #tiroir-voile,
  #ex-tiroir-voile,
  #btn-menu,
  #btn-ex-menu {
    display: none;
  }

  .barre-haute {
    grid-template-columns: 1fr auto;
    padding-inline: var(--esp-6);
  }

  .barre-haute > :last-child { display: none; }

  .bande-recherche { padding-inline: var(--esp-6); }

  .onglets {
    position: fixed;
    left: 18rem;
    right: 0;
    bottom: 0;
    border-top: 1px solid var(--bordure);
  }

  .ecran-dashboard,
  .panneau-onglet {
    max-width: 84rem;
    width: 100%;
    margin-inline: auto;
  }
}

/* Contenant large — plus de cadre téléphone 26rem (charte §11). */
@media (min-width: 32rem) {
  body:has(#app-connectee:not([hidden])),
  body:has(#app-extra:not([hidden])) {
    background: var(--fond-app);
  }

  #app-connectee,
  #app-extra {
    min-height: 100dvh;
    max-width: var(--contenant-max);
    margin-inline: auto;
    padding-left: 0;
    background: var(--fond-app);
    box-shadow: none;
    overflow: visible;
  }

  #tiroir[hidden],
  #ex-tiroir[hidden] { display: none; }
  #tiroir,
  #ex-tiroir { width: min(82%, 20rem); }

  #tiroir-voile,
  #ex-tiroir-voile {
    max-width: none;
    left: 0;
    transform: none;
  }

  #btn-menu,
  #btn-ex-menu { display: inline-flex; }

  .barre-haute {
    grid-template-columns: var(--cible) 1fr auto;
    padding-inline: var(--esp-4);
  }
  .barre-haute > :last-child { display: block; }
  .bande-recherche { padding-inline: var(--esp-4); }

  .onglets {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    bottom: 0;
    border-top: 1px solid var(--bordure);
  }

  .ecran-dashboard,
  .panneau-onglet {
    max-width: var(--contenant-max);
    width: 100%;
    margin-inline: auto;
  }
}

@media (min-width: 1025px) {
  .onglets {
    top: 0;
    bottom: auto;
    border-bottom: 1px solid var(--bordure);
    border-top: none;
  }
}

/* ========== CHARTE §6.6 — écran de clôture ========== */
.ecran-cloture {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--fond-app);
}
.ecran-cloture__corps {
  flex: 1;
  padding: var(--esp-4);
  padding-bottom: calc(var(--esp-8) + 4rem);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}
.ecran-cloture__bandeau-provisoire {
  background: var(--urgence-fond);
  color: var(--etat-attente-texte);
  padding: var(--esp-2) var(--esp-3);
  font-weight: 600;
  text-align: center;
}
.ecran-cloture__bandeau-provisoire-detail {
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
  padding: 0 var(--esp-3);
}
.ecran-cloture__gate-paie {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--etat-attente-texte);
  padding: var(--esp-3);
  font-size: 0.92rem;
  color: var(--texte-secondaire);
  margin: 0;
}
.ecran-cloture__etat-cloture {
  font-weight: 600;
  text-align: center;
  margin: 0;
  color: var(--texte);
}
.ecran-cloture__notice-paiement {
  background: var(--etat-attente-fond);
  color: var(--etat-attente-texte);
  padding: var(--esp-2) var(--esp-3);
  margin: 0;
  font-size: 0.92rem;
}
.ecran-cloture__dual--colonne {
  flex-direction: column;
}
.ecran-cloture__alerte {
  color: var(--etat-attente-texte);
  background: var(--etat-attente-fond);
  padding: var(--esp-2) var(--esp-3);
}
.ecran-cloture__net-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30dvh;
}
.ecran-cloture__net { text-align: center; margin: 0; }
.ecran-cloture__cta {
  width: 100%;
  min-height: var(--cible-cloture);
  height: var(--cible-cloture);
  border: none;
  border-radius: var(--rayon-controle);
  background: var(--action);
  color: var(--action-texte);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.ecran-cloture__actions {
  position: sticky;
  bottom: 0;
  padding: var(--esp-4);
  padding-bottom: max(var(--esp-4), env(safe-area-inset-bottom));
  background: var(--fond-app);
  min-height: 33dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--esp-2);
}
.ecran-cloture__actions--colonne {
  min-height: 40dvh;
}
.ecran-cloture__action-secondaire {
  width: 100%;
  min-height: var(--cible-cloture);
  height: var(--cible-cloture);
  border: none;
  background: transparent;
  color: var(--texte-secondaire);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.ecran-cloture__dual {
  display: flex;
  gap: var(--esp-3);
  width: 100%;
}
.ecran-cloture__cta--egal {
  flex: 1;
}
.ecran-cloture__cta--secondaire {
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure);
}
.ecran-cloture__message-differe {
  background: var(--etat-attente-fond);
  color: var(--etat-attente-texte);
  padding: var(--esp-3);
  font-weight: 600;
  margin: 0;
}
.ecran-cloture__echeance-differe {
  font-family: var(--police-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  margin: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ecran-cloture__repas {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 1rem 0 0.25rem;
  font-size: 1rem;
}
.ecran-cloture__repas-detail {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  opacity: 0.85;
}
.document.document--perfore {
  border-radius: var(--rayon-document);
  box-shadow: none;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 2px dashed var(--bordure-forte);
  border-bottom: 2px dashed var(--bordure-forte);
  padding: var(--esp-3);
}
.document__titre {
  font-size: 0.95rem;
  margin: 0 0 var(--esp-2);
  font-weight: 600;
}

/* Passe UI/UX — REQ-UI-010 / REQ-UI-012 / REQ-UI-015. */
:focus-visible { outline: 3px solid var(--bordure-active); outline-offset: 3px; }

.barre-haute { min-height: 3.25rem; padding-block: var(--esp-1); box-shadow: none; }
.barre-haute .marque-centre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete-actions {
  gap: var(--esp-1);
  flex-wrap: nowrap;
  align-items: center;
}
.role-badge, .langue-badge {
  min-height: 1.75rem;
  border: 1px solid var(--bordure);
  background: var(--surface-discrete);
  font-size: 0.7rem;
  padding-inline: var(--esp-2);
}

.bande-recherche {
  position: sticky;
  top: 3.25rem;
  z-index: 15;
  padding-block: var(--esp-2) var(--esp-3);
  box-shadow: var(--ombre-ligne);
}
.champ-recherche { min-height: var(--cible); border-radius: var(--rayon-carte); }
.btn-filtre { border-radius: var(--rayon-carte); border: 1px solid var(--bordure); }

.zone-a-faire {
  margin: var(--esp-3) var(--esp-4) 0;
  padding: var(--esp-3);
  border-left: 4px solid var(--urgence);
  box-shadow: none;
}
.zone-a-faire p { margin: 0; }

.ecran-dashboard { padding-top: var(--esp-3); }
.rails-missions { gap: var(--esp-6); }
.rail-section { gap: var(--esp-3); }
.rail-entete { align-items: center; min-height: var(--cible); }
.rail-titre { font-size: var(--t-titre-3); line-height: var(--i-titre-3); }
.rail-compteur {
  display: inline-flex;
  min-width: 1.5rem;
  min-height: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-left: var(--esp-1);
  border-radius: var(--rayon-etiquette);
  background: var(--surface-discrete);
  color: var(--texte-secondaire);
  font-family: var(--police-donnees);
  font-weight: var(--g-semi);
}

.rail-navigation { display: flex; gap: var(--esp-2); flex-shrink: 0; }
.rail-navigation__bouton {
  width: var(--cible-min);
  height: var(--cible-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  color: var(--navigation-fond);
  font: inherit;
  font-family: var(--police-donnees);
  font-size: var(--t-titre-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.rail-navigation__bouton:hover { background: var(--surface-selection); border-color: var(--bordure-active); }
.rail-navigation__bouton:active { transform: scale(0.96); }

.rail-scroll {
  gap: var(--esp-3);
  scroll-padding-inline: var(--esp-4);
  overscroll-behavior-inline: contain;
}
.carte-mission {
  flex-basis: min(var(--carte-largeur), calc(100vw - 3.5rem));
  min-height: 0;
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte-m2);
}
.carte-mission.carte-mission--flash {
  outline: 2px solid var(--navigation-accent);
  outline-offset: 2px;
}
.carte-mission .carte-action {
  align-self: flex-end;
  width: auto;
}
.carte-mission:hover, .carte-mission:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--ombre-carte-l2);
}
.carte-action {
  transition: color var(--transition);
}
.carte-mission:hover .carte-action { color: var(--action-survol); }

.zone-vide {
  min-height: 6rem;
  display: grid;
  place-items: center;
  padding: var(--esp-4);
  border-style: dashed;
  font-style: normal;
  line-height: var(--i-petit);
}

#bloc-creation-mission { margin-top: 0; overflow: hidden; box-shadow: var(--ombre-carte); }
#bloc-creation-mission > summary { position: relative; padding-left: calc(var(--esp-4) + var(--esp-6)); }
#bloc-creation-mission > summary::before {
  content: '+';
  position: absolute;
  left: var(--esp-4);
  top: 50%;
  width: var(--esp-6);
  height: var(--esp-6);
  display: grid;
  place-items: center;
  border-radius: var(--rayon-photo);
  background: var(--navigation-fond);
  color: var(--navigation-texte);
  transform: translateY(-50%);
  font-family: var(--police-donnees);
}
#bloc-creation-mission[open] > summary::before { content: '−'; }

.onglets {
  padding-top: var(--esp-1);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
}
.onglet { min-height: calc(var(--cible) + var(--esp-1)); border-top: 3px solid transparent; }
.onglet--actif { border-top-color: var(--navigation-accent); background: var(--surface-selection); }

@media (min-width: 32rem) {
  body:has(#app-connectee:not([hidden])), body:has(#app-extra:not([hidden])) { padding-block: var(--esp-4); }
  #app-connectee, #app-extra {
    min-height: calc(100dvh - (2 * var(--esp-4)));
    border-radius: var(--rayon-carte);
  }
  .onglets {
    bottom: var(--esp-4);
    border-radius: var(--rayon-document) var(--rayon-document) var(--rayon-carte) var(--rayon-carte);
    overflow: hidden;
  }
}

/*
 * P1 — desktop : la règle 32rem ci-dessus réimposait `bottom` APRÈS le media
 * 1025px (`top: 0; bottom: auto`), étirant `.onglets` sur presque toute la
 * hauteur et interceptant les clics du formulaire. On rétablit la barre haute.
 * z-index > barre-haute (20) pour que les onglets restent cliquables au-dessus
 * de la marque sticky (sans décaler `.barre-haute`, qui recouvrirait le contenu).
 */
@media (min-width: 1025px) {
  .onglets {
    top: 0;
    bottom: auto;
    height: auto;
    max-height: none;
    align-content: center;
    border-radius: var(--rayon-document);
    overflow: visible;
    z-index: 25;
  }
  .onglet {
    height: auto;
    align-self: center;
  }
}

@media (max-width: 40rem) {
  .role-badge { display: none; }
}
@media (max-width: 23rem) {
  .rail-entete { align-items: flex-start; }
  .rail-navigation__bouton { width: 2.5rem; height: 2.5rem; }
}

/* --- Lot 3c : grilles temporelles (REQ-PLA-020, REQ-CAL-003) --- */
.police-donnees { font-family: var(--police-donnees); font-variant-numeric: tabular-nums; }

.cal-etab { padding: 0 var(--esp-4) var(--esp-6); }
.cal-etab-entete { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-3); }
.cal-etab-titre { font-weight: var(--g-semi); color: var(--texte-principal); }
.cal-etab-grille {
  display: grid;
  gap: var(--esp-2);
  grid-template-columns: 1fr;
}
.cal-etab-creneau {
  padding: var(--esp-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
}
/* REQ-PLA-022 : manque = action requise (état attente), jamais rouge impayé */
.cal-etab-creneau--manque.etat-attente,
.cal-etab-creneau.etat-attente {
  background: var(--etat-attente-fond);
  border-color: var(--etat-attente-texte);
  color: var(--etat-attente-texte);
}
.cal-etab-heures { margin: 0; font-size: var(--t-heure); }
.cal-etab-meta { margin: var(--esp-1) 0 0; color: var(--texte-secondaire); }
.cal-etab-chiffres { margin: var(--esp-2) 0 0; font-weight: var(--g-semi); }
.cal-etab-preavis { margin: var(--esp-2) 0 0; font-size: var(--t-etiquette); letter-spacing: var(--interlettrage-etiquette); }

.cal-extra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: 0;
  max-width: 100%;
}
.cal-extra-grille-mois {
  margin: 0;
}
.cal-extra-case--confirme {
  background: var(--surface-selection);
  border-color: var(--action);
  color: var(--action);
  font-weight: var(--g-semi);
}
.cal-extra-case--attente {
  background: var(--etat-attente-fond);
  border-color: var(--etat-attente-texte);
  color: var(--etat-attente-texte);
  font-weight: var(--g-semi);
}
.cal-extra-case--indispo {
  background: var(--etat-neutre-fond);
  border-color: var(--bordure-forte);
  color: var(--etat-neutre-texte);
}
.cal-extra-case--dispo {
  background: var(--etat-ok-fond);
  border-color: var(--etat-ok-texte);
  color: var(--etat-ok-texte);
}
.cal-extra-case--neutre {
  background: var(--surface);
  color: var(--texte-tertiaire);
}
.cal-extra-case--selection {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}
.cal-extra-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cal-extra-legende-item {
  margin: 0;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--rayon-carte);
  border: 1px solid var(--bordure);
  font-size: var(--t-etiquette);
  letter-spacing: var(--interlettrage-etiquette);
}
.cal-extra-detail {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface-discrete);
}
.cal-extra-detail-titre {
  margin: 0;
  font-size: var(--t-titre-3);
  font-weight: var(--g-semi);
}
.cal-extra-detail-ligne {
  margin: 0;
}
.cal-extra-indispo-form {
  margin-top: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--bordure);
}
.cal-extra-indispo-heures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}
.cal-extra-indispo-heures input[type='time'] {
  min-height: 2.75rem;
  width: 100%;
  padding: var(--esp-2);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.cal-extra-missions {
  margin-top: var(--esp-2);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

/* V1.1 L2 — multi-sélection de journées (création mission) */
.sel-jours {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  max-width: 100%;
  overflow-x: hidden;
}
.sel-jours-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}
.sel-jours-titre {
  margin: 0;
  flex: 1;
  text-align: center;
  font-weight: var(--g-semi);
  text-transform: capitalize;
}
.sel-jours-nav {
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.25rem;
  line-height: 1;
}
.sel-jours-sem,
.sel-jours-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--esp-1);
  width: 100%;
}
.sel-jours-sem-lib {
  text-align: center;
  font-size: var(--t-etiquette);
  color: var(--texte-tertiaire);
  letter-spacing: var(--interlettrage-etiquette);
  text-transform: uppercase;
}
.sel-jours-case {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 0;
  margin: 0;
  padding: var(--esp-1);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  color: var(--texte-principal);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
}
.sel-jours-case--vide {
  border: none;
  background: transparent;
  pointer-events: none;
  min-height: 2.75rem;
}
.sel-jours-case--selectionnee {
  background: var(--etat-ok-fond);
  color: var(--etat-ok-texte);
  border-color: var(--etat-ok-texte);
  font-weight: var(--g-semi);
  box-shadow: inset 0 0 0 1px var(--etat-ok-texte);
}
.sel-jours-case--ancre {
  outline: 2px dashed var(--texte-principal);
  outline-offset: 1px;
}
.sel-jours-case--selectionnee::after {
  content: '';
}
.sel-jours-resume {
  margin: var(--esp-1) 0 0;
  font-weight: var(--g-semi);
  color: var(--texte-principal);
}
.sel-jours-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  max-width: 100%;
}
.sel-jours-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  max-width: 100%;
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--rayon-photo);
  border: 1px solid var(--bordure);
  background: var(--surface-discrete);
  font-size: var(--t-etiquette);
}
.sel-jours-chip-lib {
  white-space: nowrap;
}
.sel-jours-chip-x {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--rayon-photo);
  background: transparent;
  color: var(--texte-principal);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.sel-jours-voir-toutes {
  min-height: 2.5rem;
}

/* i18n — sélecteur FR | DE | IT | EN (une seule rangée, B5-A6) */
.selecteur-langue {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  align-items: center;
  max-width: none;
  justify-content: flex-end;
}
.selecteur-langue-btn {
  min-height: 1.75rem;
  min-width: 1.75rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--bordure-discrete);
  border-radius: var(--rayon-bouton);
  background: var(--surface-carte);
  color: var(--texte-principal);
  font: inherit;
  font-size: 0.7rem;
  font-family: var(--police-mono, inherit);
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
}
.selecteur-langue-btn--actif {
  border-color: var(--accent-principal);
  background: var(--surface-accent);
  font-weight: 600;
}
.selecteur-langue-btn:focus-visible {
  outline: 2px solid var(--accent-principal);
  outline-offset: 2px;
}

/* V1.1 L6 — tuiles de choix rapide (CHARTE : pas de pills rounded-full) */
.tuiles-choix-zone:empty {
  display: none;
}
.tuiles-choix {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.tuiles-choix-grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.tuile-choix {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--bordure-discrete);
  border-radius: var(--rayon-bouton);
  background: var(--surface-carte);
  color: var(--texte-principal);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
}
.tuile-choix--autre {
  align-self: flex-start;
}
.tuile-choix--selectionnee {
  border-color: var(--accent-principal);
  background: var(--surface-accent);
  box-shadow: inset 0 0 0 1px var(--accent-principal);
  font-weight: 600;
}
.tuile-choix:focus-visible {
  outline: 2px solid var(--accent-principal);
  outline-offset: 2px;
}
.champ-autre-saisie[hidden] {
  display: none !important;
}

/* Cartes mission multi-jours — chips journées */
.carte-journees-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}
.carte-journee-chip {
  display: inline-block;
  padding: var(--esp-1) var(--esp-2);
  border: 1px solid var(--bordure-discrete);
  border-radius: var(--rayon-bouton);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--texte-secondaire);
  background: var(--surface-fond);
}
.carte-lien-etendu {
  margin: var(--esp-1) 0 0;
  font-size: 0.9rem;
  color: var(--texte-secondaire);
}

/* Jours de semaine (plan de besoins) — multi-sélection, pas pills */
.jours-semaine-grille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.jour-semaine {
  appearance: none;
  -webkit-appearance: none;
  min-width: 2.75rem;
  min-height: var(--cible);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  background: var(--surface);
  color: var(--texte-principal);
  font: inherit;
  font-size: var(--t-etiquette);
  font-weight: var(--g-semi);
  cursor: pointer;
  touch-action: manipulation;
}
.jour-semaine--selectionne {
  border-color: var(--bordure-active);
  background: var(--surface-selection);
  outline: 2px solid var(--navigation-accent);
  outline-offset: 0;
}
.jour-semaine:focus-visible {
  outline: 2px solid var(--navigation-accent);
  outline-offset: 2px;
}