/* ==========================================================================\n   ICARE ENCORE — FEUILLE DE STYLE PRINCIPALE\n   --------------------------------------------------------------------------\n   Organisation :\n   01. Variables graphiques globales\n   02. Reset / base du site\n   03. Composants communs réutilisables\n   04. Accueil — scène plein écran\n   05. Accueil — identité / titre\n   06. Accueil — bouton burger\n   07. Accueil — menu vertical ICARE\n   08. Accueil — cercle central / container\n   09. Accueil — satellites\n   10. Accueil — cartouche satellite\n   11. Accueil — phrase d'accroche\n   12. Accueil — bloc « Découvrir »\n   13. Responsive tablette / petit desktop\n   14. Responsive smartphone\n   15. Accessibilité\n\n   IMPORTANT\n   - Les couleurs, polices, ombres et rayons définis ici servent de base à\n     l'ensemble du futur site.\n   - Les réglages propres à la page d'accueil sont regroupés dans des blocs\n     clairement identifiés pour faciliter les ajustements futurs.\n   - Pour déplacer le grand cercle central, modifier --orbit-x et --orbit-y.\n   - Pour modifier sa taille, modifier --orbit-size.\n   ========================================================================== */


/* ==========================================================================\n   01. VARIABLES GRAPHIQUES GLOBALES\n   ========================================================================== */

:root {
  /* ==========================================================
     RÉGLAGE GLOBAL DE TRANSPARENCE DES PANNEAUX
     Plus la valeur est basse, plus la photo de fond est visible.
     Réglage conseillé de départ : .65 / .57
     ========================================================== */
  --panel-opacity-strong: .35;
  --panel-opacity-soft: .17;

  /* Palette Icare */
  --icare-blue: #0b62d8;
  --icare-yellow: #ffd10a;
  --icare-black: #05070b;
  --icare-white: #ffffff;
  --icare-night: #07152f;
  --icare-blue-deep: #084a9b;
  --icare-blue-mid: #1479c9;
  --icare-blue-sky: #69bdea;
  --icare-blue-light: #d8f0fc;
  --icare-blue-mist: #eef9ff;
  --icare-gradient-sky: linear-gradient(145deg, #d8f0fc, #8ed0f2 58%, #65b8e8);
  --icare-gradient-blue: linear-gradient(140deg, #1687d8, #0b62d8 52%, #084a9b);
  --icare-gradient-night: linear-gradient(140deg, #07152f, #0a3471 64%, #0b62d8);


  /* Alias historiques conservés pour compatibilité avec la page actuelle */
  --blue: var(--icare-blue);
  --yellow: var(--icare-yellow);
  --ink: var(--icare-black);
  --white: var(--icare-white);

  /* Typographies */
  --font-main: 'Space Grotesk', Arial, sans-serif;
  --font-display: 'Syne', 'Arial Black', sans-serif;
--font-script: "Kalam", cursive;
  --font-claim-strong: "Fugaz One", "Arial Black", sans-serif;

  /* Ombres réutilisables */
  --shadow-soft: 4px 6px 10px rgba(0, 0, 0, 0.22);
  --shadow-medium: 7px 10px 18px rgba(0, 0, 0, 0.28);
  --shadow-hard: 8px 10px 0 rgba(0, 0, 0, 0.65);

  /* Rayons réutilisables */
  --radius-pill: 999px;
  --radius-card: 24px;

  /* ------------------------------------------------------------------------\n     Réglages principaux de la composition de la page d'accueil\n     ------------------------------------------------------------------------ */
  --orbit-size: min(68vh, 58vw);
  --orbit-x: 57vw;
  --orbit-y: 45.5vh;
  --sat-size: clamp(64px, 6.3vw, 98px);

  /* Menu ICARE : réglages communs tour + cartouches */
  --icare-tower-height: clamp(330px, 47vh, 485px);
  --icare-pill-overlap: 38px;
  --icare-tower-shift-x: -55px;

  /* ================================================================
     IMAGES DE FOND DES PAGES
     Pour changer un fond : modifier uniquement le chemin correspondant.
     ================================================================ */
  --fond-animation: url("assets/fond-animation.webp");
  --fond-association: url("images/fond-association.webp");
  --fond-creation: url("assets/fond-creation.webp");
  --fond-imaginaire: url("assets/fond-imaginaire.webp");
  --fond-recreatif: url("assets/fond-pierrick.webp");
  --fond-evenement: url("assets/fond-evenement.webp");
  --fond-projets: url("assets/fond-projets.webp");
  --fond-portfolio: url("assets/fond-portfolio.webp");
    --fond-artistique: url("assets/fond-artistique.webp");
  --fond-renovation: url("assets/fond-renovation.webp");
}


/* ==========================================================================\n   02. RESET / BASE DU SITE\n   ========================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--icare-night);
  color: var(--icare-white);
}

body {
  font-family: var(--font-main);
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}


/* ==========================================================================\n   03. COMPOSANTS COMMUNS RÉUTILISABLES\n   --------------------------------------------------------------------------\n   Ces règles servent de vocabulaire commun aux futures pages du site.\n   Elles sont volontairement simples et peuvent être reprises sans modifier\n   le rendu de l'accueil actuel.\n   ========================================================================== */

.site-page {
  position: relative;
  min-height: 100vh;
  background: var(--icare-night);
  color: var(--icare-white);
}

.site-sky-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.site-pill {
  border-radius: var(--radius-pill);
}

.site-card {
  border-radius: var(--radius-card);
}


/* ==========================================================================\n   04. ACCUEIL — SCÈNE PLEIN ÉCRAN\n   ========================================================================== */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--icare-night);
  isolation: isolate;
}

/* Fond ciel + Pierrick */
.sky {
  position: absolute;
  inset: 0;
  z-index: -4;

  background-image:
    linear-gradient(
      90deg,
      rgba(1, 18, 45, 0.38) 0%,
      rgba(4, 35, 86, 0.10) 43%,
      rgba(255, 255, 255, 0.05) 75%
    ),
    url('assets/fond-pierrick.webp');

  background-size: cover;
  background-position: center center;
}

/* Assombrissement léger de la partie basse */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 0.32)
  );
}


/* ==========================================================================\n   05. ACCUEIL — IDENTITÉ / TITRE\n   ========================================================================== */

.brand {
  position: absolute;
  left: 3vw;
  top: 4.8vh;
  width: min(29vw, 430px);
  z-index: 10;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 740;
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-size: clamp(44px, 5.5vw, 92px);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.18));

  transform: scaleX(0.65);
  transform-origin: left center;
}

.brand-title span {
  display: block;
}

.brand-title span:first-child {
  color: var(--icare-white);
}

.brand-title span:last-child {
  color: var(--icare-yellow);
}

.brand-subtitle {
  margin-top: 2vh;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(12px, 1.15vw, 22px);
  line-height: 1.24;
}

.brand-subtitle strong {
  color: var(--icare-yellow);
}

.dash {
  color: var(--icare-yellow);
  margin-left: 1.15em;
  letter-spacing: 0.15em;
  white-space: nowrap;
}


/* ==========================================================================\n   06. ACCUEIL — BOUTON BURGER\n   ========================================================================== */

.burger {
  position: absolute;
  right: 3vw;
  top: 4vh;
  z-index: 20;

  width: 42px;
  height: 36px;
  padding: 3px 0;

  display: grid;
  align-content: space-between;
  background: transparent;
  cursor: pointer;
}

.burger span {
  height: 4px;
  border-radius: 6px;
  background: #080808;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.burger span:last-child {
  background: var(--icare-yellow);
}




/* ==========================================================================
   06B. ACCUEIL — MENU BURGER COULISSANT
   ========================================================================== */

.burger-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 19;

  width: min(320px, 27vw);
  min-width: 250px;
  height: 100%;

  padding: 12vh 24px 28px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 34, 0.96),
      rgba(6, 26, 60, 0.92)
    );

  border-left: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateX(104%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform 0.34s cubic-bezier(.22,.8,.2,1),
    opacity 0.24s ease;
}

.burger-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.burger-menu-group {
  display: flex;
  flex-direction: column;
}

.burger-menu a {
  position: relative;
  display: flex;
  align-items: center;

  min-height: 44px;
  padding: 9px 10px;

  color: var(--icare-white);
  text-decoration: none;

  font-family: var(--font-main);
  font-size: clamp(15px, 1.18vw, 20px);
  font-weight: 650;

  border-bottom: 1px solid rgba(255, 255, 255, 0.10);

  transition:
    color 0.2s ease,
    background 0.2s ease,
    padding-left 0.2s ease;
}

.burger-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;

  width: 3px;
  height: 0;

  border-radius: 3px;
  background: var(--icare-yellow);

  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.burger-menu a:hover,
.burger-menu a:focus-visible {
  color: var(--icare-yellow);
  background: rgba(255, 255, 255, 0.04);
  padding-left: 16px;
}

.burger-menu a:hover::before,
.burger-menu a:focus-visible::before {
  height: 60%;
}

.burger-menu-separator {
  height: 1px;
  margin: 8px 0;

  background: linear-gradient(
    90deg,
    var(--icare-yellow),
    rgba(255, 209, 10, 0.08)
  );
}

.facebook-link {
  gap: 10px;
}

.facebook-icon {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  display: grid;
  place-items: center;

  color: #fff;
  background: #4267b2;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}

.burger.is-open span:first-child {
  transform: translateY(13px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:last-child {
  transform: translateY(-13px) rotate(-45deg);
  background: var(--icare-yellow);
}

.burger span {
  transition:
    transform 0.28s ease,
    opacity 0.2s ease,
    background 0.2s ease;
}


/* ==========================================================================\n   07. ACCUEIL — MENU VERTICAL ICARE\n   ========================================================================== */

.icare-menu {
  position: absolute;
  left: 3.1vw;
  top: 35vh;
  z-index: 15;

  display: flex;
  align-items: center;
}

/* Colonne ICARE : image indépendante placée DEVANT les cartouches.
   Les cartouches se prolongent sous l'image ; le PNG masque leur bord gauche. */
.icare-tower {
  position: relative;
  z-index: 20;
  pointer-events: none;
  flex: 0 0 auto;
  height: var(--icare-tower-height);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  filter: drop-shadow(8px 5px 7px rgba(0, 0, 0, 0.30));
}

.icare-tower img {
  pointer-events: none;
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
  transform: translateX(var(--icare-tower-shift-x));
}

/* Groupe des cinq cartouches : positionnement individuel sur l'axe Y.
   La tour ICARE reste au premier plan et masque leur amorce gauche. */
.icare-pills {
  position: relative;
  z-index: 10;
  width: 220px;
  height: var(--icare-tower-height);
  margin-left: calc(-160px - var(--icare-pill-overlap));
}

.icare-pill {
  text-decoration: none;
  position: absolute;
  left: 0;
  height: clamp(45px, 6vh, 64px);
  padding: 0 17px 0 var(--text-x, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111;
  background: var(--icare-white);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0 26px 26px 0;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-50%);
  margin-left: 0;
  transition:
    left 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.25s ease,
    width 0.25s ease;
}

.icare-pill span {
  margin-left: 12px;
  color: #f1b900;
  font-size: 20px;
}

.icare-pill:hover,
.icare-pill:focus-visible {
  left: 12px;
  transform: translateY(-50%) scale(1.025);
  filter: brightness(1.05);
  box-shadow: 7px 9px 16px rgba(0, 0, 0, 0.30);
}

/* Réglages fins individuels des cinq cartouches.
   - left : déplacement horizontal propre à chaque cartouche
            (négatif = gauche / positif = droite)
   - top  : position verticale propre à chaque cartouche
            par rapport à la hauteur de la tour ICARE
   Ces valeurs servent au calage visuel final sans toucher aux autres cartouches. */
.p1 { left: 0px; top: 10%; width: 170px; --text-x: 30px; }
.p2 { left: 0px; top: 29%; width: 185px; --text-x: 45px; }
.p3 { left: 0px; top: 48%; width: 200px; --text-x: 60px; }
.p4 { left: 0px; top: 67%; width: 185px; --text-x: 45px; }
.p5 { left: 0px; top: 86%; width: 170px; --text-x: 30px; }

/* ==========================================================================\n   08. ACCUEIL — CERCLE CENTRAL / CONTAINER D'IMAGES\n   ========================================================================== */

/*
   Réglages de position et de taille :
   - horizontal : --orbit-x
   - vertical   : --orbit-y
   - diamètre   : --orbit-size
   Les variables se trouvent en haut de cette feuille dans :root.
*/
.orbit {
  position: absolute;
  left: var(--orbit-x);
  top: var(--orbit-y);
  width: var(--orbit-size);
  height: var(--orbit-size);
  z-index: 8;

  transform: translate(-50%, -50%);
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* Anneau noir principal */
.ring-black {
  border: clamp(13px, 1.35vw, 24px) solid #050608;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.20),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

/* Segments jaunes autour de l'anneau */
.ring-yellow {
  inset: -4px;
  border: clamp(4px, 0.48vw, 9px) solid transparent;

  background: conic-gradient(
    from 5deg,
    transparent 0 8%,
    var(--icare-yellow) 8% 24%,
    transparent 24% 44%,
    var(--icare-yellow) 44% 57%,
    transparent 57% 75%,
    var(--icare-yellow) 75% 93%,
    transparent 93% 100%
  );

  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 10px),
    #000 calc(100% - 9px)
  );

  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 10px),
    #000 calc(100% - 9px)
  );

  transform: rotate(-8deg);
}

/* Zone destinée aux images changeantes */
.image-container {
  position: absolute;
  inset: clamp(20px, 2.1vw, 36px);
  overflow: hidden;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(4, 60, 135, 0.20);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.16);

  transition: background-image 0.4s ease;

}

/* Contenu animé du cercle central — mouvement repris du visuel de référence.
   Le cercle et ses anneaux restent fixes ; seul le contenu intérieur bouge. */
.image-motion {
  position: absolute;
  inset: -5%;

  display: grid;
  place-items: center;

  border-radius: 50%;

  animation: imageSlowSpin 6.5s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes imageSlowSpin {
  0% {
    transform: rotate(-4deg) translateY(0px) scale(1);
  }

  50% {
    transform: rotate(4deg) translateY(-18px) scale(1.02);
  }

  100% {
    transform: rotate(-4deg) translateY(0px) scale(1);
  }
}



.image-container.has-image {
  background-position: center;
  background-size: cover;
}

/* Compatibilité avec le script actuel : si l'image est appliquée directement
   à #imageContainer via .has-image, c'est ce container qui reçoit le mouvement. */
.image-container.has-image {
  animation: imageSlowSpin 6.5s ease-in-out infinite;
}

.image-container.has-image .image-motion {
  animation: none;
}

/* ==========================================================================\n   09. ACCUEIL — SATELLITES\n   ========================================================================== */

.satellite {
  position: absolute;
  width: var(--sat-size);
  height: var(--sat-size);
  padding: 0;
  z-index: 12;

  border-radius: 50%;
  background: transparent;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.satellite:hover,
.satellite:focus-visible {
  z-index: 20;
  transform: scale(1.18);
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}

/* Corps graphique du satellite */
.sat-disc {
  position: absolute;
  inset: 0;
  overflow: hidden;

  display: grid;
  place-items: center;

  color: var(--icare-white);
  border: 4px solid #050608;
  border-radius: 50%;
  box-shadow:
    4px 5px 0 rgba(0, 0, 0, 0.80),
    inset 0 0 0 2px rgba(255, 255, 255, 0.40);
}

.sat-disc::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;

  background: conic-gradient(
    #53b7ef 0 25%,
    #f7fbff 25% 50%,
    #173a84 50% 75%,
    #07141f 75%
  );
}

.yellow-q::before {
  background: conic-gradient(
    var(--icare-yellow) 0 25%,
    #fff4b2 25% 50%,
    #151515 50% 75%,
    var(--icare-white) 75%
  );
}

.black-q::before {
  background: conic-gradient(
    #090909 0 25%,
    #f7f7f7 25% 50%,
    #252525 50% 75%,
    #050505 75%
  );
}

.sat-disc b {
  position: relative;
  z-index: 2;
  font-size: clamp(16px, 1.4vw, 26px);
}

.sat-label {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 3;

  padding: 5px 12px;
  transform: translate(-50%, 50%);

  color: #070707;
  background: var(--icare-white);
  border: 1px solid #111;
  border-radius: var(--radius-pill);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.45);

  font-weight: 800;
  font-size: clamp(8px, 0.72vw, 12px);
  white-space: nowrap;
}

/* Position des quatre satellites par rapport au cercle */
.s-association {
  left: -13%;
  top: 14%;
}

.s-creations {
  right: -13%;
  top: 14%;
}

.s-events {
  left: -8%;
  bottom: 10%;
}

.s-animations {
  right: -8%;
  bottom: 10%;
}


/* ==========================================================================\n   10. ACCUEIL — CARTOUCHE D'INFORMATION DES SATELLITES\n   ========================================================================== */

.sat-tooltip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;

  width: min(40vw, 440px);
  padding: 20px 24px 18px;

  color: #111;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(5, 7, 11, 0.82);
  border-radius: 20px;
  box-shadow:
    8px 9px 0 rgba(0, 0, 0, 0.48),
    0 16px 34px rgba(0, 0, 0, 0.18);

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.sat-tooltip::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 13px;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--icare-yellow);
}

.sat-tooltip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.sat-tooltip strong {
  display: block;
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sat-tooltip span {
  display: block;
  margin-top: 9px;
  max-width: 38ch;
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.42;
}

.sat-tooltip a {
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
  padding: 8px 13px;

  color: #111;
  background: var(--icare-yellow);
  border-radius: var(--radius-pill);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.38);

  text-decoration: none;
  font-weight: 800;
  font-size: 12px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sat-tooltip a:hover,
.sat-tooltip a:focus-visible {
  transform: translateX(4px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.34);
}


/* ==========================================================================\n   11. ACCUEIL — PHRASE D'ACCROCHE\n   ========================================================================== */

.claim {
  position: absolute;
  left: 35.3vw;
  bottom: 5.4vh;
  z-index: 12;

  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.claim-script {
  font-family: var(--font-script);
  font-size: clamp(22px, 2.7vw, 47px);
  font-weight: 300;
  line-height: 1;
}

.claim-strong {
  font-family: var(--font-claim-strong);
  color: var(--icare-yellow);
  font-size: clamp(13px, 1.48vw, 27px);
  font-weight: 400;
  letter-spacing: 0.015em;

  transform: scaleX(0.90);
  transform-origin: center;
}


/* ==========================================================================
   12. ACCUEIL — BLOC « DÉCOUVRIR ICARE ENCORE »
   --------------------------------------------------------------------------
   Variante retenue : marqueur vertical jaune, sans cadre.
   ========================================================================== */

.discover {
  position: absolute;
  right: 4.2vw;
  bottom: 5.2vh;
  z-index: 15;

  width: clamp(250px, 22vw, 360px);
  min-height: 118px;
  padding: 8px 0 8px 24px;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 14px;

  color: var(--icare-white);

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Marqueur vertical jaune */
.discover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;

  width: 4px;
  border-radius: 4px;
  background: var(--icare-yellow);

  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.18);
}

.discover-copy {
  padding: 0;
  max-width: 250px;

  font-size: clamp(10px, 0.9vw, 15px);
  line-height: 1.38;
  font-weight: 600;

  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}

/* Le séparateur vertical de l'ancien cadre n'est plus utilisé */
.discover-divider {
  display: none;
}

.discover-link {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-right: 34px;

  color: var(--icare-white);
  text-decoration: none;
  font-weight: 800;
  line-height: 1.08;

  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.40);

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.discover-link:hover,
.discover-link:focus-visible {
  transform: translateX(6px);
  filter: brightness(1.08);
}

.discover-link strong {
  color: var(--icare-yellow);
}

.discover-link span {
  position: absolute;
  right: 0;
  top: 50%;

  width: auto;
  height: auto;
  display: block;

  color: var(--icare-yellow);
  background: transparent;
  border-radius: 0;

  font-size: 26px;
  line-height: 1;
  transform: translateY(-50%);
}


/* ==========================================================================\n   13. RESPONSIVE — TABLETTE / PETIT DESKTOP\n   ========================================================================== */

@media (max-width: 1100px) {
  :root {
    --orbit-size: min(60vh, 58vw);
    --orbit-x: 58vw;
  }

  .brand {
    width: 34vw;
  }

  .icare-menu {
    top: 37vh;
  }

  .claim {
    left: 46vw;
  }

  .discover {
    width: 35vw;
  }
}




/* ==========================================================================
   13B. RESPONSIVE — TABLETTE / PETIT PC
   --------------------------------------------------------------------------
   Palier intermédiaire ajouté pour éviter les superpositions entre :
   - cercle central / satellites
   - totem ICARE / cartouches
   - accroche / bloc contact

   IMPORTANT :
   - ne modifie PAS les réglages smartphone <= 760px ;
   - ne modifie PAS le desktop > 1100px.
   ========================================================================== */

@media (min-width: 761px) and (max-width: 1100px) {

  /* Cercle central : un peu plus petit et légèrement décalé à droite/haut. */
  .orbit {
    --orbit-size: min(54vh, 50vw);
    --orbit-x: 62vw;
    --orbit-y: 39vh;
  }

  /* Satellites : légèrement resserrés autour du cercle. */
  .satellite {
    --sat-size: clamp(58px, 7vw, 76px);
  }

  .s-association {
    left: -11%;
    top: 13%;
  }

  .s-creations {
    right: -8%;
    top: 13%;
  }

  .s-events {
    left: -5%;
    bottom: 8%;
  }

  .s-animations {
    right: -5%;
    bottom: 8%;
  }

  /* Totem : plus compact et plus bas, sans toucher au smartphone. */
  .icare-menu {
    left: 2vw;
    top: 48vh;
    --icare-tower-height: clamp(285px, 36vh, 340px);
    --icare-pill-overlap: 30px;
    --icare-tower-shift-x: -42px;
  }

  .icare-pills {
    width: 205px;
    margin-left: calc(-145px - var(--icare-pill-overlap));
  }

  .icare-pill {
    height: clamp(38px, 5vh, 50px);
    font-size: clamp(11px, 1.55vw, 14px);
  }

  /* Cartouches un peu moins longs dans ce palier. */
  .p1, .p5 { width: 150px; }
  .p2, .p4 { width: 165px; }
  .p3 { width: 180px; }

  /* Les textes gardent la hiérarchie individuelle déjà prévue. */
  .p1 { --text-x: 26px; }
  .p2 { --text-x: 36px; }
  .p3 { --text-x: 46px; }
  .p4 { --text-x: 36px; }
  .p5 { --text-x: 26px; }

  /* Accroche et contact séparés plus clairement dans la partie basse. */
  .claim {
    left: 39vw;
    bottom: 8vh;
  }

  .claim-script {
    font-size: clamp(20px, 3.2vw, 31px);
  }

  .claim-strong {
    font-size: clamp(11px, 1.7vw, 17px);
  }

  .discover {
    right: 3vw;
    bottom: 4vh;
    width: min(34vw, 300px);
  }

  .discover-contact {
    padding: 11px 12px;
    gap: 8px;
  }

  .discover-contact-copy {
    font-size: clamp(9px, 1.15vw, 12px);
  }

  .discover-contact-actions {
    gap: 6px;
    padding-left: 13px;
  }

  .discover-action {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 10px;
  }
}


/* Écrans intermédiaires mais peu hauts :
   on compacte encore légèrement l'ensemble pour éviter les collisions verticales. */
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 760px) {

  .orbit {
    --orbit-size: min(49vh, 47vw);
    --orbit-y: 37vh;
  }

  .icare-menu {
    top: 46vh;
    --icare-tower-height: clamp(255px, 34vh, 305px);
  }

  .claim {
    bottom: 6vh;
  }

  .discover {
    bottom: 2.5vh;
  }
}


