/* =============================================
   PROAVIA - CSS CUSTOM v6
   + Bootstrap Icons via @import (CSS only)
   + Séparateur langue / recherche
   + nav_main aligné à gauche sous le logo
   ============================================= */

/* ── Bootstrap Icons (CDN, zéro JS) ───────── */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
.proavia-seo-cards-wrapper .card{
  border-radius: 0px!important;
}
:root {
  --color-blue:    #1A4FB3;
  --color-blue-dk: #1f4177;
  --color-blue-light: #c0d3f0;
  --color-red:     #c0392b;
  --color-red-light:     #f3cac5;
  --color-orange-light:     #f2dfd3 ;
  --color-orange-dk:     #f15e00  ;
  --color-bleu-pastel:#cee0ff;
  --color-vert: #56B7B9;
  --color-red-dk:  #a93226;
  --color-dark:    #051040;
  --color-grey-bk:#515151;
  --color-grey:    #f6f6f7;
  --top-h:         58px;
  --nav-h:         48px;
}
.btn-primary{
  background: var(--color-blue)!important;
  border-radius: 0px;
}
.btn:hover{
  background: var(--color-blue-dk)!important;
}
.dropdown .btn:hover{background:var(--bs-btn-hover-bg)!important;}
/* ══ LATEST NEWS : liste de liens ══ */
.member-page .news-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}

.member-page .news-links li {
  margin: 0;
  border-bottom: 1px solid #e3e8f2;
}

.member-page .news-links a {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 4px 14px 22px;
  color: var(--color-blue-dk);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: color .2s, padding-left .2s, background-color .2s;
}

/* Petite puce carrée */
.member-page .news-links a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.15em;
  width: 7px;
  height: 7px;
  background: var(--color-blue-dk);
  transition: background-color .2s, transform .2s;
}
body:not(:has(.paragraph--type--bloc-bandeau)):not(.path-frontpage):not(.homeFront)
#block-sakyran-bootstrap5-content.block.block-system.block-system-main-block {
  /*max-width: 1100px;*/
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.member-page .news-links__arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
  color: var(--color-blue, #1A4FB3);
}

.member-page .news-links a:hover,
.member-page .news-links a:focus-visible {
  color: var(--color-blue, #1A4FB3);
  padding-left: 26px;
  background: #f5f8fd;
}
.member-page .news-links a:hover::before {
  background: var(--color-blue, #1A4FB3);
  transform: scale(1.3);
}
.member-page .news-links a:hover .news-links__arrow,
.member-page .news-links a:focus-visible .news-links__arrow {
  opacity: 1;
  transform: translateX(0);
}
.text-tiny{font-size: 12px;}
.text-small{font-size: 20px;}
.text-big{font-size: 40px;}
.text-huge{font-size: 50px;}
/* Mobile : une seule colonne, flèche toujours visible */
@media (max-width: 767px) {
  .member-page .news-links {
    grid-template-columns: 1fr;
  }
  .member-page .news-links__arrow {
    opacity: 1;
    transform: none;
  }
}

.form-control{
  border-radius: 0px!important;
}
html {
    scroll-behavior: smooth;
}
#edit-query::placeholder {
  color: #aab !important;
  opacity: 1 !important;
}
#edit-query:placeholder-shown {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23051040' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
 
}
body{
      color: var( --color-dark)!important;
      overflow-x: hidden;/*supprime la barre de scroll*/
}
    .ck-content h2, .ck-content .h2 {
        font-size: 21px!important;
    }
h1{
    font-size:35px;
 
}
h2{
  font-size:30px;
      color: var(--blue);
}
h3{
  font-size:19px!important;
  color: var(--color-dark);
  margin-bottom: 15px;
}
h4{
  font-size:18px;
  margin-bottom: 15px;
}
ul li{
  color:var(  --color-dark);

}
p{
  font-size: 17px!important;
  color:var(  --color-dark);
  text-align: justify;
  /*line-height: 27px;*/
}
.para-raison-texte p {
  text-align: left;
}
.bordered-paragraph {
  border: 1px solid var(--color-dark);
  padding: 20px;
  margin: 20px 0;
}
.backgrounded-paragraph-bleu p, .backgrounded-paragraph-bleu h2 {
color:var( --color-dark)!important;
}
.backgrounded-paragraph-bleu {
  background-color: rgba(26, 79, 179, 0.20);
  padding: 20px;
  margin: 20px 0;
  border: 1px solid rgba(26, 79, 179, 0.20);
}
.news-see-btn-carre {
    display: inline-block;
    width: auto;
    text-align: center;
    padding: 12px 20px;
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    box-sizing: border-box;
}

.btn-bleu      { background-color: #2196f3; color: #fff; }
.btn-orange    { background-color: #ff9800; color: #fff; }
.btn-rouge     { background-color: #e53935; color: #fff; }
.btn-vert      { background-color: #4caf50; color: #fff; }
.btn-turquoise { background-color: #1abc9c; color: #fff; }
.backgrounded-paragraph-bleu{
  background-color: var(--color-blue);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.backgrounded-paragraph-bleu-dk {
  background-color: var(--color-blue-dk);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.backgrounded-paragraph-bleu-dk p, .backgrounded-paragraph-bleu p, .backgrounded-paragraph-orange-dk p, .backgrounded-paragraph-turquoise-dk p, 
.backgrounded-paragraph-vert_fonce-dk p {
  color: #fff!important;
  font-size: 20px;
  font-weight: bold;
}
 .backgrounded-paragraph-grey-dk p{
  color: var(--color-blue-dk)!important;
  font-size: 20px;
  font-weight: bold;
 }
.backgrounded-paragraph-orange-dk {
  background-color: var(--color-orange-dk);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;

}
.backgrounded-paragraph-bleu-pastel-dk {
  background-color: var(--color-bleu-pastel);
  padding: 20px;
  margin: 20px 0;
  color: var(--color-dark);
  font-size: 20px;
  font-weight: bold;

}
.backgrounded-paragraph-turquoise-dk {
  background-color: var(--commit-0);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;

}
.backgrounded-paragraph-vert_fonce-dk {
  background-color: var(--commit-2);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;

}
.backgrounded-paragraph-sombre_fonce-dk {
  background-color: var(--commit-3);
  padding: 20px;
  margin: 20px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;

}
.backgrounded-paragraph-grey {
  background-color:#F5F3F1;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--grey-bg);
}
.backgrounded-paragraph-orange {
  background-color: rgba(237, 117, 61, 0.20);
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-orange-dk);
}
.backgrounded-paragraph-red {
  background-color: rgba(214, 69, 69, 0.20);
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-red-dk);
}
.backgrounded-paragraph-turquoise {
  background-color: rgba(86, 183, 185, 0.20);
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-red-dk);
}
.backgrounded-paragraph-vert {
  background-color: rgba(96, 180, 74, 0.20);
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-red-dk);
}
.backgrounded-paragraph-logo-gris {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_gris.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-bleu_pastel {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_bleu_pastel.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-orange {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_orange.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-bleu {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_bleu.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
 background-size: 54%;
}
.backgrounded-paragraph-logo-rouge {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_rouge.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-vert {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_vert.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-turquoise {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_turquoise.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.backgrounded-paragraph-logo-sombre {
  background-color: #FFF;
  background-image: url("/themes/custom/sakyran_bootstrap5/images/bg_logo_proavia_3points_sombre.png");
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
  margin: 20px 0;
  border-color: var(--color-grey-bk);
}
.use-case-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.use-case {
  display: flex;
  border: 1px solid var(--color-grey-bk);
  flex-wrap: initial;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  margin-top: 20px;
  width: 48%;
}

.use-case-link {
  text-decoration: none;
  color: var(--color-blue);
  font-weight: bold;
  transition: color 0.3s;
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue-light);
  padding: 5px;
  text-wrap: nowrap;
  height: fit-content;
}
.use-case-link:hover {
  color: var(--color-blue-dk);
  text-decoration: underline;
}
.use-case.img {
  max-width: 50px;
  height: auto;
}
/* Masque le bouton "Search" */
#views-exposed-form-recherche-sol-r-page-1 .button.js-form-submit.form-submit.btn.btn-secondary{
  display: none !important;
}
/* Style du champ de recherche avec icône de loupe */
#edit-query {
  padding-left: 35px !important; /* Espace pour l'icône */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  border-radius: 0 !important;
  border-left: 1px solid #ced4da;
      height: 47px;
          top: 0px;
}

/* Au focus, l'icône devient plus foncée */
#edit-query:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23051040' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(26, 79, 179, 0.25);
}
/* =============================================
   HEADER GÉNÉRAL
   ============================================= */
header[role="banner"] {
  background: #fff!important;
 /* border-bottom: 1px solid #dde3ee;*/
  position: relative;
  /*z-index: 100;*/
  box-shadow: none!important;
  /*border: 1px solid var(--color-grey) !important;*/
}

/* =============================================
   NAVBAR — 2 lignes via flex-wrap
   ============================================= */
   /*ajout chris*/
   /* =============================================
   NAV LIGNE 2 — FOND BLEU FONCÉ (maquette)
   À ajouter à la fin de custom.css
   ============================================= */

/* Liens du menu — blancs sur fond bleu */
/* Toute page avec un slider : pas de bande bleue sous le header (comme la home) */
body:has(.paragraph--type--bloc-bandeau) header[role="banner"]::after {
  display: none;
}
.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item span.nav-link {
  color: #fff !important;
}
.node-1618 header[role="banner"]::after {
background: var(--commit-0)!important;
}
.node-1618 .field--name-title{
color:var(--commit-0)!important;
}
.node-1619 header[role="banner"]::after {
background: var(--commit-1)!important;
}
.node-1619 .field--name-title{
color:var(--commit-1)!important;
}
/*.node-1619 h2, .node-1618 h2{
    color: var(--blue);
    font-weight: 600;
    margin-top: 0px;
}*/
.node-1619 h3{
    color: var(--color-dark);
    
}
.node-1610 h2{
  color: var(--blue);
}
.node-1620 header[role="banner"]::after {
background: var(--commit-2)!important;
}
.node-1620 .field--name-title{
color:var(--commit-2)!important;
}

header[role="banner"]::after {
content: '';
    display: block;
    width: 100%;
    height: 60px;
    background: var(--color-blue);
    top: -25px;
    position: relative;
    z-index: 0;
}
.extranet header[role="banner"]::after, .page-route-view-events-page-1 header[role="banner"]::after, .page-route-view-documents-page-1 header[role="banner"]::after {
content: '';
    display: block;
    width: 100%;
    height: 60px;
    background: #f6f6f7!important;
    top: -25px;
    position: relative;
    z-index: 0;
}
.homeFront header[role="banner"]::after {
  display: none;
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item span.nav-link:hover {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 700;
}

/* Zone droite (langue + recherche) — fond bleu foncé cohérent */
header[role="banner"] .region-nav-additional {
 /* background: var(--color-dark) !important;*/
}

/* Dropdown langue — texte blanc */
/*.lang-dropdown-btn{
  display: none!important;
}
.user-logged-in .lang-dropdown-btn{
  display: block!important;
}*/
.lang-dropdown-btn {
  color: #fff !important;
}
li.nav-item a.active.is-active, li.nav-item a.is-active{
  
 color: var(--color-blue, #1A4FB3)!important;
  font-weight: bold;
}
#proavia-blue-band {
  width: 100%;
  min-height: 53px;
  background: var(--color-blue, #1A4FB3);
  display: flex;
  align-items: center;
  padding: 14px 40px;
  position: relative;
  top: -25px;
  margin-bottom: -25px;
  z-index: 1;
}

/* Texte du titre dans la bande bleue */
#proavia-blue-band span {
  color: #fff;
  font-family: var(--bs-font-sans-serif);
  font-size:20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

/* Sur la homepage : bande bleue masquée (pas de titre) */
.homeFront #proavia-blue-band,
.path-frontpage #proavia-blue-band {
  display: none;
}
/* Champ recherche — adapté au fond sombre */

header[role="banner"] .region-nav-additional input[type="search"],
header[role="banner"] .region-nav-additional input[type="text"] {
     background: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    color:var(  --color-dark);
    top: -16px;
    position: relative;
    left: 5px;
    border-radius: 0px !important;
}

header[role="banner"] .region-nav-additional input::placeholder {
  color: rgba(255,255,255,0.5);
  opacity: 1 !important;
}

/* Icône loupe — blanche */
header[role="banner"] .region-nav-additional .search-icon,
header[role="banner"] .region-nav-additional button[type="submit"] {
  color: #fff !important;
}
   /*fin ajout*/
header[role="banner"] .navbar {
  padding: 0;
  flex-wrap: wrap;
  align-items: stretch;
  background: #fff !important;
}

header[role="banner"] .navbar > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0px;
  max-width: 100%;
  position: relative;
}

/* =============================================
   LIGNE 1 — LOGO
   ============================================= */
header[role="banner"] .region-nav-branding {
  display: flex;
  align-items: center;
  height: var(--top-h);
  flex: 1;
  padding-bottom: 10px;
}

header[role="banner"] .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--top-h);
  padding: 0;
  gap: 10px;
  text-decoration: none;
}

header[role="banner"] .navbar-brand img {
  height: auto;
  width: 127px;
}

header[role="banner"] .site-title {
  display: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
}

/* HAMBURGER — visible seulement mobile */
header[role="banner"] .navbar-toggler {
  border: 1px solid var(--color-blue);
  align-self: center;
  margin: 0 12px 0 auto;
}

/* =============================================
   LIGNE 1 — BOUTONS COMPTE (injectés par JS)
   Position absolue en haut à droite
   ============================================= */
#account-menu-top {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: var(--top-h) !important;
  display: flex !important;
  align-items: stretch !important;
  z-index: 50;
}

#account-menu-top ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

#account-menu-top li {
  display: flex;
      border-left: 2px solid;
}

#account-menu-top a {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 100%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  gap: 8px;
  transition: filter 0.2s;
}

#account-menu-top a:hover {
  filter: brightness(1.15);
}

/* ── Bootstrap Icons dans les boutons compte ── */
/* Icône "person" devant Mon compte / Login */
#account-menu-top li:not(:only-child):first-child a::before {
  font-family: "bootstrap-icons";
  content: "\f4da";   /* bi-person-fill */
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* Icône "box-arrow-right" devant Se déconnecter */
#account-menu-top li:not(:only-child):last-child a::before {
  font-family: "bootstrap-icons";
  content: "\F4D7";   /* bi-box-arrow-right */
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* Non connecté : bouton unique → Login icon */
#account-menu-top li:only-child a::before {
  font-family: "bootstrap-icons";
  content: "\F4D0";   /* bi-person */
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* Non connecté : 1 lien → bleu */
#account-menu-top li:only-child a {
  background: var(--color-blue);
}

/* Connecté : 1er lien (Mon compte) → rouge */
#account-menu-top li:not(:only-child):first-child a {
  background: var(--color-red);
}

/* Connecté : dernier lien (Se déconnecter) → bleu */
#account-menu-top li:not(:only-child):last-child a {
  background: var(--color-blue);
}

/* APRÈS — le positionne comme account-menu-top */
#block-sakyran-bootstrap5-account-menu {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: var(--top-h) !important;
  display: flex !important;
  align-items: stretch !important;
  z-index: 50;
}
/* ── FIX DÉFINITIF — espace entre boutons compte ── */
.block-anakrys-lien-retour a {
  display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 13px;
    border: 1px solid var(--bs-blue);
    border-radius: 0px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.25s ease;
    color: var(--bs-blue);
}
/* Pictos réseaux sociaux dans le menu principal */
.navbar-nav .nav-item.nav-social {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
}
.navbar-nav .nav-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-dark);
  transition: color 0.2s, transform 0.2s;
}
.navbar-nav .nav-social a:hover {
  color: var(--color-blue);
  transform: translateY(-1px);
}
/* Flèche avant le texte via pseudo-élément */
.block-anakrys-lien-retour a::before {
  content: "←";
  font-size: 1.1em;
  transition: transform 0.25s ease;
}

.block-anakrys-lien-retour a:hover {
  background-color: var(--color-blue-dk);
  color: #fff;
}

.block-anakrys-lien-retour a:hover::before {
  transform: translateX(-4px);
}
.image-text-container.texte_contour_image {
  display: block;
  overflow: hidden;
  margin: 50px 0;
}

.image-text-container.texte_contour_image .positionned-image {
  float: left;
  shape-outside: margin-box;
  margin: 0 1.5rem 0rem 0;
}

.image-text-container.texte_contour_image .text-content {
  display: block;
}

/* Force le ul à rester dans la zone du float */
.image-text-container.texte_contour_image .text-content ul {
  overflow: hidden;
}
#block-sakyran-bootstrap5-account-menu ul[data-drupal-link-system-path="espace-membre"] li.nav-item:nth-child(3) a {
display: none!important;
}
.extranet #block-sakyran-bootstrap5-account-menu ul[data-block="nav_additional"] li.nav-item:nth-child(3) a {
      top: 0px;
    position: relative;
    display: flex !important;
}
#block-sakyran-bootstrap5-account-menu {
  gap: 0 !important;
}
#block-sakyran-bootstrap5-account-menu ul[data-drupal-link-system-path="espace-membre"] li.nav-item:nth-child(3) a,
#block-sakyran-bootstrap5-account-menu ul[data-drupal-link-system-path="espace-membre"] li.nav-item:nth-child(3) a.nav-link {
  background: var(--color-vert)!important;
}

