@charset "UTF-8";
/*
Theme Name: Profs Pivot
Author: David, Arthur, Johnny, Justin
Author URI: https://github.com/Just1nBon1n/Prof_Pivot
Description: Le site web des profs pivot des Techniques d'intégration multimédia du Collège de Maisonneuve.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
/* /////////////////////////////////
Les variables 
//////////////////////////////////// */
/*--------------------------------------------------------------
# Couleur
--------------------------------------------------------------*/
/* Couleurs globales */
:root {
  --couleur-fond: #0D1220;
  --couleur-texte-default: #000000;
  --couleur-texte-blanc: #e6e6e6;
  --couleur-texte-titre: #000000;
  --couleur-texte-fond-acceuil: rgba(255, 255, 255, 0.5);
  --couleur-texte-footer: #E6E6E6;
}

/* Couleurs navigation */
:root {
  --nav-recherche-couleur-fond: #e6e6e6;
  --nav-recherche-couleur-contour: #000000;
}

/* Couleurs des sections */
:root {
  --liens-couleur-section: #3DADFF;
  --liens-couleur-hover-section: #007AD2;
  --personnes-couleur-section: #FF9500;
  --personnes-couleur-hover-section: #CB7600;
  --docs-couleur-section: #63CF75;
  --docs-couleur-hover-section: #3E9B4B;
}

/* Couleurs composants section acceuil */
:root {
  --snake-couleur-Logo-TIM-Contour: #141414;
  --snake-couleur-Logo-TIM-Interieur: #D9D9D9;
  --snake-couleur-grille: rgba(255, 255, 255, 0.1);
  --snake-couleur-nourriture: #c4c4c4;
  --snake-couleur-tete: #317032;
  --snake-couleur-corps: #7FC765;
  --snake-couleur-lumiere: #434c5f;
  --acceuil-couleur-bouton-jouer: #00b894;
  --acceuil-couleur-bouton-jouer-hover: #01755a;
  --acceuil-couleur-bouton-quitter: #d63031;
  --acceuil-couleur-bouton-quitter-hover: #942c21;
  --acceuil-couleur-texte-fond: rgba(52, 52, 52, 0.5);
}

/* Couleurs composants section liens utiles */
:root {
  --liens-couleur-logo: #E6E6E6;
}

/* Couleurs composants section personnes ressources */
:root {
  --personnes-couleur-fond-carte: #FF9500;
  --personnes-couleur-border: #FF9500;
  --personnes-couleur-bg-boutons: #0D1220;
  --personnes-couleur-texte-boutons: #E6E6E6;
  --personnes-border-pivots-active: #FF9500;
  --personnes-flip-card-bg: #0D1220;
  --personnes-flip-card-front: #0D1220;
  --personnes-flip-card-border: #e6e6e6;
  --personnes-couleur-border-btn-active: #FF9500;
  --personnes-flip-card-front-titre-couleur: #e6e6e6;
}

/* Couleurs  composants section documents utiles */
:root {
  --docs-couleur-dossier-1: #4CE054;
  --docs-couleur-dossier-2: #46CE4D;
  --docs-couleur-dossier-3: #3CB142;
  --docs-couleur-dossier-4: #329437;
  --docs-couleur-dossier-5: #28772C;
  --docs-couleur-dossier-6: #1E5A21;
  --docs-couleur-dossier-7: #153C17;
  --docs-couleur-dossier-8: #0e270f;
  --docs-couleur-dossier-contour: #000000;
  --docs-couleur-dossier-fond: #E6E6E6;
}

/* Couleurs composants footer */
:root {
  --footer-couleur-fond: #555555;
  --footer-couleur-logo: #E6E6E6;
}

/*--------------------------------------------------------------
# Typographies
--------------------------------------------------------------*/
:root {
  /* Police pour le reste du site */
  --texte-default: "Quantico", sans-serif; /* LINK DANS HTML */
  /* Police pour les titres de chaque section */
  --texte-titre: "Jersey 10", sans-serif; /* LINK DANS HTML */
}

/* /////////////////////////////////
Les balise de bases
//////////////////////////////////// */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* TITRES, TEXTES */
h1 {
  font-family: var(--texte-titre);
  color: var(--couleur-texte-titre);
}

h2 {
  font-family: var(--texte-default);
  color: var(--couleur-texte-default);
}

/* BODY */
body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--couleur-fond);
}

/* /////////////////////////////////
Les composants
//////////////////////////////////// */
.search-form {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 4rem;
  background-color: white;
  padding: 0.75rem;
  margin: 0;
  transition: width 0.5s, opacity 0.5s;
  opacity: 0; /* hidden by default */
  pointer-events: none;
  z-index: 999;
}

.search-input {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  padding-left: 1rem;
  font-size: 30px;
  font-family: var(--texte-default);
  pointer-events: none;
}

.search-button {
  width: 3rem;
  height: 3rem;
  background-color: var(--couleur-fond);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.5s;
}

.search-icon,
.search-close {
  position: absolute;
  font-size: 1.25rem;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-close {
  opacity: 0;
}

/* Active Search */
.active-search {
  max-width: 100%;
  width: 50rem;
}

.active-search .search-button {
  left: calc(100% - 2rem);
}

.active-search .search-input {
  pointer-events: initial;
}

.active-search .search-close {
  opacity: 1;
}

.active-search .search-icon {
  opacity: 0;
}

.search-form.visible {
  opacity: 1;
  pointer-events: auto; /* allow interaction */
}

@media (max-width: 900px) {
  .search-form {
    top: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0.5rem;
  }
  .search-input {
    font-size: 20px;
    padding-left: 0.5rem;
  }
  .search-button {
    width: 2.5rem;
    height: 2.5rem;
  }
  .active-search {
    width: 70vw; /* spans most of the screen */
    max-width: 60vw;
  }
  .active-search .search-button {
    left: calc(100% - 2.2rem);
  }
}
/* ------------------------------------------------------------- */
/* Styles pour la barre de navigation latérale (position fixe) */
/* ------------------------------------------------------------- */
.container-navigation {
  /* Positionnement fixe à droite et centré verticalement */
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100; /* Devant tout le reste de l'interface */
  transition: right 0.3s ease-out;
}

.side-nav-blocks {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1.5rem; /* Espace entre les blocs */
  padding: 5px;
  border-radius: 8px;
}

.nav-block {
  position: relative;
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 4px;
  transition: transform 0.2s ease-out;
  cursor: pointer;
  border: 2px solid transparent;
}

.nav-block {
  position: relative;
}

/* Cube normal (centré, immobile) */
.nav-block.active::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--couleur-texte-blanc);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: transform 0.6s linear;
}

