/* ───────────────────────────────────────────────────────────────────────────
   Compléments du front brfb : éléments du socle skeleton (bannière cookies,
   checklist mot de passe, icônes des réseaux sociaux en image) mis aux
   couleurs du front brfb.
   ─────────────────────────────────────────────────────────────────────────── */

/* Réseaux sociaux du pied de page : icônes en image (SVG téléversés) */
.svgSizeSocialNetwork img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

/* Survol à la souris seulement : au doigt, l'icône restait grossie après l'appui */
@media (hover: hover) {
    .svgSizeSocialNetwork img:hover {
        transform: scale(1.1);
    }
}

/* ── Bannière de consentement cookies ──────────────────────────────────── */
#cookie-banner.cookie-banner {
    position: fixed;
    bottom: 16px;
    /* Échelle des calques du front, de bas en haut : barre flottante 900, bouton
       haut de page 999, barre d'action de la fiche 1000, bannière 1035,
       offcanvas 1045, modales et leur voile 1050 à 1055 (Bootstrap, « + de
       filtres » des listes), message de l'accueil 1060, menu mobile ouvert
       1070, notifications de l'espace pro 1090, visionneuse 9999. À 1080
       (couche des infobulles de Bootstrap), la bannière passait devant les
       modales et masquait leur pied. */
    z-index: 1035;
    /* Toujours 16 px de marge de chaque côté (elle touchait le bord gauche sous
       412 px), et jamais plus haute que l'écran (paysage court, bureau zoomé,
       panneau « Personnaliser » ouvert) : elle défile alors elle-même, sans
       entraîner la page. 100 % et non 100vw : la fenêtre sans sa barre de
       défilement, qui sinon mangeait la marge gauche au bureau. */
    max-width: min(380px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    font-family: "Poppins", sans-serif;
}

#cookie-banner.cookie-bottom-center {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
}

#cookie-banner.cookie-bottom-right { right: 16px; }
#cookie-banner.cookie-bottom-left { left: 16px; }
#cookie-banner.cookie-bottom { left: 16px; right: 16px; max-width: none; }

#cookie-banner p {
    font-size: .9rem;
    color: #6b7280;
    margin: 6px 0 10px;
}

#cookie-banner .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#cookie-banner .btn {
    border-radius: 8px !important;
    padding: 6px 12px;
    font-size: .85rem;
    flex: 0 0 auto;
}

#cookie-banner .btn-outline {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

#cookie-banner .btn-outline:hover {
    background: #f3f4f6;
}

/* Focus clavier : contour du front (les boutons « btn-outline » n'en avaient
   aucun, le halo de Bootstrap n'étant défini que pour ses propres variantes) */
#cookie-banner .btn:focus-visible {
    outline: 2px solid #4D3DFF;
    outline-offset: 2px;
    box-shadow: none;
}

/* Rangée des boutons collée au bas de la bannière quand celle-ci défile :
   « Enregistrer » et « Annuler » restent visibles. Le retrait bas de la bannière
   passe dans la rangée (marge négative) : sans cela, le collage s'arrêterait
   18 px au-dessus du bord et le contenu défilerait dessous. Même chose en haut,
   sur 8 px, pour que le texte ne touche pas les boutons. Rendu inchangé quand
   la bannière ne défile pas. */
#cookie-banner #cookie-actions {
    position: sticky;
    bottom: -18px;
    margin: -8px 0 -18px;
    padding: 8px 0 18px;
    background: #fff;
}

#cookie-banner .cookie-categories {
    max-height: 45vh;
    overflow-y: auto;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Écran bas (téléphone en paysage, bureau zoomé) : un seul défilement, celui de
   la bannière, plutôt qu'une liste qui défile dans une bannière qui défile. Les
   45vh restent au-dessus : la bannière ne grandit pas sur un grand écran. */
@media (max-height: 480px) {
    #cookie-banner .cookie-categories {
        max-height: none;
        overflow: visible;
    }
}

#cookie-banner .cookie-category {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

