/* ============================================================================
   ShowFinder — thème v2 « bleu ardoise »
   ----------------------------------------------------------------------------
   Couche de surcharge chargée UNIQUEMENT quand le drapeau v2 est actif.
   Ne remplace aucun fichier : se pose par-dessus common/style.css et sf-hp.css.

   Principe : les 13 variables --sf-* existantes sont remappées sur la nouvelle
   palette. Toutes les règles qui les utilisent déjà suivent automatiquement.
   Le reste du fichier ne traite que ce qui est écrit en dur dans la v1.

   Palette figée le 27/08/2026. Contrastes mesurés (WCAG 2.1) :
     blanc / #2B4668 ............ 9,64:1   AA + AAA
     #24354D / blanc ........... 12,42:1   AA + AAA
     #414C5C / blanc ............ 8,70:1   AA + AAA
     #B45C22 / blanc ............ 4,67:1   AA
     blanc / #E07A3E ............ 2,99:1   ÉCHOUE — jamais de texte blanc dessus
   ============================================================================ */

/* ---------------------------------------------------------------- 1. JETONS */
:root {
    /* --- remappage des variables v1 : tout le site suit --- */
    --sf-red:       #2b4668;   /* était #a03223 — devient l'ardoise : CTA, états actifs */
    --sf-red-dark:  #1f3550;   /* survol */
    --sf-red-soft:  #b45c22;   /* orange de texte, seul orange qui passe AA sur blanc */
    --sf-blue:      #24354d;   /* encre : titres, texte fort */
    --sf-blue-dark: #16233a;
    --sf-gold:      #f0c05a;
    --sf-cream:     #f5eee4;   /* blush */
    --sf-paper:     #ffffff;   /* la navbar et les surfaces deviennent blanches */
    --sf-paper-2:   #faf7f2;   /* crème : sections alternées */
    --sf-border:    #e7e3da;   /* trait chaud */
    --sf-ink:       #24354d;
    --sf-muted:     #7c8290;
    --sf-shadow:    0 6px 22px -10px rgba(43, 70, 104, .22);

    /* --- jetons propres à la v2 --- */
    --sf-v2-deep:      #2b4668;
    --sf-v2-deep-dark: #1f3550;
    --sf-v2-acc:       #e07a3e;  /* orange vif : décor, lumières, pastilles */
    --sf-v2-acc-text:  #b45c22;  /* orange lisible sur blanc */
    --sf-v2-acc-soft:  #fceee3;
    --sf-v2-sun:       #f0c05a;
    --sf-v2-body:      #414c5c;
    --sf-v2-line-2:    #d8d2c6;
    --sf-v2-radius:    14px;
    --sf-v2-radius-sm: 10px;
    --sf-v2-shadow-lg: 0 22px 50px -26px rgba(43, 70, 104, .45);
    --sf-v2-veil: linear-gradient(103deg,
        rgba(23, 38, 58, .94) 6%,
        rgba(31, 50, 76, .76) 48%,
        rgba(43, 70, 104, .40) 100%);
    --sf-v2-veil-card: linear-gradient(to top,
        rgba(23, 38, 58, .90) 14%,
        rgba(43, 70, 104, .18) 72%);

    --bs-body-font-family: 'Inter', system-ui, sans-serif;
    --bs-primary: #2b4668;
    --bs-link-color: #2b4668;
    --bs-link-hover-color: #1f3550;
}

/* ------------------------------------------------------- 2. FOND DE PAGE */
/* La v1 pose un triple dégradé en dur sur body ; on le remplace à plat. */
body {
    background: #ffffff !important;
    color: var(--sf-v2-body);
}

/* ------------------------------------------------------- 3. TYPOGRAPHIE */
/* Rye disparaît partout. Les titres passent en Plus Jakarta Sans 800. */
h1, h2, h3, h4, h5, h6,
.sf-navbar .navbar-brand,
[style*="Rye"], [style*="'Rye'"],
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
    color: var(--sf-ink);
    text-wrap: balance;
}

h1 { line-height: 1.12; }
h2, h3 { line-height: 1.18; }

body, p, li, td, th, label, input, select, textarea, button, .btn {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Le mot mis en valeur dans un titre — à poser à la main sur un <em> */
.sf-v2-em {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

/* Surtitres */
.sf-eyebrow, .co-eyebrow, .ao-eyebrow {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sf-v2-acc-text);
}

/* ------------------------------------------------------- 4. NAVBAR */
.sf-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--sf-border);
    box-shadow: none;
}

.sf-navbar .navbar-brand {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.32rem;
    letter-spacing: -.035em;
    color: var(--sf-ink) !important;
}
.sf-navbar .navbar-brand:hover { color: var(--sf-v2-deep) !important; }

.sf-navbar .btn-navbar-cta {
    background: var(--sf-v2-deep);
    box-shadow: 0 6px 18px -8px rgba(43, 70, 104, .5);
}
.sf-navbar .btn-navbar-cta:hover { background: var(--sf-v2-deep-dark); }

.sf-navbar .btn-navbar-login {
    border-color: var(--sf-v2-line-2);
    color: var(--sf-ink) !important;
}
.sf-navbar .btn-navbar-login:hover {
    background: var(--sf-paper-2);
    border-color: var(--sf-v2-deep);
    color: var(--sf-v2-deep) !important;
}

