/* LR Pâtisserie — design system commun */
:root{
  /* ---------- couleurs de marque (pilotées par l'admin) ---------- */
  --creme:#FDF4EC;
  --creme-2:#F8E7D6;
  --brun:#3B2318;
  --terre:#C0622B;
  --terre-clair:#D98A4E;
  --sable:#BEAE89;
  --texte:#42291D;
  --texte-doux:#7A5C4A;
  --blanc:#FFFCF9;

  /* ---------- ancrages des degrades : toute la famille chaude, rien d'autre
       teintes oklch mesurees entre 43 et 72 deg (ambre / terracotta) :
       aucune derive possible vers le rose, le violet ou le gris ---------- */
  --creme-haut:#FEF8F1;    /* sommet clair des fonds      L 98,2 % */
  --creme-bas:#FAEDE0;     /* creux des fonds             L 95,3 % */
  --abricot:#F0BE92;       /* halo abricot                L 83,6 % */
  --terre-fond:#B85B27;    /* aplat terracotta sous texte blanc (4,6:1) */
  --terre-encre:#9E4B1E;   /* petits textes terracotta sur fond clair (>= 4,5:1) */
  --brun-brule:#8E4318;    /* fin du degrade chaud        L 47,2 % */
  --brun-clair:#4A2C1D;    /* depart du degrade profond   L 32,7 % */
  --brun-fonce:#2A1810;    /* fin du degrade profond      L 23,1 % */

  /* teintes intermediaires des degrades : figees ici, recalculees a partir
     des ancrages ci-dessus des que color-mix est disponible, pour qu'un
     changement de couleur dans l'admin traverse tout le systeme. */
  --chaud-mid:#A2501F;
  --chaud-bas:#824016;
  --chaud-haut:#96491B;
  --nuit-ruban:#33200F;
  --nuit-scene:#54321F;
  --nuit-fond:#241409;

  /* ---------- teintes de halo (repli sRGB ; version pilotee plus bas) ---------- */
  --halo-creme:rgba(254,248,241,.92);    --halo-creme-0:rgba(254,248,241,0);
  --halo-abricot:rgba(240,190,146,.26);  --halo-abricot-0:rgba(240,190,146,0);
  --halo-sable:rgba(250,237,224,.88);    --halo-sable-0:rgba(250,237,224,0);
  --halo-braise:rgba(74,44,29,.20);      --halo-braise-0:rgba(74,44,29,0);
  --halo-ambre:rgba(217,138,78,.03);     --halo-ambre-0:rgba(217,138,78,0);
  --halo-nuit:rgba(42,24,16,.11);        --halo-nuit-0:rgba(42,24,16,0);
  --halo-curseur:rgba(217,138,78,.16);   --halo-curseur-0:rgba(217,138,78,0);

  /* ============================================================
     DEGRADES NOMMES
     Repli sRGB ici, meme geometrie interpolee « in oklch » dans le
     bloc @supports plus bas : pas de zone morte grisatre au milieu.
     ============================================================ */

  /* -- chaud : terracotta -> brun brule (aplats, boutons, bandeaux de carte) -- */
  --degrade-chaud:linear-gradient(135deg,var(--terre-fond) 0%,var(--chaud-mid) 55%,var(--brun-brule) 100%);
  --degrade-chaud-vif:linear-gradient(135deg,var(--chaud-mid) 0%,var(--chaud-haut) 55%,var(--chaud-bas) 100%);

  /* -- profond : brun clair -> brun brule sombre (blocs prix, panneau, menu) -- */
  --degrade-profond:linear-gradient(150deg,var(--brun-clair) 0%,var(--brun) 58%,var(--brun-fonce) 100%);
  --degrade-profond-h:linear-gradient(90deg,var(--brun) 0%,var(--brun-clair) 100%);
  --degrade-ruban:linear-gradient(180deg,var(--nuit-ruban) 0%,var(--brun-fonce) 100%);

  /* -- voile : assombrissement chaud du hero par-dessus la photo -- */
  --degrade-voile:linear-gradient(100deg,rgba(36,20,12,.95) 0%,rgba(40,22,13,.90) 26%,rgba(46,26,16,.62) 55%,rgba(54,30,18,.24) 100%),
                  linear-gradient(0deg,rgba(34,19,11,.62),transparent 48%);
  --degrade-vignette:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(30,17,10,.5) 100%);

  /* -- doux : fond des sections claires, trois halos d'angle tres etales
        amplitude mesuree 3 a 5 % de clarte oklch : vivant, jamais sale -- */
  --degrade-doux:radial-gradient(118% 82% at 4% -6%,var(--halo-creme),var(--halo-creme-0) 62%),
                 radial-gradient(88% 66% at 104% 4%,var(--halo-abricot),var(--halo-abricot-0) 66%),
                 radial-gradient(132% 96% at 46% 108%,var(--halo-sable),var(--halo-sable-0) 64%);

  /* -- doux-sable : meme principe sur les sections deja sablees -- */
  --degrade-sable:radial-gradient(112% 78% at 96% -8%,var(--halo-creme),var(--halo-creme-0) 60%),
                  radial-gradient(96% 70% at 2% 6%,var(--halo-abricot),var(--halo-abricot-0) 64%),
                  radial-gradient(128% 92% at 54% 106%,var(--halo-sable),var(--halo-sable-0) 62%);

  /* -- sombre : halos d'angle sur les grandes surfaces brunes -- */
  --degrade-sombre:radial-gradient(104% 74% at 14% -8%,var(--halo-braise),var(--halo-braise-0) 60%),
                   radial-gradient(92% 68% at 96% 12%,var(--halo-ambre),var(--halo-ambre-0) 62%),
                   radial-gradient(126% 96% at 52% 110%,var(--halo-nuit),var(--halo-nuit-0) 64%);

  /* -- accents, liseres et reflets -- */
  --degrade-accent:linear-gradient(90deg,var(--terre) 0%,var(--terre-clair) 100%);
  --degrade-fil:linear-gradient(90deg,transparent,var(--sable));
  --degrade-fil-i:linear-gradient(270deg,transparent,var(--sable));
  --degrade-fil-clair:linear-gradient(90deg,transparent,rgba(190,174,137,.7));
  --degrade-fil-clair-i:linear-gradient(270deg,transparent,rgba(190,174,137,.7));
  --degrade-lisere:linear-gradient(90deg,transparent,rgba(190,174,137,.5),transparent);
  --degrade-reflet:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  --degrade-reflet-terre:linear-gradient(90deg,transparent,rgba(192,98,43,.18),transparent);
  --degrade-legende:linear-gradient(180deg,transparent,rgba(43,24,15,.85));
  --degrade-miroite:linear-gradient(110deg,var(--creme-2) 30%,var(--creme-haut) 50%,var(--creme-2) 70%);
  --degrade-scene:radial-gradient(120% 90% at 50% 40%,var(--nuit-scene) 0%,var(--brun) 55%,var(--nuit-fond) 100%);
  --degrade-lueur:radial-gradient(circle,rgba(217,138,78,.34),transparent 62%);
  --degrade-survol:radial-gradient(420px circle at var(--sx,50%) var(--sy,0%),var(--halo-curseur),var(--halo-curseur-0) 62%);
  --degrade-trait:linear-gradient(180deg,rgba(255,255,255,.7),transparent);
  /* -- sceau : la lumiere tourne au lieu de glisser (medaillon rond).
        Point le plus clair borne a #472B1C pour que le script en terracotta
        claire y tienne 4,72:1 -- */
  --degrade-sceau:conic-gradient(from 210deg,#472B1C,var(--brun) 26%,var(--brun-fonce) 50%,var(--brun) 74%,#472B1C);

  /* -- titre : degrade applique au texte des grands chiffres -- */
  --degrade-titre:linear-gradient(100deg,var(--terre-encre),var(--brun-brule));
  --degrade-titre-clair:linear-gradient(100deg,var(--abricot),var(--terre-clair));

  /* -- bord : filet degrade autour des blocs en vedette (decoratif) -- */
  --degrade-bord:linear-gradient(135deg,var(--abricot),var(--terre-fond) 58%,var(--brun-brule));

  --degrade-estompe-g:linear-gradient(90deg,var(--nuit-ruban),transparent);
  --degrade-estompe-d:linear-gradient(270deg,var(--brun-fonce),transparent);

  --ombre:0 18px 40px -22px rgba(59,35,24,.45);
  --ombre-douce:0 10px 30px -20px rgba(59,35,24,.5);
  --r:20px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Parisienne",cursive;
}

/* ============================================================
   INTERPOLATION OKLCH
   Meme geometrie, memes couleurs : seule l'interpolation change.
   Les navigateurs qui l'ignorent gardent le repli sRGB ci-dessus.
   ============================================================ */
