/*
Theme Name: Sovra
Theme URI: https://sovra.ohmycad.com
Description: Child theme de Twenty Twenty-Five pour sovra.ohmycad.com. SEUL fichier CSS custom du site — tout le CSS sur-mesure va ICI, nulle part ailleurs.
Author: Ohmycad
Template: twentytwentyfive
Version: 1.4
Text Domain: sovra
*/

/* ============================================================
   CSS CUSTOM SOVRA — source unique
   Ajouter les surcharges ici. Design/couleurs/typo = Editeur de site > Styles.
   ============================================================ */

/* Chrome pages design (ex-bloc inline landing, dé-dupliqué : keyframes déjà dans design-system/tokens/animations.css) */
#sovra-root summary::-webkit-details-marker { display:none; }
@media (prefers-reduced-motion: reduce){
  #sovra-root *, #sovra-root *::before, #sovra-root *::after { animation:none !important; }
}

/* ---- Article : prose (contenu Gutenberg stylé tokens) ---- */
.sovra-article .prose { max-width:820px; }
.sovra-article .prose p { font-size:16.5px; line-height:1.7; color:var(--sv-text-body); margin:0 0 18px; }
.sovra-article .prose h2 { font-family:var(--sv-font-display); font-weight:700; font-size:26px; line-height:1.2; color:#fff; margin:40px 0 14px; letter-spacing:-0.01em; }
.sovra-article .prose h3 { font-family:var(--sv-font-display); font-weight:700; font-size:20px; color:#fff; margin:28px 0 10px; }
.sovra-article .prose ul, .sovra-article .prose ol { margin:0 0 18px; padding-left:22px; }
.sovra-article .prose li { margin:8px 0; color:var(--sv-text-body); line-height:1.6; }
.sovra-article .prose a { color:var(--sv-cyan); }
.sovra-article .prose strong { color:var(--sv-text-title); }
.sovra-article .prose img { max-width:100%; height:auto; border-radius:var(--sv-radius-card); }
.sovra-article .prose blockquote { border-left:3px solid var(--sv-cyan); margin:32px 0; padding:6px 0 6px 24px; font-family:var(--sv-font-display); font-weight:600; font-size:21px; line-height:1.4; color:var(--sv-text-title); }
/* ---- Pagination blog ---- */
#sovra-root .pagination, #sovra-root .nav-links { display:flex; gap:8px; flex-wrap:wrap; }
#sovra-root .nav-links .page-numbers { font-family:var(--sv-font-mono); font-size:13px; color:var(--sv-text-body); border:1px solid var(--sv-border); border-radius:var(--sv-radius-input); padding:8px 13px; text-decoration:none; }
#sovra-root .nav-links .page-numbers.current { background:var(--sv-cyan); color:var(--sv-surface-ink); border-color:var(--sv-cyan); }

/* ============================================================
   HEADER — nav desktop + menu mobile (burger CSS-only, pas de JS)
   ============================================================ */
#sovra-root .sv-burger,
#sovra-root .sv-nav-mobile { display:none; }
#sovra-root .sv-burger{
  width:42px; height:42px; flex:0 0 auto; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--sv-border); border-radius:var(--sv-radius-input); background:transparent;
}
#sovra-root .sv-burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
#sovra-root .sv-menu-toggle:checked ~ div .sv-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#sovra-root .sv-menu-toggle:checked ~ div .sv-burger span:nth-child(2){ opacity:0; }
#sovra-root .sv-menu-toggle:checked ~ div .sv-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
#sovra-root .sv-nav-mobile{
  flex-direction:column; gap:2px; padding:10px 22px 20px;
  background:rgba(7,11,22,.98); border-top:1px solid var(--sv-border);
}
#sovra-root .sv-nav-mobile a{
  display:block; padding:14px 6px; font-size:16px; color:var(--sv-text-body);
  text-decoration:none; border-bottom:1px solid var(--sv-border-soft);
}
#sovra-root .sv-nav-mobile a.sv-nav-mobile-cta{
  margin-top:14px; text-align:center; border-bottom:0; border-radius:var(--sv-radius-input);
  background:var(--sv-cyan); color:var(--sv-surface-ink); font-weight:var(--sv-weight-bold);
}

