/* ═══════════════════════════════════════════════════════════════════════
   CARROUSEL "COSMOS" — VERSION CORRIGÉE
   -------------------------------------------------------------------
   Ce fichier remplace ENTIÈREMENT le contenu de carousel.css.

   Corrections apportées :
   1) Le titre (.cosmos__head), la zone des cartes (.cosmos__stage) et
      les boutons de défilement (.cosmos__controls) sont maintenant
      empilés en flexbox (flex-direction: column) au lieu d'être en
      position:absolute les uns sur les autres. Résultat : le titre ne
      peut plus jamais chevaucher les images, et les flèches ne peuvent
      plus jamais chevaucher les images, quel que soit l'écran.
   2) La description (.cosmos__card-desc) n'est plus jamais tronquée :
      suppression du -webkit-line-clamp, agrandissement de la zone de
      texte et défilement interne fluide si le texte est très long
      (le texte reste toujours 100% lisible, rien n'est caché).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
    --void:#090c1c;
    --void-2:#0d1130;
    --nebula-deep:#151a3a;
    --nebula-mid:#232a5c;
    --nebula-line: rgba(139,127,255,.35);
    --star-gold:#f2c879;
    --star-gold-soft: rgba(242,200,121,.35);
    --comet-violet:#8b7fff;
    --comet-cyan:#6fe3d9;
    --text-primary:#f4f1fb;
    --text-muted:#9ba0c4;
    --glass: rgba(21,26,58,.55);
    --glass-border: rgba(155,160,196,.18);
    --font-display:'Fraunces', serif;
    --font-body:'Manrope', sans-serif;

    /* rayons lumineux — palette qui tourne en boucle */
    --ray-1:#8b7fff;
    --ray-2:#6fe3d9;
    --ray-3:#f2c879;
    --ray-4:#ff8fd6;
}

/* =========================================================
   SECTION PLEIN ÉCRAN
   -> Passe en flexbox colonne : head / stage / controls.
      Chaque bloc occupe sa propre "tranche" verticale, donc
      ils ne peuvent jamais se recouvrir, quel que soit
      la hauteur d'écran (desktop, tablette, mobile).
========================================================= */
.cosmos{
    position:relative;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    height:100vh;
    min-height:620px;
    max-height:1100px;
    display:flex;
    flex-direction:column;
    background:
            radial-gradient(ellipse 60% 45% at 18% 12%, rgba(139,127,255,.16), transparent 60%),
            radial-gradient(ellipse 55% 40% at 85% 82%, rgba(111,227,217,.10), transparent 60%),
            radial-gradient(ellipse 90% 70% at 50% 100%, var(--void-2), var(--void) 70%);
    overflow:hidden;
    font-family: var(--font-body);
    color: var(--text-primary);
    isolation:isolate;
}

.cosmos--fixed{
    position:fixed;
    inset:0;
    left:0;
    width:100vw;
    margin-left:0;
    z-index:-1;
}

/* =========================================================
   ARRIÈRE-PLAN (inchangé, purement décoratif, ne bouge pas
   le flux du contenu)
========================================================= */
.cosmos__aurora{
    position:absolute;
    inset:-15%;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    filter: blur(90px) saturate(150%);
    animation: auroraHue 46s ease-in-out infinite;
}
.cosmos__blob{
    position:absolute;
    width:44vw;
    height:44vw;
    min-width:340px;
    min-height:340px;
    max-width:620px;
    max-height:620px;
    border-radius:50%;
    opacity:.5;
    animation: blobDrift 24s ease-in-out infinite alternate;
}
.cosmos__blob:nth-child(1){
    background: radial-gradient(circle, var(--ray-1), transparent 70%);
    top:-8%; left:-6%;
    animation-duration:27s;
}
.cosmos__blob:nth-child(2){
    background: radial-gradient(circle, var(--ray-2), transparent 70%);
    top:34%; right:-10%;
    animation-duration:32s;
    animation-delay:-8s;
}
.cosmos__blob:nth-child(3){
    background: radial-gradient(circle, var(--ray-3), transparent 70%);
    bottom:-16%; left:22%;
    opacity:.4;
    animation-duration:23s;
    animation-delay:-14s;
}
.cosmos__blob:nth-child(4){
    background: radial-gradient(circle, var(--ray-4), transparent 70%);
    top:6%; right:24%;
    opacity:.32;
    animation-duration:29s;
    animation-delay:-4s;
}

