/* === Adresses utiles (adressesUtiles.tmpl) ===
 *
 * Passe graphique de Claude Design (A2c, 03/10) : une liste par echelon sur
 * une frise, une ligne par service, et le detail du service choisi dans une
 * colonne fixe a droite, ou un panneau qui monte du bas sous 968px, le palier
 * de la fiche. Les details sont tous rendus, caches : sans JS, l'ancre visee
 * (:target) montre le sien ; avec, la page prend la classe .js et le script
 * pose .actif. */

/* Large comme les pages de listes (browse-layout.css). */
.carnet-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 22px 40px;
    box-sizing: border-box;
    font-family: var(--ex-font);
    color: var(--ex-stone-800);
}

.carnet-page a { color: var(--ex-link); text-decoration: none; }
.carnet-page a:hover { color: var(--ex-link-hover); }

/* hidden doit l'emporter sur les display de cette feuille : filtres caches
 * sans JS, lignes et echelons filtres, carte sans bureau situe. */
.carnet-page [hidden] { display: none !important; }

/* Le panneau mobile ouvert fige la page dessous. */
html.carnet-fige { overflow: hidden; }

.carnet-fil {
    font-size: 12px;
    color: var(--ex-stone-500);
    margin-bottom: 14px;
}
.carnet-fil .sep { color: var(--ex-stone-300); margin: 0 4px; }

/* --- Haut de page ------------------------------------------------------------- */

.carnet-haut {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px 24px;
    margin-bottom: 14px;
}

/* common.css centre tous les h1, les colore et leur ajoute des marges : on
 * reprend la main. */
.carnet-titre {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ex-stone-900);
}

.carnet-pour {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ex-stone-600);
}
.carnet-pour a { font-weight: 600; }

.carnet-chercher { font-size: 12.5px; }

.carnet-intro,
.carnet-approche,
.carnet-note,
.carnet-message {
    max-width: 48rem;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ex-stone-600);
}

/* Les micro-etiquettes : mono, capitales. */
.carnet-micro {
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
.carnet-etiquette { color: var(--ex-amber-700); }

/* --- Recherche ------------------------------------------------------------------ */

.carnet-recherche { position: relative; max-width: 40rem; margin: 0 0 16px; }
.carnet-recherche-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ex-stone-500); }
.carnet-recherche-champ { display: flex; gap: 8px; }
.carnet-recherche-champ input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    background: var(--ex-surface);
    color: var(--ex-stone-800);
    font: 14px var(--ex-font);
}
.carnet-recherche-champ input:focus { outline: none; border-color: var(--ex-amber-400); box-shadow: var(--ex-focus-ring); }
.carnet-recherche-champ button {
    padding: 8px 16px;
    border: 1px solid var(--ex-stone-300);
    border-radius: 8px;
    background: var(--ex-surface);
    color: var(--ex-stone-700);
    font: 13px var(--ex-font);
    cursor: pointer;
}
.carnet-suggestions {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    box-shadow: var(--ex-shadow-md);
}
.carnet-suggestions a { display: block; padding: 6px 12px; font-size: 13.5px; color: var(--ex-stone-700); }
.carnet-suggestions a:hover,
.carnet-suggestions a:focus { background: var(--ex-stone-50); }
.carnet-suggestions .carnet-genre,
.carnet-choix .carnet-micro { margin-right: 6px; }
.carnet-precision { font-size: 12px; color: var(--ex-stone-500); }
.carnet-choix { max-width: 40rem; margin: 0 0 16px; padding: 0; list-style: none; }
.carnet-choix li { padding: 6px 0; border-bottom: 1px solid var(--ex-stone-100); font-size: 13.5px; }

/* --- Filtres et activites ------------------------------------------------------- */

.carnet-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* Le controle segmente : les filtres par nature (pkg/tag). */
.carnet-filtres {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 10px;
    background: var(--ex-stone-100);
}
/* La bordure existe toujours, transparente au repos : sans elle, le survol
 * de common.css (button:hover, bordure de 2px et fond --main-color-orange-2,
 * qui est vert) faisait sauter la ligne. Survol et choix en ambre. */
