/* ==========================================================================
   Portail « Les Temps modernes » — École Mathias Grünewald
   Charte graphique : couleurs et typographies de la charte EMG (mai 2025).
   Ce fichier décide de toute l'apparence du site. Le contenu n'en décide rien.
   ========================================================================== */

:root{
  /* Palette de la charte */
  --marine:#28314f;      --teal:#00818e;      --turquoise:#6dc3c6;
  --bordeaux:#811653;    --magenta:#ca2574;   --violet:#7b3e90;
  --orange:#ee725a;      --rouge:#c5361e;     --jaune:#fbba00;
  --vert:#6db85f;        --vert-fonce:#274949;

  --encre:#28314f;
  --texte:#39424f;
  --texte-doux:#67717f;
  --papier:#ffffff;
  --fond:#f6f8f8;
  --fond-2:#eef3f4;
  --trait:#dde5e7;

  --mc:#00818e;                       /* couleur du chapitre courant */
  --mc-doux:rgba(0,129,142,.10);

  --titre:'Poppins','Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --corps:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --r:14px;
  --ombre:0 1px 2px rgba(40,49,79,.05), 0 8px 24px -12px rgba(40,49,79,.18);
  --ombre-f:0 2px 4px rgba(40,49,79,.06), 0 18px 40px -18px rgba(40,49,79,.30);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:var(--corps); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--mc); outline-offset:3px; border-radius:3px}
