/* ══════════════════════════════════════════════════════════
   Aurore Énergies · Gabarit A : page de service
   (piliers Courtage, ACC, Producteurs ; sous-pages de service)
   Chargée par includes/templates/service.php ($page_css = ['service']).
   Mobile-first, paliers 768 et 1024 px. Jetons et composants : style.css.
   Spécification : handoff « Page service » et « A · Page de service ».
   ══════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────── */
.service-hero {
  display: flex; flex-direction: column; gap: var(--gap);
  padding-top: 8px;
}
.service-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gap); align-items: center;
}
.service-hero__text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.service-hero__title { max-width: 780px; }
.service-hero__chapo { max-width: 600px; }
.service-hero__actions { display: flex; flex-direction: column; gap: 10px; }
.service-hero__actions .btn--outline { padding: 0 28px; }
.service-hero__reassurance {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.4; color: var(--muted);
}
.service-hero__reassurance .tick { width: 20px; height: 20px; }

/* Visuel « photo » : disque jaune, anneau encre, photo, pastille. */
.service-hero__media {
  position: relative;
  width: 100%; max-width: 640px;
  padding: 24px 20px 36px 0;
}
.service-hero__disc {
  position: absolute; right: -12px; top: 0;
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow);
}
.service-hero__ring {
  position: absolute; left: -14px; bottom: 70px;
  width: 64px; height: 64px; border: 8px solid var(--ink); border-radius: 50%;
}
.service-hero__photo {
  position: relative;
  width: 100%; height: auto; aspect-ratio: 640 / 427;
  object-fit: cover; border-radius: 28px;
}
.service-hero__pastille {
  position: absolute; left: 12px; right: 48px; bottom: 0;
  max-width: 380px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--white); border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.service-hero__pastille-value {
  flex: none; white-space: nowrap;
  font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
.service-hero__pastille-text { font-size: 13px; line-height: 1.35; color: var(--muted); text-wrap: pretty; }

/* Visuel « chiffre » : carte encre « +20 », disque jaune en coin. */
.service-hero__chiffre {
  position: relative;
  width: 100%; max-width: 560px;
  padding: 20px 20px 0 0;
}
.service-hero__chiffre .service-hero__disc { right: 0; width: 36%; }
.service-hero__chiffre-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 28px;
  background: var(--ink); color: var(--white);
  border-radius: 28px;
}
.service-hero__chiffre-value {
  font-size: 88px; line-height: .9; font-weight: 800; letter-spacing: -.04em;
  color: var(--yellow);
}
.service-hero__chiffre-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.service-hero__chiffre-text { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }

/* ── Blocs ──────────────────────────────────────────────── */
.service-block--papier { background: var(--paper); }

/* Corps de texte d'un bloc (paragraphes, listes, encadrés).
   eyebrow() rend un <p> : sans :not(.eyebrow), cette règle (0,1,1) battrait
   .eyebrow (0,1,0) et grossirait le sur-titre à 16 / 17 px. */
.service-prose > p:not(.eyebrow) {
  font-size: var(--body-lg); line-height: 1.6; color: var(--text-2);
  text-wrap: pretty;
}
.service-prose strong { font-weight: 700; color: var(--ink); }
.service-prose a:not(.btn) {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
}
.service-prose a:not(.btn):hover { color: var(--ink); text-decoration-color: var(--ink); }
.section--ink .service-prose > p:not(.eyebrow) { color: var(--on-dark-2); }
.section--ink .service-prose strong,
.section--ink .service-prose a:not(.btn) { color: var(--white); }
.service-prose__h3 { margin-top: 8px; font-size: 21px; font-weight: 700; line-height: 1.25; text-wrap: balance; }

/* Section texte + visuel : une colonne, puis deux à partir de 1024 px ;
   le visuel passe à gauche une fois sur deux (--reverse). */
.service-split {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--gap); align-items: center;
}
.service-split__text {
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0; max-width: 640px;
}
.service-split__text .steps { margin-top: 8px; }
/* Étapes de la page de service (steps3 du handoff) : pastille de 36 px,
   chiffre à 15 px, corps décalé de 5 px. L'accueil garde 34 / 14 / 4 px. */
.service-split .step__num { width: 36px; height: 36px; font-size: 15px; }
.service-split .step__body { padding-top: 5px; }
.service-split__visual {
  justify-self: center;
  width: 100%; max-width: 520px; min-width: 0;
}
.service-split__visual--large { max-width: 560px; }

/* Section de texte seul : en mobile, même rythme qu'une section à visuel
   (titre puis texte à 18 px d'écart) ; en desktop, titre collant dans le
   tiers gauche et texte dans les deux tiers droits (voir plus bas). */
