/* ============================================================
   FRANTZ REY — Illustration / Graphisme / Motion Design
   V2 — sidebar layout, Poppins + Nunito Sans, skyline footer
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap');

:root{
  --teal:        #00CDD2;
  --teal-dark:   #00A3A7;
  --teal-tint:   #E4F9FA;
  --ink:         #1E1E1E;
  --ink-soft:    #6E6E6E;
  --paper:       #FFFFFF;
  --paper-alt:   #F6F6F4;
  --line:        #E7E5DF;
  --shadow:      0 18px 44px rgba(31,45,82,.20);

  --acc-navy:    #1B2A6B;
  --acc-olive:   #A7C23E;
  --acc-pink:    #E2447B;
  --acc-purple:  #4B4A9E;
  --acc-orange:  #F0942F;

  --sidebar-w:   220px;
  --footer-h:    190px;
}

@media (max-width:880px){
  :root{ --footer-h: 90px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito Sans', sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,.logo,nav.side-nav a,.card-title,.badge,.btn{
  font-family:'Poppins', sans-serif;
}

h1{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); font-weight:600; line-height:1.3; margin:0 0 .5em; }
h2{ font-size:clamp(1.4rem, 2vw, 1.8rem); font-weight:700; margin:0 0 .4em; }
h3{ font-size:1.15rem; font-weight:700; margin:0 0 .3em; }

p{ margin:0 0 1em; color:var(--ink-soft); }

a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--teal-dark); }

a:focus-visible, button:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
}

/* ------------------------------- Layout ------------------------------- */

.page-shell{
  display:flex;
  min-height:100vh;
}

/* ------------------------------- Sidebar ------------------------------- */

aside.sidebar{
  position:fixed;
  top:0; left:0;
  width:var(--sidebar-w);
  height:100vh;
  padding:40px 18px;
  display:flex;
  flex-direction:column;
  gap:38px;
  overflow-y:auto;
  z-index:30;
  background:var(--paper);
}

.logo{
  font-weight:700;
  font-size:1.55rem;
  line-height:1.2;
  color:var(--ink);
  text-decoration:none;
}
.logo span{ display:block; }
.logo:hover{ color:var(--ink); }

nav.side-nav{
  display:flex;
  flex-direction:column;
  gap:22px;
}
nav.side-nav a{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  transition:opacity .15s ease;
}
nav.side-nav a:hover{ color:var(--teal); }
nav.side-nav a.active{
  color:var(--teal);
  font-weight:600;
}
nav.side-nav a.dim{ opacity:.4; }
nav.side-nav a.dim:hover{ opacity:1; }

nav.side-nav .sub-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:-4px 0 -2px 0;
  padding-left:18px;
  border-left:2px solid var(--teal-tint);
}
nav.side-nav .sub-list a{
  font-family:'Poppins', sans-serif;
  font-weight:500;
  font-size:1rem;
  color:var(--teal);
  line-height:1.25;
  white-space:nowrap;
}
nav.side-nav .sub-list a.current{ opacity:1; }
nav.side-nav .sub-list a.dim{ opacity:.4; }
nav.side-nav .sub-list a.dim:hover{ opacity:1; }

/* ------------------------------- Main ------------------------------- */

