/* ============================================================
 * File        : index.css
 * Path        : /srv/antigravity/web/css/index.css
 * Version     : v2.0.3
 * Last Edited : 2026-03-14 (Europe/Amsterdam)
 * Author      : Conseiller AI Agency
 *
 * Release Notes:
 *  - v2.0.3 : Icônes "What we deliver" en orange (#f59e0b) via ciblage précis,
 *              zéro impact sur les autres SVG. OnePage compact conservé.
 *  - v2.0.2 : OnePage compact, Open Sans 14px/300, logo 120px (max-height 60px),
 *              header glass, hero violet + halos radiaux, vague magenta,
 *              CTA violet/magenta, cases cards, footer court, RTL, responsive.
 * ============================================================ */

:root{
  /* Palettes */
  --hero-ink:#0B0B2A;
  --hero-overlay:#1A1240;
  --magenta:#E11D79;
  --violet:#7C3AED;

  /* Neutres & UI */
  --ink:#F8FAFC;
  --muted:#CBD5E1;
  --ring:#60A5FA;
  --focus:#2563EB;

  /* Glass */
  --glass-bg:#FFFFFF15;
  --glass-border:#FFFFFF33;
  --glass-blur:16px;

  /* Layout */
  --container:1040px;
  --radius:16px;
  --shadow-lg:0 6px 40px #0008;
  --shadow-md:0 2px 16px #0005;
}

