:root{
  /* Pastel clair: bleu, rose, blanc */
  --violet:#8ab6ff; /* bleu pastel */
  --violet-strong:#6ea3ff;
  --turquoise:#ffc2d6; /* rose pastel */
  --orange:#ffcba4; /* pêche douce (charts) */
  --orange-strong:#ff9640; /* orange soutenu pour titres */
  --deep-blue:#7fb2ff; /* bleu pastel doux (ancien #0a316d éclairci) */
  --blue-pastel:#b7d3ff; /* bleu pastel doux pour dégradé */
  --blue-strong:#4e7cd8; /* bleu un peu plus soutenu pour titres */
  --rose:#ffb3d1;
  --orange-soft:#ffe1c8; /* orange très pastel pour nuances */
  --bg:#000000; /* fond noir */
  --panel:#ffffff;
  --panel-strong:#ffffff;
  --muted:rgba(255,255,255,.72); /* muted text: soft white */
  --text:#ffffff;  /* global text color white */
  --text-inverse:#ffffff;
  --card-text:#1f2933;
  --card-muted:#6c757d;
  --border:rgba(255,255,255,.18);
  --danger:#ef476f;
  --ok:#2dc07a;
  --shadow:0 4px 12px rgba(30,50,100,.08);
  --section-alt:transparent; /* pas d'alternance en mode fond noir */
}
/* Self-hosted Inter font (Latin subset) */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{min-height:100%; overflow-x:hidden}
html, body{ -ms-overflow-style:none; scrollbar-width:none }
::-webkit-scrollbar{ display:none }
body{
  margin:0;
  padding-top:64px;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Ensure images never overflow containers on small screens */
img{max-width:100%; height:auto}
section{opacity:.8}
.container{width:min(1100px,92%); margin-inline:auto}
.site-header{position:fixed; top:0; left:0; right:0; background:rgba(0,0,0,.6); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid rgba(255,255,255,.12); z-index:100; box-shadow:0 8px 18px rgba(0,0,0,.35)}
.header-inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:8px 0; height:64px}
.brand, .auth-actions, .nav-toggle{flex-shrink:0}
.main-nav{min-width:0; white-space:nowrap; flex-wrap:nowrap; justify-content:center; justify-self:center}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid transparent; background:linear-gradient(92deg, var(--orange-strong), var(--blue-strong)); color:#ffffff; box-shadow:0 6px 16px rgba(78,124,216,.32), 0 3px 10px rgba(255,170,110,.30); cursor:pointer}
.nav-toggle:hover{filter:brightness(1.05); box-shadow:0 10px 22px rgba(78,124,216,.42), 0 6px 14px rgba(255,170,110,.34)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--orange-strong) !important}
.brand-logo{display:inline-block; height:clamp(24px, 3.6vw, 34px); width:auto}
.brand-text-logo {
  display: inline-block;
  height: clamp(16px, 3vw, 28px);
  width: auto;
}
.logo{font-size:22px}
.brand-text{font-weight:800; letter-spacing:.3px}
.brand-synap{color:var(--orange-strong)}
.brand-kids{color:var(--violet-strong)}
.brand .logo{display:none}
@media(max-width:900px){
  .brand .logo{display:inline}
}
.main-nav{display:flex; gap:6px; flex-wrap:nowrap}
.main-nav .nav-link{display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; text-decoration:none; color:var(--orange-strong) !important; opacity:.95; transition:all .2s ease}
.main-nav .nav-link:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}
.nav-ico{font-size:16px}
/* Hide emojis in desktop header; show in mobile menu only */
.main-nav .nav-ico{display:none}
@media (min-width:901px){
  .main-nav .nav-link span:last-child{font-weight:700;}
}
.auth-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:nowrap}
.auth-actions{align-items:center}
/* Prevent wrapping inside auth area to keep header height fixed */
.auth-actions .btn, .auth-actions .login-status{white-space:nowrap}
/* Ensure hamburger is always the rightmost inside auth-actions */
.auth-actions #nav-toggle{order:99; margin-left:8px}
.auth-actions #btn-login, .auth-actions #btn-logout, .auth-actions #login-status{order:1}
.login-status{display:flex; align-items:center; gap:4px; color:var(--ok); font-weight:600; text-transform:capitalize}
.login-status[hidden]{display:none}

/* Fallback mobile header before JS loads */
@media(max-width:900px){
  body.no-js .nav-toggle{display:inline-flex}
  body.no-js .main-nav{display:none}
}

.site-footer{border-top:1px solid rgba(255,255,255,.12); margin-top:56px; background:#070b13; color:#e9edff}
.site-footer .container{padding:28px 0}
.site-footer .brand-synap{color:var(--blue-strong); font-weight:700}
.site-footer .brand-kids{color:var(--orange-strong); font-weight:700}

/* NEW multi-column footer inspired by the screenshot */
.footer-top{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:24px; align-items:flex-start}
@media(max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:18px } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

.footer-brand{background:linear-gradient(135deg, rgba(183,211,255,.12), rgba(255,225,200,.10)); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px}
.footer-brand .brand{ text-decoration:none; }
.footer-brand p{ margin:.4rem 0 1rem; color:#c5cceb }
.footer-socials{ display:flex; gap:10px }
.footer-social{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:12px; color:#e9edff; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); text-decoration:none }
.footer-social:hover{ filter:brightness(1.1) }

.footer-col h4{ margin:0 0 10px; font-weight:700; font-size:15px; color:#e9edff }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.footer-links a{ color:#c5cceb; text-decoration:none }
.footer-links a:hover{ color:#ffffff; text-decoration:underline }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); margin-top:22px; padding-top:14px; color:#aab3d1 }
.footer-bottom a{ color:#c5cceb; text-decoration:none }
.footer-bottom a:hover{ text-decoration:underline; color:#ffffff }

/* Backward compatibility: old simple footer styles still present if needed */
.footer-simple{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fs-left{display:flex; align-items:center; gap:10px}
.fs-tag{margin:0; color:var(--muted)}
.fs-right{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.fs-link{color:#e9edff; text-decoration:none; opacity:.9}
.fs-link:hover{text-decoration:underline}
.fs-year{color:#aab3d1}
.footer-simple + .footer-simple{margin-top:8px}

/* Home footer — softer, glassy panel with brand gradient accents */
.home-footer{ background:linear-gradient(180deg, rgba(10,14,20,.18), rgba(10,14,20,.28)); border-top:none; position:relative; overflow:visible }
.home-footer .container{ padding:84px 0 24px; position:relative; z-index:1 }
@media(max-width:900px){ .home-footer .container{ padding:96px 0 24px } }
@media(max-width:600px){ .home-footer .container{ padding:110px 0 26px } }
/* Remove card look on home footer */
.home-footer .footer-panel{ padding:0; margin:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none }
.home-footer .footer-top{ gap:24px; column-gap:32px; row-gap:18px; align-items:flex-start; grid-template-columns:1.4fr repeat(4, 1fr); justify-items:start }
.home-footer .footer-brand{ background:transparent; border:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.home-footer .footer-brand p{ color:#ffffff; margin:10px 0 12px; font-size:16px; line-height:1.6; max-width:480px }
.home-footer .footer-logo{ display:block; width:auto; height:auto !important; max-width:100%; max-height:250px; opacity:.98 }
@media (max-width: 900px){ .home-footer .footer-logo{ max-height:200px } }
@media (max-width: 600px){ .home-footer .footer-logo{ max-height:150px } }


.home-footer .footer-socials{ gap:14px }
.home-footer .footer-social{ width:44px; height:44px; font-size:18px }
.home-footer .footer-col h4{
  background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 5px rgba(255,203,164,.16), 0 1px 10px rgba(78,124,216,.12);
  font-size:16px;
}
.home-footer .footer-links{ gap:10px; line-height:1.5 }
.home-footer .footer-links a{ color:#ffffff; opacity:.96; font-weight:500; font-size:15px }
.home-footer .footer-links a:hover{ color:#ffffff; opacity:1 }
.home-footer .footer-bottom{ border-top-color:rgba(255,255,255,.12); margin-top:16px; padding-top:12px; justify-content:center; text-align:center }
.home-footer .footer-bottom, .home-footer .footer-bottom a{ color:#ffffff }
.home-footer .footer-bottom a:hover{ color:#ffffff }
.home-footer .footer-social{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18) }

/* Ensure responsive grid overrides for home footer */
@media(max-width:900px){
  .home-footer .footer-top{ grid-template-columns:1fr 1fr; column-gap:22px; row-gap:14px }
  .home-footer .footer-col h4{ font-size:15px }
  .home-footer .footer-links a{ font-size:15px }
  /* Hide brand (logo + tagline) on tablets too */
  .home-footer .footer-brand{ display:none !important }
  /* Give a bit more breathing room from the first wave */
  .home-footer .container{ padding-top:126px }
}
@media(max-width:560px){
  .home-footer .footer-top{ grid-template-columns:1fr; row-gap:8px; justify-items:center }
  /* Reorder to put Liens utiles first, then the logo (brand), then other columns */
  .home-footer .footer-top .footer-col{ order:3 }
  .home-footer .footer-top .footer-col:first-of-type{ order:1 }
  /* Show the brand/logo above "Liens utiles" and center it */
  .home-footer .footer-brand{ display:flex !important; order:0; align-items:center; justify-content:center; text-align:center; margin:0 0 2px 0 }
  .home-footer .footer-brand p{ display:none }
  .home-footer .footer-logo {
    margin: 0 auto 2px;
    height: 150px !important; /* taille bien visible mais pas abusée */
    max-height: none;
    width: auto;
  }
    /* Hide the 'Contenus' column on small screens */
  .home-footer .footer-col[aria-label="Contenus"]{ display:none !important }
  .home-footer .footer-col, .home-footer .footer-col h4, .home-footer .footer-links{ text-align:center }
  .home-footer .footer-links{ gap:8px }
  .home-footer .footer-links a{ display:inline-block; padding:2px 0; font-size:16px; line-height:1.6; margin:0 auto }
  .home-footer .container{ padding-top:148px; padding-bottom:28px }
  /* Make waves fill to bottom and overlap tighter */
  .footer-bg{ top:-140px }
  .footer-bg svg{ width:140%; height:240%; margin-left:-20%; transform:none }
  /* Brighten footer waves for better contrast on small screens */
  .home-footer .footer-bg .layer:nth-child(1){ fill:rgba(255,255,255,.16) }
  .home-footer .footer-bg .layer:nth-child(2){ fill:rgba(64,76,102,.32) }
  .home-footer .footer-bg .layer:nth-child(3){ fill:rgba(46,58,82,.44) }
  .home-footer .footer-bg .layer:nth-child(4){ fill:rgba(28,36,52,.56) }
}

/* Background that paints the footer with a wavy top edge */
.footer-bg{ position:absolute; left:0; right:0; bottom:0; top:-120px; pointer-events:none; z-index:0 }
.footer-bg svg{ display:block; width:120%; height:100%; margin-left:-10% }
.footer-bg .layer{ --wy:0px; transform-origin:center; animation:waveSway 6s ease-in-out infinite }
.footer-bg .layer:nth-child(2){ animation-duration:9s; animation-delay:-2.5s }
.footer-bg .layer:nth-child(3){ animation-duration:12s; animation-delay:-5s }
.footer-bg .layer:nth-child(1){ --wy:0px }
.footer-bg .layer:nth-child(2){ --wy:0px }
.footer-bg .layer:nth-child(3){ --wy:0px }
.footer-bg .layer:nth-child(4){ --wy:0px }
/* stronger motion — horizontal only to keep bottom stable */
@keyframes waveSway{ 0%,100%{ transform:translate(0, var(--wy)) } 50%{ transform:translate(-96px, var(--wy)) } }
/* Reverse direction layers for interleaving */
.footer-bg .layer.rev{ animation-name:waveSwayRev }
@keyframes waveSwayRev{ 0%,100%{ transform:translate(0, var(--wy)) } 50%{ transform:translate(96px, var(--wy)) } }
/* removed duplicate weaker keyframes */

/* Sub‑header tagline */
.masthead{background:transparent; border-bottom:none; backdrop-filter:none; position:static; top:auto; z-index:auto; margin:0}
@media(max-width:900px){.masthead{margin:2px 0 0}}
.masthead-inner{
  padding:6px 0; text-align:center; font-weight:600; letter-spacing:.2px;
  font-size:clamp(14px, 1.8vw, 18px);
  color:var(--muted);
}
/* Supprime totalement le brand-logo */
.brand-logo {
  display: none !important;
}

/* Logo sous le texte de la sous-entête */
.masthead-logo {
  display:block;
  margin:6px auto 0;
  height:clamp(84px, 12vmin, 220px);
  width:auto;
}

/* Mobile: ajustement des logos */
@media(max-width:900px){
  .brand-text-logo {
    height: clamp(20px, 5vw, 32px); /* légèrement agrandi sur mobile */
  }
  .masthead-logo {
    height: clamp(160px, 35vw, 340px); /* augmenté sur mobile */
  }
  .page-logo-img {
    height: clamp(140px, 20vw, 300px); /* logo principal légèrement agrandi sur mobile */
  }
  .interior-page .page-logo-img {
    height: clamp(160px, 24vw, 320px); /* logo des pages internes un peu plus grand sur mobile */
  }
}






/* Keep header single-row at all widths; overflow handled via JS (force-mobile) */
/* Removed two-row layout to preserve constant header thickness */

/* Backdrop for mobile menu */
.nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.25); backdrop-filter:blur(2px); z-index:8; opacity:0; pointer-events:none; transition:opacity .3s ease}
.nav-backdrop.open{opacity:1; pointer-events:auto}

/* Page top logo (all pages except home) */
.page-logo{padding:6px 0 2px; background:transparent}
.page-logo .container{display:grid; place-items:center; position:relative}
.page-logo-img{display:block; height:clamp(120px, 16vw, 280px); width:auto}
.page-logo-img{position:relative; z-index:1}

/* Reduce gap between top logo and first content when logo is visible */
#page-logo:not([hidden]) ~ main .route.active{ padding-top:12px }
#page-logo:not([hidden]) ~ main .page-header{ margin-top:0 }

.hero{position:relative; padding:4px 0 28px; margin-bottom:16px; overflow:hidden}
@media(max-width:900px){.hero{padding:4px 0 6px; margin-bottom:2px}}
.hero-content{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px}
@media(max-width:900px){.hero-content{grid-template-columns:1fr}}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9}
.hero-content{position:relative; z-index:2}
/* Ensure hero visuals and UI always sit above the canvas */
.hero-visual{position:relative; z-index:2}
.hero .btn{position:relative; z-index:3}
.hero h1{font-size:clamp(32px, 5.4vw, 56px); margin:0 0 8px; letter-spacing:.2px; font-weight:800; line-height:1.18}
.hero-title{
  background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 5px rgba(255,203,164,.22), 0 1px 10px rgba(78,124,216,.18);
  font-weight:800;
  letter-spacing:.3px;
  position:relative;
  display:inline-block;
}
.hero-title::after{
  content:"";
  display:block;
  height:4px;
  width:42%;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--orange-soft), var(--blue-pastel));
  filter:blur(.2px);
}
@media(max-width:900px){
  .hero-title::after{ width:54%; height:3px; }
}
.hero-copy{max-width:620px}
.hero-badge{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22)}
.lead{color:var(--muted); margin:0 0 18px}

/* Make all site titles use the same color configuration as .hero-title */
.section-title,
.page-header h2,
h1,
h2,
h3{
  font-weight:800;
  background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong));
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 1px 5px rgba(255,203,164,.22), 0 1px 10px rgba(78,124,216,.18);
}

/* Settings page harmonization */
section[data-route="/settings"] #form-settings{
  /* tighter spacing inside the settings form */
  gap:8px;
}
section[data-route="/settings"] #form-settings h3{
  margin:4px 0 2px;
}
section[data-route="/settings"] #form-settings label{
  gap:6px;
}
/* smaller save button inside the settings form */
section[data-route="/settings"] #form-settings .btn{
  padding:8px 12px; border-radius:12px; font-size:13px;
}
section[data-route="/settings"] .card.stack{ gap:10px }
section[data-route="/settings"] .hstack{ gap:8px }
section[data-route="/settings"] .btn{ padding:10px 14px; border-radius:12px; font-size:14px }

/* Improve milestone readability on the dark settings pane */
section[data-route="/settings"] #edit-milestones{ gap:16px }
section[data-route="/settings"] #edit-milestones .dev-group{
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg, rgba(17,24,39,.82), rgba(17,24,39,.66));
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
section[data-route="/settings"] #edit-milestones .dev-group h4{
  margin:0 0 14px;
  color:#ffffff;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
section[data-route="/settings"] #edit-milestones .qgrid{ gap:14px }
section[data-route="/settings"] #edit-milestones .qitem{
  background:linear-gradient(180deg, rgba(31,41,60,.85), rgba(17,24,39,.78));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
section[data-route="/settings"] #edit-milestones .qitem:hover{
  border-color:rgba(255,255,255,.32);
  background:linear-gradient(180deg, rgba(36,52,84,.88), rgba(18,26,44,.82));
  box-shadow:0 18px 36px rgba(0,0,0,.42);
}
section[data-route="/settings"] #edit-milestones .qitem label{
  color:#ffffff;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
section[data-route="/settings"] #edit-milestones .qitem input[type="checkbox"]{
  width:26px;
  height:26px;
  border-radius:10px;
  background:rgba(12,19,33,.7);
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 4px 16px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.08);
}
section[data-route="/settings"] #edit-milestones .qitem input[type="checkbox"]:hover{
  border-color:rgba(255,255,255,.45);
  background:rgba(17,24,39,.78);
}
section[data-route="/settings"] #edit-milestones .qitem input[type="checkbox"]:checked{
  background:linear-gradient(135deg, rgba(99,153,255,.95), rgba(147,118,255,.95));
  border-color:transparent;
  box-shadow:0 10px 24px rgba(97,145,255,.45);
}
section[data-route="/settings"] #edit-milestones .qitem input[type="checkbox"]:checked::after{
  border-right-width:3px;
  border-bottom-width:3px;
}
section[data-route="/settings"] #edit-milestones .qitem input[type="checkbox"]:focus-visible{
  outline:3px solid rgba(147,198,255,.8);
  outline-offset:3px;
}

