/* ============================
   1. SINGLE — Masquage header
   (la page projet affiche son propre logo en haut à gauche)
   ============================ */
header#header {
    display: none !important;
}

/* ============================
   2. CONTAINER PRINCIPAL DU PROJET
   ============================ */
#portfolio-single {
    min-height: 100vh;
    position: relative;
    background: var(--bg-color);
}

/* ============================
   3. LIGHTBOX — Layout split (gauche + droite)
   ============================ */
.lightbox-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.lightbox-left {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px 60px 100px;
    box-sizing: border-box;
    /* opacity: 0 géré en inline HTML — nécessaire pour GSAP clearProps */
}

.lightbox-left img {
    max-width: 100%;
    max-height: 75svh; /* svh = stable même quand la barre mobile se masque */
    object-fit: contain;
}

.lightbox-right {
    width: 40%;
    padding: 60px 15% 60px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* opacity: 0 géré en inline HTML — nécessaire pour GSAP clearProps */
}

.lb-info-header {
    display: flex;
    flex-direction: column;
}

/* ============================
   4. HEADER SINGLE (logo + croix)
   ============================ */
.single-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 40px;
    z-index: 100001;
    pointer-events: none; /* laisse passer les clics sur le contenu en dessous */
}

.single-header > * {
    pointer-events: auto; /* réactive les clics sur logo et croix */
}

.lb-home-logo-link {
    display: block;
}

.lb-desktop-logo {
    height: 45px;
    width: auto;
    display: block;
}

.lb-mobile-logo {
    display: none;
}

/* ============================
   5. NAVIGATION — Fermer / Précédent / Suivant
   Note: on force une police système pour ces éléments afin que les
   métriques de 'Sono' n'affectent pas le rendu des symboles Unicode
   (➣ ➢ ✕ ne sont pas dans Sono → le navigateur utilise un glyph
   de secours mais avec les métriques de Sono, ce qui déforme l'affichage).
   ============================ */
.lightbox-close,
.lightbox-nav {
    /* Isole du contexte font de main.css → rendu cohérent des symboles */
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
    text-decoration: none !important;
    color: #ff1400 !important;
}

.lightbox-close {
    font-size: 19px;
    cursor: pointer;
    font-weight: bold !important; /* épaissit la croix ✕ */
    -webkit-text-stroke: 0.8px #ff1400;
}

.lightbox-nav {
    position: fixed;
    top: 50%;
    /* Le facteur d'échelle passe par une variable plutôt que d'être écrit
       dans la règle de survol : les deux flèches n'ont pas la même
       transformation de départ — la précédente est retournée de 180° — et
       une règle de survol qui réécrirait `transform` en entier effacerait
       ce placement. Ici le survol ne touche qu'un nombre, le placement
       reste déclaré à un seul endroit.
       La transition porte bien sur `transform` : c'est la valeur calculée
       qui est interpolée, la variable n'a pas besoin d'être animable. */
    transform: translateY(-50%) scale(var(--ldk-fleche-echelle, 1));
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 22px;
    cursor: pointer;
    z-index: 100000;
    font-weight: 800 !important; 
    -webkit-text-stroke: 0.3px #ff1400;
}

#prev-btn {
    left: 30px;
    transform: rotate(180deg) translateY(50%) scale(var(--ldk-fleche-echelle, 1));
}

#next-btn {
    right: 30px;
}

/* Le grossissement au survol, réservé aux pointeurs qui survolent
   vraiment. `hover: hover` écarte les écrans tactiles, où l'état de survol
   se déclencherait au toucher et resterait collé après le départ du
   doigt — c'est plus juste qu'un seuil de largeur, un ordinateur restant
   un ordinateur quelle que soit la taille de sa fenêtre. */
@media (hover: hover) and (pointer: fine) {
    .lightbox-nav:hover,
    .lightbox-nav:focus-visible {
        --ldk-fleche-echelle: 1.18;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-nav {
        transition: none;
    }
}

/* ============================
   6. VISUEL PRINCIPAL DU PROJET (image ou vidéo)
   ============================ */
#lb-featured-video {
    max-width: 80%;
    max-height: 75svh;
    object-fit: contain;
    background: transparent;
}

#lb-featured-image {
    max-width: 80%;
    max-height: 75svh;
    object-fit: contain;
}

/* ---- Angles arrondis (case "Design du projet" cochee dans le back-office) ----
   La classe .has-border-radius est posee sur #portfolio-single par single.php.
   On la scope au visuel principal uniquement : les images du contenu de
   l'article gardent leurs angles droits. */
.has-border-radius #lb-featured-video,
.has-border-radius #lb-featured-image {
    border-radius: 12px;
    overflow: hidden;
    /* isolation + translateZ : evite le liseré d'antialiasing de Safari
       quand un filter/box-shadow est applique par-dessus (.ombredroite) */
    isolation: isolate;
    transform: translateZ(0);
}

/* on cible la zone gauche uniquement pour ce projet */
.postid-1152 .lightbox-left {
    position: relative;
}

/* on injecte le plastique en respectant tes marges intérieures */
.postid-1152 .lightbox-left::after {
    content: '';
    position: absolute;
    /* on reprend les dimensions exactes de ton padding dans single.css */
    top: 60px;
    bottom: 60px;
    left: 100px;
    right: 40px;
    background-image: url('/wp-content/uploads/2026/08/Pochette-transparente.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 10;
}

/* ============================
   7. TITRE & MÉTA DU PROJET
   ============================ */
/* #lb-title : voir typographie.css (rôle « titre de projet »). */

#lb-subtitle {
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

/* #lb-excerpt : voir typographie.css. La règle y cible aussi le <p>
   généré par the_excerpt(), sinon la graisse ne s'applique pas. */

/* ============================
   8. CONTENU DÉTAILLÉ DU PROJET
   ============================ */
#lb-content-container {
    width: 100%;
    padding: 60px;
    box-sizing: border-box;
    border-top: 1px solid rgba(230, 47, 30, 0.2);
}

#lb-content {
    max-width: 800px;
    margin: 0 auto;
    font-family: serif;
    font-size: 1.2rem;
    line-height: 1.8;
}

#lb-content iframe,
#lb-content .wp-block-embed iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px;
}

/* ============================
   9. BOUTON "AFFICHER PLUS"
   ============================ */
.btn-more {
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    border-bottom: 1px solid #ff1400;
    padding-bottom: 5px;
    align-self: flex-start;
}

/* Le symbole ➺ pointe vers la droite : un quart de tour l'oriente vers le
   bas, là où le clic emmène le lecteur. Même isolation de police que les
   flèches de navigation — main.css impose Sono en !important sur span, et
   le rendu du symbole doit rester identique d'un endroit à l'autre. */
.btn-more-fleche {
    display: inline-block;
    transform: rotate(90deg);
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
    /* le glyphe pivoté flotte un peu haut sur la ligne de base */
    vertical-align: -2px;
    margin-left: 4px;
}