/* Genere par app/site/scripts/feuille-o.ts depuis 2-CE-QU-ON-VA-CONSTRUIRE/da/la-charte-o.html (sha256 d8ee33e4c07572a9ac98da7fbb8232d7cfad6cbc17c29e758ad36a065fb3ddb7) : ne pas editer, regenerer (D-325). */
/* Les jetons : 2-CE-QU-ON-VA-CONSTRUIRE/da/assets-o/tokens-o.css, tels quels. */
/* Charte O — jetons en trois étages, FIGÉS le 2026-09-15 (Ruben, D-245). Généré par outils/maquettes/build_da_o_assets.py : ne pas éditer. */
:root {
  /* ── primitifs : la valeur ── */
  --o-cire: #FCF9F1; /* oklch(98.2% 0.011 90) */
  --o-bloc: #FFFFFF; /* oklch(100.0% 0.000 0) */
  --o-creux: #F2E9D3; /* oklch(93.5% 0.031 88) */
  --o-trait: #E3D6B4; /* oklch(87.8% 0.047 90) */
  --o-ambre: #AA792B; /* oklch(61.2% 0.111 75) */
  --o-jaune: #FDD40E; /* oklch(87.9% 0.179 95) */
  --o-pro: #EFBA52; /* oklch(81.8% 0.134 82) */
  --o-brun: #552513; /* oklch(32.9% 0.077 40) */
  --o-nuit: #2A1209; /* oklch(21.6% 0.043 41) */
  --o-encre: #241B10; /* oklch(23.0% 0.024 72) */
  --o-second: #4A3F30; /* oklch(37.5% 0.029 75) */
  --o-sur-sombre: #FAF4E4; /* oklch(96.8% 0.022 90) */
  --o-second-sombre: #D8C3A6; /* oklch(82.7% 0.046 76) */
  --o-second-pro: #402810; /* oklch(30.1% 0.051 64) */
  --o-etat-ok: #2C6B2F; /* oklch(47.1% 0.113 144) */
  --o-etat-ok-fond: #E6F0E0; /* oklch(94.3% 0.024 133) */
  --o-etat-non: #A3321F; /* oklch(48.4% 0.152 32) */
  --o-etat-non-fond: #F8E4DE; /* oklch(93.3% 0.023 37) */
  --o-etat-attente: #5E5347; /* oklch(44.9% 0.024 70) */
  --o-etat-attente-fond: #EFE8DA; /* oklch(93.3% 0.020 85) */
  --o-rayon-net: 0;
  --o-rayon-trace: 2px;
  --o-rayon-doux: 4px;
  --o-rayon-champ: 6px;
  --o-rayon-petit: 8px;
  --o-rayon-carte: 10px;
  --o-rayon-plaque: 12px;
  --o-rayon-pilule: 999px;
  --o-rayon-rond: 50%;
  --o-ombre-fil: 0 1px 0 rgba(42,18,9,.10);
  --o-ombre-survol: 0 10px 24px -14px rgba(42,18,9,.35);
  --o-ombre-panneau: 0 30px 40px -30px rgba(42,18,9,.45);
  --o-taille-geste: 52px;
  --o-taille-touche: 44px;
  --o-picto-grille: 48;
  --o-picto-fort: 2.6;
  --o-picto-fin: 1.7;
  --o-duree-reponse: 150ms;
  --o-duree-ouverture: 250ms;
  --o-courbe-pose: cubic-bezier(.2, .8, .3, 1);
  --o-courbe-depart: cubic-bezier(.6, 0, .9, .4);
  /* ── sémantiques : le rôle ── */
  --o-surface-page: var(--o-cire);
  --o-surface-bloc: var(--o-bloc);
  --o-surface-retrait: var(--o-creux);
  --o-surface-pro: var(--o-pro);
  --o-surface-sombre: var(--o-nuit);
  --o-texte-courant: var(--o-encre);
  --o-texte-second: var(--o-second);
  --o-texte-titre: var(--o-brun);
  --o-texte-courant-retrait: var(--o-encre);
  --o-texte-second-retrait: var(--o-second);
  --o-texte-sur-pro: var(--o-nuit);
  --o-texte-second-sur-pro: var(--o-second-pro);
  --o-texte-sur-sombre: var(--o-sur-sombre);
  --o-texte-second-sur-sombre: var(--o-second-sombre);
  --o-chiffre-sur-sombre: var(--o-jaune);
  --o-geste-fond: var(--o-brun);
  --o-geste-texte: var(--o-cire);
  --o-trait-filet: var(--o-trait);
  --o-marque-lumiere: var(--o-jaune);
  --o-marque-matiere: var(--o-ambre);
  --o-picto-trait: var(--o-brun);
  /* --o-etat-ok : porté par la primitive du même nom (#2C6B2F) */
  /* --o-etat-non : porté par la primitive du même nom (#A3321F) */
  /* --o-etat-attente : porté par la primitive du même nom (#5E5347) */
  /* ── composants : l’usage ── */
  --o-c-bouton-principal-fond: var(--o-geste-fond);
  --o-c-bouton-principal-texte: var(--o-geste-texte);
  --o-c-bouton-principal-rayon: var(--o-rayon-pilule);
  --o-c-bouton-principal-hauteur: var(--o-taille-geste);
  --o-c-carte-decision-fond: var(--o-surface-bloc);
  --o-c-carte-decision-filet-haut: var(--o-marque-lumiere);
  --o-c-picto-trait: var(--o-picto-trait);
  --o-c-picto-aplat: var(--o-marque-lumiere);
  --o-c-picto-epaisseur: var(--o-picto-fin);
  --o-c-suivi-cellule-vide: var(--o-trait-filet);
  --o-c-suivi-cellule-pleine: var(--o-marque-lumiere);
  --o-c-suivi-opercule: var(--o-surface-retrait);
  --o-c-pied-fond: var(--o-surface-sombre);
  --o-c-pied-texte: var(--o-texte-sur-sombre);
}
@media (prefers-reduced-motion: reduce) { :root { --o-duree-reponse: 0ms; --o-duree-ouverture: 0ms; } }

/* La feuille de la charte : le <style> de 2-CE-QU-ON-VA-CONSTRUIRE/da/la-charte-o.html. */

