/* ============================================================
   TALENT'ELLES — Charte graphique « épurée & chic »
   Or des PDF (#C6952C), ivoire, charbon — serif éditorial
   ============================================================ */

:root {
  --or: #C6952C;            /* or des supports PDF */
  --or-fonce: #A87B1F;
  --or-pale: #F3E9D4;
  --ivoire: #FCFBF7;
  --creme: #F7F3EA;
  --charbon: #1E1B16;       /* charbon des supports PDF */
  --encre: #38352E;
  --texte-doux: #55524A;
  --gris-doux: #8C8574;
  --ligne: #E7E1D3;
  --ligne-sombre: #2E2B24;
  --police-serif: 'Cormorant Garamond', serif;
  --police-sans: 'Jost', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--police-sans);
  font-weight: 300;
  color: var(--encre);
  background: var(--ivoire);
  line-height: 1.85;
  font-size: 18px;
}

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

/* ---------- Typographie ---------- */

h1, h2, h3 { font-family: var(--police-serif); font-weight: 300; line-height: 1.12; color: var(--charbon); }

h1 { font-size: clamp(4rem, 9vw, 7.5rem); }
h2 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
h3 { font-size: 1.7rem; font-weight: 400; }

em, .italique { font-style: italic; }
.dore { color: var(--or); }

.etiquette {
  font-family: var(--police-sans);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: .82rem;
  font-weight: 400;
  color: var(--or);
}

.chapo { font-size: 1.2rem; color: var(--texte-doux); }

.num {
  font-family: var(--police-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--or);
  font-size: 1.3rem;
}

/* ---------- Logo (wordmark TALENT✦ELLES) ---------- */

.logo {
  font-size: 1.45rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--charbon);
}
.logo .talent {
  font-family: var(--police-sans);
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--or);
}
.logo .etoile {
  color: var(--or);
  font-size: .72em;
  vertical-align: .45em;
  margin: 0 .02em 0 .06em;
  font-style: normal;
}
.logo .elles {
  font-family: var(--police-serif);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--charbon);
}
.fond-sombre .logo .elles, footer .logo .elles { color: var(--ivoire); }

/* Titre hero décliné du logo */
.titre-logo { text-transform: uppercase; }
.titre-logo .talent {
  font-family: var(--police-sans);
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--or);
}
.titre-logo .etoile {
  color: var(--or);
  font-size: .5em;
  vertical-align: .65em;
  margin: 0 .03em 0 .08em;
}
.titre-logo .elles {
  font-family: var(--police-serif);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--charbon);
}

/* ---------- Navigation ---------- */

header.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 251, 247, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

nav.menu { display: flex; align-items: center; gap: 2.8rem; }

nav.menu a {
  text-decoration: none;
  color: var(--encre);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 400;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
nav.menu a:hover, nav.menu a.actif { color: var(--or); border-color: var(--or); }

.burger { display: none; background: none; border: none; cursor: pointer; font-size: 1.6rem; color: var(--charbon); line-height: 1; }

/* ---------- Boutons & liens ---------- */

.bouton {
  display: inline-block;
  font-family: var(--police-sans);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  padding: 1.15rem 3rem;
  border: 1px solid var(--charbon);
  color: var(--charbon);
  background: transparent;
  cursor: pointer;
  transition: all .3s;
}
.bouton:hover { border-color: var(--or); color: var(--or); }

.bouton-noir { background: var(--charbon); color: var(--ivoire); }
.bouton-noir:hover { background: var(--or); border-color: var(--or); color: var(--ivoire); }

.bouton-ivoire { border-color: var(--ivoire); color: var(--ivoire); }
.bouton-ivoire:hover { background: var(--or); border-color: var(--or); color: var(--ivoire); }

.lien {
  display: inline-block;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-weight: 400;
  text-decoration: none;
  color: var(--charbon);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--charbon);
  transition: color .25s, border-color .25s;
}
.lien:hover { color: var(--or); border-color: var(--or); }
.lien.or { color: var(--or); border-color: var(--or); }
.lien.or:hover { color: var(--or-fonce); border-color: var(--or-fonce); }

/* ---------- Sections ---------- */

section { padding: 7rem 2.5rem; }
.contenu { max-width: 1280px; margin: 0 auto; }
.contenu-etroit { max-width: 860px; margin: 0 auto; }
.centre { text-align: center; }

