/* AI STUDIO · le strict complement a landing.css.
 *
 * Six classes, pas une de plus. Tout le reste des pages /video-ia,
 * /clip-musical-ia et /publicite-video-ia reutilise le systeme de composants
 * des landings (.wrap, .kick, .lead, .cm-tiers, .cm-tier, .cm-tier--pop,
 * .cm-steps, .cm-step). En creer un second aurait produit la divergence que ce
 * projet corrige sans arret : matos.css et build.css sont deja deux copies du
 * meme systeme qui ont fini par ne plus dire la meme chose.
 *
 * Le brief demande « premium, cinematographique, editorial, dark » et interdit
 * le look SaaS, les degrades generiques et les cliches IA. Le verrou DA du
 * projet dit la meme chose. On ne cree donc pas une seconde identite : on
 * assombrit des SECTIONS, avec le meme rouge, la meme typo et les memes aplats
 * francs. Aucun degrade, aucun arrondi, aucune ombre coloree.
 */

.ai-pour { color: var(--gray-txt); font-size: .92rem; line-height: 1.55; margin: 6px 0 2px; }
.ai-duree { font-family: var(--fa); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
            color: var(--red); font-weight: 600; margin: 0 0 14px; }

/* Section sombre. L'inversion est complete et explicite : sans redefinir
   --gray-txt, les paragraphes resteraient en gris fonce sur du noir, defaut
   exactement identique a celui trouve dans les emails le 2026-09-24. */