h1,h2,h3,h4{font-family:var(--titre); color:var(--encre); line-height:1.22; margin:0; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
p{margin:0 0 1.1em}
.contenant{max-width:var(--max); margin:0 auto; padding-inline:24px}

.evitement{position:absolute; left:-9999px; top:0; background:var(--encre); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.evitement:focus{left:0}

/* ------------------------------ Bandeau ------------------------------ */
.bandeau{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--trait);
}
.bandeau-in{max-width:var(--max); margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:18px}
.marque{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
.marque:hover{text-decoration:none}
.marque img{width:132px; height:auto; flex:none}
.marque-txt{border-left:1px solid var(--trait); padding-left:14px; min-width:0}
.marque-txt strong{display:block; font-family:var(--titre); font-weight:600; font-size:15px; color:var(--encre); line-height:1.25}
.marque-txt span{display:block; font-size:12.5px; color:var(--texte-doux); letter-spacing:.04em}
.bandeau-nav{margin-left:auto}
.bouton-sommaire{
  font-family:var(--titre); font-weight:500; font-size:14px; color:var(--encre);
  background:var(--fond-2); border:1px solid var(--trait); border-radius:999px;
  padding:9px 16px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.18s;
}
.bouton-sommaire:hover{background:#fff; border-color:var(--turquoise); box-shadow:var(--ombre)}
.bouton-sommaire svg{width:14px; height:14px; transition:transform .2s}
.bouton-sommaire[aria-expanded="true"] svg{transform:rotate(180deg)}

.panneau{
  position:absolute; right:24px; top:calc(100% + 8px); width:min(420px, calc(100vw - 32px));
  background:#fff; border:1px solid var(--trait); border-radius:var(--r); box-shadow:var(--ombre-f);
  padding:10px; display:none; max-height:min(72vh, 620px); overflow:auto;
}
.panneau.ouvert{display:block}
.panneau a{display:flex; gap:12px; align-items:baseline; padding:9px 12px; border-radius:9px; color:var(--encre); font-size:15px; line-height:1.35}
.panneau a:hover{background:var(--fond-2); text-decoration:none}
.panneau a[aria-current="page"]{background:var(--mc-doux); font-weight:600}
.panneau a .num{font-family:var(--titre); font-weight:600; font-size:13px; color:var(--mc); min-width:22px}
.panneau a.attente,.panneau a.attente .num{color:var(--texte-doux)}
.panneau a em{font-style:normal; opacity:.7}
.panneau-sep{height:1px; background:var(--trait); margin:8px 12px}
.panneau-lbl{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); padding:6px 12px 2px; font-family:var(--titre); font-weight:600}

/* ------------------------------ Fil d'Ariane ------------------------------ */
.ariane{background:#fff; border-bottom:1px solid var(--trait)}
.ariane ol{max-width:var(--max); margin:0 auto; padding:11px 24px; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px}
.ariane li{display:flex; align-items:center; gap:6px; color:var(--texte-doux); min-width:0}
.ariane a{color:var(--texte-doux)}
.ariane a:hover{color:var(--teal)}
.ariane [aria-current]{color:var(--encre); font-weight:600}
.ariane .sep{opacity:.5}
.ico-accueil{width:14px; height:14px; vertical-align:-2px}

/* ------------------------------ Accueil ------------------------------ */
.heros{position:relative; overflow:hidden; background:linear-gradient(170deg,#fff 0%, #eef4f5 100%); border-bottom:1px solid var(--trait)}
.heros-in{max-width:var(--max); margin:0 auto; padding:68px 24px 60px; position:relative; z-index:2}
.heros .deco{position:absolute; right:-120px; top:-110px; width:640px; color:var(--turquoise); opacity:.42; z-index:1; pointer-events:none}
.surtitre{font-family:var(--titre); font-weight:600; font-size:13px; letter-spacing:.1em; color:var(--teal); margin-bottom:14px}
.heros h1{font-size:clamp(34px,6vw,58px); font-weight:700; letter-spacing:-.025em}
.filet{width:96px; height:4px; border-radius:2px; background:var(--mc); margin:22px 0}
.heros .filet{background:var(--teal)}
.heros-texte{font-size:clamp(17px,2.2vw,19.5px); color:var(--texte); max-width:56ch; margin:0}

.titre-section{display:flex; align-items:baseline; gap:14px; margin:0 0 22px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-doux); font-family:var(--titre); font-weight:600}
.titre-section::after{content:''; flex:1; height:1px; background:var(--trait)}

.grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px}
.tuile{position:relative; display:block; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:24px 22px 22px; overflow:hidden; transition:.22s ease; color:inherit}
.tuile::before{content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--mc); transition:width .22s}
.tuile:hover{transform:translateY(-3px); box-shadow:var(--ombre-f); border-color:transparent; text-decoration:none}
.tuile:hover::before{width:6px}
.tuile .n{font-family:var(--titre); font-weight:700; font-size:13px; color:var(--mc); letter-spacing:.08em; display:block; margin-bottom:9px}
.tuile h3{font-size:19.5px; margin-bottom:8px; letter-spacing:-.015em}
.tuile p{font-size:14.5px; color:var(--texte-doux); margin:0; line-height:1.55}
.tuile--attente{background:#fbfcfc; border-style:dashed}
.tuile--attente::before{background:var(--trait)}
.tuile--attente:hover{transform:none; box-shadow:none; border-color:var(--trait)}
.tuile--attente .n,.tuile--attente h3{color:var(--texte-doux)}
.etiquette-attente{display:inline-block; margin-top:14px; font-size:11.5px; font-family:var(--titre); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--texte-doux); background:var(--fond-2); border-radius:999px; padding:4px 11px}

.aller{margin-top:16px; font-size:13.5px; font-weight:600; font-family:var(--titre); color:var(--mc); display:flex; align-items:center; gap:6px}
.aller svg{width:13px; height:13px; transition:transform .22s}
a:hover .aller svg{transform:translateX(4px)}

/* ------------------------------ Chapitre ------------------------------ */
.chapitre-tete{position:relative; overflow:hidden; background:var(--papier); border-bottom:1px solid var(--trait)}
.chapitre-tete .deco{position:absolute; right:-110px; top:-165px; width:560px; color:var(--mc); opacity:.19; pointer-events:none}
.chapitre-tete-in{max-width:var(--max); margin:0 auto; padding:46px 24px 40px; position:relative; z-index:2}
.chapitre-num{font-family:var(--titre); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mc); margin-bottom:12px}
.chapitre-tete h1{font-size:clamp(28px,4.6vw,43px); font-weight:700; max-width:20ch; letter-spacing:-.022em}
.chapitre-tete .filet{width:70px; margin:20px 0 18px}
.chapitre-tete p{max-width:62ch; margin:0; color:var(--texte); font-size:17.5px}

.grille-res{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.ressource{display:flex; flex-direction:column; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:20px; transition:.2s; color:inherit; height:100%}
.ressource:hover{transform:translateY(-3px); box-shadow:var(--ombre-f); text-decoration:none; border-color:transparent}
.genre{font-family:var(--titre); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mc); background:var(--mc-doux); border-radius:999px; padding:4px 10px; align-self:flex-start; margin-bottom:12px}
.ressource h3{font-size:17.5px; margin-bottom:6px; letter-spacing:-.01em}
.ressource p{font-size:14px; color:var(--texte-doux); margin:0; line-height:1.5}
.ressource .aller{margin-top:auto; padding-top:14px; font-size:13px}

/* ------------------------------ Document ------------------------------ */
.document{max-width:790px; margin:0 auto; padding:44px 24px 20px}
.document-tete{margin-bottom:34px; padding-bottom:26px; border-bottom:2px solid var(--mc)}
.document-genre{font-family:var(--titre); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mc); margin-bottom:12px}
.document-tete h1{font-size:clamp(26px,4vw,37px); font-weight:700; letter-spacing:-.02em}
.document-sous{margin:12px 0 0; color:var(--texte-doux); font-size:16.5px; font-style:italic}

