/* ============================================================================
   teagarden.net — shared design system / système de design partagé
   ----------------------------------------------------------------------------
   Palette derived from the "teagarden.net" logo:
     deep navy badge ground, silver wordmark, signature lime green, hood blues.
   Palette dérivée du logo : fond bleu nuit, mot-symbole argent, vert signature,
   bleus du capuchon.
   Font: Tahoma (per site spec) with cross-platform fallbacks.
   Police : Tahoma (selon la spécification) avec substituts multiplateformes.
   Themes: dark is the default; light is opt-in via [data-theme="light"].
   Thèmes : sombre par défaut ; clair au choix via [data-theme="light"].
   ========================================================================== */

/* ---- Raw brand colours / Couleurs de marque brutes ----
   Used only through the semantic tokens below, never referenced directly in
   components. / Employées uniquement via les jetons sémantiques ci-dessous. */
:root {
  --navy-900: #060E18;  /* deepest navy — the badge ground / fond le plus sombre */
  --navy-800: #0A1522;
  --navy-700: #0F1E30;
  --navy-600: #14293F;
  --blue:        #0E86D8;  /* hood highlight blue / bleu du capuchon */
  --blue-bright: #37A6EE;
  --blue-deep:   #0A3A66;
  --green:        #5FE83C;  /* signature lime green — the "signature" accent */
  --green-bright: #7CF24E;
  --green-deep:   #227D0C;  /* darkened green, legible as text on light ground */
  --silver:   #EEF3F7;
  --silver-2: #C9D4DE;

  /* Font stack — Tahoma first, then close cross-platform substitutes.
     Pile de polices — Tahoma d'abord, puis des substituts proches. */
  --font: Tahoma, "Segoe UI", "DejaVu Sans", Geneva, Verdana, sans-serif;

  /* Shared horizontal breathing room / Marge horizontale partagée */
  --edge: clamp(1.2rem, 5vw, 5rem);

  color-scheme: dark;
}

/* ---- Dark theme (default) / Thème sombre (par défaut) ----
   Deep navy ground so the primary brand colour dominates; silver carries the
   type; lime green is the signature accent. Every token clears WCAG AA (4.5:1)
   on the ground. / Fond bleu nuit dominant ; l'argent porte le texte ; le vert
   est l'accent. Chaque jeton atteint le rapport AA (4,5:1). */
:root,
:root[data-theme="dark"] {
  --bg:    var(--navy-900);
  --bg-2:  #0C1826;   /* panels / cartes */
  --bg-3:  #12233A;   /* inputs, raised surfaces / champs, surfaces surélevées */
  --ink:      var(--silver);
  --ink-dim:  #B7C4D1;
  --muted:    #8194A6;
  --accent:        var(--green);
  --accent-bright: var(--green-bright);
  --accent-blue:   var(--blue-bright);
  --line:      rgba(238, 243, 247, 0.12);
  --line-soft: rgba(238, 243, 247, 0.06);
  --glow:      rgba(95, 232, 60, 0.14);
  --glow-blue: rgba(14, 134, 216, 0.12);
  --glow-strength: 1;
  --focus: var(--green-bright);
  color-scheme: dark;
}

/* ---- Light theme / Thème clair ----
   Cool near-white ground with navy display type and graphite running text. Pure
   lime green is far too light on white (~1.4:1), so text and small UI use the
   deepened green; the pure accent is reserved for rules, glows, and large fills.
   Fond blanc froid, titres marine, texte graphite. Le vert pur étant trop clair
   (~1,4:1), le texte utilise le vert foncé ; le vert pur sert aux filets. */
:root[data-theme="light"] {
  --bg:    #EEF2F6;
  --bg-2:  #FFFFFF;
  --bg-3:  #E7EDF3;
  --ink:      var(--navy-800);
  --ink-dim:  #33475A;
  --muted:    #566575;
  --accent:        var(--green-deep);
  --accent-bright: #1C6A0A;
  --accent-blue:   #0A66B0;
  --line:      rgba(10, 21, 34, 0.16);
  --line-soft: rgba(10, 21, 34, 0.08);
  --glow:      rgba(34, 125, 12, 0.10);
  --glow-blue: rgba(10, 102, 176, 0.08);
  --glow-strength: 0.5;
  --focus: var(--green-deep);
  color-scheme: light;
}

