/* ==========================================================================
   Manchette — feuille de style du theme sur mesure de lydexperience.fr
   Direction : quotidien economique. Papier, filets, didone, or du logo.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */

:root {
  color-scheme: light;

  --fond:          #F6F1E6;
  --fond-creux:    #EFE8D9;
  --surface:       #FFFCF6;
  --texte:         #33261B;
  --texte-doux:    #6B5A47;
  --titre:         #2A1206;
  --bandeau:       #3D1407;
  --sur-bandeau:   #F3EADB;
  --sur-bandeau-doux: #C9B49C;
  --or:            #FFBC3C;
  --or-lisible:    #8A5504;
  --sur-or:        #3D1407;
  --or-voile:      rgba(255, 188, 60, .22);
  --or-cadre:      rgba(255, 188, 60, .35);
  --filet:         #DFD4C0;
  --filet-fort:    #C3B398;

  --r-entreprises: #471809;
  --r-finance:     #14503C;
  --r-immobilier:  #9A3B18;
  --r-emploi:      #243F63;
  --r-marketing:   #7A4B12;

  --f-display:   "Bodoni Moda", "Didot", "Times New Roman", Georgia, serif;
  --f-lecture:   "Spectral", Georgia, "Times New Roman", serif;
  --f-etiquette: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --largeur:   1200px;
  --gouttiere: 34px;
  --colonne-lecture: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond:          #15100A;
    --fond-creux:    #1B150E;
    --surface:       #1E1710;
    --texte:         #DCD1BF;
    --texte-doux:    #9E8F79;
    --titre:         #F4ECDD;
    --bandeau:       #0F0B07;
    --sur-bandeau:   #EFE5D4;
    --sur-bandeau-doux: #A08F77;
    --or:            #FFC65C;
    --or-lisible:    #FFC65C;
    --sur-or:        #2A1206;
    --or-voile:      rgba(255, 198, 92, .20);
    --or-cadre:      rgba(255, 198, 92, .35);
    --filet:         #352B1E;
    --filet-fort:    #4E3F2C;

    --r-entreprises: #E0A87F;
    --r-finance:     #6FBF9E;
    --r-immobilier:  #EE8055;
    --r-emploi:      #86AEDD;
    --r-marketing:   #DDAF5A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fond:          #15100A;
  --fond-creux:    #1B150E;
  --surface:       #1E1710;
  --texte:         #DCD1BF;
  --texte-doux:    #9E8F79;
  --titre:         #F4ECDD;
  --bandeau:       #0F0B07;
  --sur-bandeau:   #EFE5D4;
  --sur-bandeau-doux: #A08F77;
  --or:            #FFC65C;
  --or-lisible:    #FFC65C;
  --sur-or:        #2A1206;
  --or-voile:      rgba(255, 198, 92, .20);
  --or-cadre:      rgba(255, 198, 92, .35);
  --filet:         #352B1E;
  --filet-fort:    #4E3F2C;

  --r-entreprises: #E0A87F;
  --r-finance:     #6FBF9E;
  --r-immobilier:  #EE8055;
  --r-emploi:      #86AEDD;
  --r-marketing:   #DDAF5A;
}

/* --- 2. Socle ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-lecture);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--or-lisible);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

.enveloppe {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.etiquette {
  font-family: var(--f-etiquette);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.rubrique {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--teinte, var(--or-lisible));
}
.rubrique::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: currentColor;
  flex: none;
}

.r-entreprises { --teinte: var(--r-entreprises); }
.r-finance     { --teinte: var(--r-finance); }
.r-immobilier  { --teinte: var(--r-immobilier); }
.r-emploi      { --teinte: var(--r-emploi); }
.r-marketing   { --teinte: var(--r-marketing); }

.meta {
  font-family: var(--f-etiquette);
  font-size: 0.775rem;
  color: var(--texte-doux);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.meta > * + *::before {
  content: "·";
  margin: 0 0.55em;
  color: var(--filet-fort);
}

/* --- 3. Bandeau de service ----------------------------------------------- */

.service {
  background: var(--bandeau);
  color: var(--sur-bandeau-doux);
  font-family: var(--f-etiquette);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.service .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.4rem;
  flex-wrap: wrap;
}
.service b { color: var(--or); font-weight: 600; letter-spacing: 0.09em; }
.service .devise { color: var(--sur-bandeau); letter-spacing: 0.12em; }

/* --- 4. Manchette -------------------------------------------------------- */

.manchette {
  background: var(--fond);
  border-bottom: 1px solid var(--filet);
}
.manchette .enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.6rem 1.35rem;
  flex-wrap: wrap;
}
.manchette img { width: min(298px, 62vw); }
.manchette .accroche {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--texte-doux);
  max-width: 20rem;
  line-height: 1.45;
  text-align: right;
}

.rail {
  background: var(--fond);
  border-bottom: 3px solid var(--bandeau);
  position: sticky;
  top: 0;
  z-index: 30;
}
.rail::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--or);
}
.rail .enveloppe {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
}
.rail nav {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.9rem;
}
.rail nav a {
  font-family: var(--f-etiquette);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.95rem 0.9rem;
  color: var(--titre);
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: color .15s, border-color .15s;
}
.rail nav a:hover,
.rail nav a[aria-current] { color: var(--or-lisible); border-bottom-color: var(--or); }

