@charset "utf-8";
/* ===========================================================================
 * Fichier : public/assets/css/captcha.css
 * Projet  : Escape Cards v2
 * Lot     : 1.7 — Captcha à formes cliquables
 * ---------------------------------------------------------------------------
 * Mise en forme de la grille du captcha. Reprise du module fourni par
 * Guillaume, avec trois adaptations pour la v2, signalées ci-dessous :
 *   - les couleurs reprennent celles de la charte (charte.css) ;
 *   - le bouton « Annuler » adopte l'aspect des boutons du site ;
 *   - le rang du choix (1, 2, 3) apparaît dans la case sélectionnée.
 * Chargée après bootstrap.min.css et charte.css.
 * ======================================================================== */

/* IMP-001 (18/09/2026) : le bloc prenait près de 560 px de haut sur la page
   d'inscription. Marges et remplissages resserrés, textes regroupés, et
   disposition en DEUX COLONNES dès que la place le permet. Les neuf cases
   cliquables, elles, ne changent pas d'un pixel. */
.bloc-captcha {
    box-sizing: border-box;
    min-width: 0;
    margin: .75rem 0;
    padding: .7rem .8rem .8rem;
    border: 1px solid #c8d6df;
    border-radius: 0.4rem;
    background: #f9fcfd;
    color: #1d2633;
    /* Le bloc se mesure LUI-MÊME : c'est sa propre largeur qui décide de la
       disposition, pas celle de la fenêtre. Sans cela, le bloc posé dans la
       colonne étroite de la page d'accueil croirait avoir la place d'un grand
       écran et ses textes déborderaient. */
    container-type: inline-size;
}
.bloc-captcha legend {
    float: none;            /* Bootstrap 5 étire les legend : on l'en empêche */
    width: auto;
    padding: 0 .35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ec-bleu, #005e8f);
}
.bloc-captcha label { display: block; font-weight: 700; }
.bloc-captcha .aide {
    font-size: .8125rem;
    line-height: 1.35;
    margin: 0 0 .3rem;
    text-align: left;       /* le bloc peut être posé dans un formulaire centré */
}

.consigne-captcha {
    margin: 0 0 .35rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

/* Les quatre morceaux du bloc : consigne, repères, grille, actions.
   Par défaut ils s'empilent (colonne étroite, téléphone). */
.captcha-corps {
    display: grid;
    gap: .45rem;
    justify-items: start;
}

/* Le bouton et les deux lignes d'aide qui l'accompagnent. */
.captcha-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
    margin: 0;
}
.captcha-actions .aide { margin: 0; }
.captcha-etat    { font-weight: 600; }
/* La ligne de secours : la plus petite du bloc, et la dernière lue. Elle
   n'est utile qu'à la personne qui s'est trompée. */
