:root {
    --primary-blue: #00d2ff;
    --dark-blue: #0a192f;
    --deep-bg: #020c1b;
    --text-white: #e6f1ff;
    --accent-glow: rgba(0, 210, 255, 0.3);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--deep-bg);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Empêche la page de défiler derrière le menu mobile plein écran quand il
   est ouvert (voir assets/js/script.js -> navSlide). */
body.nav-open-lock {
    overflow: hidden;
}

/* Texte indicatif grisé dans les champs de formulaire (partout sur le site) */
input::placeholder,
textarea::placeholder {
    color: rgba(230, 241, 255, 0.4);
    opacity: 1;
}

h1, h2, h3, .logo {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}

/* --- Navigation --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: rgba(2, 12, 27, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 210, 255, 0.1);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
}

.logo span {
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--primary-blue);
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

/* Le <li> qui regroupe le bouton "devis", le séparateur et les icônes
   profil/administration mélange des éléments de hauteurs très différentes
   (bouton avec padding, icônes 20x20...). En flex, on garantit qu'ils sont
   tous centrés verticalement les uns par rapport aux autres, au lieu de
   dépendre de l'alignement "baseline" par défaut du texte qui décalait les
   icônes vers le bas. */
.nav-links li {
    display: flex;
    align-items: center;
}

/* Le burger ne doit exister (et occuper de la place) que sur mobile :
   sans cette règle, il restait un élément flex fantôme sur desktop qui
   empêchait "Obtenir un devis gratuit" / les icônes d'être vraiment
   collés à droite de la navbar. */
.burger {
    display: none;
}

.nav-links li a {
    text-decoration: none;
    color: var(--text-white);
    margin: 0 20px;
    font-size: 0.9rem;
    transition: 0.3s;
}

.nav-links li a:hover {
    color: var(--primary-blue);
}

.cta-btn {
    background: transparent;
    border: 2px solid var(--primary-blue);
    padding: 10px 20px !important;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--accent-glow);
}

.cta-btn:hover {
    background: var(--primary-blue);
    color: var(--deep-bg) !important;
}

/* Séparateur entre "Obtenir un devis gratuit" et le lien administration */
.nav-separator {
    margin: 0 10px;
    color: var(--text-white);
    opacity: 0.4;
}

/* Icônes de navigation en bleu néon (profil, administration...) */
.icon-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-blue);
    text-decoration: none;
    transition: 0.3s;
}

.icon-link svg {
    display: block;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 4px var(--accent-glow));
    transition: transform 0.3s;
}

/* Texte "Mon profil" / "Administration" : masqué sur ordinateur (l'icône
   suffit, avec l'attribut title au survol), affiché à la place de l'icône
   sur mobile où une icône seule dans un menu plein écran est peu explicite. */
.icon-link-text {
    display: none;
}

.admin-link:hover svg {
    transform: scale(1.15) rotate(20deg);
}

.profile-link:hover svg {
    transform: scale(1.15);
}

/* Espace entre deux icônes de nav placées côte à côte (ex: admin + profil) */
.icon-link + .icon-link {
    margin-left: 12px;
}

/* --- Barre de recherche (page administration) --- */
.admin-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.admin-search-form input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 12px 15px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: white;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
}

.admin-search-btn {
    background: transparent;
    border: 2px solid var(--primary-blue);
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--accent-glow);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
}

.admin-search-btn:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
}

.admin-search-clear {
    color: var(--text-white);
    opacity: 0.7;
    font-size: 0.9rem;
    text-decoration: underline;
    transition: 0.3s;
}

.admin-search-clear:hover {
    opacity: 1;
}

/* Sous-navigation entre les pages de l'administration
   ("Demandes & utilisateurs" / "Réalisations"). */
.admin-subnav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    /* padding-top calé sur .services pour dégager la navbar, qui est en
       position fixed et recouvrirait sinon le haut de ces boutons. */
    padding: 100px 10% 0;
}

.admin-subnav a {
    padding: 14px 30px;
    border-radius: 8px;
    border: 2px solid var(--primary-blue);
    box-shadow: 0 0 10px var(--accent-glow);
    color: var(--text-white);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    transition: 0.3s;
}

.admin-subnav a:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
}

.admin-subnav a.active {
    background: rgba(0, 210, 255, 0.15);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* La section qui suit directement le sous-menu n'a pas besoin de son propre
   padding-top de 100px (déjà dégagé par le sous-menu) : on évite un double
   espacement. */
.admin-subnav + .services {
    padding-top: 45px;
}

/* Vignette photo dans le tableau "Réalisations publiées" */
.admin-thumb-wrap {
    position: relative;
    width: 70px;
}

.admin-thumb {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Pastille "N photos" sous la vignette, quand une réalisation a plusieurs photos */
.admin-thumb-count {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    text-align: center;
    opacity: 0.7;
    white-space: nowrap;
}

/* Regroupe plusieurs boutons d'action dans une même cellule de tableau
   (ex : "Annuler" + "Supprimer" sur une ligne de rendez-vous). */
.admin-table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bouton "Supprimer" (variante rouge du bouton admin standard) */
.admin-btn-danger {
    border-color: #ff4d5e;
    box-shadow: 0 0 10px rgba(255, 77, 94, 0.3);
}

.admin-btn-danger:hover {
    background: #ff4d5e;
    color: #ffffff;
}

/* Bouton "Terminé" (variante verte du bouton admin standard), proposé sur
   un rendez-vous confirmé dont la date est passée. */
.admin-btn-success {
    border-color: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.admin-btn-success:hover {
    background: #2ecc71;
    color: #ffffff;
}

/* Note "Terminé ?" affichée dans la colonne Statut d'un rendez-vous
   confirmé dont la date est révolue, en attente de clôture par l'admin. */
.rdv-statut-pastdue {
    color: #ffb100;
    font-style: italic;
}

/* Sous-titre "Particuliers" / "Professionnels" à l'intérieur d'une section admin */
.admin-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-blue);
    margin: 10px 0 15px;
}

/* --- Tableaux de l'administration (demandes de contact, utilisateurs) --- */
.admin-table-wrap {
    overflow-x: auto;
    margin-bottom: 40px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 10px;
}

.admin-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: var(--text-white);
}

.admin-table thead tr {
    text-align: left;
    background: rgba(0, 210, 255, 0.06);
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
}

.admin-table th {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--primary-blue);
    white-space: nowrap;
}

.admin-table th,
.admin-table td {
    padding: 16px 14px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
}

.admin-table tbody tr {
    border-bottom: 1px solid rgba(0, 210, 255, 0.08);
    transition: background 0.2s;
}

.admin-table tbody tr:last-child {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: rgba(0, 210, 255, 0.045);
}

.admin-table tbody tr.is-traitee {
    opacity: 0.5;
}

.admin-table td.nowrap {
    white-space: nowrap;
}

/* Nom/Prénom : sur une seule ligne, tronqués avec "..." si trop longs
   (survoler la cellule affiche la valeur complète). Évite qu'une entrée
   inhabituellement longue n'étire toute la ligne et casse la lecture. */
