/* ============================================================
   home/public/_public.css — LE REGISTRE PUBLIC (lot 2026-08-20)
   La seule feuille du registre public : sert la racine, /odette/
   et /acces/. Ces pages ne portent PAS la coquille de la console.
   Elles partagent l'ADN (émeraude, le « prompt », Space Grotesk +
   Hanken Grotesk) et rien d'autre : ici le type est grand, l'air
   est large, le fond alpin est continu sur toute la page, et le
   contenu flotte dessus en panneaux. Aucun <script> (CSP).
   --font-display, --font-body et --font-mono viennent de
   /styles.css (tokens/typography.css) — pas définis ici.
   Préfixe : .pb-*  ·  jetons du registre : --pb-*
   ============================================================ */

:root {
  --pb-ink:        #14231f;  /* le vert-noir des crêtes les plus proches */
  --pb-ink-soft:   #2c3f39;
  --pb-text:       #1c2b28;
  --pb-muted:      #55655f;
  --pb-faint:      #7f8d88;
  --pb-line:       rgba(20, 35, 31, .10);
  --pb-glass:      rgba(255, 255, 255, .78);
  --pb-glass-hi:   rgba(255, 255, 255, .92);
  --pb-em:         #0d9373;
  --pb-em-deep:    #0a7259;
  --pb-em-light:   #6fd8b6;
  --pb-em-soft:    rgba(13, 147, 115, .09);
  --pb-r:          26px;
  --pb-r-sm:       14px;
  --pb-shadow:     0 1px 2px rgba(20,35,31,.04), 0 18px 50px -24px rgba(20,35,31,.22);
  --pb-shadow-lg:  0 2px 6px rgba(20,35,31,.06), 0 40px 90px -40px rgba(20,35,31,.34);
  --pb-max:        1120px;
  --pb-gut:        clamp(20px, 4vw, 40px);
}

/* ---- le fond alpin, une seule fois, derrière toute la page ---- */
body.pb {
  margin: 0; color: var(--pb-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: #f2f6f5;
  background-image: linear-gradient(to bottom, rgba(252,253,253,.92) 0%, rgba(251,253,252,.62) 28%, rgba(250,252,252,.24) 58%, rgba(248,251,250,0) 100%), url("/assets/fond-cretes.webp");
  background-repeat: no-repeat, no-repeat; background-size: cover, cover;
  background-position: center, center bottom; background-attachment: fixed, fixed;
}
.pb > * { position: relative; z-index: 1; }

/* ---- l'en-tête : un vrai en-tête de site, pas le rail de la console ---- */
.pb-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  height: 76px; padding: 0 var(--pb-gut); background: rgba(250,252,252,.72);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(20,35,31,.06); }
.pb-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pb-ink); }
.pb-brand svg { width: 20px; height: 20px; color: var(--pb-em); flex: none; }
.pb-brand b { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pb-head__sp { flex: 1 1 auto; }
.pb-nav { display: flex; align-items: center; gap: 28px; }
.pb-nav a { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--pb-muted); text-decoration: none; }
.pb-nav a:hover { color: var(--pb-ink); }
.pb-nav a[aria-current="page"] { color: var(--pb-ink); }
.pb-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--pb-line); background: rgba(255,255,255,.7); color: var(--pb-ink);
  font-family: var(--font-display); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s; }
.pb-ghost:hover { border-color: rgba(13,147,115,.35); color: var(--pb-em-deep); background: #fff; }

/* ---- rails & panneaux ---- */
.pb-wrap { max-width: var(--pb-max); margin: 0 auto; padding: 0 var(--pb-gut); }
.pb-sec, [id] { scroll-margin-top: 96px; }
.pb-sec { padding: clamp(48px, 7vw, 96px) 0 0; }
.pb-sec--last { padding-bottom: clamp(48px, 7vw, 96px); }
.pb-panel { background: var(--pb-glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--pb-r); box-shadow: var(--pb-shadow);
  padding: clamp(28px, 4.4vw, 64px); }
.pb-panel--solid { background: var(--pb-glass-hi); }
.pb-panel--dark { background: var(--pb-ink); border-color: rgba(255,255,255,.06); box-shadow: var(--pb-shadow-lg); color: rgba(255,255,255,.78); }

/* ---- type du registre public ---- */
.pb-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pb-em-deep); }
.pb-eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; }
.pb-panel--dark .pb-eyebrow { color: var(--pb-em-light); }
.pb-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: 1.02;
  letter-spacing: -.035em; color: var(--pb-ink); margin: 0 0 28px; max-width: 20ch; text-wrap: balance; }
.pb-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.85rem, 3.5vw, 2.9rem); line-height: 1.08;
  letter-spacing: -.028em; color: var(--pb-ink); margin: 0 0 20px; max-width: 26ch; text-wrap: balance; }
.pb-panel--dark .pb-h2 { color: #fff; }
.pb-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.22;
  letter-spacing: -.02em; color: var(--pb-ink); margin: 0 0 10px; }
