/* ═══════════════════════════════════════════════════════════
   OIKODOMEO — site du groupe. Univers du logo : bleu nuit profond,
   ruban d'or, arcs de lumière dans les angles, ligne d'horizon.
   Chargé après themes.css et immersif.css (moteur).
   ═══════════════════════════════════════════════════════════ */

:root {
  --nuit-950: #03050f;
  --nuit-900: #050816;
  --nuit-800: #0a1028;
  --nuit-700: #111a3d;
  --or-clair: #F6DDA4;
  --or: #E2B66B;
  --or-profond: #B9853F;
  --ivoire: #EEE8DC;
  --brume: #A3A9C2;
  --filet: rgba(226, 182, 107, .18);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

[data-theme="groupe"] {
  --bg: var(--nuit-900);
  --surface: var(--nuit-800);
  --surface-solid: var(--nuit-800);
  --ink: var(--ivoire);
  --ink-2: var(--brume);
  --line: var(--filet);
  --accent: var(--or);
  --accent-ink: var(--nuit-900);
  --accent-2: var(--or);
  --spectrum: linear-gradient(180deg, var(--or-clair), var(--or) 50%, var(--or-profond));
  --fill: var(--or);
  --btn-shadow: none;
  --glass-bg: rgba(10, 16, 40, .72);
  --glass-border: var(--filet);
  --glass-blur: 16px;
  --glass-highlight: inset 0 1px 0 rgba(246, 221, 164, .08);
  --field-a: #000; --field-b: #000; --field-c: #000;
  --field-strength: 0;
  --grain: 0;
  --font-display: var(--serif);
  --font-text: var(--sans);
  --font-mono: var(--sans);
  --display-weight: 500;
  --display-wdth: 100%;
  --display-tracking: 0;
  --display-style: normal;
  --display-case: none;
  --radius: 16px;
  color-scheme: dark;
}

/* Fond : nuit profonde, une lueur bleue en haut */
html, body { background: var(--nuit-900); }
body {
  font-size: 17px; line-height: 1.6;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--nuit-700) 0%, transparent 70%),
    linear-gradient(180deg, var(--nuit-900), var(--nuit-950));
  background-attachment: fixed;
}
em, i { font-style: normal; }
:root { --gutter: clamp(20px, 6vw, 96px); }

/* Titres : capitale à empattements, l'or en relief sur le mot mis en avant */
h1, h2, h3, .q { font-family: var(--serif); font-weight: 500; letter-spacing: 0; }
h3 { font-weight: 600; }
:is(.q, h1, h2, .ink-text, .fort-text) em, .ink-text mark {
  background: linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-profond));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ink-text { font-family: var(--serif); font-weight: 500; letter-spacing: 0; font-size: clamp(30px, 3.6vw + 10px, 68px); line-height: 1.15; }

/* Sur-titre : petites capitales espacées, en or */
.kicker {
  display: block; width: auto; padding: 0; border: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--or);
}
.kicker::before { display: none; }

/* Boutons : l'or poli pour l'action, le contour pour le reste */
.btn {
  border-radius: 999px; padding: 14px 24px; box-shadow: 0 10px 30px -12px rgba(226, 182, 107, .55);
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 60%, var(--or-profond)); color: var(--nuit-900);
  border: 0;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn.secondaire { background: transparent; color: var(--ivoire); border: 1px solid rgba(226, 182, 107, .45); box-shadow: none; }
.btn.secondaire:hover { border-color: var(--or); filter: none; }
.btn svg, .lien svg { width: 18px; height: 18px; flex: none; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* En-tête : verre bleu nuit, le O d'or et la signature */
.im-header { border-radius: 999px; padding: 6px 6px 6px 16px; gap: 4px; font-family: var(--sans); font-size: 14px; }
.im-header a { color: var(--brume); border-radius: 999px; }
.im-header a:hover { color: var(--ivoire); background: rgba(226, 182, 107, .08); }
.im-header .im-home { display: flex; align-items: center; gap: 10px; color: var(--ivoire); padding: 6px 10px 6px 0; }
.im-header .im-home:hover { background: none; }
.im-header .im-home img { width: 22px; height: auto; }
.im-header .im-home span { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; }
.im-header .btn { padding: 8px 16px; font-size: 14px; box-shadow: none; color: var(--nuit-900); }

/* ═══════════ Ouverture : le moment de une, centré ═══════════ */
.une {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  padding: 120px var(--gutter) 72px;
}
.une-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; max-width: 920px; }
.halo { position: absolute; z-index: 0; left: 50%; top: 40%; width: min(90vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(226, 182, 107, .26), rgba(226, 182, 107, .07) 45%, transparent 70%); pointer-events: none; }
.logo-o { width: clamp(150px, 24vw, 300px); height: auto; }   /* pas de filter : son rendu découpe un rectangle sombre */
.horizon { width: min(80vw, 760px); height: 1px; margin-top: -6px;
  background: linear-gradient(90deg, transparent, rgba(246, 221, 164, .95) 50%, transparent);
  box-shadow: 0 0 22px 2px rgba(255, 190, 100, .45); }