.admin-table td.ellipsis {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Colonne "Nom / Prénom" empilée (demandes de contact) : nom au-dessus,
   prénom en dessous, dans une même cellule. */
.admin-cell-main,
.admin-cell-sub {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-cell-main {
    font-weight: 600;
}

.admin-cell-sub {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Permet de réutiliser le style "cta-btn" sur un <button> (ex: boutons de formulaire) */
button.cta-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: normal;
    color: #ffffff !important;
    cursor: pointer;
    display: block;
    margin: 10px auto 0;
}

/* --- Hero --- */
.hero {
    height: 80vh;
    min-height: 600px;
    /* background: url('https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; */
    background: url('../images/207rcphoto1.JPG') 53% 60%/cover no-repeat;
    display: flex;
    align-items: center;
    padding: 0 10%;
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Voile plus léger et plus court sur la gauche (au lieu d'un aplat plein
       jusqu'à 30%) pour laisser voir davantage la voiture. */
    background: linear-gradient(90deg, rgba(2, 12, 27, 0.55) 0%, transparent 70%);
    z-index: 1;
}

/* Filtre sombre/transparent uniforme sur toute la photo, pour réduire un peu
   la luminosité et la saturation des couleurs (en plus du dégradé ci-dessus). */
.hero-dim {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.85);
}

.hero-content span {
    color: var(--primary-blue);
}

.hero-content p {
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.85);
}

.btn-primary {
    background: var(--primary-blue);
    color: var(--deep-bg);
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-right: 20px;
    display: inline-block;
    text-align: center;
}

.btn-secondary {
    border: 1px solid var(--text-white);
    color: var(--text-white);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}

/* Grille 2 colonnes : "Nos services" / "Nos réalisations" occupent chacun
   une colonne (largeur naturelle), et le bouton contact ci-dessous s'étend
   sur les deux colonnes -> sa largeur correspond exactement à celle des
   deux boutons du dessus réunis. */
.hero-btns {
    display: grid;
    grid-template-columns: auto auto;
    gap: 15px 20px;
}

.hero-btns .btn-primary {
    margin-right: 0;
}

.hero-contact-btn {
    grid-column: 1 / -1;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    background: var(--primary-blue) !important;
    color: var(--deep-bg) !important;
    border: none !important;
    padding: 16px 20px !important;
    box-shadow: 0 0 15px var(--accent-glow);
}

.hero-contact-btn:hover {
    background: transparent !important;
    color: var(--primary-blue) !important;
    border: 2px solid var(--primary-blue) !important;
}

/* --- Services --- */
.services {
    padding: 100px 10%;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    position: relative;
}

.section-title::after {
    content: '';
    width: 80px;
    height: 4px;
    background: var(--primary-blue);
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.services-grid + .services-grid {
    margin-top: 30px;
}

/* Ligne 1 : 2 prestations disponibles / Ligne 2 : 3 prestations à venir */
.services-grid-2 {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services-grid-3 {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.service-card {
    background: var(--dark-blue);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    transition: 0.4s;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.service-card-soon {
    position: relative;
    opacity: 0.92;
}

/* Badge "Bientôt disponible" néon flottant, effet verre + halo pulsé
   (option 2 validée parmi 3 previews). */
.service-card-soon .soon-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 25, 47, 0.92);
    border: 1.5px solid var(--primary-blue);
    border-radius: 30px;
    padding: 8px 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--primary-blue);
    white-space: nowrap;
    animation: soonPulse 2.4s ease-in-out infinite;
}

@keyframes soonPulse {
    0%, 100% {
        box-shadow: 0 0 10px var(--accent-glow), inset 0 0 8px rgba(0, 210, 255, 0.08);
    }
    50% {
        box-shadow: 0 0 22px var(--primary-blue), inset 0 0 14px rgba(0, 210, 255, 0.2);
    }
}

.service-card .icon {
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    color: var(--primary-blue);
}

.service-card .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* --- Boutique (boutique.php) : catalogue de stickers --- */
.shop-section {
    padding: 100px 10%;
    text-align: center;
}

.shop-intro {
    max-width: 700px;
    margin: 0 auto 60px;
    opacity: 0.85;
}

.shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.shop-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--accent-glow);
    margin: 15px 0 20px;
}

.shop-cta-btn {
    display: inline-block;
}

.shop-note {
    max-width: 600px;
    margin: 60px auto 0;
    opacity: 0.7;
    font-size: 0.95rem;
}

/* --- Galerie Améliorée --- */
.gallery {
    padding: 100px 10%;
    background: var(--deep-bg);
}

/* Filtres */
.filter-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--text-white);
    padding: 10px 25px;
    cursor: pointer;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    transition: 0.3s;
    border-radius: 5px;
}

.filter-btn.active, .filter-btn:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Overlay Effet */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9), transparent);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: 0.4s ease;
}

.overlay-text h4 {
    color: var(--primary-blue);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.overlay-text p {
    font-size: 0.85rem;
    color: white;
}

/* Hover effects */
.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Lightbox Style */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 12, 27, 0.95);
    justify-content: center;
    align-items: center;
}

/* .lightbox-stage se dimensionne exactement sur la photo affichée
   (#lightbox-img) : les deux calques de la pile (photos suivantes qui
   dépassent derrière), .lightbox-stack-photo, viennent alors se positionner
   en absolu par rapport à cette même taille (voir assets/js/script.js). */
.lightbox-stage {
    position: relative;
    display: flex;
    max-width: 80vw;
    max-height: 80vh;
}

.lightbox-stage img {
    display: block;
    max-width: 80vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    border: 2px solid var(--primary-blue);
    box-shadow: 0 0 30px var(--accent-glow);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Avec exactement 2 photos : la photo affichée part elle-même de travers
   vers la gauche, la seconde photo dépasse derrière, vers la droite. */
.lightbox-stage img.lightbox-img-tilt {
    transform: rotate(-6deg);
}

/* Effet "jeu de cartes" dans la vue agrandie : une ou deux photos
   supplémentaires qui dépassent légèrement derrière la photo affichée, pour
   indiquer qu'il y en a d'autres (au-delà de 2 photos additionnelles, seules
   les 2 suivantes dans l'ordre sont affichées en pile). */
.lightbox-stack-photo {
    display: none;
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    filter: brightness(0.72);
    z-index: 1;
    pointer-events: none;
}

.lightbox-stack-photo.is-visible {
    display: block;
}

.lightbox-stack-left {
    transform: rotate(-7deg) translateX(-14px);
}

.lightbox-stack-right {
    transform: rotate(7deg) translateX(14px);
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

/* Boutons précédent/suivant, affichés uniquement quand une réalisation a
   plusieurs photos (voir assets/js/script.js). */
.lightbox-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--primary-blue);
    font-size: 4rem;
    line-height: 1;
    text-shadow: 0 0 20px var(--accent-glow), 0 0 45px var(--accent-glow);
    cursor: pointer;
    transition: 0.3s;
}

.lightbox-nav:hover {
    color: #ffffff;
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

@media (max-width: 700px) {
    .lightbox-nav {
        font-size: 2.6rem;
    }

    .lightbox-prev {
        left: 12px;
    }

    .lightbox-next {
        right: 12px;
    }
}

/* Pastille "N photos" sur une carte de la galerie ayant plusieurs photos */
.gallery-photo-count {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(2, 12, 27, 0.7);
    border: 1px solid rgba(0, 210, 255, 0.4);
    color: var(--text-white);
    font-size: 0.75rem;
    z-index: 1;
}

/* Popup "connexion requise" (réutilise l'overlay .lightbox) */
.auth-modal-box {
    position: relative;
    background: var(--dark-blue);
    border: 2px solid var(--primary-blue);
    border-radius: 15px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 30px var(--accent-glow);
}

.auth-modal-box h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary-blue);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.auth-modal-box p {
    margin-bottom: 25px;
}

.auth-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-modal-actions .cta-btn {
    display: block;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--text-white);
    font-size: 28px;
    cursor: pointer;
}

/* Popup "Voir le message" (admin) : réutilise l'overlay .lightbox */
.message-modal-box {
    position: relative;
    background: var(--dark-blue);
    border: 2px solid var(--primary-blue);
    border-radius: 15px;
    padding: 40px;
    max-width: 560px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
    box-shadow: 0 0 30px var(--accent-glow);
}

.message-modal-box h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary-blue);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-right: 20px;
}

