/* ==========================================================================
   CSS spécifique à l'application, en complément de theme.css.
   Aucune règle de style ne doit être écrite dans les vues : tout arrive ici.
   ========================================================================== */

/* ------------------------------------------------- 1. Écrans d'accès */
.cc-page-acces {
    background: var(--calcaire-50);
}

.cc-acces {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: 100vh;
}

/* Panneau de marque */
.cc-acces__marque {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    padding: 3rem;
    background: linear-gradient(168deg, var(--encre-700) 0%, var(--encre-900) 100%);
    color: #cfdde6;
}

.cc-acces__vagues {
    position: absolute;
    inset: auto 0 -1px 0;
    width: 100%;
    height: auto;
    opacity: .14;
    pointer-events: none;
}

.cc-acces__identite {
    position: relative;
}

.cc-acces__nom {
    margin: 1.1rem 0 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: #fff;
}

.cc-acces__lieu {
    margin: .15rem 0 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--calanque-200);
}

.cc-acces__accroche {
    position: relative;
    max-width: 34ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #a8c2d1;
}

/* Zone de formulaire */
.cc-acces__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
}

.cc-acces__carte {
    width: 100%;
    max-width: 27rem;
    padding: 2.25rem;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--r-3);
    box-shadow: var(--ombre-2);
}

.cc-acces__logo-mobile {
    display: none;
    margin: 0 auto 1.25rem;
}

.cc-acces__titre {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--encre-900);
}

.cc-acces__intro {
    margin: 0 0 1.75rem;
    color: var(--texte-2);
}

.cc-acces__pied {
    margin: 0;
    font-size: .75rem;
    color: var(--texte-3);
}

.cc-acces__lien {
    display: block;
    margin-top: 1.25rem;
    text-align: center;
    font-size: .8125rem;
}

/* Champ mot de passe avec bouton d'affichage */
.cc-champ-secret {
    position: relative;
}

.cc-champ-secret .form-control {
    padding-right: 2.75rem;
}

.cc-voir-secret {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--texte-3);
    font-size: 1rem;
    border-radius: 0 var(--r-1) var(--r-1) 0;
}

.cc-voir-secret:hover {
    color: var(--encre-800);
}

@media (max-width: 991.98px) {
    .cc-acces {
        grid-template-columns: minmax(0, 1fr);
    }

    .cc-acces__marque {
        display: none;
    }

    .cc-acces__logo-mobile {
        display: block;
    }

    .cc-acces__carte {
        padding: 1.75rem;
    }
}

/* ---------------------------------------------- 2. Messages flash */
.cc-flash {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--trait);
    border-left-width: 3px;
    border-radius: var(--r-1);
    background: #fff;
    font-size: .8125rem;
    color: var(--texte);
    box-shadow: var(--ombre-1);
}

.cc-flash i {
    font-size: 1rem;
    line-height: 1.35;
}

.cc-flash__texte {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-flash__fermer {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    color: var(--texte-3);
    font-size: 1rem;
    line-height: 1;
}

.cc-flash__fermer:hover {
    color: var(--texte);
}

.cc-flash--success {
    border-left-color: var(--sauge-600);
    background: var(--sauge-100);
}

.cc-flash--success i {
    color: var(--sauge-700);
}

.cc-flash--error {
    border-left-color: var(--falaise-600);
    background: var(--falaise-100);
}

.cc-flash--error i {
    color: var(--falaise-700);
}

.cc-flash--warning {
    border-left-color: #b7791f;
    background: #fdf3e0;
}

.cc-flash--warning i {
    color: #8a5a12;
}

.cc-flash--info {
    border-left-color: var(--calanque-600);
    background: var(--calanque-100);
}

.cc-flash--info i {
    color: var(--calanque-700);
}

/* ------------------------------------------------- 3. Formulaires */
/* Erreurs de validation rendues par le FormHelper de CakePHP : il pose
   `form-error` sur le champ fautif, `is-invalid` reste pour le cas où une vue
   ajouterait la classe Bootstrap à la main. */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.form-error,
.form-select.form-error {
    border-color: var(--falaise-600);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control.form-error:focus,
.form-select.form-error:focus {
    box-shadow: 0 0 0 3px var(--falaise-100);
}

.error-message,
.invalid-feedback {
    display: block;
    margin-top: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--falaise-700);
}

/* ------------------------------------------------ 4. Mon compte */
.cc-compte-entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.cc-compte-entete__nom {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--encre-900);
}

