/* ═══════════════════════════════════════════════════════════════
   LA FESTIBOX — FEUILLE DE STYLE DU SITE
   ───────────────────────────────────────────────────────────────
   Charte : terre cuite poudrée, sable, crème, filet doré.
   Principe visuel : le carton d'invitation (filet gravé, petites
   capitales, Cormorant) croisé avec la fiche de régie d'un
   loueur de décors (référence, dimensions, pastille de stock).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Dancing+Script:wght@600;700&display=swap');

/* ── 1. Jetons ──────────────────────────────────────────────── */
:root{
  /* Charte livrée par l'agence, septembre 2026. Rose et or sont
     relevés dans le logo ; le cahier des charges interdit d'ajouter
     une autre couleur. Les anciens noms sont conservés en bas du
     bloc : rien de ce qui s'y accrochait ne casse. */
  --rose:#9A5A4A;
  --rose-fonce:#7A4238;
  --rose-clair:#C08877;
  --rose-entete:#9A5A4A;

  --or:#B08A2F;
  --or-clair:#C9A44A;
  --or-fonce:#8F6F22;
  --or-texte:#8F6F22;

  --ivoire:#FBF7F4;
  --blush:#F5E5E0;
  --blush-pale:#FAEFEB;
  --encre:#2B211D;
  --gris:#6E6058;
  --nuit:#241A15;

  /* Les anciens noms, reliés à la nouvelle palette. */
  --creme:var(--ivoire);
  --papier:#FFFFFF;
  --peche:var(--blush);
  --peche-clair:var(--blush-pale);
  --sable:var(--blush);
  --sable-clair:var(--blush-pale);
  --brun:var(--rose);
  --brun-fonce:var(--rose-fonce);
  --brun-clair:var(--rose-clair);
  --filet:#EADFD9;
  --grise:var(--gris);
  --grise-texte:var(--gris);
  --vert:#7C9A6B;
  --rouge:#A33B2E;

  --argile:var(--rose);
  --argile-fonce:var(--rose-fonce);
  --argile-nuit:var(--nuit);
  --cacao:var(--encre);

  /* Les cinq nuances de rubrique, dérivées du rose de la charte. */
  --rose-mariage:#B57768;
  --rose-evenements:#A9685A;
  --rose-rubriques:#9A5A4A;
  --rose-boutique:#8B4F41;
  --rose-professionnels:#7A4238;

  --teinte:#9A5A4A;
  --teinte-claire:#D6B6AD;
  --teinte-profonde:#7A4238;
  --teinte-nuit:#241A15;

  /* Instrument Serif pour les titres, les chiffres et les
     citations ; Instrument Sans pour le texte et l'interface. */
  --display:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --texte:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --main:var(--display);

  --marge:clamp(20px, 5vw, 64px);
  --large:1280px;
  --etroit:820px;
  --r:14px;
  --r-doux:26px;
  --ombre:0 18px 44px -22px rgba(43,33,29,.34);
  --ombre-douce:0 8px 22px -14px rgba(43,33,29,.4);
  --transition:.35s cubic-bezier(.2,.7,.2,1);
}

[data-teinte="mariage"]{--teinte:var(--rose-mariage);--teinte-claire:#F3DDD5;--teinte-profonde:#B07E6E;--teinte-nuit:#8E6C60}
[data-teinte="evenements"]{--teinte:var(--rose-evenements);--teinte-claire:#EDD1C4;--teinte-profonde:#A96F58;--teinte-nuit:#7E5140}
[data-teinte="professionnels"]{--teinte:var(--rose-professionnels);--teinte-claire:#DFC0B0;--teinte-profonde:#8A5947;--teinte-nuit:#6B4433}
[data-teinte="rubriques"]{--teinte:var(--rose-rubriques);--teinte-claire:#EBCEC2;--teinte-profonde:#A16A56;--teinte-nuit:#7A4E3D}
[data-teinte="boutique"]{--teinte:var(--rose-boutique);--teinte-claire:#E4C6B7;--teinte-profonde:#94654F;--teinte-nuit:#6F4A38}

/* ── 2. Bases ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Le dégradé de rose : soutenu en haut, il s'éclaircit vers le bas
     et reprend une touche de pêche au pied de page. */
  background:linear-gradient(180deg,
    #F6E2D2 0%, #FBEEE3 14%, var(--creme) 42%, var(--creme) 68%, #F9EBDC 100%);
  background-attachment:fixed;
  color:var(--brun);
  font-family:var(--texte);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Le grain de l'atelier : la même trame que le logiciel de gestion. */
body::before{ content:none; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sable)}
:focus-visible{outline:2px solid var(--argile-fonce);outline-offset:3px;border-radius:var(--r)}

h1,h2,h3,h4{
  margin:0;line-height:1.18;letter-spacing:0;
}
h1{font-size:clamp(38px,5.6vw,68px)}
h2{font-size:clamp(30px,4.2vw,52px)}
h3{font-size:clamp(21px,2.4vw,28px)}
h1{font-size:clamp(38px,6.2vw,76px)}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:clamp(21px,2.4vw,29px)}
p{margin:0 0 1.1em}
strong{font-weight:500;color:var(--cacao)}

/* ── 3. Utilitaires de composition ──────────────────────────── */
.fb-shell{position:relative;z-index:1}
.fb-large{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.fb-etroit{max-width:var(--etroit);margin-inline:auto;padding-inline:var(--marge)}
.fb-section{padding-block:clamp(60px,8vw,124px)}
.fb-section--serre{padding-block:clamp(40px,5vw,72px)}

/* Petites capitales : l'unité typographique de repérage du site. */
.fb-oeil{
  font-family:var(--texte);font-size:11px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--argile-fonce);
  display:inline-block;margin:0 0 14px;
}
.fb-oeil--or{color:var(--or-texte)}
.fb-oeil--clair{color:var(--sable)}

.fb-chapo{
  font-family:var(--display);font-size:clamp(19px,2.1vw,25px);
  font-style:italic;color:var(--cacao);line-height:1.45;max-width:56ch;
}
.fb-corps p{max-width:66ch}
.fb-corps p:last-child{margin-bottom:0}

/* Filet gravé + ornement : la séparation de section du site. */
.fb-filet{
  display:flex;align-items:center;gap:16px;
  color:var(--or);margin-block:6px;
}
.fb-filet::before,.fb-filet::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--filet) 18%,var(--filet) 82%,transparent)}
.fb-filet span{font-size:9px;letter-spacing:.4em;color:var(--or-texte);text-transform:uppercase;white-space:nowrap}

/* ── 4. Boutons ─────────────────────────────────────────────── */
.fb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--r);
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:var(--transition);white-space:nowrap;
}
.fb-btn--plein{background:var(--teinte-profonde);color:#fff;box-shadow:var(--ombre-douce)}
.fb-btn--plein:hover{background:var(--argile-nuit)}
.fb-btn--plein:hover{background:var(--argile-fonce);transform:translateY(-2px)}
.fb-btn--terre{background:var(--argile-fonce);color:#fff}
.fb-btn--terre:hover{background:var(--argile-fonce);transform:translateY(-2px)}
.fb-btn--ligne{border:1px solid var(--cacao);color:var(--cacao)}
.fb-btn--ligne:hover{background:var(--teinte-profonde);color:#fff;border-color:var(--teinte-profonde)}
.fb-btn--clair{border:1px solid var(--argile);color:var(--argile-fonce);background:#fff}
.fb-btn--clair:hover{background:#fff;color:var(--argile-fonce);border-color:#fff}
.fb-btn--petit{padding:10px 18px;font-size:10.5px}
.fb-btn[disabled]{opacity:.45;pointer-events:none}

/* Lien souligné à la volée */
.fb-lien{
  border-bottom:1px solid var(--argile);padding-bottom:2px;
  transition:border-color .3s,color .3s;color:var(--argile-fonce);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.fb-lien:hover{color:var(--cacao);border-color:var(--cacao)}

/* ── 5. Bandeau d'alerte ────────────────────────────────────── */
.fb-alerte{
  background:linear-gradient(100deg,var(--argile-fonce),var(--teinte));color:#fff;
  font-size:13px;letter-spacing:.02em;position:relative;z-index:60;
}
.fb-alerte-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:11px}
.fb-alerte b{color:var(--or);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
.fb-alerte a{border-bottom:1px solid var(--or);color:var(--creme);padding-bottom:1px}
.fb-alerte a:hover{color:var(--or)}
.fb-alerte-fermer{margin-left:auto;color:var(--argile);font-size:18px;line-height:1;padding:4px 6px}
.fb-alerte-fermer:hover{color:var(--creme)}

/* ── 6. En-tête ─────────────────────────────────────────────── */
.fb-entete{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,239,.86);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--filet);
  transition:box-shadow .3s,background .3s;
}
.fb-entete.est-fixe{box-shadow:0 10px 30px -26px rgba(36,26,21,.6)}
.fb-entete-in{display:flex;align-items:center;gap:26px;padding-block:14px}

.fb-marque{display:flex;align-items:center;gap:12px;flex-shrink:0}
.fb-marque img{height:46px;width:auto;object-fit:contain}
.fb-marque-txt{display:flex;flex-direction:column;line-height:1}
/* L'écriture de la maison. Elle porte le nom partout où il apparaît. */
.fb-marque-nom{
  font-family:var(--main);font-size:31px;font-weight:700;
  color:var(--argile-fonce);line-height:.95;letter-spacing:.01em;
}
.fb-marque-sub{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-texte);margin-top:4px;font-weight:600}

/* Le sceau du logiciel de gestion, repris à l'identique :
   rond d'argile, filet blanc à l'intérieur, F cursif. */
.fb-sceau{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,var(--sable-clair),var(--sable));
  border:1.5px solid var(--argile);
  box-shadow:inset 0 0 0 3px #fff;
  display:grid;place-items:center;
  font-family:var(--main);font-weight:700;font-size:24px;color:var(--argile-fonce);
}

/* La même écriture, en accent, là où le site doit se faire chaleureux. */
.fb-signature{
  font-family:var(--main);font-weight:600;
  font-size:clamp(26px,3vw,38px);color:var(--argile-fonce);
  line-height:1.1;
}
.fb-signature--or{color:var(--or-fonce)}
.fb-signature--clair{color:#fff}

.fb-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.fb-nav-item{position:relative}
.fb-nav-lien{
  display:block;padding:10px 14px;border-radius:var(--r);white-space:nowrap;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  color:var(--cacao);transition:color .25s,background .25s;
}
@media (max-width:1240px){
  .fb-nav-lien{padding:10px 9px;font-size:11px;letter-spacing:.1em}
  .fb-entete-in{gap:14px}
  .fb-marque-sub{display:none}
}
.fb-nav-lien:hover,.fb-nav-item.est-ouvert .fb-nav-lien,.fb-nav-lien.est-actif{color:var(--argile-fonce)}
.fb-nav-lien.est-actif{box-shadow:inset 0 -1px 0 var(--argile-fonce)}

/* Menu déroulant */
.fb-volet{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:260px;background:var(--papier);border:1px solid var(--filet);
  border-top:2px solid var(--or);border-radius:var(--r);
  box-shadow:var(--ombre);padding:12px;
  opacity:0;visibility:hidden;transition:var(--transition);
}
.fb-nav-item.est-ouvert .fb-volet{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.fb-volet a{
  display:block;padding:9px 13px;border-radius:var(--r);font-size:14px;
  color:var(--cacao);transition:background .2s,color .2s,padding-left .2s;
}
.fb-volet a:hover{background:var(--sable-clair);color:var(--argile-fonce);padding-left:18px}

.fb-outils{display:flex;align-items:center;gap:6px;flex-shrink:0}
.fb-outil{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  color:var(--cacao);transition:background .25s,color .25s;position:relative;
}
.fb-outil:hover{background:var(--sable-clair);color:var(--argile-fonce)}
.fb-outil svg{width:19px;height:19px}
.fb-pastille{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  background:var(--argile-fonce);color:#fff;border-radius:9px;
  font-size:10px;font-weight:500;display:grid;place-items:center;letter-spacing:0;
}
.fb-burger{display:none}

/* ── 7. Héros — le carton d'invitation ──────────────────────── */
.fb-heros{
  position:relative;min-height:clamp(540px,84vh,860px);
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(165deg,var(--sable-clair) 0%,var(--sable) 55%,var(--teinte-claire) 100%);
}
.fb-heros-fond{position:absolute;inset:0}
.fb-heros-fond img{width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.06);animation:fb-respire 24s ease-in-out infinite alternate}
.fb-heros-fond::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(130% 80% at 50% -6%, rgba(255,255,255,.78), transparent 58%),
    linear-gradient(180deg, rgba(251,246,239,.62), rgba(236,208,181,.42) 45%, rgba(199,155,137,.55)),
    repeating-linear-gradient(-8deg, transparent 0 78px, rgba(255,255,255,.16) 78px 82px, transparent 82px 160px);
}
@keyframes fb-respire{from{transform:scale(1.02)}to{transform:scale(1.1)}}

/* Le filet gravé du carton */
.fb-cadre{
  position:relative;z-index:2;text-align:center;color:var(--cacao);
  padding:clamp(44px,6vw,74px) clamp(26px,5vw,66px);
  max-width:820px;margin-inline:20px;
  background:rgba(251,246,239,.93);
  border-radius:var(--r-doux);
  box-shadow:var(--ombre);
}
.fb-cadre::before,.fb-cadre::after{
  content:'';position:absolute;pointer-events:none;border-radius:6px;
  border:1px solid rgba(218,169,57,.7);
}
.fb-cadre::before{inset:13px}
.fb-cadre::after{inset:20px;border-color:rgba(199,155,137,.38)}
.fb-cadre h1{color:var(--argile-fonce);text-shadow:none}
.fb-cadre h1 em{font-style:italic;color:var(--teinte-profonde);display:block}
.fb-cadre .fb-oeil{color:var(--or-fonce)}
.fb-heros-txt{
  font-size:16px;color:var(--cacao);max-width:44ch;margin:22px auto 30px;font-weight:400;
}
.fb-heros-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Cartel de musée sous le héros */
.fb-cartel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  border-top:1px solid rgba(255,255,255,.5);
  background:linear-gradient(180deg,transparent,rgba(251,246,239,.72));
}
.fb-cartel-in{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:15px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--argile-fonce);font-weight:600;
}
.fb-cartel-in span{opacity:.72}
.fb-cartel-defile{margin-left:auto;display:flex;align-items:center;gap:9px;color:var(--or);opacity:.9}
.fb-cartel-defile i{width:1px;height:26px;background:currentColor;display:block;animation:fb-tomber 2.4s ease-in-out infinite;transform-origin:top}
@keyframes fb-tomber{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Animation d'entrée */
.fb-monte{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.fb-monte.est-vu{opacity:1;transform:none}
.fb-monte.d1{transition-delay:.1s}.fb-monte.d2{transition-delay:.2s}
.fb-monte.d3{transition-delay:.3s}.fb-monte.d4{transition-delay:.4s}

/* ── 8. Repères chiffrés ────────────────────────────────────── */
.fb-reperes{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  background:var(--sable-clair);
}
.fb-repere{padding:26px 20px;text-align:center;border-left:1px solid var(--filet)}
.fb-repere:first-child{border-left:none}
.fb-repere b{display:block;font-family:var(--display);font-size:clamp(26px,3.4vw,40px);font-weight:500;color:var(--argile-fonce);line-height:1}
.fb-repere span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grise-texte)}

