/* ============================================================
   ACCUEIL V2 — refonte éditoriale de la page d'accueil.
   Palette d'origine conservée (crème / vert / ambre).
   N'est chargé que par accueil-v2.html : aucune autre page n'est affectée.
   ============================================================ */

:root{
  --a2-serif:'Constantia','Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif;
}

/* ---------- éléments partagés ---------- */
.a2-shead{margin-bottom:56px;max-width:70ch}
.a2-shead h2{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.015em;line-height:1.08;margin-top:16px;text-wrap:balance}
.a2-shead h2 em{font-style:italic;font-family:var(--a2-serif);font-weight:400;color:var(--or)}
body.dark .a2-shead h2 em{color:var(--champagne)}

/* ============ 1. HERO ÉDITORIAL ============ */
.a2-hero{align-items:flex-end;padding:150px 0 8vh}
.a2-hero .wrap{width:100%}
.a2-hero .eyebrow{display:block;margin-bottom:26px}

.a2-hero .a2-kine{
  font-size:clamp(2.3rem,7.4vw,6.4rem);
  line-height:.97;
  letter-spacing:-.028em;
  text-transform:uppercase;
  font-weight:700;
  max-width:none;
  margin:0;
}
.a2-hero .a2-kine .amb{color:var(--ambre)}
/* la 3e ligne entre juste après les deux premières */
body.fx27go .a2-kine .ln:nth-child(3)>span{transition-delay:.24s}
/* le mot qui tourne garde son animation d'origine */
.a2-hero .a2-kine .kin{display:inline-block}

.a2-herotail{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;flex-wrap:wrap;margin-top:36px;
  border-top:1px solid rgba(169,201,180,.22);padding-top:26px;
}
.a2-serifline{
  font-family:var(--a2-serif);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  color:var(--champagne);max-width:34ch;line-height:1.35;margin:0;
}
.a2-meta{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--menthe);
  text-align:right;line-height:2.1;margin:0;
}
.a2-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
@media(max-width:760px){
  .a2-meta{text-align:left}
  .a2-herotail{gap:18px}
}

