/* ============================================================
   PAGES AUTO-ÉCOLES (portage du 24/09/2026, étape 18)
   Préfixe bd-pro-. S'appuie sur assets/style/socle.css
   (variables --rf-*, classes rf-*) pour creer-ma-fiche, reclamer-ma-fiche
   et demande-ta-ville. Pas de règle pour autoecole.php ici : cette page
   charge ses propres feuilles (accueil.css, autoecole.css), jamais pro.css.
   ============================================================ */

/* == 1. Quatre cartes courtes (creer-ma-fiche) : à côté du texte du haut de page ==
   Reprennent les quatre repères de l'en-tête d'origine (prix, étapes, à
   préparer, déjà référencée) : assez de matière pour que l'en-tête dépasse le
   premier écran, condition posée par pubs.js pour garder la publicité
   Maximum placée juste après (rien n'est ajouté pour la forme, ce sont les
   mêmes informations que l'original, en cartes au lieu d'un paragraphe). */

.bd-pro-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bd-pro-carte {
  display: grid;
  gap: 8px;
  padding: 24px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
}

.bd-pro-carte--sombre {
  background: var(--rf-encre);
  border-color: var(--rf-encre);
  color: var(--rf-blanc);
}

.bd-pro-carte__eyebrow {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-gris-clair);
}

.bd-pro-carte--sombre .bd-pro-carte__eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.bd-pro-carte__gros {
  font-size: var(--rf-t-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rf-encre);
}

.bd-pro-carte__titre {
  margin: 0;
  font-weight: 600;
  color: var(--rf-encre);
}

.bd-pro-carte__texte {
  margin: 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

.bd-pro-carte__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--rf-t-petit);
  font-weight: 600;
}

@media (max-width: 640px) {
  .bd-pro-cartes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == 2. Formulaires (creer-ma-fiche, reclamer-ma-fiche, demande-ta-ville) == */

.bd-pro-form-etroit {
  max-width: 560px;
}

.bd-pro-form {
  display: grid;
  gap: 20px;
  max-width: 420px;
  margin: 32px 0 16px;
}

.bd-pro-champ {
  display: grid;
  gap: 8px;
}

.bd-pro-champ label {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-encre);
}

.bd-pro-optionnel {
  font-weight: 400;
  color: var(--rf-gris-clair);
}

.bd-pro-champ input {
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--rf-ligne);
  border-radius: 16px;
  background: var(--rf-blanc);
  font-family: inherit;
  font-size: 1rem;
  color: var(--rf-encre);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-pro-champ input::placeholder {
  color: var(--rf-neutre);
}

.bd-pro-champ input:focus-visible {
  outline: none;
  border-color: var(--rf-lien);
  box-shadow: 0 0 0 3px var(--rf-accent-doux);
}

