/* Mobile d'abord : une colonne, zones de tap ≥ 44 px, texte 17 px.
   À partir de 960 px (PC) : grilles plus larges, liste des étapes et infos côte à côte. */

:root {
  --fond: #f4f6f7;
  --surface: #ffffff;
  --texte: #1b2328;
  --doux: #5c6b73;
  --accent: #0f6e8c;
  --accent-texte: #ffffff;
  --barre: #0f3b4f;
  --alerte: #b3261e;
  --ok: #2e7d32;
  --bord: #d9e0e3;
  --rayon: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #11171a;
    --surface: #1b2428;
    --texte: #e6ecef;
    --doux: #9aa9b0;
    --accent: #4fb3d4;
    --accent-texte: #0b1a20;
    --barre: #0b2633;
    --alerte: #ff8a80;
    --ok: #81c784;
    --bord: #2c393f;
  }
}

* { box-sizing: border-box; }
html.verrou body { visibility: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
}
a { color: var(--accent); }

/* ---------- Structure ---------- */

.barre {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--barre); color: #fff;
}
.barre .marque { color: #fff; font-weight: 700; font-size: 20px; text-decoration: none; }

main { margin: 0 auto; padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px); }
main.etroit { max-width: 720px; }
main.large { max-width: 1280px; }

