/* shared/design.css — SOURCE DE VÉRITÉ du design du site vitrine (home v2, /projects/*, pages du shell SPA).
   Contient : tokens (couleurs, polices, tailles de texte, espacements, grille 6 colonnes, méta-grille verticale),
   utilitaires de grille, styles de texte, et composants de base (liens, boutons, champs, listes déroulantes, badges).
   Charte : pas de dégradé, pas d'ombre, rayon ≤ 4 px, un seul ocre par vue, Host Grotesk.
   Ce fichier se charge AVANT toute autre feuille de style (style.css l'importe, new.css et projects.css s'appuient dessus).
   Pour changer une valeur du design, c'est ICI et nulle part ailleurs. */

@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Spectral:ital,wght@0,400;0,500;0,600&display=swap');

:root {
  /* ---- Couleurs ---- */
  --blanc: #FFFFFF;
  --blanc-focal: #F8F6F3;
  --noir-focal: #141210;
  --gris-moyen: #6B6560;
  --gris-clair: #D4D0CB;
  --gris-tres-clair: #ECEAE7;
  --ocre-focal: #C4903A;
  --vert-validation: #4A8C6A;
  --bleu-info: #3A6AC4;
  --rouge-alerte: #C44A3A;
  --color-background: var(--blanc-focal);   /* FOND DE PAGE de tout le site : Blanc Focal (#F8F6F3). --blanc (#FFF) reste pour les champs et la fenêtre de démo */

  /* ---- Typographie ---- */
  --font-primary: 'Host Grotesk', 'Helvetica Neue', sans-serif;
  --font-secondary: 'Spectral', 'Times New Roman', serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --leading-tight: 1.2;
  --leading-base: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ---- Espacements ---- */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  /* ---- GRILLE : 6 colonnes, marges 36, gouttière 12 (mobile : 20 / 8) ---- */
  --columns: 6;
  --margin: 36px;
  --gutter: 12px;
  --max-width: 1280px;

  /* ---- MÉTA-GRILLE verticale : hauteurs, sections et espacements de blocs sont des multiples de --u ---- */
  --u: 48px;

  /* ---- Formes, filets, mouvement ---- */
  --radius-badge: 4px;
  --border-separator: 1px solid var(--gris-clair);
  --border-separator-blank: 1px solid transparent;
  --border-accent: 2px solid var(--ocre-focal);
  --border-accent-blank: 2px solid transparent;
  --focal-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --focal-morph: cubic-bezier(0.76, 0, 0.24, 1);
}

@media (max-width: 767px) {
  :root { --margin: 20px; --gutter: 8px; }
}


html, body { background: var(--blanc-focal); }

/* ===== GRILLE ===== */

/* Conteneur : applique les marges latérales de la grille */
.fp-container { width: 100%; padding-left: var(--margin); padding-right: var(--margin); }

/* Grille 6 colonnes (à poser dans un .fp-container ou dans un bloc déjà inscrit dans les marges) */
.fp-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.fp-span-1 { grid-column-end: span 1; } .fp-span-2 { grid-column-end: span 2; } .fp-span-3 { grid-column-end: span 3; }
.fp-span-4 { grid-column-end: span 4; } .fp-span-5 { grid-column-end: span 5; } .fp-span-6 { grid-column-end: span 6; }
.fp-start-1 { grid-column-start: 1; } .fp-start-2 { grid-column-start: 2; } .fp-start-3 { grid-column-start: 3; }
.fp-start-4 { grid-column-start: 4; } .fp-start-5 { grid-column-start: 5; } .fp-start-6 { grid-column-start: 6; }
/* Mobile : tout passe pleine largeur, sauf si .fp-keep */
@media (max-width: 767px) {
  .fp-grid > [class*="fp-span-"]:not(.fp-keep) { grid-column: 1 / -1; }
}

/* Largeur de n colonnes (hors grille CSS, ex. une image flottante) : span(n) = (100% - 5 gouttières) / 6 × n + (n - 1) gouttières */
/* → calc((100% - (var(--columns) - 1) * var(--gutter)) / var(--columns) * N + (N - 1) * var(--gutter)) */

/* Dev : touche G (home) ou classe .fp-show-grid sur <body> pour voir les colonnes */
.fp-show-grid::before {
  content: '';
  position: fixed; inset: 0 var(--margin); z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(to right, rgba(196,144,58,.12) 0, rgba(196,144,58,.12) calc((100% - 5 * var(--gutter)) / 6), transparent calc((100% - 5 * var(--gutter)) / 6), transparent calc((100% - 5 * var(--gutter)) / 6 + var(--gutter)));
}