.sf-navbar .navbar-nav-main .nav-link:hover,
.sf-navbar .navbar-nav-main .nav-link:focus,
.sf-navbar .navbar-nav-main .nav-link.active {
    color: var(--sf-v2-deep) !important;
}

/* Logo : tant que le nouveau n'est pas dessiné, on réduit l'ancien.
   À retirer le jour où le logo v2 arrive. */
.sf-navbar .sf-navbar-logo { height: 42px; width: auto; }

/* ------------------------------------------------------- 5. BOUTONS */
.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
}

.btn-primary,
.sf-btn-view,
.sf-btn-save,
.btn-sf,
.btn-sf-primary {
    background: var(--sf-v2-deep) !important;
    border-color: var(--sf-v2-deep) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -8px rgba(43, 70, 104, .5);
}
.btn-primary:hover,
.sf-btn-view:hover,
.sf-btn-save:hover,
.btn-sf:hover,
.btn-sf-primary:hover {
    background: var(--sf-v2-deep-dark) !important;
    border-color: var(--sf-v2-deep-dark) !important;
}

.btn-outline-primary,
.sf-btn-outline {
    border-color: var(--sf-v2-line-2) !important;
    color: var(--sf-ink) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.sf-btn-outline:hover {
    background: var(--sf-paper-2) !important;
    border-color: var(--sf-v2-deep) !important;
    color: var(--sf-v2-deep) !important;
}

/* Bouton orange : uniquement en #B45C22, le seul qui passe AA avec du blanc. */
.sf-btn-accent {
    background: var(--sf-v2-acc-text) !important;
    border-color: var(--sf-v2-acc-text) !important;
    color: #fff !important;
}

/* ------------------------------------------------------- 6. CARTES & SECTIONS */
.card,
.sf-section,
.sf-card,
.co-card,
.ao-card {
    background: #ffffff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-v2-radius);
    box-shadow: var(--sf-shadow);
}

.sf-section-head,
.card-header {
    background: var(--sf-paper-2);
    border-bottom: 1px solid var(--sf-border);
}

.sf-section-icon {
    background: var(--sf-v2-acc-soft);
    color: var(--sf-v2-acc-text);
    border-radius: var(--sf-v2-radius-sm);
}
.sf-section-icon svg { color: var(--sf-v2-acc-text); }

/* Pastilles et étiquettes */
.badge, .sf-tag, .co-tag, .ao-tag {
    border-radius: 999px;
    font-weight: 600;
    background: var(--sf-v2-acc-soft);
    color: var(--sf-v2-acc-text);
}

/* ------------------------------------------------------- 7. FORMULAIRES */
.form-control, .form-select, .sf-input {
    border-radius: var(--sf-v2-radius-sm);
    border-color: var(--sf-border);
    color: var(--sf-ink);
}
.form-control:focus, .form-select:focus, .sf-input:focus {
    border-color: var(--sf-v2-deep);
    box-shadow: 0 0 0 3px rgba(43, 70, 104, .14);
}
.sf-label, .form-label {
    color: var(--sf-muted);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* ------------------------------------------------------- 8. LIENS */
a { color: var(--sf-v2-deep); }
a:hover { color: var(--sf-v2-deep-dark); }
.sf-link, .co-link, .ao-link {
    color: var(--sf-v2-acc-text);
    font-weight: 700;
}

/* ------------------------------------------------------- 9. HÉROS PHOTO */
/* Structure nouvelle, à poser sur la page d'accueil. */
.sf-v2-hero { position: relative; background: var(--sf-v2-deep); overflow: hidden; }
.sf-v2-hero > .sf-v2-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sf-v2-hero > .sf-v2-hero-veil { position: absolute; inset: 0; background: var(--sf-v2-veil); }
.sf-v2-hero > .sf-v2-hero-in { position: relative; padding: 60px 0 66px; }
.sf-v2-hero h1 { color: #fff !important; font-size: clamp(2rem, 5vw, 3.4rem); }
.sf-v2-hero h1 .sf-v2-em { color: var(--sf-v2-sun) !important; }
.sf-v2-hero .sf-v2-sub { color: rgba(255, 255, 255, .85); font-size: 1.03rem; max-width: 52ch; }

/* Vignettes de catégories */
.sf-v2-cat {
    position: relative; display: flex; align-items: flex-end;
    min-height: 136px; border-radius: var(--sf-v2-radius); overflow: hidden;
    background: var(--sf-v2-deep); color: #fff; box-shadow: var(--sf-shadow);
    text-decoration: none;
}
.sf-v2-cat > .img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sf-v2-cat > .veil { position: absolute; inset: 0; background: var(--sf-v2-veil-card); }
.sf-v2-cat > .lbl {
    position: relative; padding: 14px 15px; display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: .88rem; line-height: 1.2; color: #fff;
}
.sf-v2-cat > .lbl img,
.sf-v2-cat > .lbl svg { width: 22px; height: 22px; flex: none; }
.sf-v2-cat > .lbl small { display: block; font-weight: 500; opacity: .76; font-size: .72rem; }
.sf-v2-cat:hover > .img { transform: scale(1.03); transition: transform .4s ease; }

/* ------------------------------------------------------ 10. PIED DE PAGE */
.sf-footer, footer.sf-footer, .site-footer {
    background: var(--sf-ink);
    color: rgba(255, 255, 255, .8);
    border-top: none;
}
.sf-footer a, .site-footer a { color: rgba(255, 255, 255, .8); }
.sf-footer a:hover, .site-footer a:hover { color: #fff; }

/* ------------------------------------------- 11. DÉCOR TATOUAGE : ON RETIRE */
.ao-title-sep,
img[src*="deco-separateur"],
img[src*="deco-coin-floral"],
img[src*="deco-embleme-ancre"],
img[src*="deco-hirondelle"] {
    display: none !important;
}

/* Le hero illustré v1 (instruments dessinés) laisse la place à la photo. */
img[src*="HP_Image_3"],
img[src*="hero-personnages-sans-fond"] { display: none !important; }

/* ------------------------------------------- 12. ICÔNES */
/* Les fichiers de assets/img/icons/ sont remplacés par le jeu v2, même noms.
   Ils sortent en #2B4668. Ces règles ne gèrent que les tailles et les cas
   où l'icône doit prendre une autre couleur. */
img[src*="/assets/img/icons/"] { image-rendering: auto; }

.sf-v2-ico-sun  img { filter: brightness(0) saturate(100%) invert(78%) sepia(43%) saturate(646%) hue-rotate(340deg) brightness(101%) contrast(93%); }
.sf-v2-ico-white img { filter: brightness(0) invert(1); }

/* ------------------------------------------- 13. MOUVEMENT */
@media (prefers-reduced-motion: reduce) {
    .sf-v2-cat:hover > .img { transform: none; }
}

/* ============================================================================
   14. CLASSES POSÉES DANS index.php
   ============================================================================ */

/* Le hero occupe toute la largeur : c'est index.php qui referme le .container
   avant de l'écrire et le rouvre ensuite. Aucun recours à 100vw, donc aucun
   débordement horizontal ni conteneur de défilement parasite. */
.sf-v2-hero { border-radius: 0; }
.sf-v2-hero .container { position: relative; }

.sf-v2-hero-title {
    color: #fff !important;
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    line-height: 1.1;
    margin: .35rem 0 .9rem;
}
.sf-v2-hero-title .sf-v2-em { color: var(--sf-v2-sun) !important; }

.sf-v2-eyebrow-sun { color: var(--sf-v2-sun) !important; }

.sf-v2-proofs {
    list-style: none; padding: 0; margin: 1.35rem 0 0;
    display: flex; flex-wrap: wrap; gap: .55rem;
}
.sf-v2-proofs li {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .28);
    padding: .5rem .9rem; border-radius: 999px;
}
.sf-v2-proofs li b { color: var(--sf-v2-sun); font-weight: 800; }
.sf-v2-proofs img { width: 15px; height: 15px; }

/* Icônes qui doivent virer à l'or sur fond sombre.
   Les SVG livrés ont #2B4668 figé ; ce filtre les amène vers #F0C05A. */
.sf-v2-proofs img,
.sf-v2-ico-sun-img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(38%)
            saturate(741%) hue-rotate(332deg) brightness(101%) contrast(92%);
}

/* Vignettes de familles : la grille passe en 3 colonnes larges. */
#categories .row > [class*="col-"] { display: flex; }
.sf-v2-cat { width: 100%; }
.sf-v2-cat > .img,
.sf-v2-cat > .veil,
.sf-v2-cat > .lbl { display: block; }
.sf-v2-cat > .lbl { display: flex; }
.sf-v2-cat h3, .sf-v2-cat span { color: #fff; }

/* Le séparateur étoile et le visuel v1 disparaissent (déjà géré §11),
   on récupère la marge qu'ils laissaient. */
.sf-title-sep { display: none !important; }

@media (max-width: 575.98px) {
    .sf-v2-hero-in { padding: 40px 0 44px; }
    .sf-v2-cat { min-height: 118px; }
}

/* ============================================================================
   15. DÉGRADÉS ÉCRITS EN DUR DANS sf-hp.css
   ----------------------------------------------------------------------------
   Quelques composants n'utilisent pas les variables mais des dégradés figés
   (héritage de la v1 rouge brique). On les ramène à plat sur l'ardoise.
   ============================================================================ */

.sf-btn-primary,
.sf-btn-primary:hover,
.sf-btn-primary:focus,
.sf-step-number,
.sf-logo {
    background: var(--sf-v2-deep) !important;
    border-color: var(--sf-v2-deep) !important;
    color: #fff !important;
}
.sf-btn-primary:hover { background: var(--sf-v2-deep-dark) !important; }

.sf-btn-secondary {
    background: transparent !important;
    border: 1.5px solid var(--sf-v2-line-2) !important;
    color: var(--sf-ink) !important;
}
.sf-btn-secondary:hover {
    background: var(--sf-paper-2) !important;
    border-color: var(--sf-v2-deep) !important;
    color: var(--sf-v2-deep) !important;
}

.sf-footer { background: var(--sf-ink) !important; }

/* Halos décoratifs des cartes doubles : ardoise et ambre au lieu du rouge. */
.sf-dual-card-red::before { background: radial-gradient(circle at left center, rgba(43,70,104,.16) 0%, transparent 58%) !important; }
.sf-dual-card-blue::before,
.sf-dual-card-red::after   { background: radial-gradient(circle at right center, rgba(224,122,62,.14) 0%, transparent 58%) !important; }

/* Fond général de la page d'accueil : le voile doré/rouge disparaît. */
.sf-hp-bg, .sf-page-bg { background: #fff !important; }

/* Carte d'appel final */
.sf-final-cta-card {
    background: var(--sf-paper-2) !important;
    border: 1px solid var(--sf-border) !important;
}

/* Bandeau du jeu-concours : il reste identifiable mais cesse de hurler.
   ⚠ Ne viser QUE le conteneur extérieur : `[class*="concours-banner"]` attrapait
   aussi `.sf-concours-banner-inner`, qui repeignait un rectangle à angles droits
   par-dessus les coins arrondis du parent. */
.sf-concours-banner, .co-banner {
    background: var(--sf-v2-deep) !important;
    border-color: var(--sf-v2-deep-dark) !important;
    border-radius: 18px !important;
}
.sf-concours-banner-inner { background: transparent !important; }
/* Le titre du bandeau est écrit en Rye dans un <style> de index.php, donc après
   cette feuille : il faut !important pour le ramener à la typographie v2. */
.sf-cb-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-weight: 800 !important; }

/* ============================================================================
   16. LE PROBLÈME DES GROSSES ICÔNES
   ----------------------------------------------------------------------------
   Une icône est un signe : elle est dessinée pour être lue petite. Étirée à
   72 ou 120 px, son trait de 2 devient un cheveu et le dessin sonne creux.
   Trois réponses, choisies selon la place à remplir :

     • > 90 px  → PHOTO. Rien d'autre ne tient. Les deux grandes cartes.
     • ~ 50 px  → RIEN. Quand un autre signe porte déjà le sens (le numéro
                  d'étape), l'icône fait doublon : on la retire et on donne
                  du poids au signe qui reste.
     • < 80 px  → CONTENANT PLEIN. L'icône garde sa taille de lecture (32-40)
                  et c'est la pastille ou la tuile qui occupe la place.
   ============================================================================ */

/* --- a. Les deux grandes cartes : photo, ou rien ------------------------- */
/* index.php ne sort plus d'icône ici en v2 ; s'il n'y a pas encore de photo,
   la colonne disparaît et le texte occupe toute la carte. */
.sf-v2-duo-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--sf-v2-radius);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 26px -14px rgba(23, 38, 58, .45);
}
.sf-dual-card-img { flex: 1; min-width: 0; }

/* --- b. Les étapes : le numéro devient le signe -------------------------- */
/* L'icône est retirée en v2 (voir index.php). Le badge passe d'un dégradé
   rouge de 54 px à un disque ardoise de 62 px, chiffre en Jakarta 800. */
.sf-step-number {
    width: 62px !important;
    height: 62px !important;
    background: var(--sf-v2-deep) !important;
    background-image: none !important;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    letter-spacing: -.02em;
    box-shadow: 0 10px 22px -10px rgba(43, 70, 104, .55) !important;
}
.sf-step-card { padding-top: 2.9rem; }
.sf-step-card h3 { font-size: 1.28rem; }

/* Le drapeau n'est pas une icône de trait : ni pastille, ni retrait. */
.sf-step-icon { width: auto !important; height: auto !important; background: transparent !important; margin: .2rem 0 1rem; }
.sf-step-icon-img[src*="drapeau"] {
    width: 46px !important;
    height: auto !important;
    padding: 0;
    background: transparent;
    border-radius: 4px;
    box-shadow: 0 3px 10px -4px rgba(23, 38, 58, .5);
}

/* --- c. Ailleurs : l'icône garde sa taille, le contenant fait la masse --- */

/* Vignettes des annonces — 110 px → tuile de 72 px, icône 32 */
.sf-listing-thumb-icon {
    width: 72px !important;
    height: 72px !important;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--sf-v2-acc-soft);
    border: 1px solid var(--sf-v2-line-2);
}
.sf-listing-thumb-icon-bi { color: var(--sf-v2-acc-text) !important; }

