/* Pages de services (/creation-site-vitrine/, /application-mobile/) : en-tête, parcours, cadre, référence.
   S'appuie sur les jetons et composants de site.css et sections.css. */

/* ---------- En-tête de page ---------- */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; line-height: 1.4; color: var(--graphite); }
.fil li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.fil li + li::before { content: "/"; color: color-mix(in srgb, var(--graphite) 55%, transparent); }
.fil [aria-current] { color: var(--ink); }
.fil a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.fil a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.page-head {
  padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--rule);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.page-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.page-visuel { display: flex; justify-content: center; }
.page-visuel .phone { width: min(250px, 100%); transform: rotate(2.5deg); }
.page-head .label { margin-top: 6px; }
.page-head h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-stretch: 86%; font-weight: 740; line-height: 0.98; letter-spacing: -0.022em; max-width: 16ch; margin: 18px 0 20px; }
.page-lead { font-size: clamp(1.06rem, 1.6vw, 1.22rem); color: var(--graphite); max-width: 58ch; }
.page-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-facts li {
  font: 500 0.84rem/1 var(--f-mono); letter-spacing: 0.01em; color: var(--ink);
  padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card);
}

/* ---------- Ce qui est compris ---------- */
.inclus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.inclus li { position: relative; padding: 20px 24px 20px 30px; border-bottom: 1px solid var(--rule); color: var(--graphite); }
.inclus li:nth-child(odd) { border-right: 1px solid var(--rule); }
.inclus li::before { content: ""; position: absolute; left: 0; top: 1.72em; width: 14px; height: 2px; background: var(--accent); }
.inclus b { color: var(--ink); font-weight: 600; }
.note { margin-top: 22px; color: var(--graphite); font-size: 0.95rem; max-width: 70ch; }

/* ---------- Parcours : frise verticale ---------- */
.parcours { list-style: none; margin: 0; padding: 0; counter-reset: etape; max-width: 880px; }
.etape { counter-increment: etape; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 28px); padding-bottom: 38px; }
.etape::before {
  content: counter(etape, decimal-leading-zero); grid-row: 1 / span 3;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: 500 0.85rem/1 var(--f-mono); letter-spacing: 0.04em; color: var(--accent);
  background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); position: relative; z-index: 1;
}
.etape > * { grid-column: 2; justify-self: start; }
.etape > .roles { justify-self: stretch; }
.etape:not(:last-child)::after { content: ""; position: absolute; left: 25.5px; top: 52px; bottom: 0; width: 1px; background: var(--rule); }
.etape h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-stretch: 90%; padding-top: 12px; }
.etape > p { color: var(--graphite); margin-top: 8px; max-width: 62ch; }
.roles { margin: 16px 0 0; display: grid; gap: 10px; }
.roles div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule); }
.roles dt { font: 500 0.74rem/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite); padding-top: 2px; }
.roles dd { margin: 0; color: var(--ink); }
.roles .vous { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.roles .vous dt { color: var(--accent); }
.jalon { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 0.78rem/1 var(--f-mono); letter-spacing: 0.03em; color: var(--ink); }
.jalon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Cadre du projet : chiffres clés ---------- */
.cadre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.regle { padding: 26px 24px 24px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); display: grid; gap: 8px; align-content: start; }
.regle h3 { font-size: 1.15rem; font-stretch: 92%; line-height: 1.2; letter-spacing: -0.01em; }
.regle h3 strong { display: block; margin-bottom: 8px; font: 700 clamp(2.2rem, 4vw, 2.9rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -0.02em; color: var(--accent); }
.regle p { color: var(--graphite); font-size: 0.95rem; }

/* ---------- Référence et zone ---------- */
.sites-ref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.site-ref { display: grid; gap: 12px; align-content: start; }
.site-ref .browser { width: 100%; margin-bottom: 10px; }
.site-ref h3 { font-size: 1.45rem; font-stretch: 90%; }
.site-ref p { color: var(--graphite); max-width: 52ch; }
.site-ref .vitrine-lien { margin-top: 0; }
.ref-titre { font-size: clamp(2.1rem, 3.8vw, 3rem); font-stretch: 86%; margin-top: 14px; }
.preuves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preuve { padding: 26px; border: 1px solid var(--rule); border-radius: 18px; background: var(--card); display: grid; gap: 10px; align-content: start; }
.preuve-top { display: flex; align-items: center; gap: 12px; }
.preuve-top img { width: 44px; height: 44px; border-radius: 11px; }
.preuve h3 { font-size: 1.4rem; font-stretch: 90%; }
.preuve p { color: var(--graphite); font-size: 0.96rem; }
.preuve .case-actions { margin-top: 6px; }
.zone > * { max-width: 760px; }
.zone p { color: var(--graphite); font-size: 1.06rem; margin-top: 14px; }

/* ---------- Appel final ---------- */
.appel .hero-actions { margin-top: 28px; }

@media (hover: hover) {
  .regle, .preuve { transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease); }
  .regle:hover, .preuve:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 38%, var(--rule)); box-shadow: 0 30px 50px -40px rgba(10, 12, 20, 0.4); }
}

@media (max-width: 860px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-visuel { justify-content: flex-start; margin-top: 8px; }
  .page-visuel .phone { width: 180px; transform: rotate(-2deg); }
  .cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuves, .sites-ref { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .inclus, .cadre { grid-template-columns: 1fr; }
  .inclus li:nth-child(odd) { border-right: 0; }
  .inclus li { padding-right: 0; }
  .roles div { grid-template-columns: 1fr; gap: 4px; }
  .etape { grid-template-columns: 40px minmax(0, 1fr); }
  .etape::before { width: 40px; height: 40px; font-size: 0.78rem; }
  .etape:not(:last-child)::after { left: 19.5px; top: 40px; }
  .etape h3 { padding-top: 7px; }
}