/* ========================================
   PAGE DE RECHERCHE
   ======================================== */

/* En-tête de recherche — fond rose, texte blanc/gris */
.search-header {
    background: var(--rose);
    padding: var(--spacing-md) 0 var(--spacing-md); /* réduit l'espace en bas du bandeau */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.search-header .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-xs); /* réduit légèrement l'espace entre breadcrumb et titre */
    color: rgba(255, 255, 255, 0.85);
}

.search-header .breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-header .breadcrumb a:hover {
    color: #fff;
}

.search-header .breadcrumb .separator {
    color: rgba(255, 255, 255, 0.6);
}

.search-header .breadcrumb .current {
    color: var(--white);
    font-weight: 600;
}

.search-header .page-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--spacing-xs); /* réduit l'espace entre le titre et la ligne de résultats */
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-header .page-title i {
    color: rgba(255, 255, 255, 0.9);
}

.search-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.search-header .result-count {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
}

.search-header .result-count strong {
    color: var(--white);
    font-size: var(--text-xl);
}

/* Masqué sur smartphone : libellé « trouvée(s) » pour raccourcir le bandeau */
@media (max-width: 768px) {
    .search-header .result-count-trouvees {
        display: none;
    }
}

.search-header .region-info {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-header .region-info i {
    color: rgba(255, 255, 255, 0.8);
}

/* Bouton proposer (base) */
.result-count-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
}

.btn-proposer-ecole {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--white);
    background: var(--ocean);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
}

.btn-proposer-ecole:hover {
    opacity: 0.9;
    color: var(--white);
}

.btn-proposer-ecole-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ocean);
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-proposer-ecole-inline:hover {
    background: var(--gray-50);
    color: var(--ocean);
    border-color: var(--ocean);
}

.btn-proposer-ecole-inline i {
    font-size: var(--text-sm);
}

/* Bouton proposer : variante discrète à droite dans le search-header */
.search-header .btn-proposer-ecole-inline--subtle {
    margin-left: auto;
    background: var(--white);
    color: var(--rose);
    border: 1px solid var(--rose);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}

.search-header .btn-proposer-ecole-inline--subtle:hover {
    background: var(--white);
    color: var(--rose);
    border-color: var(--rose);
}

.search-header .btn-proposer-ecole-inline--subtle i {
    font-size: var(--text-xs);
}

.search-seo-text {
    margin-top: var(--spacing-sm);
    font-size: var(--text-base);
    line-height: var(--line-height-relaxed);
    color: rgba(255, 255, 255, 0.95);
    max-width: 720px;
}

/* Messages de succès / erreurs pour la proposition d'école */
.proposer-success {
    background: var(--success-bg);
    color: var(--success-text);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 10px;
}

.proposer-success i {
    color: var(--green);
    font-size: var(--text-xl);
}

/* Réutilisation hors search-header (breadcrumb, etc. par défaut) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-sm);
    color: var(--gray-500);
}

.breadcrumb a {
    color: var(--gray-600);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb a:hover {
    color: var(--ocean);
}

.breadcrumb .separator {
    color: var(--gray-400);
}

.breadcrumb .current {
    color: var(--navy);
    font-weight: 600;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i {
    color: var(--ocean);
}

.page-title-mobile {
    display: none;
}

.result-count {
    font-size: 16px;
    color: var(--gray-700);
}

.result-count strong {
    color: var(--ocean);
    font-size: 20px;
}

.region-info {
    font-size: 14px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Lightboxes spécifiques à la recherche — hauteur max et scroll pour tout le contenu */
.lightbox-overlay .lightbox-box {
    max-height: 90vh;
    overflow-y: auto;
}

.lightbox-body .form-group {
    margin-bottom: 16px;
}

.lightbox-body label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin-bottom: 4px;
}

.lightbox-body input,
.lightbox-body textarea,
.lightbox-body select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
}

.lightbox-body textarea {
    min-height: 80px;
    resize: vertical;
}

.lightbox-body .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lightbox-body .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}

@media (min-width: 480px) {
    .lightbox-body .checkbox-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lightbox-body .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-700, #374151);
}

.lightbox-body .checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    vertical-align: middle;
}

.lightbox-body .label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin-bottom: 6px;
}

.lightbox-signaler-recherche .lightbox-box {
    max-width: 480px;
}