#block-sakyran-bootstrap5-account-menu ul[data-block="nav_additional"] li.nav-item:first-child a,
#block-sakyran-bootstrap5-account-menu ul[data-block="nav_additional"] li.nav-item:first-child a.nav-link {
  background: var(--color-red) !important;
}
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav {
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

#block-sakyran-bootstrap5-account-menu li.nav-item {
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  flex-shrink: 0;
}
#block-sakyran-bootstrap5-account-menu .extra{
  display: none!important;
}
#block-sakyran-bootstrap5-account-menu li.nav-item + li.nav-item {
  border-left: 2px solid rgba(255,255,255,0.3) !important;
}

#block-sakyran-bootstrap5-account-menu a.nav-link {
  margin: 0 !important;
  height: var(--top-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}

#block-sakyran-bootstrap5-account-menu li {
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  display: flex !important;
}

#block-sakyran-bootstrap5-account-menu li {
  display: flex;
  align-items: stretch;   /* ← ajout */
  /*border-left: 2px solid rgba(255,255,255,0.2);*/
  border-left: none; /* supprime la bordure parasite */
}
/* Séparateur fin entre les deux boutons */
#block-sakyran-bootstrap5-account-menu li + li {
  border-left: 2px solid rgba(255,255,255,0.3);
}

.contextual-region .contextual .contextual-links li{
  height: 50px!important;
}
#block-sakyran-bootstrap5-account-menu a {
  display: flex;
  align-items: center;
   padding: 0 16px; /* réduit le padding horizontal */
  /* ← supprime height: 100% si tu l'avais, remplace par : */
  align-self: stretch;
  font-size: 16px;
 font-weight: 300;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  gap: 6px;
  background: var(--color-blue);
  transition: filter 0.2s;
}
#block-sakyran-bootstrap5-account-menu a:hover {
  filter: brightness(1.15);
}
/* Icône "people" devant DEVENIR MEMBRE (1er lien, connecté) */
#block-sakyran-bootstrap5-account-menu li:not(:only-child):first-child a::before {
  font-family: "bootstrap-icons" !important;
  content: "\f4da";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
}

/* Icône "box-arrow-right" devant SE DÉCONNECTER */
#block-sakyran-bootstrap5-account-menu li:not(:only-child):last-child a::before {
  font-family: "bootstrap-icons" !important;
  content: "\f4d7";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
}
/* Non connecté : seul bouton LOGIN */
#block-sakyran-bootstrap5-account-menu li:only-child a::before {
  font-family: "bootstrap-icons" !important;
  content: "\f4d0";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
}
/* Cache les spans emoji injectés par JS
   (les icônes BI les remplacent via ::before) */
#account-menu-top a > span:first-child {
  display: none !important;
}

/* =============================================
   LIGNE 2 — COLLAPSE
   ============================================= */
header[role="banner"] .navbar-collapse {
  order: 10;
  width: 100%;
  background: #fff;
  align-items: center;
  min-height: var(--nav-h);
  flex: none;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /*z-index: 9999999999999;*/
  z-index: 9;
}

/* Desktop uniquement — force le collapse ouvert */

/* =============================================
   LIGNE 2 — MENU PRINCIPAL
   Aligné à GAUCHE sous le logo
   ============================================= */
header[role="banner"] .region-nav-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* ← gauche, sous le logo */
  min-height: var(--nav-h);
  padding-left: 24px;            /* aligne avec le bord gauche du logo */
}

header[role="banner"] .region-nav-main nav {
  width: 100%;
  display: flex;
  justify-content: flex-start;   /* ← gauche */
}

.navbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  justify-content: flex-start;   /* ← gauche */
}

.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item span.nav-link {
  color: var(--color-dark) !important;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  padding: 14px 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item span.nav-link:hover {
  color: var(--color-blue) !important;
      font-weight: 700;
}

.navbar-nav .dropdown-menu {
  border: none;
  border-top: 2px solid var(--color-blue);
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  border-radius: 0 ;
  padding: 6px 0;
  min-width: 240px;
}

.navbar-nav .dropdown-menu .dropdown-item {
  font-size: 15px;
  color: var(--color-dark);
  padding: 9px 20px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.navbar-nav .dropdown-menu .dropdown-item:hover {
  background: var(--color-blue);
  color: #fff;
}
.field--name-title{
  color: var(--color-blue)!important;
      letter-spacing: 1.5px;
}
.file--application-pdf{
 background-image: none!important;
 margin-top: 25px;
    margin-bottom: 35px;

}
.field--name-field-media-document{
 display: flex;
    justify-content: center;
}
.file--mime-application-pdf a{
      display: block;
    width: fit-content;
    margin: 5px auto 0;
    padding: 9px 17px;
    background: var(--color-blue);
    color: white;
       border-radius: 0px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    margin-bottom: 10px!important;
      margin-bottom: 10px !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100% !important;
}
.file--mime-application-pdf a:hover{
background: transparent;
    color: var(--color-blue);
    border: 1px solid var(--accent-color);
}
/* =============================================
   LIGNE 2 — ZONE DROITE  [FR▾ | Search 🔍]
   ============================================= */
header[role="banner"] .region-nav-additional {
  display: flex;
  align-items: stretch;
  height: var(--nav-h);
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  gap: 0;
}

/* =============================================
   SÉLECTEUR DE LANGUE — fond BLEU, à GAUCHE
   ============================================= */
#block-sakyran-bootstrap5-selecteurdelangue {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  background: var(--color-blue);
 
}

/* Cache la liste Drupal brute */
#block-sakyran-bootstrap5-selecteurdelangue > ul[data-block="nav_additional"] {
  display: none !important;
}

/* Bouton dropdown (injecté par JS) */
.lang-dropdown-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: none;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.2s;
}

.lang-dropdown-btn:hover,
.lang-dropdown-btn.active {
  background: rgba(255,255,255,0.12);
}

.lang-dropdown-btn .lang-arrow {
  font-size: 9px;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.2s;
}

.lang-dropdown-btn.active .lang-arrow {
  transform: rotate(180deg);
}
/* =============================================
   CORPS DE PAGE (field body)
   ============================================= */

.field--name-body .field__item p {
  font-size: 14px;
  line-height: 1.7;
  color: #1a3a6b;
  margin-bottom: 1rem;
}

/* =============================================
   BLOC 2 COLONNES
   ============================================= */

.paragraph--type--bloc-2-colonnes-texte {
  /*max-width: 860px;*/
  margin: 2rem auto;
  padding: 1rem;
  font-family: Arial, sans-serif;
}

/* --- Titre centré, majuscules, bleu foncé --- */
.valeurs__titre {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #1a3a6b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Trait horizontal sous le titre */
.valeurs__titre::after {
  content: '';
  display: block;
  width: 100%;
  margin: 0.6rem auto 2rem;
 /* border-top: 2px solid #1a3a6b;*/
}
.paragraph--type--bloc-2-colonnes-texte .para-col-gauche img, .paragraph--type--bloc-2-colonnes-texte .para-col-droite img{
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}
/* --- Colonnes --- */
.para-col-gauche {
  padding-right: 2rem !important;
 /* border-right: 1px solid #b0b8cc;*/
  box-sizing: border-box;
}

.para-col-droite {
  padding-left: 2rem !important;
  box-sizing: border-box;
}

/* --- Texte dans les colonnes --- */
.para-col-gauche p,
.para-col-droite p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-grey-bk);
  margin: 0 0 1rem;
}

.para-col-gauche p:last-child,
.para-col-droite p:last-child {
  margin-bottom: 0;
}

/* Clearfix après les colonnes flottantes */
.paragraph--type--bloc-2-colonnes-texte::after {
  content: '';
  display: table;
  clear: both;
}
/* =============================================
   EXTRANET — fix header mobile
   ============================================= */

/* Cache le dropdown user dans la navbar en mobile
   (il est déjà accessible via la barre Drupal en haut) */

/* Menu déroulant langue */
.lang-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-top: 2px solid var(--color-blue);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border-radius:0px;
  min-width: 150px;
  z-index: 500;
  overflow: hidden;
  display: none;
}

.lang-dropdown-menu.open {
  display: block;
  animation: fadeDown 0.15s ease;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-dropdown-menu a {
 display: flex !important;
  align-items: center !important;
  gap: 9px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  gap: 9px;
  transition: background 0.15s;
}
.lang-dropdown-menu .lang-flag {
  font-size: 12px !important;
  font-weight: 700 !important;
  width: 22px !important;
  min-width: 22px !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1 !important;
}
.lang-dropdown-menu a span:not(.lang-flag) {
  font-size: 12px !important;
  line-height: 1 !important;
}
.lang-dropdown-menu a:hover {
  background: #f0f5ff;
  color: var(--color-blue);
}

.lang-dropdown-menu a.is-active {
  color: var(--color-blue);
  font-weight: 700;
   font-size: 12px !important;
  line-height: 1 !important;
}

.lang-dropdown-menu a.is-active::after {
  content: "✓";
  margin-left: auto;
  font-size: 11px;
  color: var(--color-blue);
}

.lang-flag { font-size: 15px; }

/* Cache le code texte (EN / FR) — drapeau seul visible */
.lang-dropdown-btn .lang-code {
  display: none;
}

/* =============================================
   SÉPARATEUR  langue | recherche
   Barre verticale entre les deux blocs
   ============================================= */
#block-sakyran-bootstrap5-search-form {
  order: 2;
  display: flex;
  align-items: center;
  height: 100%;
  background: #fff;
  /* Barre gauche qui joue le rôle de séparateur */
  border-left: 1px solid #c8d2e4;
  border-right: 1px solid #dde3ee;
  border-top: none;
  border-bottom: none;
}

#block-sakyran-bootstrap5-search-form form {
  display: flex;
  align-items: center;
  height: 100%;
}

#block-sakyran-bootstrap5-search-form .js-form-item {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Champ texte */
#block-sakyran-bootstrap5-search-form .form-search {
  background: transparent;
  border: none;
  color: #051040;
  font-size: 18px;
  padding: 0 12px;
  width: 150px;
  height: 100%;
  outline: none;
  transition: width 0.3s;
}

#block-sakyran-bootstrap5-search-form .form-search::placeholder {
  color: #aab;
}

#block-sakyran-bootstrap5-search-form .form-search:focus {
  width: 190px;
}

/* Bouton submit → icône loupe Bootstrap Icons */
#block-sakyran-bootstrap5-search-form .form-actions {
  display: flex;
  align-items: center;
  height: 100%;
}

#block-sakyran-bootstrap5-search-form input[type="submit"] {
  color: transparent;
  font-size: 0;
  width: 46px;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #f4f6fa;
  border: none;
  border-left: 1px solid #dde3ee;
  cursor: pointer;
  transition: background 0.2s;
  /* Loupe SVG inline (Bootstrap Icons bi-search) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232c5aa0' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

#block-sakyran-bootstrap5-search-form input[type="submit"]:hover {
  background-color: #e8edf8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231f4177' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

/* =============================================
   CAROUSEL / HERO — Bootstrap 5
   Structure injectée par header.js
   ============================================= */
/* ===================== FIX SLIDER PROAVIA ===================== */

/* RESET AVANT ANIMATION */
.proavia-slide-caption > * {
  opacity: 0;
  transform: translateX(-20px);
}

/* ANIMATION UNIQUEMENT ACTIVE */
.carousel-item.active .proavia-slide-caption > * {
  animation: slideInLeft 0.6s ease forwards;
}

/* RESET QUAND INACTIF */
.carousel-item:not(.active) .proavia-slide-caption > * {
  opacity: 0;
  transform: translateX(-20px);
  animation: none;
}

/* LARGEUR + POSITION TEXTE — géré par la règle spécifique plus bas */
/*.proavia-slide-caption {
  width: 38%;
  padding-left: 120px;
}*/

/* OVERLAY PLUS SMOOTH */
.proavia-slide-overlay {
  background: linear-gradient(
    to right,
    var(--color-blue) 0%,
    var(--color-blue) 30%,
    rgba(26,79,179,0.85) 45%,
    rgba(26,79,179,0.4) 60%,
    rgba(26,79,179,0) 75%
  );
}

/* IMAGE CENTRÉE */
.proavia-slide-img {
  object-position: center;
}

/* TRANSITION SLIDE */
.carousel-item {
  transition: transform 0.6s ease-in-out;
}

/* ===================== FIN FIX ===================== */

/* Wrapper full-width breakout + collé sous le nav */
.paragraph--type--bloc-bandeau {
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-top: 0 !important;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
      top: -18px;
}

/* ── Cache le titre h1 "Accueil / Home page" sur la frontpage ──
   Ce titre est généré par Drupal et apparaît avant le slider.
   On le masque pour tous les visiteurs sur la page d'accueil.  */
.path-frontpage .block-page-title-block,
.path-frontpage #block-sakyran-bootstrap5-page-title {
  display: none !important;
}
/*.user-logged-in h1{
color:#fff!important;
}*/
.node-1608 #block-sakyran-bootstrap5-page-title{
    display: none !important;
}
/* Cache les onglets View/Edit/Delete pour les non-admins */
body.path-frontpage:not(.user-logged-in) .block-local-tasks-block,
body.path-frontpage:not(.user-logged-in) #block-sakyran-bootstrap5-local-tasks {
  display: none !important;
}

/* Neutralise l'ancien ::after fond noir */
.paragraph--type--bloc-bandeau::after {
  display: none !important;
}

/* Cache les diapos Drupal originales empilées */
.paragraph--type--element-de-bandeau {
  display: none !important;
}

/* ── Image de fond ── */
.paragraph--type--bloc-bandeau .proavia-slide-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-img {
  animation: kenBurns 9s ease forwards;
}
@keyframes kenBurns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.07); }
}
.news-btn{
      margin-top: 20px;
    margin-bottom: 30px;
}
/* ── Overlay : coupe diagonale nette à 147deg ── */
.paragraph--type--bloc-bandeau .proavia-slide-overlay {
  position: absolute;
  inset: 0;
  /* Pas de background ici — géré dynamiquement par JS */
  pointer-events: none;
  z-index: 1;
}
/* Décor PNG (cercles/orbite) sur la partie colorée */
.proavia-slide-decor {
position: absolute;
    top: -27px;
    left: 0;
    width: 59%;
    height: 426px;
    background-image: url(/themes/custom/sakyran_bootstrap5/images/logo_3_point_blanc.png);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: contain; */
    opacity: 0.4;
    z-index: 999999999;
    pointer-events: none;
}

/* ── Caption ── */
.paragraph--type--bloc-bandeau .proavia-slide-caption {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  height: 100%;
  width: auto;
  max-width:45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Alignement : même bord que le container Bootstrap + espace après la flèche (44px+16px) */
  padding-left: calc(max(24px, calc((100vw - 1320px) / 2 + 24px)) + 60px);
  padding-right: 40px;
  color: #fff;
  box-sizing: border-box;
}

.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-caption > * {
  animation: slideInLeft 0.65s ease both;
}
.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-caption > *:nth-child(1) { animation-delay: 0.08s; }
.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-caption > *:nth-child(2) { animation-delay: 0.22s; }
.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-caption > *:nth-child(3) { animation-delay: 0.36s; }
.paragraph--type--bloc-bandeau .carousel-item.active .proavia-slide-caption > *:nth-child(4) { animation-delay: 0.50s; }
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

.proavia-slide-surtitre {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}
.proavia-slide-titre {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  color: #fff;
  text-transform: uppercase;
}
.proavia-slide-texte {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.90;
  margin-bottom: 28px;
}
.proavia-slide-texte p { margin: 0; font-size: 16px;
    letter-spacing: 0.9px;}

.proavia-slide-btn {
  display: inline-block;
  padding: 10px 28px;
  background: #fff;
  color: var(--color-blue) !important;
  border: 2px solid #fff;
  border-radius: 0px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  align-self: flex-start;
  transition: background 0.2s, color 0.2s;
}
.proavia-slide-btn:hover {
  background: transparent;
  color: #fff !important;
}

/* ── Indicateurs ── */
.paragraph--type--bloc-bandeau .carousel-indicators { margin-bottom: 18px; }
.paragraph--type--bloc-bandeau .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,0.45);
  margin: 0 4px;
  transition: background 0.3s, transform 0.3s;
}
.paragraph--type--bloc-bandeau .carousel-indicators .active {
  background: #fff;
  transform: scale(1.35);
}

/* ── Flèches cercles — repositionnées dans le conteneur ── */
.paragraph--type--bloc-bandeau .carousel-control-prev,
.paragraph--type--bloc-bandeau .carousel-control-next {
  width: 44px; height: 44px;
  top: 50%; transform: translateY(-50%);
  bottom: auto;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7);
  background: transparent;
  opacity: 0.75;
  z-index: 3;   /* au-dessus de l'overlay (z-index: 1) et de la caption (z-index: 2) */
  transition: opacity 0.2s, background 0.2s;
}
/* Aligne les flèches avec le bord gauche du container (même gutter que le texte) */
.paragraph--type--bloc-bandeau .carousel-control-prev {
  left: max(24px, calc((100% - 1320px) / 2 + 24px));
}
.paragraph--type--bloc-bandeau .carousel-control-next {
  right: max(24px, calc((100% - 1320px) / 2 + 24px));
}
.paragraph--type--bloc-bandeau .carousel-control-prev:hover,
.paragraph--type--bloc-bandeau .carousel-control-next:hover {
  opacity: 1;
  background: rgba(255,255,255,0.15);
}
.paragraph--type--bloc-bandeau .carousel-control-prev-icon,
.paragraph--type--bloc-bandeau .carousel-control-next-icon { width: 18px; height: 18px; }
/* =============================================
   MOBILE — 3 boutons dans le menu hamburger
   ============================================= */

