/*
 * Charte graphique : boutons, cartes, champs et fenêtres harmonisés.
 * Chargée en dernier (après legacy.css et app.css) : c'est la référence visuelle.
 */
:root {
    --icac-rayon: .5rem;
    --icac-rayon-carte: .75rem;
    --icac-ombre: 0 1px 2px rgba(45, 46, 51, .06), 0 4px 12px rgba(45, 46, 51, .08);
    --icac-ombre-survol: 0 4px 8px rgba(45, 46, 51, .08), 0 12px 28px rgba(45, 46, 51, .14);
    --icac-transition: 180ms ease;
}

/* Boutons : mêmes proportions, arrondis et états partout. Au survol, le bouton reste
   rouge (plus foncé, ou rempli pour les boutons à contour) : l'ancien survol anthracite
   se confondait avec les fonds sombres (accueil, galerie d'œuvres, pied de page) et le
   bouton semblait perdre sa bordure. Les marges de legacy.css sont conservées. */
.btn {
    --bs-btn-font-weight: 800;
    font-weight: var(--bs-btn-font-weight);
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-border-radius: var(--icac-rayon);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(223, 55, 52, .3);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    letter-spacing: .03em;
    transition: background-color var(--icac-transition), border-color var(--icac-transition), color var(--icac-transition), box-shadow var(--icac-transition), transform var(--icac-transition);
}
.btn-sm {
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: calc(var(--icac-rayon) * .8);
}
.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-size: 1.05rem;
}

.btn-primary,
.btn-outline-primary,
.btn-inverse {
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--icac-rouge);
    --bs-btn-hover-border-color: var(--icac-rouge);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--icac-rouge-fonce);
    --bs-btn-active-border-color: var(--icac-rouge-fonce);
}
.btn-primary {
    --bs-btn-hover-bg: var(--icac-rouge-fonce);
    --bs-btn-hover-border-color: var(--icac-rouge-fonce);
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--icac-rouge);
    --bs-btn-border-color: var(--icac-rouge);
}
.btn-outline-primary {
    --bs-btn-color: var(--icac-rouge);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--icac-rouge);
    /* Survol teinté (contour conservé) : un bouton à contour survolé ne se confond pas
       avec un bouton plein voisin, par exemple le choix « Liste / Grille » */
    --bs-btn-hover-color: var(--icac-rouge-fonce);
    --bs-btn-hover-bg: rgba(223, 55, 52, .12);
    --bs-btn-hover-border-color: var(--icac-rouge-fonce);
}
.btn-inverse {
    --bs-btn-color: var(--icac-rouge);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
}
/* legacy.css fixe les couleurs en dur : on repasse par les variables Bootstrap */
.btn-primary,
.btn-outline-primary,
.btn-inverse,
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-inverse:hover,
.btn-primary:focus,
.btn-outline-primary:focus,
.btn-inverse:focus {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-inverse:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
.btn-primary:active,
.btn-outline-primary:active,
.btn-inverse:active,
.btn-outline-primary.active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}
.table .btn.btn-sm.btn-outline-primary:hover {
    color: var(--icac-rouge-fonce);
}
/* Boutons blancs à contour sur les blocs colorés de l'accueil : au survol, fond blanc */
.accueil-choix .col-md-4 .accueil-choix-bg .btn:hover {
    color: var(--icac-rouge);
    background-color: #fff;
    border-color: #fff;
}

/* Cartes : sans bordure rouge, avec une ombre douce ; .carte-cliquable se soulève au survol */
.card {
    --bs-card-border-radius: var(--icac-rayon-carte);
    --bs-card-inner-border-radius: calc(var(--icac-rayon-carte) - 1px);
    border-color: transparent;
    border-radius: var(--icac-rayon-carte);
    box-shadow: var(--icac-ombre);
}
.card-body-header {
    border-top-left-radius: calc(var(--icac-rayon-carte) - 1px);
    border-top-right-radius: calc(var(--icac-rayon-carte) - 1px);
}
.carte-cliquable {
    transition: box-shadow var(--icac-transition), transform var(--icac-transition);
}
.carte-cliquable:hover,
.carte-cliquable:focus-within {
    box-shadow: var(--icac-ombre-survol);
    transform: translateY(-3px);
}
/* Tarifs : la carte se soulève au lieu de descendre de 20 px */
#tarifs .card:hover {
    margin-top: 0;
    box-shadow: var(--icac-ombre-survol);
    transform: translateY(-4px);
}

/* Icônes Tabler (symfony/ux-icons), en SVG dans le texte : même taille que le texte,
   alignées sur la ligne de base comme l'étaient les icônes Font Awesome */
