/* Evenprod Sénégal : prototype de la landing page et des formulaires (16/10/2026). Aucun envoi réel. */
:root {
  /* 19/10 : mode clair et mode sombre, au choix du visiteur (bouton dans l'en-tête), sinon celui de son téléphone */
  --fond: #F2F1EE; --carte: #FAF9F7; --champ: #FDFDFB; --texte: #1F1E1D; --doux: #5B5956;
  --filet: #E0DED9; --bord: #7A7872; --puce: #EEECE7; --puce-bord: #D3D0CA; --vide: #E6E3DD;
  --nuit: #FBF9F6; --nuit-carte: #EFECE7; --sur-nuit: #1F1E1D; --sur-nuit-doux: #4F4D4A; --porte-bord: #E0DED9;
  --accent: #922828; --accent-survol: #7A2020; --accent-nuit: #922828; --accent-nuit-clair: #922828; --nuit-filigrane: #ECE8E1; --sur-accent: #FFFFFF;
  --actif: #1F1E1D; --sur-actif: #F7F6F3; --succes: #2B6A3C; --succes-fond: #E0EDDC;
  --erreur: #B3261E; --focus: #1F1E1D; --rayon: 20px; --logo-clair: block; --logo-sombre: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121211; --carte: #1C1B1A; --champ: #262523; --texte: #EDEBE6; --doux: #B4B1AA;
    --filet: #3A3836; --bord: #8A8780; --puce: #2B2A28; --puce-bord: #4A4743; --vide: #33312E;
    --nuit: #0B0B0A; --nuit-carte: #262523; --sur-nuit: #F7F6F3; --sur-nuit-doux: #CFCCC6; --porte-bord: transparent;
    --accent: #C24545; --accent-survol: #AD3838; --accent-nuit: #C24545; --accent-nuit-clair: #E08A8A; --nuit-filigrane: #24211F;
    --actif: #EDEBE6; --sur-actif: #1C1B1A; --succes: #86D19A; --succes-fond: #1F3125;
    --erreur: #FF9482; --focus: #F2F0EB; --logo-clair: none; --logo-sombre: block; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fond: #121211; --carte: #1C1B1A; --champ: #262523; --texte: #EDEBE6; --doux: #B4B1AA;
    --filet: #3A3836; --bord: #8A8780; --puce: #2B2A28; --puce-bord: #4A4743; --vide: #33312E;
    --nuit: #0B0B0A; --nuit-carte: #262523; --sur-nuit: #F7F6F3; --sur-nuit-doux: #CFCCC6; --porte-bord: transparent;
    --accent: #C24545; --accent-survol: #AD3838; --accent-nuit: #C24545; --accent-nuit-clair: #E08A8A; --nuit-filigrane: #24211F;
    --actif: #EDEBE6; --sur-actif: #1C1B1A; --succes: #86D19A; --succes-fond: #1F3125;
    --erreur: #FF9482; --focus: #F2F0EB; --logo-clair: none; --logo-sombre: block; color-scheme: dark;
}
.logo-clair { display: var(--logo-clair) !important; }
.logo-sombre { display: var(--logo-sombre) !important; }
.theme { margin-left: 8px; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--sur-nuit-doux); background: transparent; color: var(--sur-nuit); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; }
.theme:hover { background: var(--nuit-carte); }
.theme .lune { display: var(--logo-clair); }
.theme .soleil { display: var(--logo-sombre); }
.porte { border: 1px solid var(--porte-bord); }
.porte-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: 'Maven Pro', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--accent-survol); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.nuit :focus-visible { outline-color: var(--sur-nuit); }
img { max-width: 100%; }
h1, h2 { text-wrap: balance; }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 16px; top: 16px; z-index: 10; background: var(--carte); padding: 10px 14px; }
.conteneur { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .conteneur { padding-inline: 32px; } }

/* boutons : un seul plein par zone */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 26px; font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; touch-action: manipulation; transition: background-color .15s ease; }
.btn-plein { background: var(--accent); color: var(--sur-accent); }
.btn-plein:hover { background: var(--accent-survol); color: var(--sur-accent); }
.nuit .btn-plein { background: var(--accent-nuit); }
.btn-contour { background: transparent; color: var(--texte); border-color: var(--texte); }
.btn-contour:hover { background: var(--puce); color: var(--texte); }
.btn-large { width: 100%; }
.lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nuit .lien { color: var(--sur-nuit); }

