/* ==========================================================================
   AMPIXELWEB — pages.css
   Styles propres aux pages intérieures (service, réalisations, fiche projet,
   devis). Chargé après sections.css sur ces pages uniquement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête de page intérieure
   -------------------------------------------------------------------------- */

.pagehero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  /* Bandeau volontairement haut : c'est la première chose qu'on voit d'une page
     intérieure, et il doit tenir tout seul même quand il ne porte qu'un titre.
     Le vh domine sur écran normal, les bornes en rem évitent qu'il écrase le
     contenu sur un portable en paysage ou qu'il s'étire sur un très grand écran. */
  padding-block: clamp(4.5rem, 13vh, 8.5rem) clamp(5rem, 14vh, 9rem);
  overflow: hidden;
}
.pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 75% at 78% 20%, rgba(249, 115, 22, 0.2) 0%, rgba(20, 16, 11, 0) 62%),
    radial-gradient(ellipse 60% 60% at 8% 95%, rgba(251, 191, 36, 0.08) 0%, rgba(20, 16, 11, 0) 60%);
  pointer-events: none;
}
.pagehero > .shell { position: relative; }
/* 0.45 donnait 4,0:1 pour des liens de navigation réels en 11,5 px capitales,
   sous le seuil AA. 0.62 monte à 6,3:1. */
.pagehero .crumbs { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); color: rgba(242, 235, 221, 0.62); }
.pagehero .crumbs a:hover { color: var(--orange); }
.pagehero .crumbs [aria-current] { color: var(--on-dark-mid); }
.pagehero h1 { color: var(--parchment); max-width: 20ch; margin-bottom: 1.4rem; }
.pagehero .lead { color: var(--on-dark-mid); }
.pagehero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; }

/* --------------------------------------------------------------------------
   Bandeau centre, avec un trait manuscrit sous la partie mise en avant du
   titre. Le trait s'accroche au .t-em deja present dans le balisage : aucune
   page n'a eu besoin d'etre modifiee. Il est volontairement limite au
   .pagehero -- .t-em sert aussi dans une douzaine de titres de sections, ou
   un trait partout deviendrait du bruit.
   -------------------------------------------------------------------------- */

.pagehero > .shell { text-align: center; }
.pagehero .crumbs { justify-content: center; }
/* Interlignage desserre : sur un titre de deux lignes, le trait manuscrit
   descend sous la premiere et venait toucher la seconde.
   Le titre est aussi plus gros qu'ailleurs : dans un bandeau de cette hauteur,
   un .t-h1 standard flottait au milieu du vide. */
.pagehero h1 {
  max-width: 22ch;
  margin-inline: auto;
  line-height: 1.2;
  font-size: clamp(2.5rem, 6.2vw, 4.8rem);
}
.pagehero .lead { margin-inline: auto; }
.pagehero__actions { justify-content: center; }
/* Bandeau sans accroche : le trait manuscrit descend sous le titre et venait
   presque toucher les boutons, l'accroche ne jouant plus les entremetteurs.
   Le sélecteur ne mord que dans ce cas précis — h1 immédiatement suivi des
   boutons, donc sans paragraphe entre les deux. Les bandeaux qui ont gardé
   leur accroche ne bougent pas. */
.pagehero h1 + .pagehero__actions { margin-top: 3.4rem; }

.pagehero .t-em {
  /* Le trait est un fond, pas un ::after sur un inline-block. L'inline-block
     creait un point de coupure juste apres le mot : sur la page A propos, la
     virgule qui suivait « independant » se retrouvait rejetee seule en tete de
     la ligne suivante. En restant inline, le mot et sa ponctuation ne se
     separent plus. Le padding-bas n'ecarte pas les lignes -- il est ignore
     dans le calcul de la hauteur d'un inline -- il ne fait que reserver la
     zone ou le fond se dessine. */
  padding-bottom: 0.30em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%2026%22%20preserveAspectRatio=%22none%22%20fill=%22none%22%20stroke=%22rgb%28249,115,22%29%22%20stroke-width=%223.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%2013%20C60%205%20200%203%20288%209%20C297%2010%20296%2015%20285%2017%20C215%2024%2075%2025%2015%2019%20C8%2018%2010%2016%2020%2016%20C95%2013%20195%2013%20260%2016%22/%3E%3C/svg%3E") no-repeat center bottom / 100% 0.40em;
}

@media (max-width: 560px) {
  .pagehero .t-em { padding-bottom: 0.24em; background-size: 100% 0.32em; }
}

/* Bandeau suivi d'une section sur le MÊME fond encre (page Devis).
   Les deux fonds sont pourtant identiques — mais la lueur du ::before, elle,
   s'arrêtait net au bord bas du bandeau. Ce saut de luminosité, sur toute la
   largeur, se lisait comme un trait horizontal tiré entre le titre et le
   formulaire. Le masque éteint progressivement la lueur avant le raccord :
   le bas du bandeau redevient de l'encre pure, et la jonction disparaît.
   Un masque plutôt qu'un calque posé par-dessus : rien ne vient assombrir le
   texte du bandeau, et les dégradés ne sont pas recopiés — donc rien à
   resynchroniser le jour où on les retouche. */
