/*
 * RANGEE DE LOGOS PARTENAIRES — `templates/components/_partner_logos.html.twig`.
 *
 * PAS DE BOITE PAR LOGO. C'est la seule regle qui compte ici, et elle vient
 * d'un defaut mesure : posee dans un panneau du rail, chaque logo portait son
 * propre fond blanc et sa propre bordure a l'interieur d'un bloc qui en avait
 * deja — une carte dans une carte, sur une colonne de 176 px. Le logo y
 * paraissait minuscule, non pas parce qu'il l'etait, mais parce que la boite
 * autour prenait la place.
 *
 * LA RANGEE ELLE-MEME NE POSE AUCUNE SURFACE, et ce n'est pas la meme chose
 * que d'interdire au bloc d'en avoir une : le panneau qui l'entoure appartient
 * a l'appelant, qui sait s'il rend une section de rail (elle en a une, comme
 * ses voisines) ou une bande pleine largeur (elle n'en a pas).
 *
 * Un logo est deja un objet fini : il porte sa forme, sa couleur et son fond.
 * L'encadrer revient a encadrer un cadre.
 *
 * NI DESATURATION NI OPACITE AU REPOS, et ce n'est pas un oubli. Le
 * raisonnement est celui de la bande de l'accueil, ou il a ete tranche :
 *
 *  - un logo gris et pale se lit comme un element DESACTIVE, ce qu'il n'est
 *    pas — il mene au site du partenaire ;
 *  - un tiers ne montre son identite qu'en couleur, et c'est la contrepartie
 *    de sa collaboration : la lui retirer par defaut n'est pas une decision de
 *    mise en page ;
 *  - sur un ecran tactile il n'y a PAS de survol, donc la totalite des
 *    visiteurs mobiles ne verrait jamais les vraies couleurs (regle « pas
 *    d'interaction hover-only », `accessibility.md`).
 *
 * Et aucun mouvement au survol en remplacement : la charte range « les icones
 * qui bougent au survol » parmi ce qui ne s'anime jamais. Le lien se signale
 * par le curseur et, au clavier, par l'anneau de focus global.
 *
 * LA PASTILLE BORDEE EST LE REPLI, pas la regle : elle ne s'applique qu'au
 * partenaire dont aucun logo n'est renseigne. Un cadre vide dirait qu'il
 * manque une image alors qu'il ne manque rien, et un nom nu se perdrait dans
 * la rangee.
 *
 * `--partner-logos-size` laisse l'appelant regler la hauteur : une bande pleine
 * largeur et une colonne d'appui n'ont pas la meme echelle.
 *
 * @grammaire v2
 */

.partner-logos {
    --partner-logos-size: 2.5rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg) var(--spacing-xl);
    list-style: none;
    padding: 0;
    margin: 0;
}

.partner-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    text-decoration: none;
}

/* EN COLONNE, quand la colonne d'appui est etroite et que les marques ne sont
   pas de meme nature. Conserve pour cet emploi ; la fiche formation lui
   prefere desormais les TUILES ci-dessous. */
.partner-logos--stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

/* ── EN TUILES BLANCHES ──────────────────────────────────────────────────
   Chaque marque sur son propre fond blanc arrondi, cote a cote, qui revient
   a la ligne.

   CE N'EST PAS LA CONTRADICTION QU'ON CROIT avec « pas de boite par logo ».
   La regle de base vaut sur le FOND DE PAGE, ou un logo pose seul se suffit.
   Elle ne vaut plus sur une SURFACE ATTENUEE : la, le logo flotte sur un gris
   qui n'est pas le sien, et la tuile lui rend un fond.

   Et elle repare un defaut que le CSS ne peut pas atteindre autrement : un
   logo televerse en PNG opaque porte SON PROPRE fond blanc (mesure au canvas
   sur le logo SFMU, alpha 255). Sur gris, ce carre detonne et se lit comme une
   erreur de mise en page ; quand TOUTES les marques sont sur blanc, il ne se
   distingue plus de ses voisines. La tuile ne cache pas le defaut de l'image,
   elle cesse de l'exposer.

   UNE GRILLE `auto-fill` ET NON UNE RANGEE QUI S'ETIRE. Les deux repondent au
   meme besoin — des tuiles de meme largeur, sans orpheline plus courte, ce
   qui se lirait comme un debordement — mais elles divergent des que les
   marques sont nombreuses. A deux tuiles dans une colonne d'appui, une rangee
   flex qui s'etire convient ; a douze sur une bande pleine largeur, elle rend
   neuf tuiles normales puis trois enormes, chacune etirant sa rangee a elle
   seule. `auto-fill` garde la largeur de piste et laisse les places vides,
   ce qui est la forme attendue.

   `--partner-logos-tile` regle la largeur MINIMALE d'une tuile : une colonne
   de 288 px en tient deux, une bande de 1 126 px en tient sept.

   La HAUTEUR MINIMALE aligne les tuiles entre elles : un logo large et plat
   et un logo carre donneraient sinon deux tuiles de hauteurs differentes sur
   la meme ligne. Elle se DERIVE de la taille du logo plus le rembourrage,
   pour que la marque occupe toute la hauteur utile : une tuile dimensionnee
   independamment laisserait le logo flotter en son milieu.

   LE REMBOURRAGE EST COURT (`sm`) ET LA TAILLE GENEREUSE, et c'est un
   arbitrage qu'il faut connaitre : un logo televerse porte souvent SES
   PROPRES marges blanches. Mesure sur celui de la SFMU — 140 x 140, dont la
   marque n'occupe qu'une fraction. Le rembourrage de la tuile S'AJOUTE a
   celles-la, et deux marges empilees rendent la marque minuscule dans une
   tuile qui, elle, est grande. Mieux vaut donc une tuile serree autour d'un
   logo genereux que l'inverse. */
