/* Au fil du jour — landing. Tokens = charte de l'app (app-aufildujour/DESIGN.md), jamais de couleur en dur ailleurs. */

@font-face { font-family: "Young Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/young-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/atkinson-700.woff2") format("woff2"); }

:root {
  /* Charte de l'app */
  --fond: #F5EFE6;
  --surface: #FFFDF9;
  --ligne: #E2D9CC;
  --ligne-forte: #8A7E6E;
  --encre: #1E2B2F;
  --encre-douce: #4A5357;
  --sarcelle: #1D6A66;
  --sarcelle-pale: #DCEBE8;
  --sarcelle-texte: #14504D;
  --terre: #A34A1A;
  --terre-pale: #F6E1D3;
  --terre-texte: #6E2C0C;
  /* Propres à la landing : la sarcelle poussée dans le sombre, pour les grands aplats */
  --nuit: #0E3533;
  --nuit-2: #134542;
  --sur-nuit: #F5EFE6;
  --sur-nuit-doux: #BCD3CF;
  --fil: #E39A6F; /* le fil, sur fond sombre (terre cuite éclaircie) */

  --font-titre: "Young Serif", Georgia, "Times New Roman", serif;
  --font-texte: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --r: 12px;
  --r-carte: 16px;
  --r-ecran: 26px;
  --ombre-objet: 0 1px 2px rgb(14 53 51 / .08), 0 12px 32px -8px rgb(14 53 51 / .22), 0 40px 80px -30px rgb(14 53 51 / .35);

  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --large: 1180px;
  --texte: 64ch;
  --ease: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */

  --z-nav: 20;
  --z-menu: 30;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--sarcelle-texte); text-underline-offset: .18em; }
a:hover { color: var(--sarcelle); }
:focus-visible { outline: 3px solid var(--sarcelle); outline-offset: 3px; border-radius: 4px; }
.sur-nuit :focus-visible { outline-color: var(--fil); }
strong { font-weight: 700; }

