/* =========================================================================
   LPP — Mise en page editoriale : colonne de lecture + rail lateral
   ========================================================================= */

:root{ --lpp-measure:44rem; --lpp-rail:292px; --lpp-railgap:56px; }

/* --- 1. Une seule mesure pour tout le texte courant, titres compris ------- */
.lpp-b.lpp-section > h2.lpp-h,
.lpp-b.lpp-section > h3.lpp-h3,
.lpp-b.lpp-section > h3.lpp-sub,
.lpp-b.lpp-section > p.lpp-lead,
.lpp-b.lpp-section > p.lpp-intro,
.lpp-b.lpp-section > .lpp-prose,
.lpp-b.lpp-section > .lpp-lead-answer,
.lpp-b.lpp-section > .lpp-note{ max-width:var(--lpp-measure) }
.lpp-prose{ max-width:none }

/* chapo : une seule apparence pour lpp-lead et lpp-intro */
.lpp-b p.lpp-intro,.lpp-b p.lpp-lead{
  margin:0 0 18px;color:var(--lpp-ink-2);font-size:16px;line-height:1.65}

/* filet vertical : le titre appartient visiblement a son texte */
.lpp-b.lpp-section > h2.lpp-h{position:relative;padding-left:18px}
.lpp-b.lpp-section > h2.lpp-h::before{content:"";position:absolute;left:0;top:.22em;bottom:.18em;
  width:3px;border-radius:2px;background:var(--lpp-green)}

/* les composants structures gardent la pleine largeur : ce sont eux qui
   donnent le rythme, en alternance avec la colonne de texte */
.lpp-figures,.lpp-tablewrap,.lpp-cards,.lpp-steps,.lpp-linkgrid,.lpp-geogrid,
.lpp-villes,.lpp-cta,.lpp-brands,.lpp-figurebox,.lpp-cta-inline,.lpp-sources,
.lpp-faq,.lpp-check{ max-width:none }

/* --- 2. Echelle d'espacement unique -------------------------------------- */
.lpp-mt-0{margin-top:0}
.lpp-mt-1{margin-top:16px}
.lpp-mt-2{margin-top:24px}
.lpp-mb-0{margin-bottom:0}
.lpp-small{margin:18px 0 0;font-size:15px}
.lpp-b h3.lpp-sub-s,.lpp-b h3.lpp-sub.lpp-sub-s{font-size:17px;margin-top:0}
.lpp-b h3.lpp-sub-l,.lpp-b h3.lpp-sub.lpp-sub-l{font-size:20px;margin-top:0}

/* --- 3. Colonne + rail --------------------------------------------------- */
.lpp-layout{max-width:1120px;margin:0 auto;padding:0 24px}
.lpp-layout .lpp-main{min-width:0}

@media (min-width:1080px){
  .lpp-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--lpp-rail);
    column-gap:var(--lpp-railgap);align-items:start}
  .lpp-layout .lpp-b{max-width:none;margin:0;padding-left:0;padding-right:0}
  .lpp-layout .lpp-main > .lpp-b.lpp-section{padding-top:52px;padding-bottom:0}
  .lpp-layout .lpp-main > .lpp-b.lpp-section:first-of-type{padding-top:26px}
  .lpp-layout .lpp-main > .lpp-b:last-child{padding-bottom:56px}
  /* les composants s'adaptent a la colonne plus etroite */
  .lpp-layout .lpp-steps,.lpp-layout .lpp-figures,
  .lpp-layout .lpp-linkgrid,.lpp-layout .lpp-geogrid,
  .lpp-layout .lpp-check{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* tableaux : typographie resserree pour tenir dans la colonne */
  .lpp-layout .lpp-table{font-size:14px}
  .lpp-layout .lpp-table th,.lpp-layout .lpp-table td{padding:11px 12px}
  .lpp-layout .lpp-table tbody th{width:26%}
  .lpp-layout .lpp-table td.lpp-n b{font-size:15px}
  .lpp-layout .lpp-table thead th{white-space:normal}
  .lpp-rail{position:sticky;top:24px;align-self:start;padding-top:26px}
}
@media (max-width:1079px){ .lpp-rail{display:none} }

/* --- 4. Contenu du rail -------------------------------------------------- */
.lpp-rail p.lpp-railtitle{font-family:var(--lpp-display);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lpp-ink-2);margin:0 0 12px}
.lpp-rail nav{border-left:2px solid var(--lpp-line);margin:0 0 26px}
.lpp-rail nav a{display:block;font-size:13.5px;line-height:1.42;color:var(--lpp-ink-2);
  text-decoration:none;padding:7px 0 7px 16px;border-left:2px solid transparent;margin-left:-2px;
  transition:color .12s ease,border-color .12s ease}
.lpp-rail nav a:hover{color:var(--lpp-green-dark);border-left-color:var(--lpp-line)}
.lpp-rail nav a[aria-current="true"]{color:var(--lpp-green-dark);font-weight:600;
  border-left-color:var(--lpp-green-dark)}
.lpp-rail nav a:focus-visible{outline:2px solid var(--lpp-green);outline-offset:2px;border-radius:2px}

.lpp-railcard{background:var(--lpp-bg);border:1px solid var(--lpp-line);border-radius:12px;padding:18px}
.lpp-railcard b{display:block;font-family:var(--lpp-display);font-weight:600;font-size:14.5px;
  color:var(--lpp-ink);margin-bottom:6px;line-height:1.35}
.lpp-railcard span{display:block;font-size:13px;line-height:1.5;color:var(--lpp-ink-2);margin-bottom:14px}
.lpp-railcard a{display:block;text-align:center;background:var(--lpp-green-dark);color:#fff;
  font-family:var(--lpp-display);font-weight:600;font-size:14px;text-decoration:none;
  border-radius:9px;padding:11px 12px;min-height:44px;line-height:22px;box-sizing:border-box}
.lpp-railcard a:hover{background:#116039}
.lpp-railcard a:focus-visible{outline:2px solid var(--lpp-green);outline-offset:2px}

/* --- 5. Ancres : ne pas coller au bord haut a l'arrivee ------------------- */
.lpp-b.lpp-section[id]{scroll-margin-top:24px}

/* --- 6. Tableau debordant : le defilement doit se voir -------------------- */
.lpp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/34px 100% no-repeat,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/34px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(40,40,40,.13),rgba(0,0,0,0)) left center/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(40,40,40,.13),rgba(0,0,0,0)) right center/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll}