/* ============================================================
   AGAPE STUDIO — Feuille de style principale
   Direction : méditerranéenne, organique, terreuse.
   Palette et matières issues du brand board Agape Studio.
   ============================================================ */

/* ---------- 1. Tokens ----------
   Couleurs relevées directement sur le moodboard du brand book :
   le vert d'eau des escaliers et des reflets, le rose du mur et du galet,
   la terre cuite des chaises, l'ambre des lanternes, le crème du lin. */
:root{
  /* Fonds — lumineux et chauds */
  --paper:        #F5EFE7;   /* fond principal */
  --cream:        #EDE5D9;   /* crème */
  --sand:         #E4DCCF;   /* sable (relevé sur le moodboard) */
  --linen:        #D9CDBD;   /* lin */

  /* Accents — relevés sur le moodboard */
  --water:        #B2C8C3;   /* vert d'eau (palette officielle) */
  --water-soft:   #CCDDD8;   /* vert d'eau clair */
  --clay:         #C16540;   /* terre cuite des chaises */
  --rose:         #DEC2C2;   /* rose du galet */
  --rose-warm:    #C09C8D;   /* rose du mur */
  --honey:        #EBB673;   /* ambre des lanternes */
  --honey-soft:   #F0D3A6;   /* ambre clair */

  /* Fond sombre — brun-noir chaud (boutons, pied de page) */
  --deep:         #332B25;

  /* Mêmes teintes, assombries : uniquement quand elles portent du TEXTE.
     Les versions claires ci-dessus restent pour les aplats et les décors. */
  --clay-txt:     #9E4531;
  --water-txt:    #4E7268;
  --rose-txt:     #96604F;

  /* Encre */
  --ink:          #2E2823;
  --ink-70:       rgba(46,40,35,.72);
  --ink-55:       rgba(46,40,35,.56);
  --ink-38:       rgba(46,40,35,.38);
  --ink-16:       rgba(46,40,35,.16);
  --ink-08:       rgba(46,40,35,.08);

  /* Typo */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Rythme */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --maxw: 1320px;
  --radius: 26px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.33,.9,.4,1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 0.55vw + 13.4px, 17px);
  font-weight: 300;
  line-height: 1.74;
  letter-spacing: .004em;
  overflow-x: hidden;
}

/* Grain — la matière papier du brand board */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none; z-index: 9999;
  opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

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

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2.8rem, 7vw, 6rem); }
h2{ font-size: clamp(2.1rem, 5vw, 4.2rem); }
h3{ font-size: clamp(1.45rem, 2.2vw, 2.05rem); }
h4{ font-size: clamp(1.12rem, 1.4vw, 1.38rem); }

p{ margin:0 0 1.15em; max-width: 62ch; }
p:last-child{ margin-bottom:0; }

a{ color: inherit; }

::selection{ background: var(--water); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--clay-txt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilitaires ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: 940px; }
.section{ padding-block: var(--section); position: relative; }
.section--cream{ background: var(--cream); }
.section--sand{ background: var(--sand); }
.section--tight{ padding-block: clamp(3rem, 6vw, 5rem); }

/* Section sombre — brun profond, pas noir */
.section--deep{ background: var(--deep); color: var(--cream); }
.section--deep h2, .section--deep h3{ color: var(--cream); }
.section--deep p{ color: rgba(245,239,231,.74); }

.eyebrow{
  font-family: var(--sans);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 1.6rem;
  display:flex; align-items:flex-start; gap:.8rem;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background: var(--ink-38); flex:none;
  margin-top: .62em;
}
.eyebrow--plain::before{ display:none; }

.lead{
  font-size: clamp(1.04rem, 1.4vw, 1.3rem);
  line-height: 1.64;
  color: var(--ink-70);
  font-weight: 300;
  max-width: 60ch;
}

.serif-it{ font-family: var(--serif); font-style: italic; }
.mark{
  background: var(--water);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: .04em .3em;
}
.mark--sand{ background: var(--linen); }
.mark--water{ background: var(--water); }
.mark--rose{ background: var(--rose); }
.mark--honey{ background: var(--honey); }

.center{ text-align:center; }
.center p, .center .lead{ margin-inline:auto; }
.center .eyebrow{ justify-content:center; }

/* ---------- 4. Boutons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.65rem;
  font-family: var(--sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  border: 1px solid var(--deep);
  background: var(--deep); color: var(--cream);
  text-decoration:none; cursor:pointer;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
/* Le remplissage monte depuis le bas au survol */
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--clay-txt);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ border-color: var(--clay-txt); transform: translateY(-2px); }
.btn:hover::before{ transform: translateY(0); }
.btn .arrow{ transition: transform .5s var(--ease); }
.btn:hover .arrow{ transform: translateX(5px); }

.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink-38); }
.btn--ghost::before{ background: var(--deep); }
.btn--ghost:hover{ color: var(--cream); border-color: var(--deep); }

