/*
Theme Name: Next.Us
Description: Thème WordPress personnalisé développé pour le projet NextUs. Structure minimaliste, modulaire et optimisée pour le développement sur VS Code avec synchronisation FTP.
Author: Yanis SINGER, Mohamed NDIAYE, Andoniaina TOMBOZAZA, Amin MILADI, Alexandre MEUX
Version: 1.0
*/


/**********************************************************************************************************************************************************

Present

*********************************************************************************************************************************************************************************************************/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.present {
    display: flex;
    flex-direction: column;
    background-color: black;
    overflow-x: hidden;
}

body.present main {
    padding-top: 70px;
    padding-bottom: 100px;
    min-height: 100vh;
    width: 100%;
    background-image: var(--bg-image, url('http://nextus.mmi-iutsf.org/wp-content/uploads/2026/01/background-2.jpg')) !important;
    background-size: contain;
    background-repeat: repeat;
    color: white;
    position: relative;
    overflow: hidden;
}

body.present main>* {
    z-index: 1;
    position: relative;
}

body.present main::before {
    width: 100%;
    height: 100%;
    background-image: none;
    backdrop-filter: blur(10px);
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    transform: scale(1.1);
    z-index: 0;
}

body.present section {
    padding: 0 50px;
    margin-bottom: 100px;
}

body.present a {
    text-decoration: none;
    color: white;
}

/**************************        TEXTE       ***********************************/

body.present h1 {
    font-family: haboro-soft, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 44px;
    margin-top: 20px;
    white-space: normal;
}

body.present h2 {
    font-family: haboro-soft, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 34px;
    margin-top: 15px;
    white-space: normal;
}

body.present h3 {
    font-family: haboro-soft, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    margin-top: 10px;
    white-space: normal;
}

body.present h4 {
    font-family: haboro-soft, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    margin-top: 5px;
    white-space: normal;
}

body.present span.violet {
    color: #B4B7FF;
}

body.present p,
body.present ul,
body.present li,
body.present label,
body.present textarea {
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    margin-top: 5px;
    white-space: normal;
    color: white;
}

body.present p:has(+ ul) {
    margin-bottom: 0 !important;
}

body.present ul {
    margin-left: 30px;
}

body.present p a {
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: underline;
    color: #77B6D6;
    height: auto;
    width: fit-content;
    transition: .3s ease-in;
}

body.present p a:hover {
    color: rgb(255, 255, 255);
    transition: .3s ease-in;
}

/**************************        BOUTONS       ***********************************/

