/* PEAU « Le Cahier Seyès » (direction artistique 05, préfixe sy-) — dias-online.org
   Rheinische Korrespondenz (de-DE). Un magazine imprimé sur un cahier d'écolier :
   réglure Seyès (signature A), marge rouge, buvard, encre violette.
   Règle négative de la direction : le bleu de réglure et le rouge de marge ne portent
   JAMAIS de texte. La réglure habille la couverture, les encadrés et le pied, jamais le
   corps de lecture. Aucune ressource tierce : polices auto-hébergées en woff2. */

/* ------------------------------------------------------------------ polices
   Display : Old Standard TT 700 (esprit Perpetua). Lecture : Lato 400 et 700 (esprit
   Candara). Trois fichiers, 69,7 ko au total, sous-ensembles latin complets (ä ö ü ß).
   Les replis portent des métriques ajustées (size-adjust mesuré sur les vraies tables)
   pour limiter le saut de mise en page sur mobile lent. */
@font-face {
  font-family: "Old Standard TT";
  src: url("/old-standard-tt-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sy-Georgia";
  src: local("Georgia");
  size-adjust: 89.3%; ascent-override: 76.2%; descent-override: 23.8%;
}
@font-face {
  font-family: "Sy-Segoe";
  src: local("Segoe UI");
  size-adjust: 90.2%; ascent-override: 98.7%; descent-override: 21.3%;
}

/* ------------------------------------------------------------------ jetons */
:root {
  --feuille: #f9f4f1;        /* la feuille du cahier */
  --buvard: #ecdcd8;         /* le buvard rose */
  --fiche: #fffcfa;          /* les feuilles collées (cartes) */
  --plume: #241f33;          /* l'encre principale */
  --plume-douce: #5b5468;
  --violette: #4b3f96;       /* l'encre violette : couleur signature */
  --violette-sombre: #3a3177;
  --seyes: #b7c9e6;          /* lignes de réglure */
  --seyes-fonce: #9db4d6;    /* ligne principale de la réglure */
  --marge: #a93b31;          /* trait de marge rouge : l'accent */
  --marge-claire: #c65a4a;
  --liseret: #ddd2c7;
  --encre-bleue: #2e5d9e;    /* couleur de la rubrique laender */
  --encre-verte: #3d7057;    /* couleur de la rubrique wissen */
  --police-display: "Old Standard TT", "Sy-Georgia", Georgia, "Times New Roman", serif;
  --police-texte: "Lato", "Sy-Segoe", "Segoe UI", -apple-system, Arial, sans-serif;
  --corps-texte: clamp(1.05rem, 1rem + .28vw, 1.18rem);
  --plateau: 78rem;
  --mesure: 34rem;           /* la colonne de lecture */
  --rail: 17rem;             /* le rail de renvois (signature C) */
  --arrondi: 14px;
  --arrondi-fort: 18px;
  --ombre-douce: 0 10px 30px rgba(36, 31, 51, .10);
  --ombre-fiche: 0 12px 32px rgba(75, 63, 150, .16);
  --ratio-pano: 21 / 9;
  --ratio-paysage: 4 / 3;
  --ratio-carre: 1 / 1;
  --ratio-portrait: 3 / 4;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--feuille);
  color: var(--plume);
  font-family: var(--police-texte);
  font-size: var(--corps-texte);
  line-height: 1.62;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--police-display); line-height: 1.14; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
h3 { font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); }
p, ul, ol, dl, figure { margin: 0 0 1.2rem; }
a { color: var(--violette); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--violette-sombre); }
:focus-visible { outline: 3px solid var(--marge); outline-offset: 2px; border-radius: 4px; }

.sy-plateau { width: min(100% - 2rem, var(--plateau)); margin-inline: auto; }
.sy-saut { position: absolute; left: -9999px; top: 0; background: var(--plume); color: var(--feuille); padding: .7rem 1.2rem; z-index: 30; border-radius: 0 0 10px 0; }
.sy-saut:focus { left: 0; top: 0; }