main.content{
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.content-inner{
  flex:1;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:32px 22px 20px;
  text-align:center;
}

.content-inner.wide{ max-width:1180px; }

.hero-img{
  max-width:600px;
  width:100%;
  margin:0 auto 30px;
}
.hero-img.xl{
  max-width:760px;
}
.hero-img.xl.home{
  max-width:900px;
}
@media (max-width:600px){
  .hero-img{ max-width:340px; }
  .hero-img.xl{ max-width:400px; }
  .hero-img.xl.home{ max-width:460px; }
}

.lede{
  max-width:900px;
  margin:0 auto 0;
  font-size:1.05rem;
  color:var(--ink);
}
h1.lede{ font-family:'Nunito Sans', sans-serif; font-weight:400; line-height:1.65; }

.body-copy{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.body-copy p{ font-size:1.02rem; color:var(--ink-soft); }
.body-copy h1{
  font-family:'Nunito Sans', sans-serif;
  font-size:1.02rem;
  font-weight:400;
  line-height:1.65;
  margin:0 0 1em;
  color:var(--ink-soft);
}
.body-copy.wide{
  max-width:1020px;
  text-align:justify;
  text-align-last:center;
}

/* --------------------------- Section nav (icônes) --------------------------- */

.icon-nav{
  display:flex;
  justify-content:center;
  gap:64px;
  flex-wrap:wrap;
  margin:52px 0 20px;
}
.icon-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-decoration:none;
  max-width:220px;
  transition:transform .18s ease;
}
.icon-nav a:hover{ transform:translateY(-4px); }
.icon-nav a .icon-frame{
  height:104px;
  width:156px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-nav a img{ width:156px; height:104px; object-fit:contain; }
.icon-nav a h3{ color:var(--ink); font-size:1.2rem; }
.icon-nav a:hover h3{ color:var(--teal-dark); }
.icon-nav a p{ font-size:.9rem; margin:0; }

/* -------------------------------- Boutons -------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:.95rem;
  padding:14px 30px;
  border-radius:100px;
  border:2px solid var(--teal);
  color:var(--teal-dark);
  background:transparent;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--teal); color:#fff; }
.btn.primary{ background:var(--teal); border-color:var(--teal); color:#fff; }
.btn.primary:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }

/* --------------------------- Carrousel projet --------------------------- */

.project-carousel{
  position:relative;
  max-width:1050px;
  margin:14px auto 6px;
}

.project-card{
  background:var(--paper);
  border-radius:0;
  box-shadow:0 10px 14px -8px rgba(31,45,82,.28);
  overflow:hidden;
  display:none;
}
.project-card.active{ display:block; }

.project-card .art{
  aspect-ratio:16 / 9;
  height:auto;
  margin:0;
  border:none;
  border-radius:0;
  background:var(--paper);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.project-card .art img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; }

.project-card .art.placeholder{
  color:var(--ink-soft);
  font-size:.85rem;
  text-align:center;
  padding:16px;
}

/* Variante pour les visuels déjà légendés par le client (pas de bandeau ajouté) */
.project-card.baked{ background:var(--paper); }

.info-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:9px 20px;
  background:var(--bar, var(--teal));
  color:#fff;
  flex-wrap:wrap;
}
.info-bar .meta{ text-align:left; }
.info-bar .meta .client{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.88rem; margin-bottom:1px; }
.info-bar .meta .role{ font-size:.74rem; opacity:.85; }
.info-bar .badge{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:.8rem;
  background:rgba(255,255,255,.18);
  padding:8px 16px;
  border-radius:8px;
  white-space:nowrap;
}

.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .15s ease;
  opacity:.85;
}
.carousel-arrow img{ width:100%; height:100%; display:block; }
.carousel-arrow:hover{ opacity:1; }
.carousel-arrow.prev{ left:-46px; }
.carousel-arrow.next{ right:-46px; }

.carousel-dots{
  display:flex; justify-content:center; gap:8px; margin-top:12px;
}
.carousel-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  transition:background .15s ease;
}
.carousel-dots span.active{ background:var(--teal); }

@media (max-width:920px){
  .carousel-arrow.prev{ left:6px; }
  .carousel-arrow.next{ right:6px; }
}

@media (max-width:600px){
  .project-carousel{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .project-card{ order:1; flex:1 0 100%; }
  .carousel-arrow{
    position:static;
    top:auto;
    left:auto; right:auto;
    transform:none;
    width:26px; height:26px;
    order:2;
  }
  .carousel-arrow.next{ order:4; }
  .carousel-dots{ order:3; margin-top:0; }
}

.section-icon{
  width:96px;
  margin:0 auto 8px;
}

.eyebrow{
  font-family:'Poppins', sans-serif;
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--teal-dark);
  font-weight:600;
  display:block;
  margin-bottom:.6em;
}

.note{ font-size:.85rem; color:var(--ink-soft); font-style:italic; }

/* -------------------------- Grille de vidéos motion -------------------------- */

