/* ===========================================================================
   Design system MarketSolutions — WebApps
   ---------------------------------------------------------------------------
   Transposition en CSS pur de `app/globals.css` du dépôt `ms`, qui est écrit
   pour Tailwind 4. Les WebApps n'ont pas d'étape de construction : il n'y a ni
   Tailwind, ni PostCSS, ni CDN. Tout est ici.

   Les valeurs ne sont pas réinterprétées. Elles sont reprises telles quelles de
   la charte du 2026-08-10 (`docs/charte-graphique.md`). Toute divergence entre
   ce fichier et la charte est un défaut de ce fichier.

   Deux arbitrages de Kris, reconduits sur les WebApps :

   1. Une seule valeur d'orange, #ef7d00. Les deux autres oranges en
      circulation — #F07820 des gabarits bureautiques, #e06e04 de GenPrompt —
      restent cantonnés à leur périmètre et ne remontent pas ici.

   2. Charte stricte sur le contraste. #ef7d00 sur blanc ne donne que 2,76:1
      là où WCAG AA demande 4,5:1. L'écart est connu, mesuré, et assumé :
      l'orange est conservé pour les liens et le petit texte. Une variante
      foncée réservée au texte réglerait le problème sans toucher aux aplats.
      Elle n'est pas introduite ici, et ne doit pas l'être sans arbitrage.

   Seule interdiction dure de la palette : orange sur le gris de pied de page
   (#ef7d00 sur #666b71, 1,95:1). C'est la pire combinaison disponible.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Polices — auto-hébergées

   La charte impose l'auto-hébergement : aucune requête vers Google à
   l'exécution, donc aucun cookie tiers et aucun saut visuel au chargement. Le
   site y parvient via `next/font`, qui télécharge les fichiers au build. Sans
   build, les fichiers sont versionnés dans `public/fonts/` — 116 Ko au total,
   sous-ensemble latin uniquement.

   Montserrat est servie en fonte variable : un seul fichier de 37 Ko couvre
   les cinq graisses de la charte (100, 400, 500, 600, 800).
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-100-900.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------------
   Jetons
--------------------------------------------------------------------------- */

:root {
  /* Marque -------------------------------------------------------------- */
  --ms-brand: #ef7d00;
  --ms-brand-or: #fbbc0c;
  --ms-brand-survol: #f0811e;

  /* Le dégradé de marque est la signature visuelle. Deux formes, pas une de
     plus. L'arrêt à 29 % vient du thème d'origine et donne au dégradé sa masse
     orange avant la montée vers l'or : le déplacer change la signature. */
  --ms-degrade: linear-gradient(90deg, #ef7d00 29%, #fbbc0c 100%);
  --ms-degrade-diag: linear-gradient(135deg, #ef7d00 10%, #fbbc0c 100%);

  /* Texte --------------------------------------------------------------- */
  --ms-encre: #444444;
  --ms-encre-attenuee: #888888;
  --ms-titre: #333333;

  /* Surfaces ------------------------------------------------------------ */
  --ms-fond: #ffffff;
  --ms-bande-claire: #f8f8f9;
  --ms-bande-sombre: #23262d;
  --ms-pied: #666b71;
  --ms-champ-fond: #fdfdfd;

  /* Filets -------------------------------------------------------------- */
  --ms-filet-clair: rgba(51, 51, 51, .10);
  --ms-filet-sombre: rgba(255, 255, 255, .20);
  --ms-champ-bordure: rgba(51, 51, 51, .12);

  /* Sectorielles — distinguent des éléments entre eux, ne portent jamais du
     sens à elles seules. */
  --ms-lime: #bbce00;
  --ms-turquoise: #2eb7bd;
  --ms-teal: #008c93;
  --ms-vert: #56a331;

  /* Typographie --------------------------------------------------------- */
  --ms-police-texte: 'Lato', system-ui, sans-serif;
  --ms-police-titre: 'Montserrat', system-ui, sans-serif;

  /* Profondeur — toujours deux couches : une ombre de contact courte et
     serrée, une ombre d'ambiance longue et diffuse. Une ombre à couche unique
     paraît collée. Teintées #23262d, jamais du noir pur : une ombre noire sur
     un fond blanc chaud paraît sale. */
  --ms-ombre-carte: 0 1px 2px rgba(35, 38, 45, .04), 0 8px 24px rgba(35, 38, 45, .06);
  --ms-ombre-carte-levee: 0 2px 4px rgba(35, 38, 45, .05), 0 18px 40px rgba(35, 38, 45, .11);
  --ms-ombre-brand: 0 10px 30px rgba(239, 125, 0, .28);

  /* Mouvement — décélération franche puis arrêt net. */
  --ms-ease: cubic-bezier(.22, .61, .36, 1);
  --ms-duree-survol: 200ms;
  --ms-duree-etat: 300ms;
  --ms-duree-apparition: 700ms;
}


/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ms-fond);
  color: var(--ms-encre);
  font-family: var(--ms-police-texte);
  /* 17px et non les 14px du thème d'origine : la lecture prime. */
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ms-police-titre);
  color: var(--ms-titre);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .6em;
}

/* Tailles fluides : elles suivent la largeur de la fenêtre entre deux bornes,
   sans palier. L'approche négative sur h1 et h2 compense l'écartement que
   Montserrat prend dans les grandes tailles ; elle ne s'applique pas en dessous
   de h3, où elle nuirait à la lisibilité. */
