/* ==========================================================================
   BizCoRa - Composants du site vitrine
   ========================================================================== */

/* ----- Boutons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.975rem; line-height: 1; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 0.9rem; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 50px rgba(67, 97, 238, 0.36); }

.btn--ghost { background: var(--surface); color: var(--ink-800); border-color: var(--border-strong); }
.btn--ghost:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }

.btn--light { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.btn--light:hover { color: #fff; background: rgba(255, 255, 255, 0.22); }

.btn--white { background: #fff; color: var(--brand-700); }
.btn--white:hover { color: var(--brand-800); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ----- Header ----- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--ink-900); }
.brand:hover { color: var(--ink-900); }
.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand b { color: var(--brand-600); font-weight: 700; }

/* Selecteur de langue */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; }
.lang-switch a { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); padding: 5px 9px; border-radius: var(--radius-full); line-height: 1; text-decoration: none; }
.lang-switch a:hover { color: var(--ink-900); }
.lang-switch a.is-active { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-xs); }
@media (max-width: 560px) { .lang-switch a { padding: 5px 7px; } }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a { color: var(--ink-700); font-weight: 500; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.96rem; }
.nav a:hover { color: var(--brand-700); background: var(--brand-50); }
.nav a.is-active { color: var(--brand-700); }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* CTA visible uniquement dans le menu mobile deroulant */
.nav-cta { display: none; }
@media (max-width: 920px) { .nav-cta { display: inline-flex; } }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border-strong); background: #fff; border-radius: var(--radius-sm); color: var(--ink-700); align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav, .header-actions .btn-desktop { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 16px 20px 22px; box-shadow: var(--shadow-lg);
    transform: translateY(-120%); transition: transform 280ms ease;
  }
  .nav.is-open { display: flex; transform: translateY(0); }
  .nav a { padding: 14px; font-size: 1rem; }
  .nav .btn { margin-top: 8px; height: 50px; }
}

/* ----- Hero ----- */
.hero { position: relative; padding: 72px 0 88px; background: var(--grad-hero); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  padding: 7px 14px 7px 8px; border-radius: var(--radius-full);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-700); margin-bottom: 22px;
}
.hero-badge .pill { background: var(--brand-50); color: var(--brand-700); font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); font-size: 0.78rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.07; margin-bottom: 22px; }
.hero h1 .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { font-size: 1.18rem; color: var(--text-muted); max-width: 560px; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; color: var(--text-muted); font-size: 0.9rem; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 17px; height: 17px; color: var(--success); }

.hero-visual { position: relative; }
.hero-visual .glow { position: absolute; inset: -40px; background: radial-gradient(circle at 60% 40%, rgba(67, 97, 238, 0.25), transparent 65%); filter: blur(20px); z-index: 0; }
/* ===========================================================================
   Cadre "tablette" hyper realiste - mutualise par le visuel hero (.device)
   et toutes les captures d'ecran (.shot). Donne aux illustrations l'aspect
   d'un vrai appareil (chassis metallique, camera frontale, reflet vitre,
   ombre portee profonde) au lieu d'une simple vignette plate.
   =========================================================================== */