@supports (background-image:linear-gradient(in oklch,red,blue)){
  :root{
    --degrade-chaud:linear-gradient(135deg in oklch,var(--terre-fond) 0%,var(--chaud-mid) 55%,var(--brun-brule) 100%);
    --degrade-chaud-vif:linear-gradient(135deg in oklch,var(--chaud-mid) 0%,var(--chaud-haut) 55%,var(--chaud-bas) 100%);
    --degrade-profond:linear-gradient(150deg in oklch,var(--brun-clair) 0%,var(--brun) 58%,var(--brun-fonce) 100%);
    --degrade-profond-h:linear-gradient(90deg in oklch,var(--brun) 0%,var(--brun-clair) 100%);
    --degrade-ruban:linear-gradient(180deg in oklch,var(--nuit-ruban) 0%,var(--brun-fonce) 100%);
    --degrade-doux:radial-gradient(118% 82% at 4% -6% in oklch,var(--halo-creme),var(--halo-creme-0) 62%),
                   radial-gradient(88% 66% at 104% 4% in oklch,var(--halo-abricot),var(--halo-abricot-0) 66%),
                   radial-gradient(132% 96% at 46% 108% in oklch,var(--halo-sable),var(--halo-sable-0) 64%);
    --degrade-sable:radial-gradient(112% 78% at 96% -8% in oklch,var(--halo-creme),var(--halo-creme-0) 60%),
                    radial-gradient(96% 70% at 2% 6% in oklch,var(--halo-abricot),var(--halo-abricot-0) 64%),
                    radial-gradient(128% 92% at 54% 106% in oklch,var(--halo-sable),var(--halo-sable-0) 62%);
    --degrade-sombre:radial-gradient(104% 74% at 14% -8% in oklch,var(--halo-braise),var(--halo-braise-0) 60%),
                     radial-gradient(92% 68% at 96% 12% in oklch,var(--halo-ambre),var(--halo-ambre-0) 62%),
                     radial-gradient(126% 96% at 52% 110% in oklch,var(--halo-nuit),var(--halo-nuit-0) 64%);
    --degrade-accent:linear-gradient(90deg in oklch,var(--terre) 0%,var(--terre-clair) 100%);
    --degrade-miroite:linear-gradient(110deg in oklch,var(--creme-2) 30%,var(--creme-haut) 50%,var(--creme-2) 70%);
    --degrade-scene:radial-gradient(120% 90% at 50% 40% in oklch,var(--nuit-scene) 0%,var(--brun) 55%,var(--nuit-fond) 100%);
    --degrade-sceau:conic-gradient(from 210deg in oklch,#472B1C,var(--brun) 26%,var(--brun-fonce) 50%,var(--brun) 74%,#472B1C);
    --degrade-titre:linear-gradient(100deg in oklch,var(--terre-encre),var(--brun-brule));
    --degrade-titre-clair:linear-gradient(100deg in oklch,var(--abricot),var(--terre-clair));
    --degrade-bord:linear-gradient(135deg in oklch,var(--abricot),var(--terre-fond) 58%,var(--brun-brule));
  }
}

/* Halos derives des jetons du theme : changer une couleur dans l'admin
   recolore tous les degrades. Repli sRGB fige ci-dessus.
   On passe par la couleur relative plutot que par color-mix(...,transparent) :
   color-mix vers transparent perd l'angle de teinte et fait deriver les
   halos clairs vers le rose. Ici la teinte est conservee a l'identique. */
/* teintes intermediaires derivees des ancrages : un changement de --terre-fond
   ou de --brun-brule dans l'admin repeint tout le degrade, pas seulement ses bouts. */
@supports (color:color-mix(in oklch,red,blue)){
  :root{
    --chaud-mid:color-mix(in oklch,var(--terre-fond) 50%,var(--brun-brule));
    --chaud-haut:color-mix(in oklch,var(--terre-fond) 26%,var(--brun-brule));
    --chaud-bas:color-mix(in oklch,var(--brun-brule) 82%,var(--brun));
    --nuit-ruban:color-mix(in oklch,var(--brun) 58%,var(--brun-fonce));
    --nuit-scene:color-mix(in oklch,var(--brun-clair) 89%,var(--terre-fond));
    --nuit-fond:color-mix(in oklch,var(--brun-fonce) 88%,#000);
  }
}

@supports (color:rgb(from red r g b / .5)){
  :root{
    --halo-creme:rgb(from var(--creme-haut) r g b / .92);   --halo-creme-0:rgb(from var(--creme-haut) r g b / 0);
    --halo-abricot:rgb(from var(--abricot) r g b / .26);    --halo-abricot-0:rgb(from var(--abricot) r g b / 0);
    --halo-sable:rgb(from var(--creme-bas) r g b / .88);    --halo-sable-0:rgb(from var(--creme-bas) r g b / 0);
    --halo-braise:rgb(from var(--brun-clair) r g b / .20);  --halo-braise-0:rgb(from var(--brun-clair) r g b / 0);
    --halo-ambre:rgb(from var(--terre-clair) r g b / .03);  --halo-ambre-0:rgb(from var(--terre-clair) r g b / 0);
    --halo-nuit:rgb(from var(--brun-fonce) r g b / .11);    --halo-nuit-0:rgb(from var(--brun-fonce) r g b / 0);
    --halo-curseur:rgb(from var(--terre-clair) r g b / .16);--halo-curseur-0:rgb(from var(--terre-clair) r g b / 0);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--creme);color:var(--texte);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}
/* accueil : contenu un peu plus large que les pages intérieures */
.page-accueil .wrap{width:min(1280px,92vw)}

/* ---------- typo ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.15;letter-spacing:.01em}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--terre);margin:0 0 .9rem
}
.section-title{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:.5rem}
.section-lead{color:var(--texte-doux);max-width:56ch;margin:0 auto}
.center{text-align:center}
.orn{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.1rem auto 0;max-width:220px;color:var(--terre)}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:var(--degrade-fil)}
.orn::after{background:var(--degrade-fil-i)}

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto;z-index:60;transition:background .35s,box-shadow .35s,padding .35s;
  padding:1.1rem 0;
}
header.scrolled{background:rgba(253,244,236,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(190,174,137,.45);padding:.55rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:64px;width:auto;transition:height .35s;filter:drop-shadow(0 2px 10px rgba(0,0,0,.28))}
header.scrolled .logo img{height:48px;filter:none}
header:not(.scrolled) .logo-sombre,header.scrolled .logo-clair{display:none}
header:not(.scrolled) .nav-links a{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.nav-links{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  position:relative;padding-bottom:.25rem;transition:color .25s
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--terre);transition:width .3s}
.nav-links a:hover{color:var(--terre)}
.nav-links a:hover::after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;text-decoration:none;
  background:var(--degrade-chaud);color:#fff;padding:.78rem 1.5rem;border-radius:999px;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  box-shadow:0 12px 26px -14px rgba(192,98,43,.9);transition:transform .25s,box-shadow .25s,background .25s
}
.btn:hover{transform:translateY(-2px);background:var(--degrade-chaud-vif);box-shadow:0 16px 30px -14px rgba(192,98,43,1)}
.btn.ghost{background:transparent;color:var(--brun);border:1px solid var(--sable);box-shadow:none}
.btn.ghost:hover{background:var(--brun);color:#fff;border-color:var(--brun)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;flex-direction:column;gap:5px}
.burger span{display:block;width:26px;height:2px;background:var(--brun);transition:.3s}
header:not(.scrolled) .burger span{background:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:zoom 22s ease-out forwards}
@keyframes zoom{to{transform:scale(1)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:var(--degrade-voile)
}
.hero-inner{position:relative;z-index:2;color:#fff;padding:8rem 0 7rem;max-width:660px}
/* accueil : le hero s'étale sur plus de largeur, le texte ne se tasse plus à gauche */
.page-accueil .hero-inner{max-width:min(62vw,820px)}
.page-accueil .hero .hero-titre{font-size:clamp(2.4rem,5.2vw,4.3rem)}
.page-accueil .hero p{max-width:54ch}
.hero-badge{
  font-weight:400;
  display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:.45rem 1.1rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  backdrop-filter:blur(6px);background:rgba(255,255,255,.08);margin-bottom:1.8rem
}
.hero .hero-titre{font-size:clamp(2.3rem,4.6vw,3.7rem);color:#fff;font-weight:500;line-height:1.08;text-shadow:0 2px 30px rgba(20,11,5,.45)}
.hero .hero-titre em{font-family:var(--script);font-style:normal;color:var(--terre-clair);font-size:1.15em;display:block;margin-top:.1rem;line-height:1.2}
.hero p{color:rgba(255,255,255,.95);font-size:1.1rem;font-weight:400;max-width:44ch;margin:1.5rem 0 2.2rem;text-shadow:0 1px 16px rgba(20,11,5,.6)}
/* version courte du texte hero : réservée au téléphone */
.hero-p-court{display:none}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero-cta .btn.ghost:hover{background:#fff;color:var(--brun);border-color:#fff}
.scroll-hint{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.scroll-hint::after{content:"";width:1px;height:34px;background:var(--degrade-trait);animation:drop 2s infinite}
@keyframes drop{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ---------- bandeau atouts ---------- */
.atouts{background:var(--brun);color:var(--creme-2);padding:2.3rem 0}
.atouts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.atout{display:flex;align-items:center;gap:1rem;justify-content:center}
.atout svg{width:34px;height:34px;stroke:var(--terre-clair);fill:none;stroke-width:1.4;flex-shrink:0}
.atout b{display:block;font-family:var(--serif);font-size:1.18rem;font-weight:600;color:#fff;letter-spacing:.02em}
.atout i{display:block;font-style:normal;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(253,244,236,.62)}

/* ---------- sections ---------- */
section{padding:6rem 0}
.sec-head{margin-bottom:3.4rem}

/* histoire */
.histoire{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.histoire-img{position:relative}
.histoire-img img{border-radius:var(--r);box-shadow:var(--ombre);aspect-ratio:4/3.2;object-fit:cover;width:100%}
.seal{
  position:absolute;right:-26px;bottom:-26px;width:170px;height:170px;border-radius:50%;
  background:var(--brun);color:var(--creme-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--serif);font-size:.98rem;line-height:1.35;padding:1.4rem;
  box-shadow:var(--ombre);border:1px solid rgba(190,174,137,.35)
}
.seal em{font-family:var(--script);font-style:normal;color:var(--terre-clair);font-size:1.45rem;display:block;margin-bottom:.2rem}
.histoire p{color:var(--texte-doux)}
.histoire h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:1.1rem;color:var(--texte)}
.signature{font-family:var(--script);font-size:1.9rem;color:var(--terre);margin:1.4rem 0 1.2rem}

/* cartes tarifs */
.cards{display:grid;gap:2rem}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--blanc);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-douce);
  border:1px solid rgba(190,174,137,.28);display:flex;flex-direction:column;
  transition:transform .35s,box-shadow .35s
}
.card:hover{transform:translateY(-6px);box-shadow:var(--ombre)}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--creme-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.card:hover .card-img img{transform:scale(1.06)}
.card-tag{
  position:absolute;left:1rem;top:1rem;background:var(--degrade-chaud);color:#fff;
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;padding:.4rem .85rem;border-radius:999px;font-weight:500
}
/* carte sans photo : bandeau typographique */
.card-tete{
  position:relative;padding:2rem 1.9rem 1.6rem;color:#fff;
  background:var(--degrade-chaud);
  overflow:hidden
}
.card-tete::after{
  content:"";position:absolute;right:-30px;bottom:-52px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.09)
}
.card-tete svg{width:38px;height:38px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:1.4;margin-bottom:.9rem}
.card-tete h3{font-size:1.7rem;color:#fff;position:relative;z-index:1}
.card-tete p{margin:.3rem 0 0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);position:relative;z-index:1}
.card-body{padding:1.8rem 1.9rem 2rem;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.55rem;margin-bottom:.25rem}
.card-note{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terre);margin:0 0 1.2rem}

/* liste prix avec pointillés */
.prix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.prix li{display:flex;align-items:baseline;gap:.5rem;font-size:.96rem}
.prix .nom small{display:block;color:var(--texte-doux);font-size:.78rem}
.prix .dots{flex:1;border-bottom:1px dotted rgba(122,92,74,.45);transform:translateY(-.28em);min-width:14px}
.prix .val{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--terre);white-space:nowrap}
.prix .val i{font-style:normal;font-family:var(--sans);font-size:.72rem;color:var(--texte-doux);font-weight:400;letter-spacing:.06em}

/* bouton d'ajout au panier dans les listes de tarifs */
.prix .plus{
  flex-shrink:0;width:26px;height:26px;margin-left:.55rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(192,98,43,.55);background:none;color:var(--terre);
  font-size:1rem;line-height:1;display:grid;place-items:center;transition:.2s
}
.prix .plus:hover{background:var(--degrade-chaud);color:#fff;transform:scale(1.1)}
.prix .plus:active{transform:scale(.94)}
.ajout-large{
  width:100%;justify-content:center;margin-top:.9rem;padding:.6rem 1rem;font-size:.68rem
}
.formule .ajout-large{margin-top:.8rem}
.mini-body .ajout-large{margin-top:1.1rem}

/* entremets */
.formules{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.8rem}
.formule{
  background:var(--creme);border:1px solid rgba(190,174,137,.45);border-radius:var(--r);
  padding:1.6rem 1.2rem;text-align:center;transition:transform .3s,border-color .3s
}
.formule:hover{transform:translateY(-4px);border-color:var(--terre)}
.formule span{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-doux)}
.formule b{display:block;font-family:var(--serif);font-size:2.9rem;color:var(--terre);font-weight:600;line-height:1.1;margin-top:.3rem}
.parfums{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.parfums li{break-inside:avoid;padding:.42rem 0 .42rem 1.5rem;position:relative;font-size:.97rem}
.parfums li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--terre-clair)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
.split-img img{border-radius:var(--r);box-shadow:var(--ombre);width:100%;aspect-ratio:1/1;object-fit:cover}
.panel{background:var(--blanc);border:1px solid rgba(190,174,137,.4);border-radius:var(--r);padding:2.2rem 2.3rem;box-shadow:var(--ombre-douce)}
.panel h3{font-size:1.7rem;margin-bottom:.2rem}

/* duo vacherin / mignardises */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-top:2rem}
.mini{display:grid;grid-template-columns:1fr 1fr;background:var(--blanc);border:1px solid rgba(190,174,137,.4);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-douce)}
.mini img{width:100%;height:100%;object-fit:cover;min-height:220px}
.mini-body{padding:1.7rem 1.6rem;display:flex;flex-direction:column;justify-content:center}
.mini-body h3{font-size:1.45rem}
.mini-body .p{font-family:var(--serif);font-size:2.4rem;color:var(--terre);font-weight:600;line-height:1.1;margin:.5rem 0 0}
.mini-body .p i{font-style:normal;font-family:var(--sans);font-size:.75rem;color:var(--texte-doux);letter-spacing:.08em}
.mini-body small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);margin-top:.4rem}