/* ==========================================================================\n   14. RESPONSIVE — SMARTPHONE\n   ========================================================================== */

@media (max-width: 760px) {
  html,
  body {
    overflow: hidden;
  }

  .hero {
    min-height: 100svh;
    height: 100svh;
  }

  /* Fond */
  .sky {
    background-position: 72% center;
  }

  /* Titre */
  .brand {
    left: 5vw;
    top: 3.5vh;
    width: 70vw;
  }

  .brand-title {
    font-size: clamp(40px, 12vw, 64px);
    line-height: 0.85;
  }

  .brand-subtitle {
    margin-top: 1.2vh;
    font-size: clamp(10px, 3vw, 14px);
  }

  .dash {
    margin-left: 0.6em;
  }

  /* Burger */
  .burger {
    right: 5vw;
    top: 3.5vh;
    width: 30px;
    height: 28px;
  }

  .burger span {
    height: 3px;
  }


  .burger-menu {
    width: min(84vw, 320px);
    min-width: 0;
    padding: 10vh 18px 22px;
  }

  .burger-menu a {
    min-height: 42px;
    font-size: 16px;
  }

  /* Cercle central */
  .orbit {
    --orbit-size: min(47vh, 88vw);
    --orbit-x: 50vw;
    --orbit-y: 35.5vh;
  }

  .ring-black {
    border-width: 11px;
  }

  .image-container {
    inset: 18px;
  }

  /* Satellites */
  .satellite {
    --sat-size: 64px;
  }

  .sat-label {
    padding: 4px 8px;
    font-size: 7px;
  }

  .s-association {
    left: -30%;
    top: 10%;
  }

  .s-creations {
    right: -6%;
    top: 10%;
  }

  .s-events {
    left: -4%;
    bottom: 9%;
  }

  .s-animations {
    right: -4%;
    bottom: 9%;
  }

  /* Menu ICARE */
  .icare-menu {
    left: 7vw;
    top: 56vh;
    align-items: center;
    --icare-tower-height: clamp(250px, 38vh, 340px);
    --icare-pill-overlap: 22px;
    --icare-tower-shift-x: -24px;
  }

  .icare-pills {
    width: 48vw;
    margin-left: calc(-82px - var(--icare-pill-overlap));

    /* Réglage horizontal des cartouches seuls sur smartphone.
       Valeur plus négative = cartouches plus à gauche.
       Le totem ICARE n’est pas déplacé. */
    transform: translateX(-25px);
  }

  .icare-pill {
    height: clamp(32px, 4.2vh, 42px);
    padding-left: 50px;
    padding-right: 10px;
    border-radius: 0 18px 18px 0;
    font-size: clamp(9px, 3vw, 12px);
  }

  .icare-pill span { margin-left: 8px; font-size: 16px; }
  .p1, .p5 { width: 34vw; }
  .p2, .p4 { width: 38vw; }
  .p3 { width: 42vw; }

  /* Accroche */
  .claim {
    left: 50%;
    bottom: 14.5vh;
  }

  .claim-script {
    font-size: clamp(18px, 6.4vw, 31px);
  }

  .claim-strong {
    font-size: clamp(9px, 3.3vw, 14px);
  }

  /* Bloc découvrir — version mobile du marqueur vertical */
  .discover {
    left: auto;
    right: 5vw;
    bottom: 3.2vh;

    width: min(54vw, 250px);
    min-height: 92px;
    padding: 6px 0 6px 17px;
    gap: 9px;
  }

  .discover-copy {
    max-width: none;
    font-size: clamp(8px, 2.45vw, 11px);
    line-height: 1.32;
  }

  .discover-link {
    padding-right: 24px;
    font-size: clamp(8px, 2.5vw, 11px);
  }

  .discover-link span {
    font-size: 20px;
  }

  .discover::before {
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 3px;
  }

  /* Cartouche satellite */
  .sat-tooltip {
    width: 74vw;
    padding: 14px 16px;
  }

  .sat-tooltip strong {
    font-size: 17px;
  }

  .sat-tooltip span {
    font-size: 11px;
  }
}


/* ==========================================================================\n   15. ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS\n   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   CONTENU NARRATIF DES 5 VIGNETTES ICARE
   Image WebP + texte HTML/CSS superposé.
   -------------------------------------------------------------------------- */

.scene-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  border-radius: 50%;
  user-select: none;
  pointer-events: none;

  transition:
    opacity 0.28s ease,
    filter 0.28s ease;
}

.scene-copy {
  position: absolute;
  left: 18%;
  bottom: 10%;
  z-index: 3;

  width: min(58%, 350px);
  padding: 10px 14px 11px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #fff;
  background: linear-gradient(
    90deg,
    rgba(2, 12, 31, 0.58) 0%,
    rgba(2, 12, 31, 0.28) 72%,
    rgba(2, 12, 31, 0) 100%
  );
  border-radius: 12px;

  font-family: "Caveat", "Kalam", cursive;
  font-size: clamp(22px, 2.2vw, 38px);
  line-height: 0.96;
  text-align: left;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.72),
    0 0 1px rgba(0, 0, 0, 0.9);

  pointer-events: none;
}

.scene-main,
.scene-accent {
  display: block;
}

.scene-accent {
  margin-top: 5px;
  color: var(--icare-yellow);
  font-weight: 600;
}

.scene-copy.is-changing,
.scene-image.is-changing {
  opacity: 0;
}

@media (max-width: 760px) {
  .scene-copy {
    left: 16%;
    bottom: 9%;
    width: 64%;
    padding: 7px 9px 8px;
    font-size: clamp(17px, 5vw, 26px);
  }
}


/* ===== FINITION — BURGER PLUS DISCRET ===== */
.burger-menu {
  width: 228px;
  min-width: 228px;
  height: auto;
  max-height: calc(100% - 78px);
  top: 64px;
  right: 18px;
  padding: 9px 11px 11px;
  gap: 1px;
  background: rgba(8,15,28,.78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0,0,0,.20);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transform: translateX(16px);
}
.burger-menu.is-open { transform: translateX(0); }
.burger-menu a {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 14px;
  border-bottom-color: rgba(255,255,255,.07);
}
.burger-menu a:hover,.burger-menu a:focus-visible { padding-left: 13px; }
.burger-menu-separator { margin: 3px 0; opacity: .65; }
.burger-menu .facebook-icon { width:21px; height:21px; flex-basis:21px; font-size:15px; }

/* ===== FINITION — CONTACT / FACEBOOK EN BAS À DROITE ===== */
.discover-contact {
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}
.discover-contact-copy {
  padding-left: 13px;
  border-left: 4px solid var(--icare-yellow);
  color: var(--icare-white);
  font-size: clamp(11px,.9vw,14px);
  line-height: 1.35;
}
.discover-contact-copy strong,
.discover-contact-copy span { display:block; }
.discover-contact-copy strong { margin-bottom:3px; font-weight:750; }
.discover-contact-actions {
  display:flex;
  gap:8px;
  padding-left:17px;
}
.discover-action {
  min-height:33px;
  padding:6px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fff;
  text-decoration:none;
  font-family:var(--font-main);
  font-size:12px;
  font-weight:750;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}
.discover-action:hover,.discover-action:focus-visible {
  color:var(--icare-yellow);
  border-color:rgba(255,209,10,.72);
  background:rgba(0,0,0,.48);
  transform:translateY(-1px);
}
.mail-round,.fb-round {
  width:21px;height:21px;display:grid;place-items:center;border-radius:50%;
  font-family:Arial,sans-serif;font-weight:700;font-size:14px;
}
.mail-round { color:var(--icare-yellow); border:1px solid rgba(255,209,10,.70); }
.fb-round { color:#fff; background:#4267b2; }

@media (max-width:760px) {
  .burger-menu { width:min(238px,78vw); min-width:0; top:58px; right:12px; padding:8px 10px 10px; }
  .burger-menu a { min-height:28px; font-size:13px; }
  .discover-contact-actions { flex-wrap:wrap; }
}


/* Signature d'identification Icare Encore dans le bloc bas-droite */
.discover-signature {
  display: block;
  margin-bottom: 8px;

  color: var(--icare-white);
  font-size: clamp(11px, 0.95vw, 15px);
  line-height: 1.3;
  font-weight: 750;
}



/* ===== AJUSTEMENT FINAL DU BLOC CONTACT ===== */

/* Une seule barre jaune : celle portée par .discover-contact-copy */
.discover-contact::before,
.discover-contact::after {
  content: none !important;
  display: none !important;
}

.discover-contact-copy {
  border-left: 4px solid var(--icare-yellow);
  padding-left: 14px;
}

.discover-signature {
  margin-bottom: 7px;
  max-width: 390px;
  line-height: 1.28;
}

.discover-contact-copy > strong {
  display: block;
  margin: 0;
  font-size: clamp(11px, .86vw, 13px);
  font-weight: 650;
  opacity: .92;
}

.discover-contact-actions {
  margin-top: 0;
}

/* ==========================================================================
   SEO / ACCESSIBILITÉ — AJOUTS SANS IMPACT SUR LA MISE EN PAGE
   ========================================================================== */

/* .brand-title est désormais un vrai <h1> : neutralise les marges natives. */
h1.brand-title {
  margin: 0;
}

/* Lien d’évitement : invisible au repos, visible uniquement au clavier. */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1000;

  padding: 9px 13px;

  color: #111;
  background: var(--icare-yellow);
  border-radius: 8px;

  font-family: var(--font-main);
  font-weight: 700;
  text-decoration: none;

  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Repère de page courante accessible dans le menu burger,
   sans modifier l’aspect par défaut du menu. */
.burger-menu a[aria-current="page"] {
  font-weight: 800;
}

/* Contenu réservé aux moteurs de recherche et aux technologies d’assistance :
   visuellement masqué (hors écran) mais présent dans le DOM et l’arbre
   d’accessibilité, à la différence de display:none. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   16. GABARIT DES SOUS-PAGES (association, création, événement, animation,
       portfolio, projets…)
   --------------------------------------------------------------------------
   Réutilise le même vocabulaire visuel que l'accueil (--icare-*, --font-*,
   .discover-action, .burger / .burger-menu) mais dans un gabarit scrollable
   classique, à la différence de la scène plein écran non scrollable de
   l'accueil.
   ========================================================================== */

/* Sous-pages : on annule le verrouillage du scroll pensé pour l'accueil.
   La classe est posée sur <html> ET <body> pour couvrir tous les
   navigateurs, l'accueil (sans cette classe) n'est pas affecté. */
html.subpage,
body.subpage {
  overflow: auto;
  height: auto;
  min-height: 100%;
}

:root {
  --content-max-width: 1120px;
  --panel-bg: rgba(7, 21, 47, 0.72);
  --panel-border: rgba(255, 255, 255, 0.12);
}

/* ---- Bandeau supérieur (marque + burger + titre de page) ---- */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 6vh;
  background: var(--icare-night);
}

.page-header .sky { z-index: -2; }

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(5,11,26,.35) 0%, rgba(5,11,26,.55) 55%, var(--icare-night) 100%);
}

.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.2vh 4vw 0;
}

.brand-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 740;
  font-size: clamp(19px, 2.3vw, 28px);
  letter-spacing: -0.01em;
}

.brand-mini span:first-child { color: var(--icare-white); }
.brand-mini span:last-child { color: var(--icare-yellow); }

.page-title-block {
  position: relative;
  z-index: 4;
  max-width: var(--content-max-width);
  margin: 5vh auto 0;
  padding: 0 4vw;
  color: var(--icare-white);
}

.page-eyebrow {
  margin: 0 0 6px;
  color: var(--icare-yellow);
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(11px, 1vw, 13px);
}

.page-title-block h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 740;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 0.97;
}

.page-lead {
  max-width: 62ch;
  margin: 0 0 28px;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.page-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.page-quicknav a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--icare-white);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(12px, 0.95vw, 14px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.page-quicknav a:hover,
.page-quicknav a:focus-visible {
  background: var(--icare-yellow);
  border-color: var(--icare-yellow);
  color: #111;
}

/* ---- Corps de page ---- */
.page-content {
  background: var(--icare-night);
  color: var(--icare-white);
  padding: 6vh 4vw 4vh;
}

.page-section {
  max-width: var(--content-max-width);
  margin: 0 auto 5vh;
  padding: 32px clamp(18px, 3vw, 40px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-medium);
  scroll-margin-top: 20px;
}

.page-section h2 {
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--icare-yellow);
  font-family: var(--font-display);
  font-weight: 740;
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--icare-white);
}

.page-section h3 {
  margin: 26px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--icare-yellow);
}

.page-section p {
  margin: 0 0 16px;
  line-height: 1.6;
  font-size: clamp(14.5px, 1.05vw, 16px);
  color: rgba(255, 255, 255, 0.90);
}

.page-highlight {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 4px solid var(--icare-yellow);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-script);
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--icare-white);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* ---- Grille "piliers" (4 cartes image + titre + texte) ---- */
.pillar-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.pillar-card {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  transition: transform .25s ease, border-color .25s ease;
}

.pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--icare-yellow);
}

.pillar-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.pillar-card-body { padding: 18px 20px 22px; }

.pillar-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--icare-yellow);
}

.pillar-card p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Vidéos / réseaux sociaux ---- */
.media-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 26px;
}

@media (min-width: 768px) {
  .media-layout { flex-direction: row; align-items: flex-start; }
  .media-col-social { flex: 0 0 36%; max-width: 36%; }
  .media-col-videos { flex: 1 1 0; }
}

.media-col-videos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 2px solid var(--icare-yellow);
  border-radius: 8px;
  background: #000;
}

.media-frame iframe,
.media-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.social-feed-title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--icare-yellow);
  font-size: clamp(14px, 1.3vw, 17px);
}

.social-feed-frame {
  display: flex;
  justify-content: center;
  border: 2px solid var(--icare-yellow);
  border-radius: 8px;
  padding: 10px;
}

.social-feed-frame iframe { max-width: 100%; }

.social-feed-fallback {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.social-feed-fallback a {
  color: var(--icare-yellow);
  font-weight: 700;
}

/* ---- Avantages fiscaux ---- */
.fiscal-list {
  margin: 0 0 8px;
  padding-left: 20px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

/* ---- Grille "mécènes" ---- */
.donor-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.donor-card {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  text-align: center;
}

.donor-card .donor-photo {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.donor-card-body { padding: 16px 18px 20px; }

.donor-logo {
  display: block;
  margin: 0 auto 12px;
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

.donor-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.page-cta {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--panel-border);
  text-align: center;
}

.page-cta h3 { margin-top: 0; }

/* ---- Liens partenaires ---- */
.partner-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.partner-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border);
  color: var(--icare-white);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  transition: background .2s ease, border-color .2s ease;
}

.partner-link:hover,
.partner-link:focus-visible {
  background: rgba(255, 209, 10, 0.10);
  border-color: var(--icare-yellow);
}

.partner-logo {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* ---- Mentions légales ---- */
.page-legal {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 clamp(18px, 3vw, 40px);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: .85rem;
}

/* ---- Pied de page de contenu (reprend .discover-action de l'accueil) ---- */
.page-footer {
  background: var(--icare-night);
  border-top: 1px solid var(--panel-border);
  padding: 5vh 4vw 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.page-footer p {
  margin: 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 760px) {
  .page-topbar { padding: 3vh 5vw 0; }
  .page-title-block { padding: 0 5vw; margin-top: 4vh; }
  .page-content { padding: 5vh 5vw 8vh; }
  .page-section { padding: 24px 18px; }
}


/* ==========================================================================
   ICARE ENCORE — PAGE TYPE / GRAMMAIRE DES PAGES INTÉRIEURES
   Référence : accueil validé du 21/08/2026.
   ========================================================================== */

:root {
  --icare-blue: #0b62d8;
  --icare-blue-deep: #084a9b;
  --icare-sky: var(--icare-blue-sky);
  --icare-yellow: #ffd10a;
  --icare-black: #05070b;
  --icare-white: #ffffff;
  --icare-night: #07152f;

  --font-main: "Space Grotesk", Arial, sans-serif;
  --font-display: "Syne", "Arial Black", sans-serif;
  --font-script: "Kalam", cursive;
  --font-claim-strong: "Fugaz One", "Arial Black", sans-serif;

  --shadow-soft: 4px 6px 10px rgba(0,0,0,.22);
  --shadow-medium: 7px 10px 18px rgba(0,0,0,.28);
  --shadow-hard: 8px 10px 0 rgba(0,0,0,.55);

  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-image: 30px;

  --shell: min(1180px, calc(100% - 8vw));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--icare-night);
  color: var(--icare-white);
  font-family: var(--font-main);
  overflow-x: hidden;
}

a { color: inherit; }
button, a { font: inherit; }
button { border: 0; }

.skip-link {
  position: fixed;
  left: 14px;
  top: -60px;
  z-index: 100;
  background: var(--icare-yellow);
  color: var(--icare-night);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus { top: 14px; }

.shell { width: var(--shell); margin-inline: auto; }

/* ---------- En-tête ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 94px;
  pointer-events: none;
}

.mini-brand {
  position: absolute;
  top: 20px;
  left: 3vw;
  display: grid;
  width: 175px;
  text-decoration: none;
  pointer-events: auto;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.24));
}
.mini-brand__icare,
.mini-brand__encore {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: .79;
  letter-spacing: -.04em;
  transform: scaleX(.74);
  transform-origin: left center;
}
.mini-brand__icare { color: var(--icare-white); }
.mini-brand__encore { color: var(--icare-yellow); }
.mini-brand__tagline {
  margin-top: 7px;
  font-size: 8px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.mini-brand__tagline strong { color: var(--icare-yellow); }

/* Burger : langage repris de l'accueil */
.burger {
  position: absolute;
  right: 3vw;
  top: 29px;
  z-index: 52;
  width: 42px;
  height: 36px;
  padding: 3px 0;
  display: grid;
  align-content: space-between;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
.burger span {
  height: 4px;
  border-radius: 6px;
  background: #080808;
  box-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: transform .22s ease, opacity .22s ease, background .22s ease;
}
.burger span:last-child { background: var(--icare-yellow); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(13px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-13px) rotate(-45deg); background: var(--icare-yellow); }

.burger-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 51;
  width: min(320px, 84vw);
  height: 100dvh;
  padding: 104px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(145deg, rgba(7,21,47,.97), rgba(5,7,11,.94));
  border-left: 1px solid rgba(255,255,255,.14);
  box-shadow: -18px 0 45px rgba(0,0,0,.27);
  transform: translateX(104%);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .22s ease;
}
.burger-menu[aria-hidden="false"] {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.burger-menu-group { display: grid; gap: 2px; }
.burger-menu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 10px;
  color: var(--icare-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.burger-menu a:hover,
.burger-menu a:focus-visible {
  background: rgba(255,255,255,.10);
  color: var(--icare-yellow);
  transform: translateX(-3px);
}
.burger-menu-separator {
  height: 1px;
  margin: 8px 8px;
  background: linear-gradient(90deg, transparent, rgba(255,209,10,.55), transparent);
}
.facebook-link { gap: 9px; }
.facebook-icon {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #4267b2;
  font-family: Arial,sans-serif;
  font-weight: 700;
}

/* ---------- Hero intérieur ---------- */

.inner-hero {
  position: relative;
  min-height: 780px;
  height: min(92vh, 920px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 67% 34%, rgba(255,255,255,.42) 0 7%, transparent 35%),
    linear-gradient(155deg, #7cc9f4 0%, #3b9de1 48%, #0b62d8 100%);
}
.inner-hero__sky {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(ellipse at 60% 18%, rgba(255,255,255,.70), transparent 27%),
    radial-gradient(ellipse at 78% 42%, rgba(255,255,255,.32), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(7,21,47,.17));
}
.inner-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: -3;
  background: linear-gradient(180deg, transparent, rgba(7,21,47,.62));
}

.inner-hero__content {
  min-height: 100%;
  padding-top: 150px;
  padding-bottom: 110px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(36px, 6vw, 90px);
}

.inner-hero__copy { max-width: 520px; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--icare-yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.inner-hero h1,
.section-heading h2,
.story-copy h2,
.cta-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.055em;
}
.inner-hero h1 {
  font-size: clamp(54px, 6.6vw, 102px);
  line-height: .88;
  text-shadow: 0 5px 16px rgba(0,0,0,.16);
}
.inner-hero h1 span,
.section-heading h2 span,
.story-copy h2 span,
.cta-panel h2 span { color: var(--icare-yellow); }

.hero-script {
  margin: 28px 0 8px;
  font-family: var(--font-script);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.08;
}
.hero-intro {
  max-width: 510px;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* cercle photo : écho direct au cercle de l'accueil */
.hero-orbit {
  position: relative;
  width: min(45vw, 570px);
  aspect-ratio: 1;
  justify-self: end;
  margin: 0;
}
.hero-orbit__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-orbit__ring--yellow {
  inset: -3.2%;
  border: clamp(8px, 1vw, 15px) solid var(--icare-yellow);
  transform: translate(17px, -12px);
  opacity: .95;
}
.hero-orbit__ring--blue {
  inset: -1%;
  border: 5px solid rgba(7,21,47,.92);
  transform: translate(-18px, 14px);
}
.photo-placeholder {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--icare-white);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(7,21,47,.22), rgba(7,21,47,.62)),
    repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 1px, transparent 1px 28px),
    linear-gradient(140deg, #63bdec, #0b62d8 62%, #083b88);
  box-shadow: var(--shadow-medium);
}
.photo-placeholder span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 28px);
}
.photo-placeholder small { opacity: .75; }
.photo-placeholder--hero {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hero-orbit figcaption {
  position: absolute;
  right: 3%;
  bottom: -44px;
  font-family: var(--font-script);
  font-size: 20px;
  transform: rotate(-3deg);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: white;
  text-decoration: none;
  transform: translateX(-50%);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.scroll-cue b { color: var(--icare-yellow); font-size: 21px; }

/* lignes de vent décoratives, volontairement discrètes */
.wind-line {
  position: absolute;
  width: 420px;
  height: 170px;
  border: 3px solid rgba(255,255,255,.24);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-11deg);
}
.wind-line--one { left: -190px; top: 54%; }
.wind-line--two {
  right: -230px;
  top: 13%;
  width: 520px;
  border-color: rgba(255,209,10,.20);
  border-left-color: transparent;
  border-bottom-color: transparent;
}

/* ---------- Sections ---------- */

.section { padding: clamp(80px, 9vw, 132px) 0; }

.section--blue {
  background:
    radial-gradient(circle at 85% 10%, rgba(100,185,239,.25), transparent 35%),
    linear-gradient(145deg, #0b62d8, #083b88);
}
.section--sky {
  color: var(--icare-night);
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,.8), transparent 26%),
    linear-gradient(155deg, #bfe5fa, #78c5ef 58%, #58ade4);
}
.section--night {
  background:
    radial-gradient(circle at 13% 74%, rgba(11,98,216,.25), transparent 33%),
    linear-gradient(140deg, #07152f, #05070b);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 48px;
}
.section-heading h2,
.story-copy h2,
.cta-panel h2 {
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: .97;
}
.section-heading > p:last-child,
.story-copy > p,
.cta-panel p {
  font-size: 17px;
  line-height: 1.7;
}
.section-heading > p:last-child { max-width: 680px; color: rgba(255,255,255,.86); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.glass-card {
  position: relative;
  min-height: 240px;
  padding: 34px 30px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.glass-card--accent { border-color: rgba(255,209,10,.58); }
.card-index {
  position: absolute;
  right: 25px;
  top: 20px;
  color: rgba(255,209,10,.72);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
}
.glass-card h3 {
  margin: 38px 0 12px;
  font-family: var(--font-display);
  font-size: 28px;
}
.glass-card p { margin: 0; line-height: 1.65; color: rgba(255,255,255,.82); }

.story-row {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
}
.story-row--reverse { grid-template-columns: 1.1fr .9fr; }
.story-row--reverse .story-copy { order: 2; }
.story-row--reverse .story-visual { order: 1; }
.story-copy { max-width: 530px; }
.section--sky .eyebrow { color: var(--icare-blue-deep); }
.section--sky .story-copy h2 span { color: var(--icare-blue); }
.story-copy > p { color: rgba(7,21,47,.78); }
.section--night .story-copy > p { color: rgba(255,255,255,.78); }

.story-visual { position: relative; }
.photo-placeholder--wide {
  width: 100%;
  min-height: 430px;
  border-radius: var(--radius-image) 86px var(--radius-image) var(--radius-image);
}
.photo-placeholder--portrait {
  width: min(100%, 460px);
  min-height: 570px;
  border-radius: 110px var(--radius-image) var(--radius-image) var(--radius-image);
}
.story-visual--portrait { justify-self: start; width: 100%; }
.photo-caption {
  display: block;
  margin: 10px 12px 0;
  font-size: 12px;
  color: rgba(7,21,47,.60);
}

.icare-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--icare-blue-deep);
  text-decoration: none;
  font-weight: 800;
}
.icare-link b {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  color: var(--icare-night);
  background: var(--icare-yellow);
  transition: transform .18s ease;
}
.icare-link:hover b { transform: translateX(4px); }

.note-card {
  margin-top: 30px;
  padding: 24px 26px 24px 30px;
  border-left: 4px solid var(--icare-yellow);
  border-radius: 0 18px 18px 0;
  background: rgba(255,255,255,.08);
}
.note-card strong {
  color: var(--icare-yellow);
  font-family: var(--font-display);
  font-size: 18px;
}
.note-card p {
  margin: 7px 0 0;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

/* ---------- Grand visuel ---------- */

.immersive-panel {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #6fbfee;
}
.immersive-panel__image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.64);
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -.05em;
  background:
    linear-gradient(90deg, rgba(7,21,47,.60), rgba(7,21,47,.06) 60%),
    radial-gradient(circle at 72% 33%, rgba(255,255,255,.64), transparent 18%),
    linear-gradient(155deg, #8ed2f5, #3a9ee1 62%, #0b62d8);
}
.immersive-panel__copy {
  position: absolute;
  left: max(4vw, calc((100vw - 1180px)/2));
  bottom: 62px;
  max-width: 520px;
  padding: 23px 28px;
  border-left: 4px solid var(--icare-yellow);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(7,21,47,.82), rgba(7,21,47,.38));
  backdrop-filter: blur(8px);
}
.immersive-panel__copy .hero-script { margin: 0 0 7px; }
.immersive-panel__copy p:last-child { margin: 0; line-height: 1.55; }

/* ---------- CTA ---------- */

.section--cta {
  background:
    radial-gradient(circle at 90% 15%, rgba(255,209,10,.12), transparent 27%),
    var(--icare-night);
}
.cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  padding: clamp(36px, 5vw, 62px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(11,98,216,.30), rgba(255,255,255,.05));
  box-shadow: var(--shadow-medium);
}
.cta-panel p { max-width: 720px; color: rgba(255,255,255,.77); }

.icare-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 0 20px 0 24px;
  border-radius: var(--radius-pill);
  background: var(--icare-yellow);
  color: var(--icare-night);
  text-decoration: none;
  font-weight: 800;
  box-shadow: 4px 6px 0 rgba(0,0,0,.35);
}
.icare-button span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--icare-night);
  color: var(--icare-yellow);
}

