/* ModOps — feuille de polish transverse (v2026-08) */

/* Bascule nav selon session : .nav-anon-only visible si non connecté, .nav-logged-only si connecté */
html:not(.is-logged) .nav-logged-only { display: none !important; }
html.is-logged       .nav-anon-only   { display: none !important; }

/* ---- Typographie : densification globale (~ zoom 80% du précédent) ---- */
html{ font-size: 15px; }
body{ font-size: 15px; line-height: 1.55; }
h1{ font-size: clamp(24px, 3.6vw, 40px); line-height: 1.15; }
h2{ font-size: clamp(19px, 2.6vw, 26px); line-height: 1.2; }
h3{ font-size: clamp(15px, 2vw, 18px); line-height: 1.3; }
.lead{ font-size: clamp(14px, 1.8vw, 16px); }
.hero h1{ font-size: clamp(26px, 3.8vw, 42px); }
.section{ padding: 32px 0; }

/* Puces à l'intérieur des cartes : éviter que le marker déborde du cadre */
.card ul, .card ol{ padding-left: 22px; margin: 8px 0; }
.card ul > li, .card ol > li{ padding-left: 4px; }

/* Grain texture premium en fond de page */
body::after{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main{ position: relative; z-index: 1; }

/* Baseline (eyebrow) : cartouche compact, angles modernes */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600; color: var(--accent); letter-spacing: .2px;
  margin: 0 0 12px; padding: 6px 12px;
  border: 1px solid rgba(28,197,190,.35); border-radius: 8px;
  background: linear-gradient(180deg, rgba(28,197,190,.10), rgba(28,197,190,.04));
  backdrop-filter: blur(6px);
}
.eyebrow::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(28,197,190,.2);
  animation: mp-pulse 2.4s ease-in-out infinite;
}
@keyframes mp-pulse{ 0%,100%{ opacity:.55; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.1);} }

/* Aurore + grille de points — applicable au hero ET à toute section « intro » */
.hero, .section-hero{ position: relative; overflow: hidden; }
.hero::before, .section-hero::before{
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 560px;
  background:
    radial-gradient(650px 320px at 12% 18%, rgba(28,197,190,.26), transparent 60%),
    radial-gradient(520px 280px at 88% 28%, rgba(140,90,255,.22), transparent 60%),
    radial-gradient(420px 220px at 50% 92%, rgba(28,197,190,.10), transparent 60%);
  filter: blur(2px); pointer-events: none; z-index: 0;
}
.hero::after, .section-hero::after{
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  pointer-events: none; z-index: 0;
}
.hero .hero-grid, .hero .container, .section-hero .container{ position: relative; z-index: 1; }
/* Variante « intro plus courte » pour les pages intérieures */
.section-hero.compact::before{ height: 340px; }

