/* =========================================================
   ICGC — LIVRE D'HISTOIRE
   Design premium / livre numérique
   ========================================================= */


/* =========================================================
   1. VARIABLES DU PROJET
   ========================================================= */

:root{
  /* Couleurs de marque */
  --c-white:#ffffff;
  --c-off:#f7f9fc;
  --c-cloud:#eef2f8;
  --c-navy-900:#0b1b33;
  --c-navy-800:#0f2340;
  --c-navy:#12294b;
  --c-navy-soft:#1d3a63;
  --c-gold:#e0a92a;
  --c-gold-soft:#f2c75c;
  --c-gold-pale:#fdf4de;
  --c-ink:#1a2436;
  --c-body:#4a586e;
  --c-muted:#7d8ba1;
  --c-line:#e3e9f2;

  /* Sémantique */
  --bg:var(--c-white);
  --bg-alt:var(--c-off);
  --bg-deep:var(--c-navy);
  --text:var(--c-ink);
  --text-soft:var(--c-body);
  --text-invert:var(--c-white);
  --accent:var(--c-gold);
  --border:var(--c-line);

  /* Dégradés */
  --grad-deep:linear-gradient(
    135deg,
    var(--c-navy) 0%,
    var(--c-navy-900) 100%
  );

  --grad-gold:linear-gradient(
    135deg,
    var(--c-gold) 0%,
    var(--c-gold-soft) 100%
  );

  --grad-overlay:linear-gradient(
    180deg,
    rgba(11,27,51,.72) 0%,
    rgba(11,27,51,.45) 45%,
    rgba(11,27,51,.78) 100%
  );

  --grad-fade:linear-gradient(
    180deg,
    var(--c-white) 0%,
    var(--c-off) 100%
  );

  /* Typographie interface */
  --font-title:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Typographie littéraire */
  --font-literary:
    Georgia,
    "Times New Roman",
    Times,
    serif;

  --font-literary-title:
    "Cormorant Garamond",
    "Baskerville",
    "Palatino Linotype",
    Georgia,
    serif;

  --font-script:
    "Cormorant Garamond",
    Georgia,
    serif;

  /* Poids */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;

  /* Tailles */
  --fs-eyebrow:.72rem;
  --fs-xs:.8rem;
  --fs-sm:.875rem;
  --fs-base:.97rem;
  --fs-md:1.05rem;
  --fs-lg:1.2rem;
  --fs-xl:1.45rem;
  --fs-h3:1.35rem;
  --fs-h2:clamp(1.6rem,2.4vw,2.15rem);
  --fs-h1:clamp(2rem,4.4vw,3.35rem);
  --fs-display:clamp(2.3rem,5.2vw,4rem);

  --lh-tight:1.14;
  --lh-title:1.22;
  --lh-body:1.75;

  --ls-tight:-.02em;
  --ls-wide:.16em;

  /* Espacements */
  --sp-3:.1875rem;
  --sp-4:.25rem;
  --sp-6:.375rem;
  --sp-8:.5rem;
  --sp-12:.75rem;
  --sp-16:1rem;
  --sp-20:1.25rem;
  --sp-24:1.5rem;
  --sp-32:2rem;
  --sp-40:2.5rem;
  --sp-48:3rem;
  --sp-64:4rem;
  --sp-80:5rem;
  --sp-96:6rem;
  --sp-128:8rem;

  --section-y:clamp(3.5rem,7vw,6.5rem);
  --section-y-sm:clamp(2.5rem,4.5vw,4rem);

  /* Layout */
  --container:1200px;
  --container-wide:1400px;
  --container-narrow:820px;
  --gutter:clamp(1.1rem,4vw,2.5rem);

  --header-h:78px;
  --header-h-scrolled:66px;

  /* Rayons */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* Ombres */
  --sh-xs:0 1px 2px rgba(18,41,75,.05);
  --sh-sm:0 4px 14px rgba(18,41,75,.06);
  --sh-md:0 12px 34px rgba(18,41,75,.09);
  --sh-lg:0 26px 60px rgba(18,41,75,.13);
  --sh-gold:0 14px 30px rgba(224,169,42,.28);
  --sh-header:0 6px 24px rgba(18,41,75,.08);

  /* Animations */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --t-fast:.18s var(--ease);
  --t-base:.32s var(--ease);
  --t-slow:.6s var(--ease);
  --t-reveal:.9s var(--ease);

  --d-kenburns:18s;

  /* Composants */
  --btn-py:.85rem;
  --btn-px:1.6rem;
  --btn-fs:.85rem;
  --btn-radius:var(--r-pill);

  --card-p:clamp(1.4rem,2.4vw,2rem);
  --card-radius:var(--r-lg);

  --field-h:52px;

  /* Livre */
  --book-width:980px;
  --book-padding:clamp(1.5rem,5vw,5.5rem);

  --paper:#fffdf8;
  --paper-deep:#f7f1e5;
  --paper-line:#e9dfcd;

  --ink-literary:#302b25;
  --ink-soft:#665f56;

  --gold-dark:#a97716;

  --z-header:100;
  --z-menu:120;
  --z-top:200;
}


