/* HEADER / NAVIGATION */
/* nav garde la couleur de fond sur toute la largeur ; .nav-interieur recentre le
   contenu avec une marge externe plus généreuse sur les grands écrans. */
nav {
    background: var(--couleur-primaire);
    position: relative;
}

.nav-interieur {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Bouton "Créer son site" : bien visible (fond blanc contrastant avec le bleu de la
   nav). Volontairement dans le flux flex plutôt qu'en position absolue centrée :
   centré en absolu, il chevauchait les liens du menu dès que celui-ci s'élargissait
   (tablette / écrans intermédiaires). Le space-between de .nav-interieur le place
   naturellement entre le logo et le menu, sans recouvrement possible. */
/* margin auto de chaque côté : l'espace libre se répartit équitablement entre le
   logo et le menu, ce qui centre visuellement le bouton sans le sortir du flux
   (le centrage absolu recouvrait les liens sur écrans intermédiaires). */
.nav-cta {
    flex-shrink: 0;
    margin: 0 auto;
    padding: 10px 22px;
    background: var(--couleur-blanc);
    color: var(--couleur-noir);
    text-decoration: none;
    font-weight: 700;
    border-radius: 30px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.nav-cta:hover {
    background: var(--couleur-primaire-fonce);
}

/* Liens du menu de droite : discrets par défaut, un simple soulignement animé
   (qui se déploie de gauche à droite) apparaît au survol. */
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 12px;
    width: 100%;
    height: 2px;
    background: var(--couleur-noir);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

nav ul li a:hover::after {
    transform: scaleX(1);
}

/* Bouton hamburger : masqué par défaut, affiché uniquement en dessous du breakpoint mobile */
.menu-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 20;
}

.menu-btn-icone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 20px;
    box-sizing: border-box;
}

/* Les 3 barres ont une hauteur fixe et ne doivent jamais se compresser (flex-shrink:0) :
   sans ça, la dernière barre pouvait apparaître plus fine que les deux autres. */
.menu-btn-icone span {
    display: block;
    flex-shrink: 0;
    height: 3px;
    width: 100%;
    background: var(--couleur-noir);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-btn-texte {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--couleur-noir);
}

.menu-btn.open .menu-btn-icone span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-btn.open .menu-btn-icone span:nth-child(2) {
    opacity: 0;
}

.menu-btn.open .menu-btn-icone span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

nav .logo {
    color: var(--couleur-noir);
    padding: 8px 0;
}

