@charset "utf-8";

/* =============================================================================
   RESET
   ============================================================================= */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}

body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
blockquote, q {quotes:none;}
blockquote::before, blockquote::after, q::before, q::after {content:'';content:none;}
a {background:transparent;font-size:100%;margin:0;padding:0;vertical-align:baseline;cursor:pointer;text-decoration:none;color:inherit;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0;}
input, select {vertical-align:middle;outline:none;}
* {box-sizing:border-box;text-rendering:optimizeLegibility;}
*::before, *::after {margin:0;}
ul {list-style:none;}
main {
  display:block;
  flex: 1;
}


/* =============================================================================
   LIENS GLOBAUX
   ============================================================================= */
a,
a:visited,
a:hover,
a:active,
a:focus {
    color: #FFD700;
    text-decoration: none;
}
a:hover {
    color: #FFCC66;
    text-decoration: underline;
}
a {
  transition: all .1s linear;
}
a.no-transition {
  transition: none;
}


/* =============================================================================
   VARIABLES CSS
   ============================================================================= */
:root {
  --deepBlue: hsl(210,85%,15%);
  --blue: hsl(210,59%,25%);
  --lightBlue: hsl(215,40%,43%);
  --lighterBlue: hsl(215,40%,55%);
  --lightestBlue: hsl(215,55%,75%);
  --linkBlue: hsl(210,85%,55%);
  --orange: hsl(15, 91%, 58%);
  /* home */
  --bluebox: hsl(215, 40%, 48%);
  --redbox: hsl(0, 75%, 58%);
  --orangebox: hsl(16, 88%, 58%);
  --fushiabox: hsl(340, 60%, 54%);
  --purplebox: hsl(290, 28%, 54%);
  --green: hsl(180,50%,40%);
  --noir-cosmique: hsl(225, 17%, 6%);
  --bleu-nuit: hsl(215, 22%, 16%);
  --bleu-stellaire: hsl(175, 35%, 45%);
  --violet-nebuleuse: hsl(243, 100%, 70%);
  --bleu-profond: hsl(205, 78%, 20%);
  --gris-lunaire: hsl(200, 5%, 77%);
  --blanc-galactique: hsl(210, 17%, 97%);
  --or-solaire: hsl(43, 100%, 67%);
  --rouge-supernova: hsl(0, 100%, 65%);
  --turquoise-cosmique: hsl(201, 61%, 46%);
}


/* =============================================================================
   FONTS
   ============================================================================= */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-serif-v8-latin-regular.woff2') format('woff2'),
       url('../fonts/noto-serif-v8-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-serif-v8-latin-700.woff2') format('woff2'),
       url('../fonts/noto-serif-v8-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v7-latin-regular.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/work-sans-v7-latin-italic.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-italic.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/work-sans-v7-latin-500.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-500.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/work-sans-v7-latin-500italic.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-500italic.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/work-sans-v7-latin-600.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/work-sans-v7-latin-600italic.woff2') format('woff2'),
       url('../fonts/work-sans-v7-latin-600italic.woff') format('woff');
}
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak-as: normal;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-ic_images::before {content:"\E690";}
.icon-ic_comptes_redus::before {content:"\E910";}
.icon-ic_ephemerides::before {content:"\E904";}
.icon-ic_logiciels::before {content:"\E691";}
.icon-ic_media::before {content:"\E68F";}
.icon-ic_connexion::before {content:"\E68C";}
.icon-ic_rss_feed::before {content:"\e906";}
.icon-ic_institut::before {content:"\e902";}
.icon-ic_services::before {content:"\e909";}
.icon-ic_recherche::before {content:"\e905";}
.icon-ic_school::before {content:"\e907";}
.icon-ic_publications::before {content:"\e904";}


/* =============================================================================
   FORMATAGE TEXTE
   ============================================================================= */
sup, sub { font-size: 70%; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
.caps { text-transform: uppercase; }
.scaps { font-variant: small-caps; }
.semibold { font-weight: 500; }
.bold { font-weight: 600; }

pre {
  overflow-y: hidden;
  overflow-x: auto;
  padding: 1rem 0;
}
.encadre {
  display: inline-block;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid hsl(0,0%,85%);
}


/* =============================================================================
   OMBRE IMAGE
   ============================================================================= */
.img_shadow {
  -webkit-box-shadow: 5px 5px 5px 0px #1B1B1B, inset 4px 4px 15px 0px #1B1B1B, 5px 5px 15px 5px rgba(0,0,0,0);
  box-shadow: 5px 5px 5px 0px #1B1B1B, inset 4px 4px 15px 0px #1B1B1B, 5px 5px 15px 5px rgba(0,0,0,0);
}


/* =============================================================================
   VIDÉO
   ============================================================================= */
.video-frame-container {
  display: block;
  position: relative;
  width: 100%;
  margin: 2rem auto;
  padding-bottom: calc(100% / (16/9));
}
.video-frame-container_4-3 {
  display: block;
  position: relative;
  width: 100%;
  margin: 2rem auto;
  padding-bottom: calc(100% / (4/3));
}
figure .video-frame-container, figure .video-frame-container_4-3 {
  margin: 0 auto;
}
.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* =============================================================================
   HTML / BODY
   ============================================================================= */
html {
  font-size: 100%;
  height: 100vh;
}
body {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 100%;
  font-size: 1rem;
  font-family: 'Baskerville', sans-serif;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
  background: url('../img/fond.jpg') no-repeat center center fixed;
  background-size: cover;
}


/* =============================================================================
   STRUCTURE GÉNÉRALE
   ============================================================================= */
.inner-header, .inner-main, .inner-footer {
  width: 100%;
}
.inner-main {
  background-color: #fff;
}
body.body-home .inner-main {
  background-color: transparent;
}


/* =============================================================================
   ÉLÉMENTS CACHÉS / TRANSITIONS
   ============================================================================= */
#main-nav li ul, .in-page-nav, .active-section, .active-sous-section,
.footer-nav a br, #top {display:none;}

#main-nav li ul.visible, .cache.visible {display: block;}

.cache.cache-opacity { opacity: .65; }
.header { pointer-events: auto; }
.header-opacity { opacity: .35; }
.header-bgColor { background-color: hsl(210,55%,10%); }

.no-transition,
body > header.no-transition,
.inner-header a.logo.no-transition,
.inner-header button.no-transition,
#main-nav.no-transition,
#main-nav.show.no-transition,
.inner-main.no-transition,
.page.no-transition,
.in-page-nav.no-transition,
#top.no-transition,
p.last-update.no-transition,
.home.no-transition {
  transition: none;
}


/* =============================================================================
   HEADER
   ============================================================================= */
body > header {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 3rem;
  transition: background-color .5s;
  font-weight: 500;
  background-color: var(--deepBlue);
}
.inner-header {
  position: relative;
}
.first-row {
  display: flex;
  justify-content: space-between;
}
.inner-header .logo {
  display: block;
  width: 100%;
  background: url('../img/logo_small.png') no-repeat center;
  background-size: 12rem;
  transition: background-size .3s ease;
}
body > header.scrolled .inner-header .logo {
  background-size: 9rem;
}
.inner-header form {
  display: flex;
  align-items: center;
}
.inner-header button {
  height: 3rem;
  border: none;
  font-family: 'Baskerville', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0 1.25rem;
  cursor: pointer;
  background-color: transparent;
  transition: background-color .2s linear, opacity .2s linear;
  color: #fff;
}


/* =============================================================================
   NAVIGATION MOBILE
   ============================================================================= */
#main-nav {
  z-index: 3;
  position: fixed;
  visibility: hidden;
  height: 100%;
  top: 0;
  transform: translate3d(-18.5rem, 0, 0);
  line-height: 2.5rem;
  width: 18.5rem;
  transition: transform .5s;
  font-size: .875rem;
  overflow-y: scroll;
  background-color: #fff;
}
#main-nav.show {
  visibility: visible;
  transition: transform .35s cubic-bezier(0.645, 0, 0.355, 1);
}
#main-nav.active {
  transform: translate3d(0, 0, 0);
}
#main-nav.shadow {
  box-shadow: 0px 0px 15px hsla(0, 0%, 0%, .8);
}
.chapeau {
  padding: 1.5rem;
  background-color: var(--blue);
}
.chapeau img {
  display: block;
  height: 5rem;
}
.cache {
  display: none;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity .5s;
  overflow: hidden;
  pointer-events: none;
}


