/* =========================================================================
   Le Guide des chefs d'entreprise (leguidedesce.fr)
   Design : magazine business clair, marine + bleu + émeraude
   Polices : Schibsted Grotesk (titres) + Hanken Grotesk (texte)
   ========================================================================= */

:root {
  --marine:       #16243D;
  --marine-doux:  #23324B;
  --bleu:         #2B5FD9;
  --bleu-doux:    #EDF2FE;
  --emeraude:     #0F9D77;
  --emeraude-doux:#E7F6F1;

  --texte:        #1B2536;
  --texte-doux:   #5B6577;
  --texte-clair:  rgba(255,255,255,.80);

  --fond-clair:   #F4F6FA;
  --blanc:        #FFFFFF;
  --bordure:      rgba(22,36,61,.12);
  --ombre:        0 18px 46px rgba(22,36,61,.14);

  --alerte:       #B23A48;
  --alerte-doux:  #FBEBEC;
  --ambre:        #C99A2E;
  --ambre-doux:   #FBF3DE;

  --titre: "Schibsted Grotesk", "Segoe UI", Arial, sans-serif;
  --texte-police: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;

  --large: 1180px;
  --etroit: 740px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--texte-police);
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--marine); }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; line-height: 1.2; color: var(--marine); margin: 0 0 .5em; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ===== Boutons ===== */
.btn-pilote {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--texte-police); font-weight: 700; font-size: .96rem;
  padding: .78em 1.5em; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--bleu); color: var(--blanc);
  transition: background .18s, transform .18s;
}
.btn-pilote:hover { background: #2350B8; color: var(--blanc); transform: translateY(-1px); }
.btn-pilote--grand { padding: .95em 1.9em; font-size: 1.02rem; }

.btn-contour {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--texte-police); font-weight: 700; font-size: .96rem;
  padding: .76em 1.5em; border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px;
  color: var(--blanc); background: transparent; transition: border-color .18s, background .18s;
}
.btn-contour:hover { border-color: var(--blanc); background: rgba(255,255,255,.1); color: var(--blanc); }
.btn-contour--clair { border-color: rgba(255,255,255,.4); }

/* =========================================================================
   En-tête
   ========================================================================= */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--marine); color: var(--blanc);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .2s;
}
.entete--colle { box-shadow: 0 6px 20px rgba(10,15,25,.22); }
.entete-int {
  max-width: var(--large); margin-inline: auto; padding: 0 22px;
  min-height: 74px; display: flex; align-items: center; gap: 30px;
}
.logo-guide { display: block; }
.logo-guide img { display: block; }

.nav-pilotage { display: flex; align-items: center; gap: 26px; margin-right: auto; flex-wrap: wrap; }
.nav-pilotage a {
  color: rgba(255,255,255,.85); font-size: .95rem; font-weight: 600;
  position: relative; padding: 6px 0; transition: color .15s;
}
.nav-pilotage a:hover { color: var(--blanc); }
.nav-pilotage a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: var(--emeraude); transition: width .2s;
}
.nav-pilotage a:hover::after { width: 100%; }

.entete-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.btn-entete {
  font-size: .92rem; font-weight: 700; color: var(--blanc);
  padding: .5em 1.1em; border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
}
.btn-entete:hover { border-color: var(--blanc); color: var(--blanc); }

