/* ============================================================
   Medical Place — Site vitrine
   Built on the Medical Place design tokens (colors_and_type.css)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---- type helpers ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--color-primary);
}
.section-title {
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(30px, 4vw, 46px); color: var(--color-text-primary);
  margin: 16px 0 0;
}
.section-lead {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  color: var(--color-text-secondary); max-width: 56ch; margin: 18px 0 0;
}
.text-cyan { color: var(--color-primary); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border-radius: 12px; padding: 12px 22px; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background-image: linear-gradient(to right, #38bdf8, #0284c7);
  color: #fff; box-shadow: 0 6px 18px rgba(14,165,233,0.30);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-primary); filter: brightness(1.04); }
.btn-ghost {
  background: #fff; color: var(--color-text-primary); border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-light {
  background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(6px);
}
.btn-light:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 14px; }
.btn-block { width: 100%; }

/* Pro Santé Connect button — white so the multicolor PSC mark reads correctly,
   with the signature cyan glow to keep it as the dominant CTA. */
.btn-psc {
  background: #fff; color: var(--color-text-primary);
  border: 2px solid var(--color-primary);
  box-shadow: 0 10px 30px rgba(14,165,233,0.35);
  white-space: normal; text-align: left; line-height: 1.25;
  animation: pscPulse 2.8s var(--ease-out) infinite;
}
.btn-psc:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(14,165,233,0.5); border-color: var(--color-primary); animation: none; }
@keyframes pscPulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(14,165,233,0.30); }
  50% { box-shadow: 0 12px 38px rgba(14,165,233,0.55); }
}
@media (prefers-reduced-motion: reduce) { .btn-psc { animation: none; } }
.btn-psc .psc-ic { height: 28px; width: auto; flex-shrink: 0; display: block; }
.btn-psc.btn-block { justify-content: center; text-align: center; }
/* on dark/gradient CTA panels the white button already pops; nothing extra needed */

/* Bouton officiel « s'identifier avec Pro Santé Connect » (kit ANS).
   L'image porte le libellé et le contour : la charte interdit de recomposer le
   visuel, donc pas de bordure ni de texte ajoutés. Le SVG ne dessine que le
   contour de la pilule, sans aplat — le fond blanc qu'elle exige est fourni ici,
   avec les rayons de l'asset (gauche en demi-cercle, coins droits à 12,67/141,25
   de la hauteur). Seuls le halo et le pulse du CTA dominant sont conservés. */
.btn-psc-official {
  --psc-btn-h: 56px;
  display: inline-block; line-height: 0; background: #fff;
  border-radius: calc(var(--psc-btn-h) * 0.5) calc(var(--psc-btn-h) * 0.0897)
                 calc(var(--psc-btn-h) * 0.0897) calc(var(--psc-btn-h) * 0.5);
  box-shadow: 0 10px 30px rgba(14,165,233,0.35);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  animation: pscPulse 2.8s var(--ease-out) infinite;
}
.btn-psc-official img { height: var(--psc-btn-h); width: auto; display: block; }
.btn-psc-official:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(14,165,233,0.5); animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-psc-official { animation: none; } }
@media (max-width: 560px) { .btn-psc-official { --psc-btn-h: 48px; } }

/* psc pill marker */
.psc-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--color-text-secondary);
}
.psc-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px rgba(21,128,61,0.14); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 70; height: 68px;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-xs); background: rgba(255,255,255,0.9); }
.nav .wrap-wide { display: flex; align-items: center; justify-content: space-between; }
.nav .wrap-wide > a:first-child { flex-shrink: 0; }
.nav-logo { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--color-text-secondary);
  padding: 9px 14px; border-radius: 10px; transition: all var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--color-primary); background: var(--color-primary-muted); }
.nav-links a.active { color: var(--color-primary); background: var(--color-primary-muted); font-weight: 600; }

/* nav dropdown « Pour qui ? » */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--color-text-secondary); padding: 9px 14px; border-radius: 10px; transition: all var(--dur-base) var(--ease-out); }
.nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn, .nav-drop-btn.active { color: var(--color-primary); background: var(--color-primary-muted); }
.nav-drop-btn.active { font-weight: 600; }
.nav-drop-btn svg { width: 15px; height: 15px; }
.nav-drop-menu { position: absolute; top: 100%; left: 0; margin-top: 8px; min-width: 236px; background: #ffffffee; backdrop-filter: blur(8px); border: 1px solid var(--color-border); border-radius: 16px; padding: 8px; box-shadow: 0 20px 45px rgba(15,23,42,0.14); display: none; flex-direction: column; z-index: 80; }
.nav-drop-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: flex; }
.nav-drop-menu a { border-radius: 10px; padding: 10px 12px; }
.drawer-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--color-text-muted, #71717a); padding: 14px 12px 2px; }

