/**
 * Carte d'une étude (map.php) — charte Carto-SIG
 * (_ressources/commercial/charte-graphique-carto-sig/DESIGN.md) : un seul turquoise de marque,
 * #66CCCC pour les aplats et #1D6F73 pour tout ce qui se lit ; Montserrat (titres, interface),
 * Roboto (texte), hébergées ici (aucun appel à Google Fonts).
 */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
}

:root {
    --cs-turquoise: #66CCCC;
    --cs-turquoise-texte: #1D6F73;
    --cs-turquoise-fonce: #1E8484;
    --cs-ardoise: #2C3E50;
    --cs-encre: #212529;
    --cs-gris: #6C757D;
    --cs-fond-doux: #F8F9FA;
    --cs-filet: #E9ECEF;
    --cs-brume: #EEF8F8;
    --cs-non-renseigne: #CED4DA;
    --largeur-panneau: 360px;
}

body.page-etude {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    color: var(--cs-encre);
    overflow: hidden;
}

.page-etude h1, .page-etude h2, .page-etude .bloc-titre, .page-etude .btn,
.page-etude .modal-title, .page-etude .produit, .page-etude .legende-titre {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* === CARTE À CÔTÉ DU PANNEAU (bureau) : rien n'est caché sous le panneau === */
.page-etude #map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
}

.page-etude #sidebar {
    width: var(--largeur-panneau);
}

.page-etude #sidebar.collapsed {
    transform: translateX(calc(-1 * var(--largeur-panneau)));
}

@media (min-width: 769px) {
    body.page-etude.sidebar-ouverte #map {
        left: var(--largeur-panneau);
    }
}

@media (max-width: 768px) {
    .page-etude #sidebar {
        width: 100%;
    }
    .page-etude #sidebar.collapsed {
        transform: translateX(-100%);
    }
}

#sidebar-open-btn {
    top: 12px;
    left: 12px;
    padding: 8px 12px;
}

/* === EN-TÊTE DU PANNEAU === */
.produit {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-turquoise-texte);
    letter-spacing: 0.02em;
}

.etude-titre {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 4px 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cs-turquoise);
}

.etiquette-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 2px 10px;
    border: 1px solid var(--cs-filet);
    border-radius: 24px;
    background: #fff;
    color: var(--cs-encre);
}

.etiquette-demo .point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cs-turquoise);
}

.bloc {
    margin-top: 16px;
}

