/* =========================================================
   HEADER COPIÉ À L'IDENTIQUE DE L'ACCUEIL
   Classes isolées pour ne subir AUCUN ancien style des pages.
   ========================================================= */

.oph-site-header {
  --blue:#082b83;
  --blue-2:#0f58d4;
  --blue-soft:#edf5ff;
  --red:#e52332;
  --red-soft:#fff0f1;
  --ink:#18345f;
  --muted:#62728e;
  --paper:#ffffff;
  --shadow-soft:0 9px 25px rgba(8,43,131,.09);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}

.oph-site-header,
.oph-site-header * {
  box-sizing:border-box;
}

.oph-site-header img,
.oph-site-header video {
  display:block;
  max-width:100%;
}

.oph-site-header button {
  font:inherit;
}

.oph-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.oph-site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(8,43,131,.08)}.oph-header-inner{width:min(1480px,calc(100% - 40px));min-height:76px;margin:auto;display:flex;align-items:center;gap:24px}.oph-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--blue);font-family:Georgia,"Times New Roman",serif;font-size:1.35rem;font-weight:700;white-space:nowrap}.oph-brand img{width:36px;height:36px;object-fit:contain}.oph-main-nav{margin-left:auto;display:flex;align-items:center;gap:26px}.oph-main-nav>a,.oph-nav-dropdown>summary{padding:27px 0 22px;border-bottom:3px solid transparent;color:var(--blue);text-decoration:none;font-size:.91rem;font-weight:750;cursor:pointer;list-style:none;white-space:nowrap}.oph-nav-dropdown>summary::-webkit-details-marker{display:none}.oph-nav-dropdown>summary::after{content:"⌄";display:inline-block;margin-left:6px;font-size:.8em}.oph-main-nav>a:hover,.oph-nav-dropdown>summary:hover,.oph-main-nav>a.active{color:var(--blue-2);border-bottom-color:var(--red)}.oph-nav-dropdown{position:relative}.oph-nav-submenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:290px;padding:8px;background:#fff;border:1px solid rgba(8,43,131,.12);border-radius:16px;box-shadow:var(--shadow);display:grid;gap:3px}.oph-nav-submenu a{padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.86rem;font-weight:650}.oph-nav-submenu a:hover{background:var(--blue-soft);color:var(--blue)}.oph-socials{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid rgba(8,43,131,.12)}.oph-socials a,.oph-socials span{display:grid;place-items:center;width:28px;height:28px}.oph-socials img{width:25px;height:25px}.oph-menu-toggle{display:none;border:0;background:transparent;color:var(--blue);font-size:1.7rem;cursor:pointer}@media (max-width:1050px){
.oph-header-inner{width:min(100% - 26px,1200px);gap:15px}.oph-main-nav{gap:16px}.oph-main-nav>a,.oph-nav-dropdown>summary{font-size:.82rem}.oph-socials{display:none}
}
@media (max-width:900px){
.oph-site-header{position:sticky}.oph-header-inner{min-height:66px}.oph-brand{font-size:1.08rem}.oph-brand img{width:32px;height:32px}.oph-menu-toggle{display:block;margin-left:auto}.oph-main-nav{display:none;position:absolute;top:66px;left:0;right:0;margin:0;padding:12px 18px 20px;background:#fff;border-bottom:1px solid rgba(8,43,131,.1);box-shadow:0 15px 24px rgba(8,43,131,.1);align-items:stretch;gap:0}.oph-main-nav.open{display:grid}.oph-main-nav>a,.oph-nav-dropdown>summary{display:block;padding:13px 6px;border-bottom:1px solid rgba(8,43,131,.08);font-size:.94rem}.oph-main-nav>a.active{border-bottom-color:rgba(8,43,131,.08)}.oph-nav-dropdown{position:static}.oph-nav-submenu{position:static;transform:none;width:auto;padding:5px 0 7px 15px;border:0;border-radius:0;box-shadow:none}.oph-nav-submenu a{padding:8px 4px;font-size:.84rem}
}
@media (max-width:560px){
.oph-header-inner{width:calc(100% - 22px)}.oph-brand span{font-size:1rem}
}
@media (max-width: 900px){
.oph-site-header {
    position: sticky;
    top: 0;
  }.oph-header-inner {
    position: relative;
    width: calc(100% - 24px);
    min-height: 64px;
    gap: 10px;
  }.oph-brand {
    min-width: 0;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.05;
  }.oph-brand img {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
  }.oph-brand span {
    white-space: normal;
  }.oph-menu-toggle {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    place-items: center;
    border-radius: 10px;
  }.oph-main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    right: -12px;
    max-height: calc(100vh - 64px);
    margin: 0;
    padding: 10px 18px 18px;
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid rgba(8,43,131,.1);
    box-shadow: 0 15px 24px rgba(8,43,131,.1);
  }.oph-main-nav.open {
    display: grid;
  }.oph-main-nav > a,
  .oph-nav-dropdown > summary {
    display: block;
    width: 100%;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(8,43,131,.08);
    font-size: .92rem;
    white-space: normal;
  }.oph-nav-dropdown {
    position: static;
  }.oph-nav-submenu {
    position: static;
    width: 100%;
    transform: none;
    padding: 4px 0 6px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }.oph-socials {
    display: none;
  }
}
@media (max-width: 600px){
.oph-header-inner {
    width: calc(100% - 18px);
    min-height: 60px;
  }.oph-brand {
    max-width: calc(100% - 54px);
    font-size: .92rem;
  }.oph-brand img {
    width: 35px;
    height: 35px;
  }.oph-menu-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 1.45rem;
  }.oph-main-nav {
    max-height: calc(100vh - 60px);
  }
}
@media (max-width: 360px){
.oph-brand span {
    font-size: .84rem;
  }
}
@media (min-width: 1301px){
.oph-header-inner {
    min-height: 94px;
    gap: 30px;
  }.oph-brand {
    gap: 13px;
    font-size: 1.55rem;
  }.oph-brand img {
    width: 56px;
    height: 56px;
  }.oph-main-nav {
    gap: 30px;
  }.oph-main-nav > a,
  .oph-nav-dropdown > summary {
    padding: 34px 0 29px;
    font-size: 1rem;
  }
}
@media (min-width: 1121px) and (max-width: 1300px){
.oph-header-inner {
    width: min(100% - 30px, 1280px);
    min-height: 86px;
    gap: 18px;
  }.oph-brand {
    gap: 11px;
    font-size: 1.35rem;
  }.oph-brand img {
    width: 48px;
    height: 48px;
  }.oph-main-nav {
    gap: 18px;
  }.oph-main-nav > a,
  .oph-nav-dropdown > summary {
    padding: 30px 0 25px;
    font-size: .9rem;
  }.oph-socials {
    gap: 7px;
  }
}
@media (max-width: 1120px){
.oph-header-inner {
    width: min(100% - 26px, 1180px);
    min-height: 78px;
    gap: 16px;
  }.oph-brand {
    gap: 11px;
    font-size: 1.25rem;
  }.oph-brand img {
    width: 46px;
    height: 46px;
  }.oph-socials {
    display: none;
  }.oph-menu-toggle {
    display: block;
    margin-left: auto;
    padding: 8px 6px;
    font-size: 2rem;
    line-height: 1;
  }.oph-main-nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px 22px 22px;
    background: #fff;
    border-bottom: 1px solid rgba(8,43,131,.1);
    box-shadow: 0 15px 24px rgba(8,43,131,.1);
    align-items: stretch;
    gap: 0;
  }.oph-main-nav.open {
    display: grid;
  }.oph-main-nav > a,
  .oph-nav-dropdown > summary {
    display: block;
    padding: 15px 7px;
    border-bottom: 1px solid rgba(8,43,131,.08);
    font-size: 1.02rem;
  }.oph-main-nav > a.active {
    border-bottom-color: rgba(8,43,131,.08);
  }.oph-nav-dropdown {
    position: static;
  }.oph-nav-submenu {
    position: static;
    transform: none;
    width: auto;
    padding: 5px 0 7px 15px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }.oph-nav-submenu a {
    padding: 9px 5px;
    font-size: .91rem;
  }
}
@media (max-width: 560px){
.oph-header-inner {
    width: calc(100% - 20px);
    min-height: 70px;
  }.oph-brand {
    gap: 9px;
  }.oph-brand img {
    width: 40px;
    height: 40px;
  }.oph-brand span {
    font-size: 1.08rem;
  }.oph-menu-toggle {
    font-size: 1.95rem;
    padding: 7px 5px;
  }.oph-main-nav {
    top: 70px;
    padding: 10px 16px 18px;
  }.oph-main-nav > a,
  .oph-nav-dropdown > summary {
    padding: 14px 5px;
    font-size: 1rem;
  }
}
@media (max-width: 360px){
.oph-header-inner {
    width: calc(100% - 16px);
    min-height: 66px;
  }.oph-brand img {
    width: 36px;
    height: 36px;
  }.oph-brand span {
    font-size: .98rem;
  }.oph-menu-toggle {
    font-size: 1.8rem;
  }.oph-main-nav {
    top: 66px;
  }
}
.oph-socials .oph-follow-label{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  margin-right:2px;
  color:var(--blue);
  font-size:.9rem;
  font-weight:750;
  white-space:nowrap;
}@media (min-width:1301px){
.oph-socials .oph-follow-label{font-size:.98rem;}
}
.oph-mobile-socials{
  display:none;
}@media (max-width:1120px){
.oph-mobile-socials{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px 7px 4px;
    border-top:1px solid rgba(8,43,131,.10);
    color:var(--blue);
  }.oph-mobile-follow-label{
    font-size:1.02rem;
    font-weight:750;
  }.oph-mobile-social-icons{
    display:flex;
    align-items:center;
    gap:13px;
  }.oph-mobile-social-icons a,
  .oph-mobile-social-icons span{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
  }.oph-mobile-social-icons img{
    display:block;
    width:30px;
    height:30px;
    object-fit:contain;
  }
}
@media (max-width:560px){
.oph-mobile-socials{
    padding:15px 5px 3px;
  }.oph-mobile-follow-label{
    font-size:1rem;
  }.oph-mobile-social-icons{
    gap:11px;
  }.oph-mobile-social-icons a,
  .oph-mobile-social-icons span{
    width:34px;
    height:34px;
  }.oph-mobile-social-icons img{
    width:28px;
    height:28px;
  }
}
.oph-header-inner{
  min-height: 86px !important;
}.oph-brand{
  gap: 12px !important;
  font-size: 1.46rem !important;
}.oph-brand img{
  width: 50px !important;
  height: 50px !important;
}@media (max-width: 1120px){
.oph-header-inner{
    min-height: 76px !important;
  }.oph-brand{
    font-size: 1.20rem !important;
  }.oph-brand img{
    width: 42px !important;
    height: 42px !important;
  }
}
@media (max-width: 560px){
.oph-header-inner{
    min-height: 72px !important;
  }.oph-brand{
    gap: 9px !important;
    font-size: 1.08rem !important;
  }.oph-brand img{
    width: 38px !important;
    height: 38px !important;
  }
}
.oph-header-inner{
  min-height: 98px !important;
}.oph-brand{
  gap: 14px !important;
  font-size: 1.62rem !important;
  font-weight: 800 !important;
}.oph-brand img{
  width: 64px !important;
  height: 64px !important;
}@media (max-width:1120px){
.oph-header-inner{
    min-height: 84px !important;
  }.oph-brand{
    font-size: 1.34rem !important;
  }.oph-brand img{
    width: 52px !important;
    height: 52px !important;
  }
}
@media (max-width:560px){
.oph-header-inner{
    min-height: 78px !important;
  }.oph-brand{
    gap: 10px !important;
    font-size: 1.16rem !important;
  }.oph-brand img{
    width: 46px !important;
    height: 46px !important;
  }
}
.oph-brand-video{
  display:block;
  flex:0 0 auto;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:15px;
  background:#061d52;
  box-shadow:0 5px 14px rgba(8,43,131,.16);
}.oph-brand-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}@media (max-width:1120px){
.oph-brand-video{
    width:52px;
    height:52px;
    border-radius:12px;
  }
}
@media (max-width:560px){
.oph-brand-video{
    width:46px;
    height:46px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(8,43,131,.14);
  }
}
@media (max-width:360px){
.oph-brand-video{
    width:42px;
    height:42px;
  }
}
.oph-brand-video{
  position:relative;
  cursor:pointer;
}.oph-brand-video-replay{
  position:absolute;
  right:4px;
  bottom:4px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(8,43,131,.78);
  color:#fff;
  font-size:.72rem;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  opacity:.92;
}.oph-brand-video:focus-visible{
  outline:3px solid rgba(229,35,50,.42);
  outline-offset:3px;
}@media (max-width:560px){
.oph-brand-video-replay{
    width:16px;
    height:16px;
    right:3px;
    bottom:3px;
    font-size:.66rem;
  }
}
.oph-nav-dropdown > summary{
  display:flex;
  align-items:center;
  gap:7px;
}.oph-nav-butterfly{
  width:21px !important;
  height:21px !important;
  object-fit:contain !important;
  flex:0 0 auto;
  transform:rotate(-8deg);
  filter:drop-shadow(0 2px 3px rgba(8,43,131,.18));
}@media (max-width:900px){
.oph-nav-dropdown > summary{
    display:flex !important;
    align-items:center;
    gap:9px;
  }.oph-nav-butterfly{
    width:24px !important;
    height:24px !important;
  }
}
.oph-nav-dropdown > summary{
  display:flex;
  align-items:center;
  gap:8px;
}.oph-nav-butterfly{
  margin-left:2px;
  margin-right:0;
}@media (max-width:900px){
.oph-nav-dropdown > summary{
    gap:9px;
  }.oph-nav-butterfly{
    margin-left:3px;
  }
}
.oph-nav-messagers-link{
  display:flex !important;
  align-items:center;
  gap:7px;
}.oph-nav-messagers-link .oph-nav-butterfly-messagers{
  width:21px !important;
  height:21px !important;
  margin-left:2px !important;
  margin-right:0 !important;
  object-fit:contain !important;
  flex:0 0 auto;
  transform:rotate(-8deg);
  filter:drop-shadow(0 2px 3px rgba(8,43,131,.18));
}@media (max-width:900px){
.oph-nav-messagers-link{gap:9px;}.oph-nav-messagers-link .oph-nav-butterfly-messagers{
    width:24px !important;
    height:24px !important;
    margin-left:3px !important;
  }
}
.oph-site-header .oph-header-inner{
  width:min(1480px,calc(100% - 18px)) !important;
}.oph-brand{
  gap:14px !important;
  margin-left:-18px !important;
}.oph-brand-video{
  width:64px !important;
  height:64px !important;
  border-radius:18px !important;
}.oph-brand-video-replay{
  width:18px !important;
  height:18px !important;
  font-size:.72rem !important;
}.oph-brand-title{
  display:inline-block;
}.oph-brand-mark-right{
  width:40px !important;
  height:40px !important;
  object-fit:contain;
  flex:0 0 auto;
  margin-left:6px;
}@media (max-width:900px){
.oph-site-header .oph-header-inner{
    width:calc(100% - 14px) !important;
  }.oph-brand{
    gap:10px !important;
    margin-left:-10px !important;
  }.oph-brand-video{
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
  }.oph-brand-mark-right{
    width:30px !important;
    height:30px !important;
    margin-left:2px;
  }
}
@media (max-width:560px){
.oph-site-header .oph-header-inner{
    width:calc(100% - 12px) !important;
  }.oph-brand{
    gap:8px !important;
    margin-left:-6px !important;
  }.oph-brand-video{
    width:50px !important;
    height:50px !important;
    border-radius:15px !important;
  }.oph-brand-title{
    font-size:1rem;
  }.oph-brand-mark-right{
    width:24px !important;
    height:24px !important;
  }
}