.fond-creme { background: var(--creme); }
.fond-sombre { background: var(--charbon); color: #D8D2C4; }
.fond-sombre h1, .fond-sombre h2, .fond-sombre h3 { color: var(--ivoire); }
.fond-sombre .chapo { color: #B7B0A0; }

.filet { border: none; border-top: 1px solid var(--ligne); }

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

.hero { padding: 0; border-bottom: 1px solid var(--ligne); }
.hero-centre { max-width: 900px; margin: 0 auto; text-align: center; padding: 7.5rem 2.5rem 7rem; }
.hero-centre .chapo { max-width: 34rem; margin: 2.5rem auto 0; }
.hero-actions { margin-top: 3.5rem; display: flex; gap: 3rem; justify-content: center; align-items: center; flex-wrap: wrap; }

.hero-grille {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 5rem;
  padding: 6rem 2.5rem;
}
.hero-grille .chapo { max-width: 30rem; margin-top: 2rem; }
.hero-grille .hero-actions { justify-content: flex-start; }

/* ---------- Bande statistiques ---------- */

.bande-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ligne);
}
.stat {
  padding: 2.4rem 3.5rem;
  text-align: center;
  border-right: 1px solid var(--ligne);
}
.stat:last-child { border-right: none; }
.stat .valeur { font-family: var(--police-serif); font-weight: 300; font-size: 2.3rem; color: var(--charbon); line-height: 1.2; }
.stat .legende { text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--gris-doux); }

/* ---------- Placeholders photo (à remplacer par vos photos) ---------- */