.bloc-titre {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.champ {
    background-color: #F5F7F9;
    border: 2px solid #E2E8ED;
    border-radius: 12px;
    font-size: 0.9rem;
}

.champ:focus {
    border-color: var(--cs-turquoise);
    box-shadow: 0 0 0 4px rgba(102, 204, 204, 0.3);
}

.petit-texte {
    font-size: 0.8rem;
    color: var(--cs-gris);
}

/* === CHIFFRES CLÉS DU SITE AFFICHÉ === */
.chiffres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.chiffre {
    background: var(--cs-fond-doux);
    border-radius: 8px;
    padding: 8px 10px;
}

.chiffre .valeur {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.chiffre .libelle {
    font-size: 0.75rem;
    color: var(--cs-gris);
    line-height: 1.25;
}

.rang {
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* === LÉGENDE (panneau) === */
.legende-titre {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.legende-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    padding: 2px 0;
}

.legende-ligne .effectif {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--cs-gris);
}

.pastille {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.pastille.vide {
    background: #fff !important;
    border: 1.5px dashed var(--cs-gris);
    box-shadow: none;
}

.pastille.site {
    border-radius: 2px;
    width: 14px;
    height: 14px;
}

.legende-sites {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cs-filet);
}

/* === BOUTONS (charte : un seul bouton plein) === */
.btn-plein {
    background: var(--cs-turquoise-texte);
    border: 2px solid var(--cs-turquoise-texte);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
}

.btn-plein:hover, .btn-plein:focus {
    background: var(--cs-ardoise);
    border-color: var(--cs-ardoise);
    color: #fff;
}

.btn-contour {
    background: #fff;
    border: 2px solid var(--cs-turquoise-texte);
    color: var(--cs-turquoise-texte);
    font-weight: 700;
    border-radius: 8px;
}

.btn-contour:hover, .btn-contour:focus {
    background: var(--cs-brume);
    color: var(--cs-ardoise);
    border-color: var(--cs-ardoise);
}

.btn-lien {
    background: none;
    border: none;
    color: var(--cs-turquoise-texte);
    text-decoration: underline;
    font-weight: 600;
}

.btn-lien:hover {
    color: var(--cs-ardoise);
    text-decoration-thickness: 2px;
}

.compte, .signature {
    font-size: 0.8rem;
    color: var(--cs-gris);
}

.compte a, .signature a, .modal a {
    color: var(--cs-turquoise-texte);
}

.page-etude .accordion-button {
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--cs-fond-doux);
}

/* === CHARGEMENT === */
.chargement {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
    background: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
}

/* === MARQUEURS : symbole visible, cible tactile de 32 px (charte § 8) === */
.marqueur-tactile {
    background: none;
    border: none;
}

.marqueur-tactile .rond {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.marqueur-tactile .rond.vide {
    background: #fff !important;
    border: 1.5px dashed var(--cs-gris);
    box-shadow: none;
}

.marqueur-tactile:hover .rond, .marqueur-tactile.selectionne .rond {
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    box-shadow: 0 0 0 2px var(--cs-ardoise);
}

.marqueur-site {
    background: none;
    border: none;
}

.marqueur-site .carre {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.etiquette-site.leaflet-tooltip {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-encre);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cs-filet);
    border-radius: 6px;
    padding: 1px 6px;
    box-shadow: none;
}

.etiquette-site.leaflet-tooltip::before {
    display: none;
}

.etiquette-site.choisi {
    font-weight: 700;
    color: #fff;
    background: var(--cs-turquoise-texte);
    border-color: var(--cs-turquoise-texte);
}

.etiquette-site.actuel {
    color: #fff;
    background: var(--cs-ardoise);
    border-color: var(--cs-ardoise);
}

/* === FICHE COLLABORATEUR (popup) === */
.fiche h3 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 2px;
}

.fiche .adresse {
    font-size: 0.8rem;
    color: var(--cs-gris);
    margin-bottom: 6px;
}

.fiche .profil {
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.fiche table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.fiche th {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--cs-gris);
    text-align: right;
    padding: 2px 4px;
    border-bottom: 2px solid var(--cs-turquoise);
}

.fiche th:first-child, .fiche td:first-child {
    text-align: left;
    white-space: normal;
}

.fiche td {
    white-space: nowrap;
    padding: 3px 4px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--cs-filet);
}

.fiche tr.mode-actuel td {
    font-weight: 700;
    background: var(--cs-brume);
}

.fiche .conclusion {
    margin-top: 6px;
    font-size: 0.82rem;
}

.ecart-gagne { color: #1B6B2E; }
.ecart-perd { color: #A42333; }

/* === SYNTHÈSE === */
.page-etude .modal-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.synthese-intro {
    font-size: 0.9rem;
    color: #444;
    max-width: 90ch;
}

.table-synthese {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.table-synthese th, .table-synthese td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cs-filet);
    vertical-align: middle;
}

.table-synthese thead th {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--cs-fond-doux);
    border-bottom: 2px solid var(--cs-turquoise);
    text-align: right;
    vertical-align: bottom;
}

.table-synthese thead th .rang-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cs-gris);
}

.table-synthese thead th.actuel {
    color: var(--cs-ardoise);
}

.table-synthese td.nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table-synthese td.meilleur {
    font-weight: 700;
    background: var(--cs-brume);
}

.table-synthese tr.groupe th {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cs-turquoise-texte);
    padding-top: 14px;
    border-bottom: 1px solid var(--cs-filet);
    text-align: left;
}

.table-synthese th[scope="row"] {
    font-weight: 400;
    text-align: left;
}

.barre {
    display: flex;
    height: 12px;
    border-radius: 3px;
    overflow: hidden;
    min-width: 90px;
    background: var(--cs-filet);
}

.barre span {
    display: block;
    height: 100%;
}

.synthese-notes {
    font-size: 0.8rem;
    color: var(--cs-gris);
    margin-top: 10px;
}

.methode dt {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 10px;
}

.methode dd {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: #444;
}

