/* ═══════════════════════════════════════════════════════════
   Pages par service — se superpose à style.css
   ═══════════════════════════════════════════════════════════ */

/* L'en-tête est opaque dès le départ sur ces pages : pas de héros
   photo derrière lui, donc rien à laisser transparaître. */
.pg .site-header::before{ opacity:0; }
.pg .site-header::after{ opacity:1; }

/* ---------- Ouverture ---------- */
.pg-hero{ padding:calc(86px + clamp(28px,4vw,56px)) 0 clamp(40px,5vw,68px); background:var(--white); }
.pg-crumb{ font-size:.82rem; color:var(--grey); margin-bottom:clamp(22px,3vw,34px); }
.pg-crumb a{ border-bottom:1px solid var(--line); }
.pg-crumb a:hover{ color:var(--red); border-color:var(--red); }
.pg-crumb span[aria-hidden]{ padding-inline:7px; color:var(--grey-2); }

.pg-hero__row{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,56px); align-items:center;
}
.pg-hero h1{
  font-size:clamp(2.1rem,4.2vw,3.4rem);
  letter-spacing:-.038em; margin-bottom:1.1rem;
}
.pg-hero__lead{ font-size:clamp(1rem,1.2vw,1.12rem); color:var(--grey); max-width:46ch; }
.pg-hero__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8rem; }

.pg-facts{ display:flex; flex-wrap:wrap; margin-top:2rem; border-top:1px solid var(--line); }
.pg-facts > div{ padding:14px 20px 0 0; margin-right:20px; border-right:1px solid var(--line); }
.pg-facts > div:last-child{ border-right:0; margin-right:0; }
.pg-facts dt{
  font-family:var(--font-d); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.pg-facts dd{
  margin:4px 0 0; font-family:var(--font-d); font-weight:600;
  font-size:.98rem; color:var(--ink);
}

.pg-hero__fig{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--bone-2); }
.pg-hero__fig img{ width:100%; height:clamp(280px,32vw,420px); object-fit:cover; }

/* ---------- Sections ---------- */
.pg-sec{ background:var(--bone); }
.pg-sec--alt{ background:var(--white); }
.pg-mid{ text-align:center; margin-bottom:clamp(30px,4vw,50px); }

.pg-cols{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,70px); align-items:start;
}
.pg-cols .h2{ margin-bottom:1.3rem; }
.pg-h2b{ margin-bottom:1.6rem; }
.pg-signs li{ font-size:1rem; }

.pg-note{
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:clamp(24px,3vw,32px);
}
.pg-note strong{ display:block; font-family:var(--font-d); font-size:1.15rem; margin-bottom:.6rem; }
.pg-note p{ font-size:.94rem; color:rgba(255,255,255,.7); margin-bottom:1.4rem; }

/* ---------- Étapes ---------- */
.pg-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.pg-steps li{ background:var(--bone); padding:26px 24px 28px; }
.pg-step__n{
  display:block; font-family:var(--font-d); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; color:var(--red-ink); margin-bottom:1.1rem;
}
.pg-steps h3{ font-size:1.08rem; margin-bottom:.55rem; }
.pg-steps p{ font-size:.9rem; color:var(--grey); }

/* ---------- Bon à savoir ---------- */
/* Suit « Comment on procède » sur le même fond blanc : un filet sépare les
   deux sections sans doubler l'espace qui les sépare. */
.pg-guide{ background:var(--white); padding-top:0; }
.pg-guide__in{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,70px); align-items:start;
  border-top:1px solid var(--line); padding-top:var(--sect);
}
.pg-guide .h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
.pg-guide__blocs{ display:grid; gap:clamp(26px,3vw,34px); }
.pg-guide__bloc h3{ font-size:1.18rem; letter-spacing:-.02em; margin-bottom:.55rem; }
.pg-guide__bloc p{ font-size:.97rem; line-height:1.7; color:var(--grey); max-width:64ch; }

