/* Curseur a etiquette + lecteur du showreel. Logique : js/curseur.js.

   La pastille est centree sur la pointe de la souris : le conteneur .curseur
   est deplace en translate3d par le script, la pastille se recentre dessus
   avec son propre translate(-50%, -50%). Deux elements separes pour que le
   script n'ecrase jamais l'echelle d'apparition geree ici en CSS. */

.curseur {
    position: fixed;
    top: 0;
    left: 0;
    /* Au-dessus de la navbar (9000), du bouton retour en haut (9500) et du
       lecteur (9600), sous le rideau de transition de page. */
    z-index: 9700;
    pointer-events: none;
    will-change: transform;
}

.curseur__pastille {
    --morph: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.7em 1.05em;
    border-radius: var(--r); /* meme arrondi que tout le site (color.css) ; capsule 999px avant */
    background: var(--typo-blanche);
    color: #000;
    font-family: var(--police);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding var(--morph), gap var(--morph),
                background-color 0.35s ease, color 0.35s ease;
}

/* Le libelle a une largeur animable : --texte-l (sa largeur reelle, posee
   par curseur.js). La pastille glisse d'une etiquette a l'autre, et le texte
   peut se replier (copie d'une couleur, plus bas). */
.curseur__texte {
    display: inline-block;
    overflow: hidden;
    max-width: var(--texte-l, 20em);
    transition: max-width var(--morph), opacity 0.3s ease 0.1s, filter 0.3s ease 0.1s;
}

.curseur.est-visible .curseur__pastille {
    transform: translate(-50%, -50%) scale(1);
}

/* Triangle "play" en pur CSS, seulement sur la video d'accueil. */
.curseur__icone {
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4em 0 0.4em 0.65em;
    border-color: transparent transparent transparent currentColor;
}

.curseur[data-mode="play"] .curseur__icone {
    display: block;
}

/* Copie d'une couleur (nuanciers des pages projet). Au clic, la pastille
   "Copier" se transforme en rond vert qui ne contient plus que la coche :
   - le texte se replie (largeur -> 0) en s'effacant avec un leger flou ;
   - la pastille s'arrete sur un rond parfait (min-width = sa hauteur) ;
   - la coche, posee au centre hors du flux, apparait puis se dessine.
   Au retour ("copier"), tout se fait a l'envers.
   ⚠️ Une premiere version faisait s'elargir la coche DANS le flux : elle
   grandissait moins vite que le texte ne se repliait et la pastille passait
   un instant sous la taille du rond. Hors du flux, plus de course.
   Remplace la pop-up "Copie" de copiecolor.js, gardee pour le tactile. */
.curseur__pastille {
    position: relative;
    justify-content: center;
}

