/* ===========================
   REFERENCE.CSS (design commun)
   - Blocs réutilisés sur les pages
   - Les animations "globales" sont plutôt dans theme.css
   - Objectif : cohérence visuelle + stabilité (fichier commun = très sensible)
=========================== */


/* ==========================================================================
   1) WRAPPER PARALLAX (fond fixe)
   ========================================================================== */
.parallax-wrapper {

    /*
      Fond principal (parallax)
      - URL absolue locale : OK si c'est ton choix pour WAMP
      - NOTE : <base href> n'impacte PAS les url() CSS (c'est normal)
    */
    background-image: url('https://ld3drepar.fr/MEDIA/IMG/fond.jpg');

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

    /*
      Effet parallax
      - Peut être limité sur mobile (comportement normal selon navigateur)
    */
    background-attachment: fixed;

    /*
      Fix "bande blanche" avant footer
      - On garde du padding bas pour éviter une coupure visuelle sur certaines hauteurs
    */
    padding-bottom: 4.5rem;
    display: flow-root; /* Empêche le margin-collapsing (supprime la barre blanche) */
}

/* ==========================================================================
   2) BANDEAU d'ACCROCHE (INTRO)
   ========================================================================== */
.intro-wrapper {
    padding: 5rem 2rem 0 2rem;
    display: flex;
    justify-content: center;
}

.intro-line-box {
    position: relative; /* nécessaire pour positionner .intro-border en absolute */
    max-width: 1100px;
    padding: 3.5rem 4rem;
    text-align: center;
    color: var(--primary-color);

    background: var(--intro-bg);
    border-radius: 1.5rem;

    box-shadow:
        0 0 20px rgba(0,0,0,0.15),
        0 0 35px rgba(59,130,246,0.25);
}

/* AJOUT PRO : Style du H1 SEO pour Accueil.php (garde l'apparence de votre ancien texte gras) */
.titre-intro {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: var(--primary-color);
}

.intro-line-box p {
    font-size: 1.1rem;
    line-height: 1.75;

    /* Lisibilité : texte net (pas de glow sur paragraphes longs) */
    text-shadow: none;
}


/* ==========================================================================
   2.1) SVG CONTOUR ANIMÉ (INTRO)
   ========================================================================== */
.intro-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /*
      IMPORTANT :
      - le SVG est décoratif
      - doit rester "transparent" aux clics (sinon CTA moins fiable)
    */
    pointer-events: none;
}

.intro-border rect {
    fill: none;

    /*
      STROKE "BLINDÉ" (IMPORTANT)
      - But : ne JAMAIS perdre le contour (même si le gradient n'existe pas).
      - Syntaxe SVG : url(#gradient) + fallback couleur
        => si #gradient est absent, la couleur fallback est utilisée.
      - Résultat : contour toujours visible + prêt si tu ajoutes un gradient un jour.
    */
    stroke: url(#gradient) var(--secondary-color);

    stroke-width: 1.5;
    
    /* AJOUT PRO : Taille exacte du faisceau (150px) et du vide (228.3px) pour épouser parfaitement le périmètre */
    stroke-dasharray: 150 228.3;
    stroke-dashoffset: 0;

    /* Animation définie dans theme.css : @keyframes borderMove */
    animation: borderMove 14s linear infinite;

    filter: drop-shadow(0 0 4px var(--secondary-color));
}


/* ==========================================================================
   3) HERO SECTION
   ========================================================================== */
.hero {
    /* Hauteur généreuse type landing page */
    padding: 6rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 95vh;
}

.hero-container {
    background-color: var(--surface-bg);
    border-radius: 1.25rem;
    padding: 4rem 4.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    
    /* AJOUT PRO : Empêche l'étirement vertical (distortion) de la photo par rapport au texte */
    align-items: center;

    max-width: 1100px;

    box-shadow:
        0 0 25px rgba(0,0,0,0.12),
        0 0 40px rgba(59,130,246,0.15);

    backdrop-filter: blur(6px);

    /* Animation définie dans theme.css : @keyframes floatHero */
    animation: floatHero 6s ease-in-out infinite;

    border: 1px solid var(--border-soft);
}

.hero-photo {
    width: 320px;
    border-radius: 1rem;
    
    /* AJOUT PRO : Sécurité absolue pour conserver le ratio d'aspect de la photo (pas de déformation) */
    object-fit: cover;
    
    filter: drop-shadow(0 0 8px var(--secondary-color))
            drop-shadow(0 0 15px var(--tertiary-color));
    transition: transform 0.5s, filter 0.5s;
}

.hero-photo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px var(--secondary-color))
            drop-shadow(0 0 20px var(--tertiary-color));
}

