/**
 * Budget participatif — formulaire de vote.
 *
 * Charte : violet clair #B694C0, violet foncé #626798.
 * Titres en Blue Winter, textes courants en Menca.
 *
 * Menca est servie par Adobe Fonts, dont la licence interdit
 * l'auto-hébergement : la feuille du kit est appelée depuis use.typekit.net
 * (voir Frontend::register_assets). Le nom de famille qu'elle déclare est
 * « menca », en minuscules.
 *
 * Blue Winter est auto-hébergée, convertie en WOFF2/WOFF depuis l'OTF fourni.
 */

@font-face {
    font-family: "Blue Winter";
    /* Chemins relatifs à ce fichier. */
    src: url("fonts/blue-winter.woff2") format("woff2"),
         url("fonts/blue-winter.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    /* Le texte s'affiche tout de suite dans la police de repli puis bascule :
       jamais de titre invisible pendant le chargement. */
    font-display: swap;
}



.bp-form,
.bp-projects,
.bp-closed,
.bp-confirmation,
.bp-setup-hint {
    --bp-violet-clair: rgb(182, 148, 192);
    --bp-violet-fonce: rgb(98, 103, 152);


    --bp-font-titre: "Blue Winter", Georgia, "Times New Roman", serif;
    --bp-font-texte: "menca", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --bp-texte: #1d1d1f;
    --bp-texte-doux: #55555c;
    --bp-fond-doux: #f6f4f8;
    --bp-bordure: #d8d2de;
    --bp-erreur: #b32d2e;
    --bp-succes: #1e6b3a;

    /* Espacements adossés au corps de texte plutôt qu'à des valeurs libres :
       une douzaine de paddings différents rendaient les blocs inégaux. */
    --bp-espace-xs: .4rem;
    --bp-espace-s: .8rem;
    --bp-espace-m: 1.4rem;
    --bp-espace-l: 2.1rem;
    --bp-espace-xl: 2.8rem;

    --bp-espace-xxl: 3rem;

    --bp-radius: .75rem;
    --bp-radius-s: .4rem;
    --bp-radius-l: 1rem;
    --bp-trait: 2px;
    /* Liseré d'accent des blocs de message, volontairement plus épais. */
    --bp-trait-accent: 4px;
    --bp-gap: var(--bp-espace-m);

    /* Échelle reprise du thème, où html vaut 16px :
       .content p        → 1.4rem  (22,4 px) — texte courant du site
       .content h3       → 1.8rem  (28,8 px)
       .round_links p    → 1.2rem  (19,2 px) — mentions secondaires
       Sans cela le formulaire paraît deux tailles en dessous du reste. */
    --bp-taille-texte: 1.8rem;
    --bp-taille-petit: 1.6rem;
    --bp-taille-titre: 2rem;
    --bp-interligne: 1.5;

    font-family: var(--bp-font-texte);
    font-size: var(--bp-taille-texte);
    line-height: var(--bp-interligne);
    /* Le kit Menca ne fournit pas de graisse 400 : 100, 300, 500, 700 et 900.
       On fixe donc explicitement le corps de texte sur 500, sa « regular ». */
    font-weight: 500;
    color: var(--bp-texte);
}

/* Le panneau du formulaire porte le violet clair ; les cartes projets restent
   blanches par-dessus. */
.bp-form {
    background: var(--bp-violet-clair);
    padding: var(--bp-espace-xxl);
    border-radius: var(--bp-radius-l);
}

/* Sur petit écran, 3rem de chaque côté amputent la largeur utile de près de
   100 px — de quoi faire passer la rangée de pastilles à la ligne. */
@media (max-width: 48rem) {
    .bp-form {
        padding: var(--bp-espace-m);
    }
}

/* ------------------------------------------------------------------ *
 * Liste des projets
 * ------------------------------------------------------------------ */

.bp-projects {
    list-style: none;
    margin: 0 0 var(--bp-espace-xl);
    padding: 0;
    display: grid;
    gap: var(--bp-gap);
    /* Nombre de colonnes fixé plutôt que déduit d'une largeur minimale : la
       grille doit tenir sur trois par ligne, quelle que soit la largeur du
       conteneur que le thème lui accorde. */
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .bp-projects {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .bp-projects {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bp-project {
    margin: 0;
}

.bp-project__fieldset {
    height: 100%;
    margin: 0;
    padding: 0 0 var(--bp-espace-m);
    border-radius: var(--bp-radius);
    background: white;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* La carte se signale dès qu'un rang y est posé. */
.bp-project.is-ranked .bp-project__fieldset {
    border-color: var(--bp-violet-fonce);
    box-shadow: 0 0 0 3px rgba(98, 103, 152, .12);
}

.bp-project__legend,
.bp-project--readonly .bp-project__legend {
    font-family: var(--bp-font-titre);
    color: var(--bp-violet-fonce);
    /* La carte est blanche : le violet foncé y atteint 5,37:1. Il ne donnerait
       que 2,04:1 sur le violet clair du panneau, sous le seuil RGAA — c'est
       pourquoi les cartes ne doivent pas prendre la couleur du panneau. */
    background: #fff;
    font-size: var(--bp-taille-titre);
    line-height: 1.2;
    margin: 0;
    padding: var(--bp-espace-m) var(--bp-espace-l);
    width: 100%;
    box-sizing: border-box;
    border-radius:var(--bp-radius) var(--bp-radius) 0 0;
}

.bp-project__numero {
    display: block;
    font-family: var(--bp-font-texte);
    font-size: var(--bp-taille-petit);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bp-violet-fonce);
    margin-bottom: var(--bp-espace-xs);
}

.bp-project__media {
    padding: 0 var(--bp-espace-l);
    order: -1;
}

.bp-project__media img {
    width: 100%;
    /* Toutes les cartes présentent le même cadre, quel que soit le format
       d'origine : le visuel est recadré, jamais déformé. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    height: auto;
    display: block;
    border-radius: var(--bp-radius-s) var(--bp-radius-s) 0 0;
}

.bp-project__body {
    padding: 0 var(--bp-espace-l);
    flex: 1 1 auto;
}

.bp-project__meta {
    list-style: none;
    margin: 0 0 var(--bp-espace-s);
    padding: var(--bp-espace-s) var(--bp-espace-m);
    background: #efefef;
    border-radius: var(--bp-radius-s);
    font-size: var(--bp-taille-petit);
    line-height: var(--bp-interligne);
    color: var(--bp-texte-doux);
}

.bp-project__meta-label {
    font-weight: 700;
    color: var(--bp-texte);
}

.bp-project__content {
    font-size: var(--bp-taille-texte);
    line-height: var(--bp-interligne);
}

/* ------------------------------------------------------------------ *
 * Pastilles de classement
 *
 * Reproduction du geste du bulletin papier : on inscrit un numéro dans la
 * pastille du projet. Les radios restent en place pour les lecteurs d'écran
 * et la navigation clavier ; seul leur rendu visuel est remplacé.
 * ------------------------------------------------------------------ */

.bp-ranks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bp-espace-s);
    padding: var(--bp-espace-m) var(--bp-espace-l);
    margin-top: auto;
}

.bp-ranks__label {
    flex: 1 0 100%;
    font-size: var(--bp-taille-petit);
    font-weight: 700;
    /* Le gris doux ne donnait que 2,81:1 sur le violet clair. */
    color: var(--bp-texte);
    margin-bottom: var(--bp-espace-xs);
}

.bp-rank {
    position: relative;
    display: inline-flex;
}

.bp-rank input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.bp-rank label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 var(--bp-espace-s);
    box-sizing: border-box;
    border: var(--bp-trait) solid var(--bp-violet-fonce);
    border-radius: 999px;
    background: #fff;
    color: var(--bp-violet-fonce);
    font-weight: 700;
    font-size: var(--bp-taille-texte);
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.bp-rank--none label {
    font-size: var(--bp-taille-petit);
    font-weight: 500;
    border-color: var(--bp-texte-doux);
    color: var(--bp-texte-doux);
}

.bp-rank label:hover {
    background: var(--bp-violet-clair);
    color: #fff;
}

.bp-rank input:checked + label {
    background: var(--bp-violet-fonce);
    border-color: var(--bp-violet-fonce);
    color: #fff;
}

/* Le focus doit rester visible : la radio native est masquée. */
.bp-rank input:focus-visible + label {
    outline: 3px solid var(--bp-violet-fonce);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Compteur, identité, consentement
 * ------------------------------------------------------------------ */

.bp-form__intro {
    font-size: var(--bp-taille-texte);
    line-height: var(--bp-interligne);
    padding-bottom: var(--bp-espace-l);
}

.bp-counter {
    display: inline-block;
    padding: var(--bp-espace-s) var(--bp-espace-m);
    margin: 0 0 var(--bp-espace-l);
    background: var(--bp-violet-fonce);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--bp-taille-texte);
}

/* Classement à trou : on le signale, sans rien corriger d'autorité. */
.bp-counter--incomplete {
    background: #8a6100;
}

.bp-identity,
.bp-consent {
    margin: 0 0 var(--bp-espace-l);
    padding: var(--bp-espace-l);
    border-radius: var(--bp-radius);
    background: var(--bp-fond-doux);
}

.bp-identity h1 {
    font-family: var(--bp-font-titre);
    font-size: var(--bp-taille-titre);
    padding: 0 var(--bp-espace-s);
    color: var(--bp-violet-fonce);
    margin-bottom: var(--bp-espace-m);
}

.bp-field {
    margin: 0 0 var(--bp-espace-m);
}

.bp-field label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--bp-espace-xs);
}

.bp-field input[type="text"] {
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
    padding: var(--bp-espace-s) var(--bp-espace-m);
    border: var(--bp-trait) solid var(--bp-bordure);
    border-radius: var(--bp-radius-s);
    font: inherit;
    background: #fff;
}

.bp-field input[type="text"]:focus-visible,
.bp-field input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--bp-violet-fonce);
    outline-offset: 2px;
}

