/* ==========================================================================
   Pantin Fleurs — Atelier Nocturne
   Feuille de style unique du thème enfant GeneratePress « pantin-fleurs-atelier »
   Direction artistique : encre profonde, laiton, fleur vive.
   Utilisée telle quelle par l'aperçu statique (preview/) : ce que l'on voit
   dans l'aperçu est exactement ce que rend le thème.
   ========================================================================== */

/* --- 1. Polices locales (RGPD : aucune requête vers Google Fonts) --------- */
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("../fonts/karla-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("../fonts/karla-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* --- 2. Jetons de design -------------------------------------------------- */
:root{
  /* Encres (sections sombres, éditoriales) */
  --encre:        #0d1310;
  --encre-2:      #141d18;
  --encre-3:      #1d2922;
  /* Clairs (boutique, fiches produit, tunnel) */
  --papier:       #f7f3ec;
  --papier-2:     #efe8dc;
  --craie:        #f4efe6;
  /* Accents */
  --laiton:       #c7a24c;
  --laiton-clair: #e2c885;
  --dahlia:       #cf4a72;
  --grenat:       #7d1f3a;
  --sauge:        #86a893;
  /* Textes */
  --texte-clair:  #ece6da;
  --texte-doux:   #b9b2a4;
  --texte-sombre: #17201a;
  --texte-sombre-doux:#4e5a51;
  /* Traits */
  --trait-clair:  rgba(236,230,218,.16);
  --trait-sombre: rgba(23,32,26,.14);
  /* Typo */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --script:"Caveat", cursive;
  /* Rythme */
  --gouttiere: clamp(20px, 5vw, 64px);
  --large: 1280px;
  --texte-large: 68ch;
  --r: 2px;            /* rayon presque nul : registre galerie */
  --t: .55s cubic-bezier(.22,.61,.36,1);
}

/* --- 3. Réinitialisation utile -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--encre);
  color:var(--texte-clair);
  font-family:var(--sans);
  font-size:clamp(16px,.55vw + 14.5px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2}
p{margin:0 0 1.1em;max-width:var(--texte-large)}
::selection{background:var(--laiton);color:var(--encre)}

/* Focus visible partout (navigation clavier complète) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--laiton-clair);
  outline-offset:3px;
  border-radius:var(--r);
}
.pf-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--laiton);color:var(--encre);padding:.8em 1.2em;font-weight:700}
.pf-skip:focus{left:0}

/* --- 4. Primitives -------------------------------------------------------- */
.pf-wrap{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}
.pf-wrap--etroit{max-width:920px}
.pf-section{padding-block:clamp(64px,9vw,140px)}
.pf-clair{background:var(--papier);color:var(--texte-sombre)}
.pf-clair h1,.pf-clair h2,.pf-clair h3{color:var(--texte-sombre)}
.pf-sombre{background:var(--encre);color:var(--texte-clair)}

.pf-surtitre{
  font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--laiton);
  display:flex;align-items:center;gap:.9em;margin:0 0 1.4em;
}
.pf-surtitre::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:120px}
.pf-clair .pf-surtitre{color:var(--grenat)}
.pf-signature{font-family:var(--script);font-size:1.6rem;color:var(--laiton-clair);line-height:1}
.pf-clair .pf-signature{color:var(--grenat)}
.pf-chapo{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--texte-doux);max-width:56ch}
.pf-clair .pf-chapo{color:var(--texte-sombre-doux)}
.pf-centre{text-align:center}
.pf-centre p,.pf-centre .pf-chapo{margin-inline:auto}
.pf-centre .pf-surtitre{justify-content:center}
.pf-centre .pf-surtitre::after{display:none}