:root { --lab: #F6F6F4; --lab-sur: var(--o-bloc); --lab-encre: #17181A; --lab-2: #4C4F53; --lab-fil: #DDDDD8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lab: #16181A; --lab-sur: #1F2225; --lab-encre: #F2F3F4; --lab-2: #A8AEB4; --lab-fil: #33373B; } }
:root[data-theme="dark"] { --lab: #16181A; --lab-sur: #1F2225; --lab-encre: #F2F3F4; --lab-2: #A8AEB4; --lab-fil: #33373B; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--lab); color: var(--lab-encre); font: 15px/1.55 "Commissioner", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
header.tete { padding: 64px 0 40px; border-bottom: 1px solid var(--lab-fil); }
.kicker { margin: 0 0 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lab-2); }
header.tete h1 { margin: 0 0 18px; font-size: clamp(34px, 1.6rem + 3vw, 60px); line-height: 1.03; letter-spacing: -.025em; }
.intro { margin: 0 0 14px; max-width: 74ch; font-size: 17px; color: var(--lab-2); }
.intro b { color: var(--lab-encre); }
.suivi { display: grid; margin: 22px 0 0; padding: 0; list-style: none; max-width: 96ch; font-size: 14px; }
.suivi li { display: grid; grid-template-columns: 290px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--lab-fil); color: var(--lab-2); }
.suivi li b { color: var(--lab-encre); }
section.part { padding: 56px 0; border-bottom: 1px solid var(--lab-fil); }
section.part > h2 { margin: 0 0 8px; font-size: clamp(26px, 1.3rem + 1.6vw, 38px); letter-spacing: -.022em; line-height: 1.1; }
section.part > .chapo { margin: 0 0 30px; max-width: 76ch; color: var(--lab-2); font-size: 16px; }
section.part > .chapo b { color: var(--lab-encre); }
.famille { margin: 40px 0 16px; font-size: 20px; letter-spacing: -.01em; }
.cadre-ecran { border: 1px solid var(--lab-fil); overflow-x: auto; }
.cadre-ecran > .o { min-width: 1120px; }
.jetons, .jetons * { color: var(--lab-encre); }
.jetons { width: 100%; border-collapse: collapse; font-size: 14px; font-family: inherit; margin-top: 12px; }
.jetons th, .jetons td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lab-fil); vertical-align: top; }
.jetons th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lab-2); }
.jv { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.jv i { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 1px solid rgba(128,128,128,.45); }
.jm { color: var(--lab-2) !important; }
.reglages { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 12px; }
@media (max-width: 900px) { .reglages { grid-template-columns: 1fr 1fr; } }
.rg { padding: 20px 20px 16px; border: 1px solid var(--lab-fil); font-family: "Commissioner", sans-serif; }
.rg h4 { margin: 0 0 8px; font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; line-height: 1.15; }
.rg p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.rg .rg-nom { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--o-encre); font-weight: 700; }
.rg .rg-mes { margin: 0; font-size: 12px; color: var(--o-second); }
.chapo-lab { margin: 0 0 16px; max-width: 80ch; color: var(--lab-2); }
.chapo-lab b { color: var(--lab-encre); }
.lieux { display: flex; border: 1px solid var(--lab-fil); min-height: 150px; }
.lieu { padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.lieu b { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 19px; line-height: 1.15; }
.lieu span { font-size: 13px; }
.lieux-leg { margin: 8px 0 0; font-size: 13px; color: var(--lab-2); }
.retires { margin: 26px 0 0; padding: 14px 16px; border-left: 3px solid var(--lab-encre); background: var(--lab-sur); font-size: 14px; color: var(--lab-2); max-width: 96ch; }
.retires b { color: var(--lab-encre); }
.reco { margin: 0; padding: 22px; background: var(--lab-sur); border: 1px solid var(--lab-fil); max-width: 92ch; }
.reco h3 { margin: 0 0 10px; font-size: 19px; }
.reco li { margin: 0 0 10px; }
.reco ul { padding-left: 20px; margin: 0; }
footer.fin-page { padding: 52px 0 90px; }

.assets { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) { .assets { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .assets { grid-template-columns: 1fr; } .asset.large, .asset.pleine { grid-column: auto !important; } }
.asset { margin: 0; border: 1px solid var(--lab-fil); background: var(--lab-sur); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.asset.large { grid-column: span 2; }
.asset.pleine { grid-column: 1 / -1; }
.asset-rendu { min-height: 220px; display: grid; }
.asset figcaption { padding: 14px 16px; display: grid; gap: 4px; align-content: start; font-size: 13px; color: var(--lab-2); }
.asset figcaption b { color: var(--lab-encre); font-size: 15px; }
.statut { justify-self: start; font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--lab-fil); color: var(--lab-2); }

/* ══════════════ O ══════════════ */
.o { --cire: var(--o-cire); --bloc: var(--o-bloc); --creux: var(--o-creux); --brun: var(--o-brun); --nuit: var(--o-nuit);
     --encre: var(--o-encre); --second: var(--o-second); --second-creux: var(--o-second); --sur-brun: var(--o-sur-sombre); --second-brun: var(--o-second-sombre);
     --jaune: var(--o-jaune); --pro: var(--o-pro); --second-jaune: var(--o-second-pro);   /* ✏️ v8 : le pro en miel ; le sous-texte fonce (7,7 : 1) */
     --ambre: var(--o-ambre); --trait: var(--o-trait);
     --etat-ok: var(--o-etat-ok); --etat-ok-fond: var(--o-etat-ok-fond); --etat-non: var(--o-etat-non); --etat-non-fond: var(--o-etat-non-fond); --etat-attente: var(--o-etat-attente); --etat-attente-fond: var(--o-etat-attente-fond);
     --succes: var(--etat-ok);   /* 🆕 v11 — K-060 : les états, famille à part ; --succes n'était défini nulle part, le point de dispo ne s'affichait pas */
     --titres: "Fraunces", Georgia, "Times New Roman", serif; --corps: "Commissioner", "Segoe UI", Arial, sans-serif;
     background: var(--cire); color: var(--encre); font-family: var(--corps); font-size: 16px; line-height: 1.55; }
.o h1, .o h2, .o .d-grand, .o .chiffre-jaune, .o .chiffre-brun, .o .prix-o, .o .prix-grand, .o .rayon b, .o .rayon-grand b, .o .piece b,
.o .pro-carte > b, .o .chiffres dd {
  font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; }
.o .num { font-variant-numeric: tabular-nums; }
.o a { color: inherit; }
.o .etiq-c, .o .etiq-o, .o .etiq-n { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.o .etiq-c { color: var(--brun); }
.o .etiq-o { color: var(--second-brun); }
.o .etiq-n { color: var(--nuit); }
.o .w { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.o .picto { display: block; flex: none; color: var(--brun); }
.o .schema-charte { display: block; max-width: 100%; height: auto; color: var(--brun); }
.o .schema-charte * { vector-effect: non-scaling-stroke; }   /* 15/09 : un schéma garde le trait du site quelle que soit sa taille */
.o .gaufre { background-color: var(--creux); background-image: url("/o/feuille/8d7ac2c12ac0378e.svg"); }
.o .nuit-motif { background-color: var(--nuit); background-image: url("/o/feuille/90a8f77f6abf5d8d.svg"); }
.o .jaune-motif { background-color: var(--pro); background-image: url("/o/feuille/bbfaae551d1e2971.svg"); color: var(--nuit); }
/* 🆕 v9 — le fond pro en fondus (« des shades, des fades ») ; aucun flou */
.o .fond-pro { background-color: var(--pro); color: var(--nuit); background-repeat: no-repeat; background-size: 100% 100%; }
.o .fond-lumiere { background-image: radial-gradient(110% 95% at 8% 0%, rgba(255,236,178,.95) 0%, rgba(255,236,178,0) 58%), radial-gradient(80% 110% at 100% 100%, rgba(216,150,58,.85) 0%, rgba(216,150,58,0) 62%); }
.o .fond-coulee { background-image: url("/o/feuille/500701466fa5cf80.svg"); }
.o .fond-coulee-double { background-image: url("/o/feuille/d76059dab6ae71ae.svg"); }
.o .fond-coulee-haute { background-image: url("/o/feuille/231eaa50e961c1ea.svg"); }
.o .fond-coulee-epaisse { background-image: url("/o/feuille/c0469894cd45ad55.svg"); }
.o .fond-coulee-calme { background-image: url("/o/feuille/c0409f24661fe614.svg"); }
.o .fond-coulee-lumiere { background-image: url("/o/feuille/500701466fa5cf80.svg"), radial-gradient(110% 95% at 8% 0%, rgba(255,236,178,.95) 0%, rgba(255,236,178,0) 58%), radial-gradient(80% 110% at 100% 100%, rgba(216,150,58,.85) 0%, rgba(216,150,58,0) 62%); background-size: 100% 100%, 100% 100%; }
.o .fond-niveaux { background-image: url("/o/feuille/76e0887322af1dc8.svg"), radial-gradient(110% 95% at 8% 0%, rgba(255,236,178,.95) 0%, rgba(255,236,178,0) 58%), radial-gradient(80% 110% at 100% 100%, rgba(216,150,58,.85) 0%, rgba(216,150,58,0) 62%); background-size: cover, 100% 100%; background-position: right top, 0 0; }
/* 🆕 v9 — le prix sans cadre */
.o .px { font-family: var(--corps); }
.o .px-a { display: grid; gap: 5px; margin: 0 0 22px; }
.o .px-a::before { content: ""; display: block; width: 64px; height: 3px; margin: 0 0 12px; background: linear-gradient(90deg, var(--jaune), rgba(253,212,14,0)); }
.o .px-ht { margin: 0; display: flex; align-items: baseline; gap: 9px; }
.o .px-ht b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 34px; line-height: 1; color: var(--encre); letter-spacing: -.012em; }
.o .px-ht span, .o .px-b span { font-size: 11px; letter-spacing: .16em; font-weight: 700; color: var(--brun); text-transform: uppercase; }
.o .px-ttc { margin: 0; font-size: 14px; color: var(--second); }
.o .px-b { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 22px; }
.o .px-b > div { display: grid; gap: 6px; padding: 2px 0 4px; }
.o .px-b > div + div { padding-left: 22px; background: linear-gradient(180deg, rgba(170,121,43,0), rgba(170,121,43,.55) 50%, rgba(170,121,43,0)) left / 1px 100% no-repeat; }
.o .px-b b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 28px; line-height: 1; color: var(--encre); }
.o .px-b > div + div b { font-size: 22px; color: var(--second); }
.o .px-c { margin: 0 0 22px; padding: 20px 22px 18px; display: grid; gap: 5px; border-radius: 3px;
  background: linear-gradient(120deg, #FFF3D3 0%, rgba(255,243,211,.55) 55%, rgba(255,243,211,0) 100%); }
.o .px-pro { margin: 10px 0 0; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--second); }
.o .px-pro a { color: var(--brun); font-weight: 700; }
.o .pro-fait { margin: 0 0 24px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--second); }
/* ✏️ 18/09 — la carte de décision de la fiche sur les jetons (relecture DA du 17/09) : le filet haut jaune de .o .decision-carte
   rétabli (carte-decision-filet-haut = marque-lumiere), le fond surface-bloc uni (plus de quatrième fondu), rayon doux, ombre fil */
.o.fiche-complete .decision-carte { border-radius: var(--o-rayon-doux); padding: 28px 28px 28px;
  background: var(--bloc); box-shadow: var(--o-ombre-fil); }
.o.fiche-complete .dc-prix { border-bottom: 0; padding-bottom: 18px; margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(253,212,14,.9), rgba(253,212,14,0) 60%) bottom left / 100% 2px no-repeat; }
.o.fiche-complete .dc-ht span { background: none; padding: 0; letter-spacing: .16em; }
.o .dg-paliers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 20px; }
.o .dg-palier { display: grid; gap: 2px; padding: 12px 14px; background: var(--bloc); border-radius: var(--o-rayon-doux); box-shadow: inset 0 0 0 1px var(--trait); }
.o .dg-palier span { font-size: 12px; color: var(--second); }
.o .dg-palier b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; color: var(--encre); }
.o .dg-mieux { background: linear-gradient(135deg, #FFF0BF, #FFF8E2); box-shadow: none; }
.o .dg-palier em { font-style: normal; font-size: 12px; font-weight: 700; color: #6B4A12; }
.o .filigrane { position: absolute; pointer-events: none; background: var(--sur-brun); opacity: .09;
  -webkit-mask: url("/o/feuille/02713d4adc3602a8.svg") no-repeat center / contain; mask: url("/o/feuille/02713d4adc3602a8.svg") no-repeat center / contain; }
.o .filigrane.fil-brun { background: var(--brun); opacity: .05; }
.o .binome { position: relative; margin: 0; display: grid; gap: 2px; }
.o .binome i { font-family: var(--titres); font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 600;
  font-size: 30px; line-height: 1.1; color: var(--brun); }
.o .binome span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
/* ✏️ 15/09 — D-256 : le bouton de la charte figée, PARTOUT : la pilule, une phrase en bas de casse (c'était la seule forme de l'accueil) */
.o .btn-brun, .o .btn-nuit { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; text-decoration: none;
  font-weight: 700; font-size: 15.5px; letter-spacing: 0; text-transform: none; padding: 0 26px; border-radius: var(--o-rayon-pilule); transition: transform .15s; }
.o .btn-brun:hover, .o .btn-nuit:hover { transform: translateY(-2px); }
.o .btn-brun { background: var(--brun); color: var(--sur-brun); }
.o .btn-nuit { background: var(--nuit); color: var(--jaune); }
.o.accueil-o .btn-brun, .o.accueil-o .btn-nuit { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: var(--o-rayon-pilule); text-transform: none; letter-spacing: 0; font-size: 15.5px; transition: transform .15s; }
.o.accueil-o .btn-brun:hover, .o.accueil-o .btn-nuit:hover { transform: translateY(-2px); }
.o.accueil-o .vente-ajout { border-radius: var(--o-rayon-pilule); padding: 0 14px; }
.o .lien-brun { color: var(--brun); text-decoration: underline; text-decoration-color: var(--ambre); text-decoration-thickness: 2px; text-underline-offset: 5px; font-weight: 600; }
.o .lien-clair { color: var(--sur-brun); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 5px; font-weight: 600; }

/* les courbes */
.o .courbe-bloc { position: relative; display: block; }
.o .courbe { display: block; width: 100%; height: 100%; }
.o .fin-vol { position: absolute; left: calc(92.5% - 15px); top: calc(40% - 22px); width: 30px; height: 34px; transform: rotate(62deg);
  background: var(--brun); -webkit-mask: url("/o/feuille/f6631f8feff56c54.svg") no-repeat center / contain; mask: url("/o/feuille/f6631f8feff56c54.svg") no-repeat center / contain; }

/* le socle */
.o .objet { position: relative; }
.o .objet > .socle { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); }
.o .objet > img { position: absolute; inset: 0; margin: auto; max-width: 62%; max-height: 72%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply; }

/* le marquage, la cellule */
.o .marquage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.o .mq { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--second); }
.o .mq i { width: 30px; height: 30px; border-radius: var(--o-rayon-rond); border: 3px solid var(--brun); }
.o .mq b { font-size: 13px; color: var(--encre); }
.o .mq-an i { width: 38px; height: 38px; box-shadow: 0 0 0 4px var(--cire), 0 0 0 5.5px var(--ambre); }
.o .mq-leg { grid-column: 1 / -1; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--second); }
.o .mq-leg b { color: var(--encre); }
.o .liste-royale { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.o .liste-royale li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.o .cellule { width: 14px; height: 22px; flex: none; color: var(--brun); }

/* la table simple — « simple et épuré » */
.o .table-simple { width: 100%; border-collapse: collapse; font-family: var(--corps); font-size: 15px; color: var(--encre); }
.o .table-simple th, .o .table-simple td { text-align: left; padding: 13px 0; color: var(--encre); border-bottom: 1px solid var(--trait); }
.o .table-simple tr:first-child th, .o .table-simple tr:first-child td { border-top: 1px solid var(--trait); }
.o .table-simple th { font-weight: 500; color: var(--second); width: 44%; }

.o .opercule { display: block; width: 100%; height: 22px; background: var(--cire); }

/* démonstrations */
.o .d-nuit, .o .d-cire, .o .d-creux, .o .d-bloc, .o .d-jaune { padding: 24px; display: grid; align-content: center; gap: 6px; position: relative; overflow: hidden; }
.o .d-nuit { background: var(--nuit); color: var(--sur-brun); }
.o .d-cire { background: var(--cire); }
.o .d-bloc { background: var(--bloc); padding: 0; }
.o .d-jaune { color: var(--nuit); }
.o .d-cire .filigrane { inset: 6px -20px 6px 60px; }
.o .d-grand { position: relative; font-size: 26px; line-height: 1.1; }
.o .d-sous { font-size: 14px; }
.o .d-jaune .d-sous { color: var(--second-jaune); }
.o .centre { place-items: center; }
.o .rangee { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: center; }
.o .patchs { padding: 34px 24px; }
.o .chiffre-jaune { margin: 0; font-size: 50px; line-height: 1; color: var(--jaune); }
.o .chiffre-brun { margin: 0; font-size: 50px; line-height: 1; color: var(--brun); }
.o .deux-chiffres { gap: 14px; }
.o .deux-chiffres .chiffre-jaune, .o .deux-chiffres .chiffre-brun { font-size: 40px; }
.o .d-nuit-mini { background: var(--nuit); padding: 16px 18px; }
.o .pictos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 10px; }
.o .pic { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12px; color: var(--second); padding: 8px 0; }
.o .pic-neuf { background: var(--creux); --fond-picto: #F0E6CC; }
.o .pictos-3 { grid-template-columns: repeat(3, 1fr); }
.o .pictos-4 { grid-template-columns: repeat(4, 1fr); }
.o .propositions .pic span b { color: var(--brun); }
.o .rayon, .o .d-bloc { --fond-picto: var(--o-bloc); }
.o .pictos-sombre { --fond-picto: var(--o-nuit); }
.o .tailles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; }
.o .taille { display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.o .d-pad { padding: 34px 24px 28px; }
.o .neuf { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--brun); background: var(--jaune); padding: 1px 5px; }
.o .pictos-sombre .picto { color: var(--sur-brun); }
.o .d-op { display: grid; }
.o .d-op .d-creux { padding: 30px 26px; }
.o .objet-carte { height: 280px; }
.o .courbes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; padding: 20px; background: var(--cire); }
.o .cv p { margin: 8px 0 0; font-size: 13px; color: var(--second); }
.o .cv p b { color: var(--encre); }
.o .cv-rendu { border: 1px solid var(--trait); overflow: hidden; }
.o .cv-nuit .courbe-bloc { background: var(--cire) !important; }
.o .cv-nuit::after { content: ""; display: block; height: 20px; background: var(--nuit); margin-top: -1px; }
.o .cv-claire::after { content: ""; display: block; height: 20px; background: var(--creux); margin-top: -1px; }
.o .cv-montante::after { content: ""; display: block; height: 20px; background: var(--o-bloc); margin-top: -1px; }
.o .cv-double::after, .o .cv-vol::after, .o .cv-fil::after { content: ""; display: block; height: 20px; background: var(--cire); }
.o .cv-voile::after { content: ""; display: block; height: 20px; background: var(--creux); margin-top: -1px; }

