/*
 * =========================================================
 * HYPNO6 — FEUILLE DE STYLE
 * =========================================================
 *
 * Police principale : Spectral
 *
 * Organisation :
 * 01. Reset / base
 * 02. Structure générale / body
 * 03. Navigation (en-tête du site, liens, menu mobile)
 * 04. En-tête / logo / marque
 * 05. Titres / effets de texte
 * 06. Structure générale / contenu
 * 07. Hero / paragraphes / boutons
 * 08. Cartes générales
 * 09. Services
 * 10. Page À propos
 * 11. Certifications
 * 12. Pied de page
 * 13. Classes utilitaires (icônes, notes)
 * 14. Expérimentations — boutons animés
 *
 * Note : la table des matières d'origine listait aussi Contact/formulaire,
 * SMS/téléphone, Messages/notifications et Cookie banner — ces sections
 * n'existent pas (encore) dans ce fichier, elles ont été retirées de la
 * liste pour qu'elle corresponde à ce qui existe vraiment.
 *
 * =========================================================
 */

/* =========================================================
   01. RESET / BASE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@200;300;400;500;600;700;800&display=swap');

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




/* =========================================================
   02. STRUCTURE GÉNÉRALE / BODY
   ========================================================= */

/* =========================================================
   POLICE SPECTRAL
   ========================================================= */

.spectral-extralight {
    font-family: "Spectral", serif;
    font-weight: 200;
    font-style: normal;
}

.spectral-light {
    font-family: "Spectral", serif;
    font-weight: 300;
    font-style: normal;
}

.spectral-regular {
    font-family: "Spectral", serif;
    font-weight: 400;
    font-style: normal;
}

.spectral-medium {
    font-family: "Spectral", serif;
    font-weight: 500;
    font-style: normal;
}

.spectral-semibold {
    font-family: "Spectral", serif;
    font-weight: 600;
    font-style: normal;
}

.spectral-bold {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-style: normal;
}

.spectral-extrabold {
    font-family: "Spectral", serif;
    font-weight: 800;
    font-style: normal;
}

.spectral-extralight-italic {
    font-family: "Spectral", serif;
    font-weight: 200;
    font-style: italic;
}

.spectral-light-italic {
    font-family: "Spectral", serif;
    font-weight: 300;
    font-style: italic;
}

.spectral-regular-italic {
    font-family: "Spectral", serif;
    font-weight: 400;
    font-style: italic;
}

.spectral-medium-italic {
    font-family: "Spectral", serif;
    font-weight: 500;
    font-style: italic;
}

.spectral-semibold-italic {
    font-family: "Spectral", serif;
    font-weight: 600;
    font-style: italic;
}

.spectral-bold-italic {
    font-family: "Spectral", serif;
    font-weight: 700;
    font-style: italic;
}

.spectral-extrabold-italic {
    font-family: "Spectral", serif;
    font-weight: 800;
    font-style: italic;
}

/* =========================================================
   02. STRUCTURE GÉNÉRALE / BODY
   ========================================================= */

html,
body {
    min-height: 100vh;

    background-image:
        radial-gradient(
            circle at top right,
            rgba(86, 172, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(158, 99, 255, 0.16),
            transparent 30%
        )
        ;

    

    color: #f8f8ff;
    font-family: 'Spectral', serif;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    position: relative;
}



/* =========================================================
   03. NAVIGATION
   ========================================================= */

/* ---------------------------------------------------------
   LIENS GÉNÉRAUX
   --------------------------------------------------------- */

a:not(.btn-cta):not(.nav-list a):not(.btn-lab):not(.neon-btn) {
    color: #2a7de1;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.25s ease;
}

a:not(.btn-cta):not(.nav-list a):not(.btn-lab):not(.neon-btn)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: #2a7de1;
    transition: width 0.35s ease, background-color 0.25s ease;
}

a:not(.btn-cta):not(.nav-list a):not(.btn-lab):not(.neon-btn):hover {
    color: #7dd6ff;
    text-shadow: 0 0 6px rgba(125, 214, 255, 0.4);
}

