/* Géobalades : charte aquarelle, pastel et sobre (illustrations dans assets/images/aquarelle) */

@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal-0Jcu3LB.woff2") format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic-pM-d9G1.woff2") format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal-qq0WYkC.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-400-normal-i9T5ent.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/nunito-latin-400-italic-KkA6Oxi.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-600-normal-qIYeJmP.woff2") format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-latin-700-normal-Iq2sL9O.woff2") format('woff2'); }

:root {
    /* Papier et encre */
    --papier: #f8f3ea;
    --papier-clair: #fffaf2;
    --papier-fonce: #efe5d4;
    --trait: #e6dccb;
    --encre: #4f4858;
    --encre-douce: #776f7c;

    /* Lavis */
    --miel: #e9c27c;
    --miel-pale: #f7e6c2;
    --rose: #e8a598;
    --rose-pale: #f6dcd4;
    --brume: #9dbbd3;
    --brume-pale: #dbe8f1;
    --lavande: #b4a7d6;
    --lavande-pale: #e6e0f2;
    --sauge: #9fbf9f;
    --sauge-pale: #dde9d8;
    --sauge-fonce: #557a5d; /* boutons : texte blanc lisible (contraste 4,8) */
    --sauge-nuit: #476a4f;

    --police-titre: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --police-texte: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ombre-douce: 0 2px 14px rgb(79 72 88 / 0.08);
    --ombre-flottante: 0 8px 30px rgb(79 72 88 / 0.16);

    /* Bootstrap aux couleurs du papier */
    --bs-body-bg: var(--papier);
    --bs-body-color: var(--encre);
    --bs-body-font-family: var(--police-texte);
    --bs-secondary-color: var(--encre-douce);
    --bs-tertiary-bg: var(--papier-fonce);
    --bs-border-color: var(--trait);
    --bs-emphasis-color: var(--encre);
    --bs-heading-color: var(--encre);
    --bs-link-color: var(--sauge-fonce);
    --bs-link-color-rgb: 85, 122, 93;
    --bs-link-hover-color: var(--sauge-nuit);
    --bs-link-hover-color-rgb: 71, 106, 79;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-focus-ring-color: rgb(159 191 159 / 0.45);
}

/* Couleur propre à chaque mode de jeu : .mode-tresor, .mode-chrono… */
.mode-tresor { --mode: var(--miel); --mode-pale: var(--miel-pale); }
.mode-chrono { --mode: var(--rose); --mode-pale: var(--rose-pale); }
.mode-checkpoint { --mode: var(--brume); --mode-pale: var(--brume-pale); }
.mode-mystere { --mode: var(--lavande); --mode-pale: var(--lavande-pale); }
.mode-guide { --mode: var(--sauge); --mode-pale: var(--sauge-pale); }

body {
    background: var(--papier) url("../images/aquarelle/papier-PGVHOgc.svg");
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3, .h4, .titre {
    font-family: var(--police-titre);
    font-weight: 600;
    letter-spacing: 0.005em;
}
h1, .h1 { font-size: 2.1rem; }
.h4 { font-size: 1.7rem; }
.titre-italique { font-family: var(--police-titre); font-style: italic; font-weight: 500; }
::selection { background: var(--miel-pale); }
.min-w-0 { min-width: 0; }
.page-compte { max-width: 440px; }

/* ---- Boutons ---- */
.btn { font-weight: 600; border-radius: 999px; padding-inline: 1.1em; }
.btn-sm { padding-inline: 0.9em; }
.btn-principal {
    --bs-btn-bg: var(--sauge-fonce);
    --bs-btn-border-color: var(--sauge-fonce);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--sauge-nuit);
    --bs-btn-hover-border-color: var(--sauge-nuit);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--sauge-nuit);
    --bs-btn-active-border-color: var(--sauge-nuit);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--sauge);
    --bs-btn-disabled-border-color: var(--sauge);
    box-shadow: 0 2px 8px rgb(85 122 93 / 0.25);
}
.btn-outline-secondary {
    --bs-btn-color: var(--encre);
    --bs-btn-border-color: var(--trait);
    --bs-btn-bg: var(--papier-clair);
    --bs-btn-hover-bg: var(--papier-fonce);
    --bs-btn-hover-color: var(--encre);
    --bs-btn-hover-border-color: var(--trait);
    --bs-btn-active-bg: var(--papier-fonce);
    --bs-btn-active-color: var(--encre);
    --bs-btn-active-border-color: var(--trait);
}
.btn-light {
    --bs-btn-bg: var(--papier-clair);
    --bs-btn-border-color: var(--papier-clair);
    --bs-btn-color: var(--encre);
    --bs-btn-hover-bg: var(--papier);
    --bs-btn-hover-border-color: var(--papier);
}
.badge-mode {
    display: inline-block;
    padding: 0.3em 0.9em;
    border-radius: 999px;
    background: var(--mode-pale, var(--papier-fonce));
    color: var(--encre);
    font-weight: 600;
    font-size: 0.8rem;
}