/* ---------- Footer ---------- */

/* Structure canonique R3 : footer compact horizontal. */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 10px clamp(10px, 2vw, 28px) 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-footer__line {
  width: min(90%, 1440px);
  min-height: 38px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 2.2vw, 34px);
  color: rgba(255,255,255,.86);
}

.site-footer__logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer__logo {
  display: block;
  width: 34px;
  height: 38px;
  max-width: 34px;
  max-height: 38px;
  object-fit: contain;
}

.site-footer__identity {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  line-height: 1;
}

.site-footer__identity strong {
  margin: 0;
  font-family: var(--font-display, "Syne", sans-serif);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.site-footer__identity strong span { color: #fff; }
.site-footer__identity strong em { color: var(--icare-yellow, #ffd10a); font-style: normal; }
.site-footer__identity small {
  color: rgba(255,255,255,.65);
  font-family: var(--font-main, "Space Grotesk", sans-serif);
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}

.site-footer__identity + .site-footer__icon-link { margin-left: auto; }
.site-footer__icon-link {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.site-footer__icon-link svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-footer__facebook svg path { fill: currentColor; stroke: none; }
.site-footer__icon-link:hover,
.site-footer__icon-link:focus-visible {
  color: var(--icare-yellow, #ffd10a);
  transform: translateY(-1px);
}
.site-footer__since {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-family: var(--font-script, "Kalam", cursive);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1deg);
}

/* Compatibilité temporaire avec les pages qui utilisent encore l'ancien HTML. */
.site-footer__inner {
  width: min(90%, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 50px;
  align-items: end;
}
.site-footer__inner > div > strong {
  font-family: var(--font-display);
  font-size: 24px;
}
.site-footer__inner > div > strong span { color: var(--icare-yellow); }
.site-footer__inner > div > p { margin: 5px 0 0; color: rgba(255,255,255,.58); }
.site-footer__inner nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__inner nav a { color: rgba(255,255,255,.76); text-decoration: none; font-size: 13px; }
.site-footer__inner nav a:hover { color: var(--icare-yellow); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  :root { --shell: min(100% - 40px, 760px); }

  .inner-hero {
    height: auto;
    min-height: 900px;
  }
  .inner-hero__content {
    grid-template-columns: 1fr;
    padding-top: 150px;
    align-content: center;
  }
  .inner-hero__copy { max-width: 620px; }
  .hero-orbit {
    width: min(74vw, 520px);
    justify-self: center;
  }

  .feature-grid { grid-template-columns: 1fr; }
  .glass-card { min-height: 180px; }

  .story-row,
  .story-row--reverse {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .story-row--reverse .story-copy,
  .story-row--reverse .story-visual { order: initial; }
  .story-copy { max-width: 690px; }
  .story-visual--portrait { justify-self: center; }
  .photo-placeholder--wide { min-height: 380px; }

  .cta-panel { grid-template-columns: 1fr; gap: 28px; }
  .icare-button { justify-self: start; }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 30px); }

  .site-header { height: 78px; }
  .mini-brand { left: 15px; top: 16px; width: 150px; }
  .mini-brand__icare,
  .mini-brand__encore { font-size: 22px; }
  .mini-brand__tagline { font-size: 7px; }

  .burger { right: 17px; top: 20px; width: 36px; height: 32px; }
  .burger span { height: 3px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

  .burger-menu { width: min(260px, 82vw); padding: 84px 14px 20px; }
  .burger-menu a { min-height: 31px; font-size: 13px; }

  .inner-hero { min-height: 830px; }
  .inner-hero__content { padding-top: 125px; padding-bottom: 100px; gap: 48px; }
  .inner-hero h1 { font-size: clamp(49px, 16vw, 68px); }
  .hero-script { font-size: 25px; }
  .hero-intro { font-size: 15px; }
  .hero-orbit { width: 78vw; }
  .hero-orbit figcaption { font-size: 17px; bottom: -37px; }

  .section { padding: 70px 0; }
  .section-heading h2,
  .story-copy h2,
  .cta-panel h2 { font-size: 38px; }

  .glass-card { padding: 26px 23px; }
  .photo-placeholder--wide { min-height: 270px; border-radius: 22px 54px 22px 22px; }
  .photo-placeholder--portrait { min-height: 430px; border-radius: 70px 22px 22px 22px; }

  .immersive-panel { min-height: 520px; }
  .immersive-panel__copy {
    left: 15px;
    right: 15px;
    bottom: 30px;
    padding: 19px 21px;
  }

  .cta-panel { padding: 28px 22px; border-radius: 24px; }

  .site-footer nav { gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================================
   COMPATIBILITÉ AVEC LE SCRIPT COMMUN DU SITE
   Le script partagé ajoute/enlève .is-open sur le bouton et le menu.
   Ces règles gardent exactement le rendu graphique de cette page-type.
   ========================================================================== */

.burger-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.burger.is-open span:nth-child(1) {
  transform: translateY(13px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-13px) rotate(-45deg);
  background: var(--icare-yellow);
}

@media (max-width: 560px) {
  .burger.is-open span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
  }

  .burger.is-open span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
  }
}



/* ==========================================================================
   COMPOSANTS PAGES INTÉRIEURES — IMAGE FIRST
   ========================================================================== */

.subpage {
  --content-wide: min(1380px, calc(100% - 7vw));
  --content-medium: min(1180px, calc(100% - 8vw));
}

.subpage .shell-wide {
  width: var(--content-wide);
  margin-inline: auto;
}

.subpage .section--light {
  color: var(--icare-night);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(155deg, #d8f0fc, #8ed0f2 60%, #65b8e8);
}

.media-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.media-card {
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow-medium);
}

.media-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, #69bcec, #0b62d8);
}

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

.media-card__body {
  padding: 24px 24px 27px;
}

.media-card__body h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 32px);
}

.media-card__body p {
  margin: 0;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}

.panorama-break {
  position: relative;
  min-height: clamp(300px, 34vw, 520px);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #215b93;
}

.panorama-break img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panorama-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,21,47,.46), rgba(7,21,47,.08), rgba(7,21,47,.38));
}

.panorama-break__copy {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 40px));
  text-align: center;
  color: white;
  font-family: var(--font-script);
  font-size: clamp(27px, 3.2vw, 48px);
  line-height: 1.12;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

.split-feature {
  width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: clamp(34px, 5vw, 72px);
}

.split-feature__copy {
  align-self: center;
  max-width: 520px;
}

.split-feature__copy h2,
.workshop-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: .96;
  letter-spacing: -.05em;
}

.split-feature__copy p,
.workshop-copy p {
  font-size: 17px;
  line-height: 1.68;
}

.split-feature__media {
  min-height: 480px;
  overflow: hidden;
  border-radius: 80px 28px 28px 28px;
  box-shadow: var(--shadow-medium);
}

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

.workshop-layout {
  width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.workshop-copy {
  max-width: 500px;
}

.workshop-copy p {
  color: rgba(255,255,255,.82);
}

.photo-mosaic {
  display: grid;
  grid-template-columns: 1.05fr .9fr .8fr;
  grid-template-rows: 250px 210px;
  gap: 14px;
}

.photo-mosaic figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
}

.photo-mosaic figure:first-child {
  grid-row: 1 / 3;
}

.photo-mosaic figure:nth-child(2) {
  grid-column: 2 / 4;
}

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

.fact-strip {
  width: var(--content-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(7,21,47,.12);
  border-top: 1px solid rgba(7,21,47,.16);
  border-bottom: 1px solid rgba(7,21,47,.16);
}

.fact-strip article {
  padding: 34px clamp(22px, 3vw, 44px);
  background: rgba(255,255,255,.50);
}

.fact-strip .eyebrow { color: var(--icare-blue-deep); }

.fact-strip h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  color: var(--icare-night);
  font-size: clamp(24px, 2vw, 31px);
}

.fact-strip p {
  margin: 0;
  color: rgba(7,21,47,.72);
  line-height: 1.55;
}

.animation-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.animation-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.animation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(7,21,47,.88) 0%, rgba(7,21,47,.65) 35%, rgba(7,21,47,.15) 68%, rgba(7,21,47,.08) 100%);
}

.animation-hero .inner-hero__content {
  grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
}

.animation-hero .inner-hero__copy { max-width: 600px; }
.animation-hero .hero-orbit { opacity: 0; pointer-events: none; }

@media (max-width: 980px) {

  .media-card-grid { grid-template-columns: 1fr 1fr; }
  .media-card-grid > :last-child { grid-column: 1 / -1; }

  .split-feature,
  .workshop-layout { grid-template-columns: 1fr; }

  .split-feature__copy,
  .workshop-copy { max-width: 700px; }

  .photo-mosaic { grid-template-rows: 220px 190px; }

  .fact-strip { grid-template-columns: 1fr; }

  .animation-hero .inner-hero__content { grid-template-columns: 1fr; }
  .animation-hero { min-height: 720px; }

  .animation-hero::before {
    background: linear-gradient(180deg, rgba(7,21,47,.68) 0%, rgba(7,21,47,.48) 48%, rgba(7,21,47,.68) 100%);
  }
}

@media (max-width: 760px) {
  .subpage .shell-wide,
  .split-feature,
  .workshop-layout,
  .fact-strip {
    width: calc(100% - 30px);
  }

  .animation-hero { min-height: 690px; }

  .animation-hero::before {
    background: linear-gradient(180deg, rgba(7,21,47,.80) 0%, rgba(7,21,47,.54) 52%, rgba(7,21,47,.80) 100%);
  }

  .animation-hero .inner-hero__content {
    padding-top: 130px;
    padding-bottom: 80px;
  }

  .animation-hero .inner-hero__copy {
    align-self: end;
    max-width: 92%;
  }

  .media-card-grid { grid-template-columns: 1fr; }
  .media-card-grid > :last-child { grid-column: auto; }
  .media-card__image { aspect-ratio: 16 / 9; }

  .split-feature__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 56px 22px 22px 22px;
  }

  .photo-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 230px 180px;
  }

  .photo-mosaic figure:first-child {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .photo-mosaic figure:nth-child(2) { grid-column: auto; }

  .fact-strip article { padding: 27px 22px; }
  .panorama-break { min-height: 340px; }
}

@media (max-width: 430px) {
  .animation-hero { min-height: 640px; }

  .animation-hero .inner-hero__content {
    padding-top: 120px;
    padding-bottom: 54px;
  }

  .animation-hero .inner-hero h1 {
    font-size: clamp(44px, 14vw, 60px);
  }

  .animation-hero .hero-script {
    font-size: clamp(22px, 7vw, 28px);
  }

  .animation-hero .hero-intro { font-size: 15px; }

  .photo-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .photo-mosaic figure,
  .photo-mosaic figure:first-child,
  .photo-mosaic figure:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}



/* ==========================================================================
   ANIMATION — PAGE À FOND PHOTOGRAPHIQUE CONTINU
   --------------------------------------------------------------------------
   Principe :
   - une photographie fixe commune à toute la page ;
   - des panneaux translucides espacés ;
   - une couleur propre à chaque section ;
   - aucune coupure plein écran franche entre les sections.
   ========================================================================== */

body.subpage.animation-page {
  position: relative;
  min-height: 100%;
  background: #0b315f;
}

/* Fond photographique continu.
   On évite background-attachment:fixed pour conserver un comportement fiable
   sur smartphone : le pseudo-élément fixe produit le même effet visuel. */
body.subpage.animation-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5, 20, 47, .20), rgba(5, 20, 47, .32)),
    url("assets/icare-evenementiel.webp") center center / cover no-repeat;
}

body.subpage.animation-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(4,20,47,.08), rgba(4,20,47,.30));
}

.animation-page main {
  position: relative;
  z-index: 1;
}

.animation-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 82px;
  display: grid;
  gap: clamp(28px, 4vw, 58px);
}

/* Panneau générique */
.animation-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.animation-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.animation-panel__inner {
  width: min(1320px, calc(100% - 7vw));
  margin-inline: auto;
  padding: clamp(58px, 6vw, 94px) 0;
}

/* Couleurs des panneaux : différentes, mais toutes reliées au fond. */
.animation-panel--hero::before {
  background:
    linear-gradient(100deg, rgba(5,25,58,.91) 0%, rgba(8,49,99,.78) 48%, rgba(14,89,157,.38) 100%);
}

.animation-panel--festival::before {
  background:
    linear-gradient(145deg, rgba(11,98,216,.87), rgba(7,63,140,.80));
}

.animation-panel--exposition::before {
  background:
    linear-gradient(145deg, rgba(211,240,254,.88), rgba(101,184,232,.76));
}

.animation-panel--ateliers::before {
  background:
    linear-gradient(145deg, rgba(7,21,47,.91), rgba(11,65,126,.82));
}

.animation-panel--pratique::before {
  background:
    linear-gradient(145deg, rgba(238,248,253,.88), rgba(176,220,244,.76));
}

.animation-panel--cta::before {
  background:
    linear-gradient(125deg, rgba(5,20,47,.92), rgba(8,59,136,.84));
}

/* HERO DANS SON PANNEAU */
.animation-panel--hero {
  min-height: min(760px, calc(100vh - 145px));
  display: grid;
  align-items: stretch;
}

.animation-hero-layout {
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(340px, .80fr) minmax(0, 1.20fr);
  align-items: center;
  gap: clamp(34px, 5vw, 74px);
}

.animation-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 590px;
}

.animation-hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(54px, 6.2vw, 94px);
  line-height: .90;
  letter-spacing: -.055em;
}

.animation-hero-copy h1 span {
  color: var(--icare-yellow);
}

.animation-hero-copy .hero-script {
  margin-top: 28px;
}

.animation-hero-copy .hero-intro {
  max-width: 540px;
}

.animation-hero-media {
  min-height: 520px;
  height: min(62vh, 650px);
  overflow: hidden;
  border-radius: 48% 28px 28px 48%;
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 20px 42px rgba(1,13,31,.28);
}

.animation-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Titres communs */
.animation-panel .section-heading {
  max-width: 840px;
}

.animation-panel .section-heading h2 {
  font-size: clamp(42px, 4.8vw, 70px);
}

.animation-panel--exposition,
.animation-panel--pratique {
  color: var(--icare-night);
}

.animation-panel--exposition .eyebrow,
.animation-panel--pratique .eyebrow {
  color: var(--icare-blue-deep);
}

/* FESTIVAL : cartes plus visuelles et intégrées au panneau */
.animation-panel--festival .media-card {
  background: rgba(6,31,69,.30);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(2,18,43,.20);
}

.animation-panel--festival .media-card__body {
  min-height: 152px;
}

/* Expositions */
.animation-panel--exposition .split-feature {
  width: 100%;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
}

.animation-panel--exposition .split-feature__copy h2 {
  color: var(--icare-night);
}

.animation-panel--exposition .split-feature__copy p {
  color: rgba(7,21,47,.76);
}

.animation-panel--exposition .split-feature__media {
  min-height: 520px;
  border-radius: 95px 28px 28px 28px;
}

/* Ateliers */
.animation-panel--ateliers .workshop-layout {
  width: 100%;
}

/* Bande pratique */
.animation-panel--pratique .fact-strip {
  width: 100%;
  border: 0;
  background: transparent;
  gap: 16px;
}

.animation-panel--pratique .fact-strip article {
  border-radius: 22px;
  border: 1px solid rgba(7,21,47,.13);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(6px);
}

/* CTA */
.animation-panel--cta .cta-panel {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Le footer reste séparé mais transparent vers le fond. */
.animation-page .site-footer {
  position: relative;
  z-index: 1;
  background: rgba(4,10,23,.92);
}

/* ==========================================================================
   RESPONSIVE DE LA PAGE À PANNEAUX
   ========================================================================== */

@media (max-width: 980px) {
  .animation-stage {
    width: min(100% - 36px, 880px);
    padding-top: 102px;
    gap: 32px;
  }

  .animation-panel__inner {
    width: min(100% - 44px, 780px);
    padding: 58px 0;
  }

  .animation-panel--hero {
    min-height: 0;
  }

  .animation-hero-layout {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .animation-hero-copy {
    max-width: 690px;
  }

  .animation-hero-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 70px 28px 28px 28px;
  }

  .animation-panel--exposition .split-feature {
    grid-template-columns: 1fr;
  }

  .animation-panel--exposition .split-feature__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .animation-panel--ateliers .workshop-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.subpage.animation-page::before,
  body.subpage.animation-page::after {
    /* Le pseudo-élément reste fixe, mais on privilégie un cadrage mobile. */
    background-position: 64% center;
  }

  .animation-stage {
    width: calc(100% - 22px);
    padding: 88px 0 44px;
    gap: 20px;
  }

  .animation-panel {
    border-radius: 24px;
  }

  .animation-panel__inner {
    width: calc(100% - 30px);
    padding: 42px 0;
  }

  .animation-hero-copy h1 {
    font-size: clamp(44px, 13vw, 62px);
  }

  .animation-hero-copy .hero-script {
    margin-top: 20px;
  }

  .animation-hero-media {
    aspect-ratio: 4 / 3;
    border-radius: 52px 20px 20px 20px;
  }

  .animation-panel .section-heading h2 {
    font-size: clamp(35px, 10vw, 46px);
  }

  .animation-panel--festival .media-card__body {
    min-height: 0;
  }

  .animation-panel--exposition .split-feature__media {
    aspect-ratio: 4 / 3;
    border-radius: 54px 20px 20px 20px;
  }

  .animation-panel--pratique .fact-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .animation-stage {
    width: calc(100% - 16px);
    padding-top: 82px;
    gap: 16px;
  }

  .animation-panel {
    border-radius: 20px;
  }

  .animation-panel__inner {
    width: calc(100% - 26px);
    padding: 34px 0;
  }

  .animation-hero-layout {
    gap: 30px;
  }

  .animation-hero-media {
    aspect-ratio: 1 / 1;
  }
}




/* ==========================================================================
   ANIMATION — VERSION ÉQUILIBRÉE TEXTE / IMAGE
   ========================================================================== */

/* Festival cards become horizontal-ish with smaller images */
.animation-panel--festival .media-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.animation-panel--festival .media-card {
  display: grid;
  grid-template-rows: 180px 1fr;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.animation-panel--festival .media-card__image {
  aspect-ratio: auto;
}

.animation-panel--festival .media-card__body {
  min-height: 0;
  padding: 22px 22px 24px;
}

.animation-panel--festival .media-card__body p {
  font-size: 15px;
  line-height: 1.55;
}

.animation-panel--festival .media-card__list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.5;
}

.animation-panel--festival .media-card__list li + li {
  margin-top: 5px;
}

/* Small controlled visual breathing zone */
.animation-breath {
  width: min(1180px, calc(100% - 10vw));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 280px;
}

.animation-breath__image {
  margin: 0;
  height: clamp(260px, 30vw, 390px);
  overflow: hidden;
  border-radius: 64px 24px 64px 24px;
  box-shadow: 0 20px 42px rgba(2,13,31,.26);
}

.animation-breath__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.animation-breath__copy {
  margin: 0;
  color: white;
  font-family: var(--font-script);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  text-shadow: 0 3px 14px rgba(0,0,0,.58);
}

/* Exposition richer copy, smaller image dominance */
.animation-panel--exposition .split-feature {
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
}

.animation-panel--exposition .split-feature__media {
  min-height: 420px;
}

.expo-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 24px;
}

