body {
  margin: 0;
  background-color: #a10000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Zone globale (repère du logo + menu) */
.logo-zone {
  position: relative;
  transform: translateY(-50px);
}

/* Logo */
.logo-zone img {
  max-width: 90vw;
  height: auto;

  /* Monte uniquement le logo (ACCUEIL ne bouge pas) */
  transform: translateY(-100px);
}

/* ===== MENU (repère + liens) ===== */
.menu {
  position: absolute;

  /* Position globale du menu par rapport au logo */
  top: -150px;
  left: 5px;
}

/* Style commun à tous les liens */
.menu-lien {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: normal;
  font-size: 30px;

  text-decoration: none;
}

/* ----- Réglages INDIVIDUELS : position + couleur ----- */
.lien-accueil {
  left: 0px;
  color: #004700;
}

.lien-presentation {
  left: 190px;
  color: #004700;
}

.lien-actions {
  left: 460px;
  color: #000000ff;
}

.lien-contact {
  left: 645px;
  color: #000000ff;
}

/* (Optionnel) effet au survol */
.menu-lien:hover {
  text-decoration: underline;
}
/* ===== TEXTE DE PRÉSENTATION ===== */
.texte-presentation {
  position: absolute;

  /* POSITION DU BLOC */
  top: 145px;   /* descend / monte le texte */
  left: 155px;    /* déplace horizontalement */

  /* DIMENSIONS DU BLOC */
  width: 510px; /* largeur du texte (tu as la main ici) */

  /* TYPOGRAPHIE */
  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.4;

  color: #000000;
  text-align: justify;
}

/* Espacement entre les paragraphes */
.texte-presentation p {
  margin: 0 0 16px 0;
}
/* ===== PAGE PRÉSENTATION : GROUPE ===== */
.presentation-contenu {
  position: relative;
}

/* ===== TITRE PRÉSENTATION (indépendant) ===== */
.presentation-titre {
  position: absolute;

  /* POSITION DU TITRE */
  top: -65px;
  left: 155px;

  width: 520px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;

  color: #004700;
  text-align: left;
}


/* ===== TEXTE PRÉSENTATION (indépendant) ===== */
.presentation-texte {
  position: absolute;

  /* POSITION DU TEXTE */
  top: 190px;
  left: 0px;

  width: 720px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;

  color: #000;
  text-align: justify;
}
.presentation-texte {
  position: absolute;

  /* POSITION DU TEXTE */
  top: -25px;
  left: 155px;

  width: 510px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;

  color: #000;
  text-align: justify;
}

.presentation-texte p {
  margin: 0 0 20px 0;
}
/* ===== PAGE ACTIONS ===== */

/* Conteneur général (repère) */
.actions-contenu {
  position: relative;
}

/* ----- TITRE ACTIONS ----- */
.actions-titre {
  position: absolute;

  /* POSITION DU TITRE */
  top: -30px;
  left: 0px;

  width: 400px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;

  color: #004700;
  text-align: left;
}

/* ----- STYLE COMMUN DES BOUTONS ----- */
.actions-bouton {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;

  color: #000;
  text-decoration: none;

  cursor: pointer;
}

/* ----- BOUTON : MACAYA ----- */
.bouton-macaya {
  top: 10px;
  left: 0px;
}

/* ----- BOUTON : MACAYA X CIE LARGILE ----- */
.bouton-cielargile {
  top: 35px;
  left: 0px;
}

/* Optionnel : effet au survol */
.actions-bouton:hover {
  text-decoration: underline;
}
/* ===== PAGE CONTACT ===== */
.contact-contenu {
  position: relative;
}

/* ----- TITRE CONTACT ----- */
.contact-titre {
  position: absolute;

  /* POSITION */
  top: -30px;
  left: 0px;

  /* LARGEUR (optionnel) */
  width: 400px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;

  color: #004700;
  margin: 0;
}

/* ----- MENTION ----- */
.contact-mention {
  position: absolute;

  /* POSITION */
  top: -8px;
  left: 0px;

  /* LARGEUR (optionnel) */
  width: 520px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;

  color: #000;
  margin: 0;
}

/* ----- EMAIL (BOUTON) ----- */
.contact-email {
  position: absolute;

  /* POSITION */
  top: 12px;
  left: 0px;

  /* LARGEUR (optionnel) */
  width: 520px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;

  color: #000;
  text-decoration: none;

  cursor: pointer;
}

/* effet hover */
.contact-email:hover {
  text-decoration: underline;
}

/* ----- TÉLÉPHONE ----- */
.contact-telephone {
  position: absolute;

  /* POSITION */
  top: 33px;
  left: 0px;

  /* LARGEUR (optionnel) */
  width: 520px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;

  color: #000;
  margin: 0;
}
/* ===== PAGE ACTIONS – MACAYA ===== */

.actions-macaya-contenu {
  position: relative;
}

/* ----- TITRE ----- */
.actions-macaya-titre {
  position: absolute;

  top: -30px;
  left: 0px;

  width: 400px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;

  color: #004700;
  margin: 0;
}

/* ----- STYLE COMMUN DES LIENS ----- */
.actions-macaya-lien {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;

  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* ----- POSITION INDIVIDUELLE DES LIENS ----- */
.lien-moi {
  top:-5px;
  left: 0px;
}

.lien-squad {
  top: 20px;
  left: 0px;
}

.lien-bouge {
  top: 45px;
  left: 0px;
}

.lien-futur {
  top: 70px;
  left: 0px;
}

.lien-murs {
  top: 95px;
  left: 0px;
}

.lien-storiz {
  top: 120px;
  left: 0px;
}

/* Effet au survol */
.actions-macaya-lien:hover {
  text-decoration: underline;
}
/* ===== PAGE ACTIONS – MACAYA × CIE L’ARGILE ===== */

.actions-cielargile-contenu {
  position: relative;
}

/* ----- TITRE ----- */
.actions-cielargile-titre {
  position: absolute;

  top: -30px;
  left: 0px;

  width: 520px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;

  color: #004700;
  margin: 0;
}

/* ----- STYLE COMMUN DES LIENS ----- */
.actions-cielargile-lien {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;

  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* ----- POSITION INDIVIDUELLE DES LIENS ----- */
.lien-bresso {
  top: -5px;
  left: 0px;
}

.lien-booskado {
  top: 20px;
  left: 0px;
}

.lien-timegame {
  top: 45px;
  left: 0px;
}

.lien-banquet {
  top: 70px;
  left: 0px;
}

.lien-migrants {
  top: 95px;
  left: 0px;
}

.lien-arbres {
  top: 120px;
  left: 0px;
}

/* Effet au survol */
.actions-cielargile-lien:hover {
  text-decoration: underline;
}
/* ===== ENCADRÉS ÉDITORIAUX / NOTES ===== */

.encadre-note {
  position: absolute;

  padding: 14px 18px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;


  color: #000;

  border-left: 2px solid #000;
  background: transparent;


  max-width: 560px;
}
.encadre-cielargile {
  top: 170px;
  left: 420px;
}





/* ===== BOUTON TEXTE : RETOUR MACAYA ===== */
.bouton-macaya-retour {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  
  color: #000;
  text-decoration: none;

  cursor: pointer;

   letter-spacing: 0px
}

.bouton-macaya-retour:hover {
  text-decoration: underline;
}
/* ===== POSITION PAR PAGE : BOUTON MACAYA ===== */
.retour-moi-tituba   { top: 1440px; left: 540px; }
.retour-my-squad     { top: 1240px; left: 540px; }
.retour-bouge        { top: 1290px; left: 540px; }
.retour-futur        { top: 1450px; left: 540px; }
.retour-sur-les-murs { top: 1300px; left: 540px; }
.retour-storiz       { top: 1300px; left: 540px; }
/* ===== BOUTON TEXTE : RETOUR ACTIONS MACAYA × CIE L’ARGILE ===== */
.bouton-cielargile-retour {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: bold;
  font-size: 17px;

  color: #000;
  text-decoration: none;

  cursor: pointer;
}

.bouton-cielargile-retour:hover {
  text-decoration: underline;
}
/* ===== POSITION PAR PAGE : RETOUR MACAYA × CIE L’ARGILE ===== */
.retour-bresso     { top: 1300px; left: 450px; }
.retour-booskado   { top: 1350px; left: 450px; }
.retour-timegame   { top: 1540px; left: 450px; }
.retour-banquet    { top: 1210px; left: 450px; }
.retour-migrants   { top: 1300px; left: 450px; }
.retour-aux-arbres { top: 1310px; left: 450px; }
.actions-macaya-titre a {
  color: inherit;
  text-decoration: none;
}
/* Titres-liens : pas souligné par défaut */
.actions-macaya-titre a,
.actions-cielargile-titre a {
  color: inherit;
  text-decoration: none;
}

/* Soulignement élégant au hover */
.actions-macaya-titre a:hover,
.actions-cielargile-titre a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* ===== TITRES DES PAGES PROJETS ===== */

/* ===== Style commun ===== */
.titre-projet {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: bolder;
  font-size: 30px;
  color: #000;
  margin: 0;
}

/* ===== Réglages INDÉPENDANTS par titre ===== */

.titre-moi {
  top: 175px;
  left: 331px;
  width: 800px;
  letter-spacing: 0px;
}

.titre-squad {
  top: 175px;
  left: 351px;
  width: 800px;
  letter-spacing: 0px;
}

.titre-bouge {
  top: 175px;
  left: 358px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-futur {
  top: 175px;
  left: 509px;
  width: 800px;
  letter-spacing: 0px;
}

.titre-murs {
  top: 175px;
  left: 460px;
  width: 900px;
  letter-spacing:0px;
}

.titre-storiz {
  top: 175px;
  left: 555px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-bresso {
  top: 175px;
  left: 340px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-booskado {
  top: 175px;
  left: 475px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-timegame {
  top: 175px;
  left: 490px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-banquet {
  top: 175px;
  left: 239px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-migrants {
  top: 175px;
  left: 131px;
  width: 900px;
  letter-spacing: 0px;
}

.titre-arbres {
  top: 175px;
  left: 475px;
  width: 900px;
  letter-spacing: 0px;
}





/* ===== SoundCloud : lecteurs carrés (visual) ===== */

.sc-cube {
  position: absolute;

  /* Taille carrée */
  width: 292px;
  aspect-ratio: 1 / 1;

  overflow: hidden;
  display: block;
}

.sc-cube iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Réglages indépendants (position + taille si besoin) ===== */
.sc-1 { top: 210px; left: 511px; }
.sc-2 { top: 510px; left: 511px; }
.sc-3 { top: 810px; left: 511px; }
.sc-4 { top: 1110px; left: 511px; }


/* =========================================
   LECTEURS VIDÉO NATIFS — BASE COMMUNE
   ========================================= */

.video-native {
  position: absolute;

  /* Dimension par défaut */
  width: 900px;
  aspect-ratio: 16 / 9;

  display: block;
  background: #000;
}
/* =========================================
   RÉGLAGES INDÉPENDANTS
   ========================================= */

.video-tituba { top: 210px; left: 147px; width: 500px; }

.video-squad { top: 208px; left: 150px; width: 500px; }

.video-murs { top: 215px; left: 150px; width: 500px; }

.video-bresso { top: 210px; left: 150px; width: 500px; }

.video-booskado { top: 210px; left: 152px; width: 500px; }

/* Page TIME GAME : deux lecteurs */
.video-time { top: 210px; left: 150px; width: 502px; }
.video-bo { top: 1190px; left: 150px; width: 502px; }

.video-reve { top: 210px; left: 152px; width: 500px; }

.video-arbres { top: 210px; left: 150px; width: 500px; }

/* ===== TEXTES DES PAGES PROJETS ===== */

.texte-projet {
  position: absolute;

  /* POSITION (à régler librement) */
  top: 500px;
  left: 150px;

  /* LARGEUR DU BLOC */
  width: 500px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.6;

  color: #000;
  text-align: justify;
}

/* Paragraphes */
.texte-projet p {
  margin: 0 0 20px 0;
}

/* Meta (partenaires / rendus) */
.texte-projet-meta {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.5;
}
/* =========================================
   ENCADRÉ DESCRIPTIF / CRÉDIT VIDÉO
   ========================================= */

.encadre-video {
  margin-top: 28px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique sobre */
  border-left: 2px solid #000;
 

  max-width: 520px;
}

.encadre-video {
  margin-bottom: 50px;
}
/* ===== IMAGES PROJETS ===== */
.image-projet {
  position: absolute;

  /* Valeurs par défaut */
  top: 220px;
  left: 0px;
  width: 600px;
  height: auto;

  display: block;
}
.image-bouge {
  top: 310px;
  left: 148px;
  width: 500px;
}

.image-storiz {
  top: 313px;
  left: 148px;
  width: 500px;
}

.image-migrants {
  top: 310px;
  left: 131px;
  width: 520px;
}
/* ===== TEXTES DES PAGES PROJETS ===== */

/* ===== Style commun ===== */
.texte-projet {
  position: absolute;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.6;

  color: #000;
  text-align: justify;
}

/* Paragraphes */
.texte-projet p {
  margin: 0 0 20px 0;
}

/* Meta (partenaires / rendus) */
.texte-projet-meta {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.5;
}

/* ===== RÉGLAGE SPÉCIFIQUE — MOI, TITUBA SORCIÈRE ===== */
.texte-tituba {
  top: 500px;
  left: 150px;
  width: 500px;
}

/* =========================================
   ENCADRÉ VIDÉO — TITUBA
   ========================================= */

.encadre-video-tituba {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique sobre et éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
.texte-bouge {
  top: 545px;
  left: 150px;
  width: 500px;
}
/* =========================================
   ENCADRÉ VIDÉO — BOUGE DE TA PLACE
   ========================================= */

.encadre-video-bouge {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}

/* ===== SUR LES MURS (réglages spécifiques) ===== */
.texte-projet--sur-les-murs {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo SUR LES MURS ===== */
.encadre-video-sur-les-murs {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== STORIZ (réglages spécifiques) ===== */
.texte-projet--storiz {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo STORIZ ===== */
.encadre-video-storiz {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== BRESSO DE MEMOIRES (réglages spécifiques) ===== */
.texte-projet--bresso-de-memoires {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo BRESSO DE MEMOIRES ===== */
.encadre-video-bresso-de-memoires {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== BOOSKADO (réglages spécifiques) ===== */
.texte-projet--booskado {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo BOOSKADO ===== */
.encadre-video-booskado {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== MIGRANTS D’HIER ET D’AUJOURD’HUI (réglages spécifiques) ===== */
.texte-projet--migrants-dhier-et-daujourdhui {
  top: 500px;
  left: 130px;
  width: 523px;
}
/* ===== Encadré vidéo MIGRANTS D’HIER ET D’AUJOURD’HUI ===== */
.encadre-video-migrants-dhier-et-daujourdhui {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== AUX ARBRES (réglages spécifiques) ===== */
.texte-projet--aux-arbres {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo AUX ARBRES ===== */
.encadre-video-aux-arbres {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== LE GRAND BANQUET DU REVE (réglages spécifiques) ===== */
.texte-projet--le-grand-banquet-du-reve {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo LE GRAND BANQUET DU REVE ===== */
.encadre-video-le-grand-banquet-du-reve {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== TIME GAME (réglages spécifiques) ===== */
.texte-projet--time-game {
  top: 500px;
  left: 150px;
  width: 500px;
}
/* ===== Encadré vidéo TIME GAME ===== */
.encadre-video-time-game {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
/* ===== PARLE MOI DU FUTUR (réglages spécifiques) ===== */
.texte-projet--parle-moi-du-futur {
  top: 175px;
  left: 0px;
  width: 440px;
}
/* ===== Encadré vidéo PARLE MOI DU FUTUR ===== */
.encadre-video-parle-moi-du-futur {
  margin-top: 28px;
  margin-bottom: 50px;

  padding: 12px 16px;

  font-family: "Century Gothic", CenturyGothic, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  color: #000;

  /* Esthétique éditoriale */
  border-left: 2px solid #000;

  max-width: 520px;
}
a {
  color: #000;
  text-decoration: underline;
}

a:hover {
  opacity: 0.7;
}
body::after {
  content: "";
  display: block;
  height: 400px;
}