.rail form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 1px solid var(--filet);
  padding-left: 1rem;
  margin-block: 0.5rem;
}
.rail input {
  border: 0;
  background: transparent;
  font-family: var(--f-lecture);
  font-size: 0.92rem;
  color: var(--texte);
  width: 12.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--filet-fort);
}
.rail input::placeholder { color: var(--texte-doux); font-style: italic; }
.rail button {
  border: 0;
  background: var(--or);
  color: var(--sur-or);
  font-family: var(--f-etiquette);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

/* --- 5. La une ----------------------------------------------------------- */

.une {
  display: grid;
  grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr);
  gap: 0 2.6rem;
  padding-block: 2.6rem 3rem;
  align-items: start;
}
.une > .fil { border-left: 1px solid var(--filet); padding-left: 2.6rem; }

.vedette figure { margin: 0 0 1.35rem; }
.vedette img { aspect-ratio: 1.9; object-fit: cover; width: 100%; }
.vedette .rubrique { margin-bottom: 0.7rem; }
.vedette h2 {
  font-size: calc(clamp(1.85rem, 3.1vw, 2.45rem) * var(--titre-facteur, 1));
  letter-spacing: -0.012em;
  margin-bottom: 0.75rem;
}
.vedette h2 a { background-image: linear-gradient(var(--or), var(--or)); background-size: 0 3px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s; }
.vedette h2 a:hover { background-size: 100% 3px; }
.vedette .chapo {
  font-size: 1.19rem;
  line-height: 1.6;
  color: var(--texte);
  max-width: 34rem;
  margin: 0 0 1rem;
}

.fil > h3 {
  font-family: var(--f-etiquette);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--titre);
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--bandeau);
  margin-bottom: 0.2rem;
}
.fil ol { list-style: none; margin: 0; padding: 0; counter-reset: fil; }
.fil li { counter-increment: fil; border-bottom: 1px solid var(--filet); padding: 0.95rem 0; display: grid;
  grid-template-columns: 2.1rem 1fr; gap: 0.55rem; align-items: baseline; }
.fil li::before {
  content: counter(fil, decimal-leading-zero);
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--or);
  line-height: 1;
}
.fil li:last-child { border-bottom: 0; }
.fil li .titre {
  font-family: var(--f-lecture);
  font-weight: 600;
  font-size: 1.005rem;
  line-height: 1.38;
  color: var(--titre);
  display: block;
}
.fil li a:hover .titre { color: var(--or-lisible); }
.fil li .meta { display: block; margin-top: 0.3rem; font-size: 0.72rem; }

/* --- 6. Les questions ---------------------------------------------------- */

.questions {
  background: var(--fond-creux);
  border-block: 1px solid var(--filet);
  padding-block: 2.5rem 2.7rem;
}
.questions header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.questions header h2 { font-size: 1.75rem; }
.questions header p {
  margin: 0;
  font-style: italic;
  color: var(--texte-doux);
  max-width: 27rem;
  font-size: 0.97rem;
}
.questions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.6rem;
}
.questions li { border-top: 1px solid var(--filet); }
.questions a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.7rem;
  align-items: start;
  padding: 0.85rem 0;
}
.questions a::before {
  content: "?";
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 0.95;
  color: var(--or);
}
.questions .titre { font-weight: 600; line-height: 1.4; color: var(--titre); font-size: 1.0rem; }
.questions a:hover .titre { color: var(--or-lisible); }

/* --- 7. Blocs de rubrique ------------------------------------------------ */

.bloc { padding-block: 2.7rem; border-bottom: 1px solid var(--filet); }
.bloc:last-of-type { border-bottom: 0; }

.tete-bloc {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-bottom: 3px solid var(--bandeau);
  padding-bottom: 0.6rem;
  margin-bottom: 1.7rem;
}
.tete-bloc h2 { font-size: calc(1.55rem * var(--titre-facteur, 1)); letter-spacing: -0.01em; }
.tete-bloc h2 .puce {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--teinte, var(--or));
  margin-right: 0.6rem;
  vertical-align: 0.12em;
}
.tete-bloc .compte { font-family: var(--f-etiquette); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--texte-doux); }
.tete-bloc .tout { margin-left: auto; font-family: var(--f-etiquette); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--or-lisible);
  border-bottom: 1px solid var(--or); padding-bottom: 2px; }

.duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.6rem; }
.duo .liste { display: flex; flex-direction: column; }

.carte { position: relative; }
.carte figure { margin: 0 0 0.95rem; overflow: hidden; }
.carte img { aspect-ratio: 1.9; object-fit: cover; width: 100%; transition: transform .5s ease; }
.carte:hover img { transform: scale(1.03); }
.carte h3 { font-size: calc(1.34rem * var(--titre-facteur, 1)); margin: 0.55rem 0 0.5rem; letter-spacing: -0.008em; }
.carte p { margin: 0 0 0.7rem; color: var(--texte-doux); font-size: 0.99rem; line-height: 1.55; }
.carte:hover h3 { color: var(--or-lisible); }

.mini { position: relative; display: grid; grid-template-columns: 7.6rem 1fr; gap: 1.1rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--filet); align-items: start; }
.mini figure { margin: 0; }
.mini:first-child { padding-top: 0; }
.mini:last-child { border-bottom: 0; }
.mini img { aspect-ratio: 1.4; object-fit: cover; width: 100%; }
.mini h4 { font-family: var(--f-lecture); font-weight: 600; font-size: 1.02rem; line-height: 1.4;
  color: var(--titre); margin: 0.3rem 0 0.35rem; }
.mini:hover h4 { color: var(--or-lisible); }

.lien-etendu::after { content: ""; position: absolute; inset: 0; }
.lien-etendu:focus-visible { outline-offset: 4px; }

/* --- 8. Reperes et lettre ------------------------------------------------ */