@keyframes blobDrift{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(6%, 7%) scale(1.16); }
    100%{ transform: translate(-7%, -5%) scale(.92); }
}
@keyframes auroraHue{
    0%{ filter: blur(90px) saturate(150%) hue-rotate(0deg); }
    50%{ filter: blur(90px) saturate(190%) hue-rotate(40deg); }
    100%{ filter: blur(90px) saturate(150%) hue-rotate(0deg); }
}

.cosmos__grid{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:
            linear-gradient(rgba(244,241,251,.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(244,241,251,.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 42%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 68% 58% at 50% 42%, #000 30%, transparent 78%);
    opacity:.7;
}

.cosmos__vignette{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background: radial-gradient(ellipse 80% 65% at 50% 45%, transparent 45%, var(--void) 92%);
}

/* =========================================================
   TITRE — n'est plus en position:absolute. C'est un bloc
   flex normal, en haut de la colonne : il réserve donc son
   propre espace et ne peut plus jamais être recouvert par
   les images, ni les recouvrir.
========================================================= */
.cosmos__head{
    position:relative;
    z-index:3;
    flex: 0 0 auto;
    text-align:center;
    max-width:1240px;
    width:90%;
    margin:0 auto;
    padding-top: clamp(1.4rem, 3.2vw, 2.6rem);
    padding-bottom: .4rem;
}

.cosmos__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-family: var(--font-body);
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color: var(--comet-cyan);
    font-weight:700;
    margin-bottom:1rem;
}
.cosmos__eyebrow::before,
.cosmos__eyebrow::after{
    content:"";
    width:22px;
    height:1px;
    background: linear-gradient(90deg, transparent, var(--comet-cyan));
}
.cosmos__eyebrow::after{ transform: scaleX(-1); }

.cosmos__title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight:500;
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    line-height:1.2;
    margin:0 0 .5rem;
    letter-spacing:-.01em;
}
.cosmos__title em{
    font-style: italic;
    color: var(--star-gold);
}

.cosmos__subtitle{
    font-size: .92rem;
    line-height:1.6;
    color: var(--text-muted);
    margin:0;
}

/* =========================================================
   STAGE — n'occupe plus tout l'écran en absolu. C'est un
   bloc flex qui prend l'espace RESTANT (flex:1) entre le
   titre et les boutons. Les cartes, positionnées en absolu,
   ne sont donc positionnées que DANS cette zone : elles ne
   peuvent plus jamais recouvrir le titre ni les boutons.
========================================================= */
.cosmos__stage{
    position:relative;
    z-index:2;
    width:100%;
    flex: 1 1 auto;
    min-height:0; /* indispensable pour que flex:1 fonctionne avec overflow */
    perspective: 1800px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 12px 0;
    box-sizing: border-box;
    overflow:hidden;
}

.cosmos__threads{
    display:none !important;
}
.cosmos__threads path{
    fill:none;
    stroke: url(#threadGradient);
    stroke-width:1.4;
    stroke-linecap:round;
    filter: drop-shadow(0 0 6px rgba(139,127,255,.55));
    stroke-dasharray: 3 9;
    animation: threadFlow 4.2s linear infinite;
    opacity:.85;
    transition: stroke-width .3s ease, filter .3s ease, opacity .3s ease;
}
.cosmos__threads.is-pulsing path{
    stroke-width:2.6;
    filter: drop-shadow(0 0 12px rgba(242,200,121,.9));
    opacity:1;
}
@keyframes threadFlow{
    to{ stroke-dashoffset:-120; }
}

.cosmos__track{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    touch-action: pan-y;
}

/* ---- CARTES ----
   La hauteur est relative à .cosmos__stage (qui a maintenant
   une hauteur réelle, calculée par flexbox), donc les cartes
   ne débordent plus jamais sur le titre ou les boutons. */
.cosmos__card{
    position:absolute;
    width: min(2220px, 60vw);
    height: 100%;
    max-height: 820px;
    border-radius: 22px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.02) inset;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition: transform .7s cubic-bezier(.22,.8,.28,1), opacity .7s ease, filter .7s ease;
    will-change: transform, opacity;
    cursor:grab;
}
.cosmos__card:active{ cursor:grabbing; }

.cosmos__card[data-pos="0"]{
    transform: translate3d(0,0,0) scale(1) rotateY(0deg);
    z-index:5; opacity:1; filter:none;
}
.cosmos__card[data-pos="-1"]{
    transform: translate3d(-64vw,10px,-160px) scale(.82) rotateY(28deg);
    z-index:4; opacity:.72; filter:blur(1px) brightness(.7);
}
.cosmos__card[data-pos="1"]{
    transform: translate3d(64vw,10px,-160px) scale(.82) rotateY(-28deg);
    z-index:4; opacity:.72; filter:blur(1px) brightness(.7);
}
.cosmos__card[data-pos="-2"]{
    transform: translate3d(-104vw,26px,-340px) scale(.66) rotateY(34deg);
    z-index:3; opacity:.32; filter:blur(2px) brightness(.55);
}
.cosmos__card[data-pos="2"]{
    transform: translate3d(104vw,26px,-340px) scale(.66) rotateY(-34deg);
    z-index:3; opacity:.32; filter:blur(2px) brightness(.55);
}
.cosmos__card[data-pos="far"]{
    transform: translate3d(0,40px,-520px) scale(.5);
    z-index:1; opacity:0; pointer-events:none;
}

/* ---- IMAGE ----
   flex:1 1 auto avec min-height : l'image se rétrécit
   automatiquement pour laisser toute la place nécessaire au
   texte quand celui-ci est long, sans jamais l'écraser
   complètement. */
.cosmos__card-media{
    position:relative;
    width:100%;
    flex: 1 1 auto;
    min-height: 90px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#151a3a;
}

.cosmos__card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: top center;
    display:block;
}