section[data-route="/onboarding"] #dev-questions .qitem label{
  color:#ffffff;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* keep settings layout stacked (one column) even on wide screens */
section[data-route="/settings"] .grid-2{ grid-template-columns:1fr !important }

/* slightly more compact fields in settings */
section[data-route="/settings"] #form-settings input,
section[data-route="/settings"] #form-settings select,
section[data-route="/settings"] #form-settings textarea{
  padding:10px 12px;
  border-radius:12px;
}

/* Dashboard child switcher and Add button alignment */
#child-switcher-box{
  /* center the selector + button row and add breathing space */
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
  margin:8px 0 16px;
  flex-wrap:wrap;
}
#child-switcher-box label{
  /* keep compact label so control aligns nicely with the button */
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
}
#child-switcher-box select{
  height:44px;
  padding:10px 12px;
  border-radius:12px;
}
#child-switcher-box .btn{
  height:44px;
  display:flex;
  align-items:center;
  /* inherit padding and border-radius from .btn for consistent styling */
}
.hero-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.hero-stats{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.hero-stats .stat{display:grid; gap:2px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#ffffff}
.hero-stats .stat strong{font-size:14px}
.hero-stats .stat span{font-size:12px; color:var(--muted)}
.hero-visual{position:relative; display:block; background:transparent; aspect-ratio:auto; max-height:none; overflow:visible; border-radius:0; border:none; box-shadow:none; perspective:800px}

/* Hero image (logo.png) */
.hero-image{display:block; width:min(100%, 360px); height:auto; object-fit:contain; opacity:.92; filter:saturate(1) brightness(1); animation:spinY 5s linear infinite; margin:0 auto; transform-style:preserve-3d; backface-visibility:hidden}
.hero-image:hover{opacity:1}

/* === HERO v2 — full refresh === */
  .hero-v2{ position:relative; border:1px solid var(--border); border-radius:26px; padding:28px; margin:8px 0 24px; overflow:visible;
  background:linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  box-shadow:0 20px 50px rgba(0,0,0,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hero-v2-grid{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:18px; position:relative; z-index:1 }
@media(max-width:900px){ .hero-v2-grid{ grid-template-columns:1fr } }
.hero-v2-title{ margin:0 0 8px; font-size:clamp(34px, 5.6vw, 62px); line-height:1.16; font-weight:800;
  background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong));
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 5px rgba(255,203,164,.22), 0 1px 10px rgba(78,124,216,.18); }
.hero-v2-title::after{ content:""; display:block; height:2px; width:44%; margin:6px 0 0; border-radius:999px; background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong)); opacity:.85 }
.hero-v2-title .accent-orange{
  background:none !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
  color: var(--orange-strong) !important;
  text-shadow:0 1px 4px rgba(255,150,64,.18);
}
.hero-v2-title strong{
  font-weight:900;
}
.hero-v2-sub{ margin:0 0 14px; color:var(--muted); max-width:680px }
.hero-v2-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px }
.hero-v2-highlights{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:6px 0 0; list-style:none }
.hero-v2-highlights li{ color:#e9edff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; font-size:12px }
.hero-v2-art{ position:relative; min-height:260px }
.hero-v2-logo{ position:absolute; inset:0; margin:auto; width:clamp(180px, 30vw, 400px); height:auto; z-index:2; opacity:.98; filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
  animation: float 6s ease-in-out infinite; transform-style:preserve-3d; transition: transform .3s ease, filter .3s ease; }
.hero-v2-logo:hover{ transform: translateY(-2px) rotateY(8deg) scale(1.02); filter: drop-shadow(0 14px 36px rgba(0,0,0,.55)); }
.hero-v2 .orb{ position:absolute; border-radius:50%; filter:blur(10px); opacity:.55; mix-blend-mode:screen; animation:float 8s ease-in-out infinite }
.hero-v2 .orb1{ width:200px; height:200px; right:10%; top:10%; background:radial-gradient(circle at 30% 30%, var(--orange-strong), transparent 60%) }
.hero-v2 .orb2{ width:260px; height:260px; right:22%; bottom:-10%; background:radial-gradient(circle at 60% 40%, #ff6f7d, transparent 60%); animation-delay:.6s }
.hero-v2 .orb3{ width:140px; height:140px; right:-6%; top:36%; background:radial-gradient(circle at 40% 40%, var(--blue-pastel), transparent 60%); animation-delay:1.2s }

.hero-v2-logo-mobile{ display:none; }
@media(max-width:900px){
  .hero-v2{
    margin:8px auto 12px;
    width:calc(100% - 8px);
  }
  .hero-v2-art{ display:none; }
  /* Mobile logo presentation — halos + ligne seulement */
  .hero-v2-logo-mobile-wrap{
    position:relative; display:grid; place-items:center;
    width:min(520px, 92%);
    margin:0 auto 8px; padding:10px 0 8px;
    border-radius:0; border:none; background:transparent; box-shadow:none; overflow:visible;
  }
  .hero-v2-logo-mobile-wrap::before{ content:""; position:absolute; left:14%; bottom:-4%; width:72%; height:72%; background:radial-gradient(circle at 30% 30%, #ff6f7d, transparent 60%); filter:blur(14px); opacity:.30; pointer-events:none }
  .hero-v2-logo-mobile-wrap::after{ content:""; position:absolute; right:8%; top:-6%; width:58%; height:58%; background:radial-gradient(circle at 60% 60%, var(--blue-pastel), transparent 60%); filter:blur(14px); opacity:.24; pointer-events:none }
  .hero-v2-logo-mobile{ position:relative; z-index:1; display:block; width:clamp(180px, 60vw, 320px); height:auto; margin:0 auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); animation:none }
  .logo-divider{ height:2px; width:42%; margin:2px auto 0; border-radius:999px; background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong)); opacity:.85 }
  .hero-v2-logo-mobile-wrap + .section{ padding-top:16px; }
  /* Center hero content on mobile */
  .hero-v2-copy{ text-align:center; margin-left:auto; margin-right:auto; }
  .hero-v2-title{ text-align:center; }
  .hero-v2-title::after{ margin:6px auto 0; width:36%; }
  .hero-v2-sub{ margin:0 auto 14px; }
  .hero-v2-actions{ justify-content:center; }
  .hero-v2-highlights{ justify-content:center; }
}

.mockup{position:relative; width:min(520px, 92%); border-radius:20px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.25); box-shadow:0 20px 50px rgba(0,0,0,.45); backdrop-filter:blur(14px) saturate(150%)}
.mockup::before{content:""; position:absolute; inset:-4px; border-radius:22px; background:linear-gradient(120deg, rgba(142,125,255,.35), rgba(53,223,207,.28)); z-index:-1; filter:blur(10px); opacity:.8}
.mockup-header{display:flex; gap:6px; padding:6px 6px 0}
.mockup-header .dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4)}
.mockup-body{border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(13,16,34,.6); padding:14px; display:grid; gap:10px}
.skel{border-radius:10px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18) 40%, rgba(255,255,255,.08)); background-size:200% 100%; animation:loading 2.2s ease-in-out infinite}
.skel-title{height:18px; width:60%}
.skel-badges{height:28px; width:80%}
.skel-chart{height:140px; background-image:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18) 40%, rgba(255,255,255,.08)),
  radial-gradient(4px 4px at 10% 75%, rgba(142,125,255,.6), transparent 60%),
  radial-gradient(4px 4px at 20% 65%, rgba(142,125,255,.5), transparent 60%),
  radial-gradient(4px 4px at 30% 55%, rgba(142,125,255,.45), transparent 60%),
  radial-gradient(4px 4px at 40% 60%, rgba(53,223,207,.6), transparent 60%),
  radial-gradient(4px 4px at 50% 50%, rgba(53,223,207,.5), transparent 60%),
  radial-gradient(4px 4px at 60% 40%, rgba(53,223,207,.45), transparent 60%);
  background-size:200% 100%, auto; background-blend-mode:screen}
.skel-chart.small{height:90px}
@keyframes loading { 0%{background-position:200% 0} 100%{background-position:-200% 0}}
@keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Fast flip segment so backface is hidden < 1s per cycle (5s total) */
@keyframes spinY {
  0%, 44% { transform: rotateY(0deg); }
  50%     { transform: rotateY(180deg); }
  56%     { transform: rotateY(360deg); }
  100%    { transform: rotateY(360deg); }
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hero-image{ animation: none !important; }
  .child-point-latest{ animation: none !important; }
}

.pillars{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-top:20px}
.pillar{background:#ffffff; border:1px solid var(--border); border-radius:18px; padding:16px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease}
.pillar:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,50,100,.16); border-color:#d8e0f2; background:#ffffff}
.pillar h3{margin:6px 0 6px}
.pillar .pillar-icon{font-size:24px}