/* en-tête */
.nuit { background: var(--nuit); color: var(--sur-nuit); }
.barre { display: flex; align-items: center; gap: 16px 32px; padding-block: 16px; position: relative; z-index: 2; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--sur-nuit); text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .14em; min-height: 44px; }
.marque img { display: block; width: 48px; height: auto; }
.marque:hover { color: var(--sur-nuit); }
.menu { display: flex; gap: 0 26px; margin-left: auto; }
.menu a { color: var(--sur-nuit-doux); text-decoration: none; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
.menu a:hover { color: var(--sur-nuit); }
@media (max-width: 600px) { .menu { display: none; } }

/* ruban de maquette */
.ruban-maquette { margin: 0; background: var(--puce); color: var(--texte); font-size: 14px; text-align: center; padding: 6px 16px; }
.ruban-maquette a { color: var(--texte); font-weight: 500; display: inline-block; padding: 6px 0; }

/* une plein écran */
.une-pleine { position: relative; overflow: hidden; min-height: min(88dvh, 820px); display: flex; flex-direction: column; }
.une-pleine > .conteneur { width: 100%; }
.une-texte { position: relative; z-index: 2; margin-top: auto; padding-block: 48px 64px; display: flex; flex-direction: column; gap: 20px; }
.surtitre { margin: 0; color: var(--accent-nuit-clair); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.une-pleine h1 { margin: 0; font-size: clamp(44px, 9vw, 104px); line-height: .98; font-weight: 800; letter-spacing: -.02em; max-width: 11ch; }
.chapeau { margin: 0; font-size: clamp(17px, 2vw, 21px); color: var(--sur-nuit-doux); max-width: 600px; }
.une-actions { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; margin-top: 8px; }
.defile { position: absolute; inset: 92px 0 auto 0; z-index: 1; pointer-events: none; user-select: none; }
.defile-piste { display: flex; width: max-content; gap: 56px; animation: defile 60s linear infinite; }
.defile span { font-size: clamp(64px, 10vw, 120px); font-weight: 800; line-height: 1; white-space: nowrap; color: var(--nuit-filigrane); letter-spacing: -.02em; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; } }

/* preuve */
.preuve { padding: 0; background: var(--accent); color: var(--sur-accent); }
.preuve-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding-block: 28px; }
.chiffre { margin: 0; font-size: clamp(40px, 7vw, 72px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.chiffre-texte { margin: 0; font-size: clamp(16px, 2vw, 20px); max-width: 420px; }

/* sections */
section { padding-top: 88px; }
.preuve + section { padding-top: 72px; }
.titre { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.titre h2, .porte h2, .note-direction h2 { margin: 0; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.titre p { margin: 0; color: var(--doux); font-size: 17px; }

/* affiches typographiques */
.affiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .affiches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.affiche-titre { aspect-ratio: 2 / 3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: #FFFFFF; position: relative; overflow: hidden; }
.affiche-titre b { font-size: clamp(26px, 3.4vw, 38px); line-height: 1; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.affiche-titre .etat { position: absolute; top: 16px; left: 16px; font-size: 13px; font-weight: 700; background: rgba(0,0,0,.42); padding: 6px 10px; border-radius: 14px; }
.affiche-titre .saison { font-size: 15px; color: #F1E9E4; }
.t1 { background: #6E1F1F; }
.t2 { background: #2B2A28; }
.t3 { background: #1F3A34; }
.t4 { background: #3A2E1A; }
.aussi { margin: 20px 0 0; color: var(--doux); }

/* deux portes : comédiens, entreprises */
.porte { background: var(--nuit); color: var(--sur-nuit); border-radius: 28px; padding: 32px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 900px) { .porte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 56px; gap: 40px 56px; } }
.porte-texte { display: flex; flex-direction: column; gap: 14px; }
.porte-texte p { margin: 0; font-size: 17px; color: var(--sur-nuit-doux); }
.surtitre-clair { color: var(--accent-nuit-clair) !important; font-weight: 700; font-size: 14px !important; letter-spacing: .14em; text-transform: uppercase; }
.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
.etapes li::before { content: counter(e); grid-row: span 2; width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--sur-nuit-doux); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.etapes b { font-size: 18px; }
.etapes span { color: var(--sur-nuit-doux); }
.note-porte { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--sur-nuit-doux); }
.porte-claire { background: var(--carte); color: var(--texte); }
.porte-claire .porte-texte p { color: var(--doux); }
.porte-claire .surtitre-clair { color: var(--accent) !important; }
.offres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.offres li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--filet); font-size: 17px; font-weight: 500; }
.offres li:last-child { border-bottom: 1px solid var(--filet); }
.offres svg { flex-shrink: 0; color: var(--accent); }

/* note pour la direction */
.note-direction { border: 2px dashed var(--bord); border-radius: 28px; padding: 28px 22px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 768px) { .note-direction { padding: 48px; } }
.etiquette-maquette { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.apports { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; font-size: 17px; max-width: 760px; }
.apports b { display: block; }
.source { margin: 0; font-size: 14px; color: var(--doux); max-width: 760px; }

footer.nuit { margin-top: 96px; color: var(--sur-nuit-doux); }
.pied { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 44px 56px; font-size: 15px; }
@media (min-width: 768px) { .pied { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pied b { color: var(--sur-nuit); display: block; margin-bottom: 4px; }
.pied-logo { display: block; margin-bottom: 10px; }

/* formulaires */
.page-form { max-width: 560px; margin: 0 auto; padding: 16px 20px 40px; min-height: 100dvh; display: flex; flex-direction: column; }
.haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.haut .marque-form { font-weight: 700; letter-spacing: .04em; color: var(--texte); text-decoration: none; }
.etape { font-size: 14px; color: var(--doux); }
.progres { display: flex; gap: 6px; margin-top: 8px; }
.progres span { flex: 1; height: 4px; border-radius: 2px; background: var(--filet); }
.progres span.fait { background: var(--actif); }
.page-form h1 { margin: 24px 0 6px; font-size: 28px; line-height: 1.15; }
.page-form > p.chapo { margin: 0 0 20px; color: var(--doux); }
.panneau { background: var(--carte); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 14px; }
.panneau h2 { margin: 0; font-size: 17px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.champ input, .champ textarea, .champ select { font: inherit; font-size: 16px; font-weight: 400; color: var(--texte); background: var(--champ); border: 1px solid var(--bord); border-radius: 12px; min-height: 48px; padding: 10px 14px; width: 100%; min-width: 0; }
.champ textarea { resize: vertical; line-height: 1.4; }
.champ .aide { font-weight: 400; color: var(--doux); }
.champ .err { font-weight: 500; color: var(--erreur); }
.champ input[aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }
.rang2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { position: relative; }
.pastille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastille span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--puce-bord); background: var(--puce); font-size: 15px; }
.pastille input:checked + span { background: var(--actif); border-color: var(--actif); color: var(--sur-actif); }
.pastille input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choix-grand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choix-grand .pastille span { width: 100%; min-height: 56px; border-radius: 16px; padding: 8px 12px; line-height: 1.3; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.depot { position: relative; min-height: 140px; border-radius: 16px; border: 1px dashed var(--bord); background: var(--champ); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; font-size: 15px; font-weight: 500; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot small { font-weight: 400; color: var(--doux); font-size: 13px; }
.depot.ok { border-style: solid; background: var(--vide); }
.depot:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.case { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 15px; line-height: 1.45; }
.case input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--actif); }
.note { font-size: 13px; color: var(--doux); margin: 0; }
.bas { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.repli[hidden] { display: none !important; }
.alerte-err { border-radius: 14px; padding: 12px 14px; background: var(--carte); border: 2px solid var(--erreur); color: var(--texte); font-size: 15px; }
.fini { background: var(--carte); border-radius: var(--rayon); padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 24px; }
.fini .rond { width: 52px; height: 52px; border-radius: 26px; background: var(--succes-fond); color: var(--succes); display: flex; align-items: center; justify-content: center; }
.fini h1 { margin: 0; }
.fini p { margin: 0; color: var(--doux); }
.wa { margin-top: 18px; background: var(--filet); border-radius: 20px; padding: 16px; }
.wa p.titre-wa { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--doux); }
.bulle { max-width: 320px; background: var(--champ); border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.bulle p { margin: 0 0 8px; }
.bulle p:last-child { margin: 0; }
.demo { font-size: 13px; color: var(--doux); border: 1px dashed var(--bord); border-radius: 10px; padding: 8px 10px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* 19/10 : vitrine avec les vraies images (vignettes YouTube, affiche de Timis) ; titre dans un bandeau uni sous l'image, sans dégradé.
   Deux grandes en haut, trois en dessous ; toutes les images en 16:9 pour ne jamais couper le titre d'un épisode. */
.preuve-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-block:28px}
@media (max-width:700px){.preuve-grille{grid-template-columns:1fr}}
.vitrine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.vitrine li{grid-column:span 2;border-radius:16px;overflow:hidden;background:#1E1B1A;color:#F7F4EF;display:flex;flex-direction:column;min-width:0}
.vitrine li.vitrine-une,.vitrine li.vitrine-deux{grid-column:span 3}
.vitrine img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block}
.vitrine img.haut{object-position:center 12%}
.vitrine li div{padding:12px 16px 14px;display:flex;flex-direction:column;gap:2px}
.vitrine b{font-size:20px;font-weight:800}
.vitrine li.vitrine-une b,.vitrine li.vitrine-deux b{font-size:26px}
.vitrine span{font-size:14px;color:#D9D2CA}
@media (max-width:900px){.vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}.vitrine li{grid-column:span 1}.vitrine li.vitrine-une,.vitrine li.vitrine-deux{grid-column:span 2}}
@media (max-width:520px){.vitrine{grid-template-columns:1fr}.vitrine li,.vitrine li.vitrine-une,.vitrine li.vitrine-deux{grid-column:span 1}}
/* bouton de mode sur les formulaires (fond clair de la page, pas de bandeau sombre) */
.theme-form { border-color: var(--bord); color: var(--texte); margin-left: 12px; }
.theme-form:hover { background: var(--puce); }

/* bandeau des chiffres : rouge foncé dans les deux modes (contraste du texte blanc) */
.preuve { background: #922828 !important; color: #FFFFFF; }
/* 19/10 : logo sans « production audiovisuelle », le disque ep seul ; le mot à côté passe de temps en temps à SÉRIES puis MÉDIAS, et revient à SÉNÉGAL */
.marque-logo { position: relative; width: 44px; height: 44px; flex: none; }
.marque-logo img { position: absolute; inset: 0; width: 44px; height: 44px; transition: opacity .6s ease, transform .6s ease; }
.marque-logo .disque-em { opacity: 0; transform: rotate(-90deg) scale(.7); }
.marque.medias .disque-ep { opacity: 0; transform: rotate(90deg) scale(.7); }
.marque.medias .disque-em { opacity: 1; transform: none; }
.marque-mot { position: relative; display: inline-block; height: 1.3em; min-width: 7.2em; overflow: hidden; }
.marque-mot .mot { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(100%); transition: opacity .45s ease, transform .45s ease; white-space: nowrap; }
.marque-mot .mot.actif { opacity: 1; transform: none; }
.marque-mot .mot.part { opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .marque-logo img, .marque-mot .mot { transition: none; } }
/* les lettres du disque ep sont évidées : un rond blanc derrière, pour qu'elles restent blanches en mode sombre */
.marque-logo::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #FFFFFF; transition: opacity .6s ease; }
.marque.medias .marque-logo::before { opacity: .9; }
.saut:focus { min-height: 44px; display: inline-flex; align-items: center; }
/* pied de page : vrais liens vers les comptes, cibles de 44 px */
.pied .reseaux { display: flex; flex-wrap: wrap; gap: 0 14px; }
.pied .reseaux a { color: var(--sur-nuit); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.pied .reseaux { gap: 8px 14px; }
.pied .reseaux a { min-width: 44px; justify-content: center; }