/* ==========================================================================
   ASCEND — Feuille de style de déspécialisation
   Jetons de design (design tokens)
   Version 1.0 — proposition soumise à validation (MKTASC-5)

   Principe : aucune valeur en dur dans les pages. Tout passe par ces
   variables, pour qu'un changement de charte se fasse ici et nulle part
   ailleurs.

   Contrainte respectée : aucune teinte violette dans la palette.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. COULEURS — Primaire (bleu)
     Héritée du site existant : #1956d8 devient le 600, #1243ad le 700.
     ---------------------------------------------------------------------- */
  --asc-blue-50:  #eff4fe;
  --asc-blue-100: #dbe6fd;
  --asc-blue-200: #bfd2fb;
  --asc-blue-300: #93b5f8;
  --asc-blue-400: #608ef3;
  --asc-blue-500: #3a6cec;
  --asc-blue-600: #1956d8;  /* couleur de marque */
  --asc-blue-700: #1243ad;
  --asc-blue-800: #15398c;
  --asc-blue-900: #163372;
  --asc-blue-950: #0f2050;

  /* ----------------------------------------------------------------------
     2. COULEURS — Accent (teal)
     Seconde couleur de marque. Sert aux éléments de progression, aux
     illustrations et aux mises en avant qui ne sont ni un lien ni une
     alerte. Évite de tout faire porter au bleu.
     ---------------------------------------------------------------------- */
  --asc-teal-50:  #eefbf8;
  --asc-teal-100: #d5f5ef;
  --asc-teal-200: #aeeae1;
  --asc-teal-300: #79d8cd;
  --asc-teal-400: #43bdb3;
  --asc-teal-500: #26a199;
  --asc-teal-600: #1a827d;
  --asc-teal-700: #186866;
  --asc-teal-800: #175352;
  --asc-teal-900: #164544;

  /* ----------------------------------------------------------------------
     3. COULEURS — Neutres
     Légèrement bleutés pour s'accorder au primaire. Reprend l'encre
     #0c1726, le gris #647083 et le fond pâle #f4f7fb du site existant.
     ---------------------------------------------------------------------- */
  --asc-gray-0:   #ffffff;
  --asc-gray-25:  #fafbfd;
  --asc-gray-50:  #f4f7fb;
  --asc-gray-100: #e8edf4;
  --asc-gray-200: #d5dde8;
  --asc-gray-300: #b3bfd0;
  --asc-gray-400: #8894a6;
  --asc-gray-500: #647083;
  --asc-gray-600: #4c5768;
  --asc-gray-700: #3a4353;
  --asc-gray-800: #26303f;
  --asc-gray-900: #0c1726;  /* encre */

  /* ----------------------------------------------------------------------
     4. COULEURS — Sémantiques
     Deux seulement, et elles s'appliquent au texte et aux filets, jamais à
     des fonds de bandeau.

     Un site vitrine n'a pas d'états à signaler : il a une confirmation
     d'envoi et une erreur de formulaire. Les couleurs « vigilance » et
     « information » ont été retirées faute d'usage réel, et « information »
     faisait de toute façon doublon avec le bleu primaire. Elles seront à
     redéfinir le jour où l'application sera traitée, avec les cas d'usage
     sous les yeux.
     ---------------------------------------------------------------------- */
  --asc-success-600: #15803d;  /* coche de confirmation d'envoi */

  --asc-danger-600:  #b91c1c;  /* astérisque de champ obligatoire, filet d'erreur */
  --asc-danger-700:  #991b1b;  /* texte d'erreur */

  /* ----------------------------------------------------------------------
     5. RÔLES — Ce que les pages doivent utiliser
     Les composants pointent vers ces rôles, jamais vers les échelles
     brutes ci-dessus. Un changement de charte se fait ici.
     ---------------------------------------------------------------------- */
  --asc-bg:              var(--asc-gray-0);
  --asc-bg-subtle:       var(--asc-gray-50);
  --asc-bg-muted:        var(--asc-gray-100);
  --asc-bg-inverse:      var(--asc-gray-900);

  --asc-text:            var(--asc-gray-900);
  --asc-text-secondary:  var(--asc-gray-600);
  --asc-text-muted:      var(--asc-gray-500);
  --asc-text-placeholder:var(--asc-gray-400);
  --asc-text-inverse:    var(--asc-gray-0);
  --asc-text-link:       var(--asc-blue-600);
  --asc-text-link-hover: var(--asc-blue-700);

  --asc-border:          var(--asc-gray-200);
  --asc-border-strong:   var(--asc-gray-400);  /* bordures de champs : 3:1 mini */
  --asc-border-focus:    var(--asc-blue-600);

  /* Sur fond encre. Le site actuel a deux sections sombres (migration et
     démonstration) : le bleu 600 y tombe à 2,88:1, illisible. Ces trois
     jetons sont les équivalents accessibles, pris dans les mêmes échelles. */
  --asc-text-on-dark:           var(--asc-gray-0);    /* 18,0:1 */
  --asc-text-secondary-on-dark: var(--asc-gray-300);  /*  9,7:1 */
  --asc-action-on-dark:         var(--asc-blue-300);  /*  8,8:1 */
  --asc-border-on-dark:         rgba(255, 255, 255, .16);

  --asc-action:          var(--asc-blue-600);
  --asc-action-hover:    var(--asc-blue-700);
  --asc-action-active:   var(--asc-blue-800);
  --asc-action-subtle:   var(--asc-blue-50);

  /* ----------------------------------------------------------------------
     6. TYPOGRAPHIE
     Inter conservée : neutre, gratuite, excellente lisibilité en petit
     corps et sur écran de téléphone en extérieur. Chiffres tabulaires
     activés pour les tableaux de parc et les grilles tarifaires.
     ---------------------------------------------------------------------- */
  --asc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --asc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --asc-weight-regular:  400;
  --asc-weight-medium:   500;
  --asc-weight-semibold: 600;
  --asc-weight-bold:     700;

  /* Échelle typographique — ratio 1.25, base 16px.
     Les trois plus grands niveaux sont fluides : ils s'adaptent en continu
     entre mobile et grand écran, sans palier brutal au point de rupture.
     Le site actuel emploie déjà cette technique, elle est conservée. */
  --asc-text-display: clamp(2.25rem, 1.55rem + 3.1vw, 3rem);    /* 36 → 48px */
  --asc-text-h1:      clamp(1.875rem, 1.53rem + 1.6vw, 2.25rem);/* 30 → 36px */
  --asc-text-h2:      clamp(1.5rem, 1.27rem + 1.05vw, 1.75rem); /* 24 → 28px */
  --asc-text-h3:      1.375rem; /* 22px */
  --asc-text-h4:      1.125rem; /* 18px */
  --asc-text-lg:      1.125rem; /* 18px — chapô */
  --asc-text-base:    1rem;     /* 16px — texte courant, jamais moins pour du corps */
  --asc-text-sm:      0.875rem; /* 14px — annotations, aide de champ */
  --asc-text-xs:      0.8125rem;/* 13px — mentions légales, limite basse */
  --asc-text-overline:0.75rem;  /* 12px — surtitres en capitales uniquement */

  --asc-leading-tight:   1.15;
  --asc-leading-snug:    1.3;
  --asc-leading-normal:  1.5;
  --asc-leading-relaxed: 1.65;  /* paragraphes longs */

  --asc-tracking-tight:   -0.02em;  /* display et h1 */
  --asc-tracking-normal:  0;
  --asc-tracking-wide:    0.08em;   /* surtitres en capitales */

  /* ----------------------------------------------------------------------
     7. ESPACEMENTS — base 4px
     ---------------------------------------------------------------------- */
  --asc-space-1:  0.25rem;  /*  4px */
  --asc-space-2:  0.5rem;   /*  8px */
  --asc-space-3:  0.75rem;  /* 12px */
  --asc-space-4:  1rem;     /* 16px */
  --asc-space-5:  1.5rem;   /* 24px */
  --asc-space-6:  2rem;     /* 32px */
  --asc-space-7:  3rem;     /* 48px */
  --asc-space-8:  4rem;     /* 64px */
  --asc-space-9:  6rem;     /* 96px */
  --asc-space-10: 8rem;     /* 128px */

  --asc-section-y:        var(--asc-space-9);  /* respiration verticale des sections */
  --asc-section-y-mobile: var(--asc-space-7);

  /* ----------------------------------------------------------------------
     8. RAYONS, OMBRES, BORDURES
     ---------------------------------------------------------------------- */
  --asc-radius-sm:   4px;
  --asc-radius-md:   8px;   /* boutons, champs */
  --asc-radius-lg:   12px;  /* cartes */
  --asc-radius-xl:   16px;  /* grands blocs, médias */
  --asc-radius-full: 999px; /* badges, pastilles */

  --asc-shadow-sm: 0 1px 2px rgba(12, 23, 38, 0.06);
  --asc-shadow-md: 0 4px 12px rgba(12, 23, 38, 0.08);
  --asc-shadow-lg: 0 12px 32px rgba(12, 23, 38, 0.12);
  --asc-shadow-focus: 0 0 0 3px rgba(25, 86, 216, 0.35);

  /* ----------------------------------------------------------------------
     9. MISE EN PAGE
     ---------------------------------------------------------------------- */
  --asc-container:    1200px;
  --asc-container-narrow: 760px;  /* blocs de texte long, confort de lecture */
  --asc-gutter:       var(--asc-space-5);
  --asc-header-h:     72px;

  /* 10. MOUVEMENT — discret, jamais décoratif */
  --asc-duration-fast: 120ms;
  --asc-duration-base: 200ms;
  --asc-duration-slow: 420ms;  /* apparitions au scroll */
  --asc-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Points de rupture (pour mémoire, à utiliser tels quels) :
   mobile      : < 640px
   tablette    : 640px – 899px
   petit écran : 900px – 1199px
   grand écran : >= 1200px                                                   */

