/* Terrain SA — design « iOS 27 / verre » sur la CHARTE COMMUNE de SA Expertises.
   La charte (charte/charte_sa.css, copie synchronisée de ressources/design/ par
   `python outils/synchroniser_charte.py` — ne JAMAIS la modifier ici) apporte : les couleurs
   (jetons clair / sombre), les polices IBM Plex locales, les cotes tactiles (`.sa-tactile` sur
   <body> : boutons 52 px, texte 17 px, coins 14 / 16 px), la barre en verre `.sa-barre-verre`
   (opaque si « Réduire la transparence » / « Augmenter le contraste ») et `.sa-mono`.
   Ce fichier ne garde que ce qui est PROPRE à la PWA : barre du haut et du bas, safe-area,
   onglets du dossier, cartes MPSCA, tuiles, pellicule, fenêtres, annonces, transitions.
   Règles (docs/design/CHARTE_SA.md, docs/terrain/DESIGN.md) : verre sur les barres seulement,
   jamais sous un texte long ; une couleur d'action (bleu du cabinet) + vert / orange / rouge ;
   contraste ≥ 4,5:1 sur tout texte et ≥ 7:1 sur les boutons ; cibles ≥ 44 px ; rien d'Internet.
   Changer une couleur : dans la charte (ressources/design/charte_sa.css), jamais ici. */
@import url("charte/charte_sa.css");

/* Jetons propres à la PWA (aucun ne redéfinit un jeton de la charte) */
:root {
  --annonce: rgba(20, 24, 31, .94);          /* annonce / progression : texte blanc ≥ 14:1 */
  --reflet: rgba(255, 255, 255, .6);          /* liseré clair au bord haut d'une barre basse */
  --ombre-flottante: 0 8px 30px rgba(20, 26, 36, .22);
  --ombre-fenetre: 0 24px 60px rgba(20, 26, 36, .24);
  --haut-barre: 60px;                         /* hauteur de la barre du haut, hors safe-area */
  --duree: .16s;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  /* Lot 2g : valeur PROPOSÉE du §3.2 — le violet des propositions de la fenêtre
     « Description de l'ouvrage » du PC. Texte 9,4:1 sur la surface, 7,8:1 sur son fond doux (clair). Candidat
     à la charte commune (docs/design/CHARTE_SA.md) : il n'y existe pas encore. */
  --propose-texte: #5b2d91;
  --propose-doux: #efe6fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --annonce: rgba(44, 52, 65, .96);
    --reflet: rgba(255, 255, 255, .07);
    --ombre-flottante: 0 8px 30px rgba(0, 0, 0, .5);
    --ombre-fenetre: 0 24px 60px rgba(0, 0, 0, .6);
    --propose-texte: #cfb2f5;   /* 9,2:1 sur la surface sombre, 8,1:1 sur son fond doux */
    --propose-doux: #2b2140;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
body {
  margin: 0; background: var(--fond); color: var(--texte); min-height: 100vh;
  font-family: var(--police); font-size: var(--taille-texte); line-height: 1.4;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  padding-bottom: env(safe-area-inset-bottom);
}
body.modale-ouverte { overflow: hidden; }
[hidden] { display: none !important; }
.cache { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-texte); outline-offset: 2px; }
h1, h2, h3 { font-weight: 600; }

/* Chiffres et références : IBM Plex Mono, chiffres tabulaires (charte §1.7) */
.ref, .numero, .heure-rdv, .numero-tel, .nb-utilisations, .badge.type,
.ligne-tel .numero-saisie {
  font-family: var(--police-mono); font-variant-numeric: tabular-nums;
}
.ref { font-weight: 600; letter-spacing: -.01em; }

/* Icônes (SVG en ligne, trait homogène 1,8) */
.ico {
  width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
}
.ico.petite { width: 18px; height: 18px; }

/* ------------------------------------------------- toucher et apparition */
/* Ce qui se touche se comprime un instant (iOS) ; les rangées de liste s'éclairent. */
.bouton, .lien, .icone-action, .fleche-jour, .retour, .case-pellicule, .suggestion,
.choix-rapide, .carte-lien, .onglet, .bouton-valider, .bouton-annuler, .retirer-tel, .plus-tel, .synchro,
.rond-barre, .pilule-barre, .visite {
  transition: transform var(--duree) var(--courbe), filter var(--duree);
}
.bouton:active, .lien:active, .icone-action:active, .fleche-jour:active, .retour:active,
.case-pellicule:active, .suggestion:active, .choix-rapide:active, .onglet:active,
.bouton-valider:active, .bouton-annuler:active, .retirer-tel:active, .plus-tel:active, .synchro:active,
.rond-barre:active, .pilule-barre:active, .visite:active {
  transform: scale(.96); filter: brightness(.93);
}
.carte-lien:active { transform: scale(.985); }
.choix:active, .valeur-lecture:active, .ligne-tableau:active { background-color: var(--trait-doux); }
.fond-modale { animation: pwa-fondu var(--duree) ease-out; }
.fond-modale > .modale { animation: pwa-monte .22s var(--courbe); }
.fond-modale.plein-ecran > .modale { animation: pwa-glisse .24s var(--courbe); }
.annonce, .progression { animation: pwa-descend .22s var(--courbe); }
.barre-flottante { animation: pwa-monte .22s var(--courbe); }
@keyframes pwa-fondu { from { opacity: 0; } }
@keyframes pwa-descend { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
@keyframes pwa-monte { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes pwa-glisse { from { opacity: .6; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bouton:active, .lien:active, .icone-action:active, .fleche-jour:active, .retour:active,
  .case-pellicule:active, .suggestion:active, .choix-rapide:active, .onglet:active, .carte-lien:active,
  .bouton-valider:active, .bouton-annuler:active, .retirer-tel:active, .plus-tel:active, .synchro:active,
  .rond-barre:active, .pilule-barre:active, .visite:active {
    transform: none;
  }
}

/* ------------------------------------------------------------- barres en verre */
/* Fond, flou et repli opaque viennent de .sa-barre-verre (charte) : ne jamais poser de
   `background` ici, il écraserait le repli « Réduire la transparence ». */

/* Barre du haut — lot 2l : trois colonnes. À gauche le retour (écrans d'erreur) et
   l'indicateur de synchronisation, au centre le titre, à droite l'action du lieu (icône du
   formulaire dans un dossier, « Actualiser » sur l'accueil). Les deux côtés ont la même
   largeur (1fr, 44 px au moins, même vide) : le titre est VRAIMENT centré, et réduit par
   « … » s'il est trop long — sans jamais repousser un bouton. */
.barre {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(44px, 1fr) minmax(0, max-content) minmax(44px, 1fr); align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  min-height: calc(var(--haut-barre) + env(safe-area-inset-top));
}
.cote-haut { display: flex; align-items: center; gap: 8px; }
.cote-haut.droite { justify-content: flex-end; }
.titres { min-width: 0; text-align: center; }
.barre h1 {
  margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Accueil (« Mes missions ») : grand titre aligné à gauche, juste après l'indicateur de synchro */
.barre.racine { grid-template-columns: auto minmax(0, 1fr) auto; }
.barre.racine .titres { text-align: left; }
.barre.racine h1 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; }
.retour {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte);
}
/* Lot 2l : indicateur de synchronisation (remplace la pilule « ✓ À jour » des lots 2c-2i).
   Deux flèches en cercle, rond de 44 px. Vert doux + ✓ : tout est parti (lot 2q). Orange qui tourne :
   envoi en cours. Orange fixe + nombre en exposant : en attente (réseau, hors ligne). Rouge
   + nombre : refusé par le service (« ! » : jeton refusé). Un tap ouvre le détail. */
.synchro {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gris-doux); color: var(--texte-2);
}
.synchro .ico { width: 24px; height: 24px; }
.synchro .coche-synchro { display: none; }
.synchro.ok .coche-synchro { display: inline; }
.synchro.ok { background: var(--vert-doux); color: var(--vert-texte); } /* lot 2q : tout est synchronisé = vert */
.synchro.envoi, .synchro.attente { background: var(--orange-doux); color: var(--orange-texte); }
.synchro.ko { background: var(--rouge-doux); color: var(--rouge-texte); }
.synchro.envoi .ico { animation: pwa-tourne 1.1s linear infinite; }
/* nombre d'éléments en attente, en exposant du rond (même dessin que la pellicule) */
.badge-synchro {
  position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  font-family: var(--police-mono); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
  background: var(--orange); color: var(--sur-accent); box-shadow: 0 0 0 2px var(--surface);
}
.synchro.ko .badge-synchro { background: var(--rouge); }
/* Lot 2l : le formulaire de la visite, rond de 44 px à droite de la barre du titre.
   Gris + flèche qui sort : visite à terminer. Vert + coche : visite terminée. */
.visite {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gris-doux); color: var(--texte-2);
}
.visite .ico { width: 24px; height: 24px; }
.visite.terminee { background: var(--vert); color: var(--sur-accent); }
/* lot 2f : « Mes missions » — « Mise à jour … » sous le grand titre, icône « Actualiser »
   (sans texte) à droite (lot 2l : l'indicateur de synchro est passé à gauche) */