.icone {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    flex-shrink: 0;
}
.icone-lg {
    width: 1.33em;
    height: 1.33em;
    vertical-align: -.25em;
}
.icone-2x {
    width: 2em;
    height: 2em;
}
.icone-3x {
    width: 3em;
    height: 3em;
}
/* Trait un peu plus épais dans les boutons, à côté d'un texte en gras */
.btn .icone path {
    stroke-width: 2.25;
}
/* Flèches de tri des listes de l'administration (liens .asc / .desc de KnpPaginator) :
   l'ancien site utilisait la police Font Awesome 4, plus chargée depuis le portage */
.asc::after,
.desc::after {
    content: "";
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-left: .4em;
    background-color: currentColor;
    -webkit-mask: url("../icons/tabler/caret-up-filled-8gtQK4c.svg") no-repeat center / contain;
    mask: url("../icons/tabler/caret-up-filled-8gtQK4c.svg") no-repeat center / contain;
}
.desc::after {
    -webkit-mask-image: url("../icons/tabler/caret-down-filled-3hf0Tdc.svg");
    mask-image: url("../icons/tabler/caret-down-filled-3hf0Tdc.svg");
}

/* Plus aucun bleu Bootstrap par défaut (#0d6efd) : menus, champs, cases, pagination */
:root {
    --bs-focus-ring-color: rgba(223, 55, 52, .25);
    --bs-primary-text-emphasis: var(--icac-rouge-fonce);
    --bs-primary-bg-subtle: #fbe1e0;
    --bs-primary-border-subtle: #f2afad;
}
.btn-primary,
.btn-outline-primary {
    --bs-btn-focus-shadow-rgb: 223, 55, 52;
    --bs-btn-disabled-bg: var(--icac-rouge);
    --bs-btn-disabled-border-color: var(--icac-rouge);
}
.btn-outline-primary {
    --bs-btn-disabled-color: var(--icac-rouge);
    --bs-btn-disabled-bg: transparent;
}
.dropdown-menu {
    --bs-dropdown-link-hover-bg: rgba(223, 55, 52, .08);
    --bs-dropdown-link-hover-color: var(--icac-rouge-fonce);
    /* Élément cliqué : anthracite, comme l'élément de la page en cours (legacy.css) */
    --bs-dropdown-link-active-bg: var(--icac-anthracite);
    --bs-dropdown-link-active-color: #fff;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #ef9b99;
    box-shadow: 0 0 0 .25rem rgba(223, 55, 52, .25);
}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--icac-rouge);
    border-color: var(--icac-rouge);
}
.form-range::-webkit-slider-thumb {
    background-color: var(--icac-rouge);
}
.form-range::-moz-range-thumb {
    background-color: var(--icac-rouge);
}
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(223, 55, 52, .25);
}
.pagination {
    --bs-pagination-color: var(--icac-rouge);
    --bs-pagination-hover-color: var(--icac-rouge-fonce);
    --bs-pagination-focus-color: var(--icac-rouge-fonce);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(223, 55, 52, .25);
    --bs-pagination-active-bg: var(--icac-rouge);
    --bs-pagination-active-border-color: var(--icac-rouge);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--icac-rouge);
}
.list-group {
    --bs-list-group-active-bg: var(--icac-rouge);
    --bs-list-group-active-border-color: var(--icac-rouge);
}