/* =============================================
   RESPONSIVE MOBILE
   ============================================= */

/* =============================================
   PRÉSENTATION PROAVIA
   Dimensions maquette :
   - Photo : 478px large × 379px haute
   - Carré bleu : 162px × 144px
   - Zone texte : 690px centrée
   ============================================= */

.paragraph--type--presentation-proavia {
      display: flex;
    align-items: center;
    gap: 80px;
    padding: 80px 0;
    /* max-width: 1260px; */
    margin: 0 auto;
    justify-content: center;
}

/* ── Colonne gauche : photo + bloc bleu ── */
.para-pres-photo {
  position: relative;
 /* flex: 0 0 478px;
  width: 478px;
  /* Fond beige dépasse sous et à droite pour laisser place au carré bleu */
 /* background: #f0ede8;*/
  /*padding-right: 50px;   
  padding-bottom: 56px; */
}

.para-pres-photo img {
  display: block;
  width: 100%;
  height: 379px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Carré bleu SINCE 1976 — 162×144, ancré bas-droite */
.pres-overlay-bloc {
 
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: var(--color-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 29px;
    font-weight: 600;
    text-transform: uppercase;
   
}

/* ── Colonne droite : texte 690px ── */
.para-pres-texte {
  width: 690px;
  flex: 0 0 690px;
}
.paragraph--type--board{
  background: #F5F3F1;
}
.para-pres-texte h2.display-5, .paragraph--type--board h2.display-5 {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.para-pres-texte p {
  font-size: 22px;
  line-height: 35px;
  color: var(--color-dark);
  margin-bottom: 14px;
}

.para-pres-texte p:empty { display: none; }

/* ── Responsive tablette ── */

/* ── Responsive mobile ── */

  /* =============================================
   BLOCS PLEINE LARGEUR (About + News)
   ============================================= */
/* Conteneur plein largeur (commun) */
.paragraph--type--about-proavia-fullwidth,
.paragraph--type--evenements-publiques-fullwidth {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
  padding: 60px 0;
}

/* Conteneur interne (commun) */
.paragraph--type--about-proavia-fullwidth .about-proavia-container,
.paragraph--type--evenements-publiques-fullwidth .events-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =============================================
   ABOUT PROAVIA
   - fond bleu
   - cartes blanches avec image qui dépasse en haut
   - hover : carte bleue + bordure verte + image monte
   - btn blanc → hover fond bleu + bordure blanche + texte blanc
   ============================================= */

.paragraph--type--about-proavia-fullwidth {
  background: var(--color-blue);
  color: #fff;
  text-align: center;
  padding: 50px 20px 50px;
}
.paragraph--type--our-commitments H2{
  text-align: center;
      margin-bottom: 50px;
      color:var( --color-blue: #1A4FB3;)
}
/* Titre */
.paragraph--type--about-proavia-fullwidth strong,
.about-proavia-container h2 {
  display: block;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: #fff;
}
/* =============================================
   BLOCS PLEINE LARGEUR (Board + Partenariats)
   ============================================= */

.paragraph--type--board,
.paragraph--type--partenariats {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
  padding: 25px 0;
}

/* Conteneur interne centré */
.paragraph--type--board > .container,
.paragraph--type--board > div,
.paragraph--type--partenariats > .container,
.paragraph--type--partenariats > div {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}.paragraph--type--board {
  position: relative;
  padding-bottom: 0; /* ou ajustez selon votre layout */
}

.paragraph--type--board::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px; /* hauteur du fondu */
  background: linear-gradient(to top, #ffffff 100%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.paragraph--type--board .col{
      z-index: 5;
}
/* Texte intro */
.paragraph--type--about-proavia-fullwidth p,
.about-proavia-container p {
  max-width: 800px;
  margin: 0 auto 60px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.about-proavia-container p:empty { display: none; }

/* Conteneur centré */
.about-proavia-container {
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

/* GRID 4 cartes — padding-top pour l'image à cheval */
.images-about {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
  padding-top: 30px;
}

/* CARTE — fond blanc, overflow visible pour que l'image dépasse */
.para-about-item {
  background: #fff;
  overflow: visible;
  position: relative;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

/* IMAGE — dépasse vers le haut */
.para-about-item-photo {
  margin-top: -24px;
  overflow: hidden;
  width: calc(100% - 16px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.para-about-item-photo img {
   width: 100% !important;
  height: 200px !important; /* augmentez selon vos images sources */
  object-fit: cover;
  display: block;
  box-shadow: none !important;
  transition: transform 0.35s ease;
}

/* HOVER carte : fond bleu + bordure verte + image monte */
.para-about-item:hover {
  background: var(--color-blue);
  border: 2px solid #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.para-about-item:hover .para-about-item-photo img {
  transform: translateY(-6px);
}

/* LIEN (titre) sous l'image */
.para-about-item-lien {
  margin-top: 16px;
  padding: 0 16px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.para-about-item-lien a {
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-blue);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  transition: color 0.3s ease;
}

.para-about-item:hover .para-about-item-lien a {
  color: #fff;
}

/* BOUTON FLÈCHE .newbtn2 dans les cartes About */
.para-about-item .newbtn2 {
  display: block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 0px;
  flex-shrink: 0;
  margin-top: 14px;
  background-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: background-color 0.2s, transform 0.2s;
}

.para-about-item:hover .newbtn2 {
  background-color: rgba(255,255,255,0.25);
  transform: scale(1.1);
}

/* BOUTON SEE + — blanc avec texte bleu */
.about-proavia-container > a,
.paragraph--type--about-proavia-fullwidth > a[tabindex="-1"]:last-child {
  display: inline-block;
  margin-top: 8px;
  padding: 13px 36px;
  background: #fff;
  color: var(--color-blue) !important;
  border: 2px solid #fff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  border-radius: 0px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* HOVER bouton SEE+ */
.about-proavia-container > a:hover,
.paragraph--type--about-proavia-fullwidth > a[tabindex="-1"]:last-child:hover {
  background: var(--color-blue);
  color: #fff !important;
  border-color: #fff;
}

a.discover-btn-blanc {
  background: var(--color-blue);
  color: #fff !important;
  border-color: #fff;
  display: inline-block;
  margin-top: 8px;
  padding: 13px 36px;
  background: #fff;
  color: var(--color-blue) !important;
  border: 2px solid #fff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  border-radius: 0px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  margin-top: 45px;
}
a.discover-btn-blanc:hover{
      background: var(--color-blue);
    color: #fff !important;
    border-color: #fff;
}
/* RESPONSIVE */

/* ===================== FIN ABOUT PROAVIA ===================== */

/* ===================== FIN ===================== */
/* =============================================
   OUR EVENTS fullwidth
   ============================================= */

/* Fond bleu pleine largeur */
.paragraph--type--evenements-publiques-fullwidth {
  background: var(--color-blue);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

/* Conteneur interne centré */
.paragraph--type--evenements-publiques-fullwidth .events-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* Titre */
.paragraph--type--evenements-publiques-fullwidth .events-container > strong {
  display: block;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 40px;
  color: #fff;
}

/* Masquer debug twig */
.paragraph--type--evenements-publiques-fullwidth .events-container > br {
  display: none;
}

/* ── GRILLE 4 cartes ── */
.paragraph--type--evenements-publiques-fullwidth .item-list ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

/* ── CARTE blanche ── */
.paragraph--type--evenements-publiques-fullwidth .item-list li {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.25s, transform 0.25s;
}

.paragraph--type--evenements-publiques-fullwidth .item-list li:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  transform: translateY(-4px);
}

/* ── IMAGE en haut pleine largeur ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-field-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  order: 1;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-field-image .field-content {
  width: 100%;
  height: 100%;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-field-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.paragraph--type--evenements-publiques-fullwidth .item-list li:hover .views-field-field-image img {
  transform: scale(1.05);
}

/* ── BADGE PROAVIA (haut droite) — masqué, géré par JS ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-field-evenement-proavia {
  display: none !important;
}

/* ── DATE — étiquette texte blanc sur fond bleu ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-field-date {
  order: 20;
  padding: 12px 14px 6px;
  display: block;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-field-date .field-content {
  display: inline-block;
  background: var(--color-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 0px;
}

/* ── DATE FIN : masquée ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-field-date-fin {
  display: none !important;
}

/* ── TITRE ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-title {
  order: 30;
  padding: 6px 14px 6px;
  flex-shrink: 0;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-title a,
.paragraph--type--evenements-publiques-fullwidth .views-field-title span {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
  line-height: 1.35;
  display: block;
  transition: color 0.2s;
}

.paragraph--type--evenements-publiques-fullwidth .item-list li:hover .views-field-title a {
  color: var(--color-blue-dk);
}

/* Pas de pseudo-élément ::after sur le titre events */
.paragraph--type--evenements-publiques-fullwidth .views-field-title::after {
  display: none !important;
  content: none !important;
}

/* ── PAYS + icône 📍 ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-field-pays {
  order: 40;
  padding: 0 14px 8px;
  display: flex !important;
  align-items: center;
  gap: 5px;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-field-pays::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231A4FB3'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-field-pays .field-content,
.paragraph--type--evenements-publiques-fullwidth .views-field-field-pays a {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-red);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── TEXTE BODY ── */
.paragraph--type--evenements-publiques-fullwidth .views-field-body {
  order: 50;
  padding: 0 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #051040;
  flex: 1;
}

.paragraph--type--evenements-publiques-fullwidth .views-field-body .field-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

/* ── BOUTON FLÈCHE injecté par JS (.event-arrow-btn) ── */
.event-arrow-btn{
  margin: 0 auto;
}
.paragraph--type--evenements-publiques-fullwidth .event-arrow-btn {
  order: 60;
  display: block;
  width: 34px;
  height: 34px;
  margin: 4px 14px 14px;
  background: var(--color-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E")
    no-repeat center / 15px;
  border-radius: 0px;
  flex-shrink: 0;
  transition: background-color 0.2s;
      display: flex;
    align-items: center;
    bottom: 19px;
    position: relative;
    margin: 0 auto;
}

.paragraph--type--evenements-publiques-fullwidth .item-list li:hover .event-arrow-btn {
  background-color: var(--color-blue-dk);
}

/* ── SEE + bouton bas centré ── */
.paragraph--type--evenements-publiques-fullwidth .events-see-btn,
.paragraph--type--evenements-publiques-fullwidth .events-container > a[tabindex="-1"] {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 36px;
  background: transparent;
  color: #fff !important;
  border: 2px solid #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 0px;
  transition: background 0.2s, color 0.2s;
}

.paragraph--type--evenements-publiques-fullwidth .events-see-btn:hover,
.paragraph--type--evenements-publiques-fullwidth .events-container > a[tabindex="-1"]:hover {
  background: #fff;
  color: var(--color-blue) !important;
}

/* Masquer le bloc original */
.paragraph--type--evenements-publiques.original {
  display: none !important;
}

/* Responsive */

/* Conteneur principal */
.paragraph--type--testimonials {
  background: white;
  padding-top: 20px;
  padding-bottom:6PX;
  position: relative;
  overflow: hidden;
}

/* Titre */
.paragraph--type--testimonials > strong {
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
 
  margin-bottom: 60px;
  color: #1A4FB3;
}

/* Texte introductif */
.paragraph--type--testimonials .para-testimonials-texte {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

/* Style des témoignages */
.paragraph--type--testimonials .para-testimonials-item {
  max-width: 1000px;
  margin: 0 auto;
  background: #f5f5f5;
  border: 2px solid #1A4FB3;
  padding: 0;
  position: relative;
}

/* Conteneur interne */
.paragraph--type--testimonials .para-testimonials-item-inner {
  display: flex;
  padding: 20px;
}

/* Photo circulaire */
.paragraph--type--testimonials .para-testimonials-item-photo {
  width: 200px;
  height: 200px;
  margin-right: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.paragraph--type--testimonials .para-testimonials-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texte du témoignage */
.paragraph--type--testimonials .para-testimonials-item-texte {
  flex: 1;
  padding-top: 20px;
}

/* Guillemets décoratifs */
.paragraph--type--testimonials .para-testimonials-item::after {
  content: '';
  position: absolute;
     top: -40px;
    right: 20px;
    width: 145px;
  background: url("../images/icone_dialog.png") no-repeat;
  background-size: contain;
  z-index: 1;
  height:99px ;
}

/* Navigation */
.paragraph--type--testimonials .testimonial-nav {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 10;
}

.paragraph--type--testimonials .testimonial-nav button {
  width: 40px;
  height: 40px;
  border: 2px solid #1A4FB3;
  background: transparent;
  border-radius: 50%;
  color: #1A4FB3;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.paragraph--type--testimonials .testimonial-nav button:hover {
  background: #1A4FB3;
  color: white;
}

/* Indicateurs */
.paragraph--type--testimonials .testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.paragraph--type--testimonials .testimonial-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
}

.paragraph--type--testimonials .testimonial-dots button.active {
  background: #1A4FB3;
}

/* Responsive */

/* =============================================
   OUR MEMBERS
   - flèches gauche / droite encadrant les logos
   - logos défilent entre les flèches
   - flèches toujours visibles, jamais cachées
   ============================================= */

/* Conteneur principal */
.views-element-container.block-views-blocknos-membres-block-logos-membres {
  background: white;
  padding: 47px 0;
  position: relative;
  overflow: visible;
}

/* Titre "OUR MEMBERS" */
.paragraph--type--nos-membres h2{
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;

  margin-bottom: 48px;
  color: var(--color-blue);
  margin-top: 55px;
}
.paragraph--type--our-commitments h2{
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
 
  margin-bottom: 48px;
  color: var(--color-blue);
  margin-top: 55px;
}
.block-views-blocknos-membres-block-logos-membres h2 {
 text-align: center;
    display: none;
}

/* Wrapper global : flèche | logos | flèche */
.views-element-container.block-views-blocknos-membres-block-logos-membres .view-content {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 70px;   /* espace réservé aux flèches de chaque côté */
  overflow: visible;
}

/* Zone de défilement des logos — masque ce qui déborde */
.views-element-container.block-views-blocknos-membres-block-logos-membres .item-list {
  overflow: hidden;
  width: 100%;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .item-list ul {
  display: flex;
  gap: 48px;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform 0.5s ease;
  align-items: center;
}

/* Chaque logo */
.views-element-container.block-views-blocknos-membres-block-logos-membres .item-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  flex: 0 0 auto;
}

/* Image du logo */
.views-element-container.block-views-blocknos-membres-block-logos-membres .item-list img {
  max-width: 160px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(30%);
  transition: filter 0.2s;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .item-list li:hover img {
  filter: grayscale(0%);
}

/* ── FLÈCHES GAUCHE / DROITE ── */
.views-element-container.block-views-blocknos-membres-block-logos-membres .members-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
  padding: 0 8px;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .members-nav button {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border: 2px solid var(--color-blue);
  background: #fff;
  border-radius: 50%;
  color: var(--color-blue);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .members-nav button:hover {
  background: var(--color-blue);
  color: #fff;
  transform: scale(1.08);
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .members-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ── DOTS ── */
.views-element-container.block-views-blocknos-membres-block-logos-membres .members-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .members-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-blue);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.views-element-container.block-views-blocknos-membres-block-logos-membres .members-dots button.active {
  background: var(--color-blue);
}

/* ── BOUTON DISCOVER ── */

 a.discover-btn {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  padding: 12px 32px;
  background: var(--color-blue);
  color: white;
  border: 2px solid var(--color-blue);
  border-radius: 0px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  margin-bottom: 65px;
}

 a.discover-btn:hover {
  background: transparent;
  color: var(--color-blue);
}

/* ── RESPONSIVE ── */

/* =============================================
   OUR NEWS — .paragraph--type--nos-actualites
   ============================================= */
.paragraph--type--nos-actualites {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #f6f6f7;
  padding: 64px 0 56px;
}

/* Titre "OUR NEWS" */
.paragraph--type--nos-actualites > strong {
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 40px;
  color: var(--color-blue);
}

/* Masque le texte de debug twig */
.paragraph--type--nos-actualites > br {
  display: none;
}

/* Wrapper : les .views-row sont enfants directs de .view-content */
.paragraph--type--nos-actualites .view-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  /*overflow: hidden;*/
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: stretch;
}

/* Si .views-view-unformatted est présent, le rendre transparent */
.paragraph--type--nos-actualites .views-view-unformatted {
  display: contents;
}

/* ── CARTE ── */
.paragraph--type--nos-actualites .views-row {
  flex: 0 0 calc(25% - 15px);
  min-width: 0;
  background: #fff;
  border-radius:0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
  height: 480px;
    padding-bottom: 27px;
}

.paragraph--type--nos-actualites .views-row:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  transform: translateY(-4px);
}

/* ── IMAGE : pleine largeur de la carte ── */
.paragraph--type--nos-actualites .views-field-field-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}

/* field-content intermédiaire Drupal */
.paragraph--type--nos-actualites .views-field-field-image .field-content {
  width: 100%;
  height: 100%;
  display: block;
}

.paragraph--type--nos-actualites .views-field-field-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
}

.paragraph--type--nos-actualites .views-row:hover .views-field-field-image img {
  transform: scale(1.05);
  transition: transform 0.45s ease;
}

/* ── TITRE ── */
.paragraph--type--nos-actualites .views-field-title {
  padding: 14px 14px 0;
  flex: 1;
}

/* field-content du titre */
.paragraph--type--nos-actualites .views-field-title .field-content,
.paragraph--type--nos-actualites .views-field-title span {
  display: block;
}
.field-content{
  font-size: 15px;
}
.paragraph--type--nos-actualites .views-field-title a {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-blue);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  transition: color 0.2s;
}

.paragraph--type--nos-actualites .views-row:hover .views-field-title a {
  color: var(--color-blue-dk);
}

/* ── CORPS ── */
.paragraph--type--nos-actualites .views-field-body {
  padding: 8px 14px 0;
  font-size: 12px;
  line-height: 1.55;
  color: #051040;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /*overflow: hidden;*/
}

.paragraph--type--nos-actualites .views-field-body .field-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── BOUTON FLÈCHE bleue en bas de carte ── */
.newbtn::after{
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 12px 14px 14px;
  background: var(--color-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E")
    no-repeat center / 15px;
  border-radius: 0px;
  flex-shrink: 0;
  transition: background-color 0.2s;
      margin: 0 auto;
    margin-top: 15px;
}
.news-see-btn{
  content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin: 12px 14px 14px;
    background: var(--color-blue) url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E) no-repeat center / 15px;
    border-radius: 0px;
    flex-shrink: 0;
    transition: background-color 0.2s;
    margin: 0 auto;
    margin-top: 15px;
}
.paragraph--type--nos-actualites .views-field.views-field-body::after {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 12px 14px 14px;
  background: var(--color-blue)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E")
    no-repeat center / 15px;
  border-radius: 0px;
  flex-shrink: 0;
  transition: background-color 0.2s;
      margin: 0 auto;
    margin-top: 15px;
}

.paragraph--type--nos-actualites .views-row:hover .views-field-title::after {
  background-color: var(--color-blue-dk);
}

/* ── CONTRÔLES : [←][→]  [SEE +] centrés ── */
.paragraph--type--nos-actualites .news-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  padding: 0 24px;
}

.paragraph--type--nos-actualites .news-nav {
  display: flex;
  gap: 8px;
  display: none;
}

.paragraph--type--nos-actualites .news-nav button {
  width: 42px;
  height: 42px;
  background: var(--color-blue);
  border: none;
  border-radius: 0x;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}

.paragraph--type--nos-actualites .news-nav button:hover {
  background: var(--color-blue-dk);
}

.paragraph--type--nos-actualites .news-nav button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.views-row:hover {
  opacity: 0.9;
  transition: opacity 0.2s;
}
/* SEE + dans .news-controls */
.paragraph--type--nos-actualites .news-see-btn {
      display: block;
    padding: 13px;
    background: var(--color-blue);
    color: #fff !important;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid var(--color-blue);
    border-radius: 0px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    /* white-space: nowrap; */
    width: 113px;
    height: auto;
    text-align: center;
    margin-top: 60px;
}

.paragraph--type--nos-actualites .news-see-btn:hover {
  background: transparent;
  color: var(--color-blue) !important;
}

/* Cache le lien original (déplacé dans .news-controls par JS) */
.paragraph--type--nos-actualites > a[tabindex="-1"] {
  display: none !important;
}

/* Responsive */

/* =============================================
   5 REASONS TO BE A MEMBER - CORRIGÉ v2
   ============================================= */
.paragraph--type--raisons-devenir-membre {
  background: white;
  padding: 60px 20px;
  text-align: center;
  overflow: visible;
}

/* Titre */
.paragraph--type--raisons-devenir-membre > strong {
  display: block;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;

  margin-bottom: 20px;
  color: var(--color-blue);
}

/* Texte introductif */
.paragraph--type--raisons-devenir-membre > div > p,
.paragraph--type--raisons-devenir-membre > p {
  max-width: 900px;
  margin: 0 auto 40px;
  font-size: 15px;
  line-height: 1.7;
  color: #051040;
}

/* Container des raisons - cibler le parent direct des blocs */
.paragraph--type--raisons-devenir-membre .para-raison-container,
.paragraph--type--raisons-devenir-membre .field__items,
.paragraph--type--raisons-devenir-membre > .field {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 auto 40px;
  max-width: 1320px;
  width: 100%;
}

/* Chaque bloc de raison */

.contentFlex{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.marginB85{
  margin-bottom: 85px;
}
.paragraph--type--raisons-devenir-membre .para-raison-texte,
.paragraph--type--raisons-devenir-membre .field__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  background: var(--color-blue);
  color: white;
  padding: 30px 20px;
  text-align: center;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
  min-height: 180px;
  position: relative;
}

/* Numéro */
.paragraph--type--raisons-devenir-membre .para-raison-texte span,
.paragraph--type--raisons-devenir-membre .field__item > span:first-child {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 51px;
  background: var(--color-red);
  color: white;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  border-radius: 0px;
  position: absolute;
    top: -25px;
}

/* Texte */
.paragraph--type--raisons-devenir-membre .para-raison-texte p,
.paragraph--type--raisons-devenir-membre .field__item p {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
  color: white;
  margin-top: 25px;
    letter-spacing: 0.9px;
}

/* Bouton Become a member */
.paragraph--type--raisons-devenir-membre > a,
.paragraph--type--raisons-devenir-membre a[tabindex="-1"] {
  display: inline-block;
  margin: 20px auto 0;
  padding: 14px 36px;
  background: var(--color-red);
  color: white !important;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 0px;
  transition: background 0.2s;
}

.paragraph--type--raisons-devenir-membre > a:hover,
.paragraph--type--raisons-devenir-membre a[tabindex="-1"]:hover {
  background: var(--color-red-dk);
}

/* Masquer les images parasites en bas */
.paragraph--type--raisons-devenir-membre > img {
  display: none !important;
}

/* Responsive tablette : garder 5 blocs en ligne mais plus compacts */

/* Responsive mobile : scroll horizontal pour garder 5 blocs */

/* ===================== FIN EVENTS ===================== */

/* =============================================
   OUR COMMITMENTS
   - pas de bordure
   - fond carte = couleur de la classe au hover
   - bouton flèche centré
   - hover : scale(1.04) + fond plein + texte blanc
   ============================================= */

/* Couleurs par carte */
:root {
  --commit-0: #5bbcb8;
  --commit-1: #f15e00;
  --commit-2: #63a34d;
  --commit-3: #1e2d4f;
  --commit-4: #1a4fb3;
}

/* ── Bloc principal — sans bordure ── */
.paragraph--type--our-commitments {
  padding: 60px 24px;
  max-width: 1320px;
  margin: 0 auto;
  background: #fff;
}

/* ── Titre ── */
.paragraph--type--our-commitments h2.display-5 {
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;

  color: var(--color-blue);
  margin-bottom: 36px;
}

/* ── Texte intro ── */
.paragraph--type--our-commitments p.lead {
  text-align: left;
  font-size: 14px;
  line-height: 1.65;
  color: #051040;
  margin-bottom: 40px;
}

.paragraph--type--our-commitments p.lead:empty { display: none; }

/* ── GRILLE 4 cartes — padding top pour le bandeau qui dépasse ── */
/* Conteneur pour le lien overlay */
.para-commitmentS-item-container {
    position: relative;
    display: flex; /* Conserve le comportement flex de la grille */
}

/* Lien transparent qui couvre toute la zone */
.para-commitmentS-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* Doit être supérieur au contenu mais inférieur au bandeau */
    cursor: pointer;
}

/* Assure que le bandeau reste au-dessus du lien */
.para-commitmentS-item > div:first-of-type {
    position: relative;
    z-index: 2; /* Doit rester au-dessus du lien overlay */
}

/* Assure que la flèche reste cliquable et visible */
.para-commitmentS-item-lien {
    position: relative;
    z-index: 2; /* Doit rester au-dessus du lien overlay */
}
.images-commitmentS {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 28px;
}

/* ── CARTE — overflow visible pour l'effet à cheval ── */
.para-commitmentS-item {
  background: #f6f6f7;
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hover : grossit + prend la couleur de sa classe */
.para-commitmentS-item-container {
  position: relative;
  display: flex;
  transition: transform 0.3s ease;
}
.para-commitmentS-item-container:hover {
  transform: scale(1.04);
}
.para-commitmentS-item {
  flex: 1;              /* la carte remplit tout le conteneur */
}
/* ── BANDEAU à cheval — déborde de 24px vers le haut ── */
.para-commitmentS-item > div:first-of-type {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 16px;
  text-align: center;
  position: relative;
  margin: -24px 16px 16px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.3s ease;
}

.para-commitmentS-item.color0 > div:first-of-type { background: var(--commit-0); }
.para-commitmentS-item.color1 > div:first-of-type { background: var(--commit-1); }
.para-commitmentS-item.color2 > div:first-of-type { background: var(--commit-2); }
.para-commitmentS-item.color3 > div:first-of-type { background: var(--commit-4); }

/* Bandeau fond transparent au hover (la carte est déjà colorée) */
.para-commitmentS-item:hover > div:first-of-type {
  /*background: rgba(255,255,255,0.15);*/
}
/* ── COMMITMENTS : hover carte ── */
.para-commitmentS-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.para-commitmentS-item * {
  transition: color 0.3s ease;
}

.para-commitmentS-item-lien {
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.para-commitmentS-item-lien a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* AU HOVER : fond coloré */
.para-commitmentS-item-container:hover .para-commitmentS-item.color0 { background: var(--commit-0); }
.para-commitmentS-item-container:hover .para-commitmentS-item.color1 { background: var(--commit-1); }
.para-commitmentS-item-container:hover .para-commitmentS-item.color2 { background: var(--commit-2); }
.para-commitmentS-item-container:hover .para-commitmentS-item.color3 { background: var(--commit-4); }

/* Texte + flèche blancs au hover */
.para-commitmentS-item-container:hover .para-commitmentS-item,
.para-commitmentS-item-container:hover .para-commitmentS-item *,
.para-commitmentS-item-container:hover .para-commitmentS-item-lien a::after,
.para-commitmentS-item-container:hover .para-commitmentS-item-lien a::before {
  color: #fff !important;
}

.para-commitmentS-item-container:hover .para-commitmentS-item-lien {
  opacity: 1;
}
.video-embed-wrapper {
  margin: 2rem auto;
  max-width: 800px; /* ajustez selon votre design */
  text-align: center;
}

.video-embed-wrapper video {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.linkedin-share-wrapper {
    display: flex;
    justify-content: center;
    margin: 24px 0 32px;
}

.btn-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background-color: #0A66C2;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-radius: 0px; /* pilule, plus moderne */
    box-shadow: 0 3px 8px rgba(10, 102, 194, 0.3);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-linkedin:hover {
    background-color: #004182;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(10, 102, 194, 0.4);
}

.btn-linkedin:active {
    transform: translateY(0);
}

.btn-linkedin__icon {
    flex-shrink: 0;
}
/* Masquer une éventuelle étiquette de champ résiduelle, au cas où 
.video-embed-wrapper .field__label {
  display: none;
}
*/
/* Si vous voulez aussi garder le style responsive pour l'iframe */
.video-embed-wrapper--iframe {
  position: relative;
  width: 100%;
  max-width: 800px;
  padding-bottom: 45%; /* environ ratio 16:9 sur 800px */
  height: 0;
  overflow: hidden;
}
h2.video-title{
  text-align: center;
}

.video-embed-wrapper--iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ── TITRE (2e div) ── */
.para-commitmentS-item > div:nth-of-type(2) {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  line-height: 1.4;
  padding: 16px 16px 8px;
  transition: color 0.3s ease;
}

/*.para-commitmentS-item:hover > div:nth-of-type(2) { color: #fff; }*/

/* ── LISTE (3e div) ── */
.para-commitmentS-item > div:nth-of-type(3) {
  flex: 1;
  padding: 0 16px 12px;
}

.para-commitmentS-item > div:nth-of-type(3) p {
  position: relative;
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #444;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.para-commitmentS-item:hover > div:nth-of-type(3) p { color: rgba(255,255,255,0.9); }

/* Puces colorées */
.para-commitmentS-item > div:nth-of-type(3) p::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.para-commitmentS-item.color0 > div:nth-of-type(3) p::before { color: var(--commit-0); }
.para-commitmentS-item.color1 > div:nth-of-type(3) p::before { color: var(--commit-1); }
.para-commitmentS-item.color2 > div:nth-of-type(3) p::before { color: var(--commit-2); }
.para-commitmentS-item.color3 > div:nth-of-type(3) p::before { color: var(--commit-4); }

/* Puce blanche au hover */
.para-commitmentS-item:hover > div:nth-of-type(3) p::before { color: #fff; }

/* Texte Drupal white-space */
.para-commitmentS-item > div:nth-of-type(3) span { white-space: normal !important; }

/* ── BOUTON FLÈCHE — centré ── */
.para-commitmentS-item-lien {
  padding: 8px 16px 20px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;   /* centré horizontalement */
}

.para-commitmentS-item-lien a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0px;
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.para-commitmentS-item-lien a:hover { transform: scale(1.12); }

/* Couleur du bouton par défaut */
.para-commitmentS-item.color0 .para-commitmentS-item-lien a { background-color: var(--commit-0); }
.para-commitmentS-item.color1 .para-commitmentS-item-lien a { background-color: var(--commit-1); }
.para-commitmentS-item.color2 .para-commitmentS-item-lien a { background-color: var(--commit-2); }
.para-commitmentS-item.color3 .para-commitmentS-item-lien a { background-color: var(--commit-3); }

/* Bouton blanc semi-transparent au hover de la carte */
/* ✅ APRÈS — s'active dès qu'on survole n'importe où sur le bloc */
.para-commitmentS-item-container:hover .para-commitmentS-item-lien a {
  background-color: rgba(255,255,255,0.25);
}

/* ── RESPONSIVE ── */

/* ===================== FIN COMMITMENTS ===================== */

/* =============================================
   MEMBERS EXPERTISE
   - fond bleu pleine largeur
   - 4 cartes blanches, image à cheval sur le haut
   - titre majuscules centré
   - bouton flèche bleu centré
   ============================================= */

.paragraph--type--members-expertise {
  background: var(--color-blue);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 64px 24px 72px;
  position: relative;
  overflow: visible;
}

/* Titre */
.paragraph--type--members-expertise h2.display-5 {
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;

  color: #fff;
  margin-bottom: 56px;
}

/* Texte intro vide */
.paragraph--type--members-expertise p.lead:empty { display: none; }

/* ── GRILLE 4 cartes ── */
.images-expertises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 60px;   /* espace pour l'image qui dépasse */
}

/* ── CARTE blanche ── */
.para-images-expertises-item {
  background: #fff;
  overflow: visible;           /* laisse l'image déborder */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 16px 24px;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.para-images-expertises-item:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  transform: translateY(-4px);
}

/* ── IMAGE à cheval — déborde vers le haut ── */
.para-images-expertises-item-photo {
  margin-top: -56px;           /* déborde de 56px au-dessus de la carte */
  width: calc(100% - 16px);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.para-images-expertises-item-photo img {
  width: 100% !important;
  height: 170px !important;
  object-fit: cover;
  display: block;
  box-shadow: none !important;  /* écrase le style inline */
  transition: transform 0.4s ease;
}

.para-images-expertises-item:hover .para-images-expertises-item-photo img {
  transform: scale(1.05);
}

/* ── TITRE du lien — majuscules, gras, centré ── */
.para-images-expertises-item-lien {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 16px;
}

.para-images-expertises-item-lien a {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-dark);
  text-decoration: none;
  line-height: 1.4;
  text-align: center;
  display: block;
  transition: color 0.2s;
}

.para-images-expertises-item:hover .para-images-expertises-item-lien a {
  color: var(--color-blue);
}

/* ── BOUTON FLÈCHE bleu centré (.newbtn) ── */
.para-images-expertises-item .newbtn {
  display: block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 0px;
  flex-shrink: 0;
  background-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: background-color 0.2s, transform 0.2s;
}

.para-images-expertises-item:hover .newbtn {
  background-color: var(--color-blue-dk);
  transform: scale(1.1);
}

/* ── BOUTON FLÈCHE (.newbtn2) — même style, classe séparée ── */
.newbtn2 {
  display: block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 0px;
  flex-shrink: 0;
  background-color: var(--color-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  transition: background-color 0.2s, transform 0.2s;
}

.para-images-expertises-item:hover .newbtn2 {
  background-color: var(--color-blue-dk);
  transform: scale(1.1);
}

/* ── RESPONSIVE ── */

/* ===================== FIN MEMBERS EXPERTISE ===================== */

/* ══════════════════════════════════════════════════════
   TITRE PAGE — dans le ::after bleu du header (JS)
   ══════════════════════════════════════════════════════ */

/* Le ::after bleu du header devient transparent
   quand le titre JS est injecté dedans 
header[role="banner"].has-page-title-band::after {
  background: transparent !important;
}

/* La bande titre injectée dans le header 
#proavia-page-title-band {
  position: relative;
  z-index: 2;
  top: -78px;       
  margin-bottom: -78px;
  width: 100%;
  background: var(--color-blue, #1A4FB3);
  padding: 20px 40px;
  display: flex;
  align-items: center;
  min-height: 78px;
}

#proavia-page-title-band span {
  color: #fff;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}*/

/********page recherche*/
/* ─────────────────────────────────────────────
   SEARCH RESULTS — Design Override
   Scope : .path-recherche-solr uniquement
   Ne modifie aucun HTML.
───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ── */
.path-recherche-solr {
  --color-blue:    #1A4FB3;
  --color-blue-dk: #1f4177;
  --color-red:     #c0392b;
  --color-red-dk:  #a93226;
  --color-dark:    #051040;
  --color-grey:    #f6f6f7;

  --c-bg:         #ffffff;
  --c-accent:     var(--color-blue);
  --c-accent-l:   #EAF0FB;
  --c-ink:        var(--color-dark);
  --c-muted:      #5a6378;
  --c-border:     #dde2ec;
  --c-hover:      var(--color-grey);
  --radius:       8px;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  background-color: var(--c-bg);
  font-family: var(--font-body);
  color: var(--c-ink);
  width: 100%;
}

/* ── Conteneur principal pleine largeur ── */
.path-recherche-solr .view-recherche-sol-r {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem 3rem;
}

/* ── En-tête : compteur de résultats ── */
.path-recherche-solr .view-header {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: 1rem;
  margin-bottom: 0;
  border-bottom: 2px solid var(--color-dark);
}

/* ── Conteneur des lignes ── */
.path-recherche-solr .view-content {
  margin-top: 0;
  counter-reset: result-counter;
}

/* ── Chaque résultat ── */
.path-recherche-solr .views-row {
  counter-increment: result-counter;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 1.25rem 0;
  border-bottom: 0.5px solid var(--c-border);
  cursor: pointer;
  transition: all 0.18s ease;
}

.path-recherche-solr .views-row:hover {
  background: var(--c-hover);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  border-radius: var(--radius);
  border-bottom-color: transparent;
}

/* ── Numéro ordinal ── */
.path-recherche-solr .views-row::before {
  content: counter(result-counter, decimal-leading-zero);
  position: absolute;
  right: 0;
  top: 1.3rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--c-border);
  transition: color 0.18s;
}

.path-recherche-solr .views-row:hover::before {
  color: var(--color-blue);
}

/* ── Trait accent gauche au hover ── */
.path-recherche-solr .views-row::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--color-blue);
  border-radius: 0px;
  transition: transform 0.18s ease;
}

.path-recherche-solr .views-row:hover::after {
  transform: translateY(-50%) scaleY(1);
}

/* ── Titre du résultat ── */
.path-recherche-solr .views-field-title {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  color: var(--c-ink);
}

.path-recherche-solr .views-field-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.path-recherche-solr .views-row:hover .views-field-title a {
  color: var(--color-blue);
}

/* ── Extrait / snippet ── */
.path-recherche-solr .views-field-search-api-excerpt {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--c-muted);
}

.path-recherche-solr .views-field-search-api-excerpt strong {
  color: var(--color-blue-dk);
  font-weight: 500;
  background: var(--c-accent-l);
  padding: 0 3px;
  border-radius: 0px;
}

/* ── Pagination ── */
.path-recherche-solr .pager {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 0.5px solid var(--c-border);
}

.path-recherche-solr .pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.path-recherche-solr .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  background: transparent;
  border: 0.5px solid var(--c-border);
  border-radius: var(--radius);
  transition: all 0.15s;
}

.path-recherche-solr .page-item .page-link:hover {
  background: var(--c-hover);
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.path-recherche-solr .page-item.active .page-link,
.path-recherche-solr .page-item.is-active .page-link {
  background: var(--color-blue);
  color: #ffffff;
  border-color: var(--color-blue);
}

.path-recherche-solr .pager__item--next .page-link,
.path-recherche-solr .pager__item--last .page-link {
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.path-recherche-solr .pager__item--next .page-link:hover,
.path-recherche-solr .pager__item--last .page-link:hover {
  background: var(--color-dark);
  color: #fff;
}

/* ── Barre contextuelle Drupal ── */
.path-recherche-solr .contextual {
  opacity: 0;
  pointer-events: none;
}

/* ── Visually hidden (accessibilité) ── */
.path-recherche-solr .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/********finpage recherche*/

/*****paragraph--fiches-membres.html.twig***/
.paragraph--type--fiches-membres .fiches-membres {
  padding: 2rem 0;
}

.paragraph--type--fiches-membres .fiches-membres__label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin: 0 0 1.25rem;
}

/* Grille : 2 colonnes sur desktop, 1 sur mobile */
.paragraph--type--fiches-membres .fiches-membres__grid {
   border-radius: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background-color: #e0e0e0;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  overflow: hidden;
}

/* Carte */
.paragraph--type--fiches-membres .fiches-membres__card {
  background: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.paragraph--type--fiches-membres .fiches-membres__card:hover {
  background: #1A4FB3;
  color: #fff;
}
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__name  { color: #fff; }
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__slogan { color: rgba(255,255,255,0.65); }
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__desc   { color: rgba(255,255,255,0.8); }
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__arrow  { opacity: 1; color: #fff; }
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__logo-wrap {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
}
.paragraph--type--fiches-membres .fiches-membres__card:hover .fiches-membres__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* En-tête de carte */
.paragraph--type--fiches-membres .fiches-membres__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo */
.paragraph--type--fiches-membres .fiches-membres__logo-wrap {
  width: 48px;
  height: 48px;
  border-radius: 0px;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f3;
}

.paragraph--type--fiches-membres .fiches-membres__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.paragraph--type--fiches-membres .fiches-membres__logo-placeholder {
  font-size: 16px;
  font-weight: 500;
  color: #888;
}

/* Nom + slogan */
.paragraph--type--fiches-membres .fiches-membres__meta {
  flex: 1;
  min-width: 0;
}

.paragraph--type--fiches-membres .fiches-membres__name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paragraph--type--fiches-membres .fiches-membres__slogan {
  font-size: 12px;
    color: var(--color-dark);;
  margin: 3px 0 0;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Flèche */
.paragraph--type--fiches-membres .fiches-membres__arrow {
  font-size: 15px;
  color: var(--color-dark);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}

/* Description */
.paragraph--type--fiches-membres .fiches-membres__desc {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Responsive */

/*****fin paragraph--fiches-membres.html.twig***/

.contact-item {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 0px;
  background: #e8eef9;
  color: var(--blue);
  font-weight: 500;
  border: 0.5px solid #bdd0f0;
  margin-bottom: 4px;
}

/* =============================================
   BANDEAU — VERSION MOBILE (maquette)
   Image en fond + calque bleu, texte blanc centré, bouton rouge
   ============================================= */

/* ============================================
   MENU D'ANCRES SOUS LE BANDEAU
   (généré par initSectionAnchors() dans header.js)
   ============================================ */
.proavia-anchor-nav {
  width: 100%;
  background: #f5f6f8;
  border-bottom: 1px solid #e2e4e8;
  box-sizing: border-box;
}

.proavia-anchor-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 8px;
  margin: 0 auto;
  padding: 10px 20px;
  max-width: 1320px;
  box-sizing: border-box;
}

.proavia-anchor-nav li {
  flex: 0 0 auto;
}

.proavia-anchor-nav a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-blue, #1A4FB3);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.proavia-anchor-nav a:hover,
.proavia-anchor-nav a:focus {
  color: var(--color-red, #c0392b);
  border-bottom-color: var(--color-red, #c0392b);
}

/* Décale le point d'ancrage pour que le titre ne colle pas
   en haut de l'écran quand on clique sur un lien du menu */
#about-proavia,
#our-commitments,
#members-expertise,
#our-members,
#our-news,
#our-events,
#testimonials,
#why-join-proavia {
  scroll-margin-top: 20px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE.CSS — règles @media / @container regroupées
   Généré automatiquement à partir des fichiers sources
   ══════════════════════════════════════════════════════ */


/* ─────────── depuis article-page.css ─────────── */

@media (max-width: 640px) {
  .node--type-article.node--view-mode-full {
    padding: 0 0 32px;
  }
  .art-hero-wrap img {
    max-height: 220px;
  }
  .art-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 1024px) {
  .view-actualites .view-content {
    flex-direction: column;
    padding: 0 24px;
    gap: 20px;
  }
  .view-actualites .views-row {
    flex: 0 0 auto;
    width: 100%;
  }
  .view-actualites .views-row article.node--view-mode-teaser {
    height: auto;
  }
}

@media (max-width: 767px) {
  .view-actualites .views-exposed-form .form--inline {
    flex-direction: column;
    align-items: stretch;
  }
  .view-actualites .views-exposed-form .js-form-item-year {
    flex: 0 0 auto;
  }
}

@media (max-width: 600px) {
  .view-actualites .view-content {
    padding: 0 16px;
  }
}

@media (max-width: 900px) {
  #partenariats-privilegies .pp-item--haut {
    flex: 1 1 160px;
    max-width: 220px;
  }
}

@media (max-width: 600px) {
  #partenariats-privilegies .content-img-haut {
    flex-direction: column;
    align-items: center;
  }

  #partenariats-privilegies .pp-item--haut {
    max-width: 100%;
    width: 100%;
  }

  #partenariats-privilegies .pp-item--gauche {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #partenariats-privilegies .pp-item--gauche .pp-item__logo-wrapper {
    width: 100%;
    justify-content: center;
  }

  #partenariats-privilegies .pp-item--gauche .pp-item__texte {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .valeurs__grille {
    gap: 16px;
  }

  .valeurs__carte {
    padding: 24px 20px;
    gap: 16px;
  }

  .valeurs__nom {
    min-width: 80px;
    max-width: 110px;
    font-size: 0.9rem;
  }
}

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

  .valeurs__carte {
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
  }

  .valeurs__nom {
    max-width: 100%;
    font-size: 1rem;
  }

  .valeurs__titre {
    font-size: 1.25rem;
    margin-bottom: 32px;
  }
}


/* ─────────── depuis custom.css ─────────── */

@media (max-width: 991px) {
  .use-case {
    width: 100%;
  }
}

@media (min-width: 992px) {
  header[role="banner"] .navbar-collapse {
    display: flex !important;
  }
}

@media (max-width: 991px) {
  header[role="banner"] .navbar-brand img{
        padding-top: 9px;
  }
  .user-logged-in .member-hero-user-menu {
    display: none !important;
  }
.extranet header[role="banner"]::after, .page-route-view-events-page-1 header[role="banner"]::after, .page-route-view-documents-page-1 header[role="banner"]::after {top:5px;}
  /* La navbar-brand ne doit pas dépasser la hauteur var(--top-h) */
   .user-logged-in .extranet header[role="banner"] .navbar-brand {
    height: var(--top-h) !important;
    overflow: hidden;
  }

  /* Le logo reste aligné correctement */
   .user-logged-in .extranet header[role="banner"] .region-nav-branding {
    height: var(--top-h) !important;
    overflow: hidden;
  }

  /* Le container de la navbar reste sur une seule ligne */
   .user-logged-in .extranet header[role="banner"] .navbar > .container {
    height: var(--top-h) !important;
    overflow: visible;
  }
  .view-events .node--type-evenement .ev-img-wrap{
    display: none;
  }
 .view-events .views-row .node--type-evenement {    border: 1px solid #eee;}
}

@media (max-width: 991px) {

  /* Retire le positionnement absolu des boutons compte */
  #block-sakyran-bootstrap5-account-menu {
    position: static !important;
    height: auto !important;
    order: 5 !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: none !important; /* cachés hors menu */
  }

  /* Quand le collapse est ouvert, on affiche les boutons */
  .navbar-collapse.show #block-sakyran-bootstrap5-account-menu,
  .navbar-collapse.collapsing #block-sakyran-bootstrap5-account-menu {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  #block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav {
    flex-direction: row !important;
    width: 100% !important;
    gap: 0 !important;
  }

  #block-sakyran-bootstrap5-account-menu li.nav-item {
    flex: 1 !important;
    border-left: none !important;
  }

  #block-sakyran-bootstrap5-account-menu li.nav-item + li.nav-item {
    border-left: 2px solid rgba(255,255,255,0.3) !important;
  }

  #block-sakyran-bootstrap5-account-menu a.nav-link {
    width: 100% !important;
    height: 52px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
  }

  /* Icônes cachées sur mobile pour gagner de la place */
  #block-sakyran-bootstrap5-account-menu a::before {
    display: none !important;
  }

  /* Couleurs des boutons */
  /* BECOME A MEMBER → rouge */
  #block-sakyran-bootstrap5-account-menu li:first-child a {
    background: var(--color-red) !important;
  }

 

  /* LOGIN → bleu foncé */
  #block-sakyran-bootstrap5-account-menu li:last-child a {
    background: var(--color-blue) !important;
            width: 109px !important;
  }
}

@media (max-width: 991px) {

  /* ── Ligne 1 : flex row, logo + boutons + hamburger ── */
  header[role="banner"] .navbar > .container {
    padding: 0 12px;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    height: var(--top-h);
  }

  /* S'assurer que le language switcher est visible dans le menu ouvert */
  .language-switcher-language-url,
  #block-languageswitcher,
  .block-language {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* Si le switcher est dans la navbar hors du collapse */
  .navbar-collapse .language-switcher-language-url {
    display: block !important;
    padding: 0.5rem 1rem;
  }

  /* Éviter que le menu ouvert couvre le switcher */
  .navbar-nav {
    overflow-y: auto;
    max-height: 80vh;
  }

  /* Logo à gauche */
  header[role="banner"] .region-nav-branding {
    flex: 0 0 auto;
    height: var(--top-h);
    order: 1;
  }

  /* Boutons compte : après le logo, poussés par margin-left auto */
  #block-sakyran-bootstrap5-account-menu {
    position: static !important;
    height: 36px !important;
    display: flex !important;
    align-items: stretch !important;
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
  }
/**** pour les btn sois cote à cote****/
 #block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav {
    gap: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }
.para-col-gauche, .para-col-droite{
  width: 100%!important;
  padding-left: 0px !important;

}
.para-col-droite{margin-top:25px;}
  #block-sakyran-bootstrap5-account-menu li.nav-item {
    margin: 0 !important;
    border-left: none !important;
  }

  #block-sakyran-bootstrap5-account-menu li.nav-item + li.nav-item {
    border-left: 2px solid rgba(255,255,255,0.3) !important;
  }

  #block-sakyran-bootstrap5-account-menu a.nav-link {
    padding: 0 10px !important;
    font-size: 10px !important;
    height: 36px !important;
    white-space: nowrap;
  }