/* ============ 2. MANIFESTE ============ */
.a2-manifeste{padding:14vh 0 12vh;background:var(--creme)}
body.dark .a2-manifeste{background:#0E2A20}
.a2-manifeste .wrap{max-width:1000px}
.a2-big{
  font-family:var(--a2-serif);
  font-size:clamp(1.6rem,3.9vw,3.1rem);
  line-height:1.24;color:var(--vert);margin:22px 0 30px;
  text-wrap:balance;font-weight:400;
}
body.dark .a2-big{color:var(--blanc)}
.a2-big em{font-style:italic;color:var(--or)}
body.dark .a2-big em{color:var(--ambre)}
.a2-lede{font-size:1.02rem;line-height:1.75;color:var(--txt);max-width:62ch}
body.dark .a2-lede{color:var(--menthe)}

/* ============ 3. CHIFFRES ============ */
.a2-chiffres{padding:0 0 12vh;background:var(--creme)}
body.dark .a2-chiffres{background:#0E2A20}
.a2-nums{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #DCE6D6;
}
body.dark .a2-nums{border-color:#2C5240}
.a2-num{padding:30px 22px 0;border-left:1px solid #DCE6D6}
body.dark .a2-num{border-color:#2C5240}
.a2-num:first-child{border-left:none;padding-left:0}
.a2-num b{
  display:block;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--vert);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
body.dark .a2-num b{color:var(--ambre)}
.a2-num span{display:block;margin-top:12px;font-size:.86rem;line-height:1.5;color:var(--txt);max-width:24ch}
body.dark .a2-num span{color:var(--menthe)}
@media(max-width:860px){
  .a2-nums{grid-template-columns:1fr 1fr}
  .a2-num{border-left:none;padding-left:0}
  .a2-num:nth-child(n+3){margin-top:26px}
}
@media(max-width:480px){.a2-nums{grid-template-columns:1fr}.a2-num:nth-child(n+2){margin-top:26px}}

/* ============ 4. RÉALISATIONS — LISTE ÉDITORIALE ============ */
.a2-works{padding:13vh 0;background:var(--sombre)}
.a2-works .a2-shead h2{color:var(--blanc)}
.a2-works .a2-shead h2 em{color:var(--ambre)}
.a2-list{border-top:1px solid rgba(169,201,180,.2)}
.a2-row{
  display:grid;grid-template-columns:60px 1fr auto 40px;
  gap:26px;align-items:baseline;
  padding:30px 12px;border-bottom:1px solid rgba(169,201,180,.2);
  transition:background .3s,padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.a2-row:hover{background:rgba(169,201,180,.05);padding-left:26px}
.a2-idx{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.14em;color:var(--or)}
.a2-row h3{
  font-size:clamp(1.1rem,2.3vw,1.75rem);color:var(--blanc);
  font-weight:700;line-height:1.15;transition:color .3s;margin:0;
}
.a2-row:hover h3{color:var(--ambre)}
.a2-cli{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--menthe);white-space:nowrap;
}
.a2-go{color:var(--ambre);font-size:1.1rem;text-align:right;transition:transform .3s;display:inline-block}
.a2-row:hover .a2-go{transform:translateX(6px)}
.a2-note{margin-top:34px;font-size:.92rem;color:var(--menthe)}
.a2-note a{color:var(--ambre);font-weight:600;border-bottom:1px solid rgba(242,184,75,.4)}
@media(max-width:760px){
  .a2-row{grid-template-columns:44px 1fr;gap:8px 16px;padding:22px 8px}
  .a2-cli{grid-column:2;font-size:.56rem}
  .a2-go{display:none}
  .a2-row:hover{padding-left:8px}
}

/* ============ 5. MÉTIERS ============ */
.a2-metiers{padding:13vh 0;background:var(--blanc)}
body.dark .a2-metiers{background:#10261D}
.a2-poles{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid #DCE6D6}
body.dark .a2-poles{border-color:#2C5240}
.a2-pole{
  padding:34px 34px 34px 0;border-bottom:1px solid #DCE6D6;
  display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
}
body.dark .a2-pole{border-color:#2C5240}
.a2-pole:nth-child(even){padding-left:34px;border-left:1px solid #DCE6D6}
body.dark .a2-pole:nth-child(even){border-color:#2C5240}
.a2-pole i{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:.7rem;letter-spacing:.14em;color:var(--or);padding-top:6px;
}
body.dark .a2-pole i{color:var(--ambre)}
.a2-pole h3{font-size:1.22rem;color:var(--vert);margin-bottom:9px;line-height:1.2}
body.dark .a2-pole h3{color:var(--blanc)}
.a2-pole p{font-size:.93rem;line-height:1.62;color:var(--txt);margin:0}
body.dark .a2-pole p{color:var(--menthe)}
@media(max-width:820px){
  .a2-poles{grid-template-columns:1fr}
  .a2-pole,.a2-pole:nth-child(even){padding:28px 0;border-left:none}
}

/* ---------- respect des préférences d'animation ---------- */
@media(prefers-reduced-motion:reduce){
  .a2-row,.a2-row:hover{transition:none;padding-left:12px}
  .a2-go{transition:none}
}

/* ---- bloc éco-conception (page RSE) ---- */
.ecoweb{padding:9vh 0;background:var(--blanc)}
body.dark .ecoweb{background:#10261D}
.ecoweb h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:14px 0 18px}
.ecoweb h2 em{font-style:italic;font-family:var(--a2-serif);font-weight:400;color:var(--or)}
body.dark .ecoweb h2 em{color:var(--ambre)}
.ecoweb .txt{max-width:64ch}
.ecoweb .note{margin-top:26px;font-size:.86rem;color:var(--txt);opacity:.85;max-width:70ch}
body.dark .ecoweb .note{color:var(--menthe)}
/* signature de marque (lien logo ↔ métier) */
.a2-signature{margin-top:20px;padding-left:18px;border-left:3px solid var(--ambre)}
.a2-signature b{color:var(--vert);font-weight:650}
body.dark .a2-signature b{color:var(--blanc)}
/* ---- page implantations : la région mise en valeur ---- */
.impc .region{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambre);margin:-6px 0 14px;
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(242,184,75,.12);border:1px solid rgba(242,184,75,.38);
}
body.dark .impc .region{background:rgba(242,184,75,.16)}
/* ---- FAQ (page contact) : accordeons natifs ---- */
.fx27faq{padding:10vh 0;background:var(--creme)}
body.dark .fx27faq{background:#0E2A20}
.fx27faq h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:14px 0 34px}
.fx27faq h2 em{font-style:italic;font-family:var(--a2-serif);font-weight:400;color:var(--or)}
body.dark .fx27faq h2 em{color:var(--ambre)}
.fx27faq details{border-top:1px solid #DCE6D6;padding:4px 0}
body.dark .fx27faq details{border-color:#2C5240}
.fx27faq details:last-of-type{border-bottom:1px solid #DCE6D6}
body.dark .fx27faq details:last-of-type{border-color:#2C5240}
.fx27faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:18px 44px 18px 0;font-weight:700;color:var(--vert);font-size:1.05rem;
}
body.dark .fx27faq summary{color:var(--blanc)}
.fx27faq summary::-webkit-details-marker{display:none}
.fx27faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.2rem;color:var(--ambre);
  transition:transform .3s;
}
.fx27faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.fx27faq details p{padding:0 0 20px;max-width:70ch;color:var(--txt);line-height:1.7}
body.dark .fx27faq details p{color:var(--menthe)}

/* ============================================================
   FOND DU HERO — clair-obscur de gala
   Le luxe n'est pas dans le mouvement mais dans la retenue :
   un velours vert presque noir, une lumière champagne qui
   respire comme un éclairage de scène, un lustre qui glisse
   imperceptiblement. Pur CSS, composé par le GPU.
   ============================================================ */
.a2-hero{background:linear-gradient(175deg,#0A1F18 0%,#061511 55%,#04100C 100%)}
.a2-fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.a2-fond i{position:absolute;border-radius:50%;will-change:transform,opacity}

/* la lumière champagne : le lustre du salon, qui respire */
.a2-fond i:nth-child(1){
  width:75vw;height:75vw;right:-18vw;top:-30vw;
  background:radial-gradient(circle at 50% 55%,
    rgba(233,201,121,.30) 0%, rgba(217,196,138,.13) 34%, rgba(217,196,138,.04) 55%, transparent 72%);
  animation:lustre 13s ease-in-out infinite alternate;
}
/* la profondeur émeraude : répond en contre-point, plus lente */
.a2-fond i:nth-child(2){
  width:85vw;height:85vw;left:-30vw;bottom:-40vw;
  background:radial-gradient(circle at 50% 45%,
    rgba(30,92,70,.52) 0%, rgba(18,59,45,.26) 40%, rgba(18,59,45,.08) 58%, transparent 74%);
  animation:lustre 19s ease-in-out infinite alternate-reverse;
}
@keyframes lustre{
  from{ transform:scale(1) translate(0,0); opacity:.85; }
  to  { transform:scale(1.12) translate(-2.5vw,2vw); opacity:1; }
}
/* le reflet de soie : une lueur oblique qui glisse, à peine perceptible */
.a2-fond::before{
  content:"";position:absolute;left:-40%;top:-20%;width:80%;height:140%;
  background:linear-gradient(105deg,transparent 44%,rgba(233,201,121,.05) 50%,transparent 56%);
  transform:skewX(-12deg);
  animation:soie 23s ease-in-out infinite;
}
@keyframes soie{
  0%,100%{ transform:skewX(-12deg) translateX(0); }
  50%    { transform:skewX(-12deg) translateX(90%); }
}
/* vignette cinématographique + assise du texte */
.a2-fond::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 100% at 50% 40%, transparent 52%, rgba(2,9,7,.55) 100%),
    radial-gradient(110% 85% at 16% 80%, rgba(4,16,12,.55), transparent 55%);
}
@media(prefers-reduced-motion:reduce){
  .a2-fond i,.a2-fond::before{animation:none}
}
/* ============================================================
   RÉALISATIONS — deck cinématographique
   Chaque moment occupe l'écran ; le suivant vient le recouvrir
   au défilement, comme on tourne un portfolio. Pur CSS (sticky).
   ============================================================ */
.a2-deck{background:linear-gradient(180deg,#0A1F18,#061511);padding:12vh 0 8vh;position:relative}
.a2-deck .a2-shead h2{color:var(--blanc)}
.a2-deck .a2-shead h2 em{color:var(--ambre)}
.a2-deck .a2-note{color:var(--menthe);max-width:1180px;margin:5vh auto 0}
.a2-deck .a2-note a{color:var(--ambre);font-weight:600;border-bottom:1px solid rgba(242,184,75,.4)}

.deck{max-width:1180px;margin:0 auto;padding:0 32px 4vh}
/* les enveloppes s'effacent du flux : chaque carte colle dans le deck commun,
   et y reste épinglée pendant que la suivante vient la recouvrir */
.dwrap{display:contents}
.dcard{
  position:sticky;top:10vh;height:74vh;display:block;margin-bottom:16vh;
  border-radius:26px;overflow:hidden;
  border:1px solid rgba(233,201,121,.22);
  box-shadow:0 34px 90px rgba(2,9,7,.55);
  background:#04100C;
}
/* léger décalage : le bord des cartes précédentes reste visible, effet de pile */
.dwrap:nth-child(2) .dcard{top:calc(10vh + 12px)}
.dwrap:nth-child(3) .dcard{top:calc(10vh + 24px)}
.dwrap:nth-child(4) .dcard{top:calc(10vh + 36px)}
.dwrap:nth-child(5) .dcard{top:calc(10vh + 48px)}
.dwrap:last-child .dcard{margin-bottom:0}

.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.dcard:hover img{transform:scale(1.045)}
.dveil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,16,12,.10) 34%,rgba(4,16,12,.82) 100%),
  radial-gradient(90% 60% at 85% 12%,rgba(233,201,121,.10),transparent 60%)}
.dcard:hover{border-color:rgba(233,201,121,.55)}

.dtxt{position:absolute;left:clamp(24px,4.5vw,56px);right:clamp(24px,4.5vw,56px);bottom:clamp(24px,4.5vw,50px);z-index:2;display:block}
.dcli{display:block;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ambre);margin-bottom:12px}
.dtxt b{display:block;color:var(--blanc);font-weight:700;font-size:clamp(1.4rem,3.1vw,2.5rem);line-height:1.12;max-width:18ch;text-wrap:balance}
.dgo{display:inline-block;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);border-bottom:1px solid rgba(217,196,138,.4);padding-bottom:4px;transition:.3s}
.dcard:hover .dgo{color:var(--ambre);border-color:var(--ambre)}

/* le chiffre serti : immense, en contour champagne */
.dnum{
  position:absolute;right:clamp(20px,4vw,52px);top:clamp(18px,3.5vw,40px);z-index:2;
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:clamp(3rem,7.5vw,6.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.6px rgba(233,201,121,.75);
  text-align:right;font-variant-numeric:tabular-nums;
}
.dnum small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--menthe);-webkit-text-stroke:0;margin-top:10px;font-weight:700}
@supports not ((-webkit-text-stroke:1px #000)){.dnum{color:rgba(233,201,121,.8)}}

/* entrée en scène : la carte monte légèrement en arrivant (natif, piloté par le scroll) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .dcard{animation:deckIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes deckIn{from{transform:translateY(34px) scale(.985);opacity:.55}}
  }
}
@media(max-width:760px){
  .deck{padding:0 18px}
  .dwrap{height:78vh}
  .dcard{height:64vh;top:8vh}
  .dnum{font-size:2.6rem;-webkit-text-stroke-width:1.2px}
}
/* ---- chiffres clés : la précision d'un carton d'invitation ---- */
.a2-nums{border-top:1px solid rgba(199,154,62,.35)}
.a2-num{border-left:1px solid rgba(199,154,62,.30)}
.a2-num:first-child{border-left:none}
.a2-num b{
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-weight:400;letter-spacing:0;
  font-size:clamp(2.4rem,4.8vw,3.8rem);
}
body.dark .a2-nums{border-color:rgba(233,201,121,.30)}
body.dark .a2-num{border-color:rgba(233,201,121,.22)}
.a2-num span{font-size:.82rem;letter-spacing:.015em;line-height:1.55}
@media(max-width:860px){.a2-num{border-left:none}}
/* ---- sous le deck : le bouton d'orfèvre vers les références ---- */
.a2-refwrap{text-align:center;margin-top:6vh}
.a2-refcta{
  position:relative;display:inline-flex;align-items:center;gap:22px;
  padding:20px 34px 20px 24px;border-radius:999px;
  background:rgba(6,21,17,.55);
  border:1px solid rgba(217,196,138,.4);
  transition:border-color .35s,background .35s,transform .3s;
}
.a2-refcta:hover{border-color:var(--ambre);background:rgba(6,21,17,.8);transform:translateY(-2px)}
/* le fil d'or circule autour du bouton (même geste que les cadres) */
.a2-refcta::before{
  content:"";position:absolute;inset:-2px;padding:2px;border-radius:999px;
  background:conic-gradient(from var(--fxa),
    transparent 0deg 300deg,
    rgba(233,201,121,.9) 330deg,#FFF2CC 342deg,rgba(233,201,121,.9) 352deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fxbeam 6s linear infinite;pointer-events:none;
}
.a2-refcta .nbr{
  font-family:'Constantia','Palatino Linotype',Georgia,serif;
  font-size:2.1rem;color:var(--ambre);line-height:1;
}
.a2-refcta .nbr i{font-style:normal;font-size:1.2rem;vertical-align:.35em;color:var(--champagne)}
.a2-refcta .lib{
  color:var(--blanc);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
}
.a2-refcta .fleche{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--ambre);color:#2A1D02;font-size:1.15rem;
  transition:transform .35s cubic-bezier(.3,.8,.3,1);
}
.a2-refcta:hover .fleche{transform:translateX(5px)}
.a2-refsub{margin-top:16px;font-size:.85rem;color:var(--menthe);font-style:italic}
@media(max-width:560px){
  .a2-refcta{gap:14px;padding:16px 22px 16px 18px}
  .a2-refcta .nbr{font-size:1.6rem}
  .a2-refcta .lib{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){.a2-refcta::before{animation:none;opacity:.4}}