/* RSD Prod. — feuille de style unique.
   Reproduit à l'identique la maquette validée (colonne unique, mobile d'abord).
   Pour changer une couleur, une taille ou une marge : modifier la variable ci-dessous. */

/* Inter, hébergée sur le site (licence OFL), variable : graisses 100 à 900 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
  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;
}

:root {
  /* Couleurs */
  --fond: #FFFFFF;               /* fond de la page */
  --encre: #0B0B0B;              /* texte, filets, boutons */
  --accent: #FF3D00;             /* orange : uniquement sur « 9 nov. » */
  --pointille: #8A8A86;          /* trait pointillé du cadre de l'objet chromé */
  --gris: #555555;               /* légende du cadre et lien au survol */

  /* Tailles de police (hors titre, l'écart max est de 2×) */
  --taille-titre: clamp(64px, 18vw, 120px);  /* gros titre COURS DJING & MAO */
  --taille-section: 24px;        /* titre « Réserve ta place » et date */
  --taille-valeur: 20px;         /* infos principales (objectif, lieu, horaires, prix) */
  --taille-champ: 18px;          /* champs du formulaire (18 px : iOS ne zoome pas) */
  --taille-texte: 17px;          /* programmes et précisions */
  --taille-note: 15px;           /* note sous les tarifs */
  --taille-bouton: 14px;         /* boutons et ligne sous le bouton */
  --taille-label: 12px;          /* petits intitulés en capitales */

  /* Dimensions de la colonne */
  --largeur-colonne: 600px;      /* largeur maximale de la colonne centrée */
  --marge-laterale: 20px;        /* marges gauche et droite */

  /* Espacements */
  --espace-entete: 24px;         /* haut et bas de l'en-tête */
  --espace-accroche-haut: 32px;  /* au-dessus du gros titre */
  --espace-accroche-bas: 40px;   /* sous la date de départ */
  --espace-bloc: 18px;           /* haut et bas de chaque bloc d'infos */
  --espace-champs: 22px;         /* entre deux champs du formulaire */
  --espace-label: 8px;           /* entre un intitulé et sa valeur */
  --espace-inscription: 64px;    /* au-dessus du formulaire */
  --espace-inscription-bas: 80px;/* sous le formulaire */

  /* Hauteurs des zones tactiles (44 px minimum) */
  --hauteur-bouton: 64px;        /* gros boutons noirs */
  --hauteur-choix: 56px;         /* boutons DJing / MAO */

  /* Filets */
  --filet: 1px solid var(--encre);   /* trait plein entre les blocs */
}

body {
  margin: 0;
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

input, select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  color: var(--encre);
}
button, a, label { -webkit-tap-highlight-color: transparent; }
a { color: var(--encre); }
a:hover { color: var(--gris); }

/* ---------- Structure ---------- */
.page {
  background: var(--fond);
  color: var(--encre);
  font-family: Inter, sans-serif;
  min-height: 100vh;
}
.colonne {
  max-width: var(--largeur-colonne);
  margin: 0 auto;
  padding: 0 max(var(--marge-laterale), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--marge-laterale), env(safe-area-inset-left));
}

/* ---------- Petits intitulés en capitales ---------- */
.label {
  margin: 0;
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- En-tête ---------- */
.entete {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: var(--espace-entete) 0;
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.entete__marque { font-weight: 900; }
.entete a { text-decoration: none; }

/* ---------- Accroche : titre, logo, date ---------- */
.accroche {
  position: relative;
  padding: var(--espace-accroche-haut) 0 var(--espace-accroche-bas);
}
.titre {
  margin: 0;
  font-size: var(--taille-titre);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.8;
  text-transform: uppercase;
}
/* Logo texte : en haut à droite, le haut du logo aligné sur le haut des capitales de « COURS ».
   Pour le remplacer par un fichier officiel : voir le README. */
.logo {
  position: absolute;
  right: 0;
  /* haut de la zone + haut des capitales du titre (≈ 3,7 % de sa taille) − haut des capitales du logo (≈ 0,15 em) */
  top: calc(var(--espace-accroche-haut) + var(--taille-titre) * 0.037 - 0.17em);
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.label--depart { margin-top: 32px; }
.date-depart {
  font-size: var(--taille-section);
  font-weight: 100;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent);
}

/* ---------- Emplacement de l'objet chromé (cadre pointillé) ---------- */
.objet {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--pointille);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}
/* Quand l'image est fournie, elle remplace le cadre (voir le README) */
.objet-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ---------- Bouton principal et ligne de prix ---------- */
.bouton-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-bouton);
  margin: 32px 0 8px;
  background: var(--encre);
  color: var(--fond);
  font-size: var(--taille-bouton);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
a.bouton-cta:hover { color: var(--fond); }
.prix-accroche {
  margin: 0 0 48px;
  text-align: center;
  font-size: var(--taille-bouton);
  font-weight: 600;
}

/* ---------- Blocs d'infos (filets entre les blocs) ---------- */
.bloc {
  padding: var(--espace-bloc) 0;
  border-top: var(--filet);
}
.bloc--dernier { border-bottom: var(--filet); }
.valeur {
  margin: var(--espace-label) 0 0;
  font-size: var(--taille-valeur);
  font-weight: 800;
}
.valeur--serree { line-height: 1.3; }
.valeur--tarifs { line-height: 1.35; }
.detail {
  font-weight: 600;
  font-size: var(--taille-valeur);
}
.detail--petit { font-size: var(--taille-texte); }
.texte {
  margin: var(--espace-label) 0 0;
  font-size: var(--taille-texte);
  font-weight: 600;
  line-height: 1.5;
}
.note {
  margin: 6px 0 0;
  font-size: var(--taille-note);
  font-weight: 600;
}

/* ---------- Formulaire d'inscription ---------- */
.inscription { padding: var(--espace-inscription) 0 var(--espace-inscription-bas); }
.titre-section {
  margin: 0 0 32px;
  font-size: var(--taille-section);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-champs);
}
.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-label);
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.champ input,
.champ select {
  border: 0;
  border-bottom: var(--filet);
  padding: 12px 0;
  font: 600 var(--taille-champ) Inter, sans-serif;
}
.champ select {
  padding-right: 28px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.groupe {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-label);
}
.groupe legend {
  padding: 0 0 var(--espace-label);
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.choix-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--filet);
}
.choix { position: relative; display: flex; cursor: pointer; }
.choix + .choix { border-left: var(--filet); }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-choix);
  font: 800 var(--taille-bouton) Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--fond);
}
.choix input:checked + span { background: var(--encre); color: var(--fond); }
.choix input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }
.bouton {
  margin-top: 8px;
  min-height: var(--hauteur-bouton);
  border: 0;
  background: var(--encre);
  color: var(--fond);
  font: 800 var(--taille-bouton) Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Champ piège anti-robots : invisible pour les humains */
.piege { display: none; }
/* Ligne RGPD sous le bouton */
.mention {
  margin: 12px 0 0;
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- Pied de page ---------- */
.pied {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0 40px;
  border-top: var(--filet);
  font-size: var(--taille-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pied a { text-decoration: none; padding: 14px 0; }

/* ---------- Pages merci et mentions légales ---------- */
.page-texte { padding: 32px 0 40px; }
.page-texte .valeur { margin-top: 32px; }
.page-texte .bouton-cta { margin-top: 32px; }
.page-texte .bloc:first-of-type { margin-top: 32px; }