.document h2{font-size:25px; margin:46px 0 16px; letter-spacing:-.018em; scroll-margin-top:120px; clear:both}
.document h2:first-of-type{margin-top:8px}
.document h3{font-size:19.5px; margin:34px 0 12px; color:var(--mc); scroll-margin-top:120px}
.document h4{font-size:16.5px; margin:26px 0 8px; font-weight:600}
.document ul,.document ol{margin:0 0 1.2em; padding-left:1.35em}
.document li{margin-bottom:.55em}
.document li::marker{color:var(--mc)}
.document strong{color:var(--encre); font-weight:600}
.chapeau{font-size:19px; line-height:1.65; color:var(--texte); border-left:3px solid var(--mc); padding-left:20px; margin:0 0 30px}
.keyw{background:var(--mc-doux); border-radius:4px; padding:1px 5px; font-weight:600; color:var(--encre); box-decoration-break:clone}

/* Figures */
.figure{margin:32px 0; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); overflow:hidden; clear:both}
.figure img{width:100%}
.figure figcaption{padding:13px 18px; font-size:13.5px; color:var(--texte-doux); line-height:1.5; border-top:1px solid var(--trait); background:#fcfdfd}
.figure--nu{background:transparent; border:none; border-radius:0}
.figure--nu figcaption{border-top:none; background:transparent; padding:10px 2px 0}
.figure--marge{float:right; width:min(255px,42%); margin:6px 0 22px 26px; clear:none}
@media(max-width:640px){.figure--marge{float:none; width:100%; margin:26px 0}}
.figures{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:32px 0; align-items:start; clear:both}
.figures .figure{margin:0}

/* Citations */
blockquote{clear:both; margin:28px 0; padding:22px 26px; background:var(--papier); border:1px solid var(--trait); border-left:4px solid var(--mc); border-radius:0 var(--r) var(--r) 0; font-size:16.5px; line-height:1.72}
blockquote p:last-of-type{margin-bottom:0}
blockquote cite{display:block; margin-top:12px; font-size:13.5px; font-style:normal; color:var(--texte-doux); font-family:var(--titre); font-weight:500}
.citation--source{font-style:italic; color:var(--texte)}

/* Encadrés */
.encadre{background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:22px 24px; margin:30px 0; clear:both}
.encadre a{color:var(--mc)}
.encadre--accent{background:var(--mc-doux); border-color:transparent}
.encadre-titre{font-family:var(--titre); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--mc); margin-bottom:14px; display:flex; align-items:center; gap:9px}
.encadre-titre svg{width:15px; height:15px; flex:none}
.encadre > p:last-child,.encadre > ul:last-child,.encadre > ol:last-child{margin-bottom:0}