/* ==========================================================================
   BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--asc-font-sans);
  font-size: var(--asc-text-base);
  line-height: var(--asc-leading-relaxed);
  color: var(--asc-text);
  background: var(--asc-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04";
}

h1, h2, h3, h4 {
  margin: 0 0 var(--asc-space-4);
  font-weight: var(--asc-weight-bold);
  line-height: var(--asc-leading-tight);
  letter-spacing: var(--asc-tracking-tight);
  color: var(--asc-text);
}
h1 { font-size: var(--asc-text-h1); }
h2 { font-size: var(--asc-text-h2); line-height: var(--asc-leading-snug); }
h3 { font-size: var(--asc-text-h3); font-weight: var(--asc-weight-semibold); letter-spacing: var(--asc-tracking-normal); }
h4 { font-size: var(--asc-text-h4); font-weight: var(--asc-weight-semibold); letter-spacing: var(--asc-tracking-normal); }

p { margin: 0 0 var(--asc-space-4); }

a {
  color: var(--asc-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--asc-duration-fast) var(--asc-ease);
}
a:hover { color: var(--asc-text-link-hover); }

:focus-visible {
  outline: 2px solid var(--asc-border-focus);
  outline-offset: 2px;
  border-radius: var(--asc-radius-sm);
}

.asc-display {
  font-size: var(--asc-text-display);
  font-weight: var(--asc-weight-bold);
  line-height: var(--asc-leading-tight);
  letter-spacing: var(--asc-tracking-tight);
}
.asc-lead { font-size: var(--asc-text-lg); color: var(--asc-text-secondary); }
.asc-small { font-size: var(--asc-text-sm); }
.asc-overline {
  font-size: var(--asc-text-overline);
  font-weight: var(--asc-weight-semibold);
  letter-spacing: var(--asc-tracking-wide);
  text-transform: uppercase;
  color: var(--asc-text-muted);
}
.asc-num { font-variant-numeric: tabular-nums; }

/* Pas de media query sur les titres : les trois plus grands niveaux sont
   déjà fluides via clamp(). */

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */

.asc-container {
  width: 100%;
  max-width: var(--asc-container);
  margin-inline: auto;
  padding-inline: var(--asc-gutter);
}
.asc-container--narrow { max-width: var(--asc-container-narrow); }

.asc-section { padding-block: var(--asc-section-y); }
.asc-section--subtle { background: var(--asc-bg-subtle); }
.asc-section--inverse { background: var(--asc-bg-inverse); color: var(--asc-text-secondary-on-dark); }
.asc-section--inverse h1,
.asc-section--inverse h2,
.asc-section--inverse h3,
.asc-section--inverse h4 { color: var(--asc-text-on-dark); }
.asc-section--inverse a,
.asc-section--inverse .asc-overline { color: var(--asc-action-on-dark); }
.asc-section--inverse .asc-lead { color: var(--asc-text-secondary-on-dark); }
.asc-section--inverse .asc-card {
  background: transparent;
  border-color: var(--asc-border-on-dark);
  box-shadow: none;
  color: var(--asc-text-secondary-on-dark);
}
/* Le bouton secondaire s'inverse aussi, sinon il disparaît sur l'encre. */
.asc-section--inverse .asc-btn--secondary {
  background: transparent;
  border-color: var(--asc-border-on-dark);
  color: var(--asc-text-on-dark);
}
.asc-section--inverse .asc-btn--secondary:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .32);
  color: var(--asc-text-on-dark);
}