.video-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:40px;
  text-align:left;
}
.video-tile{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper-alt);
}
.video-tile .frame{ position:relative; width:100%; padding-top:56.25%; background:#111; }
.video-tile .frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-tile .click-catcher{
  position:absolute;
  top:0; left:0; right:0;
  height:calc(100% - 46px); /* covers the video frame only, not the caption */
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.video-tile .click-catcher:hover{ background:rgba(0,0,0,.06); }
.video-tile .cap{ padding:14px 18px; font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem; }
@media (max-width:760px){
  .video-grid{ grid-template-columns:1fr; }
}

.video-lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,10,10,.86);
  z-index:100;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.video-lightbox.open{ display:flex; }
.lightbox-inner{
  position:relative;
  width:100%;
  max-width:960px;
}
.lightbox-frame{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:10px; overflow:hidden; }
.lightbox-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lightbox-close{
  position:absolute;
  top:-46px; right:0;
  background:none;
  border:none;
  color:#fff;
  font-size:2.2rem;
  line-height:1;
  cursor:pointer;
}
@media (max-width:600px){
  .video-lightbox{ padding:16px; }
  .lightbox-close{ top:-38px; font-size:1.8rem; }
}

/* --------------------------------- Contact --------------------------------- */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  text-align:left;
  margin-top:40px;
}
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-left-col{ position:relative; }

.contact-visual-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-visual{
  transform:translate(-10px, 12px);
}
@media (max-width:760px){
  .contact-visual{
    width:min(270px, 100%) !important;
    height:auto !important;
    aspect-ratio:1719 / 1783 !important;
    margin:0 auto; transform:none;
  }
}

.coord-list{ list-style:none; margin:0; padding:0; }
.coord-list li{ margin-bottom:22px; }
@media (max-width:760px){
  .coord-list li{ margin-bottom:12px; }
  form.contact-form button{ display:block; margin-left:auto; margin-right:auto; }
}
.coord-list .label{
  letter-spacing:.08em; color:var(--teal-dark); font-weight:600; margin-bottom:4px;
}
.coord-list a, .coord-list span{ font-size:1.08rem; color:var(--ink); }

form.contact-form label{
  display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:.85rem;
  margin-bottom:6px; margin-top:18px;
}
form.contact-form label:first-child{ margin-top:0; }
form.contact-form input, form.contact-form textarea{
  width:100%; font-family:'Nunito Sans',sans-serif; font-size:1rem; padding:12px 14px;
  border:2px solid var(--line); border-radius:8px; background:var(--paper-alt); color:var(--ink);
}
form.contact-form input:focus, form.contact-form textarea:focus{ border-color:var(--teal); outline:none; background:#fff; }
form.contact-form textarea{ min-height:130px; resize:vertical; }
form.contact-form button{ margin-top:24px; cursor:pointer; }

/* ---------------------------------- Footer ---------------------------------- */

footer.site-footer{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:50;
  line-height:0;
}
.skyline{
  width:100%;
  display:block;
  aspect-ratio:3450/525;
  object-fit:cover;
}
.foot-bottom{
  background:var(--teal);
  color:#fff;
  text-align:center;
  font-size:.78rem;
  padding:10px;
  font-family:'Poppins',sans-serif;
}

/* reserve space at the bottom of the page content so the fixed footer never covers it */
.content-inner{ padding-bottom:calc(var(--footer-h) + 32px); }

@media (max-width:880px){
  .skyline{ aspect-ratio:3450/525; }
}

/* --------------------------------- Logos client --------------------------------- */

.logo-strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:18px;
  margin-top:24px;
}
.logo-tile{
  aspect-ratio:2/1;
  border:2px dashed var(--line);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:.78rem; text-align:center; padding:10px;
}

/* --------------------------------- Responsive shell --------------------------------- */

@media (max-width:880px){
  .page-shell{ flex-direction:column; }
  aside.sidebar{
    position:static;
    width:100%;
    height:auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:22px 24px;
    gap:14px;
  }
  .logo span{ display:inline; }
  .logo span:first-child::after{ content:" "; }
  nav.side-nav{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    width:100%;
  }
  nav.side-nav a{ font-size:.86rem; white-space:nowrap; }
  nav.side-nav .sub-list{
    order:99;
    flex-basis:100%;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px 16px;
    margin:2px 0 -4px 0;
    padding-left:0;
    border-left:none;
  }
  nav.side-nav .sub-list a{ font-size:.86rem; }
  main.content{ margin-left:0; }
  .content-inner{ padding:40px 24px calc(var(--footer-h) + 24px); }
}