.expo-point {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(7,21,47,.12);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.expo-point strong {
  display: block;
  margin-bottom: 4px;
  color: var(--icare-blue-deep);
}

.expo-point p {
  margin: 0;
  font-size: 14px;
  line-height: 1.48;
}

/* Workshop: less mosaic domination, more readable text */
.animation-panel--ateliers .workshop-layout {
  grid-template-columns: .95fr 1.05fr;
}

.workshop-copy {
  max-width: 610px;
}

.workshop-copy .workshop-details {
  margin: 18px 0 0;
  padding-left: 20px;
  color: rgba(255,255,255,.84);
  line-height: 1.58;
}

.workshop-copy .workshop-details li + li {
  margin-top: 6px;
}

.animation-panel--ateliers .photo-mosaic {
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: 220px 180px;
}

.animation-panel--ateliers .photo-mosaic figure:first-child {
  grid-column: 1 / 3;
  grid-row: auto;
}

.animation-panel--ateliers .photo-mosaic figure:nth-child(2) {
  grid-column: auto;
}

.animation-panel--ateliers .photo-mosaic figure {
  border-radius: 20px;
  transition: transform .24s ease, box-shadow .24s ease;
}

/* Free text interruption without a panel */
.animation-quote {
  width: min(1080px, calc(100% - 12vw));
  margin: 4px auto;
  padding: 14px 0;
  text-align: center;
  color: white;
  font-family: var(--font-script);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.12;
  text-shadow: 0 3px 14px rgba(0,0,0,.6);
}

/* Practical information: 2x2 rather than one long strip */
.animation-panel--pratique .fact-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.animation-panel--pratique .fact-strip article {
  min-height: 170px;
}

.animation-panel--pratique .fact-strip p {
  font-size: 15px;
}

/* Hover effects: progressive enhancement only */
@media (hover: hover) and (pointer: fine) {
  .animation-panel--festival .media-card:hover {
    transform: translateY(-5px);
    background: rgba(6,31,69,.45);
    box-shadow: 0 20px 34px rgba(2,18,43,.28);
  }

  .animation-panel--festival .media-card:hover img,
  .animation-breath__image:hover img {
    transform: scale(1.035);
  }

  .expo-point:hover {
    transform: translateX(4px);
    background: rgba(255,255,255,.48);
    border-color: rgba(11,98,216,.28);
  }

  .animation-panel--ateliers .photo-mosaic figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(0,0,0,.28);
  }

  .animation-panel--ateliers .photo-mosaic figure:hover img {
    transform: scale(1.025);
  }
}

.animation-panel--festival .media-card img,
.animation-panel--ateliers .photo-mosaic img {
  transition: transform .4s ease;
}

@media (max-width: 980px) {
  .animation-panel--festival .media-card-grid {
    grid-template-columns: 1fr;
  }

  .animation-panel--festival .media-card {
    grid-template-columns: minmax(200px, .7fr) 1.3fr;
    grid-template-rows: none;
  }

  .animation-panel--festival .media-card__image {
    min-height: 220px;
  }

  .animation-breath {
    grid-template-columns: 1fr;
    width: min(100% - 46px, 780px);
  }

  .animation-panel--exposition .split-feature,
  .animation-panel--ateliers .workshop-layout {
    grid-template-columns: 1fr;
  }

  .animation-panel--pratique .fact-strip {
    grid-template-columns: 1.5fr 1fr;
  }
}

@media (max-width: 760px) {
  .animation-panel--festival .media-card {
    grid-template-columns: 1fr;
  }

  .animation-panel--festival .media-card__image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .animation-breath {
    width: calc(100% - 34px);
    gap: 18px;
  }

  .animation-breath__image {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 46px 20px 46px 20px;
  }

  .animation-breath__copy {
    padding: 0 8px;
  }

  .animation-panel--exposition .split-feature__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .animation-panel--pratique .fact-strip {
    grid-template-columns: 1fr;
  }

  .animation-panel--pratique .fact-strip article {
    min-height: 0;
  }
}

@media (max-width: 430px) {
  .animation-quote {
    width: calc(100% - 34px);
    font-size: clamp(27px, 8vw, 36px);
  }

  .animation-panel--ateliers .photo-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .animation-panel--ateliers .photo-mosaic figure,
  .animation-panel--ateliers .photo-mosaic figure:first-child {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}




/* ==========================================================================
   ANIMATION V5 — RÉÉQUILIBRAGE DES HAUTEURS + FOND PHOTO TEST
   ========================================================================== */

/* Fond photographique continu plus lisible pour juger la transparence.
   Remplacer simplement cette image plus tard si besoin. */
body.subpage.animation-page::before {
  background:
    linear-gradient(rgba(5, 20, 47, .20), rgba(5, 20, 47, .34)),
    url("assets/icare-evenementiel.webp") center center / cover no-repeat;
}

/* Rythme général : moins d'air inutile entre les panneaux. */
.animation-stage {
  gap: clamp(22px, 2.8vw, 40px);
  padding-bottom: 56px;
}

/* Paddings communs légèrement réduits. */
.animation-panel__inner {
  padding: clamp(44px, 4.6vw, 70px) 0;
}

/* HERO : reste important, mais ne cherche plus à remplir presque tout l'écran. */
.animation-panel--hero {
  min-height: 620px;
}

.animation-panel--hero .animation-panel__inner {
  padding-top: clamp(52px, 5vw, 76px);
  padding-bottom: clamp(46px, 4vw, 64px);
}

.animation-hero-media {
  min-height: 430px;
  height: min(54vh, 560px);
}

/* FESTIVAL : section majeure, mais cartes plus compactes. */
.animation-panel--festival .animation-panel__inner {
  padding-top: clamp(48px, 4.5vw, 66px);
  padding-bottom: clamp(48px, 4.5vw, 66px);
}

.animation-panel--festival .section-heading {
  margin-bottom: 34px;
}

.animation-panel--festival .media-card {
  grid-template-rows: 155px 1fr;
}

.animation-panel--festival .media-card__body {
  padding: 20px 20px 22px;
}

/* Respiration photo : clairement secondaire. */
.animation-breath {
  min-height: 0;
  grid-template-columns: 1.05fr .95fr;
}

.animation-breath__image {
  height: clamp(210px, 24vw, 315px);
}

/* EXPOSITION : forte mais moins verticale. */
.animation-panel--exposition .animation-panel__inner {
  padding-top: clamp(46px, 4vw, 62px);
  padding-bottom: clamp(46px, 4vw, 62px);
}

.animation-panel--exposition .split-feature__media {
  min-height: 360px;
}

.expo-points {
  gap: 8px;
  margin-top: 18px;
}

.expo-point {
  padding: 12px 14px;
}

/* Citation : simple respiration, pas une section. */
.animation-quote {
  padding: 4px 0;
  margin-block: 0;
}

/* ATELIERS : section riche mais mieux contenue. */
.animation-panel--ateliers .animation-panel__inner {
  padding-top: clamp(46px, 4vw, 62px);
  padding-bottom: clamp(46px, 4vw, 62px);
}

.animation-panel--ateliers .photo-mosaic {
  grid-template-rows: 190px 150px;
}

.workshop-copy .workshop-details {
  margin-top: 14px;
}

.note-card {
  margin-top: 22px;
}

/* PRATIQUE : panneau intermédiaire, nettement plus compact. */
.animation-panel--pratique .animation-panel__inner {
  padding-top: clamp(36px, 3.3vw, 48px);
  padding-bottom: clamp(36px, 3.3vw, 48px);
}

.animation-panel--pratique .section-heading {
  margin-bottom: 28px;
}

.animation-panel--pratique .fact-strip article {
  min-height: 130px;
  padding: 24px 28px;
}

/* CTA : devient un vrai bandeau final, et non un second hero. */
.animation-panel--cta .animation-panel__inner {
  padding-top: 34px;
  padding-bottom: 34px;
}

.animation-panel--cta .cta-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
}

.animation-panel--cta .cta-panel h2 {
  font-size: clamp(34px, 3.8vw, 54px);
  max-width: 900px;
}

.animation-panel--cta .cta-panel p {
  margin-bottom: 0;
  max-width: 720px;
}

/* Transparence légèrement renforcée pour mieux laisser vivre le fond. */
.animation-panel--festival::before {
  background:
    linear-gradient(145deg, rgba(11, 98, 216, var(--panel-opacity-strong)), rgba(7, 63, 140, var(--panel-opacity-soft)));
}

.animation-panel--exposition::before {
  background:
    linear-gradient(145deg, rgba(220, 244, 255, var(--panel-opacity-strong)), rgba(112, 192, 235, var(--panel-opacity-soft)));
}

.animation-panel--ateliers::before {
  background:
    linear-gradient(145deg, rgba(7, 21, 47, var(--panel-opacity-strong)), rgba(11, 65, 126, var(--panel-opacity-soft)));
}

.animation-panel--pratique::before {
  background:
    linear-gradient(145deg, rgba(240, 250, 255, var(--panel-opacity-strong)), rgba(185, 226, 247, var(--panel-opacity-soft)));
}

.animation-panel--cta::before {
  background:
    linear-gradient(125deg, rgba(5, 20, 47, var(--panel-opacity-strong)), rgba(8, 59, 136, var(--panel-opacity-soft)));
}

@media (max-width: 980px) {
  .animation-panel--hero {
    min-height: 0;
  }

  .animation-hero-media {
    min-height: 0;
    height: auto;
  }

  .animation-panel--festival .media-card {
    grid-template-rows: none;
  }

  .animation-panel--ateliers .photo-mosaic {
    grid-template-rows: 190px 155px;
  }

  .animation-panel--cta .cta-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 760px) {
  .animation-stage {
    gap: 18px;
    padding-bottom: 36px;
  }

  .animation-panel__inner {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .animation-breath__image {
    height: auto;
  }

  .animation-panel--pratique .fact-strip article {
    min-height: 0;
    padding: 22px 20px;
  }

  .animation-panel--cta .animation-panel__inner {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .animation-panel--cta .cta-panel h2 {
    font-size: clamp(32px, 9.5vw, 43px);
  }
}



/* ==========================================================================
   ANIMATION V7 — VERSION COMPACTE
   Traduction en vraie page du visuel validé :
   titres réduits d'environ 20-25 %, trois cartes côte à côte,
   sections moins hautes, matière éditoriale conservée.
   ========================================================================== */

.animation-stage {
  gap: clamp(18px, 2vw, 30px);
  padding-bottom: 44px;
}

.animation-panel__inner {
  width: min(1180px, calc(100% - 64px));
  padding-top: clamp(34px, 3.2vw, 50px);
  padding-bottom: clamp(34px, 3.2vw, 50px);
}

/* HERO compact : impact conservé, hauteur réduite */
.animation-panel--hero {
  min-height: 0;
}
.animation-panel--hero .animation-panel__inner {
  padding-top: clamp(38px, 3.5vw, 54px);
  padding-bottom: clamp(38px, 3.5vw, 54px);
}
.animation-hero-copy h1 {
  font-size: clamp(54px, 5.2vw, 82px);
  line-height: .93;
}
.animation-hero-copy .hero-script {
  font-size: clamp(27px, 2.3vw, 38px);
  line-height: 1.12;
}
.animation-hero-copy .hero-intro {
  max-width: 620px;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.55;
}
.animation-hero-media {
  min-height: 0;
  height: clamp(310px, 32vw, 430px);
}

/* Titres de sections : environ 25 % sous la V6 */
.animation-page .section-heading h2,
.animation-page .split-feature__copy h2,
.animation-page .workshop-copy h2,
.animation-page .cta-panel h2 {
  font-size: clamp(38px, 4vw, 62px);
  line-height: .98;
}
.animation-page .section-heading > p:not(.eyebrow),
.animation-page .split-feature__copy > p,
.animation-page .workshop-copy > p {
  font-size: clamp(15px, 1.08vw, 17px);
  line-height: 1.55;
}

/* Repères du hero plus fins */
.organizer-proof {
  gap: 12px;
  margin-top: 22px;
}
.organizer-proof article {
  padding: 14px 16px;
  border-radius: 16px;
}
.organizer-proof strong {
  font-size: clamp(20px, 1.8vw, 27px);
}
.organizer-proof span {
  font-size: 12.5px;
}

/* 3 propositions réellement côte à côte sur desktop */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.offer-card {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 205px;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(5,31,70,.27);
  border: 1px solid rgba(255,255,255,.18);
}
.offer-card__media {
  height: 100%;
  min-height: 205px;
  overflow: hidden;
}
.offer-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-card__body {
  padding: 18px 18px 18px 19px;
  align-self: center;
}
.offer-card__body h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.55vw, 25px);
  line-height: 1.08;
}
.offer-card__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.48;
}

/* Les cartes historiques de la section festival deviennent elles aussi plus denses */
.media-card-grid {
  gap: 16px;
}
.animation-panel--festival .media-card {
  grid-template-rows: 135px 1fr;
}
.animation-panel--festival .media-card__body {
  padding: 17px 18px 19px;
}
.media-card__body h3 {
  font-size: clamp(21px, 1.7vw, 27px);
}
.media-card__body p,
.media-card__list {
  font-size: 13.5px;
  line-height: 1.48;
}

/* Exposition */
.split-feature {
  gap: clamp(28px, 3vw, 48px);
}
.animation-panel--exposition .split-feature__media {
  min-height: 300px;
  max-height: 390px;
}
.expo-points {
  gap: 7px;
  margin-top: 15px;
}
.expo-point {
  padding: 10px 13px;
}
.expo-point p {
  font-size: 13px;
}

/* Ateliers */
.workshop-layout {
  gap: clamp(28px, 3vw, 46px);
}
.animation-panel--ateliers .photo-mosaic {
  grid-template-rows: 160px 125px;
}
.workshop-details {
  font-size: 14px;
  line-height: 1.5;
}
.note-card {
  margin-top: 16px;
  padding: 16px 18px;
}

/* Les zones de respiration restent libres mais plus courtes */
.organizer-free-note {
  width: min(1000px, calc(100% - 64px));
  padding: 2px 0 8px;
}
.organizer-free-note .hero-script {
  font-size: clamp(25px, 2.3vw, 36px);
  margin-bottom: 7px;
}
.organizer-free-note p:last-child {
  font-size: 15px;
  line-height: 1.5;
}

/* Cadre d'intervention : 4 informations sur une ligne, peu de hauteur */
.organizer-process {
  gap: 12px;
  margin-top: 20px;
}
.organizer-process article {
  padding: 17px 16px;
  border-radius: 17px;
}
.organizer-process .step {
  margin-bottom: 7px;
  font-size: 11px;
}
.organizer-process h3 {
  margin-bottom: 5px;
  font-size: 18px;
}
.organizer-process p {
  font-size: 15px;
  line-height: 1.45;
}

/* Pratique : dense et lisible */
.animation-panel--pratique .section-heading {
  margin-bottom: 20px;
}
.organizer-practical-intro {
  margin-bottom: 20px;
  font-size: 15px;
}
.animation-panel--pratique .fact-strip {
  gap: 12px;
}
.animation-panel--pratique .fact-strip article {
  min-height: 0;
  padding: 18px 20px;
}
.fact-strip h3 {
  font-size: 19px;
}
.fact-strip p {
  font-size: 13px;
  line-height: 1.45;
}

/* CTA final = bandeau */
.animation-panel--cta .animation-panel__inner {
  padding-top: 27px;
  padding-bottom: 27px;
}
.animation-panel--cta .cta-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.animation-panel--cta .cta-panel h2 {
  font-size: clamp(34px, 3.3vw, 50px);
}
.animation-panel--cta .cta-panel p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Tablette : on garde de la matière, sans écraser */
@media (max-width: 1050px) {
  .offer-card {
    grid-template-columns: 1fr;
  }
  .offer-card__media {
    min-height: 150px;
    height: 150px;
  }
  .organizer-process {
    grid-template-columns: 1fr 1fr;
  }
}

/* Smartphone : priorité absolue à la lisibilité */
@media (max-width: 760px) {
  .animation-panel__inner {
    width: calc(100% - 34px);
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .animation-hero-copy h1 {
    font-size: clamp(45px, 14vw, 62px);
  }
  .animation-page .section-heading h2,
  .animation-page .split-feature__copy h2,
  .animation-page .workshop-copy h2,
  .animation-page .cta-panel h2 {
    font-size: clamp(34px, 10.5vw, 46px);
  }
  .offer-grid,
  .organizer-proof,
  .organizer-process {
    grid-template-columns: 1fr;
  }
  .offer-card {
    grid-template-columns: 38% 62%;
    min-height: 175px;
  }
  .offer-card__media {
    height: 100%;
    min-height: 175px;
  }
  .offer-card__body {
    padding: 15px;
  }
  .animation-panel--cta .cta-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* ==========================================================================
   ANIMATION V8 — UN CRAN PLUS COMPACT + GRILLES SÉCURISÉES
   ========================================================================== */

/* --- Réduction typographique modérée supplémentaire --- */
.animation-hero-copy h1 {
  font-size: clamp(50px, 4.7vw, 74px);
}

.animation-hero-copy .hero-script {
  font-size: clamp(25px, 2.05vw, 34px);
}

.animation-hero-copy .hero-intro {
  font-size: clamp(14.5px, 1vw, 16.5px);
}

.animation-page .section-heading h2,
.animation-page .split-feature__copy h2,
.animation-page .workshop-copy h2 {
  font-size: clamp(34px, 3.55vw, 55px);
}

.animation-page .section-heading > p:not(.eyebrow),
.animation-page .split-feature__copy > p,
.animation-page .workshop-copy > p {
  font-size: clamp(14.5px, .98vw, 16px);
}

.animation-panel--cta .cta-panel h2 {
  font-size: clamp(31px, 3vw, 45px);
}

/* --- Panneaux légèrement plus resserrés verticalement --- */
.animation-panel__inner {
  padding-top: clamp(30px, 2.8vw, 43px);
  padding-bottom: clamp(30px, 2.8vw, 43px);
}

.animation-stage {
  gap: clamp(16px, 1.7vw, 25px);
}

.animation-panel--cta .animation-panel__inner {
  padding-top: 23px;
  padding-bottom: 23px;
}

/* ==========================================================================
   GRILLES : définition complète et unique en desktop
   Corrige les encadrés qui avaient perdu leur disposition.
   ========================================================================== */

/* 3 repères du hero */
.organizer-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* 3 propositions côte à côte */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.offer-card {
  min-width: 0;
}

/* 3 cartes de la partie festival */
.animation-panel--festival .media-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* 4 encadrés "cadre de notre intervention" */
.organizer-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

/* 4 encadrés pratiques en 2 x 2 */
.animation-panel--pratique .fact-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* Petites réductions internes */
.organizer-proof article {
  padding: 12px 14px;
}

.organizer-proof strong {
  font-size: clamp(19px, 1.65vw, 25px);
}

.offer-card__body h3,
.media-card__body h3 {
  font-size: clamp(19px, 1.45vw, 23px);
}

.offer-card__body p,
.media-card__body p,
.media-card__list {
  font-size: 13px;
}

.organizer-process article {
  padding: 15px 14px;
}

.organizer-process h3 {
  font-size: 17px;
}

.organizer-process p {
  font-size: 15px;
}

.fact-strip p {
  font-size: 12.5px;
}

/* --- Tablette --- */
@media (max-width: 1050px) {
  .organizer-proof {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .offer-grid,
  .animation-panel--festival .media-card-grid {
    grid-template-columns: 1fr;
  }

  .organizer-process,
  .animation-panel--pratique .fact-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobile --- */
@media (max-width: 760px) {
  .animation-panel__inner {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .animation-hero-copy h1 {
    font-size: clamp(42px, 13vw, 56px);
  }

  .animation-page .section-heading h2,
  .animation-page .split-feature__copy h2,
  .animation-page .workshop-copy h2,
  .animation-page .cta-panel h2 {
    font-size: clamp(31px, 9.5vw, 42px);
  }

  .organizer-proof,
  .offer-grid,
  .animation-panel--festival .media-card-grid,
  .organizer-process,
  .animation-panel--pratique .fact-strip {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   ANIMATION V9 — ENCORE UN CRAN PLUS COMPACT + CONTOURS RÉTABLIS
   ========================================================================== */

/* Réduction typographique supplémentaire, modérée */
.animation-hero-copy h1 {
  font-size: clamp(46px, 4.25vw, 68px);
}

.animation-hero-copy .hero-script {
  font-size: clamp(23px, 1.9vw, 31px);
}

.animation-hero-copy .hero-intro {
  font-size: clamp(14px, .94vw, 15.5px);
}

.animation-page .section-heading h2,
.animation-page .split-feature__copy h2,
.animation-page .workshop-copy h2 {
  font-size: clamp(31px, 3.2vw, 50px);
}

.animation-page .section-heading > p:not(.eyebrow),
.animation-page .split-feature__copy > p,
.animation-page .workshop-copy > p {
  font-size: clamp(14px, .92vw, 15.5px);
}

.animation-panel--cta .cta-panel h2 {
  font-size: clamp(29px, 2.75vw, 41px);
}

/* Espacements verticaux encore un peu réduits */
.animation-panel__inner {
  padding-top: clamp(27px, 2.45vw, 38px);
  padding-bottom: clamp(27px, 2.45vw, 38px);
}

.animation-stage {
  gap: clamp(14px, 1.45vw, 22px);
}

.animation-panel--cta .animation-panel__inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Cartes / blocs encore légèrement plus compacts */
.organizer-proof article {
  padding: 11px 13px;
}

.organizer-proof strong {
  font-size: clamp(18px, 1.5vw, 23px);
}

.offer-card__body {
  padding: 15px 16px;
}

.offer-card__body h3,
.media-card__body h3 {
  font-size: clamp(18px, 1.35vw, 22px);
}

.offer-card__body p,
.media-card__body p,
.media-card__list {
  font-size: 12.5px;
}

.organizer-process article {
  padding: 14px 13px;
}

.organizer-process h3 {
  font-size: 16px;
}

.organizer-process p {
  font-size: 15px;
}

.fact-strip p {
  font-size: 12px;
}

/* ==========================================================================
   CONTOURS DES ENCADRÉS
   Réglage explicite pour éviter leur disparition.
   ========================================================================== */

.offer-card,
.media-card,
.organizer-proof article,
.organizer-process article,
.animation-panel--pratique .fact-strip article,
.expo-point {
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Les sections claires ont besoin d'un contour plus sombre */
.animation-panel--exposition .expo-point,
.animation-panel--pratique .fact-strip article {
  border-color: rgba(7,21,47,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* Section "cadre de notre intervention" : contour renforcé */
.organizer-process article {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
}

/* Hero proof : contour visible mais discret */
.organizer-proof article {
  border-color: rgba(255,255,255,.30);
}

/* Offre / festival */
.offer-card,
.media-card {
  border-color: rgba(255,255,255,.30);
}

/* Mobile */
@media (max-width: 760px) {
  .animation-panel__inner {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .animation-hero-copy h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .animation-page .section-heading h2,
  .animation-page .split-feature__copy h2,
  .animation-page .workshop-copy h2,
  .animation-page .cta-panel h2 {
    font-size: clamp(29px, 9vw, 39px);
  }
}




/* ==========================================================================
   ASSOCIATION — COMPOSANTS
   Hérite de la densité et de la grammaire Animation V9.
   ========================================================================== */

body.subpage.association-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.20), rgba(5,20,47,.34)),
    url("assets/icare11.webp") center center / cover no-repeat;
}

body.subpage.association-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(180deg, rgba(4,20,47,.05), rgba(4,20,47,.22));
}

.association-page main,
.association-page .site-footer {
  position: relative;
  z-index: 1;
}

.association-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
  display: grid;
  gap: clamp(14px, 1.45vw, 22px);
}

.association-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.association-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.association-panel__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(27px, 2.45vw, 38px) 0;
}

.association-panel--hero::before {
  background: linear-gradient(105deg,
    rgba(5,25,58,var(--panel-opacity-strong)),
    rgba(8,59,136,var(--panel-opacity-soft)));
}

.association-panel--identity::before {
  background: linear-gradient(145deg,
    rgba(11,98,216,var(--panel-opacity-strong)),
    rgba(7,63,140,var(--panel-opacity-soft)));
}

.association-panel--media::before {
  background: linear-gradient(145deg,
    rgba(7,21,47,var(--panel-opacity-strong)),
    rgba(11,65,126,var(--panel-opacity-soft)));
}

.association-panel--support::before {
  background: linear-gradient(145deg,
    rgba(240,250,255,var(--panel-opacity-strong)),
    rgba(185,226,247,var(--panel-opacity-soft)));
}

.association-panel--links::before {
  background: linear-gradient(145deg,
    rgba(5,20,47,var(--panel-opacity-strong)),
    rgba(8,59,136,var(--panel-opacity-soft)));
}

/* Hero */
.association-hero-layout {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.association-hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 4.25vw, 68px);
  line-height: .92;
  letter-spacing: -.05em;
}

.association-hero-copy h1 span { color: var(--icare-yellow); }

.association-hero-copy .hero-script {
  font-size: clamp(23px, 1.9vw, 31px);
  margin-top: 20px;
}

.association-hero-copy .hero-intro {
  font-size: clamp(14px, .94vw, 15.5px);
  line-height: 1.58;
  max-width: 610px;
}

.association-hero-media {
  margin: 0;
  height: clamp(290px, 30vw, 410px);
  overflow: hidden;
  border-radius: 74px 24px 24px 24px;
  box-shadow: 0 18px 38px rgba(2,13,31,.25);
}

.association-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Identity / pillars */
.association-intro {
  max-width: 900px;
  margin-bottom: 24px;
}

.association-intro h2,
.association-media-heading h2,
.association-support-heading h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.2vw, 50px);
  line-height: .98;
  letter-spacing: -.045em;
}

.association-intro p {
  font-size: 17px;
  line-height: 1.58;
}

.association-media-heading p,
.association-support-heading p {
  font-size: clamp(14px, .92vw, 15.5px);
  line-height: 1.58;
}

.association-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.association-pillar {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(5,31,70,.22);
  transition: transform .22s ease, background .22s ease;
}

.association-pillar__image {
  height: 135px;
  overflow: hidden;
}

.association-pillar__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.association-pillar__body {
  padding: 15px 16px 17px;
}

.association-pillar__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 22px);
}