/* Boutons */
.pf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:1.05em 2.1em;border-radius:var(--r);border:1px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.pf-btn--or{background:var(--laiton);color:#14100a;border-color:var(--laiton)}
.pf-btn--or:hover{background:var(--laiton-clair);border-color:var(--laiton-clair);transform:translateY(-2px)}
.pf-btn--fantome{background:transparent;color:inherit;border-color:currentColor}
.pf-btn--fantome:hover{background:var(--craie);color:var(--encre);border-color:var(--craie);transform:translateY(-2px)}
.pf-clair .pf-btn--fantome:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.pf-btn--encre{background:var(--encre);color:var(--craie);border-color:var(--encre)}
.pf-btn--encre:hover{background:var(--encre-3);border-color:var(--encre-3);transform:translateY(-2px)}

.pf-lien{
  display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.9rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:.25em;
}
.pf-lien svg{transition:transform var(--t)}
.pf-lien:hover svg{transform:translateX(5px)}

/* --- 5. En-tête ----------------------------------------------------------- */
.pf-entete{
  position:sticky;top:0;z-index:60;
  background:rgba(13,19,16,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait-clair);
}
.pf-entete__interieur{display:flex;align-items:center;gap:clamp(16px,3vw,44px);min-height:74px}
.pf-logo{font-family:var(--serif);font-size:1.32rem;letter-spacing:-.01em;text-decoration:none;color:var(--craie);white-space:nowrap}
.pf-logo span{color:var(--laiton)}
.pf-nav{display:flex;gap:clamp(12px,1.8vw,28px);margin-left:auto;align-items:center}
.pf-nav a{
  text-decoration:none;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte-doux);padding:.45em 0;position:relative;transition:color var(--t);
}
.pf-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--laiton);transition:right var(--t)}
.pf-nav a:hover,.pf-nav a[aria-current="page"]{color:var(--craie)}
.pf-nav a:hover::after,.pf-nav a[aria-current="page"]::after{right:0}
.pf-entete__actions{display:flex;align-items:center;gap:14px;margin-left:clamp(8px,2vw,24px)}
.pf-tel{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;font-weight:700;font-size:.9rem;color:var(--craie);white-space:nowrap}
.pf-panier{
  display:inline-flex;align-items:center;gap:.45em;text-decoration:none;color:var(--craie);
  border:1px solid var(--trait-clair);padding:.55em .9em;border-radius:var(--r);font-size:.85rem;
  transition:border-color var(--t),background var(--t);
}
.pf-panier:hover{border-color:var(--laiton);background:var(--encre-2)}
.pf-burger{display:none;background:none;border:1px solid var(--trait-clair);color:var(--craie);padding:.6em .8em;border-radius:var(--r);cursor:pointer;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:960px){
  .pf-nav{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--encre-2);border-bottom:1px solid var(--trait-clair);
    padding:8px var(--gouttiere) 24px;margin:0;display:none;max-height:calc(100svh - 74px);overflow:auto;
  }
  .pf-nav[data-ouvert="true"]{display:flex}
  .pf-nav a{width:100%;padding:.95em 0;border-bottom:1px solid var(--trait-clair);font-size:1rem}
  .pf-burger{display:inline-block;margin-left:auto;order:5}
  .pf-tel span{display:none}
  /* À 360 px, le trio téléphone + panier + menu ne tient pas : on allège. */
  .pf-entete__interieur{gap:10px}
  .pf-entete__actions{gap:8px;margin-left:0}
  .pf-panier{padding:.5em .7em}
  .pf-panier span{display:none}
}

/* --- 6. Bandeau de réassurance (visible aussi sur mobile) ---------------- */
.pf-reassurance{background:var(--encre-3);border-bottom:1px solid var(--trait-clair);font-size:.8rem;letter-spacing:.05em}
.pf-reassurance ul{list-style:none;margin:0;padding:.7em 0;display:flex;flex-wrap:wrap;gap:.6em clamp(14px,3vw,40px);justify-content:center;color:var(--texte-doux)}
.pf-reassurance li{display:flex;align-items:center;gap:.5em}
.pf-reassurance svg{color:var(--laiton);flex:none}
@media (max-width:560px){
  .pf-reassurance li:last-child{display:none}
  .pf-reassurance ul{gap:.35em 10px;padding:.55em 0}
}

/* ==========================================================================
   7. HÉROS — L'ANATOMIE D'UN BOUQUET
   Piste de défilement de 420vh ; la scène reste collée, le bouquet se
   décompose tige par tige, chaque fleur se nomme, puis tout se recompose.
   ========================================================================== */
.pf-anatomie{position:relative;background:var(--encre)}
.pf-anatomie__piste{height:220vh}
.pf-anatomie__scene{
  position:sticky;top:74px;height:calc(100svh - 114px);min-height:620px;
  display:grid;place-items:center;overflow:hidden;
  padding:clamp(120px,17vh,180px) 0 clamp(150px,19vh,195px);
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(199,162,76,.16), transparent 58%),
    radial-gradient(90% 70% at 50% 100%, rgba(207,74,114,.10), transparent 60%),
    var(--encre);
}
.pf-anatomie__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(236,230,218,.22) 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:screen;
}
.pf-anatomie__voile{position:absolute;left:0;right:0;bottom:0;height:50%;z-index:3;pointer-events:none;opacity:var(--voile,1);
  background:linear-gradient(to top, var(--encre) 16%, rgba(13,19,16,.9) 52%, transparent 100%)}
