/* ==========================================================================
   LAYOUT.CSS
   - Mise en page globale : topbar, header, navigation, footer
   - Objectif : cohérence + rendu "pro" + responsive
   ========================================================================== */


/* ==========================================================================
   1) BARRE D'ACCUEIL (Top bar)
   ========================================================================== */

/* Bandeau tout en haut : tel / email / localisation / réseau */
.accueil {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--bg-acceuil);
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    gap: 1.5rem;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 10px rgba(59,130,246,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Bloc icône + texte */
.accueil2 {
    display: flex;
    align-items: center;
}

/* Icônes topbar */
.accueil2 img {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: 0.5rem;
    transition: transform var(--transition-speed), filter var(--transition-speed);
    filter: drop-shadow(0 0 3px var(--tertiary-color)) drop-shadow(0 0 5px var(--secondary-color));
}

/* AJOUT PRO : @media (hover: hover) pour éviter le bug visuel du clic sur mobile */
@media (hover: hover) {
    .accueil2 img:hover {
        transform: scale(1.1);
    }
}

/* Liens topbar (ex: Facebook) */
.accueil2 a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color var(--transition-speed), text-shadow var(--transition-speed);
}

@media (hover: hover) {
    .accueil2 a:hover {
        color: var(--secondary-color);
        text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--tertiary-color);
    }
}

/* Texte de la topbar (tel/mail/localisation) */
.accueil2 p, .accueil2 a {
    color: #bbe0f7;
    text-shadow: 0 0 2px #3b82f6, 0 0 4px #60a5fa;
    font-weight: 200;
    font-size: var(--accueil-size);
}


/* ==========================================================================
   2) HEADER PRINCIPAL (Logo + menu)
   ========================================================================== */

.header {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--bg-header);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    /* AJOUT PRO : z-index passé de 1000 à 900 pour ne pas chevaucher l'overlay des images (qui est à 1000) */
    z-index: 900;
    gap: var(--header-gap);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* Logo */
.header .logo {
    height: var(--logo-height);
    width: auto;
    margin-left: 2rem;
    transition: transform 0.5s, filter 0.5s;
    filter: drop-shadow(0 0 5px var(--secondary-color)) drop-shadow(0 0 10px var(--tertiary-color));
    animation: logoGlow 4s infinite ease-in-out alternate;
}

@media (hover: hover) {
    .header .logo:hover {
        transform: scale(1.08) rotate(-1deg);
        filter: drop-shadow(0 0 10px var(--secondary-color)) drop-shadow(0 0 20px var(--tertiary-color));
    }
}

/* Le <nav> prend la place restante en desktop */
nav {
    flex: 1;
}

/* Ligne menu desktop (inline) */
nav .ligneMenu {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    
    /* AJOUT PRO : Reset des listes ul/li sémantiques ajoutées dans header.php */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Liens du menu */
.menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: all 0.3s ease-in-out;
    background: linear-gradient(90deg, transparent 0%, transparent 100%);
    animation: neonPulse 3s infinite ease-in-out alternate;
    font-size: var(--menu-size);
}

@media (hover: hover) {
    .menu a:hover {
        background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%);
        color: var(--text-color);
        transform: translateY(-2px);
        box-shadow: 0 0 10px var(--secondary-color), 0 0 20px var(--tertiary-color), 0 0 30px rgba(59,130,246,0.3);
        text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--tertiary-color);
    }
}

/* ----------------------------------------------------------------------
  | PAGE ACTIVE (Ajout pour le repère visuel)
  ---------------------------------------------------------------------- 
*/
.menu a.active {
    color: var(--text-color);
    background: rgba(59, 130, 246, 0.25);
    border-bottom: 2px solid var(--secondary-color);
    text-shadow: 0 0 5px var(--secondary-color), 0 0 10px var(--tertiary-color);
}

/* Focus clavier (accessibilité pro) */
.menu a:focus-visible,
.footer-link:focus-visible,
.burger:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
    border-radius: var(--border-radius);
}


/* ==========================================================================
   3) HAMBURGER MENU (mobile)
   ========================================================================== */

/*
  Le bouton burger est caché en desktop.
  Il apparaît uniquement en mobile via media query (voir en bas).
*/
.burger {
    display: none;                 /* visible uniquement en mobile */
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(22,35,61,0.35);
    border-radius: var(--border-radius);
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    margin-left: auto;             /* pousse le bouton à droite si besoin */
    backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(59,130,246,0.15);
}

/* Les 3 barres du burger */
.burger-bar {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px 0;
    border-radius: 3px;
    background: #bbe0f7;
    box-shadow: 0 0 6px rgba(96,165,250,0.55);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/*
  Quand le menu est ouvert, on ajoute la classe .nav-open sur #header (via JS).
  On anime le burger en "X" (plus pro).
*/
.header.nav-open .burger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.header.nav-open .burger-bar:nth-child(2) {
    opacity: 0;
}

.header.nav-open .burger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   4) FOOTER (néon)
   ========================================================================== */

