/* ---------------------------------------------------------------------------
   ECLAI CARNAVAL 2026 — feuille de style du site public
   Mobile-first, sans framework ni dépendance externe.
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--c-texte);
    background: var(--c-fond);
}

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    line-height: 1.12;
    margin: 0 0 var(--e-3);
    font-weight: 800;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }

p  { margin: 0 0 var(--e-4); }
ul { margin: 0 0 var(--e-4); padding-left: 1.2em; }
img, svg { max-width: 100%; height: auto; }

/* <picture> ne sert qu'à proposer le WebP : il ne doit pas créer de boîte,
   sinon les marges et l'alignement portés par la classe de l'<img> sautent. */
picture { display: contents; }

a { color: var(--c-primaire); }
a:hover { color: var(--c-primaire-fonce); }

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.conteneur {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
}

.saut-contenu { position: absolute; left: -9999px; }
.saut-contenu:focus {
    left: var(--e-4); top: var(--e-2); z-index: 100;
    background: var(--c-fond); padding: var(--e-2) var(--e-4); border-radius: var(--r-sm);
}

/* Texture d'icônes de camp, reprise du fond des supports officiels */
.motif { position: relative; }
.motif::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--motif-scout);
    background-size: 180px 180px;
    opacity: .9;
    pointer-events: none;
}
.motif > * { position: relative; z-index: 1; }
.motif--sombre::before { background-image: var(--motif-scout-sombre); }

/* --- En-tête --------------------------------------------------------------- */

.entete {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-bordure);
}

.entete__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-4); min-height: 66px;
}

.marque {
    display: flex; align-items: center; gap: var(--e-2);
    font-family: var(--police-titre); font-weight: 800;
    color: var(--c-primaire-fonce); text-decoration: none;
}
.marque__logo { width: 42px; height: 42px; flex: 0 0 42px; }
.marque__texte { font-size: var(--t-base); line-height: 1.1; letter-spacing: -0.01em; }
.marque__texte small {
    display: block; font-size: var(--t-xs); font-weight: 600;
    color: var(--c-texte-doux); letter-spacing: 0;
}

.nav-principale { display: none; }
.nav-principale a {
    color: var(--c-texte-doux); text-decoration: none;
    font-size: var(--t-sm); font-weight: 600; padding: var(--e-2);
}
.nav-principale a:hover { color: var(--c-primaire); }

@media (min-width: 940px) {
    .nav-principale { display: flex; align-items: center; gap: var(--e-2); }
}

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

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent; border-radius: var(--r-pill);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
.bouton:active { transform: translateY(1px); }