.association-pillar__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,.84);
}

/* Free quote */
.association-quote {
  width: min(980px, calc(100% - 12vw));
  margin: 0 auto;
  padding: 7px 0;
  text-align: center;
  color: white;
  font-family: var(--font-script);
  font-size: clamp(27px, 2.7vw, 40px);
  line-height: 1.1;
  text-shadow: 0 3px 14px rgba(0,0,0,.60);
}

/* Video + Facebook */
.association-media-heading {
  max-width: 820px;
  margin-bottom: 22px;
}

.association-media-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 20px;
  align-items: start;
}

.association-video-card,
.association-facebook-card {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(5,31,70,.22);
  overflow: hidden;
}

.association-video-card {
  padding: 16px;
}

.association-video-frame {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}

.association-video-frame iframe,
.association-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.association-video-caption {
  margin: 12px 4px 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.45;
}

.association-facebook-card {
  padding: 16px;
}

.association-facebook-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: var(--icare-yellow);
  font-size: 20px;
}

.association-facebook-frame {
  width: 100%;
  min-height: 500px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}

.association-facebook-frame iframe {
  width: 100%;
  height: 500px;
  border: 0;
}

.association-facebook-fallback {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: center;
}

.association-facebook-fallback a {
  color: var(--icare-yellow);
}

/* =========================================================
   ASSOCIATION — BANDEAU VERS LE PORTFOLIO
   ========================================================= */

.association-more-images {
    position: relative;
    display: block;
    min-height: 175px;
    overflow: hidden;

    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.28);

    color: #fff;
    text-decoration: none;
}

.association-more-images img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;
}

.association-more-images::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(5,20,47,.94) 0%,
        rgba(5,20,47,.80) 30%,
        rgba(5,20,47,.40) 60%,
        rgba(5,20,47,.08) 100%
    );
}

.association-more-images__copy {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 175px;
    max-width: 430px;

    padding: 25px 28px;
}

.association-more-images__copy h3 {
    margin: 0 0 4px;

    font-family: var(--font-display);
    font-size: 22px;
}

.association-more-images__copy p {
    margin: 0;

    font-size: 13px;
    color: rgba(255,255,255,.82);
}

.association-more-images:hover img {
    transform: scale(1.035);
}



/* Support */
.association-panel--support {
  color: var(--icare-night);
}

.association-support-heading {
  max-width: 850px;
  margin-bottom: 20px;
}

.association-support-heading .eyebrow {
  color: var(--icare-blue-deep);
}

/* Pourquoi soutenir Icare Encore ?
   --------------------------------------------------------- */

.association-support-intro {
    max-width: 900px;
    margin: 0 0 24px;
}

.association-support-intro h3 {
    margin: 0 0 9px;

    font-family: var(--font-display);
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.1;

    color: var(--icare-blue-deep);
}

.association-support-intro p {
    margin: 0;

    font-size: 16px;
    line-height: 1.55;

    color: rgba(7, 21, 47, .78);
}



.association-support-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

.association-support-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(7,21,47,.18);
  background: rgba(255,255,255,.38);
}

.association-support-card img {
    display: block;
    width: auto;
    height: auto;

    max-width: 50%;
    max-height: 58px;

    margin: 0 auto 16px;
    object-fit: contain;
}

.association-support-card p {
  margin: 0;
  color: rgba(7,21,47,.72);
  font-size: 15px;
  line-height: 1.45;
}

/* Links compact */
.association-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.association-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(5,31,70,.20);
  text-decoration: none;
}

.association-link-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.association-link-card span {
  font-size: 13px;
  line-height: 1.35;
}

/* footer/legal */
.association-legal {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto 16px;
  color: rgba(255,255,255,.58);
  font-size: 11.5px;
  text-align: center;
}

@media (hover:hover) and (pointer:fine) {
  .association-pillar:hover {
    transform: translateY(-4px);
    background: rgba(5,31,70,.36);
  }
  .association-pillar:hover img {
    transform: scale(1.035);
  }
  .association-link-card:hover {
    border-color: rgba(255,209,10,.55);
    background: rgba(5,31,70,.34);
  }
}

@media (max-width: 980px) {
  .association-hero-layout,
  .association-media-grid {
    grid-template-columns: 1fr;
  }

  .association-pillars,
  .association-support-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .association-links-grid {
    grid-template-columns: 1fr 1fr;
  }

  .association-facebook-frame {
    min-height: 430px;
  }

  .association-facebook-frame iframe {
    height: 430px;
  }
}

@media (max-width: 760px) {
  .association-stage {
    width: calc(100% - 18px);
    padding-top: 86px;
    gap: 14px;
  }

  .association-panel {
    border-radius: 22px;
  }

  .association-panel__inner {
    width: calc(100% - 30px);
    padding: 25px 0;
  }

  .association-hero-copy h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .association-hero-media {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 48px 18px 18px 18px;
  }

  .association-pillars,
  .association-support-grid,
  .association-links-grid {
    grid-template-columns: 1fr;
  }

  .association-pillar {
    display: grid;
    grid-template-columns: 38% 62%;
  }

  .association-pillar__image {
    height: 100%;
    min-height: 150px;
  }

  .association-media-grid {
    gap: 14px;
  }

  .association-facebook-frame,
  .association-facebook-frame iframe {
    min-height: 420px;
    height: 420px;
  }

  .association-legal {
    width: calc(100% - 30px);
  }
}


/* ==========================================================================
   ASSOCIATION V2 — MEDIA, HOVER, CARROUSEL PARTENAIRES
   ========================================================================== */

.association-video-stack {
  display: grid;
  gap: 14px;
}

.association-video-teaser {
  position: relative;
  display: block;
  height: 175px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(5,31,70,.22);
  text-decoration: none;
}

.association-video-teaser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .35s ease;
}

.association-video-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,18,42,.82), rgba(4,18,42,.18));
}

.association-video-teaser__overlay {
  position: absolute;
  z-index: 2;
  inset: auto 22px 18px 22px;
  display: grid;
  gap: 2px;
  color: white;
}

.association-video-teaser__overlay strong {
  font-family: var(--font-display);
  font-size: 21px;
}

.association-video-teaser__overlay span {
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
}

/* Les deux colonnes ont maintenant des hauteurs visuelles proches. */
.association-facebook-card {
  min-height: 100%;
}

/* Hover enrichi, sans dépendance fonctionnelle */
@media (hover:hover) and (pointer:fine) {
  .association-pillar,
  .association-support-card,
  .association-video-card,
  .association-facebook-card,
  .partner-card {
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
  }

  .association-pillar:hover,
  .association-support-card:hover,
  .partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(2,13,31,.24);
  }

  .association-pillar:hover,
  .partner-card:hover {
    border-color: rgba(255,209,10,.58);
  }

  .association-support-card:hover {
    border-color: rgba(11,98,216,.34);
    background: rgba(255,255,255,.52);
  }

  .association-video-card:hover,
  .association-facebook-card:hover {
    border-color: rgba(255,209,10,.42);
  }

  .association-video-teaser:hover img {
    transform: scale(1.04);
    filter: saturate(1.08);
  }
}


/* Mentions légales
   --------------------------------------------------------- */

.association-legal {
    width: min(1180px, calc(100% - 48px));
    margin: 1px auto 18px;
}

.association-legal__inner {
    padding: 18px 24px;

    background: rgba(135, 180, 218, .20);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 18px;

    backdrop-filter: blur(8px);
}

.association-legal h2 {
    margin: 0 0 7px;

    font-family: var(--font-display);
    font-size: 17px;
    color: var(--icare-yellow);
}

.association-legal p {
    margin: 2px 0;

    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}


/* CARROUSEL */
.partner-carousel {
  display: grid;
  gap: 14px;
}

.partner-carousel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.partner-carousel__filters,
.partner-carousel__arrows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partner-carousel button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(5,31,70,.22);
  color: white;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.partner-carousel__filters button.is-active {
  border-color: var(--icare-yellow);
  color: var(--icare-yellow);
  background: rgba(5,31,70,.42);
}

.partner-carousel__arrows button {
  width: 38px;
  padding-inline: 0;
  font-size: 18px;
}

.partner-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,209,10,.70) rgba(255,255,255,.08);
  padding-bottom: 8px;
}

.partner-carousel__track {
  display: flex;
  gap: 12px;
  width: max-content;
}

.partner-card {
  flex: 0 0 clamp(235px, 23vw, 300px);
  min-height: 105px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(5,31,70,.24);
  text-decoration: none;
}

.partner-card[hidden] {
  display: none;
}

.partner-card img {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}

.partner-card > span {
  display: grid;
  gap: 3px;
}

.partner-card small {
  color: var(--icare-yellow);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.partner-card strong {
  color: white;
  font-size: 13.5px;
  line-height: 1.25;
}

.partner-card em {
  color: rgba(255,255,255,.66);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .association-video-teaser {
    height: 145px;
  }

  .partner-carousel__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .partner-card {
    flex-basis: min(82vw, 290px);
  }
}




/* ==========================================================================
   PAGES ICARE — IMAGINAIRE / RÉCRÉATIF
   Héritent du langage visuel validé V9 :
   fond photographique continu, panneaux translucides, densité compacte.
   ========================================================================== */

body.subpage.icare-universe-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.18), rgba(5,20,47,.32)),
    var(--universe-background, url("assets/icare-evenementiel.webp")) center center / cover no-repeat;
}

body.subpage.icare-universe-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 15%, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(180deg, rgba(4,20,47,.04), rgba(4,20,47,.20));
}

.icare-universe-page main,
.icare-universe-page .site-footer {
  position: relative;
  z-index: 1;
}

.universe-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
  display: grid;
  gap: clamp(14px, 1.45vw, 22px);
}

.universe-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.universe-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.universe-panel--dark::before {
  background: linear-gradient(125deg,
    rgba(5,20,47,var(--panel-opacity-strong)),
    rgba(8,59,136,var(--panel-opacity-soft)));
}

.universe-panel--blue::before {
  background: linear-gradient(145deg,
    rgba(11,98,216,var(--panel-opacity-strong)),
    rgba(7,63,140,var(--panel-opacity-soft)));
}

.universe-panel--light::before {
  background: linear-gradient(145deg,
    rgba(240,250,255,var(--panel-opacity-strong)),
    rgba(185,226,247,var(--panel-opacity-soft)));
}

.universe-panel__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(27px, 2.45vw, 38px) 0;
}

.universe-hero {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.universe-hero__copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 4.25vw, 68px);
  line-height: .92;
  letter-spacing: -.05em;
}

.universe-hero__copy h1 span {
  color: var(--icare-yellow);
}

.universe-hero__copy .hero-script {
  font-size: clamp(23px, 1.9vw, 31px);
  margin-top: 20px;
}

.universe-hero__copy .hero-intro {
  font-size: clamp(14px, .94vw, 15.5px);
  line-height: 1.58;
  max-width: 620px;
}

.universe-hero__media {
  margin: 0;
  height: clamp(290px, 30vw, 410px);
  overflow: hidden;
  border-radius: 74px 24px 24px 24px;
  box-shadow: 0 18px 38px rgba(2,13,31,.25);
}

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

.universe-heading {
  max-width: 900px;
  margin-bottom: 22px;
}

.universe-heading h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.2vw, 50px);
  line-height: .98;
  letter-spacing: -.045em;
}

.universe-heading p {
  font-size: clamp(14px, .92vw, 15.5px);
  line-height: 1.58;
}

.universe-panel--light {
  color: var(--icare-night);
}

.universe-panel--light .eyebrow {
  color: var(--icare-blue-deep);
}

.universe-grid-3,
.universe-grid-4 {
  display: grid;
  gap: 14px;
}

.universe-grid-3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.universe-grid-4 {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.universe-card {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(5,31,70,.22);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.universe-panel--light .universe-card {
  border-color: rgba(7,21,47,.18);
  background: rgba(255,255,255,.38);
}

.universe-card__image {
  height: 140px;
  overflow: hidden;
}

.universe-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.universe-card__body {
  padding: 15px 16px 17px;
}

.universe-card__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 22px);
}

.universe-card__body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.84);
}

.universe-panel--light .universe-card__body p {
  color: rgba(7,21,47,.73);
}

.universe-free {
  width: min(980px, calc(100% - 12vw));
  margin: 0 auto;
  padding: 7px 0;
  text-align: center;
  color: white;
  text-shadow: 0 3px 14px rgba(0,0,0,.60);
}

.universe-free .hero-script {
  margin: 0 0 8px;
  font-size: clamp(27px, 2.7vw, 40px);
}

.universe-free p:last-child {
  margin: 0 auto;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.55;
}

.universe-split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(26px, 3vw, 48px);
  align-items: center;
}

.universe-split__copy h2 {
  margin: 0 0 13px;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.2vw, 50px);
  line-height: .98;
}

.universe-split__copy p {
  font-size: clamp(14px, .92vw, 15.5px);
  line-height: 1.58;
}

.universe-split__media {
  margin: 0;
  min-height: 300px;
  max-height: 390px;
  overflow: hidden;
  border-radius: 24px 72px 24px 24px;
}

.universe-split__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

.universe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.universe-actions .icare-button {
  min-height: 42px;
}

@media (hover:hover) and (pointer:fine) {
  .universe-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,209,10,.58);
    background: rgba(5,31,70,.36);
    box-shadow: 0 16px 28px rgba(2,13,31,.24);
  }

  .universe-panel--light .universe-card:hover {
    background: rgba(255,255,255,.52);
    border-color: rgba(11,98,216,.34);
  }

  .universe-card:hover img {
    transform: scale(1.035);
  }
}

@media (max-width: 980px) {
  .universe-hero,
  .universe-split {
    grid-template-columns: 1fr;
  }

  .universe-grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .universe-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .universe-stage {
    width: calc(100% - 18px);
    padding-top: 86px;
    gap: 14px;
  }

  .universe-panel {
    border-radius: 22px;
  }

  .universe-panel__inner {
    width: calc(100% - 30px);
    padding: 25px 0;
  }

  .universe-hero__copy h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .universe-hero__media {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 48px 18px 18px 18px;
  }

  .universe-grid-4,
  .universe-grid-3 {
    grid-template-columns: 1fr;
  }

  .universe-card {
    display: grid;
    grid-template-columns: 38% 62%;
  }

  .universe-card__image {
    height: 100%;
    min-height: 145px;
  }

  .universe-split__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px 48px 18px 18px;
  }

  .universe-split__media img {
    min-height: 0;
    height: 100%;
  }
}




/* ==========================================================================
   PORTFOLIO — PAGE D'ENTRÉE + GALERIES MASONRY
   Le comportement masonry historique est volontairement conservé :
   4 colonnes desktop / 2 tablette / 1 smartphone.
   ========================================================================== */

body.subpage.portfolio-page::before,
body.subpage.gallery-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.18), rgba(5,20,47,.34)),
    url("assets/icare-evenementiel.webp") center center / cover no-repeat;
}

body.subpage.portfolio-page::after,
body.subpage.gallery-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,20,47,.04), rgba(4,20,47,.22));
}

.portfolio-page main,
.gallery-page main,
.portfolio-page .site-footer,
.gallery-page .site-footer {
  position: relative;
  z-index: 1;
}

.portfolio-stage,
.gallery-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
}

.portfolio-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.portfolio-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(125deg,
    rgba(5,20,47,var(--panel-opacity-strong)),
    rgba(8,59,136,var(--panel-opacity-soft)));
}

.portfolio-panel__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(27px, 2.45vw, 38px) 0;
}

.portfolio-hero {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.portfolio-hero h1,
.gallery-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 4.25vw, 68px);
  line-height: .92;
  letter-spacing: -.05em;
}

.portfolio-hero h1 span,
.gallery-header h1 span {
  color: var(--icare-yellow);
}

.portfolio-hero p {
  font-size: clamp(14px, .94vw, 15.5px);
  line-height: 1.58;
}

.portfolio-hero__mosaic {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 155px 125px;
  gap: 10px;
}

.portfolio-hero__mosaic figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.portfolio-hero__mosaic figure:first-child {
  grid-row: 1 / 3;
}

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

.portfolio-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}

.portfolio-category {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.28);
  color: white;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(2,13,31,.20);
}

.portfolio-category img {
  width: 100%;
  height: 100%;
  min-height: 310px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.portfolio-category::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(4,18,42,.88));
}

.portfolio-category__copy {
  position: absolute;
  z-index: 2;
  inset: auto 18px 18px;
}

.portfolio-category__copy small {
  display: block;
  color: var(--icare-yellow);
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.portfolio-category__copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.05;
}

.portfolio-category__copy span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

@media (hover:hover) and (pointer:fine) {
  .portfolio-category:hover img {
    transform: scale(1.045);
  }
  .portfolio-category:hover {
    border-color: rgba(255,209,10,.65);
  }
}

/* Gallery header */
.gallery-header {
  margin-bottom: 18px;
  padding: 27px 32px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(5,25,58,.32);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.gallery-header__top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
}

.gallery-header p {
  margin: 9px 0 0;
  max-width: 720px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.5;
}

.gallery-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.gallery-nav a {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: white;
  text-decoration: none;
  font-size: 11.5px;
  background: rgba(5,31,70,.24);
}

.gallery-nav a[aria-current="page"] {
  color: var(--icare-yellow);
  border-color: var(--icare-yellow);
}

/* Masonry — essence visuelle conservée */
.masonry-gallery {
  column-count: 4;
  column-gap: 10px;
}

.masonry-item {
  position: relative;
  break-inside: avoid;
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.17);
  background: rgba(5,31,70,.20);
  cursor: zoom-in;
}

.masonry-item button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .30s ease, filter .30s ease;
}

.masonry-item__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.70));
  color: white;
  font-size: 11px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
  .masonry-item:hover img {
    transform: scale(1.045);
  }
  .masonry-item:hover .masonry-item__caption {
    opacity: 1;
  }
}

/* Lightbox intégrée — remplace les fenêtres popup sans toucher au masonry. */
.portfolio-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  place-items: center;
  padding: 30px;
  background: rgba(1,8,20,.92);
}

.portfolio-lightbox.is-open {
  display: grid;
}

