/* ============================================================
   Accueil combiné · Design + Photographie
   Grille unique mélangée, étiquetée par discipline.
   ============================================================ */

:root{
  --cream:#faf8f3; --brun:#684f3a; --sable:#c29a76; --ink:#3d3d3d;
  --font:'Montserrat',system-ui,-apple-system,sans-serif;
  --font-titre:'Lora',Georgia,serif;
  --mx:clamp(24px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--cream)}
body{font-family:var(--font);background:var(--cream);color:#141414;-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}

/* NAV — bandeau frosted glass, bord et texte blancs ; s'efface au défilement */
.hnav{position:fixed;top:0;left:0;right:0;width:100%;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--mx);border-radius:0;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.hnav .logo{font-family:var(--font);font-weight:600;font-size:12pt;letter-spacing:-.01em;color:#fff;text-decoration:none}
.hnav nav{display:flex;gap:30px}
.hnav nav a{font-size:12pt;font-weight:500;letter-spacing:-.01em;color:#fff;text-decoration:none;opacity:.92}
.hnav nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.hnav.is-hidden{transform:translateY(-160%);opacity:0;pointer-events:none}
@media(max-width:620px){.hnav{padding:11px 18px}.hnav nav{gap:16px}.hnav nav a{font-size:11pt}}

/* MENU MOBILE : sandwich, voile noir 50 %, options blanches en cascade */
.hnav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;cursor:pointer}
.hnav-toggle span{display:block;width:26px;height:1.5px;background:#fff;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease}
body.hmenu-open .hnav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.hmenu-open .hnav-toggle span:nth-child(2){opacity:0}
body.hmenu-open .hnav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.hmenu{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;justify-content:center;
  padding:96px 32px calc(48px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.hmenu.is-open{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.hmenu-in{display:flex;flex-direction:column;gap:2px}
.hmenu a{width:fit-content;padding:10px 0;font-family:var(--font);font-weight:600;font-size:clamp(30px,8vw,40px);line-height:1.2;
  letter-spacing:-.01em;color:#fff;text-decoration:none;
  opacity:0;translate:0 -18px;transition:opacity .5s ease,translate .8s cubic-bezier(.16,1,.3,1)}
.hmenu.is-open a{opacity:1;translate:0 0}
.hmenu.is-open a:nth-child(1){transition-delay:.12s}
.hmenu.is-open a:nth-child(2){transition-delay:.22s}
.hmenu.is-open a:nth-child(3){transition-delay:.32s}
.hmenu a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
body.hmenu-open{overflow:hidden}
body.hmenu-open .hnav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;opacity:1;pointer-events:auto}
@media(max-width:1023px){
  .hnav nav{display:none}
  .hnav-toggle{display:flex}
}
@media(prefers-reduced-motion:reduce){.hmenu,.hmenu a{transition:none}.hmenu a{translate:none}}

/* HERO : vitrine éditoriale. Trois images (Guillaume, un projet photo, un projet design)
   entrent au seuil ; le mot de la discipline affichée reste blanc, l'autre s'estompe. */
.hhero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#111;color:#fff}
.hhero-slides{position:absolute;inset:0;z-index:0} /* plan isolé : le z-index des images ne dépasse jamais le dégradé ni le texte */
.hslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);scale:1.08;
  transition:clip-path 1.15s cubic-bezier(.76,0,.24,1),scale 1.8s cubic-bezier(.16,1,.3,1)}
.hslide.is-active{clip-path:inset(0 0 0 0);scale:1}
.hslide.is-reset{transition:none}
/* Dégradés directionnels : couleurs vives au centre, lisibilité en bas à gauche et sous la barre */
.hhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,0) 22%),
  linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.44) 40%,rgba(0,0,0,0) 70%),
  linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.14) 45%,rgba(0,0,0,0) 66%)}
/* Grain argentique très léger */
.hgrain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-size:220px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.hhero-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:left;
  padding:0 var(--mx) clamp(44px,7vw,84px);pointer-events:none}
