/* Sentient - Police test Fontshare */
@font-face {
  font-family: 'Sentient';
  src: url('../../fonts/Sentient-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-display: swap;
}

/* Bespoke Serif - Police test alternative */
@font-face {
  font-family: 'BespokeSerif';
  src: url('../../fonts/BespokeSerif-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* SofiaSans - Police par défaut */
@font-face {
  font-family: 'SofiaSans';
  src: url('../../fonts/SofiaSans.ttf') format('truetype');
  src: url('../../fonts/SofiaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaSans-Light';
  src: url('../../fonts/SofiaSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

/* Variable pour basculer facilement entre les polices */
:root {
  /* Option 1: SofiaSans-Light (config demandee) */
  --note-paragraph-font: 'SofiaSans-Light', sans-serif;

  /* Option 2: BespokeSerif (police test) */
  /* --note-paragraph-font: 'BespokeSerif', serif; */

  /* Option 3: Sentient (police test Fontshare) */
  /* --note-paragraph-font: 'Sentient', serif; */
}

.note-title {
  font-size: var(--font-size-h2,1.7rem);
  margin-bottom: var(--spacing-2xs, .6rem);
}

/* Chapeau de l'article (excerpt) en SofiaSans Medium */
.note-header-text p {
  font-family: 'SofiaSans', sans-serif;
  font-weight: 600;
  line-height: 125%;
}

/* Aligner le header sur une colonne popout de la master-grid */
.note-header {
  --padding-inline: 20px;
  --popout-extra-distance: clamp(50px, 15vw, 200px);
  padding-left: calc(var(--padding-inline) + var(--popout-extra-distance));
  padding-right: calc(var(--padding-inline) + var(--popout-extra-distance));
}

@media screen and (max-width: 999px) {
 .note-header .column {
   flex-direction: column;
 }

 .note-header {
   padding-left: var(--margin-page, 1.2rem);
   padding-right: var(--spacing-lg, 1.5rem);
 }

 /* Inverser l'ordre : image en premier */
 .note-header-image {
   order: 1;
 }

 .note-header-text {
   order: 2;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--spacing-md, 1rem);
   padding-right: var(--spacing-md, 1rem);
 }
}

.note-content p {
  font-family: var(--note-paragraph-font) !important;
  font-size: calc(var(--font-size-p, 1rem) * 0.9) !important;
}

/* Master Grid System */
.note-content figure {
  margin-inline: 0;
}
.note-content.master-grid > figure:has(video),
.note-content.master-grid > iframe,
.note-content.master-grid > video {
  grid-column: full-width;
}
.note-content.master-grid > figure,
.note-content.master-grid > hr,
.note-content.master-grid > p:has(img) {
  grid-column: popout;
}

.note-content.master-grid .button {
  max-width: max-content;
  width: 100%;
}

.note-content.master-grid > p:empty {
  --flow-space: 0;
}

.note-content.master-grid {
  display: grid;
  --padding-inline: 20px;
  --one-col-max-width: min(65ch, clamp(600px, 65vw, 800px));
  --popout-extra-distance: clamp(50px, 15vw, 200px);
  --gap: 100px;
  --master-grid-margin-block-start: 50px;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [popout-start left-start] minmax(0, var(--popout-extra-distance))
    [single-start] minmax(0, calc(var(--one-col-max-width) / 2 - var(--gap)))
    [left-end] var(--gap)
    [right-start] minmax(0, calc(var(--one-col-max-width) / 2 - var(--gap)))
    [single-end] minmax(0, var(--popout-extra-distance))
    [popout-end right-end] minmax(var(--padding-inline), 1fr)
    [full-width-end];
}

@media (max-width: 40em) {
  .note-content.master-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--padding-inline);
  }
}

.note-content.master-grid .column {
  grid-column: var(--column-span);
  --column-span: single;
}

.note-content.master-grid .column[data-column-span="full-width"] {
  --column-span: full-width;
}
.note-content.master-grid .column[data-column-span="popout"] {
  --column-span: popout;
}
.note-content.master-grid .column[data-column-span="single"] {
  --column-span: single;
}
.note-content.master-grid .column[data-column-span="left"] {
  --column-span: left;
}
.note-content.master-grid .column[data-column-span="right"] {
  --column-span: right;
}

.note-content.master-grid .column {
  margin-block-end: var(--master-grid-margin-block-start);
}

/* Quote (blockquote) styles */
.note-content blockquote {
  margin-inline: 0;
  padding-inline-start: var(--spacing-lg, 1.5rem);
  border-left: 4px solid var(--color-primary, #65336A);
  font-style: italic;
  font-size: var(--font-size-h2,1.7rem);

}

/* List styles */
.note-content ul {
  padding-inline-start: 1.5rem !important;
  list-style-position: outside !important;
}

.note-content ul li {
  list-style-type: disc !important;
  /* padding-inline-start: var(--spacing-xs, 0.5rem) !important;
  margin-block-end: var(--spacing-xs, 0.5rem) !important; */
}

.note-content ul li::marker {
  color: var(--color-primary, #65336A) !important;
  font-size: 1.2em !important;
}

.note-content ol {
  padding-inline-start: 1.5rem !important;
  list-style-position: outside !important;
}

.note-content ol li {
  list-style-type: decimal !important;
  padding-inline-start: var(--spacing-xs, 0.5rem) !important;
  margin-block-end: var(--spacing-xs, 0.5rem) !important;
}

.note-content ol li::marker {
  font-size: 1em !important;
  font-weight: var(--font-bold, 700) !important;
  color: var(--color-primary, #65336A) !important;
}

/* MAJ 16/02/2026 */
@media screen and (max-width: 999px) {
  .note-header {
    /* Demande Mobile Notes: "l'en-tête de l'article (...) ait la même marge que le texte de l'article" */
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* MAJ 17/02/2026 */
.note-header-text p,
.note-content p {
  font-family: "SofiaSans-Light", "SofiaSans", sans-serif !important;
}

.note-backlink-container {
  padding-bottom: var(--spacing-lg, 2.4rem);
  background-color: var(--orange-clair);
}

.footer-wrapper-note {
  background-color: var(--orange-clair, #f4a698);
}