/* =========================================================
   HAUTE ÉCOLE DE LANGUE: STYLES
   ========================================================= */

:root {
  /* ---------- COLORES DE MARCA ---------- */
  --fondo2:     #f7f6f3;
  --fondo1:     #f4f5f8;
  --principal1: #6a4858;
  --principal2: #8c867e;
  --ejemplo1:   #bf7698;
  --general1:   #2c2f33;
  --general2:   #000000;

/* ---------- SISTEMA EXCLUSIVO DE 4 FUENTES ---------- */
  --font-titulos: 'Futura', 'Futura PT', 'Futura Std', 'Jost', sans-serif;
  --font-lectura: 'Source Sans 3', sans-serif;
  --font-ui:      'Open Sauce One', sans-serif;
  --font-tecnica: 'Space Grotesk', monospace;

  /* Mapeo de tus variables globales previas hacia las 4 fuentes */
  --fuente-display: var(--font-tecnica);
  --fuente4:        var(--font-titulos);
  --fuente5:        var(--font-lectura);

  /* ---------- MENÚ ---------- */
  --lado-logo: 1.5cm;
  --alto-menu: 2.5cm;
  --menu-claro: var(--fondo1);
  --menu-gris:  #454546;
  --menu-negro: #000000;
  --texto-menu-oscuro: var(--fondo1);

  /* ---------- BOTÓN ADMISSIONS ---------- */
  --admissions-fondo:  var(--principal1);
  --admissions-texto:  var(--fondo1);
  --admissions-hover:  #DABCD3;
  --admissions-oscuro: #662946;

  /* ---------- TIEMPOS ---------- */
  --t-fade-video: 1600ms;
  --t-barrido:    2000ms;
  --ease-suave:   cubic-bezier(0.65, 0, 0.35, 1);
}

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

html, body {
  margin: 0;
  background: #000000;
  font-family: var(--fuente5);
}

/* overflow-x solo en html: si también está en body, position: sticky deja de funcionar */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}


/* =========================================================
   MENÚ INSTITUCIONAL (BASE COMÚN CLARA)
   ========================================================= */
/* Distribución flexible del menú: Izquierda vs Derecha */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--alto-menu);
  padding: 0 1.5cm;
  display: flex;
  align-items: center;
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-left: 1.8cm;
  margin-right: 1.2cm;
}

.menu__grupo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__grupo--izq {
  gap: 1.2cm;
}

.menu__grupo--der {
  gap: 1cm;
}


