/* =============================================================================
   tunnel-v7 : le tunnel de creation, vue iterateur.

   Deux colonnes : le formulaire a gauche, l'apercu vivant de la fiche a droite.
   L'argument du parcours est de voir sa fiche prendre forme pendant qu'on la
   remplit, donc la colonne de droite n'est pas une decoration : elle a le meme
   poids visuel que le formulaire.

   L'apercu reutilise les classes de fiche de la v7 (carte, badges, copie,
   valeur) : ce que l'utilisateur voit pendant la saisie est litteralement ce
   qu'il verra apres publication. Cette feuille n'ajoute que ce qui est propre
   au tunnel, l'ossature en deux colonnes, le rail d'etapes, la recherche et
   l'etat squelette.

   Aucune couleur en dur, uniquement des var(--ex-*) de tokens.css.
   ============================================================================= */

/* --- Ossature ---------------------------------------------------------------
   Une seule regle de grille pour les deux colonnes. La droite est plus large
   que la gauche : le formulaire pose des questions courtes, l'apercu montre une
   fiche entiere. */

.tunnel {
    font-family: var(--ex-font);
    font-size: 14px;
    color: var(--ex-stone-800);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;

    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: start;
    gap: 0;
    min-height: calc(100vh - 56px);
}
.tunnel *,
.tunnel *::before,
.tunnel *::after { box-sizing: border-box; }

/* Neutralisation de common.css, chargee sur tout le site. Meme travail que le
   bloc equivalent de .v7 : sans lui, li { margin-top: 1em } et
   section { margin-inline: 1em } deforment l'ossature. */
.tunnel section { margin: 0; }
.tunnel span { font-weight: inherit; }
.tunnel ul, .tunnel ol { list-style: none; margin: 0; padding: 0; }
.tunnel li { margin: 0; }
.tunnel p { margin: 0; }
.tunnel h1, .tunnel h2, .tunnel h3 {
    margin: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    font-size: inherit;
}
.tunnel [hidden] { display: none !important; }
/* button : common.css lui pose un fond, une bordure et une couleur. Sans cette
   ligne le rail d'etapes sort en paves sombres, et les liens secondaires en
   boutons gris. Les regles propres du tunnel reprennent la main plus bas. */
.tunnel button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    text-transform: none;
    box-shadow: none;
}

/* --- Colonne du formulaire -------------------------------------------------- */

.tunnel .saisie {
    padding: 30px 34px 40px;
    background: var(--ex-surface);
    border-right: 1px solid var(--ex-stone-200);
    min-height: 100%;
}

/* Le compteur d'etapes. Mono et ambre : c'est un reperage, pas un titre. */
.tunnel .compteur {
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-amber-700);
}

.tunnel [data-etape] h1 {
    margin-top: 12px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-stone-900);
}
/* Le titre recoit le focus a chaque changement d'etape : sans cette regle le
   navigateur dessine un contour sur un element qui n'est pas interactif. */
.tunnel [data-etape] h1:focus { outline: none; }
.tunnel [data-etape] h1:focus-visible { outline: 2px solid var(--ex-amber-400); outline-offset: 3px; }

.tunnel [data-etape] .chapeau {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ex-stone-600);
    max-width: 34rem;
}

/* --- Champs ----------------------------------------------------------------- */

.tunnel .champ { display: block; margin-top: 22px; }
.tunnel .champ > .intitule {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ex-stone-700);
}

.tunnel input[type="text"],
.tunnel input[type="email"],
.tunnel input[type="url"],
.tunnel input[type="tel"],
.tunnel input[type="search"],
.tunnel textarea {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--ex-font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ex-stone-900);
    background: var(--ex-surface);
    border: 2px solid var(--ex-stone-900);
    border-radius: 10px;
    transition: border-color .15s var(--ex-ease), box-shadow .15s var(--ex-ease);
}
.tunnel textarea { min-height: 150px; resize: vertical; }
/* Le siege tient en deux lignes : la hauteur minimale du textarea de
   description l'etirerait sans raison. */
