/* ============================================================
   Variables et reset
   ============================================================ */

:root {
    --bleu-nuit: #1a2744;
    --bleu-nuit-fonce: #121a30;
    --bleu-nuit-moyen: #2a3a5e;
    --jaune-doux: #f6d860;
    --jaune-clair: #fbed9a;
    --fond-clair: #fafaf7;
    --fond-section: #ffffff;
    --texte: #1a2744;
    --texte-secondaire: #4a5774;
    --bordure: #e5e7eb;
    --succes: #2e7d55;
    --erreur: #b53434;
    --ombre: 0 4px 20px rgba(26, 39, 68, 0.08);
    --ombre-forte: 0 10px 40px rgba(26, 39, 68, 0.12);
    --rayon-petit: 8px;
    --rayon-moyen: 16px;
    --rayon-grand: 28px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--texte);
    background-color: var(--fond-clair);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

.conteneur {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   1. En-tête
   ============================================================ */

.entete {
    background:
        linear-gradient(rgba(26, 39, 68, 0.75), rgba(26, 39, 68, 0.9)),
        url("images/robot-header.png") center / cover no-repeat,
        linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #ffffff;
    padding: 56px 0 72px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.entete::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--jaune-doux) 0%, transparent 70%);
    opacity: 0.18;
    border-radius: 50%;
    pointer-events: none;
}

.entete::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--jaune-clair) 0%, transparent 70%);
    opacity: 0.12;
    border-radius: 50%;
    pointer-events: none;
}

.entete .conteneur {
    position: relative;
    z-index: 1;
}

.entete-visuel {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
}

.robot-icone {
    width: 96px;
    height: 96px;
    padding: 10px;
    display: block;
    object-fit: contain;
    background-color: var(--jaune-doux);
    border-radius: var(--rayon-grand);
    border: 3px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.titre-principal {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
    border-radius: var(--rayon-grand);
    padding: 0 4px;
}

.sous-titre {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 36px;
}

.sous-titre strong {
    color: var(--jaune-doux);
    font-weight: 700;
}

/* ============================================================
   Boutons
   ============================================================ */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: var(--rayon-grand);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.bouton-principal {
    background: var(--jaune-doux);
    color: var(--bleu-nuit);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.12), var(--ombre);
}

.bouton-principal:hover {
    background: var(--jaune-clair);
    transform: translateY(-2px);
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12), var(--ombre-forte);
}

.bouton-principal:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.bouton-plein {
    width: 100%;
}

.bouton:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--jaune-doux);
    outline-offset: 2px;
}

/* ============================================================
   Sections génériques
   ============================================================ */

.section {
    padding: 56px 0;
}

.section + .section {
    border-top: 1px solid var(--bordure);
}

.titre-section {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
    color: var(--bleu-nuit);
    background: var(--jaune-clair);
    padding: 12px 20px;
    border-radius: var(--rayon-grand);
    margin-bottom: 36px;
    display: inline-block;
    width: auto;
    max-width: 100%;
}

.section .conteneur {
    text-align: center;
}

.section .conteneur > .titre-section {
    margin-left: auto;
    margin-right: auto;
}

.section-etapes {
    background: var(--fond-section);
}

/* ============================================================
   2. Grille des étapes
   ============================================================ */

.grille-etapes {
    display: grid;
    gap: 20px;
    text-align: left;
}

.etape {
    background: var(--fond-clair);
    padding: 24px;
    border-radius: var(--rayon-moyen);
    border: 1px solid var(--bordure);
    position: relative;
}

.etape-numero {
    position: absolute;
    top: -14px;
    left: 24px;
    width: 36px;
    height: 36px;
    background: var(--bleu-nuit);
    color: var(--jaune-doux);
    font-weight: 800;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ombre);
}

.etape-titre {
    font-size: 17px;
    font-weight: 700;
    color: var(--bleu-nuit);
    margin-bottom: 8px;
    padding-top: 12px;
    line-height: 1.35;
}

.etape-texte {
    font-size: 15px;
    color: var(--texte-secondaire);
    line-height: 1.6;
}

/* ============================================================
   3. Cadre email
   ============================================================ */

.section-exemple {
    background: var(--fond-clair);
}

.cadre-email {
    background: #ffffff;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-moyen);
    box-shadow: var(--ombre-forte);
    overflow: hidden;
    text-align: left;
    max-width: 100%;
}

.email-en-tete {
    background: var(--bleu-nuit);
    color: #ffffff;
    padding: 16px 20px;
}

