/* ==========================================================================
   aifluence - gabarits : accueil, article, rubrique, annuaire, barometre,
   glossaire, auteur, back-office
   ========================================================================== */

/* --- Accueil -------------------------------------------------------------- */

.une {
    display: grid;
    gap: var(--e5);
    padding-block: var(--e6);
}

@media (min-width: 900px) {
    .une {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        align-items: start;
    }
}

.une__secondaires {
    display: grid;
    gap: var(--e4);
}

.bandeau-barometre {
    display: grid;
    gap: var(--e5);
    align-items: center;
    padding: var(--e6);
    background: var(--bleu-nuit);
    border-radius: var(--rayon-carte);
    color: #D7E1EB;
}

@media (min-width: 900px) {
    .bandeau-barometre {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    }
}

.bandeau-barometre h2 {
    color: #fff;
    margin-bottom: var(--e3);
}

.bandeau-barometre__table {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rayon-carte);
    overflow: hidden;
}

.bandeau-barometre__table th,
.bandeau-barometre__table td {
    border-bottom-color: rgba(255, 255, 255, 0.10);
    color: #E8EEF4;
}

.bandeau-barometre__table th {
    color: #9FB0C0;
    font-size: var(--tres-petit);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bandeau-barometre__table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Article -------------------------------------------------------------- */

.article__entete {
    padding-block: var(--e5) var(--e6);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e3);
    font-size: var(--petit);
    color: var(--texte-secondaire);
    margin-top: var(--e4);
    padding-top: var(--e4);
    border-top: 1px solid var(--bordure);
}

.article__auteur {
    display: flex;
    align-items: center;
    gap: var(--e2);
}

.article__auteur img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.article__auteur a {
    font-weight: 500;
    color: var(--bleu-nuit);
    text-decoration: none;
}

.article__auteur a:hover {
    color: var(--teal-fonce);
}

.article__illustration {
    margin: 0 0 var(--e6);
    border-radius: var(--rayon-carte);
    overflow: hidden;
    background: var(--glacier);
}

.article__illustration img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* L'article occupe toute la largeur de sa colonne : la mesure de lecture est
   deja tenue par la colonne laterale, pas besoin de brider le texte en plus. */
.contenu {
    max-width: none;
}

.contenu > h2:first-child {
    margin-top: 0;
}

.contenu a {
    font-weight: 500;
}

.contenu ul li::marker {
    color: var(--teal);
}

/* --- Media dans le corps d'un article --------------------------------------
   Une figure illustre le propos au milieu du texte : elle prend toute la
   largeur de la colonne, porte sa legende, et ne casse pas le rythme de
   lecture. La variante video pointe vers la chaine, sans lecteur embarque
   ni requete vers un service tiers avant le clic. */

.contenu figure {
    margin: var(--e6) 0;
}

.contenu figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rayon-carte);
    background: var(--glacier);
}

.contenu figcaption {
    margin-top: var(--e2);
    font-size: var(--tres-petit);
    line-height: 1.45;
    color: var(--texte-secondaire);
}

.contenu figcaption strong {
    color: var(--bleu-nuit);
    font-weight: 600;
}

.article__video a {
    position: relative;
    display: block;
    border-radius: var(--rayon-carte);
    overflow: hidden;
    background: var(--bleu-nuit);
}

.article__video img {
    border-radius: 0;
    transition: transform 400ms ease;
}

.article__video a:hover img {
    transform: scale(1.03);
}

/* Le triangle de lecture est dessine en CSS : aucune balise SVG ne survit au
   filtre du HTML editorial. */
.article__video-lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ombre-flottante);
    transition: background var(--transition), transform var(--transition);
}

.article__video-lecture::before {
    content: '';
    margin-left: 4px;
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent var(--bleu-nuit);
}

.article__video a:hover .article__video-lecture {
    background: var(--teal);
}

.article__video a:hover .article__video-lecture::before {
    border-left-color: #04231F;
}

.sources {
    margin-top: var(--e7);
    padding-top: var(--e4);
    border-top: 1px solid var(--bordure);
    font-size: var(--petit);
    color: var(--texte-secondaire);
}

.sources h2 {
    font-size: var(--tres-petit);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--e3);
}

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

.signature-auteur {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--e4);
    align-items: start;
    margin-top: var(--e7);
    padding: var(--e5);
    background: var(--glacier);
    border-radius: var(--rayon-carte);
}

.signature-auteur img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.signature-auteur h2 {
    font-size: 1.0625rem;
    margin: 0 0 var(--e1);
}

.signature-auteur p {
    margin: 0;
    font-size: var(--petit);
    color: var(--texte-secondaire);
}

/* --- Rubrique et archives ------------------------------------------------- */

.rubrique__entete {
    padding-block: var(--e6);
    border-bottom: 1px solid var(--bordure);
    margin-bottom: var(--e6);
}