#burger, #cross {
  cursor: pointer;
  height: 3rem;
  width: 3.5rem;
  padding: .75rem 1rem;
}
#cross {
  position: absolute;
  top: 0;
  right: 0;
}
#cross .span1, #cross .span2 { transform-origin: center; }
#cross .span1 { transform: rotate(45deg); }
#cross .span2 { transform: rotate(-45deg); }

.nav-icon {
  position: relative;
  top: .3125rem;
  margin-right: 1rem;
  font-size: 1.5rem;
  color: var(--lightBlue);
}
.icon-ic_institut, .icon-ic_publications { top: .25rem; }
.icon-ic_rss_feed::before { color: #fff; }

#main-nav li.news { background-color: var(--lighterBlue); }
#main-nav li.news a { color: #fff; }
#main-nav a {
  display: block;
  outline: none;
  color: var(--lightBlue);
}
#main-nav a.item1 { padding: .375rem 1rem .5rem 1.25rem; }
#main-nav a.item2 {
  padding: .125rem .5rem;
  margin-left: 3.25rem;
}
#main-nav li ul { background-color: hsl(0,0%,94%); }
#main-nav li li:first-of-type { padding-top: .5rem; }
#main-nav li li:last-of-type { padding-bottom: .75rem; }


/* =============================================================================
   PAGE D'ACCUEIL - HOME
   ============================================================================= */
.home {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5rem;
  padding: 3.5rem 0 .5rem; /* ← pas de padding latéral pour éviter le débordement mobile */
}
.home > * { min-width: 0; }
.home .b1 { z-index: 0; }

/* --- b2 : boutons raccourcis --- */
.home .b2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.5rem;
}
.home .b2 a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6rem;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .0125rem;
}
.home .b2 a img {
  width: 2.5rem;
  margin-bottom: .75rem;
}
.home .b2 a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.home .b2 li:nth-child(1) a::after { background-color: hsl(195, 60%, 65%); }
.home .b2 li:nth-child(2) a::after { background-color: hsl(200, 55%, 55%); }
.home .b2 li:nth-child(3) a::after { background-color: hsl(205, 55%, 45%); }
.home .b2 li:nth-child(4) a::after { background-color: hsl(210, 60%, 35%); }
.home .b2 li:nth-child(5) a::after { background-color: hsl(215, 65%, 25%); }
.home .b2 li:nth-child(6) a::after { background-color: hsl(220, 70%, 15%); }

/* --- b3/b4/b5 : rubriques --- */
.home .b3-b4-b5, .home .b4-b5 {
  display: grid;
  grid-gap: .5rem;
}
.home .b3, .home .b4, .home .b5 {
  background-color: #fff;
  overflow: hidden;
}

/* =====================================================
   VARIABLES DE COULEUR PAR RUBRIQUE
   Pour changer la couleur d'une rubrique, modifiez
   uniquement --couleur-rubrique dans le bloc concerné.
   Le fond du titre, les sous-titres, les puces ET les
   liens s'adapteront automatiquement.
   ===================================================== */
.home .b3 { --couleur-rubrique: var(--orangebox); }
.home .b4 { --couleur-rubrique: var(--violet-nebuleuse); }
.home .b5 { --couleur-rubrique: var(--green); }

/* Liens dans chaque rubrique : couleur de la rubrique (écrase le jaune global) */
.home .b3 a, .home .b3 a:visited, .home .b3 a:hover, .home .b3 a:active, .home .b3 a:focus { color: var(--couleur-rubrique); text-decoration: none; }
.home .b4 a, .home .b4 a:visited, .home .b4 a:hover, .home .b4 a:active, .home .b4 a:focus { color: var(--couleur-rubrique); text-decoration: none; }
.home .b5 a, .home .b5 a:visited, .home .b5 a:hover, .home .b5 a:active, .home .b5 a:focus { color: var(--couleur-rubrique); text-decoration: none; }

/* Les titres h2 dans les box-title restent en blanc (sur fond coloré) */
.home .box-title a,
.home .box-title a:visited,
.home .box-title a:hover,
.home .box-title a:active,
.home .box-title a:focus { color: #fff; }

.home .box-title {
  height: 3rem;
}
.home .box-title a {
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 0;
}
.home .box-title a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.home .b3 .box-title a::after { background-color: var(--couleur-rubrique); }
.home .b4 .box-title a::after { background-color: var(--couleur-rubrique); }
.home .b5 .box-title a::after { background-color: var(--couleur-rubrique); }

.home .box-title img {
  height: 1.5rem;
  align-self: flex-end;
}
.home h2 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  align-self: center;
  margin-left: .75rem;
}
.b3 .box-title img { margin-bottom: .875rem; }
.b4 .box-title img { margin-bottom: .75rem; }
.b5 .box-title img { margin-bottom: .75rem; }

.home .box-content > ul > li { padding: 1.375rem 1.125rem 0; }
.home .box-content > ul > li + li { border-top: 1px solid hsl(0, 0%, 85%); }
.home .box-content li ul { padding: .875rem 1rem 1rem .625rem; }
.home .b3 ul, .home .b4 ul, .home .b5 ul { line-height: 1.5; }

