/* ==========================================================================
   PORTFOLIO — outils (vues, filtre), Sélection éditoriale, index « Tout »,
   et fiche projet (même feuille).
   ========================================================================== */

/* --- Outils ---------------------------------------------------------------- */
.portfolio-outils {
    row-gap: var(--esp-s);
    align-items: center;
    margin-bottom: var(--esp-l);
    padding-block: var(--esp-s);
    border-block: 1px solid var(--filet);
}

.portfolio-filtre .filtres__groupe {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--esp-2xs);
    overflow-x: auto;
    scrollbar-width: none;
}

.portfolio-filtre .puce span {
    min-height: 40px;
    padding: 0.3rem 0.85rem;
}

.portfolio-vues {
    display: inline-flex;
    justify-self: start;
    border: 1px solid var(--texte);
}

.portfolio-vues__bouton {
    display: inline-grid;
    place-items: center;
    min-height: 40px;
    padding-inline: 1rem;
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.portfolio-vues__bouton.est-actif {
    background: var(--c-jaune);
    color: var(--c-encre);
}

.portfolio-filtre .puce input:checked + span {
    background: var(--c-creme);
    border-color: var(--c-creme);
    color: var(--c-encre);
}

.portfolio-filtre .puce input:hover + span {
    background: rgb(243 236 221 / 0.1);
}

.portfolio-filtre .puce input:checked:hover + span {
    background: var(--c-creme);
}

.js .portfolio-filtre .filtres__valider {
    display: none;
}

@media (min-width: 64em) {
    .portfolio-vues { grid-column: 1 / span 4; }
    .portfolio-filtre { grid-column: 6 / span 7; justify-self: end; }
}

/* --- Sélection : grands projets en alternance gauche / droite -------------- */
.portfolio-selection {
    padding-bottom: var(--esp-2xl);
}

.vitrine {
    display: grid;
    gap: var(--esp-2xl);
}

.vitrine__projet {
    position: relative;
}

.vitrine__projet > .badge-exemple {
    position: absolute;
    top: var(--esp-s);
    left: var(--marge);
}

.vitrine__lien {
    row-gap: var(--esp-m);
    text-decoration: none;
}

.vitrine__media {
    aspect-ratio: 4 / 5;
}

.vitrine__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--dur-lente) var(--ease-entree);
}

.vitrine__lien:hover .vitrine__media img,
.vitrine__lien:focus-visible .vitrine__media img {
    scale: 1.04;
}

.vitrine__texte {
    display: grid;
    gap: var(--esp-xs);
    align-content: center;
}

.vitrine__numero {
    font-family: var(--f-display);
    font-size: clamp(4rem, 2.4rem + 7vw, 10rem);
    font-weight: 900;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: var(--trait) var(--c-jaune);
}

.vitrine__meta,
.vitrine__prestations {
    color: var(--discret);
}

/* Le numéro et le lieu s'affichent au-dessus du titre, mais sont lus après lui. */
.vitrine__numero { order: -2; }
.vitrine__meta { order: -1; }

.vitrine__titre {
    display: block;
}

.vitrine__resume {
    max-width: 40ch;
}

@media (min-width: 64em) {
    .vitrine__projet--gauche .vitrine__media { grid-column: 1 / span 6; }
    .vitrine__projet--gauche .vitrine__texte { grid-column: 8 / span 5; }
    .vitrine__projet--droite .vitrine__media { grid-column: 7 / span 6; grid-row: 1; }
    .vitrine__projet--droite .vitrine__texte { grid-column: 1 / span 5; grid-row: 1; }
    .vitrine__media { aspect-ratio: 4 / 5; max-height: 86vh; }
    .vitrine__projet--droite > .badge-exemple { left: auto; right: var(--marge); }
}

/* --- La salle de projection (JS, portfolio.js) ------------------------------
   La salle s'éteint (voile noir fixe), le projet en cours passe au-dessus, son
   média vient au centre (transform) et un carton de film s'affiche (opacité). */
