/* =========================================================
   Histoires éternelles — fleuriste créateur
   Recréation du site d'origine (accueil + pages intérieures)
   ========================================================= */

:root{
  --coral:        #ec6a5c;   /* titres script + titres de services */
  --coral-soft:   #e5a49e;   /* sur-titre « créations florales »   */
  --pink:         #f4d8dc;   /* boutons + pastilles réseaux        */
  --pink-deep:    #eec6cb;
  --pink-quote:   #f3d3d6;   /* guillemets décoratifs              */
  --ink:          #3f3f3f;   /* titres foncés                      */
  --grey:         #8d8d8d;   /* texte courant                      */
  --grey-nav:     #767676;
  --grey-line:    #e2dedd;
  --soft:         #f5f3f2;   /* fond des sections claires          */
  --white:        #fff;

  --f-script: "Yellowtail", cursive;
  --f-serif:  "EB Garamond", Georgia, "Times New Roman", serif;
  --f-sans:   "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --shell: 1080px;
  --header-h: 68px;
  --slant: 0deg;             /* inclinaison des bandeaux (0 = droits ; 1.15deg = obliques d'origine) */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  /* Safari sur iPhone : sans ces deux lignes, la page se déplace de côté au doigt */
  overflow-x:hidden;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--grey);
  font-family:var(--f-serif);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  overflow-wrap:break-word;      /* les adresses e-mail ne débordent plus */
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.1em; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- révélations au scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition:padding .3s var(--ease), box-shadow .3s var(--ease);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding-block:10px;
  transition:padding .3s var(--ease);
}
.site-header.is-stuck .header-inner{ padding-block:4px; }

/* -- logo -- */
.logo{ display:block; flex:0 0 auto; }
.logo-img{
  display:block;
  width:auto; height:52px;
  transition:height .3s var(--ease);
}
.site-header.is-stuck .logo-img{ height:40px; }

/* -- navigation -- */
.nav-list{
  display:flex; align-items:center; gap:30px;
  margin:0; padding:0; list-style:none;
}
.nav-list > li{ position:relative; }
.nav-list a{
  display:inline-block;
  font-family:var(--f-serif);
  font-size:13.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey-nav);
  padding-block:16px;
  transition:color .25s var(--ease);
}
.nav-list a:hover{ color:var(--coral); }
.nav-list a.is-current{ color:#4a4746; }

.caret{
  display:inline-block; width:0; height:0; margin-left:5px;
  vertical-align:middle;
  border:4px solid transparent;
  border-top-color:currentColor;
  transform:translateY(2px);
}
.sub-toggle{ display:none; }

.sub-menu{
  position:absolute; top:100%; left:-22px;
  min-width:218px;
  margin:0; padding:6px 0;
  list-style:none;
  background:var(--white);
  border-top:2px solid var(--coral);
  box-shadow:0 12px 28px rgba(0,0,0,.09);
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu{ opacity:1; visibility:visible; transform:none; }
.sub-menu a{
  display:block;
  padding:9px 22px;
  font-size:12.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* -- burger -- */
.burger{
  display:none;
  width:42px; height:36px;
  margin-left:auto;
  border:0; background:none; cursor:pointer;
  padding:8px 6px;
}
.burger span{
  display:block; height:2px; margin:5px 0;
  background:var(--grey-nav);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  margin-top:var(--header-h);
  height:clamp(420px, 48vw, 720px);
  overflow:hidden;
  background:#2e4430;
}
.hero-media{ position:absolute; inset:0; }
.hero-img,
.hero-video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--focus, 50% 50%);  /* cadrage réglable par image : style="--focus:50% 30%" */
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1); }
  to  { transform:scale(1.08); }
}
@media (prefers-reduced-motion:reduce){
  .hero-img,.hero-video{ animation:none; }
}