.btn{cursor:pointer; border:none; border-radius:16px; padding:12px 16px; font-weight:700; letter-spacing:.2px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration:none}
.btn:hover, .btn:focus{ text-decoration:none }
a.btn, a.btn:visited, a.btn:hover, a.btn:focus{ text-decoration:none !important; outline:none }
.btn-primary{background:linear-gradient(92deg, var(--orange-strong), var(--blue-strong)); color:#ffffff; box-shadow:0 6px 16px rgba(78,124,216,.32), 0 3px 10px rgba(255,170,110,.30)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(78,124,216,.44), 0 6px 16px rgba(255,170,110,.38)}
.btn-secondary{background:#eef2ff; color:var(--text); border:1px solid #d6dcef}
/* Header-specific buttons on dark header */
.site-header .btn-secondary{background:rgba(255,255,255,.08); color:#e9edff; border:1px solid rgba(255,255,255,.18)}
.btn-danger{background:linear-gradient(90deg,#9e2f4b,#d93a62); color:white}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* Unify all buttons with translucent HERO gradient and white text */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger {
  /* Keep hero colors, just make them translucent */
  /* #ff9640 -> rgba(255,150,64,alpha), #4e7cd8 -> rgba(78,124,216,alpha) */
  background: linear-gradient(92deg, rgba(255,150,64,.34), rgba(78,124,216,.34)) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover{
  transform: translateY(-2px);
  box-shadow: none !important;
  background: linear-gradient(92deg, rgba(255,150,64,.48), rgba(78,124,216,.48)) !important;
}

/* Exception: keep header login button styling as-is */
#btn-login{
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Remove white frame around Google login areas (signup card) */
section[data-route="/signup"] .card{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

section[data-route="/login"] .page-header{
  margin-bottom: 32px;
}

.login-panels{
  display:grid;
  gap:24px;
}

@media(min-width:900px){
  .login-panels{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
}

section[data-route="/login"] .login-panel{
  display:grid;
  gap:18px;
  align-content:start;
  padding:0;
  color:#ffffff;
}

section[data-route="/login"] .login-panel--google,
section[data-route="/login"] .login-panel--anon{
  background:transparent;
  border:none;
  box-shadow:none;
}

.login-panel__header{
  display:grid;
  gap:12px;
}

.login-panel__header h3{
  margin:0;
  font-size:22px;
}

.login-panel__header p{
  margin:0;
}

.login-panel__text{
  color:rgba(255,255,255,.86);
  font-size:15px;
}

.login-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.18);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ffffff;
  width:max-content;
}

.login-pill--outline{
  background:rgba(255,255,255,.08);
  border-style:dashed;
  color:rgba(255,255,255,.85);
}

.login-panel__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:54px;
  font-size:16px;
  box-shadow:none;
}

section[data-route="/login"] .login-panel .btn-secondary{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#ffffff !important;
}

section[data-route="/login"] .login-panel .btn-secondary:hover{
  background:rgba(255,255,255,.2) !important;
}

.login-panel__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#ffffff;
  color:#4285f4;
  font-weight:800;
  font-size:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}

.login-panel__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  color:rgba(255,255,255,.78);
  font-size:14px;
}

.login-panel__list li{
  position:relative;
  padding-left:26px;
}

.login-panel__list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--ok);
  font-size:14px;
  line-height:1.4;
}

.login-panel__note{
  margin:0;
  font-size:13.5px;
  color:var(--muted);
}

.login-panel__divider{
  display:flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:rgba(255,255,255,.7);
}

.login-panel__divider::before,
.login-panel__divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.22);
}

.login-panel__divider span{white-space:nowrap;}

.login-code-label{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.92);
}

.login-code-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.login-code-field{
  flex:1 1 260px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(circle at top left, rgba(255,150,64,.26), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow:0 16px 34px rgba(8,25,60,.24);
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .18s ease;
}

.login-code-field__label{
  flex:0 0 auto;
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.68);
}

#anon-code-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  background:transparent;
  padding:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#ffffff;
  font-family:"Space Mono","DM Mono","Inter","Segoe UI",sans-serif;
  caret-color:var(--violet-strong);
}

#anon-code-input::placeholder{
  color:rgba(255,255,255,.5);
  letter-spacing:.22em;
}

#anon-code-input:focus,
#anon-code-input:focus-visible{
  outline:none;
  border:none;
  box-shadow:none;
}

.login-code-field:focus-within{
  border-color:rgba(255,255,255,.64);
  background:
    radial-gradient(circle at top left, rgba(255,150,64,.32), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow:0 20px 40px rgba(8,25,60,.28), 0 0 0 3px rgba(78,124,216,.35);
  transform:translateY(-2px);
}

.login-code-row button{
  flex:0 0 auto;
  min-width:170px;
}

@media(max-width:600px){
  .login-code-row{
    flex-direction:column;
    align-items:stretch;
  }
  .login-code-field{
    flex:1 1 auto;
    padding:12px 16px;
  }
  #anon-code-input{
    font-size:16px;
    letter-spacing:.18em;
  }
  .login-code-row button{
    width:100%;
  }
}

section[data-route="/login"] .login-panel input{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.55);
  color:#0f2350;
  font-weight:600;
}

section[data-route="/login"] .login-panel input::placeholder{
  color:rgba(15,35,80,.58);
  letter-spacing:.06em;
}

section[data-route="/login"] .login-panel input:focus{
  border-color:rgba(78,124,216,.7);
  box-shadow:0 0 0 2px rgba(78,124,216,.35);
}

.login-panel__hint{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

section[data-route="/login"] .form-status{
  margin-top:-6px;
}

/* Remove shadow from hamburger (nav-toggle) as well */
.nav-toggle{ box-shadow: none !important; }
.nav-toggle:hover{ box-shadow: none !important; }

.card{background:linear-gradient(180deg,#ffffff,#f7f9ff); border:1px solid var(--border); border-radius:22px; padding:20px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(30,50,100,.16); border-color:#d8e0f2; background:#ffffff}
section[data-route="/"] .card{position:relative; overflow:hidden}
.history-header p{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.timeline{
  --timeline-gap:18px;
  position:relative;
  display:grid;
  gap:var(--timeline-gap);
  margin-top:8px;
  padding-left:22px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:12px;
  top:18px;
  bottom:22px;
  width:2px;
  background:linear-gradient(180deg, rgba(132,168,255,.55), rgba(255,194,214,.32));
  border-radius:999px;
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:24px 1fr;
  gap:16px;
  padding:18px 20px;
  background:rgba(10,14,20,.64);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .18s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
  color:#f4f6ff;
}
.timeline-item:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 56px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.22);
  background:rgba(10,14,20,.74);
}
.timeline-marker{
  position:relative;
  width:14px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(118,154,255,1), rgba(195,155,255,1));
  border:3px solid rgba(18,25,56,.6);
  box-shadow:0 0 0 4px rgba(124,160,255,.32);
  margin-top:6px;
}
.timeline-marker::after{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:2px;
  height:calc(100% + var(--timeline-gap));
  background:linear-gradient(180deg, rgba(110,163,255,.35), rgba(255,194,214,0));
}
.timeline-item:last-child .timeline-marker::after{
  display:none;
}
.timeline-content{
  display:grid;
  gap:10px;
}
.timeline-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(226,233,255,.7);
}
.timeline-meta time{
  color:inherit;
}
.timeline-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(118,154,255,.22);
  color:#f4f6ff;
  font-size:11px;
  letter-spacing:.08em;
  border:1px solid rgba(184,204,255,.28);
}
.timeline-summary{
  font-size:15px;
  font-weight:600;
  line-height:1.55;
  color:#ffffff;
}
.timeline-parent-note{
  margin-top:8px;
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  font-size:14px;
  line-height:1.55;
}
.timeline-parent-note__label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,233,255,.85);
  margin-bottom:4px;
}
.timeline-parent-note__text{
  font-size:14px;
}
.timeline-ai-note{
  margin-top:8px;
  padding:12px;
  border-radius:12px;
  background:rgba(110,163,255,.16);
  border:1px solid rgba(110,163,255,.26);
  color:#ffffff;
  font-size:13px;
  line-height:1.55;
}
.timeline-ai-note__label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(202,220,255,.9);
  margin-bottom:4px;
}
.timeline-ai-note__text{
  font-size:13px;
}
.timeline-growth-status{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  display:grid;
  gap:6px;
  font-size:13px;
}
.timeline-growth-status__meta{
  font-size:12px;
  color:var(--muted);
}
.timeline-growth-status__item{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  align-items:center;
}
.timeline-growth-status__label{
  font-weight:600;
  color:#fff;
}
.timeline-growth-status__value{
  font-weight:600;
}
.timeline-growth-status__range,
.timeline-growth-status__diff{
  color:var(--muted);
  font-size:12px;
}
.timeline-growth-status__status{
  font-weight:600;
}
.timeline-growth-status__item.is-alert .timeline-growth-status__status,
.timeline-growth-status__global.is-alert{ color:var(--danger); }
.timeline-growth-status__item.is-ok .timeline-growth-status__status,
.timeline-growth-status__global.is-ok{ color:var(--ok); }
.timeline-growth-status__global{
  font-weight:600;
}
.timeline-comment{
  font-size:13px;
  color:#ffffff;
  margin-top:8px;
  line-height:1.55;
}
.timeline-comment strong{
  font-weight:600;
}
.timeline-actions{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.timeline-actions .btn{
  min-width:190px;
}
.report-highlights{
  margin-top:10px;
  display:grid;
  gap:12px;
}
.report-highlight-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.04);
}
.report-highlight-card__header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.report-highlight-card__icon{ font-size:18px; }
.report-highlight-card__text{
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted);
}
.report-highlight-card__list{
  margin:0;
  padding-left:18px;
  font-size:13px;
  color:#fff;
}
.report-highlight-card__list li{ margin-bottom:4px; }
.report-highlight-card__list li:last-child{ margin-bottom:0; }
.report-highlight-card.is-alert{
  border-color:rgba(239,71,111,.6);
  background:rgba(239,71,111,.12);
}
.report-highlight-card.is-ok{
  border-color:rgba(45,192,122,.45);
  background:rgba(45,192,122,.14);
}
.report-highlight-card.is-muted{ opacity:.85; }

.parent-updates-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.parent-updates-actions{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
.parent-updates-actions .btn{
  min-width:190px;
}
.parent-update-item{
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
}
.parent-update-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(226,233,255,.7);
}
.parent-update-meta time{
  color:inherit;
}
.parent-update-summary{
  font-size:15px;
  font-weight:600;
  line-height:1.55;
  color:#ffffff;
}
.parent-update-details{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:4px;
  font-size:14px;
  line-height:1.5;
  color:#ffffff;
}
.parent-update-ai-context{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  font-size:12px;
  color:rgba(226,233,255,.85);
}
.parent-update-ai-context .badge{
  background:rgba(110,163,255,.18);
  border-color:rgba(110,163,255,.32);
  color:#e2e9ff;
  font-weight:600;
}
.parent-update-ai-context-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(226,233,255,.85);
  font-size:12px;
  font-weight:700;
  cursor:help;
}
.parent-update-item .timeline-comment{
  background:rgba(110,163,255,.16);
  border:1px solid rgba(110,163,255,.26);
  border-radius:12px;
  padding:12px 14px;
}