@media (max-width:600px){
  aside.sidebar{ padding:20px 10px; }
  nav.side-nav{ justify-content:space-between; gap:2px; width:100%; }
  nav.side-nav a{ font-size:.74rem; }
  nav.side-nav .sub-list{ justify-content:center; gap:8px; width:100%; }
  nav.side-nav .sub-list a{ font-size:.78rem; }

  .carousel-page-inner{ display:flex; flex-direction:column; }
  .carousel-page-inner .section-icon{ order:4; margin-top:24px; }
  .carousel-page-inner > h1.lede{ order:3; margin-top:44px; }
  .carousel-page-inner .project-carousel{ order:1; }
  .carousel-page-inner .note{ order:2; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ============================== Hero animations ============================== */
.hero-anim{
  position:relative;
  aspect-ratio:2000 / 1111;
}
.hero-anim .ha-layer{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
}

@keyframes heroSway{
  0%, 100%{ transform:rotate(-0.35deg) translateY(0); }
  50%{      transform:rotate(0.35deg) translateY(-1.5px); }
}
@keyframes heroBrush{
  0%, 100%{ transform:rotate(-1.4deg); }
  50%{      transform:rotate(1.4deg); }
}
@keyframes heroBlink{
  0%, 92%, 100%{ transform:scaleY(1); }
  94%{           transform:scaleY(0.08); }
  96%{           transform:scaleY(1); }
}
@keyframes heroBrow{
  0%, 85%, 100%{ transform:translateY(0); }
  90%{            transform:translateY(-3px); }
  95%{            transform:translateY(0); }
}
@keyframes handWrite{
  0%     { transform:translate(0,0) rotate(0deg); }
  9%     { transform:translate(1.4px,-1.1px) rotate(-2.2deg); }
  16%    { transform:translate(-0.6px,0.8px) rotate(1.6deg); }
  24%    { transform:translate(1.1px,0.3px) rotate(-1.2deg); }
  30%    { transform:translate(-1.3px,-0.6px) rotate(2deg); }
  38%    { transform:translate(0,0) rotate(0deg); }
  47%    { transform:translate(0.9px,-0.9px) rotate(-1.8deg); }
  55%    { transform:translate(-1.1px,0.7px) rotate(1.4deg); }
  63%    { transform:translate(0.6px,0.5px) rotate(-1deg); }
  71%    { transform:translate(-0.8px,-0.4px) rotate(1.8deg); }
  80%    { transform:translate(0,0) rotate(0deg); }
  100%   { transform:translate(0,0) rotate(0deg); }
}

/* ------------------------------ Hero: accueil ------------------------------ */
.hero-anim.hero-img.home .ha-immeubles{ left:2.4%;    top:22.3222%; width:95.25%; height:66.6967%; }
.hero-anim.hero-img.home .ha-colonne{   left:40.05%;  top:59.0459%; width:20.1%;  height:37.0837%; }
.hero-anim.hero-img.home .ha-ombre{     left:43.45%;  top:63.3663%; width:8.3%;   height:2.3402%; }
.hero-anim.hero-img.home .ha-sway{
  position:absolute; inset:0;
  transform-origin:47.3% 64%;
  animation:heroSway 6s ease-in-out infinite;
}
.hero-anim.hero-img.home .ha-jambes{       left:40.2%;   top:39.964%;  width:14.25%; height:24.9325%; }
.hero-anim.hero-img.home .ha-bras-arriere{ left:52.3%;   top:14.3114%; width:8.2%;   height:22.0522%; }
.hero-anim.hero-img.home .ha-corps{        left:45.4%;   top:26.5527%; width:10.8%;  height:23.4023%; }
.hero-anim.hero-img.home .ha-brush-sway{
  position:absolute; inset:0;
  transform-origin:49% 37%;
  animation:heroBrush 5s ease-in-out infinite;
  animation-delay:-1.3s;
}
.hero-anim.hero-img.home .ha-pinceau{      left:29.55%;  top:24.9325%; width:38.65%; height:46.3546%; }
.hero-anim.hero-img.home .ha-bras-avant{   left:41.5%;   top:29.4329%; width:8.55%;  height:12.6913%; }
.hero-anim.hero-img.home .ha-tete{         left:44.45%;  top:8.8209%;  width:11.8%;  height:22.7723%; }
.hero-anim.hero-img.home .ha-bouche{       left:53.25%;  top:17.8218%; width:1.85%;  height:5.4005%; }
.hero-anim.hero-img.home .ha-sourcils{
  left:48.6%; top:7.0207%; width:5.5%; height:5.0405%;
  transform-origin:50% 100%;
  animation:heroBrow 7s ease-in-out infinite;
}
.hero-anim.hero-img.home .ha-yeux{
  left:50.6%; top:12.0612%; width:4.65%; height:5.3105%;
  transform-origin:50% 50%;
  animation:heroBlink 4.8s ease-in-out infinite;
}

/* ------------------------------ Hero: graphisme ------------------------------ */
.hero-anim.ha-graphisme .ha-tablette{     left:40.6%;  top:63.7264%; width:16.3%;  height:9.0009%; }
.hero-anim.ha-graphisme .ha-ordinateur{   left:21.25%; top:13.7714%; width:32.9%;  height:63.9063%; }
.hero-anim.ha-graphisme .ha-sway{
  position:absolute; inset:0;
  transform-origin:57% 88%;
  animation:heroSway 6.5s ease-in-out infinite;
}
.hero-anim.ha-graphisme .ha-main-arriere{ left:47.75%; top:51.2151%; width:16%;   height:21.2422%; }
.hero-anim.ha-graphisme .ha-hand-write{
  position:absolute; inset:0;
  transform-origin:57% 55%;
  animation:handWrite 1.7s linear infinite;
}
.hero-anim.ha-graphisme .ha-tete{         left:45.05%; top:23.3123%; width:20.5%; height:34.4284%; }
.hero-anim.ha-graphisme .ha-langue{       left:50.2%;  top:47.8848%; width:3%;    height:4.1404%; }
.hero-anim.ha-graphisme .ha-main-avant{   left:34.95%; top:67.6866%; width:16.65%;height:12.8712%; }
.hero-anim.ha-graphisme .ha-corps{        left:37.95%; top:41.0441%; width:38.9%; height:43.8344%; }
.hero-anim.ha-graphisme .ha-yeux{
  left:43.85%; top:33.7534%; width:3.6%; height:11.3411%;
  transform-origin:50% 50%;
  animation:heroBlink 5.6s ease-in-out infinite;
}

/* ----------------------------- Hero: illustration ----------------------------- */
.hero-anim.ha-illustration .ha-ombres-feuilles{ left:19.15%; top:86.9487%; width:62.45%; height:7.9208%; }
.hero-anim.ha-illustration .ha-ombre-moi{       left:31.15%; top:80.4681%; width:34%;    height:12.7813%; }
.hero-anim.ha-illustration .ha-leaf{ position:absolute; }
.hero-anim.ha-illustration .ha-feuille-grise{
  left:50.75%; top:9.631%; width:20.4%; height:36.0036%;
  transform-origin:20% 15%;
  animation:leafFloatA 6.5s ease-in-out infinite; animation-delay:-0.6s;
}
.hero-anim.ha-illustration .ha-feuille-rose{
  left:27.9%; top:3.4203%; width:12.25%; height:29.3424%;
  transform-origin:60% 20%;
  animation:leafFloatB 5.5s ease-in-out infinite; animation-delay:-2.1s;
}
.hero-anim.ha-illustration .ha-feuille-violette{
  left:23.75%; top:35.4635%; width:15.05%; height:26.1026%;
  transform-origin:70% 10%;
  animation:leafFloatC 7.2s ease-in-out infinite; animation-delay:-3.4s;
}
.hero-anim.ha-illustration .ha-feuille-rouge{
  left:20.7%; top:20.4321%; width:15.7%; height:22.3222%;
  transform-origin:60% 25%;
  animation:leafFloatD 6.1s ease-in-out infinite; animation-delay:-1.1s;
}
.hero-anim.ha-illustration .ha-feuille-rouge .ha-leaf-swing{
  position:absolute; inset:0;
  transform-origin:50% 50%;
  animation:leafSwing 3.4s ease-in-out infinite;
}
.hero-anim.ha-illustration .ha-feuille-rouge img{ width:100%; height:100%; display:block; }
.hero-anim.ha-illustration .ha-feuille-bleue{
  left:65.1%; top:55.8055%; width:19.25%; height:27.4527%;
  transform-origin:30% 15%;
  animation:leafFloatE 5.3s ease-in-out infinite; animation-delay:-2.8s;
}
.hero-anim.ha-illustration .ha-feuille-verte-devant{
  left:16.05%; top:64.0864%; width:21.9%; height:14.2214%;
  transform-origin:70% 30%;
  animation:leafFloatF 7.8s ease-in-out infinite; animation-delay:-4.2s;
}
.hero-anim.ha-illustration .ha-sway{
  position:absolute; inset:0;
  transform-origin:49% 92%;
  animation:heroSway 6s ease-in-out infinite;
}
.hero-anim.ha-illustration .ha-corps{ left:32.5%; top:42.9342%; width:32.75%; height:49.9550%; }
.hero-anim.ha-illustration .ha-tete{  left:41%;   top:27.3627%; width:16.15%; height:27.9028%; }
.hero-anim.ha-illustration .ha-bouche{ left:44.8%; top:43.2943%; width:2.75%; height:4.7705%; }
.hero-anim.ha-illustration .ha-eyes-blink{
  position:absolute; inset:0;
  transform-origin:50% 50%;
  animation:heroBlink 5.2s ease-in-out infinite;
}
.hero-anim.ha-illustration .ha-yeux{     left:47.1%; top:33.5734%; width:8.1%;  height:9.3607%; }
.hero-anim.ha-illustration .ha-pupilles{ left:47.65%; top:37.3538%; width:6.4%; height:3.5104%; }

@keyframes leafFloatA{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  33%{      transform:translate(6px,-12px) rotate(4.5deg); }
  66%{      transform:translate(-4px,-6px) rotate(-2.4deg); }
}
@keyframes leafFloatB{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  40%{      transform:translate(-8px,-8px) rotate(-5deg); }
  75%{      transform:translate(4px,-4px) rotate(3deg); }
}
@keyframes leafFloatC{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  30%{      transform:translate(8px,6px) rotate(3.4deg); }
  65%{      transform:translate(2px,-10px) rotate(-4.6deg); }
}
@keyframes leafFloatD{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  35%{      transform:translate(-6px,8px) rotate(-3.8deg); }
  70%{      transform:translate(-2px,-8px) rotate(2.6deg); }
}
@keyframes leafFloatE{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  45%{      transform:translate(6px,-6px) rotate(4.2deg); }
  80%{      transform:translate(-6px,2px) rotate(-3deg); }
}
@keyframes leafFloatF{
  0%, 100%{ transform:translate(0,0) rotate(0deg); }
  38%{      transform:translate(-4px,-9px) rotate(-2.6deg); }
  72%{      transform:translate(7px,4px) rotate(4.8deg); }
}
@keyframes leafSwing{
  0%, 100%{ transform:rotate(-4deg); }
  50%{      transform:rotate(4deg); }
}

/* -------------------------------- Hero: contact -------------------------------- */
.hero-anim.ha-contact .ha-ombre-perso{   left:49.2147%; top:92.5407%; width:37.929%;  height:7.3472%; }
.hero-anim.ha-contact .ha-ombre-cariole{ left:4.7702%;  top:96.5788%; width:20.0698%; height:2.0191%; }
.hero-anim.ha-contact .ha-fil-cariole{   left:24.3165%; top:81.6601%; width:28.6213%; height:14.6943%; }
.hero-anim.ha-contact .ha-cart-sway{
  position:absolute; inset:0;
  transform-origin:14.1% 94.5%;
  animation:cartRoll 3.2s ease-in-out infinite;
}
.hero-anim.ha-contact .ha-cariole{ left:4.2467%; top:78.6315%; width:21.0006%; height:19.6859%; }
.hero-anim.ha-contact .ha-sway{
  position:absolute; inset:0;
  transform-origin:54% 95%;
  animation:heroSway 6.2s ease-in-out infinite;
}
.hero-anim.ha-contact .ha-jambe-arriere{        left:59.9767%; top:73.0791%; width:23.5602%; height:15.9282%; }
.hero-anim.ha-contact .ha-bras-arriere-maison{  left:59.5695%; top:22.1537%; width:30.4828%; height:49.7476%; }
.hero-anim.ha-contact .ha-corps-jambe-avant{    left:34.7877%; top:47.5603%; width:38.4526%; height:48.682%; }
.hero-anim.ha-contact .ha-bras-avant-pinceau{   left:7.2135%;  top:5.6085%;  width:75.7417%; height:87.7173%; }
.hero-anim.ha-contact .ha-bag-sway{
  position:absolute; inset:0;
  transform-origin:17.88% 24.22%;
  animation:heroBrush 4.6s ease-in-out infinite;
  animation-delay:-1.7s;
}
.hero-anim.ha-contact .ha-baluchon{ left:4.3048%;  top:15.9843%; width:34.6131%; height:40.101%; }
.hero-anim.ha-contact .ha-tete{     left:39.6161%; top:27.8744%; width:30.541%;  height:28.2109%; }
.hero-anim.ha-contact .ha-sourcils{
  left:46.9459%; top:27.0331%; width:16.5794%; height:10.2075%;
  transform-origin:50% 100%;
  animation:heroBrow 7.4s ease-in-out infinite;
}
.hero-anim.ha-contact .ha-bouche{ left:46.9459%; top:44.5317%; width:17.5684%; height:7.2911%; }
.hero-anim.ha-contact .ha-yeux{
  left:47.4113%; top:36.7358%; width:15.4159%; height:6.2815%;
  transform-origin:50% 50%;
  animation:heroBlink 5s ease-in-out infinite;
}

@keyframes cartRoll{
  0%, 100%{ transform:translateX(0) rotate(0deg); }
  25%{      transform:translateX(4px) rotate(0.5deg); }
  50%{      transform:translateX(-1px) rotate(-0.4deg); }
  75%{      transform:translateX(-4px) rotate(0.5deg); }
}

/* ---------------------------- Hero: motion design ---------------------------- */
.hero-anim.ha-motion .ha-ombre{      left:34.0%;   top:76.0576%; width:33.5%;  height:6.3006%; }
.hero-anim.ha-motion .ha-ordinateur{ left:35.15%;  top:24.9325%; width:33.75%; height:56.1656%; }
.hero-anim.ha-motion .ha-sway{
  position:absolute; inset:0;
  transform-origin:50% 85%;
  animation:heroSway 6.4s ease-in-out infinite;
}
.hero-anim.ha-motion .ha-bras-gauche{ left:55.6%; top:28.8029%; width:10.05%; height:21.2421%; }
.hero-anim.ha-motion .ha-arm-gauche-sway{
  position:absolute; inset:0;
  transform-origin:58.03% 42.83%;
  animation:armGaucheSpread 4.5s ease-in-out infinite;
}
.hero-anim.ha-motion .ha-corps{ left:47.7%; top:32.8533%; width:16.1%; height:19.532%; }
.hero-anim.ha-motion .ha-bras-droit{ left:42.6%; top:31.4131%; width:10.85%; height:16.7417%; }
.hero-anim.ha-motion .ha-arm-droit-sway{
  position:absolute; inset:0;
  transform-origin:52.25% 44.05%;
  animation:armDroitSpread 4.5s ease-in-out infinite;
}
.hero-anim.ha-motion .ha-tete{         left:46.45%; top:19.622%;  width:14.65%;height:24.7525%; }
.hero-anim.ha-motion .ha-bouche{       left:47.95%; top:23.8524%; width:11.15%;height:15.7516%; }
.hero-anim.ha-motion .ha-yeux{
  left:48.05%; top:16.2016%; width:8.1%; height:9.631%;
  transform-origin:50% 50%;
  animation:heroBlink 5.4s ease-in-out infinite;
}
.hero-anim.ha-motion .ha-clap-bas-sway{
  position:absolute; inset:0;
  transform-origin:29.55% 71.47%;
  animation:clapSnap 5s ease-in-out infinite;
}
.hero-anim.ha-motion .ha-clap-bas{ left:26.45%; top:71.4671%; width:18.0%; height:13.8614%; }
.hero-anim.ha-motion .ha-clap-haut{ left:17.5%; top:45.9046%; width:27.9%; height:45.8146%; }

@keyframes armDroitSpread{
  0%, 100%{ transform:rotate(0deg); }
  50%{      transform:rotate(-9deg); }
}
@keyframes armGaucheSpread{
  0%, 100%{ transform:rotate(0deg); }
  50%{      transform:rotate(9deg); }
}
@keyframes clapSnap{
  0%, 80%, 100%{ transform:rotate(0deg); }
  85%{            transform:rotate(-30deg); }
  94%{            transform:rotate(0deg); }
}

/* -------------------------------- Hero: à propos -------------------------------- */
.hero-anim.ha-apropos .ha-pers{  left:9.7%;   top:39.514%;  width:80.45%; height:54.9055%; }
.hero-anim.ha-apropos .ha-table{ left:35.45%; top:6.5707%;  width:31.1%;  height:77.1377%; }
.hero-anim.ha-apropos .ha-pencil-perp{
  position:absolute; inset:0;
  animation:pencilSlidePerp 3.8s ease-in-out infinite;
}
.hero-anim.ha-apropos .ha-crayon-vert{ left:37.85%; top:83.1683%; width:4.9%; height:6.4806%; }
.hero-anim.ha-apropos .ha-crayon-jaune{
  left:58.35%; top:45.0045%; width:5.1%; height:7.7408%;
  transform-origin:50% 50%;
  animation:pencilSpin 4.2s ease-in-out infinite;
}
.hero-anim.ha-apropos .ha-crayon-rouge{
  left:52.3%; top:52.5653%; width:5.95%; height:4.7705%;
  transform-origin:50% 50%;
  animation:pencilSpin 5.1s ease-in-out infinite;
  animation-delay:-1.8s;
}
.hero-anim.ha-apropos .ha-sway{
  position:absolute; inset:0;
  transform-origin:47% 58%;
  animation:heroSway 6.6s ease-in-out infinite;
}
.hero-anim.ha-apropos .ha-corps{ left:33.4%; top:26.1926%; width:27.05%; height:31.4131%; }
.hero-anim.ha-apropos .ha-hand-write{
  position:absolute; inset:0;
  transform-origin:40% 37%;
  animation:handWrite 1.5s linear infinite;
}
.hero-anim.ha-apropos .ha-main-crayon{ left:37.95%; top:35.8236%; width:5.55%; height:16.5617%; }
.hero-anim.ha-apropos .ha-tete{ left:40.05%; top:16.6517%; width:16.75%; height:27.0927%; }
.hero-anim.ha-apropos .ha-sourcils{
  left:43.65%; top:23.6724%; width:8.2%; height:10.081%;
  transform-origin:50% 50%;
  animation:browFurrow 6.8s ease-in-out infinite;
}
.hero-anim.ha-apropos .ha-yeux{
  left:42.7%; top:28.1728%; width:7.6%; height:10.6211%;
  transform-origin:50% 50%;
  animation:heroBlink 5.2s ease-in-out infinite;
}
.hero-anim.ha-apropos .ha-drop{ opacity:0; transform:scale(.6); }
.hero-anim.ha-apropos .ha-goutte-1{
  left:44.6%; top:6.5707%; width:1.2%; height:4.3204%;
  animation:dropPop1 3.6s ease-out infinite; animation-delay:-0.4s;
}
.hero-anim.ha-apropos .ha-goutte-2{
  left:37.85%; top:15.6616%; width:1.6%; height:3.5104%;
  animation:dropPop2 4.1s ease-out infinite; animation-delay:-1.6s;
}
.hero-anim.ha-apropos .ha-goutte-3{
  left:57.35%; top:19.1719%; width:2.05%; height:2.3402%;
  animation:dropPop3 3.3s ease-out infinite; animation-delay:-2.5s;
}

@keyframes pencilSlidePerp{
  0%, 100%{ transform:translate(-1.5px,2px); }
  50%{      transform:translate(1.5px,-2px); }
}
@keyframes pencilSpin{
  0%, 100%{ transform:rotate(-2.5deg); }
  50%{      transform:rotate(2.5deg); }
}
@keyframes browFurrow{
  0%, 80%, 100%{ transform:translateY(0) scaleY(1); }
  90%{            transform:translateY(4px) scaleY(0.82); }
}
@keyframes dropPop1{
  0%{   opacity:0; transform:translate(0,0) scale(.6); }
  15%{  opacity:1; transform:translate(0,0) scale(1); }
  70%{  opacity:1; transform:translate(2px,-16px) scale(1.05); }
  85%{  opacity:0; transform:translate(3px,-20px) scale(.3); }
  100%{ opacity:0; transform:translate(0,0) scale(.6); }
}
@keyframes dropPop2{
  0%{   opacity:0; transform:translate(0,0) scale(.6); }
  15%{  opacity:1; transform:translate(0,0) scale(1); }
  70%{  opacity:1; transform:translate(-11px,-9px) scale(1.05); }
  85%{  opacity:0; transform:translate(-15px,-12px) scale(.3); }
  100%{ opacity:0; transform:translate(0,0) scale(.6); }
}
@keyframes dropPop3{
  0%{   opacity:0; transform:translate(0,0) scale(.6); }
  15%{  opacity:1; transform:translate(0,0) scale(1); }
  70%{  opacity:1; transform:translate(13px,6px) scale(1.05); }
  85%{  opacity:0; transform:translate(17px,8px) scale(.3); }
  100%{ opacity:0; transform:translate(0,0) scale(.6); }
}