/* =====================================================================
   TERRA GLOBAL TRADING — mode clair / sombre du site public
   Chargé par toutes les pages publiques. Le mode sombre s'active avec
   <html data-theme="dark"> : choix du visiteur (bouton ☀/☾, mémorisé
   dans localStorage « tgt-theme »), sinon préférence de l'appareil.
   Toutes les règles sont préfixées :root[data-theme="dark"] pour passer
   devant les styles de chaque page, quel que soit leur ordre.
   ===================================================================== */

/* ---- bouton ☀/☾ (dans l'en-tête, visible aussi sur mobile) ---- */
.theme-btn{width:40px;height:40px;flex:none;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.theme-btn:hover{border-color:var(--green);color:var(--green)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
html{transition:background-color .25s}

/* ---- couleurs du mode sombre ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --green:#9CC27A;              /* vert « texte » : sur-titres, liens, icônes */
  --green-d:#B9D99B;
  --green-t:rgba(156,194,122,.13);
  --green-t2:rgba(156,194,122,.2);
  --ink:#E6EEE4;--ink-2:#AAB9A9;--ink-3:#7F907F;
  --paper:#0F1813;--paper-2:#121C16;--white:#0B120E;
  --line:rgba(200,228,204,.11);--line-2:rgba(200,228,204,.22);
  --shadow:0 18px 40px -22px rgba(0,0,0,.75);
  --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 14px 34px -12px rgba(0,0,0,.55);
  --shadow-lg:0 34px 70px -30px rgba(0,0,0,.8);
  --d-surface:#16211A;--d-surface-2:#1B2820;--d-solid:#4F7432;
}
:root[data-theme="dark"] body{background:var(--white);color:var(--ink)}
:root[data-theme="dark"] ::selection{background:rgba(156,194,122,.3)}

/* en-tête, menu mobile */
:root[data-theme="dark"] .hdr{background:rgba(11,18,14,.86);border-bottom-color:var(--line)}
:root[data-theme="dark"] .hdr.scrolled{background:rgba(11,18,14,.96);box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}
:root[data-theme="dark"] .hdr .logo img,:root[data-theme="dark"] .modal-logo{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .msheet{background:var(--d-surface)}
:root[data-theme="dark"] .msheet .btn{color:#fff}
:root[data-theme="dark"] .burger{border-color:var(--line-2)}

/* boutons */
:root[data-theme="dark"] .btn-outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
:root[data-theme="dark"] .btn-outline:hover{border-color:var(--green);color:var(--green)}

/* fenêtre de connexion / inscription, formulaires */
:root[data-theme="dark"] .modal-ov{background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .modal-card{background:var(--d-surface);box-shadow:0 30px 80px -20px rgba(0,0,0,.85)}
:root[data-theme="dark"] .modal-x:hover{background:var(--d-surface-2)}
:root[data-theme="dark"] .tabs{background:var(--paper)}
:root[data-theme="dark"] .tab.on{background:var(--d-surface-2);color:var(--green);box-shadow:none}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .cform input,:root[data-theme="dark"] .cform textarea,:root[data-theme="dark"] .cform select,
:root[data-theme="dark"] .acard .field input,:root[data-theme="dark"] .acard .field textarea{background:var(--paper-2);color:var(--ink);border-color:var(--line-2)}
:root[data-theme="dark"] .acard .field input:disabled{background:var(--paper);color:var(--ink-3)}
:root[data-theme="dark"] .field input:focus,:root[data-theme="dark"] .field select:focus,:root[data-theme="dark"] .cform input:focus,:root[data-theme="dark"] .cform textarea:focus{box-shadow:0 0 0 3px rgba(156,194,122,.2)}
:root[data-theme="dark"] .amsg.err,:root[data-theme="dark"] .cresult.err,:root[data-theme="dark"] .cmsg.err,:root[data-theme="dark"] .sb.bad{background:rgba(242,139,130,.14);color:#F28B82}
:root[data-theme="dark"] .cmsg.ok{background:rgba(156,194,122,.14);color:#B9D99B}
:root[data-theme="dark"] .sb.wait{background:rgba(227,167,94,.15);color:#E3A75E}
:root[data-theme="dark"] .docstat.err{color:#F28B82}

/* ---------- accueil ---------- */
:root[data-theme="dark"] .hero::before{background:radial-gradient(760px 520px at 82% 42%,rgba(110,143,58,.22),transparent 62%),radial-gradient(620px 380px at 0% 0%,rgba(228,94,43,.08),transparent 60%),linear-gradient(180deg,#0F1813,var(--white) 78%)}
:root[data-theme="dark"] .hero h1{background:linear-gradient(120deg,#F1F6EE 0%,#CFE3BC 55%,#A9CD88 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .halo{background:radial-gradient(circle,rgba(110,143,58,.38),rgba(110,143,58,0) 62%)}
:root[data-theme="dark"] .ring ellipse{stroke:rgba(156,194,122,.38)}
:root[data-theme="dark"] .fic:not(.g):not(.w){background:rgba(22,33,26,.78);border-color:rgba(255,255,255,.12);color:#B9D99B;box-shadow:0 20px 40px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
:root[data-theme="dark"] .hchip{background:rgba(22,33,26,.82);border-color:rgba(255,255,255,.12);color:var(--ink)}
:root[data-theme="dark"] .values{background:var(--white)}
:root[data-theme="dark"] .values .v{background:var(--d-surface)}
:root[data-theme="dark"] .values .v:hover{background:var(--d-surface-2)}
:root[data-theme="dark"] .about .card{background:var(--d-surface)}
:root[data-theme="dark"] .gammes{background:linear-gradient(180deg,var(--paper),var(--white))}
:root[data-theme="dark"] .gc{background:var(--d-surface)}
:root[data-theme="dark"] .refs{background:var(--white)}
:root[data-theme="dark"] .it{background:radial-gradient(120% 80% at 50% 0%,#202E24,var(--d-surface))}
:root[data-theme="dark"] .aud a{background:var(--d-surface)}
:root[data-theme="dark"] .aud a .ai{background:var(--d-surface-2)}
:root[data-theme="dark"] .aud a:hover{background:var(--d-surface-2)}
:root[data-theme="dark"] .demarche{background:linear-gradient(180deg,var(--paper),var(--white))}
:root[data-theme="dark"] .steps .n{background:var(--d-surface);box-shadow:0 0 0 7px var(--paper)}
:root[data-theme="dark"] .engage::after{border-color:rgba(156,194,122,.22)}
:root[data-theme="dark"] .cta .box{background-color:#3E5C27}
:root[data-theme="dark"] .devis{background:var(--d-surface)}

/* ---------- catalogue ---------- */
:root[data-theme="dark"] .chip,:root[data-theme="dark"] .catsearch,:root[data-theme="dark"] .pcard,:root[data-theme="dark"] .catempty,:root[data-theme="dark"] .cart-panel{background:var(--d-surface)}
:root[data-theme="dark"] .chip.on{background:var(--d-solid);border-color:var(--d-solid);color:#fff}
/* photos produits (fond blanc) : posées sur une « assiette » claire et douce */
:root[data-theme="dark"] .pimg,:root[data-theme="dark"] .favimg{background:#E9EEE4}
:root[data-theme="dark"] .pimg img,:root[data-theme="dark"] .favimg img{mix-blend-mode:multiply}
:root[data-theme="dark"] .favbtn,:root[data-theme="dark"] .favrm{background:rgba(22,33,26,.92);color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.4)}
:root[data-theme="dark"] .qstep button,:root[data-theme="dark"] .ci-q button{background:var(--d-surface-2)}
:root[data-theme="dark"] .qin,:root[data-theme="dark"] .ci-q input,:root[data-theme="dark"] .ci-q span{background:var(--d-surface-2);color:var(--ink)}
:root[data-theme="dark"] .cart-fab{background:var(--d-solid)}
:root[data-theme="dark"] .cart-fab:hover{background:#3E5C27}
:root[data-theme="dark"] .cart-ov{background:rgba(0,0,0,.6)}

/* ---------- mon compte ---------- */
:root[data-theme="dark"] .acct-tabs,:root[data-theme="dark"] .acard,:root[data-theme="dark"] .favc{background:var(--d-surface)}
:root[data-theme="dark"] .atab.on{background:var(--d-solid);color:#fff}

/* =====================================================================
   OPTIMISATIONS MOBILE — communes à toutes les pages publiques
   (préfixe :root pour passer devant le CSS de chaque page)
   ===================================================================== */
@media (max-width:760px){
  /* iPhone : un champ en dessous de 16px déclenche un zoom à chaque saisie */
  :root input:not([type=checkbox]):not([type=radio]):not([type=file]),:root select,:root textarea{font-size:16px!important}
  /* bandeau du haut : numéro cliquable + FR/EN plus faciles à toucher */
  :root .topline .row{height:42px}
  :root .topline .r .contact-lk[href^="tel:"]{display:inline-flex;align-items:center;font-size:12.5px}
  :root .lang button{padding:6px 12px;font-size:12px}
  /* en-tête plus compact */
  :root .hdr .row{height:64px;gap:10px}
  :root .hdr .logo img{height:38px}
  :root .theme-btn,:root .burger{width:42px;height:42px}
  /* menu : grandes zones tactiles */
  :root .msheet a,:root .msheet button{padding:15px 4px;font-size:16px}
  :root .msheet .ms-tel{display:flex;align-items:center;gap:10px;color:var(--green);font-weight:700}
  :root .msheet .ms-tel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* pied de page compact : 2 colonnes de liens */
  :root footer{padding:46px 0 26px}
  :root .fgrid{grid-template-columns:1fr 1fr!important;gap:26px 18px;padding-bottom:30px}
  :root .fbrand{grid-column:1/-1}
  :root .fcol a{padding:8px 0}
  :root .fbrand .co a{white-space:nowrap}
  :root .legal{font-size:10.5px;line-height:1.75}
  :root .fbotrow{flex-direction:column;gap:6px}
  :root .modal{padding:12px}
}
@media (min-width:761px){ :root .msheet .ms-tel{display:none} }
:root[data-theme="dark"] .mbar{background:rgba(18,28,22,.94);border-color:var(--line-2);box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
:root[data-theme="dark"] .gdots i.on{background:#9CC27A}