/* Rotation quand le bloc vient d’être activé */
.nav-block.just-activated::after {
  transform: translate(-50%, -50%) rotate(360deg);
}

/* STYLE DU BLOC ACCUEIL (Plus grand et avec lueur) */
.nav-accueil {
  width: 2.8rem; /* Plus large */
  height: 2.8rem; /* Plus haut */
  padding: 0.2rem;
  border-radius: 6px;
  background-color: var(--snake-couleur-tete); /* Couleur du serpent */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Couleurs des blocs de section */
.nav-liens {
  background-color: var(--liens-couleur-section);
}

.nav-ressources {
  background-color: var(--personnes-couleur-section);
}

.nav-documents {
  background-color: var(--docs-couleur-section);
}

/* STYLE DES SÉPARATEURS ENTRE LES BLOCS ------------------------------------ */
.nav-separator {
  width: 3px;
  height: 1.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden; /* Cache le remplissage initial */
}

.nav-label {
  position: absolute;
  font-family: var(--texte-default);
  color: var(--couleur-texte-blanc);
  right: 150%;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
  white-space: normal;
  font-size: 1rem;
  text-align: right;
  line-height: 1.2;
  max-width: 130px;
  transition: all 0.35s ease-out;
  pointer-events: none; /* Pour ne pas bloquer le hover du bloc */
}

/* AU SURVOL DU BLOC -> AFFICHER SON LABEL */
.side-nav-blocks:hover .nav-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--couleur-texte-blanc);
}

/* --------------------------------------------------------------------------- */
/* MEDIA QUERY POUR LES ÉCRANS AVEC HOVER (SOURIS) */
@media (hover: hover) {
  .nav-block:hover {
    transform: scale(1.3);
    border-color: var(--couleur-texte-blanc);
  }
  .side-nav-blocks:hover .nav-label {
    color: rgba(255, 255, 255, 0.4);
  }
  .nav-block:hover .nav-label {
    color: var(--couleur-texte-blanc);
  }
}
/* ------------------------------------------------------------- */
/* STYLES ET ANIMATION DU SERPENT SVG */
/* ------------------------------------------------------------- */
/* Keyframes de déplacement du serpent (3 segments, parcours 4x4) */
@keyframes snake-move {
  /* Parcours d'un carré de 80x80 pixels dans le viewBox 100x100, pour centrer le mouvement */
  0% {
    transform: translate(10px, 10px);
  } /* Coin Haut Gauche */
  25% {
    transform: translate(70px, 10px);
  } /* Coin Haut Droit */
  50% {
    transform: translate(70px, 70px);
  } /* Coin Bas Droit */
  75% {
    transform: translate(10px, 70px);
  } /* Coin Bas Gauche */
  100% {
    transform: translate(10px, 10px);
  } /* Retour à Haut Gauche */
}
.nav-snake-icon {
  width: 100%;
  height: 100%;
  overflow: visible; /* Permet aux segments de bouger */
}

/* Styles et animation de base pour tous les segments */
.nav-snake-icon .snake-segment {
  fill: var(--snake-couleur-corps);
  width: 24px; /* Taille du segment (20% du bloc) */
  height: 24px; /* Taille du segment */
  animation: snake-move 3s steps(4, end) infinite;
  animation-play-state: paused;
  visibility: hidden; /* Caché par défaut */
}

.nav-accueil:hover .nav-snake-icon .snake-segment {
  animation-play-state: running; /* LANCE L'ANIMATION */
  visibility: visible; /* REND VISIBLE LES SEGMENTS */
}

/* Application des délais et décalages pour simuler un corps */
.nav-snake-icon .segment-1 {
  animation-delay: 0s; /* Tête (pas de délai) */
}

.nav-snake-icon .segment-2 {
  /* Délai ajusté pour correspondre à 1 étape entière (1/4 du cycle) */
  animation-delay: -0.4s;
}

.nav-snake-icon .segment-3 {
  /* Délai ajusté pour correspondre à 2 étapes entières (1/2 cycle) */
  animation-delay: -0.8s;
}

/* ------------------------------------------------------------- */
/* STYLES POUR LE BOUTON BURGER DE NAVIGATION MOBILE */
/* ------------------------------------------------------------- */
/* --- Base (déjà existante, ajout des transitions) --- */
.toggle-nav {
  display: flex;
  position: fixed;
  top: 15px;
  right: 20px;
  width: 45px;
  height: 40px;
  z-index: 2000;
  padding: 5px;
  border-radius: 5px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.toggle-nav .toggle-bar {
  height: 5px;
  width: 100%;
  background-color: var(--couleur-texte-blanc);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animation fluide */
  transform-origin: center; /* Rotation centrale */
}

/* --- Transformation en X --- */
/* Barre 1 : Descendre et pivoter à 45° */
.toggle-nav.open .toggle-bar:nth-child(1) {
  transform: translateY(12.5px) rotate(45deg);
}

/* Barre 2 : S'effacer proprement */
.toggle-nav.open .toggle-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(30px);
}

/* Barre 3 : Monter et pivoter à -45° */
.toggle-nav.open .toggle-bar:nth-child(3) {
  transform: translateY(-12.5px) rotate(-45deg);
}

