/**
 * Section LOGOS — art-piramida.com (23/09/2026, KIT §0.1).
 * Chargé UNIQUEMENT sur le hub /logos/, les pages secteur /logos/<secteur>/
 * et les fiches logo (inc/logos.php §10). N'édite jamais style.css ni les
 * autres assets/*.css. Jetons repris de :root (style.css) — aucune couleur
 * nouvelle : angles droits, mode clair uniquement (CM-0575).
 */

/* ==========================================================================
   HERO BENTO (redesign 23/09/2026, R-1008 : "moitié gauche noire vide, texte
   tassé en bas, mosaïque à droite" — DÉFAUT CORRIGÉ). Fond clair --plaque,
   conteneur normal (1280), hauteur maîtrisée (≤480px à 1440), texte centré
   verticalement. Grille 5/7 : gauche texte + pastille compteur + 3 puces-
   marques cliquables ; droite composition bento asymétrique (1 grande 2/3 +
   2 petites 1/3 empilées), angles droits, filet 1px, jamais de case vide
   (repli graphique si le secteur n'a encore aucune photo). Remplace
   définitivement .ap-logos-hero-duo (fond --rue).
   ========================================================================== */
.ap-logos-hero2{background:var(--plaque);border-bottom:1px solid var(--filet)}
.ap-logos-hero2-grille{
  display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:48px;
  /* min-height pilote le gabarit visuel (≈480px à 1440 sur un chapô en 2
     lignes) ; pas de max-height dur : un chapô réel en 3 lignes (fiche R-1017
     du 23/09, 2e passage) ne doit jamais être rogné, la phrase prime sur la
     hauteur cible. */
  min-height:320px;padding-block:40px;
}
.ap-logos-hero2-texte{display:flex;flex-direction:column;gap:14px;max-width:46ch}
.ap-logos-hero2-badge{
  display:inline-flex;align-items:center;width:fit-content;
  background:var(--fond);color:var(--accent);border:1px solid var(--filet);
  font-family:var(--police-boitier);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 14px;margin:0;
}
.ap-logos-hero2-texte h1{
  color:var(--encre);text-transform:none;font-family:var(--police-boitier);
  letter-spacing:-.01em;line-height:1.15;font-size:clamp(28px,3vw,52px);margin:0;
}
.ap-logos-hero2-texte .ap-chapo{
  color:var(--sourde);font-size:16px;line-height:1.5;margin:0;
  /* Phrase ENTIÈRE toujours affichée (orchestrateur 23/09, 2e passage
     R-1017) : un clip à hauteur fixe coupait "…signalétique intérieure
     très" en plein mot sur /logos/fast-food/. Ni "…" (1er passage) ni
     coupe en plein mot (2e passage) : donc pas de cap de hauteur — la
     phrase s'affiche en entier, 2 lignes la plupart du temps (largeur
     46ch), parfois 3 sur les replis les plus longs. */
}
/* Aucune photo de bento (secteur sans fiche publiée) : hero texte seul,
   pleine largeur, jamais de colonne droite hachurée vide (R-1017). */
.ap-logos-hero2-grille--pleine{grid-template-columns:1fr}
.ap-logos-hero2-grille--pleine .ap-logos-hero2-texte{max-width:64ch}
.ap-logos-hero2-marques{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0}
.ap-logos-hero2-marques a{
  display:inline-block;background:var(--plaque-haute);border:1px solid var(--filet);
  color:var(--encre);font-size:13px;font-weight:500;padding:7px 14px;transition:border-color .15s ease,color .15s ease;
}
.ap-logos-hero2-marques a:hover{border-color:var(--accent);color:var(--accent)}
.ap-logos-hero2-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:6px}
.ap-logos-hero2-lien{font-size:14px;font-weight:600;color:var(--accent)}
.ap-logos-hero2-lien:hover{text-decoration:underline}

