/* ==========================================================================
   CRAN — vitrine publique et page de saisie du diagnostic.

   Reprend la charte de la page d'accueil Cognitera (Figma « Intégration
   privée / Desktop - 1 », nœud 3379:383) : bandeau flottant, héros sombre à
   titre bicolore, constellations, boutons verts à coins de 10 px.

   Cette feuille se charge PAR-DESSUS home.css, qui porte déjà la coquille
   (.cog-page, .cog-shell, .cog-btn, .cog-header, .cog-brand, .cog-hero,
   .cog-modes). On n'ajoute ici que ce qu'elle n'avait pas : la ligne de
   repères sous les boutons, et le formulaire de lancement.
   ========================================================================== */

/* Les repères posés sous les boutons : la première question qu'on se pose
   devant un diagnostic, c'est ce qu'il va coûter en temps. */
.cog-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

.cog-meta li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.cog-meta li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cog-green);
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Page de saisie — ouverte depuis le lien d'une entreprise
   -------------------------------------------------------------------------- */

.cog-header__company {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

/* Le formulaire remplace les cartes de manche : le héros n'a plus à tenir
   dans un écran, il doit tenir autour du formulaire. */
.cog-page--form .cog-hero {
    min-height: 0;
}

.cog-page--form .cog-hero__body {
    padding-bottom: 20px;
}

/* La constellation de gauche est reprise de la maquette, nœud vert compris.
   Quelques pixels de décalage suffisent à ce que le bord de l'écran le coupe
   franchement au lieu de le trancher en deux, ce qui se lit comme un défaut
   d'affichage plutôt que comme un motif. */
.cog-page--cran-lp .cog-hero__net--left,
.cog-page--form .cog-hero__net--left {
    left: -104px;
    opacity: 0.6;
}

.cog-page--form .cog-hero__title {
    font-size: 40px;
}

.cog-form {
    width: 100%;
    max-width: 780px;
    margin: 12px auto 0;
    padding: 34px 36px 38px;
    border-radius: var(--cog-radius-card);
    background: #FFFFFF;
    border: 1px solid rgba(25, 29, 54, 0.07);
    box-shadow: 0 18px 40px rgba(17, 20, 37, 0.35);
    text-align: left;
}

.cog-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.cog-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cog-field--full {
    grid-column: 1 / -1;
}

.cog-field > label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cog-navy);
}

.cog-field input[type="text"],
.cog-field input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 16px;
    color: var(--cog-navy);
    background: var(--cog-bg);
    border: 1px solid rgba(25, 29, 54, 0.08);
    border-radius: var(--cog-radius-btn);
}

.cog-field input::placeholder {
    color: var(--cog-muted);
}

.cog-field input:focus {
    outline: none;
    border-color: var(--cog-green-strong);
    box-shadow: 0 0 0 4px rgba(152, 236, 43, 0.20);
}

.cog-page .cog-hint {
    font-size: 13px;
    line-height: 19px;
    color: var(--cog-muted);
}

/* Les métiers d'exemple : un champ vide fait fuir, on montre d'abord de quoi
   il s'agit. */
.cog-samples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cog-sample {
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: rgba(25, 29, 54, 0.62);
    background: var(--cog-bg);
    border: 1px solid rgba(25, 29, 54, 0.09);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.cog-sample:hover {
    border-color: var(--cog-green-strong);
    color: var(--cog-navy);
}

.cog-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cog-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid rgba(25, 29, 54, 0.10);
    border-radius: var(--cog-radius-btn);
    font-size: 15px;
    color: var(--cog-navy);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.cog-choice:has(input:checked) {
    border-color: var(--cog-green-strong);
    background: rgba(152, 236, 43, 0.12);
}

.cog-choice input {
    accent-color: var(--cog-green-strong);
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.cog-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(25, 29, 54, 0.10);
    border-radius: var(--cog-radius-btn);
    cursor: pointer;
}

.cog-check:has(input:checked) {
    border-color: var(--cog-green-strong);
    background: rgba(152, 236, 43, 0.12);
}

.cog-check input {
    accent-color: var(--cog-green-strong);
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.cog-check__t {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--cog-navy);
}

.cog-check__d {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 19px;
    color: var(--cog-muted);
}

.cog-page .cog-form__submit {
    width: 100%;
    margin-top: 4px;
}

.cog-errors {
    grid-column: 1 / -1;
    padding: 15px 18px;
    border-radius: var(--cog-radius-btn);
    background: rgba(229, 72, 77, 0.10);
    border: 1px solid rgba(229, 72, 77, 0.35);
    color: #A32B2F;
    font-size: 14.5px;
}

.cog-errors ul {
    list-style: disc;
    margin: 0;
    padding-left: 20px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .cog-meta {
        gap: 8px 18px;
        font-size: 13px;
    }
}

@media (max-width: 760px) {
    .cog-page--form .cog-hero__title {
        font-size: 30px;
    }

    .cog-form {
        padding: 24px 20px 28px;
    }

    .cog-form__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cog-choices {
        grid-template-columns: 1fr;
    }

    .cog-header__company {
        font-size: 13px;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}