.cosmos__card-media::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(9,12,28,0) 40%, rgba(9,12,28,.92) 100%);
    pointer-events:none;
}

/* ---- ICÔNE PLEIN ÉCRAN ---- */
.cosmos__expand{
    position:absolute;
    top:14px;
    right:14px;
    z-index:7;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background: rgba(9,12,28,.55);
    backdrop-filter: blur(10px);
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--text-primary);
    cursor:pointer;
    opacity:0;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease, border-color .25s ease, box-shadow .25s ease;
}
.cosmos__card[data-pos="0"] .cosmos__expand{
    opacity:1;
    transform: translateY(0);
}
.cosmos__expand:hover{
    border-color: var(--star-gold);
    box-shadow: 0 0 16px -2px var(--star-gold-soft);
    color: var(--star-gold);
}
.cosmos__expand svg{ width:16px; height:16px; }

.cosmos__node{
    position:absolute;
    left:50%;
    top:0%;
    width:16px; height:16px;
    border-radius:50%;
    background:transparent;
    border: 2px solid var(--comet-cyan);
    box-shadow: 0 0 10px 2px rgba(111,227,217,.55), 0 0 20px 6px rgba(111,227,217,.3);
    transform: translate(-50%,-50%);
    z-index:6;
}
.cosmos__node::after{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:50%;
    background: var(--comet-cyan);
    box-shadow: 0 0 6px 2px var(--comet-cyan);
}
.cosmos__card[data-pos="0"] .cosmos__node{
    border-color: var(--star-gold);
    box-shadow: 0 0 14px 3px rgba(242,200,121,.65), 0 0 30px 10px rgba(242,200,121,.35);
    animation: ringPulse 2.1s ease-in-out infinite;
}
.cosmos__card[data-pos="0"] .cosmos__node::after{
    background: var(--star-gold);
    box-shadow: 0 0 8px 3px var(--star-gold);
}
@keyframes ringPulse{
    0%,100%{
        box-shadow: 0 0 14px 3px rgba(242,200,121,.65), 0 0 30px 10px rgba(242,200,121,.35);
    }
    50%{
        box-shadow: 0 0 20px 6px rgba(242,200,121,.85), 0 0 42px 16px rgba(242,200,121,.5);
    }
}