.email-expediteur {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.email-avatar {
    width: 40px;
    height: 40px;
    background: var(--jaune-doux);
    color: var(--bleu-nuit);
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.email-nom {
    font-weight: 700;
    font-size: 15px;
}

.email-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.email-objet {
    font-weight: 600;
    font-size: 15px;
    color: var(--jaune-doux);
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 4px;
    padding-top: 8px;
}

.email-corps {
    padding: 24px 20px;
    color: var(--texte);
    font-size: 15px;
    line-height: 1.7;
}

.email-corps p {
    margin-bottom: 16px;
}

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

.email-defi,
.email-quiz {
    background: var(--jaune-clair);
    border-left: 4px solid var(--jaune-doux);
    padding: 16px;
    border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
    margin: 20px 0;
}

.defi-titre,
.quiz-titre {
    font-weight: 800;
    color: var(--bleu-nuit);
    margin-bottom: 6px;
    font-size: 15px;
}

.defi-titre {
    color: #7a5c10;
}

.quiz-titre {
    color: #1a5a8a;
}

.email-quiz {
    background: #e6f0fa;
    border-left-color: #3a7bb8;
}

.quiz-choix {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.quiz-bouton {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--bleu-nuit);
    background: #ffffff;
    border: 2px solid #c9d4e5;
    padding: 10px 14px;
    border-radius: var(--rayon-petit);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.quiz-bouton:hover {
    border-color: var(--bleu-nuit);
    background: #f5f7fc;
}

/* ============================================================
   4. Engagements
   ============================================================ */

.section-engagements {
    background: var(--fond-section);
}

.liste-engagements {
    list-style: none;
    text-align: left;
    display: grid;
    gap: 16px;
}

.liste-engagements li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--fond-clair);
    padding: 20px;
    border-radius: var(--rayon-moyen);
    border: 1px solid var(--bordure);
}

.engagement-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--bleu-nuit);
    color: var(--jaune-doux);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}

.liste-engagements li strong {
    display: block;
    color: var(--bleu-nuit);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.liste-engagements li p {
    color: var(--texte-secondaire);
    font-size: 14px;
    line-height: 1.55;
}

/* ============================================================
   5. Formulaire
   ============================================================ */

.section-formulaire {
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-moyen) 100%);
    color: #ffffff;
}

.section-formulaire .titre-section {
    color: var(--bleu-nuit);
    background: var(--jaune-doux);
}

.formulaire-intro {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    margin-bottom: 24px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.formulaire-emplacement {
    max-width: 480px;
    margin: 0 auto;
}

.formulaire {
    background: var(--fond-section);
    padding: 28px 22px;
    border-radius: var(--rayon-moyen);
    box-shadow: var(--ombre-forte);
    display: grid;
    gap: 18px;
    text-align: left;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.champ label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bleu-nuit);
}

.champ input,
.champ select {
    font-family: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 2px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: #ffffff;
    color: var(--texte);
    transition: border-color 0.15s;
    width: 100%;
}

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

.champ input:invalid:not(:placeholder-shown),
.champ select:invalid:not(:placeholder-shown) {
    border-color: var(--erreur);
}

.formulaire-message {
    min-height: 22px;
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 0;
}

.formulaire-message.succes {
    color: var(--succes);
    font-weight: 600;
}

.formulaire-message.erreur {
    color: var(--erreur);
    font-weight: 600;
}

/* ============================================================
   6. Pied de page
   ============================================================ */

.pied {
    background: var(--bleu-nuit-fonce);
    color: rgba(255, 255, 255, 0.75);
    padding: 40px 0 28px;
    font-size: 14px;
}

.pied .conteneur {
    display: grid;
    gap: 16px;
    text-align: center;
}

.pied-marque {
    font-size: 18px;
    font-weight: 800;
    color: var(--jaune-doux);
    margin-bottom: 4px;
}

.pied-contact a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 500;
}

.pied-contact a:hover {
    color: var(--jaune-doux);
    text-decoration: underline;
}

.pied-liens {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pied-liens a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 500;
}

.pied-liens a:hover {
    color: var(--jaune-doux);
    text-decoration: underline;
}

.pied-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 4px;
}

/* ============================================================
   7. Pages secondaires (mentions légales, confidentialité)
   ============================================================ */