.ap-logos-hero2-bento{
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
  height:100%;max-height:400px;
}
.ap-logos-hero2-bento .item{overflow:hidden;background:var(--fond);border:1px solid var(--filet);box-shadow:0 8px 20px -14px rgba(17,12,15,.35)}
.ap-logos-hero2-bento img{width:100%;height:100%;object-fit:cover;display:block}
.ap-logos-hero2-bento .grande{grid-row:1/3}
/* 1 seule photo dispo : pas de bento, une grande photo seule (jamais de case vide, R-0837/R-1008). */
.ap-logos-hero2-bento--1{grid-template-columns:1fr;grid-template-rows:1fr}
.ap-logos-hero2-bento--1 .grande{grid-row:auto}
/* 2 photos : grande + 1 petite (pas de 2e case orpheline). */
.ap-logos-hero2-bento--2 .petite{grid-row:auto}
/* Repli SANS aucune photo (secteur tout neuf) : composition graphique assumée. */
.ap-logos-hero2-bento--vide{
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--filet) 0 1px,transparent 1px 22px),var(--fond);
  border:1px solid var(--filet);
}
.ap-logos-hero2-bento--vide .ap-logos-svg{width:64px;height:64px;stroke:var(--sourde);opacity:.8}

@media (max-width:999px){
  .ap-logos-hero2-grille{grid-template-columns:1fr;gap:24px;max-height:none;padding-block:32px}
  .ap-logos-hero2-bento{grid-template-columns:1fr;grid-template-rows:1fr;aspect-ratio:16/9;max-height:none}
  .ap-logos-hero2-bento .item{grid-row:auto!important}
  .ap-logos-hero2-bento .petite:nth-child(n+2){display:none} /* mobile : 1 photo 16:9, pas de bento (spec §B) */
}
@media (max-width:640px){
  .ap-logos-hero2-grille{padding-block:28px}
  .ap-logos-hero2-texte h1{font-size:clamp(24px,7vw,32px)}
}

/* ---- Grilles de cartes (secteurs + fiches) : largeur fixe, JAMAIS géantes,
   centrées quand il y a moins d'une rangée pleine (auto-fill + cap, pas
   auto-fit + 1fr — c'est ce dernier qui étire 1-2 cartes en pleine largeur). */
.ap-logos-grille-secteurs{grid-template-columns:repeat(auto-fill,minmax(240px,280px));justify-content:center}
@media (max-width:960px){.ap-logos-grille-secteurs{grid-template-columns:repeat(auto-fill,minmax(220px,260px))}}
@media (max-width:600px){.ap-logos-grille-secteurs{grid-template-columns:repeat(2,minmax(140px,1fr));justify-content:stretch}}

.ap-logos-grille-fiches{grid-template-columns:repeat(auto-fill,minmax(260px,280px));justify-content:center}
@media (max-width:960px){.ap-logos-grille-fiches{grid-template-columns:repeat(auto-fill,minmax(230px,260px))}}
@media (max-width:600px){.ap-logos-grille-fiches{grid-template-columns:repeat(2,minmax(140px,1fr));justify-content:stretch}}

.ap-carte--secteur{display:flex;flex-direction:column;height:100%;transition:border-color .18s ease}
.ap-carte--secteur:hover{border-color:var(--accent)}
.ap-logos-secteur-illu{
  position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background:var(--fond);overflow:hidden;flex:none;
}
/* Avec photo (cas normal, R-0524) : image réelle pleine case + picto en
   pastille sombre par-dessus, jamais un pictogramme seul sur fond vide. */
.ap-logos-secteur-illu img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ap-carte--secteur:hover .ap-logos-secteur-illu img{transform:scale(1.04)}
.ap-logos-secteur-badge{
  position:absolute;left:10px;bottom:10px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;background:var(--rue);
}
.ap-logos-secteur-badge .ap-logos-svg{width:20px;height:20px;stroke:var(--neon-fixe)}
/* Repli SANS aucune photo dans tout le secteur (cas transitoire, tant que la
   fiche n'a pas encore d'image à la une) : picto seul, agrandi, sur fond clair. */