/* ===== TEXTE ===== */

.fp-h1 { font-family: var(--font-primary); font-weight: 300; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--noir-focal); }
.fp-h2 { font-family: var(--font-primary); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--noir-focal); }
.fp-h3 { font-family: var(--font-primary); font-weight: 500; font-size: var(--text-base); line-height: var(--leading-tight); color: var(--noir-focal); }
.fp-lead { font-family: var(--font-primary); font-weight: 300; font-size: var(--text-xl); line-height: var(--leading-base); color: var(--noir-focal); }
.fp-body { font-size: var(--text-lg); line-height: var(--leading-base); color: var(--noir-focal); }
.fp-text { font-size: var(--text-base); line-height: var(--leading-base); color: var(--noir-focal); }
.fp-small { font-size: var(--text-sm); line-height: var(--leading-base); color: var(--gris-moyen); }
.fp-caption { font-size: var(--text-xs); line-height: var(--leading-base); color: var(--gris-moyen); }
.fp-label { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--gris-moyen); }
.fp-muted { color: var(--gris-moyen); }
.fp-serif { font-family: var(--font-secondary); }
@media (max-width: 767px) {
  .fp-h1 { font-size: var(--text-2xl); }
}
@media (max-width: 480px) {
  .fp-h1 { font-size: var(--text-xl); }
  .fp-body { font-size: var(--text-base); }
}


/* ===== LIENS ===== */

.fp-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fp-link:hover { text-decoration-color: var(--ocre-focal); }
.fp-link--accent { color: var(--ocre-focal); font-weight: 500; text-decoration: none; }
.fp-link--accent:hover { text-decoration: underline; text-underline-offset: 3px; }
.fp-link--muted { color: var(--gris-moyen); text-decoration: none; }
.fp-link--muted:hover { color: var(--noir-focal); }
.fp-link:focus-visible, .fp-link--accent:focus-visible, .fp-link--muted:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 4px; }


/* ===== BOUTONS ===== (CTA : fond blanc #FFF, texte noir, aucun arrondi) */

.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  height: 44px; padding: 0 var(--space-m);
  font-family: var(--font-primary); font-size: var(--text-base); font-weight: 500; line-height: 1;
  color: var(--noir-focal); background: var(--blanc);
  border: 1px solid var(--blanc); border-radius: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--focal-snap), color .2s var(--focal-snap), border-color .2s var(--focal-snap), opacity .2s var(--focal-snap);
}
.fp-btn i[class^="icon-"] { font-size: 1.15em; line-height: 1; } /* flèches et icônes : Lucide (police lucide-static) */
.fp-btn:hover { background: var(--noir-focal); border-color: var(--noir-focal); color: var(--blanc-focal); }
.fp-btn:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 3px; }
.fp-btn--secondary { color: var(--noir-focal); background: transparent; border-color: var(--noir-focal); }
.fp-btn--secondary:hover { background: var(--noir-focal); color: var(--blanc-focal); }
.fp-btn--ghost { color: var(--noir-focal); background: transparent; border-color: var(--gris-clair); }
.fp-btn--ghost:hover { background: var(--gris-tres-clair); border-color: var(--gris-clair); color: var(--noir-focal); }
.fp-btn--text { height: auto; padding: 0; color: var(--noir-focal); background: none; border: 0; }
.fp-btn--text:hover { background: none; color: var(--ocre-focal); }
.fp-btn--sm { height: 32px; padding: 0 var(--space-s); font-size: var(--text-sm); }
.fp-btn--block { display: flex; width: 100%; }
.fp-btn:disabled, .fp-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }


/* ===== CHAMPS : inputs, textarea, select ===== */

.fp-field { display: flex; flex-direction: column; gap: 6px; }
.fp-field > label { font-size: var(--text-sm); color: var(--gris-moyen); }
.fp-hint { font-size: var(--text-xs); color: var(--gris-moyen); }
.fp-error { font-size: var(--text-xs); color: var(--rouge-alerte); }