.passer { position: absolute; left: 1rem; top: -4rem; z-index: var(--z-menu); background: var(--encre); color: var(--sur-nuit); padding: .75rem 1rem; border-radius: var(--r); }
.passer:focus { top: 1rem; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cadre { width: min(100% - 2 * var(--gouttiere), var(--large)); margin-inline: auto; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .8rem 1.4rem; border-radius: 999px;
  font: 700 1.0625rem/1.2 var(--font-texte); text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.bouton:active { transform: translateY(1px); }
.bouton-plein { background: var(--sarcelle); color: #fff; }
.bouton-plein:hover { background: var(--sarcelle-texte); color: #fff; }
.bouton-clair { background: var(--sur-nuit); color: var(--nuit); }
.bouton-clair:hover { background: #fff; color: var(--nuit); }
.bouton-trait { border-color: currentColor; color: var(--sarcelle-texte); background: transparent; }
.bouton-trait:hover { background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.sur-nuit .bouton-trait { color: var(--sur-nuit); }
.sur-nuit .bouton-trait:hover { background: rgb(245 239 230 / .1); color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--nuit); color: var(--sur-nuit);
  border-bottom: 1px solid rgb(245 239 230 / .08);
}
.nav-interieur { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marque { display: inline-flex; align-items: center; gap: .6rem; color: var(--sur-nuit); text-decoration: none; font-family: var(--font-titre); font-size: 1.35rem; }
.marque:hover { color: #fff; }
.marque svg { flex: none; }
.nav-liens { display: flex; gap: .25rem; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-liens a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--sur-nuit-doux); text-decoration: none; font-size: 1rem; }
.nav-liens a:hover { color: #fff; background: rgb(245 239 230 / .08); }
.nav .bouton { min-height: 44px; padding: .55rem 1.1rem; font-size: 1rem; }
.nav-bascule { display: none; margin-left: auto; min-width: 48px; min-height: 48px; border: 1px solid rgb(245 239 230 / .25); border-radius: 10px; background: transparent; color: var(--sur-nuit); cursor: pointer; }
@media (max-width: 960px) {
  .nav-bascule { display: inline-grid; place-items: center; }
  .nav-liens { display: none; position: absolute; inset: 68px 0 auto 0; flex-direction: column; gap: 0; padding: .5rem var(--gouttiere) 1.25rem; background: var(--nuit); border-bottom: 1px solid rgb(245 239 230 / .1); z-index: var(--z-menu); }
  .nav-liens.ouvert { display: flex; }
  .nav-liens a { padding: .9rem .25rem; font-size: 1.125rem; border-bottom: 1px solid rgb(245 239 230 / .08); border-radius: 0; }
  .nav-cta { display: none; }
}

/* ---------- Hero : l'aplat sarcelle de nuit ---------- */
.hero { background: var(--nuit); color: var(--sur-nuit); position: relative; overflow: hidden; overflow: clip; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7.5rem); }
.hero::after { /* une seule lueur, basse, comme une lampe posée */
  content: ""; position: absolute; inset: auto -10% -45% 30%; height: 80%;
  background: radial-gradient(closest-side, rgb(227 154 111 / .16), transparent);
  pointer-events: none;
}
.hero-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.35rem, 1.6rem + 3.4vw, 4.4rem); line-height: 1.04; }
.hero h1 em { font-style: normal; color: var(--fil); }
.hero-chapeau { margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + .45vw, 1.35rem); color: var(--sur-nuit-doux); max-width: 36ch; }
.hero-chapeau strong { color: var(--sur-nuit); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { margin-top: 1.25rem; font-size: 1rem; color: var(--sur-nuit-doux); }
.hero-note span { white-space: nowrap; }
@media (max-width: 900px) { .hero-grille { grid-template-columns: 1fr; } }

/* ---------- Les objets : tablette et téléphone, construits en HTML (texte réel, pas d'image) ---------- */
/* Hero : démo jouable. La tablette de Maman en haut à gauche, le téléphone de Claire en bas à droite, le fil les relie. */
.scene { position: relative; }
/* Du vivant d'abord : la photo que Léa a envoyée, en fond de scène. Les visages restent au-dessus de la tablette. */
.scene-photo { position: relative; margin: 0 0 0 18%; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-objet); }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.92) sepia(.08); }
.scene-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(14 53 51 / .45)); }
.scene-photo figcaption {
  position: absolute; top: .9rem; right: .9rem; z-index: 1; padding: .35rem .75rem; border-radius: 999px;
  background: rgb(14 53 51 / .72); color: var(--sur-nuit); font-size: .875rem; backdrop-filter: blur(6px);
}
.scene-objets { position: relative; margin-top: -17%; padding: 0 20% 6rem 0; }
.scene-bas { position: absolute; left: 0; bottom: 0; width: 64%; height: 5.25rem; display: flex; align-items: flex-start; gap: .75rem; }
.hero .tablette { aspect-ratio: auto; z-index: 1; }
.hero .tablette .ecran { min-height: 100%; }
.tablette {
  position: relative; background: #1b2426; border-radius: calc(var(--r-ecran) + 10px); padding: 12px;
  box-shadow: var(--ombre-objet); aspect-ratio: 4 / 3;
}
.tablette .ecran { background: var(--fond); color: var(--encre); border-radius: var(--r-ecran); height: 100%; overflow: hidden; padding: clamp(.9rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; gap: clamp(.5rem, 1.4vw, .9rem); font-size: clamp(.72rem, .55rem + .6vw, .98rem); }
.ecran-date { font-family: var(--font-titre); font-size: 2.05em; line-height: 1.05; }
.ecran-moment { color: var(--encre-douce); font-size: 1.15em; margin-top: -.2em; }
.rappel { background: var(--surface); border: 1px solid var(--ligne); border-radius: 18px; padding: 1em 1.1em; display: grid; gap: .7em; }
.rappel-tete { display: flex; justify-content: space-between; gap: .5em; font-size: .92em; color: var(--sarcelle-texte); font-weight: 700; }
.rappel-texte { font-size: 1.45em; line-height: 1.2; font-family: var(--font-titre); }
.voix { display: inline-flex; align-items: center; gap: .55em; font-size: .92em; color: var(--encre-douce); }
.voix-onde { display: inline-flex; align-items: center; gap: 2px; height: 1.2em; }
.voix-onde i { display: block; width: 3px; height: var(--h, 60%); border-radius: 2px; background: var(--sarcelle); }
.rappel-actions { display: flex; gap: .6em; }
.faux-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: 14px; padding: .8em 1.1em; font-weight: 700; font-size: 1.05em; }
.faux-bouton.fait { background: var(--sarcelle); color: #fff; flex: 1.4; }
.faux-bouton.plus-tard { border: 2px solid var(--ligne-forte); color: var(--encre); flex: 1; }
button.faux-bouton { font-family: inherit; line-height: 1.2; cursor: pointer; border-width: 0; transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease); }
button.faux-bouton.plus-tard { border-width: 2px; border-style: solid; background: transparent; }
button.faux-bouton.fait:hover { background: var(--sarcelle-texte); }
button.faux-bouton.plus-tard:hover { background: rgb(30 43 47 / .06); }
button.faux-bouton:active { transform: scale(.97); }
.ecran :focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }
.ecran-bas { display: flex; gap: .6em; margin-top: auto; }
.ecran-bas span { flex: 1; text-align: center; background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: .7em .5em; font-weight: 700; color: var(--sarcelle-texte); }
.mot { display: flex; gap: .8em; align-items: center; background: var(--sarcelle-pale); color: var(--sarcelle-texte); border-radius: 14px; padding: .6em .8em; }
.mot img { width: 3.1em; height: 3.1em; border-radius: 10px; object-fit: cover; flex: none; filter: sepia(.25); }
.mot b { display: block; }