/****fin***/
  #block-sakyran-bootstrap5-account-menu ul {
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 4px;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #block-sakyran-bootstrap5-account-menu li {
    display: flex;
    border-left: none;
    flex: none;
  }

  #block-sakyran-bootstrap5-account-menu a {
    height: 36px;
    padding: 0 10px;
    font-size: 9px;
    letter-spacing: 0.2px;
    border-radius: 0px;
    white-space: nowrap;
    align-self: auto;
    display: flex;
    align-items: center;
  }

  /* Icônes Bootstrap Icons cachées sur mobile */
  #block-sakyran-bootstrap5-account-menu a::before {
    display: none !important;
  }

  /* Hamburger tout à droite, après les boutons */
  header[role="banner"] .navbar-toggler {
    display: flex !important;
    order: 3;
    margin-left: 8px;
    margin-right: 0;
    align-self: center;
    flex-shrink: 0;
    z-index: 200;
    background: #1A4FB3;
  }

  /* ── Collapse sous la ligne logo — pleine largeur ── */
  header[role="banner"] .navbar-collapse {
    order: 100;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-top: 1px solid #e8edf5;
    min-height: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  /* Menu principal en colonne */
  header[role="banner"] .region-nav-main {
    width: 100%;
    padding-left: 0;
    min-height: 0;
  }

  .navbar-nav {
    flex-direction: column !important;
    width: 100%;
    gap: 0;
  }
  header[role="banner"]{
    border-bottom: 2px solid var(--color-blue) !important;
  }
/* Cache l'icône burger par défaut */
  .navbar-toggler-icon {
    display: none !important;
  }
.orderF{
      order: 10;
}
  /* Ajoute un X ou un burger via Bootstrap Icons */
  .navbar-toggler::after {
    font-family: "bootstrap-icons";
    font-size: 22px;
    color: #fff;
    line-height: 1;
  }

  /* Burger quand le menu est fermé */
  .navbar-toggler.collapsed::after {
    content: "\F479"; /* bi-list */
  }

  /* X quand le menu est ouvert */
  .navbar-toggler:not(.collapsed)::after {
    content: "\F62A"; /* bi-x-lg */
  }
  .navbar-nav .nav-item .nav-link,
  .navbar-nav .nav-item span.nav-link {
    padding: 12px 16px;
    border-bottom: none !important; /* supprime l'ancienne bordure */
    font-size: 13px;
  }
.navbar-nav .nav-item {
    border-bottom: 1px solid #f0f2f7;
    width: 100%;
  }
  /* ── Zone langue + recherche : sur UNE ligne, même hauteur ── */
  header[role="banner"] .region-nav-additional {
       order: 10 !important;
    width: 100%;
    height: 44px;
    border-radius: 0;
    flex-wrap: nowrap;
    flex-direction: row;
    border-top: 1px solid #e8edf5;
    display: flex !important;
    align-items: stretch;
  }

  /* Sélecteur langue : largeur fixe, pleine hauteur */
  #block-sakyran-bootstrap5-selecteurdelangue {
    height: 44px;
    flex: 0 0 72px;
    min-width: 0;
    display: flex !important;
    align-items: center;
  }

  /* Barre recherche : prend le reste, même hauteur */
  #block-sakyran-bootstrap5-search-form {
    height: 44px;
    flex: 1;
    min-width: 0;
    display: flex !important;
    align-items: center;
  }

  #block-sakyran-bootstrap5-search-form form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  #block-sakyran-bootstrap5-search-form .js-form-item {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Champ texte recherche pleine largeur */
  #block-sakyran-bootstrap5-search-form .form-search {
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .paragraph--type--bloc-bandeau .proavia-slide-img { height: 300px; }
  .paragraph--type--bloc-bandeau .proavia-slide-caption {
    width: 80%;
    max-width: none;
    padding-left: 56px;
    padding-right: 16px;
  }
  .proavia-slide-titre { font-size: 22px; }
  .proavia-slide-texte, .proavia-slide-texte p { font-size: 13px; }
}

