/* LupFeed — charte « Atelier Sud » (A7)
   Couleurs et typographies du site : Calcaire, Roche, Grand large, Calanque (rare) ;
   Bricolage Grotesque pour le logo et les titres, Figtree pour les textes.
   Chargé après style.css, qui porte la mise en page et les animations. */

:root {
  --calcaire: #F6F3EC;
  --roche: #E8E3D8;
  --grand-large: #0F2230;
  --calanque: #3D97AB;
  --calanque-texte: #276F81;
  --texte-2: #556270;
  --filet: #E2DDD2;

  /* Raccord avec les variables du site */
  --white: var(--calcaire);
  --mist: var(--roche);
  --ink: var(--grand-large);
  --ink-2: var(--texte-2);
  --line: var(--filet);
  --blue: var(--grand-large);        /* boutons principaux : Grand large, pas bleu */
  --blue-hover: #1C3649;
  --link: var(--calanque-texte);
  --black: var(--grand-large);
  --on-black: var(--calcaire);
  --on-black-2: #A9B6BF;
  --link-on-black: #8CCBD9;

  --font: "Figtree", system-ui, sans-serif;
  --font-titre: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 76px;
  --r-md: 22px;
}

body { letter-spacing: 0; line-height: 1.55; }

/* Titres en Bricolage Grotesque, la police du logo */
h1, h2, h3, .hero-title, .manifesto p, .quote blockquote, .ms-typed {
  font-family: var(--font-titre); font-weight: 700; letter-spacing: -0.035em;
}
h2 { font-size: clamp(2.25rem, 4.8vw, 3.75rem); line-height: 1.04; }
.stats dt { font-family: var(--font-titre); font-weight: 700; letter-spacing: -0.035em; }
.scene-text h2, .band h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
.card h3 { font-size: clamp(1.5rem, 2vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.1; }
.steps h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -0.025em; }
.legal h3 { letter-spacing: -0.02em; }
.manifesto p { font-size: clamp(1.75rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.quote blockquote { font-size: clamp(1.5rem, 3.2vw, 2.625rem); line-height: 1.14; letter-spacing: -0.03em; }
.work-intro h2 { font-size: clamp(2.75rem, 7.4vw, 5.75rem); }
.reveal-caption, .about-lead { letter-spacing: 0; }

/* Menu : logo de la charte, « Parlons-en » en pilule pleine Calanque (texte Grand large : 4,8:1) */
.nav .logo { width: 44px; height: 44px; padding: 4px 0 0 4px; border-width: 3px; justify-content: flex-start; line-height: .9; }
.nav .logo .l { font-size: 14px; }
.nav .logo .f { font-size: 18px; }
.nav { background: rgba(246, 243, 236, 0.82); }
.nav.is-scrolled { border-bottom-color: rgba(15, 34, 48, 0.1); }
.nav-links { font-size: 14px; }
.nav-links a { opacity: 1; }
.nav .btn-sm { min-height: 38px; padding: 0 18px; border-radius: 999px; background: var(--calanque); color: var(--grand-large); font-size: 14px; font-weight: 600; }
.nav .btn-sm:hover { background: #55AFC2; box-shadow: none; }

/* Boutons et liens */
.btn { font-weight: 600; color: var(--calcaire); }
.btn:hover { box-shadow: 0 0 0 2px var(--calanque); }
.link-arrow { font-weight: 500; }

/* Haut de page : titre centré, « dans les cases. » dans le cadre ouvert */
.hero-top { justify-items: center; text-align: center; gap: 26px; }
.hero-title { font-size: clamp(2.75rem, 7.2vw, 5.75rem); line-height: 1.02; }
.hero-title .ln { display: inline-block; vertical-align: bottom; padding: .04em .06em .14em; margin-bottom: -.14em; }
.hero-title .ln:last-child > span { display: inline-block; border: 5px solid var(--calanque); border-right-color: transparent; padding: 0 0 6px 16px; }
.hero-side { justify-items: center; max-width: 36rem; margin: 0 !important; gap: 30px; }
.hero-lead { font-size: 18px; line-height: 1.55; letter-spacing: 0; }
.hero-cta { justify-content: center; }
.hero-caption, .steps .n, .scene-steps span, .price { letter-spacing: 0; }

/* Petits libellés */
.steps .n { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }

/* Surfaces : cartes en Roche sur fond Calcaire, sans ombre */
.services { background: var(--calcaire); }
.card { background: var(--roche); border-radius: 22px; }
.card-photo { border-radius: 14px; background: #DCD6C9; }
.card-foot { border-top-color: #D6D0C3; }
.card:hover, .card:focus-within { box-shadow: 0 30px 50px -34px rgba(15, 34, 48, 0.35); }
.tile-media { background: #16303F; }
.about-photo, .hero-media { background: var(--roche); }

/* Détails en Calanque : toujours fins, jamais en aplat */
::selection { background: rgba(61, 151, 171, 0.28); color: var(--ink); }
.work ::selection { background: rgba(61, 151, 171, 0.5); color: var(--calcaire); }
:focus-visible { outline-color: var(--calanque-texte); }
.frise-line i, .hero-dots i::after { background: var(--calanque); }
.steps li.is-on .dot { box-shadow: 0 0 0 6px rgba(61, 151, 171, 0.18); }
.dot { background: var(--calcaire); }
.field input, .field select, .field textarea { background-color: #FBF9F4; caret-color: var(--calanque-texte); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A9B0B4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--calanque-texte); box-shadow: 0 0 0 4px rgba(61, 151, 171, 0.2); }

/* Écran de l'ordinateur : la page blanche reste blanche, la phrase passe en serif */
.ms-typed { font-size: 4.2cqw; border-right-color: var(--calanque); }
.ms-intro { color: var(--grand-large); }

/* Le site fictif à l'écran garde une charte bien à lui (lie-de-vin, craie, ocre)
   pour ne pas faire ton sur ton avec le site LupFeed. */
.imac-screen.rv { --petrole: #5B1F2A; --sable: #EADCCB; --cuivre: #C89B3C; --ecume: #F7F2EA; --encre: #211517; }
.imac-screen.rv .ms-nav, .imac-screen.rv .ms-text { color: #6B5A57; }
.imac-screen.rv .ms-kicker { color: #7A5A12; }
.imac-screen.rv .ms-title, .imac-screen.rv .ms-nav b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.imac-screen.rv .ms-title { font-size: 7.4cqw; line-height: .96; }
.imac-screen.rv .ms-nav b { font-size: 2.3cqw; }

/* Page Services : la planche d'identité et le fil reprennent la charte Atelier Sud */
.board.rv, .phone-screen.rv { --petrole: #0F2230; --sable: #E8E3D8; --cuivre: #3D97AB; --ecume: #F6F3EC; --encre: #0F2230; }
.board { box-shadow: 0 1px 0 rgba(15, 34, 48, 0.04), 0 40px 80px -44px rgba(15, 34, 48, 0.35); }
.board-logo, .specimen { background: #FBF9F4; }
.guides line { stroke: var(--calanque); }
.board-palette { grid-template-columns: repeat(4, 1fr); }
.swatch span { color: var(--texte-2); }
.specimen span:last-child { color: var(--texte-2); }
.aa { color: var(--grand-large); }
.aa-display { font-family: var(--font-titre); font-weight: 800; letter-spacing: -0.04em; }
.aa-text { font-family: var(--font); }
.app-post, .post-media, .grid em { font-family: var(--font-titre); font-weight: 800; letter-spacing: -0.035em; }
.post-media small, .pill { font-family: var(--font); }
.g-cuivre { color: var(--calcaire); }
.m-cover small, .m-quote small { color: #C8D2D6; }
.open-frame { border-color: var(--calanque); border-right-color: transparent; }
.follow { background: var(--grand-large); }
.profile-top span { color: var(--texte-2); }
.browser-bar { background: var(--roche); }
.scene-social { background: var(--roche); }
.band, .contact, .foot { background: var(--roche); }
.foot { border-top-color: #D6D0C3; }