.declic { display: none; width: 42px; height: 40px; background: transparent; border: 0; cursor: pointer; padding: 9px 8px; }
.declic span { display: block; height: 2px; background: var(--blanc); border-radius: 2px; transition: transform .25s, opacity .2s; }
.declic span + span { margin-top: 5px; }
.declic[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.declic[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.declic[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Volet de recherche (optionnel, activé via data-ouvre-recherche) */
.barre-recherche { display: none; gap: 12px; background: var(--marine-doux); padding: 16px 22px; }
.barre-recherche.ouvert { display: flex; }
.barre-recherche input { flex: 1; padding: .7em 1em; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--blanc); border-radius: 6px; font-size: 1rem; }

/* =========================================================================
   Accueil : Tribune (une éditoriale)
   ========================================================================= */
.tribune {
  position: relative; color: var(--blanc); overflow: hidden;
  background: linear-gradient(160deg, var(--marine-doux) 0%, var(--marine) 60%, #0D1728 100%);
}
.tribune-visuel {
  position: absolute; inset: 0; background-image: var(--fond); background-size: cover; background-position: center;
  opacity: .28; mix-blend-mode: luminosity;
}
.tribune::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(22,36,61,.94) 0%, rgba(22,36,61,.72) 45%, rgba(22,36,61,.4) 100%);
}
.tribune-corner {
  position: absolute; top: -20%; right: -8%; width: 420px; height: 140%;
  background: radial-gradient(circle at center, rgba(15,157,119,.30), transparent 65%);
  pointer-events: none;
}
.tribune-int { position: relative; z-index: 1; max-width: var(--large); margin-inline: auto; padding: 96px 24px 92px; }
.tribune-texte { max-width: 640px; }
.tribune-surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #7FE6C4; margin-bottom: 20px;
}
.tribune-surtitre::before { content: ""; width: 30px; height: 2px; background: var(--emeraude); }
.tribune-titre { font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--blanc); margin: 0 0 .4em; letter-spacing: -.01em; }
.tribune-chapo { font-size: 1.12rem; line-height: 1.6; color: var(--texte-clair); margin: 0 0 32px; }
.tribune-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== Bandeau atouts ===== */
.bandeau-atouts { background: var(--fond-clair); border-bottom: 1px solid var(--bordure); }
.bandeau-atouts-int {
  max-width: var(--large); margin-inline: auto; padding: 44px 22px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
}
.atout { display: flex; gap: 14px; align-items: flex-start; }
.atout-ico { font-size: 1.2rem; color: var(--emeraude); line-height: 1.5; flex-shrink: 0; }
.atout h2 { font-size: 1.02rem; margin: 0 0 .25em; }
.atout p { margin: 0; color: var(--texte-doux); font-size: .92rem; line-height: 1.5; }

/* =========================================================================
   Rangées de titres génériques
   ========================================================================= */
.rang-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.rang-titre h2 { position: relative; font-size: 1.85rem; margin: 0; padding-bottom: 12px; }
.rang-titre h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--emeraude); }
.rang-titre--mince h2 { font-size: 1.4rem; padding-bottom: 8px; }
.rang-titre--mince h2::after { width: 36px; height: 2px; }
.lien-fleche { font-size: .92rem; font-weight: 700; color: var(--bleu); white-space: nowrap; }
.lien-fleche:hover { color: var(--marine); }

/* ===== À la une ===== */
.une-int, .derniers-int { max-width: var(--large); margin-inline: auto; padding: 60px 22px; }
.une-grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: start; }

.une-vedette { display: flex; flex-direction: column; }
.une-vedette-visuel { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: var(--fond-clair); }
.une-vedette-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.une-vedette:hover .une-vedette-visuel img { transform: scale(1.04); }
.une-vedette-corps { padding-top: 20px; }
.une-vedette-corps h3 { font-size: 1.7rem; line-height: 1.22; margin: 14px 0 .4em; }
.une-vedette-corps h3 a { color: var(--marine); }
.une-vedette-corps h3 a:hover { color: var(--bleu); }
.une-vedette-corps p { color: var(--texte-doux); margin: 0 0 14px; }

.etiquette-rubrique {
  display: inline-block; font-family: var(--texte-police); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blanc);
  background: var(--ton, var(--bleu)); padding: .42em .9em; border-radius: 999px;
}
a.etiquette-rubrique:hover { filter: brightness(1.08); color: var(--blanc); }

.une-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.une-ligne { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--bordure); }
.une-ligne:first-child { border-top: 0; padding-top: 0; }
.une-ligne-visuel { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: var(--fond-clair); }
.une-ligne-visuel img { width: 100%; height: 100%; object-fit: cover; }
.une-ligne-corps { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.une-ligne-rub { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ton, var(--bleu)); }
.une-ligne-corps h4 { font-size: 1.02rem; line-height: 1.32; margin: 0; }
.une-ligne-corps h4 a { color: var(--marine); }
.une-ligne-corps h4 a:hover { color: var(--bleu); }

