/* ================================================================
   KAÏROMOD - css/fond-base.css
   Fond photo partagé des pages « après la commande » :
   success.html (paiement validé), cancel.html (paiement annulé) et
   suivi-commande.html.

   POURQUOI UNE FEUILLE À PART
   Les trois pages racontent la même étape du parcours : le client a
   quitté Stripe et revient chez KaïroMod. Le même décor les relie, et
   un seul fichier évite que les trois copies ne divergent au premier
   réglage.

   POURQUOI UN CALQUE FIXE ET NON background-attachment:fixed
   Safari iOS ignore background-attachment:fixed et agrandit l'image à
   toute la hauteur de la page, qui devient floue et mal cadrée. Un
   pseudo-élément en position:fixed reste net et cadré sur l'écran,
   partout.

   POURQUOI UN VOILE
   La photo est claire mais contrastée : ombres de feuilles, azulejos
   bleu soutenu. Sans voile, un texte gris posé sur un motif bleu devient
   illisible. Le voile est plus dense à gauche et en haut, là où se
   trouvent les titres, et laisse respirer les azulejos à droite.

   Ne jamais animer backdrop-filter ici (voir IONOS/CLAUDE.md) : le flou
   des cartes est posé une fois pour toutes.
   ================================================================ */

:root{
  /* voile des transitions de page : ton de la photo, sans éclair noir */
  --km-veil:#f3f1ee;
  --fb-card:rgba(255,255,255,.80);
  --fb-card-strong:rgba(255,255,255,.90);
  --fb-card-line:rgba(255,255,255,.75);
  --fb-card-shadow:0 18px 50px rgba(20,28,50,.14), 0 2px 8px rgba(20,28,50,.05);
  /* bleu relevé sur l'émail des azulejos de la photo (même mesure que le
     titre de l'accueil) : les accents répondent au décor */
  --fb-azur:#265793;
}

html{background:#f3f1ee}
body.fond-base{background:transparent !important;position:relative;isolation:isolate}

body.fond-base::before,
body.fond-base::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
}
body.fond-base::before{
  background:#f3f1ee url("../images/fond-base.webp") 62% center/cover no-repeat;
}
body.fond-base::after{
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(248,247,245,.86) 0%, rgba(248,247,245,.62) 45%, rgba(248,247,245,.30) 100%),
    linear-gradient(180deg, rgba(248,247,245,.55) 0%, rgba(248,247,245,.10) 38%, rgba(248,247,245,.45) 100%);
}

/* Mobile : image plus légère (47 Ko contre 115 Ko), cadrée sur les
   azulejos, et voile uniforme puisque le contenu occupe toute la largeur. */
@media (max-width:768px){
  body.fond-base::before{
    background-image:url("../images/fond-base-mobile.webp");
    background-position:72% center;
  }
  body.fond-base::after{
    background:linear-gradient(180deg, rgba(248,247,245,.80) 0%, rgba(248,247,245,.66) 50%, rgba(248,247,245,.78) 100%);
  }
}

/* Carte en verre dépoli : lisible sur la photo, sans la masquer. */
.fb-glass{
  background:var(--fb-card);
  border:1px solid var(--fb-card-line);
  box-shadow:var(--fb-card-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
/* Sans backdrop-filter, le verre serait un voile laiteux peu lisible :
   on repasse sur un blanc presque plein. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fb-glass{background:var(--fb-card-strong)}
}