/* ==========================================================================
   Studio Lananas — accueil : une page qui se lit de haut en bas.
   Ouverture (l’ananas à points), services, réalisations, à propos,
   méthode, contact. Les apparitions sont posées par home.js.
   ========================================================================== */

.page-home { overflow-x: clip; }

/* En-tête : transparent en haut de page, posé sur un fond dès qu’on descend. */
.chrome--flottant {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-bottom: 1px solid transparent;
  transition: background-color 400ms ease, border-color 400ms ease;
}
.chrome--flottant.is-pose {
  pointer-events: auto;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.menu { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 40px); }
.menu a { position: relative; padding: 8px 0; color: var(--muted); }
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 500ms var(--ease);
}
.menu a:hover,
.menu a[aria-current="true"] { color: var(--ink); }
.menu a:hover::after,
.menu a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left center; }

.section {
  position: relative;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding-block: clamp(80px, 13vh, 160px);
  scroll-margin-top: calc(var(--chrome-h) - 40px);
}
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(40px, 7vh, 72px);
}
.section__head h2 { max-width: 15ch; }
.section__head .lead { justify-self: end; }
.section__num { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.section__num::after { content: ""; width: 48px; height: 1px; background: var(--accent); }

/* Apparition au défilement : chaque élément marqué monte doucement (home.js). */
.js [data-apparait] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 900ms var(--ease), translate 1100ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-apparait].is-vu { opacity: 1; translate: 0 0; }

/* ---------- ouverture ---------- */

.ouverture {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  padding: calc(var(--chrome-h) + 24px) 0 72px;
}
.ouverture__texte { position: relative; z-index: 2; display: grid; gap: 28px; justify-items: start; }
.ouverture h1 { max-width: 13ch; }
.ouverture h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 15%, var(--accent-2) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Le dégradé ne peint que dans la boîte du mot : on l’agrandit vers le bas pour
     couvrir la queue du « g », sans changer l’interligne. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
}
.ouverture .lead { max-width: 36rem; }
.ouverture__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.mot { display: inline-block; }
.js .ouverture h1 .mot { opacity: 0; translate: 0 0.45em; animation: sl-mot 1100ms var(--ease) forwards; animation-delay: var(--d); }
@keyframes sl-mot { to { opacity: 1; translate: 0 0; } }

.domaines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 22px;
  border-top: var(--rule);
  color: var(--faint);
}
.domaines li { display: inline-flex; align-items: center; gap: 10px; }
.domaines li::before { content: ""; width: 6px; height: 6px; rotate: 45deg; background: var(--accent); opacity: 0.75; }

/* La figure : l’ananas à points (ananas.js + home.js). */
.fruit {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 600 / 900;
  max-height: calc(100svh - var(--chrome-h) - 80px);
}
.fruit::before {
  content: "";
  position: absolute;
  inset: 26% -14% -2%;
  background: radial-gradient(closest-side, var(--glow), transparent);
  animation: sl-souffle 7s ease-in-out infinite;
}
@keyframes sl-souffle { 50% { opacity: 0.55; scale: 0.93; } }
.fruit svg { position: relative; width: 100%; height: 100%; overflow: visible; }

.a-pt {
  fill: var(--fruit);
  transform-box: fill-box;
  transform-origin: center;
  scale: var(--s, 1);
  transition: opacity 600ms ease, scale 420ms var(--ease);
}
.g-reseaux { fill: var(--couronne); }
.fruit .couronne { transform-origin: 300px 390px; animation: sl-brise 9s ease-in-out infinite; }
@keyframes sl-brise { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.8deg; } }

/* Allumage, une fois par visite : le fruit s’éclaire depuis le cœur, puis la couronne pousse. */
.sl-boot .a-pt { animation: sl-allume 900ms var(--ease) both; animation-delay: calc(var(--d) + 300ms); }
@keyframes sl-allume {
  0% { opacity: 0; scale: 0.1; }
  60% { opacity: 1; scale: 1.3; }
  100% { opacity: 1; scale: 1; }
}

/* Un service désigné : sa partie du fruit reste allumée, le reste s’efface. */
.fruit[data-vif] .a-pt { opacity: 0.14; }
.fruit[data-vif="sites"] .g-sites,
.fruit[data-vif="reseaux"] .g-reseaux,
.fruit[data-vif="identite"] .g-identite,
.fruit[data-vif="video"] .g-video,
.fruit[data-vif="applications"] .g-applications { opacity: 1; scale: 1.2; }