.caja-etudiant {
  position: absolute;
  top: calc(100% + 0.4cm);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 240px;
  margin: 0;
  padding: 0.4cm 0.3cm;
  list-style: none;
  background: rgba(245, 241, 238, 0.96);
  border: 1px solid rgba(117, 89, 73, 0.18);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(117, 89, 73, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
  z-index: 100;
}

.item-espace-etudiant:hover .caja-etudiant {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.caja-etudiant li {
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
}

.caja-etudiant a {
  display: block;
  padding: 0.22cm 0.45cm;
  font-family: var(--fuente5);
  font-size: 0.85rem;
  font-weight: 500;
  color: #4A474D !important;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: background-color 200ms ease, color 200ms ease, padding-left 200ms ease;
}

.caja-etudiant a::after {
  display: none !important;
}

.caja-etudiant a:hover {
  background-color: rgba(117, 89, 73, 0.1);
  color: #755949 !important;
  padding-left: 0.6cm;
}

.item-espace-etudiant:hover .caja-etudiant li {
  opacity: 1;
  transform: translateY(0);
}

.item-espace-etudiant:hover .caja-etudiant li:nth-child(1) { transition-delay: 60ms; }
.item-espace-etudiant:hover .caja-etudiant li:nth-child(2) { transition-delay: 120ms; }
.item-espace-etudiant:hover .caja-etudiant li:nth-child(3) { transition-delay: 180ms; }
.item-espace-etudiant:hover .caja-etudiant li:nth-child(4) { transition-delay: 240ms; }
.item-espace-etudiant:hover .caja-etudiant li:nth-child(5) { transition-delay: 300ms; }

/* =========================================================
   FONDOS ESPECÍFICOS DE LAS PÁGINAS
   ========================================================= */
body,
.contenido-institucional {
  background-color: #F7F6F3;
  color: #242325;
}

body.pagina-formations,
.contenido-formations {
  background-color: #F3F5F7;
  color: #242325;
}

body.pagina-ressources,
.contenido-ressources {
  background-color: #F2F5F3;
  color: #242325;
}

.contenido-institucional,
.contenido-formations,
.contenido-ressources {
  padding-top: 0 !important;
  min-height: 100vh;
}

.seccion-texto {
  padding: 2cm 1.5cm;
}

.seccion-texto h1 {
  font-family: var(--fuente4);
  font-size: 2.5rem;
  margin-top: 0;
}

.seccion-texto p {
  font-family: var(--fuente5);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  color: #4A474D;
}

/* =========================================================
   ENTRADA SUAVE A LA MAISON (FONDO NEGRO A BLANCO LINO)
   ========================================================= */
body {
  background-color: #000000;
  animation: transicionLuzMaison 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes transicionLuzMaison {
  0%   { background-color: #000000; }
  100% { background-color: #F7F6F3; }
}

.contenido-institucional {
  animation: aparicionContenidoMaison 1600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aparicionContenidoMaison {
  0%   { opacity: 0; transform: translateY(14px); }
  35%  { opacity: 0; }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PORTAL CINEMATOGRÁFICO: CÁMARA OSCURA & ZOOM TIPOGRÁFICO
   ========================================================= */
.portal-cinematografico {
  --u-por-pt: 5.4px;
  --tam-principal: calc(20 * var(--u-por-pt));
  --tam-secundario: calc(14 * var(--u-por-pt));

  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 999999;
  background-color: #000000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  isolation: isolate;
  will-change: opacity;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), visibility 800ms;
}

/* 1. Video de la espátula ocupando toda la pantalla detrás de la máscara */
.portal-video-letras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* 2. Capas SVG de las letras "L'avenir s'apprend dès aujourd'hui" */
.portal-svg-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.portal-svg-mascara {
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: opacity;
}

.portal-svg-solido {
  z-index: 3;
}

.portal-svg-capa text {
  font-family: var(--fuente4), 'Inter', sans-serif;
}

.portal-svg-principal text {
  font-size: var(--tam-principal);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.portal-texto-solido text {
  fill: #6a4858;
}

.portal-svg-secundario text {
  font-size: var(--tam-secundario);
  font-weight: 400;
  fill: #f4f5f8;
}

/* 3. Velo de luz para recepción en Formations */
.portal-velo-luz {
  position: absolute;
  inset: 0;
  background-color: #F3F5F7;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  will-change: opacity;
}

/* =========================================================
   ATMÓSFERA Y DANZA DE COLOR: PÁGINA FORMATIONS
   ========================================================= */

/* Fondo azul pizarra sereno con disolución lumínica */
body.pagina-formations {
  background-color: #F3F5F7;
  color: #242325;
  animation: atmosferaEntradaFormations 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes atmosferaEntradaFormations {
  0% {
    background-color: #E6EAEF;
    opacity: 0.95;
  }
  100% {
    background-color: #F3F5F7;
    opacity: 1;
  }
}

/* El contenido despierta suavemente sin crear un containing-block que desplace los elementos fixed */
.pagina-formations .contenido-formations {
  padding-top: 0 !important;
  animation: reveladoSedaFormations 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveladoSedaFormations {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/* =========================================================
   PÁGINA FORMATIONS: HERO SIN BRUMA Y ALINEACIÓN ESPACIAL
   ========================================================= */
body.pagina-formations {
  background-color: #F3F5F7;
  color: #22282E;
  font-family: var(--fuente4), 'Inter', sans-serif;
  overflow-x: clip;
}

/* 1. Hero fijo al fondo (con margin-bottom: -2px para sellar cualquier línea con la siguiente foto) */
.formations-hero {
  position: sticky;
  top: 0;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
}

.formations-hero__bg-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.formations-hero__bg-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none; /* Fotografía B&N 100% pura sin alteraciones */
}

/* Eliminación total de la bruma superior, inferior y radial */
.formations-hero__overlay,
.bruma-luminica,
.regulateur-dial {
  display: none !important;
}

/* Distribución editorial en todo el espacio negativo de la portada */
.formations-hero__encabezado {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: calc(var(--alto-menu) + 9vh) 6vw 10vh 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

/* 1) Subtítulo superior con aire y equilibrio */
.formations-hero__subtitulo {
  position: relative;
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: clamp(0.82rem, 1vw, 1.02rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #F3F5F7;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  pointer-events: auto;
}

/* 2) Título monumental en el corazón del espacio negativo */
.formations-hero__titulo {
  position: relative;
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: #F3F5F7;
  text-shadow: 0 6px 32px rgba(0, 0, 0, 0.78);
  white-space: nowrap;
  pointer-events: auto;
}

/* 3) Botón inferior en un solo renglón, sobrio y lujoso */
.formations-brochure-cta {
  position: relative;
  margin: 0;
  pointer-events: auto;
}

.btn-brochure-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.48cm 1.8cm;
  border: 1px solid rgba(243, 245, 247, 0.65);
  border-radius: 2px;
  background-color: rgba(20, 24, 29, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #F3F5F7;
  font-family: var(--font-ui) !important;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  white-space: nowrap;
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.btn-brochure-download:hover {
  background-color: #F3F5F7;
  color: #18242F;
  border-color: #F3F5F7;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
}

.btn-brochure-icono {
  font-size: 1.15rem;
  line-height: 1;
}

/* Secciones posteriores por encima del Hero sticky */
.seccion-departement {
  position: relative;
  z-index: 5;
  background-color: #F3F5F7;
  padding: 8vh 2rem 10vh 2rem;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

.departement-portada {
  text-align: center;
  margin-bottom: 5vh;
}

.departement-titulo {
  margin: 0;
  font-family: var(--fuente4), 'Inter', sans-serif;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  font-weight: 500;
  color: #3B4D5B;
}

/* 4. Département I: Trackpad Nativo */
.general-escena-fija {
  position: relative;
  height: auto; 
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 2vh 0 4vh 0;
}

.parallax-fondo-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  opacity: 0.055;
}

.parallax-fondo-img {
  width: 45%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  will-change: transform;
}

.tren-monolitos-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; 
}

.tren-monolitos-viewport::-webkit-scrollbar {
  display: none;
}

/* Contenedor maestro que ancla las flechas al centro de las tarjetas */
.carrusel-interactivo-wrapper {
  position: relative;
  width: 100%;
}

/* Ajustamos el padding para que la primera y última tarjeta NO choquen con las flechas flotantes */
.tren-monolitos {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  /* 8vw a los lados garantiza un respiro perfecto donde descansará la flecha */
  padding: 2rem 8vw 1.5rem 8vw; 
  will-change: transform;
}

/* =========================================================
   ESTILOS DE LAS TARJETAS (Restaurados y Optimizados)
   ========================================================= */
.monolito-card {
  flex: 0 0 clamp(300px, 26vw, 360px);
  scroll-snap-align: center;
  position: relative;
  background-color: rgba(229, 235, 240, 0.95);
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(94, 114, 130, 0.22);
  border-radius: 6px;
  padding: 2.6rem 2rem 2.2rem 2rem;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  min-height: 520px; 

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 400ms ease;
}

.monolito-card:hover {
  box-shadow: 0 14px 32px rgba(59, 77, 91, 0.12);
}

.monolito-card__sombra-nivel {
  position: absolute;
  top: -15px;
  right: -10px;
  font-family: 'Kudryashev Display', serif;
  font-size: 7.5rem;
  font-weight: 400;
  color: #3B4D5B;
  opacity: 0.07;
  line-height: 1;
  user-select: none;
}

.monolito-card__contenido {
  display: flex;
  flex-direction: column;
  flex: 1; 
}

.monolito-card__tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #5E7282;
  margin-bottom: 0.8rem;
}

.monolito-card__nombre {
  margin: 0;
  font-family: var(--fuente4), 'Inter', sans-serif;
  font-size: 1.95rem;
  font-weight: 500;
  color: #3B4D5B;
}

.monolito-card__horas {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5E7282;
  margin: 0.5rem 0 0 0; 
}

.monolito-card__extracto {
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #22282E;
  margin: auto 0;
}

.monolito-card__balance {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #3B4D5B;
  padding: 1rem 0 0.8rem 0; 
  border-top: 1px solid rgba(94, 114, 130, 0.25);
  margin-bottom: 1.5rem;
  margin-top: 0; 
}

.balance-linea {
  line-height: 1.4;
}

.btn-abrir-tiroir {
  width: 100%;
  padding: 0.38cm 0.6cm;
  background-color: transparent;
  border: 1px solid #3B4D5B;
  border-radius: 4px;
  color: #3B4D5B;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 300ms ease;
}

.btn-abrir-tiroir:hover {
  background-color: #3B4D5B;
  color: #F3F5F7;
}

/* =========================================================
   FLECHAS FLOTANTES DE CRISTAL
   ========================================================= */
/* Contenedor fantasma que cruza la pantalla para sostener las flechas */
.controles-carrusel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 3vw; 
  pointer-events: none; 
  z-index: 10;
}

/* Botones sutiles, flotantes y cristalinos */
.btn-carrusel {
  pointer-events: auto; 
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(243, 245, 247, 0.65); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 77, 91, 0.12);
  color: #3B4D5B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(34, 40, 46, 0.05);
  transition: all 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-carrusel:hover {
  background-color: #3B4D5B;
  color: #F3F5F7;
  transform: scale(1.08); 
  box-shadow: 0 10px 25px rgba(59, 77, 91, 0.18);
  border-color: #3B4D5B;
}

/* =========================================================
   5. Département II: Certifications (Cortina + Libro + Tarjetas)
   ========================================================= */
.seccion-departement--certifications {
  background: linear-gradient(180deg, #F3F5F7 0%, #ECF1F5 15%, #ECF1F5 85%, #F3F5F7 100%);
  max-width: 100%;
  padding: 10vh 4vw;
  overflow: hidden;
}

/* --- A. EFECTO CORTINA PARA EL TÍTULO --- */
.cert-portada-cortina {
  overflow: hidden;
  margin-bottom: 5.5vh;
}

.cortina-mascara {
  display: inline-block;
  overflow: hidden;
  padding: 0.2rem 0.5rem;
  clip-path: inset(0 0 100% 0);
  transform: translateY(26px);
  opacity: 0;
  transition: clip-path 850ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 600ms ease;
}

.cert-portada-cortina.revelada .cortina-mascara {
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
  opacity: 1;
}

/* --- B. APERTURA DE LIBRO EN DOS PÁGINAS --- */
.certifications-biseccion-wrapper.cert-libro-escena {
  position: relative;
  display: flex;
  gap: 3.5rem;
  max-width: 1400px;
  margin: 0 auto;
  perspective: 2000px;
}

/* Plomada central (Lomo del libro de 0.2mm) */
.cert-plomada-central {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.2mm;
  background-color: #8c867e;
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease;
}

.cert-libro-escena.libro-abierto .cert-plomada-central {
  opacity: 0.45;
  transform: translateX(-50%) scaleY(1);
}

.cert-colonne {
  flex: 1;
  position: relative;
  background-color: #E5EBF0;
  border: 1px solid rgba(94, 114, 130, 0.25);
  border-radius: 8px;
  padding: 3rem 2.6rem;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity, box-shadow;
  transition: transform 1150ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 750ms ease,
              box-shadow 1150ms ease;
}

/* Página izquierda nace plegada hacia el lomo central (derecha) */
.cert-colonne--gauche {
  transform-origin: right center;
  transform: rotateY(72deg) scale(0.96);
  box-shadow: 25px 0 50px rgba(34, 40, 46, 0.18);
}

/* Página derecha nace plegada hacia el lomo central (izquierda) */
.cert-colonne--droite {
  transform-origin: left center;
  transform: rotateY(-72deg) scale(0.96);
  box-shadow: -25px 0 50px rgba(34, 40, 46, 0.18);
}

/* Estado Abierto del Libro */
.cert-libro-escena.libro-abierto .cert-colonne--gauche,
.cert-libro-escena.libro-abierto .cert-colonne--droite {
  transform: rotateY(0deg) scale(1);
  opacity: 1;
  box-shadow: 0 12px 34px rgba(59, 77, 91, 0.06);
}

.cert-colonne__corps {
  position: relative;
  z-index: 2;
}

.cert-badge-categorie {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #5E7282;
  margin-bottom: 0.6rem;
}

.cert-titre-bloc {
  margin: 0 0 2.2rem 0;
  font-family: var(--fuente4), sans-serif;
  font-size: 1.85rem;
  font-weight: 500;
  color: #3B4D5B;
}

.cert-liste-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cert-item-card {
  /* Variables por defecto */
  --cert-accent: #3B4D5B;
  --cert-sub: #5E7282;
  --cert-bg-left: #E3ECF2;
  --cert-bg-hover-left: #D5E2EC;
  --cert-border: rgba(59, 77, 91, 0.22);
  --cert-table-bg: rgba(244, 247, 251, 0.88);
  --cert-table-head: rgba(59, 77, 91, 0.10);
  --cert-row-line: rgba(59, 77, 91, 0.12);
  --cert-shadow: rgba(59, 77, 91, 0.10);

  position: relative;
  /* Gradiente de izquierda (color del nivel) hacia derecha (#E8EFF5) */
  background: linear-gradient(90deg, var(--cert-bg-left) 0%, #E8EFF5 100%);
  border: 1px solid var(--cert-border);
  border-radius: 7px;
  padding: 1.65rem 2rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(34, 40, 46, 0.04);
  transition: background 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 350ms ease,
              transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 350ms ease;
}

.cert-item-card:hover {
  background: linear-gradient(90deg, var(--cert-bg-hover-left) 0%, #E8EFF5 100%);
  border-color: var(--cert-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--cert-shadow);
}

.cert-item-card--majeur {
  border-left: 1px solid var(--cert-border);
}

/* Marca de agua del certificado (Efecto Escalera) */
.cert-watermark {
  position: absolute;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%) scale(0.88);
  height: 68px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: grayscale(20%) contrast(1.05);
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(450ms + (var(--orden-wm, 1) * 180ms));
}

.cert-libro-escena.libro-abierto .cert-watermark {
  opacity: 0.14;
  transform: translateY(-50%) scale(1);
}

.cert-item-card:hover .cert-watermark {
  opacity: 0.06;
  transform: translateY(-50%) scale(1.04);
  transition-delay: 0ms;
}

/* Cabecera minimalista: Solo Título y Horas */
.cert-item-card__minimal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.cert-nom {
  margin: 0;
  font-family: var(--fuente4), sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cert-accent);
  transition: color 300ms ease;
}

.cert-duree {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cert-sub);
  transition: color 300ms ease;
}

/* --- D. CUADRO DESPLEGABLE DE UEs SINCRONIZADO AL GRADIENTE PASTEL DE CADA NIVEL --- */
.cert-item-card__despliegue {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 480ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 380ms ease,
              margin-top 480ms cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
}

.cert-item-card:hover .cert-item-card__despliegue {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.25rem;
}

.cert-despliegue-inner {
  overflow: hidden;
}

/* La tabla adopta el fondo y borde pastel del nivel correspondiente */
.cert-ue-cuadro {
  background: var(--cert-table-bg);
  border: 1px solid var(--cert-border);
  border-radius: 6px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cert-ue-cuadro__head {
  display: grid;
  grid-template-columns: 135px 1fr 60px;
  gap: 0.75rem;
  padding: 0.58rem 0.95rem;
  background: var(--cert-table-head);
  border-bottom: 1px solid var(--cert-border);
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cert-accent);
}

.cert-ue-cuadro__head span:last-child {
  text-align: right;
}

.cert-ue-fila {
  display: grid;
  grid-template-columns: 135px 1fr 60px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.56rem 0.95rem;
  border-bottom: 1px solid var(--cert-row-line);
  font-size: 0.82rem;
  transition: background-color 220ms ease;
}

.cert-ue-fila:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.cert-ue-fila:last-child {
  border-bottom: none;
}

.cert-ue-code {
  font-family: 'Inter', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cert-accent);
}

.cert-ue-nom {
  font-family: var(--fuente4), sans-serif;
  color: #22282E;
  line-height: 1.35;
}

.cert-ue-hrs {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cert-sub);
  text-align: right;
}

/* Ponderaciones inferiores sincronizadas con el tono del nivel */
.cert-ponderaciones {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--cert-border);
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.cert-pond-linea {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--cert-sub);
  line-height: 1.4;
}

.cert-pond-linea strong {
  font-weight: 700;
  color: var(--cert-accent);
}

/* --- E. LÍNEA DIVISORIA DELGADA ENTRE TCF Y TEF --- */
.cert-separador-tcf-tef {
  width: 100%;
  height: 1px;
  margin: 1.2rem 0 0.8rem 0;
  background: linear-gradient(90deg, rgba(59, 77, 91, 0.08) 0%, rgba(59, 77, 91, 0.38) 50%, rgba(59, 77, 91, 0.08) 100%);
}

/* Familia TEF - Filas Individuales */
.cert-tef-famille {
  padding-top: 0.4rem;
}

.cert-tef-famille__titre {
  margin: 0 0 0.3rem 0;
  font-family: var(--fuente4), sans-serif;
  font-size: 1.1rem;
  color: #3B4D5B;
}

.cert-tef-famille__indication {
  margin: 0 0 1rem 0;
  font-size: 0.8rem;
  color: #5E7282;
}

.cert-tef-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.tef-ligne-examen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.62rem 0.95rem;
  background-color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(94, 114, 130, 0.2);
  border-radius: 5px;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. TEF CANADA : Ciruela Rosado Imperial */
.tef-ligne-examen[data-tef="tef-canada"]:hover,
.tef-ligne-examen[data-tef="tef-canada"].active {
  background: linear-gradient(90deg, #F3DCE7 0%, #FBF4F7 100%);
  border-color: rgba(110, 56, 80, 0.42);
  color: #6E3850;
  box-shadow: 0 4px 14px rgba(110, 56, 80, 0.09);
}
.tef-ligne-examen[data-tef="tef-canada"]:hover .tef-ligne__cible,
.tef-ligne-examen[data-tef="tef-canada"].active .tef-ligne__cible {
  color: #87526A;
}

/* 2. TEFAQ : Amatista & Lavanda Académica */
.tef-ligne-examen[data-tef="tefaq"]:hover,
.tef-ligne-examen[data-tef="tefaq"].active {
  background: linear-gradient(90deg, #E3DDF2 0%, #F6F4FB 100%);
  border-color: rgba(75, 62, 109, 0.42);
  color: #4B3E6D;
  box-shadow: 0 4px 14px rgba(75, 62, 109, 0.09);
}
.tef-ligne-examen[data-tef="tefaq"]:hover .tef-ligne__cible,
.tef-ligne-examen[data-tef="tefaq"].active .tef-ligne__cible {
  color: #655887;
}

/* 3. TEF IRN : Azul Pizarra Escarchado */
.tef-ligne-examen[data-tef="tef-irn"]:hover,
.tef-ligne-examen[data-tef="tef-irn"].active {
  background: linear-gradient(90deg, #D5E4F0 0%, #F2F7FB 100%);
  border-color: rgba(44, 71, 92, 0.42);
  color: #2C475C;
  box-shadow: 0 4px 14px rgba(44, 71, 92, 0.09);
}
.tef-ligne-examen[data-tef="tef-irn"]:hover .tef-ligne__cible,
.tef-ligne-examen[data-tef="tef-irn"].active .tef-ligne__cible {
  color: #4B677D;
}

/* 4. TEF ÉTUDES : Salvia & Pátina Botánica */
.tef-ligne-examen[data-tef="tef-etudes"]:hover,
.tef-ligne-examen[data-tef="tef-etudes"].active {
  background: linear-gradient(90deg, #D6E8DF 0%, #F3F9F6 100%);
  border-color: rgba(51, 82, 67, 0.42);
  color: #335243;
  box-shadow: 0 4px 14px rgba(51, 82, 67, 0.09);
}
.tef-ligne-examen[data-tef="tef-etudes"]:hover .tef-ligne__cible,
.tef-ligne-examen[data-tef="tef-etudes"].active .tef-ligne__cible {
  color: #4F6E5F;
}

/* 5. TEF TOUT PUBLIC : Piedra Champagne & Bronce Suave */
.tef-ligne-examen[data-tef="tef-tp"]:hover,
.tef-ligne-examen[data-tef="tef-tp"].active {
  background: linear-gradient(90deg, #EAE0D2 0%, #FAF7F2 100%);
  border-color: rgba(97, 78, 63, 0.42);
  color: #614E3F;
  box-shadow: 0 4px 14px rgba(97, 78, 63, 0.09);
}
.tef-ligne-examen[data-tef="tef-tp"]:hover .tef-ligne__cible,
.tef-ligne-examen[data-tef="tef-tp"].active .tef-ligne__cible {
  color: #7D6959;
}

.tef-ligne__nom {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

.tef-ligne__cible {
  font-size: 0.78rem;
  color: #5E7282;
  font-weight: 500;
  transition: color 250ms ease;
}

/* Matriz de Competencias Iluminada en Pasteles Diferenciables */
.tef-matrice-competences {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.45rem;
}

.tef-comp-cell {
  background-color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(94, 114, 130, 0.18);
  border-radius: 5px;
  padding: 0.62rem 0.35rem;
  text-align: center;
  color: #5E7282;
  transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.38;
}

.tef-comp-cell.allumee {
  opacity: 1;
  transform: translateY(-2px);
}

/* Celdas obligatorias sincronizadas con cada variante en tono pastel luminoso */
.tef-comp-cell.couleur-canada {
  background: linear-gradient(180deg, #FDF8FA 0%, #F2DAE6 100%);
  color: #6E3850;
  border-color: rgba(110, 56, 80, 0.45);
  box-shadow: 0 6px 14px rgba(110, 56, 80, 0.12);
}

.tef-comp-cell.couleur-tefaq {
  background: linear-gradient(180deg, #F9F7FD 0%, #E1DAF0 100%);
  color: #4B3E6D;
  border-color: rgba(75, 62, 109, 0.45);
  box-shadow: 0 6px 14px rgba(75, 62, 109, 0.12);
}

.tef-comp-cell.couleur-irn {
  background: linear-gradient(180deg, #F6FAFD 0%, #D2E3F0 100%);
  color: #2C475C;
  border-color: rgba(44, 71, 92, 0.45);
  box-shadow: 0 6px 14px rgba(44, 71, 92, 0.12);
}

.tef-comp-cell.couleur-etudes {
  background: linear-gradient(180deg, #F6FBF8 0%, #D3E6DC 100%);
  color: #335243;
  border-color: rgba(51, 82, 67, 0.45);
  box-shadow: 0 6px 14px rgba(51, 82, 67, 0.12);
}

.tef-comp-cell.couleur-tp {
  background: linear-gradient(180deg, #FCFBF8 0%, #E8DDD0 100%);
  color: #614E3F;
  border-color: rgba(97, 78, 63, 0.45);
  box-shadow: 0 6px 14px rgba(97, 78, 63, 0.12);
}

.tef-comp-sigle {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
}

.tef-comp-libelle {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0.2rem;
}

/* Desactivamos el antiguo HUD flotante ya que ahora vive dentro de cada tarjeta */
.hud-curseur-croix,
.hud-inspection {
  display: none !important;
}

/* =========================================================
   7. Modal Expediente (Tiroir Pédagogique - APARICIÓN UNIFICADA SIN ESCALERA)
   ========================================================= */
.tiroir-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1), visibility 380ms;
}

.tiroir-modal.ouvert {
  visibility: visible;
  opacity: 1;
}

.tiroir-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(34, 40, 46, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tiroir-modal__panneau {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  height: 100%;
  background-color: #F3F5F7;
  overflow-y: auto;
  padding: 3rem 2.8rem;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 520ms ease;
  box-shadow: 0 0 0 rgba(34, 40, 46, 0);
}

.tiroir-modal.ouvert .tiroir-modal__panneau {
  transform: translateX(0);
  box-shadow: -15px 0 50px rgba(34, 40, 46, 0.18);
}

/* Toda la información emerge simultáneamente con un efecto "aparecer" suave y ágil */
.tiroir-modal__header,
.tiroir-modal__corps {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease-out 120ms,
              transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.tiroir-modal.ouvert .tiroir-modal__header,
.tiroir-modal.ouvert .tiroir-modal__corps {
  opacity: 1;
  transform: translateY(0);
}

.tiroir-modal__filigrane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  opacity: 0.038;
  pointer-events: none;
}
.tiroir-modal__filigrane img { width: 100%; height: auto; }

.tiroir-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(94, 114, 130, 0.25);
  padding-bottom: 1.2rem;
  margin-bottom: 2rem;
}

.tiroir-modal__code-niveau {
  font-family: var(--fuente4), 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #32353A;
}

.btn-fermer-tiroir {
  background: none;
  border: none;
  font-size: 2.2rem;
  line-height: 1;
  color: #5E7282;
  cursor: pointer;
  transition: color 200ms ease;
}
.btn-fermer-tiroir:hover { color: #3B4D5B; }

.tiroir-modal__definition {
  margin: 0 0 2rem 0;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #22282E;
  border-left: 2px solid #3B4D5B;
  padding-left: 1.2rem;
}

.tiroir-modal__sous-titre {
  font-family: var(--fuente4), sans-serif;
  font-size: 1.25rem;
  color: #32353A;
  margin: 0 0 1rem 0;
}

.tiroir-table-wrap {
  background-color: #E5EBF0;
  border: 1px solid rgba(94, 114, 130, 0.2);
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 2rem;
}

.tiroir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.tiroir-table th {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5E7282;
  padding: 0.8rem;
  text-align: left;
  border-bottom: 1px solid rgba(94, 114, 130, 0.25);
}

.tiroir-table td {
  padding: 0.8rem;
  border-bottom: 1px solid rgba(94, 114, 130, 0.12);
  color: #22282E;
}

/* Disposición en dos renglones independientes para CC y ET */
.tiroir-modal__footer-evaluation {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(94, 114, 130, 0.28);
}

.tiroir-modal__footer-evaluation .eval-bloc {
  display: block;
  font-family: var(--fuente5), 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #22282E;
}

.tiroir-modal__footer-evaluation .eval-bloc strong {
  color: #3B4D5B;
  font-weight: 700;
}

/* =========================================================
   ACTUALIZACIÓN INTEGRAL DE SECCIONES: FORMATIONS (V2)
   ========================================================= */

/* 1. DIAL REGULADOR: Números romanos con la misma fuente del texto */
.dial-nodo__romano {
  font-family: 'Inter', var(--fuente5), sans-serif !important;
  font-weight: 700;
  color: #3B4D5B;
  font-size: 1em !important;
  letter-spacing: 0.08em;
}

/* 2. PREPARACIÓN ORGÁNICA DE TODOS LOS TÍTULOS DE SECCIÓN (DESAPARICIÓN A 0.5 CM DEL DIAL) */
#departement-general .departement-portada,
#departement-certifications .departement-portada,
#departement-eloquence .departement-portada,
#departement-fos > .departement-portada,
#admission > .departement-portada {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform, filter;
}

/* Anulamos el recorte antiguo de cortina en el título de Certifications para que use el efecto orgánico */
.cert-portada-cortina {
  overflow: visible !important;
  margin-bottom: 2.2rem !important;
}

.cert-portada-cortina .cortina-mascara {
  clip-path: none !important;
  transform: none !important;
  opacity: 1 !important;
  padding: 0 !important;
}

/* =========================================================
   DÉPARTEMENT I : TRANSICIÓN EDITORIAL CHANEL & VENTANA MONOLITOS
   ========================================================= */
#departement-general.seccion-departement--editorial-general {
  max-width: none !important;
  width: 100%;
  height: 185vh; /* Pista de scroll para que la foto termine de desplegarse y revele el título */
  margin: 0 0 -2px 0;
  padding: 0 !important;
  background-color: #F3F5F7;
  z-index: 6;
}

#departement-general .general-escena-fija {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background-color: #F3F5F7;
  display: block;
}

/* Vista dividida: Fotografía vertical a la izquierda y fondo #F3F5F7 a la derecha */
.general-editorial-split {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  background-color: #F3F5F7;
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 650ms;
}

.general-editorial-foto-col {
  flex: 0 0 clamp(340px, 43vw, 660px);
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #000000;
}

.general-editorial-foto-mask {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
}

.general-editorial-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: top center;
  transform: scale(1.05);
  will-change: transform;
}

/* Espacio vacío de la derecha con el mismo color #F3F5F7 de la sección */
.general-editorial-texto-col {
  flex: 1;
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  box-sizing: border-box;
}

.general-editorial-contenido {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2.2rem;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.general-editorial-contenido.revelado {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.general-editorial-titulo {
  text-align: left;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Botón (+) "Consulter les programmes" inspirado en Chanel */
.btn-editorial-rond {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  color: #3B4D5B;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 350ms ease;
}

.btn-editorial-rond__circulo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(59, 77, 91, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3B4D5B;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 350ms ease,
              color 350ms ease,
              border-color 350ms ease;
}

.btn-editorial-rond:hover .btn-editorial-rond__circulo,
.btn-cerrar-monolitos-rond:hover .btn-editorial-rond__circulo {
  background-color: #3B4D5B;
  border-color: #3B4D5B;
  color: #F3F5F7;
  transform: scale(1.08);
}

/* Ventana en pantalla completa que despliega los 5 monolitos intactos */
.general-monolitos-ventana {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: #F3F5F7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 750ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 650ms;
}

/* Botón (-) en la ventana de los 5 monolitos */
.btn-cerrar-monolitos-rond {
  position: absolute;
  top: 2.2rem;
  left: 3vw;
  z-index: 30;
  background: rgba(243, 245, 247, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}

/* Estado activo al dar clic en (+): los 5 monolitos quedan en una ventana FIXED 100% congelada
   para que jamás se desplacen hacia arriba al abrir "Consulter les unités d'enseignement" */
#general-escena-fija.monolitos-abiertos .general-editorial-split {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97);
}

#general-escena-fija.monolitos-abiertos .general-monolitos-ventana {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 500 !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
}

#departement-general .tren-monolitos {
  padding-bottom: 0.4rem !important;
}

/* Eliminación total de cualquier espacio de 2 cm entre secciones */
.puente-atmosferico-2cm {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   DÉPARTEMENT II : HOJA DE PAPEL VERTICAL 100% ÍNTEGRA, CORTE EN DOS & PISTA DE ACCIÓN
   ========================================================= */
.seccion-departement--certifications {
  --papier-offset-y: 0px;
  position: relative;
  width: 100vw;
  max-width: none !important;
  margin: -2px 0 0 0 !important; /* Pegada sin línea a la fotografía de FLE */
  padding: 0 !important;
  background-color: #E2DFD7;
  overflow: clip;
  z-index: 7;
}

/* "Glissez vers le bas" con el MISMO COLOR OSCURO DEL LOGO (#24282E) sobre el papel blanco */
#cert-scroll-invite.scroll-hint-indicator--papier {
  z-index: 95;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms ease;
}

#cert-scroll-invite.scroll-hint-indicator--papier .scroll-hint-indicator__texto {
  color: #24282E !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

#cert-scroll-invite.scroll-hint-indicator--papier .scroll-hint-indicator__linea {
  background-color: rgba(36, 40, 46, 0.25) !important;
  box-shadow: none !important;
}

#cert-scroll-invite.scroll-hint-indicator--papier .scroll-hint-indicator__linea::after {
  background-color: #24282E !important;
}

.cert-papier-scroll-track {
  position: relative;
  width: 100vw;
  min-height: 250vh; /* ¡ESTA ES LA CLAVE! Fuerza la pista de scroll */
  height: auto;
  z-index: 20;
}

.cert-papier-cortina-bipartita {
  position: relative;
  width: 100vw;
  height: auto;
  display: flex;
  z-index: 20;
  pointer-events: none;
}

.cert-papier-mitad {
  position: relative;
  width: 50vw;
  flex: 0 0 50vw;
  overflow: hidden;
  will-change: transform;
  transition: transform 1050ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 1050ms ease;
}

.cert-papier-mitad--izq {
  transform: translate3d(0%, 0, 0);
}

.cert-papier-mitad--der {
  transform: translate3d(0%, 0, 0);
}

/* La fotografía de papel se muestra 100% íntegra de arriba a abajo */
.cert-papier-img-completa {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.cert-papier-mitad--izq .cert-papier-img-completa {
  margin-left: 0;
}

.cert-papier-mitad--der .cert-papier-img-completa {
  margin-left: -50vw;
}

/* Viewport Sticky sobre la hoja de papel */
.cert-papier-sticky-viewport {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.cert-papier-centro-narrativo {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 4.8vh, 4.2rem);
  text-align: center;
  padding: calc(var(--alto-menu) + 4vh) 6vw 6vh 6vw;
  box-sizing: border-box;
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.seccion-departement--certifications.papier-ouvert .cert-papier-centro-narrativo {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cert-papier-paso {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 1120px;
  transform: translate3d(0, 28px, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.cert-papier-titulo-impacto {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.8rem, 4.8vw, 4.8rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #18242F;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.85);
}

.cert-papier-frase-metodo {
  margin: 0 0 clamp(2.4rem, 4.5vh, 3.6rem) 0;
  width: clamp(540px, 66vw, 960px);
  max-width: 90vw;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.32rem, 1.95vw, 1.78rem);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.005em;
  color: #24323E;
  text-align: center;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.88);
}

.cert-papier-cta-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cert-papier-cta-wrap.boton-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Botón de lujo en un solo renglón */
.btn-papier-esmerilado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  white-space: nowrap !important;
  padding: 0.5cm 2.1cm;
  border: 1px solid rgba(24, 36, 47, 0.45);
  border-radius: 2px;
  background-color: rgba(250, 251, 253, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #18242F;
  font-family: var(--font-ui) !important;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(24, 36, 47, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-papier-esmerilado:hover {
  background-color: #18242F;
  color: #F3F5F7;
  border-color: #18242F;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(24, 36, 47, 0.22);
}

/* Apertura en 2 mitades del papel */
.seccion-departement--certifications.papier-ouvert .cert-papier-scroll-track {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 0; /* ¡NUEVO! Resetea el scroll track al abrir la cortina */
  height: 100vh;
  height: 100dvh;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.seccion-departement--certifications.papier-ouvert .cert-papier-cortina-bipartita {
  height: 100%;
}

.seccion-departement--certifications.papier-ouvert .cert-papier-mitad {
  height: 100%;
}

.seccion-departement--certifications.papier-ouvert .cert-papier-img-completa {
  transform: translate3d(0, var(--papier-offset-y, 0px), 0);
}

.seccion-departement--certifications.papier-ouvert.cortina-separada .cert-papier-mitad--izq {
  transform: translate3d(-102%, 0, 0);
  box-shadow: 24px 0 48px rgba(34, 40, 46, 0.18);
}

.seccion-departement--certifications.papier-ouvert.cortina-separada .cert-papier-mitad--der {
  transform: translate3d(102%, 0, 0);
  box-shadow: -24px 0 48px rgba(34, 40, 46, 0.18);
}

.seccion-departement--certifications.papier-ouvert .cert-papier-scroll-track,
.seccion-departement--certifications.papier-ouvert .cert-papier-scroll-track * {
  pointer-events: none !important;
}

.seccion-departement--certifications.papier-ouvert .cert-papier-sticky-viewport {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Pista de scroll calibrada para ver e interactuar con las tablas de Certifications */
.cert-preparations-reveladas {
  display: none;
  position: relative;
  z-index: 25;
  width: 100%;
  min-height: 145vh;
  padding: 14vh 4vw 24vh 4vw;
  box-sizing: border-box;
  background: linear-gradient(180deg, #E5E2DA 0%, #ECF1F5 12%, #ECF1F5 88%, #E5E2DA 100%);
}

.seccion-departement--certifications.papier-ouvert .cert-preparations-reveladas {
  display: block !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* 3. CERTIFICATIONS: FONDO SÓLIDO #f4f5f8 SIN GRADACIONES EN BOTONES (BORDES Y TEF INTACTOS) */

/* Fondo #f4f5f8 uniforme en toda la sección y en las dos columnas */
.seccion-departement--certifications,
.cert-preparations-reveladas,
.cert-colonne {
  background: #f4f5f8 !important;
  background-color: #f4f5f8 !important;
}

.cert-colonne {
  border-color: rgba(94, 114, 130, 0.18) !important;
}

/* Botones de cada certificación (DELF, DALF y TCF) en color sólido #f4f5f8 SIN gradación */
.cert-item-card,
.cert-item-card:hover,
#colonne-tests .cert-item-card:nth-of-type(1),
#colonne-tests .cert-item-card:nth-of-type(1):hover,
#colonne-tests .cert-item-card:nth-of-type(2),
#colonne-tests .cert-item-card:nth-of-type(2):hover {
  background: #f4f5f8 !important;
  background-color: #f4f5f8 !important;
}

/* Títulos suaves sin negrita pesada */
.cert-titre-bloc {
  font-weight: 400 !important;
  color: #465765 !important;
}

.cert-nom {
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--cert-accent) !important;
}

.cert-duree {
  font-weight: 500 !important;
  color: var(--cert-sub) !important;
}

.cert-tef-famille__titre {
  font-weight: 500 !important;
  color: #465765 !important;
}

.tef-ligne__nom {
  font-weight: 500 !important;
}

/* Bordes y acentos de cada nivel (se mantienen intactos sin gradación de fondo) */
.cert-item-card[data-cert-grad="A1"] {
  --cert-accent: #4A5D6E;
  --cert-sub: #647786;
  --cert-border: rgba(59, 77, 91, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(59, 77, 91, 0.08);
  --cert-row-line: rgba(59, 77, 91, 0.12);
  --cert-shadow: rgba(59, 77, 91, 0.10);
}

.cert-item-card[data-cert-grad="A2"] {
  --cert-accent: #555A6B;
  --cert-sub: #6C7282;
  --cert-border: rgba(72, 76, 91, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(72, 76, 91, 0.08);
  --cert-row-line: rgba(72, 76, 91, 0.12);
  --cert-shadow: rgba(72, 76, 91, 0.10);
}

.cert-item-card[data-cert-grad="B1"] {
  --cert-accent: #615768;
  --cert-sub: #766C7D;
  --cert-border: rgba(84, 74, 90, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(84, 74, 90, 0.08);
  --cert-row-line: rgba(84, 74, 90, 0.12);
  --cert-shadow: rgba(84, 74, 90, 0.10);
}

.cert-item-card[data-cert-grad="B2"] {
  --cert-accent: #6C5566;
  --cert-sub: #80697A;
  --cert-border: rgba(95, 73, 89, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(95, 73, 89, 0.08);
  --cert-row-line: rgba(95, 73, 89, 0.12);
  --cert-shadow: rgba(95, 73, 89, 0.10);
}

.cert-item-card[data-cert-grad="C1"] {
  --cert-accent: #765363;
  --cert-sub: #8A6777;
  --cert-border: rgba(106, 72, 88, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(106, 72, 88, 0.08);
  --cert-row-line: rgba(106, 72, 88, 0.12);
  --cert-shadow: rgba(106, 72, 88, 0.10);
}

#colonne-tests .cert-item-card:nth-of-type(1) {
  --cert-accent: #695565;
  --cert-sub: #7D6878;
  --cert-border: rgba(93, 73, 89, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(93, 73, 89, 0.08);
  --cert-row-line: rgba(93, 73, 89, 0.12);
  --cert-shadow: rgba(93, 73, 89, 0.10);
}

#colonne-tests .cert-item-card:nth-of-type(2) {
  --cert-accent: #525969;
  --cert-sub: #676F7F;
  --cert-border: rgba(70, 76, 91, 0.28);
  --cert-table-bg: #f4f5f8;
  --cert-table-head: rgba(70, 76, 91, 0.08);
  --cert-row-line: rgba(70, 76, 91, 0.12);
  --cert-shadow: rgba(70, 76, 91, 0.10);
}

/* 4. EFECTO DE CIERRE DEL LIBRO AL SALIR DE CERTIFICATIONS HACIA ATELIERS */
.cert-libro-escena.libro-cerrado-salida .cert-colonne--gauche {
  transform: rotateY(74deg) scale(0.95);
  opacity: 0;
  box-shadow: 28px 0 55px rgba(34, 40, 46, 0.22);
}

.cert-libro-escena.libro-cerrado-salida .cert-colonne--droite {
  transform: rotateY(-74deg) scale(0.95);
  opacity: 0;
  box-shadow: -28px 0 55px rgba(34, 40, 46, 0.22);
}

.cert-libro-escena.libro-cerrado-salida .cert-plomada-central {
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
}

/* =========================================================
   8. DÉPARTEMENT III : ATELIERS SPÉCIALISÉS (GRILLE 3×2)
   Paleta Puente Lumínico: Porcelana #F8FAFC · Perla #F0EEF4
   Azul Noche #3B4D5B · Ciruela Pizarra #584352 · Piedra #8C867E
   ========================================================= */
.seccion-departement--ateliers {
  position: relative;
  max-width: 100vw !important;
  width: 100vw;
  margin: -2px 0 0 0 !important; /* Pegada al 100% con la foto de papel anterior sin ningún espacio */
  padding: 0 !important;
  background: transparent !important;
  overflow: clip;
  z-index: 8;
}

/* Escenario a ancho completo (100vw) sin bordes ni márgenes que separen la foto */
.ateliers-escenario-editorial {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

/* Fondo sin color duro que funde orgánicamente las tonalidades de las fotografías de las tarjetas */
.ateliers-halo-fusion {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(92, 74, 86, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 52% 24%, rgba(59, 77, 91, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 84% 32%, rgba(140, 128, 114, 0.24) 0%, transparent 55%),
    radial-gradient(circle at 24% 78%, rgba(72, 86, 96, 0.22) 0%, transparent 58%),
    radial-gradient(circle at 76% 76%, rgba(106, 72, 88, 0.20) 0%, transparent 60%);
  filter: blur(50px);
  opacity: 0.98;
}

/* Fotografía ateliers-cover.png pegada borde a borde con la foto del papel anterior */
.ateliers-cover-telon {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 0;
  overflow: hidden;
  background-color: #14181D;
  transform: translate3d(0%, 0, 0);
  transition: transform 1150ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ateliers-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  transform: scale(1.1);
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Contenedor central dentro de la foto en blanco y negro (Título claro + Flecha) */
.ateliers-cover-centro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.08) 70%);
}

.ateliers-cover-titulo {
  margin: 0;
  font-family: var(--fuente4), 'DM Sans', sans-serif;
  font-size: clamp(2.4rem, 4.3vw, 4.4rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.12;
  color: #F3F5F7; /* Color claro sobre la fotografía en blanco y negro */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.55);
}

/* Botón circular de flecha hacia la derecha (→) centrado debajo del título */
.btn-ateliers-flecha-der {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(243, 245, 247, 0.7);
  background-color: rgba(243, 245, 247, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #F8FAFC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: all 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-ateliers-flecha-der:hover {
  background-color: #F3F5F7;
  border-color: #F3F5F7;
  color: #1E262E;
  transform: scale(1.08);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

/* Cuadrícula 3×2 de las 6 tarjetas: nace a la derecha y entra arrastrada tras la foto */
.ateliers-grille-3x2 {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  width: 100%;
  padding: 6.5vh 3.5vw;
  box-sizing: border-box;
  transform: translate3d(103%, 0, 0);
  transition: transform 1150ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ateliers-escenario-editorial.ateliers-abiertos .ateliers-cover-telon {
  transform: translate3d(-103%, 0, 0);
  pointer-events: none;
}

.ateliers-escenario-editorial.ateliers-abiertos .ateliers-grille-3x2 {
  transform: translate3d(0%, 0, 0);
}

.atelier-card-item {
  position: relative;
  height: 480px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1E262E;
  border: 1px solid rgba(59, 77, 91, 0.14);
  box-shadow: 0 16px 38px rgba(34, 40, 46, 0.10);
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: box-shadow 450ms ease, border-color 450ms ease;
}

.atelier-card-item:hover {
  box-shadow: 0 20px 44px rgba(59, 77, 91, 0.13);
  border-color: rgba(106, 72, 88, 0.32);
}

/* Fotografía en blanco y negro con transición sedosa hacia luz alta en hover */
.atelier-card__bg {
  position: absolute;
  inset: -4%;
  z-index: 1;
}

.atelier-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) blur(3px) brightness(0.72) contrast(1.04);
  transform: scale(1.04);
  transition: filter 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atelier-card-item:hover .atelier-card__bg img {
  filter: grayscale(100%) blur(12px) brightness(1.12) contrast(0.9);
  transform: scale(1.08);
}

/* Capa frontal: Título con halo sutil de marca */
.atelier-card__front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(24, 32, 40, 0.14) 0%, rgba(24, 32, 40, 0.42) 100%);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atelier-card-item:hover .atelier-card__front {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.atelier-card__letrero {
  position: relative;
  display: inline-block;
  padding: 1rem 1.6rem;
}

.atelier-card__letrero::before {
  content: '';
  position: absolute;
  inset: -14px -28px;
  background: radial-gradient(
    ellipse at center,
    rgba(92, 68, 84, 0.44) 0%,
    rgba(59, 77, 91, 0.24) 48%,
    transparent 78%
  );
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}

.atelier-card__titre {
  margin: 0;
  font-family: var(--fuente4), 'DM Sans', sans-serif;
  font-size: clamp(1.5rem, 1.85vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #F8F9FB;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.32),
    0 2px 12px rgba(18, 24, 30, 0.75);
}

/* REVERSO DE LAS TARJETAS (HOVER): Porcelana escarchada de alta luminosidad
   con puente sutil en Perla Lavanda-Pizarra */
.atelier-card__hover-info {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(160deg, rgba(250, 251, 253, 0.96) 0%, rgba(242, 244, 248, 0.97) 55%, rgba(244, 241, 246, 0.97) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #22282E;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 440ms cubic-bezier(0.22, 1, 0.36, 1), transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atelier-card-item:hover .atelier-card__hover-info {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.atelier-hover__header {
  margin: 0;
  font-family: var(--fuente4), sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  color: #3B4D5B;
  letter-spacing: 0.01em;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(106, 72, 88, 0.24);
}

.atelier-hover__bloc {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.atelier-hover__label {
  font-family: 'Inter', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #5E7282;
}

.atelier-hover__text {
  margin: 0;
  font-family: var(--fuente5), sans-serif;
  font-size: 0.91rem;
  line-height: 1.5;
  color: #2C333A;
}

.atelier-hover__horaire-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.horaire-pill {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.28rem 0.75rem;
  border-radius: 4px;
  background: #F4F6F9;
  border: 1px solid rgba(94, 114, 130, 0.2);
  color: #3B4D5B;
}

/* Píldora principal en pastel perla-ciruela muy luminoso */
.horaire-pill--total {
  background: #F3EEF2;
  border-color: rgba(106, 72, 88, 0.26);
  color: #584352;
  font-weight: 600;
}

.atelier-hover__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 114, 130, 0.18) 0%, rgba(106, 72, 88, 0.12) 50%, transparent 100%);
}

.atelier-hover__eval {
  margin: 0;
  font-family: var(--fuente5), sans-serif;
  font-size: 0.87rem;
  line-height: 1.46;
  color: #2C333A;
}

.atelier-hover__eval strong {
  color: #3B4D5B;
  font-weight: 600;
}

/* SEXTA TARJETA: Cristal de Alabastro y Bruma Pastel (Luminosidad elevada) */
.atelier-card-item--cta {
  width: 100%;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;

  background: linear-gradient(145deg, #F8FAFC 0%, #EEF2F7 52%, #F2EFF4 100%);
  border: 1px solid rgba(59, 77, 91, 0.18);
  box-shadow:
    0 14px 34px rgba(59, 77, 91, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.atelier-card-item--cta::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(106, 72, 88, 0.12);
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
  transition: border-color 420ms ease, inset 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.atelier-cta__halo {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106, 72, 88, 0.11) 0%, rgba(59, 77, 91, 0.07) 52%, transparent 74%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 1;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease;
}

.btn-consulter-cursus-ate__txt {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.98rem, 1.2vw, 1.16rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3B4D5B;
  padding: 0.7rem 1.4rem;
  border-bottom: 1.5px solid rgba(106, 72, 88, 0.35);
  transition: color 380ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 380ms ease;
}

.atelier-card-item--cta:hover {
  background: linear-gradient(145deg, #FFFFFF 0%, #F2F5F9 50%, #F4EFF3 100%);
  border-color: rgba(106, 72, 88, 0.38);
  box-shadow:
    0 20px 44px rgba(59, 77, 91, 0.12),
    inset 0 1px 0 #FFFFFF;
}

.atelier-card-item--cta:hover::before {
  inset: 14px;
  border-color: rgba(106, 72, 88, 0.26);
}

.atelier-card-item--cta:hover .atelier-cta__halo {
  transform: scale(1.28);
}

.atelier-card-item--cta:hover .btn-consulter-cursus-ate__txt {
  color: #584352;
  border-color: #6A4858;
  transform: translateY(-2px);
}

/* =========================================================
   VENTANA MODAL DE UNIDADES DE ENSEÑANZA (5 ATELIERS)
   Pasteles luminosos en navegación y cabeceras
   ========================================================= */
.ateliers-cursus-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  visibility: hidden;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms;
}

.ateliers-cursus-modal.ouvert {
  visibility: visible;
  opacity: 1;
}

.ateliers-cursus-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 46, 0.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ateliers-cursus-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1220px;
  max-height: 90vh;
  background: #F8FAFC;
  border: 1px solid rgba(59, 77, 91, 0.18);
  border-radius: 10px;
  box-shadow: 0 28px 68px rgba(24, 32, 38, 0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ateliers-cursus-modal.ouvert .ateliers-cursus-modal__dialog {
  transform: translateY(0) scale(1);
}

.ateliers-cursus-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.4rem;
  background: linear-gradient(90deg, #EEF2F6 0%, #F2EFF4 100%);
  border-bottom: 1px solid rgba(59, 77, 91, 0.12);
}

.ateliers-cursus-modal__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5E7282;
  margin-bottom: 0.3rem;
}

.ateliers-cursus-modal__titre {
  margin: 0;
  font-family: var(--fuente4), sans-serif;
  font-size: clamp(1.4rem, 2vw, 1.82rem);
  font-weight: 500;
  color: #32353A;
}

.ateliers-cursus-modal__close {
  background: none;
  border: none;
  font-size: 2.1rem;
  line-height: 1;
  color: #5E7282;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  transition: color 250ms ease, transform 250ms ease;
}

.ateliers-cursus-modal__close:hover {
  color: #3B4D5B;
  transform: scale(1.1);
}

.ateliers-cursus-modal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1rem 2.4rem;
  background: #F3F5F8;
  border-bottom: 1px solid rgba(59, 77, 91, 0.1);
}

/* Pastillas de filtro en tono pastel luminoso (sin fondos oscuros pesados) */
.ate-filter-pill {
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(94, 114, 130, 0.22);
  background: #FFFFFF;
  color: #5E7282;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ate-filter-pill:hover {
  background: #F2EFF4;
  color: var(--pill-color, #3B4D5B);
  border-color: var(--pill-color, #3B4D5B);
}

.ate-filter-pill.activo {
  background: linear-gradient(135deg, #EDF1F6 0%, #F1ECF1 100%);
  color: var(--pill-color, #3B4D5B);
  border-color: var(--pill-color, #3B4D5B);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(59, 77, 91, 0.08);
  transform: translateY(-1px);
}

.ateliers-cursus-modal__body {
  padding: 2rem 2.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ate-cursus-section {
  background: #FFFFFF;
  border: 1px solid rgba(94, 114, 130, 0.18);
  border-left: 4px solid var(--ate-accent, #584352);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(59, 77, 91, 0.04);
  animation: reveladoFade 320ms ease forwards;
}

.ate-cursus-section.oculto {
  display: none;
}

.ate-cursus-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  background: linear-gradient(90deg, #F2F5F8 0%, #F4F1F5 100%);
  border-bottom: 1px solid rgba(94, 114, 130, 0.14);
}

.ate-cursus-section__badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.28rem 0.75rem;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(106, 72, 88, 0.25);
  color: var(--ate-accent, #584352);
}

.ate-cursus-section__nom {
  margin: 0 auto 0 0;
  font-family: var(--fuente4), sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  color: #32353A;
}

.ate-cursus-section__total {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5E7282;
}

.ate-cursus-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ate-cursus-table th {
  font-family: 'Inter', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E7282;
  padding: 0.88rem 1.4rem;
  background: #F7F9FB;
  border-bottom: 1px solid rgba(94, 114, 130, 0.16);
}

.ate-cursus-table td {
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid rgba(94, 114, 130, 0.12);
  vertical-align: top;
  font-size: 0.94rem;
  color: #22282E;
}

.ate-cursus-table tbody tr:last-child td {
  border-bottom: none;
}

.ate-td-code {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ate-accent, #3B4D5B) !important;
  white-space: nowrap;
  width: 150px;
}

.ate-td-ue {
  font-family: var(--fuente4), sans-serif;
  font-weight: 500;
  font-size: 1rem !important;
  color: #32353A;
  width: 28%;
}

.ate-td-temps {
  width: 190px;
}

.temps-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.79rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  background: #EEF2F6;
  color: #3B4D5B;
  margin: 0 0.3rem 0.35rem 0;
}

.temps-tag--auto {
  background: #F4EFF3;
  color: #584352;
}

.ate-comp-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  line-height: 1.48;
}


/* Responsive */
@media (max-width: 1024px) {
  .ateliers-grille-3x2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .fos-layout-wrapper {
    flex-direction: column;
  }
  .fos-col-botones {
    flex: none;
    width: 100%;
  }
  .admission-etapes-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .frais-inscription-showcase {
    flex-direction: column;
    align-items: flex-start;
  }
  .frais-inscription-showcase__left {
    max-width: 100%;
  }
  .frais-inscription-showcase__desc {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .formations-hero__titulo { white-space: normal; }
  .certifications-biseccion-wrapper { flex-direction: column; gap: 2rem; }
  .cert-plomada-central { display: none; }
  .ateliers-grille-3x2 { grid-template-columns: 1fr; }
  .admission-etapes-grille { grid-template-columns: 1fr; }
  .tarifs-scroll-track { height: auto; }
  .tarifs-sticky-stage { position: static; height: auto; }
  .tarif-stack-body__inner { overflow-x: auto; }
}

/* =========================================================
   ATMÓSFERA, PALETA Y ARQUITECTURA: PÁGINA RESSOURCES
   ========================================================= */

body.pagina-ressources {
  background-color: #F2F5F3;
  color: #222825;
  font-family: var(--fuente4), 'Inter', sans-serif;
  overflow-x: clip;
  animation: atmosferaEntradaRessources 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes atmosferaEntradaRessources {
  0%   { background-color: #E4EBE7; opacity: 0.95; }
  100% { background-color: #F2F5F3; opacity: 1; }
}

.pagina-ressources .contenido-ressources {
  padding-top: 0 !important;
  animation: reveladoSedaRessources 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveladoSedaRessources {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/* ---------------------------------------------------------
   INDICADOR MINIMALISTA ESTILO CHANEL (ABAJO AL CENTRO)
   Solo texto "GLISSEZ VERS LE BAS" en Futura + línea vertical
   --------------------------------------------------------- */
.scroll-hint-indicator {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.scroll-hint-indicator.oculto-por-scroll {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.scroll-hint-indicator__texto {
  font-family: 'Futura', 'Futura PT', 'Futura Std', 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F2F5F3;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.75);
}

.scroll-hint-indicator__linea {
  position: relative;
  display: block;
  width: 1px;
  height: 24px;
  background-color: rgba(242, 245, 243, 0.30);
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

.scroll-hint-indicator__linea::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F2F5F3;
  animation: lineaChanelAbajo 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes lineaChanelAbajo {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}

/* ---------------------------------------------------------
   2. HERO VERTICAL SIN RECORTE & TÍTULO EMERGENTE
   --------------------------------------------------------- */
.ressources-hero--vertical {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #161412;
}

.ressources-hero__lienzo-vertical {
  position: relative;
  width: 100%;
  z-index: 1;
}

.ressources-hero__img-completa {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.ressources-hero__fundido-inferior {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  background: linear-gradient(180deg,
    rgba(242, 245, 243, 0) 0%,
    rgba(242, 245, 243, 0.55) 65%,
    #F2F5F3 100%
  );
  pointer-events: none;
}

.ressources-hero__sticky-viewport {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ressources-hero__encabezado-emergente {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

.bibliotheque-hero-titulo {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  color: #F2F5F3;
  text-shadow:
    0 4px 24px rgba(10, 12, 11, 0.92),
    0 0 48px rgba(10, 12, 11, 0.78);
}

.bibliotheque-hero-titulo__linea1 {
  display: block;
  font-family: 'Futura', 'Futura PT', 'Futura Std', 'Jost', sans-serif;
  font-size: clamp(2.6rem, 5.2vw, 5.4rem);
  font-weight: 550;
  letter-spacing: 0.14em;
  line-height: 1.08;
  text-transform: uppercase;
  color: #F2F5F3;
}

.bibliotheque-hero-titulo__linea2 {
  display: block;
  font-family: 'Open Sauce One', 'Open Sauce Sans', 'Arimo', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.25;
  color: #F2F5F3;
}

/* ---------------------------------------------------------
   5. SECCIÓN II : LE CHRONOGRAPHE ACADÉMIQUE 2027 (DISEÑO EDITORIAL MAISON)
   --------------------------------------------------------- */
.seccion-ressources--calendrier {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  z-index: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #F2F5F3 !important;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 350ms ease, visibility 350ms ease;
}

.seccion-ressources--calendrier.chrono-ouvert {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Telón pesado con la fotografía que barre hacia abajo al abrir y sube al cerrar */
.chrono-rideau-foto {
  position: absolute;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #141615;
  transform: translate3d(0, 0%, 0);
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.45), 0 28px 70px rgba(0, 0, 0, 0.45);
  transition: transform 1250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}

.chrono-rideau-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chrono-rideau-velo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(18, 22, 20, 0.35) 0%, rgba(18, 22, 20, 0.65) 100%);
}

.seccion-ressources--calendrier.barrido-abajo .chrono-rideau-foto {
  transform: translate3d(0, 102%, 0);
}

.seccion-ressources--calendrier.barrido-subida .chrono-rideau-foto {
  transform: translate3d(0, 0%, 0);
}

.chrono-modal-container {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  max-width: 1180px; 
  margin: 0 auto;
  /* Margen superior sutil y margen inferior amplio y desahogado */
  padding: 4vh 5vw 8vh 5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Evita que los elementos se estiren hacia los extremos */
  overflow-y: auto;
  transform: translate3d(0, -36px, 0);
  opacity: 0;
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

.seccion-ressources--calendrier.barrido-abajo .chrono-modal-container {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.seccion-ressources--calendrier.barrido-subida .chrono-modal-container {
  transform: translate3d(0, -36px, 0);
  opacity: 0;
}

/* Barra superior: Alineación de la cruz en la esquina */
.chrono-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 0.2rem;
}

/* Botón interactivo sin bordes ni fondos toscos */
.btn-fermer-chrono-x {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
  opacity: 0.65;
}

.btn-fermer-chrono-x:hover {
  opacity: 1;
  transform: rotate(90deg) scale(1.08); /* Giro suave de 90 grados al hover */
}

/* Construcción de la cruz geométrica con dos líneas ultrafinas de 1.2px */
.chrono-close-x {
  position: relative;
  display: block;
  width: 23px;
  height: 23px;
  pointer-events: none;
}

.chrono-close-x::before,
.chrono-close-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.2px;
  background-color: #222825;
  transition: background-color 300ms ease;
}

.chrono-close-x::before {
  transform: translateY(-50%) rotate(45deg);
}

.chrono-close-x::after {
  transform: translateY(-50%) rotate(-45deg);
}

.btn-fermer-chrono-x:hover .chrono-close-x::before,
.btn-fermer-chrono-x:hover .chrono-close-x::after {
  background-color: #45564D; /* Toma el acento verde pátina oscuro institucional */
}

/* Título principal aireado */
.departement-portada--chrono {
  text-align: center;
  margin: 0 0 1rem 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.departement-titulo--chrono {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2rem, 3.1vw, 3.1rem);
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #222825;
}

.chrono-consola {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2vh;
}

/* 1. LAS 4 ESTACIONES: Eje tipográfico limpio + Emanación cromática estacional */

/* Variables cromáticas por estación (Aura ambiental + Acento editorial) */
.seccion-ressources--calendrier[data-estacion-actual="hiver"] {
  --halo-estacion: rgba(176, 198, 218, 0.44);
}
.seccion-ressources--calendrier[data-estacion-actual="printemps"] {
  --halo-estacion: rgba(180, 208, 192, 0.44);
}
.seccion-ressources--calendrier[data-estacion-actual="ete"] {
  --halo-estacion: rgba(224, 206, 176, 0.46);
}
.seccion-ressources--calendrier[data-estacion-actual="automne"] {
  --halo-estacion: rgba(212, 184, 196, 0.44);
}

/* Halo ambiental que se funde con el fondo claro #F2F5F3 detrás de las estaciones */
.seccion-ressources--calendrier::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--halo-estacion, rgba(176, 198, 218, 0.44));
  -webkit-mask-image: radial-gradient(ellipse 68% 48% at 50% 34%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 68% 48% at 50% 34%, #000 0%, transparent 76%);
  transition: background-color 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chrono-estaciones-dock {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-bottom: 1px solid rgba(34, 40, 37, 0.14);
  margin-bottom: 1.6rem; /* Acercamiento hacia las sesiones */
}

/* Tono propio de cada botón de estación */
.chrono-estacion-btn[data-saison="hiver"] {
  --saison-aura: rgba(162, 188, 212, 0.55);
  --saison-accent: #3B5266;
}
.chrono-estacion-btn[data-saison="printemps"] {
  --saison-aura: rgba(164, 198, 178, 0.55);
  --saison-accent: #3D5A4B;
}
.chrono-estacion-btn[data-saison="ete"] {
  --saison-aura: rgba(216, 194, 158, 0.58);
  --saison-accent: #735B42;
}
.chrono-estacion-btn[data-saison="automne"] {
  --saison-aura: rgba(200, 168, 182, 0.55);
  --saison-accent: #6A4858;
}

.chrono-estacion-btn {
  position: relative;
  padding: 1.2rem 1rem 1.15rem 1rem;
  border: none;
  background: transparent;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  isolation: isolate;
}

/* Emanación suave localizada que brota desde la base de la estación al pasar el cursor */
.chrono-estacion-btn::before {
  content: '';
  position: absolute;
  inset: -15px -8px 0 -8px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--saison-aura, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 0%, transparent 72%);
  opacity: 0;
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chrono-estacion-btn:hover::before,
.chrono-estacion-btn.activo::before {
  opacity: 1;
}

/* Línea inferior teñida con el acento sobrio de la estación */
.chrono-estacion-btn::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -1px;
  height: 2px;
  background-color: var(--saison-accent, #222825);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 450ms ease;
}

.chrono-estacion-btn.activo::after {
  transform: scaleX(1);
}

.chrono-estacion-btn__nom {
  font-family: var(--font-titulos) !important;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: #8C867E;
  transition: color 350ms ease;
}

.chrono-estacion-btn:hover .chrono-estacion-btn__nom,
.chrono-estacion-btn.activo .chrono-estacion-btn__nom {
  color: var(--saison-accent, #222825);
}

.chrono-estacion-btn__meses {
  font-family: var(--font-lectura) !important;
  font-style: italic;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #8C867E;
  transition: color 350ms ease;
}

.chrono-estacion-btn:hover .chrono-estacion-btn__meses,
.chrono-estacion-btn.activo .chrono-estacion-btn__meses {
  color: var(--saison-accent, #45564D);
}

/* 2. LAS 3 SESIONES: Hover en verde salvia / pátina pastel (#DCE8E1) */
.chrono-secciones-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem; /* Sesiones y texto explicativo más próximos */
  margin: 0 0 1.8rem 0; /* Menos distancia antes del friso de fechas */
  padding: 0;
  background: transparent;
  border: none;
}

.chrono-secciones-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.chrono-sec-pill {
  padding: 0.62rem 1.5rem;
  border-radius: 2px;
  border: 1px solid rgba(69, 86, 77, 0.22);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms ease,
              transform 320ms ease;
}

.chrono-sec-pill:hover,
.chrono-sec-pill.activo {
  background-color: #DCE8E1 !important;
  border-color: #9EB5A8 !important;
  transform: translateY(-1px);
}

.chrono-sec-pill__code {
  font-family: var(--font-tecnica) !important;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #45564D;
}

.chrono-sec-pill__label {
  font-family: var(--font-ui) !important;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #222825;
}

.chrono-sec-definicion {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-style: italic;
  font-size: 0.92rem;
  color: #5E7267;
  text-align: center;
  max-width: 650px;
  border: none;
  padding: 0;
}

/* 3. LOS 4 EVENTOS: Friso arquitectónico con filetes verticales finos */
.chrono-friso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  border-top: 1px solid rgba(34, 40, 37, 0.14);
  border-bottom: 1px solid rgba(34, 40, 37, 0.14);
  margin: 0 0 3.2rem 0; /* Margen generoso que separa las fechas del botón Consulter */
}

.chrono-nodo-card {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(34, 40, 37, 0.12);
  border-radius: 0;
  /* Altura interna reducida para compactar el grupo */
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  box-shadow: none;
  transition: background-color 300ms ease;
}

.chrono-nodo-card:last-child {
  border-right: none;
}

.chrono-nodo-card:hover {
  background-color: rgba(220, 232, 225, 0.28);
}

.chrono-nodo-card__etape {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #222825;
}

.chrono-nodo-card__fechas {
  font-family: var(--font-tecnica) !important;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #45564D;
}

/* 4. RENGLÓN FINAL: Botón Consulter idéntico a La Charte */
.chrono-consulter-cta-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.8rem 0 2rem 0; /* Aire limpio y despejado respecto al fondo de pantalla */
  margin: 0;
}

/* =========================================================
   MATIÈRE PREMIÈRE : PAPIER BRUT (VERTICALIDAD ICICLE & CAHIERS)
   ========================================================= */
.seccion-matiere-papier {
  position: relative;
  z-index: 5;
  width: 100%;
  background-color: #F2F5F3;
  padding: clamp(6rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem) 0;
  box-sizing: border-box;
}

.matiere-papier__titulo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(4rem, 8vh, 6.5rem);
  padding: 0 4vw;
}

.matiere-papier__titulo {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.1rem, 3.6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #222825;
  text-align: center;
}

/* CONTENEDOR DUO EDITORIAL: ANCHO EXPANDIDO TIPO PASARELA */
.papier-editorial-duo {
  width: 94vw;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  /* Garantiza matemáticamente el mismo ancho exacto para ambos */
  grid-template-columns: 1fr 1fr;
  gap: 2.8vw;
}

/* MARCO VERTICAL: AMBOS ELEMENTOS CON LA MISMA ALTURA Y PROPORCIÓN */
.papier-duo__item {
  margin: 0;
  width: 100%;
  /* Altura de revista: ocupa el 92% del alto de la pantalla */
  height: 250vh;
  min-height: 860px;
  max-height: 1100px;
  overflow: hidden;
  background-color: #141615;
  position: relative;
  box-shadow: 0 30px 70px rgba(18, 22, 20, 0.12);
}

/* IMAGEN Y VIDEO: LLENADO COMPLETO IDÉNTICO SIN DEFORMARSE */
.papier-duo__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.papier-duo__item:hover .papier-duo__media {
  transform: scale(1.03);
}

/* INTRODUCCIÓN EDITORIAL: ESTROFAS MÉTRICAS SIN HUÉRFANAS */
.cahiers-editorial-intro {
  margin: clamp(5rem, 5vh, 7.5rem) auto clamp(4rem, 4vh, 5.5rem) auto;
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cahiers-poeme-block {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 100ch; /* Ancho áureo que impide desbordes y huérfanas */
  margin: 0 auto;
}

.cahiers-poeme__strophe {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.015em;
  color: #38453D;
  text-align: center;
}

/* =========================================================
   LAS 4 FICHAS: ARQUITECTURA CHRONOGRAPHE (SOBRIA Y NOBLE)
   ========================================================= */
.guides-subbloque {
  margin-bottom: 6rem;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(2rem, 5vw, 4.5rem);
  box-sizing: border-box;
}

.methode-grille-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem;
}

.methode-card {
  position: relative;
  background: #FAFBF9;
  border: 1px solid rgba(69, 86, 77, 0.14);
  border-radius: 2px;
  padding: 3rem 2.8rem 2.4rem 2.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(43, 56, 49, 0.02);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 350ms ease,
              box-shadow 400ms ease;
}

.methode-card:hover {
  transform: translateY(-3px);
  border-color: rgba(69, 86, 77, 0.32);
  box-shadow: 0 16px 36px rgba(43, 56, 49, 0.07);
}

.methode-card__header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.2rem;
}

.methode-card__indice {
  font-family: var(--font-tecnica) !important;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8C867E;
  transition: color 300ms ease;
}

.methode-card:hover .methode-card__indice {
  color: #45564D;
}

.methode-card__titre {
  margin: 0 0 1.2rem 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(1.3rem, 1.6vw, 1.48rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #222825;
}

.methode-card__desc {
  margin: 0 0 2.6rem 0;
  font-family: var(--font-lectura) !important;
  font-size: 0.96rem;
  line-height: 1.72;
  color: #55625A;
  flex: 1;
}

.methode-card__cta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(69, 86, 77, 0.1);
}

.methode-card .btn-ouvrir-methode {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0 0 3px 0 !important;
  cursor: pointer;
  box-shadow: none !important;
}

/* =========================================================
   MODAL METODOLÓGICO: BOTÓN 'GARDER' CENTRADO Y NOBLE
   ========================================================= */
.tiroir-modal__footer-garder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(69, 86, 77, 0.14);
}

.btn-garder-luxe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 2.8rem;
  border: 1px solid #222825;
  border-radius: 2px;
  background-color: transparent;
  color: #222825;
  font-family: var(--font-ui) !important;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-garder-luxe:hover {
  background-color: #222825;
  color: #F2F5F3;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 40, 37, 0.18);
}

@media (max-width: 960px) {
  .papier-editorial-duo {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .papier-duo__item {
    aspect-ratio: auto;
    height: 65vh;
  }
  .methode-grille-2x2 {
    grid-template-columns: 1fr;
  }
  .methode-card {
    padding: 2.2rem 2rem;
  }
}

/* =========================================================
   7. SECCIÓN IV : FOTO HORIZONTAL 65VH, INTRO Y DESPLIEGUE
   ========================================================= */

/* --- A. FOTO HORIZONTAL 65VH CON MÁRGENES DE PASARELA --- */
.seccion-essai-intro-media {
  position: relative;
  width: 100%;
  background-color: #F2F5F3;
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(4rem, 7vh, 5.5rem) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.essai-intro-media__frame {
  margin: 0 auto;
  /* Margen horizontal visible que respira de los bordes laterales */
  width: clamp(320px, 92vw, 1540px);
  /* 65% de la pantalla vertical */
  height: 65vh;
  min-height: 440px;
  max-height: 780px;
  overflow: hidden;
  position: relative;
  background-color: #161817;
  border-radius: 2px;
  box-shadow: 0 20px 50px rgba(18, 22, 20, 0.08);
}

.essai-intro-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.essai-intro-media__frame:hover .essai-intro-media__img {
  transform: scale(1.02);
}

/* --- B. INTRODUCCIÓN EDITORIAL CONTINUA (TÍTULO + TEXTO + BOTÓN) --- */
.seccion-essais-intro {
  position: relative;
  width: 100%;
  background-color: #F2F5F3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem clamp(3.5rem, 6vh, 5rem) 2rem;
  box-sizing: border-box;
}

.essais-intro-block {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.essais-intro__titulo {
  margin: 0 0 1.4rem 0;
  font-family: var(--font-lectura) !important; /* 2.º orden como La Charte */
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: #222825;
}

.essais-intro__texto {
  margin: 0 0 2.4rem 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.74;
  color: #4A554E;
  text-align: center;
  max-width: 44ch;
}

.essais-intro__cta-wrap {
  display: inline-flex;
}

.btn-toggle-essais {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  padding: 0 0 3px 0 !important;
}

/* --- C. CONTENEDOR DESPLEGABLE EN GRID 0FR -> 1FR (PLIEGUE SUAVE) --- */
.essais-desplegable-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 750ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 550ms ease,
              visibility 750ms;
  overflow: hidden;
  width: 100%;
  background-color: #F2F5F3;
}

.essais-desplegable-wrapper.abierto {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.essais-desplegable-inner {
  min-height: 0;
  overflow: hidden;
}

.seccion-essais-desplegados {
  padding-top: 1rem !important;
  padding-bottom: clamp(5rem, 9vh, 7.5rem) !important;
  max-width: 1400px;
  margin: 0 auto;
}

.essais-editorial-layout {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
  box-sizing: border-box;
}

/* --- D. COLUMNA IZQUIERDA (55%): ÍNDICE EDITORIAL --- */
.essais-index-col {
  flex: 0 0 calc(55% - 1.6rem);
  width: calc(55% - 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(69, 86, 77, 0.16);
}

.essai-ligne-item {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(69, 86, 77, 0.16);
  padding: 1.85rem 1.4rem 1.95rem 0.6rem;
  cursor: pointer;
  transition: padding-left 350ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 350ms ease;
}

.essai-ligne-item:hover,
.essai-ligne-item.activo {
  background-color: rgba(255, 255, 255, 0.35);
  padding-left: 1.2rem;
}

.essai-ligne-item__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.65rem;
}

.essai-ligne-item__num {
  font-family: var(--font-tecnica) !important;
  font-size: 0.76rem;
  font-weight: 600;
  color: #45564D;
  letter-spacing: 0.14em;
}

.essai-ligne-item__tag {
  font-family: var(--font-ui) !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A8880;
  transition: color 300ms ease;
}

.essai-ligne-item:hover .essai-ligne-item__tag,
.essai-ligne-item.activo .essai-ligne-item__tag {
  color: #45564D;
}

.essai-ligne-item__titre {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: clamp(1.06rem, 1.22vw, 1.22rem);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: 0.01em;
  color: #46534C;
  transition: color 300ms ease;
}

.essai-ligne-item:hover .essai-ligne-item__titre,
.essai-ligne-item.activo .essai-ligne-item__titre {
  color: #1F2722;
}

.essai-ligne-item__filet {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: #45564D;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.essai-ligne-item:hover .essai-ligne-item__filet,
.essai-ligne-item.activo .essai-ligne-item__filet {
  transform: scaleX(1);
}

/* --- E. COLUMNA DERECHA (45% / 85VH): ATRIL EDITORIAL --- */
.essais-featured-col {
  flex: 0 0 calc(45% - 1.6rem);
  width: calc(45% - 1.6rem);
  position: sticky;
  top: clamp(60px, 7.5vh, 90px);
  height: 85vh;
  max-height: 85vh;
  box-sizing: border-box;
}

.essai-featured-card {
  height: 100%;
  box-sizing: border-box;
  background: #FAFBF9;
  border: 1px solid rgba(69, 86, 77, 0.16);
  border-radius: 2px;
  padding: clamp(2.4rem, 4vh, 3.2rem) clamp(2.2rem, 3vw, 3.2rem);
  box-shadow: 0 20px 48px rgba(34, 40, 37, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.essai-featured-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(69, 86, 77, 0.12);
  flex-shrink: 0;
}

.essai-featured-card__cahier {
  font-family: var(--font-tecnica) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6A4858;
}

.essai-featured-card__domaine {
  font-family: var(--font-ui) !important;
  font-size: 0.74rem;
  font-weight: 500;
  color: #728078;
}

.essai-featured-card__centre {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 3vh, 2.6rem);
  margin: auto 0;
  padding: 1rem 0;
}

.essai-featured-card__titre {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: clamp(1.4rem, 1.85vw, 1.82rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: #222825;
}

.essai-featured-card__incipit {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-style: italic;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  line-height: 1.76;
  color: #4A554E;
  padding-left: 1.4rem;
  border-left: 1.5px solid rgba(106, 72, 88, 0.35);
}

.essai-featured-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(69, 86, 77, 0.12);
  flex-shrink: 0;
}

.essai-featured-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.essai-featured-card__label-auteur {
  font-family: var(--font-tecnica) !important;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8C867E;
}

.essai-featured-card__nom-auteur {
  font-family: var(--font-ui) !important;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #222825;
}

.essai-featured-card__cta-wrap {
  display: flex;
  align-items: flex-end;
}

.essai-featured-card .btn-ouvrir-salon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 2px 0 !important;
  cursor: pointer;
  width: auto !important;
}

.essai-featured-card .charte-enlace-chic {
  font-size: 0.84rem !important;
  letter-spacing: 0.2em !important;
  color: #222825 !important;
}

.essai-featured-card .charte-enlace-chic::after {
  background-color: #222825 !important;
  height: 1.5px !important;
}

.essai-featured-card .charte-enlace-chic:hover {
  color: #6A4858 !important;
}

.essai-featured-card .charte-enlace-chic:hover::after {
  background-color: #6A4858 !important;
}

/* =========================================================
   8. SECCIÓN V : LA VITRINE BIBLIOGRAPHIQUE (ÉDITION LUXE)
   ========================================================= */

/* ZONA DE NAVEGACIÓN SUPERIOR */
.biblio-navigation-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 3.5rem;
}

/* 1. Menú Disciplinas (Píldoras) */
.biblio-filtros-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.biblio-pill {
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(69, 86, 77, 0.18);
  background: transparent;
  color: #64766C;
  font-family: 'Inter', var(--font-ui), sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 300ms ease;
}

.biblio-pill:hover {
  color: #2B3831;
  border-color: #B8C9C0;
}

/* Tono verde pátina pastel no invasivo */
.biblio-pill.activo {
  background: #DCE8E1;
  color: #2B3831;
  border-color: #9EB5A8;
}

/* 2. Menú de Obras (Activado únicamente por Hover) */
.biblio-oeuvres-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 1100px;
}

.oeuvres-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.65rem;
  border-left: 3px solid transparent;
  background-color: transparent;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 280ms ease;
}

.oeuvres-menu-item:hover,
.oeuvres-menu-item.activo {
  background-color: rgba(255, 255, 255, 0.65);
  border-left-color: var(--theme-color);
}

.oeuvres-num {
  font-family: var(--font-tecnica);
  font-size: 0.72rem;
  font-weight: 700;
  color: #8C867E;
  transition: color 280ms ease;
}

.oeuvres-menu-item.activo .oeuvres-num {
  color: var(--theme-color);
}

.oeuvres-titre {
  font-family: var(--font-ui), sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #45564D;
  white-space: nowrap;
}

/* FILETES DIVISORIOS (1.8px con el estilo institucional) */
.biblio-vitrine-filet {
  width: 100%;
  height: 1.8px;
  background-color: rgba(34, 40, 37, 0.12);
}

.biblio-vitrine-filet--top {
  margin-bottom: 4rem;
}

.biblio-vitrine-filet--bottom {
  margin-top: 4rem;
}

/* PEDESTAL CENTRAL DE EXHIBICIÓN */
.biblio-vitrine-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  min-height: 435px;
}

/* =========================================
   EL LIBRO 3D (CUBIERTA REAL PURA)
   ========================================= */
.biblio-vitrine__livre-wrap {
  perspective: 1200px;
  width: 280px;
  height: 406px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.livre-objet {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px 7px 7px 2px;
  background-color: #E6ECE8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Relieve y profundidad volumétrica sin manchar la cubierta */
  box-shadow: 
    inset 4px 0 8px rgba(0, 0, 0, 0.12),
    inset -1px 0 3px rgba(255, 255, 255, 0.25),
    20px 24px 45px rgba(20, 24, 22, 0.18),
    4px 6px 14px rgba(20, 24, 22, 0.08);
  transition: opacity 350ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

/* Hendidura física del lomo */
.livre-objet__sillon {
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 0, 0, 0.14) 100%);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}

/* =========================================
   PLACA CURATORIAL Y BOTÓN CHIC
   ========================================= */
.biblio-vitrine__placard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 420px;
  min-height: 290px;
  flex-shrink: 0;
}

.placard-info-wrap {
  display: flex;
  flex-direction: column;
}

.placard-cat {
  font-family: 'Inter', var(--font-tecnica), sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8C867E;
  margin-bottom: 0.8rem;
}

.placard-titre {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-titulos), serif;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  font-weight: 400;
  color: #2B3831;
  line-height: 1.15;
}

.placard-auteur {
  margin: 0;
  font-family: var(--font-lectura), sans-serif;
  font-size: 1.15rem;
  color: #64766C;
}

.placard-divider {
  width: 40px;
  height: 1px;
  background-color: #8C867E;
  margin: 1.6rem 0;
}

.placard-editeur {
  margin: 0;
  font-family: var(--font-tecnica);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2B3831;
}

.placard-action-wrap {
  margin-top: auto;
  padding-top: 1.8rem;
}

/* El botón adopta la estética oficial (.charte-enlace-chic) */
.placard-action-wrap .charte-enlace-chic {
  cursor: pointer;
  border: none;
  background: transparent;
}

/* Responsividad */
@media (max-width: 900px) {
  .biblio-vitrine-stage {
    flex-direction: column;
    gap: 3.5rem;
    text-align: center;
    min-height: auto;
  }
  .biblio-vitrine__placard {
    align-items: center;
    width: 100%;
    min-height: auto;
  }
  .placard-action-wrap {
    padding-top: 2.5rem;
  }
}

/* ---------------------------------------------------------
   10. MODALES DE RESSOURCES (TIROIR MÉTHODE & SALON DE LECTURE)
   --------------------------------------------------------- */
.tiroir-modal--ressources .tiroir-modal__panneau {
  background-color: #FAFBF9;
}

.tiroir-modal--ressources .tiroir-modal__code-niveau {
  color: #45564D;
}

/* Salon de Lecture Cartésien (Ensayos ~800 palabras) */
.salon-lecture-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  visibility: hidden;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 420ms;
}

.salon-lecture-modal.ouvert {
  visibility: visible;
  opacity: 1;
}

.salon-lecture__overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 37, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.salon-lecture__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  height: 90vh;
  background: #FAFBF9;
  border: 1px solid rgba(69, 86, 77, 0.24);
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(24, 32, 28, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.98);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.salon-lecture-modal.ouvert .salon-lecture__dialog {
  transform: translateY(0) scale(1);
}

.salon-lecture__progress-bar {
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #45564D 0%, #6A4858 100%);
  transition: width 120ms linear;
}

.salon-lecture__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 2.4rem;
  background: linear-gradient(90deg, #E6ECE8 0%, #F2ECF0 100%);
  border-bottom: 1px solid rgba(69, 86, 77, 0.16);
}

.salon-lecture__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6A4858;
  margin-bottom: 0.25rem;
}

.salon-lecture__titre {
  margin: 0;
  font-family: var(--fuente4), sans-serif;
  font-size: clamp(1.25rem, 1.75vw, 1.65rem);
  font-weight: 600;
  color: #2B3831;
}

.salon-lecture__header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-analyse-stylistique {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid #45564D;
  background: #FAFBF9;
  color: #45564D;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 250ms ease;
}

.btn-analyse-stylistique.activo {
  background: #6A4858;
  border-color: #6A4858;
  color: #FAFBF9;
}

.salon-lecture__close {
  background: none;
  border: none;
  font-size: 2.1rem;
  line-height: 1;
  color: #64766C;
  cursor: pointer;
}

.salon-lecture__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  gap: 2.8rem;
  padding: 2.6rem 3rem;
}

.salon-lecture__sidebar {
  flex: 0 0 26%;
  width: 26%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  border-right: 1px solid rgba(69, 86, 77, 0.16);
  padding-right: 1.8rem;
}

.salon-sidebar-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64766C;
  margin-bottom: 0.6rem;
}

.salon-plan-list {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #2B3831;
  line-height: 1.45;
}

.salon-concepts-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.salon-concept-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  background: #E6ECE8;
  color: #45564D;
}

.salon-auteur-nom {
  margin: 0;
  font-family: var(--fuente4), sans-serif;
  font-weight: 700;
  color: #2B3831;
}

.salon-auteur-cargo {
  margin: 0.2rem 0 0 0;
  font-size: 0.8rem;
  color: #64766C;
}

.salon-lecture__texte {
  flex: 1;
  max-width: 720px;
  font-family: var(--fuente4), Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.78;
  color: #222825;
}

.salon-lecture__texte p {
  margin: 0 0 1.35rem 0;
  text-align: justify;
}

.salon-lecture__texte p:first-of-type::first-letter {
  float: left;
  font-size: 3.3rem;
  line-height: 0.88;
  padding-right: 0.6rem;
  padding-top: 0.15rem;
  font-weight: 700;
  color: #45564D;
}

.salon-lecture__texte.analyse-active .conn-highlight {
  background: rgba(106, 72, 88, 0.16);
  color: #6A4858;
  font-weight: 600;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  border-bottom: 1.5px solid #6A4858;
}

/* Responsive Ressources */
@media (max-width: 1024px) {
  .codex-admision-grille,
  .chrono-estaciones-dock,
  .chrono-friso-grid,
  .lab-nav-dock {
    grid-template-columns: repeat(2, 1fr);
  }
  .contrato-instrumentos-pills {
    grid-template-columns: repeat(2, 1fr);
  }
  .codex-layout,
  .sim-plazos-grid,
  .chrono-feriados-panel,
  .essais-editorial-layout,
  .biblio-workspace,
  .lab-phonetique-grid,
  .docimologie-biseccion,
  .salon-lecture__body {
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .codex-indice-col,
  .essais-featured-col,
  .biblio-inspecteur,
  .salon-lecture__sidebar {
    width: 100%;
    flex: none;
    position: static;
  }
  .biblio-etagere-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ressources-hero__titulo { white-space: normal; }
  .codex-admision-grille,
  .chrono-estaciones-dock,
  .chrono-friso-grid,
  .methode-grille-2x2,
  .ref-ejes-grid,
  .biblio-etagere-grid,
  .lab-nav-dock,
  .cartographe-results-grid,
  .chrono-feriados-lista {
    grid-template-columns: 1fr;
  }
}
/* ---------------------------------------------------------
   NIVEL 1: CAPÍTULOS Y CABECERAS MAYORES (Futura / Jost)
   "Futura solo se usa para títulos de primer orden"
   --------------------------------------------------------- */
.bibliotheque-hero-titulo__linea1,
.matiere-premiere__titulo,            /* I. Matière première : les principes */
.matiere-papier__titulo,              /* II. L'épure & III. La trace */
.mask-svg__texto-gigante,             /* Le temps (SVG mask) */
.formations-hero__titulo,
.droits-titulo-monumental {
  font-family: var(--font-titulos) !important;
}

/* ---------------------------------------------------------
   NIVEL 2: DERIVADOS Y LECTURA CONTINUA (Source Sans 3)
   "la charte, les cahiers de méthode y demás son de 2.º orden"
   --------------------------------------------------------- */
.charte-editorial__titulo,            /* La charte & Les cahiers de méthode */
.departement-titulo--chrono,          /* Chronographe des sessions */
.departement-titulo,                  /* Essais d’auteur, Ouvrages de réf, Labo */
.origines-spread__poema,
.cahiers-poeme__strophe,
.text-mask__poeme-vers,
.trace-narrative__p,
.salon-lecture__texte {
  font-family: var(--font-lectura) !important;
}

/* ---------------------------------------------------------
   NIVEL 3: TÍTULOS DE ENSAYO, FICHAS Y UI (Open Sauce One)
   "títulos de ensayo deben ser considerados como tercer orden"
   --------------------------------------------------------- */
.essai-featured-card__titre,          /* Título ensayo insignia */
.essai-ligne-item__titre,             /* Títulos lista de ensayos */
.salon-lecture__titre,                /* Título ensayo en modal */
.methode-card__titre,                 /* Títulos fichas de método */
.biblio-volume-card__titre,
.biblio-insp-titre,
.charte-enlace-chic,
.btn-ouvrir-salon,
.site-header .menu a {
  font-family: var(--font-ui) !important;
}

/* ---------------------------------------------------------
   NIVEL 4: DATOS TÉCNICOS, FRECUENCIAS Y NÚMEROS (Space Grotesk)
   --------------------------------------------------------- */
.essai-ligne-item__num,               /* 01, 02, 03, 04 */
.essai-featured-card__cahier,
.chrono-nodo-card__fechas,
.chrono-sec-pill__code,
.formant-badge,
.phoneme-fiche__symbole {
  font-family: var(--font-tecnica) !important;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   REFINAMIENTOS EDITORIALES FINALES: FORMATIONS HAUTE COUTURE
    Jerarquía Tipográfica:
   - Títulos de 1.er orden: Futura / Jost (--font-titulos)
   - Títulos de 2.º orden:  Source Sans 3 (--font-lectura)
   - Textos:                Open Sauce One (--font-ui)
   - Tablas:                Space Grotesk (--font-tecnica)
   ========================================================= */

/* 1. APARTADO I (FLE): RESPIRO VISUAL, COLUMNA MÁS ESTRECHA JUSTIFICADA Y 3 TONOS DE OSCURO */
.general-editorial-texto-col {
  padding: 0 7vw !important;
}

.general-editorial-contenido {
  max-width: 540px !important;
  gap: 0 !important;
}

/* Tono oscuro 3 (Etiqueta y Botón): Grafito Pizarra #263542 */
.general-editorial-tag {
  font-family: var(--font-ui) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  color: #263542 !important;
  margin-bottom: 1.5rem !important;
}

/* Tono oscuro 1 (Título de 1.er orden): Azul Noche Profundo #18242F */
.general-editorial-titulo {
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.2rem, 3.3vw, 3.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  color: #18242F !important;
  margin: 0 0 2.6rem 0 !important;
  white-space: nowrap;
}

/* Tono oscuro 2 (Texto explicativo): Pizarra Académico #3A4D5C, justificado y más estrecho/alto que el título */
.general-editorial-extracto {
  font-family: var(--font-ui) !important;
  font-size: 0.96rem !important;
  font-weight: 400 !important;
  line-height: 1.82 !important;
  color: #3A4D5C !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  max-width: 345px !important; /* Más estrecho y vertical que el título */
  margin: 0 0 3.4rem 0 !important;
}

.btn-editorial-rond {
  font-family: var(--font-ui) !important;
  color: #263542 !important;
}

.btn-editorial-rond__circulo {
  border-color: rgba(38, 53, 66, 0.55) !important;
  color: #263542 !important;
}

.btn-editorial-rond:hover .btn-editorial-rond__circulo {
  background-color: #18242F !important;
  border-color: #18242F !important;
  color: #F3F5F7 !important;
}

/* 2. APARTADO II (CERTIFICATIONS): REFINAMIENTO EDITORIAL DE LUJO */
.cert-papier-titulo-impacto {
  font-family: var(--font-titulos) !important;
  color: #18242F !important;
}

#btn-parcourir-preparations.btn-papier-esmerilado {
  width: auto !important;
  white-space: nowrap !important;
  font-family: var(--font-ui) !important;
  color: #18242F !important;
  border-color: rgba(24, 36, 47, 0.45) !important;
}

#btn-parcourir-preparations.btn-papier-esmerilado:hover {
  background-color: #18242F !important;
  border-color: #18242F !important;
  color: #F3F5F7 !important;
}

#cert-papier-frase.cert-papier-frase-metodo {
  width: clamp(540px, 66vw, 960px) !important;
  max-width: 90vw !important;
  margin: 0 auto 2.8rem auto !important;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.32rem, 1.95vw, 1.78rem) !important;
  line-height: 1.68 !important;
  color: #24323E !important;
  text-align: center !important;
}

/* 3. APARTADO IV (FRANÇAIS PROFESSIONNEL / FOS): FOTO PURA SIN BRUMA, SILUETA OVALADA SIN BORDES Y BARRIDO */
.seccion-departement--fos-editorial {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin: -2px 0 0 0 !important;
  padding: 0 !important;
  background-color: #0E1318;
  z-index: 9;
}

.fos-editorial-track {
  position: relative;
  width: 100vw;
  height: 290vh;
}

.fos-editorial-sticky {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #0E1318;
}

.fos-editorial-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.fos-portada-col {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0E1318;
  perspective: 1200px;
  transition:
    flex-basis 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    width 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width, flex-basis;
  z-index: 5;
}

.fos-portada-fotos-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Foto 100% nítida, sin bruma ni desenfoque */
.fos-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  filter: none !important;
  transition:
    opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fos-cover-img.activa {
  opacity: 1;
  transform: scale(1);
  filter: none !important;
}

/* Distribución amplia en el espacio negativo sobre la foto pura (SIN bruma) */
.fos-portada-overlay-centro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 15vh 6vw 13vh 6vw;
  box-sizing: border-box;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.fos-portada-titulo {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.9rem, 5vw, 5.2rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.08;
  color: #F3F5F7;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85), 0 1px 10px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translate3d(0, 100vh, 0);
  will-change: transform, opacity;
}

/* Silueta ovalada-circular invisible (SIN bordes ni cajas, solo las letras ceñidas al óvalo estilo Chanel) */
.fos-ovalo-horizontal {
  width: clamp(340px, 76vw, 980px);
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translate3d(0, 100vh, 0);
  will-change: transform, opacity;
}

.fos-ovalo-texto {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.18rem, 1.65vw, 1.52rem);
  font-weight: 400;
  line-height: 1.62;
  color: #F3F5F7;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9), 0 0 32px rgba(0, 0, 0, 0.75);
}

.fos-linea-ovalo {
  display: block;
  text-align: center;
}

/* Calibración geométrica del óvalo: más corto arriba, amplio al centro y más corto abajo */
.fos-linea-ovalo--1 { max-width: 58ch; }
.fos-linea-ovalo--2 { max-width: 72ch; }
.fos-linea-ovalo--3 { max-width: 84ch; }
.fos-linea-ovalo--4 { max-width: 70ch; }
.fos-linea-ovalo--5 { max-width: 54ch; }

/* Botón de acción con efecto "aparecer" una vez consolidado el texto */
.fos-portada-cta-wrap {
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fos-portada-cta-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-fos-ver-detalles {
  background: transparent;
  border: none;
  padding: 0.4rem 0.3rem 0.65rem 0.3rem;
  border-bottom: 1.5px solid #F3F5F7;
  font-family: var(--font-ui) !important;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F3F5F7;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  transition: color 300ms ease, border-color 300ms ease, transform 300ms ease, opacity 300ms ease;
}

.btn-fos-ver-detalles:hover {
  color: #DABCD3;
  border-bottom-color: #DABCD3;
  transform: translateY(-2px);
}

/* Barra superior derecha con el botón "Fermer" dentro del área de programas */
.fos-workspace-topbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: -0.4rem;
}

.btn-fos-fermer {
  color: #18242F !important;
  border-bottom-color: #18242F !important;
  text-shadow: none !important;
}

.btn-fos-fermer:hover {
  color: #6A4858 !important;
  border-bottom-color: #6A4858 !important;
}

/* Panel derecho (3/4 de la pantalla): es barrido por la foto desde la izquierda hacia la derecha al cerrar */
.fos-workspace-derecha {
  flex: 0 0 75%;
  width: 75%;
  height: 100%;
  background: linear-gradient(180deg, #EDF1F6 0%, #F4F6F9 100%);
  padding: 4vh 3.5vw 6vh 3.5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(12%, 0, 0);
  transition:
    opacity 950ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 950ms;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fos-top-botones {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
}

.fos-editorial-stage.fos-abierto .fos-portada-col {
  flex: 0 0 25%;
  width: 25%;
}

.fos-editorial-stage.fos-abierto .fos-portada-overlay-centro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fos-editorial-stage.fos-abierto .fos-workspace-derecha {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

/* =========================================================
   DISEÑO INTERIOR WORKSPACE FOS (4 ESPECIALIDADES Y ACORDEÓN)
   ========================================================= */

/* 1. Las 4 tarjetas superiores de especialidad */
.fos-spec-btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.25rem 2rem 1.25rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(94, 114, 130, 0.18);
  border-left: 3.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: 0 4px 14px rgba(59, 77, 91, 0.04);
  transition: all 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fos-spec-btn:hover {
  background: #FFFFFF;
  border-color: rgba(59, 77, 91, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 77, 91, 0.08);
}

.fos-spec-btn.activo {
  background: linear-gradient(135deg, #FFFFFF 0%, #F1EFF5 100%);
  border-color: rgba(106, 72, 88, 0.28);
  border-left: 3.5px solid #6A4858;
  box-shadow: 0 10px 24px rgba(106, 72, 88, 0.10);
  transform: translateY(-2px);
}

.fos-spec-btn__nom {
  font-family: var(--font-ui) !important;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.32;
  color: #22282E;
  position: relative;
  z-index: 2;
  transition: color 300ms ease;
}

.fos-spec-btn.activo .fos-spec-btn__nom {
  color: #3B4D5B;
}

.fos-spec-btn__niveaux {
  font-family: var(--font-tecnica) !important;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5E7282;
  position: relative;
  z-index: 2;
}

.fos-spec-btn.activo .fos-spec-btn__niveaux {
  color: #6A4858;
}

.fos-spec-btn__watermark {
  position: absolute;
  bottom: 0.4rem;
  left: 1.25rem;
  font-family: var(--font-tecnica) !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C867E;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* 2. Acordeón editorial elegante (Prérequis, Programme, Modalités) */
.fos-col-detalle {
  width: 100%;
  margin-top: 0.4rem;
}

.fos-submenu-acordeon {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fos-acordeon-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(94, 114, 130, 0.18);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(59, 77, 91, 0.03);
  transition: border-color 350ms ease, box-shadow 350ms ease, background-color 350ms ease;
}

.fos-acordeon-item.abierto {
  background: #FFFFFF;
  border-color: rgba(59, 77, 91, 0.28);
  box-shadow: 0 10px 28px rgba(59, 77, 91, 0.07);
}

.fos-acordeon-trigger {
  width: 100%;
  padding: 1.15rem 1.8rem;
  background: transparent;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  transition: background-color 250ms ease;
}

.fos-acordeon-item.abierto .fos-acordeon-trigger {
  background: linear-gradient(90deg, #F1F4F8 0%, #F4F1F6 100%);
  border-bottom: 1px solid rgba(94, 114, 130, 0.14);
}

.fos-acordeon-trigger__titre {
  font-family: var(--font-titulos) !important;
  font-size: 1.22rem;
  font-weight: 500;
  color: #32353A;
  letter-spacing: 0.02em;
}

/* Icono interactivo (+) y (-) */
.fos-acordeon-trigger__icono {
  position: relative;
  width: 16px;
  height: 16px;
}

.fos-acordeon-trigger__icono::before,
.fos-acordeon-trigger__icono::after {
  content: '';
  position: absolute;
  background: #584352;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1), opacity 250ms ease;
}

.fos-acordeon-trigger__icono::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 1.5px;
}

.fos-acordeon-trigger__icono::after {
  top: 0;
  left: 7px;
  width: 1.5px;
  height: 16px;
}

.fos-acordeon-item.abierto .fos-acordeon-trigger__icono::after {
  transform: rotate(90deg);
  opacity: 0;
}

.fos-acordeon-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease;
}

.fos-acordeon-item.abierto .fos-acordeon-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.fos-acordeon-panel__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.8rem;
  transition: padding 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fos-acordeon-item.abierto .fos-acordeon-panel__inner {
  padding: 1.6rem 1.8rem;
}

/* 3. Panel de Prérequis */
.fos-prerequis-box {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  color: #22282E;
}

.fos-prerequis-box strong {
  font-family: var(--font-lectura) !important;
  color: #3B4D5B;
  font-weight: 600;
  font-size: 1.05rem;
}

.fos-prerequis-list {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  line-height: 1.55;
  color: #2C333A;
}

.fos-prerequis-note {
  margin: 0.5rem 0 0 0;
  padding: 0.85rem 1.2rem;
  background: #F4F2F6;
  border-left: 3px solid #6A4858;
  border-radius: 4px;
  font-size: 0.92rem;
  color: #38333A;
  font-style: italic;
}

/* 4. Tablas de Programa y Evaluación FOS */
.fos-prog-grid {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.fos-prog-etape {
  border: 1px solid rgba(94, 114, 130, 0.16);
  border-radius: 6px;
  overflow: hidden;
  background: #FFFFFF;
}

.fos-prog-etape__title {
  margin: 0;
  padding: 0.75rem 1.2rem;
  background: linear-gradient(90deg, #F0EEF4 0%, #EDF1F6 100%);
  color: #3B4D5B;
  border-bottom: 1px solid rgba(94, 114, 130, 0.14);
  border-left: 3px solid #6A4858;
  font-family: var(--font-ui) !important;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fos-prog-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.fos-prog-table th {
  font-family: var(--font-tecnica) !important;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E7282;
  padding: 0.72rem 1.2rem;
  background: #F7F9FB;
  border-bottom: 1px solid rgba(94, 114, 130, 0.15);
}

.fos-prog-table td {
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(94, 114, 130, 0.1);
  font-family: var(--font-lectura) !important;
  font-size: 0.94rem;
  color: #22282E;
}

.fos-prog-table tbody tr:last-child td {
  border-bottom: none;
}

.fos-code-cell,
.fos-hrs-cell {
  font-family: var(--font-tecnica) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap;
}

.fos-code-cell {
  color: #3B4D5B;
  font-weight: 600;
}

.fos-hrs-cell {
  color: #6A4858;
  font-weight: 600;
}

/* 4. APARTADO V (DROITS DE SCOLARITÉ): 5 CORTINAS CON TEXTURAS VISIBLES + SUBIDA DE LA 5.ª CORTINA CON SU TABLA */
.seccion-droits-cortina {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #F3F5F7;
  z-index: 10;
}

.droits-slide-cortina {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: var(--z-cortina, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -18px 48px rgba(15, 20, 26, 0.24);
  will-change: transform;
}

.droits-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.droits-slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.droits-slide__velo-portada {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(18, 24, 30, 0.18) 0%, rgba(18, 24, 30, 0.42) 100%);
}

/* SIN velo blanco ni blur: deja lucir al 100% las texturas cover-fled.jpg, cover-prep.jpg, cover-atelier.jpg y cover-fosp.jpg */
.droits-slide__velo-contenido {
  position: absolute;
  inset: 0;
  background: rgba(18, 24, 30, 0.06);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.droits-slide__centro-portada {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.droits-titulo-monumental {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(3rem, 5.8vw, 5.8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: #F3F5F7;
  text-shadow: 0 6px 28px rgba(0, 0, 0, 0.65);
}

.droits-slide__contenedor-lujo {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1160px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2rem;
  padding: 2vh 0;
  box-sizing: border-box;
}

.droits-bloque-seccion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.droits-subtitulo-orden2 {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: #f4f5f8;
}

.droits-aclaracion-usd {
  margin: 0.2rem 0 0 0;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: #f4f5f8;
}

.droits-inscription-lujo {
  margin-bottom: 0 !important;
  padding: 1.25rem 2.2rem !important;
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.droits-cabecera-tabla {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.droits-fle-switch {
  margin-bottom: 0 !important;
  min-width: 380px;
}

.droits-tabla-cristal {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(59, 77, 91, 0.18);
  border-radius: 8px;
  padding: 1rem 1.8rem;
  box-shadow: 0 18px 44px rgba(18, 24, 30, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.droits-tabla-cristal .tarif-editorial-table,
.droits-tabla-cristal .tarif-editorial-table th,
.droits-tabla-cristal .tarif-editorial-table td {
  font-family: var(--font-tecnica) !important;
  font-variant-numeric: tabular-nums;
}

.droits-tabla-cristal .tarif-editorial-table th {
  background: transparent !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.73rem !important;
  letter-spacing: 0.14em !important;
  color: #526373 !important;
  border-bottom: 1px solid rgba(59, 77, 91, 0.18) !important;
}

.droits-tabla-cristal .tarif-editorial-table td {
  padding: 0.68rem 1rem !important;
  font-size: 0.92rem !important;
  border-bottom: 1px solid rgba(94, 114, 130, 0.10) !important;
}

/* Espacio blanco detrás de la 5.ª cortina: cuando la 5.ª cortina sube con su tabla, descubre este botón */
.droits-cierre-blanco {
  position: sticky;
  top: 0;
  z-index: 4;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #F3F5F7;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.transicion-hacia-bibliotheque {
  opacity: 0 !important;
  transform: scale(0.985);
  filter: blur(8px);
  background-color: #F2F5F3 !important;
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 680ms ease !important;
}

/* =========================================================
   BIBLIOTHÈQUE (MAISON EDITION): MATIÈRE PREMIÈRE & LECTURA CONTINUA
   ========================================================= */

/* 1. Eliminación absoluta de la bruma final en ressourceshero.jpg */
.ressources-hero__fundido-inferior {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
}

.ressources-hero--vertical {
  background-color: #F2F5F3;
  margin-bottom: 0;
}

/* Escenario de apertura: Título y video estáticos */
.seccion-matiere-premiere {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #141615;
  overflow: hidden;
  z-index: 5;
}

.matiere-premiere__escena {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Video fijo ocupando toda la pantalla */
.matiere-premiere__video-bloque {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #141615;
  overflow: hidden;
  transform: none !important;
}

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

.matiere-premiere__video-velo {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 15, 0.35);
  pointer-events: none;
}

/* Título centrado y legible sobre el video */
.matiere-premiere__titulo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
  pointer-events: none;
  transform: none !important;
}

.matiere-premiere__titulo {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.1rem, 3.6vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #F7F6F3 !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.origines-editorial-spread {
  width: 100%;
  /* Misma altura exacta garantizada para la foto izquierda y el video derecho */
  height: clamp(440px, 70vh, 780px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  box-sizing: border-box;
  perspective: 1600px;
  transform-style: preserve-3d;
}

/* Casi 2/4 de pantalla en la izquierda (46.5vw) con ventana 3D */
.origines-spread__media--foto {
  position: relative;
  flex: 0 0 46.5vw;
  width: 46.5vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #161817;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 0 28px 65px rgba(18, 22, 20, 0.16);
  will-change: transform, box-shadow;
  margin-top: 2cm;
  padding: clamp(4.5rem, 10vh, 8rem) 0 clamp(3rem, 6vh, 5rem) 0;
}

/* 1/4 del final de la parte derecha (25vw) */
.origines-spread__media--video {
  flex: 0 0 25vw;
  width: 25vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #161817;
  margin-top: 2cm;
}

/* Lienzo interno 26% más alto para el recorrido Parallax 3D sin cortes */
.origines-spread__media--foto img {
  position: absolute;
  top: -13%;
  left: -4%;
  width: 108%;
  height: 126%;
  object-fit: cover;
  backface-visibility: hidden;
  will-change: transform;
}

.origines-spread__media--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Espacio negativo central entre la fotografía y el video (28.5vw) */
.origines-spread__texto-centro {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem clamp(1.8rem, 3.2vw, 4rem);
  box-sizing: border-box;
}

.origines-spread__poema {
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.24rem);
  font-weight: 600;
  line-height: 1.68;
  letter-spacing: 0.02em;
  color: #222825;
  text-align: left;
  margin-top: auto;
}

.origines-spread__poema p {
  margin: 0;
}

@media (max-width: 960px) {
  .origines-editorial-spread {
    flex-direction: column;
    height: auto;
    gap: 2.5rem;
  }
  .origines-spread__media--foto,
  .origines-spread__media--video {
    flex: none;
    width: 100%;
    height: 56vh;
  }
  .origines-spread__texto-centro {
    padding: 1rem 6vw;
  }
}

/* =========================================================
   BLOQUE EDITORIAL CONTINUO: "LA CHARTE" (CON LÍNEAS SUTILES)
   ========================================================= */

.seccion-charte-continuo {
  position: relative;
  z-index: 6;
  width: 100%;
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 14vh, 10rem) 2rem;
  box-sizing: border-box;
  
  /* Línea sutil superior e inferior de 0,5 mm (aprox. 1.8px) */
  margin-top: 200px;
  border-top: 1.8px solid rgba(34, 40, 37, 0.12);
  border-bottom: 1.8px solid rgba(34, 40, 37, 0.12);
}

.charte-editorial-block {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.charte-editorial__titulo {
  margin: 0 0 1.5rem 0;
  font-family: var(--font-titulos) !important;
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: #222825;
}

.charte-editorial__texto {
  margin: 0 0 2.4rem 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.72;
  color: #4A554E;
  text-align: center;
}

.charte-editorial__cta-wrap {
  display: inline-flex;
}

.charte-enlace-chic {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-family: var(--font-ui) !important;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #222825;
  text-decoration: none;
  transition: color 300ms ease;
}

.charte-enlace-chic::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: #222825;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 300ms ease;
}

.charte-enlace-chic:hover {
  color: #6A4858;
}

.charte-enlace-chic:hover::after {
  transform: scaleX(0.85);
  background-color: #6A4858;
}


/* =========================================================
   TEXT-MASKING REVEAL: PISTA AMPLIA Y FÍSICA PESADA EDITORIAL
   ========================================================= */

.seccion-text-mask-reveal {
  position: relative;
  z-index: 6;
  width: 100vw;
  /* Pista amplia de 380vh para interacción deliberada y calmada */
  height: 380vh;
  margin-top: 0;
  background-color: transparent !important;
}

.text-mask__sticky-viewport {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F2F5F3;
}

/* Lienzo centrado con proporción inicial reposada */
.text-mask__lienzo {
  position: absolute;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
  transform-origin: center center;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(18, 22, 20, 0.16);
  will-change: transform, border-radius;
}

.text-mask__imagen-interior {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo para conferir profundidad al espacio negativo */
.text-mask__velo-foto {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(18, 22, 20, 0.35) 0%, rgba(18, 22, 20, 0.65) 100%);
  z-index: 2;
  opacity: 0;
  will-change: opacity;
}

/* Capa SVG con letras de corte */
.text-mask__svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

#mask-svg-rect {
  will-change: opacity;
}

.mask-svg__texto-gigante {
  font-family: var(--font-titulos) !important;
  font-size: clamp(3.4rem, 8.2vw, 10rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: #000000;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Revelación del poema y botón */
.text-mask__revelacion-centro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  box-sizing: border-box;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  pointer-events: none;
  will-change: opacity, transform;
}

.text-mask__poeme-block {
  max-width: 840px;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin-bottom: 3.4rem;
}

.text-mask__poeme-vers {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.15rem, 1.55vw, 1.48rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: #F7F6F3;
}

.text-mask__cta-wrap {
  display: inline-flex;
}

/* Botón idéntico al de La Charte, con reseteo de botón nativo y línea interactiva */
.charte-enlace-chic--cover {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 0 4px 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #F7F6F3 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.charte-enlace-chic--cover::after {
  background-color: #F7F6F3 !important;
  height: 1.5px !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.charte-enlace-chic--cover:hover {
  color: #DABCD3 !important;
  text-shadow: 0 2px 16px rgba(218, 188, 211, 0.45);
}

.charte-enlace-chic--cover:hover::after {
  background-color: #DABCD3 !important;
}

/* =========================================================
   III. LA TRACE : PROPORCIÓN 64% / 36% A SANGRE TOTAL
   ========================================================= */

/* Contenedor a sangre completa: 0 margen lateral y ancho al 100% */
.trace-asymetrique-layout {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  /* 64% exacto a la izquierda para la foto, 36% a la derecha para el texto */
  grid-template-columns: 64% 36%;
  column-gap: 0;
  align-items: stretch;
}

.trace-col-media {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  perspective: 1400px; /* Habilita el cálculo del espacio tridimensional */
}

.trace-media-card {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: clamp(1750px, 290vh, 3200px);
  position: relative;
  overflow: hidden;
  background-color: #E2E8E4;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
  will-change: transform;
  /* Transición amortiguada para cuando el cursor abandona la foto */
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.trace-media__img {
  display: block !important;
  position: absolute;
  top: -8%;
  left: 0;
  width: 100% !important;
  height: 116% !important; /* Margen extra de recorrido vertical */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none; /* Permite que el contenedor capture los eventos del mouse de forma fluida */
}

.trace-media-card:hover .trace-media__img {
  transform: scale(1.015);
}

/* 2. COLUMNA DERECHA: El 36% restante con respiro editorial interno */
.trace-col-sidebar {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* Margen interno para que el texto respire cómodamente dentro de su 36% */
  padding: 0 clamp(2.5rem, 4.5vw, 5rem);
}

/* Encabezado fijo superior: "ANTHOLOGIES" */
.trace-header-pin {
  position: sticky;
  top: 14vh;
  z-index: 2;
  margin-bottom: 25rem;
}

.trace-header__label {
  display: inline-block;
  font-family: var(--font-titulos) !important;
  font-size: clamp(0.95rem, 1.15vw, 1.18rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #222825;
}

.trace-narrative-box {
  position: sticky;
  top: 44vh;
  z-index: 2;
  /* Adelantamos su llegada a 75vh para que se congele mientras la foto sigue rodando */
  margin-top: 90vh;
  max-width: 38ch;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* =========================================================
   BLOQUE CONTINUO (ESTILO LA CHARTE)
   ========================================================= */
.seccion-charte-continuo--essais {
  margin-top: 200px !important;
  margin-bottom: 200px !important;
  border-top: 1.8px solid rgba(34, 40, 37, 0.12) !important;
  border-bottom: 1.8px solid rgba(34, 40, 37, 0.12) !important;
}

.btn-abrir-pantalla-essais {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  padding: 0 0 3px 0 !important;
}

/* =========================================================
   PANTALLA DE LOS ENSAYOS (MODAL TAKEOVER A PANTALLA COMPLETA)
   ========================================================= */
.seccion-ressources--essais-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  z-index: 650 !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #F2F5F3 !important;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 450ms ease;
}

.seccion-ressources--essais-modal.essais-ouvert {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.essais-modal-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4vh 4vw 6vh 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

.essais-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

.departement-portada--essais-modal {
  text-align: center;
  margin: 0 0 2.8rem 0 !important;
}

.departement-portada--essais-modal .departement-titulo {
  font-family: var(--font-lectura) !important;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 500;
  color: #222825;
}

.essais-editorial-layout {
  display: flex;
  align-items: flex-start;
  gap: 3.2rem;
  width: 100%;
  box-sizing: border-box;
}

/* --- COLUMNA IZQUIERDA (55%): ÍNDICE EDITORIAL --- */
.essais-index-col {
  flex: 0 0 calc(55% - 1.6rem);
  width: calc(55% - 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(69, 86, 77, 0.16);
}

.essai-ligne-item {
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(69, 86, 77, 0.16);
  padding: 1.85rem 1.4rem 1.95rem 0.6rem;
  cursor: pointer;
  transition: padding-left 350ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 350ms ease;
}

.essai-ligne-item:hover,
.essai-ligne-item.activo {
  background-color: rgba(255, 255, 255, 0.4);
  padding-left: 1.2rem;
}

.essai-ligne-item__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.65rem;
}

.essai-ligne-item__num {
  font-family: var(--font-tecnica) !important;
  font-size: 0.76rem;
  font-weight: 600;
  color: #45564D;
  letter-spacing: 0.14em;
}

.essai-ligne-item__tag {
  font-family: var(--font-ui) !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7A8880;
  transition: color 300ms ease;
}

.essai-ligne-item:hover .essai-ligne-item__tag,
.essai-ligne-item.activo .essai-ligne-item__tag {
  color: #45564D;
}

.essai-ligne-item__titre {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: clamp(1.06rem, 1.22vw, 1.22rem);
  font-weight: 500;
  line-height: 1.44;
  letter-spacing: 0.01em;
  color: #46534C;
  transition: color 300ms ease;
}

.essai-ligne-item:hover .essai-ligne-item__titre,
.essai-ligne-item.activo .essai-ligne-item__titre {
  color: #1F2722;
}

.essai-ligne-item__filet {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: #45564D;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.essai-ligne-item:hover .essai-ligne-item__filet,
.essai-ligne-item.activo .essai-ligne-item__filet {
  transform: scaleX(1);
}

/* --- COLUMNA DERECHA (45% / 85VH): ATRIL CON BOTÓN LIRE --- */
.essais-featured-col {
  flex: 0 0 calc(45% - 1.6rem);
  width: calc(45% - 1.6rem);
  position: sticky;
  top: 1rem;
  height: 80vh;
  max-height: 80vh;
  box-sizing: border-box;
}

.essai-featured-card {
  height: 100%;
  box-sizing: border-box;
  background: #FAFBF9;
  border: 1px solid rgba(69, 86, 77, 0.16);
  border-radius: 2px;
  padding: clamp(2.2rem, 3.5vh, 2.8rem) clamp(2rem, 2.6vw, 2.8rem);
  box-shadow: 0 20px 48px rgba(34, 40, 37, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.essai-featured-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(69, 86, 77, 0.12);
  flex-shrink: 0;
}

.essai-featured-card__cahier {
  font-family: var(--font-tecnica) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6A4858;
}

.essai-featured-card__domaine {
  font-family: var(--font-ui) !important;
  font-size: 0.74rem;
  font-weight: 500;
  color: #728078;
}

.essai-featured-card__centre {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 2.5vh, 2.2rem);
  margin: auto 0;
  padding: 0.8rem 0;
}

.essai-featured-card__titre {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.015em;
  color: #222825;
}

.essai-featured-card__incipit {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-style: italic;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.76;
  color: #4A554E;
  padding-left: 1.4rem;
  border-left: 1.5px solid rgba(106, 72, 88, 0.35);
}

.essai-featured-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(69, 86, 77, 0.12);
  flex-shrink: 0;
}

.essai-featured-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.essai-featured-card__label-auteur {
  font-family: var(--font-tecnica) !important;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8C867E;
}

.essai-featured-card__nom-auteur {
  font-family: var(--font-ui) !important;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #222825;
}

.essai-featured-card__cta-wrap {
  display: flex;
  align-items: flex-end;
}

.essai-featured-card .btn-ouvrir-salon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 2px 0 !important;
  cursor: pointer;
  width: auto !important;
}

.essai-featured-card .charte-enlace-chic {
  font-size: 0.84rem !important;
  letter-spacing: 0.2em !important;
  color: #222825 !important;
}

.essai-featured-card .charte-enlace-chic::after {
  background-color: #222825 !important;
  height: 1.5px !important;
}

.essai-featured-card .charte-enlace-chic:hover {
  color: #6A4858 !important;
}

.essai-featured-card .charte-enlace-chic:hover::after {
  background-color: #6A4858 !important;
}

/* =========================================================
   PHOTOGRAPHIE ÉDITORIALE : LECTURE ORIGINES (PLEIN ÉCRAN TOTAL)
   ========================================================= */
.seccion-cabinet-media {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #F2F5F3;
  overflow: hidden;
  box-sizing: border-box;
}

.cabinet-media__frame {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.cabinet-media__img {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  /* Sin recortar: muestra la fotografía completa con sus proporciones originales */
  object-fit: contain; 
}

/* =========================================================
   INTRODUCCIÓN EDITORIAL: TRAITÉS DE RÉFÉRENCE
   ========================================================= */
.seccion-traites-intro {
  position: relative;
  width: 100%;
  background-color: #F2F5F3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 6vh, 5rem) 2rem clamp(4rem, 8vh, 6rem) 2rem;
  box-sizing: border-box;
}

.traites-intro-block {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.traites-intro__titulo {
  margin: 0 0 1.6rem 0;
  font-family: var(--font-lectura) !important; /* Título de 2.º orden idéntico a La Charte */
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.12;
  color: #222825;
}

.traites-intro__poeme {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.traites-intro__vers {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-size: clamp(1.08rem, 1.35vw, 1.26rem);
  font-weight: 400;
  line-height: 1.76;
  letter-spacing: 0.015em;
  color: #38453D;
  text-align: center;
}

/* Botón Feuilleter */
.traites-intro__cta-wrap {
  display: inline-flex;
  margin-top: 2.4rem;
}

.btn-feuilleter-biblio {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer;
  padding: 0 0 3px 0 !important;
}

/* =========================================================
   DESPLIEGUE DESDE ARRIBA: CABINET BIBLIOGRAPHIQUE
   (Sin contenedor visible, 0px de espacio inicial, desenrollado suave)
   ========================================================= */
.seccion-biblio-desplegable {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  clip-path: inset(0 0 100% 0);
  transition:
    grid-template-rows 950ms cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 950ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 650ms ease,
    padding 950ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 950ms;
  will-change: grid-template-rows, clip-path, opacity;
}

.biblio-despliegue-inner {
  min-height: 0;
  overflow: hidden;
}

/* Estado al dar clic en Feuilleter: se desenrolla hacia abajo */
.seccion-biblio-desplegable.desplegado {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0% 0);
  padding-top: clamp(2rem, 4vh, 3.5rem) !important;
  padding-bottom: clamp(6rem, 10vh, 8.5rem) !important;
}

/* =========================================================
   DÉFILÉ ÉDITORIAL : LECTURE CONTINUE (ESTILO MAISON MARGIELA)
   ========================================================= */

.defile-editorial {
  position: relative;
  width: 100%;
  background-color: #F7F6F3;
  color: #242325;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  z-index: 10;
}

.defile-item {
  position: relative;
  width: 100%;
  max-width: 1600px;
  min-height: 100vh; /* Otorga un alto desahogado para que no haya saltos bruscos entre fotos */
  margin: 0 auto;
  padding: 0 clamp(2rem, 5vw, 6rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44% 56%;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}

.defile-item:last-child {
  margin-bottom: 0;
}

.defile-col-texte {
  position: relative;
  height: 100%;
  align-self: stretch;
  max-width: 560px;
  box-sizing: border-box;
  padding: 2.2cm 0 0 0;
  /* Máscara degradada: el texto se desvanece suavemente antes de tocar el logo del menú */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 2.6cm, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 2.6cm, black 100%);
}

/* Columna Izquierda: Acompaña la altura de la foto */
.defile-col-texte {
  position: relative;
  height: 100%;
  align-self: stretch;
  max-width: 560px;
  box-sizing: border-box;
  padding: 2.2cm 0 0 0;
}

/* El texto sube para quedar inmediatamente después del logo */
.defile-item--hero .defile-col-texte {
  padding-top: 2.2cm;
}

/* El texto se suspende suavemente a esa misma altura al hacer scroll */
.defile-texte-sticky {
  position: sticky;
  top: 2.2cm;
  display: flex;
  flex-direction: column;
}

.defile-eyebrow {
  display: inline-block;
  font-family: var(--font-tecnica), monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8C867E;
  margin-bottom: 1.2rem;
}

/* Título de Primer Nivel H1 (Futura/Jost en color #6a4858) */
.defile-titre-principal {
  margin: 0 0 1.8rem 0;
  font-family: var(--font-titulos), sans-serif;
  font-size: clamp(2.3rem, 3.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.14;
  color: #6a4858;
}

/* Títulos de Capítulo H2 (Rimay & Lingua) */
.defile-titre-chapitre {
  margin: 0 0 1.5rem 0;
  font-family: var(--font-titulos), sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #242325;
}

/* Cursor de máquina de escribir */
.typewriter-curseur {
  display: inline-block;
  width: 2px;
  height: 0.88em;
  margin-left: 6px;
  vertical-align: -0.06em;
  background-color: #6a4858;
  opacity: 0;
}

.typewriter-curseur.activo {
  opacity: 1;
  animation: parpadeoCurseurMaison 650ms steps(2, start) infinite;
}

@keyframes parpadeoCurseurMaison {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.defile-corps-texte {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52ch; /* Se alarga el renglón para que entren palabras completas */
}

.defile-corps-texte p {
  margin: 0;
  font-family: var(--font-lectura), sans-serif;
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  font-weight: 400;
  line-height: 1.76;
  letter-spacing: 0.012em;
  color: #3A4D5C;
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
  hyphens: none; /* PROHÍBE cortar palabras con guiones */
}

.defile-corps-texte--manifeste {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.defile-corps-texte--manifeste.manifeste-revelado {
  opacity: 1;
  transform: translateY(0);
}

/* Columna Derecha: Fotos continuas sin cortes */
.defile-col-media {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.defile-media-cadre {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Caída sutil al aperturar la página */
.defile-media-cadre--hero {
  opacity: 0;
  transform: translateY(-26px);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1100ms ease;
}

.defile-media-cadre--hero.foto-asentada {
  opacity: 1;
  transform: translateY(0);
}

/* La imagen ocupa el 100% del ancho de su columna y crece a todo su largo sin sombra */
.defile-media-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  box-shadow: none; /* Cero sombras para que el ensamble entre fotos sea continuo y fluido */
}

/* Responsivo en móviles */
@media (max-width: 960px) {
  .defile-item {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
  .defile-col-media {
    order: 1;
  }
  .defile-col-texte {
    order: 2;
    position: static;
    max-width: 100%;
    margin-top: 2rem;
  }
}

/* =========================================================
   00. PORTADA MADRE : EFFET VORTEX / SPIRALE (AL CRUDO)
   ========================================================= */

/* Pista de scroll que da el tiempo para la rotación y el zoom */
.portada-madre-track {
  position: relative;
  width: 100vw;
  height: 250vh;
  margin: 0;
  padding: 0;
  background-color: #0A0A0B;
  z-index: 15;
}

/* Escenario fijo pegajoso de 100vh: ALINEADO A LA IZQUIERDA */
.portada-madre-sticky {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: #0A0A0B;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Texto anclado al lado izquierdo */
}

/* Viewport con perspectiva 3D */
.portada-madre__media-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 1400px;
  z-index: 1;
}

/* Envoltorio del vórtice: rotación y zoom en espiral */
.portada-madre__espiral-wrap {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  transform-origin: 50% 50%;
  will-change: transform;
  transform: scale(1) rotate(0deg);
}

.portada-madre__img-cruda {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* El filtro de revelado que atenúa la luz dura de la piedra y baja el contraste */
  filter: contrast(0.78) brightness(0.72) saturate(0.92) !important;
  user-select: none;
  pointer-events: none;
}

/* Área de lectura desplazada hacia la derecha sobre el umbral de luz */
.portada-madre__lectura {
  position: relative;
  z-index: 5;
  width: auto;
  max-width: min(1100px, 85vw);
  /* Desplaza el inicio del bloque hacia la derecha para calzar exactamente con la sombra */
  padding-left: clamp(18rem, 30vw, 25rem);
  padding-right: 2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  will-change: opacity, transform;
}

.portada-madre__caja {
  display: flex;
  flex-direction: column;
  align-items: center; /* Alinea los elementos al centro del propio bloque */
  width: fit-content; /* Clave: la caja mide EXACTAMENTE lo que mide el texto Rimay Lingua */
  max-width: 100%;
}

/* Título de 1.er orden: Rimay Lingua */
.portada-madre__titulo-unico {
  margin: 0 0 clamp(1rem, 1.8vh, 1.6rem) 0;
  font-family: var(--font-titulos), sans-serif;
  font-size: clamp(3.8rem, 6.8vw, 7.8rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.portada-madre__titulo-unico .palabra-rimay {
  color: #f7f6f3;
}

/* «Lingua» con nitidez total sobre la pared texturizada */
.portada-madre__titulo-unico .palabra-lingua {
  color: #F7F6F3;
  /* Delineado microscópico de 0.6px que define los bordes sin verse grueso */
  -webkit-text-stroke: 0.6px rgba(18, 14, 16, 0.45);
  /* Difusión ambiental suave que separa la letra de las grietas de la piedra */
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 25px rgba(0, 0, 0, 0.40));
}

/* Título de 2.º orden: Haute école de langue */
.portada-madre__subtitulo-segundo {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-titulos), sans-serif;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.025em;
  color: #F7F6F3;
  /* Misma definición fina para la parte blanca del subtítulo */
  -webkit-text-stroke: 0.4px rgba(18, 14, 16, 0.40);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.60));
}


/* Indicador sutil de scroll abajo a la derecha */
.portada-madre__scroll-line-wrap {
  position: absolute;
  bottom: 2.2rem;
  right: 6%;
  z-index: 10;
  display: block;
  pointer-events: none;
}

.portada-madre__scroll-line {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, #F7F6F3 0%, rgba(247, 246, 243, 0.1) 100%);
  animation: respiracionScrollMadre 2.4s ease-in-out infinite;
}

@keyframes respiracionScrollMadre {
  0%, 100% { opacity: 0.2; transform: scaleY(0.7); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

@media (max-width: 960px) {
  .portada-madre-sticky {
    align-items: flex-end;
  }
  .portada-madre__lectura {
    max-width: 100%;
    padding: 3rem 1.8rem 5rem 1.8rem;
  }
  .portada-madre__titulo-unico {
    white-space: normal;
  }
}

/* =========================================================
   MENÚ INSTITUCIONAL UNIVERSAL (DISEÑO EXACTO "FORMATIONS")
   ========================================================= */

/* 1. Fondo de cristal oscuro idéntico a la captura */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 2.5cm;
  padding: 0 1.5cm;
  display: flex;
  align-items: center;
  background-color: rgba(18, 18, 18, 0.45) !important; /* Cristal oscuro */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 600ms ease,
              border-color 600ms ease,
              backdrop-filter 600ms ease;
  pointer-events: auto;
}

/* 2. Bloque de marca interactivo (Logo 100% blanco) */
.site-header .marca {
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header .marca__logo {
  width: 1.5cm;
  height: 1.5cm;
  object-fit: contain;
  filter: brightness(0) invert(1) !important; /* Logo blanco puro */
  transition: filter 600ms ease;
}

.site-header .marca__linea {
  width: 0.2mm;
  height: 1.5cm;
  margin: 0 0.4cm;
  background-color: rgba(255, 255, 255, 0.6) !important;
  transition: background-color 600ms ease;
}

.site-header .marca__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 1.5cm;
  font-family: var(--font-titulos), sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #FFFFFF !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: color 600ms ease, text-shadow 600ms ease;
}

/* 3. Navegación y Enlaces Blancos */
.site-header .menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  margin-left: 2cm;
  margin-right: 1.2cm;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 450ms ease, transform 450ms ease, visibility 450ms;
}

.site-header .menu__grupo {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .menu__grupo--izq { gap: 1.2cm; }
.site-header .menu__grupo--der { gap: 1cm; }

.site-header .menu a {
  position: relative;
  display: inline-block;
  font-family: var(--font-lectura), sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #FFFFFF !important;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px; /* Espacio exacto para la barrita */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  transition: color 400ms ease, text-shadow 400ms ease;
}

/* 4. Barrita activa gruesa y perfecta (Como en la foto) */
.site-header .menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.5px; /* Grosor idéntico al de la captura */
  background-color: #FFFFFF !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}

.site-header .menu a.menu__enlace--activo {
  font-weight: 600;
}

.site-header .menu a.menu__enlace--activo::after {
  transform: scaleX(1);
}

/* 5. Botón Admissions Ciruela */
.site-header .btn-admissions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35cm 0.9cm;
  border-radius: 4px;
  background-color: #6a4858 !important; /* Tono exacto de la captura */
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-family: var(--font-lectura), sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: background-color 400ms ease, opacity 450ms ease, transform 450ms ease;
}

.site-header .btn-admissions:hover {
  background-color: #8a5e73 !important;
}

/* =========================================================
   ESTADOS DINÁMICOS DEL MENÚ UNIVERSAL
   ========================================================= */

/* A. Modo retraído al scrollear (Solo queda el logo: desaparecen navegación, botón y selector de idioma) */
.site-header.menu-solo-marca:not(.menu-hover-activo) {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

.site-header.menu-solo-marca:not(.menu-hover-activo) .marca {
  pointer-events: auto !important;
}

.site-header.menu-solo-marca:not(.menu-hover-activo) .menu,
.site-header.menu-solo-marca:not(.menu-hover-activo) .btn-admissions,
.site-header.menu-solo-marca:not(.menu-hover-activo) .lang-switch-atelier {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

/* B. Apertura fluida al pasar el mouse por el logo (Se despliega todo el menú y permite mover el cursor por él) */
.site-header.menu-hover-activo {
  background-color: rgba(18, 18, 18, 0.65) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  pointer-events: auto !important;
}

.site-header.menu-hover-activo .menu,
.site-header.menu-hover-activo .btn-admissions,
.site-header.menu-hover-activo .lang-switch-atelier {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.site-header.menu-hover-activo .menu,
.site-header.menu-hover-activo .btn-admissions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* C. Adaptación automática sobre fondos de color claro */
.site-header.sobre-fondo-claro .marca__logo {
  filter: brightness(0) invert(16%) !important;
}

.site-header.sobre-fondo-claro .marca__linea {
  background-color: rgba(44, 47, 51, 0.55) !important;
}

.site-header.sobre-fondo-claro .marca__texto {
  color: #24282E !important;
  text-shadow: none !important;
}

.site-header.sobre-fondo-claro .menu a {
  color: #4A474D !important;
  text-shadow: none !important;
}

.site-header.sobre-fondo-claro .menu a.menu__enlace--activo {
  color: #3B4D5B !important;
}

.site-header.sobre-fondo-claro .menu a.menu__enlace--activo::after {
  background-color: #3B4D5B !important;
}

.site-header.sobre-fondo-claro.menu-hover-activo {
  background-color: rgba(243, 245, 247, 0.85) !important;
  border-bottom: 1px solid rgba(59, 77, 91, 0.12) !important;
}

/* Ocultamiento del menú al abrir ventanas emergentes */
.site-header.menu-oculto {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   BLINDAJE TIPOGRÁFICO TOTAL Y EXHAUSTIVO (4 NIVELES ESTRICTOS)
   Haute École de Langue · Rimay Lingua
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. NEUTRALIZACIÓN DE LA HERENCIA BASE
   -------------------------------------------------------------------------- */
html,
body,
body,
body.pagina-formations,
body.pagina-ressources {
  font-family: var(--font-lectura) !important;
}

/* --------------------------------------------------------------------------
   NIVEL 1 · TÍTULOS DE PRIMER ORDEN (Futura / Jost — --font-titulos)
   Uso exclusivo: Títulos de apertura, H1, cortes tipográficos y cabeceras madre
   -------------------------------------------------------------------------- */
.portada-madre__titulo-unico,
.portada-madre__titulo-unico .palabra-rimay,
.portada-madre__titulo-unico .palabra-lingua,
.defile-titre-principal,
.typewriter-texte,
.formations-hero__titulo,
.bibliotheque-hero-titulo__linea1,
.matiere-premiere__titulo,
.matiere-papier__titulo,
.ateliers-cover-titulo,
.fos-portada-titulo,
.droits-titulo-monumental,
.direction-cover__title,
.franco-titulo-echos,
.mask-svg__texto-gigante,
.portal-svg-principal text,
.monolito-card__sombra-nivel,
.cert-papier-titulo-impacto,
.seccion-texto h1,
.piliers-titulo {
  font-family: var(--font-titulos) !important;
}

/* --------------------------------------------------------------------------
   NIVEL 2 · TÍTULOS DE 2.º ORDEN Y LECTURA CONTINUA (Source Sans 3 — --font-lectura)
   Uso exclusivo: Capítulos secundarios, narrativa, poemas, citas y prosa continua
   -------------------------------------------------------------------------- */
/* Títulos secundarios y capítulos derivados */
.portada-madre__subtitulo-segundo,
.bibliotheque-hero-titulo__linea2,
.defile-titre-chapitre,
.charte-editorial__titulo,
.departement-titulo,
.departement-titulo--chrono,
.departement-portada--essais-modal .departement-titulo,
.droits-subtitulo-orden2,
.traites-intro__titulo,
.essais-intro__titulo,
.cahiers-editorial-intro h2,
.cert-titre-bloc,
.cert-tef-famille__titre,
.tiroir-modal__sous-titre,

/* Prosa reflexiva, narrativa, poemas y manifiestos */
.defile-corps-texte p,
.defile-corps-texte--manifeste p,
.general-editorial-extracto,
.cert-papier-frase-metodo,
.origines-spread__poema,
.origines-spread__poema p,
.charte-editorial__texto,
.text-mask__poeme-vers,
.cahiers-poeme__strophe,
.trace-narrative__p,
.essais-intro__texto,
.traites-intro__vers,
.fos-ovalo-texto,
.fos-linea-ovalo,
.franco-texto-echos p,
.frase-hemisferio,
.seccion-texto p,
.maison-texto,
.maison-texto__renglon,
.source-lista-items li,

/* Citas, definiciones y reflexiones */
.directeur-cita,
.tiroir-modal__definition,
.essai-featured-card__incipit,

/* Párrafos y descripciones de tarjetas, acordeones y modales */
.monolito-card__extracto,
.methode-card__desc,
.atelier-hover__text,
.atelier-hover__eval,
.ate-comp-list,
.ate-comp-list li,
.fos-prerequis-box,
.fos-prerequis-list,
.fos-prerequis-list li,
.fos-prerequis-note,
.conn-card__ex,
.contact-card__adresse,
.salon-lecture__texte,
.salon-lecture__texte p,
.codex-art-item__txt,
.sim-res-regla,
.sim-res-condicion,
.doci-verdict-box,
.oscilloscope-status,
.cert-tef-famille__indication {
  font-family: var(--font-lectura) !important;
}

.directeur-cita,
.tiroir-modal__definition,
.essai-featured-card__incipit,
.fos-prerequis-note {
  font-style: italic !important;
}

/* --------------------------------------------------------------------------
   NIVEL 3 · INTERFAZ, TÍTULOS DE FICHAS, BOTONES Y UI (Open Sauce One — --font-ui)
   Uso exclusivo: Botones, navegación, títulos de tarjetas/cursos, selectores y tags
   -------------------------------------------------------------------------- */
/* Menú institucional, marcas y navegación */
.site-header .marca__texto,
.site-header .menu a,
.caja-etudiant a,

/* Botones de acción, enlaces interactivos y llamadas a la acción */
.site-header .btn-admissions,
.btn-brochure-download,
.btn-brochure-txt,
.btn-editorial-rond,
.btn-editorial-rond__texto,
.btn-abrir-tiroir,
.btn-fermer-tiroir,
.btn-papier-esmerilado,
.btn-ateliers-flecha-der,
.btn-consulter-cursus-ate__txt,
.btn-fos-ver-detalles,
.btn-fos-fermer,
.btn-candidature-minimal,
.btn-candidature-monumental,
.btn-candidature-minimal-txt,
.btn-candidature-txt,
.charte-enlace-chic,
.charte-enlace-chic--cover,
.btn-abrir-pantalla-essais,
.btn-ouvrir-methode,
.btn-garder-luxe,
.btn-ouvrir-salon,
.btn-toggle-analyse,
.btn-feuilleter-biblio,
.btn-voir-direction,
.direction-cover__btn,
.btn-suivre-fil,
.btn-final-formations,
.btn-formations-verre,
.btn-toggle-contact,
.btn-fle-mode,
.doci-mode-btn,
.btn-mic-toggle,
.btn-carrusel,
.btn-fermer-chrono-x,
.salon-lecture__close,
.ateliers-cursus-modal__close,
.tiroir-sources__cerrar,
.btn-sources-vertical span,
.btn-portal-programmes,
.scroll-hint-indicator__texto,

/* Títulos de cursos, fichas, tarjetas y autores */
.monolito-card__nombre,
.cert-nom,
.atelier-card__titre,
.atelier-hover__header,
.ate-cursus-section__nom,
.ate-td-ue,
.cert-ue-nom,
.fos-spec-btn__nom,
.fos-prog-etape__title,
.fos-acordeon-trigger__titre,
.methode-card__titre,
.essai-featured-card__titre,
.essai-ligne-item__titre,
.salon-lecture__titre,
.placard-titre,
.placard-auteur,
.conn-card__mot,
.frais-inscription-showcase__titre,
.contact-card__titre,
.contact-card__email,
.lab-box-title,
.lab-inst-btn__nom,
.directeur-nombre,
.salon-auteur-nom,
.cont-ciudad,
.archipel-leyenda-texto,
.meridien-card__ciudad,
.tiroir-sources__titulo,
.oscilloscope-title,
.codex-visor-header__titre,
.sim-res-plazo-grande,
.ateliers-cursus-modal__titre,

/* Etiquetas de interfaz, badges, pestañas y campos de formulario */
.monolito-card__tag,
.general-editorial-tag,
.formations-hero__subtitulo,
.cert-badge-categorie,
.ate-cursus-section__badge,
.frais-inscription-showcase__badge,
.frais-inscription-showcase__desc,
.droits-aclaracion-usd,
.chrono-estacion-btn__nom,
.chrono-sec-pill__label,
.chrono-nodo-card__etape,
.trace-header__label,
.essai-ligne-item__tag,
.essai-featured-card__domaine,
.biblio-pill,
.ate-filter-pill,
.carto-pill,
.corpus-pill,
.prosodie-toggle,
.directeur-cargo,
.salon-auteur-cargo,
.doci-select-group,
.doci-field label,
.doci-select,
.doci-textarea,
.doci-input,
.cartographe-input,
.oeuvres-titre,
.piliers-subtitulo,
.piliers-titulo-continente,
.tiroir-sources__eyebrow,
.source-bloque-titulo,
.ateliers-cursus-modal__eyebrow,
.salon-lecture__eyebrow,
.salon-sidebar-label,
.lab-box-tag,
.lab-box-sub,
.sim-res-badge,
.portal-svg-secundario text {
  font-family: var(--font-ui) !important;
}

/* ---------------------------------------------------------
   NIVEL 4 · DATOS TÉCNICOS, CIFRAS, TABLAS Y CÓDIGOS (Space Grotesk — --font-tecnica)
   Uso exclusivo: Tablas, números, precios, volúmenes de horas, códigos y acústica
   --------------------------------------------------------- */
/* Encabezados y celdas estructurales de tablas */
.tiroir-table th,
.cert-ue-cuadro__head,
.cert-ue-cuadro__head span,
.ate-cursus-table th,
.fos-prog-table th,
.tarif-editorial-table th,
.th-group-center,
.tr-subheaders-pct th,

/* Códigos de asignaturas y unidades de enseñanza */
.tiroir-table td:first-child,
.tiroir-table td strong,
.cert-ue-code,
.ate-td-code,
.fos-code-cell,

/* Horas, duraciones y cómputos temporales */
.monolito-card__horas,
.cert-duree,
.cert-ue-hrs,
.ate-td-temps,
.temps-tag,
.fos-hrs-cell,
.ate-cursus-section__total,
.horaire-pill,

/* Precios, balances y números tabulares cuantitativos */
.frais-inscription-showcase__prix,
.tarif-editorial-table td:not(:first-child),
.td-highlight,
.td-pct,
.td-parcours-prix-unique,
.balance-linea,
.monolito-card__balance,
.cert-pond-linea strong,

/* Celdas de matrices y variantes de exámenes TEF */
.tef-comp-cell,
.tef-comp-sigle,
.tef-comp-libelle,
.tef-ligne__nom,
.tef-ligne__cible,

/* Índices numéricos, badges de metadatos, fechas y frecuencias */
.essai-ligne-item__num,
.oeuvres-num,
.methode-card__indice,
.lab-inst-btn__num,
.formant-badge,
.phoneme-fiche__symbole,
.chrono-nodo-card__fechas,
.chrono-sec-pill__code,
.chrono-estacion-btn__meses,
.chrono-sec-definicion,
.essai-featured-card__cahier,
.essai-featured-card__label-auteur,
.placard-cat,
.placard-editeur,
.conn-card__mode,
.defile-eyebrow,
.dial-nodo__romano,
.hud-tag,
.hud-estado,
.meridien-card__indice,
.meridien-card__cont,
.source-lista-items strong,
.codex-art-item__num,
.codex-art-item__kpi,
.codex-visor-header__eyebrow,

/* Relojes y husos horarios en vivo */
.meridien-reloj,
.franco-reloj,

/* Laboratorio acústico, fonética y métricas docimológicas */
.trapeze-axis-label,
.phoneme-node text,
.doci-metric-item__val,
.doci-metric-item__lbl,
.prosodie-phrase-render,
.salon-concept-tag,
.mark-liaison-ob,
.mark-liaison-int,
.mark-ecaduc,
.conn-highlight {
  font-family: var(--font-tecnica) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Celdas de texto descriptivo y explicativo dentro de tablas (lectura óptima) */
.tiroir-table td:not(:first-child),
.ate-cursus-table td:last-child,
.fos-prog-table td:nth-child(2),
.fos-prog-table td:last-child {
  font-family: var(--font-lectura) !important;
}

/* =========================================================
   ESTRUCTURA Y DISEÑO DEFINITIVO: DROITS DE SCOLARITÉ
   ========================================================= */

/* 1. Visibilidad y alternancia entre Pago al Contado y Diferido */
.fle-table-view {
  display: none !important;
}

.fle-table-view.activo {
  display: block !important;
}

/* 2. Contenedor de lujo equilibrado (mismo tamaño y presencia en todas las cortinas) */
.droits-slide__contenedor-lujo {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem !important;
  padding: 1vh 0 !important;
  box-sizing: border-box;
}

.droits-bloque-seccion {
  display: flex;
  flex-direction: column;
  gap: 0.4rem !important;
}

/* 3. Disposición horizontal compacta de Frais d'inscription ($45) */
.frais-inscription-showcase {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  padding: 0.75rem 1.8rem !important;
  margin-bottom: 0 !important;
}

.frais-inscription-showcase__left {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.frais-inscription-showcase__badge {
  display: inline-block !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(247, 246, 243, 0.6) !important;
}

.frais-inscription-showcase__titre {
  margin: 0 !important;
  font-size: 1.2rem !important;
  color: #F7F6F3 !important;
}

.frais-inscription-showcase__desc {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: rgba(247, 246, 243, 0.65) !important;
}

.frais-inscription-showcase__right {
  flex-shrink: 0 !important;
  padding: 0.55rem 1.4rem !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
}

.frais-inscription-showcase__prix {
  font-size: 1.5rem !important;
  font-family: var(--font-tecnica) !important;
  color: #F7F6F3 !important;
  font-weight: 600 !important;
}

/* 4. Conmutador y tablas de tarifas base (Cortinas 2 y 3: Cristal Oscuro) */
.fle-switch-bar {
  display: flex !important;
  gap: 0.65rem !important;
}

.btn-fle-mode {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(247, 246, 243, 0.7) !important;
  font-family: var(--font-ui) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: all 260ms ease;
}

.btn-fle-mode:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #F7F6F3 !important;
}

.btn-fle-mode.activo {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #F7F6F3 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.droits-inscription-lujo,
.droits-tabla-cristal {
  background: rgba(20, 22, 25, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  border-radius: 6px !important;
  padding: 0.85rem 1.8rem !important;
}

.droits-subtitulo-orden2 {
  font-family: var(--font-lectura) !important;
  font-weight: 500 !important;
  color: #F7F6F3 !important;
  margin: 0 !important;
}

.droits-aclaracion-usd {
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  color: rgba(247, 246, 243, 0.65) !important;
  margin: 0.15rem 0 0 0 !important;
}

.droits-tabla-cristal .tarif-editorial-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
}

.droits-tabla-cristal .tarif-editorial-table th {
  font-family: var(--font-tecnica) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.15em !important;
  color: rgba(247, 246, 243, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: transparent !important;
  padding: 0.55rem 0.9rem !important;
}

.droits-tabla-cristal .tarif-editorial-table td {
  font-family: var(--font-lectura) !important;
  font-size: 0.92rem !important;
  color: #F7F6F3 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0.52rem 0.9rem !important;
}

.droits-tabla-cristal .tarif-editorial-table td:not(:first-child),
.td-highlight,
.td-pct,
.td-parcours-prix-unique {
  font-family: var(--font-tecnica) !important;
  font-variant-numeric: tabular-nums !important;
  color: #F7F6F3 !important;
  font-weight: 500 !important;
}

.th-group-center,
.tr-subheaders-pct th,
.td-pct,
.td-parcours-prix-unique {
  text-align: center !important;
}

.tr-parcours-special,
.tr-parcours-global {
  background: rgba(255, 255, 255, 0.05) !important;
}

.tr-parcours-special td,
.tr-parcours-global td {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.droits-tabla-cristal .tarif-editorial-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* 5. Cristal Esmerilado Gris Translúcido (Cortina 4: Ateliers y Cortina 5: FOS) */
.droits-slide-cortina:nth-of-type(4) .droits-tabla-cristal,
.droits-slide-cortina:nth-of-type(5) .droits-tabla-cristal {
  background: rgba(220, 225, 232, 0.28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-subtitulo-orden2,
.droits-slide-cortina:nth-of-type(5) .droits-subtitulo-orden2 {
  color: #1E242B !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-aclaracion-usd,
.droits-slide-cortina:nth-of-type(5) .droits-aclaracion-usd {
  color: rgba(30, 36, 43, 0.7) !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-tabla-cristal .tarif-editorial-table th,
.droits-slide-cortina:nth-of-type(5) .droits-tabla-cristal .tarif-editorial-table th {
  color: rgba(30, 36, 45, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-tabla-cristal .tarif-editorial-table td,
.droits-slide-cortina:nth-of-type(5) .droits-tabla-cristal .tarif-editorial-table td {
  color: #161C23 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-tabla-cristal .tarif-editorial-table td:not(:first-child),
.droits-slide-cortina:nth-of-type(5) .droits-tabla-cristal .tarif-editorial-table td:not(:first-child),
.droits-slide-cortina:nth-of-type(4) .td-highlight,
.droits-slide-cortina:nth-of-type(5) .td-highlight,
.droits-slide-cortina:nth-of-type(4) .td-parcours-prix-unique,
.droits-slide-cortina:nth-of-type(5) .td-parcours-prix-unique {
  color: #161C23 !important;
  font-weight: 600 !important;
}

.droits-slide-cortina:nth-of-type(4) .droits-tabla-cristal .tarif-editorial-table tbody tr:hover td,
.droits-slide-cortina:nth-of-type(5) .droits-tabla-cristal .tarif-editorial-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.32) !important;
}

/* 6. Cortina Final FOS y Botón Minimalista sin desgarro */
.droits-slide-cortina--ultima {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.formations-candidature-cta-minimal {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.btn-candidature-minimal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 2.2rem;
  background: rgba(230, 233, 238, 0.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 2px;
  color: #1E242B !important;
  font-family: var(--font-ui) !important;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-candidature-minimal:hover {
  background: rgba(230, 233, 238, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  color: #11151A !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.btn-candidature-minimal-txt {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ESTABILIZACIÓN VISUAL DE "LE TEMPS"
   ========================================================= */
.text-mask__lienzo {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 120ms ease-out;
}

.mask-svg__texto-gigante {
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
/* FIX DEFINITIVO BOTONES BIBLIOTHEQUE Y LE TEMPS */
.text-mask__revelacion-centro {
  pointer-events: auto !important;
}
.text-mask__revelacion-centro .text-mask__cta-wrap,
.text-mask__revelacion-centro #btn-decouvrir-cover,
#btn-ouvrir-pantalla-essais,
#btn-feuilleter-biblio {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9999 !important;
  cursor: pointer !important;
}
.seccion-biblio-desplegable {
  pointer-events: none;
}
.seccion-biblio-desplegable.desplegado {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.biblio-pill,
.oeuvres-menu-item,
.livre-objet,
.placard-buy-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Asegura que el lienzo de Le temps no tape */
.text-mask__lienzo {
  opacity: 1 !important;
  visibility: visible !important;
}

#btn-feuilleter-biblio, #btn-decouvrir-cover, #btn-ouvrir-pantalla-essais {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9999 !important;
  cursor: pointer !important;
}
.seccion-biblio-desplegable.desplegado {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.text-mask__revelacion-centro {
  pointer-events: auto !important;
}

/* =========================================================
   BLOQUE MAISON: PUZZLE ESTÁTICO, CORTINA DIRECTION Y FRANCOPHONIE
   ========================================================= */

.bloque-escena-maison {
  position: relative;
  width: 100vw;
  height: 240vh; /* 160vh de pausa para el puzzle + 160vh de pausa para La Direction */
  background-color: #F7F6F3;
  margin: 0;
  padding: 0;
}

/* =========================================================
   ROMPECABEZAS ENSAMBLADO (ESTRUCTURA GEOMÉTRICA EXACTA)
   ========================================================= */
.seccion-rompecabezas-estatica {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #F7F6F3;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Anillos y ejes sutiles de fondo */
.rompecabezas-campo-tecnico {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campo-anillo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(106, 72, 88, 0.09);
}

.campo-anillo--1 {
  width: clamp(340px, 38vw, 560px);
  height: clamp(340px, 38vw, 560px);
}

.campo-anillo--2 {
  width: clamp(520px, 58vw, 860px);
  height: clamp(520px, 58vw, 860px);
  border-style: dashed;
  border-color: rgba(140, 134, 126, 0.12);
}

.campo-eje-h {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(140, 134, 126, 0.14) 50%, transparent 100%);
}

.campo-eje-v {
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(106, 72, 88, 0.14) 50%, transparent 100%);
}

/* Marcas de agua tenues a los costados: Oralité y Structure */
.rompecabezas-marcas-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4vw;
  box-sizing: border-box;
}

.marca-agua {
  font-family: var(--font-tecnica), monospace;
  font-size: clamp(4rem, 11vw, 13rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #242325;
  opacity: 0.035;
  line-height: 1;
  user-select: none;
}

/* Contenedor central del puzzle */
.rompecabezas-contenedor {
  position: relative;
  width: 100%;
  max-width: 1100px;
  padding: 0 1.5cm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cm;
  z-index: 2;
}

.rompecabezas-hud-top {
  display: none !important;
}

/* Envoltorio con la escala y el encastre de las dos piezas */
.rompecabezas-piezas-wrap {
  --tam-pieza: clamp(235px, 22vw, 305px);
  --ancho-rimay: calc(var(--tam-pieza) * (230 / 272));
  --ancho-lingua: var(--tam-pieza);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.pieza-rompecabezas--rimay {
  width: var(--ancho-rimay);
  aspect-ratio: 230 / 272;
  flex: none;
  position: relative;
  z-index: 2;
  transform: none !important;
  opacity: 1 !important;
}

.pieza-rompecabezas--lingua {
  width: var(--ancho-lingua);
  aspect-ratio: 272 / 272;
  flex: none;
  position: relative;
  margin-left: calc(var(--ancho-lingua) * (-72 / 272)); /* Encastre perfecto */
  z-index: 2;
  transform: none !important;
  opacity: 1 !important;
}

.pieza-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(36, 35, 37, 0.05));
}

.pieza-borde {
  fill: rgba(247, 246, 243, 0.6);
  stroke-width: 1.5mm;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pieza-borde--rimay  { stroke: #8c867e; fill: rgba(140, 134, 126, 0.08) !important; }
.pieza-borde--lingua { stroke: #6a4858; fill: rgba(106, 72, 88, 0.08) !important; }

.pieza-texto {
  font-family: var(--font-titulos), sans-serif;
  font-style: normal;
  font-size: 31px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-anchor: middle;
  dominant-baseline: central;
}

.pieza-texto--rimay  { fill: #8c867e; }
.pieza-texto--lingua { fill: #6a4858; }

/* Frase inferior */
.rompecabezas-frase-wrap {
  width: 100%;
  max-width: 980px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.frase-hemisferio {
  display: inline-block;
  font-family: var(--font-lectura), sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.15vw, 2.15rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  opacity: 1 !important;
  transform: none !important;
}

.frase-hemisferio--voz { color: #8c867e !important; }
.frase-hemisferio--estructura { color: #6a4858 !important; }

.linea-transicion-full-wrap {
  position: absolute;
  top: 100%;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 2px;
  margin-top: 0.6cm;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.linea-transicion-full {
  width: 100% !important;
  height: 2px;
  background-color: #6a4858;
  box-shadow: 0 0 18px rgba(106, 72, 88, 0.45);
}

.seccion-direction-cortina {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #F7F6F3;
  box-shadow: 0 -25px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.direction-cover {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.direction-cover__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.direction-cover__logo {
  width: clamp(70px, 6vw, 95px);
  height: auto;
  opacity: 1 !important;
  transform: none !important;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.4));
}

.direction-cover__title {
  margin: 0;
  font-family: var(--font-titulos);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none !important;
  cursor: default !important;
  user-select: none;
  opacity: 1 !important;
  transform: none !important;
}

.direction-cover__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 14px 0 !important;
  color: #FFFFFF !important;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  position: relative !important;
  cursor: pointer !important;
  z-index: 50 !important;
  backdrop-filter: none !important;
}
.direction-cover__btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.85);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
}
.direction-cover__btn:hover::after {
  transform: scaleX(1.15);
  background: #FFFFFF;
}


.direction-revealed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #F7F6F3;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transform: translateY(105%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999999 !important;
  opacity: 1;
  pointer-events: none;
}
.direction-revealed.visible {
  transform: translateY(0);
  pointer-events: auto !important;
}
.direction-rev-left {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
  background: #EAE5E1;
}
.direction-rev-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.direction-revealed.visible .direction-rev-left img {
  transform: scale(1);
}
.direction-rev-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vw 5vw;
  gap: 2.4rem;
  background: #F7F6F3;
}
.directeur-firma-svg-contenedor {
  width: min(340px, 28vw);
  height: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
.direction-revealed.visible .directeur-firma-svg-contenedor {
  opacity: 1;
  transform: translateY(0);
}
.directeur-firma-object {
  width: 100%;
  height: auto;
  display: block;
}
.directeur-cita {
  margin: 0;
  font-family: var(--font-lectura) !important;
  font-style: italic !important;
  font-size: clamp(1.25rem, 1.6vw, 1.65rem) !important;
  line-height: 1.6 !important;
  color: #242325 !important;
  max-width: 28em;
}
.directeur-credenciales {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(106, 72, 88, 0.18);
  max-width: 28em;
}
.directeur-nombre {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #6a4858 !important;
  letter-spacing: 0.02em;
}
.directeur-cargo {
  margin: 0;
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  color: #8c867e !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
}
.close-directeur {
  position: absolute;
  top: 2.2rem;
  right: 2.5rem;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.close-directeur:hover { transform: rotate(90deg); }
.close-directeur span {
  position: absolute;
  width: 26px;
  height: 1.2px;
  background-color: #242325;
}
.close-directeur span:first-child { transform: rotate(45deg); }
.close-directeur span:last-child { transform: rotate(-45deg); }

/* --- FRANCOPHONIE (FONDO BLANCO LINO SÓLIDO) --- */
.seccion-francophonie {
  position: relative;
  background-color: #F7F6F3 !important;
  z-index: 10;
  margin: 0;
  padding: 0;
}

.espacio-blanco-separador {
  height: 12vh;
  background-color: #F7F6F3 !important;
}

.franco-cover-wrap {
  position: relative;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: #F7F6F3 !important;
}

.franco-img-long {
  display: block;
  width: 100%;
  height: auto;
}

#franco-scroll-invite {
  position: absolute;
  top: 75vh; /* Se ancla al inicio de la foto, en el tercio inferior de la primera pantalla */
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 15;
}

#franco-scroll-invite.visible {
  opacity: 1;
  visibility: visible;
}

#franco-scroll-invite .scroll-hint-indicator__texto {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

#franco-scroll-invite .scroll-hint-indicator__linea {
  background-color: rgba(255, 255, 255, 0.35);
}

#franco-scroll-invite .scroll-hint-indicator__linea::after {
  background-color: #FFFFFF;
}

.franco-overlay-content {
  position: absolute;
  bottom: 8%;
  left: 7vw;
  max-width: 660px;
  text-align: left;
  z-index: 10;
  color: #F7F6F3;
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.franco-overlay-content.emerge-activo {
  opacity: 1;
  transform: translateY(0);
}

.franco-titulo-echos {
  font-family: var(--font-titulos);
  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 500;
  color: #F7F6F3;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.65);
}

.franco-texto-echos {
  font-family: var(--font-lectura);
  font-size: clamp(1.05rem, 1.22vw, 1.25rem);
  line-height: 1.68;
  color: #F7F6F3;
  margin-bottom: 2.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.franco-texto-echos p { margin: 0 0 0.8rem 0; }

.btn-suivre-fil {
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 14px 0 !important;
  color: #FFFFFF !important;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  position: relative !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.btn-suivre-fil::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255,255,255,0.85);
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
  transform-origin: left;
}
.btn-suivre-fil:hover::after { transform: scaleX(1.15); background: #fff; }

/* =========================================================
   GALERÍA DE ARTE FRANCOFONÍA: 5 CONTINENTES INMERSIVOS
   (Solo visible al pulsar "Suivre le fil")
   ========================================================= */

/* 1. Contenedor maestro: permanece 100% oculto hasta dar clic */
.franco-tiroir {
  display: none;
  position: relative;
  z-index: 10;
  width: 100vw;
  background-color: #F7F6F3;
}

.franco-tiroir.abierto {
  display: block;
  animation: fadeInTiroir 0.75s ease forwards;
}

@keyframes fadeInTiroir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.franco-tiroir-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 2. Paneles de continente tipo sala de museo con fusión lumínica */
.franco-continent-panel {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  box-sizing: border-box;
}

.franco-continent-panel:first-child { 
  box-shadow: none; 
}

/* FUSIÓN CROMÁTICA AMBIENTAL: Los tonos de las fotos irradian en el fondo */
/* Amériques: Dorado otoñal de arce y azul pizarra del San Lorenzo */
.franco-continent-panel:nth-child(1) {
  background: 
    radial-gradient(circle at 82% 28%, rgba(215, 140, 70, 0.18) 0%, transparent 58%),
    radial-gradient(circle at 18% 75%, rgba(65, 95, 125, 0.15) 0%, transparent 55%),
    #F7F6F3;
}

/* Europe: Tejados de zinc parisinos y terciopelo borgoña */
.franco-continent-panel:nth-child(2) {
  background: 
    radial-gradient(circle at 50% 28%, rgba(106, 72, 88, 0.16) 0%, transparent 58%),
    radial-gradient(circle at 85% 72%, rgba(85, 105, 120, 0.14) 0%, transparent 55%),
    #F7F6F3;
}

/* Afrique: Tierra ocre, sol del Atlántico y siena tostada */
.franco-continent-panel:nth-child(3) {
  background: 
    radial-gradient(circle at 24% 35%, rgba(195, 100, 50, 0.18) 0%, transparent 58%),
    radial-gradient(circle at 76% 68%, rgba(225, 160, 60, 0.16) 0%, transparent 55%),
    #F7F6F3;
}

/* Asie: Turquesa mediterráneo y piedra caliza dorada de Beirut */
.franco-continent-panel:nth-child(4) {
  background: 
    radial-gradient(circle at 35% 25%, rgba(50, 115, 150, 0.17) 0%, transparent 58%),
    radial-gradient(circle at 82% 78%, rgba(200, 150, 85, 0.15) 0%, transparent 55%),
    #F7F6F3;
}

/* Océanie: Lagon turquesa, espuma marina y niebla de coral */
.franco-continent-panel:nth-child(5) {
  background: 
    radial-gradient(circle at 28% 68%, rgba(40, 145, 140, 0.18) 0%, transparent 58%),
    radial-gradient(circle at 78% 32%, rgba(70, 175, 160, 0.16) 0%, transparent 55%),
    #F7F6F3;
}

/* 3. Cabecera curatorial: Resuelve el choque con el logo fijo del menú */
.cont-head {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  /* Espacio superior para que nunca se solape con el menú fijo */
  padding: calc(var(--alto-menu, 2.5cm) + 1.2rem) 6vw 1.2rem 6vw;
  border-bottom: 1px solid rgba(106, 72, 88, 0.12);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.cont-head h3 {
  font-family: var(--font-titulos);
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
  color: #6a4858;
  text-transform: uppercase;
}

.cont-ciudad {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #242325;
}

.franco-reloj {
  margin-left: auto;
  font-family: var(--font-tecnica);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  color: #8c867e;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* 4. Escenario base de la galería (Se calibra para que NUNCA se corte abajo) */
.cont-galeria {
  position: relative;
  z-index: 5;
  display: grid;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 1.6rem 6vw clamp(2.4rem, 4.5vh, 3.8rem) 6vw;
  box-sizing: border-box;
  flex: 1;
  /* Altura matemática perfecta: aprovecha la pantalla sin desbordarse jamás */
  height: calc(100vh - var(--alto-menu, 2.5cm) - 7rem);
  max-height: 72vh;
  min-height: 480px;
}

.cont-galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(20, 24, 22, 0.12);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.65s ease;
  display: block;
}

.cont-galeria img:hover { 
  transform: scale(1.025) translateY(-3px);
  box-shadow: 0 24px 50px rgba(20, 24, 22, 0.18);
}

/* =========================================================
   DISPOSICIONES ARTÍSTICAS EXCLUSIVAS (5 MUNDOS DIFERENTES)
   ========================================================= */

/* CONTINENTE 1: AMÉRIQUES — Díptico Asimétrico y Ventana Panorámica */
.galeria-ameriques {
  grid-template-columns: 1.18fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
}
.galeria-ameriques img:nth-child(1) {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.galeria-ameriques img:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}
.galeria-ameriques img:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}

/* CONTINENTE 2: EUROPE — Tríptico Haussmanniano de Alturas Alternas */
.galeria-europe {
  grid-template-columns: 1fr 1.35fr 1fr;
  grid-template-rows: 1fr;
  gap: 2.2rem;
  align-items: center;
}
.galeria-europe img:nth-child(1) {
  height: 86%;
  align-self: center;
}
.galeria-europe img:nth-child(2) {
  height: 100%;
  align-self: stretch;
}
.galeria-europe img:nth-child(3) {
  height: 88%;
  align-self: center;
}

/* CONTINENTE 3: AFRIQUE — Bloque Monumental y Terraza Escalonada */
.galeria-afrique {
  grid-template-columns: 1.25fr 0.95fr;
  grid-template-rows: 1fr 1.1fr;
  gap: 2rem;
}
.galeria-afrique img:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}
.galeria-afrique img:nth-child(2) {
  grid-row: 1 / span 2;
  grid-column: 2;
}
.galeria-afrique img:nth-child(3) {
  grid-row: 2;
  grid-column: 1;
}

/* CONTINENTE 4: ASIE — Mosaico Panorama Superior y Ventanas Duales */
.galeria-asie {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.15fr 0.95fr;
  gap: 2rem;
}
.galeria-asie img:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.galeria-asie img:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.galeria-asie img:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

/* CONTINENTE 5: OCÉANIE — Archipiélago Dinámico del Pacífico */
.galeria-oceanie {
  grid-template-columns: 1fr 1.4fr 1.1fr;
  grid-template-rows: 1fr;
  gap: 2.2rem;
  align-items: stretch;
}
.galeria-oceanie img:nth-child(1) {
  height: 92%;
  align-self: end;
}
.galeria-oceanie img:nth-child(2) {
  height: 100%;
  align-self: stretch;
}
.galeria-oceanie img:nth-child(3) {
  height: 85%;
  align-self: start;
}

/* 5. Cierre hacia Formations */
.franco-cta-final {
  position: relative;
  z-index: 10;
  padding: 8rem 0 10rem 0;
  display: flex;
  justify-content: center;
  background-color: #F7F6F3 !important;
}

/* Adaptación responsive para pantallas pequeñas */
@media (max-width: 960px) {
  .cont-head {
    padding-top: calc(var(--alto-menu, 2.5cm) + 1.6rem);
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .cont-galeria {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 1.5rem !important;
  }
  .cont-galeria img {
    height: 48vh !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    transform: none !important;
  }
}

/* Contenedor final sólido (nunca más transparentará nada) */
.franco-cta-final {
  position: relative;
  z-index: 10;
  padding: 12rem 0;
  display: flex;
  justify-content: center;
  background-color: #F7F6F3 !important;
}

.btn-formations-verre {
  display: inline-flex !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 14px 0 !important;
  color: #242325 !important;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  position: relative !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.btn-formations-verre::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: #242325;
  transition: transform 0.65s cubic-bezier(0.16,1,0.3,1);
  transform-origin: left;
}
.btn-formations-verre:hover::after { transform: scaleX(1.15); }

@media (max-width: 960px) {
  .direction-rev-left { left: 0; width: 100vw; height: 50vh; }
  .direction-rev-right { left: 8vw; top: 55vh; width: 84vw; transform: none; }
  .franco-overlay-content { left: 6vw; right: 6vw; bottom: 6%; }
  .cont-galeria { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cont-galeria img { height: auto; grid-column: span 1 !important; grid-row: span 1 !important; transform: none !important; }
}

/* TIROIR DEBAJO DE LA DIRECTION - SOLO SE ABRE CON VOIR */
.direction-tiroir{
  width: 100vw;
  max-height: 0;
  overflow: hidden;
  background: #F7F6F3;
  opacity: 0;
  transform: translateY(-12px);
  transition: max-height 0.95s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(36,35,37,0.06);
}
.direction-tiroir.abierto{
  max-height: 120vh;
  max-height: 120dvh;
  opacity: 1;
  transform: translateY(0);
}
.direction-tiroir-inner{
  display: flex;
  flex-direction: row;
  min-height: 86vh;
  align-items: stretch;
}
.direction-tiroir .direction-rev-left{
  position: relative !important;
  left: auto !important; top: auto !important;
  width: 42% !important; flex: 0 0 42% !important;
  overflow: hidden !important; background: #EAE5E1 !important;
}
.direction-tiroir .direction-rev-left img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.direction-tiroir .direction-rev-right{
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 5vw 5vw; gap: 2.2rem;
}
.directeur-firma-svg-contenedor{
  width: min(360px, 30vw) !important;
  height: auto !important;
  min-height: 80px !important;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s, clip-path 0.3s;
  display: block !important;
}
.direction-tiroir.abierto .directeur-firma-svg-contenedor{
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.directeur-firma-object{ width:100% !important; height:80px !important; display:block !important; }
.directeur-cita{ font-family: var(--font-lectura) !important; font-style: italic !important; font-size: clamp(1.25rem,1.6vw,1.65rem) !important; line-height: 1.6 !important; color:#242325 !important; max-width:26em; margin:0; }
.directeur-credenciales{ padding-top: 1.4rem; border-top: 1px solid rgba(106,72,88,0.18); max-width:26em; }
.directeur-nombre{ font-family: var(--font-titulos); font-weight:600; color:#6a4858; margin:0; font-size:1.25rem; }
.directeur-cargo{ font-family: var(--font-ui); font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:#8c867e; margin:0; }
.direction-tiroir .close-directeur{
  position:absolute !important;
  top:2rem !important; right:2.5rem !important;
  width:44px !important; height:44px !important;
  background:none !important; border:none !important;
  cursor:pointer !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  display:flex !important; align-items:center; justify-content:center;
}
.direction-tiroir .close-directeur span{ position:absolute; width:26px; height:1.2px; background:#242325; left:9px; top:21px; pointer-events:none; }
.direction-tiroir .close-directeur span:first-child{ transform:rotate(45deg); }
.direction-tiroir .close-directeur span:last-child{ transform:rotate(-45deg); }

/* =========================================================
   BLOQUE FINAL DEFINITIVO: HEADER, DIRECTION, GALERIE Y PORTAL
   ========================================================= */

/* 1. Permitir que los clics atraviesen el header cuando está retraído */
.site-header.menu-solo-marca:not(.menu-hover-activo) {
  pointer-events: none !important;
}

.site-header.menu-solo-marca:not(.menu-hover-activo) .marca {
  pointer-events: auto !important;
}

/* Ocultar el menú completamente cuando estás dentro de la galería */
body.en-galerie #menu {
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Tiroir desplegable fluido (en su flujo natural) */
.direction-tiroir {
  position: relative !important;
  width: 100vw;
  max-height: 0;
  overflow: hidden;
  background: #F7F6F3;
  opacity: 0;
  transform: translateY(-12px);
  transition: max-height 0.95s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1);
  z-index: 10;
  border-top: 1px solid rgba(36,35,37,0.06);
}

.direction-tiroir.abierto {
  max-height: 120vh !important;
  max-height: 120dvh !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  z-index: 150 !important;
}

.direction-tiroir-inner {
  display: flex;
  flex-direction: row;
  min-height: 86vh;
  align-items: stretch;
}

.direction-tiroir .direction-rev-left {
  width: 42% !important;
  flex: 0 0 42% !important;
  overflow: hidden;
  background: #EAE5E1;
}

.direction-tiroir .direction-rev-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.direction-tiroir .direction-rev-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw 6vw !important;
  gap: 2rem !important;
  background: #F7F6F3;
}

/* Firma a escala de autor (sutil y elegante) */
.directeur-firma-svg-contenedor {
  width: clamp(200px, 18vw, 240px) !important;
  height: auto !important;
  min-height: unset !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.direction-tiroir.abierto .directeur-firma-svg-contenedor {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.directeur-firma-object {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.directeur-cita {
  font-family: var(--font-lectura) !important;
  font-style: italic !important;
  font-size: clamp(1.18rem, 1.45vw, 1.48rem) !important;
  line-height: 1.65 !important;
  color: #242325 !important;
  max-width: 30ch !important;
  margin: 0 !important;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(106, 72, 88, 0.18) !important;
}

.directeur-credenciales {
  display: flex;
  flex-direction: column;
  gap: 0.35rem !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.directeur-nombre {
  font-family: var(--font-titulos) !important;
  font-weight: 600 !important;
  color: #6a4858 !important;
  font-size: 1.22rem !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
}

.directeur-cargo {
  font-family: var(--font-ui) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #8c867e !important;
  margin: 0 !important;
}

/* Equis de cierre */
.direction-tiroir .close-directeur {
  position: absolute !important;
  top: 2.2rem !important;
  right: 2.8rem !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 200 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.direction-tiroir .close-directeur:hover {
  transform: rotate(90deg);
}

.direction-tiroir .close-directeur span {
  position: absolute;
  width: 26px;
  height: 1.2px;
  background-color: #242325;
}

.direction-tiroir .close-directeur span:first-child { transform: rotate(45deg); }
.direction-tiroir .close-directeur span:last-child { transform: rotate(-45deg); }

/* Distribución horizontal de cita y correspondencia */
.direction-rev__corps-editorial {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: clamp(2rem, 4vw, 5rem);
}

.directeur-contact-hub {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-top: 0.6rem;
}

/* Botón (+) minimalista */
.btn-toggle-contact {
  width: 38px;
  height: 38px;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-toggle-contact span {
  position: absolute;
  background-color: #242325;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.btn-toggle-contact span:first-child {
  width: 20px;
  height: 1.2px;
  left: 9px;
  top: 18.4px;
}

.btn-toggle-contact span:last-child {
  width: 1.2px;
  height: 20px;
  left: 18.4px;
  top: 9px;
}

.btn-toggle-contact:hover span,
.btn-toggle-contact.activo span {
  background-color: #6a4858;
}

.btn-toggle-contact.activo {
  transform: rotate(45deg);
}

/* Marco sin relleno y con borde de 0.75 mm */
.directeur-contact-card {
  width: 100%;
  max-width: 320px;
  background: transparent;
  border: 0.75mm solid rgba(106, 72, 88, 0.38);
  border-radius: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(12px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.5s ease,
              margin-top 0.5s ease;
  padding: 0 1.4rem;
}

.directeur-contact-card.abierto {
  max-height: 260px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding: 1.35rem 1.45rem;
  margin-top: 1rem;
}

.contact-card__titre {
  margin: 0;
  font-family: var(--font-titulos) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #6a4858 !important;
}

.contact-card__corps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-card__email {
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #242325 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.contact-card__email:hover {
  color: #6a4858 !important;
}

.contact-card__adresse {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-lectura) !important;
  font-size: 0.86rem !important;
  color: #4A474D !important;
  line-height: 1.45;
  border-top: 1px solid rgba(106, 72, 88, 0.15);
  padding-top: 0.65rem;
}

.contact-card__rdv {
  font-style: italic !important;
  font-size: 0.76rem !important;
  color: #8c867e !important;
  margin-top: 0.2rem;
}

/* Ocultar HUD del rompecabezas */
.rompecabezas-hud-top {
  display: none !important;
}

/* 3. Francophonie y Galería Inmersiva */
.franco-cover-wrap {
  overflow: hidden !important;
}

.franco-img-long {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  transform-origin: center center;
}

.cont-head {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: clamp(1.6rem, 3vh, 2.4rem) 6vw clamp(0.8rem, 1.4vh, 1.2rem) 6vw !important;
  border-bottom: 1px solid rgba(106, 72, 88, 0.12);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.cont-galeria {
  position: relative;
  z-index: 5;
  display: grid;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(1rem, 2vh, 1.6rem) 6vw clamp(1.8rem, 3.5vh, 2.8rem) 6vw !important;
  box-sizing: border-box;
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.cont-galeria img {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(20, 24, 22, 0.12);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.65s ease;
  display: block;
}

.galeria-ameriques,
.galeria-afrique {
  grid-template-rows: 1fr 1fr !important;
  gap: clamp(1.2rem, 1.8vw, 2rem) !important;
}

/* 4. Blindaje del Portal Cinematográfico */
.contenido-institucional {
  transform: none !important;
}

.portal-cinematografico {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999999 !important;
}

/* ==========================================================================
   PALETA MONOCROMÁTICA DE ALTA COSTURA: MODALES DE FORMATIONS
   (Escala de blancos, grises arquitectónicos y negros + acento marca #6a4858)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VENTANA DE MONOLITOS FLE (Botón "Voir la trame")
   -------------------------------------------------------------------------- */
.general-monolitos-ventana {
  background-color: #F6F6F6 !important;
}

.monolito-card {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06) !important;
}

.monolito-card:hover {
  border-color: rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1) !important;
}

.monolito-card__sombra-nivel {
  color: #000000 !important;
  opacity: 0.04 !important;
}

.monolito-card__tag {
  color: #6a4858 !important; /* Acento de marca elegante */
}

.monolito-card__nombre {
  color: #111111 !important;
}

.monolito-card__horas {
  color: #666666 !important;
}

.monolito-card__extracto {
  color: #333333 !important;
}

.monolito-card__balance {
  border-top: 1px solid #E5E5E5 !important;
  color: #222222 !important;
}

.btn-abrir-tiroir {
  border-color: #36393D !important;
  color: #36393D !important;
}

.btn-abrir-tiroir:hover {
  background-color: #c6c6c6 !important;
  color: #36393D !important;
  border-color: #c6c6c6 !important;
}

.btn-carrusel {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #111111 !important;
}

.btn-carrusel:hover {
  background-color: #111111 !important;
  color: #DFE1E3 !important;
  border-color: #111111 !important;
}

/* --------------------------------------------------------------------------
   2. CAJÓN DE ASIGNATURAS FLE (Tiroir Modal A1 -> C1)
   -------------------------------------------------------------------------- */
.tiroir-modal__panneau {
  background-color: #FFFFFF !important;
}

.tiroir-modal__header {
  border-bottom: 1px solid #EBEBEB !important;
}

.tiroir-modal__code-niveau {
  color: #111111 !important;
}

.btn-fermer-tiroir {
  color: #888888 !important;
}

.btn-fermer-tiroir:hover {
  color: #111111 !important;
}

.tiroir-modal__definition {
  border-left-color: #6a4858 !important; /* Línea acento de marca */
  color: #222222 !important;
}

.tiroir-modal__sous-titre {
  color: #111111 !important;
}

.tiroir-table-wrap {
  background-color: #FAFAFA !important;
  border: 1px solid #E5E5E5 !important;
}

.tiroir-table th {
  background-color: #F0F0F0 !important;
  color: #555555 !important;
  border-bottom: 1px solid #E0E0E0 !important;
}

.tiroir-table td {
  border-bottom: 1px solid #EBEBEB !important;
  color: #222222 !important;
}

.tiroir-table td:first-child strong {
  color: #6a4858 !important; /* Código de materia con acento sutil */
}

.tiroir-modal__footer-evaluation {
  border-top: 1px dashed #D0D0D0 !important;
}

.tiroir-modal__footer-evaluation .eval-bloc strong {
  color: #6a4858 !important;
}

/* --------------------------------------------------------------------------
   3. MODAL DE LOS 5 ATELIERS SPÉCIALISÉS (Botón "Consulter les cursus")
   -------------------------------------------------------------------------- */
.ateliers-cursus-modal__dialog {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.ateliers-cursus-modal__header {
  background: #FAFAFA !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ateliers-cursus-modal__eyebrow {
  color: #6a4858 !important; /* Acento de marca */
}

.ateliers-cursus-modal__titre {
  color: #111111 !important;
}

.ateliers-cursus-modal__close {
  color: #888888 !important;
}

.ateliers-cursus-modal__close:hover {
  color: #111111 !important;
}

.ateliers-cursus-modal__nav {
  background-color: #F4F4F4 !important;
  border-bottom: 1px solid #E0E0E0 !important;
}

.ate-filter-pill {
  background: #FFFFFF !important;
  border: 1px solid #D5D5D5 !important;
  color: #555555 !important;
}

.ate-filter-pill:hover {
  background: #ECEEF1 !important;
  color: #36393D !important;
  border-color: #C2C5CA !important;
}

.ate-filter-pill.activo {
  background: #36393D !important;
  color: #ECEEF1 !important;
  border-color: #36393D !important;
  box-shadow: 0 4px 12px rgba(54, 57, 61, 0.15) !important;
}

.ate-cursus-section {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  border-left: 4px solid #6a4858 !important; /* Delineado lateral de marca */
}

.ate-cursus-section__head {
  background: #F7F7F7 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.ate-cursus-section__badge {
  background: #FFFFFF !important;
  border: 1px solid #6a4858 !important;
  color: #6a4858 !important;
}

.ate-cursus-section__nom {
  color: #111111 !important;
}

.ate-cursus-section__total {
  color: #666666 !important;
}

.ate-cursus-table th {
  background: #F2F2F2 !important;
  color: #555555 !important;
  border-bottom: 1px solid #E0E0E0 !important;
}

.ate-cursus-table td {
  border-bottom: 1px solid #EBEBEB !important;
  color: #222222 !important;
}

.ate-td-code {
  color: #6a4858 !important; /* Código con acento */
}

.ate-td-ue {
  color: #111111 !important;
}

.temps-tag {
  background: #EAEAEA !important;
  color: #222222 !important;
}

.temps-tag--auto {
  background: rgba(106, 72, 88, 0.12) !important;
  color: #6a4858 !important;
}

/* --------------------------------------------------------------------------
   4. WORKSPACE DE FOS (Botón "Parcourir les programmes")
   -------------------------------------------------------------------------- */
.fos-workspace-derecha {
  background: #F6F6F6 !important; /* Fondo gris tiza ultra limpio */
}

.btn-fos-fermer {
  color: #111111 !important;
  border-bottom-color: #111111 !important;
}

.btn-fos-fermer:hover {
  color: #6a4858 !important;
  border-bottom-color: #6a4858 !important;
}

/* Tarjetas superiores de especialidades */
.fos-spec-btn {
  background: #FFFFFF !important;
  border: 1px solid #E0E0E0 !important;
  border-left: 3.5px solid transparent !important;
}

.fos-spec-btn:hover {
  border-color: #BDBDBD !important;
  background: #FFFFFF !important;
}

.fos-spec-btn.activo {
  background: #FFFFFF !important;
  border-color: #E0E0E0 !important;
  border-left: 3.5px solid #6a4858 !important; /* Borde activo de marca */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

.fos-spec-btn__nom {
  color: #333333 !important;
}

.fos-spec-btn.activo .fos-spec-btn__nom {
  color: #111111 !important;
}

.fos-spec-btn__niveaux {
  color: #777777 !important;
}

.fos-spec-btn.activo .fos-spec-btn__niveaux {
  color: #6a4858 !important;
}

.fos-spec-btn__watermark {
  color: #000000 !important;
  opacity: 0.06 !important;
}

/* Acordeón FOS */
.fos-acordeon-item {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
}

.fos-acordeon-item.abierto {
  border-color: #D5D5D5 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
}

.fos-acordeon-trigger {
  background: #FFFFFF !important;
}

.fos-acordeon-item.abierto .fos-acordeon-trigger {
  background: #F4F4F4 !important;
  border-bottom: 1px solid #E5E5E5 !important;
}

.fos-acordeon-trigger__titre {
  color: #111111 !important;
}

.fos-acordeon-trigger__icono::before,
.fos-acordeon-trigger__icono::after {
  background: #111111 !important;
}

/* Tablas internas de FOS */
.fos-prerequis-box strong {
  color: #111111 !important;
}

.fos-prerequis-list li {
  color: #333333 !important;
}

.fos-prerequis-note {
  background: #EFEFEF !important;
  border-left: 3px solid #6a4858 !important;
  color: #333333 !important;
}

.fos-prog-etape {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
}

.fos-prog-etape__title {
  background: #F0F0F0 !important;
  color: #111111 !important;
  border-bottom: 1px solid #E0E0E0 !important;
  border-left: 3px solid #6a4858 !important;
}

.fos-prog-table th {
  background: #FAFAFA !important;
  color: #555555 !important;
  border-bottom: 1px solid #E0E0E0 !important;
}

.fos-prog-table td {
  border-bottom: 1px solid #EBEBEB !important;
  color: #222222 !important;
}

.fos-code-cell {
  color: #111111 !important;
}

.fos-hrs-cell {
  color: #6a4858 !important;
}

/* --------------------------------------------------------------------------
   5. CERTIFICATIONS INTERNATIONALES (Monocromático, sin negro puro, sin 3D)
   -------------------------------------------------------------------------- */

/* A. Quitar el efecto 3D de libro: la foto se abre y la info simplemente está ahí */
.certifications-biseccion-wrapper.cert-libro-escena {
  perspective: none !important;
}

.cert-plomada-central {
  display: none !important; /* Se elimina el lomo 3D */
}

.cert-colonne,
.cert-colonne--gauche,
.cert-colonne--droite {
  transform: none !important; /* Cero rotación 3D */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
  transition: opacity 300ms ease !important;
}

.cert-libro-escena.libro-abierto .cert-colonne--gauche,
.cert-libro-escena.libro-abierto .cert-colonne--droite,
.cert-libro-escena.libro-cerrado-salida .cert-colonne--gauche,
.cert-libro-escena.libro-cerrado-salida .cert-colonne--droite {
  transform: none !important;
  opacity: 1 !important;
}

/* B. Fondo general neutral (cero azules ni degradados fríos) */
.seccion-departement--certifications,
.cert-preparations-reveladas {
  background: #F5F5F7 !important;
  background-color: #F5F5F7 !important;
}

/* C. Columnas principales (Blanco puro y borde fino) */
.cert-colonne {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E2E6 !important;
}

.cert-badge-categorie {
  color: #6a4858 !important; /* Identificador con acento institucional */
}

.cert-titre-bloc {
  color: #1F2022 !important; /* Carbón noble sin negro puro */
}

/* D. Fichas de Examen (DELF · DALF · TCF): Gris pastel mineral */
.cert-item-card,
.cert-item-card:hover,
#colonne-tests .cert-item-card:nth-of-type(1),
#colonne-tests .cert-item-card:nth-of-type(1):hover,
#colonne-tests .cert-item-card:nth-of-type(2),
#colonne-tests .cert-item-card:nth-of-type(2):hover {
  background: #FAFAFB !important;
  border: 1px solid #E2E2E6 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
  transition: all 300ms ease !important;
}

.cert-item-card:hover {
  background: #F2F2F5 !important;
  border-color: #6a4858 !important; /* Acento sutil en hover */
  box-shadow: 0 8px 22px rgba(106, 72, 88, 0.08) !important;
  transform: translateY(-2px) !important;
}

.cert-nom {
  color: #1F2022 !important;
}

.cert-item-card:hover .cert-nom {
  color: #6a4858 !important;
}

.cert-duree {
  color: #666668 !important;
}

/* E. Tablas desplegables de UEs dentro de cada ficha */
.cert-ue-cuadro {
  background: #FFFFFF !important;
  border: 1px solid #E2E2E6 !important;
}

.cert-ue-cuadro__head {
  background: #F0F0F3 !important;
  border-bottom: 1px solid #E2E2E6 !important;
  color: #333336 !important;
}

.cert-ue-fila {
  border-bottom: 1px solid #ECECEF !important;
}

.cert-ue-fila:hover {
  background-color: #F8F8FA !important;
}

.cert-ue-code {
  color: #6a4858 !important; /* Código con acento institucional */
}

.cert-ue-nom {
  color: #222225 !important;
}

.cert-ue-hrs {
  color: #666668 !important;
}

.cert-ponderaciones {
  border-top: 1px dashed #D5D5DA !important;
}

.cert-pond-linea {
  color: #444447 !important;
}

.cert-pond-linea strong {
  color: #6a4858 !important;
}

/* F. Familia TEF (Monocromático sin colores dispersos) */
.cert-separador-tcf-tef {
  background: #E2E2E6 !important;
}

.cert-tef-famille__titre {
  color: #1F2022 !important;
}

.cert-tef-famille__indication {
  color: #666668 !important;
}

.tef-ligne-examen,
.tef-ligne-examen[data-tef="tef-canada"],
.tef-ligne-examen[data-tef="tefaq"],
.tef-ligne-examen[data-tef="tef-irn"],
.tef-ligne-examen[data-tef="tef-etudes"],
.tef-ligne-examen[data-tef="tef-tp"] {
  background: #FAFAFB !important;
  border: 1px solid #E2E2E6 !important;
  border-left: 3.5px solid transparent !important;
  color: #1F2022 !important;
  box-shadow: none !important;
}

.tef-ligne-examen:hover,
.tef-ligne-examen.active,
.tef-ligne-examen[data-tef]:hover,
.tef-ligne-examen[data-tef].active {
  background: #F1F1F4 !important;
  border-color: #D6D6DB !important;
  border-left: 3.5px solid #6a4858 !important; /* Borde activo de marca */
  color: #1F2022 !important;
}

.tef-ligne-examen .tef-ligne__cible {
  color: #666668 !important;
}

.tef-ligne-examen.active .tef-ligne__cible {
  color: #6a4858 !important;
}

/* Celdas de la Matriz de Competencias TEF */
.tef-comp-cell {
  background-color: #FAFAFB !important;
  border: 1px solid #E2E2E6 !important;
  color: #88888C !important;
  box-shadow: none !important;
}

.tef-comp-cell.allumee,
.tef-comp-cell.couleur-canada,
.tef-comp-cell.couleur-tefaq,
.tef-comp-cell.couleur-irn,
.tef-comp-cell.couleur-etudes,
.tef-comp-cell.couleur-tp {
  background: #FFFFFF !important;
  border: 1.5px solid #6a4858 !important;
  box-shadow: 0 4px 12px rgba(106, 72, 88, 0.1) !important;
}

.tef-comp-cell.allumee .tef-comp-sigle {
  color: #6a4858 !important;
}

.tef-comp-cell.allumee .tef-comp-libelle {
  color: #1F2022 !important;
}

/* G. Botón "Prendre mesure" y Título del papel */
.cert-papier-titulo-impacto {
  color: #1F2022 !important;
}

.cert-papier-frase-metodo {
  color: #333336 !important;
}

.btn-papier-esmerilado {
  background-color: rgba(250, 250, 252, 0.75) !important;
  border-color: rgba(31, 32, 34, 0.35) !important;
  color: #1F2022 !important;
}

.btn-papier-esmerilado:hover {
  background-color: #1F2022 !important;
  color: #F5F5F7 !important;
  border-color: #1F2022 !important;
}

/* Asegurar que el título de FLE mantenga el Nivel 1 (Futura/Jost) */
#departement-general .general-editorial-titulo {
  font-family: var(--font-titulos) !important;
}

/* Corregir el botón de análisis en el salon de lecture para Nivel 3 (Open Sauce One) */
.btn-analyse-stylistique {
  font-family: var(--font-ui) !important;
}

/* =========================================================
   ADAPTACIÓN EXCLUSIVA PARA PANTALLAS PEQUEÑAS (LA MAISON)
   Haute École de Langue · Architecture Mobile Haute Couture
   ========================================================= */

/* Mando del menú móvil: invisible en escritorio */
.menu-movil-toggle,
.menu-movil-burger {
  display: none;
}

@media screen and (max-width: 768px) {

  /* ---------------------------------------------------------
     0. MEDIDAS MAESTRAS (todo el bloque cuelga de aquí)
     --------------------------------------------------------- */
  body {
    --m-gut: clamp(1.25rem, 5.8vw, 2.1rem);   /* margen editorial lateral */
    --m-barra: 3.6rem;                         /* alto de la barra superior */
    --m-lino: #F7F6F3;
    --m-ciruela: #6a4858;
    --m-top: env(safe-area-inset-top, 0px);
    --m-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ---------------------------------------------------------
     1. MENÚ: BARRA FINA + TELÓN DE LINO A PANTALLA COMPLETA
     --------------------------------------------------------- */
  body #menu {
    height: calc(var(--m-barra) + var(--m-top));
    padding: var(--m-top) var(--m-gut) 0;
  }

  /* Marca: logo + filete + "Haute / École / de Langue" (misma proporción que escritorio) */
  body #menu .marca__logo {
    width: 2.2rem;
    height: 2.2rem;
  }

  body #menu .marca__linea {
    height: 2.2rem;
    margin: 0 0.62rem;
  }

  body #menu .marca__texto {
    height: 2.2rem;
    font-size: 0.64rem;
    letter-spacing: 0.02em;
  }

  /* Velo de lino bajo la marca cuando la barra se repliega sobre fondo claro
     (equivale al degradado que, en escritorio, apaga el texto antes del logo) */
  body #menu.sobre-fondo-claro.menu-solo-marca {
    background-image: linear-gradient(180deg,
      rgba(247, 246, 243, 0.96) 0%,
      rgba(247, 246, 243, 0.86) 58%,
      rgba(247, 246, 243, 0) 100%);
  }

  /* Botón de menú: dos filetes de 1 px, como la cruz y el (+) del resto del sitio */
  body #menu .menu-movil-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  body #menu .menu-movil-burger {
    display: block;
    position: relative;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    margin-right: -0.55rem;
    cursor: pointer;
    z-index: 70;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  body #menu .menu-movil-burger span {
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    height: 1px;
    background-color: #FFFFFF;
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
                top 450ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 400ms ease;
  }

  body #menu .menu-movil-burger span:nth-child(1) { top: calc(50% - 4px); }
  body #menu .menu-movil-burger span:nth-child(2) { top: calc(50% + 3px); }

  body #menu.sobre-fondo-claro .menu-movil-burger span {
    background-color: #24282E;
  }

  /* Estado abierto: la marca y la cruz pasan a tinta oscura sobre el lino */
  body #menu .menu-movil-toggle:checked ~ .menu-movil-burger span {
    background-color: #24282E;
  }

  body #menu .menu-movil-toggle:checked ~ .menu-movil-burger span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }

  body #menu .menu-movil-toggle:checked ~ .menu-movil-burger span:nth-child(2) {
    top: 50%;
    transform: rotate(-45deg);
  }

  body #menu .menu-movil-toggle:checked ~ .marca .marca__logo {
    filter: brightness(0) invert(16%) !important;
  }

  body #menu .menu-movil-toggle:checked ~ .marca .marca__linea {
    background-color: rgba(44, 47, 51, 0.55) !important;
  }

  body #menu .menu-movil-toggle:checked ~ .marca .marca__texto {
    color: #24282E !important;
    text-shadow: none !important;
  }

  /* Telón de navegación (cerrado por defecto, sea cual sea el scroll) */
  body #menu .menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: calc(var(--m-barra) + var(--m-top) + 1.8rem) var(--m-gut) calc(7rem + var(--m-bottom)) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--m-lino) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), visibility 420ms !important;
    z-index: 50;
  }

  body #menu .menu-movil-toggle:checked ~ .menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body #menu .menu__grupo {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
  }

  body #menu .menu__grupo li {
    border-bottom: 1px solid rgba(106, 72, 88, 0.16);
  }

  /* Enlaces principales: tipografía de título, alineados a la izquierda */
  body #menu .menu__grupo--izq a {
    display: block !important;
    padding: 0.95rem 0 !important;
    font-family: var(--font-titulos), sans-serif !important;
    font-size: clamp(1.75rem, 7.6vw, 2.3rem) !important;
    font-weight: 400 !important;
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: #242325 !important;
    text-shadow: none !important;
  }

  /* Enlace activo: ciruela + doble filete inferior (sala "Salon fondateur") */
  body #menu .menu__grupo--izq a.menu__enlace--activo {
    color: var(--m-ciruela) !important;
  }

  body #menu .menu__grupo--izq a::after {
    left: 0;
    right: 0;
    bottom: 4px;
    width: auto;
    height: 1px;
    background-color: var(--m-ciruela) !important;
  }

  /* Espace étudiant: rótulo + lista siempre visible (sin hover) */
  body #menu .menu__grupo--der {
    margin-top: 2.2rem !important;
  }

  body #menu .menu__grupo--der li {
    border-bottom: 0;
  }

  body #menu .enlace-etudiant {
    display: block !important;
    padding: 0 0 0.7rem !important;
    font-family: var(--font-ui), sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8c867e !important;
    text-shadow: none !important;
  }

  body #menu .enlace-etudiant::after {
    display: none !important;
  }

  body #menu .caja-etudiant {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  body #menu .caja-etudiant li {
    opacity: 1;
    transform: none;
    transition-delay: 0ms !important;
  }

  body #menu .caja-etudiant a {
    padding: 0.5rem 0 !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #4A474D !important;
    text-shadow: none !important;
    white-space: normal;
  }

  body #menu .caja-etudiant a:hover {
    padding-left: 0 !important;
    background: none;
  }

  /* Admissions: botón ciruela a todo el ancho, anclado al pie del telón */
  body #menu .btn-admissions {
    position: fixed !important;
    left: var(--m-gut) !important;
    right: var(--m-gut) !important;
    top: calc(100dvh - 4.8rem - var(--m-bottom)) !important;
    width: auto !important;
    height: 3.1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    z-index: 55;
  }

  body #menu .menu-movil-toggle:checked ~ .btn-admissions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* ---------------------------------------------------------
     2. PORTADA MADRE: VÓRTICE EN ENCUADRE VERTICAL
     (el JS no cambia: solo se recalibran pista y tipografía)
     --------------------------------------------------------- */
  body .portada-madre-track {
    height: 220vh;
  }

  body .portada-madre-sticky {
    align-items: center;
    justify-content: center;
  }

  /* Punto focal de la fotografía: ajusta el primer valor (0–100 %) para mover el encuadre */
  body .portada-madre__img-cruda {
    object-position: 58% center;
  }

  body .portada-madre__lectura {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--m-gut) 5vh;
    justify-content: center;
  }

  body .portada-madre__titulo-unico {
    font-size: clamp(2.6rem, 12.8vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
  }

  body .portada-madre__subtitulo-segundo {
    font-size: clamp(1.02rem, 5vw, 1.5rem);
    letter-spacing: 0.07em;
  }

  /* ---------------------------------------------------------
     3. DÉFILÉ ÉDITORIAL: TÍTULO → FOTOGRAFÍA A SANGRE → TEXTO
     --------------------------------------------------------- */
  body .defile-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 680px;
    padding: 4.4rem var(--m-gut) 0;
    gap: 0;
  }

  body .defile-item:last-child {
    padding-bottom: 5rem;
  }

  /* Se deshace la columna para poder reordenar sus hijos */
  body .defile-col-texte,
  body .defile-texte-sticky {
    display: contents;
  }

  body .defile-titre-principal,
  body .defile-titre-chapitre {
    order: 1;
    margin: 0 0 1.35rem;
    font-size: clamp(2.1rem, 9.6vw, 3rem);
    line-height: 1.12;
  }

  body .defile-col-media {
    order: 2;
    width: auto;
    margin: 0 calc(var(--m-gut) * -1) 1.6rem;
  }

  body .defile-corps-texte {
    order: 3;
    max-width: 36rem;
    gap: 1.1rem;
  }

  body .defile-corps-texte p {
    font-size: 1.02rem;
    line-height: 1.74;
    letter-spacing: 0.006em;
    text-align: left;
    text-wrap: pretty;
    hyphens: none;
  }

  /* ---------------------------------------------------------
     4. PUZZLE RIMAY · LINGUA: MISMO ENCASTRE, ESCALA DE PANTALLA
     --------------------------------------------------------- */
  body .rompecabezas-contenedor {
    padding: 0 var(--m-gut);
    gap: 2.3rem;
  }

  body .rompecabezas-piezas-wrap {
    --tam-pieza: clamp(150px, 47vw, 250px);
  }

  body .campo-anillo--1 {
    width: min(92vw, 520px);
    height: min(92vw, 520px);
  }

  body .campo-anillo--2 {
    width: min(150vw, 800px);
    height: min(150vw, 800px);
  }

  /* Palabras de agua: pasan a lomo vertical en los costados */
  body .rompecabezas-marcas-fondo {
    padding: 0 0.5rem;
  }

  body .marca-agua {
    writing-mode: vertical-rl;
    font-size: clamp(2.8rem, 15vw, 4.6rem);
    letter-spacing: 0.14em;
    opacity: 0.045;
  }

  body .marca-agua--oralite {
    transform: rotate(180deg);
  }

  body .rompecabezas-frase-wrap {
    flex-direction: column;
    gap: 0.1rem;
    max-width: 22rem;
  }

  body .frase-separador {
    display: none;
  }

  body .frase-hemisferio {
    font-size: clamp(1.12rem, 5.2vw, 1.5rem);
    line-height: 1.42;
    text-wrap: balance;
  }

  body .linea-transicion-full-wrap {
    margin-top: 0.8rem;
  }

  /* ---------------------------------------------------------
     5. CORTINA LA DIRECTION
     --------------------------------------------------------- */
  body .direction-cover__content {
    gap: 1.15rem;
    padding: 0 var(--m-gut);
  }

  body .direction-cover__logo {
    width: 3.7rem;
  }

  body .direction-cover__title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    text-align: center;
  }

  body .direction-cover__btn {
    padding: 0.9rem 0.25rem 14px !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.3em !important;
  }

  body .direction-cover__btn::after {
    bottom: 0;
  }

  /* ---------------------------------------------------------
     6. TIROIR DU DIRECTEUR: UNA SOLA PANTALLA (el JS bloquea el
        scroll mientras está abierto, así que todo cabe en 100dvh)
     --------------------------------------------------------- */
  body .direction-tiroir.abierto {
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }

  body .direction-tiroir-inner {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }

  /* Con el tiroir abierto la barra se retira (la cruz de cierre ocupa su lugar) */
  body:has(.direction-tiroir.abierto) #menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
  }

  /* Retrato: ocupa lo que deja libre el texto */
  body .direction-tiroir .direction-rev-left {
    width: 100% !important;
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 9.5rem !important;
  }

  body .direction-tiroir .direction-rev-left img {
    object-position: center 18%;
  }

  body .direction-tiroir .direction-rev-right {
    flex: 0 0 auto !important;
    width: 100%;
    justify-content: flex-start;
    padding: 1.5rem var(--m-gut) calc(1.6rem + var(--m-bottom)) !important;
    gap: 1.05rem !important;
  }

  /* Firma: caja 2:1 (el JS ajusta el SVG al 100 % de la caja) */
  body .directeur-firma-svg-contenedor {
    width: 10.5rem !important;
    height: 5.2rem !important;
  }

  body #firma-object {
    display: block;
    width: 100%;
    height: 100%;
  }

  body .direction-rev__corps-editorial {
    position: relative;
    flex-direction: column;
    gap: 0;
  }

  body .direction-rev__textos {
    width: 100%;
  }

  body .directeur-cita {
    font-size: 1.06rem !important;
    line-height: 1.58 !important;
    max-width: none !important;
    padding-bottom: 1.05rem !important;
    margin-bottom: 1.05rem !important;
  }

  body .directeur-credenciales {
    padding-right: 3.2rem;
  }

  body .directeur-nombre {
    font-size: 1.12rem !important;
  }

  body .directeur-cargo {
    font-size: 0.62rem !important;
    letter-spacing: 0.15em !important;
    line-height: 1.5;
  }

  /* Cruz de cierre: filetes finos sobre un disco de lino translúcido */
  body .direction-tiroir .close-directeur {
    top: calc(0.9rem + var(--m-top)) !important;
    right: 0.9rem !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    border-radius: 50%;
    background: rgba(247, 246, 243, 0.82) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  body .direction-tiroir .close-directeur span {
    width: 1.1rem;
    left: calc(50% - 0.55rem);
    top: calc(50% - 0.6px);
  }

  /* (+) Correspondance: abajo a la derecha, junto al cargo; la tarjeta se despliega hacia arriba */
  body .directeur-contact-hub {
    position: absolute;
    right: -0.45rem;
    bottom: -0.25rem;
    flex: none;
    width: auto;
    margin: 0;
    align-items: flex-end;
  }

  body .btn-toggle-contact {
    width: 2.6rem;
    height: 2.6rem;
  }

  body .btn-toggle-contact span:first-child {
    left: calc(50% - 10px);
    top: calc(50% - 0.6px);
  }

  body .btn-toggle-contact span:last-child {
    left: calc(50% - 0.6px);
    top: calc(50% - 10px);
  }

  body .directeur-contact-card {
    position: absolute;
    right: 0.45rem;
    bottom: calc(100% + 0.3rem);
    width: min(19.5rem, calc(100vw - (var(--m-gut) * 2)));
    max-width: none;
    background: var(--m-lino);
    box-shadow: 0 16px 40px rgba(36, 35, 37, 0.14);
    z-index: 30;
  }

  body .directeur-contact-card.abierto {
    margin-top: 0;
  }

  body .contact-card__email {
    white-space: normal;
    word-break: break-word;
  }

  /* ---------------------------------------------------------
     7. FRANCOPHONIE · «ÉCHOS»: FOTO LARGA CON EL TEXTO SOBRE ELLA
     --------------------------------------------------------- */
  body .espacio-blanco-separador {
    height: 8vh;
  }

  /* La foto conserva su proporción de origen; si fuese corta, se recorta por los lados
     para que siempre quepan título, texto y botón */
  body .franco-img-long {
    min-height: 150vh;
    min-height: 150svh;
    object-fit: cover;
    object-position: center top;
  }

  /* Pie de la foto algo más profundo para asegurar la lectura del texto (solo móvil) */
  body .franco-cover-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(100%, 38rem);
    background: linear-gradient(0deg,
      rgba(10, 12, 14, 0.8) 0%,
      rgba(10, 12, 14, 0.52) 48%,
      rgba(10, 12, 14, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }

  body #franco-scroll-invite {
    top: 72vh;
  }

  body .franco-overlay-content {
    left: var(--m-gut);
    right: var(--m-gut);
    bottom: calc(2.6rem + var(--m-bottom));
    max-width: none;
  }

  body .franco-titulo-echos {
    font-size: clamp(3rem, 14vw, 4.2rem);
    margin-bottom: 1.1rem;
  }

  body .franco-texto-echos {
    font-size: 1.02rem;
    line-height: 1.66;
    margin-bottom: 1.8rem;
  }

  body .franco-texto-echos p {
    margin-bottom: 0.7rem;
  }

  body .btn-suivre-fil {
    padding: 0.8rem 0 14px !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.3em !important;
  }

  /* ---------------------------------------------------------
     8. GALERÍA DE LOS 5 CONTINENTES: CINCO SALAS DE UNA PANTALLA
     (se conservan los paneles pegajosos, el telón entre continentes
      y una composición distinta por continente)
     --------------------------------------------------------- */
  body .franco-continent-panel {
    justify-content: flex-start;
  }

  body .franco-continent-panel .cont-head {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "continent reloj" "ciudad reloj";
    align-items: end;
    column-gap: 1rem;
    row-gap: 0.15rem;
    padding: calc(var(--m-top) + 1.3rem) var(--m-gut) 0.95rem !important;
  }

  body .cont-head h3 {
    grid-area: continent;
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
    letter-spacing: 0.09em;
    line-height: 1.05;
  }

  body .cont-head .cont-ciudad {
    grid-area: ciudad;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8c867e;
  }

  body .cont-head .franco-reloj {
    grid-area: reloj;
    margin: 0;
    align-self: end;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }

  body .franco-continent-panel .cont-galeria {
    display: grid !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    gap: 0.8rem !important;
    padding: 0.9rem var(--m-gut) calc(1.4rem + var(--m-bottom)) !important;
  }

  body .franco-continent-panel .cont-galeria img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
    transform: none !important;
    box-shadow: 0 10px 26px rgba(20, 24, 22, 0.12);
  }

  /* Amériques · díptico asimétrico */
  body .franco-continent-panel .galeria-ameriques {
    grid-template-columns: 1.12fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }
  body .galeria-ameriques img:nth-child(1) { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  body .galeria-ameriques img:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  body .galeria-ameriques img:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

  /* Europe · escalera haussmanniana (alturas alternas) */
  body .franco-continent-panel .galeria-europe {
    grid-template-columns: 1fr 1.15fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
  }
  body .galeria-europe img:nth-child(1) { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  body .galeria-europe img:nth-child(2) { grid-column: 2 !important; grid-row: 2 / span 2 !important; }
  body .galeria-europe img:nth-child(3) { grid-column: 1 !important; grid-row: 3 !important; }

  /* Afrique · bloque monumental a la derecha */
  body .franco-continent-panel .galeria-afrique {
    grid-template-columns: 1.2fr 1fr !important;
    grid-template-rows: 1fr 1.1fr !important;
  }
  body .galeria-afrique img:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  body .galeria-afrique img:nth-child(2) { grid-column: 2 !important; grid-row: 1 / span 2 !important; }
  body .galeria-afrique img:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; }

  /* Asie · panorama superior y dos ventanas */
  body .franco-continent-panel .galeria-asie {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1.15fr 0.95fr !important;
  }
  body .galeria-asie img:nth-child(1) { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
  body .galeria-asie img:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
  body .galeria-asie img:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

  /* Océanie · archipiélago en zigzag */
  body .franco-continent-panel .galeria-oceanie {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: 1fr 1.2fr 1fr !important;
  }
  body .galeria-oceanie img:nth-child(1) { grid-column: 1 / 5 !important; grid-row: 1 !important; }
  body .galeria-oceanie img:nth-child(2) { grid-column: 2 / 7 !important; grid-row: 2 !important; }
  body .galeria-oceanie img:nth-child(3) { grid-column: 3 / 7 !important; grid-row: 3 !important; }

  body .franco-cta-final {
    padding: 7rem var(--m-gut) calc(7rem + var(--m-bottom));
  }

  body .btn-formations-verre {
    padding: 0.8rem 0 14px !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.24em !important;
  }
}

/* Teléfonos estrechos (≤ 380 px: iPhone SE / mini, Android compactos) */
@media screen and (max-width: 380px) {
  body .marca__texto { font-size: 0.6rem; }
  body .defile-corps-texte p,
  body .franco-texto-echos { font-size: 0.97rem; }
  body .directeur-cita { font-size: 1rem !important; }
  body .directeur-cargo { letter-spacing: 0.1em !important; }
}

/* Teléfonos bajos (≤ 700 px de alto): el tiroir debe seguir cabiendo en pantalla */
@media screen and (max-width: 768px) and (max-height: 700px) {
  body .directeur-firma-svg-contenedor { width: 8.5rem !important; height: 4.2rem !important; }
  body .direction-tiroir .direction-rev-right { padding-top: 1.1rem !important; gap: 0.8rem !important; }
  body .directeur-cita { font-size: 0.98rem !important; line-height: 1.5 !important; }
}

/* =========================================================
   SELECTOR DE IDIOMA Y MICRO-TRANSICIÓN (HAUTE COUTURE)
   ========================================================= */

body {
  transition: opacity 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

body.lang-fade {
  opacity: 0.82;
}

.lang-switch-atelier {
  display: inline-flex;
  align-items: center;
  margin-left: 1.6rem;
  margin-right: 0.8rem;
  font-family: var(--font-ui), sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  user-select: none;
  z-index: 60;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 450ms ease, transform 450ms ease, visibility 450ms;
}

.lang-opt {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  color: rgba(255, 255, 255, 0.45);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: color 0.28s ease, transform 0.2s ease;
  line-height: 1;
}

.lang-opt:hover {
  color: #FFFFFF;
}

.lang-opt.active {
  color: #FFFFFF;
  font-weight: 700;
  border-bottom: 1.5px solid #FFFFFF;
}

.lang-separator {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
  margin: 0 0.1rem;
}

.site-header.sobre-fondo-claro .lang-opt {
  color: rgba(36, 40, 46, 0.45);
}

.site-header.sobre-fondo-claro .lang-opt:hover {
  color: #18242F;
}

.site-header.sobre-fondo-claro .lang-opt.active {
  color: #18242F;
  border-bottom-color: #18242F;
}

.site-header.sobre-fondo-claro .lang-separator {
  color: rgba(36, 40, 46, 0.25);
}

@media screen and (max-width: 768px) {
  .lang-switch-atelier {
    margin-left: auto;
    margin-right: 0.8rem;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
  }
}