/* Technosurf Équipe — style commun. Pensé d'abord pour le téléphone. */
@font-face { font-family: Rubik; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 500; font-display: swap; src: url("polices/rubik-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 600; font-display: swap; src: url("polices/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 700; font-display: swap; src: url("polices/rubik-latin-700-normal.woff2") format("woff2"); }
:root {
  --navy: #14213D;
  --navy-2: #22335A;
  --orange: #E8604C;
  --orange-fonce: #C9452F;
  --fond: #F4F5F8;
  --carte: #FFFFFF;
  --texte: #1B2235;
  --doux: #5F6880;
  --trait: #E1E4EC;
  --vert: #1F8A5B;
  --vert-fond: #E6F5EE;
  --rouge: #C23B32;
  --rouge-fond: #FCEBEA;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .05);
  --menu-h: 64px;
  --entete-h: 56px;
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Rubik, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.45;
  overflow-x: hidden;
}
body.avec-menu { padding-bottom: calc(var(--menu-h) + env(safe-area-inset-bottom) + 16px); }
a { color: var(--navy); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
small { font-size: .82em; }
.icone { flex: none; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  height: calc(var(--entete-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
}
.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; height: 22px; width: auto; }
.entete-titre { flex: 1; margin: 0; font-size: 1rem; font-weight: 500; text-align: center; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-droite { text-decoration: none; }
.pastille {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--orange); color: #fff; font-weight: 600;
}
.pastille.petite { width: 32px; height: 32px; font-size: .9rem; background: var(--navy-2); }
.bandeau-voir {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; background: #FFF1D6; color: #6B4A00; font-size: .9rem; text-align: center;
}
.bandeau-voir form { display: inline; margin: 0; }

/* ---------- Contenu ---------- */
.contenu { max-width: 680px; margin: 0 auto; padding: 16px; }
.sans-menu .contenu { padding-top: 32px; }
.retour { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; text-decoration: none; color: var(--doux); font-weight: 500; }
.intro { margin: 4px 0 18px; }
.surtitre { margin: 0 0 2px; color: var(--doux); font-size: .92rem; }
.titre-page { font-size: 1.6rem; margin: 0; }
.titre-section { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin: 22px 4px 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.compte { background: var(--trait); color: var(--texte); border-radius: 99px; padding: 0 8px; font-size: .78rem; letter-spacing: 0; }
.aide { color: var(--doux); font-size: .92rem; margin: .4em 0; }
.centre { text-align: center; }
.version { margin-top: 24px; font-size: .8rem; }

.carte {
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 16px; margin-bottom: 14px;
}
.carte > :last-child { margin-bottom: 0; }
.carte-vide { text-align: center; padding: 32px 20px; }
.carte-vide .icone { color: var(--orange); margin-bottom: 8px; }

/* ---------- Messages ---------- */
.message { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 500; }
.message-ok { background: var(--vert-fond); color: var(--vert); }
.message-erreur { background: var(--rouge-fond); color: var(--rouge); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 12px;
  border: 1.5px solid var(--trait); background: #fff; color: var(--navy);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bouton:active { transform: scale(.98); }
.bouton-principal { background: var(--orange); border-color: var(--orange); color: #fff; }
.bouton-principal:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); }
.bouton-danger { background: #fff; border-color: var(--rouge); color: var(--rouge); }
.bouton-grand { width: 100%; min-height: 56px; font-size: 1.05rem; }
.bouton-choix { justify-content: space-between; background: #fff; border: 0; box-shadow: var(--ombre); }
.bouton-choix small { color: var(--doux); font-weight: 400; }
.lien-bouton { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ligne-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ligne-boutons .bouton { flex: 1 1 200px; }
.pile { display: grid; gap: 12px; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 14px; }
.champ { display: grid; gap: 6px; }
.champ > span { font-weight: 500; font-size: .95rem; }
.champ small { color: var(--doux); font-weight: 400; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], input:not([type]), select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--trait); border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; color: var(--texte);
}
textarea { resize: none; overflow: hidden; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 33, 61, .12); }
.case { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; cursor: pointer; }
.case input { width: 22px; height: 22px; margin: 0; accent-color: var(--orange); flex: none; }
.zone-danger { border-top: 1px solid var(--trait); padding-top: 14px; margin-top: 4px; }

/* ---------- Connexion ---------- */
.connexion { max-width: 420px; margin: 0 auto; }
.connexion h1 { margin-top: 8px; }
.connexion-logo { display: grid; gap: 6px; justify-items: start; margin-bottom: 28px; color: var(--navy); }
.connexion-logo img { display: block; height: 36px; width: auto; max-width: 100%; }
.connexion-logo > span { color: var(--doux); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.grille-prenoms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grille-prenoms .bouton-choix { justify-content: center; }

/* ---------- Aujourd'hui ---------- */
.grille-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.action {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px;
  min-height: 104px; padding: 14px; border-radius: var(--rayon);
  background: var(--carte); box-shadow: var(--ombre); text-decoration: none; color: var(--texte); font-weight: 500;
}
.action .icone { color: var(--orange); }
.action:first-child { background: var(--navy); color: #fff; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.liste-simple li:last-child { border-bottom: 0; }
.liste-simple span { flex: 1; }
.liste-simple .icone { color: var(--doux); }
.etiquette { font-style: normal; font-size: .75rem; padding: 2px 8px; border-radius: 99px; background: var(--fond); color: var(--doux); white-space: nowrap; }

/* ---------- Plus : rubriques qui s'ouvrent ---------- */
.pile-rubriques { display: grid; gap: 12px; }
.rubrique { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.rubrique summary {
  list-style: none; cursor: pointer; padding: 16px; font-weight: 600; font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
}
.rubrique summary::-webkit-details-marker { display: none; }
.rubrique summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--doux); border-bottom: 2px solid var(--doux); transform: rotate(45deg); margin-right: 4px; }
.rubrique[open] summary::after { transform: rotate(-135deg); }
.rubrique-contenu { border-top: 1px solid var(--trait); padding: 4px 0; }
.ligne-lien {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px;
  color: var(--texte); text-decoration: none; width: 100%;
}
.ligne-lien > span { flex: 1; display: flex; flex-direction: column; }
.ligne-lien > .icone:first-child { color: var(--navy); }
.ligne-lien > .icone:last-child { color: var(--doux); }
.ligne-bouton { background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.estompe { opacity: .55; }
.voir-comme { display: grid; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--trait); }
.liste-liens { padding: 4px 0; }
.liste-liens .ligne-lien { border-bottom: 1px solid var(--trait); }
.liste-liens .ligne-lien:last-child { border-bottom: 0; }
.ajout summary { list-style: none; width: 100%; }
.ajout summary::-webkit-details-marker { display: none; }
.ajout[open] summary { margin-bottom: 16px; }

/* ---------- Code provisoire ---------- */
.carte-code { border: 2px solid var(--orange); }
.code { font-size: 2.2rem; font-weight: 700; letter-spacing: .12em; text-align: center; margin: 8px 0; color: var(--navy); }

/* ---------- Historique ---------- */
.ligne-historique { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trait); font-size: .92rem; }
.ligne-historique:last-child { border-bottom: 0; }
.quand { color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Menu du bas ---------- */
.menu-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  height: calc(var(--menu-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--trait);
}
.menu-bas a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--doux); text-decoration: none; font-size: .72rem; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.menu-bas a.actif { color: var(--orange); }
.menu-bas a.actif span { color: var(--navy); font-weight: 600; }

/* ---------- Ordinateur ---------- */
@media (min-width: 760px) {
  .contenu { padding: 24px; }
  .grille-actions { grid-template-columns: repeat(4, 1fr); }
  .menu-bas { justify-content: center; gap: 8px; }
  .menu-bas a { flex: 0 0 110px; }
}

/* ===================== Étape 2 ===================== */

/* ---------- Onglets ---------- */
.onglets {
  display: flex; gap: 6px; margin: 0 0 14px; padding: 4px;
  background: #E7E9F0; border-radius: 12px; overflow-x: auto; scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  flex: 1 0 auto; text-align: center; padding: 9px 12px; border-radius: 9px;
  color: var(--doux); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.onglets a.actif { background: #fff; color: var(--navy); font-weight: 600; box-shadow: var(--ombre); }
.onglets .nb { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--orange); color: #fff; font-size: .75rem; line-height: 20px; margin-left: 2px; }

/* ---------- Tâches ---------- */
.liste-taches { display: grid; gap: 10px; }
.tache {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre);
  border-left: 4px solid transparent;
}
.tache.urgente { border-left-color: var(--orange); }
.tache form { margin: 0; }
.coche {
  width: 32px; height: 32px; flex: none; border-radius: 50%; margin-top: 1px;
  border: 2px solid #C4C9D6; background: #fff; color: #fff; font-weight: 700; font-size: 1rem;
  cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.coche:hover { border-color: var(--vert); }
.tache.faite .coche { background: var(--vert); border-color: var(--vert); }
.tache-texte { flex: 1; min-width: 0; color: var(--texte); text-decoration: none; display: grid; gap: 4px; }
.tache-texte strong { font-weight: 500; overflow-wrap: anywhere; }
.tache.faite .tache-texte strong { text-decoration: line-through; color: var(--doux); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .84rem; color: var(--doux); align-items: center; }
.etiquette-urgent { background: #FDE6E2; color: var(--orange-fonce); font-weight: 600; }
.etiquette-retard { background: var(--rouge-fond); color: var(--rouge); font-weight: 600; }
.etiquette-jour { background: #E4ECFB; color: #2849A0; font-weight: 600; }
.lien-suite { display: block; margin: 10px 4px 0; color: var(--navy); font-weight: 500; text-decoration: none; }

/* ---------- Champ de date avec calendrier ---------- */
.champ-date { display: flex; gap: 8px; position: relative; }
.champ-date input[data-date] { flex: 1; }
.bouton-calendrier {
  flex: none; width: 50px; border-radius: 12px; border: 1.5px solid var(--trait);
  background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center;
}
.cache-calendrier { position: absolute; right: 0; bottom: 0; width: 50px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* ---------- Choix en pastilles (genre) ---------- */
.choix-genre { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-genre label { position: relative; }
.choix-genre input { position: absolute; opacity: 0; inset: 0; }
.choix-genre span {
  display: inline-block; padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--trait);
  background: #fff; font-weight: 500; cursor: pointer;
}
.choix-genre input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.choix-genre input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 33, 61, .2); }

/* ---------- Recherche ---------- */
.recherche { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.recherche input[type=search] { flex: 1 1 180px; }
.recherche select { flex: 0 1 140px; }
.recherche .bouton { flex: 0 0 auto; }

/* ---------- Journal ---------- */
.entree header, .demande header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.entree.genre-incident { border-left: 4px solid var(--rouge); }
.etiquette-passation { background: #E4ECFB; color: #2849A0; }
.etiquette-info { background: var(--fond); color: var(--doux); }
.etiquette-incident { background: var(--rouge-fond); color: var(--rouge); font-weight: 600; }
.texte-libre { margin: 0 0 6px; overflow-wrap: anywhere; }
.petit-menu { margin-top: 8px; }
.petit-menu summary { cursor: pointer; color: var(--doux); font-size: .88rem; list-style: none; }
.petit-menu summary::-webkit-details-marker { display: none; }
.petit-menu[open] summary { margin-bottom: 10px; }
.liste-passation { display: grid; gap: 12px; }
.ligne-passation { padding-bottom: 10px; border-bottom: 1px solid var(--trait); }
.ligne-passation.genre-incident { border-left: 3px solid var(--rouge); padding-left: 10px; }
.ligne-passation .aide { margin: 0; }
.rouge { color: var(--rouge); }

/* ---------- Notes ---------- */
.note.rangee { opacity: .75; }
.ligne-boutons.petits .bouton { flex: 1 1 auto; min-height: 42px; padding: 8px 12px; font-size: .9rem; }
.ligne-boutons.petits { margin: 8px 0 0; }
.rangees > summary { cursor: pointer; list-style: none; }
.rangees > summary::-webkit-details-marker { display: none; }

/* ---------- Demandes ---------- */
.alerte {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte);
  border: 2px solid var(--orange);
}
.alerte > span { flex: 1; display: grid; gap: 2px; }
.alerte small { color: var(--doux); }
.alerte .icone:first-child { color: var(--orange); }
.etiquette-attente { background: #FFF1D6; color: #6B4A00; font-weight: 600; }
.etiquette-acceptee { background: var(--vert-fond); color: var(--vert); font-weight: 600; }
.etiquette-refusee { background: var(--rouge-fond); color: var(--rouge); }
.etiquette-annulee { background: var(--fond); color: var(--doux); }
.reponse { background: var(--fond); padding: 10px 12px; border-radius: 10px; margin: 6px 0 0; }
.demande.etat-annulee { opacity: .7; }

/* ---------- Fournisseurs ---------- */
.groupe-champs { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.groupe-champs legend { font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 4px; font-size: 1rem; }
.groupe-champs + .groupe-champs, .groupe-champs + .champ { border-top: 1px solid var(--trait); padding-top: 14px; }
.bloc-acces h3 { font-size: 1.05rem; }
.bloc-acces .bouton-grand { margin-bottom: 12px; }
.infos { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 10px 14px; margin: 0; align-items: center; }
.infos dt { color: var(--doux); font-size: .9rem; }
.infos dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.infos .valeur { font-weight: 500; overflow-wrap: anywhere; }
.mdp-visible { font-family: ui-monospace, Menlo, Consolas, monospace; background: #FFF1D6; padding: 2px 8px; border-radius: 6px; }
.petit-bouton { min-height: 34px; padding: 4px 12px; font-size: .85rem; border-radius: 9px; }
.en-ligne { display: inline; margin: 0; }
.procedure { margin-top: 12px; padding: 12px; background: var(--fond); border-radius: 10px; }
.procedure p { margin: 4px 0 0; }
.cle-a-copier code { display: block; padding: 10px; background: var(--fond); border-radius: 8px; overflow-wrap: anywhere; font-size: .9rem; }