/* Typo hero */
.hero h1{ letter-spacing: -.02em; font-weight: 800; }
.hero h1 .accent-word{ background: linear-gradient(120deg, var(--accent), #22e0d8 45%, #8c5aff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Boutons — halo coloré, focus animation */
.cta .btn-primary, .btn-primary{
  box-shadow: 0 10px 30px rgba(28,197,190,.30), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.cta .btn-primary:hover, .btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 42px rgba(28,197,190,.45); }
.cta .btn-ghost, .btn-ghost{ border: 1px solid rgba(255,255,255,.15); transition: border-color .15s ease, background .15s ease; }
.cta .btn-ghost:hover, .btn-ghost:hover{ border-color: rgba(28,197,190,.45); background: rgba(28,197,190,.06); }

/* Trait accent sous les H2 de section */
.section-title{ position: relative; padding-bottom: 10px; margin-bottom: 22px; letter-spacing: -.01em; }
.section-title::after{ content: ""; display: block; width: 56px; height: 3px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #8c5aff); }

/* Cards : hover glow tinté + icônes — appliqué à TOUS les .card */
.card{ position: relative; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card:hover{ transform: translateY(-3px); border-color: rgba(28,197,190,.5); box-shadow: 0 20px 46px rgba(28,197,190,.14), 0 0 0 1px rgba(28,197,190,.18) inset; }
/* Opt-out : .card.plain ne hover pas (pour un card statique) */
.card.plain:hover{ transform: none; border-color: var(--border); box-shadow: var(--shadow); }
/* Cards inline dans .legal (pages légales) ne hoverent pas — trop de contenu texte */
.legal .card:hover{ transform: none; border-color: var(--border); }
.card .icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(28,197,190,.22), rgba(140,90,255,.15));
  border: 1px solid rgba(28,197,190,.28); color: var(--accent);
  transition: transform .25s ease;
}
.card .icon svg{ width: 22px; height: 22px; }
.card:hover .icon{ transform: rotate(-6deg) scale(1.06); }
.card h3{ letter-spacing: -.01em; }

/* Badges numérotés (steps) */
.steps-grid{ counter-reset: stepnum; }
.steps-grid .card{ counter-increment: stepnum; position: relative; padding-left: 66px; }
.steps-grid .card::before{
  content: counter(stepnum);
  position: absolute; left: 18px; top: 18px;
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #8c5aff);
  color: #072026; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(28,197,190,.4);
}
.steps-grid .card h3{ margin-top: 0; }

/* Strip use-cases */
.use-strip{ padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(0,0,0,.15); position: relative; z-index: 1; }
.use-strip .row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: 14px; }
.use-strip .row strong{ color: var(--text); letter-spacing: .3px; text-transform: uppercase; font-size: 12px; margin-right: 6px; }
.use-strip .pill{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: rgba(28,197,190,.06); border: 1px solid rgba(28,197,190,.18); color: var(--text); font-weight: 500; font-size: 13px; }
.use-strip .pill svg{ width: 14px; height: 14px; color: var(--accent); }

/* Bento grid */
.bento{ display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .bento{ grid-template-columns: repeat(3, 1fr); } }
.bento .card{ padding: 20px; position: relative; overflow: hidden; }
@media (min-width: 720px){
  .bento .card.wide{ grid-column: span 2; }
  .bento .card.tall{ grid-row: span 2; }
}
.bento .card::after{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(28,197,190,.35), rgba(140,90,255,.15) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.bento .card:hover::after{ opacity: 1; }
.bento .card.hero-card{ background: linear-gradient(135deg, rgba(28,197,190,.14), rgba(140,90,255,.10)); border-color: rgba(28,197,190,.35); }
.bento .card.hero-card .icon{ background: linear-gradient(135deg, rgba(28,197,190,.4), rgba(140,90,255,.28)); border-color: rgba(28,197,190,.5); color: #fff; }
.bento .card.hero-card h3{ font-size: clamp(20px, 2.4vw, 26px); }

/* Comparaison Avant / Avec */
.compare{ display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 900px){ .compare{ grid-template-columns: 1fr 1fr; align-items: stretch; } }
.compare .col{ padding: 22px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); }
.compare .col.avant{ background: linear-gradient(180deg, rgba(255,95,87,.06), rgba(0,0,0,.15)); border-color: rgba(255,95,87,.22); }
.compare .col.avec{ background: linear-gradient(180deg, rgba(28,197,190,.10), rgba(140,90,255,.06)); border-color: rgba(28,197,190,.35); box-shadow: 0 20px 60px rgba(28,197,190,.14); }
.compare h3{ display: flex; align-items: center; gap: 10px; margin-top: 0; }
.compare h3 .tag{ font-size: 11px; padding: 4px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.compare .avant h3 .tag{ background: rgba(255,95,87,.16); color: #ff8f88; border: 1px solid rgba(255,95,87,.35); }
.compare .avec h3 .tag{ background: rgba(28,197,190,.16); color: var(--accent); border: 1px solid rgba(28,197,190,.4); }
.compare ul{ list-style: none; padding: 0; margin: 0; }
.compare li{ padding: 10px 0; border-top: 1px dashed rgba(255,255,255,.08); display: flex; align-items: flex-start; gap: 10px; }
.compare li:first-child{ border-top: none; }
.compare .avant li::before{ content: "✕"; color: #ff8f88; font-weight: 700; }
.compare .avec li::before{ content: "✓"; color: var(--accent); font-weight: 700; }

/* Footer : logo lisible */
.site-footer .footer-logo{ width: 100px; height: auto; opacity: 1; }
.site-footer .footer-brand p{ color: var(--muted); font-size: 12px; margin-top: 8px; }
.site-footer .footer-links a{ font-size: 13px; }

/* CTA band final */
.cta-band{ background: linear-gradient(135deg, rgba(28,197,190,.14), rgba(140,90,255,.08)); border: 1px solid rgba(28,197,190,.32); box-shadow: 0 20px 60px rgba(28,197,190,.12); }

/* Steps <ol class="steps"> : bloc + hover accent + numéros stylisés */
ol.steps{ list-style: none; padding: 0; margin: 0; counter-reset: olstep; display: grid; gap: 14px; }
ol.steps > li.step{
  counter-increment: olstep; position: relative;
  padding: 20px 20px 20px 76px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
ol.steps > li.step::before{
  content: counter(olstep);
  position: absolute; left: 18px; top: 18px;
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #8c5aff);
  color: #072026; font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(28,197,190,.4);
}
ol.steps > li.step:hover{ transform: translateY(-2px); border-color: rgba(28,197,190,.45); box-shadow: 0 18px 42px rgba(28,197,190,.14); }
ol.steps > li.step h3{ margin-top: 0; }

/* Plans (tarifs) : bordure gradient permanente sur .featured, hover soutenu partout */
.plan{ position: relative; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.plan:hover{ transform: translateY(-4px); box-shadow: 0 24px 56px rgba(28,197,190,.18); border-color: rgba(28,197,190,.5); }
.plan.featured::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent), #8c5aff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* FAQ cards : petite mise en évidence au survol */
.faq .card{ transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.faq .card:hover{ transform: translateY(-2px); border-color: rgba(28,197,190,.35); box-shadow: 0 12px 28px rgba(28,197,190,.10); }

/* Formulaire de contact : focus accent */
.contact-form input, .contact-form textarea{ transition: border-color .15s ease, box-shadow .15s ease; }
.contact-form input:focus, .contact-form textarea:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,197,190,.18); }
.contact-form .field label{ font-size: 13px; color: var(--muted); font-weight: 600; }

/* Card téléchargement mise en avant */
.download-hero{ padding: 24px; border-radius: 18px; background: linear-gradient(135deg, rgba(28,197,190,.12), rgba(140,90,255,.08)); border: 1px solid rgba(28,197,190,.35); box-shadow: 0 24px 60px rgba(28,197,190,.14); }
.download-hero h3{ margin-top: 0; }

/* Reveal / stagger */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity: 1; transform: none; }
.stagger > *{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.stagger.visible > *{ opacity: 1; transform: none; }
.stagger.visible > *:nth-child(1){ transition-delay: .05s; }
.stagger.visible > *:nth-child(2){ transition-delay: .12s; }
.stagger.visible > *:nth-child(3){ transition-delay: .19s; }
.stagger.visible > *:nth-child(4){ transition-delay: .26s; }
.stagger.visible > *:nth-child(5){ transition-delay: .33s; }
.stagger.visible > *:nth-child(6){ transition-delay: .40s; }
.stagger.visible > *:nth-child(7){ transition-delay: .47s; }

/* --- Hero mockup (utilisé uniquement sur l'accueil) --- */
.hero-mockup{
  position: relative; max-width: 480px; margin: 0 auto;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: linear-gradient(180deg, rgba(17,36,51,.9), rgba(11,22,32,.75));
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(28,197,190,.10) inset;
  overflow: hidden;
}
/* Titlebar style Windows 11 (contrôles à droite) */
.hero-mockup .titlebar{ display: flex; align-items: center; padding: 0; height: 34px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.28); }
.hero-mockup .titlebar .app-icon{ margin-left: 10px; width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), #8c5aff); display: inline-block; }
.hero-mockup .titlebar .label{ margin-left: 8px; font-size: 12px; color: var(--muted); }
.hero-mockup .titlebar .win-ctrls{ margin-left: auto; display: flex; height: 100%; }
.hero-mockup .titlebar .win-btn{ width: 44px; height: 100%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; line-height: 1; }
.hero-mockup .titlebar .win-btn svg{ width: 10px; height: 10px; }
.hero-mockup .titlebar .win-btn.close{ color: #cbd5e1; }
.hero-mockup .titlebar .win-btn.close:hover{ background: #e81123; color: #fff; }
.hero-mockup .body{ padding: 16px; display: grid; gap: 10px; }
.hero-mockup .rec{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(28,197,190,.16), rgba(140,90,255,.08));
  border: 1px solid rgba(28,197,190,.28);
  font-size: 13px; color: var(--text);
}
.hero-mockup .rec .dot{ width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 0 4px rgba(255,95,87,.2); animation: mp-pulse 1.6s ease-in-out infinite; }
.hero-mockup .rec .wave{ margin-left: auto; display: inline-flex; align-items: end; gap: 3px; height: 18px; }
.hero-mockup .rec .wave i{ display: inline-block; width: 3px; background: linear-gradient(180deg, var(--accent), #8c5aff); border-radius: 2px; animation: mp-wave 1.2s ease-in-out infinite; }
.hero-mockup .rec .wave i:nth-child(2){ animation-delay: .15s; }
.hero-mockup .rec .wave i:nth-child(3){ animation-delay: .3s; }
.hero-mockup .rec .wave i:nth-child(4){ animation-delay: .45s; }
.hero-mockup .rec .wave i:nth-child(5){ animation-delay: .6s; }
@keyframes mp-wave{ 0%,100%{ height: 4px;} 50%{ height: 18px;} }
.hero-mockup .arrow{ text-align: center; color: var(--muted); font-size: 16px; opacity: .7; }
.hero-mockup .doc{ padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.hero-mockup .doc .doc-title{ font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.hero-mockup .doc .step{ display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 10px 0; }
.hero-mockup .doc .step .n{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #8c5aff); color: #072026; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.hero-mockup .doc .step .content .txt{ font-size: 12px; color: var(--text); margin-bottom: 6px; }

/* Captures simulées — mini interfaces */
.hero-mockup .cap{
  background: linear-gradient(180deg, #0d1d2a, #0a1621);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 8px; font-size: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  position: relative;
}
.hero-mockup .cap .arrow-hi{ position: absolute; color: var(--accent); font-size: 14px; font-weight: 700; animation: mp-arrow 1.4s ease-in-out infinite; }
@keyframes mp-arrow{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} }
/* Menu horizontal (step 1) */
.hero-mockup .cap.menu{ display: flex; gap: 4px; align-items: center; }
.hero-mockup .cap.menu .tab{ padding: 4px 8px; border-radius: 5px; color: var(--muted); }
.hero-mockup .cap.menu .tab.active{ background: rgba(28,197,190,.16); color: var(--accent); border: 1px solid rgba(28,197,190,.4); font-weight: 700; box-shadow: 0 0 0 2px rgba(28,197,190,.2); }
.hero-mockup .cap.menu .arrow-hi{ left: 20px; top: -14px; }
/* Bouton mis en évidence (step 2) */
.hero-mockup .cap.toolbar{ display: flex; align-items: center; gap: 6px; }
.hero-mockup .cap.toolbar .search{ flex: 1; height: 18px; border-radius: 5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.hero-mockup .cap.toolbar .btn-hi{ background: linear-gradient(135deg, var(--accent), #8c5aff); color: #072026; font-weight: 700; padding: 5px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(28,197,190,.4); }
.hero-mockup .cap.toolbar .arrow-hi{ right: 20px; top: -14px; }
/* Liste avec ligne sélectionnée (step 3) */
.hero-mockup .cap.list{ display: grid; gap: 4px; }
.hero-mockup .cap.list .row{ display: flex; justify-content: space-between; padding: 4px 6px; border-radius: 4px; color: var(--muted); }
.hero-mockup .cap.list .row.selected{ background: rgba(28,197,190,.12); color: var(--accent); border: 1px solid rgba(28,197,190,.3); font-weight: 600; }
.hero-mockup .cap.list .arrow-hi{ left: -14px; top: 22px; }

/* Responsive : mockup passe en tête sur mobile */
@media (max-width: 899px){
  .hero-grid .hero-art{ order: -1; margin-bottom: 8px; }
  .hero-grid .hero-content{ order: 0; }
  .hero-mockup{ max-width: 400px; }
  .steps-grid .card{ padding-left: 60px; }
}