/* === IMPRESSION : seule la synthèse === */
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    body.impression-synthese > *:not(#modal-synthese) { display: none !important; }
    body.impression-synthese #modal-synthese {
        position: static !important;
        display: block !important;
        overflow: visible !important;
    }
    body.impression-synthese .modal-dialog { max-width: none; margin: 0; }
    body.impression-synthese .modal-content { border: none; box-shadow: none; }
    body.impression-synthese .modal-body { overflow: visible !important; }
    body.impression-synthese .no-print, body.impression-synthese .btn-close { display: none !important; }
    body.impression-synthese .modal-backdrop { display: none !important; }
    .table-synthese { font-size: 9pt; }
    .barre span, .pastille { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table-synthese td.meilleur, .table-synthese thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* === PAGE « MES ÉTUDES » (app.php) === */
body.page-liste-body {
    overflow: auto;
    background: var(--cs-fond-doux);
}

.page-liste {
    max-width: 760px;
    margin: 48px auto;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid var(--cs-filet);
    border-radius: 12px;
}

.liste-etudes {
    list-style: none;
    padding: 0;
}

.liste-etudes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--cs-filet);
}

.liste-etudes a {
    color: var(--cs-turquoise-texte);
    font-weight: 600;
}

/* Fond OpenStreetMap passé en gris : les couleurs restent aux points */
.leaflet-tile-pane .fond-gris {
    filter: grayscale(1) contrast(0.8) brightness(1.08);
}

/* Légende compacte sur la carte : téléphone seulement (sur ordinateur, elle est dans le panneau) */
.legende-mobile {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    max-width: 220px;
    cursor: pointer;
}

.legende-mobile .legende-titre {
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.legende-mobile .legende-ligne {
    font-size: 0.72rem;
    padding: 0;
}

.legende-mobile .pastille {
    width: 10px;
    height: 10px;
}

/* Rappel des zones accessibles affichées (une ligne : mode, puis les paliers) */
.legende-zones-mobile {
    font-size: 0.72rem;
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px solid var(--cs-filet, #E9ECEF);
}

.legende-zones-mobile .paliers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.legende-zones-mobile .paliers > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

@media (min-width: 769px) {
    .legende-mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    .fiche table { font-size: 0.74rem; }
    .fiche th { font-size: 0.66rem; }
    .leaflet-popup-content { margin: 8px; }

    /* Téléphone : cibles tactiles d’au moins 44 px (croix du panneau et des fenêtres, boutons de la carte) — 06/10/2026 */
    #sidebar-toggle { min-width: 44px; min-height: 44px; }
    .modal .btn-close { box-sizing: border-box; flex-shrink: 0; width: 44px; height: 44px; padding: 0; }
    body.page-etude .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
    body.page-etude .leaflet-control-zoom-in,
    body.page-etude .leaflet-control-zoom-out { font-size: 24px; }
    body.page-etude .leaflet-bar a.bouton-carte { background-size: 20px 20px; }
    /* La légende (en bas à gauche) ne recouvre plus les crédits du fond de carte (en bas à droite, sur toute la largeur) */
    body.page-etude .leaflet-bottom.leaflet-left .legende-mobile { margin-bottom: 26px; }
}

/* Synthèse en plein écran sous 1200 px (modal-fullscreen-xl-down) : à l’impression, la fenêtre reprend sa hauteur naturelle */
@media print {
    body.impression-synthese .modal-dialog,
    body.impression-synthese .modal-content { width: auto !important; height: auto !important; }
}

/* === TABLEAUX DE SYNTHÈSE : en-têtes et première colonne figés (05/10/2026, demande de Matthieu) ===
   Le conteneur qui défile est .defilement-tableau (dans les deux sens), pas la page ni la fenêtre :
   c'est lui qui porte le sticky. */
.defilement-tableau {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid var(--cs-filet);
    border-radius: 8px;
    margin-bottom: 8px;
}

.defilement-tableau .table-synthese thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cs-fond-doux);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.defilement-tableau .table-synthese tr.groupe .groupe-titre {
    /* Titre de groupe : c'est le texte qui reste à gauche, pas la cellule qui couvre toute la ligne */
    position: sticky;
    left: 8px;
}

.defilement-tableau .table-synthese th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    min-width: 150px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.defilement-tableau .table-synthese thead th.coin {
    left: 0;
    z-index: 3;
    text-align: left;
    color: var(--cs-gris);
    font-weight: 600;
}

.table-synthese thead th { min-width: 100px; }

.synthese-sous-titre {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 24px 0 6px;
    padding-top: 12px;
    border-top: 2px solid var(--cs-turquoise);
}

.synthese-scenario {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cs-turquoise-texte);
    margin: 14px 0 6px;
}

