/* ══════════════════════════════════════════════════════════════════════════
   CONNEXION / INSCRIPTION / MOT DE PASSE OUBLIÉ — feuille de l'écran d'entrée.

   Traduction valeur par valeur des deux maquettes Claude Design du 26 août
   2026 : « Login CBR-CLOUD.dc.html » (poste) et « Login CBR-CLOUD Mobile.dc.html »
   (téléphone). Les deux maquettes posaient tout en style="…" sur chaque balise ;
   un style en ligne ne sait pas répondre à une media query, et c'est ce qui
   rendait impossible de servir les DEUX rendus depuis une seule page. Tout est
   donc ici, avec un seul point de rupture à 980px :

       ≥ 980px  → maquette poste : bandeau 96px, carte deux colonnes, illustration
       < 980px  → maquette mobile : bandeau 60px, carte une colonne, sans visuel

   La page ne dépend d'aucun cadre : ni Bootstrap, ni la feuille du site public.
   C'est délibéré — l'écran d'entrée doit se peindre même si le reste casse.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body.cn-body {
    margin: 0;
    background: #F0F4FD;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #0D1526;
}

/* LE BLEU DES LIENS S'ARRÊTE AU CORPS DE LA PAGE, ET NE MONTE PAS DANS LE BANDEAU.

   Il y montait, et c'est ce qui faisait que l'écran d'entrée n'avait pas le même
   bandeau que le reste du site alors que le balisage et la feuille sont pourtant
   partagés depuis le 27 août 2026. La règle s'écrivait `.cn-body a` — deux
   sélecteurs, 0-1-1 — et battait donc `.menu-link` (0-1-0) de public/includes/
   header.css. Mesuré avant correction sur /connexion : les entrées du menu et
   celles des panneaux déroulants rendaient rgb(37,99,235) là où l'accueil rend
   rgb(238,242,249) et rgb(220,230,245).

   Rien d'autre ne divergeait : même hauteur (89px), même fond (#040A14), même
   logo, même largeur de menu (374px). C'était cette seule ligne.

   `.cn-main` porte tout le contenu des quatre écrans d'entrée — connexion,
   activation, second facteur, réinitialisation — et le bandeau est son frère,
   pas son enfant. Le bleu reste donc exactement là où il a été dessiné. */
