/* === BfastAI — Fiches Réalisations à volet retournable =======================
   Partagé par l'accueil (section Réalisations) et realisation.html : lié dans
   le <head> des deux pages. Les fiches elles-mêmes sont écrites en dur dans
   le HTML de chacune, pour être lisibles sans JavaScript : en ajouter ou en
   corriger une, c'est le faire sur les deux pages.

   Chaque fiche est coupée en deux : à gauche le texte (année, secteur, titre,
   aperçu), à droite un volet qui pivote sur l'axe X au survol. La face avant
   porte le chiffre clé, la face arrière le détail Défi / Solution / Résultat.

   Les deux faces sont superposées en absolu dans .bf-case-flip : c'est
   `backface-visibility:hidden` qui masque celle qui tourne le dos, et la
   hauteur du volet (min-height) qui tient la mise en page pendant la rotation.

   Sous 880 px la rotation est abandonnée : les deux faces reprennent le flux
   l'une sous l'autre, car il n'y a pas de survol au doigt. */
.bf-case-list{
  display:flex; flex-direction:column; gap:32px;
  max-width:980px; margin:0 auto;
}
.bf-case{
  position:relative;
  display:flex; align-items:stretch; gap:16px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,252,248,0.22);
  background:linear-gradient(180deg,rgba(20,20,32,0.92) 0%,rgba(10,10,15,0.30) 100%);
  box-shadow:inset 0 0.3px 1.5px -1px rgba(255,255,255,0.16),
             inset 0 1.14px 5.72px -2.17px rgba(255,255,255,0.145),
             inset 0 5px 25px -3.25px rgba(255,255,255,0.088);
  overflow:hidden;
  outline:none;
}
.bf-case:focus-visible{ border-color:rgba(163,123,255,0.65); }

/* halo violet qui s'allume derrière le volet au survol */
.bf-case-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:16px;
  background:radial-gradient(63.5% 58.5% at 80.4% 50%, rgba(139,92,246,0.30) 0%, rgba(139,92,246,0) 100%);
  filter:blur(80px); -webkit-filter:blur(80px);
  opacity:0; transition:opacity .5s ease;
}
/* focus-visible et non focus-within : un clic de souris donne aussi le focus
   à la fiche (tabindex), qui resterait alors retournée après le départ du
   pointeur. focus-visible ne s'allume que pour le clavier. */
.bf-case:hover .bf-case-glow,
.bf-case:focus-visible .bf-case-glow{ opacity:1; }

