/* Page d'accueil (depuis le 2026-10-29) : texte aligné à gauche, téléphone en 3D qui suit le défilement,
   fond de couleurs qui dérivent. Polices et couleurs de Calocia (public/site/polices, accent bordeaux, couleurs des nutriments). */
@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-display: swap; src: url(/site/polices/dm-sans.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/site/polices/fraunces-italique.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url(/site/polices/barlow-600.woff2) format('woff2'); }

:root {
  --ciel: #eaeef5;
  --halo-bleu: #c9dcf1;
  --halo-rose: #f2d9de;
  --halo-miel: #f5e6c8;
  --carte: #fffdfa;
  --texte: #2b2521;
  --doux: #6a5f58;
  --ligne: rgba(43, 37, 33, 0.12);
  --accent: #852a3e;
  --prot: #3f7d4f;
  --gluc: #a86f12;
  --lip: #6f5aa3;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --chiffres: 'Barlow Semi Condensed', 'DM Sans', system-ui, sans-serif;
  --marge: clamp(16px, 5vw, 56px);
  color-scheme: light;
}
* , *::before, *::after { box-sizing: border-box; }
html { background: var(--ciel); -webkit-text-size-adjust: 100%; }
body.n { margin: 0; color: var(--texte); font: 400 17px/1.55 var(--sans); }
/* le bol dépasse à droite exprès : on le coupe ici (sur body, les navigateurs mobiles élargiraient la page) ;
   clip ne crée pas de zone de défilement, les sections collantes continuent de marcher */
.n main { overflow-x: clip; }
.n a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.n :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.n img { display: block; max-width: 100%; height: auto; }
.n h1, .n h2 { font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
.n h2 { font-size: clamp(1.75rem, 6vw, 2.6rem); line-height: 1.08; }
.prot { color: var(--prot); } .gluc { color: var(--gluc); } .lip { color: var(--lip); } .kcal { color: var(--accent); }

/* ---- fond : trois halos flous qui dérivent ---- */
.fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ciel); }
.fond i { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; filter: blur(70px); opacity: 0.85; will-change: transform; }
.fond i:nth-child(1) { background: var(--halo-bleu); top: -30vmax; left: -20vmax; animation: derive1 34s ease-in-out infinite alternate; }
.fond i:nth-child(2) { background: var(--halo-rose); top: 20vh; right: -35vmax; animation: derive2 41s ease-in-out infinite alternate; }
.fond i:nth-child(3) { background: var(--halo-miel); bottom: -40vmax; left: 10vw; opacity: 0.6; animation: derive3 47s ease-in-out infinite alternate; }
@keyframes derive1 { to { transform: translate(22vw, 18vh) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-26vw, 30vh) scale(0.9); } }
@keyframes derive3 { to { transform: translate(18vw, -40vh) scale(1.1); } }

/* ---- en-tête ---- */
.tete { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 12px var(--marge); padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(234, 238, 245, 0.6); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.tete-logo img { width: 96px; }
.tete-liens { display: none; gap: 22px; margin-left: auto; }
.tete-liens a { color: var(--texte); text-decoration: none; font-size: 0.95rem; }
.tete-liens a:hover { color: var(--accent); }
.tete .bouton { margin-left: auto; }
@media (min-width: 760px) { .tete-liens { display: flex; } .tete .bouton { margin-left: 0; } }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px; background: var(--accent); color: #fff !important;
  font: 600 1.05rem/1 var(--sans); text-decoration: none; box-shadow: 0 10px 24px -10px rgba(133, 42, 62, 0.65); transition: transform 0.15s, box-shadow 0.15s; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(133, 42, 62, 0.7); }
.bouton:active { transform: translateY(1px); }
.bouton.petit { min-height: 40px; padding: 0 18px; font-size: 0.95rem; }