.footer {
    background-color: rgba(22,35,61,0.95);
    color: #bbe0f7;
    padding: 1.5rem 2rem;
    font-size: 0.95rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/*
  Footer container en flex :
  on autorise le wrap pour éviter les comportements étranges sur textes longs.
*/
.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

/* Texte du footer (Remplacement de .footer p par .footer .footer-text) */
.footer .footer-text {
    margin: 0;
    color: #bbe0f7;
    font-weight: 600;
    text-shadow: 0 0 2px #3b82f6, 0 0 3px #60a5fa;
    transition: text-shadow 0.3s;

    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.45;
}

/* Liens footer (Mentions / A propos / etc.) */
.footer-link {
    color: #d1e8ff;
    text-decoration: none;
    font-weight: 500;
    text-shadow: 0 0 1px #3b82f6, 0 0 2px #60a5fa;
    transition: color 0.3s, text-shadow 0.3s, transform 0.3s;
    display: inline-flex;
    align-items: center;
    margin: 0 0.25rem;
}

@media (hover: hover) {
    .footer-link:hover {
        color: var(--secondary-color);
        text-shadow: 0 0 6px var(--secondary-color), 0 0 12px var(--tertiary-color);
        transform: scale(1.05);
    }
}

/* Icônes footer */
.footer-icon {
    margin-right: 0.5rem;
    display: inline-block;
    font-size: 1.3em;
    animation: neonFooter 3s infinite alternate ease-in-out;
    transition: transform 0.3s;
}

@media (hover: hover) {
    .footer-icon:hover {
        transform: scale(1.2);
    }
}

/*
  FIX : <address> doit ressembler au texte du footer (pas italique, pas différent).
  + tel/mail cliquables mais aspect identique au texte (pro, stable).
*/
.footer address {
    display: inline;
    font-style: normal;
    color: inherit;
    font-weight: inherit;
    text-shadow: inherit;
}

/* Tel/mail (liens) -> rendu comme du texte */
.footer address a.footer-link {
    color: inherit;
    font-weight: inherit;
    text-shadow: inherit;
    display: inline;
    margin: 0;
    transform: none;
}

@media (hover: hover) {
    .footer address a.footer-link:hover {
        color: var(--secondary-color);
        text-shadow: 0 0 6px var(--secondary-color), 0 0 12px var(--tertiary-color);
        transform: none;
    }
}


/* ==========================================================================
   5) HEADER REDUIT AU SCROLL (classe ajoutée en JS)
   ========================================================================== */

.header.scrolled {
    padding: 0.4rem 2rem;
}

.header.scrolled .logo {
    height: 5.5rem;
    transition: height 0.3s ease, transform 0.3s ease;
}

.header.scrolled nav .ligneMenu {
    align-items: center;
}

.header.scrolled .menu a {
    font-size: 1.3rem;
    padding: 0.4rem 0.8rem;
}


/* ==========================================================================
   6) RESPONSIVE (MEDIA QUERIES EN BAS)
   ========================================================================== */

/* AJOUT PRO : Harmonisation stricte du point de rupture à 992px au lieu de 1024px */
@media (max-width: 992px) {
    .header {
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 1rem 1.5rem;
    }

    .header .logo {
        height: 4.5rem;
        margin-left: 1.5rem;
    }

    nav .ligneMenu {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    /* Topbar un peu plus compacte */
    .accueil {
        justify-content: space-evenly;
        font-size: 0.85rem;
        gap: 1rem;
        padding: 0.5rem 1rem;
    }

    .accueil2 img {
        width: 1.75rem;
        height: 1.75rem;
    }

    /*
      HEADER mobile :
      - On remet "sticky" pour que ça vous suive au scroll !
    */
    .header {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.75rem 1rem;
        position: sticky; /* <-- La correction est ici */
        top: 0;
        z-index: 900; /* AJOUT PRO : Alignement du z-index mobile */
    }

    /* Burger positionné à droite */
    .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 1rem;
        margin-left: 0;
    }

    /* Logo parfaitement centré */
    .header .logo {
        height: 4rem;
        margin: 0 auto;
    }

    /*
      Correction du scroll mobile :
      Évite que le logo devienne géant au scroll sur le téléphone
    */
    .header.scrolled {
        padding: 0.4rem 1rem;
    }
    .header.scrolled .logo {
        height: 3.5rem; /* Plus petit pour le mobile au scroll */
    }

    /*
      NAV mobile :
      - on le replie par défaut (menu fermé)
      - on l'ouvre quand #header a la classe .nav-open
    */
    #nav {
        width: 100%;
        max-height: 0;            /* fermé */
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-4px);
        transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
    }

    /* Menu ouvert */
    .header.nav-open #nav {
        max-height: 500px;        /* suffisamment grand pour 3 liens (ajuste si besoin) */
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Colonne en mobile */
    nav .ligneMenu {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        align-items: stretch;
    }

    /* Liens menu full width pour “pro” */
    .menu a {
        display: block;
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .accueil {
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    .accueil2 img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .header .logo {
        height: 3.5rem;
    }

    /* Footer plus compact */
    .footer {
        font-size: 0.85rem;
        padding: 1rem;
    }

    .footer-icon {
        font-size: 1.1em;
    }

    /* AJOUT PRO : Organisation du footer en blocs sur petit écran pour une lisibilité parfaite */
    .footer-sep {
        display: none;
    }
    
    /* Correction : on cible .footer-text au lieu de p */
    .footer address, 
    .footer-link, 
    .footer-container .footer-text > span[itemprop="name"] {
        display: block !important;
        margin: 0.8rem 0;
    }
}