.pf-anatomie__titre{
  position:absolute;z-index:4;text-align:center;padding-inline:var(--gouttiere);
  top:clamp(56px,7.5vh,104px);width:100%;pointer-events:none;
  opacity:var(--titre-vis,1);transform:translateY(calc(var(--titre-y,0) * 1px));
}
.pf-anatomie__titre h1{
  margin:0;color:var(--craie);
  font-size:clamp(2.5rem,7vw,5.6rem);font-weight:500;line-height:.96;
  text-shadow:0 2px 40px rgba(13,19,16,.6);
}
.pf-anatomie__titre h1 em{font-style:italic;color:var(--laiton-clair)}
/* la légende passe au-dessus du voile */
.pf-anatomie__legende{
  position:absolute;bottom:clamp(16px,3vh,42px);left:50%;transform:translateX(-50%);
  z-index:4;text-align:center;width:min(660px,92vw);padding-inline:var(--gouttiere);
}
.pf-anatomie__legende p{margin:0 auto 1.4em;color:var(--texte-doux);max-width:46ch}
.pf-anatomie__legende .pf-anatomie__precision{font-size:.76rem;line-height:1.35;margin-bottom:1em;color:var(--craie)}
.pf-anatomie__legende .pf-anatomie__indice{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;color:var(--laiton-clair);margin-bottom:1.4em}
.pf-anatomie__indice span{display:inline-block;margin-left:.4em}
.pf-anatomie__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Repli sans JavaScript : la photo du bouquet tient la page. */
.pf-anatomie__repli{position:relative;z-index:2;width:min(760px,88vw)}
.pf-anatomie__repli img{width:100%;height:auto;border-radius:var(--r)}
.pf-scene{position:relative;z-index:2;margin:0;width:min(1120px,96vw);aspect-ratio:11/9;max-height:92svh}
.pf-scene svg{width:100%;height:100%;overflow:visible}
/* Chaque tige : position pilotée par les variables écrites par le JS.
   Sans JS, tout reste en place : le bouquet est simplement assemblé. */
