/* EX-ARTE, compléments des pages de gammes « Soins peau et corps » et « Parfums naturels » (AES Communication, 26/10/2026)
   Chargé après site-v3.css et interieur-v3.css, qui restent intacts. Classes préfixées xg-.
   Règle suivie : une photo garde un cadre de son format (jamais une photo en hauteur dans une case en largeur). */

/* 1. Ouvertures : cadrage des photos */
.xg-hero-bain figure img{object-position:50% 16%}
.xg-hero-cheveux figure img{object-position:50% 10%}
.xg-hero-creme figure img{object-position:50% 40%}
/* le haut de la photo est clair : voile sombre sous le menu, pour qu'il reste lisible */
.xg-hero-bain figure::after,.xg-hero-cheveux figure::after,.xg-hero-creme figure::after{content:"";position:absolute;left:0;right:0;top:0;height:170px;z-index:1;background:linear-gradient(180deg,rgba(13,26,21,.82),rgba(13,26,21,0));pointer-events:none}
.xg-hero-flacon figure{background:#000}
.xg-hero-flacon figure img{object-position:50% 50%}
@media (max-width:1100px){
  .xg-hero-bain figure,.xg-hero-creme figure{aspect-ratio:1}
  .xg-hero-flacon figure{aspect-ratio:1;max-height:76vh}
}

/* 2. Catalogue peau et corps : photo en hauteur (4/5), jamais plus haute que l'écran ; la liste se centre à côté */
.xg-catalogue .xi-liste{align-self:center}
.xg-catalogue figure img{aspect-ratio:4/5;object-position:50% 80%}
.xg-catalogue figure{width:min(100%,calc((100vh - 170px) * .8))}
@media (max-width:1100px){.xg-catalogue figure{width:100%}}

/* 3. La phrase, avec les mots de la fin en or (sans italique) */
.xi-phrase .xg-or{color:var(--xa-or)}
/* Peau et corps : la phrase et les échantillons sur la peau, côte à côte */
.xg-phrase-visuel .xa-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--xa-gouttiere);align-items:center}
.xg-phrase-visuel .xa-wrap > p{grid-column:1/9;max-width:none}
.xg-phrase-visuel figure{grid-column:9/13;margin:0;width:100%;max-width:860px;justify-self:end}
.xg-phrase-visuel figure img{width:100%;aspect-ratio:860/551;object-fit:cover;border-radius:3px}
@media (max-width:1100px){
  .xg-phrase-visuel .xa-wrap > p,.xg-phrase-visuel figure{grid-column:1/-1}
  .xg-phrase-visuel figure{justify-self:start;max-width:560px}
}

/* 4. Parfums : mosaïque des photos choisies par Nathalie.
   Chaque rangée est « justifiée » : les photos gardent leur format d'origine et prennent toute la largeur. */
.xg-mosaique{background:var(--xa-creme);display:flex;flex-direction:column;gap:5px;padding:5px 0 0}
.xg-ligne{display:flex;gap:5px}
.xg-ligne > *{flex:var(--r) 1 0;min-width:0;margin:0}
.xg-ligne figure{aspect-ratio:var(--r);overflow:hidden;background:#1a1712}
.xg-ligne figure img{width:100%;height:100%;object-fit:cover}
.xg-texte{--r:1.25;background:var(--xa-sauge);color:var(--xa-foret);padding:clamp(32px,3.2vw,64px);display:flex;flex-direction:column;justify-content:flex-end}
.xg-texte h2{margin-bottom:20px}
.xg-texte p{margin:0;max-width:24em;font-size:clamp(18px,1.25vw,23px);line-height:1.5;color:var(--xa-foret)}
.xg-poignet{--r:.6667}
.xg-mur{--r:1.5}
.xg-jasmin{--r:1.4925}
.xg-essences{--r:1.5038}
.xg-vaporisateurs{--r:1.4545}
@media (prefers-reduced-motion:no-preference){
  .xg-ligne figure img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .xg-ligne figure:hover img{transform:scale(1.04)}
}
@media (max-width:1280px){
  .xg-ligne--1{flex-wrap:wrap}
  .xg-texte{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px;align-items:end;padding:56px var(--xa-gouttiere)}
  .xg-texte h2{margin:0}
}
@media (max-width:640px){
  .xg-texte{grid-template-columns:1fr;padding:44px var(--xa-gouttiere) 40px}
  .xg-ligne--2{flex-wrap:wrap}
  .xg-jasmin{flex-basis:100%}
}

/* 5. Les autres gammes et « Créer votre gamme » : trois tuiles en hauteur, pour ne pas zoomer dans les photos */
.xg-autres{grid-template-columns:repeat(3,minmax(0,1fr))}
.xg-autres .xa-tuile{height:min(80vh,760px)}
.xg-tuile-creme img{object-position:50% 80%}
.xg-autres .xa-tuile--parfum img{object-position:50% 45%}
@media (max-width:640px){
  .xg-autres{grid-template-columns:1fr}
  .xg-autres .xa-tuile{height:auto;aspect-ratio:1}
}
@media (max-width:1100px) and (min-width:641px){
  .xg-autres .xa-tuile{height:auto;aspect-ratio:2/3}
  .xg-autres .xa-tuile span{padding:12px 14px;font-size:11.5px;bottom:10%}
}
/* Visuel en hauteur à côté de la phrase (peau et corps) : il garde son format 4/5 */
.xg-phrase-visuel .xg-visuel-portrait{max-width:440px}
.xg-phrase-visuel .xg-visuel-portrait img{aspect-ratio:4/5}