/* ========================================================================
   Style v3 : couche d'animations posée sur site-v2.css.
   Les mouvements sont pilotés par public/js/site-v3.js (GSAP + ScrollTrigger). Ici : décor,
   états de départ (sous .v3-anim, classe retirée si GSAP ne démarre pas) et transitions CSS.
   ======================================================================== */

/* ---------- Hero ---------- */
.v3-hero {
    padding-bottom: clamp(5rem, 3rem + 6vw, 8rem);
}

/* Courants d'air en fond : traits fins en pointillés longs qui glissent (stroke-dashoffset). */
.v3-airflow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.v3-airflow__line {
    fill: none;
    stroke: url(#v3AirGradient);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 420 740;
    opacity: 1;
}

.v3-airflow__line--far {
    stroke-width: 1;
    opacity: .5;
}

/* Titre découpé en mots (site-v3.js) : chaque mot monte depuis sous sa ligne. */
.v3-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

.v3-word__inner {
    display: inline-block;
    will-change: transform;
}

/* États de départ : invisibles seulement quand GSAP va les animer. */
.v3-anim .hero-eyebrow[data-hero-item],
.v3-anim [data-hero-visual],
.v3-anim .v3-word__inner {
    opacity: 0;
}

/* Le hero v2 avait ses propres apparitions CSS : la v3 les confie à GSAP. */
.v3-hero .hero-anim {
    animation: none;
    opacity: 1;
}

.v3-hero-visual [data-depth] {
    will-change: transform;
}

/* Photo de la climatisation : affichée entière (3:4). */
.v3-hero-visual .v3-ac-photo {
    aspect-ratio: 3 / 4;
}

.v3-hero-visual .v3-ac-photo img {
    object-position: center;
}

/* Vignette : le chantier sur le toit, recadré sur le technicien. */
.v3-hero-visual .hero-visual__inset img {
    object-position: 70% 60%;
}

/* Vague de transition vers la section suivante. */
.v3-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(50px, 6vw, 110px);
    z-index: 1;
    pointer-events: none;
}

/* Le bandeau d'engagements se pose sur la vague. */
.v3-trust {
    margin-top: -4.5rem;
}

/* La carte « Dépannage 24h » descend à mi-hauteur : le haut de la photo montre la climatisation. */
.v3-hero-visual .hero-visual__card {
    top: 46%;
}

@media (max-width: 991.98px) {
    /* Téléphone et tablette : courants d'air plus discrets derrière le texte, et assez de place
       sous les photos pour que le bandeau d'engagements ne cache pas la carte « 24h ». */
    .v3-airflow {
        opacity: .45;
    }

    .v3-hero {
        padding-bottom: 7rem;
    }

    .v3-trust {
        margin-top: -3rem;
    }
}

@media (max-width: 575.98px) {
    .v3-hero-visual .hero-visual__card {
        top: auto;
    }

}

/* ---------- Boutons : reflet lumineux discret qui suit la souris ---------- */
.btn-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.btn-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 255, 255, .45), transparent 60%);
    opacity: 0;
    transition: opacity var(--tc-dur) ease;
}

.btn-glow:hover::before {
    opacity: 1;
}

.btn-glow:hover {
    box-shadow: 0 10px 28px rgba(56, 189, 248, .25), 0 6px 16px rgba(255, 128, 15, .25);
}

/* ---------- Cartes de services : voile de givre et ventilateur qui tourne ---------- */
.v3-tile .service-tile__media {
    position: relative;
}

.v3-tile__frost {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(224, 242, 254, .55) 0%, rgba(224, 242, 254, 0) 55%),
        radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.5px) 0 0 / 14px 14px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .6s var(--tc-ease);
}

.v3-tile:hover .v3-tile__frost {
    clip-path: inset(0 0 0 0);
}

.v3-tile:hover .service-tile__icon .bi-snow2,
.v3-tile:hover .service-tile__icon .bi-wind {
    animation: v3Spin 1.2s var(--tc-ease);
}

@keyframes v3Spin {
    to { transform: rotate(180deg); }
}