/* ------------------------------------------------------------------ réglure Seyès (signature A)
   Une période de 2 rem : ligne principale + trois lignes fines, plus la marge rouge
   verticale à 2,4 rem du bord gauche. Réservée à la couverture, aux encadrés et au pied. */
.sy-feuille {
  background-color: var(--feuille);
  background-image:
    linear-gradient(to right,
      transparent 0 calc(2.4rem - 1px), var(--marge) calc(2.4rem - 1px) 2.4rem, transparent 2.4rem),
    repeating-linear-gradient(to bottom,
      var(--seyes-fonce) 0 1px, transparent 1px .5rem,
      var(--seyes) .5rem calc(.5rem + 1px), transparent calc(.5rem + 1px) 1rem,
      var(--seyes) 1rem calc(1rem + 1px), transparent calc(1rem + 1px) 1.5rem,
      var(--seyes) 1.5rem calc(1.5rem + 1px), transparent calc(1.5rem + 1px) 2rem);
}

/* ------------------------------------------------------------------ en-tête : cartouche + pupitre */
.sy-entete { background: var(--feuille); border-bottom: 1px solid var(--liseret); }
.sy-cartouche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding: 1.25rem 0 .9rem; }
.sy-cartouche__logo img { width: 26rem; height: auto; }
.sy-cartouche__devise { margin: 0; font-family: var(--police-display); font-size: 1.02rem; color: var(--violette); }
.sy-pupitre { padding: 0 0 .15rem; }
.sy-pupitre ul { list-style: none; display: flex; gap: 1.7rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.sy-pupitre li { flex: 0 0 auto; }
.sy-pupitre a {
  display: inline-block; padding: .55rem 0 .5rem; text-decoration: none;
  color: var(--plume); font-weight: 700; font-size: .95rem;
  background: linear-gradient(var(--marge), var(--marge)) left bottom / 0% 3px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
.sy-pupitre a:hover, .sy-pupitre a:focus-visible { background-size: 100% 3px; color: var(--violette); }
.sy-pupitre a[aria-current] { background-size: 100% 3px; color: var(--violette); }

/* ------------------------------------------------------------------ couverture (héros de l'accueil) */
.sy-couverture { padding-top: 1rem; }
.sy-couverture__feuille { padding: 2.6rem 2rem 2.8rem 4.4rem; }
.sy-cartel {
  margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violette);
}
.sy-manchette { font-size: clamp(2.5rem, 2rem + 4.4vw, 4.4rem); letter-spacing: -.01em; margin: 0 0 .2rem; max-width: 16ch; }
.sy-accroche { font-family: var(--police-display); font-size: clamp(1.45rem, 1.2rem + 1.6vw, 2.05rem); color: var(--violette); margin: 0 0 1.4rem; }
.sy-couverture__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 3rem; align-items: center; }
.sy-chapeau--couverture { margin: 0 0 1.5rem; font-size: 1.13rem; color: var(--plume); }
.sy-chapeau--couverture strong { color: var(--violette); }
.sy-boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.sy-bouton {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sy-bouton--plein { background: var(--violette); color: #ffffff; box-shadow: 0 10px 24px rgba(75, 63, 150, .38); }
.sy-bouton--plein:hover { background: var(--violette-sombre); color: #ffffff; transform: translateY(-2px); }
.sy-bouton--fil { color: var(--plume); box-shadow: inset 0 0 0 1.5px var(--plume); }
.sy-bouton--fil:hover { color: var(--violette); box-shadow: inset 0 0 0 1.5px var(--violette); }

/* la UNE : fiche violette collée, bande adhésive, cartel numéroté */
.sy-une {
  position: relative; transform: rotate(1.2deg);
  background: var(--violette); color: var(--feuille);
  border-radius: var(--arrondi-fort); padding: 1.1rem 1.1rem 1.35rem;
  box-shadow: var(--ombre-fiche);
  transition: transform .3s ease;
}
.sy-une:hover { transform: rotate(0deg) translateY(-4px); }
.sy-une .sy-bande { top: -.9rem; }
.sy-une__photo { position: relative; border-radius: calc(var(--arrondi-fort) - 5px); overflow: hidden; margin: 0 0 1rem; }
.sy-une__pastille {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: var(--violette); color: #ffffff; border: 2px solid rgba(249, 244, 241, .9);
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .34rem .6rem; border-radius: 999px;
}
.sy-une__texte .sy-date { color: var(--seyes); margin-bottom: .3rem; }
.sy-une__titre { font-size: clamp(1.45rem, 1.3rem + 1vw, 1.85rem); margin: 0 0 .15rem; }
.sy-une__titre a { color: #ffffff; text-decoration: none; }
.sy-une__titre a:hover { text-decoration: underline; text-decoration-color: var(--buvard); }
.sy-une__texte .sy-numero { color: var(--buvard); font-size: 1.5rem; margin: 0 0 .6rem; }
.sy-une__abrege { color: rgba(249, 244, 241, .88); font-size: .97rem; margin: 0 0 .8rem; }
.sy-une__suite { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin: 0; }
.sy-une__suite a { color: #ffffff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--buvard); }
.sy-une__lecture { font-size: .85rem; color: rgba(249, 244, 241, .75); }

/* le bilan : bande buvard, chiffres réels calculés par le moteur */
.sy-bilan { background: var(--buvard); border-block: 1px solid rgba(169, 59, 49, .18); }
.sy-bilan__postes { display: flex; flex-wrap: wrap; }
.sy-bilan__poste { flex: 1 1 12rem; margin: 0; padding: 1rem 1.5rem; }
.sy-bilan__poste + .sy-bilan__poste { border-left: 1px solid rgba(169, 59, 49, .22); }
.sy-bilan__chiffre { display: block; font-family: var(--police-display); font-size: 1.9rem; color: var(--violette); }
.sy-bilan__libelle { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--plume); }

/* ------------------------------------------------------------------ rayons, têtes de section */
.sy-rayon { padding: 2.8rem 0 1rem; }
.sy-rayon__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1.4rem; }
.sy-rayon__tete h2 { display: flex; align-items: center; gap: .7rem; margin: 0; }
.sy-rayon__tete h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--violette); flex: 0 0 auto; }
.sy-rayon__tete h2 a { color: inherit; text-decoration: none; }
.sy-rayon__decompte { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--plume-douce); }