/* ===== Accès rubriques (tuiles) ===== */
.acces-rubriques { background: var(--fond-clair); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.acces-rubriques-int { max-width: var(--large); margin-inline: auto; padding: 56px 22px; }
.grille-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tuile-rubrique {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 26px 14px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 10px;
  color: var(--marine); transition: box-shadow .2s, transform .2s, border-color .2s;
}
.tuile-rubrique:hover { box-shadow: var(--ombre); transform: translateY(-3px); border-color: var(--ton, var(--bleu)); color: var(--marine); }
.tuile-rubrique-ico { font-size: 1.5rem; color: var(--ton, var(--bleu)); }
.tuile-rubrique-nom { font-weight: 700; font-size: .96rem; }

/* ===== Derniers articles / cartes dossier ===== */
.grille-dossiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.carte-dossier { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.carte-dossier:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.carte-dossier-visuel { display: block; aspect-ratio: 16/10; background: var(--fond-clair); overflow: hidden; }
.carte-dossier-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.carte-dossier:hover .carte-dossier-visuel img { transform: scale(1.05); }
.carte-dossier-corps { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.carte-dossier-titre { font-size: 1.14rem; line-height: 1.3; margin: 4px 0 0; }
.carte-dossier-titre a { color: var(--marine); }
.carte-dossier-titre a:hover { color: var(--bleu); }
.carte-dossier-extrait { font-size: .93rem; color: var(--texte-doux); margin: 0; flex: 1; }
.carte-dossier-meta { font-size: .82rem; color: var(--texte-doux); }

/* ===== Deux colonnes (pleins feux rubriques) ===== */
.deux-colonnes-int { max-width: var(--large); margin-inline: auto; padding: 20px 22px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.liste-renvois { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste-renvois li { border-top: 1px solid var(--bordure); }
.liste-renvois li:first-child { border-top: 0; }
.liste-renvois a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 13px 0; color: var(--texte); }
.liste-renvois a:hover .liste-renvois-titre { color: var(--bleu); }
.liste-renvois-titre { font-weight: 600; font-size: .98rem; }
.liste-renvois time { font-size: .8rem; color: var(--texte-doux); white-space: nowrap; }

/* ===== Appel sombre ===== */
.appel-sombre { background: var(--marine); color: var(--blanc); }
.appel-sombre-int {
  max-width: var(--large); margin-inline: auto; padding: 56px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.appel-sombre-texte h2 { color: var(--blanc); }
.appel-sombre-texte p { color: var(--texte-clair); margin: 0; max-width: 52ch; }
.appel-sombre-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================================
   Fil d'Ariane
   ========================================================================= */
.fil-int { max-width: var(--large); margin-inline: auto; padding: 13px 22px; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: .85rem; color: var(--texte-doux); }
.fil li { display: flex; align-items: center; gap: 8px; }
.fil li:not(:last-child)::after { content: "›"; color: var(--texte-doux); opacity: .6; }
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--bleu); }
.fil-actuel span { color: var(--marine); font-weight: 600; }

/* =========================================================================
   Article (page-dossier)
   ========================================================================= */
.page-dossier { max-width: var(--large); margin-inline: auto; padding: 20px 22px 70px; }
.dossier-entete { max-width: 820px; margin: 0 auto 26px; }
.dossier-entete .etiquette-rubrique { margin-bottom: 16px; }
.dossier-entete h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 0 0 .35em; }
.dossier-meta { display: inline-flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--texte-doux); flex-wrap: wrap; }
.point-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--bleu); }
.dossier-maj { font-style: italic; }

.dossier-grand-visuel { margin: 0 0 40px; border-radius: 12px; overflow: hidden; max-width: 980px; margin-inline: auto; }
.dossier-grand-visuel img { width: 100%; height: auto; }

.dossier-mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 54px; align-items: start; max-width: 1040px; margin-inline: auto; }

