/* ══════════════════════════════════════════════════════════════════
   IMAGES DES PROJETS — LE SEUL FICHIER À TOUCHER POUR LES VISUELS
   ══════════════════════════════════════════════════════════════════

   COMMENT REMPLACER UNE IMAGE :
   1. Prépare ton image : 1920 × 1080 px, JPG ou WebP, moins de 400 Ko
   2. Dépose-la dans  img/  avec le nom indiqué ci-dessous
   3. Mets en commentaire la ligne "CDN" et décommente la ligne "LOCAL"
      (commenter = entourer de  /*  et  *​/  )

   Les 7 images distantes ci-dessous pointent encore vers l'ancien site.
   Elles fonctionnent, mais elles disparaîtront le jour où tu quitteras
   Zyrosite. À remplacer avant la mise en ligne.
   ══════════════════════════════════════════════════════════════════ */

/* ── 01 · SÉQUENCES ÉPHÉMÈRES ───────────────────────────────────── */
/* LOCAL : .bg-01{background-image:url('img/01-sequences-ephemeres.jpg')} */
.bg-01{background-image:url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,h=1080,fit=crop/ALpnpKpePJIzXXnZ/capture-d-a-c-cran-2024-10-04-064202-A0xwb4l1OeTJNL76.jpg')}

/* ── 02 · SOLIBO STUDIO ─────────────────────────────────────────── */
/* LOCAL : .bg-02{background-image:url('img/02-solibo-studio.jpg')} */
.bg-02{background-image:url('https://solibo.studio/wp-content/uploads/2025/12/perf.jpg')}

/* ── 03 · MOCAP WEEK ────────────────────────────────────────────── */
/* LOCAL : .bg-03{background-image:url('img/03-mocap-week.jpg')} */
.bg-03{background-image:url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,h=1080,fit=crop/ALpnpKpePJIzXXnZ/le-corps-comme-interface-AMqDGa4Z1BulZpoV.jpg')}

/* ── 04 · ARCHÉOLOGIE CARAÏBES ──────────────────────────────────── */
/* LOCAL : .bg-04{background-image:url('img/04-archeologie-caraibes.jpg')} */
.bg-04{background-image:url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,h=1080,fit=crop/ALpnpKpePJIzXXnZ/brule-parfum-a-lorrain-a-vive-a-2005-a-447-3-mP4nLXweaauwbJr2.jpg')}

/* ── 05 · 150 M D'ALTITUDE ──────────────────────────────────────── */
/* LOCAL : .bg-05{background-image:url('img/05-150m-altitude.jpg')} */
.bg-05{background-image:url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,h=1080,fit=crop/ALpnpKpePJIzXXnZ/screenshot-2025-08-22-105440-mp8J1kovykuP7XBQ.jpg')}

/* ── 06 · PROJET PRISME ─────────────────────────────────────────── */
/* LOCAL : .bg-06{background-image:url('img/06-prisme.jpg')} */
.bg-06{background-image:url('https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,h=1080,fit=crop/ALpnpKpePJIzXXnZ/img_3929-mePgerq6alUbBK1v.jpg')}

/* ── 07 · OPEN LEARNING LAB ─────────────────────────────────────── */
/* ⚠️  AUCUNE IMAGE — dégradé provisoire. Dépose ton visuel et décommente. */
/* LOCAL : .bg-07{background-image:url('img/07-open-learning-lab.jpg')} */
.bg-07{background-image:linear-gradient(145deg,#1a1a16 0%,#2e2a20 45%,#141410 100%)}


/* ══════════════════════════════════════════════════════════════════
   VIDÉOS DE FOND — comment ça marche
   ══════════════════════════════════════════════════════════════════

   Chaque projet peut avoir SOIT une image, SOIT une vidéo.
   Le choix se fait dans index.html, pas ici.

   POUR METTRE UNE VIDÉO SUR UN PROJET :
   1. Crée un sous-dossier  video/  à côté de index.html
   2. Dépose ton fichier .mp4 dedans (voir les réglages plus bas)
   3. Dans index.html, trouve le projet concerné et retire les
      marques de commentaire autour du bloc <video> :
      supprime la ligne  <!--  et la ligne  -->

   POUR REVENIR À L'IMAGE : remets les commentaires. C'est tout.

   L'image reste toujours définie en dessous de la vidéo : si la
   vidéo ne se charge pas, ou si le visiteur est sur mobile en
   économie de données, l'image s'affiche à la place.

   ── RÉGLAGES DE LA VIDÉO ──────────────────────────────────────
   Format ......... MP4 (codec H.264)
   Dimensions ..... 1920 × 1080
   Durée .......... 6 à 12 secondes, en boucle
   Poids .......... 3 Mo maximum — au-delà le site devient lent
   Son ............ AUCUNE piste audio (à supprimer au montage)
   Cadrage ........ évite le texte : l'image est rognée selon l'écran

   Le son doit être absent : les navigateurs bloquent la lecture
   automatique des vidéos sonores. Une vidéo muette démarre seule.
   ══════════════════════════════════════════════════════════════════ */