/* ——— Page de connexion — charte Les Entrepreneurs ——— */

.acces {
    --teinte-cyan: #E6FAFE;
    display: grid;
    grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    min-height: 100vh;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
}
.acces :where(a, button, input):focus-visible { outline: 3px solid var(--le-cyan); outline-offset: 3px; }

/* ——— Panneau de marque ——— */
.acces-marque {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 40px 56px;
    background: linear-gradient(225deg, #00CDF0 0%, #0032B9 62%);
    color: #fff;
}
.trame-acces { left: 0; bottom: 0; width: 100%; height: 72%; }
.acces-logo { display: flex; flex-direction: column; align-self: flex-start; line-height: 1; border-radius: 6px; }
.acces-logo-nom { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.acces-logo-signature {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}
.acces-slogan {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.acces-slogan span {
    padding-bottom: 4px;
    background-image: linear-gradient(90deg, #FFC799, #C4ACE8);
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: 0 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.acces-atouts { display: grid; gap: 16px; max-width: 420px; margin: 36px 0 0; padding: 0; list-style: none; }
.acces-atouts li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.45; }
.acces-atouts .picto {
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
}
.acces-gratuit { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }

/* ——— Formulaire ——— */
.acces-principal { display: flex; flex-direction: column; padding: 32px 56px 48px; }
.acces-retour { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; font-size: 14px; font-weight: 600; color: var(--le-blue); border-radius: 6px; }
.acces-retour:hover { color: var(--le-navy); }
.acces-retour .picto { width: 18px; height: 18px; }
.acces-carte { width: 100%; max-width: 460px; margin: auto; padding: 40px 0; animation: acces-apparaitre 0.5s ease-out both; }
.acces-carte h1 { margin: 0; font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--text-title); }
.acces-intro { margin: 10px 0 28px; font-size: 16px; color: var(--text-muted); }

.acces-message { margin: 0 0 20px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.acces-message-erreur { border: 1px solid #FECACA; background: var(--danger-soft); color: var(--danger); }
.acces-message-info { border: 1px solid #86EFAC; background: var(--success-soft); color: var(--success); }
.acces-message a { font-weight: 600; text-decoration: underline; }

.acces-espaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.acces-espace { position: relative; display: block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; cursor: pointer; }
.acces-espace input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.acces-espace-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 16px 16px 18px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.acces-espace-carte::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.acces-espace-carte .picto { width: 28px; height: 28px; margin-bottom: 4px; color: var(--le-blue); }
.acces-espace-carte strong { font-size: 15px; color: var(--le-navy); }
.acces-espace-carte small { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.acces-espace:hover .acces-espace-carte { border-color: var(--border-strong); }
.acces-espace input:checked + .acces-espace-carte { border-color: var(--le-blue); background: var(--teinte-cyan); box-shadow: 0 0 0 1px var(--le-blue); }
.acces-espace input:checked + .acces-espace-carte::after { border-color: var(--le-blue); background: var(--le-blue); box-shadow: inset 0 0 0 3px #fff; }
.acces-espace input:focus-visible + .acces-espace-carte { outline: 3px solid var(--le-cyan); outline-offset: 2px; }

/* L'espace coché décide de la suite : le bouton vers l'application, ou le formulaire contributeur. */
.acces-formulaire:has(input[name="espace"][value="utilisateur"]:checked) .acces-pour-contributeur,
.acces-formulaire:has(input[name="espace"][value="contributeur"]:checked) .acces-pour-utilisateur { display: none; }

.acces-champ { margin-bottom: 18px; }
.acces-champ label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--le-navy); }
.acces-champ input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--text-title);
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.acces-champ input::placeholder { color: var(--text-soft); }
.acces-champ input:focus { outline: none; border-color: var(--le-blue); box-shadow: 0 0 0 4px rgba(0, 205, 240, 0.28); }

/* Un lien peut prendre l'allure du bouton : après le mot de passe, il mène à l'espace voulu. */
:is(button, a).acces-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--le-navy);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
}
button.acces-bouton:hover, a.acces-bouton:hover { background: var(--le-blue); color: #fff; }
:is(button, a).acces-bouton:active { transform: translateY(1px); }
a.acces-bouton { text-decoration: none; }
a.acces-bouton-second { border: 1.5px solid var(--border-strong); background: #fff; color: var(--le-navy); }
a.acces-bouton-second:hover { border-color: var(--le-blue); background: var(--teinte-cyan, #E6FAFE); color: var(--le-navy); }
.acces-espaces-liens { display: grid; gap: 10px; }
.acces-aide { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.acces-bouton span { font-size: 24px; line-height: 0; transform: translateY(-1px); }

.acces-suite { display: grid; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-muted); }
.acces-suite p { margin: 0; }
.acces-suite a { font-weight: 600; color: var(--le-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.acces-suite a:hover { color: var(--le-navy); }

/* ——— Administration : le dégradé du menu de l'espace ——— */
.acces-admin .acces-marque { background: var(--gradient-secondary-1); }
.acces-surtitre { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--le-blue); }
.acces-surtitre .picto { width: 18px; height: 18px; }

/* ——— Accès à l'application (espace entreprise) : le cadre étroit de l'application ——— */
.app-acces {
    --teinte-cyan: #E6FAFE;
    display: grid;
    justify-items: center;
    min-height: 100vh;
    background: var(--surface-soft);
    color: var(--text);
    font-family: var(--font-body);
}
.app-acces :where(a, button, input):focus-visible { outline: 3px solid var(--le-cyan); outline-offset: 3px; }
.app-acces-cadre {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    min-height: 100vh;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.app-acces-marque {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px 24px 32px;
    background: linear-gradient(225deg, #00CDF0 0%, #0032B9 62%);
    color: #fff;
}
.app-acces-marque .trame-acces { height: 100%; }
.app-acces-marque .acces-slogan { font-size: 28px; }
.app-acces-logo { display: flex; align-items: center; gap: 12px; line-height: 1; }
.app-acces-logo .acces-logo-nom, .app-acces-logo .acces-logo-signature { display: block; }
.app-acces-logo .acces-logo-nom { font-size: 22px; }
.app-acces-sigle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: var(--le-blue);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}
.app-acces-corps { flex: 1; padding: 28px 24px 40px; animation: acces-apparaitre 0.5s ease-out both; }
.app-acces-corps h1 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text-title); }
.app-acces-corps .acces-intro { margin: 8px 0 24px; }
.app-acces-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-acces .acces-champ input[aria-invalid="true"] { border-color: var(--danger); }
.app-acces .acces-champ input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--danger-soft); }

@media (max-width: 339px) {
    .app-acces-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@keyframes acces-apparaitre {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.acces, .app-acces) *, :is(.acces, .app-acces) *::before, :is(.acces, .app-acces) *::after { animation: none !important; transition: none !important; }
}

/* ——— Adaptation aux écrans ——— */
@media (max-width: 960px) {
    .acces { grid-template-columns: minmax(0, 1fr); }
    .acces-marque { gap: 20px; padding: 24px 24px 32px; }
    .trame-acces { height: 100%; }
    .acces-slogan { font-size: 28px; }
    .acces-atouts, .acces-gratuit { display: none; }
    .acces-principal { padding: 20px 24px 40px; }
    .acces-retour { align-self: flex-start; }
    .acces-carte { padding: 24px 0 0; margin: 0 auto; }
}

@media (max-width: 640px) {
    .acces-marque { padding: 20px 16px 28px; }
    .acces-logo-nom { font-size: 22px; }
    .acces-slogan { font-size: 24px; }
    .acces-principal { padding: 16px 16px 32px; }
    .acces-carte h1 { font-size: 30px; }
    .acces-intro { margin-bottom: 22px; }
}

@media (max-width: 359px) {
    .acces-espaces { grid-template-columns: minmax(0, 1fr); }
}