/*
Fichier : css_inscription.css
Chemin  : D:\speedclicV2\www\assets\css\css_inscription.css
Rôle    : MODALE D'INSCRIPTION — la question d'entrée (particulier ou entreprise) et le
          panneau qui suit le choix.

          Fichier dédié plutôt qu'un ajout à css_connexion.css : connexion et inscription
          sont deux parcours distincts, et celui-ci va grossir quand les deux branches
          seront dessinées (règles 37 et 39). La boîte modale elle-même reste commune
          (.sc-modal-* dans speedclic_layout.css) — seul son contenu vit ici.

          DEUX CARTES DE MÊME POIDS. Aucune des deux réponses n'est « la bonne » : elles
          ont donc la même taille, la même couleur et le même relief. Mettre l'une en
          avant orienterait un choix qui n'appartient qu'au visiteur.

Date : 31/07/2026
*/

/* LA MODALE EST ÉLARGIE POUR CE PARCOURS (31/07/2026, Ramon : « ça fait tassé »).
   Les lignes d'aide se repliaient sur deux ou trois lignes dans une boîte prévue pour
   un formulaire de connexion. Une explication qui se casse en trois morceaux ne se lit
   plus, elle s'endure. Une ligne par carte, et de l'air autour. */
/* LA CONNEXION A LA MEME LARGEUR QUE L'INSCRIPTION (11/08/2026, demande de Ramon).
   Depuis que la connexion pose la MEME question — particulier ou entreprise — avec les
   memes cartes et les memes libelles, elle doit avoir la meme largeur : deux modales qui
   posent la meme question dans deux boites de tailles differentes donnent l'impression
   de deux ecrans sans rapport. La regle par defaut (.sc-modal-box, 380px, dans
   speedclic_layout.css) serrait les cartes sur deux lignes.
   Les deux selecteurs partagent la MEME declaration : le jour ou l'une bouge, l'autre
   suit, sans qu'on ait a y penser. */
#scInscriptionModal .sc-modal-box,
#scLoginModal .sc-modal-box {
    width: min(46rem, calc(100vw - 2rem));
    max-width: none;
}

/* LA CHARTE PREND TOUTE LA LARGE QU'ELLE PEUT — pour ne pas avoir d'ascenseur.
   Un texte qui engage se lit d'un seul regard : dès qu'il faut faire défiler, la moitié
   des lecteurs signe sans avoir lu la fin. On gagne la hauteur en largeur (moins de
   lignes repliées) et en resserrant l'interligne, pas en réduisant le texte. */
#scInscriptionModal.sc-modal-large .sc-modal-box {
    width: min(84rem, calc(100vw - 2rem));
}

/* On ne réserve que la place de l'en-tête et un peu d'air : chaque rem rendue au corps
   est une ligne d'ascenseur en moins. */
#scInscriptionModal .sc-modal-body,
#scLoginModal .sc-modal-body {
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
}

.sc-ins-question {
    margin: 4px 0 22px;
    font-size: 16px;
    font-weight: 600;
    color: #1a2535;
    text-align: center;
}

/* Les deux cartes L'UNE SOUS L'AUTRE, sur toute la largeur : c'est ce qui garantit
   l'explication d'un seul tenant. Côte à côte, il faudrait une modale démesurée ou
   des phrases amputées. */
.sc-ins-cartes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sc-ins-carte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    background: #f4f7fa;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: border-color .12s, background .12s, transform .12s;
}

.sc-ins-carte:hover,
.sc-ins-carte:focus-visible {
    background: #e9f4fa;
    border-color: #13a8d8;
    transform: translateY(-1px);
    outline: none;
}

.sc-ins-carte-titre {
    font-size: 15px;
    font-weight: 700;
    color: #0f5f80;
}

.sc-ins-carte-aide {
    font-size: 13px;
    line-height: 1.5;
    color: #55616e;
}

/* ------------------------------------------------------------------ La charte */

/* C'est un BONJOUR, pas une étiquette : il porte donc le ton du reste de la charte. */
.sc-chr-retenu {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #0f5f80;
    text-align: center;
}

.sc-chr-texte {
    font-size: 14px;
    line-height: 1.45;
    color: #26313d;
    text-align: center;
}

.sc-chr-texte p {
    margin: 0 0 9px;
}

.sc-chr-accueil {
    font-size: 16px;
    font-weight: 700;
    color: #1a2535;
    margin-bottom: 14px !important;
}

.sc-chr-fort {
    font-weight: 600;
    color: #0f5f80;
}

.sc-chr-intro {
    font-weight: 600;
    margin-top: 14px !important;
}