.pagehero--continu::before {
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(0deg, transparent 0%, #000 22%);
}

/* --------------------------------------------------------------------------
   Corps de page en deux colonnes (contenu + colonne collante)
   -------------------------------------------------------------------------- */

.split-page {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
/* min-width:auto par défaut sur un enfant de grille : sans ça, un contenu
   insécable empêche toute la colonne de rétrécir. */
.split-page > *,
.results > *,
.cards > * { min-width: 0; }
.side-card {
  position: sticky;
  /* Degagement sous l'en-tete collant (~76px depuis le retrait du bandeau). */
  top: 88px;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.side-card--dark { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.side-card--dark h3 { color: var(--parchment); }
.side-card h3 { font-size: 1.3rem; margin-bottom: 0.8rem; }
.side-card p { font-size: 0.94rem; color: var(--text-mid); margin-bottom: 1.6rem; }
.side-card--dark p { color: var(--on-dark-mid); }
.side-card .btn { width: 100%; }
/* Deux CTA empilés dans la carte : sans cette respiration ils se touchent,
   les boutons faisant déjà 100 % de large. */
.side-card .btn + .btn { margin-top: 0.75rem; }
.side-card__list { display: grid; gap: 0.75rem; margin-bottom: 1.6rem; }
.side-card__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; font-size: 0.92rem; color: var(--text-mid); align-items: start; }
.side-card--dark .side-card__list li { color: var(--on-dark-mid); }
.side-card__list svg { flex: none; margin-top: 0.35rem; color: var(--orange); }

/* --------------------------------------------------------------------------
   Contenu rédactionnel
   -------------------------------------------------------------------------- */

.prose > * + * { margin-top: 1.3rem; }
.prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 3rem; margin-bottom: 1.2rem; }
.prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); margin-top: 2.2rem; margin-bottom: 0.8rem; }
.prose p { color: var(--text-mid); max-width: 68ch; }
.prose ul { display: grid; gap: 0.85rem; max-width: 68ch; }
/* La puce est posée en absolu et non en colonne de grille. En grille, chaque
   élément inline d'un <li> devenait un item séparé : « <strong>Titre</strong>
   suite de la phrase » se cassait en deux, le gras dans la deuxième colonne et
   le reste rejeté à la ligne dans la première. Or c'est le motif de toutes les
   listes rédactionnelles du site. Le retrait et l'alignement des lignes
   suivantes sont identiques à ceux de la grille qu'elle remplace. */
.prose ul li {
  position: relative;
  padding-left: calc(6px + 0.85rem);
  color: var(--text-mid);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.prose strong { color: var(--text); font-weight: 500; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* Encadré d'appui */
.callout {
  padding: 1.5rem 1.8rem;
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--sand);
  font-size: 1rem;
  line-height: 1.65;
}
.callout strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   Grille « pour qui / ce qui est inclus »
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.11);
  color: var(--ember);
}
.card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.card p { font-size: 0.94rem; color: var(--text-mid); }

/* --------------------------------------------------------------------------
   Fiche projet
   -------------------------------------------------------------------------- */

.project-hero {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--espresso);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(-4rem, -6vh, -2.5rem);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--bark);
}
.project-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 85% at 28% 22%, var(--tint, rgba(249, 115, 22, 0.3)) 0%, rgba(20, 16, 11, 0) 68%);
}
.project-hero .work__screen { max-width: 760px; }

.project-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid var(--line);
}
.project-fact__key {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.project-fact__val { font-size: 1.02rem; }

.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}
.result {
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border-radius: var(--r-md);
  background: var(--espresso);
  border: 1px solid var(--bark);
}
.result b {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.6rem;
}
.result span { font-size: 0.92rem; color: var(--on-dark-mid); }

/* Navigation projet suivant / précédent */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.pager a {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--parchment);
  text-decoration: none;
  transition: background 0.35s var(--ease);
}
.pager a:hover { background: var(--sand); }
.pager a + a { text-align: right; }
/* Un seul projet publie : plus de "projet suivant", le retour au portfolio
   prend toute la largeur. */