/* lot 2q : dans un dossier, le sous-titre porte les pastilles état + type + sinistre, centrées sous la référence */
.sous-titre.etiquettes { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 3px; }
.sous-titre.etiquettes .badge { font-size: 12.5px; font-weight: 600; padding: 1px 8px; line-height: 1.35; }
.sous-titre.etiquettes .badge.sinistre { padding: 1px 7px; }
.sous-titre { margin: 1px 0 0; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--texte-3); }
.bouton-icone {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte);
  transition: transform var(--duree) var(--courbe), filter var(--duree);
}
.bouton-icone:active { transform: scale(.96); filter: brightness(.93); }
.bouton-icone.tourne .ico { animation: pwa-tourne .9s linear infinite; }
@keyframes pwa-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .synchro.envoi .ico { animation: none; } }
.mise-a-jour {
  display: block; width: 100%; min-height: var(--hauteur-bouton); border: 0; padding: 8px 16px;
  background: var(--orange-doux); color: var(--orange-texte); font-weight: 600; font-size: 17px;
  border-bottom: 1px solid var(--trait);
}

/* Lot 2i — LA barre du bas : capsule en verre flottante, détachée des bords, au-dessus de
   la barre d'accueil de l'iPhone (« comme dans Mail ou Apple Music »). Gauche = quitter
   (« ‹ » rond, ✗ Annuler), droite = valider (✓ Terminé) ou agir (pellicule). La même dans
   les pages et dans les fenêtres plein écran. Le verre vient de .sa-barre-verre (opaque si
   « Réduire la transparence »). Contrastes : docs/terrain/DESIGN.md § lot 2i. */
:root { --haut-capsule: 64px; }
/* Lot 2l : calée en bas à DROITE — tous les boutons sous le pouce, à une main (« comme ça,
   tout est accessible au pouce »). Lot 2q : 80 % de la largeur (340 px au plus), ex-70 % / 300 px. */
.barre-flottante {
  position: fixed; z-index: 30;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(80vw, 340px); margin: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--haut-capsule); padding: 7px; border-radius: calc(var(--haut-capsule) / 2);
  border: 1px solid var(--trait); box-shadow: var(--ombre-flottante), inset 0 1px 0 var(--reflet);
}
.cote-barre { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cote-barre:empty { display: none; }
.cote-barre.droite { margin-left: auto; }
.rond-barre {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 24px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--accent-doux); color: var(--accent-texte);
}
.rond-barre .ico { width: 24px; height: 24px; }
/* nombre de photos de la pellicule, en exposant du rond */
.compte-rond {
  position: absolute; top: -4px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--accent); color: var(--sur-accent); font-family: var(--police-mono); font-size: 12px; font-weight: 600;
  line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.pilule-barre {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 48px; min-width: 0; padding: 0 14px; border: 0; border-radius: 24px;
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  background: var(--accent-doux); color: var(--accent-texte);
}
/* lot 2l : capsule à 70 % — « ✓ Terminé » prend la place laissée par le côté gauche */
.pilule-barre.principal { min-width: 112px; background: var(--accent); color: var(--sur-accent); }
.cote-barre.gauche:empty + .cote-barre.droite { flex: 1; }
.cote-barre.droite > .pilule-barre.principal:only-child { flex: 1; }
/* le contenu ne passe jamais sous la capsule : le dernier bouton d'une liste reste atteignable */
main:has(> .barre-flottante) { padding-bottom: calc(var(--haut-capsule) + 32px + env(safe-area-inset-bottom)); }
/* clavier ouvert : la capsule s'efface (elle masquerait la case saisie), elle revient après */
body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select):focus) .barre-flottante {
  display: none;
}

/* ------------------------------------------------------------- page */
main {
  padding: 14px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  max-width: 760px; margin: 0 auto;
}
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre); padding: 16px; margin: 0 0 14px;
}
.carte h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 10px; }
.titre-section { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 20px 4px 10px; }
.aide { color: var(--texte-2); font-size: 16px; }
.message { font-weight: 600; min-height: 1.4em; }
.centre { text-align: center; }

