/* ==========================================================================
   BEZZINA Solutions — SOCLE PARTAGÉ
   Chargé par le site vitrine ET l'espace client, avant leur feuille propre.
   ==========================================================================

   ─── CE QUI VIT ICI, ET CE QUI N'Y VIT PAS ──────────────────────────────

   ICI : les PRIMITIVES, c'est-à-dire ce qui n'appartient à aucune des deux
   applications en particulier — jetons de couleur, réinitialisation,
   typographie, boutons, champs de formulaire, badges, icônes, utilitaires
   d'accessibilité.

   PAS ICI : les composants propres à une application. La coquille du site
   vitrine, sa page d'accueil, son catalogue restent dans styles.css ; la
   messagerie et la barre d'onglets de l'espace client restent dans
   espace-client/styles.css. Y remonter un composant utilisé d'un seul côté
   ferait grossir la feuille des deux.

   ⚠️ TOUTE MODIFICATION ICI TOUCHE LES DEUX APPLICATIONS. Vérifier les
   deux avant de committer — c'est le prix de ne plus avoir trois palettes
   qui divergent.

   Le CRM (GBS/styles.css) reste à part : il a sa densité réglable et ses
   deux thèmes stockés en base, et il se lit huit heures par jour. Il
   partage le VOCABULAIRE de jetons, pas le fichier.

   ─── LES TROIS NIVEAUX ──────────────────────────────────────────────────

   1. palette brute      --p-*          des couleurs, sans intention
   2. jetons sémantiques --surface-*…   un rôle, jamais une couleur
   3. composants                        n'utilisent QUE le niveau 2
   ========================================================================== */


/*  ─── NIVEAU 1 : palette brute ────────────────────────────────────────
    Les composants ne doivent JAMAIS s'en servir directement, à une
    exception près : les bandeaux volontairement sombres, qui ne sont pas
    des surfaces mais un parti pris d'identité.                        */
:root {
  --p-ink-950: #05070a;
  --p-ink-900: #0b0e13;
  --p-ink-800: #141922;
  --p-ink-700: #1e2530;
  --p-ink-600: #2a323f;

  --p-blue-900: #16304f;
  --p-blue-800: #234e91;
  --p-blue-700: #2d63b8;
  --p-blue-600: #3a7bd5;
  --p-blue-400: #7ba9e6;
  --p-blue-200: #b8d0f5;
  --p-blue-100: #eaf1fb;
  --p-blue-50:  #f4f8fe;

  --p-gold-700: #6b551b;
  --p-gold-600: #7d6420;
  --p-gold-500: #c9a84c;
  --p-gold-300: #e4cf92;
  --p-gold-100: #f7f0da;

  --p-gray-900: #111827;
  --p-gray-800: #1f2937;
  --p-gray-700: #374151;
  --p-gray-600: #4b5563;
  --p-gray-500: #6b7280;
  --p-gray-400: #9ca3af;
  --p-gray-300: #d1d5db;
  --p-gray-200: #e5ecf5;
  --p-gray-100: #f3f4f6;
  --p-gray-50:  #f8fafc;
  --p-white:      #ffffff;
  --p-white-soft: #fafbfc;

  --p-green-700: #15803d;
  --p-green-600: #16a34a;
  --p-green-400: #4ade80;
  --p-green-200: #bbf7d0;
  --p-green-100: #ecfdf5;

  --p-red-700: #b91c1c;
  --p-red-600: #dc2626;
  --p-red-400: #f87171;
  --p-red-200: #fecaca;
  --p-red-100: #fef2f2;

  --p-amber-700: #92400e;
  --p-amber-600: #d97706;
  --p-amber-400: #fbbf24;
  --p-amber-200: #fde68a;
  --p-amber-100: #fef3c7;
}


/*  ─── NIVEAU 2 : jetons sémantiques — thème CLAIR ──────────────────────
    Ce sont EUX que les composants utilisent. Chaque jeton dit un rôle.

    ⚠️ Les variantes `-on-soft` sont les SEULES destinées à être LUES.
    `--ok`, `--warn` et `--danger` sont des couleurs de FOND : employées
    comme couleur de texte, elles passent sous le minimum lisible.     */