.message-modal-meta {
    opacity: 0.7;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.message-modal-body {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Popup "Voir le profil" (admin) : fiche compte façon CRM, réutilise
   .message-modal-box comme conteneur. */
.profile-modal-box {
    max-width: 620px;
}

.profile-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    margin-top: 15px;
}

.profile-field-wide {
    grid-column: 1 / -1;
}

.profile-field-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.profile-field-value {
    display: block;
    font-size: 1rem;
    word-break: break-word;
}

@media (max-width: 600px) {
    .profile-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* Petit lien "Voir sur Google Maps" sous l'adresse postale, dans la fiche
   profil (façon CRM) de admin/dashboard.php. */
.profile-maps-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 12px;
    border: 1px solid var(--primary-blue);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--primary-blue);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.profile-maps-btn:hover {
    background: var(--primary-blue);
    color: var(--dark-blue);
}

.profile-maps-btn svg {
    width: 15px;
    height: 15px;
}

/* Pastille de statut "Actif" / "Suspendu" (tableaux utilisateurs + fiche profil) */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-badge-actif {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.status-badge-suspendu {
    background: rgba(255, 77, 94, 0.15);
    color: #ff4d5e;
    border: 1px solid rgba(255, 77, 94, 0.4);
}

.status-badge-beta {
    background: rgba(0, 210, 255, 0.15);
    color: var(--primary-blue);
    border: 1px solid rgba(0, 210, 255, 0.4);
    margin-left: 6px;
}

/* Pied de la fiche profil (admin/dashboard.php) : boutons de suspension et
   d'accès bêta */
.profile-modal-footer {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(230, 241, 255, 0.15);
}

.profile-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-modal-footer-note {
    opacity: 0.6;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 12px;
}


/* --- Contact --- */
.contact {
    padding: 100px 10%;
    background: var(--dark-blue);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: white;
    border-radius: 5px;
}

.contact-form textarea { height: 150px; }

/* Nom de famille : toujours affiché/saisi en majuscules (voir script.js) */
.uppercase-field { text-transform: uppercase; }

/* Rangée de champs côte à côte (ex : code postal + ville) */
.contact-form .form-row {
    display: flex;
    gap: 15px;
}

.contact-form .form-row input {
    width: 100%;
    flex: 1;
    min-width: 0; /* évite le débordement des input dans une rangée flex */
}

/* --- Footer --- */
footer {
    padding: 50px;
    text-align: center;
    border-top: 1px solid rgba(0, 210, 255, 0.1);
}

/* Liens vers les pages légales, affichés au-dessus du copyright */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 18px;
}

.footer-legal a {
    color: var(--text-white);
    opacity: 0.65;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    transition: 0.3s;
}

.footer-legal a:hover {
    opacity: 1;
    color: var(--primary-blue);
}

/* --- Pages légales (mentions légales, CGU/CGV, confidentialité, cookies) --- */
.legal-page {
    padding: 100px 10% 80px;
    max-width: 880px;
    margin: 0 auto;
}

.legal-updated {
    text-align: center;
    opacity: 0.55;
    font-size: 0.85rem;
    margin-top: -35px;
    margin-bottom: 50px;
}

.legal-content h2 {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary-blue);
    font-size: 1.2rem;
    margin: 40px 0 15px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin: 22px 0 10px;
    color: var(--text-white);
}

.legal-content p {
    margin-bottom: 15px;
    line-height: 1.75;
    color: var(--text-white);
    opacity: 0.9;
}

.legal-content ul {
    margin: 0 0 15px 22px;
    line-height: 1.75;
    opacity: 0.9;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-content a {
    color: var(--primary-blue);
}

/* Signale clairement les informations à compléter (statut juridique, SIRET...)
   avant la mise en ligne définitive des pages légales. */
.legal-placeholder {
    color: #ffcc66;
    font-style: italic;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 25px;
}

.legal-table th,
.legal-table td {
    border: 1px solid rgba(0, 210, 255, 0.15);
    padding: 12px 14px;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.5;
}

.legal-table th {
    background: rgba(0, 210, 255, 0.06);
    color: var(--primary-blue);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Liens croisés vers les autres pages légales, en bas de chaque page */
.legal-crosslinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 210, 255, 0.1);
}

.legal-crosslinks a {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}

.legal-crosslinks a:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* --- Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .contact-container { grid-template-columns: 1fr; }
}

a{
    color: #00d2ff;
    text-decoration: none;
}

/* ==========================================
   RESPONSIVE DESIGN (MOBILES & TABLETTES)
   ========================================== */

@media screen and (max-width: 1024px) {
    .hero-content h1 { font-size: 3rem; }
    .services, .gallery, .contact { padding: 80px 5%; }
}

/* Navbar : bascule vers le menu burger en dessous de 1300px de large
   (seuil plus large que le breakpoint mobile général à 768px, pour laisser
   de la marge au groupe de droite Connexion/Inscription/devis/icônes). */
@media screen and (max-width: 1300px) {
    /* Navbar Mobile */
    .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0;
        /* Fond totalement opaque : avec une transparence même légère, la
           photo très claire du hero restait visible en transparence derrière
           le menu et nuisait à la lisibilité des liens. */
        background: var(--deep-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
        z-index: 1000;
    }

    .nav-links li {
        margin: 25px 0;
        opacity: 0;
        /* Le <li> qui regroupe bouton de devis + séparateur + icônes passe
           en colonne : chaque élément (devis, mon profil, administration)
           forme sa propre ligne bien lisible, comme le reste du menu. */
        flex-direction: column;
        gap: 15px;
    }

    .nav-links a { font-size: 1.5rem; }

    /* Sur mobile, une icône seule n'est pas assez explicite dans un menu
       plein écran : on masque l'icône et on affiche à la place un texte
       ("Mon profil" / "Administration"), et on retire le séparateur "|"
       qui n'a plus lieu d'être une fois les éléments empilés. */
    .nav-separator {
        display: none;
    }

    .icon-link svg {
        display: none;
    }

    .icon-link-text {
        display: inline;
    }

    /* Le compteur de non-lus est déjà répété dans le texte ("Messagerie (3)")
       une fois l'icône masquée : la pastille flottante devient inutile. */
    .icon-badge {
        display: none;
    }

    /* Burger Menu Icon */
    .burger {
        display: block;
        cursor: pointer;
        z-index: 1100;
        /* Zone cliquable agrandie (~44px, recommandation tactile) sans changer
           la taille visuelle des barres : padding + marge négative égale. */
        padding: 10px;
        margin: -10px;
        border-radius: 8px;
    }

    .burger:focus-visible {
        outline: 2px solid var(--primary-blue);
        outline-offset: 2px;
    }

    .burger div {
        width: 25px;
        height: 3px;
        background-color: var(--primary-blue);
        margin: 5px;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    /* Animation Burger (croix) */
    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

    .nav-active { transform: translateX(0%); }
}

@media screen and (max-width: 768px) {

    /* Hero Section */
    /* Sur mobile, on abandonne la hauteur en vh + centrage vertical (utilisés
       sur desktop) : selon la hauteur d'écran réellement visible (barre
       d'adresse, etc.), ce calcul est imprévisible et écrase soit le titre
       contre la navbar (fixed, donc hors du flux), soit le bouton "Nous
       contacter" contre le bas de la section, sans marge. À la place, la
       hauteur s'adapte au contenu, avec une marge fixe en haut (pour la
       navbar) et en bas (pour ne pas coller le dernier bouton au bord). */
    .hero {
        height: auto;
        min-height: 0;
        padding: 120px 10% 60px;
    }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-btns {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .btn-primary, .btn-secondary { width: 100%; text-align: center; }

    /* Sections Grilles (Passage en 1 colonne) */
    .services-grid, .gallery-grid {
        grid-template-columns: 1fr;
    }

    .filter-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-btn {
        flex: 1 1 40%; /* Deux boutons par ligne sur mobile */
        padding: 8px 10px;
        font-size: 0.7rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .section-title { font-size: 1.8rem; }
}

/* Animation des liens du menu */
@keyframes navLinkFade {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0px); }
}

.nav-active li {
    animation: navLinkFade 0.5s ease forwards 0.3s;
}

/* ==========================================
   AUTHENTIFICATION (Connexion / Inscription / Espace client)
   ========================================== */

.auth-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 5% 100px;
}

.auth-card {
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 15px;
    padding: 50px;
    width: 100%;
    max-width: 480px;
}

.auth-card--wide {
    max-width: 600px;
}

/* Étape "particulier / professionnel" et carte élargie pour le formulaire
   pro (2 colonnes : infos personnelles + infos société) */
.account-type-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.account-type-btn {
    flex: 1 1 200px;
    background: var(--deep-bg);
    border: 2px solid var(--primary-blue);
    border-radius: 10px;
    padding: 30px 20px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 15px var(--accent-glow);
    transition: 0.25s;
}

.account-type-btn:hover,
.account-type-btn:focus-visible {
    background: rgba(0, 210, 255, 0.06);
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-2px);
}

.account-type-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--primary-blue);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 20px;
    cursor: pointer;
}

.account-type-back:hover {
    text-decoration: underline;
}