/* ----------------------------------------------------------- boutons */
.bouton {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--hauteur-bouton); padding: 12px 16px; margin: 12px 0 0; border-radius: var(--rayon-bouton);
  border: 0; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.25;
  background: var(--surface); color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait);
}
.bouton.principal { background: var(--accent); color: var(--sur-accent); box-shadow: none; }
.bouton.secondaire { background: var(--accent-doux); color: var(--accent-texte); box-shadow: none; }
.bouton.secondaire.actif { background: var(--accent); color: var(--sur-accent); }
.bouton.danger { background: var(--rouge-doux); color: var(--rouge-texte); box-shadow: none; }
.bouton.ajout { background: var(--vert-doux); color: var(--vert-texte); box-shadow: none; }
.bouton.petit { width: auto; min-height: 44px; margin: 0; padding: 8px 16px; font-size: 16px; }
.bouton:disabled { opacity: .4; }
.lien {
  display: inline-flex; align-items: center; background: none; border: 0; color: var(--accent-texte);
  padding: 10px 2px; min-height: 44px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.lien.danger { color: var(--rouge-texte); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux .bouton { margin: 0; }
.barre-outils { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.barre-outils .aide { order: -1; flex: 1; margin: 0; font-size: 15px; }
.barre-outils .bouton { width: auto; margin: 0; min-height: 44px; padding: 8px 14px; font-size: 16px; }

/* --------------------------------------------------------- pastilles */
.ligne-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.badge, .puce, .heure-rdv {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px;
  font-weight: 600; font-size: 14px; line-height: 1.3; border: 0;
}
.badge.statut-a_visiter, .badge.neutre { background: var(--gris-doux); color: var(--texte); }
.badge.statut-en_cours, .badge.attente, .puce.attente { background: var(--orange-doux); color: var(--orange-texte); }
.badge.statut-visite_terminee, .puce.negatif { background: var(--vert-doux); color: var(--vert-texte); }
.badge.type { background: var(--accent-doux); color: var(--accent-texte); }
.puce.positif { background: var(--rouge-doux); color: var(--rouge-texte); }
.heure-rdv { background: var(--texte); color: var(--surface); font-size: 15px; }
/* lot 2q : type de sinistre (INC, DDE, TOG…) — pastille EN CONTOUR, à droite de l'état */
.badge.sinistre { background: transparent; color: var(--texte-2); box-shadow: inset 0 0 0 1.5px currentColor; padding: 3px 9px; letter-spacing: .02em; }

/* --------------------------------------------------- cartes mission */
.carte-lien { display: block; color: inherit; text-decoration: none; }
.carte-titre {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 8px 0 4px;
}
.carte-titre > span:first-child { flex: 1; min-width: 0; }
h2.carte-titre { font-size: 22px; margin-top: 0; }
.chevron { color: var(--texte-3); display: inline-flex; }
.ligne-info { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; }
.ligne-info .ico { color: var(--texte-3); margin-top: 1px; }
.compteurs { font-weight: 600; color: var(--texte-2); margin-top: 8px; font-size: 15px; }
/* lot 2f : adresse sur 2 ou 3 lignes (adresse, complément, « CP VILLE ») */
.ligne-adresse { display: block; }
/* lot 2f : mission terminée = carte ESTOMPÉE (pas d'opacité : le texte garde ≥ 4,5:1) —
   sans fond ni ombre, liseré seul, texte secondaire ; toujours ouvrable d'un tap */
/* lot 2n : carte de mission = titre + pastille de type sur une ligne, puis texte | photo carrée.
   Le titre se réduit par « … » (une seule ligne, comme l'email du lot 2j) ; la photo est une
   vignette de la première couverture (carré neutre sans photo : même hauteur de carte). */
.carte-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.carte-entete .carte-titre {
  display: block; flex: 1; min-width: 0; margin: 0; font-size: 21px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carte-entete .badge { flex: none; }
.carte-corps { display: flex; align-items: stretch; gap: 12px; }
.carte-texte { flex: 1; min-width: 0; min-height: 96px; }
/* lot 2q : moins de marge entre la bordure et la photo, photo plus grande (88 -> 96 px) */
.carte-mission { padding: 12px 10px 10px 14px; }
.carte-texte .ligne-badges { margin-bottom: 2px; gap: 5px; }
/* lot 2q : heure + état + sinistre tiennent sur une ligne à 390 px, même « Visite terminée » */
.carte-texte .ligne-badges .badge, .carte-texte .ligne-badges .heure-rdv { font-size: 13.5px; padding-left: 8px; padding-right: 8px; }
.carte-photo {
  flex: none; align-self: flex-start; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  background: var(--gris-doux); color: var(--texte-3); display: flex; align-items: center; justify-content: center;
}
.carte-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-photo .ico { width: 28px; height: 28px; }
/* lot 2f : mission terminée = carte ESTOMPÉE (pas d'opacité sur le texte : il garde ≥ 4,5:1) —
   sans ombre, texte secondaire ; toujours ouvrable d'un tap (lot 2n : la photo seule est atténuée).
   Lot 2q : fond --gris-doux (un cran plus foncé que le fond en clair, plus clair en sombre) — « la même
   couleur que le fond » ne la détachait pas ; texte --texte-2 sur --gris-doux : 6,3:1 clair, 8,6:1 sombre */
.carte-mission.terminee { background: var(--gris-doux); box-shadow: none; border-color: var(--trait); }
.carte-mission.terminee .carte-titre { color: var(--texte-2); font-weight: 600; font-size: 19px; }
.carte-mission.terminee .ligne-info { color: var(--texte-2); }
.carte-mission.terminee .badge.type { background: var(--surface); color: var(--texte-2); }
.carte-mission.terminee .carte-photo { background: var(--trait-doux); }
.carte-mission.terminee .carte-photo { opacity: .55; }

/* ----------------------------------------- lignes des tableaux (liste groupée) */
.ligne-tableau {
  position: relative; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none;
  margin: 0 -16px; padding: 10px 16px; min-height: 64px;
}
.ligne-tableau + .ligne-tableau::before {
  content: ""; position: absolute; top: 0; left: 72px; right: 0; border-top: 1px solid var(--trait-doux);
}
.numero {
  flex: none; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte); font-size: 16px; font-weight: 600;
}
.ligne-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ligne-titre { font-weight: 600; }
.ligne-detail { color: var(--texte-2); font-size: 16px; }
.ligne-marques { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--texte-2); margin-top: 2px; }

/* ------------------------------------------------------------ photos */
.couvertures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case-couverture {
  position: relative; padding: 0; border: 0; border-radius: 12px; background: var(--champ);
  aspect-ratio: 4 / 3; overflow: hidden; display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center; color: var(--texte-2); font-weight: 600; font-size: 15px;
}
.case-couverture.vide { background: transparent; border: 2px dashed var(--trait-champ); }
.vignette { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette.absente, .photo-grande.absente { padding: 8px; font-size: 14px; text-align: center; color: var(--texte-2); }
.photo-grande { width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: var(--rayon-bouton); display: block; }
.bandeau-photo {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--rouge); color: var(--sur-accent);
  font-size: 13px; font-weight: 700; padding: 3px 4px; text-align: center;
}
.grille-pellicule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.case-pellicule {
  position: relative; display: flex; flex-direction: column; padding: 0; color: var(--texte-2);
  background: transparent; border: 0; border-radius: 10px;
}
.case-pellicule .vignette { aspect-ratio: 1; height: auto; border-radius: 10px; background: var(--champ); }
.case-pellicule.cochee .vignette { box-shadow: 0 0 0 4px var(--vert); }
.case-pellicule:disabled { opacity: .3; }
.date-photo { font-size: 13px; font-weight: 600; padding: 3px 0 0; min-height: 1.4em; text-align: center; }
.nb-utilisations {
  position: absolute; top: 6px; right: 6px; background: var(--accent); color: var(--sur-accent); border-radius: 999px;
  padding: 0 8px; font-size: 13px; font-weight: 600; line-height: 22px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.coche-photo {
  position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vert); color: var(--sur-accent); box-shadow: 0 0 0 2px #fff;
}
/* coches dans un rond de 28-30 px : trait plus épais, sinon invisible sur une photo */
.coche-photo .ico { width: 18px; height: 18px; stroke-width: 2.6; }

/* ------------------------------------------------------------ champs */
.champ { display: block; margin: 0 0 16px; }
.etiquette { display: block; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); margin: 0 0 6px; }
.champ input, .champ textarea, .recherche, #jeton, .modale textarea, .liste-deroulante, .ligne-tel input, .case-rubrique .precision {
  width: 100%; font-size: 17px; padding: 12px 14px; min-height: var(--hauteur-bouton);
  border: 1px solid var(--trait-champ); border-radius: 12px; background: var(--champ); color: var(--texte);
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--duree), box-shadow var(--duree);
}
.champ input:focus, .champ textarea:focus, .recherche:focus, #jeton:focus, .modale textarea:focus,
.ligne-tel input:focus, .case-rubrique .precision:focus, .liste-deroulante:focus {
  outline: 3px solid var(--accent-texte); outline-offset: 0; background: var(--surface);
}
::placeholder { color: var(--texte-3); opacity: 1; }
.recherche {
  margin: 0 0 12px; background-color: var(--surface); padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 22px;
}
.modale .recherche { background-color: var(--champ); }
/* le focus des champs pose `background` (raccourci) : la loupe doit être reposée après lui */
.recherche:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; background-size: 22px;
}
.liste-deroulante {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b939f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suggestion {
  font-size: 16px; min-height: 44px; padding: 6px 14px; border-radius: 22px; border: 0;
  background: var(--accent-doux); color: var(--accent-texte); font-weight: 600;
}
.choix-titre { font-weight: 600; font-size: 17px; }
.choix-detail { font-weight: 400; font-size: 16px; color: var(--texte-2); }
.choix-nb { color: var(--accent-texte); font-weight: 700; white-space: nowrap; padding-left: 8px; }
.apercu { display: block; background: var(--champ); border-radius: 12px; padding: 12px; margin: 12px 0 0; font-size: 16px; }
.apercu dt { font-weight: 600; color: var(--texte-2); font-size: 15px; }
.apercu dd { margin: 0 0 8px; }
.apercu dd:last-child { margin-bottom: 0; }

.pied { text-align: center; margin: 24px 0 8px; }
/* lot 2l : une seule ligne sous « Se déconnecter » (empreinte de l'application, date) */
.mention-edition {
  margin: 14px 0 0; font-size: clamp(11px, 3.4vw, 13px); line-height: 1.3; color: var(--texte-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* texte lu par VoiceOver seulement (la ligne affichée est abrégée) */
.lu-seulement {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ----------------------------------------------------------- fenêtres */
.fond-modale {
  position: fixed; inset: 0; z-index: 50; background: var(--voile);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modale {
  background: var(--surface); color: var(--texte); border-radius: 22px; padding: 18px 16px;
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; box-shadow: var(--ombre-fenetre);
  border: 1px solid var(--trait); /* sombre : la fenêtre se détache du voile */
}
.modale h2 { margin-top: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fond-modale.plein-ecran { padding: 0; align-items: stretch; }
.fond-modale.plein-ecran .modale {
  max-width: none; max-height: none; height: 100%; border-radius: 0; background: var(--fond); box-shadow: none; border: 0;
  padding: 0 max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.fond-modale.plein-ecran .modale > :first-child:not(.tete-modale) { margin-top: calc(12px + env(safe-area-inset-top)); }
.tete-modale { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tete-modale h2 { margin: 0; font-size: 18px; font-weight: 600; flex: 1; min-width: 0; }
.fond-modale.plein-ecran .tete-modale {
  position: sticky; top: 0; z-index: 2; margin: 0 -16px 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; min-height: calc(var(--haut-barre) + env(safe-area-inset-top));
}
.boutons-modale .bouton { margin-top: 10px; }
/* lot 2l : « Visite terminée ? » en sortant du dossier — ✗ à gauche, ✓ à droite (sous le pouce) */
.choix-fin-visite { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.choix-fin-visite .bouton { margin: 0; }
.bouton.valider-vert { background: var(--vert); color: var(--sur-accent); box-shadow: none; }
.fil { margin: 6px 0; font-size: 16px; color: var(--texte-2); }
.fil .lien { padding: 6px 2px; min-height: 44px; }
.liste-choix {
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--rayon-carte);
  border: 1px solid var(--trait); box-shadow: var(--ombre); overflow: hidden;
}
.liste-choix > .aide { padding: 0 16px; }
.choix {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-height: 60px; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; color: var(--texte); width: 100%;
  transition: background-color var(--duree);
}
.choix + .choix::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--trait-doux); }
.choix.branche { flex-direction: row; justify-content: space-between; align-items: center; }
.choix:disabled { opacity: .5; }
.choix-case { flex-direction: row; align-items: center; gap: 14px; cursor: pointer; }
.choix-case + .choix-case::before { left: 60px; }
.choix-case.grise { opacity: .55; }
.choix-texte { display: flex; flex-direction: column; min-width: 0; }
.compteur-places { font-weight: 600; color: var(--texte); }
.erreurs p { color: var(--rouge-texte); font-size: 16px; }

/* Cases à cocher : rondes (choix), carrées (rubriques), interrupteur (filtre) */
.choix-case input, .case-rubrique input[type="checkbox"], .case-copie input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 30px; height: 30px; border-radius: 15px; border: 2px solid var(--texte-3); background: transparent;
  transition: background-color var(--duree), border-color var(--duree);
}
.case-rubrique input[type="checkbox"], .case-copie input { border-radius: 8px; width: 28px; height: 28px; }
.choix-case input:checked, .case-rubrique input[type="checkbox"]:checked, .case-copie input:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px;
}
.choix-case input:disabled { opacity: .5; }
.case-filtre { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; font-size: 16px; margin: 4px 0; }
.case-filtre span { flex: 1; }
.case-filtre input {
  -webkit-appearance: none; appearance: none; order: 2; flex: none; margin: 0; position: relative;
  width: 51px; height: 31px; border-radius: 16px; background: var(--gris-doux); box-shadow: inset 0 0 0 1px var(--trait-champ);
  transition: background-color .2s;
}
.case-filtre input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .2s var(--courbe);
}
.case-filtre input:checked { background: var(--vert); box-shadow: none; }
.case-filtre input:checked::after { left: 22px; }

/* Annonce et progression : capsule sombre flottante, texte blanc (courte : le verre est permis).
   Lot 2i : en HAUT, juste sous la barre du titre (safe-area comprise) — jamais sur la barre
   flottante du bas ni sur « Terminé ». Elle ne prend aucun toucher (ce qui est dessous reste
   utilisable) ; dans un dossier elle recouvre un instant les onglets, jamais un bouton d'action. */
.annonce, .progression {
  position: fixed; left: 16px; right: 16px; top: calc(var(--haut-barre) + env(safe-area-inset-top) + 8px); z-index: 60;
  pointer-events: none;
  max-width: 560px; margin: 0 auto;
  background: var(--annonce); color: #fff; border-radius: 18px; padding: 14px 16px; font-weight: 600; text-align: center;
  box-shadow: var(--ombre-flottante), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .annonce, .progression { background: #14181f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.progression { z-index: 70; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.progression progress { width: 100%; height: 8px; accent-color: #7ee2a0; }

/* -------------------------------------- valeurs modifiables d'un tap */
.valeur-modif { position: relative; }
.carte .valeur-modif { margin: 0 -16px; padding: 0 16px; }
.valeur-modif + .valeur-modif::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--trait-doux);
}
.valeur-lecture {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; width: 100%;
  text-align: left; color: var(--texte); background: transparent; cursor: pointer;
  border: 0; padding: 10px 0; min-height: 62px; transition: background-color var(--duree);
}
.valeur-lecture .etiquette {
  grid-column: 1; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texte-2);
}
.valeur-lecture .valeur { grid-column: 1; font-size: 17px; overflow-wrap: anywhere; }
.valeur-lecture .valeur.multiligne { white-space: pre-line; }
.valeur-lecture .valeur.vide { color: var(--texte-3); font-style: italic; }
.marque-modif, .marque-cabinet {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0; text-transform: none; vertical-align: 1px;
  background: var(--orange-doux); color: var(--orange-texte);
}
.marque-cabinet { background: var(--accent-doux); color: var(--accent-texte); }
/* Lot 2g : ligne du §3.2 portant une valeur PROPOSÉE (pas encore confirmée) */
.valeur-lecture .valeur.proposee { color: var(--propose-texte); font-style: italic; }
.marque-proposee {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 12px;
  font-weight: 700; vertical-align: 1px; background: var(--propose-doux); color: var(--propose-texte);
}
.valeur-modif.proposee { display: flex; align-items: center; gap: 8px; }
.valeur-modif.proposee > .valeur-lecture { flex: 1; min-width: 0; }
.bouton-confirmer {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible-min); height: var(--cible-min); padding: 0; border-radius: 999px;
  border: 1.5px solid var(--propose-texte); background: var(--propose-doux); color: var(--propose-texte);
  cursor: pointer;
}
.bouton-confirmer:active { filter: brightness(.95); }
.bouton-confirmer svg { width: 22px; height: 22px; }
.aide-propositions { margin: 0 0 6px; color: var(--propose-texte); }
.actions-valeur { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 6px; }
.derives { margin: 0 0 4px; }
.derives > .aide { margin: 0 0 8px; }
.fiche h2 { margin-bottom: 4px; }
.cases-rubrique {
  display: flex; flex-direction: column; margin-bottom: 14px; background: var(--surface);
  border-radius: var(--rayon-carte); border: 1px solid var(--trait); box-shadow: var(--ombre); overflow: hidden;
}
.case-rubrique { position: relative; padding: 4px 16px; }
.case-rubrique + .case-rubrique::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: 1px solid var(--trait-doux); }
.case-rubrique label { display: flex; align-items: center; gap: 14px; min-height: 52px; font-weight: 500; }
.case-rubrique .precision { margin: 0 0 10px; min-height: 48px; font-size: 16px; }
.modale textarea { min-height: 0; }
.reponses-toutes-faites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.reponses-toutes-faites .bouton { margin: 0; font-size: 16px; }