/* ============================================================
   RESPONSIVE (les pages design sont en styles inline fixes → overrides !important)
   ============================================================ */
@media (max-width:900px){
  #sovra-root .sv-nav-desktop{ display:none !important; }
  #sovra-root .sv-burger{ display:flex !important; }
  #sovra-root .sv-menu-toggle:checked ~ .sv-nav-mobile{ display:flex !important; }
}

@media (max-width:820px){
  /* grilles inline → 1 colonne qui PEUT rétrécir : minmax(0,1fr) évite le blowout min-content (contenu nowrap qui débordait) */
  #sovra-root [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  /* rangées de boutons inline (hero + CTA) → wrap + boutons pleine largeur, plus de débordement */
  #sovra-root [style*="display:flex; gap:14px"]{ flex-wrap:wrap !important; }
  #sovra-root [style*="display:flex; gap:14px"] > a{ flex:1 1 100% !important; }
  #sovra-root [style*="max-width:1200px"],
  #sovra-root [style*="max-width:1000px"],
  #sovra-root [style*="max-width:820px"],
  #sovra-root [style*="max-width:860px"],
  #sovra-root [style*="max-width:720px"],
  #sovra-root [style*="max-width:var(--sv-content-max)"],
  #sovra-root [style*="max-width:var(--sv-prose-max)"]{ padding-left:22px !important; padding-right:22px !important; }
  #sovra-root h1{ font-size:32px !important; line-height:1.1 !important; }
  #sovra-root h2{ font-size:25px !important; }
  #sovra-root [style*="padding:96px"]{ padding-top:60px !important; padding-bottom:60px !important; }
  #sovra-root input, #sovra-root textarea, #sovra-root select{ max-width:100% !important; }
  #sovra-root .prose{ max-width:100% !important; }
  /* tableaux comparatifs (souverainete / starter-packs) : scroll horizontal au lieu de clip */
  #sovra-root .souv-table-wrap, #sovra-root .sp-table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #sovra-root .souv-table, #sovra-root .sp-table{ min-width:560px; }
  /* images / logos ne débordent jamais */
  #sovra-root img{ max-width:100%; height:auto; }
}
@media (max-width:480px){
  #sovra-root h1{ font-size:27px !important; }
  #sovra-root [style*="padding:70px 40px"],
  #sovra-root [style*="padding:100px 40px"],
  #sovra-root [style*="padding:64px 40px"]{ padding-top:46px !important; padding-bottom:46px !important; }
  #sovra-root header > div{ padding-left:18px !important; padding-right:18px !important; }
}

/* ============================================================
   MEGA-MENU (Offre) — CSS-only, desktop hover
   ============================================================ */
#sovra-root .sv-hasmega{ position:relative; }
#sovra-root .sv-mega-trigger::after{ content:" ▾"; font-size:11px; opacity:.6; }
#sovra-root .sv-mega{ display:none; position:absolute; top:calc(100% + 16px); right:0; width:470px; background:rgba(9,13,24,.98); backdrop-filter:blur(12px); border:1px solid var(--sv-border); border-radius:16px; padding:14px; box-shadow:0 24px 70px rgba(0,0,0,.55); grid-template-columns:1fr 1fr; gap:6px; z-index:60; }
#sovra-root .sv-mega::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
#sovra-root .sv-hasmega:hover .sv-mega{ display:grid; }
#sovra-root .sv-mega-item{ display:block; padding:12px 13px; border-radius:10px; text-decoration:none; }
#sovra-root .sv-mega-item:hover{ background:rgba(53,224,242,.09); }
#sovra-root .sv-mega-item .t{ display:block; font-family:var(--sv-font-display); font-weight:600; font-size:14px; color:#fff; }
#sovra-root .sv-mega-item .d{ display:block; font-size:12px; line-height:1.4; color:var(--sv-text-muted); margin-top:3px; }
#sovra-root .sv-mega-all{ grid-column:1 / -1; text-align:center; padding:11px; margin-top:4px; border-top:1px solid var(--sv-border-soft); color:var(--sv-cyan); font-family:var(--sv-font-mono); font-size:12px; text-decoration:none; }
#sovra-root .sv-nav-mobile a.sv-sub{ padding-left:24px; font-size:14.5px; color:var(--sv-text-muted); }