/* ------------------------------------------------------------------ cartel numéroté (signature B) */
.sy-date { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--violette); margin: 0 0 .35rem; }
.sy-numero { font-family: var(--police-display); font-size: 1.45rem; color: var(--violette); margin: 0 0 .55rem; }

/* ------------------------------------------------------------------ mosaïque asymétrique (densité 2)
   Grille de six colonnes (direction) : fiches en span 3 et 2, deux fiches décalées en
   hauteur, ratios d'images alternés (--ratio-pano, --ratio-paysage, --ratio-carre,
   --ratio-portrait). */
.sy-mosaique {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 2rem; padding: 2.2rem 0 2.6rem;
}
.sy-mosaique__fiche:nth-child(1), .sy-mosaique__fiche:nth-child(2) { grid-column: span 3; }
.sy-mosaique__fiche:nth-child(3) { grid-column: span 2; transform: translateY(-2.2rem); }
.sy-mosaique__fiche:nth-child(4) { grid-column: span 2; transform: translateY(1.6rem); }
.sy-fiche {
  display: flex; flex-direction: column;
  background: var(--fiche); border-radius: var(--arrondi-fort);
  box-shadow: var(--ombre-fiche); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sy-mosaique__fiche:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(75, 63, 150, .24); }
.sy-mosaique__fiche:nth-child(3):hover { transform: translateY(-2.2rem); }
.sy-mosaique__fiche:nth-child(4):hover { transform: translateY(1.6rem); }
.sy-fiche__photo { position: relative; margin: 0; }
.sy-fiche__texte { display: flex; flex-direction: column; padding: 1.05rem 1.2rem 1.15rem; }
.sy-fiche__titre { margin: 0 0 .15rem; font-size: clamp(1.12rem, 1.05rem + .4vw, 1.42rem); }
.sy-fiche__titre a { color: var(--plume); text-decoration: none; }
.sy-fiche__titre a:hover { color: var(--violette); }
.sy-fiche__abrege { font-size: .95rem; color: var(--plume-douce); margin: 0 0 .7rem; }
.sy-fiche__meta { font-size: .82rem; color: var(--plume-douce); margin: 0; }
.sy-fiche .sy-numero { font-size: 1.3rem; }