/* Corps rédactionnel (aussi utilisé sur les pages statiques) */
.dossier-texte { font-size: 1.06rem; line-height: 1.85; color: var(--texte); max-width: 760px; overflow-wrap: break-word; }
.dossier-texte > *:first-child { margin-top: 0; }
.dossier-texte p { margin: 0 0 1.3em; }
.dossier-texte h2 { font-size: 1.6rem; margin: 1.8em 0 .6em; }
.dossier-texte h2::after { content: ""; display: block; width: 42px; height: 3px; background: var(--emeraude); margin-top: .4em; }
.dossier-texte h3 { font-size: 1.24rem; margin: 1.5em 0 .5em; }
.dossier-texte h4 { font-size: 1.05rem; margin: 1.3em 0 .4em; }
.dossier-texte a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }
.dossier-texte a:hover { color: var(--marine); }
.dossier-texte ul, .dossier-texte ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.dossier-texte li { margin-bottom: .5em; }
.dossier-texte ul li::marker { color: var(--emeraude); }
.dossier-texte ol li::marker { color: var(--bleu); font-weight: 700; }
.dossier-texte img { border-radius: 8px; margin: 1em 0; max-width: 100%; height: auto; }
.dossier-texte img.aligncenter, .dossier-texte .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.dossier-texte .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 50%; }
.dossier-texte .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 50%; }
.dossier-texte figure { margin: 1.8em 0; }
.dossier-texte figure img { margin: 0 auto; }
.dossier-texte figcaption { font-size: .85rem; color: var(--texte-doux); text-align: center; margin-top: .6em; }
.dossier-texte blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--emeraude);
  font-size: 1.16rem; font-style: italic; color: var(--marine-doux);
}
.dossier-texte blockquote p { margin-bottom: .4em; }
.dossier-texte table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .95rem; }
.dossier-texte th, .dossier-texte td { padding: 12px 16px; border: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.dossier-texte thead th { background: var(--marine); color: var(--blanc); font-weight: 700; }
.dossier-texte tbody tr:nth-child(even) { background: var(--fond-clair); }
.dossier-texte hr { border: 0; height: 1px; background: var(--bordure); margin: 2.2em 0; }
.dossier-texte strong { color: var(--marine); }
.dossier-texte pre { overflow-x: auto; background: var(--fond-clair); padding: 16px; border-radius: 8px; font-size: .9rem; }

/* Tableaux et vidéos responsives (générés par format_contenu) */
.tableau-scroll, .tableau-defile, .tableau-defilant { overflow-x: auto; margin: 1.8em 0; -webkit-overflow-scrolling: touch; }
.tableau-scroll table, .tableau-defile table, .tableau-defilant table { margin: 0; min-width: 460px; }
.video-responsive, .cadre-video { position: relative; width: 100%; padding-top: 56.25%; margin: 1.8em 0; border-radius: 8px; overflow: hidden; background: var(--marine); }
.video-responsive iframe, .cadre-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================================
   Composants éditoriaux embarqués dans le contenu des articles
   ========================================================================= */

/* Encadrés (bref / retenir / attention / savoir / conseil) */
.encadre {
  background: var(--fond-clair); border: 1px solid var(--bordure); border-left: 4px solid var(--bleu);
  border-radius: 8px; padding: 20px 24px; margin: 1.8em 0;
}
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }
.encadre-titre { display: block; font-family: var(--titre); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5em; color: var(--marine); }
.encadre-retenir { border-left-color: var(--emeraude); background: var(--emeraude-doux); }
.encadre-retenir .encadre-titre { color: #0B7A5D; }
.encadre-attention { border-left-color: var(--alerte); background: var(--alerte-doux); }
.encadre-attention .encadre-titre { color: #8C2C38; }
.encadre-savoir { border-left-color: var(--bleu); background: var(--bleu-doux); }
.encadre-conseil { border-left-color: var(--ambre); background: var(--ambre-doux); }
.encadre-conseil .encadre-titre { color: #8C6A1E; }

/* Étapes numérotées */
.etapes { list-style: none; counter-reset: etape; margin: 1.8em 0; padding: 0; }
.etapes > li { position: relative; counter-increment: etape; padding: 0 0 1.2em 3.2em; margin: 0; }
.etapes > li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 2.2em; height: 2.2em; display: flex; align-items: center; justify-content: center;
  background: var(--bleu); color: var(--blanc); font-family: var(--titre); font-weight: 700; border-radius: 50%;
}
.etapes > li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.1em; top: 2.2em; bottom: 0; width: 2px; background: var(--bordure);
}
.etapes strong { display: block; color: var(--marine); margin-bottom: .15em; }

/* Évaluations en tableau */
.eval-bon, .eval-fort { background: rgba(15,157,119,.12); color: #0B7A5D; font-weight: 700; }
.eval-moyen { background: rgba(201,154,46,.14); color: #8C6A1E; font-weight: 700; }
.eval-faible, .eval-mauvais { background: rgba(178,58,72,.10); color: #8C2C38; font-weight: 700; }

/* Comparatif / verdict (fiches vrai-faux, oui-non) */
.comparatif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.8em 0; }
.comparatif-col { border: 1px solid var(--bordure); border-radius: 8px; padding: 18px 20px; }
.comparatif-oui { border-top: 3px solid var(--emeraude); }
.comparatif-non { border-top: 3px solid var(--alerte); }

.verdict { display: flex; align-items: flex-start; gap: 14px; margin: 1.8em 0; padding: 18px 20px; border-radius: 8px; background: var(--fond-clair); border: 1px solid var(--bordure); }
.verdict-etiquette { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: .4em .9em; border-radius: 999px; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--blanc); background: var(--texte-doux); }
.verdict-vrai .verdict-etiquette, .verdict-oui .verdict-etiquette { background: var(--emeraude); }
.verdict-faux .verdict-etiquette, .verdict-non .verdict-etiquette { background: var(--alerte); }
.verdict-depend .verdict-etiquette { background: var(--ambre); }
.verdict-texte { margin: 0; }

/* FAQ */
.bloc-faq, .faq { margin: 2.2em 0 1em; }
.faq-item { border: 1px solid var(--bordure); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.faq-item > summary {
  cursor: pointer; list-style: none; padding: 15px 20px; font-weight: 700;
  color: var(--marine); background: var(--fond-clair); display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-size: 1.4rem; color: var(--bleu); line-height: 1; flex-shrink: 0; }
.faq-item[open] > summary::after { content: "−"; }
.faq-item-rep, .faq-reponse { padding: 14px 20px 18px; }
.faq-item-rep p:last-child, .faq-reponse p:last-child { margin-bottom: 0; }

/* Interactif : checklist à progression */
.interactif { margin: 2em 0; padding: 22px 24px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond-clair); }
.interactif-titre { font-size: 1.08rem; font-weight: 700; margin: 0 0 .3em; color: var(--marine); }
.interactif-intro { color: var(--texte-doux); font-size: .92rem; margin: 0 0 14px; }
.checklist, .check-liste { list-style: none; padding: 0; margin: 0 0 16px; }
.checklist li, .check-liste li { margin: 0; border-top: 1px solid var(--bordure); }
.checklist li:first-child, .check-liste li:first-child { border-top: 0; }
.checklist label, .check-liste label { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; cursor: pointer; }
.checklist input, .check-liste input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--emeraude); flex-shrink: 0; cursor: pointer; }
.checklist-titre { font-weight: 700; color: var(--marine); margin: 0 0 10px; }
.checklist-barre { height: 10px; border-radius: 100px; background: rgba(22,36,61,.10); overflow: hidden; }
.checklist-barre > span { display: block; height: 100%; width: 0; background: var(--emeraude); border-radius: 100px; transition: width .3s ease; }
.checklist-etat { margin: 8px 0 0; font-weight: 700; color: var(--marine); font-size: .92rem; }