@media (max-width: 639px) {
  .asc-section { padding-block: var(--asc-section-y-mobile); }
}

/* ==========================================================================
   BOUTONS
   Hauteur minimale 44px sur les tailles md et lg : cible tactile confortable,
   y compris avec des gants sur le terrain.
   ========================================================================== */

.asc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asc-space-2);
  min-height: 44px;
  padding: 0 var(--asc-space-5);
  border: 1px solid transparent;
  border-radius: var(--asc-radius-md);
  font-family: inherit;
  font-size: var(--asc-text-base);
  font-weight: var(--asc-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--asc-duration-fast) var(--asc-ease),
              border-color var(--asc-duration-fast) var(--asc-ease),
              color var(--asc-duration-fast) var(--asc-ease);
}

.asc-btn--sm { min-height: 36px; padding: 0 var(--asc-space-4); font-size: var(--asc-text-sm); }
.asc-btn--lg { min-height: 52px; padding: 0 var(--asc-space-6); font-size: var(--asc-text-lg); }
.asc-btn--block { display: flex; width: 100%; }

.asc-btn--primary {
  background: var(--asc-action);
  color: var(--asc-text-inverse);
}
.asc-btn--primary:hover  { background: var(--asc-action-hover); color: var(--asc-text-inverse); }
.asc-btn--primary:active { background: var(--asc-action-active); }

.asc-btn--secondary {
  background: var(--asc-bg);
  border-color: var(--asc-border-strong);
  color: var(--asc-text);
}
.asc-btn--secondary:hover  { background: var(--asc-bg-subtle); border-color: var(--asc-gray-500); color: var(--asc-text); }
.asc-btn--secondary:active { background: var(--asc-bg-muted); }

.asc-btn--ghost { background: transparent; color: var(--asc-action); }
.asc-btn--ghost:hover { background: var(--asc-action-subtle); color: var(--asc-action-hover); }

/* Pas de variante « danger » : un site vitrine n'a aucune action destructrice
   à proposer. À définir le jour où l'application sera traitée. */

.asc-btn:focus-visible { outline: none; box-shadow: var(--asc-shadow-focus); }

.asc-btn[disabled],
.asc-btn[aria-disabled="true"] {
  background: var(--asc-gray-200);
  border-color: transparent;
  color: var(--asc-gray-500);
  cursor: not-allowed;
}

/* ==========================================================================
   CHAMPS DE FORMULAIRE
   ========================================================================== */

.asc-field { display: flex; flex-direction: column; gap: var(--asc-space-2); margin-bottom: var(--asc-space-5); }

.asc-label {
  font-size: var(--asc-text-sm);
  font-weight: var(--asc-weight-medium);
  color: var(--asc-text);
}
.asc-label .asc-required { color: var(--asc-danger-600); }

.asc-input,
.asc-select,
.asc-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--asc-space-3) var(--asc-space-4);
  border: 1px solid var(--asc-border-strong);
  border-radius: var(--asc-radius-md);
  background: var(--asc-bg);
  font-family: inherit;
  font-size: var(--asc-text-base);
  color: var(--asc-text);
  transition: border-color var(--asc-duration-fast) var(--asc-ease),
              box-shadow var(--asc-duration-fast) var(--asc-ease);
}
.asc-textarea { min-height: 120px; resize: vertical; line-height: var(--asc-leading-normal); }

.asc-input::placeholder,
.asc-textarea::placeholder { color: var(--asc-text-placeholder); }

.asc-input:focus,
.asc-select:focus,
.asc-textarea:focus {
  outline: none;
  border-color: var(--asc-border-focus);
  box-shadow: var(--asc-shadow-focus);
}

.asc-input[disabled],
.asc-select[disabled],
.asc-textarea[disabled] {
  background: var(--asc-bg-muted);
  color: var(--asc-text-muted);
  cursor: not-allowed;
}

.asc-input[aria-invalid="true"],
.asc-textarea[aria-invalid="true"] { border-color: var(--asc-danger-600); }