.hero-text {
    flex: 1;
    color: var(--primary-color);
    text-shadow: none; /* lisibilité */
}

.hero-text h1 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem; /* AJOUT PRO : On réserve de l'espace en bas pour la ligne néon */
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    /* Glow léger OK sur titre */
    text-shadow: 0 0 2px var(--secondary-color),
                 0 0 4px var(--tertiary-color);
}

.hero-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 6px var(--secondary-color));
    transform: translateY(-5px);
}

/* Ligne néon animée sous le H1 */
.hero-text h1::after {
    content: "";
    /* AJOUT PRO : Position absolute pour la détacher du texte et stopper le tremblement */
    position: absolute; 
    bottom: 0;
    left: 0;
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--secondary-color), var(--tertiary-color));
    box-shadow: 0 0 6px var(--secondary-color);

    /* Animation définie dans theme.css : @keyframes linePulse */
    animation: linePulse 3s infinite ease-in-out;
}

.hero-text p {
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    line-height: 1.6;
    text-shadow: none; /* lisibilité */
}


/* ==========================================================================
   4) SERVICES (cartes cliquables)
   ========================================================================== */
.services {
    padding: 0 2rem;
    margin: 4.5rem 0;
    display: flex;
    justify-content: center;
}

.service-card {
    text-decoration: none;
    /* AJOUT PRO : Prévient la coloration bleue des liens sans casser le centrage flex */
    color: inherit;
}

/* Fix : évite un "vide" avant footer sur le dernier bloc */
.parallax-wrapper > .services:last-of-type {
    margin-bottom: 0;
}


/* ==========================================================================
   4.1) FEEDBACK PRO : FOCUS CLAVIER SUR LES CARTES
   --------------------------------------------------------------------------
   - Quand on navigue au clavier (Tab), on doit voir où on est.
   - N'impacte pas le design souris (focus-visible uniquement).
   ========================================================================== */
.service-card:focus-visible .services-container {
    outline: 2px solid var(--secondary-color);
    outline-offset: 6px;
    border-radius: 1.25rem; /* cohérent avec .services-container */
}


/* ==========================================================================
   4.2) HALO AU HOVER
   ========================================================================== */
@keyframes haloBreath {
    0% {
        box-shadow:
            0 0 18px rgba(59,130,246,0.25),
            0 0 30px rgba(96,165,250,0.18),
            0 0 45px rgba(96,165,250,0.12);
    }
    50% {
        box-shadow:
            0 0 28px rgba(59,130,246,0.45),
            0 0 50px rgba(96,165,250,0.35),
            0 0 70px rgba(96,165,250,0.22);
    }
    100% {
        box-shadow:
            0 0 18px rgba(59,130,246,0.25),
            0 0 30px rgba(96,165,250,0.18),
            0 0 45px rgba(96,165,250,0.12);
    }
}

.service-card:hover .services-container {
    transform: translateY(-6px);
    animation: haloBreath 2.8s ease-in-out infinite;
}


/* ==========================================================================
   4.3) CONTENEUR DES CARTES
   ========================================================================== */
.services-container {
    background-color: var(--surface-bg);
    border-radius: 1.25rem;
    padding: 4rem 4.5rem;
    max-width: 1100px;
    /* AJOUT PRO : Force toutes les cartes à prendre exactement la même largeur (évite l'effet escalier) */
    width: 100%;

    box-shadow:
        0 0 20px rgba(0,0,0,0.12),
        0 0 30px rgba(59,130,246,0.12);

    backdrop-filter: blur(6px);

    /* Animation définie dans theme.css : @keyframes floatServices */
    animation: floatServices 6s ease-in-out infinite;

    border: 1px solid var(--border-soft);
    transition: transform 0.5s, box-shadow 0.5s;
}


/* ==========================================================================
   4.4) HEADER DES CARTES (icône + titre)
   ========================================================================== */
.service-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.service-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 6px var(--secondary-color));
    transition: transform 0.4s;
    transform: translateY(-5px);
}

.service-card:hover .service-icon {
    transform: scale(1.15) translateY(-5px);
}

.services-container h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--primary-color);

    text-shadow: 0 0 2px var(--secondary-color),
                 0 0 4px var(--tertiary-color);

    position: relative;
}

