/* ===========================================================================
   custom.css — chargé par YOOtheme sur TOUTES les pages du site.

   Ce fichier n'est jamais regénéré : YOOtheme le charge tel quel s'il existe
   (packages/theme/src/Listener/LoadThemeHead.php). Les retouches qui doivent
   survivre à une mise à jour du modèle vont ici.

   Tout ce qui suit est porté par « .com-users-login » ou « .artano-* », qui
   n'existent que sur l'écran de connexion : aucune règle ne peut fuir sur le
   reste du site.
   =========================================================================== */

/* ── Écran de connexion : l'anneau du sigle se trace ─────────────────────────

   Reprise de l'entrée en scène de l'application. L'anneau du sigle se dessine
   autour du mot-logo en 900 ms, se dilate, puis s'efface sans rien laisser
   derrière lui. Le reste apparaît en fondu, dans l'ordre de lecture, sans
   jamais glisser : la marque est le seul mouvement.

   Les fondus sont posés SOUS « html.artano-anime », classe ajoutée par
   custom.js avant la première peinture. Sans JavaScript la classe n'existe
   pas, aucune règle ne masque quoi que ce soit, et le formulaire reste
   visible — un écran de connexion invisible serait bien pire que pas
   d'animation.

   Les couleurs passent par les variables du greffon « Mode sombre Artano ».
   En mode clair elles ne sont pas déclarées et le repli s'applique ; en mode
   sombre elles valent déjà les tons remontés au seuil de lisibilité. Une seule
   écriture couvre donc les deux thèmes.
   ------------------------------------------------------------------------- */

/* Le bloc est centré : un logo aligné à gauche au-dessus d'un formulaire
   pleine largeur ne se lirait pas comme une composition. */
.com-users-login {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.artano-entree {
    --artano-mot-largeur: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* L'anneau monte bien plus haut que le mot-logo : sans cette réserve il
       sort de la page et se fait couper net par le haut de l'écran — mesuré à
       73 px perdus sur le gabarit actuel. La valeur se déduit de la géométrie
       et suit donc la largeur du mot : demi-diamètre de l'anneau (0,619 × L)
       moins la demi-hauteur du mot (0,070 × L), plus un peu d'air. */
    padding-top: calc(var(--artano-mot-largeur) * 0.549 + 20px);
    margin-bottom: 40px;
}

.artano-sigle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artano-mot {
    display: block;
    width: var(--artano-mot-largeur);
    height: auto;
}

/* Deux fichiers plutôt qu'un filtre : l'encre du sigle est trop foncée pour
   un fond sombre, et l'éclaircir en CSS déplacerait sa teinte. */
html:not(.dark-mode) .artano-mot--sombre { display: none; }
html.dark-mode .artano-mot--clair { display: none; }

/* L'anneau déborde très largement du mot-logo : il est sorti du flux pour ne
   pousser aucune mise en page, et n'intercepte aucun clic. Le cadre ne porte
   que le centrage — la dilatation est jouée sur le SVG lui-même, sinon les
   deux transformations se contrediraient. */
.artano-anneau-zone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--artano-mot-largeur) * 1.238);
    height: calc(var(--artano-mot-largeur) * 1.238);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.artano-anneau {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.artano-anneau circle {
    fill: none;
    stroke: var(--artano-accent, #2957FF);
    stroke-width: 2;
    /* Longueur du trait = périmètre du cercle, exprimé dans les unités du
       viewBox : 2 × pi × 146. Ramener le décalage à zéro découvre le trait
       d'un bout à l'autre — c'est ainsi qu'un cercle se dessine. */
    stroke-dasharray: 917.35;
    stroke-dashoffset: 917.35;
}

.artano-accroche {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--artano-atone, #566581);
}

/* ── Partition ──────────────────────────────────────────────────────────────
   Mêmes durées que dans l'application, à la milliseconde. */

html.artano-anime .artano-anneau circle {
    animation: artano-trace 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

html.artano-anime .artano-anneau {
    animation: artano-dilater 660ms cubic-bezier(0.3, 0, 0.2, 1) 900ms forwards;
}

html.artano-anime .artano-mot {
    opacity: 0;
    animation: artano-paraitre 480ms linear 600ms forwards;
}

html.artano-anime .artano-accroche {
    opacity: 0;
    animation: artano-paraitre 420ms linear 960ms forwards;
}

html.artano-anime .com-users-login__form {
    opacity: 0;
    animation: artano-paraitre 420ms linear 1200ms forwards;
}

html.artano-anime .com-users-login__options {
    opacity: 0;
    animation: artano-paraitre 480ms linear 1440ms forwards;
}

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

@keyframes artano-dilater {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(2.4); }
}

@keyframes artano-paraitre {
    to { opacity: 1; }
}

/* Écran étroit : le mot-logo rétrécit, l'anneau suit puisqu'il est calculé
   sur lui. */
@media (max-width: 480px) {
    .artano-entree { --artano-mot-largeur: 200px; }
}

/* « Réduire les animations » : on montre l'écran, sans le jouer. L'anneau
   disparaît — un cercle figé autour du logo n'a aucun sens. */
@media (prefers-reduced-motion: reduce) {
    .artano-anneau-zone { display: none; }

    html.artano-anime .artano-mot,
    html.artano-anime .artano-accroche,
    html.artano-anime .com-users-login__form,
    html.artano-anime .com-users-login__options {
        opacity: 1;
        animation: none;
    }
}