/* ── 9. Titres de section ───────────────────────────────────── */
.fb-tete{margin-bottom:clamp(30px,4vw,52px)}
.fb-tete--centre{text-align:center;max-width:640px;margin-inline:auto}
.fb-tete--centre .fb-chapo{margin-inline:auto}
.fb-tete h2{margin-bottom:14px}
.fb-tete h2 em{font-style:italic;color:var(--argile-fonce)}
.fb-tete-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ── 10. Les univers ────────────────────────────────────────── */
.fb-univers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.fb-univers-carte{
  position:relative;display:block;overflow:hidden;aspect-ratio:3/4;
  border-radius:var(--r-doux);
  background:linear-gradient(160deg,var(--teinte-claire) 0%,var(--teinte) 52%,var(--teinte-profonde) 100%);
  box-shadow:var(--ombre-douce);
}
.fb-univers-carte img{
  width:100%;height:100%;object-fit:cover;opacity:.85;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s;
}
.fb-univers-carte:hover img{transform:scale(1.07);opacity:.55}
.fb-univers-carte::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 22%,var(--teinte-nuit) 96%);
}
.fb-univers-in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(22px,3vw,34px);color:var(--creme);
}
.fb-univers-in h3{color:var(--creme);margin-bottom:8px;font-size:clamp(24px,2.7vw,33px)}
.fb-univers-in p{font-size:14px;color:rgba(255,255,255,.86);margin-bottom:16px;max-width:32ch}
.fb-univers-in .fb-lien{color:#FBE7B4;border-color:rgba(255,255,255,.45)}
.fb-univers-carte:hover .fb-lien{color:var(--creme);border-color:var(--creme)}

/* ── 11. La fiche de régie — signature du site ──────────────── */
.fb-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2vw,28px)}
.fb-fiche{
  background:var(--papier);border:1px solid var(--filet);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s;
}
.fb-fiche:hover{transform:translateY(-5px);box-shadow:var(--ombre);border-color:var(--argile)}
.fb-fiche-img{position:relative;aspect-ratio:4/5;background:var(--sable-clair);overflow:hidden}
.fb-fiche-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.fb-fiche:hover .fb-fiche-img img{transform:scale(1.06)}
.fb-fiche-vide{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--main);font-size:44px;color:var(--argile);opacity:.5;
}
.fb-fiche-etat{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);border-radius:20px;padding:5px 11px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cacao);
}
.fb-point{width:6px;height:6px;border-radius:50%;background:var(--vert);flex-shrink:0}
.fb-point--bas{background:var(--or)}
.fb-point--nul{background:var(--rouge)}

.fb-fiche-corps{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1;gap:9px}
.fb-ref{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grise-texte);
  display:flex;gap:8px;align-items:center;
}
.fb-ref::after{content:'';height:1px;flex:1;background:var(--filet)}
.fb-fiche-corps h3{font-size:19px;line-height:1.2}
.fb-fiche-desc{font-size:13px;color:var(--grise-texte);line-height:1.55;margin:0}
.fb-fiche-pied{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--filet);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.fb-prix{font-family:var(--display);font-size:23px;font-weight:500;color:var(--cacao);line-height:1}
.fb-prix small{font-family:var(--texte);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grise-texte);display:block;margin-top:3px;font-weight:400}
.fb-ajout{
  width:40px;height:40px;border-radius:50%;background:var(--sable-clair);
  border:1px solid var(--filet);display:grid;place-items:center;color:var(--argile-fonce);
  transition:background .3s,color .3s,transform .3s;flex-shrink:0;
}
.fb-ajout:hover{background:var(--argile-fonce);color:#fff;border-color:var(--argile-fonce);transform:rotate(90deg)}
.fb-ajout svg{width:16px;height:16px}

/* ── 12. Packs ──────────────────────────────────────────────── */
.fb-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(16px,2vw,26px)}
.fb-pack{
  background:var(--papier);border:1px solid var(--filet);border-top:2px solid var(--or);
  border-radius:var(--r);padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s,box-shadow .5s;
}
.fb-pack:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.fb-pack-img{aspect-ratio:16/10;overflow:hidden;background:var(--sable-clair)}
.fb-pack-img img{width:100%;height:100%;object-fit:cover}
.fb-pack-in{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.fb-pack-in h3{margin-bottom:8px}
.fb-pack-in > p{font-size:14px;color:var(--grise-texte);margin-bottom:18px}
.fb-liste{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:8px}
.fb-liste li{
  font-size:13.5px;padding-left:20px;position:relative;color:var(--cacao);line-height:1.5;
}
.fb-liste li::before{
  content:'';position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--or);
}
.fb-pack-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid var(--filet)}

/* ── 13. Thèmes / types / catégories ────────────────────────── */
.fb-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fb-vignette{
  display:block;padding:22px 20px;background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r);
  transition:transform .4s,border-color .4s,background .4s;position:relative;overflow:hidden;
}
.fb-vignette:hover{transform:translateY(-3px);border-color:var(--argile);background:var(--sable-clair)}
.fb-vignette-pastille{width:22px;height:22px;border-radius:50%;margin-bottom:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.fb-vignette h3{font-size:20px;margin-bottom:5px}
.fb-vignette p{font-size:13px;color:var(--grise-texte);margin:0}

/* ── 14. Avis ───────────────────────────────────────────────── */
.fb-avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,28px)}
.fb-avis-carte{
  background:var(--papier);border:1px solid var(--filet);border-radius:var(--r);
  padding:30px 28px 26px;display:flex;flex-direction:column;gap:14px;position:relative;
}
.fb-avis-carte::before{
  content:'“';position:absolute;top:6px;right:20px;
  font-family:var(--display);font-size:82px;color:var(--sable);line-height:1;
}
.fb-etoiles{color:var(--or);font-size:13px;letter-spacing:3px}
.fb-avis-txt{font-family:var(--display);font-size:19px;font-style:italic;color:var(--cacao);line-height:1.5;margin:0}
.fb-avis-pied{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px}
.fb-avis-pied img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--filet)}
.fb-avis-nom{font-size:13px;font-weight:500;color:var(--cacao);letter-spacing:.06em}
.fb-avis-age{font-size:11px;color:var(--grise-texte);letter-spacing:.14em;text-transform:uppercase}

/* ── 15. Étapes ─────────────────────────────────────────────── */
.fb-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid rgba(169,117,95,.25)}
.fb-etape{padding:30px 26px 30px 0;border-right:1px solid rgba(169,117,95,.25);position:relative}
.fb-etape:last-child{border-right:none}
.fb-etape-n{
  font-size:10px;letter-spacing:.28em;color:var(--or-texte);text-transform:uppercase;
  display:block;margin-bottom:12px;
}
.fb-etape h3{font-size:22px;margin-bottom:8px}
.fb-etape p{font-size:14px;color:var(--cacao);opacity:.85;margin:0;max-width:34ch}

/* ── 16. Engagements ────────────────────────────────────────── */
.fb-engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet)}
.fb-engagement{background:var(--creme);padding:30px 28px;transition:background .4s}
.fb-engagement:hover{background:var(--papier)}
.fb-engagement h3{font-size:20px;margin-bottom:9px}
.fb-engagement p{font-size:14px;color:var(--grise-texte);margin:0}

/* ── 17. Bande sombre (appel) ───────────────────────────────── */
.fb-bande{background:linear-gradient(120deg,var(--sable-clair),var(--sable));color:var(--cacao);position:relative;overflow:hidden;border-block:1px solid var(--filet)}
.fb-bande::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-8deg, transparent 0 78px, rgba(236,208,181,.035) 78px 82px, transparent 82px 160px);
}
.fb-bande-in{position:relative;z-index:2;text-align:center;padding-block:clamp(64px,9vw,120px)}
.fb-bande h2{color:var(--argile-fonce);margin-bottom:16px}
.fb-bande h2 em{font-style:italic;color:var(--or-fonce)}
.fb-bande p{color:var(--cacao);max-width:52ch;margin:0 auto 30px;font-size:16px}

/* ── 18. Réassurance ────────────────────────────────────────── */
.fb-reassurance{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,3vw,40px);text-align:center}
.fb-reassurance-item img{height:56px;width:auto;margin:0 auto 16px;object-fit:contain}
.fb-reassurance-item h3{font-size:20px;margin-top:4px}

/* ── 19. Pages intérieures ──────────────────────────────────── */
.fb-banniere{
  position:relative;background:linear-gradient(135deg,var(--teinte-profonde),var(--teinte));color:#fff;
  min-height:clamp(280px,42vh,420px);display:flex;align-items:flex-end;overflow:hidden;
}
.fb-banniere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.fb-banniere::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),var(--teinte-nuit) 96%);opacity:.92}
.fb-banniere-in{position:relative;z-index:2;padding-block:clamp(32px,5vw,58px);width:100%}
.fb-banniere h1{max-width:20ch}
.fb-banniere .fb-chapo{margin-top:16px}


/* Le fil d'Ariane prend la couleur de la page : sans cela il
   laissait une bande claire entre la bannière et le contenu. */
.fb-fil{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-texte);padding-block:16px;
  background:var(--fond-page,var(--banniere-fond,transparent));
}
.fb-fil a:hover{color:var(--argile-fonce)}
.fb-fil span{color:var(--filet);margin-inline:8px}

.fb-duo{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.fb-duo--inverse{grid-template-columns:.85fr 1.15fr}
.fb-cadre-img{position:relative;border-radius:var(--r);overflow:hidden}
.fb-cadre-img img{width:100%;height:auto}
.fb-cadre-img::after{content:'';position:absolute;inset:10px;border:1px solid rgba(218,169,57,.4);pointer-events:none}

.fb-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fb-galerie img{border-radius:var(--r);aspect-ratio:1;object-fit:cover;width:100%}

/* Encadré latéral */
.fb-encadre{
  background:var(--sable-clair);border:1px solid var(--filet);border-left:2px solid var(--or);
  border-radius:var(--r);padding:26px 26px 28px;
}
.fb-encadre h3{font-size:20px;margin-bottom:12px}
.fb-encadre p{font-size:14px;margin-bottom:.8em}
.fb-encadre p:last-child{margin-bottom:0}

/* ── 20. Boutique ───────────────────────────────────────────── */
.fb-boutique{display:grid;grid-template-columns:250px 1fr;gap:clamp(24px,3vw,48px);align-items:start}
.fb-filtres{position:sticky;top:96px}
.fb-filtre-bloc{border-bottom:1px solid var(--filet);padding-bottom:20px;margin-bottom:20px}
.fb-filtre-bloc:last-child{border-bottom:none}
.fb-filtre-titre{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--or-fonce);margin-bottom:14px;display:block}
.fb-filtre-liste{display:flex;flex-direction:column;gap:2px}
.fb-filtre{
  text-align:left;padding:8px 12px;border-radius:var(--r);font-size:13.5px;
  color:var(--cacao);transition:background .25s,color .25s;display:flex;justify-content:space-between;gap:8px;
}
.fb-filtre:hover{background:var(--sable-clair)}
.fb-filtre.est-actif{background:var(--teinte-profonde);color:#fff;border-color:var(--teinte-profonde)}
.fb-filtre b{font-weight:400;opacity:.5;font-size:11px}

.fb-barre{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--filet);
}
.fb-compte{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grise-texte)}
.fb-champ{
  display:flex;align-items:center;gap:9px;background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r);padding:9px 14px;
  flex:1 1 260px;max-width:380px;min-width:0;
}
.fb-champ input{border:none;background:none;outline:none;flex:1;font-size:14px}
.fb-champ svg{width:15px;height:15px;color:var(--grise-texte);flex-shrink:0}
.fb-tri{margin-left:auto;background:var(--papier);border:1px solid var(--filet);border-radius:var(--r);padding:9px 12px;font-size:13px;color:var(--cacao)}

.fb-etat{text-align:center;padding:70px 20px;color:var(--grise-texte)}
.fb-etat h3{margin-bottom:10px}
.fb-etat p{max-width:44ch;margin-inline:auto;font-size:14px}
.fb-sablier{
  width:26px;height:26px;border:2px solid var(--filet);border-top-color:var(--argile-fonce);
  border-radius:50%;margin:0 auto 18px;animation:fb-tourne .9s linear infinite;
}
@keyframes fb-tourne{to{transform:rotate(360deg)}}

