@charset "UTF-8";
/* ==========================================================================
   ArcSphere Studio — reconstruction statique (sans Framer)
   Source : ../ArcSphere Studio/  (miroir HTTrack, non modifie)
   Toutes les valeurs (couleurs, tailles, espacements, breakpoints) ont ete
   relevees sur le rendu original et sur le CSS SSR de Framer.
   Breakpoints d'origine : >=1440 (desktop) / 810-1439.98 (tablette) / <=809.98 (mobile)
   ========================================================================== */

/* ------------------------------------------------------------- 1. POLICES */
/* Inter Display — latin + latin-ext (accents FR prets pour la traduction) */
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-500-latin-ext.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-600-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-600-latin-ext.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-800-latin.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Display";src:url(../assets/fonts/inter-display-800-latin-ext.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Inter — utilise pour les chiffres d'expertise et les cartes de process */
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-500-latin-ext.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* -------------------------------------------------------------- 2. TOKENS */
:root{
  /* Palette relevee sur les tokens Framer */
  --bg:#f0ebe6;            /* Primary-bg      */
  --ink:#4f4742;           /* Primary-Text    */
  --ink-2:#453e3a;         /* titres services */
  --ink-soft:rgba(79,71,66,.8);
  --ink-70:rgba(79,71,66,.7);
  --ink-faint:rgba(85,77,72,.6);
  --on-dark:#f0ebe6;
  --cream:#efede9;
  --cream-2:#e2dacf;       /* textes des cartes process */
  --dark:#181818;
  --white:#fff;
  --input-ink:#0d0d0d;
  --quote-author:rgba(255,255,255,.58);
  --hairline:rgba(79,71,66,.24);

  --sans:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans-alt:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Easing signature du template */
  --ease:cubic-bezier(.44,0,.56,1);

  /* Rythme vertical */
  --stack:100px;   /* gap entre sections */
  --pad:12px;      /* padding du conteneur de page */
  --band:93%;      /* largeur des sections */
}

/* --------------------------------------------------------------- 3. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --------------------------------------------------- 4. SQUELETTE DE PAGE */
.page{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--stack);
  width:100%;
  padding:var(--pad);
  position:relative;
  overflow:clip;              /* comme l'original : neutralise les debords */
}
.band{width:var(--band)}

/* ------------------------------------------------------- 5. TYPO PARTAGEE */
.eyebrow{font-size:14px;font-weight:500;letter-spacing:-.4px;line-height:1.1;text-transform:uppercase}

.section-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:548px;
  max-width:100%;
  text-align:center;
}
.section-heading__title{
  font-size:40px;font-weight:500;letter-spacing:-.4px;line-height:1.3;
  text-transform:uppercase;color:var(--ink);
}
/* Le sous-titre est contraint plus etroit que le titre (releve sur l'original :
   les libelles longs passent sur deux lignes alors que la bande fait 548px). */
.section-heading__sub{
  max-width:464px;
  font-size:16px;font-weight:400;letter-spacing:-.3px;line-height:1.3;
  text-transform:uppercase;color:var(--ink);
}

