/* =========================================================================
   MILLE BOUGIES · Pontault-Combault
   Le contraire du site de l'artisan, et c'est voulu : là-bas le bois et la nuit,
   ici le sucre et la lumière. Fond crème, or, et la DIDONE (Bodoni Moda), qui
   est la typographie de la pâtisserie depuis toujours : le contraste entre les
   pleins et les déliés, c'est le geste de la poche à douille.
   Relevé chez les cake designers de luxe : didone + capitales très espacées,
   fond blanc cassé, et la couleur laissée aux gâteaux.
   ========================================================================= */

/* PIÈGE DÉJÀ PAYÉ · Google Fonts liste l'ITALIQUE AVANT LE ROMAIN dans sa
   feuille. Prendre « le premier bloc latin » sortait donc tout le site en
   italique. Les deux fichiers ont été extraits en vérifiant `font-style`, pas
   leur position. L'italique de l'interface n'existe pas : aucune règle du site
   n'en demande, c'est 29 Ko qui ne partent pas sur le réseau. */
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond.woff2') format('woff2-variations');
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond-ital.woff2') format('woff2-variations');
  font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost.woff2') format('woff2-variations');
  font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --creme:#FBF7F1;
  --creme-2:#F3EBE0;
  --sucre:#FFFFFF;
  --encre:#2A2118;
  --encre-doux:#6B5D4E;
  --or:#B08843;
  --or-clair:#D9B876;
  --rose:#D9A9A0;
  --nuit:#221B14;
  --barre-h:clamp(54px,7.4vw,64px);
  --pied-h:clamp(46px,6vw,54px);
  --r:2px;
  --recit:'EB Garamond',Garamond,Georgia,serif;
  --interface:'Jost',Futura,'Century Gothic',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--interface);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--recit);font-weight:400;line-height:1.05;
  letter-spacing:-.008em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--or);outline-offset:4px}

.ital{font-style:italic}
.enveloppe{width:min(100% - 52px,1280px);margin-inline:auto}
@media (max-width:700px){.enveloppe{width:calc(100% - 34px)}}

/* ---------- la marque, en capitales très espacées ---------- */
.capitales{font-family:var(--interface);font-size:.7rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--or)}

/* ---------- barre ---------- */
.barre{position:fixed;top:0;left:0;right:0;height:var(--barre-h);z-index:80;
  display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);
  padding:0 clamp(18px,2.6vw,32px);
  background:linear-gradient(180deg,rgba(251,247,241,.92),rgba(251,247,241,.5) 68%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.barre.sombre{background:linear-gradient(180deg,rgba(34,27,20,.86),rgba(34,27,20,.4) 68%,transparent);
  color:var(--creme)}
.barre.sombre .capitales{color:var(--or-clair)}
.marque{font-family:var(--recit);font-size:clamp(1.06rem,2.1vw,1.32rem);
  letter-spacing:.02em;white-space:nowrap;display:flex;align-items:baseline;gap:9px}
.marque i{font-style:italic;font-size:.86em;opacity:.7}
.faits{display:flex;gap:clamp(12px,2.2vw,28px);align-items:center;font-size:.83rem;
  opacity:.72;white-space:nowrap;overflow:hidden}
@media (max-width:880px){.faits span:nth-child(n+3){display:none}}
@media (max-width:600px){.faits{display:none}}
.commander{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  background:var(--encre);color:var(--creme);text-decoration:none;font-weight:500;
  font-size:.9rem;letter-spacing:.03em;padding:12px 22px;border-radius:999px;
  transition:background .2s,transform .16s}
.commander:hover{background:var(--or);transform:translateY(-1px)}
.barre.sombre .commander{background:var(--creme);color:var(--encre)}
.barre.sombre .commander:hover{background:var(--or-clair)}

/* ---------- l'écran ---------- */
.ecran{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--barre-h) + 40px) 0 calc(var(--pied-h) + clamp(44px,7vh,90px));
  overflow:clip}