/* ---------- Questions ---------- */
.pg-q{ padding:18px 0; border-top:1px solid var(--line); }
.pg-q:first-of-type{ border-top:0; padding-top:0; }
.pg-q h3{ font-size:1rem; margin-bottom:.5rem; }
.pg-q p{ font-size:.94rem; color:var(--grey); }

/* ---------- Formulaire ---------- */
.pg-form{ background:var(--white); }
.pg-form__in{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4vw,60px); align-items:start;
}
.pg-form .lead{ margin-top:1.1rem; }
.pg-form__tel{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.pg-form__tel > a{
  display:block; font-family:var(--font-d); font-weight:700;
  font-size:1.6rem; letter-spacing:-.03em;
}
.pg-form__tel > a:hover{ color:var(--red); }
.pg-form__tel span{ display:block; font-size:.88rem; color:var(--grey); margin-top:.4rem; }
.pg-form__tel span a{ border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.pg-form .form{ background:var(--bone); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px); }

/* ---------- Autres interventions ---------- */
.pg-other{ background:var(--bone); }
.pg-other__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
/* Page 404 : les six services, en deux rangées de trois plutôt que 5 + 1 */
.pg-other__grid--6{ grid-template-columns:repeat(3,1fr); }
.pg-card{
  display:flex; align-items:center;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 18px;
  font-family:var(--font-d); font-weight:600; font-size:.95rem; line-height:1.25;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.pg-card:hover{ border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px); }

/* ---------- Politique de confidentialité ---------- */
.pg-hero--legal .pg-hero__lead{ max-width:60ch; }
.legal__maj{ margin-top:1.2rem; font-size:.85rem; color:var(--grey); }
/* Lien vers le site anglais de la page 404 */
.legal__maj a{ color:var(--ink); border-bottom:1px solid var(--red); }
.legal__maj a:hover{ color:var(--red-ink); }
.pg-legal{ background:var(--bone); }
.legal{ max-width:74ch; }
.legal h2{ font-size:clamp(1.2rem,2vw,1.45rem); letter-spacing:-.02em; margin:2.6rem 0 .8rem; }
.legal h2:first-child{ margin-top:0; }
.legal p,.legal li{ font-size:.97rem; line-height:1.7; color:var(--grey); }
.legal p{ margin:0; }
.legal p + p,.legal ul + p{ margin-top:.9rem; }
.legal ul{ margin:.9rem 0 0; padding-left:1.2rem; display:grid; gap:.5rem; }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--ink); border-bottom:1px solid var(--red); overflow-wrap:anywhere; }
.legal a:hover{ color:var(--red-ink); }
/* Encre et non gris : sur le fond --bone-2, le gris tombait à 4,1:1 */
.legal code{ font-size:.9em; color:var(--ink); background:var(--bone-2); padding:.1em .35em; border-radius:4px; }

/* ═════════ Responsive ═════════ */
@media (max-width:1024px){
  .pg-hero__row{ grid-template-columns:1fr; }
  .pg-hero__fig img{ height:260px; }
  .pg-cols{ grid-template-columns:1fr; }
  .pg-guide__in{ grid-template-columns:1fr; }
  .pg-steps{ grid-template-columns:1fr 1fr; }
  .pg-form__in{ grid-template-columns:1fr; }
  .pg-other__grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:760px){
  .pg-hero{ padding-top:calc(70px + 26px); }
  .pg-steps{ grid-template-columns:1fr; }
  .pg-other__grid{ grid-template-columns:1fr 1fr; }
  .pg-facts > div{ padding-right:16px; margin-right:16px; }
}

@media (max-width:480px){
  .pg-other__grid{ grid-template-columns:1fr; }
  .pg-hero__acts .btn{ flex:1; min-width:190px; }
}


/* ---------- Cibles tactiles des pages par service ---------- */
@media (max-width:1024px){
  /* Un lien de 17 px de haut se rate au doigt. On elargit la zone sans
     bouger le rythme visuel. */
  .pg-crumb{ margin-bottom:clamp(14px,2vw,26px); }
  .pg-crumb a{ display:inline-block; padding-block:9px; }

  .pg-form__tel span a{ display:inline-block; padding-block:8px; }

  .pg-card{ min-height:56px; }
}