/* bandes obliques translucides en bas du hero */
.hero-slants{ position:absolute; inset:auto 0 -1px 0; height:170px; pointer-events:none; }
.slant{
  position:absolute; left:-8%; right:-8%;
  display:block;
}
.slant-1{                                   /* bande claire, montante   */
  bottom:46px; height:58px;
  background:rgba(255,255,255,.34);
  transform:rotate(calc(var(--slant) * -1.1));
}
.slant-2{                                   /* bande grise, descendante */
  bottom:22px; height:52px;
  background:rgba(128,128,128,.32);
  transform:rotate(calc(var(--slant) * 1.2));
}
.slant-3{                                   /* bas de page blanc        */
  bottom:-46px; height:90px;
  background:var(--white);
  transform:rotate(calc(var(--slant) * -1.1));
}

/* =========================================================
   INTRO
   ========================================================= */
.script-title{
  margin:0 0 .25em;
  font-family:var(--f-script);
  font-weight:400;
  font-size:clamp(34px, 3.2vw, 46px);
  line-height:1.25;
  color:var(--coral);
}
.script-title--sm{
  font-size:clamp(24px, 2vw, 30px);
  margin-bottom:.6em;
  white-space:nowrap;
}

.eyebrow{
  margin:0;
  font-family:var(--f-sans);
  font-size:15px;
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--coral-soft);
}

.intro{ padding:110px 0 96px; }
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  text-align:center;
}
.intro-grid--solo{ grid-template-columns:1fr; }   /* titre déplacé dans la bannière */
.intro-grid--solo .intro-text{ max-width:560px; font-size:18px; }
.intro-text{
  max-width:330px;
  margin-inline:auto;
  margin-bottom:0;
}

/* =========================================================
   SECTIONS À BORDS OBLIQUES
   ========================================================= */
.section-soft{
  position:relative;
  background:var(--soft);
  z-index:0;
}
.section-soft::before,
.section-soft::after{
  content:"";
  position:absolute;
  left:-10%; right:-10%;
  height:90px;
  background:inherit;
  z-index:-1;
}
.section-soft::before{ top:-44px; transform:rotate(calc(var(--slant) * -1)); }
.section-soft::after { bottom:-44px; transform:rotate(calc(var(--slant) * -1)); }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ padding:84px 0 96px; }
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:46px;
}
.service-thumb{
  display:block;
  width:162px; height:162px;
  margin:0 auto 36px;
  border-radius:50%;
  overflow:hidden;
}
.service-thumb img{                          /* visuels ronds d'origine : le disque occupe 2/3 du PNG */
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.52);
  transition:transform .8s var(--ease);
}
.service-thumb:hover img{ transform:scale(1.64); }

.service-title{
  margin:0 0 .7em;
  font-family:var(--f-sans);
  font-size:15px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--coral);
}
.service p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* =========================================================
   À PROPOS
   ========================================================= */
.about{ position:relative; padding:120px 0 110px; overflow:hidden; }
.about-grid{
  display:grid;
  grid-template-columns:1.346fr 20px 1.346fr 69px 1fr;  /* 2 photos + colonne texte */
  align-items:start;
}
.about-grid > *:nth-child(1){ grid-column:1; }
.about-grid > *:nth-child(2){ grid-column:3; }
.about-grid > *:nth-child(3){ grid-column:5; }
.about-photo{ margin:0; overflow:hidden; }
.about-photo img{
  width:100%; height:570px;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.about-photo:hover img{ transform:scale(1.05); }

.about-text{ text-align:center; padding-top:26px; }
.about-text p{
  font-size:15px;
  line-height:1.6;
  text-align:justify;
  hyphens:auto;
}
.about-more{ margin-top:40px; }

.link-caps{
  font-family:var(--f-sans);
  font-size:13px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
}
.link-caps::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--coral);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.link-caps:hover::after{ transform:scaleX(1); }

.about-seal{
  display:inline-block;
  width:92px;
  margin-top:26px;
}
.about-seal img{ width:100%; height:auto; opacity:.85; }

