/* ===========================================================
   GALA DE LA HAUTE — 2026
   Chambre de commerce de la Haute-Gaspésie
   Feuille de style partagée — thème noir & or
   =========================================================== */

:root {
  --noir: #0a0a0a;
  --noir-doux: #141210;
  --carte: #17140f;
  --or: #bc8d45;
  --or-clair: #dca046;
  --or-pale: #e8c98a;
  --blanc-casse: #f6f1e7;
  --gris-texte: #b8b0a2;
  --ligne: #2b2620;
  --succes: #6fae7a;
  --erreur: #c96a5a;
  --font-titre: 'Playfair Display', Georgia, serif;
  --font-script: 'Tangerine', cursive;
  --font-corps: 'Montserrat', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc-casse);
  font-family: var(--font-corps);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--or-clair); text-decoration: none; }
a:hover { color: var(--or-pale); }

img { max-width: 100%; display: block; }

.conteneur {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

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

header.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ligne);
}

.entete-interieur {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.entete-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.entete-logo img { height: 44px; width: auto; border-radius: 6px; flex-shrink: 0; }

nav.entete-nav { display: flex; gap: 26px; }

nav.entete-nav a {
  color: var(--gris-texte);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

nav.entete-nav a:hover, nav.entete-nav a.actif { color: var(--or-clair); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 90px 24px 70px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(188, 141, 69, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(10, 9, 7, 0.3) 0%, rgba(10, 9, 7, 0.8) 60%, var(--noir) 100%),
    url("../images/hero-fond-constellations.png") center 35% / cover no-repeat,
    var(--noir);
  border-bottom: 1px solid var(--ligne);
}

.hero-logo { width: 150px; margin: 0 auto 28px; }

.hero-presente {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gris-texte);
  margin-bottom: 14px;
}

.hero-presente strong { color: var(--or-clair); font-weight: 700; }

.hero h1 {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}

.hero h1 .script {
  font-family: var(--font-script);
  font-size: 1.55em;
  color: var(--or-clair);
  font-weight: 400;
  display: inline-block;
  margin-left: 6px;
}

.hero-tagline {
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--or);
  margin: 18px 0 26px;
}

.hero-date {
  font-size: 1.05rem;
  color: var(--blanc-casse);
  margin-bottom: 34px;
}

.hero-date span { color: var(--or-clair); font-weight: 700; }

