/* =========================================================
   Soukaina — site vitrine
   Univers 1 : les œuvres  (.u-galerie, style « Galerie »)
   Univers 2 : Tila Art Club (.u-atelier)
   ========================================================= */

:root {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --tila: "Fraunces", "Cooper Black", Georgia, serif;
  --dallaf-pink: #f07a28; /* accent DALLAF = orange Tila */
  --dallaf-violet: #9b7fd1;

  /* Œuvres, style A « Galerie » (par défaut) */
  --g-bg: #fbfaf7;
  --g-ink: #1b1b1b;
  --g-muted: #77736c;
  --g-line: #e6e2da;
  --g-card: #ffffff;
  --g-btn: #1b1b1b;
  --g-btn-ink: #ffffff;
  --g-title: var(--serif);

  /* Tila Art Club */
  --t-bg: #fff4e6;
  --t-card: #ffffff;
  --t-ink: #3b1f10;
  --t-muted: #8a5a3c;
  --t-orange: #f07a28;
  --t-orange-dark: #c9541a;
  --t-cream: #fff3e0;
  --t-sky: #9ccbf2;
  --t-pink: #f7b27a; /* ex-rose, passé en orange clair */
  --t-yellow: #f9d65c;
  --t-green: #7fb77e;
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  hyphens: manual;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
section[id] { scroll-margin-top: 84px; }

/* Typo Tila : ronde et grasse façon logo */
.tila {
  font-family: var(--tila);
  font-weight: 800;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.01em;
}
/* Effet logo : crème, contour orange, ombre décalée */
.tila-logo {
  font-family: var(--tila); font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--t-cream);
  -webkit-text-stroke: .06em var(--t-orange);
  paint-order: stroke fill;
  text-shadow: .06em .07em 0 var(--t-orange-dark);
  line-height: .92;
}

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.logo { font-size: 26px; text-decoration: none; line-height: 1; }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-size: 14px; letter-spacing: .03em; padding: 8px 14px; border-radius: 999px; transition: background .2s; white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 0;
  font: 500 15px/1.25 var(--sans); letter-spacing: .02em;
  text-decoration: none; text-align: center; cursor: pointer;
  max-width: 100%; white-space: normal;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.btn:active { transform: scale(.98); }

/* =========================================================
   ACCUEIL
   ========================================================= */
.home { min-height: 100svh; display: flex; flex-direction: column; background: var(--g-bg); color: var(--g-ink); }
.home-head { text-align: center; padding: 30px 16px 20px; }
.home-head h1 { margin: 0; font-family: var(--g-title); font-weight: 400; font-size: clamp(40px, 7vw, 72px); letter-spacing: .06em; line-height: 1; }
.home-head p { margin: 10px 0 0; color: var(--g-muted); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }

.split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.door {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 64px); min-height: 62svh;
  text-decoration: none; overflow: hidden; isolation: isolate;
}
.door small { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.door h2 { margin: 8px 0 12px; font-weight: 400; font-size: clamp(36px, 5vw, 62px); line-height: 1.02; }
.door p { margin: 0 0 22px; max-width: 34ch; }
.door .btn { align-self: flex-start; }

.door-galerie { color: var(--g-ink); background: var(--g-bg); }
.door-galerie::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 20%, var(--g-bg) 78%), url("../images/galerie/mini/dallaf-13.jpg") center 30%/cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.door-galerie:hover::before { transform: scale(1.05); }
.door-galerie h2 { font-family: var(--g-title); }
.door-galerie .btn { background: var(--g-btn); color: var(--g-btn-ink); }

.door-atelier { color: var(--t-ink); background: var(--t-orange); }
.door-atelier { justify-content: space-between; gap: 24px; }
.door-atelier .sticker-logo { align-self: center; transform: rotate(-5deg); font-size: clamp(52px, 7vw, 96px); text-align: center; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.door-atelier .sticker-logo { -webkit-text-stroke-color: var(--t-ink); text-shadow: .06em .07em 0 var(--t-ink); }
.door-atelier:hover .sticker-logo { transform: rotate(3deg) scale(1.04); }
.door-atelier .card-text { background: var(--t-bg); border-radius: 28px; padding: 26px; box-shadow: 6px 6px 0 var(--t-ink); }
.door-atelier h2 { margin-top: 4px; font-size: clamp(30px, 3.6vw, 44px); }
.door-atelier .btn { background: var(--t-orange); color: #fff; }
.door-atelier .blob { position: absolute; border-radius: 50%; z-index: -1; }

.home-foot { text-align: center; padding: 16px; font-size: 14px; color: var(--g-muted); }
.home-foot a { text-decoration: none; margin: 0 10px; }

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .door { min-height: 70svh; }
}

/* =========================================================
   UNIVERS 1 : LES ŒUVRES
   ========================================================= */
.u-galerie { background: var(--g-bg); color: var(--g-ink); }
.u-galerie .top { background: color-mix(in srgb, var(--g-bg) 85%, transparent); border-bottom: 1px solid var(--g-line); }
.u-galerie .logo { font-family: var(--g-title); text-transform: uppercase; letter-spacing: .14em; font-size: 22px; }
.u-galerie .nav a:hover, .u-galerie .nav a[aria-current] { background: var(--g-line); }

.g-hero { padding: clamp(56px, 10vw, 120px) 0 clamp(32px, 6vw, 60px); }
.g-hero h1 { margin: 0; font-family: var(--g-title); font-weight: 400; font-size: clamp(48px, 8vw, 100px); line-height: 1; }

.g-hero p { max-width: 56ch; color: var(--g-muted); font-size: 18px; margin: 22px 0 0; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filters button { font: 14px var(--sans); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--g-line); background: transparent; color: var(--g-ink); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--g-btn); color: var(--g-btn-ink); border-color: var(--g-btn); }