.carnet-filtre {
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ex-stone-700);
    font: 500 12.5px var(--ex-font);
    cursor: pointer;
}
.carnet-page .carnet-filtre:hover {
    border: 1px solid var(--ex-amber-200);
    background: var(--ex-amber-50);
    color: var(--ex-amber-900);
}
.carnet-page .carnet-filtre:active { background: var(--ex-amber-100); }
.carnet-page .carnet-filtre:focus { box-shadow: none; }
.carnet-page .carnet-filtre:focus-visible { outline: none; box-shadow: var(--ex-focus-ring); }
.carnet-page .carnet-filtre[aria-pressed="true"] {
    border: 1px solid var(--ex-amber-300);
    background: var(--ex-amber-100);
    color: var(--ex-amber-900);
    font-weight: 600;
}

.carnet-menu { position: relative; }
.carnet-menu > summary {
    padding: 6px 12px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    background: var(--ex-surface);
    font-size: 13px;
    list-style: none;
    cursor: pointer;
}
.carnet-menu > summary::-webkit-details-marker { display: none; }
.carnet-menu-signe { color: var(--ex-stone-500); }
.carnet-menu-liste {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    display: flex;
    flex-direction: column;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 10px;
    background: var(--ex-surface);
    box-shadow: var(--ex-shadow-md);
}
.carnet-menu-liste a { padding: 5px 8px; border-radius: 6px; font-size: 13px; color: var(--ex-stone-700); }
.carnet-menu-liste a:hover { background: var(--ex-stone-50); color: var(--ex-stone-900); }
.carnet-menu-liste a.actif { background: var(--ex-amber-50); color: var(--ex-amber-900); font-weight: 600; }
.carnet-menu-liste .carnet-menu-sous { padding-left: 22px; font-size: 12.5px; }

/* --- La liste : une frise d'echelons -------------------------------------------- */

.carnet-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 22px;
    align-items: start;
}

.carnet-echelon {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 0 12px;
    padding-bottom: 18px;
}
/* Le trait de la frise, d'un point a l'autre. */
.carnet-echelon::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: 0;
    border-left: 2px solid var(--ex-amber-200);
}
.carnet-echelon:last-of-type::before { display: none; }

.carnet-frise { position: relative; padding-left: 20px; }
.carnet-frise::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ex-amber-400);
}
.carnet-frise h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--ex-stone-900); }
.carnet-frise p { margin: 2px 0 0; font-size: 12px; color: var(--ex-stone-500); }

.carnet-lignes {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    background: var(--ex-surface);
}
.carnet-lignes li + li { border-top: 1px solid var(--ex-stone-100); }

/* La ligne : le texte en entier, puis le lieu sur une seconde ligne, aligne a
 * droite ; la fleche a droite des deux. */
.carnet-page .carnet-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    grid-template-areas: "texte fleche" "bureau fleche";
    align-items: center;
    gap: 4px 12px;
    padding: 10px 14px;
    color: inherit;
}
.carnet-page .carnet-ligne:hover { background: var(--ex-stone-50); color: inherit; }
.carnet-page .carnet-ligne.actif { background: var(--ex-amber-50); }
.carnet-ligne.actif .carnet-ligne-nom { color: var(--ex-amber-900); }

.carnet-ligne-texte { grid-area: texte; display: flex; flex-direction: column; min-width: 0; }
.carnet-ligne-nom { font-size: 13.5px; font-weight: 700; color: var(--ex-stone-900); }
.carnet-ligne-usage { font-size: 12px; line-height: 1.5; color: var(--ex-stone-500); }
.carnet-ligne-bureau {
    grid-area: bureau;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 8px;
    min-width: 0;
    text-align: right;
}
.carnet-bureau {
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ex-stone-700);
}
.carnet-km { font-family: var(--ex-mono); font-size: 11.5px; color: var(--ex-stone-500); white-space: nowrap; }
.carnet-plus { display: none; font-family: var(--ex-mono); font-size: 11.5px; color: var(--ex-link); }
.carnet-fleche { grid-area: fleche; font-family: var(--ex-mono); color: var(--ex-amber-700); visibility: hidden; }
.carnet-ligne.actif .carnet-fleche { visibility: visible; }

