/* ============================================================
   TPC — pages en texte
   Compagnie Taureau par Cornes
   Règle : le rendu doit être identique à l'original.
   Les dessins restent des images, les mots sont des mots.
   ============================================================ */

@font-face {
    font-family: 'TPC Didot';
    src: url('../fonts/Didot LT Std Bold.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --tpc-serif: 'TPC Didot', 'Didot LT Std Bold', 'Bodoni MT', Didot, Georgia, serif;
    --tpc-sans: 'Lato', 'Calibri', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ============================================================
   THÉÂTRE
   Le fil de pinceau est une image fixe que le CSS dévoile du
   haut vers le bas : même effet qu'avant, mais on peut
   rallonger le fil quand un spectacle s'ajoute.
   ============================================================ */

.tpc-theatre { position: relative; width: 100%; height: 83.67vw; }

.tpc-theatre__trait {
    position: absolute;
    left: 57.1vw; top: 0;
    height: 83.67vw;
    width: auto;
    transform: translateX(-50%);
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    animation: tpc-trace 13s linear forwards;
}
@keyframes tpc-trace { to { clip-path: inset(0 0 0 0); } }

.tpc-theatre__spectacle {
    position: absolute;
    display: block;
    text-decoration: none;
    color: #fff;
    opacity: 0;
    animation: tpc-apparition 1.2s ease-out forwards;
    transition: transform .45s ease, filter .45s ease;
}
.tpc-theatre__spectacle:hover,
.tpc-theatre__spectacle:focus-visible {
    text-decoration: none; color: #fff;
    filter: drop-shadow(0 0 .6vw rgba(255,255,255,.55));
}
.tpc-theatre__spectacle:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: .6vw; }

.tpc-theatre__spectacle--gauche { right: 44.5vw; text-align: right; max-width: 30vw; }
.tpc-theatre__spectacle--gauche:hover { transform: translateX(-.5vw); }
.tpc-theatre__spectacle--droite { left: 59.3vw; text-align: left; max-width: 30vw; }
.tpc-theatre__spectacle--droite:hover { transform: translateX(.5vw); }

.tpc-theatre__titre {
    display: block; font-family: var(--tpc-serif);
    font-size: 1.38vw; line-height: 1.28; letter-spacing: .18em;
    font-weight: 400; margin: 0 0 .28vw 0;
}
.tpc-theatre__sous-titre {
    display: block; font-family: var(--tpc-sans);
    font-size: .68vw; line-height: 1.35; letter-spacing: .06em;
    color: #cfcfcf; margin-bottom: .1vw;
}
.tpc-theatre__auteur,
.tpc-theatre__annee {
    display: block; font-family: var(--tpc-sans);
    font-size: .8vw; line-height: 1.35; color: #fff;
}
.tpc-theatre__auteur { letter-spacing: .05em; }
.tpc-theatre__annee  { letter-spacing: .16em; }

@keyframes tpc-apparition {
    from { opacity: 0; transform: translateY(.7vw); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ACTUALITÉS
   Le dessin d'origine (pinceaux + affiches) sert de fond,
   débarrassé de son texte. Les mots sont posés dessus,
   exactement là où ils étaient.
   ============================================================ */

.tpc-actus { position: relative; background: #000; }

.tpc-actus__bloc { position: relative; width: 100%; font-size: 0; }
.tpc-actus__fond { display: block; width: 100%; height: auto; }

.tpc-actu { display: contents; }

.tpc-actu__l {
    position: absolute;
    display: block;
    margin: 0;
    color: #000;
    font-family: var(--tpc-sans);
    font-weight: 400;
    line-height: 1.15;
    white-space: nowrap;
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vw);
    font-size: calc(var(--f) * 1vw);
    transform: translateY(-0.22em);
}
.tpc-actu__l--titre { font-weight: 700; }
a.tpc-actu__l { text-decoration: none; }
a.tpc-actu__l:hover { text-decoration: none; color: #000; opacity: .72; }
a.tpc-actu__l:focus-visible { outline: 2px solid #000; outline-offset: .2vw; }

/* L'affiche est posée sur le dessin, à sa place d'origine. */
.tpc-actu__affiche {
    position: absolute;
    display: block;
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vw);
    width: calc(var(--w) * 1vw);
    height: auto;
}

/* --- une actualité ajoutée après coup --- */
.tpc-actu-neuve { position: relative; width: 100%; }
.tpc-actu-neuve__trait {
    display: block; width: 100%; height: auto;
    clip-path: inset(0 100% 0 0);
    animation: tpc-balayage 2.6s ease-out .2s forwards;
}
@keyframes tpc-balayage { to { clip-path: inset(0 0 0 0); } }

.tpc-actu-neuve__affiche {
    position: absolute;
    width: 17vw; height: auto;
    display: block;
    box-shadow: 0 0 2vw rgba(0,0,0,.55);
    opacity: 0;
    animation: tpc-apparition 1s ease-out 1.9s forwards;
}
.tpc-actu-neuve--droite .tpc-actu-neuve__affiche { right: 5.4vw; top: .4vw; }
.tpc-actu-neuve--gauche .tpc-actu-neuve__affiche { left: 26vw;  top: .4vw; }

.tpc-actu-neuve .tpc-actu__l { opacity: 0; animation: tpc-apparition 1s ease-out 1.6s forwards; }

@media (prefers-reduced-motion: reduce) {
    .tpc-theatre__trait { animation: none; clip-path: none; }
    .tpc-theatre__spectacle,
    .tpc-actu-neuve .tpc-actu__l,
    .tpc-actu-neuve__affiche { animation: none; opacity: 1; }
    .tpc-actu-neuve__trait { animation: none; clip-path: none; }
}

/* ============================================================
   TÉLÉPHONE
   Le dessin ne tient pas sur un écran étroit : on repasse en
   liste, avec l'affiche et le texte l'un sous l'autre.
   ============================================================ */

@media (max-width: 640px) {

    /* --- Théâtre --- */
    .tpc-theatre { height: auto; padding: 6vw 6vw 12vw 15vw; }
    .tpc-theatre::before {
        content: ''; position: absolute; inset: 0; z-index: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,.85), #000 45%);
    }
    .tpc-theatre__trait {
        left: 7.5vw; top: 4vw; height: calc(100% - 8vw);
        width: 4vw; object-fit: cover; z-index: 1;
        clip-path: none; animation: none; opacity: .85;
    }
    .tpc-theatre__spectacle {
        position: relative; z-index: 1;
        top: auto !important; right: auto; left: auto;
        max-width: 100%; text-align: left;
        margin-bottom: 8vw;
        opacity: 1; animation: none;
    }
    .tpc-theatre__spectacle:hover { transform: none; }
    .tpc-theatre__titre      { font-size: 5.4vw; letter-spacing: .09em; margin-bottom: 1.6vw; }
    .tpc-theatre__sous-titre { font-size: 3.1vw; }
    .tpc-theatre__auteur,
    .tpc-theatre__annee      { font-size: 3.5vw; }

    /* --- Actualités --- */
    .tpc-actus { padding: 4vw 0 10vw; }
    .tpc-actus__bloc { font-size: 16px; }
    .tpc-actus__fond { display: none; }
    .tpc-actu-neuve__trait { display: none; }

    .tpc-actu {
        display: block;
        padding: 7vw 6vw;
        border-bottom: 1px solid #232323;
    }
    .tpc-actu-neuve {
        display: block;
        padding: 7vw 6vw;
        border-bottom: 1px solid #232323;
    }

    .tpc-actu__l,
    .tpc-actu-neuve .tpc-actu__l {
        position: static;
        white-space: normal;
        color: #fff;
        transform: none;
        opacity: 1;
        animation: none;
        font-size: 4vw;
        line-height: 1.4;
    }
    .tpc-actu__l--titre { font-size: 5.4vw !important; line-height: 1.2; margin-bottom: 1.5vw; }
    a.tpc-actu__l { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
    a.tpc-actu__l:hover { color: #fff; }

    .tpc-actu__affiche,
    .tpc-actu-neuve__affiche {
        display: block;
        position: static;
        width: 62vw;
        max-width: 320px;
        height: auto;
        margin: 5vw 0 0;
        opacity: 1;
        animation: none;
        box-shadow: 0 0 4vw rgba(0,0,0,.6);
    }
}

/* ============================================================
   CONTACT
   ============================================================ */

.tpc-contact { position: relative; }
.tpc-contact__fond { display: block; width: 100%; }
.tpc-contact__cadre { position: absolute; top: 5vw; left: 25vw; width: 50vw; }
.tpc-contact__dessin { display: block; width: 100%; }
.tpc-contact__champs { position: absolute; inset: 0; }

.tpc-contact__ligne { position: absolute; left: 10.5%; right: 4%; }
.tpc-contact__ligne--nom     { top:  8.2%; height: 7.6%; }
.tpc-contact__ligne--mail    { top: 20.0%; height: 7.6%; }
.tpc-contact__ligne--sujet   { top: 32.0%; height: 7.6%; }
.tpc-contact__ligne--message { top: 44.0%; height: 35%; }
.tpc-contact__ligne--envoi   { top: 86.0%; left: auto; right: 7%; }

.tpc-contact label {
    font-family: var(--tpc-serif); color: #fff;
    font-size: 1.55vw; letter-spacing: .02em; line-height: 1;
    display: inline-block; margin: 0 .6vw 0 0; vertical-align: middle;
}
.tpc-contact__ligne--message label { display: block; margin-bottom: .5vw; }

.tpc-contact input[type="text"],
.tpc-contact input[type="email"],
.tpc-contact textarea {
    font-family: var(--tpc-sans); font-size: 1.15vw; color: #fff;
    background: transparent !important; border: 0 !important; outline: 0;
    box-shadow: none; padding: 0 .3vw; width: 62%; vertical-align: middle;
    -webkit-appearance: none; appearance: none;
}
.tpc-contact textarea { width: 100%; height: 78%; resize: none; line-height: 1.45; padding: .2vw .3vw; }
.tpc-contact input:focus-visible,
.tpc-contact textarea:focus-visible {
    background: rgba(255,255,255,.1) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.55) !important;
}

.tpc-contact__envoyer {
    font-family: var(--tpc-serif); font-size: 1.75vw; letter-spacing: .04em;
    color: #fff; background: transparent; border: 0; padding: .2vw .4vw; cursor: pointer;
    transition: text-shadow .3s ease;
}
.tpc-contact__envoyer:hover { text-shadow: 0 0 .8vw rgba(255,255,255,.8); }
.tpc-contact__envoyer:focus-visible { outline: 2px solid #fff; outline-offset: .3vw; }

.tpc-contact__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tpc-contact__message {
    position: absolute; left: 10.5%; right: 4%; top: 81%;
    font-family: var(--tpc-sans); font-size: 1.05vw; line-height: 1.4; margin: 0;
}
.tpc-contact__message--ok     { color: #9ad7a0; }
.tpc-contact__message--erreur { color: #ef8f86; }

@media (max-width: 640px) {
    .tpc-contact { background: #000; padding: 10vw 6vw 14vw; }
    .tpc-contact__fond { display: none; }
    .tpc-contact__cadre { position: static; width: 100%; }
    .tpc-contact__dessin { display: none; }
    .tpc-contact__champs { position: static; display: block; }
    .tpc-contact__ligne {
        position: static; height: auto; margin-bottom: 6vw;
        border-bottom: 2px solid rgba(255,255,255,.75); padding-bottom: 2vw;
    }
    .tpc-contact__ligne--envoi { border: 0; text-align: right; }
    .tpc-contact label { display: block; font-size: 5vw; margin-bottom: 1.5vw; }
    .tpc-contact input[type="text"],
    .tpc-contact input[type="email"] { width: 100%; font-size: 4.2vw; }
    .tpc-contact textarea {
        height: 34vw; font-size: 4.2vw;
        border: 1px solid rgba(255,255,255,.35) !important; padding: 2vw;
    }
    .tpc-contact__envoyer { font-size: 5.4vw; }
    .tpc-contact__message { position: static; font-size: 3.8vw; margin-bottom: 4vw; }
}

/* ============================================================
   PAGES SPECTACLE — le dossier artistique qui se déroule
   ============================================================ */

.tpc-doc {
    background: #000;
    color: #e9e6e1;
    font-family: var(--tpc-sans);
    font-size: 1.02vw;
    line-height: 1.72;
    padding-bottom: 6vw;
    --accent: #b7392b;
}
.tpc-doc__centre { max-width: 52vw; margin: 0 auto; padding: 0 2vw; }
.tpc-doc p { margin: 0 0 1.1em; color: #e9e6e1; font-family: var(--tpc-sans); }
.tpc-doc a { color: #e9e6e1; }

/* --- ouverture --- */
.tpc-doc__ouverture {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    align-items: center;
    padding: 7vw 6vw 5vw;
}
.tpc-doc__ouverture img { width: 100%; height: auto; display: block; }
.tpc-doc__sur-titre {
    font-size: .72vw; letter-spacing: .3em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 1.6vw;
}
.tpc-doc__titre {
    font-family: var(--tpc-serif); font-weight: 400;
    font-size: 3.1vw; line-height: 1.1; letter-spacing: .02em;
    margin: 0 0 1.2vw; text-wrap: balance;
}
.tpc-doc__sous-titre { font-size: 1.15vw; color: #a8a29a; margin: 0 0 2.4vw; font-style: italic; }
.tpc-doc__filet { width: 4vw; height: 1px; background: var(--accent); margin: 0 0 2vw; }

.tpc-doc__generique { font-size: .95vw; line-height: 1.9; color: #bdb8b1; }
.tpc-doc__generique b { color: #fff; font-weight: 600; }
.tpc-doc__generique span { color: #7d7a75; display: inline-block; min-width: 8.5vw; }

/* --- sections --- */
.tpc-doc__section { padding: 4.5vw 0 1vw; }
.tpc-doc__chapitre {
    font-family: var(--tpc-serif); font-weight: 400;
    font-size: 2vw; line-height: 1.2; margin: 0 0 .4em;
    letter-spacing: .01em;
}
.tpc-doc__legende-chapitre {
    font-size: .8vw; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 1.4em;
}

/* --- citations --- */
.tpc-doc__citation {
    position: relative;
    margin: 3.5vw 0;
    padding: 2.4vw 0 2.4vw 4vw;
    border-left: 1px solid #3a3733;
}
.tpc-doc__citation::before {
    content: '\201C';
    position: absolute; left: .3vw; top: -.4vw;
    font-family: var(--tpc-serif);
    font-size: 7vw; line-height: 1; color: #2c2a27;
    pointer-events: none;
}
.tpc-doc__citation p { font-size: 1.18vw; line-height: 1.62; color: #fff; }
.tpc-doc__citation p:last-of-type { margin-bottom: 0; }
.tpc-doc__signature {
    display: block; margin-top: 1.4em;
    font-family: var(--tpc-serif); font-size: 1.05vw;
    color: var(--accent); letter-spacing: .04em;
}
.tpc-doc__signature small { display: block; font-family: var(--tpc-sans); font-size: .75vw; color: #7d7a75; letter-spacing: .1em; text-transform: uppercase; margin-top: .3em; }

/* --- vers --- */
.tpc-doc__vers p { font-style: italic; font-size: 1.1vw; line-height: 1.95; color: #d6d2cc; margin-bottom: .3em; }

/* --- images --- */
.tpc-doc__image { margin: 5vw 0; }
.tpc-doc__image img { display: block; width: 100%; height: auto; }
.tpc-doc__image--large { padding: 0 4vw; }
.tpc-doc__image--pleine { padding: 0; }
.tpc-doc__image figcaption {
    font-size: .74vw; letter-spacing: .12em; text-transform: uppercase;
    color: #6f6c68; margin-top: .9vw; padding: 0 4vw;
}

.tpc-doc__duo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2vw;
    margin: 5vw 0; padding: 0 4vw;
}
.tpc-doc__duo img { display: block; width: 100%; height: auto; }

/* --- pied de page du dossier --- */
.tpc-doc__pied {
    margin-top: 5vw; padding: 3.5vw 0 0;
    border-top: 1px solid #2a2825;
    font-size: .88vw; line-height: 1.95; color: #a8a29a;
}
.tpc-doc__pied b { color: #fff; font-weight: 600; }
.tpc-doc__colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; }

@media (max-width: 640px) {
    .tpc-doc { font-size: 4.1vw; line-height: 1.7; padding-bottom: 14vw; }
    .tpc-doc__centre { max-width: 100%; padding: 0 7vw; }
    .tpc-doc__ouverture { grid-template-columns: 1fr; gap: 7vw; padding: 10vw 7vw 6vw; }
    .tpc-doc__sur-titre { font-size: 3vw; margin-bottom: 4vw; }
    .tpc-doc__titre { font-size: 8.4vw; margin-bottom: 3vw; }
    .tpc-doc__sous-titre { font-size: 4.3vw; margin-bottom: 6vw; }
    .tpc-doc__filet { width: 14vw; margin-bottom: 5vw; }
    .tpc-doc__generique { font-size: 3.9vw; line-height: 2; }
    .tpc-doc__generique span { display: block; min-width: 0; margin-top: 1.2em; }
    .tpc-doc__section { padding: 10vw 0 2vw; }
    .tpc-doc__chapitre { font-size: 6.6vw; }
    .tpc-doc__legende-chapitre { font-size: 3.1vw; }
    .tpc-doc__citation { padding: 5vw 0 5vw 7vw; margin: 9vw 0; }
    .tpc-doc__citation::before { font-size: 22vw; left: -1vw; top: -1vw; }
    .tpc-doc__citation p { font-size: 4.5vw; }
    .tpc-doc__signature { font-size: 4.2vw; }
    .tpc-doc__signature small { font-size: 3vw; }
    .tpc-doc__vers p { font-size: 4.2vw; }
    .tpc-doc__image, .tpc-doc__duo { margin: 10vw 0; padding: 0; }
    .tpc-doc__duo { grid-template-columns: 1fr; gap: 4vw; }
    .tpc-doc__image figcaption { font-size: 3vw; padding: 0 7vw; }
    .tpc-doc__pied { font-size: 3.7vw; padding-top: 8vw; }
    .tpc-doc__colonnes { grid-template-columns: 1fr; gap: 6vw; }
}

/* ============================================================
   MAXELL 60 — bleu électrique de l'affiche sur le noir du site
   ============================================================ */

.tpc-doc--maxell {
    --accent: #29abe2;
    --sable: #e2d5b0;
}
.tpc-doc--maxell .tpc-doc__titre { letter-spacing: -.01em; }
.tpc-doc--maxell .tpc-doc__titre em {
    font-style: normal; color: var(--accent);
}
.tpc-doc--maxell .tpc-doc__signature { color: var(--sable); }
.tpc-doc--maxell .tpc-doc__citation { border-left-color: #1c3f52; }
.tpc-doc--maxell .tpc-doc__citation::before { color: #16303e; }

.tpc-maxell__reperes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13vw, 1fr));
    gap: 0;
    border-top: 1px solid #1c3f52;
    margin: 4vw 0 0;
}
.tpc-maxell__reperes > div { padding: 1.8vw 2vw 1.8vw 0; border-bottom: 1px solid #1c3f52; }
.tpc-maxell__reperes h3 {
    font-family: var(--tpc-sans); font-size: .72vw; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6em;
}
.tpc-maxell__reperes p { margin: 0; font-size: .95vw; color: #e9e6e1; }

.tpc-maxell__galerie {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.4vw; padding: 0 4vw; margin: 5vw 0;
}
.tpc-maxell__galerie img { display: block; width: 100%; height: auto; }
.tpc-maxell__galerie figure { margin: 0; grid-column: span 1; }
.tpc-maxell__galerie figure.large { grid-column: span 2; }

.tpc-maxell__attente {
    padding: 3vw 4vw; margin: 4vw 4vw; border: 1px dashed #1c3f52;
    color: #7fb9d6; font-size: .95vw; text-align: center;
}

@media (max-width: 640px) {
    .tpc-maxell__reperes { grid-template-columns: 1fr; margin-top: 8vw; }
    .tpc-maxell__reperes > div { padding: 4vw 0; }
    .tpc-maxell__reperes h3 { font-size: 3vw; }
    .tpc-maxell__reperes p { font-size: 4vw; }
    .tpc-maxell__galerie { grid-template-columns: 1fr; padding: 0; gap: 4vw; }
    .tpc-maxell__attente { font-size: 3.8vw; margin: 8vw 7vw; padding: 7vw 5vw; }
}

/* ============================================================
   PAGES SPECTACLE DESSINÉES (L’invasion, Ping Pong)
   Le dessin d’origine reste le fond, débarrassé de son texte.
   Les mots sont reposés dessus, à leur place exacte.
   ============================================================ */

.tpc-scene { position: relative; width: 100%; background: #000; font-size: 0; }
.tpc-scene__fond { display: block; width: 100%; height: auto; }

.tpc-scene__l {
    position: absolute;
    margin: 0;
    color: #fff;
    font-family: var(--tpc-sans);
    line-height: 1.15;
    white-space: nowrap;
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vw);
    font-size: calc(var(--f) * 1vw);
    transform: translateY(-0.2em);
}
.tpc-scene__l--serif  { font-family: var(--tpc-serif); letter-spacing: .04em; }
.tpc-scene__l--italic { font-style: italic; }
.tpc-scene__l--gras   { font-weight: 700; }
.tpc-scene__l--centre { transform: translate(-50%, -0.2em); }

/* paragraphes justifiés, dont la marge suit le dessin */
.tpc-scene__bloc {
    position: absolute;
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vw);
    width: calc(var(--w) * 1vw);
    color: #fff;
    font-family: var(--tpc-sans);
    font-size: calc(var(--f) * 1vw);
    line-height: calc(var(--lh) * 1vw);
    text-align: justify;
    hyphens: auto;
}
.tpc-scene__bloc p { margin: 0; color: #fff; font-family: inherit; font-size: inherit; line-height: inherit; }
.tpc-scene__forme { float: left; height: 100%; }

.tpc-scene__lien {
    position: absolute;
    left: calc(var(--x) * 1vw);
    top: calc(var(--y) * 1vw);
    width: calc(var(--w) * 1vw);
    height: calc(var(--h) * 1vw);
    display: block;
}
.tpc-scene__lien span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.tpc-scene__lien:focus-visible { outline: 2px solid #fff; outline-offset: .3vw; }

/* --- version téléphone : on déroule --- */
.tpc-scene__mobile { display: none; }

@media (max-width: 640px) {
    .tpc-scene { font-size: 16px; }
    .tpc-scene__fond,
    .tpc-scene__l,
    .tpc-scene__bloc,
    .tpc-scene__lien,
    .tpc-scene .Gallery_Video_icon { display: none; }

    .tpc-scene__mobile { display: block; padding: 0 0 12vw; }
    .tpc-scene__mobile img.photo { display: block; width: 100%; height: auto; margin-bottom: 8vw; }
    .tpc-scene__mobile img.affiche { display: block; width: 66vw; max-width: 330px; height: auto; margin: 8vw auto; }
    .tpc-scene__mobile > * { padding-left: 7vw; padding-right: 7vw; }
    .tpc-scene__mobile > img { padding: 0; }
    .tpc-scene__mobile h1 {
        font-family: var(--tpc-serif); font-weight: 400; color: #fff;
        font-size: 9vw; letter-spacing: .12em; margin: 0 0 6vw; text-align: center;
    }
    .tpc-scene__mobile .citation {
        font-style: italic; color: #fff; font-size: 4.2vw; line-height: 1.6;
        margin: 0 0 6vw; border-left: 2px solid #444; padding-left: 5vw;
    }
    .tpc-scene__mobile .citation b { display: block; font-style: normal; margin-top: 1em; letter-spacing: .1em; }
    .tpc-scene__mobile .distribution {
        font-family: var(--tpc-serif); color: #fff; font-size: 4.2vw; line-height: 2;
        text-align: center; margin: 0 0 8vw;
    }
    .tpc-scene__mobile .distribution span { color: #9c9791; display: block; font-size: 3.4vw; letter-spacing: .1em; }
    .tpc-scene__mobile .texte { color: #fff; font-size: 4.1vw; line-height: 1.7; text-align: justify; }
    .tpc-scene__mobile .texte p { margin: 0 0 1.2em; color: #fff; }
}

/* ============================================================
   ARBY OVANESSIAN — le sommaire aux quatre coups de pinceau
   ============================================================ */

.tpc-arby { position: relative; }
.tpc-arby__fond { display: block; height: 48vw; max-width: 100%; }

.tpc-arby__mot {
    position: absolute;
    z-index: 100;
    width: 5.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--tpc-serif);
    font-size: 2.4vw;
    letter-spacing: .1em;
    line-height: 1;
    transition: transform .35s ease;
}
.tpc-arby__mot:hover,
.tpc-arby__mot:focus-visible { color: #000; text-decoration: none; transform: scale(1.06); }
.tpc-arby__mot:focus-visible { outline: 2px solid #fff; outline-offset: .4vw; }

.tpc-arby__mot--bio     { top:  9vw; left: 43%;   height: 32vw; }
.tpc-arby__mot--cinema  { top: 17vw; left: 53%;   height: 23vw; }
.tpc-arby__mot--theatre { top: 12vw; left: 62.5%; height: 25vw; }
.tpc-arby__mot--divers  { top: 17vw; left: 73.5%; height: 20vw; }

/* --- l’entrée, le portrait dessiné --- */
.tpc-arby__porte {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4vw;
    align-items: center;
    padding: 6vw 6vw 4vw;
}
.tpc-arby__porte img { display: block; height: 42vw; max-width: 100%; width: auto; }
.tpc-arby__porte > div:first-child {
    position: relative;
    padding: 2vw 2.5vw;
    background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 60%, transparent 100%);
}
.tpc-arby__porte h1 {
    font-family: var(--tpc-serif); font-weight: 400; color: #fff;
    font-size: 3.4vw; line-height: 1.1; margin: 0 0 1.4vw; letter-spacing: .02em;
}
.tpc-arby__porte p {
    font-family: var(--tpc-sans); color: #cdc9c3;
    font-size: 1.08vw; line-height: 1.75; margin: 0 0 1em; max-width: 34vw;
}
.tpc-arby__porte .entrer {
    display: inline-block; margin-top: 1.4vw;
    font-family: var(--tpc-sans); font-size: .82vw; letter-spacing: .24em;
    text-transform: uppercase; color: #fff; text-decoration: none;
    border-bottom: 1px solid #6a6560; padding-bottom: .4vw;
}
.tpc-arby__porte .entrer:hover { color: #fff; border-bottom-color: #fff; }

/* --- titre de section posé sur les pages Arby --- */
.tpc-arby__titre {
    position: absolute; z-index: 200;
    top: 3vw; left: 6vw;
    font-family: var(--tpc-serif); font-weight: 400; color: #fff;
    font-size: 2.4vw; letter-spacing: .06em; margin: 0;
}
.tpc-arby__titre small {
    display: block; font-family: var(--tpc-sans); font-size: .78vw;
    letter-spacing: .24em; text-transform: uppercase; color: #8f8a84; margin-top: .5vw;
}

/* --- page en préparation --- */
.tpc-arby__attente {
    min-height: 34vw; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 8vw 6vw; background: #000;
}
.tpc-arby__attente h1 {
    font-family: var(--tpc-serif); font-weight: 400; color: #fff;
    font-size: 3vw; margin: 0 0 1.2vw; letter-spacing: .03em;
}
.tpc-arby__attente p { font-family: var(--tpc-sans); color: #9c9791; font-size: 1.1vw; margin: 0 0 1em; max-width: 44vw; }
.tpc-arby__attente a { color: #fff; }

@media (max-width: 640px) {
    .tpc-arby__fond { display: none; }
    .tpc-arby { background: #000; padding: 8vw 7vw 12vw; }
    .tpc-arby__mot {
        position: static; width: auto; height: auto;
        writing-mode: horizontal-tb; display: block;
        font-size: 7vw; letter-spacing: .05em;
        border-bottom: 1px solid #333; padding: 5vw 0; color: #fff;
    }
    .tpc-arby__mot:hover { transform: none; color: #fff; }
    .tpc-arby__porte { grid-template-columns: 1fr; gap: 7vw; padding: 8vw 7vw; }
    .tpc-arby__porte img { height: auto; width: 70vw; margin: 0 auto; }
    .tpc-arby__porte > div:first-child {
    position: relative;
    padding: 2vw 2.5vw;
    background: radial-gradient(ellipse at 30% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 60%, transparent 100%);
}
.tpc-arby__porte h1 { font-size: 8.5vw; margin-bottom: 4vw; }
    .tpc-arby__porte p { font-size: 4.1vw; max-width: 100%; }
    .tpc-arby__porte .entrer { font-size: 3.4vw; margin-top: 5vw; padding-bottom: 2vw; }
    .tpc-arby__titre { position: static; font-size: 7vw; padding: 6vw 7vw 0; }
    .tpc-arby__titre small { font-size: 3.2vw; margin-top: 2vw; }
    .tpc-arby__attente { min-height: 0; padding: 18vw 7vw; }
    .tpc-arby__attente h1 { font-size: 7.5vw; }
    .tpc-arby__attente p { font-size: 4.1vw; max-width: 100%; }
}