.telephone {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: clamp(148px, 34%, 206px);
  background: #1b2426; border-radius: 30px; padding: 8px; box-shadow: var(--ombre-objet);
}
.telephone .ecran { background: var(--surface); color: var(--encre); border-radius: 23px; padding: 1.1rem .8rem .9rem; font-size: clamp(.64rem, .52rem + .3vw, .8rem); display: grid; gap: .6em; }
.tel-titre { font-family: var(--font-titre); font-size: 1.5em; }
.notif { display: grid; grid-template-columns: auto 1fr; gap: .15em .6em; align-items: start; padding: .7em; border-radius: 12px; background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.notif svg { grid-row: span 2; margin-top: .1em; }
.notif small { color: var(--encre-douce); font-size: .9em; }
.notif.attention { background: var(--terre-pale); color: var(--terre-texte); }
.notif.notif-report { background: var(--terre-pale); color: var(--terre-texte); }
.ligne-attente { display: grid; grid-template-columns: auto 1fr; gap: .15em .6em; align-items: center; padding: .7em; border-radius: 12px; border: 1px dashed var(--ligne-forte); color: var(--encre-douce); }
.ligne-attente b { color: var(--encre); font-weight: 700; }
.ligne-attente small { grid-column: 2; font-size: .9em; }
.point-attente { grid-row: span 2; width: .7em; height: .7em; border-radius: 50%; border: 2px solid var(--ligne-forte); }
.ligne-planning { display: flex; justify-content: space-between; gap: .5em; padding: .55em .1em; border-top: 1px solid var(--ligne); color: var(--encre); }
.ligne-planning span:last-child { color: var(--sarcelle-texte); font-weight: 700; white-space: nowrap; }

/* États de la démo : tout est empilé dans la même case de grille, la carte ne change jamais de hauteur.
   data-etat pilote la tablette et la consigne, data-tel le téléphone (il change quand le fil arrive). */
.scene-consigne, .scene .rappel, .tel-flux { display: grid; }
.scene-consigne > *, .scene .rappel > *, .tel-flux > * { grid-area: 1 / 1; }
.scene-consigne { display: none; flex: 1; font-size: 1rem; line-height: 1.45; color: var(--sur-nuit-doux); align-items: start; }
.js .scene-consigne { display: grid; }
.scene-consigne b { color: var(--fil); font-weight: 700; }
[data-consigne], [data-merci], [data-notif] {
  visibility: hidden; opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.scene[data-etat="attente"] [data-consigne="attente"],
.scene[data-etat="fait"] :is([data-consigne="fait"], [data-merci="fait"]),
.scene[data-etat="plus-tard"] :is([data-consigne="plus-tard"], [data-merci="plus-tard"]),
.scene[data-tel="attente"] [data-notif="attente"],
.scene[data-tel="fait"] [data-notif="fait"],
.scene[data-tel="plus-tard"] [data-notif="plus-tard"] {
  visibility: visible; opacity: 1; transform: none;
  transition-duration: .5s, .5s, 0s; transition-delay: .2s, .2s, 0s; /* la sortie a le temps de partir avant l'entrée */
}
.rappel-corps { display: grid; gap: .7em; transition: opacity .35s var(--ease), filter .35s var(--ease), visibility 0s; }
.scene:not([data-etat="attente"]) .rappel-corps { visibility: hidden; opacity: 0; filter: blur(4px); transition-delay: 0s, 0s, .35s; }
.rappel-merci { display: flex; align-items: center; gap: .8em; font-family: var(--font-titre); font-size: 1.45em; line-height: 1.2; transform: scale(.96); }
.rappel-merci b { font-weight: 400; color: var(--sarcelle-texte); }
.merci-signe { flex: none; display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--sarcelle); color: #fff; font-family: var(--font-texte); font-weight: 700; font-size: .9em; }
.merci-signe.merci-report { background: var(--terre-pale); color: var(--terre-texte); }
[data-merci="plus-tard"] b { color: var(--terre-texte); }
[data-notif] { transform: translateY(-6px); }

/* Le fil : tracé par site.js entre le bouton touché et le téléphone */
.scene-fil { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.fil-trace { fill: none; stroke: var(--fil); stroke-width: 3; stroke-linecap: round; transition: opacity 1.2s var(--ease); }
.fil-noeud { fill: var(--sarcelle); stroke: var(--sur-nuit); stroke-width: 2.5; opacity: 0; transition: opacity .3s var(--ease); }
.scene.fil-pose .fil-trace { opacity: .45; }

.scene-rejouer {
  position: relative; z-index: 4; flex: none;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1rem;
  border: 1px solid rgb(245 239 230 / .3); border-radius: 999px; background: transparent;
  color: var(--sur-nuit); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.scene-rejouer:hover { background: rgb(245 239 230 / .1); border-color: rgb(245 239 230 / .55); }
.scene-rejouer[hidden] { display: none; }

/* Entrée de la scène au chargement, puis la voix de Claire « parle » le temps du message (≈ 9 s), puis se tait */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .scene-photo { animation: apparaitre 1s var(--ease) both; }
  .js .hero .scene-photo img { animation: recadrer 2.4s var(--ease) both; }
  .js .hero .tablette { animation: poser 1.1s var(--ease) both .25s; }
  .js .hero .telephone { animation: poser-tel 1.1s var(--ease) both .35s; }
  .js .scene[data-etat="attente"] .faux-bouton.fait { animation: toucher 2.6s var(--ease) 2.2s 4 both; }
  .js .scene[data-etat="attente"] .voix-onde i { animation: parler .55s ease-in-out var(--d, 1.2s) 16 alternate both; transform-origin: center; }
  .voix-onde i:nth-child(2n) { --d: 1.35s; }
  .voix-onde i:nth-child(3n) { --d: 1.5s; }
  .js .scene[data-tel="attente"] .point-attente { animation: attendre 1.6s ease-in-out infinite; }
  .scene[data-tel="fait"] [data-notif="fait"],
  .scene[data-tel="plus-tard"] [data-notif="plus-tard"] { animation: recu 1.4s var(--ease); }
  .scene:not([data-etat="attente"]) .rappel-merci { transition-duration: .5s; }
  @keyframes poser { from { opacity: .001; transform: translateY(24px) rotate(-1deg); } to { opacity: 1; transform: none; } }
  @keyframes poser-tel { from { opacity: .001; transform: translate(18px, 24px); } to { opacity: 1; transform: none; } }
  @keyframes toucher { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(29 106 102 / 0); } 20% { box-shadow: 0 0 0 .5em rgb(29 106 102 / .25); } }
  @keyframes apparaitre { from { opacity: .001; } to { opacity: 1; } }
  @keyframes recadrer { from { transform: scale(1.08); } to { transform: none; } }
  @keyframes parler { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
  @keyframes attendre { 50% { opacity: .35; } }
  @keyframes recu { 0% { box-shadow: 0 0 0 0 rgb(227 154 111 / .7); } 100% { box-shadow: 0 0 0 .8em rgb(227 154 111 / 0); } }
}
@media (prefers-reduced-motion: reduce) {
  [data-consigne], [data-merci], [data-notif], .rappel-corps { transition-property: opacity, visibility; transform: none !important; filter: none !important; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-alt { background: var(--surface); border-block: 1px solid var(--ligne); }
.titre-section { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); max-width: 20ch; }
.intro { margin-top: 1.25rem; max-width: var(--texte); color: var(--encre-douce); font-size: 1.2rem; }
.intro strong { color: var(--encre); }

/* Constat : une phrase qui porte seule */
.constat { padding-block: clamp(4rem, 8vw, 6.5rem); }
.constat-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .72fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
/* La photo en portrait, légèrement décalée vers le haut : elle ancre la phrase-thèse dans une vraie vie */
.constat-photo { margin: 0; align-self: stretch; display: grid; grid-template-rows: 1fr auto; gap: .6rem; }
.constat-photo img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 35% 30%; border-radius: 22px; filter: saturate(.9) sepia(.06); }
.constat-photo figcaption { font-size: .9375rem; color: var(--encre-douce); }
@media (max-width: 1020px) {
  .constat-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .constat-grille > div:first-child { grid-column: 1; }
  .constat-photo { grid-column: 2; grid-row: 1 / span 2; }
}
.constat blockquote { margin: 0; font-family: var(--font-titre); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.85rem); line-height: 1.18; text-wrap: balance; }
.constat blockquote span { color: var(--terre); }
.constat p { color: var(--encre-douce); }
.constat p + p { margin-top: 1rem; }
@media (max-width: 820px) {
  .constat-grille { grid-template-columns: 1fr; }
  .constat-photo { grid-column: auto; grid-row: auto; }
  .constat-photo img { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- Le parcours d'un rappel : une vraie séquence, le fil la relie ---------- */
.parcours { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding-left: clamp(3.25rem, 7vw, 5.5rem); }
.parcours-liste { display: grid; gap: clamp(2rem, 4vw, 3rem); list-style: none; margin: 0; padding: 0; }
.parcours-fil { position: absolute; left: clamp(1rem, 2.6vw, 2rem); top: .5rem; bottom: .5rem; width: 24px; overflow: visible; }
.parcours-fil path { fill: none; stroke: var(--ligne); stroke-width: 3; stroke-linecap: round; }
.parcours-fil .trace { stroke: var(--terre); }
.etape { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3.5rem); align-items: start; }
.etape::before { /* le nœud sur le fil */
  content: ""; position: absolute; left: calc(-1 * clamp(3.25rem, 7vw, 5.5rem) + clamp(1rem, 2.6vw, 2rem) + 4px); top: .55rem;
  width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 3px solid var(--terre);
}
.etape-heure { font-family: var(--font-titre); color: var(--terre); font-size: 1.15rem; }
.etape h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); margin-top: .2rem; }
.etape p { margin-top: .6rem; color: var(--encre-douce); max-width: 46ch; }
.etape-preuve { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.1rem 1.25rem; font-size: 1rem; display: grid; gap: .6rem; }
.etape-preuve .etiquette { font-size: .875rem; color: var(--encre-douce); }
.puce-fait { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--sarcelle-pale); color: var(--sarcelle-texte); font-weight: 700; width: fit-content; }
.puce-attention { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: var(--terre-pale); color: var(--terre-texte); font-weight: 700; width: fit-content; }
.sms { background: #E9E5DF; border-radius: 16px 16px 16px 4px; padding: .7rem .9rem; max-width: 34ch; color: var(--encre); }
@media (max-width: 760px) { .etape { grid-template-columns: 1fr; } }

/* ---------- Niveaux d'accompagnement : démonstration interactive ---------- */
.niveaux { background: var(--nuit); color: var(--sur-nuit); }
.niveaux .intro { color: var(--sur-nuit-doux); }
.niveaux .intro strong { color: var(--sur-nuit); }
.niveaux-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .niveaux-grille { grid-template-columns: 1fr; } }
.choix-niveau { display: grid; gap: .6rem; }
.choix-niveau button {
  display: grid; gap: .2rem; text-align: left; width: 100%;
  padding: 1rem 1.2rem; border-radius: var(--r-carte); cursor: pointer;
  background: transparent; color: var(--sur-nuit); border: 1px solid rgb(245 239 230 / .2);
  font: inherit; transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.choix-niveau button:hover { background: rgb(245 239 230 / .05); border-color: rgb(245 239 230 / .4); }
.choix-niveau button[aria-pressed="true"] { background: var(--sur-nuit); color: var(--nuit); border-color: var(--sur-nuit); }
.choix-niveau .nom { font-family: var(--font-titre); font-size: 1.45rem; }
.choix-niveau .desc { font-size: 1rem; color: inherit; opacity: .85; }
.choix-niveau button[aria-pressed="true"] .desc { opacity: 1; color: var(--encre-douce); }
.niveaux-note { margin-top: 1.25rem; font-size: 1rem; color: var(--sur-nuit-doux); }

.demo .ecran { position: relative; }
.demo .vue { position: absolute; inset: clamp(.9rem, 2.2vw, 1.5rem); display: flex; flex-direction: column; gap: clamp(.5rem, 1.4vw, .9rem); transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
.demo .vue[hidden] { display: flex; opacity: 0; transform: translateY(8px); filter: blur(4px); pointer-events: none; visibility: hidden; }
.jeu-question { font-family: var(--font-titre); font-size: 1.6em; line-height: 1.15; }
.jeu-photo { flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; }
.jeu-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.2); }
.jeu-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.jeu-choix span { text-align: center; padding: 1em; border-radius: 16px; font-weight: 700; font-size: 1.2em; background: var(--surface); border: 2px solid var(--ligne-forte); }
.serenite { position: absolute; inset: 0; margin: calc(-1 * clamp(.9rem, 2.2vw, 1.5rem)); }
.serenite img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) saturate(.9); }
.serenite figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5em 1.4em 1.2em; background: linear-gradient(transparent, rgb(14 53 51 / .82)); color: #fff; font-family: var(--font-titre); font-size: 1.55em; line-height: 1.15; }
@media (prefers-reduced-motion: reduce) { .demo .vue { transition: opacity .2s linear; transform: none !important; filter: none !important; } }