.gallery { columns: 3 300px; column-gap: 32px; padding-bottom: 80px; }
.piece { break-inside: avoid; margin: 0 0 40px; cursor: zoom-in; }
.piece .frame { position: relative; background: var(--g-card); padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 32px -16px rgba(0,0,0,.22); transition: transform .4s; }
.piece:hover .frame { transform: translateY(-4px); }
.piece figcaption { padding-top: 14px; }
.piece h3 { margin: 0; font-family: var(--g-title); font-weight: 500; font-size: 24px; line-height: 1.2; }
.piece .meta { margin: 2px 0 0; font-size: 14px; color: var(--g-muted); }
.tag { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-muted); }
.tag.dispo::before { content: "●"; color: #4c8a5a; margin-right: 6px; }



/* Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; background: color-mix(in srgb, var(--g-bg) 97%, transparent); padding: 16px; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lb-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; width: min(1100px, 100%); max-height: 100%; }
.lb-inner img { width: 100%; max-height: 82svh; object-fit: contain; }
.lb-inner h2 { font-family: var(--g-title); font-weight: 400; font-size: clamp(32px, 4vw, 52px); margin: 0 0 8px; line-height: 1.1; }
.lb-inner p { color: var(--g-muted); margin: 0 0 6px; }
.lb-inner .btn { background: var(--g-btn); color: var(--g-btn-ink); margin-top: 22px; }
.lb-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--g-line); background: var(--g-card); color: var(--g-ink); font-size: 22px; cursor: pointer; }
@media (max-width: 760px) { .lb-inner { grid-template-columns: 1fr; gap: 18px; overflow-y: auto; } .lb-inner img { max-height: 55svh; } }

.g-about { border-top: 1px solid var(--g-line); padding: 80px 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.g-about h2 { font-family: var(--g-title); font-weight: 400; font-size: clamp(34px, 4vw, 52px); margin: 0; line-height: 1.1; }
.g-about p { margin: 0 0 16px; }
@media (max-width: 760px) { .g-about { grid-template-columns: 1fr; gap: 20px; padding: 56px 0; } }

/* =========================================================
   UNIVERS 2 : TILA ART CLUB
   ========================================================= */
.u-atelier { background: var(--t-bg); color: var(--t-ink); }
.u-atelier .top { background: rgba(255,244,230,.88); }
.u-atelier .logo { font-size: 24px; }
.u-atelier .nav a:hover, .u-atelier .nav a[aria-current] { background: var(--t-orange); color: #fff; }
.u-atelier .btn-main { background: var(--t-orange); color: #fff; box-shadow: 4px 4px 0 var(--t-ink); }
.u-atelier .btn-main:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--t-ink); }
.u-atelier .btn-ghost { background: var(--t-card); color: var(--t-ink); border: 2px solid var(--t-ink); }

.t-hero { position: relative; padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 8vw, 90px); overflow: hidden; }
.t-hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.t-hero h1 { margin: 0; font-size: clamp(64px, 11vw, 150px); transform: rotate(-3deg); transform-origin: left; }
.t-hero .tagline { font-family: var(--tila); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(22px, 2.6vw, 30px); margin: 26px 0 8px; }
.t-hero p { color: var(--t-muted); font-size: 18px; max-width: 44ch; margin: 0 0 28px; }
.t-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.t-hero-img { position: relative; }
.t-hero-img .photo { border-radius: 220px 220px 28px 28px; overflow: hidden; aspect-ratio: 4/5; border: 3px solid var(--t-ink); box-shadow: 10px 10px 0 var(--t-ink); }
.t-hero-img .photo img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--t-yellow); border: 3px solid var(--t-ink); font-family: var(--tila); font-weight: 800; font-variation-settings: "SOFT" 100;
  font-size: 19px; line-height: 1.05; padding: 14px; left: -36px; bottom: 36px; transform: rotate(-12deg);
  animation: wobble 5s ease-in-out infinite;
}
@keyframes wobble { 50% { transform: rotate(-4deg) scale(1.04); } }
.deco { position: absolute; border-radius: 50%; z-index: -1; }
@media (max-width: 760px) {
  .t-hero .wrap { grid-template-columns: 1fr; }
  .t-hero-img { max-width: 330px; margin: 10px auto 0; }
  .badge { width: 108px; height: 108px; font-size: 16px; left: -14px; }
}

