/* ═══════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES — hero de page, fil d'ariane, corps éditorial
   Complète main.css (design system) pour les pages hors accueil.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero de page (nuit, comme la signalétique de la maquette) */
.page-hero{
  background:var(--encre);color:var(--texte-nuit);position:relative;overflow:hidden;
  padding:calc(7.5rem + env(safe-area-inset-top)) var(--pad-x) clamp(2.5rem,7vw,4.5rem);
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 30%,transparent 100%);
}
.page-hero .wrap{display:flex;flex-direction:column;gap:.4rem}
.page-hero h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.9rem,6.5vw,3.7rem);line-height:1.05;letter-spacing:-.018em;color:var(--craie);
  margin:.4em 0 .3em;
}
.page-hero .serif-note{color:var(--texte-nuit-dim);max-width:60ch}
.page-hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.page-hero__chips .chip{color:var(--halogene);border-color:rgba(255,184,77,.5)}

/* Hero avec visuel (images Midjourney) */
.page-hero__grille{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:end}
@media(min-width:1000px){.page-hero__grille{grid-template-columns:1.15fr .85fr;gap:3.5rem}}
.page-hero__figure{
  position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid rgba(91,140,255,.28);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.75);
}
.page-hero__figure img{width:100%;height:clamp(200px,32vw,320px);object-fit:cover;display:block}
.page-hero__figure--svg{
  background:var(--encre-2);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem) clamp(2.6rem,5vw,3.4rem);
}
.page-hero__figure--svg svg{width:100%;height:auto;max-height:300px}
.page-hero__figure--picto{display:flex;align-items:center;justify-content:center}
.page-hero__figure--picto svg{max-width:230px;max-height:240px}
.page-hero__figure figcaption{
  position:absolute;left:.9rem;bottom:.9rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--craie);background:rgba(12,19,34,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.55em .95em;border-radius:.4rem;border:1px solid rgba(91,140,255,.3);
}

/* Fil d'ariane */
.ariane{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-nuit-dim);display:flex;flex-wrap:wrap;gap:.6em;align-items:center;
}
.ariane a{color:var(--scan);transition:color .3s}
.ariane a:hover{color:var(--halogene)}
.ariane li{display:flex;gap:.6em;align-items:center}
.ariane li+li::before{content:"/";opacity:.5}

/* Corps éditorial */
.prose{max-width:72ch}
.prose h2{
  font-family:var(--f-display);font-weight:650;
  font-size:var(--fs-h3);line-height:1.2;color:var(--texte-jour);
  margin:2.2em 0 .7em;
}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--texte-jour-dim);margin-bottom:1.1em}
.prose ul{margin:0 0 1.1em;display:flex;flex-direction:column;gap:.55rem}
.prose ul li{display:flex;gap:.7em;color:var(--texte-jour)}
.prose ul li::before{content:"→";color:var(--infrarouge);font-family:var(--f-mono);flex:none}
.prose a{color:var(--infrarouge);text-decoration:underline;text-underline-offset:3px}

/* Grille page : corps + panneau latéral */
.page-grille{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1080px){.page-grille{grid-template-columns:1fr 340px;align-items:start}}

/* Panneau infos clés (validités, obligation) */
.panneau{
  background:var(--craie);border:1px solid var(--calcaire-2);border-radius:var(--r-card);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1.1rem;
  position:sticky;top:6rem;
}
.panneau h3{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--infrarouge);font-weight:500}
.panneau dl{display:flex;flex-direction:column;gap:.85rem}
.panneau dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-jour-dim)}
.panneau dd{font-weight:600;font-size:.95rem;color:var(--texte-jour);margin-top:.2em}
.panneau .btn{justify-content:center}

/* Maillage : cartes de pages liées */
.liees{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:2rem}
@media(min-width:760px){.liees{grid-template-columns:repeat(3,1fr)}}

