/* =========================================================================
   FAÇADES HILBERT — Pages intérieures
   Même système que style.css : tokens, filet de taloche, « la matière se dépose ».
   ========================================================================= */

/* ---------- Méga-menu ---------------------------------------------------- */
.nav__has-mega{position:relative}
.nav__chev{margin-left:5px;transition:transform var(--dur-hover) var(--ease-hover)}
.nav__has-mega.is-open .nav__chev{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;z-index:70;
  width:min(680px,86vw);transform:translateX(-50%) translateY(-8px);
  background:var(--secondary-50);border:1px solid var(--secondary-200);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-depose),visibility 0s linear var(--dur-hover);
}
.mega--sm{width:min(460px,86vw)}
.nav__has-mega.is-open .mega{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.mega::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.mega__in{padding:var(--space-6)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.mega__grid--sm{grid-template-columns:1fr 1fr}
.mega__item{
  position:relative;display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;min-height:44px;
  transition:background var(--dur-hover) var(--ease-hover);
}
.mega__item:hover{background:var(--bg-alt)}
.mega__n{font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;font-size:11px;color:var(--accent);letter-spacing:.08em}
.mega__label{font-size:14.5px;font-weight:500;color:var(--text-strong);line-height:1.3}
.mega__item .filet{--filet-w:26px;margin-top:2px}
.mega__item:hover .filet{transform:scaleX(1)}
.mega__all{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--space-5);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-ink);
  min-height:44px;
}
.mega__all svg{transition:transform var(--dur-hover) var(--ease-hover)}
.mega__all:hover svg{transform:translateX(5px)}
@media (max-width:1120px){.mega{display:none}}

/* ---------- Fil d'Ariane ------------------------------------------------- */
.crumb{padding-block:var(--space-5) 0;font-size:13px}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;color:var(--text-muted)}
.crumb li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--secondary-300)}
.crumb a{transition:color var(--dur-hover) var(--ease-hover)}
.crumb a:hover{color:var(--accent-ink)}
.crumb [aria-current]{color:var(--text-strong);font-weight:500}

/* ---------- Héros de page ------------------------------------------------ */
.phero{padding-block:clamp(44px,5.5vw,88px) clamp(48px,6vw,88px);background:var(--bg)}
.phero__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.phero__copy h1{font-size:clamp(2.05rem,1.35rem + 2.5vw,3.6rem);margin-block:var(--space-5);max-width:17ch}
.phero__copy .lead{max-width:48ch;color:var(--neutral-700)}
.phero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-7)}
.phero__media{position:relative;margin:0;min-width:0}
.phero__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  box-shadow:var(--shadow-img);filter:saturate(.9);
}
.phero__media::after{
  content:'';position:absolute;left:-14px;bottom:-14px;width:92px;height:92px;
  border-left:2px solid var(--primary-500);border-bottom:2px solid var(--primary-500);
  opacity:.55;filter:url(#taloche);pointer-events:none;
}
@media (max-width:900px){
  .phero__in{grid-template-columns:1fr;gap:var(--space-7)}
  .phero__media{order:-1}
  .phero__media img{aspect-ratio:16/10}
  .phero__media::after{display:none}
  .phero__actions .btn{width:100%}
}

/* ---------- Prose + colonne latérale ------------------------------------- */
.prose-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(40px,5vw,80px);align-items:start;
}
@media (max-width:980px){.prose-grid{grid-template-columns:1fr}}

.prose{max-width:68ch;min-width:0;font-size:var(--step-0);line-height:var(--lh-body);color:var(--text)}
.prose > * + *{margin-top:var(--space-5)}
.prose h2{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 800;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.08;
  font-size:var(--step-2);color:var(--text-strong);
  margin-top:var(--space-9);padding-top:var(--space-5);
  border-top:1px solid var(--secondary-200);
}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:1.1rem;font-weight:700;color:var(--text-strong);margin-top:var(--space-6)}
.prose ul.list-filet{margin-top:var(--space-5)}
.ulink{color:var(--accent-ink);border-bottom:1px solid var(--primary-300);transition:border-color var(--dur-hover) var(--ease-hover)}
.ulink:hover{border-color:var(--primary-600)}
.prose--legal{max-width:74ch}
.prose--legal h2{font-size:var(--step-1);text-transform:none;font-family:var(--font-body);font-weight:700;letter-spacing:0}