.pager--solo { grid-template-columns: 1fr; }
.pager__dir { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.6rem; display: block; }
.pager__name { font-family: var(--font-titre); font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* --------------------------------------------------------------------------
   Page devis — barre d'étapes
   -------------------------------------------------------------------------- */

.stepbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.stepbar__cell {
  padding: 1.1rem 1.3rem;
  background: rgba(242, 235, 221, 0.04);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.86rem;
  color: rgba(242, 235, 221, 0.5);
}
.stepbar__cell b {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  font-size: 0.72rem;
  font-weight: 400;
}
.stepbar__cell--active { background: rgba(249, 115, 22, 0.12); color: var(--parchment); }
.stepbar__cell--active b { border-color: var(--orange); color: var(--orange); }

.contact-direct {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.contact-tile {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  text-decoration: none;
  display: block;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.contact-tile:hover { border-color: var(--orange); transform: translateY(-3px); }
.contact-tile__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.11);
  color: var(--ember);
  margin-bottom: 1.1rem;
}
.contact-tile__key { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.4rem; }
.contact-tile__val { font-family: var(--font-titre); font-size: 1.2rem; margin-bottom: 0.3rem; }
.contact-tile__hint { font-size: 0.85rem; color: var(--text-mid); }

/* --------------------------------------------------------------------------
   Page Services — rangées alternées « texte / visuel »

   Le visuel accepte une photo via --photo, comme les cartes du carrousel
   d'accueil : style="--c: 249, 115, 22; --photo: url('../img/x.jpg')".
   Le chemin part de assets/css/ (cette feuille), pas de la page HTML : voir la
   note detaillee dans sections.css, au-dessus de .cf__photo.
   Tant qu'aucune photo n'est fournie, un composé clair prend le relais, teinté
   par --c. Volontairement clair : un aplat sombre sur ces fonds parchemin se
   lirait comme un trou, pas comme une image.
   -------------------------------------------------------------------------- */

.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 5rem);
}

/* Le visuel suit le texte dans le flux, donc il tombe à droite. --flip le
   renvoie à gauche sans toucher à l'ordre de lecture ni au balisage. */
.svc-row--flip .svc-row__media { order: -1; }

.svc-row__body .eyebrow { margin-bottom: 1.2rem; }
.svc-row__body h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 1.1rem;
}
.svc-row__body > p { color: var(--text-mid); max-width: 54ch; }

.svc-row__list { display: grid; gap: 0.75rem; margin-top: 1.7rem; }
.svc-row__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.96rem;
  color: var(--text-mid);
}
.svc-row__list svg { flex: none; margin-top: 0.35rem; color: var(--orange); }

.svc-row__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }

.svc-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
}

/* Repli composé + repère chiffré, effacés dès qu'une photo est fournie. */
.svc-row__ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  color: rgba(20, 16, 11, 0.34);
  background:
    radial-gradient(ellipse 78% 58% at 24% 20%, rgba(var(--c, 249, 115, 22), 0.42) 0%, rgba(var(--c, 249, 115, 22), 0) 64%),
    radial-gradient(ellipse 68% 55% at 84% 84%, rgba(var(--c, 249, 115, 22), 0.24) 0%, rgba(var(--c, 249, 115, 22), 0) 62%),
    linear-gradient(150deg, var(--paper) 0%, var(--sand) 62%, #ded1b6 100%);
}
/* Un filet intérieur : le visuel se tient comme un cadre, pas comme un vide. */
.svc-row__ghost::after {
  content: "";
  position: absolute;
  inset: clamp(0.7rem, 1.6vw, 1.3rem);
  border: 1px solid rgba(20, 16, 11, 0.10);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.svc-row__media[style*="--photo"] .svc-row__ghost { display: none; }

/* --------------------------------------------------------------------------
   Visuels : <img> plutot que background-image

   Une image posee en fond CSS n'existe pour personne d'autre que l'oeil : ni
   pour Google Images, ni pour un lecteur d'ecran, ni pour le referencement du
   contenu de la page. Les visuels sont donc de vraies balises <img> avec un
   texte alternatif ; l'element parent ne sert plus que de cadre.

   :has(img) remplace l'ancien test [style*="--photo"] : le repli decoratif ne
   s'efface plus parce qu'une variable CSS est presente, mais parce qu'une
   image est reellement la. Plus honnete, et robuste si le style inline bouge.
   -------------------------------------------------------------------------- */
.svc-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-row__media:has(img) .svc-row__ghost { display: none; }
.svc-row__ghost b {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .split-page { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .project-facts { grid-template-columns: repeat(2, 1fr); }
  .results { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 2rem; }
  /* Sur une colonne, le visuel passe toujours en premier : il annonce le
     service avant qu'on en lise le détail. */
  .svc-row__media,
  .svc-row--flip .svc-row__media { order: -1; }
  .svc-row__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
  /* Sur téléphone, 13vh + 14vh de bandeau laissaient près de 250px de vide
     autour du titre : ce qui donne de l'ampleur sur un écran large ne fait que
     repousser le contenu sous la ligne de flottaison sur un écran de 844px. */
  .pagehero { padding-block: clamp(3rem, 8.5vh, 4.5rem) clamp(3.2rem, 9.5vh, 5rem); }
  .pagehero h1 + .pagehero__actions { margin-top: 2.4rem; }

  .cards, .cards--2 { grid-template-columns: 1fr; }
  .contact-direct { grid-template-columns: 1fr; }
  .stepbar { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { text-align: left; }
  .project-hero { margin-top: 0; aspect-ratio: 4 / 3; }
}