/* ── 21. Le carnet de devis (panier) ────────────────────────── */
.fb-voile{
  position:fixed;inset:0;z-index:80;background:rgba(36,26,21,.5);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:var(--transition);
}
.fb-voile.est-ouvert{opacity:1;visibility:visible}
.fb-carnet{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100%);
  background:var(--creme);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1);
  box-shadow:-30px 0 70px -40px rgba(36,26,21,.7);
}
.fb-carnet.est-ouvert{transform:none}
/* Le bord perforé du carnet à souche */
.fb-carnet::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:14px;
  background:radial-gradient(circle at 0 7px, transparent 0 5px, var(--sable-clair) 5px) 0 0/14px 18px repeat-y;
  border-right:1px dashed var(--filet);
}
.fb-carnet-tete{padding:26px 26px 18px 40px;border-bottom:1px solid var(--filet)}
.fb-carnet-tete h2{font-size:27px}
.fb-carnet-tete p{font-size:13px;color:var(--grise-texte);margin:6px 0 0}
.fb-carnet-fermer{position:absolute;top:22px;right:20px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--cacao)}
.fb-carnet-fermer:hover{background:var(--sable)}
.fb-carnet-corps{flex:1;overflow-y:auto;padding:18px 26px 18px 40px}
.fb-ligne{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--filet)}
.fb-ligne img,.fb-ligne .fb-ligne-vide{width:64px;height:74px;object-fit:cover;border-radius:var(--r);flex-shrink:0;background:var(--sable-clair)}
.fb-ligne-vide{display:grid;place-items:center;font-family:var(--main);font-size:24px;color:var(--argile)}
.fb-ligne-in{flex:1;min-width:0}
.fb-ligne-in h4{font-family:var(--display);font-size:17px;font-weight:500;color:var(--cacao);margin:0 0 2px;line-height:1.25}
.fb-ligne-ref{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grise-texte)}
/* Les options retenues, sous la pièce, dans le carnet. */
.fb-ligne-opts{list-style:none;padding:0;margin:5px 0 2px}
.fb-ligne-opts li{
  display:flex;justify-content:space-between;gap:10px;
  font-size:11.5px;color:var(--grise-texte);padding:1px 0;
}
.fb-ligne-opts li span:last-child{white-space:nowrap}
.fb-ligne-bas{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-qte{display:flex;align-items:center;border:1px solid var(--filet);border-radius:var(--r);background:var(--papier)}
.fb-qte button{width:28px;height:28px;display:grid;place-items:center;color:var(--cacao);font-size:15px}
.fb-qte button:hover{background:var(--sable-clair);color:var(--argile-fonce)}
.fb-qte span{min-width:28px;text-align:center;font-size:13px}
.fb-ligne-prix{margin-left:auto;font-family:var(--display);font-size:18px;color:var(--cacao)}
.fb-oter{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grise-texte)}
.fb-oter:hover{color:var(--rouge)}
.fb-carnet-pied{padding:20px 26px 26px 40px;border-top:1px solid var(--filet);background:var(--sable-clair)}
.fb-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fb-total span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grise-texte)}
.fb-total b{font-family:var(--display);font-size:30px;font-weight:500;color:var(--cacao)}
.fb-note{font-size:12px;color:var(--grise-texte);margin:0 0 16px;line-height:1.5}
.fb-carnet-pied .fb-btn{width:100%}

/* ── 22. Formulaire de devis ────────────────────────────────── */
.fb-form{display:grid;gap:16px}
.fb-form-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fb-label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-fonce);margin-bottom:7px}
.fb-input,.fb-textarea,.fb-select{
  width:100%;padding:13px 15px;background:var(--papier);
  border:1px solid var(--filet);border-radius:var(--r);font-size:15px;
  transition:border-color .3s,box-shadow .3s;
}
.fb-input:focus,.fb-textarea:focus,.fb-select:focus{outline:none;border-color:var(--argile-fonce);box-shadow:0 0 0 3px rgba(169,117,95,.12)}
.fb-textarea{min-height:130px;resize:vertical;font-family:var(--texte)}
.fb-aide{font-size:12px;color:var(--grise-texte);margin:6px 0 0}
.fb-recap{background:var(--sable-clair);border:1px solid var(--filet);border-radius:var(--r);padding:20px 22px;margin-bottom:22px}
.fb-recap ul{list-style:none;padding:0;margin:0;font-size:14px}
.fb-recap li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--filet)}
.fb-recap li:last-child{border-bottom:none;padding-top:12px;font-family:var(--display);font-size:19px;color:var(--cacao)}

/* ── 23. FAQ ────────────────────────────────────────────────── */
.fb-faq{border-top:1px solid var(--filet)}
.fb-faq-item{border-bottom:1px solid var(--filet)}
.fb-faq-q{
  width:100%;text-align:left;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2.1vw,23px);color:var(--cacao);
  transition:color .3s;
}
.fb-faq-q:hover{color:var(--argile-fonce)}
.fb-faq-q::after{
  content:'+';position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--or-fonce);font-family:var(--texte);font-weight:300;transition:transform .4s;
}
.fb-faq-item.est-ouvert .fb-faq-q::after{transform:translateY(-50%) rotate(45deg)}
.fb-faq-r{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.fb-faq-r p{padding:0 44px 24px 0;margin:0;font-size:15px;color:var(--cacao);max-width:70ch}

/* ── 24. Blog ───────────────────────────────────────────────── */
.fb-billets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,32px)}
.fb-billet{display:block;background:var(--papier);border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;transition:transform .5s,box-shadow .5s}
.fb-billet:hover{transform:translateY(-5px);box-shadow:var(--ombre)}
.fb-billet-img{aspect-ratio:16/10;overflow:hidden;background:var(--sable-clair)}
.fb-billet-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.fb-billet:hover .fb-billet-img img{transform:scale(1.05)}
.fb-billet-in{padding:22px 24px 26px}
.fb-billet-meta{display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grise-texte);margin-bottom:12px}
.fb-billet-meta b{color:var(--argile-fonce);font-weight:500}
.fb-billet-in h3{font-size:22px;margin-bottom:9px}
.fb-billet-in p{font-size:14px;color:var(--grise-texte);margin:0}

/* ── 25. Pied de page ───────────────────────────────────────── */
.fb-pied{background:var(--bande-lettre,#F3E5D6);color:var(--brun-fonce);position:relative;z-index:1}
.fb-pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,54px);padding-block:clamp(50px,7vw,84px)}
.fb-pied h4{font-family:var(--display);font-size:21px;color:var(--argile-fonce);margin-bottom:18px;font-weight:600}
.fb-pied ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fb-pied a{font-size:14px;color:var(--cacao);transition:color .25s,padding-left .25s}
.fb-pied a:hover{color:var(--or-fonce);padding-left:5px}
.fb-pied-marque img{height:54px;margin-bottom:16px}
.fb-pied-marque p{font-size:14px;color:var(--cacao);opacity:.82;max-width:32ch}
.fb-pied-coord{font-size:14px;color:var(--cacao);line-height:1.9;margin-top:14px}
.fb-reseaux{display:flex;gap:9px;margin-top:20px}
.fb-reseaux a{
  width:38px;height:38px;border:1px solid var(--argile);border-radius:50%;
  display:grid;place-items:center;color:var(--argile-fonce);background:rgba(255,255,255,.5);
  transition:background .3s,color .3s,border-color .3s;
}
.fb-reseaux a:hover{background:var(--or);color:#fff;border-color:var(--or);padding-left:0}
.fb-reseaux svg{width:16px;height:16px}
.fb-infolettre{display:flex;gap:8px;margin-top:16px}
.fb-infolettre input{
  flex:1;background:#fff;border:1px solid var(--filet);
  border-radius:var(--r);padding:12px 14px;color:var(--cacao);font-size:14px;
}
.fb-infolettre input::placeholder{color:var(--grise-texte)}
.fb-infolettre input:focus{outline:none;border-color:var(--argile);box-shadow:0 0 0 3px rgba(199,155,137,.2)}
.fb-pied-bas{
  border-top:1px solid rgba(169,117,95,.22);padding-block:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.1em;color:var(--grise-texte);
}
.fb-pied-bas a{font-size:11.5px}

/* Le lien discret vers la console */
.fb-regie{opacity:.5;transition:opacity .3s;letter-spacing:.2em;text-transform:uppercase;font-size:10px}
.fb-regie:hover{opacity:1;color:var(--or-fonce)}

/* ── 26. Notifications ──────────────────────────────────────── */
.fb-messages{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;gap:10px}
.fb-message{
  background:var(--cacao);color:#fff;padding:14px 20px;border-radius:var(--r);
  border-left:2px solid var(--or);box-shadow:var(--ombre);font-size:14px;
  animation:fb-entre .45s cubic-bezier(.2,.7,.2,1);max-width:330px;
}
@keyframes fb-entre{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* ── 27. Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .fb-univers{grid-template-columns:1fr;gap:16px}
  .fb-univers-carte{aspect-ratio:16/10}
  .fb-boutique{grid-template-columns:1fr}
  .fb-filtres{position:static}
  .fb-filtre-liste{flex-direction:row;flex-wrap:wrap}
  .fb-filtre{border:1px solid var(--filet);border-radius:20px;padding:7px 14px;font-size:12.5px}
  .fb-pied-haut{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .fb-nav{display:none}
  .fb-burger{display:grid}
  .fb-duo,.fb-duo--inverse{grid-template-columns:1fr}
  .fb-reperes{grid-template-columns:1fr 1fr}
  .fb-repere:nth-child(3){border-left:none}
  .fb-repere:nth-child(n+3){border-top:1px solid var(--filet)}
  .fb-etape{border-right:none;border-bottom:1px solid var(--filet);padding-right:0}
  .fb-etape:last-child{border-bottom:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .fb-alerte{font-size:12px}
  .fb-alerte-in{padding-block:9px;gap:5px 12px}
  .fb-alerte a{font-size:12px}
  .fb-alerte-fermer{position:absolute;top:6px;right:10px}
  .fb-alerte .fb-large{position:relative}
  .fb-entete-in{padding-block:11px;gap:12px}
  .fb-marque img{height:38px}
  .fb-marque-nom{font-size:23px}
  .fb-marque-sub{display:none}
  .fb-cadre{padding:34px 22px;margin-inline:14px}
  .fb-cadre::after{inset:6px}
  .fb-heros-actions{flex-direction:column}
  .fb-heros-actions .fb-btn{width:100%}
  .fb-cartel{display:none}
  .fb-pied-haut{grid-template-columns:1fr;gap:34px}
  .fb-form-duo{grid-template-columns:1fr}
  .fb-carnet{width:100%}
  .fb-galerie{grid-template-columns:1fr 1fr}
  .fb-messages{top:14px;bottom:auto;left:14px;right:14px}
  .fb-message{max-width:none}
}

/* ── 28. Menu mobile ────────────────────────────────────────── */
.fb-tiroir{
  position:fixed;inset:0;z-index:95;background:var(--creme);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.fb-tiroir.est-ouvert{transform:none}
.fb-tiroir-tete{display:flex;align-items:center;justify-content:space-between;padding:18px var(--marge);border-bottom:1px solid var(--filet)}
.fb-tiroir-nav{padding:20px var(--marge) 50px}
.fb-tiroir-groupe{border-bottom:1px solid var(--filet);padding-block:14px}
.fb-tiroir-groupe > a{display:block;font-family:var(--display);font-size:29px;color:var(--cacao);padding-block:6px}
.fb-tiroir-groupe ul{list-style:none;padding:8px 0 4px;margin:0;display:flex;flex-direction:column;gap:3px}
.fb-tiroir-groupe li a{display:block;font-size:14.5px;color:var(--grise-texte);padding:6px 0 6px 16px;border-left:1px solid var(--filet)}
.fb-tiroir-groupe li a:hover{color:var(--argile-fonce);border-color:var(--argile-fonce)}

/* ── 29. Impression ─────────────────────────────────────────── */
@media print{
  .fb-entete,.fb-alerte,.fb-carnet,.fb-voile,.fb-messages,.fb-pied,.fb-cartel{display:none!important}
  body{background:#fff}
  body::before{display:none}
}

/* ── 30. Mouvement réduit ───────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .fb-monte{opacity:1;transform:none}
}

/* ── 30. Le devis chiffré ───────────────────────────────────── */
.fb-bloc{
  border:1px solid var(--filet);border-radius:var(--r-doux);
  padding:20px 22px 22px;margin-bottom:20px;background:var(--papier);
}
.fb-bloc legend{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-texte);font-weight:600;padding:0 8px;
}
.fb-bloc > div + div,.fb-bloc > .fb-form-duo + div{margin-top:14px}

.fb-choix{display:grid;gap:10px}
.fb-choix-item{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  border:1px solid var(--filet);border-radius:var(--r);padding:13px 15px;
  transition:border-color .25s,background .25s;
}
.fb-choix-item:hover{background:var(--sable-clair)}
.fb-choix-item:has(input:checked){border-color:var(--teinte);background:var(--sable-clair)}
.fb-choix-item input{margin-top:3px;accent-color:var(--teinte-profonde)}
.fb-choix-item b{display:block;font-weight:500;color:var(--cacao)}
.fb-choix-item small{display:block;font-size:12.5px;color:var(--grise-texte);margin-top:2px;line-height:1.5}

.fb-recap-liste{list-style:none;padding:0;margin:0}
.fb-recap-liste li{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--filet);font-size:14px;
}
.fb-recap-liste li:last-child{border-bottom:none}
.fb-recap-q{color:var(--grise-texte);font-weight:400}
.fb-recap-dates{display:block;font-size:11.5px;color:var(--grise-texte);margin-top:3px;line-height:1.5}
.fb-recap-opt{padding-left:16px;font-size:13px;color:var(--grise-texte);border-bottom:none!important;padding-block:2px}
.fb-recap-attente{color:var(--grise-texte);font-style:italic}
.fb-recap-total{
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--argile-fonce);
  border-top:1px solid var(--argile)!important;margin-top:6px;padding-top:14px!important;
}

.fb-etiq{
  display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;font-weight:600;vertical-align:middle;
}
.fb-etiq--or{background:rgba(218,169,57,.18);color:var(--or-texte)}
.fb-etiq--rouge{background:rgba(193,88,75,.14);color:var(--rouge)}

.fb-caution{
  margin-top:18px;border:1px dashed var(--argile);border-radius:var(--r);
  padding:15px 17px;background:var(--sable-clair);
}
.fb-caution-tete{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;
}
.fb-caution-tete span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-texte);font-weight:600}
.fb-caution-tete b{font-family:var(--display);font-size:22px;font-weight:600;color:var(--argile-fonce)}
.fb-caution p{font-size:12.5px;color:var(--grise-texte);margin:0;line-height:1.6}

.fb-souci{
  margin-top:16px;border-left:3px solid var(--rouge);
  background:rgba(193,88,75,.07);border-radius:0 var(--r) var(--r) 0;padding:13px 16px;
}
.fb-souci p{font-size:13.5px;margin:0 0 5px;color:var(--cacao)}
.fb-souci p:last-child{margin-bottom:0}

