/* Nav: centre le menu */
.navigation {
  display: flex;
  justify-content: center;
}

/* Menu principal: inline-flex pour rester centré */
.navigation #mod-menu1.mod-menu {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items top-level */
.navigation #mod-menu1 > li {
  position: relative;
}

/* Sous-menu: caché par défaut */
.navigation #mod-menu1 .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  margin: 0;
  padding: 10px 0;
  min-width: 240px;          /* 220–260 selon rendu */
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);

  /* IMPORTANT: neutralise la classe "small" */
  font-size: 1em;
  line-height: 1.4;
}

/* Texte sous-menu = texte menu */
.navigation #mod-menu1 .mod-menu__sub a,
.navigation #mod-menu1 .mod-menu__sub span {
  font-size: 1.2rem;
  line-height: 1.4;
}

/* Desktop: ouverture au hover */
@media (min-width: 721px) {
  .navigation #mod-menu1 > li.parent:hover > .mod-menu__sub {
    display: block;
  }

  /* bouton toggle inutile sur desktop */
  .navigation #mod-menu1 .mod-menu__toggle-sub {
    display: none;
  }
}

/* Items du sous-menu */
.navigation #mod-menu1 .mod-menu__sub > li > a,
.navigation #mod-menu1 .mod-menu__sub > li > span {
  display: block;
  padding: 8px 14px;
  white-space: normal;
}

/* Mobile: menu en bloc + dropdown inline */
@media (max-width: 720px) {
  .navigation {
    justify-content: flex-start;
  }

  .navigation #mod-menu1.mod-menu {
    display: block;
    width: 100%;
  }

  .navigation #mod-menu1 .mod-menu__sub {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 10px 0;
    min-width: 0;
    font-size: 1em;
  }
}
.navigation .nav>li>a, .navigation .nav>li>span {
    border: 1px solid transparent;
    color: #595959;
    cursor: pointer;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 31px;
    padding: 0 20px;
}
/* ===== Article hub (simple, propre) ===== */

.seo-toc{
  margin: 1.2rem 0 1.6rem;
  padding: 1rem 1.1rem;
  background: #ffffff;
  border: 1px solid rgba(2, 92, 144, 0.25);
  border-radius: 0px;
}

.seo-toc-title{
  margin: 0 0 .6rem;
  font-weight: 700;
  color: #025c90;
  font-size: 1.05rem;
}

.seo-toc ul{
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 1.6rem;
}

@media (max-width: 700px){
  .seo-toc ul{ columns: 1; }
}

.seo-box{
  margin: 1.2rem 0;
  padding: 1rem 1.1rem;
  background: #ffffff;
  border-radius: 0px;
  border: 1px solid rgba(0,0,0,0.08);
}

.seo-box-title{
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
}

.seo-box--retain{
  border-color: rgba(2, 92, 144, 0.35);
  box-shadow: 0 0 0 3px rgba(2, 92, 144, 0.08);
}

.seo-box--retain .seo-box-title{ color:#025c90; }

.seo-box--error{
  border-color: rgba(173, 134, 181, 0.45);
  box-shadow: 0 0 0 3px rgba(173, 134, 181, 0.10);
}

.seo-box--error .seo-box-title{ color:#ad86b5; }

.seo-box--example{
  border-color: rgba(2, 92, 144, 0.18);
  box-shadow: 0 0 0 3px rgba(2, 92, 144, 0.05);
}

.seo-cta{
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.2rem;
  background: #ffffff;
  border: 2px solid #025c90;
  border-radius: 0px;
}

.seo-cta strong{
  display:block;
  margin-bottom:.35rem;
  color:#025c90;
}

.seo-cta a{
  display:inline-block;
  margin-top:.6rem;
  padding:.55rem .95rem;
  border-radius: 0px;
  background:#025c90;
  color:#ffffff;
  text-decoration:none;
}

.seo-cta a:hover{ filter: brightness(0.95); }
/* ===== Hub links (user-friendly grouped menu) ===== */
.seo-links-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.2rem;
  margin-top: .65rem;
}

@media (max-width: 820px){
  .seo-links-grid{ grid-template-columns: 1fr; }
}

.seo-links-group{
  border: 1px solid rgba(2, 92, 144, 0.18);
  border-radius: 0px;
  padding: .8rem .9rem;
  background: rgba(255, 255, 255, 0.65);
}

.seo-links-group-title{
  font-weight: 700;
  margin: 0 0 .5rem 0;
  color: #025c90;
}

.seo-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.seo-links li{ margin: 0; }

.seo-links a{
  font-size: 1.5rem;
  display: inline-block;
  text-decoration: none;
  line-height: 1.25;
  padding: .25rem .35rem;
  border-radius: 0px;
}

.seo-links a:hover{
  text-decoration: none;
  background: rgba(173, 134, 181, 0.18);

}


/* ===== Article blocks (hub + supports) ===== */

/* Sommaire */
.content-toc {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  padding: 16px 18px;
  margin: 18px 0 26px;
  border-radius: 10px;
}

.content-toc-title {
  font-weight: 700;
  margin: 0 0 10px;
}

.content-toc ul {
  margin: 0;
  padding-left: 18px;
}

.content-toc li {
  margin: 6px 0;
}

.content-toc a {
  text-decoration: none;
}

.content-toc a:hover {
  text-decoration: underline;
}

/* Encadrés */
.content-box {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  padding: 14px 16px;
  margin: 18px 0 22px;
  border-radius: 10px;
}

.content-box-title {
  display: inline-block;
  font-weight: 700;
  margin: 0 0 8px;
}

/* Variantes (accent uniquement via bordure/teinte légère) */
.content-box--retain {
  border-left: 5px solid #498aaf;
  background: rgba(73, 138, 175, 0.06);
}

.content-box--error {
  border-left: 5px solid #ad86b5;
  background: rgba(173, 134, 181, 0.08);
}

.content-box--example {
  border-left: 5px solid #025c90;
  background: rgba(2, 92, 144, 0.06);
}

/* CTA */
.content-cta {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  padding: 16px 18px;
  margin: 22px 0 10px;
  border-radius: 12px;
}

.content-cta strong {
  display: block;
  margin-bottom: 8px;
}

.content-cta a {
  font-weight: 700;
  text-decoration: none;
}

.content-cta a:hover {
  text-decoration: underline;
}