/* Fond global (hero = body) */
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font:14px/1.6 "Open Sans", Arial, sans-serif; /* ≈ 10pt */
  font-weight:300;
  background: var(--hero-ink);
  background-image:
    radial-gradient(60vmax 60vmax at 80% 18%, #E11D7926 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 12% 10%, #7C3AED26 0%, transparent 55%),
    radial-gradient(44vmax 44vmax at 70% 78%, #22D3EE22 0%, transparent 60%),
    linear-gradient(180deg, var(--hero-overlay) 0%, var(--hero-ink) 60%, #090918 100%);
}
a{ color:#A78BFA; text-decoration:none }
a:hover{ text-decoration:underline }
a:focus{ outline:2px solid var(--focus); outline-offset:2px }

/* Conteneur */
.container{ max-width:var(--container); margin:0 auto; padding:0 16px }

/* Header glass (topbar compacte) */
.header-row{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:12px auto 0; padding:10px 12px;
  background:#ffffff10; border:1px solid #ffffff22; border-radius:12px;
  backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px);
}
.logo{
  width:190px; height:auto; max-height:100px; object-fit:contain;
  /*border-radius:10px; background:#ffffff14; box-shadow:0 6px 18px #0006; */
}
.header-title{ margin:0; font-size:22px; font-weight:600; letter-spacing:.2px; text-align: center; text-wrap: balance}

/* Langues + theme */
.lang-switch{ display:flex; gap:6px }
.lang-switch button, .toggle-theme{
  border:1px solid #ffffff2a; background:#ffffff14; color:#fff;
  padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:600;
}
.lang-switch button.active{ background:#ffffff24; border-color:#ffffff66 }
.toggle-theme:focus, .lang-switch button:focus{ outline:2px solid var(--focus); outline-offset:2px }

/* Hero bloc + vague magenta */
.hero{ position:relative; isolation:isolate; margin:22px 0 12px }
.hero::before{
  content:""; position:absolute; right:8%; top:40px; width:420px; height:420px;
  background: radial-gradient(closest-side, var(--magenta) 0%, #E11D79AA 30%, #E11D7944 55%, transparent 70%);
  filter: blur(22px) saturate(120%); opacity:.65; transform: rotate(8deg);
  z-index:-1;
}
.subtitle{ color:#E5E7EB; margin:8px 0 14px }

/* CTA */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid #ffffff22;
  font-weight:700; color:#fff; cursor:pointer; transition:.15s; box-shadow: var(--shadow-md);
}
.btn:hover{ transform:translateY(-1px) }
.btn.cta{ background:#7C3AED; border-color:#7C3AED }
.btn.cta-secondary{ background:#ffffff1a }

/* Sections compactes */
.section{ margin:26px 0 }
.section h2{ margin:0 0 8px; font-size:20px; font-weight:600 }
ul{ margin:0; padding-left:20px } 
ul li{ margin:4px 0; display:list-item }

/* Icônes minimalistes */
.icon{ width:18px; height:18px; margin-right:8px; vertical-align:-3px; fill:currentColor }

/* >>> Couleur ORANGE des icônes dans "What we deliver" seulement */
.section ul li svg.icon{
  color:#f59e0b;      /* définit currentColor pour fill */
  stroke:#f59e0b;     /* chemins "stroke" */
  fill:#f59e0b;       /* chemins "fill" */
}
/* (facultatif) un hover discret sur les items */
.section ul li:hover svg.icon{ filter:brightness(1.05) }

/* Cases (3 cartes) */
.cases-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.case-card{
  background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:14px;
  backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-lg); padding:14px; color:#fff
}
.case-card h3{ margin:6px 0 6px; font-size:16px; font-weight:600 }
.case-card p{ margin:0; color:#E5E7EB }

/* Footer pro court */
footer{
  border-top:1px solid #ffffff1b; color:#E5E7EB;
  margin-top:28px; padding:14px 0 28px; font-size:13px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* Modales */
.modal-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:#0008; z-index:9998; padding:20px;
}
.modal-overlay.active{ display:flex }
.modal-card{
  width:100%; max-width:620px; background:#0E1327cc; color:#fff;
  border:1px solid #ffffff22; border-radius:14px; box-shadow:var(--shadow-lg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding:18px;
}
.modal-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px }
.modal-card input, .modal-card textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #FFFFFF33;
  background:#ffffff12; color:#fff; outline:none; margin-top:8px;
}
.modal-card input:focus,.modal-card textarea:focus{
  border-color:#FFFFFF80; box-shadow:0 0 0 3px #60A5FA55; background:#ffffff1F;
}

/* Responsive */
@media (max-width: 720px){
  .header-title{ font-size:20px }
  .logo{ width:110px; max-height:50px }
}

/* Light mode (overrides) */
html[data-theme="light"] body{
  color:#0F172A;
  background:#F8FAFC;
  background-image:
    radial-gradient(60vmax 60vmax at 80% 18%, #F0ABFC33 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 12% 10%, #DDD6FE33 0%, transparent 55%),
    radial-gradient(44vmax 44vmax at 70% 78%, #BAE6FD33 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF2FF 100%);
}
html[data-theme="light"] .header-row{ background:#ffffffd9; border-color:#e5e7eb; color:#0F172A }
html[data-theme="light"] .case-card, html[data-theme="light"] .modal-card{
  background:#ffffffcc; border-color:#e5e7eb; color:#0F172A
}
html[data-theme="light"] .btn.cta-secondary{ background:#f3f4f7 }
html[data-theme="light"] .subtitle, 
html[data-theme="light"] .case-card p, 
html[data-theme="light"] footer{ color:#334155 }

html[data-theme="dark"] .subtitle {
  color: #ffffff !important;
}

/* RTL corrections basiques (le JS bascule dir="rtl") */
[dir="rtl"] .icon{ margin-right:0; margin-left:8px }


/* Réduit la largeur interne du formulaire Audit */
.modal-card .form-wrapper {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.header-row .lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.header-row .lang-label {
  margin: 0;
  color: #E5E7EB;
  font-size: 13px;
  line-height: 1;
}

.header-row select#lang {
  background: #ffffff12;
  color: #ffffff;
  border: 1px solid #FFFFFF33;
  border-radius: 10px;
  height: 34px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.header-row select#lang:focus {
  border-color: #A5B4FC !important;
  box-shadow: 0 0 0 3px #A5B4FC33 !important;
  background: #292054 !important;
}

.header-row .lang::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #fff;
  opacity: .9;
  font-size: 12px;
}

/* RTL support */
html[dir="rtl"] .header-row .lang::after { left: 10px; right: auto; }
html[dir="rtl"] .header-row select#lang { padding-left: 28px; padding-right: 10px; }