/* ========================
   1. VARIABLES
   ======================== */

:root {
  --blue-color: #aadbee;
  --blue-color-second: #49adb6;
  --dark-color: #141c1c;
  --black-color: #151209;
  --white-color: #fcfbe4;
  --brown-color: #b16517;

  --font-titres: 'Roboto Condensed', sans-serif;
  --font-main: 'Roboto', sans-serif;

  --angle-penche: -15deg;
  
  --section-pad-x: 100px;                 /* cohérent avec section > * { padding: 0 100px; } */
  --menu-volet-w: 465px;                  /* largeur "max" du volet (ton CSS) */
  --filet-gap-right: 10px;               /* marge avant le volet */
  --filet-thickness: 3px;                /* épaisseur du filet */
  --filet-offset-y: 12px;                /* distance sous le texte */
  
  --ra-ink: rgba(230, 251, 255, 0.92);         /* texte quasi ivoire */
  --ra-bg: rgba(40, 85, 105, 0.35);            /* verre bleu */
  --ra-bg-2: rgba(120, 220, 255, 0.10);        /* reflet */
  --ra-border: rgba(120, 220, 255, 0.35);      /* contour */
  --ra-glow-1: rgba(120, 220, 255, 0.40);
  --ra-glow-2: rgba(120, 220, 255, 0.30);
  --ra-glow-3: rgba(120, 220, 255, 0.15);
  
  
  --hud-glass-a: rgba(6, 10, 18, 0.42);
  --hud-glass-b: rgba(6, 10, 18, 0.12);

}

/* ==============================
   2. RESET NAVIGATEURS
   ============================== */

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, ::after, ::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--dark-color);
  color: var(--white-color);
  font-family: var(--font-main);
  font-size: 1.6rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  font-family: var(--font-titres);
  text-transform: uppercase;
  letter-spacing: -0.9px;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--blue-color);
}

a:hover {
  text-decoration: none;
  color: var(--blue-color-second);
}

/* =======================
   3. SCROLLBAR PERSO
   ======================= */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: var(--dark-color);
}

::-webkit-scrollbar-thumb {
  background: var(--brown-color);
  border-radius: 0;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue-color-second);
}

/* =======================
   4. HEADER 
   ======================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* HEADER = niveau structure */
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 5vw;
  transition: all 0.4s ease-in-out;
}

header img {
  height: 115px;
  width: auto;
  transition: all 0.4s ease-in-out;
}

header img:hover {
  transform: scale(1.02);
}