/* =========================================================
   HEADER — léger décalage vers la gauche sur écran large
   ========================================================= */
@media (min-width:1121px){
  .oph-site-header .oph-main-nav,
  .oph-site-header .oph-socials{
    position:relative;
    left:-14px;
  }
}

/* =========================================================
   HEADER — marge gauche téléphone + iPad
   Même positionnement que l'accueil.
   ========================================================= */
@media (max-width: 1100px) {
  .oph-site-header .oph-header-inner {
    box-sizing: border-box !important;
  }

  .oph-site-header .oph-brand {
    margin-left: 8px !important;
  }
}

   /* =========================================================
   CORRECTIF HEADER — téléphone, iPad et espacement desktop
   À AJOUTER À LA FIN de styles.css ET de
   assets/css/header-accueil-isole.css
   ========================================================= */

/* Téléphone + iPad : remettre le bloc logo/titre à une marge confortable */
@media (max-width: 1120px) {
  .site-header .brand,
  .oph-site-header .oph-brand {
    margin-left: 6px !important;
  }
}

/* Grand écran : un peu d'air entre le logo papillon et le menu */
@media (min-width: 1121px) {
  .site-header .brand,
  .oph-site-header .oph-brand {
    margin-right: 10px !important;
  }
}



/* =========================================================
   B4.2 — SÉCURITÉ HEADER MULTI-NAVIGATEURS — PAGES SECONDAIRES
   Même protection que sur l'accueil : la marque ne se comprime
   pas et le menu garde une marge de sécurité sous Firefox.
   Aucun contenu, police, couleur ou visuel n'est modifié.
   ========================================================= */