.ecran.bas{align-items:flex-end}
.ecran.nuit{background:var(--nuit);color:var(--creme)}
.ecran.nuit .dire{color:rgba(251,247,241,.78)}
.fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.fond img{width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,calc(var(--gl,0) * 1px),0) scale(1.07);will-change:transform}
/* UNE PHOTO TRÈS DÉTAILLÉE DERRIÈRE DU TEXTE FATIGUE L'ŒIL même quand le
   contraste est bon : mesuré entre 4,5 et 13:1 sur « À savoir avant », et
   pourtant illisible. Ce n'est pas la luminance qui gêne, c'est le bruit du
   motif (guirlandes, ballons, colonnes) qui concurrence les lettres. Un flou
   garde l'ambiance et supprime le bruit ; le scale compense les bords que le
   flou rendrait transparents. */
.ecran.nuit .fond img{filter:blur(5px) brightness(.82) saturate(1.06);
  transform:translate3d(0,calc(var(--gl,0) * 1px),0) scale(1.12)}
.fond::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(34,27,20,.52) 0%,rgba(34,27,20,.14) 28%,
      rgba(34,27,20,.5) 62%,rgba(34,27,20,.9) 100%),
    /* protège la colonne de texte sans couper : le voile meurt en dégradé */
    linear-gradient(96deg,rgba(34,27,20,.46) 0%,rgba(34,27,20,.2) 46%,transparent 82%)}
.ecran > .enveloppe{position:relative;z-index:2}

/* ---------- le récit ---------- */
.geant{font-size:clamp(2.9rem,8.6vw,6.9rem);line-height:1.0}
.grand{font-size:clamp(2.3rem,6vw,4.8rem)}
.dire{font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.6;max-width:46ch;
  margin-top:clamp(20px,2.8vh,32px);color:var(--encre-doux)}
.sur{margin-bottom:clamp(16px,2.6vh,28px);display:block}
.ecran:not(.nuit) .fond ~ .enveloppe .dire{color:rgba(251,247,241,.82)}
.ecran .fond ~ .enveloppe{color:var(--creme)}
.ecran .fond ~ .enveloppe .capitales{color:var(--or-clair)}

/* ---------- le filet doré, signature du site ---------- */
.filet{display:block;width:0;height:1px;background:linear-gradient(90deg,var(--or),transparent);
  margin:clamp(20px,3vh,32px) 0;transition:width 1.4s cubic-bezier(.2,.7,.25,1) .2s}
.vu .filet{width:min(340px,52vw)}

/* ---------- boutons ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--interface);font-weight:500;font-size:.96rem;letter-spacing:.03em;
  text-decoration:none;padding:15px 28px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .16s,background .2s,border-color .2s,color .2s}
.bt:hover{transform:translateY(-1px)}
.bt-plein{background:var(--encre);color:var(--creme)}
.bt-plein:hover{background:var(--or)}
.bt-or{background:var(--or);color:#fff}
.bt-or:hover{background:#9A7434}
.bt-ligne{border-color:currentColor;opacity:.85}
.bt-ligne:hover{opacity:1}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:clamp(26px,3.6vh,40px)}

/* ---------- la galerie, le cœur du site ---------- */
.rail-piste{height:320vh;position:relative;background:var(--creme)}
.rail-colle{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(22px,3.6vh,44px);overflow:hidden;
  padding:calc(var(--barre-h) + 24px) 0 calc(var(--pied-h) + 30px)}
.rail-titre{padding:0 clamp(26px,8vw,12vw)}
.rail{display:flex;gap:clamp(16px,2.4vw,32px);width:max-content;align-items:center;
  padding:0 clamp(26px,8vw,12vw);transform:translate3d(var(--g,0px),0,0);will-change:transform}
/* LES CARTES SONT DIMENSIONNÉES PAR LA HAUTEUR DISPONIBLE, pas par une
   largeur arbitraire. Mesuré sur un écran de 900 px : la colonne collée laisse
   579 px une fois retirés la barre, le pied, l'écart et le titre ; les cartes
   n'en utilisaient que 496, et leur format portrait bridait la largeur à 340.
   En carré, la même hauteur donne 500 px de côté : la surface fait 1,7 fois
   celle d'avant. Le retrait de 392 px est la somme mesurée de ce qui n'est
   pas l'image (88 + 84 + 32 + 116 + 71). */
.piece{flex:0 0 auto;position:relative}
/* PIÈGE CORRIGÉ · l'aspect-ratio et l'overflow posés sur la figure avalaient la
   légende, qui vit dans la figure. Ils vont sur un cadre interne. */
.piece figure{margin:0}
.piece .cadre{display:block;overflow:hidden;background:var(--creme-2);
  aspect-ratio:1/1;width:auto;
  height:clamp(280px, calc(100svh - 392px), 560px)}
