/* No Studio Courts : le tourniquet, dans le monde de Docs.
   Depuis le 3 novembre 2026, Courts reprend docs.css tel quel (en-tête blanc, bleu nuit,
   onglets, filet, plans et synthé) et cette feuille ne garde que ce qu'il a en propre :
   les huit collections et leurs couleurs, les couvertures du présentoir, la liste de la
   collection, la quatrième de couverture, la salle et l'entracte. Elle passe après
   docs.css et échappe, comme elle, à la rotation de teintes. */

/* Une couleur par collection : elle remplit l'onglet ouvert, le filet, le bandeau du
   réalisateur, le bouton principal et le focus, comme la couleur d'un rayon de Docs. */
[data-c]{--blue:var(--r)}
[data-c=foyers]{--r:#8FB0FF}
[data-c=rire]{--r:#F2C230}
[data-c=effroi]{--r:#FF5A3C}
[data-c=rencontres]{--r:#F7B9C6}
[data-c=futur]{--r:#4FD8C4}
[data-c=crayon]{--r:#B4E26E}
[data-c=avif]{--r:#FF9A4D}
[data-c=encre]{--r:#B9A3FF}
[data-c=pour-vous]{--r:#FFFFFF}
/* Recommandés mêle toutes les collections : les tris ne la concernent pas. */
.presentoir[data-c=pour-vous] :is(.tris,.tri-menu){visibility:hidden}

body{overflow-x:clip}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(#app,#modal,#quatrieme,#salle) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:where(#app,#modal,#quatrieme,#salle) svg.plein{fill:currentColor;stroke:none}
.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)}

/* --- Les collections : les onglets de Docs, une colonne par collection. --- */
/* Recommandés prend la largeur de son nom ; --n compte les collections qui suivent. */
.noms-faces{grid-template-columns:max-content repeat(var(--n,8),minmax(0,1fr))}
.noms-faces button{display:block;padding:12px 12px 10px;background:var(--nuit-2);border:0;border-radius:3px 3px 0 0;font:600 22px/1.1 var(--titre);color:var(--texte);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:background-color .15s,color .15s}
.noms-faces button:hover{background:var(--nuit-3)}
.noms-faces button[aria-current=true]{background:var(--r);color:var(--encre)}

/* --- La tête : la phrase de la collection, les tris, et le geste principal. --- */
.titre-collection p{margin:0;font-size:20px;line-height:1.4;max-width:62ch}
.commandes .sujets{margin:0}
.tri-menu{display:none}

/* --- Le présentoir : sa mécanique et ses faces sont dans docs.css, communes aux trois
   sites. Courts y pose ses couvertures de films et ses places libres. --- */

/* Le plan d'un film : celui de Docs, sans portrait, dans un bouton. */
.co{padding:0;border:0;font:inherit;text-align:left;cursor:pointer}
.co.plan{width:100%}
.co .synthe-nom{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.co.plan .resume{display:none}
@media (hover:hover){
  .co.plan:hover .synthe-fonction:has(.resume) .qui,.co.plan:focus-visible .synthe-fonction:has(.resume) .qui{display:none}
  .co.plan:hover .resume,.co.plan:focus-visible .resume{display:inline}
}
.co.sortie{visibility:hidden}
/* L'état se pose en haut à gauche, sur la même pastille que la durée. */
.co-marque{position:absolute;z-index:1;top:10px;left:10px;padding:3px 9px;background:var(--r);color:var(--encre);border-radius:2px;font:600 14px/1.3 var(--titre)}
.video-image .co-marque{top:8px;left:8px}
.co-marque.plan-raison{background:var(--blanc)}
/* Les vignettes d'Omeleto portent leur logo en bas de l'image : on recadre au-dessus. */
.logo-bas img{transform:scale(1.3)!important;transform-origin:50% 5%!important}

/* --- La collection sous le présentoir : les cartes vidéo de Docs. --- */
.cherche-collection input{height:42px;width:min(100%,300px);padding:0 12px;font-size:16px;color:var(--texte);background:var(--nuit-2);border:1px solid var(--trait);border-radius:3px}
.cherche-collection input:hover{border-color:var(--doux)}
.cherche-collection input::placeholder{color:var(--doux);opacity:1}
.annonce,.rien{margin:0 0 20px;font-size:16px;color:var(--doux);max-width:70ch}
.rayon-film{min-width:0}
.rayon-film[hidden]{display:none}
.co.carte{display:block;width:100%;background:none;color:var(--texte)}
.co.carte .video-image img{transition:transform .6s var(--sortie)}
.co.carte:hover .video-image img,.co.carte:focus-visible .video-image img{transform:scale(1.025)}
.carte-texte{display:block;padding-top:10px}
.carte-titre{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 0 4px;font:600 20px/1.2 var(--titre)}
.co.carte:hover .carte-titre{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.carte-qui{display:block;margin:0 0 4px;font-size:15px;color:var(--doux)}
.carte-resume{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:15px;line-height:1.4;color:var(--doux)}

/* --- La quatrième de couverture : le plan se retourne en fiche de Docs. --- */
#quatrieme{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden}
#quatrieme::backdrop{background:#050A1Fd9;animation:voile .45s ease-out both}
@keyframes voile{from{opacity:0}}
.livre-scene{display:grid;place-items:center;width:100%;height:100%;perspective:1800px;padding:16px;pointer-events:none}
.livre{--cw:min(760px,calc(100vw - 32px));--ch:min(calc(100dvh - 48px),760px);position:relative;width:var(--cw);height:var(--ch);transform:rotateY(180deg);transform-style:preserve-3d;pointer-events:auto}
.livre-avant,.livre-arriere{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.livre-avant .co{width:100%;height:100%;aspect-ratio:auto}
.livre-arriere{transform:rotateY(180deg);display:flex;flex-direction:column;background:var(--nuit-2);color:var(--texte);border-top:var(--r-trait) solid var(--r);border-radius:3px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 18px 48px -8px #050A1Fb0}
.livre-photo{position:relative;flex:none;aspect-ratio:16/9;max-height:52dvh;overflow:hidden;background:var(--nuit)}
.livre-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.livre-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0C1633a8 0%,#0C163300 46%)}
.livre-photo .synthe{z-index:1;bottom:20px}
.livre-photo .synthe-nom{font-size:clamp(26px,3.6vw,40px);padding:6px 18px 3px;white-space:normal}
.livre-photo .synthe-fonction{font-size:17px;padding:4px 18px}
#quatrieme .livre-auteurs{margin:18px 24px 0;font-size:17px;line-height:1.35;font-weight:500}
#quatrieme .livre-auteurs a,#salle .entracte-auteurs a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#quatrieme .livre-resume{margin:12px 24px 0;font-size:18px;line-height:1.45;max-width:65ch}
.livre-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 18px;margin:18px 24px 0;padding:14px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.livre-faits dt{font-size:14px;color:var(--doux)}
.livre-faits dd{margin:2px 0 0;font:600 17px/1.3 var(--titre);font-variant-numeric:tabular-nums}
.livre-actions{position:sticky;bottom:0;margin-top:auto;padding:16px 24px 20px;background:var(--nuit-2);display:flex;flex-wrap:wrap;gap:10px}
.livre-actions .primary{flex:1 1 220px}
.ferme{position:absolute;z-index:2;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;background:var(--blanc);border:0;border-radius:3px;color:var(--encre);cursor:pointer}
.ferme:hover{background:var(--r)}

/* --- La salle : la lumière baisse quand le film commence. --- */
#salle{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#050A1F;color:var(--texte);overflow:auto;animation:extinction 1s ease-out backwards}
#salle.allumee{background:var(--nuit);transition:background 1.2s ease-out}
#salle::backdrop{background:#050A1F;animation:voile .7s ease-out both}
@keyframes extinction{from{background:var(--nuit)}to{background:#050A1F}}
#salle:not(:has(.entracte)){display:flex;flex-direction:column}
.salle-barre{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--marge);min-height:64px}
.salle-film{min-width:0;display:flex;flex-direction:column}
.salle-film b{font:700 24px/1.1 var(--titre);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.salle-film span{font-size:15px;color:var(--doux)}
.salle-commandes{display:flex;gap:8px;flex:none}
.salle-commandes button{display:inline-flex;align-items:center;gap:8px;height:44px;max-width:300px;padding:0 13px;background:none;border:1px solid var(--trait);border-radius:3px;color:var(--texte);font:600 15px 'Barlow',system-ui,sans-serif;cursor:pointer}
.salle-commandes button:hover{border-color:var(--doux);background:var(--nuit-2)}
.salle-commandes button span{font-weight:400;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-quitte-salle] span{color:inherit!important}
.salle-ecran{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:0 var(--marge)}
#salle .official-player{width:min(100%,calc((100dvh - 150px) * var(--ratio,16/9)));aspect-ratio:var(--ratio,16/9);margin:0;background:#000;border:0;border-radius:0}
/* Le site est en sombre, le lecteur de la plateforme en clair : sans cette ligne, Chrome
   peint en blanc le fond de l'iframe partout où le film ne la remplit pas. */
#salle .official-player iframe{width:100%;height:100%;border:0;display:block;color-scheme:normal}
#salle-cadre:not(:has(.entracte)){flex:1;min-height:0;display:flex;flex-direction:column}
#salle-cadre:fullscreen{width:100vw;height:100vh;overflow:auto;background:#050A1F;color:var(--texte)}
#salle.allumee #salle-cadre:fullscreen{background:var(--nuit)}
#salle-cadre:fullscreen .salle-pied{display:none}
#salle-cadre:fullscreen .official-player{width:min(100%,calc((100dvh - 80px) * var(--ratio,16/9)))}
.salle-pied{flex:none;padding:8px var(--marge) 12px;font-size:14px;line-height:1.45;color:var(--doux)}
.salle-pied p{margin:0;max-width:110ch}
.salle-pied p::first-letter{text-transform:uppercase}
.salle-pied a{color:var(--texte)}
#player-status:empty{display:none}
#player-status{color:var(--texte);font-size:15px;margin-bottom:4px}

/* --- L'entracte : noter d'un geste, puis le film suivant s'annonce. --- */
.entracte{min-height:100dvh;border-top:6px solid var(--r);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(24px,5vw,72px);animation:lever .8s var(--sortie) both}
@keyframes lever{from{opacity:0;transform:translateY(14px)}}
.entracte p{margin:0}
.entracte-suite>p:first-child{font:600 21px/1.1 var(--titre);color:var(--doux)}
.entracte .lien{display:inline;padding:0;background:none;border:0;color:var(--texte);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.entracte h2{margin:0;font:700 clamp(38px,5vw,70px)/1.05 var(--titre);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.entracte-auteurs{margin-top:10px!important;font-size:19px;color:var(--doux)}
.tampons{display:flex;flex-wrap:wrap;gap:6px;margin-top:30px}
.tampons 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}
.tampons button:hover{background:var(--nuit-3)}
.tampons button[aria-pressed=true]{background:var(--r);color:var(--encre)}
.entracte-etat{min-height:24px;margin-top:12px!important;font-size:15px;color:var(--doux)}
.entracte-suite{display:grid;gap:12px;justify-items:start}
.entracte-couverture{--cw:clamp(240px,28vw,420px);--ch:calc(var(--cw) * 9 / 16);width:var(--cw)}
.entracte-couverture .co{width:var(--cw);height:var(--ch);aspect-ratio:auto;cursor:default}
.entracte-compte{font:700 48px/1 var(--titre);font-variant-numeric:tabular-nums}
.entracte-compte[hidden]{display:none}
.entracte-actions{display:flex;flex-wrap:wrap;gap:8px}

/* --- L'annuaire et la page d'un réalisateur. --- */
.annuaire li[hidden]{display:none}
.page-personne .retour{margin:0 0 8px}
.page-personne .retour a{display:inline-flex;align-items:center;gap:4px;color:var(--doux);font-size:15px}
.page-personne .retour a:hover{color:var(--texte)}
.page-personne .retour svg{width:16px;height:16px}
.filmographie h2{margin:0 0 16px;font-size:30px;font-weight:600}

@media(max-width:1180px){
  .noms-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
  .noms-faces [data-c=pour-vous]{grid-column:1/-1}
  .noms-faces button{border-radius:3px;font-size:21px;padding:11px 12px 9px}
  .presentoir.docs-page>:first-child{border-top:0}
}
@media(max-width:860px){
  .tris{display:none}
  .tri-menu{display:flex}
  .entracte{grid-template-columns:1fr;align-items:start}
}
@media(max-width:699px){
  .noms-faces{gap:4px}
  .noms-faces button{font-size:15px;padding:9px 6px 7px;text-overflow:clip}
  .titre-collection p{font-size:18px}
  .face .co-marque{top:4px;left:4px;font-size:11px;padding:0 5px}
  .salle-commandes button{padding:0 10px}
  .salle-commandes button span{display:none}
  .salle-film b{font-size:20px}
  .salle-barre{flex-wrap:wrap}
  .entracte{padding:24px 16px 40px}
  .tampons button{flex:1 1 calc(50% - 4px)}
  .entracte-couverture{--cw:min(100%,320px)}
  .livre-scene{padding:0;place-items:end center}
  .livre{--cw:100vw;--ch:94dvh}
  .livre-photo .synthe{bottom:10px}
  .livre-photo .synthe-nom{font-size:24px;padding:4px 12px 2px}
  .livre-photo .synthe-fonction{font-size:15px;padding:3px 12px}
  #quatrieme .livre-auteurs,#quatrieme .livre-resume,.livre-faits{margin-left:16px;margin-right:16px}
  .livre-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}