/* Sources en fin d'article */
.sources { margin: 2.4em 0 0; padding-top: 1.4em; border-top: 1px solid var(--bordure); font-size: .88rem; color: var(--texte-doux); }
.sources a { color: var(--texte-doux); text-decoration: underline; }
.sources a:hover { color: var(--bleu); }

/* Chiffres clés (cartes) */
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 2em 0; }
.chiffre-carte { background: var(--marine); color: var(--blanc); border-radius: 8px; padding: 20px 18px; text-align: center; }
.chiffre-valeur { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 700; color: #7FE6C4; line-height: 1.1; }
.chiffre-desc { display: block; font-size: .86rem; color: var(--texte-clair); margin-top: .4em; }

/* Graphique à barres simplifié */
.graphique { margin: 2em 0; padding: 20px 22px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond-clair); }
.graphique-titre { font-size: 1.05rem; margin: 0 0 .2em; color: var(--marine); }
.graphique-soustitre { font-size: .86rem; color: var(--texte-doux); margin: 0 0 1.2em; }
.graphique-barres { display: flex; flex-direction: column; gap: 12px; }
.gb-ligne { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: 10px; }
.gb-label { font-size: .88rem; color: var(--texte); }
.gb-piste { height: 12px; border-radius: 100px; background: rgba(22,36,61,.08); overflow: hidden; }
.gb-rempli { display: block; height: 100%; border-radius: 100px; background: var(--bleu); }
.gb-vert .gb-rempli, .gb-rempli.gb-vert { background: var(--emeraude); }
.gb-ambre .gb-rempli, .gb-rempli.gb-ambre { background: var(--ambre); }
.graphique-source { font-size: .78rem; color: var(--texte-doux); margin: 10px 0 0; }

