/* ==========================================================================
   IMS Victoire — page d'accueil
   À charger après commun.css.
   Chemins d'images : relatifs à ce fichier (Test/css/), d'où "../media/…"
   pour les portraits et "../../media/…" pour les médias partagés.
   ========================================================================== */
#hero{position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:var(--ink);}
.hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;will-change:transform;transform:scale(1.08) translateZ(0);transition:opacity 1.2s ease;}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,8,.25) 0%,rgba(5,5,8,.05) 35%,rgba(5,5,8,.1) 60%,rgba(5,5,8,.72) 100%),linear-gradient(135deg,rgba(13,13,24,.55) 0%,transparent 60%);z-index:1;}
.hero-orb{position:absolute;width:min(700px,90vw);height:min(700px,90vw);top:50%;left:58%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(184,169,138,.12) 0%,rgba(26,26,46,.06) 50%,transparent 70%);border-radius:50%;z-index:1;animation:orbPulse 8s ease-in-out infinite;}
@keyframes orbPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineUp{from{opacity:0;transform:translateY(108%)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wordBlur{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes countPop{0%{opacity:0;transform:translateY(20px) scale(.9)}60%{transform:translateY(-3px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glowRing{0%,100%{box-shadow:0 0 0 0 rgba(184,169,138,0)}50%{box-shadow:0 0 0 6px rgba(184,169,138,.12)}}
@keyframes scrollDrop{0%{top:-100%}100%{top:220%}}
@keyframes tagReveal{0%{opacity:0;letter-spacing:.18em;filter:blur(3px)}100%{opacity:1;letter-spacing:.08em;filter:blur(0)}}
@keyframes dividerDraw{0%{width:0;opacity:0}40%{opacity:1}100%{width:clamp(32px,4vw,56px);opacity:1}}
.hero-content{position:relative;z-index:10;padding:80px clamp(24px,6vw,90px) clamp(24px,3vh,36px);max-width:960px;display:flex;flex-direction:column;gap:0;flex:1;justify-content:flex-end;}
.hero-tag{display:inline-flex;align-items:center;gap:15px;font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:300;letter-spacing:.08em;color:var(--gold);margin-bottom:clamp(10px,1.5vh,18px);opacity:0;animation:tagReveal 1.4s .25s var(--ease-out) forwards;}
.hero-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;opacity:.7;}
.hero-divider{display:block;height:1px;background:linear-gradient(to right,var(--gold),transparent);transform-origin:left;width:0;opacity:0;margin-bottom:clamp(12px,1.8vh,20px);animation:dividerDraw 1.2s 1.4s var(--ease-out) forwards;}
.hero-h1{font-family:var(--serif);font-size:clamp(2.8rem,6.5vw,7rem);font-weight:300;line-height:.88;letter-spacing:.1rem;color:var(--ivory);margin-bottom:clamp(14px,2vh,22px);}
.hero-h1 .line-wrap{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.06em;}
.hero-h1 .line{display:block;opacity:0;transform:translateY(108%);animation:lineUp 1.5s var(--ease-out) forwards;}
.hero-h1 .line-wrap:nth-child(1) .line{animation-delay:.7s}
.hero-h1 .line-wrap:nth-child(2) .line{animation-delay:.95s;font-style:italic;color:rgba(240,237,230,.48);}
.hero-sub{margin-bottom:clamp(14px,2vh,24px);font-size:clamp(.85rem,1.25vw,.98rem);font-weight:300;color:rgba(240,237,230,.75);line-height:1.75;min-width:50vw;max-width:50ch;}
.hero-sub .w{display:inline-block;opacity:0;animation:wordBlur .5s var(--ease-out) forwards;}
.hero-cta{display:inline-flex;align-items:center;gap:14px;font-size:.8rem;font-weight:400;letter-spacing:.1em;color:var(--ivory);opacity:0;animation:fadeUp .8s var(--ease-out) forwards;width:fit-content;cursor:pointer;}
.hero-cta-circle{width:54px;height:54px;border:1px solid rgba(184,169,138,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .45s var(--ease-out),border-color .45s;animation:glowRing 3s 2.5s ease-in-out infinite;}
.hero-cta:hover .hero-cta-circle{background:var(--gold);border-color:var(--gold);}
.hero-cta-circle svg{width:15px;height:15px;}
.hero-scroll{position:absolute;right:clamp(20px,3.5vw,52px);bottom:calc(clamp(20px,3vh,32px)*2 + 90px);z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fadeIn 1.2s 3s var(--ease-out) forwards;}
.hero-scroll-line{width:1px;height:72px;background:linear-gradient(to bottom,rgba(184,169,138,0),rgba(184,169,138,.55));position:relative;overflow:hidden;}
.hero-scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:linear-gradient(to bottom,transparent,var(--gold));animation:scrollDrop 2.8s 3.2s ease-in-out infinite;}
.hero-scroll-text{writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.22em;color:rgba(240,237,230,.3);}
.hero-stats{position:relative;z-index:10;display:flex;gap:0;align-items:flex-end;padding:clamp(14px,2vh,22px) clamp(24px,6vw,90px);flex-shrink:0;}
.hero-stat{display:flex;flex-direction:column;gap:5px;padding:0 clamp(18px,2.8vw,36px);position:relative;opacity:0;animation:countPop .7s var(--ease-out) forwards;}
.hero-stat:first-child{padding-left:0}
.hero-stat+.hero-stat::before{content:'';position:absolute;left:0;top:10%;width:1px;height:80%;background:linear-gradient(to bottom,transparent,rgba(184,169,138,.3),transparent);}
.hero-stat-n{font-family:var(--serif);font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:300;color:var(--ivory);line-height:1;letter-spacing:-.01em;position:relative;display:inline-block;}
.hero-stat-n::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease-out);}
.hero-stat:hover .hero-stat-n::after{width:100%}
.hero-stat-l{font-size:.65rem;font-weight:300;letter-spacing:.12em;color:rgba(240,237,230,.38);}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:240px;background:linear-gradient(to bottom,transparent,var(--ink));z-index:5;pointer-events:none;}
.section{position:relative;min-height:100svh;overflow:hidden;}
#specialites{background:var(--ink);padding:clamp(80px,12vh,140px) clamp(24px,6vw,90px);}
.spec-header{max-width:560px;margin-bottom:clamp(56px,8vh,96px);}
.spec-header h2{font-family:var(--serif);font-size:clamp(2.4rem,5vw,5rem);font-weight:300;line-height:1.05;letter-spacing:-.015em;color:var(--ivory);}
.spec-header h2 em{font-style:italic;color:rgba(240,237,230,.45);}
.spec-header p{margin-top:1.5rem;font-size:.9rem;font-weight:300;line-height:1.75;color:rgba(240,237,230,.5);max-width:42ch;}
.spec-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.spec-card{position:relative;padding:clamp(32px,4vw,56px) clamp(24px,3vw,40px);min-height:clamp(340px,45vh,500px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--mid);transition:flex-grow .6s var(--ease-out);}
/* ── Tryptique spécialités ── */
.spec-card:nth-child(1){background-image:url("../../media/specialites-noir4.jpg");background-size:300% 100%;background-position:0% center;background-repeat:no-repeat;}
.spec-card:nth-child(2){background-image:url("../../media/specialites-noir4.jpg");background-size:300% 100%;background-position:50% center;background-repeat:no-repeat;}
.spec-card:nth-child(3){background-image:url("../../media/specialites-noir4.jpg");background-size:300% 100%;background-position:100% center;background-repeat:no-repeat;}
/* Overlay sombre pour lisibilité du texte */
.spec-card::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(5,5,8,.15) 0%,rgba(5,5,8,.5) 60%,rgba(5,5,8,.72) 100%);opacity:1;transition:opacity .5s;z-index:0;}
/* Remettre le contenu au-dessus de l'overlay */
.spec-card-num,.spec-card-icon,.spec-card h3,.spec-card p,.spec-card-link,.spec-card::after{position:relative;z-index:1;}
.spec-card h3{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;line-height:1.15;color:var(--ivory);margin-bottom:.75rem;}
.spec-card p{font-size:.82rem;font-weight:300;color:rgba(240,237,230,.45);line-height:1.65;max-width:30ch;transition:color .4s;}
.spec-card:hover p{color:rgba(240,237,230,.7)}
.spec-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:1.5rem;font-size:.75rem;letter-spacing:.1em;color:var(--gold);opacity:.7;transform:translateY(0);transition:opacity .4s,transform .4s var(--ease-out);}
.spec-card:hover .spec-card-link{opacity:1;}
.spec-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out);}
.spec-card:hover::after{transform:scaleY(1)}
#valeurs{background:var(--ivory);color:var(--ink);padding:clamp(100px,15vh,180px) clamp(24px,6vw,90px);min-height:auto;}
.val-wrap{max-width:1100px;margin:0 auto;}
.val-statement{font-family:var(--serif);font-size:clamp(2rem,4.5vw,4.5rem);font-weight:300;line-height:1.15;letter-spacing:-.015em;color:var(--ink);}
.val-statement .reveal-word{display:inline-block;transition:opacity .6s,transform .6s var(--ease-out);opacity:.2;transform:translateY(6px);}
.val-statement .reveal-word.lit{opacity:1;transform:translateY(0);}
.val-statement em{font-style:italic;color:var(--gold);}
.val-skills{margin-top:clamp(40px,5vh,56px);padding-top:clamp(24px,3vh,36px);border-top:1px solid rgba(5,5,8,.08);display:flex;flex-wrap:wrap;gap:8px;}
.val-skill{display:inline-flex;align-items:center;gap:7px;padding:.42rem 1rem;border:1px solid rgba(5,5,8,.12);border-radius:2px;font-size:.72rem;font-weight:400;letter-spacing:.07em;color:rgba(5,5,8,.55);transition:border-color .3s,color .3s,background .3s;}
.val-skill:hover{border-color:rgba(5,5,8,.3);color:var(--ink);background:rgba(5,5,8,.03);}
.val-skill-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.6;flex-shrink:0;}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(60px,9vh,100px);padding-top:clamp(40px,5vh,60px);}
.val-item{--d:0ms;position:relative;display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;}
.val-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(to right,var(--gold),rgba(184,169,138,.15));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);transition-delay:var(--d);}
.val-item h4{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.val-item p{opacity:0;transition:opacity 1s var(--ease-out);}
.val-item h4{transition-delay:calc(var(--d) + .2s);}
.val-item p{transition-delay:calc(var(--d) + .4s);}
.val-item.in-view::before{transform:scaleX(1);}
.val-item.in-view h4{opacity:1;transform:none;}
.val-item.in-view p{opacity:1;}
.val-item h4{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--ink);line-height:1.2;}
.val-item p{font-size:.82rem;font-weight:300;color:rgba(5,5,8,.55);line-height:1.7;}
#expertise{background:var(--ink);overflow:hidden;padding:clamp(80px,12vh,140px) 0;}
.exp-header{padding:0 clamp(24px,6vw,90px);margin-bottom:clamp(40px,6vh,72px);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.exp-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,4.2rem);font-weight:300;line-height:1.05;color:var(--ivory);}
.exp-header h2 em{font-style:italic;color:rgba(240,237,230,.4)}
.exp-nav{display:flex;gap:10px;}
.exp-btn{width:48px;height:48px;border:1px solid rgba(240,237,230,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(240,237,230,.5);transition:border-color .3s,color .3s;}
.exp-btn:hover{border-color:var(--gold);color:var(--gold);}
.exp-track{display:flex;gap:clamp(16px,2vw,24px);padding:0 clamp(24px,6vw,90px) clamp(16px,2vh,24px);scroll-padding-inline:clamp(24px,6vw,90px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;}
.exp-track::-webkit-scrollbar{display:none}
.exp-track.grabbing{cursor:grabbing;scroll-snap-type:none}
.exp-card{flex:none;width:clamp(260px,30vw,380px);scroll-snap-align:start;padding:clamp(28px,3.5vw,44px);border:1px solid rgba(240,237,230,.07);border-radius:3px;display:flex;flex-direction:column;gap:1rem;transition:border-color .4s,background .4s;position:relative;overflow:hidden;}
.exp-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(184,169,138,.06),transparent);opacity:0;transition:opacity .4s;}
.exp-card:hover{border-color:rgba(184,169,138,.25);}
.exp-card:hover::before{opacity:1}
.exp-card-title{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:400;color:var(--ivory);line-height:1.2;}
.exp-card-sub{font-size:.72rem;font-weight:400;color:var(--gold);letter-spacing:.12em;}
.exp-card-body{font-size:.82rem;font-weight:300;color:rgba(240,237,230,.45);line-height:1.7;flex:1;}
.exp-card-line{height:1px;background:linear-gradient(to right,var(--gold),transparent);opacity:.35;transition:opacity .4s;}
.exp-card:hover .exp-card-line{opacity:.7}
.exp-card-img{width:100%;height:clamp(160px,20vw,220px);position:relative;overflow:hidden;border-radius:2px;margin-bottom:.5rem;}
.exp-card-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s;filter:brightness(.9);-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 50%,transparent 100%);mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 50%,transparent 100%);}
/* Cartes reliées à une fiche d'information */
.exp-card-more{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.1em;color:var(--gold);opacity:.75;transition:opacity .3s,gap .3s var(--ease-out);}
.exp-card-more::after{content:'→';}
a.exp-card:hover .exp-card-more{opacity:1;gap:12px;}
.exp-card:hover .exp-card-img img{transform:scale(1.05);filter:brightness(1.05);}
#centre{background:var(--bone);color:var(--ink);min-height:auto;overflow:hidden;}
.centre-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;}
.centre-left{padding:clamp(80px,12vh,140px) clamp(24px,5vw,70px);display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,3vh,36px);}
.centre-left h2{font-family:var(--serif);font-size:clamp(2.2rem,4vw,4rem);font-weight:300;line-height:1.05;letter-spacing:-.015em;color:var(--ink);}
.centre-left h2 em{font-style:italic;color:rgba(5,5,8,.4)}
.centre-left p{font-size:clamp(.85rem,1.3vw,1rem);font-weight:300;color:rgba(5,5,8,.6);line-height:1.8;max-width:44ch;}
.centre-equip{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;}
.centre-equip-item{display:flex;align-items:center;gap:12px;font-size:.8rem;font-weight:300;color:rgba(5,5,8,.55);padding:.6rem 0;border-bottom:1px solid rgba(5,5,8,.08);transform:translateX(-20px);opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.centre-equip-item.in-view{opacity:1;transform:translateX(0)}
.centre-equip-item::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.centre-addr{margin-top:.5rem;padding:1.5rem;border:1px solid rgba(5,5,8,.1);border-radius:3px;display:flex;flex-direction:column;gap:.4rem;}
.centre-addr span{font-size:.78rem;font-weight:300;color:rgba(5,5,8,.55);line-height:1.5;}
.centre-addr strong{font-size:.9rem;font-weight:500;color:var(--ink);}
.centre-right{position:relative;background:var(--mid);overflow:hidden;}
.centre-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:55% 45%;gap:3px;background:var(--ink);}
.centre-mosaic-cell{position:relative;overflow:hidden;}
.centre-mosaic-cell img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:none;transition:none;}
.centre-mosaic-cell::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,rgba(5,5,8,.35));pointer-events:none;}
.centre-mosaic-cell:nth-child(1){grid-column:1/3;grid-row:1;}
.centre-mosaic-cell:nth-child(1) img{object-position:center 65%;}
.centre-mosaic-cell:nth-child(2){grid-column:1;grid-row:2;}
.centre-mosaic-cell:nth-child(2) img{object-position:center 30%;}
.centre-mosaic-cell:nth-child(3){grid-column:2;grid-row:2;}
.centre-mosaic-cell:nth-child(3) img{object-position:center 40%;}
.centre-mosaic-caption{position:absolute;bottom:0;left:0;right:0;padding:.6rem .9rem;font-size:.65rem;font-weight:300;letter-spacing:.1em;color:rgba(240,237,230,.8);background:linear-gradient(to top,rgba(5,5,8,.75),transparent);transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:2;}
.centre-mosaic-cell:hover .centre-mosaic-caption{transform:translateY(0);}
#equipe{background:var(--ink);padding:clamp(80px,12vh,140px) 0;}
.equipe-header{padding:0 clamp(24px,6vw,90px);margin-bottom:clamp(48px,7vh,80px);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.equipe-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,4.2rem);font-weight:300;color:var(--ivory);line-height:1.05;}
.equipe-header h2 em{font-style:italic;color:rgba(240,237,230,.35)}
.equipe-link{font-size:.78rem;font-weight:300;letter-spacing:.1em;color:var(--gold);border-bottom:1px solid rgba(184,169,138,.3);padding-bottom:2px;transition:border-color .3s;}
.equipe-link:hover{border-color:var(--gold)}
.equipe-cards{display:flex;gap:clamp(16px,2vw,20px);padding:0 clamp(24px,6vw,90px) clamp(8px,2vh,16px);scroll-padding-inline:clamp(24px,6vw,90px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.equipe-cards::-webkit-scrollbar{display:none}
.equipe-card{flex:none;width:clamp(220px,22vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:1rem;}
.equipe-card-name{transition:color .3s}
.equipe-card:hover .equipe-card-name{color:var(--gold)}
.equipe-cards.grabbing{cursor:grabbing}
/* Portraits désaturés, la couleur complète revient au survol (ou au focus clavier) */
.equipe-card-img{aspect-ratio:3/4;border-radius:2px;background:var(--mid);position:relative;overflow:hidden;filter:saturate(.5) contrast(1.05) brightness(1.05);transition:transform .5s var(--ease-out),filter .7s var(--ease-out);}
.equipe-card:hover .equipe-card-img,.equipe-card:focus-visible .equipe-card-img{transform:scale(.98);filter:saturate(1) contrast(1.05) brightness(1.05);}
.equipe-card-img::before{content:'';position:absolute;inset:0;}
.equipe-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(5,5,8,.7),transparent);}
.portrait_lbenattar{background:url("../media/portraits/variante1/lbenattar.jpg") no-repeat bottom left/cover}
.portrait_rfischer{background:url("../media/portraits/variante1/rfischer.jpg") no-repeat bottom left/cover}
.portrait_tgeoffroy{background:url("../media/portraits/variante1/tgeoffroy.jpg") no-repeat bottom left/cover}
.portrait_dgiber{background:url("../media/portraits/variante1/dgiber.jpg") no-repeat bottom left/cover}
.portrait_vhousset{background:url("../media/portraits/variante1/vhousset.jpg") no-repeat bottom left/cover}
.portrait_klouati{background:url("../media/portraits/variante1/klouati.jpg") no-repeat bottom left/cover}
.portrait_mnguyen{background:url("../media/portraits/variante1/mnguyen.jpg") no-repeat bottom left/cover}
.portrait_froubineau{background:url("../media/portraits/variante1/froubineau.jpg") no-repeat bottom left/cover}
.portrait_rrousseau{background:url("../media/portraits/variante1/rrousseau.jpg") no-repeat bottom left/cover}
.portrait_lthomsen{background:url("../media/portraits/variante1/lthomsen.jpg") no-repeat bottom left/cover}
.portrait_jyvds{background:url("../media/portraits/variante1/jyvds.jpg") no-repeat bottom left/cover}
.portrait_rraclet{background:url("../media/portraits/variante1/rraclet.jpg") no-repeat bottom left/cover}
.portrait_rvincent{background:url("../media/portraits/variante1/rvincent.jpg") no-repeat bottom left/cover}
.equipe-card-init{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:3.5rem;font-weight:300;color:rgba(184,169,138,.2);z-index:1;letter-spacing:-.02em;}
.equipe-card-name{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.2rem);font-weight:300;color:var(--ivory);line-height:1.2;}
.equipe-card-name b{font-weight:600;display:block}
.equipe-card-role{font-size:.72rem;font-weight:400;color:var(--gold);letter-spacing:.1em;}
.equipe-card-more{font-size:.72rem;font-weight:300;color:rgba(240,237,230,.3);transition:color .3s;}
.equipe-card:hover .equipe-card-more{color:rgba(240,237,230,.7)}
#partenaires{background:var(--ivory);color:var(--ink);padding:clamp(60px,9vh,110px) 0;overflow:hidden;}
.partenaires-header{padding:0 clamp(24px,6vw,90px);margin-bottom:clamp(36px,5vh,56px);}
.partenaires-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,4rem);font-weight:300;color:var(--ink);line-height:1.05;}
.partenaires-header h2 em{font-style:italic;color:rgba(5,5,8,.4)}
/* Pavement partenaires : styles des tuiles dans commun.css */
#partenaires .partners-grid{padding:0 var(--pad);}
#avis{background:var(--mid);color:var(--ivory);padding:clamp(80px,12vh,140px) 0;min-height:auto;}
.avis-header{margin-bottom:clamp(40px,6vh,68px);max-width:calc(560px + 2 * clamp(24px,6vw,90px));padding:0 clamp(24px,6vw,90px);}
.avis-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,4rem);font-weight:300;color:var(--ivory);line-height:1.05;}
.avis-header h2 em{font-style:italic;color:var(--gold)}
/* ── Avis : 3 lignes qui défilent à des vitesses différentes ── */
.avis-rows{display:flex;flex-direction:column;gap:clamp(12px,1.6vh,18px);}
.avis-row{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);}
.avis-track{display:flex;width:max-content;align-items:stretch;padding:1px 0;animation:avisScroll var(--speed,60s) linear infinite;}
.avis-row:hover .avis-track{animation-play-state:paused;}
.avis-row--1 .avis-track{--speed:70s;}
.avis-row--2 .avis-track{--speed:95s;}
.avis-row--3 .avis-track{--speed:55s;}
@keyframes avisScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.avis-card{flex:none;width:clamp(230px,20vw,290px);min-width:0;margin-right:clamp(10px,1vw,14px);padding:14px 18px;border:1px solid rgba(240,237,230,.1);border-radius:3px;background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:.55rem;overflow:hidden;transition:border-color .4s,background .4s;}
.avis-card:hover{border-color:rgba(184,169,138,.45);background:rgba(255,255,255,.05);}
.avis-card-top{display:flex;align-items:center;gap:10px;min-width:0;}
.avis-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.avis-name{font-size:.78rem;font-weight:500;color:var(--ivory);white-space:nowrap;}
.avis-stars{display:flex;gap:2px;}
.avis-stars span{width:8px;height:8px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.avis-text{font-size:.78rem;font-weight:300;color:rgba(240,237,230,.65);line-height:1.55;font-style:italic;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
@media(max-width:900px){.val-grid{grid-template-columns:1fr 1fr}.centre-wrap{grid-template-columns:1fr}.centre-right{min-height:50svh}}
/* Tryptique empilé uniquement en portrait (écran plus haut que large) : en carré ou en paysage, les 3 cards restent côte à côte.
   « portrait » est défini ici par le rapport largeur/hauteur, car la media query orientation considère un écran carré comme portrait. */
@media(max-width:900px) and (max-aspect-ratio:99/100){.spec-cards{grid-template-columns:1fr}}
@media(max-width:600px){.hero-stats{flex-wrap:wrap;padding:clamp(12px,2vw,20px) clamp(16px,4vw,32px);gap:0;}.hero-stat{flex:1;min-width:72px;padding:clamp(8px,1.5vw,14px) clamp(6px,1.5vw,12px);border-right:1px solid rgba(240,237,230,.08);}.hero-stat:last-child{border-right:none}.val-grid{grid-template-columns:1fr}}

/* ── Tryptique mobile portrait : images individuelles ── */
@media (max-width:900px) and (max-aspect-ratio:99/100){
  .spec-card:nth-child(1){background-image:url("../../media/specialite1b.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;}
  .spec-card:nth-child(2){background-image:url("../../media/specialite2b.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;}
  .spec-card:nth-child(3){background-image:url("../../media/specialite3b.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;}
}
/* Desktop landscape : forcer le tryptique (écrase toute autre règle) */
@media (min-width:901px),(min-aspect-ratio:1/1){
  .spec-card:nth-child(1){background-image:url("../../media/specialites-noir4.jpg")!important;background-size:300% 100%!important;background-position:0% center!important;background-repeat:no-repeat!important;}
  .spec-card:nth-child(2){background-image:url("../../media/specialites-noir4.jpg")!important;background-size:300% 100%!important;background-position:50% center!important;background-repeat:no-repeat!important;}
  .spec-card:nth-child(3){background-image:url("../../media/specialites-noir4.jpg")!important;background-size:300% 100%!important;background-position:100% center!important;background-repeat:no-repeat!important;}
}

/* ── Effet survol spec-card ── */
.spec-card{transition:flex-grow .6s var(--ease-out),box-shadow .4s,transform .4s var(--ease-out);}
.spec-card:hover{box-shadow:inset 0 0 0 1px rgba(184,169,138,.4);}
.spec-card:hover::before{opacity:.6;}

/* ── Perspective 3D tryptique spécialités (non portrait) ── */
@media not all and (max-aspect-ratio:99/100) {
  .spec-cards{
    perspective:1200px;
    perspective-origin:50% 50%;
    gap:0;
    align-items:stretch;
  }
  .spec-card{
    transition:transform .5s var(--ease-out), box-shadow .4s, filter .4s;
    backface-visibility:hidden;
    transform-style:preserve-3d;
  }
  /* Card gauche : tourne vers la droite */
  .spec-card:nth-child(1){
    transform:rotateY(20deg) translateZ(0px) scaleX(.9);
    transform-origin:right center;
    margin-right:16px;
  }
  /* Card centrale : reculée */
  .spec-card:nth-child(2){
    transform:translateZ(-40px) scaleX(1.09) scaleY(1.12);
    transform-origin:center center;
    z-index:0;
  }
  /* Card droite : tourne vers la gauche */
  .spec-card:nth-child(3){
    transform:rotateY(-20deg) translateZ(0px) scaleX(.9);
    transform-origin:left center;
    margin-left:16px;
  }
  /* Survol du groupe : les cards s'aplanissent
     (mêmes fonctions, dans le même ordre, que l'état de repos) */
  .spec-cards:hover .spec-card:nth-child(1){transform:rotateY(10deg) translateZ(20px) scaleX(.95);}
  .spec-cards:hover .spec-card:nth-child(2){transform:translateZ(-20px) scaleX(1.05) scaleY(1.08);filter:brightness(.95);}
  .spec-cards:hover .spec-card:nth-child(3){transform:rotateY(-10deg) translateZ(20px) scaleX(.95);}
  /* Survol individuel : la card ciblée vient au premier plan */
  .spec-card:nth-child(1):hover{transform:rotateY(0deg) translateZ(40px) scaleX(1)!important;filter:brightness(1.05);}
  .spec-card:nth-child(2):hover{transform:translateZ(20px) scaleX(1.05) scaleY(1.08)!important;filter:brightness(1.05);}
  .spec-card:nth-child(3):hover{transform:rotateY(0deg) translateZ(40px) scaleX(1)!important;filter:brightness(1.05);}
}

/* ── Reflet sous les cards spécialités (non portrait) ──
   Duplication inversée du background + dégradé linéaire.
   Le reflet est un enfant de la card : il suit ses transformations 3D. */
.spec-card-reflect{display:none;}

@media not all and (max-aspect-ratio:99/100) {
  .spec-cards{
    padding-bottom:clamp(100px,16vh,180px); /* espace réservé au reflet */
  }
  .spec-card{
    overflow:visible; /* laisse le reflet déborder sous la card */
  }
  .spec-card-reflect{
    display:block;
    position:absolute;
    left:0; right:0;
    top:calc(100% + 4px);   /* léger espace entre card et reflet */
    height:100%;            /* même hauteur que la card : même échelle d'image */
    pointer-events:none;
    z-index:0;
    /* Duplication exacte du background de la card */
    background-image:inherit;
    background-size:inherit;
    background-position:inherit;
    background-repeat:inherit;
    /* Inversion verticale */
    transform:scaleY(-1);
    transform-origin:center center;
    /* Élément retourné : "to top" part du haut visuel du reflet */
    -webkit-mask-image:linear-gradient(to top,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.18) 15%,
      rgba(0,0,0,.05) 28%,
      transparent 38%);
            mask-image:linear-gradient(to top,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.18) 15%,
      rgba(0,0,0,.05) 28%,
      transparent 38%);
    opacity:.85;
    transition:opacity .5s var(--ease-out);
  }
  /* Assombrissement du reflet (équivalent de l'overlay de la card) */
  .spec-card-reflect::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(5,5,8,.35) 0%, rgba(5,5,8,.85) 40%);
  }
  .spec-card:hover .spec-card-reflect{opacity:1;}
}

/* ── Animation d'entrée des cards spécialités ──
   Les keyframes ne définissent que l'état de départ ("from") :
   l'animation se termine automatiquement sur la position de repos
   définie plus haut (rotation 3D du tryptique), sans l'écraser ensuite. */
html.js .spec-card:not(.spec-in){opacity:0;}

/* Portrait (cards empilées) : montée en fondu, card par card */
html.js .spec-card.spec-in{animation:specFadeUp .9s var(--ease-out) backwards;}
@keyframes specFadeUp{
  from{opacity:0;transform:translateY(48px);}
}

/* Paysage / desktop — animation en deux temps :
   1) les 3 cards arrivent à plat, collées, en bloc depuis la gauche ;
   2) une fois en place, la perspective, les rotations, le recadrage
      et l'espacement du tryptique apparaissent. */
@media not all and (max-aspect-ratio:99/100){
  /* L'animation porte sur la rangée entière, pas sur chaque card */
  html.js .spec-card,html.js .spec-card.spec-in{opacity:1;animation:none;}
  html.js .spec-cards:not(.spec-go){opacity:0;}
  /* Arrivée : 1,1 s, avec une décélération plus courte que --ease-out pour éviter la longue « traîne » en fin de course */
  html.js .spec-cards.spec-go{animation:specRowIn 2s cubic-bezier(.25,1,.5,1) backwards;}
  /* Phase 1 : état à plat (neutralise aussi les effets de survol) */
  html.js .spec-cards.spec-flat .spec-card{transform:none!important;margin:0!important;filter:none!important;}
  /* Phase 2 : transition lente vers l'état 3D */
  /* Séparation : enchaîne immédiatement (plus de délai de 0,4 s) et dure 1,2 s */
  html.js .spec-cards.spec-unfold .spec-card{transition:transform 1.2s var(--ease-out),margin .6s var(--ease-out),filter .8s var(--ease-out),box-shadow .4s;}
}
@keyframes specRowIn{
  from{opacity:0;translate:-110vw 0;}
  25%{opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .avis-track{animation:none!important;}
  .avis-row{overflow-x:auto;scrollbar-width:none;}
  .partner-tile{opacity:1;transform:none;}
  html.js .spec-card,html.js .spec-card.spec-in{animation:none!important;opacity:1;}
  html.js .spec-cards{animation:none!important;opacity:1!important;}
}

/* ── Format vertical 10/15 des cards du tryptique (hors portrait) ──
   La largeur de la rangée est limitée pour que les cards ne dépassent pas ~78 % de la hauteur de l'écran. */
@media not all and (max-aspect-ratio:99/100){
  .spec-cards{max-width:min(100%,calc(3 * 78svh * 10 / 15 + 32px));margin-inline:auto;}
  .spec-card{min-height:0;aspect-ratio:10/15;}
}

/* ── Ouverture synchronisée du hero ──
   Tant que html.hero-wait est présent (polices et vidéo pas encore prêtes, 2 s maximum),
   les animations du hero restent sur leur état de départ, puis démarrent ensemble. */
html.hero-wait #hero,html.hero-wait #hero *{animation-play-state:paused!important;}
/* Vidéo : l'image de couverture est l'attribut « poster » de la vidéo elle-même.
   Elle subit donc exactement la même mise à l'échelle (scale 1.08), le même recadrage (object-fit)
   et le même effet de parallaxe que la vidéo : la première image de la vidéo la remplace sans ressaut. */
/* Voile d'ouverture avec le logo (première visite de la session uniquement) */
#intro{display:none;}
html.js #intro{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--ink);transition:opacity .8s var(--ease-out),visibility .8s;}
html.js:not(.hero-wait) #intro,html.no-intro #intro{opacity:0;visibility:hidden;pointer-events:none;}
#intro img{height:clamp(48px,7vw,72px);width:auto;filter:brightness(0) invert(1);opacity:.9;animation:introBreath 1.6s ease-in-out infinite;}
#intro .intro-line{width:clamp(60px,8vw,96px);height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);transform-origin:center;animation:introLine 1.6s ease-in-out infinite;}
@keyframes introBreath{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes introLine{0%,100%{transform:scaleX(.3);opacity:.4}50%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){html.js #intro{display:none;}}

/* ── Notre histoire · Le mot du président ── */
#histoire{background:#fff;color:var(--ink);padding:clamp(80px,12vh,140px) var(--pad);}
.histoire-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start;max-width:1300px;margin:0 auto;}
.histoire-img{position:sticky;top:110px;margin:0;}
.histoire-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.histoire-img::after{content:'';display:block;width:56px;height:2px;margin-top:18px;background:var(--gold);}
.histoire-tag{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#8f7f5f;margin-bottom:clamp(14px,2vh,20px);}
#histoire h2{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,4rem);font-weight:300;line-height:1.05;letter-spacing:-.015em;margin-bottom:clamp(24px,3.5vh,36px);}
#histoire h2 em,#histoire h3 em{font-style:italic;color:rgba(5,5,8,.42);}
#histoire h3{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:300;line-height:1.1;margin:clamp(40px,6vh,60px) 0 clamp(18px,2.6vh,26px);padding-top:clamp(28px,4vh,40px);border-top:1px solid rgba(5,5,8,.1);}
.histoire-text p{font-size:.95rem;font-weight:300;line-height:1.85;color:rgba(5,5,8,.7);max-width:64ch;margin-bottom:1.1rem;}
.histoire-text p a{color:var(--ink);font-weight:400;border-bottom:1px solid rgba(184,169,138,.6);transition:border-color .3s;}
.histoire-text p a:hover{border-color:var(--gold);}
.histoire-text p.histoire-lead{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.45;color:var(--ink);}
.histoire-offre{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin:clamp(20px,3vh,28px) 0 clamp(26px,4vh,36px);}
.histoire-offre li{display:flex;flex-direction:column;gap:.45rem;padding:clamp(18px,2vw,24px);border:1px solid rgba(5,5,8,.08);border-top:2px solid var(--gold);border-radius:2px;background:var(--ivory);}
.histoire-offre strong{font-family:var(--serif);font-size:1.2rem;font-weight:600;line-height:1.2;}
.histoire-offre span{font-size:.84rem;font-weight:300;line-height:1.65;color:rgba(5,5,8,.66);}
.histoire-text p.histoire-close{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.5;color:var(--ink);}
.histoire-sign{display:flex;flex-direction:column;gap:.2rem;margin-top:clamp(20px,3vh,28px);}
.histoire-sign a{font-family:var(--serif);font-size:1.5rem;color:var(--ink);border:none!important;}
.histoire-sign b{font-weight:600;}
.histoire-sign span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#8f7f5f;}
@media(max-width:900px){
  .histoire-wrap{grid-template-columns:1fr;}
  .histoire-img{position:static;max-width:520px;}
  .histoire-img img{aspect-ratio:3/2;}
}
@media(max-width:600px){.histoire-offre{grid-template-columns:1fr;}}