/* Ardoise — coque commune Support / Abonnements */
:root{--ardoise:#1F2B24;--craie:#F6F2E7;--craie-2:#FBF9F3;--ocre:#C98A3E;--ocre-dark:#A96F2E;--texte-sombre:#1F2B24;--texte-att:#6B7269;--bordure:#E4DFCF;--rouge:#B23A2E;--vert-ok:#4C7A5A}
*{box-sizing:border-box}body{margin:0;font-family:var(--police-corps);color:var(--texte-sombre);background:var(--craie)}
.contenu{padding:36px 44px 64px;max-width:1180px;width:100%}.entete-page{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}.entete-page h1{font-family:var(--police-titre);font-weight:600;font-size:1.9rem;margin:0 0 4px}.entete-page .sous-titre{color:var(--texte-att);font-size:0.95rem;margin:0;line-height:1.55;max-width:720px}.entete-actions{display:flex;gap:8px;flex-wrap:wrap}.carte-section{background:var(--craie-2);border:1px solid var(--bordure);border-radius:var(--r-carte);padding:24px;margin-bottom:20px}.carte-section h2,.carte-section h3{font-family:var(--police-titre);font-weight:600;margin:0 0 14px}.carte-section h2{font-size:1.18rem}.carte-section h3{font-size:1rem}
.bouton{padding:10px 16px;border-radius:var(--r-bouton);font-family:var(--police-corps);font-size:0.88rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.bouton-principal{background:var(--ocre);color:var(--craie-2)}.bouton-principal:hover{background:var(--ocre-dark)}.bouton-secondaire{background:none;border-color:var(--bordure);color:var(--texte-sombre)}.bouton-secondaire:hover{border-color:var(--ardoise)}.bouton-petit{padding:7px 11px;font-size:0.78rem}.bouton:disabled{opacity:.5;cursor:not-allowed}
.champ{margin-bottom:15px}.champ label{display:block;font-size:0.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-att);margin-bottom:6px}.champ input,.champ select,.champ textarea{width:100%;padding:10px 12px;font:inherit;font-size:0.9rem;border:1.5px solid var(--bordure);border-radius:var(--r-bouton);background:var(--craie-2);color:var(--texte-sombre)}.champ textarea{min-height:112px;resize:vertical}.aide{font-size:0.82rem;color:var(--texte-att);line-height:1.5}.muted{color:var(--texte-att)}.code{font-family:var(--police-mono);font-size:.86em}.erreur{color:var(--rouge)}.succes{color:var(--vert-ok)}.cache{display:none!important}.sur-titre{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texte-att);font-weight:700;margin-bottom:4px}
.message-flash{position:fixed;top:18px;right:18px;z-index:99999;max-width:min(420px,calc(100vw - 36px));padding:12px 15px;border-radius:var(--r-bouton);background:var(--ardoise);color:var(--craie-2);box-shadow:var(--ombre-flottante);display:none}.message-flash.visible{display:block}.message-flash.erreur{background:var(--rouge);color:var(--craie-2)}.message-flash.succes{background:var(--vert-ok);color:var(--craie-2)}.message-flash.info{background:var(--ardoise);color:var(--craie-2)}
.resume-ecole{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(2,minmax(140px,.65fr));gap:12px}.resume-case{padding:15px 16px;border:1px solid var(--bordure);border-radius:var(--r-bouton);background:var(--craie)}.resume-case small{display:block;color:var(--texte-att);font-size:0.75rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}.resume-case strong{font-size:0.98rem}.carte-titre-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.carte-titre-ligne h2{margin:0}.etat-compact{padding:5px 10px;border-radius:var(--r-pilule);border:1px solid var(--bordure);font-size:0.75rem;text-transform:capitalize;color:var(--texte-att);background:var(--craie)}
.section-titre{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:30px 0 14px}.section-titre h2{font-family:var(--police-titre);font-size:1.28rem;font-weight:600;margin:0}.section-titre p{margin:4px 0 0;color:var(--texte-att);font-size:0.86rem}
/* Abonnements */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.plan{background:var(--craie-2);border:1px solid var(--bordure);border-radius:var(--r-carte);padding:20px;display:flex;flex-direction:column;min-height:310px;position:relative}.plan.actuel{border-color:var(--ocre);box-shadow:inset 0 0 0 1px var(--ocre)}.plan-badge{display:inline-flex;align-self:flex-start;padding:4px 9px;border-radius:var(--r-pilule);background:color-mix(in srgb,var(--ocre) 14%,transparent);color:var(--ocre-dark);font-size:0.72rem;font-weight:700;margin-bottom:8px}.plan h3{font-family:var(--police-titre);font-size:1.08rem;margin:4px 0 6px}.plan-desc{color:var(--texte-att);font-size:0.84rem;line-height:1.45;min-height:48px}.plan-prix{font-size:1.45rem;font-weight:700;margin:10px 0 13px}.plan-prix small{font-size:0.72rem;font-weight:500;color:var(--texte-att)}.plan ul{margin:0 0 16px;padding-left:18px;font-size:0.83rem;line-height:1.45;flex:1}.plan li{margin:4px 0}.plan .bouton{width:100%}
.etat-demande{border-left:3px solid var(--ocre);background:var(--craie);padding:14px 16px;border-radius:0 var(--r-bouton) var(--r-bouton) 0;margin-top:14px;font-size:0.86rem;line-height:1.5}.etat-demande.succes{border-left-color:var(--vert-ok)}.etat-demande.erreur{border-left-color:var(--rouge)}.etat-demande-ligne{display:flex;justify-content:space-between;gap:14px;align-items:center}.etat-demande-ligne span{color:var(--texte-att);text-align:right}.etat-demande p{margin:6px 0 0;color:var(--texte-att)}.etat-reference,.etat-motif{margin-top:7px;font-size:0.8rem}.etat-motif{color:var(--rouge)}
.tunnel-renouvellement{padding:0;overflow:hidden}.tunnel-etapes{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--bordure);background:color-mix(in srgb,var(--craie) 70%,var(--craie-2))}.tunnel-etape{display:flex;align-items:center;gap:9px;min-width:0;color:var(--texte-att)}.tunnel-etape>span{width:28px;height:28px;border-radius:50%;border:1px solid var(--bordure);display:grid;place-items:center;font-size:0.78rem;font-weight:700;background:var(--craie-2)}.tunnel-etape strong{display:block;font-size:0.8rem}.tunnel-etape small{display:block;font-size:0.72rem;margin-top:1px}.tunnel-etape.actif{color:var(--texte-sombre)}.tunnel-etape.actif>span{background:var(--ocre);border-color:var(--ocre);color:var(--craie-2)}.tunnel-etape.fait>span{background:var(--vert-ok);border-color:var(--vert-ok);color:var(--craie-2,#fff)}.tunnel-trait{height:1px;background:var(--bordure);flex:1;min-width:18px}.recap-renouvellement{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bordure);border-bottom:1px solid var(--bordure)}.recap-renouvellement>div{background:var(--craie-2);padding:14px 20px}.recap-renouvellement small{display:block;color:var(--texte-att);font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}.recap-renouvellement strong{font-size:0.9rem}.bloc-tunnel{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:24px 24px 4px}.bloc-tunnel+.bloc-tunnel{padding-top:16px;padding-bottom:26px}.bloc-numero{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ardoise);color:var(--craie);font-weight:700;font-size:0.82rem}.bloc-contenu h3{margin:3px 0 4px}.bloc-contenu>.aide{margin:0 0 14px}
.periodes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.periode-option{position:relative;border:1px solid var(--bordure);border-radius:var(--r-carte);background:var(--craie-2);color:inherit;padding:14px;text-align:left;cursor:pointer;font:inherit;min-height:86px}.periode-option:hover{border-color:var(--ocre)}.periode-option.actif{border-color:var(--ocre);box-shadow:inset 0 0 0 1px var(--ocre);background:color-mix(in srgb,var(--craie-2) 92%,var(--ocre) 8%)}.periode-option span{display:block;font-size:0.78rem;color:var(--texte-att);margin-bottom:6px}.periode-option strong{font-size:0.96rem}.periode-option small{display:block;margin-top:6px;font-size:0.72rem;color:var(--ocre-dark);font-weight:700}
.renouvellement-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-carte{border:1px solid var(--bordure);border-radius:var(--r-carte);padding:18px;background:var(--craie-2);position:relative}.mode-carte:hover{border-color:color-mix(in srgb,var(--bordure) 50%,var(--ocre))}.mode-carte h3{margin:5px 0 7px}.mode-carte p{font-size:0.84rem;line-height:1.5;color:var(--texte-att);min-height:63px}.mode-carte .bouton{width:100%;margin-top:10px}.mode-icone{width:34px;height:34px;border-radius:var(--r-bouton);display:grid;place-items:center;background:var(--craie);border:1px solid var(--bordure);font-size:1.05rem}.mode-badge{position:absolute;right:14px;top:14px;font-size:0.72rem;font-weight:700;color:var(--ocre-dark);padding:4px 7px;border-radius:var(--r-pilule);background:color-mix(in srgb,var(--ocre) 12%,transparent)}.dispo-point,.indispo-point{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--vert-ok)}.indispo-point{background:var(--rouge)}
.etape-depot{padding:26px}.etape-depot-entete{max-width:720px;margin-bottom:18px}.etape-depot-entete h3{font-size:1.2rem;margin:3px 0 5px}.etape-depot-entete p{margin:0;color:var(--texte-att);font-size:0.86rem;line-height:1.55}.paiement-fiche{border:1px solid var(--bordure);border-radius:var(--r-carte);background:var(--craie);padding:18px;margin-bottom:18px}.paiement-montant{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--bordure)}.paiement-montant small,.paiement-details small{display:block;color:var(--texte-att);font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}.paiement-montant strong{font-size:1.55rem}.paiement-details{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.paiement-details strong{font-size:0.92rem}.mini-etapes{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-etapes li{display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid var(--bordure);border-radius:var(--r-bouton);background:var(--craie-2)}.mini-etapes li>span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ardoise);color:var(--craie);font-size:0.72rem;font-weight:700}.mini-etapes strong{display:block;font-size:0.78rem}.mini-etapes small{display:block;color:var(--texte-att);font-size:0.72rem;line-height:1.4;margin-top:2px}.reference-carte{border-top:1px solid var(--bordure);padding-top:18px}.reference-carte .champ{max-width:620px}.actions-reference{display:flex;gap:8px;flex-wrap:wrap}.confirmation-renouvellement{padding:26px;display:flex;gap:15px;align-items:flex-start;background:color-mix(in srgb,var(--craie-2) 90%,var(--vert-ok) 10%)}.confirmation-icone{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vert-ok);color:#fff;font-weight:800;flex:none}.confirmation-renouvellement h3{font-size:1.12rem;margin:2px 0 4px}.confirmation-renouvellement p{margin:0;color:var(--texte-att);font-size:0.85rem;line-height:1.5}
/* Support */
.support-connectivite{margin:0 0 18px;padding:11px 14px;border:1px solid var(--ocre);border-radius:var(--r-bouton);background:color-mix(in srgb,var(--ocre) 12%,var(--craie-2));color:var(--texte-sombre);font-size:.84rem;line-height:1.45}
.support-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.support-action{border:1px solid var(--bordure);border-radius:var(--r-carte);background:var(--craie-2);padding:18px;text-align:left;cursor:pointer;color:inherit}.support-action:hover,.support-action.actif{border-color:var(--ocre);box-shadow:inset 0 0 0 1px var(--ocre)}.support-action strong{display:block;font-size:0.96rem;margin-bottom:4px}.support-action span{color:var(--texte-att);font-size:0.82rem;line-height:1.4}.support-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:16px;align-items:start}.liste-tickets{display:grid;gap:8px}.ticket{width:100%;border:1px solid var(--bordure);border-radius:var(--r-bouton);padding:13px;background:var(--craie);text-align:left;color:inherit;cursor:pointer}.ticket:hover,.ticket.actif{border-color:var(--ocre);background:color-mix(in srgb,var(--craie-2) 88%,var(--ocre) 5%)}.ticket-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.ticket strong{font-size:0.9rem}.ticket-meta{font-size:0.76rem;color:var(--texte-att);margin-top:5px;line-height:1.4}.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:var(--r-pilule);font-size:0.72rem;font-weight:700;background:color-mix(in srgb,var(--ocre) 14%,transparent);white-space:nowrap}.statut-ouvert{color:var(--ocre-dark)}.statut-en_cours{color:var(--texte-sombre);background:color-mix(in srgb,var(--ocre) 22%,var(--craie-2))}.statut-attente_client{color:var(--rouge);background:color-mix(in srgb,var(--rouge) 10%,var(--craie-2))}.statut-resolu,.statut-ferme{color:var(--vert-ok);background:color-mix(in srgb,var(--vert-ok) 12%,var(--craie-2))}.conversation{display:flex;flex-direction:column;min-height:430px}.conversation-entete{padding-bottom:12px;border-bottom:1px solid var(--bordure);margin-bottom:12px}.conversation-titre{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.conversation-titre h3{margin:0 0 4px}.messages{display:flex;flex-direction:column;gap:9px;max-height:460px;overflow:auto;padding:3px 2px 14px;scrollbar-color:var(--bordure) transparent}.msg{max-width:84%;padding:10px 12px;border-radius:var(--r-carte);background:var(--craie);font-size:0.86rem;line-height:1.48;white-space:pre-wrap;overflow-wrap:anywhere}.msg.client{align-self:flex-end;background:color-mix(in srgb,var(--ocre) 14%,var(--craie-2))}.msg.support{align-self:flex-start;border:1px solid var(--bordure);background:var(--craie)}.msg small{display:block;color:var(--texte-att);font-size:0.72rem;margin-top:5px}.vide{padding:26px 12px;text-align:center;color:var(--texte-att);font-size:0.86rem}.support-form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.zone-reponse{padding-top:12px;border-top:1px solid var(--bordure)}.zone-reponse textarea{min-height:92px}.support-ferme{padding:12px 14px;border:1px solid var(--bordure);border-radius:var(--r-bouton);background:var(--craie);color:var(--texte-att);font-size:.83rem;line-height:1.45}.champ-indication{display:flex;justify-content:space-between;gap:12px;margin-top:5px;color:var(--texte-att);font-size:.72rem;line-height:1.35}.champ-indication span:last-child{white-space:nowrap}.etat-erreur-support{display:grid;justify-items:center;gap:8px;color:var(--texte-att)}.etat-erreur-support strong{color:var(--rouge)}.etat-erreur-support span{line-height:1.45}.support-chargement::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--bordure);border-top-color:var(--ocre);border-radius:50%;vertical-align:-2px;animation:support-tourne .7s linear infinite}@keyframes support-tourne{to{transform:rotate(360deg)}}.support-note{padding:12px 14px;border-radius:var(--r-bouton);background:var(--craie);font-size:0.82rem;color:var(--texte-att);line-height:1.45;margin-bottom:16px}.motif:focus-visible,.ticket:focus-visible,.lien-retour:focus-visible{outline:3px solid color-mix(in srgb,var(--ocre) 60%,transparent);outline-offset:2px}
@media(max-width:1040px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.resume-ecole{grid-template-columns:1fr 1fr}.resume-ecole .resume-case:first-child{grid-column:1/-1}}
/* ==========================================================================
   PARCOURS DE RENOUVELLEMENT — divulgation progressive
   --------------------------------------------------------------------------
   Ces composants remplacent l'ancien « tunnel » qui affichait toutes les
   étapes d'un coup. Tout est exprimé en tokens de thème : aucune couleur n'est
   fixée ici, sans quoi le mode Nuit peindrait du texte sombre sur fond sombre.
   ========================================================================== */

