/* =========================================================
   Finition « pro » — francescoguido.ch
   Mêmes couleurs, mêmes polices, même carrousel, même effet Matrix.
   Ce qui change (guide ui-ux-pro-max : Portfolio Grid + Minimalisme suisse) :
   - les photos en premier et entières : galerie en colonnes, sans recadrage
   - angles nets, plus de pilules ni d'ombres décoratives
   - typographie plus posée : capitales espacées pour la navigation et les boutons,
     titres plus calmes, mesures de lecture régulières
   - transitions courtes et discrètes (200–250 ms)
   ========================================================= */
:root { --radius: 0px; --pro-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Typographie ---------- */
body { line-height: 1.7; letter-spacing: .005em; }
.hero__lead, .chapter__intro, .about__text p, .contact__intro > p { font-weight: 400; }
.h-display, .chapter__title, .h-sub { letter-spacing: -.02em; }
.chapter__title { font-weight: 400; }
.eyebrow, .chapter__num { font-size: .7rem; letter-spacing: .28em; font-weight: 600; }

/* ---------- Boutons : rectangles nets, capitales espacées ---------- */
.btn { border-radius: 0; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; border-width: 1px; padding: .9rem 1.7rem; transition-duration: 220ms; }
.btn:active { transform: none; }
.btn--sm { font-size: .7rem; padding: .6rem 1.2rem; }
.btn--lg { font-size: .78rem; padding: 1.1rem 2.1rem; }
.btn .ph { width: 16px; height: 16px; }

/* ---------- Navigation ---------- */
.nav { gap: var(--s6); }
.nav__links { gap: var(--s4); }
.nav__links a:not(.btn) { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.nav__links a:not(.btn)::after { height: 1px; bottom: .5rem; }
.nav::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
.lang { border: 0; padding: 0; gap: 0; border-radius: 0; }
.lang button { border-radius: 0; min-width: 34px; font-size: .68rem; letter-spacing: .14em; background: none !important; color: var(--fg-muted); position: relative; }
.lang button[aria-pressed="true"] { color: var(--fg); }
.lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 6px; height: 1px; background: var(--accent); }
.lang button + button::before { content: ""; position: absolute; left: 0; top: 35%; bottom: 35%; width: 1px; background: var(--border); }
.theme-toggle { border-radius: 0; border-color: transparent; }
.theme-toggle:hover { border-color: var(--border); background: none; }
@media (max-width: 1100px) {
  .nav__links a:not(.btn) { font-family: var(--serif); font-size: 2rem; letter-spacing: -.01em; text-transform: none; }
}

/* ---------- Accueil : le carrousel reste, la composition se calme ---------- */
.hero__title { font-weight: 400; letter-spacing: -.035em; }
.hero__lead { max-width: 30rem; line-height: 1.75; }
.hero__actions { gap: var(--s1); }
.hero__ctrl { border-radius: 0; background: var(--bg); }
.card, .deck { border-radius: 2px; }
.card { box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .1), 0 24px 48px -28px rgba(var(--shadow-rgb), .5); }
.hero__dots span { border-radius: 0; height: 2px; width: 14px; }
.hero__dots span.is-sig { width: 14px; }
.hero__dots span.is-active { transform: none; width: 28px; }
.hero__stories span { border-radius: 0; height: 2px; }
.hero__hint { letter-spacing: .22em; font-size: .64rem; }
.scroll-cue { border-radius: 0; border-color: transparent; }

/* ---------- Chapitres ---------- */
.chapter__head { margin-bottom: var(--s6); }
.chapter__intro { line-height: 1.75; }
.chapter__intro a, .faq details a, .link-arrow { text-underline-offset: 4px; }

/* ---------- Filtres : onglets texte au lieu de pilules ---------- */
.filters { gap: 0 var(--s4); border-bottom: 1px solid var(--border); margin-bottom: var(--s6); }
.chip { border: 0; border-radius: 0; background: none !important; padding: .9rem 0; min-height: 44px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--fg-muted); position: relative; }
.chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--pro-ease); }
.chip:hover { color: var(--fg); }
.chip[aria-pressed="true"] { color: var(--fg); }
.chip[aria-pressed="true"]::after { transform: none; }

/* ---------- Galerie : photos entières, en colonnes (sans recadrage) ---------- */
.gallery { display: block; columns: 4; column-gap: clamp(10px, 1.4vw, 20px); }   /* 4 colonnes : les 20 premières photos remplissent des rangées complètes */
@media (max-width: 1100px) and (min-width: 641px) { .gallery { columns: 3; } }
.gallery > li { break-inside: avoid; margin-bottom: clamp(10px, 1.4vw, 20px); }
.gallery__item { aspect-ratio: auto; border-radius: 0; background: var(--surface-2); }
.gallery__item img { height: auto; object-fit: initial; transition: opacity 240ms var(--pro-ease), transform 700ms var(--pro-ease); }
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.015); opacity: .94; }
.gallery__cap { background: none; padding: .7rem .8rem; font-size: .62rem; letter-spacing: .22em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.gallery__more { margin-top: var(--s6); }
@media (max-width: 640px) { .gallery { columns: 2; column-gap: 8px; } .gallery > li { margin-bottom: 8px; } }

/* ---------- Séance (poses) ---------- */
.poses__grid li { border-radius: 0; }
.poses__grid span { border-radius: 0; background: none; padding: 0; font-size: .64rem; letter-spacing: .24em; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* ---------- Web : projets, prestations, offres ---------- */
.browser { border-radius: 2px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .7); }
.browser__bar span { border-radius: 0; }
.included li, .biz > li, .offer { border-radius: 0; }
.included li:hover, .biz > li:hover { transform: none; }
.offer { padding: var(--s6) var(--s4) var(--s4); }
.offer:hover { transform: none; box-shadow: none; border-color: var(--fg); }
.offer--featured:hover { border-color: var(--on-dark-accent); }
.offer h3 { font-weight: 400; letter-spacing: -.01em; }
.offer__tag { font-size: .66rem; letter-spacing: .26em; }
.offer li::before { content: ""; flex: none; width: 10px; height: 1px; background: currentColor; opacity: .5; transform: translateY(.8em); }
.biz ul li::before { border-radius: 0; width: 8px; height: 1px; top: .8em; }
.process li { border-top-width: 1px; }
.process h4 { font-weight: 400; }

/* ---------- Bon cadeau ---------- */
.gift { border-radius: 0; }
.gift__amt { border-radius: 0; font-size: 1.3rem; }
.gift__card img { border-radius: 2px; transform: rotate(-2deg); }

/* ---------- À propos, FAQ, contact ---------- */
.about__img { border-radius: 0; box-shadow: none; }
.about__quote { border-left-width: 1px; }
.faq summary { font-weight: 400; }
.faq summary::after { font-weight: 300; }
.contact__list a { font-weight: 400; }
.field label, .form__pref legend { font-size: .68rem; letter-spacing: .2em; }
.field input, .field select, .field textarea { border-radius: 0; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding-inline: 0; }
.field textarea { border: 1px solid var(--border); padding: .9rem 1rem; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: none; border-color: var(--fg); }
.form__choice span { border-radius: 0; font-size: .82rem; }
.form__more, .form__done { border-radius: 0; }

/* ---------- Détails ---------- */
.lightbox button { border-radius: 0; }
.lightbox figcaption { font-size: .66rem; letter-spacing: .24em; }
.lang-hint, .lang-hint button { border-radius: 0; }
.footer__row { font-size: .78rem; letter-spacing: .04em; }
::selection { background: var(--accent); color: #fff; }