/* Champs et fenêtres */
.form-control,
.form-select {
    border-radius: var(--icac-rayon);
}
.modal-content {
    border: 0;
    border-radius: var(--icac-rayon-carte);
    overflow: hidden;
    box-shadow: var(--icac-ombre-survol);
    color: var(--icac-anthracite);
    font-weight: 300;
}
/* Remplace l'en-tête noir en majuscules de l'ancien site (legacy.css). */
.modal-header { align-items: flex-start; gap: 1rem; padding: 1.5rem 1.75rem 1rem; background: #fff; color: var(--icac-anthracite); border-bottom: 1px solid #e4e5eb; font-weight: 300; text-transform: none; }
.modal-header .modal-title { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; text-transform: none; }
.modal-header .btn-close { margin: 0 0 0 auto; padding: .6rem; opacity: .6; }
.modal-header .btn-close:hover { opacity: 1; }
.modal-surtitre { margin: 0 0 .4rem; font-size: .75rem; font-family: var(--icac-police-surtitre); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.modal-body { padding: 1.5rem 1.75rem; }
.modal-footer { gap: .75rem; padding: 1rem 1.75rem 1.5rem; border-top: 1px solid #e4e5eb; }
.modal-footer > * { margin: 0; }
.modal-footer .btn { text-transform: none; letter-spacing: 0; }
.modal-mention { margin: .5rem 0 0; font-size: .75rem; line-height: 1.5; }
.modal-mention a { color: var(--icac-rouge-fonce); text-decoration: underline; }
@media (max-width: 575px) {
    .modal-header, .modal-body { padding-inline: 1.15rem; }
    .modal-footer { padding-inline: 1.15rem; }
    .modal-footer .btn { flex: 1 1 100%; }
}

/* Listes publiques en grille (artistes, galeries) */
.choix-vue .btn {
    margin: 0;
}
.tri-grille a {
    color: var(--icac-anthracite);
    font-weight: 800;
}
.tri-grille a.active {
    color: var(--icac-rouge);
}
/* Cartes artistes et galeries : mêmes proportions et CTA que l’accueil. */
.carte-fiche { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e1e3ea; border-radius: .75rem; background: #fff; color: var(--icac-anthracite); box-shadow: none; }
.carte-fiche:hover, .carte-fiche:focus-within { transform: none; box-shadow: none; border-color: #c0c3cf; }
.carte-fiche:focus-within { outline: 3px solid var(--icac-rouge); outline-offset: 4px; }
.carte-fiche-image { flex-shrink: 0; background: #f1f2f6; }
.carte-fiche > .carte-fiche-image { height: clamp(180px, 15vw, 240px); }
.carte-fiche-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carte-fiche-badge { position: absolute; top: .75rem; left: .75rem; max-width: calc(100% - 1.5rem); padding: .3rem .55rem; border-radius: .3rem; background: #fff6df; color: var(--icac-anthracite); font-size: .7rem; font-weight: 800; line-height: 1.5; white-space: normal; }
.carte-fiche-badge .rouge { color: inherit; }
.carte-fiche-initiales { display: flex !important; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 300; letter-spacing: .05em; color: var(--icac-anthracite); }
.carte-fiche .carte-fiche-contenu { display: flex; flex-direction: column; align-items: center; flex: 1; gap: .75rem; padding: 1rem 1rem 2rem; text-align: center; }
.carte-fiche .card-title { width: 100%; font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-transform: none; overflow-wrap: anywhere; margin: 0; }
.carte-fiche-details, .carte-fiche-indice { width: 100%; color: var(--icac-anthracite); font-size: .85rem; font-weight: 300; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.carte-fiche-indice strong { font-weight: 300; }
.carte-fiche .carte-fiche-action { display: inline-flex; align-items: center; justify-content: center; align-self: center; gap: .6rem; max-width: calc(100% - 2rem); margin: 0 1rem 1rem; padding: .75rem 1rem; border-radius: var(--icac-rayon); background: var(--icac-rouge); color: #fff; font-size: .8rem; font-weight: 800; text-align: center; text-decoration: none; transition: background-color .15s; }
.carte-fiche-action .icone { flex-shrink: 0; }
.carte-fiche:hover .carte-fiche-action, .carte-fiche:focus-within .carte-fiche-action { background: var(--icac-rouge-fonce); }

/* Mon compte (tableau de bord) */
.profil {
    max-width: 1140px;
    margin: 0 auto 2rem;
}
.profil-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}
.profil-entete h1 {
    margin: 0;
    text-transform: none;
    font-size: 1.9rem;
}
.profil-sous-titre {
    margin: 0;
    color: var(--icac-anthracite);
}
.profil-entete .btn {
    margin: 0;
}
.profil-titre {
    font-size: 1.15rem;
    text-transform: none;
    margin-bottom: 1rem;
}
.profil-fiche {
    overflow: hidden;
}
.profil-fiche .carte-fiche-image {
    min-height: 12rem;
}
.profil-etiquette {
    margin: 0;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--icac-rouge);
}
.profil-fiche-nom {
    font-size: 1.6rem;
    text-transform: none;
    margin: .1rem 0 .6rem;
}
.profil-fiche .badge {
    font-size: .75rem;
    font-weight: 800;
}
.profil-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    margin-bottom: 1.25rem;
}
.profil-chiffres dt {
    font-size: .75rem;
    font-weight: 300;
    color: var(--icac-anthracite);
}
.profil-chiffres dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--icac-anthracite);
}
.profil-chiffres dd small {
    font-size: .9rem;
    color: var(--icac-anthracite);
}
.profil-infos dt {
    font-size: .8rem;
    font-weight: 300;
    color: var(--icac-anthracite);
}
.profil-infos dd {
    margin-bottom: .75rem;
    overflow-wrap: anywhere;
}
.profil-transactions {
    font-size: .9rem;
}
.profil-transactions th {
    font-size: .75rem;
    font-weight: 300;
    color: var(--icac-anthracite);
    text-transform: none;
}

.raccourci {
    color: var(--icac-anthracite);
}
.raccourci-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .75rem;
    border-radius: 50%;
    background: rgba(223, 55, 52, .1);
    color: var(--icac-rouge);
    font-size: 1.1rem;
}
.raccourci-titre {
    font-size: 1rem;
    font-weight: 800;
    text-transform: none;
    margin-bottom: .3rem;
}
.raccourci-texte {
    margin: 0;
    font-size: .875rem;
    color: var(--icac-anthracite);
}

/* Bandeau cookies (tarteaucitron) : encart discret en bas à gauche au lieu de la barre
   rouge pleine largeur. « Tout accepter » et « Tout refuser » gardent le même poids
   visuel (recommandation CNIL). */
#tarteaucitronRoot #tarteaucitronAlertBig.tarteaucitronAlertBigBottom {
    left: 1rem !important;
    right: auto !important;
    bottom: 1rem !important;
    width: auto !important;
    max-width: min(26rem, calc(100vw - 2rem));
    box-sizing: border-box !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
    background: #fff !important;
    color: var(--icac-anthracite) !important;
    border-radius: var(--icac-rayon-carte);
    box-shadow: var(--icac-ombre-survol);
    font-size: .9rem !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    display: block;
    margin: 0 0 .75rem !important;
    padding: 0 !important;
    font-size: .9rem !important;
    color: var(--icac-anthracite) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    display: inline-block !important;
    box-sizing: border-box;
    width: calc(50% - .4rem);
    margin: 0 0 .5rem !important;
    padding: .55rem .5rem !important;
    border-radius: var(--icac-rayon);
    font-size: .85rem !important;
    font-weight: 800;
    text-align: center;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
    margin-right: .3rem !important;
    background: var(--icac-rouge) !important;
    color: #fff !important;
    border: 1px solid var(--icac-rouge) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
    background: #fff !important;
    color: var(--icac-rouge) !important;
    border: 1px solid var(--icac-rouge) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
    background: var(--icac-anthracite) !important;
    border-color: var(--icac-anthracite) !important;
    color: #fff !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    background: none !important;
    margin: 0 !important;
    padding: .25rem 0 !important;
    font-size: .8rem !important;
    color: var(--icac-anthracite) !important;
    text-decoration: underline;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
    margin-right: .75rem !important;
}

/* Transitions douces entre les pages (API View Transitions, navigateurs récents ;
   les autres changent de page normalement). L'en-tête reste en place pendant le fondu. */
@view-transition {
    navigation: auto;
}
.site-header {
    view-transition-name: entete;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
}

/* Mouvements réduits : pas d'effet de soulèvement */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
    .carte-cliquable:hover,
    #tarifs .card:hover {
        transform: none;
    }
}