.maison {
  background: var(--bandeau);
  color: var(--sur-bandeau);
  padding-block: 3rem 3.2rem;
}
.maison .enveloppe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.4rem; }
.maison h2 { color: var(--sur-bandeau); font-size: 1.9rem; margin-bottom: 0.9rem; }
.maison h2 em { color: var(--or); font-style: italic; }
.maison p { color: var(--sur-bandeau-doux); margin: 0 0 1rem; max-width: 36rem; }
.reperes { display: flex; gap: 2.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.repere strong {
  display: block;
  font-family: var(--f-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}
.repere span { font-family: var(--f-etiquette); font-size: 0.68rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--sur-bandeau-doux); display: block; margin-top: 0.45rem; }

.lettre { border: 1px solid var(--or-cadre); padding: 1.7rem 1.6rem; align-self: start; }
.lettre .etiquette { color: var(--or); display: block; margin-bottom: 0.7rem; }
.lettre h3 { color: var(--sur-bandeau); font-size: 1.32rem; margin-bottom: 0.6rem; }
.lettre p { font-size: 0.93rem; }
.lettre form { display: flex; gap: 0; margin-top: 1rem; }
.lettre input {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.2); border-right: 0;
  background: rgba(255,255,255,.05); color: var(--sur-bandeau);
  font-family: var(--f-lecture); font-size: 0.95rem; padding: 0.65rem 0.8rem;
}
.lettre input::placeholder { color: var(--sur-bandeau-doux); }
.lettre button {
  border: 0; background: var(--or); color: var(--sur-or); cursor: pointer;
  font-family: var(--f-etiquette); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0 1.1rem;
}

/* --- 9. Pied ------------------------------------------------------------- */

.pied { background: var(--bandeau); color: var(--sur-bandeau-doux); padding-block: 2.8rem 1.6rem;
  border-top: 3px solid var(--or); font-size: 0.93rem; }
.pied .colonnes { display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2.7fr));
  gap: 2.4rem; }
.pied img { width: 210px; margin-bottom: 1rem; }
.pied h4 { color: var(--or); font-family: var(--f-etiquette); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 0.28rem 0; }
.pied a:hover { color: var(--or); }
.pied .bas { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.2rem; padding-top: 1.1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--f-etiquette); font-size: 0.72rem; letter-spacing: 0.06em; }

/* --- 10. Article --------------------------------------------------------- */

.jauge { position: fixed; top: 0; left: 0; height: 3px; background: var(--or); width: 0; z-index: 60; }

.ariane { font-family: var(--f-etiquette); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--texte-doux); padding-block: 1.3rem 0; }
.ariane a:hover { color: var(--or-lisible); }
.ariane span { margin: 0 0.45em; color: var(--filet-fort); }

.article { padding-bottom: 3rem; }
.article > header { max-width: var(--colonne-lecture); margin: 1.6rem auto 0; text-align: left; }
.article h1 { font-size: calc(clamp(1.8rem, 3.3vw, 2.4rem) * var(--titre-facteur, 1)); letter-spacing: -0.014em; margin-bottom: 0.9rem; }
.article .chapo { font-family: var(--f-lecture); font-size: 1.19rem; line-height: 1.6;
  color: var(--texte-doux); font-style: italic; margin: 0 0 1.2rem; }
.article > header .rubrique { margin-bottom: 0.85rem; }
.signature { display: flex; align-items: center; gap: 0.8rem; border-block: 1px solid var(--filet);
  padding-block: 0.75rem; }

.illustration { margin: 2rem auto 0; max-width: 62rem; }
.illustration img { width: 100%; aspect-ratio: 1.9; object-fit: cover; }
.illustration figcaption { font-family: var(--f-etiquette); font-size: 0.72rem; color: var(--texte-doux);
  padding-top: 0.6rem; border-bottom: 1px solid var(--filet); padding-bottom: 0.7rem; }

.corps { max-width: var(--colonne-lecture); margin: 2.2rem auto 0; font-size: 1.1875rem; line-height: 1.75; }
.corps p { margin: 0 0 1.35rem; }
.corps h2 { font-size: calc(1.62rem * var(--titre-facteur, 1)); margin: 2.7rem 0 0.9rem; padding-top: 1.15rem;
  border-top: 1px solid var(--filet); position: relative; }
.corps h2::before { content: ""; position: absolute; top: -2px; left: 0;
  width: 2.6rem; height: 3px; background: var(--or); }
.corps h3 { font-family: var(--f-lecture); font-weight: 600; font-size: 1.24rem; margin: 1.9rem 0 0.6rem;
  color: var(--titre); }
.corps a { color: var(--or-lisible); border-bottom: 1px solid var(--or); }
.corps a:hover { background: var(--or-voile); }
.corps ul, .corps ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
.corps li { margin-bottom: 0.5rem; }
.corps blockquote { margin: 1.8rem 0; padding-left: 1.4rem; border-left: 3px solid var(--or);
  font-family: var(--f-display); font-size: 1.35rem; font-style: italic; line-height: 1.4; color: var(--titre); }

.sommaire { max-width: var(--colonne-lecture); margin: 2.2rem auto 0; background: var(--surface);
  border: 1px solid var(--filet); border-top: 3px solid var(--bandeau); padding: 1.35rem 1.5rem 1.15rem; }
.sommaire h2 { font-family: var(--f-etiquette); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 0.8rem; }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: som; }
.sommaire li { counter-increment: som; border-top: 1px solid var(--filet); }
.sommaire li:first-child { border-top: 0; }
.sommaire a { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.4rem; padding: 0.5rem 0;
  font-size: 1rem; line-height: 1.4; }
.sommaire a::before { content: counter(som) "."; font-family: var(--f-etiquette); font-size: 0.8rem;
  color: var(--or-lisible); font-weight: 600; }
