/* =========================================================================
   MDF2026 · V69.1.0 — FEUILLE DE STYLE DU PARCOURS D'ADHÉSION
   =========================================================================
   Mobile-first : la mise en page de base cible un écran de téléphone,
   les colonnes n'apparaissent qu'à partir de 720 px.
   Aucune dépendance externe (pas de framework, pas de police distante).
   Les classes `.button`, `.muted`, `.page-hero`, `.eyebrow` viennent des
   feuilles du site (style.css / inner.css / cms.css) : on ne les redéfinit
   pas ici, on se contente d'adapter le module.
   ========================================================================= */

/* ── Piège anti-robot : masqué visuellement, jamais par display:none
      seul (un robot pourrait le détecter) : hors écran + non éditable. ── */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.adhesion-page { padding-bottom: 56px; }

.adhesion-hero { padding: 46px 0 38px; }
.adhesion-hero h1 { max-width: 780px; }

.adhesion-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}
.adhesion-hero-actions .button { flex: 0 1 auto; }

.adhesion-module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}

.adhesion-container {
  width: min(960px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

/* ── Barre d'étapes ─────────────────────────────────────────────────── */
.adhesion-steps {
  display: flex;
  gap: 6px;
  margin: 26px 0 4px;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.adhesion-step { flex: 1 1 0; min-width: 62px; }
.adhesion-step > a,
.adhesion-step > span {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-top: 3px solid #dfe7e7;
  color: #7b8f99;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.adhesion-step-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef3f3;
  color: #6d8490;
  font-size: 12px;
  font-weight: 800;
}
.adhesion-step.is-done > a { border-top-color: #73bd45; color: #3d6b28; }
.adhesion-step.is-done .adhesion-step-num { background: #eaf6e6; color: #3d6b28; }
.adhesion-step.is-current > span { border-top-color: #123f6d; color: #123f6d; font-weight: 700; }
.adhesion-step.is-current .adhesion-step-num { background: #123f6d; color: #fff; }

/* ── Référence + statut ─────────────────────────────────────────────── */
.adhesion-ref {
  margin: 4px 0 0;
  padding: 9px 13px;
  background: #f2f7f5;
  border-left: 4px solid #73bd45;
  font-size: 14px;
  color: #2c4b3d;
}

/* ── Messages ───────────────────────────────────────────────────────── */
.adhesion-alert {
  margin: 0;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.55;
}
.adhesion-alert--ok { background: #eaf6e6; border-left: 4px solid #73bd45; color: #27623b; }
.adhesion-alert--error { background: #fff0ed; border-left: 4px solid #dc4a3b; color: #9c3128; }

/* ── Formulaires ────────────────────────────────────────────────────── */
.adhesion-form { display: grid; gap: 18px; }

.adhesion-form fieldset {
  margin: 0;
  padding: 18px 16px 20px;
  border: 1px solid #e2e9e9;
  background: #fff;
  display: grid;
  gap: 14px;
}
.adhesion-form legend {
  padding: 0 8px;
  color: #123f6d;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.adhesion-field { display: grid; gap: 5px; color: #466271; font-size: 13px; font-weight: 700; }
.adhesion-field > span abbr { color: #dc4a3b; text-decoration: none; }
.adhesion-field input,
.adhesion-field select,
.adhesion-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 11px;
  border: 1px solid #cbd8da;
  background: #f8faf9;
  color: #173f6a;
  font: inherit;
  font-size: 16px; /* évite le zoom iOS au focus */
  font-weight: 400;
}
.adhesion-field input:focus,
.adhesion-field select:focus,
.adhesion-field textarea:focus {
  outline: 2px solid #73bd45;
  outline-offset: 1px;
  background: #fff;
}
.adhesion-field input[readonly] { background: #f1f4f4; color: #6b7f8a; }
.adhesion-field small { color: #70848e; font-size: 12px; font-weight: 400; line-height: 1.5; }
.adhesion-field small em { color: #568e39; font-style: normal; font-weight: 700; }

.adhesion-choice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 13px;
  border: 1px solid #e2e9e9;
  background: #fff;
  cursor: pointer;
}
.adhesion-choice input { margin-top: 3px; flex: none; accent-color: #73bd45; }
.adhesion-choice span { display: grid; gap: 3px; color: #2f4d61; font-size: 14px; }
.adhesion-choice span small { color: #70848e; font-size: 12.5px; line-height: 1.5; }

.adhesion-grid-2 { display: grid; gap: 14px; }

/* ── Recherche d'entreprise (confort, facultative) ──────────────────── */
.adhesion-search {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f6faf7;
  border: 1px dashed #b9d3bd;
}
.adhesion-search-tools { display: grid; gap: 10px; }
.adhesion-search .button { justify-self: start; }
.adhesion-search-results { display: grid; gap: 8px; }
.adhesion-search-item {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #dce6e6;
  background: #fff;
  text-align: left;
}
.adhesion-search-item strong { color: #123f6d; font-size: 14px; }
.adhesion-search-item span { color: #5d7481; font-size: 12.5px; line-height: 1.45; }
.adhesion-search-item em { color: #9c3128; font-size: 12px; font-style: normal; font-weight: 700; }
.adhesion-search-item:hover { border-color: #73bd45; }

/* ── Choix de la formule ────────────────────────────────────────────── */
/* V69.2.1 — deux VRAIES cartes (STANDARD | PREMIUM) côte à côte sur
   écran large, l'une sous l'autre en mobile. La carte entière est
   cliquable : le label entoure le radio, qui reste présent et utilisable
   au clavier. La description HTML vit À L'INTÉRIEUR de sa carte. */
.adhesion-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
.adhesion-plan {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 15px;
  border: 2px solid #e2e9e9;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.adhesion-plan input {
  margin-top: 5px;
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: #73bd45;
}
.adhesion-plan-card {
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.adhesion-plan-title {
  color: #123f6d;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
}
.adhesion-plan-price {
  color: #18334c;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.adhesion-plan-gaz-note { color: #70848e; font-size: 12.5px; line-height: 1.5; }
.adhesion-plan.is-selected {
  border-color: #73bd45;
  background: #f4fbf2;
  box-shadow: 0 0 0 1px #73bd45 inset;
}
.adhesion-plan input:checked + .adhesion-plan-card .adhesion-plan-title::after {
  content: ' ✓';
  color: #73bd45;
}
.adhesion-plan:has(input:focus-visible) { outline: 2px solid #73bd45; outline-offset: 2px; }

/* ── Cartes / récapitulatif ─────────────────────────────────────────── */
.adhesion-card {
  padding: 20px 18px;
  background: #fff;
  border: 1px solid #e2e9e9;
  box-shadow: 0 12px 26px #16364b0d;
  display: grid;
  gap: 12px;
}
.adhesion-card h2 {
  margin: 0;
  color: #123f6d;
  font-size: 20px;
  letter-spacing: -.03em;
}
.adhesion-card dl { margin: 0; display: grid; gap: 0; }
.adhesion-card p { margin: 0; color: #536d7b; font-size: 14.5px; line-height: 1.6; }

.adhesion-recap { display: grid; gap: 16px; }

.adhesion-recap-row {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid #eef2f2;
}
.adhesion-recap-row dt { color: #70848e; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.adhesion-recap-row dd { margin: 0; color: #18334c; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }

.adhesion-card--total { border-left: 5px solid #73bd45; background: #fbfdfb; }
.adhesion-total { color: #123f6d !important; font-size: 17px !important; }
.adhesion-total strong { font-size: 25px; letter-spacing: -.03em; }

.adhesion-conditions-excerpt,
.adhesion-conditions-body {
  max-height: 340px;
  overflow-y: auto;
  padding: 14px;
  background: #f7f9f9;
  border: 1px solid #e2e9e9;
  color: #40586a;
  font-size: 14px;
  line-height: 1.65;
}
.adhesion-conditions-body { max-height: none; overflow: visible; background: #fff; }
.adhesion-conditions-body p { margin: 0 0 12px; }

/* ── Lien de reprise ────────────────────────────────────────────────── */
.adhesion-resume { border-left: 5px solid #123f6d; }
.adhesion-resume-link input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px;
  border: 1px solid #cbd8da;
  background: #f8faf9;
  color: #173f6a;
  font-size: 13px;
  word-break: break-all;
}

/* ── Actions de fin d'étape ─────────────────────────────────────────── */
.adhesion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.adhesion-actions .button { flex: 1 1 auto; min-width: 160px; }

.adhesion-pay-btn { width: 100%; min-height: 54px; font-size: 16px; }

.adhesion-file-current {
  padding: 10px 12px;
  background: #f2f7f5;
  border-left: 4px solid #73bd45;
  font-size: 13.5px;
  color: #2c4b3d;
}

/* ── Fin de parcours (confirmation) ─────────────────────────────────── */
.adhesion-confirmation-steps { display: grid; gap: 10px; }

/* ── Grands écrans ──────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .adhesion-hero { padding: 62px 0 50px; }
  .adhesion-container { width: min(960px, calc(100% - 40px)); gap: 24px; }

  .adhesion-step > a,
  .adhesion-step > span { font-size: 11px; padding: 10px 6px; }

  .adhesion-grid-2 { grid-template-columns: 1fr 1fr; }
  .adhesion-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adhesion-recap { grid-template-columns: 1fr 1fr; }
  .adhesion-card { padding: 24px 24px; }
  .adhesion-actions .button { flex: 0 0 auto; min-width: 0; }
  .adhesion-search-tools { grid-template-columns: 1fr auto; align-items: end; }
  .adhesion-search-tools .adhesion-field,
  .adhesion-search [data-search-status],
  .adhesion-search .adhesion-search-results,
  .adhesion-search .adhesion-search-summary { grid-column: 1 / -1; }
  .adhesion-search-tools .button { justify-self: end; }
}

@media (min-width: 980px) {
  .adhesion-recap { grid-template-columns: 1fr 1fr; }
}

/* ==================================================================== */
/* V69.2.0 — FINALISATION ADHÉSION                                      */
/* ==================================================================== */

/* Fiche dossier BO : grille 2 colonnes sur grand écran uniquement      */
/* (Identité / Entreprise / Informations générales), 1 colonne mobile.  */
.adhesion-fiche-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.adhesion-fiche-grid > .adhesion-card { margin: 0; }
@media (min-width: 960px) {
  .adhesion-fiche-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Détails techniques (JSON tarifaire) : repliés par défaut.            */
.adhesion-tech-details {
  margin-top: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
  padding: 8px 12px;
}
.adhesion-tech-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
}
.adhesion-tech-json {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
  background: rgba(15, 23, 42, .04);
  border-radius: 6px;
  padding: 10px;
  margin: 8px 0 0;
}

/* Description HTML d'une formule (STANDARD / PREMIUM).                 */
.adhesion-plan-desc {
  font-size: .95rem;
  line-height: 1.55;
  padding: 12px 2px 2px;
  border-top: 1px solid #e9f0f0;
  margin-top: 14px;
}
.adhesion-plan-desc p { margin: 0 0 .55em; }
.adhesion-plan-desc ul,
.adhesion-plan-desc ol { margin: 0 0 .55em; padding-left: 1.2em; }
.adhesion-plan-desc li { margin-bottom: .2em; }
.adhesion-plan-desc a { font-weight: 600; }

/* Option Utilisateur Gaz (logo partenaire de la médiathèque).          */
.adhesion-gaz-choice span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adhesion-gaz-logo {
  max-height: 44px;
  width: auto;
  border-radius: 4px;
  display: inline-block;
}

/* ==================================================================== */
/* V69.2.1 — REPRISE NAVIGATEUR, RECHERCHE ENTREPRISE, RÉCAP, LOGO BO     */
/* ==================================================================== */

/* Bandeau « demande en cours » (page Adhérer + confirmation nouvelle    */
/* demande). Aucune donnée personnelle ; le jeton reste côté serveur.    */
.adhesion-resume-banner {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid #bcd8c4;
  border-left: 5px solid #73bd45;
  border-radius: 10px;
  background: #f4fbf2;
}
.adhesion-resume-banner--confirm {
  margin: 18px 0 24px;
  border-color: #e0b98a;
  border-left-color: #d98a2b;
  background: #fdf7ef;
}
.adhesion-resume-banner-title {
  margin: 0 0 6px;
  color: #123f6d;
  font-size: 16px;
  font-weight: 800;
}
.adhesion-resume-banner-meta {
  margin: 0 0 8px;
  color: #40586a;
  font-size: 13.5px;
}
.adhesion-resume-banner-meta strong { color: #123f6d; }
.adhesion-resume-banner .adhesion-actions { margin: 10px 0 0; }
.adhesion-forget-link {
  color: #70848e;
  font-size: 12.5px;
  text-decoration: underline;
}
.adhesion-forget-link:hover { color: #9c3128; }

/* Recherche d'entreprise : résumé replié après sélection.              */
.adhesion-search-summary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #bcd8c4;
  background: #f4fbf2;
  font-size: 13.5px;
}
.adhesion-search-summary-label { margin: 0; color: #123f6d; }
.adhesion-search-summary-label span { color: #568e39; font-weight: 800; }
.adhesion-search-summary [data-summary-meta] { margin: 0; }
.adhesion-search-summary p:last-child { margin: 6px 0 0; }
.adhesion-search [hidden] { display: none !important; }

/* Récapitulatif : « Modifier » en tête de chaque bloc.                 */
.adhesion-recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.adhesion-recap-head h2 { margin: 0; }
.adhesion-recap-edit {
  padding: 6px 12px;
  font-size: 13px;
  flex: none;
}

/* Logo d'option — aperçu du back-office (V69.4.0 : aperçu plus grand,
   objet contenu dans la zone, aucune image cassée).                */
.admin-logo-wrap { display: grid; gap: 6px; margin: 6px 0; }
.admin-logo-preview {
  max-height: 84px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  padding: 6px;
  border: 1px dashed #b9d3bd;
  background: #fff;
}

/* ==================================================================== */
/* V69.2.2 — FINALISATION                                                */
/* ==================================================================== */

/* Champ « Numéro d'adhérent » (étape 1) : masqué pour une nouvelle
   adhésion, affiché pour un renouvellement / une réadhésion.           */
.adhesion-member-number.is-hidden { display: none; }
.adhesion-member-number { margin-top: 14px; }

/* Période d'adhésion déterminée par le syndicat (affichage système).   */
.adhesion-campaign-info {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #bcd8c4;
  background: #f4fbf2;
  font-size: 14px;
}
.adhesion-campaign-info strong { color: #123f6d; }
.adhesion-campaign-info small { color: #70848e; font-size: 12.5px; margin: 0; }

/* Information « Utilisateur Gaz » en lecture seule (étape Formule).    */
.adhesion-gaz-info {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #bcd8c4;
  background: #f4fbf2;
  font-size: 14px;
  color: #123f6d;
}
.adhesion-gaz-info-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adhesion-gaz-info small { color: #70848e; font-size: 12.5px; margin: 0; }
.adhesion-gaz-info small strong { color: #123f6d; }

/* Avertissement back-office : logo référencé mais fichier introuvable. */
.admin-warning {
  display: block;
  padding: 8px 10px;
  border: 1px solid #e6c37a;
  background: #fff7e6;
  color: #8a5a00;
  font-size: 13px;
}

/* ==================================================================== */
/* V69.3.0 � OPTIONS D'ADHESION PAR CAMPAGNE (choix cumulables)          */
/* ==================================================================== */
.adhesion-option-choice span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* V69.4.0 — ZONE LOGO propre : ligne dédiée au-dessus du libellé, hauteur
   bornée, ratio conservé, aucun chevauchement avec le texte. Le logo ne
   s'affiche que s'il est réellement présent (sinon : rien).            */
.adhesion-option-logo-zone {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 50px;
  padding: 4px 0 2px;
}
.adhesion-option-logo {
  width: auto;
  height: auto;
  max-width: 170px;
  max-height: 46px;
  object-fit: contain;
  border: 1px solid #e3e9ef;
  border-radius: 4px;
  padding: 3px;
  background: #fff;
}
/* V69.4.0 — BADGE « Première adhésion uniquement » : petite pastille
   visuelle qui remplace l'ancien texte automatique redondant. La
   description libre reste indépendante du badge.                      */
.adhesion-option-choice span .adhesion-option-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid #b9d4ec;
  border-radius: 999px;
  background: #eaf3fb;
  color: #123f6d;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}
.adhesion-option-choice span .adhesion-option-badge::before { content: "★ "; }
.adhesion-options-summary {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #f7fafd;
}
.adhesion-options-summary-title { margin: 0 0 6px; font-weight: 700; color: #123f6d; }
.adhesion-options-summary ul { margin: 0; padding-left: 18px; }
.adhesion-options-summary li { margin: 4px 0; font-size: 14px; line-height: 1.5; }
.adhesion-recap-section {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e3e9ef;
  font-weight: 700;
  color: #123f6d;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 12px;
}
.adhesion-recap-section:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* V70.6.0 — ergonomie Back-office « Tarifs et options d'adhésion »
   (actions groupées à droite, listes de campagne/conditions défilantes,
   texte des conditions repliable). Aucun second design : mêmes jetons. */
.admin-module-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 1rem; padding: .6rem .7rem; background: #f4f8f6; border: 1px solid #e2e9e9; border-radius: 8px; }
.admin-module-actions form { margin: 0; }
.admin-rail-scroll { max-height: 220px; }
.adhesion-legal-text { max-height: 420px; overflow: auto; padding: 12px 14px; background: #fbfdfc; border: 1px solid #e2e9e9; border-radius: 8px; font-size: 14px; line-height: 1.6; }
@media (max-width: 820px) { .admin-module-actions { position: sticky; top: 0; z-index: 3; } }