/* la photo fondue — sur la cire, neuf paliers, un fondu vertical */
.o .d-fondu, .o .ouv-photo { position: relative; overflow: hidden; }
.o .fondu-cire { background: var(--cire); }
.o .d-fondu { min-height: 300px; }
/* ✏️ v5 : « oublie le blur » — la photo est posée franche, sans aucun masque de fondu */
.o .d-fondu img, .o .ouv-photo > img { position: absolute; top: 0; right: 0; height: 100%; object-fit: cover;
  filter: sepia(.12) saturate(.95); }
.o .d-fondu img { width: 100%; }

/* ── la cire gaufrée seule ── */
.o .d-vide { min-height: 220px; }

/* ── les badges d'avantages ── */
.badges-bilan { margin: 0 0 18px; font-size: 14px; color: var(--lab-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.badges-bilan b { color: var(--lab-encre); }
.pastille-etat { display: inline-block; width: 10px; height: 10px; border-radius: var(--o-rayon-rond); margin-right: 5px; vertical-align: -1px; }
.badges-famille { margin: 0 0 22px; }
.badges-famille h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lab-2); }
.badges { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1100px) { .badges { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.badge { background: var(--o-cire); color: var(--o-encre); border: 1px solid var(--lab-fil); padding: 16px 16px 12px; display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; align-items: start; --fond-picto: var(--o-cire); }
.badge .picto { color: var(--o-brun); }
.badge b { display: block; font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 18px; line-height: 1.2; color: var(--o-brun); }
.badge div span { display: block; font-size: 14px; line-height: 1.45; color: var(--o-second); margin-top: 3px; }
.badge-pied { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--o-trait); font-size: 12px; color: var(--o-second); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.badge-pied em { font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; }
.etat-service .badge-pied em, i.etat-service { background: #DDEBD6; color: #2C5A22; }
.etat-decide .badge-pied em, i.etat-decide { background: #FDEFA8; color: #4E3210; }
.etat-attente .badge-pied em, i.etat-attente { background: #ECE4D4; color: var(--o-etat-attente); }
i.etat-service { background: #2C5A22; } i.etat-decide { background: var(--o-jaune); } i.etat-attente { background: #8A7F70; }
.etat-attente { opacity: .88; }

/* ── la fiche aboutie ── */
.o .repere { position: absolute; z-index: 3; left: -12px; top: -12px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: var(--jaune); color: var(--nuit); font: 700 12px/26px var(--corps); text-align: center; box-shadow: 0 0 0 2px var(--cire); }
.o .repere-mini { position: static; display: inline-block; margin-right: 8px; min-width: 22px; height: 22px; line-height: 22px; font-size: 11px; box-shadow: none; }
.o .repere-photo { left: 14px; top: 14px; }
.o .fil { position: relative; }
.o .fil .repere { left: -34px; top: 17px; }
.o .texte-site > .repere, .o .caracs > .repere, .o .fiche-avec > div > .repere { left: -34px; top: 0; }
.o .fiche-magasin > .repere { left: 6px; top: -12px; }
.o .decision-carte, .o .texte-site, .o .chiffre-carte, .o .caracs, .o .reserve, .o .fiche-avec > div, .o .fiche-magasin { position: relative; }
.o .dc-pro { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; font-size: 14px; color: var(--second); }
.o .dc-pro a { color: var(--brun); font-weight: 600; }
.o .dc-dispo { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.o .point-dispo { width: 10px; height: 10px; border-radius: var(--o-rayon-rond); background: var(--succes); display: inline-block; margin-right: 8px; vertical-align: 0; }
.o .paliers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trait); border: 1px solid var(--trait); margin: 18px 0 0; }
.o .palier { background: var(--bloc); padding: 12px 16px; display: grid; gap: 2px; }
.o .palier .etiq-c { margin: 0; color: var(--second); font-size: 11px; }
.o .palier b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 24px; color: var(--encre); }
.o .palier em { font-style: normal; font-size: 13px; color: var(--second); }
.o .palier-mieux { background: #FFFBE6; }
.o .palier-mieux em { color: var(--brun); font-weight: 700; }
.o .fiche-corps { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; padding-top: 10px; padding-bottom: 56px; align-items: start; }
.o .texte-site h2 { margin: 0 0 14px; font-size: 34px; color: var(--brun); }
.o .texte-site h3 { margin: 26px 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); font-family: var(--corps); }
.o .chapo-f { margin: 0; font-size: 19px; line-height: 1.5; max-width: 56ch; }
.o .liste-hex { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 64ch; }
.o .liste-hex li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; }
.o .puce-hex { width: 12px; height: 14px; margin-top: 5px; }
.o .pas { display: flex; gap: 14px; align-items: flex-start; margin: 0; max-width: 60ch; }
.o .pas-num { flex: none; width: 30px; height: 30px; border-radius: var(--o-rayon-rond); background: var(--brun); color: var(--sur-brun); font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.o .chiffre-carte { background: var(--bloc); border-top: 4px solid var(--jaune); padding: 26px 28px; }
.o .chiffre-carte p:last-child { margin: 8px 0 0; color: var(--second); }
.o .chiffre-carte .chiffre-brun { font-size: 56px; }
.o .fiche-reserves { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 56px; }
.o .reserve { background: transparent; border: 1.5px dashed #CDBB92; padding: 24px 26px; }
.o .reserve .etiq-c { color: var(--second); }
.o .reserve h2 { margin: 0 0 12px; font-size: 24px; color: var(--brun); }
.o .reserve ul { margin: 0; padding-left: 18px; color: var(--second); font-size: 15px; }
.o .reserve li { margin: 0 0 4px; }
.o .fiche-bas2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px 44px; padding-bottom: 56px; align-items: start; }
.o .fiche-bas2 .caracs h2 { margin: 0 0 18px; }
.o .ft-3 { grid-template-columns: repeat(3, 1fr); }
.o .fiche-avec { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-bottom: 56px; }
.o .fiche-avec h2 { margin: 0 0 16px; font-size: 26px; color: var(--brun); }
.o .avec-grille { display: grid; gap: 12px; }
.o .avec { background: var(--bloc); padding: 18px 20px; text-decoration: none; display: grid; gap: 2px; border-left: 4px solid var(--jaune); }
.o .avec b { font-size: 17px; color: var(--encre); }
.o .avec span { font-size: 14px; color: var(--second); }
.o .univers-liste { list-style: none; margin: 0; padding: 0; background: var(--bloc); }
.o .univers-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--trait); font-size: 15px; }
.o .univers-liste li:first-child { border-top: 0; }
.o .univers-liste a { color: var(--encre); }
.o .univers-liste .num { font-weight: 700; white-space: nowrap; }
.o .fiche-magasin { padding-bottom: 80px; }
.o .magasin-carte { background: var(--creux); padding: 28px 30px; display: grid; grid-template-columns: 56px 1.3fr 1fr auto; gap: 26px; align-items: center; --fond-picto: var(--o-creux); }
.o .magasin-carte h2 { margin: 0 0 6px; font-size: 24px; color: var(--brun); }
.o .magasin-carte p { margin: 0; }
.o .magasin-carte .table-simple th, .o .magasin-carte .table-simple td { padding: 8px 0; font-size: 14px; white-space: nowrap; }
.o .magasin-carte .table-simple td { text-align: right; font-weight: 700; }
.legende td b { color: var(--lab-encre); }

/* ── la fiche complète ── */
.o .fiche-gauche { display: grid; gap: 18px; align-content: start; }
.o .points-forts { position: relative; list-style: none; margin: 0; padding: 20px 24px; background: var(--bloc); display: grid; gap: 10px; }
.o .points-forts p { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 15px; }
.o .check { width: 18px; height: 18px; flex: none; }
.o .chapo-hero { margin: 0 0 20px; font-size: 16px; color: var(--second); max-width: 52ch; }
.o .degressif-o { margin: 0 0 18px; }
.o .degressif-o .etiq-c { display: flex; align-items: center; gap: 8px; color: var(--second); margin-bottom: 6px; }
.o .degressif-o table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--encre); font-family: var(--corps); }
.o .degressif-o td { padding: 8px 0; border-top: 1px solid var(--trait); color: var(--encre); }
.o .degressif-o td:last-child { text-align: right; font-weight: 700; }
.o .degressif-o tr.mieux td { color: var(--brun); font-weight: 700; }
.o .livraison-bloc { position: relative; }
.o .livraison-bloc > .repere, .o .points-forts > .repere { left: -34px; top: 0; }
.o .dispo-ligne { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o .donnee { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--creux); color: var(--second); padding: 1px 6px; }
.o .bloc-chips { position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 44px; }
.o .bloc-chips > .repere { left: 6px; top: -14px; }
.o .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bloc); border: 1px solid var(--trait); padding: 7px 14px; font-size: 14px; font-weight: 600; --fond-picto: var(--o-bloc); }
.o .bloc-presentation, .o .bloc-conseils, .o .bloc-faq, .o .bloc-caracs, .o .bloc-avis-partage { position: relative; padding-bottom: 56px; }
.o .bloc-caracs h2 { margin: 0 0 22px; font-size: 30px; color: var(--brun); }
.o .bloc-caracs .source-texte { margin-top: 12px; }
.o .bloc-presentation > .repere, .o .bloc-conseils > .repere, .o .bloc-faq > .repere, .o .bloc-caracs > .repere { left: 6px; top: -14px; }
.o .fiche-avec, .o .fiche-bas2 { position: relative; }
.o .repere-section { left: 6px !important; top: -14px !important; }
.o .bloc-presentation h2, .o .bloc-conseils h2, .o .bloc-faq h2 { margin: 0 0 14px; font-size: 34px; color: var(--brun); }
.o .cartes-avantages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 26px 0 0; }
.o .carte-av { background: var(--bloc); padding: 24px 24px 26px; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--jaune); --fond-picto: var(--o-bloc); }
.o .carte-av b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; line-height: 1.2; color: var(--brun); }
.o .carte-av span { font-size: 15px; color: var(--encre); }
.o .source-texte { margin: 14px 0 0; font-size: 13px; color: var(--second); font-style: italic; }
.o .bloc-conseils { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px 40px; align-items: start; }
.o .bloc-conseils h2 { grid-column: 1 / -1; }
.o .etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.o .etape { display: grid; grid-template-columns: 34px 1fr; gap: 16px; background: var(--bloc); padding: 20px 22px; }
.o .etape b { font-size: 17px; }
.o .etape p { margin: 4px 0 0; color: var(--encre); }
.o .etape-reservee { background: transparent; border: 1.5px dashed #CDBB92; }
.o .etape-reservee b, .o .etape-reservee p { color: var(--second); }
.o .etapes .pas-num { width: 34px; height: 34px; background: var(--jaune); color: var(--nuit); }
.o .conseil-expert { background: var(--nuit); color: var(--sur-brun); padding: 26px 28px; border-left: 4px solid var(--jaune); --fond-picto: var(--o-nuit); }
.o .conseil-expert .etiq-o { display: flex; align-items: center; gap: 8px; color: var(--jaune); }
.o .conseil-expert .picto { color: var(--sur-brun); }
.o .ce-attente { margin: 0; color: var(--second-brun); }
.o .ce-attente b { color: var(--sur-brun); }
.o .faq-o { display: grid; gap: 10px; max-width: 900px; }
.o .faq-q { display: flex; justify-content: space-between; gap: 20px; align-items: center; background: var(--bloc); padding: 20px 24px; font-size: 17px; font-weight: 600; color: var(--brun); }
.o .faq-reservee { background: transparent; border: 1.5px dashed #CDBB92; color: var(--second); font-weight: 500; font-size: 15px; }
.o .bloc-logistique { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }   /* 18/09 : autant de colonnes que de faits réels (la case EAN retirée) */
.o .log-case { background: var(--bloc); padding: 22px; display: grid; justify-items: center; gap: 6px; text-align: center; --fond-picto: var(--o-bloc); }
.o .log-case b { font-size: 22px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.o .log-case span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--second); }
.o .log-absente { background: transparent; border: 1.5px dashed #CDBB92; }
.o .log-absente b { font-size: 17px; color: var(--second); }
.o .log-absente span { text-transform: none; letter-spacing: 0; font-size: 13px; }
.o .avec-cartes { grid-template-columns: 1fr 1fr; }
.o .avec-carte { background: var(--bloc); padding: 20px; text-decoration: none; display: grid; gap: 4px; --fond-picto: var(--o-bloc); }
.o .avec-vign { height: 110px; display: grid; place-items: center; background: var(--cire); margin: 0 0 10px; }
.o .avec-carte b { font-size: 16px; color: var(--encre); }
.o .avec-carte span { font-size: 14px; color: var(--second); }
.o .bloc-avis-partage { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.o .avis-o, .o .partage-o { position: relative; background: var(--bloc); padding: 22px 24px; display: flex; gap: 16px; align-items: center; --fond-picto: var(--o-bloc); }
.o .avis-o b { display: block; font-size: 17px; }
.o .avis-o span { font-size: 14px; color: var(--second); }
.o .partage-o { flex-wrap: wrap; gap: 10px 16px; }
.o .partage-o .etiq-c { margin: 0 8px 0 0; }
.o .partage-o a { color: var(--brun); font-weight: 600; font-size: 14px; }
.o .avis-o > .repere, .o .partage-o > .repere { left: -12px; top: -12px; }

/* ✏️ v8 — les trois miels du pro */
.o .miels { display: grid; grid-template-columns: repeat(3, 1fr); }
.o .miel-choix { padding: 22px 20px; display: grid; gap: 4px; align-content: center; min-height: 220px; color: var(--nuit); }
.o .miel-choix .d-sous { color: var(--second-jaune); font-size: 12px; }
.o .miel-retenu { box-shadow: inset 0 0 0 3px var(--nuit); }

/* ── les pages ── */
.o .pro-lien { color: var(--brun); font-weight: 700; text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.o .lisere { height: 4px; background: var(--jaune); }
.o .panier { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 700; font-size: 14px; }

.o .ouverture-claire { background: var(--cire); position: relative; }
.o .ouv-grille { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 590px; }
.o .ouv-texte { position: relative; padding: 64px 40px 30px 0; z-index: 1; }
.o .ouv-texte .filigrane { width: 440px; height: 440px; right: -130px; top: 26px; }
.o .ouverture-claire h1 { position: relative; margin: 0 0 18px; font-size: 64px; line-height: 1.03; letter-spacing: -.02em; max-width: 16ch; color: var(--brun); }
.o .ouverture-claire .binome { margin: 0 0 22px; }
.o .chapo-c { position: relative; margin: 0 0 30px; max-width: 44ch; font-size: 18px; color: var(--second); }
.o .gestes { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.o .chiffres { position: relative; display: flex; margin: 38px 0 0; border-top: 1px solid var(--trait); padding-top: 20px; }
.o .chiffres div { padding-right: 34px; margin-right: 34px; border-right: 1px solid var(--trait); }
.o .chiffres div:last-child { border: 0; }
.o .chiffres dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--second); }
.o .chiffres dd { margin: 2px 0 0; font-size: 32px; color: var(--brun); display: flex; align-items: center; gap: 10px; }
.o .pastille-an { width: 20px; height: 20px; border-radius: var(--o-rayon-rond); background: var(--jaune); border: 3px solid var(--brun); }
.o .ouv-photo { margin-right: -40px; }
.o .ouv-photo > img { width: 116%; }
.o .ouv-patch { position: absolute; right: 56px; bottom: 44px; }

/* 🆕 v11 — les états (K-060) */
.o .etat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; padding: 4px 11px 4px 5px; border-radius: var(--o-rayon-pilule); }
.o .etat i { font-style: normal; width: 20px; height: 20px; border-radius: var(--o-rayon-rond); display: grid; place-items: center; font-size: 12px; color: var(--o-bloc); }
.o .etat-ok { background: var(--etat-ok-fond); color: var(--etat-ok); } .o .etat-ok i { background: var(--etat-ok); }
.o .etat-non { background: var(--etat-non-fond); color: var(--etat-non); } .o .etat-non i { background: var(--etat-non); }
.o .etat-attente { background: var(--etat-attente-fond); color: var(--etat-attente); } .o .etat-attente i { background: var(--etat-attente); }
.o .etats-demo { display: grid; gap: 12px; padding: 26px; justify-items: start; }
/* 🆕 v11 — l'emplacement de marque (K-063) */
.o .lockup { display: inline-flex; align-items: center; gap: 16px; }
.o .lockup-logo { width: 132px; height: 56px; display: grid; place-items: center; align-content: center; background: var(--o-bloc); border-radius: var(--o-rayon-doux); box-shadow: inset 0 0 0 1px var(--trait); }
.o .lockup-logo b { font-family: var(--corps); font-weight: 800; letter-spacing: .12em; font-size: 15px; color: var(--encre); text-transform: uppercase; }
.o .lockup-logo i { font-style: normal; font-size: 10px; color: var(--second); }
.o .lockup-filet { width: 2px; height: 40px; background: linear-gradient(180deg, rgba(253,212,14,0), var(--jaune) 30%, var(--jaune) 70%, rgba(253,212,14,0)); }
.o .lockup-sig { display: grid; gap: 1px; }
.o .lockup-sig small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); font-weight: 700; }
.o .lockup-sig b { font-size: 15px; color: var(--encre); }
.o .lockup-demo { padding: 30px 26px; display: grid; gap: 18px; justify-items: start; }
/* 🆕 v11 — l'accueil : les marques (K-062), le rail à onglets (K-053, K-064), les chiffres (K-011) */
.o .marques-o { padding-top: 6px; padding-bottom: 30px; }
.o .marques-o .etiq-c { margin-bottom: 14px; }
.o .marques-rang { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.o .marque-o { background: var(--bloc); border-radius: var(--o-rayon-champ); padding: 18px 20px; text-decoration: none; display: grid; gap: 4px; box-shadow: inset 0 0 0 1px rgba(227,214,180,.7); }
.o .marque-o b { font-family: var(--corps); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 16px; color: var(--encre); }
.o .marque-o span { font-size: 14px; color: var(--second); }
.o .rail-o { padding-top: 70px; padding-bottom: 76px; }
.o .rail-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 20px; flex-wrap: wrap; }
.o .rail-tete h2 { margin: 0; font-size: 40px; color: var(--brun); letter-spacing: -.018em; }
.o .onglets-o { display: inline-flex; padding: 4px; background: var(--bloc); border-radius: var(--o-rayon-pilule); box-shadow: inset 0 0 0 1px var(--trait); }
.o .onglets-o button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; color: var(--second); padding: 9px 16px; border-radius: var(--o-rayon-pilule); }
.o .onglets-o button[aria-selected="true"] { background: var(--brun); color: #FFF8EA; }
.o .onglets-o button[aria-disabled="true"] { color: #6E6354; cursor: not-allowed; }
.o .rail-piste { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4.4); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.o .rail-carte { scroll-snap-align: start; background: var(--bloc); border-radius: var(--o-rayon-champ); text-decoration: none; display: grid; grid-template-rows: 170px auto; overflow: hidden; }
.o .rail-carte img { width: 100%; height: 170px; object-fit: contain; background: var(--o-bloc); mix-blend-mode: multiply; padding: 10px; }
.o .rail-carte div { padding: 12px 16px 16px; display: grid; gap: 4px; }
.o .rail-carte small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); font-weight: 700; }
.o .rail-carte b { font-size: 15px; line-height: 1.3; color: var(--encre); }
.o .rail-carte em { font-style: normal; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 20px; color: var(--encre); }
.o .rail-campagne { grid-column: span 2; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
.o .rail-campagne img { height: 100%; object-fit: cover; padding: 0; mix-blend-mode: normal; }
.o .rail-campagne div { align-content: end; padding: 20px 22px; background: linear-gradient(160deg, var(--o-bloc) 40%, #FBF1D8); }
.o .rail-campagne b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 23px; color: var(--brun); }
.o .rail-note { margin: 12px 0 0; font-size: 13px; color: var(--second); }
.o .chiffres-o { padding-top: 60px; padding-bottom: 64px; }
.o .chiffres-rang { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.o .chiffres-rang div { padding: 6px 26px 4px; background: linear-gradient(180deg, rgba(170,121,43,0), rgba(170,121,43,.45) 50%, rgba(170,121,43,0)) left / 1px 100% no-repeat; }
.o .chiffres-rang div:first-child { background: none; padding-left: 0; }
.o .chiffres-rang b { display: block; font-family: var(--titres); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 64px; line-height: 1; color: var(--brun); letter-spacing: -.02em; }
.o .chiffres-rang span { display: block; margin-top: 8px; font-size: 15px; color: var(--second); max-width: 22ch; }
/* 🆕 v11 — la fiche vue par un pro connecté (K-052) */
.o .barre-pro { background-color: var(--pro); color: var(--nuit); }
.o .barre-pro .w { display: flex; align-items: center; gap: 18px; height: 46px; font-size: 14px; }
.o .barre-pro b { font-weight: 800; }
.o .barre-pro a { margin-left: auto; font-weight: 700; }
.o .logo-pro { display: inline-flex; align-items: center; gap: 10px; }
.o .logo-pro .logo { height: 46px; width: 184px; }
.o .tag-pro { font-size: 12px; font-weight: 800; letter-spacing: .12em; background: var(--nuit); color: var(--jaune); padding: 4px 9px; border-radius: var(--o-rayon-doux); }
.o .pro-grille-fiche { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding-top: 34px; padding-bottom: 60px; align-items: start; }
.o .pro-decision { background: var(--o-bloc); border-radius: var(--o-rayon-champ); padding: 26px 28px; display: grid; gap: 16px; }
.o .pro-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; color: var(--second); padding-top: 10px; border-top: 1px solid #EFE6D0; }
.o .pro-ligne b { color: var(--encre); font-size: 17px; }
.o .pro-ref { background: var(--creux); border-radius: var(--o-rayon-champ); padding: 18px 20px; display: grid; gap: 10px; }
.o .pro-ref-form { display: grid; grid-template-columns: 1.4fr .8fr auto; gap: 10px; align-items: end; }
.o .pro-ref label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--second); }
.o .pro-ref input { font: inherit; font-size: 15px; padding: 11px 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--second); border-radius: var(--o-rayon-doux); background: var(--o-bloc); color: var(--encre); }
.o .pro-ref table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--encre); font-family: var(--corps); }
.o .pro-ref td, .o .pro-ref th { text-align: left; padding: 8px 6px; color: var(--encre); border-top: 1px solid rgba(170,121,43,.25); }
.o .pro-ref th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--second); border-top: 0; }
.o .reassurance { list-style: none; margin: 0 auto; padding-top: 12px; padding-bottom: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.o .reassurance li { display: flex; gap: 14px; align-items: center; }
.o .reassurance b { display: block; font-size: 15px; }
.o .reassurance span { font-size: 14px; color: var(--second); }

.o .titre-section { margin: 0 0 26px; }
.o .titre-section h2 { margin: 0; font-size: 38px; letter-spacing: -.018em; line-height: 1.1; color: var(--brun); }
.o .rayons { padding-top: 40px; padding-bottom: 76px; }
.o .rayons-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; }
.o .rayon-grand { grid-row: span 2; background: var(--bloc); text-decoration: none; display: grid; grid-template-rows: 1fr auto; }
.o .img-franche { overflow: hidden; }
.o .img-franche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o .rg-texte { padding: 22px 24px 26px; display: flex; gap: 18px; align-items: flex-start; }
.o .rayon-grand b { display: block; font-size: 30px; color: var(--brun); margin: 0 0 6px; }
.o .rayon-grand span { color: var(--second); }
.o .rayon { background: var(--bloc); text-decoration: none; padding: 22px 22px 24px; display: grid; gap: 4px; align-content: start; }
.o .rayon .picto { margin-bottom: 18px; }
.o .rayon b { font-size: 21px; color: var(--brun); }
.o .rayon span { color: var(--second); font-size: 14px; }

