:root{--sableCharbon:#091110;--sableTeal:#568685;--sableTealDark:#355a59;--sableCreme:#b9efe8;--sableSand:#abdce3;--sableEdge:#85b5bc;--sableGrey:#203639;--sablePlus:#406469;--sableMinus:#2b4a46;--sableCard:#c7fcfb;--sableInk:#152827;--sableMuted:#4b7771}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sableCreme);color:var(--sableCharbon);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.68}
h1,h2,h3{font-family:'Rubik',system-ui,sans-serif;font-weight:700;line-height:1.18}
img{max-width:100%;display:block}
a{color:var(--sableTealDark);text-decoration:none}
a:hover{text-decoration:underline}
.sableWrap{max-width:1116px;margin:0 auto;padding:0 20px}

/* barre de tete collante */
.sableBar{background:var(--sableCharbon);padding:13px 0;position:sticky;top:0;z-index:30}
.sableBar .sableWrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sableBrand{font-family:'Rubik',sans-serif;font-weight:700;color:#c7fcfb;font-size:1.12rem;letter-spacing:-.01em}
.sableBrand:hover{text-decoration:none}
.sableBrandMark{color:var(--sableTeal);font-style:normal}
.sableNav{min-width:0}
.sableNavLink{color:#79afae;font-size:.86rem;margin-left:20px}
.sableNavLink:hover{color:var(--sableTeal);text-decoration:none}

/* chapeau sur fond sable */
.sableBanner{background:var(--sableSand);padding:36px 0 34px;border-bottom:1px solid var(--sableEdge)}
.sableTrail{font-size:.78rem;color:var(--sableMuted);margin-bottom:12px}
.sableTrail a{color:var(--sableMuted)}
.sableKicker{font-size:.75rem;color:var(--sableMuted);text-transform:uppercase;letter-spacing:.11em;font-weight:600;margin-bottom:12px}
.sableTitle{font-size:clamp(1.7rem,3.5vw,2.45rem);margin-bottom:16px;max-width:26ch}
.sableTitleEm{font-style:normal;color:var(--sableTealDark)}
.sableLede{color:var(--sableGrey);max-width:44rem;margin-bottom:12px}
.sableCriteria{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-top:22px}
.sableCriterion{background:var(--sableCard);border:1px solid var(--sableEdge);border-radius:5px;padding:13px 15px}
.sableCriterion b{display:block;font-family:'Rubik',sans-serif;font-size:.87rem;margin-bottom:3px}
.sableCriterion span{font-size:.8rem;color:var(--sableGrey);line-height:1.45;display:block}

/* colonne de lecture */
.sableRead{padding:30px 0 4px}
.sableColumn{max-width:46rem}
.sableColumn p{margin-bottom:1.25rem}
.sableH2{font-size:1.34rem;margin:1.9rem 0 .55rem}
.sableH3{font-size:1.04rem;margin:1.4rem 0 .35rem;color:var(--sableTealDark)}
.sableFigure{margin:0 0 24px;max-width:30rem}
.sableFigure img{border:1px solid var(--sableEdge);border-radius:5px}
.sableFigureNote{font-size:.8rem;color:var(--sableMuted);margin-top:7px}
.sableFacts{background:var(--sableCard);border:1px solid var(--sableEdge);border-radius:7px;padding:4px 18px;margin:0 0 26px;max-width:38rem}
.sableFact{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--sableEdge);font-size:.9rem}
.sableFact:last-child{border-bottom:0}
.sableFactKey{color:var(--sableMuted)}
.sableFactValue{font-weight:600;text-align:right}
.sableUps{list-style:none;margin:0 0 1.25rem;font-size:.95rem}
.sableUps li{padding:3px 0 3px 20px;position:relative}
.sableUp:before{content:"+";position:absolute;left:0;color:var(--sablePlus);font-weight:700}
.sableDown:before{content:"\2212";position:absolute;left:0;color:var(--sableMinus);font-weight:700}

/* rangees comparees */
.sableRowHead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:34px 0 18px}
.sableRowHeadTitle{font-size:1.36rem;margin:0}
.sableRowHeadCount{font-size:.84rem;color:var(--sableMuted)}
.sableCardRow{background:var(--sableCard);border:1px solid var(--sableEdge);border-radius:7px;padding:22px;margin-bottom:16px;display:flex;gap:22px;flex-wrap:wrap;transition:box-shadow .18s}
.sableCardRow:hover{box-shadow:0 8px 26px rgba(9,17,16,.09)}
.sableShot{flex:0 0 232px;position:relative;min-width:0}
.sableShot img{width:100%;height:auto;border:1px solid var(--sableEdge);border-radius:5px}
.sableShotFill{width:100%;aspect-ratio:16/10;border:1px dashed var(--sableEdge);border-radius:5px;background:var(--sableSand);display:flex;align-items:center;justify-content:center;color:#6da19a;font-size:.78rem;text-align:center;padding:10px}
.sableSigil{position:absolute;top:-10px;left:-10px;width:36px;height:36px;background:var(--sableCharbon);color:#c7fcfb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Rubik',sans-serif;font-weight:700;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.sableBody{flex:1;min-width:240px}
.sableName{font-family:'Rubik',sans-serif;font-size:1.18rem;font-weight:700;margin:0 0 4px}
.sableName a{color:var(--sableCharbon)}
.sableName a:hover{color:var(--sableTealDark);text-decoration:none}
.sableMeta{font-size:.82rem;color:var(--sableMuted);margin-bottom:11px}
.sableSummary{font-size:.94rem;color:var(--sableInk);margin-bottom:13px}
.sableActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sableMore{display:inline-block;background:var(--sableTeal);color:#c7fcfb;font-family:'Rubik',sans-serif;font-weight:600;font-size:.9rem;padding:10px 22px;border-radius:5px;box-shadow:0 2px 0 var(--sableTealDark)}
.sableMore:hover{background:var(--sableTealDark);color:#c7fcfb;text-decoration:none;box-shadow:0 1px 0 var(--sableTealDark);transform:translateY(1px)}
.sableScan{flex:0 0 176px;min-width:0}
.sableScanItem{margin-bottom:10px}
.sableScanLabel{font-size:.72rem;color:var(--sableMuted);text-transform:uppercase;letter-spacing:.07em;display:block;margin-bottom:2px}
.sableScanValue{font-size:.86rem;color:var(--sableInk);display:block;line-height:1.4}

/* synthese et methode */
.sableVerdict{background:var(--sableCharbon);color:#9ed6d5;border-radius:7px;padding:28px 30px;margin:32px 0}
.sableVerdictTitle{color:#c7fcfb;font-size:1.3rem;margin-bottom:12px}
.sableVerdict p{margin-bottom:1rem}
.sableVerdict p:last-child{margin-bottom:0}
.sableMethod{font-size:.87rem;color:var(--sableMuted);border-top:1px solid var(--sableEdge);padding-top:18px;margin:8px 0 10px}
.sableRoutes{list-style:none;max-width:30rem;margin:26px 0}
.sableRoutes li{padding:10px 0;border-bottom:1px solid var(--sableEdge)}
.sableFoot{background:var(--sableCharbon);color:#618d94;font-size:.86rem;padding:30px 0;margin-top:40px}
.sableFootRow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.sableFootLink{color:#92c9c1}

@media(max-width:900px){
.sableScan{flex:1 1 100%}
.sableScanItem{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--sableEdge);padding-bottom:6px}
.sableScanValue{text-align:right}
/* Sans min-width:0 et sans retour à la ligne, les libellés de navigation alignés par
   marge gauche poussent le document au-delà du viewport sur un téléphone : un élément flex
   ne se réduit pas sous la largeur de son contenu, et toute la page défile de côté. */
.sableNav{flex:1 1 100%;min-width:0}
.sableNavLink{margin:0 17px 0 0;display:inline-block}
}
@media(max-width:620px){
.sableShot{flex:1 1 100%}
.sableFact{flex-direction:column;gap:2px}
.sableFactValue{text-align:left}
}
/* Mesuré au navigateur à 375 px : au-delà de deux lignes, un intitulé de section ne se lit
   plus d'un coup d'œil. La taille cède avant l'intitulé, qui porte du sens. */
@media(max-width:480px){
.sableTitle{font-size:1.5rem}
.sableH2{font-size:1.14rem}
.sableRowHeadTitle,.sableVerdictTitle{font-size:1.16rem}
}