/* Bandeau défilant */
.marquee-wrap { overflow: hidden; padding: 14px 0; }
.marquee { background: var(--t-orange); color: #fff; border-block: 3px solid var(--t-ink); overflow: hidden; transform: rotate(-1.2deg); margin: 0 -20px; }
.marquee div { display: flex; width: max-content; gap: 34px; padding: 14px 0; font-family: var(--tila); font-weight: 700; font-variation-settings: "SOFT" 100; font-size: 22px; white-space: nowrap; animation: slide 28s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

.t-section { padding: clamp(56px, 9vw, 100px) 0 0; }
.t-title { margin: 0 0 10px; font-size: clamp(36px, 5vw, 58px); line-height: 1.02; }
.t-title em { font-style: normal; color: var(--t-orange); }
.t-lead { color: var(--t-muted); font-size: 18px; max-width: 58ch; margin: 0 0 34px; }

.concept { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.concept article { background: var(--t-card); border: 3px solid var(--t-ink); border-radius: 26px; padding: 26px; box-shadow: 6px 6px 0 var(--t-ink); }
.concept article:nth-child(1) { background: var(--t-sky); }
.concept article:nth-child(2) { background: var(--t-pink); }
.concept article:nth-child(3) { background: var(--t-yellow); }
.concept .ico { font-size: 34px; line-height: 1; }
.concept h3 { margin: 12px 0 6px; font-size: 24px; line-height: 1.15; }
.concept p { margin: 0; font-size: 16px; }
@media (max-width: 760px) { .concept { grid-template-columns: 1fr; } }

/* Cartes ateliers façon affiches */
.ateliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.poster { --c: var(--t-orange); display: flex; flex-direction: column; background: var(--c); border: 3px solid var(--t-ink); border-radius: 28px; overflow: hidden; box-shadow: 8px 8px 0 var(--t-ink); transition: transform .2s, box-shadow .2s; }
.poster:hover { transform: translate(-3px,-3px) rotate(-.4deg); box-shadow: 11px 11px 0 var(--t-ink); }
.poster:nth-child(4n+2) { --c: var(--t-sky); }
.poster:nth-child(4n+3) { --c: var(--t-pink); }
.poster:nth-child(4n+4) { --c: var(--t-yellow); }
.poster-img { position: relative; aspect-ratio: 4/3; border-bottom: 3px solid var(--t-ink); }
.poster-img img { width: 100%; height: 100%; object-fit: cover; }
.poster-date { position: absolute; top: 14px; right: 14px; width: 88px; height: 88px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--t-cream); border: 3px solid var(--t-ink); transform: rotate(8deg); line-height: 1; }
.poster-date strong { font-family: var(--tila); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: 34px; }
.poster-date span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.poster-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.poster-body .kicker { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 500; }
.poster-body h3 { margin: 0; font-size: 30px; line-height: 1.05; }
.poster-body h3::before { content: "« "; } .poster-body h3::after { content: " »"; }
.infos { display: grid; gap: 4px; font-size: 15px; }
.poster-body p { margin: 0; white-space: pre-line; font-size: 15px; }
.poster-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.price { font-family: var(--tila); font-weight: 800; font-variation-settings: "SOFT" 100; font-size: 26px; }
.poster .btn { background: var(--t-ink); color: #fff; }
.poster .btn:hover { background: #000; }
.poster .btn.off { background: transparent; color: var(--t-ink); border: 2px dashed var(--t-ink); cursor: default; }

.empty { background: var(--t-card); border: 3px dashed var(--t-ink); border-radius: 26px; padding: 34px; text-align: center; }

/* Privatisation */
.privat { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; background: var(--t-ink); color: var(--t-cream); border-radius: 36px; padding: clamp(28px, 5vw, 60px); }
.privat .t-title { color: var(--t-cream); }
.privat .t-title em { color: var(--t-orange); }
.privat p { color: #e9cdb6; margin: 0 0 24px; }
.privat ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.privat li { background: var(--t-cream); color: var(--t-ink); border-radius: 20px; padding: 18px; font-family: var(--tila); font-weight: 700; font-variation-settings: "SOFT" 100; font-size: 19px; line-height: 1.15; }
.privat li span { display: block; font-size: 28px; margin-bottom: 6px; }

@media (max-width: 760px) { .privat { grid-template-columns: 1fr; border-radius: 28px; } }

/* Cafés partenaires */
.cafes { display: flex; flex-wrap: wrap; gap: 12px; }
.cafes span { background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 999px; padding: 10px 20px; font-family: var(--tila); font-weight: 700; font-variation-settings: "SOFT" 100; font-size: 18px; }
.cafes span::before { content: "☕ "; }

/* Ateliers passés */
.past { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.past article { background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 22px; overflow: hidden; }
.past img { aspect-ratio: 3/2; object-fit: cover; width: 100%; filter: saturate(.7); border-bottom: 2px solid var(--t-ink); }
.past div { padding: 14px 16px; }
.past h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.past small { color: var(--t-muted); }

/* =========================================================
   CONTACT (commun)
   ========================================================= */
.contact { padding: 90px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; }
.contact h2 { margin: 0 0 14px; font-size: clamp(34px, 4.5vw, 52px); font-weight: 400; line-height: 1.05; }
.u-galerie .contact { border-top: 1px solid var(--g-line); }
.u-galerie .contact h2 { font-family: var(--g-title); }

.contact .links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.contact .links a { text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 14px; }
input, textarea, select { font: 16px var(--sans); padding: 13px 15px; border-radius: 14px; width: 100%; border: 1px solid var(--g-line); background: var(--g-card); color: inherit; }
.u-atelier input, .u-atelier textarea, .u-atelier select { border: 2px solid var(--t-ink); background: var(--t-card); }
textarea { min-height: 140px; resize: vertical; }
.u-galerie form .btn { background: var(--g-btn); color: var(--g-btn-ink); justify-self: start; }
.u-atelier form .btn { justify-self: start; }
.form-msg { font-size: 15px; min-height: 1.4em; margin: 0; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } .contact { padding: 60px 0; } }

/* ---------- Pied de page ---------- */
.foot { padding: 26px 0 34px; font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.u-galerie .foot { color: var(--g-muted); border-top: 1px solid var(--g-line); }
.u-atelier .foot { background: var(--t-orange); color: #fff; border-top: 3px solid var(--t-ink); }
.foot a { text-decoration: none; }

/* Apparition douce */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s, transform .8s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee div, .badge { animation: none; }
}

@media (max-width: 480px) {
  .top .wrap { min-height: 58px; gap: 8px; }
  .logo { font-size: 22px; }
  .nav { gap: 2px; }
  .nav a { padding: 7px 10px; font-size: 13px; }
}
/* Pas de défilement horizontal (bandeau incliné, ombres) */
.u-atelier .logo { white-space: nowrap; }
@media (max-width: 480px) { .u-atelier .logo { font-size: 19px; } }

/* =========================================================
   BANDEROLE DES DEUX UNIVERS : fine et discrète, façon galerie
   ========================================================= */
:root { --bar-h: 40px; --bar-bg: #fbfaf7; --bar-ink: #1b1b1b; --bar-muted: #9a958d; --bar-line: #e6e2da; }
.uni-bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--bar-bg); border-bottom: 1px solid var(--bar-line);
}
.uni-bar::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 14px; background: var(--bar-line); }
.uni {
  grid-row: 1; display: flex; align-items: baseline; gap: 10px; height: 100%; padding: 0 22px;
  text-decoration: none; color: var(--bar-muted); transition: color .3s;
}
.uni-dallaf { grid-column: 1; justify-content: flex-end; }
.uni-tila { grid-column: 3; justify-content: flex-start; }
.uni-name, .uni-sub { font: 400 11px/var(--bar-h) var(--sans); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.uni-name { font-weight: 500; }
.uni-sub { opacity: .7; }
.uni-sub::before { content: "— "; }
.uni:hover, .uni[aria-current] { color: var(--bar-ink); }
.uni .uni-name { position: relative; }
.uni .uni-name::after {
  content: ""; position: absolute; left: 0; right: .26em; bottom: 11px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.uni:hover .uni-name::after, .uni[aria-current] .uni-name::after { transform: scaleX(1); }

/* L'en-tête de page se cale sous la banderole */
.top { top: var(--bar-h); }
section[id] { scroll-margin-top: calc(var(--bar-h) + 80px); }

@media (max-width: 560px) {
  .uni { padding: 0 12px; }
  .uni-sub { display: none; }
  .uni-name { letter-spacing: .2em; font-size: 10.5px; }
}

/* =========================================================
   DALLAF : LA FONDATRICE
   ========================================================= */
.founder { border-top: 1px solid var(--g-line); padding: clamp(60px, 9vw, 110px) 0; }
.f-kicker { margin: 0 0 22px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--g-muted); }
.f-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.f-portrait { margin: 0; position: relative; }
.f-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.f-portrait figcaption { position: absolute; left: 16px; bottom: 16px; background: var(--g-card); color: var(--g-ink); font-size: 13px; letter-spacing: .08em; padding: 6px 12px; }
.f-text h2 { margin: 0 0 14px; font-family: var(--g-title); font-weight: 400; font-size: clamp(40px, 5.5vw, 72px); line-height: 1; }
.f-text blockquote { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--t-orange); }
.f-text p { margin: 0 0 14px; max-width: 58ch; }
.f-text a { color: inherit; text-decoration-color: var(--dallaf-pink); text-underline-offset: 3px; }
.f-facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--g-line); }
.f-facts li { padding: 14px 12px 0 0; font-size: 15px; }
.f-facts b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--g-muted); margin-bottom: 4px; }
.f-collage { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; margin-top: clamp(40px, 6vw, 72px); align-items: end; }
.f-collage figure { margin: 0; }
.f-collage img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.f-collage figure:nth-child(1) img { aspect-ratio: 4/5; }
.f-collage figure:nth-child(2) { transform: translateY(-36px); }
.f-collage figcaption { margin-top: 8px; font-size: 13px; color: var(--g-muted); letter-spacing: .04em; }