.o .bande-pro { padding: 72px 0; }
.o .pro-grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.o .bande-pro h2 { margin: 0 0 14px; font-size: 44px; line-height: 1.05; color: var(--nuit); max-width: 15ch; }
.o .pro-texte p:not(.etiq-n) { margin: 0 0 26px; color: var(--second-jaune); font-size: 17px; max-width: 42ch; }
.o .pro-carte { background: var(--bloc); padding: 28px 30px 30px; }
.o .pro-carte > b { display: block; font-size: 23px; line-height: 1.2; color: var(--encre); margin: 0 0 16px; }

.o .selection { padding-top: 76px; padding-bottom: 80px; }
.o .sel-grille { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trait); }
.o .piece { text-decoration: none; padding: 26px 26px 30px; border-right: 1px solid var(--trait); display: grid; align-content: start; }
.o .piece:last-child { border-right: 0; }
.o .piece .objet { height: 270px; background: var(--bloc); margin: 0 0 16px; }
.o .piece b { font-size: 22px; line-height: 1.2; margin: 0 0 10px; color: var(--encre); }
.o .prix-o { margin: 0; font-size: 32px; line-height: 1; color: var(--encre); }
.o .prix-o small, .o .prix-grand small { font-family: var(--corps); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.o .fine-o { margin: 6px 0 0; font-size: 14px; color: var(--second); }

.o .jan { padding: 56px 0 70px; }
.o .jan-grille { display: grid; grid-template-columns: 170px 1.4fr 1fr; gap: 44px; align-items: start; }
.o .jan-portrait { position: relative; }
.o .portrait { width: 140px; height: 140px; border-radius: var(--o-rayon-rond); object-fit: cover; border: 5px solid var(--bloc); display: block; }
.o .jan-cachet { position: absolute; left: 76px; top: 100px; }
.o .jan h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.12; color: var(--brun); max-width: 22ch; }
.o .jan p { margin: 0; max-width: 52ch; }
.o .horaires { background: var(--bloc); padding: 22px 26px 26px; }
.o .h-tete { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; }
.o .h-tete p { margin: 0 0 6px; }
.o .horaires .table-simple th, .o .horaires .table-simple td { white-space: nowrap; font-size: 14px; padding: 11px 0; }
.o .horaires .table-simple td { text-align: right; font-weight: 700; }