a:not(.btn-cta):not(.nav-list a):not(.btn-lab):not(.neon-btn):hover::after {
    width: 100%;
    background: #7dd6ff;
}


/* ---------------------------------------------------------
   BARRE DE NAVIGATION
   --------------------------------------------------------- */

.site-nav {
    width: 100%;
    background: linear-gradient(
        180deg,
        rgba(70, 115, 200, 0.12),
        rgba(10, 14, 22, 0.36)
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    isolation: isolate;
}

.nav-inner {
    width: clamp(320px, 70vw, 1100px);
    margin: 0 auto;
    padding: 16px 32px;

    box-sizing: border-box;

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

    gap: 6px;
}

.nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-list li {
    margin: 0;
}

.nav-list a {
    display: inline-block;

    position: relative;

    padding: 10px 4px;

    color: #e0d8ce;

    text-decoration: none;

    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    white-space: nowrap;

    background: transparent;
    border: none;
    border-radius: 0;

    transition: color 0.3s ease;
}


/* Ligne animée sous le texte */
.nav-list a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 0;
    height: 1px;

    background: #7dd6ff;

    transition: width 0.3s ease;
}


/* Survol */
.nav-list a:hover,
.nav-list a:focus-visible {
    color: #ffffff;

    background: transparent;

    border: none;

    transform: none;
}


/* Animation de la ligne */
.nav-list a:hover::after,
.nav-list a:focus-visible::after {
    width: 100%;
}


/* ---------------------------------------------------------
   BOUTON MENU MOBILE
   --------------------------------------------------------- */

.menu-toggle {
    display: none;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.14);

    color: #fff;
    font-size: 1.1rem;
    line-height: 1;

    cursor: pointer;

    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   TABLETTE
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 836px) {

    .menu-toggle {
        display: none !important;
    }

    .nav-list {
        display: flex !important;
        flex-wrap: nowrap;
    }

    .nav-inner {
        justify-content: center;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 835px) {

    .site-nav {
        background: transparent;
        border-bottom: none;
        backdrop-filter: none;
        padding: 0 16px;
    }

    .nav-inner {
        width: 100%;
        max-width: none;
        padding: 8px 0;

        justify-content: flex-end;

        position: relative;
    }

    .menu-toggle {
    display: inline-flex;

    width: 36px;
    height: 36px;

    position: absolute;

    right: 0;
    top: 8px;

    transform: none;

    background: rgba(235, 243, 255, 0.22);

    border: 1px solid rgba(255, 255, 255, 0.32);

    border-radius: 14px;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);

    align-items: center;
    justify-content: center;
}

    .nav-list {
        display: none;

        width: 100%;

        margin: 0;
    }

    .site-nav.nav-open .nav-list {
        display: flex;

        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        position: absolute;
        top: 44px;
        right: 0;

        width: min(260px, calc(100% - 32px));

        padding: 14px 16px;

        background: rgba(250, 250, 255, 0.22);
        border: 1px solid rgba(235, 245, 255, 0.32);
        border-radius: 20px;

        backdrop-filter: blur(18px);

        box-shadow: 0 14px 28px rgba(30, 40, 70, 0.06);

        z-index: 40;
    }

    .site-nav.nav-open .nav-list a {
        display: block;

        width: 100%;
        padding: 10px 0;

        background: transparent;
        border: none;
        border-radius: 0;

        color: #f8f8ff;

        text-align: right;
    }

    .site-nav.nav-open .nav-list a:hover,
    .site-nav.nav-open .nav-list a:focus-visible {
        background: rgba(255, 255, 255, 0.16);
        transform: none;
    }
}


/* =========================================================
   04. EN-TÊTE / LOGO / MARQUE
   ========================================================= */


/* ---------------------------------------------------------
   BLOC PRINCIPAL DU HEADER
   --------------------------------------------------------- */

