/* Styles de la page d'accueil, servis TELS QUELS (aucune transformation par Next.js) : c'est ce qui garantit
   que le passage en React ne change rien à l'écran. Copie exacte du bloc <style> du site publié le 2026-10-15
   (commit 1984e8e). Les adresses url(propria-assets/…) sont relatives à ce fichier, posé à la racine du site. */
/* ── Polices : hébergées sur le site (fichiers dans propria-assets/), aucun appel à Google Fonts.
   Bloc fabriqué par references/propria/dependances/installer.py : ne pas le retoucher à la main. ── */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/cormorant-garamond-600-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/cormorant-garamond-600-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/cormorant-garamond-600-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/cormorant-garamond-600-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(propria-assets/instrument-sans-500-italique-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(propria-assets/instrument-sans-500-italique-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 500; font-display: swap; src: url(propria-assets/shippori-mincho-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 500; font-display: swap; src: url(propria-assets/shippori-mincho-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/shippori-mincho-600-jp107.woff2) format('woff2'); unicode-range: U+23, U+3c, U+2192, U+4e45, U+4efb, U+4f50, U+4f8b, U+4fc2, U+5024, U+5150, U+5272, U+5370, U+53bb, U+542b, U+56db, U+56e3, U+57ce, U+5bc4, U+5bcc, U+5f71, U+60aa, U+6238, U+6280, U+629c, U+6539, U+66ff, U+670d, U+677e-677f, U+6839, U+69cb, U+6b4c, U+6bb5, U+6e96, U+6f14, U+72ec, U+7389, U+7814, U+79cb, U+79d1, U+79fb, U+7a0e, U+7d0d, U+85e4, U+8d64, U+9632, U+96e2, U+9805, U+99ac, U+ff1e; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/shippori-mincho-600-jp108.woff2) format('woff2'); unicode-range: U+2605-2606, U+301c, U+4e57, U+4fee, U+5065, U+52df, U+533b, U+5357, U+57df, U+58eb, U+58f0, U+591c, U+592a-592b, U+5948, U+5b85, U+5d0e, U+5ea7, U+5ff5, U+6025, U+63a1, U+63a5, U+63db, U+643a, U+65bd, U+671d, U+68ee, U+6982, U+6b73, U+6bd4, U+6d88, U+7570, U+7b11, U+7d76, U+8077, U+8217, U+8c37, U+8c61, U+8cc7, U+8d85, U+901f, U+962a, U+9802, U+9806, U+9854, U+98f2, U+9928, U+99c5, U+9ed2; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/shippori-mincho-600-jp114.woff2) format('woff2'); unicode-range: U+3e, U+3005, U+4e0d, U+4e88, U+4ecb, U+4ee3, U+4ef6, U+4fdd, U+4fe1, U+500b, U+50cf, U+5186, U+5316, U+53d7, U+540c, U+544a, U+54e1, U+5728, U+58f2, U+5973, U+5b89, U+5c71, U+5e02, U+5e97, U+5f15, U+5fc3, U+5fdc, U+601d, U+611b, U+611f, U+671f, U+6728, U+6765, U+683c, U+6b21, U+6ce8, U+6d3b, U+6d77, U+7530, U+7740, U+7acb, U+7d50, U+826f, U+8f09, U+8fbc, U+9001, U+9053, U+91ce, U+9762, U+98df; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/shippori-mincho-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 600; font-display: swap; src: url(propria-assets/shippori-mincho-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/shippori-mincho-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Shippori Mincho'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/shippori-mincho-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 400; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 500; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Zen Kaku Gothic New'; font-style: normal; font-weight: 700; font-display: swap; src: url(propria-assets/zen-kaku-gothic-new-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ── fin des polices ── */

/* ── Tokens : tirés de l'image (aube sur le Fuji) ───────────────────────── */
:root {
  --night: #070d1c;
  --navy: #0d1830;
  --cream: #f3ede4;
  --cream-dim: rgba(243, 237, 228, .74);
  --cream-faint: rgba(243, 237, 228, .5);
  --line: rgba(243, 237, 228, .18);
  --gold: #f2d6a2;   /* or pâle du soleil : le symbole, le bouton principal, le contour du bouton du menu, les traits du parcours */

  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --serif-text: "Cormorant Garamond", Georgia, serif;   /* tous les paragraphes de la page */
  --button: "Instrument Sans", "Zen Kaku Gothic New", system-ui, sans-serif;   /* boutons : linéale en vrai italique (choisie sur la planche propria-polices-boutons.html) */
  /* tailles des paragraphes : agrandies dans l'atelier propria-atelier.html le 2026-10-06 (+15 %, +24 %, +21 %) */
  --text-lead: clamp(24px, 1.7266vw, 27px);       /* phrase d'introduction sous un titre */
  --text-body: clamp(23.6px, 1.6467vw, 26.7px);   /* paragraphe courant */
  --text-note: clamp(20.6px, 1.452vw, 23.6px);    /* notes et lignes courtes */

  --gutter: clamp(20px, 6vw, 96px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Cormorant dessine les chiffres à l'ancienne par défaut (« 30 » se lisait « 3o ») : chiffres modernes partout.
   !important, car chaque raccourci `font:` remet ce réglage à zéro. */
* { font-variant-numeric: lining-nums !important; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: none; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; }

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }

/* ── Le monde : paysage fixe derrière toute la page ─────────────────────── */
.world {
  position: fixed; inset: 0; z-index: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  background: var(--night);
  container-type: size;
}
/* La scène garde le ratio de l'image (2688×1520) et se comporte comme un
   object-fit: cover — le CSS seul aligne fond et premier plan, sans JS. */
.stage {
  --fx: .8; --fy: .5;               /* écran moins large que 16:9 : on garde l'arbre et toi dans le cadre */
  position: absolute;
  width: max(100cqw, 176.842cqh);
  aspect-ratio: 2688 / 1520;
  left: calc((100cqw - max(100cqw, 176.842cqh)) * var(--fx));
  top: calc((100cqh - max(100cqh, 56.548cqw)) * var(--fy));
}
.stage .bg, .stage .gl { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 53% 47%; }
.stage .gl { opacity: 0; transition: opacity .8s ease; }
.stage .gl.ready { opacity: 1; }

/* Premier plan : arbre + toi + colline (marges de 48 px en miroir pour la parallaxe) */
.fg {
  position: absolute;
  left: 23.4747%; top: -3.1579%;
  width: 78.3110%; height: 106.3158%;
  transform-origin: 37.70% 47.18%;
  will-change: transform, opacity;
}
.fg img { width: 100%; height: 100%; }
.glow {
  position: absolute; left: 75.58%; top: 75.80%;
  width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 196, 140, .55), rgba(255, 150, 95, .18) 45%, transparent 100%);
  mix-blend-mode: screen; pointer-events: none;
  animation: glow 4.2s ease-in-out infinite alternate;
}
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }

/* « C'est moi » : étiquette posée dans la scène, au-dessus de ta tête */
.tag {
  position: absolute; left: 81.2%; top: 61.5%;
  transform: translate(-50%, -100%);
  display: grid; justify-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.tag span {
  font: 500 12px/1 var(--sans); letter-spacing: .14em; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(243, 237, 228, .92); color: var(--night);
}
.tag::after { content: ""; width: 1px; height: 46px; background: linear-gradient(var(--cream), transparent); }

.dim, .shade, .veil, .petals { position: absolute; inset: 0; pointer-events: none; }
.dim { background: var(--night); opacity: 0; }
.veil { display: none; background: var(--night); opacity: 0; }   /* téléphone seulement : voile le paysage pour la lecture, sous les pétales (script) */
.shade {                              /* lisibilité du texte : fixe, à gauche seulement, aucune bande */
  background: linear-gradient(90deg, rgba(7,13,28,.68) 0%, rgba(7,13,28,.38) 32%, rgba(7,13,28,.08) 58%, rgba(7,13,28,0) 70%);
}
.petals { width: 100%; height: 100%; }

main { position: relative; z-index: 1; }

/* ── Navigation : une capsule en verre dépoli, centrée, un peu descendue ──
   Le flou garde le menu lisible partout, même quand un texte passe dessous en remontant ; aucune bande pleine largeur. */
.nav {
  --nav-top: clamp(16px, 3.4vh, 36px);
  position: fixed; inset: var(--nav-top) 0 auto 0; z-index: 20;
  width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(26px, 2.8vw, 48px);
  padding: 8px 8px 8px 26px; border-radius: 999px;
  background: rgba(7, 13, 28, .32); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .6s var(--ease-out), background .6s var(--ease-out);
}
.nav.is-hidden { transform: translateY(calc(-100% - var(--nav-top) - 12px)); }   /* se retire quand on descend */
.nav.is-scrolled { background: rgba(7, 13, 28, .56); }   /* au-dessus du contenu : fond plus dense */
.brand { font: 600 clamp(16px, 1.54vw, 18.4px)/1 var(--serif); letter-spacing: .28em; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 24px; height: 24px; fill: var(--gold); }   /* ensō : le cercle tracé d'un seul geste au pinceau */
.nav-links { display: flex; gap: clamp(22px, 2.3vw, 38px); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font: 500 clamp(17px, 1.63vw, 19.5px)/1 var(--serif); white-space: nowrap; text-decoration: none;
  text-shadow: 0 0 0 rgba(250, 239, 218, 0), 0 0 0 rgba(242, 214, 162, 0), 0 0 0 rgba(242, 214, 162, 0);   /* lueur éteinte : mêmes couches qu'au survol, pour un fondu sans à-coup */
  transition: color .35s, text-shadow .35s;
}
.nav-links a:hover, .nav-links a:focus-visible {   /* survol : légère surbrillance, la même lumière que la vague des noms de métiers */
  color: rgb(251, 249, 246);
  text-shadow: 0 0 5.05px rgba(250, 239, 218, .35), 0 0 14.14px rgba(242, 214, 162, .35), 0 0 36.06px rgba(242, 214, 162, .35);
}
.nav-cta {   /* dans le menu : contour or pâle (l'or plein est réservé au bouton du haut de page), se remplit au survol */
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font: italic 500 clamp(14.5px, 1.4vw, 16.7px)/1 var(--button); text-decoration: none;
  background: rgba(242, 214, 162, .08); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold);
  transition: background .45s var(--ease-out), color .45s;
}
.nav-cta:hover { background: var(--gold); color: var(--night); }
/* Menu du téléphone (menu 3 de la planche propria-planche-telephone.html, 2026-10-14) : absent sur ordinateur et tablette */
.menu-rond, .menu-voile, .menu-panneau { display: none; }

/* ── Éléments communs ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 26px; border-radius: 999px;
  font: italic 500 17.7px/1 var(--button); text-decoration: none;   /* même lettrage que « En savoir plus » */
  transition: background .45s var(--ease-out), color .45s, border-color .45s;
}
.btn svg { width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--gold); color: var(--night); }   /* l'action principale : plein or pâle, la couleur du symbole */
.btn-primary:hover { background: var(--cream); }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); background: rgba(243,237,228,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: rgba(243,237,228,.6); }
.mask { display: block; overflow: hidden; padding-bottom: .26em; margin-bottom: -.26em; }   /* jambages du serif (j, p, q) jamais coupés */
.mask > span { display: inline-block; text-wrap: balance; }   /* lignes équilibrées, jamais un mot seul */
.legible { text-shadow: 0 1px 24px rgba(7, 13, 28, .55); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; height: 100svh; min-height: 540px; }
.hero-content {
  position: absolute; left: var(--gutter); bottom: clamp(76px, 10svh, 120px);
  width: min(780px, calc(100% - 2 * var(--gutter)));
}
.title { margin: 0 0 22px; max-width: 11.5em; font: 500 clamp(34px, min(3.9vw, 6.4vh), 62px)/1.08 var(--serif); letter-spacing: -.012em; }   /* une seule phrase, sur 2 lignes, jamais sur le soleil (le bénéfice est porté par la phrase du dessous) ; se réduit sur un écran peu haut */
.lede { margin: 0; max-width: 38ch; font: 600 var(--text-lead)/1.7 var(--serif-text); color: var(--cream); text-wrap: pretty; }
.hero .lede { max-width: 44ch; line-height: 1.5; }   /* ce que vous gagnez : lisible d'un coup d'œil ; interligne resserré, le hero tient dans un écran */
.assure { margin: 14px 0 0; max-width: 60ch; font: 600 var(--text-note)/1.5 var(--serif-text); color: var(--cream); text-wrap: pretty; }
.assure strong { display: block; font-weight: 700; text-wrap: balance; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
/* les réseaux, à côté des boutons : même matière que le bouton en contour (trait fin, verre) */
.socials { display: flex; gap: 8px; margin: 0 0 0 8px; padding: 0; list-style: none; }
.socials a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(243,237,228,.06); color: var(--cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .45s, color .45s;
}
.socials a:hover { border-color: rgba(243,237,228,.6); color: var(--gold); }
.socials svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.socials svg .plein { fill: currentColor; stroke: none; }
.caption {
  position: absolute; right: var(--gutter); bottom: 34px; margin: 0;
  display: flex; align-items: center; gap: 12px;
  font: 400 12px/1 var(--sans); letter-spacing: .14em; color: var(--cream-dim);
}
.caption::before { content: ""; width: 28px; height: 1px; background: var(--line); }
.caption b { font: 600 13px/1 var(--serif); letter-spacing: .18em; color: var(--cream); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font: 500 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--cream-dim); text-decoration: none;
}
.scroll-cue i { width: 1px; height: 38px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--cream); animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { to { top: 100%; } }

