/* WYP Consulting — Design System · Fondations v1
   Bibliothèque de design tokens. Déposer ce fichier et le lier :
   <link rel="stylesheet" href="wyp-design-system.css">
   Polices : Josefin Sans (titres) + Jost (corps, web). Futura = police d'impression. */

@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/JosefinSans-400.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/JosefinSans-600.woff2') format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/JosefinSans-700.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Jost-500.woff2') format('woff2')}

:root{
  /* Couleurs de marque */
  --wyp-accent:#5CBA70; --wyp-green-mid:#40A34D; --wyp-primary:#2B9135;
  --wyp-green-deep:#137547; --wyp-green-dark:#064B29; --wyp-ink:#333333;
  --wyp-cream:#F6F3EC; --wyp-error:#C0392B;
  /* Neutres (créés) */
  --wyp-white:#FFFFFF; --wyp-neutral-100:#F2F2EF; --wyp-neutral-200:#E5E6E2;
  --wyp-neutral-300:#CFD1CC; --wyp-neutral-400:#A7AAA4; --wyp-neutral-500:#7D807A;
  --wyp-neutral-600:#585B55; --wyp-neutral-700:#3D403B;
  /* Typographie */
  --font-title:'Josefin Sans',system-ui,sans-serif;
  --font-body:'Jost','Futura',system-ui,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.25rem;
  --fs-xl:1.5rem; --fs-2xl:1.875rem; --fs-3xl:2.5rem; --fs-4xl:3.5rem;
  /* Espacements */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  /* Rayons & ombres */
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(6,75,41,.06);
  --shadow-md:0 4px 16px rgba(6,75,41,.08);
  --shadow-lg:0 12px 40px rgba(6,75,41,.10);
}

/* Styles de base (fondation, pas de composant) */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-base);
  line-height:1.6;color:var(--wyp-ink);background:var(--wyp-white);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:600;line-height:1.15;
  color:var(--wyp-green-dark);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-4xl)} h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-2xl)} h4{font-size:var(--fs-xl)}
p{margin:0 0 var(--space-4)}
a{color:var(--wyp-green-deep)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--wyp-neutral-100);padding:.1em .35em;border-radius:6px}
/* Utilitaires de fondation */
.u-cream{background:var(--wyp-cream)}
.u-title{font-family:var(--font-title)}
.u-body{font-family:var(--font-body)}

/* =====================================================================
   COMPOSANTS (v2) — classes .wyp-* bâties sur les fondations ci-dessus
   ===================================================================== */

/* Boutons */
.wyp-btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);
  font-size:var(--fs-base);font-weight:500;line-height:1;cursor:pointer;border:none;
  border-radius:var(--radius-pill);padding:var(--space-3) var(--space-5);transition:.15s;text-decoration:none}
.wyp-btn--primary{background:var(--wyp-primary);color:#fff}
.wyp-btn--primary:hover{background:var(--wyp-green-deep)}
.wyp-btn--secondary{background:var(--wyp-neutral-100);color:var(--wyp-green-dark)}
.wyp-btn--secondary:hover{background:var(--wyp-neutral-200)}
.wyp-btn--ghost{background:transparent;color:var(--wyp-green-deep)}
.wyp-btn--ghost:hover{background:var(--wyp-neutral-100)}
.wyp-btn--sm{font-size:var(--fs-sm);padding:var(--space-2) var(--space-4)}
.wyp-btn--lg{font-size:var(--fs-lg);padding:var(--space-4) var(--space-6)}
.wyp-btn:focus-visible{outline:2px solid var(--wyp-primary);outline-offset:2px}
.wyp-btn:disabled,.wyp-btn.is-disabled{opacity:.5;cursor:not-allowed}

/* Cartes */
.wyp-card{background:var(--wyp-white);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-6)}
.wyp-card--cream{background:var(--wyp-cream)}
.wyp-card__header{font-family:var(--font-title);font-weight:600;color:var(--wyp-green-dark);
  font-size:var(--fs-lg);margin-bottom:var(--space-4)}

