/* ──────────────────────────────────────────────────────────────
   « Me prévenir » — le composant partagé                2.4.231

   Il se pose dans des contextes très différents : le tunnel, la
   fenêtre du planning (qui vit sur <body>), une carte, le bandeau
   des prochaines dates, la location. Trois règles en découlent :

   1. 🔴 TOUT var(--rsk-att-*) porte une valeur de repli. Dans une
      fenêtre posée sur <body>, aucun token du widget n'arrive : un
      token sans repli rendrait le bouton transparent -- texte blanc
      sur fond blanc, parcours mort, aucune erreur (piège n°6 des
      modales, payé deux fois).
   2. 🔴 Le composant hérite de la couleur d'accent du bloc qui
      l'accueille : chaque widget n'a qu'à poser --rsk-att-accent
      sur son conteneur. Pas de second réglage de couleur.
   3. box-sizing sur le champ, et jamais de largeur fixe sur le
      bouton : le thème ne doit rien pouvoir casser.
   ────────────────────────────────────────────────────────────── */

.rsk-att {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
}

.rsk-att-titre {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rsk-att-ink, #0F172A);
}

.rsk-att-texte {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rsk-att-muted, #64748B);
}

.rsk-att-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.rsk-att-mail {
  box-sizing: border-box;
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--rsk-att-line, #E2E8F0);
  border-radius: var(--rsk-att-r, 10px);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  color: var(--rsk-att-ink, #0F172A);
  /* Les thèmes posent parfois une hauteur fixe aux champs : on la neutralise. */
  height: auto;
  min-height: 44px;
  /* 🔴 Et une LARGEUR : `input { width: 100% }` est courant. C'est
     flex-basis qui doit décider, pas le thème. */
  width: auto;
}

.rsk-att-mail:focus,
.rsk-att-mail:focus-visible {
  outline: 2px solid var(--rsk-att-accent, #4F46E5);
  outline-offset: 1px;
  border-color: transparent;
}

/* `flex: 0 0 auto` et pas de largeur fixe : le libellé est du texte, une
   largeur en pixels finit toujours par le tronquer. */
.rsk-att-btn {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  min-height: 44px;
  padding: 11px 20px;
  background: var(--rsk-att-accent, #4F46E5);
  border: 0;
  border-radius: var(--rsk-att-r, 10px);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rsk-att-on-accent, #fff);
  cursor: pointer;
  /* 🔴 Mesuré sur banc d'essai (2.4.231) : `button { width: 100% }`, règle
     de thème très courante, forçait le bouton à pleine largeur -- il passait
     SOUS le champ même dans un bloc de 640 px. La largeur se fixe ici ; seul
     le palier « bloc étroit » plus bas la remet à 100 %. */
  width: auto;
  /* Certains thèmes mettent les boutons en majuscules. */
  text-transform: none;
  letter-spacing: normal;
  transition: filter .15s ease, opacity .15s ease;
}

.rsk-att-btn:hover { filter: brightness(.92); }

.rsk-att-btn:focus-visible {
  outline: 2px solid var(--rsk-att-accent, #4F46E5);
  outline-offset: 2px;
}

.rsk-att-btn:disabled { opacity: .6; cursor: default; filter: none; }

.rsk-att-etat {
  margin: 0;
  min-height: 1em;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rsk-att-muted, #64748B);
}

.rsk-att-etat:empty { display: none; }

.rsk-att-etat.est-ok {
  color: #15803D;
  font-weight: 600;
}

.rsk-att-etat.est-err { color: #DC2626; }

.rsk-att-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rsk-att-faint, #94A3B8);
}

/* Bloc étroit (carte, colonne) : le bouton passe sous le champ plutôt que
   de le comprimer. Requête de CONTENEUR et pas d'écran : un widget vit dans
   une colonne qui peut faire 300 px sur un écran de 1920. Le conteneur est
   posé sur le PARENT de .rsk-att, pour que la règle puisse viser .rsk-att
   lui-même (une requête de conteneur ne style pas le conteneur). */
.rsk-att-zone { container-type: inline-size; }

@container (max-width: 360px) {
  .rsk-att-mail { flex: 1 1 100%; }
  .rsk-att-btn { width: 100%; }
}

/* ── La petite fenêtre (RskAttente.ouvrir) ─────────────────────────
   Pour les blocs trop étroits pour accueillir le formulaire sur place.
   Elle vit sur <body> : couleurs et rayons ont tous un repli. */
.rsk-att-voile {
  position: fixed;
  inset: 0;
  z-index: 100060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .55);
  box-sizing: border-box;
}

.rsk-att-boite {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  background: #fff;
  border-radius: var(--rsk-att-r, 14px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  font-family: inherit;
}

.rsk-att-fermer {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: var(--rsk-att-muted, #64748B);
  cursor: pointer;
}

.rsk-att-fermer:hover { background: #F1F5F9; }

.rsk-att-fermer:focus-visible {
  outline: 2px solid var(--rsk-att-accent, #4F46E5);
  outline-offset: 2px;
}

/* La croix ne doit pas chevaucher le titre. */
.rsk-att-boite .rsk-att-titre { padding-right: 34px; }