/* ORION-TEK — feuille de style unique, sans dépendance.
   Palette reprise de l'identité existante (bleu nuit / ambre), typographie
   système pour un chargement instantané et zéro requête tierce. */

:root {
  --bg: #0B1A2E;
  --bg-2: #12294A;
  --card: #16304F;
  --line: #26456B;
  --text: #EAF1F8;
  --muted: #9FB8D4;
  --accent: #F0A020;
  --accent-2: #7EB8F0;
  --max: 1120px;
  --r: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0d2038 100%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 12px; top: 12px; background: var(--accent); color: #1a1206; padding: 8px 14px; border-radius: 8px; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 26, 46, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { font-weight: 700; letter-spacing: .14em; color: var(--text); font-size: 14px; }
.top nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.top nav a { color: var(--muted); font-size: 14px; }
.top nav a:hover, .top nav a.is-active { color: var(--text); text-decoration: none; }
.top nav a.is-active { border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.lang {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; letter-spacing: .08em; color: var(--muted);
}
.lang:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero, .page-head { padding: 76px 0 40px; max-width: 780px; }
.kicker {
  font-size: 12px; letter-spacing: .2em; color: var(--accent);
  text-transform: uppercase; margin: 0 0 18px;
}
h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.1; margin: 0 0 22px; letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); margin: 0; max-width: 66ch; }

