:root{
  --navy:#3A2418;--navy2:#2A1A10;--violet:#D85A30;--violet2:#B5772E;--violetPale:#FBEEE4;
  --cream:#FCFAF6;--sidebarBg:#F1E9DC;--paper:#FFFFFF;--ink:#171411;--muted:#4A453D;
  --border:rgba(74,27,12,0.15);--topbar:74px;--subbar:50px;--left:300px;
  --sc:#D85A30;--sc-dark:#4A1B0C;--sc-pale:#FBEEE4;--sc-mid:#B5772E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--cream);color:var(--ink);min-width:1180px}
.topbar{position:fixed;top:14px;left:18px;right:18px;height:56px;z-index:300;display:flex;align-items:center;gap:1.25rem;padding:0 1.5rem;background:linear-gradient(90deg,#4A2818,#5C3420);border-radius:16px;border-bottom:none;box-shadow:0 10px 30px rgba(58,36,24,.18),0 1px 0 rgba(255,255,255,.05) inset}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--topbar);background:var(--cream);z-index:290;pointer-events:none}
.topbar a{color:rgba(255,255,255,.68);text-decoration:none;font-size:.84rem;font-weight:500}
.topbar a:hover{color:#fff}.logo{font-family:'Cormorant Garamond',serif;font-size:1.82rem!important;font-weight:500!important;color:#fff!important;margin-right:auto;letter-spacing:.01em}.logo em{font-style:italic;color:#F0C99A}
.cta{padding:.45rem .95rem;border-radius:999px;background:rgba(216,90,48,.78);color:#fff!important;font-weight:650!important}
.left-menu{position:fixed;top:calc(var(--topbar) + 8px);left:18px;width:calc(var(--left) - 36px);height:calc(100vh - var(--topbar) - 26px);background:var(--sidebarBg);border:1px solid rgba(58,36,24,.12);border-radius:16px;z-index:260;padding:.6rem 0;overflow:visible;box-shadow:0 10px 30px rgba(58,36,24,.08)}
.left-head{padding:.4rem 1.45rem .7rem;border-bottom:1px solid rgba(58,36,24,.14);margin-bottom:.3rem}.left-small{font-size:.7rem;color:#7E776D;margin-bottom:.1rem}.left-title{font-family:'Cormorant Garamond',serif;font-size:1.32rem;line-height:1.05;color:var(--navy)}.left-section{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:#fff;background:linear-gradient(90deg,#4A1B0C,#B5772E);padding:.4rem 1.45rem;margin:.15rem 0;box-shadow:inset 3px 0 0 #F0C94A}
.col-section{font-size:1.5rem;font-family:'Cormorant Garamond',serif;letter-spacing:.01em;text-transform:none;font-weight:700;color:#4A3F8C;padding:.2rem 0 .5rem;margin:0 0 .9rem;border-bottom:2px solid rgba(74,63,140,.4);}
.pillar{display:flex;gap:.65rem;align-items:flex-start;padding:.5rem 1.45rem;text-decoration:none;color:var(--muted);border-left:5px solid transparent}.pillar:hover{background:rgba(216,90,48,.08)}.pillar.active{background:#fff;border-left-color:var(--pc);box-shadow:0 2px 12px rgba(15,10,42,.055)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pc);margin-top:.3rem;flex-shrink:0;opacity:.55}.pillar.active .dot{opacity:1}.pillar-name{display:block;font-size:.88rem;font-weight:750;color:var(--pc);}.pillar-sub{display:block;margin-top:.1rem;font-size:.71rem;line-height:1.25;color:var(--muted)}.left-footer{padding:.7rem 1.45rem;margin-top:.5rem;border-top:1px solid rgba(58,36,24,.14);font-size:.74rem;line-height:1.5;color:var(--muted)}
.subbar{position:fixed;top:var(--topbar);left:var(--left);right:0;height:var(--subbar);background:rgba(252,250,246,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:200;display:flex;align-items:center;padding:0 1.6rem;gap:.2rem}
.subbar-label{font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-mid);margin-right:.85rem}.subbar a{height:var(--subbar);display:flex;align-items:center;padding:0 .9rem;text-decoration:none;color:var(--muted);font-size:.84rem;font-weight:560;border-bottom:2px solid transparent}.subbar a.active,.subbar a:hover{color:var(--sc-mid);border-bottom-color:var(--sc)}
.main,.main-content{margin-left:var(--left);padding:calc(var(--topbar) + var(--subbar) + 2.15rem) 3rem 3rem;max-width:1190px;min-height:100vh}.breadcrumb{font-size:.8rem;color:#8A8378;margin-bottom:1.05rem}.breadcrumb a{color:var(--sc-mid);font-weight:700;text-decoration:none}
.hero,.lesson-hero{background:#fff;border:1px solid rgba(74,27,12,.07);border-top:none;border-radius:14px;padding:.9rem 1.4rem;margin-bottom:.6rem;position:relative}.hero:after,.lesson-hero:after{content:'';position:absolute;top:0;left:1.9rem;width:48px;height:2px;background:var(--sc-mid)}.hero .kicker,.lesson-hero .lh-step{color:var(--sc-mid);letter-spacing:.18em;margin-top:.6rem}.hero h1,.lesson-hero h1.lh-title,.lesson-hero .lh-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.85rem;line-height:1.15;font-weight:500;color:var(--sc-dark);margin-bottom:.4rem}.hero h1 em,.lesson-hero .lh-title em{color:var(--sc);font-style:italic}.hero .desc,.lesson-hero .lh-desc{color:var(--muted);font-size:.92rem;font-weight:450}
.kicker,.lh-step{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sc-mid);margin-bottom:.55rem}h1.lh-title,.lh-title{font-family:'Cormorant Garamond',serif;font-size:2.4rem;line-height:1.05;font-weight:500;color:var(--sc-dark);margin-bottom:.6rem}.lh-title em{font-style:italic;color:var(--sc-mid)}
.desc,.lh-desc{font-size:.99rem;font-weight:500;color:var(--muted);line-height:1.82;max-width:780px}.tags,.tag-row{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}.tag{background:#fff;color:var(--sc-mid);border:1px solid rgba(216,90,48,.32);font-size:.7rem;font-weight:650;padding:.3rem .72rem;border-radius:999px}
.lesson-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:1.35rem;align-items:start}.lesson-menu{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(15,10,42,.04);position:relative}.lesson-head,.lesson-menu-head{padding:.95rem 1rem;background:linear-gradient(135deg,var(--sc-pale),#FBF6F0);border-bottom:1px solid var(--border)}.lesson-small,.lesson-menu-step{font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--sc-mid)}.lesson-title,.lesson-menu-title{font-family:'Cormorant Garamond',serif;font-size:1.28rem;line-height:1.1;color:var(--sc-dark);margin-top:.2rem}
.lesson-link,.lesson-item{display:flex;gap:.62rem;padding:.72rem .95rem;border-left:3px solid transparent;border-bottom:1px solid rgba(58,36,24,.055);text-decoration:none;color:var(--muted)}.lesson-link.active,.lesson-item.active{border-left-color:var(--sc);background:#fff}.lesson-num{font-family:'Cormorant Garamond',serif;font-size:.96rem;color:rgba(74,27,12,.28);min-width:22px}.lesson-link.active .lesson-num,.lesson-item.active .lesson-num{color:var(--sc-mid)}.lesson-name{font-size:.8rem;line-height:1.4;font-weight:550}.lesson-link.active .lesson-name,.lesson-item.active .lesson-name{color:var(--sc-dark);font-weight:750}
.content-grid{display:grid;grid-template-columns:1.1fr .82fr;gap:1.25rem}.card,.content-block,.script-card,.exercise-card,.warning-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:1.45rem;margin-bottom:1rem;box-shadow:0 10px 30px rgba(15,10,42,.025)}.card-title,.block-title{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-mid);padding-bottom:.58rem;border-bottom:1px solid var(--border);margin-bottom:.95rem}
p,.content-text{color:var(--muted);font-size:.96rem;font-weight:500;line-height:1.86;margin-bottom:.92rem}.method-list{display:grid;gap:.62rem}.method,.method-step{display:flex;gap:.78rem;padding:.82rem .95rem;border-radius:12px;background:#FBF3EC;border:1px solid rgba(216,90,48,.18);margin-bottom:.62rem}.method-num,.method-step:before{font-family:'Cormorant Garamond',serif;color:var(--sc-mid);font-weight:600;font-size:1.12rem;min-width:30px}.method-step:before{counter-increment:item;content:counter(item, decimal-leading-zero)}.method-list{counter-reset:item}.method strong,.method-step strong{display:block;color:var(--sc-dark);font-size:.9rem;margin-bottom:.18rem}.method span,.method-step span{color:var(--muted);font-weight:500;font-size:.86rem;line-height:1.58}
.tip,.tip-row{display:flex;gap:9px;padding:.78rem .95rem;background:var(--sc-pale);border-left:3px solid var(--sc);border-radius:11px;color:var(--sc-dark);font-size:.89rem;line-height:1.62;margin-bottom:.52rem}.tip-arrow{font-weight:800;color:var(--sc-mid)}.script,.script-body{background:var(--sc-pale);border-left:3px solid var(--sc);border-radius:11px;padding:1rem 1.18rem;color:var(--muted);font-size:.92rem;line-height:1.82;font-style:italic}.copy-btn{font-size:.74rem;font-weight:700;color:var(--sc);background:none;border:1.5px solid var(--sc);padding:.4rem .95rem;border-radius:100px;cursor:pointer;font-family:'Manrope',sans-serif;margin-top:.75rem}.copy-btn:hover{background:var(--sc);color:#fff}
.warning-card,.warning{background:#FFFDF8;border-left:3px solid #E5A43A}.exercise-card,.exercise{background:linear-gradient(135deg,var(--sc-pale),#FBF6F0);border:0}.next-row{display:flex;gap:.72rem;flex-wrap:wrap;margin-top:1.85rem;padding-top:1.35rem;border-top:1px solid var(--border)}.next-btn,.btn{display:inline-flex;text-decoration:none;background:var(--sc);color:#fff;padding:.74rem 1.25rem;border-radius:999px;font-size:.84rem;font-weight:750}.next-btn.secondary-btn,.btn.secondary{background:#fff;color:var(--sc-mid);border:1.5px solid var(--sc)}
.home-hero{padding:4.5rem 0 3rem}.home-title{font-family:'Cormorant Garamond',serif;font-size:4rem;line-height:1.02;font-weight:500;color:var(--navy);max-width:780px}.home-title em{color:var(--violet2);font-style:italic}.home-sub{font-size:1.05rem;line-height:1.85;color:var(--muted);max-width:700px;margin-top:1.2rem}.home-grid,.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:1rem;margin-top:1.5rem}.home-card,.pg-card,.index-card{background:#fff;border:1px solid rgba(74,27,12,.12);border-left:2px solid color-mix(in srgb, var(--pc,var(--sc)) 55%, transparent);border-radius:13px;padding:1.15rem 1.3rem;text-decoration:none;color:inherit;box-shadow:0 3px 10px rgba(15,10,42,.025);position:relative;overflow:hidden}.home-card:before,.pg-card:before,.index-card:before{content:none}.home-card h3,.pg-card-title,.index-card h3{font-family:'Cormorant Garamond',serif;font-size:1.18rem;color:var(--navy);font-weight:500;margin-bottom:.3rem}.home-card p,.pg-card-desc,.index-card p{font-size:.87rem;font-weight:450;line-height:1.6;color:var(--muted)}
@media(max-width:1120px){.lesson-layout,.content-grid,.home-grid,.cards-grid{grid-template-columns:1fr}}

/* ===== ICÔNES TABLER ===== */
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css');

/* ===== TRANSITIONS GLOBALES ===== */
*, *::before, *::after { transition: background-color .18s, border-color .18s, box-shadow .18s, opacity .18s; }

/* ===== TOPBAR — séparateur doux entre liens ===== */
.topbar a:not(.logo):not([style]) { position: relative; }
.topbar a:not(.logo):not([style])::after { content:''; position:absolute; bottom:-2px; left:50%; right:50%; height:2px; background:#F0C99A; border-radius:2px; transition: left .2s, right .2s; }
.topbar a:not(.logo):not([style]):hover::after { left:0; right:0; }

/* ===== SIDEBAR — icônes piliers ===== */
.pillar { position:relative; transition: background .18s, border-color .18s, padding-left .18s; }
.pillar:hover { padding-left: 1.65rem; }
.pillar.active { padding-left: 1.65rem; }

/* Icônes devant chaque pilier via pseudo */
.pillar[href*="savoir/"]:not([href*="savoir-"]) .dot::before,
.pillar[href*="./savoir/"] .dot::before { content: '\eac0'; } /* ti-book */

/* ===== HOME CARDS — hover élégant ===== */
.home-card, .pg-card, .index-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
}
.home-card:hover, .pg-card:hover, .index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,10,42,.09);
}
.home-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(216,90,48,.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s;
}
.home-card:hover::after { opacity: 1; }

/* Icône auto dans les cartes h3 — via data-icon */
.home-card h3::before, .index-card h3::before {
  font-family: 'tabler-icons';
  font-size: 1.05rem;
  margin-right: .45rem;
  vertical-align: -2px;
  opacity: .7;
  color: var(--pc, var(--sc));
}

/* ===== CONTENT-BLOCK — ligne top colorée ===== */
.content-block {
  border-top: 3px solid var(--sc-pale);
  transition: border-color .2s, box-shadow .2s;
}
.content-block:hover { border-top-color: var(--sc); box-shadow: 0 14px 36px rgba(15,10,42,.04); }

/* ===== METHODS — icônes et hover ===== */
.method, .method-step {
  transition: background .18s, border-color .18s, transform .18s;
  cursor: default;
}
.method:hover, .method-step:hover {
  background: #FBEEE4;
  border-color: rgba(216,90,48,.35);
  transform: translateX(3px);
}
.method-num { transition: color .18s; }
.method:hover .method-num { color: var(--sc-dark); }

/* ===== TIPS — icône flèche stylisée ===== */
.tip { border-radius: 0 11px 11px 0; }
.tip-arrow { font-size: 1.1rem; }

/* ===== TAGS — hover ===== */
.tag {
  transition: background .15s, color .15s, border-color .15s;
  cursor: default;
}
.tag:hover { background: var(--sc-pale); border-color: var(--sc); color: var(--sc-dark); }

/* ===== BOUTONS — micro-animation ===== */
.btn, .next-btn, .copy-btn {
  transition: background .18s, color .18s, transform .15s, box-shadow .18s;
}
.btn:hover, .next-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(216,90,48,.28); }
.btn:active, .next-btn:active { transform: translateY(0); }
.copy-btn:hover { transform: translateY(-1px); }

/* ===== HERO — légère animation de l'orbe ===== */
@keyframes orbe { 0%,100%{transform:scale(1) translate(0,0);opacity:.055} 50%{transform:scale(1.12) translate(-8px,8px);opacity:.08} }
.hero::after, .lesson-hero::after { animation: orbe 8s ease-in-out infinite; }

/* ===== CARDS DE PILIERS SIDEBAR ===== */
.pillar-name { transition: color .15s; }
.pillar:hover .pillar-name { color: var(--pc, var(--violet)); }

/* ===== BREADCRUMB — séparateur stylisé ===== */
.breadcrumb { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.breadcrumb a::after { content: '›'; margin-left: .35rem; color: #C5BFB8; font-weight: 400; }

/* ===== CARD-TITLE — icônes ===== */
.card-title::before {
  font-family: 'tabler-icons';
  content: '\eb6b'; /* ti-point */
  margin-right: .4rem;
  font-size: .85rem;
  opacity: .6;
  vertical-align: -1px;
}

/* ===== KICKER — trait décoratif ===== */
.kicker::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 2px;
  background: var(--sc-mid);
  border-radius: 2px;
  margin-right: .5rem;
  vertical-align: middle;
  opacity: .7;
}

/* ===== WARNING CARD — icône alerte ===== */
.warning-card::before {
  font-family: 'tabler-icons';
  content: '\ea06'; /* ti-alert-triangle */
  float: left;
  font-size: 1.1rem;
  color: #B58A2A;
  margin-right: .6rem;
  margin-top: .05rem;
}

/* ===== SCRIPT / TIP — icône guillemet ===== */
.script::before, .script-body::before {
  font-family: 'tabler-icons';
  content: '\f3a0'; /* ti-quote */
  font-size: 1.2rem;
  color: var(--sc-mid);
  opacity: .5;
  display: block;
  margin-bottom: .35rem;
}

/* ===== SCROLLBAR ÉLÉGANTE ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(216,90,48,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(216,90,48,.45); }

/* ===== FOCUS VISIBLE SOIGNÉ ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== SÉLECTION TEXTE ===== */
::selection { background: rgba(216,90,48,.18); color: var(--sc-dark); }

/* ===== HOME HERO — animation titre ===== */
.home-title { opacity: 0; animation: fadeUp .6s .1s forwards; }
.home-sub   { opacity: 0; animation: fadeUp .6s .25s forwards; }
.home-hero .tags { opacity: 0; animation: fadeUp .6s .4s forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ===== SECTION TRANSITIONS ===== */
section { animation: fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* Menu deroulant flottant des piliers -- s'ouvre au survol du pilier dans
   la sidebar, affiche les sous-rubriques reelles de chaque pilier. Pour
   savoir-faire (qui a 2 niveaux), un sous-sous-menu s'ouvre a son tour au
   survol d'une categorie. */
.pillar-wrapper { position: relative; }

.pillar-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 230px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15,10,42,.16);
  padding: .5rem;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.pillar-wrapper:hover .pillar-flyout,
.pillar-flyout:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.pillar-flyout-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  font-size: .86rem;
  font-weight: 600;
  position: relative;
}
.pillar-flyout-item:hover { background: rgba(216,90,48,.08); }
.pillar-flyout-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex-shrink: 0; opacity: .6; }
.pillar-flyout-item.disabled { color: var(--muted); cursor: default; opacity: .65; }
.pillar-flyout-item .sub-label { font-size: .72rem; color: var(--muted); display: block; margin-top: .1rem; font-weight: 400; }

/* Sous-sous-menu (niveau 2, pour savoir-faire) */
.pillar-flyout-item.has-children { cursor: default; }
.pillar-flyout-item.has-children::after { content: '\eaa0'; font-family: 'tabler-icons'; font-size: .7rem; margin-left: auto; opacity: .5; }
.pillar-subflyout-wrapper { position: relative; }
.pillar-subflyout {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15,10,42,.16);
  padding: .5rem;
  z-index: 301;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.pillar-subflyout-wrapper:hover .pillar-subflyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Sur mobile/tactile, pas de survol fiable -- le flyout reste cache, la
   navigation se fait alors via les pages index.html classiques (degrade
   gracieux, pas de JS supplementaire necessaire). */
@media (hover: none) {
  .pillar-flyout, .pillar-subflyout { display: none; }
}

/* ===== Badges pastille (style validé "chaleureux organique") ===== */
.badge-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--pc,var(--sc));color:#fff;font-size:.78rem;font-weight:700;padding:.32rem .85rem;border-radius:999px;text-decoration:none;}
.badge-pill.outline{background:#fff;color:var(--pc,var(--sc));border:1.5px solid var(--pc,var(--sc));}

/* ===== Touche rose poudré (direction "C avec touche de B") — usage ciblé : avatars, réactions actives, jamais en couleur structurelle ===== */
.rose-accent{background:#FBEAF0;color:#993556;}
.avatar-initiale{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#FBEAF0;color:#993556;font-size:.74rem;font-weight:600;flex-shrink:0;}
.reaction-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:999px;background:#FBF6F0;font-size:.78rem;border:none;cursor:pointer;}
.reaction-pill.active{background:#FBEAF0;}
.reaction-pill.active .reaction-count{color:#993556;font-weight:600;}
.signature-line{height:2px;width:48px;background:var(--sc-mid);border-radius:1px;margin-bottom:.7rem;}