/*
 * Portail public — Plateforme de coopération du MINPROFF
 *
 * Direction artistique : « registre officiel ».
 *
 * Le monde de cette Direction est celui de l'acte administratif : en-tête à
 * armoiries, référence numérotée, registre réglé, sceau. La page reprend ce
 * vocabulaire plutôt que celui d'un site vitrine. L'élément signature est le
 * guilloché — le filet entrelacé des documents officiels et des sceaux —
 * tracé en SVG derrière les armoiries et en séparateur de sections.
 *
 * Aucune étape de build, aucun CDN : le portail se déploie par simple copie
 * de fichiers sur un hébergement mutualisé, et n'expose l'adresse IP d'aucun
 * visiteur à un service tiers.
 */

@import url("polices.css");

/* ==================================================================== */
/* Jetons                                                               */
/* ==================================================================== */

:root {
    /* Encre et papier — la base documentaire. */
    --encre: #14231d;
    --encre-douce: #46554e;
    --encre-tenue: #78857f;
    --papier: #fbf8f2;
    --papier-teinte: #f4efe3;
    --papier-vif: #ffffff;

    /* Vert du drapeau, assombri pour tenir en grande surface. */
    --vert: #0b5d3b;
    --vert-fonce: #073d27;
    --vert-clair: #128455;
    --vert-voile: #e7f0ea;

    /* Or ancien : les armoiries, l'étoile, les filets. */
    --or: #b98a21;
    --or-clair: #d8ae4a;
    --or-voile: #f7edd6;

    /* Rouge du drapeau, tiré vers le sang-de-bœuf : réservé à l'alerte. */
    --rouge: #8e2318;
    --rouge-voile: #f8e8e5;

    --regle: #ddd5c4;
    --regle-fine: #e9e2d4;

    /* Familles : display d'ancien style, grotesque de labeur, chasse fixe
       pour les références d'actes — leur alignement en colonne est ce qui
       rend un registre lisible. */
    --serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sans: "Archivo", "Segoe UI", Roboto, system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --largeur: 1160px;
    --largeur-texte: 68ch;
    --gouttiere: clamp(20px, 4vw, 40px);

    --rayon: 3px;
    --ombre-douce: 0 1px 2px rgba(20, 35, 29, .05), 0 8px 28px rgba(20, 35, 29, .05);
    --ombre-portee: 0 2px 6px rgba(20, 35, 29, .07), 0 20px 46px rgba(20, 35, 29, .10);
}

/* ==================================================================== */
/* Base                                                                 */
/* ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.68;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a {
    color: var(--vert);
    text-decoration-color: color-mix(in srgb, var(--vert) 35%, transparent);
    text-underline-offset: .18em;
    transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover { color: var(--vert-fonce); text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 3px;
    border-radius: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--encre);
    line-height: 1.14;
    letter-spacing: -.008em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); }
h3 { font-size: 1.16rem; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--regle); margin: 2.5rem 0; }

.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

/* Surtitre : petite capitale espacée, l'étiquette des documents officiels. */
.surtitre {
    display: block;
    font-family: var(--sans);
    font-size: .705rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--or);
}

.mono { font-family: var(--mono); }

.saut-contenu {
    position: absolute;
    left: -9999px;
    background: var(--encre);
    color: var(--papier);
    padding: 10px 18px;
    z-index: 200;
    font-size: .9rem;
}

.saut-contenu:focus { left: 14px; top: 14px; }

/* ==================================================================== */
/* En-tête officiel : bandeau d'État, armoiries, filet guilloché         */
/* ==================================================================== */

.bandeau-etat {
    background: var(--encre);
    color: #b9c6bf;
    font-size: .72rem;
    letter-spacing: .07em;
    padding: 7px 0;
}

.bandeau-etat .conteneur {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: space-between;
}

.devise-etat {
    text-transform: uppercase;
    font-weight: 500;
}

.devise-etat b {
    color: var(--or-clair);
    font-weight: 600;
}

.bandeau-actions { display: flex; align-items: center; gap: 14px; }