.fruit__legende {
  position: absolute;
  left: 50%;
  bottom: -12px;
  translate: -50% 0;
  white-space: nowrap;
  color: var(--faint);
  transition: color 400ms ease;
}
.fruit__legende.is-vive { color: var(--accent); }

.defiler {
  position: absolute;
  left: 0;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--faint);
}
.defiler::before {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--accent), transparent);
  animation: sl-goutte 2400ms var(--ease) infinite;
  transform-origin: top;
}
@keyframes sl-goutte { 0% { scale: 1 0; } 60%, 100% { scale: 1 1; opacity: 0; } }

/* ---------- bandeau défilant ---------- */

.bandeau {
  overflow: hidden;
  border-block: var(--rule);
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bandeau__piste { display: flex; width: max-content; animation: sl-defile 50s linear infinite; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
.bandeau ul { display: flex; flex: none; }
.bandeau li {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--muted);
}
.bandeau li::after { content: ""; width: 9px; height: 9px; rotate: 45deg; background: var(--accent); }
.bandeau li:nth-child(3n + 2)::after { background: var(--accent-2); border-radius: 50%; }
@keyframes sl-defile { to { translate: -50% 0; } }

/* ---------- services ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
/* Cinq cartes de même taille : trois en haut, deux centrées en dessous. */
.service { grid-column: span 2; }
.service:nth-child(4) { grid-column: 2 / span 2; }
.service {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 16px;
  padding: clamp(26px, 3vw, 40px);
  background: var(--paper);
  border: var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 400ms ease;
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(440px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 11%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 500ms ease;
}
.service:hover::before,
.service:focus-within::before { opacity: 1; }
.service:hover { border-color: var(--line-strong); }
.service__tete { display: flex; justify-content: space-between; align-items: center; color: var(--faint); }
.service__icone {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: var(--rule);
  border-radius: 50%;
  color: var(--accent);
  transition: border-color 400ms ease, rotate 700ms var(--ease), background-color 400ms ease;
}
.service__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.service:hover .service__icone { border-color: var(--accent); rotate: -12deg; background: var(--glow); }
.service h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.service h3 a::after { content: ""; position: absolute; inset: 0; }
.service h3 a:hover { color: inherit; }
.service p { color: var(--muted); font-size: 0.96875rem; line-height: 1.7; }
.service ul { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; }
.service li {
  padding: 5px 11px;
  border: var(--rule);
  border-radius: var(--pill);
  color: var(--soft);
  font-size: 0.78rem;
  line-height: 1.3;
}
.service__plus { color: var(--accent); }
.service:hover .service__plus .arrow { transform: translateX(5px); }
.service__nouveau { color: var(--accent-2); }

/* ---------- réalisations ---------- */

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtre {
  padding: 10px 18px;
  border: var(--rule);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.2;
  transition: border-color 300ms ease, color 300ms ease, background-color 300ms ease;
}
.filtre:hover { border-color: var(--line-strong); color: var(--ink); }
.filtre[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.galerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 15vw, 210px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 18px);
}
.oeuvre { position: relative; grid-column: span 4; grid-row: span 2; }
.oeuvre--large { grid-column: span 8; }
.oeuvre--pleine { grid-column: 1 / -1; grid-row: span 2; }
.oeuvre.is-cache { display: none; }
.oeuvre.is-entre { animation: sl-entre 700ms var(--ease) both; animation-delay: var(--i, 0ms); }
@keyframes sl-entre { from { opacity: 0; scale: 0.96; } }
.oeuvre__cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  border: var(--rule);
}
.oeuvre__visuel { position: absolute; inset: 0; transition: scale 1200ms var(--ease); }
.oeuvre:hover .oeuvre__visuel { scale: 1.05; }
.oeuvre__info {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  padding: 36px 20px 18px;
  background: linear-gradient(transparent, color-mix(in oklab, var(--paper) 94%, transparent) 50%);
}
.oeuvre__info h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.oeuvre__info .meta { color: var(--accent); }
.oeuvre__info p:last-child { color: var(--faint); font-size: 0.8125rem; line-height: 1.5; }

