/* =============================================================
   PAGES VITRINE — à propos, services, contact, FAQ, pages légales.

   Chargée uniquement quand is_page() est vrai (voir inc/assets.php).
   404.php ne peut donc PAS en dépendre : il est écrit avec les seules
   classes de layout.css et components.css.

   Rien ici qui existe déjà ailleurs : les boutons, cartes, champs,
   encarts, badges et accordéons viennent de components.css.
   ============================================================= */

/* -------------------------------------------------------------
   Listes de mise en page
   Ces <ul>/<ol> sont des grilles ou des piles, pas des listes à
   puces : on retire la puce et le retrait hérités de base.css,
   sans quoi chaque grille est décalée de 1,25 em.
   ------------------------------------------------------------- */
.phead__facts,
.gammes,
.brands,
.brand-tile__list,
.steps,
.ticks,
.cinfo__list,
.hours {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phead__facts > li,
.gammes > li,
.brands > li,
.steps > li,
.ticks > li,
.brand-tile__list > li,
.cinfo__list > li,
.hours > li {
  margin: 0;
}

/* =============================================================
   BANDEAU DE TITRE — commun à toutes les pages vitrine
   ============================================================= */
.phead { border-bottom: 1px solid var(--border-soft); }
.phead .sechead { margin-bottom: 0; }
/* Le H1 d'une page dédiée est bien plus grand que celui d'un en-tête de
   section : l'écart de .sechead__text est alors trop serré sous le titre. */
.phead .sechead__lead { margin-top: var(--s-4); }

.phead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
/* La pastille mesure bien 44 px, mais c'est le LIEN qu'on touche : sans
   min-height sur lui, la cible réelle ne faisait que la hauteur du texte
   (22 px mesurés à 360 px). Le lien occupe donc toute la pastille, et la
   pastille ne garde que son rembourrage horizontal. */
.phead__fact {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
}
.phead__fact .ico { color: var(--primary); flex: none; }
.phead__fact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text-strong);
  font-weight: var(--fw-semi);
  text-decoration: none;
}
.phead__fact a:hover { color: var(--primary); }

/* Les raccourcis de la page Services sont des .chip (38 px de socle dans
   components.css). Sur une page vitrine ils sont la navigation principale :
   on les remonte à la zone tactile du contrat. */
.phead__facts .chip { min-height: var(--tap); }

/* =============================================================
   FORMULAIRE DE RECHERCHE (searchform.php)
   Empilé par défaut — c'est l'état dont dépend la 404. Dès qu'il y
   a la place, le bouton remonte à côté du champ.
   ============================================================= */
@media (min-width: 30rem) {
  .searchform .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
  }
  .searchform .field__label { grid-column: 1 / -1; }
}

/* =============================================================
   PAGE GÉNÉRIQUE (page.php)
   ============================================================= */
.page-empty__cta { margin-top: var(--s-5); }
.page-updated {
  margin-top: var(--s-8);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.page-edit { margin-top: var(--s-3); font-size: var(--t-xs); }

/* =============================================================
   À PROPOS
   ============================================================= */
.about {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-9));
  align-items: start;
}
@media (min-width: 62rem) {
  .about { grid-template-columns: minmax(0, 1fr) 24rem; }
}
.about__photo {
  width: 100%;
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
}
.about__facts-title { font-size: var(--t-lg); margin-bottom: var(--s-5); }

/* ---- Gammes ------------------------------------------------- */
.gamme__title { font-size: var(--t-base); margin-bottom: var(--s-2); }
.gamme__title a { color: var(--text-strong); text-decoration: none; }
.gamme:hover .gamme__title a { color: var(--primary); }
.gamme__text {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0;
}
/* La carte est un flex vertical : le badge se colle en bas, aligné à gauche. */
.gamme__flag { margin-top: auto; align-self: flex-start; padding-top: var(--s-4); }

/* ---- Marques ------------------------------------------------- */
.brand-tile__name {
  font-size: var(--t-base);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-1);
  border-bottom: 1px solid var(--border-soft);
}
.brand-tile__list { font-size: var(--t-sm); }
.brand-tile__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
}
.brand-tile__list a:hover { color: var(--primary); }
.brand-tile__list > li + li { border-top: 1px solid var(--border-soft); }

/* ---- Étapes -------------------------------------------------- */
.step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  margin-bottom: var(--s-4);
  background: var(--primary-soft);
  color: var(--primary);
  clip-path: var(--hex-clip);        /* hexagone repris du logo */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
}
.step__title { font-size: var(--t-base); margin-bottom: var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--text-muted); }