.cc-definition {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--trait);
}

.cc-definition:last-child {
    border-bottom: 0;
}

.cc-definition dt {
    font-weight: 500;
    color: var(--texte-2);
}

.cc-definition dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--encre-800);
}

/* ------------------------------------------------- 5. Adhérents */
/* Photo d'adhérent affichée dans une pastille d'avatar. */
.cc-avatar--photo {
    object-fit: cover;
    background: var(--calcaire-100);
}

/* En-tête de la fiche adhérent : portrait centré au-dessus de l'identité. */
.cc-fiche-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
}

.cc-fiche-entete__nom {
    margin: .6rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--encre-900);
}

.cc-fiche-entete .cc-statut + .cc-statut {
    margin-top: .35rem;
}

/* Tableaux secondaires de la fiche : moins large que la liste principale. */
.cc-tableau--compact {
    min-width: 640px;
}

/* Indicateurs de tri produits par le Paginator de CakePHP. */
.cc-tableau thead th a {
    color: inherit;
    text-decoration: none;
}

.cc-tableau thead th a:hover {
    color: var(--encre-800);
}

.cc-tableau thead th a::after {
    content: "↕";
    margin-left: .35rem;
    font-size: .75rem;
    opacity: .35;
}

.cc-tableau thead th a.est-tri-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--calanque-600);
}

.cc-tableau thead th a.est-tri-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--calanque-600);
}

/* Le dépôt de photo accueille aussi la case « retirer la photo ». */
.cc-depot .cc-choix span {
    font-size: .75rem;
}

/* ------------------------------------------------------------ Événements */

/* Visuel d'événement : bandeau en tête de fiche, vignette dans le formulaire. */
.cc-visuel {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-2) var(--r-2) 0 0;
    background: var(--calcaire-100);
}

.cc-visuel--apercu,
.cc-visuel--vide {
    border-radius: var(--r-2);
}

.cc-visuel--vide {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--trait);
    color: var(--texte-3);
    font-size: 1.75rem;
}

/* Lignes de saisie répétables (tarifs d'un événement). */
.cc-lignes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cc-ligne-form {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem;
    background: var(--calcaire-50);
    border: 1px solid var(--trait);
    border-radius: var(--r-1);
}

.cc-ligne-form__principal {
    flex: 1 1 14rem;
    min-width: 0;
}

.cc-ligne-form__montant {
    flex: 0 0 9rem;
}

/* --------------------------------------------------------- Inscriptions */

/* Pointage de présence : trois choix exclusifs, enregistrés à la volée. */
.cc-pointage {
    display: inline-flex;
    border: 1px solid var(--trait);
    border-radius: var(--r-max);
    overflow: hidden;
    background: #fff;
}

.cc-pointage__choix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    color: var(--texte-3);
    text-decoration: none;
    font-size: .8rem;
    transition: background-color .12s, color .12s;
}

.cc-pointage__choix + .cc-pointage__choix {
    border-left: 1px solid var(--trait);
}

.cc-pointage__choix:hover {
    background: var(--calcaire-100);
    color: var(--encre-800);
}

.cc-pointage__choix.est-actif {
    background: var(--encre-700);
    color: #fff;
}

.cc-pointage__choix.est-present.est-actif {
    background: var(--sauge-600);
}

.cc-pointage__choix.est-absent.est-actif {
    background: var(--falaise-600);
}

/* Recherche d'adhérent : suggestions sous le champ, sélection retenue. */
.cc-recherche-adherent {
    position: relative;
}

.cc-suggestions {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: .25rem 0 0;
    padding: .25rem;
    list-style: none;
    max-height: 17rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--r-1);
    box-shadow: var(--ombre-2);
}