.site-header {
    position: relative;

    width: clamp(320px, 70vw, 1100px);
    margin: 24px auto 0;

    display: grid;

    grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1fr)
    minmax(0, 0.8fr);

    align-items: center;

    gap: 12px;

    padding: 24px 32px;

    border-radius: 32px 32px 0 0;

    background: linear-gradient(
        180deg,
        rgba(25, 32, 45, 0.48),
rgba(12, 17, 28, 0.58)
    );

    border: 1px solid rgba(254, 253, 253, 0.08);

    box-shadow:
        0 14px 34px rgba(4, 7, 16, 0.2);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    min-height: 140px;

    text-align: left;
}


/* Zones de l'en-tête */
.header-zone {
    display: flex;

    align-items: center;

    min-width: 0;
}


/* Marque */
.header-brand {
    justify-self: start;

    align-items: center;
    text-align: left;

    display: flex;
    gap: 12px;

    flex-wrap: wrap;
}

.brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
}
.header-actions {
    justify-self: end;

    text-align: right;
}
.contact-details {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    width: 100%;
}

.contact-line {
    color: #e0d8ce;

    font-size: 0.9rem;

    line-height: 1.65;

    text-align: right;

    letter-spacing: 0.03em;
}
/* Logo */
.brand-logo {
    width: clamp(140px, 18vw, 220px);

    display: block;

    padding: 0;
    margin: 0;

    border: 0 !important;
    outline: none;
    border-radius: 0 !important;

    object-fit: contain;

    background: transparent !important;
    box-shadow: none !important;

    mix-blend-mode: screen;
}


/* Variante logo */
.brand-logo.blend {
    mix-blend-mode: multiply;
    opacity: 0.95;
}


/* Nom du site */
.site-name {
    font-family: 'Spectral', serif;
    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    white-space: nowrap;
}


/* Sous-titre */
.site-subtitle {
    font-size: 0.78rem;
    color: rgba(248, 248, 255, 0.78);

    white-space: nowrap;
}


/* ---------------------------------------------------------
   TITRE CENTRAL DU HEADER
   --------------------------------------------------------- */

.header-center {
    justify-self: center;

    width: 100%;
    min-width: 0;

    padding: 0 10px;

    text-align: center;

    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 100;
}

.header-center span {
    display: inline-block;

    width: auto;

    margin: 0 auto;

    line-height: 1.25;

    white-space: normal;

    position: relative;

    padding-bottom: 8px;
}

.header-center span::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: 0;

    height: 1px;

    background: #7dd6ff;

    border-radius: 2px;
}

/* Effet ombre */
.texte-ombre {
    font-family: 'Spectral', serif;

    color: #f8f8ff;

    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5);

    -webkit-text-stroke: 0.1px #7dd6ff;
}



/* ---------------------------------------------------------
   HEADER PRINCIPAL — VERSION MOBILE
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   HEADER PRINCIPAL — MOBILE
   --------------------------------------------------------- */

@media (max-width: 835px) {

    .site-header {
        width: calc(100% - 32px);
        max-width: 100%;

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 20px;

        min-height: auto;
    }

    .page-frame {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;

    margin-left: auto;
    margin-right: auto;

    padding: 0 !important;

    box-sizing: border-box;
}

    .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

    .header-brand {
        justify-self: center;
        text-align: center;
    }

    .header-center {
        justify-self: center;
        width: 100%;
        padding: 0;
    }

    .header-actions {
        justify-self: center;
        width: 100%;
        text-align: center;
    }

    .contact-details {
        justify-content: center;
    }

    .contact-line {
        text-align: center;
    }
}

/* =========================================================
   05. TITRES / EFFETS DE TEXTE
   ========================================================= */

/* Titres H1 / H2 / H3 */
h1,
h2,
h3 {
    font-family: 'Spectral', serif;
    font-weight: 700;

    color: #f5f3f0;

    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5);

    -webkit-text-stroke: 0.2px black;
}

h1 {
    font-size: clamp(1.4rem, 4.2vw, 2.4rem);
    hyphens: auto;
}