/* Visuels d’attente, dessinés en CSS : un par type de projet, à remplacer par les vraies images. */
.v { --a: var(--accent); --b: var(--accent-2); }
.v--site { padding: 9% 8% 0; background: linear-gradient(160deg, color-mix(in oklab, var(--a) 16%, var(--surface)), var(--surface) 70%); }
.v__ecran {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: auto 1fr;
  gap: 8%;
  height: 100%;
  padding: 0 7% 7%;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: var(--paper);
}
.v__barre { grid-column: 1 / -1; height: 26px; border-bottom: var(--rule); margin-inline: -8%; background: radial-gradient(circle, var(--line-strong) 3px, transparent 3.5px) 10px 50% / 12px 12px repeat-x; background-size: 12px 12px; background-position: 12px 50%; background-repeat: no-repeat; }
.v__lignes { display: grid; gap: 8px; align-content: center; }
.v__lignes i { height: 12px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 78%, transparent); }
.v__lignes i:nth-child(2) { width: 72%; }
.v__lignes i:nth-child(3) { height: 5px; width: 86%; background: var(--line-strong); margin-top: 6px; }
.v__lignes i:nth-child(4) { height: 5px; width: 60%; background: var(--line-strong); }
.v__lignes i:nth-child(5) { height: 22px; width: 42%; border-radius: 99px; background: var(--a); margin-top: 8px; }
.v__image { border-radius: 8px; background: linear-gradient(135deg, color-mix(in oklab, var(--a) 65%, var(--surface)), color-mix(in oklab, var(--b) 55%, var(--surface))); }

.v--identite { display: grid; place-items: center; background: color-mix(in oklab, var(--b) 16%, var(--surface)); }
.v--identite::before {
  content: "";
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50% 50% 50% 8%;
  background: conic-gradient(from 200deg, var(--a), var(--b), var(--a));
  rotate: -45deg;
  outline: 1px solid var(--line-strong);
  outline-offset: 22px;
  transition: rotate 1200ms var(--ease);
}
.oeuvre:hover .v--identite::before { rotate: 135deg; }

.v--reseaux {
  display: grid;
  place-items: center;
  background: linear-gradient(200deg, color-mix(in oklab, var(--accent-3) 18%, var(--surface)), var(--surface));
}
.v__tel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 4px;
  height: 84%;
  aspect-ratio: 9 / 17;
  padding: 26% 7% 7%;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--paper);
  transition: translate 900ms var(--ease);
}
.oeuvre:hover .v__tel { translate: 0 -6px; }
.v__tel i { aspect-ratio: 1; border-radius: 3px; background: var(--line-strong); }
.v__tel i:nth-child(3n + 1) { background: color-mix(in oklab, var(--a) 72%, var(--surface)); }
.v__tel i:nth-child(4n + 2) { background: color-mix(in oklab, var(--b) 62%, var(--surface)); }
.v__tel i:nth-child(5) { background: color-mix(in oklab, var(--accent-3) 70%, var(--surface)); }

.v--video {
  background:
    radial-gradient(circle at 28% 38%, color-mix(in oklab, var(--a) 38%, transparent), transparent 55%),
    radial-gradient(circle at 76% 66%, color-mix(in oklab, var(--b) 32%, transparent), transparent 50%),
    var(--surface);
}
.v__lecture {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
  transition: scale 600ms var(--ease);
}
.v__lecture::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 21px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--paper);
}
.oeuvre:hover .v__lecture { scale: 1.12; }
.v__timeline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 70%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--a) 38%, var(--line-strong) 38%);
}

.v--graphisme { background: color-mix(in oklab, var(--a) 12%, var(--surface)); }
.v__affiche {
  position: absolute;
  inset: 12% 30% 22%;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 38%, var(--a) 0 22%, transparent 23%),
    linear-gradient(color-mix(in oklab, var(--ink) 85%, transparent), color-mix(in oklab, var(--ink) 85%, transparent)) 14% 78% / 60% 7% no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 14% 90% / 40% 3% no-repeat,
    color-mix(in oklab, var(--b) 40%, var(--paper));
  rotate: -4deg;
  transition: rotate 900ms var(--ease);
}
.oeuvre:hover .v__affiche { rotate: 3deg; }

.v--application {
  display: grid;
  grid-template-columns: 1fr 2.6fr;
  grid-template-rows: 1fr 1.4fr;
  gap: 10px;
  padding: 8% 8% 28%;
  background: linear-gradient(140deg, var(--surface), color-mix(in oklab, var(--b) 18%, var(--surface)));
}
.v--application i { border-radius: 8px; background: var(--paper); border: var(--rule); }
.v--application i:first-child { grid-row: span 2; background: repeating-linear-gradient(var(--paper) 0 16px, var(--line) 16px 17px); }
.v--application i:nth-child(2) { background: linear-gradient(90deg, var(--a) 62%, var(--line) 62%) 12px 70% / calc(100% - 24px) 6px no-repeat, var(--paper); }

