/* AxSite — feuille de style.
   Pensée pour le terrain : cibles tactiles larges, contraste fort pour
   la lecture en plein soleil, aucune dépendance externe. */

:root {
  --encre:        #16202b;
  --encre-douce:  #5a6b7c;
  --fond:         #f4f6f8;
  --carte:        #ffffff;
  --trait:        #d8dfe6;
  --accent:       #0b5cab;
  --accent-clair: #e8f1fb;
  --alerte:       #a3341c;
  --alerte-fond:  #fdefeb;
  --vert:         #1e6b41;
  --vert-fond:    #e9f5ee;
  --rayon:        10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

/* ------------------------------------------------------------- ossature */

.bandeau {
  background: var(--encre);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.bandeau a { color: #fff; text-decoration: none; }
.marque { font-weight: 650; letter-spacing: .01em; font-size: 17px; }
.marque span { opacity: .55; font-weight: 400; }
.retour {
  font-size: 22px; line-height: 1; padding: 4px 10px 6px;
  border-radius: 8px; background: rgba(255,255,255,.12);
}

main { padding: 16px; max-width: 720px; margin: 0 auto; }

h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 26px 0 10px; color: var(--encre-douce);
     text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.aide { color: var(--encre-douce); margin: 0 0 18px; }

/* ------------------------------------------------------------ fil d'ariane */

.fil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
       font-size: 14px; margin-bottom: 14px; }
.fil a { background: var(--accent-clair); color: var(--accent);
         padding: 4px 10px; border-radius: 20px; text-decoration: none; }
.fil .sep { color: var(--trait); }
.fil .etape { color: var(--encre-douce); }

/* ------------------------------------------------------------ liste de choix */

.choix { display: grid; gap: 10px; }

.tuile {
  display: flex; align-items: center; gap: 14px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 16px;
  text-decoration: none; color: inherit;
  min-height: 60px;                 /* cible tactile confortable */
}
.tuile:active { background: var(--accent-clair); }
.tuile .titre { font-weight: 600; font-size: 17px; }
.tuile .note { color: var(--encre-douce); font-size: 14px; }
.tuile .fleche { margin-left: auto; color: var(--trait); font-size: 20px; }
.tuile .corps { min-width: 0; }

/* ------------------------------------------------------------------ cartes */

.carte { background: var(--carte); border: 1px solid var(--trait);
         border-radius: var(--rayon); padding: 16px; margin-bottom: 12px; }

.encart { border-left: 4px solid var(--accent); background: var(--accent-clair);
          padding: 12px 14px; border-radius: 6px; margin: 0 0 18px; font-size: 15px; }
.encart strong { display: block; margin-bottom: 4px; }
.encart.attention { border-left-color: var(--alerte); background: var(--alerte-fond); }

/* ------------------------------------------------------------- recherche */

.recherche { display: flex; gap: 8px; margin-bottom: 6px; }
.recherche input {
  flex: 1; font-size: 17px; padding: 14px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--carte); color: inherit;
  min-width: 0;
}
.recherche input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.recherche button {
  font-size: 16px; padding: 0 20px; border: 0; border-radius: var(--rayon);
  background: var(--accent); color: #fff; font-weight: 600;
}

/* ------------------------------------------------------------- étiquettes */

.etiq { display: inline-block; font-size: 12.5px; font-weight: 600;
        padding: 3px 9px; border-radius: 20px; letter-spacing: .02em; }
.etiq.verifie { background: var(--vert-fond); color: var(--vert); }
.etiq.manque  { background: var(--alerte-fond); color: var(--alerte); }
.etiq.neutre  { background: var(--fond); color: var(--encre-douce);
                border: 1px solid var(--trait); }

/* ------------------------------------------------------------- définitions */

dl.fiche { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
dl.fiche dt { font-size: 13px; color: var(--encre-douce); margin-top: 12px;
              text-transform: uppercase; letter-spacing: .05em; }
dl.fiche dt:first-child { margin-top: 0; }
dl.fiche dd { margin: 2px 0 0; }

@media (min-width: 620px) {
  dl.fiche { grid-template-columns: 190px 1fr; align-items: baseline; }
  dl.fiche dt { margin-top: 10px; }
  dl.fiche dd { margin-top: 10px; }
  dl.fiche dt:first-child, dl.fiche dt:first-child + dd { margin-top: 0; }
}

/* --------------------------------------------------------------- tableaux */

.defile { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--trait); }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--encre-douce); font-weight: 650; }
td.mono, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
                 font-size: 14px; }

.vide { color: var(--encre-douce); font-style: italic; }
.pied { color: var(--encre-douce); font-size: 13.5px; margin-top: 28px;
        padding-top: 14px; border-top: 1px solid var(--trait); }

/* ------------------------------------------------------------ formulaires */

form.saisie { display: grid; gap: 16px; }

.champ { display: grid; gap: 6px; }
.champ > label { font-size: 13px; color: var(--encre-douce);
                 text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 17px;            /* 17px : évite le zoom iOS */
  padding: 13px 14px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--carte); color: inherit;
  width: 100%; min-width: 0;
}
.champ textarea { min-height: 90px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.champ .indice { font-size: 13.5px; color: var(--encre-douce); }

.paire { display: grid; gap: 16px; }
@media (min-width: 520px) { .paire { grid-template-columns: 1fr 1fr; } }

button.principal {
  font: inherit; font-size: 17px; font-weight: 650; padding: 15px 22px;
  border: 0; border-radius: var(--rayon); background: var(--accent); color: #fff;
  min-height: 54px; width: 100%;
}
button.principal:active { background: #094a8b; }
/* Deux choix de même poids (Oui / Non) : même taille, côte à côte. */
.oui-non { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.oui-non form { margin: 0; }
button.principal.contour { background: var(--carte); color: var(--accent);
                           border: 1px solid var(--accent); }
button.principal.contour:active { background: var(--fond); }

.actions { display: grid; gap: 10px; margin: 18px 0 0; }
a.secondaire, label.secondaire {
  display: block; text-align: center; padding: 14px; border-radius: var(--rayon);
  border: 1px solid var(--trait); background: var(--carte); color: var(--accent);
  text-decoration: none; font-weight: 600; min-height: 52px;
}

/* Les points à photographier : une tuile, un geste. Grande cible tactile —
   on vise avec des gants, debout, parfois d'une main. */
.grille-photos { display: grid; gap: 10px; margin: 0 0 12px;
                 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grille-photos form { margin: 0; }
a.pose { text-decoration: none; }
.pose {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 116px; padding: 12px 10px; cursor: pointer;
  border: 1px dashed var(--trait); border-radius: var(--rayon);
  background: var(--carte); text-align: center; position: relative; overflow: hidden;
}
.pose .objectif { font-size: 30px; line-height: 1; color: var(--accent); }
.pose .quoi { font-size: 13.5px; font-weight: 600; color: var(--encre-douce);
              line-height: 1.25; }
.pose img { position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; }
/* Une tuile faite montre la photo ; le libellé reste lisible par-dessus. */
.pose.faite { border-style: solid; border-color: var(--vert); justify-content: flex-end; }
.pose.faite .quoi { position: relative; z-index: 1; color: #fff;
                    text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.pose:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Combien de photos sur ce point — enregistrées plus en attente. */
.pose .combien { position: absolute; top: 6px; right: 6px; z-index: 2;
                 min-width: 22px; padding: 2px 6px; border-radius: 999px;
                 background: rgba(0,0,0,.6); color: #fff;
                 font-size: 12.5px; font-weight: 700; text-align: center; }

/* Galerie de photos. Deux colonnes sur un téléphone, davantage au large :
   une photo de chantier se juge mal en timbre-poste. */
.galerie { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cliche { margin: 0; border: 1px solid var(--trait); border-radius: var(--rayon);
          background: var(--carte); overflow: hidden; display: flex; flex-direction: column; }
.cliche img { display: block; width: 100%; height: 130px; object-fit: cover;
              background: var(--fond); }
.cliche figcaption { padding: 8px 10px; font-size: 13px; color: var(--encre-douce);
                     line-height: 1.35; flex: 1; }
.cliche figcaption .quand { display: block; font-size: 12px; opacity: .8; margin-top: 4px; }
.cliche form { padding: 0 10px 10px; }

/* Remplacer une photo : le fichier et le bouton sur une ligne. Deux gestes
   au lieu de quatre — le repli et la confirmation ne protégeaient de rien,
   puisque l'ancienne est conservée. */
.remplacer { margin: 0 0 14px; }
/* Le <label> fait office de bouton : c'est lui qui ouvre le sélecteur, sans
   script, et le champ caché qu'il enveloppe porte le fichier. */
label.comme-bouton { display: block; cursor: pointer; }

/* Le site n'a pas encore sa photo : on le dit franchement plutôt que de le
   cacher derrière un repli. */
.photo-manque { border: 1px dashed var(--accent); background: var(--accent-clair);
                border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 18px; }
.photo-manque > .champ > label { color: var(--accent); font-weight: 650; }

/* La photo générale du site : plein format, elle ouvre chaque document. */
.photo-site { border: 1px solid var(--trait); border-radius: var(--rayon);
              overflow: hidden; background: var(--carte); margin: 0 0 18px; }
.photo-site img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

/* Vignette dans une liste de résultats. */
.tuile .apercu { width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
                 flex: none; background: var(--fond); border: 1px solid var(--trait); }

/* La barre d'étapes d'une visite. Elle défile plutôt qu'elle ne se comprime :
   cinq libellés tassés sur 360 px deviennent illisibles, et une étape qu'on ne
   lit pas est une étape où l'on ne va pas. */
.etapes { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 20px;
          padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.etape-lien {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--trait); background: var(--carte);
  color: var(--encre-douce); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.etape-lien.ici { background: var(--accent); border-color: var(--accent); color: #fff; }
.etape-lien .compte {
  font-size: 12px; font-weight: 700; min-width: 18px; text-align: center;
  padding: 1px 5px; border-radius: 999px;
  background: var(--accent-clair); color: var(--accent);
}
.etape-lien.ici .compte { background: rgba(255,255,255,.24); color: #fff; }

/* « Suivant » quand il n'enregistre rien : même poids visuel que le bouton,
   mais c'est un lien, et ça se voit au survol comme au clavier. */
a.principal-lien {
  display: block; text-align: center; padding: 15px; border-radius: var(--rayon);
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 650; font-size: 16px; min-height: 52px; box-sizing: border-box;
}

/* Une liste de cases à cocher. La cible tactile est la ligne entière, pas le
   petit carré : avec des gants, viser 16 px ne marche pas. */
.cases { display: grid; gap: 2px; }
.case { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
        border: 1px solid var(--trait); border-radius: var(--rayon);
        background: var(--carte); cursor: pointer; min-height: 52px;
        box-sizing: border-box; }
.case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.case span { font-size: 15px; line-height: 1.35; }
.case:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.case:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Une case posée sous le titre d'un champ n'en prend pas le style (majuscules) :
   c'est une phrase à lire, pas un titre (DIU, 04/10/2026). */
.champ > label.case { font-size: inherit; color: inherit; text-transform: none;
                      letter-spacing: normal; font-weight: normal; }

.liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.liste li { font-size: 15px; }

/* Un repli : ce qui ne sert pas à chaque visite ne tient pas l'écran. Le
   <details> natif fonctionne sans script et au clavier ; il porte donc seul
   la mécanique, et le CSS ne fait que lui donner l'allure d'un bouton. */
.repli { margin-top: 18px; }
.repli > summary {
  display: block; text-align: center; padding: 14px; border-radius: var(--rayon);
  border: 1px dashed var(--trait); background: var(--carte); color: var(--accent);
  font-weight: 600; min-height: 52px; cursor: pointer; list-style: none;
  box-sizing: border-box;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.repli[open] > summary { border-style: solid; margin-bottom: 14px; }
.repli > summary .compte { color: var(--encre-douce); font-weight: 400; }

/* Le refus vient d'un trigger : on le montre tel quel, en tête du formulaire. */
.refus { border-left: 4px solid var(--alerte); background: var(--alerte-fond);
         padding: 14px 16px; border-radius: 6px; margin: 0 0 20px; }
.refus .quoi { font-weight: 650; margin-bottom: 6px; }
.refus .detail { font-size: 14px; color: var(--encre-douce); margin-top: 8px;
                 font-family: ui-monospace, Consolas, monospace; }
.refus .origine { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
                  color: var(--alerte); font-weight: 650; margin-bottom: 6px; }

.insuffisant { color: var(--alerte); }

/* ------------------------------------------------------- écrans de seuil */

body.seuil { background: var(--encre); color: #fff; display: flex;
             min-height: 100vh; align-items: center; justify-content: center; }
.seuil-corps { max-width: 420px; width: 100%; padding: 28px 22px; }
.seuil-corps h1 { color: #fff; margin-bottom: 6px; }
.seuil-corps .aide { color: rgba(255,255,255,.72); }
.seuil-corps .pied { color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.15); }
.seuil-corps .pied a { color: #9ec8f5; }
.seuil-corps .champ > label { color: rgba(255,255,255,.62); }
.seuil-corps .champ .indice { color: rgba(255,255,255,.55); }
.seuil-corps .champ input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff;
}
.seuil-corps .refus { background: rgba(163,52,28,.22); border-left-color: #e08163; }
.seuil-corps .refus .quoi, .seuil-corps .refus .origine { color: #ffd9cd; }

.marque-seuil { font-weight: 650; font-size: 15px; letter-spacing: .01em;
                margin: 0 0 26px; color: rgba(255,255,255,.85); }
.marque-seuil span { opacity: .5; font-weight: 400; }

/* Un code se tape au pouce : gros chiffres, bien espacés. */
input.pin-saisie {
  font-size: 30px; letter-spacing: .5em; text-align: center;
  padding: 16px 14px; font-family: ui-monospace, Consolas, monospace;
}

.bandeau .qui {
  margin-left: auto; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.14); padding: 7px 13px; border-radius: 20px;
}

/* ------------------------------------------ état d'une installation */

tr.depose td { opacity: .55; }
tr.depose td.mono { text-decoration: line-through; }

button.bascule {
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 11px; border-radius: 20px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; min-height: 34px;
}
button.bascule.en_service { background: var(--vert-fond); color: var(--vert);
                            border-color: #c4e2d1; }
button.bascule.demonte    { background: var(--fond); color: var(--encre-douce);
                            border-color: var(--trait); }

/* Le déclencheur de l'écran d'un point : grand, au même endroit à chaque
   retour de l'appareil photo, pour qu'on l'enchaîne sans viser. */
.declencheur {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 84px; padding: 18px; cursor: pointer;
  border: 0; border-radius: var(--rayon); background: var(--accent); color: #fff;
  font: inherit; font-size: 17px; font-weight: 650; width: 100%;
}
.declencheur .objectif { font-size: 26px; line-height: 1; }
.declencheur:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------ photos en attente
   Collée en bas de l'écran dès qu'il y a quelque chose à envoyer : on ne
   remonte jamais la page pour trouver le bouton. */
.en-attente {
  position: sticky; bottom: 0; z-index: 5; margin: 16px -16px -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--carte); border-top: 1px solid var(--trait);
  box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  display: grid; gap: 10px;
}
.apercus { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.apercu-attente { width: 54px; height: 54px; flex: none; object-fit: cover;
                  border-radius: 8px; border: 1px solid var(--trait);
                  cursor: pointer; }
.en-attente button { margin: 0; }

/* ------------------------------------------------- appareil photo intégré
   iOS n'ouvre son appareil qu'en mode un cliché depuis une page web. Pour
   enchaîner vingt photos sans quitter l'écran, il faut son propre viseur. */
.viseur { position: relative; border-radius: var(--rayon); overflow: hidden;
          background: #000; margin: 0 0 10px; }
.viseur video { display: block; width: 100%; max-height: 62vh; object-fit: cover; }
.obturateur {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 4px solid rgba(0,0,0,.35);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.obturateur:active { transform: translateX(-50%) scale(.92); }
.apercu-attente.envoyee { outline: 2px solid var(--vert); outline-offset: -2px; }
.apercu-attente.echouee { outline: 2px solid var(--alerte); outline-offset: -2px; }
/* « Appareil du téléphone ou galerie » a le même aspect que « Ouvrir l'appareil
   photo » (Christophe, 21/09/2026) : plus de variante blanche. */

/* ------------------------------------------------ état des lieux (SOP) */
.etiquette-champ { font-size: 13px; color: var(--encre-douce);
                   text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.choix-sens { display: grid; gap: 8px; }
.choix-sens .sens {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 14px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
}
/* `.champ input` pose largeur et marges d'un champ texte : on les défait pour la case. */
.choix-sens .sens input { width: 22px; height: 22px; margin: 0; padding: 0; flex: none;
                         accent-color: var(--accent); }
.choix-sens .sens:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
/* Le compte d'un point de SOP : « 7/12 ». Plein quand tous les cadres sont faits. */
.pose .combien.complet { background: var(--vert); color: #fff; }
.cadres { font-variant-numeric: tabular-nums; }
.bilan-sop td.nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reference { border-left: 4px solid var(--trait); padding-left: 12px; margin: 14px 0; }
.reference .galerie { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.reference .cliche img { height: 90px; }
.cliche .rang { position: absolute; top: 6px; left: 6px; background: rgba(22,32,43,.75);
  color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.cliche { position: relative; }
.cliche.hors-document img { opacity: .45; }
.sop-deux { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .sop-deux { grid-template-columns: 1fr; } }
.sop-carte { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.sop-carte .titre { font-weight: 700; }
.sop-carte .note { color: var(--encre-douce); font-size: 13.5px; }
.sop-carte .actions { margin-top: auto; }

/* ------------------------------------------------------ page d'accueil */
.bonjour { font-size: 28px; margin: 8px 0 6px; }
.question { font-size: 18px; margin: 0 0 20px; color: var(--encre); }
.donneurs .tuile.donneur { min-height: 76px; }
.donneurs .tuile.donneur .titre { font-size: 20px; }
/* Texte centré dans la tuile (22/09/2026) ; la flèche reste au bord, hors du centrage. */
.donneurs .tuile.donneur { position: relative; }
.donneurs .tuile.donneur .corps { flex: 1; text-align: center; }
.donneurs .tuile.donneur .fleche { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.donneurs .tuile.donneur.choisi { border-color: var(--accent); background: var(--accent-clair); }

/* Quick search : ce qu'on tape s'affiche en majuscules, comme les codes de site
   (HTFRC, 002C1_3). Affichage seulement — la recherche ignore déjà la casse
   (normalise_code). L'indication d'exemple garde sa casse. */
.recherche input[type="search"] { text-transform: uppercase; }
.recherche input[type="search"]::placeholder { text-transform: none; }

/* Un bouton attaché à son cadre (21/09/2026) : « Nouvelle photo » sous la photo
   du site, « Modifier » sous la fiche. Un seul bloc, coins partagés : on voit
   ce que le bouton modifie. */
.cadre-joint { margin: 0 0 18px; }
.cadre-joint > .photo-site, .cadre-joint > .carte {
  margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cadre-joint > form { margin: 0; }
.cadre-joint .secondaire {
  border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Les actions d'un site attachées en un seul bloc (21/09/2026) : un cadre, des
   boutons séparés par un trait, coins arrondis seulement aux extrémités. */
.groupe-actions { display: grid; margin: 18px 0 0; border: 1px solid var(--trait);
                  border-radius: var(--rayon); overflow: hidden; background: var(--carte); }
.groupe-actions > .secondaire { border: 0; border-radius: 0; }
.groupe-actions > .secondaire + .secondaire { border-top: 1px solid var(--trait); }
.groupe-actions > .secondaire:active { background: var(--accent-clair); }

/* Boutons blancs : texte bleu (Christophe, 21/09/2026 — essai en foncé
   abandonné le même jour). */

/* Commencer une visite : le dossier en deux tuiles, Nouveau / Existant.
   Collées en un seul bloc, texte centré, même couleur que le bloc d'actions de
   la fiche du site (Christophe, 21/09/2026). */
.tuiles-dossier { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait);
                  border-radius: var(--rayon); overflow: hidden; background: var(--carte); }
.tuile-dossier {
  font: inherit; text-align: center; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 14px;
  border: 0; border-radius: 0; background: var(--carte); color: var(--accent);
}
.tuile-dossier + .tuile-dossier { border-left: 1px solid var(--trait); }
.tuile-dossier .titre { font-weight: 600; font-size: 17px; }
.tuile-dossier .note { color: var(--encre-douce); font-size: 13.5px; }
.tuile-dossier:active { background: var(--accent-clair); }
.tuile-dossier:disabled { opacity: .5; cursor: default; }
/* Une tuile de liste qui est un bouton d'envoi (choix du dossier existant). */
.tuile.tuile-bouton { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* Étape Personnes : l'entrepreneur en tuiles (et Absent / N/A du propriétaire).
   Des boutons radio habillés en tuiles collées, deux par ligne ; la tuile
   choisie est surlignée. « Autre société… » ouvre le menu complet dessous. */
.tuiles-radio { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--trait);
                border-radius: var(--rayon); overflow: hidden; background: var(--carte); }
.tuiles-radio .tr { display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 10px; cursor: pointer; color: var(--accent); font-weight: 600;
  border-bottom: 1px solid var(--trait); }
.tuiles-radio .tr:nth-child(odd) { border-right: 1px solid var(--trait); }
.tuiles-radio .tr:nth-last-child(-n+2):nth-child(odd),
.tuiles-radio .tr:last-child { border-bottom: 0; }
.tuiles-radio .tr.discret { color: var(--encre-douce); font-weight: 500; }
.tuiles-radio .tr input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tuiles-radio .tr:has(input:checked) { background: var(--accent-clair); color: var(--accent); }
.tuiles-radio .tr:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.autre-societe { display: none; margin-top: 8px; }
.tuiles-radio:has(input[value="__autre__"]:checked) + .autre-societe { display: block; }
.autre-societe select { width: 100%; }

/* Un élément marqué hidden reste caché même si sa classe lui donne un display
   (grid, flex) : sans cette règle, .paire restait visible (vu le 21/09/2026). */
[hidden] { display: none !important; }

/* Étape Personnes : chaque rôle dans son encadré à bords arrondis
   (Christophe, 21/09/2026). */
.role-carte { display: grid; gap: 14px; margin-bottom: 0; }

/* Carte d'emplacement : le choix de la balise, aux couleurs de la carte (22/09/2026).
   Chaque choix porte une pastille de la couleur de sa balise ; le choix actif se
   remplit de cette couleur. Le bouton radio reste là, invisible, pour le clavier. */
.choix-balise { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.choix-balise label {
  position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 10px 16px; border: 2px solid var(--c); border-radius: 999px;
  background: var(--carte); color: var(--encre); font-size: 15px; font-weight: 600;
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.choix-balise label .indice { font-weight: 400; color: inherit; opacity: .8; }
.choix-balise input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choix-balise .pastille { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.choix-balise label:has(input:checked) { background: var(--c); color: #fff; }
.choix-balise label:has(input:checked) .pastille { background: #fff; }
.choix-balise label:has(input:focus-visible) { outline: 3px solid var(--c); outline-offset: 2px; }

/* Fin d'une visite clôturée (22/09/2026) : un mot, deux chemins. */
.termine { text-align: center; padding: 28px 0 8px; }
.termine-titre { font-size: 30px; font-weight: 750; color: var(--accent); margin: 0 0 18px; }
a.principal-lien.contour { background: var(--carte); color: var(--accent);
                           border: 1px solid var(--accent); }

/* Glisser-déposer une photo (22/09/2026) */
.zone-depot { transition: box-shadow .12s, background-color .12s; }
.zone-depot.depot-actif { box-shadow: 0 0 0 3px var(--accent); background-color: var(--accent-clair); }
.zone-depot.depot-refus { box-shadow: 0 0 0 3px #b42318; }
.depot-aide { margin: 8px 0 0; font-size: 13.5px; color: var(--encre-douce); text-align: center; }
.depot-envoi .depot-aide { color: var(--accent); font-weight: 600; }

/* Étiquettes RGIE et STC (078, 02/10/2026) : une date lue sur place, ou un constat
   (étiquette manquante, STC non requis). Le bouton photo à côté de la date. */
.etiquettes { display: grid; gap: 12px; margin: 0 0 18px; }
@media (min-width: 760px) { .etiquettes { grid-template-columns: 1fr 1fr; } }
fieldset.etiquette { margin: 0; display: grid; gap: 8px; min-width: 0; align-content: start; }
fieldset.etiquette legend { font-weight: 750; font-size: 18px; padding: 0 6px; }
.etiquette .obligatoire { margin-left: 8px; font-size: 11.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--alerte, #b42318); }
.ligne-etiquette { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.ligne-etiquette .case { flex: 0 0 auto; }
.ligne-etiquette input.date-etiquette {
  flex: 1 1 140px; min-width: 0; font: inherit; font-size: 17px; letter-spacing: .04em;
  padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--carte); color: inherit; }
.ligne-etiquette input.date-etiquette:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label.photo-etiquette {
  flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 14px; min-height: 52px; box-sizing: border-box; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--carte);
  color: var(--accent); font-weight: 650; text-align: center; }
label.photo-etiquette.fait { background: var(--vert-fond); color: var(--vert); border-color: var(--vert); }
.etiquette .vignettes { display: flex; gap: 10px; flex-wrap: wrap; }
.etiquette .vignettes figure { margin: 0; display: grid; gap: 4px; }
.etiquette .vignettes img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
/* « Étiquette manquante » et « non requis » sur la même ligne (02/10/2026). */
.options-etiquette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.options-etiquette .case { align-items: center; }

/* Étape Levage (081, 02/10/2026) : cinq choix en grille, l'interdit grisé (Elia). */
.choix-levage { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .choix-levage { grid-template-columns: repeat(3, 1fr); } }
.choix-levage .case { align-items: center; }
.case.interdit { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

/* Changer l'ordre des photos en glissant une vignette sur une autre (ordre_photos.js,
   05/10/2026). */
.ordre-actif [data-photo] { cursor: grab; }
.ordre-actif [data-photo].tiree { opacity: .4; }
.ordre-actif [data-photo].cible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* L'appareil photo de l'application sur les zones photo (appareil_photo.js, 07/10/2026). */
.appareil-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 20, .82);
                  display: flex; align-items: center; justify-content: center; padding: 12px; }
.appareil-boite { width: min(720px, 100%); max-height: 100%; overflow: auto; background: var(--fond);
                  border-radius: var(--rayon); padding: 12px; display: grid; gap: 10px; }
.lien-fichier { background: none; border: 0; padding: 4px 0; color: var(--accent);
                text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer;
                justify-self: start; }