.salle-noire {
    position: fixed;
    inset: 0;
    z-index: 2;
    background: var(--c-noir);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.vitrine__projet.est-projete {
    z-index: 3;
}

.vitrine__media {
    transform-origin: 50% 50%;
}

/* Carton de film muet : double filet, texte centré, fond sombre translucide. */
.carton {
    position: absolute;
    inset: 50% 8% auto;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    border: var(--trait) solid var(--c-creme);
    outline: 1px solid var(--c-creme);
    outline-offset: -8px;
    background: rgb(12 11 9 / 0.82);
    color: var(--c-creme);
    text-align: center;
    translate: 0 -50%;
    opacity: 0;
    pointer-events: none;
}

.carton__presente,
.carton__meta {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--c-jaune);
}

.carton__titre {
    font-family: var(--f-italique);
    font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    line-height: 1;
}

/* Vignettage de projecteur sur le média projeté (opacité seule). */
.vitrine__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgb(12 11 9 / 0.7) 100%);
    opacity: var(--vignettage, 0);
    pointer-events: none;
}

/* --- Tout : index en tableau, aperçu qui suit la souris ------------------- */
.portfolio-index {
    position: relative;
    padding-bottom: var(--esp-2xl);
}

.index-projets {
    grid-column: 1 / -1;
    width: 100%;
    border-collapse: collapse;
}

.index-projets thead th {
    padding-block: var(--esp-xs);
    border-bottom: var(--trait) solid var(--texte);
    color: var(--discret);
    font-weight: 500;
    text-align: left;
}

.index-projets td,
.index-projets tbody th {
    padding-block: var(--esp-s);
    padding-right: var(--esp-s);
    border-bottom: 1px solid var(--filet);
    text-align: left;
    vertical-align: baseline;
    font-weight: 400;
}

.index-projets td.mono {
    color: var(--discret);
}

.index-projets__lien {
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    text-decoration: none;
}

.index-projets__ligne:hover .index-projets__lien,
.index-projets__lien:focus-visible {
    color: var(--c-jaune);
}

.index-projets__client,
.index-projets__prestations {
    display: none;
}

@media (min-width: 48em) {
    .index-projets__client { display: table-cell; }
}

@media (min-width: 64em) {
    .index-projets__prestations { display: table-cell; }
}

.index-projets__apercu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 12rem;
    aspect-ratio: 9 / 16;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    outline: var(--trait) solid var(--c-jaune);
    outline-offset: 4px;
}

.index-projets__apercu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portfolio-vide {
    padding-bottom: var(--esp-2xl);
}

/* --- Fiche projet ---------------------------------------------------------- */
.projet__tete {
    row-gap: var(--esp-m);
    padding-top: calc(var(--hauteur-entete) + var(--esp-l));
    padding-bottom: var(--esp-xl);
}

.projet__fil {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-xs);
    color: var(--discret);
}

.projet__fil a {
    color: var(--texte);
    padding-block: 0.6rem;
}

.projet__fil span[aria-current] {
    padding-block: 0.6rem;
}

.projet__resume {
    color: var(--discret);
}

.projet__repere {
    color: var(--discret);
}

@media (min-width: 64em) {
    .projet__fil { grid-column: 1 / -1; }
    .projet__titre { grid-column: 1 / span 9; }
    .projet__resume { grid-column: 1 / span 6; }
    .projet__repere { grid-column: 1 / span 6; }
}

.projet__medias {
    align-items: start;
    overflow-x: clip;     /* tirages inclinés pendant leur entrée : jamais de défilement horizontal */
    row-gap: var(--esp-l);
    padding-bottom: var(--esp-2xl);
}

.projet__media .media {
    aspect-ratio: 9 / 16;
}

.projet__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Planche contact : chaque média est un tirage de travers, bord crème,
   ombre dure, numéro de vue imprimé dans la marge (décollé au survol). */