/* Calendrier (échéances, saisonnalité) */
.calendrier-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 1.6em 0; }
.cal-mois { padding: 14px 10px; text-align: center; border: 1px solid var(--bordure); border-radius: 8px; font-size: .88rem; background: var(--blanc); }
.cal-mois.cal-actif { background: var(--bleu-doux); border-color: var(--bleu); font-weight: 700; color: var(--marine); }
.calendrier-focus { margin: 1.4em 0; padding: 16px 20px; border-radius: 8px; background: var(--fond-clair); border: 1px solid var(--bordure); }
.calendrier-saison, .saison-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0; }
.saison-tag { display: inline-flex; align-items: center; padding: .35em .85em; border-radius: 999px; background: var(--emeraude-doux); color: #0B7A5D; font-size: .82rem; font-weight: 600; }

/* Conservation / durées de rétention (documents, contrats...) */
.conservation { margin: 1.6em 0; }
.conservation-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.conservation-liste li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.conservation-duree { font-weight: 700; color: var(--marine); white-space: nowrap; }
.conservation-lieu { color: var(--texte-doux); font-size: .88rem; }
.conservation-barre { height: 8px; border-radius: 100px; background: rgba(22,36,61,.08); overflow: hidden; margin-top: 6px; }

/* Petits calculateurs (portions, IMC...) */
.calc-portion, .calc-imc { background: var(--fond-clair); border: 1px solid var(--bordure); border-radius: 8px; padding: 22px; margin: 1.8em 0; }
.calc-portion-intro, .calc-imc-intro { font-size: .9rem; color: var(--texte-doux); margin: 0 0 1em; }
.calc-portion-champ, .calc-imc-champs { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.calc-portion-poids, .calc-portion-case { padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 6px; font-size: 1rem; }
.calc-portion-sortie, .calc-imc-resultat { margin-top: 14px; padding: 14px 16px; background: var(--marine); color: var(--blanc); border-radius: 6px; font-weight: 700; }
.calc-imc-note { font-size: .82rem; color: var(--texte-doux); margin-top: .8em; }

/* Anti-scraping e-mail (référence réseau) */
.courriel-protege { unicode-bidi: bidi-override; direction: rtl; white-space: nowrap; }

/* =========================================================================
   Aside colonne d'article
   ========================================================================= */
.colonne-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.bloc-aside { background: var(--fond-clair); border: 1px solid var(--bordure); border-radius: 10px; padding: 20px; }
.bloc-aside-titre { font-size: 1.02rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.bloc-aside-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bloc-aside-liste a { display: grid; grid-template-columns: 68px 1fr; gap: 12px; align-items: center; color: var(--marine); }
.bloc-aside-liste img { width: 68px; height: 50px; object-fit: cover; border-radius: 6px; }
.bloc-aside-liste span { font-size: .9rem; line-height: 1.35; font-weight: 600; }
.bloc-aside-liste a:hover span { color: var(--bleu); }
.bloc-aside-rubriques { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bloc-aside-rubriques a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--texte); font-size: .94rem; font-weight: 600; border-bottom: 1px solid var(--bordure); }
.bloc-aside-rubriques li:last-child a { border-bottom: 0; }
.bloc-aside-rubriques a:hover { color: var(--bleu); }
.bloc-aside-rubriques .puce { width: 9px; height: 9px; border-radius: 50%; background: var(--ton, var(--bleu)); flex-shrink: 0; }
.bloc-aside-rubriques em { margin-left: auto; font-style: normal; font-size: .82rem; color: var(--texte-doux); }

/* Encart auteur */
.bloc-auteur { display: flex; gap: 16px; align-items: flex-start; margin: 2.4em 0 0; padding: 20px; background: var(--fond-clair); border: 1px solid var(--bordure); border-radius: 10px; }
.bloc-auteur-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bloc-auteur-texte { display: flex; flex-direction: column; gap: 2px; }
.bloc-auteur-nom { font-weight: 700; color: var(--marine); }
.bloc-auteur-role { font-size: .86rem; color: var(--texte-doux); }
.bloc-auteur-bio { margin: 8px 0 0; font-size: .92rem; color: var(--texte-doux); }

.derniers--lies { background: var(--fond-clair); border-top: 1px solid var(--bordure); }

/* =========================================================================
   Archives (blog, rubriques, recherche)
   ========================================================================= */
.entete-page { background: var(--fond-clair); border-bottom: 1px solid var(--bordure); }
.entete-page-int { max-width: var(--large); margin-inline: auto; padding: 44px 22px; }
.entete-page-int h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .25em; }
.entete-page-int p { color: var(--texte-doux); margin: 0; font-size: 1.02rem; }

.entete-page--rubrique { background: var(--marine); border-bottom: 0; position: relative; overflow: hidden; }
.entete-page--rubrique::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 260px at 90% 0%, color-mix(in srgb, var(--ton, var(--bleu)) 32%, transparent), transparent 60%); }
.entete-page--rubrique .entete-page-int { position: relative; }
.entete-page--rubrique h1 { color: var(--blanc); }
.entete-page--rubrique p { color: var(--texte-clair); }
.entete-page-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ton, var(--emeraude)); margin-bottom: 12px; }