/* bloc prix sans photo (vacherin, cakes) */
.bloc-prix{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:var(--degrade-profond);color:var(--creme-2);
  padding:2.4rem 1.6rem;position:relative;overflow:hidden;min-height:220px
}
.bloc-prix::after{content:"";position:absolute;left:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(217,138,78,.13)}
.bloc-prix svg{width:40px;height:40px;stroke:var(--terre-clair);fill:none;stroke-width:1.3;margin-bottom:.8rem;position:relative}
.bloc-prix .gros{font-family:var(--serif);font-size:3rem;font-weight:600;color:var(--terre-clair);line-height:1;position:relative}
.bloc-prix .gros i{font-style:normal;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;color:rgba(253,244,236,.6)}
.bloc-prix span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(253,244,236,.62);margin-top:.5rem;position:relative}

/* galerie */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.galerie a{
  display:block;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:1/1;
  box-shadow:var(--ombre-douce);background:var(--creme-2)
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.galerie a::after{
  content:attr(data-legende);position:absolute;inset:auto 0 0;padding:2.2rem .9rem .8rem;
  background:var(--degrade-legende);color:#fff;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .35s
}
.galerie a:hover img{transform:scale(1.07)}
.galerie a:hover::after{opacity:1}
.galerie a.large{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* événements */
.events{background:var(--brun);color:var(--creme-2);position:relative;overflow:hidden}
.events .ev-fond{
  position:absolute;inset:-10px;opacity:.11;background-position:center;background-size:cover;
  background-repeat:no-repeat;filter:blur(3px) saturate(.55)
}
.card-pied{
  margin:auto 0 0;padding-top:1.2rem;font-size:.79rem;color:var(--texte-doux);
  border-top:1px solid rgba(190,174,137,.35)
}
.prix + .card-pied{margin-top:1.4rem}
.events .wrap{position:relative;z-index:2}
.events h2{color:#fff}
.events .section-lead{color:rgba(253,244,236,.72)}
.events .orn::before{background:var(--degrade-fil-clair)}
.events .orn::after{background:var(--degrade-fil-clair-i)}
.ev-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:3rem}
.ev{
  border:1px solid rgba(190,174,137,.32);border-radius:var(--r);padding:2rem 1rem;text-align:center;
  background:rgba(255,255,255,.04);transition:background .3s,transform .3s,border-color .3s
}
.ev:hover{background:rgba(255,255,255,.09);transform:translateY(-5px);border-color:var(--terre-clair)}
.ev svg{width:40px;height:40px;stroke:var(--terre-clair);fill:none;stroke-width:1.3;margin:0 auto .9rem}
.ev b{display:block;font-family:var(--serif);font-size:1.2rem;color:#fff;font-weight:600}
.ev span{display:block;font-size:.78rem;color:rgba(253,244,236,.6);margin-top:.25rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3.5rem;align-items:start}
.infos{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.5rem}
.infos li{display:flex;gap:1.1rem;align-items:flex-start}
.ico{width:46px;height:46px;border-radius:50%;background:var(--creme-2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ico svg{width:20px;height:20px;stroke:var(--terre);fill:none;stroke-width:1.6}
.infos b{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--texte-doux);font-weight:500;margin-bottom:.15rem}
.infos a,.infos p{margin:0;font-family:var(--serif);font-size:1.32rem;color:var(--brun);text-decoration:none;font-weight:500;line-height:1.35}
.infos a:hover{color:var(--terre)}
.infos small{display:block;font-family:var(--sans);font-size:.85rem;color:var(--texte-doux);font-weight:300}
form{background:var(--blanc);border:1px solid rgba(190,174,137,.4);border-radius:var(--r);padding:2.4rem;box-shadow:var(--ombre-douce)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-doux);margin:1.1rem 0 .45rem;font-weight:500}
input,textarea,select{
  width:100%;padding:.85rem 1rem;border:1px solid rgba(190,174,137,.6);border-radius:12px;
  background:var(--creme);font-family:var(--sans);font-size:.98rem;font-weight:300;color:var(--texte);
  transition:border-color .25s,box-shadow .25s
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--terre);box-shadow:0 0 0 3px rgba(192,98,43,.15)}
textarea{resize:vertical;min-height:110px}
form .btn{width:100%;justify-content:center;margin-top:1.7rem}
.form-note{font-size:.78rem;color:var(--texte-doux);text-align:center;margin:.9rem 0 0}

/* footer */
footer{background:var(--brun);color:rgba(253,244,236,.72);padding:4rem 0 2rem;font-size:.92rem}
.f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(190,174,137,.22)}
.f-top h4,.f-top .pied-titre{color:#fff;font-size:1.15rem;margin-bottom:1rem;letter-spacing:.04em}
.f-top ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.f-top a{text-decoration:none;transition:color .25s}
.f-top a:hover{color:var(--terre-clair)}
.f-logo .logo-txt b{color:#fff}
.f-logo .logo-txt span{color:rgba(253,244,236,.55)}
.f-logo p{margin:1.2rem 0 0;max-width:34ch;color:rgba(253,244,236,.6)}
.tva{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;border:1px solid rgba(190,174,137,.35);border-radius:999px;padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.1em;color:var(--creme-2)}
.tva b{font-family:var(--serif);font-size:1.05rem;color:#fff}
.f-bot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.8rem;font-size:.8rem;color:rgba(253,244,236,.5)}
.credits{margin-top:.7rem;font-size:.72rem;color:rgba(253,244,236,.38);line-height:1.6}

/* apparition au scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.on{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .histoire,.split,.contact-grid{grid-template-columns:1fr;gap:2.6rem}
  .seal{right:auto;left:50%;transform:translateX(-50%);bottom:-48px;width:142px;height:142px;font-size:.88rem;padding:1rem}
  .histoire-img{margin-bottom:3.4rem}
  .duo{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .galerie a.large{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .ev-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:1.1rem}
  .atouts .wrap{grid-template-columns:1fr;gap:1.4rem}
  .atout{justify-content:flex-start}
  .f-top{grid-template-columns:1fr;gap:2rem}
  .nav-links{
    position:fixed;inset:0 0 auto;padding:6.5rem 2rem 2.5rem;background:var(--creme);
    flex-direction:column;gap:1.4rem;box-shadow:var(--ombre);transform:translateY(-110%);
    transition:transform .4s cubic-bezier(.22,1,.36,1)
  }
  .nav-links.open{transform:none}
  header:not(.scrolled) .nav-links a{color:var(--brun);text-shadow:none}
  .nav-links a{font-size:1rem}
  .burger{display:flex}
  .nav > .btn{display:none}
  section{padding:4.2rem 0}
  .parfums{columns:1}
}
@media (max-width:560px){
  .formules,.f-row{grid-template-columns:1fr}
  .mini{grid-template-columns:1fr}
  .ev-grid{grid-template-columns:1fr}
  .panel,form{padding:1.6rem}
  .hero-inner{padding-top:7rem}
}

/* ---- téléphone : on laisse respirer ---- */
@media (max-width:640px){
  .wrap{width:min(1180px,89vw)}
  /* le hero reprend toute la largeur (la règle desktop 62vw l'écraserait) */
  .page-accueil .hero-inner{max-width:none}
  .hero-inner{padding:7.5rem 0 9rem}
  .hero-badge{margin-bottom:1.4rem}
  .hero .hero-titre{font-size:clamp(2.1rem,9vw,2.9rem);line-height:1.12}
  /* sur téléphone : le texte long cède la place à une phrase courte, entière */
  .hero-p-long{display:none}
  .hero-p-court{display:block;font-size:1.05rem;margin:1.3rem 0 2rem;max-width:32ch}
  section{padding:3.9rem 0}
  .sec-head{margin-bottom:2.6rem}
  .cards,.produits,.duo,.galerie{gap:1.35rem}
  .card-body{padding:1.9rem 1.7rem 2.1rem}
  .produit .corps{padding:1.5rem 1.6rem 1.7rem;gap:.6rem}
  .histoire p + p{margin-top:1.1rem}
  .page-tete{padding:8rem 0 3.2rem}
  .page-tete p{margin-top:1.1rem}
  .hero .hero-titre{line-height:1.14}
  .hero p{margin:1.4rem 0 2rem}
  .hero-cta{gap:.8rem}
  .formule{padding:1.9rem 1.3rem}
  .prix li{padding:.35rem .35rem}
  .prix{gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   MULTI-PAGES · INTRO LOGO · BOUTIQUE · ADMIN
   ============================================================ */

/* --- intro animée du logo --- */
#intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--degrade-scene);
  overflow:hidden
}
/* sortie : PAS de fondu du calque entier (qui laissait voir le fond crème =
   flash blanc). Les volets sont opaques et s'écartent sur la page. */
#intro.parti{pointer-events:none;background:transparent;transition:background 0s .34s}
#intro .volet{position:absolute;left:0;right:0;height:50.6%;background:var(--degrade-scene);z-index:3;transition:transform .85s .34s cubic-bezier(.76,0,.24,1)}
#intro .volet.haut{top:0}
#intro .volet.bas{bottom:0}
#intro.parti .volet.haut{transform:translateY(-101%)}
#intro.parti .volet.bas{transform:translateY(101%)}
/* la scène s'efface d'abord, puis les rideaux s'ouvrent sur le hero */
#intro .scene,#intro .bloom{transition:opacity .34s ease,transform .34s ease}
#intro.parti .scene{opacity:0;transform:translateY(-10px) scale(.97)}
#intro.parti .bloom{opacity:0}
#intro.parti .passer{opacity:0}
#intro .scene{position:relative;z-index:4;text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center}
/* une seule lueur, douce, qui monte lentement — plus de halo pulsé ni d'anneaux */
#intro .bloom{
  position:absolute;left:50%;top:46%;width:min(78vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.86);
  background:var(--degrade-lueur);filter:blur(30px);opacity:0;z-index:1;
  animation:bloomIn 2.4s cubic-bezier(.2,.7,.2,1) forwards
}
@keyframes bloomIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  60%{opacity:.85}
  100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
}
#intro .logo-anim{
  position:relative;z-index:2;width:min(52vw,340px);
  animation:logoEntree 1.5s cubic-bezier(.16,1,.3,1) both
}
/* entrée calme, SANS filter ni mix-blend-mode : sur Safari iOS ces effets
   remplissent le transparent du PNG en blanc (rectangle blanc sur le logo).
   Opacité + échelle uniquement = robuste partout. */
@keyframes logoEntree{
  0%{opacity:0;transform:scale(.94)}
  100%{opacity:1;transform:none}
}
#intro .logo-boite{position:relative;display:inline-block}
/* fin filet doré qui s'ouvre sous le logo */
#intro .trait{
  width:0;height:1px;margin:1.5rem 0 0;
  background:linear-gradient(90deg,transparent,var(--terre-clair) 20%,var(--terre-clair) 80%,transparent);
  animation:traitOuvre 1s 1s cubic-bezier(.6,0,.2,1) forwards
}
@keyframes traitOuvre{to{width:min(58vw,240px)}}
#intro .accroche{
  margin-top:1.3rem;font-family:var(--script);font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--terre-clair);
  opacity:0;animation:monte 1s 1.25s cubic-bezier(.2,.9,.3,1) forwards
}
#intro .sous{
  margin-top:.5rem;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(253,244,236,.6);
  opacity:0;animation:monte 1s 1.5s cubic-bezier(.2,.9,.3,1) forwards
}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#intro .passer{
  position:absolute;right:1.6rem;bottom:1.4rem;z-index:5;background:none;border:1px solid rgba(253,244,236,.3);
  color:rgba(253,244,236,.72);border-radius:999px;padding:.5rem 1.1rem;cursor:pointer;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;transition:.25s
}
#intro .passer:hover{background:rgba(253,244,236,.12);color:#fff}
body.intro-ouverte{overflow:hidden}
.logo img{transition:height .35s,transform .5s cubic-bezier(.2,.9,.3,1)}
.logo:hover img{transform:scale(1.06) rotate(-2deg)}

