/* ============================================================
   Vanilla CSS — sortie progressive de Webflow (FEAT-011)

   Stratégie : on garde les NOMS de classes Webflow pour faciliter
   la migration page par page (pas de réécriture HTML nécessaire).
   Les règles définies ici sont suffisamment spécifiques pour
   override les règles Webflow qui les précèdent dans la cascade.

   Ce fichier remplacera à terme :
   - webflow.css (framework Webflow)
   - angers-digital-club.webflow.css (styles spécifiques exportés)

   État de la migration : voir AngersDigitalClub/fonctionnalites/FEAT-011
   ============================================================ */

/* ============================================================
   Fonts custom (extraites de angers-digital-club.webflow.css)
   ============================================================ */
@font-face {
  font-family: Integralcf;
  src: url("../fonts/IntegralCF-Bold.39ae71a9d8de.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Integralcf;
  src: url("../fonts/IntegralCF-BoldOblique.b79d45b42885.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Oceanwide;
  src: url("../fonts/Oceanwide-Bold.7743853a4779.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oceanwide;
  src: url("../fonts/Oceanwide-Medium.478bec397e08.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oceanwide;
  src: url("../fonts/Oceanwide-Regular.adecdd830473.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Oceanwide;
  src: url("../fonts/Oceanwide-Light.64b6af7d435e.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Reset global (webflow.css fournissait box-sizing border-box,
   body margin 0, et img max-width 100%).
   Sans ce reset, les paddings agrandissent les éléments au-delà
   de leur largeur attendue et cassent les layouts.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  /* Empêche le scroll horizontal accidentel — un fix de sécurité au cas
     où un enfant déborde, plutôt que d'agrandir le viewport. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: #fff;
}

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

/* ============================================================
   Variables globales (palette + typo + breakpoints)
   ============================================================ */
:root {
  /* Palette (extraite de angers-digital-club.webflow.css) */
  --black: black;
  --white: white;
  --principal: #6bd96e;
  --pink: #b349f1;
  --secondaire: #5a2af4;
  --yellow: #ffd600;

  /* Typographies */
  --font-heading: Integralcf, Impact, sans-serif;
  --font-body: Oceanwide, Tahoma, sans-serif;
  --font-mono: Inconsolata, monospace;

  /* Breakpoints (info — utiliser dans @media) */
  --bp-mobile: 767px;
  --bp-tablet: 991px;
  --bp-desktop: 1199px;
}

/* ============================================================
   Composants typographiques globaux

   NOTE : ces classes sont utilisées par PRESQUE toutes les pages.
   Les porter ici les migre globalement vers vanilla. Les variants
   spécifiques (.heading_h2.about, .paragraph.black.afterwork_pres,
   etc.) restent gérés par angers-digital-club.webflow.css tant que
   leur page d'usage n'est pas migrée.
   ============================================================ */

.heading_h2 {
  color: var(--black);
  text-align: center;
  font-family: var(--font-heading);
}

.paragraph {
  color: var(--white);
  letter-spacing: 0.4px;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
}

.paragraph.black {
  color: var(--black);
}

.paragraph.black.about {
  margin-top: 40px;
  margin-bottom: 60px;
}

.paragraph.black.left {
  text-align: left;
  line-height: 1.9;
}

.paragraph.black.blog {
  margin-top: 20px;
  margin-bottom: 40px;
}

.heading_h2.about {
  margin-bottom: 40px;
}

.heading_h2.cta_about {
  margin-top: 60px;
  margin-bottom: 40px;
}

.heading_h2.team-title {
  margin-bottom: 40px;
}

.heading_h2.contact {
  text-align: left;
  margin-bottom: 20px;
}

.heading_h4 {
  color: var(--black);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
}

.heading_h3 {
  color: var(--black);
  font-family: var(--font-body);
  font-size: 24px;
}

.heading_h3.left {
  text-align: left;
}

/* ============================================================
   Composants structurels partagés
   (utilisés par plusieurs pages)
   ============================================================ */

.content {
  background-color: #fff;
  justify-content: center;
  align-items: flex-start;
  min-height: 500px;
  padding: 90px 5%;
}

.content.whiteish {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #eff1f4;
}

.titlewrap {
  margin-bottom: 55px;
}

.flexcontainer {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  max-width: 1140px;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

.div-contain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  min-height: 540px;
}

/* Utilitaires d'espacement et d'alignement */
.margin-bottom-about,
.margin-bottom-about.margin-small,
.margin-bottom-about.margin-medium {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom-about.margin-xxlarge {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.text-align-center {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: flex-start;
}

.text-align-center-2 {
  text-align: center;
}

.max-width-large {
  width: 100%;
  max-width: 48rem;
}

.max-width-large.align-center {
  display: flex;
  flex-flow: column;
  gap: 0;
  max-width: none;
}

.padding-global {
  padding-left: 0;
  padding-right: 0;
}

.container-large-3 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.padding-section-large-2 {
  padding-top: 2rem;
  padding-bottom: 6rem;
}

.padding-section-large-3 {
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.padding-section-large-4 {
  padding-top: 6rem;
  padding-bottom: 7rem;
}

.padding-global-3,
.padding-global-4 {
  padding-left: 5%;
  padding-right: 5%;
}

.container-large-4 {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.margin-bottom-2,
.margin-bottom-2.margin-xsmall {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom-2.margin-small {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.icon-embed-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
}

.padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

.padding-section-large {
  display: flex;
  flex-flow: column;
  padding-top: 0;
  padding-bottom: 0;
}

.margin-bottom-3,
.margin-bottom-3.margin-xxlarge,
.margin-bottom-3.margin-small {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.header_component {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header_image-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

.header26_image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spacer {
  padding-top: 18px;
  padding-bottom: 18px;
}

.spacer.about {
  height: 80px;
}

/* Bouton CTA partagé */
.minimal-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.3em;
  padding: 0.7em 0;
  border: 1px solid transparent;
  border-radius: 50em;
  color: var(--principal);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1em;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    padding 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.minimal-button:hover {
  border-color: var(--principal);
  background-color: rgba(26, 26, 26, 0.03);
  padding: 1em 2em;
}

.minimal-button-text {
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0.8px;
}

.div_btn {
  display: flex;
  align-self: center;
  margin-top: 40px;
}

/* Webflow utilitaires repris (équivalents standards) */
.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-layout-grid {
  display: grid;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

@media (max-width: 767px) {
  .content.whiteish {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ============================================================
   Pages migrées
   ============================================================ */

/* --- legal_page.html (FEAT-011 : première page portée) --- */

.section-mentions-legales {
  display: flex;
  flex-flow: column;
  gap: 30px;
  padding: 60px;
}

@media (max-width: 767px) {
  .section-mentions-legales {
    padding: 40px 20px;
  }
}

/* --- articles_index_page.html (FEAT-011) --- */

.article_intro {
  background-color: #fff;
  padding: 6px 13px 6px 12px;
  font-family: var(--font-body);
  font-weight: 300;
  color: #000;
}

.article_intro.black {
  background-color: #000;
  color: #fff;
}

.heading_h2_article {
  margin-bottom: 20px;
  font-family: var(--font-heading);
  font-size: 35px;
  line-height: 1.2;
  letter-spacing: 2.24px;
  text-decoration: none;
  color: #fff;
}

.heading_h2_article.black { color: var(--black); }
.heading_h2_article.green { color: var(--principal); }
.heading_h2_article.violet { color: var(--secondaire); }
.heading_h2_article.pink { color: var(--pink); }
.heading_h2_article.yellow { color: var(--yellow); }

.main_card_contain {
  min-height: 540px;
  padding-left: 60px;
  padding-right: 60px;
}

.main_card_contain.white,
.main_card_contain.black,
.main_card_contain.indian-red,
.main_card_contain.blue {
  cursor: pointer;
  text-decoration: none;
}

.main_card_contain.white { background-color: var(--pink); }
.main_card_contain.white:hover { background-color: #b349f1cc; }

.main_card_contain.black { background-color: var(--yellow); }
.main_card_contain.black:hover { background-color: #ffd600cc; }

.main_card_contain.indian-red { background-color: var(--secondaire); }
.main_card_contain.indian-red:hover { background-color: #5a2af4cc; }

.main_card_contain.yellow { background-color: #fffd39; }

.main_card_contain.blue { background-color: var(--principal); }
.main_card_contain.blue:hover { background-color: #6bd96ecc; }

/* Grid 3 colonnes desktop avec areas nommées (rendu Webflow original).
   Sur tablet et mobile, mobile-app.css force respectivement 2 et 1 col
   via `.w-layout-grid.grid` avec !important. */
.grid {
  width: 100%;
  height: auto;
  grid-template:
    "Area Area-3 Area-3"
    "Area-4 Area-4 Area-2"
    "Area-5 Area-6 Area-6"
    "Area-7 Area-7 Area-8"
    / 1fr 1fr 1fr;
}

@media (max-width: 991px) {
  .heading_h2_article.black {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .heading_h2_article.black,
  .heading_h2_article.green,
  .heading_h2_article.violet,
  .heading_h2_article.pink,
  .heading_h2_article.yellow {
    font-size: 30px;
  }

  .heading_h2_article.green.spacing,
  .heading_h2_article.violet.spacing,
  .heading_h2_article.pink.spacing,
  .heading_h2_article.yellow.spacing {
    letter-spacing: 0;
  }

  .main_card_contain.white,
  .main_card_contain.black,
  .main_card_contain.indian-red,
  .main_card_contain.blue {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- home_page.html (FEAT-011, partiel) ---
   Aligne le grid des événements de la home sur celui de /events/
   (.adc-events-index__grid dans components.css) : auto-fill responsive,
   max-width 1200px, gap 24px. Le bouton "Voir plus" prend toute la largeur. */

.section_afterworks .events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: auto;
  gap: var(--adc-space-6, 24px);
  max-width: 1200px;
  margin: 40px auto 0;
}

.section_afterworks .events .button_div {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 16px;
}

/* --- about_page.html (FEAT-011) --- */

.section_about_us {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
}

.layout_list {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 3rem;
  grid-row-gap: 4rem;
  place-items: start center;
}

.layout_item {
  width: 100%;
  text-align: center;
}

.layout_image {
  aspect-ratio: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  object-position: 50% 100%;
}

.layout_image.about {
  margin-bottom: 10px;
}

.layout_image-wrapper {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.section_cta {
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: flex-start;
  position: relative;
  background-color: transparent;
}

.cta_component {
  width: 100%;
}

@media (max-width: 991px) {
  .layout_list {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;
  }
}

@media (max-width: 767px) {
  .section_about_us {
    padding: 40px 20px;
  }

  /* Force tous les conteneurs flex à prendre 100% de leur parent.
     Sans ça, `align-items: center` les laisse prendre la largeur intrinsèque
     de leur grid enfant `auto-fit minmax(240px, 1fr)` (3 cols * 240px = 720px+),
     ce qui crée un overflow horizontal. */
  .section_about_us > .margin-bottom-about,
  .margin-bottom-about.margin-xxlarge,
  .text-align-center,
  .max-width-large,
  .max-width-large.align-center,
  .layout {
    width: 100%;
    max-width: 100%;
  }

  .layout_list {
    grid-template-columns: 1fr;
    grid-row-gap: 2rem;
    grid-column-gap: 0;
  }

  .padding-section-large-2 {
    padding-top: 1rem;
    padding-bottom: 3rem;
  }
}

/* --- contact_page.html (FEAT-011) ---
   FAQ accordions : `<details>` HTML5 natif (a11y et clavier gratuits). */

.layout192_image {
  aspect-ratio: 1;
  width: 95%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
}

.layout192_image-wrapper {
  border-radius: 12px;
  overflow: hidden;
}

.layout192_content {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  align-items: center;
}

.faq_content {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 0.75fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  align-items: start;
}

.faq_list-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  place-items: start stretch;
}

.faq_accordion {
  display: block;
  border: 1px solid var(--principal);
  overflow: hidden;
}

/* `<summary>` est l'élément cliquable du `<details>`. On retire le marker
   par défaut (▶) et on utilise notre propre icône via .faq6_icon-wrapper. */
.faq_question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  list-style: none;
  cursor: pointer;
}

.faq_question::-webkit-details-marker {
  display: none;
}

.faq_question:focus-visible {
  outline: 2px solid var(--principal);
  outline-offset: -2px;
}

.faq6_icon-wrapper {
  display: flex;
  align-self: flex-start;
  width: 2rem;
  transition: transform 0.2s ease;
}

/* Quand le `<details>` est ouvert, on tourne l'icône + en × */
.faq_accordion[open] .faq6_icon-wrapper {
  transform: rotate(45deg);
}

.faq6_answer {
  padding: 0 1.5rem 1.25rem;
  overflow: hidden;
}

@media (max-width: 991px) {
  .padding-section-large-3 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .padding-section-large-4 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .layout192_content,
  .faq_content {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .padding-section-large-3,
  .padding-section-large-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .layout192_content,
  .faq_content {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .faq6_icon-wrapper {
    width: 1.75rem;
  }

  .faq_question {
    padding: 1rem 1.25rem;
  }

  .faq6_answer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* --- article_page.html (FEAT-011) --- */

.section_blog {
  padding: 60px;
}

.section_texte {
  margin-top: 60px;
}

.arrow-extension {
  position: absolute;
  width: 80px;
  height: 1px;
  background-color: #fff;
}

.arrow-extension.left {
  flex: none;
  transform-origin: 100%;
}

.arrow-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.arrow-wrap.left {
  justify-content: flex-start;
  align-items: center;
  padding-right: 80px;
}

.arrow-btn {
  display: inline-block;
  flex-direction: row;
  align-items: center;
  margin-top: 24px;
  margin-right: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}

.arrow-btn.left {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.arrow-btn.left.invert {
  filter: invert(100%);
}

.arrow-icon {
  margin-top: -1px;
}

.arrow-icon.left {
  flex: none;
  margin-top: -0.5px;
  margin-right: -1px;
}

.arrow-btn-text {
  margin-right: 10px;
}

.arrow-btn-text.left {
  margin-left: 10px;
  margin-right: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .section_blog {
    padding: 40px 20px;
  }

  .section_texte {
    margin-top: 40px;
  }
}

/* --- navbar.html (FEAT-011) ---
   Navbar 100% statique (pas de burger mobile : la bottom-nav prend le relais
   sur mobile via mobile-app.css). Plus aucune dépendance à webflow.js. */

.navbar {
  display: flex;
  background-color: var(--black);
}

.navbar_container {
  z-index: 5;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 30px 20px;
  background-color: transparent;
  position: relative;
}

.container_regular {
  width: auto;
  max-width: none;
  min-height: 30px;
  margin-left: 0;
  margin-right: 0;
}

.navbar_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar_brand {
  position: relative;
  text-decoration: none;
  color: #333;
}

.logo_adc {
  max-width: 80%;
}

.nav_menu_wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nav_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.nav-button-wrapper {
  margin-left: 0;
}

.nav_link {
  margin-left: 10px;
  margin-right: 15px;
  padding: 5px 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--principal);
}

.nav_link:hover {
  color: var(--white);
}

.nav_link:focus-visible {
  outline: 2px solid #0050bd;
  outline-offset: 0;
  color: #0050bd;
  border-radius: 4px;
}


/* --- team_section.html (FEAT-011) ---
   Grid responsive auto-fit :
   - mobile (~< 540px) : 1 colonne pleine largeur
   - tablet (540-840px) : 2 colonnes
   - desktop (> 840px)  : 3 colonnes (mais pas plus, max 1100px de cadre) */

.team_card_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 20px;
}

.team_card {
  position: relative;
  width: 100%;
  border: 2px solid #eee;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.2);
}

.image-card {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
}

.card-inf {
  position: absolute;
  inset: auto 16px 16px;
  padding: 16px 16px 10px;
  background-color: #fff;
  border: 2px solid #eee;
  border-radius: 13px;
  /* Caché par défaut, slide-up + fade-in au hover/focus de la card.
     Sur mobile/tactile (sans hover), l'info reste visible — voir
     @media (hover: none) plus bas. */
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.25s ease;
}

.team_card:hover .card-inf,
.team_card:focus-within .card-inf {
  transform: translateY(0);
  opacity: 1;
}

/* Devices sans hover natif (mobile/tablet tactile) : info toujours visible. */
@media (hover: none) {
  .card-inf {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 540px) {
  .team_card_container {
    padding: 0 16px;
    gap: 16px;
  }
}

.name-card {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 700;
}

.p {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-body);
  opacity: 0.7;
}

.p.metier {
  margin-top: 4px;
}

.card-inf-after {
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Bouton LinkedIn (et équivalents) inline dans les team_card.
   Reprend les propriétés que .w-button (Webflow) fournissait : padding,
   display inline-block, couleur du texte, suppression du soulignement. */
.button_in {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 16px;
  background-color: var(--principal);
  border: 0;
  border-radius: 50px;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.button_in:hover,
.button_in:focus-visible {
  background-color: var(--black);
  color: var(--principal);
}

/* --- home_page.html (sections principales) (FEAT-011) --- */

.section_next_event {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0;
}

.section_next_event > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text_right {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 20px;
  background-color: #1c2493;
}

@media (max-width: 991px) {
  .section_next_event {
    grid-template-columns: 1fr;
  }

  .section_next_event > img {
    width: 100%;
  }

  .text_right {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.heading_h1_span {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 500;
  line-height: 38px;
}

.paragraph.h1 {
  font-size: 10px;
}

.arrow-button-secondary {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  height: 40px;
  padding-top: 6px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #b3b3b3;
  border-radius: 100px;
  transition: border-color 0.25s;
}

.arrow-button-secondary:hover {
  border-color: rgba(179, 179, 179, 0.5);
}

.scroll-arrow-txt {
  float: left;
  flex: none;
  margin-right: 5px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1em;
  color: #f8f8f8;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.scroll-arrow-img {
  float: left;
  width: 17px;
}

.section_about {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding: 60px 60px 100px;
}

.heading {
  align-self: flex-start;
  color: var(--black);
  text-align: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
}

.heading.left-side {
  display: block;
  align-self: flex-start;
  text-align: left;
}

.section_partenaires {
  padding: 60px 60px 80px;
  background-color: var(--principal);
}

.container_partenaires {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  margin-left: 40px;
  margin-right: 40px;
  gap: 20px 40px;
}

.indice { width: 100px; max-width: 100%; }
.cdv { width: 90px; max-width: 100%; }
.image { width: 160px; max-width: 100%; }
.image-2 { width: 200px; max-width: 100%; }
.image-3 { width: 180px; max-width: 100%; }

.line {
  border-top: 1px solid var(--principal);
}

/* Responsive home : sections About, Partenaires, Meet & Connect.
   Sur mobile, le padding 60px sur les sides faisait déborder le contenu. */
@media (max-width: 767px) {
  .section_about {
    padding: 40px 20px 60px;
  }

  .section_partenaires {
    padding: 40px 20px 60px;
  }

  .container_partenaires {
    margin-top: 30px;
    margin-left: 0;
    margin-right: 0;
    gap: 16px 24px;
  }

  .section_meet_and_connect {
    padding: 40px 0;
  }
}

.section_meet_and_connect {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* --- meet_connect_slider.html (FEAT-011) ---
   Carrousel scroll-snap natif (zéro JS). Sur desktop, défilement horizontal
   au scroll wheel/trackpad ou touche. Pas de boutons fléchés (les flèches
   Webflow étaient peu utiles, l'utilisateur scroll naturellement). */

.container-large {
  width: 100%;
  max-width: none;
  margin-top: 40px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.padding-vertical {
  padding-left: 0;
  padding-right: 0;
}

.slider_component {
  position: relative;
  padding-bottom: 6rem;
  background-color: transparent;
}

.card_mask {
  display: flex;
  gap: 2rem;
  width: 100%;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.afterwork_card {
  flex: 0 0 auto;
  width: 250px;
  height: 100%;
  scroll-snap-align: start;
}

.box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 380px;
  padding: 3.7em;
  background-color: #fff;
  border-radius: 30px;
  cursor: pointer;
}

.box._1,
.box._2,
.box._3,
.box._4,
.box._5,
.box._6,
.box._7 {
  width: 265px;
  height: 270px;
  min-height: auto;
  padding: 1em;
  background-position: center;
  background-size: cover;
  cursor: default;
}

.box._1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pink);
}

.box._2 {
  background-color: rgba(0, 108, 255, 0.05);
}

.box._3 {
  background-color: var(--secondaire);
  color: #f3f3f3;
}

.container_afterwork {
  display: flex;
  flex-direction: column;
  flex: 1;
  order: 1;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

.mobile_meet_and_connect {
  display: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

@media (max-width: 991px) {
  .mobile_meet_and_connect {
    display: flex;
    flex-flow: wrap;
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .mobile_meet_and_connect {
    flex-flow: column;
  }
}

/* --- footer.html (FEAT-011) ---
   NOTE : `.social-link-circle` est masqué par défaut. Pour ajouter un effet
   hover (cercle qui apparaît autour de l'icône), définir un état `:hover`
   sur `.social` qui change le `display` ou la `transform` du circle. */

.footer {
  position: relative;
  padding: 20px 30px;
  background-color: var(--black);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.outline-hover-social-wrap {
  display: flex;
  align-self: center;
  gap: 10px;
}

.social {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  padding: 1em;
}

.sc-social-icon {
  position: relative;
  z-index: 5;
  width: 1em;
  height: 1em;
  font-size: 1.3rem;
}

.social-link-circle {
  position: absolute;
  z-index: 1;
  display: none;
  width: 130%;
  height: 130%;
  border: 0.1em solid #ececec;
  border-radius: 50%;
}

.mentions {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: -20px;
}

.link-block {
  display: flex;
  flex-flow: row;
  height: 15px;
}

.link-block.mentions-l-gales {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  color: var(--white);
  text-align: left;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
}

.paragraph-3 {
  margin-bottom: 0;
}

.cr-dits {
  height: 15px;
  text-decoration: none;
}

.paragraph-5 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  text-decoration: underline;
}

/* FEAT-014 — liens annuaire (inscription / edition) dans le footer */
.footer-annuaire {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 18px auto 8px;
  padding: 0 16px;
  text-align: center;
}

.footer-annuaire__link {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.footer-annuaire__link:hover,
.footer-annuaire__link:focus-visible {
  color: var(--principal);
  outline: none;
}

.footer-annuaire__sep {
  color: var(--white);
  opacity: 0.5;
  font-family: var(--font-body);
  font-size: 13px;
}

@media (max-width: 480px) {
  .footer-annuaire { gap: 8px; flex-direction: column; }
  .footer-annuaire__sep { display: none; }
}