.btn--light{ background: var(--cream); color: var(--deep); border-color: var(--cream); }
.btn--light::before{ background: var(--water); }
.btn--light:hover{ color: var(--deep); border-color: var(--water); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* Lien souligné qui se redessine */
.link-u{
  position:relative; text-decoration:none;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  border-bottom: 1px solid var(--ink-38);
  padding-bottom: 2px;
  transition: background-size .45s var(--ease), color .4s var(--ease);
}
.link-u:hover{ background-size: 100% 1px; color: var(--clay-txt); }

/* ---------- 5. En-tête ---------- */
.header{
  position: sticky; top:0; z-index: 200;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
/* Le flou est porté par un pseudo-élément : appliqué au <header> lui-même,
   il créerait un bloc conteneur qui empêcherait le menu mobile (position:fixed)
   de s'ouvrir en plein écran. */
.header::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: rgba(245,239,231,.84);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header.is-scrolled{ border-bottom-color: var(--ink-16); }
.header__inner{
  position: relative; z-index: 1;
  display:flex; align-items:center; justify-content:space-between;
  gap: 2rem; padding-block: 1.15rem;
}
.header__logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.header__logo img{ height: 30px; width:auto; transition: opacity .4s var(--ease); }
.header__logo:hover img{ opacity:.72; }
.header__logo .mono{ width:19px; height:auto; opacity:.8; transition: transform .7s var(--ease); }
.header__logo:hover .mono{ transform: rotate(-8deg); }

.nav{ display:flex; align-items:center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav a{
  font-size: .73rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration:none; color: var(--ink-70);
  position:relative; padding-block:.35rem;
  transition: color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform: scaleX(1); }
.nav a[aria-current="page"]{ color: var(--ink); }
.nav .btn{
  padding: .78rem 1.4rem; font-size:.68rem;
  color: var(--cream);          /* doit primer sur .nav a */
  background: var(--deep); border-color: var(--deep);
}
.nav .btn:hover{ color: var(--cream); border-color: var(--clay-txt); }
.nav .btn::after{ display:none; }

.burger{
  display:none; width:44px; height:44px; padding:0;
  border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:22px; height:1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px){
  .burger{ display:flex; position: relative; z-index: 3; }
  .nav{
    position: fixed; top:0; left:0; right:0; bottom:0; z-index: 2;
    background: var(--paper);
    flex-direction: column; justify-content:center; align-items:flex-start;
    gap: 1.1rem; padding: 6.5rem var(--gutter) 3rem;
    transform: translateY(-101%);
    transition: transform .6s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{ transform: translateY(0); }
  .nav a{ font-size: 1.7rem; font-family: var(--serif); text-transform:none; letter-spacing: 0; color: var(--ink); }
  .nav .btn{
    margin-top: 1rem; padding: 1rem 1.8rem; color: var(--cream);
    font-family: var(--sans); font-size:.72rem;
    text-transform: uppercase; letter-spacing:.12em;
  }
  .header__logo{ position: relative; z-index: 3; }   /* reste visible menu ouvert */
}

/* ---------- 6. Matières décoratives ----------
   Remplacent les bulles de couleur : ombres de feuillage, lavis, vagues. */

/* Ombre douce — la lumière rasante sur un mur de plâtre */
.softshade{
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(78,114,104,.16), rgba(78,114,104,0) 72%);
}
.softshade--tr{ top:-16%; right:-14%; width: clamp(360px, 46vw, 720px); aspect-ratio:1.15/1; }
.softshade--bl{ bottom:-20%; left:-16%; width: clamp(320px, 40vw, 600px); aspect-ratio:1.2/1; }
.softshade--r{ top:6%; right:-16%; width: clamp(300px, 36vw, 560px); aspect-ratio:1/1.1; }
/* sur fond sombre, l'ombre devient une lueur */
.footer .softshade, .cta .softshade{
  background: radial-gradient(closest-side, rgba(245,239,231,.13), rgba(245,239,231,0) 72%);
}

/* Lavis d'aquarelle très diffus */
.wash{
  position:absolute; pointer-events:none; z-index:0;
  border-radius: 50%;
  filter: blur(60px);
  opacity:.42;
}
.wash--water{ background: var(--water); }
.wash--clay{ background: var(--clay); }
.wash--sand{ background: var(--linen); }
.wash--rose{ background: var(--rose); }
.wash--honey{ background: var(--honey); }

/* Séparateur : bord de section ondulé, comme sur le brand board */
.wave{
  display:block; width:100%; height: clamp(52px, 6.5vw, 104px);
  position:relative; z-index:1; margin-bottom:-1px;
}
.wave--up{ margin-bottom:0; margin-top:-1px; }
.wave svg{ display:block; width:100%; height:100%; }

@media (prefers-reduced-motion: reduce){
  .leafshade, .wash{ animation:none !important; }
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 9vw, 8rem);
}
.hero__inner{ position:relative; z-index:2; }
.hero__mono{ width: 34px; margin-bottom: 2.2rem; opacity:.72; }
.hero h1{ max-width: 15ch; margin-bottom: 1.8rem;
  /* équilibre les lignes du grand titre : évite les coupures bancales
     (un mot seul en fin de ligne). Ignoré par les vieux navigateurs. */
  text-wrap: balance; }
/* L'anglais est plus compact que le français : on laisse un peu plus de
   largeur au grand titre pour éviter les lignes trop courtes. */
html[lang="en"] .hero h1{ max-width: 19ch; }
.hero__lead{ max-width: 46ch; }
.hero .btn-row{ margin-top: 2.6rem; }
.hero__baseline{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  color: var(--ink-55);
  margin-top: 3.2rem;
  display:flex; align-items:center; gap:1rem;
}
.hero__baseline::before{ content:""; width:46px; height:1px; background: var(--ink-38); flex:none; }

.hero .wash-1{
  width: clamp(300px, 40vw, 620px); aspect-ratio: 1/.9;
  right: -8%; top: -6%;
  background: var(--water); opacity:.62;
}
.hero .wash-2{
  width: clamp(200px, 26vw, 380px); aspect-ratio:1;
  right: 26%; bottom: -10%;
  background: var(--rose); opacity:.5;
}
.hero .wash-3{
  width: clamp(150px, 20vw, 280px); aspect-ratio:1;
  left: -6%; bottom: -12%;
  background: var(--honey); opacity:.46;
}

/* Page-titre (pages intérieures) */
.pagehead{ padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); position:relative; overflow:hidden; }
.pagehead > .wrap{ position:relative; z-index:2; }
.pagehead h1{ max-width: 16ch; }
.pagehead .lead{ margin-top: 1.4rem; }
.pagehead .wash-1{
  width: clamp(240px, 30vw, 460px); aspect-ratio:1;
  right: -6%; top: -4%;
  background: var(--water); opacity:.56;
}

/* ---------- 8. Grilles & cartes ---------- */
.grid{ display:grid; gap: clamp(1.1rem, 2vw, 1.8rem); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid--3, .grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; } }