/* --- en-tête des pages intérieures --- */
.page-tete{
  position:relative;padding:11rem 0 4.5rem;background:var(--brun);color:var(--creme-2);overflow:hidden;text-align:center
}
.page-tete .tete-fond{position:absolute;inset:-10px;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.2;filter:blur(2px) saturate(.7)}
.page-tete .wrap{position:relative;z-index:2}
.page-tete h1{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff}
.page-tete p{color:rgba(253,244,236,.72);max-width:56ch;margin:.8rem auto 0}
.fil{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--terre-clair);margin-bottom:.9rem}
.fil a{text-decoration:none;color:rgba(253,244,236,.6)}
.fil a:hover{color:#fff}
header.interne{background:rgba(253,244,236,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(190,174,137,.45)}

/* --- boutique --- */
.produits{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.produit{
  background:var(--blanc);border:1px solid rgba(190,174,137,.35);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--ombre-douce);transition:transform .3s,box-shadow .3s
}
.produit:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.produit .vignette{aspect-ratio:16/11;background:var(--creme-2);overflow:hidden;position:relative}
.produit .vignette > img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.produit:hover .vignette img{transform:scale(1.06)}
.produit .sans-img{
  height:100%;display:grid;place-items:center;padding:1.4rem;position:relative;overflow:hidden;
  background:var(--degrade-chaud)
}
.produit .sans-img::after{
  content:"";position:absolute;right:-38px;bottom:-58px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.1)
}
.produit .sans-img img{position:relative;z-index:1;width:56%;max-width:132px;height:auto;object-fit:contain;opacity:.92}
.produit .corps{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.produit h3{font-size:1.3rem}
.produit .desc{font-size:.88rem;color:var(--texte-doux);flex:1}
.produit .ligne{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.4rem}
.produit .tarif{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--terre)}
.produit .tarif i{font-style:normal;font-family:var(--sans);font-size:.7rem;color:var(--texte-doux)}
.qte{display:flex;align-items:center;border:1px solid rgba(190,174,137,.6);border-radius:999px;overflow:hidden}
.qte button{width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--terre);font-size:1.1rem;line-height:1}
.qte button:hover{background:var(--creme-2)}
.qte span{min-width:26px;text-align:center;font-size:.9rem}
.mini-note{font-size:.72rem;color:var(--texte-doux)}

/* panier */
.panier-flottant{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:70;background:var(--brun);color:#fff;border:0;cursor:pointer;
  border-radius:999px;padding:.9rem 1.4rem;display:flex;align-items:center;gap:.7rem;box-shadow:var(--ombre);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;transition:transform .25s
}
.panier-flottant:hover{transform:translateY(-3px)}
.panier-flottant b{background:var(--degrade-chaud);border-radius:999px;padding:.1rem .55rem;font-size:.8rem}
.panier-flottant[hidden]{display:none}
.tiroir{position:fixed;inset:0;z-index:90;pointer-events:none}
.tiroir[hidden]{display:none}
.tiroir .voile{position:absolute;inset:0;background:rgba(43,24,15,.55);opacity:0;transition:opacity .35s}
.tiroir .contenu{
  position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:var(--creme);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;box-shadow:var(--ombre)
}
.tiroir.ouvert{pointer-events:auto}
.tiroir.ouvert .voile{opacity:1}
.tiroir.ouvert .contenu{transform:none}
.tiroir header{position:static;padding:1.4rem 1.5rem;border-bottom:1px solid rgba(190,174,137,.4);display:flex;justify-content:space-between;align-items:center;background:none;box-shadow:none}
.tiroir header h3{font-size:1.4rem}
.tiroir .fermer{background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--texte-doux);line-height:1}
.tiroir .lignes{flex:1;overflow-y:auto;padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.ligne-panier{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center}
.ligne-panier img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.ligne-panier .vide{width:56px;height:56px;border-radius:10px;background:var(--creme-2)}
.ligne-panier b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600}
.ligne-panier small{color:var(--texte-doux);font-size:.78rem}
.ligne-panier .sup{background:none;border:0;color:var(--texte-doux);cursor:pointer;font-size:1.1rem}
.ligne-panier .sup:hover{color:var(--terre)}
.tiroir .pied{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid rgba(190,174,137,.4)}
.tiroir .total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.tiroir .total b{font-family:var(--serif);font-size:1.9rem;color:var(--terre)}
.tiroir .pied .btn{width:100%;justify-content:center}
.panier-vide{text-align:center;color:var(--texte-doux);padding:3rem 1rem;font-size:.95rem}