.photo {
  background: var(--or-pale);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .35em;
  text-align: center;
  overflow: hidden;
  min-height: 300px;
  border-radius: 0 0 0 110px; /* arrondi signature des supports PDF */
}
.photo.haute { min-height: 480px; }
.photo.inversee { border-radius: 0 110px 0 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bande image pleine largeur ---------- */

.image-pleine { padding: 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.image-pleine img { width: 100%; height: clamp(280px, 44vw, 520px); object-fit: cover; display: block; }

/* ---------- Galerie (mosaïque de moments) ---------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 3.5rem;
}
.galerie img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--ligne);
}
.galerie img:first-child { border-radius: 0 0 0 70px; }
.galerie img:last-child { border-radius: 0 70px 0 0; }

@media (max-width: 900px) {
  .galerie { grid-template-columns: 1fr 1fr; }
}

/* ---------- Grilles ---------- */

.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-top: 4rem; }

/* ---------- Colonnes à filet (piliers, mission…) ---------- */

.colonne { border-top: 1px solid var(--charbon); padding-top: 1.8rem; }
.colonne h3 { margin: .6rem 0 .9rem; }
.colonne p { font-size: 1rem; color: var(--texte-doux); }

/* ---------- Citation ---------- */

.citation {
  font-family: var(--police-serif);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  max-width: 860px;
  margin: 0 auto;
  color: var(--charbon);
}
.fond-sombre .citation { color: var(--ivoire); }

/* ---------- Valeurs ---------- */

.ligne-valeurs {
  font-family: var(--police-serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 2.1;
  max-width: 960px;
  margin: 2.5rem auto 0;
  color: var(--encre);
}
.ligne-valeurs .sep { color: var(--or); padding: 0 .8rem; }

/* ---------- Infos clés événement ---------- */

.infos-cles { display: flex; gap: 5rem; flex-wrap: wrap; margin-top: 3rem; }
.info-cle .legende { text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--gris-doux); margin-bottom: .4rem; }
.info-cle .valeur { font-family: var(--police-serif); font-size: 1.45rem; font-weight: 400; color: var(--charbon); }
.fond-sombre .info-cle .valeur, .fond-creme .info-cle .valeur { color: inherit; }

/* ---------- Programme / timeline ---------- */

.timeline { border-left: 1px solid var(--or); margin: 3rem 0 0 .4rem; padding-left: 2.4rem; display: grid; gap: 2rem; }
.timeline .etape { position: relative; }
.timeline .etape::before {
  content: "";
  position: absolute;
  left: calc(-2.4rem - 4.5px);
  top: .6rem;
  width: 8px; height: 8px;
  background: var(--or);
  border-radius: 50%;
}
.timeline .heure {
  font-family: var(--police-serif);
  font-style: italic;
  color: var(--or);
  font-size: 1.35rem;
  font-weight: 400;
  margin-right: .6rem;
}

/* ---------- Intervenantes ---------- */

.intervenante { border-top: 1px solid var(--charbon); padding-top: 1.8rem; }
.intervenante h3 { margin: 0 0 .3rem; }
.intervenante .theme { text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; color: var(--or); font-weight: 400; }
.intervenante .devise { font-family: var(--police-serif); font-style: italic; font-size: 1.25rem; margin-top: .9rem; color: var(--texte-doux); }
.intervenante .points { font-size: .95rem; color: var(--gris-doux); margin-top: .7rem; }

/* ---------- Formulaires ---------- */

.formulaire {
  background: var(--ivoire);
  border: 1px solid var(--ligne);
  padding: 3.5rem;
}
.fond-sombre .formulaire { border-color: var(--ligne-sombre); background: var(--charbon); }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.champ { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.champ.large { grid-column: 1 / -1; }

.champ label {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .72rem;
  font-weight: 400;
  color: var(--gris-doux);
}

.champ input, .champ select, .champ textarea {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  font-family: var(--police-sans);
  font-weight: 300;
  font-size: 1.05rem;
  padding: .6rem 0;
  border: none;
  border-bottom: 1px solid var(--charbon);
  background: transparent;
  color: var(--encre);
  outline: none;
  border-radius: 0;
  transition: border-color .25s;
}
.fond-sombre .champ input, .fond-sombre .champ select, .fond-sombre .champ textarea {
  border-bottom-color: #6E6858;
  color: var(--ivoire);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-bottom-color: var(--or); }
.fond-sombre .champ select option { color: var(--encre); background: var(--ivoire); }

.formulaire .bouton { margin-top: 2.8rem; width: 100%; }

.message-succes {
  display: none;
  border: 1px solid var(--or);
  color: var(--or);
  padding: 1.2rem 1.5rem;
  margin-top: 1.8rem;
  font-size: .95rem;
  letter-spacing: .05em;
  text-align: center;
}
.message-succes.visible { display: block; }

/* ---------- Avis / notation ---------- */

.etoiles { display: flex; gap: .4rem; font-size: 2rem; cursor: pointer; user-select: none; }
.etoiles .etoile { color: var(--ligne); transition: color .15s; }
.fond-creme .etoiles .etoile { color: #DDD5C2; }
.etoiles .etoile:hover { color: var(--or-pale); }
.etoiles .etoile.active { color: var(--or); }

.avis-liste { display: grid; gap: 2rem; margin-top: 3.5rem; }
.avis-carte { border-top: 1px solid var(--charbon); padding-top: 1.6rem; }
.avis-carte .avis-etoiles { color: var(--or); letter-spacing: .2em; margin-bottom: .4rem; font-size: 1.05rem; }
.avis-carte p { font-family: var(--police-serif); font-size: 1.25rem; font-style: italic; color: var(--texte-doux); }
.avis-carte .avis-nom { font-family: var(--police-sans); font-style: normal; text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--gris-doux); margin-top: .9rem; }
.avis-vide { text-align: center; color: var(--gris-doux); font-style: italic; margin-top: 2.5rem; }

.note-moyenne { text-align: center; margin-top: 3rem; }
.note-moyenne .grande-note { font-family: var(--police-serif); font-size: 3.2rem; font-weight: 300; color: var(--or); line-height: 1.1; }
.note-moyenne .detail { text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--gris-doux); }

/* ---------- Bandeau CTA ---------- */

.bandeau-cta { text-align: center; }
.bandeau-cta h2 { margin-bottom: 1.4rem; }
.bandeau-cta p { max-width: 620px; margin: 0 auto 2.8rem; }

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

footer { background: var(--charbon); color: #B7B0A0; padding: 5rem 2.5rem 2.5rem; }
.footer-grille {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
}
footer .logo { color: var(--ivoire); }
footer .bloc-titre { text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; color: var(--gris-doux); margin-bottom: 1rem; }
footer a { color: #B7B0A0; text-decoration: none; transition: color .25s; }
footer a:hover { color: var(--or); }
footer p { font-size: .95rem; line-height: 2.1; }
.footer-bas {
  max-width: 1280px;
  margin: 3.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne-sombre);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: #6E6858;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  body { font-size: 17px; overflow-x: clip; }
  section { padding: 4.5rem 1.5rem; }

  h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }

  .hero-centre { padding: 4.5rem 1.5rem 4rem; }
  .hero-grille { padding: 3.5rem 1.5rem; }
  .hero-actions { gap: 1.8rem; }

  .etiquette { letter-spacing: .24em; font-size: .76rem; }
  .bouton { padding: 1rem 1.8rem; letter-spacing: .18em; max-width: 100%; }
  .lien { letter-spacing: .2em; }

  .photo { border-radius: 0 0 0 60px; min-height: 240px; }
  .photo.haute { min-height: 340px; }
  .photo.inversee { border-radius: 0 60px 0 0; }

  .bande-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .stat { border-right: none; padding: 1.5rem 1rem; }
  .stat:nth-child(odd) { border-right: 1px solid var(--ligne); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--ligne); }

  .formulaire { padding: 2.2rem 1.4rem; }
  .infos-cles { gap: 2rem; }
  .hero-grille, .grille-2 { grid-template-columns: 1fr; gap: 3rem; }
  .grille-3 { grid-template-columns: 1fr; gap: 3rem; }
  .champs { grid-template-columns: 1fr; }
  .footer-grille { flex-direction: column; gap: 2.5rem; }

  nav.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ivoire);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--ligne);
  }
  nav.menu.ouvert { display: flex; }
  nav.menu a { padding: .9rem 1.6rem; width: 100%; border-bottom: none; }
  .burger { display: block; }
}