.hhero-in>*{pointer-events:auto}
.hhero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:clamp(18px,2.4vw,28px);
  font-size:9.5pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.hdot{width:8px;height:8px;border-radius:50%;background:#5fd38d;animation:hpulse 2.4s ease-out infinite}
@keyframes hpulse{0%{box-shadow:0 0 0 0 rgba(95,211,141,.55)}70%,100%{box-shadow:0 0 0 9px rgba(95,211,141,0)}}
.hsep{opacity:.5}
.hhero-title{font-family:var(--font-titre);font-weight:500;color:#fff;font-size:clamp(44px,6.6vw,112px);line-height:.98;letter-spacing:-.015em;transform:scaleX(.9);transform-origin:left center}
.hhero-title em{font-style:italic}
.hw,.hamp{transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.hhero[data-active="0"] .hw[data-k="1"],.hhero[data-active="1"] .hw[data-k="0"],
.hhero[data-active="0"] .hamp,.hhero[data-active="1"] .hamp{opacity:.48} /* le « & » ne reste blanc que sur la photo de Guillaume (3e volet) */
.hhero-sub{max-width:46ch;margin-top:clamp(18px,2.2vw,26px);font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;color:rgba(255,255,255,.86)}
/* Description par discipline : les trois textes partagent la même case (hauteur du plus long) */
.hhero-sub{display:grid}
.hs{grid-area:1/1;opacity:0;translate:0 12px;pointer-events:none;
  transition:opacity .35s ease,translate .35s ease}
.hhero[data-active="0"] .hs[data-k="0"],
.hhero[data-active="1"] .hs[data-k="1"],
.hhero[data-active="2"] .hs[data-k="2"]{opacity:1;translate:0 0;pointer-events:auto;
  transition:opacity .6s ease .28s,translate .9s cubic-bezier(.16,1,.3,1) .28s}
.hhero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,3vw,36px)}
.hhero-cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;background:#fff;color:#111;
  font-weight:600;font-size:11.5pt;text-decoration:none;transition:background .3s ease}
