/* Page Audiovisuel : calque de grow360.fr/audiovisuel, mesures relevees a 2560 px le 30/09
   (valeurs converties en vw pour tenir la meme proportion a toutes les largeurs). */

/* ---------- Bloc 1 : banniere video ---------- */
.av-banniere {
  position: relative; overflow: hidden;
  min-height: 94svh; /* Grow : 1 174 px pour un ecran de 1 249 px, le bandeau depasse juste en bas */
  display: grid; place-items: center; text-align: center;
}
.av-banniere__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-banniere__voile { position: absolute; inset: 0; background: rgba(0, 0, 0, .77); } /* Grow : noir a 77 % */
.av-banniere__contenu { position: relative; z-index: 1; padding: 120px clamp(16px, 4vw, 48px) 80px; }

.av-banniere__surtitre {
  margin: 0 0 1.9vw;
  font-family: var(--texte); font-weight: 300; text-transform: uppercase;
  font-size: clamp(11px, .78vw, 20px); letter-spacing: .225em; color: #d5d5d5;
}
.av-banniere__titre { font-size: clamp(30px, 3.98vw, 110px); line-height: 1.25; letter-spacing: .0225em; }
.av-banniere__texte {
  margin: .7vw auto 0; max-width: 21em;
  font-family: var(--texte); font-weight: 200; line-height: 1.5; color: #d5d5d5;
  font-size: clamp(15px, .78vw, 20px);
  animation: apparait .9s .15s ease-out both;
}
.av-banniere .accueil__boutons { margin-top: 1.3vw; }