/* ------------------------- lot 2j : une ligne par information, édition EN PLACE */
/* [icône 24 px] [valeur] [crayon] — l'icône dit ce qu'est la valeur (épingle = adresse,
   parcelle = cadastre…) ; sans icône parlante, une étiquette courte devant la valeur ; les
   textes longs gardent leur étiquette au-dessus (.dessus). En édition, la ligne garde sa
   hauteur : la valeur devient une case au fond teinté, ✗ puis ✓ remplacent le crayon. */
.ligne-champ { position: relative; }
.carte .ligne-champ { margin: 0 -16px; padding: 0 16px; }
.ligne-champ + .ligne-champ::before {
  content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--trait-doux);
}
.ligne-champ.dessus + .ligne-champ::before, .ligne-champ + .ligne-champ.dessus::before { left: 16px; }
.liste-coordonnees + .liste-coordonnees > .ligne-champ:first-child::before,
.ligne-champ + .liste-coordonnees > .ligne-champ:first-child::before,
.liste-coordonnees + .ligne-champ::before {
  content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--trait-doux);
}
.rangee-champ {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 48px;
}
.rangee-champ.sans-tete { grid-template-columns: minmax(0, 1fr) auto; }
.rangee-champ.haute { align-items: start; }
.rangee-champ.haute > .tete-ligne { padding-top: 11px; }
.tete-ligne { display: inline-flex; color: var(--texte-3); }
.etiquette-dessus { display: block; padding-top: 10px; font-size: 15px; font-weight: 500; color: var(--texte-2); }
.valeur-tap {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 0; margin: 0;
  border: 0; background: none; text-align: left; color: var(--texte); font-size: 17px; line-height: 1.35;
  text-decoration: none; cursor: pointer; transition: background-color var(--duree);
}
.etiquette-dessus + .rangee-champ > .valeur-tap { padding-top: 2px; }
.valeur-tap.fixe { cursor: default; }
.valeur-tap .valeur { min-width: 0; overflow-wrap: anywhere; }
.valeur-tap .valeur.vide { color: var(--texte-3); }
.valeur-tap .valeur.multiligne { white-space: pre-line; }
.valeur-tap .valeur:has(.email-coupe) { display: flex; }
.valeur-tap .marque-modif { align-self: center; flex: none; }
.etiquette-courte { flex: none; min-width: 4.4em; font-size: 15px; color: var(--texte-2); }
/* lot 2o : numéro et adresse en texte normal (un tap les modifie) ; c'est l'icône qui agit */
.hors-copie .valeur-tap .valeur { color: var(--texte-2); }
.note-ligne { display: block; margin: -10px 0 6px 36px; font-size: 14px; color: var(--texte-2); }
.fin-ligne { display: flex; align-items: center; margin-right: -10px; }
.bouton-valider, .bouton-annuler, .bouton-etiquette {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--cible-min); height: var(--cible-min); padding: 0; border: 0; border-radius: 22px; background: none;
}
.valeur-tap:active { background-color: var(--trait-doux); }
/* ✗ / ✓ : ronds de 32 px à l'œil dans une cible de 44 px */
.bouton-valider .ico, .bouton-annuler .ico {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%; box-sizing: border-box; stroke-width: 2.2;
}
.bouton-valider .ico { background: var(--vert); color: var(--sur-accent); }
.bouton-annuler .ico { background: var(--rouge-doux); color: var(--rouge-texte); }
.bouton-valider:active .ico, .bouton-annuler:active .ico { transform: scale(.92); }
.bouton-etiquette { padding: 0 4px; }
.bouton-etiquette .etiquette-tel { margin-left: 0; }
.etiquette-tel.vide { background: transparent; box-shadow: none; border: 1.5px dashed var(--texte-3); color: var(--texte-2); font-weight: 500; }
.ligne-coordonnee.en-edition .fin-ligne > .etiquette-tel { margin: 0 4px 0 0; }
/* la case EN PLACE : même police, même taille, même ligne — seul le fond se teinte */
.saisie-en-place {
  flex: 1; min-width: 0; width: 100%; margin: -4px -6px; padding: 4px 6px;
  font: inherit; font-size: 17px; line-height: 1.35; color: var(--texte); caret-color: var(--accent-texte);
  border: 0; border-radius: 8px; background: var(--accent-doux); box-shadow: inset 0 -2px 0 var(--accent-texte);
  -webkit-appearance: none; appearance: none;
}
.saisie-en-place:focus, .saisie-en-place:focus-visible { outline: none; }
textarea.saisie-en-place { display: block; resize: none; overflow: hidden; }
.saisie-en-place.sa-mono { font-family: var(--police-mono); }
.saisies-adresse { flex-direction: column; align-items: stretch; gap: 8px; }
.saisies-adresse .saisie-en-place { margin: 0 -6px; width: calc(100% + 12px); }
.cp-ville { display: flex; gap: 8px; margin: 0 -6px; }
.cp-ville .saisie-en-place { flex: 1; margin: 0; width: auto; }
.cp-ville .saisie-en-place.cp { flex: 0 0 5.4em; }
/* suggestions de l'annuaire PAR-DESSUS l'écran, sous la ligne (rien ne se décale) */
.suggestions.flottantes {
  position: absolute; left: 8px; right: 8px; top: calc(100% - 4px); z-index: 20; margin: 0;
  flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 6px; max-height: 50vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-fenetre);
}
.ajout-coordonnee { display: flex; align-items: center; gap: 12px; padding-left: 36px; }
.lien-ajout { gap: 4px; font-size: 15px; font-weight: 600; }
/* page Infos : « Itinéraire » = petit bouton rond dans l'angle haut droit de la carte */
.carte.infos.avec-itineraire { position: relative; }
.carte.infos.avec-itineraire > .carte-titre { padding-right: 48px; }
.bouton-rond {
  position: absolute; top: 8px; right: 8px; width: var(--cible-min); height: var(--cible-min); border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--accent-doux); color: var(--accent-texte); transition: transform var(--duree) var(--courbe);
}
.bouton-rond:active { transform: scale(.94); }

