/* Tokens IBM Carbon Design System — thèmes white et g100 */

:root {
  /* Familles typographiques : titres en Segoe UI, textes en Inter.
     Segoe UI n'est livrée qu'avec Windows ; ailleurs le repli système prend le relais. */
  --f-titre: 'Segoe UI', 'Segoe UI Variable Display', -apple-system, BlinkMacSystemFont, 'Inter', Helvetica, Arial, sans-serif;
  --f-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Couleurs de base Carbon */
  --cds-blue-60: #0f62fe;
  --cds-blue-70: #0353e9;
  --cds-blue-80: #002d9c;
  --cds-blue-40: #78a9ff;
  --cds-gray-10: #f4f4f4;
  --cds-gray-20: #e0e0e0;
  --cds-gray-30: #c6c6c6;
  --cds-gray-50: #8d8d8d;
  --cds-gray-60: #6f6f6f;
  --cds-gray-70: #525252;
  --cds-gray-80: #393939;
  --cds-gray-90: #262626;
  --cds-gray-100: #161616;
  --cds-red-60: #da1e28;
  --cds-green-50: #24a148;

  /* Thème white (par défaut) */
  --cds-background: #f5f5f7;
  --cds-layer: #ececef;
  --cds-layer-accent: #e0e0e0;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-helper: #6f6f6f;
  --cds-text-on-color: #ffffff;
  --cds-link-primary: #0f62fe;
  --cds-link-primary-hover: #0043ce;
  --cds-border-subtle: #e0e0e0;
  --cds-border-strong: #8d8d8d;
  --cds-interactive: #0f62fe;
  --cds-focus: #0f62fe;
  --cds-field: #f4f4f4;

  /* Espacement Carbon */
  --sp-01: 0.125rem;
  --sp-02: 0.25rem;
  --sp-03: 0.5rem;
  --sp-04: 0.75rem;
  --sp-05: 1rem;
  --sp-06: 1.5rem;
  --sp-07: 2rem;
  --sp-08: 2.5rem;
  --sp-09: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6rem;
  --sp-13: 10rem;

  /* Motion Carbon */
  --dur-fast-01: 70ms;
  --dur-fast-02: 110ms;
  --dur-moderate-01: 150ms;
  --dur-moderate-02: 240ms;
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);

  /* Grille Carbon */
  --grid-max: 99rem;      /* 1584px */
  --grid-gutter: 2rem;    /* 32px */
  --grid-margin: 1rem;
}

/* Thème g100 — sections sombres */
.theme-g100 {
  --cds-background: #161616;
  --cds-layer: #262626;
  --cds-layer-accent: #393939;
  --cds-text-primary: #f4f4f4;
  --cds-text-secondary: #c6c6c6;
  --cds-text-helper: #8d8d8d;
  --cds-text-on-color: #ffffff;
  --cds-link-primary: #78a9ff;
  --cds-link-primary-hover: #a6c8ff;
  --cds-border-subtle: #393939;
  --cds-border-strong: #6f6f6f;
  --cds-interactive: #4589ff;
  --cds-focus: #ffffff;
  --cds-field: #262626;
  background: var(--cds-background);
  color: var(--cds-text-primary);
}

/* Thème gris clair — sections d'alternance */
.theme-g10 {
  --cds-background: #f5f5f7;
  --cds-layer: #ececef;
  --cds-layer-accent: #e0e0e0;
  --cds-field: #ffffff;
}

/* ---- Échelle typographique : Inter ---- */

/*  hero      Inter 600  104/120  -2.28px
    heading1  Inter 600   48/56   -1.05px
    heading2  Inter 600   40/48   -0.88px
    heading3  Inter 600   32/36   -0.70px
    heading4  Inter 600   24/28   -0.52px
    heading5  Inter 600   20/24   -0.44px
    heading6  Inter 600   16/22   -0.35px
    subtitle1 Inter 300/500   24/36
    subtitle2 Inter 300/500   18/28
    body1     Inter 300/500   16/24
    body2     Inter 300/500   14/20
    legal     Inter 300/500   14/24
    overline  Inter 700       14/20   +2.6px  majuscules              */