.cc-suggestions__choix {
    display: block;
    width: 100%;
    padding: .4rem .55rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--r-1);
}

.cc-suggestions__choix:hover,
.cc-suggestions__choix:focus-visible {
    background: var(--calcaire-100);
}

.cc-suggestions__choix .cc-identite__meta {
    display: block;
}

.cc-suggestions__vide {
    padding: .5rem .55rem;
    color: var(--texte-3);
    font-size: .8125rem;
}

.cc-selection {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    padding: .6rem .75rem;
    background: var(--calanque-100);
    border: 1px solid var(--trait);
    border-radius: var(--r-1);
}

.cc-selection > i {
    color: var(--calanque-600);
    font-size: 1.1rem;
}

/* Validation d'import : une colonne de décisions par ligne du fichier. */
.cc-decision {
    min-width: 24rem;
}

/* Une option = la pastille de choix, puis son badge ou son motif à côté.
   `.cc-choix span` étant un sélecteur de descendance, il dessine une case à
   cocher sur tout span qu'il englobe : rien d'autre que le libellé du choix ne
   doit vivre à l'intérieur du label. */
.cc-decision__option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .25rem;
}

.cc-decision__option.est-desactive {
    opacity: .55;
}

.cc-decision__motif {
    font-size: .75rem;
    font-style: normal;
    color: var(--texte-3);
}

/* Dernière ligne d'un aperçu de liste, qui renvoie vers la liste complète. */
.cc-ligne-liste--lien {
    padding: 0;
}

.cc-lien-bloc {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .7rem 1.25rem;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}

/* ==========================================================================
   6. Listes déroulantes
   Le <select> natif reste dans le formulaire — il porte la valeur et assure la
   validation HTML — mais devient invisible. Il n'est pas masqué en
   `display:none` : la validation du navigateur doit pouvoir lui donner le
   focus, sinon la soumission échoue en silence sur un champ obligatoire.
   ========================================================================== */
.cc-select {
    position: relative;
    display: block;
}

.cc-select select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Déclencheur */
.cc-select__declencheur {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 1px solid var(--trait);
    border-radius: var(--r-1);
    background: #fff;
    color: var(--texte);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.cc-select__valeur {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-select__fleche {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--texte-3);
    transition: transform .15s ease;
}

.cc-select.est-ouvert .cc-select__fleche {
    transform: rotate(180deg);
}

.cc-select.est-vide .cc-select__valeur {
    color: var(--texte-3);
}

.cc-select__declencheur:hover {
    border-color: var(--trait-fort);
}

.cc-select.est-ouvert .cc-select__declencheur,
.cc-select__declencheur:focus-visible {
    outline: none;
    border-color: var(--calanque-500);
    box-shadow: 0 0 0 3px var(--calanque-100);
}

.cc-select.est-desactive .cc-select__declencheur {
    background: var(--calcaire-100);
    color: var(--texte-3);
    cursor: not-allowed;
}

.cc-select.est-invalide .cc-select__declencheur {
    border-color: var(--falaise-600);
}

.cc-select.est-invalide.est-ouvert .cc-select__declencheur {
    box-shadow: 0 0 0 3px var(--falaise-100);
}

/* Variante « champ de formulaire », calquée sur .form-select */
.cc-select--champ .cc-select__declencheur {
    padding: .5rem .7rem;
    font-size: .8125rem;
    min-height: 38px;
}

/* Variante « filtre de liste », calquée sur .cc-filtre */
.cc-select--filtre .cc-select__declencheur {
    height: 36px;
    padding: 0 .65rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--texte-2);
}

.cc-select--filtre.est-renseigne .cc-select__declencheur {
    border-color: var(--calanque-500);
    background: var(--calanque-100);
    color: var(--calanque-700);
    font-weight: 600;
}

.cc-select--filtre.est-renseigne .cc-select__fleche {
    color: var(--calanque-600);
}

/* Panneau */
.cc-select__panneau {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: min(28rem, 90vw);
    padding: .3rem;
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--r-2);
    box-shadow: var(--ombre-2);
}