.sommaire a:hover { color: var(--or-lisible); }

.partage { max-width: var(--colonne-lecture); margin: 2.4rem auto 0; border-top: 1px solid var(--filet);
  padding-top: 1.1rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.partage .etiquette { color: var(--texte-doux); margin-right: 0.3rem; }
.partage a { border: 1px solid var(--filet-fort); padding: 0.4rem 0.85rem; font-family: var(--f-etiquette);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--titre); }
.partage a:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); }

/* --- 11. Archive de rubrique --------------------------------------------- */

.tete-rubrique { border-bottom: 3px solid var(--bandeau); padding-block: 2.4rem 1.2rem;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.6rem; align-items: end; }
.tete-rubrique h1 { font-size: calc(clamp(2rem, 3.6vw, 2.6rem) * var(--titre-facteur, 1)); letter-spacing: -0.015em; }
.tete-rubrique h1 .puce { display: inline-block; width: 0.68rem; height: 0.68rem;
  background: var(--teinte, var(--or)); margin-right: 0.7rem; vertical-align: 0.16em; }
.tete-rubrique p { margin: 0.6rem 0 0; color: var(--texte-doux); font-size: 1.05rem; max-width: 32rem; }
.tete-rubrique .compte { font-family: var(--f-etiquette); font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--texte-doux); text-align: right; }

.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 2.4rem 2.6rem; padding-block: 2.4rem 3rem; }

.pagination { display: flex; gap: 0.4rem; justify-content: center; padding-bottom: 3.4rem; }
.pagination a, .pagination span { font-family: var(--f-etiquette); font-size: 0.8rem; font-weight: 600;
  padding: 0.5rem 0.85rem; border: 1px solid var(--filet); color: var(--titre); }
.pagination .actuel { background: var(--bandeau); border-color: var(--bandeau); color: var(--sur-bandeau); }
.pagination a:hover { border-color: var(--or); color: var(--or-lisible); }

/* --- 12. A lire aussi ---------------------------------------------------- */

.aussi { background: var(--fond-creux); border-top: 1px solid var(--filet); padding-block: 2.6rem 3rem; }
.aussi > .enveloppe > h2 { font-size: 1.55rem; border-bottom: 3px solid var(--bandeau);
  padding-bottom: 0.6rem; margin-bottom: 1.6rem; }
.aussi .trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2.4rem; }

/* --- 13. Adaptations ----------------------------------------------------- */

@media (max-width: 980px) {
  .une, .maison .enveloppe, .duo, .tete-rubrique { grid-template-columns: 1fr; gap: 2.2rem; }
  .questions ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .questions li:nth-child(odd):last-child { display: none; }
  .une > .fil { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 1.6rem; }
  .tete-rubrique .compte { text-align: left; }
  .pied .colonnes { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gouttiere: 20px; }
  .questions ul { grid-template-columns: minmax(0, 1fr); }
  .questions li:nth-child(odd):last-child { display: list-item; }
  .manchette .enveloppe { padding-block: 1.15rem 1rem; }
  .manchette .accroche { display: none; }
  .rail .enveloppe { flex-direction: column; }
  .rail nav { overflow-x: auto; margin-inline: -0.9rem; }
  .rail nav ul.rubriques, .rail nav ul.menu { flex-wrap: nowrap; }
  .rail nav li { flex: none; }
  .rail nav a { white-space: nowrap; }
  .rail nav::-webkit-scrollbar { height: 2px; }
  .rail nav::-webkit-scrollbar-thumb { background: var(--filet-fort); }
  .rail form { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 0.6rem; }
  .rail input { width: 100%; }
  .corps { font-size: 1.125rem; }
  .service .devise { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   14. Raccords WordPress
   ========================================================================== */

.ecran-lecteur, .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap;
}
.ecran-lecteur:focus, .screen-reader-text:focus {
  position: fixed !important;
  top: 0.5rem; left: 0.5rem;
  width: auto; height: auto; clip: auto; clip-path: none;
  background: var(--or); color: var(--sur-or);
  font-family: var(--f-etiquette); font-size: 0.8rem; font-weight: 700;
  padding: 0.6rem 1rem; z-index: 200;
}

/* Alignements et medias inseres dans le contenu */
.corps .alignleft  { float: left;  margin: 0.4rem 1.6rem 1rem 0; max-width: 50%; }
.corps .alignright { float: right; margin: 0.4rem 0 1rem 1.6rem; max-width: 50%; }
.corps .aligncenter { margin-inline: auto; }
.corps .alignwide { width: min(62rem, 92vw); max-width: none;
  margin-inline: calc((var(--colonne-lecture) - min(62rem, 92vw)) / 2); }
.corps figure { margin: 1.9rem 0; }
.corps figcaption, .corps .wp-caption-text {
  font-family: var(--f-etiquette);
  font-size: 0.76rem;
  color: var(--texte-doux);
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.6rem;
}
.corps .wp-block-image img { width: 100%; }
.corps iframe, .corps video, .corps embed, .corps object { max-width: 100%; }
.corps table { width: 100%; border-collapse: collapse; font-size: 0.98rem; margin-bottom: 1.5rem; }
.corps table th, .corps table td { border: 1px solid var(--filet); padding: 0.55rem 0.7rem; text-align: left; }
.corps table th { background: var(--fond-creux); font-family: var(--f-etiquette); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; }
.corps .tableau-defilant { overflow-x: auto; margin-bottom: 1.5rem; }
.corps .tableau-defilant table { margin-bottom: 0; }
.corps code, .corps kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
  background: var(--fond-creux); padding: 0.1em 0.35em; }