.ap-logos-svg{width:44px;height:44px;stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Légende raffinée : nom + compteur alignés sur une ligne, filet d'accent qui
   s'anime au survol de la carte (passe élégance 23/09). */
.ap-carte--secteur .ap-carte-corps{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:2px solid var(--filet);transition:border-color .18s ease;
}
.ap-carte--secteur:hover .ap-carte-corps{border-top-color:var(--accent)}
.ap-carte--secteur h3{margin:0;font-size:16px}

/* ---- Cartes fiche logo (hub / secteur / "autres logos") ---- */
.ap-carte--logo{position:relative}
.ap-carte--logo .ap-photo{aspect-ratio:4/3;margin:0;overflow:hidden}
.ap-carte--logo .ap-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ap-carte--logo .ap-pastille{
  position:absolute;top:10px;left:10px;background:var(--plaque-haute);color:var(--argon);
  border:1px solid var(--filet);font-family:var(--police-lecture);font-weight:700;
  font-variant-numeric:tabular-nums;font-size:13px;padding:5px 10px;
}
.ap-carte--logo .ap-carte-corps p{margin:4px 0 0;font-size:13.5px}

/* ---- Classement éditorial numéroté ("Les logos les plus recherchés") :
   une grande carte + une liste numérotée, jamais une grille plate. ---- */
.ap-logos-classement{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:stretch}
@media (max-width:860px){.ap-logos-classement{grid-template-columns:1fr}}
.ap-logos-classement-hero{
  position:relative;display:block;background:var(--plaque);border:1px solid var(--filet);
}
.ap-logos-classement-hero .ap-photo{aspect-ratio:16/10;margin:0}
.ap-logos-classement-hero .numero{
  position:absolute;top:0;left:0;z-index:1;background:var(--rue);color:var(--neon-fixe);
  font-family:var(--police-boitier);font-size:14px;padding:8px 16px;
}
.ap-logos-classement-hero-corps{padding:20px 22px}
.ap-logos-classement-hero-corps h3{font-size:22px;margin-bottom:6px}
.ap-logos-classement-hero-corps p{margin:0;color:var(--sourde);font-size:14.5px}
.ap-logos-classement-liste{list-style:none;border-top:1px solid var(--filet)}
.ap-logos-classement-liste li{border-bottom:1px solid var(--filet)}
.ap-logos-classement-liste a{display:flex;align-items:center;gap:14px;padding:13px 4px}
.ap-logos-classement-liste .numero{
  font-family:var(--police-boitier);font-size:19px;color:var(--filet);width:32px;flex:none;
  transition:color .15s ease;
}
.ap-logos-classement-liste a:hover .numero{color:var(--accent)}
.ap-logos-classement-liste .ap-photo{width:64px;height:64px;flex:none;margin:0;aspect-ratio:1/1;overflow:hidden}
.ap-logos-classement-liste .ap-photo .ap-repere{display:none}
.ap-logos-classement-liste .liste-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-logos-classement-liste .marque{font-weight:600;font-size:15px}
.ap-logos-classement-liste .extrait{font-size:13px;color:var(--sourde);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Carte "bandeau" horizontale ("Nouveaux logos" sous 3 fiches) : image à
   gauche, texte à droite, pleine largeur — jamais un grand blanc orphelin à
   côté d'une carte unique (R-0837, retour Mathias 23/09). ---- */
.ap-logos-bandeaux-nouveaux{display:flex;flex-direction:column;gap:var(--gouttiere)}
.ap-carte--bandeau{display:grid;grid-template-columns:280px 1fr;background:var(--plaque);border:1px solid var(--filet);transition:border-color .18s ease}
.ap-carte--bandeau:hover{border-color:var(--accent)}
.ap-carte--bandeau .ap-photo{aspect-ratio:4/3;margin:0;height:100%;overflow:hidden}
.ap-carte--bandeau .ap-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ap-carte--bandeau .ap-carte-corps{padding:22px 28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.ap-carte--bandeau h3{font-size:20px;margin:0}
.ap-carte--bandeau .ap-meta{margin:0;font-size:14.5px;max-width:60ch}
@media (max-width:640px){
  .ap-carte--bandeau{grid-template-columns:1fr}
  .ap-carte--bandeau .ap-photo{aspect-ratio:16/9}
  .ap-carte--bandeau .ap-carte-corps{padding:18px 18px 22px}
}

/* ---- Index A-Z : vraie navigation par lettres, pas une ligne de liens ---- */
.ap-logos-az h2{margin-bottom:18px}
.ap-logos-az-nav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--filet);padding-bottom:24px;margin-bottom:8px}
.ap-logos-az-pill{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  font-family:var(--police-boitier);font-size:14px;background:var(--plaque);border:1px solid var(--filet);
}
a.ap-logos-az-pill{color:var(--encre)}
a.ap-logos-az-pill:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
span.ap-logos-az-pill{color:var(--filet);background:transparent;cursor:default}
.ap-logos-az-groupe{border-bottom:1px solid var(--filet);padding-block:18px;scroll-margin-top:24px}
.ap-logos-az-groupe:last-child{border-bottom:0}
.ap-logos-az-groupe h3{font-family:var(--police-boitier);font-size:15px;color:var(--accent);margin:0 0 10px}
.ap-logos-az-groupe ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 16px}
.ap-logos-az-groupe li a{display:block;padding:6px 2px;text-decoration:underline;text-decoration-color:var(--filet);text-underline-offset:3px}
.ap-logos-az-groupe li a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ---- Autres secteurs (bas de page secteur) ---- */
.ap-logos-secteurs-liens{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ---- Bandeau de tête de fiche (aperçu uniquement, voir inc/logos.php §10b) ---- */
.ap-logos-bandeau{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--plaque);border:1px solid var(--filet);padding:10px 16px;margin-bottom:22px;
  font-size:13.5px;
}
.ap-logos-bandeau-tag{color:var(--sourde)}
.ap-logos-bandeau-tag a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--filet)}
.ap-logos-bandeau-hub{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--filet)}

