/* Y&R Multiservice — harmonisation V11 des pages principales */

/* Socle commun : aucune section ne peut dépasser la fenêtre. */
main{overflow:hidden}
main .wrap{max-width:var(--max);margin-left:auto;margin-right:auto}
main h1,main h2,main h3,main p,main li{overflow-wrap:break-word}
.card-grid,.commit-grid,.process-grid,.portfolio-grid{align-items:stretch}
.card,.commit,.process-card{height:100%}

/* Titres de section alignés comme sur la page Réalisations. */
.section-heading,
.section-heading.left{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-heading .lead{margin-left:auto;margin-right:auto}
.section>.wrap>.cta-row{justify-content:center}

/* Bandeaux intérieurs : même grille, mêmes hauteurs et mêmes marges. */
@media (min-width:1101px){
  .page-hero-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    min-height:460px!important;
  }
  .page-hero-grid>div:first-child{
    order:1!important;
    min-width:0;
    min-height:460px;
    padding:58px clamp(48px,5vw,100px)!important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .page-hero-grid>div:first-child h1{
    max-width:700px;
    margin:0 0 20px;
    font-size:clamp(2.7rem,3.45vw,3.85rem)!important;
    line-height:1.07;
    text-wrap:balance;
  }
  .page-hero-grid>div:first-child .lead{max-width:650px;margin-bottom:18px}
  .page-hero-grid>div:first-child .check-list{max-width:650px;margin-bottom:0}
  .page-hero-media,
  .page-hero.reverse .page-hero-media{
    order:2!important;
    min-width:0;
    width:100%;
    height:460px!important;
    overflow:hidden;
  }
  .page-hero-media img{display:block;width:100%;height:100%;object-fit:cover}

  /* Réalisations reste la référence centrée, sans forcer une fausse image. */
  .page-hero>.wrap:not(.page-hero-grid){
    max-width:1180px;
    padding:64px 0!important;
    text-align:center;
  }
  .page-hero>.wrap:not(.page-hero-grid) h1{max-width:900px;margin-left:auto;margin-right:auto}
  .page-hero>.wrap:not(.page-hero-grid) .lead{max-width:820px;margin-left:auto;margin-right:auto}

  /* Contact et devis suivent la même largeur et le même rythme vertical. */
  .contact-layout{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    align-items:start;
    gap:64px;
  }
  .contact-layout>div{min-width:0}
  .contact-layout h1{font-size:clamp(2.7rem,3.45vw,3.85rem);line-height:1.07}
}

/* Ordinateurs portables : mêmes principes avec des marges plus compactes. */
@media (min-width:768px) and (max-width:1100px){
  .page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .page-hero-grid>div:first-child{min-width:0;padding:46px 34px!important}
  .page-hero-grid>div:first-child h1{font-size:2.75rem!important;line-height:1.08}
  .page-hero-media{min-width:0;overflow:hidden}
  .section-heading,.section-heading.left{max-width:760px}
}

/* Mobile : titres, cartes et espacements cohérents sur toutes les pages. */
@media (max-width:767px){
  .section-heading,.section-heading.left{text-align:left;max-width:none}
  .page-hero-grid>div:first-child{padding:36px 18px 42px!important}
  .page-hero-grid>div:first-child h1{font-size:2.25rem!important;line-height:1.08}
  .page-hero-grid>div:first-child .lead{font-size:.92rem;line-height:1.65}
  .page-hero-media{height:270px!important}
  .section>.wrap>.cta-row{justify-content:flex-start}
  .contact-layout h1{font-size:2.25rem;line-height:1.08}
}

@media (max-width:430px){
  .page-hero-grid>div:first-child h1,.contact-layout h1{font-size:2rem!important}
  .page-hero-media{height:235px!important}
}

/* Réalisations V12 : filtres fonctionnels et états accessibles. */
.portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.portfolio-filters .filter{cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.portfolio-filters .filter[hidden],.portfolio-card[hidden]{display:none!important}
.portfolio-filters .filter:focus-visible{outline:3px solid rgba(240,90,25,.35);outline-offset:2px}