.corps pre { overflow-x: auto; background: var(--fond-creux); border-left: 3px solid var(--or);
  padding: 1rem 1.1rem; font-size: 0.92rem; }
.corps hr { border: 0; border-top: 1px solid var(--filet); margin: 2.4rem 0; }
.corps .wp-block-button__link, .corps .bouton {
  display: inline-block; background: var(--bandeau); color: var(--sur-bandeau);
  font-family: var(--f-etiquette); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1.4rem; border: 0;
}
.corps .wp-block-button__link:hover, .corps .bouton:hover { background: var(--or); color: var(--sur-or); }

/* Page ordinaire : meme colonne de lecture que les articles */
.page-libre { padding-block: 1.6rem 3rem; }
.page-libre > header { max-width: var(--colonne-lecture); margin: 0 auto 1.8rem; }
.page-libre h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.014em; }
.page-libre h1::after { content: ""; display: block; width: 3rem; height: 3px;
  background: var(--or); margin-top: 1rem; }

/* Page construite au constructeur de blocs : pleine largeur */
.page-blocs .corps { max-width: none; }

/* Navigation d'article a article */
.suite { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--filet);
  border-block: 1px solid var(--filet); margin-top: 2.8rem; }
.suite a { background: var(--fond); padding: 1.3rem 1.5rem; display: block; }
.suite a:hover { background: var(--surface); }
.suite .sens { font-family: var(--f-etiquette); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-lisible); display: block;
  margin-bottom: 0.5rem; }
.suite .titre { font-family: var(--f-display); font-size: 1.2rem; color: var(--titre); line-height: 1.2;
  display: block; }
.suite .apres { text-align: right; }

/* Commentaires */
.echanges { max-width: var(--colonne-lecture); margin: 3rem auto 0; }
.echanges > h2 { font-size: 1.5rem; border-bottom: 3px solid var(--bandeau); padding-bottom: 0.6rem;
  margin-bottom: 1.4rem; }
.echanges ol { list-style: none; margin: 0 0 2rem; padding: 0; }
.echanges ol ol { margin: 1rem 0 0 1.6rem; border-left: 1px solid var(--filet); padding-left: 1.2rem; }
.echanges .comment-body { border-bottom: 1px solid var(--filet); padding: 1.1rem 0; }
.echanges .comment-author { display: flex; align-items: center; gap: 0.7rem; font-family: var(--f-etiquette);
  font-size: 0.82rem; font-weight: 600; color: var(--titre); }
.echanges .comment-author img { border-radius: 50%; }
.echanges .comment-metadata { font-family: var(--f-etiquette); font-size: 0.72rem; color: var(--texte-doux);
  margin: 0.25rem 0 0.6rem; }
.echanges .reply { font-family: var(--f-etiquette); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; }
.echanges .reply a { color: var(--or-lisible); border-bottom: 1px solid var(--or); }
.echanges .comment-form { display: grid; gap: 0.9rem; }
.echanges .comment-form p { margin: 0; }
.echanges label { font-family: var(--f-etiquette); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); display: block;
  margin-bottom: 0.35rem; }
.echanges input[type="text"], .echanges input[type="email"], .echanges input[type="url"],
.echanges textarea {
  width: 100%; border: 1px solid var(--filet-fort); background: var(--surface); color: var(--texte);
  font-family: var(--f-lecture); font-size: 1rem; padding: 0.6rem 0.75rem;
}
.echanges textarea { min-height: 9rem; }
.echanges .form-submit input {
  background: var(--bandeau); color: var(--sur-bandeau); border: 0; cursor: pointer;
  font-family: var(--f-etiquette); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.8rem 1.5rem;
}
.echanges .form-submit input:hover { background: var(--or); color: var(--sur-or); }
.echanges .comment-notes, .echanges .comment-form-cookies-consent label {
  font-family: var(--f-lecture); font-size: 0.9rem; text-transform: none; letter-spacing: 0;
  color: var(--texte-doux);
}

/* Recherche */
.recherche-page { padding-block: 2.4rem 3rem; }
.grande-recherche { max-width: 34rem; margin-top: 1.4rem; display: flex; }
.grande-recherche input[type="search"] {
  flex: 1; min-width: 0; border: 1px solid var(--filet-fort); border-right: 0; background: var(--surface);
  color: var(--texte); font-family: var(--f-lecture); font-size: 1.05rem; padding: 0.8rem 1rem;
}
.grande-recherche button {
  border: 0; background: var(--or); color: var(--sur-or); cursor: pointer; font-family: var(--f-etiquette);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 1.4rem;
}
.rien { max-width: var(--colonne-lecture); padding-block: 1rem 2rem; }
.rien p { color: var(--texte-doux); }

/* 404 */
.perdu { text-align: center; padding-block: 4rem 4.5rem; }
.perdu .code { font-family: var(--f-display); font-size: clamp(4rem, 14vw, 8rem); color: var(--or);
  line-height: 0.9; }
.perdu h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 1rem 0 0.8rem; }
.perdu p { color: var(--texte-doux); max-width: 32rem; margin-inline: auto; }
.perdu .grande-recherche { margin-inline: auto; }