.tunnel textarea[rows="2"] { min-height: 0; }
.tunnel textarea[rows="3"] { min-height: 78px; }
.tunnel input:focus,
.tunnel textarea:focus {
    outline: none;
    box-shadow: var(--ex-focus-ring);
}
.tunnel input::placeholder,
.tunnel textarea::placeholder { color: var(--ex-stone-400); }

/* Le champ en erreur ne rougit qu'apres avoir ete quitte, c'est le moteur qui
   pose aria-invalid. On ne reproche pas un champ en cours de remplissage. */
.tunnel [aria-invalid] { border-color: var(--ex-red-400); }
.tunnel .erreur {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ex-red-900);
}

/* --- Recherche du registre --------------------------------------------------
   La capacite declare que la reponse n'est pas instantanee : l'attente doit se
   voir. D'ou une ligne de message dans la liste plutot qu'un indicateur discret
   qu'on prendrait pour un blocage. */

/* La section reste le repere de la liste de suggestions, qui doit tomber sous
   l'ensemble. Le picto, lui, se cale sur la boite du champ seul. */
.tunnel .recherche { position: relative; }
.tunnel .recherche .zone-saisie { position: relative; display: block; }
.tunnel .recherche input { padding-left: 40px; }
.tunnel .recherche .zone-saisie::before {
    content: '\2315';
    position: absolute;
    left: 15px;
    /* Centre sur la hauteur du champ plutot qu'a une distance fixe du haut :
       l'ancien decalage etait compte depuis le sommet de la section, libelle
       compris, et le picto se posait donc sur le bord superieur du champ. Le
       centrage tient aussi si la taille du texte ou les marges changent. */
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    color: var(--ex-stone-500);
    pointer-events: none;
}

.tunnel [data-suggestions] {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    box-shadow: var(--ex-shadow-md);
}
.tunnel [data-suggestions] > li { border-top: 1px solid var(--ex-stone-100); }
.tunnel [data-suggestions] > li:first-child { border-top: 0; }

.tunnel [data-cle] {
    display: grid;
    gap: 2px;
    padding: 11px 16px;
    cursor: pointer;
}
.tunnel [data-cle]:hover,
.tunnel [data-cle].active { background: var(--ex-amber-50); }
.tunnel [data-cle] .nom {
    font-size: 14px;
    font-weight: 700;
    color: var(--ex-stone-900);
}
/* Identifiant et commune en mono : ce sont des references, et l'alignement des
   chiffres aide a comparer deux homonymes. */
.tunnel [data-cle] .meta {
    font-family: var(--ex-mono);
    font-size: 11.5px;
    color: var(--ex-stone-500);
}

/* Deja inscrite. La ligne reste cliquable, mais le clic mene au message et au
   lien vers la fiche, pas au tunnel : autant que ce soit lisible avant. */
.tunnel [data-inscrite] { background: var(--ex-stone-50); }
.tunnel [data-inscrite]:hover,
.tunnel [data-inscrite].active { background: var(--ex-stone-100); }
.tunnel [data-inscrite] .etat {
    justify-self: start;
    margin-top: 2px;
    padding: 1px 7px;
    border: 1px solid var(--ex-stone-300);
    border-radius: 999px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ex-stone-600);
    background: var(--ex-surface);
}

.tunnel [data-suggestions] .message {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--ex-stone-500);
}
.tunnel [data-suggestions] .message[data-genre="erreur"] { color: var(--ex-red-900); }

.tunnel [data-suggestions] .zero {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--ex-stone-600);
    background: var(--ex-stone-50);
}
.tunnel [data-suggestions] .zero button {
    font: inherit;
    font-weight: 600;
    color: var(--ex-link);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.tunnel [data-resolution] {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ex-stone-600);
}

