/* =========================================================
   EmmanuelDion.com — feuille de style générale
   Version de départ 2026
   ========================================================= */

:root {
  --fond-page: #f7f5f0;
  --fond-contenu: #ffffff;
  --fond-menu: #f1eee7;
  --fond-sousmenu: #ffffff;

  --texte: #262626;
  --texte-secondaire: #67635d;
  --accent: #6b2f3c;
  --accent-fonce: #4f202b;
  --filet: #d8d2c8;

  --largeur-site: 1100px;
  --largeur-texte: 760px;

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
}


/* =========================================================
   Base
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  margin: 0;
  padding: 0 18px 40px 18px;

  background: var(--fond-page);
  color: var(--texte);

  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;

  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--accent-fonce);
}

img,
video,
iframe {
  max-width: 100%;
}

h1,
h2,
h3,
p,
blockquote,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

h1 {
  margin-bottom: 0.7em;
  font-size: clamp(2.15rem, 5vw, 3.25rem);
  font-weight: normal;
  letter-spacing: -0.02em;
}

h2 {
  margin: 2.2em 0 0.8em 0;
  font-size: 1.55rem;
  font-weight: normal;
  color: var(--accent);
}

h3 {
  margin: 1.8em 0 0.65em 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

p {
  margin-bottom: 1.25em;
}

ul,
ol {
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.45em;
}


/* =========================================================
   En-tête et navigation
   ========================================================= */

.entete-site {
  max-width: var(--largeur-site);
  margin: 22px auto 0 auto;
  border-bottom: 1px solid var(--filet);
}

.barre-site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  min-height: 64px;
}

.nom-site {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;

  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: normal;
  letter-spacing: 0.015em;
}

.nom-site a {
  color: var(--texte);
  text-decoration: none;
}

.nom-site a:hover {
  color: var(--accent);
}

#menu-toggle,
.menu-bouton {
  display: none;
}

.menu-principal {
  font-family: var(--sans);
  font-size: 0.84rem;
}

.menu-principal ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu > li {
  position: relative;
}

.menu a {
  display: block;
  padding: 13px 12px;

  color: var(--texte);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.menu > li:hover > a,
.menu > li:focus-within > a {
  color: var(--accent);
}

/* Sous-menus desktop */

.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  padding: 6px 0;

  background: var(--fond-sousmenu);
  border: 1px solid var(--filet);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);

  z-index: 1000;
}

.menu li:hover > ul,
.menu li:focus-within > ul {
  display: block;
}

.menu li ul li {
  margin: 0;
}

.menu li ul a {
  padding: 9px 15px;
  color: var(--texte);
}

.menu li ul a:hover,
.menu li ul a:focus {
  color: var(--accent);
  background: var(--fond-menu);
}


/* =========================================================
   Structure générale des pages
   ========================================================= */

.page {
  max-width: var(--largeur-site);
  margin: 0 auto;
}

.contenu {
  max-width: var(--largeur-texte);
  margin: 62px auto 70px auto;
}