.portfolio-lightbox__image {
  max-width: min(94vw, 1500px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.portfolio-lightbox__close,
.portfolio-lightbox__prev,
.portfolio-lightbox__next {
  position: fixed;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(5,31,70,.65);
  color: white;
  cursor: pointer;
  border-radius: 999px;
}

.portfolio-lightbox__close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 25px;
}

.portfolio-lightbox__prev,
.portfolio-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 22px;
}

.portfolio-lightbox__prev { left: 18px; }
.portfolio-lightbox__next { right: 18px; }

@media (max-width: 1000px) {
  .portfolio-categories {
    grid-template-columns: 1fr 1fr;
  }
  .masonry-gallery { column-count: 2; }
}

@media (max-width: 760px) {
  .portfolio-stage,
  .gallery-stage {
    width: calc(100% - 18px);
    padding-top: 86px;
  }

  .portfolio-panel {
    border-radius: 22px;
  }

  .portfolio-panel__inner {
    width: calc(100% - 30px);
    padding: 25px 0;
  }

  .portfolio-hero {
    grid-template-columns: 1fr;
  }

  .portfolio-hero h1,
  .gallery-header h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .portfolio-categories {
    grid-template-columns: 1fr;
  }

  .portfolio-category {
    min-height: 240px;
  }

  .portfolio-category img {
    min-height: 240px;
  }

  .gallery-header {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .gallery-header__top {
    display: grid;
  }

  .gallery-nav {
    justify-content: flex-start;
  }

  .masonry-gallery {
    column-count: 1;
  }

  .masonry-item {
    border-radius: 8px;
  }

  .portfolio-lightbox {
    padding: 12px;
  }

  .portfolio-lightbox__prev,
  .portfolio-lightbox__next {
    top: auto;
    bottom: 18px;
    transform: none;
  }
}




/* ==========================================================================
   PORTFOLIO V2 — MASONRY ROBUSTE
   Reprend explicitement le principe éprouvé des portfolios historiques.
   Ces règles sont placées en fin de fichier pour neutraliser tout conflit
   provenant du socle commun.
   ========================================================================== */

.gallery-page .masonry-gallery {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  -webkit-column-count: 4 !important;
  -moz-column-count: 4 !important;
  column-count: 4 !important;

  -webkit-column-gap: 10px !important;
  -moz-column-gap: 10px !important;
  column-gap: 10px !important;
}

.gallery-page .masonry-item {
  display: inline-block !important;
  width: 100% !important;
  max-width: 100% !important;
  vertical-align: top !important;

  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid-column !important;

  margin: 0 0 10px !important;
  padding: 0 !important;
}

.gallery-page .masonry-item button {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gallery-page .masonry-item img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
}

@media (max-width: 1000px) {
  .gallery-page .masonry-gallery {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
  }
}

@media (max-width: 600px) {
  .gallery-page .masonry-gallery {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }
}

/* Apparition douce des images, sans modifier la géométrie du masonry. */
@keyframes icarePortfolioReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-page .masonry-item {
  opacity: 0;
  animation: icarePortfolioReveal .42s ease forwards;
}

.gallery-page .masonry-item:nth-child(2n)   { animation-delay: .035s; }
.gallery-page .masonry-item:nth-child(3n)   { animation-delay: .070s; }
.gallery-page .masonry-item:nth-child(4n)   { animation-delay: .105s; }
.gallery-page .masonry-item:nth-child(5n)   { animation-delay: .140s; }

@media (prefers-reduced-motion: reduce) {
  .gallery-page .masonry-item {
    opacity: 1;
    animation: none !important;
  }
}




/* ==========================================================================
   SOCLE FIGÉ — BURGER COMPACT DES PAGES INTÉRIEURES
   IMPORTANT : ce bloc doit rester APRÈS les anciennes règles .burger-menu.
   Il restaure le burger compact validé et empêche les règles génériques
   historiques de le transformer en panneau plein écran.
   ========================================================================== */

body.subpage .burger-menu {
  position: fixed !important;
  width: 228px !important;
  min-width: 228px !important;
  height: auto !important;
  max-height: calc(100dvh - 78px) !important;
  top: 64px !important;
  right: 18px !important;
  bottom: auto !important;

  padding: 9px 11px 11px !important;
  gap: 1px !important;

  background: rgba(8,15,28,.78) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;

  overflow-y: auto;
  transform: translateX(16px);
}

body.subpage .burger-menu[aria-hidden="true"] {
  transform: translateX(calc(100% + 36px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.subpage .burger-menu[aria-hidden="false"] {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.subpage .burger-menu-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body.subpage .burger-menu a {
  min-height: 29px !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body.subpage .burger-menu a:hover,
body.subpage .burger-menu a:focus-visible {
  padding-left: 13px !important;
}

body.subpage .burger-menu-separator {
  height: 1px !important;
  margin: 3px 0 !important;
  opacity: .65 !important;
}

body.subpage .burger-menu .facebook-link {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body.subpage .burger-menu .facebook-icon {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #4267b2 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  body.subpage .burger-menu {
    width: min(238px, 78vw) !important;
    min-width: 0 !important;
    top: 58px !important;
    right: 12px !important;
    max-height: calc(100dvh - 70px) !important;
    padding: 8px 10px 10px !important;
  }

  body.subpage .burger-menu a {
    min-height: 28px !important;
    font-size: 13px !important;
  }
}




/* ==========================================================================
   CREATION — PAGE
   Socle visuel V9 : fond photo continu, panneaux translucides, densité compacte.
   ========================================================================== */

body.subpage.creation-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.17), rgba(5,20,47,.32)),
    url("assets/atelier.webp") center center / cover no-repeat;
}

body.subpage.creation-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 14%, rgba(255,255,255,.13), transparent 30%),
    linear-gradient(180deg, rgba(4,20,47,.04), rgba(4,20,47,.22));
}

.creation-page main,
.creation-page .site-footer {
  position: relative;
  z-index: 1;
}

.creation-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
  display: grid;
  gap: clamp(14px, 1.45vw, 22px);
}

.creation-panel {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.creation-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.creation-panel--dark::before {
  background: linear-gradient(125deg,
    rgba(5,20,47,var(--panel-opacity-strong)),
    rgba(8,59,136,var(--panel-opacity-soft)));
}

.creation-panel--blue::before {
  background: linear-gradient(145deg,
    rgba(11,98,216,var(--panel-opacity-strong)),
    rgba(7,63,140,var(--panel-opacity-soft)));
}

.creation-panel--light::before {
  background: linear-gradient(145deg,
    rgba(240,250,255,var(--panel-opacity-strong)),
    rgba(185,226,247,var(--panel-opacity-soft)));
}

.creation-panel__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(27px, 2.45vw, 38px) 0;
}

.creation-hero {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

.creation-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 4.25vw, 68px);
  line-height: .92;
  letter-spacing: -.05em;
}

.creation-hero h1 span { color: var(--icare-yellow); }

.creation-hero .hero-script {
  margin-top: 20px;
  font-size: clamp(23px, 1.9vw, 31px);
}

.creation-hero p {
  font-size: clamp(14px, .94vw, 15.5px);
  line-height: 1.58;
}

.creation-hero__media {
  margin: 0;
  height: clamp(300px, 31vw, 420px);
  overflow: hidden;
  border-radius: 74px 24px 24px 24px;
  box-shadow: 0 18px 38px rgba(2,13,31,.25);
}

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

.creation-heading {
  max-width: 900px;
  margin-bottom: 22px;
}

.creation-heading h2,
.creation-split__copy h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.2vw, 50px);
  line-height: .98;
  letter-spacing: -.045em;
}

.creation-heading p,
.creation-split__copy p {
  font-size: clamp(14px, .92vw, 15.5px);
  line-height: 1.58;
}

.creation-panel--light {
  color: var(--icare-night);
}

.creation-panel--light .eyebrow { color: var(--icare-blue-deep); }

.creation-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.creation-process article {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(5,31,70,.22);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.creation-process figure {
  margin: 0;
  height: 145px;
  overflow: hidden;
}

.creation-process img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.creation-process__body {
  padding: 15px 16px 17px;
}

.creation-process h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.35vw, 22px);
}

.creation-process p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.84);
}

.creation-free {
  width: min(980px, calc(100% - 12vw));
  margin: 0 auto;
  padding: 7px 0;
  text-align: center;
  color: white;
  text-shadow: 0 3px 14px rgba(0,0,0,.60);
}

.creation-free .hero-script {
  margin: 0 0 8px;
  font-size: clamp(27px, 2.7vw, 40px);
}

.creation-free p:last-child {
  margin: 0 auto;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.55;
}

.creation-family-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
}

.creation-family {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.25);
}

.creation-family img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.creation-family::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,18,42,.85));
}

.creation-family span {
  position: absolute;
  z-index: 2;
  inset: auto 12px 12px;
  color: white;
  font-family: var(--font-display);
  font-size: 15px;
}

.creation-split {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(26px, 3vw, 48px);
  align-items: center;
}

.creation-split__media {
  margin: 0;
  min-height: 300px;
  max-height: 390px;
  overflow: hidden;
  border-radius: 24px 72px 24px 24px;
}

.creation-split__media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

.creation-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.creation-timeline span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(5,31,70,.22);
  color: white;
  font-size: 11.5px;
}

.creation-recycle-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}

.creation-recycle-copy h2 {
  margin: 0 0 13px;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.2vw, 50px);
  line-height: .98;
}

.creation-recycle-copy p {
  font-size: clamp(14px, .92vw, 15.5px);
  line-height: 1.58;
  color: rgba(7,21,47,.78);
}

.creation-recycle-media {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 180px 145px;
  gap: 10px;
}

.creation-recycle-media figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

.creation-recycle-media figure:first-child {
  grid-row: 1 / 3;
}

.creation-recycle-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.creation-recycle-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  margin-top: 24px;
}

.creation-recycle-step {
  padding: 13px 12px;
  border-radius: 17px;
  border: 1px solid rgba(7,21,47,.18);
  background: rgba(255,255,255,.40);
}

.creation-recycle-step small {
  display: block;
  color: var(--icare-blue-deep);
  font-size: 10px;
  letter-spacing: .08em;
  margin-bottom: 5px;
}

.creation-recycle-step strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 16px;
}

.creation-recycle-step span {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(7,21,47,.70);
}

.creation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.creation-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.creation-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(29px, 2.75vw, 41px);
  line-height: .98;
}

.creation-cta p {
  margin: 7px 0 0;
  max-width: 720px;
  font-size: 13.5px;
  line-height: 1.5;
}

@media (hover:hover) and (pointer:fine) {
  .creation-process article:hover {
    transform: translateY(-4px);
    border-color: rgba(255,209,10,.58);
    box-shadow: 0 16px 28px rgba(2,13,31,.24);
  }
  .creation-process article:hover img,
  .creation-family:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 1050px) {
  .creation-family-strip {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .creation-recycle-steps {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 980px) {
  .creation-hero,
  .creation-split,
  .creation-recycle-grid {
    grid-template-columns: 1fr;
  }
  .creation-process {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .creation-stage {
    width: calc(100% - 18px);
    padding-top: 86px;
    gap: 14px;
  }

  .creation-panel {
    border-radius: 22px;
  }

  .creation-panel__inner {
    width: calc(100% - 30px);
    padding: 25px 0;
  }

  .creation-hero h1 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .creation-hero__media {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 48px 18px 18px 18px;
  }

  .creation-process article {
    display: grid;
    grid-template-columns: 38% 62%;
  }

  .creation-process figure {
    height: 100%;
    min-height: 145px;
  }

  .creation-family-strip {
    grid-template-columns: 1fr 1fr;
  }

  .creation-family,
  .creation-family img {
    min-height: 180px;
  }

  .creation-recycle-media {
    grid-template-rows: 145px 120px;
  }

  .creation-recycle-steps {
    grid-template-columns: 1fr;
  }

  .creation-cta {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   RECHERCHE GRAPHIQUE V2 — CORRECTIF
   Ce bloc s'ajoute au CSS COMPLET de Création V1.
   ========================================================================== */

/* CREATION — évolution graphique mesurée */
.creation-v2 .creation-stage {
  gap: clamp(18px, 2vw, 30px);
}

.creation-v2 .creation-panel {
  border-radius: 30px;
}

.creation-v2 .creation-panel--dark::before {
  background: linear-gradient(
    125deg,
    rgba(5,20,47,.70),
    rgba(8,59,136,.44)
  );
}

.creation-v2 .creation-panel--blue::before {
  background: linear-gradient(
    140deg,
    rgba(8,88,195,.70),
    rgba(4,40,92,.44)
  );
}

/* Hero circulaire : un seul effet fort */
.creation-v2 .creation-hero {
  grid-template-columns: .82fr 1.18fr;
  min-height: 540px;
}

.creation-v2 .creation-orbit-media {
  width: min(36vw, 485px);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  overflow: visible;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

.creation-v2 .creation-orbit-media img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 22px 42px rgba(2,13,31,.30);
}

.creation-orbit-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.creation-orbit-ring--yellow {
  border: 10px solid #ffd10a;
  transform: translate(14px,-5px);
}

.creation-orbit-ring--dark {
  border: 7px solid #07152f;
  transform: translate(-10px,12px);
}

/* Process : asymétrie légère, pas de démonstration excessive */
.creation-v2 .creation-process--editorial {
  grid-template-columns: 1.2fr .9fr .9fr;
  align-items: stretch;
}

.creation-v2 .creation-process--editorial article:first-child figure {
  height: 190px;
}

/* Bande des familles : hauteurs variées */
.creation-v2 .creation-family-strip {
  grid-template-columns: 1.18fr .82fr 1fr .82fr 1.12fr .9fr;
  align-items: end;
}

.creation-v2 .creation-family:nth-child(1),
.creation-v2 .creation-family:nth-child(5) {
  min-height: 275px;
}

.creation-v2 .creation-family:nth-child(2),
.creation-v2 .creation-family:nth-child(4) {
  min-height: 210px;
}

.creation-v2 .creation-family:nth-child(3),
.creation-v2 .creation-family:nth-child(6) {
  min-height: 240px;
}

.creation-v2 .creation-family:nth-child(1) img,
.creation-v2 .creation-family:nth-child(5) img {
  min-height: 275px;
}

.creation-v2 .creation-family:nth-child(2) img,
.creation-v2 .creation-family:nth-child(4) img {
  min-height: 210px;
}

.creation-v2 .creation-family:nth-child(3) img,
.creation-v2 .creation-family:nth-child(6) img {
  min-height: 240px;
}

/* Atelier : juste une variation de forme */
.creation-v2 .creation-split__media {
  border-radius: 76px 24px 24px 24px;
}

/* Art d'Après : quelques décalages contrôlés */
.creation-v2 .creation-panel--recycle {
  overflow: hidden;
}

.creation-v2 .creation-recycle-media figure:first-child {
  border-radius: 72px 18px 18px 18px;
}

.creation-v2 .creation-recycle-media figure:nth-child(2) {
  transform: translateY(-10px);
}

.creation-v2 .creation-recycle-step:nth-child(odd) {
  transform: translateY(4px);
}


/* ==========================================================================
   IMAGINAIRE V2 — variation plus libre
   ========================================================================== */

.imaginaire-v2 {
  background: #07152f;
  color: #fff;
}

.imaginaire-v2 main {
  overflow: hidden;
}

.im-hero {
  min-height: 740px;
  padding: 125px max(6vw,40px) 70px;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: 5vw;
  background:
    radial-gradient(circle at 70% 28%,
      #d9f1ff 0,
      #66b8e5 34%,
      #1674bf 68%,
      #083970 100%);
}

.im-hero__copy {
  max-width: 530px;
}

.im-hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(58px,6vw,96px);
  line-height: .88;
  letter-spacing: -.055em;
}

.im-hero h1 span {
  color: #ffd10a;
}

.im-hero .hero-script {
  font-size: clamp(24px,2.2vw,36px);
  line-height: 1.12;
}

.im-intro {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.62;
}

.im-orbit {
  width: min(44vw,650px);
  aspect-ratio: 1;
  justify-self: center;
  position: relative;
  margin: 0;
}

.im-orbit img {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 30px 55px rgba(0,0,0,.28);
}

.im-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
}

.im-orbit__ring--yellow {
  border: 12px solid #ffd10a;
  transform: translate(16px,-8px);
}

.im-orbit__ring--dark {
  border: 8px solid #07152f;
  transform: translate(-13px,14px);
}

.im-light {
  padding: 82px max(7vw,45px);
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 6vw;
  align-items: center;
  color: #07152f;
  background: linear-gradient(115deg,#eaf8ff,#72c1ea);
}

.im-light h2,
.im-night h2 {
  margin: 12px 0 22px;
  font-family: var(--font-display);
  font-size: clamp(42px,4.5vw,70px);
  line-height: .93;
  letter-spacing: -.05em;
}

.im-light h2 span {
  color: #0866dc;
}

.im-light p,
.im-night p {
  font-size: 15px;
  line-height: 1.62;
}

.im-wide-photo {
  margin: 0;
  height: 420px;
  overflow: hidden;
  border-radius: 24px 88px 24px 24px;
  box-shadow: 0 22px 35px rgba(5,38,80,.20);
}

.im-wide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-phrase {
  min-height: 210px;
  display: grid;
  place-items: center;
  padding: 45px 8vw;
  background:
    linear-gradient(110deg,rgba(6,47,99,.80),rgba(16,149,228,.82)),
    url("assets/fond-pierrick.webp") center / cover fixed;
}

.im-phrase p {
  max-width: 950px;
  margin: 0;
  text-align: center;
  font-size: clamp(30px,3.2vw,48px);
  text-shadow: 0 3px 18px rgba(0,0,0,.50);
}

.im-night {
  padding: 88px max(7vw,45px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 7vw;
  align-items: center;
  background: #061329;
}

.im-night__visual {
  position: relative;
  min-height: 585px;
}

.im-tall {
  margin: 0;
  width: 70%;
  height: 555px;
  overflow: hidden;
  border-radius: 88px 24px 24px 24px;
}

.im-tall img,
.im-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-small {
  position: absolute;
  right: 0;
  bottom: 25px;
  width: 44%;
  height: 245px;
  margin: 0;
  overflow: hidden;
  border: 8px solid #061329;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #ffd10a;
}

.im-night h2 span {
  color: #ffd10a;
}

.im-note {
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 4px solid #ffd10a;
  background: rgba(255,255,255,.07);
  border-radius: 0 16px 16px 0;
}

.im-cinema {
  min-height: 550px;
  position: relative;
  overflow: hidden;
}

.im-cinema > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(5,20,47,.82) 0 36%,
      rgba(5,20,47,.14) 72%,
      rgba(5,20,47,.03));
}

.im-cinema__caption {
  position: relative;
  z-index: 2;
  width: min(520px,42vw);
  margin-left: 9vw;
  padding-top: 130px;
}

.im-cinema__caption h2 {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(38px,4vw,62px);
  line-height: .95;
}

.im-exit {
  padding: 56px max(8vw,50px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  background: linear-gradient(115deg,#1268ce,#0b4d9d);
}

@media (max-width: 980px) {
  .creation-v2 .creation-hero,
  .im-hero,
  .im-light,
  .im-night {
    grid-template-columns: 1fr;
  }

  .creation-v2 .creation-orbit-media {
    width: min(72vw,520px);
  }

  .creation-v2 .creation-process--editorial {
    grid-template-columns: 1fr;
  }

  .creation-v2 .creation-family-strip {
    grid-template-columns: repeat(3,1fr);
  }

  .im-orbit {
    width: min(76vw,580px);
  }
}

@media (max-width: 760px) {
  .creation-v2 .creation-orbit-media {
    width: 78vw;
  }

  .creation-v2 .creation-family-strip {
    grid-template-columns: 1fr 1fr;
  }

  .creation-v2 .creation-family:nth-child(n),
  .creation-v2 .creation-family:nth-child(n) img {
    min-height: 180px;
  }

  .creation-orbit-ring--yellow {
    border-width: 7px;
  }

  .creation-orbit-ring--dark {
    border-width: 5px;
  }

  .im-hero {
    min-height: auto;
    padding: 95px 18px 45px;
    gap: 34px;
  }

  .im-hero h1 {
    font-size: clamp(52px,16vw,72px);
  }

  .im-orbit {
    width: 82vw;
  }

  .im-light,
  .im-night {
    padding: 55px 20px;
  }

  .im-wide-photo {
    height: 300px;
    border-radius: 18px 55px 18px 18px;
  }

  .im-phrase {
    min-height: 180px;
    background-attachment: scroll;
  }

  .im-night__visual {
    min-height: 430px;
  }

  .im-tall {
    width: 78%;
    height: 400px;
  }

  .im-small {
    width: 45%;
    height: 190px;
  }

  .im-cinema {
    min-height: 500px;
  }

  .im-cinema::after {
    background:
      linear-gradient(180deg,
        rgba(5,20,47,.10),
        rgba(5,20,47,.84) 68%);
  }

  .im-cinema__caption {
    width: auto;
    margin: 0;
    padding: 285px 22px 35px;
  }

  .im-exit {
    grid-template-columns: 1fr;
    padding: 45px 22px;
  }
}




/* ==========================================================================
   IMAGINAIRE V3 — COHÉRENCE RETROUVÉE
   Même langage que Animation / Association :
   fond continu + panneaux espacés, mais compositions internes plus libres.
   ========================================================================== */

.imaginaire-v3 {
  background: #07152f;
  color: #fff;
}

.imaginaire-v3::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.16), rgba(5,20,47,.34)),
    url("assets/fond-pierrick.webp") center center / cover no-repeat;
}

.imaginaire-v3::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 14%, rgba(210,240,255,.18), transparent 29%),
    linear-gradient(180deg, rgba(4,20,47,.04), rgba(4,20,47,.23));
}

.imaginaire-v3 main,
.imaginaire-v3 .site-footer {
  position: relative;
  z-index: 1;
}

.im-stage {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.im-panel {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.im-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.im-panel__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(30px, 3vw, 44px) 0;
}

.im-panel--hero::before {
  background:
    radial-gradient(circle at 72% 25%,
      rgba(206,238,255,.48),
      rgba(63,157,218,.40) 34%,
      rgba(12,92,167,.42) 68%,
      rgba(5,35,78,.54));
}

.im-panel--light::before {
  background:
    linear-gradient(115deg,
      rgba(235,249,255,.78),
      rgba(105,194,234,.58));
}

.im-panel--night::before {
  background:
    linear-gradient(135deg,
      rgba(4,18,42,.80),
      rgba(8,58,122,.56));
}

.im-panel--cinema {
  min-height: 520px;
}

.im-panel--cinema::before {
  background: rgba(5,20,47,.20);
}

.im-panel--exit::before {
  background:
    linear-gradient(115deg,
      rgba(18,104,206,.72),
      rgba(8,66,145,.60));
}

/* HERO */
.im-hero-v3 {
  min-height: 545px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 5vw;
}

.im-hero-v3 .im-hero__copy {
  max-width: 520px;
}

.im-hero-v3 h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(54px,5.6vw,88px);
  line-height: .89;
  letter-spacing: -.055em;
}

.im-hero-v3 h1 span {
  color: #ffd10a;
}

.im-hero-v3 .hero-script {
  font-size: clamp(24px,2.1vw,34px);
  line-height: 1.13;
}

.im-hero-v3 .im-orbit {
  width: min(39vw,540px);
}

/* BLEU CLAIR */
.im-light-v3 {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: 5vw;
  color: #07152f;
}

.im-light-v3 h2,
.im-night-v3 h2 {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(36px,3.7vw,58px);
  line-height: .95;
  letter-spacing: -.045em;
}

.im-light-v3 h2 span {
  color: #0866dc;
}

.im-light-v3 p,
.im-night-v3 p {
  font-size: 16px;
  line-height: 1.6;
}

.im-light-v3 .im-wide-photo {
  height: 355px;
  border-radius: 24px 82px 24px 24px;
}

/* RESPIRATIONS HORS CADRE — seulement 2 */
.im-breath {
  width: min(980px, calc(100% - 10vw));
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 15px rgba(0,0,0,.6);
}

.im-breath p {
  margin: 0;
  font-size: clamp(27px,2.7vw,40px);
}

.im-breath--small p {
  font-size: clamp(23px,2.2vw,34px);
}

/* NUIT — composition plus originale, à l'intérieur du cadre */
.im-night-v3 {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 6vw;
}

.im-night-v3 .im-night__visual {
  min-height: 470px;
}

.im-night-v3 .im-tall {
  width: 71%;
  height: 450px;
  border-radius: 78px 22px 22px 22px;
}

.im-night-v3 .im-small {
  right: 2%;
  bottom: 20px;
  width: 42%;
  height: 205px;
  border: 7px solid rgba(4,18,42,.95);
  box-shadow: 0 0 0 4px #ffd10a;
}

.im-night-v3 h2 span {
  color: #ffd10a;
}

/* GRAND VISUEL, mais contenu dans son panneau */
.im-cinema-v3 {
  position: absolute;
  inset: 0;
  min-height: 520px;
}

.im-cinema-v3 > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-cinema-v3::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(5,20,47,.82) 0 34%,
      rgba(5,20,47,.20) 70%,
      rgba(5,20,47,.04));
}