.rubrique__intro {
    max-width: var(--largeur-texte);
    color: var(--texte-secondaire);
}

/* --- Annuaire ------------------------------------------------------------- */

.annuaire-liste {
    display: grid;
    gap: var(--e4);
}

.annuaire-villes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--e3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.annuaire-villes a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e2);
    padding: var(--e3) var(--e4);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--petit);
    color: var(--bleu-nuit);
    text-decoration: none;
}

.annuaire-villes a:hover {
    border-color: var(--teal);
    color: var(--teal-fonce);
}

.annuaire-villes span {
    font-family: var(--police-texte);
    font-weight: 400;
    font-size: var(--tres-petit);
    color: var(--texte-secondaire);
}

/* --- Fiche ---------------------------------------------------------------- */

.fiche__entete {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
    padding-block: var(--e6);
}

/* Au telephone, le logo laisse la largeur au nom et a la description plutot
   que de reduire le texte a une colonne de deux mots. */
@media (max-width: 560px) {
    .fiche__entete {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e4);
        padding-block: var(--e5);
    }
}

.fiche__logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    padding: var(--e2);
}

.fiche__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
    margin-top: var(--e3);
}

.fiche__infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--e4);
    margin: var(--e5) 0;
    padding: var(--e4);
    background: var(--glacier);
    border-radius: var(--rayon-carte);
    font-size: var(--petit);
}

.fiche__infos dt {
    font-family: var(--police-titre);
    font-size: var(--tres-petit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texte-secondaire);
    margin-bottom: var(--e1);
}

.fiche__infos dd {
    margin: 0;
    color: var(--bleu-nuit);
}

/* --- Barometre ------------------------------------------------------------ */

.barometre__table-conteneur {
    overflow-x: auto;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
}

.barometre__table {
    min-width: 46rem;
    font-size: var(--petit);
}

.barometre__table th {
    background: var(--glacier);
    position: sticky;
    top: 0;
    cursor: pointer;
    user-select: none;
}

.barometre__table th[aria-sort='ascending']::after {
    content: ' \2191';
    color: var(--teal);
}

.barometre__table th[aria-sort='descending']::after {
    content: ' \2193';
    color: var(--teal);
}

.barometre__rang {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--bleu-nuit);
}

.barometre__evolution--hausse {
    color: var(--teal-fonce);
}

.barometre__evolution--baisse {
    color: #C0392B;
}

.barometre__barre {
    display: block;
    height: 6px;
    background: var(--teal);
    border-radius: 3px;
    min-width: 2px;
}

.methodologie {
    margin-top: var(--e6);
    padding: var(--e5);
    background: var(--glacier);
    border-left: var(--filet) solid var(--teal);
    border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0;
    font-size: var(--petit);
}

/* --- Glossaire ------------------------------------------------------------ */

.glossaire-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--e4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.glossaire-index li {
    margin: 0;
}

.glossaire-index a {
    display: block;
    padding: var(--e4);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    text-decoration: none;
    height: 100%;
}

.glossaire-index a:hover {
    border-color: var(--teal);
}

.glossaire-index strong {
    display: block;
    font-family: var(--police-titre);
    font-size: 1.0625rem;
    margin-bottom: var(--e1);
}

.glossaire-index span {
    display: block;
    font-size: var(--petit);
    color: var(--texte-secondaire);
}

.definition-cle {
    padding: var(--e5);
    background: var(--glacier);
    border-left: var(--filet) solid var(--teal);
    border-radius: 0 var(--rayon-carte) var(--rayon-carte) 0;
    font-size: 1.0625rem;
    color: var(--bleu-nuit);
    margin-bottom: var(--e6);
}

/* --- Auteur --------------------------------------------------------------- */

.auteur__entete {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
    padding-block: var(--e6);
}

.auteur__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

.auteur__reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    margin-top: var(--e3);
    font-size: var(--petit);
}

/* --- Erreur --------------------------------------------------------------- */

.erreur {
    text-align: center;
    padding-block: var(--e9);
    max-width: 34rem;
    margin-inline: auto;
}

.erreur__code {
    font-family: var(--police-titre);
    font-size: clamp(3rem, 2rem + 6vw, 6rem);
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
    margin-bottom: var(--e4);
}

/* --- Back-office ---------------------------------------------------------- */

.admin {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    background: var(--glacier);
}

@media (min-width: 900px) {
    .admin {
        grid-template-columns: 15rem minmax(0, 1fr);
    }
}

.admin__nav {
    background: var(--bleu-nuit);
    color: #C9D5E1;
    padding: var(--e5) var(--e4);
}

.admin__nav a {
    display: block;
    padding: var(--e2) var(--e3);
    border-radius: var(--rayon-bouton);
    color: #C9D5E1;
    text-decoration: none;
    font-family: var(--police-titre);
    font-size: var(--petit);
    font-weight: 600;
}