.reseaux-sociaux {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.reseaux-sociaux a {
  font-size: 2.2rem;
  color: var(--white-color);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reseaux-sociaux a:hover {
  color: var(--dark-color);
}


.ra-mode{
  display:flex;
  align-items:center;
  gap:6px;

  flex:1;              
  white-space:nowrap;     
}

.ra-mode input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ra-mode label{
  padding:4px 10px;
  border-radius:999px;
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;

  border:1px solid rgba(120,220,255,.35);
  background:rgba(120,220,255,.08);
  color:rgba(240,252,255,.8);

  cursor:pointer;
  transition:all .25s ease;
}

.ra-mode input:checked + label{
  background:rgba(120,220,255,.22);
  border-color:rgba(120,220,255,.75);
  color:rgba(255,255,255,.95);
  box-shadow:0 0 12px rgba(120,220,255,.25);
}




/* =========================================
   5. ÉTAT SCROLLED
   ========================================= */

header.header-scrolled {
  background-color: var(--dark-color);
  padding: 0.8rem 5vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

header.header-scrolled img {
  height: 50px;
}

header.header-scrolled .reseaux-sociaux a:hover {
  color: var(--blue-color);
}

/* ======================================
   5. DESIGN INTERNE
   ====================================== */

h1 {
  font-size: 5rem;
  color: var(--white-color);
  margin-bottom: 2rem;
  line-height: 1.1;
}

h2 {
  font-size: 3.2rem;
  color: var(--white-color);
  margin-bottom: 2.5rem;
  transition: color 0.3s ease;
}

h2 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

h2 a:hover {
  color: var(--blue-color);
  transition: color 0.3s ease;
}

p {
  font-family: var(--font-main);
  font-size: 1.8rem;
  color: var(--white-color);
  margin-bottom: 2rem;
  text-align: justify;
  }


figcaption {
  font-size: 1.4rem;
  color: #888;
  margin-top: 1rem;
  font-style: italic;
}

/* ======================================
   6. LES BOUTONS
   ====================================== */

/* ===== Bouton message ===== */

/* Conteneur bouton */
.btn-second a{
  transform: skewX(-15deg);
  transition: all 0.3s;
  cursor: pointer;
  display: inline-flex;
  width: auto;
  background-color: var(--black-color);
  padding: 10px 45px;
  text-decoration: none;
}

/* Hover strict WP : pas de resize */
.btn-second a:hover{
  box-shadow: 6px 6px 0 var(--blue-color);
}

/* Texte interne */
.btn-submit.cp-btn-style1{
  transform: skewX(15deg);
  color: var(--white-color);
  font-family: var(--font-titres);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  display: inline-block;
}

/* ===== Bouton + ===== */

.btnc{
  position: relative;
  padding: 1px 1px 1px 50px;
  overflow: hidden;
  border-radius: 0;
  border: 0;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  font-size: 1rem;
  line-height: 1.25;
  transition: all .15s ease-in-out;
 }

.btnc .btnc-text{
  text-transform: uppercase;
  padding: 11px 20px 9px 40px;
  display: block;
  position: relative;
  z-index: 2;
  color: var(--blue-color-second);
  font-size: 14px;
  line-height: 19px;
  background: #fff;
}

.btnc .btnc-more{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  left: 0;
  margin: auto;
  width: 50px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

.btnc .btnc-more:before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 100px;
  right: -15px;
  top: 0;
  bottom: 0;
  transform: skewX(-20deg);
  background: var(--blue-color-second);
  transition: right .4s cubic-bezier(.77,0,.175,1);
}

.btnc:hover .btnc-more:before{
  right: -20px;

}

.btnc:hover{
filter:
    drop-shadow(0 0 4px rgba(120, 220, 255, 0.4))
    drop-shadow(0 0 10px rgba(120, 220, 255, 0.3))
    drop-shadow(0 0 20px rgba(120, 220, 255, 0.15));
	
}

.btnc .btnc-more .btnc-cross{
  height: 40px;
  width: 40px;
}

.btnc .btnc-more .btnc-cross:before{
  transform: rotate(90deg);
}

.btnc .btnc-more .btnc-cross:after,
.btnc .btnc-more .btnc-cross:before{
  position: absolute;
  content: "";
  width: 25px;
  height: 4px;
  background: #fff;
  transform-origin: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.btnc:after{
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: auto;
  background: var(--blue-color-second);
  transform: translateX(-100%);
  transition: .4s cubic-bezier(.77,0,.175,1);
}

.btnc:hover:after{
  transform: translateX(0%);
  }

/* =================  Bouton Hamburger droid  =============== */

.main-nav{
  position: absolute;
  right: 60px;
  z-index: 1100; /* droidman = niveau interaction */
}

input { display: none; }

label {
  display: block;
  cursor: pointer;
  margin-bottom: inherit;
}

.icon-content{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: inherit;
  transition: transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);
}

.menu--4{
  position: relative;
  z-index: inherit;
  transition: transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);
}

.menu--4.active{
  transform: rotateY(-180deg);
}

.icon-nav{
  position: relative;
  transform: skewX(-15deg);
  background-color: var(--white-color);
  width: 80px;
  height: 75px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.header-scrolled .icon-nav{
  width: 70px;
  height: 55px;
}

.header-scrolled .icon-nav .droid {
  top: 5px;
  left: 22px;
  width: 10px;
}

.icon-nav .droid{
  top: 10px;
  left: 25px;
  transition: all 0.4s ease-in-out;
  transform: scale(1.8) rotate(10deg);
  transform-origin: center;
  vertical-align: middle;
}

.icon-nav label{
  transform: skewX(15deg);
}

.icon-nav svg{
  position: absolute;
}

.icon-nav .menu-4-svg{
  z-index: inherit;
  width: 125%;
  top: 0px;
  right: 2px;
  transform: rotateZ(180deg);
}

.header-scrolled .icon-nav .menu-4-svg{
  top: -4px;
}

.menu-4-svg path {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 30;
  --offset: -34;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.droid{
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.menu--4:hover .droid {
  fill:var(--blue-color-second);
  
  filter:
    drop-shadow(0 0 2px rgba(120, 220, 255, 0.4))
    drop-shadow(0 0 5px rgba(120, 220, 255, 0.3))
    drop-shadow(0 0 10px rgba(120, 220, 255, 0.15));
}

.menu--4 .line--1, .menu--4 .line--3 {
  --total-length: 103.35061645507812;
  --offset: -46.35061645507812;
}

.menu--4 .line--2 {
  --total-length: 99;
}

.back input:hover+svg .line--1,
.back input:hover+svg .line--3 {
  --length: 8.602325267;
}

.menu--4 input:hover+svg path {
  transform: translateX(13px);
  stroke:var(--blue-color-second);
  
  filter:
    drop-shadow(0 0 2px rgba(120, 220, 255, 0.4))
    drop-shadow(0 0 5px rgba(120, 220, 255, 0.3))
    drop-shadow(0 0 10px rgba(120, 220, 255, 0.15))
}

.menu--4 input:hover+svg .line--1,
.menu--4 input:hover+svg .line--3 {
  --offset: -28.602325267;
}

.menu--4 input:hover+svg .line--2 {
  --offset: -21;
}

.back input:checked+svg .line--1,
.back input:checked+svg .line--3 {
  --length: 26.602325267;
}

.menu--4 input:checked+svg path {
  transform: translateX(29px);
  stroke:var(--dark-color);
}

.menu--4 input:checked+svg .line--1,
.menu--4 input:checked+svg .line--3 {
  --offset: -14.602325267;
}

.menu--4 input:checked+svg .line--2 {
  --offset: 30;
}

.back input:checked:hover+svg .line--1,
.back input:checked:hover+svg .line--3 {
  --length: 7.602325267;
}

.menu--4 input:checked:hover+svg path {
  transform: translateX(13px);
  stroke:var(--blue-color-second);
  
  filter:
    drop-shadow(0 0 2px rgba(120, 220, 255, 0.4))
    drop-shadow(0 0 5px rgba(120, 220, 255, 0.3))
    drop-shadow(0 0 10px rgba(120, 220, 255, 0.15))
}

.menu--4 input:checked:hover+svg .line--1,
.menu--4 input:checked:hover+svg .line--3 {
  --offset: -30.602325267;
}

.menu--4 input:checked:hover+svg .line--2 {
  --offset: 109;
}

.icon-nav.active{
  transform: rotateY(-180deg);
}

/* =========================
   MENU LATERAL (volet droite)
   - Sans overlay
   - Sans scroll lock
   ========================= */

/* Volet */
.menu-hamburger{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(465px, 92vw);
  background: var(--dark-color);

  /* état fermé */
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.645, .045, .355, 1);

  /* pile : sous le header mais au-dessus du contenu */
  z-index: 950;

  overflow-y: auto;
  border-left: 1px solid rgba(255,255,255,.15);
}

/* état ouvert */
.menu-hamburger.open{
  transform: translateX(0);
}

/* Conteneur interne : permet tagline "collée en bas" */
.menu-hamburger-inner{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 140px 50px 30px; /* 140px = laisse respirer sous le header */
}

/* Liste */
.menu-hamburger-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items : style WP */
.menu-hamburger-list li{
  font-family: var(--font-titres);
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 5%;
}

/* Liens */
.menu-hamburger-list li a{
  color: var(--white-color);
  display: inline-block;
}

/* Hover comme WP */
.menu-hamburger-list li a:hover{
  color: var(--blue-color);
}

/* Tagline bas */
.menu-tagline{
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--blue-color);

  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.85);

  text-align: center;
}

.menu-tagline:hover{
filter:
    drop-shadow(0 0 4px rgba(120, 220, 255, 0.4))
    drop-shadow(0 0 10px rgba(120, 220, 255, 0.3))
    drop-shadow(0 0 20px rgba(120, 220, 255, 0.15));
}

/* Mise en italique ciblée */
.menu-tagline .tagline-em{
  font-style: italic;
}


/* Ligne + titre */
.menu-row{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Bouton + / - minimal */
.submenu-toggle{
  background: none;
  border: none;
  padding: 0;
  color: var(--white-color);
  cursor: pointer;
  font-family: var(--font-titres);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 5px;
  transition: color .25s ease;
}

.submenu-toggle:hover{
  color: var(--blue-color);
}

/* Sous-menu plus compact */

.submenu li{
  margin: 0;              /* supprime les marges verticales */
  padding: 2px 0;         /* micro respiration */
  line-height: 1.5;       /* resserre la hauteur de ligne */
  font-size: 1.8rem;      /* garde plus petit que 2.4rem */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
   position: relative;      /* ancre le ::before au li */
  padding-left: 15px;      /* laisse la place au tiret */

}

.submenu li a{
  color: rgba(255,255,255,.85);
}

.submenu li a:hover{
  color: var(--blue-color);
}

.submenu li::before{
  content: "-";
  position: absolute;
  left: 0px;
  top: 0;
  line-height: inherit;
  font-weight: 700;
  color: var(--blue-color);
}

.submenu{
  list-style: none;
  margin: 6px 0 0 34px;
  padding: 0;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);

  transition:
    max-height .35s cubic-bezier(.645,.045,.355,1),
    opacity .25s ease,
    transform .25s ease;
}

/* état ouvert */
.submenu.open{
  max-height: 400px; /* suffisant pour 5 items */
  opacity: 1;
  transform: translateY(0);
}




/* =======================
   FOOTER 
   ======================= */

footer{
  background: var(--dark-color);
  padding: 60px 0 20px;
  text-align: center;
}

/* --- Titre + filets --- */
.title-social-footer{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 10px 0 25px;
}

.title-social-footer h3{
  font-family: var(--font-titres);
  font-size: 2.8rem;
  text-transform: uppercase;
  margin: 0;
  color: var(--white-color);
}

/* Filets */
.filet{
  background-color: var(--brown-color);
  height: 3px;
  width: min(260px, 22vw);
  display: inline-block;
}

.reseaux-sociaux-footer{
  margin-bottom: 20px;
}


/* --- Réseaux sociaux (pastilles rouges) --- */
.reseaux-sociaux-footer nav{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.reseaux-sociaux-footer nav a{
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--brown-color);
  color: var(--white-color);
  font-size: 16px;

  transition: background-color .2s ease, color .2s ease;
}

.reseaux-sociaux-footer nav a:hover{
  background-color: var(--white-color);
}

.reseaux-sociaux-footer nav a:hover i{
  color: var(--dark-color);
}

/* --- Mentions légales : menu horizontal minimaliste --- */
.mentions-legales{
  width: 100%;
  margin: 0 0 18px;
}

.mentions-legales ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;

  margin: 0;
  padding: 0;
  list-style: none; /* enlève les puces */
}

.mentions-legales a{
  color: var(--white-color);
  text-transform: uppercase;
  font-family: var(--font-titres);
  font-size: 1.4rem;
  letter-spacing: .2px;
  transition: color .2s ease;
}

.mentions-legales a:hover{
  color: var(--blue-color-second);
}

/* --- Copyright --- */
.copyright{
  color: rgb(151, 151, 151);
  font-size: 1.4rem;
  padding-top: 10px;
}

.copyright .sep{
  color: rgb(151, 151, 151);
}



/* =======================
   Hero
   ======================= */

#accueil, 
#accueil-pages{
  position: relative;
}