.pb-lead { font-size: clamp(1.06rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--pb-muted); margin: 0 0 36px; max-width: 46ch; }
.pb-p { font-size: 1.0625rem; line-height: 1.62; color: var(--pb-muted); margin: 0 0 18px; max-width: 58ch; }
.pb-p:last-child { margin-bottom: 0; }
.pb-panel--dark .pb-p { color: rgba(255,255,255,.72); }
.pb-small { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--pb-faint); margin: 0; }
.pb-panel--dark .pb-small { color: rgba(255,255,255,.42); }
.pb-strong { font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45; color: rgba(255,255,255,.9); margin: 0 0 22px; max-width: 52ch; font-weight: 400; }

/* ---- actions ---- */
.pb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pb-btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 30px; border-radius: 12px;
  background: var(--pb-em); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; border: 0; box-shadow: 0 1px 2px rgba(10,114,89,.24), 0 14px 30px -14px rgba(10,114,89,.55);
  transition: background .18s, transform .18s, box-shadow .18s; }
.pb-btn:hover { background: var(--pb-em-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10,114,89,.24), 0 20px 38px -16px rgba(10,114,89,.6); }
.pb-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--pb-ink); text-decoration: none; }
.pb-link i { font-style: normal; font-family: var(--font-mono); transition: transform .2s; }
.pb-link:hover { color: var(--pb-em-deep); }
.pb-link:hover i { transform: translateX(4px); }
.pb-panel--dark .pb-link { color: #fff; }
.pb-panel--dark .pb-link:hover { color: var(--pb-em-light); }

/* ---- le héros : le titre, et rien d'autre ---- */
.pb-hero { min-height: min(86vh, 780px); display: grid; align-content: center; padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); }

/* ---- la grille des prestations : quatre quadrants, pas quatre boîtes ---- */
.pb-head2 { max-width: 68ch; margin-bottom: clamp(30px, 4vw, 54px); }
.pb-head2 .pb-h2 { margin-bottom: 0; }
.pb-lede { margin: 20px 0 0; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.58; color: var(--pb-muted); max-width: 62ch; }
.pb-panel--dark .pb-lede { color: rgba(255,255,255,.72); }
.pb-quad { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 52rem) { .pb-quad { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 80px); } }
.pb-quad > li { list-style: none; }
.pb-quad__n { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--pb-em); margin-bottom: 14px; }
.pb-quad p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--pb-muted); max-width: 42ch; }
.pb-note { margin: clamp(32px, 4vw, 52px) 0 0; padding-top: 26px; border-top: 1px solid var(--pb-line);
  font-size: 1rem; line-height: 1.6; color: var(--pb-faint); max-width: 68ch; }

/* ---- la preuve : texte + capture, jamais dominante ---- */
.pb-proof { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 60rem) { .pb-proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pb-shots { display: grid; gap: clamp(28px, 4vw, 52px); }
.pb-shot { margin: 0; }
.pb-shot__f { display: block; position: relative; border-radius: var(--pb-r-sm); overflow: hidden; border: 1px solid var(--pb-line); background: #fff; box-shadow: var(--pb-shadow-lg); color: inherit; text-decoration: none; }
a.pb-shot__f { cursor: zoom-in; }
.pb-shot__f img { display: block; width: 100%; height: auto; }
.pb-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; background: rgba(20,35,31,.82); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .18s; }
a.pb-shot__f:hover .pb-zoom { background: var(--pb-em-deep); }
.pb-shot--crop .pb-shot__f img { max-height: 22rem; object-fit: cover; object-position: top left; }
.pb-shot figcaption, .pb-cap { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--pb-faint); }
.pb-cap b { color: var(--pb-muted); font-weight: 500; }
.pb-shotlab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-faint); margin: 0 0 12px; }

/* ---- l'agrandissement : une cible CSS, aucun script (CSP) ---- */
.pb-lb { display: none; }
.pb-lb:target { display: grid; position: fixed; inset: 0; z-index: 60; place-items: center;
  padding: clamp(16px, 3vw, 40px); background: rgba(12,20,18,.9); }
.pb-lb__bg { position: absolute; inset: 0; }
.pb-lb__in { position: relative; margin: 0; max-width: min(1560px, 96vw); display: grid; gap: 12px; }
.pb-lb__in img { display: block; width: 100%; max-height: 78vh; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 40px 120px -30px rgba(0,0,0,.7); }
.pb-lb__in figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 92ch; }
.pb-lb__x { position: fixed; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px); transform: none; display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(20,35,31,.6); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.pb-lb__x:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---- appel & pied ---- */
.pb-cta { display: grid; gap: clamp(24px, 3vw, 40px); align-items: end; }
@media (min-width: 60rem) { .pb-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pb-mail { font-family: var(--font-mono); font-size: 13px; color: var(--pb-faint); }
.pb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding: 40px var(--pb-gut) 44px;
  max-width: var(--pb-max); margin: 0 auto; font-family: var(--font-mono); font-size: 12px; color: rgba(20,35,31,.6); }