.surtitre {
  margin-bottom: 0.85em;

  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sous-titre {
  margin: -0.6em 0 2em 0;

  color: var(--texte-secondaire);
  font-size: 1.08rem;
  line-height: 1.5;
  font-style: italic;
}

.chapeau {
  margin: 0 0 2.1em 0;

  color: #353535;
  font-size: 1.12rem;
  line-height: 1.65;
}

.date-page {
  margin: -1em 0 2.4em 0;

  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
}


/* =========================================================
   Éléments éditoriaux
   ========================================================= */

.citation,
blockquote {
  margin: 2.2em 0;
  padding: 0.2em 0 0.2em 1.35em;

  color: #4f4b45;
  border-left: 3px solid var(--filet);

  font-style: italic;
}

.citation-source {
  display: block;
  margin-top: 0.65em;

  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-style: normal;
}

.note {
  margin: 2.4em 0;
  padding: 1em 1.2em;

  background: #f3f0ea;
  border-left: 3px solid var(--accent);

  color: #4a4742;
  font-size: 0.92rem;
  line-height: 1.6;
}

.separateur {
  width: 100%;
  height: 1px;
  margin: 3em 0;
  background: var(--filet);
}

figure {
  margin: 2.4em auto;
}

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

figcaption,
.legende {
  max-width: 46em;
  margin: 0.7em auto 0 auto;

  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
  text-align: center;
}

.meta {
  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
}


.note1 {
  margin: 2.6em 0 0 0;
  color: var(--texte-secondaire);
  font-size: 0.9rem;
  line-height: 1.65;
  font-style: italic;
}

.note1 p {
  margin-bottom: 1.2em;
}


/* =========================================================
   Page d'accueil
   ========================================================= */

.accueil {
  max-width: var(--largeur-site);
  margin: 0 auto;
  padding: 72px 0 70px 0;
}

.accueil-intro {
  max-width: var(--largeur-texte);
  margin: 0 auto 58px auto;
}

.accueil-intro h1 {
  margin-bottom: 0.35em;
}

.accueil-intro .baseline {
  margin-bottom: 1.8em;

  color: var(--texte-secondaire);
  font-size: 1.18rem;
  font-style: italic;
}

.accueil-intro p {
  max-width: 42em;
}

.grille-entrees {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;

  max-width: 900px;
  margin: 0 auto 58px auto;
}

.entree {
  display: block;
  min-height: 190px;
  padding: 25px 27px;

  color: inherit;
  background: var(--fond-contenu);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--filet);

  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.entree:hover {
  transform: translateY(-2px);
  border-top-color: var(--accent-fonce);
}

.entree h2 {
  margin: 0 0 0.55em 0;

  color: var(--texte);
  font-size: 1.55rem;
}

.entree p {
  margin: 0;

  color: var(--texte-secondaire);
  font-size: 0.96rem;
  line-height: 1.55;
}

.accueil-selection {
  max-width: var(--largeur-texte);
  margin: 0 auto;
  padding-top: 35px;
  border-top: 1px solid var(--filet);
}

.accueil-selection h2 {
  margin-top: 0;
}

.liens-simples {
  margin: 0;
  padding-left: 1.1em;
}



/* =========================================================
   Pied de page
   ========================================================= */

.pied-site {
  max-width: var(--largeur-site);
  margin: 0 auto;
  padding: 24px 0 18px 0;

  border-top: 1px solid var(--filet);

  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.76rem;
}

.pied-site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.pied-site a {
  color: var(--texte-secondaire);
  text-decoration: none;
}

.pied-site a:hover {
  color: var(--accent);
}

.lien-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}


/* =========================================================
   Smartphone / petit écran
   ========================================================= */

@media (max-width: 850px) {

  body {
    padding: 0 15px 30px 15px;
    font-size: 17px;
    line-height: 1.58;
  }

  .entete-site {
    margin-top: 8px;
  }

  .barre-site {
    display: flex;
    align-items: center;
    min-height: 58px;
  }

  .nom-site {
    font-size: 1.25rem;
  }

  .menu-bouton {
    display: block;
    margin-left: auto;
    padding: 9px 0 9px 14px;

    color: var(--texte);
    font-family: var(--sans);
    font-size: 0.82rem;

    cursor: pointer;
    user-select: none;
  }

  .menu-principal {
    width: auto;
  }

  .menu {
    display: none;
    position: absolute;
    left: 15px;
    right: 15px;
    top: 66px;

    padding: 8px 0;

    background: var(--fond-sousmenu);
    border: 1px solid var(--filet);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);

    z-index: 2000;
  }

  #menu-toggle:checked + .menu-bouton + .menu {
    display: block;
  }

  .menu > li {
    width: 100%;
  }

  .menu > li > a {
    padding: 11px 15px;
    font-weight: bold;
  }

  .menu li ul {
    display: none;
    position: static;

    width: 100%;
    min-width: 0;
    padding: 0 0 6px 0;

    border: 0;
    box-shadow: none;
    background: #faf9f6;
  }

  .menu li:hover > ul,
  .menu li:focus-within > ul {
    display: none;
  }

  .menu li.ouvert > ul {
    display: block;
  }

  .menu li ul a {
    padding: 9px 15px 9px 28px;
  }

  .contenu {
    margin: 38px auto 50px auto;
  }

  h1 {
    font-size: 2.15rem;
  }

  h2 {
    margin-top: 1.9em;
    font-size: 1.38rem;
  }

  .chapeau {
    font-size: 1.04rem;
    line-height: 1.58;
  }

  .citation,
  blockquote {
    margin: 1.8em 0;
    padding-left: 1em;
  }

  .accueil {
    padding: 42px 0 50px 0;
  }

  .accueil-intro {
    margin-bottom: 38px;
  }

  .accueil-intro .baseline {
    font-size: 1.04rem;
  }

  .grille-entrees {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 42px;
  }

  .entree {
    min-height: 0;
    padding: 21px 20px;
  }

  .entree h2 {
    font-size: 1.38rem;
  }

  .pied-site {
    padding-top: 20px;
  }
}