.bd-pro-aide {
  margin: 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

.bd-pro-form .rf-btn {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

/* Champ leurre anti-robot : hors écran, jamais display:none (les lecteurs
   d'écran doivent pouvoir constater qu'il existe et rester inertes). */
.bd-pro-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* == 3. Bloc latéral (aside) == */

.bd-pro-aside {
  padding: 32px;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
}

.bd-pro-aside__liste {
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
  color: var(--rf-gris);
}

.bd-pro-aside__liste li {
  position: relative;
  padding-left: 28px;
}

.bd-pro-aside__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  box-shadow: inset 0 0 0 2px var(--rf-lien);
}

.bd-pro-citation {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-size: var(--rf-t-inter);
  font-weight: 600;
  line-height: 1.4;
  color: var(--rf-encre);
}

.bd-pro-citation__auteur {
  margin: 0 0 24px;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

/* == 4. Grille de texte (reclamer-ma-fiche : comprendre + mini-FAQ) == */

.bd-pro-grille-texte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 32px 0 56px;
}

.bd-pro-bloc-texte .rf-texte {
  margin-bottom: 0;
}

/* Un emplacement de publicité dans cette grille occupe une case comme un bloc de texte. */
.bd-pro-grille-texte .bd-pub-marque {
  height: 100%;
}

@media (max-width: 960px) {
  .bd-pro-grille-texte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   5. TUNNEL DE CRÉATION DE FICHE (creer-ma-fiche, 4 étapes + succès),
   portage du 24/09/2026 (étape 18). Mécanique reprise à l'identique de
   l'ancienne assets/style/pages/creer-ma-fiche.css (fondue ici : plus
   aucune page ne charge cette feuille, cf. rapport de l'étape 18), avec
   les tokens --rf-* et la police Inter du socle au lieu d'Instrument
   Serif/Geist Mono. Certaines classes gardent leur nom cb-* d'origine :
   app/public/assets/creer-ma-fiche/creation-form.js les lit ou les
   écrit directement (getElementById, classList, className, innerHTML
   construit en JS) et n'est pas dans le périmètre de cette étape.
   Classes concernées : cb-insee-status, cb-alert/cb-alert--warning,
   cb-permis-card, cb-chip, is-ok, is-checked (jamais renommées).
   ============================================================ */

.bd-pro-progression {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.bd-pro-progression__item {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  transition: background 0.3s ease;
}

.bd-pro-progression__item.is-done { background: var(--rf-accent); }
.bd-pro-progression__item.is-active { background: var(--rf-lien); }

.bd-pro-etape-num {
  font-size: var(--rf-t-petit);
  font-weight: 600;
  color: var(--rf-lien);
  margin: 0 0 8px;
}

.bd-pro-champ-ligne {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}

.bd-pro-erreur {
  font-size: var(--rf-t-petit);
  color: #DC2626;
  margin-top: 6px;
}

/* Alerte (doublon de fiche, erreurs globales, avertissements) : classe
   gardée telle quelle, creation-form.js construit ce même markup en JS
   (setDoublonAlert()) quand le check AJAX trouve une fiche existante. */
.cb-alert {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-left: 4px solid #DC2626;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0;
  color: #7F1D1D;
  font-size: var(--rf-t-petit);
  line-height: 1.5;
}

.cb-alert--warning {
  background: #FFFBEB;
  border-color: #FDE68A;
  border-left-color: #F59E0B;
  color: #78350F;
}

.cb-alert a { color: inherit; font-weight: 600; }
.cb-alert strong { display: block; margin-bottom: 4px; }

.bd-pro-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.bd-pro-btn-fantome {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--rf-ligne);
  background: transparent;
  font-family: inherit;
  color: var(--rf-gris);
  font-weight: 600;
  font-size: var(--rf-t-petit);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bd-pro-btn-fantome:hover {
  background: var(--rf-accent-doux);
  border-color: var(--rf-lien);
}

/* Bouton <button> qui doit se lire comme un lien texte (ex : « Changer de
   SIRET », une vraie soumission de formulaire, pas une navigation). Reprend
   .rf-lien-fleche du socle avec une remise à zéro des styles natifs de
   bouton (bordure, fond, padding, police). */
.bd-pro-btn-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rf-encre);
  text-decoration: none;
  cursor: pointer;
}
.bd-pro-btn-lien::after { content: '\2192'; }
.bd-pro-btn-lien:hover { text-decoration: underline; }

/* Petite carte d'information (fiche trouvée, email/téléphone masqués :
   reclamer-ma-fiche). */
.bd-pro-info-carte {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  margin: 20px 0;
  background: var(--rf-accent-doux);
  border-radius: 14px;
}
.bd-pro-info-carte__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rf-lien);
}
.bd-pro-info-carte__valeur {
  font-size: var(--rf-t-inter);
  font-weight: 600;
  color: var(--rf-encre);
}

.bd-pro-connexion-lien {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rf-ligne);
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
}

.bd-pro-connexion-lien a { color: var(--rf-lien); font-weight: 600; }

/* Statut de vérification INSEE (étape 1) : id posé par la vue, classe
   réécrite en entier par creation-form.js à chaque appel
   (setInseeStatus() fait el.className = 'cb-insee-status' + ...) :
   la classe de base doit donc rester exactement « cb-insee-status ». */