.pf-tige{
  transform:translate(calc(var(--dx,0) * 1px), calc(var(--dy,0) * 1px)) rotate(calc(var(--dr,0) * 1deg)) scale(var(--ds,1));
  transform-box:fill-box;transform-origin:50% 90%;will-change:transform;
}
.pf-etiquette{
  position:absolute;z-index:3;transform:translate(-50%,-50%);
  opacity:var(--vis,0);pointer-events:none;display:flex;align-items:center;gap:.6em;white-space:nowrap;
}
.pf-etiquette__point{width:7px;height:7px;border-radius:50%;background:var(--laiton);flex:none;box-shadow:0 0 0 4px rgba(199,162,76,.18)}
.pf-etiquette__texte{border-left:1px solid rgba(199,162,76,.45);padding-left:.8em}
@media (max-width:819px){
  .pf-etiquette{flex-direction:column;gap:.2em;text-align:center}
  .pf-etiquette__point{display:none}
  .pf-etiquette__texte{border-left:0;border-top:1px solid rgba(199,162,76,.45);padding:.4em 0 0}
  .pf-etiquette{max-width:40vw;white-space:normal}
  .pf-anatomie__scene{height:calc(100svh - 142px);min-height:540px;padding-bottom:clamp(150px,22vh,190px)}
  .pf-anatomie__titre{top:clamp(22px,5vh,52px)}
  .pf-anatomie__legende{bottom:14px;padding-inline:10px}
  .pf-anatomie__legende p{margin-bottom:.6em}
  .pf-anatomie__cta{gap:8px}
  .pf-anatomie__cta .pf-btn{padding:.75em 1em;font-size:.76rem}
  .pf-etiquette b{font-size:.66rem;letter-spacing:.12em}
  .pf-etiquette i{font-size:.72rem}
}
.pf-etiquette b{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--craie)}
.pf-etiquette i{display:block;font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--laiton-clair);opacity:.85}
.pf-anatomie__jauge{position:absolute;right:clamp(14px,3vw,38px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px}
.pf-anatomie__jauge span{font-size:.68rem;letter-spacing:.2em;color:var(--texte-doux);writing-mode:vertical-rl;text-transform:uppercase}
.pf-anatomie__barre{width:1px;height:110px;background:var(--trait-clair);position:relative}
.pf-anatomie__barre i{position:absolute;inset:0 0 auto;background:var(--laiton);height:calc(var(--p,0) * 100%);display:block}
@media (max-width:820px){.pf-anatomie__jauge{display:none}}

/* Mouvement réduit : la décomposition devient une planche fixe, toutes
   étiquettes visibles. Aucune dépendance au défilement. */
@media (prefers-reduced-motion:reduce){
  .pf-anatomie__piste{height:auto}
  .pf-anatomie__scene{position:static;height:auto;min-height:0;padding-block:72px;display:block}
  .pf-anatomie__titre,.pf-anatomie__legende{position:static;transform:none;width:auto;opacity:1}
  .pf-anatomie__legende{margin-top:28px}
  .pf-scene{margin-inline:auto;max-height:none}
  .pf-anatomie__jauge{display:none}
  .pf-anatomie__indice{display:none}
}

/* --- Sélecteur de variantes du bouquet ---------------------------------- */
.pf-palettes{
  position:absolute;left:50%;transform:translateX(-50%);z-index:6;
  bottom:clamp(8px,2.2vh,20px);display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center;align-items:center;max-width:min(720px,92vw);
  padding:6px;border-radius:999px;background:rgba(13,19,16,.62);
  border:1px solid var(--trait-clair);backdrop-filter:blur(6px);
}
.pf-palettes__groupe{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.pf-palette{position:relative}
.pf-palette input{
  position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;appearance:none;
}
.pf-palette .pf-palette__pastille{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border-radius:999px;font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.07em;color:var(--texte-doux);border:1px solid transparent;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.pf-palette .pf-palette__pastille::before{
  content:"";width:11px;height:11px;border-radius:50%;
  background:var(--pf-pastille,var(--laiton));flex:none;
  box-shadow:0 0 0 1px rgba(244,239,230,.28);
}
.pf-palette input:checked + .pf-palette__pastille{
  color:var(--craie);background:rgba(199,162,76,.16);border-color:rgba(199,162,76,.55);
}
.pf-palette input:focus-visible + .pf-palette__pastille{
  outline:2px solid var(--laiton-clair);outline-offset:2px;
}
.pf-anatomie__palette-note{
  position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  top:clamp(180px,24vh,300px);text-align:center;pointer-events:none;
  color:var(--texte-doux);font-family:var(--sans);font-size:.74rem;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  opacity:var(--note-vis,0);transition:opacity .5s var(--t);
}
.pf-anatomie__palette-note b{color:var(--laiton-clair);font-weight:700}
@media (max-width:720px){
  .pf-palettes{width:fit-content;max-width:94vw}
  .pf-palette .pf-palette__pastille{height:30px;padding:0 10px;font-size:.68rem}
  .pf-palette .pf-palette__pastille::before{width:9px;height:9px}
  .pf-palette .pf-palette__texte{display:none}   /* seuls les pastilles de couleur restent */
  .pf-palette .pf-palette__pastille{padding:0 9px}
  .pf-anatomie__palette-note{letter-spacing:.14em;font-size:.66rem;white-space:normal;max-width:84vw}
}

/* --- 8. Bande défilante --------------------------------------------------- */
.pf-bande{background:var(--laiton);color:#14100a;overflow:hidden;border-block:1px solid rgba(20,16,10,.2)}
.pf-bande__piste{display:flex;white-space:nowrap;animation:pf-defile 42s linear infinite;width:max-content}
.pf-bande p{margin:0;padding:.85em 0;font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.35rem);font-style:italic;max-width:none}
.pf-bande p span{padding-inline:1.1em}
.pf-bande p span::after{content:"✳";padding-left:1.1em;font-style:normal;opacity:.5}
@keyframes pf-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pf-bande__piste{animation:none}}

/* --- 9. Grille éditoriale des collections -------------------------------- */
.pf-collections{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(12,1fr)}
.pf-carte{position:relative;overflow:hidden;border-radius:var(--r);background:var(--encre-2);text-decoration:none;color:var(--craie);display:block;isolation:isolate}
.pf-carte--haute{grid-column:span 6;aspect-ratio:4/5}
.pf-carte--basse{grid-column:span 3;aspect-ratio:1/1}
.pf-carte--large{grid-column:span 6;aspect-ratio:8/5}
.pf-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter var(--t);filter:saturate(.92) brightness(.82)}
.pf-carte::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(13,19,16,.9) 0%, rgba(13,19,16,.28) 46%, transparent 72%)}
.pf-carte:hover img{transform:scale(1.06);filter:saturate(1) brightness(.9)}
.pf-carte__texte{position:absolute;z-index:2;left:0;bottom:0;padding:clamp(18px,2.4vw,34px)}
.pf-carte__texte h3{margin:0 0 .2em;color:var(--craie)}
.pf-carte__texte p{margin:0;font-size:.88rem;color:var(--texte-doux);max-width:34ch}
.pf-carte__index{position:absolute;z-index:2;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);font-family:var(--serif);font-size:.85rem;color:var(--laiton-clair);letter-spacing:.14em}
@media (max-width:900px){
  .pf-carte--haute,.pf-carte--large{grid-column:span 12}
  .pf-carte--basse{grid-column:span 6}
}