/* ============================================================
   PAGE HERO (dedicated pages)
   ============================================================ */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 72px;
  background: linear-gradient(to bottom right, var(--page-bg-start), var(--page-bg-mid), var(--page-bg-end)); }
.page-hero::after {
  content: ""; position: absolute; z-index: 0; top: -160px; right: -120px;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.26), rgba(56,189,248,0) 65%);
}
.page-hero > .wrap, .page-hero > .wrap-wide { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); font-weight: 500; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb svg { width: 14px; height: 14px; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; margin: 18px 0 0; }
.page-hero .sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--color-text-secondary); margin: 18px 0 0; max-width: 52ch; }
.page-hero .hero-cta { margin-top: 28px; }

/* section "en savoir plus" link button row */
.more-row { margin-top: 30px; }

/* steps / comment ça marche */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 26px; position: relative; }
.step .num { width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary-muted); color: var(--color-primary); font-weight: 700; display: grid; place-items: center; font-size: 16px; margin-bottom: 16px; }
.step h4 { margin: 0; font-size: 17px; font-weight: 600; }
.step p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }

/* faq accordion */
.faq { max-width: 760px; margin: 44px auto 0; }
.faq details { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 4px 20px; margin-bottom: 12px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; color: var(--color-text-muted); }
.faq summary .chev svg { width: 20px; height: 20px; display: block; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--color-text-secondary); }

/* feature-grid (3 across) reused on detail pages */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
@media (max-width: 980px) { .page-hero-grid { grid-template-columns: 1fr; gap: 40px; } .steps, .fgrid { grid-template-columns: 1fr; } }