/* Sections newsletter/forms/seminary */
.home .newsletter-section, .home .forms-section, .home .seminary-section {
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  font-size: .9375rem;
  padding: .4375rem .6875rem;
  letter-spacing: .01rem;
  position: relative;
  z-index: 0;
}
.home .box-content span::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.home .newsletter-section::after { background-color: var(--couleur-rubrique); }
.home .forms-section::after      { background-color: var(--couleur-rubrique); }
.home .b5 span.seminary-section::after { background-color: var(--couleur-rubrique); }

/* Items */
.home .newsletter-item, .home .forms-item, .home .seminary-item {
  position: relative;
  padding-left: 1.25rem;
}
.home .seminary-item span {
  display: block;
  width: 100%;
}
.home .b5 .seminary-item + .seminary-item { margin-top: 1rem; }

.home .newsletter-item::before, .home .forms-item::before, .home .seminary-item::before {
  position: absolute;
  left: .0625rem;
  top: .6rem;
  content: '';
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
}
.home .newsletter-item::before {
  border: .7px solid var(--couleur-rubrique);
  background-color: hsla(340, 60%, 54%, .25);
}
.home .forms-item::before {
  border: .7px solid var(--couleur-rubrique);
  background-color: hsla(215, 40%, 43%, .25);
}
.home .seminary-item::before {
  border: .7px solid var(--couleur-rubrique);
  background-color: hsla(180,75%,40%,.25);
}

.home .b5 .seminary-item + .seminary-item::after {
  position: absolute;
  left: 0;
  top: -.75rem;
  content: '';
  width: 100%;
  border-top: 1px solid hsl(0, 0%, 85%);
}

/* Séminaires */
.seminary-title {
  margin: .125rem 0 .25rem;
  color: hsl(0,0%,15%);
}
.seminary-author, .seminary-date, .seminary-place {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  color: var(--green);
  padding-left: 1.5rem;
  margin-top: .125rem;
  margin-left: .75rem;
}
.seminary-author::before {
  content: url("../img/author(--green.html).svg");
  position: absolute;
  top: .0875rem;
  left: 0;
  width: .875rem;
  opacity: .65;
}
.seminary-date::before {
  content: url("../img/date(--green.html).svg");
  position: absolute;
  top: .08125rem;
  left: 0;
  width: .875rem;
  opacity: .65;
}
.seminary-place::before {
  content: url("../img/place(--green.html).svg");
  position: absolute;
  top: 0.125rem;
  left: .0625rem;
  width: .75rem;
  opacity: .65;
}

/* Bouton */
.box-btn {
  display: flex;
  padding: 1.125rem;
}


/* =============================================================================
   PAGE CONTENU
   ============================================================================= */
.page a { color: var(--linkBlue); }
.page a.archives-btn {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
a.flat-btn {
  text-transform: uppercase;
  line-height: 1;
  font-weight: 600;
  padding: .5rem .875rem .5625rem;
  color: var(--orange);
  border: 2px solid var(--orange);
}
.page a.flat-btn { display: inline-block; }
.page a:not(.flat-btn):not(.newsLink):not(.news-archive-item):not(.img-link):not(.images-page-btn) {
  border-bottom: 1px solid hsla(0, 0%, 0%, 0);
}
a.img-link img {
  vertical-align: middle;
  margin: 0 .25rem;
}
.home a.flat-btn.newsletter span { display: block; }

.page {
  flex: 1;
  position: relative;
  width: 100%;
  padding: 4.5rem 1rem 1rem;
}
.page .ui-img-right, .page .ui-img-left, .page .ui-img-center {
  display: block;
  width: 100%;
  margin: 1.625rem 0 1.375rem;
}
.page .ui-img-center, .page .ui-img-center.medium { max-width: 100%; }
.page .ui-img-right, .page .ui-img-left { max-width: 16rem; }

.page h1, .page h2, .page h3 { font-family: 'Baskerville'; }
.page h1, .page h2 { font-weight: 700; }
.page h1, .page h2, .page h3, .page h4 { line-height: 1.25; }
.page h1 {
  position: relative;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--lighterBlue);
}
.page h1::after {
  content:'';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4rem;
  border-bottom-width: 4px;
  border-bottom-style: solid;
}
.page h2 { font-size: 1.625rem; color: var(--lighterBlue); }
.page h3 { font-size: 1.2rem; color: var(--lighterBlue); font-weight: 600; }
.page h2, .page h3 { margin: 2.5rem 0 1rem; }
.page h1 + h2, .page h2 + h3 { margin-top: 2rem; }
.page h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; margin-top: 1.25rem; }
.page h4 + p { margin-top: .5rem; }

.page p, .page ul, .page ol { line-height: 1.5; }
.page p, .page div.encadre { margin: 1.25rem 0 .75rem; }
.page div.encadre *:first-of-type { margin-top: 0; }
.page div.encadre *:last-of-type { margin-bottom: 0; }
.page ul, .page ol { margin: 1.25rem 0; }
.page p + ul, .page p + ol, .page ul li ul, .page ul li ol, .page ol li ol, .page ol li ul { margin-top: .5rem; }
.page > ul, .page article > ul { padding-left: .75rem; }
.page ul li, .page ol li ul li { position: relative; padding-left: 1.5rem; }
.page li { margin-top: .5rem; }
.page li p { margin: .5rem 0; }
.page li ul, .page li ol { margin-bottom: .5rem; }
.page li ul li, .page li ol li { margin-top: .0625rem; }
.page ul li::before {
  position: absolute;
  left: .0625rem;
  top: .625rem;
  content:'';
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.page > ul li::before, .page article > ul li:before { background-color: hsl(0,0%,25%); }
.page li ul li::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid hsl(0,0%,25%);
  background-color: transparent;
}
.page > ol, .page article > ol { padding-left: 1.625rem; }
.page ol li { padding-left: .5rem; }
.page li ol { padding-left: 1.125rem; }