@media (max-width: 1100px) {
  .paragraph--type--presentation-proavia {
    gap: 48px;
    padding: 60px 24px;
  }
  .para-pres-texte {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 767px) {
  
  header[role="banner"]::after{
    display: none;
  }
  .tch-member-image{
        object-fit: contain!important;
    background: black;
  }
  .image-text-container.gauche, .image-text-container.droite{
        flex-direction: column!important;
  }
  .view-actualites .views-exposed-form .js-form-item-title{
        flex: 1 1 110px!important;
  }
  .paragraph--type--presentation-proavia {
    flex-direction: column;
    gap: 36px;
    padding: 48px 20px;
  }
  .para-pres-photo {
    display: none;
    flex: none;
    width: 100%;
    max-width: 420px;
    align-self: center;
    padding-right: 40px;
    padding-bottom: 48px;
  }
  .pres-overlay-bloc {
    width: 330px;
    height: 310px;
    font-size: 32px;
  }
  .para-pres-texte {
    width: 100%;
    flex: none;
  }
   }

@media (max-width: 992px) {
  .images-about {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .paragraph--type--about-proavia-fullwidth{
        padding: 35px 20px 40px;
  }
  .paragraph--type--about-proavia-fullwidth p, .about-proavia-container p{
        margin: 0 auto 24px;
  }
  .images-about {
    grid-template-columns: 1fr;
    gap:65px;
  }
}

@media (max-width: 992px) {
  .paragraph--type--evenements-publiques-fullwidth .item-list ul {
    flex-wrap: wrap;
  }
  .paragraph--type--evenements-publiques-fullwidth .item-list li {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .paragraph--type--evenements-publiques-fullwidth .item-list li {
    flex: 0 0 100%;
  }
}

@media (max-width: 992px) {
  .paragraph--type--testimonials .para-testimonials-item-inner {
    flex-direction: column;
    padding: 20px;
  }
  .paragraph--type--testimonials .para-testimonials-item-photo{
    width: 100PX;
    height: 100PX;
  }
.paragraph--type--testimonials .para-testimonials-item::after{
      width: 75px;
}
.marginB85{
      margin-bottom: 52px!important;
}
.paragraph--type--raisons-devenir-membre > strong{
  margin-bottom: 2px!important;
}
  .paragraph--type--testimonials .para-testimonials-item-photo {
    margin: 0 auto 20px;
  }
  .paragraph--type--testimonials .para-testimonials-item{
        max-width: 280PX;
  }
  .paragraph--type--testimonials .para-testimonials-item-texte{
        padding-top: 5px;
  }

  .paragraph--type--testimonials .testimonial-nav {
    right: 10px;
    flex-direction: row;
    top: auto;
    bottom: -60px;
    transform: none;
  }
}

@media (max-width: 992px) {
  .views-element-container.block-views-blocknos-membres-block-logos-membres .view-content {
    padding: 0 56px;
  }
  .views-element-container.block-views-blocknos-membres-block-logos-membres .item-list ul {
    gap: 32px;
  }
  .views-element-container.block-views-blocknos-membres-block-logos-membres .item-list img {
    max-width: 130px;
    max-height: 60px;
  }
}

@media (max-width: 576px) {
  .views-element-container.block-views-blocknos-membres-block-logos-membres {
    padding: 48px 0;
  }
  .views-element-container.block-views-blocknos-membres-block-logos-membres .view-content {
    padding: 0 48px;
  }
  .views-element-container.block-views-blocknos-membres-block-logos-membres .members-nav button {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  .views-element-container.block-views-blocknos-membres-block-logos-membres .item-list img {
    max-width: 110px;
    max-height: 50px;
  }
}

@media (max-width: 1024px) {
  .paragraph--type--nos-actualites .view-content {
    flex-direction: column;
    overflow: visible;
    padding: 0 24px;
    gap: 20px;
  }
  .paragraph--type--nos-actualites .views-row {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .paragraph--type--nos-actualites .view-content {
    padding: 0 16px;
  }
  .paragraph--type--nos-actualites .views-row {
    width: 100%;
    height: auto;
  }
  .paragraph--type--nos-actualites .news-nav {
    display: none;
  }
}

@media (max-width: 1100px) {
  .paragraph--type--raisons-devenir-membre .para-raison-texte,
  .paragraph--type--raisons-devenir-membre .field__item {
    padding: 20px 12px;
    min-height: 160px;
  }
  .paragraph--type--raisons-devenir-membre .para-raison-texte p,
  .paragraph--type--raisons-devenir-membre .field__item p {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  #block-sakyran-bootstrap5-account-menu .extra{
  display: block!important;
 
}
  #block-sakyran-bootstrap5-account-menu .extra a{

  background: #56B7B9 !important;
}
  .paragraph--type--raisons-devenir-membre .para-raison-container,
  .paragraph--type--raisons-devenir-membre .field__items,
  .paragraph--type--raisons-deveni.marginB85r-membre > .field {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
    justify-content: flex-start !important;
  }
  .paragraph--type--raisons-devenir-membre .para-raison-texte,
  .paragraph--type--raisons-devenir-membre .field__item {
    flex: 0 0 180px !important;
    min-width: 235px !important;
  }
}

@media (max-width: 992px) {
  .images-commitmentS { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .images-commitmentS { grid-template-columns: 1fr;gap: 55px; }
  .paragraph--type--our-commitments { padding: 40px 16px; }
  
}

@media (max-width: 992px) {
  .images-expertises {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 56px;
  }
}

@media (max-width: 576px) {
  .contentFlex{
        display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
    align-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
  }
  .views-field.views-field-field-image{
    display: none;
  }
  .item-list li{
    margin: 0;
  }
  .images-expertises {
    grid-template-columns: 1fr;
    gap:95px;
  }
  .block-views-blocknos-membres-block-logos-membres{
    display: none;
  }
  .paragraph--type--members-expertise {
    padding: 48px 16px 56px;
  }
}

@media (max-width: 600px) {
  .paragraph--type--fiches-membres .fiches-membres__grid {
    grid-template-columns: 1fr;
    border-radius: 0px;
  }
}

@media (max-width: 767px) {

  /* Hauteur du slide */
  .paragraph--type--bloc-bandeau .proavia-slide-img {
    height: 360px;
    object-position: center;
  }

  /* Calque bleu uniforme sur toute l'image (écrase le dégradé posé par le JS)
     -> pour changer l'opacité, modifier le 0.7 */
  .paragraph--type--bloc-bandeau .proavia-slide-overlay {
    background: rgba(26, 79, 179, 0.7) !important;
  }

  /* Décor en pointillés masqué sur mobile */
  .paragraph--type--bloc-bandeau .proavia-slide-decor {
    display: none;
  }

  /* Contenu centré au-dessus de l'image */
  .paragraph--type--bloc-bandeau .proavia-slide-caption {
    width: 100%;
    max-width: 100%;
    padding: 24px 24px 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .paragraph--type--bloc-bandeau .proavia-slide-surtitre {
    color: #fff;
    margin-bottom: 8px;
  }

  .paragraph--type--bloc-bandeau .proavia-slide-titre {
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 12px;
  }

  .paragraph--type--bloc-bandeau .proavia-slide-texte,
  .paragraph--type--bloc-bandeau .proavia-slide-texte p {
    font-size: 14px;
    color: #fff;
    letter-spacing: normal;
  }
  .paragraph--type--bloc-bandeau .proavia-slide-texte {
    margin-bottom: 20px;
  }

  /* Bouton rouge centré */
  .paragraph--type--bloc-bandeau .proavia-slide-btn {
    align-self: center;
    background: #d64545;
    border-color: #d64545;
    color: #fff !important;
    padding: 14px 40px;
    font-size: 14px;
    border-radius: 0;
  }
  .paragraph--type--bloc-bandeau .proavia-slide-btn:hover {
    background: #b93636;
    border-color: #b93636;
    color: #fff !important;
  }

  /* Flèches masquées (le glissement au doigt et les points suffisent) */
  .paragraph--type--bloc-bandeau .carousel-control-prev,
  .paragraph--type--bloc-bandeau .carousel-control-next {
    display: none;
  }
}

@media (max-width: 991px) {
  .proavia-anchor-nav ul {
    gap: 2px 6px;
    padding: 8px 16px;
  }
  .proavia-anchor-nav a {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .proavia-anchor-nav a {
    padding: 7px 10px;
    font-size: 12.5px;
  }
}


/* ─────────── depuis events.css ─────────── */

@media (max-width: 768px) {

  .node--type-use-case {
    width: 100%!important;
  }
  .block-anakrys-lien-retour{
        margin-top: 15px;
    margin-bottom: 15px;
  }
  .page-route-view-events-page-event .views-exposed-form.bef-exposed-form,
  .page-route-view-events-page-event .view-filters .form--inline.clearfix {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
.view-events .node--type-evenement .ev-date-badge{
  margin-bottom: 0px;
}
  .page-route-view-events-page-event .form-item-title {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .page-route-view-events-page-event input#edit-title.form-text.form-control {
    width: 100% !important;
  }

  .page-route-view-events-page-event .view-filters .form-control {
    width: 160px !important;
  }
  .view-events .node--type-evenement .ev-footer{
    padding: 0px 14px 3px;
  }
}

@media (max-width: 480px) {
  .page-route-view-events-page-event .views-exposed-form.bef-exposed-form,
  .page-route-view-events-page-event .view-filters .form--inline.clearfix {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-route-view-events-page-event .view-filters #edit-date-wrapper .fieldset-wrapper {
   /* flex-direction: column !important;*/
  }

  .page-route-view-events-page-event .view-filters .form-control,
  .page-route-view-events-page-event input#edit-title.form-text.form-control {
    width: 100% !important;
  }

  .page-route-view-events-page-event .view-filters #edit-actions .btn {
    width: 100% !important;
    height: 40px !important;
  }
}

@media (max-width: 1200px) {
  .view-events .views-row {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  .view-events .views-row {
    flex: 0 0 100%;
  }
  .view-events .view-content {
    padding: 0 16px;
  }
}


  .node--type-evenement-page-des .ev-page-title {
    font-size: 1.8rem;
  }

  .node--type-evenement-page-des .ev-page-dates {
  /*  flex-direction: column;*/
    align-items: center;
    gap: 10px;
  }

  .node--type-evenement-page-des .ev-page-body {
    padding: 0 10px;
  }
}


/* ─────────── depuis extranet.css ─────────── */

@media (max-width: 600px) {
  .page-node-type-contact {
    flex-direction: column;
  }

  .page-node-type-contact .node__content {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .page-node-type-contact .contact-col-left,
  .page-node-type-contact .contact-col-right {
    grid-column: 1;
  }

  .page-node-type-contact .contact-col-left {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 auto;
  }

  .page-node-type-contact .field--name-field-image img {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-image-column {
    flex: none;
    margin-bottom: 20px;
  }

  .contact-data-column {
    width: 100%;
  }

  .contact-field {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .field-label {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .extranet .node--type-page {
    padding: 1rem;
  }

  .extranet .node--type-page h2 {
    font-size: 1.7rem;
  }

  .extranet .node--type-page h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 991.98px) {
.page-route-proavia-user-espace-membre .py-5{
padding-top: 0rem !important;
}
  /* Les h2 deviennent des triggers cliquables */
  .espace-membre-dashboard .dashboard-block > h2 {
    cursor: pointer;
    user-select: none;
    position: relative;
    margin-bottom: 0 !important;
    padding-right: 3rem !important;
  }

  /* Flèche via ::after */
  .espace-membre-dashboard .dashboard-block > h2::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 1.1rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
  }

  /* Flèche inversée quand ouvert */
  .espace-membre-dashboard .dashboard-block > h2.accordion-open::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Corps masqué par défaut */
  .espace-membre-dashboard .dashboard-block .accordion-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
.accordion-body a.infoprojet-card-link{
      flex-direction: column;
}
  /* Corps visible */
  .espace-membre-dashboard .dashboard-block .accordion-body.accordion-open {
    max-height: 2000px; /* valeur suffisamment grande */
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
 
  .uc-header-banner {
    padding: 12px 16px;
    gap: 12px;
  }
 
  .logo-img,
  .uc-logo-img { max-width: 80px; max-height: 40px; }
 
  .uc-how-to-badge { font-size: 12px; }
 
  .uc-location-banner { padding: 7px 16px; font-size: 10px; }
 
  /* Layout vertical : photos au-dessus, blocs en dessous */
  .uc-main-container {
    flex-direction: column;
    padding: 14px 16px;
    gap: 14px;
  }
 
  /* La sidebar devient une ligne horizontale de photos */
  .uc-images-sidebar {
    flex-direction: row;
    width: 100% !important;
    gap: 8px;
  }
 
  .uc-sidebar-photo {
    flex: 1;
  }
 
  /* Hauteur fixe uniforme en mode tablette */
  .uc-photos-1 .uc-sidebar-photo,
  .uc-photos-2 .uc-sidebar-photo,
  .uc-photos-3 .uc-sidebar-photo { height: 160px; }
 
  .uc-footer-bar {
    padding: 10px 16px;
    justify-content: center;
  }
 
  .uc-export { padding: 1rem 1rem; }
}

@media (max-width: 479px) {
 
  .uc-header-banner {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
  }
 
  .uc-header-cell-left { width: auto; }
 
  .logo-img,
  .uc-logo-img { max-width: 70px; max-height: 34px; }
 
  .uc-header-cell-right {
    flex-basis: 100%;
    gap: 8px;
  }
 
  .uc-header-title { font-size: 13px; }
 
  .uc-location-banner {
    padding: 6px 12px;
    font-size: 10px;
    flex-wrap: wrap;
  }
 
  .uc-main-container { padding: 12px; gap: 12px; }
 
  /* En mobile, photos empilées verticalement, pleine largeur */
  .uc-images-sidebar {
    flex-direction: column;
  }
 
  .uc-photos-1 .uc-sidebar-photo,
  .uc-photos-2 .uc-sidebar-photo,
  .uc-photos-3 .uc-sidebar-photo { height: 180px; }
 
  .uc-step-text { font-size: 13px; }
 
  .uc-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }
 
  .uc-footer-contacts { gap: 12px; }
 
  .uc-export {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0.875rem;
  }
 
  .uc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
  .page-route-view-events-page-1 .views-exposed-form .form--inline {
    flex-wrap: wrap;
  }

  .page-route-view-events-page-1 .form-item-title {
    flex: 1 1 100%;
  }

  .page-route-view-events-page-1 #edit-date-wrapper {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .page-route-view-events-page-1 .views-exposed-form .form--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .page-route-view-events-page-1 #edit-date-wrapper .fieldset-wrapper {
    flex-direction: column;
  }

  .page-route-view-events-page-1 #edit-submit-events {
    width: 100%;
    height: 40px;
  }
}


/* ─────────── depuis tables_design.css ─────────── */

@media (max-width: 768px) {
.ev-page-header img{
      width: 90%!important;
}
  /* Formulaire */
  #views-exposed-form-documents-page-1 .form--inline {
    flex-direction: column;
    align-items: stretch;
  }
  #views-exposed-form-documents-page-1 .form-item,
  #views-exposed-form-documents-page-1 fieldset {
    min-width: unset;
    width: 100%;
  }
  #views-exposed-form-documents-page-1 fieldset .fieldset-wrapper {
    flex-direction: column;
  }
  #views-exposed-form-documents-page-1 .form-actions {
    width: 100%;
  }
  #views-exposed-form-documents-page-1 .form-submit {
    width: 100%;
    text-align: center;
  }

  /* ── TABLEAU → CARDS ── */
  .view-documents .views-table {
    display: block;
  }

  .view-documents .views-table thead {
    display: none;
  }

  .view-documents .views-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;           /* espace entre cards, pas de border-bottom */
    padding: 10px;
    background: var(--grey-bg);
  }

  .view-documents .views-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 10px 12px;
    border: none !important;          /* pas de bordure */
    border-left: 3px solid var(--teal) !important; /* seul accent */
    border-radius: 0px;
    background: var(--ev-white);
    box-shadow: 0 1px 4px rgba(5, 16, 64, 0.06);
    margin-bottom: 0;
  }

  /* Type — petit label en haut à gauche */
  .view-documents .views-table tbody td.views-field-field-type-de-documentation {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal);
    border: none;
  }

  /* Titre — grande zone centrale */
  .view-documents .views-table tbody td.views-field-title {
    grid-column: 1;
    grid-row: 2;
    display: block;
    padding: 2px 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.4;
    border: none;
  }