/* Fil d'étapes — compact, il indique où l'on en est sans occuper l'écran. */
.tunnel-fil{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.fil-etape{display:inline-flex;align-items:center;gap:7px;font-size:0.8rem;color:var(--texte-att)}
.fil-etape b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--craie-2);border:1px solid var(--bordure);font-size:0.72rem;font-weight:700}
.fil-etape.actif{color:var(--texte-sombre);font-weight:600}
.fil-etape.actif b{background:var(--ocre);border-color:var(--ocre);color:var(--craie-2)}
.fil-etape.fait b{background:var(--vert-ok);border-color:var(--vert-ok);color:var(--craie-2)}
.fil-trait{height:1px;background:var(--bordure);flex:1;min-width:14px}

.etape-bloc{scroll-margin-top:16px}
.etape-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.etape-entete h2{margin:2px 0 4px;font-size:1.18rem}
.etape-entete .aide{margin:0;max-width:640px}
.lien-retour{border:0;background:none;font:inherit;font-size:0.82rem;color:var(--texte-att);
  text-decoration:underline;cursor:pointer;padding:4px 0;flex:none}
.lien-retour:hover{color:var(--ocre-dark)}

/* Récapitulatif des choix — repris à l'identique dans le dépôt, le suivi et
   la fenêtre de confirmation d'agent, pour que l'école lise toujours la même
   chose au même endroit. */