/* 1000-day timeline */
.timeline-1000{ margin-top:20px; position:relative; overflow:visible; }
.timeline-1000__header p{ margin:6px 0 0; color:var(--muted); }
.timeline-1000__scroll{
  position:relative;
  overflow-x:auto;
  overflow-y:visible;
  padding-bottom:4px;
  margin-top:10px;
}
.timeline-1000__scroll::-webkit-scrollbar{ height:6px; }
.timeline-1000__scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}
.timeline-1000__nav-bar{
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:min(360px, 92%);
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:.02em;
  text-align:center;
}
.timeline-1000__nav-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:600;
  line-height:1;
}
.timeline-1000__track{
  position:relative;
  min-width:1100px;
  padding:240px 36px 16px;
}
.timeline-1000__line,
.timeline-1000__progress{
  position:absolute;
  left:36px;
  right:36px;
  top:220px;
  height:4px;
  border-radius:999px;
}
.timeline-1000__line{ background:rgba(255,255,255,.16); }
.timeline-1000__progress{
  background:linear-gradient(90deg, var(--orange-strong), var(--violet-strong));
  width:0;
}
.timeline-1000__stage{
  position:absolute;
  top:24px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:90px;
  text-align:center;
}
.timeline-1000__stage.is-start{ transform:translateX(0); align-items:flex-start; }
.timeline-1000__stage.is-end{ transform:translateX(-100%); align-items:flex-end; }
.timeline-1000__stage-label{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--muted); }
.timeline-1000__stage-label strong{ font-size:15px; color:#fff; }
.timeline-1000__stage-label span{ font-size:12px; opacity:.7; }
.timeline-1000__tick{
  position:relative;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(10,14,20,.92);
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}
.timeline-1000__tick::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:2px;
  height:180px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.16);
}
.timeline-1000__point{
  position:absolute;
  top:220px;
  transform:translate(-50%, -50%);
  border:none;
  background:none;
  padding:0;
  width:24px;
  height:24px;
  cursor:pointer;
  z-index:3;
}
.timeline-1000__point span{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  border:2px solid rgba(255,255,255,.24);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.timeline-1000__point::after{
  content:"";
  position:absolute;
  inset:-10px;
}
.timeline-1000__point:hover span,
.timeline-1000__point:focus-visible span{
  transform:scale(1.1);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.timeline-1000__point:focus-visible{ outline:2px solid var(--orange-strong); outline-offset:4px; }
.timeline-1000__point.is-done span{
  background:linear-gradient(135deg, rgba(255,225,200,.26), rgba(183,211,255,.22));
  border-color:rgba(255,150,64,.55);
  box-shadow:0 12px 34px rgba(255,150,64,.28);
}
.timeline-1000__point.is-upcoming span{
  opacity:.55;
  border-style:dashed;
}
.timeline-1000__current{
  position:absolute;
  top:220px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
  z-index:2;
}
.timeline-1000__current.is-start{ transform:translateX(-15%); align-items:flex-start; }
.timeline-1000__current.is-end{ transform:translateX(-85%); align-items:flex-end; }
.timeline-1000__current-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--orange-strong);
  position:relative;
  box-shadow:0 0 0 6px rgba(255,150,64,.28);
  animation:timeline-current-breathe 3s ease-in-out infinite;
}
.timeline-1000__current-dot::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:2px solid rgba(255,150,64,.45);
  opacity:0;
  transform:scale(.8);
  animation:timeline-current-breathe-ring 3s ease-in-out infinite;
}
@keyframes timeline-current-breathe{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 6px rgba(255,150,64,.28);
  }
  50%{
    transform:scale(1.1);
    box-shadow:0 0 0 10px rgba(255,150,64,.18);
  }
}
@keyframes timeline-current-breathe-ring{
  0%,100%{
    opacity:0;
    transform:scale(.8);
  }
  50%{
    opacity:.55;
    transform:scale(1.25);
  }
}
.timeline-1000__current-label{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:6px 14px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
}
.timeline-1000__tooltip{
  position:absolute;
  top:220px;
  transform:translate(calc(-50% + var(--timeline-tooltip-shift,0px)), calc(-100% - 28px + var(--timeline-tooltip-shift-y,0px)));
  background:rgba(7,10,16,.95);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:16px 18px;
  min-width:200px;
  max-width:260px;
  box-shadow:0 18px 48px rgba(0,0,0,.5);
  color:#fff;
  z-index:5;
}
.timeline-1000__tooltip[hidden]{ display:none; }
.timeline-1000__tooltip[data-state="done"]{
  border-color:rgba(255,150,64,.45);
  box-shadow:0 18px 48px rgba(255,150,64,.28);
}
.timeline-1000__tooltip-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.timeline-1000__tooltip-header h4{ margin:0; font-size:15px; }
.timeline-1000__status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}
.timeline-1000__status.is-done{ background:rgba(255,150,64,.18); border-color:rgba(255,150,64,.45); color:#fff; }
.timeline-1000__tooltip-meta{ margin:0 0 6px; font-size:13px; color:var(--muted); }
.timeline-1000__tooltip-pred{ margin:0; font-size:13px; color:var(--muted); }

@media(max-width:900px){
  .timeline-1000__track{ min-width:900px; padding:260px 28px 24px; }
  .timeline-1000__nav-bar{ margin-top:4px; gap:4px; }
  .timeline-1000__line,
  .timeline-1000__progress,
  .timeline-1000__point,
  .timeline-1000__current,
  .timeline-1000__tooltip{ top:240px; }
  .timeline-1000__tick::after{ height:200px; }
}
@media(max-width:720px){
  .timeline-1000__nav-bar{ max-width:100%; }
  .timeline-1000__nav-hint{ width:28px; height:28px; font-size:13px; }
}
@media(max-width:640px){
  .timeline-1000__track{ min-width:700px; padding:290px 24px 24px; }
  .timeline-1000__line,
  .timeline-1000__progress,
  .timeline-1000__point,
  .timeline-1000__current,
  .timeline-1000__tooltip{ top:260px; }
  .timeline-1000__tick::after{ height:220px; }
  .timeline-1000__stage{ min-width:80px; }
  .timeline-1000__tooltip{ max-width:220px; }
  .timeline-1000__current-label{ font-size:11px; }
}
.milestone-toggle{
  display:flex;
  justify-content:center;
}
.milestone-toggle .btn{
  min-width:190px;
}
.form-actions-center{
  display:flex;
  justify-content:center;
  gap:12px;
}
.submit-with-spinner{
  display:flex;
  align-items:center;
  gap:12px;
}
.submit-with-spinner .btn{
  min-width:160px;
}

.dashboard-focus-highlight{
  outline:3px solid var(--turquoise);
  box-shadow:0 0 0 6px rgba(255, 194, 214, 0.35);
  border-radius:18px;
  transition:box-shadow 0.3s ease, outline-color 0.3s ease;
}
.stack{display:grid; gap:12px}
.hstack{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:12px}
.card-header{display:grid; gap:6px}
.card-header h3,.card-header p{margin:0}

.form-grid{display:grid; gap:12px}
label{display:grid; gap:6px; font-size:14px}
input, select, textarea{width:100%; background:#ffffff; border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:14px; outline:none; font-size:16px}
input::placeholder, textarea::placeholder{color:#8aa0bf}
input:focus, select:focus, textarea:focus{box-shadow:0 0 0 2px rgba(138,182,255,.5); border-color:#b9cffd}
input[type="file"]{padding:8px}
input[type="checkbox"]{width:auto}
.switch{display:flex; align-items:center; gap:10px}
.muted{color:var(--muted)}

/* Accessibilité: texte caché visuellement mais lisible par lecteurs d'écran */
.sr-only{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}

/* Newsletter: mise en page compacte input + bouton + statut */
.form-status{min-height:1em; font-size:13px; color:var(--ok)}
.form-status.error{color:var(--danger)}

.grid-2{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:900px){.grid-2{grid-template-columns:1.2fr .8fr}}

.route{display:none; padding:24px 0; position:relative; z-index:0}
.route.active{display:block}

.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:#ffffff; padding:6px 12px; border-radius:999px; font-size:12px}

.qgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.qitem{border:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,249,255,.82)); border-radius:22px; padding:16px 18px; display:grid; gap:14px; grid-template-columns:min-content 1fr; align-items:center; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease}
.qitem:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(30,50,100,.22); border-color:rgba(183,211,255,.65); background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,249,255,.92))}
.qitem input[type="checkbox"]{appearance:none; margin:0; width:24px; height:24px; border-radius:8px; border:2px solid rgba(78,124,216,.32); background:rgba(255,255,255,.92); display:grid; place-content:center; cursor:pointer; transition:background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; box-shadow:inset 0 1px 2px rgba(10,20,40,.12)}
.qitem input[type="checkbox"]::after{content:""; display:block; width:6px; height:12px; border-right:2px solid transparent; border-bottom:2px solid transparent; transform:scale(0) rotate(45deg); transition:transform .18s ease}
.qitem input[type="checkbox"]:hover{border-color:rgba(78,124,216,.6)}
.qitem input[type="checkbox"]:checked{background:linear-gradient(130deg, var(--blue-strong), var(--violet-strong)); border-color:transparent; box-shadow:0 8px 20px rgba(78,124,216,.35); color:#ffffff}
.qitem input[type="checkbox"]:checked::after{border-color:#ffffff; transform:scale(1) rotate(45deg)}
.qitem input[type="checkbox"]:focus-visible{outline:3px solid rgba(183,211,255,.75); outline-offset:2px}
.qitem label{display:block; margin:0; font-size:14px; line-height:1.45; color:#1b2440; font-weight:600}
.qitem .qtitle{font-weight:600}

 .badge{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid var(--border); padding:6px 10px; border-radius:12px; font-size:12px; line-height:1}
 .badge.done{background:rgba(45,192,122,.12); border-color:var(--ok); color:var(--ok)}
 .badge.done::before{content:""; display:inline-block; width:6px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg)}

/* Forum */
section[data-route="/community"] #forum-list{display:grid; gap:24px}
section[data-route="/community"] > .route-canvas{
  mix-blend-mode:screen;
  opacity:.95;
}
section[data-route="/community"] .topic{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.72);
  box-shadow:0 28px 60px rgba(0,0,0,.55);
  transition:transform .24s ease, box-shadow .3s ease, border-color .3s ease, background .35s ease;
}
section[data-route="/community"] .topic::before{
  content:"";
  position:absolute;
  inset:auto -40% 0 -40%;
  height:240px;
  background:rgba(0,0,0,.25);
  opacity:.4;
  transform:translateY(68%);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
  z-index:0;
}
section[data-route="/community"] .topic::after{
  content:"";
  position:absolute;
  inset:-18%;
  border-radius:inherit;
  background:rgba(0,0,0,.18);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  transition:opacity .35s ease;
}
section[data-route="/community"] .topic[data-open="1"],
section[data-route="/community"] .topic:hover{
  transform:translateY(-4px);
  box-shadow:0 36px 72px rgba(0,0,0,.62);
  border-color:rgba(255,255,255,.22);
  background:rgba(0,0,0,.78);
}
section[data-route="/community"] .topic[data-open="1"]::before,
section[data-route="/community"] .topic:hover::before{
  opacity:.75;
  transform:translateY(10%);
}
section[data-route="/community"] .topic[data-open="1"]::after,
section[data-route="/community"] .topic:hover::after{
  opacity:.75;
}
section[data-route="/community"] .topic > *{position:relative; z-index:1}
section[data-route="/community"] .topic-header{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
section[data-route="/community"] .topic-avatar{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:20px;
  color:#131924;
  background:linear-gradient(135deg, rgba(255,225,200,.75), rgba(183,211,255,.7));
  box-shadow:0 16px 32px rgba(0,0,0,.45);
}
section[data-route="/community"] .topic-heading{display:grid; gap:8px; min-width:0; flex:1}
section[data-route="/community"] .topic-meta{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:rgba(226,233,255,.8)}
section[data-route="/community"] .topic-meta time{font-size:12px; letter-spacing:.02em; color:rgba(226,233,255,.72)}
section[data-route="/community"] .topic-cat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  color:#ffffff;
}
section[data-route="/community"] .topic-author,
section[data-route="/community"] .reply-author{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
section[data-route="/community"] .topic-author-name,
section[data-route="/community"] .reply-author-name{
  font-weight:600;
  color:#ffffff;
}
section[data-route="/community"] .author-meta{
  font-size:11px;
  font-weight:400;
  color:rgba(226,233,255,.72);
  line-height:1.2;
}
section[data-route="/community"] .topic-title{margin:0; font-size:clamp(22px, 3vw, 28px); font-weight:800; color:#ffffff; text-shadow:0 4px 18px rgba(0,0,0,.5)}
section[data-route="/community"] .topic-actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
section[data-route="/community"] .topic-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  color:#ffffff;
}
section[data-route="/community"] .topic-pill--empty{background:rgba(45,192,122,.12); border-color:rgba(45,192,122,.32); color:#8df0c2}
section[data-route="/community"] .topic-actions .btn{padding:10px 14px; border-radius:14px}
section[data-route="/community"] .topic-actions .topic-toggle{white-space:nowrap}
/* Rebuild the frosted background without backdrop-filter so route canvases stay visible */
section[data-route="/community"] .topic-body{
  display:grid;
  gap:18px;
  padding:20px;
  border-radius:22px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.14);
}
section[data-route="/community"] .topic-body::before{
  content:"";
  position:absolute;
  inset:-24%;
  border-radius:inherit;
  background:rgba(0,0,0,.22);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
section[data-route="/community"] .topic-body > *{
  position:relative;
  z-index:1;
}
section[data-route="/community"] .btn-message{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#ffffff; box-shadow:none}
section[data-route="/community"] .btn-message:hover{background:rgba(255,255,255,.18)}
section[data-route="/community"] .btn-message--small{padding:6px 10px; font-size:13px; border-radius:12px}
section[data-route="/community"] .topic-form-actions{display:flex; justify-content:flex-end}
section[data-route="/community"] .topic-manage{display:flex; justify-content:flex-end}
section[data-route="/community"] .topic .btn-danger{background:rgba(239,71,111,.15); border:1px solid rgba(239,71,111,.42); color:#ffb9c9}
section[data-route="/community"] .topic .btn-danger:hover{background:rgba(239,71,111,.25); color:#ffd0da}
section[data-route="/community"] .topic-body textarea{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.24); color:#ffffff}
section[data-route="/community"] .topic-body textarea:focus{box-shadow:0 0 0 2px rgba(138,182,255,.45); border-color:rgba(183,211,255,.6)}
section[data-route="/community"] .topic-body label{color:#ffffff}
section[data-route="/community"] #forum-cats{justify-content:center; gap:10px}
section[data-route="/community"] #forum-cats .btn-secondary{background:rgba(255,255,255,.1); color:#ffffff; border:1px solid rgba(255,255,255,.18); padding:8px 14px; border-radius:14px; box-shadow:none}
section[data-route="/community"] #forum-cats .btn-secondary.active{background:linear-gradient(92deg, var(--orange-strong), var(--blue-strong)); color:#ffffff; box-shadow:0 14px 28px rgba(78,124,216,.42)}
@media(max-width:768px){
  section[data-route="/community"] .topic{padding:20px 18px}
  section[data-route="/community"] .topic-header{align-items:flex-start; margin-bottom:12px}
  section[data-route="/community"] .topic-actions{width:100%; justify-content:flex-start}
  section[data-route="/community"] .topic-avatar{width:48px; height:48px; font-size:18px}
  section[data-route="/community"] .topic-entry{padding:16px 18px}
}

/* Dialog */
.dialog{
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border-radius:22px; padding:0;
  max-width:min(1100px, 98%);
  width:min(780px,96vw);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.dialog::backdrop{
  background:rgba(0,0,0,.38);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.dialog .form-grid{padding:16px}
.dialog-actions{display:flex; gap:10px; justify-content:flex-end; padding:8px 0 0}

/* Dialog content tweaks: larger by default, not resizable */
.dialog textarea{resize:none; min-height:200px}
/* Dialog labels in white for readability */
.dialog label{ color:#ffffff }

/* Inline notification popup (reuses dialog glass style) */
.notify-dialog{ width:min(420px, 96vw); padding:0 }
.notify-content{ display:grid; gap:10px; padding:14px }
.notify-title{ margin:0; font-size:16px; color:#ffffff }
.notify-text{ margin:0; color:#ffffff }
.notify-actions{ display:flex; justify-content:flex-end; gap:8px; padding-top:6px }

/* Toast stack for multiple notifications */
.notify-toasts{ position:fixed; top:12px; right:12px; display:grid; gap:10px; width:min(96vw, 420px); z-index:300; pointer-events:none }
@media(max-width:900px){
  .notify-toasts{ left:50%; right:auto; transform:translateX(-50%); width:min(96vw, 520px) }
}
.notify-toast{ pointer-events:auto; border:1px solid rgba(255,255,255,.22); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 28px rgba(0,0,0,.35); color:#ffffff; opacity:1; transform:translateY(0); transition:opacity .25s ease, transform .25s ease }
.notify-toast.hide{ opacity:0; transform:translateY(-6px) }
.notify-toast .nt-content{ padding:12px 14px; display:grid; gap:8px }
.notify-toast .nt-title{ margin:0; font-weight:700; font-size:15px; color:#ffffff }
.notify-toast .nt-text{ margin:0; color:#ffffff; font-size:14px }
.notify-toast .nt-actions{ display:flex; justify-content:flex-end; gap:8px }

/* Badge on Messages link in hamburger */
body.force-mobile .main-nav .nav-link{ position:relative }
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; font-size:12px; font-weight:800; color:#ffffff;
  background:linear-gradient(92deg, rgba(255,150,64,.85), rgba(78,124,216,.85)); border:1px solid rgba(255,255,255,.22) }
body.force-mobile .main-nav .nav-link .nav-badge{ position:absolute; right:12px; top:50%; transform:translateY(-50%) }

/* Charts */
.chart-card{padding:0; display:grid; gap:6px}
.chart-header{display:flex; justify-content:space-between; align-items:center; padding:12px 16px 0}
.chart-legend{display:flex; gap:8px}
.legend-item{display:flex; align-items:center; gap:4px; font-size:12px; background:rgba(255,255,255,.06); padding:2px 8px; border-radius:12px}
.legend-dot{width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.1)}
.chart{display:block; width:100%; height:240px}
.chart-note{padding:0 16px 12px; font-size:12px; color:var(--muted); border-top:1px solid var(--border)}

/* Dashboard: center first profile card and its contents */
/* Dashboard: center profile card and single-card rows */
section[data-route="/dashboard"] .grid-2 > .card.stack:first-child{
  grid-column: 1 / -1;
  margin-inline: auto;
  text-align: center;
}
section[data-route="/dashboard"] .grid-2 > .card.stack:first-child .hstack{ justify-content: center }
section[data-route="/dashboard"] .grid-2 > .card.stack:only-child{
  grid-column: 1 / -1;
  margin-inline: auto;
  text-align: center;
}
section[data-route="/dashboard"] .grid-2 > .card.stack:only-child .hstack{ justify-content: center }

/* Dashboard: remove frames/rounding from chart blocks */
section[data-route="/dashboard"] .chart-card{
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
}
.child-point{stroke:#ffffff; stroke-width:1.5}
.child-point-latest{animation:breathe 2s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}

.dashboard-view-toggle{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.dashboard-view-toggle__btn{
  border:1px solid rgba(30,50,100,.18);
  background:rgba(255,255,255,.12);
  color:var(--text);
  padding:8px 18px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dashboard-view-toggle__btn:hover{
  border-color:var(--violet-strong);
  background:rgba(255,255,255,.18);
}
.dashboard-view-toggle__btn.is-active{
  background:rgba(110,163,255,.28);
  border-color:var(--violet-strong);
  box-shadow:0 6px 20px rgba(110,163,255,.35);
}

.family-dashboard{
  display:grid;
  gap:20px;
}
.family-dashboard .card{
  background:linear-gradient(145deg, rgba(18,24,48,.82), rgba(12,16,30,.72));
  border:1px solid rgba(255,255,255,.12);
  color:#ffffff;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.family-dashboard .card:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 26px 58px rgba(0,0,0,.55);
}
.family-dashboard .card h3{color:#ffffff;}
.family-dashboard .page-subtitle{color:rgba(226,233,255,.78);}

.family-hero-card{
  position:relative;
  overflow:hidden;
}
.family-hero-card::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at top right, rgba(110,163,255,.28), transparent 55%);
  pointer-events:none;
  opacity:.85;
}
.family-hero-card > *{position:relative; z-index:1;}
.family-hero-header{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.family-avatar{
  width:72px;
  height:72px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,12,30,.65);
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:700;
  color:#ffffff;
}
.family-hero-heading h2{
  margin:0;
  font-size:clamp(24px, 3.2vw, 30px);
  font-weight:700;
  letter-spacing:.01em;
}
.family-hero-heading p{
  margin:4px 0 0;
  color:rgba(226,233,255,.82);
  font-size:0.95rem;
}
.family-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.family-hero-stats{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
}
.family-hero-stat{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(8,12,26,.65);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  gap:6px;
}
.family-hero-stat-label{
  font-size:0.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,233,255,.72);
}
.family-hero-stat-value{
  font-size:1.05rem;
  color:#ffffff;
}

.chip-soft{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  color:#ffffff;
}
.chip-label{
  opacity:.82;
  font-weight:500;
}
.chip-value{
  font-weight:700;
}

.family-columns{
  display:grid;
  gap:20px;
}
.family-main,
.family-side{
  display:grid;
  gap:20px;
}
@media(min-width:960px){
  .family-columns{
    grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
    align-items:start;
  }
}

.family-context-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.family-context-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.family-context-list span{
  color:var(--muted);
  font-size:.9rem;
}
.family-context-list strong{
  font-weight:600;
  color:#ffffff;
  text-align:right;
}

.family-children-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.family-child-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.family-child-avatar{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(110,163,255,.28);
  color:#ffffff;
  font-weight:700;
  font-size:18px;
  border:1px solid rgba(255,255,255,.16);
  flex-shrink:0;
}
.family-child-body{
  display:grid;
  gap:4px;
}
.family-child-body strong{
  font-size:1rem;
  color:#ffffff;
}
.family-child-meta{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
}
.family-child-dob{
  margin:0;
  font-size:.8rem;
}
.family-growth-alerts{ margin-top:4px; }
.family-growth-alerts__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.family-growth-alerts__item{
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
}
.family-growth-alerts__item.is-alert{
  border-color:rgba(239,71,111,.6);
  background:rgba(239,71,111,.12);
}
.family-growth-alerts__item.is-ok{
  border-color:rgba(45,192,122,.45);
  background:rgba(45,192,122,.12);
}
.family-growth-alerts__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}
.family-growth-alerts__icon{ font-size:16px; }
.family-growth-alerts__name{ font-weight:600; }
.family-growth-alerts__meta{
  font-size:12px;
  color:var(--muted);
}
.family-growth-alerts__text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#fff;
}
.family-growth-alerts__hint{
  margin:10px 0 0;
  font-size:12px;
  color:var(--muted);
}

.family-bilan-card{
  display:grid;
  gap:14px;
}
.family-bilan-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.family-bilan-text{
  font-size:.95rem;
  line-height:1.6;
  color:#ffffff;
}
.family-bilan-text p{margin:0 0 12px;}
.family-bilan-text p:last-child{margin-bottom:0;}
.family-bilan-meta{margin:0; font-size:.82rem;}

/* Landing sections */
.section{position:relative; padding:32px 0; overflow:visible}
.hero + .section{padding-top:44px}
@media(max-width:900px){.hero + .section{padding-top:8px}}

/* Mobile: center home sections and reduce width to avoid side cutoff */
@media (max-width:900px){
  section[data-route="/"] > .section{
    width: calc(100% - 8px);
    margin-inline: auto;
  }
}

/* Alternance de fond des sections sur la page d'accueil (full-bleed)
   Commence à partir de "Fonctionnalités clés" (1ère .section)
   Étend le fond jusqu'aux bords de la fenêtre via ::before en 100vw */
section[data-route="/"] > :nth-child(odd of .section){
  position: relative;
}
section[data-route="/"] > :nth-child(odd of .section)::before{
  display:none !important;
}

/* Canvas for section particles */
/* Canvas layers: use normal blend by default so they remain visible on dark backgrounds */
/* Increase default opacity of bubble canvases on non-home pages */
.section-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9; mix-blend-mode:normal}
.card-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9; mix-blend-mode:normal}
.route-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.9; mix-blend-mode:normal}
.logo-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.8; mix-blend-mode:screen}
/* Dashboard full-viewport canvas (fixed, no stretch) */
.route-canvas-fixed{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:0; opacity:.95; mix-blend-mode:screen}

section[data-route="/"] .section-canvas,
section[data-route="/"] .route-canvas{
  opacity:.45;
}
/* On mobile, reduce canvas opacity and disable blend to avoid brightening under glass */
@media(max-width:900px){
    .section-canvas,
    .route-canvas,
    .route-canvas-fixed,
    .card-canvas{
      opacity:.7 !important;
      mix-blend-mode: normal !important;
    }
  section[data-route="/"] > .route-canvas{
    opacity:.08 !important;
  }
  section[data-route="/"] .section-canvas,
  section[data-route="/"] .card-canvas{
    opacity:.35 !important;
  }
}

/* Mobile homepage: keep bubble canvases above cards */
@media(max-width:768px){
  section[data-route="/"] .hero-canvas{
    display:block !important;
    z-index:1;
  }
  section[data-route="/"] > .route-canvas,
  section[data-route="/"] .section-canvas,
  section[data-route="/"] .card-canvas{
    z-index:1;
  }
}
/* Ensure main content and footer sit above the fixed canvas */
#app{position:relative; z-index:3}
.site-footer{position:relative; z-index:1}
.route.active{ display:block !important }
.section.alt{background:transparent; border-top:none; border-bottom:none}
.section-title{margin:0 0 8px; font-size:clamp(24px, 3.4vw, 32px); text-align:center; font-weight:800}
.section-subtitle{margin:0 0 24px; color:var(--muted); text-align:center}
.page-header{display:grid; gap:6px; justify-items:center; text-align:center; margin:4px 0 18px}
.page-header h2{margin:0; font-size:clamp(26px, 3.6vw, 34px); font-weight:800}
.page-subtitle{margin:0; color:var(--muted)}
.page-actions{margin-top:12px; display:grid; gap:14px}
@media(max-width:900px){
  #forum-cats{justify-content:center}
}
.features{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.feature{
  /* Same background config as hero v2/newsletter */
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  border:1px solid var(--border);
  border-radius:26px;
  padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease;
  text-align:center; display:grid; gap:6px
}
.feature:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 56px rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16));
}
.feature-ico{width:72px; height:72px; display:grid; place-items:center; font-size:34px; border-radius:50%; background:#000000; color:#ffffff; margin:0 auto 2px; border:1px solid rgba(255,255,255,.18)}
.feature h3,.feature p{margin:0}
.flagship-section{position:relative; overflow:hidden}
.flagship-section::before{content:""; position:absolute; inset:-36% -24% 8%; background:radial-gradient(150% 120% at 18% 12%, rgba(255,170,110,.28), transparent 72%), radial-gradient(140% 120% at 84% 0%, rgba(120,170,255,.34), transparent 74%); opacity:.65; pointer-events:none}
.flagship-grid{position:relative; display:grid; justify-items:center; gap:clamp(28px,6vw,44px); padding:clamp(40px,7vw,60px) clamp(20px,6vw,44px); max-width:1180px; margin:0 auto}
.flagship-content{display:grid; gap:clamp(22px,3.4vw,36px); position:relative; z-index:2; justify-items:center; text-align:center; width:100%}
.flagship-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:999px; background:linear-gradient(135deg, rgba(255,225,200,.22), rgba(183,211,255,.18)); border:1px solid rgba(255,255,255,.28); box-shadow:0 12px 30px rgba(0,0,0,.35); text-transform:uppercase; letter-spacing:.22em; font-size:.75rem; font-weight:700; color:var(--orange-strong)}
.flagship-pill::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--orange-strong)}
.flagship-title{margin:0; text-align:center}
.flagship-subtitle{margin:0; text-align:center; color:var(--muted); max-width:720px}
.flagship-media{width:clamp(260px,46vw,560px); margin:0 auto; display:flex; justify-content:center}
.flagship-image-wrap{position:relative; width:100%; border-radius:46px; overflow:hidden; padding:0; box-shadow:0 36px 90px rgba(0,0,0,.52); isolation:isolate}
.flagship-image-wrap::before{content:""; position:absolute; inset:-18% -24% -20%; background:radial-gradient(125% 125% at 20% 15%, rgba(255,170,110,.44), transparent 70%), radial-gradient(125% 125% at 78% 10%, rgba(120,170,255,.4), transparent 74%); filter:blur(55px); opacity:.75; z-index:-1}
.flagship-image{display:block; width:100%; height:auto; border-radius:inherit}
.flagship-cards{display:flex; gap:clamp(16px,2.4vw,28px); width:100%; overflow-x:auto; overflow-y:hidden; padding:4px clamp(18px,6vw,34px) 16px; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(14px,4vw,28px); justify-content:flex-start; align-items:stretch; position:relative; margin:0 auto; touch-action:pan-x; overscroll-behavior-inline:contain; overscroll-behavior-block:none}
.flagship-cards::before{content:""; position:absolute; inset:0; border-radius:40px; background:radial-gradient(120% 120% at 0% 0%, rgba(255,170,110,.12), transparent 70%); opacity:.5; pointer-events:none}
.flagship-cards::-webkit-scrollbar{height:8px}
.flagship-cards::-webkit-scrollbar-thumb{background:linear-gradient(135deg, rgba(255,170,110,.6), rgba(120,170,255,.6)); border-radius:999px}
.flagship-cards::-webkit-scrollbar-track{background:rgba(255,255,255,.08); border-radius:999px}
.flagship-card{position:relative; flex:0 0 clamp(220px, 23vw, 250px); padding:24px 20px 24px; border-radius:28px; background:linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12)); border:1px solid var(--border); box-shadow:0 24px 56px rgba(0,0,0,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; flex-direction:column; gap:14px; text-align:left; scroll-snap-align:start; transition:transform .2s ease, box-shadow .34s ease, border-color .22s ease, background .3s ease; min-height:clamp(260px, 28vw, 290px); height:100%;}
.flagship-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(255,255,255,.14); opacity:.28; pointer-events:none; transition:opacity .3s ease}
.flagship-card::after{content:""; position:absolute; inset:18px; border-radius:inherit; background:linear-gradient(135deg, rgba(255,225,200,.08), rgba(183,211,255,.05)); opacity:.16; transition:opacity .3s ease}
.flagship-card:hover{transform:translateY(-6px); box-shadow:0 28px 66px rgba(0,0,0,.5); border-color:rgba(255,255,255,.24); background:linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16))}
.flagship-card:hover::before{opacity:.7}
.flagship-card:hover::after{opacity:.26}
.flagship-card-badge::after{content:""; position:absolute; inset:2px; border-radius:inherit; border:1px solid rgba(255,255,255,.12); opacity:.5; box-shadow:inset 0 0 18px rgba(255,170,110,.12)}
.flagship-card-badge::before{content:""; position:absolute; inset:-45% -30% 55% -15%; background:radial-gradient(85% 80% at 32% 28%, rgba(255,170,110,.35), transparent 75%); opacity:.55}