.bouton--principal { background: var(--c-accent); color: #3A2A00; }
.bouton--principal:hover { background: var(--c-accent-fonce); color: #3A2A00; }

.bouton--secondaire { background: transparent; color: var(--c-primaire); border-color: var(--c-bordure-forte); }
.bouton--secondaire:hover { border-color: var(--c-primaire); color: var(--c-primaire-fonce); }

.bouton--clair { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.bouton--clair:hover { background: rgba(255,255,255,.24); color: #fff; }

.bouton--bloc { width: 100%; }

/* --- Hero ------------------------------------------------------------------ */

.hero {
    background:
        radial-gradient(900px 420px at 50% -5%, rgba(91, 201, 127, .30), transparent 65%),
        linear-gradient(165deg, var(--c-primaire-fonce), var(--c-primaire) 52%, var(--c-primaire-sombre));
    color: var(--c-texte-inverse);
    padding-block: var(--e-6) var(--e-8);
    overflow: hidden;
    text-align: center;
}

.hero__badge {
    width: 168px; height: auto;
    margin: 0 auto var(--e-4);
    display: block;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .28));
}
@media (min-width: 760px) { .hero__badge { width: 210px; } }

.hero__lieu {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--r-pill);
    padding: 0.3rem 1rem;
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: var(--e-4);
}

.hero h1 {
    font-size: clamp(2.3rem, 9vw, 4.6rem);
    letter-spacing: -0.025em;
    margin-bottom: var(--e-3);
    text-transform: uppercase;
}
.hero h1 span {
    display: block;
    background: linear-gradient(100deg, #FFFFFF 18%, var(--c-vert-vif) 92%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.hero__theme {
    font-family: var(--police-titre);
    font-size: clamp(1.05rem, 3.4vw, 1.5rem);
    font-weight: 700;
    color: var(--c-accent-clair);
    margin: 0 auto var(--e-4);
    max-width: 26ch;
}

.hero__chapeau {
    font-size: var(--t-md);
    color: rgba(255, 255, 255, .9);
    max-width: 58ch; margin: 0 auto var(--e-5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }

/* --- Compte à rebours ------------------------------------------------------ */

.rebours { margin-top: var(--e-6); }
.rebours__titre {
    font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--c-accent-clair); margin-bottom: var(--e-3);
}
.rebours__grille {
    display: flex; justify-content: center; flex-wrap: wrap; gap: var(--e-2);
}
.rebours__case {
    min-width: 74px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-md);
    padding: var(--e-3) var(--e-2);
}
.rebours__nombre {
    display: block; font-family: var(--police-titre); font-size: var(--t-xl);
    font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.rebours__libelle {
    display: block; font-size: var(--t-xs); text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255, 255, 255, .7); margin-top: var(--e-1);
}

/* --- Bandeau de chiffres --------------------------------------------------- */

.chiffres {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3);
    margin-top: calc(var(--e-6) * -1); position: relative; z-index: 2;
}
@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }

.chiffre {
    background: var(--c-fond); border: 1px solid var(--c-bordure);
    border-radius: var(--r-md); box-shadow: var(--ombre-2);
    padding: var(--e-4); text-align: center;
}
.chiffre__valeur {
    display: block; font-family: var(--police-titre); font-size: var(--t-2xl);
    font-weight: 800; color: var(--c-primaire); line-height: 1;
    /* « 1 120 » ne doit jamais se couper sur son espace fine */
    white-space: nowrap;
}
.chiffre__libelle {
    display: block; margin-top: var(--e-1); font-size: var(--t-sm); color: var(--c-texte-doux);
}

/* --- Sections -------------------------------------------------------------- */

.section { padding-block: var(--e-7); }
.section--doux { background: var(--c-fond-doux); }
.section--sombre {
    background: linear-gradient(165deg, var(--c-primaire-fonce), var(--c-primaire-sombre));
    color: var(--c-texte-inverse);
}
.section--sombre h2, .section--sombre h3 { color: var(--c-texte-inverse); }
.section--sombre p  { color: rgba(255, 255, 255, .84); }

.section__entete { max-width: var(--largeur-texte); margin-bottom: var(--e-6); }
.section__entete--centre { margin-inline: auto; text-align: center; }
.section__surtitre {
    display: block; font-size: var(--t-xs); font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-accent-fonce); margin-bottom: var(--e-2);
}
.section--sombre .section__surtitre { color: var(--c-accent-clair); }

.grille { display: grid; gap: var(--e-4); }
@media (min-width: 700px)  { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grille--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

.carte {
    background: var(--c-fond); border: 1px solid var(--c-bordure);
    border-radius: var(--r-md); padding: var(--e-5);
}
.carte h3 { margin-bottom: var(--e-2); }
.carte p:last-child { margin-bottom: 0; }

/* --- Thème du camp --------------------------------------------------------- */

.theme-camp {
    text-align: center;
    max-width: 24ch;
    margin: 0 auto;
    font-family: var(--police-titre);
    font-size: clamp(1.6rem, 5.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--c-texte-inverse);
}
.theme-camp span { color: var(--c-accent-clair); }

/* --- Villages -------------------------------------------------------------- */

.villages { display: grid; gap: var(--e-4); }
@media (min-width: 640px)  { .villages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .villages { grid-template-columns: repeat(4, 1fr); } }

.village {
    display: flex; flex-direction: column;
    background: var(--c-fond);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--ombre-1);
    transition: transform .15s ease, box-shadow .15s ease;
}
.village:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }

