/* =========================================================================
   Ringo Captcha — feuille de style du widget
   =========================================================================

   RÈGLE DE CONCEPTION : le widget doit rester utilisable quelle que soit la
   largeur qu'on lui laisse — page pleine largeur, colonne étroite, popup,
   webview d'application (TikTok, Instagram, Messenger), écran zoomé.

   Jusqu'à la 2.7.8 la rangée de tuiles avait une largeur fixe et
   incompressible de 307 px (6 × 47 px + 5 × 5 px de gouttière), sans aucune
   media query ni retour à la ligne. Sur un écran de 360 px — la quasi-totalité
   du parc Android — il ne restait que 13 px de marge : le moindre padding de
   thème faisait sortir la 6e tuile du cadre. Quand cette tuile masquée était
   l'une des deux images identiques, le captcha devenait tout simplement
   insoluble (1 cas sur 3). Mesuré en production : 1,6 % des visiteurs Android
   parvenaient à résoudre le captcha, contre 16,9 % sur iOS.

   D'où les trois garanties ci-dessous :
     1. `flex-wrap` : une tuile passe à la ligne plutôt que d'être coupée.
        Support universel, c'est le filet de sécurité.
     2. Sous 400 px de fenêtre, la rangée est bornée à trois colonnes : une
        grille 3 × 2 régulière, à taille de tuile inchangée.
     3. Cibles d'au moins 44 px (recommandation WCAG 2.5.5 / Apple HIG), et
        aucune dimension figée en dur sur l'image.
   ========================================================================= */

/* --------------------------------------------------------------- conteneur */

