/* Aurora : page contact (reprise de la page actuelle, aux couleurs du design system) */

/* ---------- Fond : la trame de pixels de l'accueil, d'un seul tenant sous l'en-tête et le formulaire ---------- */
.contact-page { position: relative; isolation: isolate; background: var(--noir); }
.contact-page > section { background-color: transparent; }
.contact-page__pixels { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }

/* ---------- Coordonnées et formulaire ---------- */
.contact { padding-bottom: var(--section-desktop); }
.contact__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--espace-8); align-items: start; }
.contact__infos { position: sticky; top: 120px; display: flex; flex-direction: column; gap: var(--espace-3); }
.contact__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--espace-1); min-height: 36px; padding: 0 var(--espace-2); border: 1px solid #b065ff4d; border-radius: var(--rayon-pilule); background: #b065ff26; color: var(--violet); font-weight: 600; }
.contact__titre { color: var(--blanc); }
.contact__infos > .corps-l { color: var(--texte-secondaire); }
.contact__moyens { display: flex; flex-direction: column; gap: 12px; margin-top: var(--espace-2); font-style: normal; }
.contact__moyen { display: flex; align-items: center; gap: var(--espace-2); padding: var(--espace-2); border-radius: var(--rayon-image); text-decoration: none; transition: background-color var(--au-duree-carte) var(--au-ease); }
.contact__icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: var(--violet); color: var(--nuit); transition: background-color var(--au-duree-carte) var(--au-ease), color var(--au-duree-carte) var(--au-ease); }
.contact__icone svg { width: 22px; height: 22px; }
.contact__moyen-texte { display: flex; flex-direction: column; min-width: 0; }
.contact__label { color: var(--texte-secondaire); }
.contact__valeur { color: var(--violet); overflow-wrap: anywhere; }
.contact__valeur--neutre { color: var(--blanc); }
a.contact__moyen:hover { --au-fond: var(--violet); }
a.contact__moyen:hover .contact__icone { background: var(--nuit); color: var(--violet); }
a.contact__moyen:hover .contact__label, a.contact__moyen:hover .contact__valeur { color: var(--nuit); }

/* Cartes posées sur la trame : en voile (Noir 80 %, contour ligne), comme la carte d'avis de l'accueil */
.contact__moyen.au-sur-noir { border: 1px solid var(--ligne); background-color: var(--voile-nav); }
a.contact__moyen.au-sur-noir:hover { border-color: var(--violet); background-color: var(--violet); }
.contact__form.au-sur-noir { background-color: var(--voile-nav); }
.contact__form { gap: var(--espace-4); padding: var(--espace-5); }
.contact__envoyer { width: 100%; }
.contact__envoyer[disabled] { opacity: 0.6; cursor: progress; }

@media (max-width: 1199px) {
  .contact { padding-bottom: var(--section-tablette); }
  .contact__grille { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  .contact__infos { position: static; }
}
@media (max-width: 809px) {
  .contact { padding-bottom: var(--section-mobile); }
  .contact__form { padding: var(--espace-3); }
}

/* Information RGPD sous le bouton d'envoi */
.contact__rgpd { margin: calc(var(--espace-2) * -1) 0 0; color: var(--texte-secondaire); }
.contact__rgpd a { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--violet); text-underline-offset: 3px; }
.contact__rgpd a:hover { color: var(--violet); }

/* Envoi réussi : le formulaire laisse la place à une confirmation centrée dans l'écran (demande de Quentin le 03/11/2026) */
.contact__form.est-envoye > :not(.contact__merci) { display: none; }
.contact__merci { display: flex; flex-direction: column; align-items: center; gap: var(--espace-3); padding: var(--espace-8) var(--espace-2); text-align: center; outline: none; animation: entree 0.6s var(--au-ease) both; }
.contact__merci-icone { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--rayon-petit); background: var(--violet); color: var(--noir); }
.contact__merci-icone svg { width: 36px; height: 36px; }
.contact__merci-titre { margin: 0; color: var(--blanc); font-size: 36px; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.contact__merci-texte { max-width: 460px; margin: 0; color: var(--texte-secondaire); }
.contact__merci-texte strong { color: var(--blanc); font-weight: 600; overflow-wrap: anywhere; }
.contact__merci-note { max-width: 460px; margin: 0; padding: 12px 16px; border: 1px dashed var(--violet); border-radius: var(--rayon-petit); color: var(--blanc); }
.contact__merci-autre { margin-top: var(--espace-1); }
@media (max-width: 809px) { .contact__merci { padding: var(--espace-6) 0; } .contact__merci-titre { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .contact__merci { animation: none; } }
/* Erreur d'envoi : un encadré, pas une ligne de texte */
.contact__form .au-etat.est-erreur { margin: 0; padding: var(--espace-2) var(--espace-3); border: 1px solid var(--violet); border-radius: var(--rayon-petit); background: rgba(176, 101, 255, 0.12); color: var(--blanc); outline: none; }

/* Titre unique en haut de la colonne de gauche (le doublon avec l'en-tête centré est supprimé, choix de Quentin le 03/11/2026) */
.contact { padding-top: 168px; }
.contact__titre { margin: 0; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.contact__accent { display: block; color: var(--violet); }
@media (max-width: 1199px) { .contact { padding-top: 136px; } }
@media (max-width: 809px) { .contact { padding-top: 112px; } }