.pquote{
  font-family:var(--font-accent);font-style:italic;font-weight:500;
  font-size:var(--step-1);line-height:1.5;color:var(--text-strong);
  padding-left:var(--space-6);border-left:2px solid var(--primary-500);
  margin-block:var(--space-7);
}
.callout{
  display:flex;gap:var(--space-5);align-items:flex-start;
  background:var(--bg-alt);border:1px solid var(--secondary-200);
  padding:var(--space-6);margin-block:var(--space-6);
}
.callout .filet{--filet-w:28px;margin-top:.6em}
.callout p{font-size:15.5px;line-height:1.6;margin:0}

.tablewrap{overflow-x:auto;margin-block:var(--space-6);border:1px solid var(--secondary-200)}
.tablewrap table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.tablewrap th{
  text-align:left;background:var(--bg-alt);color:var(--text-strong);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  padding:14px 16px;border-bottom:1px solid var(--secondary-200);
}
.tablewrap td{padding:14px 16px;border-bottom:1px solid var(--secondary-200);vertical-align:top}
.tablewrap tr:last-child td{border-bottom:0}
.tablewrap td:nth-child(2){font-weight:600;color:var(--accent-ink);white-space:nowrap}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-top:var(--space-7)}
.split__col{padding:var(--space-6);background:var(--surface);border:1px solid var(--secondary-200)}
.split__col h3{margin-top:0;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.split__col ul{list-style:none;margin-top:var(--space-4);display:flex;flex-direction:column;gap:10px}
.split__col li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--text)}
.split__col li::before{position:absolute;left:0;top:0;font-weight:700}
.split__col--yes{border-top:2px solid var(--primary-500)}
.split__col--yes h3{color:var(--accent-ink)}
.split__col--yes li::before{content:'+';color:var(--primary-600)}
.split__col--no{border-top:2px solid var(--secondary-400)}
.split__col--no h3{color:var(--text-muted)}
.split__col--no li::before{content:'\2013';color:var(--secondary-500)}
@media (max-width:640px){.split{grid-template-columns:1fr}}

.aside{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
@media (max-width:980px){.aside{position:static}}
.aside__card{background:var(--surface);border:1px solid var(--secondary-200);padding:var(--space-6);box-shadow:var(--shadow-xs)}
.aside__card--flat{background:var(--bg-alt);box-shadow:none}
.aside__card h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--text-strong);margin-bottom:var(--space-4)}
.aside__price{
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem);line-height:1;color:var(--text-strong);
  margin-block:var(--space-4) var(--space-3);
}
.aside__note{font-size:14.5px;line-height:1.55;color:var(--text-muted);margin-bottom:var(--space-5)}
.aside__tel{display:block;text-align:center;margin-top:var(--space-4);font-size:14px;color:var(--text-muted);min-height:44px;line-height:44px}
.aside__tel:hover{color:var(--accent-ink)}
.aside__nap{font-style:normal;font-size:15px;line-height:1.8}
.aside__nap a{color:var(--accent-ink)}
.aside__links a{color:var(--text);font-size:14.5px}
.aside__links a::after{background:var(--primary-500)}
.aside__links a:hover{color:var(--text-strong)}
.aside__fig{margin:0}
.aside__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.aside__fig figcaption{font-size:12.5px;color:var(--text-muted);margin-top:10px}
.kpi{list-style:none;display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi li{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--secondary-200);padding-bottom:12px}
.kpi b{font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;font-size:1.5rem;color:var(--accent);min-width:66px}
.kpi span{font-size:14px;color:var(--text-muted)}

.minigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-5)}
.minicard{
  display:flex;flex-direction:column;gap:6px;padding:var(--space-5);
  background:var(--surface);border:1px solid var(--secondary-200);
  transition:border-color var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover);
}
.minicard:hover{border-color:var(--primary-400);transform:translateY(-3px)}
.minicard__n{font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;font-size:11px;color:var(--accent);letter-spacing:.08em}
.minicard strong{font-size:15px;color:var(--text-strong);line-height:1.3}
.minicard__p{font-size:13px;color:var(--text-muted)}
@media (max-width:640px){.minigrid{grid-template-columns:1fr}}