h2 {
    font-size: clamp(1.2rem, 3.2vw, 1.9rem);
    text-align: left;
    hyphens: auto;
}

h3 {
    font-size: clamp(1.05rem, 2.5vw, 1.5rem);
    hyphens: auto;
}
.page-title {
    text-align: center;
    margin-bottom: 28px;
}


/* =========================================================
   06. STRUCTURE GÉNÉRALE / CONTENU
   ========================================================= */

.page-frame {
    width: clamp(320px, 70vw, 1100px);
    max-width: 100%;

    margin: 24px auto 32px;
    padding: 20px;

    border-radius: 0px;

    background: linear-gradient(
        180deg,
        rgba(10, 14, 22, 0.28),
        rgba(10, 14, 22, 0.16)
    );

    border: 1px solid rgba(255, 255, 255, 0.06);

    box-shadow: 0 8px 20px rgba(4, 8, 20, 0.18);

    backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
}

.site-main {
    padding: 28px 0 36px;
    color: #eef6ff;
}

.container {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* ---------------------------------------------------------
   MISE EN PAGE EN DEUX COLONNES
   --------------------------------------------------------- */

.two-col {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}
/* Image de la colonne secondaire uniquement */

.two-col > .card-light:last-child img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   07. HERO / PARAGRAPHES / BOUTONS
   ========================================================= */

.hero {
    padding: 0;
    text-align: center;
}

hero p {
    text-align: center;
    hyphens: none;
    color: #ffffff;
    margin-bottom: 18px;

    text-shadow:
        -0.5px -0.5px 0 #000,
         0.5px -0.5px 0 #000,
        -0.5px  0.5px 0 #000,
         0.5px  0.5px 0 #000;
}



p {
    color: #202020;
    margin-bottom: 18px;
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
}


/* =========================================================
   BOUTONS HYPNO6
   ========================================================= */

.btn-cta,
.nav-list a.btn-cta {
    background: linear-gradient(
    135deg,
    #b8b0a7,
    #d0c9c1
);

color: #202020;
    font-weight: 600;

    padding: 12px 26px;

    border-radius: 6px;
    border: none;

    cursor: pointer;

    position: relative;
    overflow: hidden;

    display: inline-block;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;

    text-decoration: none;
}


/* Effet ripple */
.btn-cta:active::after,
.nav-list a.btn-cta:active::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    background: rgba(255, 255, 255, 0.5);

    border-radius: 50%;

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

    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    from {
        width: 0;
        height: 0;
        opacity: 0.7;
    }

    to {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}


/* Hover boutons */
.btn-cta:hover,
.nav-list a.btn-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.20);

    color: #000000;
}

/* =========================================================
   08. CARTES GÉNÉRALES
   ========================================================= */

/*
 * CARTE CLAIRE
 *
 * Utilisée comme grande carte principale.
 */

.card-light {
    align-self: flex-start;

    box-sizing: border-box;
    width: 100%;

    padding: 18px;

    border-radius: 4px;

    background: rgba(245, 241, 235, 0.750);

    border: 1px solid rgba(255, 255, 255, 0.750);

    color: rgb(0, 0, 0);
}


/*
 * CARTE INTERNE
 *
 * Utilisée pour les blocs placés à l'intérieur
 * des cartes principales.
 */

.card-light-2 {
    align-self: flex-start;

    box-sizing: border-box;
    width: 100%;

    padding: 18px;

    border-radius: 6px;

    background: linear-gradient(
        180deg,
        rgba(70, 115, 200, 0.12),
        rgba(10, 14, 22, 0.36)
    );

    border: 1px solid rgba(255, 255, 255, 0.750);

    color: rgb(0, 0, 0);
}
.card-light-2 p {
    color: #202020;
}


/* Anciennes cartes génériques */
.card {
    padding: 18px;

    border-radius: 14px;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.02),
        rgba(255, 255, 255, 0.01)
    );

    border: 1px solid rgba(255, 255, 255, 0.04);
}