/* branches décoratives */
.branch{
  position:absolute;
  width:300px; height:300px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.5;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23d8d4d2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 282C60 236 108 186 160 142 208 101 248 70 282 44'/%3E%3Cpath d='M96 210c-16-22-14-46 4-64 16 20 14 46-4 64z'/%3E%3Cpath d='M100 206c24-6 44 4 54 24-24 8-44-2-54-24z'/%3E%3Cpath d='M148 152c-14-24-8-48 12-62 12 22 6 48-12 62z'/%3E%3Cpath d='M152 148c24-10 46-2 58 18-24 10-46 2-58-18z'/%3E%3Cpath d='M204 100c-12-24-4-48 16-60 10 24 2 48-16 60z'/%3E%3Cpath d='M208 96c25-8 46 2 56 22-25 8-46-2-56-22z'/%3E%3Cpath d='M256 56c-8-24 2-45 22-54 6 24-4 46-22 54z'/%3E%3C/svg%3E");
}
.branch-right{ top:60px; right:-40px; transform:scaleX(-1); }
.branch-left { bottom:40px; left:-50px; }
@media (max-width:1320px){ .branch{ opacity:.32; } }
@media (max-width:1180px){ .branch{ display:none; } }

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */
.testimonials{ padding:40px 0 100px; }
.testimonials .section-caps{ margin-bottom:10px; }
.testimonials-note{
  margin:0 0 54px;
  text-align:center;
  font-size:15px;
  color:var(--grey);
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:52px 44px;
}
.testimonials-link{ margin:58px 0 0; text-align:center; }
.quote{
  position:relative;
  display:flex;
  flex-direction:column;
  margin:0;
  text-align:center;
}
.quote cite{ margin-top:auto; }   /* signatures alignées entre colonnes */
.quote p{
  margin:0 0 .9em;
  font-size:15px;
  font-style:italic;
  line-height:1.65;
}
.quote cite{
  font-style:normal;
  font-size:15px;
  color:var(--coral);
}
.quote-mark{
  display:block;
  margin:0 0 -26px;
  font-family:Georgia, var(--f-serif);
  font-weight:700;
  font-size:70px;
  line-height:1;
  color:var(--pink-quote);
}

/* =========================================================
   INSTAGRAM
   ========================================================= */
.insta{ padding:96px 0 104px; }
.section-caps{
  margin:0 0 54px;
  text-align:center;
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
}
.insta-grid{
  display:grid;
  grid-template-columns:1.346fr 20px 1.346fr 63px 1fr;
  align-items:center;
}
.insta-grid > *:nth-child(1){ grid-column:1; }
.insta-grid > *:nth-child(2){ grid-column:3; }
.insta-grid > *:nth-child(3){ grid-column:5; }
.insta-photo{ display:block; overflow:hidden; }
.insta-photo img{
  width:100%; height:188px;
  object-fit:cover;
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
.insta-photo:hover img{ transform:scale(1.06); filter:brightness(1.04); }
.insta-cta{ text-align:center; }
.insta-cta .btn{ display:block; padding-inline:18px; }

/* bouton */
.btn{
  display:inline-block;
  padding:16px 34px;
  background:var(--pink);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:13px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:var(--coral); color:var(--white); transform:translateY(-2px); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ position:relative; padding:120px 0 130px; overflow:hidden; }
.contact-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.6fr;
  column-gap:65px;
  align-items:center;
}
.contact-photo{ margin:0; overflow:hidden; }
.contact-photo img{
  width:100%; height:368px;
  object-fit:cover;
  object-position:var(--focus, 50% 50%);   /* cadrage réglable : style="--focus:50% 20%" */
  transition:transform .9s var(--ease);
}
.contact-photo:hover img{ transform:scale(1.05); }
.contact-photo--high img{ height:390px; }

.contact-card{ text-align:center; }
.contact-line{ margin:.5em 0 0; font-size:15px; }
.contact-line a:hover{ color:var(--coral); }
.contact-card .btn{ margin-bottom:22px; }