.bandeau-actions a { color: #e2ebe6; text-decoration: none; }
.bandeau-actions a:hover { color: #fff; text-decoration: underline; }

.langues { display: inline-flex; gap: 2px; }

.langues a {
    padding: 2px 9px;
    border: 1px solid rgba(255, 255, 255, .22);
    font-weight: 600;
    letter-spacing: .08em;
}

.langues a:first-child { border-radius: 999px 0 0 999px; }
.langues a:last-child { border-radius: 0 999px 999px 0; }

.langues a[aria-current="true"] {
    background: var(--or);
    border-color: var(--or);
    color: var(--encre);
}

/* En-tête : le bloc d'identité, centré comme sur un papier à lettre. */
.entete { background: var(--papier); }

.entete-corps {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 22px 0 18px;
}

.marque {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

.marque:hover { color: inherit; }

.marque .armoiries { width: 54px; flex: none; }

.marque .intitule {
    font-family: var(--serif);
    line-height: 1.2;
    text-align: left;
}

.marque .intitule .ministere {
    display: block;
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: .005em;
}

.marque .intitule .direction {
    display: block;
    font-family: var(--sans);
    font-size: .715rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--encre-tenue);
    margin-top: 3px;
}

.entete-cote { display: flex; align-items: center; }
.entete-cote:last-of-type { grid-column: 3; justify-content: flex-end; }

/* Le filet guilloché sépare l'en-tête du corps, comme la ligne gravée qui
   ferme un en-tête officiel. */
.filet-guilloche {
    display: block;
    width: 100%;
    height: 13px;
    color: var(--or);
    opacity: .62;
}

.filet-guilloche + .nav-principale { border-top: 0; }

/* ==================================================================== */
/* Navigation                                                           */
/* ==================================================================== */

.nav-principale {
    background: var(--papier);
    border-bottom: 1px solid var(--regle);
    position: sticky;
    top: 0;
    z-index: 40;
}

.nav-principale .conteneur { display: flex; justify-content: center; }

.nav-principale ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principale a {
    display: block;
    padding: 13px 15px;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--encre-douce);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav-principale a:hover {
    color: var(--vert-fonce);
    border-bottom-color: var(--regle);
}

.nav-principale a[aria-current="page"] {
    color: var(--vert-fonce);
    font-weight: 600;
    border-bottom-color: var(--or);
}

.bouton-menu {
    display: none;
    background: none;
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    padding: 9px 14px;
    font: inherit;
    font-size: .85rem;
    color: var(--encre);
    cursor: pointer;
}

@media (max-width: 980px) {
    .entete-corps { grid-template-columns: auto 1fr; padding-block: 16px; }
    .marque { grid-column: 1; }
    .entete-cote:last-of-type { grid-column: 2; }
    .marque .intitule .ministere { font-size: .95rem; }
    .bouton-menu { display: block; }
    .nav-principale { position: static; }
    .nav-principale .conteneur { display: none; }
    .nav-principale.ouvert .conteneur { display: block; padding-block: 8px; }
    .nav-principale ul { flex-direction: column; align-items: stretch; }
    .nav-principale a { padding: 11px 4px; border-bottom: 1px solid var(--regle-fine); }
}

/* ==================================================================== */
/* Frontispice                                                          */
/* ==================================================================== */

/* ==================================================================== */
/* Hero : le pays teinté par la présence des partenaires                */
/* ==================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(120% 90% at 78% 12%, rgba(185, 138, 33, .26), transparent 58%),
        linear-gradient(158deg, #0d3d2a 0%, var(--vert-fonce) 46%, #052419 100%);
    color: #e3ede8;
    padding: clamp(48px, 6vw, 84px) 0 clamp(92px, 9vw, 132px);
    overflow: hidden;
}

/* Rosace guillochée en filigrane : le motif des sceaux, assez discret pour
   rester une texture et non un ornement. */
.hero::before {
    content: "";
    position: absolute;
    inset: -22% -30% auto auto;
    width: min(760px, 78vw);
    aspect-ratio: 1;
    background: url("../images/guilloche.svg") center / contain no-repeat;
    opacity: .13;
    z-index: -1;
    pointer-events: none;
}

.hero-corps {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(30px, 5vw, 74px);
    align-items: center;
}

.hero .surtitre { color: var(--or-clair); }

.hero h1 {
    color: #fff;
    margin-bottom: .36em;
    font-size: clamp(2.2rem, 4.6vw, 3.5rem);
}

.hero h1 em {
    font-style: italic;
    color: var(--or-clair);
}

.accroche {
    font-size: 1.08rem;
    color: #b9cec4;
    max-width: 50ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* --- Carte ---------------------------------------------------------- */

.hero-carte { display: flex; justify-content: center; }

.carte-cmr {
    margin: 0;
    width: 100%;
    max-width: 340px;
}

.carte-cmr svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .32));
    overflow: visible;
}