.bp-field--checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--bp-espace-s);
}

.bp-field--checkbox input {
    margin-top: var(--bp-espace-xs);
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
}

.bp-field--checkbox label {
    font-weight: 500;
    margin: 0;
}

.bp-required {
    color: var(--bp-erreur);
}

.bp-consent__legal {
    font-size: var(--bp-taille-petit);
    line-height: var(--bp-interligne);
    color: var(--bp-texte-doux);
    margin: var(--bp-espace-m) 0 0;
}

.bp-consent__link {
    color: var(--bp-violet-fonce);
}

/* Honeypot : masqué à l'œil, pas au robot. */
.bp-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Envoi, messages
 * ------------------------------------------------------------------ */

.bp-button {
    display: inline-block;
    padding: var(--bp-espace-m) var(--bp-espace-xl);
    border: 0;
    border-radius: 999px;
    background: var(--bp-violet-fonce);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: var(--bp-taille-texte);
    cursor: pointer;
    transition: background-color .15s ease;
}

.bp-button:hover:not(:disabled) {
    background: #4e5280;
}

.bp-button:focus-visible {
    outline: 3px solid var(--bp-violet-fonce);
    outline-offset: 3px;
}

.bp-button:disabled {
    background: var(--bp-bordure);
    color: var(--bp-texte-doux);
    cursor: not-allowed;
}

