/* Formulaire de contact Éveil-Triskel.
   Fond transparent : la page hôte transparaît à travers l'iframe. */

/* --- Quicksand, auto-hébergée --------------------------------------------
   Fichiers dans assets/fonts/ — aucun appel à Google Fonts, ce que la CSP
   (font-src 'self') interdirait de toute façon. Police variable : un seul
   fichier par sous-ensemble couvre les graisses 300 à 700.
   Quicksand, SIL Open Font License 1.1 — voir assets/fonts/OFL.txt.
   font-display: swap → le texte reste lisible pendant le chargement.        */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/quicksand-latin.woff2') format('woff2');
  /* Accents français, ligature œ et € sont tous dans ce sous-ensemble. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/quicksand-latin-ext.woff2') format('woff2');
  /* Chargé uniquement si un visiteur saisit un nom d'Europe centrale. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --et-accent:        #1F6F5C;
  --et-accent-fonce:  #185849;
  --et-texte:         #1F2328;
  --et-texte-doux:    #5B6470;
  --et-bordure:       #D5DBDE;
  --et-bordure-focus: var(--et-accent);
  --et-erreur:        #B3261E;
  --et-erreur-fond:   #FDF3F2;
  --et-info-fond:     #EFF5FB;
  --et-info-bord:     #B7CFE6;
  --et-succes-fond:   #EFF7F3;
  --et-champ-fond:    #FFFFFF;
  --et-rayon:         8px;
  /* Les polices système restent en repli : elles servent pendant le chargement
     (font-display: swap) et pour les rares glyphes hors des deux sous-ensembles. */
  --et-police:        'Quicksand', system-ui, -apple-system, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
}

body {
  font-family: var(--et-police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--et-texte);
  -webkit-text-size-adjust: 100%;
}

.et-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

/* --- En-tête -------------------------------------------------------------- */

/* L'écart sous le filet sépare l'en-tête du formulaire : il doit rester
   nettement plus grand que l'espacement entre deux champs (18px). */
.et-entete { margin: 0 0 36px; }

.et-titre {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--et-texte);
}

/* Reprend la barre épaisse qui coiffe les e-mails : le formulaire et le message
   reçu se ressemblent. Passez la couleur à var(--et-bordure) pour un filet neutre. */
.et-filet {
  height: 2px;
  margin: 0;
  border: 0;
  background: var(--et-accent);
}

/* --- Bandeaux ------------------------------------------------------------ */

.et-bandeau {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--et-rayon);
  border: 1px solid transparent;
}
.et-bandeau:focus { outline: 2px solid var(--et-accent); outline-offset: 2px; }
.et-bandeau--erreur { background: var(--et-erreur-fond); border-color: #EFC4C0; border-left: 4px solid var(--et-erreur); }
.et-bandeau--info   { background: var(--et-info-fond);   border-color: var(--et-info-bord); border-left: 4px solid #3D74A8; }

.et-bandeau__titre { margin: 0; font-weight: 600; font-size: 15px; }
.et-bandeau__liste { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.et-bandeau__liste li { margin: 3px 0; }
.et-bandeau__liste a { color: inherit; }

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

.et-champ { margin: 0 0 18px; }

.et-champ label {
  display: block;
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--et-texte);
}

.et-requis { color: var(--et-erreur); font-weight: 700; }

.et-champ input[type="text"],
.et-champ input[type="email"],
.et-champ select,
.et-champ textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px; /* 16px minimum : en dessous, iOS zoome au focus */
  line-height: 1.45;
  color: var(--et-texte);
  background: var(--et-champ-fond);
  border: 1px solid var(--et-bordure);
  border-radius: var(--et-rayon);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.et-champ textarea { resize: vertical; min-height: 130px; }

.et-champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235B6470' d='M8 11L3 5.5h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}

.et-champ input:focus-visible,
.et-champ select:focus-visible,
.et-champ textarea:focus-visible {
  outline: none;
  border-color: var(--et-bordure-focus);
  box-shadow: 0 0 0 3px rgba(31, 111, 92, .18);
}

.et-champ [aria-invalid="true"] { border-color: var(--et-erreur); }
.et-champ [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, .16); }

.et-aide   { margin: 6px 0 0; font-size: 16px; color: var(--et-texte-doux); }

/* Erreur signalée par une icône ET du texte, jamais par la couleur seule. */
.et-erreur {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--et-erreur);
}
.et-erreur::before { content: "⚠ "; }

/* --- Nom + Prénom sur une ligne, Nom d'abord ----------------------------- */

.et-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.et-ligne > .et-champ { flex: 1 1 200px; min-width: 0; }

/* --- Leurres ------------------------------------------------------------- */

.et-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.et-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.et-actions { margin-top: 24px; }

.et-bouton {
  display: inline-block;
  min-height: 46px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--et-accent);
  border: 1px solid var(--et-accent);
  border-radius: var(--et-rayon);
  cursor: pointer;
  transition: background-color .12s ease;
}
.et-bouton:hover { background: var(--et-accent-fonce); border-color: var(--et-accent-fonce); }
.et-bouton:focus-visible { outline: 3px solid rgba(31, 111, 92, .45); outline-offset: 2px; }
.et-bouton[disabled] { opacity: .65; cursor: progress; }

.et-mentions { margin: 12px 0 0; font-size: 13px; color: var(--et-texte-doux); }

/* --- Confirmation -------------------------------------------------------- */

.et-succes {
  padding: 32px 24px;
  text-align: center;
  background: var(--et-succes-fond);
  border: 1px solid #C6E0D6;
  border-radius: calc(var(--et-rayon) + 4px);
}
.et-succes__icone  { color: var(--et-accent); margin-bottom: 10px; }
.et-succes__titre  { margin: 0 0 14px; font-size: 24px; line-height: 1.3; }
.et-succes__texte  { margin: 0 auto; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--et-texte); }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 430px) {
  .et-wrap { padding: 16px 12px 24px; }
  /* 32px déborderait sur un écran étroit dans une iframe : on réduit sans
     descendre au point de perdre la hiérarchie avec les libellés (17px). */
  .et-titre { font-size: 26px; }
  .et-entete { margin-bottom: 28px; }
  .et-ligne > .et-champ { flex: 1 1 100%; }
  .et-bouton { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}