/* Portfolio Camille. Toutes les mesures reprennent les valeurs de la maquette Figma :
   --u vaut 1px à la largeur de référence (1440 en ordinateur, 390 en mobile) et suit l'écran. */
@font-face { font-family: 'Montserrat'; src: url('assets/fonts/montserrat.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Oooh Baby'; src: url('assets/fonts/oooh-baby.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --brun: #463a2e; --creme: #f5f5e8; --rose: #de9aa5; --rose-clair: #f0cfd5; --bleu-nuit: #3a5c7c; --denim: #648bb2;
  --denim-fonce: #5a84af; --vanille: #f1eabb; --olive: #9a9e6a; --or: #f2b643; --bleu-clair: #a4c3e2;
  --texte-secondaire: #6b5e50; --texte-secondaire-sombre: #e9e9d6;
  --u: min(calc(100vw / 1440), 1px);
  --sortie: cubic-bezier(.16, 1, .3, 1); --mouvement: cubic-bezier(.77, 0, .175, 1); --rebond: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(96 * var(--u)); background: var(--denim); -webkit-text-size-adjust: 100%; }
html.menu-ouvert { overflow: hidden; }
body { margin: 0; overflow-x: clip; color: var(--brun); font-family: 'Montserrat', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brun); outline-offset: 3px; }
.nav :focus-visible, #menu :focus-visible, .a-propos :focus-visible { outline-color: var(--creme); }

.m { display: none !important; }

/* Positionnement repris de la maquette */
.p { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.pw { width: calc(var(--w) * var(--u)); height: auto; max-width: none; }
.rot { transform: rotate(calc(var(--r) * 1deg)); transform-origin: 0 0; }
.deco { pointer-events: none; user-select: none; }
.autocollant { z-index: 6; pointer-events: none; }
.colle-bas { top: auto; bottom: calc(var(--bas) * var(--u)); }

/* Typographie */
.h2 { font-weight: 600; font-size: calc(40 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.h2-grand { font-weight: 600; font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.h3 { font-weight: 600; font-size: calc(19 * var(--u)); line-height: 1.2; letter-spacing: -.02em; }
.script { font-family: 'Oooh Baby', cursive; font-size: calc(52 * var(--u)); line-height: 1; white-space: nowrap; }
.corps { font-size: calc(14 * var(--u)); line-height: 1.45; }
.leg { font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.3; white-space: nowrap; }
.sec { color: var(--texte-secondaire); }

/* Boutons */
.pilule-rose {
  display: inline-flex; justify-content: center; padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: 999px; white-space: nowrap;
  background: var(--rose); color: var(--brun); font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2;
  box-shadow: 0 0 0 calc(6 * var(--u)) var(--rose-clair); transition: transform .25s var(--sortie), box-shadow .25s var(--sortie);
}
.pilule-rose:active { transform: scale(.98); }
.pilule-brun { display: inline-flex; padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: 999px; white-space: nowrap; background: var(--brun); color: var(--creme); font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; }
.reseaux { display: flex; gap: calc(20 * var(--u)); }
.reseaux a { display: block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); transition: transform .25s var(--sortie); }
.reseaux img { width: 100%; height: 100%; }
@media (hover: hover) {
  .pilule-rose:hover { transform: translateY(-2px); box-shadow: 0 0 0 calc(8 * var(--u)) var(--rose-clair); }
  .reseaux a:hover { transform: translateY(-2px); }
  .nav-liens a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .carte-video:hover .telephone { transform: translateY(calc(-4 * var(--u))); }
  .carte-video:hover .lecture { transform: scale(1.06); }
}

/* Page */
.page { position: relative; width: calc(1440 * var(--u)); margin: 0 auto; padding: calc(48 * var(--u)) calc(64 * var(--u)); display: flex; flex-direction: column; overflow-y: clip; }
.fond { position: absolute; inset: 0; pointer-events: none; }
.repere-nav { height: 0; }
main { position: relative; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.cale { position: relative; display: flex; flex-direction: column; }
.cale > .bloc { flex: 1 1 auto; }
.bloc { position: relative; overflow: hidden; border-radius: calc(32 * var(--u)); }
.bloc > :where(:not(.p)) { position: relative; }
.titre-script { position: relative; }
.titre-script .script { position: absolute; left: calc(-2 * var(--u)); top: calc(-42 * var(--u)); }

/* Navigation */
.nav { position: sticky; top: calc(12 * var(--u)); z-index: 20; padding: calc(24 * var(--u)) calc(72 * var(--u)); display: flex; background: var(--bleu-nuit); color: var(--creme); border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0; transition: border-radius .2s, box-shadow .2s; }
.nav.collee { border-radius: calc(32 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgb(58 92 124 / .3); }
.nav-liens { flex: 1; display: flex; justify-content: space-between; font-weight: 500; font-size: calc(14 * var(--u)); line-height: 1.2; letter-spacing: .02em; }
.nav-marque { font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; color: var(--creme); }

/* Hero */
.hero { display: flex; align-items: center; gap: calc(72 * var(--u)); padding: calc(48 * var(--u)); background: var(--creme); border-radius: 0 0 calc(32 * var(--u)) calc(32 * var(--u)); }
.hero > :where(:not(.p)) { position: relative; }
.portrait { flex: none; position: relative; overflow: hidden; width: calc(480 * var(--u)); height: calc(584 * var(--u)); border: calc(8 * var(--u)) solid var(--rose); border-radius: calc(28 * var(--u)); }
.portrait img { position: absolute; max-width: none; width: 137.93%; height: 151.52%; left: -17.93%; top: -24.24%; }
.presentation { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--u)); }
.signature { position: relative; flex: none; width: calc(664 * var(--u)); height: calc(244 * var(--u)); }
.signature > span { position: absolute; white-space: nowrap; }
.nom { left: calc(6 * var(--u)); top: calc(24 * var(--u)); font-weight: 600; font-size: calc(156 * var(--u)); line-height: .92; letter-spacing: -.06em; }
.nom-script { left: calc(-2 * var(--u)); top: calc(86 * var(--u)); font-family: 'Oooh Baby', cursive; font-size: calc(150 * var(--u)); line-height: 1; color: var(--rose); }
.sous-nom { right: calc(8 * var(--u)); top: calc(204 * var(--u)); font-weight: 600; font-size: calc(26 * var(--u)); line-height: 1.1; letter-spacing: -.03em; }

/* Bento haut */
.bento-haut { display: grid; grid-template-columns: calc(600 * var(--u)) calc(688 * var(--u)); gap: calc(24 * var(--u)); }
.colonne { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }

.a-propos { height: calc(340 * var(--u)); background: var(--bleu-nuit); color: var(--creme); }
.a-propos .script { color: var(--vanille); }
.a-propos-texte { width: calc(290 * var(--u)); color: var(--texte-secondaire-sombre); }
.polaroid { width: calc(250 * var(--u)); height: calc(255 * var(--u)); }
.polaroid-photo { position: absolute; overflow: hidden; left: calc(37 * var(--u)); top: calc(30 * var(--u)); width: calc(176 * var(--u)); height: calc(178 * var(--u)); }
.polaroid-photo img { position: absolute; max-width: none; width: 111.11%; height: 197.63%; left: -2.22%; top: -35.57%; }
.polaroid-cadre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.outils { display: flex; gap: calc(18 * var(--u)); }
.outils img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.outils-vanille { opacity: .75; }

.niches { height: calc(480 * var(--u)); background: var(--rose); }
.niches-liste { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.niches-liste li { padding-left: calc(var(--o) * var(--u)); }

.marques { height: calc(300 * var(--u)); padding: calc(56 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; background: var(--creme); }
.marques .script { color: var(--bleu-nuit); }
.marques .h2 { white-space: nowrap; margin-top: calc(2 * var(--u)); }
.chiffres { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.chiffres .corps { flex: 1; color: var(--texte-secondaire); }
.pastille { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); background: var(--vanille); border-radius: calc(20 * var(--u)); white-space: nowrap; font-weight: 500; }
.pastille strong { font-weight: 500; font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.pastille span { font-size: calc(12 * var(--u)); line-height: 1.3; }
.logos { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; font-weight: 600; font-size: calc(19 * var(--u)); line-height: 1.2; letter-spacing: -.02em; }
.logos .script { font-weight: 400; letter-spacing: 0; }

.performance { height: calc(520 * var(--u)); padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; background: var(--brun); color: var(--creme); }
.perf-tete { display: flex; justify-content: space-between; }
.perf-titre { position: relative; width: calc(200 * var(--u)); height: calc(72 * var(--u)); }
.h2-perf { padding-top: calc(2 * var(--u)); font-weight: 600; font-size: calc(28 * var(--u)); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
.perf-titre .script { position: absolute; left: calc(56 * var(--u)); top: calc(20 * var(--u)); color: var(--vanille); }
.stats { display: flex; gap: calc(26 * var(--u)); font-weight: 500; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: calc(6 * var(--u)); }
.stats dd { font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.stats dt { font-size: calc(12 * var(--u)); line-height: 1.3; color: var(--texte-secondaire-sombre); }
.chiffre-vedette { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(14 * var(--u)) calc(24 * var(--u)); background: var(--rose); color: var(--brun); border-radius: calc(20 * var(--u)); }
.chiffre-vedette strong { font-weight: 600; font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.chiffre-vedette p { flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.vedette-titre { font-weight: 600; font-size: calc(19 * var(--u)); line-height: 1.2; letter-spacing: -.02em; }
.vedette-detail { font-size: calc(14 * var(--u)); line-height: 1.45; }
.graphes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }
.graphe { position: relative; overflow: hidden; height: calc(272 * var(--u)); background: var(--creme); color: var(--brun); border-radius: calc(20 * var(--u)); }
.graphe figcaption { font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; white-space: nowrap; }
.repere { position: absolute; left: calc(14 * var(--u)); width: calc(172 * var(--u)); height: 1px; top: calc(var(--y) * var(--u)); background: var(--brun); opacity: .12; }
.barre { position: absolute; bottom: calc(48 * var(--u)); left: calc(var(--x) * var(--u)); width: calc(30 * var(--u)); height: calc(var(--h) * var(--u)); background: var(--bleu-nuit); border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0; }
.anneau { width: calc(116 * var(--u)); height: calc(116 * var(--u)); }
.anneau img { position: absolute; max-width: none; }
.legende { display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.3; white-space: nowrap; }
.legende li { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.legende img { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }

/* Services */
.services { padding: calc(76 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); background: var(--bleu-nuit); }
.services .h2-grand { color: var(--creme); }
.services .script { color: var(--vanille); }
.titre-grand .script { top: calc(-46 * var(--u)); }
.cartes-services { display: flex; gap: calc(14 * var(--u)); }
.carte-service { flex: 1 1 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)); background: var(--creme); border-radius: calc(20 * var(--u)); }
.carte-service > div { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.carte-service .corps { color: var(--texte-secondaire); }
.pastille-icone { flex: none; display: flex; align-items: center; justify-content: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--rose); border-radius: calc(12 * var(--u)); }
.pastille-icone img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.materiel { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.materiel .script { font-size: calc(44 * var(--u)); }
.materiel ul { display: flex; gap: calc(12 * var(--u)); }
.materiel li { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(18 * var(--u)) calc(9 * var(--u)) calc(14 * var(--u)); background: var(--vanille); color: var(--brun); border-radius: 999px; font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; white-space: nowrap; }
.materiel img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

/* Vidéos */
.videos { padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(150 * var(--u)); display: flex; flex-direction: column; gap: calc(48 * var(--u)); background: var(--creme); }
.rangee { display: flex; gap: calc(32 * var(--u)); }
.rail { flex: none; width: calc(336 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.rail .script { color: var(--bleu-nuit); line-height: .8; }
.rail .corps { color: var(--texte-secondaire); }
.vague { width: calc(150 * var(--u)); height: auto; }
.fleur-trait { width: calc(84 * var(--u)); height: auto; }
.telephones { flex: 1; display: flex; justify-content: space-between; }
.carte-video { flex: none; width: calc(264 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.telephone { padding: calc(6 * var(--u)); background: var(--brun); border-radius: calc(30 * var(--u)); transition: transform .35s var(--sortie); }
.ecran { position: relative; overflow: hidden; width: calc(252 * var(--u)); height: calc(448 * var(--u)); background: var(--brun); border-radius: calc(24 * var(--u)); cursor: pointer; }
.ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.encoche { position: absolute; left: 50%; top: calc(10 * var(--u)); width: calc(64 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(-32 * var(--u)); background: var(--brun); border-radius: calc(8 * var(--u)); }
.progression { position: absolute; left: 0; right: 0; bottom: 0; height: calc(4 * var(--u)); background: var(--vanille); transform: scaleX(0); transform-origin: 0 50%; }
.lecture { position: absolute; right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; background: var(--rose); border-radius: 50%; transition: transform .25s var(--sortie); }
.lecture img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.ico-pause { display: none; }
.en-lecture .ico-lecture { display: none; }
.en-lecture .ico-pause { display: block; }
.carte-video h4 { font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; }
.carte-video p { font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--texte-secondaire); }
.bandeau { position: absolute; left: calc(-40 * var(--u)); width: calc(1708 * var(--u)); transform-origin: 0 0; }
.bandeau-rose { bottom: calc(53 * var(--u)); transform: rotate(-2.2deg); }
.bandeau-olive { bottom: calc(23 * var(--u)); transform: rotate(1.6deg); }
.bandeau-piste { display: flex; align-items: center; gap: calc(14 * var(--u)); width: max-content; padding: calc(9 * var(--u)) calc(14 * var(--u)); color: var(--brun); font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; white-space: nowrap; animation: defile 70s linear infinite; }
.bandeau-rose .bandeau-piste { background: var(--rose); }
.bandeau-olive .bandeau-piste { background: var(--olive); animation-direction: reverse; }
.bandeau-piste img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
@keyframes defile { to { transform: translateX(-50%); } }

/* Bento bas */
.bento-bas { display: grid; grid-template-columns: calc(688 * var(--u)) calc(600 * var(--u)); gap: calc(24 * var(--u)); }

.avis { padding: calc(64 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(24 * var(--u)); background: var(--vanille); }
.avis .script, .formules .script { color: var(--bleu-nuit); }
.avis .h2, .formules .h2 { margin-top: calc(2 * var(--u)); }
.cartes-avis { display: flex; gap: calc(16 * var(--u)); }
.cartes-avis blockquote { flex: 1 1 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)); background: var(--creme); border-radius: calc(20 * var(--u)); }
.cartes-avis strong { font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; }
.cartes-avis .corps { color: var(--texte-secondaire); }
.cartes-avis cite { font-style: normal; font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.3; }

.formules { padding: calc(64 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); background: var(--creme); }
.prix { font-weight: 600; font-size: calc(14 * var(--u)); line-height: 1.2; }
.carte-pack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "nom inclus" "desc inclus" "prix inclus"; column-gap: calc(24 * var(--u)); row-gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); background: var(--rose); color: var(--brun); border-radius: calc(20 * var(--u)); }
.carte-pack .h3 { grid-area: nom; }
.pack-desc { grid-area: desc; }
.carte-pack .prix { grid-area: prix; }
.carte-pack ul { grid-area: inclus; }
.carte-pack li + li { margin-top: calc(6 * var(--u)); }
.cartes-formules { display: flex; gap: calc(16 * var(--u)); }
.carte-formule { flex: 1 1 0; height: calc(312 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)); background: var(--bleu-nuit); color: var(--creme); border-radius: calc(20 * var(--u)); }
.carte-formule > .corps { color: var(--texte-secondaire-sombre); }
.carte-formule ul { flex: 1; }
.carte-formule li + li { margin-top: calc(8 * var(--u)); }
.carte-formule .prix { color: var(--vanille); }

.cale-photos { min-height: 0; }
.photos { padding: calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); background: var(--bleu-nuit); }
.photos .h2-grand { color: var(--creme); }
.photos .script { color: var(--vanille); }
.mosaique { flex: 1 1 0; min-height: 0; display: grid; gap: calc(12 * var(--u)); grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "b b b g g g" "k k p p c c"; }
.mosaique img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: calc(20 * var(--u)); }

/* Contact */
.contact { height: calc(440 * var(--u)); background: var(--vanille); }
.contact-titre { position: absolute; left: calc(64 * var(--u)); top: calc(92 * var(--u)); }
.contact-titre h2 { font-weight: 600; font-size: calc(76 * var(--u)); line-height: .96; letter-spacing: -.04em; white-space: nowrap; }
.contact-titre .script { position: absolute; left: calc(266 * var(--u)); top: calc(-64 * var(--u)); font-size: calc(76 * var(--u)); color: var(--bleu-nuit); }
.contact .pilule-rose { position: absolute; left: calc(64 * var(--u)); top: calc(270 * var(--u)); }
.coordonnees { display: contents; }
.email { position: absolute; left: calc(64 * var(--u)); top: calc(342 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; color: var(--texte-secondaire); }
.reseaux-contact { position: absolute; left: calc(760 * var(--u)); top: calc(146 * var(--u)); flex-direction: column; gap: calc(22 * var(--u)); }
.contact-photo-cale { position: absolute; left: calc(868 * var(--u)); top: calc(48 * var(--u)); width: calc(380 * var(--u)); height: calc(344 * var(--u)); }
.contact-photo { position: relative; overflow: hidden; width: 100%; height: 100%; border: calc(8 * var(--u)) solid var(--creme); border-radius: calc(28 * var(--u)); }
.contact-photo img { position: absolute; max-width: none; left: 0; width: 100%; height: 196.08%; top: -39.22%; }
.outils-contact { position: absolute; left: calc(64 * var(--u)); top: calc(382 * var(--u)); }

/* Menu (mobile) */
#menu { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: calc(26 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); overflow: hidden; background: var(--bleu-nuit); color: var(--creme); }
#menu[open] { display: flex; flex-direction: column; justify-content: space-between; animation: menu-entree .3s var(--sortie); }
#menu::backdrop { background: var(--bleu-nuit); }
@keyframes menu-entree { from { opacity: 0; transform: translateY(12px); } }
.menu-haut { position: relative; display: flex; flex-direction: column; gap: calc(56 * var(--u)); }
.menu-barre { display: flex; align-items: center; justify-content: space-between; }
.menu-fermer, .nav-burger { display: block; width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: calc(8 * var(--u)); margin: calc(-8 * var(--u)); }
.menu-fermer img, .nav-burger img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.menu-liens { display: flex; flex-direction: column; gap: calc(26 * var(--u)); font-weight: 600; font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -.04em; }
.menu-bas { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--u)); }
.menu-bas .pilule-rose { width: 100%; }

/* Animations. Rien n'est masqué sans html.anim, posé en tête de page. */
.cache { display: inline-block; overflow: clip; padding: .14em .06em; margin: -.14em -.06em; }
.mot, .lettre { display: inline-block; }

/* Arrivée des bentos : chaque colonne arrive de son côté et se pose */
html.anim .apparait { --dx: 0; --dy: 130; --tour: 0deg; transform-origin: 50% 100%; transition: opacity .6s var(--sortie) var(--d, 0ms), transform 1.15s var(--sortie) var(--d, 0ms); }
html.anim .colonne:first-child .apparait { --dx: -90; --dy: 100; --tour: -2.5deg; }
html.anim .colonne:last-child .apparait, html.anim .cale-photos .apparait { --dx: 90; --dy: 100; --tour: 2.5deg; }
html.anim .apparait:not(.vu) { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(var(--tour)) scale(.95); }

/* Textes */
html.anim .titre-anime .mot { transition: translate .95s var(--sortie) calc(var(--d, 0ms) + 120ms + var(--i) * 70ms); }
html.anim .titre-anime:not(.vu) .mot { translate: 0 118%; }
html.anim .nom { clip-path: inset(-4% -4% -2% -4%); }
html.anim .nom:not(.decoupe) { visibility: hidden; }
html.anim .nom .lettre { transition: translate 1s var(--sortie) calc(100ms + var(--i) * 60ms); }
html.anim .nom:not(.vu) .lettre { translate: 0 108%; }
html.anim .ecrit { clip-path: inset(-40% -20% -40% -20%); transition: clip-path 1s var(--mouvement) calc(var(--d, 0ms) + 220ms); }
html.anim .ecrit:not(.vu) { clip-path: inset(-40% 120% -40% -20%); }
html.anim .nom-script { transition-duration: 1.3s; transition-delay: 500ms; }
html.anim .monte { transition: opacity .7s var(--sortie) var(--d, 0ms), translate .95s var(--sortie) var(--d, 0ms); }
html.anim .monte:not(.vu) { opacity: 0; translate: 0 calc(28 * var(--u)); }
html.anim .pilule-rose.monte { transition: opacity .7s var(--sortie) var(--d, 0ms), translate .95s var(--sortie) var(--d, 0ms), transform .25s var(--sortie), box-shadow .25s var(--sortie); }

/* Petits éléments et photos */
html.anim .surgit { transition: scale .85s var(--rebond) var(--d, 0ms), opacity .3s linear var(--d, 0ms); }
html.anim .surgit:not(.vu) { opacity: 0; scale: .5; }
html.anim .graphe-courbe .surgit { transition-delay: calc(var(--d, 0ms) + 1000ms); }
html.anim .tourne { will-change: rotate; }
html.anim .devoile { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--mouvement) var(--d, 0ms); }
html.anim .devoile:not(.vu) { clip-path: inset(100% 0 0 0); }
html.anim .portrait img, html.anim .contact-photo img { transition: scale 1.5s var(--sortie) var(--d, 0ms); }
html.anim .devoile:not(.vu) img { scale: 1.16; }
html.anim .barre { transform-origin: 50% 100%; transition: transform .9s var(--sortie) calc(var(--d, 0ms) + 250ms); }
html.anim .barre:not(.vu) { transform: scaleY(0); }

/* Courbes : au rythme du défilement (trace-scroll, piloté par script.js) ou à leur apparition (trace-temps) */
html.anim .trace-scroll path, html.anim .trace-temps path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.anim .trace-scroll { visibility: hidden; }
html.anim .trace-temps { transition: visibility 0s linear var(--d, 0ms); }
html.anim .trace-temps:not(.vu) { visibility: hidden; }
html.anim .trace-temps path { transition: stroke-dashoffset 1.3s var(--mouvement) var(--d, 0ms); }
html.anim .trace-temps.vu path { stroke-dashoffset: 0; }
html.anim .hero .trace-temps path { transition-duration: 1.9s; }

/* Préchargeur : une fleur s'ouvre, puis un rideau courbe se lève sur la page */
.prechargeur { display: none; }
html.chargement { overflow: hidden; }
html.anim .prechargeur { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.rideau { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 120 * var(--u)); border-radius: 0 0 50% 50% / 0 0 calc(120 * var(--u)) calc(120 * var(--u)); transition: transform .95s var(--mouvement); }
.rideau-rose { background: var(--rose); transition-delay: 110ms; }
.rideau-creme { overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); padding-bottom: calc(120 * var(--u)); background: var(--creme); }
.prechargeur.fini { pointer-events: none; }
.prechargeur.fini .rideau { transform: translateY(-100%); }
.prechargeur-courbes { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 120 * var(--u)); }
.prechargeur-courbes path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tracer 1.5s var(--mouvement) .1s both; }
.prechargeur-courbes path + path { animation-delay: .35s; }
.prechargeur-centre { position: relative; width: calc(230 * var(--u)); height: calc(230 * var(--u)); }
.fleur-ouvre { width: 100%; height: 100%; overflow: visible; animation: fleur-eclot 1.5s var(--sortie) both; }
.fleur-attente { transform-origin: 50px 50px; animation: fleur-tourne 12s linear 1.5s infinite; }
.petale, .petale-interieur, .coeur-fleur { transform-origin: 50px 50px; }
.petale { animation: petale .9s var(--rebond) calc(.28s + var(--i) * .05s) both; }
.petale-interieur { animation: petale-interieur .7s var(--rebond) calc(.6s + var(--i) * .05s) both; }
.coeur-fleur { animation: coeur-fleur .6s var(--rebond) .8s both; }
.prechargeur-coeur { position: absolute; right: calc(-40 * var(--u)); top: calc(-6 * var(--u)); width: calc(50 * var(--u)); height: auto; rotate: 10deg; }
.prechargeur-coeur path { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tracer .7s var(--mouvement) 1s both; }
.prechargeur-etoile { position: absolute; left: calc(-46 * var(--u)); bottom: calc(10 * var(--u)); width: calc(58 * var(--u)); height: auto; animation: etoile-surgit .75s var(--rebond) 1.1s both; }
.prechargeur-nom { position: relative; font-family: 'Oooh Baby', cursive; font-size: calc(78 * var(--u)); line-height: 1; color: var(--rose); animation: ecrire .85s var(--mouvement) .95s both; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes fleur-eclot { from { opacity: 0; transform: rotate(-120deg) scale(.45); } 12% { opacity: 1; } }
@keyframes fleur-tourne { to { transform: rotate(360deg); } }
@keyframes petale { from { transform: scale(.24) rotate(-55deg); } }
@keyframes petale-interieur { from { opacity: 0; transform: scale(.3) rotate(-55deg); } }
@keyframes coeur-fleur { from { opacity: 0; transform: scale(.3); } }
@keyframes etoile-surgit { from { opacity: 0; transform: scale(.4) rotate(-60deg); } }
@keyframes ecrire { from { clip-path: inset(-40% 120% -40% -20%); } to { clip-path: inset(-40% -20% -40% -20%); } }

/* Mouvement réduit : un simple fondu des blocs */
html.anim-douce .apparait { transition: opacity .4s ease; }
html.anim-douce .apparait:not(.vu) { opacity: 0; }

/* Mobile : colonne unique, entre 390 et 480 px de référence */
@media (max-width: 1179.98px) {
  :root { --u: min(calc(100vw / 390), 1.23px); }
  html { scroll-padding-top: calc(72 * var(--u)); }
  .m { display: revert !important; }
  span.m, br.m { display: inline !important; }
  img.m, svg.m { display: block !important; }
  a.nav-marque, button.nav-burger { display: block !important; }
  .d { display: none !important; }

  .p { left: calc(var(--mx, var(--x)) * var(--u)); top: calc(var(--my, var(--y)) * var(--u)); }
  .pw { width: calc(var(--mw, var(--w)) * var(--u)); }
  .rot { transform: rotate(calc(var(--mr, var(--r)) * 1deg)); }
  .colle-bas { top: auto; bottom: calc(var(--mbas) * var(--u)); }

  .h2 { font-size: calc(32 * var(--u)); }
  .h2-grand { font-size: calc(38 * var(--u)); line-height: .96; }
  .script { font-size: calc(42 * var(--u)); }
  .titre-script .script { top: calc(-38 * var(--u)); }

  .page { width: calc(390 * var(--u)); padding: calc(12 * var(--u)); }
  main { gap: calc(12 * var(--u)); }
  .bloc { border-radius: calc(24 * var(--u)); }
  .nav { top: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); justify-content: space-between; align-items: center; border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0; }
  .nav.collee { border-radius: calc(24 * var(--u)); }
  .pilule-rose { width: 100%; }
  .pilule-brun { padding: calc(12 * var(--u)) calc(16 * var(--u)); }

  .hero { flex-direction: column; gap: calc(18 * var(--u)); padding: calc(20 * var(--u)); border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u)); }
  .presentation { display: contents; }
  .signature { order: -1; z-index: 1; width: calc(326 * var(--u)); height: calc(128 * var(--u)); }
  .hero .pilule-rose, .hero .reseaux { position: relative; z-index: 1; }
  .nom { left: calc(1 * var(--u)); top: calc(6 * var(--u)); font-size: calc(76 * var(--u)); }
  .nom-script { left: calc(-2 * var(--u)); top: calc(38 * var(--u)); font-size: calc(74 * var(--u)); }
  .sous-nom { right: calc(2 * var(--u)); top: calc(106 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: -.02em; }
  .portrait { width: calc(326 * var(--u)); height: calc(340 * var(--u)); border-width: calc(6 * var(--u)); border-radius: calc(24 * var(--u)); }
  .portrait img { width: 139.66%; height: 178.57%; left: -18.16%; top: -44.64%; }
  .hero .reseaux a { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

  .bento-haut, .bento-bas { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
  .colonne { display: contents; }
  .a-propos { order: 1; height: calc(342 * var(--u)); }
  .marques { order: 2; height: auto; padding: calc(52 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); gap: calc(18 * var(--u)); justify-content: flex-start; }
  .cale-niches { order: 3; }
  .performance { order: 4; height: auto; padding: calc(20 * var(--u)); gap: calc(18 * var(--u)); justify-content: flex-start; }

  .a-propos-texte { width: calc(326 * var(--u)); }
  .polaroid { width: calc(156 * var(--u)); height: calc(159 * var(--u)); }
  .polaroid-photo { left: calc(23 * var(--u)); top: calc(19 * var(--u)); width: calc(110 * var(--u)); height: calc(111 * var(--u)); }

  .marques .h2 { margin-top: 0; }
  .chiffres { flex-wrap: wrap; column-gap: calc(8 * var(--u)); row-gap: calc(18 * var(--u)); }
  .pastille { flex: 1 1 0; padding: calc(12 * var(--u)) calc(6 * var(--u)); }
  .chiffres .corps { flex: 0 0 100%; }
  .logos { flex-wrap: wrap; justify-content: flex-start; column-gap: calc(18 * var(--u)); row-gap: calc(8 * var(--u)); }

  .niches { height: calc(600 * var(--u)); }
  .niches-liste { flex-direction: row; flex-wrap: wrap; gap: calc(8 * var(--u)); width: calc(326 * var(--u)); }
  .niches-liste li { padding-left: 0; }
  .ordre-4 { order: 4; }
  .ordre-5 { order: 5; }

  .perf-tete { display: contents; }
  .perf-titre { order: 1; width: auto; height: calc(64 * var(--u)); }
  .h2-perf { padding-top: 0; }
  .perf-titre .script { left: calc(60 * var(--u)); top: calc(18 * var(--u)); }
  .chiffre-vedette { order: 2; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }
  .chiffre-vedette strong { font-size: calc(44 * var(--u)); }
  .vedette-titre { font-size: calc(17 * var(--u)); }
  .stats { order: 3; justify-content: space-between; gap: 0; }
  .stats dd { font-size: calc(26 * var(--u)); }
  .graphes { order: 4; grid-template-columns: repeat(2, 1fr); }
  .graphe { height: calc(236 * var(--u)); }
  .graphe-courbe { grid-column: 1 / -1; height: calc(206 * var(--u)); }
  .repere { left: calc(12 * var(--u)); width: calc(302 * var(--u)); top: calc(var(--my) * var(--u)); }
  .barre { bottom: calc(38 * var(--u)); left: calc(var(--mx) * var(--u)); width: calc(24 * var(--u)); height: calc(var(--mh) * var(--u)); }
  .anneau { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
  .legende { gap: calc(5 * var(--u)); }
  .legende li { gap: calc(6 * var(--u)); }
  .legende img { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

  .services { padding: calc(62 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); gap: calc(14 * var(--u)); }
  .titre-grand .script { top: calc(-34 * var(--u)); font-size: calc(33 * var(--u)); }
  .cartes-services { flex-direction: column; gap: calc(10 * var(--u)); }
  .carte-service { flex: none; flex-direction: row; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(18 * var(--u)); }
  .carte-service > div { flex: 1; gap: calc(4 * var(--u)); }
  .carte-service .h3 { font-size: calc(17 * var(--u)); }
  .materiel { flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); }
  .materiel .script { font-size: calc(42 * var(--u)); }
  .materiel ul { flex-wrap: wrap; gap: calc(8 * var(--u)); }

  .videos { padding: calc(28 * var(--u)) calc(16 * var(--u)) calc(104 * var(--u)); gap: calc(40 * var(--u)); }
  .rangee { display: block; }
  .rail { width: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: calc(12 * var(--u)); row-gap: calc(16 * var(--u)); }
  .rail .script { line-height: 1; }
  .rail .corps, .rail:has(h2) .script { grid-column: 1 / -1; }
  .rail-deco { grid-row: 1; grid-column: 2; }
  .vague { width: calc(120 * var(--u)); }
  .fleur-trait { width: calc(30 * var(--u)); }
  .telephones { display: flex; justify-content: flex-start; gap: calc(12 * var(--u)); margin: calc(16 * var(--u)) calc(-16 * var(--u)) 0; padding: 0 calc(16 * var(--u)) calc(4 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(16 * var(--u)); scrollbar-width: none; }
  .telephones::-webkit-scrollbar { display: none; }
  .carte-video { width: calc(196 * var(--u)); gap: calc(8 * var(--u)); scroll-snap-align: start; }
  .telephone { padding: calc(5 * var(--u)); border-radius: calc(22 * var(--u)); }
  .ecran { width: calc(186 * var(--u)); height: calc(330 * var(--u)); border-radius: calc(17 * var(--u)); }
  .encoche { top: calc(7 * var(--u)); width: calc(44 * var(--u)); height: calc(11 * var(--u)); margin-left: calc(-22 * var(--u)); border-radius: calc(6 * var(--u)); }
  .lecture { right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .lecture img { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .carte-video p { font-weight: 500; font-size: calc(12 * var(--u)); line-height: 1.3; }
  .bandeau { left: calc(-60 * var(--u)); }
  .bandeau-rose { bottom: calc(43 * var(--u)); transform: rotate(-2.4deg); }
  .bandeau-olive { bottom: calc(15 * var(--u)); transform: rotate(1.8deg); }

  .avis { padding: calc(52 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); gap: calc(16 * var(--u)); }
  .avis .h2, .formules .h2 { margin-top: 0; }
  .cartes-avis { flex-direction: column; }
  .cartes-avis blockquote { flex: none; }
  .formules { padding: calc(52 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); gap: calc(12 * var(--u)); }
  .carte-pack { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "nom" "desc" "inclus" "prix"; row-gap: calc(12 * var(--u)); padding: calc(18 * var(--u)); }
  .cartes-formules { flex-direction: column; gap: calc(12 * var(--u)); }
  .carte-formule { flex: none; height: calc(272 * var(--u)); }

  .photos { padding: calc(20 * var(--u)); gap: calc(10 * var(--u)); }
  .mosaique { flex: none; grid-template-columns: 157fr 37fr 108fr; grid-template-rows: calc(144 * var(--u)) calc(144 * var(--u)) calc(250 * var(--u)); grid-template-areas: "b b p" "b b c" "g k k"; }
  .mosaique img { border-radius: calc(16 * var(--u)); }

  .contact { height: auto; padding: calc(64 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
  .contact-titre { position: relative; left: auto; top: auto; }
  .contact-titre h2 { font-size: calc(38 * var(--u)); }
  .contact-titre .script { left: calc(92 * var(--u)); top: calc(-40 * var(--u)); font-size: calc(42 * var(--u)); }
  .contact .pilule-rose { position: relative; left: auto; top: auto; }
  .coordonnees { display: flex; align-items: center; justify-content: space-between; }
  .email { position: static; font-size: calc(14 * var(--u)); line-height: 1.45; }
  .reseaux-contact { position: static; flex-direction: row; gap: calc(16 * var(--u)); }
  .reseaux-contact a { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .contact-photo-cale { position: relative; left: auto; top: auto; width: 100%; height: calc(300 * var(--u)); }
  .contact-photo { border-width: calc(6 * var(--u)); border-radius: calc(24 * var(--u)); }
  .contact-photo img { height: 188.68%; top: -37.74%; }
  .outils-contact { position: relative; left: auto; top: auto; }

  .menu-bas .reseaux a { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

  .prechargeur-centre { width: calc(176 * var(--u)); height: calc(176 * var(--u)); }
  .prechargeur-coeur { right: calc(-24 * var(--u)); width: calc(38 * var(--u)); }
  .prechargeur-etoile { left: calc(-30 * var(--u)); width: calc(44 * var(--u)); }
  .prechargeur-nom { font-size: calc(62 * var(--u)); }

  html.anim .apparait { --dy: 90; }
  html.anim .colonne:first-child .apparait { --dx: -28; --dy: 70; --tour: -1.6deg; }
  html.anim .colonne:last-child .apparait, html.anim .cale-photos .apparait { --dx: 28; --dy: 70; --tour: 1.6deg; }
  html.anim .monte:not(.vu) { translate: 0 calc(20 * var(--u)); }
}

/* Au-delà de la largeur de référence, les rubans du fond suivent toute la largeur de l'écran */
@media (min-width: 1441px), (min-width: 481px) and (max-width: 1179.98px) {
  .fond .p { left: calc(50% - 50vw); width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeau-piste { animation: none; }
  #menu[open] { animation: none; }
}