/* ================================
   TILT — Import typo
   ================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* 
##     ##    ###    ########  ####    ###    ########  ##       ########  ######  
##     ##   ## ##   ##     ##  ##    ## ##   ##     ## ##       ##       ##    ## 
##     ##  ##   ##  ##     ##  ##   ##   ##  ##     ## ##       ##       ##       
##     ## ##     ## ########   ##  ##     ## ########  ##       ######    ######  
 ##   ##  ######### ##   ##    ##  ######### ##     ## ##       ##             ## 
  ## ##   ##     ## ##    ##   ##  ##     ## ##     ## ##       ##       ##    ## 
   ###    ##     ## ##     ## #### ##     ## ########  ######## ########  ######  

= */
html {
  --color-primary: #003ae7;
  --color-secondary: #003ae7;
  --color-blue-chalk: #003ae7;
  --color-background: #edf1ff;
  --color-primary-dark: #002bb5;
}

:root {
  --color-heading: #003ae7;
  --color-link-text: #003ae7;
  --color-link-text-hover: #003ae7;
  --color-current: #003ae7;

  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-paragraph: var(--font-sans);
  --font-heading: var(--font-sans);
}

/* 
######## ##    ## ########   #######   ######   ########     ###    ########  ##     ## #### ######## 
   ##     ##  ##  ##     ## ##     ## ##    ##  ##     ##   ## ##   ##     ## ##     ##  ##  ##       
   ##      ####   ##     ## ##     ## ##        ##     ##  ##   ##  ##     ## ##     ##  ##  ##       
   ##       ##    ########  ##     ## ##   #### ########  ##     ## ########  #########  ##  ######   
   ##       ##    ##        ##     ## ##    ##  ##   ##   ######### ##        ##     ##  ##  ##       
   ##       ##    ##        ##     ## ##    ##  ##    ##  ##     ## ##        ##     ##  ##  ##       
   ##       ##    ##         #######   ######   ##     ## ##     ## ##        ##     ## #### ######## 
 */

h1 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  text-align: left;
}

h2 {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  text-align: left;
}

h2::after {
  content: " ›";
  color: var(--color-primary);
}

h3 {
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-primary);
}

p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.button,
button,
input[type="submit"] {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.button,
.wp-block-button__link,
input[type="submit"] {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Bouton primaire */
.button:not(.button-ghost),
.wp-block-button__link:not(.button-ghost) {
  background-color: var(--color-primary) !important;
  border: 3px solid var(--color-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.button:not(.button-ghost):hover,
.wp-block-button__link:not(.button-ghost):hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}

/* Bouton ghost */
.button-ghost,
.wp-block-button.button-ghost .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.button-ghost:hover,
.wp-block-button.button-ghost .wp-block-button__link:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.menu-items a,
.menu-item a,
.sub-menu a,
.nav-toggle {
  font-family: var(--font-sans) !important;
  text-underline-offset: 6px var(--color-blue-chalk);
}

/* 
##     ## ########    ###    ########  ######## ########  
##     ## ##         ## ##   ##     ## ##       ##     ## 
##     ## ##        ##   ##  ##     ## ##       ##     ## 
######### ######   ##     ## ##     ## ######   ########  
##     ## ##       ######### ##     ## ##       ##   ##   
##     ## ##       ##     ## ##     ## ##       ##    ##  
##     ## ######## ##     ## ########  ######## ##     ## 

 */

/* Nav sticky — fond bleu + texte blanc */
.nav-container.is-fixed {
  background-color: var(--color-primary-dark) !important;
}

.nav-container.is-fixed .menu-item > a {
  color: #fff !important;
}

.nav-container.is-fixed .menu-item > a:hover {
  opacity: 0.8;
}

/* Nav sticky — underline hover en blanc */
.is-fixed .menu-items a:after,
.is-fixed .menu-items a:hover:after {
  background-color: var(--color-primary-dark) !important;
}

/* Mobile — fond bleu au lieu de noir */
:root {
  --color-background-nav-mobile-header: var(--color-primary-dark);
  --color-background-nav-mobile-header-active: var(--color-primary-dark);
  --color-background-nav-mobile-layer: var(--color-primary-dark);
  --color-background-nav-mobile-layer-active: var(--color-primary-dark);
}

/* Hamburger — couleur selon état */
.nav-toggle:not(.is-active) .hamburger-inner,
.nav-toggle:not(.is-active) .hamburger-inner:before,
.nav-toggle:not(.is-active) .hamburger-inner:after {
  background-color: var(--color-primary) !important;
}

.nav-container.is-fixed .hamburger-inner,
.nav-container.is-fixed .hamburger-inner:before,
.nav-container.is-fixed .hamburger-inner:after {
  background-color: #fff !important;
}

/* Bouton S'abonner — état normal */
#menu-item-57 a {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  padding: 8px 16px;
}

#menu-item-57 a:hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
}

/* Bouton S'abonner — état sticky */
.nav-container.is-fixed #menu-item-57 a {
  background-color: #fff !important;
  color: var(--color-primary) !important;
}

.nav-container.is-fixed #menu-item-57 a:hover {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid #fff;
}

