/* ============================================================
   COMMAND 2026 — « Ton loyer remboursé »  (Command™ / 3M)
   Surcharge de bts2026.css (chargé APRÈS lui).
   Palette maquette Figma : violet, bleu roi, rouge Command, jaune.
   ============================================================ */
:root{
  --cmd-violet:#9786BD; --cmd-violet-2:#6E6BB0;
  --cmd-blue:#3A5BA7;   --cmd-blue-2:#2E4E96;  --cmd-blue-title:#2C57A6;
  --cmd-red:#E40521;    --cmd-red-2:#BE0419;
  --cmd-yellow:#FFD600; --cmd-yellow-2:#FDDF48;
  --cmd-gris:#EBEBEB;
}

/* ---- Barre de navigation (bleu Command, pastilles blanches survol rouge) ---- */
.transpaviolet{background:var(--cmd-blue)!important;box-shadow:0 2px 10px rgba(0,0,0,.08);}
.bts-navbtn{
  display:inline-block;background:#fff;color:var(--bts-noir)!important;
  border:2px solid #fff;border-radius:22px;font-weight:700;
  padding:.35rem 1.5rem;text-decoration:none;transition:background .2s,color .2s;
}
.bts-navbtn:hover,.bts-navbtn:focus{background:var(--cmd-red)!important;color:#fff!important;text-decoration:none;}
.bts-nav-social a{color:#fff;}
.bts-nav-social a:hover,.bts-nav-social a:focus{color:#ffd6db;}

/* ---- Bande compte à rebours (rouge Command) ---- */
.cmd-compteur{background:var(--cmd-red)!important;color:#fff;}
.cmd-compteur .t18,.cmd-compteur div{color:#fff;}
.cmd-compteur .time-frame{
  background:#fff!important;color:var(--cmd-red)!important;
  border:none!important;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-weight:800;margin:0!important;min-width:46px;
}
/* Compte à rebours : 3 groupes centrés, espacement régulier */
.cmd-cd-groups{display:flex;justify-content:center;align-items:flex-start;gap:2.75rem;flex-wrap:wrap;margin-top:.4rem;}
.cmd-cd-unit{text-align:center;}
.cmd-cd-boxes{display:flex;justify-content:center;gap:7px;}
.cmd-cd-label{color:#fff;font-weight:700;letter-spacing:1px;margin-top:.45rem;font-size:15px;}
@media (max-width:575.98px){
  .cmd-cd-groups{gap:1.4rem;}
  .cmd-compteur .time-frame{min-width:38px;font-size:26px;padding:12px 6px;}
}

/* ---- Titres bleus (Comment participer ?, Je participe…) ---- */
.cmd-title-blue{color:var(--cmd-blue-title)!important;}

/* ---- Section « Je participe » (bleu roi) ---- */
.fondEau{background:var(--cmd-blue)!important;color:#fff;}
.fondEau .tblanc,.fondEau .t45b,.fondEau .t35,.fondEau .t16{color:#fff!important;}

/* ---- Section « Suivre ma demande » (gris clair) ---- */
.fondBeige{background:var(--cmd-gris)!important;}

/* ---- Footer : intitulés de colonnes en blanc (au lieu du vert BTS) ---- */
.footer .tvert{color:#fff!important;}

/* ---- Bannière interne Command (violet) ---- */
.bts-banniere{background-color:var(--cmd-violet)!important;aspect-ratio:1920 / 364;}
.bts-banniere-titre{top:50%;transform:translateY(-50%);left:25%;right:21%;}
@media (max-width:991.98px){
  /* ⚠️ Mobile : l'image BANNER-MOBILE-notext.webp a été RECADRÉE (violet vide du haut retiré,
     780x426) -> le conteneur suit ce ratio exact, l'image s'affiche en entier : confettis + logo
     calés EN HAUT de la section à TOUTES les largeurs, titre dans le violet conservé en bas.
     (défini ici car command2026.css est chargé APRÈS bts2026.css et écrase sa règle) */
  .bts-banniere{aspect-ratio:780 / 398;}
  .bts-banniere-titre{top:auto;transform:none;bottom:9%;left:6%;right:6%;}
}

/* ---- Coches de la liste « Comment participer ? » (image cocher.png) ---- */
.cmd-check{width:34px;height:34px;flex:0 0 34px;margin-right:1rem;}

/* ---- Interrupteurs (custom-switch) : ROUGE Command quand cochés (au lieu du jaune BTS) ---- */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.bts-switch .custom-control-input:checked ~ .custom-control-label::before{
  background-color:var(--cmd-red)!important;border-color:var(--cmd-red)!important;
}
.bts-switch .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow:0 0 0 .2rem rgba(228,5,33,.25)!important;
}

/* ---- Bouton rouge Command (Valider, Suivre) ---- */
.bcmdrouge{
  position:relative;overflow:hidden;z-index:0;display:inline-block;
  background:var(--cmd-red)!important;color:#fff!important;border:0;border-radius:10px;
  font-weight:700;padding:14px 28px;line-height:1;text-align:center;
  text-decoration:none;transition:color .25s ease;
}
.bcmdrouge::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--cmd-blue);transform:scaleY(0);transform-origin:50% 100%;   /* survol : remplissage bleu #3A5BA7 */
  transition:transform .35s ease;
}
.bcmdrouge:hover::before,.bcmdrouge:focus::before{transform:scaleY(1);}
.bcmdrouge:hover,.bcmdrouge:focus{color:#fff!important;text-decoration:none;}

/* Bouton jaune « Je suis prêt » : remplissage rouge au survol (au lieu du vert BTS) */
.bjaune:before{background:var(--cmd-red)!important;}
.bjaune:hover,.bjaune:focus{color:#fff!important;}
/* Bouton blanc « Commencer ma participation » : remplissage rouge + texte blanc au survol */
.bblanc:before{background:var(--cmd-red)!important;}
.bblanc:hover,.bblanc:focus{color:#fff!important;}
/* Modales reset : bouton d'action rouge au repos, remplissage bleu #3A5BA7 au survol (comme « Valider »).
   ⚠️ On force le fond rouge AUSSI au survol : sinon la règle BTS .bvert:hover (vert foncé) l'anime
   red -> vert sous le ::before bleu -> on voyait passer du vert. */
.bvert,.bvert:hover,.bvert:focus{background:var(--cmd-red)!important;}
.bvert:before{background:var(--cmd-blue)!important;}
.bvert:hover,.bvert:focus{color:#fff!important;}

/* ---- Champs de connexion (« J'ai déjà des identifiants ? ») ----
   Fond gris #EBEBEB + coins arrondis (le !important rétablit l'arrondi que Bootstrap
   retire au champ mot de passe parce qu'il est dans un .input-group). */
.creme{background:#EBEBEB!important;border:none!important;border-radius:8px!important;}

/* ---- Rangée produits (pleine largeur ; confettis intégrés dans l'image) ---- */
.cmd-produits{width:100%;height:auto;display:block;}

/* ---- Focus clavier visible (halo bleu Command) ---- */
a:focus-visible,button:focus-visible,.bts-navbtn:focus-visible,.bts-hero-zone:focus-visible{
  outline:3px solid var(--cmd-blue)!important;outline-offset:2px;
}

/* ---- Boutons du hero : VRAIS boutons blancs (leur emplacement est effacé dans l'image) ----
   Texte bleu Command, remplissage bleu au survol/focus. */
.cmd-hero-zone{color:var(--cmd-blue-title)!important;border-radius:12px;}
.cmd-hero-zone::before{background:var(--cmd-blue)!important;}
.cmd-hero-zone:hover,.cmd-hero-zone:focus-visible{color:#fff!important;}
.cmd-hero-zone:focus-visible{outline:3px solid #fff!important;outline-offset:2px;}

/* ---- Validation mot de passe en direct (thepassword.js) ----
   Overlay (position absolue, z-index élevé) affiché AU FOCUS -> ne décale pas les champs. */
.pw-rules{
  position:absolute; z-index:2000; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:.6rem .85rem; list-style:none; font-size:13px; line-height:1.6;
  background:#fff; border:1px solid #d7dbe0; border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  display:none;
}
.pw-rules.pw-show{display:block;}
.pw-rules::before{
  content:""; position:absolute; top:-7px; left:20px; width:12px; height:12px;
  background:#fff; border-left:1px solid #d7dbe0; border-top:1px solid #d7dbe0;
  transform:rotate(45deg);
}
.pw-rule{display:flex;align-items:center;gap:.5rem;color:#6b7280;transition:color .15s ease;}
.pw-rule + .pw-rule{margin-top:.15rem;}
.pw-rule .pw-ico{width:1em;text-align:center;font-weight:700;}
.pw-rule .pw-ico::before{content:"\25CB";}
.pw-rule.ok{color:#1e7e34;}
.pw-rule.ok .pw-ico::before{content:"\2713";}
button[type="submit"]:disabled,button[type="submit"].disabled{opacity:.55;cursor:not-allowed;}

/* Bloc code PIN / vérification : un fond sombre (hérité d'un CSS déployé, absent en local)
   apparaît DERRIÈRE ce bloc. Le mettre "transparent" laisse voir le noir.
   On le met en BLANC OPAQUE (couvre le noir) + la rangée aussi (supprime le microfilet). */
#main-content .col-12.mt-5.pt-5,
#main-content .row:has(> .col-12.mt-5.pt-5){background:#fff!important;}