/* =========================================================
   2. RESET
   ========================================================= */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body{
  margin:0;
  min-height:100vh;

  color:var(--text);
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(224,169,42,.055),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #edf1f6 0%,
      #f5f2eb 45%,
      #e9edf3 100%
    );

  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


/* =========================================================
   3. BARRE DE LECTURE
   ========================================================= */

body::before{
  content:"";
  position:fixed;
  z-index:9999;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--c-gold),
      var(--c-gold-soft)
    );

  transform:scaleX(0);
  transform-origin:left center;

  animation:readingProgress linear;
  animation-timeline:scroll(root);
}

@keyframes readingProgress{
  to{
    transform:scaleX(1);
  }
}


/* =========================================================
   4. SÉLECTION
   ========================================================= */

::selection{
  color:var(--c-white);
  background:var(--c-navy);
}


/* =========================================================
   5. HEADER / COUVERTURE
   ========================================================= */

header{
  position:relative;

  width:min(100% - 30px,var(--book-width));
  min-height:520px;

  margin:clamp(1rem,3vw,2.5rem) auto 0;

  padding:
    clamp(4rem,8vw,7rem)
    var(--book-padding)
    clamp(3.5rem,7vw,6rem);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  text-align:center;

  color:var(--text-invert);

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(242,199,92,.12),
      transparent 30%
    ),
    var(--grad-deep);

  border-radius:var(--r-xl) var(--r-xl) 4px 4px;

  box-shadow:
    0 30px 70px rgba(11,27,51,.22),
    inset 0 1px 0 rgba(255,255,255,.08);

  isolation:isolate;

  animation:bookCoverReveal 1s var(--ease) both;
}

header::before{
  content:"";

  position:absolute;
  inset:14px;

  border:1px solid rgba(242,199,92,.22);

  border-radius:var(--r-lg);

  pointer-events:none;
}

header::after{
  content:"";

  position:absolute;
  width:420px;
  height:420px;

  right:-180px;
  top:-180px;

  background:
    radial-gradient(
      circle,
      rgba(224,169,42,.15),
      transparent 68%
    );

  border-radius:50%;

  animation:coverGlow 8s ease-in-out infinite alternate;
}

@keyframes bookCoverReveal{
  from{
    opacity:0;
    transform:translateY(30px) scale(.98);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes coverGlow{
  from{
    transform:scale(.85);
    opacity:.4;
  }

  to{
    transform:scale(1.15);
    opacity:.9;
  }
}


/* =========================================================
   6. LOGO
   ========================================================= */

.divlogo{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:var(--sp-32);

  animation:logoReveal 1s .15s var(--ease) both;
}

.divlogo::before{
  content:"";

  position:absolute;

  width:150px;
  height:150px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.10),
      transparent 70%
    );

  z-index:-1;
}

.divlogo img{
  display:block;

  width:clamp(120px,18vw,190px);
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.18));

  transition:
    transform var(--t-slow),
    filter var(--t-slow);
}

.divlogo:hover img{
  transform:translateY(-5px) scale(1.025);

  filter:
    drop-shadow(0 18px 30px rgba(0,0,0,.25));
}