/* Tuile « Toutes les catégories » — 72 px → pastille de 54 px, icône 26 */
.sf-category-icon-img {
    width: 54px !important;
    height: 54px !important;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--sf-v2-acc-soft);
}
.sf-category-icon { width: auto !important; height: auto !important; }

/* Appel final — surtout pas l'icône logée dans le bouton */
.sf-final-cta-card > img,
.sf-final-cta-card > svg,
.sf-final-cta-card > div > img:not(.sf-btn-icon),
.sf-final-cta-card > div > svg:not(.sf-btn-icon) {
    width: 58px !important;
    height: 58px !important;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--sf-v2-acc-soft);
}

@media (max-width: 767.98px) {
    .sf-step-number { width: 52px !important; height: 52px !important; font-size: 1.35rem !important; }
    .sf-listing-thumb-icon { width: 60px !important; height: 60px !important; padding: 16px; }
}

/* Filet de sécurité : contenu/router.php sort encore une .sf-dual-icon-img.
   Tant qu'elle existe quelque part, on la contient au lieu de l'étirer. */
.sf-dual-icon-img {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    padding: 26px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--sf-v2-acc-soft);
}

/* ============================================================================
   17. LES CARTES DE LA PAGE D'ACCUEIL
   ----------------------------------------------------------------------------
   sf-hp.css peint toutes les cartes de l'accueil avec un dégradé parchemin et
   un liseré tan de 2 px, écrits en dur (ligne 148). Sur fond blanc, ce beige
   fait vieux papier et le liseré crie. On revient au blanc, un filet fin,
   une ombre douce — le relief vient de l'ombre, pas du trait.
   ============================================================================ */