/* Image de fond */
#accueil .hero-bg{
  height: 100vh;
  min-height: 900px;
  background: url("images/header-2256HS-v1.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-monde{
  height: 33vh;
  min-height: 712px;
  background: url("images/header-2256HS-mondev2.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-univers{
  height: 33vh;
  min-height: 712px;
  background: url("images/header-2256HS-universv2.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-factions{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-factions.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-territoires{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-territoires.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-techno{
  height: 33vh;
  min-height: 712px;
  background: url("images/header-2256HS-technologies.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-chrono{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-chronologie.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-affames{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-affames.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-voile{
  height: 33vh;
  min-height: 712px;
  background: url("images/header-2256HS-voilezeph.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-film{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-affames-film.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}



#accueil .hero-bg-jdr{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-jdr.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-auteurs{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-auteurs.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

#accueil .hero-bg-editions{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-editeur.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-contact{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-contact.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}


#accueil .hero-bg-legal{
  height: 33vh;
  min-height: 712px;
  background: url("images/headers-2256-HS-legal.png") center center / cover no-repeat;
  position: relative;
  margin-bottom: 0;
}

/* =======================
   HERO CTA — layout centré / réparti
   ======================= */

#accueil .hero-cta{
  position: absolute;
  inset: 0;                 /* occupe toute la zone hero */
  z-index: 30;
  pointer-events: none;     /* évite de capter le click hors CTA */
  
  display: flex;
  align-items: center;
  justify-content: center;
}

/* conteneur interne centré */
#accueil .hero-cta{
  /* rien d'autre ici */
}

#accueil .hero-cta > *{
  pointer-events: auto;     /* on réactive le clic sur les éléments */
}

/* on transforme le contenu direct (objet + btn) en "groupe" */
#accueil .hero-cta{
  gap: 0; /* on gère via grid ci-dessous */
}

/* applique une grille au bloc CTA */
#accueil .hero-cta{
  /* si tu peux, ajoute une div .hero-cta-inner autour de .objet + .btn-second.
     Si tu ne veux pas toucher le HTML, on le fait sur .hero-cta directement : */
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 120px;        /* espace entre livre et bouton */
  justify-content: center;

  max-width: 900px;        /* largeur de composition */
  margin: 0 auto;
  padding: 0 40px;
}

/* Livre */
#accueil .hero-cta .objet img{
  height: 600px;            /* ajuste */
  width: auto;
  display: block;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.35));
  
   transform: rotate(-6deg) scale(0.95);
  transform-origin: center;

  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    filter .6s ease;
}

/* Hover */
#accueil .hero-cta .objet:hover img{
  transform: rotate(0deg) scale(1.05);
  filter: drop-shadow(0 60px 90px rgba(0,0,0,0.85));
}

/* Bouton : on enlève le translateX, on laisse la grille gérer */
#accueil .hero-cta .btn-second{
  transform: none;
}

/* Responsive simple : empile sur petit écran */
@media (max-width: 900px){
  #accueil .hero-cta{
    grid-template-columns: 1fr;
    row-gap: 30px;
    justify-items: center;
    text-align: center;
  }

  #accueil .hero-cta .objet img{
    height: 520px;
  }
}



/* =======================
   MAIN – structure globale
   ======================= */

main{
background-color: #f8f6ee; /* Couleur de fond */
  
  /* On liste les deux images séparées par une virgule */
  /* Note : La première image de la liste apparaît au-dessus de la seconde */
  background-image: 
    url("images/background-lines2.png"), 
    url("images/background-lines.png");

  /* On définit les répétitions pour chaque image */
  background-repeat: no-repeat, no-repeat;

  /* On définit les positions respectives */
  background-position: 
    top right,    /* Position pour background-lines2.png */
    bottom right; /* Position pour background-lines.png */

  /* On définit les tailles respectives */
  background-size: 
    650px auto,   /* Taille pour background-lines2.png */
    650px auto;   /* Taille pour background-lines.png (ajustable) */
  
  box-sizing: border-box;
  padding: 2%;
  width: 100%;
}

/* =======================
   Typo dans le main
   ======================= */

main h2, main h1{
  color: var(--dark-color);
  font-family: "Source Serif 4", serif;
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
  font-variant: small-caps;
  letter-spacing: -0.03em;
}

main h3{
  color: var(--dark-color);
  font-family: 'Oswald', sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  text-transform: none;
  font-variant: small-caps;
  letter-spacing: -0.03em;
  margin-top: 15px;
}


main p{
  color: var(--dark-color);
  font-family: "Source Serif 4", serif;
  font-weight: 300;
  line-height: 1.6;
 }

main p strong{
	color: var(--blue-color-second);
	font-weight: 400;
}


/* =======================
   Filet dans le main
   ======================= */
main h1,
main h2{
  border-bottom: var(--filet-thickness) solid var(--blue-color-second);
  padding-bottom: var(--filet-offset-y);
  width: 70vw;
  margin-bottom: 30px;
}

/* ================================
   Dispositions entre les Sections 
   =============================== */

main section{
  margin-bottom: 100px;
}


/* ================================
   Disposition des IMAGES
   ================================ */

/* Base commune : toutes les figures du main */
main section figure{
  width: 450px;
  height: 300px;
  margin: 0;
  flex: 0 0 450px;
  position: relative;
}

/* Image contenue : remplissage propre */
main section figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 6px 6px 0 var(--blue-color-second);
  margin-top: 35px;
}

main section figcaption {
  position: relative;
  bottom: -2.3rem;
  left: 0;
  width: 100%;
  margin: 0;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--dark-color);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  line-height: 1.4;
  }

/* Guillemets français automatiques */
main section figcaption::before {
  content: "« ";
}

main section figcaption::after {
  content: " »";
}


   
/* ================================
   Disposition des Paragraphes
   ================================ */
 

main p{
  text-align: justify;          /* justification */
  text-indent: 1.2em;           /* retrait de première ligne */
  margin-top: 0;
  margin-bottom: 0.375rem;      /* ~6pt ≈ 8px ≈ 0.375rem */
  line-height: 1.6;             
  max-width: 50vw;
}


/* ================================
   Listes dans le main (style éditorial GG)
   ================================ */

main ul {
  list-style: none;          /* supprime les puces */
  padding-left: 0;           /* enlève l’indentation par défaut */
  margin: 1rem 0;            /* respiration verticale */
}

main ul li {
  position: relative;
  left: 50px;
  padding-left: 1.2rem;      /* espace pour le tiret */
  margin-bottom: 0.4rem;     /* espacement entre items */
  color: var(--dark-color); /* pas blanc pur */
  line-height: 1.5;
}

/* Tiret personnalisé */
main ul li::before {
  content: "–";              /* tiret long */
  position: absolute;
  left: -10px;
  top: 0;
  color: var(--blue-color);   /* petite touche GG */
  font-weight: 600;
}

 
/* ========================================
   Disposition des groupes de paragraphes
   ======================================= */