.ts-hero, .ts-h1, .ts-h2, .ts-h3, .ts-h4, .ts-h5, .ts-h6 {
  font-family: var(--f-titre);
  font-weight: 600;
}

/* Titres fluides : de la taille mobile à la taille de la charte. */
.ts-hero { font-size: clamp(2.5rem, 1.2rem + 5.8vw, 6.5rem); line-height: 1.154; letter-spacing: -0.025em; }
.ts-h1   { font-size: clamp(2rem,   1.5rem + 2.2vw, 3rem);    line-height: 1.167; letter-spacing: -0.025em; }
.ts-h2   { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.2;   letter-spacing: -0.025em; }
.ts-h3   { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);    line-height: 1.125; letter-spacing: -0.025em; }
.ts-h4   { font-size: 1.5rem;   line-height: 1.167; letter-spacing: -0.025em; }
.ts-h5   { font-size: 1.25rem;  line-height: 1.2;   letter-spacing: -0.025em; }
.ts-h6   { font-size: 1rem;     line-height: 1.375; letter-spacing: -0.025em; }

.ts-subtitle1 { font-size: 1.5rem;   line-height: 1.5;   font-weight: 300; letter-spacing: 0; }
.ts-subtitle2 { font-size: 1.125rem; line-height: 1.556; font-weight: 300; letter-spacing: 0; }
.ts-body1     { font-size: 1rem;     line-height: 1.5;   font-weight: 400; letter-spacing: 0; }
.ts-body2     { font-size: 0.875rem; line-height: 1.429; font-weight: 400; letter-spacing: 0; }
.ts-legal     { font-size: 0.875rem; line-height: 1.714; font-weight: 300; letter-spacing: 0; }

.ts-overline {
  font-size: 0.875rem;
  line-height: 1.429;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}

/* ---- Correspondance avec les classes en place ---- */

.cds-label-01 {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
}

.cds-helper-text {
  font-size: 0.875rem;
  line-height: 1.714;
  font-weight: 300;
  color: var(--cds-text-helper);
}

.cds-body-01 { font-size: 0.875rem; line-height: 1.429; letter-spacing: 0; }
.cds-body-02,
.cds-body-long-02 { font-size: 1rem; line-height: 1.5; letter-spacing: 0; }

/* heading5 / heading4 / heading3 de la charte */
.cds-heading-03,
.cds-fluid-heading-03 {
  font-family: var(--f-titre);
  font-size: 1.25rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em;
}
.cds-heading-04 {
  font-family: var(--f-titre);
  font-size: 1.5rem; line-height: 1.167; font-weight: 600; letter-spacing: -0.025em;
}
.cds-heading-05 {
  font-family: var(--f-titre);
  font-size: 2rem; line-height: 1.125; font-weight: 600; letter-spacing: -0.025em;
}

/* titres de section : heading2 */
.cds-fluid-heading-04 {
  font-family: var(--f-titre);
  /* 22px sur mobile → 30px au-delà : un cran au-dessus des titres de carte */
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  line-height: 1.25; font-weight: 500; letter-spacing: -0.025em;
}

/* h1 des pages services : heading1 */
/* H1 de page : même taille que celui de l'accueil */
.cds-fluid-heading-05 {
  font-family: var(--f-titre);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  line-height: 1.08; font-weight: 500; letter-spacing: -0.025em;
}

/* h1 de l'accueil : hero */
.cds-fluid-heading-06 {
  font-family: var(--f-titre);
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 5rem);
  line-height: 1.04; font-weight: 600; letter-spacing: -0.025em;
}

/* chapeaux : subtitle1 */
.cds-fluid-paragraph-01 {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.5; font-weight: 300; letter-spacing: 0;
  color: var(--cds-text-secondary);
}

/* ---- Grille 16 colonnes Carbon ---- */

.cds-grid {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
}

@media (min-width: 42rem) {
  .cds-grid { grid-template-columns: repeat(8, 1fr); padding: 0 var(--grid-gutter); }
}
@media (min-width: 66rem) {
  .cds-grid { grid-template-columns: repeat(16, 1fr); }
}

.col-full { grid-column: 1 / -1; }