.carte-cmr .region {
    stroke: rgba(255, 255, 255, .55);
    stroke-width: 1.6;
    stroke-linejoin: round;
    transition: fill .2s ease, transform .2s ease;
    transform-origin: center;
}

/* Quatre paliers seulement : au-delà, l'œil ne distingue plus les nuances. */
.carte-cmr .palier-0 { fill: rgba(255, 255, 255, .09); }
.carte-cmr .palier-1 { fill: rgba(216, 174, 74, .32); }
.carte-cmr .palier-2 { fill: rgba(216, 174, 74, .62); }
.carte-cmr .palier-3 { fill: var(--or-clair); }

.carte-cmr .region:hover { fill: #fff; }

.carte-cmr-legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 18px;
    font-size: .74rem;
    color: #9ab3a7;
}

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

.carte-cmr-legende i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, .35);
}

.carte-cmr-legende .palier-0 { background: rgba(255, 255, 255, .09); }
.carte-cmr-legende .palier-1 { background: rgba(216, 174, 74, .32); }
.carte-cmr-legende .palier-2 { background: rgba(216, 174, 74, .62); }
.carte-cmr-legende .palier-3 { background: var(--or-clair); }

@media (prefers-reduced-motion: no-preference) {
    .hero-propos > * { animation: monte .7s ease-out both; }
    .hero-propos > *:nth-child(2) { animation-delay: .07s; }
    .hero-propos > *:nth-child(3) { animation-delay: .14s; }
    .hero-propos > *:nth-child(4) { animation-delay: .21s; }
    .carte-cmr { animation: monte .9s ease-out .1s both; }
}

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

@media (max-width: 900px) {
    .hero-corps { grid-template-columns: 1fr; }
    .hero-carte { order: -1; }
    .carte-cmr { max-width: 210px; }
    .carte-cmr svg { max-height: 40vh; }
}

/* ==================================================================== */
/* État du portefeuille : mesures alignées, séparées par des filets      */
/* ==================================================================== */

/* Le relevé chevauche le bas du hero : la charnière entre l'image du pays
   et les chiffres qui la commentent. */
.releve {
    position: relative;
    z-index: 2;
    margin-top: clamp(-96px, -8vw, -64px);
    margin-bottom: clamp(20px, 3vw, 34px);
    background: var(--papier-vif);
    border: 1px solid var(--regle);
    border-radius: 6px;
    box-shadow: var(--ombre-portee);
    padding: 24px clamp(20px, 3vw, 34px) 26px;
}

.releve-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.releve-entete .date {
    font-family: var(--mono);
    font-size: .74rem;
    color: var(--encre-tenue);
    letter-spacing: .02em;
}

.mesures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
}

.mesure {
    padding: 4px 22px;
    border-left: 1px solid var(--regle-fine);
}

.mesure:first-child { border-left: 0; padding-left: 0; }

.mesure .valeur {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--vert-fonce);
    letter-spacing: -.015em;
}

/* L'unité passe sous le nombre : « 8,89 Md FCFA » ne tient pas sur une ligne
   dans une colonne de relevé. */
.mesure .valeur small {
    display: block;
    font-family: var(--sans);
    font-size: .38em;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--encre-douce);
    margin-top: 3px;
}

