/* =========================================================
   Savoir Quotidien IA - style commun des pages hors application :
   connexion, inscription, confirmation d'e-mail, CGU, confidentialité,
   mentions légales et « À propos ».
   Même palette et mêmes polices locales que plateforme.css.
   Aucune ressource externe ni style écrit dans les pages (CSP stricte).
   ========================================================= */

@font-face {
    font-family: "SQ Titres";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: local("Oswald"), url("/fonts/Oswald-VariableFont_wght.ttf") format("truetype");
}

:root {
    --noir: #1e1e1e;
    --rouge: #c8191f;
    --rouge-fonce: #a31318;
    --bleu: #0b7bc5;
    --bleu-fonce: #075a93;
    --bleu-pale: #e0f0fb;
    --fond: #ececec;
    --blanc: #ffffff;
    --trait: #dcdcdc;
    --texte-doux: #555555;
    --police-titres: "SQ Titres", Oswald, "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    --police-texte: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --rayon: 6px;
}

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fond);
    color: var(--noir);
    font-family: var(--police-texte);
    font-size: 17px;
    line-height: 1.65;
}

h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--bleu-fonce);
}

a:hover {
    color: var(--bleu);
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 2px;
}

img {
    max-width: 100%;
}

/* ----- Bandeau du haut ----- */

.bandeau {
    background: var(--noir);
    color: #ffffff;
}

.bandeau-contenu {
    max-width: 1040px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.logo-bandeau {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.logo-bandeau:hover {
    color: #ffffff;
}

.logo-bandeau .logo-texte {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
}

.logo-bandeau .logo-ia {
    padding: 2px 8px;
    background: var(--rouge);
    border-radius: 3px;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1rem;
}

.bandeau-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.95rem;
}

.bandeau-actions span {
    color: #d8d8d8;
}

.bandeau-actions a {
    color: #ffffff;
}

.lien-retour {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
}

.lien-retour:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* ----- Boutons ----- */

.bouton,
.bouton-authentification {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 4px;
    background: var(--rouge);
    color: #ffffff;
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.bouton:hover,
.bouton-authentification:hover {
    background: var(--rouge-fonce);
    color: #ffffff;
}

.bouton-contour {
    background: transparent;
    color: var(--noir);
    border: 2px solid var(--noir);
}

.bouton-contour:hover {
    background: var(--noir);
    color: #ffffff;
}

.bandeau .bouton {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.95rem;
}

/* ----- Mise en page principale ----- */

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

/* ----- Pages d'authentification ----- */

.authentification {
    max-width: 520px;
    padding-top: 40px;
}

.carte {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: 5px solid var(--bleu);
    border-radius: var(--rayon);
    padding: 28px 26px;
}

.sur-titre {
    margin: 0 0 6px;
    color: var(--rouge);
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.carte h1,
.titre-page {
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.introduction {
    color: var(--texte-doux);
    font-size: 1.05rem;
}

.formulaire-authentification {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.champ-authentification label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.champ-authentification input[type="email"],
.champ-authentification input[type="password"],
.champ-authentification input[type="text"] {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    font: inherit;
    color: var(--noir);
    background: var(--blanc);
    border: 2px solid #cfcfcf;
    border-radius: 4px;
}

.champ-authentification select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font: inherit;
    color: var(--noir);
    background: var(--blanc);
    border: 2px solid #cfcfcf;
    border-radius: 4px;
}

.champ-authentification select:focus,
.champ-authentification input:focus {
    border-color: var(--bleu);
}

.aide-authentification {
    margin: 6px 0 0;
    font-size: 0.92rem;
    color: var(--texte-doux);
}

/* Case à cocher « 18 ans et plus + CGU » */
.champ-consentement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bleu-pale);
    border-radius: 4px;
    font-size: 0.97rem;
    line-height: 1.5;
}

.champ-consentement input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--bleu);
}

.champ-consentement label {
    margin: 0;
    font-weight: 400;
}

.message-authentification {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--bleu-pale);
    border-left: 4px solid var(--bleu);
    border-radius: 4px;
}

.message-authentification a {
    font-weight: 700;
}

.renvoi-confirmation {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--trait);
}

.renvoi-confirmation > p {
    color: var(--texte-doux);
    margin-bottom: 8px;
}

.lien-renvoi-confirmation {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bleu-fonce);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

#zone-renvoi-confirmation {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

/* ----- Affichage du mot de passe ----- */

.champ-mot-de-passe {
    position: relative;
}

.champ-mot-de-passe input {
    padding-right: 3.25rem;
}

/* ----- Confirmation d'e-mail ----- */

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

.confirmation-icone {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bleu);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
}