.o .pied { position: relative; color: var(--sur-brun); }
.o .pied > .courbe-bloc { margin-bottom: -1px; }
.o .pied-fond { background: var(--nuit); padding: 10px 0 50px; }
.o .pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 140px; gap: 40px; align-items: start; }
.o .pied .logo { height: var(--o-taille-touche); width: 176px; color: var(--sur-brun); --fond-logo: var(--nuit); }
.o .pied p { margin: 12px 0 0; color: var(--second-brun); font-size: 14px; }
.o .pied a { display: block; text-decoration: none; color: var(--sur-brun); font-size: 14px; padding: 3px 0; }
.o .pied-court { grid-template-columns: 1fr; }
/* 🆕 13/09 — le pied complet */
.o .pied-complet { grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.35fr; gap: 36px; padding-top: 8px; }
.o .pied-marque address { font-style: normal; margin-top: 14px; color: var(--second-brun); font-size: 14px; line-height: 1.6; }
.o .pied-marque address a { display: inline; padding: 0; }
.o .pied-horaires { font-size: 13.5px !important; } .o .pied-horaires i { font-style: normal; opacity: .8; }
.o .pied .etiq-o { margin: 4px 0 12px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--jaune); }
.o .pied-col a { width: fit-content; }
.o .pied-col a:hover, .o .pied-bas a:hover { color: var(--jaune); }
.o .lettre-o { display: grid; gap: 8px; align-content: start; }
.o .lettre-o label { font-size: 13px; color: var(--second-brun); }
.o .lettre-champ { display: flex; border: 1px solid #6A4630; }
.o .lettre-champ input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 11px 12px; background: transparent; border: 0; color: var(--sur-brun); }
.o .lettre-champ input::placeholder { color: #A58E76; }
.o .lettre-champ button { border: 0; background: var(--jaune); color: var(--nuit); font: 700 13px var(--corps); padding: 0 14px; min-height: var(--o-taille-touche); cursor: pointer; }
.o .lettre-fine { font-size: 12.5px; color: var(--second-brun); }
.o .pied-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--brun); font-size: 13px; color: var(--second-brun); }
.o .pied-bas .reseaux { display: flex; gap: 6px; margin-left: auto; }
.o .pied-bas .reseaux a { display: grid; place-items: center; width: var(--o-taille-touche); height: var(--o-taille-touche); padding: 0; color: var(--sur-brun); }
.o .pied-bas button { background: none; border: 0; color: var(--sur-brun); font: inherit; text-decoration: underline; cursor: pointer; min-height: var(--o-taille-touche); }
.o .sceau-pied { width: 120px; height: 120px; background: var(--cire); border-radius: var(--o-rayon-rond); padding: 4px; }

.o .fil { margin: 0; padding: 20px 0 0; font-size: 14px; color: var(--second); }
.o .fiche-grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding-top: 26px; padding-bottom: 60px; }
.o .fiche-photo { position: relative; background: var(--bloc); }
.o .objet-grand { height: 580px; }
.o .objet-grand > img { max-width: 92%; max-height: 92%; }
.o .fiche-patch { position: absolute; bottom: 26px; left: 22px; }
.o .decision-o h1 { margin: 0 0 12px; font-size: 46px; line-height: 1.04; color: var(--brun); letter-spacing: -.02em; }
.o .accroche { margin: 0 0 26px; font-size: 18px; color: var(--second); font-variation-settings: "slnt" -10; }
/* ✏️ v5 — « pas juste des lignes » : le bloc de décision est une carte, le filet haut en jaune (le liseré de la page) */
.o .decision-carte { background: var(--bloc); border: 1px solid var(--trait); border-top: 4px solid var(--jaune); padding: 24px 26px 26px; margin: 0 0 24px; }
.o .dc-prix { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--trait); }
.o .dc-ht { margin: 0; font-size: 16px; font-weight: 700; color: var(--encre); display: inline-flex; align-items: center; gap: 8px; }
.o .dc-ht span { font-size: 11px; letter-spacing: .12em; background: var(--creux); color: var(--brun); padding: 3px 7px; }
.o .decision-carte .qte { margin: 0; }
/* la fiche technique : des cases, pas des lignes */
.o .fiche-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.o .ft-case { position: relative; background: var(--bloc); padding: 20px 22px 22px; display: grid; gap: 6px; min-height: 108px; align-content: end; }
.o .ft-case .etiq-c { margin: 0; color: var(--second); font-size: 11px; }
.o .ft-case b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 23px; line-height: 1.15; color: var(--encre); }
.o .ft-case .picto { position: absolute; top: 18px; right: 18px; --fond-picto: var(--o-bloc); }
.o .ft-ref { background: var(--creux); }
.o .ft-ref b { font-family: var(--corps); font-size: 20px; letter-spacing: .06em; color: var(--brun); }
.o .prix-grand { margin: 0; font-size: 52px; line-height: 1; color: var(--encre); }
.o .qte { display: flex; gap: 14px; align-items: end; margin: 0 0 26px; }
.o .qte label { display: grid; gap: 6px; font-size: 13px; color: var(--second); }
.o .qte input { width: 88px; font: inherit; font-size: 16px; padding: 12px; border: 1.5px solid var(--second); background: var(--bloc); color: var(--encre); border-radius: var(--o-rayon-net); }
.o .qte .btn-brun { flex: 1; text-align: center; padding: 16px 22px; }
.o .livraison { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.o .livraison li { display: flex; gap: 14px; align-items: center; }
.o .livraison b { display: block; font-size: 15px; }
.o .livraison span { font-size: 14px; color: var(--second); }
.o .fiche-bas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; padding-bottom: 90px; }
.o .caracs h2 { margin: 0 0 22px; font-size: 30px; color: var(--brun); }
.o .note-o { margin: 22px 0 0; padding: 14px 16px; background: var(--creux); font-size: 14px; color: var(--second-creux); }
.o .note-o b { color: var(--encre); }


/* ═══ ✏️ 13/09 — L'ACCUEIL QUI VEND : podium, rail, marques d'ambiance, rayons, chiffres sur nuit, frise fermée ═══ */
/* ✏️ 14/09 nuit — Ruben : « les meilleures ventes, fades sur le beige ; ce sont les best-sellers, les nouveautés : du peps, un fond
   adéquat qui se lie aux autres dans le défilement ; attention, en dessous c'est le fond pro ». Le jaune vif de la charte à alvéoles
   en haut, la cire en bas : les cartes blanches sont à cheval, la bande pro (miel) ne touche jamais le jaune vif. */
.o .ventes-o { padding-top: 64px; padding-bottom: 72px; }
.o .ventes-o .rail-tete { align-items: end; margin-bottom: 26px; }
.o .ventes-o h2 { margin: 0 0 8px; font-size: 44px; line-height: 1.05; color: var(--brun); letter-spacing: -.02em; }
.o .ventes-chapo { margin: 0; font-size: 17px; color: var(--second); max-width: 52ch; } .o .ventes-chapo b { color: var(--encre); }
.o .ventes-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.o .ventes-filtres button { min-height: 38px; padding: 0 14px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--trait); color: var(--second); font: 600 14px var(--corps); cursor: pointer; border-radius: var(--o-rayon-pilule); }
.o .ventes-filtres button:hover { box-shadow: inset 0 0 0 1px var(--brun); color: var(--brun); }
.o .ventes-filtres button[aria-pressed="true"] { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .ventes-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.o .vente { display: grid; grid-template-rows: 1fr auto; background: var(--bloc); box-shadow: inset 0 0 0 1px rgba(227,214,180,.7); transition: box-shadow .2s ease, transform .2s ease; }
.o .vente:hover { box-shadow: inset 0 0 0 1px var(--trait), 0 20px 34px -26px rgba(42,18,9,.55); transform: translateY(-2px); }
.o .vente-lien { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--encre); }
.o .vente-image { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 8px 8px 0; background: radial-gradient(120% 90% at 50% 40%, var(--o-bloc) 0 45%, #F7F0E0 100%); }
.o .vente-image img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.o .vente:hover .vente-image img { transform: scale(1.04); }
.o .vente-infos { display: grid; gap: 4px; align-content: start; padding: 14px 16px 6px; }
.o .vente-rang { font-size: 12.5px; font-weight: 600; color: #7A5518; letter-spacing: .02em; }
.o .vente-rang sup { font-size: .7em; }
.o .vente-infos b { font-size: 15.5px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.o .vente-univers { font-size: 13px; color: var(--second); }
.o .vente-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 16px; }
.o .vente-bas em { font-style: normal; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 22px; color: var(--brun); }
.o .vente-ajout { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 700 13px var(--corps); cursor: pointer; }
.o .vente-ajout:hover { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .vente-ajout.fait { background: var(--etat-ok-fond); color: var(--etat-ok); box-shadow: none; }
.o .ventes-grille .rail-campagne { grid-row: span 2; grid-column: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; text-decoration: none; overflow: hidden; background: var(--nuit); box-shadow: none; }
.o .ventes-grille .rail-campagne img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.o .ventes-grille .rail-campagne div { display: grid; gap: 6px; padding: 18px 20px 20px; background: var(--nuit); }
.o .ventes-grille .rail-campagne small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--jaune); }
.o .ventes-grille .rail-campagne b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 24px; line-height: 1.15; color: var(--sur-brun); }
.o .ventes-grille .rail-campagne .fine-o { color: var(--second-brun); }
.o .vc-cta { font-weight: 700; font-size: 14px; color: var(--jaune); margin-top: 4px; }
.o .ventes-plus { margin: 20px 0 0; text-align: right; }
.o .debuter-o { background: var(--cire); padding: 64px 0 40px; }
.o .debuter-o .titre-section h2 { margin: 0 0 26px; font-size: 40px; line-height: 1.08; color: var(--brun); letter-spacing: -.018em; max-width: 26ch; }
.o .kit-o { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.o .kit-planche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 172px); gap: 10px;
  grid-template-areas: "essaim essaim ruche vareuse" "essaim essaim ruche vareuse" "gants enfumoir combustible leve"; }