.bp-alert {
    padding: var(--bp-espace-m);
    border-radius: var(--bp-radius-s);
    border-left: var(--bp-trait-accent) solid var(--bp-erreur);
    background: #fdf1f1;
    color: var(--bp-erreur);
    font-weight: 700;
}

.bp-alert[hidden] {
    display: none;
}

/* Rappel de courtoisie : informatif, jamais alarmant. Un poste partagé n'est
   pas une fraude, et le rouge de .bp-alert dissuaderait un votant légitime. */
.bp-notice {
    padding: var(--bp-espace-m) var(--bp-espace-l);
    margin: 0 0 var(--bp-espace-l);
    border-radius: var(--bp-radius-s);
    border-left: var(--bp-trait-accent) solid var(--bp-violet-fonce);
    background: var(--bp-fond-doux);
    color: var(--bp-texte);
}

.bp-notice p {
    margin: 0 0 var(--bp-espace-s);
}

.bp-notice__title {
    font-weight: 700;
}

.bp-notice__dismiss {
    margin-top: var(--bp-espace-xs);
    padding: var(--bp-espace-s) var(--bp-espace-m);
    border: var(--bp-trait) solid var(--bp-violet-fonce);
    border-radius: 999px;
    background: #fff;
    color: var(--bp-violet-fonce);
    font: inherit;
    font-weight: 700;
    font-size: var(--bp-taille-petit);
    cursor: pointer;
}

.bp-notice__dismiss:hover {
    background: var(--bp-violet-fonce);
    color: #fff;
}

.bp-notice__dismiss:focus-visible {
    outline: 3px solid var(--bp-violet-fonce);
    outline-offset: 2px;
}

.bp-confirmation {
    padding: var(--bp-espace-l);
    border-radius: var(--bp-radius);
    border-left: var(--bp-trait-accent) solid var(--bp-succes);
    background: #f1f8f3;
}

.bp-confirmation[hidden] {
    display: none;
}

.bp-closed {
    padding: var(--bp-espace-l);
    margin-bottom: var(--bp-espace-xl);
    border-radius: var(--bp-radius);
    border-left: var(--bp-trait-accent) solid var(--bp-violet-fonce);
    background: var(--bp-fond-doux);
}

.bp-closed__dates {
    font-weight: 700;
    margin-bottom: 0;
}

/* Fourni par WordPress, redéclaré au cas où le thème ne le charge pas. */
.bp-form .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bp-project__fieldset,
    .bp-rank label,
    .bp-button {
        transition: none;
    }
}

/* ------------------------------------------------------------------ *
 * Aide à la mise en place
 *
 * Visible des seuls administrateurs, quand une consultation n'a encore
 * aucun projet rattaché. Le visiteur, lui, ne voit rien.
 * ------------------------------------------------------------------ */

.bp-setup-hint {
    padding: var(--bp-espace-l);
    margin: 0 0 var(--bp-espace-xl);
    border: var(--bp-trait) dashed var(--bp-violet-fonce);
    border-radius: var(--bp-radius);
    background: var(--bp-fond-doux);
    color: var(--bp-texte);
}

.bp-setup-hint p {
    margin: 0 0 var(--bp-espace-s);
}

.bp-setup-hint a {
    color: var(--bp-violet-fonce);
}

.bp-setup-hint__footer {
    margin: 0;
    font-size: var(--bp-taille-petit);
    color: var(--bp-texte-doux);
}

/* Rappel du compteur en pied de liste, avant la saisie de l'identité. */
.bp-counter--bas {
    margin-top: var(--bp-espace-s);
}