/* ---------- Elle répond : photo + mots ---------- */
.repond-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .repond-grille { grid-template-columns: 1fr; } }
.photo-cadre { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ligne); }
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; }
.photo-legende { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: var(--surface); border-radius: 14px; padding: .85rem 1rem; font-size: 1rem; box-shadow: 0 10px 30px -10px rgb(14 53 51 / .35); }
.photo-legende b { display: block; color: var(--sarcelle-texte); }
.photo-large { aspect-ratio: 3 / 2; margin: 0; }
.photo-large .photo-legende, .photo-bandeau .photo-legende { right: auto; max-width: min(32ch, calc(100% - 2rem)); }
.tete-photo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
@media (max-width: 860px) { .tete-photo { grid-template-columns: 1fr; } }
.photo-bandeau { aspect-ratio: 5 / 2; margin: clamp(2rem, 4vw, 3rem) 0 0; }
@media (max-width: 700px) { .photo-bandeau { aspect-ratio: 4 / 3; } }
@media (max-width: 560px) {
  .photo-large .photo-legende, .photo-bandeau .photo-legende { left: .6rem; bottom: .6rem; padding: .55rem .75rem; font-size: .875rem; max-width: calc(100% - 1.2rem); }
}
.reponses { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.reponses li { padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--ligne-forte); font-weight: 700; background: var(--surface); }
.liste-sobre { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; max-width: var(--texte); }
.liste-sobre li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; }
.liste-sobre svg { margin-top: .3rem; color: var(--sarcelle); }