/* Barre d'administration : le rail colle dessous */
body.admin-bar .rail { top: 32px; }
@media (max-width: 782px) { body.admin-bar .rail { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .rail { top: 0; } }

/* ==========================================================================
   15. Elements produits par WordPress
   ========================================================================== */

/* Logo absent : le nom du site tient lieu de manchette */
.nom-site { margin: 0; font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700; color: var(--titre); letter-spacing: -0.015em; line-height: 1; }
.nom-pied { margin: 0 0 1rem; font-family: var(--f-display); font-size: 1.7rem; font-weight: 700;
  color: var(--sur-bandeau); line-height: 1; }
.nom-pied a:hover, .nom-site a:hover { color: var(--or-lisible); }
.nom-pied a:hover { color: var(--or); }

/* Le menu des rubriques sort de WordPress en liste */
.rail nav ul.rubriques, .rail nav ul.menu {
  display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.rail nav li { display: flex; }
.rail nav ul.rubriques a, .rail nav ul.menu a { display: flex; align-items: center; }
.rail nav .current-menu-item > a, .rail nav .current-cat > a {
  color: var(--or-lisible); border-bottom-color: var(--or);
}

/* Article sans image a la une : un aplat de la teinte de sa rubrique */
.sans-image {
  aspect-ratio: 1.9;
  background: var(--teinte, var(--filet-fort));
  opacity: 0.16;
  background-image: linear-gradient(135deg, transparent 46%, rgba(255,255,255,.5) 50%, transparent 54%);
}
.mini .sans-image { aspect-ratio: 1.4; }

/* Presentation sans bloc lettre : une seule colonne */
.maison.sans-lettre .enveloppe { grid-template-columns: minmax(0, 1fr); }
.maison.sans-lettre p { max-width: 46rem; }
.maison .tout { display: inline-block; font-family: var(--f-etiquette); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--or);
  border-bottom: 1px solid var(--or); padding-bottom: 2px; }

/* Listes du pied fabriquees par wp_nav_menu ou wp_list_pages */
.pied .menu, .pied .page_item, .pied ul ul { list-style: none; margin: 0; padding: 0; }
.pied ul ul { margin-left: 0.8rem; }

/* Bouton « copier le lien » : meme allure que les liens de partage */
.partage .copier {
  border: 1px solid var(--filet-fort); background: transparent; cursor: pointer;
  padding: 0.4rem 0.85rem; font-family: var(--f-etiquette); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--titre);
}
.partage .copier:hover { background: var(--or); border-color: var(--or); color: var(--sur-or); }

/* Section suivie dans le sommaire */
.sommaire a[aria-current] { color: var(--or-lisible); }
.sommaire a[aria-current]::before { color: var(--titre); }

/* Pagination des commentaires */
.echanges .comments-pagination { display: flex; gap: 0.4rem; margin-bottom: 2rem; }
.echanges .comments-pagination a, .echanges .comments-pagination .current {
  font-family: var(--f-etiquette); font-size: 0.8rem; padding: 0.35rem 0.7rem;
  border: 1px solid var(--filet);
}

/* Liste de rubriques affichee quand une recherche ne donne rien */
.rien ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rien li a { display: inline-block; border: 1px solid var(--filet-fort); padding: 0.4rem 0.85rem;
  font-family: var(--f-etiquette); font-size: 0.75rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--titre); }
.rien li a:hover { border-color: var(--or); color: var(--or-lisible); }
.rien .etiquette { color: var(--texte-doux); margin: 1.8rem 0 0; }

/* La barre de recherche de l'archive vide */
.rien .grande-recherche { margin-top: 1.2rem; }

/* Le titre du bloc de rubrique est cliquable */
.tete-bloc h2 a:hover { color: var(--or-lisible); }

/* Le logo du site est brun : illisible sur fond sombre. On sert alors la
   variante claire, strictement decorative (le vrai lien reste le custom logo). */
.logo-nuit { display: none; }
.logo-nuit img { width: min(298px, 62vw); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .manchette .custom-logo-link { display: none; }
  :root:not([data-theme="light"]) .logo-nuit { display: block; }
}

:root[data-theme="dark"] .manchette .custom-logo-link { display: none; }
:root[data-theme="dark"] .logo-nuit { display: block; }

/* --- 14. Palettes permutables --------------------------------------------
   Le reglage « Palette » du personnalisateur pose une classe sur <body>.
   Chaque palette redefinit les memes jetons, donc elle repeint tout le site
   sans qu'aucune regle de mise en forme ait a changer.
   ------------------------------------------------------------------------ */

/* Espresso : la palette d origine, le brun du logo */
body.palette-espresso {
  --fond:             #F6F1E6;
  --fond-creux:       #EFE8D9;
  --surface:          #FFFCF6;
  --texte:            #33261B;
  --texte-doux:       #6B5A47;
  --titre:            #2A1206;
  --bandeau:          #3D1407;
  --sur-bandeau:      #F3EADB;
  --sur-bandeau-doux: #C9B49C;
  --or:               #FFBC3C;
  --or-lisible:       #8A5504;
  --sur-or:           #3D1407;
  --or-voile:         rgba(255, 188, 60, .22);
  --or-cadre:         rgba(255, 188, 60, .35);
  --filet:            #DFD4C0;
  --filet-fort:       #C3B398;
  --r-entreprises:    #471809;
  --r-finance:        #14503C;
  --r-immobilier:     #9A3B18;
  --r-emploi:         #243F63;
  --r-marketing:      #7A4B12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.palette-espresso {
    --fond:             #15100A;
    --fond-creux:       #1B150E;
    --surface:          #1E1710;
    --texte:            #DCD1BF;
    --texte-doux:       #9E8F79;
    --titre:            #F4ECDD;
    --bandeau:          #0F0B07;
    --sur-bandeau:      #EFE5D4;
    --sur-bandeau-doux: #A08F77;
    --or:               #FFC65C;
    --or-lisible:       #FFC65C;
    --sur-or:           #2A1206;
    --or-voile:         rgba(255, 198, 92, .20);
    --or-cadre:         rgba(255, 198, 92, .35);
    --filet:            #352B1E;
    --filet-fort:       #4E3F2C;
    --r-entreprises:    #E0A87F;
    --r-finance:        #6FBF9E;
    --r-immobilier:     #EE8055;
    --r-emploi:         #86AEDD;
    --r-marketing:      #DDAF5A;
  }
}

