:root{
    --bleu-profond:  #1a3a5c;
    --bleu-moyen:    #2d6099;
    --bleu-clair:    #6fa8dc;
    --bleu-doux:     #b8d4ec;
    --beige-pale:    #fdf8f0;
    --or:            #c9a227;
    --or-clair:      #e8c547;
    --or-pale:       #f0d878;
    --texte-sombre:  #16233a;
    --texte-moyen:   #2a4a6b;
    --texte-doux:    #5a7d9e;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:'Crimson Pro', Georgia, serif;
    background:var(--beige-pale);
    color:var(--texte-sombre);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}
body::before{
    content:'';
    position:fixed; inset:0;
    background:
            radial-gradient(ellipse at 12% 15%, rgba(111,168,220,0.10) 0%, transparent 55%),
            radial-gradient(ellipse at 88% 85%, rgba(201,162,39,0.06) 0%, transparent 55%);
    pointer-events:none;
}

.carte-accueil{
    position:relative;
    z-index:1;
    background:#fff;
    border:1px solid rgba(111,168,220,0.35);
    border-radius:16px;
    padding:3rem 2.4rem;
    max-width:460px;
    width:100%;
    text-align:center;
    box-shadow:0 8px 32px rgba(26,58,92,0.10);
}
.carte-accueil::before{
    content:'';
    display:block;
    position:absolute;
    top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--or), var(--or-clair), var(--or), transparent);
    border-radius:16px 16px 0 0;
}

.symbole{
    width:52px; height:52px;
    margin:0 auto 1.2rem;
    border-radius:14px;
    background:linear-gradient(135deg, var(--bleu-moyen), var(--bleu-clair));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.5rem;
    box-shadow:0 4px 14px rgba(45,96,153,0.3);
}

h1{
    font-family:'Cinzel', serif;
    font-size:1.6rem;
    color:var(--bleu-profond);
    letter-spacing:0.03em;
    margin-bottom:0.6rem;
}

.accroche{
    color:var(--texte-doux);
    font-style:italic;
    font-size:0.98rem;
    line-height:1.6;
    max-width:300px;
    margin:0 auto 2rem;
}

#statut-erreur{
    display:none;
    background:rgba(139,58,58,0.07);
    color:#6b3a3a;
    border-left:3px solid #8b3a3a;
    border-radius:0 8px 8px 0;
    padding:0.7rem 1rem;
    font-size:0.86rem;
    margin-bottom:1.4rem;
    text-align:left;
}

.btn-google{
    display:inline-flex;
    align-items:center;
    gap:0.7rem;
    background:#fff;
    border:1.5px solid rgba(111,168,220,0.5);
    color:var(--texte-moyen);
    font-family:'Cinzel', serif;
    font-size:0.85rem;
    letter-spacing:0.03em;
    padding:0.85rem 1.7rem;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.2s ease;
}
.btn-google:hover{
    border-color:var(--bleu-clair);
    background:rgba(111,168,220,0.06);
    box-shadow:0 3px 12px rgba(45,96,153,0.15);
}
.btn-google:disabled{
    opacity:0.5;
    cursor:not-allowed;
}
.btn-google svg{ flex-shrink:0; }

.note-dossier{
    font-size:0.78rem;
    color:var(--texte-doux);
    margin-top:1.6rem;
    max-width:280px;
    margin-inline:auto;
    line-height:1.6;
}
.note-dossier .nom-dossier{
    color:var(--bleu-moyen);
    font-weight:600;
}

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(253,248,240,0.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
    padding:1.5rem;
}
.modal-carte{
    position:relative;
    background:#fff;
    border:1px solid rgba(111,168,220,0.35);
    border-radius:16px;
    padding:2.4rem 2rem 2rem;
    max-width:520px;
    width:100%;
    text-align:center;
    box-shadow:0 12px 40px rgba(26,58,92,0.18);
}
.modal-carte::before{
    content:'';
    display:block;
    position:absolute;
    top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--or), var(--or-clair), var(--or), transparent);
    border-radius:16px 16px 0 0;
}
.modal-symbole{
    width:46px; height:46px;
    margin:0 auto 1.1rem;
    border-radius:12px;
    background:linear-gradient(135deg, var(--bleu-moyen), var(--bleu-clair));
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow:0 4px 14px rgba(45,96,153,0.3);
}
.modal-titre{
    font-family:'Cinzel', serif;
    font-size:1.1rem;
    color:var(--bleu-profond);
    letter-spacing:0.02em;
    margin-bottom:0.9rem;
}
.modal-texte{
    font-size:0.92rem;
    color:var(--texte-doux);
    line-height:1.65;
    margin-bottom:1.8rem;
}
.modal-texte strong{
    color:var(--texte-moyen);
}
.modal-boutons{
    display:flex;
    gap:0.7rem;
    justify-content:center;
}
.btn-annuler{
    background:transparent;
    border:1.5px solid rgba(111,168,220,0.4);
    color:var(--texte-doux);
    font-family:'Cinzel', serif;
    font-size:0.78rem;
    letter-spacing:0.02em;
    padding:0.75rem 1.3rem;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.2s ease;
}
.btn-annuler:hover{
    border-color:var(--bleu-clair);
    color:var(--texte-moyen);
}
.btn-primaire{
    background:linear-gradient(135deg, var(--bleu-moyen), var(--bleu-clair));
    border:none;
    color:#fff;
    font-family:'Cinzel', serif;
    font-size:0.78rem;
    letter-spacing:0.02em;
    padding:0.75rem 1.5rem;
    border-radius:10px;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(45,96,153,0.3);
    transition:all 0.2s ease;
}
.btn-primaire:hover{
    filter:brightness(1.08);
}