.hhero-cta span{display:inline-block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hhero-link{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;font-weight:600;font-size:11.5pt;text-decoration:none;transition:border-color .3s ease}
@media(hover:hover){
  .hhero-cta:hover{background:#efe9dd}
  .hhero-cta:hover span{transform:translateX(4px)}
  .hhero-link:hover{border-color:#fff}
}

/* Légende du visuel affiché + barres de progression (cliquables) */
.hcap{position:absolute;z-index:3;right:var(--mx);bottom:clamp(44px,7vw,84px);width:clamp(220px,20vw,290px);color:#fff}
.hcap-bars{display:flex;gap:6px;margin-bottom:14px}
.hbar{flex:1;padding:7px 0;border:0;background:none;cursor:pointer}
.hbar i{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.hbar b{display:block;width:0;height:100%;background:#fff}
.hbar.is-done b{width:100%}
.hbar.is-run b{animation:hbar var(--dur,6s) linear forwards}
.hhero.is-paused .hbar.is-run b{animation-play-state:paused}
@keyframes hbar{to{width:100%}}
.hcap-link{display:grid;grid-template-columns:auto 1fr;column-gap:14px;color:#fff;text-decoration:none;transition:opacity .28s ease,translate .28s ease}
.hcap-link.is-swap{opacity:0;translate:0 6px}
.hcap-n{grid-row:span 2;padding-top:4px;font-size:9.5pt;font-weight:600;letter-spacing:.1em;opacity:.7}
.hcap-t{font-family:var(--font-titre);font-weight:500;font-size:19px;line-height:1.15;transform:scaleX(.9);transform-origin:left center}
.hcap-d{margin-top:6px;font-size:9pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
@media(min-width:1024px){.hhero-in{padding-right:calc(var(--mx) + clamp(220px,20vw,290px) + 48px)}}

/* Mobile : texte aligné à gauche en bas, légende façon « stories » sous la barre */
@media(max-width:760px){
  .hhero-in{padding:0 24px 36px}
  .hhero-eyebrow{font-size:8.5pt;letter-spacing:.12em}
  .hsep{display:none}
  .hhero-title{font-size:clamp(34px,10.4vw,52px)}
  .hhero-sub{font-size:15px}
  .hhero-cta{padding:13px 22px;font-size:11pt}
  .hhero-link{font-size:11pt}
  .hcap{top:78px;bottom:auto;left:24px;right:24px;width:auto}
  .hcap-bars{margin-bottom:8px}
  .hcap-link{display:flex;align-items:baseline;gap:10px}
  .hcap-n{padding-top:0}
  .hcap-t{font-size:15px}
  .hcap-d{display:none}
}
/* Menu mobile ouvert : les textes du hero sortent au seuil, puis reviennent à la fermeture */
.hhero-eyebrow,.hhero-sub,.hhero-actions,.hcap{transition:opacity .45s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.hhero-title .lni{transition:translate .7s cubic-bezier(.76,0,.24,1)}
/* retour (menu fermé) : en cascade, après la sortie des options */
.hhero-eyebrow{transition-delay:.18s}
.hhero-title .ln:nth-child(1) .lni{transition-delay:.24s}
.hhero-title .ln:nth-child(2) .lni{transition-delay:.31s}
.hhero-sub{transition-delay:.38s}
.hhero-actions{transition-delay:.45s}
.hcap{transition-delay:.3s}
body.hmenu-open .hhero-eyebrow,body.hmenu-open .hhero-sub,
body.hmenu-open .hhero-actions,body.hmenu-open .hcap{opacity:0;translate:0 14px;pointer-events:none}
body.hmenu-open .hhero-title .lni{translate:0 110%}
/* sortie (menu ouvert) : rapide, du haut vers le bas */
body.hmenu-open .hcap,body.hmenu-open .hhero-eyebrow{transition-delay:0s}
body.hmenu-open .hhero-title .ln:nth-child(1) .lni{transition-delay:.03s}
body.hmenu-open .hhero-title .ln:nth-child(2) .lni{transition-delay:.07s}
body.hmenu-open .hhero-sub{transition-delay:.1s}
body.hmenu-open .hhero-actions{transition-delay:.13s}

@media(prefers-reduced-motion:reduce){.hs,.hslide,.hw,.hcap-link,.hhero-eyebrow,.hhero-sub,.hhero-actions,.hcap,.hhero-title .lni{transition:none}.hdot{animation:none}}

/* INTRO + PROJETS */
.hwrap{padding:clamp(70px,9vw,130px) var(--mx)}
.hhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,56px)}
.htitle{font-family:var(--font-titre);font-weight:500;color:#141414;font-size:clamp(32px,4.2vw,54px);line-height:1;letter-spacing:-.01em;white-space:nowrap;transform:scaleX(.9);transform-origin:left center} /* Lora condensé 90 %, comme les titres de projets */
.hsub{font-size:12pt;max-width:40ch;opacity:.8}

/* Filtres par service : sélecteur segmenté, une pastille noire glisse sous le filtre actif */
.hfilters{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid rgba(0,0,0,.14);border-radius:999px;
  margin:calc(-1 * clamp(10px,2vw,24px)) 0 clamp(30px,4vw,44px)}
.hfilter-pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#141414;pointer-events:none;
  transition:transform .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1)}
.hfilter{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:999px;background:transparent;
  color:#141414;font-family:var(--font);font-weight:600;font-size:10.5pt;cursor:pointer;transition:color .45s cubic-bezier(.65,0,.35,1)}
.hfilter-n{font-size:9pt;font-weight:500;opacity:.7}
.hfilter[aria-pressed="true"]{color:#fff}
@media(hover:hover){.hfilter:not([aria-pressed="true"]):hover{color:#555}}
.hfilter:focus-visible{outline:2px solid #141414;outline-offset:2px}
.hgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,28px);align-content:start}
/* même largeur que la carte noire de l'appel à l'action (1320 px max, centrée) */
#projets{padding-left:max(var(--mx),calc((100% - 1320px) / 2));padding-right:max(var(--mx),calc((100% - 1320px) / 2))}
.hgrid .pcard{z-index:2} /* les cartes qui arrivent passent au-dessus de celles qui partent */
.hgrid .pcard.is-hidden{display:none}
#projets{overflow-x:clip} /* les cartes qui glissent ne créent pas de défilement horizontal */
@media(max-width:620px){.hfilter{padding:9px 14px;font-size:10pt}}
@media(prefers-reduced-motion:reduce){.hfilter-pill,.hfilter{transition:none}}
@media(max-width:760px){.hgrid{grid-template-columns:1fr}}

.pcard{position:relative;display:block;text-decoration:none;border-radius:18px;overflow:hidden;aspect-ratio:3/2;box-shadow:-8px 16px 38px rgba(0,0,0,.14);transition:box-shadow .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.pcard:hover{transform:translateY(-6px);box-shadow:-18px 34px 64px rgba(0,0,0,.24)}}
.pcard-imgwrap{position:absolute;inset:0}
.pcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.pcard:hover .pcard-img{scale:1.04}}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);z-index:1}
.pcard-body{position:absolute;left:0;bottom:0;z-index:2;padding:26px;color:var(--cream)}
.pcard-tag{display:inline-block;font-size:9.5pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.pcard-name{font-family:var(--font-titre);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1;letter-spacing:-.01em;color:#fff;display:block;transform:scaleX(.9);transform-origin:left center}
.pcard-disc{font-size:11pt;opacity:.82;margin-top:8px;color:#fff}

/* FOOTER */
.hfoot{padding:clamp(60px,8vw,110px) var(--mx) 48px;}
.hfoot-in{max-width:none;border-top:2px solid rgba(0,0,0,.18);padding-top:clamp(32px,4vw,48px)}
.hfoot-big{font-family:var(--font-titre);font-weight:500;color:#141414;font-size:clamp(30px,5vw,58px);line-height:1;letter-spacing:-.01em;transform:scaleX(.9);transform-origin:left center;margin-bottom:28px}
.hfoot-big em{font-style:italic}
.hfoot-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:40px}
.hfoot-links{display:flex;gap:24px;flex-wrap:wrap}
.hfoot-links a{font-size:11pt;color:#141414;text-decoration:none}
.hfoot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.hfoot-copy{font-size:10pt;color:#6b6b6b;letter-spacing:.04em}

#projets{scroll-margin-top:72px}

/* ─── CLIENTS : bande délimitée, intitulé + défilement continu des logos ─── */
.clients{--ch:30px;--cg:clamp(48px,6vw,96px);padding:clamp(56px,7vw,100px) var(--mx) 0}
.clients-in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);padding:30px 0}
.clients-k{margin-right:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px);border-right:1px solid rgba(0,0,0,.12);
  white-space:nowrap;font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
/* fondus aux bords : les logos apparaissent et s'effacent au lieu d'être coupés */
.clients-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.clients-track{display:flex;width:max-content;animation:clients-scroll 40s linear infinite}
.clients-set{display:flex;flex:none;align-items:center;gap:var(--cg);padding-right:var(--cg)}
.clients-set img{height:var(--ch);width:auto;max-width:none;flex:none;opacity:.55;transition:opacity .35s ease}
.clients-set .cl-s45{height:calc(var(--ch)*.72)} /* logo plein et massif : réduit optiquement */
@keyframes clients-scroll{to{transform:translateX(-50%)}}
/* survol : la bande s'arrête, le logo pointé ressort */
@media(hover:hover){
  .clients-marquee:hover .clients-track{animation-play-state:paused}
  .clients-marquee:hover img{opacity:.3}
  .clients-marquee img:hover{opacity:1}
}
@media(max-width:760px){
  .clients{--ch:24px;--cg:40px}
  .clients-in{grid-template-columns:1fr;row-gap:22px;padding:24px 0}
  .clients-k{margin:0;padding:0;border:0;font-size:9pt}
  .clients-track{animation-duration:30s}
}
@media(prefers-reduced-motion:reduce){
  .clients-track{animation:none;width:auto}
  .clients-set{flex-wrap:wrap;justify-content:center;padding:0;row-gap:20px}
  .clients-set[aria-hidden]{display:none}
  .clients-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ─── APPEL À L'ACTION : bloc sombre entre les projets vedettes et la grille ─── */
.hcta{padding:clamp(90px,11vw,170px) var(--mx) 0}
.hcta-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,110px);align-items:center;
  max-width:1320px;margin:0 auto;padding:clamp(44px,6vw,96px);border-radius:24px;background:#141414;color:#f4efe6;
  box-shadow:-8px 16px 38px rgba(0,0,0,.14)}
.hcta-k{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:9.5pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.75)}
.hcta-t{font-family:var(--font-titre);font-weight:500;font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:-.01em;color:#fff;transform:scaleX(.9);transform-origin:left center}
.hcta-t em{font-style:italic;color:#d9cbb4}
.hcta-sub{max-width:44ch;margin-top:24px;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:rgba(244,239,230,.8)}
.hcta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:34px}
.hcta-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:999px;background:#fff;color:#111;
  font-weight:600;font-size:11.5pt;text-decoration:none;transition:background .3s ease}
.hcta-btn span{display:inline-block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hcta-mail{padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.4);color:#fff;font-size:11pt;font-weight:500;text-decoration:none;transition:border-color .3s ease}
@media(hover:hover){
  .hcta-btn:hover{background:#efe9dd}
  .hcta-btn:hover span{transform:translateX(4px)}
  .hcta-mail:hover{border-color:#fff}
}
.hcta-note{margin-top:18px;font-size:10pt;color:rgba(244,239,230,.55)}
/* Les 3 étapes : rassurent sur ce qui suit le clic */
.hcta-steps{list-style:none;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14)}
.hcta-steps li{display:grid;grid-template-columns:2.2em 1fr;gap:18px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.hcta-n{padding-top:5px;font-size:9.5pt;font-weight:600;letter-spacing:.1em;color:#d9cbb4}
.hcta-steps h3{font-family:var(--font-titre);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.1;color:#fff;transform:scaleX(.9);transform-origin:left center}
.hcta-steps p{margin-top:6px;font-size:10.5pt;line-height:1.6;color:rgba(244,239,230,.68)}
@media(max-width:860px){
  .hcta-in{grid-template-columns:1fr;padding:40px 26px;border-radius:20px}
}
@media(max-width:760px){
  .hcta{padding-top:88px}
  .hcta-in{margin:0 -8px}
  .hcta-btn{padding:14px 24px;font-size:11pt}
}

/* ─── TARIFS : bande claire sous l'appel à l'action ─── */
.htarifs{padding:clamp(22px,2.4vw,34px) var(--mx) 0}
.htarifs-in{max-width:1320px;margin:0 auto;padding:clamp(30px,3.6vw,52px) clamp(26px,5.4vw,96px) clamp(24px,2.8vw,40px);border-radius:24px;background:#efe9dd;color:#141414}
.htarifs-head{margin-bottom:clamp(22px,2.6vw,34px)}
.htarifs-k{margin-bottom:12px;font-size:9.5pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5c5c5c}
.htarifs-t{font-family:var(--font-titre);font-weight:500;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.01em;transform:scaleX(.9);transform-origin:left center}
.htarifs-t em{font-style:italic;color:#7d6a4f}
.htarifs-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px)}
.htarif{padding:22px 0 6px;border-top:1px solid rgba(0,0,0,.14)}
.htarif h3{font-size:9.5pt;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.htarif-prix{margin-top:16px}
.htarif-from{display:block;margin-bottom:6px;font-size:9.5pt;color:#5c5c5c}
.htarif-prix b{display:block;font-family:var(--font-titre);font-weight:500;font-size:clamp(32px,3vw,44px);line-height:1;letter-spacing:-.01em;transform:scaleX(.9);transform-origin:left center}
.htarif-prix--soum b{font-size:clamp(26px,2.3vw,34px);line-height:1.15}
.htarif-inc{max-width:32ch;margin-top:12px;font-size:10.5pt;line-height:1.55;color:#444}
.htarifs-note{margin-top:clamp(20px,2.2vw,28px);font-size:9.5pt;line-height:1.6;color:#5c5c5c}
@media(max-width:760px){.htarifs-in{margin:0 -8px;padding:30px 24px 24px;border-radius:20px}.htarifs-list{grid-template-columns:1fr}}

/* ─── PROJETS VEDETTES ─── */
/* Bloc centré : visuel carré d'environ 60vh + colonne texte, marges latérales libres */
.feat{--fm:min(60vh,44vw);--fg:clamp(48px,6vw,110px);--ft:400px;
  padding:clamp(80px,10vw,150px) var(--mx) clamp(10px,3vw,40px);
  overflow-x:clip} /* les calques qui débordent du cadre ne créent pas de défilement horizontal */
.feat-head,.feat-item{width:min(100%,calc(var(--fm) + var(--fg) + var(--ft)));margin-inline:auto}
.feat-head{margin-bottom:clamp(60px,8vw,120px)}
.feat-eyebrow{display:block;font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b;margin-bottom:14px}
.feat-item{display:grid;grid-template-columns:var(--fm) minmax(0,1fr);gap:var(--fg);align-items:center;margin-bottom:clamp(120px,15vw,220px)}
.feat-item:last-child{margin-bottom:0}
.feat-media{display:block;position:relative;text-decoration:none}

/* Montage parallax : fond fixe, calques débordant légèrement du cadre */
.vm{position:relative;aspect-ratio:1/1}
.vm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;box-shadow:-8px 16px 38px rgba(0,0,0,.14)}
.vm-layers{position:absolute;inset:0;transform:scale(1.28);pointer-events:none}
.vm-layers{transition:opacity .6s ease}
.vm.is-loading .vm-layers{opacity:0}
.vm-l{position:absolute;left:calc(var(--l)*1%);top:calc(var(--t)*1%);width:calc(var(--w)*1%);max-width:none;height:auto;will-change:transform;
  filter:drop-shadow(0 calc(var(--z,1)*7px) calc(var(--z,1)*9px) var(--shc,rgba(60,0,0,.24)))}

/* Photo simple (avec parallax du site) */
.feat-photo{aspect-ratio:1/1;border-radius:18px;overflow:hidden;box-shadow:-8px 16px 38px rgba(0,0,0,.14)}
.feat-photo img{width:100%;height:100%;object-fit:cover}

.feat-tag{display:inline-block;font-size:9.5pt;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#141414;border:1px solid rgba(0,0,0,.22);border-radius:999px;padding:5px 12px;margin-bottom:20px}
.feat-name{font-family:var(--font-titre);font-weight:500;font-size:clamp(26px,2.5vw,36px);line-height:1;letter-spacing:-.01em;color:#141414;transform:scaleX(.9);transform-origin:left center;margin-bottom:22px}
.feat-desc{font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:#333;max-width:40ch;margin-bottom:28px}
.feat-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12pt;color:#141414;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.feat-link span{display:inline-block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.feat-link:hover span{transform:translateX(5px)}
@media(max-width:760px){
  .feat-item{grid-template-columns:1fr;gap:clamp(56px,14vw,80px)}
  .feat-media{width:min(100%,60vh);margin:0 auto}
  .vm-layers{transform:scale(1.2)}
}

/* ─── À PROPOS + galerie paysages ─── */
.about{padding:clamp(70px,9vw,130px) var(--mx)}
.about .eyebrow{font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b;margin-bottom:20px}
.about-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,60px);align-items:center;margin-bottom:clamp(54px,7vw,96px)}
.about-portrait{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:16px}
.about-txt h2{font-family:var(--font-titre);font-weight:500;font-size:clamp(30px,3.9vw,50px);line-height:1.04;letter-spacing:-.01em;color:#141414;margin-bottom:24px;transform:scaleX(.9);transform-origin:left center}
.about-txt p{font-size:clamp(15px,1.2vw,17px);line-height:1.65;color:#333;max-width:54ch;margin-bottom:16px}
.about-txt .sign{display:block;margin-top:14px;font-size:10.5pt;letter-spacing:.02em;color:#6b6b6b}
@media(max-width:760px){.about-top{grid-template-columns:1fr}.about-portrait{max-width:300px;aspect-ratio:4/5}}

/* Paysages : bande horizontale d'une seule hauteur ; on glisse (mobile) ou on clique les flèches (ordinateur) */
.ap-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.ap-label{font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
.ap-nav{display:none;gap:10px}
.ap-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.2);background:transparent;color:#141414;font:inherit;font-size:16px;line-height:1;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease}
.ap-arrow:disabled{opacity:.3;cursor:default}
@media(hover:hover){.ap-nav{display:flex}.ap-arrow:not(:disabled):hover{background:#141414;border-color:#141414;color:#fff}}
.ap-gallery{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin:0 calc(var(--mx) * -1);padding:6px var(--mx) 30px;scroll-padding-inline:var(--mx)}
.ap-gallery::-webkit-scrollbar{display:none}
.ap-ph{flex:0 0 auto;height:clamp(260px,46vh,480px);display:block;border-radius:12px;overflow:hidden;cursor:zoom-in;scroll-snap-align:start;box-shadow:-6px 10px 26px rgba(0,0,0,.10)}
.ap-ph img{height:100%;width:auto;display:block;transition:transform .55s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.ap-ph:hover img{transform:scale(1.04)}}
@media(max-width:560px){.ap-ph{height:clamp(240px,62vw,320px)}}

/* ─── QUESTIONS FRÉQUENTES : accordéon natif (details/summary), le texte reste dans le HTML ─── */
.hfaq{padding:clamp(70px,9vw,130px) var(--mx) clamp(20px,3vw,40px)}
.hfaq-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,90px);align-items:start}
.hfaq-k{margin-bottom:12px;font-size:10pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
.hfaq-t{font-family:var(--font-titre);font-weight:500;font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.01em;color:#141414;transform:scaleX(.9);transform-origin:left center}
.hfaq-list{border-top:1px solid rgba(0,0,0,.14)}
.hfaq-list details{border-bottom:1px solid rgba(0,0,0,.14)}
.hfaq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--font-titre);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.3;color:#141414}
.hfaq-list summary::-webkit-details-marker{display:none}
.hfaq-list summary::after{content:"+";flex:none;font-family:var(--font);font-weight:400;font-size:22px;line-height:1;color:#6b6b6b;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hfaq-list details[open] summary::after{transform:rotate(45deg)}
.hfaq-list summary:focus-visible{outline:2px solid #141414;outline-offset:4px}
.hfaq-list p{max-width:62ch;padding:0 0 22px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.65;color:#333}
.hfaq-list a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.hfaq-in{grid-template-columns:1fr}}

/* Lightbox */
.lbox{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.95);display:none;align-items:center;justify-content:center;padding:28px;opacity:0;transition:opacity .3s ease}
.lbox.open{display:flex;opacity:1}
.lbox-img{max-width:94vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lbtn{position:absolute;background:none;border:none;color:#fff;cursor:pointer;opacity:.75;transition:opacity .2s}
.lbtn:hover{opacity:1}
.lclose{top:18px;right:26px;font-size:30px;line-height:1}
.lnav{top:50%;transform:translateY(-50%);font-size:44px;line-height:1;padding:10px 20px;user-select:none}
.lprev{left:6px}.lnext{right:6px}
@media(max-width:560px){.lnav{font-size:34px;padding:8px 12px}}

/* ─── RETOUR EN HAUT : bouton rond, anneau de progression ─── */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:25;width:56px;height:56px;padding:0;border:0;border-radius:50%;
  background:#141414;color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;translate:0 14px;pointer-events:none;transition:opacity .4s ease,translate .5s cubic-bezier(.16,1,.3,1),background .3s ease}
.totop.is-on{opacity:1;translate:0 0;pointer-events:auto}
.totop-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop-ring circle{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.totop-arrow{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:translate .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.totop:hover{background:#2a2a2a}.totop:hover .totop-arrow{translate:0 -2px}}
.totop:focus-visible{outline:2px solid #141414;outline-offset:3px}
body.hmenu-open .totop{opacity:0;pointer-events:none}
@media(max-width:760px){.totop{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.totop,.totop-ring circle{transition:none}}

/* dimensions déclarées sur les images (évite les sauts au chargement) : le CSS existant garde la main */
:where(img[width][height]){width:auto;height:auto}

/* focus clavier visible partout (les styles de focus existants restent prioritaires) */
:where(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Lien d'évitement : apparaît à la première tabulation, mène au contenu */
.skip{position:fixed;left:16px;top:16px;z-index:10001;padding:12px 20px;border-radius:999px;background:#141414;color:#fff;
  font-weight:600;font-size:11pt;text-decoration:none;transform:translateY(-200%);transition:transform .25s ease}
.skip:focus{transform:none}
main:focus{outline:none}