/* ── Ce que j'apporte : trois métiers côte à côte, détails à la demande ──
   Réglages validés dans l'atelier propria-section2.html le 2026-10-05 : tout centré, paragraphes en Cormorant Garamond,
   noms en gras, bouton en contour avec « + », paysage assombri de 20 %. Version d'avant : references/propria/archive/.
   Les tailles sont celles d'un grand écran et se réduisent en proportion sur les fenêtres plus étroites. */
.apport { position: relative; padding: 24vh var(--gutter) 20vh; overflow-x: clip; }   /* le voile des métiers dépasse de 1 à 3 px à droite : sans ça la page défile de côté */
.apport::before {   /* paysage assombri de 20 % derrière la section ; fondu en haut et en bas, donc aucune bande visible */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,13,28,0), rgba(7,13,28,.2) 22vh, rgba(7,13,28,.2) calc(100% - 18vh), rgba(7,13,28,0));
}
.apport-title { margin: 0 0 22px; font: 500 clamp(34px, 3.643vw, 60px)/1.1 var(--serif); letter-spacing: -.01em; }   /* 34 px sur téléphone : « Un seul écosystème. » tient sur une ligne */
.apport-title span { display: block; }
.apport-lead { margin: 0; max-width: 46ch; font: 600 var(--text-lead)/1.7 var(--serif-text); color: var(--cream); text-wrap: pretty; }
/* trois blocs côte à côte ; lignes alignées d'une colonne à l'autre (nom, bénéfice, bouton, détails) */
.metiers {
  margin: clamp(52.8px, 8.53vh, 91px) 0 0; max-width: 1700px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(44px, 5.342vw, 88px);
}
/* Cadres (réglages de l'atelier, 2026-10-06) : chaque métier dans un cadre sombre à trait or pâle.
   Le cadre est en deux morceaux collés, le haut (nom, bénéfice, bouton) et le bas (les détails) : les lignes du haut restent
   alignées d'une colonne à l'autre, mais chaque bas a sa propre hauteur, donc seul le métier ouvert s'allonge. */
