/*
 * Alerte territoriale — feuille de style.
 *
 * PORTÉE STRICTE : tout est sous `.pf-alerte`, elle-même rendue uniquement dans
 * le groupe de clôture de la page Praticiens. Aucune règle ne peut atteindre
 * une autre page, ni un autre composant.
 *
 * JETONS DU THÈME, AVEC REPLI. La feuille réutilise les variables du thème
 * enfant et n'en redéfinit aucune. Chaque `var()` porte une valeur de repli :
 * si le thème changeait, la section perdrait sa teinte sans cesser d'être
 * lisible ni utilisable. Un formulaire mal stylé reste utilisable ; un
 * formulaire absent ne l'est pas.
 *
 * AUCUNE RÈGLE DE FOCUS N'EST ÉCRITE ICI. Le thème pose déjà, globalement,
 * `outline: 3px solid var(--pf-accent)` avec un décalage de 2 px sur `a`,
 * `button`, `input`, `select`, `textarea` et `[tabindex]`. La redéfinir
 * risquerait de l'affaiblir sans rien gagner.
 *
 * AUCUNE RESSOURCE EXTERNE : pas de police distante, pas d'image, pas d'@import.
 */

.pf-alerte {
  margin-block: var(--pf-espace-l, 2.5rem) 0;
  padding-block-start: var(--pf-espace-m, 1.75rem);
  border-block-start: 1px solid var(--pf-filet, #e0dbd2);
  max-width: 46rem;
}

/* AP-06 — `h2` unique de la page.
   Son poids visuel est délibérément CONTENU : il suit trois bandes de
   territoire qui, elles, n'ont pas de titre. Un `h2` à la taille éditoriale
   habituelle pèserait plus lourd que l'annuaire qu'il suit. La hiérarchie
   sémantique reste exacte ; c'est la graisse et l'échelle qui sont réglées. */
.pf-alerte__titre {
  margin: 0 0 var(--pf-espace-xs, 0.75rem);
  font-family: var(--pf-fonte-editoriale, Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pf-encre, #1d1a17);
}

.pf-alerte__intro,
.pf-alerte__annonce,
.pf-alerte__deja-suite {
  max-width: 54ch;
  margin: 0 0 var(--pf-espace-s, 1rem);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--pf-encre-2, #4a443c);
}

.pf-alerte__notice,
.pf-alerte__lien-politique {
  max-width: 60ch;
  margin: var(--pf-espace-xs, 0.75rem) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--pf-encre-2, #4a443c);
}

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

.pf-alerte__champ {
  margin-block-end: var(--pf-espace-s, 1rem);
}

/* LABELS VISIBLES, jamais un simple `placeholder` : un placeholder disparaît
   dès la saisie et n'est pas restitué de façon fiable par les lecteurs
   d'écran. */
.pf-alerte__champ > label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pf-encre, #1d1a17);
}

.pf-alerte__champ input[type="text"],
.pf-alerte__champ input[type="email"] {
  inline-size: 100%;
  max-inline-size: 24rem;
  min-block-size: 44px; /* Cible tactile — standard du site. */
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  color: var(--pf-encre, #1d1a17);
  background-color: var(--pf-fond, #faf9f6);
  border: 1px solid var(--pf-filet, #e0dbd2);
  border-radius: var(--pf-rayon-s, 3px);
}

.pf-alerte__champ--case > label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.55;
}

.pf-alerte__champ--case input[type="checkbox"] {
  flex: 0 0 auto;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
}

.pf-alerte__aide {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pf-encre-2, #4a443c);
}

.pf-alerte__erreur {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pf-urgence, #9b1b0c);
}

/* --- Bouton --------------------------------------------------------------- */

.pf-alerte__bouton {
  min-block-size: 44px;
  padding: 0.6rem 1.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pf-ivoire, #faf9f6);
  background-color: var(--pf-marque, #2f5d50);
  border: 0;
  border-radius: var(--pf-rayon-s, 3px);
  cursor: pointer;
}

.pf-alerte__bouton:hover {
  background-color: var(--pf-marque-hover, #24483e);
}

/* --- Messages ------------------------------------------------------------- */

.pf-alerte__message {
  margin-block-end: var(--pf-espace-s, 1rem);
  padding: var(--pf-espace-xs, 0.75rem) var(--pf-espace-s, 1rem);
  border-inline-start: 3px solid var(--pf-marque, #2f5d50);
  background-color: var(--pf-papier, #f3efe7);
}

.pf-alerte__message p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pf-alerte__message--erreurs {
  border-inline-start-color: var(--pf-urgence, #9b1b0c);
  background-color: var(--pf-urgence-fond, #fdf4f1);
}

.pf-alerte__erreurs {
  margin: 0.5rem 0 0;
  padding-inline-start: 1.1rem;
  font-size: 0.875rem;
}

/* --- Praticiens déjà référencés ------------------------------------------- */

.pf-alerte__deja {
  margin: 0 0 var(--pf-espace-s, 1rem);
  padding: 0;
  list-style: none;
}

.pf-alerte__deja-item {
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--pf-filet, #e0dbd2);
  font-size: 0.9375rem;
}

.pf-alerte__deja-commune {
  color: var(--pf-encre-2, #4a443c);
}

/* --- Piège à robots ------------------------------------------------------- */

/* Retiré du flux SANS `display:none`, qui est le premier motif que cherchent
   les robots un peu sérieux. La combinaison `aria-hidden` + `tabindex="-1"`
   posée dans le balisage garantit qu'aucune personne, à la souris comme au
   clavier comme au lecteur d'écran, ne peut l'atteindre. */
.pf-alerte__piege {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Petits écrans -------------------------------------------------------- */

@media (max-width: 480px) {
  .pf-alerte {
    margin-block-start: var(--pf-espace-m, 1.75rem);
  }

  .pf-alerte__champ input[type="text"],
  .pf-alerte__champ input[type="email"],
  .pf-alerte__bouton {
    max-inline-size: 100%;
    inline-size: 100%;
  }
}