/* Layout résultats */
.search-results {
    padding: var(--spacing-lg) 0;
}

/* Bandeau promotionnel Monpermisbateau.com */
.recherche-promo {
    margin-top: var(--spacing-lg);
    width: 100%;
}

.recherche-promo__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-left: 6px solid var(--rose);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.recherche-promo__text h3 {
    margin: 0;
    font-size: 16px;
    color: var(--navy);
}

.recherche-promo__text p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-600);
}

.recherche-promo__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--rose);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.recherche-promo__link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .recherche-promo__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

.results-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-lg);
}

.results-layout--no-sidebar {
    grid-template-columns: 1fr;
}

/* Sidebar filtres */
.partner-icon{
width:16px;
height:34px;
}
.filters-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.filter-box {
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-box h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-title--toggle {
    cursor: pointer;
}

.filter-box h3 i {
    color: var(--ocean);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.filter-checkbox:hover {
    background: var(--gray-50);
}

.filter-checkbox input[type="checkbox"] {
    cursor: pointer;
}

.filter-checkbox span {
    font-size: 14px;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-checkbox i {
    font-size: 16px;
    color: var(--ocean);
}

.other-departments {
    list-style: none;
}

.other-departments li {
    margin-bottom: 6px;
}

.other-departments a {
    font-size: 14px;
    color: var(--gray-700);
    display: block;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.other-departments a:hover {
    background: var(--ocean-light);
    color: var(--ocean);
}

/* Grille des écoles — 3 colonnes par défaut */
.schools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    align-items: stretch; /* ← Ajoute ça (valeur par défaut normalement) */
}

/* Carte école */
.school-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--spacing-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
    contain: paint; /* Isole la carte pour de meilleures perfs */
}
.school-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--ocean-light);
}

/* Coin corné "voir la fiche" en haut à droite */
.school-card-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--rose);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 0 var(--radius-sm);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
    text-decoration: none;
}

.school-card-corner i {
    font-size: 1rem;
}

.school-card-corner:hover {
    background: var(--ocean);
    color: var(--white);
}

/* Partenaires : bordure rose */
.school-card--partner {
    border-color: var(--rose);
}
.school-card--partner:hover {
    border-color: var(--rose);
}

/* Icône goéland partenaire en haut à gauche */
.school-card--partner::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--spacing-sm) * -0.6);;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url('../images/goeland_tete.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ligne permis (icônes) + numéro d'agrément à droite */
.school-permits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;              /* pousse la ligne en bas de la carte */
    padding-top: var(--spacing-sm); /* garde l'espace au-dessus */
    margin-bottom: 0;
}

.school-permits-row .school-permits {
    margin: 0;
}

.school-agrement {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--gray-500);
    font-weight: 500;
    flex-shrink: 0;
}

/* Adresse complète */
.school-address {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-700);
}

.school-address i {
    color: #F46263;
    font-size: 18px;
    flex-shrink: 0;
}

/* Partie centrale : map-marker en rose (version v5.1) ; sidebar garde le bleu (.filter-box h3 i) */
.results-main .lni-map-marker-5 {
    color: #F46263;
}

.address-content {
    flex: 1;
}

/* Contact */
.school-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.contact-item i {
    color: #F46263;
    font-size: 16px;
    width: 18px;
}

.contact-item a {
    color: var(--gray-700);
    transition: color 0.2s;
}

.contact-item a:hover {
    color: var(--ocean);
}


.school-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-top: var(--spacing-sm);      /* un peu plus d'espace avec le haut de la carte */
    margin-bottom: var(--spacing-sm);
}

.school-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-right:20px
}

.school-name a {
    color: var(--navy);
    transition: color 0.2s;
}

.school-name a:hover {
    color: var(--ocean);
}


/* Badges permis */
.school-permits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.permit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    font-size: 0;
}

.permit-badge i,
.permit-badge .permit-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.filter-checkbox .permit-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

/* Les variantes de permis ne gèrent plus de fond/couleur, uniquement les icônes */
.permit-cotier,
.permit-fluvial,
.permit-hauturier,
.permit-radio,
.permit-extension-fluvial,
.permit-coaching {
    /* Intentionnellement neutre : sert d'API de classes pour le HTML */
    --permit-variant: 1;
}