.info-projet .views-field-title a{
  display: block;
    margin-left: 13px;
}
  .view-documents .views-table tbody td.views-field-title a {
    color: var(--dark);
    text-decoration: none;
  }

  /* Fichier — bouton à droite sur 2 lignes */
  .view-documents .views-table tbody td.views-field-field-fichier {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: none;
            justify-content: normal;
  }

  .view-documents .views-table tbody td.views-field-field-fichier a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--teal);
    color: var(--ev-white) !important;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0px;
    white-space: nowrap;
  }

  /* Ajoute une icône PDF via ::before */
  .view-documents .views-table tbody td.views-field-field-fichier a::before {
    content: "\F3D3"; /* bi-file-earmark-pdf */
    font-family: "bootstrap-icons";
    font-size: 13px;
  }

  /* Date — masquée en mobile pour alléger */
  .view-documents .views-table tbody td.views-field-created {
    display: none;
  }

  /* Pas de bouton si pas de fichier — cellule vide invisible */
  .view-documents .views-table tbody td.views-field-field-fichier:empty {
    display: none;
  }

  /* Hover card */
  .view-documents .views-table tbody tr:hover {
    background-color: var(--teal-light) !important;
    border-left-color: var(--teal-hover) !important;
  }

  .view-documents .views-table tbody tr:hover td,
  .view-documents .views-table tbody tr:hover a {
    color: var(--dark) !important;
    background: transparent !important;
  }

  .view-documents .views-table tbody tr:hover .views-field-field-type-de-documentation {
    color: var(--teal-hover) !important;
  }

  .view-documents .views-table tbody tr:hover .views-field-field-fichier a {
    background-color: var(--teal-hover) !important;
    color: var(--ev-white) !important;
  }
}