/* Repères chronologiques */
.reperes{list-style:none; padding:0; margin:0}
.reperes li{display:flex; gap:16px; padding:9px 0; border-bottom:1px dashed var(--trait); margin:0; align-items:baseline}
.reperes li:last-child{border-bottom:none; padding-bottom:0}
.reperes b{font-family:var(--titre); font-weight:600; color:var(--mc); min-width:88px; flex:none; font-size:15px}
.reperes span{font-size:15.5px}

/* Sommaire de fiche */
.sommaire{background:var(--fond-2); border-radius:var(--r); padding:20px 24px; margin:0 0 36px}
.sommaire-titre{font-family:var(--titre); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:12px}
.sommaire ol{margin:0; padding-left:1.2em}
.sommaire li{margin-bottom:.4em; font-size:15.5px}
.sommaire a{color:var(--encre)}
.sommaire a:hover{color:var(--mc)}

/* Cartes de lien */
.carte-lien{display:flex; align-items:center; gap:18px; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:20px 22px; margin:28px 0; transition:.2s; color:inherit; clear:both}
.carte-lien:hover{border-color:var(--mc); box-shadow:var(--ombre); text-decoration:none; transform:translateY(-2px)}
.carte-lien-ico{width:44px; height:44px; border-radius:11px; background:var(--mc-doux); color:var(--mc); display:grid; place-items:center; flex:none}
.carte-lien-ico svg{width:21px; height:21px}
.carte-lien strong{display:block; font-family:var(--titre); font-weight:600; color:var(--encre); font-size:16.5px; margin-bottom:3px}
.carte-lien > span > span{font-size:14px; color:var(--texte-doux); line-height:1.45; display:block; word-break:break-word}

/* Étapes numérotées */
.etapes{counter-reset:s; list-style:none; padding:0; margin:26px 0}
.etapes > li{counter-increment:s; position:relative; padding-left:52px; margin-bottom:22px}
.etapes > li::before{content:counter(s); position:absolute; left:0; top:-1px; width:34px; height:34px; border-radius:50%; background:var(--mc); color:#fff; font-family:var(--titre); font-weight:600; font-size:15px; display:grid; place-items:center}
.etapes > li > strong{display:block; font-family:var(--titre); font-size:17px; color:var(--encre); margin-bottom:5px}
.etapes ul{margin:.5em 0 0; padding-left:1.2em}
.etapes ul li{margin-bottom:.35em; font-size:15.5px}

/* Tableaux */
.tableau{overflow-x:auto; -webkit-overflow-scrolling:touch; clear:both; margin:28px 0}
.tableau table{width:100%; border-collapse:collapse; font-size:15.5px; background:var(--papier)}
.tableau th,.tableau td{padding:12px 15px; border:1px solid var(--trait); text-align:left; vertical-align:top}
.tableau th{background:var(--mc-doux); font-family:var(--titre); font-weight:600; color:var(--encre); font-size:14.5px}

/* Vidéo : rien n'est chargé avant le clic */
.video{margin:28px 0; clear:both}
.video-lancer{
  position:relative; display:block; width:100%; padding:0; border:1px solid var(--trait);
  border-radius:var(--r); overflow:hidden; background:var(--encre); cursor:pointer; text-align:left;
}
.video-vignette{display:block; width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; opacity:.75; transition:.25s}
.video-vignette--nue{display:block; width:100%; aspect-ratio:16/9; background:linear-gradient(150deg, var(--mc) 0%, var(--encre) 100%); opacity:.9}
.video-lancer:hover .video-vignette{opacity:.95}
.video-play{position:absolute; left:50%; top:calc(50% - 24px); transform:translate(-50%,-50%); width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:var(--ombre-f)}
.video-play::after{content:''; position:absolute; left:calc(50% + 3px); top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent var(--mc)}
.video-txt{display:block; padding:14px 18px; background:var(--papier); font-family:var(--titre); font-weight:600; font-size:15.5px; color:var(--encre)}
.video-txt small{display:block; font-weight:400; font-size:13px; color:var(--texte-doux); font-family:var(--corps); margin-top:2px}
.video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r); display:block}
.video-attente{border:2px dashed var(--trait); border-radius:var(--r); background:var(--papier); padding:34px 26px; text-align:center; margin:28px 0}
.video-attente-ico{width:52px; height:52px; border-radius:14px; background:var(--mc-doux); color:var(--mc); display:grid; place-items:center; margin:0 auto 16px}
.video-attente-ico svg{width:24px; height:24px}
.video-attente h3{font-size:18px; margin-bottom:8px}
.video-attente p{font-size:14.5px; color:var(--texte-doux); margin:0 auto; max-width:46ch}