/* ---- Formulaires ---- */
.form-control, .form-select {
    background-color: var(--papier-clair);
    border-color: var(--trait);
    color: var(--encre);
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--sauge);
    box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color);
}
.form-check-input:checked { background-color: var(--sauge-fonce); border-color: var(--sauge-fonce); }
.form-check-input:focus { border-color: var(--sauge); box-shadow: 0 0 0 0.22rem var(--bs-focus-ring-color); }
.form-label, legend.form-label { font-weight: 600; }
.alert { border-radius: 14px; border: none; }
.alert-success { background: var(--sauge-pale); color: var(--encre); }
.alert-warning { background: var(--miel-pale); color: var(--encre); }
.alert-danger { background: var(--rose-pale); color: #6f3a33; }
.alert-light { background: var(--papier-clair); }
.card { background: var(--papier-clair); border-color: var(--trait); border-radius: 14px; }
.card-header { background: transparent; border-color: var(--trait); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--encre); --bs-table-border-color: var(--trait); }

/* ---- Barre de navigation : papier clair et filet de lavis ---- */
.navbar-papier {
    position: relative;
    background: rgb(255 250 242 / 0.88);
    backdrop-filter: blur(6px);
    --bs-navbar-color: var(--encre-douce);
    --bs-navbar-hover-color: var(--encre);
    --bs-navbar-active-color: var(--encre);
    --bs-navbar-brand-color: var(--encre);
    --bs-navbar-brand-hover-color: var(--encre);
}
.navbar-papier::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--miel), var(--rose) 25%, var(--lavande) 50%, var(--brume) 75%, var(--sauge));
    opacity: 0.55;
    filter: blur(0.6px);
}
.navbar-papier .navbar-brand {
    font-family: var(--police-titre);
    font-style: italic;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
}
.navbar-papier .nav-link { font-weight: 600; }

/* ---- Accueil : paysage en parallaxe, étapes, modes, puis la carte et la liste ---- */
.page-accueil { overflow-x: hidden; }
.intro {
    position: relative;
    height: min(92svh, 860px);
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}
/* Le bas du paysage se fond dans le papier de la page */
.intro-plans {
    -webkit-mask-image: linear-gradient(#000 78%, transparent);
    mask-image: linear-gradient(#000 78%, transparent);
}
.intro-plans, .intro-plan {
    position: absolute;
    inset: 0;
}
.intro-plan { will-change: transform; }
/* Bande qui se répète vers la droite ; le script lui donne la largeur de l'écran plus un motif */
.intro-bande {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left bottom;
    will-change: transform;
}
.intro-bande-fixe { background-repeat: no-repeat; background-size: cover; background-position: center bottom; }
.intro-texte {
    position: relative;
    padding: clamp(48px, 13vh, 140px) 20px 0;
    will-change: transform, opacity;
}
.intro-surtitre {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--encre-douce);
    margin-bottom: 0.4rem;
}
.intro h1 {
    font-style: italic;
    font-weight: 500;
    font-size: clamp(3.4rem, 11vw, 6.5rem);
    line-height: 0.95;
    margin: 0;
}
.intro-accroche {
    font-family: var(--police-titre);
    font-style: italic;
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    color: var(--encre-douce);
    margin: 0.8rem 0 0;
}
.intro-defiler {
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgb(79 72 88 / 0.45);
    border-radius: 999px;
}
.intro-defiler span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--encre-douce);
    animation: molette 2s ease-in-out infinite;
}
@keyframes molette {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    80%, 100% { opacity: 0; transform: translateY(14px); }
}