.im-cinema-v3 .im-cinema__caption {
  position: relative;
  z-index: 2;
  width: min(500px,42vw);
  margin-left: 8%;
  padding-top: 110px;
}

.im-cinema-v3 .im-cinema__caption h2 {
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(34px,3.7vw,56px);
  line-height: .96;
}

/* SORTIE */
.im-exit-v3 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
}

.im-exit-v3 h2 {
  margin: 7px 0;
  font-family: var(--font-display);
  font-size: clamp(30px,3vw,45px);
}

.im-exit-v3 p {
  max-width: 760px;
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .im-hero-v3,
  .im-light-v3,
  .im-night-v3 {
    grid-template-columns: 1fr;
  }

  .im-hero-v3 .im-orbit {
    width: min(70vw,520px);
    justify-self: center;
  }

  .im-night-v3 .im-night__visual {
    min-height: 440px;
  }
}

@media (max-width: 760px) {
  .im-stage {
    width: calc(100% - 18px);
    padding-top: 86px;
    gap: 14px;
  }

  .im-panel {
    border-radius: 22px;
  }

  .im-panel__inner {
    width: calc(100% - 30px);
    padding: 25px 0;
  }

  .im-hero-v3 {
    min-height: auto;
    gap: 30px;
  }

  .im-hero-v3 h1 {
    font-size: clamp(48px,14vw,66px);
  }

  .im-hero-v3 .im-orbit {
    width: 78vw;
  }

  .im-light-v3 .im-wide-photo {
    height: 280px;
    border-radius: 18px 52px 18px 18px;
  }

  .im-night-v3 .im-night__visual {
    min-height: 390px;
  }

  .im-night-v3 .im-tall {
    width: 78%;
    height: 365px;
  }

  .im-night-v3 .im-small {
    width: 44%;
    height: 175px;
  }

  .im-panel--cinema {
    min-height: 470px;
  }

  .im-cinema-v3 {
    min-height: 470px;
  }

  .im-cinema-v3::after {
    background:
      linear-gradient(180deg,
        rgba(5,20,47,.08),
        rgba(5,20,47,.84) 67%);
  }

  .im-cinema-v3 .im-cinema__caption {
    width: auto;
    margin: 0;
    padding: 265px 22px 30px;
  }

  .im-exit-v3 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   CONSOLIDATION R1 — PALETTE / VARIATIONS MESURÉES
   Ces règles enrichissent les nuances sans modifier la structure validée.
   ========================================================================== */
.animation-panel--festival::before { background: linear-gradient(145deg, rgba(17,121,201,var(--panel-opacity-strong)), rgba(8,74,155,var(--panel-opacity-soft))); }
.animation-panel--ateliers::before { background: linear-gradient(145deg, rgba(7,21,47,var(--panel-opacity-strong)), rgba(20,121,201,var(--panel-opacity-soft))); }
.association-panel--identity::before { background: linear-gradient(145deg, rgba(20,121,201,var(--panel-opacity-strong)), rgba(8,74,155,var(--panel-opacity-soft))); }
.icare-universe-page .universe-panel--blue::before { background: linear-gradient(145deg, rgba(20,121,201,var(--panel-opacity-strong)), rgba(8,74,155,var(--panel-opacity-soft))); }

/* ==========================================================================
   ÉVÉNEMENT — mémoire vivante des festivals
   ========================================================================== */
.event-page::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(rgba(4,20,47,.15),rgba(4,20,47,.34)),url("assets/fond-pierrick.webp") center/cover no-repeat; }
.event-page main,.event-page .site-footer{position:relative;z-index:1}
.event-stage{width:min(1440px,calc(100% - 6vw));margin:auto;padding:112px 0 54px;display:grid;gap:clamp(16px,1.8vw,26px)}
.event-panel{position:relative;overflow:hidden;border-radius:32px;border:1px solid rgba(255,255,255,.2);box-shadow:0 22px 48px rgba(2,13,31,.23);backdrop-filter:blur(9px)}
.event-panel::before{content:"";position:absolute;inset:0;z-index:-1}.event-panel__inner{width:min(1180px,calc(100% - 64px));margin:auto;padding:clamp(30px,3vw,44px) 0}
.event-panel--hero::before{background:linear-gradient(125deg,rgba(5,20,47,.72),rgba(20,121,201,.42))}.event-panel--azure::before{background:linear-gradient(145deg,rgba(20,121,201,.68),rgba(8,74,155,.42))}.event-panel--light::before{background:linear-gradient(135deg,rgba(238,249,255,.86),rgba(105,189,234,.68))}.event-panel--night::before{background:linear-gradient(135deg,rgba(7,21,47,.82),rgba(10,52,113,.58))}.event-panel--press::before{background:linear-gradient(135deg,rgba(8,74,155,.70),rgba(7,21,47,.58))}.event-panel--cta::before{background:linear-gradient(120deg,rgba(20,121,201,.72),rgba(11,98,216,.52))}
.event-hero{min-height:500px;display:grid;grid-template-columns:.88fr 1.12fr;gap:4vw;align-items:center}.event-hero h1{font-family:var(--font-display);font-size:clamp(48px,4.6vw,74px);line-height:.91;letter-spacing:-.05em;margin:0}.event-hero h1 span{color:var(--icare-yellow)}.event-hero p{line-height:1.6}.event-hero__collage{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:190px 170px;gap:10px}.event-hero__collage figure{margin:0;overflow:hidden;border-radius:20px}.event-hero__collage figure:first-child{grid-row:1/3;border-radius:72px 20px 20px 20px}.event-hero__collage img{width:100%;height:100%;object-fit:cover}
.event-heading{max-width:880px;margin-bottom:22px}.event-heading h2,.event-cta h2{font-family:var(--font-display);font-size:clamp(32px,3.25vw,50px);line-height:.97;margin:0 0 12px;letter-spacing:-.04em}.event-heading p{line-height:1.58}.event-panel--light{color:var(--icare-night)}.event-panel--light .eyebrow{color:var(--icare-blue-deep)}
.event-photo-reel,.event-poster-reel,.event-press-reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 8px;scrollbar-width:thin}.event-photo-card,.event-poster,.event-press-card{flex:0 0 clamp(220px,23vw,300px);scroll-snap-align:start;position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.22);text-decoration:none}.event-photo-card{height:230px}.event-photo-card img,.event-poster img,.event-press-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.event-photo-card::after,.event-poster::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(4,18,42,.86))}.event-photo-card span,.event-poster span{position:absolute;z-index:2;left:12px;right:12px;bottom:11px;color:#fff;font-size:12px}.event-poster{flex-basis:clamp(180px,18vw,235px);height:320px}.event-press-card{height:190px;background:rgba(255,255,255,.08)}.event-press-card span{position:absolute;left:0;right:0;bottom:0;padding:9px 10px;background:rgba(4,18,42,.78);color:#fff;font-size:11px}
.event-breath{padding:8px 5vw;text-align:center;text-shadow:0 3px 14px rgba(0,0,0,.6)}.event-breath p{margin:0;font-size:clamp(28px,2.8vw,42px)}
.event-video-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:1fr 1fr;gap:12px}.event-video{aspect-ratio:16/9;overflow:hidden;border-radius:20px;background:#030b18}.event-video:first-child{grid-row:1/3}.event-video iframe{width:100%;height:100%;border:0}
.event-press-archive{display:grid;gap:10px}.event-press-group{border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(5,31,70,.22);overflow:hidden}.event-press-group summary{cursor:pointer;padding:14px 16px;font-family:var(--font-display);font-size:16px}.event-press-group summary span{float:right;font-family:var(--font-main);font-size:11px;font-weight:500;opacity:.7}.event-press-group[open] summary{color:var(--icare-yellow)}.event-press-group .event-press-reel{padding:0 12px 12px}
.event-cta{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}.event-cta p{max-width:760px;line-height:1.55}
@media(hover:hover) and (pointer:fine){.event-photo-card:hover img,.event-poster:hover img,.event-press-card:hover img{transform:scale(1.04)}}

/* ==========================================================================
   PROJETS — récit d'expérimentation
   ========================================================================== */
.projects-page::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(4,20,47,.18),rgba(4,20,47,.35)),url("assets/atelier.webp") center/cover no-repeat}.projects-page main,.projects-page .site-footer{position:relative;z-index:1}.projects-stage{width:min(1440px,calc(100% - 6vw));margin:auto;padding:112px 0 54px;display:grid;gap:clamp(16px,1.8vw,26px)}.projects-panel{position:relative;overflow:hidden;border-radius:32px;border:1px solid rgba(255,255,255,.2);box-shadow:0 22px 48px rgba(2,13,31,.23);backdrop-filter:blur(9px)}.projects-panel::before{content:"";position:absolute;inset:0;z-index:-1}.projects-panel__inner{width:min(1180px,calc(100% - 64px));margin:auto;padding:clamp(30px,3vw,44px) 0}
.projects-panel--hero::before{background:linear-gradient(130deg,rgba(7,21,47,.76),rgba(11,98,216,.42))}.projects-panel--process::before{background:linear-gradient(140deg,rgba(20,121,201,.68),rgba(8,74,155,.42))}.projects-panel--film::before{background:linear-gradient(140deg,rgba(7,21,47,.82),rgba(10,52,113,.54))}.projects-panel--research::before{background:linear-gradient(135deg,rgba(238,249,255,.86),rgba(105,189,234,.66))}.projects-panel--tests::before{background:linear-gradient(140deg,rgba(8,74,155,.72),rgba(7,21,47,.54))}.projects-panel--conclusion::before{background:linear-gradient(135deg,rgba(20,121,201,.72),rgba(7,21,47,.58))}
.projects-hero{min-height:500px;display:grid;grid-template-columns:.86fr 1.14fr;gap:4vw;align-items:center}.projects-hero h1{font-family:var(--font-display);font-size:clamp(52px,5vw,82px);line-height:.89;margin:0;letter-spacing:-.055em}.projects-hero h1 span{color:var(--icare-yellow)}.projects-hero p{line-height:1.6}.projects-hero__media{height:390px;margin:0;overflow:hidden;border-radius:78px 22px 22px 22px;box-shadow:0 20px 40px rgba(0,0,0,.26)}.projects-hero__media img{width:100%;height:100%;object-fit:cover}
.projects-heading{max-width:880px;margin-bottom:22px}.projects-heading h2,.projects-film h2,.projects-conclusion h2{font-family:var(--font-display);font-size:clamp(32px,3.25vw,50px);line-height:.97;margin:0 0 12px;letter-spacing:-.04em}.projects-heading p{line-height:1.58}.projects-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.projects-steps article{padding:18px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(5,31,70,.22)}.projects-steps b{display:block;color:var(--icare-yellow);font-size:11px}.projects-steps strong{display:block;font-family:var(--font-display);font-size:18px;margin:5px 0}.projects-steps span{font-size:12px;line-height:1.45;opacity:.82}.projects-breath{text-align:center;padding:8px}.projects-breath p{margin:0;font-size:clamp(28px,2.8vw,42px);text-shadow:0 3px 14px rgba(0,0,0,.6)}
.projects-film{display:grid;grid-template-columns:.7fr 1.3fr;gap:4vw;align-items:center}.projects-film p{line-height:1.6}.projects-video{aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#030b18}.projects-video iframe{width:100%;height:100%;border:0}
.projects-panel--research{color:var(--icare-night)}.projects-panel--research .eyebrow{color:var(--icare-blue-deep)}.projects-research-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:12px}.projects-research-main{grid-row:1/3;margin:0;overflow:hidden;border-radius:22px 76px 22px 22px}.projects-research-main img{width:100%;height:100%;object-fit:cover}.projects-research-grid article{display:grid;grid-template-columns:55% 45%;overflow:hidden;border-radius:18px;background:rgba(255,255,255,.42);border:1px solid rgba(7,21,47,.15)}.projects-research-grid article img{width:100%;height:100%;object-fit:cover}.projects-research-grid article div{padding:14px}.projects-research-grid article p{font-size:12px;line-height:1.45}
.projects-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.projects-test-grid article{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(255,255,255,.23);background:rgba(5,31,70,.22);padding-bottom:17px}.projects-test-grid article img{width:100%;height:190px;object-fit:cover}.projects-test-grid h3,.projects-test-grid p{margin-left:16px;margin-right:16px}.projects-test-grid h3{font-family:var(--font-display);font-size:20px}.projects-test-grid p{font-size:12.5px;line-height:1.5}.projects-status{position:absolute;z-index:2;top:12px;left:12px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.projects-status--real{background:var(--icare-yellow);color:#07152f}.projects-status--study{background:rgba(7,21,47,.86);color:#fff;border:1px solid rgba(255,255,255,.32)}
.projects-conclusion{display:grid;grid-template-columns:.9fr 1.1fr;gap:4vw;align-items:center}.projects-conclusion figure{height:330px;margin:0;overflow:hidden;border-radius:22px 72px 22px 22px}.projects-conclusion img{width:100%;height:100%;object-fit:cover}.projects-conclusion p{line-height:1.6}
@media(hover:hover) and (pointer:fine){.projects-test-grid article{transition:transform .22s ease,border-color .22s ease}.projects-test-grid article:hover{transform:translateY(-4px);border-color:rgba(255,209,10,.55)}}




/* ==========================================================================
   R2 — ACCUEIL : BURGER COMPACT
   Même logique que les pages intérieures, adaptée à la scène plein écran.
   ========================================================================== */

body:not(.subpage) .burger-menu {
  position: fixed !important;
  width: 228px !important;
  min-width: 228px !important;
  height: auto !important;
  max-height: calc(100dvh - 78px) !important;
  top: 64px !important;
  right: 18px !important;
  bottom: auto !important;
  padding: 9px 11px 11px !important;
  gap: 1px !important;
  overflow-y: auto !important;

  background:
    linear-gradient(155deg, rgba(8,28,62,.90), rgba(5,13,29,.82)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body:not(.subpage) .burger-menu[aria-hidden="true"] {
  transform: translateX(calc(100% + 36px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.subpage) .burger-menu[aria-hidden="false"] {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body:not(.subpage) .burger-menu-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body:not(.subpage) .burger-menu a {
  min-height: 29px !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

body:not(.subpage) .burger-menu a:hover,
body:not(.subpage) .burger-menu a:focus-visible {
  padding-left: 13px !important;
  transform: none !important;
}

body:not(.subpage) .burger-menu-separator {
  height: 1px !important;
  margin: 3px 0 !important;
  opacity: .65 !important;
}

@media (max-width: 760px) {
  body:not(.subpage) .burger-menu {
    width: min(238px, 78vw) !important;
    min-width: 0 !important;
    top: 58px !important;
    right: 12px !important;
    max-height: calc(100dvh - 70px) !important;
    padding: 8px 10px 10px !important;
  }
  body:not(.subpage) .burger-menu a {
    min-height: 28px !important;
    font-size: 13px !important;
  }
}


/* ==========================================================================
   R2 — PALETTE ÉLARGIE : ASSOCIATION / CRÉATION
   On éclaire certaines sections sans changer leurs compositions validées.
   ========================================================================== */

:root {
  --icare-blue-deep: #084f9f;
  --icare-blue-mid: #1679c9;
  --icare-blue-sky: #62b9e8;
  --icare-blue-pale: #cbeafb;
  --icare-blue-mist: #e7f6fd;
}

/* Association : alternance plus lumineuse */
.association-page .association-panel--hero::before {
  background:
    radial-gradient(circle at 72% 20%, rgba(130,205,242,.30), transparent 38%),
    linear-gradient(125deg,
      rgba(7,48,105,.52),
      rgba(22,121,201,.34));
}

.association-page .association-panel--identity::before {
  background:
    linear-gradient(145deg,
      rgba(26,132,214,.50),
      rgba(8,87,169,.30));
}

.association-page .association-panel--media::before {
  background:
    linear-gradient(145deg,
      rgba(5,37,80,.58),
      rgba(20,113,188,.34));
}

.association-page .association-panel--links::before {
  background:
    linear-gradient(145deg,
      rgba(8,63,132,.48),
      rgba(37,142,210,.30));
}

/* Création : le sombre reste présent, mais n'est plus la dominante. */
.creation-page .creation-panel--dark::before {
  background:
    radial-gradient(circle at 82% 15%, rgba(90,185,231,.20), transparent 32%),
    linear-gradient(125deg,
      rgba(6,45,98,.58),
      rgba(17,106,185,.34));
}

.creation-page .creation-panel--blue::before {
  background:
    linear-gradient(140deg,
      rgba(25,130,211,.56),
      rgba(7,71,145,.30));
}

.creation-page .creation-panel--light::before {
  background:
    linear-gradient(140deg,
      rgba(231,246,253,.80),
      rgba(112,195,235,.53));
}

.creation-page .creation-free {
  text-shadow: 0 3px 15px rgba(0,0,0,.52);
}


/* ==========================================================================
   R2 — ÉVÉNEMENT : 3 VIDÉOS HOMOGÈNES
   ========================================================================== */

.event-page .event-video-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  gap: 14px !important;
}

.event-page .event-video,
.event-page .event-video:first-child {
  grid-row: auto !important;
  grid-column: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #030b18;
  border: 1px solid rgba(255,255,255,.16);
}

.event-page .event-video iframe,
.event-page .event-video video {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  object-fit: cover;
}

@media (max-width: 980px) {
  .event-page .event-video-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   R2 — ÉVÉNEMENT : REVUE DE PRESSE EN CARROUSEL PAR PÉRIODE
   ========================================================================== */

.event-press-carousel {
  display: grid;
  gap: 14px;
}

.event-press-carousel__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.event-press-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-press-periods button,
.event-press-arrows button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(8,72,145,.30);
  color: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.event-press-periods button.is-active {
  color: var(--icare-yellow);
  border-color: var(--icare-yellow);
  background: rgba(10,92,177,.46);
}

.event-press-arrows {
  display: flex;
  gap: 8px;
}

.event-press-arrows button {
  width: 38px;
  padding-inline: 0;
  font-size: 18px;
}

.event-press-panel {
  display: none;
}

.event-press-panel.is-active {
  display: block;
}

.event-press-panel .event-press-reel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 3px 2px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,209,10,.70) rgba(255,255,255,.08);
}

.event-press-panel .event-press-card {
  flex: 0 0 clamp(225px, 23vw, 300px);
  height: 205px;
  scroll-snap-align: start;
  border-radius: 18px;
}

.event-press-panel__count {
  margin: 0 0 9px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

@media (max-width: 760px) {
  .event-press-carousel__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .event-press-panel .event-press-card {
    flex-basis: min(82vw, 290px);
  }
}


/* ==========================================================================
   CARROUSEL DES SITES — MÉDAILLONS RONDS
   Le cercle sert d'écrin ; le logo reste entier et n'est pas rogné.
   ========================================================================== */

.association-page .partner-logo,
.association-page .association-partner-logo,
.association-page .links-carousel img,
.association-page .association-links-carousel img {
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  object-fit: contain !important;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 8px 20px rgba(2,13,31,.18);
}

/* Si le logo est contenu dans un wrapper, celui-ci devient également rond. */
.association-page .partner-logo-wrap,
.association-page .association-partner-logo-wrap,
.association-page .links-carousel__logo {
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden;
}


/* ==========================================================================
   FONDS DE PAGE CENTRALISÉS
   Les images se règlent dans :root > IMAGES DE FOND DES PAGES.
   ========================================================================== */
.animation-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-animation) !important;
}
.association-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-association) !important;
}
.creation-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-creation) !important;
}
.imaginaire-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-imaginaire) !important;
}
.recreatif-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-recreatif) !important;
}
.event-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-evenement) !important;
}
.projects-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-projets) !important;
}
.portfolio-page::before,
.portfolio-detail-page::before {
  background-image: linear-gradient(rgba(5,20,47,.16),rgba(5,20,47,.34)),var(--fond-portfolio) !important;
}
.animation-page::before,
.association-page::before,
.creation-page::before,
.imaginaire-page::before,
.recreatif-page::before,
.event-page::before,
.projets-page::before,
.portfolio-page::before,
.portfolio-detail-page::before {
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}


/* ---------- Footer compact : responsive ---------- */
@media (max-width: 640px) {
  .site-footer { padding: 8px 6px 10px; }
  .site-footer__line {
    width: calc(100% - 20px);
    min-height: 34px;
    gap: clamp(8px, 3vw, 14px);
    flex-wrap: nowrap;
  }
  .site-footer__logo { width: 27px; height: 31px; max-width: 27px; max-height: 31px; }
  .site-footer__identity { gap: 1px; }
  .site-footer__identity strong { font-size: clamp(9px, 3vw, 11px); }
  .site-footer__identity small { font-size: clamp(6px, 2vw, 8px); }
  .site-footer__icon-link { width: 18px; height: 18px; }
  .site-footer__icon-link svg { width: 15px; height: 15px; }
  .site-footer__since { font-size: clamp(10px, 3.2vw, 13px); }
}
@media (max-width: 390px) {
  .site-footer__line { width: calc(100% - 12px); gap: 7px; }
  .site-footer__logo { width: 24px; height: 28px; max-width: 24px; max-height: 28px; }
  .site-footer__identity strong { font-size: 8.5px; }
  .site-footer__identity small { font-size: 5.8px; }
  .site-footer__since { font-size: 9.5px; }
}