h1 { font-size: 24px; margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 19px; margin: 0; }
h2.section { margin: 24px 0 10px; color: var(--doux); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
}
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.fil { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.fil a { text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.badge {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 99px;
  background: var(--fond); border: 1px solid var(--bord); font-size: 14px; color: var(--doux);
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.notes { white-space: pre-line; margin-top: 12px; }
.aide { color: var(--doux); font-size: 14px; }
p.aide { margin: 4px 0 0; }
.alerte { color: var(--alerte); margin: 0; }

/* ---------- Boutons ---------- */

button, .bouton {
  font: inherit; min-height: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte); text-decoration: none;
}
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 700; }
button.secondaire { border-color: var(--accent); color: var(--accent); }
button.grand { min-height: 56px; font-size: 19px; flex: 1 1 100%; }
button.discret { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
button:disabled { opacity: .6; cursor: wait; }
a.danger { color: var(--alerte); text-align: center; padding: 10px; }
.bouton.supprimer { color: var(--alerte); border-color: var(--alerte); }
button.danger-plein { background: var(--alerte); border-color: var(--alerte); color: #fff; font-weight: 700; }

/* ---------- Formulaires ---------- */

.formulaire { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
form.formulaire:has(input[name=mdp]) { max-width: 420px; margin-top: 8vh; }
label { display: grid; gap: 6px; font-weight: 600; }
input, select, textarea {
  font: inherit; color: inherit; width: 100%;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--bord); border-radius: 8px;
  background: var(--fond);
}
fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; display: grid; gap: 14px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }
.deux { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }

/* ---------- Accueil ---------- */

.grille-cartes { display: grid; gap: 10px; }
.carte.voyage { display: grid; gap: 2px; text-decoration: none; color: inherit; }
.carte.voyage strong { font-size: 18px; }
.en-cours { border: 2px solid var(--accent); margin-bottom: 8px; }
.en-cours h2 a { color: inherit; text-decoration: none; }

/* ---------- Voyage et étapes ---------- */

.voyage-grille { display: grid; gap: 16px; }
.carte-a-venir { margin-top: 16px; padding: 24px; border: 1px dashed var(--bord); border-radius: var(--rayon); text-align: center; }

.liste-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.etape { display: flex; gap: 8px; align-items: stretch; }
.etape > a {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 60px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  color: inherit; text-decoration: none;
}
.etape .num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; background: var(--accent); color: var(--accent-texte);
}
.etape.prevue .num { background: transparent; color: var(--accent); border: 2px dashed var(--accent); }
.etape .corps { flex: 1; display: grid; min-width: 0; }
.etape .corps strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape .etat { font-size: 14px; color: var(--doux); }
.etape.faite .etat { color: var(--ok); font-weight: 700; font-size: 18px; }
.etape.tire { opacity: .4; }
/* Étape sautée : grisée, titre barré. */
.etape.sautee .num { background: transparent; color: var(--doux); border: 2px solid var(--doux); }
.etape.sautee .corps strong { text-decoration: line-through; color: var(--doux); }
.repere.saute span { background: #bdbdbd; color: #555; border: 2px solid #fff; text-decoration: line-through; }
/* Guidage : la prochaine étape, mise en avant pendant le voyage. */
.prochaine { margin-top: 14px; padding: 12px; border: 1px solid var(--bord); border-radius: var(--rayon); display: grid; gap: 8px; }
.prochaine p { margin: 0; }
.prochaine.en-avant { border: 2px solid var(--accent); }
.fleches { display: flex; flex-direction: column; gap: 4px; }
.fleches button { min-height: 28px; flex: 1; padding: 0 14px; }
.vide { padding: 16px; }

/* Indications selon le pointeur : « ⇅ Ordre » au doigt, astuce de glisser à la souris. */
.souris { display: none; }
@media (pointer: fine) {
  .souris { display: block; margin: -4px 0 10px; }
  .etape[draggable=true] > a { cursor: grab; }
}

.details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; }
.details dt { color: var(--doux); }
.details dd { margin: 0; }
.pagination { display: flex; justify-content: space-between; margin-top: 12px; }

/* ---------- Cartes ---------- */

.carte-geo {
  height: 280px; margin-top: 16px; border-radius: var(--rayon); border: 1px solid var(--bord);
  z-index: 0; /* sous la barre collante */
}
.carte-geo.petite { height: 220px; }
.carte-geo.choix { height: 300px; margin-top: 0; }
.carte-vide { margin-top: 16px; }
.repere span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 700 14px/1 system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.repere.fait span { background: #0f6e8c; color: #fff; border: 2px solid #fff; }
.repere.prevu span { background: #fff; color: #0f6e8c; border: 2px dashed #0f6e8c; }
.trace { stroke: #0f6e8c; stroke-width: 4; fill: none; }
.trace.prevu { stroke-opacity: .7; }
.leaflet-container a { color: #0f6e8c; }

.recherche { display: flex; gap: 8px; }
.recherche input { flex: 1; }
.resultats { list-style: none; margin: -6px 0 0; padding: 0; display: grid; gap: 6px; }
.resultats button { width: 100%; justify-content: flex-start; text-align: left; padding: 8px 12px; font-size: 15px; }

/* ---------- Photos ---------- */

.carte.voyage .couverture, .en-cours .couverture {
  width: calc(100% + 32px); margin: -16px -16px 8px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--rayon) var(--rayon) 0 0; display: block;
}
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; }
.vignette {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  background: var(--surface); border-radius: 6px; text-decoration: none; font-size: 32px;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette.video::after {
  content: "▶"; position: absolute; inset: auto 6px 6px auto; font-size: 13px; color: #fff;
  background: rgba(0,0,0,.6); border-radius: 4px; padding: 1px 6px;
}
.photos-etape { margin-top: 20px; }
.envoi-bouton { position: relative; }

.envois { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.envois li { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; align-items: center; font-size: 14px; }
.envois .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envois progress { width: 100%; }
.envois li.ok .etat { color: var(--ok); }
.envois li.erreur .etat { color: var(--alerte); }

.grille-ranger { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.grille-ranger .item { display: grid; gap: 6px; padding: 8px; }
.grille-ranger img, .grille-ranger .sans-apercu {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: grid; place-items: center; font-size: 32px;
}
.grille-ranger select { font-size: 15px; }

/* Visionneuse plein écran */
body.sans-defilement { overflow: hidden; }
.visionneuse { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; display: grid; grid-template-rows: auto 1fr; }
.visionneuse[hidden] { display: none; }
.vis-barre {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 6px 14px; background: rgba(0,0,0,.6); font-size: 14px;
}
.vis-actions { display: flex; gap: 4px; }
.vis-actions button, .vis-actions a {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0;
  background: transparent; border: 0; color: #fff; font-size: 20px; text-decoration: none; border-radius: 8px;
}
.vis-actions [hidden] { display: none; }
.vis-scene { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.vis-scene img, .vis-scene video { max-width: 100%; max-height: 100%; object-fit: contain; }
.vis-scene p { padding: 24px; text-align: center; }
.vis-scene a { color: #8fd3ea; }
.vis-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px;
  background: rgba(0,0,0,.35); color: #fff; border: 0; font-size: 34px;
}
.vis-nav.prec { left: 0; border-radius: 0 8px 8px 0; }
.vis-nav.suiv { right: 0; border-radius: 8px 0 0 8px; }
.vis-message {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 20px); left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,.9); color: #000; padding: 8px 14px; border-radius: 99px; margin: 0;
}
@media (pointer: coarse) { .vis-nav { display: none; } } /* au doigt : balayage */

/* ---------- Texte enrichi ---------- */

.notes { white-space: normal; }
.notes > :first-child { margin-top: 0; }
.notes > :last-child { margin-bottom: 0; }
.notes p, .zone p { margin: 0 0 .6em; }
.notes h2, .notes h3, .zone h2, .zone h3 { font-size: 18px; margin: .8em 0 .4em; }
.notes ul, .notes ol, .zone ul, .zone ol { margin: 0 0 .6em; padding-left: 1.4em; }

.editeur { display: grid; gap: 6px; }
.editeur .libelle { font-weight: 600; }
.editeur .outils {
  display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: 64px; z-index: 2;
  padding: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: 8px;
}
.editeur .outils[hidden], .editeur .zone[hidden] { display: none; }
.editeur .outils button { min-width: 44px; padding: 0 10px; font-size: 16px; }
.editeur .outils button.actif { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.editeur .zone {
  min-height: 140px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px;
  background: var(--fond); outline: none; overflow-wrap: anywhere;
}
.editeur .zone:focus { border-color: var(--accent); }
.editeur .zone a, .notes a { color: var(--accent); }

/* Couleurs du texte (palette de l'éditeur), lisibles en clair comme en sombre. */
.c-rouge { color: #c62828; } .c-orange { color: #e65100; } .c-vert { color: #2e7d32; }
.c-bleu { color: #1565c0; } .c-violet { color: #6a1b9a; } .c-gris { color: #757575; }
@media (prefers-color-scheme: dark) {
  .c-rouge { color: #ef9a9a; } .c-orange { color: #ffb74d; } .c-vert { color: #a5d6a7; }
  .c-bleu { color: #90caf9; } .c-violet { color: #ce93d8; } .c-gris { color: #bdbdbd; }
  /* Pendant la saisie, le navigateur pose <font color> : on éclaircit aussi ces couleurs-là. */
  .zone font[color="#c62828"] { color: #ef9a9a; } .zone font[color="#ef6c00"] { color: #ffb74d; }
  .zone font[color="#2e7d32"] { color: #a5d6a7; } .zone font[color="#1565c0"] { color: #90caf9; }
  .zone font[color="#6a1b9a"] { color: #ce93d8; } .zone font[color="#757575"] { color: #bdbdbd; }
}
.editeur .couleurs { position: relative; display: inline-flex; }
.editeur .palette {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.editeur .palette[hidden] { display: none; }
.editeur .outils .pastille { min-width: 36px; min-height: 36px; padding: 0; font-size: 22px; line-height: 1; }

/* ---------- Menu ---------- */

.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
  color: #fff; text-decoration: none; min-height: 44px; padding: 0 10px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px; font-size: 16px;
}
.menu a:hover, .menu .quitter:hover { background: rgba(255,255,255,.12); }
.menu form { margin: 0; display: flex; }
.menu .quitter { background: transparent; border: 0; color: #fff; padding: 0 10px; font-size: 16px; }
@media (max-width: 480px) { .menu span { display: none; } .menu a, .menu .quitter { font-size: 22px; } }
.pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* ---------- Itinéraire : péages, choix, découpage ---------- */

.options-trajet { margin: 8px 0 4px; }
.etat-trajet { display: grid; gap: 8px; margin-top: 8px; }
.ligne-decoupage { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.ligne-decoupage label { display: inline-grid; }
.ligne-decoupage input { width: 5em; }
.propositions { display: grid; gap: 14px; padding-left: 1.4em; }
.propositions li { display: grid; gap: 4px; }
.bulle-trace { display: grid; gap: 8px; justify-items: start; }
.leaflet-popup-content .bouton { color: var(--accent-texte); white-space: nowrap; }

/* ---------- Entretien ---------- */

.liste-entretien, .liste-parties { display: grid; gap: 8px; }
.carte.partie { display: grid; gap: 4px; text-decoration: none; color: inherit; }
/* Entretien : une tuile par intervention, la date en pastille à gauche, de la plus récente à la plus ancienne. */
.liste-entretien { max-width: 900px; }
.carte.entretien { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: inherit; }
.carte.entretien .quand {
  flex: none; width: 58px; padding: 6px 0; border-radius: 8px; text-align: center;
  background: var(--fond); border: 1px solid var(--bord); display: grid; line-height: 1.15; font-size: 22px;
}
.carte.entretien .quand strong { font-size: 22px; }
.carte.entretien .quand span { font-size: 12px; color: var(--doux); }
/* Couleur du titre : rouge = problème, vert = très intéressant ; liseré à gauche pour repérer en un coup d'œil. */
/* Retour de modification : la note est placée sous la barre du haut et brièvement soulignée. */
.carte.entretien { scroll-margin-top: 90px; }
.carte.entretien:target { outline: 3px solid var(--accent, #1565c0); outline-offset: 2px; }
.carte.entretien.bord-rouge { border-left: 5px solid #c62828; }
.carte.entretien.bord-vert { border-left: 5px solid #2e7d32; }
.choix-couleur { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.choix-couleur legend { font-weight: 600; padding: 0 4px; }
.choix-couleur label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.choix-couleur input { width: auto; min-height: 0; }
.carte.entretien .corps { flex: 1; min-width: 0; display: grid; gap: 4px; }
.entete-ligne { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.prix { font-weight: 700; white-space: nowrap; }
.extrait { color: var(--doux); font-size: 15px; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pieces li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pieces a:not(.danger) { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.pieces img, .pieces .pdf {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none;
  display: grid; place-items: center; background: var(--fond); border: 1px solid var(--bord); font-weight: 700; font-size: 13px;
}

/* ---------- Jeux ---------- */

.scores { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.score.gagnant { color: var(--ok); }
.classement { width: 100%; border-collapse: collapse; font-size: 16px; }
.classement th { text-align: left; color: var(--doux); font-weight: 600; font-size: 14px; padding: 4px 6px; }
.classement td { padding: 8px 6px; border-top: 1px solid var(--bord); }
.classement td:nth-child(n+3), .classement th:nth-child(n+3) { text-align: right; }
.lignes-scores { display: grid; gap: 8px; }
.ligne-score { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }

/* ---------- Hors ligne ---------- */

.preparer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
label.case { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
label.case input { width: auto; min-height: 0; }
.bandeau-message {
  position: sticky; top: 64px; z-index: 9; margin: 8px 16px 0; padding: 10px 14px;
  background: var(--accent); color: var(--accent-texte); border-radius: var(--rayon); font-weight: 600;
}
.file-attente {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: var(--rayon);
  background: var(--barre); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35); font-size: 15px;
}
.file-attente.echec { background: var(--alerte); }
.file-attente[hidden], .bandeau-message[hidden] { display: none; }
main { padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }

/* ---------- Carte plein écran, itinéraires ---------- */

.carte-geo.plein-ecran {
  position: fixed !important; inset: 0; z-index: 1500; height: auto !important;
  margin: 0; border-radius: 0; border: 0;
}
/* La colonne collante créerait un contexte d'empilement sous la barre : on la neutralise. */
body.carte-plein .barre, body.carte-plein .file-attente, body.carte-plein .bandeau-message { display: none; }
body.carte-plein .voyage-grille .infos, body.carte-plein .editeur .outils { position: static; }
.plein-ecran-bouton {
  min-width: 40px; min-height: 40px; padding: 0; font-size: 20px; line-height: 1;
  background: #fff; color: #1b2328; border: 2px solid rgba(0,0,0,.2); border-radius: 6px; cursor: pointer;
}
.route { stroke: #0f6e8c; stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route.choisie { stroke: #0f6e8c; stroke-opacity: .95; }
.route.autre { stroke: #6b7c84; stroke-opacity: .55; stroke-dasharray: 2 8; cursor: pointer; }
.resume-trajet { background: rgba(255,255,255,.92); color: #1b2328; padding: 4px 10px; border-radius: 6px; font-size: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.resume-trajet:empty { display: none; }
.trajets { margin-top: 10px; }
.choix-trajets { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-trajets button { font-size: 15px; }
.choix-trajets button.actif { border-color: var(--accent); background: var(--accent); color: var(--accent-texte); }
.actions-lieu { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ok-message { color: var(--ok); font-weight: 600; margin: 0; }

/* ---------- Formulaires en deux colonnes (PC) ---------- */

.colonne { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pied-formulaire { display: grid; gap: 8px; }
.repere.extremite span { background: #2e7d32; color: #fff; border: 2px solid #fff; border-radius: 6px; }
button.discret-clair { background: transparent; border: 0; color: var(--doux); justify-self: start; padding: 0; min-height: 32px; text-decoration: underline; }
fieldset.lieu + fieldset.lieu { margin-top: 0; }

/* ---------- PC ---------- */

@media (min-width: 960px) {
  main { padding: 24px; }
  .grille-cartes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .voyage-grille { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); align-items: start; }
  .voyage-grille .etapes { grid-column: 1; grid-row: 1; }
  .voyage-grille .infos { grid-column: 2; position: sticky; top: 84px; }
  button.grand { flex: 0 1 auto; }
  .infos .carte-geo { height: 420px; }
  .carte-geo.choix { height: 380px; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

  /* Formulaires d'étape et de voyage : champs à gauche, lieu(x) et carte(s) à droite. */
  .formulaire.deux-colonnes { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
  .formulaire.deux-colonnes > h1, .formulaire.deux-colonnes > .alerte, .formulaire.deux-colonnes > .pied-formulaire { grid-column: 1 / -1; }
  .formulaire.deux-colonnes .pied-formulaire { grid-template-columns: 320px auto; justify-content: start; align-items: center; }
  .formulaire.deux-colonnes .carte-geo.choix { height: 340px; }
  .formulaire.deux-colonnes .editeur .zone { min-height: 260px; }

  /* Fiche étape : détails et carte à gauche, photos à droite. */
  .etape-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
  .etape-grille .photos-etape { margin-top: 0; }
  .etape-grille .carte-geo.petite { height: 320px; }

}