.service-split--texte { gap: 18px; align-items: start; }
.service-split__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; min-width: 0;
}
.service-split__head .h2 { margin: 0; }
/* Même largeur que le texte tant qu'il n'y a qu'une colonne : le titre
   garde les coupures qu'il avait avant (sans effet en deux colonnes). */
.service-split--texte .service-split__head { max-width: 640px; }
/* De 1024 à 1279 px, la colonne du titre ne fait que 300 à 400 px : titre à
   34 px au plus, sinon il s'étale sur 6 ou 7 lignes d'un mot. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .service-split--texte .service-split__head .h2 { font-size: min(var(--h2), 34px); }
}

/* Liste à coches (disque encre, coche jaune). */
.service-checks { display: flex; flex-direction: column; gap: 12px; }
.service-checks__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: var(--body-lg); line-height: 1.5; color: var(--ink);
}
.service-checks__icon {
  flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}

/* Puces (point encre dans un anneau jaune) et liste numérotée. */
.service-ul, .service-ol { display: flex; flex-direction: column; gap: 10px; }
.service-ul > li, .service-ol > li {
  display: flex; gap: 12px;
  font-size: var(--body-lg); line-height: 1.6; color: var(--text-2);
}
.service-ul > li::before {
  content: ''; flex: none;
  width: 8px; height: 8px; margin: 10px 2px 0 3px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--yellow);
}
.service-ol { counter-reset: service-ol; }
.service-ol > li { counter-increment: service-ol; }
.service-ol > li::before {
  content: counter(service-ol); flex: none;
  width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; line-height: 1;
}

/* Boutons d'une section (« Nous contacter », « À propos… »). */
.service-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* Encadrés « Bon à savoir » et « Attention ». */
.service-encadre {
  display: flex; gap: 14px;
  margin: 8px 0; padding: 22px; border-radius: 24px;
}
.service-encadre--bon { background: var(--tint); }
.section--tint .service-encadre--bon { background: var(--white); }
.service-encadre--attention { background: var(--white); border: 2px solid var(--ink); }
.service-encadre__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.service-encadre--bon .service-encadre__icon { background: var(--yellow); color: var(--ink); }
.service-encadre--attention .service-encadre__icon { background: var(--ink); color: var(--yellow); }
.service-encadre__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.service-encadre__title { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.service-encadre__text { font-size: 16px; line-height: 1.55; color: var(--text-2); }
.service-encadre__text a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--ring); text-underline-offset: 4px;
}