.ai-sombre { background-color: #111111; color: #F2F2F2; border-top: 4px solid var(--red); }
.ai-sombre h2 { color: #FFFFFF; }
/* LE KICKER ROUGE, ECLAIRCI SUR L'APLAT NOIR.
 *
 * #AE0000 sur #111111 donne 2,52:1, donc illisible : c'est EXACTEMENT le
 * defaut trouve dans les emails le 2026-09-24, quelques heures plus tot, et
 * mesure ici avant la mise en ligne plutot qu'apres. Le rouge ne disparait
 * pas, il s'eclaircit, comme --red-ink le fait deja ailleurs sur le site.
 * L'aplat rouge des boutons, lui, ne bouge jamais : c'est la signature. */
.ai-sombre .kick { color: #FF6B6B; }
.ai-sombre .lead,
.ai-sombre .cm-step p { color: #B9B9B9; }
.ai-sombre .cm-step { background-color: #1A1A1A; border-color: #2E2E2E; }
.ai-sombre .cm-step h3 { color: #F2F2F2; }
.ai-sombre .cm-step-n { background-color: var(--red); color: #FFFFFF; }
.ai-sombre .btn-outline { border-color: #4A4A4A; color: #F2F2F2; }
.ai-sombre .btn-outline:hover { border-color: #FFFFFF; color: #FFFFFF; background-color: transparent; }

/* Tableau des options. Deux colonnes, filet fin, aucun fond alterne :
   l'aplat franc de la DA plutot que la rayure de tableau de gestion. */
.ai-options { width: 100%; border-collapse: collapse; margin-top: 18px; max-width: 640px; }
.ai-options-legende { text-align: left; color: var(--gray-txt); font-size: .92rem;
                      line-height: 1.55; margin-bottom: 14px; caption-side: top; }
.ai-options td { border-bottom: 1px solid var(--line); padding: 11px 0; font-size: .96rem; }
.ai-opt-prix { text-align: right; font-family: var(--fh); font-weight: 800; color: var(--red); white-space: nowrap; }

/* ── LE BRIEF ────────────────────────────────────────────────────────────────
 * Le formulaire est entierement dans le HTML et le script ne fait que le
 * decouper en etapes. Ces regles doivent donc tenir DANS LES DEUX cas : avec
 * script, une etape a la fois ; sans script, tout a la suite. Aucune ne cache
 * quoi que ce soit par defaut, seul l'attribut `hidden` le fait.
 */
.ai-brief { max-width: 620px; }
.ai-etape { border-left: 3px solid var(--red); padding-left: 20px; margin-bottom: 26px; }
.ai-etape[hidden] { display: none; }
.ai-etape h2 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); margin-bottom: 8px; }
.ai-etape h2:focus { outline: 2px solid var(--red); outline-offset: 4px; }

.ai-champ { display: block; margin: 0 0 16px; }
.ai-champ label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.ai-champ input, .ai-champ select, .ai-champ textarea {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #CFCFCF;
  font: inherit; font-size: .96rem; color: var(--black); background-color: #FFFFFF;
}
.ai-champ textarea { resize: vertical; min-height: 92px; }
.ai-champ input:focus, .ai-champ select:focus, .ai-champ textarea:focus {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red);
}

.ai-groupe { border: 0; padding: 0; margin: 0 0 18px; }
.ai-groupe legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.ai-opt { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; cursor: pointer; font-size: .94rem; }
.ai-opt input { margin-top: 3px; accent-color: var(--red); flex: none; }

.ai-case { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; cursor: pointer;
           font-size: .88rem; line-height: 1.5; color: var(--gray-txt); }
.ai-case input { margin-top: 3px; accent-color: var(--red); flex: none; }
.ai-case a { color: var(--red-ink, var(--red)); font-weight: 700; }

/* Champ-piege. Hors de l'ecran plutot que `display: none` : un automate lit la
   feuille de style, et un champ masque par `display` lui saute aux yeux. */
.ai-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ai-actions .btn[hidden] { display: none; }
.ai-statut { margin: 12px 0 0; font-size: .88rem; color: var(--gray-txt); min-height: 1.2em; }
.ai-statut--ko { color: var(--red-ink, var(--red)); font-weight: 700; }
.ai-note { margin-top: 16px; font-size: .8rem; line-height: 1.55; color: var(--gray-txt); }
.ai-recu { border-left: 3px solid var(--red); padding-left: 20px; }
.ai-recu h2:focus { outline: 2px solid var(--red); outline-offset: 4px; }

@media (max-width: 560px) {
  .ai-etape { padding-left: 14px; }
  .ai-actions .btn { flex: 1 1 100%; }
}

/* Avertissement d'ouverture. Il doit se lire comme une information, pas comme
   une alerte : on ne s'excuse pas d'etre honnete sur ce qui n'est pas pret. */
.ai-avis { border-left: 3px solid var(--red); padding: 10px 0 10px 16px; margin: 20px 0 24px;
           font-size: .94rem; line-height: 1.6; color: var(--gray-txt); max-width: 620px; }
.ai-attente { max-width: 420px; }
.ai-attente .btn { margin-top: 6px; }
.ai-sombre .ai-avis, .ai-sombre .ai-attente label { color: #B9B9B9; }
.ai-sombre .ai-champ label, .ai-sombre .ai-case span { color: #E8E8E8; }
.ai-sombre .ai-case a { color: #FF6B6B; }
.ai-sombre .ai-statut { color: #B9B9B9; }

/* Films et images d'etude de cas. Rapport d'aspect reserve : sans lui, la page
   saute au chargement de chaque visuel, et le CLS grimpe. */
.ai-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.ai-film { display: block; position: relative; line-height: 0; border-top: 3px solid var(--red); text-decoration: none; }
.ai-film img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.ai-film-titre { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
                 background-color: rgba(17, 17, 17, .82); color: #FFFFFF; font-family: var(--fh);
                 font-weight: 800; font-size: .84rem; line-height: 1.25; }
.ai-video { width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 78vh; display: block;
            background-color: #111111; margin-bottom: 26px; }
.ai-stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 22px 0; }
.ai-stills img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.ai-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ai-filtre { border: 1px solid var(--line); background-color: #FFFFFF; padding: 7px 14px; cursor: pointer;
             font: inherit; font-size: .8rem; font-weight: 700; color: var(--black); }
.ai-filtre[aria-pressed="true"] { background-color: var(--red); border-color: var(--red); color: #FFFFFF; }
.cm-wrap-etroit { max-width: 640px; }