/* ------------------------------------------------------------------ registre (densité 3) */
.sy-registre { display: flex; flex-direction: column; }
.sy-registre__entree {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 1.2rem; align-items: center; padding: 1.05rem 0;
  border-top: 1px solid var(--liseret); margin: 0;
}
.sy-registre__entree:first-child { border-top: 0; }
.sy-registre__vignette { margin: 0; border-radius: 10px; overflow: hidden; }
.sy-registre__texte { min-width: 0; }
.sy-registre__texte .sy-date { margin-bottom: .15rem; }
.sy-registre__titre { margin: 0 0 .25rem; font-size: clamp(1.08rem, 1.03rem + .3vw, 1.3rem); }
.sy-registre__titre a { color: var(--plume); text-decoration: none; }
.sy-registre__titre a:hover { color: var(--violette); }
.sy-registre__meta { font-size: .82rem; color: var(--plume-douce); margin: 0; }
.sy-registre__numero { font-family: var(--police-display); font-size: 1.7rem; color: var(--violette); margin: 0; }
.sy-renvoi { text-align: right; margin: .6rem 0 0; }
.sy-renvoi a { font-weight: 700; text-decoration: none; }

/* ------------------------------------------------------------------ photos et ratios nommés */
.sy-photo { display: block; }
.sy-photo img { width: 100%; height: 100%; object-fit: cover; }
.sy-ratio--pano { aspect-ratio: var(--ratio-pano); }
.sy-ratio--paysage { aspect-ratio: var(--ratio-paysage); }
.sy-ratio--carre { aspect-ratio: var(--ratio-carre); }
.sy-ratio--portrait { aspect-ratio: var(--ratio-portrait); }

/* ------------------------------------------------------------------ pastilles de rubrique */
.sy-pastille {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1; padding: .4rem .68rem .34rem; border-radius: 999px;
  text-decoration: none;
}
.sy-pastille--pleine { background: var(--teinte, var(--violette)); color: #ffffff; }
.sy-pastille--contour { background: transparent; color: var(--teinte, var(--violette)); box-shadow: inset 0 0 0 1.5px var(--teinte, var(--violette)); }
.sy-pastille--cote { position: absolute; top: .8rem; left: .8rem; z-index: 2; }
.sy-pastille--large { font-size: .76rem; padding: .5rem .95rem .44rem; letter-spacing: .12em; }

/* ------------------------------------------------------------------ pupitres de rubriques (accueil) */
.sy-pupitres { background: var(--buvard); margin-top: 2.4rem; padding: 2.6rem 0 1.4rem; }
.sy-pupitre-rubrique {
  background: var(--fiche); border-radius: var(--arrondi-fort);
  box-shadow: var(--ombre-douce); padding: 1.5rem 1.8rem 1.2rem; margin-bottom: 1.6rem;
}
.sy-pupitre-rubrique__tete { margin-bottom: .4rem; }
.sy-pupitre-rubrique__tete h2 { margin: 0 0 .5rem; }
.sy-pupitre-rubrique__tete h2 a { color: inherit; text-decoration: none; }
.sy-pupitre-rubrique__intro { color: var(--plume-douce); font-size: .96rem; max-width: 44rem; margin: 0; }

/* ------------------------------------------------------------------ encart (feuille réglée collée) */
.sy-encart { margin: 2.6rem auto; width: min(100% - 2rem, 52rem); }
.sy-encart__feuille {
  padding: 1.6rem 1.8rem 1.8rem 4.4rem;
  border: 1px solid var(--liseret); border-radius: var(--arrondi);
  box-shadow: var(--ombre-douce); transform: rotate(-.6deg);
}
.sy-encart h2 { color: var(--violette); margin-bottom: .5rem; }
.sy-encart p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ section réseau (accueil) */
.sy-ailleurs { border-top: 3px solid var(--plume); margin-top: 1.4rem; padding: 2.2rem 0 2.6rem; }
.sy-ailleurs__tete { margin-bottom: 1.4rem; }
.sy-ailleurs__tete h2 { display: flex; align-items: center; gap: .7rem; }
.sy-ailleurs__tete h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--violette); }
.sy-ailleurs__phrase { color: var(--plume-douce); max-width: 44rem; }
.sy-ailleurs__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.sy-ailleurs__item { border-left: 3px solid var(--violette); padding-left: .9rem; }
.sy-ailleurs__item p { margin: 0; }