/* ------------------------------------------------------------- */
.side-nav-blocks {
  transform: translateX(200%); /* Cache la nav hors de la vue */
  transition: transform 0.3s ease-out;
}

/* Quand le menu est actif */
.side-nav-blocks.active {
  transform: translateX(0); /* Déplace la nav dans la vue */
}

/* MEDIA QUERY POUR LES GRANDS ÉCRANS (DÉSACTIVE LE BOUTON) */
@media (min-width: 1025px) {
  .toggle-nav {
    display: none;
  }
  .side-nav-blocks {
    transform: translateX(0); /* Toujours visible sur grand écran */
  }
}
/* --- Cube fixe (bas gauche) --- */
#credits-cube {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background: rgba(131, 131, 131, 0.6);
  color: var(--couleur-texte-blanc);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  overflow: visible;
  font-family: var(--texte-default);
}

#credits-cube::after {
  content: "Crédits";
  position: absolute;
  left: 60px;
  opacity: 0;
  white-space: nowrap;
  color: var(--couleur-texte-blanc);
  font-size: 24px;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#credits-cube:hover {
  transform: scale(0.85);
}

/* Apparition progressive du texte */
#credits-cube:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Conteneur du symbole */
#credits-cube .code-symbol {
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  color: var(--couleur-texte-blanc, white);
}

#credits-cube .code-symbol i {
  font-style: normal;
  padding: 0 1px;
  margin: 0;
  line-height: 1;
  transform: translate(0, 0);
  transition: color 0.3s ease;
}

/* --- EFFET COULEURS MULTIPLES AU SURVOL --- */
/* Le caractère '<' (Gauche) */
#credits-cube:hover .c-l {
  color: var(--liens-couleur-section);
}

/* Le caractère '/' (Séparateur) */
#credits-cube:hover .c-s {
  color: var(--personnes-couleur-section);
}

/* Le caractère '>' (Droite) */
#credits-cube:hover .c-r {
  color: var(--docs-couleur-section);
}

@media (min-width: 900px) {
  #credits-cube {
    width: 60px;
    height: 60px;
  }
  #credits-cube .code-symbol {
    font-size: 24px;
  }
  #credits-cube::after {
    font-size: 28px;
    left: 80px;
  }
}
#credits-fond {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  transition: opacity 0.3s ease;
}

#credits-fond.open {
  opacity: 1;
  pointer-events: auto;
}

.credits-content {
  background: white;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  border-radius: 16px;
  position: relative;
  font-family: var(--texte-default);
  /* Masqué au début pour l'animation */
  transform: translateY(-100%);
  opacity: 0;
}

/* L'ouverture utilise l'animation popupIn */
#credits-fond.open .credits-content {
  animation: popupIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* La fermeture utilise l'animation popupOut */
#credits-fond.closing .credits-content {
  animation: popupOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* --- KEYFRAMES (Animations) --- */
/* Modification de l'animation d'ENTRÉE */
@keyframes popupIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Nouvelle animation de SORTIE */
@keyframes popupOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
/* --- Style du bouton de fermeture --- */
#close-credits {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

/* --- Style de la liste des développeurs --- */
.developer-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.developer-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

.developer-list li:last-child {
  border-bottom: none;
}

/* --- Style du lien LinkedIn --- */
.linkedin-link {
  color: #0077B5; /* Bleu LinkedIn */
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.linkedin-link:hover {
  color: #004471;
  transform: scale(1.1);
  transform: translateX(-30%);
}

/* /////////////////////////////////
Les layouts
//////////////////////////////////// */
/*----------------------------------------------------------------
// Styles pour la page d'accueil avec le jeu Snake en mobile
------------------------------------------------------------------*/
.Accueil {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--couleur-fond);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.1em;
  top: 0;
  margin-top: 0;
  padding-top: 0;
}

.Accueil .snake-container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Accueil canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.Accueil .instructions {
  position: absolute;
  text-align: center;
  color: var(--couleur-texte-blanc);
  font-family: var(--texte-titre);
  z-index: 10;
  /* Position mobile par défaut */
  top: 30%;
  left: 50%;
  transform: translateX(-50%); /* Centrage horizontal uniquement */
}

.Accueil .instructions .titre {
  font-family: var(--texte-titre);
  color: var(--couleur-texte-blanc);
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  background-color: var(--acceuil-couleur-texte-fond);
  padding: 0.5rem 1rem;
  border-radius: 12px;
}

/* Animation clé pour faire glisser les éléments vers le haut */
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translate(0, -200%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translate(0, 200%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* État initial pour tous les éléments qui seront animés dans n'importe quelle phase */
.Accueil .instructions h2.titre,
.Accueil .instructions .instructions-container,
.Accueil .boutton-container,
.Accueil #stopButton {
  opacity: 0;
  transform: translate(0, 30px);
  pointer-events: none;
  transition: none; /* Crucial pour laisser les @keyframes prendre le relais */
}

/* Les boutons individuels */
.Accueil #startButton, .Accueil #quitButton {
  transition: none; /* S'assure que la transition ne rentre pas en conflit */
}

/* Séquence 1 : Titre de Bienvenue et Boutons */
#instructions.is-welcome-active h2.titre {
  animation: slideInUp 1s ease-out forwards;
  animation-delay: 0.2s;
  pointer-events: auto;
}

#instructions.is-welcome-active ~ .boutton-container {
  animation: slideInDown 1s ease-out forwards;
  animation-delay: 0.6s;
  pointer-events: auto;
}

/* Séquence 2 : Titre dynamique et Conteneur de commandes */
#instructions.is-command-active .instructions-container {
  animation: slideInUp 1s ease-out forwards;
  animation-delay: 0.1s;
  pointer-events: auto;
}

/* Séquence 3 : jeu en cours */
#instructions.is-game-active ~ #stopButton {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.1s;
  pointer-events: auto;
}

/* Séquence 4 : Game Over */
#instructions.is-gameover-active p { /* dynamicTitle */
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.1s;
  pointer-events: auto;
}

