/*
 * withlena.be — feuille de style unique.
 *
 * Version du 26/09/2026 (deuxième passe). Demande de l'entreprise : reprendre
 * la charte de l'application (bleu #2563EB, surfaces blanches, rayons et
 * ombres du produit) et montrer de VRAIES captures, web et mobile, à la
 * manière des pages de Superhote.
 *
 * Les jetons ci-dessous sont donc recopiés de `app/globals.css` : le site et
 * le logiciel doivent être reconnaissables l'un dans l'autre. Ce qui reste du
 * parti pris précédent, parce que c'est ce qui distingue la page d'un gabarit :
 *   • un titrage en Fraunces (servi depuis ce serveur, aucun appel extérieur) ;
 *   • aucun dégradé, aucun effet de verre, aucune animation au défilement ;
 *   • des captures réelles à la place des grilles d'icônes ;
 *   • pas de faux témoignages, pas de trois colonnes de tarifs.
 */

:root {
  /* Repris de l'application */
  --bg:          #F7F8FA;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAFA;
  --line:        rgba(0, 0, 0, 0.07);
  --line-strong: rgba(0, 0, 0, 0.12);
  --ink:         #111827;
  --ink-2:       #374151;
  --muted:       #6B7280;
  --subtle:      #9CA3AF;
  --brand:       #2563EB;
  --brand-deep:  #1D4ED8;
  --brand-night: #14213F;
  --brand-light: #EFF6FF;
  --succes:      #15803D;
  --succes-bg:   #ECFDF3;
  --alerte:      #B42318;
  --ambre:       #B45309;
  --ombre-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ombre-md:    0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --ombre-lg:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --ombre-xl:    0 18px 48px rgba(17,24,39,.14), 0 4px 12px rgba(17,24,39,.06);
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --grand: 1200px;
  --marge: 24px;
}

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/polices/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/polices/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/polices/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/polices/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink-2);
  font-family: "Archivo", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2 {
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 120, "SOFT" 20, "WONK" 1;
  color: var(--ink); font-weight: 640; line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 16px;
}
h1 { font-size: clamp(34px, 4.4vw, 54px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 8px; }
p { margin: 0 0 16px; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

section[id] { scroll-margin-top: 88px; }
.grand { width: 100%; max-width: var(--grand); margin: 0 auto; padding: 0 var(--marge); }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 12px; top: 12px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-md); }