@keyframes logoReveal{
  from{
    opacity:0;
    transform:scale(.75);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}


/* =========================================================
   7. TITRE DE COUVERTURE
   ========================================================= */

header h1,
header h2{
  position:relative;
  z-index:2;

  margin:0;

  font-family:var(--font-title);

  color:var(--c-white);

  line-height:var(--lh-tight);

  text-wrap:balance;
}

header h1{
  margin-bottom:var(--sp-16);

  font-size:var(--fs-display);
  font-weight:700;

  letter-spacing:var(--ls-tight);

  animation:titleReveal 1s .25s var(--ease) both;
}

header h2{
  max-width:760px;

  margin-bottom:var(--sp-16);

  font-size:clamp(.85rem,1.5vw,1.05rem);

  font-weight:600;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--c-gold-soft);

  animation:titleReveal 1s .35s var(--ease) both;
}

header p{
  position:relative;
  z-index:2;

  max-width:620px;

  margin:0;

  font-family:var(--font-literary-title);

  font-size:clamp(1.15rem,2vw,1.55rem);

  font-style:italic;

  line-height:1.5;

  color:rgba(255,255,255,.82);

  animation:titleReveal 1s .45s var(--ease) both;
}

@keyframes titleReveal{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   8. CONTENEUR PRINCIPAL
   ========================================================= */

main{
  position:relative;

  width:min(100% - 30px,var(--book-width));

  margin:0 auto;

  padding:
    0
    0
    clamp(3rem,7vw,6rem);
}


/* =========================================================
   9. TABLE DES MATIÈRES
   ========================================================= */

main > section:first-child{
  /* La première section est la préface dans ton HTML.
     Si tu ajoutes la table des matières avant elle,
     utilise .table-des-matieres. */
}


/* Style pour une future section .table-des-matieres */

.table-des-matieres{
  position:relative;

  margin:
    clamp(1.5rem,4vw,3rem)
    0
    clamp(2rem,5vw,4rem);

  padding:
    clamp(2rem,5vw,4rem)
    clamp(1.5rem,5vw,4rem);

  background:
    linear-gradient(
      135deg,
      #fffdf8,
      #f8f2e7
    );

  border:
    1px solid var(--paper-line);

  border-radius:var(--r-lg);

  box-shadow:
    0 18px 45px rgba(57,45,27,.08);

  overflow:hidden;

  animation:tocReveal .9s var(--ease) both;
}

.table-des-matieres::before{
  content:"TABLE DES MATIÈRES";

  display:block;

  margin-bottom:var(--sp-12);

  font-family:var(--font-title);

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.22em;

  color:var(--c-gold-dark);
}

.table-des-matieres h2{
  margin:0 0 var(--sp-32);

  font-family:var(--font-literary-title);

  font-size:clamp(2rem,4vw,3rem);

  font-weight:600;

  color:var(--c-navy);

  line-height:1.1;
}

.table-des-matieres ul{
  display:flex;
  flex-direction:column;
  gap:0;

  margin:0;
  padding:0;

  list-style:none;
}

.table-des-matieres li{
  margin:0;

  border-bottom:1px dashed #d9ccb7;
}

.table-des-matieres li:last-child{
  border-bottom:0;
}

.table-des-matieres a{
  position:relative;

  display:flex;
  align-items:center;

  gap:1rem;

  padding:1rem .2rem;

  color:var(--c-navy);

  font-family:var(--font-literary);

  font-size:clamp(.95rem,1.5vw,1.08rem);

  font-weight:600;

  text-decoration:none;

  transition:
    color var(--t-base),
    padding-left var(--t-base);
}

.table-des-matieres a::before{
  content:"";

  width:7px;
  height:7px;

  flex:0 0 7px;

  border-radius:50%;

  background:var(--c-gold);

  box-shadow:0 0 0 5px var(--c-gold-pale);

  transition:
    transform var(--t-base),
    box-shadow var(--t-base);
}

.table-des-matieres a::after{
  content:"";

  width:0;
  height:1px;

  background:var(--c-gold);

  transition:width var(--t-base);

  order:3;
}

.table-des-matieres a:hover{
  color:var(--c-gold-dark);

  padding-left:.65rem;
}

.table-des-matieres a:hover::before{
  transform:scale(1.25);

  box-shadow:
    0 0 0 6px rgba(224,169,42,.12);
}

.table-des-matieres a:hover::after{
  width:25px;
}

@keyframes tocReveal{
  from{
    opacity:0;
    transform:translateY(25px);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   10. SECTIONS = PAGES DU LIVRE
   ========================================================= */

section{
  position:relative;

  margin:
    clamp(1.5rem,4vw,3rem)
    0;

  padding:
    var(--book-padding);

  background:
    linear-gradient(
      135deg,
      rgba(255,253,248,.98),
      rgba(250,247,239,.98)
    );

  border:1px solid rgba(218,207,188,.72);

  border-radius:4px;

  box-shadow:
    0 20px 50px rgba(43,39,32,.075),
    0 3px 8px rgba(43,39,32,.04);

  overflow:hidden;

  isolation:isolate;

  animation:
    pageReveal .9s var(--ease) both;

  scroll-margin-top:25px;
}


/* Faux bord de page */

section::before{
  content:"";

  position:absolute;

  top:0;
  bottom:0;
  left:0;

  width:5px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(224,169,42,.55) 20%,
      rgba(224,169,42,.55) 80%,
      transparent
    );

  opacity:.45;
}


/* Texture très légère */

section::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  opacity:.32;

  background-image:
    radial-gradient(
      rgba(92,72,43,.08) .6px,
      transparent .6px
    );

  background-size:6px 6px;

  pointer-events:none;
}


/* =========================================================
   11. ANIMATION DES PAGES
   ========================================================= */

@keyframes pageReveal{
  from{
    opacity:0;
    transform:
      translateY(35px)
      rotateX(1deg);
  }

  to{
    opacity:1;
    transform:
      translateY(0)
      rotateX(0);
  }
}


/* =========================================================
   12. PREMIÈRE SECTION / PRÉFACE
   ========================================================= */

section:first-of-type{
  padding-top:
    clamp(3rem,7vw,6rem);
}

section:first-of-type::before{
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--c-gold) 25%,
      var(--c-gold) 75%,
      transparent
    );
}