/* Les options d'une pièce, sur sa fiche */
.fb-options{margin-top:22px;border-top:1px solid var(--filet);padding-top:20px}
.fb-options-titre{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-texte);font-weight:600;display:block;margin-bottom:12px;
}
.fb-option{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:11px 14px;border:1px solid var(--filet);border-radius:var(--r);margin-bottom:8px;
  transition:border-color .25s,background .25s;
}
.fb-option:hover{background:var(--sable-clair)}
.fb-option:has(input:checked){border-color:var(--teinte);background:var(--sable-clair)}
.fb-option input{accent-color:var(--teinte-profonde)}
.fb-option-nom{flex:1;font-size:14px}
.fb-option-prix{font-size:14px;color:var(--argile-fonce);font-weight:500;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   31. La refonte à l'image du site : bandeau rose, vagues, écriture
   ═══════════════════════════════════════════════════════════════ */

/* ── Le bandeau d'entête, en rose plein ─────────────────────── */
.fb-entete{
  background:var(--rose-entete);
  border-bottom:none;box-shadow:none;
  position:sticky;top:0;z-index:50;
}
.fb-entete.est-fixe{box-shadow:0 8px 26px -20px rgba(122,87,76,.7)}

.fb-entete-haut{
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding-block:14px;
}
.fb-marque{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0}
.fb-marque img{height:clamp(56px,6.5vw,86px);width:auto;object-fit:contain}
.fb-marque-nom{
  font-family:var(--p-secondaire);font-weight:700;
  font-size:clamp(38px,5vw,60px);line-height:1;
}
.fb-marque-pastille{
  display:inline-block;margin-top:4px;background:var(--or);color:#fff;
  font-family:var(--texte);font-size:clamp(9px,.85vw,12px);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 14px;border-radius:6px;
}
.fb-baseline{
  flex:1;text-align:center;font-family:var(--p-secondaire);
  font-size:clamp(16px,1.9vw,27px);color:var(--creme);line-height:1.3;
}
.fb-social{display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);flex-shrink:0}
.fb-social a,.fb-social button{
  color:var(--brun-fonce);display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;transition:background .25s,color .25s;
}
.fb-social a:hover,.fb-social button:hover{background:rgba(255,255,255,.35)}
.fb-social svg{width:21px;height:21px}

.fb-entete-bas{
  display:flex;align-items:center;gap:clamp(10px,2vw,30px);
  padding-bottom:14px;
}
.fb-sceau{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.22);border:none;box-shadow:none;
  display:grid;place-items:center;
  font-family:var(--p-secondaire);font-weight:700;font-size:30px;color:rgba(255,255,255,.75);
}
.fb-nav{display:flex;align-items:center;gap:clamp(6px,1.8vw,30px);margin-left:0}
.fb-nav-lien{
  font-family:var(--p-secondaire);font-size:clamp(19px,2.1vw,29px);
  font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--creme);padding:4px 2px;border-radius:0;white-space:nowrap;
  transition:color .25s;
}
.fb-nav-lien:hover,.fb-nav-lien.est-actif{color:#fff;background:none}
.fb-nav-lien.est-actif::after{content:none}
.fb-nav-item.a-enfants > .fb-nav-lien::after{
  content:'';display:inline-block;margin-left:8px;vertical-align:middle;
  border:5px solid transparent;border-top-color:var(--creme);
  transform:translateY(3px);
}
.fb-entete-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0}
.fb-btn-contact{
  font-family:var(--p-secondaire);font-size:clamp(17px,1.7vw,24px);
  background:var(--peche-clair);color:var(--brun-fonce);
  padding:9px 26px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;
  transition:background .25s,transform .25s;
}
.fb-btn-contact:hover{background:#fff;transform:translateY(-1px)}
.fb-panier{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.6);border-radius:10px;
  padding:9px 18px;color:var(--brun-fonce);font-family:var(--texte);font-size:14px;
  transition:background .25s;
}
.fb-panier:hover{background:rgba(255,255,255,.28)}
.fb-panier b{font-weight:500}
.fb-panier .fb-pastille{
  background:var(--rouge);color:#fff;border-radius:50%;
  min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;font-weight:600;
}

.fb-volet{
  background:var(--peche-clair);border:none;border-radius:var(--r);
  box-shadow:var(--ombre);padding:10px;min-width:230px;
}
.fb-volet a{
  font-family:var(--p-secondaire);font-size:20px;color:var(--brun);
  padding:7px 14px;border-radius:9px;letter-spacing:0;text-transform:none;
}
.fb-volet a:hover{background:var(--sable-clair);color:var(--brun-fonce);padding-left:20px}

/* ── L'annonce sous l'entête ────────────────────────────────── */
.fb-annonce{
  background:var(--peche-clair);text-align:center;
  padding:18px var(--marge);
  font-family:var(--p-secondaire);font-size:clamp(19px,2.4vw,33px);
  color:var(--brun);line-height:1.3;
}

/* ── Les vagues, motif de la maison ─────────────────────────── */
.fb-vagues{display:block;width:100%;height:clamp(58px,7vw,110px);margin-bottom:-2px}
.fb-vagues--haut{transform:rotate(180deg);margin:-2px 0 0}
.fb-vagues path{transition:none}

.fb-bande-vague{
  position:relative;
  background:linear-gradient(180deg,var(--peche-clair),var(--peche));
  padding-block:clamp(26px,4vw,54px);
}

/* ── Les quatre univers de l'accueil ───────────────────────────
   Toutes les cartes ont la même hauteur : la plus fournie fixe la
   mesure, les autres s'y alignent. La photo s'étire, la liste se
   centre. Rien ne pend dans le vide.                           */
.fb-quatre{
  display:grid;
  grid-template-columns:repeat(var(--colonnes-univers,2),minmax(0,1fr));
  gap:clamp(26px,3.4vw,58px) clamp(24px,3.5vw,64px);
  align-items:stretch;
}
.fb-quatre--egales{grid-auto-rows:1fr}

.fb-univers-bloc{display:flex;flex-direction:column;gap:14px;min-width:0}
/* Le titre réserve la place de deux lignes : « Autres rubriques »
   qui passe à la ligne ne rétrécit alors pas sa carte. */
.fb-univers-titre{
  font-size:var(--titre-univers,clamp(32px,4.4vw,62px));
  line-height:1.05;margin:0;
  min-height:2.1em;display:flex;align-items:flex-end;
}
.fb-quatre[data-align="centre"] .fb-univers-titre{justify-content:center}
.fb-quatre[data-align="droite"] .fb-univers-titre,
.fb-quatre[data-align="auto"] .fb-univers-bloc:nth-child(even) .fb-univers-titre{justify-content:flex-end}

/* L'alignement du titre par rapport à sa carte. */
.fb-quatre[data-align="auto"] .fb-univers-bloc:nth-child(even){align-items:flex-end}
.fb-quatre[data-align="auto"] .fb-univers-bloc:nth-child(even) .fb-univers-titre{text-align:right}
.fb-quatre[data-align="gauche"] .fb-univers-titre{text-align:left}
.fb-quatre[data-align="centre"] .fb-univers-bloc{align-items:center}
.fb-quatre[data-align="centre"] .fb-univers-titre{text-align:center}
.fb-quatre[data-align="droite"] .fb-univers-bloc{align-items:flex-end}
.fb-quatre[data-align="droite"] .fb-univers-titre{text-align:right}

.fb-carte-univers{
  flex:1;display:grid;
  grid-template-columns:var(--cols-univers,minmax(0,1fr) minmax(0,1.15fr));
  gap:clamp(16px,2vw,32px);align-items:stretch;width:100%;
  background:var(--peche);border-radius:var(--r-doux);
  padding:clamp(16px,1.8vw,26px);
  box-shadow:var(--ombre-douce);
  transition:transform .4s var(--transition),box-shadow .4s;
}
.fb-carte-univers:hover{box-shadow:var(--ombre)}
.fb-carte-photo{transition:transform .4s var(--transition)}
.fb-carte-photo:hover{transform:translateY(-3px)}

/* La photo garde une forme fixe et se centre dans sa colonne :
   les quatre sont ainsi rigoureusement de la même taille, quelle
   que soit la longueur de la liste d'à côté. */
.fb-carte-photo{
  border-radius:18px;overflow:hidden;background:var(--sable-clair);
  width:100%;min-width:0;max-width:100%;
  aspect-ratio:var(--photo-univers,1/1);
  align-self:center;
}
.fb-carte-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--transition)}
.fb-carte-photo:hover img{transform:scale(1.05)}
.fb-carte-photo-vide{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--p-principal);font-size:56px;color:var(--rose);opacity:.65;
}

.fb-carte-liste{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(4px,.8vw,11px);
}
/* Chaque entrée est un lien à part entière : on clique sur
   « Cérémonie » et on arrive sur Cérémonie. */
.fb-carte-liste li{
  font-size:var(--liste-univers,clamp(17px,1.8vw,26px));
  line-height:1.3;
}
.fb-carte-liste li a{
  display:flex;gap:10px;align-items:baseline;
  padding:3px 8px 3px 4px;margin-left:-4px;border-radius:9px;
  transition:background .2s,color .2s,transform .2s;
}
.fb-carte-liste li a::before{
  content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.45;transform:translateY(-3px);
  transition:opacity .2s,transform .2s;
}
.fb-carte-liste li a:hover{
  background:rgba(255,255,255,.55);transform:translateX(3px);
  color:var(--c-principal);
}
.fb-carte-liste li a:hover::before{opacity:1;transform:translateY(-3px) scale(1.25)}
.fb-carte-liste li a:focus-visible{outline:2px solid var(--c-principal);outline-offset:2px}

.fb-univers-titre a{color:inherit;transition:opacity .2s}
.fb-univers-titre a:hover{opacity:.78}

/* ── L'écriture dans le reste du site ───────────────────────── */
.fb-oeil{
  font-family:var(--p-secondaire);font-size:clamp(17px,1.7vw,22px);
  letter-spacing:0;text-transform:none;color:var(--or-texte);font-weight:600;
}
.fb-chapo{font-family:var(--p-secondaire);font-size:clamp(20px,2.2vw,28px);color:var(--brun);line-height:1.45}
.fb-btn{font-family:var(--p-secondaire);font-size:clamp(16px,1.5vw,21px);letter-spacing:0;text-transform:none;font-weight:600}
.fb-lien{font-family:var(--p-secondaire);font-size:19px;letter-spacing:0;text-transform:none}
.fb-fil,.fb-fil a{font-family:var(--p-secondaire);font-size:17px;letter-spacing:0;text-transform:none}

/* ── L'ouverture : photo et texte, côte à côte ──────────────── */
.fb-ouverture{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,68px);align-items:center;
}
.fb-ouverture-photo{
  border-radius:var(--r-doux);overflow:hidden;aspect-ratio:4/3;
  background:var(--sable-clair);box-shadow:var(--ombre);
}
.fb-ouverture-photo img{width:100%;height:100%;object-fit:cover}
.fb-ouverture-txt h2{margin:10px 0 16px}
.fb-ouverture-txt h2 em{font-style:normal;color:var(--rose-fonce);display:block}
.fb-ouverture-txt .fb-chapo{margin-bottom:26px}
@media (max-width:860px){ .fb-ouverture{grid-template-columns:1fr} }

/* ── Les repères chiffrés, sur pêche ────────────────────────── */
.fb-reperes{background:var(--peche-clair);border-block:1px solid var(--filet)}
.fb-repere b{font-family:var(--p-secondaire);color:var(--brun-fonce)}
.fb-repere span{font-family:var(--texte);color:var(--grise-texte)}

/* ── Corrections d'assise ───────────────────────────────────── */
.fb-annonce{position:relative}
.fb-annonce b{font-weight:600;color:var(--brun-fonce)}
.fb-annonce a{
  color:var(--or-texte);border-bottom:1px solid var(--or);
  font-family:var(--p-secondaire);padding-bottom:1px;
}
.fb-annonce-fermer{
  position:absolute;top:50%;right:calc(var(--marge) - 8px);transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;
  color:var(--brun-clair);transition:background .25s,color .25s;
}
.fb-annonce-fermer:hover{background:rgba(255,255,255,.6);color:var(--brun-fonce)}

/* La pastille du panier ne flotte plus : elle vit dans le bouton. */
.fb-panier .fb-pastille{position:static;transform:none;box-shadow:none}

/* Les vagues doivent se voir : la bande est nettement plus pêche
   que le fond de page. */
.fb-bande-vague{
  background:linear-gradient(180deg,var(--peche) 0%,var(--sable) 60%,var(--peche) 100%);
}


/* Le sceau du bandeau de navigation reste discret. */
.fb-entete-bas .fb-sceau{opacity:.85}

/* La barre de navigation doit tenir sur une ligne jusqu'au bout. */
@media (max-width:1500px){
  .fb-nav{gap:clamp(4px,1.2vw,20px)}
  .fb-nav-lien{font-size:clamp(17px,1.7vw,24px)}
  .fb-btn-contact{padding:8px 18px;font-size:19px}
  .fb-panier{padding:8px 13px;font-size:13px}
}
@media (max-width:1180px){
  .fb-entete-bas .fb-sceau{display:none}
  .fb-baseline{font-size:clamp(15px,1.7vw,20px)}
}
@media (max-width:900px){
  .fb-nav,.fb-entete-bas .fb-sceau{display:none}
  .fb-entete-actions{margin-left:auto}
  .fb-entete-bas{padding-bottom:12px}
  .fb-baseline{display:none}
  .fb-marque img{height:52px}
}

