/* ------------------------------------------------------------------
   CSS de l'app - SANS Vite / SANS Tailwind
   Bootstrap est chargé via CDN dans le layout.
------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   FOND GLOBAL — DÉGRADÉ CLAIR MAIS VISIBLE
------------------------------------------------------------------- */

html, body {
  min-height: 100%;
}

body {
  background-color: #f8fafc; /* fallback */
  background-image: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.10),  /* bleu ciel doux */
    rgba(59, 130, 246, 0.08),  /* bleu primaire léger */
    rgba(30, 64, 175, 0.06),   /* bleu acier / navy clair */
    rgba(248, 250, 252, 1)     /* quasi blanc */
  );
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #0f172a;
}


/* ------------------------------------------------------------------
   NAV active (soulignement animé)
------------------------------------------------------------------- */
.nav-link.active { font-weight: 600; position: relative; }
.nav-link.active::after {
  content: "";
  position: absolute; left: .5rem; right: .5rem; bottom: .35rem;
  height: 2px; background: #0d6efd; border-radius: 2px;
}

/* ------------------------------------------------------------------
   HERO : transparent pour voir le fond + panneau lisible (verre dépoli)
------------------------------------------------------------------- */
.hero { background: transparent; }
.hero .container{
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(140%) blur(6px);
  border-radius: 1rem;
  padding: 2rem;
}

/* ------------------------------------------------------------------
   Texte à dégradé
------------------------------------------------------------------- */
.gradient-text{
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* renfort Safari */
}

/* ------------------------------------------------------------------
   Cartes / surfaces (lisibilité sur fond coloré)
------------------------------------------------------------------- */
.card, .navbar, .dropdown-menu, .offcanvas, .modal-content{
  background-color:#fff;
}

/* ------------------------------------------------------------------
   Carte template (tes vignettes maquettes)
------------------------------------------------------------------- */
.gradient-frame { background: linear-gradient(135deg, #c7d2fe, #a5f3fc); }
.template-link { display:block; border-radius:1rem; }
.template-card { transition: transform .25s ease, box-shadow .25s ease; }
.template-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(2,6,23,.12); }

.template-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eef2ff;
  background-image: var(--template-bg);
  background-size: cover;
  background-position: center;
}

.chip{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-block; padding: 4px 10px; font-size: 12px;
  background: rgba(255,255,255,.95); border: 1px solid #e5e7eb; border-radius: 999px;
}

/* Badges inline (icônes SVG alignés) */
.list-inline .align-middle svg{ vertical-align: -2px; margin-right: .35rem; }

/* ---- Process cards ---- */
.process-card {
  border: 1px solid #e6e9f2;            /* fin liseré comme sur la capture */
  border-radius: 1rem;                   /* arrondi doux (Bootstrap .rounded-4) */
}

.step-badge {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  border-radius: 999px;
  background: #0f172a;                   /* pastille foncée */
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  flex: 0 0 36px;
}

.process-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(16,24,40,.08);
  transition: .2s ease;
}

/* ---- Projets : cartes, vignettes, chips ---- */
.project-card { border: 1px solid #e6e9f2; }

.project-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #f8fafc;
}