.recap-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--bordure);border:1px solid var(--bordure);border-radius:var(--r-carte);
  overflow:hidden;margin-bottom:16px}
.recap-choix>div{background:var(--craie-2);padding:13px 16px}
.recap-choix small{display:block;color:var(--texte-att);font-size:0.72rem;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px}
.recap-choix strong{font-size:0.92rem}

/* Durée : le total ET l'équivalent mensuel, pour que la différence entre
   « prix affiché » et « montant à payer » ne soit jamais une surprise. */
.periode-option em{display:block;margin-top:5px;font-size:0.72rem;color:var(--texte-att);font-style:normal}
.periode-option .marque-reco{position:absolute;top:10px;right:10px;font-style:normal;font-size:0.72rem;
  font-weight:700;color:var(--ocre-dark);background:color-mix(in srgb,var(--ocre) 14%,transparent);
  padding:3px 7px;border-radius:var(--r-pilule)}
.plan.choisi{border-color:var(--ocre);box-shadow:inset 0 0 0 2px var(--ocre)}

/* Suivi — les jalons remplacent le « statut » technique d'avant. */
.suivi-demande .jalons{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.suivi-demande .jalons li{display:flex;align-items:center;gap:10px;font-size:0.87rem;color:var(--texte-att)}
.suivi-demande .jalons li>span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;
  place-items:center;font-size:0.72rem;font-weight:700;background:var(--craie);
  border:1px solid var(--bordure);color:var(--texte-att)}