/* réseaux sociaux */
.socials{
  display:flex; gap:14px;
  margin:26px 0 0; padding:0;
  list-style:none;
  justify-content:center;
}
.socials a{
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:50%;
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.socials a:hover{ transform:translateY(-3px); }
.icon{ width:16px; height:16px; }
.socials--pink a{ background:var(--pink); }
.socials--pink a:hover{ background:var(--coral); }
.socials--pink .icon{ fill:#4b4b4b; }
.socials--pink a:hover .icon{ fill:#fff; }
.socials--outline a{ background:var(--white); box-shadow:0 0 0 1px var(--grey-line) inset; }
.socials--outline .icon{ fill:#4b4b4b; }
.socials--outline a:hover{ background:var(--pink); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--soft);
  padding:74px 0 34px;
  font-size:14px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:40px;
}
.footer-title{
  margin:0 0 1.1em;
  font-family:var(--f-serif);
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.35;
}
.footer-col p{
  margin:0 0 .5em;
  font-size:14px;
  line-height:1.65;
  text-align:justify;
  hyphens:auto;
}
.footer-col a:hover{ color:var(--coral); }
.footer-col .socials{ justify-content:flex-start; margin-top:0; }

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:64px;
  font-family:var(--f-sans);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9b9795;
}
.footer-bottom a:hover{ color:var(--coral); }
.credit{
  font-family:var(--f-script);
  font-size:17px;
  letter-spacing:0;
  text-transform:none;
  color:#8d8886;
}

/* =========================================================
   PAGES INTÉRIEURES
   ========================================================= */
.hero--page{ height:clamp(380px, 44vw, 620px); }

/* titre posé sur le bandeau */
.hero .hero-media::after{                 /* voile léger : garde le texte lisible */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(58,48,44,.42), rgba(58,48,44,.30) 52%, rgba(58,48,44,.36));
}
.hero-caption{
  position:absolute; inset:0;
  display:grid; align-content:center; justify-items:center;
  padding:var(--header-h) 24px 74px;
  text-align:center;
}
.hero-caption .eyebrow{ color:var(--white); text-shadow:0 1px 10px rgba(60,44,38,.8), 0 0 26px rgba(60,44,38,.5); }
.hero-caption .script-title{
  margin:.12em 0 0;
  font-size:clamp(46px, 5.4vw, 78px);
  color:var(--white);
  text-shadow:0 2px 22px rgba(60,44,38,.42);
}
.hero-caption .lead{
  max-width:560px;
  margin:18px auto 0;
  font-size:17px;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(60,44,38,.46);
}

.page-intro{ padding:92px 0 36px; text-align:center; }
.page-intro .script-title{ font-size:clamp(40px, 4vw, 58px); margin-bottom:.1em; }
.page-intro .lead{ max-width:600px; margin:22px auto 0; font-size:17px; }
.page-top{ padding-top:calc(var(--header-h) + 84px); }   /* pages sans bandeau photo */

/* texte + photo */
.feature{ padding:48px 0 110px; }
.feature + .feature{ padding-top:0; }
.feature-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:76px;
  align-items:center;
}
.feature-grid--flip > .feature-photo{ order:-1; }
.feature-title{
  margin:0 0 1.5em;
  font-family:var(--f-sans);
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.feature-text p{
  font-size:16px;
  text-align:justify;
  hyphens:auto;
}
.feature-text .btn{ margin-top:16px; }
.note{ font-style:italic; color:#a39d9b; }
.feature-photo{ margin:0; overflow:hidden; }
.feature-photo img{
  width:100%; height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:var(--focus, 50% 50%);
  transition:transform .9s var(--ease);
}
.feature-photo--wide img{ aspect-ratio:3/2; }
.feature-photo:hover img{ transform:scale(1.04); }

/* vidéo verticale (format téléphone) à la place de la photo */
.coulisses{ padding:104px 0 112px; }
.coulisses .script-title{ margin-bottom:.6em; }
.feature-video{
  justify-self:center;
  width:100%; max-width:340px;
  /* jamais plus haute que l'écran visible (en-tête fixe + marge déduits) */
  max-width:min(340px, calc((100vh - 112px) * 9 / 16));
  max-width:min(340px, calc((100svh - 112px) * 9 / 16));
  margin:0;
}
.feature-video video{
  display:block;
  width:100%; height:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  background:#2b2725;
}

/* distinction */
.award{ padding:10px 0 110px; text-align:center; }
.award .eyebrow{ margin-bottom:.6em; }
.section-soft + .award{ padding-top:104px; }             /* après un bord oblique */
.award p{ max-width:520px; margin:0 auto; font-size:18px; font-style:italic; color:var(--ink); }

/* liste de publics, même typographie que .award p */
.audience{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.3em 1.6em;
  max-width:640px;
  margin:0 auto; padding:0;
  list-style:none;
  font-size:18px; font-style:italic; color:var(--ink);
}

/* grille de services à 5 éléments : 3 + 2 centrés */
.services-grid--wrap{ display:flex; flex-wrap:wrap; justify-content:center; }
.services-grid--wrap > .service{ flex:0 1 calc((100% - 2 * 46px) / 3); }
.service-thumb--photo img{ transform:none; }             /* photo pleine, pas un PNG rond détouré */
.service-thumb--photo:hover img{ transform:scale(1.09); }

/* galeries */
.gallery-section{ padding:96px 0 104px; }
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.gallery-item{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:1;
  background:#e9e5e3;
}
.gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.06); filter:brightness(1.04); }
.gallery-item:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