/* =============================================================
   BANDEAU D'APPEL À L'ACTION (fond profond)
   ============================================================= */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.cta-band__text { max-width: 48ch; }
.cta-band__text h2 { margin-bottom: var(--s-3); }
/* `flex: none` ferait déborder la page à 360 px : les deux boutons
   mesurent ensemble plus que l'écran. On les laisse donc rétrécir —
   .cluster les empile tout seul quand la place manque. */
.cta-band__actions { flex: 0 1 auto; }

/* =============================================================
   SERVICES
   ============================================================= */
.service {
  display: grid;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  align-items: center;
}
@media (min-width: 62rem) {
  .service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  /* Une section sur deux inverse le sens de lecture — l'ordre DOM,
     lui, ne bouge pas : le clavier suit toujours titre puis détails. */
  .service--flip .service__text { order: 2; }
}

.service__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 62px;
  margin-bottom: var(--s-4);
  background: var(--primary-soft);
  color: var(--primary);
  clip-path: var(--hex-clip);
}
.service__title { margin-bottom: var(--s-3); }
.service__lead {
  font-size: var(--t-lg);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  margin-bottom: var(--s-3);
}
.service__body { color: var(--text-muted); margin-bottom: 0; }
.service__cta { margin-top: var(--s-5); }

.service__points-title {
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.ticks { display: flex; flex-direction: column; gap: var(--s-3); }
.ticks > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
/* Recalage optique en em (voir .cinfo__list .ico) : aucune valeur en px. */
.ticks .ico { color: var(--primary); flex: none; margin-top: 0.15em; }

/* =============================================================
   CONTACT
   ============================================================= */
.cform__feedback { margin-bottom: var(--s-6); }
.cform__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.cform__intro {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}

.cform__grid { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) {
  .cform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cform__wide { grid-column: 1 / -1; }
}

.cform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}
.cform__send { min-width: 14rem; }
.cform__legal {
  flex: 1 1 18ch;
  margin: 0;
  font-size: var(--t-xs);
  color: var(--text-muted);
}

/* ---- Colonne de droite --------------------------------------- */
.cinfo__title { font-size: var(--t-lg); margin-bottom: var(--s-5); }
.cinfo__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.cinfo__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
/* Recalage optique de l'icône sur la première ligne de texte : exprimé en em,
   il suit la taille de police au lieu de rester bloqué sur une valeur en px. */
.cinfo__list .ico { color: var(--primary); flex: none; margin-top: 0.15em; }
.cinfo__label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
/* Téléphone, e-mail, lien vers la carte : ce sont des raccourcis autonomes,
   pas des liens au fil du texte. Ils doivent donc tenir la zone tactile,
   même quand ils tiennent sur une seule ligne. */
.cinfo__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.cinfo__map { margin-top: var(--s-1); }
.cinfo__wa { margin-top: var(--s-2); }
.cinfo__note { margin-top: var(--s-4); }

/* ---- Horaires (sortie de stenamed_hours_list()) ---------------- */
.hours { display: flex; flex-direction: column; gap: var(--s-1); }
.hours > li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-sm);
}
.hours__day { color: var(--text-muted); }
.hours__time { font-weight: var(--fw-semi); color: var(--text-strong); white-space: nowrap; }

/* =============================================================
   FAQ
   ============================================================= */
/* Le bouton d'accordéon vit dans un titre : la FAQ reste parcourable
   par la liste des titres d'un lecteur d'écran. Le titre ne doit rien
   imposer visuellement, le bouton porte déjà sa typographie. */
.acc__h { margin: 0; font-size: var(--t-base); }

.qa-aside__title { font-size: var(--t-lg); }
.qa-aside__text {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-block: var(--s-3) var(--s-5);
}
.qa-aside__tel { margin-top: var(--s-3); }
.qa-aside__hours {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
}

/* Sans JavaScript, un panneau [hidden] resterait fermé pour toujours :
   les réponses seraient purement et simplement inaccessibles. On les
   rouvre donc tant que app.js n'a pas marqué la page comme scriptée
   (même mécanisme que `.js .reveal` dans components.css). */
html:not(.js) .acc__panel[hidden] { display: block !important; }
html:not(.js) .acc__btn { cursor: default; }
html:not(.js) .acc__btn .ico { display: none; }