/* --- 10. Cartes produit --------------------------------------------------- */
.pf-produits{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(auto-fill,minmax(228px,1fr));list-style:none;padding:0;margin:0}
.pf-produit{position:relative;display:flex;flex-direction:column}
.pf-produit__vignette{position:relative;overflow:hidden;background:#fff;border-radius:var(--r);aspect-ratio:1/1;margin-bottom:16px}
.pf-produit__vignette img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.pf-produit:hover .pf-produit__vignette img{transform:scale(1.05)}
.pf-produit__etiquette{position:absolute;top:12px;left:12px;z-index:2;background:var(--encre);color:var(--laiton-clair);font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.45em .8em;border-radius:var(--r)}
.pf-produit h3{font-size:1.1rem;margin:0 0 .25em}
.pf-produit h3 a{text-decoration:none}
.pf-produit h3 a::after{content:"";position:absolute;inset:0}
.pf-produit__note{font-size:.84rem;color:var(--texte-sombre-doux);margin:0 0 .6em}
.pf-sombre .pf-produit__note{color:var(--texte-doux)}
.pf-prix{font-family:var(--serif);font-size:1.05rem;margin-top:auto}
.pf-prix small{font-family:var(--sans);font-size:.74rem;color:var(--texte-sombre-doux);letter-spacing:.06em;text-transform:uppercase}
.pf-sombre .pf-prix small{color:var(--texte-doux)}

/* --- 11. Le geste (3 temps) ---------------------------------------------- */
.pf-geste{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:repeat(3,1fr);counter-reset:geste}
.pf-geste > div{border-top:1px solid var(--trait-clair);padding-top:22px}
.pf-clair .pf-geste > div{border-color:var(--trait-sombre)}
.pf-geste > div::before{counter-increment:geste;content:"0" counter(geste);display:block;font-family:var(--serif);font-size:2.2rem;color:var(--laiton);margin-bottom:.35em;line-height:1}
.pf-clair .pf-geste > div::before{color:var(--grenat)}
.pf-geste h3{margin-bottom:.4em}
.pf-geste p{font-size:.95rem;color:var(--texte-doux);margin:0}
.pf-clair .pf-geste p{color:var(--texte-sombre-doux)}
@media (max-width:820px){.pf-geste{grid-template-columns:1fr}}

/* --- 12. Deux colonnes éditoriales --------------------------------------- */
.pf-duo{display:grid;gap:clamp(28px,5vw,80px);grid-template-columns:1fr 1fr;align-items:center}
.pf-duo__image{position:relative;border-radius:var(--r);overflow:hidden}
.pf-duo__image img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pf-duo__cachet{position:absolute;right:16px;bottom:24px;background:var(--laiton);color:#14100a;font-family:var(--script);font-size:1.5rem;line-height:1.15;padding:.7em 1.1em;border-radius:var(--r);max-width:62%}
@media (max-width:860px){.pf-duo{grid-template-columns:1fr}}

/* --- 13. Bloc deuil (ton sobre) ------------------------------------------ */
.pf-deuil{background:var(--encre-2);border:1px solid var(--trait-clair);border-radius:var(--r);padding:clamp(26px,4vw,52px);display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1.2fr .8fr;align-items:center}
.pf-deuil h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.pf-deuil p{color:var(--texte-doux)}
.pf-deuil__tel{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--laiton-clair);text-decoration:none;display:block;margin-bottom:.4em}
@media (max-width:820px){.pf-deuil{grid-template-columns:1fr}}

/* --- 14. Avis ------------------------------------------------------------- */
.pf-avis{display:grid;gap:clamp(18px,2.6vw,34px);grid-template-columns:repeat(3,1fr)}
.pf-avis blockquote{margin:0;padding:clamp(22px,2.6vw,34px);background:var(--encre-2);border:1px solid var(--trait-clair);border-radius:var(--r)}
.pf-avis p{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--craie);margin-bottom:1em}
.pf-avis cite{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton)}
@media (max-width:860px){.pf-avis{grid-template-columns:1fr}}

/* --- 15. Zone de livraison ------------------------------------------------ */
.pf-zone{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 1.6em}
.pf-zone li{border:1px solid var(--trait-clair);border-radius:100px;padding:.45em 1.1em;font-size:.86rem;color:var(--texte-doux)}
.pf-clair .pf-zone li{border-color:var(--trait-sombre);color:var(--texte-sombre-doux)}