@media (min-width: 66rem) {
  .lg-4  { grid-column: span 4; }
  .lg-5  { grid-column: span 5; }
  .lg-6  { grid-column: span 6; }
  .lg-7  { grid-column: span 7; }
  .lg-8  { grid-column: span 8; }
  .lg-10 { grid-column: span 10; }
  .lg-12 { grid-column: span 12; }
  .lg-start-9 { grid-column: 9 / span 8; }
}

/* ---- Bouton Carbon ---- */

.cds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-04);
  height: 2rem;
  min-height: 2rem;
  max-width: 20rem;
  padding: 0 var(--sp-04);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.29;
  letter-spacing: 0.16px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast-02) var(--ease-productive),
              border-color var(--dur-fast-02) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}

.cds-btn svg { flex: 0 0 auto; }

/* Pastilles : fond translucide qui s'adapte au fond de la section. */

.cds-btn--primary {
  background: rgba(22, 22, 22, 0.08);
  border-color: transparent;
  color: var(--cds-text-primary);
}
.cds-btn--primary:hover { background: rgba(22, 22, 22, 0.14); }
.cds-btn--primary:active { background: rgba(22, 22, 22, 0.2); }

.cds-btn--secondary {
  background: rgba(22, 22, 22, 0.04);
  border-color: transparent;
  color: var(--cds-text-secondary);
}
.cds-btn--secondary:hover { background: rgba(22, 22, 22, 0.1); color: var(--cds-text-primary); }

/* sur fond sombre, la pastille s'éclaircit au lieu de s'assombrir
   (mêmes teintes que les pastilles de l'en-tête) */
.theme-g100 .cds-btn--primary,
.hero .cds-btn--primary,
.shero .cds-btn--primary,
.cta .cds-btn--primary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cds-gray-10);
}
.theme-g100 .cds-btn--primary:hover,
.hero .cds-btn--primary:hover,
.shero .cds-btn--primary:hover,
.cta .cds-btn--primary:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; }

.theme-g100 .cds-btn--secondary,
.hero .cds-btn--secondary,
.shero .cds-btn--secondary,
.cta .cds-btn--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--cds-gray-30);
}
.theme-g100 .cds-btn--secondary:hover,
.hero .cds-btn--secondary:hover,
.shero .cds-btn--secondary:hover,
.cta .cds-btn--secondary:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }

.cds-btn--tertiary {
  background: transparent;
  border-color: var(--cds-interactive);
  color: var(--cds-interactive);
}
.cds-btn--tertiary:hover {
  background: var(--cds-interactive);
  color: #ffffff;
}

.cds-btn--ghost {
  background: transparent;
  color: var(--cds-link-primary);
  padding-left: 0;
  gap: var(--sp-05);
}
.cds-btn--ghost:hover { color: var(--cds-link-primary-hover); }

.cds-btn:focus-visible { outline-offset: 2px; }
.cds-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ---- Champs Carbon ---- */

.cds-form-item { display: flex; flex-direction: column; gap: var(--sp-03); }

.cds-input,
.cds-select,
.cds-textarea {
  width: 100%;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--sp-05);
  background: #ffffff;
  border: 1px solid var(--cds-border-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  transition: border-color var(--dur-fast-02) var(--ease-productive);
  appearance: none;
}

.cds-input:focus,
.cds-select:focus,
.cds-textarea:focus { border-color: var(--cds-blue-60); }

/* la zone de texte garde des coins adoucis plutôt qu'une gélule */
.cds-textarea {
  padding: var(--sp-05);
  height: auto;
  min-height: 9rem;
  border-radius: 1.125rem;
  resize: vertical;
  line-height: 1.43;
}

/* iOS zoome sur tout champ sous 16px : on force 16px sur les petits écrans.
   Vaut pour ces champs et pour tous ceux ajoutés plus tard. */
@media (max-width: 66rem) {
  .cds-input,
  .cds-select,
  .cds-textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
  }
}

.cds-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23161616'%3E%3Cpath d='M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-05) center;
  background-color: #ffffff;
  background-size: 1rem;
  padding-right: var(--sp-09);
}



.cds-input--invalid,
.cds-textarea--invalid { border-bottom-color: var(--cds-red-60); }

.cds-error {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  font-size: 0.75rem;
  line-height: 1.34;
  color: var(--cds-red-60);
}