/* EX-ARTE, pages « Le laboratoire » et « Créer votre gamme » (AES Communication, 26/10/2026)
   Chargée après site-v3.css et interieur-v3.css : même en-tête, même pied, même ouverture sombre, même appel.
   Une forme par section : fils qui se rejoignent, triptyque, rangée de l'équipe, adresse en grand,
   déroulé des étapes sur un fil vertical, rayon de flacons. Classes préfixées xl-. */

/* Ouverture : photo portrait jamais recadrée en paysage */
.xl-hero{min-height:min(92vh,920px)}
.xl-hero--voile figure::after{content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:1;background:linear-gradient(180deg,rgba(13,26,21,.86),rgba(13,26,21,0));pointer-events:none}
.xl-hero--pesee figure img{object-position:50% 22%}
.xl-hero--becher figure img{object-position:50% 38%}
@media (max-width:1100px){.xl-hero figure{aspect-ratio:1/1}}

/* ================= Le laboratoire ================= */

/* 2. L'histoire : deux fils qui se rejoignent */
.xl-histoire{background:var(--xa-creme);padding:var(--xa-section) 0 calc(var(--xa-section) + 8px)}
.xl-histoire h2{max-width:16em;margin-bottom:48px}
.xl-fils{--xl-pastille:clamp(40px,3.8vw,62px);position:relative;margin:0 0 34px}
.xl-fils svg{display:block;width:100%;height:auto;overflow:visible}
/* les portraits dessinés posés sur les fils, alignés sur les colonnes des époques */
.xl-visages{position:absolute;left:0;top:50%;display:flex;align-items:center;height:var(--xl-pastille);margin-top:calc(var(--xl-pastille) / -2)}
.xl-visages img,.xl-epoque-visages img{display:block;box-sizing:border-box;width:var(--xl-pastille);height:var(--xl-pastille);border-radius:50%;border:2px solid var(--xa-foret);box-shadow:0 0 0 2px var(--xa-creme);background:var(--xa-creme);object-fit:cover}
.xl-visages img + img,.xl-epoque-visages img + img{margin-left:calc(var(--xl-pastille) * -.28)}
.xl-visages--a{top:30%}
.xl-visages--b{top:70%}
.xl-visages--a img,.xl-epoque-visages--ecart img:first-child{border-color:var(--xa-or)}
.xl-visages--b img,.xl-epoque-visages--ecart img:nth-child(2){border-color:var(--xa-feuille)}
.xl-visages--u{left:33.333%}
.xl-visages--j{left:66.667%}
.xl-epoque-visages{display:none}
.xl-fil-nom{position:absolute;left:calc(var(--xl-pastille) + 14px);margin:0;font-size:16px;line-height:1.3;color:#33493B;white-space:nowrap}
.xl-fil-nom b{font:400 clamp(22px,1.6vw,28px)/1 var(--xa-serif);margin-right:4px}
.xl-fil-nom--a{top:-6px}
.xl-fil-nom--a b{color:#8A5A0E}
.xl-fil-nom--b{top:calc(70% + 14px)}
.xl-fil-nom--b b{color:var(--xa-feuille)}
.xl-epoques{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.xl-epoques li{padding-right:40px}
.xl-epoques p{margin:0;font-size:18.5px;line-height:1.6;max-width:27em}
.xl-epoques b{display:block;margin-bottom:12px;font:360 clamp(28px,2vw,38px)/1.08 var(--xa-serif);letter-spacing:-.015em;color:var(--xa-foret)}

/* 3. Créativité et rigueur : triptyque photo, phrase, photo */
.xl-alliance{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:5px;background:var(--xa-creme);min-height:min(80vh,720px)}
.xl-alliance figure{margin:0;position:relative;overflow:hidden;min-height:480px;background:#E9E2D4}
.xl-alliance figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xl-alliance .xl-alliance-photo--gants img{top:auto;height:128%;object-position:60% 100%}
.xl-alliance-texte{background:var(--xa-foret);color:var(--xa-creme);display:flex;align-items:center;padding:56px clamp(28px,3vw,64px)}
.xl-alliance-texte p{margin:0;font:340 clamp(23px,1.75vw,34px)/1.3 var(--xa-serif);letter-spacing:-.005em;color:#F4F6F1}
.xl-alliance-texte span{color:var(--xa-or)}

/* 4. Le QG : une seule rangée de six portraits */
.xl-qg{background:var(--xa-ciel);padding:var(--xa-section) 0}
.xl-qg h2{margin-bottom:44px}
.xl-equipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 28px}
.xl-equipe li{margin:0}
.xl-equipe img{width:min(100%,176px);aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:18px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.xl-equipe li:hover img{transform:scale(1.04) rotate(-1.5deg)}
.xl-equipe h3{font:360 clamp(25px,1.7vw,32px)/1.1 var(--xa-serif);color:var(--xa-foret);margin-bottom:6px}
.xl-role{margin:0;font-size:15px;line-height:1.4;font-weight:600;color:#2F4A3A}
.xl-trait{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:#33493B}

/* 5. Le lieu : l'adresse en très grand */
.xl-lieu{background:var(--xa-sauge);padding:var(--xa-section) 0}
.xl-lieu .xa-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--xa-gouttiere);align-items:end}
.xl-lieu .xl-adresse{grid-column:1/9;font:340 clamp(44px,5.2vw,100px)/.98 var(--xa-serif);letter-spacing:-.03em;color:var(--xa-foret);font-variant-numeric:lining-nums}
.xl-lieu-acces{grid-column:9/13;justify-self:end;padding-bottom:8px}
.xl-lieu-acces span{white-space:nowrap}
.xl-lieu-acces p{margin:0 0 14px;font-size:19px;line-height:1.5;color:var(--xa-foret)}
.xl-itineraire{font-weight:600;color:var(--xa-foret)!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.xl-itineraire:hover{color:var(--xa-feuille)!important}
.xl-masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= Créer votre gamme ================= */

/* 2. Le déroulé : chaque étape est un bloc photo et texte collés, en cascade de part et d'autre d'un fil vertical ;
   les photos touchent le fil, le texte est à l'extérieur */
.xl-etapes{background:var(--xa-lin);padding:var(--xa-section) 0 calc(var(--xa-section) + 24px);--xl-photo:clamp(220px,17vw,330px);--xl-ecart:64px}
.xl-etapes h2{max-width:21em;margin-bottom:64px}
.xl-deroule{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column}
.xl-deroule::before,.xl-deroule::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px}
.xl-deroule::before{background:rgba(6,50,26,.14)}
.xl-deroule::after{background:var(--xa-feuille);transform-origin:top;transform:scaleY(1)}
.xl-etape{position:relative;width:calc(50% - var(--xl-ecart));display:grid;grid-template-columns:minmax(0,1fr) var(--xl-photo);grid-template-areas:"texte photo";gap:0 28px;align-items:center;align-self:flex-start}
.xl-etape + .xl-etape{margin-top:calc(var(--xl-photo) * -.625 + 26px)}
.xl-etape:nth-child(even){align-self:flex-end;grid-template-columns:var(--xl-photo) minmax(0,1fr);grid-template-areas:"photo texte"}
.xl-etape figure{grid-area:photo;margin:0;overflow:hidden;border-radius:3px}
.xl-etape figure img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.xl-etape:hover figure img{transform:scale(1.04)}
.xl-etape-texte{grid-area:texte;text-align:right}
.xl-etape:nth-child(even) .xl-etape-texte{text-align:left}
.xl-num{position:absolute;left:calc(100% + var(--xl-ecart));top:50%;z-index:1;transform:translate(-50%,-50%);padding:12px 0;background:var(--xa-lin);font:360 clamp(38px,3vw,56px)/1 var(--xa-serif);letter-spacing:-.02em;color:var(--xa-feuille);font-variant-numeric:lining-nums}
.xl-etape:nth-child(even) .xl-num{left:calc(var(--xl-ecart) * -1)}
.xl-etape h3{font:360 clamp(30px,2.5vw,44px)/1.06 var(--xa-serif);letter-spacing:-.015em;color:var(--xa-foret);margin-bottom:12px}
.xl-etape-texte p{margin:0 0 0 auto;font-size:clamp(17.5px,1.15vw,20px);line-height:1.5;max-width:22em}
.xl-etape:nth-child(even) .xl-etape-texte p{margin:0}
.xl-qui,.xl-etape-texte .xl-qui{display:flex;justify-content:flex-end;margin-top:18px}
.xl-etape:nth-child(even) .xl-qui{justify-content:flex-start}
.xl-qui img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--xa-lin)}
.xl-qui img + img{margin-left:-14px}

/* 3. Votre marque : le rayon de flacons vierges, chaque photo à ses proportions d'origine */
.xl-marque{background:var(--xa-sauge);padding:var(--xa-section) 0 0}
.xl-marque-tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px var(--xa-gouttiere);align-items:start;padding-bottom:56px}
.xl-marque-tete h2{grid-column:1/6;grid-row:1/3;max-width:11em}
.xl-marque-citation{grid-column:6/13;grid-row:1;margin:0}
.xl-marque-citation p{margin:0;font:italic 340 clamp(26px,2.2vw,42px)/1.25 var(--xa-serif);color:var(--xa-foret)}
.xl-marque-cond{grid-column:6/13;grid-row:2;margin:0;font-size:18.5px;color:#1F3A2A}
.xl-rayon{display:flex;align-items:flex-start;gap:5px;background:var(--xa-sauge)}
.xl-rayon figure{margin:0;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r);position:relative;overflow:hidden;background:#E9E4DA}
.xl-rayon figure > img,.xl-rayon .xa-flacon-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.xl-rayon figure:hover > img{transform:scale(1.04)}
.xl-rayon .xa-flacon-img{height:100%}

/* Le mouvement : un seul par page, en CSS natif, coupé si le visiteur réduit les animations et avec ?test=1 */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* laboratoire : les deux fils se tracent puis se rejoignent */
    html:not(.xa-test) .xl-fils{view-timeline-name:--xl-fils}
    html:not(.xa-test) .xl-fil{stroke-dasharray:1;animation:xl-trace linear both;animation-timeline:--xl-fils}
    html:not(.xa-test) .xl-fil--a,html:not(.xa-test) .xl-fil--b{animation-range:entry 20% cover 36%}
    html:not(.xa-test) .xl-fil--u{animation-range:cover 34% cover 50%}
    @keyframes xl-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    /* chaque portrait apparaît quand le fil l'atteint */
    html:not(.xa-test) .xl-visages{animation:xl-pop linear both;animation-timeline:--xl-fils}
    html:not(.xa-test) .xl-visages--a,html:not(.xa-test) .xl-visages--b{animation-range:entry 10% entry 35%}
    html:not(.xa-test) .xl-visages--u{animation-range:cover 31% cover 37%}
    html:not(.xa-test) .xl-visages--j{animation-range:cover 40% cover 46%}
    @keyframes xl-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
  }
}
@media (prefers-reduced-motion:no-preference) and (min-width:1201px){
  @supports (animation-timeline:view()){
    /* créer votre gamme : le fil des étapes se remplit au fil de la lecture */
    html:not(.xa-test) .xl-deroule{view-timeline-name:--xl-deroule}
    html:not(.xa-test) .xl-deroule::after{animation:xl-remplit linear both;animation-timeline:--xl-deroule;animation-range:cover 12% cover 88%}
    @keyframes xl-remplit{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  }
}

/* Écrans moyens */
@media (max-width:1100px){
  .xl-epoques li{padding-right:28px}
  .xl-alliance{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:0}
  .xl-alliance-photo--fleurs{grid-column:1/-1;aspect-ratio:3/2;min-height:0}
  .xl-alliance-texte{grid-column:1/2}
  .xl-alliance-photo--gants{grid-column:2/3}
  .xl-equipe{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
  .xl-lieu .xl-adresse{grid-column:1/-1}
  .xl-lieu-acces{grid-column:1/-1;justify-self:start}
  .xl-marque-tete h2,.xl-marque-citation,.xl-marque-cond{grid-column:1/-1;grid-row:auto}
}
@media (max-width:1200px){
  /* étapes : les unes sous les autres, photo à gauche, texte à droite, sans fil */
  .xl-deroule::before,.xl-deroule::after{display:none}
  .xl-etape,.xl-etape:nth-child(even),.xl-etape + .xl-etape{width:auto;align-self:stretch;grid-template-columns:minmax(0,min(40%,320px)) minmax(0,1fr);grid-template-areas:"photo num" "photo texte";grid-template-rows:auto 1fr;gap:0 28px;align-items:start;margin-top:40px}
  .xl-etape:first-child{margin-top:0}
  .xl-etape:nth-child(n) .xl-etape-texte{text-align:left}
  .xl-num,.xl-etape:nth-child(even) .xl-num{position:static;grid-area:num;transform:none;padding:0;margin:4px 0 10px;background:none;font-size:40px}
  .xl-etape:nth-child(n) .xl-etape-texte p{margin:0}
  .xl-etape:nth-child(n) .xl-qui{justify-content:flex-start}
}
@media (max-width:900px){
  .xl-fils{display:none}
  .xl-epoques{grid-template-columns:1fr;gap:30px}
  .xl-epoques li{padding:0 0 0 20px;border-left:2px solid var(--xa-feuille)}
  .xl-epoque-visages{--xl-pastille:46px;display:flex;margin:0 0 14px}
  .xl-epoque-visages--ecart img + img{margin-left:10px}
  .xl-rayon{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .xl-rayon figure{aspect-ratio:var(--r)}
  .xl-rayon .xl-rayon-marque{grid-column:1/-1;order:-1}
  .xl-rayon .xl-rayon-large{grid-column:1/-1}
}
@media (max-width:640px){
  .xl-histoire h2{margin-bottom:30px}
  .xl-epoques p{font-size:17px}
  .xl-epoques b{font-size:28px}
  .xl-alliance{grid-template-columns:1fr}
  .xl-alliance figure{min-height:0;aspect-ratio:3/2}
  .xl-alliance-texte,.xl-alliance-photo--gants{grid-column:1/-1}
  .xl-alliance-texte{padding:44px var(--xa-gouttiere)}
  .xl-alliance-texte p{font-size:23px}
  .xl-qg h2{margin-bottom:30px}
  .xl-equipe{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .xl-equipe img{width:132px}
  .xl-equipe h3{font-size:24px}
  .xl-trait{font-size:15px}
  .xl-lieu .xl-adresse{font-size:40px;line-height:1.02}
  .xl-lieu-acces p{font-size:17px}
  .xl-etapes h2{margin-bottom:40px}
  .xl-etape,.xl-etape + .xl-etape{gap:0 16px;margin-top:30px}
  .xl-etape:first-child{margin-top:0}
  .xl-etape:nth-child(n) .xl-num{font-size:32px;margin:0 0 6px}
  .xl-etape h3{font-size:26px;margin-bottom:8px}
  .xl-etape-texte p{font-size:16px}
  .xl-etape-texte .xl-qui{margin-top:12px}
  .xl-qui img{width:46px;height:46px;border-width:2px}
  .xl-qui img + img{margin-left:-10px}
  .xl-marque-tete{padding-bottom:36px}
  .xl-marque-citation p{font-size:24px}
  .xl-marque-cond{font-size:17px}
}