/* Accompagnement 360 · le motion design de la page · 2026-10-02
 *
 * DEMANDE DE STEEVE, mot pour mot : « On est une boite de medias, donc le site
 * doit etre riche en medias. On ne peut pas faire des sites epures comme la
 * plupart des gens. » La page montre donc ce que le studio sait faire, en le
 * faisant.
 *
 * MAIS RIEN N'EST DECORATIF, et c'est ce qui separe un site riche d'un site qui
 * sent l'IA. Le referentiel anti-design IA est clair : ce qui trahit un site
 * genere n'est pas le mouvement, c'est le mouvement qui ne represente rien
 * (blobs 3D abstraits, cartes qui s'inclinent a la souris, meme fondu sur chaque
 * section, parallaxe sur chaque image). Ici, chaque piece est LIEE AU CONTENU :
 *
 *  - l'anneau en 3D EST le « 360 » : huit terrains disposes en cercle, qui
 *    tournent au defilement. On ne dit pas « 360 », on le montre ;
 *  - l'habillage de direct EST le metier vendu par le bloc LIVE : badge, vu-metre
 *    audio, selecteur de scenes, bandeau bas. C'est une demonstration de motion
 *    design, et elle ne porte AUCUN chiffre d'audience : un compteur de
 *    spectateurs invente serait un faux, et ce projet n'en publie pas ;
 *  - la demonstration du Scan EST le produit vendu, avec les vraies questions du
 *    vrai parcours (`lib/scan-questions.js`).
 *
 * TROIS GARDES, toutes obligatoires :
 *  1. Tout mouvement vit sous `prefers-reduced-motion: no-preference`. Sans cela,
 *     la page est immobile ET complete : l'anneau devient une grille, l'habillage
 *     une image fixe, la demonstration son premier ecran.
 *  2. Les boucles s'ARRETENT hors de l'ecran (`ac-hors-champ`, pose par le
 *     script) : une animation qui tourne pour rien vide la batterie d'un
 *     telephone et degrade la reactivite des clics.
 *  3. Aucune bibliotheque : CSS 3D natif et un script de quelques dizaines de
 *     lignes. Une bibliotheque 3D pese plus que toute la page, pour un anneau
 *     que le navigateur sait dessiner seul.
 *
 * `overflow: clip` et jamais `hidden` sur les sections : sur ce site, `hidden`
 * sur un ancetre casse `position: sticky` et les animations liees au
 * defilement (constate le 2026-09-26, 2 400 px d'ecran blanc sur l'accueil).
 */