/* ---------- Souvenirs : l'IA propose, un proche valide ---------- */
.souvenirs-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .souvenirs-grille { grid-template-columns: 1fr; } }
.album { position: relative; }
.album > img { border-radius: 22px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.validation {
  position: relative; margin: -4.5rem 1.25rem 0 auto; width: min(100%, 420px);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.2rem 1.25rem;
  box-shadow: var(--ombre-objet); font-size: 1rem; display: grid; gap: .75rem;
}
.validation .etiquette { font-size: .875rem; color: var(--encre-douce); display: flex; justify-content: space-between; gap: 1rem; }
.validation .question { font-family: var(--font-titre); font-size: 1.3rem; line-height: 1.2; }
.validation ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.validation li { padding: .3rem .7rem; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); }
.validation li.juste { background: var(--sarcelle-pale); border-color: transparent; color: var(--sarcelle-texte); font-weight: 700; }
.validation-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.validation-actions span { padding: .55rem .95rem; border-radius: 10px; font-weight: 700; }
.validation-actions .ok { background: var(--sarcelle); color: #fff; }
.validation-actions .autre { border: 2px solid var(--ligne-forte); }
@media (max-width: 560px) { .validation { margin: -2.5rem .75rem 0; width: auto; } }
.regles { display: grid; gap: 1.5rem; }
.regle h3 { font-family: var(--font-texte); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
.regle p { margin-top: .35rem; color: var(--encre-douce); }
.regle + .regle { padding-top: 1.5rem; border-top: 1px solid var(--ligne); }

/* ---------- Entre proches : planning + bilan ---------- */
.proches-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .proches-grille { grid-template-columns: 1fr; } }
.volet h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.volet > p { margin-top: .6rem; color: var(--encre-douce); max-width: 48ch; }
.feuille { margin-top: 1.5rem; background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: 1.25rem; font-size: 1rem; }
.feuille-titre { font-family: var(--font-titre); font-size: 1.2rem; }
.feuille-sous { color: var(--encre-douce); font-size: .9375rem; margin-top: .1rem; }
.moments { margin: 1rem 0 0; padding: 0; list-style: none; }
.moments li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--ligne); }
.moments .qui { font-weight: 700; color: var(--sarcelle-texte); white-space: nowrap; }
.moments .a-prendre { font-weight: 700; color: var(--terre-texte); background: var(--terre-pale); padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; }
.bilan-bloc { margin-top: 1rem; display: grid; gap: .5rem; }
.bilan-bloc h4 { margin: 0; font-size: .9375rem; color: var(--encre-douce); font-weight: 700; }
.bilan-bloc p { margin: 0; }
.bilan-point { background: var(--terre-pale); color: var(--terre-texte); padding: .75rem .9rem; border-radius: 12px; }
.mention-exemple { margin-top: .75rem; font-size: .875rem; color: var(--encre-douce); }

