/* ============================================================
   ALTIS EVENT — page concours (formulaire.html)
   Complément de css/style.css : cette feuille se charge APRÈS
   et ne redéfinit aucune variable. Même règle de couleur que
   partout ailleurs : le rouge porte la marque, l'or (--gold)
   ne sert QU'AUX BOUTONS.
   ============================================================ */

/* Pas de barre sticky sur cette page : le footer n'a plus besoin
   de réserver les 96 px qui l'accueillent sur la page de vente. Il garde en revanche
   la place de la bannière de consentement, qui s'affiche sur toutes les pages. */
.page-concours footer { padding-bottom: calc(3.4rem + var(--ae-consent-h, 0px)); }

/* Sur mobile, .strip-who est masqué (css/style.css) et le compte à rebours du concours ne
   s'affiche que si CONCOURS_FIN est renseigné : sans échéance, le bandeau est une bande noire
   vide qui vole 30 px du premier écran. On le masque tant qu'il n'a rien à dire. */
@media (max-width: 720px) {
  .page-concours .top-strip { display: none; }
}

/* ---- HERO : la promesse à gauche, le formulaire à droite ----
   Le formulaire est visible sans défiler sur un écran d'ordinateur ;
   sur mobile, la promesse passe devant et le formulaire la suit. */
.concours-hero {
  background-color: var(--red-deep);
  background-image:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .12), transparent 62%),
    linear-gradient(180deg, rgba(196, 18, 48, .93) 0%, rgba(138, 11, 31, .95) 55%, rgba(107, 8, 23, .98) 100%),
    url("../img/villa-piscine-nuit.jpg");
  background-size: auto, auto, cover;
  background-position: center, center, center 40%;
  background-repeat: no-repeat;
  color: #fff;
  padding: 2.4rem 0 3.8rem;
}
/* L'ordre du DOM est : en-tête, formulaire, confirmation, dotation. C'est l'ordre
   voulu sur mobile — le premier champ arrive juste sous la promesse — et c'est
   aussi l'ordre lu par un lecteur d'écran. Sur grand écran, le placement explicite
   en grille remet la dotation sous l'en-tête, à gauche, et le formulaire à droite
   sur les deux rangées : aucune propriété order, donc aucun écart entre ce qui est
   vu et ce qui est lu (WCAG 1.3.2). */
.concours-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  grid-template-rows: auto 1fr;
  gap: 1.8rem 2.8rem;
  align-items: start;
}
.concours-head { grid-column: 1; grid-row: 1; }
.concours-rest { grid-column: 1; grid-row: 2; }
.concours-card { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 980px) {
  .concours-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.7rem; }
  .concours-head, .concours-rest, .concours-card { grid-column: 1; grid-row: auto; }
  .concours-head { text-align: center; }
  .concours-rest .prize-list { text-align: left; max-width: 34rem; margin-left: auto; margin-right: auto; }
  .concours-rest .concours-note { text-align: center; }
}

.concours-hero h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  color: #fff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
  margin-bottom: .7rem;
}
.concours-head .subhead, .concours-hero .subhead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  color: #FFEDEA;
  margin: 0 0 1.4rem;
}

/* ---- ce que l'on gagne, en quatre lignes sous le titre ---- */
.prize-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.prize-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; color: var(--dim-2); }
.prize-list li svg { flex: none; margin-top: .25rem; color: var(--gold); }
.prize-list b { color: #fff; }
.concours-note { font-size: .84rem; color: var(--dim); margin: 0; }

/* ---- carte du formulaire ----
   .order-card (css/style.css) donne le fond blanc et l'ombre ;
   ici on la sort de sa colonne centrée pour la poser dans la grille. */
.concours-card { max-width: none; margin: 0; padding: 1.9rem 1.8rem 2rem; }
@media (max-width: 520px) { .concours-card { padding: 1.5rem 1.2rem 1.7rem; } }
.concours-card-sub { font-size: .88rem; color: var(--ink-soft); margin: -.5rem 0 1.3rem; }

/* le textarea suit exactement les autres champs (.field input, .field select) */
.field textarea {
  width: 100%; background: #fff; border: 1.5px solid #CFC2C5; border-radius: var(--r-btn);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--ink);
  padding: .8rem 1rem; resize: vertical; min-height: 116px; display: block;
}
.field textarea:focus { outline: 2px solid var(--red); border-color: var(--red); }
.field.invalid textarea { border-color: var(--err); }
.char-count { font-size: .78rem; color: var(--ink-soft); text-align: right; margin: .25rem 0 0; font-variant-numeric: tabular-nums; }

/* ---- case unique d'acceptation ----
   Zone cliquable d'au moins 44 px de haut, case de 20 px : sur mobile,
   une case plus petite se rate une fois sur trois.
   Les sélecteurs passent par .field : sinon `.field label` (css/style.css)
   l'emporte en spécificité et remet le libellé en display:block et en gras,
   ce qui fait passer le texte sous la case au lieu d'être à côté. */
.field-consent { margin-top: 1.3rem; }
.field .consent {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--red-wash); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: .9rem 1rem; margin-bottom: 0; cursor: pointer;
  font-size: .8rem; font-weight: 400; line-height: 1.55; color: var(--ink-soft);
}
.field .consent:hover { border-color: rgba(200, 16, 46, .35); }
.field .consent input {
  flex: none; width: 20px; height: 20px; margin-top: .12rem;
  accent-color: var(--red); cursor: pointer;
}
.field .consent a { color: var(--red); }
.field-consent.invalid .consent { border-color: var(--err); background: #FDF0EE; }

/* indicatif + numéro : les deux champs s'alignent par le bas, pour que le
   libellé du numéro puisse tenir sur deux lignes sans décaler les cadres */
.field-row--tel { align-items: end; }

/* message d'erreur renvoyé par l'API, sous le bouton */
#cc-error { color: var(--err); font-weight: 600; }

/* ---- confirmation ---- */
.concours-card .btn-full { margin-top: 1.2rem; }

/* ---- dotation : trois cartes photo ---- */
.lead-center { color: var(--ink-soft); max-width: 640px; margin: 0 auto 2.6rem; }
.prize-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 860px) { .prize-cards { grid-template-columns: 1fr; } }
.prize-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column;
}
.prize-card img { width: 100%; height: 190px; object-fit: cover; }
.prize-card-body { padding: 1.3rem 1.4rem 1.5rem; }
.prize-card h3 { margin: 0 0 .5rem; font-size: 1.08rem; color: var(--red); }
.prize-card p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.concours-small { font-size: .84rem; color: var(--ink-soft); max-width: 720px; margin: 2rem auto 0; }

/* ---- les trois étapes ---- */
.steps-row { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 860px) { .steps-row { grid-template-columns: 1fr; } }
.steps-row li { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 1.6rem 1.5rem; }
.steps-row h3 { margin: .8rem 0 .4rem; font-size: 1.05rem; }
.steps-row p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1;
}

/* WhatsApp de la page concours : sous la promesse, jamais à côté du bouton d’envoi. */
.concours-wa { margin: 1.1rem 0 0; }
@media (max-width: 980px) {
  .concours-wa { display: flex; justify-content: center; }
}
@media (max-width: 560px) {
  .concours-wa { display: block; }
  .concours-wa .btn-ghost { width: 100%; font-size: .95rem; }
}