/* Public pages: about, pricing, showcase, privacy, terms — always light, like the home page */
:root { --bg:#fbfbfa; --fg:#1d1d1b; --muted:#6b6b67; --faint:#a3a39e; --line:#ebebe7; --line2:#dcdcd6; --card:#fff; }
* { box-sizing:border-box; }
html, body { margin:0; }
body { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font:15px/1.6 "Geist", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.top { --t:0; position:relative; z-index:10; margin-top:20px; padding:0 16px; }
.top nav { display:flex; align-items:center; justify-content:space-between; gap:20px; width:max-content; max-width:100%; margin:0 auto; padding:6px 6px 6px 14px; border:0; border-radius:999px;
  background:color-mix(in srgb, #1d1d1b calc(var(--t) * 100%), rgb(255 255 255 / .6)); color:color-mix(in srgb, #fff calc(var(--t) * 100%), #1d1d1b);
  -webkit-backdrop-filter:blur(calc((1 - var(--t)) * 14px)) saturate(1.4); backdrop-filter:blur(calc((1 - var(--t)) * 14px)) saturate(1.4); } /* pilule ; fonce en défilant (assets/menu.js) */
.top .brand img { filter:invert(var(--t)); }
.brand { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; letter-spacing:-.03em; text-decoration:none; }
.brand img { width:24px; height:24px; display:block; }
.links { display:flex; gap:2px; font-size:14px; }
.links a { padding:6px 11px; border-radius:999px; color:color-mix(in srgb, #fff calc(var(--t) * 100%), #4b4f5c); text-decoration:none; }
.links a:hover { color:color-mix(in srgb, #fff calc(var(--t) * 100%), #1d1d1b); }
.links a.on { color:color-mix(in srgb, #fff calc(var(--t) * 100%), #1d1d1b); font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.doc { flex:1; width:min(720px, 100%); margin:0 auto; padding:64px 20px 72px; }
.doc h1 { margin:0 0 12px; font-size:clamp(30px, 5vw, 44px); font-weight:500; letter-spacing:-.04em; line-height:1.1; }
.doc .lede { margin:0 0 36px; color:var(--muted); font-size:17px; }
.doc h2 { margin:34px 0 8px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.doc p, .doc li { color:color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.doc ul { padding-left:20px; }
.doc blockquote { margin:0 0 20px; padding:2px 16px; border-left:3px solid color-mix(in srgb, var(--fg) 20%, var(--bg)); }
.doc a { color:inherit; text-underline-offset:2px; }
.btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 24px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; font-size:14.5px; text-decoration:none; }
.btn:hover { opacity:.88; }
.btn.ghost { background:transparent; color:var(--fg); border:1px solid var(--line2); }
.doc a.btn { color:var(--bg); } .doc a.btn.ghost { color:var(--fg); } /* « .doc a » ne doit pas repeindre le texte des boutons */
.plans { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-top:8px; }
.plan { display:flex; flex-direction:column; padding:24px; background:#ececea; border:0; border-radius:7px; }
.plan h2 { margin:0; font-size:15px; font-weight:600; }
.plan .prix { margin:10px 0 4px; font-size:38px; font-weight:600; letter-spacing:-.04em; line-height:1; }
.plan .prix small { font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0; }
.plan p.sous { margin:0 0 18px; color:var(--muted); font-size:14px; }
.plan ul { flex:1; margin:0 0 22px; padding:0; list-style:none; }
.plan li { display:flex; gap:10px; padding:5px 0; font-size:14.5px; }
.plan li::before { content:"✓"; flex:none; font-weight:700; }
.shows { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.show { display:flex; align-items:center; gap:14px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:7px; text-decoration:none; transition:border-color .15s; }
.show:hover { border-color:var(--fg); }
.show b { display:block; font-size:16px; letter-spacing:-.01em; }
.show span { color:var(--muted); font-size:13.5px; }
.show i { margin-left:auto; font-style:normal; color:var(--faint); }
.show .pic { flex:none; width:48px; height:48px; border-radius:50%; background:var(--line); display:grid; place-items:center; font-weight:600; }
.show.vide { justify-content:center; color:var(--muted); text-align:center; }
.foot { display:flex; justify-content:center; gap:10px; padding:28px 16px 32px; color:var(--faint); font-size:13px; }
.foot a { color:var(--muted); text-decoration:none; }
.foot a:hover { color:var(--fg); text-decoration:underline; }
@media (max-width:640px) { .plans, .shows { grid-template-columns:1fr; } .doc { padding-top:44px; } }

/* showcase: live preview of each website */
.shows { grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.show.vitrine { flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.show .pv { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:var(--line); border-bottom:1px solid var(--line); pointer-events:none; }
.show .pv iframe { position:absolute; top:0; left:0; width:960px; height:600px; border:0; transform-origin:0 0; background:#fff; }
.show .legende { display:flex; align-items:center; gap:12px; padding:14px 18px; }
.show .legende i { margin-left:auto; font-style:normal; color:var(--faint); }
.show.vide { min-height:120px; }

@media (max-width:520px) { .top nav { gap:8px; padding-left:10px; } .brand { font-size:16px; } .links a { padding:6px 7px; font-size:13px; } }

/* mobile: top bar with the logo on the left and a Menu button on the right */
.menu-btn { display:none; align-items:center; gap:10px; height:44px; padding:0 18px; border:1px solid var(--line2); border-radius:999px; background:var(--card); color:var(--fg); font:inherit; font-size:16px; cursor:pointer; }
.menu-btn span { font-size:18px; line-height:1; }
@media (max-width:640px) {
  .top { position:relative; top:auto; margin-top:0; padding:env(safe-area-inset-top) 0 0; border-bottom:1px solid var(--line); background:var(--bg); }
  .top nav { width:100%; max-width:none; padding:14px 20px; background:transparent; color:var(--fg); border:0; border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .brand { font-size:20px; }
  .brand img { width:22px; height:22px; } /* sur téléphone, le logo du menu reste discret */
  .menu-btn { display:inline-flex; }
  .links { display:none; }
  .top.open .links { display:flex; flex-direction:column; gap:2px; position:absolute; left:0; right:0; top:100%; z-index:20; padding:8px 14px 16px; background:var(--bg); border-bottom:1px solid var(--line); font-size:17px; }
  .links a, .links a:hover, .links a.on { padding:13px 10px; color:var(--fg); }
  .top .brand img { filter:none; }
}

/* Penbar Ray: the gradient of the arc at the bottom of product pages, as a straight band crossing the page at a slight angle */
.penbar-ray { width:120vw; height:24px; margin-left:calc(50% - 60vw); pointer-events:none; transform:none;
  background:conic-gradient(#0a0a0a 25%, transparent 0 50%, #0a0a0a 0 75%, transparent 0) 0 0/24px 100% repeat-x; }
@media (max-width:640px) { .penbar-ray { height:24px; transform:none; } }
.avec-ray { position:relative; overflow:clip; }
html:has(> body.avec-ray) { overflow-x:clip; }
@media (max-width:640px) {  } /* sur mobile, elle passerait derrière le contenu */

/* centered page (pricing): titles, card and notes in the middle */
.doc.centre { text-align:center; }
.doc.centre .plans { grid-template-columns:minmax(0, 440px); justify-content:center; }
.doc.centre .plan { text-align:left; }

/* curved Penbar Ray (about): the same colors along a wave crossing the page between two blocks, drawn as parallel strokes softly blurred together */
.penbar-ray.courbe { display:block; width:120vw; height:220px; margin:28px 0 28px calc(50% - 60vw); transform:none; background:none; overflow:visible; }
@media (max-width:640px) { .penbar-ray.courbe { height:150px; } }

/* boutons secondaires : gris #dadada plein */
.btn.ghost, .menu-btn { background:#ececea; border-color:#ececea; color:#1d1d1b; }
.btn.ghost:hover, .menu-btn:hover { background:#e2e2df; border-color:#e2e2df; color:#1d1d1b; }

/* survol : le texte passe en gras (gras simulé quand un vrai gras ferait bouger la mise en page) */
.links a:hover, .foot a:hover, .btn:hover, .bouton:hover, .menu-btn:hover, .brand:hover, .sv-btn:hover, .sv-plats a:hover, .cat-plats button:hover, .sv-reponse a:hover, .sv-bio a:hover, .sv-vide a:hover, .sv-fil a:hover { text-shadow:0 0 .55px currentColor, 0 0 .55px currentColor; }
.sv-faq summary:hover .sv-q, .sv-liste a:hover .sv-q, .sv-auteur:hover b { font-weight:700; }

/* ===== Système commun (19/10/2026) : même menu, mêmes cartes, mêmes tailles sur toutes les pages publiques ===== */
:root { --trait:#e0e0dc; --trait-champ:#e3e3df; }
/* menu du haut : pilule fixe en haut de la page, qui part avec le défilement (seule la page d'accueil a un menu flottant qui fonce) */
.top { --t:0; position:relative; z-index:10; padding:0 16px; margin-top:20px; }
.top nav { border-radius:999px; background:color-mix(in srgb, #1d1d1b calc(var(--t) * 100%), rgb(255 255 255 / .6)); color:color-mix(in srgb, #fff calc(var(--t) * 100%), var(--fg));
  -webkit-backdrop-filter:blur(calc((1 - var(--t)) * 14px)) saturate(1.4); backdrop-filter:blur(calc((1 - var(--t)) * 14px)) saturate(1.4); }
.top .brand img { filter:invert(var(--t)); }
@media (min-width:641px) {
  .top .links a { color:color-mix(in srgb, #fff calc(var(--t) * 100%), var(--muted)); }
  .top .links a.on, .top .links a:hover { color:color-mix(in srgb, #fff calc(var(--t) * 100%), var(--fg)); }
}
@media (max-width:640px) {
  /* téléphone : barre pleine largeur avec un trait en bas, menu déroulant ; pas de fondu */
  .top { position:relative; top:auto; margin-top:0; padding:env(safe-area-inset-top) 0 0; border-bottom:1px solid var(--line); background:var(--bg); }
  .top nav { width:100%; max-width:none; padding:14px 20px; background:transparent; color:var(--fg); border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .top .brand img { filter:none; }
}
/* cartes et encarts : pas de fond, un trait fin */
.plan, .show, .carte { background:none; border:1px solid var(--trait); border-radius:10px; box-shadow:none; } /* grilles de cartes (offres, vitrines) : le cadre regroupe chaque carte */
.show:hover { background:#efefec; }
/* boutons : taille moyenne (36 px) ; le noir pour l'action clé, le gris plein sinon */
.btn { height:36px; padding:0 18px; font-size:14px; }
.btn.ghost, .menu-btn { background:#ececea; border-color:#ececea; }
.btn.ghost:hover, .menu-btn:hover { background:#e2e2df; border-color:#e2e2df; }
/* champs de saisie : blancs, trait fin, coins 8 px, halo léger au focus */
.champ-saisie, .doc input, .doc textarea { box-sizing:border-box; display:block; width:100%; height:40px; padding:0 12px; border:1px solid var(--trait-champ); border-radius:8px; background:#fff; color:var(--fg); font:inherit; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.champ-saisie:focus, .doc input:focus, .doc textarea:focus { border-color:var(--fg); box-shadow:0 0 0 3px rgb(29 29 27 / .08); }
/* titres de page : une seule échelle */
.doc h1 { font-size:clamp(30px, 5vw, 44px); }