.masonry{ columns:3 260px; column-gap:16px; }
.masonry .gallery-item{ aspect-ratio:auto; margin:0 0 16px; break-inside:avoid; }
.masonry .gallery-item img{ height:auto; }
.portfolio{ padding:20px 0 110px; }

/* appel à contact */
.cta{ padding:104px 0 112px; text-align:center; }
.cta p{ max-width:520px; margin:0 auto 32px; font-size:17px; }

/* visionneuse photo */
.lightbox{
  width:100vw; height:100vh;
  max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:rgba(32,29,28,.95);
  color:var(--white);
}
.lightbox::backdrop{ background:rgba(32,29,28,.95); }
.lightbox-figure{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%;
  margin:0;
  padding:64px 76px 28px;
}
.lightbox-figure img{
  max-width:100%;
  max-height:calc(100vh - 140px);
  object-fit:contain;
}
.lightbox figcaption{
  margin-top:16px;
  font-family:var(--f-sans);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  color:#d8d1cf;
}
.lb-btn{
  position:absolute;
  width:54px; height:54px;
  border:0; background:none; cursor:pointer;
  color:var(--white);
  font-family:var(--f-sans);
  font-size:34px; font-weight:300; line-height:1;
  opacity:.75;
  transition:opacity .25s var(--ease);
}
.lb-btn:hover,
.lb-btn:focus-visible{ opacity:1; }
.lb-close{ top:10px; right:12px; }
.lb-prev,
.lb-next{ top:50%; transform:translateY(-50%); font-size:46px; }
.lb-prev{ left:10px; }
.lb-next{ right:10px; }