.device, .shot {
  --tbl-bezel: 16px;          /* epaisseur du contour (bordure de l'ecran) */
  --tbl-radius: 30px;         /* arrondi du chassis */
  --tbl-screen-radius: 14px;  /* arrondi de la dalle */
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--tbl-bezel);
  border-radius: var(--tbl-radius);
  background: linear-gradient(160deg, #323b51 0%, #1b2233 24%, #0c1019 62%, #070a12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),   /* arete brillante superieure */
    inset 0 -2px 6px rgba(0, 0, 0, 0.6),         /* ombre interne inferieure */
    0 2px 6px rgba(13, 18, 38, 0.18),
    0 26px 50px -18px rgba(13, 18, 38, 0.45),    /* ombre portee profonde */
    0 44px 90px -34px rgba(13, 18, 38, 0.38);
  cursor: zoom-in;
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 500ms ease;
}
/* Camera frontale, centree sur le contour superieur */
.device::before, .shot::before {
  content: "";
  position: absolute;
  top: calc(var(--tbl-bezel) * 0.5);
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #51648a 0%, #18203a 55%, #05070d 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 3px rgba(120, 160, 255, 0.35);
  z-index: 4;
  pointer-events: none;
}
/* La dalle : l'illustration occupe tout l'ecran, coins arrondis */
.device img, .shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tbl-screen-radius);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  background: #fff;
}
/* Reflet vitre diagonal pose sur la dalle (purement decoratif) */
.device::after, .shot::after {
  content: "";
  position: absolute;
  inset: var(--tbl-bezel);
  border-radius: var(--tbl-screen-radius);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 16%, rgba(255, 255, 255, 0) 34%);
  pointer-events: none;
  z-index: 3;
}
/* Inclinaison 3D du visuel hero (premiere image, reference de l'identite) */
.device { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); }
.device:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
/* Captures : meme appareil, inclinaison plus douce, se redresse au survol */
.shot { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.shot:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg) translateY(-5px); }
.floating {
  position: absolute; z-index: 2;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md);
  border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; align-items: center; gap: 11px; font-size: 0.85rem; font-weight: 600; color: var(--ink-800);
  animation: floaty 4s ease-in-out infinite;
}
.floating .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.floating .ic svg { width: 18px; height: 18px; }
.floating small { display: block; color: var(--text-subtle); font-weight: 500; font-size: 0.72rem; }
.floating--tl { top: 18px; left: -34px; animation-delay: 0s; }
.floating--br { bottom: 28px; right: -28px; animation-delay: 1.5s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-content { text-align: center; }
  .hero-badge, .hero-cta { justify-content: center; }
  .hero-trust { justify-content: center; }
  .device { transform: none; max-width: 460px; margin: 0 auto; --tbl-bezel: 13px; --tbl-radius: 26px; }
  .floating--tl { left: 8px; }
  .floating--br { right: 8px; }
}
@media (max-width: 560px) { .floating { display: none; } }

/* ----- Bandeau de confiance / logos / stats ----- */
.trustbar { padding: 30px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.trustbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; }
.trustbar .label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.trustbar .chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink-700); }
.trustbar .chip svg { width: 20px; height: 20px; color: var(--brand-500); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-box { text-align: center; padding: 8px; }
.stat-box .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.stat-box .lbl { color: var(--text-muted); font-size: 0.95rem; margin-top: 8px; }
.section--dark .stat-box .num { background: linear-gradient(135deg, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section--dark .stat-box .lbl { color: var(--ink-300); }
@media (max-width: 640px) { .stats-row { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

/* ----- Cartes fonctionnalites ----- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.card .ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); margin-bottom: 18px;
}
.card .ic svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 0.97rem; }
.card .ic--violet { background: #f3e8ff; color: var(--accent-violet); }
.card .ic--cyan { background: #cffafe; color: #0891b2; }
.card .ic--green { background: #d1fae5; color: var(--success); }
.card .ic--amber { background: #fef3c7; color: var(--warning); }
.card .ic--rose { background: #ffe4e6; color: #e11d48; }

/* Liste a puces avec coche */
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-700); }
.checklist li svg { width: 20px; height: 20px; color: var(--success); margin-top: 2px; flex-shrink: 0; }
.checklist li b { color: var(--ink-900); }

/* ----- Split (texte + visuel) ----- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { display: block; width: 100%; }
.split h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.split p.lead { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 22px; }
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  /* Sur mobile, l'appareil se redresse et se centre, contour plus fin */
  .shot { transform: none; max-width: 540px; margin: 0 auto; --tbl-bezel: 13px; --tbl-radius: 26px; }
}

/* Le rendu "tablette" des captures (.shot) est defini avec .device plus haut.
   Variante photo (portrait, ex. createur) : simple cadre image, sans chassis. */
.shot--photo {
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transform: none;
  cursor: default;
  overflow: hidden;
}
.shot--photo::before, .shot--photo::after { content: none; }
.shot--photo:hover { transform: none; }
.shot--photo picture { display: block; }
.shot--photo img { border-radius: var(--radius-xl); box-shadow: none; background: none; }

/* ----- Etapes "comment ca marche" ----- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step .num { width: 46px; height: 46px; border-radius: var(--radius-full); background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow-brand); margin-bottom: 16px; }
.step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ----- Roles (onglets simples en cartes) ----- */
.role-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.role-card__head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.role-card__head .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.role-card__head .ic svg { width: 24px; height: 24px; }
.role-card__head h3 { font-size: 1.15rem; }
.role-card__head small { color: var(--text-subtle); font-weight: 600; }
.role-card__body { padding: 22px 24px; }

/* ----- Plateformes ----- */
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.platform { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 12px 20px; font-weight: 600; color: var(--ink-700); box-shadow: var(--shadow-xs); }
.platform svg { width: 20px; height: 20px; color: var(--brand-600); }

/* ----- Securite (liste sombre) ----- */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sec-item { background: var(--ink-800); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: 24px; }
.sec-item .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(67,97,238,0.18); color: #a5b4fc; display: grid; place-items: center; margin-bottom: 16px; }
.sec-item .ic svg { width: 24px; height: 24px; }
.sec-item h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.sec-item p { color: var(--ink-300); font-size: 0.94rem; }
@media (max-width: 920px) { .sec-grid { grid-template-columns: 1fr; } }

/* ----- Tarifs ----- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-sm); }
.plan--featured { border-color: var(--brand-400); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.plan__tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-brand); color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-full); box-shadow: var(--shadow-brand); }
.plan h2 { font-size: 1.3rem; margin-bottom: 6px; }
.plan .plan__desc { color: var(--text-muted); font-size: 0.92rem; min-height: 42px; }
.plan .price { font-family: var(--font-display); margin: 18px 0 4px; }
.plan .price .amount { font-size: 2.6rem; font-weight: 800; color: var(--ink-900); }
.plan .price .per { color: var(--text-subtle); font-weight: 600; }
.plan .price-note { color: var(--text-subtle); font-size: 0.85rem; margin-bottom: 22px; }
.plan .checklist { margin: 6px 0 26px; }
.plan .checklist li { font-size: 0.94rem; }
.plan .btn { margin-top: auto; }
@media (max-width: 920px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .plan--featured { transform: none; } }

/* ----- FAQ ----- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.faq-item.is-open { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 20px 22px; background: none; border: none; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--ink-900); }
.faq-q .chev { width: 22px; height: 22px; color: var(--brand-600); transition: transform var(--transition); flex-shrink: 0; }
.faq-item.is-open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
.faq-a__inner { padding: 0 22px 22px; color: var(--text-muted); }
.faq-a__inner p + p { margin-top: 12px; }

/* ----- CTA final ----- */
.cta-banner { position: relative; overflow: hidden; background: var(--grad-brand); border-radius: var(--radius-xl); padding: 56px; text-align: center; box-shadow: var(--shadow-brand); }
.cta-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 80% -20%, rgba(255,255,255,0.22), transparent 60%); pointer-events: none; }
.cta-banner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; position: relative; }
.cta-banner p { color: rgba(255,255,255,0.92); font-size: 1.1rem; max-width: 620px; margin: 0 auto 28px; position: relative; }
.cta-banner .hero-cta { justify-content: center; position: relative; }
@media (max-width: 640px) { .cta-banner { padding: 40px 24px; } }