/* --- 16. Pied de page ----------------------------------------------------- */
.pf-pied{background:var(--encre-2);border-top:1px solid var(--trait-clair);padding-block:clamp(48px,6vw,90px) 0}
.pf-pied__grille{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1.4fr 1fr 1fr 1.2fr}
.pf-pied h2,.pf-pied h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);margin:0 0 1.2em}
.pf-pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.pf-pied a{color:var(--texte-doux);text-decoration:none;font-size:.92rem;transition:color var(--t)}
.pf-pied a:hover{color:var(--craie)}
.pf-pied address{font-style:normal;color:var(--texte-doux);font-size:.92rem;line-height:1.8}
.pf-pied__bas{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--trait-clair);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.82rem;color:var(--texte-doux)}
@media (max-width:900px){.pf-pied__grille{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pf-pied__grille{grid-template-columns:1fr}}

/* --- 17. Révélation au défilement ---------------------------------------- */
.pf-js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
[data-reveal].pf-vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* --- 18. Fiche produit ---------------------------------------------------- */
.pf-fiche{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1.05fr .95fr;align-items:start}
.pf-fiche__galerie{position:sticky;top:98px;display:grid;gap:12px}
.pf-fiche__galerie img{background:#fff;border-radius:var(--r);width:100%;aspect-ratio:1/1;object-fit:cover}
.pf-fiche h1{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:.2em}
.pf-fiche__prix{font-family:var(--serif);font-size:1.8rem;margin:0 0 1em}
.pf-choix{display:grid;gap:10px;margin-bottom:1.6em}
.pf-choix__titre{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.pf-choix__options{display:flex;flex-wrap:wrap;gap:10px}
.pf-choix input{position:absolute;opacity:0;width:0;height:0}
.pf-choix label{border:1px solid var(--trait-sombre);border-radius:var(--r);padding:.75em 1.3em;cursor:pointer;font-size:.9rem;transition:border-color var(--t),background var(--t),color var(--t)}
.pf-choix input:checked + label{background:var(--encre);color:var(--craie);border-color:var(--encre)}
.pf-choix input:focus-visible + label{outline:2px solid var(--laiton);outline-offset:3px}
.pf-champ{display:grid;gap:.4em;margin-bottom:1.4em}
.pf-champ label{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pf-champ textarea,.pf-champ input,.pf-champ select{font:inherit;padding:.85em 1em;border:1px solid var(--trait-sombre);border-radius:var(--r);background:#fff;color:var(--texte-sombre);width:100%}
.pf-compteur{font-size:.78rem;color:var(--texte-sombre-doux)}
.pf-accordeon{border-top:1px solid var(--trait-sombre);margin-top:2em}
.pf-accordeon details{border-bottom:1px solid var(--trait-sombre)}
.pf-accordeon summary{cursor:pointer;padding:1.1em 0;font-weight:700;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1em}
.pf-accordeon summary::-webkit-details-marker{display:none}
.pf-accordeon summary::after{content:"+";font-family:var(--serif);font-size:1.4rem;color:var(--laiton);line-height:1}
.pf-accordeon details[open] summary::after{content:"–"}
.pf-accordeon details > div{padding-bottom:1.4em}
@media (max-width:860px){.pf-fiche{grid-template-columns:1fr}.pf-fiche__galerie{position:static}}

/* Champs de date du tunnel classique WooCommerce. */
.pf-creneau[hidden]{display:none!important}
.woocommerce-checkout .pf-creneau select{width:100%;min-height:48px;padding:.7em;background:#fff;color:var(--texte-sombre);border:1px solid var(--trait-sombre)}
.woocommerce-checkout .pf-creneau .description{font-size:.85rem;color:var(--texte-sombre-doux)}

/* --- 19. Consentement carte ---------------------------------------------- */
.pf-carte-consent{background:var(--papier-2);border:1px dashed var(--trait-sombre);border-radius:var(--r);aspect-ratio:16/10;display:grid;place-content:center;text-align:center;gap:14px;padding:24px}
.pf-carte-consent iframe{width:100%;height:100%;border:0}

/* --- 20. Fil d'Ariane ----------------------------------------------------- */
.pf-fil{font-size:.82rem;color:var(--texte-sombre-doux);padding-block:22px}
.pf-fil a{color:inherit}
.pf-sombre .pf-fil{color:var(--texte-doux)}

/* --- 21. Ponts WooCommerce -------------------------------------------------
   Les pages WooCommerce (boutique, fiche, panier, commande) sont servies sur
   fond clair pour garantir les contrastes AA du tunnel. On aligne la
   typographie et les boutons sur la charte : aucun template surchargé,
   priorité aux hooks.
   -------------------------------------------------------------------------- */
body.woocommerce,body.woocommerce-page{background:var(--papier);color:var(--texte-sombre)}
.woocommerce ul.products{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(auto-fill,minmax(228px,1fr));margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{float:none;width:auto;margin:0;text-align:left}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:1.1rem;font-weight:500;padding:.5em 0 .2em}
.woocommerce ul.products li.product .price{font-family:var(--serif);color:var(--texte-sombre);font-size:1.02rem}
.woocommerce ul.products li.product img{border-radius:var(--r);background:#fff}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--encre);color:var(--craie);border-radius:var(--r);
  font-family:var(--sans);font-weight:700;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1.05em 2.1em;line-height:1;transition:background var(--t),transform var(--t);
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--encre-3);color:var(--craie);transform:translateY(-2px);
}
.woocommerce div.product .product_title{font-family:var(--serif)}
.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--serif);color:var(--texte-sombre);font-size:1.7rem}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--laiton);background:var(--papier-2);border-radius:var(--r)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--laiton)}
/* Message « hors zone » rédigé */
.pf-hors-zone{background:var(--papier-2);border-left:3px solid var(--grenat);border-radius:var(--r);padding:1.2em 1.4em;margin-block:1em}
.pf-hors-zone strong{display:block;margin-bottom:.3em}
/* Fiches deuil : aucune incitation */
body.pf-deuil-produit .up-sells,
body.pf-deuil-produit .cross-sells,
body.pf-deuil-produit .related,
body.pf-deuil-produit #tab-title-reviews,
body.pf-deuil-produit .pf-urgence{display:none !important}
.pf-appel-deuil{background:var(--papier-2);border-radius:var(--r);padding:1.2em 1.4em;margin-bottom:1.4em}
.pf-appel-deuil a{font-family:var(--serif);font-size:1.4rem;text-decoration:none}