/* contact */
.contact--page{ padding-top:24px; }
.address{ margin-top:34px; font-size:15px; }
.address-title{
  margin:0 0 .5em;
  font-family:var(--f-sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.address .link-caps{ font-size:11.5px; }

/* mentions légales */
.prose{ max-width:760px; margin:0 auto; padding-bottom:110px; }
.prose h2{
  margin:2.6em 0 1em;
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.prose h2:first-child{ margin-top:0; }
.prose p{ font-size:16px; }
.prose a{ color:var(--coral); }
.prose ul{ margin:0 0 1.1em; padding-left:1.2em; font-size:16px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2, 1fr); gap:48px 36px; }
  .services-grid--wrap > .service{ flex-basis:calc((100% - 36px) / 2); }
  .footer-grid{ grid-template-columns:repeat(2, 1fr); gap:40px; }
  .about-photo img{ height:360px; }
}

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white);
    box-shadow:0 18px 30px rgba(0,0,0,.08);
    max-height:0; overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .nav.is-open{ max-height:80vh; overflow-y:auto; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; padding:8px 0; }
  .nav-list > li{ border-top:1px solid var(--grey-line); }
  .nav-list > li:first-child{ border-top:0; }
  .nav-list a{ padding:14px 26px; }
  .caret{ display:none; }
  .sub-toggle{
    display:block;
    position:absolute; top:6px; right:14px;
    width:38px; height:38px;
    border:0; background:none; cursor:pointer;
  }
  .sub-toggle::before,
  .sub-toggle::after{
    content:""; position:absolute; top:50%; left:50%;
    width:12px; height:1.5px; background:var(--grey-nav);
    transform:translate(-50%,-50%);
    transition:transform .3s var(--ease);
  }
  .sub-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .sub-toggle[aria-expanded="true"]::after{ transform:translate(-50%,-50%) rotate(0); }
  .sub-menu{
    position:static;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none; border-top:0;
    background:#faf8f8;
    max-height:0; overflow:hidden; padding:0;
    transition:max-height .35s var(--ease);
  }
  .sub-menu.is-open{ max-height:320px; }
  .sub-menu a{ padding-left:44px; }

  .intro{ padding:76px 0 62px; }
  .intro-grid{ grid-template-columns:1fr; gap:26px; }

  .about-grid,
  .contact-grid,
  .insta-grid{ grid-template-columns:1fr; row-gap:26px; }
  .about-grid > *:nth-child(n),
  .insta-grid > *:nth-child(n){ grid-column:1; }
  .about-photo img{ height:auto; aspect-ratio:3/4; }
  .contact-photo img,
  .contact-photo--high img{ height:auto; aspect-ratio:4/3; }
  .about-text{ padding:20px 0 0; }
  .insta-cta{ padding-left:0; }
  .insta-photo img{ height:auto; aspect-ratio:3/2; }

  .testimonials-grid{ grid-template-columns:1fr; gap:38px; }
  .branch{ display:none; }

  .page-intro{ padding:64px 0 26px; }
  .page-top{ padding-top:calc(var(--header-h) + 56px); }
  .feature{ padding:30px 0 76px; }
  .feature-grid{ grid-template-columns:1fr; gap:34px; }
  .feature-grid--flip > .feature-photo{ order:0; }
  .gallery-section{ padding:72px 0 80px; }
  .section-soft + .award{ padding-top:76px; }
  .cta{ padding:76px 0 84px; }
  .coulisses{ padding:76px 0 84px; }
}

@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
  .services-grid--wrap > .service{ flex-basis:100%; }
  .service p,
  .about-text p,
  .footer-col p{ text-align:left; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; text-align:center; margin-top:46px; gap:14px; }
  .logo-img{ height:44px; }
  .hero{ height:86vw; min-height:360px; }
  .hero--page{ height:82vw; min-height:340px; }
  .hero-caption{ padding-bottom:56px; }
  .hero-caption .script-title{ font-size:clamp(32px, 9.4vw, 44px); }
  .hero-caption .lead{ font-size:16px; }
  /* sur un petit écran, rien ne doit être forcé sur une seule ligne */
  .sub-menu a,
  .script-title--sm,
  .btn{ white-space:normal; }
  .feature-text p{ text-align:left; }
  .gallery{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .masonry{ columns:2; column-gap:8px; }
  .masonry .gallery-item{ margin-bottom:8px; }
  .lightbox-figure{ padding:60px 8px 76px; }
  .lb-prev,
  .lb-next{ top:auto; bottom:12px; transform:none; }
}