.cc-select.est-au-dessus .cc-select__panneau {
    top: auto;
    bottom: calc(100% + 4px);
}

.cc-select__recherche {
    width: 100%;
    height: 34px;
    margin-bottom: .3rem;
    padding: 0 .6rem;
    border: 1px solid var(--trait);
    border-radius: 6px;
    font-size: .8125rem;
    font-family: inherit;
}

.cc-select__recherche:focus {
    outline: none;
    border-color: var(--calanque-500);
    box-shadow: 0 0 0 3px var(--calanque-100);
}

.cc-select__liste {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cc-select__groupe {
    padding: .5rem .6rem .25rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--texte-3);
}

.cc-select__option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 6px;
    font-size: .8125rem;
    color: var(--texte);
    cursor: pointer;
}

/* La puce d'état précède chaque option : ronde en choix unique, carrée en
   choix multiple, où elle se lit comme une case à cocher. */
.cc-select__option::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--trait-fort);
    border-radius: 50%;
    background: #fff;
}

.cc-select--multiple .cc-select__option::before {
    border-radius: 5px;
}

.cc-select__option.est-active {
    background: var(--calcaire-100);
}

.cc-select__option.est-selectionnee {
    color: var(--calanque-700);
    font-weight: 600;
}

.cc-select__option.est-selectionnee::before {
    border-color: var(--calanque-600);
    background-color: var(--calanque-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px;
}

.cc-select__option.est-desactivee {
    color: var(--texte-3);
    cursor: not-allowed;
}

.cc-select__vide {
    margin: 0;
    padding: .9rem .6rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--texte-3);
}

/* Dans une barre d'outils, le champ garde la largeur de son contenu. */
.cc-outils .cc-select,
.cc-entete__actions .cc-select {
    display: inline-block;
    min-width: 9rem;
}

/* Le sélecteur de lignes par page n'affiche qu'un nombre. */
.cc-pagination .cc-select {
    display: inline-block;
    min-width: 5.25rem;
}

@media (max-width: 767.98px) {
    .cc-entete__actions .cc-select {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   7. Recherche globale
   Panneau de résultats de la barre supérieure. Les pastilles, les intitulés et
   les métadonnées réutilisent les composants du thème (`cc-avatar`,
   `cc-identite__nom`, `cc-identite__meta`) : une même fiche garde partout la
   même apparence.
   ========================================================================== */
/* Place réservée à l'indice « Ctrl K », mais seulement tant qu'il est affiché :
   la croix d'effacement du champ `type="search"` se pose au bord de la zone de
   texte, une réserve permanente la décalerait vers la gauche. */
.cc-recherche--globale input {
    padding-right: 4.1rem;
}

.cc-recherche--globale input:focus,
.cc-recherche--globale input:not(:placeholder-shown) {
    padding-right: .75rem;
}

/* Indice de raccourci, effacé dès que le champ sert. */
.cc-recherche__raccourci {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    padding: .1rem .35rem;
    border: 1px solid var(--trait-fort);
    border-radius: 5px;
    background: #fff;
    font-family: var(--police);
    font-size: .625rem;
    font-weight: 600;
    color: var(--texte-3);
    pointer-events: none;
}

.cc-recherche--globale input:focus ~ .cc-recherche__raccourci,
.cc-recherche--globale input:not(:placeholder-shown) ~ .cc-recherche__raccourci {
    display: none;
}

/* Attente : la loupe s'efface au profit d'un rond qui tourne, au même endroit. */
.cc-recherche__attente {
    position: absolute;
    left: .7rem;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--calanque-200);
    border-top-color: var(--calanque-600);
    border-radius: 50%;
    animation: cc-tourne .6s linear infinite;
}

.cc-recherche.est-en-attente .cc-recherche__loupe {
    opacity: 0;
}

@keyframes cc-tourne {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-recherche__attente {
        animation-duration: 2s;
    }
}

/* ---------------------------------------------------------- Panneau */
.cc-recherche__panneau {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: calc(100vw - 3rem);
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--r-2);
    box-shadow: var(--ombre-3);
    overflow: hidden;
}