.oeil {
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 12px;
}
.oeil.pale { color: #93B4FF; }

/* ── En-tête ────────────────────────────────────────────────────────── */
.entete { background: rgba(255,255,255,.92); backdrop-filter: none; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.entete-bande { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.mot { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.mot img { width: 32px; height: 32px; border-radius: 9px; }
.entete nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.entete nav a { color: var(--ink-2); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.entete nav a:hover { color: var(--brand); }
.entete nav .btn { color: #fff; }
@media (max-width: 800px) { .entete nav a:not(.btn) { display: none; } }

/* ── Boutons ────────────────────────────────────────────────────────── */
.btn, .btn-2, .btn-clair {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15.5px; text-decoration: none; border-radius: var(--r-md);
  padding: 12px 20px; transition: background .15s ease, border-color .15s ease;
}
.btn { background: var(--brand); color: #fff; box-shadow: var(--ombre-sm); }
.btn:hover { background: var(--brand-deep); color: #fff; }
.btn-2 { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-2:hover { background: var(--bg); color: var(--ink); border-color: var(--brand); }
.btn-clair { background: #fff; color: var(--brand-deep); box-shadow: var(--ombre-sm); text-decoration: none; }
.btn-clair:hover { background: var(--brand-light); color: var(--brand-deep); }
/* Sur le bandeau sombre, le bouton secondaire se dessine en creux. */
.contact .btn-2 { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.contact .btn-2:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #fff; }

/* ── Cadre de capture ───────────────────────────────────────────────── */
.capture {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: var(--ombre-xl); overflow: hidden;
}
.capture a { display: block; }
.capture img { width: 100%; }
/* Une capture en hauteur (la fiche d'une prestation côté client) ne doit pas
   occuper toute la largeur de sa colonne : elle deviendrait un mur. */
.capture.portrait { max-width: 540px; margin-inline: auto; }

.capture figcaption {
  font-size: 13.5px; color: var(--muted); padding: 11px 16px; background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.capture figcaption b { color: var(--ink-2); font-weight: 600; }

/* ── Accroche ───────────────────────────────────────────────────────── */
.accroche { background: var(--bg); border-bottom: 1px solid var(--line); padding: 72px 0 0; overflow: hidden; }
.accroche h1 { max-width: 14em; }
.accroche h1 em { font-style: normal; color: var(--brand); }
.accroche-texte { max-width: 760px; }
.accroche-texte > p { font-size: 19.5px; max-width: 34em; color: var(--ink-2); }
.appels { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 12px; }
.sous-appels { font-size: 14.5px; color: var(--muted); margin: 0; }
.accroche-image { margin-top: 44px; }
.accroche-image .capture { margin-bottom: -60px; }
@media (max-width: 700px) { .accroche { padding-top: 46px; } .accroche-image .capture { margin-bottom: -28px; } }

/* ── Bandeau de chiffres ────────────────────────────────────────────── */
.chiffres { background: var(--surface); padding: 92px 0 0; }
.chiffres-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.chiffres-grille > div { background: var(--surface); padding: 22px 22px 20px; }
.chiffres-grille b {
  display: block; font-family: "Fraunces", serif; font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: 34px; color: var(--ink); line-height: 1; margin-bottom: 6px;
}
.chiffres-grille span { font-size: 14.5px; color: var(--muted); }
.chiffres-note { font-size: 13.5px; color: var(--subtle); margin: 14px 0 0; max-width: 62em; }
@media (max-width: 860px) { .chiffres-grille { grid-template-columns: repeat(2, 1fr); } .chiffres { padding-top: 64px; } }

/* ── Blocs fonctionnels (texte + capture) ───────────────────────────── */
.fonctions { padding: 76px 0 40px; }
.intro-section { max-width: 40em; margin-bottom: 52px; }
.bloc { padding: 34px 0 60px; }
.bloc-grille { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); gap: 52px; align-items: center; }
.bloc:nth-of-type(even) .bloc-grille { grid-template-columns: minmax(0, 63fr) minmax(0, 37fr); }
.bloc:nth-of-type(even) .bloc-texte { order: 2; }
.bloc-texte h2 { font-size: clamp(24px, 2.6vw, 32px); }
.bloc-texte ul { list-style: none; margin: 20px 0 0; padding: 0; }
.bloc-texte li { position: relative; padding: 0 0 13px 30px; }
.bloc-texte li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 13px; height: 7px;
  border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg);
}
@media (max-width: 980px) {
  .bloc-grille, .bloc:nth-of-type(even) .bloc-grille { grid-template-columns: 1fr; gap: 26px; }
  .bloc:nth-of-type(even) .bloc-texte { order: 0; }
  .bloc { padding: 24px 0 44px; }
}

/* ── Bandeau mobile ─────────────────────────────────────────────────── */
.mobile { background: var(--brand-night); color: rgba(255,255,255,.76); padding: 82px 0 88px; }
.mobile h2 { color: #fff; }
.mobile .intro-section { margin-bottom: 44px; }
.mobile-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: start; }
.mobile-grille figure { text-align: center; }
.mobile-grille img {
  width: 100%; max-width: 280px; margin: 0 auto; border-radius: 26px;
  border: 5px solid #0B1329; box-shadow: var(--ombre-xl);
}
.mobile-grille figcaption { font-size: 14.5px; color: rgba(255,255,255,.7); margin-top: 16px; max-width: 26em; margin-inline: auto; }
.mobile-grille figcaption b { color: #fff; font-weight: 600; }
.mobile-pied { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 46px; font-size: 15px; }
.mobile-pied .btn-clair { margin-right: 6px; }
@media (max-width: 860px) { .mobile-grille { grid-template-columns: 1fr; gap: 44px; } }

/* ── Ce qui ne se voit pas ──────────────────────────────────────────── */
.solide { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 78px 0; }
.solide-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.carte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 22px; box-shadow: var(--ombre-sm);
}
.carte p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .solide-grille { grid-template-columns: 1fr; } }

/* ── Franchise ──────────────────────────────────────────────────────── */
.franchise { padding: 78px 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 38px; }
.deux > div { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px 22px; background: var(--surface); box-shadow: var(--ombre-sm); }
.deux ul { list-style: none; margin: 0; padding: 0; }
.deux li { position: relative; padding: 0 0 13px 28px; }
.oui li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 13px; height: 7px;
  border-left: 2.5px solid var(--succes); border-bottom: 2.5px solid var(--succes); transform: rotate(-45deg);
}
.pas { background: var(--bg) !important; }
.pas li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 14px; height: 2.5px; background: var(--alerte); border-radius: 2px; }
@media (max-width: 760px) { .deux { grid-template-columns: 1fr; } }

/* ── Prix, maison, contact ──────────────────────────────────────────── */
.prix { background: var(--bg); border-top: 1px solid var(--line); padding: 74px 0; }
.prix .grand { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 48px; }
.prix h2 { margin-bottom: 0; }
.prix .encart { margin-top: 18px; background: var(--brand-light); border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; }
.prix .encart p:last-child { margin-bottom: 0; }
@media (max-width: 880px) { .prix .grand { grid-template-columns: 1fr; gap: 20px; } }

.maison { padding: 74px 0; border-top: 1px solid var(--line); }
.maison .grand { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 42px; align-items: start; }
.maison img { width: 150px; }
@media (max-width: 700px) { .maison .grand { grid-template-columns: 1fr; gap: 20px; } .maison img { width: 110px; } }

.contact { background: var(--brand-night); color: rgba(255,255,255,.78); padding: 78px 0 82px; }
.contact h2 { color: #fff; max-width: 18em; }
.contact .grand { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 48px; align-items: center; }
.contact .chapeau { font-size: 19px; max-width: 36em; }
.coord { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 14px; }
.contact .note { font-size: 14.5px; color: rgba(255,255,255,.55); margin: 0; max-width: 40em; }
.contact img { width: 210px; }
@media (max-width: 820px) { .contact .grand { grid-template-columns: 1fr; gap: 24px; } .contact img { width: 140px; } }

/* ── Pied ───────────────────────────────────────────────────────────── */
.pied { background: var(--ink); color: rgba(255,255,255,.6); font-size: 14.5px; }
.pied-bande { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; padding: 26px 0 30px; }
.pied a { color: rgba(255,255,255,.85); }
.pied a:hover { color: #fff; }
.pied p { margin: 0; }
.pied .droite { margin-left: auto; font-size: 13.5px; color: rgba(255,255,255,.42); }

/* ── Page simple (mentions légales) ─────────────────────────────────── */
.page-simple { max-width: 760px; padding-top: 54px; padding-bottom: 76px; }
.page-simple h1 { margin-bottom: 8px; }
.page-simple .date { color: var(--muted); font-size: 14.5px; margin-bottom: 34px; }
.page-simple h2 { font-size: 22px; margin: 38px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.page-simple dl { margin: 0; }
.page-simple dt { font-weight: 600; color: var(--ink); margin-top: 12px; }
.page-simple dd { margin: 0; }

/* Une capture large ne doit jamais élargir la page sur un téléphone. */
.bloc-grille > *, .prix .grand > *, .contact .grand > *, .maison .grand > *, .mobile-grille > * { min-width: 0; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ════════════════════════════════════════════════════════════════════════
 * Mouvement
 *
 * Deux règles pour ne pas retomber sur l'animation de catalogue (tout le
 * contenu qui monte en fondu au défilement, partout, à la même vitesse) :
 *
 *   1. Le mouvement sert à MONTRER quelque chose : une capture qui se pose,
 *      un téléphone qui arrive après ses voisins, un chiffre qui s'inscrit.
 *      Le texte courant, lui, ne bouge pas : on doit pouvoir le lire tout de
 *      suite, y compris pendant le chargement.
 *   2. Tout passe par `animation-timeline: view()` (CSS pur, aucun script) et
 *      reste enfermé dans un `@supports`. Un navigateur qui ne connaît pas les
 *      animations liées au défilement affiche la page dans son état final :
 *      rien ne peut rester invisible à cause d'une animation qui n'a pas joué.
 *
 * Et rien ne bouge du tout si le système demande moins d'animations.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Survol et appui : du mouvement là où l'on clique ──────────────────── */
/* Au survol, c'est l'IMAGE qui bouge, pas le cadre : une animation liée au
   défilement pilote déjà la transformation du cadre, et elle gagnerait sur le
   survol (les animations priment sur les transitions dans la cascade). */
.capture { transition: box-shadow .35s cubic-bezier(.16,1,.3,1); }
.capture:hover { box-shadow: 0 26px 60px rgba(17,24,39,.18), 0 6px 16px rgba(17,24,39,.08); }
.capture img { transition: transform .55s cubic-bezier(.16,1,.3,1); }
.capture:hover img { transform: scale(1.015); }
.btn:active, .btn-2:active, .btn-clair:active { transform: translateY(1px); }
.carte { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-lg); border-color: var(--line-strong); }
.chiffres-grille > div { transition: background .25s ease; }
.chiffres-grille > div:hover { background: var(--brand-light); }
.mobile-grille img { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.mobile-grille figure:hover img { transform: translateY(-6px); }

/* Le trait qui se dessine sous les liens de navigation. */
.entete nav a:not(.btn) { position: relative; padding-bottom: 3px; }
.entete nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.entete nav a:not(.btn):hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {

  /* ── À l'ouverture : la page se pose, elle n'apparaît pas par morceaux ── */
  .accroche-texte > * { animation: pose .6s cubic-bezier(.16,1,.3,1) both; }
  .accroche-texte > :nth-child(2) { animation-delay: .05s; }
  .accroche-texte > :nth-child(3) { animation-delay: .1s; }
  .accroche-texte > :nth-child(4) { animation-delay: .15s; }
  .accroche-texte > :nth-child(5) { animation-delay: .2s; }
  .accroche-image .capture { animation: poseCapture .85s cubic-bezier(.16,1,.3,1) .12s both; }

  @keyframes pose { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes poseCapture {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }

  @supports (animation-timeline: view()) {
    /* Une capture se pose quand elle entre dans l'écran. */
    .bloc .capture {
      animation: entreeCapture linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 88%;
    }
    @keyframes entreeCapture {
      from { opacity: 0; transform: translateY(34px) scale(.98); }
      to   { opacity: 1; transform: none; }
    }

    /* Les téléphones arrivent l'un après l'autre, de gauche à droite. */
    .mobile-grille figure {
      animation: entreeTelephone linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 72%;
    }
    .mobile-grille figure:nth-child(2) { animation-range: entry 8% entry 86%; }
    .mobile-grille figure:nth-child(3) { animation-range: entry 16% entry 100%; }
    @keyframes entreeTelephone {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: none; }
    }

    /* Les quatre chiffres s'inscrivent colonne par colonne. */
    .chiffres-grille > div {
      animation: entreeChiffre linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 62%;
    }
    .chiffres-grille > div:nth-child(2) { animation-range: entry 16% entry 74%; }
    .chiffres-grille > div:nth-child(3) { animation-range: entry 22% entry 86%; }
    .chiffres-grille > div:nth-child(4) { animation-range: entry 28% entry 98%; }
    @keyframes entreeChiffre {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

    /* L'étiquette de section tire son trait. */
    .oeil { position: relative; padding-left: 0; }
    .bloc-texte .oeil::before, .intro-section .oeil::before {
      content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 44px;
      background: currentColor; transform: scaleX(0); transform-origin: left;
      animation: traitEtiquette linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
    @keyframes traitEtiquette { to { transform: scaleX(1); } }

    /* Le bandeau blanc de l'en-tête ne se détache qu'une fois la page défilée. */
    .entete {
      animation: enteteDetachee linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
    @keyframes enteteDetachee {
      from { box-shadow: 0 0 0 rgba(17,24,39,0); border-bottom-color: var(--line); }
      to   { box-shadow: 0 6px 20px rgba(17,24,39,.07); border-bottom-color: transparent; }
    }
  }
}