/* ---------- Hors ligne : bande ---------- */
.bande { background: var(--sarcelle-pale); color: var(--sarcelle-texte); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.bande-grille { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.bande h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); color: var(--encre); }
.bande p { margin-top: .5rem; color: var(--sarcelle-texte); max-width: 70ch; }
@media (max-width: 640px) { .bande-grille { grid-template-columns: 1fr; } }

/* ---------- Confiance ---------- */
.confiance-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .confiance-grille { grid-template-columns: 1fr; } }
.engagements { margin: 0; padding: 0; list-style: none; }
.engagements li { padding: 1.1rem 0; border-top: 1px solid var(--ligne); display: grid; gap: .25rem; }
.engagements li:last-child { border-bottom: 1px solid var(--ligne); }
.engagements b { font-size: 1.125rem; }
.engagements span { color: var(--encre-douce); }
.ne-fait-pas { background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: clamp(1.25rem, 3vw, 2rem); align-self: start; }
.ne-fait-pas h3 { font-size: 1.6rem; }
.ne-fait-pas ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.ne-fait-pas li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; }
.ne-fait-pas li svg { margin-top: .3rem; color: var(--terre); }

/* ---------- Tarif ---------- */
.tarif { background: var(--nuit); color: var(--sur-nuit); }
.tarif .intro { color: var(--sur-nuit-doux); }
.tarif-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .tarif-grille { grid-template-columns: 1fr; } }
.prix { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.prix-montant { font-family: var(--font-titre); font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); line-height: 1; }
.prix-unite { font-size: 1.2rem; color: var(--sur-nuit-doux); }
.prix-annuel { margin-top: .5rem; color: var(--sur-nuit-doux); }
.inclus { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.inclus li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .7rem; }
.inclus svg { margin-top: .3rem; color: var(--fil); }
.promesse { border: 1px solid rgb(245 239 230 / .22); border-radius: var(--r-carte); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .9rem; }
.promesse h3 { font-size: 1.6rem; }
.promesse p { color: var(--sur-nuit-doux); }
.promesse p strong { color: var(--sur-nuit); }
.beta-marque { display: inline-flex; width: fit-content; padding: .3rem .8rem; border-radius: 999px; background: var(--fil); color: var(--nuit); font-weight: 700; font-size: .9375rem; }