:root[data-theme="dark"] body.palette-espresso {
  --fond:             #15100A;
  --fond-creux:       #1B150E;
  --surface:          #1E1710;
  --texte:            #DCD1BF;
  --texte-doux:       #9E8F79;
  --titre:            #F4ECDD;
  --bandeau:          #0F0B07;
  --sur-bandeau:      #EFE5D4;
  --sur-bandeau-doux: #A08F77;
  --or:               #FFC65C;
  --or-lisible:       #FFC65C;
  --sur-or:           #2A1206;
  --or-voile:         rgba(255, 198, 92, .20);
  --or-cadre:         rgba(255, 198, 92, .35);
  --filet:            #352B1E;
  --filet-fort:       #4E3F2C;
  --r-entreprises:    #E0A87F;
  --r-finance:        #6FBF9E;
  --r-immobilier:     #EE8055;
  --r-emploi:         #86AEDD;
  --r-marketing:      #DDAF5A;
}

/* Encre : neutre chaud, l or reduit a un detail */
body.palette-encre {
  --fond:             #F7F4EE;
  --fond-creux:       #F0ECE3;
  --surface:          #FFFFFF;
  --texte:            #302B25;
  --texte-doux:       #6E675D;
  --titre:            #1D1A16;
  --bandeau:          #26221D;
  --sur-bandeau:      #EEEAE2;
  --sur-bandeau-doux: #A9A197;
  --or:               #E3A72F;
  --or-lisible:       #8A6216;
  --sur-or:           #26221D;
  --or-voile:         rgba(227, 167, 47, .20);
  --or-cadre:         rgba(227, 167, 47, .38);
  --filet:            #E2DCD0;
  --filet-fort:       #CBC3B4;
  --r-entreprises:    #6B4A2E;
  --r-finance:        #2E5B4A;
  --r-immobilier:     #96543A;
  --r-emploi:         #3F5670;
  --r-marketing:      #7C6428;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.palette-encre {
    --fond:             #161512;
    --fond-creux:       #1C1A16;
    --surface:          #201E19;
    --texte:            #D8D2C7;
    --texte-doux:       #979086;
    --titre:            #F0ECE4;
    --bandeau:          #100F0D;
    --sur-bandeau:      #EDE9E1;
    --sur-bandeau-doux: #9C958B;
    --or:               #EBB851;
    --or-lisible:       #EBB851;
    --sur-or:           #161512;
    --or-voile:         rgba(235, 184, 81, .20);
    --or-cadre:         rgba(235, 184, 81, .35);
    --filet:            #33302A;
    --filet-fort:       #4A463E;
    --r-entreprises:    #C79A72;
    --r-finance:        #7EBFA4;
    --r-immobilier:     #DD9068;
    --r-emploi:         #8CA8C8;
    --r-marketing:      #C9AE6A;
  }
}

:root[data-theme="dark"] body.palette-encre {
  --fond:             #161512;
  --fond-creux:       #1C1A16;
  --surface:          #201E19;
  --texte:            #D8D2C7;
  --texte-doux:       #979086;
  --titre:            #F0ECE4;
  --bandeau:          #100F0D;
  --sur-bandeau:      #EDE9E1;
  --sur-bandeau-doux: #9C958B;
  --or:               #EBB851;
  --or-lisible:       #EBB851;
  --sur-or:           #161512;
  --or-voile:         rgba(235, 184, 81, .20);
  --or-cadre:         rgba(235, 184, 81, .35);
  --filet:            #33302A;
  --filet-fort:       #4A463E;
  --r-entreprises:    #C79A72;
  --r-finance:        #7EBFA4;
  --r-immobilier:     #DD9068;
  --r-emploi:         #8CA8C8;
  --r-marketing:      #C9AE6A;
}

/* Ardoise : bleu institutionnel, calme */
body.palette-ardoise {
  --fond:             #F7F7F4;
  --fond-creux:       #EFF0EC;
  --surface:          #FFFFFF;
  --texte:            #2D3239;
  --texte-doux:       #6A727C;
  --titre:            #1C242E;
  --bandeau:          #22303F;
  --sur-bandeau:      #E8EDF2;
  --sur-bandeau-doux: #9EAAB6;
  --or:               #D9A441;
  --or-lisible:       #8A6216;
  --sur-or:           #22303F;
  --or-voile:         rgba(217, 164, 65, .22);
  --or-cadre:         rgba(217, 164, 65, .40);
  --filet:            #E0E1DC;
  --filet-fort:       #C6C8C2;
  --r-entreprises:    #6B4A2E;
  --r-finance:        #2E5B4A;
  --r-immobilier:     #96543A;
  --r-emploi:         #3F5670;
  --r-marketing:      #7C6428;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.palette-ardoise {
    --fond:             #121519;
    --fond-creux:       #171B21;
    --surface:          #1B2027;
    --texte:            #CFD5DC;
    --texte-doux:       #8B95A1;
    --titre:            #EAEFF4;
    --bandeau:          #0D1116;
    --sur-bandeau:      #E8EDF2;
    --sur-bandeau-doux: #93A0AD;
    --or:               #E0B15A;
    --or-lisible:       #E0B15A;
    --sur-or:           #121519;
    --or-voile:         rgba(224, 177, 90, .20);
    --or-cadre:         rgba(224, 177, 90, .35);
    --filet:            #2A3138;
    --filet-fort:       #3E4750;
    --r-entreprises:    #C79A72;
    --r-finance:        #7EBFA4;
    --r-immobilier:     #DD9068;
    --r-emploi:         #8CA8C8;
    --r-marketing:      #C9AE6A;
  }
}