/* --- 22. Guide d'entretien ([pf_entretien]) ------------------------------
   Quatre blocs, un par famille. Le panneau est sombre, donc lisible aussi
   bien posé dans une section claire que dans une section encre : il ne
   dépend d'aucune classe du parent. Pictogrammes = SVG en ligne, aucun
   script, aucun appel externe.
   ------------------------------------------------------------------------- */
.pf-entretien{
  max-width:var(--large);margin-inline:auto;margin-block:clamp(32px,5vw,64px);
  background:var(--encre);color:var(--texte-clair);
  border:1px solid var(--trait-clair);border-radius:var(--r);
  padding:clamp(26px,3.6vw,52px);
}
/* Le panneau tient ses propres couleurs : on ne dépend pas de .pf-clair. */
section.pf-entretien .pf-surtitre{color:var(--laiton);margin-bottom:.9em}
section.pf-entretien h2{color:var(--craie);max-width:24ch;margin-bottom:.4em}
section.pf-entretien .pf-chapo{color:var(--texte-doux);margin-bottom:0}

.pf-entretien__grille{
  display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr;
  list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;
}
.pf-entretien__carte{
  display:flex;flex-direction:column;gap:.5em;
  background:var(--encre-2);border:1px solid var(--trait-clair);border-top:2px solid var(--laiton);
  border-radius:var(--r);padding:clamp(20px,2.2vw,30px);
}
.pf-entretien__entete{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.55em}
.pf-entretien__picto{display:block;width:38px;height:38px;color:var(--laiton)}
.pf-entretien__picto svg{display:block;width:100%;height:100%}
.pf-entretien__num{font-family:var(--serif);font-size:.78rem;letter-spacing:.18em;color:var(--laiton-clair);opacity:.7}
.pf-entretien__carte h3{margin:0;font-size:clamp(1.1rem,1.5vw,1.32rem);color:var(--craie)}
.pf-entretien__carte p{margin:0;font-size:.94rem;line-height:1.6;color:var(--texte-doux);max-width:42ch}

.pf-entretien__pied{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35em 1.1em;
  margin:clamp(22px,3vw,36px) 0 0;padding-top:1.15em;
  border-top:1px solid var(--trait-clair);
  font-size:.92rem;color:var(--texte-doux);max-width:none;
}
.pf-entretien__tel{font-family:var(--serif);font-size:1.15rem;color:var(--laiton-clair);text-decoration:none;white-space:nowrap}
.pf-entretien__tel:hover{text-decoration:underline}

@media (min-width:640px){.pf-entretien__grille{grid-template-columns:repeat(2,1fr)}}
/* Une seule famille appelée (fiche produit) : un bloc pleine largeur. */
.pf-entretien--une .pf-entretien__grille{grid-template-columns:1fr}
.pf-entretien--une .pf-entretien__carte p{max-width:60ch}
@media (min-width:1120px){
  .pf-entretien__grille{grid-template-columns:repeat(4,1fr)}
  .pf-entretien__grille[data-blocs="3"]{grid-template-columns:repeat(3,1fr)}
  .pf-entretien__grille[data-blocs="2"]{grid-template-columns:repeat(2,1fr)}
  .pf-entretien__grille[data-blocs="1"]{grid-template-columns:1fr}
}