/* ---- Reset / Réinitialisation ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ---- Language visibility / Visibilité des langues ----
   The active language is stamped on <html data-lang>; the two inactive language
   spans are hidden. / La langue active est portée par <html data-lang>. */
:root[data-lang="en"] .l-fr, :root[data-lang="en"] .l-es { display: none !important; }
:root[data-lang="fr"] .l-en, :root[data-lang="fr"] .l-es { display: none !important; }
:root[data-lang="es"] .l-en, :root[data-lang="es"] .l-fr { display: none !important; }

/* ---- Atmospheric backdrop / Fond d'ambiance ----
   A faint tech grid masked to the top, plus soft green/blue glows echoing the
   logo's ring. Purely decorative. / Grille technique discrète et halos verts et
   bleus rappelant l'anneau du logo. Purement décoratif. */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.atmos::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 6%, #000 28%, transparent 76%);
          mask-image: radial-gradient(ellipse 90% 65% at 50% 6%, #000 28%, transparent 76%);
}
.atmos::after {
  content: ""; position: absolute; top: -28vh; left: 50%; transform: translateX(-50%);
  width: 120vw; height: 85vh; opacity: var(--glow-strength);
  background:
    radial-gradient(closest-side, var(--glow), transparent 70%),
    radial-gradient(closest-side at 32% 55%, var(--glow-blue), transparent 70%);
  filter: blur(12px);
}

/* Content sits above the backdrop / Le contenu passe au-dessus du fond */
.shell { position: relative; z-index: 2; display: contents; }

/* ============================================================================
   Header / En-tête (shared across all pages / partagé)
   ========================================================================== */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem var(--edge);
  border-bottom: 1px solid var(--line-soft);
  position: relative; z-index: 3;
}
/* Thin signature accent line across the very top / Filet d'accent en haut */
header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent-blue) 80%, transparent);
  opacity: 0.8;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The logo is the single brand mark on every page, shown prominently upper-left.
   Le logo est l'unique marque, affiché en grand en haut à gauche. */
.brand img {
  display: block; height: clamp(6rem, 17vw, 11.5rem); width: auto; max-width: 100%;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}
:root[data-theme="light"] .brand img { filter: drop-shadow(0 4px 12px rgba(10,21,34,0.15)); }
.controls { display: flex; align-items: center; gap: 0.9rem; }

/* Language switch / Sélecteur de langue */
.lang { display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; letter-spacing: 0.1em; }
.lang-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: inherit; text-transform: uppercase;
  padding: 0.35rem 0.3rem; transition: color 0.2s ease;
}
.lang-btn[aria-pressed="true"] { color: var(--accent); }
.lang-btn:hover { color: var(--ink); }
.lang-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.lang-div { color: var(--line); user-select: none; }

/* Theme toggle / Bascule de thème */
.theme-btn {
  background: none; border: 1px solid var(--line); color: var(--ink);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-btn svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: none; }
:root[data-theme="light"] .theme-btn .ic-moon { display: none; }

/* ============================================================================
   Main layout / Mise en page principale
   ========================================================================== */
main { position: relative; z-index: 2; }
/* Home: keep the short welcome content compact near the top under the large logo,
   with the footer following directly rather than being forced to the viewport
   bottom (which left big empty gaps around the welcome text). The fixed .atmos
   backdrop fills any viewport area below the footer, so it still looks intentional.
   Accueil : contenu compact sous le grand logo, pied de page à la suite. */
body.home { min-height: auto; }
.home-main .wrap { width: 100%; }
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 var(--edge); }
.narrow { max-width: 44rem; }

/* Section eyebrow / Suréclairage de section */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 0.85rem;
  font-weight: 700; margin-bottom: 1.3rem;
}
.eyebrow::before {
  content: ""; width: clamp(22px, 6vw, 50px); height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

h1 {
  font-weight: 700; line-height: 1.05; letter-spacing: -0.01em;
  font-size: clamp(2rem, 5.5vw, 3.4rem); margin-bottom: 1rem;
}
h2 {
  font-weight: 700; line-height: 1.15; font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin-bottom: 0.8rem;
}
p { color: var(--ink-dim); }
p + p { margin-top: 1rem; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-bright); }