/* Tables */
.page .ui-table-container { overflow-y: hidden; overflow-x: auto; }
.page .ui-table {
  margin: 1rem auto;
  caption-side: bottom;
  width: 100%;
  border: 1px solid hsl(0, 0%, 85%);
}
.page .ui-table caption { margin: 1rem 0; }
.page .ui-table th, .page .ui-table td { padding: 1rem; text-align: center; vertical-align: middle; }
.page .ui-table th { font-family:'Work Sans', sans-serif; font-weight: 500; background-color: var(--lightBlue); color: #fff; }
.page .ui-table tr { border-bottom: 1px solid hsl(0, 0%, 85%); margin: 0 1rem; }
.page .ui-table td img { display: block; margin: .25rem auto; }

/* Séminaires */
.page article.ui-seminar { margin: 1.375rem 0; padding: .75rem 1rem; border: 1px solid hsl(0, 0%, 85%); }
.page article.ui-seminar h1,
.page article.ui-seminar h2,
.page article.ui-seminar h3 {
  position: relative;
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: .5rem;
  padding-bottom: 1.5rem;
  color: var(--lighterBlue);
}
.page article.ui-seminar h1::after,
.page article.ui-seminar h2::after,
.page article.ui-seminar h3::after {
  content:'';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4rem;
  border-bottom-width: 4px;
  border-bottom-style: solid;
}
.page article.ui-seminar h1 + p,
.page article.ui-seminar h2 + p,
.page article.ui-seminar h3 + p {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 2rem 0 1.375rem;
  color: var(--lighterBlue);
}
.page article.ui-seminar li::before { display: none; }
.page article.ui-seminar ul li { padding-left: 0; color: hsl(0,0%,60%); }
.page article.ui-seminar ul li + li { margin-top: 0; }
.page article.ui-seminar p { margin-bottom: 0; }

/* Publications */
.page article.ui-publication { margin: 1.375rem 0; padding-bottom: .75rem; border: 1px solid hsl(0, 0%, 85%); }
.page article.ui-publication ul {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin: 0;
  padding-left: 0;
  font-size: .875rem;
}
.page article.ui-publication ul.top-list,
.page article.ui-publication p.year {
  padding: .75rem 1rem .625rem;
  border-bottom: 1px solid hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 96%);
}
.page article.ui-publication p.year { margin: 0; }
.page article.ui-publication ul.bottom-list { margin: 2rem 1rem 0; padding-top: .625rem; border-top: 1px solid hsl(0, 0%, 85%); }
.page article.ui-publication li { padding-left: 0; margin: 0; }
.page article.ui-publication li::before { display: none; }
.page article.ui-publication h1 { position: relative; font-size: 1.5rem; margin: 1.5rem 1rem .5rem; padding-bottom: 1.5rem; color: var(--lighterBlue); }
.page article.ui-seminar h1::after { content:''; position: absolute; left: 0; bottom: 0; width: 4rem; border-bottom-width: 4px; border-bottom-style: solid; }
.page article.ui-publication .author { font-weight: 500; margin: 2rem 1rem 0; color: var(--lighterBlue); }

/* News archives */
.page ul.news-archive-container { padding: 0; display: grid; grid-gap: 1rem; }
.page ul li.news-archive {
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px hsl(0, 0%, 85%) inset;
  transition: box-shadow .2s ease, transform .1s linear;
  will-change: transform;
}
.page ul li.news-archive::before { display: none; }
.page ul li a.news-archive-item { display: block; }
.page ul li a.news-archive-item img { display: block; width: 100%; }
.page .news-date { display: block; padding: .625rem 1rem .25rem; color: hsl(0,0%,50%); }
.page .news-title { display: block; padding: 0 1rem .75rem; line-height: 1.375; }
time { color: hsl(0,0%,60%); text-transform: uppercase; font-weight: 500; font-size: .875rem; }

/* Figures */
.page .ui-figure { line-height: 1.375; margin: 1.625rem 0 1.375rem; max-width: 47rem; }
.page .ui-figure.small { max-width: 23.5rem; }
.page .ui-figure.medium { max-width: 35.25rem; }
.page .ui-figure.left, .page .ui-figure.right { max-width: 16rem; }
.page .ui-figure.first,
.page .ui-figure.small.first,
.page .ui-figure.medium.first,
.page .ui-figure.medium.to-left.first { margin-top: 0; }
.page .ui-figure img { display: block; width: 100%; margin: 0 auto; }
.page .ui-figure figcaption { font-size: .875rem; color: hsl(0,0%,50%); margin-top: .5rem; }
.page .ui-figure video { width: 100%; }

/* Formulaires */
.page .ui-form { margin: 1.375rem 0; }
.page .ui-form input, .page .ui-form select, .page .ui-form button {
  display: inline-block;
  padding: 0 1rem;
  vertical-align: middle;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  border: none;
  width: 50%;
  height: 3rem;
}
.page .ui-form input { padding-left: 1rem; }
.ui-form input, .ui-form select { color: hsl(0, 0%, 25%); background-color: hsla(16,100%,62%,.15); opacity: 1; }
.ui-form input::placeholder { color: var(--orange); opacity: .8; }
.page .ui-form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; }
.page .ui-form button {
  text-transform: uppercase;
  line-height: 1;
  background-color: #fff;
  cursor: pointer;
  transition: all .1s linear;
  margin-top: .5rem;
  color: var(--orange);
  border: 2px solid var(--orange);
}
#formNewsletter input, #formNewsletter button { width: 100%; }