/* --- 23. Impression ------------------------------------------------------- */
@media print{
  .pf-entete,.pf-reassurance,.pf-anatomie,.pf-bande,.pf-pied{display:none}
  body{background:#fff;color:#000}
  /* Le guide d'entretien, lui, s'imprime : c'est une fiche à emporter. */
  .pf-entretien{background:#fff;color:#000;border-color:#999}
  section.pf-entretien h2,.pf-entretien__carte h3{color:#000}
  .pf-entretien__carte{background:#fff;border-color:#999;break-inside:avoid}
  .pf-entretien__carte p,.pf-entretien__pied,section.pf-entretien .pf-chapo{color:#000}
  .pf-entretien__picto,.pf-entretien__num,section.pf-entretien .pf-surtitre,.pf-entretien__tel{color:#000}
}

/* --- Refonte conversion v3 ---------------------------------------------- */
.pf-anatomie__piste{height:178vh}
.pf-anatomie__titre::before{content:"Pantin · fleurs de saison · retrait sur créneau confirmé";display:block;margin:0 0 1.1rem;color:var(--laiton-clair);font:700 .72rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.pf-anatomie__promesse{margin:1.2rem 0 1.1rem;max-width:31ch;color:var(--texte-clair);font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.45}
.pf-anatomie__repères{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-doux)}
.pf-anatomie__repères span{padding:.42rem .62rem;border:1px solid var(--trait-clair);background:rgba(13,19,16,.42)}
.pf-carte__index{color:var(--craie);text-shadow:0 1px 14px rgba(13,19,16,.9)}
.pf-produit__etiquette{font-size:.72rem}
.pf-anatomie__jauge span{font-size:.74rem}
@media (min-width:900px){
  .pf-anatomie__titre{left:var(--gouttiere);right:auto;top:clamp(118px,18vh,190px);width:min(420px,34vw);text-align:left;padding:0}
  .pf-anatomie__titre h1{font-size:clamp(3.2rem,5.2vw,5.2rem)}
  .pf-scene{width:min(850px,66vw);margin-left:clamp(280px,24vw,380px);transform:translateY(1.5vh)}
  .pf-anatomie__legende{left:var(--gouttiere);transform:none;bottom:clamp(24px,4vh,52px);width:min(450px,36vw);text-align:left;padding:0}
  .pf-anatomie__legende p{margin-left:0}
  .pf-anatomie__cta{justify-content:flex-start}
}
@media (max-width:960px){.pf-tel span{display:inline}}
@media (max-width:560px){.pf-tel span{display:none}.pf-tel{width:42px;height:42px;justify-content:center;border:1px solid var(--trait-clair)}.pf-tel svg{width:18px;height:18px}}

/* Hero photo : fleurs réelles, découpées en cinq calques légers. */
.pf-scene{display:none!important}
.pf-photo-bouquet{display:none;position:relative;z-index:2;width:min(720px,72vw);aspect-ratio:1;isolation:isolate;filter:saturate(.96) contrast(1.02);transform:translate3d(0,calc(var(--photo-y,0) * 1px),0)}
.pf-js .pf-photo-bouquet{display:block}
.pf-photo-bouquet__halo{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(247,243,236,.98) 0 53%,rgba(247,243,236,.75) 70%,transparent 74%);z-index:-1;box-shadow:0 22px 80px rgba(247,243,236,.12)}
.pf-photo-bouquet__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;will-change:transform;transform:translate3d(calc(var(--photo-x,0) * 1px),calc(var(--photo-y,0) * 1px),0) rotate(calc(var(--photo-r,0) * 1deg));transition:filter .3s ease}
.pf-photo-bouquet__layer--1{clip-path:polygon(0 0,52% 0,48% 52%,0 67%);--photo-x:-1;--photo-r:-.3}
.pf-photo-bouquet__layer--2{clip-path:polygon(48% 0,100% 0,100% 52%,52% 56%);--photo-x:1;--photo-r:.3}
.pf-photo-bouquet__layer--3{clip-path:polygon(0 48%,52% 48%,48% 100%,0 100%);--photo-x:-.4;--photo-r:.2}
.pf-photo-bouquet__layer--4{clip-path:polygon(48% 50%,100% 45%,100% 100%,48% 100%);--photo-x:.4;--photo-r:-.2}
.pf-photo-bouquet__layer--5{clip-path:polygon(30% 25%,72% 22%,75% 78%,28% 80%);--photo-x:0;--photo-r:0}
.pf-photo-bouquet__layer--5{z-index:2}
@media (min-width:900px){.pf-photo-bouquet{margin-left:clamp(280px,24vw,380px);width:min(680px,62vw);transform:translate3d(0,calc(var(--photo-y,0) * 1px),0)}}
@media (max-width:819px){.pf-photo-bouquet{width:min(500px,92vw);margin-top:1vh}.pf-photo-bouquet__halo{inset:4%}}
@media (prefers-reduced-motion:reduce){.pf-photo-bouquet__layer{transition:none;transform:none!important}.pf-photo-bouquet{transform:none!important}}