/* --- Groupes optionnels -----------------------------------------------------
   Motif de divulgation du projet : aria-expanded sur le declencheur, hidden sur
   le panneau. Le signe passe de plus a moins par le seul attribut. */

.tunnel .optionnel {
    margin-top: 28px;
    font-family: var(--ex-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ex-stone-400);
}

.tunnel [data-groupe] {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    font: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--ex-stone-700);
    background: none;
    border: 1px dashed var(--ex-stone-300);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s var(--ex-ease), color .15s var(--ex-ease);
}
.tunnel [data-groupe]:hover { border-color: var(--ex-stone-400); color: var(--ex-stone-900); }
.tunnel [data-groupe]::before { content: '+ '; color: var(--ex-stone-400); }
.tunnel [data-groupe][aria-expanded="true"] {
    border-style: solid;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.tunnel [data-groupe][aria-expanded="true"]::before { content: '\2212 '; }

.tunnel .panneau-groupe {
    padding: 4px 16px 18px;
    border: 1px solid var(--ex-stone-300);
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Barre d'outils de la boite de texte. Sous elle et alignee a droite : posee a
   gauche au meme rang que le bouton principal, elle se lisait comme de la
   navigation alors qu'elle agit sur le champ juste au-dessus. */
.tunnel .outils {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    margin-top: 8px;
}

/* --- Actions ---------------------------------------------------------------- */

.tunnel .actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.tunnel .primaire {
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ex-text-on-accent);
    background: var(--ex-amber-400);
    border: 0;
    border-radius: 10px;
    padding: 13px 26px;
    box-shadow: var(--ex-shadow-golden);
    cursor: pointer;
    transition: background .15s var(--ex-ease), transform .15s var(--ex-ease);
}
.tunnel .primaire:hover:not(:disabled) { background: var(--ex-amber-500); }
/* common.css:242 pose background-color, border-color et color en !important sur
   tout button:disabled, d'ou des paves gris sur le rail et sur les liens
   secondaires. Un !important ne se desarme qu'avec un !important. */
.tunnel button:disabled {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--ex-stone-400) !important;
    /* common.css:246 pose aussi cursor: not-allowed en !important. Un rail dont
       les etapes futures affichent un panneau d'interdiction est plus punitif
       qu'informatif. */
    cursor: default !important;
}

/* Un bouton grise reste lisible : il indique une etape incomplete, il n'est pas
   une punition. */
.tunnel .primaire:disabled {
    background-color: var(--ex-stone-200) !important;
    color: var(--ex-stone-500) !important;
    box-shadow: none;
    cursor: not-allowed;
}

.tunnel .secondaire {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ex-link);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.tunnel .secondaire:disabled {
    color: var(--ex-stone-400);
    text-decoration: none;
    cursor: default;
}

.tunnel .mention {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ex-stone-500);
}

/* --- Colonne de l'apercu ----------------------------------------------------
   Fond creme et non blanc : la fiche posee dessus se detache comme elle le fera
   sur le site, ou le fond de page est creme lui aussi. */

/* L'apercu porte aussi la classe .v7 : c'est la seule facon de reutiliser les
   classes de fiche (carte, badges, rangee, chapeau), qui sont toutes ecrites
   sous cette portee. Mais .v7 est aussi un gabarit de page, avec sa grille en
   deux colonnes, sa mesure de 1440px et ses marges automatiques. On desarme ces
   trois-la ici plutot que de dupliquer les regles de fiche, et sans toucher a
   base-v7.css. */
.tunnel .apercu.v7 {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    position: sticky;
    top: 0;
    padding: 30px 34px 40px;
    background: var(--ex-bg);
    /* Defilement propre plutot qu'une hauteur qui pousse : avec min-height 100%
       le bas de la fiche devenait inatteignable des que l'apercu depassait
       l'ecran, ce qui arrive des la description remplie. */
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tunnel .apercu > .cap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--ex-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}

