/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit D, À propos (/a-propos)
   Spécification : design_handoff_site_aurore/Page a-propos.dc.html.
   Mobile d'abord, puis paliers 768 et 1024 px. Jetons et composants
   communs (fil d'Ariane, sur-titre, .h1-page, .h2, .lead) : style.css.
   ══════════════════════════════════════════════════════════ */

/* Jetons propres à la page (valeurs du handoff : mobile / 768 / 1024 → 1440). */
.is-apropos {
  --apropos-body: 16px;          /* 16 / 17 / 17 */
  --apropos-big: 56px;           /* 56 / 64 / 72 → 96 */
  --apropos-quote: 24px;         /* 24 / 30 / 30 → 38 */
}

/* Texte courant des sections (Pourquoi, Zone). Accepte aussi des listes,
   liens et passages en gras quand les données passent par 'body_html'. */
.apropos-texte {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 640px; min-width: 0;
  font-size: var(--apropos-body); line-height: 1.6; color: var(--text-2);
}
.apropos-texte p { text-wrap: pretty; }
.apropos-texte strong { font-weight: 700; color: var(--ink); }
.apropos-texte a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
}
.apropos-texte a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.apropos-texte ul { display: flex; flex-direction: column; gap: 10px; }
.apropos-texte li { position: relative; padding-left: 26px; }
.apropos-texte li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--yellow);
}

/* ── Hero : fil d'Ariane, texte, portrait ───────────────── */
.apropos-hero {
  display: flex; flex-direction: column; gap: var(--gap);
  padding-top: 8px;
}
.apropos-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gap); align-items: center;
}
.apropos-hero__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.apropos-hero__title { max-width: 720px; }
.apropos-hero__lead { max-width: 600px; }

/* Petits textes : le handoff les laisse à l'interligne « normal »
   d'Urbanist (1,2 environ), pas au 1,5 hérité du body. Sur-titre de 13 px :
   bloc de 15,6 px ; ligne lieu de 15 px : 18 px. */
.apropos-hero .eyebrow,
.apropos-zone .eyebrow,
.apropos-reperes__title { line-height: 1.2; }

/* Pastille calée sur la première ligne : à 360 px, la ligne passe sur deux.
   (18 px de ligne − 10 px de pastille) / 2 = 4 px. */
.apropos-hero__lieu {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--muted);
}
.apropos-hero__dot {
  flex: none; width: 10px; height: 10px; margin-top: 4px;
  border-radius: 50%; background: var(--yellow);
}