/* petit menu (étiquette d'un numéro, civilité) : posé sous l'élément touché, opaque */
.fond-menu { position: fixed; inset: 0; z-index: 80; }
.menu-contextuel {
  position: fixed; padding: 6px 0; max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre-fenetre);
  animation: pwa-monte .18s var(--courbe);
}
.titre-menu { padding: 6px 16px 4px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-2); }
.item-menu {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--cible-min); padding: 0 16px 0 10px;
  border: 0; background: none; text-align: left; font-size: 17px; color: var(--texte);
}
.item-menu:active { background: var(--trait-doux); }
.item-menu.actif { font-weight: 600; }
.item-menu.danger { color: var(--rouge-texte); }
.item-coche { width: 22px; display: inline-flex; color: var(--accent-texte); }
.separateur-menu { border-top: 1px solid var(--trait); margin: 6px 0; }
.ligne-saisie-menu { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; }
.saisie-menu {
  flex: 1; min-width: 0; min-height: var(--cible-min); padding: 8px 10px; font-size: 17px;
  border: 1px solid var(--trait-champ); border-radius: 10px; background: var(--champ); color: var(--texte);
}
.saisie-menu:focus { outline: 3px solid var(--accent-texte); outline-offset: 0; background: var(--surface); }

/* feuille d'actions basse (numéro touché : Appeler / Message), au plus près de celle de l'iPhone */
.fond-feuille {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 8px calc(8px + env(safe-area-inset-bottom)); background: var(--voile);
  animation: pwa-fondu var(--duree) ease-out;
}
.feuille-actions {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto;
  animation: pwa-glisse .24s var(--courbe);
}
.groupe-feuille { border: 0; border-radius: 14px; overflow: hidden; }
.titre-feuille {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px 10px;
  font-size: 14px; color: var(--texte-2); border-bottom: 1px solid var(--trait);
}
.titre-feuille .sa-mono { font-size: 16px; font-weight: 600; color: var(--texte-2); }
.rangee-feuille {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 57px; width: 100%;
  font-size: 20px; color: var(--accent-texte); text-decoration: none; background: none; border: 0;
}
.rangee-feuille + .rangee-feuille { border-top: 1px solid var(--trait); }
.rangee-feuille:active, .annuler-feuille:active { background-color: var(--trait-doux); }
.annuler-feuille { width: 100%; min-height: 57px; font-size: 20px; font-weight: 600; color: var(--accent-texte); }
@media (prefers-reduced-motion: reduce) {
  .bouton-rond:active, .bouton-valider:active .ico, .bouton-annuler:active .ico { transform: none; }
}

/* ------------------------ lot 2o : tap = modifier, icône = action, intervenants */
/* ✓ discret des textes sur plusieurs lignes (périmètre, pièces : « OK » du clavier y passe
   à la ligne) : coche au trait, sans pastille verte — le ✗ reste la seule chose qui ressort */
.bouton-valider.discret .ico { background: none; color: var(--accent-texte); padding: 6px; }
/* l'icône d'un numéro / d'une adresse = le bouton d'action : rond de 40 px à l'œil, 44 px
   sous le doigt, posé dans la colonne d'icône (24 px) sans décaler les valeurs */
.action-ligne {
  display: inline-flex; align-items: center; justify-content: center; width: var(--cible-min); height: var(--cible-min);
  margin: 0 -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--accent-texte);
  text-decoration: none; transition: transform var(--duree) var(--courbe);
}
.action-ligne .ico { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 50%; background: var(--accent-doux); }
.action-ligne:active { transform: scale(.94); }
/* lot 2t : page Infos en cartes par intervenant — [pastille du rôle] [logo] [nom…] [›] en tête
   (un tap ouvre la fiche plein écran), ses lignes dessous ; carte plus serrée (12 px) que les
   autres, l'expert de la compagnie en sous-carte (fond des champs, liseré) dans la carte « Cie ». */
.carte.carte-intervenant { padding: 4px 12px; margin-bottom: 10px; }
.carte-intervenant .ligne-champ, .carte-intervenant .tete-intervenant { margin: 0 -12px; padding: 0 12px; }
.carte-intervenant .ligne-champ + .ligne-champ::before,
.carte-intervenant .liste-coordonnees + .liste-coordonnees > .ligne-champ:first-child::before,
.carte-intervenant .ligne-champ + .liste-coordonnees > .ligne-champ:first-child::before,
.carte-intervenant .liste-coordonnees + .ligne-champ::before { left: 48px; }
.tete-intervenant {
  display: flex; align-items: center; gap: 10px; min-height: var(--cible-min); padding-top: 4px; padding-bottom: 4px;
  color: var(--texte); text-decoration: none; transition: background-color var(--duree);
}
.tete-intervenant:active { background-color: var(--trait-doux); }
.etiquette-role {
  flex: none; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor; color: var(--accent-texte);
  font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; letter-spacing: .01em;
}
.nom-intervenant {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; font-weight: 600;
}
.nom-intervenant.vide { color: var(--texte-3); font-weight: 400; }
/* personne + société : seule la société rétrécit (ellipse sur elle d'abord) ; la personne
   ne cède qu'une fois la société disparue (max-width : jamais plus large que la ligne) */