/* ---- Hero (home) / Section d'accueil ---- */
.hero {
  text-align: center; padding: clamp(1.25rem, 4vh, 2.25rem) 0 clamp(1.5rem, 4vh, 2.5rem);
  display: grid; place-items: center;
}
.hero .lede {
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink-dim);
  max-width: 42ch; margin: 0 auto;
}
.hero .tagline {
  margin-top: 1.4rem; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.hero .tagline b { color: var(--accent); font-weight: 700; }

/* ---- Document pages (about, contact, card) / Pages de document ---- */
.doc { padding: clamp(2rem, 5vh, 3.4rem) 0 clamp(3.5rem, 9vh, 6rem); }
.doc .lede {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-dim);
  max-width: 52ch; line-height: 1.65;
}
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 1.1rem; }

/* ---- Legal / policy content (privacy, security) / Contenu juridique ---- */
.doc .updated {
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted);
  margin: -0.3rem 0 1.8rem;
}
.prose h2 {
  font-size: clamp(1.12rem, 2.4vw, 1.42rem); line-height: 1.25;
  margin: 2.1rem 0 0.65rem; color: var(--ink);
}
.prose ul { margin: 0.5rem 0 0; padding-left: 1.25rem; max-width: 62ch; }
.prose li { color: var(--ink-dim); margin: 0.45rem 0; padding-left: 0.15rem; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-bright); }
.prose strong { color: var(--ink); font-weight: 700; }
.doc-nav a + a { margin-left: 0.3rem; }

.doc-nav { margin-top: 2.6rem; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; }
.doc-nav a { color: var(--accent); text-decoration: none; font-weight: 700; }
.doc-nav a:hover { color: var(--accent-bright); }

/* ============================================================================
   Contact form / Formulaire de contact
   ========================================================================== */
.contact-form { max-width: 34rem; margin-top: 2.2rem;
  display: flex; flex-direction: column; gap: 1.3rem; }
.contact-form .field { display: flex; flex-direction: column; gap: 0.45rem; }
.contact-form label {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.contact-form input, .contact-form textarea {
  font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.8rem 0.95rem; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.contact-form input:user-invalid, .contact-form textarea:user-invalid { border-color: #D2686C; }
.cf-turnstile { margin: 0.1rem 0; min-height: 65px; }

/* Buttons / Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); border: 1px solid var(--accent);
  padding: 0.85rem 1.6rem; border-radius: 6px; cursor: pointer;
  text-decoration: none; transition: filter 0.2s ease, transform 0.1s ease;
}
.btn:hover { filter: brightness(1.08); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.btn.ghost {
  color: var(--accent); background: none; border-color: var(--line);
}
.btn.ghost:hover { color: var(--accent-bright); border-color: var(--accent); filter: none; }
.contact-form .btn { align-self: flex-start; }

.form-status {
  font-size: 0.86rem; line-height: 1.5; padding: 0.8rem 1rem;
  border-radius: 6px; border: 1px solid var(--line);
}
.form-status.ok  { color: var(--accent-blue); border-color: var(--accent-blue); }
.form-status.err { color: #D2686C; border-color: #D2686C; }

.form-note {
  font-size: 0.84rem; line-height: 1.6; color: var(--muted);
  max-width: 34rem; margin-top: 0.3rem;
}
.form-note a { color: var(--ink-dim); text-decoration: underline; }
.form-note a:hover { color: var(--accent); }

/* ============================================================================
   vCard page / Page carte de visite
   ========================================================================== */
.vcard {
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2rem); max-width: 44rem; margin-top: 2rem;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}
.vcard .vc-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.vcard h2 { margin-bottom: 0.2rem; }
.vcard .vc-sub {
  color: var(--accent); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 1.4rem;
}
.vcard .vc-grid {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px 22px; align-items: start;
}
.vcard .photo {
  width: 118px; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden;
  background: var(--navy-800); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
  font-size: 12px; text-align: center; padding: 6px;
}
.vcard dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 9px 14px; }
.vcard dt { color: var(--muted); font-size: 0.9rem; }
.vcard dd { margin: 0; color: var(--ink-dim); overflow-wrap: anywhere; }
.vcard dd a { color: var(--accent); text-decoration: none; }
.vcard dd a:hover { text-decoration: underline; }
.vc-actions { display: flex; gap: 12px; margin-top: 1.8rem; flex-wrap: wrap; }
.vc-foot { margin-top: 1.3rem; color: var(--muted); font-size: 0.84rem; }
@media (max-width: 600px) {
  .vcard .vc-grid { grid-template-columns: 1fr; }
  .vcard .photo { width: min(60vw, 240px); justify-self: start; }
  .vcard dl { grid-template-columns: 1fr; }
  .vcard dt { margin-top: 8px; font-weight: 700; }
  .vc-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================================
   Footer / Pied de page (shared / partagé)
   ========================================================================== */
footer {
  padding: 2rem var(--edge) 2.4rem;
  border-top: 1px solid var(--line-soft); background: var(--bg-2);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center;
  font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted);
  position: relative; z-index: 2;
}
footer a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
footer a:hover { color: var(--accent); }
footer .sep { color: var(--line); }
footer .foot-brand { color: var(--ink-dim); font-weight: 700; }

/* ---- 404 / Page introuvable ---- */
.error-page { text-align: center; padding: clamp(3rem, 12vh, 8rem) 0; }
.error-page .code {
  font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; color: var(--accent);
  line-height: 1; letter-spacing: 0.02em;
}

/* ---- Motion / Mouvement ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* ---------------------------------------------------------------------------
   teagarden.net — text wordmark brand (this site has no logo image).
   Overrides the kit's `.brand img` rule; the brand is now plain text.
   teagarden.net — mot-symbole textuel (ce site n'a pas de logo).
   --------------------------------------------------------------------------- */
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-decoration: none; color: inherit; }
.brand:hover { color: var(--accent); }