/* ---- ZONE DE TEXTE (titre + description) ----
   C'est ici la correction principale contre la troncature :
   - flex:0 1 auto + min-height:0 permet à ce bloc de grandir
     réellement selon le texte, dans la limite de max-height.
   - Si le texte est malgré tout plus long que la place
     disponible, un défilement interne apparaît (overflow-y:
     auto) : le texte reste TOUJOURS 100% consultable, rien
     n'est jamais coupé ou caché.
   - Un léger dégradé en bas indique qu'il y a plus de texte
     à lire quand ça déborde. */
.cosmos__card-body{
    position:relative;
    padding: .85rem 1.3rem 1rem;
    display:flex;
    flex-direction:column;
    gap:.35rem;
    flex: 0 1 auto;
    min-height:0;
    max-height: 55%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--comet-cyan) transparent;
}
.cosmos__card-body::-webkit-scrollbar{ width:5px; }
.cosmos__card-body::-webkit-scrollbar-thumb{
    background: var(--comet-cyan);
    border-radius:3px;
}

.cosmos__card-num{
    font-family: var(--font-body);
    font-size:.64rem;
    letter-spacing:.18em;
    font-weight:700;
    color: var(--comet-cyan);
    text-transform:uppercase;
    flex: 0 0 auto;
}
.cosmos__card-title{
    font-family: var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:1.05rem;
    line-height:1.25;
    margin:0;
    color: var(--text-primary);
    flex: 0 0 auto;
    overflow-wrap: break-word;
}

/* Description : plus jamais tronquée, ni avec line-clamp,
   ni par une hauteur trop courte. Le texte s'affiche en
   entier, revient à la ligne normalement, et défile dans
   .cosmos__card-body si besoin. */
.cosmos__card-desc{
    font-size:.8rem;
    line-height:1.55;
    color: var(--text-muted);
    margin:0;
    flex: 0 0 auto;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* end card */
.cosmos__card--end{
    align-items:center;
    justify-content:center;
    text-align:center;
    background: radial-gradient(ellipse at 50% 30%, rgba(242,200,121,.14), transparent 60%), var(--glass);
}
.cosmos__card--end .cosmos__card-body{
    align-items:center;
    justify-content:center;
    padding: 1.5rem 1.5rem;
    max-height: 100%;
    flex:1;
}
.cosmos__logo{
    width:110px; height:110px;
    margin-bottom: .8rem;
    flex: 0 0 auto;
}
.cosmos__card--end .cosmos__card-title{
    font-size:1.35rem;
    color: var(--star-gold);
}
/* Suppression du -webkit-line-clamp : la description de la
   carte de fin, plus longue, reste elle aussi 100% lisible
   (retour à la ligne + défilement si nécessaire, jamais de
   coupure de texte). */
.cosmos__card--end .cosmos__card-desc{
    max-width: 480px;
}

.cosmos__cta{
    margin-top:1rem;
    padding:.6rem 1.3rem;
    border-radius: 999px;
    border:1px solid var(--star-gold-soft);
    background: linear-gradient(180deg, rgba(242,200,121,.16), rgba(242,200,121,.04));
    color: var(--star-gold);
    font-family: var(--font-body);
    font-weight:700;
    font-size:.76rem;
    letter-spacing:.04em;
    cursor:pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    flex: 0 0 auto;
}
.cosmos__cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(242,200,121,.5);
}

/* =========================================================
   CONTROLES — ne sont plus en position:absolute par-dessus
   les cartes. C'est un bloc flex normal, sous .cosmos__stage,
   qui réserve sa propre place : les flèches ne peuvent donc
   plus jamais recouvrir les images, sur aucun écran.
========================================================= */
.cosmos__controls{
    position:relative;
    z-index:4;
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    padding-top: .4rem;
    padding-bottom: clamp(1rem, 3vh, 2rem);
}

