/* SIA Site — le comportement et les finitions vivent ici ; les couleurs viennent des variables globales Divi (--sia-*). */
html { scroll-behavior: smooth; }
html, body, body #page-container, #et-main-area, #main-content, .et-l--body, .et-l--header, .et-l--footer { background: var(--sia-fond) !important; }
body { color: var(--sia-muted); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--sia-violet); outline-offset: 3px; }
.et_pb_text a { color: var(--sia-violet-clair); text-underline-offset: 3px; }

/* Typographie de contenu */
.et_pb_text .sia-eyebrow { font-family: var(--sia-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sia-violet-clair); margin: 0 0 1rem; }
.et_pb_text .sia-lead { font-size: 1.2rem; line-height: 1.6; color: var(--sia-texte); }
.et_pb_text code { font-family: var(--sia-mono); font-size: .86em; color: var(--sia-violet-clair); background: color-mix(in srgb, var(--sia-violet) 12%, transparent); border: 1px solid var(--sia-ligne); padding: .08em .42em; border-radius: 6px; }
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 { padding-bottom: 0; }
.et_pb_text h1 { margin: 0 0 1.2rem; }
.et_pb_text h2 { margin: 0 0 .5rem; }
.et_pb_text h3 { margin: .5rem 0 .4rem; }
.et_pb_text p:last-child { padding-bottom: 0; }
.sia-num { font-family: var(--sia-mono); font-size: .85rem; letter-spacing: .12em; color: var(--sia-violet); }