.piece img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.25,1)}
.piece:hover img{transform:scale(1.05)}
.piece figcaption{margin-top:14px;font-family:var(--recit);font-size:1.16rem;font-style:italic}
.piece .quoi{font-size:.87rem;color:var(--encre-doux);margin-top:3px}
@media (max-width:860px){
  .rail-piste{height:auto;padding:clamp(66px,10vh,104px) 17px calc(var(--pied-h) + 44px)}
  .rail-colle{position:static;height:auto;padding:0;gap:26px}
  .rail-titre{padding:0}
  .rail{flex-direction:column;width:100%;padding:0;gap:30px;transform:none}
  .piece{width:100%}
  .piece .cadre{height:auto;width:100%}
}

/* ---------- les étapes de commande ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);
  margin-top:clamp(30px,4.4vh,50px)}
@media (max-width:860px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}
.etape{padding-top:20px;border-top:1px solid rgba(42,33,24,.16)}
.nuit .etape{border-color:rgba(251,247,241,.2)}
.etape .num{font-family:var(--recit);font-size:2.1rem;font-style:italic;color:var(--or);
  line-height:1;display:block;margin-bottom:12px}
.etape h3{font-size:1.14rem;margin-bottom:8px}
.etape p{font-size:.94rem;color:var(--encre-doux);line-height:1.5}
.nuit .etape p{color:rgba(251,247,241,.72)}

/* ---------- ce qu'elle fait ---------- */
.familles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(30px,4.4vh,50px)}
@media (max-width:860px){.familles{grid-template-columns:1fr}}
.famille h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:10px}
.famille p{font-size:.98rem;color:var(--encre-doux);line-height:1.55}
.famille .ligne{width:34px;height:1px;background:var(--or);margin-bottom:18px}

/* ---------- le formulaire ---------- */
.form{margin-top:clamp(30px,4.4vh,46px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:840px}
@media (max-width:700px){.form{grid-template-columns:minmax(0,1fr)}}
.champ{display:flex;flex-direction:column;gap:7px}
.champ.large{grid-column:1/-1}
.champ label{font-size:.84rem;font-weight:500;letter-spacing:.02em}
.champ .aide{opacity:.55;font-weight:400}
.champ .aide::before{content:"· "}
.champ input,.champ select,.champ textarea{font:inherit;font-size:.98rem;padding:13px 15px;
  border:1px solid rgba(42,33,24,.2);background:var(--sucre);color:var(--encre);
  border-radius:var(--r);width:100%;transition:border-color .18s}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--or);outline:none}
.champ textarea{min-height:100px;resize:vertical}
.recu{grid-column:1/-1;padding:16px 19px;border:1px solid var(--or);
  background:rgba(217,184,118,.14);font-size:.96rem}
.recu[hidden]{display:none}

/* ---------- questions ---------- */
.questions{margin-top:clamp(26px,3.6vh,42px);max-width:860px}
.q{border-top:1px solid rgba(42,33,24,.14)}
.q summary{cursor:pointer;padding:19px 0;font-family:var(--recit);font-size:1.2rem;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-family:var(--interface);font-size:1.24rem;color:var(--or);
  transition:rotate .2s}
.q[open] summary::after{rotate:45deg}
.q p{padding-bottom:21px;font-size:.98rem;color:var(--encre-doux);max-width:70ch}

/* ---------- pied ---------- */
.pied{background:var(--nuit);color:rgba(251,247,241,.72);
  padding:clamp(52px,7vh,88px) 0 calc(var(--pied-h) + 44px);font-size:.94rem}