/* messages */
.bandeau-demo{
  background:var(--degrade-profond-h);color:var(--creme-2);text-align:center;
  padding:.55rem 1rem;font-size:.74rem;letter-spacing:.1em;position:relative;z-index:80
}
.bandeau-demo a{color:var(--terre-clair)}
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,20px);z-index:120;background:var(--brun);color:#fff;
  padding:.9rem 1.5rem;border-radius:999px;box-shadow:var(--ombre);opacity:0;transition:.35s;font-size:.9rem
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1280px) and (min-width:981px){
  .nav-links{gap:1.05rem}
  .nav-links a{font-size:.74rem;letter-spacing:.07em}
  .nav > .btn{padding:.7rem 1.1rem;font-size:.7rem}
  .logo img{height:52px!important}
}
@media (max-width:980px){
  .produits{grid-template-columns:repeat(2,1fr)}
  .page-tete{padding:8.5rem 0 3.4rem}
}
@media (max-width:640px){
  .produits{grid-template-columns:1fr}
}

/* ============================================================
   FINITION — micro-détails, matière et mouvement
   ============================================================ */

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* transition douce d'une page à l'autre (navigateurs compatibles) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtSort .22s var(--sortie) both}
::view-transition-new(root){animation:vtEntre .38s var(--ressort) both}
@keyframes vtSort{to{opacity:0}}
@keyframes vtEntre{from{opacity:0;transform:translateY(10px)}}

:root{
  --ressort:cubic-bezier(.22,1,.36,1);
  --sortie:cubic-bezier(.4,0,.2,1);
  --ombre-1:0 1px 2px rgba(59,35,24,.06),0 4px 10px -6px rgba(59,35,24,.18);
  --ombre-2:0 2px 4px rgba(59,35,24,.07),0 12px 26px -14px rgba(59,35,24,.32);
  --ombre-3:0 4px 8px rgba(59,35,24,.08),0 26px 50px -24px rgba(59,35,24,.42);
}

/* --- typographie : coupures et chiffres --- */
h1,h2,h3,.section-title,.hero .hero-titre,.card-body h3,.produit h3{text-wrap:balance}
.section-lead,.card-note,.desc,.mini-note,.prix .nom small,.histoire p,.ev span,.f-logo p{text-wrap:pretty}
.val,.tarif,.gros,.formule b,.mini-body .p,.tiroir .total b,.qte span,.panier-flottant b{font-variant-numeric:tabular-nums}

/* --- images : liseré neutre pour décoller du fond --- */
.card-img img,.split-img img,.histoire-img img,.galerie img,.produit .vignette > img,.mini img,.ligne-panier img{
  outline:1px solid rgba(0,0,0,.08);outline-offset:-1px
}

/* --- grain discret : donne de la matière au crème --- */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply
}

/* --- accessibilité : anneau de focus visible et cohérent --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--terre);outline-offset:3px;border-radius:4px
}

/* --- barre de progression de lecture --- */
#progression{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:65;transform:scaleX(0);transform-origin:0 50%;
  background:var(--degrade-accent);will-change:transform
}

/* --- en-tête : se rétracte en descendant, revient en remontant --- */
header{will-change:transform}
header.cachee{transform:translateY(-102%)}
header{transition-property:background,box-shadow,padding,transform;transition-duration:.35s;transition-timing-function:var(--sortie)}

/* --- boutons : reflet au survol + appui tactile --- */
.btn{position:relative;overflow:hidden;transition-property:transform,background,box-shadow,color,border-color;transition-duration:.25s;transition-timing-function:var(--sortie)}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%) skewX(-18deg);
  background:var(--degrade-reflet);
  transition:transform .65s var(--sortie)
}
.btn:hover::after{transform:translateX(120%) skewX(-18deg)}
.btn:active{transform:scale(.965)}
.btn.ghost::after{background:var(--degrade-reflet-terre)}

/* --- cartes : profondeur en couches --- */
.card,.produit,.panel,form,.mini{box-shadow:var(--ombre-1);transition-property:transform,box-shadow,border-color;transition-duration:.4s;transition-timing-function:var(--sortie)}
.card:hover,.produit:hover{transform:translateY(-6px);box-shadow:var(--ombre-3)}
.card-img,.produit .vignette{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}

/* --- listes de tarifs : ligne survolée + zone de clic confortable --- */
.prix li{padding:.1rem .35rem;margin:0 -.35rem;border-radius:9px;transition:background .22s var(--sortie)}
.prix li:hover{background:rgba(192,98,43,.055)}
.prix .plus{position:relative;transition-property:transform,background,color,box-shadow;transition-duration:.2s}
.prix .plus::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.prix .plus:active{transform:scale(.9)}
.prix .plus.ajoute{animation:pastilleOk .5s var(--ressort)}
@keyframes pastilleOk{0%{transform:scale(1)}40%{transform:scale(1.35);background:var(--terre);color:#fff}100%{transform:scale(1)}}

/* --- pastille du panier : rebond à l'ajout --- */
.panier-flottant{transition-property:transform,box-shadow,opacity;transition-duration:.3s;transition-timing-function:var(--ressort)}
.panier-flottant b{transition:transform .35s var(--ressort);display:inline-block}
.panier-flottant.pulse b{animation:rebond .55s var(--ressort)}
@keyframes rebond{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.92)}100%{transform:scale(1)}}

/* --- projectile « ajouté au panier » --- */
.vole{
  position:fixed;z-index:130;border-radius:50%;object-fit:cover;pointer-events:none;
  box-shadow:var(--ombre-2);outline:2px solid rgba(255,255,255,.6);outline-offset:-2px
}

/* --- tiroir du panier : ressort à l'ouverture --- */
.tiroir .contenu{transition:transform .52s var(--ressort)}
.tiroir .voile{transition:opacity .4s var(--sortie)}
.ligne-panier{animation:ligneEntre .4s var(--ressort) both}
@keyframes ligneEntre{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* --- apparitions : variantes directionnelles et enchaînées --- */
.reveal{opacity:0;transform:translateY(24px);filter:blur(6px);
  transition-property:opacity,transform,filter;transition-duration:.85s;transition-timing-function:var(--ressort)}
.reveal.on{opacity:1;transform:none;filter:none}
.reveal-g{transform:translateX(-28px)}
.reveal-d{transform:translateX(28px)}
.cascade > *{opacity:0;transform:translateY(18px);
  transition-property:opacity,transform;transition-duration:.7s;transition-timing-function:var(--ressort)}
.cascade.on > *{opacity:1;transform:none}

/* --- hero : parallaxe douce et entrée en cascade --- */
.hero-bg img{will-change:transform}
.hero-inner > *{opacity:0;transform:translateY(26px);animation:heroEntre .95s var(--ressort) forwards}
.hero-inner > *:nth-child(1){animation-delay:.15s}
.hero-inner > *:nth-child(2){animation-delay:.28s}
.hero-inner > *:nth-child(3){animation-delay:.41s}
.hero-inner > *:nth-child(4){animation-delay:.54s}
@keyframes heroEntre{to{opacity:1;transform:none}}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--degrade-vignette)
}

/* --- séparateur de sections : liseré chaud --- */
section + section{position:relative}
section + section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1180px,92vw);height:1px;background:var(--degrade-lisere)
}
.events + section::before,section.events::before{display:none}

/* --- galerie : visionneuse --- */
.galerie a{transition:transform .5s var(--ressort),box-shadow .4s var(--sortie)}
.galerie a:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--ombre-3)}
.visionneuse{
  position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:3vmin;
  background:rgba(28,16,9,.94);opacity:0;pointer-events:none;transition:opacity .35s var(--sortie);
  backdrop-filter:blur(6px)
}
.visionneuse.on{opacity:1;pointer-events:auto}
.visionneuse img{
  max-width:min(1100px,92vw);max-height:86vh;border-radius:16px;box-shadow:var(--ombre-3);
  transform:scale(.94);transition:transform .45s var(--ressort);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px
}
.visionneuse.on img{transform:none}
.visionneuse .legende{
  position:absolute;bottom:max(3vmin,1.6rem);left:0;right:0;text-align:center;color:rgba(253,244,236,.86);
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase
}
.visionneuse button{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1;
  display:grid;place-items:center;transition-property:background,transform;transition-duration:.2s
}
.visionneuse button:hover{background:rgba(255,255,255,.2)}
.visionneuse button:active{transform:scale(.92)}
.visionneuse .fermer{top:max(3vmin,1.2rem);right:max(3vmin,1.2rem)}
.visionneuse .prec{left:max(3vmin,1.2rem);top:50%;margin-top:-24px}
.visionneuse .suiv{right:max(3vmin,1.2rem);top:50%;margin-top:-24px}