/* Bandeau des prestations : meme composant que l accueil, fond gris tres sombre comme chez Grow */
.av-bandeau { background: #171717; height: 2.93vw; min-height: 48px; }

@media (max-width: 640px) {
  .av-banniere__surtitre { margin-bottom: 18px; }
  .av-banniere__texte { margin-top: 16px; }
  .av-banniere .accueil__boutons { margin-top: 28px; }
}

/* ---------- Bloc 2 : nos projets (mesures Grow a 1 592 px, 30/09) ---------- */
.av-projets { padding: 7.9vw 0 6vw; }
.av-projets__titre {
  margin: 0 0 2.7vw; text-align: center;
  font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(30px, 3.96vw, 110px); line-height: 1.25; letter-spacing: .0225em;
}
/* Piste : ~3,5 cartes visibles, la derniere coupee au bord droit comme chez Grow */
.av-projets__piste {
  list-style: none; margin: 0; padding: 0 2.4vw;
  display: flex; column-gap: 55px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2.4vw; scroll-behavior: smooth; scrollbar-width: none;
}
.av-projets__piste::-webkit-scrollbar { display: none; }
.av-projets__piste li { flex: 0 0 25.06vw; scroll-snap-align: start; }
.av-carte {
  position: relative; display: block; width: 100%; height: 63vh; min-height: 320px;
  padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden;
}
.av-carte__image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bouton lecture : triangle au trait blanc, en haut a droite (Grow : 34 px, 15 px du haut, 26 px du bord) */
.av-carte__lecture {
  position: absolute; top: 15px; right: 26px; width: 34px; height: 34px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E");
}
.av-carte__logo, .av-carte__nom {
  position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%);
}
.av-carte__logo { max-width: 42%; max-height: 18%; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.av-carte__nom {
  white-space: nowrap; color: #fff; text-transform: uppercase;
  font-family: var(--titre); font-weight: 900; font-stretch: 125%; font-size: clamp(14px, 1.1vw, 26px);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.av-carte:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Fleches : ronds blancs sous la piste, calees a droite */
.av-projets__fleches { display: flex; justify-content: flex-end; gap: 18px; padding: 18px 5vw 0; }
.av-fleche {
  width: clamp(48px, 3.83vw, 100px); aspect-ratio: 1; border-radius: 50%;
  border: 0; background: #fff; color: #000; cursor: pointer;
  font-size: clamp(22px, 1.8vw, 44px); line-height: 1;
}
.av-fleche:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Lecteur plein ecran */
.av-lecteur { width: fit-content; max-width: 92vw; max-height: 92vh; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.av-lecteur::backdrop { background: rgba(0, 0, 0, .9); }
.av-lecteur__film { display: block; width: auto; height: auto; max-width: 92vw; max-height: 88vh; } /* films verticaux ET horizontaux : le cadre suit le film */
.av-lecteur__fermer {
  position: absolute; top: -52px; right: 0; width: 44px; height: 44px;
  border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer;
}
.av-lecteur__fermer:focus-visible { outline: 2px solid #fff; }
.av-lecteur:focus { outline: none; } /* 14/10 : le lecteur recoit le focus a l ouverture (pas une commande), pas de cadre */

@media (max-width: 766px) { /* Grow : 2 cartes par ecran, 21 px d ecart */
  .av-projets__piste { column-gap: 21px; }
  .av-projets__piste li { flex-basis: calc((100vw - 4.8vw - 21px) / 2); }
  .av-carte { height: 50vh; min-height: 260px; }
  .av-carte__logo, .av-carte__nom { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .av-projets__piste { scroll-behavior: auto; } }
/* Logo Foot Korner : ecusson vertical, on le borne en hauteur plutot qu en largeur */
.av-carte__logo--haut { max-width: 22%; max-height: 26%; }
.av-carte__logo--callebaut { width: 34%; }
/* 30/09 : logo illisible sur les fonds clairs (neons Waka, mains Peymeinade) -> degrade sombre en bas de carte, sous le logo */
.av-carte::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.av-carte__logo, .av-carte__nom { z-index: 1; }

/* 30/09 : devanture Peymeinade faite sur la VRAIE image (MOSCO a rejete la version ChatGPT : « on voit que c'est de l'IA »).
   Titre dans la typo du site + fin trait tricolore ; degrade sombre en haut pour la lisibilite. */
.av-carte--municipal::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0)); }
.av-carte__titre {
  position: absolute; z-index: 2; top: 11%; left: 8%; right: 8%; text-align: center; color: #fff;
  font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(18px, 1.9vw, 48px); line-height: 1.1; letter-spacing: .02em;
}
.av-carte__titre .contour { display: block; -webkit-text-stroke-width: .03em; }
.av-carte__titre::after { content: ""; display: block; width: 34%; height: 3px; margin: .5em auto 0;
  background: linear-gradient(to right, #1f3f99 0 33.3%, #fff 33.3% 66.6%, #d8262e 66.6%); }
.av-carte--municipal .av-carte__image { filter: saturate(1.08) contrast(1.05); }
/* 30/09 : « mets une police moins cramee » -> Cormorant Garamond (serif institutionnelle) a la place d Archivo large */
.av-carte__titre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-stretch: normal;
  font-size: clamp(20px, 2.1vw, 54px); letter-spacing: .22em; line-height: 1; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.av-carte__titre .contour { color: #fff; -webkit-text-stroke: 0; font-weight: 500; font-style: italic;
  text-transform: none; letter-spacing: .02em; font-size: 1.15em; margin-top: .15em; }
/* 30/09 : « meme police que sur le logo Ville de Peymeinade » -> lineale humaniste type Myriad (suppose, lu a l oeil)
   -> equivalent libre Source Sans 3, capitales, comme le logo. Titre sur une ligne. */
.av-carte__titre { font-family: "Source Sans 3", "Myriad Pro", sans-serif; font-weight: 600; font-style: normal;
  font-size: clamp(18px, 1.75vw, 44px); letter-spacing: .06em; line-height: 1.05; text-transform: uppercase; }
.av-carte__titre .contour { display: inline; font-style: normal; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 1em; margin: 0; }
.av-carte__logo--haut { max-height: 19%; bottom: 36px; } /* 30/09 : plus petit et plus bas, pour degager le logo Nike du gant */
.av-carte__logo--rond { max-width: 30%; max-height: 24%; } /* FDTS : logo rond, borne comme un carre */

/* 30/09 : diaporama photo dans le lecteur (Partouche) */
.av-lecteur__photo { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.av-lecteur__photo[hidden], .av-lecteur__film[hidden], .av-lecteur__nav[hidden], .av-lecteur__compteur[hidden] { display: none; }
.av-lecteur__nav {
  position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: #fff; color: #000; font-size: 26px; cursor: pointer; z-index: 2;
}
.av-lecteur__nav--prec { left: 24px; }
.av-lecteur__nav--suiv { right: 24px; }
.av-lecteur__nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.av-lecteur__compteur { position: absolute; left: 0; right: 0; bottom: -40px; margin: 0; text-align: center; color: #fff; font-size: 14px; letter-spacing: .1em; }
/* 30/09 : « tous les logos a la meme taille que Bill's Burger » -> meme SURFACE que Bill's (42 % de large),
   largeur calculee par logo selon sa forme (style inline). Les anciennes limites sont levees. */
.av-carte__logo, .av-carte__logo--haut, .av-carte__logo--rond, .av-carte__logo--callebaut { max-width: none; max-height: none; height: auto; bottom: 44px; }

/* ---------- 30/09 : Nos expertises (avant Nos projets) ---------- */
.av-exp { padding: 7.9vw 2.4vw 0; }
.av-exp__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }
.av-exp__grille li { grid-column: span 2; }
.av-exp__grille li:nth-child(-n+2) { grid-column: span 3; }   /* 2 grandes en haut, 3 en dessous */
.av-exp__tuile { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: #111; cursor: pointer; }
.av-exp__film { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.av-exp__tuile:hover .av-exp__film { transform: scale(1.04); }
.av-exp__tuile::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); pointer-events: none; }
.av-exp__nom {
  position: absolute; z-index: 1; left: 22px; bottom: 18px; color: #fff; text-align: left;
  font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 34px); letter-spacing: .02em;
}
.av-exp__tuile:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 766px) {
  .av-exp__grille { grid-template-columns: 1fr; gap: 12px; }
  .av-exp__grille li, .av-exp__grille li:nth-child(-n+2) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .av-exp__film { transition: none; } .av-exp__tuile:hover .av-exp__film { transform: none; } }

/* 30/09 : ruban NOIR (demande MOSCO) ; le fond blanc des expertises + degrade ont ete annules */
.av-bandeau { background: #000; color: #fff; }
/* 30/09 : expertises deplacees APRES Nos projets -> espace en bas de page */
.av-exp { padding-top: 2vw; padding-bottom: 7.9vw; }

/* 30/09 (MOSCO) : clic sur une expertise = texte explicatif par-dessus la video, facon cartes Grow (numero + phrase) */
.av-exp__tuile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.av-exp__nom { transition: transform .45s ease; }
.av-exp__texte {
  position: absolute; z-index: 2; left: 22px; right: 22px; top: 20px; bottom: calc(18px + 2.6em);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; text-align: left; color: #fff;
  opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.av-exp__num { font-size: 13px; letter-spacing: .08em; opacity: .7; }
.av-exp__desc { font-size: clamp(14px, 1.05vw, 19px); line-height: 1.45; max-width: 34em; }
.av-exp__tuile[aria-expanded="true"]::before { opacity: 1; }
.av-exp__tuile[aria-expanded="true"] .av-exp__texte { opacity: 1; transform: none; }
.av-exp__nom { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .av-exp__tuile::before, .av-exp__texte, .av-exp__nom { transition: none; } .av-exp__texte { transform: none; } }
/* 30/09 (MOSCO) : halo blanc autour de la video ouverte + texte plus lisible */
.av-exp__tuile { transition: box-shadow .45s ease; }
.av-exp__tuile[aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 0 28px 4px rgba(255,255,255,.45), 0 0 70px 10px rgba(255,255,255,.18); }
.av-exp__desc { font-size: clamp(15px, 1.35vw, 24px); }
.av-exp__num { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .av-exp__tuile { transition: none; } }

/* 30/09 (MOSCO) : « du design par-dessus, un blanc 50 % avec des explications stylees » — remplace le voile noir + numeros */
.av-exp__tuile { container-type: inline-size; }
.av-exp__tuile::before { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15); }
.av-exp__tuile[aria-expanded="true"] .av-exp__nom { opacity: 0; transform: translateY(10px); }
.av-exp__nom { transition: opacity .35s ease, transform .35s ease; }
.av-exp__texte {
  inset: 0; padding: 6cqw 6.5cqw; gap: 0; justify-content: center; align-items: flex-start;
  color: var(--noir); transform: none;
}
.av-exp__texte > span { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.av-exp__tuile[aria-expanded="true"] .av-exp__texte > span { opacity: 1; transform: none; }
.av-exp__tuile[aria-expanded="true"] .av-exp__texte > span:nth-child(2) { transition-delay: .07s; }
.av-exp__tuile[aria-expanded="true"] .av-exp__texte > span:nth-child(3) { transition-delay: .14s; }
.av-exp__tuile[aria-expanded="true"] .av-exp__texte > span:nth-child(4) { transition-delay: .21s; }
.av-exp__surtitre {
  display: flex; align-items: center; gap: .8em; margin-bottom: 1.6cqw;
  font-size: clamp(10px, 1.9cqw, 14px); font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
}
.av-exp__surtitre::before { content: ""; width: 2.4em; height: 2px; background: currentColor; }
.av-exp__titre {
  font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(22px, 7cqw, 64px); line-height: .95; letter-spacing: -.01em; margin-bottom: 2.4cqw;
}
.av-exp__titre .contour { -webkit-text-stroke: .025em var(--noir); color: transparent; }
.av-exp__desc { font-size: clamp(13px, 2.9cqw, 21px); line-height: 1.4; font-weight: 500; max-width: 30em; margin-bottom: 3cqw; }
.av-exp__tags { display: flex; flex-wrap: wrap; gap: .6em; }
.av-exp__tag {
  font-size: clamp(10px, 2cqw, 14px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .55em 1.1em; border: 1.5px solid var(--noir); border-radius: 999px;
}
.av-exp__tag:first-child { background: var(--noir); color: #fff; }
@media (prefers-reduced-motion: reduce) { .av-exp__texte > span, .av-exp__nom { transition: none; transform: none; } }
.av-exp__tuile[aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 30px 5px rgba(255,255,255,.5), 0 0 80px 12px rgba(255,255,255,.2); }
/* 30/09 (MOSCO) : bordure blanche plus epaisse au clic (4 px pleins + halo) */
.av-exp__tuile[aria-expanded="true"] { box-shadow: 0 0 0 4px #fff, 0 0 34px 8px rgba(255,255,255,.5), 0 0 90px 14px rgba(255,255,255,.2); }

/* 30/09 (MOSCO) : « la bordure fait pas premium » -> plus d anneau blanc epais ; a la place un VISEUR DE CAMERA
   (4 coins fins qui se resserrent + REC), et le halo blanc garde mais doux */
.av-exp__tuile[aria-expanded="true"] { box-shadow: 0 0 40px 2px rgba(255,255,255,.28), 0 0 110px 10px rgba(255,255,255,.12); }
.av-exp__viseur {
  --c: var(--noir); --l: clamp(16px, 4cqw, 34px); --e: 2px;
  position: absolute; z-index: 2; inset: 5cqw; pointer-events: none; opacity: 0; transform: scale(1.08);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--l) var(--e), linear-gradient(var(--c),var(--c)) top left / var(--e) var(--l),
    linear-gradient(var(--c),var(--c)) top right / var(--l) var(--e), linear-gradient(var(--c),var(--c)) top right / var(--e) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left / var(--l) var(--e), linear-gradient(var(--c),var(--c)) bottom left / var(--e) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right / var(--l) var(--e), linear-gradient(var(--c),var(--c)) bottom right / var(--e) var(--l);
  background-repeat: no-repeat;
}
.av-exp__rec {
  position: absolute; top: 1.4cqw; right: 1.8cqw; display: flex; align-items: center; gap: .5em;
  font-size: clamp(9px, 1.6cqw, 12px); font-weight: 700; letter-spacing: .2em; color: var(--noir);
}
.av-exp__rec::before { content: ""; width: .75em; height: .75em; border-radius: 50%; background: #e0262b; animation: av-rec 1.2s steps(1) infinite; }
@keyframes av-rec { 50% { opacity: 0; } }
.av-exp__tuile[aria-expanded="true"] .av-exp__viseur { opacity: 1; transform: none; }
.av-exp__texte { padding: 9cqw 10cqw; }
@media (prefers-reduced-motion: reduce) { .av-exp__viseur { transition: none; transform: none; } .av-exp__rec::before { animation: none; } }
.av-exp__rec { top: 0; right: calc(var(--l) + 10px); transform: translateY(-40%); }

/* 01/10 (MOSCO) : « © Mosco Agency » en bas a gauche du film ouvert, petit et discret ;
   remonte quand la souris est sur le film pour ne pas passer sous la barre de lecture */
.av-lecteur__copyright {
  position: absolute; left: 18px; bottom: 16px; z-index: 2; margin: 0; pointer-events: none;
  color: #fff; opacity: .45; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: bottom .25s ease;
}
.av-lecteur:has(.av-lecteur__film:not([hidden])):hover .av-lecteur__copyright { bottom: 62px; }
@media (prefers-reduced-motion: reduce) { .av-lecteur__copyright { transition: none; } }
.av-lecteur--pause:has(.av-lecteur__film:not([hidden])) .av-lecteur__copyright { bottom: 62px; }

/* 01/10 (MOSCO) : bloc « Pour les particuliers », juste apres Nos expertises.
   Les 9 visuels portent deja leur titre incruste : on les montre ENTIERS (pas de recadrage, pas de texte par-dessus) */
.av-part { padding: 0 2.4vw 7.9vw; }
.av-part__intro { margin: -1vw auto 3vw; max-width: 40em; text-align: center; color: rgba(255,255,255,.7); font-size: clamp(15px, 1.2vw, 20px); line-height: 1.5; }
.av-part__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.av-part__carte { overflow: hidden; background: #111; }
.av-part__carte img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 584; object-fit: cover; transition: transform .6s ease; }
.av-part__carte:hover img { transform: scale(1.04); }
@media (max-width: 1024px) { .av-part__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 766px) { .av-part__grille { grid-template-columns: 1fr; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .av-part__carte img { transition: none; } .av-part__carte:hover img { transform: none; } }

/* 01/10 (MOSCO) : ESSAI « la partie particulier en blanc » (retour au noir = supprimer ce bloc) */
.av-part { background: #fff; color: var(--noir); padding-top: 6vw; }
.av-part .av-projets__titre { color: var(--noir); }
.av-part .contour { -webkit-text-stroke-color: var(--noir); }
.av-part__intro { color: rgba(10,10,10,.65); }
.av-part__carte { background: #eee; }

/* 01/10 (MOSCO) : comme Grow a « Pourquoi nous choisir ? » -> c est le fond de TOUTE la page qui passe
   du noir au blanc en fondu quand on arrive sur les particuliers (et revient au noir en remontant).
   Remplace l essai « bloc blanc fixe » juste au-dessus. */
html, body { transition: background-color .8s ease; }
.av-part { background: transparent; }
html.fond-blanc, html.fond-blanc body { background-color: #fff; }
.av-exp .av-projets__titre, .av-part .av-projets__titre, .av-part__intro { transition: color .8s ease; }
.av-exp .contour, .av-part .contour { transition: -webkit-text-stroke-color .8s ease; }
.av-part .av-projets__titre { color: #fff; }
.av-part .contour { -webkit-text-stroke-color: #fff; }
.av-part__intro { color: rgba(255,255,255,.7); }
html.fond-blanc .av-exp .av-projets__titre, html.fond-blanc .av-part .av-projets__titre { color: var(--noir); }
html.fond-blanc .av-exp .contour, html.fond-blanc .av-part .contour { -webkit-text-stroke-color: var(--noir); }
html.fond-blanc .av-part__intro { color: rgba(10,10,10,.65); }
@media (prefers-reduced-motion: reduce) {
  html, body, .av-exp .av-projets__titre, .av-part .av-projets__titre, .av-part__intro, .av-exp .contour, .av-part .contour { transition: none; }
}
/* 01/10 (MOSCO) : « trop long, je veux un truc net et sur de soi » -> fondu de .8 s ramene a .3 s, courbe franche */
html, body, .av-exp .av-projets__titre, .av-part .av-projets__titre, .av-part__intro { transition-duration: .3s; transition-timing-function: cubic-bezier(.6, 0, .2, 1); }
.av-exp .contour, .av-part .contour { transition-duration: .3s; transition-timing-function: cubic-bezier(.6, 0, .2, 1); }
/* 01/10 (MOSCO) : phrase d intro en NOIR sur le fond blanc, mots forts en gras */
html.fond-blanc .av-part__intro { color: var(--noir); }
.av-part__intro strong { font-weight: 800; }

/* 01/10 (MOSCO) : fleches des projets centrees, espacees, plus stylees :
   cercles fins en contour, fleche dessinee, remplissage blanc au survol ; entre les deux un compteur 01 — 10 avec barre */
.av-projets__fleches { justify-content: center; align-items: center; gap: clamp(28px, 3.2vw, 64px); padding: 3vw 5vw 0; }
.av-fleche {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: clamp(54px, 4.2vw, 84px); background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.55); transition: border-color .3s ease, color .3s ease;
}
.av-fleche::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.av-fleche svg { position: relative; width: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.av-fleche:hover, .av-fleche:focus-visible { border-color: #fff; color: #000; }
.av-fleche:hover::before, .av-fleche:focus-visible::before { transform: scale(1); }
.av-fleche[data-sens="-1"]:hover svg { transform: translateX(-3px); }
.av-fleche[data-sens="1"]:hover svg { transform: translateX(3px); }
.av-fleche:active { transform: scale(.94); }
.av-projets__progres { display: flex; align-items: center; gap: 16px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.av-projets__total { opacity: .45; }
.av-projets__barre { position: relative; width: clamp(90px, 9vw, 180px); height: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.av-projets__barre i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(.1); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .av-fleche, .av-fleche::before, .av-fleche svg, .av-projets__barre i { transition: none; } }

/* 01/10 (MOSCO) : « Pourquoi nous choisir ? » apres les particuliers, VENDEUR.
   On reste sur le fond blanc des particuliers : cartes NOIRES pour trancher, chiffres enormes, preuve clients, bouton devis. */
.av-pq { padding: 2vw 2.4vw 8vw; color: var(--noir); }
.av-pq .av-projets__titre { color: var(--noir); }
.av-pq .contour { -webkit-text-stroke-color: var(--noir); }
.av-pq__intro { margin: -1vw auto 3.2vw; text-align: center; font-size: clamp(17px, 1.5vw, 26px); }
.av-pq__intro strong, .av-pq p strong { font-weight: 800; }
.av-pq__cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.av-pq__carte {
  background: var(--noir); color: #fff; padding: clamp(28px, 2.8vw, 52px); display: flex; flex-direction: column; gap: 16px;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.av-pq__carte:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); }
.av-pq__carte svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-pq__carte h3 { margin: 6px 0 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(18px, 1.45vw, 28px); line-height: 1.1; }
.av-pq__carte p { margin: 0; color: rgba(255,255,255,.78); font-size: clamp(14px, 1.02vw, 18px); line-height: 1.55; }
.av-pq__carte p strong { color: #fff; }
.av-pq__chiffres { margin: 5vw 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--noir); }
.av-pq__chiffres div { padding: 2.2vw 1vw 0; text-align: center; }
.av-pq__chiffres dd { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; font-size: clamp(48px, 6vw, 120px); line-height: 1; }
.av-pq__chiffres dt { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.av-pq__confiance { margin: 4vw auto 0; max-width: 52em; text-align: center; font-size: clamp(15px, 1.15vw, 20px); line-height: 1.5; }
.av-pq__cta {
  display: flex; width: max-content; align-items: center; gap: 14px; margin: 2.6vw auto 0; padding: 20px 38px;
  background: var(--noir); color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  border: 2px solid var(--noir); transition: background .3s ease, color .3s ease;
}
.av-pq__cta svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.av-pq__cta:hover, .av-pq__cta:focus-visible { background: #fff; color: var(--noir); }
.av-pq__cta:hover svg { transform: translateX(4px); }
.av-pq__cta:focus-visible { outline: 3px solid var(--noir); outline-offset: 4px; }
@media (max-width: 900px) { .av-pq__cartes { grid-template-columns: 1fr; } }
@media (max-width: 766px) { .av-pq__chiffres { grid-template-columns: 1fr; } .av-pq__chiffres div { padding: 24px 0 0; } }
@media (prefers-reduced-motion: reduce) { .av-pq__carte, .av-pq__cta, .av-pq__cta svg { transition: none; } .av-pq__carte:hover { transform: none; } }
.av-pq__chiffres div { display: flex; flex-direction: column-reverse; } /* dt avant dd dans le code (HTML valide), chiffre au-dessus a l ecran */

/* 01/10 (MOSCO) : clic sur un particulier = meme voile blanc + viseur que les expertises, SANS le REC (c est de l event).
   Tuiles au format des visuels (1400x584) ; pas de degrade sombre en bas (le titre est deja dans l image) */
.av-part__grille li { list-style: none; }
.av-part__tuile { aspect-ratio: 1400 / 584; }
.av-part__tuile::after { display: none; }
.av-part__tuile .av-exp__texte { padding: 3.6cqw 6cqw; }
.av-part__tuile .av-exp__viseur { inset: 3cqw; }
.av-part__tuile .av-exp__surtitre { margin-bottom: .9cqw; font-size: clamp(9px, 1.6cqw, 12px); }
.av-part__tuile .av-exp__titre { font-size: clamp(18px, 5cqw, 44px); margin-bottom: 1.4cqw; }
.av-part__tuile .av-exp__desc { font-size: clamp(12px, 2.5cqw, 17px); margin-bottom: 1.8cqw; max-width: 34em; }
.av-part__tuile .av-exp__tag { font-size: clamp(9px, 1.7cqw, 12px); padding: .45em .95em; }
/* sur la page devenue blanche, la tuile ouverte garde un halo sombre (le halo blanc ne se verrait pas) */
html.fond-blanc .av-part__tuile[aria-expanded="true"] { box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }

/* 01/10 (MOSCO) : « repasse en noir pour Pourquoi nous choisir » -> la page revient au noir a ce bloc (meme fondu net).
   Couleurs du bloc inversees : texte blanc, cartes gris tres fonce sur noir (comme les cartes de Grow), bouton blanc */
.av-pq { color: #fff; }
.av-pq .av-projets__titre { color: #fff; }
.av-pq .contour { -webkit-text-stroke-color: #fff; }
.av-pq__carte { background: #151515; }
.av-pq__carte:hover { box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); background: #1b1b1b; }
.av-pq__chiffres { border-top-color: rgba(255,255,255,.85); }
.av-pq__cta { background: #fff; color: var(--noir); border-color: #fff; }
.av-pq__cta:hover, .av-pq__cta:focus-visible { background: transparent; color: #fff; }
.av-pq__cta:focus-visible { outline-color: #fff; }

/* 01/10 (MOSCO) : plus de numerotation 01 — 10 entre les fleches, seule la barre reste */
.av-projets__num, .av-projets__total { display: none; }

/* 01/10 (MOSCO : « reste comme Grow, ameliore la prise de position ») : cartes calees sur Grow MESURE
   (fond #101010, 40 px de marge, tout centre, grande icone ~120 px, titre 23 px majuscules non gras).
   Chiffres 85+ / 50+ remplaces (sa demande : « un truc original ») par une carte : basés dans le 06, deja a Paris. */
.av-pq__intro { margin-bottom: 4vw; }
.av-pq__carte { background: #101010; padding: 48px 40px 52px; align-items: center; text-align: center; gap: 18px; }
.av-pq__carte:hover { background: #151515; }
.av-pq__carte svg { width: clamp(96px, 8.5vw, 128px); height: auto; aspect-ratio: 1; stroke-width: 2.2; margin-bottom: 10px; }
.av-pq__carte h3 { font-family: var(--titre); font-weight: 500; font-stretch: 100%; font-size: clamp(18px, 1.6vw, 23px); letter-spacing: .05em; line-height: 1.3; }
.av-pq__carte p { font-size: clamp(14px, 1vw, 16px); line-height: 1.6; max-width: 26em; }
.av-pq__zone { margin: 7vw 0 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; }
.av-pq__zone-texte h3 { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 84px); line-height: 1; }
.av-pq__zone-texte p { margin: 2vw 0 0; max-width: 24em; color: rgba(255,255,255,.75); font-size: clamp(15px, 1.2vw, 20px); line-height: 1.55; }
.av-pq__zone-texte p strong { color: #fff; }
.av-pq__carte-fr { position: relative; max-width: 560px; justify-self: center; width: 100%; }
.av-pq__carte-fr img { display: block; width: 100%; height: auto; }
.av-pq__reperes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.av-pq__trajet { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; opacity: .8; animation: av-trajet 1.6s linear infinite; }
.av-pq__point circle { fill: #fff; }
.av-pq__onde { fill: none !important; stroke: #fff; stroke-width: 2; transform-origin: center; animation: av-onde 2s cubic-bezier(.2,.7,.2,1) infinite; }
.av-pq__point--2 .av-pq__onde { animation-delay: 1s; }
.av-pq__reperes text { fill: #fff; font-family: var(--titre); font-weight: 800; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
@keyframes av-trajet { to { stroke-dashoffset: -28; } }
@keyframes av-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@media (max-width: 900px) { .av-pq__zone { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .av-pq__trajet, .av-pq__onde { animation: none; } .av-pq__onde { opacity: 0; } }
.av-pq__onde { transform-box: fill-box; transform-origin: 50% 50%; }
/* 01/10 (MOSCO) : tant que la page est encore blanche, le titre « Pourquoi » qui entre par le bas est NOIR (il etait blanc sur blanc) */
html.fond-blanc .av-pq .av-projets__titre, html.fond-blanc .av-pq__intro { color: var(--noir); }
html.fond-blanc .av-pq .contour { -webkit-text-stroke-color: var(--noir); }
.av-pq .av-projets__titre, .av-pq__intro, .av-pq .contour { transition: color .3s cubic-bezier(.6,0,.2,1), -webkit-text-stroke-color .3s cubic-bezier(.6,0,.2,1); }

/* 01/10 (MOSCO : « change les logos et les titres, fais premium » + « ameliore la carte, plus jolie ») :
   icones Phosphor (trait fin, jeu pro) a la place des miennes ; carte en TRAME DE POINTS, halo sur les 2 villes,
   trajet qui se dessine, etiquettes a deux niveaux. Version d avant : _outils/audiovisuel-pq-v3-2026-10-01.* */
.av-pq__carte svg { fill: #fff; stroke: none; width: clamp(84px, 7vw, 108px); }
.av-pq__carte h3 { text-transform: uppercase; }
.av-pq__points { display: block; width: 100%; height: auto; overflow: visible; }
.av-pq__trame circle { fill: rgba(255,255,255,.16); }
.av-pq__trame circle.v { fill: rgba(255,255,255,.55); }
.av-pq__trajet { stroke: url(#av-arc); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; animation: av-dessin 2.4s cubic-bezier(.6,0,.2,1) .3s infinite alternate; }
@keyframes av-dessin { to { stroke-dashoffset: 0; } }
.av-pq__etiq text { fill: #fff; font-family: var(--titre); font-weight: 800; font-stretch: 125%; font-size: 21px; text-transform: uppercase; letter-spacing: .04em; }
.av-pq__etiq .av-pq__etiq-sub { fill: rgba(255,255,255,.55); font-family: inherit; font-weight: 600; font-stretch: 100%; font-size: 13px; letter-spacing: .22em; }
@media (prefers-reduced-motion: reduce) { .av-pq__trajet { animation: none; stroke-dashoffset: 0; } }
/* 01/10 (MOSCO : « garde la carte actuelle, fais-la plus realiste ») : vrais contours (Natural Earth via world-atlas),
   pays voisins en fond, cotes et Corse fideles, trame plus fine dont l eclat monte pres des 2 villes, bords fondus. */
.av-pq__carte-fr { max-width: 620px; }
.av-pq__voisins path { fill: #111; stroke: rgba(255,255,255,.1); stroke-width: .8; }
.av-pq__fr { fill: #151515; stroke: rgba(255,255,255,.5); stroke-width: 1; stroke-linejoin: round; }
.av-pq__trame circle { fill: #fff; }
.av-pq__mer { fill: rgba(255,255,255,.25); font-family: var(--titre); font-style: italic; font-size: 15px; letter-spacing: .3em; text-transform: uppercase; }

/* 01/10 (MOSCO) : « Le matos » sous les 3 cartes de « Pourquoi » — visuels studio beige, legende dessous */
.av-matos { margin: 7vw 0 0; }
.av-matos__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 2vw; flex-wrap: wrap; margin-bottom: 2.4vw; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 1.4vw; }
.av-matos__tete h3 { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 76px); line-height: .95; color: #fff; }
.av-matos__tete .contour { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.av-matos__tete p { margin: 0; color: rgba(255,255,255,.6); font-size: clamp(14px, 1.1vw, 18px); }
.av-matos__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; }
/* 03/10 : 10 appareils (+ Avata 2, Meteor 75, Pavo 20, Ray-Ban Meta) -> 2 lignes de 5 */
.av-matos__liste li { grid-column: span 2; }
.av-matos__liste figure { margin: 0; }
.av-matos__liste img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: #d9d4cc; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.9); }
.av-matos__img { display: block; overflow: hidden; border-radius: 4px; }
.av-matos__liste figure:hover img { transform: scale(1.04); filter: saturate(1.05); }
.av-matos__liste figcaption { margin-top: 12px; color: #fff; font-family: var(--titre); font-weight: 700; font-size: clamp(13px, .95vw, 16px); letter-spacing: .02em; line-height: 1.3; }
.av-matos__liste figcaption span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.5); font-family: inherit; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 1100px) { .av-matos__liste { grid-template-columns: repeat(3, 1fr); } .av-matos__liste li { grid-column: auto; } }
@media (max-width: 766px) {
  .av-matos__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .av-matos__liste li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .av-matos__liste img { transition: none; } .av-matos__liste figure:hover img { transform: none; } }
/* 01/10 (MOSCO « ameliore les titres, gras quand il faut ») : categorie / modele en gras / benefice */
.av-matos__liste figcaption strong { display: block; font-weight: 900; font-stretch: 125%; font-size: clamp(13px, .95vw, 16px); letter-spacing: .01em; }
.av-matos__liste figcaption em { display: block; margin-top: 6px; font-style: normal; font-family: var(--texte, inherit); font-weight: 400; font-size: clamp(13px, .9vw, 15px); line-height: 1.45; color: rgba(255,255,255,.7); letter-spacing: 0; }
.av-matos__liste figcaption em strong { display: inline; font-size: inherit; font-weight: 800; color: #fff; }
.av-matos__tete p strong { color: #fff; font-weight: 800; }
/* 01/10 (MOSCO) : clic sur une photo du matos = meme voile + viseur que expertises / particuliers, texte « quand on le sort » */
.av-matos__tuile { aspect-ratio: 3 / 4; border-radius: 4px; background: #d9d4cc; }
.av-matos__tuile::after { display: none; }
.av-matos__tuile .av-exp__film { aspect-ratio: auto; border-radius: 0; filter: none; }
.av-matos__tuile .av-exp__viseur { inset: 5cqw; }
.av-matos__tuile .av-exp__texte { padding: 9cqw 9cqw; }
.av-matos__tuile .av-exp__surtitre { margin-bottom: 3cqw; font-size: clamp(9px, 3.6cqw, 12px); letter-spacing: .2em; }
.av-matos__tuile .av-exp__titre { font-size: clamp(20px, 11cqw, 34px); margin-bottom: 4cqw; }
.av-matos__tuile .av-exp__desc { font-size: clamp(12px, 5.2cqw, 16px); line-height: 1.4; margin-bottom: 5cqw; }
.av-matos__tuile .av-exp__tag { font-size: clamp(9px, 3.4cqw, 11px); padding: .45em .9em; }
.av-matos__tuile[aria-expanded="true"] { box-shadow: 0 0 40px 2px rgba(255,255,255,.28), 0 0 110px 10px rgba(255,255,255,.12); }
.av-matos__tuile .av-exp__titre .contour { white-space: nowrap; } /* « α7S III » ne se coupe pas en deux */

/* 01/10 (MOSCO) : 3 designs au clic sur le matos — cameras = voile blanc + viseur (inchange),
   drones = ecran de cockpit (HUD vert), action cams = vibe cascadeur (jaune danger + rubalise) */

/* --- DRONES : cockpit / HUD --- */
.av-matos__tuile--drone::before { background: rgba(4, 14, 10, .74); -webkit-backdrop-filter: blur(5px) saturate(.6); backdrop-filter: blur(5px) saturate(.6); }
.av-matos__tuile--drone .av-exp__viseur { display: none; }
.av-matos__tuile--drone .av-exp__texte { color: #b9ffd6; padding: 16cqw 15cqw 18cqw; }
.av-matos__tuile--drone .av-exp__surtitre { font-family: ui-monospace, Consolas, monospace; letter-spacing: .14em; color: #5dffa0; }
.av-matos__tuile--drone .av-exp__titre { color: #d8ffe8; text-shadow: 0 0 14px rgba(93,255,160,.45); }
.av-matos__tuile--drone .av-exp__titre .contour { -webkit-text-stroke-color: #5dffa0; }
.av-matos__tuile--drone .av-exp__desc { font-family: ui-monospace, Consolas, monospace; font-size: clamp(11px, 4.5cqw, 14px); line-height: 1.5; color: #b9ffd6; }
.av-matos__tuile--drone .av-exp__tag { border-color: #5dffa0; color: #5dffa0; border-radius: 2px; font-family: ui-monospace, Consolas, monospace; }
.av-matos__tuile--drone .av-exp__tag:first-child { background: #5dffa0; color: #04120b; }
.av-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; color: #5dffa0; font: 600 clamp(8px, 3.2cqw, 11px)/1 ui-monospace, Consolas, monospace; letter-spacing: .08em;
  opacity: 0; transition: opacity .4s ease; }
.av-matos__tuile[aria-expanded="true"] .av-hud { opacity: 1; }
.av-hud__haut, .av-hud__bas { position: absolute; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; }
.av-hud__haut { top: 5cqw; padding-bottom: 2.4cqw;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) bottom / 100% 5px no-repeat; }
.av-hud__bas { bottom: 5cqw; }
.av-hud__rec { color: #ff4d4d; animation: av-rec 1.2s steps(1) infinite; }
.av-hud__echelle { position: absolute; top: 22%; bottom: 22%; width: 7px; opacity: .8;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 9px); }
.av-hud__echelle--g { left: 5cqw; border-left: 1px solid currentColor; }
.av-hud__echelle--d { right: 5cqw; border-right: 1px solid currentColor; }
.av-hud__horizon { position: absolute; left: 14%; right: 14%; top: 50%; height: 1px; opacity: .35;
  background: linear-gradient(90deg, currentColor 0 38%, transparent 38% 62%, currentColor 62%); transform: rotate(-4deg); }
.av-hud__mire { position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; opacity: .5;
  border: 1px solid currentColor; border-radius: 50%; }
.av-matos__tuile--drone[aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(93,255,160,.6), 0 0 40px 2px rgba(93,255,160,.22); }

/* --- ACTION CAMS : cascadeur --- */
.av-matos__tuile--action::before { background: rgba(255, 212, 0, .9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.av-matos__tuile--action .av-exp__viseur { display: none; }
.av-matos__tuile--action .av-exp__texte { padding: 22cqw 10cqw; color: #0a0a0a; }
.av-matos__tuile--action .av-exp__titre { font-style: italic; font-size: clamp(24px, 14cqw, 44px); transform: skewY(-6deg) rotate(-2deg); transform-origin: left; }
.av-matos__tuile--action .av-exp__titre .contour { -webkit-text-stroke-color: #0a0a0a; }
.av-matos__tuile--action .av-exp__desc { font-weight: 600; }
.av-matos__tuile--action .av-exp__tag { border-color: #0a0a0a; border-radius: 0; transform: skewX(-10deg); }
.av-matos__tuile--action .av-exp__tag:first-child { background: #0a0a0a; color: #ffd400; }
.av-casc { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.av-matos__tuile[aria-expanded="true"] .av-casc { opacity: 1; }
.av-casc__bande { position: absolute; left: -10%; right: -10%; height: 9cqw; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: #0a0a0a; color: #ffd400; font: 900 clamp(9px, 4cqw, 13px)/1 var(--titre); font-stretch: 125%; letter-spacing: .12em; box-shadow: 0 4px 0 #ffd400, 0 -4px 0 #ffd400; }
.av-casc__bande::before, .av-casc__bande::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 3px;
  background: repeating-linear-gradient(-45deg, #ffd400 0 8px, #0a0a0a 8px 16px); }
.av-casc__bande::before { top: 0; } .av-casc__bande::after { top: auto; bottom: 0; }
.av-casc__bande--h { top: 7cqw; transform: rotate(-7deg); }
.av-casc__bande--b { bottom: 7cqw; transform: rotate(5deg); }
.av-casc__bande > span { display: inline-block; padding-left: 4px; animation: av-casc-defile 9s linear infinite; }
.av-casc__bande--b > span { animation-direction: reverse; }
@keyframes av-casc-defile { to { transform: translateX(-50%); } }
.av-matos__tuile--action[aria-expanded="true"] { animation: av-impact .45s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 3px #ffd400, 0 18px 50px -12px rgba(255,212,0,.5); }
@keyframes av-impact { 0% { transform: scale(1); } 30% { transform: scale(.95) rotate(-1.5deg); } 60% { transform: scale(1.03) rotate(1deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .av-hud, .av-casc { transition: none; }
  .av-hud__rec, .av-casc__bande > span, .av-matos__tuile--action[aria-expanded="true"] { animation: none; }
}
/* 01/10 (MOSCO « reste dans les couleurs noir et blanc ») : drones et action cams repasses en noir & blanc ;
   seul le point rouge REC garde sa couleur (ajoute aussi sur les cameras, demande MOSCO) */
.av-matos__tuile--drone::before { background: rgba(8, 8, 8, .8); -webkit-backdrop-filter: blur(5px) grayscale(1); backdrop-filter: blur(5px) grayscale(1); }
.av-matos__tuile--drone .av-exp__texte, .av-matos__tuile--drone .av-exp__desc { color: rgba(255,255,255,.82); }
.av-matos__tuile--drone .av-exp__surtitre, .av-hud { color: #fff; }
.av-matos__tuile--drone .av-exp__titre { color: #fff; text-shadow: none; }
.av-matos__tuile--drone .av-exp__titre .contour { -webkit-text-stroke-color: #fff; }
.av-matos__tuile--drone .av-exp__tag { border-color: #fff; color: #fff; }
.av-matos__tuile--drone .av-exp__tag:first-child { background: #fff; color: #0a0a0a; }
.av-hud__horizon, .av-hud__mire { opacity: .18; }
.av-matos__tuile--drone[aria-expanded="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 40px 2px rgba(255,255,255,.18); }

.av-matos__tuile--action::before { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(4px) grayscale(1); backdrop-filter: blur(4px) grayscale(1); }
.av-matos__tuile--action .av-exp__tag:first-child { color: #fff; }
.av-casc__bande { color: #fff; box-shadow: 0 4px 0 #fff, 0 -4px 0 #fff; }
.av-casc__bande::before, .av-casc__bande::after { background: repeating-linear-gradient(-45deg, #fff 0 8px, #0a0a0a 8px 16px); }
.av-matos__tuile--action[aria-expanded="true"] { box-shadow: 0 0 0 3px #fff, 0 18px 50px -12px rgba(255,255,255,.35); }

/* 01/10 (MOSCO « des effets au clic comme les action cams, adaptes au theme ») */
/* --- CAMERAS : declic d obturateur (flash), viseur qui claque, mise au point du texte --- */
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] { animation: av-declic .55s cubic-bezier(.2,.7,.2,1); }
@keyframes av-declic { 0% { filter: brightness(1); transform: scale(1); } 10% { filter: brightness(2.4); transform: scale(.97); } 45% { filter: brightness(1); } 100% { filter: none; transform: none; } }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__viseur { animation: av-viseur-claque .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes av-viseur-claque { 0% { transform: scale(1.35); opacity: 0; } 60% { transform: scale(.96); opacity: 1; } 100% { transform: none; opacity: 1; } }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte { animation: av-mise-au-point .8s ease-out; }
@keyframes av-mise-au-point { 0% { filter: blur(9px); } 55% { filter: blur(2px); } 75% { filter: blur(.6px); } 100% { filter: none; } }

/* --- DRONES : decollage + demarrage de l ecran de bord (balayage, scintillement, horizon qui s incline) --- */
.av-matos__tuile--drone[aria-expanded="true"] { animation: av-decollage .7s cubic-bezier(.2,.8,.2,1); }
@keyframes av-decollage { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(-3px); } 100% { transform: none; } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud { animation: av-hud-allumage .6s steps(1); }
@keyframes av-hud-allumage { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: .2; } 40% { opacity: 1; } 50% { opacity: .5; } 60%, 100% { opacity: 1; } }
.av-hud::after { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 20%; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.22) 70%, rgba(255,255,255,.7) 98%, transparent); }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud::after { animation: av-balayage 1.1s cubic-bezier(.5,0,.3,1) .1s; }
@keyframes av-balayage { 0% { top: -20%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__horizon { animation: av-roulis 1.4s cubic-bezier(.3,1.4,.5,1); }
@keyframes av-roulis { 0% { transform: rotate(14deg); } 50% { transform: rotate(-9deg); } 100% { transform: rotate(-4deg); } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__echelle--g { animation: av-echelle 1.2s ease-out; }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__echelle--d { animation: av-echelle 1.2s ease-out reverse; }
@keyframes av-echelle { 0% { background-position: 0 -60px; } 100% { background-position: 0 0; } }
.av-matos__tuile--drone[aria-expanded="true"] .av-exp__texte > span { animation: av-hud-texte .5s steps(4) both; }
.av-matos__tuile--drone[aria-expanded="true"] .av-exp__texte > span:nth-child(2) { animation-delay: .12s; }
.av-matos__tuile--drone[aria-expanded="true"] .av-exp__texte > span:nth-child(3) { animation-delay: .24s; }
.av-matos__tuile--drone[aria-expanded="true"] .av-exp__texte > span:nth-child(4) { animation-delay: .36s; }
@keyframes av-hud-texte { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .av-matos__tuile[aria-expanded="true"], .av-matos__tuile[aria-expanded="true"] .av-exp__viseur, .av-matos__tuile[aria-expanded="true"] .av-exp__texte,
  .av-matos__tuile[aria-expanded="true"] .av-exp__texte > span, .av-matos__tuile[aria-expanded="true"] .av-hud,
  .av-matos__tuile[aria-expanded="true"] .av-hud::after, .av-matos__tuile[aria-expanded="true"] [class*="av-hud__"] { animation: none !important; }
}
/* 01/10 (MOSCO « meme police que grosse camera pour le reste ») : drones et action cams reprennent la typo des cameras */
.av-matos__tuile--drone .av-exp__surtitre, .av-matos__tuile--drone .av-exp__desc, .av-matos__tuile--drone .av-exp__tag, .av-hud { font-family: var(--texte); }
.av-matos__tuile--drone .av-exp__surtitre { letter-spacing: .2em; }
.av-matos__tuile--drone .av-exp__desc { font-size: clamp(12px, 5.2cqw, 16px); line-height: 1.4; font-weight: 500; }
.av-matos__tuile--drone .av-exp__tag { border-radius: 999px; }
.av-hud { font-weight: 700; letter-spacing: .14em; }
.av-matos__tuile--action .av-exp__titre { font-style: normal; }
.av-matos__tuile--action .av-exp__desc { font-weight: 500; }
.av-matos__tuile--action .av-exp__tag { border-radius: 999px; transform: none; }
/* 01/10 (MOSCO « la mise au point des textes n est pas parfaite ») : le flou etait pose sur le bloc entier pendant que
   chaque ligne glissait et apparaissait de son cote -> deux mouvements qui se battaient. Maintenant chaque ligne fait
   sa propre mise au point, sans glissement : flou -> net -> petit « pompage » de l autofocus -> net, en cascade. */
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte { animation: none; }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action) .av-exp__texte > span { transform: none; transition: opacity .2s ease; }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte > span { animation: av-autofocus 1s cubic-bezier(.3,.7,.2,1) both; }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte > span:nth-child(2) { animation-delay: .07s; }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte > span:nth-child(3) { animation-delay: .14s; }
.av-matos__tuile:not(.av-matos__tuile--drone):not(.av-matos__tuile--action)[aria-expanded="true"] .av-exp__texte > span:nth-child(4) { animation-delay: .21s; }
@keyframes av-autofocus {
  0%   { opacity: 0; filter: blur(12px); transform: scale(1.05); }
  42%  { opacity: 1; filter: blur(0);    transform: scale(.995); }
  60%  { filter: blur(2.5px); transform: scale(1.01); }
  80%  { filter: blur(0);    transform: scale(1); }
  100% { opacity: 1; filter: none; transform: none; }
}
.av-matos__tuile .av-exp__texte > span { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .av-matos__tuile[aria-expanded="true"] .av-exp__texte > span { animation: none !important; opacity: 1; } }
/* 01/10 (MOSCO « l effet drone est bien mais pas assez fluide ») — causes : allumage et texte en « steps » (saccades
   voulues mais trop dures), balayage anime sur « top » et graduations sur « background-position » (le navigateur
   redessine a chaque image au lieu de juste deplacer). Tout passe en transform / opacity, courbes douces. */
.av-matos__tuile--drone[aria-expanded="true"] { animation: av-decollage2 .9s cubic-bezier(.22,1,.36,1); }
@keyframes av-decollage2 { 0% { transform: translateY(0); } 35% { transform: translateY(-9px); } 100% { transform: translateY(0); } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud { animation: av-hud-allumage2 .7s ease-out; }
@keyframes av-hud-allumage2 { 0% { opacity: 0; } 30% { opacity: .9; } 42% { opacity: .45; } 60%, 100% { opacity: 1; } }
.av-hud::after { top: 0; height: 22%; will-change: transform, opacity; transform: translateY(-100%); }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud::after { animation: av-balayage2 1.2s cubic-bezier(.45,0,.25,1) .05s both; }
@keyframes av-balayage2 { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(460%); opacity: 0; } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__echelle--g,
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__echelle--d { animation: av-echelle2 1s cubic-bezier(.22,1,.36,1) both; }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__echelle--d { animation-delay: .08s; }
@keyframes av-echelle2 { 0% { transform: translateY(18px) scaleY(.6); opacity: 0; } 100% { transform: none; opacity: .8; } }
.av-matos__tuile--drone[aria-expanded="true"] .av-hud__horizon { animation: av-roulis2 1.6s cubic-bezier(.22,1,.36,1); }
@keyframes av-roulis2 { 0% { transform: rotate(12deg); } 45% { transform: rotate(-7deg); } 75% { transform: rotate(-3deg); } 100% { transform: rotate(-4deg); } }
.av-matos__tuile--drone[aria-expanded="true"] .av-exp__texte > span { animation: av-hud-texte2 .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes av-hud-texte2 { 0% { opacity: 0; transform: translateX(-10px); clip-path: inset(0 100% 0 0); } 100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.av-hud, .av-hud__horizon, .av-hud__echelle, .av-matos__tuile--drone .av-exp__texte > span { will-change: transform, opacity; }
/* 01/10 (MOSCO « sur la carte rajoute Montpellier ») : 3e point, son halo, son etiquette et un 2e trajet depuis le 06 */
.av-pq__point--3 .av-pq__onde { animation-delay: .5s; }
.av-pq__trajet--2 { animation-delay: .6s; }

/* ===== 01/10 (MOSCO) : « Le montage » — mur de ses vraies timelines Premiere, tete de lecture fixe au centre ===== */
.av-mt { margin: 7vw 0 0; }
.av-mt__mur { position: relative; margin: 0 -2.4vw; padding: 34px 0 6px; display: grid; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.av-mt__rang { overflow: hidden; }
.av-mt__piste { display: flex; gap: 14px; width: max-content; animation: av-mt-gauche 80s linear infinite; }
.av-mt__rang--d .av-mt__piste { animation-name: av-mt-droite; animation-duration: 95s; }
@keyframes av-mt-gauche { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes av-mt-droite { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.av-mt__item { position: relative; margin: 0; flex: none; border-radius: 4px; overflow: hidden; background: #1a1a1a; }
.av-mt__item img { display: block; height: clamp(130px, 13vw, 210px); width: auto; filter: grayscale(1) brightness(.55) contrast(1.05);
  transition: filter .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.av-mt__item.est-lu img, .av-mt__item:hover img { filter: none; }
.av-mt__item:hover img { transform: scale(1.03); }
.av-mt__item figcaption { position: absolute; left: 10px; bottom: 10px; padding: .45em .9em; border-radius: 999px; background: #fff; color: #0a0a0a;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.av-mt__item.est-lu figcaption, .av-mt__item:hover figcaption { opacity: 1; transform: none; }
.av-mt__tete { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; pointer-events: none;
  box-shadow: 0 0 14px rgba(255,255,255,.7); }
.av-mt__tete::before { content: ""; position: absolute; top: 18px; left: -7px; width: 16px; height: 16px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.av-mt__tc { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 3px; background: #fff; color: #0a0a0a;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-mt__texte { margin: 2.6vw auto 0; max-width: 40em; text-align: center; color: rgba(255,255,255,.75); font-size: clamp(15px, 1.2vw, 20px); line-height: 1.55; }
.av-mt__texte strong { color: #fff; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .av-mt__piste { animation: none; }
  .av-mt__rang { overflow-x: auto; }
  .av-mt__tete { display: none; }
  .av-mt__item img { filter: none; transition: none; }
}

/* 02/10 (MOSCO : « on va prendre l effet G ») : lampe torche — une image de nos films cachee sous chaque carte,
   revelee seulement autour du pointeur (ou, sur telephone, de la carte au milieu de l ecran : classe .actif posee en JS).
   Version d avant : _outils/audiovisuel-avant-effet-g-2026-10-02.* */
.av-pq__carte { --x: 50%; --y: 50%; position: relative; overflow: hidden; isolation: isolate; }
.av-pq__torche {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none;
  opacity: 0; filter: brightness(.6);
  -webkit-mask-image: radial-gradient(260px circle at var(--x) var(--y), #000 0%, rgba(0,0,0,.6) 40%, transparent 75%);
  mask-image: radial-gradient(260px circle at var(--x) var(--y), #000 0%, rgba(0,0,0,.6) 40%, transparent 75%);
  transition: opacity .5s ease;
}
.av-pq__carte:hover .av-pq__torche, .av-pq__carte.actif .av-pq__torche { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .av-pq__torche { transition: none; } }
/* 02/10 (MOSCO : « ameliore le design du cadre avec du blanc glacier et noir profond ») :
   fond noir profond, contour et textes blanc glacier (blanc a peine bleute), filet de lumiere en haut ;
   la carte allumee (souris ou defilement) prend un contour glacier franc et un halo froid. */
.av-pq__cartes { --glacier: 234, 244, 255; }
.av-pq__carte {
  background: radial-gradient(120% 70% at 50% 0%, #0b0e12 0%, #030304 62%);
  border: 1px solid rgba(var(--glacier), .1);
  box-shadow: inset 0 1px 0 rgba(var(--glacier), .06);
  transition: border-color .5s ease, box-shadow .5s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.av-pq__carte::after {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--glacier), .9), transparent);
  opacity: .3; transition: opacity .5s ease, left .6s cubic-bezier(.2,.7,.2,1), right .6s cubic-bezier(.2,.7,.2,1);
}
.av-pq__carte:hover, .av-pq__carte.actif {
  background: radial-gradient(120% 70% at 50% 0%, #0b0e12 0%, #030304 62%);
  border-color: rgba(var(--glacier), .5);
  box-shadow: inset 0 1px 0 rgba(var(--glacier), .2), 0 30px 80px -40px rgba(170, 215, 255, .4);
}
.av-pq__carte:hover::after, .av-pq__carte.actif::after { opacity: 1; left: 0; right: 0; }
.av-pq__carte svg { fill: rgb(var(--glacier)); }
.av-pq__carte h3, .av-pq__carte p strong { color: rgb(var(--glacier)); }
.av-pq__carte p { color: rgba(var(--glacier), .7); }
@media (prefers-reduced-motion: reduce) { .av-pq__carte, .av-pq__carte::after { transition: none; } }
/* 02/10 (MOSCO : swiper les timelines, avancer / reculer, fluide) : le defilement est pilote en JS (classe posee par le
   script) ; sans JS ou en mouvement reduit, l animation CSS / le defilement natif d avant restent. */
.av-mt__mur.est-pilote { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.av-mt__mur.est-pilote.est-tenu { cursor: grabbing; }
.av-mt__mur.est-pilote .av-mt__piste { animation: none; will-change: transform; }
.av-mt__mur img { -webkit-user-drag: none; }
.av-mt__mur:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* 02/10 (MOSCO : « ameliore encore les cadres de pourquoi nous choisir ») — meme glacier / noir profond, en plus fin :
   coins arrondis, contour en degrade (la lumiere tombe du haut : glacier franc en haut, presque rien en bas),
   second filet interieur facon passe-partout, reflet givre en haut. Allumee : contour glacier sur tout le tour + halo.
   Version d avant : _outils/audiovisuel-avant-cadres-v2-2026-10-02.css */
.av-pq__carte { border: 0; border-radius: 20px; box-shadow: none;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(var(--glacier), .07), transparent 70%),
    linear-gradient(180deg, #07090c 0%, #020203 100%); }
.av-pq__carte:hover, .av-pq__carte.actif {
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(var(--glacier), .12), transparent 70%),
    linear-gradient(180deg, #07090c 0%, #020203 100%);
  box-shadow: 0 40px 90px -50px rgba(170, 215, 255, .45); }
/* contour en degrade : peint sur ::before, evide au centre par un masque */
.av-pq__carte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(var(--glacier), .45) 0%, rgba(var(--glacier), .12) 45%, rgba(var(--glacier), .04) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .5s ease; }
.av-pq__carte:hover::before, .av-pq__carte.actif::before {
  background: linear-gradient(180deg, rgba(var(--glacier), .95) 0%, rgba(var(--glacier), .45) 50%, rgba(var(--glacier), .25) 100%); }
/* passe-partout : second filet a l interieur (remplace le filet du haut) */
.av-pq__carte::after { top: 9px; left: 9px; right: 9px; bottom: 9px; height: auto; border-radius: 13px; background: none;
  border: 1px solid rgba(var(--glacier), .05); opacity: 1; transition: border-color .5s ease; }
.av-pq__carte:hover::after, .av-pq__carte.actif::after { left: 9px; right: 9px; border-color: rgba(var(--glacier), .14); }
.av-pq__torche { border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .av-pq__carte::before { transition: none; } }
/* 02/10 (MOSCO : « la carte de France coupe net, fais-la bien fondue sur les bords ») : l ancien masque radial laissait
   ~65 % d opacite au milieu des 4 cotes -> bord droit visible. Desormais : marge ajoutee autour du dessin (viewBox
   elargi, la France reste entiere et nette) et fondu progressif sur les 4 cotes, en CSS. */
.av-pq__carte-fr { max-width: 760px; }
.av-pq__points {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* 02/10 (MOSCO : swiper les projets) : on peut attraper la piste a la souris ; pendant le geste, aimantation et
   defilement doux coupes (sinon la piste « resiste » au pointeur), retablis au lacher. Au doigt : natif. */
@media (hover: hover) and (pointer: fine) { .av-projets__piste { cursor: grab; } }
.av-projets__piste.est-tire { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
.av-projets__piste img { -webkit-user-drag: none; }
.av-projets__piste { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
/* 02/10 (MOSCO) : « Je veux tourner ici » qui suit le pointeur sur la carte de France (script dans audiovisuel.html) */
.av-pq__carte-fr { --px: 50%; --py: 50%; }
@media (hover: hover) and (pointer: fine) { .av-pq__carte-fr.vise { cursor: none; } }
.av-pq__ici {
  position: absolute; z-index: 3; left: var(--px); top: var(--py); display: flex; align-items: center; gap: 12px;
  color: #0a0a0a; text-decoration: none; opacity: 0; pointer-events: none;
  transform: translate(-11px, -11px) scale(.9); transform-origin: 11px 11px;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.av-pq__carte-fr.vise .av-pq__ici, .av-pq__ici:focus-visible { opacity: 1; pointer-events: auto; transform: translate(-11px, -11px) scale(1); }
.av-pq__ici:focus-visible { left: 50%; top: 50%; outline: none; }
.av-pq__ici:focus-visible .av-pq__ici-txt { outline: 2px solid #fff; outline-offset: 3px; }
/* le repere : un point blanc dans un anneau, comme les villes de la carte */
.av-pq__ici-pt { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 18px rgba(255,255,255,.55); }
.av-pq__ici-pt::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.av-pq__ici-pt::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid #fff; animation: av-ici-onde 1.6s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes av-ici-onde { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.av-pq__ici-txt { white-space: nowrap; padding: .6em 1.1em; border-radius: 999px; background: #fff; color: #0a0a0a;
  font-family: var(--titre); font-weight: 900; font-stretch: 110%; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .av-pq__ici { transition: none; } .av-pq__ici-pt::before { animation: none; } }.av-pq__carte-fr.ici-gauche .av-pq__ici { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -11px) scale(.9); transform-origin: calc(100% - 11px) 11px; }
.av-pq__carte-fr.ici-gauche.vise .av-pq__ici { transform: translate(calc(-100% + 11px), -11px) scale(1); }
/* 02/10 (MOSCO : « une ecriture plus stylee pour je veux tourner ici, et un effet ») : plus de pastille blanche.
   Typo du site : « Je veux » en contour italique, « TOURNER ICI » en plein, gras et etire ; un cadre de viseur
   (4 coins) se referme autour ; les lettres montent une a une a chaque entree sur la carte, avec un leger flou. */
.av-pq__ici-txt {
  position: relative; display: grid; gap: 2px; padding: 12px 16px 12px 14px; background: none; box-shadow: none; border-radius: 0;
  color: #fff; font-family: var(--titre); text-transform: uppercase; line-height: .95; letter-spacing: .01em;
  --c: rgba(255,255,255,.9); --l: 12px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1.5px var(--l) no-repeat;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.85));
}
.av-pq__ici-l1, .av-pq__ici-l2 { display: block; overflow: hidden; white-space: nowrap; }
.av-pq__ici-l1 { font-size: 15px; font-style: italic; font-weight: 900; font-stretch: 125%; color: transparent; -webkit-text-stroke: 1px #fff; }
.av-pq__ici-l2 { font-size: 24px; font-weight: 900; font-stretch: 125%; text-shadow: 0 0 22px rgba(255,255,255,.35); }
.av-pq__lettre { display: inline-block; transform: translateY(105%); opacity: 0; }
.av-pq__carte-fr.vise .av-pq__lettre, .av-pq__ici:focus-visible .av-pq__lettre {
  animation: av-ici-lettre .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 28ms) forwards; }
@keyframes av-ici-lettre {
  0% { transform: translateY(105%) skewY(8deg); opacity: 0; filter: blur(4px); }
  100% { transform: none; opacity: 1; filter: blur(0); } }
/* le cadre de viseur se referme sur le texte a l apparition */
.av-pq__carte-fr.vise .av-pq__ici-txt { animation: av-ici-cadre .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes av-ici-cadre { from { --l: 0px; padding: 20px 26px 20px 24px; opacity: 0; } to { --l: 12px; padding: 12px 16px 12px 14px; opacity: 1; } }
@property --l { syntax: "<length>"; initial-value: 12px; inherits: true; }
@media (prefers-reduced-motion: reduce) {
  .av-pq__lettre { transform: none; opacity: 1; }
  .av-pq__carte-fr.vise .av-pq__lettre, .av-pq__carte-fr.vise .av-pq__ici-txt { animation: none; }
}/* lisibilite : la route Paris-06 et la trame passaient sous le texte -> leger voile flou derriere, dans le cadre */
.av-pq__ici-txt { background-color: rgba(5,6,8,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 02/10 (MOSCO : « non trop gros, reviens comme tout a l heure mais juste mieux ») : retour a la pastille sur UNE ligne,
   en plus fin. Annule cadre viseur, voile flou et 2 lignes de la version precedente. Ajouts : la pastille se deplie
   depuis le repere, les lettres montent discretement, fleche ↗ (= on peut cliquer). */
.av-pq__ici-txt {
  display: flex; align-items: center; gap: 8px; padding: .62em 1.05em .62em 1.1em; border-radius: 999px;
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; filter: none;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4);
  color: #0a0a0a; line-height: 1; animation: none;
}
.av-pq__ici-l2 { font-size: 12px; font-weight: 900; font-stretch: 110%; letter-spacing: .12em; text-shadow: none; color: #0a0a0a; overflow: hidden; }
.av-pq__ici-fl { font-size: 13px; font-weight: 700; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.av-pq__ici:hover .av-pq__ici-fl { transform: translate(2px, -2px); }
.av-pq__carte-fr.vise .av-pq__ici-txt { animation: av-ici-pastille .4s cubic-bezier(.2,.8,.2,1) both; }
.av-pq__carte-fr.ici-gauche.vise .av-pq__ici-txt { animation-name: av-ici-pastille-g; }
@keyframes av-ici-pastille { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes av-ici-pastille-g { from { clip-path: inset(0 0 0 100% round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
.av-pq__carte-fr.vise .av-pq__lettre, .av-pq__ici:focus-visible .av-pq__lettre {
  animation: av-ici-lettre2 .4s cubic-bezier(.2,.8,.2,1) calc(80ms + var(--i) * 14ms) forwards; }
@keyframes av-ici-lettre2 { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .av-pq__carte-fr.vise .av-pq__ici-txt, .av-pq__carte-fr.vise .av-pq__lettre { animation: none; } }
/* 02/10 (MOSCO) : FIN DE PAGE — appel au devis (cadre de viseur, REC, badge qui tourne) + pied de page en colonnes.
   Structure de grow360.fr/audiovisuel. Version d avant : _outils/audiovisuel-avant-fin-de-page-2026-10-02.* */
.av-fin { padding: 8vw 2.4vw 6vw; }
.av-fin__cadre { position: relative; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; padding: 8vw 4vw; }
.av-fin__coin { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255,255,255,.75); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.av-fin__coin--hg { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.av-fin__coin--hd { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.av-fin__coin--bg { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.av-fin__coin--bd { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
/* les coins arrivent de plus loin quand le bloc entre a l ecran (le viseur fait le point) */
.av-fin:not(.est-vu) .av-fin__cadre > .av-fin__coin--hg { transform: translate(-30px, -30px); }
.av-fin:not(.est-vu) .av-fin__cadre > .av-fin__coin--hd { transform: translate(30px, -30px); }
.av-fin:not(.est-vu) .av-fin__cadre > .av-fin__coin--bg { transform: translate(-30px, 30px); }
.av-fin:not(.est-vu) .av-fin__cadre > .av-fin__coin--bd { transform: translate(30px, 30px); }
.av-fin__rec { position: absolute; top: 22px; left: 40px; margin: 0; display: flex; align-items: center; gap: 8px; font: 700 12px/1 "Gabarito", sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.8); }
.av-fin__rec span { width: 9px; height: 9px; border-radius: 50%; background: #ff2a2a; animation: av-rec 1.2s steps(2) infinite; }
.av-fin__rec b { font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
@keyframes av-rec { 50% { opacity: 0; } }
.av-fin__titre { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(40px, 6.4vw, 124px); line-height: .95; color: #fff; }
.av-fin__titre .contour { color: transparent; -webkit-text-stroke: 2px #fff; }
.av-fin__mail { color: rgba(255,255,255,.6); font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.av-fin__mail:hover, .av-fin__mail:focus-visible { color: #fff; border-color: #fff; }
/* badge « MADE BY MOSCO » */
.av-badge { position: absolute; right: 5%; top: 50%; width: clamp(120px, 11vw, 190px); aspect-ratio: 1; margin-top: calc(clamp(120px, 11vw, 190px) / -2); display: grid; place-items: center; color: #fff; perspective: 600px; }
.av-badge__anneau { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.av-badge__anneau text { fill: #fff; font-family: var(--titre); font-weight: 900; font-stretch: 125%; font-size: 15.5px; letter-spacing: .02em; }
.av-badge__logo { width: 36%; height: auto; overflow: visible; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.av-badge__logo path, .av-badge__logo polygon { fill: transparent; stroke: #fff; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.av-fin.est-vu .av-badge__logo path, .av-fin.est-vu .av-badge__logo polygon { animation: av-logo-trait 1.6s cubic-bezier(.6,0,.2,1) .2s forwards, av-logo-plein .6s ease 1.6s forwards; }
@keyframes av-logo-trait { to { stroke-dashoffset: 0; } }
@keyframes av-logo-plein { to { fill: #fff; stroke-width: 0; } }
.av-badge:hover .av-badge__logo, .av-badge:focus-visible .av-badge__logo { transform: rotateY(360deg) scale(1.08); }
.av-badge:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 50%; }
/* pied de page */
.av-pied { padding: 0 2.4vw 28px; color: #fff; }
.av-pied__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: 3vw; padding: 5vw 0 4vw; border-top: 1px solid rgba(255,255,255,.14); }
.av-pied h2 { margin: 0 0 22px; font-family: var(--titre); font-weight: 600; font-size: clamp(20px, 1.5vw, 26px); color: rgba(255,255,255,.45); text-transform: none; }
.av-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.av-pied li a, .av-pied li span { color: rgba(255,255,255,.85); font-size: 15px; text-decoration: none; }
.av-pied li span { color: rgba(255,255,255,.45); }
.av-pied li a { background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s cubic-bezier(.2,.7,.2,1), color .3s; }
.av-pied li a:hover, .av-pied li a:focus-visible { color: #fff; background-size: 100% 1px; }
.av-pied__contact { position: relative; display: grid; place-items: center; min-height: 200px; color: #fff; text-decoration: none; font-family: var(--titre); font-weight: 600; font-size: clamp(18px, 1.5vw, 24px); text-transform: uppercase; letter-spacing: .02em; transition: background .4s; }
.av-pied__contact .av-fin__coin { width: 18px; height: 18px; }
.av-pied__contact:hover, .av-pied__contact:focus-visible { background: rgba(255,255,255,.05); }
.av-pied__contact:hover .av-fin__coin--hg { transform: translate(8px, 8px); } .av-pied__contact:hover .av-fin__coin--hd { transform: translate(-8px, 8px); }
.av-pied__contact:hover .av-fin__coin--bg { transform: translate(8px, -8px); } .av-pied__contact:hover .av-fin__coin--bd { transform: translate(-8px, -8px); }
.av-pied__bas { padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 6px; }
.av-pied__bas p { margin: 0; font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.6; }
@media (max-width: 900px) {
  .av-pied__cols { grid-template-columns: 1fr 1fr; }
  .av-pied__contact { grid-column: 1 / -1; min-height: 140px; }
  .av-badge { position: relative; right: auto; top: auto; margin: 10px 0 0; width: 130px; }
  .av-fin__rec { left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-fin__coin, .av-badge__logo { transition: none; }
  .av-fin:not(.est-vu) .av-fin__cadre > .av-fin__coin { transform: none; }
  .av-fin__rec span { animation: none; }
  .av-badge__logo path, .av-badge__logo polygon { fill: #fff; stroke-width: 0; animation: none !important; }
}/* correctif : le badge chevauchait « FILM. » -> en bas a droite du cadre, loin du titre (Grow le met aussi a l ecart) */
.av-badge { top: auto; bottom: 9%; right: 6%; margin-top: 0; }
@media (max-width: 900px) { .av-badge { bottom: auto; right: auto; } }/* correctif : « Contactez-nous » et la fleche tombaient sur 2 lignes (grille) -> sur une ligne */
.av-pied__contact { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* 02/10 (MOSCO) : AVIS GOOGLE apres la carte — les vrais avis, en cartes glacier / noir profond qui defilent seules
   (pause au survol), note 5,0 cliquable vers la fiche, lien « laissez un avis ». */
.av-avis { margin: 7vw 0 0; }
.av-avis__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; flex-wrap: wrap; margin-bottom: 2.4vw; padding-bottom: 1.4vw; border-bottom: 1px solid rgba(255,255,255,.18); }
.av-avis__tete h3 { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 76px); line-height: .95; color: #fff; }
.av-avis__tete .contour { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.av-avis__note { display: flex; align-items: baseline; gap: 12px; color: #fff; text-decoration: none; }
.av-avis__note b { font-family: var(--titre); font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 3vw, 52px); line-height: 1; }
.av-avis__note span:last-child { font-size: 14px; color: rgba(255,255,255,.65); border-bottom: 1px solid rgba(255,255,255,.3); }
.av-avis__note:hover span:last-child, .av-avis__note:focus-visible span:last-child { color: #fff; border-color: #fff; }
.av-avis__etoiles { color: #f5c542; letter-spacing: .12em; font-size: 15px; }
.av-avis__rail { overflow: hidden; margin: 0 -2.4vw; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.av-avis__piste { list-style: none; margin: 0; padding: 6px 0; display: flex; gap: 18px; width: max-content; animation: av-avis-defile 60s linear infinite; }
.av-avis__rail:hover .av-avis__piste, .av-avis__rail:focus-within .av-avis__piste { animation-play-state: paused; }
@keyframes av-avis-defile { to { transform: translateX(-50%); } }
.av-avis__carte { flex: none; width: clamp(280px, 26vw, 420px); display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 26px; border-radius: 18px;
  background: radial-gradient(90% 45% at 50% 0%, rgba(234,244,255,.07), transparent 70%), linear-gradient(180deg, #07090c, #020203);
  box-shadow: inset 0 0 0 1px rgba(234,244,255,.12); transition: box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.av-avis__carte:hover { box-shadow: inset 0 0 0 1px rgba(234,244,255,.45), 0 30px 70px -40px rgba(170,215,255,.4); transform: translateY(-4px); }
.av-avis__carte blockquote { margin: 0; flex: 1; color: rgba(234,244,255,.85); font-size: 15px; line-height: 1.6; }
.av-avis__carte blockquote::before { content: "“"; display: block; height: .55em; font-family: Georgia, serif; font-size: 54px; line-height: 1; color: rgba(234,244,255,.35); }
.av-avis__nom { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.av-avis__laisser { display: inline-block; margin-top: 2.2vw; color: rgba(255,255,255,.65); font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; }
.av-avis__laisser:hover, .av-avis__laisser:focus-visible { color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .av-avis__piste { animation: none; } .av-avis__rail { overflow-x: auto; } .av-avis__carte { transition: none; } }

/* 02/10 (MOSCO : « un bouton demander un devis style, et en dessous un lien WhatsApp ») — fin de page.
   Pastille blanche ; au survol le texte roule (l ancien monte, le nouveau arrive), la pastille se remplit de noir
   depuis la gauche et la fleche tourne dans son rond. */
.av-devis { position: relative; display: inline-flex; align-items: center; gap: 18px; padding: 10px 10px 10px 34px; border-radius: 999px; background: #fff; color: #0a0a0a; text-decoration: none; overflow: hidden; isolation: isolate;
  font-family: var(--titre); font-weight: 900; font-stretch: 110%; font-size: clamp(15px, 1.15vw, 19px); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1px #fff, 0 20px 60px -20px rgba(255,255,255,.35); transition: color .5s cubic-bezier(.7,0,.2,1), box-shadow .5s; }
.av-devis::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0a0a0a; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.av-devis:hover::before, .av-devis:focus-visible::before { transform: scaleX(1); }
.av-devis:hover, .av-devis:focus-visible { color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 20px 70px -20px rgba(255,255,255,.5); }
.av-devis:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.av-devis__txt { position: relative; display: block; overflow: hidden; line-height: 1.2; }
.av-devis__txt > span { display: block; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.av-devis__txt::after { content: attr(data-txt); position: absolute; left: 0; top: 100%; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.av-devis:hover .av-devis__txt > span, .av-devis:focus-visible .av-devis__txt > span,
.av-devis:hover .av-devis__txt::after, .av-devis:focus-visible .av-devis__txt::after { transform: translateY(-100%); }
.av-devis__rond { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0a0a0a; transition: background .5s cubic-bezier(.7,0,.2,1), transform .5s cubic-bezier(.7,0,.2,1); }
.av-devis__rond svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.av-devis:hover .av-devis__rond, .av-devis:focus-visible .av-devis__rond { background: #fff; transform: rotate(45deg); }
.av-devis:hover .av-devis__rond svg, .av-devis:focus-visible .av-devis__rond svg { stroke: #0a0a0a; }
.av-wa { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); text-decoration: none; font-size: 15px; transition: color .3s; }
.av-wa__ico { width: 22px; height: 22px; fill: #25d366; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.av-wa b { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(37,211,102,.6); }
.av-wa:hover, .av-wa:focus-visible { color: #fff; }
.av-wa:hover .av-wa__ico { transform: scale(1.15) rotate(-8deg); }
.av-fin__cadre { gap: 22px; }
.av-fin__titre { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) {
  .av-devis, .av-devis::before, .av-devis__txt > span, .av-devis__txt::after, .av-devis__rond, .av-wa__ico { transition: none; }
}
/* 02/10 (MOSCO : « mets-la comme Une belle video, c est bien... ») : l intro des particuliers prend exactement le
   style de l intro de « Pourquoi nous choisir ? » (meme taille, texte plein, un seul mot en gras). */
.av-part__intro { max-width: none; font-size: clamp(17px, 1.5vw, 26px); line-height: 1.4; color: #fff; }
html.fond-blanc .av-part__intro { color: var(--noir); }
.av-part__intro strong { font-weight: 800; }
/* 02/10 (MOSCO : « je veux pouvoir swiper les avis ») : defilement pilote en JS -> l animation CSS est coupee ;
   la piste s attrape a la souris ou au doigt (geste vertical laisse a la page). Sans JS ou mouvement reduit : inchange. */
.av-avis__rail.est-pilote { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.av-avis__rail.est-pilote.est-tenu { cursor: grabbing; }
.av-avis__rail.est-pilote .av-avis__piste { animation: none; will-change: transform; }
.av-avis__rail:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* 02/10 (MOSCO : « comme nos projets ou comme notre matos ») : ANNULE le defilement automatique des avis.
   Rangee a defilement horizontal natif, aimantee carte par carte (doigt), attrapable a la souris (script). */
.av-avis__rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 2.4vw; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: none; mask-image: none; cursor: auto; touch-action: auto; }
.av-avis__rail::-webkit-scrollbar { display: none; }
.av-avis__piste, .av-avis__rail.est-pilote .av-avis__piste { animation: none; transform: none; padding: 6px 2.4vw; }
.av-avis__carte { scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) { .av-avis__rail { cursor: grab; } }
.av-avis__rail.est-tire { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
/* 02/10 (MOSCO) : WhatsApp / numero / mail = MEME bouton que le devis, en version contour (le devis reste le plein). */
.av-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }
.av-devis--ligne { background: transparent; color: #fff; padding: 7px 7px 7px 24px; gap: 14px; font-size: clamp(12px, .85vw, 14px); box-shadow: 0 0 0 1px rgba(255,255,255,.4); text-transform: none; letter-spacing: .03em; }
.av-devis--ligne::before { background: #fff; }
.av-devis--ligne:hover, .av-devis--ligne:focus-visible { color: #0a0a0a; box-shadow: 0 0 0 1px #fff, 0 20px 60px -25px rgba(255,255,255,.4); }
.av-devis--ligne .av-devis__rond { width: 40px; height: 40px; background: #fff; }
.av-devis--ligne .av-devis__rond svg { width: 18px; height: 18px; stroke: #0a0a0a; }
.av-devis--ligne .av-devis__rond svg.av-devis__plein { fill: #0a0a0a; stroke: none; }
.av-devis--ligne:hover .av-devis__rond, .av-devis--ligne:focus-visible .av-devis__rond { background: #0a0a0a; transform: none; }
.av-devis--ligne:hover .av-devis__rond svg, .av-devis--ligne:focus-visible .av-devis__rond svg { stroke: #fff; }
.av-devis--ligne:hover .av-devis__rond svg.av-devis__plein { fill: #25d366; }
/* 02/10 (MOSCO : « assemblage C ») : le logo du badge ne se dessine plus trait par trait. A l arrivee du bloc,
   les 2 pieces du logo (le M dans l hexagone + la barre du milieu) arrivent de loin, s emboitent avec un petit choc,
   et une onde de lumiere part. L anneau « MADE BY MOSCO » continue de tourner autour. Essais : _essais-logo.html */
.av-badge__logo path, .av-badge__logo polygon { fill: #fff; stroke: none; stroke-dasharray: none; animation: none !important; }
.av-badge__p1, .av-badge__p2 { transform-box: fill-box; transform-origin: center; }
.av-fin:not(.est-vu) .av-badge__p1 { transform: translate(-60%, 20%) rotate(-25deg); opacity: 0; }
.av-fin:not(.est-vu) .av-badge__p2 { transform: translate(0, -140%); opacity: 0; }
.av-fin.est-vu .av-badge__p1 { animation: av-logo-entre .9s cubic-bezier(.2,.9,.25,1.25) .15s both !important; }
.av-fin.est-vu .av-badge__p2 { animation: av-logo-entre .7s cubic-bezier(.2,.9,.25,1.4) .75s both !important; }
@keyframes av-logo-entre { from { opacity: 0; } to { transform: none; opacity: 1; } }
.av-fin.est-vu .av-badge__logo { animation: av-logo-choc .35s ease 1.4s; }
@keyframes av-logo-choc { 50% { transform: scale(.92); } }
.av-badge__onde { position: absolute; width: 36%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(234,244,255,.85); opacity: 0; pointer-events: none; }
.av-fin.est-vu .av-badge__onde { animation: av-logo-onde 1.1s cubic-bezier(.2,.7,.2,1) 1.45s; }
@keyframes av-logo-onde { from { transform: scale(.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .av-fin:not(.est-vu) .av-badge__p1, .av-fin:not(.est-vu) .av-badge__p2 { transform: none; opacity: 1; }
  .av-fin.est-vu .av-badge__p1, .av-fin.est-vu .av-badge__p2, .av-fin.est-vu .av-badge__logo, .av-fin.est-vu .av-badge__onde { animation: none !important; }
}
/* 02/10 (MOSCO : « les 4 moyens de contact a la suite, alignes de haut en bas, et le logo WhatsApp en vert ») :
   devis + WhatsApp + numero + mail empiles, meme largeur, texte a gauche / rond a droite. */
.av-contacts { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; width: min(400px, 100%); margin-top: 6px; }
.av-contacts .av-devis { justify-content: space-between; width: 100%; padding: 8px 8px 8px 26px; font-size: clamp(13px, .95vw, 16px); }
.av-contacts .av-devis__rond { width: 44px; height: 44px; }
.av-devis--ligne .av-devis__rond svg.av-devis__plein, .av-devis--ligne:hover .av-devis__rond svg.av-devis__plein { fill: #25d366; }
.av-devis--ligne .av-devis__rond:has(.av-devis__plein) { background: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(37,211,102,.5); }
.av-devis--ligne svg.av-devis__plein { width: 22px; height: 22px; }/* 02/10 (MOSCO) : « Vous avez travaille avec nous ? Laissez un avis » centre */
.av-avis__laisser { display: table; margin-left: auto; margin-right: auto; }
/* 02/10 (MOSCO : « remonte un peu Parlons de votre prochain film ») : moins de vide au-dessus du bloc. */
.av-fin { padding-top: 2vw; }
.av-fin__cadre { min-height: 0; padding-top: 5vw; padding-bottom: 6vw; }
/* le badge rejoue l assemblage au survol (script) : on retire le tour sur lui-meme qui se melangeait au choc */
.av-badge:hover .av-badge__logo, .av-badge:focus-visible .av-badge__logo { transform: none; }/* badge devenu un bouton (clic = rejouer) : on efface l apparence de bouton par defaut */
.av-badge { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
/* 02/10 : nouvelle phrase de banniere « Vos concurrents ont une video. Vous aurez un film. » — elle tombait sur
   2 lignes coupees au milieu (« Vous aurez un / film. ») : largeur liberee, un peu plus grande, la 2e phrase insecable. */
.av-banniere__texte { max-width: none; font-size: clamp(16px, 1.35vw, 22px); }
.av-banniere__texte strong { font-weight: 700; color: #fff; white-space: nowrap; }
/* 02/10 : bouton devis de la banniere = celui de la fin de page, un peu plus grand ; leger halo qui respire
   pour attirer l oeil sur la video de fond (coupe en mouvement reduit). */
.av-devis--banniere { font-size: clamp(15px, 1.1vw, 18px); padding: 10px 10px 10px 32px; }
.av-devis--banniere .av-devis__rond { width: 50px; height: 50px; }
.av-devis--banniere { animation: av-devis-halo 2.8s ease-in-out infinite; }
.av-devis--banniere:hover, .av-devis--banniere:focus-visible { animation: none; }
@keyframes av-devis-halo { 0%, 100% { box-shadow: 0 0 0 1px #fff, 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 1px #fff, 0 0 0 12px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .av-devis--banniere { animation: none; } }
/* 02/10 CORRECTIF (MOSCO : « l animation de logo est differente de ce que tu m as montre ») — CAUSE : ma keyframe
   commencait par « from { opacity: 0 } » SANS position de depart ; une fois le bloc a l ecran, la position decalee
   ne s appliquait plus -> les 2 pieces apparaissaient en fondu SUR PLACE au lieu d arriver de loin. Chaque piece a
   maintenant sa propre keyframe avec son point de depart, comme dans l essai C (_essais-logo.html). Logo agrandi. */
.av-fin.est-vu .av-badge__p1 { animation: av-logo-p1 .9s cubic-bezier(.2,.9,.25,1.25) .1s both !important; }
.av-fin.est-vu .av-badge__p2 { animation: av-logo-p2 .7s cubic-bezier(.2,.9,.25,1.4) .7s both !important; }
@keyframes av-logo-p1 { from { transform: translate(-60%, 20%) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes av-logo-p2 { from { transform: translate(0, -140%); opacity: 0; } to { transform: none; opacity: 1; } }
.av-fin.est-vu .av-badge__logo { animation: av-logo-choc .35s ease 1.35s; }
.av-fin.est-vu .av-badge__onde { animation: av-logo-onde 1s cubic-bezier(.2,.7,.2,1) 1.4s; }
.av-badge__logo { width: 42%; }
@media (prefers-reduced-motion: reduce) { .av-fin.est-vu .av-badge__p1, .av-fin.est-vu .av-badge__p2 { animation: none !important; } }
/* 02/10 (MOSCO : « Je veux tourner ici doit descendre tout en bas pour prendre contact ») : liens internes (#devis)
   = descente douce au lieu d un saut sec. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 02/10 : « Made by Mosco » tout en bas de la page, en grand, dans la typo des titres */
.av-pied__signature { margin: 34px 0 6px; text-align: center; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(36px, 9vw, 170px); line-height: .9; letter-spacing: -.01em; color: rgba(255,255,255,.92); }
.av-pied__signature .contour { color: transparent; -webkit-text-stroke: 1.5px #fff; }
/* 02/10 (MOSCO) : logo anime + « Made by Mosco » centres sous les 4 boutons de contact (plus en coin a droite) */
.av-signe { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4vw; }
.av-signe .av-badge { position: relative; right: auto; top: auto; bottom: auto; margin: 0; width: clamp(90px, 7vw, 120px); }
.av-signe .av-badge__logo { width: 70%; }
.av-signe__texte { margin: 0; font-family: var(--titre); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 28px); letter-spacing: .04em; color: #fff; }
.av-signe__texte .contour { color: transparent; -webkit-text-stroke: 1px #fff; }
/* 02/10 : l onde ronde est remplacee par l eclat de petits messages (script) */
.av-badge__onde { display: none; }
.av-signe { position: relative; }
.av-merci { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; padding: .5em .95em; border-radius: 999px;
  background: #fff; color: #0a0a0a; font: 700 12px/1 "Gabarito", sans-serif; letter-spacing: .02em; box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); opacity: 0; }
.av-merci:nth-child(even) { background: #0a0a0a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
/* 02/10 (MOSCO : « remets le rond ») : l onde ronde revient a l impact (explosion de messages desactivee) */
.av-badge__onde { display: block; }
/* 02/10 (MOSCO : « fais defiler les avis lentement ») : pendant le defilement automatique, pas d aimantation ni de defilement doux (sinon chaque pixel serait ramene a la carte) */
.av-avis__rail.est-derive { scroll-snap-type: none; scroll-behavior: auto; }

/* 02/10 (MOSCO : « fais comme pour la timeline montage ») : avis pilotes en JS comme le mur de timelines -> plus de
   defilement natif ni d aimantation (cause des saccades). Le JS deplace la piste par transform ; attraper = glisser. */
.av-avis__rail.est-pilote { overflow: hidden; scroll-snap-type: none; scroll-behavior: auto; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.av-avis__rail.est-pilote.est-tenu { cursor: grabbing; }
.av-avis__rail.est-pilote .av-avis__piste { animation: none; transform: translate3d(0,0,0); will-change: transform; }
/* 03/10 (MOSCO : « que les gens comprennent qu'on peut cliquer », « qu'il faut aller vers la droite ») */
.av-info { position: absolute; top: 10px; right: 10px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font: italic 700 14px/1 Georgia, "Times New Roman", serif; pointer-events: none; transition: opacity .3s ease, transform .3s ease; animation: av-info-pouls 2.6s ease-in-out infinite; }
.av-exp__tuile:hover .av-info { transform: scale(1.12); background: rgba(255,255,255,.2); }
.av-exp__tuile[aria-expanded="true"] .av-info { opacity: 0; animation: none; }
@keyframes av-info-pouls { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
.av-swipe { display: none; }
@media (max-width: 766px) {
  .av-swipe { display: flex; align-items: center; gap: 8px; margin: -1vw 0 12px; color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
  .av-swipe span { display: inline-block; animation: av-swipe-fleche 1.4s ease-in-out infinite; }
}
@keyframes av-swipe-fleche { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .av-info, .av-swipe span { animation: none; } }

/* 04/10 (MOSCO) : surtitre de banniere qui apparait lettre par lettre, comme Grow360
   (mesure sur grow360.fr/audiovisuel : fondu 1 s ease-out par lettre, 60 ms d ecart, de gauche a droite) */
.av-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.av-lettres > span { opacity: 0; animation: av-lettre 1s ease-out both; animation-delay: calc(var(--i) * 60ms); }
@keyframes av-lettre { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .av-lettres > span { animation: none; opacity: 1; } }

/* 04/10 (MOSCO : « trop agressif, pas dans la DA » puis « fais le meme que grow ») : bouton de banniere
   calque sur grow360.fr/audiovisuel, mesure a 2 560 px : rectangle blanc a angles droits, texte noir
   en capitales 19 px, marge 14/30 px, fleche fine. Survol : fond transparent + contour blanc, texte blanc,
   la fleche part en diagonale et une autre arrive (0,38 s). Tailles converties en vw comme le reste du bloc. */
.av-devis-grow {
  display: inline-flex; align-items: center; gap: .16em;
  padding: clamp(11px, .55vw, 14px) clamp(20px, 1.17vw, 30px);
  background: #fff; color: #000; border: 1px solid #fff; border-radius: 0;
  font-family: "Gabarito", var(--texte); font-weight: 400; text-transform: uppercase; letter-spacing: .6px;
  font-size: clamp(12px, .74vw, 19px); line-height: 2; text-decoration: none; /* Grow : 283 x 67 px a 2 560 */
  transition: color .25s ease-in-out, background-color .25s ease-in-out;
}
.av-devis-grow:hover, .av-devis-grow:focus-visible { background: transparent; color: #fff; }
.av-devis-grow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.av-devis-grow__fleche { position: relative; display: block; width: 1.05em; height: 1.05em; overflow: hidden; } /* Grow : boite 20 px, 3 px du texte */
.av-devis-grow__fleche svg { position: absolute; inset: 16%; width: 68%; height: 68%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .38s cubic-bezier(.37,.08,.02,.93); }
.av-devis-grow__fleche svg + svg { transform: translate(-110%, 110%); }
.av-devis-grow:hover .av-devis-grow__fleche svg:first-child, .av-devis-grow:focus-visible .av-devis-grow__fleche svg:first-child { transform: translate(110%, -110%); }
.av-devis-grow:hover .av-devis-grow__fleche svg + svg, .av-devis-grow:focus-visible .av-devis-grow__fleche svg + svg { transform: none; transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .av-devis-grow, .av-devis-grow__fleche svg { transition: none; } }

/* 04/10 (MOSCO : « fais pareil pour Production audiovisuelle ») : surtitre cale sur grow360.fr/audiovisuel
   mesure a 2 560 px : 20 px, couleur d5d5d5, texte 388 px de large, 24 px de haut, 25 px au-dessus du titre.
   Leur Gabarito 300 est plus epaisse que Manrope 300 : Manrope 500 pour la meme presence. */
.av-banniere__surtitre { margin-bottom: .98vw; font-family: "Gabarito", var(--texte); font-weight: 300; line-height: 1.2; letter-spacing: .225em; } /* 04/10 : police Grow (Gabarito) demandee par MOSCO */

/* 04/10 (MOSCO : « met la police de grow partout sur la page ») : Gabarito remplace Manrope pour TOUS les textes
   de cette page (la variable --texte est redefinie ici seulement : les autres pages gardent Manrope).
   Gabarito n existe qu en 400-900 chez Google : les textes fins (200/300) passent en 400, comme chez Grow.
   Gardes volontairement : Archivo des grands titres (Grow utilise Goldbill XL, police non gratuite),
   Source Sans 3 du titre facon logo d une carte projet, Arial/Georgia des fausses interfaces. */
:root { --texte: "Gabarito", system-ui, sans-serif; }
/* 04/10 : sur telephone (390 px), la carte de France et son etiquette « Je veux tourner ici » (invisible au repos)
   depassaient de 13 px a droite -> la page glissait de cote. Coupe au bord de la section, sans creer de zone de defilement. */
.av-pq { overflow-x: clip; }


/* 04/10 (MOSCO : « sur telephone les fleches des projets ne s affichent pas ») : la hauteur des ronds
   venait seulement de aspect-ratio, que des Safari iPhone n appliquent pas sur un <button> -> rond ecrase.
   Hauteur posee en dur (= largeur) + taille de la fleche explicite + jamais compresses par le flex. */
.av-fleche { height: clamp(54px, 4.2vw, 84px); min-height: 54px; flex: none; -webkit-appearance: none; appearance: none; padding: 0; }
.av-fleche svg { width: 42%; height: 42%; }

/* 04/10 (MOSCO : « le bandeau est noir et la page en dessous noir clair, fais un degrade uniforme ») :
   bandeau #000 -> fond de page #0a0a0a, puis le fondu continue sur le haut de la section projets. */
.av-bandeau { background: linear-gradient(180deg, #000 0%, #050505 100%); }
.av-bandeau + .av-projets { background: linear-gradient(180deg, #050505 0, #0a0a0a 160px); }

/* 04/10 (MOSCO : « met le meme effet que sur ordi quand j appuie sur une fleche ») : sur ecran tactile
   le survol n existe pas -> un appui pose la classe .appui ~0,45 s (script des projets) : rond qui se remplit
   de blanc, fleche noire qui glisse, comme au survol sur ordi. Le survol « colle » d iOS est neutralise. */
@media (hover: none) {
  .av-fleche:hover { border-color: rgba(255,255,255,.55); color: #fff; }
  .av-fleche:hover::before { transform: scale(0); }
  .av-fleche[data-sens]:hover svg { transform: none; }
  .av-fleche.appui { border-color: #fff; color: #000; }
  .av-fleche.appui::before { transform: scale(1); }
  .av-fleche.appui[data-sens="-1"] svg { transform: translateX(-3px); }
  .av-fleche.appui[data-sens="1"] svg { transform: translateX(3px); }
}

/* 04/10 (MOSCO : « quand on fait double clic sur iPhone ca zoome la page, enleve-le ») :
   manipulation = plus de zoom au double-tap (et plus de delai de 300 ms sur les appuis),
   MAIS le zoom a deux doigts reste permis (accessibilite WCAG ; iOS l impose de toute facon). */
html { touch-action: manipulation; }

/* 04/10 (MOSCO : « quand je swipe sur les cotes ca ressort ») : les 4 coins viseur du bloc devis partent
   30 px HORS du cadre tant que le bloc n est pas vu -> sur tel ils depassaient de 21 px des deux cotes.
   Coupe au bord du bloc + filet de securite sur toute la page (clip : ne casse pas les elements sticky). */
.av-fin { overflow-x: clip; }
html, body { overflow-x: clip; }

/* 04/10 (MOSCO : « sur telephone le bouton devis n est pas pareil, Production audiovisuelle mal espace et
   apparait trop vite, analyse bien Grow ») : MESURE sur grow360.fr/audiovisuel a 390 px (navigateur de test) :
   surtitre 13 px, espacement .2em, 16 px de haut, 23 px au-dessus du titre ; apparition qui ne COMMENCE
   qu apres ~2,3 s (meme cadence ensuite : 60 ms/lettre, fondu 1 s) ; bouton 203 x 45, texte 14 px, marges 9/18. */
.av-lettres > span { animation-delay: calc(2.1s + var(--i) * 60ms); }
.av-banniere__surtitre { margin-bottom: max(23px, .98vw); font-size: clamp(13px, .78vw, 20px); }
.av-devis-grow { font-size: clamp(14px, .74vw, 19px); padding: clamp(9px, .55vw, 14px) clamp(18px, 1.17vw, 30px); }
@media (max-width: 766px) {
  .av-banniere__surtitre { line-height: 16px; letter-spacing: .2em; }
  .av-devis-grow { line-height: 1.84; }
}

/* 04/10 (MOSCO : « l effet des 3 blocs pourquoi nous choisir, je ne veux pas de bug ») : sur ecran tactile,
   toucher une carte lui collait un :hover -> elle restait allumee hors du milieu de l ecran (2 cartes allumees
   a la fois, mesure). Sur tactile, seule la classe .actif (pilotee par le defilement) allume une carte. */
@media (hover: none) {
  .av-pq__carte:hover:not(.actif) .av-pq__torche { opacity: 0; }
  .av-pq__carte:hover:not(.actif) {
    background: radial-gradient(90% 45% at 50% 0%, rgba(var(--glacier), .07), transparent 70%), linear-gradient(180deg, #07090c 0%, #020203 100%);
    box-shadow: none; }
  .av-pq__carte:hover:not(.actif)::before { background: linear-gradient(180deg, rgba(var(--glacier), .45) 0%, rgba(var(--glacier), .12) 45%, rgba(var(--glacier), .04) 100%); }
  .av-pq__carte:hover:not(.actif)::after { border-color: rgba(var(--glacier), .05); }
}

/* 04/10 (MOSCO, point par point, telephone seulement) : « Nos expertises tu decolles un peu / Pour les particuliers
   un peu / Le montage un tout petit peu / Bases dans le 06 un petit peu » -> espace ajoute AU-DESSUS de chacun. */
@media (max-width: 766px) {
  #av-exp-titre { margin-top: 20px; } /* « pareil » (reduis un tout petit peu) : 32 -> 20 */
  #av-part-titre { margin-top: 20px; } /* « reduis un tout petit peu » : 32 -> 20 */
  .av-mt { margin-top: calc(7vw + 12px); }
  .av-pq__zone { margin-top: calc(7vw + 20px); }
}

/* 04/10 (MOSCO : « version ordi remonte un peu le Bases dans le 06. Deja a Paris. », PAS sur telephone) :
   sur 2 colonnes le texte etait centre en hauteur a cote de la carte (160 px sous le haut du bloc) -> remonte de 50 px. */
@media (min-width: 901px) { .av-pq__zone-texte { position: relative; top: -50px; } }

/* 06/10 (MOSCO : « le bouton demander un devis de la page site, fais le meme sur la page audiovisuel ») */
.av-banniere .bgrow { font-family: "Gabarito", var(--texte); border-radius: 14px; }

/* 06/10 (MOSCO : « fais la meme apparition sur la page audiovisuel que sur la page site web ») : meme cadence que
   sites-web.html -> surtitre lettre par lettre des l arrivee (le retard de 2,1 s du 04/10 saute), titre mot par mot
   qui monte (a partir de 0,45 s, 90 ms par mot), phrase a 1,1 s, bouton a 1,3 s. */
.av-lettres > span { animation-delay: calc(var(--i) * 60ms); }
.av-banniere__titre { animation: none; }
.av-banniere__titre .m { display: inline-block; opacity: 0; transform: translateY(.45em); animation: av-mot .9s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--i) * 90ms) forwards; }
.av-banniere__texte { opacity: 0; animation: av-fondu 1s ease-out 1.1s forwards; }
.av-banniere .accueil__boutons { opacity: 0; animation: av-fondu 1s ease-out 1.3s forwards; }
@keyframes av-mot { to { opacity: 1; transform: none; } }
@keyframes av-fondu { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .av-banniere__titre .m, .av-banniere__texte, .av-banniere .accueil__boutons { animation: none; opacity: 1; transform: none; } }
/* 06/10 (MOSCO : « toujours pas fluide sur telephone » puis « meme delai que site web, pas 1,5 s ») : l attente du chargement
   est retiree. Seule difference restante avec l intro de sites-web.html : la triple ombre portee (filter) du titre,
   recalculee a chaque image pendant que les mots bougent. Retiree (sites-web n en a pas et reste lisible). */
.av-banniere__titre { filter: none; }
/* 06/10 (MOSCO : « rajoute en haut Goutez l effet Contrex, carbon neutral, PET et les logos ») : bloc de fin du film Contrex
   en haut de sa carte (logo decoupe sur le film, pictos redessines a l identique). */
.av-carte__entete { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); width: 72%; height: auto; pointer-events: none; }
@media (max-width: 766px) { .av-carte__entete { top: 66px; width: 84%; } }
/* 06/10 : Slicy (logo blanc sur foret claire) -> ombre douce pour qu il se lise */
.av-carte__entete--ombre { width: 58%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 2px 16px rgba(0,0,0,.6)); }
@media (max-width: 766px) { .av-carte__entete--ombre { width: 74%; } }

/* 13/10 (MOSCO : « la police du bouton demander un devis en bas, j aime pas, fais plus classe » -> choix A « sobre ») :
   les 4 boutons du bloc de fin (devis, WhatsApp, tel, mail) en Gabarito 500, casse normale, comme le devis du haut de page. */
.av-contacts .av-devis__txt, .av-contacts .av-devis__txt::after { font-family: "Gabarito", sans-serif; font-weight: 500; font-style: normal; text-transform: none; letter-spacing: .01em; font-size: 17px; }
@media (max-width: 600px) { .av-contacts .av-devis__txt, .av-contacts .av-devis__txt::after { font-size: 16px; } }

/* 13/10 (MOSCO : « gere bien les espacements entre Parlons de votre prochain film, les encarts de contact et le logo Made by Mosco ») :
   rythme regulier -> meme marge en haut et en bas du cadre (loin des coins), meme ecart titre/boutons et boutons/logo. */
.av-fin__cadre { gap: 0; padding-top: clamp(64px, 6.5vw, 110px); padding-bottom: clamp(64px, 6.5vw, 110px); }
.av-fin__titre { margin: 0; }
.av-fin .av-contacts { margin: clamp(40px, 4.4vw, 72px) 0 0; }
.av-fin .av-signe { margin-top: clamp(40px, 4.4vw, 72px); }