.cosmos__arrow{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background: rgba(9,12,28,.4);
    backdrop-filter: blur(10px);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    color: var(--text-primary);
    transition: border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.cosmos__arrow:hover{
    border-color: var(--comet-cyan);
    box-shadow: 0 0 18px -4px var(--comet-cyan);
    transform: translateY(-2px);
}
.cosmos__arrow:disabled{
    opacity:.3; cursor:default;
    box-shadow:none; transform:none;
}
.cosmos__arrow svg{ width:16px; height:16px; }

.cosmos__dots{
    display:flex;
    align-items:center;
    gap:.55rem;
}
.cosmos__dot{
    width:7px; height:7px;
    border-radius:50%;
    background: rgba(155,160,196,.4);
    border:none;
    cursor:pointer;
    padding:0;
    position:relative;
    transition: background .3s ease, transform .3s ease;
}
.cosmos__dot::before{
    content:"";
    position:absolute; inset:-6px;
}
.cosmos__dot.is-active{
    background: var(--star-gold);
    transform: scale(1.5);
    box-shadow: 0 0 10px 2px var(--star-gold-soft);
}

/* =========================================================
   LIGHTBOX PLEIN ÉCRAN (inchangé)
========================================================= */
.cosmos__lightbox{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:9999;
    background: rgba(6,8,20,.94);
    backdrop-filter: blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.cosmos__lightbox.is-open{
    opacity:1;
    visibility:visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
}
.cosmos__lightbox img{
    width:100vw;
    height:100vh;
    object-fit:contain;
    display:block;
    position:relative;
    z-index:1;
    pointer-events:none;
    transform: scale(.96);
    transition: transform .35s cubic-bezier(.22,.8,.28,1);
}
.cosmos__lightbox.is-open img{
    transform: scale(1);
}
.cosmos__lightbox-close{
    position:absolute;
    top: clamp(1rem, 3vw, 2rem);
    right: clamp(1rem, 3vw, 2rem);
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background: rgba(9,12,28,.6);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:10;
    pointer-events:auto;
    transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.cosmos__lightbox-close:hover{
    border-color: var(--star-gold);
    box-shadow: 0 0 18px -2px var(--star-gold-soft);
    transform: rotate(90deg);
}
.cosmos__lightbox-close svg{ width:20px; height:20px; }

.cosmos__lightbox-caption{
    position:absolute;
    left:50%;
    bottom: clamp(1.2rem, 4vh, 2.4rem);
    transform:translateX(-50%);
    text-align:center;
    max-width:80vw;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-style:italic;
    font-size: clamp(1rem, 2vw, 1.3rem);
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* =========================================================
   RESPONSIVE
   Le principe flexbox (head / stage / controls empilés)
   s'applique automatiquement à toutes les tailles d'écran :
   il n'y a donc plus besoin de "réparer" le chevauchement
   à chaque breakpoint. On ajuste seulement les tailles.
========================================================= */

@media (max-width: 1400px) and (min-width: 992px){
    .cosmos__card{ width: 70vw; }
}

@media (max-width: 991px){
    .cosmos__card{ width: 82vw; }
    .cosmos__card-body{ max-height:58%; }
}

@media (max-height: 750px){
    .cosmos{ min-height: 560px; }
}

@media (max-width: 720px){
    .cosmos__card{ width: 94vw; }
    .cosmos__card[data-pos="-1"]{ transform: translate3d(-84vw,10px,-140px) scale(.78) rotateY(26deg); }
    .cosmos__card[data-pos="1"]{ transform: translate3d(84vw,10px,-140px) scale(.78) rotateY(-26deg); }
    .cosmos__card[data-pos="-2"], .cosmos__card[data-pos="2"]{ opacity:0; }
    .cosmos__controls{ gap:1.1rem; }
    .cosmos__card-body{ max-height:60%; padding:.7rem 1.1rem .85rem; }
    .cosmos__card-title{ font-size:.95rem; }
    .cosmos__card-desc{ font-size:.76rem; }
    .cosmos__blob{ width:70vw; height:70vw; min-width:260px; min-height:260px; }
    .cosmos__aurora{ filter: blur(60px) saturate(150%); }
}

@media (max-width: 420px){
    .cosmos__card{ width: 96vw; }
    .cosmos__card-body{ max-height:62%; }
}

@media (prefers-reduced-motion: reduce){
    .cosmos__card, .cosmos__card-media img, .cosmos__dot, .cosmos__lightbox, .cosmos__lightbox img{ transition:none !important; }
    .cosmos__threads path{ animation:none !important; }
    .cosmos__aurora, .cosmos__blob{ animation:none !important; }
}