.carnet-source { margin: 4px 0 0 162px; font-size: 11.5px; color: var(--ex-stone-500); }
.carnet-filtre-vide { font-size: 13px; color: var(--ex-stone-600); }

/* --- Le detail -------------------------------------------------------------------- */

.carnet-detail { position: sticky; top: 16px; }

.carnet-panneau {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 32px);
    border: 1px solid var(--ex-stone-200);
    border-radius: 14px;
    background: var(--ex-surface);
    box-shadow: var(--ex-shadow-md);
}
.carnet-panneau:focus { outline: none; }

/* Voile, poignee et croix ne servent qu'au panneau mobile. */
.carnet-voile,
.carnet-poignee,
.carnet-page .carnet-fermer { display: none; }

.carnet-carte { position: relative; height: 150px; background: var(--ex-stone-100); }
.carnet-carte-fond { position: absolute; inset: 0; }
.carnet-carte-legende {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 500; /* au-dessus des couches de Leaflet */
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ex-surface);
    font-family: var(--ex-mono);
    font-size: 10.5px;
    color: var(--ex-stone-700);
}
.carnet-carte .leaflet-control-attribution { font-size: 9.5px; }

/* Les marqueurs : le bureau en ambre borde de noir, la commune en blanc. */
.carnet-marqueur {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ex-stone-900);
    border-radius: 50%;
    background: var(--ex-amber-400);
}
.carnet-marqueur-commune { border-color: var(--ex-stone-600); background: var(--ex-surface); }
.carnet-carte .leaflet-tooltip.carnet-bulle {
    padding: 1px 5px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 4px;
    background: var(--ex-surface);
    box-shadow: none;
    font-family: var(--ex-mono);
    font-size: 10.5px;
    color: var(--ex-stone-700);
}
.carnet-carte .leaflet-tooltip.carnet-bulle::before { display: none; }

.carnet-service { display: none; padding: 16px 20px 0; }

/* Sans JS : l'ancre visee montre son detail (ou celui qui l'heberge, pour un
 * service fusionne), le premier service de l'activite sinon. */
.carnet-page:not(.js) .carnet-service:target,
.carnet-page:not(.js) .carnet-service:has(:target) { display: block; }
.carnet-page:not(.js) .carnet-detail:not(:has(:target)) .carnet-service.defaut { display: block; }
/* Avec JS : le detail que le script pose. */
.carnet-page.js .carnet-service.actif { display: block; }

.carnet-micros { display: flex; gap: 8px; margin: 0 0 6px; }
.carnet-service-nom { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ex-stone-900); }
.carnet-service-usage { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--ex-stone-700); }

.carnet-rangees { margin: 0; }
.carnet-rangees > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--ex-stone-100);
}
.carnet-rangees dt {
    padding-top: 2px;
    font-family: var(--ex-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
.carnet-rangees dd { min-width: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ex-stone-800); }
.carnet-rangees dd p { margin: 0 0 4px; }

.carnet-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.carnet-chip-ligne { max-width: 100%; }
.carnet-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 9px;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    background: var(--ex-stone-50);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}
.carnet-chip-note { font-size: 11.5px; color: var(--ex-stone-500); }

.carnet-horaires {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 12px;
    font-family: var(--ex-mono);
    font-size: 11.5px;
}