/* ── Bannière de citations ───────────────────────────────────────────── */
.quotebar {
  margin: 40px 0 64px; padding: 30px 34px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(240,160,32,.08), transparent 70%);
  border-radius: 0 var(--r) var(--r) 0;
  min-height: 132px; display: flex; align-items: center;
}
.quote-anim { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.quote-anim.is-in { opacity: 1; transform: none; }
.quotebar p { margin: 0 0 10px; font-size: clamp(18px, 2.4vw, 23px); line-height: 1.45; font-style: italic; }
.quotebar cite { font-style: normal; font-size: 12px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .quote-anim { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Portes (3 accès) ────────────────────────────────────────────────── */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 72px; }
.door {
  display: block; padding: 26px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card); color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.door:hover { border-color: var(--accent); transform: translateY(-3px); text-decoration: none; }
.door-kicker { font-size: 11px; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.door h3 { margin: 10px 0 10px; font-size: 22px; }
.door p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.door-cta { color: var(--accent-2); font-size: 14px; font-weight: 600; }

/* ── Thèse ───────────────────────────────────────────────────────────── */
.thesis { margin-bottom: 84px; }
.thesis h2 { font-size: 28px; margin: 0 0 26px; }
.thesis ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.thesis h3 { font-size: 17px; margin: 0 0 8px; color: var(--accent); }
.thesis p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── Livres ──────────────────────────────────────────────────────────── */
.series { margin-bottom: 68px; }
.series-head { border-top: 1px solid var(--line); padding-top: 26px; margin-bottom: 26px; }
.series-head h2 { font-size: 26px; margin: 0 0 6px; }
.series-tagline { margin: 0 0 12px; color: var(--accent); font-size: 14px; }
.series-intro { margin: 0; color: var(--muted); max-width: 70ch; }
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.book {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.book .vol { font-size: 11px; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.book h3 { margin: 6px 0 6px; font-size: 19px; line-height: 1.25; }
.book .sub { margin: 0; color: var(--muted); font-size: 14px; }
.excerpt { margin: 0; padding-left: 16px; border-left: 2px solid var(--accent); }
.excerpt-label { font-size: 10px; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; }
.excerpt p { margin: 6px 0 0; font-style: italic; font-size: 15px; }
.book footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.buy {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--accent); color: #1a1206; font-weight: 600; font-size: 14px;
}
.buy:hover { text-decoration: none; filter: brightness(1.08); }
.isbn { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* ── Pied ────────────────────────────────────────────────────────────── */
.bottom { border-top: 1px solid var(--line); padding: 34px 0 52px; margin-top: 40px; }
.bottom p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.bottom .muted { color: #7794b4; }

@media (max-width: 720px) {
  .top .wrap { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  .top nav { order: 3; width: 100%; margin-left: 0; gap: 14px; }
  .hero, .page-head { padding-top: 44px; }
  .quotebar { padding: 22px 20px; }
}


/* ── Produit phare (accueil) ─────────────────────────────────────────────
   NEXIA n'est pas une carte parmi d'autres : encadré pleine largeur, posé
   juste sous le hero. Le liseré ambre à gauche le distingue des « portes »
   sans introduire une deuxième couleur d'accent. */
.flagship {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--bg-2);
  padding: 34px 34px 30px; margin: 0 0 56px;
}
.flag-label {
  font-size: 12px; letter-spacing: .2em; color: var(--accent);
  text-transform: uppercase; margin: 0 0 14px;
}
.flagship h2 { font-size: 40px; margin: 0 0 6px; letter-spacing: -.01em; }
.flag-tagline { margin: 0 0 16px; font-size: 19px; color: var(--accent-2); }
.flag-text { margin: 0 0 26px; color: var(--muted); max-width: 68ch; }
.flag-uses {
  list-style: none; padding: 0; margin: 0 0 28px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px;
}
.flag-uses h4 { margin: 0 0 6px; font-size: 16px; }
.flag-uses p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ── Boutons ─────────────────────────────────────────────────────────────
   Deux niveaux seulement : l'action principale, et celle qu'on propose
   sans l'imposer. Au-delà, l'utilisateur ne sait plus où cliquer. */
.flag-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn {
  display: inline-block; padding: 13px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #14243B; border: 1px solid var(--accent);
  transition: opacity .2s ease, transform .2s ease;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent-2); }

/* ── Blocs de contenu (page NEXIA) ───────────────────────────────────── */
.block { margin: 0 0 64px; }
.block h2 { font-size: 30px; margin: 0 0 12px; letter-spacing: -.01em; }
.block-lead { margin: 0 0 22px; font-size: 18px; color: var(--accent-2); max-width: 62ch; }
.block-text { margin: 0; color: var(--muted); max-width: 70ch; font-size: 16.5px; line-height: 1.75; }

/* Étapes numérotées : le numéro porte le rythme, pas une puce. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); padding: 22px 24px;
}
.step-n { display: block; font-size: 12px; letter-spacing: .18em; color: var(--accent); margin-bottom: 8px; }
.steps h3 { margin: 0 0 8px; font-size: 19px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 78ch; }

/* Grilles de cartes : 2 colonnes (cible, raisons), 3 (domaines). */
.grid-2, .grid-3 { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-2 li, .grid-3 li {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); padding: 22px 24px;
}
.grid-2 h3, .grid-3 h3 { margin: 0 0 8px; font-size: 17px; color: var(--accent); }
.grid-2 p, .grid-3 p { margin: 0; color: var(--muted); font-size: 15px; }

/* Réserve sur les rendus non certifiés. Visible, jamais en petits
   caractères : publiée sur un site commercial, elle engage. */
.caveat {
  margin: 22px 0 0; padding: 14px 18px; border-left: 3px solid var(--accent);
  background: rgba(240, 160, 32, .07); color: var(--muted);
  font-size: 14.5px; border-radius: 0 8px 8px 0; max-width: 78ch;
}

/* ── Bandeau d'appel à l'action (fin de page) ────────────────────────── */
.cta-band {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-2); padding: 40px 34px; margin: 0 0 84px; text-align: center;
}
.cta-band h2 { font-size: 30px; margin: 0 0 10px; }
.cta-band > p { margin: 0 0 24px; color: var(--muted); }
.cta-band .flag-cta { justify-content: center; }

@media (max-width: 720px) {
  .flagship { padding: 26px 22px; }
  .flagship h2 { font-size: 32px; }
  .block h2, .cta-band h2 { font-size: 25px; }
  .cta-band { padding: 32px 22px; }
  .btn { flex: 1 1 100%; text-align: center; }
}


/* ═══ Direction visuelle reprise de la maquette fournie ═══════════════════
   Trois emprunts, pas plus : le logo dans une pastille blanche, un titre
   très grand dont la dernière ligne passe en cyan, et une hiérarchie de
   boutons ambre → cyan → contour. */

:root { --cyan: #29ABE2; }

/* ── Logo de marque ──────────────────────────────────────────────────────
   Le logo est un JPEG sur fond blanc : ses halos se fondent dans le blanc,
   un détourage laisserait des auréoles. On assume donc la pastille. */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 10px;
  background: #fff; padding: 4px; object-fit: contain;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

/* ── Titre à deux tons ─────────────────────────────────────────────────── */
.hero h1 {
  font-size: clamp(44px, 7.4vw, 92px);
  line-height: .98; letter-spacing: -.03em; margin: 0 0 26px;
}
.hero h1 .hl { color: var(--cyan); }
.hero .lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; max-width: 62ch; }

/* ── Boutons : le second niveau passe en cyan ──────────────────────────── */
.btn-cyan { background: var(--cyan); border-color: var(--cyan); color: #06243A; }

/* ── Produit phare : logo NEXIA ────────────────────────────────────────── */
.flag-logo {
  width: 92px; height: 92px; border-radius: 12px;
  object-fit: cover; display: block; margin: 0 0 14px;
  border: 1px solid var(--line);
}

/* ── Captures d'écran ────────────────────────────────────────────────────
   La légende porte la preuve ; l'image seule ne démontre rien. Elle est
   donc traitée comme du texte, pas comme une décoration. */
.shots { display: grid; gap: 34px; margin: 0; }
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card);
}
.shot figcaption {
  margin: 12px 2px 0; color: var(--muted); font-size: 15px;
  line-height: 1.6; max-width: 78ch;
}
/* La capture mobile est un écran de téléphone : la laisser pleine largeur
   l'étirerait à l'absurde. */
.shot img[src$="nexia-mobile.jpg"] { max-width: 380px; margin: 0 auto; }

/* ── Cartes de démonstration ───────────────────────────────────────────── */
.cards li { display: flex; flex-direction: column; gap: 10px; }
.cards h3 { margin: 0; font-size: 18px; color: var(--text); }
.cards p { margin: 0; flex: 1; }
.tag {
  align-self: flex-start; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.dl {
  align-self: flex-start; font-size: 14px; font-weight: 600;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dl:hover { border-bottom-color: var(--accent); }

/* Images produites par NEXIA : le schéma reste lisible en pleine largeur,
   tandis que le portrait conserve un format raisonnable sur grand écran. */
.demo-images {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; align-items: start;
}
.demo-image {
  margin: 0; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--card);
}
.demo-image a { display: block; background: #fff; }
.demo-image img {
  display: block; width: 100%; height: 360px; object-fit: contain;
}
.demo-image figcaption { padding: 18px 20px 20px; }
.demo-image h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.demo-image p { margin: 0; color: var(--muted); line-height: 1.6; }

@media (max-width: 720px) {
  .demo-images { grid-template-columns: 1fr; }
  .demo-image img { height: auto; max-height: 520px; }
}

/* Simulations : exécutées dans une iframe isolée (sandbox), ouvertes à la
   demande pour ne pas charger six documents interactifs d'un coup. */
.sim summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--cyan);
  padding: 8px 0; list-style: none;
}
.sim summary::-webkit-details-marker { display: none; }
.sim summary::before { content: "▸ "; }
.sim[open] summary::before { content: "▾ "; }
.sim iframe {
  width: 100%; height: 520px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; margin-top: 6px;
}

/* ── Mention de non-certification, version forte ───────────────────────── */
.caveat-strong {
  margin: 0 0 44px; font-size: 15.5px; border-left-width: 4px;
  background: rgba(240, 160, 32, .10);
}

/* ── Pages légales ───────────────────────────────────────────────────────
   Une colonne de texte, rien d'autre. On vient y chercher une information
   précise, pas une expérience. */
.legal { max-width: 74ch; margin: 0 0 84px; }
.legal-item { margin: 0 0 34px; }
.legal-item h2 { font-size: 20px; margin: 0 0 8px; color: var(--accent); }
.legal-item p { margin: 0; color: var(--muted); line-height: 1.75; }

@media (max-width: 720px) {
  .brand-mark { width: 38px; height: 38px; }
  .sim iframe { height: 420px; }
  .shots { gap: 26px; }
}


/* ── En-tête : sélecteur de langue + appel à l'action ────────────────────
   Repris de la maquette : le contact est un bouton ambre, pas une entrée de
   menu. C'est la seule action qu'on veut pouvoir déclencher depuis
   n'importe quelle page. Masqué sur mobile, où la place manque et où
   « Contact » reste dans la navigation. */
.top-right { display: inline-flex; align-items: center; gap: 14px; }
.cta-top {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #14243B; text-decoration: none;
  font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  transition: opacity .2s ease;
}
.cta-top:hover { opacity: .88; }

/* Renvoi vers l'autre version linguistique, sous la liste des documents. */
.docs-note {
  margin: 22px 0 0; color: var(--muted); font-size: 15px;
  border-left: 2px solid var(--cyan); padding-left: 14px; max-width: 70ch;
}

@media (max-width: 720px) { .cta-top { display: none; } }


/* ═══ THÈME CLAIR — bleu ciel mêlé de brun, police Comic Sans ═════════════
   Demandé le 17/08/2026 pour voir ce que ça donne. Écrit en surcharge, à la
   fin du fichier, plutôt qu'en modifiant les règles d'origine : revenir en
   arrière consiste à supprimer ce bloc, rien d'autre.

   Deux points à juger sur pièce :
   — Comic Sans MS n'est pas installé partout (Linux, Android en sont
     souvent dépourvus). La pile de repli finit sur `cursive`, donc l'esprit
     est conservé, mais le dessin des lettres change d'une machine à l'autre.
   — Le fond passe en clair : tout le texte est donc réécrit en sombre, et
     les boutons abandonnent l'ambre, illisible sur fond pâle. */

/* Comic Neue embarquée : sur les machines sans Comic Sans MS (Linux,
   Android…), le rendu restait aléatoire (repli `cursive`). La police est
   servie par le site lui-même — aucune requête vers un service tiers,
   conformément à la promesse de confidentialité. */
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/comic-neue-400.woff2) format("woff2");
}
@font-face {
  font-family: "Comic Neue";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/comic-neue-400i.woff2) format("woff2");
}
@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/comic-neue-700.woff2) format("woff2");
}