/* Portrait détouré sur disque jaune, 320 px au plus. */
.apropos-portrait {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; max-width: 320px; justify-self: center;
}
.apropos-portrait__disc {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.apropos-portrait__img { width: 82%; height: auto; }
/* Légende comme dans le handoff : bloc de 16 px à l'interligne 1,2, nom en
   bloc (18 px), rôle EN LIGNE (14 px) ; sa ligne garde donc la hauteur du
   texte de 16 px (19,2 px). Total : 21,6 + 19,2 ≈ 41 px. */
.apropos-portrait__caption { display: block; font-size: 16px; line-height: 1.2; text-align: center; }
.apropos-portrait__name { display: block; font-size: 18px; font-weight: 800; }
.apropos-portrait__role { font-size: 14px; color: var(--muted); }

/* ── Pourquoi Aurore Énergies existe ────────────────────── */
.apropos-pourquoi {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 20px var(--gap);
}

/* ── Nos engagements ────────────────────────────────────── */
.apropos-engagements { display: flex; flex-direction: column; gap: 32px; }
.apropos-engagements__list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.apropos-engagement {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 24px; border-radius: 24px; background: var(--white);
}
.apropos-engagement__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.apropos-engagement__icon--jaune { background: var(--yellow); color: var(--ink); }
.apropos-engagement__icon--encre { background: var(--ink); color: var(--yellow); }
.apropos-engagement__title { font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: pretty; }
.apropos-engagement__text { font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ── Zone d'intervention : texte et carte ───────────────── */
.apropos-zone {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 28px var(--gap); align-items: center;
}
.apropos-zone__text { display: flex; flex-direction: column; gap: 16px; max-width: 560px; min-width: 0; }
.apropos-zone__sources { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.apropos-zone__sources-title { font-size: 15px; font-weight: 700; }

.apropos-carte {
  width: 100%; max-width: 640px; justify-self: center;
  padding: 12px; border-radius: 28px; background: var(--paper);
}
/* Repère 600 × 407 du tracé ; les étiquettes HTML suivent sa largeur (cqi). */
.apropos-carte__frame {
  position: relative; width: 100%; aspect-ratio: 600 / 407;
  container-type: inline-size;
}
.apropos-carte__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.apropos-carte__label {
  position: absolute;
  border-radius: var(--pill); line-height: 1.2; white-space: nowrap;
}
/* Positions du handoff : Nantes (356,8 ; 250,2), Clisson (382,7 ; 268,7). */
.apropos-carte__label--nantes {
  left: 59.47%; top: 61.43%;
  transform: translate(calc(-100% - 2.4cqi), -115%);
  padding: .3cqi 1.4cqi;
  background: var(--white); color: var(--ink);
  font-size: 3cqi; font-weight: 700;
}
.apropos-carte__label--clisson {
  left: 63.78%; top: 66%;
  transform: translate(3.4cqi, -10%);
  padding: .4cqi 1.6cqi;
  background: var(--ink); color: var(--yellow);
  font-size: 3.4cqi; font-weight: 800;
}

/* ── En trois repères (fond encre) ──────────────────────── */
.apropos-reperes { display: flex; flex-direction: column; gap: 32px; }
.apropos-reperes__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.apropos-repere {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding-top: 20px; border-top: 2px solid var(--line-dark-2);
}
.apropos-repere__value {
  font-size: var(--apropos-big); line-height: 1; font-weight: 800;
  letter-spacing: -.03em; color: var(--yellow);
  overflow-wrap: break-word;
}
.apropos-repere__label { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--white); }

/* ── Citation du fondateur ──────────────────────────────── */
.apropos-citation { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.apropos-citation__figure {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 860px; margin-inline: auto; text-align: center;
}
.apropos-citation__quote p {
  font-size: var(--apropos-quote); line-height: 1.25; font-weight: 600;
  letter-spacing: -.015em; text-wrap: balance;
}
/* Signature : même principe que la légende du portrait. Nom 16 px à toutes
   les largeurs (le handoff ne fixe pas de taille : 16 px hérités), rôle 14 px
   en ligne. Total : 19,2 + 19,2 ≈ 38 px. */
.apropos-citation__id { display: block; font-size: 16px; line-height: 1.2; }
.apropos-citation__name { display: block; font-weight: 700; }
.apropos-citation__role { font-size: 14px; color: var(--muted); }
.apropos-citation__bio {
  max-width: 640px; text-align: center;
  font-size: var(--apropos-body); line-height: 1.6; color: var(--text-2);
}

/* ══════════════════════════════════════════════════════════
   Tablette : ≥ 768 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .is-apropos {
    --apropos-body: 17px;
    --apropos-big: 64px;
    --apropos-quote: 30px;
  }
  .apropos-engagements__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apropos-reperes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px (progression linéaire jusqu'à 1440 px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .is-apropos {
    --apropos-big: clamp(72px, 5.77vw + 12.92px, 96px);
    --apropos-quote: clamp(30px, 1.923vw + 10.31px, 38px);
  }
  .apropos-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .apropos-pourquoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .apropos-engagements__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apropos-zone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   Impression (règles du handoff, gabarit D). [data-print="hide"]
   (en-tête, bloc contact, pied, bulle) est déjà masqué par style.css.
   ══════════════════════════════════════════════════════════ */
@media print {
  body, main, main * { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  main svg path { fill: #fff !important; stroke: #000 !important; }
  [data-print="keep"], figure, blockquote { break-inside: avoid; }
}