/* ---- colonne texte ---- */
.bf-case-info{
  position:relative; z-index:1;
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:8px; text-align:center;
}
.bf-case-year{
  align-self:flex-start;
  padding:8px; border-radius:16px;
  background:#8B5CF6;
  box-shadow:0 6px 20px rgba(139,92,246,0.35);
}
.bf-case-year span{
  display:flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; border-radius:9px;
  background:#0F0F18;
  font-family:'JetBrains Mono',monospace; font-size:14px; color:#FFFCF8;
}
.bf-case-head{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.bf-case-sector{ margin:0; font-size:14px; color:rgba(255,252,248,0.60); }
.bf-case-title{
  margin:0;
  font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-0.02em; line-height:1.18;
  color:#A37BFF;
}
.bf-case-line{ width:100%; height:1px; background:rgba(255,252,248,0.22); }
.bf-case-overview{ display:flex; flex-direction:column; gap:8px; padding-top:16px; }
.bf-case-overview h4{ margin:0; font-size:15px; font-weight:600; color:#FFFCF8; }
.bf-case-overview p{ margin:0; font-size:14px; line-height:1.6; color:rgba(255,252,248,0.62); }
/* Pastille-lien violette : « Lire l'étude de cas » des fiches, et aussi
   « Réserver une démo » des cartes Agents de l'accueil (même dessin). */
.bf-pill-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(163,123,255,0.55); background:rgba(139,92,246,0.10);
  color:var(--bf-violet-200,#C8AAFF); font-size:13px; font-weight:600; letter-spacing:0.01em;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.bf-pill-link:hover,
.bf-pill-link:focus-visible{ background:rgba(139,92,246,0.22); border-color:rgba(163,123,255,0.85); color:#FFFCF8; }
/* lien vers l'étude de cas détaillée : seulement sur les fiches qui en ont une
   (champ `page`, rendu sous <sc-if>), calé en bas de la colonne texte */
.bf-case-link{ margin-top:auto; }

/* ---- volet retournable ---- */
.bf-case-flip{
  position:relative; z-index:1;
  flex:1 1 0; min-width:0; min-height:300px;
  perspective:1200px;
}
.bf-case-face{
  position:absolute; inset:0;
  border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .75s cubic-bezier(.4,0,.2,1);
}
.bf-case-front{ transform:rotateX(0deg); }
.bf-case-back{
  transform:rotateX(-180deg);
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:18px;
  background:
    radial-gradient(80% 70% at 70% 30%, rgba(139,92,246,0.16) 0%, rgba(139,92,246,0) 70%),
    #0F0F18;
  border:1px solid rgba(255,252,248,0.22);
}
.bf-case:hover .bf-case-front,
.bf-case:focus-visible .bf-case-front{ transform:rotateX(180deg); }
.bf-case:hover .bf-case-back,
.bf-case:focus-visible .bf-case-back{ transform:rotateX(0deg); }
/* Au clavier, passer de la fiche à son lien « Lire l'étude de cas » retire le
   focus-visible de la fiche : sans ces règles, le volet se refermerait alors
   que le focus est toujours dedans. Règles à part : un navigateur sans :has()
   ignorerait sinon toute la liste de sélecteurs, survol compris. */
.bf-case:has(.bf-case-link:focus-visible){ border-color:rgba(163,123,255,0.65); }
.bf-case:has(.bf-case-link:focus-visible) .bf-case-glow{ opacity:1; }
.bf-case:has(.bf-case-link:focus-visible) .bf-case-front{ transform:rotateX(180deg); }
.bf-case:has(.bf-case-link:focus-visible) .bf-case-back{ transform:rotateX(0deg); }

.bf-case-visual{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:20px; text-align:center;
  border:1px solid rgba(255,252,248,0.10); border-radius:12px;
  background:
    radial-gradient(70% 60% at 78% 28%, rgba(139,92,246,0.30) 0%, rgba(139,92,246,0) 70%),
    linear-gradient(160deg,rgba(255,252,248,0.08) 0%,rgba(10,10,15,0.92) 70%);
}
.bf-case-tag{
  position:absolute; top:12px; left:14px;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,252,248,0.45);
}
.bf-case-metric{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:clamp(34px,5vw,52px); line-height:1; color:#FFFCF8;
}
.bf-case-metric-label{ font-size:13px; color:rgba(255,252,248,0.62); max-width:220px; }
.bf-case-hint{
  position:absolute; left:0; right:0; bottom:12px;
  font-size:11px; letter-spacing:0.06em; color:rgba(255,252,248,0.40);
}

.bf-case-block{ display:flex; flex-direction:column; gap:4px; }
.bf-case-label{ margin:0; font-size:13px; font-weight:600; color:#FFFCF8; }
.bf-case-text{ margin:0; font-size:13px; line-height:1.55; color:rgba(255,252,248,0.62); }

@media (max-width:880px){
  .bf-case{ flex-direction:column; }
  /* la fiche empilée n'a plus de hauteur imposée : les colonnes reprennent leur
     taille de contenu, sinon `flex:1 1 0` leur donnerait une base de 0 px et le
     volet s'écraserait à zéro */
  .bf-case-info{ flex:none; padding:8px 4px; }
  /* plus de rotation au doigt : les deux faces se lisent l'une sous l'autre */
  .bf-case-flip{ flex:none; min-height:0; perspective:none; display:flex; flex-direction:column; gap:12px; }
  .bf-case-face{ flex:none; position:relative; inset:auto; transform:none !important; backface-visibility:visible; -webkit-backface-visibility:visible; }
  .bf-case-front{ height:180px; }
  .bf-case-hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .bf-case-face{ transition:none; }
}