.section-titre {
    text-align: center;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    margin-bottom: 1.6rem;
}
.comment, .modes, .balades { padding: 56px 16px; }
.comment-etapes {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 48px;
}
.comment-sentier {
    position: absolute;
    left: 50%;
    top: 0;
    width: 120px;
    height: 100%;
    margin-left: -60px;
    overflow: visible;
}
/* Le sentier en pointillés se révèle à travers un masque qui se dessine (assets/js/defilement.js) */
.comment-sentier mask path {
    fill: none;
    stroke: #fff;
    stroke-width: 30;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.comment-pointilles {
    fill: none;
    stroke: var(--encre-douce);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 1 10;
    vector-effect: non-scaling-stroke;
    opacity: 0.55;
}
.comment-etape {
    position: relative;
    width: min(100%, 300px);
    background: var(--papier-clair);
    border-radius: 20px;
    padding: 18px 20px 16px;
    box-shadow: var(--ombre-douce);
}
.comment-etape:nth-child(odd) { justify-self: end; }
.comment-etape h3 { font-size: 1.5rem; margin: 0 0 4px; }
.comment-etape p { margin: 0; color: var(--encre-douce); }
.comment-numero {
    position: absolute;
    top: -16px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: url("../images/aquarelle/tache-actif-BwiWQOS.svg") center / contain no-repeat;
    font-weight: 700;
}
.comment-etape:nth-child(3) .comment-numero { background-image: url("../images/aquarelle/tache-passee-x6AarEn.svg"); }
.comment-etape:nth-child(4) .comment-numero { background-image: url("../images/aquarelle/tache-attente-klwvBVh.svg"); }

.modes-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.mode-carte {
    text-align: center;
    background: var(--papier-clair);
    border-radius: 22px;
    padding: 6px 18px 20px;
    box-shadow: var(--ombre-douce);
    transition-delay: var(--delai, 0ms);
}
.mode-carte img { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.mode-carte h3 { font-size: 1.55rem; margin: 0 0 6px; }
.mode-carte p { font-size: 0.92rem; color: var(--encre-douce); margin: 0; }
.mode-carte::after {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: var(--mode);
    opacity: 0.8;
}

/* Apparition au défilement (assets/js/defilement.js) */
.apparait {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .apparait { opacity: 1; transform: none; transition: none; }
    .intro-defiler span { animation: none; }
}

.balades-entete { text-align: center; }
.balades-entete p { color: var(--encre-douce); }
.accueil {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--papier-clair);
    border-radius: 24px;
    box-shadow: var(--ombre-douce);
    overflow: hidden;
}
.bouton-carte { position: absolute; z-index: 800; right: 12px; bottom: 24px; box-shadow: var(--ombre-flottante); }
.accueil-carte { position: relative; height: 62vh; }
#carte-accueil { height: 100%; }
.carte-reveil {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 790;
    height: 100%;
    width: 100%;
    border: 0;
    background: linear-gradient(transparent 55%, rgb(79 72 88 / 0.18));
    color: var(--encre);
    font-weight: 700;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
}
.carte-reveil[hidden] { display: none; }
.accueil-liste { padding: 16px; }
@media (min-width: 992px) {
    .accueil { display: grid; grid-template-columns: 1fr 420px; height: min(78vh, 760px); }
    .accueil-carte { height: 100%; }
    .accueil-liste { overflow-y: auto; box-shadow: -1px 0 0 var(--trait); }
}
@media (max-width: 575px) {
    .comment-etape:nth-child(odd) { justify-self: auto; }
    .comment-etape { width: 100%; }
    .comment-sentier { display: none; }
}

.pied { text-align: center; color: var(--encre-douce); padding-bottom: 28px; }
.pied-paysage { display: block; width: 100%; max-height: 220px; object-fit: cover; object-position: center bottom; margin-bottom: 8px; }
.pied .titre-italique { font-size: 1.3rem; color: var(--encre); }

.carte-balade {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
    margin-bottom: 10px;
    background: var(--papier-clair);
    border-radius: 16px;
    box-shadow: var(--ombre-douce);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carte-balade:hover { transform: translateY(-1px); box-shadow: var(--ombre-flottante); }
.carte-balade h2, .carte-balade h3 { font-size: 1.35rem; margin: 0 0 2px; }
.carte-balade-illustration {
    width: 76px;
    height: 57px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--mode-pale, var(--papier-fonce));
    object-fit: contain;
}
.carte-balade-details { font-size: 0.85rem; color: var(--encre-douce); }
.etiquette-visibilite { font-family: var(--police-texte); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 0.2em 0.7em; vertical-align: middle; }
.etiquette-brouillon { background: var(--papier-fonce); color: var(--encre-douce); }
.etiquette-publique { background: var(--sauge-pale); color: var(--encre); }
.etiquette-privee { background: var(--lavande-pale); color: var(--encre); }
.vide-poetique { text-align: center; color: var(--encre-douce); padding: 24px 8px; }
.vide-poetique img { width: 180px; opacity: 0.9; }

/* Fenêtre d'une balade sur la carte d'accueil */
.popup-balade { min-width: 200px; }
.popup-balade img { display: block; width: 120px; margin: -4px auto 4px; }
.popup-balade strong { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; display: block; line-height: 1.1; }

/* ---- Pages de compte : petite aquarelle au-dessus du formulaire ---- */
.page-compte-illustration { display: block; width: 100%; max-width: 360px; margin: 0 auto -8px; }

/* ---- Jeu : carte plein écran sous un bandeau ---- */
.page-jeu { overflow: hidden; }
#jeu { position: fixed; inset: 0; display: flex; flex-direction: column; }
#carte-jeu { flex: 1; }
.jeu-bandeau {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: rgb(255 250 242 / 0.94);
    backdrop-filter: blur(6px);
    color: var(--encre);
    z-index: 900;
    box-shadow: 0 2px 12px rgb(79 72 88 / 0.1);
}
.jeu-bandeau::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--mode, var(--sauge));
    opacity: 0.7;
    filter: blur(0.6px);
}
.jeu-retour { color: var(--encre-douce); font-size: 1.5rem; text-decoration: none; line-height: 1; }
.jeu-etape { flex: 1; min-width: 0; }
.jeu-titre { font-family: var(--police-titre); font-style: italic; font-size: 1rem; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
#jeu-progression { font-weight: 700; }
.jeu-distance { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jeu-chrono { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; background: var(--mode-pale, var(--papier-fonce)); border-radius: 999px; padding: 2px 10px; }
.jeu-test { background: var(--miel-pale); color: var(--encre); text-align: center; font-size: 0.85rem; padding: 4px; z-index: 900; }
.jeu-panneau {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 850;
    background: var(--papier-clair);
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: var(--ombre-flottante);
    border-left: 6px solid var(--mode, var(--sauge));
    max-height: 40vh;
    overflow-y: auto;
}
.jeu-panneau-titre { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-douce); }
.jeu-chaud-froid { font-weight: 700; margin-top: 4px; }
.jeu-chaud-froid.chaud { color: #b0584a; }
.jeu-chaud-froid.froid { color: #4f7798; }
.jeu-gps, .jeu-toast {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 860;
    max-width: calc(100% - 24px);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.9rem;
    box-shadow: var(--ombre-flottante);
}
.jeu-gps { top: 80px; background: var(--miel-pale); color: var(--encre); }
.jeu-toast { top: 124px; background: var(--mode-pale, var(--sauge-pale)); color: var(--encre); font-weight: 700; text-align: center; }
.page-jeu .bouton-carte { bottom: 50%; }
.jeu-ecran {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(79 72 88 / 0.3);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.jeu-ecran[hidden] { display: none; }
.jeu-ecran-carte {
    background: var(--papier-clair) url("../images/aquarelle/papier-PGVHOgc.svg");
    border-radius: 24px;
    padding: 8px 24px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: var(--ombre-flottante);
}
.jeu-ecran-carte h1 { font-size: 2rem; margin-bottom: 4px; }
.illustration-mode { display: block; width: 200px; max-width: 70%; margin: 0 auto -6px; }
.texte-balise { white-space: pre-line; font-size: 1.05rem; }
.victoire { text-align: center; }
.victoire img { width: 180px; display: block; margin: 0 auto; }
.victoire-titre { font-family: var(--police-titre); font-size: 2.4rem; font-weight: 600; color: var(--encre); line-height: 1.1; }
.classement caption { font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600; color: inherit; }
.modal { --bs-modal-bg: var(--papier-clair); --bs-modal-border-radius: 22px; --bs-modal-border-width: 0; --bs-modal-header-border-color: var(--trait); --bs-modal-footer-border-color: transparent; }
.modal-title { font-family: var(--police-titre); font-size: 1.6rem; }
.modal-backdrop { --bs-backdrop-bg: #4f4858; --bs-backdrop-opacity: 0.35; }

/* ---- Éditeur ---- */
#carte-editeur { height: 55vh; border-radius: 18px; cursor: crosshair; box-shadow: var(--ombre-douce); }
@media (min-width: 992px) {
    .editeur-carte-bloc { position: sticky; top: 12px; }
    #carte-editeur { height: calc(100vh - 170px); }
}
.choix-modes { display: grid; gap: 8px; }
.choix-mode {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 12px 6px 6px;
    background: var(--papier-clair);
    border: 1.5px solid var(--trait);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.choix-mode img { width: 64px; height: 48px; flex-shrink: 0; border-radius: 10px; }
.choix-mode:has(input:checked) { border-color: var(--mode); background: var(--mode-pale); }
.choix-mode input { flex-shrink: 0; order: 3; margin-left: auto; }
.choix-mode strong { font-family: var(--police-titre); font-size: 1.2rem; font-weight: 600; }
.balise-corps { display: none; }
.balise-item.ouverte .balise-corps { display: block; }
.balise-item.ouverte { border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose-pale); }
.balise-resume { font-size: 0.9rem; }
.vignette-balise { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.champ-mystere[hidden] { display: none !important; }

/* Visibilité : trois choix, et le lien d'invitation quand « Privée » est cochée */
.choix-visibilites { display: grid; gap: 6px; }
.choix-visibilite {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px;
    background: var(--papier-clair);
    border: 1.5px solid var(--trait);
    border-radius: 14px;
    cursor: pointer;
}
.choix-visibilite input { margin-top: 4px; flex-shrink: 0; }
.choix-visibilite:has(input:checked) { border-color: var(--lavande); background: var(--lavande-pale); }
.choix-visibilite:has(input[value="publique"]:checked) { border-color: var(--sauge); background: var(--sauge-pale); }
.choix-visibilite:has(input[value="brouillon"]:checked) { border-color: var(--trait); background: var(--papier-fonce); }
.invitation {
    display: none;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--lavande-pale);
}
fieldset:has(input[value="privee"]:checked) .invitation { display: block; }
.invitation .form-control { font-size: 0.8rem; }
.sticky-bottom.bg-body { background: rgb(248 243 234 / 0.94) !important; backdrop-filter: blur(4px); }