/* organisation-v7.css n'est pas chargee ici : elle redefinit .carte-identite en
   flex pour les fiches inscrites, qui ont une structure > header et > .reperes
   que l'apercu n'a pas. On reprend donc les deux seules regles dont il a besoin,
   plutot que d'importer une feuille entiere pour deux declarations. */
.tunnel .apercu .valeur {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ex-stone-800);
}
.tunnel .apercu .carte-identite { display: block; }

/* Sauts de ligne conserves, comme .v7 .texte-libre sur la fiche publiee
   (organisation-v7.css:229). Sans cette regle l'apercu repliait une liste de
   plusieurs lignes en une seule phrase courante : l'utilisateur saisissait des
   puces et lisait un pave, alors que sa fiche, elle, gardera ses retours. Un
   apercu qui ne montre pas ce qui sera publie ne sert a rien. */
.tunnel .apercu [data-bloc="description"],
.tunnel .apercu [data-bloc="activites"],
.tunnel .apercu [data-bloc="public"] {
    white-space: pre-line;
    overflow-wrap: break-word;
}

/* Ligne de contact : etiquette a largeur fixe, valeur en regard. Le premier jet
   empruntait .copie et .cap de la fiche, qui ne veulent pas dire ca : .copie est
   le retour visuel "copie" d'un identifiant et .cap un simple inline-block.
   Aucune des deux ne pose de gouttiere, d'ou l'etiquette collee a sa valeur. */
.tunnel .apercu .ligne-contact {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 5px 0;
}
.tunnel .apercu .ligne-contact .etiquette {
    font-family: var(--ex-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
/* Une adresse longue doit se couper plutot que d'elargir la colonne. */
.tunnel .apercu .ligne-contact .valeur { overflow-wrap: anywhere; }

.tunnel .apercu .ligne-contact[data-vide] {
    min-height: 32px;
    border: 1px dashed var(--ex-stone-300);
    border-radius: 8px;
    background: var(--ex-stone-50);
    padding: 5px 10px;
}

/* Titre de l'apercu. Le gabarit pose un h2 : fiche-v7.css ne stylise que le h1
   de .carte-identite, et base-v7.css remet font-size: inherit sur h1, h2 et h3,
   donc le nom de l'association sortait en 14 pixels dans un squelette qui en
   reserve 34. */
.tunnel .apercu .carte-identite [data-bloc="titre"] {
    font-size: 27px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ex-stone-900);
}

/* --- Autocompletion d'adresse -----------------------------------------------
   Le module BAN insere sa liste dans le parent du champ. Il lui faut donc un
   ancrage positionne, et la liste doit reprendre l'allure de celle du registre
   plutot que d'apporter la sienne. */

.tunnel .adresse { position: relative; }
.tunnel .adresse ul {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 260px;
    overflow-y: auto;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    box-shadow: var(--ex-shadow-md);
}
.tunnel .adresse ul li {
    padding: 10px 16px;
    font-size: 13.5px;
    cursor: pointer;
    border-top: 1px solid var(--ex-stone-100);
}
.tunnel .adresse ul li:first-child { border-top: 0; }
.tunnel .adresse ul li:hover,
.tunnel .adresse ul li.active { background: var(--ex-amber-50); }

/* --- Temoin de geolocalisation ------------------------------------------------
   Une adresse pre-remplie par le registre porte un libelle, jamais de
   coordonnees : elle est donc presente et non localisee, et le temoin doit le
   dire plutot que de laisser croire que la carte suivra. */

.tunnel .geoloc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ex-stone-600);
}
.tunnel .geoloc .temoin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ex-stone-300);
}
.tunnel .geoloc[data-etat="active"] { color: var(--ex-green-900); }
.tunnel .geoloc[data-etat="active"] .temoin { background: var(--ex-green-500); }
.tunnel .geoloc[data-etat="inactive"] .temoin { background: var(--ex-amber-400); }
/* Le bouton ne parait que quand il sert, c'est-a-dire sur une adresse presente
   et non localisee. */