/* navy variant of page hero (Confiance) */
.page-hero.dark { background: linear-gradient(150deg, #082f49 0%, #0c4a6e 55%, #075985 100%); color: #fff; }
.page-hero.dark::after { background: radial-gradient(circle, rgba(56,189,248,0.28), rgba(56,189,248,0) 65%); }
.page-hero.dark h1 { color: #fff; }
.page-hero.dark .sub { color: rgba(255,255,255,0.80); }
.page-hero.dark .eyebrow { color: #7ed4fa; }
.page-hero.dark .eyebrow::before { background: #7ed4fa; }
.page-hero.dark .breadcrumb, .page-hero.dark .breadcrumb a { color: rgba(255,255,255,0.62); }
.page-hero.dark .breadcrumb a:hover { color: #7ed4fa; }
.page-hero.dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; bottom: -200px; left: -160px;
  width: 620px; height: 620px;
  background: url("assets/logo-mark-cyan.png") no-repeat center / contain; opacity: 0.07;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 10px 18px; font-size: 14.5px; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--color-text-primary); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; isolation: isolate; padding: 64px 0 96px; overflow: hidden;
  background: linear-gradient(to bottom right, var(--page-bg-start), var(--page-bg-mid), var(--page-bg-end)); }
.hero::after {
  content: ""; position: absolute; z-index: 0; top: -180px; right: -160px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(56,189,248,0.30), rgba(56,189,248,0) 65%);
}
.hero > .wrap-wide, .hero > .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.03em; margin: 20px 0 0; color: var(--color-text-primary);
}
.hero p.sub {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; color: var(--color-text-secondary);
  margin: 22px 0 0; max-width: 50ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-trust {
  margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
}
.hero-trust .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 600; width: 100%; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--color-text-secondary); }
.trust-chip svg { width: 17px; height: 17px; color: var(--color-primary); }

/* ============================================================
   BROWSER MOCKUP FRAME
   ============================================================ */
.browser {
  border-radius: 16px; background: #fff; border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl); overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  background: #f5f7fa; border-bottom: 1px solid var(--color-border);
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-dots i:nth-child(1){ background:#ff5f57; } .browser-dots i:nth-child(2){ background:#febc2e; } .browser-dots i:nth-child(3){ background:#28c840; }
.browser-url {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--color-text-muted);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-url svg { width: 13px; height: 13px; color: var(--color-success); }
.browser-body { background: linear-gradient(to bottom right, #f8fafc, #e9eef7); padding: 18px; }

.hero-mock { position: relative; }
.float-card {
  position: absolute; background: #fff; border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 13px 15px;
  display: flex; align-items: center; gap: 11px; z-index: 3;
}
.float-card .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.float-card .ic svg { width: 20px; height: 20px; }
.float-card .t { font-size: 13px; font-weight: 600; line-height: 1.25; }
.float-card .s { font-size: 11.5px; color: var(--color-text-muted); }
.float-a { top: 22px; left: -34px; }
.float-b { bottom: 30px; right: -28px; }

/* ---- mini product UI primitives ---- */
.av { border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 14px; letter-spacing: -0.02em; }
.av-rd { border-radius: 50%; }
.g-magenta { background: linear-gradient(135deg, #d946ef, #9333ea); }
.g-cyan    { background: linear-gradient(135deg, #22d3ee, #0284c7); }
.g-purple  { background: linear-gradient(135deg, #818cf8, #6d28d9); }
.g-pink    { background: linear-gradient(135deg, #fb7185, #e11d48); }
.g-orange  { background: linear-gradient(135deg, #fbbf24, #ea580c); }
.g-teal    { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.g-blue    { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.badge-dr {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: var(--color-primary); background: var(--color-primary-muted); padding: 2px 8px; border-radius: 999px;
}
.badge-dr svg { width: 12px; height: 12px; }
.badge-rpps {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: var(--color-text-secondary); background: #f1f5f9; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--color-border);
}
.badge-rpps svg { width: 12px; height: 12px; color: var(--color-text-muted); }

/* feed mock */
.mk-post { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 15px; margin-bottom: 12px; }
.mk-post:last-child { margin-bottom: 0; }
.mk-head { display: flex; align-items: center; gap: 11px; }
.mk-head .meta { flex: 1; min-width: 0; }
.mk-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.mk-sub { font-size: 12px; color: var(--color-text-muted); }
.mk-text { font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary); margin: 11px 0 0; }
.mk-actions { display: flex; gap: 22px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--color-border); }
.mk-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }
.mk-act svg { width: 15px; height: 15px; }
.mk-composer { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.mk-composer .ph { flex: 1; background: #f1f5f9; border-radius: 999px; padding: 9px 15px; font-size: 13px; color: var(--color-text-muted); }
.mk-chiprow { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mk-chip { font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.mk-chip.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.section { padding: 96px 0; }
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

.bg-grad { position: relative; isolation: isolate;
  background: linear-gradient(to bottom right, var(--page-bg-start), var(--page-bg-mid), var(--page-bg-end)); }
/* plain sections: soft off-white tint instead of pure white */
.section:not(.bg-grad):not(.trust) { background: var(--page-bg-start); }

/* M icotype watermark */
.wm { position: relative; isolation: isolate; overflow: hidden; }
.wm > .wrap, .wm > .wrap-wide { position: relative; z-index: 1; }
.wm::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 640px; height: 640px;
  background: url("assets/logo-mark-cyan.png") no-repeat center / contain;
  opacity: 0.05;
}
.wm-tr::before { top: -120px; right: -140px; transform: rotate(8deg); }
.wm-bl::before { bottom: -160px; left: -180px; transform: rotate(-6deg); }

/* feature split row */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.rev .split-media { order: 2; }
.split.rev .split-text { order: 1; }
/* Les maquettes (browser mockups) ont un min-content large : sans min-width:0
   la colonne de grille refuse de rétrécir et la page déborde en largeur sur mobile. */
.split > *, .hero-grid > *, .page-hero-grid > *, .shots > *, .shots-side > *,
.founders > *, .legal-layout > * { min-width: 0; }
.feature-list { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.feature-item { display: flex; gap: 14px; align-items: flex-start; }
.feature-item .fi-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary-muted); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; }
.feature-item .fi-ic svg { width: 21px; height: 21px; }
.feature-item h4 { margin: 0; font-size: 16px; font-weight: 600; }
.feature-item p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-secondary); }

/* community cards mock */
.comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comm-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.comm-cover { height: 56px; position: relative; }
.comm-card .comm-body { padding: 12px 13px 14px; }
.comm-ava { width: 40px; height: 40px; border-radius: 12px; border: 3px solid #fff; margin-top: -32px; position: relative; display: grid; place-items: center; color: #fff; }
.comm-ava svg { width: 19px; height: 19px; }
.comm-card h5 { margin: 9px 0 2px; font-size: 14px; font-weight: 600; }
.comm-card .comm-meta { font-size: 11.5px; color: var(--color-text-muted); }
.comm-join { margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 999px; padding: 5px 0; text-align: center; }

/* annuaire profile mock */
.an-profile { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.an-banner { padding: 16px; background: linear-gradient(120deg, #e0f5ff, #eef2ff); display: flex; gap: 14px; align-items: center; }
.an-banner .av { width: 58px; height: 58px; font-size: 20px; position: relative; }
.an-banner .av .ck { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-success); border: 2px solid #fff; display: grid; place-items: center; }
.an-banner .av .ck svg { width: 11px; height: 11px; color: #fff; }
.an-name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-spec { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.an-tags { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.an-body { padding: 14px 16px; }
.an-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.an-tab { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; color: var(--color-text-secondary); display: inline-flex; gap: 6px; align-items: center; }
.an-tab.on { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.an-tab .ct { font-size: 10.5px; background: #e2e8f0; color: var(--color-text-secondary); border-radius: 999px; padding: 1px 6px; }
.an-row { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--color-border); border-radius: 11px; margin-bottom: 8px; }
.an-row .av { width: 34px; height: 34px; font-size: 12px; }
.an-row .meta { flex: 1; }
.an-row .rn { font-size: 13px; font-weight: 600; }
.an-row .rs { font-size: 11px; color: var(--color-text-muted); }
.an-row .rc { font-size: 11px; color: var(--color-text-secondary); background: #f1f5f9; border-radius: 999px; padding: 4px 10px; }

/* ============================================================
   PILLARS / VALUE ROW
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.pillars.four { grid-template-columns: repeat(4, 1fr); }
.pillars.five { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (max-width: 1180px) { .pillars.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pillars.four { grid-template-columns: 1fr; } }
.pillar {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 26px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
/* les boutons « En savoir plus » s'alignent en bas de carte, quelle que soit
   la longueur du texte au-dessus */
.pillar .more-row { margin-top: auto; padding-top: 30px; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-primary); border-color: rgba(14,165,233,0.4); }
.pillar .p-ic { width: 48px; height: 48px; border-radius: 13px; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.pillar .p-ic svg { width: 24px; height: 24px; }
.pillar h3 { margin: 0; font-size: 18px; font-weight: 600; }
.pillar p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }

/* ============================================================
   TRUST / CONFORMITÉ (navy band)
   ============================================================ */
.trust { position: relative; isolation: isolate; padding: 96px 0; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, #082f49 0%, #0c4a6e 55%, #075985 100%); }
.trust::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 760px; height: 760px;
  background: url("assets/logo-mark-cyan.png") no-repeat center / contain;
  opacity: 0.06;
}
.trust::after {
  content: ""; position: absolute; z-index: 0; bottom: -200px; left: -120px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.22), rgba(56,189,248,0) 65%);
}
.trust > .wrap, .trust > .wrap-wide { position: relative; z-index: 1; }
.trust .section-title { color: #fff; }
.trust .section-lead { color: rgba(255,255,255,0.78); }
.trust .eyebrow { color: #7ed4fa; }
.trust .eyebrow::before { background: #7ed4fa; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
/* 6 cartes : 3 + 3 plutôt qu'un 4 + 2 déséquilibré */
.trust-grid.six { grid-template-columns: repeat(3, 1fr); }
.trust-card {
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 24px; backdrop-filter: blur(4px);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.trust-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.09); }
.trust-card .tc-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(56,189,248,0.16); color: #7ed4fa; display: grid; place-items: center; margin-bottom: 16px; }
.trust-card .tc-ic svg { width: 23px; height: 23px; }
.trust-card h4 { margin: 0; font-size: 16.5px; font-weight: 600; color: #fff; }
.trust-card p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.72); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final { padding: 96px 0; }
.cta-box {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: 64px 56px; text-align: center;
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  box-shadow: var(--shadow-glow-primary);
}
.cta-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background: radial-gradient(circle at 80% -10%, rgba(255,255,255,0.28), transparent 45%);
}
.cta-box > * { position: relative; z-index: 1; }
.cta-box h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0; }
.cta-box p { font-size: 18px; color: rgba(255,255,255,0.9); margin: 16px auto 0; max-width: 52ch; line-height: 1.55; }
.cta-box .hero-cta { justify-content: center; }
.cta-box .btn-ghost { background: #fff; border-color: #fff; }
.cta-box .psc-tag { color: rgba(255,255,255,0.92); margin-top: 22px; justify-content: center; }

/* ============================================================
   TEAM / PARTENAIRES (À propos)
   ============================================================ */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.founders { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; margin-top: 52px; align-items: start; }
.founders-photo { margin: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.founders-bios { display: grid; gap: 20px; align-content: stretch; }
@media (max-width: 980px) { .founders { grid-template-columns: 1fr; } .founders-photo { width: 100%; max-width: 460px; margin: 0 auto; } }
.team-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 30px; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
.team-head { display: flex; align-items: center; gap: 20px; }
.team-name { font-size: 20px; margin: 0; }
.team-role { font-size: 13px; font-weight: 600; color: var(--color-primary); margin-top: 4px; }
.team-bio { font-size: 14.5px; line-height: 1.65; color: var(--color-text-secondary); margin: 18px 0 0; }
.team-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.partners { margin-top: 52px; display: grid; gap: 44px; }
.partners-label { text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted, #71717a); margin: 0 0 20px; font-weight: 600; }
.logo-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.logo-chip { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 16px 18px 12px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo-chip figcaption { font-size: 12.5px; font-weight: 500; color: var(--color-text-muted, #71717a); }
@media (max-width: 980px) { .team { grid-template-columns: 1fr; } }

/* ============================================================
   FLUX (Facebook/WhatsApp/LinkedIn → Medical Place)
   ============================================================ */
.flux { position: relative; width: min(520px, 100%); aspect-ratio: 520 / 360; margin: 0 auto; }
.flux-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flux-paths path { fill: none; stroke: #c3cfdd; stroke-width: 2; stroke-dasharray: 5 9; }
.flux-orb { filter: drop-shadow(0 2px 6px rgba(15,23,42,0.25)); }
.flux-app { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 92px; }
.flux-tile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 24px rgba(15,23,42,0.18); }
.flux-tile svg { width: 26px; height: 26px; }
.flux-name { font-size: 12px; font-weight: 500; color: var(--color-text-muted, #71717a); }
.flux-name.strong { font-size: 13px; font-weight: 600; color: var(--color-text, #18181b); }
.flux-dest { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 168px; }
.flux-ring { width: 104px; height: 104px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(14,165,233,0.30); }
.flux-ring img { width: 60px; height: auto; }
.flux-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--color-primary); background: rgba(14,165,233,0.10); border: 1px solid rgba(14,165,233,0.25); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.flux-badge svg { width: 13px; height: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .flux-paths path { animation: fluxdash 1.1s linear infinite; }
  .flux-tile { animation: fluxfade 5.5s ease-in-out infinite; }
  .flux-app:nth-child(3) .flux-tile { animation-delay: 0.9s; }
  .flux-app:nth-child(4) .flux-tile { animation-delay: 1.8s; }
  .flux-ring { animation: fluxglow 3.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .flux-orb { display: none; } }
@keyframes fluxdash { to { stroke-dashoffset: -14; } }
@keyframes fluxfade { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.93); } }
@keyframes fluxglow { 0%, 100% { box-shadow: 0 10px 30px rgba(14,165,233,0.25); } 50% { box-shadow: 0 12px 46px rgba(14,165,233,0.55); } }
@media (max-width: 560px) { .flux-badge { white-space: normal; text-align: center; } .flux-dest { width: 132px; } }

/* ============================================================
   PHONES / APPLICATION MOBILE
   ============================================================ */
.phones { display: flex; gap: 26px; justify-content: center; align-items: flex-start; }
.phone { width: 224px; background: #0b1220; border-radius: 38px; padding: 10px; box-shadow: 0 24px 60px rgba(15,23,42,0.28); }
.phone .screen { border-radius: 29px; overflow: hidden; height: 452px; background: #f8fafc; }
.phone.small { margin-top: 46px; }
.btn-dark { background: #0b1220; color: #fff; border: 1px solid #0b1220; }
.btn-dark:hover { background: #1e293b; border-color: #1e293b; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,23,42,0.30); }
.store-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
@media (max-width: 560px) { .phones { flex-direction: column; align-items: center; } .phone.small { margin-top: 0; } }

/* ============================================================
   SHOTS / APERÇU PLATEFORME
   ============================================================ */
.shots { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; margin-top: 52px; }
.shots-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.shot-card { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 10px 10px 0; margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); }
/* les deux colonnes s'équilibrent d'elles-mêmes : les captures occupent la hauteur restante */
.shots .shot-card { display: flex; flex-direction: column; }
.shots .shot-card > img { flex: 1 1 auto; min-height: 0; }
.shot-card figcaption { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--color-text-muted, #71717a); padding: 10px 4px 12px; font-weight: 500; }
.shot-card figcaption svg { width: 15px; height: 15px; color: var(--color-primary); }
.shots.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .shots, .shots.two { grid-template-columns: 1fr; } }
/* les slots d'image portent une largeur en dur : la borner évite le débordement mobile */
image-slot { max-width: 100%; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #0b1220; color: rgba(255,255,255,0.66); padding: 64px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-logo { height: 30px; width: auto; margin-bottom: 16px; }
.footer-blurb { font-size: 14px; line-height: 1.6; max-width: 34ch; color: rgba(255,255,255,0.66); }
.footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 16px; font-weight: 600; }
.footer-col a { display: block; color: rgba(255,255,255,0.66); font-size: 14px; padding: 6px 0; transition: color var(--dur-base) var(--ease-out); }
.footer-col a:hover { color: #7ed4fa; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.5);
}
.footer-bottom .made { display: inline-flex; gap: 7px; align-items: center; }
.footer-certs { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.footer-certs span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.55); }
.footer-certs svg { width: 15px; height: 15px; color: #7ed4fa; flex-shrink: 0; }

.footer-partners { margin: 20px 0 4px; }
.footer-partners .fp-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.5); font-weight: 600; margin-bottom: 12px; }
.footer-partners .fp-logos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.footer-partners .fp-chip { background: #fff; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; }
.footer-partners .fp-chip img { display: block; width: auto; }
.footer-partners .fp-chip.fc img { height: 46px; }
.footer-partners .fp-chip.bpi img { height: 24px; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* Progressive enhancement: content is visible by default; only hidden once JS marks <html class="js">.
   This guarantees the page is never blank if site.js fails to load. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; } .js .reveal.d2 { transition-delay: 0.16s; } .js .reveal.d3 { transition-delay: 0.24s; } .js .reveal.d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 44px; }
  .split.rev .split-media { order: 0; } .split.rev .split-text { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .trust-grid, .trust-grid.six { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-burger { display: inline-flex; }
  /* les cartes flottantes débordent du mockup : les rentrer avant que la page ne soit rognée */
  .float-a { left: 0; } .float-b { right: 0; }
}
/* sur petit écran, un libellé de bouton trop long doit pouvoir passer à la ligne
   plutôt que de déborder (white-space:normal ne casse que si nécessaire) */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}
/* petits mobiles (360 px) : la barre logo + CTA + burger ne tient plus */
@media (max-width: 420px) {
  .nav .wrap-wide { padding: 0 16px; }
  .nav-logo { height: 24px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: 9px 13px; font-size: 14px; }
}
@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .hero { padding: 44px 0 72px; }
  .comm-grid { grid-template-columns: 1fr; }
  .trust-grid, .trust-grid.six, .footer-top { grid-template-columns: 1fr; }
  .cta-box { padding: 44px 26px; }
  .float-card { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.open { display: block; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(15,23,42,0.4); backdrop-filter: blur(2px); }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(82%, 320px); background: #fff; padding: 24px; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; gap: 6px; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a { padding: 14px 12px; border-radius: 10px; font-weight: 500; color: var(--color-text-primary); font-size: 16px; }
.drawer-panel a:hover { background: var(--color-primary-muted); color: var(--color-primary); }
.drawer-close { align-self: flex-end; background: none; border: 0; cursor: pointer; color: var(--color-text-muted); margin-bottom: 8px; }
.drawer-panel .btn { margin-top: 10px; }

/* check-list (used on Confiance highlight cards) */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); font-weight: 500; }
.check-list li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); margin-top: 1px; }

/* ============================================================
   MOBILITÉ — phone mockups
   ============================================================ */
.phone-shot { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(15,23,42,0.20)); }
.phone-duo { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.phone-duo .phone-wrap { width: 232px; flex-shrink: 0; }
.phone-duo .phone-wrap:first-child { transform: rotate(-4deg) translateY(14px); z-index: 1; }
.phone-duo .phone-wrap:last-child { transform: rotate(4deg); margin-left: -38px; z-index: 2; }
.phone-single { width: 244px; margin: 0 auto; }

/* châssis du téléphone */
.phone-frame {
  width: 100%; background: #0b1220; border-radius: 34px; padding: 8px;
  box-shadow: 0 26px 60px rgba(15,23,42,0.30);
}
.phone-screen {
  border-radius: 27px; overflow: hidden; background: #f6f8fc;
  display: flex; flex-direction: column; height: 452px;
}
.phone-single .phone-screen { height: 486px; }
/* barre d'état */
.ph-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px 5px; font-size: 10px; font-weight: 700; color: #0f172a; background: #fff;
}
.ph-status .sig { display: inline-flex; gap: 3px; align-items: flex-end; }
.ph-status .sig i { display: block; width: 3px; background: #0f172a; border-radius: 1px; }
.ph-status .sig i:nth-child(1) { height: 4px; } .ph-status .sig i:nth-child(2) { height: 6px; }
.ph-status .sig i:nth-child(3) { height: 8px; } .ph-status .sig i:nth-child(4) { height: 10px; opacity: .3; }
/* en-tête applicatif */
.ph-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 14px 11px; background: #fff; border-bottom: 1px solid var(--color-border);
}
.ph-head img { height: 15px; width: auto; display: block; }
.ph-head .ph-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.ph-head svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.ph-head .ph-acts { display: inline-flex; gap: 9px; align-items: center; }
/* corps scrollable simulé */
.ph-body { flex: 1; overflow: hidden; padding: 11px; display: flex; flex-direction: column; gap: 9px; }
.ph-tabs { display: flex; gap: 5px; }
.ph-tab {
  font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  color: var(--color-text-secondary); background: #fff; border: 1px solid var(--color-border);
  white-space: nowrap;
}
.ph-tab.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.ph-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.ph-row { display: flex; align-items: center; gap: 8px; }
.ph-row .av { width: 26px; height: 26px; font-size: 9.5px; border-radius: 8px; }
.ph-name { font-size: 11px; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: center; gap: 5px; }
.ph-name svg { width: 11px; height: 11px; color: var(--color-primary); }
.ph-meta { font-size: 9.5px; color: var(--color-text-muted); margin-top: 1px; }
.ph-text { font-size: 10.5px; line-height: 1.45; color: var(--color-text-secondary); margin: 8px 0 0; }
.ph-acts-row { display: flex; gap: 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.ph-acts-row span { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--color-text-muted); }
.ph-acts-row svg { width: 11px; height: 11px; }
/* profil vérifié */
.ph-profile { background: linear-gradient(140deg, #e0f5ff, #eef2ff); border-radius: 12px; padding: 13px; text-align: center; }
.ph-profile .av { width: 46px; height: 46px; font-size: 16px; margin: 0 auto 8px; border-radius: 14px; }
.ph-profile .ph-name { justify-content: center; font-size: 12.5px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.ph-chip {
  font-size: 9px; font-weight: 600; background: #fff; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 3px 8px; color: var(--color-text-secondary);
  display: inline-flex; align-items: center; gap: 4px;
}
.ph-chip svg { width: 10px; height: 10px; color: var(--color-primary); }
.ph-mini { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 7px 9px; }
.ph-mini .av { width: 22px; height: 22px; font-size: 8.5px; border-radius: 7px; }
.ph-mini .t { font-size: 10px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.ph-mini .s { font-size: 9px; color: var(--color-text-muted); white-space: nowrap; }
.ph-mini .n { margin-left: auto; font-size: 8.5px; color: var(--color-text-secondary); background: #f1f5f9; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
/* barre d'onglets basse */
.ph-nav { display: flex; justify-content: space-around; padding: 9px 6px 11px; background: #fff; border-top: 1px solid var(--color-border); }
.ph-nav svg { width: 16px; height: 16px; color: var(--color-text-muted); }
.ph-nav .on svg { color: var(--color-primary); }
@media (max-width: 420px) {
  .phone-duo .phone-wrap { width: 190px; }
  .phone-duo .phone-wrap:last-child { margin-left: -30px; }
  .phone-screen { height: 400px; }
  .ph-body { padding: 9px; gap: 8px; }
  .ph-tab { font-size: 9.5px; padding: 4px 8px; }
}

/* store / download pills */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.store-pill {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px;
  background: #0b1220; color: #fff; border-radius: 14px; border: 1px solid #0b1220;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.store-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.store-pill svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-pill .sp-t { display: flex; flex-direction: column; line-height: 1.15; }
.store-pill .sp-t small { font-size: 11px; opacity: 0.72; font-weight: 400; }
.store-pill .sp-t strong { font-size: 15px; font-weight: 600; }

/* usage scenario cards */
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.scene { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 26px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.scene:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-primary); border-color: rgba(14,165,233,0.4); }
.scene .sc-ic { width: 48px; height: 48px; border-radius: 13px; background: var(--color-primary-muted); color: var(--color-primary); display: grid; place-items: center; margin-bottom: 16px; }
.scene .sc-ic svg { width: 24px; height: 24px; }
.scene h3 { margin: 0; font-size: 17px; font-weight: 600; }
.scene p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }

@media (max-width: 980px) {
  .scene-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .phone-duo .phone-wrap { width: 52%; }
}

/* ============================================================
   LEGAL PAGES (CGU / Politique de confidentialité)
   ============================================================ */
.legal-layout { display: grid; grid-template-columns: 258px 1fr; gap: 56px; align-items: start; }
.legal-toc { position: sticky; top: 88px; }
.legal-toc-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); font-weight: 600; margin-bottom: 14px; }
.legal-toc nav { display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 130px); overflow: auto; padding-right: 6px; }
.legal-toc a { font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary); padding: 7px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.legal-toc a:hover { color: var(--color-primary); background: var(--color-primary-muted); }
.legal-body { max-width: 780px; }
.legal-body p { font-size: 15px; line-height: 1.72; color: var(--color-text-secondary); margin: 0 0 14px; }
.legal-body .legal-h2 { font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin: 46px 0 16px; padding-top: 26px; border-top: 1px solid var(--color-border); scroll-margin-top: 88px; letter-spacing: -0.01em; }
.legal-body .legal-h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.legal-body .legal-h3 { font-size: 16.5px; font-weight: 600; color: var(--color-text-primary); margin: 30px 0 10px; }
.legal-body .legal-h4 { font-size: 14.5px; font-weight: 600; color: var(--color-text-primary); margin: 22px 0 8px; }
.legal-ul { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.legal-ul li { font-size: 15px; line-height: 1.62; color: var(--color-text-secondary); }
.legal-body a { color: var(--color-primary); }
.legal-body a:hover { text-decoration: underline; }
.legal-table-wrap { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--color-border); border-radius: 12px; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 560px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.5; }
.legal-table th { background: var(--color-primary-muted); color: var(--color-text-primary); font-weight: 600; }
.legal-table td { color: var(--color-text-secondary); }
.legal-table tr:last-child td { border-bottom: none; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; }
  .legal-toc nav { max-height: none; }
}

/* ============================================================
   ESPACE PRESSE
   ============================================================ */
.press-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* fiche d'identité (En bref) */
.press-facts { margin: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 4px 26px; box-shadow: var(--shadow-sm); }
.press-facts > div { display: grid; grid-template-columns: 148px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--color-border); }
.press-facts > div:last-child { border-bottom: none; }
.press-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--color-text-muted); line-height: 1.5; }
.press-facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--color-text-primary); font-weight: 500; }
.press-facts dd a { color: var(--color-primary); }
.press-facts dd a:hover { text-decoration: underline; }
@media (max-width: 560px) { .press-facts > div { grid-template-columns: 1fr; gap: 5px; } }

/* communiqués de presse */
.press-list { display: flex; flex-direction: column; gap: 18px; margin-top: 52px; }
.press-release {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 28px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.press-release:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-primary); border-color: rgba(14,165,233,0.4); }
.pr-date {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary);
  background: var(--color-primary-muted); padding: 6px 13px; border-radius: var(--radius-pill);
}
.pr-date svg { width: 15px; height: 15px; }
.press-release h3 { margin: 16px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.press-release p { margin: 10px 0 0; font-size: 15px; line-height: 1.62; color: var(--color-text-secondary); max-width: 72ch; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pr-actions .btn { padding: 10px 18px; font-size: 14.5px; }

/* ressources téléchargeables */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
.res-card {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--color-border);
  border-radius: 16px; padding: 26px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow-primary); border-color: rgba(14,165,233,0.4); }
.res-card .res-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--color-primary-muted); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; }
.res-card .res-ic svg { width: 23px; height: 23px; }
.res-card h3 { margin: 0; font-size: 16.5px; font-weight: 600; }
.res-card p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
.res-card > div { min-width: 0; }
.res-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 15px;
  font-size: 14px; font-weight: 600; color: var(--color-primary);
  transition: gap var(--dur-base) var(--ease-out);
  /* une adresse e-mail est un mot insécable : la laisser couper sur petit écran */
  overflow-wrap: anywhere;
}
.res-link svg { width: 16px; height: 16px; }
.res-link:hover { gap: 11px; }
@media (max-width: 860px) { .res-grid { grid-template-columns: 1fr; } }

/* note de crédit / mention */
.press-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 28px; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); max-width: 84ch; }
.press-note svg { width: 17px; height: 17px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.press-note a { color: var(--color-primary); }
.press-note.center { margin-left: auto; margin-right: auto; justify-content: center; text-align: center; }

/* galerie de visuels */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; align-items: start; }
.gallery .shot-card { display: flex; flex-direction: column; }
.gallery .shot-card img { width: 100%; display: block; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.gallery .shot-card figcaption { justify-content: space-between; width: 100%; gap: 12px; }
.gallery .res-link { margin-top: 0; font-size: 13px; }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr; } }

/* bandeau événement (JFR) */
.event-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.event-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.event-chip svg { width: 16px; height: 16px; color: var(--color-primary); }

/* contact presse (encart cyan) */
.contact-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 26px; }
.contact-lines a, .contact-lines span { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; color: #fff; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines svg { width: 18px; height: 18px; opacity: 0.85; }
.contact-role { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 6px; }