.pied-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
@media (max-width:760px){.pied-in{grid-template-columns:1fr;gap:28px}}
.pied h4{font-family:var(--recit);font-size:1.16rem;color:var(--creme);margin-bottom:14px}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pied a{text-decoration:none;opacity:.7;transition:opacity .18s}
.pied a:hover{opacity:1}
.pied .tel{color:var(--or-clair);font-weight:500;opacity:1;text-decoration:none}
.pied-bas{margin-top:36px;padding-top:22px;border-top:1px solid rgba(251,247,241,.14);
  font-size:.82rem;opacity:.5;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- chapitres et jauge ---------- */
.chapitres{position:fixed;left:0;right:0;bottom:0;height:var(--pied-h);z-index:80;
  display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;
  background:rgba(34,27,20,.9);backdrop-filter:blur(14px);
  padding:0 clamp(14px,2vw,24px) env(safe-area-inset-bottom)}
.chapitres::-webkit-scrollbar{display:none}
.chapitres a{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:100%;
  padding:0 clamp(12px,1.6vw,20px);text-decoration:none;font-size:.83rem;
  color:rgba(251,247,241,.5);transition:color .22s;white-space:nowrap}
.chapitres a:hover{color:var(--creme)}
.chapitres a .num{font-family:var(--recit);font-style:italic;font-size:.92rem;opacity:.6}
.chapitres a.ici{color:var(--creme)}
.chapitres a.ici .num{color:var(--or-clair);opacity:1}
.jauge{position:fixed;left:0;bottom:var(--pied-h);height:2px;z-index:81;
  background:var(--or-clair);width:calc(var(--avance,0) * 100%);transition:width .12s linear}
.action-tel{position:fixed;left:0;right:0;bottom:0;z-index:82;display:none;gap:9px;
  padding:10px 13px calc(10px + env(safe-area-inset-bottom));
  background:rgba(34,27,20,.95);backdrop-filter:blur(14px)}
.action-tel .bt{flex:1;padding:15px 10px}
.action-tel .bt-ligne{color:var(--creme)}
@media (max-width:860px){
  .action-tel{display:flex}.chapitres{display:none}
  .jauge{bottom:calc(var(--pied-h) + 6px)}:root{--pied-h:66px}
}

/* =========================================================================
   LE MOUVEMENT · rien n'est masqué tant que le script n'a pas posé .js
   ========================================================================= */
/* LE MASQUE DOIT LAISSER PASSER LES JAMBAGES.
   `overflow:hidden` fait la révélation (le mot monte depuis dessous), mais il
   coupait net le jambage du g de « bougie ». On ouvre la boîte de .16em vers le
   bas et on la reprend en marge négative pour ne pas décaler l'interligne. Le
   voyage du mot passe alors de 112 % à 132 %, sinon il dépasserait du masque
   agrandi avant d'être révélé. */
.mot{display:inline-block;overflow:hidden;vertical-align:top;
  padding-right:.18em;margin-right:-.18em;padding-left:.04em;margin-left:-.04em;
  padding-bottom:.16em;margin-bottom:-.16em}
.mot > span{display:inline-block;transform:translateY(var(--ty,0));opacity:var(--op,1);
  transition:transform 1s cubic-bezier(.16,.84,.3,1),opacity .8s ease;
  transition-delay:var(--d,0ms)}
.js .mot > span{--ty:132%;--op:0}
.js .vu .mot > span{--ty:0%;--op:1}
.js [data-monte]{opacity:0;transform:translateY(22px);
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.3,1);
  transition-delay:var(--d,0ms)}
.js .vu [data-monte],.js [data-monte].vu{opacity:1;transform:none}
[data-zoom]{transform:scale(calc(.94 + var(--zz,1) * .06));
  transform-origin:0% 50%;will-change:transform}
@media (max-width:700px){[data-zoom]{transform:scale(calc(.97 + var(--zz,1) * .03))}}
@media (prefers-reduced-motion:reduce){
  .js .mot > span{--ty:0%;--op:1}
  .js [data-monte]{opacity:1;transform:none}
  [data-zoom]{transform:none}
  .fond img{transform:none}
  .filet{width:min(340px,52vw);transition:none}
}

/* ---------- l'outil des parts, la pièce maîtresse ---------- */
.calcul{margin-top:clamp(28px,4vh,44px);max-width:620px}
.calc-haut{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:var(--recit);font-size:clamp(1.3rem,2.4vw,1.8rem)}
.calc-haut label{font-family:var(--recit)}
.calc-haut input{font:inherit;font-family:var(--recit);font-size:inherit;width:4.5ch;
  text-align:center;background:transparent;color:var(--or-clair);
  border:0;border-bottom:1px solid var(--or);padding:2px 4px;
  -moz-appearance:textfield}
.calc-haut input::-webkit-outer-spin-button,
.calc-haut input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-haut input:focus{outline:none;border-bottom-color:var(--or-clair)}
.calc-bas{margin-top:clamp(24px,3.4vh,36px);padding-top:clamp(22px,3vh,32px);
  border-top:1px solid rgba(251,247,241,.18)}