.card h3 {
    margin-bottom: 8px;
}



/* =========================================================
   09. SERVICES
   ========================================================= */

/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.services h2 {
    margin-bottom: 12px;
    text-align: center;
}


/* ---------------------------------------------------------
   GRILLE GÉNÉRALE
   --------------------------------------------------------- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 12px;
}


/* ---------------------------------------------------------
   GRILLE DES ACCOMPAGNEMENTS
   --------------------------------------------------------- */

.services-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    width: 100%;
}
@media (max-width: 900px) {

    .two-col,
    .services-grid-2col {
        grid-template-columns: 1fr;
    }

}

/* ---------------------------------------------------------
   ESPACEMENT DES BLOCS INTERNES
   --------------------------------------------------------- */

.services-grid-2col .card-light-2 {
    margin-bottom: 18px;
}

.services-grid-2col .card-light-2:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BLOCS SOUS LA GRILLE
   --------------------------------------------------------- */

.services > .card-light {
    margin-top: 24px;
}


/* ---------------------------------------------------------
   ESPACEMENT ENTRE LES BLOCS
   --------------------------------------------------------- */

.services > .card-light + .card-light {
    margin-top: 18px;
}


/* ---------------------------------------------------------
   BOUTON CONTACT
   --------------------------------------------------------- */

.contact-cta {
    margin-top: 28px;
    text-align: center;
}


/* ---------------------------------------------------------
   BOUTON DISCRET
   --------------------------------------------------------- */

.btn-ghost {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    background: transparent;
}

/* =========================================================
   10. PAGE À PROPOS
   ========================================================= */

/* Grande carte contenant toute la présentation */
.about-card {
    box-sizing: border-box;
    width: 100%;

    padding: 18px;
}


/* Blocs de présentation */
.about-card .card-light-2 {
    display: block;

    box-sizing: border-box;

    width: 100%;

    margin-bottom: 18px;
    padding: 18px;

    border-radius: 14px;

    background: linear-gradient(
        180deg,
        rgba(70, 115, 200, 0.12),
        rgba(10, 14, 22, 0.36)
    );

    border: 1px solid rgba(255, 255, 255, 0.750);

    color: rgb(0, 0, 0);
}


/* Titres des blocs À propos */
.about-card .card-light-2 h2 {
    margin-top: 0;
    margin-bottom: 12px;
}


/* Dernier bloc */
.about-card .card-light-2:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   11. CERTIFICATIONS
   ========================================================= */

.cert-section {
    width: 100%;

    box-sizing: border-box;

    margin-top: 20px;
    padding: 22px;

    border-radius: 14px;

    background: linear-gradient(
        180deg,
        rgba(70, 115, 200, 0.12),
        rgba(10, 14, 22, 0.36)
    );

    border: 1px solid rgba(255, 255, 255, 0.750);

    color: #000;
}

.cert-section h3 {
    margin-top: 0;
    text-align: center;
}


/* Grille certifications */
.cert-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 150px);

    gap: 20px;

    justify-content: center;
    align-items: start;

    margin-top: 18px;
}


/* Élément certification */
.cert-item {
    text-align: center;
}


/* Image certification */
.cert-item img {
    width: 150px;

    display: block;

    border-radius: 8px;

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.25);

    cursor: zoom-in;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    position: relative;

    object-fit: cover;
}


/* Zoom */
.cert-item img:hover {
    transform: scale(1.6);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45);

    z-index: 50;
}


/* Texte certification */
.cert-item p {
    font-size: 0.9rem;

    margin-top: 10px;

    color: rgb(0, 0, 0);
}

/* =========================================================
   12. PIED DE PAGE
   ========================================================= */


/* ---------------------------------------------------------
   STRUCTURE EN 3 BLOCS
   --------------------------------------------------------- */

.site-footer {
    width: 100%;
}


/* ---------------------------------------------------------
   GRILLE DU FOOTER
   --------------------------------------------------------- */