.admin__nav a:hover,
.admin__nav a[aria-current='page'] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin__contenu {
    padding: var(--e6) var(--e5);
}

.admin__carte {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
    padding: var(--e5);
    margin-bottom: var(--e5);
}

.admin__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--e4);
    margin-bottom: var(--e6);
}

.admin__stat {
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-left: var(--filet) solid var(--teal);
    border-radius: var(--rayon-carte);
    padding: var(--e4);
}

.admin__stat b {
    display: block;
    font-family: var(--police-titre);
    font-size: 1.75rem;
    line-height: 1.1;
    color: var(--bleu-nuit);
}

.admin__stat span {
    font-size: var(--tres-petit);
    color: var(--texte-secondaire);
}

.connexion {
    max-width: 24rem;
    margin: var(--e9) auto;
    padding: var(--e6);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-carte);
}

/* --- Accueil : bloc de une facon media -------------------------------------- */

.une__titre {
    font-family: var(--police-titre);
    font-size: var(--tres-petit);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--texte-secondaire);
    margin: 0 0 var(--e1);
    padding-bottom: var(--e2);
    border-bottom: 2px solid var(--bleu-nuit);
}

.une__tout {
    font-family: var(--police-titre);
    font-size: var(--petit);
    font-weight: 600;
    align-self: start;
}

.une__vide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--e7) 0;
}

.bandeau-barometre__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e3);
}

.bandeau-barometre__points li {
    position: relative;
    padding-left: var(--e5);
    font-size: var(--petit);
    margin: 0;
}

.bandeau-barometre__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 2px;
    background: var(--teal);
}

/* Voile leger sous les chips posees sur une image claire. */
.carte__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(2, 27, 54, 0.28), transparent);
    pointer-events: none;
}

.carte--compacte .carte__media::after {
    display: none;
}

/* La grille de la carte compacte porte desormais sur le conteneur visuel. */
.carte--compacte .carte__visuel {
    overflow: hidden;
}

/* --- Rubrique : entete plus aeree ------------------------------------------- */

.rubrique__entete {
    padding-block: var(--e6) var(--e5);
    border-bottom: 2px solid var(--bleu-nuit);
    margin-bottom: 0;
}

.rubrique__entete h1 {
    margin-bottom: var(--e4);
}

.rubrique__flux {
    margin: var(--e4) 0 0;
    font-size: var(--tres-petit);
}

.rubrique__intro {
    max-width: none;
    color: var(--texte);
}

.rubrique__intro p:last-child {
    margin-bottom: 0;
}

/* --- Fiche annuaire : carte un peu plus dessinee ---------------------------- */

.fiche-carte {
    align-items: center;
    padding: var(--e4) var(--e5);
}

.fiche-carte__nom {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.annuaire-liste {
    gap: var(--e3);
}

/* Vignette par initiale pour un auteur sans photo. */
.signature-auteur__initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bleu-nuit);
    color: #fff;
    font-family: var(--police-titre);
    font-size: 1.5rem;
    font-weight: 700;
}

.auteur__photo.signature-auteur__initiale {
    width: 96px;
    height: 96px;
    font-size: 2.25rem;
}

/* ==========================================================================
   Annuaire
   ========================================================================== */

.annuaire-hero {
    background: var(--bleu-nuit);
    color: #C9D5E1;
    padding-block: var(--e8);
    margin-bottom: var(--e7);
}

.annuaire-hero__grille {
    display: grid;
    gap: var(--e7);
    align-items: center;
}

@media (min-width: 900px) {
    .annuaire-hero__grille {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

.annuaire-hero h1 {
    color: #fff;
    margin: var(--e4) 0 var(--e4);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.annuaire-hero .chapo {
    color: #C9D5E1;
    border-left-color: var(--teal);
    margin-bottom: var(--e5);
}

.annuaire-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    margin: 0;
}

.annuaire-hero__actions .bouton--secondaire {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}

.annuaire-hero__actions .bouton--secondaire:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.annuaire-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--rayon-carte);
    overflow: hidden;
}

.annuaire-stats > div {
    background: var(--bleu-nuit);
    padding: var(--e4) var(--e5);
}

.annuaire-stats dt {
    font-family: var(--police-titre);
    font-size: var(--tres-petit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9FB0C0;
    margin-bottom: var(--e2);
}

.annuaire-stats dd {
    margin: 0;
    font-family: var(--police-titre);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
}

.annuaire-stats__date {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #E8EEF4 !important;
}

.encadre h3 {
    margin-top: 0;
    font-size: 1rem;
}

.encadre p {
    margin-bottom: 0;
    font-size: var(--petit);
    color: var(--texte-secondaire);
}

/* Sur les pages sans colonne laterale, le texte reste a une mesure lisible,
   les listes et les cartes occupent toute la largeur du conteneur. */
.rubrique__entete .chapo,
.rubrique__entete .rubrique__intro,
.rubrique__entete > p {
    max-width: 68rem;
}