@media (min-width:1121px){
  .oph-site-header .oph-brand{
    flex:0 0 auto !important;
    min-width:max-content;
    margin-right:16px !important;
  }

  .oph-site-header .oph-main-nav{
    gap:22px !important;
  }

  .oph-site-header .oph-socials{
    flex:0 0 auto;
  }
}


/* =========================================================
   B4.4 — ESPACEMENT PAPILLON / LA CHARTE — FIREFOX
   Ajoute une marge de sécurité après le lien Messagers.
   ========================================================= */
@media (min-width:1121px){
  .oph-site-header .oph-nav-messagers-link{
    margin-right:8px !important;
  }
}


/* CORRECTION MOBILE — recentrage du bloc marque après suppression de la vidéo du header */
@media (max-width:560px){
  .oph-site-header .oph-header-inner{
    width:calc(100% - 24px) !important;
  }
  .oph-site-header .oph-brand{
    margin-left:0 !important;
  }
}

/* =========================================================
   CORRECTIF RESPONSIVE HEADER — iPad / petit laptop
   Même respiration que sur l'accueil après suppression vidéo header.
   ========================================================= */
@media (max-width:1120px){
  .oph-site-header .oph-header-inner{
    width:calc(100% - 32px) !important;
    box-sizing:border-box !important;
  }
  .oph-site-header .oph-brand{
    margin-left:0 !important;
    flex:0 0 auto !important;
  }
}

@media (min-width:901px) and (max-width:1120px){
  .oph-site-header .oph-header-inner{
    min-height:82px;
  }
  .oph-site-header .oph-brand-title{
    font-size:1.24rem !important;
  }
  .oph-site-header .oph-brand-mark-right{
    width:34px !important;
    height:34px !important;
  }
}

@media (max-width:560px){
  .oph-site-header .oph-header-inner{
    width:calc(100% - 24px) !important;
  }
}