/* ===== Réalisations page-specific ===== */
  /* Base mobile : remplissage vertical de 12 px, soit une cible tactile de
     44 px. La typographie ne bouge pas ; le remplissage du design (9 px)
     revient au palier 900. */
  .filterbar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-10)}
  .filterbar button{font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-600);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-full);padding:12px 18px;cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
  .filterbar button:hover{border-color:var(--navy);color:var(--navy)}
  .filterbar button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

  /* auto-fill : le nombre de réalisations est piloté par le back-office, et
     le filtre JS (data-filter) peut en masquer suffisamment pour n'en
     laisser qu'1 visible — un cas courant, pas seulement une collection vide
     au départ. auto-fit aurait étiré .case__cover (aspect-ratio 16/10) sur
     toute la largeur ; auto-fill garde la largeur naturelle de la piste,
     comme .team dans about.css. */
  .cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-6);margin-top:var(--space-10)}
  .case{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#fff;transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .case:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .case.is-hidden{display:none}
  .case__cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--navy-800)}
  .case__cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.14) 1px,transparent 1px);background-size:26px 26px}
  .case__cover svg{position:absolute;inset:0;width:100%;height:100%}
  /* Cover photographique (image mise en avant ou visuel de démo bundlé). Le SVG
     décoratif et sa grille ne sont rendus que lorsqu'il n'y a PAS d'image
     (card-realisation.php), donc pas de superposition à gérer ici. */
  .case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow,.5s) var(--ease-out)}
  .case:hover .case__img{transform:scale(1.045)}
  /* Voile sombre en haut : garantit la lisibilité du badge (angle sup. gauche)
     quel que soit le cliché, sans assombrir toute l'image. */
  .case__cover--img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,20,45,.34),rgba(4,20,45,0) 42%);pointer-events:none}
  .case__cat{position:absolute;top:12px;left:12px;z-index:2}
  .case__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
  .case__client{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-500)}
  .case__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);line-height:1.25;transition:color var(--dur-base)}
  .case:hover .case__title{color:var(--blue-600)}
  .case__metric{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;align-items:baseline;gap:var(--space-3)}
  .case__metric .n{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--navy);line-height:1}
  .case__metric .n b{color:var(--orange);font-weight:400}
  .case__metric .l{font-size:var(--text-xs);color:var(--neutral-500);line-height:1.3}
  /* Affordance de clic (rendue seulement si la carte a une URL, cf.
     card-realisation.php). margin-top:auto la plaque en pied → cas courant
     « photo + titre + desc, sans métrique » : le lien ancre le bas de carte au
     lieu d'un vide plat. Quand une métrique la précède, on annule l'auto (le
     ~ ci-dessous) : la métrique garde son pincement en pied et le lien la suit. */
  .case__more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--blue-500)}
  .case__more svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
  .case:hover .case__more{color:var(--blue-600)}
  .case:hover .case__more svg{transform:translateX(3px)}
  .case__metric ~ .case__more{margin-top:var(--space-4)}

  /* case--featured : modificateur du composant carte (template-parts/content/card-realisation.php).
     Fente non utilisée par une entrée à ce jour ; style minimal pour que la
     grille reste correcte le jour où une réalisation est marquée featured. */
  .case--featured{grid-column:auto}
  .case--featured .case__cover{aspect-ratio:21/9}
  .case--featured .case__title{font-size:var(--text-xl)}

  /* testimonial */
  .quote{max-width:60ch;margin:0 auto;text-align:center}
  .quote p{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.8vw,var(--text-3xl));line-height:1.3;color:var(--navy);letter-spacing:-.01em}
  .quote .mark{color:var(--orange);font-size:1.4em;line-height:0;vertical-align:-.15em}
  .quote .who{margin-top:var(--space-6);font-family:var(--font-data);font-size:var(--text-sm);color:var(--neutral-500);letter-spacing:.03em}
  .quote .who b{color:var(--navy)}

  /* ---- Paliers (mobile-first) ---- */
  @media(min-width:640px){
    /* Sous deux pistes, une carte mise en avant ne peut pas en occuper deux. */
    .case--featured{grid-column:span 2}
  }
  @media(min-width:900px){
    .filterbar button{padding:9px 18px}
  }