.curseur__coche {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.curseur[data-mode="copier"] .curseur__coche,
.curseur[data-mode="copie"] .curseur__coche {
    display: block;
}

/* 1em de texte (line-height 1) + 2 x 0.7em de marge = 2.4em de haut : le
   rond. Pose aussi sur "copier", sinon au retour le minimum sautait d'un coup
   alors que le texte n'etait pas encore deplie, et la pastille passait un
   instant sous la taille du rond. Sans effet visible sur "Copier", plus large. */
.curseur[data-mode="copier"] .curseur__pastille {
    min-width: 2.4em;
}

.curseur[data-mode="copie"] .curseur__pastille {
    min-width: 2.4em;
    padding: 0.7em;
    background: var(--vertmarque);
    color: var(--vertmarquedeux);
}

.curseur[data-mode="copie"] .curseur__texte {
    max-width: 0;
    opacity: 0;
    filter: blur(3px);
    /* A l'aller le texte s'efface d'abord, puis se replie ; au retour (regle
       de base) il se deplie puis reapparait, grace aux delais inverses. */
    transition: max-width var(--morph), opacity 0.2s ease, filter 0.2s ease;
}

.curseur[data-mode="copie"] .curseur__coche {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.25s ease 0.22s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s;
    animation: coche-trace 0.4s ease-out 0.38s forwards;
}

@keyframes coche-trace {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .curseur__pastille,
    .curseur__texte,
    .curseur[data-mode="copie"] .curseur__texte {
        transition: none;
    }

    .curseur[data-mode="copie"] .curseur__coche {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Sur le lecteur plein ecran : "Fermer x", meme pastille creme que les autres
   etiquettes du site. Une version verre depoli facon koto a ete refusee par
   Tibo : les boutons gardent son style. Croix en deux traits CSS, a droite
   du libelle (order). */
.curseur[data-mode="quitter"] .curseur__icone {
    display: block;
    position: relative;
    order: 2;
    width: 0.8em;
    height: 0.8em;
    border: 0;
}

.curseur[data-mode="quitter"] .curseur__icone::before,
.curseur[data-mode="quitter"] .curseur__icone::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.3px;
    height: 100%;
    background: currentColor;
}

.curseur[data-mode="quitter"] .curseur__icone::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.curseur[data-mode="quitter"] .curseur__icone::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Pose par le script tant que la pastille est affichee. `!important` car des
   regles du site forcent cursor: default/pointer sur les titres, paragraphes
   et liens, qui l'emporteraient sinon a l'interieur des cartes. */
html.curseur-cache,
html.curseur-cache * {
    cursor: none !important;
}

/* ---------- Lecteur plein ecran (facon koto.com) ---------- */

.reel {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.reel.est-ouvert {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

/* Pendant le fondu de fermeture, le lecteur ne doit deja plus capter la
   souris : sinon l'etiquette "FERMER" restait affichee sur la page. */
.reel:not(.est-ouvert) {
    pointer-events: none;
}

/* Toute la fenetre, format respecte (contain) : une video carree ou
   verticale n'est pas rognee. pointer-events: none pour que chaque clic
   arrive au lecteur (= fermer), y compris sur une iframe Vimeo, qui
   avalerait sinon les clics.
   ⚠️ Les feuilles des pages galerie plafonnent les <video> a 80vh : d'ou les
   max-* et marges remis a zero. */
.reel__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    padding: 0;
    margin: 0;
    border: 0;
    object-fit: contain;
    background: #000;
    pointer-events: none;
    transform: scale(1.03);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel.est-ouvert .reel__video {
    transform: scale(1);
}

.reel__video--plein {
    object-fit: cover;
}

.reel:focus {
    outline: none;
}

/* Barre du bas : pause / lecture, ligne de progression, temps, son.
   Tout est sans fond, blanc en mix-blend-mode: difference : ca s'inverse
   selon l'image dessous (noir sur un plan clair, blanc sur un plan sombre).
   Le blend opere dans le contexte d'empilement de .reel (position fixed +
   z-index), donc bien contre la video.
   ⚠️ Pas de rond derriere les icones : des pastilles creme ont ete essayees
   et refusees par Tibo. */
.reel__barre {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.reel__lecture,
.reel__son {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: #fff;
    mix-blend-mode: difference;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reel__lecture:hover,
.reel__son:hover {
    transform: scale(1.1);
}

.reel__lecture svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.reel__son svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.reel__son svg .trait {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.reel__jouer,
.reel.est-en-pause .reel__pause,
.reel__son-off,
.reel.est-muet .reel__son-on {
    display: none;
}

.reel.est-en-pause .reel__jouer,
.reel.est-muet .reel__son-off {
    display: block;
}

.reel__temps {
    flex: none;
    min-width: 5ch;
    color: #fff;
    mix-blend-mode: difference;
    font-family: var(--police);
    font-size: 0.8rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-align: right;
    user-select: none;
}

/* Zone de clic haute (16px) autour d'une ligne de 1px, qui s'epaissit au
   survol pour montrer qu'on peut s'y deplacer. */
.reel__piste {
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    outline: none;
    mix-blend-mode: difference;
}

.reel__ligne {
    position: relative;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    transition: height 0.2s ease;
}

.reel__piste:hover .reel__ligne,
.reel__piste:focus-visible .reel__ligne {
    height: 3px;
}

.reel__rempli {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

/* Fermeture au clavier : invisible a la souris (le curseur "FERMER" suffit),
   il n'apparait que lorsqu'on tabule dessus. */
.reel__fermer {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 0.7em 1.05em;
    border: 0;
    border-radius: var(--r);
    background: var(--typo-blanche);
    color: #000;
    font-family: var(--police);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.reel__fermer:focus-visible {
    opacity: 1;
    outline: 2px solid var(--vertmarque);
    outline-offset: 3px;
}

.reel__lecture:focus-visible,
.reel__son:focus-visible {
    outline: 2px solid var(--vertmarque);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .curseur__pastille,
    .reel,
    .reel__video {
        transition: none;
    }
}

/* Liens du footer (modes "lien" / "sortie", 26/09) : pastille BLANCHE a
   texte noir, "Voir" ou "Visiter" (blanc pur : le creme du site se
   perdait sur le gris du footer ; une version noire a ete refusee, comme
   une version ronde avec une fleche seule). */
.curseur[data-mode="lien"] .curseur__pastille,
.curseur[data-mode="sortie"] .curseur__pastille {
    background: #fff;
    color: #111111;
}

/* Pose par curseur.js le temps d'une image quand la pastille reapparait ou
   change de famille de couleur (blanc <-> creme) : la couleur saute au lieu
   de fondre. La forme et l'echelle restent animees. */
.curseur.sans-fondu .curseur__pastille {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding var(--morph), gap var(--morph);
}