.nom-intervenant:has(.nom-societe) { display: flex; text-overflow: clip; }
.nom-personne, .nom-societe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.nom-personne { flex: none; max-width: 100%; }
.nom-societe { flex: 0 1 auto; }
.tete-intervenant .chevron { flex: none; margin-right: -4px; }
.tete-intervenant .logo-assureur { width: 48px; height: 48px; } /* lot 2q : logo seul, un peu plus grand */
.sous-carte {
  margin: 4px 0 8px; padding: 0 12px; background: var(--champ); border: 1px solid var(--trait); border-radius: 12px;
}
.sous-carte .tete-intervenant { border-radius: 11px 11px 0 0; }
.sous-carte.vide .tete-intervenant { border-radius: 11px; }
.fiche-intervenant .carte-titre { font-size: 17px; font-weight: 600; color: var(--texte-2); }
@media (prefers-reduced-motion: reduce) { .action-ligne:active { transform: none; } }

/* Pastilles des étiquettes de téléphone / d'email (lot 2f). « principal » en bleu du cabinet,
   toute autre étiquette en gris. Trois rendus, choisis par la classe de <html> (app.js,
   PASTILLES) : pleine (défaut), contour, lettre dans un rond. Captures comparées :
   docs/terrain/captures_pwa/4_pastilles_propositions.jpg */
.etiquette-tel {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; padding: 1px 9px;
  border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.35; vertical-align: 2px;
  font-family: var(--police); white-space: nowrap; letter-spacing: .01em;
  background: var(--gris-doux); color: var(--texte-2);
}
.etiquette-tel.principal { background: var(--accent-doux); color: var(--accent-texte); }
/* posée sur un bouton teinté (suggestion de l'annuaire) : la pastille bleue prend le fond de la carte */
.suggestion .etiquette-tel.principal, .pastilles-lettre .suggestion .etiquette-tel.neutre { background: var(--surface); }
.pastilles-contour .etiquette-tel { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; padding: 0 8px; }
.pastilles-contour .suggestion .etiquette-tel { background: transparent; }
.pastilles-lettre .etiquette-tel {
  position: relative;
  width: 24px; height: 24px; padding: 0; font-size: 13px; font-weight: 700; vertical-align: 1px;
}
.pastilles-lettre .etiquette-tel.principal { background: var(--accent); color: var(--sur-accent); }
.pastilles-lettre .etiquette-tel::before { content: attr(data-lettre); }
.pastilles-lettre .etiquette-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.valeur-lecture .valeur { min-width: 0; }
.sans-copie { display: block; font-size: 14px; color: var(--texte-2); }
.detail-contact { display: flex; align-items: center; min-width: 0; }
.etiquette-tel { flex: none; }
.email-coupe { display: flex; min-width: 0; white-space: nowrap; }
.email-local { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.email-domaine { flex: none; }
.detail-contact > .email-coupe { flex: 0 1 auto; }
.tete-carte { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tete-carte h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }

/* ----------------------------------------------------- accueil par jour */
.nav-jour { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.fleche-jour {
  flex: none; width: 48px; height: 48px; border-radius: 24px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte);
}
.fleche-jour .ico { width: 26px; height: 26px; }
.fleche-jour:disabled, .fleche-jour[aria-disabled="true"] { opacity: .35; }
.fleche-jour[aria-disabled="true"]:active { transform: none; filter: none; }
.jour-titre { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.jour-sous-titre { font-size: 16px; font-weight: 500; color: var(--texte-2); }
.zone-jour > .lien { display: flex; justify-content: center; margin: -6px auto 6px; }
/* lot 2f : « Rechercher une mission » = liste déroulante de toutes les missions,
   filtrée au fil de la frappe, bornée en hauteur (ascenseur) ; un voile transparent
   referme la liste au tap hors d'elle (sans ouvrir ce qu'il y a dessous). */
.zone-recherche { position: relative; }
.zone-recherche.ouverte { z-index: 20; }
.voile-recherche { position: fixed; inset: 0; z-index: -1; }
.zone-recherche .recherche { margin-bottom: 12px; }
.zone-recherche.ouverte .recherche { margin-bottom: 0; }
.liste-missions {
  list-style: none; margin: 6px 0 12px; padding: 4px 0; max-height: 440px; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-flottante);
}
.ligne-mission {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px;
  color: var(--texte); text-decoration: none;
}
.liste-missions li + li .ligne-mission { border-top: 1px solid var(--trait-doux); }
.ligne-mission:active { background: var(--trait-doux); }
.ligne-mission .ref { flex: none; color: var(--accent-texte); }
.ligne-mission-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-mission.terminee .ligne-mission-texte { color: var(--texte-2); }
.aucune-mission { padding: 14px 16px; color: var(--texte-2); }
/* lot 2h : la date est un bouton (tap = calendrier) ; « ‹ » / « › » = un jour */
.jour-affiche {
  flex: 1; min-width: 0; min-height: 56px; margin: 0; padding: 4px 2px; border: 0; border-radius: 14px;
  background: none; color: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background-color var(--duree);
}
.jour-affiche:active { background-color: var(--trait-doux); }
.jour-titre { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.jour-titre .ico { color: var(--accent-texte); }
.jour-sous-titre { display: block; }
.retour-aujourdhui { color: var(--accent-texte); }
/* jour sans mission : le jour occupé le plus proche de chaque côté */
.jour-vide { text-align: center; }
.jour-vide-titre { margin: 2px 0 6px; font-size: 19px; font-weight: 600; color: var(--texte-2); }
.liens-jours { display: flex; flex-direction: column; align-items: center; }
.lien-jour { gap: 6px; text-align: left; }
.lien-jour-quand { font-weight: 500; color: var(--texte-2); }

/* lot 2h : calendrier du mois (fenêtre centrée, pas de verre : ce n'est pas une barre) */
.fond-modale.calendrier .modale { max-width: 420px; padding: 14px 10px 12px; }
.tete-calendrier { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tete-calendrier .mois-titre { flex: 1; margin: 0; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.fleche-mois {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte);
}
.semaine-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); }
.nom-jour { text-align: center; font-size: 14px; font-weight: 500; color: var(--texte-3); padding: 4px 0 2px; }
.jour-calendrier {
  width: 100%; min-height: 50px; margin: 0; padding: 2px 0 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--texte-2); font-weight: 400; font-variant-numeric: tabular-nums;
}
.numero-jour {
  width: 38px; height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; transition: transform var(--duree) var(--courbe);
}
.jour-calendrier:active .numero-jour { transform: scale(.92); background-color: var(--trait-doux); }
.jour-calendrier.occupe { color: var(--texte); font-weight: 700; }
.jour-calendrier.aujourdhui .numero-jour { box-shadow: inset 0 0 0 2px var(--accent-texte); color: var(--accent-texte); }
.jour-calendrier.choisi .numero-jour { background: var(--accent); color: var(--sur-accent); box-shadow: none; }
.jour-calendrier.choisi.aujourdhui .numero-jour { outline: 2px solid var(--accent-texte); outline-offset: 2px; }
.pastille-jour { width: 6px; height: 6px; border-radius: 3px; visibility: hidden; flex: none; }
.occupe .pastille-jour, .pastille-jour.exemple { visibility: visible; }
.a-faire .pastille-jour, .pastille-jour.exemple.a-faire { background: var(--accent-texte); }
.fini .pastille-jour, .pastille-jour.exemple.fini { background: var(--texte-3); }
.legende-calendrier { margin: 8px 6px 4px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: pre; }
.pastille-jour.exemple { display: inline-block; }
.boutons-calendrier { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 0 4px; }
.boutons-calendrier .bouton { min-width: 120px; }

/* ----------------------------------- suggestions de l'annuaire (fiche du dossier) */
.suggestion-contact { display: flex; flex-direction: column; align-items: flex-start; border-radius: 12px; text-align: left; width: 100%; }

/* ------------------------------------------ écrans larges (iPad, PC) */
@media (min-width: 700px) {
  .grille-pellicule { grid-template-columns: repeat(5, 1fr); }
}

/* ------------------------------------------------ lot 2e : pages d'un dossier */
/* Onglets du dossier, barre en verre collée sous la barre du haut ; la page se change aussi
   par balayage latéral. */
/* Lot 2r : 3 onglets (Infos, Ouvrage, MPSCA), 40 px, sans compteur ; un effet d'onglets plutôt que de
   boutons — texte secondaire, l'actif en bleu du cabinet souligné d'un trait de 3 px, un filet sous la barre. */