.cn-main a { color: #2563EB; text-decoration: none; }
.cn-main a:hover { color: #1741C4; }
.cn-body input { font-family: inherit; }
.cn-body input::placeholder { color: #9BA7BC; }
.cn-body *:focus-visible { outline: 2px solid #1550EC; outline-offset: 2px; }
.cn-body ::selection { background: #CFDDFB; }

.cn-page {
    min-height: 100vh;
    background: #F0F4FD;
    display: flex;
    flex-direction: column;
}

/* LE BANDEAU N'EST PLUS ICI. Il est partagé avec le site public — même
   balisage, même feuille : resources/views/partials/entete.blade.php et
   public/includes/header.css.

   Il a vécu ici, écrit d'après la maquette, et c'est ce qui a produit le défaut
   constaté en production le 27 août 2026 : DEUX bandeaux qui ne se
   ressemblaient plus. 96px sur la connexion contre 76px sur le site, logo et
   menu plus gros, et l'entrée « Entreprise » absente de la connexion parce que
   la maquette n'en dessinait que quatre. Deux balisages ne restent jamais
   d'accord.

   Ce que la variante « auth » du bandeau partagé conserve de la maquette :
   à droite, « Besoin d'aide ? » à la place de Panier et Inscription. */

/* ════════════════════════ CORPS ══════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   L'ÉCRAN D'ENTRÉE TIENT DANS LA FENÊTRE, SANS DÉFILEMENT.

   Il ne tenait pas : mesuré sur /connexion en 1920x1080, la page faisait
   1186px de haut pour 1080 de fenêtre, et 1197 sous l'onglet « Créer un
   compte ». Sur un poste à 125 % d'échelle — 1536x864 en pixels CSS, le
   réglage par défaut de Windows sur un écran 1080p — il manquait plus de
   300px. Il fallait donc défiler pour atteindre le bouton « Se connecter »
   d'un écran qui ne contient qu'un formulaire.

   LA CAUSE N'ÉTAIT PAS UN ÉLÉMENT DE TROP, MAIS UNE UNITÉ. Toutes les mesures
   verticales de cette feuille étaient soit fixes (champ 58px, bouton 62px,
   marge d'onglets 44px), soit indexées sur la LARGEUR (`vw`) — la traduction
   directe d'une maquette dessinée à une seule taille. Une fenêtre large et
   basse recevait donc les espacements d'une fenêtre haute.

   Chaque mesure verticale est désormais écrite `clamp(plancher, N vh, valeur
   de la maquette)` : la valeur du haut est celle du 26 août 2026, atteinte à
   1080px de haut ; en dessous, l'écran se resserre au lieu de déborder. Le
   plancher garde des champs cliquables et un texte lisible.

   Ce qui suit (`vh`) ne concerne QUE le poste : le bloc `max-width: 979px`
   plus bas réécrit toutes ces valeurs pour le téléphone, où la page défile
   normalement et où la maquette mobile fait foi.
   ════════════════════════════════════════════════════════════════════════ */

.cn-main {
    flex: 1;
    padding: clamp(12px, 2.2vh, 30px) clamp(20px, 3.5vw, 56px) 0;
}

.cn-carte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FCFDFE;
    border: 1px solid #E4EAF5;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 8px 34px rgba(15, 23, 42, .05);
}

/* ─────────────────── Volet gauche : l'argumentaire ───────────────────── */

/* `min-height` a disparu : c'était elle qui fixait le plancher de la carte à
   810px, quelle que soit la hauteur de la fenêtre. La carte prend maintenant la
   place qui reste (voir le bloc « poste » en fin de feuille), et ce volet, qui
   est une cellule de grille, s'étire avec elle. */
.cn-volet {
    position: relative;
    background: #F0F5FD;
    padding: clamp(20px, 3.4vh, 66px) clamp(28px, 4.03vw, 64px) clamp(18px, 2.9vh, 52px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cn-visuel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: clamp(84px, min(8.4vw, 12vh), 128px);
    overflow: hidden;
    pointer-events: none;
}
/* `height: auto` N'EST PAS DÉCORATIF ICI. La balise porte ses attributs width et
   height (984x1070) pour que le navigateur réserve la place avant le
   téléchargement et n'escamote pas la mise en page. Sans cette règle, c'est
   l'attribut height qui gagne : l'illustration se peignait à 493x1070 au lieu de
   493x536, deux fois trop haute, et débordait par le haut du cadre. */
/* `max-height` complète la paire width/height : sur une fenêtre basse, le cadre
   ci-dessus n'a plus la place de l'illustration à 67 % de large, et `overflow:
   hidden` la rognerait par le haut — c'est-à-dire par l'écran qu'elle montre.
   Un élément remplacé dont la hauteur bute sur `max-height` voit sa largeur
   recalculée depuis son rapport : elle rétrécit entière au lieu d'être coupée. */
.cn-visuel img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 67%;
    height: auto;
    max-height: 100%;
    user-select: none;
}

.cn-volet-texte {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2.4vh, 26px);
    max-width: 48%;
}

.cn-surtitre {
    color: #1B5CF0;
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cn-h1 {
    margin: 0;
    font-size: clamp(28px, min(3.66vw, 5.2vh), 58px);
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -0.028em;
    color: #0C1424;
    max-width: 8em;
}

.cn-accroche {
    margin: 0;
    font-size: clamp(15px, min(1.39vw, 2vh), 22px);
    line-height: 1.62;
    color: #5A6B85;
    max-width: 15em;
    text-wrap: pretty;
}

.cn-atouts {
    list-style: none;
    margin: clamp(6px, 1.6vh, 18px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.6vh, 28px);
}
.cn-atouts li {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: clamp(14px, min(1.14vw, 1.7vh), 18px);
    color: #31405A;
    font-weight: 500;
}
.cn-atouts svg { flex: none; width: 24px; height: 24px; }

.cn-promesse {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid #E4EAF5;
    border-radius: 16px;
    padding: clamp(13px, 2vh, 22px) clamp(18px, 1.9vw, 26px);
    width: clamp(290px, 63%, 465px);
    margin-left: -10px;
}
.cn-promesse svg { flex: none; width: 26px; height: 26px; }
.cn-promesse span { font-size: clamp(14.5px, 1.6vh, 17px); color: #41506B; }

/* ─────────────────── Volet droit : les formulaires ───────────────────── */

.cn-formulaires {
    background: #FCFDFE;
    border-left: 1px solid #E7EDF6;
    padding: clamp(18px, 2.8vh, 50px) clamp(26px, 4.29vw, 68px) clamp(18px, 2.8vh, 52px);
}

.cn-onglets {
    display: flex;
    border-bottom: 1px solid #E4EAF5;
    margin-bottom: clamp(14px, 2.6vh, 40px);
}
.cn-onglet {
    flex: 1;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 0 clamp(10px, 1.6vh, 18px);
    white-space: nowrap;
    text-align: center;
    font-family: inherit;
    font-size: clamp(14px, min(1.1vw, 1.62vh), 17.5px);
    font-weight: 500;
    color: #5A6B85;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color .18s ease, border-color .18s ease;
}
.cn-onglet:hover { color: #2A3850; }
.cn-onglet.is-actif,
.cn-onglet.is-actif:hover {
    font-weight: 600;
    color: #1550EC;
    border-bottom-color: #1550EC;
}

.cn-h2 {
    margin: 0;
    font-size: clamp(25px, min(2.46vw, 3.3vh), 39px);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: #0C1424;
}

.cn-intro {
    margin: clamp(7px, 1.2vh, 14px) 0 clamp(14px, 2.3vh, 34px);
    font-size: clamp(15px, 1.6vh, 17px);
    color: #5A6B85;
}

.cn-label {
    display: block;
    font-size: clamp(14px, 1.45vh, 15.5px);
    font-weight: 600;
    color: #2A3850;
    margin-bottom: clamp(5px, 0.9vh, 11px);
}

.cn-champ-boite { position: relative; }
.cn-champ-boite.cn-espace { margin-bottom: clamp(14px, 2.4vh, 26px); }

.cn-icone {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    pointer-events: none;
}

/* 44px de plancher : c'est la cible tactile minimale, et c'est aussi la hauteur
   en dessous de laquelle l'icône de 21px et le texte ne cohabitent plus. */
.cn-champ {
    width: 100%;
    height: clamp(44px, 5.4vh, 58px);
    padding: 0 20px 0 58px;
    font-size: clamp(14px, min(1.07vw, 1.6vh), 17px);
    color: #0C1424;
    background: #fff;
    border: 1px solid #E4EAF5;
    border-radius: 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cn-champ:focus {
    border-color: #1550EC;
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 80, 236, .12);
}

/* Mot de passe : icône cadenas plus foncée, place à droite pour l'œil. */
.cn-champ-boite.cn-mdp .cn-icone { left: 23px; width: 20px; height: 20px; }
.cn-champ.cn-champ-mdp {
    padding: 0 60px 0 58px;
    font-size: clamp(15px, 1.6vh, 17px);
    letter-spacing: 0.14em;
}
.cn-champ.cn-champ-mdp::placeholder { letter-spacing: 0.14em; }

.cn-oeil {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: #5A6B85;
    border-radius: 8px;
    transition: color .16s ease, background .16s ease;
}
.cn-oeil:hover { color: #1550EC; background: #F1F5FE; }
.cn-oeil svg { width: 22px; height: 22px; }
/* La barre oblique n'apparaît que quand le mot de passe est en clair. */
.cn-oeil .cn-oeil-barre { display: none; }
.cn-oeil.is-visible .cn-oeil-barre { display: block; }

.cn-ligne-oubli {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(8px, 1.3vh, 14px);
}
.cn-ligne-oubli a { font-size: clamp(13.5px, 1.4vh, 15px); color: #2563EB; font-weight: 500; }

/* La case à cocher : l'input natif reste dans le flux (masqué), le carré est
   son frère suivant — la coche se pilote donc en CSS pur, sans JavaScript. */
.cn-case {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(10px, 1.8vh, 22px) 0 clamp(12px, 2.2vh, 28px);
    cursor: pointer;
    font-size: clamp(14.5px, 1.6vh, 17px);
    color: #41506B;
}
.cn-case-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cn-case-carre {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid #C6D0E0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background .14s ease, border-color .14s ease;
}
.cn-case-carre svg { width: 14px; height: 14px; opacity: 0; transition: opacity .14s ease; }
.cn-case-input:checked + .cn-case-carre { background: #1550EC; border-color: #1550EC; }
.cn-case-input:checked + .cn-case-carre svg { opacity: 1; }
.cn-case-input:focus-visible + .cn-case-carre { outline: 2px solid #1550EC; outline-offset: 2px; }

.cn-cta {
    width: 100%;
    height: clamp(48px, 5.75vh, 62px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #1550EC;
    color: #fff;
    font-family: inherit;
    font-size: clamp(16px, 1.78vh, 19px);
    font-weight: 600;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(21, 80, 236, .24);
    transition: background .16s ease;
}
.cn-cta:hover { background: #0F41CE; }
.cn-cta:active { background: #0B36AE; }
.cn-cta svg { position: absolute; right: 26px; width: 24px; height: 24px; }

.cn-bascule {
    margin: clamp(10px, 1.9vh, 24px) 0 0;
    text-align: center;
    font-size: clamp(14.5px, 1.55vh, 16.5px);
    color: #5A6B85;
}
.cn-bascule a { font-weight: 500; }

.cn-note {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 1.5vw, 20px);
    margin-top: clamp(10px, 2.2vh, 32px);
    background: #F4F7FF;
    border: 1px solid #DEE7FB;
    border-radius: 16px;
    padding: clamp(12px, 1.9vh, 24px) clamp(16px, 1.9vw, 26px);
}
.cn-note svg { flex: none; width: clamp(24px, 3vh, 34px); height: clamp(24px, 3vh, 34px); margin-top: 2px; }
.cn-note-titre { font-size: clamp(14.5px, 1.55vh, 17px); font-weight: 700; color: #0C1424; margin-bottom: clamp(3px, 0.7vh, 8px); }
.cn-note-texte { font-size: clamp(13.5px, 1.45vh, 16px); line-height: 1.5; color: #4A5A75; max-width: 24em; }

/* ─────────────────── Inscription : champs supplémentaires ───────────── */

.cn-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-bottom: clamp(10px, 1.8vh, 22px);
}
.cn-duo .cn-icone { left: 20px; width: 20px; height: 20px; }
.cn-duo .cn-champ { height: clamp(42px, 5.2vh, 56px); padding: 0 18px 0 54px; }

/* L'inscription a deux champs de plus que la connexion et le même écran pour
   les tenir : ses champs partent 2px plus bas et ses marges sont plus serrées.
   Le rapport entre les deux est conservé à toutes les hauteurs. */
.cn-form-inscription .cn-champ { height: clamp(42px, 5.2vh, 56px); }
.cn-form-inscription .cn-champ-boite.cn-espace { margin-bottom: clamp(10px, 1.8vh, 22px); }

.cn-force {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: clamp(6px, 1.2vh, 16px);
}
.cn-force-barres { display: flex; gap: 9px; flex: 1; }
.cn-force-barres span {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #DFE5F0;
    transition: background .18s ease;
}
.cn-force-barres span.is-pleine { background: #1550EC; }
.cn-force-txt { font-size: 14.5px; color: #7A88A0; white-space: nowrap; }

.cn-label-confirme { margin: clamp(10px, 1.8vh, 22px) 0 clamp(5px, 0.9vh, 11px); }

.cn-case-conditions {
    align-items: flex-start;
    margin: clamp(10px, 1.8vh, 24px) 0 clamp(12px, 2.2vh, 28px);
    font-size: clamp(14px, 1.55vh, 16.5px);
    line-height: 1.5;
}

/* ─────────────────── Le message du serveur ───────────────────────────── */

/* Rendu par le SERVEUR, au-dessus du formulaire concerné. Il n'est pas
   décoratif : c'est la seule réponse que reçoit quelqu'un qui s'est trompé de
   mot de passe, dont le compte est suspendu, ou dont l'adresse attend encore sa
   confirmation. Il doit donc s'afficher sans JavaScript. */
.cn-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 clamp(14px, 2.4vh, 26px);
    padding: clamp(11px, 1.5vh, 16px) 18px;
    border-radius: 12px;
    font-size: clamp(13.5px, 1.44vh, 15.5px);
    line-height: 1.45;
    border: 1px solid;
}
.cn-message svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cn-message.est-ok   { background: #ECFDF3; border-color: #A9E5C1; color: #10653A; }
.cn-message.est-warn { background: #FFF8EB; border-color: #F5D699; color: #8A5A08; }
.cn-message.est-err  { background: #FEF2F2; border-color: #F6C3C3; color: #99201E; }

.cn-renvoi {
    width: 100%;
    height: 50px;
    margin-bottom: 26px;
    background: #fff;
    border: 1px solid #C7D6F5;
    border-radius: 12px;
    color: #1550EC;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.cn-renvoi:hover { background: #F1F5FE; border-color: #1550EC; }

/* ─────────────────── Second facteur ───────────────────────────────────
   L'écran du code est la DEUXIÈME ÉTAPE DE LA MÊME CONNEXION. Il reprend donc
   la carte, les couleurs et le bandeau de l'écran précédent : changer
   d'habillage entre le mot de passe et le code donnerait l'impression d'avoir
   changé de site — exactement ce qu'un second facteur ne doit jamais donner. */

.cn-carte-seule {
    display: block;
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(30px, 3.53vw, 52px) clamp(26px, 3.4vw, 52px) clamp(30px, 3.4vw, 48px);
}

.cn-2fa-tete { text-align: center; margin-bottom: 32px; }
.cn-2fa-rond {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 18px;
    background: #E9F0FE;
    border: 1px solid #D3E1FB;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cn-2fa-rond svg { width: 28px; height: 28px; }
.cn-2fa-tete .cn-intro { margin: 12px 0 0; }

/* Gros caractères espacés : on se relit en tapant six chiffres. */
.cn-code {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #E4EAF5;
    border-radius: 12px;
    color: #0C1424;
    font-family: inherit;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cn-code::placeholder { color: #C3CDDF; font-weight: 400; letter-spacing: 6px; }
.cn-code:focus {
    border-color: #1550EC;
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 80, 236, .12);
}

.cn-cta[disabled] { opacity: .55; cursor: not-allowed; }
.cn-cta[disabled]:hover { background: #1550EC; }

.cn-separateur {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 16px;
    font-size: 14.5px;
    color: #7A88A0;
}
.cn-separateur::before,
.cn-separateur::after { content: ''; flex: 1; height: 1px; background: #E4EAF5; }

.cn-2fa-aide { margin: 0; font-size: 15.5px; line-height: 1.6; color: #5A6B85; }
.cn-2fa-aide b { color: #2A3850; font-weight: 600; }

/* ─────────────────── Écrans d'état ───────────────────────────────────
   L'activation du compte et le lien de réinitialisation aboutissent au même
   objet : un rond, un titre, une phrase, et de quoi repartir. Ils partagent
   donc cette section plutôt que chacun sa feuille — c'est d'avoir eu chacun la
   sienne qui les a laissés en arrière le jour où la coquille sombre a été
   retirée du reste du produit. */

.cn-etat { text-align: center; }

.cn-etat-rond {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cn-etat-rond svg { width: 34px; height: 34px; }

.cn-etat-rond.est-ok   { background: #E7F8EF; border: 1px solid #A9E5C1; color: #10653A; }
.cn-etat-rond.est-info { background: #E9F0FE; border: 1px solid #D3E1FB; color: #1550EC; }
.cn-etat-rond.est-err  { background: #FDECEC; border: 1px solid #F6C3C3; color: #99201E; }

.cn-etat .cn-intro { margin: 14px 0 0; }

.cn-boutons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

/* Le bouton de second rang : même gabarit que l'action principale, mais posé
   et non plein — deux boutons pleins l'un sur l'autre ne disent plus lequel
   est la suite attendue. */
.cn-cta-second {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #2A3850;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 600;
    border: 1px solid #E4EAF5;
    border-radius: 12px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.cn-cta-second:hover { background: #F1F5FE; border-color: #C7D6F5; color: #1550EC; }
.cn-cta-second svg { width: 19px; height: 19px; }

.cn-info {
    margin-top: 26px;
    padding: 18px 22px;
    background: #F4F7FF;
    border: 1px solid #DEE7FB;
    border-radius: 14px;
    font-size: 15.5px;
    line-height: 1.55;
    color: #4A5A75;
    text-align: left;
}
.cn-info strong { color: #0C1424; font-weight: 700; }

.cn-atouts-mini {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #E4EAF5;
}
.cn-atouts-mini div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #5A6B85;
}
.cn-atouts-mini svg { width: 21px; height: 21px; color: #1B5CF0; }

.cn-retour {
    margin: 26px 0 0;
    text-align: center;
    font-size: 15.5px;
    color: #5A6B85;
}

/* ─────────────────── Pied : la ligne « Connexion sécurisée » ─────────── */

/* `margin: 0` N'EST PAS DE LA COSMÉTIQUE : c'est un <p>, et la marge par défaut
   du navigateur lui donnait 16px au-dessus ET 16px en dessous — 32px de haut
   pris sur la fenêtre par une ligne de texte de 22px, sans qu'aucune règle de
   cette feuille ne les ait demandés. */
.cn-pied {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: clamp(10px, 1.7vh, 26px) 0 clamp(12px, 2.2vh, 34px);
    color: #6B7A93;
    font-size: clamp(14px, 1.6vh, 17px);
}
.cn-pied svg { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════════════════
   POSTE — LA PAGE FAIT EXACTEMENT UNE FENÊTRE.

   Les `clamp(… vh …)` du dessus resserrent le contenu ; ce bloc-ci ferme la
   porte. La coquille est HAUTE DE LA FENÊTRE, la carte prend ce qui reste
   entre le bandeau et la ligne de pied, et le formulaire se centre dedans.
   Le corps de page n'a donc plus rien à faire défiler, à aucune hauteur.

   ─────────────────────────────────────────────────────────────────────────
   POURQUOI CE BLOC NE VISE QUE `.cn-page-plein`
   ─────────────────────────────────────────────────────────────────────────

   Quatre vues partagent cette feuille. Trois d'entre elles — activation,
   second facteur, réinitialisation — posent une carte étroite et centrée
   (`.cn-carte-seule`, 520px) qui n'a jamais fait défiler quoi que ce soit :
   l'étirer sur toute la hauteur ne réglerait rien et déformerait un écran qui
   va bien. Seule connexion.blade.php porte la classe.

   ─────────────────────────────────────────────────────────────────────────
   LE PAVÉ « VOS DONNÉES SONT PROTÉGÉES » RESTE SUR POSTE
   ─────────────────────────────────────────────────────────────────────────

   Il a été retiré du poste un moment, au motif qu'il est le QUATRIÈME
   exemplaire du même message à l'écran — l'atout « Une connexion sécurisée »,
   le cartouche `.cn-promesse` et la ligne de pied disent déjà la même chose,
   tous visibles en même temps que lui. Décision du client : il reste.

   Il n'est donc pas caché, il est MESURÉ comme le reste — ses paddings, sa
   marge, son icône et ses deux tailles de texte passent en `vh`. Il rend 158px
   de haut à 1080 de fenêtre, 134 à 864, 128 à 700. Les pixels qu'il prend sont
   repris sur les espacements, pas sur le contenu.

   ─────────────────────────────────────────────────────────────────────────
   LE FILET
   ─────────────────────────────────────────────────────────────────────────

   `overflow-y: auto` sur la colonne des formulaires, et non `hidden` : sur une
   fenêtre plus basse que tout ce que les planchers des `clamp()` peuvent
   encore céder — et le message d'erreur du serveur, qui s'ajoute au-dessus du
   formulaire, ajoute une soixantaine de pixels quand il paraît — c'est la
   COLONNE qui défile, jamais la page, et rien n'est jamais coupé. Tant que ça
   tient, aucune barre n'apparaît.

   `safe center` double `center` : un contenu centré qui déborde d'une boîte
   défilante voit son HAUT sortir par le haut, hors d'atteinte de la barre.
   `safe` rend la main à `flex-start` dans ce cas précis. Les navigateurs qui
   ne le connaissent pas ignorent la seconde déclaration et gardent la
   première.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 980px) {

    /* `height`, et non `min-height` : la page ne peut plus dépasser la fenêtre. */
    .cn-page-plein { height: 100vh; }

    .cn-page-plein .cn-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .cn-page-plein .cn-carte {
        flex: 1 1 auto;
        min-height: 0;
    }

    .cn-page-plein .cn-formulaires {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-content: safe center;
        min-height: 0;
        overflow-y: auto;
    }

    /* Sans quoi les blocs du formulaire, devenus éléments flexibles, se
       laisseraient comprimer au lieu de déclencher le filet. */
    .cn-page-plein .cn-formulaires > * { flex: none; }

    /* QUAND LE SERVEUR PARLE, LE PAVÉ DE RÉASSURANCE S'EFFACE.

       Deux blocs d'information s'adressent au même lecteur au même instant :
       « Adresse courriel ou mot de passe incorrect » et « Vos données sont
       protégées ». Celui qui répond à ce que le visiteur vient de FAIRE passe
       devant — l'autre revient dès l'essai suivant.

       Ce n'est pas un choix esthétique mais une mesure : le message pèse 67px
       plus 21 de marge à 1536x864, et sans ce recul c'est la colonne qui se met à
       défiler à l'écran exact où quelqu'un cherche pourquoi sa connexion a
       échoué.

       Le `:has()` porte sur le bloc de la vue courante, et non sur la colonne :
       les trois vues cohabitent dans le balisage, deux d'entre elles avec
       l'attribut `hidden`. Viser la colonne ferait disparaître le pavé de
       l'écran de connexion parce que l'écran d'inscription, invisible, porte
       un message.

       Un navigateur sans `:has()` retombe sur le filet du dessus : la colonne
       défile de quelques dizaines de pixels. Rien n'est perdu, rien ne casse. */
    .cn-page-plein [data-cn-vue]:has(.cn-message) .cn-note { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   POSTE BAS — CE QUI CÈDE, ET DANS QUEL ORDRE.

   Les `clamp()` ont un plancher, et sous ce plancher il n'y a plus de
   pixels à céder : un champ ne descend pas sous 42px, un libellé sous 14.
   L'ONGLET « CRÉER UN COMPTE » EST CELUI QUI TOUCHE LE FOND EN PREMIER — il
   porte deux champs de plus que la connexion (nom/prénom, confirmation) et
   la jauge de force. Mesuré avant ce bloc, à 1366px de large : il tenait à
   864px de haut, débordait de 8px à 800, de 32 à 740, de 84 à 660.

   Trois éléments cèdent alors, par ordre croissant de ce qu'ils coûtent au
   visiteur — AUCUN N'EST UNE COMMANDE, aucun ne mène quelque part où l'on
   ne va pas déjà par un autre chemin de la même page :

     ≤ 820px  la ligne « Connexion sécurisée. » sous la carte. Le volet
              gauche le dit déjà deux fois, à côté.
     ≤ 760px  « Déjà un compte ? Se connecter » / « Pas encore de compte ? »
              — l'onglet juste au-dessus fait exactement ce lien, et il est
              visible en même temps.
     ≤ 700px  la phrase d'accroche sous le titre. Le titre porte le sens.

   Les champs, les libellés, la case des conditions, la jauge de force et le
   bouton ne cèdent JAMAIS : c'est le formulaire.

   En dessous, `overflow-y: auto` sur la colonne prend le relais — voir le
   bloc précédent. La page, elle, ne défile à aucune hauteur.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 980px) and (max-height: 820px) {
    .cn-page-plein .cn-pied { display: none; }
}

@media (min-width: 980px) and (max-height: 760px) {
    .cn-page-plein .cn-bascule { display: none; }
}

@media (min-width: 980px) and (max-height: 700px) {
    .cn-page-plein .cn-intro { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — maquette « Login CBR-CLOUD Mobile.dc.html », valeur par valeur.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 979px) {

    .cn-main { padding: 14px 14px 0; }

    .cn-carte {
        display: block;
        border-radius: 18px;
        box-shadow: 0 6px 24px rgba(15, 23, 42, .05);
        max-width: 560px;
        margin: 0 auto;
    }

    /* L'argumentaire et son illustration ne sont pas rendus sur téléphone :
       la maquette mobile ouvre directement sur le formulaire. */
    .cn-volet { display: none; }

    .cn-formulaires {
        border-left: 0;
        padding: 26px 22px 30px;
    }

    .cn-onglets { margin-bottom: 28px; }
    .cn-onglet { padding: 0 0 13px; font-size: 14.5px; }

    .cn-h2 { font-size: 25px; line-height: 1.2; }
    .cn-intro { margin: 10px 0 24px; font-size: 14.5px; line-height: 1.5; }

    .cn-label { font-size: 13.5px; margin-bottom: 9px; }
    .cn-champ-boite.cn-espace { margin-bottom: 18px; }

    .cn-icone { left: 16px; width: 19px; height: 19px; }
    .cn-champ {
        height: 52px;
        padding: 0 16px 0 46px;
        /* 16px MINIMUM SUR TÉLÉPHONE. En dessous, iOS zoome sur le champ au
           moment de la saisie et ne dézoome jamais : la page reste décalée pour
           le reste de la visite. La maquette dit 15.5px ; c'est la seule valeur
           qu'on ne peut pas suivre à la lettre sans casser l'écran. */
        font-size: 16px;
        border-radius: 11px;
    }

    .cn-champ-boite.cn-mdp .cn-icone { left: 17px; width: 18px; height: 18px; }
    .cn-champ.cn-champ-mdp { padding: 0 50px 0 46px; font-size: 16px; }

    .cn-oeil { right: 8px; width: 44px; height: 44px; }
    .cn-oeil svg { width: 21px; height: 21px; }

    .cn-ligne-oubli { margin-top: 11px; }
    .cn-ligne-oubli a { font-size: 13.5px; }

    .cn-case { gap: 12px; margin: 18px 0 22px; font-size: 15px; }
    .cn-case-carre { width: 20px; height: 20px; }
    .cn-case-carre svg { width: 13px; height: 13px; }

    .cn-cta { height: 56px; font-size: 17px; border-radius: 11px; box-shadow: 0 6px 16px rgba(21, 80, 236, .24); }
    .cn-cta svg { right: 18px; width: 21px; height: 21px; }

    .cn-bascule { margin: 18px 0 0; font-size: 14.5px; }

    .cn-note { gap: 14px; margin-top: 24px; border-radius: 13px; padding: 16px 18px; }
    .cn-note svg { width: 26px; height: 26px; margin-top: 1px; }
    .cn-note-titre { font-size: 14.5px; margin-bottom: 5px; }
    .cn-note-texte { font-size: 13.5px; line-height: 1.5; }

    .cn-duo { gap: 12px; margin-bottom: 18px; }
    .cn-duo .cn-icone { left: 13px; width: 17px; height: 17px; }
    .cn-duo .cn-champ { height: 52px; padding: 0 10px 0 38px; font-size: 16px; }

    .cn-form-inscription .cn-champ { height: 52px; }
    .cn-form-inscription .cn-champ-boite.cn-espace { margin-bottom: 18px; }

    .cn-force { flex-direction: column; align-items: stretch; gap: 9px; margin-top: 12px; }
    .cn-force-barres { gap: 7px; }
    .cn-force-barres span { height: 5px; }
    .cn-force-txt { font-size: 12.5px; text-align: right; }

    .cn-label-confirme { margin: 16px 0 9px; }
    .cn-case-conditions { margin: 20px 0 22px; font-size: 14px; }

    .cn-message { font-size: 14.5px; padding: 14px 16px; margin-bottom: 20px; }

    .cn-pied { gap: 9px; padding: 20px 0 26px; font-size: 14.5px; }
    .cn-pied svg { width: 18px; height: 18px; }
}

/* Très petits écrans : le duo prénom/nom passe l'un sous l'autre plutôt que de
   servir deux champs de 120px où le nom ne tient pas. */
@media (max-width: 380px) {
    .cn-duo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .cn-body *, .cn-body *::before, .cn-body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Second facteur sur téléphone : la carte se resserre comme celle de connexion. */
@media (max-width: 979px) {
    .cn-carte-seule { padding: 26px 22px 30px; }
    .cn-2fa-tete { margin-bottom: 24px; }
    .cn-2fa-rond { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px; }
    .cn-2fa-rond svg { width: 24px; height: 24px; }
    .cn-code { height: 58px; font-size: 22px; letter-spacing: 6px; border-radius: 11px; }
    .cn-separateur { margin: 24px 0 14px; font-size: 13.5px; }
    .cn-2fa-aide { font-size: 14px; }

    .cn-etat-rond { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 20px; }
    .cn-etat-rond svg { width: 29px; height: 29px; }
    .cn-boutons { gap: 10px; margin-top: 24px; }
    .cn-cta-second { height: 52px; font-size: 15.5px; border-radius: 11px; }
    .cn-info { margin-top: 22px; padding: 15px 17px; font-size: 14px; border-radius: 12px; }
    .cn-atouts-mini { gap: 20px; margin-top: 24px; padding-top: 22px; }
    .cn-atouts-mini div { font-size: 12.5px; }
    .cn-retour { margin-top: 22px; font-size: 14px; }
}

/* Un bouton qui suit directement un champ, sans le libellé et l'espace qui
   séparent les champs ailleurs : le code du second facteur, le nouveau mot de
   passe. */
.cn-cta-espace { margin-top: 22px; }