.split{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem); align-items:start;
}
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap: 2.4rem; } }

.card{
  position:relative; overflow:hidden;
  background: rgba(255,255,255,.42);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.3rem);
  display:flex; flex-direction:column;
  transition: transform .6s var(--ease-soft), background .6s var(--ease), border-color .6s var(--ease);
}
/* Une teinte chaude monte doucement au survol */
.card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:100%;
  background: linear-gradient(to top, rgba(193,101,64,.10), transparent 62%);
  opacity:0; transition: opacity .6s var(--ease); pointer-events:none;
}
.card:hover{ transform: translateY(-6px); background: rgba(255,255,255,.72); border-color: var(--ink-38); }
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }
.card h3{ margin-bottom:.45rem; }
.card__meta{
  font-size:.67rem; letter-spacing:.19em; text-transform:uppercase;
  color: var(--ink-55); margin-bottom: 1.4rem;
}
.card p{ color: var(--ink-70); font-size:.95rem; }
.card__foot{ margin-top:auto; padding-top:1.6rem; }

/* Picto ligne — remplace les pastilles de couleur */
.sigil{
  display:block; width: 46px; height:46px; margin-bottom: 1.4rem; flex:none;
  color: var(--water-txt);
  transition: transform .8s var(--ease-soft), color .5s var(--ease);
}
.sigil svg{ width:100%; height:100%; display:block; }
.card:hover .sigil, .offer:hover .sigil{ transform: rotate(-6deg) scale(1.06); color: var(--clay-txt); }
.sigil--clay{ color: var(--clay); }
.sigil--water{ color: var(--water-txt); }
.sigil--deep{ color: var(--deep); }
.sigil--rose{ color: var(--rose-warm); }
/* Les pictos alternent naturellement d'une carte à l'autre */
.grid > *:nth-child(2n) .sigil{ color: var(--clay); }
.grid > *:nth-child(3n) .sigil{ color: var(--rose-warm); }
.grid > *:nth-child(4n) .sigil{ color: var(--water-txt); }
.sigil--honey{ color: #B98A3C; }

/* ---------- 9. Liste offres ---------- */
.offers{ border-top:1px solid var(--ink-38); }
.offer-row{
  display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1fr) auto;
  gap: 1rem clamp(1rem,3vw,3rem); align-items:center;
  padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
  border-bottom:1px solid var(--ink-16);
  text-decoration:none; position:relative;
  transition: padding-inline .55s var(--ease), background .55s var(--ease);
}
.offer-row::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background: var(--clay); transform: scaleX(0); transform-origin:left;
  transition: transform .6s var(--ease);
}
.offer-row:hover{ background: rgba(255,255,255,.46); padding-inline: 1.3rem; }
.offer-row:hover::before{ transform: scaleX(1); }
.offer-row__title{
  font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height:1.06; letter-spacing:-.008em;
  transition: color .45s var(--ease);
}
.offer-row:hover .offer-row__title{ color: var(--clay-txt); }
.offer-row__desc{ color: var(--ink-70); font-size:.95rem; }
.offer-row__go{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ink-38);
  display:grid; place-items:center; flex:none;
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.offer-row:hover .offer-row__go{ background: var(--deep); border-color: var(--deep); transform: rotate(-45deg); }
.offer-row:hover .offer-row__go svg{ stroke: var(--cream); }
@media (max-width: 700px){
  .offer-row{ grid-template-columns: 1fr auto; }
  .offer-row__desc{ grid-column:1 / -1; }
}

