/* ==========================================================================
   PAGE À PROPOS — SURCOUCHE ESTHÉTIQUE « SIGNAL »
   --------------------------------------------------------------------------
   Se charge APRÈS about.css et l'affine vers l'esthetique du demo Salient
   "Signal" : fond clair, tres grande typographie, beaucoup d'air, filets fins,
   transitions douces. On garde la structure existante (hero + intro + accordion)
   et le systeme de donnees (about.json) : c'est un habillage, pas une refonte.
   ========================================================================== */

/* Palette et rythme propres a About-Signal. */
.about {
  --sig-bg: #f5f3ee;          /* fond clair chaud, tres legerement creme */
  --sig-ink: #14110f;         /* encre presque noire */
  --sig-muted: #6b645d;       /* texte secondaire */
  --sig-line: rgba(20, 17, 15, 0.12);
  --about-max: 1240px;
  background: var(--sig-bg);
  color: var(--sig-ink);
}

/* Le fond clair s'etend a toute la page (le body reste cohérent). */
body.cms-front-route--about {
  background: #f5f3ee;
}

/* --------------------------------------------------------------------------
   HERO — immense titre, beaucoup d'air (signature Signal)
   -------------------------------------------------------------------------- */
.about-hero {
  max-width: var(--about-max);
  margin: 0 auto;
  padding: clamp(6rem, 20vh, 14rem) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 8vh, 6rem);
}

.about-hero__inner {
  max-width: var(--about-max);
}

.about-hero__title {
  font-family: var(--font-accent, Georgia, serif);
  /* Aligne sur les titres des autres pages CMS (category-catalog__title). */
  font-size: clamp(38px, 6vw, 100px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sig-ink);
}

.about-hero__brand {
  font-style: italic;
}

/* L'accroche quitte le hero pour rejoindre l'intro visuellement : on la place
   comme un grand chapeau, pleine largeur, sous le titre. */
.about-hero__lead {
  max-width: none;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  font-family: var(--font-primary, "DM Sans", sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
  color: var(--sig-muted);
}

/* --------------------------------------------------------------------------
   INTRO — grands paragraphes aeres, colonne de lecture confortable
   -------------------------------------------------------------------------- */
.about-intro {
  max-width: var(--about-max);
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 5rem) clamp(4rem, 10vh, 8rem);
  border-bottom: 1px solid var(--sig-line);
}

.about-intro__inner {
  /* Colonne decalee a droite facon editorial Signal : le texte n'occupe pas
     toute la largeur, il respire. */
  max-width: 62ch;
  margin-left: auto;
}

.about-intro__p {
  font-family: var(--font-primary, "DM Sans", sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.7;
  margin: 0 0 1.6em;
  color: var(--sig-ink);
}

.about-intro__p:last-child {
  margin-bottom: 0;
}

/* Premier paragraphe legerement mis en avant. */
.about-intro__p:first-child {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.55;
  color: var(--sig-ink);
}

/* --------------------------------------------------------------------------
   ACCORDÉON — filets fins, grands intitules, beaucoup d'air
   -------------------------------------------------------------------------- */
.about-accordion {
  max-width: var(--about-max);
  margin: 0 auto clamp(5rem, 14vh, 10rem);
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  border-top: none;
}

.about-item {
  border-bottom: 1px solid var(--sig-line);
}

.about-item__head {
  padding: clamp(1.8rem, 4vw, 3rem) 0;
}

.about-item__label {
  font-family: var(--font-accent, Georgia, serif);
  /* Grands intitules facon Signal. */
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--sig-ink);
}

.about-item__head:hover .about-item__label {
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

/* Icone +/- un peu plus grande, dans un cercle discret. */
.about-item__icon {
  width: 26px;
  height: 26px;
}

.about-item__icon::before {
  width: 26px;
}

.about-item__icon::after {
  height: 26px;
}

/* Contenu deplie : colonne de lecture, aligne a droite comme l'intro. */
.about-item__content {
  max-width: 62ch;
  margin-left: auto;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-primary, "DM Sans", sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--sig-muted);
}

/* Transition d'ouverture un peu plus longue et douce (Signal = calme). */
.about-item__body {
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-item__content > * {
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

/* --------------------------------------------------------------------------
   Header transparent conserve, logo noir (About est clair) — deja gere par
   about.css. On ne le duplique pas ici.
   --------------------------------------------------------------------------
   Accessibilite : focus clavier visible sur les entetes d'accordeon.
   -------------------------------------------------------------------------- */
.about-item__head:focus-visible {
  outline: 2px solid var(--sig-ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .about-item__body,
  .about-item__content > * {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .about-hero__inner {
    max-width: 100%;
  }

  .about-intro__inner,
  .about-item__content {
    margin-left: 0;
  }
}