/* ------------------------------------------------------------------ fil d'Ariane */
.sy-remontee ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1.1rem 0 0; font-size: .82rem; color: var(--plume-douce); }
.sy-remontee li + li::before { content: "\203A"; margin-right: .45rem; color: var(--violette); }
.sy-remontee a { color: var(--plume-douce); }
.sy-remontee [aria-current] { color: var(--violette); font-weight: 700; }

/* ------------------------------------------------------------------ page rubrique */
.sy-entete-rubrique { padding: 2.2rem 0 1rem; max-width: 44rem; }
.sy-entete-rubrique .sy-pastille { margin-bottom: 1rem; }
.sy-entete-rubrique h1 { font-size: clamp(2rem, 1.6rem + 2.4vw, 3.2rem); }
.sy-chapeau { color: var(--plume-douce); font-size: 1.12rem; max-width: 44rem; }
.sy-pupitre-rubriques { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 auto 2.2rem; }
.sy-pupitre-rubriques__lien {
  padding: .5rem 1.15rem; border-radius: 999px; font-size: .86rem; font-weight: 700;
  text-decoration: none; color: var(--plume); background: var(--fiche);
  box-shadow: inset 0 0 0 1.5px var(--liseret);
}
.sy-pupitre-rubriques__lien:hover { box-shadow: inset 0 0 0 1.5px var(--violette); color: var(--violette); }
.sy-pupitre-rubriques__lien--courant, .sy-pupitre-rubriques__lien--courant:hover { background: var(--violette); color: #ffffff; box-shadow: none; }

/* la vitrine : l'entrée mise en avant, photo plein cadre sous voile */
.sy-vitrine { max-width: 58rem; margin: 0 auto 2.4rem; }
.sy-vitrine__fiche { border-radius: var(--arrondi-fort); overflow: hidden; box-shadow: var(--ombre-fiche); background: var(--fiche); }
.sy-vitrine__photo { position: relative; margin: 0; }
.sy-vitrine__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(36, 31, 51, .93) 0%, rgba(36, 31, 51, .42) 48%, transparent 74%);
}
.sy-vitrine__texte { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.3rem; z-index: 2; color: #ffffff; margin: 0; }
.sy-vitrine__texte .sy-date { color: var(--seyes); }
.sy-vitrine__texte h2 { font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2.1rem); margin: 0 0 .4rem; max-width: 26ch; }
.sy-vitrine__texte h2 a { color: #ffffff; text-decoration: none; }
.sy-vitrine__texte h2 a:hover { text-decoration: underline; text-decoration-color: var(--seyes); }
.sy-vitrine__abrege { color: rgba(255, 252, 250, .9); max-width: 52ch; margin: 0 0 .4rem; }
.sy-vitrine__meta { font-size: .85rem; color: rgba(255, 252, 250, .78); margin: 0; }

/* ------------------------------------------------------------------ page article */
.sy-entete-article { padding: 2rem 0 .6rem; max-width: 44rem; }
.sy-entete-article__rubrique { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; }
.sy-entete-article__rubrique > a { font-size: .92rem; font-weight: 700; color: var(--plume-douce); text-decoration: none; }
.sy-entete-article__rubrique > a:hover { color: var(--violette); }
.sy-entete-article h1 { font-size: clamp(1.9rem, 1.5rem + 2.2vw, 3rem); }
.sy-entete-article .sy-numero { font-size: 1.15rem; }
.sy-signature { font-size: .88rem; color: var(--plume-douce); margin: 1rem 0 0; }

/* la planche : photo arrondie collée, légende humaine créditée */
.sy-planche {
  position: relative; margin: 2.6rem auto 1.2rem; max-width: 58rem;
  background: var(--fiche); border-radius: var(--arrondi-fort);
  padding: 1.2rem 1.2rem .7rem; box-shadow: var(--ombre-douce);
}
.sy-planche__photo { border-radius: calc(var(--arrondi-fort) - 6px); overflow: hidden; }
.sy-planche figcaption { font-size: .8rem; color: var(--plume-douce); padding: .55rem .2rem .35rem; }
.sy-bande {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 9.5rem; height: 2.3rem; z-index: 2;
  background: rgba(236, 220, 216, .92);
  border-left: 1px dashed rgba(169, 59, 49, .35); border-right: 1px dashed rgba(169, 59, 49, .35);
  box-shadow: 0 3px 8px rgba(36, 31, 51, .14);
}

/* le chapô de l'article, en gras dans la couleur de marque */
.sy-plateau.sy-chapeau { font-weight: 700; color: var(--violette); max-width: 44rem; margin: 0 auto 2rem; }

/* le duo : colonne de lecture (34 rem) + rail de renvois (17 rem), signature C */
.sy-duo { display: grid; grid-template-columns: minmax(0, var(--mesure)) var(--rail); gap: 3rem; justify-content: center; align-items: start; padding-bottom: 1rem; }
.sy-duo--seul { grid-template-columns: minmax(0, var(--mesure)); }

/* le corps de lecture : feuille avec marge rouge, jamais de réglure (règle de la direction) */
.sy-feuille-lecture { position: relative; padding-left: 4rem; }
.sy-feuille-lecture::before {
  content: ""; position: absolute; left: 2.4rem; top: 0; bottom: 0; width: 2px;
  background: var(--marge);
}
.sy-corps { max-width: var(--mesure); min-width: 0; }
.sy-corps h2 { margin: 2.3rem 0 .7rem; scroll-margin-top: 1.5rem; }
.sy-corps h3 { margin: 1.7rem 0 .5rem; }
.sy-corps a { color: var(--violette); }
.sy-corps blockquote {
  margin: 1.6rem 0; padding: .15rem 0 .15rem 1.2rem;
  border-left: 3px solid var(--violette);
  font-family: var(--police-display); font-size: 1.18em; color: var(--plume);
}
.sy-corps ul, .sy-corps ol { padding-left: 1.5rem; }
.sy-corps table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; }
.sy-corps th, .sy-corps td { border-bottom: 1px solid var(--liseret); padding: .45rem .6rem; text-align: left; }