/* ----- Footer ----- */
.site-footer { background: var(--ink-900); color: var(--ink-300); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-bottom: 14px; }
.footer-brand img { width: 52px; height: 52px; object-fit: contain; }
.site-footer p { color: var(--ink-400); font-size: 0.94rem; max-width: 320px; }
.footer-col h3 { color: #fff; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: var(--ink-300); font-size: 0.95rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: var(--ink-300); font-size: 0.95rem; margin-bottom: 10px; }
.footer-contact svg { width: 17px; height: 17px; color: var(--brand-300); }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--ink-200); border: 1px solid rgba(255,255,255,0.08); }
.socials a:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; color: var(--ink-400); font-size: 0.88rem; }
.footer-bottom .links { display: flex; gap: 18px; }
.footer-bottom .links a { color: var(--ink-300); }
.footer-bottom .links a:hover { color: #fff; }

/* Accessibilite : les liens dans le corps de texte sont soulignes (pas seulement la couleur) */
main p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
main p a:not(.btn):hover { text-decoration: none; }
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ----- Page hero (sous-pages) ----- */
.page-hero { background: var(--grad-hero); padding: 64px 0 48px; text-align: center; border-bottom: 1px solid var(--border); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.page-hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 680px; margin: 0 auto; }
.breadcrumbs { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.86rem; color: var(--text-subtle); margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-subtle); }
.breadcrumbs a:hover { color: var(--brand-600); }