.flagship-card-badge{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0; border-radius:18px; background:radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.16), transparent 70%), linear-gradient(145deg, rgba(18,22,34,.96), rgba(28,32,48,.9)); box-shadow:0 18px 32px rgba(0,0,0,.38); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.18)}
.flagship-card-num{position:relative; display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:800; font-size:1.15rem; color:var(--orange-strong); letter-spacing:.08em; text-shadow:0 2px 10px rgba(255,140,60,.35); z-index:1}
.flagship-card-num::before{content:""; position:absolute; inset:6px; border-radius:14px; background:radial-gradient(120% 120% at 20% 15%, rgba(255,190,140,.28), transparent 70%), linear-gradient(145deg, rgba(24,28,44,.92), rgba(14,16,26,.88)); box-shadow:0 12px 26px rgba(0,0,0,.38); opacity:.92; z-index:-1}
.flagship-card h3{margin:0; font-size:clamp(18px,1.8vw,20px); font-weight:780; letter-spacing:.015em; color:var(--text)}
.flagship-card-body h3::after{content:""; display:block; height:2px; width:clamp(48px, 42%, 120px); margin:10px 0 0; border-radius:999px; background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong)); opacity:.85}
.flagship-card p{margin:0; color:var(--muted); line-height:1.48; font-size:clamp(13px, 1vw, 15px)}
@media(max-width:900px){
  .flagship-cards{
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.92) 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.92) 8%, rgba(0,0,0,.92) 92%, transparent 100%);
  }
  .flagship-cards::before,
  .flagship-cards::after{
    content:"";
    position:absolute;
    top:-12px;
    bottom:-12px;
    width:clamp(30px, 11vw, 60px);
    pointer-events:none;
    z-index:3;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
    filter:blur(16px);
    opacity:.55;
    mix-blend-mode:screen;
  }
  .flagship-cards::before{
    left:-12px;
    transform:translateX(-2px);
  }
  .flagship-cards::after{
    right:-12px;
    transform:translateX(2px);
    background:linear-gradient(270deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  }
}
.flagship-card-head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.flagship-card-head > *:last-child{text-align:right; justify-self:flex-end}
.flagship-card-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.24em; color:rgba(255,255,255,.6)}
.flagship-card .flagship-card-body{display:grid; gap:8px; flex:1}