.auth-card--business {
    max-width: 820px;
}

.registration-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}

.registration-columns.has-society {
    grid-template-columns: 1.4fr 1fr;
}

/* Chaque bloc du formulaire (infos personnelles, infos société) a son
   propre encadré néon bleu, comme les popups du site (.auth-modal-box,
   .message-modal-box). */
.registration-main,
.registration-society {
    background: rgba(0, 210, 255, 0.03);
    border: 2px solid var(--primary-blue);
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 0 20px var(--accent-glow);
}

.registration-society {
    display: none;
}

.registration-society h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 18px;
}

@media screen and (max-width: 700px) {
    .registration-columns.has-society {
        grid-template-columns: 1fr;
    }
}

/* Empile plusieurs .auth-card (ex: page "Mon compte" avec profil + mot de passe) */
.auth-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.form-alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.form-alert ul {
    margin: 0;
    padding-left: 20px;
}

.form-alert-error {
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.4);
    color: #ff9d9d;
}

.form-alert-success {
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.4);
    color: var(--primary-blue);
}

/* Champ en erreur : contour rouge + petite vibration au chargement de la page */
.contact-form input.input-error,
.contact-form select.input-error,
.contact-form textarea.input-error {
    border-color: #ff5050;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.5);
    animation: shake-error 0.4s ease-in-out;
}

@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media screen and (max-width: 768px) {
    .auth-card {
        padding: 30px;
    }
}

/* Champ mot de passe avec bouton "oeil" (maintenir enfoncé pour afficher) */
.password-field {
    position: relative;
    margin-bottom: 20px;
}

.password-field input {
    margin-bottom: 0;
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-blue);
    opacity: 0.55;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.password-toggle:hover {
    opacity: 0.85;
}

/* Etat actif : oeil maintenu enfoncé, mot de passe visible */
.password-toggle.is-active {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* ==========================================
   PAGE DE MAINTENANCE
   ========================================== */

.maintenance-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    text-align: center;
}

.maintenance-card {
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 15px;
    padding: 60px 50px;
    width: 100%;
    max-width: 620px;
}

.maintenance-logo {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.maintenance-logo span {
    color: var(--primary-blue);
    text-shadow: 0 0 10px var(--primary-blue);
}

.maintenance-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    color: var(--primary-blue);
    filter: drop-shadow(0 0 10px var(--accent-glow));
    animation: maintenance-pulse 2.5s ease-in-out infinite;
}

.maintenance-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes maintenance-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.75; }
}

.maintenance-card h1 {
    font-size: 1.9rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.maintenance-card p {
    opacity: 0.85;
    max-width: 460px;
    margin: 0 auto 15px;
}

.maintenance-bar {
    width: 100%;
    max-width: 320px;
    height: 6px;
    margin: 30px auto 35px;
    border-radius: 10px;
    background: rgba(0, 210, 255, 0.1);
    overflow: hidden;
}

.maintenance-bar-fill {
    width: 40%;
    height: 100%;
    border-radius: 10px;
    background: var(--primary-blue);
    box-shadow: 0 0 10px var(--accent-glow);
    animation: maintenance-loading 1.8s ease-in-out infinite;
}

@keyframes maintenance-loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.maintenance-contact {
    list-style: none;
    margin-top: 25px;
    font-size: 0.9rem;
    opacity: 0.85;
}

.maintenance-contact li {
    margin: 6px 0;
}

/* Lien Instagram : logo en bleu néon, sans le préfixe texte "Instagram :" */
.maintenance-instagram {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-blue);
    text-decoration: none;
    transition: 0.3s;
}

.maintenance-instagram svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

.maintenance-instagram:hover {
    opacity: 0.8;
}

/* Bouton "Se connecter en tant qu'administrateur", pour un accès temporaire
   au site pendant la maintenance (voir includes/maintenance.php). */
.maintenance-admin-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 30px;
    border: 1px solid var(--primary-blue);
    border-radius: 5px;
    color: var(--text-white);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

.maintenance-admin-btn:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
    box-shadow: 0 0 15px var(--accent-glow);
}

@media screen and (max-width: 768px) {
    .maintenance-card {
        padding: 40px 25px;
    }
}

/* Page "404 - page introuvable" (404.php), même habillage que la carte de
   maintenance ci-dessus. */
.not-found-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    text-align: center;
}

.not-found-card {
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 15px;
    padding: 60px 50px;
    width: 100%;
    max-width: 620px;
}

.not-found-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    color: var(--primary-blue);
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.not-found-icon svg {
    width: 100%;
    height: 100%;
}

.not-found-code {
    font-family: 'Orbitron', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-shadow: 0 0 20px var(--accent-glow);
    line-height: 1;
    margin-bottom: 10px;
}

.not-found-card h1 {
    font-size: 1.9rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.not-found-card p {
    opacity: 0.85;
    max-width: 460px;
    margin: 0 auto 15px;
}

.not-found-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.not-found-actions .cta-btn,
.not-found-actions .maintenance-admin-btn {
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .not-found-card {
        padding: 40px 25px;
    }
}

/* ==========================================
   PAGE CONTACT (mise en page "Timeline")
   ========================================== */

.tl-section {
    padding: 150px 8% 80px;
    min-height: 100vh;
}

.tl-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
}

.tl-header h2 {
    font-size: 2.2rem;
    margin-bottom: 16px;
}

.tl-header h2 span {
    color: var(--primary-blue);
    text-shadow: 0 0 15px var(--accent-glow);
}

.tl-header p {
    opacity: 0.7;
    margin-bottom: 45px;
    max-width: 380px;
}

.tl-steps {
    position: relative;
    padding-left: 36px;
}

.tl-steps::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(var(--primary-blue), rgba(0, 210, 255, 0.05));
}

.tl-step {
    position: relative;
    padding-bottom: 36px;
}

.tl-step:last-child {
    padding-bottom: 0;
}

.tl-step-dot {
    position: absolute;
    left: -36px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--deep-bg);
    border: 2px solid var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: var(--primary-blue);
    box-shadow: 0 0 12px var(--accent-glow);
}

.tl-step strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.tl-step span {
    font-size: 0.85rem;
    opacity: 0.65;
}

.tl-panel {
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 18px;
    padding: 45px;
    align-self: start;
}

.tl-panel h3 {
    font-size: 1.2rem;
    margin-bottom: 26px;
}

.tl-field {
    margin-bottom: 20px;
}

.tl-field input,
.tl-field textarea,
.tl-field select {
    width: 100%;
    padding: 14px 16px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 8px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: 0.3s;
}

.tl-field textarea {
    min-height: 100px;
    resize: vertical;
}

.tl-field select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300d2ff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 42px;
}

.tl-field input:focus,
.tl-field textarea:focus,
.tl-field select:focus {
    border-color: var(--primary-blue);
}

/* Menu déroulant "devis" du formulaire admin de planification de
   rendez-vous : grisé quand la case "Planifier sans devis" est cochée. */
.tl-field select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.03);
}

/* Case à cocher "maison" (ex : "Planifier sans devis"), même thème sombre
   que les autres champs du formulaire. */
.checkbox-field {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-family: 'Poppins', sans-serif;
    color: var(--text-white);
}

.checkbox-field input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-field-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    position: relative;
    transition: 0.3s;
}

.checkbox-field-box::after {
    content: '';
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--deep-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-field input[type="checkbox"]:checked + .checkbox-field-box {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.checkbox-field input[type="checkbox"]:checked + .checkbox-field-box::after {
    display: block;
}

.checkbox-field input[type="checkbox"]:focus-visible + .checkbox-field-box {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.25);
}

.checkbox-field-label {
    font-size: 0.95rem;
}

/* Champ d'envoi de photo (formulaire "Ajouter une réalisation") */
.admin-file-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    opacity: 0.75;
}

.tl-field input[type="file"] {
    padding: 10px 12px;
    color: var(--text-white);
    font-size: 0.85rem;
}

/* Bouton de sélection de fichier "maison" : l'input réel est masqué
   visuellement (mais reste accessible/focusable) et remplacé par le label
   ci-dessous, stylé comme les autres boutons du site. */
.custom-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.custom-file-trigger {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid var(--primary-blue);
    box-shadow: 0 0 10px var(--accent-glow);
    background: transparent;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.3s;
}