:root {
  color-scheme: light;

  --surface-page:    var(--p-white-soft);
  --surface-card:    var(--p-white);
  --surface-raised:  var(--p-white);
  --surface-sunken:  var(--p-gray-50);
  --surface-hover:   var(--p-gray-50);
  --surface-inverse: var(--p-ink-900);

  --border:        var(--p-gray-200);
  --border-strong: var(--p-gray-300);
  --border-subtle: var(--p-gray-100);

  --text:        var(--p-gray-700);
  --text-strong: var(--p-gray-900);
  --text-muted:  var(--p-gray-500);
  --text-invert: var(--p-white);

  --accent:         var(--p-blue-700);
  --accent-hover:   var(--p-blue-800);
  --accent-text:    var(--p-white);
  --accent-soft:    var(--p-blue-100);
  --accent-on-soft: var(--p-blue-800);
  --accent-glow:    rgba(45, 99, 184, 0.20);

  --brand:         var(--p-gold-500);
  --brand-soft:    var(--p-gold-100);
  --brand-on-soft: var(--p-gold-600);

  --ok:         var(--p-green-600);
  --ok-soft:    var(--p-green-100);
  --ok-border:  var(--p-green-200);
  --ok-on-soft: var(--p-green-700);

  --warn:         var(--p-amber-600);
  --warn-soft:    var(--p-amber-100);
  --warn-border:  var(--p-amber-200);
  --warn-on-soft: var(--p-amber-700);

  --danger:         var(--p-red-600);
  --danger-soft:    var(--p-red-100);
  --danger-border:  var(--p-red-200);
  --danger-on-soft: var(--p-red-700);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(45, 99, 184, 0.14);
  --shadow-xl: 0 24px 60px rgba(45, 99, 184, 0.18);
}


/*  ─── Thème SOMBRE, sur demande explicite ─────────────────────────────
    ⚠️ Il ne s'applique QUE si la page porte data-theme="auto" ou "dark"
    sur <html>.

    ⚠️ AUCUNE PAGE NE LE FAIT AUJOURD'HUI. L'espace client a porté
    data-theme="auto" du 24/08 au 01/09/2026 : un visiteur dont le système
    était en sombre recevait un espace client sombre sans l'avoir demandé.
    Le défaut est désormais CLAIR partout — vitrine, espace client, page de
    signature — et le sombre attend un vrai réglage utilisateur, comme dans
    le CRM. Le code est conservé pour ce jour-là : il est complet et mesuré.

    Les fonds ne descendent pas au noir pur — sur un écran, il fatigue et
    fait baver le texte clair.                                         */
:root[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: dark;

  --surface-page:    var(--p-ink-900);
  --surface-card:    var(--p-ink-800);
  --surface-raised:  var(--p-ink-700);
  --surface-sunken:  var(--p-ink-950);
  --surface-hover:   var(--p-ink-700);
  --surface-inverse: var(--p-gray-100);

  --border:        #2b3441;
  --border-strong: #3a4553;
  --border-subtle: #222a35;

  --text:        #c5cdd8;
  --text-strong: #f1f4f8;
  --text-muted:  #94a0b0;
  --text-invert: var(--p-ink-900);

  --accent:         var(--p-blue-600);
  --accent-hover:   var(--p-blue-400);
  --accent-text:    var(--p-ink-950);
  --accent-soft:    #17293f;
  --accent-on-soft: #9cc3f0;
  --accent-glow:    rgba(58, 123, 213, 0.32);

  --brand:         var(--p-gold-500);
  --brand-soft:    #2e2718;
  --brand-on-soft: var(--p-gold-300);

  --ok:         var(--p-green-600);
  --ok-soft:    #12261a;
  --ok-border:  #1e4030;
  --ok-on-soft: #7fdca2;

  --warn:         var(--p-amber-600);
  --warn-soft:    #2c2113;
  --warn-border:  #4a3620;
  --warn-on-soft: #f0c076;

  --danger:         var(--p-red-600);
  --danger-soft:    #2d1719;
  --danger-border:  #4c2529;
  --danger-on-soft: #f2a3a3;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.44);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.58);
}

/* En mode « auto », le thème clair reprend la main si le système le
   demande. Sans cette remise à zéro, data-theme="auto" resterait sombre
   pour tout le monde. */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;

    --surface-page:    var(--p-white-soft);
    --surface-card:    var(--p-white);
    --surface-raised:  var(--p-white);
    --surface-sunken:  var(--p-gray-50);
    --surface-hover:   var(--p-gray-50);
    --surface-inverse: var(--p-ink-900);

    --border:        var(--p-gray-200);
    --border-strong: var(--p-gray-300);
    --border-subtle: var(--p-gray-100);

    --text:        var(--p-gray-700);
    --text-strong: var(--p-gray-900);
    --text-muted:  var(--p-gray-500);
    --text-invert: var(--p-white);

    --accent:         var(--p-blue-700);
    --accent-hover:   var(--p-blue-800);
    --accent-text:    var(--p-white);
    --accent-soft:    var(--p-blue-100);
    --accent-on-soft: var(--p-blue-800);
    --accent-glow:    rgba(45, 99, 184, 0.20);

    --brand-soft:    var(--p-gold-100);
    --brand-on-soft: var(--p-gold-600);

    --ok-soft:    var(--p-green-100);
    --ok-border:  var(--p-green-200);
    --ok-on-soft: var(--p-green-700);

    --warn-soft:    var(--p-amber-100);
    --warn-border:  var(--p-amber-200);
    --warn-on-soft: var(--p-amber-700);

    --danger-soft:    var(--p-red-100);
    --danger-border:  var(--p-red-200);
    --danger-on-soft: var(--p-red-700);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(45, 99, 184, 0.14);
    --shadow-xl: 0 24px 60px rgba(45, 99, 184, 0.18);
  }
}