body.present .bouton1,
body.present button.bouton1 {
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    background-color: #3D3B4B;
    padding: 8px;
    border-radius: 8px;
    border: none;
    box-shadow: inset 3px 3px 5px #807BA4;
    height: auto;
    width: fit-content;
    transform: scale(1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: .3s ease-in;
}

body.present .bouton1:hover,
body.present button.bouton1:hover {
    box-shadow: inset 3px 3px 5px #807BA4, -2px -2px 5px #77B6D6, 2px 2px 5px #71C5B2;
    color: white;
    transition: .3s ease-in;
}

body.present .bouton1:active,
body.present button:active {
    box-shadow: inset 3px 3px 5px #222029, -2px -2px 5px #77B6D6, 2px 2px 5px #71C5B2;
    transform: scale(0.95);
    transition: .1s ease-in;
}

body.present .bouton2 {
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    color: white;
    backdrop-filter: blur(10px);
    font-size: 18px;
    font-weight: 500;
    padding: 5px;
    border: solid white 2px;
    border-radius: 8px;
    height: auto;
    width: fit-content;
    display: block;
    transition: .3s ease-in;
}

body.present .bouton2:hover {
    color: white;
    background-color: #3D3B4B;
    border: solid #3D3B4B 2px;
    transition: .3s ease-in;
}

/**************************        BANDEAU       ***********************************/

body.present section.bandeau {
    background-color: #0D0E2D;
    width: 100%;
    height: 400px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 50px;
    animation: bandeau 1s ease-in-out forwards;
    transform: scaleX(0);
    transform-origin: center;
    border-bottom: solid rgba(255, 255, 255, 0.623) 0.2px;
    border-top: solid rgba(255, 255, 255, 0.623) 0.2px;
}

body.present section.reverse {
    flex-direction: row-reverse;
}

body.present section.transparent {
    background-color: #00000000;
    border: none;
    padding: 0 50px;
}

body.present section.bandeau>* {
    opacity: 0;
    animation: contenu 0.5s ease-in forwards;
    animation-delay: 1s;
}

body.present section.bandeau> :last-child {
    max-width: 60%;
}

@keyframes bandeau {
    to {
        transform: scaleX(1);
    }
}

@keyframes contenu {
    to {
        opacity: 1;
    }
}

/**************************        Container       ***********************************/


body.present .container {
    min-width: 300px;
    width: fit-content;
    border: solid rgba(255, 255, 255, 0.623) 0.2px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    background-color: #0000001e;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 15px;
    transition: .3s ease-out;
}

body.present .container:hover {
    transform: scale(1.03);
    box-shadow: -2px -2px 8px #77B6D6, 2px 2px 8px #71C5B2;
    transition: .3s ease-out;
}

body.present .container.no-hover:hover {
    transform: scale(1);
    box-shadow: none;
    transition: .3s ease-out;
}

body.present .line {
    background-color: rgba(255, 255, 255, 0.623);
    height: 0.2px;
    width: 100%;
}

/**************************        img       ***********************************/


body.present img {
    object-fit: cover;
    border-radius: 15px;
    max-width: 100%;
    max-height: 100%;
}



body.present .glitch {
    width: auto;
    height: auto;
    position: relative;
    z-index: 0;
}

body.present .glitch::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 15px;
}

body.present .glitch.bottom:after {
    right: 15px;
    top: 15px;
}

body.present .glitch.top:after {
    left: 15px;
    bottom: 15px;
}

body.present .glitch.bleu:after {
    background-color: #77B6D6;
}

body.present .glitch.vert:after {
    background-color: #71C5B2;
}

/****      block : image        ***/

body.present figure.wp-block-image {
    width: fit-content;
    height: fit-content;
}

/**************************        messages       ***********************************/


body.present .message {
    background-color: rgb(56, 107, 226);
    color: white;
    padding: 10px;
    border-radius: 10px;
    height: auto;
    max-width: 270px;
    width: fit-content;
    min-width: 50px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.present .message:after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    background: rgb(56, 107, 226);
    border-bottom-right-radius: 12px;
    transform: rotate(45deg);
}

/**************************        OVERLAY       ***********************************/

.filtre-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    /* aucun assombrissement */
    z-index: 80;
    /* sous le menu */
    opacity: 0;
    pointer-events: none;
}

/* Overlay actif */
.filtre-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/**************************        OVERLAY Changement temps      ***********************************/


/* ============================= */
/* OVERLAY TEMPOREL – GLOBAL     */
/* ============================= */

#timewarp-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;

    background: #000;

    /* invisible par défaut */
    visibility: hidden;
    pointer-events: none;

    /* fondu via opacity */
    opacity: 0;
    transition: opacity 500ms ease;
}

/* présent (dans le flow visuel) */
#timewarp-overlay.is-visible {
    visibility: visible;
}

/* état “affiché” (opacity 1) : doit rester pendant toute l’animation */
#timewarp-overlay.is-active {
    opacity: 1;
}

/* ============================= */
/* CANVAS                        */
/* ============================= */

#timewarp-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================= */
/* RIDEAU D’INTRO (OUVERTURE)    */
/* ============================= */

#timewarp-curtain {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 1;
    pointer-events: none;
}

