/* ==========================================================================
   Generic content pages
   ========================================================================== */
.page-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--line-100);
}
.page-hero .eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-800);
  background: var(--green-100);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.page-hero h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; max-width: 22ch; }
.page-hero p { margin-top: 16px; font-size: 16px; color: var(--ink-500); max-width: 56ch; line-height: 1.6; }

.section { padding: 64px 0; }
.section--tint { background: var(--paper-tint); }
.section h2 { font-size: 26px; margin-bottom: 12px; }
.section .section-lede { color: var(--ink-500); font-size: 15px; max-width: 60ch; margin-bottom: 36px; line-height: 1.6; }

/* Ligne de boutons en fin de section (ex. bandeau de fin de page). */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Note de bas de section : ce qui reste en option payante sous les forfaits.
   Volontairement discrète — c'est une précision, pas un argument. */
.section .section-note {
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 70ch;
  margin-top: 28px;
  padding-left: 14px;
  border-left: 2px solid var(--line-200);
}

/* SG-24 (testmainV5C) « Pictos au trait » : grille à filets fins (gap 1px
   sur fond var(--line-200), qui dessine les traits de séparation), posée
   juste au-dessus du bloc Ménage. Le trait du picto se retire au survol,
   comme un dessin qu'on efface (stroke-dasharray/dashoffset). */
.sg24 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-200);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sg24 article { background: var(--paper); padding: 2rem 1.4rem; text-align: center; transition: background .35s; }
.sg24 article:hover { background: var(--green-100); }
/* Sélecteurs volontairement en enfant DIRECT (>) : sans ça, l'effacement du
   trait s'appliquerait aussi aux petites icônes des panneaux déroulants
   ci-dessous, qui se retrouveraient en pointillés. */
.sg24 > article > svg { width: 44px; height: 44px; stroke: var(--green-800); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sg24 > article > svg * { stroke-dasharray: 120; stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.sg24 > article:hover > svg * { stroke-dashoffset: 240; }
.sg24 h4 { margin: 1rem 0 .3rem; font-size: 1rem; color: var(--ink-900); }
.sg24 p { margin: 0; font-size: .84rem; color: var(--ink-500); line-height: 1.5; }

/* ==========================================================================
   PRESTATIONS — les 3 cartes et leur panneau déroulant (page Prestations)

   Le panneau n'est PAS dans la grille des cartes : il est posé juste en
   dessous, dans le même conteneur. Il occupe donc naturellement toute la
   largeur des trois cartes, quelle que soit celle qui est survolée.

   L'ouverture anime `grid-template-rows` de 0fr à 1fr : c'est ce qui permet
   de dérouler jusqu'à la hauteur RÉELLE du contenu, sans avoir à deviner un
   `max-height` (qui rend l'animation saccadée dès que la valeur devinée est
   trop grande).
   ========================================================================== */
.presta-panel {
  display: grid;
  grid-template-rows: 1fr;   /* déroulé par défaut — voir @media (hover) */
}
/* L'enfant qui rogne : overflow:hidden crée aussi un contexte de bloc, ce qui
   empêche la marge du panneau de s'échapper au-dessus quand il est replié. */
.presta-panel > div { overflow: hidden; min-height: 0; }
.presta-panel__inner {
  margin-top: 10px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  background: var(--paper-tint);
  padding: 26px 24px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
}
.presta-lot h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
}
.presta-lot h4 svg { width: 20px; height: 20px; flex: none; color: var(--green-800); }
.presta-lot ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.presta-lot li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
}
.presta-lot li svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--green-700); }

/* Le repli n'existe QUE là où un vrai survol est possible. Sur écran tactile
   les trois panneaux restent ouverts : sans souris, un contenu qui ne
   s'ouvre qu'au survol serait tout simplement inatteignable. */
/* Les cartes s'ouvrent au survol MAIS se verrouillent au clic : le curseur
   doit donc annoncer qu'elles réagissent. */