/* Recueils : compléments à la feuille de style du site. */
html { scroll-behavior:smooth; }
.notice-edition { color:var(--texte-secondaire); font-size:.9rem; }
.sommaire { margin:2rem 0 3rem; padding:1.2rem 1.4rem; border:1px solid var(--filet); }
.sommaire summary { cursor:pointer; color:var(--accent); font-family:var(--sans); font-size:.9rem; }
.sommaire ol { margin-bottom:0; font-size:.94rem; }
.themes { display:grid; grid-template-columns:1fr 1fr; gap:.65rem 1.5rem; list-style:none; padding:0; font-size:.92rem; }
.themes li { margin:0; }
.recueil-fragment { margin-top:3.4rem; padding-top:2.3rem; border-top:1px solid var(--filet); scroll-margin-top:1rem; }
.recueil-fragment h2 { margin:0 0 .5rem; }
.numero { display:block; font-family:var(--sans); font-size:.74rem; color:var(--texte-secondaire); letter-spacing:.1em; margin-bottom:.75rem; }
.source-extrait { color:var(--texte-secondaire); font-family:var(--sans); font-size:.75rem; line-height:1.6; margin-bottom:1.6rem; }
.extrait p { white-space:pre-wrap; overflow-wrap:anywhere; }
.aphorismes { list-style:none; padding:0; }
.aphorisme { padding:1.5rem 0; border-bottom:1px solid var(--filet); scroll-margin-top:1rem; }
.aphorisme .phrase { font-size:1.12rem; margin-bottom:.65rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.aphorisme .source-extrait { margin:0; }
.aphorisme .numero { display:inline; margin-right:.55rem; }
.retour { text-align:right; font-family:var(--sans); font-size:.75rem; margin:1.6rem 0 0; }
.passerelle { display:flex; flex-wrap:wrap; gap:.7rem 2rem; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--filet); font-size:.9rem; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:600px) { .themes { grid-template-columns:1fr; } .sommaire { padding:1rem; } }
@media print {
 body { background:white; padding:0; color:black; font-size:11pt; line-height:1.5; }
 .entete-site,.pied-site,.sommaire,.themes,.retour,.passerelle,.lien-fragment { display:none; }
 .contenu { max-width:none; margin:0; }
 a { color:inherit; text-decoration:none; }
 h1,h2,.source-extrait { break-after:avoid; }
 p { orphans:3; widows:3; }
 .recueil-fragment { margin-top:1.7rem; padding-top:1.5rem; }
 .aphorisme { break-inside:avoid; padding:1rem 0; }
}


/* =========================================================
   Accueil avec portrait
   ========================================================= */

.accueil-intro-portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  column-gap: 42px;
  row-gap: 10px;
  align-items: start;
}

.accueil-identite {
  grid-column: 1;
}

.accueil-presentation {
  grid-column: 1;
}