@media (max-width: 760px) {
  .f-grid { grid-template-columns: 1fr; }
  .f-portrait { max-width: 420px; }
  .f-facts { grid-template-columns: 1fr; }
  .f-facts li { padding: 12px 0; border-bottom: 1px solid var(--g-line); }
  .f-collage { grid-template-columns: 1fr 1fr; gap: 12px; }
  .f-collage figure:nth-child(1) { grid-column: 1 / -1; }
  .f-collage figure:nth-child(1) img { aspect-ratio: 4/3; }
  .f-collage figure:nth-child(2) { transform: none; }
}

/* Contact DALLAF : version galerie */
.contact-pro h2 { letter-spacing: .01em; }
.contact-note { font-size: 14px; color: var(--g-muted); border-left: 2px solid var(--dallaf-pink); padding-left: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt { color: var(--g-muted); font-size: 12px; }
.contact-pro input, .contact-pro textarea, .contact-pro select { border-radius: 0; border-width: 0 0 1px; background: transparent; padding: 12px 2px; }
.contact-pro input:focus, .contact-pro textarea:focus, .contact-pro select:focus { outline: none; border-bottom-color: var(--g-ink); }
.contact-pro textarea { border-width: 1px; padding: 12px; min-height: 160px; }
.contact-pro label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted); }
.contact-pro label input, .contact-pro label select, .contact-pro label textarea { color: var(--g-ink); letter-spacing: 0; text-transform: none; }
.contact-pro .btn { border-radius: 0; padding: 16px 34px; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.lb-price { margin-top: 14px !important; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--g-ink) !important; }
.lb-inner .btn { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* Ateliers passés : vignettes cliquables */
.past-card { display: flex; flex-direction: column; background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--t-ink); transition: transform .2s, box-shadow .2s; }
.past-card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--t-ink); }
.past-img { position: relative; border-bottom: 2px solid var(--t-ink); }
.past-img img { aspect-ratio: 3/2; object-fit: cover; width: 100%; filter: saturate(.75); transition: filter .3s; }
.past-card:hover .past-img img { filter: none; }
.past-count { position: absolute; left: 10px; bottom: 10px; background: var(--t-cream); border: 2px solid var(--t-ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.past-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.past-body h3 { margin: 0; font-size: 19px; line-height: 1.2; }
.past-body small { display: block; color: var(--t-muted); font-size: 14px; line-height: 1.4; }
.past-more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 500; color: var(--t-orange-dark); }

/* Page récap d'un atelier */
.recap { padding-bottom: 40px; }
.recap-head { padding-top: clamp(36px, 6vw, 72px); }
.recap-back { display: inline-block; margin-bottom: 26px; font-size: 14px; text-decoration: none; color: var(--t-muted); }
.recap-back:hover { color: var(--t-ink); }
.recap-head .kicker { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--t-orange-dark); margin-bottom: 10px; }
.recap-head .t-title { font-size: clamp(40px, 6vw, 72px); }
.recap-infos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.recap-infos span { background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.recap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 60px); align-items: start; margin-top: clamp(32px, 5vw, 56px); }
.recap-cover { margin: 0; border: 3px solid var(--t-ink); border-radius: 28px; overflow: hidden; box-shadow: 8px 8px 0 var(--t-ink); }
.recap-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.recap-text h2 { margin: 0 0 14px; font-size: 30px; }
.recap-text p { margin: 0 0 16px; font-size: 17px; white-space: pre-line; }
.recap-soon { background: var(--t-card); border: 2px dashed var(--t-ink); border-radius: 20px; padding: 22px; }
.recap-photos { margin-top: clamp(56px, 8vw, 90px); }
.photo-grid { columns: 3 240px; column-gap: 16px; }
.photo { display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 2px solid var(--t-ink); border-radius: 18px; overflow: hidden; background: none; cursor: zoom-in; break-inside: avoid; transition: transform .2s, box-shadow .2s; }
.photo:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--t-ink); }
.photo img { width: 100%; }
.recap-cta { margin-top: clamp(56px, 8vw, 90px); text-align: center; background: var(--t-orange); border: 3px solid var(--t-ink); border-radius: 32px; padding: clamp(32px, 5vw, 56px) 20px; box-shadow: 8px 8px 0 var(--t-ink); }
.recap-cta h2 { margin: 0 0 20px; font-size: clamp(26px, 3.5vw, 40px); color: var(--t-cream); }
.recap-cta .btn-main { background: var(--t-ink); }
.photo-lb { background: rgba(59,31,16,.94); }
.photo-lb img { max-width: min(1100px, 100%); max-height: 86svh; object-fit: contain; border-radius: 12px; }
.photo-lb .lb-close { background: var(--t-cream); border: 0; color: var(--t-ink); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--t-cream); color: var(--t-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.lb-prev { left: 14px; } .lb-next { right: 14px; }
@media (max-width: 760px) {
  .recap-grid { grid-template-columns: 1fr; }
  .photo-grid { columns: 2 140px; column-gap: 10px; }
  .photo { margin-bottom: 10px; }
  .lb-nav { top: auto; bottom: 18px; transform: none; }
}
.t-hero-img .photo img { object-position: 50% 48%; }

/* Cafés : pastilles cliquables */
.cafes a { background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 999px; padding: 10px 20px; font-family: var(--tila); font-weight: 700; font-variation-settings: "SOFT" 100; font-size: 18px; text-decoration: none; color: var(--t-ink); transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.cafes a::before { content: "☕ "; }
.cafes a i { font-style: normal; font-family: var(--sans); font-size: 14px; opacity: .6; }
.cafes a:hover { background: var(--t-orange); color: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--t-ink); }
.lieu-link { color: inherit; text-decoration: underline; text-decoration-color: var(--t-orange-dark); text-underline-offset: 3px; }
.lieu-link:hover { color: var(--t-orange-dark); }

/* =========================================================
   TILA : DÉROULÉ, BIENFAITS, BANDEAU
   ========================================================= */
/* Mots mis en avant comme sur les carrousels Insta */
.steps-path b, .bento b { color: var(--t-orange); font-weight: 700; }
.steps-path u, .bento u { text-decoration-thickness: 2px; text-underline-offset: 4px; }

.mq-join { font-family: var(--tila); font-weight: 900; font-variation-settings: "SOFT" 100; color: var(--t-ink); background: var(--t-yellow); border: 2px solid var(--t-ink); border-radius: 999px; padding: 0 14px; text-transform: uppercase; letter-spacing: .02em; }
.marquee div { align-items: center; }
.marquee div > span:not(.mq-join) { font-size: 20px; }

/* Parcours en 5 étapes */
.steps-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; counter-reset: step; }
.steps-path li { position: relative; z-index: 1; background: var(--t-card); border: 2px solid var(--t-ink); border-radius: 24px; padding: 54px 18px 22px; text-align: center; counter-increment: step; transition: transform .2s, box-shadow .2s; }
.steps-path li:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--t-ink); }
.steps-path li::before { content: counter(step); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--t-orange); color: #fff; border: 3px solid var(--t-ink); font-family: var(--tila); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: 24px; }
.step-ico { font-size: 30px; line-height: 1; }
.steps-path h3 { margin: 10px 0 8px; font: 500 17px/1.3 var(--sans); overflow-wrap: normal; word-break: normal; }
.steps-path p { margin: 0; font-size: 14px; color: var(--t-muted); }
@media (max-width: 1120px) {
  .steps-path { grid-template-columns: 1fr; gap: 14px; padding-left: 34px; }
  .steps-path li { text-align: left; padding: 18px 18px 18px 46px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
  .steps-path li::before { top: 50%; left: -34px; transform: translateY(-50%); width: 46px; height: 46px; font-size: 20px; }
  .step-ico { grid-row: span 2; font-size: 26px; padding-top: 4px; }
  .steps-path h3 { margin: 0 0 4px; }
}

/* Bienfaits en mosaïque */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.bento > * { margin: 0; border: 3px solid var(--t-ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--t-ink); overflow: hidden; }
.bento article { padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bento .big { margin: 0; font: 500 clamp(30px, 3.6vw, 46px)/1.15 var(--sans); }
.bento .mid { margin: 0; font: 500 21px/1.3 var(--sans); }
.b-ico { font-size: 34px; line-height: 1; }
.b-smile { grid-row: span 2; background: var(--t-cream); }
.b-photo { grid-row: span 2; }
.b-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.b-learn { background: var(--t-sky); }
.b-gift { background: var(--t-yellow); }
.b-gift b { color: var(--t-orange-dark); }
.b-pause { grid-column: 1 / -1; background: var(--t-pink); flex-direction: row !important; align-items: center; justify-content: center !important; text-align: center; }
.b-pause .b-ico { font-size: 28px; }
.bento { grid-template-areas: "smile photo learn" "smile photo gift" "pause pause pause"; }
.b-smile { grid-area: smile; } .b-photo { grid-area: photo; } .b-learn { grid-area: learn; } .b-gift { grid-area: gift; } .b-pause { grid-area: pause; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "smile smile" "photo learn" "photo gift" "pause pause"; }
  .b-photo img { min-height: 0; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "smile" "photo" "learn" "gift" "pause"; }
  .b-photo img { aspect-ratio: 4/5; }
  .b-pause { flex-direction: column !important; }
}
.past-img img, .recap-cover img { object-position: 50% 42%; }

/* Privatisation : photo d'un EVJF */
.privat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.privat ul { margin: 0 0 26px; }
.privat-photo { position: relative; margin: 0; border: 3px solid var(--t-cream); border-radius: 26px; overflow: hidden; transform: rotate(2deg); box-shadow: 8px 8px 0 var(--t-orange); }
.privat-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 55%; }
.privat-photo figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--t-cream); color: var(--t-ink); border-radius: 999px; padding: 7px 14px; font-family: var(--tila); font-weight: 700; font-variation-settings: "SOFT" 100; font-size: 16px; }
@media (max-width: 760px) { .privat-photo { transform: none; max-width: 420px; } }