#timewarp-overlay.is-running #timewarp-curtain {
    animation: timewarpCurtainOpen 700ms cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes timewarpCurtainOpen {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ============================= */
/* GLOW (COULEURS DEMANDÉES)     */
/* ============================= */

#timewarp-glow {
    position: absolute;
    inset: -10%;
    pointer-events: none;

    background: radial-gradient(circle at center,
            rgba(56, 107, 226, 0.22) 0%,
            rgba(113, 197, 178, 0.14) 28%,
            rgba(119, 182, 214, 0.12) 45%,
            rgba(0, 0, 0, 0) 70%);

    filter: blur(18px);
    animation: timewarpPulse 1.8s ease-in-out infinite;
}

@keyframes timewarpPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

/* ============================= */
/* VIGNETTAGE                    */
/* ============================= */

#timewarp-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0.9) 100%);

    mix-blend-mode: multiply;
}

/* =========================
   RESPONSIVE — GLOBAL (present)
   ========================= */

@media (max-width: 768px) {

  /* Layout global */
  body.present main{
    padding-bottom: 70px;
  }

  /* Sections : padding mobile */
  body.present section{
    padding: 0 16px;
    margin-bottom: 70px;
  }

  body.present section.transparent{
    padding: 0 16px;
  }

  /* Typo : plus fluide */
  body.present h1{ font-size: 32px; }
  body.present h2{ font-size: 26px; }
  body.present h3{ font-size: 20px; }
  body.present h4{ font-size: 18px; }

  body.present p,
  body.present ul,
  body.present li,
  body.present label,
  body.present textarea{
    font-size: 15px;
  }

  /* Bandeau : passe en colonne + hauteur auto */
  body.present section.bandeau{
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 18px 16px;
  }

  body.present section.reverse{
    flex-direction: column;
  }

  body.present section.bandeau > :last-child{
    max-width: 100%;
  }

  /* Containers : évite les débordements */
  body.present .container{
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Hover : pas utile sur mobile */
  body.present .container:hover{
    transform: scale(1);
    box-shadow: none;
  }

  /* Messages : largeur confortable */
  body.present .message{
    max-width: 100%;
  }

  /* =========================
     GLITCH IMAGES — plus petites
     ========================= */

  body.present .glitch{
    max-width: 70%;
    margin: 0 auto;
  }

  body.present .glitch img{
    width: 100%;
    height: auto;
  }
}

@media (max-width: 420px){

  body.present h1{ font-size: 28px; }
  body.present h2{ font-size: 24px; }

  body.present .glitch{
    max-width: 85%;
  }
}






/**********************************************************************************************************************************************************

Passe

*********************************************************************************************************************************************************************************************************/


body.passe {
    display: flex;
    flex-direction: column;
    background-color: black;
    overflow-x: hidden;
}

body.passe main {
    padding-top: 70px;
    padding-bottom: 100px;
    min-height: 100vh;
    width: 100%;
    background-color: white;
    color: black;
    position: relative;
    overflow: hidden;
}

body.passe main>* {
    z-index: 1;
    position: relative;
}



body.passe section {
    padding: 0 50px;
    margin-bottom: 100px;
}

body.passe a {
    text-decoration: none;
}

/**************************        TEXTE       ***********************************/

body.passe h1 {
    font-weight: 700;
    font-style: normal;
    font-size: 44px;
    margin-top: 20px;
    white-space: normal;
}

body.passe h2 {
    font-weight: 700;
    font-style: normal;
    font-size: 34px;
    margin-top: 15px;
    white-space: normal;
}

body.passe h3 {
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    margin-top: 10px;
    white-space: normal;
}

body.passe h4 {
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    margin-top: 5px;
    white-space: normal;
}

body.passe span.violet {
    color: black;

}

body.passe p,
body.passe ul,
body.passe li,
body.passe label,
body.passe textarea {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    margin-top: 5px;
    white-space: normal;
    color: black;
}

body.passe p:has(+ ul) {
    margin-bottom: 0 !important;
}

body.passe ul {
    margin-left: 30px;
}

body.passe p a,
body.passe .bouton2 {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    color: blue;
    height: auto;
    width: fit-content;
}

body.passe p a:hover,
body.passe .bouton2:hover {
    text-decoration: underline;
}

/**************************        BOUTONS       ***********************************/

body.passe .bouton1,
body.passe button.bouton1 {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 8px;
    height: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-shadow: black 1px 1px 0px;


    background-color: #e4ab66;
    border-top: solid #e9c79e 3px;
    border-left: solid #e9c79e 3px;
    border-right: solid #936d40 3px;
    border-bottom: solid #936d40 3px;

}






/**************************        BANDEAU       ***********************************/

body.passe section.bandeau {
    width: 100%;
    height: 400px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    border-bottom: solid black 2px;
    border-top: solid black 2px;
}

body.passe section.reverse {
    flex-direction: row-reverse;
}

body.passe section.transparent {
    border: none;
    padding: 0 50px;
}



body.passe section.bandeau> :last-child {
    max-width: 60%;
}


/**************************        CONTAINER       ***********************************/

body.passe .container {
    min-width: 300px;
    width: fit-content;
    border-bottom: solid black 2px;
    border-top: solid black 2px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 15px;
    transition: .3s ease-out;
    color: black;
}




/**************************        IMG       ***********************************/

body.passe img {
    display: none;
}


body.passe .glitch {
    width: auto;
    height: auto;
    position: relative;
    z-index: 0;
}

body.passe .glitch::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

body.passe .glitch.bottom:after {
    right: 15px;
    top: 15px;
}

body.passe .glitch.top:after {
    left: 15px;
    bottom: 15px;
}

body.passe .glitch.bleu:after {
    background-color: #E4AB66;
}

body.passe .glitch.vert:after {
    background-color: #F1E3B6;
}

/****      block : image        ***/

body.passe figure.wp-block-image {
    width: fit-content;
    height: fit-content;
}


/**************************        MESSAGES       ***********************************/


body.passe .message {
    background-color: rgb(56, 107, 226);
    color: white;
    padding: 10px;
    border-radius: 10px;
    height: auto;
    max-width: 270px;
    width: fit-content;
    min-width: 50px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.passe .message:after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    background: rgb(56, 107, 226);
    border-bottom-right-radius: 12px;
    transform: rotate(45deg);
}

/* =========================
   RESPONSIVE — GLOBAL (passe)
   ========================= */

@media (max-width: 768px) {

  /* Layout global */
  body.passe main{
    padding-bottom: 70px;
  }

  /* Sections : padding mobile */
  body.passe section{
    padding: 0 16px;
    margin-bottom: 70px;
  }

  body.passe section.transparent{
    padding: 0 16px;
  }

  /* Typo : plus fluide */
  body.passe h1{ font-size: 32px; }
  body.passe h2{ font-size: 26px; }
  body.passe h3{ font-size: 20px; }
  body.passe h4{ font-size: 18px; }

  body.passe p,
  body.passe ul,
  body.passe li,
  body.passe label,
  body.passe textarea{
    font-size: 15px;
  }

  /* Bandeau : colonne + hauteur auto */
  body.passe section.bandeau{
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 18px 16px;
  }

  body.passe section.reverse{
    flex-direction: column;
  }

  body.passe section.bandeau > :last-child{
    max-width: 100%;
  }

  /* Containers : évite les débordements */
  body.passe .container{
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Transition OFF sur mobile (style “passe” plus brut) */
  body.passe .container{
    transition: none;
  }

  /* Messages : largeur confortable */
  body.passe .message{
    max-width: 100%;
  }

  /* =========================
     GLITCH — plus petit (même si img est display:none)
     ========================= */

  body.passe .glitch{
    max-width: 70%;
    margin: 0 auto;
  }
}

@media (max-width: 420px){

  body.passe h1{ font-size: 28px; }
  body.passe h2{ font-size: 24px; }

  body.passe .glitch{
    max-width: 85%;
  }
}





/**********************************************************************************************************************************************************

Futur

*********************************************************************************************************************************************************************************************************/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.futur {
    display: flex;
    flex-direction: column;
    background-color: rgb(9, 9, 34);
    overflow-x: hidden;
}

body.futur main {
    padding-top: 120px;
    padding-bottom: 100px;
    min-height: 100vh;
    width: 100%;
    color: white;
    position: relative;
    overflow: hidden;
}

body.futur main>* {
    z-index: 1;
    position: relative;
}


body.futur section {
    padding: 0 50px;
    margin-bottom: 100px;
}

body.futur a {
    text-decoration: none;
    color: white;
}

/**************************        TEXTE       ***********************************/

body.futur h1 {
    font-family: haboro-soft, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 44px;
    margin-top: 20px;
    white-space: normal;

    /* Couleur de base */
    color: white;

    /* Néon doux (cohérent avec #3F3FD0) */
    text-shadow:
        0 0 6px rgba(124, 206, 192, 0.35),
        0 0 14px rgba(63, 63, 208, 0.45),
        0 0 32px rgba(63, 63, 208, 0.35);

    /* Légère projection holographique */
    filter:
        drop-shadow(0 10px 12px rgba(63, 63, 208, 0.25));

    /* Subtil effet matière */
    background: linear-gradient(180deg,
            #ffffff 0%,
            #dfe6ff 40%,
            #b8c4ff 65%,
            #3F3FD0 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.futur h2 {
    font-family: haboro-soft, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 34px;
    margin-top: 15px;
    white-space: normal;
}

body.futur h3 {
    font-family: haboro-soft, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    margin-top: 10px;
    white-space: normal;
}

body.futur h4 {
    font-family: haboro-soft, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    margin-top: 5px;
    white-space: normal;
}

body.futur span.violet {
    color: #B4B7FF;
}

body.futur p,
body.futur ul,
body.futur li,
body.futur label,
body.futur textarea {
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    margin-top: 5px;
    white-space: normal;
    color: white;
}

body.futur p:has(+ ul) {
    margin-bottom: 0 !important;
}

body.futur ul {
    margin-left: 30px;
}

body.futur p a {
    position: relative;
    font-family: elza, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;

    color: #77B6D6;
    text-decoration: none;

    width: fit-content;

    /* lisibilité */
    text-shadow:
        0 0 4px rgba(119, 182, 214, 0.45),
        0 0 10px rgba(63, 63, 208, 0.25);

    transition:
        color .3s ease,
        text-shadow .3s ease;
}

/* underline holographique */
body.futur p a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    border-radius: 10px;

    background: linear-gradient(90deg,
            rgba(119, 182, 214, 0),
            rgba(119, 182, 214, 0.8),
            rgba(119, 182, 214, 0));

    box-shadow:
        0 0 6px rgba(119, 182, 214, 0.7),
        0 0 14px rgba(63, 63, 208, 0.35);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

/* hover */
body.futur p a:hover {
    color: #ffffff;

    text-shadow:
        0 0 6px rgba(124, 206, 192, 0.65),
        0 0 16px rgba(63, 63, 208, 0.45);
}

body.futur p a:hover::after {
    transform: scaleX(1.1);
    opacity: 1;
}

/**************************        BOUTONS       ***********************************/

body.futur .bouton1,
body.futur button.bouton1 {
    font-family: elza, sans-serif;
    font-weight: 500;
    font-size: 18px;

    color: #ffffff;
    text-decoration: none;

    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid rgba(63, 63, 208, 0.55);

    /* base verre futur */
    background:
        linear-gradient(135deg,
            rgba(63, 63, 208, 0.25),
            rgba(124, 206, 192, 0.10));

    backdrop-filter: blur(10px);

    /* halo néon */
    box-shadow:
        0 0 16px rgba(63, 63, 208, 0.55),
        0 0 32px rgba(63, 63, 208, 0.35),
        inset 0 0 12px rgba(124, 206, 192, 0.35);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;
    transform: translateY(0);

    transition:
        box-shadow .35s ease,
        transform .2s ease,
        border-color .35s ease;
}

/* Hover : projection plus forte */
body.futur .bouton1:hover,
body.futur button.bouton1:hover {
    border-color: rgba(124, 206, 192, 0.85);

    box-shadow:
        0 0 22px rgba(63, 63, 208, 0.85),
        0 0 44px rgba(63, 63, 208, 0.55),
        inset 0 0 18px rgba(124, 206, 192, 0.55);

    transform: translateY(-2px);
}

/* Active : désynchronisation holographique */
body.futur .bouton1:active,
body.futur button.bouton1:active {
    transform: scale(0.94);

    box-shadow:
        0 0 12px rgba(63, 63, 208, 0.45),
        inset 0 0 22px rgba(63, 63, 208, 0.65);
}

body.futur .bouton2 {
    font-family: elza, sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;

    color: #77B6D6;

    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    /* lisibilité futur */
    text-shadow:
        0 0 4px rgba(119, 182, 214, 0.45);

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .15s ease;
}

/* underline lumineux minimal */
body.futur .bouton2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            #77B6D6,
            transparent);

    transition: width .25s ease;
}

/* Hover */
body.futur .bouton2:hover {
    color: #ffffff;

    text-shadow:
        0 0 6px rgba(124, 206, 192, 0.65);

    transform: translateX(2px);
}

body.futur .bouton2:hover::after {
    width: 100%;
}

/* Active */
body.futur .bouton2:active {
    transform: translateX(0) scale(0.95);
}

/**************************        BANDEAU       ***********************************/

body.futur section.bandeau {
    width: 100%;
    height: 430px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 50px;

    border-bottom: 1px solid white;
    border-top: 1px solid white;


    box-shadow:
        0 0 12px rgba(63, 63, 208, 0.55),
        0 0 32px rgba(63, 63, 208, 0.35),
        0 0 64px rgba(63, 63, 208, 0.2),

        /* Glow interne */
        inset 0 0 18px rgba(63, 63, 208, 0.6);

}

body.futur section.reverse {
    flex-direction: row-reverse;
}




body.futur section.bandeau> :last-child {
    max-width: 60%;
}


/**************************        Container       ***********************************/


body.futur .container {
    min-width: 300px;
    width: fit-content;
    padding: 16px 18px;
    border-radius: 25px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    position: relative;
    overflow: hidden;

    backdrop-filter: blur(14px);

    /* verre + teinte futur */
    background:
        radial-gradient(circle at top,
            rgba(63, 63, 208, 0.28) 0%,
            rgba(18, 18, 28, 0.55) 55%,
            rgba(10, 10, 16, 0.75) 100%
        );

    /* bord lumineux */
    border: 1px solid rgba(124, 206, 192, 0.55);

    /* GROS néon visible */
    box-shadow:
        0 0 18px rgba(63, 63, 208, 0.70),
        0 0 44px rgba(63, 63, 208, 0.45),
        0 0 90px rgba(63, 63, 208, 0.25),
        inset 0 0 22px rgba(124, 206, 192, 0.25),
        inset 0 0 60px rgba(63, 63, 208, 0.18);

    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Lignes holographiques + micro grain */
body.futur .container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.07) 0px,
            rgba(255,255,255,0.07) 1px,
            transparent 3px,
            transparent 6px
        );

    opacity: 0.35;
    mix-blend-mode: overlay;
}