.mesure .valeur small.sur {
    display: inline;
    font-family: var(--serif);
    font-size: .55em;
    color: var(--encre-tenue);
    margin: 0;
}

.mesure .libelle {
    display: block;
    font-size: .755rem;
    letter-spacing: .05em;
    color: var(--encre-tenue);
    margin-top: 6px;
}

@media (max-width: 640px) {
    .mesure { padding-inline: 0; border-left: 0; border-top: 1px solid var(--regle-fine); padding-block: 12px; }
    .mesure:first-child { border-top: 0; }
}

/* ==================================================================== */
/* Registre des conventions                                             */
/* ==================================================================== */

.registre { border-top: 1px solid var(--encre); }

.registre-ligne {
    display: grid;
    grid-template-columns: minmax(190px, 210px) minmax(0, 1fr) 130px 128px;
    gap: 18px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--regle-fine);
    text-decoration: none;
    color: inherit;
    transition: background .14s ease, padding-inline .14s ease;
}

a.registre-ligne:hover {
    background: var(--papier-teinte);
    padding-inline: 12px;
    color: inherit;
}

.registre-ligne .reference {
    font-family: var(--mono);
    font-size: .755rem;
    letter-spacing: -.01em;
    color: var(--vert);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.registre-ligne .objet { font-size: .95rem; }

.registre-ligne .objet .partenaire {
    display: block;
    font-family: var(--serif);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.3;
}

.registre-ligne .objet .intitule {
    display: block;
    color: var(--encre-tenue);
    font-size: .855rem;
    margin-top: 2px;
}

.registre-ligne .periode {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--encre-douce);
    white-space: nowrap;
}

.registre-ligne .montant {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.registre-entete {
    display: grid;
    grid-template-columns: minmax(190px, 210px) minmax(0, 1fr) 130px 128px;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--encre);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--encre-tenue);
}

.registre-entete span:last-child { text-align: right; }

@media (max-width: 860px) {
    .registre-entete { display: none; }
    .registre-ligne { grid-template-columns: 1fr auto; gap: 6px 14px; }
    .registre-ligne .reference { grid-column: 1 / -1; }
    .registre-ligne .objet { grid-column: 1 / -1; }
    .registre-ligne .montant { text-align: left; }
}

/* ==================================================================== */
/* Sections                                                             */
/* ==================================================================== */

.section { padding: clamp(44px, 5vw, 68px) 0; }
.section-serree { padding: 0 0 clamp(18px, 2.5vw, 28px); }
.section-alt { background: var(--papier-teinte); }

.section-encre {
    background: var(--encre);
    color: #d3ddd8;
}

.section-encre h2, .section-encre h3 { color: var(--papier); }
.section-encre a { color: var(--or-clair); }
.section-encre .surtitre { color: var(--or-clair); }

.section-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.section-entete h2 { margin-bottom: .12em; }
.section-entete .surtitre { margin-bottom: 10px; }

.section-entete p {
    color: var(--encre-tenue);
    margin: 0;
    max-width: 58ch;
    font-size: .95rem;
}