.custom-file-trigger:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
}

.custom-file-name {
    color: var(--text-white);
    opacity: 0.7;
    font-size: 0.85rem;
}

.custom-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-file:focus-within .custom-file-trigger {
    box-shadow: 0 0 15px var(--accent-glow), 0 0 0 2px var(--primary-blue);
}

/* Rangée "Prénom + Nom" côte à côte dans le formulaire de contact */
.tl-form-row {
    display: flex;
    gap: 15px;
}

.tl-form-row .tl-field {
    flex: 1;
    min-width: 0;
}

/* Champs préremplis avec les infos du compte (nom, email, téléphone) :
   lecture seule, non modifiables depuis ce formulaire. */
.tl-field input[readonly] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(230, 241, 255, 0.08);
    color: rgba(230, 241, 255, 0.55);
    cursor: not-allowed;
}

.tl-field input[readonly]:focus {
    border-color: rgba(230, 241, 255, 0.08);
    box-shadow: none;
}

.tl-contact-mini {
    display: flex;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 210, 255, 0.1);
    font-size: 0.8rem;
    opacity: 0.75;
    flex-wrap: wrap;
}

.tl-contact-mini span,
.tl-contact-mini a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.tl-contact-mini a:hover {
    color: var(--primary-blue);
}

.tl-contact-mini svg {
    width: 14px;
    height: 14px;
    color: var(--primary-blue);
}

.tl-submit {
    width: 100%;
    padding: 15px;
    background: var(--primary-blue);
    border: none;
    border-radius: 8px;
    color: var(--deep-bg);
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 20px var(--accent-glow);
    transition: 0.3s;
}

.tl-submit:hover {
    transform: translateY(-2px);
}

@media screen and (max-width: 900px) {
    .tl-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tl-panel {
        padding: 30px;
    }
}

@media screen and (max-width: 480px) {
    .tl-form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ==========================================
   GÉNÉRATEUR DE DEVIS / BON DE LIVRAISON (admin/devis.php)
   ========================================== */

.devis-panel {
    max-width: 950px;
    margin: 0 auto;
}

.devis-lines-wrap {
    margin-bottom: 10px;
}

.devis-lines-head,
.devis-line-row {
    display: grid;
    grid-template-columns: 1fr 70px 150px 36px;
    gap: 10px;
    align-items: center;
}

.devis-lines-head {
    padding: 0 4px 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.devis-line-row {
    margin-bottom: 12px;
}

.devis-line-row input {
    width: 100%;
    padding: 12px 14px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 8px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: 0.3s;
}

.devis-line-row input:focus {
    border-color: var(--primary-blue);
}

.devis-remove-line {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 77, 94, 0.4);
    border-radius: 8px;
    color: #ff4d5e;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.3s;
}

.devis-remove-line:hover {
    background: #ff4d5e;
    color: #ffffff;
}

#devis-add-line {
    margin-top: 6px;
}

/* Champs/colonnes propres au "Devis" (masqués en mode "Bon de livraison") */
.is-hidden-field {
    display: none !important;
}

@media screen and (max-width: 700px) {

    .devis-lines-head,
    .devis-line-row {
        grid-template-columns: 1fr 55px 110px 32px;
        gap: 6px;
    }

    .devis-line-row input {
        padding: 10px;
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 480px) {

    .devis-lines-head,
    .devis-line-row {
        grid-template-columns: 1fr 42px 32px;
    }

    /* Sur très petit écran, le prix unitaire passe sous la description
       plutôt que d'écraser la ligne : on le sort de la grille. */
    .devis-lines-head span:nth-child(3),
    .devis-line-row input[name="prix[]"] {
        grid-column: 1 / -1;
    }
}

/* ==========================================
   GRILLE TARIFAIRE (admin/tarifs.php)
   ========================================== */

.tarifs-intro {
    text-align: center;
    opacity: 0.7;
    margin-top: -20px;
    margin-bottom: 35px;
}

.tarifs-wrap {
    max-width: 1100px;
    margin: 0 auto;
    overflow-x: auto;
}

table.tarifs-grid {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

table.tarifs-grid thead th {
    background: rgba(0, 210, 255, 0.08);
    color: var(--primary-blue);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 12px;
    border-bottom: 2px solid rgba(0, 210, 255, 0.25);
    text-align: center;
}

table.tarifs-grid thead th:first-child {
    text-align: left;
    padding-left: 18px;
}

table.tarifs-grid tbody td {
    padding: 10px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.1);
    text-align: center;
}

table.tarifs-grid tbody tr:hover {
    background: rgba(0, 210, 255, 0.04);
}

.tarifs-prestation {
    text-align: left !important;
    padding-left: 18px !important;
}

.tarifs-name-input,
.tarifs-desc-input {
    width: 100%;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 6px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: 0.3s;
}

.tarifs-name-input {
    padding: 8px 10px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.tarifs-desc-input {
    padding: 6px 10px;
    font-size: 0.78rem;
    opacity: 0.85;
}

.tarifs-name-input:focus,
.tarifs-desc-input:focus {
    border-color: var(--primary-blue);
}

.tarifs-price-input {
    width: 100px;
    padding: 9px 10px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 6px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    text-align: right;
    outline: none;
    transition: 0.3s;
}

.tarifs-price-input:focus {
    border-color: var(--primary-blue);
}

.tarifs-currency-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tarifs-currency-row span {
    opacity: 0.5;
    font-size: 0.85rem;
    white-space: nowrap;
}

.tarifs-unite-input {
    width: 55px;
    padding: 9px 6px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 6px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    text-align: center;
    outline: none;
    transition: 0.3s;
}

.tarifs-unite-input:focus {
    border-color: var(--primary-blue);
}

.tarifs-remove-row {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255, 77, 94, 0.4);
    border-radius: 6px;
    color: #ff4d5e;
    cursor: pointer;
    font-size: 0.85rem;
    transition: 0.3s;
}

.tarifs-remove-row:hover {
    background: #ff4d5e;
    color: #fff;
}

/* Encoche à gauche de chaque ligne : on la maintient enfoncée pour glisser
   la ligne et réordonner la grille (voir le JS de admin/tarifs.php). */
.tarifs-drag-cell {
    width: 34px;
    padding: 10px 4px !important;
    text-align: center !important;
}

.tarifs-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    cursor: grab;
    transition: 0.2s;
    touch-action: none;
}

.tarifs-drag-handle:hover {
    color: var(--primary-blue);
    background: rgba(0, 210, 255, 0.1);
}

.tarifs-drag-handle svg {
    width: 20px;
    height: 20px;
}

tr[draggable="true"] .tarifs-drag-handle {
    cursor: grabbing;
}

#tarifs-tbody tr.tarifs-dragging {
    opacity: 0.35;
}

#tarifs-tbody tr.tarifs-drop-target-above {
    box-shadow: inset 0 2px 0 0 var(--primary-blue);
}

#tarifs-tbody tr.tarifs-drop-target-below {
    box-shadow: inset 0 -2px 0 0 var(--primary-blue);
}

/* Petit flash bleu pour repérer la ligne qui vient d'être ajoutée */
@keyframes tarifs-row-highlight {
    0% {
        background: rgba(0, 210, 255, 0.22);
    }

    100% {
        background: transparent;
    }
}

tr.tarifs-just-added {
    animation: tarifs-row-highlight 1.6s ease-out;
}

.tarifs-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 22px auto 0;
    flex-wrap: wrap;
    gap: 14px;
}

.tarifs-note {
    font-size: 0.8rem;
    opacity: 0.6;
    max-width: 1100px;
    margin: 14px auto 0;
}

@media screen and (max-width: 700px) {
    .tarifs-price-input {
        width: 80px;
    }
}

/* ==========================================
   MENU DÉROULANT "MAISON" (remplace le <select> natif,
   dont l'apparence dépend du système/navigateur et ne peut
   pas être stylé pour coller au thème du site)
   ========================================== */