main section .texte-resume{
  display: flex;
  flex-direction: column; /*empilement vertical*/
  justify-content: flex-start;

  flex: 1 1 auto;        /* prend l’espace restant en flex */
  min-width: 0;         /* évite les débordements */
  max-width: 40vw;      /* colonne de lecture stable (scène globale) */
}

main section .texte-resumeyt{
  display: flex;
  flex-direction: column; /*empilement vertical*/
  justify-content: flex-start;

  flex: 1 1 auto;        /* prend l’espace restant en flex */
  min-width: 0;         /* évite les débordements */
  max-width: 35vw;      /* colonne de lecture stable (scène globale) */
}

#section4 .texte-resumeyt{
max-width: 45vw;
}

   
/* ==========================================
     Disposition SECTION (flex + hors flex ) 
  ========================================= */
.btnc{
  left: 55vw;
  top: 40px; 
}

main section .btn-second{
  position: relative;
  margin-left: 40vw;
  margin-top: 60px; 
}

/* Conteneur image + texte */
main .bloc-texte-image{
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: flex-start;
 }

/* Variante image à gauche */
main .figgauchetextedroite > figure {
  order: 1;
}

main .figgauchetextedroite > .texte-resume {
  order: 2;
}

/* Variante image à droite */
main .figdroitetextegauche > figure {
  order: 2;
}

main .figdroitetextegauche > .texte-resumeyt {
  order: 1;
}


/* Variante youtube à gauche */
main .figgauchetextedroite > .yt {
  order: 1;
}

main .figgauchetextedroite > .texte-resumeyt {
  order: 2;
}

/* Variante youtube à droite */
main .figdroitetextegauche > .yt {
  order: 2;
}

main .figdroitetextegauche > .texte-resumeyt {
  order: 1;
}


/* ========================
     Iframe Youtube 
  ========================= */

.yt {
	margin: 0; 
	flex: 0 1 30vw;  /* base 30vw, peut rétrécir si besoin */
  min-width: 0;    /* indispensable en flex pour éviter des débordements */
  max-width: 30vw; /* optionnel : garde ton intention */
}


.yt__placeholder,
.yt iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}

.yt__placeholder {
  position: relative;
  cursor: pointer;
}

.yt__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 48px;
  border-radius: 12px;
  opacity: 0.9;
  /* pas de couleur hardcodée si tu préfères : tu peux le lier à une variable */
  background: rgba(0,0,0,0.65);
}
.yt__play::before{
  content:"";
  position:absolute;
  left: 29px;
  top: 14px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent rgba(255,255,255,0.95);
}


/* ========================
     Pages Références 
  ========================= */

main .ref-flex{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  }

main .texte-resume-ref p{
  max-width: 70vw;
}

/* Grille de logos */
main .logos{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  max-width: 70vw;
  background-color: #fff;
  padding: 20px 24px;
  border-radius: 8px;
}