/* ---- 1. l'accroche ---- */
.une { display: grid; gap: 28px; padding: clamp(28px, 6vh, 64px) var(--marge) 40px; max-width: 1240px; margin: 0 auto; }
.une .surtitre { display: block; margin: 0 0 10px; font: 600 0.69rem/1.3 var(--chiffres); letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.une h1 { font-size: clamp(2.3rem, 9.2vw, 4rem); line-height: 0.98; letter-spacing: -0.03em; }
.une h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.02em; }
@media (min-width: 860px) { .saut-tel { display: none; } }
.une-trio { font: 650 clamp(1.3rem, 5vw, 1.75rem)/1.15 var(--sans); letter-spacing: -0.015em; margin: 22px 0 0; max-width: 18em; }
.une-phrase { font-size: clamp(0.92rem, 3.68vw, 1.25rem); line-height: 1.35; margin: 12px 0 0; color: var(--doux); }
.une-aide { font-size: clamp(0.72rem, 2.85vw, 0.95rem); line-height: 1.45; margin: 12px 0 26px; color: var(--texte); max-width: 26em; }
/* trois atouts sous le bouton : icône au trait (comme les boutons de l'application) et deux lignes courtes */
.une-atouts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 30rem; }
.une-atouts li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 8px; text-align: center; font-size: 0.85rem; line-height: 1.3; color: var(--doux); }
.une-atouts li + li { border-left: 1px solid rgba(43, 37, 33, 0.14); }
.une-atouts svg { color: var(--accent); }
@media (min-width: 860px) { .une-atouts li { font-size: 0.92rem; } }
.une { position: relative; }
.une-texte { position: relative; z-index: 1; }
.une-bol { --bx: 0px; --by: 0px; --br: 0deg; pointer-events: none; }
.une-bol img { width: 100%; transform: translate(var(--bx), var(--by)) rotate(var(--br)); filter: drop-shadow(-8px 18px 18px rgba(60, 35, 30, 0.2)) drop-shadow(-18px 40px 44px rgba(60, 35, 30, 0.16)); will-change: transform; }
/* téléphone : le bol commence sous « Calories, protéines… », à droite, en partie hors de l'écran, derrière le texte ;
   les trois atouts passent dessous (60vw de bol moins la hauteur de la phrase et du bouton) */
@media (max-width: 859px) {
  .une { padding-bottom: 56px; }
  .une-bol { position: absolute; z-index: -1; right: -18.5vw; width: 63vw; margin-top: -95px; }
  .une-atouts { margin-top: 26px; }
}
@media (min-width: 860px) {
  .une { grid-template-columns: 1.05fr 1fr; align-items: center; min-height: calc(100svh - 64px); padding-bottom: 60px; }
  .une h1 { font-size: clamp(3.4rem, 5.6vw, 5.4rem); }
  .une .surtitre { font-size: 0.8rem; margin-bottom: 14px; }
  .une-texte { position: static; }
  .une-texte > :not(.une-bol) { position: relative; z-index: 1; }
  .une-bol { position: absolute; top: 50%; right: var(--marge); width: min(42vw, 600px); transform: translateY(-50%); }
}

/* ---- 2. la démonstration : la vidéo dans un téléphone dessiné en CSS (comme l'ancienne page) ----
   la vidéo dessine son propre téléphone à trait épais, rogné ici : on n'en garde que l'écran */