/* ---------- 10. Fiche offre détaillée ---------- */
.offer{
  position:relative; overflow:hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.4);
  border:1px solid var(--ink-16);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  scroll-margin-top: 100px;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.offer:hover{ border-color: var(--ink-38); background: rgba(255,255,255,.6); }
.offer + .offer{ margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.offer__head{ margin-bottom: 2rem; }
.offer__kicker{
  font-size:.67rem; letter-spacing:.21em; text-transform:uppercase;
  color: var(--ink-55); margin-bottom:.9rem;
}
.offer__title{ margin-bottom: 1.2rem; }
.offer__title em{ font-style: italic; }
.deliverables{ list-style:none; margin:0; padding:0; }
.deliverables li{
  padding-block: .95rem;
  border-top:1px solid var(--ink-16);
  transition: padding-left .45s var(--ease);
}
.deliverables li:hover{ padding-left:.5rem; }
.deliverables li:first-child{ border-top:0; padding-top:0; }
.deliverables strong{
  display:block; font-weight:500; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:.25rem;
}
.deliverables span{ color: var(--ink-70); font-size:.94rem; }
.offer__foot{
  margin-top: 2rem; padding-top:1.4rem; border-top:1px solid var(--ink-16);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:center;
  font-size:.71rem; letter-spacing:.15em; text-transform:uppercase; color: var(--ink-55);
}

/* ---------- 11. Méthode (étapes) ---------- */
.steps{ counter-reset: step; }
.step{ position:relative; padding-top: 1.4rem; border-top:1px solid var(--ink-16); }
.step::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%;
  background: var(--clay); transform: scaleX(0); transform-origin:left;
  transition: transform .7s var(--ease);
}
.step:hover::before{ transform: scaleX(1); }
.steps > *:nth-child(3n-1)::before{ background: var(--water-txt); }
.steps > *:nth-child(3n)::before{ background: var(--rose-warm); }
.steps > *:nth-child(3n-1) .step__num{ color: var(--water-txt); }
.steps > *:nth-child(3n) .step__num{ color: var(--rose-txt); }
.step__num{
  font-family: var(--serif); font-size:1rem; color: var(--clay-txt);
  letter-spacing:.06em; margin-bottom:.7rem; display:block;
}
.step h4{ font-family: var(--serif); font-size: clamp(1.2rem,1.7vw,1.5rem); margin-bottom:.5rem; }
.step p{ color: var(--ink-70); font-size:.93rem; }

/* ---------- 12. Valeurs / distinction ---------- */
.value-row{
  display:grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap: 1rem clamp(1.5rem,4vw,4rem);
  padding-block: clamp(1.5rem,2.4vw,2rem);
  padding-inline: 0;
  border-top:1px solid var(--ink-16);
  align-items:baseline;
  transition: padding-inline .55s var(--ease), background .55s var(--ease);
}
.value-row:hover{ padding-inline: 1.1rem; background: rgba(255,255,255,.38); }
.value-row:last-child{ border-bottom:1px solid var(--ink-16); }
.value-row__t{ font-family: var(--serif); font-size: clamp(1.3rem,2vw,1.75rem); line-height:1.1; }
.value-row p{ color: var(--ink-70); font-size:.97rem; }
@media (max-width: 700px){ .value-row{ grid-template-columns:1fr; gap:.5rem; } }

/* ---------- 13. Arche (portrait / images) ---------- */
.arch{
  border-radius: 999px 999px 20px 20px;
  overflow:hidden; background: var(--linen);
  aspect-ratio: 3/4;
  position:relative;
}
.arch img{ width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease-soft); }
.arch:hover img{ transform: scale(1.035); }
.arch--wide{ aspect-ratio: 4/3; border-radius: 340px 340px 20px 20px; }
/* Portrait mesuré — on voit bien le visage sans qu'il écrase la page */
.arch--portrait{ max-width: 340px; }
@media (max-width: 900px){ .arch--portrait{ max-width: 280px; } }

/* ---------- 14. Bande Instagram ---------- */
.ig-strip{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
@media (max-width: 900px){ .ig-strip{ grid-template-columns: repeat(3,1fr); } }
.ig-tile{
  aspect-ratio:1; overflow:hidden; position:relative; display:block;
  background: var(--linen);
}
.ig-tile img,
.ig-tile video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease-soft); }
.ig-tile:hover img,
.ig-tile:hover video{ transform: scale(1.07); }
/* Tuile vidéo (un Reel) : petite pastille en bas à droite pour qu'on
   comprenne que c'est une vidéo, même quand elle est à l'arrêt. */