.pb-foot__sp { flex: 1 1 auto; }
.pb-foot a { color: rgba(20,35,31,.78); text-decoration: none; border-bottom: 1px solid rgba(20,35,31,.22); }
.pb-foot a:hover { color: var(--pb-em-deep); border-color: rgba(13,147,115,.4); }

/* ---- longues pages produit : les rythmes en plus ---- */
.pb-duo { display: grid; gap: clamp(20px, 3vw, 36px); }
@media (min-width: 52rem) { .pb-duo { grid-template-columns: 1fr 1fr; } }
.pb-tile { border-radius: var(--pb-r-sm); border: 1px solid var(--pb-line); background: rgba(255,255,255,.6); padding: clamp(20px, 2.6vw, 30px); }
.pb-tile--em { border-color: rgba(13,147,115,.28); background: var(--pb-em-soft); }
.pb-tile__lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-faint); margin: 0 0 14px; }
.pb-tile--em .pb-tile__lab { color: var(--pb-em-deep); }
.pb-tile ol { margin: 0; padding-left: 20px; color: var(--pb-muted); font-size: .95rem; line-height: 1.7; }
.pb-said { font-family: var(--font-mono); font-size: .95rem; line-height: 1.5; color: var(--pb-ink); background: #fff;
  border: 1px solid rgba(13,147,115,.2); border-radius: 10px; padding: 16px 18px; margin: 0 0 16px; }
.pb-list { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: 0 clamp(36px, 5vw, 72px); }
@media (min-width: 52rem) { .pb-list { grid-template-columns: 1fr 1fr; } }
.pb-list > li { padding: 24px 0 26px; border-top: 1px solid var(--pb-line); }
.pb-list h3 { margin: 0 0 9px; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; color: var(--pb-ink); line-height: 1.3; }
.pb-list p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--pb-muted); max-width: 52ch; }
.pb-panel--dark .pb-list > li { border-color: rgba(255,255,255,.1); }
.pb-panel--dark .pb-list h3 { color: #fff; }
.pb-panel--dark .pb-list p { color: rgba(255,255,255,.68); }
/* ---- la séquence : trois temps, en lignes (jamais trois colonnes ragged) ---- */
.pb-seq { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; }
.pb-seq > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 46rem) { .pb-seq > li { grid-template-columns: 34px minmax(0, 24ch) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); align-items: baseline; padding: 24px 0; } }
.pb-seq > li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.pb-seq__n { font-family: var(--font-mono); font-size: 12px; color: var(--pb-em-light); }
.pb-seq h3 { margin: 0; font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.3; color: #fff; }
.pb-seq p { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 54ch; grid-column: 2 / -1; }
@media (min-width: 46rem) { .pb-seq p { grid-column: 3; } }
.pb-prompts { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: 14px; }
.pb-prompt { border-radius: var(--pb-r-sm); overflow: hidden; background: var(--pb-ink); }
.pb-prompt__q { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; margin: 0; padding: 18px 22px;
  font-family: var(--font-mono); font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.94); }
.pb-prompt__m { color: var(--pb-em-light); }
.pb-prompt p { margin: 0; padding: 14px 22px 16px; background: rgba(255,255,255,.06); font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.pb-facts { display: grid; gap: 0; margin: clamp(28px, 4vw, 48px) 0 0; }
@media (min-width: 52rem) { .pb-facts { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 4vw, 56px); } }
.pb-facts > div { padding: 22px 0; border-top: 1px solid var(--pb-line); }
.pb-facts dt { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--pb-ink); margin-bottom: 8px; letter-spacing: -.015em; }
.pb-facts dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--pb-muted); }

/* ---- le téléphone : l'en-tête tient sans rien perdre ----
   Mesuré à 390 px avant cette règle : `.pb-ghost` finissait à 445 px, soit
   55 px hors cadre, et la page entière scrollait latéralement — sur les trois
   pages, l'en-tête étant partagé. La maquette n'a pas de traitement mobile.
   Rien n'est retiré ici : le mot-marque se replie sur le « prompt », qui EST
   la marque, et les rythmes se resserrent. La nav et « Mon espace » restent
   atteignables — masquer l'une aurait coupé le passage entre les deux pages,
   masquer l'autre la porte du client. */
@media (max-width: 46rem) {
  .pb-head { height: 64px; gap: 12px; padding: 0 16px; }
  .pb-brand b { display: none; }
  .pb-nav { gap: 18px; }
  .pb-nav a { font-size: 14px; }
  .pb-ghost { height: 36px; padding: 0 14px; font-size: 13px; }

  /* `.pb-btn` est en `white-space: nowrap` : son min-content devient un
     plancher que la piste de grille ne peut pas passer, et un libellé long
     (« Décrire une tâche répétitive ») déborde le cadre à 320 px. On laisse le
     libellé se replier plutôt que d'élargir la page. Vaut pour la CLASSE : tout
     bouton long, pas seulement celui d'aujourd'hui. Au-dessus de ce point, ou
     quand le libellé tient sur une ligne, le rendu est inchangé. */
  .pb-btn { white-space: normal; height: auto; min-height: 54px; padding: 13px 24px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) { .pb-btn, .pb-link i, .pb-ghost { transition: none; } }