.onglets {
  position: sticky; top: calc(var(--haut-barre) + env(safe-area-inset-top)); z-index: 9;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: -14px -16px 12px; padding: 0 16px; box-shadow: inset 0 -1px 0 var(--trait);
}
.onglet {
  display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 4px;
  text-decoration: none; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.15;
  color: var(--texte-2); background: none; border-radius: 0; box-shadow: none;
}
.onglet.actif { color: var(--accent-texte); box-shadow: inset 0 -3px 0 var(--accent-texte); } /* trait : 9,1:1 clair, 9,3:1 sombre */
.page-dossier.arrive-droite { animation: arrive-droite .2s var(--courbe); }
.page-dossier.arrive-gauche { animation: arrive-gauche .2s var(--courbe); }
@keyframes arrive-droite { from { transform: translateX(28px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes arrive-gauche { from { transform: translateX(-28px); opacity: .4; } to { transform: none; opacity: 1; } }
.ligne-tableau { scroll-margin-top: 140px; scroll-margin-bottom: 90px; transition: background-color .6s; }
.ligne-tableau.surlignee { background: var(--accent-doux); }
.bouton.ajout { scroll-margin-bottom: 90px; }

/* Page « Infos » : périmètre bien visible */
.carte.perimetre { box-shadow: inset 4px 0 0 var(--accent), var(--ombre); }
.carte.perimetre h2 { color: var(--accent-texte); }
.tete-carte.simple h2 { font-size: 20px; font-weight: 600; }

/* Fenêtre plein écran (lot 2i) : sa barre du bas est la même capsule flottante (✗ Annuler à
   gauche, ✓ Terminé à droite, sous le pouce) ; le contenu garde la place de la capsule. */
.fond-modale.plein-ecran .modale:has(> .barre-flottante) {
  padding-bottom: calc(var(--haut-capsule) + 32px + env(safe-area-inset-bottom));
}

/* Pellicule : sélection de plusieurs photos (appui long ou « Sélectionner ») */
.case-pellicule, .case-pellicule img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rond-selection {
  display: none; position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 15px;
  align-items: center; justify-content: center; color: #fff;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 0, 0, .25);
}
.rond-selection .ico { width: 18px; height: 18px; stroke-width: 2.6; visibility: hidden; }
.en-selection .rond-selection { display: flex; }
.en-selection .coche-photo { display: none; }
.case-pellicule.selectionnee .rond-selection { background: var(--accent); }
.case-pellicule.selectionnee .rond-selection .ico { visibility: visible; }
.case-pellicule.selectionnee .vignette { box-shadow: 0 0 0 4px var(--accent); }
.case-pellicule.selectionnee { transform: scale(.94); }
.barre-selection {
  /* lot 2i : la sélection de la pellicule prend la place de la barre flottante, en même capsule
     (lot 2l : même largeur, calée à droite ; lot 2q : 80 %) */
  position: fixed; z-index: 31; display: flex; align-items: center; gap: 6px;
  right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(80vw, 340px); margin: 0; box-sizing: border-box;
  min-height: var(--haut-capsule); padding: 7px; border-radius: calc(var(--haut-capsule) / 2);
  border: 1px solid var(--trait); box-shadow: var(--ombre-flottante), inset 0 1px 0 var(--reflet);
}
.barre-selection .bouton { width: auto; margin: 0; min-height: 48px; border-radius: 24px; padding: 0 12px; font-size: 16px; white-space: nowrap; }
.barre-selection .bouton.principal { min-width: 0; }
.compteur-selection { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body:has(.barre-selection:not([hidden])) main > .barre-flottante { display: none; }

/* Import de photos (point 9) : titre du bandeau, attente pendant que l'iPhone prépare */
.titre-progression { font-size: 15px; font-weight: 700; opacity: .85; }
.attente-photos::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -1px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Lot 2m — pellicule en page, couverture en tête, photos allégées, bulles « i » (17/10/2026) */
/* Rond « i » en haut à droite d'une carte : 20 px dessiné (lot 2q), 44 px de zone de toucher */
.bouton-info {
  flex: none; width: 44px; height: 44px; margin: -6px -12px -6px auto; padding: 0; border: 0; background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rond-info {
  position: relative; width: 20px; height: 20px; border-radius: 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--texte-2);
  font-family: var(--police); font-size: 13px; font-weight: 600; font-style: normal; line-height: 1;
}
/* lot 2q : le ⓘ des programmes classiques — cercle au trait de 1,5 px à ~65 % d'opacité (3,2:1 en clair, le « i »
   reste plein), droit, sans fond ; ouvert = plein. L'anneau est un pseudo-élément : l'opacité ne
   touche pas la lettre. */
.rond-info::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; border: 1.5px solid currentColor; opacity: .65;
}
.bouton-info[aria-expanded="true"] .rond-info { color: var(--texte); }
.bouton-info[aria-expanded="true"] .rond-info::before { opacity: 1; }
.tete-carte.avec-info { margin-bottom: 10px; }
.etiquette.avec-info { display: flex; align-items: center; gap: 8px; }
.etiquette.avec-info > span { flex: 1; min-width: 0; }
/* la bulle : même fond que les annonces (texte blanc ≥ 14:1), sous le rond, flèche vers lui */
.bulle-info {
  position: fixed; z-index: 90; padding: 12px 14px; border-radius: 14px;
  background: var(--annonce); color: #fff; font-size: 16px; line-height: 1.4;
  box-shadow: var(--ombre-flottante); animation: pwa-fondu var(--duree) ease-out;
}
.bulle-info p { margin: 0; }
.bulle-info p + p { margin-top: 8px; }
/* Couverture en tête de la page Infos : cases vides = boutons (feuille Prendre / Pellicule) */
.case-couverture.vide { cursor: pointer; }
.case-couverture.vide .ico { width: 28px; height: 28px; }
.titre-feuille .titre-texte { font-size: 15px; font-weight: 600; }
/* Sélection de la pellicule : corbeille rouge à côté d'Annuler (comme dans Photos de l'iPhone) */
.rond-barre.danger { background: var(--rouge-doux); color: var(--rouge-texte); }
.rond-barre:disabled { opacity: .4; }
.barre-selection .compteur-selection { font-size: 15px; line-height: 1.2; }
.barre-selection .bouton.principal { min-width: 116px; padding: 0 14px; }
/* Photo allégée : la vignette d'abord, l'état par-dessus, en bas */
.bloc-photo-grande { position: relative; }
.etat-photo {
  position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 10px 14px; border-radius: 14px;
  background: var(--annonce); color: #fff; font-size: 15px; font-weight: 600; text-align: center;
}
.bloc-photo-grande.en-attente .etat-photo::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 10px; vertical-align: -1px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: tourne 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bulle-info { animation: none; }
  .bloc-photo-grande.en-attente .etat-photo::before { animation: none; }
}

/* lot 2p : logo de la compagnie d'assurance, à gauche de son nom. Lot 2q : « logo seul, sans cadre gris
   autour, un peu plus grand » — 48 px, plus de bordure, aucun fond en thème CLAIR. Les logos sont dessinés
   pour un fond clair : en thème SOMBRE ils gardent une plaque BLANCHE arrondie (seule couleur hors jetons,
   comme le blanc du texte sur --accent), sans liseré. */
.logo-assureur {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; box-sizing: border-box; border-radius: 8px; background: none;
}
[data-theme="dark"] .logo-assureur { padding: 3px; background: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo-assureur { padding: 3px; background: #fff; } }
.logo-assureur img { display: block; width: 100%; height: 100%; object-fit: contain; }
.valeur-tap:has(.logo-assureur) { align-items: center; gap: 12px; }

/* lot 2u : logo du cabinet au-dessus du titre de l'écran de connexion — noir en thème clair
   (celui de l'icône), inversé en blanc en thème sombre ; décoratif, sans fond ni cadre. */
.logo-connexion { display: block; width: 132px; height: auto; margin: 4px auto 14px; }
[data-theme="dark"] .logo-connexion { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo-connexion { filter: invert(1); } }
/* lot 2u : bouton « Décharger les photos déjà au bureau » de la fenêtre de synchro */
.zone-decharge:not(:empty) { margin: 4px 0 12px; }
.zone-decharge .bouton { width: 100%; }

/* =============== Lot 2r — onglet MPSCA unique, fiche de prélèvement à tuiles (17/10/2026) ===============
   Aucun jeton nouveau : vert / rouge du pictogramme amiante = --vert / --rouge de la charte. */

/* Page MPSCA : 4 cartes côte à côte, défilement horizontal natif aimanté (scroll-snap) ; une
   « diapo » = toute la largeur du contenu, la carte dedans garde ses marges. Points de position
   au-dessus (44 × 32 px sous le doigt, 8 px à l'œil). */
.points-cartes { display: flex; justify-content: center; margin: -8px 0 0; }
.point-carte {
  width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.point-carte .point {
  width: 8px; height: 8px; border-radius: 4px; background: var(--trait-champ);
  transition: width var(--duree) var(--courbe), background-color var(--duree);
}
.point-carte.actif .point { width: 22px; background: var(--accent-texte); }
.carrousel-mpsca {
  display: flex; align-items: flex-start; margin: 0 -16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrousel-mpsca::-webkit-scrollbar { display: none; }
.diapo-carte { flex: 0 0 100%; box-sizing: border-box; padding: 0 16px; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.diapo-carte > .carte { margin-bottom: 4px; }

/* Pictogramme amiante (dessin des rapports : arche, « a » blanc ; vert = barré) */
.picto-amiante { flex: none; width: 20px; height: 24px; display: inline-block; vertical-align: -5px; overflow: visible; }
.picto-amiante .arche { fill: var(--rouge); }
.picto-amiante.vert .arche { fill: var(--vert); }
.picto-amiante text { fill: var(--sur-accent); font-family: var(--police); font-size: 17px; font-weight: 700; }
.picto-amiante .barre-picto { fill: none; stroke: var(--sur-accent); stroke-width: 2.2; stroke-linecap: round; }
/* sombre : rouge et vert de la charte sur une carte sombre = 2,2-2,3:1 ; l'arche passe aux teintes « -texte »
   (8,5:1 et 10,8:1 sur la carte) et le « a » à la couleur de la carte (mêmes rapports) */
[data-theme="dark"] .picto-amiante .arche { fill: var(--rouge-texte); }
[data-theme="dark"] .picto-amiante.vert .arche { fill: var(--vert-texte); }
[data-theme="dark"] .picto-amiante text { fill: var(--surface); }
[data-theme="dark"] .picto-amiante .barre-picto { stroke: var(--surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .picto-amiante .arche { fill: var(--rouge-texte); }
  :root:not([data-theme]) .picto-amiante.vert .arche { fill: var(--vert-texte); }
  :root:not([data-theme]) .picto-amiante text { fill: var(--surface); }
  :root:not([data-theme]) .picto-amiante .barre-picto { stroke: var(--surface); }
}
.picto-amiante.dans-titre { margin-right: 7px; width: 19px; height: 23px; }
.picto-amiante.dans-liste, .picto-vide { flex: none; width: 22px; height: 26px; margin: 0 -2px 0 -4px; }

/* Barre du titre : rond « i » à droite (aspect discret du lot 2q) */
.info-barre { display: inline-flex; }
.info-barre[hidden] { display: none; }
.info-barre .bouton-info { margin: 0 -8px 0 0; }

/* Capsule de la fiche : rond VERT ✓ sans texte, à droite */
.rond-barre.valider { background: var(--vert); color: var(--sur-accent); }
.rond-barre.valider .ico { stroke-width: 2.4; }

/* Fiche d'une ligne : plus de titre de bloc, des zones serrées */
.carte.fiche-ligne { padding: 12px; }
.fiche-ligne > * + * { margin-top: 10px; }

/* Emplacements de photos : 3 par rangée, la 1re = vue proche (loupe) ; glisser-déposer */
.photos-ligne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-ligne {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--champ); color: var(--texte-3); display: flex; align-items: center; justify-content: center;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree);
}
.case-ligne img { pointer-events: none; -webkit-user-drag: none; }
.case-ligne.vide { background: transparent; border: 2px dashed var(--trait-champ); }
.case-ligne.vide .ico { width: 28px; height: 28px; }
.loupe-photo {
  position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--sur-accent); box-shadow: 0 0 0 2px #fff;
}
.loupe-photo .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.case-ligne.souleve { z-index: 5; box-shadow: var(--ombre-flottante); transition: none; }
.case-ligne.cible-depot { box-shadow: 0 0 0 3px var(--accent); }
.photos-ligne.en-glisser .case-ligne:not(.souleve) { transform: scale(.96); }

/* Champs compacts sans étiquette : 44 px, l'indication écrite dedans */
.champ-compact .saisie-compacte {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px;
  font-family: inherit; font-size: 17px; line-height: 1.3; color: var(--texte); background: var(--champ);
  border: 1px solid var(--trait-champ); border-radius: 12px; -webkit-appearance: none; appearance: none;
}
.champ-compact textarea.saisie-compacte { resize: vertical; height: 44px; }
.champ-compact .saisie-compacte.mpsca { font-weight: 600; }
.champ-compact .saisie-compacte:focus { outline: 3px solid var(--accent-texte); outline-offset: 0; background: var(--surface); }
.champ-compact .suggestions:empty { display: none; }
.champ-compact .suggestions { margin-top: 8px; }

/* Tuiles MPSCA : 3 par rangée, 6 rangées ; groupe en secondaire, matériau en demi-gras ;
   cochée = contour accent + fond --accent-doux (aria-pressed) */
.tuiles-mpsca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tuile-mpsca {
  min-height: 56px; min-width: 0; padding: 5px 6px; border: 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center;
  background: var(--champ); color: var(--texte); box-shadow: inset 0 0 0 1px var(--trait-champ);
  font-family: inherit;
  transition: transform var(--duree) var(--courbe), background-color var(--duree), box-shadow var(--duree);
  -webkit-tap-highlight-color: transparent;
}
.tuile-mpsca:active { transform: scale(.96); }
.tuile-groupe {
  font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--texte-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tuile-materiau {
  font-size: 13.5px; font-weight: 600; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tuile-mpsca[aria-pressed="true"] { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent-texte); }
.tuile-mpsca[aria-pressed="true"] .tuile-materiau { color: var(--accent-texte); }
.tuile-mpsca.autre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--trait-champ); }
.tuile-mpsca.autre .tuile-materiau { color: var(--accent-texte); }
/* variante TUILES_AVEC_ICONES : icône du pack de Pierre au-dessus du matériau (trait noir,
   flèche rouge : inversée en sombre, la flèche reste rouge par la rotation de teinte) */
.tuile-mpsca.avec-icone { gap: 2px; padding-top: 4px; }
.icone-tuile { display: block; height: 22px; width: auto; max-width: 44px; object-fit: contain; }
[data-theme="dark"] .icone-tuile { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .icone-tuile { filter: invert(1) hue-rotate(180deg); } }
.bouton.choisir-liste { margin: 0; }

/* Ce que le rapport imprimera : replié */
.rapport-imprime { border-top: 1px solid var(--trait-doux); padding-top: 2px; }
.rapport-imprime > summary {
  min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--texte-2);
}
.rapport-imprime > summary::-webkit-details-marker { display: none; }
.rapport-imprime > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--duree); margin: 0 4px 0 2px;
}
.rapport-imprime[open] > summary::before { transform: rotate(45deg); }
.rapport-imprime .valeur-modif { margin: 0 -12px; padding: 0 12px; }
.rapport-imprime .bouton { margin-top: 8px; }

/* Bas de la fiche : monter / descendre / supprimer à gauche, « Norme X46 » à droite */
.actions-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 2px; }
.ronds-ligne { display: flex; gap: 8px; }
.rond-action {
  width: 48px; height: 48px; border-radius: 24px; border: 0; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-doux); color: var(--accent-texte); transition: transform var(--duree) var(--courbe);
}
.rond-action .ico { width: 24px; height: 24px; }
.rond-action:active { transform: scale(.94); }
.rond-action:disabled { opacity: .35; }
.rond-action.danger { background: var(--rouge-doux); color: var(--rouge-texte); }
.bouton.bouton-norme { width: auto; margin: 0; min-height: 48px; padding: 0 16px; border-radius: 24px; white-space: nowrap; }

