/* Styles de la page. Tout ce qui vivait en attributs inline dans la maquette est ici,
   plus le responsive et les états de focus, absents de la maquette. */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` du navigateur pose display:none, mais tout `display` d'auteur le
   bat : sans cette règle, `.bloc-etat { display: grid }` rendait le bloc de succès
   visible en même temps que le formulaire. Constaté au rendu, pas supposé. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--accent-brique); }

img { max-width: 100%; }

::placeholder { color: #9A9993; opacity: 1; }

/* Focus visible partout. Deux variantes, le contour blanc étant illisible sur fond clair
   et le contour teal illisible sur fond teal. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.hero :focus-visible, .pied-page :focus-visible {
  outline-color: var(--texte-sur-teal);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--bg-page);
  color: var(--teal);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  padding: 12px 18px;
  border-radius: var(--radius-md);
}
.saut-contenu:focus { left: 16px; top: 16px; }

.contenu {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.section { padding: 80px 0; }
.section-brume { background: var(--brume); }
.section-blanche { background: var(--bg-page); }
.section-invitation { padding-bottom: 96px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  margin-bottom: 32px;
}
.eyebrow-accent { color: var(--accent-brique); }
.eyebrow-teal { color: var(--teal); }

/* ══ Hero ══ */

.hero {
  background: var(--teal);
  color: var(--texte-sur-teal);
  position: relative;
  overflow: hidden;
}

.hero-etoile {
  position: absolute;
  top: -90px;
  right: -80px;
  width: 420px;
  opacity: var(--voile-filigrane-teal);
  pointer-events: none;
}

.hero-contenu {
  position: relative;
  padding-top: 40px;
  padding-bottom: 96px;
}

.lockup-hero {
  --lockup-glyphe: 26px;
  --lockup-mot: 22px;
  color: var(--texte-sur-teal);
  margin-bottom: 88px;
  flex-wrap: wrap;
}
.lockup-mention {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px;
  opacity: var(--voile-mention);
  letter-spacing: 0;
  margin-left: 6px;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: #E2A98F;
  margin-bottom: 20px;
}

.hero-titre {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  /* La maquette figeait 68px, qui débordait sous 500px de large. */
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  max-width: 17ch;
  text-wrap: pretty;
}

.hero-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
  margin-top: 48px;
  align-items: flex-start;
}
.hero-info { display: grid; gap: 4px; }
.hero-info-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  opacity: 0.6;
}
.hero-info-valeur {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 19px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 44px;
}
.hero-actions-mention {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px;
  opacity: var(--voile-mention);
}

/* ══ Boutons ══ */

.bouton-accent, .bouton-teal {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 17px;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}
.bouton-accent {
  background: var(--accent-brique);
  color: var(--texte-sur-accent);
}
/* La maquette portait ce survol dans un second attribut style, ignoré par le navigateur. */
.bouton-accent:hover { background: #C15B36; }

.bouton-teal {
  background: var(--teal);
  color: var(--texte-sur-teal);
}
.bouton-teal:hover { background: var(--teal-surface); }
.bouton-teal[disabled] { opacity: 0.6; cursor: progress; }

/* ══ Cartes ══ Sans bord ni ombre, l'élévation passe par la surface. ══ */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.grille-intervenants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.carte { border-radius: var(--radius-xl); }
.carte-sur-brume { background: var(--carte-sur-brume); padding: 28px 26px 30px; }
.carte-sur-blanc { background: var(--carte-sur-blanc); padding: 30px 28px 32px; }

.carte-heure {
  font-family: var(--font-code);
  font-weight: var(--weight-regular);
  font-size: 15px;
  color: var(--teal-light);
  margin-bottom: 14px;
}
.carte-titre {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 23px;
  letter-spacing: var(--tracking-titre);
  margin-bottom: 8px;
}
.carte-texte {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.portrait {
  width: 108px;
  height: 108px;
  border-radius: var(--radius-pill);
  display: block;
  margin-bottom: 22px;
  object-fit: cover;
}
.intervenant-nom {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 24px;
  letter-spacing: var(--tracking-titre);
  margin-bottom: 6px;
}
.intervenant-role {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 16px;
  color: var(--text-secondary);
}

/* ══ Invitation ══ */

.grille-invitation {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(320px, 1fr);
  gap: 64px;
  align-items: start;
}

.invitation-titre {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: var(--tracking-titre);
  margin-bottom: 18px;
  text-wrap: pretty;
}
.invitation-texte {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.invitation-places {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  color: var(--accent-brique);
  margin-top: 20px;
}

.invitation-panneau {
  background: var(--carte-sur-brume);
  border-radius: var(--radius-3xl);
  padding: 36px 36px 40px;
}

.bloc-etat { display: grid; gap: 14px; padding: 24px 0; }
.bloc-etat:focus { outline: none; }
.etat-titre {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 26px;
  letter-spacing: var(--tracking-titre);
  color: var(--teal);
}
.etat-texte {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ══ Formulaire ══ */

.formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.bloc-erreur-global {
  grid-column: 1 / -1;
  background: #FBEDE8;
  color: #7E3520;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: var(--radius-md);
}

.champ { display: grid; gap: 7px; }
.champ-large { grid-column: 1 / -1; }
.champ-label {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 14px;
}
.champ-facultatif {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 13px;
  color: var(--text-secondary);
}

.champ input {
  font: inherit;
  font-size: 16px; /* 16px minimum : en dessous, Safari iOS zoome au focus. */
  border: var(--border-width) solid #DCDCD5;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg-page);
  color: var(--ink);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.champ input:hover { border-color: #C6C6BE; }
.champ input:focus-visible {
  border-color: var(--teal);
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.champ input.en-erreur { border-color: var(--accent-brique); }

.erreur-champ {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px;
  color: var(--accent-brique);
}

/* Le champ piège doit être invisible sans être display:none, que certains robots détectent. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire-pied {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  margin-top: 6px;
  justify-items: start;
}
.mention-rgpd {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
}
.mention-rgpd a { text-decoration: underline; }

/* ══ Pied de page ══ */

.pied-page {
  background: var(--teal);
  color: var(--texte-sur-teal);
}
.pied-contenu {
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.lockup-pied {
  --lockup-glyphe: 22px;
  --lockup-mot: 19px;
  color: var(--texte-sur-teal);
}
.pied-mention {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 14px;
  opacity: var(--voile-mention);
}

/* ══ Responsive ══ Absent de la maquette, qui n'existait qu'en artboard large. ══ */

@media (max-width: 900px) {
  .grille-invitation {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .lockup-hero { margin-bottom: 56px; }
  .hero-contenu { padding-bottom: 72px; }
  .section { padding: 64px 0; }
  .section-invitation { padding-bottom: 72px; }
  .invitation-panneau { padding: 28px 26px 32px; }
}

@media (max-width: 640px) {
  .contenu { padding-left: 20px; padding-right: 20px; }
  /* Le filigrane, calé sur un cadre de 1200px, passait derrière le titre sur mobile. */
  .hero-etoile { width: 260px; top: -60px; right: -70px; opacity: 0.11; }
  .formulaire { grid-template-columns: 1fr; }
  .champ-large { grid-column: auto; }
  .hero-contenu { padding-top: 28px; padding-bottom: 60px; }
  .hero-infos { gap: 22px; margin-top: 36px; }
  .hero-actions { margin-top: 36px; }
  .bouton-accent, .bouton-teal { width: 100%; text-align: center; }
  .formulaire-pied { justify-items: stretch; }
  .section { padding: 52px 0; }
  .eyebrow { margin-bottom: 24px; }
  .pied-contenu { flex-direction: column; align-items: flex-start; gap: 14px; }
}

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