/* @grammaire v2
   ══════════════════════════════════════════════════════════════
   Directory — Cards et detail annuaire
   ══════════════════════════════════════════════════════════════

   LES REPLIS LITTERAUX ONT ETE RETIRES, pas convertis. `var(--color-border,
   #e5e7eb)` portait un gris qui n'est PAS celui du theme (#dadee2) : tant que le
   jeton existe le repli ne sert a rien, et le jour ou il disparaitrait il
   rendrait une couleur etrangere a la charte sans que rien ne le signale. Un
   repli n'est legitime que sur un jeton dont on sait qu'il peut manquer.

   LES DEUX OMBRES passent aux jetons d'echelle. Elles etaient ecrites a la main,
   a une valeur proche mais differente de `--shadow-sm` et `--shadow-lg` : la
   carte de l'annuaire se posait donc un demi-cran a cote de toutes les autres
   cartes du site, ce qui ne se voit pas isolement et se voit dans une page qui
   en melange plusieurs. */

.directory-list__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* Section d'annuaire (titre + compteur au-dessus d'une grille) */
.directory-section {
    margin-top: var(--spacing-2xl);
}

.directory-section:first-of-type {
    margin-top: var(--spacing-xl);
}

.directory-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.directory-section__title {
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.directory-section__count {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-light);
}

@media (min-width: 40em) {
    .directory-list__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .directory-list__grid { grid-template-columns: repeat(3, 1fr); }
}

.directory-card {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.directory-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.directory-card__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
}

/* Le logo EST l'identite de ces organisations : c'est par lui qu'on les
   reconnait avant d'avoir lu le nom. A 3,5 rem, un sigle a trois lettres
   tombait sous les dix pixels de haut une fois le `contain` applique. */
.directory-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    color: var(--color-text-light);
    overflow: hidden;
}

.directory-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.35rem;
}

.directory-card__body {
    flex: 1;
    min-width: 0;
}

.directory-card__nature {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.directory-card__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-tight);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.directory-card__location {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.directory-card__arrow {
    flex-shrink: 0;
    color: var(--color-border);
    transition: color 0.15s ease;
}

.directory-card--highlighted { border-color: var(--color-section-cesu); background: color-mix(in srgb, var(--color-section-cesu) 4%, transparent); }

.directory-card:hover .directory-card__arrow {
    color: var(--color-primary);
}

/* Directory show */
.directory-show {
    padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.directory-show__container {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.directory-show__header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl);
}

.directory-show__logo {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-light);
}

.directory-show__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.375rem;
}

.directory-show__nature {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.directory-show__name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
}

@media (min-width: 40em) {
    .directory-show__name { font-size: var(--font-size-3xl); }
}

.directory-show__short-name {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

.directory-show__description {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}

.directory-show__section-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.directory-show__info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 40em) {
    .directory-show__info-grid { grid-template-columns: repeat(2, 1fr); }
}

.directory-show__info-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

.directory-show__info-card svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 0.125rem;
}

.directory-show__info-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

.directory-show__info-card a {
    color: var(--color-primary);
    text-decoration: none;
}

.directory-show__info-card a:hover {
    text-decoration: underline;
}

.directory-show__footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}


/* ══════════════════════════════════════════════════════════════
   FICHE DE PARTENAIRE — ce que le squelette partage ne porte pas

   La page rend `article-single__layout` / `__main` / `article-sidebar`, le
   squelette de fiche du site (`zones/article.css`), et n'en redeclare rien.
   Ce qui suit est le peu qui lui est propre : le rythme de ses blocs, la
   phrase d'etat vide, et la liste de coordonnees du rail.
   ══════════════════════════════════════════════════════════════ */

/* ── LA COLONNE DE LECTURE REPREND SA LARGEUR QUAND LE RAIL EST ABSENT ──

   MESURE. Sans rail, le squelette replie la grille sur une piste unique
   `min(100%, 62rem)`, centree — 992 px dans un conteneur de 1 192. La colonne,
   elle, mesurait 479 : le contenu se retractait au plus large de ses enfants,
   et la page avait l'air vide parce qu'elle s'etait resserree, pas parce qu'il
   manquait quelque chose.

   CE QUI EST ETABLI, ET CE QUI NE L'EST PAS. `zones/events.css` centre cette
   colonne par `margin-inline: auto` des que le rail n'a rien a montrer, et des
   marges automatiques sur un element de grille lui font bien prendre sa largeur
   intrinseque. Mais l'annuler ne suffit pas : marges relevees a 0, aucune regle
   servie ne pose de largeur, et la colonne reste a 479. Le mecanisme exact
   n'est donc PAS etabli — il est note ici pour que personne ne le cherche une
   seconde fois en croyant qu'il l'est.

   CE QUI TRANCHE est une contre-epreuve, pas une explication : largeur imposee
   a 100 %, la colonne passe de 479 a 992, soit exactement la piste. La regle
   ci-dessous fait cela, et rien de plus.

   `margin-inline: 0` reste : la piste est deja centree par
   `justify-content: center`, donc les marges automatiques ne calent plus rien
   une fois la largeur rendue. */
.partner-show__layout .article-single__main {
    margin-inline: 0;
    width: 100%;
}

/* AUCUNE MARGE ENTRE LES BLOCS DE LA COLONNE, et c'est le squelette qui le
   veut : `.article-single__main` est une colonne flex a `gap: --rhythm-block`,
   et il neutralise deja les marges de ses enfants (`> * { margin-block: 0 }`).
   Les regles `+` que cette feuille posait s'AJOUTAIENT a cette gouttiere —
   48 px de gap plus 32 de marge, mesures — au lieu de la remplacer. Le
   conteneur rythme, les enfants ne rythment pas. */

/* UNE FICHE SANS TEXTE LE DIT, ET C'EST LA BRIQUE PARTAGEE QUI LE DIT. Il ne
   reste ici que la SURFACE — le voile et son rayon — parce qu'elle est propre a
   cette page : `_empty_state` rend le titre et la phrase, et la classe passee en
   `css_class` habille son enveloppe. Le titre prend son style de
   `empty-state__title`, qui vit avec la brique. */
.directory-show__empty {
    padding: var(--spacing-lg);
    background: var(--surface-3);
    border-radius: var(--radius-lg);
}

.directory-show__empty p:not(.empty-state__title) {
    margin: 0;
    max-width: 62ch;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* L'ACTION DE L'EN-TETE PREND SA LARGEUR PROPRE. `content-header__after` n'a
   aucun style par defaut : sans cela le bouton barrait la carte sur toute sa
   largeur, soit 1 192 px pour trois mots. */
.partner-show__site {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: auto;
}

/* ── LES COORDONNEES DU RAIL ──
   Une ligne par coordonnee, le pictogramme aligne sur la PREMIERE ligne de la
   valeur et non sur son milieu : une adresse tient sur deux lignes, et un
   pictogramme centre sur les deux se retrouve devant l'espace qui les separe. */
.directory-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
}

.directory-contact__row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.directory-contact__icon {
    flex: none;
    margin-top: 0.15em;
    color: var(--color-text-light);
}

.directory-contact__value {
    min-width: 0;
    color: var(--color-text);
    /* UNE ADRESSE DE SITE PEUT DEPASSER 20 REM. Sans coupure, elle elargit le
       rail au-dela de sa colonne de grille et pousse la colonne de lecture. */
    overflow-wrap: anywhere;
}

a.directory-contact__value {
    color: var(--color-primary);
    text-decoration: none;
}

a.directory-contact__value:hover {
    text-decoration: underline;
}