.site-footer .footer-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   BLOCS DU FOOTER
   --------------------------------------------------------- */

.site-footer .footer-block {
    box-sizing: border-box;
    min-width: 0;
}


/* ---------------------------------------------------------
   BLOC 1 — SOCIÉTÉ
   --------------------------------------------------------- */

.site-footer .footer-company p{
    text-align: left;
    color: #e0d8ce;
}


/* ---------------------------------------------------------
   BLOC 2 — LIENS UTILES
   --------------------------------------------------------- */

.site-footer .footer-links {
    text-align: center;
}


/* ---------------------------------------------------------
   BLOC 3 — RÉSEAUX SOCIAUX
   --------------------------------------------------------- */

.site-footer .footer-social {
    text-align: right;
}


/* ---------------------------------------------------------
   TITRES
   --------------------------------------------------------- */

.site-footer .footer-block h3 {
    margin-top: 0;
    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   LIENS UTILES
   --------------------------------------------------------- */

.site-footer .footer-links a {
    display: table;

    margin-bottom: 8px;

    color: #e0d8ce !important;

    text-decoration: none;

    position: relative;
}

.site-footer .footer-links a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 0;
    height: 1px;

    background: currentColor;

    transition: width 0.3s ease;
}

.site-footer .footer-links a:hover::after {
    width: 100%;
}

.site-footer .footer-links a:hover {
    color: #ffffff;
}


/* ---------------------------------------------------------
   RÉSEAUX SOCIAUX
   --------------------------------------------------------- */

.site-footer .social-links {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    gap: 12px;
}


.site-footer .social-links a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: #e0d8ce;

    text-decoration: none;
}


.site-footer .social-links svg {
    
    width: 20px !important;
    height: 20px !important;

    max-width: 20px;
    max-height: 20px;

    color: #e0d8ce;
    opacity: 0.9;
}


.site-footer .social-links a:hover {
    color: #ffffff;
}


.site-footer .social-links a:hover svg {
    opacity: 1;
    transform: translateY(-2px);
}



/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .site-footer .footer-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .site-footer .footer-company,
    .site-footer .footer-links,
    .site-footer .footer-social {
        text-align: center;
    }


    .site-footer .social-links {
        justify-content: center;
    }

}
/* ---------------------------------------------------------
   FOND DU FOOTER
   --------------------------------------------------------- */

.site-footer .page-frame {
    background: linear-gradient(
        180deg,
        rgba(10, 14, 22, 0.58),
        rgba(6, 9, 16, 0.78)
    );
}


/* ---------------------------------------------------------
   COPYRIGHT
   --------------------------------------------------------- */

.footer-copyright {
    display: block;

    width: 100%;

    margin: 14px 0 20px;

    text-align: center;

    color: #e0d8ce;

    font-family: 'Spectral', serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;

    position: relative;
    z-index: 2;
}
/* =========================================================
   13. CLASSES UTILITAIRES
   ========================================================= */


/* ---------------------------------------------------------
   ICÔNES DANS LES H3
   --------------------------------------------------------- */

.icon-inline {
    width: 25px;
    height: 25px;

    vertical-align: middle;

    margin-right: 8px;

    filter: brightness(0) saturate(100%)
            invert(78%) sepia(35%)
            saturate(1000%) hue-rotate(165deg)
            brightness(105%) contrast(100%);
}

/* ---------------------------------------------------------
   NOTES (ex: avertissement, séparateurs)
   --------------------------------------------------------- */

.services-note {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 76%;
    margin: 32px auto 0;

    color: rgba(245, 243, 240, 0.78);

    font-size: 0.95rem;
    line-height: 1.55;
    text-align: center;
}

.services-note::before,
.services-note::after {
    content: "";

    flex: 1 1 0;

    min-width: 40px;

    height: 1px;

    background: #7dd6ff;
}