/* ----- Tableau comparatif ----- */
.compare { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { background: var(--bg-soft); font-size: 0.92rem; }
.compare td.tick svg { width: 20px; height: 20px; color: var(--success); }
.compare td.cross { color: var(--text-subtle); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare-wrap { overflow-x: auto; }

/* ==========================================================================
   Champs de formulaire - systeme unifie
   Une seule identite visuelle pour TOUS les formulaires du site :
   - formulaire de contact (.field input/select/textarea)
   - inscription / verification d'email (.form-input, .form-label, .form-error)
   Ces styles sont l'unique source de verite (plus de CSS de formulaire inline
   dans les pages) : meme rendu, memes etats (hover, focus, invalide, desactive).
   ========================================================================== */
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

.field label,
.form-label {
  display: block; font-family: var(--font-sans);
  font-weight: 600; font-size: 0.9rem;
  color: var(--ink-800); margin-bottom: 8px;
}

.field input, .field select, .field textarea,
.form-input {
  width: 100%;
  padding: 12px 15px;
  font-family: inherit; font-size: 0.97rem; line-height: 1.45;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  -webkit-appearance: none; appearance: none;
}

.field input::placeholder, .field textarea::placeholder,
.form-input::placeholder { color: var(--neutral-400); opacity: 1; }

.field input:hover, .field select:hover, .field textarea:hover,
.form-input:hover { border-color: var(--neutral-300); }

.field input:focus, .field select:focus, .field textarea:focus,
.form-input:focus {
  border-color: var(--brand-500);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--brand-100);
}

.field input:disabled, .field select:disabled, .field textarea:disabled,
.form-input:disabled, .form-input[readonly] {
  background: var(--neutral-100);
  color: var(--neutral-400);
  cursor: not-allowed;
  box-shadow: none;
}

/* Etat invalide (classe .is-invalid posee par la validation JS) */
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid,
.form-input.is-invalid { border-color: var(--danger); }
.field .is-invalid:focus,
.form-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); }

.form-error { display: block; font-size: 0.78rem; color: var(--danger); margin-top: 6px; min-height: 1em; }

.field textarea, textarea.form-input { min-height: 140px; resize: vertical; }

/* Selects : chevron personnalise (appearance:none retire la fleche native) */
.field select,
select.form-input {
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.form-note { font-size: 0.85rem; color: var(--text-subtle); }

@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }

.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-xs); }
.info-card .info-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.info-card .info-item:last-child { border-bottom: none; }
.info-card .info-item .ic { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; flex-shrink: 0; }
.info-card .info-item .ic svg { width: 22px; height: 22px; }
.info-card .info-item h3 { font-size: 1rem; margin-bottom: 2px; }
.info-card .info-item a, .info-card .info-item p { color: var(--text-muted); }

/* ----- Bouton retour en haut ----- */
.to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--grad-brand); color: #fff; border: none; display: grid; place-items: center; box-shadow: var(--shadow-brand); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 90; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 22px; height: 22px; }

/* ----- Badge inline ----- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-full); background: var(--brand-50); color: var(--brand-700); }
.tag--green { background: #d1fae5; color: var(--success); }
.tag--amber { background: #fef3c7; color: #b45309; }

/* ----- Mini-recit par fonctionnalite (scenario du quotidien) ----- */
.feature-story {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--brand-50); border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 22px;
  font-style: italic; color: var(--ink-800); font-size: 0.97rem; line-height: 1.65;
}
.feature-story svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; opacity: 0.45; color: var(--brand-600); }
.section--dark .feature-story { background: rgba(67, 97, 238, 0.16); color: var(--ink-200); border-left-color: var(--brand-300); }
.section--dark .feature-story svg { color: var(--brand-200); }

/* ----- Recit / storytelling (section sombre) ----- */
.story { max-width: 760px; margin: 0 auto; }
.story p { font-size: 1.12rem; line-height: 1.9; margin-bottom: 20px; }
.story p:last-child { margin-bottom: 0; }
.section--dark .story p { color: var(--ink-200); }
.story__close { font-weight: 600; }
.section--dark .story__close { color: #fff; }
@media (max-width: 560px) { .story p { font-size: 1.04rem; line-height: 1.8; } }

/* ===========================================================================
   Lightbox - apercu agrandi des captures au clic (cree dynamiquement par
   site.js, aucun balisage en dur dans les pages). L'apercu reprend le cadre
   "tablette" pour rester coherent avec le reste du site.
   =========================================================================== */
body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(8, 11, 22, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__frame {
  position: relative;
  width: 100%;
  max-width: min(1180px, 100%);
  padding: clamp(10px, 1.6vw, 20px);
  background: linear-gradient(160deg, #323b51 0%, #1b2233 28%, #0c1019 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: scale(0.94) translateY(10px);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lightbox.is-open .lightbox__frame { transform: none; }
.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: clamp(8px, 1.2vw, 14px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.lightbox__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-900);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform 150ms ease, background 150ms ease;
}
.lightbox__close:hover { transform: scale(1.06); background: var(--ink-50); }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -38px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  padding: 0 12px;
}
@media (max-width: 560px) {
  .lightbox__close { top: -10px; right: -10px; width: 40px; height: 40px; }
  .lightbox__caption { bottom: -32px; font-size: 0.82rem; }
}