/* ============================================================================
   teagarden.net — BUSINESS BRAND override (appended last → wins)
   Retunes the shared kit to the teagarden.net logo: deep forest-green ground,
   cream wordmark, yellow-lime accent (the logo's corner brackets).
   Retune la palette au logo teagarden.net : fond vert forêt, texte crème,
   accent jaune-vert.
   ========================================================================== */
:root {
  --tg-green-900:#0B3D06; --tg-green-800:#0E4A08; --tg-green-700:#135C0C; --tg-green-600:#1A6E11;
  --tg-cream:#EEF4E6; --tg-cream-2:#CBD9BC;
  --tg-lime:#D6E017; --tg-lime-bright:#E7F03A; --tg-lime-deep:#5B6E00;
}
:root, :root[data-theme="dark"] {
  --bg:var(--tg-green-900); --bg-2:#0E4A08; --bg-3:#135C0C;
  --ink:var(--tg-cream); --ink-dim:#C7D6B8; --muted:#8FA37E;
  --accent:var(--tg-lime); --accent-bright:var(--tg-lime-bright); --accent-blue:var(--tg-lime-bright);
  --line:rgba(238,244,230,0.14); --line-soft:rgba(238,244,230,0.06);
  --glow:rgba(214,224,23,0.12); --glow-blue:rgba(26,110,17,0.16); --focus:var(--tg-lime-bright);
}
:root[data-theme="light"] {
  --bg:#F3F6EC; --bg-2:#FFFFFF; --bg-3:#E9EFDC;
  --ink:#0B3D06; --ink-dim:#234A1C; --muted:#4C6140;
  --accent:var(--tg-lime-deep); --accent-bright:#45560A; --accent-blue:#2E7D14;
  --line:rgba(11,61,6,0.16); --line-soft:rgba(11,61,6,0.08);
  --glow:rgba(91,110,0,0.10); --glow-blue:rgba(46,125,20,0.08); --focus:var(--tg-lime-deep);
}
/* Brand mark: the real logo image, contained as a rounded badge. */
.brand { display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:60px; width:auto; border-radius:10px; display:block; box-shadow:0 4px 14px rgba(0,0,0,.35); }
:root[data-theme="light"] .brand img { box-shadow:0 4px 12px rgba(11,61,6,.20); }
/* Business home: service pillars. / Accueil : piliers de services. */
.home-lead { margin:1.4rem 0 0; }
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:2rem 0; }
.pillar { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.3rem; }
.pillar h3 { font-size:1.05rem; margin-bottom:.4rem; color:var(--accent); }
.pillar p { color:var(--ink-dim); font-size:.95rem; margin:0; }
.cta-row { margin:1.5rem 0 .5rem; display:flex; align-items:center; gap:.8rem 1.2rem; flex-wrap:wrap; }
.cta-note { color:var(--muted); font-size:.9rem; line-height:1.5; max-width:46ch; }