.placeholder-gradient {
  background-image: linear-gradient(135deg, #eef2ff, #e6fffb);
}

.chip-badge {
  display: inline-block;
  padding: .25rem .55rem;
  font-size: .75rem;
  color: #475569; /* slate-600 like */
  background: #f8fafc;
  border: 1px solid #e6e9f2;
  border-radius: 999px;
}

/* --- Témoignages (cadre visible) --- */
.testimonial-card{
  background:#fff;
  border:2px solid #dbe2f1;           /* cadre plus marqué */
  border-radius:1rem;
  box-shadow:0 8px 24px rgba(2,6,23,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.testimonial-card:hover{
  border-color:#c7d2e4;
  box-shadow:0 12px 28px rgba(2,6,23,.08);
  transform: translateY(-1px);
}

.avatar-grad{
  width:48px;height:48px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #a5f3fc, #c7d2fe);
  border:1px solid #e6e9f2;
}


/* --- CTA --- */
#cta .btn{ min-height:48px; }
#cta .btn:hover{ transform: translateY(-1px); }

/* --- Footer --- */
.site-footer a.link-dark:hover{ text-decoration: underline; }

/* Détails étendus toujours visibles */
.more-details { white-space: pre-line; }
.more-details-box {
  background:#fff;
  border:1px solid #e6e9f2;
  border-radius:.75rem;
  padding:.75rem 1rem;
}


/* Force un bloc carré en haut de carte (décoratif) */
.details-box, .example-box{
  background:#fff;
  border:1px solid #e6e9f2;
  border-radius:.75rem;
  padding:1rem;
}
/* Justification lisible et assez cross-browser */
.justy-text { text-align-last: left; } /* selon goût ; support raisonnable */

/* Process page */
.process-card { border:1px solid #e6e9f2; border-radius:1rem; }
.process-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(16,24,40,.08); transition:.2s ease; }

.process-icon {
  width:56px; height:56px; flex:0 0 56px;
  border-radius:14px;
  background: linear-gradient(135deg, #eef2ff, #cffafe);
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e6e9f2;
}
.process-icon svg { width:34px; height:34px; }

/* ratio util */
.ratio.ratio-21x9 { --bs-aspect-ratio: calc(100% * 9 / 21); }

/* Paragraphe justifié si tu utilises la classe */
.justy-text{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
}
/* Cartes projets */
.project-card:hover{ transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(16,24,40,.08); transition:.2s ease; }
.project-link{ display:block; border-top-left-radius:.75rem; border-top-right-radius:.75rem; overflow:hidden; }
.project-thumb{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; }

/* séparation douce entre sections */
.section-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

/* ------------------------------------------------------------------
   Nettoyage: styles sortis des vues
------------------------------------------------------------------- */

/* Toasts au-dessus des modals/offcanvas */
.toast-container { z-index: 1100; }

/* Honeypot anti-spam (champ caché) */
.honeypot { display: none !important; }

/* Avatar témoignages (remplace l'inline style) */
.testimonial-avatar{ width:48px; height:48px; object-fit:cover; border:1px solid #e6e9f2; }

/* Diagramme process (foreignObject) */
.process-diagram .desc{
  font:400 12px/1.3 system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  color:#64748b;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
/* ------------------------------------------------------------------
   Tech stack – titre + logos larges
------------------------------------------------------------------- */

.tech-stack{
  max-width: 1100px;               /* ≈ largeur des 4 cards */
  margin: 32px auto 0;
  text-align: center;
}

.tech-stack-title{
  margin-bottom: 18px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, .55);    /* slate-700 adouci */
}

.tech-logos{
  list-style:none;
  display:flex;
  justify-content: space-between;  /* ⬅️ remplit la largeur */
  align-items:center;
  gap: 24px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.tech-logos li{
  flex: 1 1 auto;                  /* ⬅️ répartit les logos */
  display:flex;
  justify-content:center;
}

.tech-logos img{
  height: 42px;                    /* légèrement plus grands */
  width: auto;
  opacity: .95;
  transition: transform .15s ease, filter .15s ease;
}

.tech-logos img:hover{
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.15));
}

/* ------------------------------------------------------------------
   HERO avec background SVG
------------------------------------------------------------------- */

.hero-tech{
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 6rem 0;
  overflow: hidden;

  /* LE BACKGROUND */
  background-image: url("/assets/background/bg-hero-mac.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Contenu lisible */
.hero-tech .container{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-radius: 1.5rem;
  padding: 3.5rem;
  box-shadow: 0 20px 60px rgba(15,23,42,.12);
}

/* ------------------------------------------------------------------
   Section Services – background hero discret
------------------------------------------------------------------- */

.section-services-bg{
  position: relative;
  overflow: hidden;

  background-image: url("/assets/background/bg-hero.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.section-services-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(248, 250, 252, 0.0);
  z-index: 0;
}

/* Contenu au-dessus */
.section-services-bg > *{
  position: relative;
  z-index: 1;
}

.text-description{
  color: #cfd5dd;
  font-weight: 600;
}


/* ------------------------------------------------------------------
   Section projets – background discret
------------------------------------------------------------------- */
.section-projets-bg{
  position: relative;
  overflow: hidden;

  background-image: url("/assets/background/polygonebleu.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

.section-projets-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(248, 250, 252, 0);
  z-index: 0;
}

/* Contenu au-dessus */
.section-projets-bg > *{
  position: relative;
  z-index: 1;
}

.bg-base{
  background-color: #cad3ef;
}

.bg-waze-top{
  position: relative;
  overflow: hidden;

  background-image: url("/assets/background/waze-blue-top.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bg-waze-top::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(248, 250, 252, 0.0);
  z-index: 0;
  pointer-events: none;
}