.ig-tile--reel::before{
  content:""; position:absolute; z-index:2; right:9px; bottom:9px;
  width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color: transparent transparent transparent rgba(245,239,231,.92);
  filter: drop-shadow(0 1px 2px rgba(51,43,37,.35));
}
.ig-tile::after{
  content:""; position:absolute; inset:0;
  background: var(--deep); opacity:0; transition: opacity .5s var(--ease);
}
.ig-tile:hover::after{ opacity:.16; }
/* Repli quand l'image n'est pas encore déposée */
.ig-tile.is-empty img{ display:none; }
.ig-tile.is-empty::before{
  content:""; position:absolute; inset:26%;
  border-radius: 54% 46% 43% 57% / 49% 53% 47% 51%;
  background: rgba(255,255,255,.34);
}
.ig-t1{ background: var(--water); }
.ig-t2{ background: var(--linen); }
.ig-t3{ background: var(--rose-warm); }
.ig-t4{ background: var(--honey); }
.ig-t5{ background: var(--rose); }
.ig-t6{ background: var(--water-txt); }

.ig-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.2rem; margin-bottom: 2rem;
}

/* ---------- 15. Journal ---------- */
.post-card{
  display:grid; grid-template-columns: 140px minmax(0,1fr) auto;
  gap: clamp(1rem,3vw,2.6rem); align-items:baseline;
  padding-block: clamp(1.6rem,2.6vw,2.2rem);
  padding-inline: 0;
  border-top:1px solid var(--ink-16);
  text-decoration:none; position:relative;
  transition: padding-inline .55s var(--ease), background .55s var(--ease);
}
.post-card::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background: var(--clay); transform: scaleX(0); transform-origin:left;
  transition: transform .6s var(--ease);
}
.post-card:last-of-type{ border-bottom:1px solid var(--ink-16); }
.post-card:hover{ background: rgba(255,255,255,.46); padding-inline:1.3rem; }
.post-card:hover::before{ transform: scaleX(1); }
.post-card__date{ font-size:.71rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-55); }
.post-card__title{
  display:block; font-family: var(--serif); font-size: clamp(1.35rem,2.2vw,1.9rem);
  line-height:1.12; margin-bottom:.55rem;
  transition: color .45s var(--ease);
}
.post-card:hover .post-card__title{ color: var(--clay-txt); }
.post-card__ex{ color: var(--ink-70); font-size:.95rem; margin:0; }
.post-card__tag{
  display:inline-block;
  font-size:.65rem; letter-spacing:.17em; text-transform:uppercase;
  padding:.38rem .85rem; border-radius:999px;
  background: var(--water); color: var(--ink); flex:none;
  transition: background .45s var(--ease);
}
.post-card:nth-of-type(2n) .post-card__tag{ background: var(--rose); }
.post-card:hover .post-card__tag{ background: var(--water-txt); color: var(--paper); }
.post-card:nth-of-type(2n):hover .post-card__tag{ background: var(--rose-warm); color: var(--paper); }
@media (max-width: 780px){
  .post-card{ grid-template-columns:1fr; gap:.6rem; }
  .post-card__tag{ justify-self:start; }
}

/* Article */
.article{ max-width: 700px; margin-inline:auto; }
.article h2{ font-size: clamp(1.7rem,3vw,2.4rem); margin-top: 2.8rem; }
.article h3{ font-size: clamp(1.25rem,2vw,1.5rem); margin-top: 2rem; }
.article p, .article li{ color: var(--ink-70); }
.article ul{ padding-left: 1.1rem; margin-bottom:1.4rem; }
.article li{ margin-bottom:.55rem; }
.article blockquote{
  margin: 2.4rem 0; padding: 1.7rem 2rem;
  background: var(--cream); border-left: 2px solid var(--clay);
  border-radius: 4px 20px 20px 4px;
  font-family: var(--serif); font-size: 1.35rem; line-height:1.32; color: var(--ink);
}
.article blockquote p{ color: var(--ink); margin:0; max-width:none; }
.article__end{
  margin-top: 3rem; padding-top: 2rem; border-top:1px solid var(--ink-16);
}

/* ---------- 16. Newsletter (formulaire Brevo, habillé maison) ----------
   Section ciblable par ancre : agapestudio.be/#newsletter
   (utilisée depuis le Linktree). */
#newsletter{
  /* le menu est collant : on décale l'arrivée pour qu'il ne recouvre rien */
  scroll-margin-top: clamp(80px, 12vh, 110px);
}

   La mécanique reste celle de Brevo (identifiants sib-* conservés pour que
   son script fonctionne), mais aucune de ses feuilles de style n'est chargée :
   tout l'habillage ci-dessous est celui du site. */
.newsletter{
  background: var(--cream);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  position:relative; overflow:hidden;
}

/* Neutralise les conteneurs de Brevo */
.newsletter .sib-form,
.newsletter .sib-form-container,
.newsletter #sib-container,
.newsletter .sib-form-block,
.newsletter .form__entry,
.newsletter .form__label-row{
  all: unset; display:block; box-sizing:border-box; width:100%;
}
.newsletter #sib-form{ display:block; margin-top:1.6rem; }