.tunnel .geoloc button { margin-left: auto; flex-shrink: 0; }

/* --- Texte publie et ses versions -------------------------------------------
   Le texte assemble depuis la description, les activites et le public. Encadre
   pour se distinguer des trois champs qui l'alimentent : c'est un resultat, pas
   une quatrieme saisie de meme rang. */

.tunnel .texte-publie {
    margin-top: 26px;
    padding: 14px 16px 12px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    background: var(--ex-stone-50);
}
.tunnel .texte-publie textarea { min-height: 130px; }

.tunnel .versions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--ex-mono);
    font-size: 11px;
    color: var(--ex-stone-500);
}
.tunnel .versions button {
    padding: 2px 8px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 6px;
    text-decoration: none;
    color: var(--ex-stone-600);
}
.tunnel .versions button:disabled { opacity: .4; }
.tunnel .versions [data-genre="erreur"] { color: var(--ex-red-900); }

/* --- Carte du siege ----------------------------------------------------------
   Elle n'apparait que si l'adresse a ete choisie dans la liste de la Base
   Adresse Nationale, donc geocodee. */

.tunnel .apercu .carte-geo {
    height: 180px;
    margin-top: 4px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ex-stone-100);
}

/* --- Etat squelette ---------------------------------------------------------
   Un champ vide n'est pas un blanc mais une promesse. Le trait pointille dit ce
   qui reste a remplir, la ou un blanc laisserait croire a une fiche pauvre.

   Les hauteurs sont posees en dur par bloc plutot que calculees : la colonne ne
   doit pas sauter quand le premier caractere arrive. */

.tunnel [data-vide] {
    border: 1px dashed var(--ex-stone-300);
    border-radius: 8px;
    background: var(--ex-stone-50);
    color: transparent;
    user-select: none;
}
.tunnel [data-bloc="titre"][data-vide] { min-height: 34px; }
.tunnel [data-bloc="description"][data-vide] { min-height: 68px; }
.tunnel [data-bloc="siege"][data-vide] { min-height: 22px; }
.tunnel [data-bloc="contact"][data-vide],
.tunnel [data-bloc="identifiants"][data-vide] {
    border: 0;
    background: none;
    min-height: 34px;
}
/* Dans le contact et les identifiants, c'est chaque entree qui porte son
   squelette : la maquette montre deux cadres cote a cote, pas un bloc. */
.tunnel [data-bloc] .copie[data-vide] {
    min-width: 140px;
    min-height: 32px;
    border: 1px dashed var(--ex-stone-300);
    border-radius: 8px;
    background: var(--ex-stone-50);
}
.tunnel [data-bloc] .copie[data-vide] .valeur { color: transparent; }

/* La description qu'on vient d'ecrire est surlignee, pour relier la frappe a
   gauche a son effet a droite. C'est tout l'argument du parcours. */
.tunnel [data-bloc="description"][data-neuf]:not([data-vide]) {
    padding: 12px 14px;
    background: var(--ex-amber-50);
    border: 1px solid var(--ex-amber-200);
    border-radius: 10px;
    transition: background .4s var(--ex-ease);
}

/* --- Rail d'etapes -----------------------------------------------------------
   Cinq reperes en ligne. Le premier jet les collait bord a bord, filets
   jointifs et libelles qui passaient a la ligne : on lisait un bandeau, pas un
   parcours. Trois corrections, une gouttiere franche, un numero qui donne le
   rythme, et un filet qui ne court que sous son propre repere.

   Les trois etats se distinguent par la couleur du filet et l'encre du texte,
   jamais par la seule graisse : un ecart de graisse ne se voit pas a cette
   taille. */

.tunnel [data-rail] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px;
    margin-bottom: 30px;
}

