/* ==========================================================================
   ICARE ENCORE — RESPONSIVE COMMUN — VERSION CONSOLIDÉE
   --------------------------------------------------------------------------
   À charger EN DERNIER, après styles.css ou le CSS propre à la page.

   IMPORTANT
   Cette feuille remplace les anciennes couches responsive V1 / V2 / V3.
   Ne pas conserver les anciennes versions en parallèle.

   RÉGLAGES MANUELS PRINCIPAUX
   Les valeurs ci-dessous sont les seuls réglages à modifier pour les éléments
   structurants de l'accueil mobile.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     RÉGLAGES ACCUEIL MOBILE
     ------------------------------------------------------------------------ */

  /* Position horizontale de l'ensemble TOUR ICARE + CARTOUCHES.
     Augmenter = déplacer vers la droite.
     Exemple : 28px -> 32px -> 36px.
     Cette variable n'est redéfinie nulle part ailleurs dans ce fichier. */
  --responsive-icare-tower-x: clamp(26px, 7vw, 44px);

  /* Espace réservé sous le logo avant le cercle central.
     Augmenter si le cercle remonte trop près de la signature. */
  --responsive-home-top-space: clamp(150px, 37vw, 178px);

  /* Taille du cercle central sur mobile. */
  --responsive-orbit-mobile-size: min(84vw, 420px);

  /* Hauteur de la colonne ICARE sur mobile. */
  --responsive-icare-tower-height: clamp(240px, 66vw, 300px);

  /* Chevauchement horizontal entre la colonne ICARE et les cartouches.
     Plus la valeur est négative, plus les cartouches passent sous la colonne. */
  --responsive-icare-pills-offset: -76px;

  /* Petit déplacement interne de l'image de la colonne ICARE.
     Normalement à ne pas modifier pour déplacer l'ensemble :
     utiliser --responsive-icare-tower-x ci-dessus. */
  --responsive-icare-image-x: -14px;
}


/* ==========================================================================
   0. GARDE-FOUS COMMUNS
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

main,
section,
article,
aside,
nav,
header,
footer,
div {
  min-width: 0;
}

h1,
h2,
h3,
p {
  overflow-wrap: normal;
  word-break: normal;
}

:focus-visible {
  outline: 3px solid var(--icare-yellow, #ffd10a);
  outline-offset: 3px;
}

@media (hover: none) {
  a:hover,
  button:hover {
    transform: none;
  }
}


/* ==========================================================================
   1. TABLETTE / PETIT DESKTOP — <= 980 PX
   La composition desktop est conservée mais comprimée.
   ========================================================================== */

@media (max-width: 980px) {

  /* ----- Accueil ----- */

  body:not(.subpage) .brand {
    width: min(38vw, 330px);
  }

  body:not(.subpage) .brand-title {
    font-size: clamp(42px, 7vw, 72px);
  }

  body:not(.subpage) .orbit {
    --orbit-size: min(55vh, 58vw);
    --orbit-x: 61vw;
    --orbit-y: 39vh;
  }

  body:not(.subpage) .icare-menu {
    top: 39vh;
    --icare-tower-height: clamp(285px, 41vh, 390px);
    --icare-tower-shift-x: -38px;
  }

  body:not(.subpage) .icare-pills {
    margin-left: calc(-125px - var(--icare-pill-overlap));
  }

  body:not(.subpage) .claim {
    left: 48%;
    bottom: 15vh;
  }

  body:not(.subpage) .discover {
    right: 3vw;
    bottom: 3.8vh;
    width: min(35vw, 330px);
  }


  /* ----- Pages intérieures ----- */

  .inner-hero__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 46px;
    padding-top: 138px;
  }

  .inner-hero__copy {
    max-width: 680px;
  }

  .hero-orbit {
    width: min(68vw, 520px);
    justify-self: center;
  }

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

  .feature-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .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: 720px;
  }

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

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


/* ==========================================================================
   2. MOBILE — <= 760 PX
   L'accueil est recomposé dans un flux vertical :
   cercle -> menu ICARE -> accroche -> contact.
   ========================================================================== */