/* Variante 4 éléments : 2×2 puis 4 colonnes */
@media(min-width:760px){.liees--quatre{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.liees--quatre{grid-template-columns:repeat(4,1fr)}}

/* ═══════════ ESPACE CLIENT ═══════════ */

/* Encadré d'annonce (accueil + tarifs) */
.annonce{
  margin-top:1rem;background:var(--encre);border-radius:var(--r-card);
  padding:clamp(1.8rem,4.5vw,2.8rem);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;
  color:var(--texte-nuit);
}
.annonce::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--arc-dpe)}
.annonce::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 100% at 0% 50%,#000 30%,transparent 100%);
}
.annonce__picto{width:clamp(56px,7vw,76px);height:auto;flex:none;position:relative}
.annonce__corps{position:relative}
.annonce__corps .chip{color:var(--halogene);border-color:rgba(255,184,77,.5);margin-bottom:.9rem}
.annonce__titre{font-family:var(--f-display);font-weight:660;font-size:clamp(1.35rem,3.6vw,2rem);line-height:1.12;color:var(--craie);margin-bottom:.6rem}
.annonce__corps p{color:var(--texte-nuit-dim);max-width:54ch;font-size:.98rem}
.annonce__meta{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--scan);margin-top:1rem}
.annonce__cta{position:relative;flex:none}
@media(min-width:900px){
  .annonce{grid-template-columns:auto 1fr auto;gap:2.4rem}
}

/* Cartes de l'espace client */
.eclient-grille{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.2rem}
@media(min-width:900px){.eclient-grille{grid-template-columns:1fr 1fr}}
.eclient-carte{
  background:var(--craie);border:1px solid var(--calcaire-2);border-radius:var(--r-card);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem;
}
.eclient-carte h2{font-family:var(--f-display);font-weight:650;font-size:1.25rem;color:var(--texte-jour)}
.eclient-carte__tete{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.eclient-carte__tete .chip{font-size:.6rem}

/* Connexion */
.eclient-login{max-width:440px;margin:0 auto}
.eclient-login .champ{margin-bottom:1.1rem}
.eclient-aide{font-size:.82rem;color:var(--texte-jour-dim);line-height:1.6;margin-top:1rem}

/* Timeline de suivi */
.suivi{display:flex;flex-direction:column;gap:0;counter-reset:jalon}
.jalon{position:relative;padding:0 0 1.25rem 2.1rem}
.jalon::before{
  content:"";position:absolute;left:.45rem;top:.45rem;bottom:-.2rem;width:1px;
  background:var(--calcaire-2);
}
.jalon:last-child{padding-bottom:0}
.jalon:last-child::before{display:none}
.jalon__pt{
  position:absolute;left:0;top:.28rem;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--calcaire-2);background:var(--craie);
}
.jalon--fait .jalon__pt{border-color:var(--dpe-a);background:var(--dpe-a)}
.jalon--actif .jalon__pt{border-color:var(--infrarouge);background:var(--craie);box-shadow:0 0 0 4px rgba(255,78,26,.15)}
.jalon__lbl{font-weight:600;font-size:.95rem;color:var(--texte-jour)}
.jalon--attente .jalon__lbl{color:var(--texte-jour-dim);font-weight:500}
.jalon__date{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--texte-jour-dim);text-transform:uppercase;margin-top:.15rem}

/* Liste de rapports */
.rapports{display:flex;flex-direction:column}
.rapport{
  display:flex;align-items:center;gap:.9rem;padding:.85rem .2rem;
  border-top:1px solid var(--calcaire-2);
}
.rapport:last-child{border-bottom:1px solid var(--calcaire-2)}
.rapport svg{width:20px;height:20px;flex:none;color:var(--infrarouge)}
.rapport__nom{flex:1;font-weight:550;font-size:.93rem;color:var(--texte-jour)}
.rapport__meta{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--texte-jour-dim);text-transform:uppercase}
.rapport__dl{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--infrarouge);display:inline-flex;align-items:center;gap:.45em;
}
.rapport__dl:hover{text-decoration:underline}

/* Paiement */
.paiement__montant{font-family:var(--f-display);font-weight:700;font-size:2.2rem;color:var(--texte-jour);line-height:1}
.paiement__detail{font-size:.85rem;color:var(--texte-jour-dim)}
.paiement__secu{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-jour-dim);display:flex;align-items:center;gap:.6em}
.paiement__secu svg{width:14px;height:14px;color:var(--dpe-a)}

/* Liste plan du site */
.plan-liste{columns:1;column-gap:3rem;max-width:900px}
@media(min-width:760px){.plan-liste{columns:2}}
.plan-liste li{margin-bottom:.6rem;break-inside:avoid}
.plan-liste a{color:var(--texte-jour);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--calcaire-2)}
.plan-liste a:hover{text-decoration-color:var(--infrarouge)}