.custom-select {
    position: relative;
    margin-bottom: 20px;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 8px;
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger {
    border-color: var(--primary-blue);
}

/* Menu "maison" requis mais laissé sur son placeholder : contour rouge +
   petite vibration, déclenché en JS à la tentative d'envoi du formulaire. */
.custom-select-trigger.is-required-error {
    border-color: #ff5050;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.5);
    animation: shake-error 0.4s ease-in-out;
}

.custom-select-arrow {
    width: 18px;
    height: 18px;
    color: var(--primary-blue);
    transition: transform 0.25s;
    flex-shrink: 0;
    margin-left: 10px;
}

.custom-select.is-open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 210, 255, 0.1);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: 0.2s ease;
    max-height: 240px;
    overflow-y: auto;
}

.custom-select.is-open .custom-select-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.custom-select-options li {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 0.92rem;
    cursor: pointer;
    transition: 0.2s;
    outline: none;
}

.custom-select-options li:hover,
.custom-select-options li:focus {
    background: rgba(0, 210, 255, 0.1);
}

.custom-select-options li.is-selected {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Le <select> natif reste dans le DOM pour porter la vraie valeur envoyée
   au formulaire, mais visuellement masqué (pas display:none, pour rester
   accessible aux lecteurs d'écran qui le préfèrent au widget personnalisé). */
.custom-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================
   RECHERCHE DE CLIENT (formulaire de rendez-vous)
   ========================================== */

.client-search {
    position: relative;
}

.client-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--deep-bg);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 8px;
    padding: 6px;
    list-style: none;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: 0.2s;
}

.client-search-results.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.client-search-results li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text-white);
}

.client-search-results li:hover,
.client-search-results li.is-active {
    background: rgba(0, 210, 255, 0.1);
}

/* Un résultat filtré (ou le message "aucun résultat") est masqué via
   l'attribut natif "hidden" en JS : sans cette règle, "li { display:flex }"
   ci-dessus l'emporterait sur le "display:none" par défaut de [hidden] et
   l'élément resterait visible malgré tout. */
.client-search-results li[hidden] {
    display: none;
}

.client-search-email {
    font-size: 0.75rem;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}

.client-search-empty {
    opacity: 0.6;
    font-size: 0.85rem;
    cursor: default !important;
}

.client-search-empty:hover {
    background: none !important;
}

/* ==========================================
   CALENDRIER DE RENDEZ-VOUS (admin/calendrier.php)
   ========================================== */

/* Petit badge rond sur une icône de nav (ex: nombre de messages non lus) */
.icon-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff4d5e;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 6px rgba(255, 77, 94, 0.6);
}

.icon-link {
    position: relative;
}

/* Menu "Administration" du menu principal : remplace l'ancien lien unique
   (roue crantée) par une icône grille qui ouvre un petit menu déroulant
   avec plusieurs catégories (voir assets/js/script.js pour l'ouverture/
   fermeture au clic). Repris du style de .custom-select-options pour rester
   cohérent avec les autres menus déroulants du site. */
.admin-menu {
    position: relative;
    display: inline-flex;
}

.admin-menu-toggle {
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.admin-menu-options {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    z-index: 30;
    list-style: none;
    margin: 0;
    width: 260px;
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 210, 255, 0.12);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Petite pointe qui relie visuellement le menu au bouton */
.admin-menu-options::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: var(--dark-blue);
    border-left: 1px solid rgba(0, 210, 255, 0.25);
    border-top: 1px solid rgba(0, 210, 255, 0.25);
    transform: rotate(45deg);
}

.admin-menu.is-open .admin-menu-options {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.admin-menu-heading {
    text-align: center;
    padding: 8px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-blue);
    opacity: 0.85;
}

.admin-menu-options li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.18s;
}

.admin-menu-options li + li {
    margin-top: 2px;
}

/* Le survol remplit toute la catégorie d'un bleu plein (et non plus un
   simple voile), pour que ce soit bien lisible comme un seul bloc cliquable. */
.admin-menu-options li a:hover {
    background: var(--primary-blue);
    box-shadow: 0 0 20px var(--accent-glow);
}

.admin-menu-options li a:hover .admin-menu-icon {
    background: var(--deep-bg);
    color: var(--primary-blue);
}

.admin-menu-options li a:hover .admin-menu-title,
.admin-menu-options li a:hover .admin-menu-desc {
    color: var(--deep-bg);
    opacity: 1;
}

.admin-menu-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.1);
    color: var(--text-white);
    transition: 0.18s;
}

.admin-menu-icon svg {
    width: 18px;
    height: 18px;
}

.admin-menu-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.admin-menu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-white);
    transition: 0.18s;
}

.admin-menu-desc {
    font-size: 0.76rem;
    color: var(--text-white);
    opacity: 0.55;
    line-height: 1.3;
    transition: 0.18s;
}

/* Catégories pas encore construites (Comptabilité, Stock) : visibles mais
   non cliquables, avec un badge "Bientôt", même logique que .service-card-soon. */
.admin-menu-options li.is-soon a {
    cursor: default;
    pointer-events: none;
}

.admin-menu-options li.is-soon .admin-menu-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-white);
    opacity: 0.5;
}

.admin-menu-options li.is-soon .admin-menu-title {
    opacity: 0.5;
}

.admin-menu-options li.is-soon .admin-menu-desc {
    opacity: 0.35;
}

.admin-menu-soon-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffb100;
    border: 1px solid rgba(255, 177, 0, 0.5);
    border-radius: 20px;
    padding: 2px 7px;
    opacity: 0.9;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.calendar-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    text-transform: capitalize;
    color: var(--text-white);
    min-width: 220px;
    text-align: center;
}

.calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-blue);
    border-radius: 50%;
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 1.2rem;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: 0.25s;
}

.calendar-nav-btn:hover {
    background: var(--primary-blue);
    color: var(--deep-bg);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 40px;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
    padding-bottom: 8px;
}

.calendar-day {
    min-height: 110px;
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: var(--text-white);
    transition: 0.2s;
}

.calendar-day:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 0 12px var(--accent-glow);
}

.calendar-day.is-outside {
    opacity: 0.35;
}

.calendar-day.is-today {
    border-color: var(--primary-blue);
    box-shadow: 0 0 12px var(--accent-glow);
}

.calendar-day-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
}

.calendar-day.is-today .calendar-day-number {
    color: var(--primary-blue);
}

.calendar-rdv-chip {
    font-size: 0.7rem;
    line-height: 1.3;
    background: rgba(0, 210, 255, 0.12);
    border-left: 3px solid var(--primary-blue);
    border-radius: 3px;
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-rdv-chip.is-annule {
    border-left-color: #ff4d5e;
    background: rgba(255, 77, 94, 0.1);
    text-decoration: line-through;
    opacity: 0.7;
}

/* Rendez-vous marqué "Terminé" par l'admin : grisé mais sans barré, pour le
   distinguer d'un rendez-vous annulé. */
.calendar-rdv-chip.is-termine {
    border-left-color: rgba(230, 241, 255, 0.4);
    background: rgba(230, 241, 255, 0.06);
    opacity: 0.55;
}

/* Rendez-vous confirmé dont la date est passée, en attente de clôture :
   note "Terminé ?" en attirant l'oeil (ambre) jusqu'à ce que l'admin
   clique sur "Terminé". */
.calendar-rdv-chip.is-pastdue {
    border-left-color: #ffb100;
    background: rgba(255, 177, 0, 0.12);
}

.calendar-rdv-more {
    font-size: 0.68rem;
    opacity: 0.6;
}

@media screen and (max-width: 700px) {
    .calendar-grid {
        gap: 4px;
    }

    .calendar-day {
        min-height: 70px;
        padding: 5px;
    }

    .calendar-weekday {
        font-size: 0.62rem;
    }

    .calendar-rdv-chip {
        display: none;
    }

    .calendar-day-rdv-count {
        display: inline-block;
        margin-top: auto;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary-blue);
    }
}

/* ==========================================
   MESSAGERIE CLIENT (messagerie.php)
   ========================================== */

.upcoming-rdv-card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: rgba(0, 210, 255, 0.06);
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    padding: 24px 30px;
    box-shadow: 0 0 20px var(--accent-glow);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.upcoming-rdv-date {
    font-family: 'Orbitron', sans-serif;
    text-align: center;
    min-width: 90px;
}

.upcoming-rdv-date .day {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1;
}

