/* =========================================================================
   CARRIA — A9 (questions fréquentes) et A10 (appel final et formulaire)
   Annexes A9 et A10 (visuel), C2 (jetons), C4 (typographie), C5 (gabarit),
   D1 (responsive), D3 (accessibilité).

   Règle : aucune valeur hexadécimale en dur. Tout vient de tokens.css.
   Le blanc passe par --surface-solid (#FFFFFF), qui est un jeton.
   Seule exception assumée : rgba(255,255,255,.82) du chapô de A10, valeur
   imposée mot pour mot par l'annexe A10.

   Points de rupture : 480 / 768 / 1024 / 1440. Aucun défilement horizontal.
   ========================================================================= */

/* =========================================================================
   A9 — QUESTIONS FRÉQUENTES
   Fond --bg-grad (classe .fond-degrade de base.css). Accordéon natif.
   Largeur max 820 px, centré. Filet --rule-25 entre les lignes.
   ========================================================================= */

.a9-titre {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--sp-xxl);
  text-align: center;
}

.a9-liste {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--rule-25);
}

.a9-item {
  border-bottom: 1px solid var(--rule-25);
}

/* Question : Inter SemiBold 16 px, --ink. Chevron 18 px à droite.
   La mise en flex est portée par un conteneur INTERNE, jamais par <summary>
   lui-même : `display:flex` posé sur <summary> casse l'ouverture sur les
   Safari anciens. Le <summary> reste un bloc. */
.a9-question {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-base) var(--ease);
}

.a9-question-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-base);
  min-height: 44px; /* zone tapable minimale (D1) */
  padding-block: var(--sp-lg);
}

/* Le marqueur natif est remplacé par le chevron Lucide. */
.a9-question::-webkit-details-marker {
  display: none;
}

.a9-question::marker {
  content: "";
}

.a9-question:hover {
  color: var(--accent);
}

.a9-question:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.a9-question-texte {
  flex: 1 1 auto;
}

.a9-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--muted-2);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.a9-item[open] .a9-chevron {
  transform: rotate(180deg);
}

.a9-question:hover .a9-chevron {
  color: var(--accent);
}

/* Réponse : 16 px, --muted. Colonne plafonnée à 68 caractères (C4). */
.a9-reponse {
  max-width: 68ch;
  padding-right: 34px;
  padding-bottom: var(--sp-xl);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

@media (max-width: 480px) {
  .a9-question {
    font-size: 15px;
  }
  .a9-question-interieur {
    padding-block: var(--sp-base);
  }
  .a9-reponse {
    padding-right: 0;
    padding-bottom: var(--sp-lg);
    font-size: 15px;
  }
}

/* =========================================================================
   A10 — APPEL FINAL ET FORMULAIRE
   Bloc pleine largeur en --accent-grad, texte blanc : LE SEUL APLAT VIOLET
   SATURÉ DE LA PAGE. Il doit tomber comme une conclusion (annexe A10, C5).
   ========================================================================= */

.a10 {
  background: var(--accent-grad);
  color: var(--surface-solid);
  /* Le formulaire reste lisible même si le navigateur impose un thème
     sombre (annexe A10). */
  color-scheme: only light;
}

.a10-grille {
  display: grid;
  gap: var(--sp-xxxl);
  align-items: start;
}

@media (min-width: 1024px) {
  .a10-grille {
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 80px;
    align-items: center;
  }
}

.a10-titre {
  color: var(--surface-solid);
}

/* ⚠️ ÉCART ASSUMÉ ET DOCUMENTÉ : 0.82 -> 0.92.
   L'annexe A10 impose `rgba(255,255,255,.82)` pour ce chapô. Mesuré sur le
   fond réel (le dégradé --accent-grad de C2, soit rgb(108,77,245) sous ce
   paragraphe), ce blanc donne 4,06:1 à 18 px en graisse 400. Le seuil AA
   pour du texte normal est 4,5:1 : la valeur imposée échoue.

   Le cahier des charges se contredit sur ce point, et il tranche lui-même :
   l'annexe C5 range « les règles de D3 » parmi ce qui est obligatoire et
   sans latitude, et D3 fixe la cible WCAG 2.1 AA ; l'opacité de ce chapô
   ne figure dans aucune de ces listes obligatoires. L'accessibilité l'emporte
   donc sur la valeur de rendu.

   0.92 donne environ 4,9:1 sans toucher à la charte : même blanc, même
   dégradé, et la hiérarchie face au titre en blanc pur (5,23:1) est
   préservée. À faire corriger dans l'annexe par le client. */
.a10-chapo {
  max-width: 58ch;
  margin-top: var(--sp-xl);
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* --- La carte du formulaire : blanche OPAQUE, jamais en verre.
       Deux niveaux de verre suffisent (C3) et le contraste des champs
       doit être garanti sur l'aplat violet. --- */

.a10-carte {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--surface-solid);
  box-shadow: var(--sh-elev);
  color: var(--ink);
  color-scheme: only light;
}

@media (max-width: 480px) {
  .a10-carte {
    padding: var(--sp-xl);
  }
}

.a10-form {
  display: grid;
  gap: var(--sp-lg);
}

/* Sans cette règle, l'attribut hidden est neutralisé par display: grid. */
.a10-form[hidden],
.a10-confirmation[hidden],
.a10-echec[hidden] {
  display: none;
}

.a10-groupe {
  display: grid;
  gap: var(--sp-sm);
}

/* Étiquettes VISIBLES au-dessus des champs, 13 px Inter Medium.
   Pas d'étiquette flottante, pas de marque-place tenant lieu d'étiquette. */
.a10-etiquette,
.a10-legende {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* --- Champs : 48 px, --r-xs, bordure 1 px --hairline, fond blanc.
       Couleurs forcées : le formulaire doit rester lisible si le navigateur
       impose un thème sombre. --- */

.a10-champ {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xs);
  background: var(--surface-solid);
  color: var(--ink);
  color-scheme: only light;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  transition: border-color var(--t-base) var(--ease);
}

.a10-champ::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

/* Au focus : bordure --accent + anneau 2 px --focus décalé de 2 px. */
.a10-champ:focus,
.a10-champ:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.a10-champ[aria-invalid="true"] {
  border-color: var(--neg);
}

.a10-zone {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  line-height: 1.45;
  resize: vertical;
}

/* Liste déroulante : marqueur natif remplacé par un chevron Lucide inline
   (aucune image de fond, aucune couleur en dur). */
.a10-select {
  position: relative;
  display: block;
}

select.a10-champ {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
}

.a10-select-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}