.partner-logos--tiles {
    --partner-logos-tile: 7rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--partner-logos-tile), 1fr));
    align-items: stretch;
    justify-content: start;
    gap: var(--spacing-sm);
}

.partner-logos--tiles > li {
    display: flex;
}

/* ── TUILES CENTREES, A LARGEUR FIXE ─────────────────────────────────────
   Pour une bande pleine largeur portant beaucoup de marques.

   POURQUOI UNE SECONDE FORME, et pourquoi elle ne remplace pas la premiere :
   UNE GRILLE NE SAIT PAS CENTRER UNE RANGEE INCOMPLETE. Ses elements restent
   dans leurs pistes, donc une derniere rangee de trois se colle a gauche sous
   une rangee de neuf. `justify-content` centre le bloc de pistes, jamais les
   elements d'une rangee partielle. Seul le flex le fait, et seulement si les
   tuiles ont une largeur FIXE — sinon elles s'etirent au lieu de se centrer.

   La contrepartie est qu'elles ne remplissent plus la largeur. C'est le bon
   choix sur une bande ou il reste de la place, le mauvais dans une colonne
   d'appui de 288 px, ou deux tuiles de largeur fixe laisseraient des marges
   et retreciraient les logos. D'ou deux formes, et non une.

   NUANCE AVEC LA CHARTE, qui demande a une rangee qui revient a la ligne de
   REMPLIR sa rangee : elle vise des puces a largeur INTRINSEQUE, dont
   l'orpheline serait plus COURTE que ses voisines — ce qui se lit comme un
   debordement. Ici toutes les tuiles ont la meme largeur : une derniere
   rangee centree se lit comme une mise en page, pas comme un reste. */
.partner-logos--tiles-centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-sm);
}

.partner-logos--tiles-centered > li {
    display: flex;
    flex: 0 0 var(--partner-logos-tile, 7rem);
}

.partner-logos--tiles .partner-logos__item,
.partner-logos--tiles-centered .partner-logos__item {
    flex: 1;
    min-height: calc(var(--partner-logos-size) + 2 * var(--spacing-sm));
    padding: var(--spacing-sm);
    background: var(--color-on-primary);
    border-radius: var(--radius-md);
}

/* HAUTEUR DEFINIE, ET NON SEULEMENT PLAFONNEE : c'est ce qui fait exister les
   logos au format SVG.

   Un SVG n'a pas de taille intrinseque au sens ou en a un raster : il porte un
   rapport. Avec `width: auto` et `max-width: 100%` dans un conteneur de
   largeur INDEFINIE — ce qu'est un element de flex dimensionne par son
   contenu — la resolution devient circulaire et Chrome rend 0 x 0. L'image est
   pourtant chargee : `complete` est vrai et sa taille naturelle est connue.

   Mesure du 2026-09-11 sur la bande de l'accueil, onze logos :

       max-height seule    le SVG rend 0 x 0, les dix rasters rendent 40
       height definie      les onze rendent 40

   Le cout habituel d'une hauteur definie — grossir un logo plus petit que la
   cible — ne s'applique pas ici : le plus petit des onze fait 60 px de haut,
   donc elle ne fait que reduire. Un logo plus petit que `--partner-logos-size`
   serait agrandi ; c'est un defaut moindre qu'un logo qui n'apparait pas, et
   `object-fit: contain` interdit au moins la deformation.

   `max-width` reste : sur une colonne etroite, un logo tres large doit ceder
   en largeur plutot que deborder. */
.partner-logos__logo {
    height: var(--partner-logos-size);
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* LE REPLI EST UN MOT, PAS UNE PASTILLE. Il portait une bordure et un
   rembourrage : a cote d'un logo rendu nu, ca remettait exactement la boite
   qu'on venait de retirer, et le bloc affichait deux objets de natures
   differentes — un cadre et une image. Le nom se suffit ; c'est le titre de
   section au-dessus qui dit ce qu'il est. */
.partner-logos__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.partner-logos__item:hover .partner-logos__name {
    color: var(--color-primary);
}