.zone-liste { max-width: var(--large); margin-inline: auto; padding: 46px 22px 70px; }
.message-vide { color: var(--texte-doux); text-align: center; padding: 40px 0; }

.recherche-bloc { display: flex; gap: 12px; margin-top: 18px; max-width: 560px; }
.recherche-bloc input { flex: 1; padding: .8em 1em; border: 1px solid var(--bordure); border-radius: 6px; font-size: 1rem; }
.recherche-compte { color: var(--texte-doux); margin: 0; }

/* Grille rubriques (pavés) */
.grille-paves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pave-rubrique {
  display: flex; flex-direction: column; gap: 8px; padding: 28px 24px;
  background: var(--blanc); border: 1px solid var(--bordure); border-top: 3px solid var(--ton, var(--bleu));
  border-radius: 10px; color: var(--marine); transition: box-shadow .2s, transform .2s;
}
.pave-rubrique:hover { box-shadow: var(--ombre); transform: translateY(-3px); color: var(--marine); }
.pave-rubrique-pastille { width: 30px; height: 30px; border-radius: 50%; background: var(--ton, var(--bleu)); opacity: .9; }
.pave-rubrique h2 { font-size: 1.32rem; margin: 4px 0 0; }
.pave-rubrique-accroche { color: var(--texte-doux); font-size: .92rem; line-height: 1.45; }
.pave-rubrique-nb { font-size: .84rem; font-weight: 700; color: var(--ton, var(--bleu)); }
.pave-rubrique-dernier { font-size: .86rem; color: var(--texte-doux); line-height: 1.4; }

/* =========================================================================
   Pages statiques / contact
   ========================================================================= */
.page-editoriale { max-width: var(--etroit); margin-inline: auto; padding: 26px 22px 70px; }
.page-editoriale-entete { margin-bottom: 28px; }
.page-editoriale-entete h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.page-editoriale-entete p { color: var(--texte-doux); font-size: 1.06rem; margin: 0; }

