/* ==========================================================================
   SITE VITRINE — ALL TECH Industries
   Styles propres au front public (navbar, footer, marque).
   Chargé uniquement par l'entrypoint "app", pas "admin".
   ========================================================================== */

/* --------------------------------------------------------------------------
   MARQUE — logo fourni (assets/media/logo.jpg, 271×39px)
   -------------------------------------------------------------------------- */

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-brand img {
    display: block;
    height: 28px;
    width: auto;
}

.site-brand--footer img {
    height: 34px;
}

/* --------------------------------------------------------------------------
   NAVBAR
   -------------------------------------------------------------------------- */

.site-navbar {
    --bs-navbar-padding-y: 0.85rem;
    background-color: rgba(20, 24, 28, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-navbar .container {
    position: relative;
}

@media (min-width: 992px) {
    .site-navbar__links {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        column-gap: var(--space-5);
    }
}

.site-navbar .nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: var(--color-text-on-dark-muted);
    padding-inline: var(--space-5);
    position: relative;
    transition: color var(--transition-fast);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: var(--white);
}

.site-navbar .nav-link.active {
    color: var(--accent-400);
}

.site-navbar .nav-link.active::after {
    content: '';
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: -2px;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: var(--radius-pill);
}

.site-navbar .dropdown-menu {
    background-color: var(--ink-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    margin-top: var(--space-2);
}

.site-navbar .dropdown-item {
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    padding: 0.55rem var(--space-3);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
    background-color: var(--ink-700);
    color: var(--white);
}

.site-navbar .dropdown-item.active {
    background-color: rgba(54, 205, 255, 0.12);
    color: var(--accent-400);
}

.site-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

.site-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(54, 205, 255, 0.25);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--gradient-dark);
    color: var(--color-text-on-dark);
}

.site-footer a {
    color: var(--color-text-on-dark-muted);
}

.site-footer a:hover {
    color: var(--accent-400);
}

.site-footer__title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: var(--space-4);
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site-footer__links a {
    font-size: var(--text-sm);
    text-decoration: none;
}

.site-footer__links--contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-on-dark-muted);
}

.site-footer__links--contact i {
    color: var(--accent-500);
    margin-top: 0.2em;
}

.site-footer .rule-accent {
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background-color: var(--ink-950);
    background-image: url('../../media/Banner/16596.jpg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-top: calc(var(--space-9) + var(--space-4));
    padding-bottom: var(--space-9);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(100deg, rgba(14, 18, 22, 0.88) 0%, rgba(14, 18, 22, 0.72) 32%, rgba(20, 24, 28, 0.42) 58%, rgba(0, 94, 125, 0.28) 100%),
        radial-gradient(circle at 18% 20%, rgba(54, 205, 255, 0.14), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(54, 205, 255, 0.1), transparent 45%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 40%, transparent 85%);
    pointer-events: none;
}

.hero__content {
    position: relative;
    max-width: 760px;
}

.hero__title {
    color: var(--white);
    font-size: var(--text-4xl);
    margin-block: var(--space-4) var(--space-5);
}

.hero__lead {
    color: var(--color-text-on-dark-muted);
    font-size: var(--text-lg);
    max-width: 620px;
    margin-bottom: var(--space-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero__actions .btn {
    padding: 0.85rem 1.75rem;
}

/* --------------------------------------------------------------------------
   BANDEAU CHIFFRES-CLÉS — chevauche la limite hero / section suivante
   -------------------------------------------------------------------------- */

.stats-strip {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--space-7) * -1);
}

.stats-strip__card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-5);
}

.stats-strip__item {
    text-align: center;
}

.stats-strip__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: 1;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stats-strip__label {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   SECTION HEADING — commun aux sections de contenu
   -------------------------------------------------------------------------- */

.section-heading {
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-7);
}

.section-heading h2 {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   CARTES SERVICES
   -------------------------------------------------------------------------- */

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6) var(--space-5);
    background-color: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: var(--radius-md);
    background: var(--gradient-accent);
    color: var(--ink-950);
    font-size: 1.75rem;
    margin-bottom: var(--space-5);
    transition: transform var(--transition-base);
}

.service-card:hover .service-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.service-card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.service-card__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
    flex-grow: 1;
}

.service-card__link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--accent-700);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.service-card__link i {
    transition: transform var(--transition-fast);
}

.service-card:hover .service-card__link i {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   PROCESS — étapes numérotées
   -------------------------------------------------------------------------- */

.process-step {
    position: relative;
    padding-top: var(--space-6);
    height: 100%;
}

.process-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--accent-500);
    color: var(--accent-700);
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.process-step__icon {
    color: var(--accent-600);
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
}

.process-step__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.process-step__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-6) + 1.25rem);
    left: calc(100% - 1rem);
    width: calc(var(--space-6) * 2);
    height: 2px;
    background-image: linear-gradient(90deg, var(--accent-400) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
    display: none;
}