/*  ─── Invariants : ni le thème ni l'application ne les changent ─────── */
:root {
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.5s var(--ease);

  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 72px;

  --z-sticky: 100;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-toast: 1100;
}


/* ==========================================================================
   Réinitialisation
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* La barre de navigation collante masquerait la cible d'une ancre. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* L'anneau de focus doit rester visible partout : c'est la seule
   indication dont dispose une navigation au clavier. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   Typographie
   ========================================================================== */

h1, h2, h3, h4, h5 {
  color: var(--text-strong);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
h4 { font-size: 1rem; }

p { text-wrap: pretty; }

strong, b { font-weight: 700; color: var(--text-strong); }


/* ==========================================================================
   Icônes
   ==========================================================================
   Dimensionnées en `em` pour se comporter comme les glyphes de police
   qu'elles remplacent : un conteneur qui règle sa taille avec `font-size`
   pilote l'icône sans rien savoir d'elle. Ne pas passer en pixels. */

.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les traits fins deviennent illisibles en très petite taille. */
.ico-sm { stroke-width: 2; }

/* Dans une pastille en grille, l'alignement typographique n'a plus de sens
   et décale le dessin d'un pixel. */
.ico-centre { vertical-align: 0; }


/* ==========================================================================
   Boutons
   ========================================================================== */

.btn-primary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}

.btn-primary {
  color: var(--accent-text);
  background: var(--accent);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  color: var(--text-strong);
  background: var(--surface-card);
  border-color: var(--border-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent-on-soft); }

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--accent-on-soft); background: var(--surface-hover); }

.btn-block { width: 100%; }

button[disabled], .btn-primary[disabled], .btn-outline[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* État d'envoi, posé par le script sur soumission d'un formulaire. */
.btn-primary.loading, .btn-outline.loading { opacity: 0.75; pointer-events: none; }


/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.form-group { margin-bottom: var(--sp-4); min-width: 0; }

.form-group > label,
.form-legende {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-strong);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: 0.94rem;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Signaler l'erreur seulement APRÈS que le champ a été quitté : marquer en
   rouge un champ qu'on est en train de remplir est agressif et faux. */
input[data-touched="true"]:invalid,
textarea[data-touched="true"]:invalid { border-color: var(--danger); }

/* Message de retour d'un formulaire. */
.form-msg {
  padding: 0.9rem 1.1rem;
  margin-bottom: var(--sp-4);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.form-msg.success { color: var(--ok-on-soft);     background: var(--ok-soft);     border-color: var(--ok-border); }
.form-msg.error   { color: var(--danger-on-soft); background: var(--danger-soft); border-color: var(--danger-border); }
.form-msg.info    { color: var(--accent-on-soft); background: var(--accent-soft); border-color: var(--p-blue-200); }

.form-help {
  margin-top: var(--sp-4);
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
}
.form-help a { color: var(--accent-on-soft); font-weight: 600; }

/* Précision sous un champ. */
.champ-aide {
  margin-top: 0.35rem;
  font-size: 0.79rem;
  color: var(--text-muted);
}


/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.62rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.badge-ok     { color: var(--ok-on-soft);     background: var(--ok-soft);     border: 1px solid var(--ok-border); }
.badge-warn   { color: var(--warn-on-soft);   background: var(--warn-soft);   border: 1px solid var(--warn-border); }
.badge-danger { color: var(--danger-on-soft); background: var(--danger-soft); border: 1px solid var(--danger-border); }
.badge-accent { color: var(--accent-on-soft); background: var(--accent-soft); border: 1px solid var(--p-blue-200); }
.badge-brand  { color: var(--brand-on-soft);  background: var(--brand-soft);  border: 1px solid var(--p-gold-300); }
.badge-neutre { color: var(--text-muted);     background: var(--surface-sunken); border: 1px solid var(--border); }


/* ==========================================================================
   Accessibilité
   ========================================================================== */

/* Premier élément focalisable de la page : atteindre le contenu sans
   dérouler toute la navigation au clavier. */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  z-index: 10000;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-3); }

/* Masque à l'écran sans retirer de l'ordre de tabulation ni des lecteurs
   d'écran. Sert aux boutons radio déguisés en onglets. */
.hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les animations d'apparition ne s'imposent pas à qui les refuse. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Utilitaires
   ========================================================================== */

.conteneur { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.conteneur-etroit { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--sp-5); }

.pile { display: flex; flex-direction: column; }
.rangee { display: flex; align-items: center; flex-wrap: wrap; }

.t-sm { font-size: 0.86rem; }
.t-xs { font-size: 0.78rem; }
.discret { color: var(--text-muted); }
.a-droite { text-align: right; }
.a-centre { text-align: center; }
.sans-retour { white-space: nowrap; }
.nombre { font-variant-numeric: tabular-nums; }

/* Un tableau large défile dans son propre cadre : la page, elle, ne doit
   jamais défiler latéralement. */
.table-defilante { overflow-x: auto; -webkit-overflow-scrolling: touch; }