/* File: assets/css/global.css
   Platform Global Styles (B2B)
   Requires: assets/css/variables.css
*/

/* =========================================================
   Base / Minimal reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-ivory);
}

/* Media */
img, video{
  max-width: 100%;
  height: auto;
  display: block;
}
svg{ display: block; }

/* Links */
a{
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
a:hover{ color: var(--color-link-hover); }
a:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring-ink);
  border-radius: 6px;
}

/* Optional: underlined link utility */
.link-underline{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Selection (platform accent, not gold) */
::selection{
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* =========================================================
   Containers / Sections
   ========================================================= */
.container{
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: 0; /* ✅ desktop: pas de gouttière */
}
.container--narrow{
  width: min(100%, var(--container-narrow));
  margin-inline: auto;
  padding-inline: 0; /* ✅ desktop: pas de gouttière */
}

/* ✅ Mobile / petit écran: on remet la gouttière globale */
@media (max-width: 720px){
  .container,
  .container--narrow{
    padding-inline: var(--gutter);
  }
}

.section{
  padding-block: clamp(22px, 3vw, 44px);
}

/* =========================================================
   Typography (B2B: headings in sans by default)
   ========================================================= */
h1, h2, h3, h4, h5, h6{
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: var(--lh-tight);
  letter-spacing: .1px;
}
h1{ font-size: var(--fs-6); }
h2{ font-size: var(--fs-5); }
h3{ font-size: var(--fs-4); }
h4{ font-size: var(--fs-3); }
h5{ font-size: var(--fs-2); font-weight: var(--fw-semibold); }
h6{ font-size: var(--fs-1); font-weight: var(--fw-semibold); }

p{
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
small, .text-small{
  font-size: var(--fs-0);
  color: var(--color-muted);
}
strong{ font-weight: var(--fw-semibold); }

/* Lists */
ul, ol{
  margin: 0 0 var(--space-4);
  padding-left: 1.15em;
}
li{ margin: 0 0 var(--space-2); }

/* Divider */
hr{
  border: none;
  border-top: var(--border-1);
  margin: var(--space-6) 0;
}

/* Code (token-based) */
code, pre{ font-family: var(--font-mono); }
code{
  font-size: .95em;
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
pre{
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: auto;
  /* B2B: no permanent shadow */
  box-shadow: none;
}

/* Quote (token-based) */
blockquote{
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}

/* =========================================================
   Tables (no default shadow)
   ========================================================= */
table{
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
}
caption{
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-0);
}
th, td{
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
th{
  color: var(--color-ink);
  background: var(--color-surface-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-0);
  letter-spacing: .2px;
}
tr:last-child td{ border-bottom: none; }

/* =========================================================
   Forms — GLOBAL (B2B)
   ========================================================= */

/* Form layout helpers */
.form{
  display: grid;
  gap: var(--space-4);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-row--full{ grid-template-columns: 1fr; }
@media (max-width: 720px){
  .form-row{ grid-template-columns: 1fr; }
}

label{
  display: inline-block;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
  font-size: var(--fs-0);
}

/* Required mark utility */
.required{
  color: var(--color-danger);
  margin-left: 6px;
  font-weight: var(--fw-semibold);
}

/* Field wrapper */
.field{
  display: grid;
  gap: 8px;
}

/* Help / hint text */
.hint{
  font-size: var(--fs-0);
  color: var(--color-muted);
}

/* Base fields */
input, select, textarea{
  width: 100%;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-sm);
  padding: var(--input-pad-y) var(--input-pad-x);
  min-height: var(--input-height);
  outline: none;
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

textarea{
  min-height: 120px;
  resize: vertical;
}

input::placeholder, textarea::placeholder{
  color: var(--color-subtle);
}

/* Focus (accent, not gold) */
input:focus, select:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-line));
  box-shadow: var(--focus-ring);
}

/* Disabled */
input[disabled], select[disabled], textarea[disabled]{
  opacity: .65;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--color-surface) 55%, var(--color-ivory));
}

/* Readonly */
input[readonly], textarea[readonly]{
  background: var(--color-surface-2);
  border-color: var(--color-line);
}

/* Select arrow (neutral) */
select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--color-ink) 55%, transparent) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 55%, transparent) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Fieldset / legend */
fieldset{
  border: var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0 0 var(--space-5);
  background: var(--color-surface-2);
}
legend{
  padding: 0 var(--space-2);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

/* Checkboxes / radios (clean baseline) */
input[type="checkbox"],
input[type="radio"]{
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--color-accent);
}

/* Group for checkbox/radio + text */
.choice{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.choice label{
  margin: 0;
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

/* File input (neutral) */
input[type="file"]{
  padding: 10px 12px;
  min-height: auto;
}

/* Range (neutral) */
input[type="range"]{
  padding: 0;
  min-height: auto;
}

/* Validation states (optional classes) */
.is-valid input,
.is-valid select,
.is-valid textarea{
  border-color: color-mix(in srgb, var(--color-success) 55%, var(--color-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 18%, transparent);
}

.is-invalid input,
.is-invalid select,
.is-invalid textarea{
  border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* Error / success messages */
.form-message{
  border: var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
}
.form-message--success{
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-line));
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
}
.form-message--error{
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-line));
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}
.form-message--info{
  border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-line));
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
}

/* Autofill (Chrome) — keep consistent */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  transition: background-color 9999s ease-out 0s;
}

/* =========================================================
   Buttons (B2B: less shadow, accent primary)
   ========================================================= */
button, .btn, input[type="submit"]{
  appearance: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  letter-spacing: .2px;
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease);
  user-select: none;
  white-space: nowrap;
  
}
.btn:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring-ink);
}
.btn[disabled], .btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary (accent) */
.btn--primary{
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: none;
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-ink));
}

/* Secondary */
.btn--secondary{
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent);
  box-shadow: none;
}
.btn--secondary:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
  border-color: color-mix(in srgb, var(--color-ink) 26%, transparent);
}

/* Accent (gold reserved, no white text) */
.btn--accent{
  background: color-mix(in srgb, var(--color-gold) 12%, var(--color-surface));
  color: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  box-shadow: none;
}
.btn--accent:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
  background: color-mix(in srgb, var(--color-gold) 16%, var(--color-surface));
}

/* Danger */
.btn--danger{
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
  box-shadow: none;
}
.btn--danger:hover{
  background: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  box-shadow: var(--shadow-xs);
}

/* =========================================================
   Surfaces / Cards (no default shadow)
   ========================================================= */
.card{
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: clamp(14px, 2vw, 18px);
}
.card--soft{ background: var(--color-surface-2); }

/* =========================================================
   Badges / Chips
   ========================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--chip-height);
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-0);
  font-weight: var(--fw-semibold);
  letter-spacing: .2px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
}
.badge--sage{
  border-color: color-mix(in srgb, var(--color-sage) 40%, transparent);
  background: color-mix(in srgb, var(--color-sage) 10%, transparent);
}
.badge--gold{
  border-color: color-mix(in srgb, var(--color-gold) 45%, transparent);
  background: color-mix(in srgb, var(--color-gold) 10%, transparent);
}

/* =========================================================
   Utilities
   ========================================================= */
.text-muted{ color: var(--color-muted) !important; }
.text-subtle{ color: var(--color-subtle) !important; }
.text-ink{ color: var(--color-ink) !important; }

.text-center{ text-align: center !important; }
.text-right{ text-align: right !important; }

.stack{ display: grid; gap: var(--space-4); }
.row{ display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.divider{
  height: 1px;
  background: var(--color-line);
  margin: var(--space-5) 0;
}

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