.tunnel [data-rail] button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
    width: 100%;
    padding: 9px 0 0;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-top: 2px solid var(--ex-stone-200);
    cursor: pointer;
    transition: border-color .15s var(--ex-ease), color .15s var(--ex-ease);
}
.tunnel [data-rail] button:disabled { cursor: default; }

.tunnel [data-rail] .rang {
    font-family: var(--ex-mono);
    font-size: 10.5px;
    color: var(--ex-stone-400);
}
.tunnel [data-rail] .nom {
    font-size: 12px;
    font-weight: 500;
    color: var(--ex-stone-400);
    /* Les libelles sont courts pour tenir sur une ligne, mais une largeur
       d'ecran etroite les couperait quand meme : mieux vaut tronquer que
       desaligner les cinq filets. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tunnel [data-rail] .done button { border-top-color: var(--ex-amber-300); }
.tunnel [data-rail] .done .rang,
.tunnel [data-rail] .done .nom { color: var(--ex-stone-600); }

.tunnel [data-rail] .active button { border-top-color: var(--ex-amber-400); }
.tunnel [data-rail] .active .rang { color: var(--ex-amber-700); }
.tunnel [data-rail] .active .nom { color: var(--ex-stone-900); font-weight: 700; }

/* --- Bascule mobile ---------------------------------------------------------
   Sous 900px les deux colonnes ne tiennent pas cote a cote. Le parcours devient
   un pas a pas avec un bouton de visualisation, comme prevu dans la maquette.
   Ce n'est pas une autre vue : c'est le meme JS, un attribut sur la racine, et
   tout le reste se joue ici. */

.tunnel [data-action="voir-apercu"] { display: none; }

@media (max-width: 900px) {
    .tunnel {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    .tunnel .saisie {
        padding: 22px 18px 32px;
        border-right: 0;
    }
    .tunnel .apercu {
        position: static;
        padding: 22px 18px 32px;
        border-top: 1px solid var(--ex-stone-200);
    }

    /* Une seule colonne visible a la fois, pilotee par data-vue. */
    .tunnel[data-vue="formulaire"] .apercu { display: none; }
    .tunnel[data-vue="apercu"] .saisie { display: none; }

    .tunnel [data-action="voir-apercu"] {
        display: block;
        position: sticky;
        bottom: 0;
        width: 100%;
        padding: 14px;
        font: inherit;
        font-size: 14px;
        font-weight: 700;
        color: var(--ex-stone-900);
        background: var(--ex-amber-100);
        border: 0;
        border-top: 1px solid var(--ex-amber-300);
        cursor: pointer;
    }

    .tunnel [data-etape] h1 { font-size: 22px; }
    .tunnel [data-rail] button { font-size: 0; padding-bottom: 6px; }
}

/* --- Publication aboutie ---------------------------------------------------
   La racine porte data-publication depuis la vue. Une fois la fiche publiee, il
   n'y a plus rien a saisir : le rail et les champs de la derniere etape ne sont
   que du bruit, et laisser un formulaire vif invite a recliquer. On efface le
   parcours et on ne garde que le compte rendu, que l'on remonte au rang de
   message principal plutot que de mention grise sous les boutons. */
.tunnel[data-publication="aboutie"] [data-rail],
.tunnel[data-publication="aboutie"] [data-etape="publication"] .champ,
.tunnel[data-publication="aboutie"] [data-etape="publication"] .actions,
.tunnel[data-publication="aboutie"] [data-etape="publication"] .compteur,
.tunnel[data-publication="aboutie"] [data-etape="publication"] .chapeau {
    display: none;
}

.tunnel[data-publication="aboutie"] [data-publication-etat] {
    display: block;
    margin-top: 1.2em;
    padding: 18px 20px;
    border: 1px solid var(--ex-green-200, var(--ex-stone-300));
    border-radius: 12px;
    background: var(--ex-surface);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ex-stone-900);
}

.tunnel[data-publication="aboutie"] [data-publication-etat] a {
    font-weight: 700;
}