/* ------------------------------ Bas de page ------------------------------ */
.bas-page{padding-bottom:8px}
.document.bas-page{padding-top:0}
.retour{margin:40px 0 0; padding-top:26px; border-top:1px solid var(--trait); font-size:14.5px}
.retour a{font-family:var(--titre); font-weight:600; display:inline-flex; align-items:center; gap:8px; color:var(--mc)}
.retour svg{width:13px; height:13px}
.pagination{display:flex; gap:14px; flex-wrap:wrap; margin:44px 0 0; padding-top:28px; border-top:1px solid var(--trait)}
.pagination a{flex:1 1 220px; background:var(--papier); border:1px solid var(--trait); border-radius:var(--r); padding:16px 20px; color:inherit; transition:.2s}
.pagination a:hover{border-color:var(--mc); box-shadow:var(--ombre); text-decoration:none}
.pagination .lbl{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux); font-family:var(--titre); font-weight:600; display:block; margin-bottom:4px}
.pagination .ttl{font-family:var(--titre); font-weight:600; color:var(--encre); font-size:16px; line-height:1.3}
.pagination .suiv{text-align:right}

.pied{margin-top:76px; background:var(--marine); color:#c9d2e0; padding:44px 0 38px}
.pied .contenant{display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between}
.pied strong{display:block; font-family:var(--titre); color:#fff; font-size:16px; margin-bottom:6px; font-weight:600}
.pied p{margin:0; font-size:14px; line-height:1.6; max-width:44ch}
.pied-cols{display:flex; gap:44px; flex-wrap:wrap}
.pied a{color:#8fd3d8}
.pied .mini{font-size:13px; color:#8e99ad; margin-top:6px}

/* ------------------------------ Impression ------------------------------ */
@media print{
  .bandeau,.ariane,.pagination,.retour,.pied,.panneau,.deco,.video-lancer{display:none!important}
  body{background:#fff; font-size:11.5pt}
  .document{max-width:none; padding:0}
  .figure,.encadre,blockquote,.carte-lien{break-inside:avoid}
  a{color:inherit}
}

@media(max-width:760px){
  body{font-size:16.5px}
  .marque img{width:108px}
  .marque-txt{display:none}
  .heros-in{padding:48px 18px 44px}
  .document{padding:32px 18px 12px}
  .contenant,.bandeau-in,.ariane ol,.chapitre-tete-in{padding-inline:18px}
  .panneau{right:18px}
}
@media(max-width:900px){
  .deco{display:none}
}