/* =========================================================
   13. TITRES DE CHAPITRES
   ========================================================= */

section > h2{
  position:relative;

  margin:
    0
    0
    clamp(1.8rem,4vw,3rem);

  padding-bottom:var(--sp-24);

  font-family:var(--font-literary-title);

  font-size:clamp(1.8rem,3.7vw,2.8rem);

  font-weight:600;

  line-height:1.12;

  letter-spacing:-.025em;

  color:var(--c-navy);

  text-wrap:balance;
}


/* Petite ligne dorée */

section > h2::after{
  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:70px;
  height:3px;

  border-radius:var(--r-pill);

  background:var(--grad-gold);

  box-shadow:
    0 3px 12px rgba(224,169,42,.2);
}


/* Numéro visuel du chapitre */

section > h2::before{
  content:"";

  display:block;

  margin-bottom:.65rem;

  font-family:var(--font-title);

  font-size:.68rem;

  font-weight:700;

  letter-spacing:.22em;

  color:var(--c-gold-dark);

  opacity:.9;
}


/* =========================================================
   14. SOUS-TITRES
   ========================================================= */

section h3{
  position:relative;

  margin:
    clamp(2rem,4vw,3.2rem)
    0
    var(--sp-16);

  padding-left:1rem;

  font-family:var(--font-literary-title);

  font-size:clamp(1.35rem,2.4vw,1.75rem);

  font-weight:600;

  line-height:1.25;

  color:var(--c-navy);

  scroll-margin-top:30px;
}

section h3::before{
  content:"";

  position:absolute;

  left:0;
  top:.18em;

  width:3px;
  height:1.15em;

  border-radius:var(--r-pill);

  background:var(--c-gold);
}


/* =========================================================
   15. TEXTE LITTÉRAIRE
   ========================================================= */

section p{
  max-width:760px;

  margin:
    0
    auto
    1.45rem;

  color:var(--ink-literary);

  font-family:var(--font-literary);

  font-size:clamp(1rem,1.4vw,1.08rem);

  line-height:1.95;

  text-align:justify;

  text-wrap:pretty;
}


/* Premier paragraphe = effet livre */