.projet__media {
    position: relative;
    padding: clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem) clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem) 2.2rem;
    background: var(--c-creme);
    box-shadow: var(--decalage-ombre) var(--decalage-ombre) 0 var(--ombre);
    rotate: -1.6deg;
}

.projet__media--2 { rotate: 1.4deg; }
.projet__media--3 { rotate: -0.8deg; }

.projet__tirage {
    position: absolute;
    left: clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem);
    bottom: 0.65rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: var(--c-rouge);
}

@media (min-width: 48em) {
    .projet__medias--2 .projet__media--1,
    .projet__medias--3 .projet__media--1 { grid-column: 1 / span 4; }
    .projet__medias--2 .projet__media--2 { grid-column: 5 / span 4; margin-top: var(--esp-2xl); }
    .projet__medias--3 .projet__media--2 { grid-column: 5 / span 4; margin-top: var(--esp-2xl); }
    .projet__medias--3 .projet__media--3 { grid-column: 3 / span 4; }
    .projet__medias--1 .projet__media--1 { grid-column: 2 / span 6; }
}

@media (min-width: 64em) {
    .projet__medias--1 .projet__media--1 { grid-column: 4 / span 6; justify-self: center; }
    .projet__medias--1 .projet__media .media { max-height: 82vh; width: min(100%, 82vh * 9 / 16); }
    .projet__medias--2 .projet__media--1 { grid-column: 2 / span 4; }
    .projet__medias--2 .projet__media--2 { grid-column: 7 / span 4; }
    .projet__medias--3 .projet__media--1 { grid-column: 1 / span 4; }
    .projet__medias--3 .projet__media--2 { grid-column: 5 / span 4; }
    .projet__medias--3 .projet__media--3 { grid-column: 9 / span 4; margin-top: var(--esp-xl); }
}

/* --- Le générique : crédits de fin, rôle à gauche du centre, nom à droite.
   Avec JS, chaque ligne monte et s'efface comme un générique qui défile. */
.generique {
    display: grid;
    justify-items: center;
    gap: var(--esp-l);
    padding: var(--esp-xl) var(--marge) var(--esp-2xl);
    text-align: center;
}

.generique__titre {
    color: var(--c-jaune);
    letter-spacing: 0.3em;
}

.generique__liste {
    display: grid;
    gap: var(--esp-m);
    width: min(100%, 52rem);
}

.generique__ligne {
    display: grid;
    gap: 0.35rem;
}

.generique__ligne dt {
    color: var(--discret);
}

.generique__ligne dd {
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.generique__fin {
    max-width: 22ch;
    margin-top: var(--esp-m);
    font-family: var(--f-italique);
    font-style: italic;
    font-size: var(--fs-titre-section);
    line-height: 1;
}

.generique__fin em {
    color: var(--c-jaune);
}

@media (min-width: 48em) {
    .generique__ligne {
        grid-template-columns: 1fr 1fr;
        align-items: baseline;
        gap: var(--esp-m);
    }
    .generique__ligne dt { text-align: right; }
    .generique__ligne dd { text-align: left; }
}

/* Projet d'exemple sans visuels : un emplacement sobre et explicite. */
.projet__vide {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--esp-s);
    min-height: 50vh;
    border: 1px dashed var(--filet);
    color: var(--discret);
}

.projet__vide-anneau {
    width: 6rem;
    aspect-ratio: 1;
    border: var(--trait) solid var(--filet);
    border-radius: 50%;
}

.projet-suivant__lien {
    row-gap: var(--esp-xs);
    padding-block: var(--esp-xl);
    text-decoration: none;
}

.projet-suivant__lien:hover .projet-suivant__titre,
.projet-suivant__lien:focus-visible .projet-suivant__titre {
    text-decoration: underline;
    text-decoration-thickness: var(--trait);
    text-underline-offset: 0.12em;
}

.projet-action__grille {
    row-gap: var(--esp-m);
    padding-block: var(--esp-xl);
}

.projet-action__titre em {
    color: var(--accent);
}

.projet-action__liens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-m);
}

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