#cookie-banner .cookie-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#cookie-banner .cookie-category p.hint {
    margin: 6px 0;
    font-size: .8rem;
}

#cookie-banner .cookie-list {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: .8rem;
    color: #6b7280;
}

#cookie-banner .badge {
    font-size: .7rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
}

#cookie-banner .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

#cookie-banner .toggle-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .9rem;
}

#cookie-banner .toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #d1d5db;
    transition: background .15s;
}

/* La case, transparente, couvre tout l'interrupteur (épinglée en haut à gauche) */
#cookie-banner .toggle input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

/* La case étant invisible, son focus clavier est reporté sur l'interrupteur :
   sans cela, rien ne se voyait au Tab. */
#cookie-banner .toggle:has(input:focus-visible) {
    outline: 2px solid #4D3DFF;
    outline-offset: 2px;
}

#cookie-banner .toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s;
    pointer-events: none;
}

#cookie-banner .toggle-on,
#cookie-banner .toggle:has(input:checked) {
    background: var(--color-primary);
}

#cookie-banner .toggle-on .toggle-knob,
#cookie-banner .toggle:has(input:checked) .toggle-knob {
    left: 23px;
}

/* ── Checklist du nouveau mot de passe (partials/_password_check) ────── */
.pc-panel {
    margin: 8px 0 4px;
    padding: 12px 14px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: .875rem;
}

.pc-info {
    margin: 0 0 6px;
    color: #6b7280;
}

.pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-item {
    position: relative;
    padding: 2px 0 2px 22px;
    color: #6b7280;
}

.pc-item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
}

.pc-item.pc-ok {
    color: #15803d;
}

.pc-item.pc-ok::before {
    border-color: #15803d;
    background: #15803d;
}

/* Champ piège anti-robots (honeypot) */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────
   Composant transverse : toute page publique peut en poser un. Déclaré ici
   (feuille chargée partout) et non dans family.css, qui ne l'est pas. */
/* ── Bandeau fil d'Ariane (bloc ariane du gabarit) ─────────────────────── */
.frontTrail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 40px 24px 40px;
}

/* nav.css stylise toute balise nav (menu principal) : neutralisation */
nav.frontBreadcrumb {
    display: block;
    width: auto;
    height: auto;
    gap: 0;
    margin: 0;
    padding: 0;
    position: static;
    z-index: auto;
    background: none;
}

.frontBreadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #434343;
}

/* Le chevron suit l'élément qu'il prolonge : quand le fil passe à la ligne, la
   ligne suivante commence par un libellé et non par un séparateur seul. */
.frontBreadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 6px;
    color: #434343;
}

.frontBreadcrumb a {
    color: #000;
    text-decoration: none;
    transition: 0.3s ease;
}

.frontBreadcrumb a:hover {
    color: #4d3dff;
}

.frontBreadcrumb [aria-current="page"] {
    color: #434343;
}


@media (max-width: 576px) {
    .frontTrail {
        padding: 14px 16px 20px 16px;
    }
}

/* End fil d'Ariane */

/* ── Barre de recherche flottante ────────────────────────────────────────
   Révélée au défilement (front/js/sticky-search.js), escamotée en haut de page.
   Déclarée ici : elle est présente sur toutes les pages publiques.

   Elle est posée HORS du <header> dans le gabarit, pour ne pas hériter de ses
   contextes d'empilement : le panneau des prestations qu'elle contient doit
   pouvoir passer au-dessus de tout le reste. */
.stickySearch{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background-color: #fff;
    border-bottom: 1px solid #DADADA;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    /* Décélération franche puis fin douce : le mouvement se lit comme un
       glissement, pas comme un déplacement linéaire. */
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.22s ease,
                visibility 0s linear 0s;
}

/* Escamotée : glissée vers le haut plutôt que display:none, pour que le
   mouvement soit visible. inert-like : ni cliquable ni focusable. */
.stickySearch.isHidden{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* La visibilité ne bascule qu'une fois le glissement terminé, sinon la
       barre disparaît d'un coup au lieu de remonter. */
    transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1),
                opacity 0.18s ease,
                visibility 0s linear 0.28s;
}