.demo { display: grid; gap: 28px; justify-items: center; padding-top: 50px; padding-bottom: 40px; }
.demo-video { position: relative; margin: 8px 0; width: min(78%, 320px); padding: 10px; border-radius: 54px;
  background: linear-gradient(145deg, #2a2a2e, #0c0c0e 45%, #1c1c20);
  box-shadow: 0 0 0 1.5px #a7a7ad, 0 0 0 2.5px #e9e9ec, inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 34px 60px -24px rgb(40 30 45 / 0.45), 0 12px 24px -12px rgb(40 30 45 / 0.25); }
.demo-video::before, .demo-video::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #8e8e94, #c9c9ce); }
.demo-video::before { left: -4.5px; top: 22%; height: 9%; box-shadow: 0 calc(100% + 40px) 0 #a9a9ae; }
.demo-video::after { right: -4.5px; top: 28%; height: 14%; }
.demo-ecran { overflow: hidden; border-radius: 45px; aspect-ratio: 388 / 822; background: #f7f3ee; transform: translateZ(0); }
.demo-ecran video { display: block; width: 139.18%; max-width: none; height: auto; aspect-ratio: 9 / 16; margin: -17.79% 0 0 -19.58%; }
.demo-texte { width: 100%; }
.demo-texte h2 { margin-bottom: 18px; }
.demo-etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 18px; }
.demo-etapes li { counter-increment: etape; display: flex; flex-direction: column; gap: 3px; padding-left: 44px; position: relative; }
.demo-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font: 600 0.95rem/1 var(--chiffres); }
.demo-etapes strong { font-size: 1.08rem; font-weight: 600; line-height: 1.3; padding-top: 3px; }
.demo-etapes span { color: var(--doux); font-size: 0.96rem; max-width: 30em; }
@media (min-width: 860px) {
  .demo { grid-template-columns: 400px 1fr; gap: 64px; align-items: center; justify-items: start; padding-top: 70px; padding-bottom: 60px; }
  .demo-video { width: 340px; margin: 8px 0 8px 30px; }
}

/* ---- 2 bis. le cercle de l'équilibre ---- */
.cycle { position: relative; }
.cycle-colle { display: grid; gap: 20px; padding: 60px var(--marge) 40px; max-width: 1240px; margin: 0 auto; }
.cycle-texte p { color: var(--doux); margin: 10px 0 0; font-size: 1rem; line-height: 1.45; }
.cycle-texte p + p { color: var(--texte); font-weight: 500; }
.cycle-scene { display: grid; place-items: center; min-height: 0; }
.cycle-scene svg { width: min(100%, 540px); height: auto; overflow: visible; }
.tube { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 42; }
.tube-bord { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.4; filter: drop-shadow(0 1px 1px rgba(43, 37, 33, 0.12)); }
.cycle-masque-trait { fill: none; stroke: #fff; stroke-width: 40; transform: rotate(-90deg); transform-origin: 200px 200px; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 3s cubic-bezier(0.45, 0, 0.3, 1); }
.rempli .cycle-masque-trait { stroke-dashoffset: 0; }
/* l'eau : des couleurs transparentes qui se mêlent, des reflets blancs qui filent */
.fluide, .reflet-eau { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 200px 200px; animation: couler 16s linear infinite; }
@keyframes couler { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
[data-fluide="0"] { animation-duration: 17s; } [data-fluide="1"] { animation-duration: 23s; } [data-fluide="2"] { animation-duration: 13s; }
[data-fluide="3"] { animation-duration: 6.5s; } [data-fluide="4"] { animation-duration: 9s; } [data-fluide="5"] { animation-duration: 11s; }
.bulle { transform-origin: 200px 200px; animation: tourner 12s linear infinite; }
.bulle circle { fill: #fffdfa; animation: scintiller 3s ease-in-out infinite alternate; }
@keyframes tourner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scintiller { from { opacity: 0.15; } to { opacity: 0.75; } }
.fluide { stroke-width: 30; }
.fluide.fond-fluide { stroke: #93d4ea; opacity: 0.5; }
.fluide.clair { stroke: #e9fbff; stroke-width: 18; stroke-dasharray: 20 14; opacity: 0.8; }
.fluide.prot { stroke: #8fdcab; stroke-dasharray: 18 16; opacity: 0.45; }
.fluide.gluc { stroke: #f6d27c; stroke-dasharray: 13 21; opacity: 0.45; }
.fluide.lip { stroke: #c5b3f6; stroke-dasharray: 11 23; opacity: 0.5; }
.reflet-eau { stroke: #fff; }
.reflet-eau.r1 { stroke-width: 3; stroke-dasharray: 3 7 1 9; opacity: 0.85; }
.reflet-eau.r2 { stroke-width: 2; stroke-dasharray: 1.5 11 4 13; opacity: 0.7; }
.tube-reflet { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0.8; stroke-dasharray: 14 86; transform: rotate(-150deg); transform-origin: 200px 200px; }
.stations circle { fill: var(--ciel); stroke: #c9a9b0; stroke-width: 3; transition: fill 0.5s, stroke 0.5s; }
.rempli [data-station="1"] circle, .rempli [data-station="1"] text { transition-delay: 0.75s; }
.rempli [data-station="2"] circle, .rempli [data-station="2"] text { transition-delay: 1.5s; }
.rempli [data-station="3"] circle, .rempli [data-station="3"] text { transition-delay: 2.25s; }
.stations text { font: 500 19px var(--sans); fill: var(--doux); text-anchor: middle; transition: fill 0.5s; }
.rempli .stations circle { fill: var(--accent); stroke: #fff; }
.rempli .stations text { fill: var(--texte); }
@media (min-width: 860px) {
  .cycle-colle { grid-template-rows: none; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 64px; }
  .cycle-scene { order: -1; }
  .cycle-texte p { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle-masque-trait { stroke-dashoffset: 0; transition: none; }
  .fluide, .reflet-eau, .bulle, .bulle circle { animation: none; }
  .stations circle { fill: var(--accent); stroke: var(--accent); }
}

/* ---- 3. les plats ---- */
.bloc { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: var(--marge); padding-right: var(--marge); }
.note { color: var(--doux); margin: 10px 0 0; max-width: 32em; }
.plats { padding: 40px 0 20px; }
.plats-liste { --carte-l: clamp(210px, 62vw, 290px); list-style: none; margin: 20px 0 0; padding: 30px calc(50% - var(--carte-l) / 2) 40px; display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.plats-liste::-webkit-scrollbar { display: none; }
.plats-liste li { flex: 0 0 var(--carte-l); margin-right: calc(var(--carte-l) * -0.22); scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform; }
.plats-liste a { display: block; border-radius: 18px; background: var(--carte); color: var(--texte); text-decoration: none; padding: 10px 10px 16px; box-shadow: 0 24px 40px -24px rgba(40, 30, 60, 0.45); }
.plats-liste img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.plats-liste strong { display: block; margin: 12px 6px 0; font-weight: 600; }
.plats-liste span { display: block; margin: 2px 6px 0; color: var(--accent); font: 600 1.15rem/1.2 var(--chiffres); }

/* ---- 4. ce que fait Calocia : des lignes ---- */
.fonctions { padding-top: 50px; padding-bottom: 30px; }
.fonctions dl { margin: 22px 0 0; display: grid; gap: 0; }
.fonctions dl div { padding: 16px 0; border-top: 1px solid var(--ligne); }
.fonctions dt { font-weight: 600; font-size: 1.08rem; }
.fonctions dd { margin: 2px 0 0; color: var(--doux); }
@media (min-width: 760px) { .fonctions dl { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* ---- 5. la confidentialité ---- */
.prive { display: grid; gap: 24px; padding-top: 50px; padding-bottom: 30px; align-items: center; }
.prive img { width: 100%; max-width: 460px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
.prive p { color: var(--doux); max-width: 34em; margin: 14px 0 0; }
@media (min-width: 760px) { .prive { grid-template-columns: 0.9fr 1fr; gap: 56px; } }

/* ---- 6. les guides, la fin, le pied ---- */
.guides { padding-top: 50px; padding-bottom: 20px; }
.guides ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.guides a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: rgba(255, 253, 250, 0.75); text-decoration: none; color: var(--texte); box-shadow: 0 0 0 1px var(--ligne); }
.guides a:hover { color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fin { padding-top: 60px; padding-bottom: 60px; }
.fin p { color: var(--doux); margin: 10px 0 22px; }
.pied { padding-top: 24px; padding-bottom: max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ligne); font-size: 0.88rem; color: var(--doux); }
.pied p { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---- mouvement réduit : pas de dérive ni de 3D au défilement, les étapes à plat ---- */
@media (prefers-reduced-motion: reduce) {
  .fond i { animation: none; }
}

.plats-fleches { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.plats-fleches button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--carte); color: var(--texte); font: 400 1.6rem/1 var(--sans); cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(40, 30, 60, 0.4), 0 0 0 1px var(--ligne); }
.plats-fleches button:hover { color: var(--accent); }

.plats-liste li:last-child { margin-right: 0; }
@media (min-width: 860px) { .plats-liste li { margin-right: 0; } .plats-liste { gap: 6px; } }
.stations text.droite { text-anchor: start; }
.stations text.gauche { text-anchor: end; }