.evolution { font-weight: 600; }
.evolution.monte { color: #1B6B2E; }
.evolution.descend { color: #A42333; }

.repartition {
    font-size: 0.72rem;
    color: var(--cs-gris);
    margin-top: 3px;
    text-align: left;
}

.pastille.zone {
    border-radius: 2px;
    border-width: 1.5px;
    border-style: solid;
    box-shadow: none;
}

@media print {
    .defilement-tableau { overflow: visible !important; max-height: none !important; border: none; }
    .table-synthese thead { display: table-header-group; }
    .defilement-tableau .table-synthese thead th,
    .defilement-tableau .table-synthese th[scope="row"],
    .defilement-tableau .table-synthese tr.groupe .groupe-titre { position: static; box-shadow: none; }
    .table-synthese tr { break-inside: avoid; }
    .synthese-sous-titre { break-before: page; }
    .repartition, .evolution { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.legende-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

.legende-modes > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legende-modes .pastille { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* === BANDEAU D'OFFRE : démonstrations publiques seulement (06/10/2026, décision de Matthieu) ===
   Le bandeau ne recouvre rien : il occupe le haut de la page et décale d'autant la carte, le panneau,
   le bouton d'ouverture du panneau et les messages. Sa hauteur réelle (une ligne sur ordinateur et
   tablette, deux sur téléphone) est mesurée par etude.js ; les valeurs ci-dessous servent d'attente. */
:root {
    --hauteur-bandeau: 0px;
}

body.avec-bandeau {
    --hauteur-bandeau: 46px;
}

.bandeau-offre {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040; /* au-dessus du panneau (1000), sous les fenêtres Bootstrap (1050 et plus) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding: 6px 56px 6px 16px;
    background: var(--cs-brume);
    border-bottom: 1px solid #C9E8E8;
    font-size: 0.875rem;
}

.bandeau-texte {
    margin: 0;
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    color: var(--cs-ardoise);
    line-height: 1.3;
}

.bandeau-texte .prix {
    color: var(--cs-turquoise-texte);
    white-space: nowrap;
}

.bandeau-actions {
    display: flex;
    gap: 8px;
}

.bandeau-actions .btn {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    white-space: nowrap;
}

.btn-lien-bandeau {
    color: var(--cs-turquoise-texte);
    font-weight: 600;
    text-decoration: underline;
    border: 2px solid transparent;
}

.btn-lien-bandeau:hover, .btn-lien-bandeau:focus {
    color: var(--cs-ardoise);
    text-decoration-thickness: 2px;
}

.bandeau-fermer {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--cs-gris);
}

.bandeau-fermer:hover, .bandeau-fermer:focus-visible {
    background: rgba(44, 62, 80, 0.08);
    color: var(--cs-ardoise);
}

body.avec-bandeau #map {
    top: var(--hauteur-bandeau);
}

body.avec-bandeau #sidebar {
    top: var(--hauteur-bandeau);
    bottom: 0;
    height: auto;
}

body.avec-bandeau #sidebar-open-btn {
    top: calc(var(--hauteur-bandeau) + 12px);
}

body.avec-bandeau #toast-container {
    top: calc(var(--hauteur-bandeau) + 20px);
}

/* Téléphone : le texte sur une ligne, puis les deux boutons et la croix (cibles de 44 px) */
@media (max-width: 768px) {
    body.avec-bandeau {
        --hauteur-bandeau: 84px;
    }

    .bandeau-offre {
        justify-content: flex-start;
        gap: 4px 8px;
        padding: 6px 8px 6px 12px;
        font-size: 0.8125rem;
    }

    .bandeau-texte {
        flex: 1 1 100%;
        font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
        font-weight: 700;
    }

    .bandeau-actions {
        flex: 1 1 0;
        min-width: 0;
    }

    .bandeau-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 6px;
    }

    .bandeau-fermer {
        position: static;
        transform: none;
        flex: 0 0 44px;
    }
}

@media print {
    .bandeau-offre { display: none !important; }
}