/* Page de la norme X46-020 : la liste de la norme groupée ; une ligne = le matériau puis ses
   3 valeurs (ZPSO continue, discontinue, analyses) ; la ligne du matériau de la fiche surlignée */
.tete-norme .recherche { margin-bottom: 6px; }
.tete-norme .aide { font-size: 15px; margin: 0 4px 12px; }
.carte.groupe-norme { padding: 12px; }
.carte.groupe-norme h2 { font-size: 19px; margin: 0 0 4px; }
.composant-norme {
  margin: 12px 0 2px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-2);
}
.ligne-norme { margin: 0 -12px; padding: 8px 12px; border-top: 1px solid var(--trait-doux); scroll-margin-top: 140px; }
.ligne-norme.surlignee { background: var(--accent-doux); box-shadow: inset 4px 0 0 var(--accent-texte); }
.libelle-norme { margin: 0 0 4px; font-weight: 600; font-size: 16px; line-height: 1.3; }
.valeurs-norme { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px 10px; margin: 0; }
.valeur-norme { min-width: 0; }
.valeur-norme dt { font-size: 12px; font-weight: 600; color: var(--texte-2); letter-spacing: .02em; }
.valeur-norme dd { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.valeur-norme:last-child dd { font-family: var(--police-mono); font-weight: 600; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .point-carte .point, .case-ligne, .tuile-mpsca, .rond-action, .rapport-imprime > summary::before { transition: none; }
}