@media(min-width:1100px){
  .flagship-cards{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; max-width:1080px; margin:0 auto; padding:0; overflow:visible; align-items:stretch; justify-items:stretch; scroll-snap-type:none; -webkit-mask-image:none; mask-image:none}
  .flagship-cards::before, .flagship-cards::after{display:none}
  .flagship-card{max-width:none; aspect-ratio:1 / 1; border-radius:26px}
  .flagship-card-body{justify-content:space-between}
}
@media(max-width:640px){
  .flagship-card{flex:0 0 clamp(240px, 78vw, 300px)}
}
.flagship-cta{display:flex; justify-content:center}
.flagship-cta .btn{min-width:230px; justify-content:center; font-size:1.06rem; padding:13px 30px; box-shadow:0 18px 40px rgba(0,0,0,.4)}
@media(max-width:820px){
  .flagship-card{padding:20px 18px}
  .flagship-image-wrap{border-radius:38px}
}
@media(max-width:540px){
  .flagship-card{flex:0 0 clamp(220px, 82vw, 260px)}
  .flagship-card-badge{width:36px; height:36px; border-radius:12px}
  .flagship-card-num{font-size:.95rem}
  .flagship-pill{letter-spacing:.18em; font-size:.72rem}
}



/* Home feature rows (image + text, alternating) */
.feature-rows{ display:grid; gap:16px }
.feature-row{ display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 6px }
.feature-row.reverse{ flex-direction:row-reverse }
.feature-illustration{ display:block; width:min(100%, 520px); height:auto; opacity:.82; border-radius:36px }
.feature-illustration.feature-animate{ animation: floatSoft 6s ease-in-out infinite }
@keyframes floatSoft {
  0%   { transform: translateY(0) translateX(0) }
  50%  { transform: translateY(-10px) translateX(4px) }
  100% { transform: translateY(0) translateX(0) }
}
@media (prefers-reduced-motion: reduce){ .feature-illustration.feature-animate{ animation:none } }
.feature-copy{ display:grid; gap:8px; max-width:640px }
.feature-copy h3{ margin:0 0 4px; font-size: clamp(22px, 3.6vw, 36px); font-weight: 800 }
.feature-copy p{ margin:0 0 6px; color:var(--muted) }
@media(max-width:900px){
  .feature-row, .feature-row.reverse{ flex-direction:column; text-align:center }
  .feature-copy{ max-width:720px }
}
.steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px}
.step{
  /* Same background config as hero v2/newsletter */
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  border:1px solid var(--border);
  border-radius:36px;
  padding:24px 20px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease;
  text-align:center; display:grid; gap:6px
}
.step:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 52px rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16));
}
.step-icon{position:relative; width:64px; height:64px; display:grid; place-items:center; font-size:30px; border-radius:50%; background:#000000; border:1px solid rgba(255,255,255,.18); color:#ffffff; margin:0 auto; box-shadow:0 6px 16px rgba(78,124,216,.24), 0 3px 10px rgba(255,170,110,.20); transition:transform .18s ease}
.step:hover .step-icon{ transform: translateY(-2px) }
.step-icon .step-num{position:absolute; top:-8px; left:-8px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(92deg,var(--orange-strong), var(--blue-strong)); color:#ffffff; box-shadow:0 6px 16px rgba(78,124,216,.32), 0 3px 10px rgba(255,170,110,.30); font-weight:700}
.step h3,.step p{margin:0}
.step h3{ letter-spacing:.2px }
.step h3::after{ content:""; display:block; height:2px; width:36%; margin:6px auto 0; border-radius:999px; background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong)); opacity:.85 }
.step p{ color: var(--text); opacity:.92; line-height:1.45 }
@media(max-width:900px){ .step{ padding:20px 16px 16px } }

/* IA tools layout */
section[data-route="/ai"] > .stack{gap:20px}
section[data-route="/ai"] .card, section[data-route="/ai"] .card:hover{box-shadow:none; transform:none}
/* On AI page, force gray (muted) texts to white */
section[data-route="/ai"]{ --muted: #ffffff; }
/* On AI page, remove frames from all section cards */
section[data-route="/ai"] .card{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
section[data-route="/ai"] > .route-canvas{
  z-index: 1;
  opacity: .45;
}
/* Exception: keep a frame for the profile indicator empty state */
section[data-route="/ai"] #ai-profile-indicator{
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  background: transparent !important;
}
section[data-route="/ai"] #ai-profile-indicator.ai-child-selector{
  border: none !important;
  padding: 0;
}
section[data-route="/ai"] .ai-child-switcher{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
section[data-route="/ai"] .ai-child-switcher label{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}
section[data-route="/ai"] .ai-child-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 700;
}
section[data-route="/ai"] .ai-child-select{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.38);
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
section[data-route="/ai"] .ai-child-select:focus-within{
  border-color: var(--orange-strong);
  box-shadow: 0 24px 52px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.05);
  transform: translateY(-1px);
}
section[data-route="/ai"] .ai-child-icon{
  font-size: 20px;
}
section[data-route="/ai"] .ai-child-select select{
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  appearance: none;
  padding: 0;
  min-width: 0;
}
section[data-route="/ai"] .ai-child-select select:focus{
  outline: none;
}
section[data-route="/ai"] .ai-child-select select option{
  color: #000000;
}
section[data-route="/ai"] .ai-child-caret{
  margin-left: auto;
  font-size: 14px;
  opacity: .66;
  pointer-events: none;
}
section[data-route="/ai"] .ai-child-hint{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.76);
}
@media(max-width:600px){
  section[data-route="/ai"] .ai-child-switcher{
    gap: 10px;
  }
  section[data-route="/ai"] .ai-child-hint{
    font-size: 13px;
  }
}
/* Make only the “Créer un profil” link orange inside the indicator */
section[data-route="/ai"] #ai-profile-indicator a[href*="/onboarding"]{
  color: var(--orange-strong) !important;
}
/* AI page: thin separators between consecutive feature sections */
section[data-route="/ai"] > .stack > .card + .card{ position: relative; }
section[data-route="/ai"] > .stack > .card + .card::before{
  content:""; position:absolute; top:-12px; left:0; right:0; height:1px;
  background: rgba(255,255,255,.16);
}
/* AI page: make section titles as large as the page title and centered */
section[data-route="/ai"] .card-header{ text-align:center; align-items:center; }
section[data-route="/ai"] .card-header h3{
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 800;
}
section[data-route="/ai"] .card-header p{ text-align:center; }
.testimonials{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px}
.testimonial{
  position:relative; overflow:hidden; border-radius:26px; padding:18px 18px 14px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease;
}
.testimonial::before{content:"\201C"; position:absolute; top:-6px; left:12px; font-size:64px; line-height:1; background:linear-gradient(92deg,var(--orange-strong),var(--blue-strong)); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; opacity:.20; pointer-events:none}
.testimonial:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16));
  box-shadow:0 24px 56px rgba(0,0,0,.55);
}
.testimonial p{margin:0 0 8px; font-style:italic; font-size:15px; color:var(--text); opacity:.95}
.testimonial .who{color:var(--muted); font-size:12px; font-weight:600}
/* FAQ — module harmonisé */
.faq-section{ position:relative; opacity:1; }
.faq-header{
  max-width:640px;
  margin:0 auto clamp(24px, 5vw, 36px);
  display:grid;
  gap:12px;
  text-align:center;
}
.faq-header .section-subtitle{
  margin:0;
  color:var(--muted);
}
.faq-list{
  margin:0 auto;
  max-width:760px;
  border-radius:26px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .2s ease;
}
.faq-item:last-of-type{ border-bottom:none; }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:22px clamp(24px, 6vw, 32px);
  list-style:none;
  cursor:pointer;
  color:var(--text);
  font-size:clamp(16px, 2.4vw, 18px);
  font-weight:600;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-size:22px;
  line-height:1;
  color:var(--muted);
  transition:transform .2s ease, color .2s ease;
}
.faq-item summary{ background:transparent; }
.faq-item[open] summary{ color:var(--orange-strong); }
.faq-item[open] summary::after{
  transform:rotate(45deg);
  color:var(--orange-strong);
}
.faq-item summary:focus-visible{
  outline:2px solid var(--orange-strong);
  outline-offset:4px;
}
.faq-answer{
  padding:0 clamp(24px, 6vw, 32px) clamp(22px, 6vw, 30px);
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}
.faq-answer p{ margin:0; }
.faq-answer p + p{ margin-top:12px; }
.faq-answer ul{
  margin:16px 0 0;
  padding-left:20px;
  display:grid;
  gap:8px;
}
.faq-answer a{
  color:var(--orange-strong);
  font-weight:600;
  text-decoration:none;
}
.faq-answer a:hover{ text-decoration:underline; }
@media(max-width:600px){
  .faq-header{ text-align:left; gap:10px; }
  .faq-list{ border-radius:22px; }
  .faq-item summary{ padding:20px 22px; }
  .faq-answer{ padding:0 22px 22px; }
}