.galerie__note { margin-top: 22px; color: var(--faint); font-size: 0.875rem; }

/* ---------- à propos ---------- */

.propos {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.portrait {
  position: sticky;
  top: calc(var(--chrome-h) + 24px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--rule);
}
.propos__texte { display: grid; gap: 22px; }
.propos__texte h2 { max-width: 16ch; }
.propos__texte > p { color: var(--muted); max-width: 40rem; }
.propos__texte .grand { font-size: var(--fs-lead); color: var(--ink); line-height: 1.6; }
.a-completer { color: var(--accent); font-style: normal; }

.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 12px; border-top: var(--rule); }
.atouts li { display: grid; gap: 6px; align-content: start; padding: 22px 0; border-bottom: var(--rule); }
.atouts h3 { display: flex; align-items: center; gap: 12px; font-size: 1.125rem; }
.atouts h3::before { content: ""; flex: none; width: 7px; height: 7px; rotate: 45deg; background: var(--accent); }
.atouts p { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }

.outils { display: flex; flex-wrap: wrap; gap: 8px; }
.outils li { padding: 7px 14px; border-radius: var(--pill); background: var(--panel); color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }

/* ---------- méthode ---------- */

.etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  padding-top: 56px;
}
.etapes::before,
.etapes::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-strong);
}
.etapes::after {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
}
.etape { position: relative; display: grid; gap: 10px; align-content: start; }
.etape::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 1;
  width: 12px;
  height: 12px;
  rotate: 45deg;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  transition: background-color 500ms ease, border-color 500ms ease, scale 500ms var(--ease);
}
.etape.is-atteinte::before { background: var(--accent); border-color: var(--accent); scale: 1.25; }
.etape__num { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; font-weight: 300; letter-spacing: -0.04em; color: var(--line-strong); transition: color 700ms ease; }
.etape.is-atteinte .etape__num { color: var(--accent); }
.etape h3 { font-size: 1.25rem; }
.etape p { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }

/* ---------- contact ---------- */

.contact-bloc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(24px, 5vw, 72px);
  border-radius: calc(var(--radius) * 2);
  background:
    radial-gradient(600px circle at 0% 0%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(500px circle at 100% 100%, color-mix(in oklab, var(--accent-2) 11%, transparent), transparent 60%),
    var(--surface);
  border: var(--rule);
}
.contact-bloc__intro { display: grid; gap: 22px; align-content: start; }
.contact-bloc h2 { max-width: 12ch; }

/* ---------- responsive ---------- */

@media (max-height: 860px) { .defiler { display: none; } }

@media (max-width: 1100px) {
  .menu { display: none; }
  .chrome--flottant { grid-template-columns: auto 1fr; }
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service, .service:nth-child(4) { grid-column: span 2; }
  .service:last-child { grid-column: 2 / span 2; }
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
  .etapes::before, .etapes::after { display: none; }
  .etape::before { top: -24px; }
  .propos { grid-template-columns: 1fr; }
  .portrait { position: relative; top: 0; width: min(100%, 360px); }
}

@media (max-width: 860px) {
  .ouverture { grid-template-columns: 1fr; min-height: auto; padding-top: calc(var(--chrome-h) + 8px); gap: 8px; }
  .fruit { order: -1; width: min(46vw, 230px); }
  .fruit__legende, .defiler { display: none; }
  .section__head { grid-template-columns: 1fr; }
  .section__head .lead { justify-self: start; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 46vw; }
  .oeuvre, .oeuvre--large, .oeuvre--pleine { grid-column: span 2; grid-row: span 1; }
  .contact-bloc { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .services, .etapes, .atouts { grid-template-columns: 1fr; }
  .service, .service:nth-child(4), .service:last-child { grid-column: auto; }
  .ouverture__actions { width: 100%; }
  .ouverture__actions .pill { flex: 1 1 auto; justify-content: center; }
  .galerie { grid-auto-rows: 62vw; }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau__piste, .fruit .couronne, .fruit::before { animation: none; }
  .js [data-apparait] { opacity: 1; translate: 0 0; }
}