.calc-reponse{font-family:var(--recit);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.18}
.calc-reponse b{font-weight:400;font-style:italic;color:var(--or-clair)}
.calc-note{margin-top:14px;font-size:.98rem;color:rgba(251,247,241,.72);max-width:48ch;
  line-height:1.55}
.calc-bas .bt{margin-top:clamp(20px,2.8vh,28px)}
.ecran:not(.nuit) .calc-bas{border-top-color:rgba(42,33,24,.16)}
.ecran:not(.nuit) .calc-note{color:var(--encre-doux)}
.ecran:not(.nuit) .calc-haut input{color:var(--or)}

/* ---------- en attendant les vraies photos ----------
   Pas de cadre en pointillés : un aplat qui a l'air d'un parti pris et pas d'un
   travail inachevé. Il disparaît dès que la photo est là. */
.fond{background:
  radial-gradient(110% 85% at 74% 26%, rgba(217,184,118,.42), transparent 60%),
  linear-gradient(158deg, #6A5540, #4A3B2C 56%, #2E251B)}
.piece figure{background:
  radial-gradient(90% 70% at 60% 34%, rgba(217,184,118,.42), transparent 66%),
  linear-gradient(160deg, var(--creme-2), #E7DBCA)}
.fond img:not([src]),.piece img:not([src]){display:none}

/* ---------- les films ---------- */
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--nuit)}
.piece .cadre{position:relative}
.film-piece{width:100%;height:100%;object-fit:cover;display:block;background:var(--creme-2)}
.piece:hover .film-piece{transform:none}
@media (prefers-reduced-motion:reduce){.film,.film-piece{display:none}}

/* ---------- la galerie de ses créations ---------- */
/* Trois créations, pas quatre : Camille n'a fourni que trois gâteaux distincts.
   Mieux vaut trois vraies pièces qu'un quatrième cadre vide ou le même gâteau
   montré deux fois. Le format 3/4 est celui de ses photos : rien n'est rogné. */
/* LA LARGEUR COMMANDE, la hauteur suit. Des colonnes dimensionnées sur leur
   contenu (`auto`) faisaient sortir la troisième carte du cadre : trois fois
   460 px plus les écarts dépassaient la colonne de texte. Trois parts égales,
   et le format fixe la hauteur. */
.grille-creations{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,30px);isolation:isolate;
  margin-top:clamp(28px,4vh,44px)}
@media (max-width:860px){
  .grille-creations{grid-template-columns:1fr;gap:26px;justify-content:stretch}
  .creation .cadre{height:auto;width:100%}
}
.creation{margin:0}
/* La hauteur commande, pas la largeur. Mesuré : l'écran laisse 506 px sous le
   titre et le paragraphe ; les cadres en prenaient 583 et poussaient les
   légendes sous le pli. Le retrait de 435 px est la somme mesurée de ce qui
   n'est pas l'image (104 + 117 de marges, 173 de titre, 27 de légende, 14). */
.creation .cadre{display:block;overflow:hidden;aspect-ratio:4/3;
  width:100%;height:auto;
  background:radial-gradient(90% 70% at 60% 34%, rgba(217,184,118,.4), transparent 66%),
    linear-gradient(158deg,#E9DCC9,#DCCBB2)}
.creation img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.25,1),filter .55s ease}
.creation figcaption{margin-top:13px;font-family:var(--recit);font-style:italic;
  font-size:1.04rem;transition:color .45s ease,transform .55s cubic-bezier(.2,.8,.3,1)}

/* ==========================================================================
   LE GESTE DU SURVOL · on soulève la pièce, on ne la gonfle pas.

   L'origine est en BAS du cadre : le gâteau se lève de son plateau au lieu de
   grossir depuis son centre. L'ombre s'allonge sous lui dans le même temps,
   et l'image dedans avance un peu plus vite que son cadre : c'est ce léger
   décalage qui donne l'épaisseur, un scale seul reste plat.

   Les deux autres pièces se retirent, elles ne disparaissent pas : le regard
   va où la souris est, sans qu'on lui coupe le reste de la vitrine.

   `@media (hover:hover)` n'est pas un confort : au doigt, un état de survol
   se pose au premier appui et NE SE RETIRE JAMAIS. Piège déjà payé dans le
   book sur un voile de photo resté collé pour toujours.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .creation{transform-origin:50% 100%;
    transition:transform .55s cubic-bezier(.2,.8,.3,1),opacity .45s ease,filter .45s ease}
  .creation .cadre{transition:box-shadow .55s ease}

  .grille-creations:hover .creation{opacity:.5;filter:saturate(.72)}
  .grille-creations:hover .creation:hover{opacity:1;filter:none}

  .creation:hover{transform:translateY(-10px) scale(1.055);z-index:3}
  /* sur un fond crème, une ombre discrète ne se voit pas : elle doit porter */
  .creation:hover .cadre{box-shadow:0 32px 56px -16px rgba(42,33,24,.52),
    0 6px 18px -6px rgba(42,33,24,.26)}
  /* la pièce qu'on soulève prend la lumière, très légèrement */
  .creation:hover img{transform:scale(1.11);filter:brightness(1.035) saturate(1.04)}
  .creation:hover figcaption{color:var(--or);transform:translateY(2px)}
}