/* Logos individuels */
main .logos img{
  height: 80px;
  width: auto;
  width: 120px;
  object-fit: contain;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

main .logos img:hover{
  filter: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* Petite sécurité : si certains logos sont très "haut/bas" visuellement */
main .logos img{
  display: block;
}



	.bloc-texte-image img.img-auteurs{
  max-height: 130%;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: auto; 
} 
	


/* =========================================================
   RESPONSIVE (mobile-first “simple”)
   Objectifs :
   - supprimer les largeurs en vw sur mobile
   - passer systématiquement image/yt au-dessus du texte
   - garder une mise en page lisible sans refaire toute la grille
   ========================================================= */

/* Tablette + mobile */
@media (max-width: 900px){
	
  /* Main : respirations + fonds moins invasifs */
  main{
    padding: 18px 16px; /* au lieu de 2% qui peut être bizarre selon viewport */
    background-image: none; /* optionnel : si ça gêne la lisibilité sur mobile */
  }
  

  /* Titres : ne plus forcer 70vw */
  main h1,
  main h2{
    width: 100%;
  }

  /* Paragraphes : plus de colonnes en vw */
  main p, main .texte-resume-ref p, #section4 .texte-resumeyt {
    max-width: 100%;
  }
  
 
  /* Listes : ton left:50px devient trop “violent” sur mobile */
  main ul li{
    left: 0;
  }
  main ul li::before{
    left: 0;            /* garde le tiret, mais sans décaler tout le texte */
  }
  main ul li{
    padding-left: 1.6rem; /* espace pour le tiret */
  }

  /* Le bloc “image/yt + texte” passe en colonne */
  main .bloc-texte-image{
    flex-direction: column;
    align-items: stretch; /* full width */
    gap: 18px;
  }

  /* Ordres : on force visuel puis texte, quel que soit le sens desktop */
  main .figgauchetextedroite > figure,
  main .figdroitetextegauche > figure,
  main .figgauchetextedroite > .yt,
  main .figdroitetextegauche > .yt{
    order: 1;
  }

  main .figgauchetextedroite > .texte-resume,
  main .figdroitetextegauche > .texte-resume,
  main .figgauchetextedroite > .texte-resumeyt,
  main .figdroitetextegauche > .texte-resumeyt{
    order: 2;
  }

  /* Images : arrêter le 300x300 fixe */
main section figure {
    width: 100%;
    height: auto;      /* Force la hauteur à s'adapter */
    flex: 0 0 auto;
    display: block;    /* Assure que le conteneur ne s'étire pas inutilement */
    line-height: 0;    /* Supprime l'espace fantôme sous l'image */
  }


  /* Le img dans figure reprend un ratio naturel */
  main section figure img{
    width: 100%;
    height: auto;
	display: block;
  }

  /* Colonnes texte : full width */
  main section .texte-resume,
  main section .texte-resumeyt{
    max-width: 100%;
  }

  /* YouTube : full width */
  .yt{
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* Boutons : éviter les margins “desktop” */
.btnc{
    left: 5vw;
    margin-top: 24px;
  }
  
main .btn-second{
	left: -72px;
}
  
 .btn-submit.cp-btn-style1 {
	  font-size: 1.6rem;
  }
  
  .btn-second a{
  padding: 20px 15px;
}

  /* Références : logos en full width */
  main .logos{
    max-width: 100%;
    gap: 14px;
    padding: 14px 14px;
  }

  /* Logos : réduire un peu sur mobile */
  main .logos img{
    width: 110px;
    height: 56px;
  }
  
.reseaux-sociaux {
  display: none;
}


}

/* Petit mobile */
@media (max-width: 480px){

  /* Header : un peu plus compact si besoin */
  header{
    padding: 1.2rem 4vw;
  }

  header img{
    height: 70px;
  }

  header.header-scrolled img {
    height: 44px;
  }

  /* Réseaux sociaux du header : réduire un peu */
  .reseaux-sociaux {
    display: none;
  }


  
 #accueil .hero-tagline{
	 scale: 0.9;
	 left: 47%;
	 top: 45%;
 }
  
}


/* Mobile */
@media (max-width: 900px){
  .ra-mode{
    display: none;
  }
  }



/* Espacement vertical texte après image / embed */
@media (max-width: 900px){

  main .bloc-texte-image > .texte-resume,
  main .bloc-texte-image > .texte-resumeyt{
    margin-top: 30px;
  }
  


}

/* =========================================================
   POP UP RÉALITÉ AUGMENTÉE (RA) — VERSION CANON
   Objectif : callout diégétique “tech”
   Structure : FIGURE(.ra-callout)
     - IMG (le visuel)
     - DOT  : point d’ancrage (coordonnées dans l’image)
     - LINE : groupe rotatif (porte l’angle + l’anim)
        - SEG : segment horizontal (longueur)
        - POP : cartouche accroché au bout de la ligne
           - INNER : “skin” du cartouche (HUD Iron Man + transparence + blur)
   Remarques :
     - La rotation est portée par .ra-line (groupe).
     - Le cartouche reste droit via contre-rotation sur .ra-pop__inner.
     - On assume que le cartouche peut gêner le texte (diégétique).
   ========================================================= */


/* =========================================================
   0) VARIABLES GLOBALES (timing / easing)
   -> à définir ailleurs si déjà présent dans ton CSS.
   -> fallback ici au cas où.
   ========================================================= */
:root{
  --ra-dur-in: 1500ms;
  --ra-dur-out: 500ms;
  --ra-ease-in: cubic-bezier(.2,.9,.2,1);
  --ra-ease-out: cubic-bezier(.2,.0,.2,1);
}


/* =========================================================
   1) CONTENEUR : repère absolu
   ========================================================= */
.ra-callout{
  position: relative; /* repère des éléments abs (dot/line/pop) */
  display: block;
}

.ra-callout img{
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   2) PRESET DE POSITIONNEMENT
   -> variables par défaut, surchargeable par instance via style=""
   Exemple :
     <figure class="ra-callout ra-out-right"
       style="--dot-x:75%;--dot-y:62%;--line-len:150px;--line-ang:12deg;">
   ========================================================= */
.ra-callout.ra-out-right{
  /* Position du point dans le repère du figure (en %) */
  --dot-x: 50%;
  --dot-y: 60%;

  /* Géométrie de la ligne */
  --line-len: 150px;
  --line-ang: 0deg;

  /* Décalage entre fin de ligne et début du cartouche */
  --pop-gap: 20px;

  /* Largeur max du cartouche */
  --pop-w: 380px;
}


/* =========================================================
   3) DOT : point d’ancrage
   - centre visuellement sur (dot-x, dot-y)
   - apparaît au hover (opacity + scale)
   ========================================================= */
.ra-dot{
  position: absolute;
  left: var(--dot-x);
  top: var(--dot-y);

  width: 9px;
  height: 9px;
  border-radius: 999px;

  /* Lumière “tech” : blanc au centre + halo cyan (lisible) */
  background: rgba(245, 255, 255, 0.98);
  box-shadow:
    0 0 0 2px rgba(120,220,255,0.50),
    0 0 10px 0 rgba(120,220,255,0.80),
    0 0 26px 0 rgba(120,220,255,0.60);
    

  /* repos */
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;

  transition:
    opacity var(--ra-dur-out) var(--ra-ease-out),
    transform var(--ra-dur-out) var(--ra-ease-out),
    box-shadow var(--ra-dur-out) var(--ra-ease-out);
}


/* =========================================================
   4) LINE : groupe rotatif
   IMPORTANT :
   - C’est .ra-line qui porte la rotation (line-ang).
   - On anime scaleX(0 -> 1) pour “déplier” la ligne.
   ========================================================= */
.ra-line{
  position: absolute;
  left: var(--dot-x);
  top: var(--dot-y);

  transform-origin: 0 0; /* départ au point */
  transform: rotate(var(--line-ang));
  opacity: 0;

  transition:
    opacity var(--ra-dur-out) var(--ra-ease-out),
    transform var(--ra-dur-out) var(--ra-ease-out);

  /* Par défaut : la ligne ne capte pas la souris.
     NOTE : si tu veux un cartouche cliquable, voir note en bas. */
  pointer-events: none;
}

/* Segment visuel :
   - horizontal dans le repère de .ra-line
   - longueur pilotée par --line-len */
.ra-line__seg{
  display: block;
  width: var(--line-len);
  height: 2px;

  /* Néon “propre” :
     - centre quasi blanc très fin
     - dégradés bleus courts (denses)
     - halo large très doux */
 
 background:linear-gradient(90deg,
    rgba(120,220,255,0) 0%,
    rgba(160,240,255, 0.55) 30%,
    rgba(200,240,255, 0.55) 50%,
    rgba(160,240,255, 0.55) 75%,
    rgba(120,220,255,0) 100%
  );

  /* Halo en couches (structure > show) */
   filter:
    drop-shadow(0 0 6px rgba(120,220,255,.45))
    drop-shadow(0 0 18px rgba(70,160,255,.25));

  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform var(--ra-dur-out) var(--ra-ease-out);
}


/* =========================================================
   5) POP : cartouche accroché au bout de la ligne
   - enfant de .ra-line
   - left: 100% => juste après la fin du segment
   - + pop-gap => espace
   - animation entrée/sortie : translate + scale + opacity
   ========================================================= */
.ra-callout.ra-out-right .ra-pop{
  position: absolute;
  left: calc(85% + var(--pop-gap));
  top: 0;

  width: min(var(--pop-w), 44vw);

  transform-origin: 0 0;

  /* Entrée “cinématique” mais sans effet page-turn */
  transform: translateX(-10px) scale(0);
  opacity: 0;

  transition:
    opacity var(--ra-dur-out) var(--ra-ease-out),
    transform var(--ra-dur-out) var(--ra-ease-out);
}


/* =========================================================
   6) INNER : skin du cartouche (HUD Iron Man canon)
   -> C’est ici qu’on met tout le “look”
   -> ET la contre-rotation pour rester droit.
   ========================================================= */

/* ---------- Variables HUD (machine) ---------- */
/* Placées sur .ra-callout pour être héritées par tous les modules */
.ra-callout{
  --hud-ink: rgba(240, 252, 255, 0.98);

  /* VERRE : tu gardes tes valeurs (2256) */
  --hud-glassA: rgba(15, 75, 135, 0.3);
  --hud-glassB: rgba(27, 99, 171, 0.6);

  /* NÉON */
  --hud-cyan: rgba(120, 220, 255, 0.95);
  --hud-blue: rgba(70, 160, 255, 0.72);
  --hud-mag: rgba(255, 140, 220, 0.55);

  /* BORDURES HUD */
  --hud-borderSoft: rgba(97,42,16,0.45);
  --hud-borderHard: rgba(120,220,255,0.78);

  /* VERRE */
  --hud-blur: 1.7px;
  --hud-sat: 110%;
}

/* ---------- Panneau HUD (Stark arrogance + 2256 par endroits) ---------- */
.ra-pop__inner.ra-hud{
  position: relative;
  display: block;

  padding: 14px 14px 12px;
  border-radius: 16px;

  color: var(--hud-ink);

  /* Densité lisible + zones “fatiguées” (vignette + bruit léger visuel) */
  background:
    /* vignette interne (fatigue / profondeur) */
    radial-gradient(140% 180% at 50% 46%,
      rgba(0,0,0,0.00),
      rgba(0,0,0,0.26) 74%),
    /* sheen diagonal (verre poli Stark) */
    linear-gradient(135deg,
      rgba(255,255,255,0.26) 0%,
      rgba(255,255,255,0.10) 18%,
      rgba(255,255,255,0.00) 46%),
    /* micro grid vertical (légèrement renforcée) */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.085) 0px,
      rgba(255,255,255,0.085) 1px,
      rgba(255,255,255,0.00) 8px,
      rgba(255,255,255,0.00) 16px),
    /* micro grid horizontal (légèrement renforcée) */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.070) 0px,
      rgba(255,255,255,0.070) 1px,
      rgba(255,255,255,0.00) 10px,
      rgba(255,255,255,0.00) 20px),
    /* scanlines fines (HUD) */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.070) 0px,
      rgba(255,255,255,0.070) 1px,
      rgba(255,255,255,0.00) 3px,
      rgba(255,255,255,0.00) 6px),
    /* bloom cyan coin haut gauche (arrogance) */
    radial-gradient(160% 180% at 18% 0%,
      rgba(120,220,255,0.30),
      rgba(120,220,255,0.00) 58%),
    /* verre principal */
    linear-gradient(180deg, var(--hud-glassB), var(--hud-glassA));

  border: 1px solid var(--hud-borderSoft);
  outline: 1px solid var(--hud-borderHard);
  outline-offset: -2px;

  backdrop-filter: blur(var(--hud-blur)) saturate(var(--hud-sat));
  -webkit-backdrop-filter: blur(var(--hud-blur)) saturate(var(--hud-sat));

  /* Halo en couches : lisible, blanc au centre, bleu large */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 3px rgba(120,220,255,0.06) inset,
    0 0 18px rgba(255,255,255,0.10),
    0 0 46px rgba(120,220,255,0.32),
    0 0 120px rgba(70,160,255,0.18);

  text-shadow:
    0 0 12px rgba(120,220,255,0.22);

  /* CONTRE-ROTATION :
     le parent .ra-line est rotatif, donc on annule ici */
  transform: rotate(calc(-1 * var(--line-ang)));
  transform-origin: 0 0;

  -webkit-font-smoothing: antialiased;
}