/*
########  #######   #######  ######## ######## ########       
##       ##     ## ##     ##    ##    ##       ##     ##      
##       ##     ## ##     ##    ##    ##       ##     ##      
######   ##     ## ##     ##    ##    ######   ########       
##       ##     ## ##     ##    ##    ##       ##   ##        
##       ##     ## ##     ##    ##    ##       ##    ##       
##        #######   #######     ##    ######## ##     ##      

*/

#colophon {
  background-color: var(--color-background);
}

.site-info .company img {
  height: 60px !important;
  width: 120px !important;
}

/*
##     ## ######## ########   #######  
##     ## ##       ##     ## ##     ## 
##     ## ##       ##     ## ##     ## 
######### ######   ########  ##     ## 
##     ## ##       ##   ##   ##     ## 
##     ## ##       ##    ##  ##     ## 
##     ## ######## ##     ##  #######  

 */
.hero__container {
  display: flex;
  flex-direction: row;
  gap: 4rem;
  padding: 4rem 6rem;
  background-color: var(--color-background);
  min-height: 400px;
  margin-left: calc(-1 * var(--margin-large));
  margin-right: calc(-1 * var(--margin-large));
  justify-content: space-evenly;
  margin-bottom: calc(3 * var(--margin-large));
}

/* Colonne gauche — card numéro */
.hero__card {
  flex: 0 0 auto;
  position: relative;
  bottom: -10rem;
}

.card-numero {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 550px;
  justify-content: space-between;
  background: #fff;
}

.card-numero__couverture img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.card-numero__infos {
  text-align: center;
  margin-top: 1rem;
}

.card-numero__titre {
  margin: 0;
  color: var(--color-primary);
  font-family: Inter;
  font-weight: 700;
  font-style: Bold;
  font-size: 50px;
  line-height: 80px;
}

.card-numero__date {
  font-size: 16px;
  margin: 0.25rem 0 0;
  color: var(--color-primary);
}

.card-numero__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Colonne droite — texte */
.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 45%;
}

.hero__content h2::after {
  content: none;
}

.hero__content p {
  color: var(--color-primary);
}

.col__2__container {
  margin-bottom: calc(2 * var(--margin-large));
}

/* ================================
   TILT — Dernières Actualités
   ================================ */

.accueil-actualite__container {
  border: 2px solid var(--color-primary);
  padding: 2rem 1rem !important;
  gap: 4rem;
  margin-bottom: calc(2 * var(--margin-large));
}

.edito {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  height: 100%;
  background-color: var(--color-background);
  padding: 2rem;
}

.edito__titre {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.edito__contenu {
  line-height: 1.6;
  color: var(--color-primary);
}

.edito__auteur {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: var(--color-primary);
}

/* Articles récents */
.articles-recents {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2rem;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 8px;
  padding: 1.5rem;
}

.article-card h3 {
  text-align: left;
  color: #000;
}

.article-card__image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
}

.article-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.article-card__date {
  font-size: 14px;
}

.article-card__rubrique {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.article-card__titre {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.all-article {
  padding: 2rem;
  background-color: var(--color-background);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.all-article p {
  flex: 1;
}

.horizontal-media__container {
  gap: 2rem;
  margin-top: var(--margin-medium);
  margin-bottom: calc(2 * var(--margin-large));
}

.horizontal-media__container .wp-block-media-text__media {
  overflow: hidden;
  max-height: 440px;
}

.horizontal-media__container .wp-block-media-text__media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}

.horizontal-media__content {
  gap: 3rem;
  background-color: var(--color-background);
  padding: 2rem;
  min-height: 440px;
  justify-content: center;
}
.edito-full {
  margin-bottom: var(--margin-large);
}
.edito-full__content {
  column-count: 2;
  column-gap: 4rem;
}

@media (max-width: 960px) {
  .edito-full__content {
    column-count: 1;
  }
}

.articles-en-bref {
  display: flex;
  gap: 4rem;
  margin-bottom: var(--margin-large);
  color: var(--color-primary);
}

.articles-en-bref p {
  color: var(--color-primary);
}
.en-bref__card {
  padding: 2rem;
  background-color: var(--color-background);
}

/*
########  ########  ######  ########   #######  ##    ##  ######  #### ##     ## ######## 
##     ## ##       ##    ## ##     ## ##     ## ###   ## ##    ##  ##  ##     ## ##       
##     ## ##       ##       ##     ## ##     ## ####  ## ##        ##  ##     ## ##       
########  ######    ######  ########  ##     ## ## ## ##  ######   ##  ##     ## ######   
##   ##   ##             ## ##        ##     ## ##  ####       ##  ##   ##   ##  ##       
##    ##  ##       ##    ## ##        ##     ## ##   ### ##    ##  ##    ## ##   ##       
##     ## ########  ######  ##         #######  ##    ##  ######  ####    ###    ######## 

*/

/* Responsive */
@media (max-width: 960px) {
  .articles-recents {
    grid-template-columns: 1fr;
  }

  .hero__card {
    bottom: 0;
  }

  .hero__container {
    flex-direction: column;
    padding: 3rem 2rem;
    margin-left: calc(-1 * var(--margin-medium));
    margin-right: calc(-1 * var(--margin-medium));
  }

  .card-numero {
    width: 100%;
    max-width: 320px;
  }

  .horizontal-media__container {
    display: flex;
    flex-direction: column;
  }
}