h1 { font-size: clamp(2.15rem, 1.4rem + 3.2vw, 3.9rem); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem); font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 600; }
h4 { font-size: 1.12rem; font-weight: 600; }

p { text-wrap: pretty; margin: 0 0 1em; }

a {
  color: var(--ms-brand);
  text-decoration: none;
  transition: color .18s var(--ms-ease);
}
a:hover { color: var(--ms-brand-survol); }

:focus-visible {
  outline: 2px solid var(--ms-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ms-brand); color: #fff; }


/* ---------------------------------------------------------------------------
   Grille et rythme
--------------------------------------------------------------------------- */

/* 1280px et non les 1200px du thème : la grille respire davantage sans que la
   ligne de texte ne s'allonge, celle-ci étant bornée séparément. */
.ms-conteneur {
  width: 100%;
  max-width: calc(1280px + 2 * 24px);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (width >= 640px)  { .ms-conteneur { padding-inline: 32px; } }
@media (width >= 1100px) { .ms-conteneur { padding-inline: 48px; } }

/* Une seule valeur, du téléphone au grand écran. Le système montait
   initialement de 64 à 88 puis 120px selon la largeur ; sur les pages denses on
   passait son temps à faire défiler du vide. Ramené à 60px le 2026-08-09. */
.ms-section { padding-block: 60px; }

/* Le texte suivi est borné en caractères, pas en pixels. Une ligne de 90
   caractères se lit mal quelle que soit la taille de l'écran. */
.ms-mesure      { max-width: 62ch; }
.ms-mesure-long { max-width: 68ch; }

.ms-bande-claire { background: var(--ms-bande-claire); }
.ms-bande-sombre { background: var(--ms-bande-sombre); color: #fff; }
.ms-bande-sombre h1,
.ms-bande-sombre h2,
.ms-bande-sombre h3,
.ms-bande-sombre h4 { color: #fff; }

.ms-degrade      { background-image: var(--ms-degrade); }
.ms-degrade-diag { background-image: var(--ms-degrade-diag); }

/* Les visuels viennent de banques d'images des années 2010 et ne partagent ni
   colorimétrie ni cadrage. Volontairement pas de duotone : il rendrait les
   visages orange. */
.ms-photo { filter: saturate(.82) contrast(1.06); }


/* ---------------------------------------------------------------------------
   Libellés et intertitres

   Capitales en Montserrat. L'approche est indispensable : des capitales
   serrées en Montserrat deviennent illisibles.
--------------------------------------------------------------------------- */

.ms-libelle {
  font-family: var(--ms-police-titre);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 600;
}


/* ---------------------------------------------------------------------------
   Boutons

   Forme en pilule et dégradé de marque, conservés du site d'origine — c'est sa
   signature. Le survol soulève le bouton au lieu de le faire pâlir : un bouton
   qui pâlit au survol donne l'impression de se désactiver.
--------------------------------------------------------------------------- */

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ms-police-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
  padding: 15px 32px;
  transition: all var(--ms-duree-survol) var(--ms-ease);
}

.ms-btn--lg { font-size: 14px; padding: 19px 40px; }

.ms-btn:disabled { pointer-events: none; opacity: .55; }

/* Principal. Le blanc sur le dégradé reste sous le seuil AA — c'est l'écart
   assumé de la charte, reconduit ici. */
.ms-btn--plein {
  background-image: var(--ms-degrade);
  color: #fff;
  box-shadow: var(--ms-ombre-brand);
}
.ms-btn--plein:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(239, 125, 0, .38);
}

/* Secondaire, sur fond clair. */
.ms-btn--ligne {
  background: transparent;
  border: 1px solid var(--ms-brand);
  color: var(--ms-brand);
}
.ms-btn--ligne:hover {
  background: var(--ms-brand);
  color: #fff;
  transform: translateY(-2px);
}

/* Secondaire, sur fond sombre ou photographie. */
.ms-btn--clair {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
}
.ms-btn--clair:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ms-titre);
  transform: translateY(-2px);
}


/* ---------------------------------------------------------------------------
   Champs de formulaire
--------------------------------------------------------------------------- */

.ms-champ {
  width: 100%;
  background: var(--ms-champ-fond);
  border: 1px solid var(--ms-champ-bordure);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--ms-police-texte);
  font-size: 16px;   /* 16px minimum : en dessous, iOS zoome à la mise au point */
  line-height: 1.5;
  color: var(--ms-encre);
}
.ms-champ::placeholder { color: var(--ms-encre-attenuee); }
.ms-champ:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 3px; }

.ms-etiquette {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ms-police-titre);
  font-weight: 600;
  font-size: 13px;
  color: var(--ms-titre);
}


/* ---------------------------------------------------------------------------
   Cartes
--------------------------------------------------------------------------- */

.ms-carte {
  background: #fff;
  border: 1px solid var(--ms-filet-clair);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--ms-ombre-carte);
  transition: box-shadow var(--ms-duree-etat) var(--ms-ease),
              transform var(--ms-duree-etat) var(--ms-ease);
}
.ms-carte--interactive:hover {
  box-shadow: var(--ms-ombre-carte-levee);
  transform: translateY(-2px);
}


/* ---------------------------------------------------------------------------
   Mouvement réduit

   Ce n'est pas une option : c'est du confort pour les personnes sujettes au mal
   des transports. Ne pas contourner.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ms-btn:hover,
  .ms-carte--interactive:hover { transform: none; }
}