.metiers { --cadre-pad: clamp(16px, 1.5625vw, 30px); --cadre-fond: rgba(7, 13, 28, .29); --cadre-trait: rgba(242, 214, 162, .32); --cadre-rayon: 6px; }
.metier { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; isolation: isolate; padding: var(--cadre-pad) var(--cadre-pad) 0; }
.metier > * { grid-column: 1; }
.metier-name { grid-row: 1; } .metier-gain { grid-row: 2; } .more { grid-row: 3; } .metier-more { grid-row: 4; }
.metier::before {   /* le haut du cadre : derrière les trois premières lignes, il déborde dans la marge intérieure */
  content: ""; grid-area: 1 / 1 / 4 / 2; z-index: -1; justify-self: stretch;
  margin: calc(-1 * var(--cadre-pad)) calc(-1 * var(--cadre-pad)) 0;
  background: var(--cadre-fond); border: 1px solid var(--cadre-trait); border-bottom: 0; border-radius: var(--cadre-rayon) var(--cadre-rayon) 0 0;
}
/* lisibilité : voile sombre très diffus derrière la rangée (aucun bord visible), qui passe avec le texte */
.metiers { position: relative; isolation: isolate; }
.metiers::before {
  content: ""; position: absolute; z-index: -1; inset: -28% -7% -32% -7%; pointer-events: none;
  background: rgba(7,13,28,.3);   /* même voile sur les 3 colonnes, fondu sur tous les bords (30 % : réglage de l'atelier) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.metier-name { margin: 0 0 12px; align-self: end; font: 700 clamp(17.6px, max(1.89vw - .5px, 2.54vw - 10.7px), 37.2px)/1.12 var(--serif); letter-spacing: -.01em; white-space: nowrap; }   /* les trois noms sur une seule ligne et dans leur cadre, de 961 px à très large : la taille suit la largeur intérieure du cadre (le nom le plus long, « Outils & Automatisation », fait 11,84 fois sa taille) */
.metier-gain { margin: 0; font-size: clamp(17.7px, 1.3301vw, 21.1px); line-height: 1.5; color: var(--cream); text-wrap: pretty; }
/* surbrillance des noms : une seule vague de lumière parcourt les trois noms lettre par lettre, de gauche à droite,
   et repart du premier dès qu'elle quitte le dernier (aucun temps de repos).
   Lettres découpées et comptées en JS ; en pause hors de l'écran ; absente si « réduire les animations » est activé. */
.motion .metier-name span { animation: name-wave calc(var(--letters, 58) * 46ms + 3s) calc(.9s + var(--i) * 46ms) infinite both paused; }
.motion .metiers.is-live .metier-name span { animation-play-state: running; }
@keyframes name-wave {   /* la lettre s'éclaire vite, revient doucement, puis attend que la vague refasse le tour */
  /* réglages de l'atelier (2026-10-06) : 46 ms par lettre, 23 lettres éclairées à la fois, lueur or pâle à 35 %, lettre blanchie à 66 %,
     3 s de pause entre deux vagues. Les pourcentages valent pour 58 lettres (tour de 5,668 s) : montée 296 ms, retour à 1 058 ms. */
  0%          { color: var(--cream);       text-shadow: 0 1px 24px rgba(7, 13, 28, .55), 0 0 0 rgba(250, 239, 218, 0), 0 0 0 rgba(242, 214, 162, 0), 0 0 0 rgba(242, 214, 162, 0); animation-timing-function: ease-out; }
  5.23%       { color: rgb(251, 249, 246); text-shadow: 0 1px 24px rgba(7, 13, 28, .55), 0 0 5.05px rgba(250, 239, 218, .35), 0 0 14.14px rgba(242, 214, 162, .35), 0 0 36.06px rgba(242, 214, 162, .35); animation-timing-function: ease-out; }
  18.67%, to  { color: var(--cream);       text-shadow: 0 1px 24px rgba(7, 13, 28, .55), 0 0 0 rgba(250, 239, 218, 0), 0 0 0 rgba(242, 214, 162, 0), 0 0 0 rgba(242, 214, 162, 0); }
}
.more {   /* bouton en contour ; une fois ouvert, le texte s'efface et il ne reste qu'un petit « − » rond pour refermer */
  display: none; justify-self: start; align-self: start; align-items: center; gap: .7em; margin: 14px 0 0; padding: .8em 1.25em;
  font: italic 500 17.7px/1 var(--button); color: var(--cream);
  background: rgba(243, 237, 228, .06); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .3s, border-color .3s, gap .45s var(--ease-out), padding .45s var(--ease-out);
}
.js .more { display: inline-flex; }
.more:hover, .more[aria-expanded="true"] { color: #fff; }
.more:hover { border-color: rgba(243, 237, 228, .6); }
.more-label { display: inline-block; max-width: 8em; padding-right: .06em; overflow-x: clip; white-space: nowrap; transition: max-width .45s var(--ease-out), opacity .25s; }
.more-sign { position: relative; flex: none; width: .75em; height: 1em; }   /* « + » en deux traits : le vertical s'efface à l'ouverture, il reste « − » */
.more-sign::before, .more-sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .45s var(--ease-out); }
.more-sign::after { transform: rotate(90deg); }
.more[aria-expanded="true"] { gap: 0; padding-inline: .925em; }   /* aussi large que haut : un rond */
.more[aria-expanded="true"] .more-label { max-width: 0; padding-right: 0; opacity: 0; }
.more[aria-expanded="true"] .more-sign::after { transform: rotate(90deg) scaleX(0); }
.metier-more {   /* les détails, et le bas du cadre : fermé, il ne reste que la marge sous le bouton */
  display: grid; grid-template-rows: 1fr; align-self: start; justify-self: stretch;   /* sans JS : tout est lisible */
  margin-inline: calc(-1 * var(--cadre-pad)); padding: 0 calc(var(--cadre-pad) - 1px) calc(var(--cadre-pad) - 1px);
  background: var(--cadre-fond); border: 1px solid var(--cadre-trait); border-top: 0; border-radius: 0 0 var(--cadre-rayon) var(--cadre-rayon);
}
.metier-more > div { overflow: hidden; }
.js .metier-more { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.js .metier-more > div { visibility: hidden; transition: visibility 0s .55s; }   /* fermé : hors lecture d'écran */
.js .metier.is-open .metier-more { grid-template-rows: 1fr; }
.js .metier.is-open .metier-more > div { visibility: visible; transition-delay: 0s; }
.metier-tags { margin: 16px 0 8px; max-width: 36ch; text-wrap: pretty; font: 500 18.3px/1.43 var(--serif); letter-spacing: .02em; color: var(--gold); }
.metier-text { margin: 0; max-width: 39ch; font: 600 var(--text-body)/1.7 var(--serif-text); color: var(--cream-dim); text-wrap: pretty; }
.suivi { margin: clamp(64px, 11vh, 112px) 0 0; }
.suivi-title { margin: 0 0 12px; font: 600 clamp(24.5px, 2.1204vw, 33.5px)/1.3 var(--serif); color: var(--cream); }
.suivi-title span { display: block; }
.suivi p:not(.suivi-title) { margin: 0; max-width: 29em; font: 700 clamp(22.4px, 1.6422vw, 25.4px)/1.7 var(--serif-text); color: var(--cream); text-wrap: pretty; }   /* 29em : trois lignes sur grand écran */
.suivi .ensemble { white-space: nowrap; }   /* « Vous restez propriétaire de tout, » reste sur une seule ligne */
@media (min-width: 961px) {   /* grand écran : toute la section centrée ; sur téléphone le texte reste à gauche */
  .apport-inner { text-align: center; }
  .apport-lead, .metiers, .metier-tags, .metier-text, .suivi p:not(.suivi-title) { margin-inline: auto; }
  .metier { justify-items: center; }
  .more { justify-self: center; }
  .suivi .ctas { justify-content: center; }
}

/* ── Projets : flottent dans le ciel, à des profondeurs différentes ─────── */
.projets {
  display: grid; grid-template-columns: minmax(260px, 4fr) 7fr; gap: clamp(32px, 5vw, 96px);
  padding: 22vh var(--gutter) 26vh;
}
.projets-head { position: sticky; top: 22vh; align-self: start; }
.projets-head h2 { margin: 0 0 20px; font: 500 clamp(34px, 3.4vw, 56px)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.projets-head p { margin: 0; max-width: 38ch; font: 600 var(--text-lead)/1.7 var(--serif-text); color: var(--cream); text-wrap: pretty; }   /* deux lignes, pas trois bouts de phrase */
.projets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.projets-grid .col { display: grid; gap: clamp(28px, 5vw, 72px); }
.projets-grid .col:nth-child(2) { margin-top: 22vh; }
.projets-suite { grid-column: 1 / -1; margin: clamp(4px, 1.5vh, 18px) 0 0; font: 600 var(--text-note)/1.4 var(--serif-text); color: var(--cream-dim); text-align: center; }   /* sous les deux colonnes */
.projet { display: block; text-decoration: none; }
.projet figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; background: var(--navy); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.projet img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.1s var(--ease-out); }
.projet:hover img { transform: scale(1.07); }
.projet .badge {
  position: absolute; top: 14px; left: 14px;
  font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 999px; background: rgba(7,13,28,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.projet-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; }
.projet h3 { margin: 0; font: 500 clamp(20px, 1.7vw, 26px)/1.2 var(--serif); }
.projet p { margin: 6px 0 0; font: 600 var(--text-note)/1.4 var(--serif-text); color: var(--cream-dim); }
.projet .arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .45s, border-color .45s, color .45s; }
.projet .arrow svg { width: 14px; height: 14px; }
.projet:hover .arrow { background: var(--cream); color: var(--night); border-color: var(--cream); }
.projet p strong { font-weight: 700; color: var(--cream); white-space: nowrap; }   /* le chiffre clé reste d'un seul tenant */
.demo .projet-meta p { text-wrap: pretty; }
/* Projet perso (le mien, pas un exemple) : dans un cadre, la même matière que ceux des métiers — fond sombre à 29 %, trait or pâle à 32 %,
   coins de 6 px, même marge. Le cadre tient dans la colonne : ses bords s'alignent sur ceux des autres cartes, l'image est un peu plus petite. */
.projet.perso { padding: clamp(16px, 1.5625vw, 30px); background: rgba(7, 13, 28, .29); border: 1px solid rgba(242, 214, 162, .32); border-radius: 6px; }
/* Les vidéos de projet : des cartes dont l'image est un film (4:5, 51 s) qui se lit à sa place, avec le son.
   La couverture entière est le bouton ; tant qu'on n'a pas cliqué, la page ne charge que cette image, pas le film (5 à 9 Mo).
   Commandes maison (lecture, avance, sous-titres, son) et aucun plein écran : le film garde son format. Script en bas de page. */
.demo-video { container-type: inline-size; }
.demo-video video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.demo-play { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; color: var(--cream); cursor: pointer; }
.demo-play[hidden], .demo-bar[hidden], .demo-ctl[hidden] { display: none; }
.demo-video:not(.is-started) .demo-play:hover + video { transform: scale(1.03); }   /* la couverture répond au survol comme les images des projets */
.demo-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.demo-play span {   /* film en pause : un rond de lecture au centre, la même matière que celui de « Qui je suis » */
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(243,237,228,.55);
  background: rgba(7,13,28,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s;
}
.demo-play svg { width: 20px; height: 20px; margin-left: 3px; }
.demo-video.is-started:not(.is-playing) .demo-play span { opacity: 1; }
.demo-bar {   /* les commandes : en bas du film, visibles en pause, au survol ou au clavier ; elles s'effacent pendant la lecture */
  position: absolute; z-index: 2; inset: auto 0 0 0; display: flex; align-items: center; padding: 28px 8px 6px;
  color: var(--cream); background: linear-gradient(to top, rgba(7,13,28,.86), rgba(7,13,28,0)); transition: opacity .35s;
}
.demo-video.is-playing:not(.is-awake) .demo-bar:not(:focus-within) { opacity: 0; pointer-events: none; }
.demo-ctl { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background .3s, color .3s; }
.demo-ctl:hover { background: rgba(243,237,228,.14); }
.demo-ctl:focus-visible, .demo-seek:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.demo-ctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-ctl svg .plein { fill: currentColor; stroke: none; }
.demo-video:not(.is-playing) .i-pause, .demo-video.is-playing .i-play, .demo-mute[aria-pressed="false"] .i-muet, .demo-mute[aria-pressed="true"] .i-son { display: none; }
.demo-cc[aria-pressed="true"] { color: var(--gold); }
.demo-seek {   /* l'avancement : trait fin, la partie lue en or pâle */
  --p: 0; flex: 1; min-width: 0; height: 36px; margin: 0 8px 0 6px; padding: 0; border-radius: 4px; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.demo-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--gold) calc(5.5px + (100% - 11px) * var(--p)), rgba(243,237,228,.32) 0); }
.demo-seek::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--gold) calc(5.5px + (100% - 11px) * var(--p)), rgba(243,237,228,.32) 0); }
.demo-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: var(--cream); }
.demo-seek::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--cream); }
.demo-time { flex: none; padding-right: 6px; font: 500 12px/1 var(--sans); font-variant-numeric: lining-nums tabular-nums !important; white-space: nowrap; color: var(--cream-dim); }
.demo-cues { position: absolute; z-index: 1; inset: auto 6% 60px 6%; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
/* sous-titres (2026-10-16, choix 2 de la planche propria-planche-sous-titres.html) : surlignés or pâle, texte nuit en gras, une taille
   au-dessus (15 px sur une carte de 313 px, 17 px projet ouvert sur iPhone ; avant : fond nuit à 80 %, 500 clamp(13px, 4.1cqw, 19px)) */
.demo-cues span { padding: .24em .62em; border-radius: 4px; background: var(--gold); color: var(--night); font: 700 clamp(15px, 4.8cqw, 22px)/1.3 var(--sans); text-align: center; text-wrap: balance; }
@container (max-width: 300px) { .demo-time { display: none; } }   /* carte étroite : la place va au trait d'avancement */
@media (pointer: coarse) { .demo-ctl { width: 44px; height: 44px; } .demo-seek { height: 44px; } }

/* ── Qui je suis : retour sous le cerisier ──────────────────────────────── */
.moi { min-height: 150vh; padding: 0 var(--gutter); overflow-x: clip; }   /* clip : le voile du bloc dépasse sur les côtés des fenêtres étroites */
.moi-inner {
  position: sticky; top: 0; min-height: 100vh; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, min(710px, 48.3vw)); gap: clamp(33.6px, 4.8vw, 76.8px);   /* 710 px réglés sur une fenêtre de 1470 px ; en dessous le texte rétrécit en proportion, sinon il passe sur « C'est moi » */
  align-content: center; align-items: center; justify-content: start;
}
.moi-inner::before {   /* voile sombre diffus (35 %) derrière la photo et le texte, même matière que celui des métiers : fondu sur tous les bords.
                          Il occupe la même case que les deux, et déborde de 90 px ; --voile : il arrive avec eux (script). */
  content: ""; grid-area: 1 / 1 / 2 / 3; z-index: -1; align-self: stretch; justify-self: stretch; margin: -90px; pointer-events: none;
  background: rgba(7, 13, 28, .35); opacity: var(--voile, 1);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent), linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
}
.video { grid-area: 1 / 1; margin: 0; position: relative; width: clamp(263.5px, 24.14vw, 372.8px); max-width: 100%; }   /* max-width : les très petits téléphones */
.moi-text { grid-area: 1 / 2; }
.video .frame {   /* photo ronde, cerclée d'un trait or pâle posé à 8 px */
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 50%; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  outline: 2px solid var(--gold); outline-offset: 8px;
}
.motion .video .frame { animation: moi-flotte 5s ease-in-out infinite alternate; }   /* elle flotte doucement, 8 px vers le haut puis vers le bas */
@keyframes moi-flotte { from { translate: 0 -8px; } to { translate: 0 8px; } }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,13,28,.55)); pointer-events: none; }
/* le bouton lecture de la photo : sorti de la page tant que la vidéo de présentation n'existe pas (voir la section « moi ») */
.play {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(243,237,228,.55);
  background: rgba(7,13,28,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream); display: grid; place-items: center; cursor: pointer;
  transition: background .45s, transform .45s var(--ease-out);
}
.play:hover { background: rgba(243,237,228,.18); transform: translate(-50%, -50%) scale(1.05); }
.play svg { width: 20px; height: 20px; margin-left: 3px; }
.video figcaption { display: none; margin-top: 14px; font: 600 var(--text-note)/1.4 var(--serif-text); color: var(--cream-dim); text-wrap: balance; }   /* légende masquée depuis le 2026-10-07 (réglage de l'atelier) ; elle reste dans la page pour pouvoir la réafficher */
.moi-text h2 { margin: 0 0 24px; font: 500 clamp(34.6px, 3.244vw, 51.9px)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.moi-text p { margin: 0 0 16px; font: 600 calc(var(--text-body) * 1.03)/1.7 var(--serif-text); color: var(--cream); text-wrap: pretty; }
.moi-text p strong { font-weight: 700; }
@media (min-width: 961px) and (max-height: 860px) { .moi-inner { padding-top: 92px; } }   /* fenêtre peu haute : le bloc se centre sous le menu, qui revient quand on remonte */

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact { position: relative; min-height: 100vh; padding: 18vh var(--gutter) 10vh; display: grid; align-content: center; }
.to-top {   /* remonter tout en haut : même matière que les boutons en contour */
  position: absolute; right: var(--gutter); bottom: 28px;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(243,237,228,.06); color: var(--cream);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .45s;
}
.to-top svg { width: 16px; height: 16px; transition: transform .45s var(--ease-out); }
.to-top:hover { border-color: rgba(243,237,228,.6); }
.to-top:hover svg { transform: translateY(-3px); }
.contact h2 { margin: 0 0 22px; font: 500 clamp(44px, 5.4vw, 88px)/1.02 var(--serif); letter-spacing: -.02em; }
.contact > div { max-width: 760px; }
.path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 36px 0 0; padding: 0; list-style: none;
  font: 600 var(--text-note)/1.4 var(--serif-text); color: var(--cream-dim);
}
.path li { display: flex; align-items: center; gap: 16px; }
.path li + li::before { content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, var(--line), var(--gold)); }
.path li:last-child { color: var(--cream); }
.channels { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 28px); margin: 34px 0 0; padding: 0; list-style: none; font: 600 var(--text-note)/1.4 var(--serif-text); }
.channels a { color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .35s, border-color .35s; }
.channels a:hover { color: var(--cream); border-color: var(--cream); }