/* ---- Bloc "Autres logos du secteur" (fin de fiche) ---- */
.ap-logos-suite{padding-block:36px 4px}
.ap-logos-suite h2{font-size:1.5rem;margin-bottom:18px}
.ap-logos-suite-liens{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ---- Pont métier ("votre logo en enseigne") ---- */
.ap-logos-pont{
  display:flex;gap:22px;align-items:center;background:var(--rue);color:var(--lampe-fixe);
  padding:28px 26px;margin-block:36px;flex-wrap:wrap;
}
.ap-logos-pont-illu{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.ap-logos-pont-illu .picto{width:30px;height:30px;stroke:var(--neon-fixe);stroke-width:1.5;fill:none}
.ap-logos-pont-corps{flex:1;min-width:240px}
.ap-logos-pont-corps h2{color:var(--lampe-fixe);font-size:1.6rem;margin-bottom:8px}
.ap-logos-pont-corps p{color:#D8CFD6;margin-bottom:16px;max-width:64ch}
.ap-logos-pont-liens{display:flex;flex-wrap:wrap;gap:10px}
.ap-logos-pont-liens .ap-bouton--fantome{border-color:rgba(255,255,255,.35);color:var(--lampe-fixe)}
.ap-logos-pont-liens .ap-bouton--fantome:hover{background:rgba(255,255,255,.1)}
@media (max-width:640px){.ap-logos-pont{padding:22px 18px}}

/* ---- Rythme vertical régulier entre sections (R-0837, passe élégance
   23/09) : une seule règle d'espacement, jamais de padding ad-hoc dispersé
   dans les gabarits — jamais deux sections collées, jamais de blanc orphelin. ---- */
.ap-logos-section{padding-block:52px}
.ap-logos-section--fil{padding-block:20px 0}
@media (max-width:640px){.ap-logos-section{padding-block:36px}}