.sf-search-card,
.sf-step-card,
.sf-dual-card,
.sf-category-card,
.sf-listing-card,
.sf-hero-card {
    background: #ffffff !important;
    border: 1px solid var(--sf-border) !important;
    box-shadow: 0 10px 30px -18px rgba(23, 38, 58, .28) !important;
}
/* La carte « organisme public » garde son bandeau tricolore, pas de liseré bleu */
.sf-step-card[style*="border-color"] { border-color: var(--sf-border) !important; }

/* Les deux grandes cartes se distinguent par une teinte, pas par un liseré */
.sf-dual-card-red  { background: var(--sf-v2-acc-soft) !important; border-color: #f2ddcb !important; }
.sf-dual-card-blue { background: #eef2f8 !important; border-color: #dbe3ee !important; }

/* Survol : l'ombre se creuse, la carte monte d'un cheveu */
.sf-category-card:hover,
.sf-listing-card:hover {
    box-shadow: 0 16px 34px -18px rgba(23, 38, 58, .38) !important;
    transform: translateY(-2px);
}

/* Les icônes de bouton restent des icônes de bouton : 18 px, pas de pastille */
.sf-btn-icon,
.sf-btn .sf-btn-icon {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* ============================================================================
   18. LA RANGÉE « COMMENT ÇA MARCHE »
   ----------------------------------------------------------------------------
   La carte « Organisme public » portait un drapeau en image et un bandeau
   tricolore : deux signes différents des trois autres cartes, et un titre
   décalé vers le bas. Elle reçoit maintenant la même pastille ronde que les
   numéros, remplie du tricolore — les quatre titres s'alignent.

   Conséquence : les cartes n'ont plus à s'étirer à la hauteur de la plus
   longue. On coupe l'étirement, chacune fait sa hauteur.
   ============================================================================ */

/* Les quatre cartes gardent la même hauteur — c'est le texte qui a été
   rééquilibré pour qu'aucune ne creuse un vide sous les autres. */
.sf-steps-row > [class*="col-"] { display: flex; }
.sf-steps-row > [class*="col-"] > .sf-step-card { flex: 1; }

/* La pastille doit pouvoir déborder du haut de la carte */
.sf-step-card { overflow: visible !important; }

/* Pastille tricolore : trois bandes verticales franches, même gabarit que le
   numéro. Le liseré évite que la bande blanche se perde sur la page blanche. */
.sf-step-card .sf-step-number-fr {
    background: linear-gradient(90deg,
        #002395 0 33.333%,
        #ffffff 33.333% 66.666%,
        #ED2939 66.666% 100%) !important;
    border: 1px solid #d9dde5;
    box-shadow: 0 10px 22px -10px rgba(23, 38, 58, .45) !important;
}

/* La tuile « Toutes les catégories » prend le gabarit des vignettes photo,
   en aplat ardoise : même largeur, même hauteur, même alignement du libellé. */
.sf-v2-cat-all {
    background: linear-gradient(135deg, var(--sf-v2-deep) 0%, var(--sf-v2-deep-dark) 100%);
    border: 1px dashed rgba(255, 255, 255, .22);
}
.sf-v2-cat-all:hover { border-style: solid; border-color: rgba(240, 192, 90, .55); }


/* ============================================================================
   19. LES CARTES D'ANNONCES
   ----------------------------------------------------------------------------
   L'icône en pastille sur le côté ne dit rien : elle répète la catégorie déjà
   écrite juste à côté, et occupe le tiers de la carte. On la retire. Ce qui
   fait le graphisme d'une petite annonce, c'est la hiérarchie : un filet de
   couleur en tête, l'étiquette du type d'événement, le titre, et le budget
   traité comme un chiffre, gros et coloré — c'est l'information qu'on cherche.
   ============================================================================ */
.sf-listing-thumb-icon,
.sf-listing-thumb-icon-bi,
.sf-listing-thumb { display: none !important; }

.sf-listing-card { position: relative; overflow: hidden; }
.sf-listing-body { display: block !important; margin-bottom: .9rem; }
.sf-listing-text { min-width: 0; }

/* Filet de tête, teinté par l'étiquette de la carte ; ardoise par défaut. */
.sf-listing-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--sf-v2-deep);
}
.sf-listing-card:has(.sf-badge-blue)::before   { background: #2b4668; }
.sf-listing-card:has(.sf-badge-green)::before  { background: #b45c22; }
.sf-listing-card:has(.sf-badge-purple)::before { background: #52708f; }

/* Trois teintes de la même famille — le vert de la v1 sort avec le reste. */
.sf-badge-blue   { background: #2b4668 !important; }
.sf-badge-green  { background: #b45c22 !important; }
.sf-badge-purple { background: #52708f !important; }
.sf-badge, .sf-listing-card .sf-badge {
    color: #fff !important; border-radius: 999px; font-size: .72rem;
    letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
    padding: .3rem .7rem;
}

.sf-listing-card h3 {
    font-size: 1.12rem; font-weight: 800; color: var(--sf-ink);
    margin: .55rem 0 .5rem; line-height: 1.28;
}

/* Le budget devient le point d'ancrage visuel de la carte. */
.sf-budget {
    font-size: 1.45rem !important; font-weight: 800 !important;
    letter-spacing: -.02em; margin: .55rem 0 0 !important;
}
.sf-budget-blue   { color: #2b4668 !important; }
.sf-budget-green  { color: #b45c22 !important; }
.sf-budget-purple { color: #52708f !important; }

.sf-listing-cats { font-size: .82rem; }
.sf-listing-cta { border-top: 1px solid var(--sf-border) !important; padding-top: .9rem; }
.sf-listing-cta .btn { width: 100%; }

/* Les SVG du jeu v2 sortent en #2B4668, gravé dans le fichier : posés sur un
   bouton ardoise ils disparaissent. Sur fond foncé, on les repasse en blanc. */
.sf-btn-primary img,
.btn-primary img,
.sf-cb-cta-sec img,
.sf-footer img[src*="/icons"],
.sf-v2-hero img[src*="/icons"] {
    filter: brightness(0) invert(1);
}

/* ============================================================================
   20. APRÈS RELECTURE — LES QUATRE DÉFAUTS QUI COÛTAIENT LE PLUS
   ============================================================================ */

/* a. Le hero portait 512 px de photo et aucune action. Les trois gages, avec
      leur fond translucide et leur rayon de 999 px, se lisaient même comme des
      boutons qui ne cliquent pas. On met une vraie action au-dessus, et les
      gages redeviennent du texte. */
.sf-v2-hero-cta {
    display: flex; align-items: center; gap: 1.1rem;
    flex-wrap: wrap; margin: 1.5rem 0 .2rem;
}
.sf-v2-cta-main {
    display: inline-flex; align-items: center; justify-content: center;
    background: #ffffff; color: var(--sf-v2-deep);
    font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
    padding: .95rem 1.7rem; border-radius: 999px; text-decoration: none;
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .55);
    transition: transform .15s ease, box-shadow .15s ease;
}
.sf-v2-cta-main:hover {
    color: var(--sf-v2-deep); transform: translateY(-1px);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
}
.sf-v2-cta-sec {
    color: #fff; font-weight: 700; font-size: .95rem;
    text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, .45);
}
.sf-v2-cta-sec:hover { color: #fff; text-decoration-color: #fff; }

.sf-v2-proofs { margin-top: 1.1rem; gap: 1.4rem; }
.sf-v2-proofs li {
    background: none; border: none; padding: 0;
    font-size: .84rem; color: rgba(255, 255, 255, .82);
}

/* b. Les cartes d'étapes : titre à gauche, paragraphe centré — les lignes
      partaient en drapeau des deux côtés. Et le gras avait la couleur du texte
      courant, donc il ne pesait rien. */
.sf-step-card { text-align: left; }
.sf-step-card h3 { text-align: left; }
.sf-step-card p {
    text-align: left; font-size: .94rem; line-height: 1.6;
    color: var(--sf-v2-body) !important;
}
.sf-step-card p strong { color: var(--sf-ink); font-weight: 700; }
/* La pastille reste centrée sur la carte, même si le texte est à gauche. */
.sf-step-number { left: 50% !important; transform: translate(-50%, -50%) !important; }

/* c. Le budget : trois montants, trois couleurs, dont deux montants égaux de
      couleurs différentes. La couleur ne codait rien. Un seul traitement. */
.sf-budget,
.sf-budget-blue,
.sf-budget-green,
.sf-budget-purple { color: var(--sf-ink) !important; }

/* d. Le CTA final : la règle §17 le repeignait en blanc sur blanc. Il reprend
      son crème, et perd ses quatre étincelles dorées — seul motif décoratif de
      toute la page, et le plus faible. */
.sf-final-cta-card {
    background: var(--sf-paper-2) !important;
    border: 1px solid var(--sf-border) !important;
    box-shadow: 0 10px 30px -18px rgba(23, 38, 58, .28) !important;
}
.sf-final-cta-card::before,
.sf-final-cta-card::after { content: none !important; }

/* e. Les vignettes passent en 4 colonnes : 7 familles + la tuile « Toutes »
      remplissent exactement deux rangées, et le cadrage cesse d'être une
      meurtrière — on voit enfin le sujet des photos. Le voile s'allège d'autant. */
.sf-v2-cat { min-height: 168px; }
:root {
    --sf-v2-veil-card: linear-gradient(to top,
        rgba(23, 38, 58, .88) 0%,
        rgba(23, 38, 58, .46) 46%,
        rgba(23, 38, 58, .10) 100%);
}


/* Le logo v2 est posé sur la barre blanche : rien à filtrer, il porte ses
   couleurs. On lui garde juste de l'air à droite du symbole. */
.sf-navbar .navbar-brand { padding-block: 4px; }
@media (max-width: 575.98px) { .sf-navbar .sf-navbar-logo { height: 34px; } }

/* ============================================================================
   21. LES PAGES D'AUTHENTIFICATION
   ----------------------------------------------------------------------------
   connexion, inscription, mot de passe oublié, réinitialisation, validation
   d'e-mail : elles n'incluent pas common/nav.php, la bascule y est appelée
   directement. Leurs styles internes lisent déjà les jetons --sf-*, donc le
   remappage fait l'essentiel ; il reste le fond de page et les arrondis.
   ============================================================================ */
.auth-inner,
.auth-card {
    background: #ffffff !important;
    border: 1px solid var(--sf-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px -26px rgba(23, 38, 58, .38) !important;
}
.auth-tagline { color: var(--sf-v2-body); }
.btn-sf-primary { border-radius: 999px !important; padding: .7rem 1.2rem !important; }
.btn-sf-outline { border-radius: 999px !important; padding: .65rem 1.2rem !important; border-width: 1.5px !important; }
.form-control, .form-select { background: #fff !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--sf-v2-deep) !important;
    box-shadow: 0 0 0 3px rgba(43, 70, 104, .14) !important;
}

/* --- Les pages d'authentification prennent la photo du site en fond -------
   Une carte blanche sur une page blanche ne se voit pas. On remet le décor :
   la même image que le hero, un voile ardoise, et la carte flotte dessus. */
body.sf-auth {
    background: var(--sf-v2-deep-dark) !important;
    min-height: 100vh;
}
body.sf-auth::before {
    content: "";
    position: fixed; inset: 0; z-index: -2;
    background: url('/assets/img/hero/hero-accueil-1920.webp') center / cover no-repeat;
}
body.sf-auth::after {
    content: "";
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(165deg, rgba(23,38,58,.90) 0%, rgba(31,50,76,.80) 45%, rgba(43,70,104,.70) 100%);
}
body.sf-auth .auth-inner,
body.sf-auth .insc-pitch,
body.sf-auth .auth-card {
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .65) !important;
    padding: 2.4rem 2.5rem 2.2rem !important;
}
/* Le pied de page reste lisible sur le fond photo */
body.sf-auth .sf-footer, body.sf-auth footer { position: relative; z-index: 1; }
@media (max-width: 575.98px) {
    body.sf-auth .auth-inner, body.sf-auth .insc-pitch { padding: 1.8rem 1.4rem !important; }
}

/* --- Le voile des vignettes était trop chargé -----------------------------
   Il descend de .88 à .80 en bas, s'éclaircit plus vite, et disparaît
   complètement dans le haut de l'image au lieu de rester à 10 %. Les photos
   sont en plus légèrement remontées en lumière : elles ont été générées de
   nuit, elles supportent le gain. Le libellé reste sur la zone la plus dense. */
:root {
    --sf-v2-veil-card: linear-gradient(to top,
        rgba(23, 38, 58, .80) 0%,
        rgba(23, 38, 58, .34) 42%,
        rgba(23, 38, 58, 0) 78%);
}
.sf-v2-cat > .img { filter: brightness(1.10) saturate(1.06); }
.sf-v2-cat > .lbl { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

/* --- Les vignettes de familles : le titre porte seul -----------------------
   L'icône ambre répétait la catégorie déjà écrite à côté d'elle, en 22 px, sur
   une photo — trois signes pour une seule information. Elle disparaît.
   Le contraste ne vient plus d'un voile sur toute l'image mais d'un dégradé
   court, calé sous le libellé : la photo reste claire, le titre reste lisible. */
:root {
    --sf-v2-veil-card: linear-gradient(to top,
        rgba(16, 26, 42, .34) 0%,
        rgba(16, 26, 42, .10) 40%,
        rgba(16, 26, 42, 0) 72%);
}
.sf-v2-cat > .lbl {
    width: 100%;
    padding: 2.4rem 1rem .95rem;
    align-items: flex-end;
    background: linear-gradient(to top,
        rgba(11, 20, 34, .92) 0%,
        rgba(11, 20, 34, .72) 42%,
        rgba(11, 20, 34, 0) 100%);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.22;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sf-v2-cat > .lbl img { display: none; }
.sf-v2-cat { min-height: 178px; }
/* Les photos de familles sont désormais correctement exposées : plus besoin
   de les pousser, un demi-ton suffit. */
.sf-v2-cat > .img { filter: brightness(1.03); }

/* La tuile « Toutes les catégories » n'a pas de photo : pas de dégradé non plus */
.sf-v2-cat-all > .lbl { background: none; text-shadow: none; }

/* ============================================================================
   22. LA POLICE RYE — ÉRADICATION
   ----------------------------------------------------------------------------
   La recette des 25 pages publiques a montré que Rye survivait PARTOUT : le
   nom « ShowFinder » du pied de page sur les 25, mais aussi .co-hero-title,
   .ar-name, .dm-*, .sfwz-question, .pricing-plan-name, .sf-spec-title et les
   h1/h2 de contact, occasion et appels-offres. La liste de sélecteurs de la
   section 3 ne pouvait pas être exhaustive : chaque page a ses propres classes.

   On inverse donc la logique — tout le corps prend la typographie v2, et on
   rend ensuite explicitement ce qui doit y échapper. Les glyphes des icônes
   Bootstrap sont posés sur ::before avec !important par leur propre feuille :
   ils ne sont pas touchés par cette règle, qui ne vise que les éléments.
   ============================================================================ */
body,
body * {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
/* Le seul écart voulu : l'italique d'accent du titre principal. */
.sf-v2-em,
.sf-v2-em * {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
}
/* Le monospace garde son sens là où il en a un. */
code, kbd, samp, pre, pre * {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* ============================================================================
   23. LE ROUGE ÉCRIT EN DUR DANS LES <style> DE PAGE
   ----------------------------------------------------------------------------
   La plupart des pages écrivent var(--sf-red, #a03223) : le remappage de la
   section 1 les emmène avec lui, le repli ne sert jamais. Mais 47 règles
   écrivent la valeur littérale — surtout des halos de focus, et le tunnel de
   dépôt d'annonce (.sfwz-*) qui est le parcours le plus important du site.

   Ces blocs vivent dans le <head>, donc avant l'inclusion de nav.php : le
   tampon de sortie du thème ne les voit pas. Il faut les reprendre ici.
   ============================================================================ */

/* Un seul halo de focus pour tout le site, en ardoise. */
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus,
[class*="-input"]:focus, [class*="-select"]:focus, [class*="-textarea"]:focus {
    box-shadow: 0 0 0 3px rgba(43, 70, 104, .14) !important;
    border-color: var(--sf-v2-deep) !important;
}

/* Le tunnel de dépôt d'annonce — poster-demande-v2.php et recherche_artiste.php */
.sfwz-progress-bar {
    background: linear-gradient(90deg, var(--sf-v2-deep) 0%, var(--sf-v2-acc) 100%) !important;
}
.sfwz-btn-next, .sfwz-btn-submit {
    background: var(--sf-v2-deep) !important;
    box-shadow: 0 6px 18px -8px rgba(43, 70, 104, .55) !important;
}
.sfwz-btn-next:hover, .sfwz-btn-submit:hover {
    background: var(--sf-v2-deep-dark) !important;
    box-shadow: 0 10px 24px -8px rgba(43, 70, 104, .6) !important;
}
.sfwz-fin-btn.selected {
    background: var(--sf-v2-deep) !important;
    border-color: var(--sf-v2-deep) !important;
}
.sfwz-fin-btn:hover { border-color: var(--sf-v2-deep) !important; color: var(--sf-v2-deep) !important; }
.sfwz-chip:hover, .sfwz-manual-toggle:hover { background: var(--sf-v2-acc-soft) !important; }
.sfwz-family-card:hover, .sfwz-family-card.selected,
.sfwz-event-card.selected, .sfwz-budget-btn.selected,
.sfwz-chip.active, .sfwz-pill-check:checked + .sfwz-pill-label,
.sfwz-tl-item.current .sfwz-tl-badge {
    box-shadow: 0 0 0 3px rgba(43, 70, 104, .18) !important;
    border-color: var(--sf-v2-deep) !important;
}
.sfwz-tl-item.current:not(:last-child)::after { background: var(--sf-v2-deep) !important; }
.sfwz-flexible-toggle input:checked ~ .sfwz-toggle-track { background: var(--sf-v2-deep) !important; }
.sfwz-flexible-toggle input:checked ~ .sfwz-toggle-text { color: var(--sf-v2-deep) !important; }
.sfwz-title-suggestion { border-color: var(--sf-v2-deep) !important; }

/* La fiche d'une annonce — demande.php */
.dm-hero { background: var(--sf-v2-deep) !important; }
.dm-card-head .dm-head-icon { background: var(--sf-v2-acc-soft) !important; color: var(--sf-v2-acc-text) !important; }
.dm-info-value.big, .dm-org-name i, .dm-quota-note strong { color: var(--sf-v2-deep) !important; }
.dm-contact-card { border-color: var(--sf-v2-deep) !important; }
.dm-contact-head { background: var(--sf-v2-deep) !important; }
.dm-contact-error, .ct-error-box { color: var(--bs-danger, #a3372b) !important; }
.ct-error-box, .ao-pro-notice {
    background: var(--sf-v2-acc-soft) !important;
    border-color: var(--sf-v2-line-2) !important;
}
.ao-load-more-btn:hover { box-shadow: 0 8px 20px -10px rgba(43, 70, 104, .5) !important; }

/* Bandeaux du jeu-concours hors accueil */
.co-hero, .ar-concours-banner, [class*="concours-banner"]:not(.sf-concours-banner-inner) {
    background: linear-gradient(135deg, var(--sf-v2-deep-dark) 0%, var(--sf-v2-deep) 60%, #24354d 100%) !important;
}
.pc-tag { background: var(--sf-v2-acc-soft) !important; color: var(--sf-v2-acc-text) !important; }