/* `theme.css` positionne en absolu **tout** `i` descendant de `.cc-recherche`
   (règle `.cc-recherche i`, prévue pour la seule loupe du champ). Sans ce
   retour dans le flux, chaque icône du panneau — en-tête de groupe, état vide,
   pastille — vient se superposer au texte, à gauche du champ. */
.cc-recherche__panneau i {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    color: inherit;
    font-size: inherit;
}

.cc-recherche__corps {
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    padding: .3rem;
}

.cc-recherche__groupe + .cc-recherche__groupe {
    margin-top: .15rem;
    padding-top: .3rem;
    border-top: 1px solid var(--trait);
}

.cc-recherche__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .55rem .3rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texte-3);
}

/* Un peu plus grande que le libellé, qui est en petites capitales espacées. */
.cc-recherche__entete i {
    margin-right: .1rem;
    font-size: .8rem;
    vertical-align: -.05em;
}

.cc-recherche__entete a {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
}

/* ---------------------------------------------------------- Résultat */
.cc-recherche__resultat {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .55rem;
    border-radius: var(--r-1);
    color: var(--texte);
    text-decoration: none;
    /* Un e-mail à rallonge se coupe dans la ligne, il ne la fait pas déborder
       par-dessus l'étiquette. */
    overflow: hidden;
}

.cc-recherche__resultat .cc-avatar i {
    font-size: .9rem;
}

.cc-recherche__texte {
    flex: 1 1 auto;
}

/* Les métadonnées tiennent sur une ligne : le panneau ne s'élargit pas pour
   un e-mail à rallonge. */
.cc-recherche__resultat .cc-identite__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-recherche__resultat.est-actif {
    background: var(--calanque-100);
}

.cc-recherche__resultat.est-actif .cc-identite__nom {
    color: var(--encre-900);
}

.cc-recherche__etiquette {
    flex: 0 0 auto;
    padding: .1rem .4rem;
    border-radius: var(--r-max);
    background: var(--calcaire-100);
    font-size: .625rem;
    font-weight: 700;
    color: var(--texte-2);
}

/* Surlignage des correspondances. */
.cc-recherche__panneau mark {
    padding: 0;
    border-radius: 2px;
    background: var(--calanque-200);
    color: var(--encre-900);
    font-weight: 700;
}

/* -------------------------------------------------- États et pied */
.cc-recherche__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--texte-2);
}

.cc-recherche__message i {
    font-size: 1.3rem;
    color: var(--texte-3);
}

.cc-recherche__message strong {
    color: var(--encre-800);
}

.cc-recherche__message span {
    font-size: .75rem;
    color: var(--texte-3);
}

.cc-recherche__pied {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .45rem .7rem;
    border-top: 1px solid var(--trait);
    background: var(--calcaire-50);
    font-size: .625rem;
    color: var(--texte-3);
}

.cc-recherche__pied kbd {
    padding: 0 .25rem;
    border: 1px solid var(--trait-fort);
    border-radius: 4px;
    background: #fff;
    font-family: var(--police);
    font-size: .625rem;
    color: var(--texte-2);
}

.cc-recherche__pied kbd + kbd {
    margin-left: .15rem;
}

/* ------------------------------------------- 7. Cotisations et saisons */
/* La pastille de saison de la barre est devenue un lien vers les réglages :
   elle ne doit pas prendre l'apparence d'un lien pour autant. */
a.cc-saison {
    text-decoration: none;
}

a.cc-saison:hover {
    border-color: var(--trait-fort);
    text-decoration: none;
}

/* La jauge de saison porte sa largeur en donnée : on neutralise la valeur
   de repli du thème, qui était figée à l'avancement de la maquette. */
.cc-saison__jauge span {
    width: auto;
}

/* Bornes de période dans une barre d'outils : un champ date reste lisible. */
.cc-outils input[type="date"].cc-filtre {
    width: auto;
    min-width: 8.5rem;
    padding: 0 .5rem;
    color: var(--texte);
    background-image: none;
}