/* ── Les derniers restes sombres passent au rose ─────────────── */
.fb-btn--plein{background:var(--rose-fonce);color:#fff}
.fb-btn--plein:hover{background:var(--brun-fonce)}
.fb-btn--ligne{border:1px solid var(--rose-fonce);color:var(--brun-fonce);background:transparent}
.fb-btn--ligne:hover{background:var(--rose-fonce);color:#fff;border-color:var(--rose-fonce)}
.fb-btn--terre{background:var(--rose-fonce);color:#fff}
.fb-filtre.est-actif{background:var(--rose-fonce);color:#fff;border-color:var(--rose-fonce)}
.fb-voile{background:rgba(202,155,140,.45);backdrop-filter:blur(3px)}
.fb-message{background:var(--brun-fonce);border-left-color:var(--or)}
.fb-carnet{background:var(--creme)}
.fb-carnet-tete{background:var(--peche-clair);border-bottom:1px solid var(--filet)}
.fb-pied{background:var(--bande-lettre,var(--peche-clair))}
.fb-univers-carte::after{background:linear-gradient(180deg,transparent 30%,rgba(122,87,76,.72) 98%)}

/* Les panneaux hors écran ne doivent jamais élargir la page. */
html{overflow-x:hidden}
.fb-carnet{width:min(440px,100vw);max-width:100vw}
.fb-messages{max-width:100vw}
@media (max-width:620px){
  .fb-carnet{width:100vw}
  .fb-messages{left:12px;right:12px}
}

@media (max-width:620px){
  .fb-entete-haut{flex-wrap:wrap;gap:10px;padding-block:12px}
  .fb-social{margin-left:auto;gap:4px}
  .fb-social a,.fb-social button{width:30px;height:30px}
  .fb-social svg{width:18px;height:18px}
  .fb-marque-nom{font-size:34px}
  .fb-marque-pastille{font-size:8.5px;padding:3px 10px}
  .fb-entete-bas{padding-bottom:12px;gap:8px}
  .fb-btn-contact{font-size:17px;padding:7px 14px}
  .fb-panier{padding:7px 11px;font-size:12.5px}
  .fb-annonce{font-size:15px;padding:14px 44px 14px var(--marge);text-align:left}
  .fb-annonce-fermer{right:8px;top:12px;transform:none}
  .fb-carte-liste li{font-size:17px}
  .fb-univers-titre{font-size:34px}
}

/* ═══════════════════════════════════════════════════════════════
   32. Les quatre étages : univers → rubrique → famille → produits
   ═══════════════════════════════════════════════════════════════ */

/* ── Le bandeau de titre, entre deux vagues ─────────────────── */
/* Le fond de la page suit la couleur de la rubrique : plus de
   bande claire entre deux sections colorées. */
#fb-vue{background:var(--fond-page,transparent)}
.fb-bande-couleur[data-bande="titre"] .fb-bande-in{padding-block:clamp(10px,1.4vw,22px)}
.fb-bandeau-titre{text-align:center}
.fb-bandeau-titre h1{
  font-size:clamp(34px,5vw,62px);line-height:1.1;margin:0;
}

/* ── Le texte d'entrée, sur pêche ───────────────────────────── */
.fb-bande-texte{background:var(--peche);position:relative}
.fb-texte-centre{text-align:center;padding-block:clamp(14px,2.4vw,34px)}
.fb-texte-titre{
  font-family:var(--p-secondaire);font-style:italic;
  font-size:clamp(24px,3vw,38px);margin-bottom:18px;
}
.fb-bande-texte p{
  font-family:var(--p-secondaire);font-size:clamp(18px,2vw,25px);
  color:var(--brun);line-height:1.55;margin:0 0 16px;
}
.fb-bande-texte p:last-child{margin-bottom:0}

/* ── Les tuiles : le motif du site ──────────────────────────── */
.fb-bande-tuiles{
  background:linear-gradient(180deg,var(--peche-clair),var(--peche));
  padding-block:clamp(28px,4vw,56px);
}
.fb-bande-produits{
  background:var(--peche);padding-block:clamp(28px,4vw,56px);
}
.fb-tuiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,210px),1fr));
  gap:clamp(18px,2.4vw,36px) clamp(12px,1.8vw,26px);
  align-items:start;
}
.fb-tuile{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.fb-tuile-photo{
  display:block;width:100%;aspect-ratio:3/4;position:relative;
  border-radius:20px;overflow:hidden;background:var(--sable-clair);
  box-shadow:0 10px 26px -16px rgba(122,87,76,.55);
  transition:transform .45s var(--transition),box-shadow .45s;
}
.fb-tuile:hover .fb-tuile-photo{transform:translateY(-5px);box-shadow:0 18px 36px -18px rgba(122,87,76,.6)}
.fb-tuile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fb-tuile-vide{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--p-secondaire);font-size:44px;color:var(--rose);opacity:.6;
}
.fb-tuile-etat{
  position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);
  border-radius:20px;padding:4px 11px;font-family:var(--texte);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grise-texte);
}
.fb-tuile-nom{
  font-family:var(--p-secondaire);font-size:clamp(19px,2vw,27px);
  color:var(--brun);line-height:1.2;transition:color .25s;
}
.fb-tuile:hover .fb-tuile-nom{color:var(--brun-fonce)}

/* La carte d'une pièce : quatre lignes fixes — photo, nom, prix,
   bouton. Le nom occupe sa rangée quelle que soit sa longueur, si
   bien que les prix et les boutons s'alignent d'une carte à
   l'autre. Sans cela, un nom sur trois lignes décalait tout. */
.fb-tuiles:has(.fb-tuile--produit){align-items:stretch}
.fb-tuile--produit{
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:8px;height:100%;
}
.fb-tuile--produit .fb-tuile-nom{align-self:start}
.fb-tuile--produit .fb-tuile-prix{align-self:end}
.fb-tuile--produit .fb-tuile-btn{align-self:end;justify-self:center}
.fb-tuile-prix{
  font-family:var(--p-secondaire);font-size:clamp(20px,2.1vw,28px);
  color:var(--brun);line-height:1;
}
.fb-tuile-btn{
  font-family:var(--p-secondaire);font-size:clamp(15px,1.5vw,19px);
  background:var(--rose-entete);color:#fff;line-height:1.15;
  padding:9px 20px;border-radius:12px;
  transition:background .25s,transform .25s;
  text-align:center;
}
.fb-tuile-btn:hover{background:var(--rose-fonce);transform:translateY(-1px)}

/* Les tuiles larges, pour trois sous-familles en pleine page */
.fb-bande-tuiles--large .fb-tuiles{
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  max-width:1080px;margin-inline:auto;gap:clamp(20px,3vw,44px);
}
.fb-bande-tuiles--large .fb-tuile-photo{aspect-ratio:3/4.4;border-radius:26px}
.fb-bande-tuiles--large .fb-tuile-nom{font-size:clamp(24px,2.7vw,36px)}

/* La liste en écriture, centrée */
.fb-liste-script{
  list-style:none;padding:0;margin:14px 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
}
.fb-liste-script li{
  font-family:var(--p-secondaire);font-size:clamp(18px,1.9vw,24px);color:var(--brun);
}
.fb-liste-script li::before{content:'· ';color:var(--rose-fonce)}