.boutons-hero {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.bouton-or {
  background: linear-gradient(135deg, var(--or-clair), var(--or));
  color: #1a1305;
}

.bouton-or:hover { filter: brightness(1.1); color: #1a1305; }

.bouton-contour {
  background: transparent;
  border-color: var(--or);
  color: var(--or-clair);
}

.bouton-contour:hover { background: rgba(188, 141, 69, 0.1); color: var(--or-pale); }

.bouton:disabled { opacity: 0.5; cursor: not-allowed; }

.bouton.bouton-desactive {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}

/* ---------- Sections génériques ---------- */

section { padding: 70px 24px; position: relative; }

.section-titre { text-align: center; margin-bottom: 46px; }

.section-titre .suptitre {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--or);
  margin-bottom: 10px;
  display: block;
}

.section-titre h2 {
  font-family: var(--font-titre);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0;
  color: var(--blanc-casse);
}

.section-titre p {
  color: var(--gris-texte);
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 0.95rem;
}

/* ---------- Grille catégories ---------- */

.grille-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.carte-categorie {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 28px 24px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.carte-categorie:hover { border-color: var(--or); transform: translateY(-3px); }

.carte-categorie .emoji { font-size: 1.8rem; margin-bottom: 12px; }

.carte-categorie h3 {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.carte-categorie p { color: var(--gris-texte); font-size: 0.88rem; margin: 0; }

.carte-categorie p.courtoisie-carte {
  font-size: 0.76rem;
  color: var(--gris-texte);
  margin: 0 0 12px;
}

.carte-categorie p.courtoisie-carte strong { color: var(--or-clair); }

/* ---------- Encadré "Jeune relève, en lumière" ----------
   Volontairement distinct des .carte-categorie, pour bien signaler que ce
   n'est pas une 8e catégorie de prix : bordure pointillée (plutôt que
   pleine), fond avec une légère lueur dorée (plutôt que le --carte uni),
   format rectangulaire à l'horizontale sur toute la largeur de la grille
   (plutôt qu'une carte verticale de même gabarit que les 7 autres), et une
   étiquette "Hors-concours" à la place d'un numéro de constellation. Elle
   a tout de même sa propre constellation (voir "lumiere" dans
   constellations.js) pour rester dans le même langage visuel que le reste
   du site. */

.carte-encadre-lumiere {
  grid-column: 1 / -1;
  background:
    radial-gradient(ellipse at 88% 50%, rgba(188, 141, 69, 0.16), transparent 62%),
    var(--carte);
  border: 1px dashed var(--or);
  border-radius: 6px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
}

.encadre-lumiere-texte {
  flex: 1 1 340px;
  min-width: 0;
}

.encadre-lumiere-etiquette {
  display: inline-block;
  color: var(--or);
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.carte-encadre-lumiere h3 {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1.3rem;
  margin: 0 0 10px;
}

.carte-encadre-lumiere p {
  color: var(--gris-texte);
  font-size: 0.88rem;
  margin: 0 0 20px;
  max-width: 46ch;
}

.carte-encadre-lumiere .bouton {
  text-align: center;
  padding: 12px 26px;
  font-size: 0.78rem;
}

.constellation-hote.constellation-hote-lumiere {
  flex: 0 0 auto;
  width: 150px;
  margin: 0;
}

@media (max-width: 640px) {
  .carte-encadre-lumiere {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
  .encadre-lumiere-texte { text-align: center; }
  .carte-encadre-lumiere p { max-width: none; margin-left: auto; margin-right: auto; }
  .carte-encadre-lumiere .bouton { width: 100%; }
  .constellation-hote.constellation-hote-lumiere { width: 130px; order: -1; }
}

/* ---------- Constellations de La Haute ---------- */

.constellation-numero {
  display: block;
  text-align: center;
  color: var(--or);
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.constellation-numero::before,
.constellation-numero::after {
  content: "✦";
  margin: 0 8px;
  font-size: 0.55rem;
  opacity: 0.7;
  position: relative;
  top: -1px;
}

.constellation-hote {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 220 / 200;
  margin: 14px auto 16px;
}

.constellation-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.constellation-etoile {
  fill: var(--or-pale);
  filter: drop-shadow(0 0 3px rgba(232, 201, 138, 0.85));
  transition: opacity 0.5s ease, r 0.6s ease, filter 0.6s ease;
}

.constellation-ligne {
  stroke: var(--or);
  stroke-width: 1;
  opacity: 0.5;
  transition: stroke-dashoffset 0.9s ease, opacity 0.5s ease, stroke-width 0.6s ease;
}

/* Révélation au défilement : les étoiles s'allument, puis les lignes se
   tracent — voir js/reveal.js pour l'ajout de la classe "en-vue". Tout
   ceci est gardé derrière la classe "anime" (posée immédiatement dans
   <head> par un petit script inline) : si ce script ne s'exécute pas —
   JavaScript désactivé, script bloqué, etc. — rien de tout ceci ne
   s'applique et le contenu reste simplement visible par défaut. Aucune
   information du site ne doit dépendre d'une animation pour être vue.*/
.anime .constellation-etoile { opacity: 0; }

.anime .constellation-ligne {
  opacity: 0;
  stroke-dasharray: var(--longueur, 0);
  stroke-dashoffset: var(--longueur, 0);
}

.anime .constellation-hote.en-vue .constellation-etoile { opacity: 1; }

.anime .constellation-hote.en-vue .constellation-ligne {
  opacity: 0.5;
  stroke-dashoffset: 0;
}

.carte-categorie:hover .constellation-ligne,
.carte-partenaire:hover .constellation-ligne,
.carte-recipiendaire:hover .constellation-ligne {
  opacity: 0.95;
  stroke-width: 1.3;
}

.carte-categorie:hover .constellation-etoile,
.carte-partenaire:hover .constellation-etoile,
.carte-recipiendaire:hover .constellation-etoile {
  filter: drop-shadow(0 0 6px rgba(232, 201, 138, 1));
}

/* Filigrane : signature discrète des constellations en arrière-plan
   (pied de page, séparateurs) — toujours visible, jamais animée,
   très en retrait pour ne pas concurrencer le contenu. */
.constellation-filigrane {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  width: 340px;
  max-width: 60vw;
  aspect-ratio: 220 / 200;
}

.constellation-filigrane .constellation-etoile,
.constellation-filigrane .constellation-ligne {
  transition: none;
}

.constellation-filigrane .constellation-etoile {
  opacity: 0.5;
  filter: none;
}

.constellation-filigrane .constellation-ligne {
  opacity: 0.16;
  stroke-dashoffset: 0;
}

/* ---------- Révélation générique au défilement ---------- */
/* Même principe que ci-dessus : masqué seulement si .anime est présente. */

.anime [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.anime [data-reveal].en-vue {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .anime [data-reveal],
  .anime .constellation-etoile,
  .anime .constellation-ligne {
    transition: none !important;
  }
  .anime [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .anime .constellation-hote:not(.constellation-filigrane) .constellation-etoile {
    opacity: 1;
  }
  .anime .constellation-hote:not(.constellation-filigrane) .constellation-ligne {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }
}

/* ---------- Section narrative — Les constellations de La Haute ---------- */

.constellations-intro {
  max-width: 660px;
  margin: 0 auto;
  padding: 10px 24px 40px;
  text-align: center;
}

.constellations-intro .suptitre-grand {
  display: block;
  font-family: var(--font-titre);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--or-clair);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.constellations-intro p {
  color: var(--gris-texte);
  line-height: 1.75;
  margin: 0 0 14px;
}

.constellations-intro p:last-child { margin-bottom: 0; }

.badge-hommage {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--or);
  border: 1px solid var(--or);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ---------- Échéancier / repères ---------- */

.reperes-encadre {
  border: 1px solid var(--or);
  border-radius: 10px;
  padding: 34px 28px;
  background: var(--carte);
}

.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.repere {
  text-align: center;
  padding: 24px 16px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  background: var(--carte);
}

.repere .date {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.repere .label { color: var(--gris-texte); font-size: 0.82rem; }

/* ---------- Pied de page ---------- */

footer.pied {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ligne);
  padding: 50px 24px 30px;
  text-align: center;
  color: var(--gris-texte);
  font-size: 0.82rem;
}

footer.pied .constellation-filigrane {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

footer.pied > * {
  position: relative;
  z-index: 1;
}

footer.pied .presente-par {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  margin-bottom: 18px;
}

footer.pied .presente-par strong { color: var(--or-clair); }

.bandeau-partenaires-annuels {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(232, 201, 138, 0.18);
}

.bandeau-partenaires-annuels-titre {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--or);
  margin-bottom: 16px;
}

.bandeau-partenaires-annuels-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
}

.bandeau-partenaires-annuels-logos img {
  height: 56px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.95;
}

@media (max-width: 600px) {
  .bandeau-partenaires-annuels-logos img {
    height: 44px;
    max-width: 130px;
  }
}

footer.pied a { color: var(--gris-texte); }
footer.pied a:hover { color: var(--or-clair); }

/* ---------- Formulaire ---------- */

.page-form-hero {
  padding: 60px 24px 40px;
  text-align: center;
  border-bottom: 1px solid var(--ligne);
}

.page-form-hero h1 { font-family: var(--font-titre); font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 12px; }
.page-form-hero p { color: var(--gris-texte); max-width: 560px; margin: 0 auto; }

.formulaire {
  max-width: 680px;
  margin: 0 auto;
  padding: 50px 24px 90px;
}

.groupe-champ { margin-bottom: 22px; }

.groupe-champ label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--or-clair);
  margin-bottom: 8px;
  font-weight: 600;
}

.groupe-champ .aide {
  display: block;
  font-size: 0.78rem;
  color: var(--gris-texte);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: normal;
}

.groupe-champ input[type="text"],
.groupe-champ input[type="email"],
.groupe-champ input[type="tel"],
.groupe-champ input[type="url"],
.groupe-champ input[type="number"],
.groupe-champ select,
.groupe-champ textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--noir-doux);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  color: var(--blanc-casse);
  font-family: var(--font-corps);
  font-size: 0.95rem;
}

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

.groupe-champ input:focus,
.groupe-champ select:focus,
.groupe-champ textarea:focus {
  outline: none;
  border-color: var(--or);
}

.groupe-champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23bc8d45'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23bc8d45' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.description-categorie {
  display: none;
  margin: -6px 0 22px;
  padding: 16px 18px;
  background: var(--carte);
  border-left: 3px solid var(--or);
  border-radius: 4px;
  color: var(--gris-texte);
  font-size: 0.88rem;
  line-height: 1.55;
}

.description-categorie.actif { display: block; }

.note-adhesion {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--or);
  border-radius: 8px;
  background: var(--carte);
  font-size: 0.86rem;
  color: var(--gris-texte);
  line-height: 1.5;
}

.note-adhesion.actif { display: block; }

.note-adhesion a {
  display: inline-block;
  margin-top: 8px;
  color: var(--or-clair);
  font-weight: 600;
}

.btn-confirmer-adhesion {
  display: block;
  margin-top: 12px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--or);
  border-radius: 6px;
  color: var(--blanc-casse);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-confirmer-adhesion:hover {
  background: var(--or);
  color: var(--noir);
}

.champs-categorie {
  display: none;
  border-left: 2px solid var(--or);
  padding-left: 18px;
  margin: 26px 0;
}

.champs-categorie.actif { display: block; }

.ligne-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .ligne-double { grid-template-columns: 1fr; }
}

.bouton-envoyer {
  width: 100%;
  padding: 16px;
  font-size: 0.9rem;
  margin-top: 10px;
}

.message-statut {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 4px;
  font-size: 0.9rem;
  display: none;
}

.message-statut.visible { display: block; }
.message-statut.succes { background: rgba(111, 174, 122, 0.12); border: 1px solid var(--succes); color: #b7dabd; }
.message-statut.erreur { background: rgba(201, 106, 90, 0.12); border: 1px solid var(--erreur); color: #e3b2a8; }

.message-statut .confirmation-relance { margin-top: 10px; font-weight: 600; }
.message-statut .confirmation-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.message-statut .confirmation-boutons .bouton { padding: 10px 18px; font-size: 0.85rem; }

/* ---------- Finalistes / vote ---------- */

.grille-finalistes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.carte-finaliste {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 26px;
}

.carte-finaliste .photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--noir-doux);
}

.carte-finaliste h3 {
  font-family: var(--font-titre);
  color: var(--or-clair);
  margin: 20px 16px 8px;
}

.carte-finaliste p { color: var(--gris-texte); font-size: 0.85rem; padding: 0 18px; min-height: 60px; }

.carte-finaliste .bouton { margin-top: 14px; }

.attente-finalistes {
  text-align: center;
  padding: 90px 24px;
  color: var(--gris-texte);
}

.attente-finalistes .grand-emoji { font-size: 3rem; margin-bottom: 20px; }
.attente-finalistes h2 { font-family: var(--font-titre); color: var(--blanc-casse); }
.attente-finalistes p { max-width: 440px; margin-left: auto; margin-right: auto; }

.silhouette-bienvenue {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 20px;
  fill: var(--or-pale);
  opacity: 0.75;
  filter: drop-shadow(0 0 8px rgba(232, 201, 138, 0.5));
}

.formulaire-vote-courriel {
  max-width: 460px;
  margin: 40px auto 0;
  display: none;
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 26px 24px 22px;
}

.formulaire-vote-courriel.actif { display: block; }

.formulaire-vote-courriel .vote-pour {
  text-align: center;
  font-family: var(--font-titre);
  color: var(--or-clair);
  margin: 0 0 18px;
  font-size: 1.15rem;
}

.formulaire-vote-courriel .groupe-champ-checkbox,
.formulaire .groupe-champ-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}