/* ---------- Section froid commercial et industriel ---------- */
.v3-cold {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(4rem, 3rem + 5vw, 7.5rem);
    color: #fff;
    background:
        radial-gradient(55% 60% at 10% 10%, rgba(56, 189, 248, .22), transparent 70%),
        radial-gradient(50% 60% at 100% 100%, rgba(14, 116, 144, .35), transparent 70%),
        linear-gradient(160deg, #04205a 0%, #010a35 75%);
}

/* Givre : cristaux très légers sur les bords, comme une vitre de chambre froide. */
.v3-cold__frost {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(224, 242, 254, .16) 1px, transparent 1.6px),
        radial-gradient(rgba(224, 242, 254, .08) 1px, transparent 1.6px);
    background-size: 26px 26px, 13px 13px;
    background-position: 0 0, 6px 9px;
    mask-image: radial-gradient(120% 90% at 50% 50%, transparent 45%, #000 100%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 45%, #000 100%);
}

.section-eyebrow--light {
    color: #7dd3fc;
}

.section-eyebrow--light::before {
    background: #7dd3fc;
}

.v3-cold__title {
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.12;
    color: #fff;
    margin-bottom: 1rem;
}

.v3-cold__lead {
    color: rgba(255, 255, 255, .75);
    font-size: 1.05rem;
    max-width: 34rem;
}

.v3-cold__list {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    gap: .9rem;
}

.v3-cold__list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(186, 230, 253, .12);
    transition: background-color var(--tc-dur) ease, border-color var(--tc-dur) ease, transform var(--tc-dur) var(--tc-ease);
}

.v3-cold__list li:hover {
    background: rgba(56, 189, 248, .1);
    border-color: rgba(125, 211, 252, .35);
    transform: translateX(4px);
}

[dir="rtl"] .v3-cold__list li:hover {
    transform: translateX(-4px);
}

.v3-cold__list strong {
    display: block;
    color: #fff;
    margin-bottom: .15rem;
}

.v3-cold__list li > span:last-child {
    color: rgba(255, 255, 255, .7);
    font-size: .93rem;
    line-height: 1.55;
}

.v3-cold__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(56, 189, 248, .16);
    color: #7dd3fc;
    font-size: 1.15rem;
}

.v3-cold__list li:hover .bi-fan {
    animation: v3Spin 1s linear infinite;
}

/* Photos : grande photo et vignette décalée. */
.v3-cold__media {
    position: relative;
    padding-inline-end: 14%;
    padding-bottom: 14%;
}

.v3-cold__main,
.v3-cold__second {
    margin: 0;
    overflow: hidden;
}

.v3-cold__main {
    border-radius: 24px;
    aspect-ratio: 4 / 3.3;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.v3-cold__second {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 18px;
    border: 5px solid #062a6b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

.v3-cold__main img,
.v3-cold__second img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thermomètre : barre graduée de +8 °C à −25 °C. */
.v3-thermo {
    position: absolute;
    top: 8%;
    inset-inline-start: -1.25rem;
    display: flex;
    gap: .6rem;
    padding: .9rem .8rem;
    border-radius: 16px;
    background: rgba(1, 10, 53, .78);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(186, 230, 253, .2);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
}

.v3-thermo__scale {
    position: relative;
    width: 8px;
    height: 150px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fb923c 0%, #38bdf8 35%, #0ea5e9 65%, #1e3a8a 100%);
    opacity: .9;
}

.v3-thermo__fill {
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--thermo, 0%);
    border-radius: 8px;
    background: rgba(255, 255, 255, .35);
}

.v3-thermo__cursor {
    position: absolute;
    left: 50%;
    top: var(--thermo, 0%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #38bdf8;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .2);
}

.v3-thermo__labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 700;
    color: #bae6fd;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .v3-thermo {
        inset-inline-start: .5rem;
        top: .75rem;
        padding: .6rem;
    }

    .v3-thermo__scale {
        height: 110px;
    }
}

/* ---------- Méthode : ligne pilotée par le défilement, étapes qui s'allument ---------- */
.v3-steps::before {
    transform: scaleX(var(--line, 0)) !important;
    transition: none !important;
}

.v3-steps .method-step__num {
    transition: transform var(--tc-dur) var(--tc-ease), background-color .4s ease, color .4s ease, box-shadow .4s ease;
}

.v3-steps .method-step.is-active .method-step__num {
    background: var(--tc-frost);
    color: #fff;
    border-color: var(--tc-frost);
    box-shadow: 0 0 0 8px rgba(56, 189, 248, .15), 0 14px 28px rgba(10, 111, 168, .25);
}

/* Sans GSAP (ou animations réduites), toutes les étapes sont « allumées » et la ligne tracée. */
html:not(.v3-anim) .v3-steps::before {
    transform: scaleX(1) !important;
}

/* ---------- Masques photo (révélation au défilement) ---------- */
[data-mask] {
    overflow: hidden;
}

.v3-anim [data-mask] {
    clip-path: inset(100% 0 0 0 round 20px);
}

/* Les tuiles de réalisations sont dévoilées par le masque, pas par l'apparition v2. */
.motion .v3-mosaic .project-tile {
    opacity: 1;
    translate: none;
}

/* ---------- Appel final : courants d'air animés ---------- */
.v3-cta::before {
    display: none;
}

.v3-cta__air {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .5;
    pointer-events: none;
}

.v3-cta__air .v3-airflow__line {
    stroke: #bae6fd;
    stroke-opacity: .5;
}