/* Coin “notch” machine (plus net, sans rose visible) */
.ra-pop__inner.ra-hud::after{
  content:"";
  position:absolute;
  top:-1px; right:-1px;
  width:18px; height:18px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.60),
    rgba(120,220,255,0.85),
    rgba(70,160,255,0.18)
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .92;
  filter: drop-shadow(0 0 16px rgba(120,220,255,0.32));
}

/* Shimmer rare (visible quand il passe, sinon absent) */
.ra-pop__inner.ra-hud::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(115deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 40%,
    rgba(255,255,255,0.28) 48%,
    rgba(120,220,255,0.18) 52%,
    rgba(255,255,255,0.00) 60%,
    rgba(255,255,255,0.00) 100%
  );

  opacity: 0;
  transform: translateX(-28%);
}

@keyframes raShimmerRare{
  0%   { opacity: 0; transform: translateX(-34%); }
  78%  { opacity: 0; transform: translateX(-34%); }
  82%  { opacity: .90; transform: translateX(6%); }
  86%  { opacity: .55; transform: translateX(22%); }
  92%  { opacity: 0; transform: translateX(46%); }
  100% { opacity: 0; transform: translateX(46%); }
}


/* =========================================================
   7) MODULES HUD (si ton HTML HUD est présent)
   -> styles “machine” (top bar / radar / bar / blueprint / ticks)
   ========================================================= */

/* TOP BAR */
.ra-hud__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;

  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ra-hud__tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 4px 8px;

  border-radius: 999px;
  border: 1px solid rgba(120,220,255,0.40);
  background: rgba(120,220,255,0.12);
}

/* Dot SCAN (douce pulsation) */
@keyframes raBlinkSoft{
  0%,100% { opacity:0.35; transform: scale(0.5); }
  50%     { opacity:1;   transform: scale(1.2); }
}


.ra-hud__tagicon{
  width: 12px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120,220,255,0.0), rgba(120,220,255,0.90));
  box-shadow: 0 0 12px rgba(120,220,255,0.28);
  
    animation: raBlinkSoft 2.4s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

.ra-hud__state{
  padding: 4px 8px;
  margin-right: 0px;
  border-radius: 999px;
  border: 1px solid rgba(255,140,220,0.32);
  background: rgba(255,140,220,0.12);
  color: rgba(255,255,255,0.95);
}

/* BODY LAYOUT */
.ra-hud__body{
  display:grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items:center;
  margin-bottom: 10px;
}

/* RADAR : rings fixes + visibles + contrastés */
.ra-hud__radar{
  position:relative;
  width: 82px;
  height: 82px;
  border-radius: 999px;

  /* Rings + croix + micro grid interne */
  background:
    /* crosshair vertical */
    linear-gradient(90deg,
      rgba(255,255,255,0.00) 49%,
      rgba(255,255,255,0.3) 50%,
      rgba(255,255,255,0.00) 51%),
    /* crosshair horizontal */
    linear-gradient(0deg,
      rgba(255,255,255,0.00) 49%,
      rgba(255,255,255,0.3) 50%,
      rgba(255,255,255,0.00) 51%),
    /* micro grid interne */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.15) 0px,
      rgba(255,255,255,0.15) 1px,
      rgba(255,255,255,0.00) 9px,
      rgba(255,255,255,0.00) 18px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.15) 0px,
      rgba(255,255,255,0.15) 1px,
      rgba(255,255,255,0.00) 10px,
      rgba(255,255,255,0.00) 20px),
    /* core */
    radial-gradient(circle at 50% 50%,
      rgba(120,220,255,0.30),
      rgba(0,0,0,0.00) 62%);

  border: 1px solid rgba(120,220,255,0.55);

  box-shadow:
    0 0 0 2px rgba(120,220,255,0.12) inset,
    0 0 22px rgba(120,220,255,0.22);

  overflow:hidden;
}

/* Rings fixes : plus contrastés */
.ra-hud__radarRing{
  position:absolute;
  inset: 12px;
  border-radius:999px;
  border: 1px solid rgba(120,220,255,0.52);
  box-shadow:
    0 0 14px rgba(120,220,255,0.30);
}
.ra-hud__radarRing:nth-child(1){
  inset: 7px;
  opacity: 1;
  border-color: rgba(120,220,255,0.45);
}
.ra-hud__radarRing:nth-child(2){
  inset: 26px;
  opacity: .95;
  border-color: rgba(255,255,255,0.14);
}

/* Dot radar : plus violent (c’est la lecture humaine) */
.ra-hud__radarDot{
  position:absolute;
  left: 56%;
  top: 38%;
  width: 6px;
  height: 6px;
  border-radius:999px;

  background: rgba(255,255,255,0.98);
  box-shadow:
    0 0 10px rgba(255,255,255,0.55),
    0 0 22px rgba(120,220,255,0.80),
    0 0 52px rgba(70,160,255,0.28);
}

/* Sweep : plus large + plus contrasté (mais bleu only) */
.ra-hud__radarSweep{
  position:absolute;
  inset: -32%;
  background: conic-gradient(
    from -90deg,              /* orientation du cône */
    rgba(255,255,255,0.00) 0deg,

    /* bord doux (entrée) */
    rgba(255,255,255,0.10) 345deg,
    rgba(255,255,255,0.40) 360deg, /* centre à 40% */
    rgba(255,255,255,0.10) 15deg,

    /* retour à transparent */
    rgba(255,255,255,0.00) 30deg,
    rgba(255,255,255,0.00) 360deg
  );
  opacity: 1; /* le cône porte déjà son alpha */
}

/* Animation très lente et diégétique */
@keyframes raSweep{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}


/* INFO */
.ra-hud__title{
  display:block;
  font-family: "Source Serif 4", serif;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 4px;
}

.ra-hud__meta{
  display:block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  opacity: .95;
  margin-bottom: 10px;
}

/* PROGRESS */
.ra-hud__bar{
  position:relative;
  height: 10px;
  border-radius: 999px;

  border: 1px solid rgba(120,220,255,0.35);
  background: rgba(120,220,255,0.10);

  overflow:hidden;
}