.signature {
  font-family: var(--serif); font-weight: 500; text-transform: uppercase;
  font-size: clamp(34px, 7vw, 92px); letter-spacing: .2em; margin-right: -.2em; line-height: 1;
  background: linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-profond));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.devise { font-family: var(--serif); font-size: clamp(22px, 2.2vw + 10px, 34px); line-height: 1.25; color: var(--ivoire); margin-top: 6px; }
.une .lede { font-size: clamp(17px, .6vw + 13px, 19px); color: var(--brume); max-width: 56ch; line-height: 1.65; }
.une-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

/* Arcs de lumière dans les angles, comme sur le visuel du logo */
.arc { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.arc.haut { width: 70vmax; height: 70vmax; left: -46vmax; top: -50vmax;
  background: radial-gradient(circle at 72% 78%, rgba(226, 182, 107, .32), rgba(17, 26, 61, .5) 38%, transparent 62%);
  box-shadow: inset -2px -2px 0 rgba(246, 221, 164, .25); }
.arc.bas { width: 64vmax; height: 64vmax; right: -44vmax; bottom: -46vmax;
  background: radial-gradient(circle at 28% 24%, rgba(226, 182, 107, .3), rgba(17, 26, 61, .45) 40%, transparent 64%);
  box-shadow: inset 2px 2px 0 rgba(246, 221, 164, .22); }
.arc.voile { width: 90vmax; height: 90vmax; right: -60vmax; top: -40vmax; background: radial-gradient(circle at 30% 70%, rgba(40, 60, 140, .22), transparent 60%); }

/* ═══════════ Sections ═══════════ */
section[data-scene="encrage"] { background: transparent; }
.lueur { position: relative; }
.lueur::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 85% 10%, rgba(226, 182, 107, .08), transparent 70%); }
[data-scene="qr"][data-num]::after { color: var(--or); opacity: .1; font-family: var(--serif); }
.q { font-size: clamp(32px, 3.4vw + 12px, 60px); line-height: 1.1; }
.a { color: var(--brume); }
.a strong { color: var(--ivoire); }

/* Principes : cartes de verre, icônes au trait d'or */
.principes { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.principes li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(17, 26, 61, .55), rgba(10, 16, 40, .55)); border: 1px solid var(--filet); border-radius: 16px; }
.principes h3 { font-size: 26px; color: var(--ivoire); }
.principes p { color: var(--brume); font-size: 16px; margin: 0; }
.icone { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--or);
  border: 1px solid rgba(226, 182, 107, .35); background: radial-gradient(circle, rgba(226, 182, 107, .14), transparent 70%); }
.icone svg { width: 22px; height: 22px; }

/* Nos applications : une carte par application, elle porte l'identité du produit */
.apps { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.apps > li { display: grid; }
.carte-produit { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px); text-decoration: none; border-radius: 16px; transition: transform .4s var(--ease-out), border-color .3s; }
.carte-produit:hover { transform: translateY(-3px); }
.carte-ourvision { background: radial-gradient(90% 70% at 20% 0%, color-mix(in srgb, var(--app-accent) 16%, var(--app-surface)), var(--app-bg) 70%);
  border: 1px solid var(--app-line); color: var(--app-ink); font-family: var(--app-font); }
.carte-ourvision:hover { border-color: var(--app-accent); }
.carte-ourvision .logo-carte { width: 120px; height: auto; }
.carte-ourvision .kicker { color: var(--app-accent); font-family: var(--app-font); letter-spacing: .09em; font-size: 11px; }
.carte-ourvision h3 { font-family: var(--app-font); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(30px, 3vw, 42px); }
.carte-ourvision p { color: var(--app-ink-2); margin: 0; }
.carte-ourvision .lien { display: inline-flex; align-items: center; gap: 8px; color: var(--app-ink); font-weight: 600; margin-top: 6px; }

/* Fin : contact et mentions */
[data-scene="fin"] { background: radial-gradient(60% 60% at 50% 100%, rgba(226, 182, 107, .12), transparent 70%); }
.fin-mail { font-family: var(--serif); font-weight: 500; }
.fin-big { font-family: var(--serif); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(40px, 11vw, 200px);
  background: linear-gradient(180deg, var(--or-clair), var(--or) 55%, var(--or-profond)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin-bar { font-size: 14px; }
.mentions { display: grid; gap: 6px; font-size: 14px; color: var(--brume); max-width: 76ch; padding-top: 18px; border-top: 1px solid var(--filet); }
.mentions h2 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin-bottom: 6px; }
.mentions p { margin: 0; }
.mentions a, .a a { color: var(--ivoire); text-underline-offset: .2em; text-decoration-color: rgba(226, 182, 107, .5); }

@media (max-width: 640px) {
  .im-header .im-home span { font-size: 13px; letter-spacing: .16em; }
  .signature { letter-spacing: .14em; margin-right: -.14em; }
}

/* Page 404 : sans le moteur */
.page-404 { margin: 0; color: var(--ivoire); font-family: var(--sans); }
.page-404 h1.devise { font-size: clamp(30px, 4vw, 48px); margin: 0; }
.page-404 .lede { margin: 0; }
.page-404 .lede a { color: var(--ivoire); text-underline-offset: .2em; text-decoration-color: rgba(226, 182, 107, .5); }
.page-404 .btn { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; }