/* =========================================================
   ARTISTIQUE — V3 / COHÉRENCE GLOBALE
   Intégré à la feuille principale : mêmes polices, métriques,
   opacités, panneaux et responsive que les autres pages.
   ========================================================= */

.artistique-page {
  position: relative;
  min-height: 100vh;
  background: #07152f;
  color: #fff;
}

.artistique-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(5,20,47,.18), rgba(5,20,47,.34)),
    var(--fond-artistique) center center / cover no-repeat;
}

.artistique-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 13%, rgba(210,240,255,.18), transparent 28%),
    linear-gradient(180deg, rgba(4,20,47,.02), rgba(4,20,47,.20));
}

.artistique-page main,
.artistique-page .site-footer {
  position: relative;
  z-index: 1;
}

.artistique-page main {
  width: min(1440px, calc(100% - 6vw));
  margin: 0 auto;
  padding: 112px 0 54px;
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

/* Tous les grands panneaux partagent la même grammaire,
   sans imposer la même composition interne. */
.art-hero,
.art-intro,
.art-strip,
.art-piece {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 22px 48px rgba(2,13,31,.23);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* =========================================================
   HERO — bleu ciel, grand cercle
   ========================================================= */

.art-hero {
  min-height: 545px;
  border-radius: 32px;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.48), transparent 24%),
    linear-gradient(145deg,
      rgba(143,209,242,var(--panel-opacity-strong)) 0%,
      rgba(65,159,221,var(--panel-opacity-strong)) 48%,
      rgba(11,98,216,var(--panel-opacity-soft)) 100%);
}

.art-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(7,21,47,.42));
}

.art-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 85%, rgba(7,21,47,.20), transparent 30%),
    linear-gradient(105deg, rgba(7,21,47,.12), transparent 46%);
}

.art-hero__grid {
  min-height: 545px;
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(30px, 3vw, 44px) 0;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 5vw;
  align-items: center;
}

.art-hero__copy { max-width: 590px; }

.art-hero h1,
.art-intro h2,
.art-piece h2,
.art-strip h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -.055em;
}

.art-hero h1 {
  font-size: clamp(54px, 5.6vw, 88px);
  line-height: .92;
}

.art-hero h1 span,
.art-piece h2 span {
  color: var(--icare-yellow);
}

.art-lead {
  margin: 22px 0 0;
  max-width: 570px;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255,255,255,.92);
}

.art-circle {
  position: relative;
  width: min(39vw, 540px);
  aspect-ratio: 1;
  margin: 0;
  justify-self: end;
}

.art-circle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 26px 60px rgba(7,21,47,.28);
}

.art-circle__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.art-circle__ring--yellow {
  inset: -3%;
  border: 11px solid var(--icare-yellow);
  transform: translate(17px,-10px);
}

.art-circle__ring--dark {
  inset: -1%;
  border: 5px solid rgba(7,21,47,.92);
  transform: translate(-17px,13px);
}

.art-circle figcaption {
  position: absolute;
  z-index: 3;
  right: 2%;
  bottom: -42px;
  max-width: 330px;
  font-family: var(--font-script);
  font-size: 19px;
  line-height: 1.15;
  transform: rotate(-2deg);
}

/* =========================================================
   INTRO — panneau bleu clair
   ========================================================= */

.art-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  color: #07152f;
  background: rgba(138,205,240,var(--panel-opacity-soft));
}

/* Image placée dans le HTML : images/artistique-intro.jpg */
.art-intro__background {
  position: absolute;

  width: 100%;
  height: 100%;

  left: 74%;
  top: 50%;

  transform: translate(-50%, -50%);

  object-fit: contain;
  object-position: center;

  z-index: 0;
}

/* Dégradé clair à gauche pour préserver la lisibilité du texte,
   puis progressivement transparent vers la droite. */
.art-intro__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(216,239,251,.97) 0%,
    rgba(188,224,245,.92) 30%,
    rgba(138,205,240,.70) 55%,
    rgba(104,185,231,.10) 76%,
    rgba(104,185,231,.02) 100%
  );
}

.art-intro__inner {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(30px, 3vw, 44px) 0;
}

.art-intro .eyebrow { color: #0755a5; }

.art-intro h2 {
  max-width: 850px;
  font-size: clamp(36px, 3.7vw, 58px);
  line-height: .96;
}

.art-intro h2 span { color: #0b62d8; }

.art-intro__inner > p:last-child {
  max-width: 900px;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(7,21,47,.78);
}

/* =========================================================
   GALERIE — plus de bande continue :
   chaque pièce devient son propre panneau.
   ========================================================= */

.art-gallery {
  padding: 0;
  background: transparent;
}

.art-gallery__grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.art-piece {
  min-height: 470px;
  padding: clamp(30px, 3vw, 44px);
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 6vw;
  align-items: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 28%, rgba(11,98,216,.22), transparent 25%),
    linear-gradient(145deg,
      rgba(7,21,47,var(--panel-opacity-strong)),
      rgba(5,7,11,var(--panel-opacity-soft)) 68%);
}

/* 2e pièce : bleu pétrole / cyan profond — plus vif pour dynamiser la séquence */
.art-piece:nth-child(2) {
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(190, 235, 255, .42),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(20, 105, 175, .88),
      rgba(72, 174, 224, .74)
    );
  border-radius: 32px;
}

/* 3e pièce : bleu ardoise désaturé — tonalité plus patrimoniale */
.art-piece:nth-child(3) {
  background:
    radial-gradient(circle at 78% 74%, rgba(142,208,242,.20), transparent 31%),
    linear-gradient(135deg,
      rgba(48,71,102,var(--panel-opacity-strong)),
      rgba(73,103,134,var(--panel-opacity-soft)) 58%,
      rgba(97,123,153,var(--panel-opacity-soft)));
  border-radius: 32px;
}

.art-piece--reverse {
  grid-template-columns: .82fr 1.18fr;
}

.art-piece--reverse .art-photo { order: 2; }
.art-piece--reverse .art-piece__copy { order: 1; }

.art-piece--lift { transform: none; }

.art-photo {
  position: relative;
  margin: 0;
  height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 55px rgba(0,0,0,.25);
  background: #0b62d8;
}

.art-photo--portrait {
  height: 430px;
  max-width: 430px;
  justify-self: end;
}

.art-photo--corner-tr { border-radius: 24px 82px 24px 24px; }
.art-photo--corner-tl { border-radius: 82px 24px 24px 24px; }
.art-photo--corner-br { border-radius: 24px 24px 82px 24px; }

.art-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .55s ease, filter .55s ease;
}

.art-piece:hover .art-photo img {
  transform: scale(1.025);
}

.art-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,21,47,.36));
  pointer-events: none;
}

.art-photo__number {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 12px;
  font-family: var(--font-display);
  font-size: 48px;
  color: rgba(255,255,255,.72);
}

.art-photo__badge {
  position: absolute;
  z-index: 2;
  left: 20px;
  top: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #07152f;
  background: var(--icare-yellow);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

.art-piece__copy {
  max-width: 520px;
  color: #fff;
}

.art-piece__copy h2 {
  font-size: clamp(36px, 3.7vw, 57px);
  line-height: .98;
}

.art-piece__copy > p:last-child {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.68;
  color: rgba(255,255,255,.78);
}

/* =========================================================
   SORTIE — panneau bleu clair distinct
   ========================================================= */

.art-strip {
  border-radius: 32px;
  color: #07152f;
  background:
    linear-gradient(100deg, rgba(255,255,255,.16), transparent 45%),
    linear-gradient(135deg,
      rgba(120,197,239,var(--panel-opacity-strong)),
      rgba(59,157,225,var(--panel-opacity-soft)));
}

.art-strip__inner {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: clamp(30px, 3vw, 44px) 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr auto;
  gap: 34px;
  align-items: center;
}

.art-strip .eyebrow { color: #0755a5; }

.art-strip h2 {
  font-size: clamp(32px, 3.2vw, 49px);
  line-height: .98;
}

.art-strip h2 span { color: #0755a5; }

.art-strip__inner > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(7,21,47,.78);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .artistique-page main {
    width: calc(100% - 24px);
    padding-top: 84px;
  }

  .art-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 46px 0 56px;
    gap: 58px;
  }

  .art-circle {
    width: min(70vw, 500px);
    justify-self: center;
    margin-bottom: 48px;
  }

  .art-piece,
  .art-piece--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 32px;
  }

  .art-piece--reverse .art-photo,
  .art-piece--reverse .art-piece__copy {
    order: initial;
  }

  .art-photo--portrait {
    max-width: none;
    justify-self: stretch;
    height: 400px;
  }

  .art-strip__inner {
    grid-template-columns: 1fr;
  }

  .art-strip__inner .icare-button {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .artistique-page main {
    width: calc(100% - 18px);
    gap: 14px;
  }

  .art-hero,
  .art-intro,
  .art-piece,
  .art-strip {
    border-radius: 22px;
  }

  .art-hero__grid,
  .art-intro__inner,
  .art-strip__inner {
    width: calc(100% - 34px);
  }

  .art-hero h1 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .art-circle {
    width: min(80vw, 380px);
  }

  .art-circle figcaption {
    font-size: 16px;
    bottom: -38px;
  }

  .art-intro__inner {
    padding: 25px 0;
  }

  .art-piece {
    padding: 24px 20px 26px;
  }

  .art-photo,
  .art-photo--portrait {
    height: 330px;
  }

  .art-photo--corner-tr { border-radius: 18px 72px 18px 18px; }
  .art-photo--corner-tl { border-radius: 72px 18px 18px 18px; }
  .art-photo--corner-br { border-radius: 18px 18px 72px 18px; }

  .art-piece__copy h2 {
    font-size: clamp(33px, 10vw, 45px);
  }

  .art-strip__inner {
    padding: 34px 0;
  }
}


/* ==========================================================================
   CRÉATION — FAMILLES DE CERFS-VOLANTS
   Réglage final : cadres indépendants + légendes extérieures
   ========================================================================== */

.creation-v2 .creation-family-strip {
  display: flex;
  grid-template-columns: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 1.7vw, 28px);
}

.creation-v2 .creation-family {
  position: relative;
  flex: 0 1 var(--family-w, 130px);
  width: var(--family-w, 130px);
  max-width: var(--family-w, 130px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.creation-v2 .creation-family::after {
  content: none;
}

.creation-v2 .creation-family img,
.creation-v2 .creation-family:nth-child(n) img {
  display: block;
  width: 100%;
  height: var(--family-h, 240px);
  min-height: 0;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
}

/* TITRES : volontairement sortis des photos */
.creation-v2 .creation-family span {
  position: static;
  display: block;
  margin-top: 9px;
  padding: 0 3px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ==========================================================
   RÉGLAGES INDIVIDUELS DES 6 CADRES — DESKTOP
   Modifier --family-w = largeur et --family-h = hauteur.
   ========================================================== */
.creation-v2 .creation-family--structures  { --family-w: 175px; --family-h: 275px; }
.creation-v2 .creation-family--bols        { --family-w: 130px; --family-h: 210px; }
.creation-v2 .creation-family--couronnes   { --family-w: 160px; --family-h: 240px; }
.creation-v2 .creation-family--flowforms   { --family-w: 130px; --family-h: 210px; }
.creation-v2 .creation-family--bestiaire   { --family-w: 130px; --family-h: 275px; }
.creation-v2 .creation-family--cellulaires { --family-w: 170px; --family-h: 240px; }

/* Tablette / petit desktop : 3 + 3, sans compression des mots */
@media (max-width: 1050px) {
  .creation-v2 .creation-family-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 24px 20px;
  }

  .creation-v2 .creation-family {
    width: 100%;
    max-width: none;
  }

  .creation-v2 .creation-family img,
  .creation-v2 .creation-family:nth-child(n) img {
    width: 100%;
    height: clamp(210px, 28vw, 280px);
  }
}

/* Smartphone : 2 + 2 + 2 */
@media (max-width: 760px) {
  .creation-v2 .creation-family-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .creation-v2 .creation-family img,
  .creation-v2 .creation-family:nth-child(n) img {
    height: clamp(180px, 58vw, 250px);
  }

  .creation-v2 .creation-family span {
    font-size: 14px;
  }
}


/* ==========================================================================
   CRÉATION — ATELIERS RÉCENTS / CARTOUCHES
   Mise en page volontaire sur 2 lignes :
   3 cartouches en haut, 2 cartouches centrées et réparties en bas.
   ========================================================================== */

.creation-v2 .creation-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 14px;
  width: 100%;
  margin-top: 18px;
}

.creation-v2 .creation-timeline span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(5,31,70,.22);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

/* Première ligne : 3 cartouches de même largeur */
.creation-v2 .creation-timeline span:nth-child(1) { grid-column: 1 / 3; }
.creation-v2 .creation-timeline span:nth-child(2) { grid-column: 3 / 5; }
.creation-v2 .creation-timeline span:nth-child(3) { grid-column: 5 / 7; }

/* Deuxième ligne : 2 cartouches réparties et centrées,
   sans donner l'impression d'une sixième case manquante */
.creation-v2 .creation-timeline span:nth-child(4) { grid-column: 2 / 4; }
.creation-v2 .creation-timeline span:nth-child(5) { grid-column: 4 / 6; }

/* Smartphone : 2 + 2 + 1, dernier cartouche centré */
@media (max-width: 760px) {
  .creation-v2 .creation-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 10px;
  }

  .creation-v2 .creation-timeline span:nth-child(1) { grid-column: 1 / 3; }
  .creation-v2 .creation-timeline span:nth-child(2) { grid-column: 3 / 5; }
  .creation-v2 .creation-timeline span:nth-child(3) { grid-column: 1 / 3; }
  .creation-v2 .creation-timeline span:nth-child(4) { grid-column: 3 / 5; }
  .creation-v2 .creation-timeline span:nth-child(5) { grid-column: 2 / 4; }

  .creation-v2 .creation-timeline span {
    white-space: normal;
    min-height: 38px;
  }
}


/* ==========================================================================
   CRÉATION — L'ART D'APRÈS / AJUSTEMENT MISE EN PAGE
   - boutons jaunes sur une seule ligne en desktop
   - léger décalage à droite
   - typographie des étapes renforcée
   ========================================================================== */

/* Les trois boutons occupent désormais toute la largeur du panneau,
   juste sous le bloc texte + images. */
.creation-v2 .creation-actions--recycle {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 14px;
  margin-left: 18px;
}

/* Texte toujours sur une ligne tant que la largeur le permet. */
.creation-v2 .creation-actions--recycle .icare-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Étapes du bas : tailles demandées */
.creation-v2 .creation-recycle-step strong {
  font-size: 16px;
}

.creation-v2 .creation-recycle-step span {
  font-size: 14px;
  line-height: 1.42;
}

/* Un peu moins de vide entre les boutons et les étapes. */
.creation-v2 .creation-recycle-steps {
  margin-top: 12px;
}

/* Responsive : les boutons peuvent se répartir proprement
   dès que les trois ne tiennent plus confortablement. */
@media (max-width: 860px) {
  .creation-v2 .creation-actions--recycle {
    flex-wrap: wrap;
    margin-left: 10px;
  }
}

@media (max-width: 560px) {
  .creation-v2 .creation-actions--recycle {
    margin-left: 0;
    gap: 10px;
  }

  .creation-v2 .creation-actions--recycle .icare-button {
    min-height: 46px;
  }

  .creation-v2 .creation-recycle-step strong {
    font-size: 16px;
  }

  .creation-v2 .creation-recycle-step span {
    font-size: 14px;
  }
}


/* ==========================================================================
   ÉVÉNEMENT — FLÈCHES DE DÉFILEMENT HORIZONTAL
   Utilisées pour "Sur les terrains" et "Agenda 2026".
   ========================================================================== */

.event-scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  margin: -8px 12px 7px auto;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: var(--icare-yellow);
  color: var(--icare-night);
  box-shadow: 3px 4px 0 rgba(0,0,0,.24);

  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  animation: event-scroll-hint 1.8s ease-in-out infinite;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.event-scroll-arrow:hover,
.event-scroll-arrow:focus-visible {
  animation: none;
  transform: translateX(3px);
  box-shadow: 4px 5px 0 rgba(0,0,0,.30);
}

.event-scroll-arrow:focus-visible {
  outline: 3px solid rgba(255,255,255,.82);
  outline-offset: 3px;
}

.event-scroll-arrow.is-at-end {
  opacity: .35;
  cursor: default;
  animation: none;
  box-shadow: none;
}

.event-scroll-arrow[hidden] {
  display: none !important;
}

@keyframes event-scroll-hint {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .event-scroll-arrow {
    animation: none;
  }
}


/* ==========================================================================
   ÉVÉNEMENT — AGENDA 2026 EN GRILLE
   Tous les événements restent visibles d'un seul coup d'œil.
   Le carrousel est conservé uniquement pour "Sur les terrains".
   ========================================================================== */

.event-page #agenda .event-poster-reel,
.event-page #agenda .event-poster-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;

  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
}

.event-page #agenda .event-poster {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 0.72;
  flex: initial;
  scroll-snap-align: none;
}

.event-page #agenda .event-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 11 affiches : 6 en première ligne, 5 en seconde.
   La seconde ligne reste visuellement équilibrée. */
@media (min-width: 1101px) {
  .event-page #agenda .event-poster:nth-child(n+7) {
    transform: translateX(8%);
  }
}

@media (max-width: 1100px) {
  .event-page #agenda .event-poster-reel,
  .event-page #agenda .event-poster-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .event-page #agenda .event-poster-reel,
  .event-page #agenda .event-poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .event-page #agenda .event-poster {
    aspect-ratio: 0.72;
  }
}


/* ==========================================================================
   ÉVÉNEMENT — APERÇUS YOUTUBE AUTOMATIQUES
   Les miniatures sont récupérées directement depuis YouTube :
   aucune image locale supplémentaire n'est nécessaire.
   ========================================================================== */

.event-youtube-card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;

  border: 0;
  border-radius: inherit;

  background: #030b18;
  color: #fff;
  cursor: pointer;
}

.event-youtube-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transition:
    transform .28s ease,
    filter .28s ease;
}

.event-youtube-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(3,11,24,.08) 0%,
      rgba(3,11,24,.18) 48%,
      rgba(3,11,24,.72) 100%
    );
  pointer-events: none;
}

.event-youtube-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 18px;
}

.event-youtube-card__play {
  width: 62px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 13px;
  background: #ff0033;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.30);

  font-size: 22px;
  line-height: 1;
  padding-left: 3px;
}

.event-youtube-card__label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;

  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-shadow: 0 2px 5px rgba(0,0,0,.85);
}

.event-youtube-card:hover img,
.event-youtube-card:focus-visible img {
  transform: scale(1.035);
  filter: brightness(1.06);
}

.event-youtube-card:focus-visible {
  outline: 3px solid var(--icare-yellow);
  outline-offset: 3px;
}

/* L'iframe injectée au clic reprend exactement la taille du cadre */
.event-video > iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


/* ==========================================================================
   ÉVÉNEMENT — LECTURE VIDÉO DANS LA PAGE
   ========================================================================== */

.event-video > iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


/* ==========================================================================
   ÉVÉNEMENT — VIDÉOS
   Intégration reprise du site actuel : trois iframes directement embarquées.
   ========================================================================== */

.event-video-grid .event-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


/* ==========================================================================
   ÉVÉNEMENT — VIDÉOS : CODE REPRIS DU SITE ACTUEL
   Structure et règles calquées sur evenementiels.html + icare.css.
   ========================================================================== */

.event-page #videos .video-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.event-page #videos .video-wrapper {
  flex: 1 1 300px;
  max-width: 450px;
}

.event-page #videos .video-responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
  background: black;
  border-radius: 18px;
}

.event-page #videos .video-responsive-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .event-page #videos .video-container {
    gap: 14px;
  }

  .event-page #videos .video-wrapper {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* === VIDEOS : COPIE STRICTE DU CSS DU SITE ACTUEL === */
.video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    margin-top: 30px;
}

.video-wrapper {
    flex: 1 1 300px;
    max-width: 450px;
}

.video-responsive-container {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    background: black;
    border: 2px solid var(--color-primary);
    border-radius: 4px;
}

.video-responsive-container iframe,
.video-responsive-container.portrait iframe,
.video-responsive-container video,
.video-responsive-container.portrait video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
}

/* === PROJETS : TEXTES DES CARTES À 15 PX === */
.projects-page .projects-steps span,
.projects-page .projects-research-grid article p,
.projects-page .projects-test-grid p {
  font-size: 15px;
}

/* === EXPOSITION : PHOTO PLUS HAUTE SUR DESKTOP === */
@media (min-width: 981px) {
  .animation-panel--exposition .split-feature__media {
    min-height: 520px;
    max-height: 560px;
  }
}


/* ==========================================================================
   ASSOCIATION — REPÈRES HISTORIQUES / FACEBOOK DIRECT
   ========================================================================== */
.association-history-heading{max-width:820px;margin-bottom:28px}
.association-history-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.association-history-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(3,14,34,.46);box-shadow:0 12px 30px rgba(0,0,0,.16)}
.association-history-card__media{height:155px;overflow:hidden;background:rgba(255,255,255,.04)}
.association-history-card__media img{width:100%;height:100%;display:block;object-fit:cover}
.association-history-card__media--logo{display:grid;place-items:center;padding:26px;background:rgba(255,255,255,.92)}
.association-history-card__media--logo img{width:auto;height:100%;max-width:100%;object-fit:contain}
.association-history-card__body{padding:19px 18px 21px}
.association-history-card__date{display:block;margin-bottom:7px;color:var(--icare-yellow);font-size:.78rem;font-weight:800;letter-spacing:.12em}
.association-history-card h3{margin:0 0 8px;font-family:var(--font-display);font-size:1.08rem}
.association-history-card p{margin:0;color:rgba(255,255,255,.82);font-size:.93rem;line-height:1.5}
.association-facebook-intro{margin:0 0 13px;color:rgba(255,255,255,.78);font-size:.94rem;line-height:1.5}
.association-facebook-direct{display:inline-flex;align-items:center;min-height:42px;margin:0 0 16px;padding:9px 15px;border:1px solid rgba(255,209,10,.65);border-radius:999px;color:#fff;text-decoration:none;font-weight:700;background:rgba(255,209,10,.08)}
.association-facebook-direct:hover,.association-facebook-direct:focus-visible{color:#111;background:var(--icare-yellow)}