.village__bandeau {
    background: var(--couleur, var(--c-primaire));
    color: var(--couleur-texte, #fff);
    padding: var(--e-4) var(--e-5) var(--e-5);
    text-align: center;
    border-bottom: 4px solid var(--c-primaire);
}
.village__badge {
    width: 88px; height: 88px; border-radius: 50%;
    object-fit: cover; background: #fff;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: var(--ombre-1);
    margin: 0 auto var(--e-3); display: block;
}
.village__specialite {
    display: block; font-size: var(--t-xs); font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; opacity: .82;
}
.village__nom { font-size: var(--t-lg); margin: var(--e-1) 0 0; }
.village__couleur {
    display: inline-block; margin-top: var(--e-2);
    font-size: var(--t-xs); font-weight: 700;
    border: 1px solid currentColor; border-radius: var(--r-pill);
    padding: .05rem .6rem; opacity: .8;
}

.village__corps { padding: var(--e-5); flex: 1; }
.village__accroche { font-weight: 700; margin-bottom: var(--e-2); }
.village__corps p { color: var(--c-texte-doux); font-size: var(--t-sm); }

.village__elements { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.village__elements li { position: relative; padding-left: 1.3em; margin-bottom: var(--e-2); }
.village__elements li::before {
    content: ""; position: absolute; left: 0; top: .6em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--couleur, var(--c-primaire));
    box-shadow: 0 0 0 1px var(--c-bordure-forte);
}

.village__pied { padding: var(--e-3) var(--e-5) var(--e-5); border-top: 1px solid var(--c-bordure); }

/* Jauge de remplissage */
.jauge {
    height: 8px; background: var(--c-bordure); border-radius: var(--r-pill);
    overflow: hidden; margin-bottom: var(--e-2);
}
.jauge__barre {
    height: 100%; background: var(--couleur, var(--c-primaire));
    border-radius: var(--r-pill); transition: width .3s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.jauge--pleine .jauge__barre { background: var(--c-erreur); }

.places { font-size: var(--t-sm); font-weight: 600; color: var(--c-texte-doux); }
.places--complet { color: var(--c-erreur); }

.etiquette-complet {
    display: inline-block; background: var(--c-erreur); color: #fff;
    font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; border-radius: var(--r-pill); padding: .15rem .7rem;
}

/* --- Page de détail d'un village ------------------------------------------- */

.village-hero {
    background: var(--couleur, var(--c-primaire));
    color: var(--couleur-texte, #fff);
    padding-block: var(--e-7);
    text-align: center;
    border-bottom: 6px solid var(--c-primaire);
}
.village-hero__badge {
    width: 140px; height: 140px; border-radius: 50%;
    object-fit: cover; background: #fff;
    border: 4px solid rgba(255, 255, 255, .9);
    box-shadow: var(--ombre-2);
    margin: 0 auto var(--e-4); display: block;
}
.village-hero h1 { font-size: clamp(2rem, 7vw, 3.4rem); text-transform: uppercase; }
.village-hero__specialite {
    font-size: var(--t-xs); font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; opacity: .82;
}
.village-hero__accroche { font-size: var(--t-md); font-weight: 600; max-width: 46ch; margin: var(--e-3) auto 0; }

.bloc-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-3); }
.bloc-liste li {
    background: var(--c-fond); border: 1px solid var(--c-bordure);
    border-left: 4px solid var(--couleur, var(--c-primaire));
    border-radius: var(--r-sm); padding: var(--e-3) var(--e-4);
}
.bloc-liste strong { display: block; }
.bloc-liste span { color: var(--c-texte-doux); font-size: var(--t-sm); }
@media (min-width: 760px) { .bloc-liste--2 { grid-template-columns: repeat(2, 1fr); } }

.gouvernance {
    background: var(--c-fond-doux);
    border-radius: var(--r-md);
    padding: var(--e-5);
}
.gouvernance__chef {
    font-family: var(--police-titre); font-size: var(--t-lg);
    color: var(--c-primaire-fonce); margin-bottom: var(--e-4);
}
.gouvernance dl { margin: 0; display: grid; gap: var(--e-2); }
.gouvernance dl > div {
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
    justify-content: space-between;
    padding: var(--e-2) 0; border-bottom: 1px dashed var(--c-bordure-forte);
}
.gouvernance dl > div:last-child { border-bottom: 0; }
.gouvernance dt { color: var(--c-texte-doux); font-size: var(--t-sm); }
.gouvernance dd { margin: 0; font-weight: 700; font-style: italic; color: var(--c-primaire-fonce); }

.foulard {
    display: flex; align-items: center; gap: var(--e-4);
    background: var(--c-fond); border: 1px solid var(--c-bordure);
    border-radius: var(--r-md); padding: var(--e-4);
}
.foulard__visuel {
    width: 84px; height: 60px; flex: 0 0 84px;
    background: var(--couleur, var(--c-primaire));
    border: 4px solid var(--c-primaire);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.nav-villages {
    display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center;
    margin-top: var(--e-6);
}
.nav-villages a {
    display: inline-flex; align-items: center; gap: var(--e-2);
    border: 2px solid var(--c-bordure-forte); border-radius: var(--r-pill);
    padding: .35rem 1rem .35rem .4rem;
    text-decoration: none; font-weight: 700; font-size: var(--t-sm);
    color: var(--c-texte);
}
.nav-villages a:hover { border-color: var(--c-primaire); }
.nav-villages a.actif { border-color: var(--c-primaire); background: var(--c-fond-doux); }
.nav-villages img { width: 30px; height: 30px; border-radius: 50%; }

/* --- Liste de spécialités -------------------------------------------------- */

.specialites { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.specialites li {
    background: var(--c-fond); border: 1px solid var(--c-bordure-forte);
    border-radius: var(--r-pill); padding: .4rem 1rem;
    font-weight: 600; font-size: var(--t-sm);
}
.section--sombre .specialites li {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/* --- Kits du campeur ------------------------------------------------------- */

.kits { display: grid; gap: var(--e-4); }
@media (min-width: 760px) { .kits { grid-template-columns: repeat(2, 1fr); } }

.kit {
    background: var(--c-fond); border: 2px solid var(--c-bordure);
    border-radius: var(--r-lg); padding: var(--e-5); text-align: center;
}
.kit--principal { border-color: var(--c-accent); box-shadow: var(--ombre-2); }
.kit__pour { font-size: var(--t-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texte-doux); }
.kit__prix {
    font-family: var(--police-titre); font-size: var(--t-2xl); font-weight: 800;
    color: var(--c-primaire-fonce); line-height: 1; margin: var(--e-2) 0 var(--e-4);
}
.kit__prix small { font-size: var(--t-sm); font-weight: 600; color: var(--c-texte-doux); }
.kit ul { list-style: none; padding: 0; text-align: left; font-size: var(--t-sm); }
.kit li { padding-left: 1.6em; position: relative; margin-bottom: var(--e-2); }
.kit li::before {
    content: "✓"; position: absolute; left: 0; color: var(--c-primaire); font-weight: 800;
}

/* --- Agenda ---------------------------------------------------------------- */

.agenda { display: grid; gap: var(--e-3); }
@media (min-width: 780px)  { .agenda { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .agenda { grid-template-columns: repeat(4, 1fr); } }

.jour {
    background: var(--c-fond); border: 1px solid var(--c-bordure);
    border-radius: var(--r-md); padding: var(--e-4);
}
.jour__date {
    font-family: var(--police-titre); font-weight: 800; font-size: var(--t-sm);
    text-transform: uppercase; letter-spacing: .06em; color: var(--c-primaire);
}
.jour__theme {
    display: inline-block; margin: var(--e-1) 0 var(--e-3);
    font-size: var(--t-xs); font-weight: 700; background: var(--c-fond-doux);
    border-radius: var(--r-pill); padding: .1rem .6rem; color: var(--c-texte-doux);
}
.jour__moments { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); }
.jour__moments li { padding: var(--e-2) 0; border-top: 1px dashed var(--c-bordure); }
.jour__moments li:first-child { border-top: 0; }
.jour__heure { display: block; font-weight: 700; color: var(--c-texte-doux); font-size: var(--t-xs); }
.jour__note { margin-top: var(--e-3); font-size: var(--t-xs); font-weight: 700; color: var(--c-accent-fonce); }

.rythme { display: flex; flex-wrap: wrap; gap: var(--e-3); list-style: none; padding: 0; margin: var(--e-5) 0 0; }
.rythme li { flex: 1 1 200px; background: var(--c-fond-doux); border-radius: var(--r-sm); padding: var(--e-3) var(--e-4); font-size: var(--t-sm); }
.rythme strong { display: block; color: var(--c-primaire); }

/* --- Structure village / troupe / patrouille ------------------------------- */

.echelle { display: grid; gap: var(--e-3); }
@media (min-width: 700px) { .echelle { grid-template-columns: repeat(3, 1fr); } }
.echelle__niveau {
    background: var(--c-fond); border-left: 4px solid var(--c-accent);
    border-radius: var(--r-sm); padding: var(--e-4);
}
.echelle__niveau strong { display: block; font-size: var(--t-md); }
.echelle__niveau span { color: var(--c-texte-doux); font-size: var(--t-sm); }

/* --- Appel à l'inscription ------------------------------------------------- */

.appel {
    background: linear-gradient(135deg, var(--c-primaire), var(--c-primaire-fonce));
    color: #fff; border-radius: var(--r-lg); padding: var(--e-6); text-align: center;
}
.appel h2 { color: #fff; }
.appel p { color: rgba(255, 255, 255, .9); max-width: 52ch; margin-inline: auto; }

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

.pied {
    background: var(--c-fond-sombre); color: rgba(255, 255, 255, .78);
    padding-block: var(--e-6); font-size: var(--t-sm);
}
.pied a { color: #fff; }
.pied__grille { display: grid; gap: var(--e-5); }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied h3 { color: #fff; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; }
.pied ul { list-style: none; padding: 0; }
.pied li { margin-bottom: var(--e-2); }
.pied__bas {
    margin-top: var(--e-5); padding-top: var(--e-4);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--t-xs); color: rgba(255, 255, 255, .55);
}

/* --- Messages -------------------------------------------------------------- */

.message { border-radius: var(--r-md); padding: var(--e-4); margin-bottom: var(--e-4); border: 1px solid transparent; }
.message--succes { background: var(--c-succes-fond); border-color: var(--c-succes); color: #145033; }
.message--erreur { background: var(--c-erreur-fond); border-color: var(--c-erreur); color: #7E1B15; }
.message--info   { background: var(--c-info-fond);   border-color: var(--c-info);   color: #1A2361; }
.message--alerte { background: var(--c-alerte-fond); border-color: var(--c-alerte); color: #6B4A00; }
.message p:last-child { margin-bottom: 0; }
.message ul { margin-bottom: 0; }

/* --- Formulaire ------------------------------------------------------------ */

.formulaire { max-width: 760px; }

.champ { margin-bottom: var(--e-5); }
.champ > label, .groupe__legende { display: block; font-weight: 700; margin-bottom: var(--e-2); }
.champ__aide { display: block; font-size: var(--t-sm); color: var(--c-texte-doux); margin-bottom: var(--e-2); }
.champ__obligatoire { color: var(--c-erreur); }

.champ input[type="text"], .champ input[type="tel"], .champ input[type="number"],
.champ input[type="email"], .champ input[type="password"], .champ input[type="search"],
.champ select, .champ textarea {
    width: 100%; padding: 0.75rem 0.9rem; font: inherit; color: var(--c-texte);
    background: var(--c-fond); border: 2px solid var(--c-bordure-forte); border-radius: var(--r-sm);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--c-primaire); outline: none; }

.champ--erreur input, .champ--erreur select { border-color: var(--c-erreur); background: #FFF9F9; }
.champ__erreur { display: block; margin-top: var(--e-2); color: var(--c-erreur); font-size: var(--t-sm); font-weight: 600; }

.pot-de-miel { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* Choix des villages (vœux) */
.voeux { display: grid; gap: var(--e-5); }

.choix-villages { display: grid; gap: var(--e-3); border: 0; padding: 0; margin: 0; }
@media (min-width: 620px) { .choix-villages { grid-template-columns: repeat(2, 1fr); } }

.choix {
    position: relative; display: block;
    border: 2px solid var(--c-bordure-forte); border-radius: var(--r-md);
    padding: var(--e-4); cursor: pointer; background: var(--c-fond);
    transition: border-color .15s ease, background-color .15s ease;
}
.choix:hover { border-color: var(--couleur, var(--c-primaire)); }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix input:focus-visible ~ .choix__contenu { outline: 3px solid var(--c-accent); outline-offset: 4px; }
.choix:has(input:checked) {
    border-color: var(--c-primaire);
    background: var(--c-fond-doux);
    box-shadow: inset 0 0 0 1px var(--c-primaire);
}

.choix__pastille {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    background: var(--couleur, var(--c-primaire));
    box-shadow: 0 0 0 1px var(--c-bordure-forte);
    margin-right: var(--e-2); vertical-align: -2px;
}
.choix__nom { font-weight: 700; }
.choix__specialite { display: block; font-size: var(--t-sm); color: var(--c-texte-doux); }
.choix__places { display: block; margin-top: var(--e-2); font-size: var(--t-xs); font-weight: 700; }

.choix--complet {
    cursor: not-allowed; background: var(--c-fond-doux);
    border-style: dashed; opacity: .62; filter: grayscale(1);
}
.choix--complet:hover { border-color: var(--c-bordure-forte); }

/* Village déjà retenu pour un autre vœu : grisé mais sans le rouge « complet » */
.choix--pris { filter: none; opacity: .5; }
.choix--pris .etiquette-complet { display: none; }

.formulaire__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-6); }

.consentement { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); }
.consentement input { margin-top: .35em; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

/* --- Page de confirmation -------------------------------------------------- */

.confirmation { text-align: center; padding-block: var(--e-7); }
.confirmation__code {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--t-xl); font-weight: 700; letter-spacing: .12em;
    background: var(--c-fond-doux); border: 2px dashed var(--c-primaire);
    border-radius: var(--r-md); padding: var(--e-4) var(--e-5); margin: var(--e-4) 0;
}
.recap { text-align: left; max-width: 560px; margin-inline: auto; border: 1px solid var(--c-bordure); border-radius: var(--r-md); }
.recap div {
    display: flex; justify-content: space-between; gap: var(--e-4);
    padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--c-bordure);
}
.recap div:last-child { border-bottom: 0; }
.recap dt { color: var(--c-texte-doux); font-size: var(--t-sm); }
.recap dd { margin: 0; font-weight: 600; text-align: right; }

/* --- Impression ------------------------------------------------------------ */

@media print {
    .entete, .pied, .hero__actions, .formulaire__actions, .rebours { display: none; }
    body { color: #000; }
    .motif::before { display: none; }
}