.o .kp { position: relative; margin: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(227,214,180,.7); background: radial-gradient(120% 90% at 50% 40%, var(--o-bloc) 0 50%, #F7F0E0 100%); }
.o .kp img { width: 100%; height: 100%; object-fit: contain; padding: 8px 8px 38px; mix-blend-mode: multiply; transition: transform .35s ease; }
.o .kp:hover img { transform: scale(1.05); }
.o .kp-essaim { grid-area: essaim; } .o .kp-essaim img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.o .kp-ruche { grid-area: ruche; } .o .kp-vareuse { grid-area: vareuse; } .o .kp-gants { grid-area: gants; }
.o .kp-enfumoir { grid-area: enfumoir; } .o .kp-combustible { grid-area: combustible; } .o .kp-leve { grid-area: leve; }
.o .kp figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 1px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--encre); }
.o .kp figcaption small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.o .kp-g-accueillir figcaption small { color: var(--brun); } .o .kp-g-proteger figcaption small { color: #7A5518; } .o .kp-g-ouvrir figcaption small { color: var(--etat-ok); }
.o .kp-essaim figcaption { left: 0; right: 0; bottom: 0; padding: 12px 16px 14px; background: var(--o-nuit); color: var(--sur-brun); font-size: 16px; }
.o .kp-essaim figcaption small { color: var(--jaune); }
.o .kit-carte { display: grid; align-content: start; gap: 18px; padding: 26px 26px 24px; background: var(--bloc); border-top: 4px solid var(--jaune); }
.o .kit-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: ke; }
.o .kit-etapes li { counter-increment: ke; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.o .kit-etapes li::before { content: counter(ke); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 700 14px var(--corps); border-radius: var(--o-rayon-rond); }
.o .kit-etapes b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 20px; color: var(--brun); }
.o .kit-etapes span { font-size: 14.5px; color: var(--second); }
.o .kit-prix { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 16px; border-top: 1px solid var(--trait); }
.o .kit-prix span { width: 100%; font-size: 13px; color: var(--second); }
.o .kit-prix b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 30px; color: var(--encre); }
.o .kit-prix small { font-size: 14px; color: var(--second); }
.o .kit-carte .gestes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.o .kit-stage { margin: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--cire); font-size: 14px; color: var(--second); --fond-picto: var(--o-cire); }
.o .kit-stage a { color: var(--brun); font-weight: 700; }
.o .pro-h2 { display: grid; gap: 6px; margin: 0 0 16px; max-width: none; }
.o .pro-titre { font-size: 72px; line-height: .95; letter-spacing: -.03em; color: var(--nuit); }
.o .pro-sous { max-width: 22ch; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; color: var(--second-jaune); }
.o .pro-pour { margin: 0 0 18px; font-size: 17px; color: var(--second-jaune); max-width: 44ch; } .o .pro-pour b { color: var(--nuit); }
.o .pro-atouts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; --fond-picto: var(--o-pro); }
.o .pro-atouts li { display: flex; gap: 12px; align-items: center; font-size: 16px; color: var(--nuit); }
.o .pro-atouts .picto { color: var(--nuit); }
.o .bande-pro .gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.o .lien-nuit { font-weight: 700; color: var(--nuit); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.o .bande-pro .pro-carte .etiq-c { color: var(--second); }
@media (max-width: 960px) {
  .o .kit-o { grid-template-columns: 1fr; }
  .o .kit-planche { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 220px 150px 150px 150px 150px;
    grid-template-areas: "essaim essaim" "ruche vareuse" "ruche vareuse" "gants enfumoir" "combustible leve"; }
  .o .debuter-o .titre-section h2 { font-size: 30px; } .o .pro-titre { font-size: 52px; } .o .pro-sous { font-size: 21px; }
}
/* ═══ ✏️ 14/09 nuit — le pack débutant en une offre ═══ */
.o .pack-o { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--bloc); border-radius: var(--o-rayon-plaque); overflow: hidden; border: 1px solid rgba(227,214,180,.9); }
.o .pack-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--o-creux); min-height: 460px; }
.o .pp { margin: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, var(--o-bloc) 0 52%, #F7F0E0 100%); }
.o .pp img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.o .pp-ruche { grid-column: span 2; grid-row: span 2; } .o .pp-ruche img { padding: 34px; }
.o .pp-gants img { padding: 18px; }
.o .pack-texte { display: grid; align-content: center; gap: 14px; padding: 36px 40px; }
.o .pack-badge { justify-self: start; margin: 0; padding: 5px 12px; border-radius: var(--o-rayon-pilule); background: var(--jaune); color: var(--nuit); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.o .debuter-o .pack-texte h2 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -.018em; color: var(--brun); text-wrap: balance; }
.o .pack-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.o .pack-liste li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--encre); }
.o .pack-liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .pack-liste b { color: var(--brun); }
.o .pack-prix { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; }
.o .pack-prix b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 44px; line-height: 1; color: var(--encre); }
.o .pack-prix span { font-size: 15px; color: var(--second); }
.o .pack-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.o .pack-lien { font-weight: 700; font-size: 15px; color: var(--brun); text-underline-offset: 3px; }
.o .pack-stage { font-size: 14.5px; color: var(--second); text-decoration: none; } .o .pack-stage b { color: var(--brun); }
.o .pack-stage:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .o .pack-o { grid-template-columns: 1fr; } .o .pack-photos { min-height: 300px; } .o .pack-texte { padding: 26px 22px; } .o .debuter-o .pack-texte h2 { font-size: 28px; } }
/* ═══ ✏️ 14/09 soir — le kit en trois temps, et les services en grand ═══ */
.o .kit-tete { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: end; margin: 0 0 28px; }
.o .debuter-o .kit-tete h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.08; color: var(--brun); letter-spacing: -.018em; max-width: 26ch; text-wrap: balance; }
.o .kit-chapo { margin: 0; font-size: 18px; line-height: 1.5; color: var(--encre); max-width: 52ch; } .o .kit-chapo b { color: var(--brun); }
.o .kit-assure { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 12px; background: var(--bloc); border-radius: var(--o-rayon-petit); box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); --fond-picto: var(--o-bloc); }
.o .kit-assure li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--second); } .o .kit-assure b { color: var(--encre); }
.o .kit-temps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: kt; }
.o .kt { display: grid; grid-template-rows: auto 1fr; background: var(--bloc); border-radius: var(--o-rayon-carte); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); }
.o .kt-photos { display: grid; gap: 2px; height: 230px; background: var(--o-creux); }
.o .kt-n2 { grid-template-columns: 1fr 1fr; } .o .kt-n3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
.o .kt-n3 .kt-ph:first-child { grid-row: span 2; }
.o .kt-ph { margin: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, var(--o-bloc) 0 52%, #F7F0E0 100%); }
.o .kt-ph img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; transition: transform .35s ease; }
.o .kt-ph-essaim img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.o .kt:hover .kt-ph img { transform: scale(1.04); }
.o .kt-corps { position: relative; display: grid; align-content: start; gap: 8px; padding: 30px 24px 24px; }
.o .kt-num { position: absolute; top: -20px; left: 22px; width: 40px; height: 40px; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: var(--jaune); color: var(--nuit);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .kt h3 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.12; color: var(--brun); }
.o .kt p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--encre); }
.o .kt ul { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--trait); display: grid; gap: 6px; }
.o .kt ul li { position: relative; padding-left: 20px; font-size: 14.5px; font-weight: 600; color: var(--encre); }
.o .kt ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .kit-bandeau { margin-top: 18px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 20px 36px; align-items: center; padding: 24px 30px; background: var(--nuit); color: var(--sur-brun); border-radius: var(--o-rayon-carte); --fond-picto: var(--o-nuit); }
.o .kb-prix p { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--second-brun); }
.o .kb-prix b { display: block; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 42px; line-height: 1.05; color: var(--jaune); }
.o .kb-prix small { font-size: 14px; color: var(--second-brun); }
.o .kb-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.o .kb-cta { display: inline-flex; align-items: center; min-height: var(--o-taille-geste); padding: 0 26px; border-radius: var(--o-rayon-pilule); background: var(--jaune); color: var(--nuit); font: 700 16px var(--corps); text-decoration: none; transition: transform .15s; }
.o .kb-cta:hover { transform: translateY(-2px); }
.o .kb-lien { color: var(--sur-brun); font-weight: 700; font-size: 15px; text-underline-offset: 3px; }
.o .kb-stage { justify-self: end; display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 12px 16px; border-radius: var(--o-rayon-petit); background: rgba(250,244,228,.08); color: var(--sur-brun); text-decoration: none; font-size: 14.5px; line-height: 1.4; }
.o .kb-stage .picto { color: var(--jaune); } .o .kb-stage b { display: block; color: var(--jaune); }
.o .kb-stage:hover span { text-decoration: underline; text-underline-offset: 3px; }
.o .sv-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 16px; }
.o .sv-grille a { text-decoration: none; }
.o .sv-parrain { grid-row: span 3; display: grid; grid-template-rows: auto 1fr auto; background: var(--bloc); border-radius: var(--o-rayon-carte); overflow: hidden; border: 1px solid rgba(227,214,180,.9); color: var(--encre); }
.o .sv-p-tete { padding: 32px 36px 28px; }
.o .sv-parrain .sv-p-tete .sv-eti { color: var(--nuit); }
.o .sv-p-tete h3 { margin: 8px 0 10px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; color: var(--nuit); text-wrap: balance; }
.o .sv-p-tete p:last-child { margin: 0; font-size: 17px; line-height: 1.5; color: var(--nuit); font-weight: 500; max-width: 46ch; }
.o .sv-p-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.o .sv-p-offre { display: grid; align-content: center; gap: 10px; padding: 26px 30px; text-decoration: none; color: inherit; transition: background-color .15s; }
.o .sv-p-offre:hover { background: #FFF9E6; } .o .sv-p-offre:hover b { text-decoration: underline; text-underline-offset: 3px; }
.o .sv-p-offre + .sv-p-offre { border-left: 1px solid var(--trait); }
.o .sv-p-num { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--brun); }
.o .sv-p-num i { width: 30px; height: 30px; display: grid; place-items: center; font-style: normal; font-size: 14px; background: var(--jaune); color: var(--nuit); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); letter-spacing: 0; }
.o .sv-p-offre > b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--encre); }
.o .sv-p-offre ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.o .sv-p-offre li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.45; color: var(--encre); }
.o .sv-p-offre li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--jaune); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.o .sv-p-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 22px 30px 26px; background: #FFFCF3; border-top: 1px solid var(--trait); }
.o .sv-chiffres { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 14px 32px; }
.o .sv-chiffres div { display: grid; gap: 2px; }
.o .sv-chiffres dd { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 32px; line-height: 1.05; color: var(--brun); white-space: nowrap; }
.o .sv-chiffres dt { font-size: 15px; line-height: 1.35; color: var(--encre); max-width: 22ch; }
@media (max-width: 1100px) { .o .sv-chiffres { grid-template-columns: 1fr; } }
.o .sv-p-gestes { display: grid; gap: 10px; justify-items: start; }
.o .sv-p-lien { font-weight: 700; font-size: 14.5px; color: var(--brun) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.o .sv-eti { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--jaune); }
.o .sv-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--o-rayon-pilule); background: var(--brun); color: var(--sur-brun); font: 700 15px var(--corps); justify-self: start; transition: transform .15s; }
.o .sv-cta-jaune { background: var(--jaune); color: var(--nuit); }
.o .sv-grille a:hover .sv-cta { transform: translateY(-2px); }
.o .sv-stages { display: grid; grid-template-rows: auto 1fr; background: var(--bloc); border-radius: var(--o-rayon-carte); overflow: hidden; color: var(--encre); box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); }
.o .sv-s-haut { display: flex; align-items: center; gap: 16px; padding: 22px 28px; --fond-picto: var(--o-pro); }
.o .sv-miel-clair { --pro: #F6D983; --fond-picto: #F6D983; } .o .sv-s-haut .picto { color: var(--nuit); } .o .sv-s-haut .sv-eti { color: var(--nuit); font-size: 13px; }
.o .sv-s-corps { display: grid; gap: 8px; align-content: start; padding: 22px 28px 26px; }
.o .sv-stages h3 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--brun); }
.o .sv-stages p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; } .o .sv-stages p b { color: var(--brun); }
.o .sv-petit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; background: var(--bloc); border-radius: var(--o-rayon-carte); color: var(--second); box-shadow: inset 0 0 0 1px rgba(227,214,180,.8); --fond-picto: var(--o-bloc); font-size: 14.5px; transition: box-shadow .15s; }
.o .sv-petit b { display: block; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 20px; color: var(--brun); }
.o .sv-petit em { font-style: normal; font-size: 22px; font-weight: 700; color: var(--brun); }
.o .sv-petit:hover { box-shadow: inset 0 0 0 2px var(--ambre); }
@media (max-width: 960px) {
  .o .kit-tete, .o .kit-temps, .o .sv-grille, .o .kit-bandeau { grid-template-columns: 1fr; }
  .o .kb-stage { justify-self: start; }
  .o .sv-parrain { grid-row: auto; } .o .sv-p-tete h3 { font-size: 32px; } .o .sv-p-tete, .o .sv-p-offre, .o .sv-p-bas { padding-left: 22px; padding-right: 22px; }
  .o .sv-p-deux, .o .sv-p-bas { grid-template-columns: 1fr; } .o .sv-p-offre + .o .sv-p-offre, .o .sv-p-offre + .sv-p-offre { border-left: 0; border-top: 1px solid var(--trait); }
}
.o .services-o { padding-top: 64px; padding-bottom: 64px; }
.o .services-o .titre-section h2 { margin: 0 0 22px; font-size: 36px; line-height: 1.1; color: var(--brun); letter-spacing: -.016em; }
.o .services-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.o .service-o { display: grid; gap: 8px; align-content: start; padding: 24px 22px; background: var(--bloc); text-decoration: none; color: var(--encre); border-top: 4px solid var(--jaune); --fond-picto: var(--o-bloc); transition: transform .18s ease; }
.o .service-o:hover { transform: translateY(-3px); }
.o .service-o b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 22px; color: var(--brun); margin-top: 6px; }
.o .service-o span { font-size: 15px; color: var(--second); }
.o .service-o em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--brun); margin-top: 4px; }
.o .carte-maps { display: grid; place-items: center; gap: 8px; min-height: 180px; margin: 16px 0 12px; padding: 18px; text-align: center; background-color: var(--creux);
  background-image: linear-gradient(0deg, rgba(170,121,43,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(170,121,43,.12) 1px, transparent 1px); background-size: 28px 28px; }
.o .carte-maps p { margin: 0; font-size: 12.5px; color: var(--second); max-width: 34ch; }
.o .maps-charger { display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); padding: 0 16px; border: 0; background: var(--bloc); box-shadow: 0 6px 18px -10px rgba(42,18,9,.5); color: var(--brun); font: 700 14px var(--corps); cursor: pointer; }
.o .carte-maps iframe { width: 100%; height: 240px; border: 0; }
.o .horaires .itineraire { display: block; text-align: center; }
@media (max-width: 1100px) { .o .ventes-grille, .o .services-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .o .debuter-grille { grid-template-columns: 1fr; } .o .debuter-aide { position: static; } .o .debuter-texte h2 { font-size: 32px; }
  .o .kit-liste li { grid-template-columns: 30px minmax(0, 1fr) auto 40px; gap: 10px; } }