.fp-input, .fp-textarea, .fp-select {
  width: 100%; height: 44px; padding: 0 var(--space-s);
  font-family: var(--font-primary); font-size: var(--text-base); line-height: 1.4; color: var(--noir-focal);
  background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--radius-badge);
  outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--focal-snap);
}
.fp-textarea { height: auto; min-height: 120px; padding: 12px var(--space-s); resize: vertical; }
.fp-input::placeholder, .fp-textarea::placeholder { color: var(--gris-moyen); opacity: .7; }
.fp-input:hover, .fp-textarea:hover, .fp-select:hover { border-color: var(--gris-moyen); }
.fp-input:focus, .fp-textarea:focus, .fp-select:focus { border-color: var(--noir-focal); }
.fp-input:focus-visible, .fp-textarea:focus-visible, .fp-select:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 2px; }
.fp-input:disabled, .fp-textarea:disabled, .fp-select:disabled { background: var(--gris-tres-clair); color: var(--gris-moyen); cursor: not-allowed; }
.fp-input.is-invalid, .fp-textarea.is-invalid, .fp-select.is-invalid { border-color: var(--rouge-alerte); }

/* <select> natif : flèche du design (SVG en data URI, pas de dégradé) */
.fp-select {
  padding-right: calc(var(--space-s) + 24px); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23141210' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-s) center; background-size: 12px 8px;
}

/* Cases à cocher / boutons radio */
.fp-check { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-base); cursor: pointer; }
.fp-check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 18px; background: var(--blanc); border: 1px solid var(--gris-moyen); border-radius: 2px; display: grid; place-items: center; cursor: pointer; }
.fp-check input[type="radio"] { border-radius: 50%; }
.fp-check input:checked { background: var(--noir-focal); border-color: var(--noir-focal); }
.fp-check input:checked::after { content: ''; width: 8px; height: 8px; background: var(--blanc); }
.fp-check input[type="radio"]:checked::after { border-radius: 50%; }
.fp-check input:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 2px; }


/* ===== LISTE DÉROULANTE PERSONNALISÉE (.fp-dropdown) =====
   <div class="fp-dropdown is-open"><button class="fp-dropdown-toggle">Choix</button>
     <ul class="fp-dropdown-menu"><li><button class="fp-dropdown-item is-selected">…</button></li></ul></div> */

.fp-dropdown { position: relative; display: inline-block; }
.fp-dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  width: 100%; height: 44px; padding: 0 var(--space-s);
  font-family: var(--font-primary); font-size: var(--text-base); color: var(--noir-focal);
  background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--radius-badge); cursor: pointer;
  transition: border-color .2s var(--focal-snap);
}
.fp-dropdown-toggle::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid var(--noir-focal); border-bottom: 1.5px solid var(--noir-focal); transform: rotate(45deg);
  transition: transform .2s var(--focal-snap);
}
.fp-dropdown-toggle:hover { border-color: var(--gris-moyen); }
.fp-dropdown.is-open .fp-dropdown-toggle { border-color: var(--noir-focal); }
.fp-dropdown.is-open .fp-dropdown-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.fp-dropdown-toggle:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 2px; }
.fp-dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 100%; max-height: 320px; overflow-y: auto;
  list-style: none; padding: 4px 0; background: var(--blanc); border: 1px solid var(--noir-focal); border-radius: var(--radius-badge);
  display: none;
}
.fp-dropdown.is-open .fp-dropdown-menu { display: block; }
.fp-dropdown-item {
  display: block; width: 100%; padding: 10px var(--space-s); text-align: left; white-space: nowrap;
  font-family: var(--font-primary); font-size: var(--text-base); color: var(--gris-moyen); background: none; border: 0; cursor: pointer;
}
.fp-dropdown-item:hover, .fp-dropdown-item:focus-visible { background: var(--gris-tres-clair); color: var(--noir-focal); outline: none; }
.fp-dropdown-item.is-selected { color: var(--noir-focal); font-weight: 500; }


/* ===== BADGES, FILETS ===== */

.fp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; border-radius: var(--radius-badge); color: var(--noir-focal); background: var(--gris-tres-clair); }
.fp-badge.is-positive { color: var(--vert-validation); background: rgba(74, 140, 106, .1); }
.fp-badge.is-info { color: var(--bleu-info); background: rgba(58, 106, 196, .1); }
.fp-badge.is-alert { color: var(--rouge-alerte); background: rgba(196, 74, 58, .1); }
.fp-rule { border: 0; border-top: 1px solid var(--noir-focal); }
.fp-rule--light { border-top-color: var(--gris-clair); }


/* ===== GRAIN ANALOGIQUE : texture très subtile sur tout le fond du site (statique, sans animation) =====
   Bruit fractal généré en SVG (data URI, aucune requête), posé en fixe par-dessus la page, jamais cliquable.
   Réglage : opacity (0 = aucun grain) et background-size (taille du grain). */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: .07;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .07 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}