.footer {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 26px var(--gutter) 34px;
  font: 600 16px/1.4 var(--serif-text); color: var(--cream-dim);
}
.footer nav { display: flex; gap: 22px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--cream); }

/* ── États de départ (mouvement actif uniquement) ───────────────────────── */
.motion .dim { opacity: .5; }
.motion .nav, .motion .hero .lede, .motion .hero .assure, .motion .hero .ctas, .motion .caption, .motion .scroll-cue { opacity: 0; }
.motion .title .mask > span { transform: translateY(135%); }   /* sous la marge des jambages : rien ne dépasse avant l'apparition */
.motion [data-reveal] { opacity: 0; }

/* ── Écrans étroits ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav { width: auto; inset-inline: var(--gutter); max-width: none; padding-left: 20px; }   /* marque à gauche, bouton à droite */
  .nav-links { display: none; }
  .metiers { grid-template-columns: 1fr; row-gap: clamp(40px, 6vh, 56px); }
  .metiers { --cadre-pad: 24px; }
  .metier { display: block; grid-row: auto; padding: var(--cadre-pad); background: var(--cadre-fond); border: 1px solid var(--cadre-trait); border-radius: var(--cadre-rayon); }   /* empilés : un seul cadre par métier */
  .metier::before { content: none; }
  .metier-more { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .metier-name { font-size: 26px; white-space: normal; text-wrap: balance; }
  .projets { grid-template-columns: 1fr; }
  .projets-head { position: static; }
  .moi-inner::before { grid-area: 1 / 1 / 3 / 2; }
  .moi-text { grid-area: 2 / 1; }
  .moi-inner { grid-template-columns: minmax(0, 1fr); }   /* minmax(0, …) : la photo ne peut pas élargir la colonne sur un très petit téléphone */
}
@media (max-width: 640px) {
  /* téléphone : le texte du hero est dans le flux, calé en bas ; s'il est plus haut que l'écran (petits téléphones),
     la section s'allonge au lieu de faire passer le titre sous le menu */
  .hero { height: auto; min-height: 100svh; display: flex; align-items: flex-end; padding: 108px var(--gutter) clamp(76px, 10svh, 120px); }
  .hero-content { position: static; width: 100%; }
  .projets-grid { grid-template-columns: 1fr; }
  .projets-grid .col:nth-child(2) { margin-top: 0; }
  .projets-suite { text-align: left; }
  .btn { height: 50px; padding: 0 22px; }
  .socials { margin-left: 0; }
  .nav { gap: 14px; padding-left: 16px; }   /* téléphone : marque + bouton tiennent dans la capsule dès 360 px de large */
  .brand { font-size: 14px; letter-spacing: .16em; gap: 9px; }
  .brand-mark { width: 20px; height: 20px; }
  .nav-cta { height: 40px; padding: 0 15px; font-size: 14px; }
}
/* ── Téléphone (2026-10-14) : la scène en haut de page, puis une lecture calme sur la nuit ──────────────
   Vu en vrai sur son iPhone (402 px, Safari) : paragraphes en Cormorant trop fins sur un paysage chargé, cadres transparents
   illisibles, cartes de projets qui se chevauchaient, liens trop petits pour le doigt. Ici : les polices de l'ordinateur (son choix,
   même jour), paragraphes agrandis de 24 % : Cormorant dessine ses lettres plus petites (hauteur d'x 38,6 contre 47,9 pour la
   linéale), ces tailles donnent à l'œil celles qu'il a validées en linéale (17 / 16 / 14,5 px) ; paysage net en haut de page puis voilé pour lire ;
   blocs sombres aux coins arrondis ; boutons à la largeur du pouce. Rien ici ne touche l'ordinateur ni la tablette.
   Version d'avant : references/propria/archive/propria-accueil-v4-avant-telephone-2026-10-14.html. */