:root {
  --bg: #C6DAE3;        /* bleu ciel */
  --bg-2: #D3DFE2;      /* panneau, déjà tiré vers le chaud */
  --card: #DEE6E5;
  --line: #A3B2AF;
  --text: #1E2A32;      /* ardoise sombre — lisible sur toute la plage */
  --muted: #4C5A60;
  --accent: #8C5A2B;    /* brun : c'est lui qui « mêle » la palette */
  --accent-2: #1F6F8B;  /* bleu profond pour les liens */
  --cyan: #1F6F8B;
}

body {
  /* Du bleu ciel en haut vers le brun en bas — le mélange demandé, obtenu
     par dégradé plutôt que par une teinte plate qui virerait au gris. */
  background: linear-gradient(180deg, #C6DAE3 0%, #C9C3B5 100%);
  font-family: "Comic Sans MS", "Comic Sans", "Comic Neue",
               "Chalkboard SE", "Segoe Print", cursive;
  font-size: 16px; line-height: 1.65;
}

/* Comic Sans porte mal les très grandes graisses serrées : on desserre. */
.hero h1 { letter-spacing: 0; line-height: 1.04; }
.flagship h2, .block h2, .cta-band h2 { letter-spacing: 0; }

/* ── Boutons : l'ambre ne tient pas sur fond pâle ─────────────────────── */
.btn { background: var(--accent); border-color: var(--accent); color: #FFF6EE; }
.btn-cyan { background: var(--cyan); border-color: var(--cyan); color: #F2FAFD; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.cta-top { background: var(--accent); color: #FFF6EE; }

/* ── Surfaces ────────────────────────────────────────────────────────── */
.door, .steps li, .grid-2 li, .grid-3 li, .book {
  background: var(--card); border-color: var(--line);
}
.flagship, .cta-band { background: var(--bg-2); border-color: var(--line); }
.caveat { background: rgba(140, 90, 43, .12); border-left-color: var(--accent); }
.caveat-strong { background: rgba(140, 90, 43, .16); }
.top, .bottom { border-color: var(--line); }

/* Le logo ORION-TEK est déjà sur fond blanc : sur fond clair, la pastille
   n'a plus lieu d'être, seul un léger contour reste utile. */
.brand-mark { box-shadow: none; border: 1px solid var(--line); }

/* Le logo NEXIA, lui, est un carré bleu nuit : sur fond pâle il pose un
   bloc sombre. On l'assume avec un contour, plutôt que de le délaver. */
.flag-logo { border: 1px solid var(--line); }

/* Les captures d'écran viennent d'une interface claire : elles se fondent
   dans le fond. Un contour net les redétache. */
.shot img { border-color: var(--line); background: #fff; }

.tag { color: var(--accent); border-color: var(--line); }
.dl { color: var(--accent); }
.dl:hover { border-bottom-color: var(--accent); }
.sim summary { color: var(--accent-2); }
.docs-note { border-left-color: var(--accent); }
.legal-item h2 { color: var(--accent); }
.thesis h3 { color: var(--accent); }
.kicker, .flag-label { color: var(--accent); }
.hero h1 .hl { color: var(--accent-2); }
.flag-tagline, .block-lead { color: var(--accent-2); }
.door-cta { color: var(--accent-2); }

/* Surcharges oubliees au premier passage : ces deux regles portaient des
   couleurs codees en dur, invisibles depuis les variables. */
.top { background: rgba(216, 228, 231, .92); }
.bottom .muted { color: var(--muted); }

/* ── En-tete brun ────────────────────────────────────────────────────────
   Demande du 17/08/2026. Le bandeau devient brun plein : tout ce qu il
   contient doit donc repasser en clair, sinon le texte disparait. Le bouton
   de contact s inverse (creme sur brun) pour rester le point le plus visible
   de la barre. */
.top {
  background: #8C5A2B;
  border-bottom: 1px solid rgba(255, 246, 238, .22);
}
.brand { color: #FFF6EE; }
.brand-mark { border: 1px solid rgba(255, 246, 238, .45); }
.top nav a { color: rgba(255, 246, 238, .78); }
.top nav a:hover, .top nav a.is-active { color: #FFF6EE; }
.top nav a.is-active { border-bottom: 2px solid #F0C08A; }
.lang { color: rgba(255, 246, 238, .85); border-color: rgba(255, 246, 238, .40); }
.lang:hover { color: #FFF6EE; border-color: #FFF6EE; }
.cta-top { background: #FFF6EE; color: #6E441F; }
.cta-top:hover { opacity: .9; }


/* ── Visuel d'accueil : logo ORION-TEK et étoile en orbite ───────────────
   Le hero passe sur deux colonnes : le texte garde sa largeur de lecture,
   le logo occupe le vide à sa droite. Sous 900 px il repasse dessous, plus
   petit, plutôt que d'écraser le titre. */
.hero {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 780px) auto;
  gap: 40px; align-items: center;
}
.hero-text { max-width: 780px; }

.hero-visual {
  position: relative; justify-self: center;
  width: min(380px, 34vw); aspect-ratio: 1 / 1;
}
/* `multiply` sur fond clair : le blanc du JPEG devient transparent, les
   traits du logo restent intacts. Aucun détourage, donc aucune auréole. */
.hero-visual img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply;
}

/* L'orbite : une rotation circulaire écrasée en ellipse, inclinée comme
   l'anneau du logo. L'étoile est contre-écrasée pour rester ronde. */
.orbit {
  position: absolute; inset: 0;
  transform: rotate(-16deg) scaleY(.36);
  pointer-events: none;
}
.orbit-run {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: orbit-turn 11s linear infinite;
}
.orbit-star {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px;
  /* 1 / .36 ≈ 2.78 : annule l'écrasement de l'ellipse. */
  transform: translateX(47%) scaleY(2.78);
  margin-left: 158px;
  background: #F0A020;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%,
                     39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 6px rgba(240, 160, 32, .85));
}
@keyframes orbit-turn { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { width: min(260px, 60vw); justify-self: start; }
  .orbit-star { margin-left: 108px; }
}

/* Une animation qui tourne sans fin est exactement ce que ce réglage
   demande d'arrêter. */
@media (prefers-reduced-motion: reduce) {
  .orbit-run { animation: none; }
}


/* ── Étoile en relief ────────────────────────────────────────────────────
   Le volume vient de l'alternance des facettes, pas d'une ombre portée :
   deux tons d'or qui se rencontrent sur chaque arête. La rotation sur
   l'axe vertical, sous perspective, achève de la sortir du plan.

   Trois transformations, trois éléments — `transform` est une propriété
   unique, elle ne peut pas porter l'orbite, le contre-écrasement et la
   rotation propre à la fois. */
.orbit-star {
  position: absolute; left: -13px; top: -13px;
  width: 26px; height: 26px;
  margin-left: 158px;
  transform: scaleY(2.78);   /* annule l'écrasement de l'ellipse */
  perspective: 90px;         /* sans elle, rotateY resterait plat */
}
.orbit-star svg {
  display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: star-spin 3.6s linear infinite;
  filter: drop-shadow(0 0 5px rgba(240, 160, 32, .8));
}
.orbit-star .f-clair  { fill: #FFD98A; }
.orbit-star .f-sombre { fill: #C07F18; }

@keyframes star-spin { to { transform: rotateY(360deg); } }

@media (max-width: 900px) { .orbit-star { margin-left: 108px; } }

@media (prefers-reduced-motion: reduce) {
  .orbit-star svg { animation: none; }
}


/* ── Orbite : positions calculées, plus aucune déformation ───────────────
   L'étoile parcourt une ellipse dont les points sont posés un à un, en
   pourcentage du conteneur. Aucun `scale` n'intervient, donc l'étoile reste
   carrée quel que soit l'endroit de sa course — ce qui n'était pas le cas
   quand l'ellipse venait d'un écrasement du parent.

   Généré par orbite-fix.py (36 points, ellipse 88% x 30%). */
.orbit {
  position: absolute; inset: 0;
  transform: rotate(-16deg);   /* rotation SEULE : une rotation ne déforme pas */
  pointer-events: none;
}
.orbit-run { position: static; animation: none; }
.orbit-star {
  position: absolute;
  left: 94.000%; top: 50.000%;          /* point de départ si l'animation est coupée */
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;            /* centre l'étoile sur le point */
  transform: none;
  perspective: 90px;
  animation: orbit-path 11s linear infinite;
}

@keyframes orbit-path {
  0.0000% { left: 94.000%; top: 50.000%; }
  2.7778% { left: 93.332%; top: 52.605%; }
  5.5556% { left: 91.346%; top: 55.130%; }
  8.3333% { left: 88.105%; top: 57.500%; }
  11.1111% { left: 83.706%; top: 59.642%; }
  13.8889% { left: 78.283%; top: 61.491%; }
  16.6667% { left: 72.000%; top: 62.990%; }
  19.4444% { left: 65.049%; top: 64.095%; }
  22.2222% { left: 57.641%; top: 64.772%; }
  25.0000% { left: 50.000%; top: 65.000%; }
  27.7778% { left: 42.359%; top: 64.772%; }
  30.5556% { left: 34.951%; top: 64.095%; }
  33.3333% { left: 28.000%; top: 62.990%; }
  36.1111% { left: 21.717%; top: 61.491%; }
  38.8889% { left: 16.294%; top: 59.642%; }
  41.6667% { left: 11.895%; top: 57.500%; }
  44.4444% { left: 8.654%; top: 55.130%; }
  47.2222% { left: 6.668%; top: 52.605%; }
  50.0000% { left: 6.000%; top: 50.000%; }
  52.7778% { left: 6.668%; top: 47.395%; }
  55.5556% { left: 8.654%; top: 44.870%; }
  58.3333% { left: 11.895%; top: 42.500%; }
  61.1111% { left: 16.294%; top: 40.358%; }
  63.8889% { left: 21.717%; top: 38.509%; }
  66.6667% { left: 28.000%; top: 37.010%; }
  69.4444% { left: 34.951%; top: 35.905%; }
  72.2222% { left: 42.359%; top: 35.228%; }
  75.0000% { left: 50.000%; top: 35.000%; }
  77.7778% { left: 57.641%; top: 35.228%; }
  80.5556% { left: 65.049%; top: 35.905%; }
  83.3333% { left: 72.000%; top: 37.010%; }
  86.1111% { left: 78.283%; top: 38.509%; }
  88.8889% { left: 83.706%; top: 40.358%; }
  91.6667% { left: 88.105%; top: 42.500%; }
  94.4444% { left: 91.346%; top: 44.870%; }
  97.2222% { left: 93.332%; top: 47.395%; }
  100.0000% { left: 94.000%; top: 50.000%; }
}

@media (max-width: 900px) { .orbit-star { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }

@media (prefers-reduced-motion: reduce) { .orbit-star { animation: none; } }


/* ── Cadre de l'application (page NEXIA Web) ─────────────────────────────
   L'application est servie par un autre domaine et gère son propre thème
   clair : on lui donne un fond blanc et une bordure, pas un habillage. Le
   cadre ne doit rien imposer à ce qu'il contient. */
.app-frame { margin: 0 0 28px; }
.app-frame iframe {
  width: 100%; height: min(78vh, 800px); display: block;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
@media (max-width: 720px) {
  .app-frame iframe { height: 70vh; }
}

/* ── Formulaire de contact ─────────────────────────────────────────────── */
.contact-form { max-width: 560px; display: grid; gap: 14px; }
.contact-form label { font-size: 13px; letter-spacing: .04em; display: grid; gap: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--line, #c9d4e3); border-radius: 8px;
  background: var(--bg, #fff); color: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent, #1E9CE4); outline-offset: 1px; }
.contact-form button { justify-self: start; }