/* Reflet diagonal + énergie */
body.futur .container::after {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;

    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(124, 206, 192, 0.18) 50%,
        rgba(63, 63, 208, 0.22) 55%,
        transparent 70%
    );

    opacity: 0.7;
    transform: translateX(-20%);
    transition: transform .35s ease, opacity .35s ease;
}

/* Hover : activation max */
body.futur .container:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(124, 206, 192, 0.95);

    box-shadow:
        0 0 26px rgba(63, 63, 208, 0.95),
        0 0 70px rgba(63, 63, 208, 0.60),
        0 0 120px rgba(63, 63, 208, 0.35),
        0 0 22px rgba(124, 206, 192, 0.55),
        inset 0 0 26px rgba(124, 206, 192, 0.35),
        inset 0 0 80px rgba(63, 63, 208, 0.22);
}

body.futur .container:hover::after {
    transform: translateX(20%);
    opacity: 0.9;
}

body.futur .container.no-hover:hover {
    transform: scale(1);
    box-shadow: none;
    transition: .3s ease-out;
}

body.futur .line {
    background-color: rgba(255, 255, 255, 0.623);
    height: 0.2px;
    width: 100%;
}

/**************************        img       ***********************************/


body.futur img {
    object-fit: cover;
    border-radius: 15px;
    max-width: 100%;
    max-height: 100%;

    position: relative;

    /* halo externe (plus fort) */
    box-shadow:
        0 0 22px rgba(63, 63, 208, 0.85),
        0 0 52px rgba(63, 63, 208, 0.55),
        0 0 90px rgba(63, 63, 208, 0.35),
        inset 0 0 28px rgba(124, 206, 192, 0.45);

    /* voile holographique plus contrasté */
    -webkit-mask-image:
        linear-gradient(
            120deg,
            rgba(0,0,0,0.65) 32%,
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0.65) 68%
        );
    -webkit-mask-size: 260% 260%;
    -webkit-mask-position: 0% 0%;

    mask-image:
        linear-gradient(
            120deg,
            rgba(0,0,0,0.65) 32%,
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0.65) 68%
        );
    mask-size: 260% 260%;
    mask-position: 0% 0%;

    /* teinte futur plus marquée */
    filter:
        saturate(1.18)
        contrast(1.12);

    animation: holoImageSweep 5s ease-in-out infinite;

    transition:
        box-shadow .35s ease,
        filter .35s ease;
}