.entete-simple {
    background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #ffffff;
    padding: 40px 0 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.entete-simple::before,
.entete-simple::after {
    content: none;
}

.entete-simple .conteneur {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.entete-retour {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: var(--rayon-grand);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.entete-retour:hover,
.entete-retour:focus-visible {
    color: var(--bleu-nuit);
    background-color: var(--jaune-doux);
    border-color: var(--jaune-doux);
    text-decoration: none;
}

.section-texte {
    background: var(--fond-clair);
    padding: 44px 0 64px;
}

.section-texte .conteneur {
    max-width: 760px;
    text-align: left;
}

.bloc-texte {
    background: #ffffff;
    padding: 24px 22px;
    border-radius: var(--rayon-moyen);
    border: 1px solid var(--bordure);
    box-shadow: var(--ombre);
    margin-bottom: 20px;
}

.bloc-texte:last-child {
    margin-bottom: 0;
}

.bloc-texte h2.titre-section {
    background: transparent;
    padding: 0 0 10px;
    border-radius: 0;
    border-bottom: 2px solid var(--jaune-doux);
    color: var(--bleu-nuit);
    font-size: 20px;
    font-weight: 800;
    text-align: left;
    display: block;
    width: 100%;
    margin: 0 0 14px;
}

.bloc-texte p {
    color: var(--texte);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}

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

.bloc-texte ul {
    padding: 0;
    margin: 0 0 8px;
    list-style: none;
}

.bloc-texte ul li {
    color: var(--texte);
    font-size: 15px;
    line-height: 1.7;
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
}

.bloc-texte ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jaune-doux);
    transform: translateY(-50%);
}

.bloc-texte a {
    color: var(--bleu-nuit);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--jaune-doux);
    text-underline-offset: 3px;
}

.bloc-texte a:hover {
    text-decoration-color: var(--bleu-nuit);
}

.a-completer {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 14px;
    font-style: italic;
    color: var(--bleu-nuit);
    background-color: var(--jaune-clair);
    border: 1px dashed var(--jaune-doux);
    border-radius: var(--rayon-petit);
}

.a-completer::before {
    content: "À compléter · ";
    font-weight: 800;
    font-style: normal;
    color: var(--bleu-nuit);
    margin-right: 2px;
}

.entete-mentions {
    background:
        linear-gradient(rgba(26, 39, 68, 0.75), rgba(26, 39, 68, 0.9)),
        url("images/mentions-header.png") center / cover no-repeat,
        linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #ffffff;
    padding: 40px 0 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.entete-mentions::before,
.entete-mentions::after {
    content: none;
}

.entete-mentions .conteneur {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.entete-confidentialite {
    background:
        linear-gradient(rgba(26, 39, 68, 0.75), rgba(26, 39, 68, 0.9)),
        url("images/confidentialite-header.png") center / cover no-repeat,
        linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu-nuit-fonce) 100%);
    color: #ffffff;
    padding: 40px 0 44px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.entete-confidentialite::before,
.entete-confidentialite::after {
    content: none;
}

.entete-confidentialite .conteneur {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

@media (min-width: 560px) {

    .entete-simple,
    .entete-mentions,
    .entete-confidentialite {
        padding: 56px 0 60px;
    }

    .section-texte {
        padding: 64px 0 88px;
    }

    .bloc-texte {
        padding: 28px 28px;
        margin-bottom: 24px;
    }

    .bloc-texte h2.titre-section {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .bloc-texte p,
    .bloc-texte ul li {
        font-size: 16px;
    }
}

/* ============================================================
   Adaptations tablette et desktop
   ============================================================ */

@media (min-width: 560px) {

    .entete {
        padding: 72px 0 96px;
    }

    .titre-principal {
        font-size: 36px;
    }

    .sous-titre {
        font-size: 18px;
    }

    .section {
        padding: 72px 0;
    }

    .titre-section {
        font-size: 28px;
        padding: 14px 28px;
    }

    .grille-etapes {
        grid-template-columns: 1fr;
    }

    .email-corps {
        padding: 28px 28px;
        font-size: 16px;
    }

    .quiz-choix {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .quiz-bouton {
        flex: 1 1 calc(33.33% - 8px);
    }

    .formulaire {
        padding: 36px 32px;
    }
}

@media (min-width: 760px) {

    .conteneur {
        max-width: 900px;
    }

    .grille-etapes {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: start;
    }

    .etape {
        min-height: 200px;
    }

    .titre-principal {
        font-size: 42px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .sous-titre {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .pied .conteneur {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        text-align: left;
        gap: 20px;
    }

    .pied-info {
        text-align: left;
    }

    .pied-liens {
        justify-content: center;
        border: none;
        padding: 0;
    }

    .pied-copyright {
        text-align: right;
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .bouton {
        transition: none;
    }
}