/* le rail de renvois : notes de marge à trait violet */
.sy-rail { position: sticky; top: 1.4rem; font-size: .92rem; }
.sy-rail h2 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--violette); margin: 0 0 .6rem; font-family: var(--police-texte); }
.sy-rail ol, .sy-rail ul { list-style: none; margin: 0 0 1.7rem; padding: 0; }
.sy-rail li { border-left: 3px solid var(--violette); padding: .28rem 0 .28rem .85rem; margin-bottom: .55rem; }
.sy-rail a { color: var(--plume); text-decoration: none; }
.sy-rail a:hover { color: var(--violette); }

/* les voisines */
.sy-voisines { padding: 2rem 0 1rem; }
.sy-voisines__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* ------------------------------------------------------------------ page service */
.sy-article--service .sy-entete-article { padding-top: 2.2rem; }

/* ------------------------------------------------------------------ page 404 */
.sy-page404 { padding: 3.5rem 1rem 2.5rem; }
.sy-page404__feuille {
  max-width: 42rem; margin: 0 auto;
  padding: 2.2rem 2rem 2.2rem 4.4rem;
  border: 1px solid var(--liseret); border-radius: var(--arrondi);
  box-shadow: var(--ombre-douce);
}
.sy-page404 h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }

/* ------------------------------------------------------------------ pied : réglure sombre sur plume */
.sy-pied {
  margin-top: 3rem; background-color: var(--plume); color: var(--feuille);
  background-image:
    linear-gradient(to right,
      transparent 0 calc(2.4rem - 1px), var(--marge-claire) calc(2.4rem - 1px) 2.4rem, transparent 2.4rem),
    repeating-linear-gradient(to bottom,
      rgba(221, 230, 238, .10) 0 1px, transparent 1px .5rem,
      rgba(221, 230, 238, .05) .5rem calc(.5rem + 1px), transparent calc(.5rem + 1px) 1rem,
      rgba(221, 230, 238, .05) 1rem calc(1rem + 1px), transparent calc(1rem + 1px) 1.5rem,
      rgba(221, 230, 238, .05) 1.5rem calc(1.5rem + 1px), transparent calc(1.5rem + 1px) 2rem);
}
.sy-pied__colonnes { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding: 2.6rem 0 2rem; }
.sy-pied__colonne--marque img { width: 20rem; height: auto; margin-bottom: 1rem; }
.sy-pied__colonne > p { color: rgba(249, 244, 241, .86); font-size: .95rem; }
.sy-pied__note { font-size: .88rem; color: rgba(249, 244, 241, .7); }
.sy-pied__signature { font-size: .88rem; color: rgba(249, 244, 241, .8); }
.sy-pied__signature a { color: var(--seyes); }
.sy-pied h2 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--seyes); font-family: var(--police-texte); margin: .2rem 0 .8rem; }
.sy-pied ul { list-style: none; margin: 0; padding: 0; }
.sy-pied li { margin-bottom: .45rem; }
.sy-pied a { color: var(--feuille); text-decoration: none; }
.sy-pied a:hover { color: var(--seyes); }
.sy-pied__ligne { border-top: 1px solid rgba(249, 244, 241, .18); padding: 1.1rem 0 1.7rem; font-size: .86rem; color: rgba(249, 244, 241, .72); }