section > p:first-of-type::first-letter{
  float:left;

  margin:
    .08em
    .12em
    0
    0;

  font-family:var(--font-literary-title);

  font-size:4.2em;

  font-weight:600;

  line-height:.78;

  color:var(--c-gold-dark);
}


/* =========================================================
   16. LIENS
   ========================================================= */

a{
  color:var(--c-gold-dark);
}

a:focus-visible{
  outline:3px solid rgba(224,169,42,.4);
  outline-offset:4px;
}


/* =========================================================
   17. VERSETS BIBLIQUES
   ========================================================= */

blockquote{
  position:relative;

  max-width:760px;

  margin:
    clamp(2rem,4vw,3rem)
    auto;

  padding:
    clamp(2rem,4vw,2.8rem)
    clamp(2rem,5vw,3.5rem);

  color:#3b342a;

  font-family:var(--font-literary-title);

  font-size:clamp(1.15rem,2vw,1.45rem);

  font-style:italic;

  font-weight:500;

  line-height:1.65;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #fffaf0 0%,
      #fdf5e5 100%
    );

  border:
    1px solid rgba(224,169,42,.22);

  border-radius:var(--r-md);

  box-shadow:
    0 12px 30px rgba(80,60,25,.06);

  transition:
    transform var(--t-base),
    box-shadow var(--t-base),
    border-color var(--t-base);
}


/* Guillemets décoratifs */

blockquote::before{
  content:"“";

  position:absolute;

  left:.25rem;
  top:-.1rem;

  font-family:Georgia,serif;

  font-size:6rem;

  line-height:1;

  color:rgba(224,169,42,.22);
}

blockquote::after{
  content:"”";

  position:absolute;

  right:.55rem;
  bottom:-1.35rem;

  font-family:Georgia,serif;

  font-size:5rem;

  line-height:1;

  color:rgba(224,169,42,.16);
}

blockquote:hover{
  transform:translateY(-3px);

  border-color:rgba(224,169,42,.4);

  box-shadow:
    0 18px 40px rgba(80,60,25,.1);
}


/* =========================================================
   18. LISTES
   ========================================================= */

section ul,
section ol{
  max-width:760px;

  margin:
    1.5rem
    auto
    2rem;

  padding-left:1.5rem;

  color:var(--ink-literary);

  font-family:var(--font-literary);

  line-height:1.85;
}

section li{
  margin-bottom:.7rem;

  padding-left:.25rem;
}

section li::marker{
  color:var(--c-gold-dark);

  font-weight:700;
}


/* =========================================================
   19. LISTES DE DÉPARTEMENTS
   ========================================================= */

section ul li{
  transition:
    transform var(--t-base),
    color var(--t-base);
}

section ul li:hover{
  color:var(--c-navy);

  transform:translateX(4px);
}


/* =========================================================
   20. STRONG
   ========================================================= */

strong{
  color:var(--c-navy);

  font-family:var(--font-body);

  font-weight:700;
}


/* =========================================================
   21. ANNEXES
   ========================================================= */

section:last-of-type{
  background:
    linear-gradient(
      135deg,
      var(--c-navy),
      var(--c-navy-900)
    );

  border-color:rgba(255,255,255,.06);

  color:white;
}

section:last-of-type::after{
  opacity:.05;
}

section:last-of-type h2,
section:last-of-type h3,
section:last-of-type p,
section:last-of-type li{
  color:rgba(255,255,255,.88);
}

section:last-of-type h2::after{
  background:var(--grad-gold);
}

section:last-of-type h3::before{
  background:var(--c-gold-soft);
}

section:last-of-type strong{
  color:white;
}


/* =========================================================
   22. FOOTER
   ========================================================= */

footer{
  position:relative;

  width:min(100% - 30px,var(--book-width));

  margin:
    0
    auto
    2rem;

  padding:
    3rem
    var(--book-padding);

  text-align:center;

  color:rgba(255,255,255,.72);

  background:
    var(--grad-deep);

  border-radius:
    4px
    4px
    var(--r-xl)
    var(--r-xl);

  box-shadow:
    0 25px 60px rgba(11,27,51,.18);
}

footer::before{
  content:"";

  display:block;

  width:55px;
  height:2px;

  margin:0 auto 1.5rem;

  background:var(--grad-gold);

  border-radius:var(--r-pill);
}