@media (max-width: 560px) { .o .ventes-grille, .o .services-4 { grid-template-columns: 1fr; } .o .ventes-grille .rail-campagne { grid-row: auto; } }
.o .marques-o { padding: 70px 0 76px; background: var(--creux); }
.o .marques-o .titre-section h2 { margin: 0 0 26px; font-size: 40px; line-height: 1.08; color: var(--brun); letter-spacing: -.018em; max-width: 24ch; }
.o .marques-mur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.o .marque-tuile { position: relative; display: grid; grid-template-rows: auto 170px auto; min-height: 380px; overflow: hidden; text-decoration: none; color: var(--sur-brun); background: var(--nuit); transition: transform .2s ease; }
.o .marque-tuile:hover { transform: translateY(-4px); }
.o .mt-logo { justify-self: start; margin: 20px 0 0 20px; display: grid; gap: 2px; padding: 12px 18px; background: var(--o-bloc); color: var(--encre); box-shadow: 0 8px 20px -14px rgba(0,0,0,.6); }
.o .mt-logo b { font-family: var(--corps); font-weight: 800; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.o .mt-logo-img { padding: 12px 16px; }
.o .mt-logo-img img { display: block; height: 40px; width: auto; max-width: 210px; object-fit: contain; }
.o .mt-apimed img { height: var(--o-taille-geste); } .o .mt-varroa img { height: 46px; } .o .mt-propolia img { height: 34px; }
.o .mt-logo i { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--o-etat-attente); }
.o .mt-visuel { display: grid; place-items: center; }
.o .mt-visuel img { max-width: 86%; max-height: 160px; object-fit: contain; }
.o .mt-visuel .picto, .o .mt-visuel svg { color: currentColor; }
.o .mt-texte { display: grid; gap: 6px; padding: 0 22px 22px; }
.o .mt-texte em { font-style: normal; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 26px; line-height: 1.1; }
.o .mt-texte > span { font-size: 14.5px; opacity: .88; }
.o .mt-texte .mt-cta { opacity: 1; font-weight: 700; font-size: 14px; margin-top: 6px; }
.o .marque-tuile:hover .mt-cta { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.o .amb-konigin { background-color: var(--o-nuit); background-image: radial-gradient(90% 70% at 70% 45%, #4A2A1A 0%, var(--o-nuit) 70%); }
.o .amb-konigin .mt-cta { color: var(--jaune); }
.o .amb-lyson { background-color: var(--o-brun); background-image: linear-gradient(160deg, #6A3420 0%, var(--o-brun) 60%); --fond-picto: var(--o-brun); }
.o .amb-lyson .mt-visuel { color: var(--jaune); } .o .amb-lyson .mt-cta { color: var(--jaune); }
.o .amb-varroa { background: var(--jaune); color: var(--nuit); --fond-picto: var(--o-jaune); }
.o .amb-varroa .mt-visuel { color: var(--nuit); }
.o .amb-marlenka { background-color: var(--o-cire); background-image: radial-gradient(80% 70% at 50% 45%, var(--o-bloc) 0%, var(--o-cire) 70%); color: var(--encre); }
.o .amb-marlenka .mt-texte em, .o .amb-marlenka .mt-cta { color: var(--brun); }
.o .amb-apimed { background-color: var(--o-nuit); background-image: linear-gradient(170deg, #3E1A0C 0%, var(--o-nuit) 100%); }
.o .amb-apimed .mt-cta { color: var(--jaune); }
.o .amb-propolia { background-color: var(--pro); color: var(--nuit); --fond-picto: var(--o-pro); background-image: radial-gradient(110% 95% at 8% 0%, rgba(255,236,178,.95) 0%, rgba(255,236,178,0) 58%), radial-gradient(80% 110% at 100% 100%, rgba(216,150,58,.85) 0%, rgba(216,150,58,0) 62%); }
.o .rayons { padding-top: 70px; padding-bottom: 70px; }
.o .rayons .titre-section h2 { margin: 0 0 24px; font-size: 40px; line-height: 1.08; color: var(--brun); letter-spacing: -.018em; }
.o .rayons-6o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.o .rayon-o { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto 1fr auto; column-gap: 16px; align-items: start; padding: 22px 22px 20px; background: var(--bloc); text-decoration: none; color: var(--encre); --fond-picto: var(--o-bloc); transition: box-shadow .18s ease; }
.o .rayon-o:hover { box-shadow: inset 0 -4px var(--jaune); }
.o .rayon-o > .picto, .o .rayon-o > img { grid-row: 1 / 3; }
.o .rayon-o b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--brun); }
.o .rayon-o ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.o .rayon-o li { font-size: 13px; padding: 3px 9px; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--second); }
.o .ro-cta { grid-column: 2; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--brun); }
.o .rayon-photo > img { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.o .fond-chiffres { position: relative; overflow: hidden; background-color: var(--nuit); color: var(--sur-brun); padding: 70px 0 76px;
  background-image: radial-gradient(70% 120% at 0% 0%, rgba(253,212,14,.10) 0%, rgba(253,212,14,0) 60%), radial-gradient(60% 90% at 100% 100%, rgba(170,121,43,.28) 0%, rgba(170,121,43,0) 65%); }
.o .fond-chiffres::after { content: ""; position: absolute; right: -40px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%) rotate(-12deg);
  background: linear-gradient(100deg, rgba(253,212,14,0) 10%, rgba(253,212,14,.16) 90%);
  -webkit-mask: var(--abeille-sil) center / contain no-repeat; mask: var(--abeille-sil) center / contain no-repeat; pointer-events: none; }
.o .fond-chiffres .w { position: relative; z-index: 1; }
.o .fond-chiffres .etiq-c { color: var(--jaune); }
.o .fond-chiffres .chiffres-rang b { color: var(--jaune); }
.o .fond-chiffres .chiffres-rang span { color: var(--second-brun); }
.o .fond-chiffres .chiffres-rang div { background: linear-gradient(180deg, rgba(253,212,14,0), rgba(253,212,14,.35) 50%, rgba(253,212,14,0)) left / 1px 100% no-repeat; }
.o .fond-chiffres .chiffres-rang div:first-child { background: none; }
.o .frise-alveoles { display: flex; align-items: center; gap: 18px; max-width: 1240px; margin: 0 auto; padding: 36px 40px 0; }
.o .frise-alveoles span { flex: 1; height: 1px; background: var(--trait); }
.o .frise-alveoles svg { flex: none; }
.o .jan-portrait { display: grid; justify-items: center; gap: 0; }
.o .jan-cachet { position: static; margin-top: -26px; }
.o .jan-cachet svg { display: block; }
@media (max-width: 1100px) { .o .fond-chiffres::after { width: 360px; height: 360px; opacity: .7; } }
@media (max-width: 960px) {
  .o .marques-mur { grid-template-columns: 1fr; }
  .o .ventes-o h2, .o .marques-o .titre-section h2 { font-size: 32px; }
  .o .marque-tuile { min-height: 320px; }
  .o .frise-alveoles { padding: 28px 20px 0; }
  .o .jan-portrait { justify-items: start; }
}

.o { --abeille-sil: url("/o/feuille/f6631f8feff56c54.svg"); }
/* ═══ 🆕 14/09 — les fonds jaunes essayables : les trois miels, les lignes de niveau éclairées, l'abeille en fondu ═══ */
.o .bande-jaune { position: relative; overflow: hidden; isolation: isolate; }
.o .bande-jaune.miel-a { --pro: #F4C85E; } .o .bande-jaune.miel-b { --pro: var(--o-pro); } .o .bande-jaune.miel-c { --pro: #E9B354; }
.o .bande-jaune.avec-abeille::after { content: ""; position: absolute; z-index: -1; right: -60px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%) rotate(-14deg);
  background: linear-gradient(110deg, rgba(42,18,9,0) 30%, rgba(42,18,9,.06) 90%);
  -webkit-mask: var(--abeille-sil) center / contain no-repeat; mask: var(--abeille-sil) center / contain no-repeat; pointer-events: none; }
/* ✏️ 14/09 soir — Ruben : « le fond abeille + clair, on lit trop mal le texte explicatif, c'est des règles de base ».
   Règle : sur une bande jaune, le motif (coulée, lumière, abeille) reste un DÉCOR — aucun texte courant n'est posé dessus ;
   le titre est en nuit, et tout texte de plus d'une ligne est dans une carte pleine. L'abeille baisse (0,10 → 0,06) et disparaît
   sous 960 px, où elle passerait sous le texte. */
.o .bande-jaune h2, .o .bande-jaune h3 { color: var(--nuit); }
.o .bande-jaune > .w > p, .o .bande-jaune .pq-chapo { color: var(--nuit); font-weight: 500; }
@media (max-width: 960px) { .o .bande-jaune.avec-abeille::after { display: none; } }
/* ═══ 🆕 13/09 — la fiche retravaillée : points forts à pictogramme, prix qui suit la quantité, bande miel, partage en icônes ═══ */
.o .points-forts p { gap: 12px; --fond-picto: var(--o-bloc); } .o .points-forts p b { color: var(--encre); }
.o .points-forts .picto { flex: none; color: var(--brun); }
.o .fiche-patch .patch-maison { width: 128px; height: auto; }
.o .achat-o { display: grid; gap: 16px; margin: 0; }
.o .qte-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.o .qte-lab { font-size: 13px; color: var(--second); width: 100%; }
.o .stepper { display: inline-flex; border: 1.5px solid var(--second); background: var(--bloc); }
.o .stepper button { width: var(--o-taille-touche); height: 46px; min-height: 0; border: 0 !important; box-shadow: none !important; border-radius: var(--o-rayon-net); background: none; color: var(--brun); font: 700 20px var(--corps); cursor: pointer; }
.o .stepper button:hover { background: var(--cire); }
.o .stepper input { width: 70px; text-align: center; font: 700 17px var(--corps); border: 0; border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); background: var(--bloc); color: var(--encre); -moz-appearance: textfield; }
.o .stepper input::-webkit-inner-spin-button, .o .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.o .qte-vite { display: inline-flex; gap: 6px; }
.o .qte-vite button { min-width: 48px; height: var(--o-taille-touche); min-height: 0; border: 0; padding: 0 10px; border: 0; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); font: 600 14px var(--corps); cursor: pointer; }
.o .qte-vite button:hover { background: var(--jaune); box-shadow: none; }
.o .degressif-o { margin: 0; }
.o .dg-crans { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.o .dg-cran { display: grid; gap: 2px; padding: 10px 14px; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); transition: background .2s ease, box-shadow .2s ease; }
.o .dg-cran span { font-size: 12.5px; color: var(--second); }
.o .dg-cran b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 21px; color: var(--second); }
.o .dg-cran.actif { background: #FFF3C4; box-shadow: inset 0 0 0 2px var(--brun); }
.o .dg-cran.actif span { color: var(--encre); font-weight: 600; } .o .dg-cran.actif b { color: var(--brun); }
.o .dg-jauge { display: block; height: 6px; margin: 12px 0 8px; background: var(--creux); }
.o .dg-rempli { display: block; height: 100%; width: 2%; background: var(--jaune); box-shadow: inset 0 -2px rgba(85,37,19,.25); transition: width .25s ease; }
.o .dg-message { margin: 0; font-size: 14.5px; color: var(--encre); }
.o .dg-message b { color: var(--brun); }
.o .dg-total { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 0 0; border-top: 1px solid var(--trait); font-size: 14px; color: var(--second); }
.o .dg-total .t-ttc { font-size: 20px; color: var(--encre); margin-left: auto; }
.o .achat-o .btn-brun { width: 100%; text-align: center; padding: 17px 22px; font-size: 15px; border: 0; cursor: pointer; }
.o .bande-pourquoi { padding: 64px 0 70px; margin: 0 0 64px; }
.o .bande-pourquoi .bloc-presentation { padding-bottom: 0; }
.o .bande-pourquoi h2 { color: var(--nuit); margin: 0 0 8px; }
.o .pq-chapo { margin: 0; font-size: 19px; color: var(--second-jaune); max-width: 52ch; } .o .pq-chapo b { color: var(--nuit); }
.o .cartes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o .bande-pourquoi .carte-av { border-top: 0; box-shadow: 0 1px 0 rgba(85,37,19,.12); }
.o .carte-av h3 { margin: 0; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--brun); }
.o .carte-av > p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--encre); }
.o .carte-av > p b { color: var(--brun); }
.o .carte-av details summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--second); list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: var(--o-taille-touche); padding-right: 4px; }
.o .carte-av details summary::-webkit-details-marker { display: none; }
.o .carte-av details summary::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.o .carte-av details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.o .carte-av details p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--second); }
.o .carte-chiffre { background: var(--nuit); --fond-picto: var(--o-nuit); }
.o .carte-chiffre .picto { color: var(--jaune); }
.o .carte-chiffre h3 { color: var(--sur-brun); } .o .carte-chiffre h3 .gros { display: block; font-size: 46px; line-height: 1; color: var(--jaune); letter-spacing: -.02em; }
.o .carte-chiffre > p { color: var(--second-brun); } .o .carte-chiffre > p b { color: var(--sur-brun); }
.o .log-case .picto { color: var(--brun); }
.o .log-absente .picto { color: #B9AC95; }
.o .partage-o { display: grid; gap: 10px; align-content: center; }
.o .partage-o .etiq-c { margin: 0; }
.o .partage-icones { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.o .pi { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--o-rayon-rond); background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); cursor: pointer; transition: background .15s, color .15s; }
.o .pi:hover, .o .pi:focus-visible { background: var(--brun); color: var(--sur-brun); box-shadow: none; }
.o .pi-copie { font-size: 13px; color: var(--ok, var(--o-etat-ok)); font-weight: 600; min-height: 1em; }
@media (max-width: 960px) {
  .o .cartes-4 { grid-template-columns: 1fr; } .o .bande-pourquoi { padding: 44px 0; }
  .o .dg-total .t-ttc { margin-left: 0; }
}
/* ═══ 🆕 13/09 — L'EN-TÊTE UNIQUE : la barre fine, une ligne, un panneau par univers ═══ */
.o .sr-seul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
 