@media (max-width: 768px) {
.view_type_info_projet{display: none;}
  #views-exposed-form-projects-page-1 .form--inline {
    flex-direction: column;
    align-items: stretch;
  }
.info-projet .views-field-field-type-d-info-projet-1{
  display: none;
}
  #views-exposed-form-projects-page-1 .form-item {
    min-width: unset;
    width: 100%;
  }

  #views-exposed-form-projects-page-1 fieldset .fieldset-wrapper {
    flex-direction: column;
    align-items: stretch;
    display: none;
  }

  #views-exposed-form-projects-page-1 .form-actions {
    width: 100%;
  }

  #views-exposed-form-projects-page-1 .form-submit {
    width: 100%;
    text-align: center;
  }

  /* Tableau → cards empilées */
  .info-projet .views-table,
  .projects-table {
    display: block;
    overflow-x: auto;
  }

  .info-projet .views-table thead,
  .projects-table thead {
    display: none;
  }

  .info-projet .views-table tbody tr,
  .projects-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid rgba(26, 79, 179, 0.12);
   
    background: var(--ev-white);
  }

  .info-projet .views-table tbody td,
  .projects-table tbody td {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    padding: 1px 12px;
    /*border-bottom: 1px solid rgba(26, 79, 179, 0.07);*/
    font-size: 13px;
  }

  .info-projet .views-table tbody td::before,
  .projects-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 500;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    display: none;
  }
.path-projects .views-field-title a{
margin-left: 0px!important;
}
.path-projects #edit-created-wrapper--2 legend .fieldset-legend{
  display: none;
}
  .info-projet .views-table tbody td:last-child,
  .projects-table tbody td:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  /* --- Structure générale --- */
  .view-contacts-utiles .view-content .views-table {
    display: block;
  }

  .view-contacts-utiles .view-content .views-table thead {
    display: none; /* Masque les en-têtes en mobile */
  }

  .view-contacts-utiles .view-content .views-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espace entre les cartes */
    padding: 10px;
    background: #f8f9fa; /* Fond gris très clair */
  }

  /* --- Style des cartes (anciennes lignes du tableau) --- */
  .view-contacts-utiles .view-content .views-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto auto;
    gap: 2px 8px;
    padding: 10px 12px;
    border: none !important;
    border-left: 3px solid #f15e00 !important; /* Bordure orange */
    border-radius: 0;
    background: white;
    box-shadow: 0 1px 4px rgba(5, 16, 64, 0.06);
    margin-bottom: 0;
  }

  /* --- Pays (1ère ligne, gauche) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-pays {
    grid-column: 1;
    grid-row: 1;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f15e00;
    border: none;
                  padding: 0;
  }

  /* --- Organisme (2ème ligne, gauche) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-organisme {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    border: none;
            padding: 0;
  }
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-organisme a {
    color: #333;
    text-decoration: none;
  }
.views-field-field-is-adherent{
  display: NONE;
}
  /* --- Membre Proavia (3ème ligne, gauche) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-is-adherent {
    grid-column: 1;
    grid-row: 3;
    font-size: 12px;
    font-weight: 600;
    color: #f15e00;
    border: none;
    display: none;
           padding: 0;
  }

  /* --- Nom (4ème ligne, gauche) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-title {
    grid-column: 1;
    grid-row: 4;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    border: none;
             padding: 0;
  }
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-title a {
    color: #333;
    text-decoration: none;
  }

  /* --- Prénom (5ème ligne, gauche) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-prenom {
    grid-column: 1;
    grid-row: 5;
    font-size: 13px;
    color: #666;
    border: none;
             padding: 0;
  }
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-prenom a {
    color: #666;
    text-decoration: none;
  }

  /* --- Fonction (masquée en mobile pour alléger) --- */
  .view-contacts-utiles .view-content .views-table tbody td.views-field.views-field-field-fonction {
    display: none;
  }

  /* --- Hover sur les cartes --- */
  .view-contacts-utiles .view-content .views-table tbody tr:hover {
    background-color: #fdecea !important; /* Fond orange très clair */
    border-left-color: #d65f2a !important; /* Orange plus foncé */
  }

  .view-contacts-utiles .view-content .views-table tbody tr:hover td {
    color: #333 !important;
  }

  .view-contacts-utiles .view-content .views-table tbody tr:hover .views-field.views-field-field-pays,
  .view-contacts-utiles .view-content .views-table tbody tr:hover .views-field.views-field-field-is-adherent {
    color: #d65f2a !important; /* Orange foncé au survol */
  }

  /* --- Suppression des commentaires de debug --- */
  .view-contacts-utiles .view-content .views-table tbody td .views-field {
    display: block;
  }
}

@media (max-width: 992px) {
  #views-exposed-form-contacts-utiles-page-1 .form--inline {
    flex-wrap: wrap !important;
  }

  #views-exposed-form-contacts-utiles-page-1 .form-item {
    flex: 1 1 calc(50% - 6px) !important;
  }
}

@media (max-width: 576px) {
  #views-exposed-form-contacts-utiles-page-1 .form--inline {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #views-exposed-form-contacts-utiles-page-1 .form-item,
  #views-exposed-form-contacts-utiles-page-1 .form-actions {
    width: 100% !important;
    flex: none !important;
  }

  #views-exposed-form-contacts-utiles-page-1 .form-submit {
    width: 100% !important;
    text-align: center !important;
  }

  .view-contacts-utiles .views-table {
    display: block;
    overflow-x: auto;
  }

  .view-contacts-utiles .views-table thead {
    display: none;
  }

  .view-contacts-utiles .views-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid rgba(237, 117, 61, 0.15);
    border-radius: 0px;
    background: #ffffff;
  }

  .view-contacts-utiles .views-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(237, 117, 61, 0.07);
    font-size: 13px;
  }

  .view-contacts-utiles .views-table tbody td:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  #views-exposed-form-documents-page-1 .form--inline {
    flex-direction: column;
    align-items: stretch;
  }

  #views-exposed-form-documents-page-1 .form-item,
  #views-exposed-form-documents-page-1 fieldset {
    min-width: unset;
    width: 100%;
  }

  #views-exposed-form-documents-page-1 fieldset .fieldset-wrapper {
    flex-direction: column;
  }

  #views-exposed-form-documents-page-1 .form-actions {
    width: 100%;
  }

  #views-exposed-form-documents-page-1 .form-submit {
    width: 100%;
    text-align: center;
  }

  .view-documents .views-table {
    display: block;
    overflow-x: auto;
  }

  .view-documents .views-table thead {
    display: none;
  }
  .view-documents  .file{
    padding-left: 0px;
  }
.view-documents .views-table tbody tr:nth-child(even) {
  background-color: #fff;
}
  .view-documents .views-table tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid rgba(26, 138, 122, 0.15);
    border-radius: var(--radius-md);
    background: var(--ev-white);
  }

  .view-documents .views-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(26, 138, 122, 0.07);
    font-size: 13px;
  }

  .view-documents .views-table tbody td:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {

  /* Formulaire — inchangé */
  .view_type_info_projet { display: none; }
  .info-projet .views-field-field-type-d-info-projet-1 { display: none; }

  #views-exposed-form-projects-page-1 .form--inline {
    flex-direction: column;
    align-items: stretch;
  }
  #views-exposed-form-projects-page-1 .form-item {
    min-width: unset;
    width: 100%;
  }
  #views-exposed-form-projects-page-1 fieldset .fieldset-wrapper {
    flex-direction: column;
    align-items: stretch;
    display: none;
  }
  #views-exposed-form-projects-page-1 .form-actions { width: 100%; }
  #views-exposed-form-projects-page-1 .form-submit {
    width: 100%;
    text-align: center;
  }

  /* ── TABLEAU → CARDS ── */
  .info-projet .views-table { display: block; }

  .info-projet .views-table thead { display: none; }

  .info-projet .views-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--grey-bg);
  }

  .info-projet .views-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 2px 8px;
    padding: 10px 12px;
    border: none !important;
    border-left: 3px solid var(--blue) !important;
    background: var(--ev-white);
    box-shadow: 0 1px 4px rgba(5, 16, 64, 0.06);
    margin-bottom: 0;
    transition: background var(--transition);
  }

  /* Pays — micro-label bleu en haut */
  .info-projet .views-table tbody td.views-field-field-pays {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--blue);
    border: none;
  }

  /* Aéroport — ligne intermédiaire, gris discret */
  .info-projet .views-table tbody td.views-field-field-aeroport {
    grid-column: 1;
    grid-row: 2;
    display: block;
    padding: 1px 0 3px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7fa3;
    border: none;
  }

  /* Titre — zone principale */
  .info-projet .views-table tbody td.views-field-title {
    grid-column: 1;
    grid-row: 3;
    display: block;
    padding: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
    border: none;
  }

  .info-projet .views-table tbody td.views-field-title a {
    color: var(--dark);
    text-decoration: none;
  }

  /* Badge type — colonne droite sur 3 lignes */
  .info-projet .views-table tbody td.views-field-field-type-d-info-projet-1 {
    display: flex !important;
    grid-column: 2;
    grid-row: 1 / 4;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border: none;
  }

  /* Réaffiche les badges en mobile dans ce contexte */
  .info-projet .views-table tbody td.views-field-field-type-d-info-projet-1 .view_type_info_projet,
  .info-projet .views-table tbody td.views-field-field-type-d-info-projet-1 .view_type_ao {
    display: none !important;
  }
.info-projet .views-table tbody tr:nth-child(even){
  background: #fff;
}
  /* Date — masquée */
  .info-projet .views-table tbody td.views-field-created {
    display: none;
  }

  /* Hover card — bleu très léger */
  .info-projet .views-table tbody tr:hover {
    background-color: var(--blue-light, #e8effe) !important;
    border-left-color: var(--blue-hover, #153e9a) !important;
  }

  .info-projet .views-table tbody tr:hover td,
  .info-projet .views-table tbody tr:hover a {
    color: var(--dark) !important;
    background: transparent !important;
    font-weight: inherit;
  }

  .info-projet .views-table tbody tr:hover td.views-field-field-pays {
    color: var(--blue-hover, #153e9a) !important;
  }

  .info-projet .views-table tbody tr:hover td.views-field-title a {
    color: var(--blue) !important;
    text-decoration: underline;
  }

  /* Badge AO — reste visible au hover */
  .info-projet .views-table tbody tr:hover .view_type_ao {
    background: rgba(26, 79, 179, 0.15) !important;
    color: var(--blue) !important;
  }

  .info-projet .views-table tbody tr:hover .view_type_info_projet {
    background: rgba(26, 79, 179, 0.15) !important;
    color: var(--blue) !important;
  }
}


/* ─────────── depuis annuaire-contacts.css ─────────── */

@media (max-width: 900px) { .extranet .ac-grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 580px) { .extranet .ac-grid { grid-template-columns: repeat(2, 1fr); } }


/* ─────────── depuis membres.css ─────────── */

@media (max-width: 900px) {
  .member-body { flex-direction: column; }
  .member-sidebar { width: 100%; }
}

@media (max-width: 600px) {
  .member-hero { height:auto; }
  .member-hero-content { padding: 16px; gap: 14px; }
  .member-logo-box { width: 72px; height: 48px; }
  .member-logo-box img { max-width: 60px; max-height: 38px; }
  .member-hero-name { font-size: 1.3rem; }
  .member-page { padding: 0 0 32px; }
  .member-body { padding: 16px 0 0; gap: 16px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .slider-btn { width: 28px; height: 28px; font-size: 0.9rem; }
  .slider-btn.prev { left: 6px; }
  .slider-btn.next { right: 6px; }
}


/* ─────────── depuis page.css ─────────── */

@media (max-width: 700px) {
  #block-sakyran-bootstrap5-content {
    flex-direction: column;
  }
  .form-filters {
    width: 100% !important;
    min-width: unset;
  }
  #annuaire-entreprises-col-right {
    width: 100% !important;
  }
}


/* ─────────── depuis proavia-pdf-list.css ─────────── */

@media (max-width: 680px) {
  .proavia-pdf-list__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .proavia-pdf-list__controls {
    width: 100%;
    flex-wrap: wrap;
  }

  #proavia-pdf-list-filter {
    width: 100%;
  }

  .proavia-pdf-list__table thead th:nth-child(2) {
    display: none;
  }

  .proavia-pdf-list__table tbody td:nth-child(2) {
    display: none;
  }

  .proavia-pdf-list__action-bar {
    flex-wrap: wrap;
  }

  #proavia-pdf-export-button {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE-FIXES.CSS
   À coller TOUT À LA FIN de responsive.css
   (ou à charger après custom.css et responsive.css)
   ══════════════════════════════════════════════════════ */

/* 1. Évite le scroll horizontal causé par les blocs en 100vw */
html, body { overflow-x: clip; }

/* 2. Images et tableaux du contenu éditorial (CKEditor) */
.field--name-body img,
.ck-content img { max-width: 100%; height: auto; }
.field--name-body table,
.ck-content table { display: block; max-width: 100%; overflow-x: auto; }

/* 3. Header desktop étroit (992–1199px) : menu + langue + recherche
      ne tiennent pas sur une ligne en 16px / nowrap */
@media (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav .nav-item .nav-link,
  .navbar-nav .nav-item span.nav-link { font-size: 14px; padding: 14px 8px; }
  header[role="banner"] .region-nav-main { padding-left: 12px; }
  #block-sakyran-bootstrap5-search-form .form-search { width: 110px; }
  #block-sakyran-bootstrap5-search-form .form-search:focus { width: 140px; }
  #block-sakyran-bootstrap5-account-menu a { font-size: 13px; padding: 0 10px; }

  /* Bandeau : le texte déborde de la hauteur de 380px */
  .proavia-slide-titre { font-size: 26px; }
  .paragraph--type--bloc-bandeau .proavia-slide-texte p {
    font-size: 14px !important;
    letter-spacing: .3px;
  }
  .paragraph--type--bloc-bandeau .proavia-slide-caption { max-width: 55%; }
}

/* 4. Header mobile : logo + 3 boutons + burger ne tiennent pas sur 1 ligne
      (les libellés anglais sont plus longs) → boutons sur leur propre ligne */
@media (max-width: 575px) {
  header[role="banner"] .navbar > .container {
    height: auto;
    row-gap: 0;
  }
  header[role="banner"] .navbar-brand img { width: 100px; }

  #block-sakyran-bootstrap5-account-menu {
    order: 5 !important;
    width: 100% !important;
    height: 40px !important;
    margin-left: 0 !important;
  }
  #block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav { width: 100% !important; }
  #block-sakyran-bootstrap5-account-menu li.nav-item { flex: 1 1 0 !important; }
  #block-sakyran-bootstrap5-account-menu li.nav-item a.nav-link,
  #block-sakyran-bootstrap5-account-menu li.nav-item:last-child a.nav-link {
    width: 100% !important;
    height: 40px !important;
    padding: 0 4px !important;
    justify-content: center;
    text-align: center;
    white-space: normal !important;
    line-height: 1.15;
    letter-spacing: 0 !important;
  }
}

/* 5. Témoignages : les flèches (bottom:-60px) étaient coupées par overflow:hidden */
@media (max-width: 992px) {
  .paragraph--type--testimonials { padding-bottom: 72px; }
  .paragraph--type--testimonials .testimonial-nav {
    bottom: 12px;
    right: 50%;
    transform: translateX(50%);
  }
}

/* 6. Actualités accueil : hauteur fixe 480px → texte coupé sur écrans moyens */
.paragraph--type--nos-actualites .views-row { height: auto; min-height: 480px; }

/* 7. Image habillée par le texte (float) : aucune règle mobile n'existait */
@media (max-width: 767px) {
  .image-text-container.texte_contour_image .positionned-image {
    float: none;
    display: block;
    margin: 0 0 1rem;
    max-width: 100%;
  }
  .image-text-container.texte_contour_image .positionned-image img {
    max-width: 100%;
    height: auto;
  }
}

/* 8. Texte justifié : trous disgracieux sur petits écrans */
@media (max-width: 767px) {
  p { text-align: left; }
}