.portrait-accueil {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.portrait-accueil img {
  width: 100%;
  height: auto;
  display: block;
}

.portrait-accueil figcaption {
  margin-top: 8px;
  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
}


/* =========================================================
   Éléments éditoriaux complémentaires
   ========================================================= */

.epigraphe {
  margin: 2.5em 0;
  color: var(--texte-secondaire);
  font-size: 0.88rem;
  line-height: 1.6;
  font-style: italic;
  text-align: right;
}

.source-citation {
  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-style: normal;
}

.date,
.date-document {
  color: var(--texte-secondaire);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
}

.textecourt1 {
  margin-bottom: 1.05em;
}

.minigauche {
  color: var(--texte-secondaire);
  font-size: 0.92rem;
  line-height: 1.65;
}

.bloc-centre {
  margin: 1.5em auto 2em auto;
  text-align: center;
  line-height: 1.8;
}


/* =========================================================
   Conceptaire et tableaux génériques
   ========================================================= */

.conceptaire-sommaire {
  margin: 2.4em 0 3em;
  padding: 1.2em 1.4em;
  border: 1px solid var(--filet);
  background: var(--fond-contenu);
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.5;
}

.conceptaire-sommaire ol {
  margin: 0;
}

.conceptaire-partie {
  margin-top: 3.5em;
  scroll-margin-top: 1rem;
}

.concept {
  margin-top: 2.4em;
  padding-top: 1.8em;
  border-top: 1px solid var(--filet);
  scroll-margin-top: 1rem;
}

.concept > h3 {
  margin-top: 0;
}

.tableau-defilant {
  width: 100%;
  margin: 1.8em 0 2.2em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tableau-defilant table,
.table-oppositions {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.45;
}

.tableau-defilant th,
.tableau-defilant td,
.table-oppositions td {
  padding: 0.65em 0.75em;
  vertical-align: top;
  border-bottom: 1px solid var(--filet);
}

.tableau-defilant th {
  font-family: var(--sans);
  font-size: 0.82rem;
  text-align: left;
  color: var(--accent);
}

.table-oppositions {
  table-layout: fixed;
}

.table-oppositions td {
  width: 50%;
}

.table-oppositions td + td {
  border-left: 1px solid var(--filet);
}

.pref-vert {
  color: #356a49;
  font-weight: bold;
}

.pref-rouge {
  color: #8a4141;
}


/* =========================================================
   Modes public / privé
   ========================================================= */

.mode-public .lien-fragment {
  display: none;
}


/* =========================================================
   Compléments responsive
   ========================================================= */

@media (max-width: 850px) {
  .accueil-intro-portrait {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .accueil-identite,
  .accueil-presentation,
  .portrait-accueil {
    grid-column: 1;
  }

  .portrait-accueil {
    grid-row: auto;
    width: min(220px, 62vw);
    margin: 0 auto;
  }

  .table-oppositions {
    font-size: 0.84rem;
  }

  .table-oppositions td {
    padding: 0.55em 0.5em;
    overflow-wrap: anywhere;
  }

  .conceptaire-sommaire {
    padding: 1em;
  }
}


/* =========================================================
   Page Rêves
   ========================================================= */

/* Présentation propre à cette page ; utilise les variables de style.css. */
.reves-layout{max-width:var(--largeur-site);margin:58px auto 72px;display:grid;grid-template-columns:230px minmax(0,760px);gap:54px;align-items:start}
.reves-lecture{min-width:0;overflow-wrap:break-word}
.reves-lecture h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:28px}
.reves-sous-titre{display:inline-block;font-size:1rem;line-height:1.6;letter-spacing:0;color:var(--texte-secondaire);margin-top:18px}
.reves-lecture .chapeau{font-size:1.1rem;line-height:1.65;margin-bottom:42px}
.reves-navigation{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin;font-family:var(--sans);font-size:.77rem;line-height:1.5;border-top:2px solid var(--accent);padding:16px 0}
.reves-navigation summary{cursor:pointer;font-weight:bold;color:var(--accent);padding:4px 0 12px;letter-spacing:.04em}
.reves-navigation ol{margin:0;padding:0;list-style:none;counter-reset:reves}
.reves-navigation li{margin:0;counter-increment:reves;border-bottom:1px solid var(--filet)}
.reves-navigation a{display:grid;grid-template-columns:20px 1fr;gap:8px;padding:10px 5px;color:var(--texte-secondaire);text-decoration:none}
.reves-navigation a:before{content:counter(reves,decimal-leading-zero);font-size:.65rem;color:var(--accent);padding-top:2px}
.reves-navigation a:hover,.reves-navigation a[aria-current=true]{color:var(--accent);background:var(--fond-menu)}
.reve{padding:38px 0 12px;border-top:1px solid var(--filet);margin-top:40px}
.reve:first-of-type{margin-top:0;border-top:3px solid var(--accent)}
.reve h2{font-size:clamp(1.55rem,2.5vw,2rem);line-height:1.3;margin:0 0 30px;color:var(--accent);scroll-margin-top:24px;text-wrap:pretty}
.reve p{margin:0 0 1.15em;line-height:1.75}
.reve h3.partie{font-family:var(--serif);font-weight:normal;letter-spacing:0;text-transform:none;font-size:1.45rem;color:var(--accent);line-height:1.35;margin:2.3em 0 1em;padding-top:20px;border-top:1px solid var(--filet)}
.reve h4.sous-partie{font-family:var(--sans);font-weight:bold;letter-spacing:0;text-transform:none;font-size:1rem;line-height:1.5;margin:2em 0 .85em;color:var(--texte)}
.reve h3 b,.reve h4 b{font-weight:inherit}
.reve strong{font-weight:bold}
.reve ul{margin:0 0 1.4em;padding-left:1.3em}
.separateur-reve{height:1px;background:var(--filet);margin:2em 0}
.syntaxe{display:none}
.reves-retour{position:fixed;right:18px;bottom:18px;z-index:20;background:var(--fond-page);border:1px solid var(--filet);padding:9px 13px;font: .75rem var(--sans);text-decoration:none;box-shadow:0 2px 10px #0000000a}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:1050px){.reves-layout{grid-template-columns:200px minmax(0,1fr);gap:30px}}
@media(max-width:850px){.reves-layout{display:flex;flex-direction:column;gap:28px;margin:30px auto 48px;max-width:760px}.reves-navigation{position:static;width:100%;max-height:none;padding:12px 16px;background:var(--fond-menu);border-bottom:1px solid var(--filet)}.reves-navigation summary{padding:4px 0}.reves-navigation ol{padding-top:12px}.reves-navigation a{font-size:.8rem;padding:12px 0}.reves-lecture{width:100%}.reves-lecture h1{font-size:2.2rem}.reves-lecture .chapeau{font-size:1.03rem}.reves-sous-titre{font-size:.9rem}.reve{margin-top:28px;padding-top:28px}.reve p{line-height:1.68}.reve h2{font-size:1.55rem}.reve h3.partie{font-size:1.3rem}.reves-retour{right:10px;bottom:10px;font-size:.7rem}}
@media print{.entete-site,.reves-navigation,.reves-retour{display:none}body{padding:0;color:#000;background:#fff;font-size:11pt}.reves-layout{display:block;margin:0;max-width:none}.reve h2,.reve h3,.reve h4{break-after:avoid}.reve p{orphans:3;widows:3}.reve{break-before:page}.reve:first-of-type{break-before:auto}}

/* Note liminaire : cadre éditorial distinct du récit et de l’analyse. */
.reves-liminaire{margin:0 0 44px;padding:26px 30px;background:var(--fond-menu);border-left:3px solid var(--accent);color:var(--texte)}
.reves-liminaire h2{margin:0 0 20px;font-family:var(--sans);font-size:.85rem;font-weight:bold;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.reves-liminaire p{margin:0 0 1.3em;font-size:1rem;line-height:1.75}
.reves-liminaire p:last-child{margin-bottom:0}
@media(max-width:850px){.reves-liminaire{padding:20px 18px;margin-bottom:32px}.reves-liminaire p{font-size:1rem;line-height:1.65}}
@media print{.reves-liminaire{background:transparent;padding:15px 20px}.reves-liminaire p{font-size:inherit}}