.presta-card { cursor: pointer; }
.presta-card:focus-visible { outline: 2px solid var(--green-800); outline-offset: -2px; }
/* Carte verrouillée : elle garde le fond teinté du survol pour qu'on voie
   d'un coup d'œil laquelle est épinglée, même souris ailleurs. */
.sg24 > article.presta-card.is-locked { background: var(--green-100); }

@media (hover: hover) {
  .presta-panel {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .4s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
  }
  /* :has() relie la carte survolée à SON panneau. Le dernier sélecteur garde
     le panneau ouvert quand la souris quitte la carte pour y descendre. */
  .presta-explore:has(.presta-card--1:hover) .presta-panel--1,
  .presta-explore:has(.presta-card--2:hover) .presta-panel--2,
  .presta-explore:has(.presta-card--3:hover) .presta-panel--3,
  .presta-panel:hover {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  /* Panneau ÉPINGLÉ au clic. La classe .is-open est posée et retirée par
     js/site.js, qui sait à la fois quelle carte est épinglée et si une carte
     est survolée — le survol commande toujours.
     Le calcul est fait en JavaScript et non en CSS : un sélecteur du type
     :not(:has(.presta-card:hover)) n'est pas réévalué de façon fiable au
     passage de la souris, le panneau restait alors ouvert à tort. */
  .presta-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

/* Un déroulé de 400ms devient une gêne pour qui a demandé moins d'animation :
   on garde l'ouverture, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .presta-panel { transition: none; }
}

/* Prose (mentions légales, politique de confidentialité) */
.prose { max-width: 760px; padding: 48px 0 96px; }
.prose h2 { font-size: 20px; margin-top: 40px; margin-bottom: 12px; color: var(--green-900); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 15px; color: var(--ink-700); line-height: 1.7; }
.prose ul { margin: 12px 0; padding-left: 20px; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose .updated-at { color: var(--ink-300); font-size: 13px; margin-bottom: 32px; }

/* Service cards (Prestations) */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--paper);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.service-card:hover { box-shadow: var(--shadow-card); border-color: var(--line-200); }
.service-card__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-800);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.service-card p { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin-bottom: 16px; }
.service-card ul { display: flex; flex-direction: column; gap: 8px; }
.service-card li {
  font-size: 13.5px;
  color: var(--ink-700);
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-card li svg { width: 14px; height: 14px; color: var(--green-700); flex: none; }

/* Packs */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Colonne flex + margin-top:auto sur le bouton (plus bas) : les trois cartes
   ont des textes de longueurs différentes, mais leurs boutons se retrouvent
   tous à la même hauteur, collés au bas de la carte. */
.pack-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 32px;
  background: var(--paper-tint);
}
.pack-card.is-featured {
  background: var(--green-900);
  color: #fff;
  border-color: var(--green-900);
}
.pack-card.is-featured h3,
.pack-card.is-featured .pack-card__note { color: #fff; }
.pack-card.is-featured p { color: rgba(255,255,255,0.75); }
.pack-card.is-featured li { color: rgba(255,255,255,0.9); }
/* Le bouton "Demander un devis" de cette carte est sur un fond déjà vert
   très foncé (--green-900). Sans cette règle, le survol du bouton primaire
   (qui passe aussi en --green-900) le rendrait invisible, fondu dans le
   fond de la carte. On inverse donc son survol : fond clair, texte foncé. */
.pack-card.is-featured .btn--primary:hover {
  background: #FFFFFF;
  color: var(--green-900);
}
.pack-card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.pack-card__note { font-size: 12.5px; color: var(--green-800); font-weight: 600; margin-bottom: 14px; display: block; }
.pack-card p { font-size: 13.5px; color: var(--ink-500); margin-bottom: 18px; }
.pack-card ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.pack-card li { font-size: 13.5px; color: var(--ink-700); display: flex; gap: 8px; align-items: flex-start; }
.pack-card li svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--green-700); }
/* Pousse le bouton au bas de la carte : c'est ce qui aligne les trois. */
.pack-card .btn { margin-top: auto; }