@media (min-width: 992px) {
    .process-step:not(:last-child)::after {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   RÉALISATIONS — grille avec zoom au survol
   -------------------------------------------------------------------------- */

.realisation-tile {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--ink-900);
}

.realisation-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.realisation-tile__label {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    display: inline-block;
    width: fit-content;
    max-width: calc(100% - var(--space-3) * 2);
    background-color: var(--ink-950);
    color: var(--accent-400);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.realisation-tile:hover img {
    transform: scale(1.08);
}

.realisation-tile:hover .realisation-tile__label {
    opacity: 1;
    transform: translateY(0);
}

.realisation-tile--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
    background: var(--gradient-dark);
}

.realisation-tile--empty .realisation-tile__label {
    position: static;
    opacity: 1;
    transform: none;
}

/* Grille "bento" de l'accueil — layout asymétrique :
   - Grande image (2×2) en haut-gauche
   - 2 petites images (1×1) en haut-droite
   - 2 petites images (1×1) en bas-gauche
   - Grande image (2×2) en bas-droite
   Rangées à hauteur fixe pour garantir l'alignement. */
.realisations-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: var(--space-4);
}

.realisations-preview-grid .realisation-tile {
    height: 100%;
    aspect-ratio: unset;
}

.realisations-preview-grid__item--large {
    grid-column: span 2;
    grid-row: span 1;
}

@media (min-width: 576px) {
    .realisations-preview-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 150px;
    }

    /* Layout explicite : 1 grande haut-gauche, 2 petites haut-droite,
       2 petites bas-gauche, 1 grande bas-droite */

    /* Item 1 : grande image haut-gauche (2×2) */
    .realisations-preview-grid > :nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    /* Item 2 : petite image haut-droite (col 3) */
    .realisations-preview-grid > :nth-child(2) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    /* Item 3 : petite image haut-droite (col 4) */
    .realisations-preview-grid > :nth-child(3) {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    /* Item 4 : petite image bas-gauche colonne 1 */
    .realisations-preview-grid > :nth-child(4) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    /* Item 5 : petite image bas-gauche colonne 2 */
    .realisations-preview-grid > :nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    /* Item 6 : grande image bas-droite (2×2) */
    .realisations-preview-grid > :nth-child(6) {
        grid-column: 3 / 5;
        grid-row: 2 / 4;
    }
}

@media (min-width: 992px) {
    .realisations-preview-grid {
        grid-auto-rows: 190px;
    }
}

/* --------------------------------------------------------------------------
   CTA BANNER — bloc de conversion final
   -------------------------------------------------------------------------- */

.cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--gradient-hero);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 0%, rgba(54, 205, 255, 0.2), transparent 60%);
    pointer-events: none;
}

.cta-banner__content {
    position: relative;
    max-width: 560px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   PAGE HEADER — bandeau de titre des pages internes (services, etc.)
   -------------------------------------------------------------------------- */

.page-header {
    background: var(--gradient-dark);
    padding-block: var(--space-7);
}

.page-header h1 {
    color: var(--color-text-on-dark);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   PAGE SERVICE — citation, applications, matières, carousel
   -------------------------------------------------------------------------- */

.service-quote {
    position: relative;
    padding-left: var(--space-5);
    border-left: 3px solid var(--accent-500);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--ink-900);
    margin-block: var(--space-5) var(--space-6);
}

.service-applications {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.service-applications li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text);
}

.service-applications i {
    color: var(--accent-600);
    font-size: 1.1rem;
    margin-top: 0.15em;
    flex-shrink: 0;
}

.service-materials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.service-materials__label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    width: 100%;
    margin-bottom: var(--space-1);
}

.service-materials .badge {
    background-color: var(--color-bg-soft);
    color: var(--ink-800);
    border: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
}

.service-carousel {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.service-carousel .carousel-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.service-carousel .carousel-indicators {
    margin-bottom: var(--space-3);
}

.service-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.5;
}

.service-carousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--accent-500);
}

.service-carousel .carousel-control-prev,
.service-carousel .carousel-control-next {
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(14, 18, 22, 0.55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.service-carousel:hover .carousel-control-prev,
.service-carousel:hover .carousel-control-next {
    opacity: 1;
}

.service-carousel .carousel-control-prev {
    left: var(--space-3);
}

.service-carousel .carousel-control-next {
    right: var(--space-3);
}

.service-carousel .carousel-control-prev-icon,
.service-carousel .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* --------------------------------------------------------------------------
   PAGE CONTACT
   -------------------------------------------------------------------------- */

.contact-form-card {
    background-color: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) var(--space-5);
}

.contact-infos {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-infos li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text-muted);
}

.contact-infos i {
    color: var(--accent-600);
    font-size: 1.1rem;
    margin-top: 0.15em;
    flex-shrink: 0;
}