.confirmation-etat .bouton,
.confirmation-etat .lien-retour {
    margin-top: 8px;
}

.confirmation-etat .lien-retour {
    display: inline-block;
    color: var(--bleu-fonce);
}

/* ----- Pages de texte (CGU, confidentialité, mentions légales) ----- */

.page-texte {
    max-width: 860px;
}

.page-texte .contenu-texte {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-top: 5px solid var(--bleu);
    border-radius: var(--rayon);
    padding: 30px clamp(18px, 4vw, 40px) 20px;
}

.page-texte h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    text-transform: uppercase;
    margin: 0 0 14px;
}

.page-texte h2 {
    margin: 2em 0 0.5em;
    padding-top: 0.2em;
    font-size: 1.45rem;
    text-transform: uppercase;
}

.page-texte h3 {
    margin: 1.4em 0 0.4em;
    font-size: 1.15rem;
}

.page-texte ul,
.page-texte ol {
    padding-left: 1.3em;
    margin: 0 0 1em;
}

.page-texte li {
    margin-bottom: 0.35em;
}

.page-texte .introduction {
    margin-bottom: 1.2em;
}

.encadre {
    margin: 1.6em 0;
    padding: 16px 18px;
    background: var(--bleu-pale);
    border-left: 4px solid var(--bleu);
    border-radius: 4px;
}

.encadre p:last-child {
    margin-bottom: 0;
}

.page-texte table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.page-texte th,
.page-texte td {
    padding: 8px 10px;
    border: 1px solid var(--trait);
    text-align: left;
    vertical-align: top;
}

.page-texte th {
    background: var(--fond);
}

/* ----- À propos ----- */

.page-a-propos {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.section-carte {
    background: var(--blanc);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 26px clamp(18px, 4vw, 36px);
}

.section-carte h2 {
    margin-bottom: 12px;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.section-carte > p:last-child {
    margin-bottom: 0;
}

.section-presentation {
    border-top: 5px solid var(--bleu);
}

.presentation {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.portrait-createrice {
    display: block;
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid var(--rouge);
    background: var(--fond);
}

.presentation h1 {
    margin-bottom: 4px;
    font-size: clamp(2rem, 6vw, 3rem);
    text-transform: uppercase;
}

.signature-nom {
    margin-bottom: 14px;
    color: var(--texte-doux);
    font-weight: 600;
}

.lien-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 2px solid var(--bleu-fonce);
    border-radius: 4px;
    color: var(--bleu-fonce);
    font-weight: 700;
    text-decoration: none;
}

.lien-linkedin:hover {
    background: var(--bleu-fonce);
    color: #ffffff;
}

.reseaux-sociaux,
.podcast-liens {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.reseau-bouton {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--noir);
    border-radius: 4px;
    color: var(--noir);
    font-weight: 700;
    text-decoration: none;
}

.reseau-bouton:hover {
    background: var(--noir);
    color: #ffffff;
}

.section-signature {
    text-align: center;
    background: var(--noir);
    color: #ffffff;
    border-color: var(--noir);
}

.section-signature strong {
    display: block;
    margin: 4px 0 18px;
    font-family: var(--police-titres);
    font-size: 1.5rem;
    text-transform: uppercase;
}

/* ----- Pied de page commun ----- */

.pied-page {
    margin-top: auto;
    background: var(--noir);
    color: #bdbdbd;
    font-size: 0.92rem;
}

.pied-page-contenu {
    max-width: 1040px;
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    justify-content: space-between;
}

.pied-page nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.pied-page a {
    color: #e6e6e6;
}

.pied-page a:hover {
    color: #ffffff;
}

.pied-page p {
    margin: 0;
}

/* ----- Téléphone ----- */

@media (max-width: 640px) {
    body {
        font-size: 16px;
    }

    main {
        padding: 20px 14px 40px;
    }

    .authentification {
        padding-top: 22px;
    }

    .carte {
        padding: 22px 18px;
    }

    .presentation {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .portrait-createrice {
        width: 160px;
        height: 160px;
    }

    .bandeau-actions span {
        display: none;
    }

    .pied-page-contenu {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }
}

/* ----- Version bêta ----- */

.bandeau-beta {
    margin: 0;
    padding: 8px 16px;
    background: #e0f0fb;
    color: #1e1e1e;
    font-size: 0.9rem;
    text-align: center;
}

.bandeau-beta a {
    color: #075a93;
    font-weight: 700;
}

.mot-de-passe-oublie {
    margin: 14px 0 0;
    font-size: 0.95rem;
}

.mot-de-passe-oublie a {
    color: var(--bleu-fonce);
    font-weight: 700;
}