.asc-help  { font-size: var(--asc-text-sm); color: var(--asc-text-muted); }
.asc-error { font-size: var(--asc-text-sm); color: var(--asc-danger-700); font-weight: var(--asc-weight-medium); }

/* ==========================================================================
   CARTES
   ========================================================================== */

.asc-card {
  padding: var(--asc-space-5);
  border: 1px solid var(--asc-border);
  border-radius: var(--asc-radius-lg);
  background: var(--asc-bg);
  box-shadow: var(--asc-shadow-sm);
}
.asc-card--flat { box-shadow: none; }
.asc-card--interactive {
  transition: box-shadow var(--asc-duration-base) var(--asc-ease),
              transform var(--asc-duration-base) var(--asc-ease);
}
.asc-card--interactive:hover { box-shadow: var(--asc-shadow-md); transform: translateY(-2px); }

.asc-card--highlight {
  border-color: var(--asc-blue-200);
  background: var(--asc-blue-50);
}

/* Pictogramme de carte fonctionnalité. Seul emploi du teal sur le site :
   il rompt le bleu-gris-blanc d'une page longue sans jamais toucher au
   texte, aux boutons ni aux liens. Trait fin, jamais de forme pleine. */
.asc-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--asc-space-4);
  padding: 8px;
  border-radius: var(--asc-radius-md);
  background: var(--asc-teal-50);
  color: var(--asc-teal-700);
}

/* ==========================================================================
   MESSAGES
   Retours affichés après une action : envoi du formulaire de démonstration,
   erreur de saisie, précision sous la grille tarifaire.
   ========================================================================== */

/* Il n'y a volontairement pas de composant « alerte » générique dans ce
   système. Un bandeau à fond coloré est un objet d'application, conçu pour
   se faire remarquer au milieu d'une interface dense. Sur une page de site,
   les quelques cas réels se traitent mieux comme du contenu composé.
   Trois cas, trois traitements distincts. */

/* --- 1. Confirmation d'envoi ---------------------------------------------
   Remplace le formulaire, à la même place et à la même largeur. Aucun fond
   coloré : c'est du contenu, pas une notification. La coche est fine et sans
   cercle, la hiérarchie vient de la typographie. */
.asc-sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--asc-space-3);
  padding-block: var(--asc-space-4);
}
.asc-sent__mark {
  width: 32px;
  height: 32px;
  color: var(--asc-success-600);
}
.asc-sent__title {
  margin: 0;
  font-size: var(--asc-text-h3);
  font-weight: var(--asc-weight-semibold);
  letter-spacing: var(--asc-tracking-normal);
}
.asc-sent__text {
  margin: 0;
  max-width: 46ch;
  color: var(--asc-text-secondary);
}

/* --- 2. Échec d'envoi -----------------------------------------------------
   Sous le bouton. Un filet supérieur fin et le texte en rouge suffisent à le
   rendre net. Le libellé porte l'information à lui seul, la couleur ne fait
   que la renforcer. */
.asc-submit-error {
  display: flex;
  align-items: flex-start;
  gap: var(--asc-space-2);
  margin-top: var(--asc-space-4);
  padding-top: var(--asc-space-4);
  border-top: 1px solid var(--asc-danger-600);
  font-size: var(--asc-text-sm);
  color: var(--asc-danger-700);
}
.asc-submit-error__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.asc-submit-error b { font-weight: var(--asc-weight-semibold); }

/* --- 3. Note de lecture ---------------------------------------------------
   Précision neutre attachée à un bloc : mention hors taxes sous la grille
   tarifaire, condition d'une offre. Grise, discrète, jamais encadrée. */
.asc-note {
  max-width: 70ch;
  font-size: var(--asc-text-sm);
  color: var(--asc-text-muted);
}
.asc-note--rule {
  padding-left: var(--asc-space-4);
  border-left: 2px solid var(--asc-border);
}

/* ==========================================================================
   ANIMATIONS D'APPARITION (support de MKTASC-15)
   Une seule animation pour tout le site : opacité + translation courte.
   Neutralisée si l'utilisateur a demandé moins de mouvement.
   ========================================================================== */

.asc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--asc-duration-slow) var(--asc-ease),
              transform var(--asc-duration-slow) var(--asc-ease);
}
.asc-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .asc-reveal { opacity: 1; transform: none; }
}