.ringo-captcha-container {
    /* `inline-block` laissait le widget déborder de son parent sans jamais le
       contraindre. `block` + `max-width` le force à rester dans la place
       disponible. */
    display: block;
    max-width: 100%;
    /* Couleurs réglables en back-office : le rendu PHP pose les variables sur
       le conteneur quand elles sont définies, et la valeur de repli ci-dessous
       conserve l'apparence historique. */
    background-color: var(--ringo-bg, #fff);
    border-radius: 5px;
}

/* PAS de `container-type` ici, et c'est délibéré.
   Une requête de conteneur impose `contain: inline-size` : l'élément cesse
   alors de communiquer sa largeur intrinsèque à son parent. Or Elementor
   place le champ dans un conteneur `display: flex` dont l'item se dimensionne
   sur son contenu — contenu qui, muet, se retrouvait mesuré à ZÉRO. Résultat :
   un widget de 0 px de large, les six tuiles empilées les unes sous les
   autres et la consigne coupée mot à mot. Le même piège guette avec n'importe
   quel ancêtre en `inline-block`, en `float` ou en cellule de tableau.
   L'adaptation aux faibles largeurs repose donc sur deux mécanismes qui, eux,
   ne contraignent rien : le retour à la ligne des tuiles (universel) et les
   media queries ci-dessous. */

/* Elementor : l'item flex qui porte le champ doit occuper toute la largeur
   disponible, sinon il se réduit à la taille de son contenu. */
.elementor-field.ringo-captcha-elementor-wrapper {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

/* Le box-sizing des thèmes est imprévisible : on le fixe pour nos éléments
   uniquement, sinon padding et bordure s'ajoutent aux largeurs calculées et
   les tuiles débordent à nouveau. */
.ringo-captcha-container,
.ringo-captcha-container *,
.ringo-captcha-container *::before,
.ringo-captcha-container *::after {
    box-sizing: border-box;
}

.ringo-captcha-container p {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 6px;
    margin-top: 0;
    /* `inherit` par défaut : sans réglage, la consigne garde la couleur que
       lui donne le thème, comme avant. */
    color: var(--ringo-text, inherit);
}

.wpforms-container .ringo-captcha-container p {
    font-size: 16px;
}

/* Patch WP Forms */
.ringo-captcha-container .ringo-captcha-content {
    position: relative;
}

/* ------------------------------------------------------------ rangée de tuiles */

.ringo-captcha-container .ringo-captcha-bloc {
    display: flex;
    flex-direction: row;
    /* LA règle qui empêche toute tuile d'être coupée. */
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    max-width: 100%;
    /* Jamais de barre de défilement horizontale imposée à la page. */
    overflow: visible;
}

.ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image {
    /* Ne rétrécit pas, ne s'étire pas : la tuile garde une cible tactile
       confortable tant que la largeur le permet. */
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 4px;
    border: 1px solid #333;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Référentiel de positionnement pour l'image qu'elle contient : si un
       thème passe les images en `position: absolute`, celle-ci se cale sur sa
       propre tuile (top/left ci-dessous) au lieu de partir se placer par
       rapport à un ancêtre quelconque. */
    position: relative;
    /* Supprime le délai de 300 ms et le zoom au double-tap sur mobile : sans
       ça, un tap un peu appuyé pouvait être avalé ou déclencher un zoom. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    /* Le contenu est décoratif : pas de sélection de texte parasite au tap
       maintenu. */
    -webkit-user-select: none;
    user-select: none;
}

.ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image:hover {
    border-color: #007cba;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus clavier : les tuiles sont atteignables au clavier (tabindex + rôle
   ARIA posés par le rendu PHP). Sans indicateur visible, le captcha est
   inutilisable sans souris. */
.ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image:focus-visible {
    outline: 3px solid #007cba;
    outline-offset: 2px;
}

.ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image.selected {
    background-color: lightgoldenrodyellow;
    border-color: #28a745;
    border-width: 2px;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image-single {
    /* L'image remplit sa tuile : plus aucune dimension figée en pixels, donc
       plus de débordement quand la tuile s'étire ou se réduit. `max-width:
       none` neutralise le `img { max-width: 100% }` de certains thèmes qui
       écrasait la taille. */
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    object-fit: contain;
    /* Ancrage sur le coin de la tuile. Sans effet tant que l'image reste dans
       le flux — c'est le cas normal — mais décisif si un thème la positionne :
       elle reste alors collée à sa tuile au lieu de dériver. */
    top: 0;
    left: 0;
    /* L'angle est tiré au sort par tuile et passé en variable par le rendu
       PHP. Le garder ici (plutôt qu'en style inline) permet de le composer et
       de le neutraliser au besoin. */
    transform: rotate(var(--ringo-rot, 0deg));
    pointer-events: none; /* le clic appartient à la tuile, jamais à l'image */
}


/* Sur petit écran, six tuiles en ligne ne tiennent plus. Les tuiles GARDENT
   leur taille : on borne la rangée à trois colonnes et le retour à la ligne
   fait le reste — une grille 3 × 2 régulière, plutôt qu'un « 5 + 1 » bancal.
     3 × 48 px + 2 × 8 px de gouttière = 160 px. */
@media (max-width: 400px) {
    .ringo-captcha-container .ringo-captcha-bloc {
        max-width: 160px;
    }
}

/* ===== Alignement du widget =============================================
   Piloté depuis Réglages → Ringo Captcha → Apparence, et surchargeable par
   le filtre `ringo_captcha_alignment`. Le rendu par défaut reste aligné à
   gauche ; le passage à deux rangées sur écran étroit, lui, ne dépend pas de
   ce réglage : c'est une contrainte de place. */
.ringo-captcha-container.ringo-captcha-align-center {
    text-align: center;
}
/* La consigne porte son propre `text-align: left` : une règle explicite est
   nécessaire, l'héritage du conteneur ne la toucherait pas. */
.ringo-captcha-container.ringo-captcha-align-center p {
    text-align: center;
}
.ringo-captcha-container.ringo-captcha-align-center .ringo-captcha-bloc {
    justify-content: center;
    /* La rangée est bornée à trois colonnes sur écran étroit : sans marges
       automatiques, elle resterait collée à gauche malgré le centrage. */
    margin-left: auto;
    margin-right: auto;
}
.ringo-captcha-container.ringo-captcha-align-center .ringo-captcha-actions {
    justify-content: center;
}

.gfield--input-type-ringo_captcha > label {
    display: none;
}

/* ===== Mode placeholder (cache-safe) : spinner pendant l'AJAX initial ===== */
.ringo-captcha-container.ringo-captcha-pending {
    min-height: 60px;
}
.ringo-captcha-container .ringo-captcha-pending-ui {
    display: block;
}
.ringo-captcha-container .ringo-captcha-noscript {
    margin-top: 0;
}
.ringo-captcha-container .ringo-captcha-pending-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #007cba;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 8px;
    animation: ringo-captcha-spin 0.8s linear infinite;
}
@keyframes ringo-captcha-spin {
    to { transform: rotate(360deg); }
}

/* ===== Bouton de validation ==============================================
   La vérification ne part plus automatiquement à la deuxième tuile
   sélectionnée : sur mobile, un doigt qui touchait la tuile voisine
   déclenchait un échec immédiat et irrattrapable, suivi d'une régénération
   complète. L'utilisateur peut désormais corriger sa sélection avant de
   valider. (Comportement d'origine récupérable via le filtre
   `ringo_captcha_auto_submit`.) */
.ringo-captcha-container .ringo-captcha-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ringo-captcha-container .ringo-captcha-validate {
    cursor: pointer;
    background: #007cba;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 10px 18px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    /* Cible tactile confortable, quoi qu'en dise le thème. */
    min-height: 44px;
}
.ringo-captcha-container .ringo-captcha-validate[disabled] {
    background: #c9d3da;
    color: #5a6b76;
    cursor: not-allowed;
}
.ringo-captcha-container .ringo-captcha-validate:not([disabled]):hover {
    background: #005f8f;
}
.ringo-captcha-container .ringo-captcha-validate:focus-visible {
    outline: 3px solid #003a57;
    outline-offset: 2px;
}
.ringo-captcha-container .ringo-captcha-count {
    font-size: 13px;
    color: #555;
}

/* ===== Messages ==========================================================
   Une erreur technique (session expirée, captcha expiré, réseau) ne doit
   JAMAIS être présentée comme une mauvaise réponse : jusqu'à la 2.7.8 le
   serveur renvoyait un message précis que le script ignorait, affichant six
   croix rouges à la place. L'utilisateur croyait s'être trompé et recommençait
   indéfiniment. */
.ringo-captcha-container .ringo-captcha-feedback {
    /* Le bandeau s'ajuste à son texte plutôt que d'occuper toute la largeur
       de la colonne. */
    display: inline-block;
}
/* Vide, la zone ne doit rien réserver : un inline-block vide laisserait
   malgré tout la hauteur d'une ligne sous le captcha. */
.ringo-captcha-container .ringo-captcha-feedback:empty {
    display: none;
}

.ringo-captcha-container .ringo-captcha-message {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
}
.ringo-captcha-container .ringo-captcha-message--error {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
}
.ringo-captcha-container .ringo-captcha-message--warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}
.ringo-captcha-container .ringo-captcha-message--success {
    background: #d1e7dd;
    border: 1px solid #a3cfbb;
    color: #0f5132;
}
.ringo-captcha-container .ringo-captcha-message .ringo-captcha-retry {
    margin-left: 8px;
}

/* ===== Message "résolvez le captcha avant d'envoyer" ===== */
.ringo-captcha-container .ringo-captcha-must-solve {
    margin-top: 8px;
    padding: 8px 10px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 13px;
    line-height: 1.4;
}
.ringo-captcha-container .ringo-captcha-must-solve--pulse {
    animation: ringo-captcha-pulse 0.4s ease-out;
}
@keyframes ringo-captcha-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.6); }
    50%  { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* ===== Erreur de chargement (3 retries AJAX échoués) + bouton retry ===== */
.ringo-captcha-container .ringo-captcha-load-error {
    padding: 10px;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 4px;
    color: #842029;
    font-size: 13px;
    text-align: center;
}
.ringo-captcha-container .ringo-captcha-load-error p {
    margin: 0 0 8px 0;
    text-align: center;
}
.ringo-captcha-container .ringo-captcha-retry {
    cursor: pointer;
    background: #842029;
    color: #fff;
    border: 0;
    padding: 8px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
    min-height: 44px;
}
.ringo-captcha-container .ringo-captcha-retry:hover {
    background: #5c171b;
}
.ringo-captcha-container .ringo-captcha-retry:focus-visible {
    outline: 3px solid #842029;
    outline-offset: 2px;
}

/* Réservé aux lecteurs d'écran. */
.ringo-captcha-container .ringo-captcha-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Les utilisateurs qui demandent moins d'animation n'ont ni pulsation ni
   rotation du spinner. */
@media (prefers-reduced-motion: reduce) {
    .ringo-captcha-container .ringo-captcha-pending-spinner,
    .ringo-captcha-container .ringo-captcha-must-solve--pulse {
        animation: none;
    }
    .ringo-captcha-container .ringo-captcha-bloc .ringo-captcha-image:hover {
        transition: none;
    }
}