/* Coup de pinceau qui se dessine sous les étapes */
.brush-line { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.brush-main { fill: none; stroke: var(--t-orange); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
/* Reflet de peinture fraîche au milieu du trait */
.brush-shine { fill: none; stroke: #ffb27a; stroke-width: 3; stroke-linecap: round; opacity: .7; transform: translateY(-2px); }
.brush-dots circle { fill: var(--t-orange); stroke: var(--t-ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.brush-dots circle.on { transform: scale(1); }
.brush-tip { font-size: 34px; opacity: 0; transition: opacity .3s; }
.brush-line.drawing .brush-tip { opacity: 1; }
.steps-path li.lit::before { animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 50% { transform: translateX(-50%) scale(1.18); } }
@media (max-width: 1120px) {
  .brush-line { display: none; }
  .steps-path::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 24px; width: 7px; border-radius: 6px; background: var(--t-orange); transform: scaleY(var(--draw, 0)); transform-origin: top; transition: transform 3.2s cubic-bezier(.45,0,.25,1); z-index: 0; }
  .steps-path.drawn::before { --draw: 1; }
  .steps-path li.lit::before { animation: pop-v .5s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pop-v { 50% { transform: translateY(-50%) scale(1.18); } }
}

/* =========================================================
   DALLAF : ONGLETS ŒUVRES / GALERIE PHOTO
   ========================================================= */
.g-tabs { display: flex; justify-content: center; gap: clamp(24px, 6vw, 72px); border-bottom: 1px solid var(--g-line); margin-bottom: 34px; }
.g-tabs button {
  position: relative; background: none; border: 0; cursor: pointer; padding: 0 2px 16px;
  font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); color: var(--g-muted); transition: color .3s;
}
.g-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--g-ink); transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.g-tabs button:hover, .g-tabs button[aria-selected="true"] { color: var(--g-ink); }
.g-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.g-tabs button:focus-visible { outline: 1px solid var(--g-ink); outline-offset: 6px; }
.g-panel-intro { text-align: center; color: var(--g-muted); margin: -10px 0 30px; font-size: 15px; letter-spacing: .02em; }
#panel-oeuvres .filters { justify-content: center; }

/* Mur de photos */
.photo-wall { columns: 3 260px; column-gap: 18px; padding-bottom: 80px; }
.wall-item { break-inside: avoid; margin: 0 0 18px; }
.wall-item button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.wall-item img { width: 100%; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; filter: grayscale(.15); }
.wall-item button:hover img { transform: scale(1.03); filter: none; }
.wall-item figcaption { margin-top: 8px; font-size: 13px; color: var(--g-muted); letter-spacing: .04em; }

/* Visionneuse photo DALLAF */
.photo-view figure { margin: 0; text-align: center; max-width: min(1100px, 100%); }
.photo-view img { max-width: 100%; max-height: 82svh; object-fit: contain; margin: 0 auto; }
.photo-view figcaption { margin-top: 12px; font-size: 14px; color: var(--g-muted); letter-spacing: .06em; }
.photo-view .lb-nav { background: var(--g-card); color: var(--g-ink); border: 1px solid var(--g-line); }
@media (max-width: 560px) { .photo-wall { columns: 2 140px; column-gap: 10px; } .wall-item { margin-bottom: 10px; } }

/* DALLAF : mot de la fondatrice */
.f-quote { margin: clamp(56px, 8vw, 96px) auto 0; max-width: 860px; text-align: center; padding: clamp(36px, 5vw, 56px) 0; border-block: 1px solid var(--g-line); position: relative; }
.f-quote::before { content: "“"; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); background: var(--g-bg); padding: 0 18px; font-family: var(--serif); font-size: 72px; line-height: 1; color: var(--dallaf-pink); }
.f-quote blockquote { margin: 0; }
.f-quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 36px); line-height: 1.35; color: var(--g-ink); }
.f-quote figcaption { margin-top: 24px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--g-ink); }
.f-quote figcaption span { color: var(--g-muted); }