/* Hover : activation très visible */
body.futur img:hover {
    box-shadow:
        0 0 36px rgba(63, 63, 208, 1),
        0 0 90px rgba(63, 63, 208, 0.65),
        0 0 140px rgba(63, 63, 208, 0.45),
        inset 0 0 42px rgba(124, 206, 192, 0.55);

    filter:
        saturate(1.3)
        contrast(1.18);
}

/* Animation balayage holographique */
@keyframes holoImageSweep {
    0% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
    50% {
        -webkit-mask-position: 100% 100%;
        mask-position: 100% 100%;
    }
    100% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}

/* Balayage holographique */
@keyframes holoImageSweep {
    0% {
        mask-position: 0% 0%;
        -webkit-mask-position: 0% 0%;
    }
    50% {
        mask-position: 100% 100%;
        -webkit-mask-position: 100% 100%;
    }
    100% {
        mask-position: 0% 0%;
        -webkit-mask-position: 0% 0%;
    }
}


body.futur img.no_holo {
    box-shadow: none;

    -webkit-mask-image: none;
    -webkit-mask-size: initial;
    -webkit-mask-position: initial;

    mask-image: none;
    mask-size: initial;
    mask-position: initial;

    animation: none;
    filter: none;
}

/* hover neutralisé */
body.futur img.no_holo:hover {
    box-shadow: none;
    filter: none;
}