.upcoming-rdv-date .month {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.upcoming-rdv-info h3 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.upcoming-rdv-info p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 2px 0;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-card {
    display: flex;
    gap: 14px;
    background: var(--dark-blue);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-left: 3px solid rgba(0, 210, 255, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
}

.message-card.is-unread {
    border-left-color: var(--primary-blue);
    background: rgba(0, 210, 255, 0.05);
}

.message-card.type-rdv_termine {
    border-left-color: #2ecc71;
}

.message-card.type-rdv_annule {
    border-left-color: #ff4d5e;
}

.message-card.type-annonce {
    border-left-color: #ffb100;
}

.message-card.type-avis {
    border-left-color: #ffb100;
}

.message-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--primary-blue);
}

.message-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.message-card.type-rdv_termine .message-icon {
    color: #2ecc71;
}

.message-card.type-rdv_annule .message-icon {
    color: #ff4d5e;
}

.message-card.type-info .message-icon {
    color: var(--text-white);
    opacity: 0.6;
}

.message-card.type-annonce .message-icon {
    color: #ffb100;
}

.message-card.type-avis .message-icon {
    color: #ffb100;
}

.message-body p {
    font-size: 0.92rem;
    line-height: 1.5;
}

.message-date {
    display: block;
    font-size: 0.75rem;
    opacity: 0.55;
    margin-top: 6px;
}

.message-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    margin-right: 8px;
    box-shadow: 0 0 6px var(--accent-glow);
}

/* Bouton "Laisser un avis" sur la notification correspondante */
.leave-avis-btn {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Étiquette affichée à la place du bouton une fois l'avis déjà envoyé */
.avis-already-sent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #2ecc71;
    opacity: 0.9;
}

.avis-already-sent svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Sélecteur d'étoiles cliquable (popup "Laisser un avis") */
.avis-star-input {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.avis-star-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: rgba(230, 241, 255, 0.2);
    transition: color 0.15s, transform 0.15s;
}

.avis-star-btn svg {
    display: block;
    width: 32px;
    height: 32px;
}

.avis-star-btn:hover {
    transform: scale(1.12);
}

.avis-star-btn.is-filled {
    color: #ffb100;
    filter: drop-shadow(0 0 4px rgba(255, 177, 0, 0.4));
}

.avis-star-input-shake {
    animation: shake-error 0.4s ease-in-out;
}

/* ===== Page publique "Avis clients" (avis-clients.php) ===== */
.avis-hero {
    padding: 160px 10% 40px;
    text-align: center;
}

.avis-hero p.avis-lead {
    max-width: 640px;
    margin: 0 auto;
    opacity: 0.75;
    font-size: 0.98rem;
}

.avis-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 34px 0 10px;
}

.avis-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.4rem;
    color: var(--primary-blue);
    text-shadow: 0 0 14px var(--accent-glow);
}

.avis-stars {
    display: inline-flex;
    gap: 3px;
}

.avis-stars svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 4px rgba(255, 177, 0, 0.35));
}

.avis-stars svg.is-filled { color: #ffb100; }
.avis-stars svg.is-empty { color: rgba(230, 241, 255, 0.15); }

.avis-count {
    opacity: 0.65;
    font-size: 0.9rem;
}

.avis-note {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 14px 20px;
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.06);
    border: 1px solid rgba(0, 210, 255, 0.2);
    font-size: 0.85rem;
    opacity: 0.85;
}

.avis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.avis-card {
    background: var(--dark-blue);
    padding: 32px;
    border-radius: 15px;
    border: 1px solid rgba(0, 210, 255, 0.1);
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.avis-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.avis-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.avis-stars-sm {
    display: inline-flex;
    gap: 2px;
}

.avis-stars-sm svg {
    width: 16px;
    height: 16px;
}

.avis-stars-sm svg.is-filled { color: #ffb100; }
.avis-stars-sm svg.is-empty { color: rgba(230, 241, 255, 0.15); }

.avis-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.25);
    color: var(--primary-blue);
    font-size: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.avis-quote {
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.65;
    flex-grow: 1;
}

.avis-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 210, 255, 0.08);
    font-size: 0.85rem;
}

.avis-author {
    font-weight: 600;
}

.avis-date {
    opacity: 0.55;
}

.avis-cta {
    text-align: center;
    padding: 80px 10% 100px;
    background: var(--dark-blue);
}

.avis-cta h2 {
    font-size: 1.9rem;
    margin-bottom: 14px;
}

.avis-cta p {
    opacity: 0.75;
    max-width: 480px;
    margin: 0 auto 28px;
}

@media screen and (max-width: 768px) {
    .avis-hero { padding: 190px 6% 30px; }
    .avis-summary { flex-direction: column; gap: 6px; }
}

/* Popup de confirmation "maison" (remplace window.confirm() du navigateur)
   pour les actions sensibles de l'admin : suppression, annulation... */
.confirm-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 12, 27, 0.75);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    /* Doit rester au-dessus de tout, y compris une .lightbox déjà ouverte
       (ex : confirmation de suspension depuis la fiche profil, qui est
       elle-même dans une .lightbox à z-index 2000). */
    z-index: 2100;
    padding: 20px;
}

.confirm-modal-overlay.is-open {
    display: flex;
}

.confirm-modal {
    background: var(--dark-blue);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 0 25px var(--accent-glow);
    border-radius: 10px;
    padding: 28px 26px;
    max-width: 420px;
    width: 100%;
}

.confirm-modal p {
    color: var(--text-white);
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0 0 22px;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== Authentification Google ("Continuer avec Google") ===== */

/* Bouton blanc : format recommandé par Google, et le plus reconnaissable.
   Le logo est l'image officielle assets/images/google-logo.svg — elle ne doit
   pas être redessinée, c'est une exigence de la charte Google contrôlée à la
   validation de l'application. */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 6px;
    background: #ffffff;
    border: 2px solid #ffffff;
    color: #1f1f1f;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s;
}

.google-btn:hover {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
    color: #1f1f1f;
}

.google-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Séparateur "ou" entre le bouton Google et le formulaire classique */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    opacity: 0.45;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(230, 241, 255, 0.25);
}