/* ------------------------------------------------------------------ palier tablette */
@media (max-width: 64rem) {
  .sy-couverture__corps { grid-template-columns: 1fr; gap: 2.4rem; }
  .sy-une { max-width: 30rem; }
  .sy-mosaique { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 1.8rem 0 2rem; }
  .sy-mosaique__fiche:nth-child(1), .sy-mosaique__fiche:nth-child(2),
  .sy-mosaique__fiche:nth-child(3), .sy-mosaique__fiche:nth-child(4) { grid-column: span 1; transform: none; }
  .sy-mosaique__fiche:hover, .sy-mosaique__fiche:nth-child(3):hover, .sy-mosaique__fiche:nth-child(4):hover { transform: translateY(-4px); }
  .sy-duo { grid-template-columns: minmax(0, var(--mesure)); }
  .sy-duo--seul { grid-template-columns: minmax(0, 1fr); }
  .sy-rail { position: static; }
  .sy-voisines__grille { grid-template-columns: repeat(2, 1fr); }
  .sy-pied__colonnes { grid-template-columns: 1fr 1fr; }
  .sy-pied__colonne--marque { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ palier mobile (390 px visé) */
@media (max-width: 48rem) {
  .sy-cartouche__logo img { width: 100%; }
  .sy-cartouche__devise { flex-basis: 100%; font-size: .95rem; }
  .sy-couverture__feuille { padding: 1.8rem 1.1rem 2rem 3rem; background-image:
    linear-gradient(to right,
      transparent 0 calc(1.6rem - 1px), var(--marge) calc(1.6rem - 1px) 1.6rem, transparent 1.6rem),
    repeating-linear-gradient(to bottom,
      var(--seyes-fonce) 0 1px, transparent 1px .5rem,
      var(--seyes) .5rem calc(.5rem + 1px), transparent calc(.5rem + 1px) 1rem,
      var(--seyes) 1rem calc(1rem + 1px), transparent calc(1rem + 1px) 1.5rem,
      var(--seyes) 1.5rem calc(1.5rem + 1px), transparent calc(1.5rem + 1px) 2rem); }
  .sy-manchette { font-size: clamp(2.2rem, 2rem + 6vw, 3.1rem); }
  .sy-bilan__poste { padding: .8rem 1rem; }
  .sy-mosaique { grid-template-columns: 1fr; padding: 1.2rem 0 1.4rem; }
  .sy-registre__entree { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .9rem; }
  .sy-registre__numero { display: none; }
  .sy-pupitre-rubrique { padding: 1.2rem 1.1rem 1rem; }
  .sy-encart__feuille, .sy-page404__feuille { padding: 1.4rem 1.2rem 1.5rem 3rem; background-image:
    linear-gradient(to right,
      transparent 0 calc(1.6rem - 1px), var(--marge) calc(1.6rem - 1px) 1.6rem, transparent 1.6rem),
    repeating-linear-gradient(to bottom,
      var(--seyes-fonce) 0 1px, transparent 1px .5rem,
      var(--seyes) .5rem calc(.5rem + 1px), transparent calc(.5rem + 1px) 1rem,
      var(--seyes) 1rem calc(1rem + 1px), transparent calc(1rem + 1px) 1.5rem,
      var(--seyes) 1.5rem calc(1.5rem + 1px), transparent calc(1.5rem + 1px) 2rem); }
  .sy-feuille-lecture { padding-left: 2.9rem; }
  .sy-feuille-lecture::before { left: 1.4rem; }
  .sy-vitrine .sy-ratio--pano { aspect-ratio: var(--ratio-paysage); }
  .sy-vitrine__texte { position: static; color: var(--plume); padding: 1.1rem 1.2rem 1.2rem; }
  .sy-vitrine__texte .sy-date { color: var(--violette); }
  .sy-vitrine__texte h2 a { color: var(--plume); }
  .sy-vitrine__abrege { color: var(--plume-douce); }
  .sy-vitrine__meta { color: var(--plume-douce); }
  .sy-voisines__grille { grid-template-columns: 1fr; }
  .sy-pied__colonnes { grid-template-columns: 1fr; gap: 1.8rem; }
  .sy-pied { background-image:
    linear-gradient(to right,
      transparent 0 calc(1.6rem - 1px), var(--marge-claire) calc(1.6rem - 1px) 1.6rem, transparent 1.6rem),
    repeating-linear-gradient(to bottom,
      rgba(221, 230, 238, .10) 0 1px, transparent 1px .5rem,
      rgba(221, 230, 238, .05) .5rem calc(.5rem + 1px), transparent calc(.5rem + 1px) 1rem,
      rgba(221, 230, 238, .05) 1rem calc(1rem + 1px), transparent calc(1rem + 1px) 1.5rem,
      rgba(221, 230, 238, .05) 1.5rem calc(1.5rem + 1px), transparent calc(1.5rem + 1px) 2rem); }
}

@media print {
  .sy-entete, .sy-pied, .sy-rail, .sy-saut { display: none; }
}