/* Hero d'accueil : textes centrés, slogan en serif (Cormorant Garamond). Chargé en dernier. */
.hero .hero-content{left:0;right:0;margin-inline:auto;max-width:1100px;padding-inline:24px;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero .hero-content h1{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(60px,7.6vw,122px);line-height:.98;letter-spacing:-.015em;margin:0 0 26px;text-wrap:balance}
.hero .hero-content h1 em{font-style:italic;color:inherit}
.hero .hero-content .hero-description{margin-inline:auto;max-width:420px;letter-spacing:.01em}
.hero .hero-content>.pill{margin-inline:auto}
.hero .hero-shade{background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(15,12,10,.5),rgba(15,12,10,.18) 70%,rgba(15,12,10,.1)),linear-gradient(0deg,rgba(12,10,8,.65),transparent 32%,transparent 77%,rgba(12,10,8,.34))}
@media (max-width:700px){
  .hero .hero-content{padding-inline:0}
  .hero .hero-content h1{font-size:clamp(50px,14vw,78px);line-height:1}
}
/* Slogan : « cuis'in / concept » entre crochets (glyphes de Cormorant étirés sur deux lignes), en rappel du logo. */
.hero .hero-content h1.hero-title-brand{display:grid;grid-template-columns:auto auto auto auto;column-gap:0;align-items:baseline}
.hero-title-brand .ht-a,.hero-title-brand .ht-c{grid-column:1;text-align:right;padding-right:.2em}
.hero-title-brand .ht-b,.hero-title-brand .ht-d{grid-column:3;text-align:center;padding-inline:.12em}
.hero-title-brand .ht-a,.hero-title-brand .ht-b{grid-row:1}
.hero-title-brand .ht-c,.hero-title-brand .ht-d{grid-row:2}
.hero-title-brand::before,.hero-title-brand::after{content:"[";grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-weight:400;line-height:1;transform:scaleY(1.85);transform-origin:50% 54%}
.hero-title-brand::after{content:"]";grid-column:4}.hero .hero-content h1.hero-title-brand em{font-style:normal} /* Même style droit sur les deux lignes. */
/* Bouton du hero : texte en Cormorant comme le slogan, petit trait centré qui s'allonge au survol. */
.hero .hero-content>.pill.light{background:none;border:0;border-radius:0;min-width:0;padding:8px 4px 12px;color:#f8f8f6;font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:400;letter-spacing:.01em;line-height:1.1;text-decoration:none;display:inline-flex;flex-direction:column;align-items:center;gap:9px}
.hero .hero-content>.pill.light::after{content:"";display:block;width:30px;height:1px;margin:0;background:currentColor;opacity:.85;transform:none;transition:width 260ms cubic-bezier(0.22,1,0.36,1),opacity 260ms cubic-bezier(0.22,1,0.36,1)}
.hero .hero-content>.pill.light:hover,.hero .hero-content>.pill.light:focus-visible{background:none;color:#fff;text-decoration:none;border:0;box-shadow:none}
.hero .hero-content>.pill.light:hover::after,.hero .hero-content>.pill.light:focus-visible::after{width:100%;opacity:1;transform:none}
@media (max-width:700px){.hero .hero-content>.pill.light{font-size:23px}}

/* Zoom des photos au survol (collections, intérieurs, réalisations, articles). Souris uniquement, coupé si l'utilisateur réduit les animations. */
.news-card-image,.news-feature-image{overflow:hidden}
.news-card-image img,.news-feature-image img{transition:transform 400ms cubic-bezier(0.22,1,0.36,1)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .collection:hover img,.interior-card a:hover img,.realisation-photo:hover img,
  a:hover .news-card-image img,.news-card:hover .news-card-image img,a:hover .news-feature-image img,.news-feature:hover .news-feature-image img{transform:scale(1.04)}
}