.suivi-demande .jalons li.fait{color:var(--texte-sombre)}
.suivi-demande .jalons li.fait>span{background:var(--vert-ok);border-color:var(--vert-ok);color:var(--craie-2)}
.suivi-demande .jalons li.actif{color:var(--texte-sombre);font-weight:600}
.suivi-demande .jalons li.actif>span{background:var(--ocre);border-color:var(--ocre);color:var(--craie-2)}
.etat-actions{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.etat-compact.ton-alerte{border-color:var(--rouge);color:var(--rouge)}
.etat-compact.ton-ok{border-color:var(--vert-ok);color:var(--vert-ok)}

/* Fenêtre de confirmation — même langage visuel que les modales Ardoise. */
.voile{position:fixed;inset:0;background:color-mix(in srgb,var(--ardoise) 55%,transparent);
  display:grid;place-items:center;z-index:10050;padding:18px}
.fenetre{background:var(--craie-2);border:1px solid var(--bordure);border-radius:var(--r-carte);
  padding:24px;max-width:520px;width:100%;box-shadow:var(--ombre-flottante);
  max-height:calc(100dvh - 36px);overflow:auto}
.fenetre h3{font-family:var(--police-titre);font-size:1.12rem;margin:0 0 6px}
.fenetre .aide{margin:0 0 16px}
.fenetre-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Support — entrées de catégorie. */
.support-motifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:6px}
.motif{border:1px solid var(--bordure);border-radius:var(--r-carte);background:var(--craie-2);
  padding:15px;text-align:left;cursor:pointer;color:inherit;font:inherit}