.formulaire-contact { display: flex; flex-direction: column; gap: 18px; }
.formulaire-contact label { display: flex; flex-direction: column; gap: 7px; font-weight: 700; font-size: .92rem; color: var(--marine); }
.formulaire-contact input, .formulaire-contact textarea { padding: .75em 1em; border: 1px solid var(--bordure); border-radius: 6px; font-size: 1rem; font-family: var(--texte-police); background: var(--blanc); }
.formulaire-contact input:focus, .formulaire-contact textarea:focus { border-color: var(--bleu); outline: none; }
.formulaire-contact .btn-pilote { align-self: flex-start; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-ok { background: var(--emeraude-doux); border: 1px solid rgba(15,157,119,.35); color: #0B7A5D; padding: 18px 22px; border-radius: 8px; margin-bottom: 20px; }
.message-erreur { background: var(--alerte-doux); border: 1px solid rgba(178,58,72,.3); color: #8C2C38; padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; }

/* =========================================================================
   Pagination
   ========================================================================= */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.page-lien { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--bordure); border-radius: 6px; color: var(--texte); font-weight: 700; font-size: .92rem; background: var(--blanc); }
.page-lien:hover { border-color: var(--bleu); color: var(--bleu); }
.page-actuelle { background: var(--marine); border-color: var(--marine); color: var(--blanc); }
.page-actuelle:hover { color: var(--blanc); }
.page-ellipse { display: grid; place-items: center; min-width: 30px; height: 44px; color: var(--texte-doux); }

/* =========================================================================
   404 / 410
   ========================================================================= */
.zone-404 { padding: 90px 22px; text-align: center; }
.zone-404-int { max-width: 560px; margin-inline: auto; }
.code-404 { display: block; font-family: var(--titre); font-weight: 800; font-size: 5.6rem; line-height: 1; color: var(--bleu); margin-bottom: 12px; }
.zone-404 h1 { font-size: 1.85rem; margin-bottom: 12px; }
.zone-404 p { color: var(--texte-doux); margin-bottom: 28px; }
.zone-404-suggestions { margin-top: 44px; }
.zone-404-suggestions h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-doux); margin-bottom: 14px; }
.zone-404-suggestions ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.zone-404-suggestions a { color: var(--bleu); text-decoration: underline; }

/* =========================================================================
   Pied
   ========================================================================= */
.pied { background: var(--marine); color: var(--texte-clair); }
.pied-int { max-width: var(--large); margin-inline: auto; padding: 60px 22px 36px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.pied-logo { display: block; margin-bottom: 16px; }
.pied-resume { margin: 0; font-size: .94rem; max-width: 340px; line-height: 1.6; }
.pied-titre { color: var(--blanc); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.pied-bloc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pied-bloc a { color: var(--texte-clair); font-size: .94rem; }
.pied-bloc a:hover { color: var(--blanc); }
.pied-bas { border-top: 1px solid rgba(255,255,255,.1); }
.pied-bas p { max-width: var(--large); margin-inline: auto; padding: 20px 22px; font-size: .84rem; color: rgba(255,255,255,.55); }
.pied-bas { display: flex; flex-wrap: wrap; }
.pied-bas p { display: flex; gap: 18px; flex: 1; justify-content: space-between; flex-wrap: wrap; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .pied-int { grid-template-columns: 1fr 1fr 1fr; }
  .pied-presentation { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav-pilotage {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--marine); padding: 8px 22px 18px; border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-pilotage.ouvert { display: flex; }
  .nav-pilotage a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-pilotage a::after { display: none; }
  .declic { display: block; }
  .entete { position: relative; }
}
@media (max-width: 920px) {
  .une-grille { grid-template-columns: 1fr; gap: 36px; }
  .dossier-mise-en-page { grid-template-columns: 1fr; gap: 40px; }
  .colonne-aside { position: static; }
  .grille-dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-paves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deux-colonnes-int { grid-template-columns: 1fr; gap: 40px; }
  .bandeau-atouts-int { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparatif { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .entete-actions .btn-entete { display: none; }
  .tribune-int { padding: 64px 22px 60px; }
  .rang-titre { flex-direction: column; align-items: flex-start; gap: 6px; }
  .une-ligne { grid-template-columns: 84px 1fr; }
  .recherche-bloc, .barre-recherche { flex-direction: column; }
  .dossier-texte .alignleft, .dossier-texte .alignright { float: none; margin: 1em auto; max-width: 100%; }
  .pied-bas p { flex-direction: column; gap: 6px; }
}
@media (max-width: 560px) {
  .grille-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeau-atouts-int { grid-template-columns: 1fr; }
  .gb-ligne { grid-template-columns: 100px 1fr 40px; }
}
@media (max-width: 460px) {
  .grille-dossiers, .grille-paves { grid-template-columns: 1fr; }
  .pied-int { grid-template-columns: 1fr; }
}
.alignnone, .size-full { max-width: 100%; height: auto; }