@media (max-width:560px){
  .fb-tuiles{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .fb-tuile-nom{font-size:17px}
  .fb-tuile-btn{font-size:14px;padding:8px 14px}
}

/* ═══════════════════════════════════════════════════════════════
   33. Les bandes de l'accueil, aux couleurs relevées sur le site
   ═══════════════════════════════════════════════════════════════ */

/* Les quatre teintes sont posées par le moteur d'après contenu.js.
   Elles servent de fond aux grandes bandes, et les vagues qui les
   séparent prennent la couleur de la bande suivante.            */
.fb-bande-couleur{position:relative}
.fb-bande-couleur > .fb-large,
.fb-bande-couleur > .fb-etroit{position:relative;z-index:2}

.fb-b-univers{background:var(--bande-univers)}
.fb-b-avis{background:var(--bande-avis)}
.fb-b-lettre{background:var(--bande-lettre)}
.fb-b-services{background:var(--bande-services)}

/* Sur la bande la plus soutenue, le texte passe au brun foncé :
   le crème du site d'origine y était illisible. */
.fb-b-services,.fb-b-services h2,.fb-b-services h3,.fb-b-services p{color:var(--brun-fonce)}
.fb-b-avis,.fb-b-avis p{color:var(--c-texte)}
.fb-b-lettre,.fb-b-lettre p{color:var(--c-texte)}


/* ── Les vignettes de rubrique ─────────────────────────────────
   L'illustration prend la part qu'on lui donne dans la console,
   le nom occupe le reste. Toutes les cartes ont la même hauteur. */
.fb-vignettes{
  display:grid;
  grid-template-columns:repeat(var(--cols-vignettes,4),minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  align-items:stretch;
}
.fb-vignette{
  display:flex;align-items:center;gap:clamp(8px,1.2vw,18px);
  background:var(--peche-clair);border-radius:22px;
  padding:clamp(12px,1.4vw,20px);
  min-height:var(--haut-vignette,155px);
  box-shadow:0 8px 22px -18px rgba(122,87,76,.5);
  transition:transform .4s var(--transition),box-shadow .4s,background .3s;
  overflow:hidden;
}
.fb-vignette:hover{
  transform:translateY(-4px);background:#fff;
  box-shadow:0 16px 32px -20px rgba(122,87,76,.55);
}

/* L'illustration : une vraie place, pas une pastille. */
.fb-vignette-icone{
  flex:0 0 var(--part-illu,42%);
  align-self:stretch;display:grid;place-items:center;min-width:0;
}
.fb-vignette-icone img{
  width:100%;height:100%;max-height:100%;
  object-fit:contain;object-position:center;display:block;
}
.fb-vignette-lettre{
  font-family:var(--p-principal);
  font-size:clamp(38px,5vw,72px);color:var(--c-principal);
  line-height:1;opacity:.28;
}
.fb-vignette-nom{
  flex:1;min-width:0;
  font-size:var(--texte-vignette,clamp(19px,2vw,30px));
  line-height:1.15;overflow-wrap:normal;word-break:keep-all;hyphens:none;
}
.fb-vignettes[data-align="centre"] .fb-vignette-nom{text-align:center}
.fb-vignettes[data-align="gauche"] .fb-vignette-nom{text-align:left}
.fb-vignettes[data-align="droite"] .fb-vignette-nom{text-align:right}

@media (max-width:1100px){
  .fb-vignettes{grid-template-columns:repeat(min(var(--cols-vignettes,4),3),minmax(0,1fr))}
}
@media (max-width:840px){
  .fb-vignettes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .fb-vignettes{grid-template-columns:1fr;gap:12px}
  .fb-vignette{min-height:0;padding:14px}
  .fb-vignette-nom{font-size:min(var(--texte-vignette,22px),22px);text-align:left!important}
}

/* Le filet droit, quand les vagues sont éteintes */
.fb-filet-droit{height:3px;width:100%}

/* ═══════════════════════════════════════════════════════════════
   34. Le carrousel des pièces les plus louées
   ═══════════════════════════════════════════════════════════════ */
.fb-carrousel{position:relative;display:flex;align-items:center;gap:8px}
.fb-carr-fenetre{
  flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:6px;
}
.fb-carr-fenetre::-webkit-scrollbar{display:none}
.fb-carr-fenetre:focus-visible{outline:2px solid var(--argile-fonce);outline-offset:4px;border-radius:var(--r)}
.fb-carr-piste{display:flex;gap:clamp(12px,1.8vw,26px)}
.fb-carr-case{
  flex:0 0 calc((100% - 4 * clamp(12px,1.8vw,26px)) / 5);
  min-width:0;scroll-snap-align:start;
}
.fb-carr-fleche{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.75);color:var(--c-principal);
  box-shadow:0 6px 18px -12px rgba(122,87,76,.6);
  transition:background .25s,transform .25s;
}
.fb-carr-fleche:hover{background:#fff;transform:scale(1.06)}
.fb-carr-fleche svg{width:22px;height:22px}
.fb-carr-points{
  position:absolute;left:0;right:0;bottom:-26px;
  display:flex;justify-content:center;gap:8px;
}
.fb-carr-point{
  width:9px;height:9px;border-radius:50%;padding:0;
  background:rgba(156,110,93,.3);transition:background .25s,transform .25s;
}
.fb-carr-point:hover{background:rgba(156,110,93,.55)}
.fb-carr-point.est-ici{background:var(--c-principal);transform:scale(1.25)}

@media (max-width:1100px){ .fb-carr-case{flex-basis:calc((100% - 3 * 20px) / 4)} }
@media (max-width:860px){ .fb-carr-case{flex-basis:calc((100% - 2 * 16px) / 3)} }
@media (max-width:620px){
  .fb-carr-case{flex-basis:calc((100% - 12px) / 2)}
  .fb-carr-fleche{width:36px;height:36px}
  .fb-carr-fleche svg{width:18px;height:18px}
}

/* ── Les formes de séparation ─────────────────────────────────
   Elles se posent sur le bord de la bande, en position absolue :
   changer leur hauteur les étire sans jamais pousser le contenu.
   C'est aussi ce qui les fait se fondre dans la bande au lieu de
   s'ajouter à elle.                                            */
.fb-forme{
  position:absolute;left:50%;bottom:-1px;
  transform:translateX(-50%) scaleX(var(--forme-miroir,1));
  z-index:1;pointer-events:none;display:block;line-height:0;
}
.fb-forme--haut{
  top:-1px;bottom:auto;
  transform:translateX(-50%) rotate(180deg) scaleX(var(--forme-miroir,1));
}
/* Par défaut la forme reste derrière le contenu. Cochée « par-dessus »,
   elle passe devant — sans jamais intercepter les clics. */
.fb-forme--avant{z-index:9}

/* Une forme plus large que l'écran doit rester centrée sans
   élargir la page. */
.fb-bande-couleur,.fb-bande-vague,.fb-section{overflow-x:clip}
.fb-forme{margin-inline:auto}

/* Dans le cadre de la console, on masque ce qui gênerait la
   lecture : le tiroir de menu et les notifications. */
.fb-en-apercu .fb-messages{display:none}

/* ═══════════════════════════════════════════════════════════════
   35. La charte : quatre couleurs, quatre polices
   ═══════════════════════════════════════════════════════════════
   Les variables sont posées par le moteur d'après contenu.js.
   Les valeurs ci-dessous ne servent que si la charte est absente.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Les quatre rôles typographiques de la charte. Ce sont ces
     variables-là qui commandent les titres d'univers et de rubrique,
     pas --display : les régler ailleurs ne suffit pas. La console
     peut toujours les remplacer, elle passe après. */
  --repli:'Iowan Old Style', Georgia, serif;
  --c-principal:#9A5A4A;
  --c-secondaire:#241A15;
  --c-texte:#6E6058;
  --c-accentue:#B08A2F;

  --p-principal:'Instrument Serif', var(--repli);
  --p-principal-graisse:400;
  --p-secondaire:'Instrument Serif', var(--repli);
  --p-secondaire-graisse:400;
  --p-texte:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-texte-graisse:400;
  --p-texte-lignes:1.7;
  --p-accentue:'Instrument Serif', var(--repli);
  --p-accentue-graisse:400;
  --p-accentue-style:italic;
}

/* Le corps du texte */
body{
  font-family:var(--p-texte);
  font-weight:var(--p-texte-graisse);
  font-size:var(--p-texte-taille,16px);
  line-height:var(--p-texte-lignes,1.75);
  letter-spacing:var(--p-texte-lettres,normal);
  word-spacing:var(--p-texte-mots,normal);
}

/* Le nom de la maison et les grands titres : police principale */
.fb-marque-nom,.fb-univers-titre,.fb-bandeau-titre h1,
h1,h2{
  font-family:var(--p-principal);
  font-weight:var(--p-principal-graisse);
  text-transform:var(--p-principal-casse,none);
  font-style:var(--p-principal-style,normal);
  letter-spacing:var(--p-principal-lettres,normal);
  color:var(--c-principal);
}

/* Navigation, vignettes, sous-titres : police secondaire */
.fb-nav-lien,.fb-baseline,.fb-btn-contact,.fb-vignette-nom,
.fb-tuile-nom,.fb-tuile-prix,.fb-carte-liste li,.fb-volet a,
.fb-chapo,.fb-texte-titre,.fb-bande-texte p,.fb-annonce,
h3,h4{
  font-family:var(--p-secondaire);
  font-weight:var(--p-secondaire-graisse);
  text-transform:var(--p-secondaire-casse,none);
  font-style:var(--p-secondaire-style,normal);
  letter-spacing:var(--p-secondaire-lettres,normal);
  color:var(--c-principal);
}

/* Boutons, mentions, fil d'Ariane : police accentuée */
.fb-btn,.fb-lien,.fb-oeil,.fb-fil,.fb-fil a,.fb-tuile-btn,
.fb-liste-script li,.fb-recap-total{
  font-family:var(--p-accentue);
  font-weight:var(--p-accentue-graisse);
  text-transform:var(--p-accentue-casse,none);
  letter-spacing:var(--p-accentue-lettres,normal);
}

/* Le texte courant prend la couleur « Texte » de la charte. */
p,li,td,label,.fb-corps{color:var(--c-texte)}
.fb-b-services p,.fb-b-services h3,.fb-b-services span{color:#42291F}

/* Les boutons pleins gardent leur lisibilité. */
.fb-btn--plein,.fb-tuile-btn{color:#fff}

/* ── L'entête : fond rose soutenu, texte clair ──────────────────
   La couleur « principal » de la charte est faite pour les fonds
   clairs. Sur le bandeau rose, elle tomberait à 1,8 sur 21 : la
   navigation garde donc le crème, comme sur votre site.        */
.fb-nav-lien,.fb-baseline{color:var(--creme)}
.fb-nav-lien:hover,.fb-nav-lien.est-actif{color:#fff}
.fb-social a,.fb-social button{color:var(--c-principal)}
.fb-btn-contact{color:var(--c-principal)}
.fb-panier{color:var(--c-principal)}
.fb-volet a{color:var(--c-principal)}

/* Le pied et les bandes claires suivent la charte. */
.fb-pied a,.fb-pied p,.fb-pied-coord{color:var(--c-texte)}
.fb-pied h4,.fb-pied .fb-marque-nom{color:var(--c-principal)}

/* ── Une bande de l'accueil ─────────────────────────────────── */
.fb-bande-couleur{position:relative;overflow-x:clip}
.fb-bande-in{
  position:relative;z-index:2;
  padding-block:clamp(30px,4.5vw,72px);
}
.fb-bande-couleur > .fb-bande-in > .fb-large,
.fb-bande-couleur > .fb-bande-in > .fb-etroit{position:relative;z-index:2}
.fb-bande-couleur[data-bande="reperes"] .fb-bande-in{padding-block:0}
.fb-bande-couleur[data-bande="annonce"] .fb-bande-in{padding-block:0}

/* La bande réserve la place des formes, pour que le texte ne passe
   pas dessous. La réserve suit la hauteur réglée. */
.fb-bande-couleur{position:relative;overflow:hidden}
.fb-bande-in{
  position:relative;z-index:2;
  padding-block:clamp(38px,5vw,80px);
}
.fb-bande-couleur[data-bande="reperes"] .fb-bande-in,
.fb-bande-couleur[data-bande="annonce"] .fb-bande-in{padding-block:clamp(26px,3vw,44px)}

/* ── Les quatre univers, sur les écrans étroits ─────────────── */
/* Deux colonnes tant que la place le permet, y compris sur une
   tablette en portrait. Les hauteurs restent égales tout du long. */
@media (max-width:1180px){
  .fb-quatre{grid-template-columns:repeat(min(var(--colonnes-univers,2),2),minmax(0,1fr))}
}
@media (max-width:900px){
  .fb-carte-univers{grid-template-columns:1fr;gap:14px}
  /* Une seule colonne : la photo prend toute la largeur, dans un
     format paysage plus adapté à la lecture verticale. */
  .fb-carte-photo{aspect-ratio:16/10}
}

/* Sous 640 px, une seule colonne : forcer l'égalité ferait des
   cartes à moitié vides sur un téléphone. */
@media (max-width:640px){
  .fb-quatre{grid-template-columns:1fr;gap:28px}
  .fb-quatre--egales{grid-auto-rows:auto}
  .fb-quatre .fb-univers-bloc{align-items:flex-start}
  .fb-quatre .fb-univers-titre{text-align:left;justify-content:flex-start;min-height:0}
  .fb-quatre[data-align="centre"] .fb-univers-bloc{align-items:center}
  .fb-quatre[data-align="centre"] .fb-univers-titre{text-align:center;justify-content:center}
  .fb-univers-titre{font-size:min(var(--titre-univers,34px),34px)}
  .fb-carte-liste li{font-size:min(var(--liste-univers,18px),18px)}
}

/* Sur les écrans les plus étroits, la marge du site se resserre :
   à 320 px, le pied de page dépassait de six pixels. */
@media (max-width:400px){
  :root{--marge:14px}
  .fb-pied-haut,.fb-infolettre{min-width:0}
  .fb-infolettre{flex-wrap:wrap}
  .fb-infolettre input{min-width:0;flex:1 1 140px}
  .fb-heros-actions .fb-btn{width:100%;justify-content:center}
}

/* Une bande sans contenu ne garde que sa forme de séparation. */
.fb-bande--vide .fb-bande-in{padding-block:0;min-height:2px}

/* Le pied de page est lui aussi une bande. */
.fb-pied.fb-bande-couleur{overflow:hidden}
.fb-pied.fb-bande-couleur > .fb-large{position:relative;z-index:2}

/* ═══════════════════════════════════════════════════════════════
   36. La fiche produit : description et avis
   ═══════════════════════════════════════════════════════════════ */
.fb-onglets{
  display:flex;gap:6px;flex-wrap:wrap;
  border-bottom:1px solid var(--filet);margin-bottom:26px;
}
.fb-onglet{
  padding:12px 22px;border-radius:12px 12px 0 0;
  font-family:var(--p-secondaire);font-size:clamp(17px,1.8vw,22px);
  color:var(--c-texte);background:transparent;margin-bottom:-1px;
  border-bottom:2px solid transparent;transition:.2s;
}
.fb-onglet:hover{background:var(--sable-clair)}
.fb-onglet.est-actif{
  color:var(--c-principal);background:var(--sable-clair);
  border-bottom-color:var(--c-principal);
}
.fb-onglet-vue{display:none}
.fb-onglet-vue.est-actif{display:block;animation:fb-monte .4s var(--transition)}

/* Le bilan : moyenne et nombre */
.fb-avis-bilan{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--filet);
}
.fb-avis-bilan b{font-size:26px;font-family:var(--p-principal);color:var(--c-principal)}
.fb-avis-bilan span{font-size:14px;color:var(--c-texte)}
.fb-avis-note{font-size:12.5px;opacity:.8;font-style:italic}

.fb-etoiles{color:#C9962A;letter-spacing:2px;font-size:18px;white-space:nowrap}
.fb-etoiles-vides{color:rgba(122,87,76,.25)}

.fb-avis-liste{display:grid;gap:18px;margin-bottom:34px}
.fb-avis-item{
  background:var(--sable-clair);border-radius:var(--r);
  padding:18px 20px;border:1px solid var(--filet);
}
.fb-avis-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.fb-avis-tete b{font-family:var(--p-secondaire);font-size:18px;color:var(--c-principal)}
.fb-avis-tete time{font-size:12.5px;color:var(--c-texte);opacity:.75}
.fb-etiq-mini{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(124,154,107,.16);color:#4E6B3E;border-radius:20px;padding:3px 9px;
}
.fb-avis-item p{margin:8px 0 0;line-height:1.65}
.fb-avis-aucun{margin-bottom:30px;line-height:1.75}
.fb-avis-merci{
  background:rgba(124,154,107,.14);border-radius:var(--r);
  padding:18px 20px;margin:0;color:#3F5A32;
}

/* Le formulaire */
.fb-avis-form{max-width:640px;display:grid;gap:16px}
.fb-notes{display:flex;gap:4px}
.fb-note{
  font-size:30px;line-height:1;color:rgba(122,87,76,.25);
  padding:2px 3px;transition:color .15s,transform .15s;
}
.fb-note:hover{transform:scale(1.15)}
.fb-note.est-pleine{color:#C9962A}
.fb-oblig{color:var(--danger)}

@media (max-width:560px){
  .fb-onglet{padding:10px 15px;font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════
   37. Le parcours de réservation d'une pièce
   ═══════════════════════════════════════════════════════════════ */
.fb-resa{display:grid;gap:22px;margin:26px 0}
.fb-etape{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
/* Les étapes de la page « Comment ça marche » posaient un filet à
   droite et de la marge en haut : dans la colonne de réservation,
   cela traçait un trait vertical le long des choix. */
.fb-resa .fb-etape{padding:0;border-right:none;border-bottom:none}
.fb-etape-num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:14px;font-weight:600;
  background:var(--c-principal);color:#fff;font-family:var(--p-texte);
}
.fb-etape-corps{min-width:0}
.fb-etape-corps h3{margin:2px 0 12px;font-size:clamp(18px,2vw,24px)}
/* Le supplément d'un groupe, dit sous son titre. */
.fb-resa .fb-etape-aide{
  margin:-8px 0 12px;font-size:12.5px;color:var(--grise-texte);
  letter-spacing:.02em;max-width:none;opacity:1;
}

/* Le fil qui relie les étapes entre elles : avec six choix à la
   suite, il dit d'un coup d'œil que tout appartient au même
   parcours. */
.fb-resa .fb-etape{position:relative}
.fb-resa .fb-etape::before{
  content:'';position:absolute;left:15px;top:34px;bottom:-22px;
  width:1px;background:var(--filet);
}
.fb-resa .fb-etape:last-child::before{display:none}

/* Le choix de la période */
.fb-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fb-mode{
  padding:9px 16px;border-radius:11px;border:1px solid var(--filet);
  background:#fff;font-size:14px;color:var(--c-texte);transition:.2s;
}
.fb-mode:hover{border-color:var(--c-principal)}
.fb-mode.est-choisi{background:var(--c-principal);color:#fff;border-color:var(--c-principal)}
.fb-dates{display:flex;gap:12px;flex-wrap:wrap}
.fb-dates label{display:grid;gap:5px;font-size:12px;color:var(--c-texte)}
.fb-dates input{
  border:1px solid var(--filet);border-radius:10px;padding:9px 12px;
  font-family:var(--p-texte);font-size:14px;background:#fff;
}
.fb-encart{
  background:var(--sable-clair);border-radius:var(--r);
  padding:16px 18px;border:1px solid var(--filet);
}
.fb-encart p{margin:0 0 12px;line-height:1.6}

/* L'état du stock sur les dates choisies */
.fb-dispo{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:13px;border-radius:20px;padding:6px 14px;
}
.fb-dispo::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.fb-dispo--ok{background:rgba(124,154,107,.16);color:#4E6B3E}
.fb-dispo--peu{background:rgba(201,150,42,.18);color:#8A6410}
.fb-dispo--nul{background:rgba(193,88,75,.14);color:var(--danger)}

/* Les options, avec leur vignette */
.fb-options-liste{display:grid;gap:8px}
.fb-option{
  display:grid;grid-template-columns:auto 52px 1fr auto;gap:12px;align-items:center;
  padding:9px 13px;border:1px solid var(--filet);border-radius:12px;
  cursor:pointer;background:#fff;transition:.2s;
}
.fb-option:hover{border-color:var(--c-principal)}
.fb-option.est-prise{border-color:var(--c-principal);background:var(--sable-clair)}
.fb-option-vue{
  width:52px;height:52px;border-radius:9px;overflow:hidden;
  background:var(--sable-clair);display:grid;place-items:center;
}
.fb-option-vue img{width:100%;height:100%;object-fit:cover}
.fb-option-vide{font-family:var(--p-principal);font-size:22px;color:var(--rose);opacity:.6}
.fb-option-nom{font-size:15px;min-width:0}
.fb-option-prix{font-size:14px;font-weight:600;color:var(--c-principal);white-space:nowrap}

/* La quantité */
.fb-quantite{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fb-quantite button{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--filet);
  background:#fff;font-size:19px;line-height:1;color:var(--c-principal);transition:.2s;
}
.fb-quantite button:hover{border-color:var(--c-principal);background:var(--sable-clair)}
.fb-quantite b{font-size:19px;min-width:26px;text-align:center}

/* Le récapitulatif en images */
.fb-recap-visuel{
  background:var(--sable-clair);border:1px solid var(--filet);
  border-radius:var(--r-doux);padding:20px;margin-top:8px;
}
.fb-recap-titre{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-principal);font-weight:600;margin-bottom:14px;
}
.fb-recap-vignettes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fb-recap-vignettes figure{margin:0;width:78px;text-align:center}
.fb-recap-vignettes img,
.fb-recap-vignettes .fb-option-vide{
  width:78px;height:78px;border-radius:11px;object-fit:cover;
  display:grid;place-items:center;background:#fff;
}
.fb-recap-vignettes figcaption{
  font-size:11px;line-height:1.3;margin-top:5px;color:var(--c-texte);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fb-recap-piece img{outline:2px solid var(--c-principal);outline-offset:-2px}
.fb-recap-dates{font-size:13px;color:var(--c-texte);margin-bottom:12px}
/* Le détail du prix : la pièce, puis chaque option qui s'ajoute. */
.fb-recap-detail{list-style:none;padding:0;margin:0 0 2px}
.fb-recap-detail li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  font-size:13.5px;color:var(--c-texte);padding:6px 0;
  border-bottom:1px dashed var(--filet);
}
.fb-recap-detail li:last-child{border-bottom:none}
.fb-recap-detail li:first-child{color:var(--c-texte)}
.fb-recap-detail b{font-weight:600;white-space:nowrap;color:var(--c-principal)}
.fb-recap-detail li:first-child b{color:var(--c-texte)}
.fb-recap-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:1px solid var(--filet);margin-bottom:14px;
}
.fb-recap-total b{font-size:28px;font-family:var(--p-principal);color:var(--c-principal)}
.fb-recap-visuel .fb-btn{width:100%;justify-content:center}
.fb-recap-visuel .fb-btn[disabled]{opacity:.5;cursor:not-allowed}

@media (max-width:560px){
  .fb-option{grid-template-columns:auto 44px 1fr;row-gap:4px}
  .fb-option-prix{grid-column:2/-1;text-align:left}
  .fb-option-vue{width:44px;height:44px}
}

/* ── Le bandeau d'aperçu du brouillon ───────────────────────────
   Il ne paraît que pour vous, quand vous ouvrez le site avec
   « ?apercu=brouillon ». Les visiteurs ne le voient jamais. */
.fb-bandeau-brouillon{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:#4A342A;color:#F8EFE4;
  font-family:var(--p-texte);font-size:13.5px;
  box-shadow:0 -6px 20px -12px rgba(0,0,0,.5);
}
.fb-bandeau-brouillon b{font-weight:700;letter-spacing:.02em}
.fb-bandeau-brouillon span{opacity:.85}
.fb-bandeau-brouillon .fb-btn{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);
  padding:6px 14px;font-size:12.5px;
}
.fb-bandeau-brouillon .fb-btn:hover{background:rgba(255,255,255,.28)}
body.a-un-bandeau{padding-bottom:56px}
@media (max-width:640px){
  .fb-bandeau-brouillon{font-size:12px;gap:8px;padding:10px 14px}
  .fb-bandeau-brouillon span{display:none}
  body.a-un-bandeau{padding-bottom:52px}
}

/* ═══════════════════════════════════════════════════════════════
   38. La bannière suit la couleur de l'univers
   ═══════════════════════════════════════════════════════════════
   Le fond, le voile et la couleur du texte sont posés par le
   moteur d'après la couleur de l'univers. Un fond clair reçoit du
   texte brun foncé, un fond soutenu du texte crème : la lisibilité
   ne dépend plus du hasard.
   ═══════════════════════════════════════════════════════════════ */
.fb-banniere{
  background:var(--banniere-fond,linear-gradient(135deg,var(--teinte-claire),var(--teinte)));
  min-height:var(--banniere-haut,clamp(280px,42vh,420px));
}
.fb-banniere img{opacity:var(--banniere-photo,.45)}
.fb-banniere::after{
  background:linear-gradient(180deg,transparent 6%,var(--banniere-voile,rgba(176,126,110,.55)));
  opacity:1;
}
.fb-banniere h1,
.fb-banniere h1 a,
.fb-banniere .fb-chapo{
  color:var(--banniere-texte,#FBF6EF);
  text-shadow:var(--banniere-ombre,0 1px 14px rgba(122,87,76,.35));
}
.fb-banniere .fb-oeil{color:var(--banniere-oeil,var(--or))}

/* ── La vignette en pleine carte ────────────────────────────────
   L'illustration occupe tout l'encart, le nom se pose dessus.
   C'est le mode par défaut : une illustration réglée doit se voir. */
.fb-vignettes[data-mode="pleine"] .fb-vignette{
  display:block;position:relative;padding:0;
}
.fb-vignettes[data-mode="pleine"] .fb-vignette-icone{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;padding:clamp(8px,1.2vw,16px);
}
.fb-vignettes[data-mode="pleine"] .fb-vignette-icone img{
  width:100%;height:100%;object-fit:contain;
}
.fb-vignettes[data-mode="pleine"] .fb-vignette-nom{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.4vw,34px) 14px clamp(9px,1.1vw,14px);
  background:linear-gradient(180deg,transparent 20%,rgba(255,255,255,.86) 68%);
  text-align:center;
}
.fb-vignettes[data-mode="pleine"][data-align="gauche"] .fb-vignette-nom{text-align:left;padding-left:18px}
.fb-vignettes[data-mode="pleine"][data-align="droite"] .fb-vignette-nom{text-align:right;padding-right:18px}
.fb-vignettes[data-mode="pleine"] .fb-vignette-lettre{font-size:clamp(52px,7vw,96px)}

/* Sans illustration, le nom reste au centre de la carte. */
.fb-vignettes[data-mode="pleine"] .fb-vignette:has(.fb-vignette-lettre) .fb-vignette-nom{
  background:none;position:static;padding:0;
  display:grid;place-items:center;height:100%;
}
.fb-vignettes[data-mode="pleine"] .fb-vignette:has(.fb-vignette-lettre) .fb-vignette-icone{opacity:.25}

/* ── Comment l'illustration occupe sa carte ─────────────────────
   « couvrir » : la photo remplit la carte, quitte à être rognée.
   « contenir » : elle tient entière, avec des marges. Une photo
   veut le premier, un dessin au trait le second.               */
.fb-vignettes[data-remplir="couvrir"] .fb-vignette-icone{padding:0}
.fb-vignettes[data-remplir="couvrir"] .fb-vignette-icone img{
  object-fit:cover;object-position:center;
}
.fb-vignettes[data-remplir="contenir"] .fb-vignette-icone img{object-fit:contain}

/* Quand le nom s'affiche par-dessus une photo, le voile ne couvre
   que le bas : l'illustration doit rester visible. */
.fb-vignettes[data-remplir="couvrir"][data-mode="pleine"] .fb-vignette-nom{
  background:linear-gradient(180deg,transparent 22%,rgba(255,255,255,.9) 72%);
  padding-top:clamp(22px,2.6vw,38px);
}

/* Une illustration qui n'a pas pu se charger laisse une trace
   visible plutôt qu'une carte vide sans explication. */
.fb-vignette-icone.est-cassee::after{
  content:'Illustration introuvable';
  position:absolute;inset:auto 8px 8px;font-family:var(--p-texte);
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--danger);background:rgba(255,255,255,.8);
  border-radius:6px;padding:3px 7px;text-align:center;
}

/* La bannière est une bande : elle accueille ses formes. */
.fb-banniere{position:relative;overflow:hidden}
.fb-banniere .fb-banniere-in{position:relative;z-index:3}
.fb-banniere .fb-forme{z-index:2}
.fb-banniere .fb-forme--avant{z-index:5}

/* Une distance estimée le dit : elle ne se fait pas passer pour
   une mesure. */
.fb-estime{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(201,150,42,.18);color:#7A5410;
  border-radius:20px;padding:2px 7px;margin-left:6px;cursor:help;
}

/* ── Un choix unique : menu déroulant ou pastilles ──────────────
   Une couleur, une finition : le client n'en prend qu'une, et sa
   photo remplace la grande image de la fiche. */
.fb-choix-menu select{
  width:100%;padding:13px 42px 13px 16px;
  border:1px solid var(--filet);border-radius:12px;
  background:var(--fond-page,#fff);
  color:var(--c-principal);
  font-family:var(--p-secondaire);font-size:clamp(16px,1.7vw,20px);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239C6E5D' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
  transition:border-color .2s,box-shadow .2s;
}
.fb-choix-menu select:hover{border-color:var(--c-principal)}
.fb-choix-menu select:focus-visible{
  outline:none;border-color:var(--c-principal);
  box-shadow:0 0 0 3px rgba(156,110,93,.18);
}
.fb-choix-menu option{background:#fff;color:var(--c-texte)}

.fb-pastilles-choix{display:flex;flex-wrap:wrap;gap:10px}
.fb-past-choix{
  width:82px;padding:0;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;align-items:center;
}
.fb-past-choix img,.fb-past-choix .fb-option-vide{
  width:82px;height:82px;border-radius:12px;object-fit:cover;
  background:var(--sable-clair);display:grid;place-items:center;
  border:2px solid transparent;transition:border-color .2s,transform .2s;
}
.fb-past-choix:hover img{transform:translateY(-2px)}
.fb-past-choix.est-prise img,
.fb-past-choix.est-prise .fb-option-vide{border-color:var(--c-principal)}
.fb-past-choix span{
  font-size:11.5px;line-height:1.25;color:var(--c-texte);text-align:center;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fb-past-choix.est-prise span{color:var(--c-principal);font-weight:600}

/* Le passage d'une photo à l'autre, sans à-coup. */
.fb-cadre-img img{transition:opacity .35s var(--transition)}
.fb-cadre-img img.fb-fond-change{opacity:.25}

/* ── La description d'une pièce, telle qu'elle a été écrite ─────
   Gras, paragraphes, listes à puces : la mise en forme faite dans
   WooCommerce se retrouve sur le site. */
.fb-onglet-vue .fb-corps p{margin:0 0 1.1em;line-height:1.75}
.fb-onglet-vue .fb-corps p:last-child{margin-bottom:0}
.fb-onglet-vue .fb-corps strong,
.fb-onglet-vue .fb-corps b{font-weight:700;color:var(--c-principal)}
.fb-onglet-vue .fb-corps em,
.fb-onglet-vue .fb-corps i{font-style:italic}
.fb-onglet-vue .fb-corps ul,
.fb-onglet-vue .fb-corps ol{margin:0 0 1.2em;padding-left:1.4em}
.fb-onglet-vue .fb-corps ul{list-style:none;padding-left:0}
.fb-onglet-vue .fb-corps ul li{
  position:relative;padding-left:20px;margin-bottom:.45em;line-height:1.6;
}
.fb-onglet-vue .fb-corps ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--c-principal);opacity:.5;
}
.fb-onglet-vue .fb-corps ol li{margin-bottom:.45em;line-height:1.6}
.fb-onglet-vue .fb-corps h2,
.fb-onglet-vue .fb-corps h3,
.fb-onglet-vue .fb-corps h4{margin:1.5em 0 .5em;line-height:1.25}
.fb-onglet-vue .fb-corps a{
  color:var(--c-principal);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.fb-onglet-vue .fb-corps blockquote{
  margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--c-principal);
  background:var(--sable-clair);border-radius:0 var(--r) var(--r) 0;
}

/* Un groupe d'options : son nom, puis ses choix. */
.fb-groupe-option + .fb-groupe-option{margin-top:22px}
.fb-groupe-nom{
  font-family:var(--p-texte);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-principal);font-weight:600;
  margin:0 0 9px;
}

/* ── La grande image en couches ─────────────────────────────────
   Le fond, puis les calques des options retenues. C'est ce qui
   permet de voir un backdrop avec sa composition florale et son
   plan de table sans avoir photographié la combinaison. */
.fb-cadre-img{position:relative}
.fb-cadre-img img.fb-couche{
  display:block;width:100%;height:auto;
  transition:opacity .35s var(--transition);
}
/* La règle générale « .fb-cadre-img img » l'emportait sur celle-ci
   et rendait sa hauteur à l'automatique : le calque tombait alors
   sous la photo au lieu de se poser dessus. D'où le sélecteur plus
   appuyé, et le cadrage identique au fond pour que le PNG détouré
   se superpose exactement. */
.fb-cadre-img img.fb-couche--sur{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;object-fit:contain;object-position:center;
  background:none;pointer-events:none;
  animation:fb-couche-vient .4s var(--transition);
}
/* Le fond garde ses proportions, le calque s'y cale : les deux
   images doivent être cadrées pareil au moment du montage. */
.fb-cadre-img img.fb-couche--fond{object-fit:contain}

/* Avec cinq ou six choix à la suite, la colonne de droite est
   longue. L'image reste sous les yeux pendant qu'on l'habille :
   c'est tout l'intérêt de la superposition. */
@media (min-width:900px){
  #fb-produit .fb-cadre-img{position:sticky;top:96px}
}
/* L'apparition ne joue que sur l'opacité. Elle touchait aussi à la
   transformation, et remettait donc à plat le placement — position,
   taille et rotation — réglé dans l'aperçu de la fiche produit. */
@keyframes fb-couche-vient{
  from{opacity:0}
  to{opacity:1}
}
.fb-cadre-img.fb-fond-change .fb-couche--fond{opacity:.35}
@media (prefers-reduced-motion:reduce){
  .fb-couche--sur{animation:none}
  .fb-couche{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   L'entête et le pied selon la charte de l'agence
   ---------------------------------------------------------------
   Rien n'est reconstruit : le moteur dessine les mêmes éléments,
   avec les mêmes données de la console — menu, logo, coordonnées,
   panier. Seul l'habillage change. Ce bloc vient en dernier, il
   l'emporte donc sur les règles précédentes sans qu'on ait à les
   supprimer : si la charte ne convient pas, on retire ce bloc et
   le site revient exactement à ce qu'il était.
   ═══════════════════════════════════════════════════════════════ */

/* — La bande d'annonce, au-dessus de tout — */
.fb-annonce{
  background:var(--rose);color:#FDF6F3;
  font-family:var(--p-texte);font-size:13.5px;letter-spacing:.1em;
  padding:.6rem 1rem;text-align:center;border-radius:0;
}
.fb-annonce b{font-weight:600}
.fb-annonce a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fb-annonce-fermer{color:#FDF6F3;opacity:.7}
.fb-annonce-fermer:hover{opacity:1}

/* — L'entête : fond ivoire translucide, logo à gauche — */
.fb-entete{
  background:rgba(251,247,244,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--filet);
}
.fb-entete.est-fixe{box-shadow:0 10px 30px -26px rgba(43,33,29,.55)}

.fb-entete-haut{padding-block:10px;gap:clamp(14px,2.5vw,32px)}
.fb-marque img{height:52px}
.fb-marque-nom{
  font-family:var(--p-principal);font-weight:400;
  font-size:clamp(28px,3.4vw,42px);color:var(--rose);
}
.fb-marque-pastille{background:var(--or);color:#251A03}

/* La signature reprend la couleur du texte, plus l'ivoire du fond. */
.fb-baseline{
  font-family:var(--p-texte);font-size:clamp(13px,1.2vw,16px);
  color:var(--gris);line-height:1.5;letter-spacing:0;
}
.fb-social a,.fb-social button{color:var(--gris)}
.fb-social a:hover,.fb-social button:hover{background:var(--blush);color:var(--rose)}

/* — La barre de navigation — */
.fb-entete-bas{padding-bottom:12px;min-height:auto}
.fb-sceau{
  width:44px;height:44px;
  background:var(--blush);color:var(--rose);
  font-family:var(--p-principal);font-weight:400;font-size:22px;
}
.fb-nav{gap:clamp(8px,1.6vw,24px)}
.fb-nav-lien{
  font-family:var(--p-texte);font-size:15px;font-weight:500;
  color:var(--gris);padding:.3rem 0;
  border-bottom:1px solid transparent;border-radius:0;
}
.fb-nav-lien:hover,.fb-nav-lien.est-actif{
  color:var(--rose);border-bottom-color:var(--or);background:none;
}
.fb-nav-item.a-enfants > .fb-nav-lien::after{border-top-color:var(--gris)}

/* — Les deux actions de droite — */
.fb-btn-contact{
  font-family:var(--p-texte);font-size:15px;font-weight:500;
  background:var(--rose);color:#FDF6F3;
  padding:.72rem 1.5rem;border-radius:999px;
}
.fb-btn-contact:hover{background:var(--rose-fonce);color:#FDF6F3}
.fb-panier{
  border:1px solid var(--filet);border-radius:999px;
  padding:.62rem 1.2rem;color:var(--encre);font-size:14px;
}
.fb-panier:hover{border-color:var(--rose);color:var(--rose);background:none}
.fb-burger{color:var(--encre);border:1px solid var(--filet);border-radius:8px}

/* — Le pied : la nuit de la charte — */
.fb-pied{background:var(--nuit) !important;color:#CDBEB4}
.fb-pied h4{
  font-family:var(--p-principal);font-weight:400;
  font-size:19px;color:#F6DFB8;
}
.fb-pied a{color:#CDBEB4}
.fb-pied a:hover{color:var(--or-clair)}
.fb-pied .fb-marque-nom{color:#F6DFB8}
.fb-pied-bas{border-top:1px solid rgba(255,255,255,.12);color:#9A8A80}
.fb-reseaux a{color:#CDBEB4}
.fb-reseaux a:hover{color:var(--or-clair)}

/* Sous 1040 px, la barre se replie : huit entrées ne tiennent pas.
   C'est le point de rupture que leur cahier demande de surveiller. */
@media (max-width:1040px){
  .fb-nav{display:none}
  .fb-burger{display:inline-flex}
  .fb-baseline{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   L'ouverture, les titres et les boutons selon la charte
   ---------------------------------------------------------------
   L'ouverture de l'accueil porte déjà la structure de leur
   maquette : sur-titre, titre dont une partie est en italique,
   chapô, deux boutons, photo. Tous ces champs existent dans la
   console. Il n'y a donc rien à reconstruire, seulement à
   rhabiller — et la cliente garde la main sur chaque mot.
   ═══════════════════════════════════════════════════════════════ */

/* — Le grand titre d'ouverture — */
.fb-ouverture{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.fb-ouverture-txt h2{
  font-family:var(--p-principal);font-weight:400;
  font-size:clamp(2.6rem,5.8vw,4.7rem);line-height:1.04;
  letter-spacing:-.022em;margin:0;text-wrap:balance;color:var(--encre);
}
/* L'italique en rose : c'est la signature de la charte. */
.fb-ouverture-txt h2 em{font-style:italic;color:var(--rose)}
.fb-ouverture-txt .fb-chapo{
  max-width:47ch;margin:1.6rem 0 0;color:var(--gris);
  font-size:clamp(1.02rem,1.4vw,1.18rem);
}
.fb-ouverture-photo{
  background:var(--blush-pale);border:1px solid var(--filet);
  overflow:hidden;position:relative;
}
.fb-ouverture-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fb-heros-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* — Le sur-titre, en capitales dorées — */
.fb-oeil{
  font-family:var(--p-texte);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--or);
}

/* — Les titres de section — */
.fb-tete h2,.fb-section h2{
  font-family:var(--p-principal);font-weight:400;
  font-size:clamp(2rem,4.1vw,3.1rem);line-height:1.08;
  letter-spacing:-.02em;text-wrap:balance;color:var(--encre);
}
.fb-tete h2 em,.fb-section h2 em{font-style:italic;color:var(--rose)}

/* — Les boutons, en pastilles — */
.fb-btn{
  font-family:var(--p-texte);font-size:15px;font-weight:500;
  padding:.72rem 1.5rem;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}
.fb-btn--plein{background:var(--rose);color:#FDF6F3}
.fb-btn--plein:hover{background:var(--rose-fonce);color:#FDF6F3}
.fb-btn--ligne{border-color:var(--filet);color:var(--encre);background:none}
.fb-btn--ligne:hover{border-color:var(--rose);color:var(--rose);background:none}
.fb-btn--clair{background:var(--or);color:#251A03}
.fb-btn--clair:hover{background:var(--or-clair);color:#251A03}
.fb-btn--petit{font-size:14px;padding:.55rem 1.15rem}

/* Sous 920 px l'ouverture se met en colonne, la photo au-dessus :
   c'est le point de rupture que leur cahier demande. */
@media (max-width:920px){
  .fb-ouverture{grid-template-columns:1fr;gap:1.8rem}
  .fb-ouverture-photo{order:-1;aspect-ratio:4/3}
}

/* ═══════════════════════════════════════════════════════════════
   Le catalogue monté dans une page
   ---------------------------------------------------------------
   Quand le moteur dessine ses vues à l'intérieur d'une page qui a
   déjà son entête et son pied — la page Location — il ne doit pas
   ajouter ses propres marges hautes, ni la hauteur minimale qu'il
   se réserve quand il occupe l'écran entier.
   ═══════════════════════════════════════════════════════════════ */
#fb-vue.fb-dans-page{
  min-height:0;
  padding-top:0;
  margin-top:0;
}
/* La première bande du catalogue colle au chapô de la page. */
#fb-vue.fb-dans-page > .fb-bande:first-child,
#fb-vue.fb-dans-page > section:first-child{padding-top:clamp(.5rem,1.5vw,1.2rem)}

/* ═══════════════════════════════════════════════════════════════
   Les rubriques des quatre univers tiennent sur une ligne
   ---------------------------------------------------------------
   « Décoration événement entreprise » passait à la ligne, et la
   seconde ligne se retrouvait centrée sous la puce, ce qui se lit
   mal. On interdit le retour à la ligne et on réduit la taille
   jusqu'à ce que le plus long intitulé tienne : trente et un
   caractères dans une colonne de trois cents pixels.

   Tronquer d'un point de suspension serait pire que le retour à la
   ligne — un intitulé coupé n'apprend rien — donc on ne tronque
   pas : si la place manque vraiment, le texte déborde et cela se
   voit, ce qui vaut mieux qu'une amputation silencieuse.
   ═══════════════════════════════════════════════════════════════ */
.fb-carte-liste li{
  font-size:var(--liste-univers,clamp(13px,1.15vw,18px));
}
.fb-carte-liste li a{
  align-items:center;
  white-space:nowrap;
}
/* Sur une seule ligne, la puce s'aligne sur le texte. */
.fb-carte-liste li a::before{transform:none}

/* ═══════════════════════════════════════════════════════════════
   LA CHARTE DE L'AGENCE, APPLIQUÉE AU CATALOGUE
   ---------------------------------------------------------------
   Décision de la cliente, septembre 2026 : le catalogue adopte le
   dessin des huit pages de présentation. Concrètement, on retire
   tout ce qui faisait l'ancienne identité — les vagues, les fonds
   pêche, les grandes ombres portées, les angles très arrondis — au
   profit d'un dessin plat : ivoire et blush en alternance, filets
   d'un pixel, angles discrets, or pour les accents.

   Ce bloc vient en dernier et l'emporte sans rien supprimer :
   le retirer rend au site son apparence d'avant.
   ═══════════════════════════════════════════════════════════════ */

/* — Les bandes : plus de dégradé, plus de trame — */
.fb-bande{
  background:var(--blush-pale);
  color:var(--encre);
  border-block:1px solid var(--filet);
}
.fb-bande::after{content:none}
.fb-bande-in{padding-block:clamp(3.5rem,7vw,6rem)}
.fb-bande h2{color:var(--encre)}
.fb-bande h2 em{color:var(--rose)}
.fb-bande p{color:var(--gris)}

/* Le filet qui remplace les formes : fin et discret, pas une barre. */
.fb-filet-droit{height:1px;background:var(--filet) !important}

/* — Les cartes : plates, cernées d'un filet — */
.fb-carte,
.fb-piece,
.fb-carte-univers,
.fb-pack,
.fb-avis{
  border-radius:12px;
  border:1px solid var(--filet);
  box-shadow:none;
  background:var(--papier);
}
.fb-carte:hover,
.fb-piece:hover,
.fb-carte-univers:hover,
.fb-pack:hover{
  box-shadow:none;
  border-color:var(--rose);
  transform:none;
}

/* — Les photos : le même arrondi que les cartes — */
.fb-piece img,
.fb-carte img,
.fb-carte-univers img{border-radius:8px}

/* — Les titres de section, à la manière de la maquette — */
.fb-tete{margin-bottom:clamp(2rem,4vw,3.2rem)}
.fb-tete h2{color:var(--encre)}
.fb-tete h2 em{font-style:italic;color:var(--rose)}

/* — Les bandeaux de titre de page — */
.fb-banniere{
  background:var(--ivoire);
  color:var(--encre);
}
.fb-banniere h1{color:var(--encre)}
.fb-banniere h1 em{font-style:italic;color:var(--rose)}

/* — Les filets et les puces passent à l'or de la charte — */
.fb-oeil,
.fb-fil a,
.fb-etiq{color:var(--or)}

/* — Le carnet de devis et les volets — */
.fb-carnet,.fb-tiroir{
  background:var(--ivoire);
  border-left:1px solid var(--filet);
  box-shadow:none;
}

/* ═══════════════════════════════════════════════════════════════
   Le texte sur les bandes sombres
   ---------------------------------------------------------------
   Le cahier des charges de l'agence signale ce piège : les
   italiques des titres sont en rose, et sur une bande dont le fond
   est ce même rose, elles disparaissent. Le titre se lisait à
   peine, le chapô encore moins.

   Deux bandes sont concernées, celle de l'appel final et celle de
   l'annonce. On y pose le crème pour le titre, l'or clair pour
   l'italique, et un crème adouci pour le texte courant.
   ═══════════════════════════════════════════════════════════════ */
[data-bande="appel"],
[data-bande="annonce"]{color:#F7EFE1}

[data-bande="appel"] h2,
[data-bande="appel"] h3{color:#F7EFE1}

/* L'italique passe au sable clair, la valeur que leur cahier
   indique pour ce cas précis. L'or clair n'aurait donné que 2,26
   de contraste sur ce rose, illisible même en grand corps ;
   celui-ci monte à 4,11, ce qui convient pour un titre. */
[data-bande="appel"] h2 em,
[data-bande="appel"] h3 em,
[data-bande="appel"] i{color:#F6DFB8;font-style:italic}

[data-bande="appel"] p{color:rgba(247,239,225,.86)}
[data-bande="appel"] .fb-oeil{color:var(--or-clair)}

/* Les deux boutons : le plein passe au crème sur fond transparent,
   pour ne pas superposer deux roses presque identiques. */
[data-bande="appel"] .fb-btn--plein{
  background:#F7EFE1;color:var(--rose-fonce);
}
[data-bande="appel"] .fb-btn--plein:hover{background:#fff;color:var(--rose-fonce)}
[data-bande="appel"] .fb-btn--ligne,
[data-bande="appel"] .fb-btn--clair{
  background:transparent;border-color:rgba(247,239,225,.55);color:#F7EFE1;
}
[data-bande="appel"] .fb-btn--ligne:hover,
[data-bande="appel"] .fb-btn--clair:hover{
  background:rgba(247,239,225,.12);border-color:#F7EFE1;color:#F7EFE1;
}

/* Le déroulé de la location
   ---------------------------------------------------------------
   Quatre étapes numérotées. Le chiffre est dessiné en gros et en
   clair : il sert de repère visuel, pas de décoration, et le
   lecteur doit pouvoir compter d'un coup d'œil. */
.fb-etapes{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.2rem,2.5vw,2.2rem);
}
.fb-etape{position:relative;padding-top:8px}
.fb-etape-rang{
  display:block;font-family:var(--p-principal);
  font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;
  color:var(--or);opacity:.55;margin-bottom:.4rem;
}
.fb-etape h3{
  font-family:var(--p-principal);font-weight:400;
  font-size:1.35rem;margin:0 0 .4rem;color:var(--encre);
}
.fb-etape p{margin:0;color:var(--gris);font-size:.96rem;line-height:1.65}

/* Les pages trouvées par la recherche
   ---------------------------------------------------------------
   Elles passent avant les fiches : une page mène à des dizaines de
   pièces là où une fiche n'en donne qu'une. Le genre est écrit au-
   dessus du nom, pour qu'on sache où l'on va avant de cliquer. */
.fb-rech-pages{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.8rem;
}
.fb-rech-page{
  display:flex;flex-direction:column;gap:3px;
  padding:.85rem 1.1rem;
  background:var(--papier);
  border:1px solid var(--filet);border-radius:12px;
  transition:border-color .2s;
}
.fb-rech-page:hover{border-color:var(--rose)}
.fb-rech-genre{
  font-family:var(--p-texte);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or);
}
.fb-rech-page b{
  font-family:var(--p-principal);font-weight:400;
  font-size:1.2rem;color:var(--encre);line-height:1.25;
}