/* Values grid (À propos) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.value-card { display: flex; gap: 16px; padding: 8px 0; }
.value-card__icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--green-100); color: var(--green-800);
  display: flex; align-items: center; justify-content: center;
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
.value-card p { font-size: 13.5px; color: var(--ink-500); line-height: 1.6; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
}
.stat-row .stat b { font-size: 30px; }
/* Précision sous un libellé de chiffre clé (majoration, jours non travaillés).
   Volontairement discrète : elle doit être lisible sans concurrencer le
   chiffre. Reprend le réglage de .stat small de home.css, que ces pages ne
   chargent pas — seul l'accueil l'utilise. */
.stat-row .stat small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-300);
}

/* ==========================================================================
   PARCOURS NUMÉROTÉ (page Notre approche)
   Les numéros ne sont pas décoratifs : ils portent une vraie chronologie,
   l'étape 3 ne peut pas précéder l'étape 2. C'est la seule raison pour
   laquelle ils sont là.
   ========================================================================== */
.etapes { display: flex; flex-direction: column; gap: 1px; background: var(--line-200); border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; }
.etape {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--paper);
  padding: 24px 26px;
}
.etape b {
  flex: none;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--line-200);          /* volontairement pâle : c'est un repère, pas un titre */
  letter-spacing: -0.02em;
  min-width: 52px;
}
.etape h4 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin: 0 0 6px; color: var(--ink-900); }
.etape p { margin: 0; font-size: 14px; color: var(--ink-500); line-height: 1.6; max-width: 68ch; }

@media (max-width: 560px) {
  .etape { gap: 14px; padding: 20px 18px; }
  .etape b { font-size: 24px; min-width: 38px; }
}

/* Timeline (recrutement) */
.job-list { display: flex; flex-direction: column; gap: 1px; background: var(--line-200); border: 1px solid var(--line-200); border-radius: var(--radius-md); overflow: hidden; }
.job-item { background: var(--paper); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.job-item h4 { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.job-item span { font-size: 13px; color: var(--ink-500); }

/* FAQ accordion (native <details>) */
.faq-list { max-width: 780px; }
.faq-item {
  border-bottom: 1px solid var(--line-200);
  padding: 20px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-900);
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex: none; width: 18px; height: 18px; color: var(--ink-500); transition: transform .2s ease; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { margin-top: 12px; font-size: 14.5px; color: var(--ink-500); line-height: 1.65; max-width: 68ch; }

/* Narrow form pages (contact, mot de passe oublié, demande d'accès) */
.narrow-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 0 100px;
}
.narrow-form .auth-card { text-align: left; }
.narrow-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  resize: vertical;
  min-height: 120px;
}
.narrow-form textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}
.form-success {
  display: none;
  background: var(--green-100);
  color: var(--green-900);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  margin-top: 16px;
}
.form-success.is-visible { display: block; }

/* Contact info cards */
.contact-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.contact-info__card {
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
}
.contact-info__card svg { width: 22px; height: 22px; color: var(--green-800); margin: 0 auto 10px; }
.contact-info__card h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.contact-info__card p { font-size: 13.5px; color: var(--ink-500); }

@media (max-width: 900px) {
  .service-grid, .pack-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .contact-info { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Encadrés d'information (mentions légales, politique de confidentialité)
   ========================================================================== */
.notice {
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 24px 0 32px;
}
.notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.notice--warning {
  background: #FEF6E7;
  border: 1px solid #F0D9A8;
  color: #6B4E12;
}
.prose .notice p { font-size: 13.5px; color: inherit; }
.prose a { color: var(--green-800); text-decoration: underline; }
.prose a:hover { color: var(--green-900); }