.cb-insee-status {
  font-size: var(--rf-t-petit);
  color: var(--rf-gris-clair);
  margin-top: 6px;
  min-height: 18px;
}
.cb-insee-status.is-loading { color: var(--rf-lien); }
.cb-insee-status.is-ok { color: #16A34A; }
.cb-insee-status.is-error { color: #DC2626; }

/* Jauge de force du mot de passe (étape 3). */
.bd-pro-pwd-jauge {
  height: 5px;
  background: var(--rf-accent-doux);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
}
.bd-pro-pwd-jauge__barre {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.2s ease, background 0.2s ease;
}
.bd-pro-pwd-regles {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: var(--rf-t-petit);
  color: var(--rf-gris);
  display: grid;
  gap: 4px;
}
.bd-pro-pwd-regles li { display: flex; align-items: center; gap: 6px; }
.bd-pro-pwd-regles li.is-ok { color: #16A34A; }
.bd-pro-pwd-regles li.is-ok::before { content: '\2713'; font-weight: 700; }
.bd-pro-pwd-regles li:not(.is-ok)::before { content: '\2022'; color: var(--rf-neutre); }

/* Types de permis (étape 4). */
.bd-pro-permis-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.cb-permis-card {
  display: block;
  position: relative;
  padding: 15px;
  border: 1px solid var(--rf-ligne);
  border-radius: 14px;
  background: var(--rf-blanc);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cb-permis-card:hover { border-color: var(--rf-lien); }
.cb-permis-card input { position: absolute; opacity: 0; pointer-events: none; }
.cb-permis-card__label { font-weight: 700; font-size: var(--rf-t-petit); color: var(--rf-encre); }
.cb-permis-card__code { font-size: 0.6875rem; color: var(--rf-gris-clair); margin-top: 4px; font-weight: 600; }
.cb-permis-card.is-checked {
  border-color: var(--rf-lien);
  background: var(--rf-accent-doux);
  box-shadow: inset 0 0 0 1px var(--rf-lien);
}
.bd-pro-permis-ajout {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.bd-pro-permis-ajout input {
  flex: 1;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--rf-ligne);
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--rf-encre);
}
.bd-pro-permis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
/* Puce de permis ajouté à la main : classe gardée telle quelle,
   creation-form.js fait chip.className = 'cb-chip' à la création. */
.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  color: var(--rf-lien);
  font-size: 0.75rem;
  font-weight: 600;
}
.cb-chip button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

/* Écran de succès (fin du tunnel) et bandeaux de succès (demande-ta-ville). */
.bd-pro-succes {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 40px;
  text-align: center;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: var(--rf-rayon);
}
.bd-pro-succes__icone {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  color: #15803D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bd-pro-succes__icone svg { width: 32px; height: 32px; stroke: #15803D; stroke-width: 2.5; fill: none; }
.bd-pro-succes__notice {
  margin-top: 20px;
  padding: 14px 16px;
  text-align: left;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #F59E0B;
  border-radius: 12px;
  color: #78350F;
  font-size: var(--rf-t-petit);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .bd-pro-champ-ligne { grid-template-columns: 1fr; }
  .bd-pro-actions { flex-wrap: wrap; }
  .bd-pro-succes { padding: 36px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-pro-progression__item,
  .cb-permis-card,
  .bd-pro-pwd-jauge__barre { transition: none; }
}

/* ============================================================
   6. RÉCLAMER MA FICHE ET DEMANDE TA VILLE : autocomplétion de commune
   (Base Adresse Nationale) et bandeau d'alerte. assets/js/demande-ville.js
   n'est pas dans le périmètre de cette étape et construit lui-même le
   HTML des suggestions (innerHTML) avec ces noms de classe ed-ac-* : gardés
   tels quels (avant le 24/09/2026 ils venaient de accueil-v1.css, hors
   périmètre ; page.php etc. et cette page n'en dépendent plus).
   ============================================================ */

.js-demande-autocomplete { position: relative; }

.ed-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  background: var(--rf-blanc);
  border: 1px solid var(--rf-ligne);
  border-radius: 14px;
  box-shadow: 0 18px 42px -28px rgba(11, 18, 32, 0.28);
}
.ed-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rf-ligne);
}
.ed-ac-item:last-child { border-bottom: none; }
.ed-ac-item:hover,
.ed-ac-item.is-active { background: var(--rf-accent-doux); }
.ed-ac-item__main { min-width: 0; }
.ed-ac-item__name { font-weight: 600; color: var(--rf-encre); }
.ed-ac-item__cp { font-size: var(--rf-t-petit); color: var(--rf-gris-clair); }
.ed-ac-item__idf {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rf-accent-doux);
  color: var(--rf-lien);
  font-size: 0.6875rem;
  font-weight: 700;
}
.ed-ac-empty {
  padding: 14px;
  color: var(--rf-gris-clair);
  font-size: var(--rf-t-petit);
}

/* Message d'état sous le bouton d'envoi (demande-ta-ville, réponse AJAX de
   assets/js/demande-ville.js, hors périmètre) : la classe de base est posée
   par la vue, feedback() y ajoute is-ok / is-err / is-info et retire hidden. */
.ed-demand-feedback {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: var(--rf-t-petit);
  line-height: 1.5;
}
.ed-demand-feedback a { color: inherit; font-weight: 600; text-decoration: underline; }
.ed-demand-feedback.is-ok {
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.35);
  color: #15803D;
}
.ed-demand-feedback.is-info {
  background: var(--rf-accent-doux);
  border: 1px solid rgba(3, 105, 161, 0.25);
  color: var(--rf-lien);
}
.ed-demand-feedback.is-err {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #7F1D1D;
}