/* Ligne champ + bouton */
.newsletter .sib-input .entry__field{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:stretch; max-width:520px;
}
.newsletter input[type="text"],
.newsletter input[type="email"]{
  flex:1 1 240px; min-width:0;
  font-family: var(--sans); font-size:.95rem; font-weight:300; color: var(--ink);
  padding: 1rem 1.3rem;
  background: rgba(255,255,255,.72);
  border:1px solid var(--ink-16); border-radius:999px;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.newsletter input::placeholder{ color: var(--ink-38); opacity:1; }
.newsletter input:focus{ outline:none; border-color: var(--clay-txt); background:#fff; }

/* Bouton d'envoi : exactement le bouton du site */
.newsletter .sib-form-block__button{
  position:relative; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; gap:.65rem;
  font-family: var(--sans); font-size:.76rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  padding: 1.05rem 2rem; border-radius:999px;
  border:1px solid var(--deep); background: var(--deep); color: var(--cream);
  cursor:pointer;
  transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.newsletter .sib-form-block__button::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--clay-txt); transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.newsletter .sib-form-block__button > *{ position:relative; z-index:1; }
.newsletter .sib-form-block__button:hover{ border-color: var(--clay-txt); transform: translateY(-2px); }
.newsletter .sib-form-block__button:hover::before{ transform: translateY(0); }
.newsletter .sib-form-block__button .arrow{ transition: transform .5s var(--ease); }
.newsletter .sib-form-block__button:hover .arrow{ transform: translateX(5px); }
/* on masque uniquement l'icône de chargement de Brevo, pas notre flèche */
.newsletter .sib-form-block__button .progress-indicator__icon,
.newsletter .sib-form-block__button .sib-hide-loader-icon{ display:none; }

/* Libellés et aides */
.newsletter .entry__label{
  display:block;
  font-family: var(--sans); font-size:.67rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--ink-55);
  margin-bottom:.7rem;
}
.newsletter .entry__specification{
  display:block; margin-top:.7rem;
  font-size:.79rem; color: var(--ink-55);
}
.newsletter__legal{ margin-top:1.1rem; font-size:.79rem; color: var(--ink-55); max-width:54ch; }
.newsletter__legal a{ color: inherit; }

/* Messages de confirmation / d'erreur — masqués tant que Brevo ne les affiche pas */
:where(.newsletter .sib-form-message-panel){ display:none; }
.newsletter .sib-form-message-panel{
  margin-bottom:1.2rem; padding:.95rem 1.2rem; border-radius:16px;
  font-size:.92rem; line-height:1.5;
}
.newsletter #success-message{ background: var(--water); color: var(--ink); }
.newsletter #error-message{ background: var(--rose); color: #6B2A1C; }
.newsletter .sib-form-message-panel__text{ display:flex; gap:.7rem; align-items:flex-start; }
.newsletter .sib-notification__icon{ width:18px !important; height:18px !important; flex:none; margin-top:.2rem; }
.newsletter .entry__error{
  display:block; margin-top:.6rem; font-size:.85rem; color:#8C3A26;
}
.newsletter .entry__error:empty{ display:none; }

/* Mentions Brevo : discrètes */
.newsletter .sib-form__declaration{
  margin-top:1.2rem; font-size:.76rem; color: var(--ink-55); line-height:1.55;
}
.newsletter .sib-form__declaration p{ margin:0; max-width:58ch; font-size:inherit; color:inherit; }
.newsletter .sib-form__declaration a{ color: var(--ink-70); text-decoration:underline; }
.newsletter .declaration-block-icon{ display:none; }   /* le gros pictogramme bleu de Brevo */

/* Champ anti-robot, invisible pour les humains */
.newsletter .input--hidden, .hp{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* ---------- 17. Sections vides (projets à venir) ---------- */
.empty{
  border:1px dashed var(--ink-38); border-radius: var(--radius);
  padding: clamp(2.4rem,6vw,4.5rem); text-align:center;
}

/* ---------- 18. Bandeau CTA ---------- */
.cta{
  background: var(--deep); color: var(--cream);
  border-radius: clamp(26px, 5vw, 52px);
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4rem);
  text-align:center; position:relative; overflow:hidden;
}
.cta h2{ color: var(--cream); max-width: 18ch; margin-inline:auto; }
.cta p{ color: rgba(245,239,231,.74); margin-inline:auto; }
.cta .btn-row{ justify-content:center; margin-top: 2.2rem; }
.cta__inner{ position:relative; z-index:2; }
.cta .leafshade{ opacity:.13; color: var(--cream); filter: blur(1px); }

/* ---------- 19. Pied de page ---------- */
.footer{ background: var(--deep); color: var(--cream); padding-block: clamp(3.5rem,7vw,5.5rem) 2rem; position:relative; overflow:hidden; }
.footer > .wrap{ position:relative; z-index:2; }
.footer .leafshade{ opacity:.1; color: var(--cream); }
.footer a{ color: rgba(245,239,231,.8); text-decoration:none; transition: color .35s var(--ease); }
.footer a:hover{ color: var(--water); }
.footer__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  padding-bottom: 3rem; border-bottom:1px solid rgba(245,239,231,.18);
}
@media (max-width: 820px){ .footer__top{ grid-template-columns:1fr; gap:2.4rem; } }
.footer__logo{ height:34px; width:auto; margin-bottom:1.4rem; filter: invert(1) brightness(1.95); }
.footer h4{
  font-family: var(--sans); font-size:.67rem; font-weight:500;
  letter-spacing:.21em; text-transform:uppercase;
  color: rgba(245,239,231,.52); margin-bottom:1.2rem;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__base{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-top: 2rem;
  font-size:.72rem; color: rgba(245,239,231,.52);
}
.footer__baseline{ font-family: var(--serif); font-size: 1.25rem; color: rgba(245,239,231,.76); margin-bottom:1.4rem; }

/* ---------- 20. Apparition au scroll ----------
   Le contenu est VISIBLE par défaut. L'animation n'est activée que si le
   petit script du <head> ajoute la classe « anim » sur <html>. Ainsi, si le
   JavaScript est bloqué, rien ne disparaît. */
html.anim .reveal{
  opacity:0; transform: translateY(24px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
html.anim .reveal.is-in{ opacity:1; transform:none; }
html.anim .reveal-d1{ transition-delay:.09s; } html.anim .reveal-d2{ transition-delay:.18s; }
html.anim .reveal-d3{ transition-delay:.27s; } html.anim .reveal-d4{ transition-delay:.36s; }
html.anim .reveal-d5{ transition-delay:.45s; } html.anim .reveal-d6{ transition-delay:.54s; }
@media (prefers-reduced-motion: reduce){
  html.anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- 21. Divers ---------- */
.pictos{ display:flex; gap:2.4rem; align-items:center; justify-content:center; opacity:.6; margin-bottom:2.5rem; color: var(--water-txt); }
.pictos svg{ width:42px; height:auto; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background: var(--deep); color: var(--cream); padding:.8rem 1.2rem; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }
.calendly-inline-widget{
  border-radius: var(--radius); overflow:hidden;
  width:100%; min-width:0 !important;   /* Calendly impose 320px : on l'en empêche */
}
.calendly-inline-widget iframe{ max-width:100%; }

/* ---------- 22. Bandeau moodboard ----------
   Les visuels du brand book défilent lentement, fondus dans le fond
   du site aux deux extrémités. Le défilement s'arrête au survol. */
.moodboard{ padding-block: clamp(2.5rem, 5vw, 4rem); overflow:hidden; position:relative; }
.moodboard__head{ margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.moodboard__viewport{
  overflow:hidden; width:100%;
  /* les bords se fondent dans le fond de la page */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.moodboard__track{
  display:flex; gap: clamp(.6rem, 1.2vw, 1rem); width:max-content;
  animation: defile 70s linear infinite;
}
.moodboard__viewport:hover .moodboard__track,
.moodboard__viewport:focus-within .moodboard__track{ animation-play-state: paused; }
@keyframes defile{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .moodboard__track{ animation:none; }
  .moodboard__viewport{ overflow-x:auto; }
}
.moodboard__item{
  flex:none; width: clamp(140px, 17vw, 230px); aspect-ratio:1;
  border-radius: 18px; overflow:hidden; background: var(--sand);
}
.moodboard__item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* La vignette signature : le sigle, à la place du visuel d'origine */
.moodboard__item--sigil{
  display:grid; place-items:center; background: var(--cream);
  border:1px solid var(--ink-16); color: var(--ink);
}
.moodboard__item--sigil svg{ width:44%; height:auto; }

/* ---------- 23. Points de couleur devant les listes ----------
   Une pastille colorée devant chaque élément cité : la couleur tourne
   d'une ligne à l'autre, pour animer sans surcharger. */
.deliverables li{ position:relative; padding-left: 1.5rem; }
.deliverables li::before{
  content:""; position:absolute; left:0; top: 1.45rem;
  width:9px; height:9px; border-radius:50%;
  background: var(--water);
  transition: transform .45s var(--ease);
}
.deliverables li:first-child::before{ top: .5rem; }
.deliverables li:hover::before{ transform: scale(1.35); }
.deliverables li:nth-child(5n+2)::before{ background: var(--clay); }
.deliverables li:nth-child(5n+3)::before{ background: var(--rose-warm); }
.deliverables li:nth-child(5n+4)::before{ background: var(--honey); }
.deliverables li:nth-child(5n+5)::before{ background: var(--water-txt); }

/* ---------- 24. Bandeau d'avis clients ----------
   Prêt à l'emploi : le bloc HTML est en commentaire dans index.html.
   Voir LISEZ-MOI.md §6 pour l'activer. */
.avis{ padding-block: clamp(3rem, 6vw, 5rem); overflow:hidden; position:relative; }
.avis__viewport{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.avis__track{
  display:flex; gap: clamp(1rem, 2vw, 1.6rem); width:max-content;
  animation: defile 60s linear infinite;
}
.avis__viewport:hover .avis__track,
.avis__viewport:focus-within .avis__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .avis__track{ animation:none; }
  .avis__viewport{ overflow-x:auto; }
}
.avis__item{
  flex:none; width: clamp(270px, 30vw, 400px);
  background: rgba(255,255,255,.5);
  border:1px solid var(--ink-16); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display:flex; flex-direction:column; gap:1rem;
}
.avis__item blockquote{ margin:0; font-family: var(--serif); font-size:1.22rem; line-height:1.38; color: var(--ink); }
.avis__item blockquote p{ margin:0; max-width:none; }
.avis__auteur{ margin-top:auto; display:flex; align-items:center; gap:.7rem; }
.avis__pastille{ width:10px; height:10px; border-radius:50%; background: var(--water); flex:none; }
.avis__item:nth-child(3n+2) .avis__pastille{ background: var(--clay); }
.avis__item:nth-child(3n+3) .avis__pastille{ background: var(--rose-warm); }
.avis__nom{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color: var(--ink-70); }
.avis__role{ font-size:.78rem; color: var(--ink-55); }

/* ---------- 25. Sélecteur de langue ---------- */
.langue{
  display:flex; align-items:center; gap:.4rem;
  font-size:.7rem; letter-spacing:.14em; font-weight:400;
}
.langue span{ color: var(--ink-38); }
.langue a{
  text-decoration:none; color: var(--ink-38); padding:.35rem .1rem;
  transition: color .35s var(--ease);
}
.langue a:hover{ color: var(--ink); }
.langue a.is-active{ color: var(--ink); font-weight:500; }
.langue a::after{ display:none; }        /* pas de soulignement de nav ici */
@media (max-width: 900px){
  .langue{ font-size:1rem; gap:.6rem; margin-top:.8rem; }
  .langue a{ padding:.3rem 0; }
}

/* ---------- 26. Confort de lecture et tactile sur mobile ----------
   Sur petit écran, les petits libellés remontent d'un cran et les liens
   du pied de page s'espacent : le doigt est moins précis que la souris. */
@media (max-width: 640px){
  /* les libellés en petites capitales restaient sous 11px */
  .eyebrow, .offer__kicker{ font-size: .72rem; letter-spacing: .18em; }
  .offer__foot, .post-card__date{ font-size: .74rem; }
  .deliverables strong{ font-size: .78rem; }
  .card__meta{ font-size: .72rem; }
  .newsletter .entry__label{ font-size: .72rem; }

  /* liens du pied de page : zone de contact plus généreuse */
  .footer ul{ gap: .2rem; }
  .footer ul a{ display:inline-block; padding-block:.55rem; }
  .footer__base{ gap: .8rem 2rem; }
  .footer__base a{ display:inline-block; padding-block:.4rem; }

  /* le sélecteur de langue reste facile à viser */
  .langue a{ padding: .5rem .35rem; }
}

/* ---------- 27. Applications de la marque ----------
   Les visuels sont présentés ENTIERS, dans leur format d'origine :
   c'est ce qui permet de reconnaître l'objet. Pas de recadrage
   panoramique, pas de texte par-dessus. */
.applications{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.applications__head{ margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

.applications__grille{
  display:grid; gap: clamp(.8rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px){ .applications__grille{ grid-template-columns: 1fr; } }

.appli{
  position:relative; overflow:hidden;
  border-radius: var(--radius);
  background: var(--sand);
  aspect-ratio: 3 / 4;
}
.appli img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.6s var(--ease-soft);
}
.appli:hover img{ transform: scale(1.03); }

/* Variante : une seule image, avec du texte à côté */
.applications--duo{ align-items:center; }
/* même gabarit que le portrait de la page Studio : l'image accompagne le texte sans l'écraser */
.applications--duo .appli{ max-width: 340px; }
@media (max-width: 900px){ .applications--duo .appli{ max-width: 280px; } }

/* ---------- Exemples de livrables (page Services) ---------- */
.offer__sample{
  margin-left:auto; background:none; border:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color: var(--ink);
  padding:.25rem 0; border-bottom:1px solid var(--ink-38);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.offer__sample + .offer__sample{ margin-left:0; }
.offer__sample:hover{ color: var(--clay-txt); border-color: var(--clay-txt); }
.sample{
  border:0; padding:0; margin:auto; background:transparent;
  width:min(1200px, 94vw); max-width:none; max-height:none; overflow:visible;
}
.sample::backdrop{ background: rgba(46,40,35,.93); }
.sample__fig{ margin:0; }
.sample__img{
  display:block; width:100%; height:auto; max-height:78vh; object-fit:contain;
  border-radius:12px; background: var(--cream);
}
.sample__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.9rem; color: var(--cream);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
}
.sample__nav{ display:flex; gap:.6rem; }
.sample__live{
  margin-left:auto; color: var(--cream); text-decoration:none; white-space:nowrap;
  padding:.7rem 1.1rem; border-radius:999px; border:1px solid rgba(237,229,217,.5);
  transition: background .3s var(--ease);
}
.sample__live:hover{ background: rgba(237,229,217,.15); }
.sample__live[hidden]{ display:none; }
.sample__btn{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(237,229,217,.5); background:transparent; color: var(--cream);
  font-size:1.1rem; line-height:1; transition: background .3s var(--ease);
}
.sample__btn:hover{ background: rgba(237,229,217,.15); }
.sample__close{ position:absolute; top:-54px; right:0; }
@media (max-width: 700px){
  .offer__sample{ margin-left:0; }
  .sample__close{ top:-50px; }
  .sample__bar{ flex-wrap:wrap; }
  .sample__live{ order:3; width:100%; text-align:center; margin-left:0; }
}