.carnet-rattachement { font-size: 12px; color: var(--ex-stone-500); }
.carnet-autres { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.carnet-autres-suite > summary,
.carnet-presentation > summary {
    color: var(--ex-link);
    font-size: 12.5px;
    list-style: none;
    cursor: pointer;
}
.carnet-autres-suite > summary::-webkit-details-marker,
.carnet-presentation > summary::-webkit-details-marker { display: none; }
.carnet-presentation { margin: 4px 0 14px; padding-top: 10px; border-top: 1px solid var(--ex-stone-100); }
.carnet-presentation p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ex-stone-600); white-space: pre-line; }

.carnet-service-pied {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0 -20px;
    padding: 10px 20px;
    border-top: 1px solid var(--ex-stone-200);
    background: var(--ex-stone-50);
    font-size: 12.5px;
}

/* --- Mobile : la liste seule, le detail en panneau ------------------------------ */

@media (max-width: 968px) {
    .carnet-page { padding: 12px 16px 28px; }
    .carnet-haut { flex-direction: column; align-items: flex-start; }
    .carnet-titre { font-size: 21px; }

    /* Les filtres en pilules qui defilent. */
    .carnet-outils { flex-direction: column; align-items: flex-start; }
    .carnet-filtres {
        flex-wrap: nowrap;
        max-width: 100%;
        gap: 6px;
        padding: 0 0 2px;
        overflow-x: auto;
        border: 0;
        background: none;
    }
    .carnet-filtre {
        padding: 8px 14px;
        border: 1px solid var(--ex-stone-200);
        border-radius: 999px;
        background: var(--ex-surface);
        white-space: nowrap;
    }
    .carnet-menu-liste { width: min(320px, calc(100vw - 32px)); }

    .carnet-grille { grid-template-columns: minmax(0, 1fr); }
    .carnet-echelon { grid-template-columns: minmax(0, 1fr); padding-bottom: 16px; }
    .carnet-echelon::before { display: none; }
    .carnet-frise { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; padding-left: 16px; }
    .carnet-frise::before { top: 5px; width: 8px; height: 8px; }
    .carnet-frise h2 { font-size: 16px; }
    .carnet-frise p { margin: 0; }

    /* La meme ligne qu'en large, avec +N et la fleche toujours visible ; une
     * cible d'au moins 44px. */
    .carnet-page .carnet-ligne {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 12px;
        min-height: 44px;
        padding: 10px 14px;
    }
    .carnet-ligne-nom { font-size: 14px; }
    .carnet-plus { display: inline; }
    .carnet-fleche { visibility: visible; color: var(--ex-stone-400); }
    .carnet-source { margin-left: 0; }

    /* Le panneau : ferme par defaut, ouvert par le script (.ouvert) ou, sans
     * JS, par l'ancre visee. */
    .carnet-detail { position: fixed; inset: 0; top: 0; z-index: 1000; display: none; }
    .carnet-page.js .carnet-detail.ouvert,
    .carnet-page:not(.js) .carnet-detail:has(:target) { display: block; }
    .carnet-voile { position: absolute; inset: 0; display: block; background: var(--ex-voile); }
    .carnet-panneau {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 80vh;
        border: 0;
        border-radius: 18px 18px 0 0;
        animation: carnet-monte 0.2s var(--ex-ease);
    }
    .carnet-poignee {
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 4px;
        border-radius: 2px;
        background: var(--ex-stone-300);
    }
    .carnet-page .carnet-fermer {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 600;
        display: block;
        width: 44px;
        height: 44px;
        font-size: 24px;
        line-height: 44px;
        text-align: center;
        color: var(--ex-stone-600);
    }
    .carnet-carte { height: 120px; margin: 4px 12px 0; overflow: hidden; border-radius: 10px; }
    .carnet-service { padding: 12px 16px 0; }

    /* Les rangees en pile, label au-dessus, chips pleine largeur. */
    .carnet-rangees > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .carnet-chips { align-items: stretch; }
    .carnet-chip-ligne { display: block; }
    .carnet-chip { display: flex; width: 100%; padding: 9px 12px; }
    .carnet-service-pied { margin: 0 -16px; padding: 10px 16px 16px; }
}

@keyframes carnet-monte {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .carnet-panneau { animation: none; }
}