/* Blocs dépliables de texte : une illustration animée occupe la place libre à droite du texte. */
.depliant-illustre[open] > div { display: grid; grid-template-columns: minmax(0, 85ch) minmax(220px, 1fr); column-gap: clamp(2rem, 5vw, 5rem); max-width: none; }
.depliant-illustre > div > :not(.depliant-illustration) { grid-column: 1; }
.depliant-illustration { grid-column: 2; grid-row: 1 / span 30; align-self: start; justify-self: center; position: sticky; top: 7rem; width: 100%; max-width: 420px; height: auto; margin-top: 1rem; }
@media (max-width: 991px) {
    .depliant-illustre[open] > div { display: block; }
    .depliant-illustration { display: none; }
}

/* Formulaires : libellés en medium, valeurs saisies en léger, et le même repère d'obligation partout
   (libellé dans le champ, au-dessus du champ ou à côté d'une case à cocher). */
.form-label, .col-form-label, .form-floating > label, .form-check-label { font-weight: 500; color: var(--icac-anthracite); }
.form-label, .col-form-label { font-size: 1rem; }
label.required::after, label.important::after, label.souhaite::after { margin-left: .3em; font-size: .8em; font-weight: 800; }
label.required::after { color: var(--icac-rouge-fonce); }
label.important::after { color: #995216; }
label.souhaite::after { color: #387344; }
/* Libellés longs dans le champ : un peu plus petits sur mobile, et une fois remontés (réduits à 85 %)
   ils occupent toute la largeur visible au lieu d'être coupés à leur taille d'origine. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label { max-width: calc(100% / .85); }
@media (max-width: 575px) {
    .form-floating > label { font-size: .9rem; }
}