/*
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. */
#scInscriptionModal .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 {
    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;
}

.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;
}

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