/* ---------- Grille services ---------------------------------------------- */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:960px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sgrid{grid-template-columns:1fr}}
.sgrid__card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--secondary-200);
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.sgrid__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--secondary-300)}
.sgrid__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--secondary-200)}
.sgrid__media img{
  width:100%;height:100%;object-fit:cover;filter:saturate(.82);transform:scale(1.02);
  transition:transform 900ms var(--ease-depose),filter var(--dur-hover) var(--ease-hover);
}
.sgrid__card:hover .sgrid__media img{transform:scale(1.06);filter:saturate(1)}
.sgrid__n{
  position:absolute;top:0;left:0;z-index:2;background:var(--secondary-50);color:var(--accent-ink);
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:14px;letter-spacing:.06em;padding:8px 14px;
}
.sgrid__body{padding:var(--space-6);display:flex;flex-direction:column;gap:12px;flex:1}
.sgrid__body .filet{--filet-w:100%}
.sgrid__card:hover .filet,.zcard:hover .filet,.rcard:hover .filet,.contact__card:hover .filet{transform:scaleX(1)}
.sgrid__body h3{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 700;font-weight:700;
  text-transform:uppercase;font-size:1.25rem;line-height:1.1;color:var(--text-strong);
}
.sgrid__body p{font-size:15px;color:var(--text-muted);line-height:1.55;flex:1}
.sgrid__link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);
}
.sgrid__link svg{transition:transform var(--dur-hover) var(--ease-hover)}
.sgrid__card:hover .sgrid__link svg,.zcard:hover .sgrid__link svg,.gcard:hover .sgrid__link svg{transform:translateX(5px)}
.svc__all{margin-left:auto}
@media (max-width:700px){.svc__all{display:none}}

/* ---------- Zones -------------------------------------------------------- */
.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:960px){.zgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.zgrid{grid-template-columns:1fr}}
.zcard{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--secondary-200);
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.zcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--secondary-300)}
.zcard__media{aspect-ratio:16/9;overflow:hidden;background:var(--secondary-200)}
.zcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 900ms var(--ease-depose)}
.zcard:hover .zcard__media img{transform:scale(1.05)}
.zcard__body{padding:var(--space-6);display:flex;flex-direction:column;gap:12px;flex:1}
.zcard__body .filet{--filet-w:100%}
.zcard__body h2{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 700;font-weight:700;
  text-transform:uppercase;font-size:1.2rem;line-height:1.1;color:var(--text-strong);
}
.zcard__body p{font-size:15px;color:var(--text-muted);line-height:1.55;flex:1}
.zextra{margin-top:var(--section-y);padding-top:var(--space-8);border-top:1px solid var(--secondary-200)}
.zextra p{margin-top:var(--space-4)}

/* ---------- Guides ------------------------------------------------------- */
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
@media (max-width:820px){.ggrid{grid-template-columns:1fr}}
.gcard{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--secondary-200);
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover);
}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.gcard__media{aspect-ratio:16/9;overflow:hidden;background:var(--secondary-200)}
.gcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 900ms var(--ease-depose)}
.gcard:hover .gcard__media img{transform:scale(1.05)}
.gcard__body{padding:var(--space-7);display:flex;flex-direction:column;gap:14px;flex:1}
.gcard__meta{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--accent-ink)}
.gcard__body h2{font-size:var(--step-2);font-weight:700;line-height:1.2;color:var(--text-strong)}
.gcard__body p{font-size:15.5px;color:var(--text-muted);line-height:1.6;flex:1}

.ghero{padding-top:clamp(36px,4.5vw,64px)}
.ghero__in{max-width:820px}
.ghero__in h1{
  font-size:clamp(1.95rem,1.3rem + 2.3vw,3.1rem);margin-block:var(--space-5);
  text-transform:none;letter-spacing:-.01em;line-height:1.08;
}
.ghero__media{margin:clamp(40px,5vw,64px) 0 0}
.ghero__media img{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:520px}