.formulaire-vote-courriel .groupe-champ-checkbox input[type="checkbox"],
.formulaire .groupe-champ-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--or);
  flex-shrink: 0;
}

.formulaire-vote-courriel .groupe-champ-checkbox label,
.formulaire .groupe-champ-checkbox label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--gris-texte);
  font-size: 0.85rem;
}

.avis-confidentialite {
  max-width: 100%;
  margin: 6px 0 26px;
  padding: 16px 18px;
  background: var(--carte);
  border-left: 3px solid var(--or);
  border-radius: 4px;
  color: var(--gris-texte);
  font-size: 0.85rem;
  line-height: 1.6;
}

.avis-confidentialite h3 {
  font-family: var(--font-titre);
  color: var(--blanc-casse);
  font-size: 1rem;
  margin: 0 0 10px;
}

.avis-confidentialite p { margin: 0 0 10px; }
.avis-confidentialite p:last-child { margin-bottom: 0; }
.avis-confidentialite a { color: var(--or-clair); }

.carte-finaliste .bouton-voter.voter-choisi { background: var(--or); color: var(--noir); }

.vote-confirme {
  text-align: center;
  max-width: 460px;
  margin: 40px auto 0;
  padding: 26px 24px;
  background: rgba(111, 174, 122, 0.12);
  border: 1px solid var(--succes);
  border-radius: 8px;
  color: #b7dabd;
  font-size: 0.92rem;
}