/* ── L'anneau 360 ─────────────────────────────────────────────────────── */
.ac-anneau-scene {
  position: relative;
  overflow: clip;
  /* La face avant est rapprochee de 254 px dans une perspective de 1 400 : sa
   * projection grossit d'environ 22 %, donc deborde de sa boite en haut et en
   * bas. Sans ce rembourrage, `overflow: clip` la couperait. */
  padding: 56px 0 72px;
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.ac-anneau {
  --ac-face: 210px;
  --ac-rayon: 254px;              /* (face / 2) / tan(22,5 deg), arrondi */
  --ac-angle: 0deg;
  position: relative;
  width: var(--ac-face);
  height: 250px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(var(--ac-angle));
  list-style: none;
  padding: 0;
}
.ac-face {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border-top: 4px solid var(--red);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Les faces arriere restent dans l'arbre d'accessibilite : seule leur
   * peinture est retiree. Un lecteur d'ecran lit les huit, toujours. */
  backface-visibility: hidden;
  box-shadow: 0 1px 0 var(--line);
}
.ac-face:nth-child(1) { transform: rotateY(0deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(2) { transform: rotateY(45deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(3) { transform: rotateY(90deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(4) { transform: rotateY(135deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(5) { transform: rotateY(180deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(6) { transform: rotateY(225deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(7) { transform: rotateY(270deg) translateZ(var(--ac-rayon)); }
.ac-face:nth-child(8) { transform: rotateY(315deg) translateZ(var(--ac-rayon)); }
.ac-face-n { font-family: var(--fa); font-size: 12px; letter-spacing: .1em; color: var(--red); }
.ac-face h3 { font-family: var(--fh); font-size: 1.15rem; line-height: 1.1; margin: 0; text-transform: uppercase; }
.ac-face p { font-size: .9rem; color: var(--gray-txt); margin: 0; }

.ac-anneau-commandes { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.ac-anneau-commandes button {
  font: inherit; font-weight: 700; min-width: 48px; min-height: 48px;
  border: 1px solid var(--black); background: #FFFFFF; color: var(--black); cursor: pointer;
}
.ac-anneau-commandes button:hover { background: var(--black); color: #FFFFFF; }
.ac-anneau-commandes button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 700px) {
  .ac-anneau { --ac-face: 168px; --ac-rayon: 203px; height: 236px; }
  .ac-face { padding: 18px 16px; }
  .ac-face h3 { font-size: 1rem; }
  .ac-face p { font-size: .84rem; }
}

/* Sans mouvement, l'anneau redevient une GRILLE lisible d'un coup d'oeil :
 * immobile ne doit jamais vouloir dire incomplet. */
@media (prefers-reduced-motion: reduce) {
  .ac-anneau-scene { perspective: none; }
  .ac-anneau {
    width: auto; height: auto; transform: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px;
  }
  .ac-face { position: static; transform: none !important; backface-visibility: visible; }
  .ac-anneau-commandes { display: none; }
}

/* ── L'habillage de direct ────────────────────────────────────────────── */
.ac-live {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: clip;
  background: var(--black);
  border-top: 4px solid var(--red);
  margin-top: 28px;
}
.ac-live > picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ac-live-ui { position: absolute; inset: 0; pointer-events: none; font-family: var(--fb); }

.ac-badge {
  position: absolute; top: 4%; left: 3%;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #FFFFFF;
  font-family: var(--fa); font-size: clamp(10px, 1.6vw, 14px); letter-spacing: .12em;
  padding: 6px 12px;
}
.ac-badge i { width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; display: block; }

/* Vu-metre stereo : deux colonnes de barres, chacune a son rythme. Des
 * durees premieres entre elles evitent que l'oeil repere la boucle. */
.ac-vu { position: absolute; top: 4%; right: 3%; display: flex; gap: 3px; align-items: flex-end; height: 18%; }
.ac-vu span { width: clamp(4px, .7vw, 8px); height: 100%; background: linear-gradient(to top, #FFFFFF 0 60%, var(--red) 60% 100%); transform-origin: bottom; transform: scaleY(.3); }

.ac-scenes {
  position: absolute; left: 3%; bottom: 22%;
  display: flex; gap: 6px;
}
.ac-scenes span {
  width: clamp(34px, 7vw, 74px); aspect-ratio: 16 / 9;
  border: 2px solid rgba(255, 255, 255, .55); background: rgba(17, 17, 17, .55);
}
.ac-scenes span:nth-child(1) { border-color: var(--red); }

.ac-tiers {
  position: absolute; left: 3%; bottom: 5%; right: 30%;
  background: rgba(17, 17, 17, .88); color: #FFFFFF;
  border-left: 4px solid var(--red);
  padding: clamp(6px, 1.4vw, 14px) clamp(10px, 2vw, 18px);
}
.ac-tiers b { display: block; font-family: var(--fh); font-size: clamp(11px, 1.9vw, 18px); text-transform: uppercase; }
.ac-tiers small { display: block; font-size: clamp(9px, 1.3vw, 13px); color: #CFCFCF; }

.ac-legende { font-size: .82rem; color: var(--gray-txt); margin-top: 10px; }

/* ── La demonstration du Scan ─────────────────────────────────────────── */
.ac-demo-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 48px; align-items: center; }
@media (max-width: 820px) { .ac-demo-grille { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.ac-tel {
  width: min(100%, 300px); margin: 0 auto;
  aspect-ratio: 9 / 18;
  background: #FFFFFF;
  border: 10px solid var(--black);
  border-radius: 34px;
  overflow: clip;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .45);
}
.ac-tel-chap { display: flex; gap: 3px; padding: 18px 14px 10px; }
.ac-tel-chap i { flex: 1; height: 3px; background: var(--line); display: block; }
.ac-tel-chap i.fait { background: var(--black); }
.ac-tel-chap i.encours { background: var(--red); }
.ac-tel-ecrans { position: relative; height: calc(100% - 40px); }
.ac-tel-ecran { position: absolute; inset: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.ac-tel-ecran h4 { font-family: var(--fh); font-size: .95rem; line-height: 1.15; margin: 4px 0 8px; }
.ac-tel-ecran span {
  display: block; border: 1px solid var(--line); padding: 9px 10px;
  font-size: .76rem; line-height: 1.25;
}
.ac-tel-ecran span.choisi { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.ac-tel-btn {
  position: absolute; left: 14px; right: 14px; bottom: 16px;
  background: var(--red); color: #FFFFFF; text-align: center;
  font-weight: 700; font-size: .8rem; padding: 11px;
}

/* ── Qui est derriere ─────────────────────────────────────────────────── */
.ac-derriere { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
@media (max-width: 820px) { .ac-derriere { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.ac-derriere figure { margin: 0; border-top: 4px solid var(--red); line-height: 0; }
.ac-derriere figure img { width: 100%; height: auto; display: block; }
.ac-signature { font-family: var(--fh); font-size: 1.05rem; margin-top: 18px; }
.ac-signature small { display: block; font-family: var(--fb); font-size: .85rem; color: var(--gray-txt); font-weight: 400; margin-top: 4px; }
.ac-faits { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ac-faits li { border-left: 3px solid var(--red); padding: 4px 0 4px 14px; }

/* ── Le mouvement, et lui seul, sous reduction possible ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ac-anneau { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }

  .ac-badge i { animation: ac-pouls 1.4s ease-in-out infinite; }
  .ac-vu span:nth-child(1) { animation: ac-vu .53s ease-in-out infinite alternate; }
  .ac-vu span:nth-child(2) { animation: ac-vu .71s ease-in-out infinite alternate; }
  .ac-vu span:nth-child(3) { animation: ac-vu .47s ease-in-out infinite alternate; }
  .ac-vu span:nth-child(4) { animation: ac-vu .83s ease-in-out infinite alternate; }
  .ac-vu span:nth-child(5) { animation: ac-vu .59s ease-in-out infinite alternate; }
  .ac-vu span:nth-child(6) { animation: ac-vu .67s ease-in-out infinite alternate; }
  .ac-scenes span { animation: ac-scene 6s steps(1) infinite; }
  .ac-scenes span:nth-child(2) { animation-delay: -4s; }
  .ac-scenes span:nth-child(3) { animation-delay: -2s; }
  .ac-tiers { animation: ac-tiers 6s cubic-bezier(.2, .7, .2, 1) infinite; }

  .ac-tel-ecran { animation: ac-ecran 9s infinite; opacity: 0; }
  .ac-tel-ecran:nth-child(2) { animation-delay: 3s; }
  .ac-tel-ecran:nth-child(3) { animation-delay: 6s; }
  .ac-tel-ecran span.choisi { animation: ac-choix 9s infinite; }
  .ac-tel-ecran:nth-child(2) span.choisi { animation-delay: 3s; }
  .ac-tel-ecran:nth-child(3) span.choisi { animation-delay: 6s; }

  /* Hors de l'ecran, tout s'arrete : rien ne tourne pour personne. */
  .ac-hors-champ, .ac-hors-champ * { animation-play-state: paused !important; }
}

/* Sans mouvement : la demonstration montre son premier ecran, entier. */
@media (prefers-reduced-motion: reduce) {
  .ac-tel-ecran:nth-child(n+2) { display: none; }
}

@keyframes ac-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes ac-vu { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes ac-scene { 0%, 33% { border-color: var(--red); } 33.01%, 100% { border-color: rgba(255, 255, 255, .55); } }
@keyframes ac-tiers {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  18%, 82% { clip-path: inset(0 0 0 0); }
  92%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes ac-ecran {
  0% { opacity: 0; transform: translateX(14%); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateX(-14%); }
}
@keyframes ac-choix {
  0%, 12% { border-color: var(--line); box-shadow: inset 0 0 0 var(--red); }
  18%, 33% { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
  34%, 100% { border-color: var(--line); box-shadow: inset 0 0 0 var(--red); }
}

/* Les paragraphes d'une section signee se lisent comme une lettre : ils ont
 * besoin d'air entre eux, sinon trois idees se fondent en un bloc. */
.ac-derriere .lead + .lead, .ac-demo-grille .lead + .lead { margin-top: 14px; }

/* La seance : la photo suit le texte, donc l'ordre de lecture reste le meme
 * sur telephone, ou la grille passe en une colonne. */
.ac-seance { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 820px) { .ac-seance { grid-template-columns: minmax(0, 1fr); } }
.ac-seance .lead + .lead { margin-top: 14px; }