/****      block : image        ***/

body.futur figure.wp-block-image {
    width: fit-content;
    height: fit-content;
}

/**************************        messages       ***********************************/


body.futur .message {
    background-color: rgb(56, 107, 226);
    color: white;
    padding: 10px;
    border-radius: 10px;
    height: auto;
    max-width: 270px;
    width: fit-content;
    min-width: 50px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.futur .message:after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    background: rgb(56, 107, 226);
    border-bottom-right-radius: 12px;
    transform: rotate(45deg);
}

/**************************        OVERLAY       ***********************************/

.filtre-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    /* aucun assombrissement */
    z-index: 80;
    /* sous le menu */
    opacity: 0;
    pointer-events: none;
}

/* Overlay actif */
.filtre-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


/**************************        OVERLAY Changement temps      ***********************************/


/* ============================= */
/* OVERLAY TEMPOREL – GLOBAL     */
/* ============================= */

#timewarp-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;

    background: #000;

    /* invisible par défaut */
    visibility: hidden;
    pointer-events: none;

    /* fondu via opacity */
    opacity: 0;
    transition: opacity 500ms ease;
}

/* présent (dans le flow visuel) */
#timewarp-overlay.is-visible {
    visibility: visible;
}

/* état “affiché” (opacity 1) : doit rester pendant toute l’animation */
#timewarp-overlay.is-active {
    opacity: 1;
}

