*{box-sizing:border-box}body{margin:0;background:#f8f7f3;color:#292929;font-family:Arial,Helvetica,sans-serif;line-height:1.65}header{height:86px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:#fbfaf7;border-bottom:1px solid #e7e3da;position:sticky;top:0;z-index:5}.brand{color:#222;text-decoration:none;line-height:1.15}.brand span{display:block;font:20px Georgia,serif}.brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#777}nav{display:flex;align-items:center;gap:28px}nav a{color:#333;text-decoration:none;font-size:13px}.active{font-weight:bold}.cta{border:1px solid #333;padding:9px 16px}.intro{max-width:1000px;margin:auto;padding:92px 6vw 68px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:#777;margin-bottom:18px}.intro h1{font:400 clamp(42px,5.5vw,72px)/1.04 Georgia,serif;letter-spacing:-.03em;margin:0 0 28px}.intro>p{max-width:730px;font-size:19px;color:#555}.portrait{max-width:1180px;margin:0 auto 110px;padding:0 5vw;display:grid;grid-template-columns:1.35fr .65fr;gap:70px;align-items:center}.photo{overflow:hidden;background:#e9e5dc}.photo img{display:block;width:100%;height:auto}.copy h2,.band h2,.medieval h2,.closing h2{font:400 clamp(32px,4vw,50px)/1.1 Georgia,serif;margin:0 0 26px}.copy p,.band p,.medieval p,.closing p{color:#555}.band{max-width:1080px;margin:0 auto 115px;padding:70px 6vw;border-top:1px solid #ddd8cd;border-bottom:1px solid #ddd8cd;display:grid;grid-template-columns:1fr 1.15fr;gap:80px}.band p{margin:0 0 20px}.medieval{max-width:1080px;margin:0 auto 120px;padding:0 6vw;display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:center}.medieval-copy{padding:30px 0}.medieval .quote{font:22px/1.45 Georgia,serif;color:#333;margin-top:30px}.figure{display:flex;align-items:flex-end;justify-content:center;min-height:500px}.figure img{display:block;width:min(100%,500px);height:auto;max-height:600px;object-fit:contain}.closing{background:#292a28;color:#f5f1e9;padding:100px 6vw}.closing>*{max-width:850px;margin-left:auto;margin-right:auto}.closing .eyebrow{color:#aaa}.closing h2{font-size:clamp(38px,5vw,60px)}.closing p{color:#d6d2ca;font-size:18px}.closing .quote{font:24px/1.45 Georgia,serif;color:#f4f0e7;margin-top:35px}.closing-action{max-width:850px;margin:10px auto 0}.closing a{display:inline-block;background:#f2eee5;color:#292a28;text-decoration:none;padding:13px 22px;font-size:13px}footer{padding:30px 6vw;display:flex;justify-content:space-between;color:#777;font-size:12px}@media(max-width:850px){header{height:auto;padding:22px 6vw;display:block}.brand{margin-bottom:18px}nav{gap:15px;flex-wrap:wrap}.portrait,.band,.medieval{grid-template-columns:1fr;gap:40px}.intro{padding-top:65px}.figure{min-height:0;max-height:560px}.figure img{width:min(90%,430px)}footer{display:block}footer span+span{display:block;margin-top:8px}}

/* Cohérence graphique inter-pages : contenu éditorial aligné à gauche */
.page-content,
.serge-content,
.bio-content,
.content-column,
.text-column,
.hero-copy,
main .intro,
main .lead,
main p,
main h1,
main h2,
main h3,
main ul,
main ol {
  text-align: left;
}

/* La page Serge reprend la même largeur et le même ancrage éditorial que les autres pages. */
.serge-page main,
.serge-page .page-content,
.serge-page .serge-content,
.serge-page .content-column {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* Le menu actif est toujours signalé de la même façon : graisse + filet inférieur.
   Les liens non actifs restent de poids normal. */
.site-nav .nav-link {
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav .nav-link.active {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.site-nav .nav-link:hover {
  text-decoration: none;
}


/* Navigation commune aux quatre pages */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-nav .nav-link {
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}
.site-nav .nav-link.active {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.site-nav .nav-link:hover {
  text-decoration: none;
}
.site-nav .nav-cta {
  text-decoration: none;
}


/* =========================================================
   ALIGNEMENT GLOBAL — harmonisation avec les autres pages
   ========================================================= */

/* Même ligne de départ que les pages La conférence / Références */
header {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

header > .brand,
header > .site-nav {
  /* les deux éléments sont replacés dans une grille commune */
}

header {
  display: grid;
  grid-template-columns: minmax(0, 1080px);
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* La ligne d'en-tête occupe la même largeur utile que la page conférence */
header > .brand,
header > .site-nav {
  position: relative;
}

header > .brand {
  grid-column: 1;
  grid-row: 1;
}

header > .site-nav {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

/* Même largeur et même point d'ancrage pour le grand titre */
main > .intro {
  width: min(1080px, 88vw);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

/* Le contenu éditorial reste systématiquement à gauche */
main > .intro h1,
main > .intro > p,
main > .intro .eyebrow,
.portrait .copy,
.band,
.medieval {
  text-align: left;
}

/* Même logique de largeur pour les sections principales */
.portrait {
  width: min(1180px, 88vw);
  padding-left: 0;
  padding-right: 0;
}

.band,
.medieval {
  width: min(1080px, 88vw);
  padding-left: 0;
  padding-right: 0;
}

/* Footer aligné sur la même grille */
footer {
  padding-left: 0;
  padding-right: 0;
  width: min(1080px, 88vw);
  margin-left: auto;
  margin-right: auto;
}

/* Le traitement du lien actif reste identique au reste du site */
.site-nav .nav-link {
  font-weight: 400;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}

.site-nav .nav-link.active {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Responsive : on retrouve les marges latérales du site */
@media(max-width:850px) {
  header {
    display: block;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  header > .site-nav {
    justify-self: auto;
  }
  main > .intro,
  .portrait,
  .band,
  .medieval,
  footer {
    width: auto;
    margin-left: 6vw;
    margin-right: 6vw;
  }
}

@media(max-width:560px) {
  header {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  main > .intro,
  .portrait,
  .band,
  .medieval,
  footer {
    margin-left: 6vw;
    margin-right: 6vw;
  }
}

/* =========================================================
   BANDEAU SUPÉRIEUR — RÈGLE COMMUNE AUX 4 PAGES
   ========================================================= */
.site-header {
  height: 86px !important;
  min-height: 86px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  background: #fbfaf7;
  border-bottom: 1px solid #e7e3da;
  padding: 0 !important;
}
.site-header-inner {
  width: min(1080px, 88vw);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-sizing: border-box;
}
.site-header .brand {
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  color: #222;
  text-decoration: none;
  line-height: 1.05;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.site-header .brand span {
  display: block;
  font: 400 20px/1.05 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
}
.site-header .brand small {
  display: block;
  margin: 7px 0 0 !important;
  color: #777;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
.site-header .site-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.site-header .site-nav .nav-link,
.site-header .site-nav .nav-cta {
  color: #333;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: 0;
  padding: 0;
}
.site-header .site-nav .nav-link.active {
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 2px solid #333 !important;
  padding-bottom: 5px !important;
}
.site-header .site-nav .nav-cta {
  border: 1px solid #333 !important;
  padding: 9px 16px !important;
}
.site-header .site-nav .nav-link:hover {
  text-decoration: none !important;
}

@media(max-width:850px) {
  .site-header {
    height: auto !important;
    min-height: 0;
    padding: 20px 0 !important;
  }
  .site-header-inner {
    width: min(100% - 36px, 700px);
    height: auto;
    display: block;
  }
  .site-header .brand {
    margin-bottom: 18px !important;
  }
  .site-header .site-nav {
    justify-content: flex-start;
    gap: 15px !important;
    flex-wrap: wrap;
  }
}


/* =========================================================
   HARMONISATION DES INTRODUCTIONS — toutes les pages
   ========================================================= */

/* Même style d'intitulé au-dessus du titre */
main .intro .eyebrow {
  color: #b08b43 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Même traitement typographique pour les grands titres */
main .intro h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 5.5vw, 72px) !important;
  line-height: 1.04 !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
}

/* Même largeur de texte introductif */
main .intro > .lead,
main .intro > p.lead {
  font-size: 19px !important;
  line-height: 1.65;
}

@media (max-width: 850px) {
  main .intro h1 {
    font-size: 42px !important;
  }
}


/* Bandeau bas harmonisé avec la page d'accueil */
.site-footer {
  width: 100%;
  box-sizing: border-box;
  background: #171918;
  color: rgba(255,255,255,.7);
  padding: 35px 0;
  font-size: 13px;
  border: 0;
}
.site-footer .footer-inner {
  width: min(1080px, 88vw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.site-footer strong {
  display: inline;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 400;
}
.site-footer span {
  color: rgba(255,255,255,.7);
}
.site-footer a {
  color: #fff;
  text-decoration: none;
}
.site-footer .footer-contact {
  text-align: right;
}
.site-footer .footer-contact strong {
  display: block;
  margin-bottom: 2px;
}
.site-footer .footer-contact .phone {
  display: inline;
}
@media(max-width:850px){
  .site-footer .footer-inner { display:block; }
  .site-footer .footer-inner > div + div { margin-top: 12px; }
  .site-footer .footer-contact { text-align:left; }
}
/* V19 correction: doré uniquement pour les petits titres (eyebrows) */
.eyebrow,
.closing .eyebrow { color:#b08b43 !important; }

/* V27 — correction du décalage du footer sur petit écran */
@media(max-width:850px){
  .site-footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}