@media (max-width: 760px) {

  html,
  body {
    width: 100%;
    min-height: 100%;
  }

  html:not(.subpage),
  body:not(.subpage) {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--icare-night);
  }


  /* ----- Scène d'accueil ----- */

  body:not(.subpage) .hero {
    width: 100%;
    height: auto;
    min-height: 100svh;
    padding:
      var(--responsive-home-top-space)
      14px
      36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    overflow: hidden;
  }

  body:not(.subpage) .sky {
    position: absolute;
    background-position: 70% center;
  }


  /* ----- Identité ----- */

  body:not(.subpage) .brand {
    position: absolute;
    left: 18px;
    top: 18px;
    width: min(64vw, 250px);
  }

  body:not(.subpage) .brand-title {
    font-size: clamp(38px, 12vw, 58px);
  }

  body:not(.subpage) .brand-subtitle {
    margin-top: 8px;
    font-size: clamp(9px, 2.7vw, 12px);
  }

  body:not(.subpage) .dash {
    margin-left: .5em;
  }


  /* ----- Burger ----- */

  body:not(.subpage) .burger {
    position: fixed;
    top: 22px;
    right: 18px;
    width: 34px;
    height: 30px;
    z-index: 100;
  }

  body:not(.subpage) .burger-menu {
    position: fixed;
    z-index: 99;
    top: 60px;
    right: 12px;
    width: min(244px, calc(100vw - 30px));
    min-width: 0;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
  }


  /* ----- Cercle central ----- */

  body:not(.subpage) .orbit {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    width: var(--responsive-orbit-mobile-size);
    height: auto;
    aspect-ratio: 1;
    transform: none;
    --orbit-size: auto;
    --orbit-x: auto;
    --orbit-y: auto;
    flex: 0 0 auto;
  }

  body:not(.subpage) .ring {
    inset: 0;
  }

  body:not(.subpage) .ring-black {
    border-width: clamp(9px, 2.5vw, 13px);
  }

  body:not(.subpage) .image-container {
    inset: clamp(16px, 4vw, 22px);
  }

  body:not(.subpage) .satellite {
    --sat-size: clamp(54px, 14vw, 68px);
  }

  body:not(.subpage) .sat-label {
    padding: 4px 7px;
    font-size: clamp(6px, 1.75vw, 8px);
  }

  body:not(.subpage) .s-association {
    left: -2%;
    top: 9%;
  }

  body:not(.subpage) .s-creations {
    right: -2%;
    top: 9%;
  }

  body:not(.subpage) .s-events {
    left: -1%;
    bottom: 9%;
  }

  body:not(.subpage) .s-animations {
    right: -1%;
    bottom: 9%;
  }

  body:not(.subpage) .sat-tooltip {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(82vw, 360px);
    z-index: 110;
  }

  body:not(.subpage) .scene-copy {
    left: 17%;
    bottom: 10%;
    width: 66%;
    font-size: clamp(17px, 5vw, 25px);
    line-height: 1;
  }


  /* ------------------------------------------------------------------------
     TOUR ICARE MOBILE

     POUR DÉPLACER TOUTE LA TOUR :
     modifier uniquement --responsive-icare-tower-x dans :root,
     tout en haut du fichier.

     Il n'existe aucune seconde règle qui annule ce réglage.
     ------------------------------------------------------------------------ */

  body:not(.subpage) .icare-menu {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: min(94vw, 450px);
    height: auto;
    margin: 4px auto 0;
    justify-content: center;
    align-items: center;

    --icare-tower-height: var(--responsive-icare-tower-height);
    --icare-pill-overlap: 18px;

    transform: translateX(var(--responsive-icare-tower-x));
  }

  body:not(.subpage) .icare-tower {
    transform: none;
  }

  body:not(.subpage) .icare-tower img {
    transform: translateX(var(--responsive-icare-image-x));
  }

  body:not(.subpage) .icare-pills {
    width: min(56vw, 245px);
    height: var(--icare-tower-height);
    margin-left:
      calc(
        var(--responsive-icare-pills-offset)
        - var(--icare-pill-overlap)
      );
  }

  body:not(.subpage) .icare-pill {
    height: clamp(34px, 9vw, 43px);
    padding-right: 11px;
    border-radius: 0 20px 20px 0;
    font-size: clamp(10px, 3vw, 13px);
  }

  body:not(.subpage) .p1,
  body:not(.subpage) .p5 {
    width: min(45vw, 188px);
    --text-x: 26px;
  }

  body:not(.subpage) .p2,
  body:not(.subpage) .p4 {
    width: min(50vw, 205px);
    --text-x: 37px;
  }

  body:not(.subpage) .p3 {
    width: min(55vw, 224px);
    --text-x: 48px;
  }


  /* ----- Accroche ----- */

  body:not(.subpage) .claim {
    order: 3;
    position: relative;
    left: auto;
    bottom: auto;
    width: min(92vw, 460px);
    margin: 4px auto 0;
    transform: none;
    white-space: normal;
    text-align: center;
  }

  body:not(.subpage) .claim-script {
    font-size: clamp(22px, 7vw, 32px);
  }

  body:not(.subpage) .claim-strong {
    margin-top: 5px;
    font-size: clamp(12px, 3.8vw, 17px);
  }


  /* ----- Contact ----- */

  body:not(.subpage) .discover,
  body:not(.subpage) .discover-contact {
    order: 4;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(92vw, 430px);
    min-height: 0;
    margin: 0 auto;
    padding: 15px 16px;
    gap: 12px;
  }

  body:not(.subpage) .discover-contact-copy {
    font-size: 12px;
  }

  body:not(.subpage) .discover-signature {
    max-width: none;
    font-size: 12px;
  }

  body:not(.subpage) .discover-contact-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding-left: 0;
  }

  body:not(.subpage) .discover-action {
    min-height: 40px;
    padding: 8px 13px;
    font-size: 12px;
  }


  /* ----- Pages intérieures ----- */

  .inner-hero {
    height: auto;
    min-height: 0;
  }

  .inner-hero__content {
    min-height: 0;
    padding-top: 118px;
    padding-bottom: 88px;
    gap: 46px;
  }

  .inner-hero h1 {
    font-size: clamp(46px, 14vw, 68px);
    line-height: .92;
  }

  .hero-script {
    font-size: clamp(23px, 6.5vw, 30px);
  }

  .hero-intro {
    font-size: clamp(15px, 4.1vw, 17px);
  }

  .hero-orbit {
    width: min(82vw, 390px);
  }

  .section {
    padding: clamp(62px, 16vw, 82px) 0;
  }

  .section-heading h2,
  .story-copy h2,
  .cta-panel h2 {
    font-size: clamp(35px, 10vw, 47px);
    line-height: .98;
  }

  .section-heading > p:last-child,
  .story-copy > p,
  .cta-panel p {
    font-size: 15.5px;
    line-height: 1.62;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .glass-card {
    min-height: 0;
    padding: 27px 24px;
  }

  .photo-placeholder--wide {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .photo-placeholder--portrait {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .immersive-panel {
    min-height: 540px;
  }

  .immersive-panel__copy {
    left: 15px;
    right: 15px;
    bottom: 28px;
    max-width: none;
  }

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

  .icare-button {
    min-height: 48px;
  }

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


/* ==========================================================================
   3. PETITS SMARTPHONES — <= 420 PX
   Uniquement des ajustements de dimensions.
   La position horizontale de la tower n'est PAS redéfinie ici.
   ========================================================================== */

@media (max-width: 420px) {

  body:not(.subpage) .hero {
    padding-right: 10px;
    padding-left: 10px;
    gap: 24px;
  }

  body:not(.subpage) .orbit {
    width: min(88vw, 360px);
  }

  body:not(.subpage) .icare-menu {
    width: 98vw;
    --icare-tower-height: clamp(225px, 68vw, 270px);
  }

  body:not(.subpage) .icare-pills {
    width: min(58vw, 220px);
  }

  body:not(.subpage) .p1,
  body:not(.subpage) .p5 {
    width: 45vw;
  }

  body:not(.subpage) .p2,
  body:not(.subpage) .p4 {
    width: 50vw;
  }

  body:not(.subpage) .p3 {
    width: 55vw;
  }

  .inner-hero__content {
    padding-top: 108px;
  }

  .inner-hero h1 {
    font-size: clamp(43px, 13.5vw, 58px);
  }
}


/* ==========================================================================
   4. ÉCRANS DESKTOP PEU HAUTS
   ========================================================================== */

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

  body:not(.subpage) .brand {
    top: 3vh;
  }

  body:not(.subpage) .orbit {
    --orbit-size: min(64vh, 54vw);
    --orbit-y: 42vh;
  }

  body:not(.subpage) .icare-menu {
    top: 34vh;
    --icare-tower-height: clamp(285px, 45vh, 390px);
  }

  body:not(.subpage) .claim {
    bottom: 3.2vh;
  }

  body:not(.subpage) .discover {
    bottom: 2.5vh;
  }
}


/* ==========================================================================
   5. BOUTONS CONTACT — CENTRAGE COMMUN
   Sur desktop aussi, seuls les boutons sont centrés dans leur propre zone.
   Le bloc contact conserve sa position générale.
   ========================================================================== */

.discover-contact-actions {
  justify-content: center;
  width: 100%;
}


/* ==========================================================================
   6. ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   CONSOLIDATION R1 — ÉVÉNEMENT / PROJETS
   ========================================================================== */
@media (max-width:980px){
 .event-hero,.projects-hero,.projects-film,.projects-conclusion{grid-template-columns:1fr}
 .event-video-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.event-video:first-child{grid-column:1/3;grid-row:auto}
 .projects-steps{grid-template-columns:1fr 1fr}.projects-research-grid{grid-template-columns:1fr;grid-template-rows:auto}.projects-research-main{grid-row:auto;height:360px}.projects-test-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
 .event-stage,.projects-stage{width:calc(100% - 18px);padding-top:86px;gap:14px}.event-panel,.projects-panel{border-radius:22px}.event-panel__inner,.projects-panel__inner{width:calc(100% - 30px);padding:25px 0}
 .event-hero,.projects-hero{min-height:auto}.event-hero h1,.projects-hero h1{font-size:clamp(44px,13vw,62px)}.event-hero__collage{grid-template-rows:145px 125px}.projects-hero__media{height:auto;aspect-ratio:4/3;border-radius:50px 18px 18px 18px}
 .event-photo-card{flex-basis:min(82vw,280px);height:215px}.event-poster{flex-basis:min(65vw,220px);height:300px}.event-video-grid{grid-template-columns:1fr}.event-video:first-child{grid-column:auto}.event-cta{grid-template-columns:1fr}.event-press-group summary span{float:none;display:block;margin-top:3px}
 .projects-steps{grid-template-columns:1fr}.projects-film{gap:18px}.projects-research-main{height:280px}.projects-research-grid article{grid-template-columns:38% 62%}.projects-test-grid article img{height:180px}.projects-conclusion figure{height:280px}
}


/* ==========================================================================
   FOOTER COMPACT R3.2 — RESPONSIVE
   Conserve une seule ligne et une hauteur basse sur smartphone.
   ========================================================================== */
@media (max-width: 980px) {
  .site-footer__bar {
    min-height: 46px;
    padding: 4px clamp(12px, 2.5vw, 20px);
    gap: clamp(14px, 2.8vw, 28px);
  }
  .site-footer__tagline { font-size: clamp(9px, 1.7vw, 12px); }
  .site-footer__actions { gap: clamp(11px, 2.4vw, 18px); }
}

@media (max-width: 640px) {
  .site-footer { padding: 10px 6px 12px; }
  .site-footer__bar {
    min-height: 44px;
    padding: 4px 12px;
    gap: 12px;
  }
  .site-footer__logo { width: 25px; height: 28px; }
  .site-footer__name { font-size: 9px; }
  .site-footer__tagline {
    font-size: clamp(8px, 2.5vw, 10px);
    letter-spacing: 0;
  }
  .site-footer__actions { gap: 10px; }
  .site-footer__icon-link { width: 18px; height: 18px; }
  .site-footer__icon-link svg,
  .site-footer__location svg { width: 15px; height: 15px; }
  .site-footer__location > span { display: none; }
}

@media (max-width: 390px) {
  .site-footer__bar { gap: 9px; padding-inline: 10px; }
  .site-footer__brand { gap: 5px; }
  .site-footer__name { font-size: 8px; }
  .site-footer__tagline { font-size: 7.6px; }
  .site-footer__actions { gap: 8px; }
}

/* FOOTER DISCRET R3.3 — RESPONSIVE */
@media(max-width:640px){.site-footer{padding:8px 6px 10px!important}.site-footer__line{min-height:34px;gap:clamp(8px,3vw,14px)}.site-footer__logo{width:27px;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{gap:7px}.site-footer__logo{width:24px;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}}

/* FOOTER R3.4 — REPARTITION HORIZONTALE RESPONSIVE */
@media(max-width:640px){
  .site-footer__line{width:calc(100% - 20px);justify-content:flex-start}
  .site-footer__identity + .site-footer__icon-link{margin-left:auto}
}
@media(max-width:390px){
  .site-footer__line{width:calc(100% - 12px)}
}


/* ANIMATION — espacement des visuels sur smartphone */
@media (max-width: 760px) {
  .animation-page .media-card-grid,
  .animation-page .offer-grid,
  .animation-page .photo-mosaic { gap: 16px !important; }
  .animation-page .photo-mosaic figure { margin: 0 !important; }
}


/* ASSOCIATION — histoire / Facebook mobile */
@media (max-width: 980px) {
  .association-history-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .association-history-grid { grid-template-columns: 1fr; gap: 14px; }
  .association-history-card { display:grid; grid-template-columns:minmax(112px,34%) 1fr; border-radius:18px; }
  .association-history-card__media { height:100%; min-height:150px; }
  .association-history-card__body { padding:17px 16px; }
  .association-facebook-frame { display:none; }
  .association-facebook-direct { width:100%; justify-content:center; text-align:center; }
  .association-facebook-fallback { margin-top:2px; }
}
@media (max-width: 430px) {
  .association-history-card { grid-template-columns:1fr; }
  .association-history-card__media { height:155px; min-height:0; }
}