/* =========================================================
   CRÉDIT GRANDE FAMILLE (comme sur le site Grande Famille)
   ========================================================= */
.gf-credit { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; font-size: 12px; letter-spacing: .04em; opacity: .75; transition: opacity .2s, transform .2s; }
.gf-credit:hover { opacity: 1; transform: scale(1.03); }
.gf-credit img { height: 15px; width: auto; display: block; }
.home-foot .gf-credit { margin-left: 10px; }
.foot .wrap { align-items: center; }
.gf-modal { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.gf-modal[hidden] { display: none; }
.gf-modal-content { position: relative; background: #fff; color: #111; padding: 60px 30px 40px; border-radius: 16px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,.3); animation: gfFadeIn .3s ease-out; font-family: var(--sans); }
.gf-modal-logo { display: block; max-height: 36px; max-width: 70%; width: auto; height: auto; margin: 0 auto 22px; }
.gf-modal-text { font-size: 16px; line-height: 1.6; color: #333; margin: 0 0 25px; }
.gf-modal-text strong { color: #111; }
.gf-contact-link { display: inline-block; padding: 12px 30px; background: #000; color: #fff !important; text-decoration: none; border-radius: 50px; font-weight: 700; transition: opacity .2s; }
.gf-contact-link:hover { opacity: .8; }
.gf-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #f4f4f4; border: 0; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; color: #111; }
@keyframes gfFadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 560px) {
  .foot .wrap { flex-direction: column; text-align: center; gap: 14px; }
  .gf-credit img { height: 13px; }
  .gf-modal-logo { max-height: 44px; }
}

/* Menu sur téléphone : logo au-dessus, menu centré en dessous, rien ne déborde */
.nav-short { display: none; }
@media (max-width: 640px) {
  .top .wrap { flex-direction: column; justify-content: center; gap: 2px; min-height: 0; padding: 10px 0 6px; }
  .logo { font-size: 20px; }
  .u-atelier .logo { font-size: 20px; }
  .nav { width: 100%; justify-content: center; flex-wrap: nowrap; gap: 0; }
  .nav a { padding: 6px 9px; font-size: 13px; white-space: nowrap; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  section[id] { scroll-margin-top: calc(var(--bar-h) + 100px); }
}
.b-pause b, .b-pause u { color: var(--t-orange-dark); }

/* Privatisation sur téléphone : une seule colonne, compacte, tient dans un écran */
@media (max-width: 760px) {
  .privat { grid-template-columns: 1fr; gap: 18px; padding: 26px 20px; border-radius: 26px; }
  .privat > div { display: contents; }
  .privat .t-title { order: 1; font-size: clamp(30px, 9vw, 38px); line-height: 1.02; margin: 0; }
  .privat p { order: 2; font-size: 15px; line-height: 1.5; margin: 0; }
  .privat ul { order: 3; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .privat li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .privat li span { display: inline; font-size: 17px; margin: 0; }
  .privat-photo { order: 4; transform: none; max-width: none; border-width: 2px; border-radius: 18px; box-shadow: 5px 5px 0 var(--t-orange); }
  .privat-photo img { aspect-ratio: 16/9; object-position: 50% 45%; }
  .privat-photo figcaption { left: 10px; bottom: 10px; padding: 5px 12px; font-size: 13px; border-radius: 999px; }
  .privat .btn-main { order: 5; justify-self: start; }
}
@media (max-width: 760px) { .privat li span { margin-right: 4px; } }

/* Ce que t'apportent les ateliers : liste numérotée simple */
.benefits { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.benefits li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; padding: 26px 0; border-bottom: 2px solid var(--t-ink); align-items: baseline; }
.benefits li:first-child { border-top: 2px solid var(--t-ink); }
.benefits .n { font-family: var(--tila); font-weight: 900; font-variation-settings: "SOFT" 100; font-size: 46px; line-height: 1; color: var(--t-orange); }
.benefits h3 { margin: 0 0 4px; font-size: 27px; line-height: 1.15; }
.benefits p { margin: 0; color: var(--t-muted); font-size: 16px; }
@media (max-width: 560px) {
  .benefits li { grid-template-columns: 50px 1fr; gap: 12px; padding: 18px 0; }
  .benefits .n { font-size: 34px; }
  .benefits h3 { font-size: 21px; }
  .benefits p { font-size: 15px; }
}

/* DALLAF : titre et intro centrés */
.g-hero { text-align: center; }
.g-hero p { margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .g-hero h1 { font-size: 9.4vw; line-height: 1.08; } }

/* Pied de page : © à gauche, logo Grande Famille plus grand à droite, une seule ligne partout */
.foot .wrap { flex-direction: row !important; flex-wrap: nowrap; justify-content: space-between; align-items: center; text-align: left !important; gap: 16px; }
.foot .gf-credit { opacity: .9; }
.foot .gf-credit img { height: 24px; }
@media (max-width: 560px) { .foot .gf-credit img { height: 20px; } }

/* =========================================================
   CONFIRMATION D'ENVOI DU FORMULAIRE
   ========================================================= */
.form-done { text-align: center; padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px); outline: none; animation: fdIn .5s cubic-bezier(.2,.7,.2,1); }
.form-done[hidden] { display: none; }
.form-done h3 { margin: 18px 0 10px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; }
.form-done p { margin: 0 auto 10px; max-width: 42ch; }
.form-done .fd-small { font-size: 14px; }
.form-done .btn { margin-top: 18px; }
.fd-check { width: 76px; height: 76px; margin: 0 auto; }
.fd-check svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fd-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: fdDraw .7s .1s ease-out forwards; }
.fd-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fdDraw .4s .7s ease-out forwards; }
@keyframes fdDraw { to { stroke-dashoffset: 0; } }
@keyframes fdIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* DALLAF : sobre, façon galerie */
.u-galerie .form-done { border: 1px solid var(--g-line); background: var(--g-card); }
.u-galerie .fd-check svg { stroke: var(--dallaf-pink); }
.u-galerie .form-done h3 { font-family: var(--serif); font-weight: 400; color: var(--g-ink); }
.u-galerie .form-done p { color: var(--g-muted); }
.u-galerie .form-done .btn { background: var(--g-btn); color: var(--g-btn-ink); border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; padding: 15px 28px; }

/* Tila : joyeux */
.u-atelier .form-done { background: var(--t-card); border: 3px solid var(--t-ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--t-orange); }
.u-atelier .fd-check svg { stroke: var(--t-orange); }
.u-atelier .form-done h3 { color: var(--t-ink); }
.u-atelier .form-done p { color: var(--t-muted); }
.u-atelier .form-done a { color: var(--t-orange-dark); }

@media (prefers-reduced-motion: reduce) {
  .form-done, .fd-check circle, .fd-check path { animation: none; stroke-dashoffset: 0; }
}

/* Cafés : en grille sur ordinateur, bandeau qui défile sur téléphone */
.cafes { display: block; }
.cafes-track { display: flex; flex-wrap: wrap; gap: 12px; }
.cafes-dup { display: contents; }
.cafes-dup > * { display: none; }
@media (max-width: 760px) {
  .cafes { overflow: hidden; margin: 0 -16px; padding: 6px 0 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .cafes-track { flex-wrap: nowrap; width: max-content; gap: 10px; animation: cafesSlide 28s linear infinite; }
  .cafes-dup > * { display: inline-block; }
  .cafes-track a, .cafes-track span { white-space: nowrap; flex: none; margin-right: 0; font-size: 16px; padding: 9px 16px; }
  .cafes-dup { display: flex; gap: 10px; }
  .cafes:hover .cafes-track, .cafes:active .cafes-track { animation-play-state: paused; }
}
@keyframes cafesSlide { to { transform: translateX(calc(-50% - 5px)); } }
@media (prefers-reduced-motion: reduce) { .cafes-track { animation: none; } .cafes { overflow-x: auto; } }