/* ============================================================
   Le Beau Web, gabarit commun des pages Expertises (19/10/2026).
   Sert la page pilier /expertises et les seize pages /expertises/<slug>.
   Reprend la charte du site (encre, feuille, crème, EB Garamond et Mulish,
   bandes peintes) ; le menu reste dans assets/menu.css, chargé après ce fichier.
   Parti pris : un carnet d'atelier numéroté. Le grand numéro s'encre au
   défilement (animation CSS pilotée par la lecture, aucun script), les listes
   se lisent entre des filets fins, sans cartes.
   ============================================================ */

:root{
  --ink:#1f2a1d; --ink-2:#2d3a2a; --leaf:#336443; --mint:#85AB8B; --stem:#3d5638;
  --mint-deep:#5f8a68; --emerald:#0e5a4a;
  --cream:#e9ead9; --cream-2:#f7f4e9;
  --rule:rgba(31,42,29,.22); --rule-strong:rgba(31,42,29,.55);
  --serif:'EB Garamond',Georgia,serif; --sans:'Mulish',system-ui,sans-serif;
  --curve:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
html,body{overflow-x:clip}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--stem);outline-offset:3px;border-radius:4px}

/* Lien d'évitement : invisible tant qu'il n'a pas le focus clavier */
.evite{position:absolute;left:12px;top:-60px;z-index:95;background:var(--ink);color:var(--cream);
  padding:10px 16px;border-radius:10px;font-weight:700;font-size:.9rem;text-decoration:none;transition:top .2s}
.evite:focus{top:12px}

/* ============ BANDES PEINTES ============ */
.band{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.band img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}

/* ============ EN-TÊTE DE PAGE ============ */
.phead{position:relative;isolation:isolate;overflow:hidden}
.phead .band{z-index:-1}
.phead .band::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(247,244,233,.66) 0%,rgba(247,244,233,.56) 34%,rgba(247,244,233,.8) 74%,var(--cream-2) 100%)}
.phead .head-inner{max-width:1180px;margin:0 auto;text-align:center;
  padding:clamp(22px,3vw,40px) clamp(16px,4vw,44px) clamp(26px,3.4vw,46px);
  display:flex;flex-direction:column;align-items:center}
.crumb{margin-bottom:12px;font-size:.8rem;font-weight:600;text-shadow:0 1px 14px rgba(255,251,235,.85)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.55em;letter-spacing:.02em}
.crumb li{display:inline-flex;align-items:center;gap:.55em}
.crumb li+li::before{content:'\203A';color:var(--mint-deep);font-weight:700;font-size:1.05em;line-height:1}
.crumb a{color:var(--stem);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .3s var(--curve),border-color .3s var(--curve)}
.crumb a:hover{color:var(--leaf);border-bottom-color:var(--mint)}
.crumb [aria-current="page"]{color:var(--mint-deep);font-weight:700}
.kick{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--stem);font-weight:700}
.phead h1{font-family:var(--serif);font-weight:400;color:var(--leaf);line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.2vw,3.4rem);max-width:26ch;text-wrap:balance;margin-top:10px;
  text-shadow:0 1px 26px rgba(255,251,235,.7)}
.phead h1 em{font-style:italic;color:var(--emerald)}
.phead .lede{margin-top:12px;max-width:62ch;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.6;color:var(--ink-2);font-weight:600;
  text-shadow:0 1px 18px rgba(255,251,235,.85)}
.leafline{display:none;align-items:center;gap:16px;color:var(--stem);margin-bottom:10px;width:min(320px,70%)}
.leafline::before,.leafline::after{content:'';flex:1;height:1px}
.leafline::before{background:linear-gradient(90deg,rgba(61,86,56,0),rgba(61,86,56,.35))}
.leafline::after{background:linear-gradient(90deg,rgba(61,86,56,.35),rgba(61,86,56,0))}
.leafline svg{flex:none}

/* Révélations (le repli sans JavaScript est posé dans un <noscript> de chaque page) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--curve),transform .9s var(--curve)}
.rv.in{opacity:1;transform:none}
.rs{opacity:0;transform:translateY(22px);transition:opacity 1s var(--curve),transform 1s var(--curve);transition-delay:var(--d,0s)}
.rs.in{opacity:1;transform:none}

/* ============ SECTIONS EN BLOCS (19/10, demande de Thomas : économiser le défilement) ============
   Une page d'expertise tient en un écran et demi sur ordinateur : quatre blocs posés côte à côte
   au lieu de quatre sections empilées. Les blocs restent sobres : fond crème clair, filet fin,
   pas d'ombre, pas d'icône. */