/* 9. Page de recherche : marges 3rem trop grandes + numéro qui chevauche le titre */
@media (max-width: 767px) {
  .path-recherche-solr .view-recherche-sol-r { padding: 1.25rem 1rem; }
  .path-recherche-solr .views-row::before { display: none; }
  .path-recherche-solr .views-row:hover { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   CORRECTIFS REVUE SITE — 14/10/2026
   (bloc ajouté en fin de fichier pour passer après les règles existantes)
   ══════════════════════════════════════════════════════════════════ */

/* ── 3.3 HOME / OUR EVENTS : photos ────────────────────────────────
   Cause : la vue utilise désormais le champ MÉDIA
   (.views-field-field-media-image) et non plus .views-field-field-image,
   donc aucune règle (hauteur, recadrage, ordre) ne s'appliquait.
   Le bloc image est toujours réservé (200px) : si un événement n'a pas
   de photo, la carte garde un en-tête dégradé et reste alignée. */
.paragraph--type--evenements-publiques-fullwidth .item-list li > .views-field-field-media-image {
  order: 1;
  display: block !important;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0c2070 0%, #2355c5 100%);
}
.paragraph--type--evenements-publiques-fullwidth .views-field-field-media-image .field-content,
.paragraph--type--evenements-publiques-fullwidth .views-field-field-media-image .media,
.paragraph--type--evenements-publiques-fullwidth .views-field-field-media-image .field,
.paragraph--type--evenements-publiques-fullwidth .views-field-field-media-image .field__item {
  display: block;
  width: 100%;
  height: 100%;
}
.paragraph--type--evenements-publiques-fullwidth .views-field-field-media-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.paragraph--type--evenements-publiques-fullwidth .item-list li:hover .views-field-field-media-image img {
  transform: scale(1.05);
}
/* Page /events : si l'image est introuvable, on garde l'en-tête dégradé */
.view-events .node--type-evenement .ev-img-wrap img { object-position: center; }


/* ── 3.2 HOME / OUR COMMITMENTS : survol → fond bleu marine ────────
   Avant : seul le texte passait en blanc, le fond restait gris.
   Pour changer le bleu marine, modifier --commit-hover-bg. */
:root { --commit-hover-bg: #051040; }
.para-commitmentS-item:hover {
 /* background: var(--commit-hover-bg);
  box-shadow: 0 12px 28px rgba(5, 16, 64, 0.35);*/
}


/* ── 1. BLEU PASTEL sur les blocs « image + texte » ────────────────
   Le bleu pastel clair n'avait aucune règle (seule la variante « -dk »
   existait) et son texte était forcé en blanc. Couvre toutes les
   orthographes : bleu-pastel, bleu_pastel, bleu-pastel-dk… */
[class*="backgrounded-paragraph-bleu"][class*="pastel"]:not([class*="logo"]) {
  background-color: var(--color-bleu-pastel, #cee0ff) !important;
  border: 1px solid rgba(26, 79, 179, 0.25);
  padding: 20px;
  color: var(--color-dark, #051040);
}
[class*="backgrounded-paragraph-bleu"][class*="pastel"]:not([class*="logo"]) :is(p, h2, h3, h4, li, span, strong) {
  color: var(--color-dark, #051040) !important;
}


/* ── 1. MARGES / ESPACEMENTS harmonisés ────────────────────────────
   a) « Trames » (.backgrounded-paragraph-*) et FAQ :
      - clear:both → la trame ne remonte plus à côté d'une image flottante
      - flow-root + marges internes remises à 0 → la trame n'est plus
        « trop grande » (les marges des titres/paragraphes s'ajoutaient
        au padding)
      - marge haut/bas identique partout (32px) */
[class*="backgrounded-paragraph-"] {
  clear: both;
  display: flow-root;
  margin-top: 32px;
  margin-bottom: 32px;
}
[class*="backgrounded-paragraph-"] > :first-child { margin-top: 0; }
[class*="backgrounded-paragraph-"] > :last-child  { margin-bottom: 0; }

/* b) Titre qui suit une photo / un paragraphe : Bootstrap met margin-top:0
      sur les h2/h3/h4, d'où « aucun espace entre la photo et le titre ».
      Spécificité volontairement faible : les titres déjà stylés
      (accueil, extranet…) ne sont pas touchés. */
:where(.node--type-page, .node--type-article, .field--name-body, .text-formatted, .ck-content) * + h2,
:where(.node--type-page, .node--type-article, .field--name-body, .text-formatted, .ck-content) * + h3,
:where(.node--type-page, .node--type-article, .field--name-body, .text-formatted, .ck-content) * + h4 {
  margin-top: 1.6em;
}

/* c) Photos dans le contenu : un peu d'air dessous */
:where(.field--name-body, .text-formatted, .ck-content) :is(img, figure) { margin-bottom: 1rem; }
.image-text-container:not(.texte_contour_image) { margin-top: 30px; margin-bottom: 30px; }

/* d) Classes utilitaires à poser dans CKEditor (Source) pour ajouter
      un espace entre deux blocs, ex. <div class="espace-haut-m">…</div> */
.espace-haut-s { margin-top: 16px !important; }
.espace-haut-m { margin-top: 32px !important; }
.espace-haut-l { margin-top: 56px !important; }
.espace-bas-s  { margin-bottom: 16px !important; }
.espace-bas-m  { margin-bottom: 32px !important; }
.espace-bas-l  { margin-bottom: 56px !important; }


/* ── 2. BARRE DE MENU ──────────────────────────────────────────────
   a) « Logout » en bleu foncé #0a447c (desktop + mobile) */
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a[href*="user/logout"],
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a[data-drupal-link-system-path="user/logout"],
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a[href*="user/login"],
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a[data-drupal-link-system-path="user/login"],
#account-menu-top a[href*="user/login"],
#account-menu-top a[href*="user/logout"] {
  background: #0a447c !important;
}

/* b) Bouton « Become a member » : on le repère par son lien (et plus par
      sa position) pour qu'il reste rouge même si une enveloppe est
      ajoutée avant lui. */
#block-sakyran-bootstrap5-account-menu ul li.nav-item a.nav-link[href*="demande-adhesion"] {
  background: var(--color-red) !important;
}

/* c) Lien « contact » du menu Drupal affiché en icône enveloppe, bloc bleu
      roi #1a4fb3. La classe .nav-envelope-btn est posée par header.js
      (moveAccountButtons). Le texte est masqué (font-size:0) mais reste dans
      le HTML ; le lien (URL) se change toujours depuis Drupal.
      Sélecteur très spécifique : la règle « 1er bouton du menu = rouge »
      (!important) l'emporte sinon. La hauteur/largeur du bloc viennent des
      règles existantes de a.nav-link, comme pour les autres boutons. */
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a.nav-link.nav-envelope-btn {
  background: #1a4fb3 !important;
  width: 56px;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;              /* le texte masqué décalait l'icône (gap de 6px) */
  letter-spacing: 0 !important;
  font-size: 0 !important;
  text-indent: 0;
}
#block-sakyran-bootstrap5-account-menu ul.nav.navbar-nav[data-block="nav_additional"] li.nav-item a.nav-link.nav-envelope-btn::before {
  display: inline-block !important;
  font-family: "bootstrap-icons" !important;
  content: "\f32f" !important;   /* bi-envelope */
  font-size: 22px !important;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  position: static;
}


/* ── SOUS-MENU : page active (ex. Commitments > Sustainability) ────
   Cause : la règle « li.nav-item a.is-active { color: bleu !important } »
   (pensée pour le menu principal) s'appliquait aussi aux liens du
   sous-menu, dont le fond actif est lui-même bleu → texte bleu sur bleu.
   Dans le sous-menu, l'entrée active = fond bleu + texte blanc. */
.navbar-nav .dropdown-menu li.nav-item a.dropdown-item.active,
.navbar-nav .dropdown-menu li.nav-item a.dropdown-item.is-active {
  background: var(--color-blue) !important;
  color: #fff !important;
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════════
   FAQ — un seul style pour toutes les pages
   Les FAQ existantes ont leur mise en forme en style="" inline (différente
   d'un bloc à l'autre) : les règles ci-dessous la remplacent (!important
   nécessaire face au style inline), sans avoir à rééditer chaque page.
   Fonctionne avec l'ancien balisage (<summary><span>Q</span><span>+</span>)
   ET avec le balisage propre (<summary>Q</summary><div class="faq-answer">).
   ══════════════════════════════════════════════════════════════════ */

/* Trame (bleu pastel, etc.) qui contient la FAQ : espacement unique */
[class*="backgrounded-paragraph-"] > .mt-3 { margin-top: 0 !important; }
[class*="backgrounded-paragraph-"] .valeurs__titre { margin-top: 0; margin-bottom: 0; }
[class*="backgrounded-paragraph-"] .valeurs__titre::after { margin: 0.6rem auto 1.25rem; }
[class*="backgrounded-paragraph-bleu"][class*="pastel"]:not([class*="logo"]) h2.valeurs__titre {
  color: var(--color-blue) !important;      /* le titre reste bleu sur le pastel */
}
[class*="backgrounded-paragraph-"]:has(.faq-section) { padding: 18px 24px; }

/* Section + liste (supprime les marges inline 4rem / 2rem / 1.5rem) */
.faq-section { margin: 0 !important; }
.faq-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

/* Une question = une carte blanche */
.faq-container > details {
  background: #fff !important;
  border: 1px solid #d3def2 !important;
  border-radius: 0px !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.faq-container > details[open] { border-color: var(--color-blue) !important; }

/* Ligne de la question */
.faq-container > details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-dark) !important;
  transition: background 0.2s;
}
.faq-container > details > summary::-webkit-details-marker { display: none; }
.faq-container > details > summary:hover { background: #f1f6ff; }
.faq-container > details > summary:focus-visible { outline: 2px solid var(--color-blue); outline-offset: -2px; }
.faq-container > details > summary > span:first-child { flex: 1; }
.faq-container > details > summary strong { font-weight: 700; }

/* Ancien symbole « + » (2e <span>, basculé par un script inline) : masqué,
   remplacé par un symbole CSS identique partout */
.faq-container > details > summary > span:last-child:not(:first-child) { display: none !important; }
.faq-container > details > summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blue);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  border-radius: 0px;
}
.faq-container > details[open] > summary::after { content: "−"; }

/* Réponse */
.faq-container > details > p,
.faq-container > details > .faq-answer {
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  border-top: 1px solid #e3ebf8 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  color: var(--color-dark) !important;
}
.faq-container > details > p span,
.faq-container > details > .faq-answer :is(p, span, li) { color: var(--color-dark) !important; font-weight: 400; }
.faq-container > details > .faq-answer > :last-child { margin-bottom: 0; }

@media (max-width: 575px) {
  [class*="backgrounded-paragraph-"]:has(.faq-section) { padding: 20px 14px; }
  .faq-container > details > summary { padding: 14px; font-size: 16px !important; }
  .faq-container > details > p,
  .faq-container > details > .faq-answer { padding: 14px 14px 16px !important; }
}


/* ── FAQ : harmonisation des deux structures de bloc ───────────────
   A) paragraphe « titre-texte »  : <h2 class="valeurs__titre"> hors section
   B) paragraphe « image-texte »  : <h2> DANS .faq-section, dans un
      .image-text-container, avec des <p> vides avant/après.
   Résultat visuel identique pour les deux. */

/* B) pas de marge propre au conteneur image+texte quand il est DANS une trame
      (elle s'ajoutait au padding de la trame et la rendait trop grande) */
[class*="backgrounded-paragraph-"] .image-text-container { margin-top: 0; margin-bottom: 0; }
[class*="backgrounded-paragraph-"] .image-text-container .text-content { min-width: 0; }

/* B) paragraphes vides générés par l'éditeur : plus d'espace parasite */
[class*="backgrounded-paragraph-"] p:empty { display: none; }

/* Titre de FAQ : même rendu que .valeurs__titre (centré, majuscules, bleu) */
.faq-section > h2 {
  margin: 0 0 1.85rem;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-blue) !important;
}
.faq-section > h2 strong { font-weight: 700; }
.olga-project-section{
  margin-top: 0px!important;
  padding-top: 0px!important;
}
/* ── MENU DESKTOP : plus de saut au survol + plus compact ── */
@media (min-width: 992px) {

  /* 1. Survol : plus de changement de graisse (cause du saut), soulignement à la place */
  .navbar-nav .nav-item .nav-link:hover,
  .navbar-nav .nav-item span.nav-link:hover {
    font-weight: 400 !important;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
  }
  /* la page active reste en gras, même au survol */
  .navbar-nav .nav-item .nav-link.is-active:hover,
  .navbar-nav .nav-item .nav-link.active:hover {
    font-weight: 700 !important;
  }

  /* 2. Les éléments du menu ne se compriment pas et ne passent pas à la ligne */
  .navbar-nav { flex-wrap: nowrap; }
  .navbar-nav .nav-item { flex-shrink: 0; }
  .navbar-nav .nav-item .nav-link,
  .navbar-nav .nav-item span.nav-link {
    font-size: 15px;
    padding: 14px 10px;
  }
  .navbar-nav .nav-item.nav-social { flex-shrink: 0; margin-left: 4px; white-space: nowrap; }
  .navbar-nav .nav-social a { width: 30px; height: 30px; }

  /* 3. Menu un peu moins décalé à gauche */
  header[role="banner"] .region-nav-main { padding-left: 12px; }

  /* 4. Bloc recherche plus étroit */
  #block-sakyran-bootstrap5-search-form .form-search { width: 95px; padding: 0 8px; }
  #block-sakyran-bootstrap5-search-form .form-search:focus { width: 130px; }
  #block-sakyran-bootstrap5-search-form input[type="submit"] { width: 38px; }

  /* 5. Bouton langue plus compact */
  .lang-dropdown-btn { padding: 0 10px; }
}
/* ══ MENU DESKTOP : plus de retour à la ligne, aligné à gauche ══ */
@media (min-width: 992px) {
  /* Bat les utilitaires Bootstrap .flex-wrap / .justify-content-end */
  header[role="banner"] .navbar-nav {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  header[role="banner"] .navbar-nav .nav-link,
  header[role="banner"] .navbar-nav span.nav-link {
    white-space: nowrap;
  }
}

/* Écrans intermédiaires : on compacte pour que tout tienne sur une ligne */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Barre de menu un peu plus large que les 960px du .container */
  header[role="banner"] > nav.navbar.container {
    max-width: 100%;
  }

  header[role="banner"] .region-nav-main { padding-left: 8px; }

  .navbar-nav .nav-item .nav-link,
  .navbar-nav .nav-item span.nav-link {
    font-size: 14px;
    padding: 14px 7px;
    letter-spacing: 0.2px;
  }

  .navbar-nav .nav-item.nav-social { margin-left: 0; }
  .navbar-nav .nav-social a { width: 28px; height: 28px; }
  .navbar-nav .nav-social svg { width: 18px; height: 18px; }

  /* Recherche + langue plus compactes */
  #block-sakyran-bootstrap5-search-form .form-search { width: 80px; font-size: 15px; }
  #block-sakyran-bootstrap5-search-form .form-search:focus { width: 120px; }
  .lang-dropdown-btn { padding: 0 8px; }
}
/* ══ Parent de sous-menu : surlignage quand une page enfant est active ══ */
.navbar-nav > .nav-item.dropdown:has(.dropdown-menu a.is-active) > .nav-link,
.navbar-nav > .nav-item.dropdown:has(.dropdown-menu a.active) > .nav-link {
  color: var(--color-blue, #1A4FB3) !important;
  font-weight: 700 !important;
}

/* Trait rouge sous le parent (desktop) */
@media (min-width: 992px) {
  .navbar-nav > .nav-item.dropdown:has(.dropdown-menu a.is-active) > .nav-link,
  .navbar-nav > .nav-item.dropdown:has(.dropdown-menu a.active) > .nav-link {
    box-shadow: inset 0 -3px 0 var(--color-red);
  }


}
/* ─────────── depuis custom.css ─────────── */

/* FIX : le bloc de contenu est en display:flex (custom.css),
   ce qui met les paragraphes côte à côte.
   On rétablit l'empilement sur mobile/tablette. */
@media (max-width: 991px) {
  #block-sakyran-bootstrap5-content.block.block-system.block-system-main-block {
    display: block !important;
    gap: normal !important;
  }
}

/* Espace vertical entre les paragraphes, remplacé par margin */
@media (max-width: 991px) {
  #block-sakyran-bootstrap5-content.block.block-system.block-system-main-block > .node__content .field__items > .field__item + .field__item {
    margin-top: 24px;
  }
}
/* Petit plus : trait rouge sous la page active (desktop) */
@media (min-width: 992px) {
  .navbar-nav > .nav-item > a.nav-link.is-active,
  .navbar-nav > .nav-item > a.nav-link.active {
    box-shadow: inset 0 -3px 0 var(--color-red);
  }
}
/* ══ Menu : écrans 992–1099px (ex. 1024px) ══ */
@media (min-width: 992px) {
  /* Si ça déborde un jour, ça part à droite et plus à gauche */
  header[role="banner"] .navbar-collapse {
    justify-content: flex-start !important;
  }
  header[role="banner"] .region-nav-main {
    min-width: 0;
  }
}

@media (min-width: 992px) and (max-width: 1099px) {
  .navbar-nav .nav-item .nav-link,
  .navbar-nav .nav-item span.nav-link {
    font-size: 13px;
    padding: 14px 5px;
    letter-spacing: 0;
  }

  /* LinkedIn / YouTube déjà accessibles ailleurs : on les masque sur cette plage */
  .navbar-nav .nav-item.nav-social { display: none; }

  /* Recherche et langue plus compactes */
  #block-sakyran-bootstrap5-search-form .form-search { width: 70px; font-size: 14px; }
  #block-sakyran-bootstrap5-search-form .form-search:focus { width: 100px; }
  #block-sakyran-bootstrap5-search-form input[type="submit"] { width: 34px; }
  .lang-dropdown-btn { padding: 0 6px; }
  header[role="banner"] .region-nav-main { padding-left: 4px; }
}