/* Ligne néon animée sous les H2 */
.services-container h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, var(--secondary-color), var(--tertiary-color));
    box-shadow: 0 0 6px var(--secondary-color);

    /* Animation définie dans theme.css : @keyframes linePulseServices */
    animation: linePulseServices 4s infinite ease-in-out;
}

.services-container p {
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    line-height: 1.6;
    color: var(--primary-color);
    text-shadow: none;
}

.service-card:hover .services-container h2 {
    text-shadow: 0 0 4px var(--secondary-color),
                 0 0 8px var(--tertiary-color);
}


/* ==========================================================================
   5) CTA (contact-button)
   --------------------------------------------------------------------------
   - Utilisé sur plusieurs pages (liens, spans, etc.)
   - IMPORTANT : la classe fait le style, pas la balise (a/span/button)
   ========================================================================== */
.contact-button {
    /* AJOUT PRO : display table permet au bouton de s'ajuster parfaitement au texte */
    display: table;
    margin: 1.5rem auto 0 auto;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    background: linear-gradient(90deg, var(--secondary-color), var(--tertiary-color));
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    text-decoration: none; /* Sécurité si c'est un lien <a> */
    box-shadow: 0 0 10px rgba(59,130,246,0.5),
                0 0 20px rgba(96,165,250,0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(59,130,246,0.6),
                0 0 25px rgba(96,165,250,0.5);
}

/* AJOUT PRO : Classe utilitaire pour l'espacement des paragraphes dans l'intro */
.p-espace {
    margin-bottom: 1.5rem; /* Ajuste l'espace entre les blocs de texte */
}

/* Sécurité : le dernier paragraphe n'a pas besoin de marge en bas */
.intro-line-box p:last-of-type, 
.intro-line-box .p-espace:last-of-type {
    margin-bottom: 0;
}

/* ==========================================================================
   6) MEDIA QUERIES (EN BAS) - comme demandé
   ========================================================================== */

/* ==========================================================
   Desktop : standardisation hauteur des cartes
========================================================== */
@media (min-width: 993px) { /* AJOUT PRO : Bascule modifiée à 993px pour inclure les tablettes et portables paysage */
    .services-container {
        display: flex;
        flex-direction: column;
        justify-content: center; /* centrage vertical du contenu */
        min-height: 550px; /* AJOUT PRO : Harmonise la hauteur sur grand écran */
    }
}

/* ==========================================================
   Tablette / petits laptops
========================================================== */
@media (max-width: 992px) { /* AJOUT PRO : Englobe toutes les tablettes et les grands téléphones en paysage */
    .hero-container {
        flex-direction: column;
        align-items: center;
        padding: 3rem;
        gap: 2rem; /* Permet au bloc de mieux respirer sur tablette */
    }

    /* AJOUT : Désactivation du parallax pour la fluidité mobile */
    .parallax-wrapper {
        background-attachment: scroll;
    }

    .hero-photo {
        width: 240px;
    }

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

    /* AJOUT PRO : Centrage de l'icône + titre sur tablette */
    .hero-text h1 {
        justify-content: center;
    }

    /* AJOUT PRO : On centre parfaitement la ligne H1 en mode absolute sur mobile */
    .hero-text h1::after {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .services-container h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .services {
        margin: 3.5rem 0;
    }

    /* AJOUT PRO : On garde une cohérence de hauteur même sur tablette */
    .services-container {
        min-height: 480px; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 3rem;
    }
}

/* ==========================================================
   Mobile
========================================================== */
@media (max-width: 600px) {
    .services-container, .intro-line-box, .hero-container {
        padding: 2.5rem 1.5rem; /* Ajustement pour aérer les bords sur smartphone */
        min-height: unset; /* Sur mobile, on laisse couler naturellement */
    }
}

@media (max-width: 480px) {
    .hero-photo {
        width: 180px;
    }

    .hero-text h1,
    .services-container h2 {
        font-size: 1.8rem;
    }

    .services {
        margin: 3rem 0;
    }
}

/* ==========================================================
   Accessibilité / perf : si l'utilisateur préfère moins d'animations
   - Ici, !important est OK : c'est volontairement "prioritaire"
========================================================== */
@media (prefers-reduced-motion: reduce) {
    .intro-border rect,
    .hero-container,
    .services-container,
    .service-card:hover .services-container {
        animation: none !important;
        transition: none !important;
    }

    .service-card:hover .services-container {
        transform: none !important;
    }
}