/* ---------- Poussière de paillettes (décor sitewide) ---------- */

@keyframes derive-paillettes {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 340px 680px, -260px 520px, 180px -300px; }
}

/* Halo doré diffus (poussière de lumière / bokeh en arrière-plan) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 997;
  opacity: 0.55;
  background-image:
    radial-gradient(560px circle at 10% 12%, rgba(188,141,69,0.12), transparent 70%),
    radial-gradient(480px circle at 88% 8%, rgba(220,160,70,0.10), transparent 70%),
    radial-gradient(620px circle at 22% 88%, rgba(232,201,138,0.09), transparent 70%),
    radial-gradient(500px circle at 92% 78%, rgba(188,141,69,0.11), transparent 70%),
    radial-gradient(700px circle at 55% 45%, rgba(220,160,70,0.05), transparent 75%);
  background-repeat: no-repeat;
}

/* Poussière de paillettes dorées, dense et animée, sur toutes les pages */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.9;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 15%, rgba(220,160,70,0.6), transparent 60%),
    radial-gradient(1px 1px at 22% 68%, rgba(232,201,138,0.5), transparent 60%),
    radial-gradient(2px 2px at 38% 32%, rgba(220,160,70,0.45), transparent 60%),
    radial-gradient(1px 1px at 55% 82%, rgba(232,201,138,0.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 12%, rgba(220,160,70,0.55), transparent 60%),
    radial-gradient(1px 1px at 82% 55%, rgba(232,201,138,0.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 92% 78%, rgba(220,160,70,0.5), transparent 60%),
    radial-gradient(1px 1px at 12% 92%, rgba(232,201,138,0.45), transparent 60%),
    radial-gradient(1px 1px at 48% 48%, rgba(220,160,70,0.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 28%, rgba(232,201,138,0.5), transparent 60%),
    radial-gradient(1px 1px at 5% 45%, rgba(220,160,70,0.35), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 62%, rgba(232,201,138,0.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 5%, rgba(220,160,70,0.5), transparent 60%),
    radial-gradient(1px 1px at 88% 40%, rgba(232,201,138,0.4), transparent 60%),
    radial-gradient(2.2px 2.2px at 15% 55%, rgba(220,160,70,0.4), transparent 60%),
    radial-gradient(1px 1px at 44% 18%, rgba(232,201,138,0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 72% 88%, rgba(220,160,70,0.45), transparent 60%),
    radial-gradient(1px 1px at 95% 22%, rgba(232,201,138,0.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 3% 78%, rgba(220,160,70,0.4), transparent 60%),
    radial-gradient(1px 1px at 60% 8%, rgba(232,201,138,0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 35% 72%, rgba(220,160,70,0.35), transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(232,201,138,0.35), transparent 60%);
  background-repeat: repeat;
  background-size: 340px 340px, 520px 520px, 260px 260px;
  animation: derive-paillettes 60s linear infinite;
}

/* Habillage doré dans les marges gauche/droite — même visuel que la page couverture
   du guide de candidature : filets de lumière délicats à gauche, filet de paillettes
   qui défile à droite. Confiné aux marges pour ne jamais traverser le texte. */
@keyframes derive-filet-gauche {
  0%, 100% { background-position: 50% 0%; }
  50%      { background-position: 50% -18%; }
}

@keyframes derive-filet-droit {
  0%   { background-position-y: 0; }
  100% { background-position-y: -888px; }
}

html::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 170px;
  height: 100vh;
  pointer-events: none;
  z-index: 996;
  opacity: 0.8;
  background-image: url("../images/side-left.png");
  background-repeat: no-repeat;
  background-size: 100% 130%;
  background-position: 50% 0%;
  animation: derive-filet-gauche 34s ease-in-out infinite;
}

html::after {
  content: "";
  position: fixed;
  top: 0; right: 0;
  width: 150px;
  height: 100vh;
  pointer-events: none;
  z-index: 996;
  opacity: 0.85;
  background-image: url("../images/side-right.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
  animation: derive-filet-droit 40s linear infinite;
}

@keyframes scintiller {
  0%, 100% { opacity: 0.15; transform: scale(0.75) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(8deg); }
}

.etincelle {
  position: absolute;
  pointer-events: none;
  color: var(--or-clair);
  text-shadow: 0 0 8px rgba(220, 160, 70, 0.85), 0 0 16px rgba(220, 160, 70, 0.4);
  animation: scintiller 3.4s ease-in-out infinite;
  line-height: 1;
  user-select: none;
}

/* Rayons dorés diagonaux dans les grands titres (hero) */
.hero, .page-form-hero {
  position: relative;
  overflow: hidden;
}

.hero::before, .hero::after,
.page-form-hero::before, .page-form-hero::after {
  content: "";
  position: absolute;
  top: -20%;
  width: 1px;
  height: 160%;
  background: linear-gradient(180deg, rgba(220, 160, 70, 0.4), transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.hero::before, .page-form-hero::before { left: 6%; transform: rotate(13deg); }
.hero::after, .page-form-hero::after { right: 8%; transform: rotate(-13deg); }

.hero > *, .page-form-hero > * { position: relative; z-index: 1; }

/* ---------- Critères d'évaluation (détails par catégorie) ---------- */

.carte-categorie .criteres-details {
  margin-top: 16px;
  border-top: 1px solid var(--ligne);
  padding-top: 12px;
  text-align: left;
}

.carte-categorie summary {
  cursor: pointer;
  color: var(--or);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  list-style: none;
}

.carte-categorie summary::-webkit-details-marker { display: none; }

.carte-categorie summary::after {
  content: "＋ voir les critères d'évaluation";
}

.carte-categorie details[open] summary::after {
  content: "－ masquer les critères";
}

.liste-criteres {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.liste-criteres li {
  display: flex;
  justify-content: space-between;
  text-align: left;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--gris-texte);
  padding: 6px 0;
  border-bottom: 1px dashed var(--ligne);
}

.liste-criteres li:last-child { border-bottom: none; }

.liste-criteres .pts {
  color: var(--or-clair);
  font-weight: 700;
  white-space: nowrap;
}

.carte-categorie .bouton {
  margin-top: 18px;
  width: 100%;
  text-align: center;
  padding: 11px 20px;
  font-size: 0.76rem;
}

/* ---------- Lauréat de l'an dernier / vidéo ---------- */

.rappel-laureat {
  max-width: 780px;
  margin: 0 auto 50px;
  background: var(--carte);
  border: 1px solid var(--or);
  border-radius: 8px;
  padding: 30px 28px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.rappel-laureat img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.rappel-laureat .suptitre {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--or);
  display: block;
  margin-bottom: 6px;
}

.rappel-laureat h3 {
  font-family: var(--font-titre);
  color: var(--blanc-casse);
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.rappel-laureat p { color: var(--gris-texte); font-size: 0.9rem; margin: 0; }

.rappel-laureat-liens {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px !important;
}

img.rappel-laureat-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 0;
  flex-shrink: 0;
}

.rappel-laureat-liens a {
  color: var(--or-clair);
  font-size: 0.85rem;
  text-decoration: underline;
}

.video-conteneur {
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ligne);
  background: var(--carte);
}

.video-conteneur iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Partenaires ---------- */

.grille-partenaires {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.carte-partenaire {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 26px 22px;
  text-align: center;
}

.carte-partenaire.principal {
  border-color: var(--or);
  grid-column: 1 / -1;
  padding: 40px 30px;
}

.carte-partenaire .etiquette {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--or);
  display: block;
  margin-bottom: 10px;
}

.carte-partenaire h3 {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
}

.carte-partenaire h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--or);
  margin: 10px auto 0;
}

.carte-partenaire .logo-categorie {
  max-width: 130px;
  max-height: 56px;
  object-fit: contain;
  margin: 4px auto 12px;
  display: block;
}

.carte-partenaire.principal .logo-categorie {
  max-width: 220px;
  max-height: 90px;
  margin: 10px auto 14px;
}

.carte-partenaire p { color: var(--gris-texte); font-size: 0.85rem; margin: 0; }

.carte-partenaire.disponible {
  border-style: dashed;
}

.carte-partenaire.commandite {
  background: linear-gradient(160deg, rgba(220, 160, 70, 0.18), rgba(232, 201, 138, 0.06) 65%, var(--carte) 100%);
  border-color: var(--or-clair);
}

.carte-partenaire .logo-partenaire {
  max-width: 220px;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 14px;
}

.carte-partenaire.principal .logo-partenaire {
  max-width: 320px;
  max-height: 90px;
}

.carte-partenaire a.lien-partenaire-logo {
  display: inline-block;
  transition: opacity 0.2s ease;
}

.carte-partenaire a.lien-partenaire-logo:hover {
  opacity: 0.8;
}

.carte-partenaire a.lien-partenaire-logo .logo-partenaire {
  margin-bottom: 0;
}

.carte-partenaire a.lien-partenaire {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--or-clair);
}

.palier-titre {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--gris-texte);
  text-align: center;
  margin: 40px 0 16px;
}

.palier-titre:first-child { margin-top: 0; }

/* ---------- Récipiendaires 2026 ---------- */

.grille-recipiendaires {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.carte-recipiendaire {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 30px 24px;
  text-align: center;
}

.carte-recipiendaire .etiquette {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--or);
  display: block;
  margin-bottom: 10px;
}

.carte-recipiendaire h3 {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}

.recipiendaire-commandite {
  font-size: 0.78rem;
  color: var(--gris-texte);
  margin: 0 0 18px;
}

.recipiendaire-commandite strong { color: var(--or-clair); }

.cadre-photo-recipiendaire {
  width: 160px;
  height: 160px;
  margin: 0 auto 16px;
  border: 3px solid var(--or);
  border-radius: 10px;
  overflow: hidden;
  background: var(--noir-doux);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cadre-photo-recipiendaire img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cadre-photo-recipiendaire .placeholder-emoji {
  font-size: 2.4rem;
  opacity: 0.5;
}

.recipiendaire-nom-entreprise {
  font-family: var(--font-titre);
  color: var(--or-pale);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 4px 0 2px;
}

.recipiendaire-nom-personne {
  color: var(--gris-texte);
  font-size: 0.85rem;
  margin: 0 0 6px;
}

.recipiendaire-a-devoiler { padding: 16px 0 6px; }

.recipiendaire-a-devoiler .silhouette-a-venir {
  width: 44px;
  height: 44px;
  display: block;
  margin: 0 auto 12px;
  fill: var(--or-pale);
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(232, 201, 138, 0.5));
}

.recipiendaire-a-devoiler p {
  color: var(--gris-texte);
  font-size: 0.85rem;
  margin: 0;
}

.recipiendaire-finalistes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
  text-align: left;
}

.recipiendaire-finalistes-titre {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--or);
  margin-bottom: 6px;
}

.recipiendaire-finalistes p {
  color: var(--gris-texte);
  font-size: 0.82rem;
  margin: 0;
  white-space: pre-line;
}

/* ---------- Soirée / billets ---------- */

.deroulement {
  max-width: 680px;
  margin: 0 auto;
}

.etape-deroulement {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ligne);
}