.section-encre .section-entete p { color: #a7b6af; }

.lien-suite {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.lien-suite::after { content: " →"; }

/* ==================================================================== */
/* Grilles et cartes                                                    */
/* ==================================================================== */

.grille { display: grid; gap: 22px; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.carte {
    background: var(--papier-vif);
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.carte h3 { margin: 0; }
.carte p { color: var(--encre-douce); font-size: .92rem; margin: 0; }

.carte .pied {
    margin-top: auto;
    padding-top: 14px;
    font-size: .8rem;
    color: var(--encre-tenue);
}

.carte-lien {
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.carte-lien:hover {
    color: inherit;
    border-color: var(--or);
    box-shadow: var(--ombre-douce);
    transform: translateY(-2px);
}

.section-alt .carte { background: var(--papier); }

/* Axes de coopération : tuiles portant chacune la couleur de son axe, celle
   qui sert aussi de légende sur la cartographie. */
.grille-axes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 18px;
}

.tuile-axe {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px 22px 20px;
    background: var(--papier-vif);
    border: 1px solid var(--regle);
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.tuile-axe:hover {
    color: inherit;
    border-color: var(--teinte);
    box-shadow: var(--ombre-douce);
    transform: translateY(-2px);
}

.tuile-axe-filet {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--teinte);
}

.tuile-axe-rang {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .04em;
    color: var(--teinte);
}

.tuile-axe h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.28;
}

.tuile-axe-chiffres {
    margin-top: auto;
    font-size: .81rem;
    color: var(--encre-tenue);
}

.tuile-axe-chiffres strong {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--encre);
    margin-right: 2px;
}

.tuile-axe-chiffres em {
    font-style: normal;
    display: block;
    font-family: var(--mono);
    font-size: .72rem;
    margin-top: 2px;
}

.tuile-axe-jauge {
    display: block;
    height: 2px;
    background: var(--regle-fine);
    position: relative;
}

.tuile-axe-jauge i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: var(--teinte);
}

/* Panneau : conteneur clair pour un tableau posé sur fond teinté. */
.panneau {
    background: var(--papier-vif);
    border: 1px solid var(--regle);
    border-radius: 5px;
    padding: 4px clamp(16px, 2.4vw, 26px) 8px;
    box-shadow: var(--ombre-douce);
}

.panneau .registre { border-top: 0; }

/* Liste de documents : titre à gauche, format à droite, filet entre. */
.liste-documents { list-style: none; margin: 0; padding: 0; }

.liste-documents li { border-bottom: 1px solid var(--regle-fine); }

.liste-documents a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
}

.liste-documents a:hover .titre { color: var(--vert); text-decoration: underline; }

.liste-documents .titre { font-size: .93rem; }

.liste-documents .meta {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--encre-tenue);
    white-space: nowrap;
}

/* ==================================================================== */
/* Partenaires                                                          */
/* ==================================================================== */

.logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 1px;
    background: var(--regle-fine);
    border: 1px solid var(--regle-fine);
}

.logo-partenaire {
    background: var(--papier);
    padding: 20px 14px;
    text-align: center;
    text-decoration: none;
    color: var(--encre);
    display: grid;
    place-content: center;
    gap: 5px;
    min-height: 92px;
    transition: background .14s ease;
}

.logo-partenaire:hover { background: var(--papier-vif); color: var(--vert-fonce); }

.logo-partenaire .sigle {
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.2;
}

.logo-partenaire .genre {
    font-size: .685rem;
    letter-spacing: .07em;
    color: var(--encre-tenue);
}

.section-alt .logo-partenaire { background: var(--papier-teinte); }
.section-alt .logo-partenaire:hover { background: var(--papier); }

/* ==================================================================== */
/* Boutons                                                              */
/* ==================================================================== */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bouton-primaire { background: var(--vert); color: #fff; }
.bouton-primaire:hover { background: var(--vert-fonce); color: #fff; }

.bouton-or { background: var(--or); color: var(--encre); }
.bouton-or:hover { background: var(--or-clair); color: var(--encre); }

.bouton-fantome {
    background: transparent;
    color: var(--encre);
    border-color: var(--regle);
}

.bouton-fantome:hover { border-color: var(--encre); background: var(--papier-vif); color: var(--encre); }

.bouton-clair {
    background: transparent;
    color: var(--papier);
    border-color: rgba(255, 255, 255, .35);
}

.bouton-clair:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ==================================================================== */
/* Étiquettes                                                           */
/* ==================================================================== */

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 2px;
    font-size: .715rem;
    font-weight: 600;
    letter-spacing: .03em;
    background: var(--vert-voile);
    color: var(--vert-fonce);
}

.etiquette-or { background: var(--or-voile); color: #7a5a05; }
.etiquette-rouge { background: var(--rouge-voile); color: var(--rouge); }

.etiquette-gris {
    background: transparent;
    color: var(--encre-tenue);
    border: 1px solid var(--regle);
}

.pastille {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}

/* ==================================================================== */
/* Formulaires                                                          */
/* ==================================================================== */

.champ { margin-bottom: 18px; }

.champ label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    margin-bottom: 6px;
}

.champ .aide { font-size: .79rem; color: var(--encre-tenue); margin-top: 5px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    background: var(--papier-vif);
    color: var(--encre);
    font: inherit;
    font-size: .93rem;
}

input:hover, select:hover, textarea:hover { border-color: var(--encre-tenue); }

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--vert);
    outline-offset: 0;
    border-color: var(--vert);
}

textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; }

.erreur { color: var(--rouge); font-size: .82rem; margin-top: 5px; }

.filtres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 22px;
    background: var(--papier-vif);
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    margin-bottom: 30px;
}

.filtres .champ { margin: 0; }

.alerte {
    padding: 15px 18px;
    border-left: 3px solid;
    border-radius: 0 var(--rayon) var(--rayon) 0;
    margin-bottom: 24px;
    font-size: .92rem;
}

.alerte ul { margin: 8px 0 0; padding-left: 20px; }

.alerte-succes { background: var(--vert-voile); border-color: var(--vert); color: var(--vert-fonce); }
.alerte-erreur { background: var(--rouge-voile); border-color: var(--rouge); color: var(--rouge); }
.alerte-info { background: var(--or-voile); border-color: var(--or); color: #6f5205; }

/* ==================================================================== */
/* Tableaux                                                             */
/* ==================================================================== */

.tableau-defilant {
    overflow-x: auto;
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    background: var(--papier-vif);
}

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

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--regle-fine);
    vertical-align: top;
}

th {
    background: var(--papier-teinte);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--encre-douce);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papier); }

/* ==================================================================== */
/* Cartographie                                                         */
/* ==================================================================== */

#carte {
    height: min(64vh, 580px);
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    z-index: 1;
}

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 16px;
    font-size: .82rem;
    color: var(--encre-tenue);
}

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

.popup-carte h4 { margin: 0 0 5px; font-family: var(--serif); font-size: 1.05rem; }
.popup-carte ul { margin: 7px 0 0; padding-left: 17px; font-size: .83rem; }
.popup-carte li { margin-bottom: 4px; }

/* ==================================================================== */
/* Fil d'Ariane, pagination                                             */
/* ==================================================================== */

.fil-ariane {
    font-size: .79rem;
    color: var(--encre-tenue);
    padding-top: 22px;
}

.fil-ariane a { color: var(--encre-tenue); text-decoration: none; }
.fil-ariane a:hover { color: var(--vert); text-decoration: underline; }
.fil-ariane span { margin-inline: 7px; color: var(--regle); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 34px 0 0;
}

.pagination a, .pagination span {
    display: block;
    min-width: 38px;
    text-align: center;
    padding: 8px 12px;
    border: 1px solid var(--regle);
    border-radius: var(--rayon);
    font-size: .85rem;
    text-decoration: none;
    background: var(--papier-vif);
}

.pagination a:hover { border-color: var(--encre); }

.pagination .actif span {
    background: var(--vert);
    border-color: var(--vert);
    color: #fff;
    font-weight: 600;
}

/* ==================================================================== */
/* Pied de page                                                         */
/* ==================================================================== */

.pied {
    background: var(--encre);
    color: #a9b8b1;
    padding: clamp(44px, 5vw, 64px) 0 26px;
    margin-top: clamp(56px, 7vw, 88px);
    font-size: .89rem;
}

.pied-marque {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pied-marque .armoiries { width: 46px; flex: none; }

.pied-marque .intitule {
    font-family: var(--serif);
    color: var(--papier);
    font-size: 1.02rem;
    line-height: 1.3;
}

.pied-marque .intitule small {
    display: block;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--or-clair);
    margin-top: 4px;
}

.pied h4 {
    font-family: var(--sans);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--or-clair);
    margin-bottom: 14px;
}

.pied a { color: #d6e2dc; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied p { color: #a9b8b1; }

.pied-bas {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 36px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 12px 28px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: #7d9088;
}

/* ==================================================================== */
/* Divers                                                               */
/* ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .bandeau-etat, .nav-principale, .pied, .bouton, .filtres { display: none; }
    body { background: #fff; font-size: 11pt; }
}