footer p{
  margin:0;

  font-family:var(--font-title);

  font-size:.72rem;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;
}


/* =========================================================
   23. ANCRE DE NAVIGATION
   ========================================================= */

[id]{
  scroll-margin-top:30px;
}


/* =========================================================
   24. EFFET PAGE ACTIVE
   ========================================================= */

section:target{
  animation:
    targetPage .9s var(--ease) both;
}

section:target::before{
  opacity:1;

  box-shadow:
    0 0 25px rgba(224,169,42,.22);
}

@keyframes targetPage{
  0%{
    transform:translateY(12px);
  }

  100%{
    transform:none;
  }
}


/* =========================================================
   25. RESPONSIVE TABLETTE
   ========================================================= */

@media (max-width:900px){

  header{
    min-height:460px;
  }

  section{
    padding:
      clamp(2rem,6vw,3.5rem);
  }

  section p,
  section ul,
  section ol,
  blockquote{
    max-width:100%;
  }
}


/* =========================================================
   26. RESPONSIVE MOBILE
   ========================================================= */

@media (max-width:600px){

  body{
    font-size:.95rem;

    background:
      linear-gradient(
        180deg,
        #f0f2f5,
        #f5f2eb
      );
  }

  header{
    width:calc(100% - 16px);

    min-height:430px;

    margin-top:8px;

    padding:
      3.5rem
      1.4rem
      3rem;

    border-radius:
      18px
      18px
      3px
      3px;
  }

  header::before{
    inset:9px;
  }

  .divlogo{
    margin-bottom:1.8rem;
  }

  .divlogo img{
    width:130px;
  }

  header h2{
    font-size:.72rem;

    letter-spacing:.1em;
  }

  header p{
    font-size:1.05rem;
  }

  main{
    width:calc(100% - 16px);
  }

  section{
    margin:1rem 0;

    padding:
      2.2rem
      1.25rem;

    border-radius:3px;
  }

  section > h2{
    font-size:1.75rem;

    line-height:1.15;
  }

  section h3{
    font-size:1.4rem;
  }

  section p{
    font-size:1rem;

    line-height:1.85;

    text-align:left;
  }

  blockquote{
    padding:
      1.8rem
      1.25rem;

    font-size:1.12rem;

    line-height:1.55;
  }

  blockquote::before{
    font-size:4.5rem;
  }

  blockquote::after{
    font-size:4rem;
  }

  section ul,
  section ol{
    padding-left:1.25rem;

    line-height:1.75;
  }

  .table-des-matieres{
    padding:
      2rem
      1.25rem;
  }

  .table-des-matieres h2{
    font-size:2rem;
  }

  .table-des-matieres a{
    font-size:.95rem;

    line-height:1.5;
  }

  footer{
    width:calc(100% - 16px);

    margin-bottom:8px;

    padding:
      2.5rem
      1.25rem;

    border-radius:
      3px
      3px
      18px
      18px;
  }
}


/* =========================================================
   27. TRÈS PETITS ÉCRANS
   ========================================================= */

@media (max-width:380px){

  header{
    min-height:390px;
  }

  header h2{
    font-size:.66rem;
  }

  section{
    padding:
      1.8rem
      1rem;
  }

  section > h2{
    font-size:1.55rem;
  }

  section h3{
    font-size:1.25rem;
  }

  section p{
    font-size:.96rem;
  }

  blockquote{
    font-size:1.02rem;
  }
}


/* =========================================================
   28. ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  body::before{
    display:none;
  }
}


/* =========================================================
   29. IMPRESSION — VRAI LIVRE PAPIER
   ========================================================= */

@media print{

  body{
    background:#fff;
    color:#000;
  }

  header,
  section,
  footer{
    width:100%;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  header{
    min-height:auto;

    color:#000;

    background:#fff;

    page-break-after:always;
  }

  header h1,
  header h2,
  header p{
    color:#000;
  }

  section{
    page-break-inside:avoid;

    background:#fff;
  }

  blockquote{
    box-shadow:none;
  }

  footer{
    color:#000;
    background:#fff;
  }

  body::before{
    display:none;
  }
}