/* Newsletter CTA (cohérent avec .cta-inner / testimonials / faq) */
.newsletter-cta{
  display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center;
  /* Aligne la configuration visuelle sur la carte héros v2 */
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 28px;
}
@media(max-width:900px){ .newsletter-cta{ grid-template-columns:1fr; text-align:center } }
.newsletter-cta .nl-head{ display:flex; align-items:center; gap:10px; margin:0 0 6px }
.newsletter-cta .nl-title{
  margin:0; font-size:clamp(18px, 2.6vw, 22px); font-weight:800;
  background:linear-gradient(90deg, var(--orange-strong), var(--blue-strong));
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 1px 5px rgba(255,203,164,.22), 0 1px 10px rgba(78,124,216,.18);
}
.newsletter-cta .nl-text{ margin:0 0 8px; color:var(--text); opacity:.9 }
.newsletter-cta .nl-icon{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(92deg,var(--orange-strong), var(--blue-strong)); box-shadow:0 6px 16px rgba(78,124,216,.32), 0 3px 10px rgba(255,170,110,.30) }
.newsletter-cta .nl-chips{ display:flex; gap:8px; flex-wrap:wrap }
@media(max-width:900px){ .newsletter-cta .nl-chips{ justify-content:center } }
.newsletter-cta .newsletter-form{ display:grid; gap:8px }
.newsletter-cta .nl-input{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.newsletter-cta input[type="email"]{ flex:1 1 260px; min-width:220px }
.newsletter-cta button{ flex:0 0 auto }

.cta-banner{padding:24px 0}
.cta-inner:not(.newsletter-cta){
  background:linear-gradient(120deg, rgba(142,125,255,.25), rgba(53,223,207,.2));
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  display:grid; place-items:center; text-align:center;
  backdrop-filter:blur(8px);
}

/* Utilities */
.hidden{display:none !important}
[hidden]{display:none !important}

/* Chat UI */
.chat-card{background:linear-gradient(145deg,#1e1e1e,#2b2b2b); border:1px solid rgba(255,255,255,.15); border-radius:24px; box-shadow:0 12px 32px rgba(0,0,0,.45)}
.ai-image-card{
  background:linear-gradient(145deg,#1f1f28,#2d3244) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:24px;
  box-shadow:0 12px 32px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.ai-image-card .card-header p{ max-width:640px; margin:0 auto; }
.ai-image-form textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);
  color:#ffffff;
  font-size:15px;
  line-height:1.45;
  transition:border-color .2s ease, background .2s ease;
}
.ai-image-form textarea:focus{
  outline:none;
  border-color:var(--orange-strong);
  background:rgba(0,0,0,.38);
}
.ai-image-feedback{
  display:grid;
  gap:14px;
  justify-items:center;
  text-align:center;
  padding-block:4px 8px;
}
.ai-image-spinner{
  width:82px;
  height:82px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 25% 25%, rgba(255,255,255,.18), rgba(0,0,0,.4));
  box-shadow:0 16px 36px rgba(0,0,0,.35), inset 0 2px 6px rgba(0,0,0,.5);
}
.ai-image-spinner::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  box-shadow:inset 0 0 18px rgba(255,255,255,.12);
}
.ai-image-spinner-core{
  width:100%;
  height:100%;
  border-radius:50%;
  position:relative;
  --grad:conic-gradient(from 0deg, rgba(255,153,0,.1) 0deg, rgba(255,153,0,.85) 120deg, rgba(255,96,0,.65) 240deg, rgba(255,153,0,.1) 360deg);
}
.ai-image-spinner-core::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--grad);
  animation:ai-orbit 1.2s linear infinite;
  mask:radial-gradient(circle at center, transparent 58%, black 60%);
}
.ai-image-spinner-core::after{
  content:"";
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.05) 70%, transparent 100%);
  opacity:.6;
}

.loading-spinner{
  width:54px;
  height:54px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 25% 25%, rgba(255,255,255,.18), rgba(0,0,0,.4));
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 2px 6px rgba(0,0,0,.5);
}
.loading-spinner::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  box-shadow:inset 0 0 14px rgba(255,255,255,.12);
}
.loading-spinner-core{
  width:100%;
  height:100%;
  border-radius:50%;
  position:relative;
  --grad:conic-gradient(from 0deg, rgba(255,153,0,.1) 0deg, rgba(255,153,0,.85) 120deg, rgba(255,96,0,.65) 240deg, rgba(255,153,0,.1) 360deg);
}
.loading-spinner-core::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--grad);
  animation:ai-orbit 1.2s linear infinite;
  mask:radial-gradient(circle at center, transparent 58%, black 60%);
}
.loading-spinner-core::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.05) 70%, transparent 100%);
  opacity:.6;
}
.loading-spinner--inline{
  width:46px;
  height:46px;
}
@keyframes ai-orbit{
  to{ transform:rotate(360deg); }
}
.generation-status{
  margin:0;
  font-size:14px;
  color:#ffffff;
  letter-spacing:.1px;
}
.ai-image-error{
  padding:10px 16px;
  border-radius:18px;
  background:rgba(255,64,112,.16);
  border:1px solid rgba(255,64,112,.32);
  color:#ff9aac;
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.ai-image-result{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  padding:18px;
  max-width:480px;
  display:grid;
  box-shadow:0 16px 40px rgba(0,0,0,.38);
}
.ai-image-result img{
  width:100%;
  height:auto;
  border-radius:18px;
  object-fit:cover;
}
@media(max-width:720px){
  .ai-image-result{ max-width:100%; padding:16px; }
  .ai-image-form textarea{ min-height:110px; }
}

/* AI tools showcase */
@property --ai-drift{
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@keyframes aiFloatChat{
  0%,100%{ --ai-drift: 0px; }
  28%{ --ai-drift: -10px; }
  52%{ --ai-drift: -3px; }
  76%{ --ai-drift: -12px; }
}
@keyframes aiFloatStory{
  0%,100%{ --ai-drift: -2px; }
  22%{ --ai-drift: -9px; }
  44%{ --ai-drift: -4px; }
  68%{ --ai-drift: -13px; }
}
@keyframes aiFloatRecipes{
  0%,100%{ --ai-drift: 0px; }
  18%{ --ai-drift: -6px; }
  43%{ --ai-drift: -2px; }
  71%{ --ai-drift: -11px; }
  87%{ --ai-drift: -4px; }
}
@keyframes aiFloatImages{
  0%,100%{ --ai-drift: -1px; }
  26%{ --ai-drift: -8px; }
  58%{ --ai-drift: -3px; }
  83%{ --ai-drift: -14px; }
}

.ai-tools-showcase{
  text-align:center;
  padding-top:0;
}
.ai-tools-showcase .section-title{ margin-bottom:6px; }
.ai-tools-showcase .section-subtitle{ margin-bottom:28px; color:var(--muted); }
.ai-tools-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:26px;
  justify-items:center;
}
.ai-tool-card{
  display:grid;
  gap:12px;
  justify-items:center;
  text-align:center;
  color:var(--text);
}
.ai-tool-bubble{
  position:relative;
  width:min(260px, 100%);
  min-height:220px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
  border-radius:32px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12));
  box-shadow:
    0 10px 20px rgba(0,0,0,.24),
    0 3px 8px rgba(0,0,0,.16),
    inset 0 6px 12px rgba(255,255,255,.04),
    inset 0 -8px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease, box-shadow .25s ease, border-color .18s ease, background .25s ease;
  --ai-drift:0px;
  transform:translate3d(0, var(--ai-drift), 0);
}
.ai-tool-bubble::before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:inherit;
  background:linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
  opacity:.62;
  pointer-events:none;
  transition:opacity .2s ease;
  mix-blend-mode:screen;
}
.ai-tool-card:hover .ai-tool-bubble,
.ai-tool-bubble:focus-visible{
  transform:translate3d(0, calc(var(--ai-drift) - 4px), 0);
  box-shadow:
    0 14px 28px rgba(0,0,0,.28),
    0 5px 12px rgba(0,0,0,.18),
    inset 0 8px 14px rgba(255,255,255,.05),
    inset 0 -10px 16px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16));
}
.ai-tool-bubble:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:6px;
}
.ai-tool-card:hover .ai-tool-bubble::before,
.ai-tool-bubble:focus-visible::before{
  opacity:.82;
}
.ai-tool-copy{
  display:grid;
  gap:8px;
  text-align:center;
  align-items:center;
}
.ai-tool-copy h3{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
  font-weight:800;
}
.ai-tool-copy p{
  margin:0;
  font-size:14px;
  color:rgba(255,255,255,.78);
  line-height:1.45;
}
.ai-tool-cta{
  padding-inline:20px;
  border-radius:999px;
}
.ai-tool-card .btn{ font-size:13px; }
.ai-focus-highlight .ai-tool-bubble{
  border-color:rgba(255,153,0,.55) !important;
  box-shadow:0 28px 68px rgba(255,153,0,.28);
}
.ai-focus-highlight .ai-tool-bubble::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:radial-gradient(circle at center, rgba(255,180,80,.18), transparent 70%);
  pointer-events:none;
}
.ai-tool-bubble[data-target="chat"]{
  border-radius:46% 54% 60% 40% / 44% 36% 64% 56%;
  animation:aiFloatChat 6.8s ease-in-out infinite;
  animation-delay:-0.9s;
}
.ai-tool-bubble[data-target="story"]{
  border-radius:58% 42% 52% 48% / 46% 58% 42% 54%;
  animation:aiFloatStory 7.6s ease-in-out infinite;
  animation-delay:-1.6s;
}
.ai-tool-bubble[data-target="recipes"]{
  border-radius:40% 60% 48% 52% / 60% 38% 62% 40%;
  animation:aiFloatRecipes 6.3s ease-in-out infinite;
  animation-delay:-0.4s;
}
.ai-tool-bubble[data-target="images"]{
  border-radius:52% 48% 62% 38% / 42% 64% 36% 58%;
  animation:aiFloatImages 7.2s ease-in-out infinite;
  animation-delay:-2.1s;
}
@media(max-width:1100px){
  .ai-tools-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:720px){
  .ai-tool-bubble{
    width:min(230px, 84vw);
    min-height:200px;
    padding:24px 20px;
  }
}
@media(max-width:640px){
  .ai-tools-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}
@media(max-width:480px){
  .ai-tool-bubble{
    width:min(220px, 88vw);
    min-height:180px;
    padding:22px 18px;
  }
  .ai-tool-copy h3{ font-size:17px; }
  .ai-tool-copy p{ font-size:13px; }
}
.chat-window{display:flex; flex-direction:column; gap:12px; flex:1 1 auto; height:70vh; min-height:60vh; max-height:70vh; border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:12px; background:rgba(255,255,255,.05); box-shadow:0 8px 24px rgba(0,0,0,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:hidden}
.chat-messages{flex:1 1 auto; min-height:0; overflow-y:auto; padding:0; display:flex; flex-direction:column; gap:12px}
#conversation{flex:1 1 auto; min-height:0; overflow-y:auto}
.parent-list, #conversation, .chat-messages{ -ms-overflow-style:none; scrollbar-width:none }
.parent-list::-webkit-scrollbar, #conversation::-webkit-scrollbar, .chat-messages::-webkit-scrollbar{ display:none }
.chat-line{display:flex; align-items:flex-end; gap:8px}
/* Home cards override with strong specificity to match hero/newsletter */
section[data-route="/"] .features .feature{
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12)) !important;
  border:1px solid var(--border) !important;
  border-radius:26px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
section[data-route="/"] .features .feature:hover{
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16)) !important;
  box-shadow:0 24px 56px rgba(0,0,0,.55) !important;
  border-color:rgba(255,255,255,.22) !important;
}
section[data-route="/"] .steps .step{
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12)) !important;
  border:1px solid var(--border) !important;
  border-radius:26px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