/* --- Groupes de cases --- */

.a10-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.a10-legende {
  padding: 0;
}

.a10-options {
  display: grid;
  gap: var(--sp-xs);
  margin-top: var(--sp-sm);
}

.a10-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* zone tapable minimale (D1) */
}

.a10-case {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  color-scheme: only light;
  cursor: pointer;
}

.a10-case:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.a10-option-libelle {
  flex: 1 1 auto;
  padding-block: 12px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

/* --- Consentement : non pré-coché, obligatoire, lien vers la politique --- */

.a10-consentement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Aligné sur la première ligne de l'étiquette, qui porte 12 px de garde
   haute pour atteindre la zone tapable de 44 px (D1). */
.a10-consentement .a10-case {
  margin-top: 13px;
}

.a10-consentement-texte {
  display: grid;
  gap: var(--sp-xs);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.a10-consentement-texte label {
  display: block;
  padding-block: 12px;
  cursor: pointer;
}

.a10-lien {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-base) var(--ease);
}

.a10-lien:hover {
  color: var(--accent-dark);
}

/* --- Erreurs : texte sous le champ, jamais une simple bordure rouge (D3) --- */

.a10-erreur {
  color: var(--neg);
  font-size: 13px;
  line-height: 1.4;
}

.a10-erreur:empty {
  display: none;
}

.a10-fieldset .a10-erreur {
  margin-top: var(--sp-sm);
}

.a10-echec {
  padding: var(--sp-md) 14px;
  border-radius: var(--r-xs);
  background: var(--neg-bg);
  color: var(--neg);
  font-size: 13px;
  line-height: 1.45;
}

/* --- Bouton : 52 px, pleine largeur. C'est l'appel à l'action UNIQUE de la
       page. Le dessin vient de .bouton / .bouton--large (base.css). --- */

.a10-bouton {
  margin-top: var(--sp-xs);
}

.a10-bouton:disabled {
  opacity: 0.6;
  cursor: default;
}

.a10-mention {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* --- Confirmation : remplace le formulaire en place, sans redirection --- */

.a10-confirmation {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.a10-confirmation strong {
  color: var(--ink);
  font-weight: 600;
}

.a10-confirmation:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* --- Leurre anti-spam : hors écran, pas un simple display:none.
       Un robot qui ignore la feuille de style le remplit quand même. --- */

.a10-leurre {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}