/* ---------- Réalisations ------------------------------------------------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:960px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.rgrid{grid-template-columns:1fr}}
.rcard{
  margin:0;background:var(--surface);border:1px solid var(--secondary-200);display:flex;flex-direction:column;
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover);
}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.rcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--secondary-200)}
.rcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 900ms var(--ease-depose)}
.rcard:hover .rcard__media img{transform:scale(1.05)}
.rcard__tag{
  position:absolute;top:0;left:0;z-index:2;background:var(--primary-600);color:#fff;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;padding:8px 12px;
}
.rcard__body{padding:var(--space-6);display:flex;flex-direction:column;gap:12px;flex:1}
.rcard__body .filet{--filet-w:40px}
.rcard__body h3{font-size:1.05rem;font-weight:700;color:var(--text-strong);line-height:1.3}
.rcard__body p{font-size:14.5px;color:var(--text-muted);line-height:1.55;flex:1}
.rcard__meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.rcard__meta li{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  color:var(--accent-ink);background:var(--primary-50);padding:5px 9px;
}

/* ---------- Accordéon ---------------------------------------------------- */
.acc{border-top:1px solid var(--secondary-200)}
.acc--wide{max-width:900px}
.acc__item{border-bottom:1px solid var(--secondary-200)}
.acc__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-6) 0;min-height:44px;cursor:pointer;list-style:none;
  font-size:var(--step-1);font-weight:600;color:var(--text-strong);line-height:1.35;
  transition:color var(--dur-hover) var(--ease-hover);
}
.acc__q::-webkit-details-marker{display:none}
.acc__q:hover{color:var(--accent-ink)}
.acc__icon{position:relative;flex:0 0 auto;width:20px;height:20px}
.acc__icon::before,.acc__icon::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--primary-600);
  transform:translate(-50%,-50%);
  transition:transform var(--dur-hover) var(--ease-hover),opacity var(--dur-hover) linear;
}
.acc__icon::before{width:16px;height:2px}
.acc__icon::after{width:2px;height:16px}
.acc__item[open] .acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__a{padding-bottom:var(--space-6);max-width:70ch}
.acc__a p{color:var(--text);line-height:1.65}
.acc__item[open] .acc__a{animation:accIn 420ms var(--ease-depose)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.section--alt .acc,.section--alt .acc__item{border-color:var(--secondary-300)}

/* ---------- Contact ------------------------------------------------------ */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(40px,5vw,80px);align-items:start}
@media (max-width:980px){.contact__grid{grid-template-columns:1fr}}
.contact__cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:640px){.contact__cards{grid-template-columns:1fr}}
.contact__card{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;
  padding:var(--space-7);background:var(--surface);border:1px solid var(--secondary-200);
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.contact__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--secondary-300)}
.contact__card .filet{--filet-w:36px}
.contact__card h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--text-muted)}
.contact__big{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 800;font-weight:800;
  font-size:clamp(1.35rem,1rem + 1vw,1.75rem);line-height:1.15;color:var(--text-strong);font-style:normal;
}
.contact__big--sm{font-size:clamp(1.05rem,.9rem + .5vw,1.25rem);text-transform:none;letter-spacing:0}
.contact__card p{font-size:14.5px;line-height:1.55}
.contact__card--cta{background:var(--neutral-900);border-color:var(--neutral-900);color:var(--secondary-200);cursor:pointer}
.contact__card--cta h2{color:var(--primary-300)}
.contact__card--cta .contact__big{color:var(--secondary-50)}
.contact__card--cta:hover{border-color:var(--primary-600)}

/* ---------- Devis -------------------------------------------------------- */
.devis__hero{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-7);
  padding:var(--space-8);background:var(--bg-alt);border:1px solid var(--secondary-200);
  border-top:2px solid var(--primary-500);
}
.devis__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
@media (max-width:640px){.devis__actions,.devis__actions .btn{width:100%}}

/* ---------- Légal & divers ----------------------------------------------- */
.legal .prose h2{margin-top:var(--space-7)}
.drawer__hint{margin-bottom:var(--space-5);color:var(--text-muted);font-size:15px}
.drawer__count{font-size:13px;color:var(--text-muted)}
.drawer__demo{margin-top:var(--space-5);font-size:13px;color:var(--text-muted)}

/* Correctif QA — la bande CTA finale : le titre géant collait au paragraphe */
.cta-final p{margin-top:var(--space-6)}
.cta-final h2{max-width:13ch}