:root[data-theme="dark"] body.palette-ardoise {
  --fond:             #121519;
  --fond-creux:       #171B21;
  --surface:          #1B2027;
  --texte:            #CFD5DC;
  --texte-doux:       #8B95A1;
  --titre:            #EAEFF4;
  --bandeau:          #0D1116;
  --sur-bandeau:      #E8EDF2;
  --sur-bandeau-doux: #93A0AD;
  --or:               #E0B15A;
  --or-lisible:       #E0B15A;
  --sur-or:           #121519;
  --or-voile:         rgba(224, 177, 90, .20);
  --or-cadre:         rgba(224, 177, 90, .35);
  --filet:            #2A3138;
  --filet-fort:       #3E4750;
  --r-entreprises:    #C79A72;
  --r-finance:        #7EBFA4;
  --r-immobilier:     #DD9068;
  --r-emploi:         #8CA8C8;
  --r-marketing:      #C9AE6A;
}

/* Billet : vert profond, la couleur de l argent */
body.palette-billet {
  --fond:             #F7F5EF;
  --fond-creux:       #EFEDE4;
  --surface:          #FFFFFF;
  --texte:            #2C2F2A;
  --texte-doux:       #6A6E64;
  --titre:            #18241D;
  --bandeau:          #1F3A30;
  --sur-bandeau:      #E7EEE8;
  --sur-bandeau-doux: #9BA79D;
  --or:               #D9A441;
  --or-lisible:       #7E6318;
  --sur-or:           #1F3A30;
  --or-voile:         rgba(217, 164, 65, .22);
  --or-cadre:         rgba(217, 164, 65, .40);
  --filet:            #E1DDD1;
  --filet-fort:       #C8C3B4;
  --r-entreprises:    #6B4A2E;
  --r-finance:        #2E5B4A;
  --r-immobilier:     #96543A;
  --r-emploi:         #3F5670;
  --r-marketing:      #7C6428;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.palette-billet {
    --fond:             #121612;
    --fond-creux:       #171C16;
    --surface:          #1B211A;
    --texte:            #D2D8CF;
    --texte-doux:       #8B9389;
    --titre:            #EAF0E9;
    --bandeau:          #0C110E;
    --sur-bandeau:      #E7EEE8;
    --sur-bandeau-doux: #93A093;
    --or:               #E0B15A;
    --or-lisible:       #E0B15A;
    --sur-or:           #121612;
    --or-voile:         rgba(224, 177, 90, .20);
    --or-cadre:         rgba(224, 177, 90, .35);
    --filet:            #2A312A;
    --filet-fort:       #3D453D;
    --r-entreprises:    #C79A72;
    --r-finance:        #7EBFA4;
    --r-immobilier:     #DD9068;
    --r-emploi:         #8CA8C8;
    --r-marketing:      #C9AE6A;
  }
}

:root[data-theme="dark"] body.palette-billet {
  --fond:             #121612;
  --fond-creux:       #171C16;
  --surface:          #1B211A;
  --texte:            #D2D8CF;
  --texte-doux:       #8B9389;
  --titre:            #EAF0E9;
  --bandeau:          #0C110E;
  --sur-bandeau:      #E7EEE8;
  --sur-bandeau-doux: #93A093;
  --or:               #E0B15A;
  --or-lisible:       #E0B15A;
  --sur-or:           #121612;
  --or-voile:         rgba(224, 177, 90, .20);
  --or-cadre:         rgba(224, 177, 90, .35);
  --filet:            #2A312A;
  --filet-fort:       #3D453D;
  --r-entreprises:    #C79A72;
  --r-finance:        #7EBFA4;
  --r-immobilier:     #DD9068;
  --r-emploi:         #8CA8C8;
  --r-marketing:      #C9AE6A;
}

/* --- 15. Polices de titre ------------------------------------------------
   La police des titres se change d un reglage. Le facteur compense la
   hauteur d oeil : sans lui, passer du Bodoni a Archivo grossit tout.
   ------------------------------------------------------------------------ */

/* Bodoni : didone a fort contraste, la presse economique francaise */
body.titre-bodoni {
  --f-display:      "Bodoni Moda", "Didot", "Times New Roman", Georgia, serif;
  --titre-facteur:  1;
}

/* Spectral : la serif du corps de texte, en gras. Douce et coherente */
body.titre-spectral {
  --f-display:      "Spectral", Georgia, "Times New Roman", serif;
  --titre-facteur:  .93;
}

/* Archivo : sans-serif nette, allure presse en ligne */
body.titre-archivo {
  --f-display:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --titre-facteur:  .90;
}

/* Source Serif : serif classique et sobre, tres lisible en gros */
body.titre-source {
  --f-display:      "Source Serif 4", "Spectral", Georgia, serif;
  --titre-facteur:  .95;
}

/* Spectral n est charge qu en 600 : sans cette regle, le navigateur
   fabriquerait un faux gras a partir du 600 pour atteindre le 700. */
body.titre-spectral h1, body.titre-spectral h2,
body.titre-spectral h3, body.titre-spectral h4 { font-weight: 600; }

/* Un titre tres long tient moins de lignes s il descend d un cran. */
.vedette h2.long { font-size: calc(clamp(1.6rem, 2.6vw, 2.05rem) * var(--titre-facteur, 1)); }
.article h1.long { font-size: calc(clamp(1.6rem, 2.8vw, 2.05rem) * var(--titre-facteur, 1)); }