/* No Studio IA, dans le monde de Docs.
   Depuis le 3 novembre 2026, IA reprend docs.css tel quel (en-tête blanc, bleu nuit,
   onglets, filet, plans, synthé, plan de chaîne et parcours) et cette feuille ne garde
   que ce qu'il a en propre : une couleur par genre, les films à la place des personnes,
   la pastille du prix, les formats Paysage et Portrait, la grille verticale, la salle et
   l'entracte. Elle passe après docs.css et échappe, comme elle, à la rotation de teintes. */

/* Une couleur par onglet. L'ambre reste celle de tous les films. */
[data-rayon=recommandes]{--r:#FFFFFF}
[data-rayon=tous]{--r:#FFB000}
[data-rayon=series]{--r:#7BE08F}
[data-rayon=science-fiction]{--r:#5FD0F0}
[data-rayon=drame]{--r:#FF7A6B}
[data-rayon=comedie]{--r:#FFE14D}
[data-rayon=fantastique]{--r:#C2AAFF}
[data-rayon=experimental]{--r:#F0A8E0}
[data-rayon=romance]{--r:#F7B9C6}

body{overflow-x:clip}
:where(#app,#modal,#salle-ia) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:where(#app,#modal,#salle-ia) svg.plein{fill:currentColor;stroke:none}
.recherche svg{fill:none!important}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:3px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.secondary{background:none;border:1px solid var(--doux);color:var(--texte)}
.secondary:hover{background:var(--nuit-2)}
.primary:hover{background:var(--blanc);border-color:var(--blanc)}
.rayons{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}

/* --- La tête : la phrase, le format et le tirage. --- */
.ia-page .rayon-tete{align-items:center}
.commandes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.formats{display:flex;border:1px solid var(--trait);border-radius:3px;overflow:hidden}
.formats button{height:42px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;border:0;font-size:15px;font-weight:500;color:var(--texte);background:var(--nuit-2);cursor:pointer}
.formats button+button{border-left:1px solid var(--trait)}
.formats button:hover{background:var(--nuit-3)}
.formats button[aria-pressed=true]{background:var(--r);color:var(--encre)}
.formats svg{width:14px;height:14px}

/* --- Un film n'a pas de visage : le synthé garde le titre et l'auteur. --- */
.plan .synthe-nom{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.plan .resume{display:none}
@media (hover:hover){
  .plan:hover .synthe-fonction:has(.resume) .qui,.plan:focus-visible .synthe-fonction:has(.resume) .qui{display:none}
  .plan:hover .resume,.plan:focus-visible .resume{display:inline}
}
/* La preuve d'un prix, en haut à gauche, sur la même pastille que la durée. */
.plan-prix{position:absolute;z-index:1;top:10px;left:10px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 110px);padding:3px 9px 3px 7px;background:var(--nuit);color:var(--texte);border-radius:2px;font:600 14px/1.3 var(--titre)}
.plan-prix span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-prix svg{width:14px;height:14px;fill:var(--r)}

/* --- À l'affiche : le plan de chaîne de Docs. Le cadrage du catalogue vaut à toutes
   les tailles, parce que beaucoup de vignettes portent leur titre incrusté. --- */
.affiche .chaine-plan>img,.etape-image img{transform:scale(var(--zoom,1))}
.affiche .chaine-plan:hover>img{transform:scale(calc(var(--zoom,1) * 1.015))}
.affiche .chaine-plan.vertical>img{object-fit:contain;transform:none;background:#050A1F}
.affiche .synthe.grand .synthe-nom{font-size:clamp(30px,3.8vw,54px);white-space:normal}
.affiche .chaine-plan .plan-prix{top:12px;left:12px;max-width:min(60%,520px);font-size:16px;padding:5px 12px 5px 9px}
.affiche .chaine-plan .plan-prix svg{width:16px;height:16px}
.affiche .etape-texte small{text-transform:none;letter-spacing:0;font:500 13px/1.25 'Barlow',system-ui,sans-serif;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Une série de douze épisodes ne doit pas étirer le plan : son parcours défile. */
.affiche .chaine-parcours ol{max-height:clamp(240px,40vh,400px);overflow-y:auto;scrollbar-width:thin}
.affiche-info{padding:18px 0 4px}
.affiche-info p{margin:0;max-width:70ch;font-size:18px;line-height:1.45}
.chaine-actions .primary svg{width:16px;height:16px}
.chaine-tete:not(.guidee) .chaine-plan{border-radius:0 0 3px 3px}

/* --- Le vertical a sa grille : six portraits par rangée, synthé resserré. --- */
.plans.vertical-grille{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.plans.vertical-grille+.plans{margin-top:18px}
.plans+.plans.vertical-grille{margin-top:18px}
.plan.vertical{aspect-ratio:9/16}
.plan.vertical .synthe{bottom:12px}
.plan.vertical .synthe-nom{font-size:17px;padding:3px 9px 1px}
.plan.vertical .synthe-fonction{font-size:12.5px;padding:2px 9px}
.plan.vertical .plan-compte{font-size:13px;padding:2px 7px;top:8px;right:8px}
.plan.vertical .plan-prix{top:8px;left:8px;max-width:calc(100% - 70px);font-size:12.5px;padding:2px 7px 2px 5px}
.plans.vertical-grille.seul{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.plans.vertical-grille.seul .synthe-nom{font-size:21px}

.bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}
.bloc-tete h2{margin:0;font-size:30px;font-weight:600;line-height:1.1;color:var(--texte)}
.bloc-tete span{font-size:15px;color:var(--doux)}
/* Sous le présentoir, le choix du format accompagne la liste qu'il filtre. */
.collection-rayon .bloc-tete{align-items:center;flex-wrap:wrap}
.collection-rayon .bloc-tete .formats{margin-left:auto}
.sous-tete{margin-top:36px}
.rien-ia{margin:24px 0;font-size:18px;color:var(--doux)}
.lien-ia{padding:0;background:none;border:0;color:var(--texte);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* --- La salle : la lumière s'éteint pendant le film. --- */
#salle-ia{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050A1F;color:var(--texte);overflow:hidden}
#salle-ia[open]{display:flex;flex-direction:column}
#salle-ia::backdrop{background:#050A1F}
.salle-barre-ia{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px var(--marge)}
.salle-barre-ia b{display:block;font:700 24px/1.1 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.salle-barre-ia span{font-size:15px;color:var(--doux)}
.salle-actions{display:flex;gap:8px;flex:none}
.salle-actions button{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;background:none;border:1px solid var(--trait);border-radius:3px;color:var(--texte);font:600 15px 'Barlow',system-ui,sans-serif;cursor:pointer}
.salle-actions button:hover{border-color:var(--doux);background:var(--nuit-2)}
.salle-ecran-ia{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--marge)}
.salle-ecran-ia iframe,.salle-ecran-ia #player-mount,.salle-ecran-ia #official-player{display:block;width:100%;height:100%;border:0}
.salle-ecran-ia #player-mount{aspect-ratio:16/9;width:auto;height:auto;max-width:100%;max-height:100%;flex:1}
.salle-ecran-ia.portrait #player-mount{flex:none;aspect-ratio:9/16;height:100%}
.salle-pied-ia{flex:none;margin:0;padding:10px var(--marge);font-size:14px;color:var(--doux)}
.salle-pied-ia a{color:var(--texte)}

/* --- L'entracte : noter d'un geste, puis le trait mène au film suivant. --- */
#salle-ia.entracte-ia{background:var(--nuit)}
.entracte-grille{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:32px var(--marge);overflow:auto;border-top:6px solid #FFB000}
.entracte-grille.avec-suite{display:grid;grid-template-columns:minmax(0,max-content) minmax(72px,1fr) minmax(0,min(460px,38vw));grid-template-rows:auto auto auto;align-content:center;gap:12px 0}
.entracte-avant{grid-area:1/3;margin:0;font:600 21px/1.1 var(--titre);color:var(--doux)}
.entracte-film{grid-area:2/1;align-self:center;max-width:46vw;padding-right:20px}
.entracte-trait{grid-area:2/2;align-self:center;position:relative;height:3px}
.entracte-carte{grid-area:2/3}
.entracte-note{grid-area:3/1/3/3;padding-right:32px}
.entracte-bas{grid-area:3/3}
.entracte-trait i{display:block;height:3px;background:#FFB000;transform-origin:right;animation:consomme var(--duree) linear forwards}
.entracte-trait.arrete i{animation-play-state:paused}
@keyframes consomme{to{transform:scaleX(0)}}
@keyframes consomme-haut{to{transform:scaleY(0)}}
.entracte-grille h2{margin:0;font:700 clamp(38px,5vw,70px)/1.05 var(--titre);text-transform:uppercase;letter-spacing:.01em}
.entracte-auteur{margin:8px 0 0;font-size:19px;color:var(--doux)}
.gestes{display:flex;flex-wrap:wrap;gap:6px}
.gestes button{height:44px;padding:0 16px;background:var(--nuit-2);border:0;border-radius:3px;color:var(--texte);font:600 16px 'Barlow',system-ui,sans-serif;cursor:pointer}
.gestes button:hover{background:var(--nuit-3)}
.gestes button[aria-pressed="true"]{background:#FFB000;color:var(--encre)}
.entracte-etat{min-height:24px;margin:14px 0 0;font-size:16px;color:var(--doux)}
.entracte-carte{display:block}
.entracte-carte.vertical{width:min(190px,100%)}
.entracte-compte{margin:0 0 10px;font:700 48px/1 var(--titre);font-variant-numeric:tabular-nums}
.entracte-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.entracte-actions .primary{--r:#FFB000;background:#FFB000;border-color:#FFB000;color:var(--encre)}
.entracte-fin{margin:0 0 16px;font-size:19px;line-height:1.4}

@media(max-width:1180px){
  .rayons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rayons [data-rayon=recommandes]{grid-column:1/-1}
  .rayons a{border-radius:3px}
  .ia-page.docs-page>:first-child{border-top:0}
  .plans.vertical-grille,.plans.vertical-grille.seul{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:860px){
  .ia-page .rayon-tete{align-items:stretch}
  .commandes{justify-content:flex-start}
  .plans.vertical-grille,.plans.vertical-grille.seul{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .salle-barre-ia{flex-wrap:wrap}
  .entracte-grille.avec-suite{display:flex;flex-direction:column;justify-content:flex-start;gap:18px}
  .entracte-film{align-self:flex-start;max-width:none;padding:0}
  .entracte-note{padding:0}
  .entracte-trait{order:1;align-self:flex-start;flex:none;width:3px;height:44px;margin:-8px 0 -8px 20px}
  .entracte-trait i{width:3px;height:100%;transform-origin:bottom;animation-name:consomme-haut}
  .entracte-avant{order:2}
  .entracte-carte{order:3}
  .entracte-bas{order:4}
}
@media(max-width:560px){
  .rayons a{font-size:17px}
  .formats{flex:1}
  .formats button{flex:1;justify-content:center;padding:0 8px}
  .formats svg{display:none}
  .collection-rayon .bloc-tete .formats{flex:1 1 100%;margin-left:0}
  .plans.vertical-grille,.plans.vertical-grille.seul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-prix{font-size:13px}
  .gestes button{flex:1 1 calc(50% - 4px)}
}
@media (prefers-reduced-motion:reduce){
  .entracte-trait i{animation:none}
}