/* La numérotation est rendue par le navigateur : des numéros écrits dans le texte se
   décaleraient à la première insertion, et il faudrait rouvrir six traductions. */
.sc-chr-liste {
    display: inline-block;
    margin: 0 0 10px;
    padding: 0 0 0 1.4em;
    text-align: left;
}

.sc-chr-liste li {
    margin-bottom: 3px;
}

/* Le paragraphe qui diffère selon particulier / entreprise (09/08/2026). Il porte un
   argument, pas un engagement : il se distingue sans crier. */
.sc-chr-selon {
    margin-top: 14px !important;
    padding: 10px 12px;
    border-left: 3px solid #00a6d6;
    background: #f2f9fc;
    text-align: left;
}

.sc-chr-ban {
    font-weight: 600;
    color: #8a2b2b;
    margin-top: 14px !important;
}

.sc-chr-plaisir {
    margin-top: 12px !important;
    font-style: italic;
}

.sc-chr-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e3e7ec;
}

#scInsCharte[hidden] {
    display: none;
}

/* ------------------------------------------- Formulaire du particulier */

.sc-inf-titre {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #0f5f80;
    text-align: center;
}

.sc-inf-intro {
    margin: 0 0 20px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #55616e;
    text-align: center;
}

/* Étiquettes à gauche, champs à droite : sur cinq lignes, une grille se lit mieux
   qu'un empilement — l'œil suit une seule colonne de saisie. */
.sc-inf-grille {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: 10px 14px;
    align-items: center;
}

.sc-inf-grille[hidden] {
    display: none;
}

.sc-inf-grille label {
    font-size: 13.5px;
    font-weight: 600;
    color: #33404f;
    text-align: right;
}

.sc-inf-champ {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid #cfd6de;
    border-radius: 4px;
}

.sc-inf-champ:focus {
    outline: none;
    border-color: #13a8d8;
}

.sc-inf-aide {
    margin: 14px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7a8c;
    text-align: center;
}

/* « Retenez bien ce mot de passe » n'est pas une note de bas de page. */
.sc-inf-aide-forte {
    margin-top: 8px;
    color: #8a6d12;
    font-weight: 600;
}

.sc-inf-msg {
    margin-top: 16px;
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.sc-inf-msg[hidden] {
    display: none;
}

.sc-inf-msg.ok {
    background: #eefaf0;
    border: 1px solid #9ad3a8;
    color: #215e33;
}

.sc-inf-msg.ko {
    background: #fdeeee;
    border: 1px solid #e0a3a3;
    color: #8a2b2b;
}

/* Ne s'affiche que si le serveur a signalé une adresse déjà connue. */
.sc-inf-reset {
    margin-top: 12px;
    text-align: center;
}

.sc-inf-reset[hidden] {
    display: none;
}

.sc-inf-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e3e7ec;
}

#scInsFormulaire[hidden] {
    display: none;
}

/* ------------------------------------------------- Panneau qui suit le choix */

/* Il NOMME le choix retenu : l'usager doit voir que sa réponse a été entendue, même
   quand l'étape suivante n'existe pas encore. */
.sc-ins-retenu {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: #0f5f80;
    text-align: center;
}

.sc-ins-attente {
    padding: 14px 16px;
    background: #fff8e6;
    border: 1px solid #e8d08a;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b5412;
    text-align: center;
    margin-bottom: 18px;
}

#scInsSuite {
    text-align: center;
}

#scInsChoix[hidden],
#scInsSuite[hidden] {
    display: none;
}


/* ═══ LE PIÈGE À ROBOTS ═══                                          (27/08/2026)
   Un champ que personne ne voit et que les robots remplissent.

   IL SORT DE L'ÉCRAN, IL NE DISPARAÎT PAS. `display:none` et `visibility:hidden` sont
   les deux premières choses qu'un robot un peu sérieux teste avant de remplir : un champ
   ainsi masqué, il le laisse tranquille. Poussé hors du cadre, il reste un champ
   ordinaire à ses yeux — et invisible aux nôtres.

   AUCUN HUMAIN NE PEUT L'ATTEINDRE : hors de l'écran pour la souris, tabindex -1 pour le
   clavier, aria-hidden pour la voix. S'il arrive rempli, ce n'est pas une main.

   ET IL NE DOIT PAS DÉCALER LA PAGE D'UN PIXEL — d'où la hauteur nulle : le formulaire
   se dessine exactement comme s'il n'existait pas. */
.sc-inf-piege {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 0;
    overflow: hidden;
}

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\css_inscription.css === */