/**
 * Écran de vérification par code — Mon Compte (frontend public).
 *
 * ⚠️ Consomme le namespace FRONT `--cc-couleur-front-*`, JAMAIS le design-system
 * ADMIN `--cc-*` : ce dernier n'est pas chargé en front, l'écran sortirait sans
 * couleurs. La feuille déclare `cc-variables-frontend` en dépendance au
 * `wp_enqueue_style` (cc-frontend-assets.php), sans quoi elle pourrait être
 * servie avant le `:root` qui définit ses tokens.
 *
 * @package    CaisseConnect
 * @subpackage Frontend
 * @since      1.4.2
 * @version    1.4.2
 */

.cc-otp {
    max-width: 32rem;
}

.cc-otp-titre {
    color: var(--cc-couleur-front-forte);
    margin-bottom: 0.5rem;
}

.cc-otp-intro {
    margin-bottom: 0.5rem;
}

.cc-otp-delai {
    color: var(--cc-couleur-front-texte-principal);
    opacity: 0.75;
    font-size: 0.9em;
    margin-bottom: 1.25rem;
}

.cc-otp-form {
    margin-bottom: 1.5rem;
}

.cc-otp-code {
    font-size: 1.6rem;
    letter-spacing: 0.4em;
    text-align: center;
    width: 9em;
    padding: 0.4em 0.3em;
    border: 2px solid var(--cc-couleur-front-primaire);
    border-radius: 6px;
    background: var(--cc-couleur-front-arriere-plan);
}

.cc-otp-identite {
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--cc-couleur-front-secondaire);
    border-left: 4px solid var(--cc-couleur-front-primaire);
    border-radius: 4px;
    font-weight: 600;
}

.cc-otp-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* ---------------------------------------------------------------------------
 * Bloc « Renvoyer le code »
 * ------------------------------------------------------------------------ */

.cc-otp-renvoi {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid var(--cc-couleur-front-ombre-legere);
}

.cc-otp-renvoi-cibles {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.cc-otp-renvoi-cibles legend {
    padding: 0;
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--cc-couleur-front-forte);
}

.cc-otp-renvoi-cibles input[type="radio"] {
    margin-right: 0.4em;
}

.cc-otp-renvoi-cibles label {
    display: inline-block;
    margin-bottom: 0.45rem;
    margin-right: 0.75rem;
}

/* Un radio désactivé signale visuellement qu'il n'y a rien à choisir : sans
   cette règle, seul l'échec du clic l'apprendrait au client. La règle vise
   `:disabled + label`, donc le label ADJACENT — cf. la structure plate du
   balisage, qui est aussi ce dont dépend la bascule ci-dessous. */
.cc-otp-renvoi-cibles input[type="radio"]:disabled,
.cc-otp-renvoi-cibles input[type="radio"]:disabled + label {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ⚠️ BASCULE CSS PURE, SANS UNE LIGNE DE JS — et L'ORDRE DU DOM EST
   LOAD-BEARING : le combinateur `~` exige que le radio et le sous-bloc soient
   FRÈRES et que le radio PRÉCÈDE. Une refonte qui envelopperait chaque radio
   dans son `<label>` casserait la bascule SANS AUCUNE ERREUR.
   ⚠️ Dégradation : `display: none` vient de CETTE feuille — feuille absente ⇒
   sous-bloc VISIBLE, et c'est le radio qui fait foi côté serveur (cible
   « même » ⇒ le champ saisi est ignoré, quoi qu'il contienne). */
.cc-otp-renvoi-autre {
    display: none;
    margin-top: 0.5rem;
    padding-left: 1.6em;
}

#cc-otp-cible-autre:checked ~ .cc-otp-renvoi-autre {
    display: block;
}

.cc-otp-renvoi-autre label {
    display: block;
    margin-bottom: 0.3rem;
}

#cc-otp-nouveau-numero {
    width: 100%;
    max-width: 18em;
    padding: 0.4em 0.5em;
    border: 1px solid var(--cc-couleur-front-ombre-legere);
    border-radius: 4px;
    background: var(--cc-couleur-front-arriere-plan);
}

.cc-otp-erreur-numero {
    margin: 0.4rem 0 0;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--cc-couleur-front-forte);
}

/* `hidden` doit l'emporter sur le `display: block` que des thèmes posent
   parfois sur les `<p>` : sans cette règle, le message d'erreur serait visible
   dès le chargement. */
.cc-otp-erreur-numero[hidden] {
    display: none;
}

.cc-otp-secours {
    padding-top: 1rem;
    border-top: 1px solid var(--cc-couleur-front-ombre-legere);
}

.cc-otp-aide {
    font-size: 0.9em;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

/* Le caractère définitif de la sortie se lit SOUS le bouton, jamais au-dessus :
   c'est une conséquence à connaître au moment de cliquer. */
.cc-otp-definitif {
    margin-top: 0.6rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Page compte NEUTRALISÉE pendant une vérification
 *
 * ⚠️ LE DISCRIMINANT `body.cc-otp-en-cours` EST OBLIGATOIRE : cette feuille est
 * chargée sur TOUTE la page compte, la règle mordrait sinon sur les écrans
 * normaux, où la colonne de navigation existe.
 * ⚠️ `float: none` EST AUSSI NÉCESSAIRE QUE LA LARGEUR : WooCommerce pose
 * `float: right; width: 68%` — sans la navigation, le contenu resterait à 68 %
 * flottant à droite, ce qui est pire que le défaut d'origine.
 * ⚠️ La classe sur `<body>` est une SURFACE THEME-FACING : c'est le seul signal
 * dont dispose le thème, qui style la colonne de navigation de son côté.
 * ------------------------------------------------------------------------ */

body.cc-otp-en-cours .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
}

.button.cc-otp-bouton {
    background: var(--cc-couleur-front-forte);
    color: var(--cc-couleur-front-forte-texte);
}

.button.cc-otp-bouton-secondaire {
    background: transparent;
    color: var(--cc-couleur-front-texte-principal);
    border: 1px solid var(--cc-couleur-front-ombre-legere);
}