/* --- barre d'action mobile --- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:66;display:none;gap:.6rem;padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(253,244,236,.95);backdrop-filter:blur(12px);border-top:1px solid rgba(190,174,137,.45);
  transform:translateY(110%);transition:transform .4s var(--ressort)
}
.barre-mobile.on{transform:none}
.barre-mobile .btn{flex:1;justify-content:center;padding:.8rem 1rem}

/* --- corrections de détail --- */
.burger{width:44px;height:44px;align-items:center;justify-content:center}
.burger span{transition-property:transform,opacity,background;transition-duration:.3s;transition-timing-function:var(--sortie)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.toast{transition-property:opacity,transform;transition-duration:.35s;transition-timing-function:var(--ressort);box-shadow:var(--ombre-3)}
.formule{transition-property:transform,border-color,box-shadow;transition-duration:.3s}
.formule:hover{box-shadow:var(--ombre-2)}
.ev{transition-property:background,transform,border-color;transition-duration:.35s;transition-timing-function:var(--sortie)}
.qte button{width:40px;height:40px;transition-property:background,color;transition-duration:.18s}
.qte button:active{background:var(--degrade-chaud);color:#fff}
.nav-links a{padding:.45rem 0}
.infos a{transition:color .2s var(--sortie)}

@media (max-width:980px){
  .barre-mobile{display:flex}
  body{padding-bottom:76px}
  .panier-flottant{bottom:5.6rem}
}

@media (prefers-reduced-motion:reduce){
  #progression,.hero-inner > *,.cascade > *{animation:none!important;transform:none!important;opacity:1!important}
  .btn::after{display:none}
  .reveal{filter:none}
}

/* ============================================================
   PANIER COMPLET · OPTIONS · CONTRÔLES DE COMMANDE
   ============================================================ */

/* options d'un produit */
.opt{display:block;margin:.55rem 0 0}
.opt > span{
  display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);margin-bottom:.25rem
}
.opt select,.opt input{
  width:100%;padding:.55rem .7rem;border:1px solid rgba(190,174,137,.6);border-radius:11px;
  background:var(--creme);font-family:var(--sans);font-size:.9rem;font-weight:300;color:var(--texte);
  transition-property:border-color,box-shadow;transition-duration:.2s
}
.opt select:focus,.opt input:focus{outline:0;border-color:var(--terre);box-shadow:0 0 0 3px rgba(192,98,43,.15)}

/* messages d'erreur */
.err,.err-produit{
  color:#b23c22;font-size:.8rem;margin:.45rem 0 0;display:flex;align-items:center;gap:.4rem
}
.err::before,.err-produit::before{content:"⚠︎";font-size:.85rem}
.err[hidden],.err-produit[hidden]{display:none}
.err.bandeau{
  background:rgba(178,60,34,.09);border:1px solid rgba(178,60,34,.28);border-radius:12px;
  padding:.7rem .9rem;margin-top:1.2rem
}
input.invalide,select.invalide{border-color:#b23c22;box-shadow:0 0 0 3px rgba(178,60,34,.12)}

/* alertes de panier */
.alerte-panier{display:flex;flex-direction:column;gap:.3rem;margin:0 0 .9rem}
.alerte-panier span{
  font-size:.78rem;color:#8a3a22;background:rgba(178,60,34,.09);
  border-radius:9px;padding:.4rem .6rem
}
.alerte-panier[hidden]{display:none}

/* lignes du tiroir */
.ligne-panier{grid-template-columns:56px 1fr auto;align-items:start}
.lp-corps{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.lp-opts{color:var(--terre);font-size:.74rem;line-height:1.35}
.lp-qte{align-self:flex-start}
.lp-qte button{width:30px;height:30px}
.lp-qte span{min-width:28px;font-size:.85rem}
.lp-fin{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;white-space:nowrap}
.vider-panier{
  align-self:center;background:none;border:0;cursor:pointer;color:var(--texte-doux);
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem;margin-top:.4rem;transition:color .2s
}
.vider-panier:hover{color:#b23c22}
.btn.inactif{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.inactif:hover{transform:none;background:var(--degrade-chaud)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* récapitulatif de commande */
.recap-total{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid rgba(190,174,137,.5);margin:1.2rem 0 1rem;padding-top:1rem
}
.recap-total span{letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--texte-doux)}
.recap-total b{font-family:var(--serif);font-size:2rem;color:var(--terre);font-variant-numeric:tabular-nums}
.recap-lignes li{align-items:flex-start}
.recap-q{display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;color:var(--texte-doux)}
.recap-q button{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(190,174,137,.7);background:none;
  color:var(--terre);cursor:pointer;font-size:.85rem;line-height:1;display:grid;place-items:center;
  transition-property:background,color,transform;transition-duration:.18s
}
.recap-q button:hover{background:var(--degrade-chaud);color:#fff}
.recap-q button:active{transform:scale(.9)}

/* page de confirmation */
.ref-commande{
  display:inline-flex;align-items:center;gap:.6rem;border:1px dashed rgba(190,174,137,.8);
  border-radius:999px;padding:.5rem 1.1rem;margin:.4rem 0 1.4rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)
}
.ref-commande b{font-family:var(--serif);font-size:1.05rem;color:var(--terre);letter-spacing:.04em}

/* ============================================================
   FINITION 2 — rythme de page, matière, micro-mouvements
   ============================================================ */

/* --- arrivée des images : flou qui se lève --- */
img{opacity:1}
img[data-charge]{opacity:0;filter:blur(12px);transform:scale(1.02);
  transition:opacity .7s var(--sortie),filter .8s var(--sortie),transform .9s var(--ressort)}
img[data-charge="ok"]{opacity:1;filter:none;transform:none}
.cadre-image{background:var(--degrade-miroite);
  background-size:220% 100%;animation:miroite 1.6s linear infinite}
@keyframes miroite{to{background-position:-220% 0}}

/* --- ruban défilant entre les sections --- */
.ruban{
  background:var(--degrade-ruban);color:var(--creme-2);padding:1rem 0;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 rgba(190,174,137,.28),inset 0 -1px 0 rgba(190,174,137,.28)
}
.ruban::before,.ruban::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none
}
.ruban::before{left:0;background:var(--degrade-estompe-g)}
.ruban::after{right:0;background:var(--degrade-estompe-d)}
.ruban-piste{display:flex;width:max-content;animation:defile 42s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban span{
  display:inline-flex;align-items:center;gap:1.1rem;padding:0 1.5rem;white-space:nowrap;
  font-family:var(--serif);font-size:1.24rem;letter-spacing:.03em;color:rgba(253,244,236,.9)
}
.ruban span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--terre-clair);opacity:.8}
@keyframes defile{to{transform:translateX(-50%)}}

/* --- raccords courbes entre sections claires et sombres --- */
.courbe{position:absolute;left:0;right:0;height:52px;pointer-events:none;z-index:2;line-height:0}
.courbe svg{width:100%;height:100%;display:block}
.courbe.haut{top:-1px}
.courbe.bas{bottom:-1px}
.events{isolation:isolate}

/* --- filigrane de marque dans le pied de page --- */
footer{position:relative;overflow:hidden}
footer::after{
  content:"LR";position:absolute;right:-1.5rem;bottom:-3.5rem;font-family:var(--serif);font-weight:700;
  font-size:clamp(9rem,20vw,17rem);line-height:.8;color:rgba(190,174,137,.055);pointer-events:none;
  letter-spacing:-.04em
}
footer .wrap{position:relative;z-index:1}

/* --- halo qui suit le curseur sur les cartes --- */
.card,.produit{position:relative}
.card::before,.produit::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .35s var(--sortie);
  background:var(--degrade-survol)
}
.card:hover::before,.produit:hover::before{opacity:1}
.card > *,.produit > *{position:relative;z-index:2}

/* --- compteur de prix --- */
.formule b,.bloc-prix .gros{font-variant-numeric:tabular-nums}

/* --- ornement qui se déploie --- */
.orn::before,.orn::after{transform:scaleX(0);transform-origin:right center;transition:transform .9s var(--ressort) .15s}
.orn::after{transform-origin:left center}
.reveal.on .orn::before,.reveal.on .orn::after,.sec-head.on .orn::before,.sec-head.on .orn::after{transform:scaleX(1)}

/* --- menu mobile plein écran --- */
@media (max-width:980px){
  .nav-links{
    inset:0;height:100dvh;padding:7rem 2.2rem 3rem;justify-content:center;gap:0;
    background:var(--degrade-profond);transform:translateY(-100%);
    transition:transform .55s var(--ressort)
  }
  .nav-links li{border-bottom:1px solid rgba(190,174,137,.16)}
  .nav-links li:first-child{border-top:1px solid rgba(190,174,137,.16)}
  header:not(.scrolled) .nav-links a,.nav-links a{
    color:var(--creme-2)!important;text-shadow:none!important;display:block;padding:1.05rem .2rem;
    font-family:var(--serif);font-size:1.5rem;letter-spacing:.02em;text-transform:none;
    opacity:0;transform:translateY(14px);transition:opacity .5s var(--sortie),transform .5s var(--ressort),color .2s
  }
  .nav-links.open a{opacity:1;transform:none}
  .nav-links.open li:nth-child(1) a{transition-delay:.12s}
  .nav-links.open li:nth-child(2) a{transition-delay:.18s}
  .nav-links.open li:nth-child(3) a{transition-delay:.24s}
  .nav-links.open li:nth-child(4) a{transition-delay:.30s}
  .nav-links.open li:nth-child(5) a{transition-delay:.36s}
  .nav-links.open li:nth-child(6) a{transition-delay:.42s}
  .nav-links a::after{display:none}
  .nav-links a[aria-current]{color:var(--terre-clair)!important}
  .burger{position:relative;z-index:70}
  header.menu-ouvert .logo{position:relative;z-index:70}
  header.menu-ouvert .logo-sombre{display:none}
  header.menu-ouvert .logo-clair{display:block}
  .burger[aria-expanded="true"] span{background:var(--creme-2)!important}
  .ruban span{font-size:1.05rem}
}

/* --- retour en haut --- */
#haut{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:64;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(190,174,137,.5);background:rgba(253,244,236,.94);color:var(--brun);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--ombre-2);opacity:0;transform:translateY(14px) scale(.9);
  pointer-events:none;transition:opacity .3s var(--sortie),transform .35s var(--ressort),background .2s
}
#haut.on{opacity:1;transform:none;pointer-events:auto}
#haut:hover{background:var(--brun);color:var(--creme-2)}
#haut svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){ #haut{bottom:10.4rem} }
body:has(.panier-flottant:not([hidden])) #haut{bottom:5.4rem}
@media (max-width:980px){ body:has(.panier-flottant:not([hidden])) #haut{bottom:14rem} }

@media (prefers-reduced-motion:reduce){
  .ruban-piste{animation:none}
  img[data-charge]{opacity:1;filter:none;transform:none}
  .cadre-image{animation:none}
  .orn::before,.orn::after{transform:scaleX(1)}
}

/* ============================================================
   PHOTOS CLIQUABLES VERS LA COMMANDE
   ============================================================ */
.lien-photo{display:block;position:relative;height:100%;width:100%}
.lien-photo img{display:block;width:100%;height:100%;object-fit:cover}
.galerie a,.lien-photo{cursor:pointer}

.commander-photo{
  position:absolute;left:50%;bottom:1rem;transform:translate(-50%,10px);z-index:3;
  background:var(--degrade-chaud);color:#fff;border-radius:999px;padding:.5rem 1.15rem;white-space:nowrap;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  box-shadow:var(--ombre-2);opacity:0;pointer-events:none;
  transition:opacity .3s var(--sortie),transform .35s var(--ressort)
}
.commander-photo::after{content:" →";letter-spacing:0}
.galerie a:hover .commander-photo,.lien-photo:hover .commander-photo,
.card:hover .commander-photo,.mini:hover .commander-photo,.split-img:hover .commander-photo{
  opacity:1;transform:translate(-50%,0)
}
.galerie a:focus-visible .commander-photo,.lien-photo:focus-visible .commander-photo{opacity:1;transform:translate(-50%,0)}

.loupe{
  position:absolute;top:.7rem;right:.7rem;z-index:4;width:38px;height:38px;border-radius:50%;
  background:rgba(28,16,9,.5);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:scale(.85);backdrop-filter:blur(4px);
  transition:opacity .25s var(--sortie),transform .3s var(--ressort),background .2s
}
.loupe svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.galerie a:hover .loupe,.galerie a:focus-within .loupe{opacity:1;transform:none}
.loupe:hover{background:rgba(28,16,9,.8)}
.loupe:active{transform:scale(.9)}
@media (pointer:coarse){
  .loupe{opacity:1;transform:none}
  .commander-photo{opacity:1;transform:translate(-50%,0);font-size:.6rem;padding:.4rem .9rem}
}

/* la galerie garde son cadre même avec le lien */
.galerie a::after{z-index:2}

/* fiche produit mise en avant à l'arrivée depuis une photo */
.produit.vise{
  border-color:var(--terre);
  box-shadow:0 0 0 3px rgba(192,98,43,.28),var(--ombre-3);
  animation:viseur 2.4s var(--sortie)
}
@keyframes viseur{
  0%{box-shadow:0 0 0 0 rgba(192,98,43,.55),var(--ombre-2)}
  35%{box-shadow:0 0 0 12px rgba(192,98,43,0),var(--ombre-3)}
  100%{box-shadow:0 0 0 3px rgba(192,98,43,.28),var(--ombre-3)}
}

/* dans la galerie, la pastille se place au centre pour ne pas heurter la légende */
.galerie a .commander-photo{top:50%;bottom:auto;transform:translate(-50%,-50%) scale(.9)}
.galerie a:hover .commander-photo,.galerie a:focus-visible .commander-photo{transform:translate(-50%,-50%) scale(1)}
@media (pointer:coarse){ .galerie a .commander-photo{transform:translate(-50%,-50%) scale(1)} }

/* état du paiement sur la page de confirmation */
.etat-paiement{
  display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.45rem 1.05rem;
  margin:0 0 1.4rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase
}
.etat-paiement::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.etat-paiement.en-cours{background:rgba(190,174,137,.2);color:var(--texte-doux)}
.etat-paiement.paye{background:rgba(122,158,126,.18);color:#4d7a52}
.etat-paiement.attente{background:rgba(217,138,78,.16);color:#a9531f}

/* ============================================================
   BOUTIQUE — catalogue à gauche, commande toujours à portée
   ============================================================ */
.boutique-grille{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:2.4rem;align-items:start}
.colonne-catalogue{min-width:0}
.colonne-catalogue .sec-head:first-child{margin-top:0!important}
.colonne-catalogue .produits{grid-template-columns:repeat(2,1fr)}

.panneau-commande{
  position:sticky;top:96px;background:var(--blanc);border:1px solid rgba(190,174,137,.45);
  border-radius:var(--r);box-shadow:var(--ombre-2);overflow:hidden;
  max-height:calc(100vh - 120px);display:flex;flex-direction:column
}
.pc-tete{
  padding:1.3rem 1.4rem 1.1rem;color:var(--creme-2);
  background:var(--degrade-profond);position:relative;overflow:hidden
}
.pc-tete::after{content:"";position:absolute;right:-30px;top:-40px;width:120px;height:120px;border-radius:50%;background:rgba(217,138,78,.16)}
.pc-tete h2{font-size:1.5rem;color:#fff;position:relative}
.pc-tete p{margin:.2rem 0 0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(253,244,236,.6);position:relative}

.pc-etapes{
  display:flex;list-style:none;margin:0;padding:.75rem .9rem;gap:.35rem;
  background:var(--creme-2);border-bottom:1px solid rgba(190,174,137,.4)
}
.pc-etapes li{
  flex:1;display:flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.06em;
  color:var(--texte-doux);transition:color .3s
}
.pc-etapes li span{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:rgba(122,92,74,.16);color:var(--texte-doux);font-size:.66rem;
  transition:background .3s,color .3s,transform .3s var(--ressort)
}
.pc-etapes li.active{color:var(--terre);font-weight:500}
.pc-etapes li.active span{background:var(--degrade-chaud);color:#fff;transform:scale(1.12)}
.pc-etapes li.faite span{background:#7A9E7E;color:#fff}
.pc-etapes li.faite span::before{content:"✓";font-size:.7rem}
.pc-etapes li.faite span{font-size:0}

.pc-corps{padding:1.2rem 1.4rem 1.4rem;overflow-y:auto;flex:1}
.pc-corps::-webkit-scrollbar{width:6px}
.pc-corps::-webkit-scrollbar-thumb{background:rgba(190,174,137,.6);border-radius:3px}
.pc-corps form{background:none;border:0;padding:1.1rem 0 0;box-shadow:none;margin-top:1rem;border-top:1px solid rgba(190,174,137,.4)}
.pc-corps .f-row{grid-template-columns:1fr 1fr;gap:.7rem}
.pc-corps label{margin:.8rem 0 .3rem;font-size:.62rem}
.pc-corps input,.pc-corps select,.pc-corps textarea{padding:.62rem .75rem;font-size:.9rem;border-radius:11px}
.pc-corps textarea{min-height:72px}
.pc-corps .recap-total{margin:.9rem 0 0;padding-top:.8rem}
.pc-corps .recap-total b{font-size:1.7rem}
.pc-corps .btn{width:100%;justify-content:center;margin-top:1.1rem}
.pc-corps .form-note{font-size:.72rem;margin-top:.7rem}
.pc-corps .prix li{font-size:.88rem}
.pc-corps .recap-lignes{max-height:none}

.pc-pied{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.7rem 1.4rem;background:var(--creme-2);border-top:1px solid rgba(190,174,137,.4);
  font-size:.68rem;letter-spacing:.08em;color:var(--texte-doux)
}
.pc-sur{display:inline-flex;align-items:center;gap:.35rem;color:#4d7a52}
.pc-sur::before{content:"";width:7px;height:7px;border-radius:50%;background:#7A9E7E}

@media (max-width:1180px){
  .boutique-grille{grid-template-columns:1fr;gap:2rem}
  .panneau-commande{position:static;max-height:none;order:-1}
  .colonne-catalogue .produits{grid-template-columns:repeat(3,1fr)}
  .pc-corps{overflow:visible}
}
@media (max-width:900px){ .colonne-catalogue .produits{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .colonne-catalogue .produits{grid-template-columns:1fr} .pc-corps .f-row{grid-template-columns:1fr} }

/* le sélecteur de quantité du récapitulatif doit rester en ligne, même en colonne étroite */
.prix .nom small.recap-q{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:nowrap;white-space:nowrap}
.pc-corps .prix li{flex-wrap:wrap;row-gap:.2rem}
.pc-corps .prix .nom{flex:1 1 100%;order:1}
.pc-corps .prix .dots{display:none}
.pc-corps .prix .val{order:2;margin-left:auto;font-size:1.05rem}
.pc-corps .recap-lignes li{
  border-bottom:1px dotted rgba(190,174,137,.5);padding-bottom:.55rem;margin-bottom:.35rem
}
.pc-corps .recap-lignes li:last-child{border-bottom:0}
.pc-corps .recap-q button{width:24px;height:24px;font-size:.8rem}


/* ============================================================
   FONDS VIVANTS
   Deux ou trois halos d'angle tres etales au lieu d'un aplat.
   Amplitude mesuree : 3 a 5 % de clarte oklch sur les fonds clairs,
   4 a 6 % sur les fonds bruns. Le grain de body::after reste la
   seule couche de matiere : il couvre ces aplats et fait office de
   tramage anti-banding, aucun second grain n'est ajoute.
   ============================================================ */
body{background-color:var(--creme)}

/* Le grain de body::after est la seule couche de matiere du site : il tramait
   deja le creme, il trame maintenant les degrades (paliers mesures a 1 px,
   donc aucun banding). Il n'est pas anime : on le garde aussi en mouvement
   reduit, ou il etait auparavant masque avec le reflet des boutons. */
@media (prefers-reduced-motion:reduce){ body::after{display:block} }

/* chaque section claire porte ses propres halos : le fond respire d'une
   section a l'autre sans couche fixe et sans couture visible */
section,.histoire,.contact-bloc{
  background-image:var(--degrade-doux);
  background-repeat:no-repeat
}

/* sections sablees (fond « creme2 » choisi dans l'admin) */
section[style*="--creme-2"]{
  background-image:var(--degrade-sable)!important;
  background-repeat:no-repeat!important
}

/* grandes surfaces brunes : bandeau d'atouts, evenements, pied de page */
.atouts,.events,footer,.page-tete,section[style*="--brun"]{
  background-image:var(--degrade-sombre)!important;
  background-repeat:no-repeat!important
}
/* ============================================================
   LISIBILITE DES TEXTES SUR DEGRADE
   Mesures faites au point le plus clair de chaque degrade.
   ============================================================ */

/* terracotta en petit corps : encre assombrie pour tenir 4,5:1
   sur le creux abricot des fonds clairs (mesure 4,59:1). */
.eyebrow,.card-note,.lp-opts,.pc-etapes li.active,.ref-commande b,
.infos a:hover,.ligne-panier .sup:hover,
.qte button,.recap-q button,.prix .plus{color:var(--terre-encre)}
/* menu : encre sombre sur l'en-tete creme, ambre clair sur la photo du hero */
header.scrolled .nav-links a:hover{color:var(--terre-encre)}
header:not(.scrolled) .nav-links a:hover{color:var(--terre-clair)}
.qte button:active,.recap-q button:hover,.prix .plus:hover{color:#fff}

/* micro-textes sur le degrade chaud : blanc plein (4,6:1 au point le
   plus clair). En dessous de 100 % d'opacite, aucun blanc n'y passe. */
.card-tete p{color:#fff}
.card-tag{color:#fff}

/* sur les fonds bruns, c'est la terracotta CLAIRE qui porte : l'encre
   sombre y tomberait a 2:1 (mesure sur la section evenements). */
.events .eyebrow,.events .orn,.atouts .eyebrow,footer .eyebrow,
.hero .eyebrow,.entete .eyebrow,.bloc-prix .eyebrow{color:var(--terre-clair)}

/* « Voir la carte » : la couleur est posee en style inline par le rendu,
   on la ramene a l'encre lisible (4,09:1 -> 5,3:1). */
.card-pied[style*="var(--terre)"]{color:var(--terre-encre)!important}

/* mentions de pied de page : 3,15:1 avant, 4,6:1 apres */
.credits{color:rgba(253,244,236,.52)}

/* pastille « paiement securise » : vert ramene au-dessus de 4,5:1 */
.pc-sur{color:#3F6544}
.pc-sur::before{background:#4F7F55}

/* l'ornement en coeur : 3,46:1 sur le creux sable, 4,59:1 avec l'encre */
.orn{color:var(--terre-encre)}

/* sur-titre pose sur la section brune : la terracotta claire y plafonne
   a 4,34:1 quand la photo de fond remonte, un cran d'ambre suffit */
.events .eyebrow,.page-tete .eyebrow,.events .orn{color:#E39A62}

/* La grille « 4 etapes » recoit ses colonnes en style inline : les media
   queries ne pouvaient pas la rattraper et les cartes debordaient en mobile
   (texte coupe a 390 px). Repli explicite. */
@media (max-width:980px){ .cards.c4{grid-template-columns:repeat(2,1fr)!important} }
@media (max-width:620px){ .cards.c4{grid-template-columns:1fr!important} }

/* pastilles d'etapes non atteintes : 4,1:1 avec le texte doux, 6:1 ici */
.pc-etapes li span{color:#5C4536}
.pc-etapes li.active span,.pc-etapes li.faite span{color:#fff}

/* fil d'ariane : la photo d'en-tete peut remonter a #5E483B (3,99:1) */
.fil a{color:rgba(253,244,236,.82)}

/* « hero-cta » sert aussi de rangee de boutons sur fond clair (page merci,
   dans un .panel) : le blanc y devient invisible (1,03:1). Sur fond clair
   seulement, le bouton fantome reprend l'encre brune. */
.panel .hero-cta .btn.ghost,.card .hero-cta .btn.ghost{color:var(--brun);border-color:var(--sable)}
.panel .hero-cta .btn.ghost:hover,.card .hero-cta .btn.ghost:hover{background:var(--brun);color:#fff;border-color:var(--brun)}


/* ============================================================
   SCEAU, TITRES ET FILETS EN DEGRADE
   ============================================================ */

/* medaillon « fait maison » : degrade conique, la lumiere tourne */
.seal{background:var(--degrade-sceau)}

/* grands chiffres : le degrade est decoupe par le texte.
   Sans background-clip, rien n'est applique et la couleur pleine reste :
   le repli est l'etat actuel du site, jamais un texte invisible. */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .formule b,.mini-body .p,.recap-total b,.tiroir .total b{
    background:var(--degrade-titre);
    -webkit-background-clip:text;background-clip:text;
    color:transparent
  }
  .bloc-prix .gros{
    background:var(--degrade-titre-clair);
    -webkit-background-clip:text;background-clip:text;
    color:transparent
  }
  /* les unites en petit corps gardent leur encre pleine */
  .formule b i,.mini-body .p i,.recap-total b i,.tiroir .total b i{
    background:none;color:var(--texte-doux);-webkit-text-fill-color:var(--texte-doux)
  }
  .bloc-prix .gros i{
    background:none;color:rgba(253,244,236,.6);-webkit-text-fill-color:rgba(253,244,236,.6)
  }
}

/* filet degrade permanent sur les blocs en vedette : peint dans la boite
   de bordure, le fond de la carte reste intact dans la boite de padding */
.panneau-commande,.panel{
  border:1px solid transparent;
  background:linear-gradient(var(--blanc),var(--blanc)) padding-box,var(--degrade-bord) border-box
}

/* filet au survol des cartes : un pseudo-element masque en anneau, donc
   transitionnable, et sans toucher au fond de la carte */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .card::after,.produit::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
    padding:1px;background:var(--degrade-bord);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;transition:opacity .35s var(--sortie)
  }
  .card:hover::after,.produit:hover::after{opacity:1}
}

/* ============================================================
   TÉLÉPHONE — finition
   ============================================================ */
@media (max-width:980px){
  /* barre d'action : pilule flottante plutot qu'un bandeau colle au bord */
  .barre-mobile{
    left:.7rem;right:.7rem;bottom:calc(.7rem + env(safe-area-inset-bottom));
    padding:.5rem;border-radius:999px;
    border:1px solid rgba(190,174,137,.5);
    background:rgba(253,244,236,.84);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:0 20px 44px -20px rgba(43,24,15,.6),0 3px 12px -8px rgba(43,24,15,.45)
  }
  .barre-mobile .btn{padding:.74rem 1rem;font-size:.71rem}
  body{padding-bottom:88px}

  /* bandeau d'atouts : une liste lisible, chaque icone dans sa pastille chaude */
  .atouts{padding:1.9rem 0}
  .atouts .wrap{gap:0}
  .atout{gap:.95rem;padding:.9rem 0;border-bottom:1px solid rgba(190,174,137,.16)}
  .atout:last-child{border-bottom:0}
  .atout svg{
    width:21px;height:21px;padding:9px;box-sizing:content-box;
    border-radius:50%;background:var(--degrade-chaud);stroke:#fff
  }

  /* le hero laisse respirer au-dessus de la barre flottante */
  .hero-inner{padding-bottom:8.5rem}
  .scroll-hint{bottom:5.4rem}
}

/* --- pages légales (mentions, CGV, confidentialité) --- */
.texte-legal{max-width:780px;margin-inline:auto;padding-block:.5rem 1rem;line-height:1.75;color:var(--texte)}
.texte-legal h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2.2rem 0 .6rem;color:var(--brun)}
.texte-legal p,.texte-legal ul{margin:.6rem 0}
.texte-legal ul{padding-left:1.3rem}
.texte-legal li{margin:.4rem 0}
.texte-legal a{color:var(--terre-encre);text-decoration:underline;text-underline-offset:3px}
.texte-legal .maj{margin-top:2.6rem;font-size:.82rem;color:var(--texte-doux)}
mark.a-completer{background:#FFE9A8;color:#5a3d00;padding:.05em .4em;border-radius:4px}

/* liens légaux du pied de page */
.liens-legaux{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.liens-legaux a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.liens-legaux a:hover{color:#fff}

/* ---------- CONFORMITÉ (04/10/2026) : allergènes, acceptation des CGV, information RGPD ---------- */
.produit .allergenes{font-size:.78rem;line-height:1.45;color:var(--texte-doux);margin:.35rem 0 .2rem}
.produit .allergenes b{color:var(--terre-encre);font-weight:500}
.note-allergenes{font-size:.86rem;line-height:1.6;color:var(--texte-doux);max-width:62ch;margin:2.4rem auto 0;text-align:center;text-wrap:pretty}
.note-allergenes b{color:var(--terre-encre);font-weight:500}
.note-allergenes a{color:var(--terre-encre)}
.pc-corps .case-cgv,.case-cgv{display:flex;gap:.7rem;align-items:flex-start;font-size:.84rem;font-weight:400;line-height:1.55;color:var(--texte);margin:1.2rem 0 .3rem;cursor:pointer;text-transform:none;letter-spacing:0}
.case-cgv input{flex:0 0 auto;width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--terre-fond);cursor:pointer}
.case-cgv a{color:var(--terre-encre)}
.form-note.rgpd{font-size:.72rem;margin-top:.5rem}
.form-note.rgpd a{color:inherit}

/* ---------- SEO (04/10/2026) : le badge de l'accueil porte le H1, le slogan garde l'apparence du grand titre ---------- */
.hero .hero-titre{font-family:var(--serif);margin:0;letter-spacing:.01em}
h1.hero-badge{font-family:var(--sans);font-size:.7rem;font-weight:400;line-height:1.4;letter-spacing:.22em;color:inherit}
/* sans JavaScript (ou avant son exécution), le contenu pré-généré reste visible */
html:not(.js) .reveal{opacity:1;transform:none;filter:none}