@media (prefers-reduced-motion:reduce){
  .creation,.creation img,.creation figcaption,.creation .cadre{transition:none}
  .creation:hover{transform:none}
  .grille-creations:hover .creation{opacity:1;filter:none}
}

/* =========================================================================
   1 · LE GÂTEAU QUI TOURNE  ·  bord à bord, parcouru au défilement

   Le film n'est pas JOUÉ, il est PARCOURU : le doigt fait tourner le plateau.
   Encodé avec une image-clé toutes les huit images (48 sur 384), sans quoi il
   sauterait au lieu de suivre le geste.

   Plein écran comme les autres arrivées du book : la scène est collée, le
   film la remplit en « cover », le texte est posé dessus. Aucun cadre, aucune
   marge, aucun décor construit autour.
   ========================================================================= */
.piste-tour{height:400vh;position:relative;background:var(--nuit)}
.tour-colle{position:sticky;top:0;height:100svh;overflow:clip;background:var(--nuit)}
/* LE FONDU DE FIN · le film est sombre, l'écran suivant est crème : sans lui,
   la coupure est nette et le raccord se voit.

   PREMIÈRE VERSION RATÉE, corrigée : le crème montait jusqu'à couvrir toute la
   scène. Or une scène collée ne disparaît pas à la fin de sa piste, elle remonte
   encore sur une hauteur d'écran entière. Peinte en crème, elle donnait un grand
   écran vide, ce qui est pire que la coupure d'origine.

   Ici le dégradé ne prend que le tiers bas de la scène, là où le raccord se
   fait, et il s'installe sur les sept derniers pour cent du parcours. Le film
   reste entier au-dessus, et son pied rejoint le crème de l'écran suivant. */
.tour-colle::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  z-index:5;pointer-events:none;opacity:var(--fin,0);
  background:linear-gradient(180deg,
    rgba(251,247,241,0) 0%, rgba(251,247,241,.55) 46%, var(--creme) 100%)}
.tour-scene{position:absolute;inset:0}

/* Le gâteau n'est pas au milieu du cadre filmé mais dans sa moitié basse :
   si un écran très large oblige à rogner de la hauteur, c'est le haut qui
   part, jamais le gâteau. Le 1.04 couvre le bord découvert par le glissement. */
.tour-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%;
  transform:translate3d(0,calc(var(--gl,0) * 1px),0) scale(1.06)}

/* LE VOILE · calibré sur la mesure, pas à l'œil. Le film de la coulée est
   naturellement sombre : sa partie non voilée mesure déjà 9 à 31 sur 255. Un
   voile lourd n'ajoutait donc rien à la lisibilité et écrasait la fumée, qui
   est le plus bel élément du plan. Allégé, il donne encore 6,1:1 sous le
   titre et rend sa matière à la gauche de l'image. */
.tour-voile{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(31,23,19,.44) 0%, rgba(31,23,19,.28) 32%,
      rgba(31,23,19,.06) 58%, transparent 76%),
    linear-gradient(180deg, rgba(31,23,19,.34) 0%, transparent 24%,
      transparent 52%, rgba(31,23,19,.26) 86%, rgba(31,23,19,.42) 100%)}

/* LE RÉCIT · posé en bas à gauche, comme sur les autres arrivées. Il s'efface
   quand les annotations prennent sa place : une seule zone de lecture. */