#instructions.is-gameover-active .instructions-container {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.4s;
  pointer-events: auto;
}

#instructions.is-gameover-active ~ .boutton-container {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.8s;
  pointer-events: auto;
}

.Accueil .instructions .instructions-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--acceuil-couleur-texte-fond);
  border-radius: 12px;
}

#instructions.is-animating .instructions-container {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.2s;
  pointer-events: auto;
}

.Accueil .instructions .instructions-titre {
  font-size: 2.2rem;
  padding: 1rem;
}

.Accueil .instructions p {
  font-size: 1.4rem;
  color: var(--couleur-texte-blanc);
}

.Accueil .instructions .instructions-body {
  padding: 1rem;
}

@keyframes pulse {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1) translate(0, -14px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.8;
  }
}
#arrowIndicator {
  opacity: 0;
  position: absolute;
  bottom: 5%;
  color: var(--couleur-texte-blanc);
  transition: opacity 0.2s ease-out;
  z-index: 20;
}

/* Quand on veut la montrer */
#instructions.is-welcome-active ~ .arrow-indicator,
#instructions.is-gameover-active ~ .arrow-indicator {
  animation: slideInDown 0.6s ease forwards;
  animation-delay: 1.4s;
  pointer-events: auto;
}

.arrow-indicator .arrow-icon {
  font-size: 4.6rem;
  animation: pulse 2s infinite;
  display: block;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.Accueil .instructions .controls-display {
  display: flex;
  gap: 2rem;
  padding-bottom: 1rem;
}

.Accueil .instructions .controls-desktop {
  display: none;
}

.Accueil .instructions .controls-mobile {
  display: block;
}

.Accueil .instructions .control-section {
  text-align: center;
}

.Accueil .instructions .control-section h4 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  font-family: var(--texte-default);
  color: var(--couleur-texte-blanc);
}

.Accueil .instructions .commands-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.Accueil .instructions .separator {
  display: flex;
  align-items: center;
  font-size: 2rem;
}

.Accueil .instructions .key-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Accueil .instructions .command-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.Accueil .instructions .key {
  display: inline-block;
  background-color: #555;
  color: white;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: monospace;
  min-width: 1.5rem;
  text-align: center;
  border: 1px solid #777;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  transition: 0.2s;
}

.Accueil .instructions .key-desc {
  font-family: var(--texte-default);
  font-size: 1.2rem;
}

.Accueil #stopButton {
  position: absolute;
  top: 2%;
  left: 2%;
  z-index: 10;
  background-color: var(--acceuil-couleur-bouton-quitter);
  color: var(--couleur-texte-blanc);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
  font-family: var(--texte-titre);
}

.Accueil #stopButton:hover {
  background-color: var(--acceuil-couleur-bouton-quitter-hover);
}

.Accueil .boutton-container {
  position: absolute;
  bottom: 30%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
  gap: 1rem;
  transform: translateX(-50%);
}

/* Styles des boutons */
.Accueil #startButton, .Accueil #quitButton {
  background-color: var(--acceuil-couleur-bouton-jouer);
  color: var(--couleur-texte-blanc);
  font-size: 2rem;
  letter-spacing: 0.1em;
  padding: 0.6rem 1rem;
  z-index: 10;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.5s ease;
  font-family: var(--texte-titre);
}

.Accueil #startButton:hover {
  background-color: var(--acceuil-couleur-bouton-jouer-hover);
}

.Accueil #quitButton {
  background-color: var(--acceuil-couleur-bouton-quitter);
}

.Accueil #quitButton:hover {
  background-color: var(--acceuil-couleur-bouton-quitter-hover);
}