/* ============================= */
/* CANVAS                        */
/* ============================= */

#timewarp-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================= */
/* RIDEAU D’INTRO (OUVERTURE)    */
/* ============================= */

#timewarp-curtain {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 1;
    pointer-events: none;
}

#timewarp-overlay.is-running #timewarp-curtain {
    animation: timewarpCurtainOpen 700ms cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes timewarpCurtainOpen {
    0% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ============================= */
/* GLOW (COULEURS DEMANDÉES)     */
/* ============================= */

#timewarp-glow {
    position: absolute;
    inset: -10%;
    pointer-events: none;

    background: radial-gradient(circle at center,
            rgba(56, 107, 226, 0.22) 0%,
            rgba(113, 197, 178, 0.14) 28%,
            rgba(119, 182, 214, 0.12) 45%,
            rgba(0, 0, 0, 0) 70%);

    filter: blur(18px);
    animation: timewarpPulse 1.8s ease-in-out infinite;
}

@keyframes timewarpPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .9;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

/* ============================= */
/* VIGNETTAGE                    */
/* ============================= */

#timewarp-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0.9) 100%);

    mix-blend-mode: multiply;
}

/* =========================
   RESPONSIVE — GLOBAL (futur)
   ========================= */

@media (max-width: 768px) {

  /* Layout global */
  body.futur main{
    padding-top: 120px; /* on ne touche pas (header futur plus haut) */
    padding-bottom: 70px;
  }

  /* Sections : padding mobile */
  body.futur section{
    padding: 0 16px;
    margin-bottom: 70px;
  }

  /* Typo : plus fluide */
  body.futur h1{ font-size: 32px; }
  body.futur h2{ font-size: 26px; }
  body.futur h3{ font-size: 20px; }
  body.futur h4{ font-size: 18px; }

  body.futur p,
  body.futur ul,
  body.futur li,
  body.futur label,
  body.futur textarea{
    font-size: 15px;
  }

  /* Bandeau : colonne + hauteur auto */
  body.futur section.bandeau{
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    padding: 18px 16px;
  }

  body.futur section.reverse{
    flex-direction: column;
  }

  body.futur section.bandeau > :last-child{
    max-width: 100%;
  }

  /* Containers : évite les débordements */
  body.futur .container{
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Hover : pas utile sur mobile */
  body.futur .container:hover{
    transform: none;
  }

  /* Images : évite effets lourds sur mobile */
  body.futur img{
    animation: none;
  }

  /* Messages : largeur confortable */
  body.futur .message{
    max-width: 100%;
  }

  /* =========================
     GLITCH IMAGES — plus petites
     ========================= */

  body.futur .glitch{
    max-width: 70%;
    margin: 0 auto;
  }

  body.futur .glitch img{
    width: 100%;
    height: auto;
  }
}

@media (max-width: 420px){

  body.futur h1{ font-size: 28px; }
  body.futur h2{ font-size: 24px; }

  body.futur .glitch{
    max-width: 85%;
  }
}