/* Bandeau d'accueil */
.sia-hero { position: relative; overflow: hidden; }
.sia-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 85% 0%, color-mix(in srgb, var(--sia-violet) 30%, transparent), transparent 70%); }
.sia-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--sia-ligne) 1px, transparent 1px), linear-gradient(90deg, var(--sia-ligne) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 70% 20%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 20%, #000, transparent 75%); }
.sia-hero > * { position: relative; z-index: 1; }

/* Cartes */
.et_pb_row > .et_pb_column.sia-carte { align-self: stretch; }
.et_pb_column.sia-carte { transition: border-color .2s ease, transform .2s ease; }
.et_pb_column.sia-carte:hover { border-color: var(--sia-violet) !important; transform: translateY(-2px); }
.sia-carte .sia-icone svg { width: 30px; height: 30px; stroke: var(--sia-violet); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sia-carte .et_pb_code { margin-bottom: .6rem; }

/* Pastilles de statut */
.sia-pill { display: inline-block; font-family: var(--sia-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 999px; border: 1px solid var(--sia-violet); color: var(--sia-violet-clair); vertical-align: middle; line-height: 1.4; }
.sia-pill--ok { background: var(--sia-violet); color: var(--sia-fond); font-weight: 600; }
.sia-pill--plan { border-style: dashed; border-color: var(--sia-muted); color: var(--sia-muted); }

/* Boutons */
.et_pb_button.sia-btn { transition: background-color .2s ease, transform .2s ease, border-color .2s ease; }
.et_pb_button.sia-btn:hover { background-color: var(--sia-violet-clair) !important; border-color: var(--sia-violet-clair) !important; color: var(--sia-fond) !important; }
.et_pb_button.sia-btn::after { display: none !important; }
.et_pb_button_module_wrapper { margin-top: 1.4rem; }
.sia-hero .et_pb_column:has(.et_pb_button_module_wrapper) { flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.sia-hero .et_pb_column:has(.et_pb_button_module_wrapper) > .et_pb_text { flex: 0 0 100%; }
.sia-btns .et_pb_button_module_wrapper { display: inline-block; margin-right: .8rem; }

/* Schémas */
.sia-diagram { overflow-x: auto; border: 1px solid var(--sia-ligne); border-radius: 16px; background: var(--sia-fond-alt); padding: 8px; }
.sia-diagram svg { display: block; width: 100%; height: auto; min-width: 780px; }
.sia-diagram .s-grille { stroke: var(--sia-ligne); stroke-width: .5; opacity: .45; fill: none; }
.sia-diagram .s-box { fill: var(--sia-surface); stroke: var(--sia-ligne); stroke-width: 1.5; }
.sia-diagram .s-box-acc { fill: var(--sia-surface); stroke: var(--sia-violet); stroke-width: 1.6; }
.sia-diagram .s-box-soft { fill: color-mix(in srgb, var(--sia-violet) 10%, var(--sia-surface)); stroke: var(--sia-violet); stroke-width: 1.6; }
.sia-diagram .s-box-dash { fill: none; stroke: var(--sia-muted); stroke-width: 1.4; stroke-dasharray: 6 6; }
.sia-diagram .s-zone { fill: color-mix(in srgb, var(--sia-violet) 5%, transparent); stroke: var(--sia-violet); stroke-width: 1.2; stroke-dasharray: 3 7; }
.sia-diagram .s-line { stroke: var(--sia-ligne); stroke-width: 1.5; fill: none; }
.sia-diagram .s-acc { stroke: var(--sia-violet); stroke-width: 1.8; fill: none; }
.sia-diagram .s-accdash { stroke: var(--sia-violet); stroke-width: 1.6; stroke-dasharray: 7 6; fill: none; }
.sia-diagram .s-mut { stroke: var(--sia-muted); stroke-width: 1.5; fill: none; }
.sia-diagram .s-fillacc { fill: var(--sia-violet); }
.sia-diagram .s-icon { stroke: var(--sia-violet-clair); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sia-diagram .s-t { fill: var(--sia-texte); font: 600 16px Inter, system-ui, sans-serif; }
.sia-diagram .s-tb { fill: var(--sia-texte); font: 600 20px 'Space Grotesk', Inter, system-ui, sans-serif; }
.sia-diagram .s-tm { fill: var(--sia-muted); font: 400 14px Inter, system-ui, sans-serif; }
.sia-diagram .s-ta { fill: var(--sia-violet-clair); font: 500 11.5px var(--sia-mono); letter-spacing: .08em; text-transform: uppercase; }
.sia-diagram .s-tv { fill: var(--sia-violet-clair); font: 500 13px var(--sia-mono); }
.sia-diagram .s-tag { fill: color-mix(in srgb, var(--sia-violet) 14%, var(--sia-fond)); stroke: var(--sia-violet); stroke-width: 1; }
.sia-diagram .s-pastille { fill: var(--sia-violet); }
.sia-diagram .s-pnum { fill: var(--sia-fond); font: 700 14px var(--sia-mono); }
.sia-diagram a:hover .s-box, .sia-diagram a:hover .s-box-soft { stroke: var(--sia-violet-clair); }

/* En-tête et pied de page */
.et-l--header { position: sticky; top: 0; z-index: 60; }
.sia-header { background: color-mix(in srgb, var(--sia-fond-alt) 88%, transparent) !important; border-bottom: 1px solid var(--sia-ligne); backdrop-filter: blur(10px); }
.sia-header .et_pb_row { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap !important; }
.sia-header .et_pb_column { flex: 0 1 auto !important; width: auto !important; max-width: none !important; }
.et_pb_text .sia-logo { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 1.15rem; letter-spacing: -.3px; color: var(--sia-texte); margin: 0; }
.et_pb_text .sia-logo a { color: var(--sia-texte); text-decoration: none; }
.et_pb_text .sia-logo span { color: var(--sia-violet); }
.sia-menu.et_pb_menu, .sia-menu .et_pb_menu_inner_container, .sia-menu .et_pb_menu__wrap { background: transparent !important; }
.sia-menu .et_pb_menu__wrap { justify-content: flex-end; }
.sia-menu .et-menu-nav > ul { flex-wrap: nowrap; }
.sia-menu .et-menu > li { margin: 0 !important; padding: 0 !important; }
.sia-menu .et-menu > li > a { color: var(--sia-muted) !important; font-size: .92rem; padding: .7rem .8rem !important; white-space: nowrap; transition: color .15s ease; }
.sia-menu .et-menu > li > a:hover, .sia-menu .et-menu > li > a[aria-current] { color: var(--sia-texte) !important; }
.sia-menu .et-menu > li > a[aria-current] { box-shadow: inset 0 -2px 0 var(--sia-violet); }
.sia-menu .mobile_menu_bar::before { color: var(--sia-violet-clair) !important; }
.sia-menu .et_mobile_menu { background: var(--sia-surface) !important; border-top: 2px solid var(--sia-violet) !important; width: max-content !important; min-width: 240px; max-width: 92vw; right: 0 !important; left: auto !important; }
.sia-menu .et_mobile_menu li a { white-space: nowrap; padding: 14px 20px !important; }
.sia-menu .et_mobile_menu li a { color: var(--sia-texte) !important; border-bottom: 1px solid var(--sia-ligne) !important; background: transparent !important; }
.sia-footer { background: var(--sia-fond-alt) !important; border-top: 1px solid var(--sia-ligne); }
.sia-footer .et_pb_text, .sia-footer .et_pb_text p { font-size: .9rem; }

/* Formulaire */
.et_pb_contact_form input, .et_pb_contact_form textarea { background: var(--sia-surface) !important; border: 1px solid var(--sia-ligne) !important; color: var(--sia-texte) !important; border-radius: 10px !important; padding: 14px 16px !important; }
.et_pb_contact_form input:focus, .et_pb_contact_form textarea:focus { border-color: var(--sia-violet) !important; }
.et_pb_contact_form .et_pb_contact_captcha_question, .et_pb_contact_form p { color: var(--sia-muted); }
.et_pb_contact_form .et_pb_contact_submit { background: var(--sia-violet) !important; color: var(--sia-fond) !important; border: 0 !important; border-radius: 10px !important; font-weight: 600; padding: 14px 26px !important; }
.et_pb_contact_form ::placeholder { color: var(--sia-muted); opacity: .8; }

@media (max-width: 980px) { .sia-hero::after { background-size: 40px 40px; }
  .sia-diagram::after { content: "← faites glisser le schéma →"; display: block; text-align: center; font-family: var(--sia-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sia-muted); padding: 10px 0 4px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .et_pb_column.sia-carte, .et_pb_button.sia-btn { transition: none; } .et_pb_column.sia-carte:hover { transform: none; } }
