/* ===========================================================================
   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 l'auteur, 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);

  /* Séries — l'ordre dans lequel la maison pose ses couleurs quand un écran
     doit en distinguer plusieurs. CE NE SONT PAS DE NOUVELLES COULEURS : les
     cinq sortent des jetons ci-dessus et ci-dessous, elles sont seulement
     rangées.

     ELLES VIENNENT DE LA ROUE DES SECTEURS de marketsolutions.fr, qui range
     déjà sept activités par la couleur. C'est la seule palette catégorielle
     que la maison possède réellement, et c'est donc elle qui fait référence.

     CETTE ROUE ENSEIGNE AUSSI COMMENT S'EN SERVIR. Ses sept teintes sont des
     oranges et des verts voisins ; elles ne se distinguent pas les unes des
     autres à l'œil seul, et elle est pourtant parfaitement lisible — parce que
     chaque secteur porte son nom au bout d'un trait de rappel. La couleur y
     est décor, le libellé porte l'information. Toute série de la maison se
     dessine ainsi : NOMMÉE SUR PLACE, jamais renvoyée à une légende où deux
     pastilles voisines se confondraient.

     Une couleur suit toujours l'ENTITÉ qu'elle désigne — une dimension, une
     posture — et jamais son rang : une barre ne change pas de teinte selon
     qu'elle ressort ou non.

     ⚠️ Le 2026-09-02, ces jetons ont brièvement porté un bleu, un rose, un
     vert franc, un violet et un rouge brique, choisis pour passer les
     contrôles d'accessibilité d'un guide extérieur. Ils ne venaient d'aucune
     source de la marque. Kris l'a relevé : un contrôle d'accessibilité ne
     justifie pas d'inventer une couleur de marque. Si les teintes de la
     maison ne se séparent pas assez, c'est la REPRÉSENTATION qu'on change —
     on nomme sur place — pas la palette. */
  --ms-serie-1: #ef7d00;   /* orange de marque */
  --ms-serie-2: #2eb7bd;   /* turquoise */
  --ms-serie-3: #fbbc0c;   /* or */
  --ms-serie-4: #008c93;   /* teal */
  --ms-serie-5: #56a331;   /* vert */

  /* Sectorielles — distinguent des éléments entre eux, ne portent jamais du
     sens à elles seules. Antérieures aux séries ci-dessus et conservées : des
     outils s'en servent pour des aplats décoratifs, où les contrôles de
     séparation ne s'appliquent pas. Pour un graphique, prendre une série. */
  --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;
  /* Colonne d'au moins une hauteur de fenetre : c'est ce qui tient le pied en
     bas sur les pages courtes. Sans cela la bande remonte au ras du contenu et
     laisse une plage de fond sous elle. Le pied prend la marge automatique
     ci-dessous ; sur une page longue elle vaut zero et rien ne bouge. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  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; }
}