/* Trois colonnes de largeur égale sur les côtés : la recherche reste centrée dans
   la page quelle que soit la longueur des liens de droite. */
.stickySearchInner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 5%;
}

.stickySearchHome{
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.stickySearchHome img{
    display: block;
    height: 32px;
    width: auto;
}

.stickySearchMark{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background-color: #EDE7FF;
    font-family: 'Poltawski Nowy';
    font-size: 18px;
    font-weight: 600;
    color: #1F1F1F;
}

/* La barre reprend la forme de celle du bandeau : pastille blanche bordée */
.stickySearchForm{
    display: flex;
    align-items: center;
    width: min(640px, 100%);
    min-width: 0;
    padding: 5px 5px 5px 18px;
    background-color: #fff;
    border: 1px solid #DADADA;
    border-radius: 999px;
    transition: box-shadow 0.2s ease;
}

.stickySearchForm:hover,
.stickySearchForm:focus-within{
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
}







/* Le sélecteur de prestations est partagé avec le bandeau : ici il est plus
   compact, et son panneau s'ouvre juste sous la barre. */

/* Jamais plus large que l'écran moins sa position : le panneau part 16 px avant
   le sélecteur (ui.css) et le 92vw du système ne bornait que sa largeur ; sous
   388 px il dépassait de 1 à 5 px à droite. Sans effet au-dessus de 408 px
   (360 px de panneau). Sa hauteur est déjà bornée par ui.css (70 % de l'écran). */
.stickySearch .ui-select__panel{
    max-width: calc(100vw - 48px);
}


@media (max-width: 834px){
    /* Une seule colonne : le logo et les liens sont masqués, il ne reste que la
       recherche, qui occupe toute la largeur. */
    .stickySearchInner{
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 8px 16px;
    }

    /* Le logo laisse la place à la recherche : c'est elle qu'on vient chercher */
    .stickySearchHome{
        display: none;
    }

    .stickySearchForm{
        max-width: none;
        padding-left: 14px;
    }


}

/* End barre de recherche flottante */

/* Liens de droite : connexion et espace pro, inaccessibles autrement quand le
   menu principal est sorti de l'écran. */
.stickySearchAuth{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    min-width: 0;
}

.stickySearchLink{
    font-family: 'Afacad';
    font-size: 16px;
    color: #1F1F1F;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.stickySearchLink:hover{
    color: #4D3DFF;
}

.stickySearchLink:focus-visible{
    outline: 2px solid #4D3DFF;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Connexion : action principale de ce groupe, en pastille */
.stickySearchLinkStrong{
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 18px;
    background-color: #F4F2FF;
    border: 1px solid #DDD5FF;
    border-radius: 999px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.stickySearchLinkStrong:hover{
    color: #1F1F1F;
    background-color: #EDE7FF;
    border-color: #B9A6FF;
}

/* Le contenu arrive juste après la barre, pas en même temps : le regard suit le
   glissement, puis découvre la recherche. */
.stickySearchForm,
.stickySearchAuth,
.stickySearchHome{
    transition: opacity 0.26s ease 0.08s, transform 0.26s ease 0.08s;
}

.stickySearch.isHidden .stickySearchForm,
.stickySearch.isHidden .stickySearchAuth,
.stickySearch.isHidden .stickySearchHome{
    opacity: 0;
    transform: translateY(-6px);
    transition-delay: 0s;
}

/* Réglage système « réduire les animations » : on garde l'apparition, on retire
   le mouvement. Une barre qui surgit sans glisser reste compréhensible.
   Ignorer ce réglage peut provoquer des malaises chez les personnes sensibles
   au mouvement. */
@media (prefers-reduced-motion: reduce){
    .stickySearch,
    .stickySearchForm,
    .stickySearchAuth,
    .stickySearchHome{
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }

    .stickySearch.isHidden{
        transform: none;
    }

    .stickySearch.isHidden .stickySearchForm,
    .stickySearch.isHidden .stickySearchAuth,
    .stickySearch.isHidden .stickySearchHome{
        transform: none;
    }
}

/* Sous 1100 px, les liens de droite prennent trop de place : la recherche prime.
   La troisième colonne reste en place, vide : sans elle le logo déséquilibrerait
   la grille et la recherche ne serait plus centrée. */
@media (max-width: 1100px){
    .stickySearchAuth{
        display: none;
    }

    .stickySearchForm{
        width: min(640px, 100%);
    }
}

/* Jusqu'à 834 px, une seule colonne : la recherche prend toute la largeur.
   Placée en fin de fichier pour l'emporter sur le bloc ≤ 1100 px ci-dessus,
   valable lui aussi jusqu'à 834 px, qui la laissait à 640 px, collée à gauche. */
@media (max-width: 834px){
    .stickySearchForm{
        width: 100%;
    }
}

/* Écran bas (téléphone couché, fort zoom) : la barre y prenait 19 à 40 % de la
   hauteur. Plus mince (environ 55 px au lieu de 71), elle s'efface en plus
   quand on descend et revient quand on remonte (sticky-search.js). Placée après
   le bloc ≤ 834 px, dont elle ne reprend que les retraits verticaux. */
@media (max-height: 500px){
    .stickySearchInner{
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* ── Mouvement réduit (toutes les pages) ─────────────────────────────────
   Réglage système « réduire les animations » : défilements instantanés (ancres
   comme « Comment ça marche », logo du pied de page). footer.css pose le
   défilement doux, et load.js le repose en style en ligne sur <html> après la
   restauration de la position : d'où !important. Le menu mobile (nav.css), le
   bouton haut de page (backtop.js), le carrousel des pros (provider-carousel.js)
   et la barre flottante (plus haut) traitent le même réglage. */
@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior: auto !important;
    }
}

/* ── Pages de contenu : lien d'évitement, titre de page, contenu riche ────
   Composants transverses des pages publiques, sans effet hors des classes
   posées par les gabarits. */

/* Lien d'évitement (front/base.html.twig) : premier arrêt de la tabulation,
   masqué jusqu'au focus par visually-hidden-focusable (Bootstrap, règles
   !important tant qu'il n'a pas le focus). Au focus, bouton du système (ui-btn)
   posé en surimpression en haut à gauche : il ne décale rien et reste visible
   même page défilée. Au-dessus de toutes les couches du front (menu mobile
   1070, notifications 1090), visionneuse exceptée. */
.skipLink{
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}

/* Son ancre (#contenu) prend le focus pour que la tabulation reparte du
   contenu ; vide, elle n'a pas de contour à montrer. */
.skipTarget:focus{
    outline: none;
}

/* Titre de page des pages de contenu (FAQ, pages légales) : Poltawski Nowy
   600 comme les titres de Contact, d'À propos et de Devenir partenaire, au
   lieu du h1 de Bootstrap en Poppins. */
.frontPageTitle{
    margin: 0 0 16px;
    font-family: 'Poltawski Nowy';
    font-weight: 600;
    font-size: clamp(28px, 1.6vw + 22px, 42px);
    line-height: 1.15;
    color: #1f1f1f;
    text-align: center;
    text-wrap: balance;
}

/* Contenu riche saisi au back office (pages légales, pages d'erreur, fenêtre
   des CGU), rendu dans un conteneur .rich-html. L'éditeur garde la largeur et
   la hauteur des images et la largeur (ou la largeur minimale, écrite en ligne,
   d'où !important) des tableaux : une image de 630 px élargissait toute la page
   sur téléphone. L'image tient dans la colonne, un tableau trop large défile
   dans son propre cadre. */
.rich-html img{
    max-width: 100%;
    height: auto;
}

.rich-html table{
    display: block;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: auto;
    margin: 12px 0;
    border-collapse: collapse;
}

.rich-html th,
.rich-html td{
    padding: 8px 10px;
    border: 1px solid #DADADA;
    text-align: left;
    vertical-align: top;
}

.rich-html th{
    background-color: #F4F2FF;
    font-weight: 600;
}