/* Formulaires */
.wyp-field{margin-bottom:var(--space-4)}
.wyp-label{display:block;font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);color:var(--wyp-ink);margin-bottom:var(--space-2)}
.wyp-input,.wyp-textarea,.wyp-select{width:100%;font-family:var(--font-body);font-size:var(--fs-base);
  color:var(--wyp-ink);background:var(--wyp-white);border:none;border-radius:var(--radius-sm);
  padding:var(--space-3);box-shadow:inset 0 0 0 1px var(--wyp-neutral-300)}
.wyp-textarea{min-height:90px;resize:vertical}
.wyp-input:focus,.wyp-textarea:focus,.wyp-select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--wyp-primary)}
.wyp-input:disabled,.wyp-textarea:disabled,.wyp-select:disabled{background:var(--wyp-neutral-100);cursor:not-allowed}
.wyp-field.is-error .wyp-input,.wyp-field.is-error .wyp-textarea,.wyp-field.is-error .wyp-select{box-shadow:inset 0 0 0 2px var(--wyp-error)}
.wyp-field.is-success .wyp-input,.wyp-field.is-success .wyp-textarea,.wyp-field.is-success .wyp-select{box-shadow:inset 0 0 0 2px var(--wyp-green-deep)}
.wyp-help{font-size:var(--fs-sm);color:var(--wyp-neutral-600);margin-top:var(--space-2)}
.wyp-field.is-error .wyp-help{color:var(--wyp-error)}
.wyp-field.is-success .wyp-help{color:var(--wyp-green-deep)}
.wyp-check{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.wyp-check input{width:18px;height:18px;accent-color:var(--wyp-primary)}
.wyp-switch{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle}
.wyp-switch input{opacity:0;width:0;height:0}
.wyp-switch .track{position:absolute;inset:0;background:var(--wyp-neutral-300);border-radius:var(--radius-pill);transition:.15s}
.wyp-switch .track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.wyp-switch input:checked + .track{background:var(--wyp-primary)}
.wyp-switch input:checked + .track::before{transform:translateX(20px)}

/* Tableaux */
.wyp-table-wrap{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.wyp-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--wyp-white)}
.wyp-table thead th{background:var(--wyp-green-deep);color:#fff;font-family:var(--font-title);font-weight:600;text-align:left;padding:var(--space-3) var(--space-4)}
.wyp-table tbody td{padding:var(--space-3) var(--space-4)}
.wyp-table tbody tr:nth-child(even){background:var(--wyp-neutral-100)}

/* Badges */
.wyp-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);
  font-size:var(--fs-xs);font-weight:500;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);line-height:1.4}
.wyp-badge--neutral{background:var(--wyp-neutral-200);color:var(--wyp-neutral-700)}
.wyp-badge--success{background:var(--wyp-accent);color:var(--wyp-green-dark)}
.wyp-badge--info{background:var(--wyp-green-deep);color:#fff}
.wyp-badge--dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}

/* Navigation */
.wyp-navbar{display:flex;align-items:center;gap:var(--space-5);background:var(--wyp-white);box-shadow:var(--shadow-sm);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5)}
.wyp-navbar a{text-decoration:none;color:var(--wyp-neutral-600);font-size:var(--fs-sm)}
.wyp-navbar a:hover{color:var(--wyp-primary)}
.wyp-navbar a.is-active{color:var(--wyp-green-dark);font-weight:600}
.wyp-tabs{display:flex;gap:var(--space-2)}
.wyp-tab{padding:var(--space-3) var(--space-4);cursor:pointer;color:var(--wyp-neutral-600);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:transparent}
.wyp-tab:hover{color:var(--wyp-primary)}
.wyp-tab.is-active{color:var(--wyp-green-dark);font-weight:600;box-shadow:inset 0 -3px 0 var(--wyp-primary)}