/* =========================================================
   UI FONDATIONS
   Couche additive posée sur Bootstrap (bootstrap.min.css) et
   tokens.css. Règle du projet : on ne modifie jamais
   bootstrap.min.css et on n'utilise jamais !important. Il est
   normal ici de redéfinir une propriété déjà posée par une
   classe Bootstrap (ex. arrière-plan par défaut d'un composant) :
   "additif" signifie que la source Bootstrap reste intacte et
   que le fichier est chargé après elle, pas que chaque règle
   est nouvelle.
   Les surcharges d'éléments nus (body, h1-h4) sont légitimes :
   Bootstrap Reboot les pose lui aussi via des sélecteurs
   d'éléments, pas via des classes de composant.
   ========================================================= */

/* BLANC, et c'est la règle du système : une page est blanche par défaut, et
   une section ne déclare un fond que lorsqu'elle en a besoin. Le papier ivoire
   (--section-papier) reste disponible pour qui le demande explicitement, mais
   il n'est plus imposé à tout le monde en silence. */
body {
  background: var(--section-base);
  color: var(--text);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  overflow-x: clip; /* le panneau mobile fermé ne doit pas élargir la page */
}

a {
  color: inherit;
  text-decoration: none;
}

/* Liens de texte courant : soulignés au survol (le chrome à classe — nav,
   boutons, fil d'Ariane — n'est pas concerné). */
p a:hover,
li:not([class]) a:hover {
  text-decoration: underline;
}

/* Échelle de titres alignée sur Bootstrap : $headings-font-weight 500,
   $headings-line-height 1.2, $headings-margin-bottom $spacer * .5.
   Les tailles viennent des tokens --fs-h1..h6 (base × 2.5 / 2 / 1.75 / 1.5…). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-2);
}

h1 { color: var(--color-titre);     font-size: var(--fs-h1); }
h2 { color: var(--color-titre);     font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* $paragraph-margin-bottom = $spacer ; l'interlignage suit le corps. */
p {
  line-height: var(--lh-base);
  margin-bottom: var(--space-3);
}

/* Le pétrole plein distingue les accents de grand titre ; sa version sombre
   reste réservée aux petits textes, qui réclament un contraste renforcé. */
/* Rose de marque et non pétrole : un accent de titre est du GRAND texte,
   seuil 3:1, que le rose tient (3,77 sur blanc, 3,56 sur le papier). Le
   pétrole reste la couleur des actions ; l'accent, lui, signe l'identité.
   À NE PAS descendre dans un paragraphe : 3,77 est sous les 4,5 du texte
   courant. */
.ui-accent { color: var(--color-brand-pink); }

/* ---- Conteneur fluide (équivalent de l'ancien .container) ----
   Bootstrap .container a des paliers de largeur fixes ; on garde
   ici le comportement fluide actuel (min(1280px, 100% - 64px))
   en posant simplement un max-width + un padding sur
   .container-fluid, sans toucher --bs-gutter-x (pour ne pas
   perturber le gutter des .row Bootstrap imbriquées). */
.ui-container {
  max-width: 1320px;          /* $container-max-widths xxl */
  padding-inline: var(--space-4);  /* $grid-gutter-width / 2 = 0.75rem × 2 */
}

@media (width <= 1100px) {
  .ui-container {
    padding-inline: var(--space-3);
  }
}

/* ---- Rythme des sections ----
   Bootstrap n'a pas de composant « section » : son échelle d'espacement
   s'arrête à 3rem, trop court pour séparer deux organismes pleine largeur.
   On prolonge la même échelle plutôt que d'inventer des valeurs. */
.ui-section {
  padding: var(--space-7) 0;
}

@media (width <= 560px) {
  .ui-section {
    padding: var(--space-6) 0;
  }
}

/* Section de TÊTE — la première d'une page sans hero. Elle porte le <h1> et
   doit s'écarter de l'en-tête, que rien ne pousse au-dessus d'elle.
   Un seul modificateur pour ce rôle : il existait auparavant en deux
   exemplaires (.ui-listing-section--lead et .ui-faq--lead), qui posaient la
   même valeur — deux noms pour une seule idée. */
.ui-section--lead {
  padding-top: var(--space-6);
}

.ui-section-heading {
  margin-bottom: var(--space-5);
}

.ui-section-heading h1,
.ui-section-heading h2 {
  margin-bottom: var(--space-3);
}

/* Le CHAPÔ de l'en-tête, et lui seul. Le sur-titre est lui aussi un <p>
   enfant direct : sans l'exclusion, ce sélecteur — (0,1,1), une classe et un
   élément — l'emportait sur .ui-eyebrow et .ui-eyebrow--accent, tous deux en
   (0,1,0), et repeignait en brun un sur-titre que le DS veut corail.
   Le symptôme se voyait dans tout organisme posant son sur-titre dans un
   .ui-section-heading ; la charte le contournait déjà à la main pour le
   showcase clair (.ui-showcase--light .ui-eyebrow). On traite la cause.
   L'idiome est celui qu'emploie déjà .ui-faq-row. */
.ui-section-heading > p:not(.ui-eyebrow) {
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.ui-section-heading.centered {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

@media (width <= 560px) {
  .ui-section-heading.centered {
    text-align: left;
  }
}

/* .split : posé sur un .row Bootstrap, remplace l'ancienne
   grille 12 colonnes maison par des col-* explicites dans le
   HTML ; ce bloc ne fait que l'alignement vertical commun. */
.ui-section-heading.split {
  align-items: end;
}

/* ---- Animation d'apparition au scroll (comportement custom,
   sans équivalent Bootstrap) ---- */
.ui-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.ui-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.ui-faq-item.ui-reveal {
  transition: box-shadow 0.2s ease, opacity 0.6s ease var(--reveal-delay, 0s), transform 0.6s ease var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .ui-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}