/* Bloc \"Étendre la recherche\" dans la grille */
.school-card-extend-search {
    border-style: dashed;
}
.extend-search-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.extend-search-list li + li {
    margin-top: 4px;
}

.school-actions {
    margin-top: var(--spacing-sm);
}

.school-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 6px 12px;
    color: var(--ocean);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-decoration: none;
}

.school-card-link:hover {
    background: var(--gray-200);
    color: var(--ocean);
}

.school-card-link i {
    font-size: 16px;
}

/* Aucun résultat */
.no-results {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--white);
    border-radius: var(--radius);
}

.no-results-media {
    display: flex;
    justify-content: flex-start;
}

.no-results-img {
    max-width: 180px;
    height: auto;
    display: block;
}

.no-results-body {
    text-align: left;
}

.no-results h2 {
    font-size: 24px;
    color: var(--navy);
    margin-bottom: var(--spacing-sm);
}

.no-results p {
    color: var(--gray-600);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
    .no-results {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .no-results-body {
        text-align: center;
    }
}

/* Services officiels */
.service-box {
    background: var(--ocean-light);
    border-left: 4px solid var(--ocean);
}

.service-box h3 {
    color: var(--ocean);
}

.service-separator {
    border: none;
    border-top: 2px dashed rgba(21, 101, 192, 0.3);
    margin: var(--spacing-md) 0;
}

.service-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--spacing-sm);
}

.service-info address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-700);
    margin-bottom: var(--spacing-sm);
}

.service-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 6px;
}

.service-contact i {
    color: var(--ocean);
    font-size: 14px;
}

.service-contact a {
    color: var(--gray-700);
    transition: color 0.2s;
}

.service-contact a:hover {
    color: var(--ocean);
}

.service-ville-first {
    margin: 0 0 0.5em;
    font-size: 15px;
}

/* Accordéon services (plusieurs services) */
.service-accordion {
    margin-top: 0.5em;
}

.service-accordion-item {
    border-bottom: 1px solid rgba(21, 101, 192, 0.2);
}

.service-accordion-item:last-child {
    border-bottom: none;
}

.service-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 15px;
    color: var(--navy);
    cursor: pointer;
    text-align: left;
}

.service-accordion-trigger:hover {
    color: var(--ocean);
}

.service-accordion-icon {
    font-size: 14px;
    color: var(--ocean);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.service-accordion-item.is-open .service-accordion-icon {
    transform: rotate(180deg);
}

.service-accordion-content {
    display: none;
    padding-bottom: 12px;
}

.service-accordion-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin: 0 0 6px;
}

.service-accordion-content address {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.service-accordion-item.is-open .service-accordion-content {
    display: block;
}

.service-extra {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(21, 101, 192, 0.2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-600);
}

.service-extra p {
    margin-bottom: 8px;
}

.service-extra strong {
    color: var(--navy);
    font-weight: 600;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .results-layout {
        grid-template-columns: 1fr;
    }

    /* Mobile sidebar : masquer partenaire et filtres ville/département */
    .filters-sidebar .sidebar-partenaire,
    .filters-sidebar .sidebar-filtre-geo {
        display: none !important;
    }

    /* Filtre par formation : affichage horizontal */
    .filters-sidebar .sidebar-formation {
        width: 100%;
    }
    .filters-sidebar .sidebar-formation .filter-group {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    /* Service officiel : masquer dans la sidebar, affiché après les résultats via .service-officiel-mobile */
    .filters-sidebar .service-box--desktop {
        display: none !important;
    }

    /* Bloc service officiel après les résultats (visible uniquement en mobile) */
    .service-officiel-mobile {
        display: block;
        margin-top: var(--spacing-lg, 24px);
    }
}

@media (min-width: 1025px) {
    .service-officiel-mobile {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .schools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 24px;
    }

    .page-title-desktop {
        display: none;
    }

    .page-title-mobile {
        display: inline;
    }
    
    .search-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .schools-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-sidebar {
        flex-direction: column;
    }
    
    .filter-box {
        min-width: auto;
    }

    .filters-sidebar .sidebar-formation .filter-group {
        display: none;
    }

    .filters-sidebar .sidebar-formation.sidebar-formation--open .filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .school-header {
        flex-direction: column;
        align-items: flex-start;
    }
}