/* ---------- En-têtes des pages internes (services, réalisations, contact, devis, dépannage) ----------
   Une vraie photo de chantier sous un voile bleu nuit, au lieu d'un aplat sombre identique partout ;
   sous-titre plus contrasté. */
section.hero {
    background:
        linear-gradient(100deg, rgba(1, 10, 53, .94) 0%, rgba(1, 10, 53, .82) 55%, rgba(3, 20, 71, .7) 100%),
        url("../uploads/projects/climatisation-gainable-11.jpg") center 40% / cover no-repeat,
        var(--tc-dark);
    padding: 4.5rem 0;
}

section.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tc-frost-bright), transparent);
    opacity: .6;
}

section.hero .text-white-50,
section.hero .hero-subtitle {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 1.05rem;
}

/* ---------- Détail d'un service ---------- */
.v3-service__title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    margin-bottom: .75rem;
}

.v3-service__lead {
    color: var(--tc-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    white-space: pre-line;
}

.v3-service__photo {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 20px;
}

.v3-service__points {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .4rem;
    font-size: .92rem;
}

.v3-service__points .bi {
    color: var(--tc-frost);
    margin-inline-end: .5rem;
}

.v3-service__call {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--tc-dark);
    text-decoration: none;
}

.v3-service__call .bi {
    color: var(--tc-frost);
}

/* Questions fréquentes : <details> natif, avec une flèche qui pivote à l'ouverture. */
.v3-faq {
    max-width: 780px;
    margin-inline: auto;
    display: grid;
    gap: .75rem;
}

.v3-faq__item {
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    padding: 0 1.25rem;
}

.v3-faq__item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.v3-faq__item summary::-webkit-details-marker {
    display: none;
}

.v3-faq__item summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    color: var(--tc-frost);
    transition: transform var(--tc-dur) var(--tc-ease);
}

.v3-faq__item[open] summary::after {
    transform: rotate(180deg);
}

.v3-faq__item p {
    margin: 0;
    padding-bottom: 1.1rem;
    color: var(--tc-muted);
}

/* ---------- Réalisations ---------- */
.v3-mosaic--page {
    grid-auto-rows: 300px;
}

/* Réalisations liées à un service (trois au plus) : photos moins hautes, ce n'est pas le sujet
   principal de la page. */
.v3-mosaic--related {
    grid-auto-rows: 190px;
}

.project-tile__service {
    display: inline-block;
    margin-bottom: .25rem;
    padding: .1rem .55rem;
    border-radius: 99px;
    background: rgba(56, 189, 248, .22);
    color: #e0f2fe;
    font-weight: 600;
}

/* Téléphone : une photo par ligne, quel que soit le nombre de réalisations (la règle « deux
   réalisations côte à côte » de la v2 les étirait sinon sur deux lignes). */
@media (max-width: 767.98px) {
    .v3-mosaic > * {
        grid-row: auto !important;
        grid-column: auto !important;
    }
}

/* Vidéo d'une réalisation : format d'origine (souvent vertical), centrée, sans bandes noires. */
.v3-project-video {
    display: flex;
    justify-content: center;
}

.v3-project-video video {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    border-radius: 18px;
    box-shadow: var(--tc-shadow-lg);
}

/* ---------- Lien d'évitement : caché jusqu'à ce qu'il reçoive le focus clavier ---------- */
.skip-link {
    position: absolute;
    top: .5rem;
    inset-inline-start: .5rem;
    z-index: 2000;
    padding: .6rem 1rem;
    border-radius: 8px;
    background: var(--tc-dark);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: none;
    color: #fff;
}

#main-content:focus {
    outline: none;
}

/* ---------- Orange réservé aux actions ---------- */
.footer-contact .bi {
    color: var(--tc-frost-bright);
}

/* « Haut de page » n'est pas une action commerciale : bleu nuit plutôt qu'orange. */
.btn.back-to-top {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tc-dark);
    --bs-btn-border-color: var(--tc-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tc-dark-soft);
    --bs-btn-hover-border-color: var(--tc-dark-soft);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tc-dark-soft);
    --bs-btn-active-border-color: var(--tc-dark-soft);
}

@media (max-width: 991.98px) {
    /* Mobile : la barre d'action occupe le bas de l'écran, le bouton « haut de page » la
       chevauchait. */
    .back-to-top {
        display: none;
    }

    /* Menu déplié : liens décollés du bord de l'écran. */
    .navbar-collapse .navbar-nav {
        padding: .5rem 0 1rem;
    }

    .navbar-collapse .nav-link {
        padding-inline: .75rem;
    }
}

/* ---------- Moins d'animations demandées ---------- */
@media (prefers-reduced-motion: reduce) {
    .v3-tile:hover .service-tile__icon .bi,
    .v3-cold__list li:hover .bi-fan {
        animation: none !important;
    }

    .v3-tile__frost {
        display: none;
    }
}