/*--------------------------------------------------------------
// Styles pour les tablettes (MIN-WIDTH: 600px)
--------------------------------------------------------------*/
@media (min-width: 600px) {
  .Accueil .instructions {
    top: 20%;
  }
  .Accueil .instructions .titre {
    font-size: 3rem;
  }
  .Accueil .instructions p {
    font-size: 1.8rem;
  }
  .Accueil .instructions .control-section h4 {
    font-size: 1.6rem;
  }
  .Accueil #startButton, .Accueil #quitButton {
    font-size: 2rem;
    padding: 0.8rem 1.4rem;
  }
  .Accueil .boutton-container {
    flex-direction: row;
    bottom: 25%;
  }
}
/*--------------------------------------------------------------
// Styles pour Desktops (MIN-WIDTH: 1024px)
--------------------------------------------------------------*/
@media (min-width: 1024px) {
  .Accueil .instructions {
    top: 15%;
  }
  .Accueil .instructions .titre {
    font-size: 4rem;
  }
  .Accueil .instructions p {
    font-size: 2rem;
  }
  .Accueil .instructions .control-section h4 {
    font-size: 2rem;
  }
  .Accueil #startButton, .Accueil #quitButton {
    font-size: 2.2rem;
    padding: 1rem 2rem;
  }
  .Accueil .boutton-container {
    flex-direction: row;
    bottom: 20%;
  }
  /* gestion de l'affichage */
  .Accueil .instructions .controls-desktop {
    display: block;
  }
  .Accueil .instructions .controls-mobile {
    display: none;
  }
  .Accueil .instructions .control-section {
    text-align: center;
  }
}
.Ressources {
  display: flex;
  flex-direction: column; /* force empilement vertical : .pivots au-dessus, .aide en dessous */
  align-items: stretch;
  height: auto;
  /* Retourné au comportement par défaut : pas de texte à gauche de David.
     Les styles spécifiques à .zone-david ont été supprimés. */
}
.Ressources .pivots {
  /* espace latéral global pour la section pivots */
  padding-left: 3vw;
  padding-right: 3vw;
  box-sizing: border-box;
}
@media screen and (min-width: 432px) {
  .Ressources .pivots {
    height: 70vh;
  }
}
@media screen and (min-width: 576px) {
  .Ressources .pivots {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center; /* centre verticalement .prof dans la section */
  }
}
.Ressources .pivots .prof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* force toutes les lignes de la grille à partager la même hauteur */
  grid-auto-rows: 1fr;
  align-items: stretch; /* étire les items pour remplir leur cellule */
  position: relative;
  /* chaque personne (figure + description) est un item de la grille */
  /* description sous l'image (pour Grégory) */
  /* chaque figure occupe toute la hauteur de sa cellule et est un conteneur flex */
}
.Ressources .pivots .prof .prof-texte-content {
  font-family: var(--texte-titre);
  color: var(--couleur-texte-footer);
  opacity: 0;
  /* important : centrer autour du top fourni par JS */
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
  /* par défaut : ne pas capter les événements (clic passe au dessous) */
  pointer-events: none;
  /* empêcher la sélection quand invisible */
  user-select: none;
  text-align: left;
  background: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1rem;
  z-index: 10;
  font-size: 1rem;
}
@media screen and (min-width: 576px) {
  .Ressources .pivots .prof {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 785px) {
  .Ressources .pivots .prof {
    font-size: 4rem;
  }
}
.Ressources .pivots .prof .prof-texte-david {
  grid-column: 1/span 2; /* à gauche */
  justify-self: start;
  margin-right: 1rem;
  align-self: center; /* aligne verticalement au centre de la grille (même hauteur que la figure) */
  /* ajustement fin si nécessaire :
     padding-top: 0.25rem; */
  font-size: 1rem;
}
.Ressources .pivots .prof .prof-texte-greg {
  grid-column: 3/span 2; /* à droite */
  justify-self: end;
  text-align: right;
  margin-left: 1rem;
  margin-right: 0;
  align-self: center; /* aligne verticalement au centre de la grille (même hauteur que la figure) */
  /* ajustement fin si nécessaire :
     padding-top: 0.25rem; */
  font-size: 1rem;
}
@media screen and (min-width: 576px) {
  .Ressources .pivots .prof .prof-texte-david,
  .Ressources .pivots .prof .prof-texte-greg {
    width: 90%;
    font-size: 1rem;
  }
}
@media screen and (min-width: 785px) {
  .Ressources .pivots .prof .prof-texte-greg {
    margin-right: 1.1rem;
  }
  .Ressources .pivots .prof .prof-texte-david,
  .Ressources .pivots .prof .prof-texte-greg {
    width: 60%;
    font-size: 1.5rem;
  }
}
.Ressources .pivots .prof .prof-texte-content.is-visible {
  opacity: 1;
  /* activer la sélection et les interactions quand visible */
  pointer-events: auto;
  user-select: text;
  cursor: text;
  /* surtout ne pas changer transform ici (JS contrôle top) */
}
.Ressources .pivots .prof .prof-person {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.Ressources .pivots .prof .person-desc {
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  position: relative;
  z-index: 3; /* force la description au-dessus du fond */
  background: rgba(255, 255, 255, 0); /* transparent par défaut, changez si besoin */
  letter-spacing: 0.3rem;
}
@media screen and (min-width: 576px) {
  .Ressources .pivots .prof {
    height: 80%; /* <- .prof prend 80% de la hauteur de .pivots */
    box-sizing: border-box;
    width: 100%;
  }
}
.Ressources .pivots .prof figure {
  grid-column: span 2;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* click plutôt que hover */
  /* bordure par défaut (blanche) */
  border: 2px solid #fff;
  transition: border-color 0.18s ease;
  /* zone de hover fixe (couvre toute la figure) */
  /* état actif (clic) : appliquer un flou / background sur le figcaption */
  /* état actif : bordure orange (variable ou fallback) */
  /* Optionnel : état actif => déplacer / agrandir l'image et flouter */
  /* état inactif : reset */
  /* Optionnel : état actif (clic) : image floutée / déplacée (déjà géré par .is-active plus haut) */
  /* aucune règle :hover restante — on utilise uniquement .is-active */
}
.Ressources .pivots .prof figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.Ressources .pivots .prof figure.is-active figcaption {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* fallback pour anciens navigateurs : flouter le texte lui‑même */
  filter: blur(0.3px);
}
.Ressources .pivots .prof figure.is-active {
  border-color: var(--personnes-border-pivots-active, #ff8a00);
}
.Ressources .pivots .prof figure.is-active .img-pivots {
  transform: translateX(50%) scale(1.12);
  transition: transform 0.35s ease-in-out, filter 0.25s ease;
  filter: blur(3px);
}
.Ressources .pivots .prof figure .img-pivots {
  transition: transform 0.25s ease, filter 0.25s ease;
  object-fit: cover;
  object-position: 50% 20%; /* le haut de l'image reste visible */
  transform-origin: top center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  border-radius: 0; /* plus d'arrondi sur les images */
}
.Ressources .pivots .prof figure .img-pivots:hover {
  border: none;
}
.Ressources .pivots .prof figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  color: var(--couleur-texte-blanc);
  font-family: var(--texte-titre);
  text-align: center;
  font-size: 1rem;
  z-index: 2;
  transition: all 0.25s ease; /* animation pour l'apparition du flou / background */
  /* rendre le background léger pour que le backdrop-filter ait de l'effet */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media screen and (min-width: 576px) {
  .Ressources .pivots .prof figure figcaption {
    font-size: 1.5rem; /* augmente sur écrans plus larges */
  }
}
.Ressources .pivots .prof figure .prof_content {
  flex: 1 1 0;
  grid-column: span 1;
}
.Ressources .pivots .prof .David {
  transform-origin: top left; /* ancre en haut à gauche pour garder le haut fixe */
}
.Ressources .pivots .prof .Greg {
  transform-origin: top right; /* ancre en haut à droite pour garder le haut fixe */
}
.Ressources .aide {
  order: 1; /* s'assure d'être après .pivots dans l'ordre visuel */
  flex: 0 0 auto; /* ne pas s'étirer */
  margin-top: 2rem; /* espace au-dessus si nécessaire */
  margin-bottom: 4rem;
  /* plus de place pour les slides */
  min-height: 40vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* état actif : fond orange */
}
@media screen and (min-width: 432px) {
  .Ressources .aide {
    min-height: 50vh; /* augmente sur écrans moyens */
    margin-top: 4rem;
  }
}
@media screen and (min-width: 576px) {
  .Ressources .aide {
    min-height: 55vh; /* augmente sur écrans plus larges */
  }
}
.Ressources .aide .banner {
  width: 100%;
  text-align: center;
  overflow: hidden;
  position: relative;
  perspective: 1000px;
  height: 56vh;
}
.Ressources .aide .banner .slider {
  position: absolute; /* important pour positionnement des items */
  width: 200px;
  height: 18.125rem;
  top: 10%;
  left: calc(50% - 100px);
  transform-style: preserve-3d;
  animation: autoRun 20s linear infinite;
  animation-play-state: running;
  margin-top: 1.5rem;
}
.Ressources .aide .banner .slider .item {
  position: absolute;
  inset: 0 0 0 0;
  /* positionnement dans le carrousel */
  transform: rotateY(calc((var(--position) - 1) * 360 / var(--quantity) * 1deg)) translateZ(300px);
  transform-style: preserve-3d;
  background: transparent;
  /* perspective appliquée sur chaque item pour le flip interne */
  perspective: 1000px;
  /* wrapper interne pour le flip */
  /* Par défaut, afficher le recto ; sur hover, on retourne */
  /* Les deux faces du flip */
  /* empêcher que l'image dépasse de la face avant */
  /* images des cartes : toujours contenues, couvrent la face */
  /* utilitaires de positionnement du titre à l'intérieur des faces */
  /* s'assurer que le H2 de la face avant ne possède pas de margin-top */
}
.Ressources .aide .banner .slider .item .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.Ressources .aide .banner .slider .item:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.Ressources .aide .banner .slider .item .flip-card-front,
.Ressources .aide .banner .slider .item .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  border: var(--personnes-flip-card-border) 1px solid;
  border: 2px solid var(--personnes-couleur-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.Ressources .aide .banner .slider .item .flip-card-front {
  overflow: hidden; /* coupe tout débordement */
  justify-content: flex-end; /* place le contenu en haut */
  flex-direction: column-reverse;
  padding-top: 1rem;
  background-color: var(--personnes-flip-card-front);
  gap: 3rem;
}
.Ressources .aide .banner .slider .item .flip-card-front img,
.Ressources .aide .banner .slider .item .flip-card-front > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* recadre proprement sans dépasser */
}
.Ressources .aide .banner .slider .item .flip-card-back {
  transform: rotateY(180deg);
  background-color: var(--personnes-flip-card-bg);
}
.Ressources .aide .banner .slider .item .flip-card-front h2,
.Ressources .aide .banner .slider .item .flip-card-back h2,
.Ressources .aide .banner .slider .item .flip-card-front p,
.Ressources .aide .banner .slider .item .flip-card-back p {
  margin: 0;
  width: 100%;
  text-align: center;
  transition: text-align 0.25s ease, padding 0.25s ease, transform 0.25s ease;
  font-family: var(--texte-default);
  font-size: 0.8rem;
  color: var(--couleur-texte-blanc);
}
.Ressources .aide .banner .slider .item .flip-card-front h2 {
  margin-top: 0;
  color: var(--personnes-flip-card-front-titre-couleur);
}
.Ressources .aide .controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.Ressources .aide .btn-pixel {
  font-family: var(--texte-titre);
  font-size: 1rem;
  padding: 0.5rem 1.25rem;
  color: var(--personnes-couleur-texte-boutons);
  background: var(--personnes-couleur-bg-boutons);
  border: 3px solid var(--personnes-flip-card-border);
  border-radius: 0;
  image-rendering: pixelated;
  box-shadow: 0 0 0 3px #000;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, transform 0.06s ease;
}
.Ressources .aide .btn-pixel.is-active {
  border-color: var(--personnes-couleur-border-btn-active); /* orange */
}
.Ressources .aide .btn-pixel:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px #000;
}
.Ressources .res-titre {
  font-family: var(--texte-titre);
  color: var(--couleur-texte-footer);
  text-align: center;
  margin: 2rem;
  font-size: 3rem;
}
@keyframes autoRun {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/**************************************************************************************************************/
.section_LiensUtiles {
  margin-top: 250px;
  margin-bottom: 250px;
}

/* Conteneur Grid */
.grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1.2fr;
  width: 70%;
  margin: 0 auto;
  gap: 0;
  height: 100vh;
  position: relative;
  /* Appliquer un effet de bord fade sur les côtés */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* petit effet de “pixelation” avec filtre */
  image-rendering: pixelated;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid var(--liens-couleur-logo);
  font-size: 2rem;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease;
  font-family: var(--texte-titre);
}

.menu-item .icon {
  width: 75px;
  height: 75px;
  transition: opacity 0.3s ease;
  margin-bottom: 8px;
}

.menu-item .text {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
  padding: 0 5px;
}

.menu-item:hover .icon {
  opacity: 1;
  filter: brightness(0) invert(0);
  transition: filter 0.3s ease;
}

.menu-item.animate .text {
  animation: fadeTextInOut 10s ease-in-out forwards;
}

.menu-item:hover {
  background-color: var(--liens-couleur-section);
  color: black;
}

.menu-item.hovered .text {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu-item.hovered .text {
  animation: fadeInHover 0.3s forwards;
}

/*Animation d'apparition lorsque l'animation JS n'affiche pas de texte */
@keyframes fadeInHover {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
.menu-item:not(:hover).animate .text {
  animation: fadeTextInOut 10s ease-in-out forwards;
}

/* variation du grid */
.menu-item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.menu-item:nth-child(4) {
  grid-column: span 2;
}

.menu-item:nth-child(7) {
  grid-column: span 2;
  grid-row: span 2;
}

.menu-item:nth-child(8) {
  grid-column: span 2;
  grid-row: span 2;
}

.menu-item:nth-child(11) {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .grid-menu {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 320px;
    width: 90%;
    height: auto;
    gap: 12px;
  }
  /* Réinitialisation de tous les items du menu pour mobile */
  .grid-menu .menu-item {
    grid-column: auto;
    grid-row: auto;
    font-size: 1.5rem;
  }
  /* Icône toujours visible sur mobile */
  .menu-item .icon {
    opacity: 1;
  }
  /* Texte toujours visible sur mobile */
  .menu-item .text {
    opacity: 1;
    transform: translateY(0);
  }
  /* Désactiver les effets hover sur mobile */
  .menu-item:hover .icon,
  .menu-item:hover .text {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fade animation (utilisé dans le script liens-anim.js) */
@keyframes fadeTextInOut {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  25% {
    opacity: 1;
    transform: translateY(-4px);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}
.menu-item.hovered .text {
  animation: none !important; /* arrête timeline animation */
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.Documents {
  position: relative;
  display: flex;
  justify-content: center;
}

.dossiers {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* cible tous les enfants directs de .dossier */
.dossier {
  position: relative;
  width: 315px;
  height: 250px;
  perspective: 800px;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 3);
}

/* Arrière */
.arriere {
  position: absolute;
  inset: 0;
  border: 2px solid var(--docs-couleur-dossier-contour);
  border-radius: 4px;
}

.dossier:nth-of-type(1) .arriere {
  background-color: var(--docs-couleur-dossier-1);
}

.dossier:nth-of-type(2) .arriere {
  background-color: var(--docs-couleur-dossier-2);
}

.dossier:nth-of-type(3) .arriere {
  background-color: var(--docs-couleur-dossier-3);
}

.dossier:nth-of-type(4) .arriere {
  background-color: var(--docs-couleur-dossier-4);
}

.dossier:nth-of-type(5) .arriere {
  background-color: var(--docs-couleur-dossier-5);
}

.dossier:nth-of-type(6) .arriere {
  background-color: var(--docs-couleur-dossier-6);
}

.dossier:nth-of-type(7) .arriere {
  background-color: var(--docs-couleur-dossier-7);
}

.dossier:nth-of-type(8) .arriere {
  background-color: var(--docs-couleur-dossier-8);
}

/* Etiquette */
.arriere::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 9px;
  width: 300px;
  height: 25px;
  border-top: 2px solid var(--docs-couleur-dossier-contour);
  border-left: 2px solid var(--docs-couleur-dossier-contour);
  border-right: 2px solid var(--docs-couleur-dossier-contour);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dossier:nth-of-type(1) .arriere::before {
  background-color: var(--docs-couleur-dossier-1);
}

.dossier:nth-of-type(2) .arriere::before {
  background-color: var(--docs-couleur-dossier-2);
}

.dossier:nth-of-type(3) .arriere::before {
  background-color: var(--docs-couleur-dossier-3);
}

.dossier:nth-of-type(4) .arriere::before {
  background-color: var(--docs-couleur-dossier-4);
}

.dossier:nth-of-type(5) .arriere::before {
  background-color: var(--docs-couleur-dossier-5);
}

.dossier:nth-of-type(6) .arriere::before {
  background-color: var(--docs-couleur-dossier-6);
}

.dossier:nth-of-type(7) .arriere::before {
  background-color: var(--docs-couleur-dossier-7);
}

.dossier:nth-of-type(8) .arriere::before {
  background-color: var(--docs-couleur-dossier-8);
}

.dossier:nth-child(odd) .arriere::before {
  left: 10px;
}

.dossier:nth-child(even) .arriere::before {
  left: auto;
  right: 10px;
}

.texte-etiquette {
  position: absolute;
  top: -22px;
  font-size: 22px;
  color: #ffffff;
  font-family: var(--texte-default), sans-serif;
}

/* Papier */
.papier {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: 70%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: transform 0.4s ease;
  z-index: 1;
  pointer-events: all;
  cursor: pointer;
}

.telecharger-papier {
  text-align: center;
}

/* Avant */
.avant {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  border: 2px solid var(--docs-couleur-dossier-contour);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transform-origin: bottom center;
  transform: rotateX(0deg);
  transition: transform 0.4s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  pointer-events: all;
  cursor: pointer;
}

.dossier:nth-of-type(1) .avant {
  background-color: var(--docs-couleur-dossier-1);
}

.dossier:nth-of-type(2) .avant {
  background-color: var(--docs-couleur-dossier-2);
}

.dossier:nth-of-type(3) .avant {
  background-color: var(--docs-couleur-dossier-3);
}

.dossier:nth-of-type(4) .avant {
  background-color: var(--docs-couleur-dossier-4);
}

.dossier:nth-of-type(5) .avant {
  background-color: var(--docs-couleur-dossier-5);
}

.dossier:nth-of-type(6) .avant {
  background-color: var(--docs-couleur-dossier-6);
}

.dossier:nth-of-type(7) .avant {
  background-color: var(--docs-couleur-dossier-7);
}

.dossier:nth-of-type(8) .avant {
  background-color: var(--docs-couleur-dossier-8);
}

/* Animations */
.dossier:hover .avant {
  transform: rotateX(-40deg);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}

.dossier:hover .papier {
  transform: translateY(-40px);
}

.dossier:nth-of-type(even):hover {
  transform: rotateZ(-2deg);
}

.dossier:nth-of-type(odd):hover {
  transform: rotateZ(2deg);
}

@media screen and (min-width: 432px) {
  .dossiers {
    top: 200px;
  }
  .dossier {
    width: 800px;
    height: 550px;
  }
  .dossier.dossier:nth-of-type(2) {
    top: -100px;
  }
  .dossier.dossier:nth-of-type(3) {
    top: -200px;
  }
  .dossier.dossier:nth-of-type(4) {
    top: -300px;
  }
  .dossier.dossier:nth-of-type(5) {
    top: -400px;
  }
  .dossier.dossier:nth-of-type(6) {
    top: -500px;
  }
  .dossier.dossier:nth-of-type(7) {
    top: -600px;
  }
  .dossier.dossier:nth-of-type(8) {
    top: -700px;
  }
  .dossier:nth-of-type(even) {
    left: 200px;
  }
  .dossier:nth-of-type(odd) {
    left: -200px;
  }
  .dossier:hover .papier {
    transform: translateY(-130px);
  }
  .telecharger-papier {
    text-align: center;
    font-size: 65px;
  }
  .arriere::before {
    width: 400px;
    height: 55px;
  }
  .texte-etiquette {
    top: -22px;
    font-size: 30px;
  }
}
.titre-section {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: black;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  font-size: 55px;
  font-family: var(--texte-titre), sans-serif;
}

@media screen and (min-width: 432px) {
  .titre-section {
    white-space: nowrap;
    top: 65%;
    left: 50%;
    font-size: 85px;
    letter-spacing: 0.1em;
  }
}
@keyframes flicker {
  0% {
    opacity: 1;
    filter: brightness(1.05);
  }
  25% {
    opacity: 0.9;
    filter: brightness(0.95);
  }
  50% {
    opacity: 0.95;
    filter: brightness(1.05);
  }
  75% {
    opacity: 0.9;
    filter: brightness(0.98);
  }
  100% {
    opacity: 1;
    filter: brightness(1.05);
  }
}
.wrapper {
  width: 100%;
  height: 33vh; /* hauteur du canvas */
  position: relative;
}

.wrapper separateur-canevas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute; /* pour remplir le conteneur */
  top: 0;
  left: 0;
  z-index: 1;
}

/* --- Footer flottant au-dessus --- */
footer {
  position: absolute; /* flotte au-dessus des autres éléments */
  bottom: 4rem; /* collé en bas de la page */
  left: 0;
  width: 100%; /* prend toute la largeur */
  display: flex;
  flex-direction: column;
  z-index: 100; /* doit être supérieur à l'élément dessous */
  overflow: hidden; /* canvas reste à l'intérieur */
}

/* Wrapper interne du footer */
footer > div {
  width: 100%;
  position: relative;
  z-index: 0; /* contenu au-dessus du canvas */
}

footer h2 {
  color: var(--footer-couleur-logo);
}

/* --- Zone supérieure --- */
.dessus {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  column-gap: 33vw;
  margin-left: 10px;
}

/* Adresse du collège */
.adresse {
  display: flex;
  font-size: 18px;
  margin-left: 10px;
  padding-left: 20px;
}

/* Zone inférieure */
.dessous {
  position: relative;
  bottom: 0; /* pas de décalage inutile */
}

/* Section Nous Joindre */
.nous-joindre {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  font-size: 12px;
  padding-left: 20px;
}

/* Médias sociaux */
.medias-sociaux {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin-left: auto;
  padding-right: 20px;
}

.titre-medias-sociaux {
  display: none;
}

/* Icônes sociales */
.footer-icones-sociales {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 15px;
  margin-top: 5px;
}

.footer-icones-sociales a {
  display: inline-block;
  width: 30px;
  height: 30px;
}

.footer-icones-sociales img.icone-sociale {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Responsive ≥ 432px --- */
@media screen and (min-width: 432px) {
  footer {
    bottom: 150px;
  }
  .dessus {
    justify-content: center;
    text-align: center;
  }
  .medias-sociaux {
    margin-left: 0;
    padding-right: 0;
  }
  .nous-joindre {
    font-size: large;
  }
  /* Icônes sociales */
  .footer-icones-sociales {
    flex-direction: row;
    row-gap: 0;
    column-gap: 15px;
  }
  .footer-icones-sociales a {
    width: 40px;
    height: 40px;
  }
  .footer-icones-sociales img:hover {
    filter: brightness(20);
    scale: 1.2;
  }
  .adresse {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
  }
  .titre-medias-sociaux {
    display: block;
  }
}
.page_404 {
  height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page_404 h1 {
  font-size: 10rem;
  text-shadow: -2px -2px 0 var(--couleur-texte-footer), 2px -2px 0 var(--couleur-texte-footer), -2px 2px 0 var(--couleur-texte-footer), 2px 2px 0 var(--couleur-texte-footer);
  text-align: center;
  margin-bottom: 20px;
}

.page_404 h2 {
  font-size: 5rem;
  text-shadow: -2px -2px 0 var(--couleur-texte-footer), 2px -2px 0 var(--couleur-texte-footer), -2px 2px 0 var(--couleur-texte-footer), 2px 2px 0 var(--couleur-texte-footer);
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--texte-titre);
}

.page_404 .btn_retourner {
  display: inline-block;
  padding: 12px 25px;
  background-color: black;
  color: white;
  font-family: var(--texte-titre);
  text-decoration: none;
  border: 3px solid;
  box-shadow: 4px 4px 0 black;
  text-align: center;
  cursor: pointer;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .page_404 h1 {
    font-size: 6rem;
  }
  .page_404 h2 {
    font-size: 3rem;
  }
  .page_404 .btn_retourner {
    padding: 10px 20px;
    font-size: 1rem;
    box-shadow: 3px 3px 0 black;
  }
}
#bg-container {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  overflow: hidden;
}

.row {
  height: 12.5vh;
  display: flex;
  overflow: hidden;
}

.track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.track img {
  height: 9vh; /* Hauteur de l'image */
  width: 200px; /* LARGEUR FIXE */
  object-fit: contain;
  margin-right: 10px;
  opacity: 0.2;
  filter: invert(40%) brightness(1.4);
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.move-left .track {
  animation: scrollLeft 120s linear infinite;
}

.move-right .track {
  animation: scrollRight 120s linear infinite;
}/*# sourceMappingURL=style.css.map */