/* Encadré explicatif des écrans de finalisation Google */
.google-info-box {
    margin-bottom: 22px;
    padding: 14px 18px;
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.06);
    border: 1px solid rgba(0, 210, 255, 0.2);
    font-size: 0.86rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Champ pré-rempli par Google, non modifiable (l'adresse email vérifiée) */
.google-prefilled-field {
    position: relative;
    margin-bottom: 15px;
}

.google-prefilled-field .google-prefilled {
    width: 100%;
    border-color: rgba(46, 204, 113, 0.5) !important;
    background: rgba(46, 204, 113, 0.07) !important;
    cursor: not-allowed;
}

.google-prefilled-tag {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* ===========================================================================
   DEVIS CLIENT & PRISE DE RENDEZ-VOUS (migration 16)
   - mes-devis.php : liste des devis du client, acceptation/refus, puis
     calendrier + créneaux horaires pour proposer son rendez-vous
   - admin/calendrier.php : demandes de créneau à valider
   - admin/devis.php : historique des documents envoyés
   ======================================================================== */

/* --- Raccourci "Mes devis" en haut de l'espace client --- */
.devis-raccourci {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, transform 0.3s;
}

.devis-raccourci:hover {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
}

.devis-raccourci-icone {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 210, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.devis-raccourci-icone svg {
    width: 22px;
    height: 22px;
    color: var(--primary-blue);
}

.devis-raccourci-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.devis-raccourci-titre {
    font-weight: 600;
    font-size: 1.05rem;
}

.devis-raccourci-desc {
    font-size: 0.85rem;
    opacity: 0.7;
}

.devis-raccourci-badge {
    margin-left: auto;
    background: #ff4d5e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 9px;
}

/* --- Liste des devis du client --- */
.devis-client-intro,
.devis-client-vide {
    max-width: 700px;
    margin: 0 auto 26px;
    text-align: center;
    opacity: 0.75;
    font-size: 0.95rem;
}

.devis-client-card {
    max-width: 860px;
    margin: 0 auto 18px;
    background: rgba(10, 25, 47, 0.55);
    border: 1px solid rgba(0, 210, 255, 0.18);
    border-radius: 12px;
    padding: 22px 24px;
}

.devis-client-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.devis-client-numero {
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.devis-client-meta {
    font-size: 0.82rem;
    opacity: 0.65;
}

.devis-client-objet {
    font-size: 0.88rem;
    opacity: 0.85;
    margin-top: 6px;
}

.devis-client-montant {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary-blue);
    font-size: 1.05rem;
    margin-top: 8px;
}

.devis-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.devis-badge-attente { background: rgba(255, 177, 0, 0.15); color: #ffb100; }
.devis-badge-accepte { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.devis-badge-refuse { background: rgba(255, 77, 94, 0.15); color: #ff4d5e; }

.devis-client-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.devis-client-actions-row {
    display: flex;
    gap: 8px;
}

.devis-btn-accepter {
    padding: 9px 18px;
    font-size: 0.85rem;
}

.devis-btn-refuser {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 77, 94, 0.45);
    color: #ff4d5e;
    cursor: pointer;
    transition: background 0.25s;
}

.devis-btn-refuser:hover {
    background: rgba(255, 77, 94, 0.12);
}

.devis-client-pdf {
    font-size: 0.8rem;
    color: var(--primary-blue);
}

/* --- Panneau de demande de rendez-vous --- */
.rdv-picker {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 210, 255, 0.15);
}

.rdv-picker-titre {
    font-size: 1rem;
    margin-bottom: 8px;
}

.rdv-picker-info {
    background: rgba(0, 210, 255, 0.07);
    border: 1px solid rgba(0, 210, 255, 0.18);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.83rem;
    margin-bottom: 18px;
}

/* Calendrier (même esprit que le planning de l'administration, en plus compact).
   Largeur limitée : sur un grand écran, des cases carrées étalées sur toute la
   largeur de la carte donneraient un calendrier démesuré. */
.rdv-cal {
    background: rgba(2, 12, 27, 0.6);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    max-width: 430px;
}

.rdv-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rdv-cal-month {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--primary-blue);
}

.rdv-cal-nav {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(0, 210, 255, 0.2);
    color: var(--text-white);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s;
}

.rdv-cal-nav:hover:not(:disabled) {
    background: rgba(0, 210, 255, 0.1);
}

.rdv-cal-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.rdv-cal-weekdays,
.rdv-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.rdv-cal-weekdays {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    text-align: center;
    margin-bottom: 6px;
}

.rdv-cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid transparent;
    background: rgba(230, 241, 255, 0.03);
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.rdv-cal-day.is-empty {
    visibility: hidden;
    cursor: default;
}

.rdv-cal-day:hover:not(.is-disabled):not(.is-selected) {
    background: rgba(0, 210, 255, 0.12);
}

/* Jour non sélectionnable : trop proche (délai minimum) ou déjà complet. */
.rdv-cal-day.is-disabled {
    opacity: 0.28;
    cursor: not-allowed;
    background: transparent;
}

.rdv-cal-day.is-selected {
    background: var(--primary-blue);
    color: #04121f;
    font-weight: 600;
}

/* Créneaux horaires */
.rdv-slots-label {
    font-size: 0.83rem;
    margin: 16px 0 10px;
    opacity: 0.85;
}

.rdv-slots-label strong {
    color: var(--primary-blue);
}

.rdv-slots-note {
    opacity: 0.6;
}

.rdv-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
}

.rdv-slot {
    padding: 10px 6px;
    border-radius: 7px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    background: rgba(2, 12, 27, 0.6);
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.rdv-slot:hover:not(.is-pris):not(.is-selected) {
    background: rgba(0, 210, 255, 0.1);
}

/* Créneau déjà réservé par un autre client : grisé, barré, non cliquable. */
.rdv-slot.is-pris {
    opacity: 0.35;
    text-decoration: line-through;
    cursor: not-allowed;
    border-color: rgba(230, 241, 255, 0.15);
}

.rdv-slot.is-selected {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #04121f;
    font-weight: 600;
}

.rdv-slots-vide {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    font-style: italic;
    opacity: 0.6;
}

.rdv-picker-resume {
    font-size: 0.86rem;
    margin: 14px 0 18px;
    opacity: 0.9;
}

.rdv-picker-resume strong {
    color: var(--primary-blue);
}

.rdv-picker-message textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 7px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    background: rgba(2, 12, 27, 0.6);
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.rdv-picker-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* État de la demande une fois envoyée / confirmée */
.rdv-etat {
    margin-top: 20px;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 0.86rem;
}

.rdv-etat-attente {
    background: rgba(255, 177, 0, 0.1);
    border: 1px solid rgba(255, 177, 0, 0.3);
    color: #ffb100;
}

.rdv-etat-confirme {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

/* --- Côté administration : demandes de rendez-vous à valider --- */
.rdv-propositions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}

.rdv-proposition-card {
    background: rgba(10, 25, 47, 0.55);
    border: 1px solid rgba(255, 177, 0, 0.35);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.rdv-proposition-client {
    font-weight: 600;
}

.rdv-proposition-meta {
    font-size: 0.78rem;
    opacity: 0.6;
    margin-top: 3px;
}

.rdv-proposition-date {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary-blue);
    font-size: 0.98rem;
    margin-top: 8px;
}

.rdv-proposition-message {
    font-size: 0.83rem;
    opacity: 0.8;
    margin-top: 6px;
    font-style: italic;
}

.rdv-proposition-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rdv-proposition-refus {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rdv-proposition-refus input {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    background: rgba(2, 12, 27, 0.6);
    color: var(--text-white);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    min-width: 180px;
}

.rdv-propositions-count {
    display: inline-block;
    background: #ffb100;
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 10px;
    vertical-align: middle;
    margin-left: 6px;
}

/* Demande client encore à valider, dans la grille du planning. */
.calendar-rdv-chip.is-propose {
    border-left-color: #ffb100;
    background: rgba(255, 177, 0, 0.12);
    font-style: italic;
}

/* --- Côté administration : historique des documents envoyés --- */
.devis-envoi-note {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 12px;
}

.devis-statut-attente { color: #ffb100; }
.devis-statut-accepte { color: #2ecc71; }
.devis-statut-refuse { color: #ff4d5e; }

/* --- Lien vers "Mes devis" depuis une notification --- */
.message-devis-lien {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--primary-blue);
}

@media screen and (max-width: 700px) {
    .devis-client-head {
        flex-direction: column;
    }

    .devis-client-actions {
        align-items: flex-start;
        width: 100%;
    }

    .rdv-proposition-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .rdv-proposition-refus {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .rdv-proposition-refus input {
        min-width: 0;
        width: 100%;
    }
}

/* --- Fiches fournisseurs (admin/fournisseurs.php) ---
   Réutilise la carte .rdv-proposition-card (fond, bordure, radius) mais en
   colonne plutôt qu'en ligne : les fiches contiennent du texte libre sur
   plusieurs lignes (description, liens, contacts...), contrairement aux
   demandes de rendez-vous qui tiennent sur une ligne. */
.fournisseur-card {
    flex-direction: column;
    align-items: stretch;
    border-color: rgba(0, 210, 255, 0.25);
}

.fournisseur-card-info {
    width: 100%;
}

.fournisseur-field {
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
}

.fournisseur-field-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.55;
    margin-bottom: 2px;
}

.fournisseur-card .rdv-proposition-actions {
    margin-top: 18px;
    justify-content: flex-end;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
    padding-top: 14px;
}

/* Étiquette "BL" dans l'historique des documents : distingue un bon de
   livraison d'un devis sans ajouter une colonne au tableau. */
.devis-type-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 210, 255, 0.15);
    color: var(--primary-blue);
    margin-left: 4px;
}

/* --- Bannière de la page d'accueil (admin/banniere.php) --- */
.banniere-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 12px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Même voile sombre que .hero-dim sur le vrai site, pour un aperçu fidèle. */
.banniere-preview-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.banniere-preview-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(2, 12, 27, 0.8);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
}

.banniere-range {
    width: 100%;
    padding: 0 !important;
    height: 6px;
    accent-color: var(--primary-blue);
    cursor: pointer;
}

.banniere-range-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    opacity: 0.55;
    margin-top: 6px;
}