/* Chiffre clé : bordure encre, disque jaune en coin. */
.service-chiffre {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 520px; margin: 8px 0; padding: 24px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 24px;
}
.service-chiffre::before {
  content: ''; position: absolute; right: -28px; top: -28px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--yellow);
}
.service-chiffre__value {
  position: relative;
  font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.service-chiffre__label { position: relative; font-size: 17px; font-weight: 700; line-height: 1.35; }
.service-chiffre__source { position: relative; font-size: 13px; line-height: 1.45; color: var(--muted); }
.service-chiffre__source a { color: var(--ochre); text-decoration: underline; text-underline-offset: 2px; }

/* Emplacement visuel nommé (tant que l'image n'existe pas) et image. */
.service-empl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 24px;
  background: var(--tint); border: 2px dashed var(--ring); border-radius: 28px;
  text-align: center;
}
.service-empl__label {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ochre-tint);
}
.service-empl__desc { max-width: 320px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.service-media { overflow: hidden; border-radius: 28px; }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-empl--4-3,  .service-media--4-3  { aspect-ratio: 4 / 3; }
.service-empl--3-2,  .service-media--3-2  { aspect-ratio: 3 / 2; }
.service-empl--16-9, .service-media--16-9 { aspect-ratio: 16 / 9; }
.service-empl--1-1,  .service-media--1-1  { aspect-ratio: 1 / 1; }
.service-empl--3-4,  .service-media--3-4  { aspect-ratio: 3 / 4; }

/* En-tête de bloc (sur-titre, H2, introduction). */
.service-intro { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.service-intro--logos { gap: 12px; }

/* ── Pour qui ── */
.service-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 32px;
}
.service-card {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; padding: 22px;
  background: var(--white); border-radius: 24px;
}
.section--white .service-card { background: var(--paper); }
/* Textes de plus de 60 signes : une carte par rangée sous 768 px. */
.service-cards--long { grid-template-columns: minmax(0, 1fr); }
.service-card__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.service-card__title { font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; }
.service-card__text { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ── Logos fournisseurs ── */
.service-logos { display: flex; flex-direction: column; gap: 28px; }
/* Tuiles blanches du socle : sur un bloc blanc, elles passent au papier. */
.section--white .service-logos .logos__item { background: var(--paper); }

/* ── Tableau du coût complet ── */
.service-tableau { display: flex; flex-direction: column; gap: 20px; max-width: 880px; }
.service-tableau .tableau { margin: 0; }
/* Cotes du tableau de la page de service (isTable du handoff), sans toucher
   au .tableau du socle que le gabarit B partage : cadre arrondi à 20 px,
   cellules 14 / 16 px (rangées de 51 px), en-tête centré verticalement,
   1re colonne de 170 px au moins, texte des cellules en gris secondaire. */
.service-tableau .tableau__scroll { border-radius: 20px; }
.service-tableau .tableau__table th,
.service-tableau .tableau__table td { padding: 14px 16px; }
.service-tableau .tableau__table thead th { vertical-align: middle; }
.service-tableau .tableau__table thead th:first-child,
.service-tableau .tableau__table tbody th { min-width: 170px; }
.service-tableau .tableau__table td { color: var(--muted); }
/* 480 px au moins pour 2 colonnes : le cadre défile sous 522 px de large
   (480 px de tableau + 2 px de bordure + 2 × 20 px de gouttière). Au-delà
   de 2 colonnes, le minimum du socle (150 px par colonne) s'applique. */
.service-tableau .tableau--cols-2 .tableau__table { min-width: 480px; }
/* L'aide « Faites glisser… » ne s'affiche que si le cadre défile : requête
   de conteneur sur la figure (480 px de tableau + 2 px de bordure), juste
   quelle que soit la gouttière. Sans prise en charge, l'aide reste visible
   sous 768 px, comme dans le socle. */
.service-tableau .tableau--cols-2 { container-type: inline-size; }
@container (min-width: 482px) {
  .service-tableau .tableau--cols-2 .tableau__hint { display: none; }
}

/* ── Chiffres clés ── */
.service-chiffres {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; margin-top: 28px;
}
.service-chiffres .service-chiffre { max-width: none; margin: 0; }

/* ── Pour aller plus loin ── */
.service-liens {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 16px; margin-top: 28px;
}
.service-liens > li { display: flex; min-width: 0; }
.service-lien {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 22px 22px 24px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 24px;
  transition: border-color .15s ease-out;
}
.service-lien:hover { color: var(--ink); border-color: var(--ink); }
.service-lien__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.service-lien__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.service-lien__text { font-size: 15px; line-height: 1.45; color: var(--muted); }
.service-lien__arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease-out;
}
.service-lien:hover .service-lien__arrow { background: var(--yellow-hover); }

/* ── FAQ et Sources : titre à gauche (1/3), liste à droite (2/3) en desktop ── */
.service-faq {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--gap);
}
.service-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.service-faq__list { min-width: 0; }

/* ══════════════════════════════════════════════════════════
   Tablette : ≥ 768 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Texte courant de la page de service : 16 px sous 768 px, 17 px dès 768
     (jeton --body du handoff). Le socle ne passe --body-lg à 17 px qu'à 1024. */
  .is-service { --body-lg: 17px; }
  .service-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .service-chiffre__value { font-size: 48px; }
  .service-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-cards--long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════
   Desktop : ≥ 1024 px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .service-hero--photo .service-hero__grid,
  .service-hero--chiffre .service-hero__grid {
    grid-template-columns: minmax(min-content, 1.05fr) minmax(0, 1fr);
  }
  /* Les deux boutons restent sur une rangée (handoff : btnDir row, nowrap).
     De 1024 à 1100 px environ, ils dépassent la colonne de texte de 418 px :
     ils peuvent mordre sur la gouttière, comme dans la référence, mais en
     gardant 16 px avant le visuel (la marge négative réduit leur largeur
     min-content ; au-delà, la piste min-content élargit la colonne de texte).
     La référence, elle, pose « Notre méthode » sur la carte « +20 » à 1024. */
  .service-hero--photo .service-hero__actions,
  .service-hero--chiffre .service-hero__actions {
    flex-wrap: nowrap;
    margin-right: calc(16px - var(--gap));
  }

  .service-prose__h3 { font-size: 23px; }

  .service-split--visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-split--reverse .service-split__visual { order: -1; }

  /* Le texte garde sa mesure de 640 px et s'aligne sur le bord droit du
     conteneur, comme les cartes, la FAQ et les visuels ; le titre prend tout
     le reste (300 px au moins), donc moins de lignes à mesure que l'écran
     s'élargit. Garde-fou : un mot plus long que la colonne se coupe au lieu
     de déborder sur le texte. */
  .service-split--texte {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 640px);
    column-gap: var(--gap);
  }
  .service-split--texte .service-split__head {
    position: sticky; top: calc(var(--header-h) + 24px);
  }
  .service-split--texte .service-split__head .h2 { overflow-wrap: anywhere; }

  /* 4 cartes par rangée ; 2, 3, 5 ou 6 cartes restent en rangées équilibrées. */
  .service-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-cards--3,
  .service-cards--5,
  .service-cards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .service-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-liens { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .service-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}