@media (max-width: 640px) {
  :root {
    --m-lead: 21px;                         /* phrase d'introduction sous un titre */
    --m-body: 20px;                         /* paragraphe courant */
    --m-note: 18px;                         /* lignes courtes */
    --m-texte: rgba(243, 237, 228, .86);    /* paragraphes : un cran sous le blanc des titres */
    --m-bloc: rgba(9, 16, 33, .74);         /* fond des blocs : sombre, sans flou (le paysage bouge sans cesse derrière) */
    --m-trait: rgba(242, 214, 162, .2);     /* bord des blocs : l'or pâle, plus discret que sur ordinateur */
    --m-rayon: 14px;
    --m-titre: clamp(30px, 8vw, 34px);      /* titres de section */
  }

  /* le paysage : net en haut de page avec un dégradé sombre sous le texte, puis voilé (script) ; les pétales restent vifs */
  .shade { background: linear-gradient(to top, rgba(7,13,28,.92) 0%, rgba(7,13,28,.78) 30%, rgba(7,13,28,.3) 58%, rgba(7,13,28,0) 74%); }
  .veil { display: block; }
  .tag { display: none; }   /* « C'est moi » tombait hors de l'écran */
  .brand { padding-block: 12px; }   /* le menu : cibles d'au moins 44 px pour le doigt */
  .nav { gap: 10px; }
  .nav-cta { height: 44px; padding: 0 13px; }

  /* menu : un rond à deux traits dans la capsule ; le panneau monte du bas de l'écran, à portée de pouce */
  .menu-rond {
    flex: none; display: grid; place-items: center; align-content: center; gap: 5px; width: 44px; height: 44px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line); background: rgba(243, 237, 228, .06); color: var(--cream); cursor: pointer;
  }
  .menu-rond span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease-out); }
  .menu-rond[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }   /* ouvert : les deux traits font une croix */
  .menu-rond[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .menu-voile {
    display: block; position: fixed; inset: 0; z-index: 18; background: rgba(7, 13, 28, .55); touch-action: none;
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  .menu-panneau {
    display: block; position: fixed; z-index: 19; left: 0; right: 0; bottom: 0;
    padding: 14px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
    background: rgba(9, 16, 33, .97); border-top: 1px solid rgba(242, 214, 162, .25); overscroll-behavior: contain;
    transform: translateY(100%); visibility: hidden; transition: transform .45s var(--ease-out), visibility 0s .45s;
  }
  .menu-ouvert .menu-voile { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-ouvert .menu-panneau { transform: none; visibility: visible; transition-delay: 0s; }
  .menu-panneau ul { margin: 0; padding: 0; list-style: none; }
  .menu-panneau li + li { border-top: 1px solid var(--line); }
  .menu-panneau li a { display: flex; align-items: center; height: 58px; font: 600 22px/1 var(--serif); color: var(--cream); text-decoration: none; }
  .menu-panneau .btn-primary { display: flex; justify-content: center; margin-top: 14px; }
  .apport::before, .metiers::before, .moi-inner::before { content: none; }   /* voiles de l'ordinateur : le voile du téléphone les remplace */

  /* haut de page */
  .hero { padding-bottom: 32px; }
  .scroll-cue { display: none; }   /* il se collait sous les boutons */
  .title { margin-bottom: 16px; font-size: clamp(32px, 8.6vw, 37px); line-height: 1.1; }
  .hero .lede { font: 600 var(--m-lead)/1.38 var(--serif-text); }
  .assure { margin-top: 12px; font: 600 var(--m-note)/1.4 var(--serif-text); color: var(--m-texte); }
  .assure strong { font-weight: 700; color: var(--cream); }
  .ctas { gap: 10px; margin-top: 26px; }
  .ctas .btn-primary { flex: 1 0 100%; justify-content: center; }   /* l'action principale prend toute la largeur */
  .hero .btn-ghost { flex: 1; justify-content: center; }
  .btn { height: 52px; font-size: 17px; }
  .socials a { width: 52px; height: 52px; }

  /* titres et paragraphes des sections */
  .apport-title, .projets-head h2, .moi-text h2 { margin-bottom: 16px; font-size: var(--m-titre); line-height: 1.14; }
  .apport-lead, .projets-head p, .contact .lede { font: 600 var(--m-lead)/1.4 var(--serif-text); color: var(--cream); }

  /* trois métiers : un bloc sombre chacun ; le « + » rond en haut à droite, tout le haut du bloc ouvre les détails (script) */
  .apport { padding: 96px var(--gutter) 104px; }
  .metiers { margin-top: 36px; row-gap: 12px; }
  .metier { position: relative; padding: 22px 20px; background: var(--m-bloc); border: 1px solid var(--m-trait); border-radius: var(--m-rayon); }
  .metier-name { margin: 0 56px 6px 0; font-size: 23px; line-height: 1.2; }
  .metier-gain { padding-right: 56px; font-size: 15px; line-height: 1.5; color: var(--m-texte); }
  .js .metier-name, .js .metier-gain { cursor: pointer; }
  .js .more { position: absolute; top: 18px; right: 16px; width: 44px; height: 44px; margin: 0; padding: 0; gap: 0; justify-content: center; }
  .more-label { max-width: 0; padding-right: 0; opacity: 0; }   /* le rond suffit ; le texte reste lu par les lecteurs d'écran */
  .more[aria-expanded="true"] { padding-inline: 0; }
  .metier-tags { margin: 18px 0 8px; font: 500 14.5px/1.55 var(--serif); letter-spacing: .02em; }
  .metier-text { font: 600 var(--m-body)/1.4 var(--serif-text); color: var(--m-texte); }
  .suivi { margin-top: 64px; }
  .suivi-title { margin-bottom: 12px; font-size: 24px; line-height: 1.25; }
  .suivi p:not(.suivi-title) { font: 600 var(--m-body)/1.4 var(--serif-text); color: var(--m-texte); }
  .suivi .ensemble { white-space: normal; }

  /* projets (2026-10-15, sa demande) : les deux côte à côte, en petit (l'image et le titre). Toucher un projet l'ouvre en grand
     par-dessus la page, à la largeur de l'écran, et lance le film ; il revient à sa place à la fin du film, sur la croix,
     en touchant le fond ou avec Échap (script). Un seul bloc par projet : le film en haut, bord à bord, le texte dessous. */
  .projets { gap: 32px; padding: 96px var(--gutter) 104px; }
  .projets-grid { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .projets-grid .col { transform: none !important; }   /* le décalage de profondeur faisait passer une carte sur l'autre */
  .projet.perso { padding: 0 0 14px; overflow: hidden; background: var(--m-bloc); border-color: var(--m-trait); border-radius: 12px; cursor: pointer; }
  .projet figure { border-radius: 0; }
  .projet-meta { padding: 12px 12px 0; }
  .projet h3 { font-size: 15.5px; line-height: 1.25; }
  .projet p { display: none; margin-top: 8px; font: 600 var(--m-note)/1.4 var(--serif-text); color: var(--m-texte); }   /* en petit : le titre seul */
  .projets-suite { margin-top: 8px; font: 600 var(--m-note)/1.4 var(--serif-text); }
  .projet.en-grand { position: fixed; z-index: 31; left: var(--gutter); right: var(--gutter); padding-bottom: 20px; border-radius: var(--m-rayon); cursor: auto; }
  .projet.en-grand .projet-meta { padding: 16px 20px 0; }
  .projet.en-grand h3 { font-size: 21px; }
  .projet.en-grand p { display: block; }
  .projets-voile { position: fixed; inset: 0; z-index: 30; background: rgba(7, 13, 28, .9); touch-action: none; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
  .projets-fermer {
    position: fixed; z-index: 32; top: 18px; right: var(--gutter); display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border-radius: 50%; border: 1px solid var(--line); background: rgba(243, 237, 228, .06); color: var(--cream); cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  .projets-fermer svg { width: 16px; height: 16px; }
  .projets-voile.visible, .projets-fermer.visible { opacity: 1; visibility: visible; transition-delay: 0s; }   /* fermés, ils sont vraiment retirés : sinon, invisibles, ils bloquaient le doigt (vu sur son iPhone le 2026-10-15) */

  /* qui je suis : la photo centrée, le texte dessous, sans l'effet collant de l'ordinateur */
  .moi { min-height: 0; padding: 96px var(--gutter) 24px; }
  .moi-inner { position: static; min-height: 0; gap: 40px; }
  .video { justify-self: center; width: min(232px, 62vw); }
  .moi-text p { margin-bottom: 14px; font: 600 var(--m-body)/1.42 var(--serif-text); color: var(--m-texte); }
  .moi-text p strong { font-weight: 700; color: var(--cream); }
  /* le texte (2026-10-15, mise en page 3 de la planche propria-planche-qui-je-suis.html, son choix) : une idée par bloc (découpage
     fait par le script, sur téléphone seulement) ; la première phrase clé en citation le long du trait or du contact,
     la dernière en or pâle pour finir. */
  .moi-text p { margin-bottom: 22px; }
  .moi-text .moi-l, .moi-text p strong { display: block; }
  .moi-text .moi-l + .moi-l { margin-top: 12px; }
  .moi-text p:first-of-type strong { margin: 14px 0 16px; padding-left: 18px; border-left: 1px solid rgba(242, 214, 162, .7); font: 700 24px/1.32 var(--serif-text); color: var(--cream); }
  .moi-text p:last-of-type strong { margin-top: 18px; font: 700 21px/1.4 var(--serif-text); color: var(--gold); }

  /* contact : les étapes l'une sous l'autre le long du trait or pâle, les moyens de contact en boutons */
  .contact { min-height: 0; padding: 104px var(--gutter) 32px; }
  .contact h2 { margin-bottom: 16px; font-size: clamp(36px, 10vw, 42px); }
  .path { display: grid; gap: 12px; margin-top: 28px; padding-left: 18px; border-left: 1px solid rgba(242, 214, 162, .55); font: 600 var(--m-note)/1.35 var(--serif-text); color: var(--m-texte); }
  .path li + li::before { content: none; }
  .channels { gap: 10px; margin-top: 22px; font: 600 var(--m-note)/1 var(--serif-text); }
  .channels a { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(243, 237, 228, .06); color: var(--cream); }
  .to-top { position: static; justify-self: end; margin-top: 36px; }
  .footer { flex-direction: column; gap: 4px; padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom)); font: 600 16px/1.4 var(--serif-text); }
  .footer nav a { display: inline-flex; align-items: center; min-height: 44px; }

  /* sans animation (réglage « réduire les animations ») : pas de voile piloté par le défilement, un fond sombre fixe sous les sections */
  html:not(.motion) .apport { background: linear-gradient(rgba(7,13,28,0), rgba(7,13,28,.6) 160px); }
  html:not(.motion) .projets, html:not(.motion) .moi, html:not(.motion) .contact, html:not(.motion) .footer { background: rgba(7,13,28,.66); }
}
@media (max-aspect-ratio: 4/5) {
  .stage { --fx: .86; }              /* recadrage 9:16 dédié à venir */
  .caption { display: none; }
}
@media (max-width: 389px) {   /* petits iPhone : le symbole seul dans la capsule, pour que le menu tienne à côté du bouton */
  .brand { font-size: 0; gap: 0; min-width: 44px; justify-content: center; }
}
/* Téléphone en portrait (2026-10-14, image 3 de la planche) : le fond se recentre sur le Fuji et le soleil, et le calque
   du cerisier (avec toi) se rapproche à droite. Mêmes images. Seulement en portrait : plus large, le bord du calque se verrait. */
@media (max-width: 640px) and (max-aspect-ratio: 4/5) {
  .stage { --fx: .556; }
  .fg { translate: -33% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .glow, .scroll-cue i::after { animation: none; }
}

/* ── Sélecteur de langue (2026-10-16, choix 2 de la planche propria-planche-langue.html) ─────────────────────
   « FR · EN » dans la capsule, après les sections, derrière un trait fin ; la langue de la page en or, l'autre s'allume
   au survol comme les sections. Tablette : contre le bouton. Téléphone : la capsule ne change pas, « Français · English »
   est une ligne de plus dans le panneau du bas. Ajouté en fin de fichier : aucune règle d'avant n'est touchée. */
.langues { display: inline-flex; align-items: center; gap: 9px; height: 22px; padding-left: clamp(18px, 1.8vw, 28px); border-left: 1px solid var(--line); }
.langues a, .langues span { font: 500 clamp(15px, 1.4vw, 17px)/1 var(--serif); letter-spacing: .14em; white-space: nowrap; text-decoration: none; }
.langues a, .menu-panneau li.langue a {
  color: var(--cream-dim);
  text-shadow: 0 0 0 rgba(250, 239, 218, 0), 0 0 0 rgba(242, 214, 162, 0), 0 0 0 rgba(242, 214, 162, 0);
  transition: color .35s, text-shadow .35s;
}
.langues a:hover, .langues a:focus-visible, .menu-panneau li.langue a:focus-visible {
  color: rgb(251, 249, 246);
  text-shadow: 0 0 5.05px rgba(250, 239, 218, .35), 0 0 14.14px rgba(242, 214, 162, .35), 0 0 36.06px rgba(242, 214, 162, .35);
}
.langues [aria-current], .menu-panneau li.langue [aria-current] { color: var(--gold); }
.langues i, .menu-panneau li.langue i { font-style: normal; color: var(--cream-faint); }
@media (max-width: 960px) {
  .langues { margin-left: auto; padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .langues { display: none; }
  .menu-panneau li.langue { display: flex; align-items: center; gap: 12px; }
  .menu-panneau li.langue a, .menu-panneau li.langue span { display: flex; align-items: center; height: 54px; font: 600 19px/1 var(--serif); text-decoration: none; }
}