/* ---------- Candidature ---------- */
.candidature-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .candidature-grille { grid-template-columns: 1fr; } }
.formulaire { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-carte); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.2rem; }
.champ { display: grid; gap: .4rem; }
.champ label, .champ legend { font-weight: 700; font-size: 1rem; }
.champ .aide { font-size: .9375rem; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1.0625rem; color: var(--encre); background: #fff;
  border: 2px solid var(--ligne-forte); border-radius: 10px; padding: .75rem .85rem; min-height: 52px; width: 100%;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--sarcelle); outline-offset: 1px; border-color: var(--sarcelle); }
.champ [aria-invalid="true"] { border-color: var(--terre); }
.erreur-champ { color: var(--terre-texte); font-size: .9375rem; font-weight: 700; }
.erreur-champ:empty { display: none; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .deux { grid-template-columns: 1fr; } }
fieldset.champ { border: 0; margin: 0; padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.radios label { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .5rem 1rem; border: 2px solid var(--ligne-forte); border-radius: 999px; cursor: pointer; font-weight: 400; background: #fff; }
.radios input { width: 1.15rem; height: 1.15rem; min-height: 0; accent-color: var(--sarcelle); margin: 0; }
.radios label:has(input:checked) { border-color: var(--sarcelle); background: var(--sarcelle-pale); color: var(--sarcelle-texte); font-weight: 700; }
.radios label:has(input:focus-visible) { outline: 3px solid var(--sarcelle); outline-offset: 2px; }
.consentement { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; font-size: 1rem; color: var(--encre-douce); }
.consentement input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--sarcelle); }
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.avertissement { background: var(--terre-pale); color: var(--terre-texte); border-radius: 12px; padding: .8rem 1rem; font-size: 1rem; }
.statut { border-radius: 12px; padding: .9rem 1rem; font-weight: 700; }
.statut:empty { display: none; }
.statut.ok { background: var(--sarcelle-pale); color: var(--sarcelle-texte); }
.statut.ko { background: var(--terre-pale); color: var(--terre-texte); }
.bouton[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- FAQ ---------- */
.faq-liste { margin-top: clamp(2rem, 4vw, 3rem); max-width: 860px; border-top: 1px solid var(--ligne); }
.faq-liste details { border-bottom: 1px solid var(--ligne); }
.faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.25rem 0; font-family: var(--font-titre); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.3; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2.5px solid var(--sarcelle); border-bottom: 2.5px solid var(--sarcelle); transform: rotate(45deg) translate(-3px, -3px); transition: transform .3s var(--ease); }
.faq-liste details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq-liste .reponse { padding: 0 0 1.5rem; color: var(--encre-douce); max-width: 70ch; }
.faq-liste .reponse p + p { margin-top: .75rem; }