.etape-deroulement:last-child { border-bottom: none; }

.etape-deroulement .heure {
  font-family: var(--font-titre);
  color: var(--or-clair);
  font-size: 1rem;
  min-width: 74px;
  flex-shrink: 0;
}

.etape-deroulement .detail { color: var(--gris-texte); font-size: 0.9rem; }
.etape-deroulement .detail strong { color: var(--blanc-casse); }

.bloc-billets {
  max-width: 560px;
  margin: 50px auto 0;
  background: var(--carte);
  border: 1px solid var(--or);
  border-radius: 8px;
  padding: 34px 30px;
  text-align: center;
}

.bloc-billets h3 { font-family: var(--font-titre); color: var(--or-clair); margin: 0 0 10px; }
.bloc-billets p { color: var(--gris-texte); font-size: 0.9rem; }

/* ---------- FAQ ---------- */

.liste-faq {
  max-width: 720px;
  margin: 0 auto;
}

.item-faq {
  border-bottom: 1px solid var(--ligne);
  padding: 18px 0;
}

.item-faq summary {
  cursor: pointer;
  font-family: var(--font-titre);
  color: var(--blanc-casse);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.item-faq summary::-webkit-details-marker { display: none; }
.item-faq summary::after { content: "＋"; color: var(--or); flex-shrink: 0; }
.item-faq details[open] summary::after { content: "－"; }
.item-faq[open] summary { color: var(--or-clair); }

.item-faq p {
  color: var(--gris-texte);
  font-size: 0.92rem;
  margin: 12px 0 0;
}

/* ---------- Contact ---------- */

.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.carte-contact {
  background: var(--carte);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 28px 24px;
  text-align: center;
}

.carte-contact .emoji { font-size: 1.6rem; margin-bottom: 10px; }
.carte-contact h3 { font-family: var(--font-titre); color: var(--or-clair); margin: 0 0 8px; font-size: 1.05rem; }
.carte-contact p { color: var(--gris-texte); font-size: 0.88rem; margin: 0; }

/* ---------- Nav responsive (plus de liens) ---------- */

@media (max-width: 900px) {
  .entete-interieur { flex-wrap: wrap; }
  nav.entete-nav { gap: 14px 18px; flex-wrap: wrap; justify-content: center; width: 100%; }
}

@media (max-width: 1100px) {
  html::before { width: 90px; opacity: 0.55; }
  html::after { width: 80px; opacity: 0.6; }
}

@media (max-width: 700px) {
  html::before, html::after { display: none; }
}