.tour-texte{position:absolute;left:0;right:0;z-index:3;
  bottom:clamp(4.6rem,12vh,7.6rem);
  width:min(100% - 52px,1280px);margin-inline:auto;color:var(--creme);
  opacity:var(--texte-op,1);transform:translateY(calc(var(--texte-y,0) * 1px))}
.tour-texte .geant{font-size:clamp(2.4rem,5.9vw,4.9rem);max-width:21ch;
  text-shadow:0 2px 30px rgba(0,0,0,.42)}
.tour-texte .dire{color:rgba(251,247,241,.86);max-width:40ch;
  text-shadow:0 1px 16px rgba(0,0,0,.5)}
.tour-texte .capitales{color:var(--or-clair)}
.tour-texte .filet{width:min(340px,52vw)}

/* LES ANNOTATIONS · elles arrivent exactement là où était le titre. Posées
   ailleurs, elles tombaient sur le gâteau et devenaient illisibles. */
.annot{position:absolute;z-index:4;margin:0;pointer-events:none;
  left:max(calc((100vw - 1280px) / 2), 26px);right:auto;
  bottom:clamp(4.6rem,12vh,7.6rem);
  max-width:min(660px,52vw);color:var(--creme);
  opacity:var(--an,0);
  transform:translateY(calc((1 - var(--an,0)) * 26px));
  transition:opacity .1s linear,transform .1s linear}
/* DEUX NIVEAUX, comme le texte posé sur l'image du site de café : une phrase
   courte en grand, une ligne de précision en petit dessous. Là-bas la phrase
   fait 65 px sur un écran de 1440 ; ici tout tenait dans un seul paragraphe de
   18 px, et se lisait comme une note de bas de page. */
.annot-num{display:block;font-family:var(--recit);font-style:italic;
  font-size:clamp(1.9rem,2.6vw,2.5rem);color:var(--or-clair);margin-bottom:10px}
.annot figcaption b{display:block;font-family:var(--recit);font-weight:400;
  font-size:clamp(1.8rem,3.6vw,3.1rem);line-height:1.06;letter-spacing:-.008em;
  color:var(--creme);margin-bottom:.62rem;
  text-shadow:0 2px 26px rgba(0,0,0,.5)}
.annot figcaption{font-size:clamp(1rem,1.32vw,1.16rem);line-height:1.55;
  max-width:40ch;color:rgba(251,247,241,.84);text-shadow:0 1px 16px rgba(0,0,0,.55)}
.annot::before{content:"";position:absolute;left:-20px;top:2px;width:1px;
  height:calc(100% - 2px);background:linear-gradient(180deg,var(--or),transparent)}

.tour-invite{position:absolute;left:50%;bottom:calc(var(--pied-h) + 18px);
  translate:-50% 0;z-index:4;font-family:var(--interface);font-size:.68rem;
  font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(251,247,241,.55);opacity:var(--invite-op,1);transition:opacity .3s}

/* ---------- au doigt ----------
   Le film de bureau est filmé en paysage : sur un écran de téléphone, un
   « cover » n'en montrerait qu'un quart de largeur, soit le milieu du gâteau
   et rien d'autre. Le téléphone reçoit donc un film tourné en portrait, qui
   remplit son écran sans rien perdre. */
@media (max-width:1100px){
  .annot{left:26px;max-width:min(520px,56vw)}
  .tour-texte .geant{font-size:clamp(2rem,4.8vw,3.3rem)}
}
@media (max-width:860px){
  .tour-film{object-position:50% 50%}
  /* LE VOILE SUIT LE TEXTE, il ne noie pas l'écran. Mesuré sur la capture :
     l'ancien donnait 14,4:1 sous les annotations (l'image était tuée pour
     rien) et seulement 3,8:1 sous le titre, là où il en fallait. Il laisse
     donc respirer le haut et se ferme à partir de la moitié. */
  .tour-voile{background:
    linear-gradient(180deg,rgba(31,23,19,.44) 0%,rgba(31,23,19,.12) 20%,
      rgba(31,23,19,.14) 44%,rgba(31,23,19,.46) 58%,rgba(31,23,19,.56) 100%)}
  .tour-texte{bottom:calc(var(--pied-h) + 30px);width:calc(100% - 34px)}
  /* le titre passe sur le gâteau blanc, mesuré à 4,4:1. Plutôt qu'un voile
     plus noir qui mangerait le gâteau, une ombre serrée sous les lettres. */
  .tour-texte .geant{max-width:none;
    text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 26px rgba(0,0,0,.5)}
  /* la barre d'appel collante porte déjà les deux mêmes boutons, en bas de
     l'écran : les répéter ici allongeait le bloc de texte d'un tiers et
     obligeait à voiler tout le gâteau. */
  .tour-texte .actions{display:none}
  .annot{left:17px;right:17px;max-width:none;
    bottom:calc(var(--pied-h) + 30px)}
  .annot::before{display:none}
  .tour-invite{display:none}
}