.captcha-secours { font-size: .75rem; line-height: 1.3; color: #4a5560; margin: 0; }

/* DEUX PALIERS, selon la largeur dont le bloc dispose réellement.

   À PARTIR DE 21 rem (environ 336 px de contenu) — c'est le cas de la colonne
   d'inscription de la page d'accueil : le bouton et les deux lignes d'aide se
   rangent à DROITE de la grille, qui ne bouge pas. La consigne et le rappel
   des repères restent en pleine largeur au-dessus. Hauteur gagnée : environ
   110 px.

   À PARTIR DE 34 rem (environ 545 px) — fenêtre de signalement, grand écran :
   la grille passe carrément à gauche et TOUS les textes se rangent à sa
   droite. Le bloc tient alors en une seule hauteur de grille.

   En dessous de 23 rem (téléphone), tout reste empilé : c'est la seule
   disposition lisible sur un écran étroit. */
@container (min-width: 21rem) {
    .captcha-corps {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "consigne consigne"
            "reperes  reperes"
            "avant    avant"
            "grille   actions";
        column-gap: .7rem;
        row-gap: .35rem;
    }
    .consigne-captcha  { grid-area: consigne; }
    .captcha-reperes   { grid-area: reperes; }
    .captcha-avant     { grid-area: avant; }
    .grille-captcha    { grid-area: grille; }
    .captcha-actions   {
        grid-area: actions;
        align-self: start;
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
}

@container (min-width: 34rem) {
    .captcha-corps {
        grid-template-areas:
            "grille consigne"
            "grille reperes"
            "grille avant"
            "grille actions";
        align-content: start;
        column-gap: .9rem;
    }
    .consigne-captcha { align-self: end; }
}

.grille-captcha {
    display: grid;
    grid-template-columns: repeat(3, 4.3rem);
    gap: 0.5rem;
}
.case-captcha {
    position: relative;
    display: grid;
    width: 4.3rem;
    height: 4.3rem;
    padding: 0;
    place-items: center;
    border: 2px solid #c9d2d8;
    border-radius: 0.5rem;
    background: #ffffff;
    font-family: inherit;
    cursor: pointer;
}
.case-captcha .symbole-captcha { font-size: 3.25rem; line-height: 1; }

/* Le repère écrit : c'est lui qui rend la grille utilisable sans distinguer
   les couleurs. Il est donc toujours affiché, jamais optionnel. */
.repere-captcha {
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    min-width: 1.25rem;
    padding: .08rem .2rem;
    border: 1px solid #1d2633;
    border-radius: .2rem;
    background: #ffffff;
    color: #1d2633;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

/* IMP-004 (19/09/2026) : les SIX couleurs de la charte Escape Cards, données
   par Guillaume. Ce sont les seules valeurs hexadécimales du captcha ; le nom
   de classe est fabriqué à partir de la clé PHP (couleur-captcha-<clé>), donc
   toute couleur ajoutée dans captcha.php doit recevoir sa règle ici.
   Le repère écrit de chaque case (T, J, B, V, M, R) reste en encre sombre
   fixe : la couleur n'est jamais la seule information. */
.couleur-captcha-turquoise { color: #00afbd; }
.couleur-captcha-jaune     { color: #efad2b; }
.couleur-captcha-bleu      { color: #005e8f; }
.couleur-captcha-violet    { color: #5823d3; }
.couleur-captcha-marron    { color: #82522e; }
.couleur-captcha-rose      { color: #d32e70; }

.case-captcha:hover,
.case-captcha:focus-visible {
    border-color: #005e8f;
    outline: 0.15rem solid rgb(0 94 143 / 18%);
}
.case-captcha.selectionnee {
    border-color: #efad2b;
    background: #fff6dc;
    box-shadow: inset 0 0 0 2px #efad2b;
}

/* ADAPTATION v2 : pastille indiquant le rang du choix (1, 2 ou 3), pour que
   l'ordre sélectionné reste visible — utile si l'on hésite. */
.case-captcha[data-rang]::before {
    content: attr(data-rang);
    position: absolute;
    top: -.45rem;
    left: -.45rem;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #efad2b;
    color: #000;
    font-size: .78rem;
    font-weight: 800;
}

/* ADAPTATION v2 : bouton d'annulation à l'aspect des boutons du site. */
.bouton-annuler-captcha {
    margin-top: 0;
    padding: .3rem .7rem;
    border: 1px solid #02527D;
    border-radius: .35rem;
    background: #005e8f;
    color: #fff;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.bouton-annuler-captcha:hover:not(:disabled) { background: #074D73; }
.bouton-annuler-captcha:disabled { cursor: not-allowed; opacity: .55; }
.bouton-annuler-captcha:focus-visible { outline: 3px solid #efad2b; outline-offset: 2px; }

/* Le champ piège : invisible pour une personne, mais présent dans la page.
   Il n'est PAS masqué par « display:none » — certains programmes ignorent les
   champs ainsi masqués, ce qui ferait perdre au piège son intérêt. */
.champ-piege {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ===========================================================================
 * IMP-008 (20/09/2026) — « ON NE COMPREND PAS QU'IL FAUT LE REMPLIR AVANT »
 * ---------------------------------------------------------------------------
 * Remarque de Guillaume sur « Mon compte » : rien ne disait que ce contrôle
 * était obligatoire, ni qu'il se remplissait AVANT le bouton d'enregistrement.
 * On remplissait ses champs, on cliquait, et la page revenait avec un message
 * d'erreur — après coup.
 *
 * Quatre repères sont ajoutés, et aucun ne touche aux neuf cases cliquables :
 *   1. l'étiquette « obligatoire » à côté du titre du cadre ;
 *   2. la phrase « À faire AVANT de cliquer sur "…" », avec le nom du bouton ;
 *   3. le compteur « 0 sur 3 » → « 3 sur 3 », qui suit les clics ;
 *   4. le cadre lui-même, ambre tant que le code est incomplet, vert dès
 *      qu'il est complet — visible du coin de l'œil, sans rien lire.
 * ======================================================================== */

/* L'étiquette « obligatoire », dans la légende du cadre. Le rose de la charte
   sur blanc donne 4,78 pour 1 : au-dessus du minimum de 4,5 exigé pour du
   texte, alors qu'il est ici en gras et non en petit corps. */
.captcha-obligatoire {
    margin-left: .35rem;
    padding: .05rem .4rem;
    border: 1px solid #d32e70;
    border-radius: .8rem;
    background: #fdf0f5;
    color: #b02259;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: .08em;
}

/* La phrase qui dit dans quel ordre faire les choses. */
.captcha-avant {
    margin: 0;
    font-size: .875rem;
    line-height: 1.35;
    color: #7a4b00;
    text-align: left;
}
.captcha-avant strong { font-weight: 800; }
.captcha-avant i      { margin-right: .25rem; }

/* Le compteur d'avancement. Il est le premier élément de la rangée d'actions,
   donc le plus proche de la grille : on le voit bouger en cliquant. */
.captcha-compteur {
    margin: 0;
    padding: .12rem .5rem;
    border: 1px solid #c8d6df;
    border-radius: .8rem;
    background: #ffffff;
    color: #1d2633;
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.captcha-compteur-nombre { font-size: 1rem; }

/* Le cadre entier change de teinte. AMBRE tant qu'il manque quelque chose,
   VERT dès que les trois formes sont choisies. La couleur n'est jamais seule :
   le compteur, la ligne d'état et l'étiquette disent la même chose en mots. */
.bloc-captcha--incomplet {
    border-color: #efad2b;
    background: #fffdf6;
    box-shadow: inset .25rem 0 0 #efad2b;
}
.bloc-captcha--complet {
    border-color: #2e7d4f;
    background: #f6fbf8;
    box-shadow: inset .25rem 0 0 #2e7d4f;
}
.bloc-captcha--complet .captcha-obligatoire {
    border-color: #2e7d4f;
    background: #eaf5ee;
    color: #1f5c39;
}
.bloc-captcha--complet .captcha-obligatoire::after { content: " ✓"; }
.bloc-captcha--complet .captcha-compteur {
    border-color: #2e7d4f;
    background: #eaf5ee;
    color: #1f5c39;
}
.bloc-captcha--complet .captcha-avant { color: #1f5c39; }

/* Sans JavaScript, le script ne pose jamais ces classes lui-même : le cadre
   reste dans son état « incomplet » de départ, le bouton d'envoi reste ACTIF
   (il n'est jamais désactivé dans la page, seulement par le script), et c'est
   le serveur qui refuse — comme il l'a toujours fait. */

@media (max-width: 420px) {
    .grille-captcha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .case-captcha { width: 100%; }
    /* Sur un téléphone, la grille prend toute la largeur : elle ne doit pas
       rester collée à gauche dans une grille « justify-items: start ». */
    .captcha-corps { justify-items: stretch; }
}