/* ==========================================================================
   WautoParc : le film de l'inspection (inc/film.php, assets/js/wa-film.js).

   Sans script : un ecran sombre, le vehicule entier et toutes ses familles allumees, puis la liste des huit
   familles. Avec le script (.est-vif) : une carte sombre, comme la table d'un monteur ; en haut, le voyant et le
   compteur ; l'ecran (de 260 a 430 px de haut au bureau, en 16/9 au telephone), sa legende ; dessous, la bande de huit images, la tete
   de lecture et la graduation des cinquante points, rouge a gauche de la tete. La liste reste aux lecteurs
   d'ecran.
   ========================================================================== */

.wa-root .wa-film{--film-trait:rgba(214,218,227,.66);--film-rouge:#ff4b50;position:relative}
.wa-root .wa-film-defs{position:absolute;width:0;height:0;overflow:hidden}
.wa-root .wa-film-barre,.wa-root .wa-film-legende{display:none}
.wa-root .wa-film-ecran{position:relative;overflow:hidden;aspect-ratio:21/9;max-height:440px;border-radius:16px;background:#0c0e13 radial-gradient(120% 140% at 50% 0%,#1b1f2a 0%,#0c0e13 62%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Une trame de bureau d'etudes, a peine visible, et un voile sur les bords. */
.wa-root .wa-film-ecran::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.wa-root .wa-film-ecran::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(130% 100% at 50% 50%,transparent 58%,rgba(5,6,9,.55) 100%);pointer-events:none}
.wa-root .wa-film-vue{position:relative;display:block;width:100%;height:100%}
.wa-root .wa-film-trait{color:var(--film-trait)}
.wa-root .wa-film-zone{color:var(--film-rouge)}
.wa-root .wa-film-liste{margin-top:22px}
.wa-root .wa-film-bande[hidden]{display:none}

/* --- avec le script : la table du monteur ------------------------------------------------------------ */
.wa-root .wa-film.est-vif{display:grid;grid-template-columns:minmax(0,1fr);padding:16px 18px 18px;border-radius:24px;background:#0d0f14 linear-gradient(180deg,#171a22 0%,#0d0f14 100%);color:#e8eaef;box-shadow:0 34px 70px -40px rgba(11,13,19,.75),inset 0 0 0 1px rgba(255,255,255,.07)}
.wa-root .wa-film.est-vif .wa-film-liste{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wa-root .wa-film.est-vif .wa-film-ecran{grid-row:2;grid-column:1;aspect-ratio:auto;height:clamp(260px,30vw,430px);max-height:none}
.wa-root .wa-film.est-vif .wa-film-barre{grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:36px;margin:0 2px 12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,234,239,.72)}
.wa-root .wa-film-rec{display:inline-flex;align-items:center;gap:10px}
.wa-root .wa-film-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(223,41,46,.2)}
.wa-root .wa-film-compteur{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.wa-root .wa-film-compteur b{color:#fff;font-weight:700}
.wa-root .wa-film-lecture{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:border-color .2s,background-color .2s}
.wa-root .wa-film-lecture svg{width:14px;height:14px;fill:currentColor}
.wa-root .wa-film-lecture .lire,.wa-root .wa-film-lecture.arrete .pause{display:none}
.wa-root .wa-film-lecture.arrete .lire{display:block}
.wa-root .wa-film-lecture:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.wa-root .wa-film-lecture:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* La legende : la famille en cours, en bas a gauche de l'ecran. */
.wa-root .wa-film.est-vif .wa-film-legende{grid-row:2;grid-column:1;align-self:end;justify-self:start;position:relative;z-index:1;display:flex;align-items:flex-start;gap:12px;max-width:min(470px,calc(100% - 32px));margin:0 0 16px 16px;padding:12px 16px 13px 12px;border-radius:14px;background:rgba(10,12,17,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.wa-root .wa-film-num{flex:none;display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:9px;background:var(--red);color:#fff;font-family:var(--fd);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.wa-root .wa-film-mots{display:flex;flex-direction:column;gap:2px;min-width:0}
.wa-root .wa-film-mots b{font-family:var(--fd);font-size:18px;font-weight:600;line-height:1.2;color:#fff}
.wa-root .wa-film-mots span{font-size:14px;line-height:1.4;color:rgba(232,234,239,.78)}

/* La bande : huit images, la tete de lecture, les cinquante traits. */
.wa-root .wa-film-bande{grid-row:3;position:relative;margin-top:14px;padding:6px 0 20px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:12px}
.wa-root .wa-film-bande:active{cursor:grabbing}
/* L'anneau natif ne s'efface que la ou :focus-visible existe (front3#5, comme la frise). */
@supports selector(:focus-visible){.wa-root .wa-film-bande:focus{outline:0}}
.wa-root .wa-film-bande:focus-visible{box-shadow:0 0 0 2px #fff}
.wa-root .wa-film-images{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.wa-root .wa-film-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:9px;background:#10131a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:.55;transition:opacity .3s,box-shadow .3s}
.wa-root .wa-film-image svg{display:block;width:100%;height:100%}
.wa-root .wa-film-image.on{opacity:1;box-shadow:inset 0 0 0 1.5px var(--film-rouge)}
@media (hover:hover){.wa-root .wa-film-bande:hover .wa-film-image{opacity:.8}.wa-root .wa-film-bande:hover .wa-film-image.on{opacity:1}}
.wa-root .wa-film-tete{position:absolute;top:0;bottom:12px;left:-1px;width:2px;border-radius:2px;background:var(--film-rouge);box-shadow:0 0 12px rgba(255,75,80,.85);pointer-events:none;will-change:transform}
.wa-root .wa-film-tete::before{content:"";position:absolute;top:-4px;left:-5px;width:12px;height:8px;border-radius:3px;background:var(--film-rouge)}
.wa-root .wa-film-graduations,.wa-root .wa-film-graduations-rouge{position:absolute;left:0;right:0;bottom:0;height:8px;background-image:linear-gradient(90deg,currentColor 0 1px,transparent 1px);background-size:calc((100% - 1px) / 49) 100%;background-repeat:repeat-x;pointer-events:none}
.wa-root .wa-film-graduations{color:rgba(255,255,255,.22)}
.wa-root .wa-film-graduations-rouge{color:var(--film-rouge)}

/* --- au telephone : l'ecran en 16/9, la legende serree, les images en carre --------------------------- */
@media (max-width:760.98px){
	.wa-root .wa-film-ecran,.wa-root .wa-film.est-vif .wa-film-ecran{aspect-ratio:16/9;height:auto;border-radius:12px}
	.wa-root .wa-film.est-vif{padding:12px 12px 14px;border-radius:18px}
	.wa-root .wa-film.est-vif .wa-film-barre{margin-bottom:10px;letter-spacing:.08em}
	.wa-root .wa-film.est-vif .wa-film-legende{grid-row:3;align-self:start;max-width:none;gap:10px;margin:0;padding:12px 2px 2px;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
	.wa-root .wa-film-bande{grid-row:4}
	.wa-root .wa-film-num{min-width:28px;height:28px;font-size:12.5px;border-radius:8px}
	.wa-root .wa-film-mots b{font-size:15px}
	.wa-root .wa-film-mots span{font-size:12.5px}
	.wa-root .wa-film-images{gap:4px}
	.wa-root .wa-film-image{aspect-ratio:1/1;border-radius:7px}
}

/* --- sans aspect-ratio (Safari d'avant 15, les vieux iPhone) : la hauteur par le rembourrage ----------- */
@supports not (aspect-ratio:1/1){
	.wa-root .wa-film-ecran{height:0;padding-top:42.86%}
	.wa-root .wa-film-vue{position:absolute;top:0;left:0}
	.wa-root .wa-film.est-vif .wa-film-ecran{padding-top:0}
	.wa-root .wa-film-image{height:0;padding-top:56.25%}
	.wa-root .wa-film-image svg{position:absolute;top:0;left:0}
	@media (max-width:760.98px){
		.wa-root .wa-film-ecran,.wa-root .wa-film.est-vif .wa-film-ecran{height:0;padding-top:56.25%}
		.wa-root .wa-film-image{padding-top:100%}
	}
}

/* --- sans mouvement : la tete et la camera sautent ; rien ne glisse --------------------------------- */
@media (prefers-reduced-motion:reduce){
	.wa-root .wa-film *{transition:none!important;animation:none!important}
}
@media print{
	.wa-root .wa-film.est-vif{padding:0;background:none;box-shadow:none;color:inherit}
	.wa-root .wa-film.est-vif .wa-film-liste{position:static;width:auto;height:auto;margin:16px 0 0;overflow:visible;clip:auto;white-space:normal}
	.wa-root .wa-film-bande,.wa-root .wa-film-barre,.wa-root .wa-film-legende{display:none!important}
}