.wrap{max-width:1320px;margin:0 auto;padding-left:clamp(16px,3.4vw,44px);padding-right:clamp(16px,3.4vw,44px)}
.blocs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);
  padding-top:clamp(16px,2vw,28px);padding-bottom:clamp(28px,3vw,44px)}
.bloc{background:var(--cream-2);border:1px solid rgba(31,42,29,.10);border-radius:20px;
  padding:clamp(20px,2.2vw,32px);min-width:0}
.btitle{font-family:var(--serif);font-weight:400;color:var(--leaf);letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem,2.3vw,2.15rem);text-wrap:balance;margin-top:6px}
.btitle em{font-style:italic;color:var(--mint-deep)}
.kick{font-size:.7rem}
.prose p{margin-top:12px;font-size:.98rem;line-height:1.62;color:var(--ink-2)}
.prose p:first-child{margin-top:16px}
.prose a,.etapes a,.aveu a,.chemins a{color:var(--leaf);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(51,100,67,.45);transition:text-decoration-color .3s}
.prose a:hover,.etapes a:hover,.aveu a:hover,.chemins a:hover{text-decoration-color:var(--leaf)}
.chiffres{font-variant-numeric:tabular-nums}

/* Bloc du cadre : le grand numéro en tête, à côté du titre */
.bloc-cadre{grid-column:1/7;grid-row:1/3}
.bloc-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,24px);align-items:end}
.bloc-tete .n{font-family:var(--serif);font-weight:400;color:var(--leaf);font-size:clamp(5rem,9vw,8.4rem);
  line-height:.74;letter-spacing:-.065em;margin-left:-.05em;font-variant-numeric:lining-nums tabular-nums;user-select:none}

/* Bloc du travail : étapes entre filets, titre et texte côte à côte */
.bloc-travail{grid-column:7/13;grid-row:1}
.etapes{list-style:none;counter-reset:etape;margin-top:14px;border-top:1px solid var(--rule-strong)}
.etapes li{counter-increment:etape;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.etapes h3{display:grid;grid-template-columns:2rem 1fr;align-items:baseline;font-family:var(--serif);font-weight:500;
  font-size:1.08rem;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.etapes h3::before{content:counter(etape,decimal-leading-zero);font-size:.82rem;color:var(--mint-deep);font-variant-numeric:lining-nums tabular-nums}
.etapes p{font-size:.92rem;line-height:1.55;color:var(--ink-2)}

/* Blocs des limites et des voisines, côte à côte sous le travail */
.bloc-limites{grid-column:7/10;grid-row:2;background:var(--leaf);border-color:var(--leaf)}
.bloc-limites .kick{color:#e9ead9}
.aveu p{margin-top:12px;font-family:var(--serif);font-style:italic;color:#f7f4e9;font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.45}
.aveu a{color:#fff}
.bloc-voisines{grid-column:10/13;grid-row:2}
.vlist{list-style:none;margin-top:12px;border-top:1px solid var(--rule-strong)}
.vlist li{border-bottom:1px solid var(--rule)}
.vlist a,.ilist a{display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:8px;padding:10px 0;text-decoration:none;color:inherit}
.vnom,.inom{display:contents}
.vn,.in{grid-column:1;grid-row:1/3;font-family:var(--serif);font-size:.86rem;color:var(--mint-deep);font-variant-numeric:lining-nums tabular-nums;padding-top:.3em;transition:color .3s var(--curve)}
.vt,.it{font-family:var(--serif);color:var(--leaf);font-size:1.12rem;letter-spacing:-.01em;line-height:1.2;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;justify-self:start;grid-column:2;grid-row:1;transition:background-size .6s var(--curve),color .3s var(--curve)}
.vraison,.idesc{grid-column:2;grid-row:2;font-size:.85rem;line-height:1.45;color:var(--ink-2);margin-top:2px}
.vlist a:hover .vt,.vlist a:focus-visible .vt,.ilist a:hover .it,.ilist a:focus-visible .it{background-size:100% 1px;color:var(--emerald)}
.vlist a:hover .vn,.ilist a:hover .in{color:var(--leaf)}
.tout{display:inline-block;margin-top:14px;font-weight:700;font-size:.84rem;color:var(--stem);text-decoration:none;border-bottom:1px solid rgba(61,86,56,.4);padding-bottom:2px}
.tout:hover{border-bottom-color:var(--stem)}

/* Page pilier : quatre familles en deux rangées, puis « par où commencer » */
.blocs-hub .famille{grid-column:span 6}
.fam-t{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--stem);font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--rule-strong)}
.ilist{list-style:none}
.ilist li{border-bottom:1px solid var(--rule)}
.ilist li:last-child{border-bottom:0}
.ilist .it{font-size:clamp(1.25rem,1.7vw,1.6rem)}
.bloc-chemins{grid-column:1/13}
.chemins{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:16px;border-top:1px solid var(--rule-strong);padding-top:16px}
.chemins h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.chemins p{margin-top:8px;font-size:.92rem;line-height:1.6;color:var(--ink-2)}

/* ============ APPEL : une bande basse, sur une ligne ============ */
.call{position:relative;isolation:isolate;overflow:hidden;padding:clamp(26px,3vw,40px) 0}
.call .band{z-index:-1}
.call .band::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(233,234,217,.72),rgba(233,234,217,.5))}
.invite{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  background:rgba(255,253,246,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.65);
  border-radius:20px;padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,36px)}