/* Newsletter liste */
.page ul.ui-list-newsletter li::before { display: none; }
.page ul.ui-list-newsletter { padding-left: 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.page ul.ui-list-newsletter li { margin: -1px -1px 0 0; padding-left: 0; }
a.newsLink {
  display: flex;
  height: 3rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding-bottom: .0625rem;
  transition: all .05s linear;
  font-weight: 500;
  border: 1px solid var(--lightestBlue);
  color: var(--linkBlue);
}
a.newsLink:hover { background-color: var(--lighterBlue); color: #fff; }
a.current { width: calc(100% / 2); }

/* Contacts */
a.flat-btn.contacts { margin-right: 1rem; }
a.flat-btn.contacts span { display: block; }
.page ul.contacts-list { padding: 0; margin: 1.625rem 0; }
.page ul li.contacts { padding: 0; margin-top: 1rem; transition: all .1s linear; }
.page ul li.contacts::before { display: none; }

/* Annuaire */
.annuaire-call { font-weight: 500; position: relative; padding-left: 1.75rem; }
.annuaire-call::before {
  position: absolute;
  content: '';
  top: .125rem;
  left: 0;
  height: 1.125rem;
  width: 1.125rem;
  background: url('../img/call-blue.svg') no-repeat center;
  background-size: 1.125rem;
}
.page ul.annuaire { padding: 0; border: 1px solid hsl(0, 0%, 85%); max-width: 20rem; }
.page li.annuaire-item::before { display: none; }
.page li.annuaire-item {
  display: grid;
  grid-template-columns: 80% 20%;
  margin: 0 .75rem;
  padding: .75rem .125rem;
  border-bottom: 1px solid hsl(0, 0%, 85%);
}
li.annuaire-item:last-of-type { border: none; }
li.annuaire-item:not(.adjoints):not(.secretariat) { grid-template-rows: repeat(2, 1fr); }
li.annuaire-item.adjoints { grid-template-rows: repeat(3, 1fr); }
span.annuaire-dir-fonction { display: flex; font-weight: 500; }
li.annuaire-item:not(.secretariat) span.annuaire-dir-fonction { grid-column: 1 / 3; grid-row: 1 / 2; }
li.annuaire-item.secretariat span.annuaire-dir-fonction { grid-column: 1 / 2; }
span.annuaire-dir-nom { display: flex; grid-column: 1 / 2; grid-row: 2 / 3; }
span.annuaire-dir-tel { display: flex; justify-content: flex-end; grid-column: 2 / 3; }
li.annuaire-item:not(.secretariat) span.annuaire-dir-tel { grid-row: 2 / 3; }
li.annuaire-item.adjoints span.annuaire-dir-nom.second,
li.annuaire-item.adjoints span.annuaire-dir-tel.second { grid-row: 3 / 4; }

/* Tableaux responsifs */
.responsive-table { margin: .875rem 0 1.25rem 0; font-size: 1rem; cursor: default; width: 100%; max-width: 20rem; }
.responsive-table thead { display: none; }
.responsive-table tbody { display: grid; grid-gap: .5rem; }
.responsive-table tbody tr { display: flex; flex-direction: column; border: 1px solid hsl(0, 0%, 85%); }
.responsive-table tbody th, .responsive-table tbody td { display: flex; height: 2.75rem; align-items: center; }
.responsive-table tbody th[scope="row"] { font-weight: 500; background-color: var(--lightBlue); margin: -1px -1px 0 -1px; justify-content: center; }
.responsive-table tbody th[scope="row"] a { color: #fff; }
.responsive-table tbody td { position: relative; margin: 0 .75rem; padding: 0 .125rem; justify-content: flex-end; text-align: right; }
.responsive-table tbody td:not(:first-of-type) { border-top: 1px solid hsl(0, 0%, 85%); }
.responsive-table tbody td[data-title]::before { position: absolute; left: .125rem; content: attr(data-title); font-weight: 500; color: hsl(0, 0%, 50%); }

/* Divers */
.cancel-float { clear:both; }
p.last-update { text-align: right; padding: 1rem; transition: all .2s linear; color: hsl(0,0%,70%); }
.legalmention { height: 140px; width: 100%; border: 2px solid hsl(0,0%,35%); padding: .5rem .75rem; background-color: hsl(0,0%,94%); }


/* =============================================================================
   FOOTER
   ============================================================================= */
footer { width: 100%; background-color: var(--deepBlue); }
.inner-footer { font-size: .875rem; }
.footer-nav li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 3rem;
  background-color: var(--blue);
  margin-bottom: .125rem;
  transition: all .2s linear;
}
.footer-nav li:hover { background-color: var(--lightBlue); }
.footer-nav a { display: flex; align-items: center; width: 100%; height: 100%; line-height: 1.1875; padding: 0 1rem; color: #fff; }
.footer-nav li:nth-child(1) a img { margin: 0 1.125rem 0 .125rem; }
.footer-nav li:nth-child(2) a img { margin: 0 1.25rem 0 .25rem; }
.footer-nav li:nth-child(3) a img, .footer-nav li:nth-child(4) a img { margin: 0 1rem 0 0; }
.footer-nav li:nth-child(5) a img, .footer-nav li:nth-child(6) a img { margin: 0 1.0625rem 0 .0625rem; }

/* Footer page d'accueil */
body.body-home .inner-footer { padding: 0; } /* ← corrigé : pas de padding latéral sur mobile */
body.body-home .inner-footer .footer-nav li:nth-child(5) br { display: none; }


/* =============================================================================
   IMAGE SURVOLÉE / TABLEAU / PHOTOS DU MOIS
   ============================================================================= */
.img-survole { position: relative; display: inline-block; max-width: 100%; }
.img-survole br { display: none; }
.img-survole img { display: block; width: 100%; height: auto; }
.img-survole .img-hover { position: absolute; top: 0; left: 0; display: none; width: 100%; }

.tableau-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tableau { display: grid; grid-template-columns: var(--cols); gap: 10px; min-width: max-content; }
.tableau > div { padding: 10px; border: 1px solid #ccc; }

.photos-mois-slider { 
  overflow: hidden; 
  width: 100%; 
  padding: .5rem 0; 
  position: relative; 
  height: 96px; }
.photos-mois-track {
  display: flex;
  gap: .5rem;
  animation: scroll-photos 30s linear infinite;
  position: absolute;
  left: 0;
  top: .5rem;
}
.photos-mois-track:hover { animation-play-state: paused; }
.photos-mois-item img { 
  height: 100px; 
  width: auto; 
  object-fit: cover; 
  border-radius: 3px; 
  cursor: pointer; 
  transition: transform .2s; }
.photos-mois-item img:hover { transform: scale(1.05); }

@keyframes scroll-photos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* FIX TAP MOBILE */
.menu a { pointer-events: auto; position: relative; z-index: 10; }
.submenu { pointer-events: none; }
.menu .has-submenu:hover > .submenu { pointer-events: auto; }


/* =============================================================================
   MEDIA QUERY : min-width 360px
   ============================================================================= */
@media (min-width: 360px) {
  .inner-header .logo {
    background: url('../img/logo_small.png') no-repeat center;
    background-size: 12rem;
  }
}


/* =============================================================================
   MEDIA QUERY : min-width 374px
   ============================================================================= */
@media (min-width: 374px) {
  a.flat-btn.contacts span { display: inline; }
}


/* =============================================================================
   MEDIA QUERY : min-width 420px
   ============================================================================= */
@media (min-width: 420px) {
  .page ul.ui-list-newsletter { grid-template-columns: repeat(3, 1fr); }
  a.current { width: calc(100% / 3); }
}


/* =============================================================================
   MEDIA QUERY : min-width 480px
   ============================================================================= */
@media (min-width: 480px) {
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .125rem;
    margin-bottom: .125rem;
  }
  .footer-nav li { margin: 0; }
  .footer-nav a { justify-content: center; }
  .footer-nav li:nth-child(1) a img,
  .footer-nav li:nth-child(2) a img,
  .footer-nav li:nth-child(3) a img,
  .footer-nav li:nth-child(4) a img,
  .footer-nav li:nth-child(5) a img,
  .footer-nav li:nth-child(6) a img { margin: 0 .75rem 0 0; }
  #formNewsletter input { width: 100%; }
  #formNewsletter button { display: inline-block; width: calc(50% - .25rem); }
  #formNewsletter button:last-of-type { margin-left: .5rem; }
}


/* =============================================================================
   MEDIA QUERY : min-width 600px
   ============================================================================= */
@media (min-width: 600px) {
  .page .ui-img-center.medium { max-width: 50%; }
  .page .ui-img-left { float: left; margin: .375rem 2rem 1.375rem 0; }
  .page .ui-img-right { float: right; margin: .375rem 0 1.375rem 2rem; }
  .page ul.news-archive-container { grid-template-columns: 1fr 1fr; }
  .page .ui-figure { text-align: center; margin: 1.625rem auto 1.375rem; }
  .page .ui-figure.left { float: left; margin: .625rem 2rem 1.375rem 0; }
  .page .ui-figure.right { float: right; margin: .625rem 0 1.375rem 2rem; }
  .page .ui-figure.medium.to-left { margin: 1.625rem 0 1.375rem; }
  .page ul.ui-list-newsletter { grid-template-columns: repeat(4, 1fr); }
  a.current { width: calc(100% / 4); }
}


/* =============================================================================
   MEDIA QUERY : min-width 680px
   ============================================================================= */
@media (min-width: 680px) {
  .page ul.annuaire, .responsive-table { max-width: 40.5rem; }
  .page ul.annuaire { padding: 0; border: 1px solid hsl(0, 0%, 85%); }
  li.annuaire-item:not(.secretariat) { grid-template-columns: 50% 30% 20%; }
  li.annuaire-item:not(.adjoints) { grid-template-rows: none; }
  li.annuaire-item.adjoints { grid-template-rows: repeat(2, 1fr); }
  li.annuaire-item:not(.secretariat) span.annuaire-dir-fonction { grid-column: 1 / 2; grid-row: none; }
  span.annuaire-dir-nom { grid-column: 2 / 3; }
  li.annuaire-item:not(.adjoints) span.annuaire-dir-nom { grid-row: none; }
  li.annuaire-item.adjoints span.annuaire-dir-fonction,
  li.annuaire-item.adjoints span.annuaire-dir-nom,
  li.annuaire-item.adjoints span.annuaire-dir-tel { grid-row: 1 / 2; }
  li.annuaire-item:not(.secretariat) span.annuaire-dir-tel { grid-column: 3 / 4; }
  li.annuaire-item:not(.adjoints):not(.secretariat) span.annuaire-dir-tel { grid-row: none; }
  li.annuaire-item.adjoints span.annuaire-dir-nom.second,
  li.annuaire-item.adjoints span.annuaire-dir-tel.second { grid-row: 2 / 3; }
  .responsive-table tbody { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   MEDIA QUERY : min-width 720px
   ============================================================================= */
@media (min-width: 720px) {
  .home .b2 { grid-template-columns: repeat(4, 1fr); }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
  .page article.ui-publication ul { flex-direction: row; flex-wrap: wrap; gap: 0 1rem; }
  .page ul.ui-list-newsletter { grid-template-columns: repeat(6, 1fr); }
  a.current { width: calc(100% / 6); }
  #formNewsletter input { width: 20rem; }
  #formNewsletter button { margin-top: 0; margin-left: .5rem; width: 11rem; }
}


/* =============================================================================
   MEDIA QUERY : min-width 960px
   ============================================================================= */
@media (min-width: 960px) {
  /* Home */
  .home { padding: 3.5rem 0 .5rem; }
  .home .b3-b4-b5 { grid-template-columns: repeat(2, 1fr); grid-gap: .5rem; }
  .home .b3, .home .b4, .home .b5 { display: grid; grid-template-rows: 3rem auto auto; }
  .home .box-title { justify-content: center; }
  .box-btn { align-self: flex-end; padding: 2rem 1.125rem 1.125rem; justify-content: center; }

  /* Structure */
  .inner-main, .inner-footer { width: 100%; margin: 0 auto; }

  /* Page */
  .page { padding: 5rem 3rem; }
  .page ul.ui-list-newsletter { grid-template-columns: repeat(7, 1fr); }
  a.current { width: calc(100% / 7); }

  /* Footer */
  .footer-nav { grid-template-columns: repeat(6, 1fr); }
  .footer-nav li { height: 3.375rem; }
  .footer-nav a br { display: block; }

  /* Footer accueil */
  body.body-home .inner-footer { padding: 0; }

  /* Annuaire / tableaux */
  .page ul.annuaire, .responsive-table { max-width: 100%; }
  .responsive-table { margin: 1.625rem auto; }
  .responsive-table thead, .responsive-table tbody { display: table-row-group; }
  .responsive-table thead tr, .responsive-table tbody tr { display: table-row; }
  .responsive-table thead tr { border: 1px solid var(--lightBlue); }
  .responsive-table thead th {
    background-color: var(--lightBlue);
    font-weight: 500;
    text-align: center;
    color: #fff;
    letter-spacing: .025rem;
    height: 3rem;
    vertical-align: middle;
    padding: 0 .75rem;
  }
  .responsive-table thead th:first-of-type { text-align: left; }
  .responsive-table tbody th, .responsive-table tbody td { display: table-cell; height: 3rem; vertical-align: middle; }
  .responsive-table tbody th[scope="row"] { background-color: transparent; color: hsl(0, 0%, 25%); text-align: left; padding-left: .75rem; font-weight: 400; margin: 0; }
  .responsive-table tbody th[scope="row"] a { color: var(--linkBlue); }
  .responsive-table tbody td { text-align: center; }
  .responsive-table tbody td:not(:first-of-type) { border: none; }
  .responsive-table tbody td[data-title]::before { content: none; }
  .responsive-table tbody tr:hover { background-color: var(--lighterBlue); border: 1px solid var(--lighterBlue); color: #fff; }
  .page .responsive-table tbody tr a { transition: border-bottom .1s linear; }
  .page .responsive-table tbody tr:hover a { color: #fff; }
  .page .responsive-table tbody tr a:hover:not(.flat-btn):not(.newsLink):not(.news-archive-item):not(.img-link) { border-bottom-color: #fff; }
}


/* =============================================================================
   MEDIA QUERY : min-width 1200px
   ============================================================================= */
@media (min-width: 1200px) {

  /* --- Éléments masqués sur grand écran --- */
  #burger, .chapeau, .cache, .nav-icon, #main-nav li.news { display: none; }

  /* --- Header --- */
  body > header { height: auto; }
  .inner-header, .inner-main, .inner-footer { width: 80rem; margin: 0 auto; }
  .inner-header { margin: 0 auto; overflow: hidden; }
  .inner-header .logo {
    position: absolute;
    top: 0.625rem;
    left: 1rem;
    height: 8rem;
    width: 12.5rem;
    background: url('../img/logo_TEL.png') no-repeat top center;
    background-size: 64%;
    transition: all .2s linear;
  }
  .inner-header .logo.small {
    top: .5625rem;
    left: .5rem;
    width: 13.5rem;
    background: url('../img/logo_small.png') no-repeat top center;
    background-size: 100%;
  }
  .inner-header .logo.small.hovered {
    top: 1rem;
    background: url('../img/logo_small.png') no-repeat top center;
    background-size: 62%;
  }
  .inner-header button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: var(--blue);
    width: 3rem;
    font-weight: 400;
    font-size: .875rem;
    padding: 0;
    border-bottom: 2px solid #fff;
  }
  .inner-header button:hover { background-color: var(--lightBlue); }

  /* --- Navigation principale --- */
  #main-nav {
    visibility: visible;
    z-index: initial;
    position: relative;
    transform: translate(0);
    background: none;
    width: 80%;
    font-size: 1rem;
    margin-left: 20%;
    transition: all .2s linear;
    padding-top: 3rem;
    padding-bottom: 3rem;
    overflow: hidden;
    line-height: 1;
  }
  #main-nav.small { padding: 0; }
  #main-nav.small.hovered { padding-bottom: 3rem; }
  #main-nav.shadow { box-shadow: none; }
  #main-nav li { display: inline-flex; }
  #main-nav a { color: #fff; }
  #main-nav a.item1 { display: flex; position: relative; align-items: center; height: 3rem; padding: 0 1.5rem; cursor: default; }
  #main-nav ul li.active a.item1::after { position: absolute; content:""; left: 0; bottom: 0; width: 100%; border-bottom: 2px solid #fff; }
  #main-nav a.item2 { display: flex; align-items: center; height: 3rem; padding: 0 1rem; margin-left: 0; }
  #main-nav li li:first-of-type, #main-nav li li:last-of-type { padding: 0; }
  #main-nav li ul { position: absolute; left: 0; transform: translateY(3rem); width: 100%; background-color: var(--blue); }
  #main-nav li li { transition: background-color .2s linear; }
  #main-nav li li:hover { background-color: var(--lightBlue); }

  /* --- Navigation interne --- */
  .in-page-nav-column { grid-column: 1 / 2; }
  .in-page-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    width: 18rem;
    top: 12rem;
    transition: all .2s linear;
    margin-left: 1rem;
  }
  .in-page-nav.small.hovered { top: 9rem; }
  .in-page-nav.small { top: 6rem; }
  .in-page-nav ul { padding-top: .5rem; background-color: var(--deepBlue); }
  .in-page-nav li { display: flex; justify-content: flex-end; line-height: 1.125; }
  .in-page-nav li:last-of-type:not(.in-page-nav--extra) { margin-bottom: .875rem; }
  .in-page-nav a {
    display: inline-flex;
    align-items: center;
    text-align: right;
    position: relative;
    min-height: 3.25rem;
    padding: .75rem 3.5rem .75rem 1.5rem;
    transition: all .2s linear;
    color: #fff;
  }
  .in-page-nav a.highlighted { color: var(--lightestBlue); }
  .in-page-nav a::after { position: absolute; right: 1.5rem; content:'\25cf'; top: 50%; transform: translateY(-50%); transition: color .2s linear; color: var(--lighterBlue); }
  .in-page-nav a.active::after { color: var(--orange); }
  .in-page-nav--extra { margin: .5rem 0 0; background-color: var(--blue); text-transform: uppercase; font-weight: 500; }
  .in-page-nav--extra a { color: var(--lightestBlue); }
  .in-page-nav--extra a:hover { color: #fff; }
  .in-page-nav--extra a::after { display: none; }

  /* --- Sections actives --- */
  .active-section, .active-sous-section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.25rem;
    min-height: 6rem;
    line-height: 1.5;
    padding: 0 .5rem;
  }
  .active-section { font-size: 2.25rem; min-height: 6rem; color: #fff; background-color: var(--lightBlue); }
  .active-sous-section { font-size: 1.25rem; min-height: 3rem; color: var(--lightestBlue); background-color: var(--blue); }
  .active-section-2l, .active-sous-section-2l { line-height: 1.0625; }
  .active-section-2l { height: 8rem; }
  .active-sous-section-2l { height: 5rem; }

  /* --- Structure inner-main --- */
  .inner-main {
    position: relative;
    background-color: transparent;
    flex: 1;
    min-height: 0;
  }
  body:not(.body-home) .inner-main:not(.no-nav) {
    display: grid;
    grid-template-columns: 18rem 1fr;
    padding: 12rem 0 1rem;
    background-image: linear-gradient(to right, transparent 15%, #fff 15%);
  }

body:not(.body-home) .inner-main.no-nav {
    display: flex;
    justify-content: center;
    background-color: #f3eded;
    background-image: none;
    padding-top: 3rem;
}
body:not(.body-home) .inner-main.no-nav .page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 3rem 4rem;
    padding-top: 6rem;
    
}

  /* --- Home grand écran --- */
  .home {
    padding: 9.5rem 0 .5rem;
    grid-template-columns: 14.5rem 1fr;
    grid-template-rows: auto;
    grid-gap: .5rem;
  }
  .home .b1 { grid-column: 2 / 3; grid-row: 1 / 2; }
  .home .b2 { grid-template-columns: 1fr; grid-column: 1 / 2; grid-row: 1 / 2; }
  .b3-b4-b5 { grid-column: 1 / 3; grid-row: 2 / 3; }
  .home .b2 a::after, .home .box-title a::after, .home .box-content > ul > li a span::after { transition: all .2s linear; }
  .home .b2 a { backface-visibility: hidden; height: 100%; }
  .home .b2 a:hover::after, .home .box-title a:hover::after, .home .box-content > ul > li a:hover span::after { filter: brightness(1.2) saturate(.9); }
  .home .box-content li ul li a { border-bottom: 1px solid hsla(0,0%,0%,0); }
  .home .box-content li ul li a:hover { color: var(--couleur-rubrique); border-bottom: 1px solid var(--couleur-rubrique); opacity: .75; }

  /* --- Page contenu grand écran --- */
  .page {
    flex: 1;
    grid-column: 2 / 3;
    padding: 0 5rem 6rem;
    transition: all .2s linear;
  }
  .page.paddingTop { transform: translateY(3rem); }
  .page.long-transition { transition: all .6s ease-in; }
  .page h1 { font-size: 2.125rem; margin-bottom: 3rem; padding-bottom: 2rem; }
  .page h1 span:not(.bold), .page h2 span:not(.bold), .page h3 span:not(.bold), .page h4 span:not(.bold) { display: block; }
  .page h1::after { width: 6rem; }
  .page h2 { font-size: 1.5rem; }
  .page h3 { font-size: 1.25rem; }
  .page h2, .page h3 { margin: 3.5rem 0 1.5rem; }
  .page h1 + h2, .page h2 + h3 { margin-top: 2.5rem; }
  .page h4 { line-height: 1.625rem; margin-top: 1.625rem; }
  .page h4 + p { margin-top: .625rem; }
  .page p, .page ul, .page ol { line-height: 1.625; }
  .page p, .page div.encadre { margin: 1.625rem 0 1.125rem; }
  .page ul, .page ol { margin: 1.625rem 0; }
  .page p + ul, .page p + ol, .page ul li ul, .page ul li ol, .page ol li ol, .page ol li ul { margin-top: .625rem; }
  .page > ul, .page article > ul { padding-left: 1rem; }
  .page li { margin-top: .625rem; }
  .page li p { margin: .625rem 0; }
  .page li ul, .page li ol { margin-bottom: .625rem; }
  .page ul li { padding-left: 1.75rem; }
  .page > ol, .page article > ol { padding-left: 2rem; }
  .page ol li { padding-left: .75rem; }
  .page li ol { padding-left: 1rem; }

  /* Liens */
.page a:hover:not(.flat-btn):not(.newsLink):not(.news-archive-item):not(.img-link):not(.images-page-btn) { border-bottom: 1px solid var(--linkBlue); }
  a.flat-btn:hover, .page .ui-form button:hover { color: #fff; background-color: var(--orange); }

  /* Figures */
  .page .ui-figure { margin: 2.25rem auto 1.75rem; }
  .page .ui-figure.left, .page .ui-figure.right { margin-top: .375rem; }
  .page .ui-figure.medium.to-left { margin: 2.25rem 0 1.75rem; }
  .page .ui-figure figcaption span { display: block; }

  /* Formulaire */
  #formNewsletter input { width: 22rem; }

  /* Annuaire */
  .page ul.annuaire { max-width: 100%; }
  .page li.annuaire-item { padding: 1rem .25rem; }
  span.annuaire-dir-nom { font-weight: 400; }

  /* Newsletter liste */
  .page ul.ui-list-newsletter { grid-template-columns: repeat(6, 1fr); }
  a.current { width: calc(100% / 6); }

  /* Publications */
  .page article.ui-publication { padding-bottom: 1.125rem; }
  .page article.ui-publication ul.top-list, .page article.ui-publication p.year { padding: 1rem 1.5rem; }
  .page article.ui-publication ul.bottom-list { margin: 2rem 1.5rem 0; padding-top: 1rem; }
  .page article.ui-publication h1 { margin: 1.5rem 1.5rem .5rem; }
  .page article.ui-publication .author { margin: 2rem 1.5rem 0; }

  /* Séminaires */
  .page article.ui-seminar { padding: 1rem 1.5rem 1.125rem; }

  /* News archives */
  .page ul li.news-archive .news-archive-img-container { overflow: hidden; height: 11.25rem; }
  .page ul li a.news-archive-item img { filter: brightness(.9) saturate(.9); transition: all .3s linear; backface-visibility: hidden; }
  .page ul li a.news-archive-item:hover img { filter: brightness(1.1) saturate(1.1); transform: scale(1.05); }


  /* Footer */
  body:not(.body-home):not(.body-no-nav) .inner-footer { padding-left: 12rem; }

  

  /* Bouton retour haut */
  #top {
    grid-column: 2 / 3;
    position: sticky;
    display: block;
    visibility: hidden;
    opacity: 0;
    bottom: 1rem;
    transition: all .2s linear;
    background-color: var(--deepBlue);
    height: 2rem;
    width: 2rem;
    margin-left: 100%;
    transform: translateX(-3rem);
    cursor: pointer;
  }
  #top.show { visibility: visible; opacity: 1; }
  #topButton { height: 100%; width: 100%; fill: none; stroke: #fff; stroke-width: 1.5; transition: all .2s linear; }
  #top:hover, #top.hovered { background-color: var(--lightBlue); }

  
html.dark body:not(.body-home) .inner-main {
  background-image: linear-gradient(to right, transparent 15%, #1a1e2e 15%);
}

}


/* =============================================================================
   MEDIA QUERY : min-width 1328px
   ============================================================================= */
@media (min-width: 1328px) {
  .in-page-nav { margin-left: 0; }
  #top { transform: translateX(1rem); }
  p.last-update { right: 1rem; }
}

/* =============================================================================
   MEDIA QUERY : min-width 1900px
   ============================================================================= */
@media (min-width: 1900px) {
  .inner-header, .inner-main, .inner-footer {
    width: 100rem;
  }
}

/* =============================================================================
   Bouton dark mode
   ============================================================================= */
/* Mobile : le flex le pousse à droite naturellement */
#dark-toggle {
  height: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #fff;
  padding: 0 0.75rem;
}

/* Grand écran : positionné à droite du header, à côté du bouton connexion */
@media (min-width: 1200px) {
  #dark-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 3rem;
    z-index: 2;
  }
}

/* Anti-FOUC : html.dark est posé par le script inline avant tout rendu */
html.dark .page,
html.dark .images-page,
html.dark .messier-page {
  background-color: #1a1e2e;
  color: #c8d0e0;
}
html.dark .page,
html.dark .page {
  background-color: #1a1e2e;
  color: #c8d0e0;
}
html.dark .page h1, html.dark .page h1 { color: var(--lightestBlue); }
html.dark .page h1::after, html.dark .page h1::after { border-color: var(--lightestBlue); }
html.dark .page h2,
html.dark .page h3,
html.dark .page h2,
html.dark .page h3 { color: var(--lighterBlue); }
html.dark .page p,
html.dark .page li,
html.dark .page p,
html.dark .page li { color: #c8d0e0; }
html.dark .page a, html.dark .page a { color: var(--lightestBlue); }

/* Cartes images */
html.dark .images-page .images-card {
  background-color: #222840;
  border-color: #3a4060;
}
html.dark .images-page .images-card-dl dt {
  color: var(--lightestBlue);
}
html.dark .images-page .images-card-dl dd {
  color: #c8d0e0;
}
html.dark .images-page .images-card-name {
  color: var(--or-solaire);
}
html.dark .images-page .images-card-description a {
  color: var(--lightestBlue);
}

/* Formulaire de recherche */
html.dark .images-page .images-form {
  background-color: #222840;
  border-color: #3a4060;
}
html.dark .images-page .images-form label {
  color: #c8d0e0;
}
html.dark .images-page .images-form select,
html.dark .images-page .images-form input {
  background-color: #1a1e2e;
  color: #c8d0e0;
  border-color: #3a4060;
}

/* Pagination */
html.dark .images-page .images-page-btn {
  background-color: #222840;
  color: var(--lightestBlue);
  border-color: #3a4060;
}
html.dark .images-page .images-page-btn.active {
  background-color: var(--lightBlue);
  color: #fff;
}

/* Texte intro */
html.dark .images-page .images-intro {
  color: #c8d0e0;
}

/* Mode sombre — encadrés page d'accueil (Actualités, Astrophotos, Activités scientifiques) */
html.dark .home .b3,
html.dark .home .b4,
html.dark .home .b5 {
  background-color: #2d3f55;
}
html.dark .home .box-content > ul > li + li {
  border-top-color: #2a3a4a;
}
html.dark .home .box-content a,
html.dark .home .box-content a:visited {
  color: #c8d0e0;
}
html.dark .home .box-content a:hover {
  color: var(--lightestBlue);
}