/* ---------- Pied ---------- */
.pied { background: var(--nuit); color: var(--sur-nuit-doux); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 1rem; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; } }
.pied h2 { font-family: var(--font-texte); font-weight: 700; font-size: 1rem; color: var(--sur-nuit); letter-spacing: 0; }
.pied ul { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.pied a { color: var(--sur-nuit-doux); }
.pied a:hover { color: #fff; }
.pied-bas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(245 239 230 / .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9375rem; }

/* Apparition au défilement : amplifie un état déjà visible (jamais de contenu caché sans JS) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-apparait] { transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js [data-apparait].attend { opacity: .001; transform: translateY(18px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Petits écrans : le téléphone passe sous la tablette, décalé à droite, pour ne jamais masquer le rappel */
@media (max-width: 640px) {
  .scene-photo { margin-left: 0; }
  .scene-objets { margin-top: -18%; padding: 0 0 0 4%; }
  .scene-objets { padding-bottom: 0; }
  .scene-bas { left: 0; bottom: .5rem; width: 38%; height: auto; flex-direction: column; align-items: flex-start; }
  .telephone { position: relative; right: auto; bottom: auto; width: min(58%, 220px); margin: -1.5rem .25rem 0 auto; }
  .telephone .ecran { font-size: .78rem; }
}
.nav-cta-mobile { display: none; }
@media (max-width: 960px) {
  .nav-cta-mobile { display: block; padding-top: 1rem; }
  .nav-cta-mobile a { display: inline-flex; border: 0; border-radius: 999px; background: var(--sur-nuit); color: var(--nuit); font-weight: 700; padding: .85rem 1.4rem; }
  .nav-cta-mobile a:hover { background: #fff; color: var(--nuit); }
}