nav .logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.logo-icone {
    display: block;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.logo-textes {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* Traitement un peu futuriste pour le nom de marque : lettres espacées façon
   affichage "tech". Couleur pleine (et non un dégradé "clippé" dans le texte,
   peu fiable selon les navigateurs et rendant le nom illisible chez certains) : un
   bleu franc de la charte reste net et bien contrasté dans toutes les situations. */
.logo-nom {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 2px;
    color: black;
}

.logo-slogan {
    font-size: 13px;
    font-weight: 400;
    color: var(--couleur-noir);
    opacity: 0.65;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .logo-slogan {
        display: none;
    }

    .logo-icone {
        width: 38px;
        height: 38px;
    }
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 25px;
}

nav ul li a, nav a {
    position: relative;
    color: var(--couleur-noir);
    text-decoration: none;
    font-weight: 500;
    padding: 15px 0;
    display: block;
}

/* Menu déroulant : déclenché dès 1150px car en dessous, les 5 liens du menu + le
   logo + le bouton "Créer son site" ne tiennent plus confortablement sur une ligne. */
@media (max-width: 1150px) {
    /* Marge intérieure intermédiaire sur tablette : 20px collait le logo et le bouton
       MENU aux bords de l'écran ; 40px les décolle sans consommer autant qu'en desktop. */
    .nav-interieur {
        padding: 0 40px;
    }

    .menu-btn {
        display: flex;
    }

    .nav-cta {
        margin: 0 auto;
        padding: 8px 14px;
        font-size: 14px;
        border-radius: 20px;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--couleur-primaire);
        padding: 5px 30px 15px;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
        z-index: 10;
    }

    nav ul.ouvert {
        display: flex;
    }

    nav ul li {
        margin-left: 0;
    }
}

/* Le CTA "Créer son site" est dupliqué dans le menu déroulant (voir header.php) :
   masqué par défaut, il ne prend le relais que sur les très petits écrans, où le
   bouton de la barre serrait le logo et le bouton MENU. */
.menu-item-cta {
    display: none;
}

@media (max-width: 480px) {
    /* Sur mobile, les marges reviennent à 20px : à cette largeur, 40px mangeraient
       trop de place utile. */
    .nav-interieur {
        padding: 0 20px;
    }

    .nav-cta {
        display: none;
    }

    /* order:-1 place "Créer son site" en tête du menu déroulant (avant Accueil),
       sans dépendre de sa position dans le HTML. */
    .menu-item-cta {
        display: block;
        order: -1;
    }

    .menu-item-cta a {
        display: block;
        background: var(--couleur-blanc);
        border-radius: 20px;
        padding: 10px 16px;
        margin: 6px 0;
        text-align: center;
        font-weight: 700;
    }
}

/* FOOTER */
footer {
    background: var(--couleur-primaire);
    color: var(--couleur-noir);
    text-align: center;
    padding: 65px 20px 35px;
    font-size: 14px;
}

/* Bandeau newsletter mis en avant, au-dessus du reste du footer */
.footer-newsletter-bandeau {
    max-width: 700px;
    margin: 0 auto 35px;
    padding: 35px 30px;
    background: var(--couleur-blanc);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
}

.footer-newsletter-bandeau h3 {
    margin: 0 0 10px;
    font-size: 26px;
}

.footer-newsletter-bandeau > p {
    margin: 0 0 20px;
    color: var(--couleur-texte);
}

.footer-haut {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 70px;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* Colonne : les réseaux sociaux se placent sous le logo, pas à côté. */
.footer-marque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-reseaux {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pastille blanche : les logos officiels sont en couleur, ils ressortent mal
   directement sur le bleu de la marque. */
.footer-reseaux a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: var(--couleur-blanc);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-reseaux a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.footer-reseaux img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.footer-marque .logo-icone {
    display: block;
    border-radius: 10px;
    flex-shrink: 0;
}

.footer-liens-groupes {
    display: flex;
    gap: 60px;
}

.footer-liens-groupe {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-liens-groupe a {
    margin: 0;
}

.footer-liens-titre {
    margin: 0 0 6px;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.footer-copyright {
    margin: 25px 0 0;
    font-size: 13px;
    opacity: 0.7;
}

.footer-newsletter-champs {
    display: flex;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto;
}

.footer-newsletter-champs input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 15px;
}

.footer-newsletter-champs .bouton-principal {
    margin: 0;
    padding: 12px 20px;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .footer-newsletter-bandeau {
        padding: 28px 20px;
    }

    .footer-newsletter-bandeau h3 {
        font-size: 21px;
    }

    .footer-newsletter-champs {
        flex-direction: column;
    }

    .footer-haut {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-liens-groupes {
        gap: 30px;
    }

    .footer-liens-groupe {
        align-items: center;
    }
}

footer a {
    color: var(--couleur-noir);
    margin: 0 10px;
    text-decoration: none;
}

footer a:hover {
    color: var(--couleur-texte);
    text-decoration: underline;
}

/* ===== BANDEAU COOKIES ===== */
.bandeau-cookies {
    display: none;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 700px;
    margin: 0 auto;
    background: var(--couleur-blanc);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    padding: 20px 24px;
    z-index: 2000;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.bandeau-cookies.visible {
    display: flex;
}

.bandeau-cookies p {
    flex: 1 1 320px;
    margin: 0;
    font-size: 14px;
    color: #444;
}

.bandeau-cookies-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bandeau-cookies-actions .bouton-principal {
    margin-top: 0;
}

@media (max-width: 600px) {
    .bandeau-cookies {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 16px 18px;
    }
}

/* Sélecteur de priorité (1 à 5) : formulaire de contact (contact.php) et détail d'un
   ticket (tickets.php). */
.priorite-selecteur {
    display: flex;
    gap: 8px;
}

.priorite-bouton {
    position: relative;
    margin: 0 !important;
}

.priorite-bouton input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.priorite-bouton span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    font-weight: 700;
    color: #777;
    transition: all 0.15s ease;
}

.priorite-bouton input:checked + span {
    border-color: var(--couleur-primaire);
    background: var(--couleur-primaire);
    color: var(--couleur-blanc);
}

.priorite-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--couleur-blanc);
}

.priorite-badge-1, .priorite-badge-2 { background: var(--couleur-succes); }
.priorite-badge-3 { background: #f0a500; }
.priorite-badge-4, .priorite-badge-5 { background: var(--couleur-erreur); }