/* =========================================================================
   Tuile « Crée ton histoire » — Imagilire Mini
   -------------------------------------------------------------------------
   Une invitation posée **dans** le rayon « Mes histoires », à la place d'une
   vignette et toujours en dernière position. Elle répond à un angle mort du
   bouton flottant : celui-ci vit en bas à droite de l'écran, réduit à un `+`
   tant qu'on ne le survole pas, et rien ne le rattache visuellement au rayon
   qu'il remplit. La tuile, elle, se lit à l'endroit exact où l'on cherche ses
   histoires — et surtout à l'endroit où l'on constate qu'on n'en a pas.

   Les deux commandes coexistent volontairement et ouvrent la même modale
   (#addStoryForm) : le bouton flottant reste joignable depuis n'importe quel
   endroit de la page, la tuile ne l'est qu'au niveau du rayon.

   Le dessin est celui d'un cadre en pointillé, convention établie pour « ici,
   il manque quelque chose et vous pouvez l'ajouter ». Il emprunte à
   `.book-cover` (css/styles.css) sa hauteur, son rayon d'angle et son
   soulèvement au survol : la tuile doit se lire comme une place vide dans la
   grille, pas comme un encart posé par-dessus.

   Comportement : js/library/add-story-tile.js, appelé par
   js/library/custom-stories.js.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Le cadre
   -------------------------------------------------------------------------- */

/* `height` reprend celle de `.book-cover` — 200 px, et 180 px sous 360 px de
   large. Les deux valeurs sont redites ici plutôt que partagées : la grille
   est en `auto-fill`, et une tuile plus courte que ses voisines laisserait un
   trou visible en fin de rayon. Si `.book-cover` change de hauteur, ces deux
   règles sont à suivre.

   Les quatre premières propriétés remettent le `<button>` à zéro. Un bouton,
   et non un `<div role="button">` : c'est le même choix qu'au Lot 7, tâche 1
   pour le bandeau de titre des vignettes — la tuile doit être atteignable au
   clavier, et un vrai bouton l'est sans qu'on ait à lui poser `tabindex`. */
.add-story-tile {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    font-family: inherit;

    position: relative;
    height: 200px;
    width: 100%;
    padding: 12px;
    border: 3px dashed var(--primary-color);
    border-radius: 5px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--primary-color);
    /* Un voile très clair de la couleur primaire : assez pour que la tuile ne
       soit pas un trou dans la grille, trop peu pour concurrencer du regard
       les couvertures illustrées qui l'entourent. */
    background-color: rgba(54, 177, 179, 0.06);
    transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}

/* Même soulèvement que `.book-cover:hover` : la tuile fait partie de la
   grille, elle doit y réagir comme les autres. */
.add-story-tile:hover {
    transform: translateY(-5px);
    background-color: rgba(54, 177, 179, 0.14);
    border-style: solid;
}

.add-story-tile:active {
    transform: translateY(-2px);
}

/* Le cadre est déjà en pointillé : un outil de focus en pointillé par-dessus
   se confondrait avec lui. D'où le trait plein et l'écart, qui se distinguent
   du repos quelle que soit la couleur du thème. */
.add-story-tile:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Le « + » et son libellé
   -------------------------------------------------------------------------- */

/* La pastille reprend le diamètre de la cible tactile minimale (44 px) sans
   avoir à la déclarer : c'est toute la tuile qui est cliquable, mais l'œil a
   besoin d'un point d'ancrage de cette taille pour lire le geste. */
.add-story-tile-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    transition: transform 0.3s;
}

/* Le même quart de tour que le bouton flottant au survol
   (css/imagilire-mini-add-story-button.css) : les deux commandes ouvrent la
   même modale, elles se répondent. */
.add-story-tile:hover .add-story-tile-plus {
    transform: rotate(90deg);
}

.add-story-tile-label {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    /* Un titre de vignette tient sur une ligne ; « Crée ta première histoire »
       en prend deux, et doit pouvoir les prendre sans déborder du cadre. */
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Contraste élevé
   -------------------------------------------------------------------------- */

/* `--primary-color` passe au noir pur dans ce mode : un cadre noir sur fond
   noir disparaîtrait entièrement. Le jaune vif du thème reprend le rôle, comme
   il le fait pour les boutons de la ligne de voile
   (css/imagilire-mini-story-scope.css). */
body.high-contrast .add-story-tile {
    background-color: transparent;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

body.high-contrast .add-story-tile:hover {
    background-color: rgba(255, 212, 0, 0.15);
}

body.high-contrast .add-story-tile-plus {
    background-color: var(--secondary-color);
    color: #000;
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
    /* D'accord avec `.book-cover` au même point de rupture (css/styles.css). */
    .add-story-tile {
        height: 180px;
        gap: 8px;
    }

    .add-story-tile-plus {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    .add-story-tile-label {
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .add-story-tile,
    .add-story-tile-plus {
        transition: none;
    }

    .add-story-tile:hover,
    .add-story-tile:active {
        transform: none;
    }

    .add-story-tile:hover .add-story-tile-plus {
        transform: none;
    }
}