.o .services { background: var(--cire); color: var(--second); font-size: 13px; border-bottom: 1px solid var(--trait); }
.o .services .w { display: flex; justify-content: space-between; gap: 22px; }
.o .services .sv-gauche, .o .services .sv-droite { display: flex; gap: 4px 22px; flex-wrap: wrap; }
.o .services a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--second); }
.o .services a:hover { color: var(--brun); }
.o .services a.pro-lien { color: var(--brun); }
.o .entete { position: relative; z-index: 40; background: var(--bloc); color: var(--encre); border-bottom: 1px solid var(--trait); }
.o .entete > .w { display: flex; align-items: stretch; gap: 18px; height: 82px; }
.o .entete .marque { display: flex; align-items: center; flex: none; line-height: 0; }
.o .entete .logo { height: 46px; width: 184px; flex: none; }
.o .entete .burger, .o .m-tiroir-tete, .o .m-tiroir-services { display: none; }
.o .m-nav { display: flex; min-width: 0; }
.o .m-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.o .m-univers { display: flex; align-items: center; }
.o .m-lien { display: flex; align-items: center; height: 100%; padding: 0 1px 0 8px; font-size: 14px; font-weight: 600; color: var(--encre); text-decoration: none; white-space: nowrap; }
.o .m-ouvrir { display: grid; place-items: center; width: 17px; height: var(--o-taille-touche); min-height: 0; padding: 0; margin-right: 1px; border: 0; background: none; color: var(--second); cursor: pointer; }
.o .m-ouvrir svg { transition: transform .2s ease; }
.o .m-univers { box-shadow: inset 0 -3px transparent; transition: box-shadow .15s ease; }
.o .m-univers:has(> .m-lien[aria-current]) { box-shadow: inset 0 -3px var(--jaune); }
.o .m-panneau { position: absolute; left: 0; right: 0; top: 100%; background: var(--bloc); border-top: 1px solid var(--trait);
  box-shadow: var(--o-ombre-panneau); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.o .m-grille { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding-top: 28px; padding-bottom: 32px; }
.o .m-tete { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; background: var(--cire); text-decoration: none; color: var(--brun); --fond-picto: var(--o-cire); }
.o .m-tete b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 25px; line-height: 1.1; }
.o .m-tete span { font-size: 14px; color: var(--second); }
.o .m-tete:hover span { color: var(--brun); text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.o .m-familles { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 36px; align-self: start; }
.o .m-familles.m-peu { columns: 1; }
.o .m-familles li { break-inside: avoid; border-bottom: 1px solid var(--trait); }
.o .m-familles a { display: flex; align-items: center; min-height: 42px; font-size: 15px; color: var(--encre); text-decoration: none; }
.o .m-familles a:hover { color: var(--brun); box-shadow: inset 0 -2px var(--jaune); }
@media (min-width: 1181px) {
  .o .m-univers:hover, .o .m-univers:focus-within, .o .m-univers.ouvert { box-shadow: inset 0 -3px var(--jaune); }
  .o .m-univers:hover > .m-panneau, .o .m-univers:focus-within > .m-panneau, .o .m-univers.ouvert > .m-panneau {
    opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease .1s, transform .18s ease .1s, visibility 0s linear .1s; }
  .o .m-univers:hover .m-ouvrir svg, .o .m-univers.ouvert .m-ouvrir svg { transform: rotate(180deg); }
}
.o .entete .outils { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; color: var(--brun); }
.o .entete .outils .panier { margin-left: 6px; }
.o .o-chercher { display: inline-flex; align-items: center; gap: 8px; min-height: var(--o-taille-touche); padding: 0; border: 0; background: none; color: var(--brun); font: 600 14px var(--corps); cursor: pointer; }
.o .entete .outils .mot { font-size: 14px; }
.o .o-chercher .mot, .o .entete details.compte summary .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.o .o-chercher, .o .entete details.compte summary { width: var(--o-taille-touche); justify-content: center; }
.o footer.pied { border: 0; padding: 0; font-size: 14px; color: var(--sur-brun); }
.o .pied nav.pied-col { display: block; margin: 0; }
.o .pied-bas .reseaux .picto { color: var(--sur-brun); }
.o .carte-av > p b { font-family: var(--corps); font-variation-settings: normal; font-size: inherit; line-height: inherit; }
.o .m-familles li, .o .m-liste > li { background: none; border-radius: var(--o-rayon-net); }
.o .recherche-panneau { position: absolute; left: 0; right: 0; top: 100%; background: var(--bloc); border-top: 1px solid var(--trait); border-bottom: 4px solid var(--jaune); box-shadow: var(--o-ombre-panneau); }
.o .recherche-panneau > .w { padding-top: 22px; padding-bottom: 22px; display: grid; gap: 12px; }
.o .recherche-o { display: flex; gap: 10px; }
.o .recherche-o input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 14px 16px; border: 1.5px solid var(--second); background: var(--cire); color: var(--encre); }
.o .recherche-o .btn-brun { border: 0; cursor: pointer; padding: 0 26px; }
.o .rp-souvent { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--second); }
.o .rp-souvent a { padding: 5px 12px; background: var(--cire); box-shadow: inset 0 0 0 1px var(--trait); color: var(--brun); text-decoration: none; font-weight: 600; }
.o .rp-souvent a:hover { background: var(--jaune); box-shadow: none; }
.o .voile-menu { position: fixed; inset: 0; z-index: 55; background: rgba(42,18,9,.45); }
html.sans-defilement { overflow: hidden; }
@media (max-width: 1180px) {
  .o .services { display: none; }
  .o .entete > .w { height: 64px; gap: 10px; align-items: center; }
  .o .entete .logo { width: 140px; height: 36px; }
  .o .entete .burger { display: grid; place-items: center; width: var(--o-taille-touche); height: var(--o-taille-touche); margin-left: -10px; border: 0; background: none; color: var(--brun); cursor: pointer; }
  .o .entete .outils { gap: 4px; } .o .entete .outils .mot { display: none; }
  .o .o-chercher, .o .entete .outils > a, .o .entete details.compte summary { width: var(--o-taille-touche); justify-content: center; }
  .o .m-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(88vw, 380px); flex-direction: column; background: var(--bloc);
    overflow-y: auto; transform: translateX(-102%); transition: transform .26s ease; box-shadow: 20px 0 40px -20px rgba(42,18,9,.4); }
  .o .entete.tiroir-ouvert .m-nav { transform: none; }
  .o .m-tiroir-tete { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 10px 10px 10px 20px; border-top: 4px solid var(--jaune); border-bottom: 1px solid var(--trait); }
  .o .m-tiroir-tete b { font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-size: 22px; color: var(--brun); }
  .o .m-fermer { width: var(--o-taille-touche); height: var(--o-taille-touche); border: 0; background: none; color: var(--brun); cursor: pointer; }
  .o .m-liste { flex-direction: column; }
  .o .m-univers { display: grid; grid-template-columns: 1fr 52px; align-items: stretch; border-bottom: 1px solid var(--trait); box-shadow: none !important; }
  .o .m-lien { padding: 14px 20px; font-family: var(--titres); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; font-weight: 700; font-size: 19px; color: var(--brun); }
  .o .m-lien[aria-current] { box-shadow: inset 4px 0 var(--jaune); }
  .o .m-ouvrir { width: var(--o-taille-geste); height: auto; margin: 0; }
  .o .m-univers.ouvert .m-ouvrir svg { transform: rotate(180deg); }
  .o .m-panneau { position: static; grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    background: var(--cire); transition: grid-template-rows .24s ease; }
  .o .m-univers.ouvert > .m-panneau { grid-template-rows: 1fr; }
  .o .m-grille { display: block; min-height: 0; overflow: hidden; padding: 0 20px; }
  .o .m-tete { display: none; }
  .o .m-familles { columns: 1; padding: 4px 0 10px; }
  .o .m-familles li:last-child { border-bottom: 0; }
  .o .m-tiroir-services { display: grid; padding: 14px 20px 30px; }
  .o .m-tiroir-services a { display: flex; align-items: center; min-height: var(--o-taille-touche); color: var(--second); text-decoration: none; font-size: 15px; }
  .o .recherche-o input { font-size: 16px; }
  .o .pied-complet { grid-template-columns: 1fr 1fr; }
  .o .pied-marque, .o .lettre-o { grid-column: 1 / -1; }
  .o .pied-bas .reseaux { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .o .m-panneau, .o .m-nav, .o .m-ouvrir svg { transition: none !important; } }

.o .conseil { padding: 32px; color: var(--sur-brun); }
.o .conseil .chiffre-jaune { margin: 0 0 10px; }
.o .conseil p:not(.chiffre-jaune):not(.etiq-o) { margin: 0 0 18px; color: var(--second-brun); }