.services-note em {
    flex: 0 1 620px;
    min-width: 0;

    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

/* =========================================================
   14. EXPÉRIMENTATIONS — BOUTONS ANIMÉS
   ========================================================= */

/* ---------------------------------------------------------
   VERSION DÉFINITIVE — bouton néon avec liseré SVG animé
   --------------------------------------------------------- */

    .neon-btn {
    position: relative;

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

    max-width: 100%;
    box-sizing: border-box;

    padding: 16px 36px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;

    color: #f8f8ff;
    background: transparent;
    border: none;
    border-radius: 8px;

    cursor: pointer;
    outline: none;

    white-space: nowrap;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    transition: transform 0.2s ease;
    text-decoration: none;
}

    .neon-btn:active {
      transform: scale(0.98);
    }

    /* --- GESTION DU TEXTE --- */
    .neon-btn span {
      position: relative;
      z-index: 2;
      display: inline-block;
      color: #f8f8ff; /* Maintien de la couleur exacte */
    }

    /* Survol : Le texte reste net avec un très léger halo bleu très discret */
    .neon-btn:hover span {
      text-shadow: 0 0 2px rgba(125, 214, 255, 0.6);
    }

    /* Sortie du bouton : Fin de l'effet uniquement (dissipation douce de la lumière) */
    .neon-btn:not(:hover) span {
      animation: textBurstEnd 0.35s ease-out forwards;
    }

    /* --- GESTION DU LISERÉ SVG --- */
    .neon-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .neon-path {
      fill: none;
      stroke: #7dd6ff;
      stroke-width: 1.5px;
      stroke-dasharray: 6 94;
      stroke-dashoffset: 0;
      filter: drop-shadow(0 0 1px #7dd6ff);
      
      animation: rotateLine 4s linear infinite, neonBurst 0.45s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
      animation-play-state: paused, running;
      opacity: 0;
    }

    .neon-btn:hover .neon-path {
      opacity: 1;
      stroke-width: 1.5px;
      filter: drop-shadow(0 0 1px #7dd6ff);
      animation: rotateLine 4s linear infinite;
      animation-play-state: running;
    }

    .neon-btn:not(:hover) .neon-path {
      animation: rotateLine 4s linear infinite, neonBurst 0.45s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
      animation-play-state: paused, running;
    }

    /* --- ANIMATIONS --- */

    @keyframes rotateLine {
      from { stroke-dashoffset: 100; }
      to { stroke-dashoffset: 0; }
    }

    /* Explosion du liseré néon */
    @keyframes neonBurst {
      0% {
        opacity: 1;
        stroke-width: 1.5px;
        stroke: #7dd6ff;
        filter: drop-shadow(0 0 1px #7dd6ff);
      }
      15% {
        opacity: 1;
        stroke-width: 4px;
        stroke: #ffffff;
        filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 15px #7dd6ff);
      }
      35% {
        opacity: 0.8;
        stroke-width: 6px;
        stroke: #7dd6ff;
        filter: drop-shadow(0 0 20px #7dd6ff) drop-shadow(0 0 35px #00a2ff);
      }
      100% {
        opacity: 0;
        stroke-width: 0px;
        filter: none;
      }
    }

    /* Fin de l'effet sur le texte : uniquement la décroissance douce du halo */
    @keyframes textBurstEnd {
      0% {
        color: #f8f8ff;
        text-shadow: 0 0 10px rgba(125, 214, 255, 0.8), 0 0 20px rgba(0, 162, 255, 0.5);
      }
      100% {
        color: #f8f8ff;
        text-shadow: none;
      }
    }
.site-background {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100dvh;

    background-image: url('../images/fond-hypno6.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    pointer-events: none;
    z-index: 0;
}
@media (max-width: 835px) {
    .site-background {
        background-image: url('../images/fond-hypno6-media.png');
        background-size: cover;
        background-position: center top;
    }
}
.rendez-vous {
    text-align: center;
}
#rdv-submit-btn {
    background: rgba(8, 12, 20, 0.82);
}
.accueil-rendez-vous {
    text-align: center;
}