.invite .btitle{margin-top:0}
.invite p{margin-top:4px;font-size:.95rem;color:var(--ink-2)}
.invite .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--stem);color:#fff;border:none;border-radius:999px;padding:11px 20px;
  font-family:var(--sans);font-weight:700;font-size:.86rem;cursor:pointer;text-decoration:none;text-align:center;transition:background .2s,transform .2s}
.btn:hover{background:#2d4228;transform:translateY(-1px)}
.btn-ghost{display:inline-block;background:transparent;color:var(--stem);border:1.5px solid rgba(61,86,56,.55);
  border-radius:999px;padding:10px 20px;font-weight:700;font-size:.86rem;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.btn-ghost:hover{background:var(--stem);color:#fff;transform:translateY(-1px)}

/* ============ PIED DE PAGE ============ */
footer{background:var(--ink);color:var(--cream);padding:clamp(52px,7vw,84px) 0 38px}
.ftop{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.fbrand{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
.fbrand em{font-style:italic;color:var(--mint)}
.fbase{margin-top:10px;font-size:.95rem;color:rgba(233,234,217,.72);max-width:34ch;line-height:1.6}
.fnav{display:flex;gap:8px 26px;flex-wrap:wrap;padding-top:8px}
.fnav a{font-size:.9rem;font-weight:600;color:rgba(233,234,217,.88);text-decoration:none;transition:color .2s}
.fnav a:hover{color:#fff}
.fmeta{margin-top:clamp(34px,5vw,52px);padding-top:22px;border-top:1px solid rgba(233,234,217,.16);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem;color:rgba(233,234,217,.55)}
.fmeta a{color:rgba(233,234,217,.7);text-decoration:none;transition:color .2s}
.fmeta a:hover{color:#fff}
footer :focus-visible{outline-color:var(--mint)}

/* ============ L'ENCRE QUI MONTE ============
   Le grand numéro arrive en contour et se remplit d'encre à l'ouverture de la page ; dans la page
   pilier, chaque numéro s'encre à son tour. Coupé en mouvement réduit : numéros pleins d'emblée. */
@media (prefers-reduced-motion: no-preference){
  .bloc-tete .n{animation:encre 1.8s cubic-bezier(.65,0,.35,1) .35s both}
  .ilist .in{animation:encre-petit 1.2s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(.25s + var(--i,0) * .07s)}
}
@keyframes encre{
  from{color:rgba(51,100,67,0);-webkit-text-stroke:1.4px rgba(51,100,67,.7)}
  to{color:var(--leaf);-webkit-text-stroke:1.4px rgba(51,100,67,0)}
}
@keyframes encre-petit{from{color:rgba(95,138,104,.5)}to{color:var(--mint-deep)}}

/* ============ RESPONSIVE ============ */
@media(max-width:1099px){
  .bloc-cadre,.bloc-travail{grid-column:1/13;grid-row:auto}
  .bloc-limites{grid-column:1/7;grid-row:auto}
  .bloc-voisines{grid-column:7/13;grid-row:auto}
}
@media(max-width:760px){
  .bloc-limites,.bloc-voisines,.blocs-hub .famille{grid-column:1/13}
  .etapes li{grid-template-columns:1fr;gap:4px}
  .etapes p{padding-left:2rem}
  .chemins{grid-template-columns:1fr}
}

/* ============ MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.rs{opacity:1!important;transform:none!important;transition:none!important}
  .band img{transform:none!important}
  .vt,.it,.btn,.btn-ghost{transition:none!important}
  .bloc-tete .n,.ilist .in{animation:none!important}
}