/* Cabinet Hached : variables du design (générées depuis design-system/tokens.json) */
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --ivoire: #f7f4ee; /* Fond de page par défaut. Chaud, jamais blanc pur : c'est lui qui donne le ton « proche » du cabinet. */
  --blanc: #ffffff; /* Cartes, formulaires, menus déroulants posés sur ivoire ou sable. */
  --sable: #ede5d8; /* Sections alternées (bandeau « Le cabinet », FAQ), emplacements photo en attente. */
  --ligne: #cfc5b5; /* Filets de séparation et bordures de cartes, décoratifs uniquement (1px). */
  --ligne-forte: #857c6f; /* Bordure des champs de formulaire et des boutons secondaires : 4.1:1 sur blanc, 3.7:1 sur ivoire. */
  --encre: #16242c; /* Texte principal et titres, sur ivoire (14.5:1), blanc, sable et argile-clair. */
  --encre-douce: #55606a; /* Texte secondaire, chapôs, métadonnées (date, auteur), sur ivoire (5.9:1), blanc et sable (5.1:1). */
  --petrole: #1e4a57; /* Couleur de marque. Bouton principal, liens, icônes, éléments actifs du menu. Texte : 8.8:1 sur ivoire, 7.7:1 sur sable et petrole-clair. */
  --petrole-profond: #12313b; /* Fond des sections sombres : hero, bandeau contact, pied de page. Survol du bouton principal. */
  --petrole-clair: #dde8e8; /* Fond teinté des pastilles de domaine, survol des entrées du méga-menu. */
  --argile: #a3452a; /* Accent chaleureux, utilisé avec parcimonie : surtitres, filet sous un titre, numéro de téléphone mis en avant. Texte : 5.6:1 sur ivoire, 4.9:1 sur sable et argile-clair. */
  --argile-clair: #f4e3d9; /* Fond d'encart « Bon à savoir » et d'alerte douce, avec texte encre ou argile. */
  --argile-lumineux: #e39a7b; /* Accent sur fond sombre uniquement : surtitres et filets sur petrole-profond (6.0:1). Sur petrole, seulement en texte de 24px et plus (4.2:1). */
  --texte-inverse: var(--ivoire); /* Texte principal sur petrole-profond (12.5:1) et petrole (8.8:1). */
  --texte-inverse-doux: #b8c7cc; /* Texte secondaire sur petrole-profond (7.9:1) et petrole (5.6:1). */
  --focus: #c0602a; /* Anneau de focus clavier, 2px plein, décalé de 2px : 3.9:1 sur ivoire, 3.2:1 sur petrole-profond. */
  --succes: #2e6a4e; /* Confirmation d'envoi de formulaire, toujours accompagnée d'un texte explicite. 6.4:1 sur blanc. */
  --erreur: #a3342b; /* Message d'erreur de champ, toujours accompagné d'un texte explicite. 6.8:1 sur blanc. */
  --space-1: 4px; /* Écart icône / libellé serré. */
  --space-2: 8px; /* Écart entre éléments d'un groupe (tags, méta). */
  --space-3: 12px; /* Padding vertical des boutons et champs. */
  --space-4: 16px; /* Gouttière mobile, écart titre / texte. */
  --space-5: 24px; /* Padding des cartes, gouttière de grille. */
  --space-6: 32px; /* Padding des cartes larges, écart entre blocs d'une section. */
  --space-7: 48px; /* Marge latérale desktop du conteneur. */
  --space-8: 64px; /* Espace entre sections sur mobile. */
  --space-9: 96px; /* Espace entre sections sur desktop. */
  --space-10: 128px; /* Respiration du hero de la page d'accueil. */
  --radius-sm: 4px; /* Champs de formulaire, pastilles de date. */
  --radius-md: 8px; /* Boutons, cartes, menus déroulants. */
  --radius-lg: 16px; /* Photos et grands blocs (portrait, carte Google). */
  --radius-pill: 999px; /* Tags de domaine, sélecteur de langue. */
  --ombre-carte: 0 1px 2px rgba(22,36,44,0.06), 0 8px 24px rgba(22,36,44,0.06); /* Carte au survol uniquement ; au repos, une carte n'a qu'un filet ligne. */
  --ombre-menu: 0 12px 40px rgba(22,36,44,0.16); /* Méga-menu et menu mobile ouverts. */
  --conteneur: 1200px; /* Largeur maximale du contenu, centré, avec space-7 de marge latérale (space-4 sur mobile). */
  --colonne-texte: 720px; /* Largeur maximale des colonnes de texte long (pages de compétence, actualités). */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}