.ra-hud__barFill{
  position:absolute;
  inset:0;
  width: 60%;

  background: linear-gradient(90deg,
    rgba(120,220,255,0.20),
    rgba(120,220,255,0.92),
    rgba(255,140,220,0.25)
  );

  box-shadow:
    0 0 18px rgba(120,220,255,0.35),
    0 0 40px rgba(120,220,255,0.18);
}

.ra-hud__barText{
  position:absolute;
  right: 8px;
  top: -18px;

  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  opacity: .95;
}


/* BOTTOM */
.ra-hud__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  opacity: .9;
}

@keyframes raTicksBreathe{
  0%,100% { opacity:.50; filter: brightness(1); }
  33%,66% { opacity:.95; filter: brightness(1.35); }
}

.ra-hud__radarSweep { animation: raSweep 4.5s linear infinite; }


.ra-hud__ticks{
  width: 92px;
  height: 10px;
  border-radius: 6px;

  background: repeating-linear-gradient(90deg,
    rgba(120,220,255,0.90) 0 4px,
    rgba(120,220,255,0.00) 4px 8px
  );

  box-shadow: 0 0 16px rgba(120,220,255,0.22);
  opacity: .85;
  
   animation: raTicksBreathe 3.6s ease-in-out infinite;
  will-change: opacity, filter;
}


/* =========================================================
   8) STICKER (humain) — slot (option A)
   -> élément qui déborde du panneau et casse la grille
   -> tu remplaceras le placeholder par un PNG/SVG plus tard
   ========================================================= */
.ra-sticker{
  position:absolute;
  bottom: -45px;
  right: -40px;

  width: 88px;
  height: 88px;
  border-radius: 18px;

  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.05) 55%),
    linear-gradient(135deg,
      rgba(255,140,220,0.28),
      rgba(120,220,255,0.18)
    );

  border: 2px solid rgba(255,255,255,0.55);

  box-shadow:
    0 10px 28px rgba(0,0,0,0.28),
    0 0 22px rgba(255,140,220,0.18),
    0 0 26px rgba(120,220,255,0.20);

  transform: rotate(6deg);
}

@keyframes raStickerSpin {
  0%, 94% { transform: rotate(0deg); }
  98%     { transform: rotate(1080deg); }
  100%    { transform: rotate(1080deg); }
}

@keyframes raStickerBounce {
  0%, 94% { transform: translateY(0); }
  96%     { transform: translateY(-15px); }
  98%     { transform: translateY(0); }
  100%    { transform: translateY(0); }
}

@keyframes raStickerWiggle {
  0%, 92% { transform: rotate(0deg);}
  94%     { transform: rotate(-6deg); }
  96%     { transform: rotate(5deg);  }
  98%     { transform: rotate(-2deg); }
  100%    { transform: rotate(0deg);  }
}


.ra-sticker img{
 box-shadow: none;
 transform-origin: 50% 50%;
 margin-top: 0px;
}

.ra-sticker--sala img{
 animation: raStickerBounce 10s cubic-bezier(.22,.61,.36,1) infinite;
}

.ra-sticker--railgun img{
 animation: raStickerSpin 22s cubic-bezier(.22,.61,.36,1) infinite;
}

.ra-sticker--console img{
 animation: raStickerWiggle 13s cubic-bezier(.22,.61,.36,1) infinite;
}


/* =========================================================
   9) ÉTATS ACTIFS — pilotés par mode (body)
   Modes :
   - body.ra-hover : comportement classique (hover/focus)
   - body.ra-off   : rien n'apparaît jamais
   - body.ra-on    : tout apparaît tout le temps, disparaît au hover/focus
   ========================================================= */


/* =========================
   ACTIF (ouvre) : HOVER
   ========================= */
body.ra-hover .ra-callout:hover .ra-dot,
body.ra-hover .ra-callout:focus-within .ra-dot{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 50ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 100ms,
    box-shadow var(--ra-dur-in) var(--ra-ease-in) 200ms;
}

body.ra-hover .ra-callout:hover .ra-line,
body.ra-hover .ra-callout:focus-within .ra-line{
  opacity: 1;
  transform: rotate(var(--line-ang)) scaleX(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 100ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 450ms;
}

body.ra-hover .ra-callout:hover .ra-line__seg,
body.ra-hover .ra-callout:focus-within .ra-line__seg{
  transform: scaleX(1);
  transition: transform var(--ra-dur-in) var(--ra-ease-in) 450ms;
}

body.ra-hover .ra-callout:hover .ra-pop,
body.ra-hover .ra-callout:focus-within .ra-pop{
  opacity: 1;
  transform: translateX(0) scale(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 0ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 1000ms;
}

/* Shimmer rare uniquement quand actif (hover) */
body.ra-hover .ra-callout:hover .ra-pop__inner.ra-hud::before,
body.ra-hover .ra-callout:focus-within .ra-pop__inner.ra-hud::before{
  animation: raShimmerRare 16s linear infinite;
}

body.ra-hover .ra-callout:hover .ra-hud__radarSweep,
body.ra-hover .ra-callout:focus-within .ra-hud__radarSweep{
  opacity: .92;
}


/* =========================
   ACTIF (ouvre) : ON (toujours)
   ========================= */
body.ra-on .ra-callout .ra-dot{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 50ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 100ms,
    box-shadow var(--ra-dur-in) var(--ra-ease-in) 200ms;
}

body.ra-on .ra-callout .ra-line{
  opacity: 1;
  transform: rotate(var(--line-ang)) scaleX(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 100ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 450ms;
}

body.ra-on .ra-callout .ra-line__seg{
  transform: scaleX(1);
  transition: transform var(--ra-dur-in) var(--ra-ease-in) 450ms;
}

body.ra-on .ra-callout .ra-pop{
  opacity: 1;
  transform: translateX(0) scale(1);
  transition:
    opacity var(--ra-dur-in) var(--ra-ease-in) 0ms,
    transform var(--ra-dur-in) var(--ra-ease-in) 1000ms;
}

body.ra-on .ra-callout .ra-pop__inner.ra-hud::before{
  animation: raShimmerRare 16s linear infinite;
}

body.ra-on .ra-callout .ra-hud__radarSweep{
  opacity: .92;
}


/* =========================
   INHIBITEUR : ON (disparaît au hover/focus)
   -> on force le retour à l'état "fermé" défini dans tes styles de base
   ========================= */
body.ra-on .ra-callout:hover .ra-dot,
body.ra-on .ra-callout:focus-within .ra-dot{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
}

body.ra-on .ra-callout:hover .ra-line,
body.ra-on .ra-callout:focus-within .ra-line{
  opacity: 0;
  transform: rotate(var(--line-ang));
}

body.ra-on .ra-callout:hover .ra-line__seg,
body.ra-on .ra-callout:focus-within .ra-line__seg{
  transform: scaleX(0);
}

body.ra-on .ra-callout:hover .ra-pop,
body.ra-on .ra-callout:focus-within .ra-pop{
  opacity: 0;
  transform: translateX(-10px) scale(0);
}

body.ra-on .ra-callout:hover .ra-pop__inner.ra-hud::before,
body.ra-on .ra-callout:focus-within .ra-pop__inner.ra-hud::before{
  animation: none;
}

body.ra-on .ra-callout:hover .ra-hud__radarSweep,
body.ra-on .ra-callout:focus-within .ra-hud__radarSweep{
  opacity: .78; /* remets ta valeur base si différente */
}


/* =========================
   KILL SWITCH : OFF (rien n'apparaît jamais, même au hover/focus)
   ========================= */
body.ra-off .ra-callout:hover .ra-dot,
body.ra-off .ra-callout:focus-within .ra-dot{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
}

body.ra-off .ra-callout:hover .ra-line,
body.ra-off .ra-callout:focus-within .ra-line{
  opacity: 0;
  transform: rotate(var(--line-ang));
}

body.ra-off .ra-callout:hover .ra-line__seg,
body.ra-off .ra-callout:focus-within .ra-line__seg{
  transform: scaleX(0);
}

body.ra-off .ra-callout:hover .ra-pop,
body.ra-off .ra-callout:focus-within .ra-pop{
  opacity: 0;
  transform: translateX(-10px) scale(0);
}

body.ra-off .ra-callout:hover .ra-pop__inner.ra-hud::before,
body.ra-off .ra-callout:focus-within .ra-pop__inner.ra-hud::before{
  animation: none;
}

body.ra-off .ra-callout:hover .ra-hud__radarSweep,
body.ra-off .ra-callout:focus-within .ra-hud__radarSweep{
  opacity: .78; /* remets ta valeur base si différente */
}



/* =========================
     Images cliquables 
   ========================= */
   
   
main section figure img.gg-zoom { cursor: zoom-in; }

/* Lightbox */
.gg-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.gg-lightbox.is-open{ display: block; }

.gg-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
}

.gg-lightbox__panel{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  padding: 24px;
}

.gg-lightbox__figure{
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  justify-items: center;
  max-height: calc(100vh - 48px);
}

.gg-lightbox__img{
  max-width: min(1400px, calc(100vw - 160px));
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;

  box-shadow: 0 20px 80px rgba(0,0,0,.6);
  border-radius: 10px;

  cursor: zoom-out;
  user-select: none;
  -webkit-user-drag: none;
}

.gg-lightbox__caption{
  max-width: min(1400px, calc(100vw - 160px));
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  padding: 12px 18px;
  max-width: min(1100px, 90vw);

  color: #7fe8ff;
  background: rgba(0, 180, 255, 0.05);
  border: 1px solid rgba(0, 180, 255, 0.25);
  border-radius: 8px;
  
    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);

  box-shadow:
    0 0 12px rgba(0, 200, 255, 0.25),
    inset 0 0 12px rgba(0, 200, 255, 0.08);

  backdrop-filter: blur(6px);
}

.gg-lightbox__caption::before{
  content: "« ";
  color: #00eaff;
  
    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);
}

