/* ==========================================================================
   Compléments propres au site v4.
   Le gros du style vient de theme.css (feuille du thème d'origine) ; on
   n'ajoute ici que ce que ce thème ne fournit pas : le piège à robots, les
   messages d'erreur du formulaire, et les pages « merci » et 404.
   ========================================================================== */

/* --- Contenus révélés par script -------------------------------------------
   Le thème masque le titre, le texte et le bouton du hero (classe `.visible`,
   qui désigne en fait l'état masqué) en attendant qu'un script les affiche.
   Si le script ne s'exécute pas, ces contenus resteraient invisibles. On ne
   les masque donc que lorsque JavaScript est effectivement actif. */
html:not(.js) .visible {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Images : conserver le rapport hauteur/largeur -------------------------
   Les attributs width/height des <img> réservent la place avant chargement :
   fini le décalage de mise en page, et le bandeau défilant peut mesurer ses
   éléments avant que les images arrivent. Mais quand le CSS du thème ne fixe
   qu'une seule dimension, l'autre attribut devient une taille imposée et
   déforme l'image. Les navigateurs déduisant le rapport d'image de ces mêmes
   attributs, mettre la dimension libre à `auto` conserve la réservation de
   place tout en respectant les proportions. */

/* Le thème impose la largeur : la hauteur suit. */
.sponsors-grid .sponsor-item img {
  height: auto;
}

/* Le thème impose la hauteur : la largeur suit. */
.header .logo,
.gallery-grid .gallery-item img,
.gallery-grid .gallery-item video,
.section-gallery .gallery-item img {
  width: auto;
}

/* --- Icône « + » des cartes FAQ ------------------------------------------
   Le kit FontAwesome du site v3 remplaçait le <i> par un <svg> que le
   conteneur flex étirait sur toute la hauteur de ligne. Nos icônes en masque
   CSS ne s'étirent pas d'elles-mêmes : on rétablit cette hauteur ici, sinon
   chaque carte de la FAQ est 10 px plus courte que sur le site d'origine. */
.card-faq .top i {
  height: 1.4em;
}

/* --- Piège à robots : jamais visible, jamais atteignable au clavier ------- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Retours d'erreur du formulaire -------------------------------------- */
.input-box.has-error input,
.input-box.has-error select {
  border-color: #d7263d !important;
  background-color: #fff5f6 !important;
}

.input-box .field-error {
  display: block;
  margin-top: 6px;
  color: #d7263d;
  font-size: 0.85rem;
  font-weight: 700;
}

.responseMessage.error {
  display: block;
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 2px solid #d7263d;
  border-radius: 10px;
  background: #fff5f6;
  color: #a3122a;
  font-weight: 700;
}

/* --- Pages « merci » et 404 ---------------------------------------------- */
.section-message {
  padding-block: clamp(60px, 9vw, 130px);
  text-align: center;
}

.section-message .message-icon {
  width: 92px;
  height: 92px;
  margin: 0 auto 32px;
  display: grid;
  place-items: center;
  font-size: 38px;
  color: var(--wp--preset--color--secondary, #00e682);
  border: 3px solid var(--wp--preset--color--secondary, #00e682);
  border-radius: 50%;
}

.section-message p {
  max-width: 60ch;
  margin-inline: auto;
}

.section-message p + p {
  margin-top: 14px;
}

.section-message .buttons-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.section-message .error-code {
  font-size: clamp(72px, 12vw, 132px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--secondary, #00e682);
  margin-bottom: 8px;
}