section[data-route="/"] .steps .step:hover{
  background: linear-gradient(135deg, rgba(255,225,200,.18), rgba(183,211,255,.16)) !important;
  box-shadow:0 22px 52px rgba(0,0,0,.5) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.chat-line.user{flex-direction:row-reverse}
.chat-line .avatar{flex:0 0 32px; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(255,255,255,.1)}
.chat-line.user .avatar{background:linear-gradient(135deg,var(--orange-strong),var(--blue-strong))}
.chat-line .message{display:flex; flex-direction:column; max-width:80%}
.chat-line.user .message{align-items:flex-end}
.chat-line.assistant .message{align-items:flex-start}
.chat-input{display:flex; flex-direction:column; gap:8px}
.chat-row{display:flex; gap:8px; align-items:flex-end}
.chat-send{display:flex; align-items:center; justify-content:center}
.chat-textarea{width:100%; resize:none; min-height:44px; max-height:120px; padding:12px 16px; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(0,0,0,.25); color:#ffffff}
.chat-textarea:focus{outline:none; border-color:var(--orange-strong); background:rgba(0,0,0,.35)}
.chat-actions{display:flex; justify-content:space-between; align-items:center; gap:10px}
.chat-reset{justify-self:end}
.bubble{max-width:100%; padding:12px 16px; border-radius:20px; line-height:1.4; color:#ffffff}
.bubble.assistant{background:rgba(255,255,255,.08); border:none}
.chat-window .chat-messages{max-height:100%}
@media(max-width:600px){
  .chat-window{height:60vh; min-height:60vh; max-height:60vh}
  #conversation,
  .chat-window .chat-messages{max-height:100%}
}
.bubble.user{background:linear-gradient(135deg,var(--orange-strong),var(--violet-strong)); border:none; color:#000}
.chat-messages .meta{font-size:11px; color:var(--muted); margin-bottom:2px}
.chat-line.user .meta{text-align:right}
.typing{display:flex; gap:4px}
.typing span{width:8px; height:8px; background:rgba(255,255,255,.6); border-radius:50%; animation:typing 1s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* Réduction animations (général) */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Mobile adaptations */
@media(max-width:900px){
  .container{width:94%}
  .container{overflow-x:hidden}
  .header-inner{position:relative}
  /* Header: rely on body.force-mobile for hamburger/menu behavior */
  .hero-content{grid-template-columns:1fr; position:static}
  .hero-copy{position:static; z-index:auto; display:grid; gap:10px; align-content:start; justify-items:start; padding:0; text-align:left}
  .hero-actions .btn{width:auto}
  .hero-visual{display:block; position:static; margin-top:12px; width:100%; background:none; height:auto; max-height:none; overflow:visible; border-radius:0; border:none; box-shadow:none; perspective:800px}
  .hero-visual::after{display:none}
  .hero-image{display:block; object-fit:contain; width:min(100%, 300px); height:auto; margin:0 auto; animation:spinY 5s linear infinite}
  .hero-stats{display:none}
  .chart{height:200px}
}

/* Force mobile menu when not enough space (JS toggles body.force-mobile) */
body.force-mobile .nav-toggle{display:inline-flex}
/* Mobile hamburger menu — full-screen, centered, translucent pills */
body.force-mobile .main-nav{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:transparent; /* rely on backdrop */
  border:none; box-shadow:none;
  /* Add extra top padding to clear the header area visually */
  padding: calc(72px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
  z-index:90;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition: transform .3s ease, opacity .3s ease;
}
/* Hide nav content fully when closed */
body.force-mobile .main-nav:not(.open){ display:none !important }
body.force-mobile .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
body.force-mobile .main-nav.open .nav-ico{display:none}
body.force-mobile .main-nav .nav-link{
  display:block;
  width:min(86vw, 360px);
  padding:14px 18px;
  margin:8px 0;
  border-radius:999px;
  color:var(--orange-strong) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  text-align:center;
  font-weight:700; letter-spacing:.2px;
  text-decoration:none;
}
body.force-mobile .main-nav .nav-link.active{
  background:linear-gradient(180deg, rgba(255,165,100,.18), rgba(255,165,100,.10));
  border-color:var(--orange-strong);
}
body.force-mobile .main-nav .nav-link:hover{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05))}
body.force-mobile .main-nav .nav-link:focus-visible{outline:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
body.force-mobile .main-nav a.nav-link + a.nav-link{ border-top:none }

/* Pro styling for mobile hamburger menu */
/* strengthen backdrop of the overlay */
.nav-backdrop{background:rgba(0,0,0,.45); backdrop-filter:blur(14px) saturate(140%)}

/* Subtle, professional toggle style on mobile */
body.force-mobile .nav-toggle{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  position: relative;
  z-index: 200;
}
/* Show all auth actions; visibility controlled via [hidden] by JS */

/* Always use overlay nav pattern on all viewports (independent of .force-mobile) */
.main-nav{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:transparent; border:none; box-shadow:none;
  padding: calc(72px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
  z-index:90;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
  transition: transform .3s ease, opacity .3s ease;
}
.main-nav.open{ display:grid; transform:translateY(0); opacity:1; pointer-events:auto }

/* Make section blocks transparent (cards, features, steps, etc.) */
.card, .card:hover,
.feature, .feature:hover,
.step, .step:hover,
.qitem, .qitem:hover,
.faq-item,
.pillar, .pillar:hover,
.hero-stats .stat{
  background: rgba(24,28,38,.92) !important;
}

.faq-section .faq-list{
  background: linear-gradient(135deg, rgba(255,225,200,.14), rgba(183,211,255,.12)) !important;
}
.faq-section .faq-item{
  background: rgba(18,18,20,.9) !important;
}
.faq-section .faq-item[open]{
  background: rgba(18,18,20,.94) !important;
}

/* Make all textual content white and ensure readability on dark */
.section-title,
.page-header h2,
h1, h2, h3 {
  color:#ffffff !important;
  background:none !important;
  background-clip:initial !important;
  -webkit-background-clip:initial !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}
.hero-title{ background:none !important; -webkit-text-fill-color:#ffffff !important; text-shadow:none !important; }
/* Home hero title in orange */
section[data-route="/"] .hero-title{
  color: var(--orange-strong) !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
}
/* Recolor the small underline under the hero title to orange gradient */
section[data-route="/"] .hero-title::after{
  background: linear-gradient(90deg, var(--orange-strong), var(--orange)) !important;
}


/* Section titles in orange across the site */
.section-title,
.page-header h2{
  color: var(--orange-strong) !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
  background: none !important;
  text-shadow: none !important;
}

/* Internal headings (cards, features, steps, charts) in orange */
.card h3,
.card-header h3,
.feature h3,
.step h3,
.chart-header h3,
h3{
  color: var(--orange-strong) !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
}
/* h4 as well (subsection headings) */
.card h4,
.card-header h4,
.feature h4,
.step h4,
.chart-header h4,
h4{
  color: var(--orange-strong) !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
}
/* Make home hero title orange as requested */
section[data-route="/"] .hero-title{
  color: var(--orange-strong) !important;
  -webkit-text-fill-color: var(--orange-strong) !important;
}

/* Chips readable on dark */
.chip{ background:rgba(255,255,255,.08); color:#ffffff; border-color:rgba(255,255,255,.18) }

/* Inputs readable on dark */
input, select, textarea{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  color:#ffffff;
  font-size:16px;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.55) }

/* Header online status: breathing green dot */
.login-status{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--ok);
  position: relative;
  margin: 0 6px 0 8px; /* slight gap from adjacent button */
  vertical-align: middle;
  box-shadow:0 0 0 0 rgba(45,192,122,.55);
  animation: login-pulse 2.2s ease-out infinite;
}
.login-status::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid rgba(45,192,122,.30);
  animation: login-breathe 2.2s ease-out infinite;
}
@keyframes login-pulse{
  0%   { box-shadow:0 0 0 0 rgba(45,192,122,.55) }
  60%  { box-shadow:0 0 0 10px rgba(45,192,122,0) }
  100% { box-shadow:0 0 0 0 rgba(45,192,122,0) }
}
@keyframes login-breathe{
  0%   { transform: scale(.8); opacity:.65 }
  60%  { transform: scale(2.0); opacity:0 }
  100% { transform: scale(2.0); opacity:0 }
}

/* Footer links white */
.fs-link{ color:#ffffff }
.fs-year{ color:var(--muted) }

/* Settings page: make delete buttons burgundy translucent */
section[data-route="/settings"] .btn-danger{
  background: linear-gradient(180deg, rgba(158,47,75,.34), rgba(217,58,98,.34)) !important;
  border: 1px solid rgba(217,58,98,.42) !important;
  color: #ffffff !important;
}
section[data-route="/settings"] .btn-danger:hover{
  background: linear-gradient(180deg, rgba(158,47,75,.48), rgba(217,58,98,.48)) !important;
}

/* Community page: apply same burgundy style to "Supprimer le sujet" */
section[data-route="/community"] .btn-danger{
  background: linear-gradient(180deg, rgba(158,47,75,.34), rgba(217,58,98,.34)) !important;
  border: 1px solid rgba(217,58,98,.42) !important;
  color: #ffffff !important;
}
section[data-route="/community"] .btn-danger:hover{
  background: linear-gradient(180deg, rgba(158,47,75,.48), rgba(217,58,98,.48)) !important;
}

/* Community: compact "Message privé" buttons */
.btn-message{ font-size:12px; padding:6px 10px; border-radius:10px; line-height:1.2 }
.topic .flex-between{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.topic .hstack{ display:flex; align-items:center; gap:8px }

@media (max-width: 600px){
  .btn-message{ flex-shrink:0 }
  .topic .flex-between{ flex-wrap:wrap }
  .topic .hstack{ flex-wrap:wrap }
}

/* Footer links (À propos, Contact, Mentions légales, Confidentialité) in orange and bold */
.site-footer .fs-right .fs-link{ color: var(--orange-strong) !important; font-weight:700; }
.site-footer .fs-right .fs-link:hover{ color: var(--orange-strong) !important; text-decoration: underline; }

/* Blog cards */
.blog-list{list-style:none; padding:0; display:grid; gap:24px;}
.blog-card{padding:0; overflow:hidden;}
.blog-card-link{display:block; text-decoration:none; color:inherit;}
.blog-card-img{display:block; width:100%; height:auto;}
.blog-card-content{padding:16px;}
.blog-card-content h3{margin:0 0 4px; color:var(--blue-strong);}
.blog-card-content p{margin:0; color:var(--muted); font-size:14px;}
@media(min-width:900px){
  .blog-list{display:flex; justify-content:center;}
  .blog-card{max-width:320px;}
}

/* Article styles */
.article-cover{display:block; width:100%; max-width:600px; height:auto; margin:0 auto 32px; border-radius:16px;}
.article-content{gap:32px; margin-bottom:32px;}
.article-content section + section{padding-top:24px; border-top:1px solid var(--border);}
.article-content + .card{margin-top:32px;}
#toc{max-width:600px; margin:0 auto 32px;}
#toc ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; counter-reset:item;}
#toc li{counter-increment:item;}
#toc li::before{content:counter(item) '.'; font-weight:600; margin-right:8px; color:var(--orange-strong);}
#toc a{text-decoration:none; color:var(--blue-strong);}
#toc a:hover{text-decoration:underline;}
/* Loading overlay */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#loading-overlay .loader {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border, #ccc);
  border-top-color: var(--deep-blue, #4e7cd8);
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
  margin-bottom: 1rem;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

/* Beta ticker under hero */
.beta-ticker{
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed */
  background: #000000;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  border-top: 0;
  border-radius: 0; /* coins inférieurs non arrondis */
  height: 28px;
  overflow: hidden;
  margin: 0 0 16px; /* collé en haut */
}
.beta-ticker__track{
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: beta-ticker-marquee 60s linear infinite;
  font-size: 13px;
}
.beta-ticker__content{
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
}
.beta-ticker__text{ color:#ffffff }
.beta-ticker__sep{ color:rgba(255,255,255,.6) }
@keyframes beta-ticker-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media(prefers-reduced-motion: reduce){
  .beta-ticker__track{ animation: none; }
}
.ai-tools-showcase{
  text-align:center;
  padding-top:0;
}
section[data-route="/community"] .topic-thread{
  display:grid;
  gap:18px;
}
section[data-route="/community"] .topic-entry{
  display:grid;
  gap:12px;
}
section[data-route="/community"] .topic-entry::before{
  content:none;
}
section[data-route="/community"] .topic-entry > *{
  position:relative;
  z-index:auto;
}
section[data-route="/community"] .topic-entry__head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
section[data-route="/community"] .topic-entry__avatar{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:16px;
  color:#131924;
  background:linear-gradient(135deg, rgba(255,225,200,.7), rgba(183,211,255,.6));
  box-shadow:0 10px 20px rgba(0,0,0,.38);
}
section[data-route="/community"] .topic-entry--highlight .topic-entry__avatar{
  background:linear-gradient(135deg, rgba(110,163,255,.75), rgba(255,225,200,.55));
  color:#0b1424;
}
section[data-route="/community"] .topic-entry__meta{
  display:grid;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}
section[data-route="/community"] .topic-entry__author{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
section[data-route="/community"] .topic-entry__author-name{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
}
section[data-route="/community"] .topic-entry__meta time{
  font-size:12px;
  letter-spacing:.02em;
  color:rgba(226,233,255,.72);
}
section[data-route="/community"] .topic-entry__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
section[data-route="/community"] .btn-like{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(226,233,255,.24);
  background:rgba(255,255,255,.08);
  color:#e2e9ff;
  font-size:13px;
  font-weight:600;
  line-height:1;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
section[data-route="/community"] .btn-like:not([disabled]):hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(226,233,255,.48);
}
section[data-route="/community"] .btn-like__icon{
  font-size:16px;
  line-height:1;
}
section[data-route="/community"] .btn-like__count{
  min-width:1.5em;
  text-align:center;
}
section[data-route="/community"] .btn-like--active{
  background:rgba(255,221,153,.22);
  border-color:rgba(255,221,153,.6);
  color:#ffdda3;
}
section[data-route="/community"] .btn-like[disabled]{
  opacity:.6;
  cursor:wait;
}
section[data-route="/community"] .topic-entry .timeline-parent-note,
section[data-route="/community"] .topic-entry .timeline-ai-note{
  margin:0;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  line-height:1.55;
  word-break:break-word;
}
section[data-route="/community"] .topic-entry .timeline-parent-note{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#ffffff;
}
section[data-route="/community"] .topic-entry .timeline-parent-note__label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,233,255,.82);
  margin-bottom:4px;
}
section[data-route="/community"] .topic-entry .timeline-parent-note__text{
  font-size:13px;
  color:#f4f7ff;
}
section[data-route="/community"] .topic-entry .timeline-ai-note{
  background:rgba(110,163,255,.16);
  border:1px solid rgba(110,163,255,.32);
  color:#ffffff;
}
section[data-route="/community"] .topic-entry .timeline-ai-note__label{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(202,220,255,.9);
  margin-bottom:4px;
}
section[data-route="/community"] .topic-entry .timeline-ai-note__text{
  font-size:13px;
}
section[data-route="/community"] .topic-entry--origin{
  background:rgba(10,17,32,.72);
  border:1px solid rgba(110,163,255,.32);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 16px 36px rgba(5,10,24,.46);
}
section[data-route="/community"] .topic-entry--origin .topic-entry__head{
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}
section[data-route="/community"] .topic-entry--origin .topic-entry__avatar{
  box-shadow:none;
  background:linear-gradient(135deg, rgba(120,175,255,.9), rgba(255,229,210,.8));
}
section[data-route="/community"] .topic-entry--origin .topic-entry__author-name{
  font-size:16px;
}
section[data-route="/community"] .topic-initial{
  display:grid;
  gap:10px;
  padding:6px 0 0;
}
section[data-route="/community"] .topic-initial__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(110,163,255,.2);
  color:rgba(216,228,255,.95);
}
section[data-route="/community"] .topic-initial__content{
  font-size:15px;
  line-height:1.65;
  color:#f5f7ff;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.1);
}
section[data-route="/community"] .topic-empty{
  margin:0;
  padding:14px 16px;
  border-radius:18px;
  text-align:center;
  font-size:14px;
  color:rgba(226,233,255,.78);
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.2);
}
section[data-route="/community"] .topic-empty--thread{
  justify-self:center;
  max-width:520px;
}