.gg-lightbox__caption::after{
  content: " »";
  color: #00eaff;
  
    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);
}

/* Boutons */
.gg-lightbox__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
   border-radius: 999px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
    background: rgba(0, 180, 255, 0.2);
  border: 1px solid rgba(0, 180, 255, 0.25);
 
    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);

  box-shadow:
    0 0 12px rgba(0, 200, 255, 0.25),
    inset 0 0 12px rgba(0, 200, 255, 0.08);
}

.gg-lightbox__nav{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  line-height: 40px;
    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);
	
  background: rgba(0, 180, 255, 0.2);
  border: 1px solid rgba(0, 180, 255, 0.25);

    text-shadow:
    0 0 4px rgba(0, 220, 255, 0.9),
    0 0 8px rgba(0, 220, 255, 0.6),
    0 0 16px rgba(0, 220, 255, 0.3);

  box-shadow:
    0 0 12px rgba(0, 200, 255, 0.25),
    inset 0 0 12px rgba(0, 200, 255, 0.08);

}


.gg-lightbox__nav:disabled{
  opacity: .65;
  cursor: default;
}

.gg-lightbox__caption:empty {
  display: none;
}

.gg-lightbox__caption:not(:empty)::before {
  content: "« ";
  color: #00eaff;
}

.gg-lightbox__caption:not(:empty)::after {
  content: " »";
  color: #00eaff;
}


/* =========================================================
   10) ACCESSIBILITÉ / CONFORT
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ra-dot,
  .ra-line,
  .ra-pop,
  .ra-hud__radarSweep{
    transition: none !important;
    animation: none !important;
  }

  .ra-pop__inner.ra-hud::before{
    animation: none !important;
  }
}


/* =========================================================
   NOTE : rendre le cartouche cliquable plus tard
   Actuellement .ra-line { pointer-events:none }
   -> donc le cartouche ne peut pas être cliqué.
   Si tu veux un lien dans le cartouche :
     .ra-line{ pointer-events:auto; }
     .ra-line__seg{ pointer-events:none; }
   ========================================================= */

/* =========================================================
   MOBILE : désactiver RA + Lightbox (UX simple)
   - On considère "mobile" = largeur <= 900px OU device tactile
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse){

  /* ---- RA : on cache tous les éléments interactifs / overlays ---- */
  .ra-mode{ display:none !important; }

  /* Tous les éléments RA qui se superposent */
  .ra-dot,
  .ra-line,
  .ra-pop,
  .ra-sticker{
    display:none !important;
  }

  /* Bonus : pas de curseur "zoom" (mobile n’en a pas, mais cohérence) */
  main section figure img.gg-zoom{
    cursor: default !important;
  }

  /* ---- LIGHTBOX : totalement OFF ---- */
  .gg-lightbox{
    display:none !important;
  }
}


/* === Fix overflow horizontal sur l'INDEX (petits mobiles) === */
@media (max-width: 480px){

  /* Sécurité : si un élément déborde, on coupe */
  html, body { overflow-x: hidden; }

  /* Le hero ne doit jamais élargir la page */
  #hero, #accueil { overflow-x: hidden; }

  /* CTA : padding trop large sur 320px */
  #accueil .hero-cta{
    padding: 0 12px;     /* au lieu de 40px */
    max-width: 100%;
  }

  /* Le livre : sur petit écran, on borne par la largeur (pas la hauteur) */
  #accueil .hero-cta .objet img{
    height: auto;                 /* on casse la hauteur fixe */
    max-height: 60vh;             /* garde un effet “hero” */
    width: min(78vw, 320px);      /* clé : jamais plus large que l’écran */
    max-width: 100%;
  }
}

/* =========================================================
   HERO : réduire la hauteur sur mobile
   - on garde le plein écran sur desktop
   - sur mobile : moins haut + padding safe + pas de débordement
   ========================================================= */

/* Mobile/tactile */
@media (max-width: 900px), (hover: none) and (pointer: coarse){

  /* le conteneur hero ne doit pas forcer 100vh sur mobile */
  #hero{
    height: auto;         /* laisse le contenu décider */
    min-height: 45vh;
	/* garde un effet "hero" */
  }
  


  /* section accueil : idem */
  #accueil{
    height: auto;
    min-height: 100px;
    padding-top: 0px;    /* évite le chevauchement header (ajuste si besoin) */
    padding-bottom: 0px;
	overflow: hidden;
	
  }
  
  #accueil div{
    min-height: 0px !important;
	height: 45vh !important;
    padding-bottom: 0px;	/* garde un effet "hero" */
  }
  
    #accueil .hero-bg{
    min-height: 0px !important;
	height: 60vh !important;
    padding-bottom: 0px;	/* garde un effet "hero" */
  }
  
  #accueil .objet {
	  margin-top: 60px;
	  margin-bottom: 60px;
	  transform: scale(0.6);
	    }
  
}

/* Très petits mobiles */
@media (max-width: 480px){

  #hero{
    min-height: 37vh;     /* plus compact */
  }

  #accueil{
    min-height: 37vh;
    padding-top: 95px;
    padding-bottom: 0px;    
  }
  
    #accueil div{
    min-height: 0px !important;
	height: 26vh !important;
    padding-bottom: 0px;	/* garde un effet "hero" */
  }
}