/* Mouvement réduit : la page se déplie, le film ne bouge plus. */
@media (prefers-reduced-motion:reduce){
  .piste-tour{height:auto}
  .tour-colle{position:static;height:auto;padding:calc(var(--barre-h) + 60px) 0 60px}
  .tour-scene{position:relative;inset:auto;height:62svh}
  .tour-texte{position:relative;bottom:auto;margin-top:36px;opacity:1;transform:none}
  .annot{position:relative;left:auto;right:auto;bottom:auto;opacity:1;
    transform:none;max-width:none;margin:26px auto 0;
    width:min(100% - 52px,1280px)}
  .annot::before{display:none}
  .tour-invite{display:none}
}

/* =========================================================================
   LES RÉSEAUX · une section, et deux boutons qui suivent la page
   ========================================================================= */
.reseaux{display:grid;gap:clamp(14px,1.8vw,20px);max-width:760px;
  margin-top:clamp(26px,4vh,40px)}
.reseau{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,2.2vw,26px);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  border:1px solid rgba(42,33,24,.13);border-radius:16px;background:rgba(255,255,255,.5);
  text-decoration:none;color:inherit;
  transition:border-color .3s,background .3s,transform .3s}
.reseau:hover{border-color:rgba(176,136,67,.5);background:rgba(255,255,255,.85);
  transform:translateY(-2px)}
.r-rond{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;flex:none}
.r-insta .r-rond{background:linear-gradient(45deg,#F9CE34 4%,#EE2A7B 48%,#6228D7 96%)}
.r-wa .r-rond{background:#25D366}
.r-mots{display:block;min-width:0}
.r-mots b{display:block;font-family:var(--recit);font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.14}
.r-mots i{display:block;font-style:normal;margin-top:.2rem;
  font-size:clamp(.92rem,1.2vw,1.02rem);color:var(--encre-doux);line-height:1.5}
.r-fleche{color:var(--or);font-size:1.15rem;flex:none}
@media (max-width:620px){
  .reseau{grid-template-columns:auto 1fr;gap:14px;padding:15px 16px}
  .r-fleche{display:none}
}

/* LES DEUX BOUTONS QUI FLOTTENT · ils ne doivent jamais tomber sur la barre
   d'appel du téléphone, qui occupe déjà le bas de l'écran. */
.flottants{position:fixed;z-index:83;display:grid;gap:13px;
  right:clamp(15px,2.2vw,28px);
  bottom:calc(var(--pied-h) + clamp(16px,2.6vh,26px))}
.fl{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  color:#fff;text-decoration:none;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.fl-insta{background:linear-gradient(45deg,#F9CE34 4%,#EE2A7B 48%,#6228D7 96%);
  box-shadow:0 6px 20px rgba(0,0,0,.26),0 0 26px rgba(238,42,123,.42)}
.fl-wa{background:#25D366;
  box-shadow:0 6px 20px rgba(0,0,0,.26),0 0 26px rgba(37,211,102,.42)}
.fl:hover{transform:scale(1.09)}
.fl-insta:hover{box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 36px rgba(238,42,123,.62)}
.fl-wa:hover{box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 36px rgba(37,211,102,.62)}
@media (max-width:860px){
  /* la barre « Demander un devis · Appeler » est en bas : on passe au-dessus */
  .flottants{bottom:calc(var(--pied-h) + 28px);right:14px;gap:11px}
  .fl{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){.fl,.reseau{transition:none}}

/* la galerie montre des photos d'ambiance sous licence, pas le travail de la
   pâtissière : la page le dit, discrètement mais en clair */
.mention-photos{margin:clamp(11px,1.6vh,16px) 0 0;font-size:.8rem;
  color:var(--encre-doux);opacity:.8}
.ecran.nuit .mention-photos{color:rgba(251,247,241,.62)}