/* --------------------------------------------------------- 6. LIENS/BOUTONS */
/* Survol « roll-up » : deux copies du libelle empilees, la 2e monte au survol */
.rollup{display:block;overflow:hidden;height:1.2em;line-height:1.2}
.rollup__inner{display:flex;flex-direction:column;transition:transform .45s var(--ease)}
.rollup__inner>span{display:block;height:1.2em;line-height:1.2}
a:hover .rollup__inner,button:hover .rollup__inner{transform:translateY(-1.2em)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;padding:10px 21px;overflow:hidden;
  font-size:16px;font-weight:400;letter-spacing:-.2px;text-transform:uppercase;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.btn--light{background:var(--bg);color:var(--ink)}
.btn--light:hover{background:var(--ink);color:var(--bg)}
.btn--dark{background:var(--ink);color:var(--on-dark)}
.btn--dark:hover{background:var(--bg);color:var(--ink)}
.btn--glass{background:rgba(240,235,230,.38);color:var(--on-dark);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn--glass:hover{background:var(--bg);color:var(--ink)}
.btn--sm{padding:9px 16px;font-size:14px;letter-spacing:-.4px}

/* Lien souligne (« View more projects ») : trait qui se remplit au survol */
.link-underline{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;
  font-size:16px;font-weight:500;letter-spacing:-.2px;line-height:1.3;
  text-transform:uppercase;color:var(--ink);
}
.link-underline__bar{display:block;width:100%;height:2px;background:#49423d;transform-origin:left;transform:scaleX(1);transition:transform .45s var(--ease)}
.link-underline:hover .link-underline__bar{transform:scaleX(0)}

/* --------------------------------------------------------------- 7. NAV */
.nav{
  width:100%;display:flex;align-items:center;justify-content:center;gap:20px;padding:5px 12px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.nav__inner{display:flex;align-items:center;gap:20px;width:100%}
/* Ordre visuel de l'original : liens a gauche, logo centre, CTA a droite.
   Le DOM garde le logo en premier (optimal pour le menu mobile) ; c'est `order`
   qui recompose la ligne sur desktop. Les deux blocs lateraux etant en `flex:1 1 0`,
   le logo `flex:none` se retrouve exactement au centre. */
.nav__links{order:1;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:32px;padding:2px}
.nav__link{font-size:14px;font-weight:500;letter-spacing:-.4px;text-transform:uppercase;color:var(--ink)}
.nav__logo{
  order:2;flex:none;white-space:nowrap;
  font-size:24px;font-weight:400;letter-spacing:-.4px;line-height:1.1;color:var(--ink);
}
.nav__actions{order:3;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end}
.nav__toggle{display:none}

/* ---------------------------------------------------------------- 8. HERO */
.hero-block{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px}
.hero{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:20px;position:relative;z-index:1}
.hero__pad{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__inner{position:relative;width:100%;height:140vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}

.hero__imgbox{
  position:sticky;top:64px;z-index:1;
  width:100%;max-width:100%;height:min-content;
  display:flex;align-items:center;justify-content:center;
}
.hero__figure{position:relative;flex:1 1 0;min-width:0;height:90vh;border-radius:16px;overflow:hidden}
.hero__figure>img{width:100%;height:100%;object-fit:cover}
/* Voile sombre + degrade : c'est ce qui rend lisible le titre clair */
.hero__scrim{position:absolute;inset:0;z-index:1;background:var(--dark);opacity:.35;border-radius:16px}
.hero__grad{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(24,24,24,0) 28%,rgba(24,24,24,.5) 92%);border-radius:16px}

/* Deux visuels flottants : dans l'original ils sont hors-cadre (translateX +/-400px
   + scale .5) et donc rognes par .page{overflow:clip}. Reproduits a l'identique. */
/* TODO animation : la transformation liee au scroll/appear de ces deux visuels
   n'a pas pu etre determinee (le runtime Framer ne la joue pas hors ligne).
   Etat initial reproduit tel quel — ils restent hors champ, comme sur l'original. */
.hero__float{
  position:absolute;top:50%;z-index:3;
  width:500px;height:700px;border-radius:12px;overflow:hidden;
  transform:translateY(-50%) translateX(var(--fx)) scale(.5);
}
.hero__float>img{width:100%;height:100%;object-fit:cover}
.hero__float--left{left:-60px;--fx:-400px}
.hero__float--right{right:-60px;--fx:400px}

.hero__text{
  position:absolute;bottom:60px;left:40px;right:40px;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;gap:30px;
}
.hero__title{
  font-size:80px;font-weight:400;letter-spacing:-.04em;line-height:1.1;
  color:var(--on-dark);text-align:left;
}
.hero__lead{
  max-width:487px;
  font-size:16px;font-weight:400;letter-spacing:-.3px;line-height:1.3;
  color:var(--on-dark);
}
.hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* -------------------------------------------------------------- 9. TICKER */
/* Bandeau defilant des chiffres cles (entre « about » et « projects ») */
.ticker{width:100%;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;align-items:center;gap:20px;flex:none;animation:ticker-scroll 34s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  flex:none;white-space:nowrap;
  font-size:24px;font-weight:400;letter-spacing:-.3px;line-height:1.3;
  text-transform:uppercase;color:var(--ink);
}
/* TODO animation : le glyphe separateur d'origine est injecte par le runtime
   Framer et absent du miroir ; losange equivalent utilise ici. */
.ticker__sep{flex:none;width:8px;height:8px;background:var(--ink);transform:rotate(45deg);opacity:.55}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- 10. ABOUT */
.about{display:flex;align-items:center;justify-content:space-between}
.about__img{flex:none;width:384px;height:493px;border-radius:12px;overflow:hidden}
.about__img>img{width:100%;height:100%;object-fit:cover}
.about .section-heading{width:464px}

/* ------------------------------------------------------------ 11. PROJETS */
.projects{display:flex;flex-direction:column;align-items:center;gap:56px}
.projects__grid{display:flex;align-items:flex-start;justify-content:center;gap:16px;width:100%}
.project-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.project-card__media{width:100%;height:512px;overflow:hidden}
.project-card__media>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.project-card:hover .project-card__media>img{transform:scale(1.03)}
/* La carte centrale est plus haute dans l'original */
.project-card--tall .project-card__media{height:583px}
.project-card__info{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.project-card__title{font-size:16px;font-weight:500;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase}
.project-card__meta{display:flex;flex-direction:column;gap:4px}
.project-card__meta span{font-size:12px;font-weight:400;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase}

/* ----------------------------------------------------------- 12. SERVICES */
.services{display:flex;flex-direction:column;align-items:center;gap:56px}
.service-list{width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.service-row{position:relative;width:100%;height:180px;display:flex;align-items:center;justify-content:flex-end;overflow:clip;border-top:1px solid var(--hairline)}
.service-row:last-child{border-bottom:1px solid var(--hairline)}
/* Visuel cache a gauche (left:-280px) qui glisse au survol jusqu'a left:0 */
.service-row__img{
  position:absolute;top:50%;left:-280px;z-index:1;
  width:269px;height:180px;overflow:hidden;
  transform:translateY(-50%);
  transition:left .55s var(--ease);
}
.service-row__img>img{width:100%;height:100%;object-fit:cover}
.service-row:hover .service-row__img{left:0}
.service-row__body{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 40px}
.service-row__text{display:flex;flex-direction:column;gap:8px}
.service-row__title{font-size:34px;font-weight:400;letter-spacing:-.4px;line-height:1.3;color:var(--ink-2)}
.service-row__desc{font-size:18px;font-weight:400;letter-spacing:-.3px;line-height:1.3;color:var(--ink-2)}
.service-row__go{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:100px;
  border:1px solid var(--ink);color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.service-row__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.service-row:hover .service-row__go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}

/* ---------------------------------------------------------- 13. EXPERTISE */
.expertise{display:flex;flex-direction:column;align-items:center;gap:56px}
.expertise__grid{display:flex;align-items:flex-start;justify-content:center;gap:16px;width:100%}
.expertise-card{
  position:relative;flex:1 1 0;min-width:0;height:603px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.expertise-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.expertise-card__count{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:auto auto 0;padding:0 16px;text-align:center;
}
.expertise-card__num{font-family:var(--sans-alt);font-size:100px;font-weight:500;letter-spacing:-.2px;line-height:1.1;color:var(--white)}
.expertise-card__label{font-family:var(--sans-alt);font-size:24px;font-weight:400;letter-spacing:-.2px;line-height:1.1;text-transform:uppercase;color:var(--white)}
.expertise-card__overlay{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  padding:24px;
  background:linear-gradient(rgba(0,0,0,0) 0%,rgb(0,0,0) 100%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.expertise-card__title{font-size:32px;font-weight:500;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase;color:var(--white)}
.expertise-card__sub{font-size:12px;font-weight:400;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase;color:var(--white)}

/* ------------------------------------------------------------ 14. PROCESS */
.process{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;height:556px}
.process__grid{display:flex;align-items:flex-start;justify-content:center;gap:8px;width:100%}
.process-card{
  position:relative;flex:1 1 0;min-width:0;height:331px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
}
.process-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.process-card::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(24,24,24,.15) 0%,rgba(24,24,24,.72) 100%)}
/* TODO animation : le calque decoratif « grid » de l'original (lignes + cercle
   en rgba(255,255,255,.03), 110% de la carte) est approxime ci-dessous. */
.process-card__deco{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.process-card__deco::before,.process-card__deco::after{content:"";position:absolute;background:rgba(255,255,255,.03)}
.process-card__deco::before{top:-100%;left:50%;width:152px;height:300%;transform:translateX(-50%)}
.process-card__deco::after{top:50%;left:-100%;width:300%;height:152px;transform:translateY(-50%)}
.process-card__ring{position:absolute;top:50%;left:50%;z-index:1;width:306px;height:306px;border-radius:50%;background:rgba(255,255,255,.03);transform:translate(-50%,-50%);pointer-events:none}
.process-card__top{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px}
.process-card__stage{font-size:16px;font-weight:500;line-height:1.2;color:var(--on-dark)}
.process-card__badge{display:flex;align-items:center;gap:8px}
.process-card__step{font-size:16px;font-weight:500;line-height:1.2;color:var(--on-dark)}
.process-card__icon{display:grid;place-items:center;width:48px;height:48px;padding:8px;border-radius:8px;background:var(--bg)}
.process-card__icon svg{width:24px;height:24px;fill:none;stroke:#4c443f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.process-card__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
.process-card__title{font-family:var(--sans-alt);font-size:24px;font-weight:500;letter-spacing:-.04em;line-height:1.2;text-transform:uppercase;color:var(--cream-2)}
/* L'original applique `capitalize` (Title Case acceptable en anglais). En francais
   cela capitalise chaque mot, ce qui est incorrect : neutralise. */
.process-card__desc{font-family:var(--sans-alt);font-size:12px;font-weight:400;letter-spacing:-.02em;line-height:1.2;text-transform:none;color:var(--cream-2)}

/* ------------------------------------------------------------- 15. AVIS */
.reviews{display:flex;flex-direction:column;align-items:center;gap:56px}
.review{display:flex;align-items:center;justify-content:center;gap:32px;width:100%;padding:16px}
.review__media{position:relative;flex:1.2 1 0;min-width:0;height:587px;overflow:hidden}
.review__media>img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.review__body{flex:1 1 0;min-width:0;display:flex;align-items:center;padding:8px 32px}
.review__content{display:flex;flex-direction:column;gap:24px;width:100%}
.review__stars{display:flex;align-items:center;gap:8px}
.review__stars svg{width:22px;height:22px;fill:var(--ink)}
.review__title{font-size:32px;font-weight:500;line-height:1.3;color:var(--ink)}
.review__quote{font-size:16px;font-weight:400;line-height:1.5;color:var(--ink-70)}
.review__who{display:flex;flex-direction:column;gap:2px}
.review__name{font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.review__role{font-size:14px;font-weight:400;line-height:1.43;color:var(--ink)}
.review__avatars{display:flex;align-items:flex-start;gap:8px}
.review__avatars img{width:74px;height:74px;object-fit:cover}

/* ---------------------------------------------------------------- 16. CTA */
/* 83.7% = 90% de la bande a 93% : reproduit la largeur relevee sur
   l'original (1233px pour une fenetre de 1512px). */
.cta{
  position:relative;width:83.7%;height:573px;padding:32px;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__overlay{position:absolute;inset:0;background:linear-gradient(247deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.64) 100%)}
.cta__quote{position:relative;z-index:1;align-self:flex-start;display:flex;flex-direction:column;gap:12px;max-width:420px}
.cta__quote p{font-size:24px;font-weight:500;letter-spacing:-.4px;line-height:1.3;text-transform:uppercase;color:var(--on-dark)}
.cta__quote cite{font-style:normal;font-size:12px;font-weight:500;letter-spacing:-.4px;line-height:1.3;text-transform:uppercase;color:var(--quote-author)}
.cta__actions{position:relative;z-index:1;align-self:flex-end;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ------------------------------------------------------------ 17. CONTACT */
.contact{display:flex;align-items:flex-start;justify-content:center;gap:100px;height:100vh}
.contact__left{position:sticky;top:0;flex:none;width:50%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:32px 0}
.contact__heading{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%}
.contact__title{font-size:40px;font-weight:500;letter-spacing:-.4px;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.contact__intro{max-width:400px;font-size:16px;font-weight:400;line-height:1.5;color:var(--ink-70)}
.contact__info{display:flex;flex-wrap:wrap;gap:20px 48px;width:100%}
.contact__info>div{display:flex;flex-direction:column;gap:6px;min-width:180px}
.contact__info dt,.contact__info .info__label{font-size:16px;font-weight:500;line-height:1.5;color:var(--ink)}
.contact__info dd,.contact__info .info__value{margin:0;font-size:12px;font-weight:500;line-height:1.5;color:var(--ink)}
.contact__socials{display:flex;align-items:center;gap:8px}
.contact__socials svg{width:23px;height:23px;fill:var(--ink)}

.contact__right{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:100px;padding:32px 0}
.form{display:flex;flex-direction:column;gap:100px;width:100%}
.form__group{display:flex;flex-direction:column;gap:24px;width:100%}
.form__legend{font-size:20px;font-weight:500;letter-spacing:-.4px;line-height:1.2;color:var(--ink)}
.form__list{display:flex;flex-direction:column;gap:16px;width:100%}
.form__field{display:flex;width:100%;padding:12px 0;border-bottom:1px solid var(--hairline)}
.form__field input{
  width:100%;background:none;border:0;padding:0;
  font-family:var(--sans);font-size:18px;color:var(--input-ink);
  transition:border-color .3s var(--ease);
}
.form__field input::placeholder{color:var(--ink-70)}
.form__field:focus-within{border-bottom-color:var(--ink)}
.form__submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:12px;border-radius:10px;background:var(--ink);
  font-size:14px;font-weight:600;line-height:1.2;color:var(--white);
  transition:opacity .3s var(--ease);
}
.form__submit:hover{opacity:.85}

/* ------------------------------------------------------------- 18. FOOTER */
.footer{width:100%;display:flex;flex-direction:column;align-items:center}
.footer__top{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 40px}
.footer__wrapper{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:108px}
.footer__cols{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;width:100%}
.footer__lead{flex:1 1 0;min-width:0;max-width:672px;display:flex;flex-direction:column;align-items:flex-start;gap:64px}
.footer__headline{font-size:40px;font-weight:400;letter-spacing:-1.6px;line-height:1.2;text-transform:uppercase;color:var(--ink)}
.footer__cta{font-size:18px;font-weight:500;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.footer__nav{flex:none;display:flex;align-items:flex-start;gap:48px}
.footer__nav ul{display:flex;flex-direction:column;gap:8px}
.footer__nav a{font-size:14px;font-weight:500;letter-spacing:-.4px;line-height:1.1;text-transform:uppercase;color:var(--ink-soft);transition:color .25s var(--ease)}
.footer__nav a:hover{color:var(--ink)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.footer__socials{display:flex;align-items:center;gap:8px}
.footer__socials a{display:grid;place-items:center;width:40px;height:40px;transition:opacity .25s var(--ease)}
.footer__socials a:hover{opacity:.6}
.footer__socials svg{width:23px;height:23px;fill:var(--ink)}
/* idem : `capitalize` neutralise pour le francais */
.footer__copy{font-size:16px;font-weight:500;letter-spacing:-.3px;line-height:1.3;text-transform:none;color:var(--ink-faint)}

/* Texte geant defilant */
.footer__marquee{width:100%;display:flex;overflow:hidden;padding-top:80px}
.footer__marquee-track{display:flex;align-items:center;gap:20px;flex:none;animation:ticker-scroll 40s linear infinite;will-change:transform}
.footer__marquee span{
  flex:none;white-space:nowrap;
  font-size:240px;font-weight:800;letter-spacing:-.04em;line-height:.96;color:var(--ink);
}
.footer__wide{width:100%;height:493px;overflow:hidden}
.footer__wide>img{width:100%;height:100%;object-fit:cover}

/* ======================================================================== */
/* 18 bis. PAGES SECONDAIRES                                                */
/* ======================================================================== */

/* --- Banniere d'en-tete (projects.html + fiches projet) ---------------- */
.subhero{position:relative;width:100%;height:810px;overflow:hidden;display:flex;align-items:flex-end}
.subhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.subhero__scrim{position:absolute;inset:0;background:var(--dark);opacity:.35}
.subhero__grad{position:absolute;inset:0;background:linear-gradient(rgba(24,24,24,0) 28%,rgba(24,24,24,.5) 92%)}
.subhero__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:56px;width:100%;padding:0 44px 44px}
.subhero__title{font-size:80px;font-weight:400;letter-spacing:-.04em;line-height:1.1;text-transform:uppercase;color:var(--cream)}
/* Fiche projet : titre plus petit, non capitalise */
.subhero--project .subhero__title{font-size:56px;text-transform:none}
.subhero__meta{display:flex;align-items:flex-start;gap:16px;width:100%}
.subhero__meta span{flex:1 1 0;min-width:0;font-size:16px;font-weight:400;line-height:1.3;color:var(--on-dark)}

/* --- Filtres (projects.html) ------------------------------------------- */
.filters{display:flex;align-items:center;gap:32px;width:100%;padding:2px}
.filters__group{display:flex;align-items:center;gap:4px;padding:4px;border-radius:6px;background:var(--white)}
.filters__btn{
  padding:6px 14px;border-radius:4px;
  font-size:14px;font-weight:500;letter-spacing:-.2px;text-transform:uppercase;color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.filters__btn[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filters__btn:hover{background:rgba(79,71,66,.12)}
.filters__btn[aria-pressed="true"]:hover{background:var(--ink)}

/* --- Grille de projets (projects.html) --------------------------------- */
.works{display:flex;flex-direction:column;align-items:center;gap:56px}
.works__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 20px;width:100%}
.work-card{display:flex;flex-direction:column;gap:12px}
.work-card[hidden]{display:none}
.work-card__media{width:100%;aspect-ratio:675/783;overflow:hidden}
.work-card__media>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.work-card:hover .work-card__media>img{transform:scale(1.03)}
.work-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.work-card__title{font-size:24px;font-weight:500;letter-spacing:-.2px;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.work-card__go{
  flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50px;
  border:1px solid var(--ink);color:var(--ink);
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.work-card__go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.work-card:hover .work-card__go{background:var(--ink);color:var(--bg);transform:rotate(-45deg)}
.work-card__info{display:flex;flex-direction:column;gap:2px}
.work-card__info span{font-size:16px;font-weight:500;line-height:1.6;color:var(--ink)}
.works__empty{padding:48px 0;font-size:16px;color:var(--ink-70)}

/* --- Fiche projet ------------------------------------------------------- */
/* Colonne de texte alignee sur la moitie droite, comme l'original */
.project-block{display:flex;justify-content:flex-end;width:100%}
.project-block__col{width:50%;display:flex;flex-direction:column;gap:40px}
.project-lead{font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1.4;color:var(--ink)}
.project-body{font-size:16px;font-weight:500;line-height:1.6;color:#57504b}

.project-gallery{display:flex;flex-direction:column;gap:115px;width:100%}
.project-gallery__row{display:flex;align-items:flex-start;gap:16px;width:100%}
.project-gallery__row--split{justify-content:space-between}
.project-gallery figure{overflow:hidden}
.project-gallery figure>img{width:100%;height:100%;object-fit:cover}
.project-gallery__sm{flex:none;width:342px;aspect-ratio:342/426}
.project-gallery__lg{flex:none;width:698px;aspect-ratio:698/619}
.project-gallery__tall{flex:none;width:342px;aspect-ratio:342/436}

.project-details__intro{font-size:16px;font-weight:400;line-height:1.2;color:var(--ink)}
.project-details__list{display:flex;flex-direction:column;gap:45px;width:100%}
.project-details__row{display:flex;gap:16px;width:100%}
.project-details__cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.project-details__cell dt{font-size:16px;font-weight:400;line-height:1.4;color:rgba(79,71,66,.9)}
.project-details__cell dd{margin:0;font-size:20px;font-weight:400;line-height:1.3;color:var(--ink)}

.other-projects{display:flex;flex-direction:column;gap:32px;width:100%}
.other-projects__title{font-size:44px;font-weight:400;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.other-projects__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%}
.other-projects__list a{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;
  font-size:16px;font-weight:500;line-height:1.6;color:var(--ink);
}
.other-projects__bar{display:block;width:100%;height:1px;background:var(--hairline);transform-origin:left;transform:scaleX(0);transition:transform .45s var(--ease)}
.other-projects__list a:hover .other-projects__bar{transform:scaleX(1)}

/* ======================================================================== */
/* 19. TABLETTE — 810 a 1439.98 px                                          */
/* ======================================================================== */
@media (min-width:810px) and (max-width:1439.98px){
  :root{--stack:98px}

  .hero__pad{padding:0 16px}
  .hero__inner{height:120vh}
  .hero__imgbox{width:1292px;max-width:100%}
  .hero__float--left{left:-240px}
  .hero__float--right{right:-240px}
  .hero__title{font-size:56px}

  .section-heading__title{font-size:32px}
  .about .section-heading__sub{font-size:14px}

  .about{justify-content:center;gap:24px}
  .about .section-heading{flex:1 1 0;width:auto;align-self:stretch;justify-content:center;order:1}
  .about__img{order:0;width:320px;height:420px}
  .about__img--right{order:2}

  .projects{gap:40px}
  .projects__grid{flex-direction:column;align-items:center;gap:32px}
  .project-card{width:100%;flex:none}
  .project-card__media,.project-card--tall .project-card__media{height:397px}

  .services{gap:40px}
  .service-row__title{font-size:34px;line-height:1.2}

  .expertise__grid{gap:12px}
  .expertise-card{height:480px}

  .process{gap:40px;height:auto}
  .process__grid{flex-wrap:wrap;gap:12px}
  .process-card{flex:1 1 calc(50% - 6px);min-width:260px}

  .review{flex-direction:column;padding:0}
  .review__media{flex:none;width:100%;height:348px}
  .review__body{flex:none;width:100%;padding:0}

  .contact{height:auto}
  .contact__left{position:static;height:auto}

  .footer__top{flex-direction:column;padding:0 16px}
  .footer__wrapper{width:100%;flex:none}
  .footer__lead{max-width:none;flex:none;width:100%;gap:32px}
  .footer__cols{flex-direction:column;gap:48px}
  .footer__nav{width:100%;justify-content:space-between}
  .footer__marquee span{font-size:120px}
  .footer__wide{height:320px}

  .ticker__item{font-size:20px}

  /* --- Pages secondaires --- */
  .subhero{height:620px}
  .subhero__title{font-size:56px}
  .subhero--project .subhero__title{font-size:40px}
  .subhero__text{gap:32px;padding:0 32px 32px}
  .works__grid{gap:40px 16px}
  .work-card__title{font-size:20px}
  .work-card__go{width:48px;height:48px}
  .project-block__col{width:65%}
  .project-gallery{gap:64px}
  .project-gallery__row{flex-wrap:wrap}
  .project-gallery__sm,.project-gallery__tall{width:calc(50% - 8px)}
  .project-gallery__lg{width:100%}
  .other-projects__title{font-size:32px}
  .other-projects__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
}

/* ======================================================================== */
/* 20. MOBILE — <= 809.98 px                                                */
/* ======================================================================== */
@media (max-width:809.98px){
  :root{--stack:98px;--pad:8px}

  /* --- Nav : menu deroulant --- */
  .nav__inner{flex-wrap:wrap;gap:12px}
  .nav__logo{order:0;flex:1 1 auto;font-size:20px}
  .nav__toggle{
    display:grid;place-items:center;order:1;flex:none;width:40px;height:40px;
    border:1px solid var(--hairline);border-radius:100px;
  }
  .nav__toggle span{position:relative;display:block;width:16px;height:1px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s linear}
  .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:16px;height:1px;background:var(--ink);transition:transform .3s var(--ease)}
  .nav__toggle span::before{top:-5px}
  .nav__toggle span::after{top:5px}
  .nav[data-open="true"] .nav__toggle span{background:transparent}
  .nav[data-open="true"] .nav__toggle span::before{transform:translateY(5px) rotate(45deg)}
  .nav[data-open="true"] .nav__toggle span::after{transform:translateY(-5px) rotate(-45deg)}
  .nav__links,.nav__actions{
    order:2;flex:0 0 100%;width:100%;
    display:none;flex-direction:column;align-items:flex-start;gap:16px;
  }
  .nav[data-open="true"] .nav__links,.nav[data-open="true"] .nav__actions{display:flex}
  .nav__actions{align-items:stretch}
  .nav__actions .btn{width:100%}

  /* --- Hero --- */
  .hero{justify-content:flex-start;height:100vh;min-height:100vh}
  .hero__pad{padding:24px 16px 0}
  .hero__inner{height:auto}
  .hero__imgbox{position:relative;top:auto}
  .hero__figure{height:88vh}
  .hero__scrim{opacity:.45}
  .hero__grad{background:linear-gradient(rgba(24,24,24,0) 19%,rgba(24,24,24,.7) 82.7%)}
  .hero__float{display:none}   /* hors champ sur l'original : retire ici */
  .hero__text{bottom:100px;left:24px;right:24px;gap:36px;align-items:flex-start}
  .hero__title{font-size:30px;line-height:1.4;letter-spacing:-.04em}
  .hero__lead{font-size:12px;max-width:none}
  .hero__actions{gap:12px}
  .btn{padding:8px 16px;font-size:11px;letter-spacing:-.5px}
  .btn--sm{font-size:11px}

  /* --- Titres de section --- */
  .section-heading{gap:16px;width:100%}
  .section-heading__title{font-size:24px}
  .section-heading__sub{font-size:12px}

  /* --- About : l'original masque le visuel de gauche --- */
  .about{flex-direction:column;justify-content:center;gap:16px}
  .about .section-heading{order:1;width:100%}
  .about__img{order:2;width:100%;height:345px}
  .about__img--left{display:none}

  /* --- Ticker --- */
  .ticker__item{font-size:16px}
  .ticker__sep{width:6px;height:6px}

  /* --- Projets --- */
  .projects{gap:32px}
  .projects__grid{flex-direction:column;gap:24px}
  .project-card{width:100%;flex:none}
  .project-card__media,.project-card--tall .project-card__media{height:397px}

  /* --- Services --- */
  .services{gap:32px}
  .service-row{height:auto;min-height:230px}
  .service-row__img{display:none}
  .service-row__body{flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:30px 0}
  .service-row__title{font-size:28px;line-height:1.2}
  .service-row__desc{font-size:16px}

  /* --- Expertise --- */
  .expertise{gap:32px}
  .expertise__grid{flex-direction:column;gap:16px}
  .expertise-card{flex:none;width:100%;height:420px}
  .expertise-card__num{font-size:72px}
  .expertise-card__label{font-size:16px}
  .expertise-card__overlay{padding:16px;gap:8px}
  .expertise-card__title{font-size:18px;line-height:1.1}

  /* --- Process : les 4 cartes empilees --- */
  .process{gap:40px;height:auto}
  .process__grid{flex-direction:column;gap:12px}
  .process-card{flex:none;width:100%;height:331px}
  .process-card__ring{width:240px;height:240px}

  /* --- Avis (gap 56px conserve a tous les breakpoints, comme l'original) --- */
  .review{flex-direction:column;gap:24px;padding:0}
  .review__media{flex:none;width:100%;height:348px}
  .review__body{flex:none;width:100%;padding:0}
  .review__title{font-size:24px}
  .review__avatars img{width:56px;height:56px}

  /* --- CTA --- */
  .cta{height:auto;min-height:516px;gap:48px;padding:24px}
  .cta__quote{max-width:none}
  .cta__actions{align-self:flex-start;gap:12px}

  /* --- Contact : l'original s'effondre a cette largeur ; corrige ici --- */
  .contact{flex-direction:column;gap:63px;height:auto;padding:0 16px}
  .contact__left{position:static;width:100%;height:auto;gap:48px;padding:12px 0}
  .contact__title{font-size:24px}
  .contact__right{width:100%;height:auto;align-items:stretch;gap:48px;padding:0}
  .form{gap:48px}
  .form__field input{font-size:16px}

  /* --- Footer --- */
  .footer__top{flex-direction:column;padding:0 16px}
  .footer__wrapper{width:100%;flex:none;gap:48px}
  .footer__lead{max-width:none;flex:none;width:100%;gap:32px}
  .footer__headline{font-size:40px;letter-spacing:-1.6px}
  .footer__cols{flex-direction:column;gap:40px}
  .footer__nav{width:100%;flex-wrap:wrap;gap:32px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .footer__marquee{padding-top:40px}
  .footer__marquee span{font-size:24px;letter-spacing:-.4px;line-height:1.1}
  .footer__wide{height:125px}

  /* --- Pages secondaires --- */
  .subhero{height:70vh;min-height:420px}
  .subhero__scrim{opacity:.45}
  .subhero__grad{background:linear-gradient(rgba(24,24,24,0) 19%,rgba(24,24,24,.7) 82.7%)}
  .subhero__text{gap:20px;padding:0 20px 24px}
  .subhero__title{font-size:30px;line-height:1.2}
  .subhero--project .subhero__title{font-size:26px}
  .subhero__meta{flex-direction:column;gap:4px}
  .subhero__meta span{font-size:12px}

  .filters{justify-content:center}
  .filters__group{flex-wrap:wrap;justify-content:center}
  .filters__btn{font-size:12px;padding:6px 10px}

  .works{gap:32px}
  .works__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .work-card__title{font-size:18px}
  .work-card__go{width:44px;height:44px}
  .work-card__go svg{width:16px;height:16px}
  .work-card__info span{font-size:14px}

  .project-block{justify-content:stretch}
  .project-block__col{width:100%;gap:24px}
  .project-lead{font-size:22px;line-height:1.3}
  .project-body{font-size:14px}

  .project-gallery{gap:32px}
  .project-gallery__row,.project-gallery__row--split{flex-direction:column;gap:16px;align-items:stretch}
  .project-gallery__sm,.project-gallery__lg,.project-gallery__tall{width:100%}

  .project-details__list{gap:28px}
  .project-details__row{flex-direction:column;gap:28px}
  .project-details__cell dd{font-size:18px}

  .other-projects__title{font-size:26px}
  .other-projects__list{grid-template-columns:minmax(0,1fr);gap:16px}
}

/* ======================================================================== */
/* 21. ANIMATIONS D'ENTREE (etats initiaux repris de l'original)             */
/* ======================================================================== */
/* IMPORTANT : les etats masques sont conditionnes a `html.js-anim`, ajoute par
   main.js. Sans JS (ou si le script echoue), rien n'est cache et la page reste
   entierement lisible — le template Framer d'origine, lui, reste blanc.       */

/* Blocs : opacity 0 + translateY(12px) -> visible   (10px pour le formulaire) */
.js-anim [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim [data-reveal="form"]{transform:translateY(10px)}
.js-anim [data-reveal="deep"]{transform:translateY(30px)}
.js-anim [data-reveal].is-in{opacity:1;transform:none}

/* Titres : revelation mot par mot (blur + decalage), relevee sur l'original :
   hero  -> blur(5px) translateX(5px) translateY(20px)
   autres -> blur(2px) translateY(20px)                                      */
.js-anim [data-words] .word{
  display:inline-block;
  opacity:.001;filter:blur(2px);transform:translateY(20px);
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);
}
.js-anim [data-words="hero"] .word{filter:blur(5px);transform:translateX(5px) translateY(20px)}
.js-anim [data-words].is-in .word{opacity:1;filter:blur(0);transform:none}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-words] .word,
  .js-anim [data-reveal],.js-anim [data-words] .word{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important;
  }
  .ticker__track,.footer__marquee-track{animation:none}
  *{scroll-behavior:auto!important}
}