.motif:hover{border-color:var(--ocre)}
.motif.actif{border-color:var(--ocre);box-shadow:inset 0 0 0 1px var(--ocre)}
.motif strong{display:block;font-size:0.92rem;margin-bottom:3px}
.motif span{color:var(--texte-att);font-size:0.79rem;line-height:1.4}

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   La coque (rail, barres haute et basse) est gérée par mobile.css, avec une
   spécificité supérieure. On ne redéclare donc ici QUE la mise en page des
   composants propres à ces deux pages.
   ========================================================================== */
@media(max-width:780px){
  .contenu{padding:22px 16px 78px;max-width:none}
  .entete-page{display:block;margin-bottom:20px}
  .entete-page h1{font-size:1.65rem}
  .entete-actions{margin-top:12px}
  .plans,.renouvellement-grille,.support-layout,.support-actions,.periodes,
  .mini-etapes,.support-motifs{grid-template-columns:1fr}
  .resume-ecole{grid-template-columns:1fr}
  .resume-ecole .resume-case:first-child{grid-column:auto}
  .mode-carte p{min-height:0}
  .conversation{min-height:auto}
  .conversation-titre{display:block}.conversation-titre .badge{margin-top:8px}
  .messages{max-height:52vh}
  .msg{max-width:92%}
  .recap-choix{grid-template-columns:1fr 1fr}
  .paiement-details{grid-template-columns:1fr 1fr}
  .paiement-details>div:last-child{grid-column:1/-1}
  /* Un bouton d'action pleine largeur reste atteignable au pouce et ne sort
     jamais de l'écran, quel que soit l'appareil. */
  .actions-reference .bouton,.etat-actions .bouton,.fenetre-actions .bouton,.support-form-actions .bouton{width:100%}
  .champ-indication{align-items:flex-start}.champ-indication span:first-child{max-width:75%}
  .carte-titre-ligne{display:block}
  .etat-compact{display:inline-flex;margin-top:8px}
  .etape-entete{display:block}
  .lien-retour{margin-top:8px}
  .tunnel-fil{gap:5px}
  .fil-etape{font-size:0.74rem}
  .fil-trait{min-width:8px}
  /* Les plans ne doivent pas devenir des cartes géantes empilées. */
  .plan{min-height:0}
  .plan-desc{min-height:0}
}

/* Écrans très étroits (iPhone SE et assimilés) : on repasse tout en une
   colonne plutôt que d'imposer un défilement horizontal. */
@media(max-width:400px){
  .recap-choix,.paiement-details{grid-template-columns:1fr}
  .paiement-montant strong{font-size:1.3rem}
}