/* ============================================================
   ASEDG – Custom theme
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIABLES & BASE
   ---------------------------------------------------------- */
:root {
  --red:        #ff1100;
  --navy:       #002383;
  --gray-bg:    #f0f0f0;
  --gray-card:  #e8e8e8;
  --gray-border:#c4c4c3;
  --white:      #ffffff;
  --text:       #002383;

  --btn-hover: #b8200f;
  --radius-btn:  22px;
  --radius-card: 35px;
  --radius-blob: 150px;

  --focus-outline: 3px solid #ffbf47;
}

@font-face {
  font-family: 'Circular Air Pro';
  src: url('../assets/fonts/Circular Air Pro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Air Pro';
  src: url('../assets/fonts/Circular Air Pro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Air Pro';
  src: url('../assets/fonts/Circular Air Pro-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Circular Air Pro';
  src: url('../assets/fonts/Circular Air Pro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Circular Air Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
}

body,p{
  font-size:16px;
  font-weight: 400;
  font-family: 'Circular Air Pro';
}

h2{
  font-size:41px;
  line-height:53px;
  font-weight: 700 !important;
  font-family: 'Circular Air Pro';
  span{
    color: var(--navy);
    padding: 6pt 0;
  }
}
h3{
  font-size:29px;
  line-height:38px;
  font-weight:400;
  font-family: 'Circular Air Pro';
}
h4{
  font-size:25px;
  line-height:33px;
  font-weight:900;
  font-family: 'Circular Air Pro';
}
h5{
  font-size:18px;
  line-height:24px;
  font-weight:700;
  font-family: 'Circular Air Pro';
}


h2.bubble {
  color: var(--navy);
  font-weight: 700;
  display: inline-block;
  position: relative;
  margin-top: 0;
  margin-left: -20pt;
  border: 6pt solid;
  padding: 6pt 0;
  
  &::before{
    content:"";
    position:absolute;
    height:100%;
    width:10%;
    top:-6pt;
    left:-6pt;
    border-width: 40pt 0 40pt 40pt;
    border-style:solid;
    border-color:transparent transparent transparent var(--navy);
  }
  
  &::after{
    content:"";
    position:absolute;
    height:100%;
    width:10%;
    top: 5pt;
    left:0pt;
    border-width: 28pt 0 28pt 28pt;
    border-style:solid;
    border-color:transparent transparent transparent var(--gray-card);
  }
  span{
    position:relative;
    padding: 6pt 12pt;
    background:var(--gray-card);
    z-index:1;
  }
}


a.bubble {
  display: block !important;
  font-weight: 700;
  font-size:20px;
  position: relative !important;
  padding: 12pt;
  text-decoration: none !important;
  background:var(--red);
  text-align: center;
  color: #fff !important;
  transition:0.3s;
  z-index: 1;
  
  
  
  
  
  &:hover{
    /* text-decoration:none; */
    transform:translateY(-4px);
    background:var(--btn-hover);
    
    
    &::before{
      border-right-color: var(--btn-hover);
    }
    
  }
  
  &::before{
    content:"";
    position:absolute;
    height:100%;
    width:10%;
    top: 0;
    right: 0;
    border-width: 35pt 35pt 30pt 0;
    border-style:solid;
    border-color:transparent;
    border-right-color: var(--red);
    transition:0.3s;
    z-index: -1;
  }
    
  letter-spacing: 1.2px;

  span{
    position:relative;
    padding: 6pt 12pt;
    z-index:1;
    color: #fff !important;
  }
}

/* Submit button (form plugin renders <button>, so ::before works) */
button.bubble {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Circular Air Pro', sans-serif;
  position: relative;
  padding: 0.8rem 2.5rem;
  border: none;
  cursor: pointer;
  background: var(--red);
  color: var(--white);
  letter-spacing: 1.2px;
  transition: 0.3s;
  z-index: 1;

  &:hover {
    background: var(--btn-hover);
    transform: translateY(-4px);

    &::before {
      border-right-color: var(--btn-hover);
    }
  }

  &::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 10%;
    top: 0;
    right: 0;
    border-width: 35pt 35pt 30pt 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: var(--red);
    transition: 0.3s;
    z-index: -1;
  }
}

header{
  a.bubble {
    text-transform: unset !important;
    font-size: 14px;
    position: relative;
    
    
    
    &::before{
      border-width: 15pt 15pt 15pt 0;
      right: 0;
      top: 6pt;
      z-index: -1;
    }
    span{
      font-size: 14px;
    }
  }
}


.modular-text{
  padding: 3rem 1rem !important;
}

.grey{
  background: var(--gray-card) !important;
}

/* ----------------------------------------------------------
   2. FOCUS
   ---------------------------------------------------------- */
*:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Supprimer l'outline par défaut uniquement quand :focus-visible est supporté */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ----------------------------------------------------------
   3. HEADER / NAV
   ---------------------------------------------------------- */
#header {
  border-bottom: 3px solid var(--red);
  height: calc(4rem + 30px) !important;

  .container.grid-lg{
    max-width:1600px;
  }
}

/* Compensate for the taller fixed header on regular (non-modular) pages */
.header-fixed #body-wrapper {
  padding-top: 60px !important;
}

#header .navbar-section {
  height: calc(4rem + 30px) !important;
}

#header .logo img,
#header .logo svg {
  height: 56px !important;
}

#header li a:hover{
  color:var(--red);
}
.dropmenu ul li a.active,
.dropmenu ul li a:focus-visible {
  &::after{
    content:"";
    position:absolute;
    bottom:0px;
    height:4px;
    background:var(--red);
    left: 15px;
    right: 15px;
  }
}

#header{
  
  .langswitcher {
      font-weight: 400;
      margin-left: 0 !important;
      margin-right: 10px;
  
  }
  
  .langswitcher li {
    
    
    a{
      /*! padding: 4px; */
      position: relative;

      &:hover{
        background:var(--gray-bg);
        background: unset;
        color: var(--red) !important;
      }
      
      &.active,&:focus-visible {
        &::after{
          content:"";
          position:absolute;
          bottom:2px;
          height:4px;
          background:var(--red);
          left: 4px;
          right: 4px;
        }
      }
    }
    
  }
  
  .langswitcher .active {
      font-weight: 400;
      text-decoration: none;
  }

}



.overlay {
  background:var(--navy) !important;
  *{
    color: #fff !important;
  }
  .toggler{
    display: none;
  }
  .treemenu li a{
    
  padding: 8px 0;
  }
  .treemenu li a.active,
  .treemenu li a:focus,
  .treemenu li a:hover {
    text-decoration:none;
    color:var(--red)!important
  }
  .bubble{
    
  margin: 0;
  margin-top: 20px;
  }
}


/* ----------------------------------------------------------
   4. BOUTONS
   ---------------------------------------------------------- */
.button,
a.button {
  display: inline-block;
  padding: 0.2rem 1.6rem 1.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.2s;
  border-bottom: 2px solid transparent !important;
  background: var(--red);
  color: var(--white) !important;
  line-height: 1.4;
  letter-spacing: 1.2px;
  
  
  
  
  
  
  
  &.btntab {
    border-bottom-left-radius: var(--radius-btn);
    border-bottom-right-radius: var(--radius-btn);
  }
}

.button:hover,
a.button:hover {
  background: var(--btn-hover);
  color: var(--white) !important;
  /* transform: translateY(-2px); */
  outline:none;
  border-color:transparent;
  margin-bottom:0.2rem;
  padding-top:0rem;
  /* box-shadow: 0 4px 12px rgba(218, 41, 28, 0.35); */
  /* border-bottom: 2px solid transparent !important; */
}

.button:active,
a.button:active {
  transform: translateY(0);
}

.buttons{

  &.centered{
    justify-content: center;
  }
}

/* Groupe de boutons */
[role="group"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------------------------
   5. SECTION HERO (modular-text avec image)
   ---------------------------------------------------------- */


.modular-hero{
  margin-top: calc(4rem + 30px);
  padding: 0 !important;
  border: 6pt solid var(--red);
  position: relative;
  
  
  
  
  
  
  
  
  
  
  
  

  &::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:300px;
    background:var(--red);
    z-index:-1;
  }
  
  .container{
    padding: 3rem;
    max-width: 1600px !important;
    /* max-width: none !important; */
    

    p{
      color: var(--text);
    }

    .column:first-of-type{
      padding-right: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
  }
  
  h2{
    color:var(--red);
    font-size:41px;
    margin-top: 0;
  }
}

.modular-hero.hero-section {
  background: var(--white) !important;
  border-left: 6px solid var(--red);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.modular-hero.hero-section h2 {
  color: var(--red);
  font-weight: 900;
  margin-top: 0;
}

/* Image hero */
.modular-hero figure {
  margin: 0;
  max-width: 500px;
  justify-self: end;
  height: 100%;
  align-content: center;
}

.modular-hero figure img {
  /* border: 1px solid var(--gray-card); */
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------
   6. SECTION "NOTRE MISSION" (carte grise arrondie)
   ---------------------------------------------------------- */
.modular-text.carte {
  background: var(--white) !important;
}

/* La carte elle-même */
.modular-text.carte .columns {
  background: var(--gray-card);
  border-radius: var(--radius-card);
  padding: 2.5rem 5rem;
  max-width: 720px;
  margin: 0 auto;
}

p {
  color: var(--navy);
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* ----------------------------------------------------------
   7. FEATURES – cards bleu marine
   ---------------------------------------------------------- */
.modular-features h2 {
  color: var(--red);
  margin-bottom: 4rem;
}

.modular-features .frame-box {
  background: transparent;
  box-shadow: none;
  padding: 1rem 0;
}

.modular-features.small .columns {
  gap: 1rem;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.modular-features.small{
  
    .column {
      background: var(--navy);
      padding: 1.5rem 1rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      flex: 1;
      display: flex;
      flex-direction: column;
      
      &:nth-child(1){
        border-bottom-left-radius: var(--radius-card);
      }
      &:nth-child(2){
        border-top-left-radius: var(--radius-card);
      }
      &:nth-child(3){
        border-top-right-radius: var(--radius-card);
      }
      &:nth-child(4){
        border-bottom-right-radius: var(--radius-card);
      }
      
      
      .feature-icon{
        margin: 0;
        flex: 1;
        
        
        icon{
          font-size: 100px;
          height: 80px;
        }
        
      }
  }
}

/* Full-card link wrapper */
.modular-features .feature-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none !important;
  color: inherit;
}

.modular-features.small .column:hover,
.modular-features.small .column:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 20, 137, 0.3);
}

/* Icône rouge */
.modular-features.small .feature-icon i {
  color: var(--red) !important;
  font-size: 40px !important;
  margin-bottom: 0.75rem;
}

/* Titre de la feature – blanc sur marine : ratio > 7:1 ✓ */
.modular-features.small .feature-icon span {
  color: var(--white) !important;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  /* text-transform: none; */
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Texte description – blanc à 85% : ratio ~5.5:1 ✓ */
.modular-features.small .feature-content,
.modular-features.small .feature-content p {
  color: rgba(255, 255, 255, 0.88) !important;
  /* font-size: 0.875rem; */
  margin: 0;
}

/* Annuler les overrides hover du thème Quark */
.modular-features.small .column:hover .feature-icon,
.modular-features.small .column:hover .feature-icon span,
.modular-features.small .column:hover .feature-content {
  color: var(--white) !important;
}
.modular-features.small .column:hover .feature-icon i {
  color: var(--red) !important;
}

/* ----------------------------------------------------------
   8. SECTION HUB DIGITAL
   ---------------------------------------------------------- */

.modular-text.hub-section {
  background: var(--white) !important;
  border: 2px solid var(--red);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 0 !important;
}

.modular-text.hub-section .container {
  padding: 0;
}

.modular-text.hub-section .columns {
  align-items: stretch;
  margin: 0;
  min-height: 220px;
}

/* Colonne gauche : bloc rouge organique */
.modular-text.hub-section .col-hub-label {
  background: var(--red);
  border-radius: var(--radius-blob) 0 0 var(--radius-blob);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  min-height: 200px;
}

.modular-text.hub-section .col-hub-label h2 {
  color: var(--white);    /* Blanc sur rouge : ratio 4.8:1 ✓ */
  font-weight: 900;
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
}

/* Colonne droite : contenu */
.modular-text.hub-section .col-hub-content {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modular-text.hub-section .col-hub-content p {
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.banner{

  .container{
    border: 6pt solid var(--red);
    overflow:hidden;
    border-top-left-radius:100px;
    
    .column{

      &:nth-child(1){
        flex:0;
        white-space:nowrap;
        padding:2rem 4rem;
        display: flex;
        align-items: center;
        background: var(--red);
        color: #fff;
        border-bottom-right-radius:100px;
        
        h2{
          margin:0;
          color: #fff;
        }
      }
      &:nth-child(2){
        flex:1;
        padding:1rem 3rem;
        text-align: center;
        color: var(--navy);
        p{
          font-size: 18px;
        }
      }
      
    }

    
  }
  
}

/* ----------------------------------------------------------
   9. SECTION ARTICLES DU BLOG
   ---------------------------------------------------------- */
.modular-blog {

  .columns{
    
    .card {
      border: 6pt solid var(--gray-border);
      flex: 1;
      transition:0.4s;
      max-width: 40%;
      
      &:hover{
        border-color:var(--navy);
      }
    
    a{
            font-size:22px !important;
            color:var(--text);
            font-weight: bold;
        }

      .card-footer{
        display:none;
      }
    }
    gap: 1rem;
    justify-content:space-between;

  }

  .blog-all-link {
    text-align: center;
    margin-top: 2rem;
  }


}

/* ----------------------------------------------------------
   10. SECTION BOUTONS FINAUX
   ---------------------------------------------------------- */
.modular-buttons{padding: 3rem 1rem;margin-bottom: 2rem;
  
    [role="group"] {
      justify-content: center;
      padding:0 4rem;

      a{
        flex:1;
      }
      
    }
  
}

/* ----------------------------------------------------------
   11. COULEUR DE FOND bg-gray
   ---------------------------------------------------------- */
.bg-gray {
  background-color: var(--gray-bg) !important;
}

/* ----------------------------------------------------------
   12. FOOTER
   ---------------------------------------------------------- */
#footer {
  background: var(--gray-border) !important;
  padding: 1.5rem 0;
  .container.grid-lg{
    max-width:1600px;
  }
}

#footer * {
  color: var(--text) !important;
}

#footer a {
  color: var(--navy);
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.footer-badge img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.footer-info p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text) !important;
  text-align: left;
}

.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #e8f5e9;
  color: #2e7d32 !important;
  border: 1px solid #a5d6a7;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}

.eco-badge:hover {
  background: #c8e6c9;
}

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-badge img {
    width: 80px;
    height: 80px;
  }
}

/* ----------------------------------------------------------
   13. ÉQUIPE / COMITÉ
   ---------------------------------------------------------- */
.modular-equipe h2 {
  color: var(--red);
  margin-bottom: 2rem;
}

.team-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.team-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-left: 4px solid var(--red);
  background: var(--gray-bg);
}

.team-photo {
  flex-shrink: 0;
}

.team-photo img,
.team-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-card);
  display: block;
}

.team-photo-placeholder {
  width: 160px;
  height: 160px;
  background: var(--gray-card);
  border-radius: var(--radius-card);
}

.team-name {
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.team-role {
  color: var(--red);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.team-bio p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------
   14. PROJETS PILOTES
   ---------------------------------------------------------- */
.modular-projet {
  background: var(--white);
  padding: 3rem 1rem;
}

.modular-projet + .modular-projet {
  padding-top: 0;
}

.projet-card {
  border: 3px solid var(--navy);
  border-top: 6px solid var(--red);
  padding: 2rem;
}

.projet-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-border);
}

.projet-header h2 {
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.projet-flag {
  font-size: 1.5rem;
}

.projet-calendar {
  color: var(--navy);
  font-size: 0.9rem;
  margin: 0;
}

.projet-section {
  margin-bottom: 1rem;
}

.projet-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.projet-col {
  flex: 1;
  min-width: 220px;
}

.projet-col h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.projet-col ul {
  padding-left: 1.2rem;
  margin: 0;
}

.projet-col li {
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

/* ----------------------------------------------------------
   15. DEFAULT PAGES (HUB, partenaire, soutenir)
   ---------------------------------------------------------- */
#body-wrapper h2 {
  color: var(--navy);
}

#body-wrapper h3 {
  color: var(--red);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 2rem;
}

#body-wrapper table {
  border-collapse: collapse;
  margin: 1rem 0;
}

#body-wrapper table td {
  padding: 0.4rem 1rem 0.4rem 0;
  color: var(--navy);
}

#body-wrapper ul,
#body-wrapper ol {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   16. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  /* Équipe */
  .team-card {
    flex-direction: column;
    gap: 1rem;
  }

  .team-photo img,
  .team-photo-placeholder {
    width: 120px;
    height: 120px;
  }

  /* Projets */
  .projet-columns {
    flex-direction: column;
    gap: 1rem;
  }

  .projet-card {
    padding: 1.25rem;
  }
}

@media (max-width: 840px) {
  .modular-text.carte .columns {
    padding: 1.5rem 1.25rem;
  }

  /* Blob HUB : passe en haut sur mobile */
  .modular-text.hub-section .col-hub-label {
    border-radius: var(--radius-blob) var(--radius-blob) 0 0;
    min-height: auto;
    padding: 1.5rem;
  }

  .modular-text.hub-section .col-hub-content {
    padding: 1.5rem;
  }

  [role="group"] {
    flex-direction: column;
    align-items: stretch;
  }

  .modular-features.cta-section [role="group"] .button,
  .modular-features.cta-section [role="group"] a.button {
    max-width: 100%;
  }
}




/* ============================================================
   ASEDG – Responsive styles
   Breakpoints: 840px (tablet), 600px (mobile), 400px (small)
   ============================================================ */

/* ----------------------------------------------------------
   HEADER & NAV
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-hero figure {
    max-width: none;
    width: 100%;
  }
  #header {
    padding: 0 1rem;
  }

  /* Logo slightly smaller */
  #header .logo img,
  #header .logo svg {
    height: 34px;
  }

  /* Mobile overlay menu: larger lang switcher links */
  .langswitcher {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
  }

  .langswitcher li a {
    font-size: 1rem;
    padding: 6px 10px;
  }
  .overlay {
      .treemenu li a {
        text-transform:uppercase;
        font-weight:bold;
      }
  }

}


/* ----------------------------------------------------------
   HERO SECTION (.modular-hero)
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-hero {
    margin-top: 4rem;
    border-width: 4pt;
  }

  /* Stack columns vertically */
  .modular-hero .container {
    padding: 2rem 1.25rem;
  }

  .modular-hero .columns {
    flex-direction: column;
  }

  .modular-hero .column:first-of-type {
    padding-right: 0 !important;
    padding-bottom: 1.5rem;
  }

  .modular-hero h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 1rem;
  }

  /* Red side stripe becomes top stripe */
  .modular-hero::before {
    width: 100%;
    height: 160px;
    right: auto;
    bottom: 0;
    top: auto;
  }

  /* Full-width image */
  .modular-hero figure img {
    /* max-height: 260px; */
    object-fit: cover;
  }

  /* Bubble CTA buttons stack */
  a.bubble {
    width: 100%;
    box-sizing: border-box;
    padding: 12pt !important;
  }
}

@media (max-width: 600px) {

  .modular-hero h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .modular-hero .container {
    padding: 1.5rem 1rem;
  }
}


/* ----------------------------------------------------------
   BUBBLE HEADING (h2.bubble)
   ---------------------------------------------------------- */
@media (max-width: 600px) {

  h2.bubble {
    margin-left: 0;
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 30px;
  }

  h2.bubble::before {
    border-width: 32pt 0 32pt 32pt;
  }

  h2.bubble::after {
    border-width: 26pt 0 18pt 18pt;
    top: 0;
  }
}


/* ----------------------------------------------------------
   NOTRE MISSION – carte grise
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-text.carte .columns {
    padding: 1.75rem 1.5rem;
    border-radius: 20px;
  }
}

@media (max-width: 600px) {

  .modular-text.carte .columns {
    padding: 1.25rem 1rem;
    border-radius: 16px;
  }
}


/* ----------------------------------------------------------
   FEATURES CARDS (.modular-features.small)
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-features.small .columns {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .modular-features.small .feature-icon span{
    font-size: 1.2rem;
  }
  /* 2 columns on tablet */
  .modular-features.small .column {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: calc(50% - 0.75rem);
  }

  /* Reset individual corner radii, apply uniform ones per card */
  .modular-features.small .column:nth-child(1),
  .modular-features.small .column:nth-child(2),
  .modular-features.small .column:nth-child(3),
  .modular-features.small .column:nth-child(4) {
    border-radius: 0;
  }

  .modular-features.small .column:nth-child(1) { border-bottom-left-radius:  var(--radius-card); }
  .modular-features.small .column:nth-child(2) { border-top-right-radius:    var(--radius-card); }
  .modular-features.small .column:nth-child(3) { border-bottom-left-radius:  var(--radius-card); }
  .modular-features.small .column:nth-child(4) { border-top-right-radius:    var(--radius-card); }
}

/* ----------------------------------------------------------
   17. SECTION SUBNAV (modular pages – secondary anchor nav)
   ---------------------------------------------------------- */
:root {
  --subnav-h: 2.4rem;
}

nav.section-subnav {
  position: fixed;
  top: calc(4rem + 30px);
  left: 0;
  right: 0;
  z-index: 3;
  background: var(--navy);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

nav.section-subnav .container {
  padding: 0;
  max-width: 1600px;
  position: relative; /* anchor for the absolute-positioned mobile dropdown */
}

/* Toggle button: hidden on desktop, revealed on mobile via media query */
.subnav-toggle {
  display: none;
}

.subnav-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

nav.section-subnav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

nav.section-subnav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

nav.section-subnav ul li a:hover {
  color: var(--red) !important;
  background: rgba(255, 255, 255, 0.06);
}

nav.section-subnav ul li a.active {
  color: var(--white) !important;
  background: rgba(255, 17, 0, 0.18);
  box-shadow: inset 0 -3px 0 0 var(--red); /* red underline indicator */
}

/* Offset content below fixed header (calc(4rem+30px)) + subnav.
   Without this, the first section starts at 0 in the flow and its
   content ends up partially behind the fixed subnav bar.          */
body.has-section-subnav main#start {
  padding-top: calc(60px + var(--subnav-h));
}

/* Hero sections on modular pages must also account for subnav */
body.has-section-subnav .modular-hero {
  margin-top: calc(4rem + 30px + var(--subnav-h));
}

@media (max-width: 840px) {
  /* ── Reveal the toggle button ── */
  .subnav-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    height: var(--subnav-h);
    padding: 0 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: inherit;
  }

  .subnav-toggle .subnav-chevron {
    margin-left: auto; /* pushes chevron to far right */
  }

  .subnav-toggle:focus-visible {
    outline: var(--focus-outline);
    outline-offset: -3px;
  }

  /* Chevron rotates when dropdown is open */
  nav.section-subnav.is-open .subnav-chevron {
    transform: rotate(180deg);
  }

  /* ── Dropdown: hidden by default, shown when .is-open ── */
  nav.section-subnav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    background: var(--navy);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    z-index: 200;
    padding: 0.3rem 0;
  }

  nav.section-subnav.is-open ul {
    display: flex;
  }

  /* Full-width tappable rows */
  nav.section-subnav ul li {
    width: 100%;
  }

  nav.section-subnav ul li a {
    padding: 0.7rem 1.25rem;
    font-size: 0.72rem;
    white-space: normal;
    border-radius: 0;
  }

  /* Active item: white text + red-tinted background + red dot indicator */
  nav.section-subnav ul li a.active {
    color: var(--white) !important;
    background: rgba(255, 17, 0, 0.22);
    font-weight: 700;
    box-shadow: none; /* no underline on mobile rows */
  }

  nav.section-subnav ul li a.active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--red);
    border-radius: 50%;
    margin-right: 0.6rem;
    vertical-align: middle;
    margin-bottom: 1px;
  }
}

/* Hide the subnav when the Quark mobile overlay nav is open.
   site.js adds .mobile-nav-open to <body> on hamburger toggle.
   The .overlay has no z-index so our z-index:98 subnav always wins —
   hiding it is simpler than fighting the stacking contexts.        */
body.mobile-nav-open nav.section-subnav {
  display: none !important;
}

/* Keep hamburger fixed and at a constant vertical position on mobile.
   Without this, theme.css line ~752 moves the button to top:.5rem
   when #header gets the .scrolled class, causing a visible jump.   */
@media (max-width: 840px) {
  .header-fixed .mobile-menu {
    position: fixed; /* ensure it stays fixed even without header-fixed class */
  }
  body.header-fixed.header-animated #header.scrolled ~ .mobile-menu .button_container {
    top: 1.3rem !important; /* lock to original position, prevent upward jump */
  }
}

/* ----------------------------------------------------------
   18. PAGE À PROPOS – visual styling for modular sections
   ---------------------------------------------------------- */

/* Red h2 titles in text sections (markdown h2 has no span) */
.modular-text:not(.carte) h2 {
  color: var(--red);
  margin-bottom: 1.5rem;
}

/* Blockquotes – vision / mission pull-quotes */
.modular-text blockquote {
  border-left: 5px solid var(--red);
  padding: 0.85rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--gray-bg);
  border-radius: 0 var(--radius-btn) var(--radius-btn) 0;
}

.modular-text blockquote p {
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  color: var(--navy);
  margin: 0;
}

/* Carte – vision card title stays navy (via span rule) */
.modular-text.carte h2 {
  color: var(--navy);
}

/* Section – mission : bullet items styled as red-accented pills */
.modular-text.mission ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.25rem;
}


/* Section – axes : each h3 gets a red accent underline */
.modular-text.axes h3 {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--red);
}

/* Section – modular-list : ordered list (red circle counters, valeurs style) */
.modular-list :is(ol,ul) {
  list-style: none;
  counter-reset: valeur-counter;
  padding-left: 0;
  margin-top: 1rem;
}

.modular-list :is(ol,ul) li {
  counter-increment: valeur-counter;
  position: relative;
  padding: 0.85rem 1.25rem 0.85rem 3.75rem;
  margin-bottom: 0.6rem;
  background: var(--white);
  border-radius: var(--radius-btn);
  color: var(--navy);
}

.modular-list ol li::before {
  content: counter(valeur-counter);
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

/* Section – modular-list : unordered list, dots removed */
.modular-list ul li {
  list-style: none;
  padding: 0.85rem 1.25rem 0.85rem 1.85rem;
  margin-top: 1rem;

  &::before{
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 2rem;
  background: var(--red);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  }
  
}

/* Section – reconnaissance : official accent */
.modular-text.reconnaissance {
  /* border-top: 4px solid var(--red) !important; */
}

.modular-text.reconnaissance h2 {
  color: var(--red) !important;
}

/* Equipe section bg */
.modular-equipe {
  background: var(--white);
}

.modular-text.statuts a[href$=".pdf"]:hover {
  background: var(--btn-hover);
}

/* Modular section general padding */
.modular-text {
  padding: 3rem 1rem !important;
}

.modular-equipe {
  padding: 3.5rem 0;
}

@media (max-width: 840px) {
  .modular-text.valeurs ol li,
  .modular-list ol li {
    padding-left: 3.25rem;
  }

  .modular-text.axes h3 {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {

  /* 1 column on mobile */
  .modular-features.small .column {
    flex: 1 1 100%;
    min-width: 100%;
    border-radius: 16px !important;
  }
}


/* ----------------------------------------------------------
   HUB DIGITAL SECTION
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-text.hub-section .columns {
    flex-direction: column;
  }

  .modular-text.hub-section .col-hub-label {
    border-radius: var(--radius-blob) var(--radius-blob) 0 0;
    min-height: auto;
    padding: 1.5rem;
  }

  .modular-text.hub-section .col-hub-content {
    padding: 1.5rem;
  }
}


/* ----------------------------------------------------------
   BANNER SECTION
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .banner .container {
    border-top-left-radius: 50px;
  }

  .banner .container .columns {
    flex-direction: column;
  }

  .banner .container .column:nth-child(1) {
    padding: 1.5rem 2rem;
    border-bottom-right-radius: 50px;
    white-space: normal;
  }

  .banner .container .column:nth-child(1) h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .banner .container .column:nth-child(2) {
    padding: 1rem 1.5rem;
  }

  .banner .container .column:nth-child(2) p {
    font-size: 16px;
  }
}

@media (max-width: 600px) {

  .banner .container {
    border-top-left-radius: 30px;
  }

  .banner .container .column:nth-child(1) {
    border-bottom-right-radius: 30px;
    padding: 1.25rem 1.25rem;
  }

  .banner .container .column:nth-child(1) h2 {
    font-size: 22px;
  }
}


/* ----------------------------------------------------------
   BLOG CARDS (.modular-blog)
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-blog .columns {
    flex-direction: column;
    gap: 1rem;
  }

  .modular-blog .columns .card {
    max-width: 100%;
    flex: 1 1 100%;
  }
}


/* ----------------------------------------------------------
   FINAL BUTTONS (.modular-buttons)
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-buttons [role="group"] {
    padding: 0 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .modular-buttons [role="group"] a {
    flex: 1 1 100%;
    text-align: center;
  }
}


/* ----------------------------------------------------------
   TYPOGRAPHY – scale down headings
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  h2 {
    font-size: 30px;
    line-height: 40px;
  }

  h3 {
    font-size: 22px;
    line-height: 30px;
  }

  h4 {
    font-size: 20px;
    line-height: 28px;
  }
  p{
    font-size: 1.2rem;
    font-weight: 400;
  }
}

@media (max-width: 600px) {

  h2 {
    font-size: 24px;
    line-height: 32px;
  }

  h3 {
    font-size: 19px;
    line-height: 26px;
  }
}


/* ----------------------------------------------------------
   GLOBAL SPACING – tighten sections on mobile
   ---------------------------------------------------------- */
@media (max-width: 840px) {

  .modular-text {
    padding: 2rem 1rem !important;
  }

  .section {
    padding-right: 0.75rem;
    padding-left:  0.75rem;
  }
}

@media (max-width: 600px) {

  .modular-text {
    padding: 1.5rem 0.75rem !important;
  }
}


/* ----------------------------------------------------------
   FOOTER – responsive (stacking handled in section 12 above)
   ---------------------------------------------------------- */
@media (max-width: 840px) {
  #footer {
    padding: 1.25rem 1rem;
  }
}


/* ----------------------------------------------------------
   19. PAGE CONTACT
   ---------------------------------------------------------- */
.contact-page-inner {
  padding: 2.5rem 0 3rem;
}

.contact-layout {
  gap: 3rem;
  align-items: flex-start;
  /*! display: flex; */
  flex-wrap: nowrap !important;
  >.column{
    flex: 1 !important;
    width: 50%;
  }
}

/* Sidebar */
.contact-heading {
  color: var(--red);
  font-size: 2.2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.contact-intro {
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-detail-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-detail-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.contact-detail-item strong {
  display: block;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}

.contact-detail-item p {
  margin: 0;
  color: var(--navy);
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-detail-item a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.contact-detail-item a:hover {
  color: var(--red);
  text-decoration: underline;
}

/* Form wrapper */
.contact-form-wrapper {
  background: var(--gray-bg);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
}

/* Form wrapper id */
.contact-form-wrapper .form-wrapper {
  margin: 0;
}

/* Toast success/error message */
.contact-form-wrapper .toast {
  border-radius: var(--radius-btn);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.contact-form-wrapper .toast.green {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.contact-form-wrapper .toast.red {
  background: #fce4e4;
  color: #b52b27;
  border: 1px solid #f5a5a5;
}

/* Form fields */
.contact-form-wrapper .form-group {
  margin-bottom: 1.25rem;
}

.contact-form-wrapper label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.contact-form-wrapper .form-input,
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea,
.contact-form-wrapper select {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 2px solid var(--gray-border);
  /* border-radius: var(--radius-btn); */
  border-top-left-radius: var(--radius-btn);
  background: var(--white);
  color: var(--navy);
  font-family: 'Circular Air Pro', sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 48px;
}

.contact-form-wrapper .form-input:focus,
.contact-form-wrapper input[type="text"]:focus,
.contact-form-wrapper input[type="email"]:focus,
.contact-form-wrapper textarea:focus,
.contact-form-wrapper select:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 17, 0, 0.1);
}

/* Select arrow */
.contact-form-wrapper .form-select-wrapper,
.contact-form-wrapper .form-input-wrapper {
  position: relative;
}

.contact-form-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002383' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.contact-form-wrapper textarea {
  resize: vertical;
  min-height: 160px;
  /* border-radius: var(--radius-btn); */
}

/* Error state (from form plugin) */
.contact-form-wrapper .form-group.has-errors .form-input,
.contact-form-wrapper .form-group.has-errors input,
.contact-form-wrapper .form-group.has-errors textarea,
.contact-form-wrapper .form-group.has-errors select {
  border-color: var(--red);
}

/* Submit button – right-aligned bubble */
.contact-form-wrapper .buttons {
  margin-top: 1.75rem;
  display: flex;
  justify-content: flex-end;
}

.column.col-7.contact-form-wrapper {
  padding: 30px;
}
form .button-wrapper {
  text-align: right;
}

/* Required asterisk */
.contact-form-wrapper label .required {
  color: var(--red);
  margin-left: 0.25rem;
}

@media (max-width: 840px) {
  .contact-layout {
    flex-direction: column;
    gap: 2rem;
  }

  /* Columns lose their % width when stacked */
  .contact-sidebar,
  .contact-form-wrapper {
    width: 100%;
  }

  .contact-form-wrapper {
    padding: 1.75rem 1.25rem;
    border-radius: 20px;
  }

  .contact-heading {
    font-size: 1.8rem;
  }
}

@media (max-width: 600px) {
  .contact-page-inner {
    padding: 1.5rem 0 2rem;
  }
}


/* ----------------------------------------------------------
   20. PAGE ACTUALITÉS (blog listing)
   ---------------------------------------------------------- */

/* Simple page title */
.blog-listing-title {
  color: var(--red);
  margin: 2rem 0;
}

/* Cards mirror the homepage .modular-blog style */
.blog-listing .columns {
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.blog-listing .columns .card {
  border: 6pt solid var(--gray-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  flex: 1;
  transition: 0.4s;
  max-width: 40%;

  &:hover {
    border-color: var(--navy);
  }

  a {
    font-size: 22px !important;
    color: var(--text);
    font-weight: bold;
  }
}

@media (max-width: 840px) {
  .blog-listing .columns {
    flex-direction: column;
  }

  .blog-listing .columns .card {
    max-width: 100%;
  }
}


/* ----------------------------------------------------------
   21. BLOG ITEM PAGE (single article)
   ---------------------------------------------------------- */

/* Header: image left / title right, grey background */
.blog-item-header {
  /* Push below the fixed navigation bar (same rule as .modular-hero) */
  margin-top: calc(4rem + 30px);
}

.blog-item-header .columns {
  align-items: center;
  gap: 2rem;
}

.blog-item-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  line-height: 0; /* remove whitespace below inline img */
}

.blog-item-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
}

.blog-item-header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
}

.blog-item-header-text h1 {
  color: var(--red);
  margin: 0 0 0.75rem;
  font-size: 2rem;
}

.blog-item-subtitle {
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.blog-item-header-text .blog-date {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

/* Article body */
.blog-item-body {
  padding: 2.5rem 1rem;
}

.blog-item-body .e-content {
  max-width: 860px;
  margin: 0 auto;
  color: var(--navy);
  line-height: 1.75;
}

/* Prev / Next navigation */
.prev-next {
  margin: 2.5rem 0 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 840px) {
  .blog-item-header .columns {
    gap: 1.25rem;
  }

  .blog-item-header-text {
    padding-left: 0;
  }

  .blog-item-header-text h1 {
    font-size: 1.6rem;
  }
}


/* ============================================================
   22. CORRECTIFS 2026-08 — logo, formulaire mobile, projets
   ============================================================ */

/* ----------------------------------------------------------
   22.1 LOGO — préserver le ratio (972 × 165)
   Spectre applique `img{max-width:100%}` : quand le conteneur
   rétrécit, la largeur est bridée alors que la hauteur reste
   figée par `height:56px` → le logo s'écrase. `width:auto` +
   `object-fit:contain` garantissent le ratio à toute taille.
   ---------------------------------------------------------- */
#header .logo img,
#header .logo svg,
.mobile-logo img,
.mobile-logo svg {
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Le conteneur du logo ne doit jamais être compressé par le nav */
#header .navbar-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Sous 400px, on laisse le logo rétrécir en hauteur plutôt que
   déborder — le ratio reste correct grâce à width:auto. */
@media (max-width: 400px) {
  #header .logo img,
  #header .logo svg {
    height: 28px !important;
  }
}

/* ----------------------------------------------------------
   22.2 FORMULAIRE CONTACT — pleine largeur sur mobile
   `.col-5`/`.col-7` (spectre) totalisent 100 % : les colonnes
   ne passent JAMAIS à la ligne, donc le formulaire restait à
   58 % de l'écran (~215px sur un mobile de 375px).
   spectre est chargé APRÈS asedg.css : à spécificité égale il
   gagnait, d'où le `!important` ci-dessous.
   ---------------------------------------------------------- */
@media (max-width: 840px) {
  .contact-layout > .column,
  .contact-layout .contact-sidebar,
  .contact-layout .contact-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .contact-layout {
    flex-direction: column;
    gap: 2rem;
  }
}

/* Le bouton d'envoi prend toute la largeur sur petit écran */
@media (max-width: 600px) {
  .contact-form-wrapper {
    padding: 1.5rem 1rem;
  }

  .contact-form-wrapper .buttons {
    justify-content: stretch;
  }

  .contact-form-wrapper .buttons button,
  .contact-form-wrapper .buttons .button {
    width: 100%;
    text-align: center;
  }

  /* Empêche le zoom auto iOS (déclenché sous 16px) */
  .contact-form-wrapper input,
  .contact-form-wrapper textarea,
  .contact-form-wrapper select {
    font-size: 16px;
  }
}

/* ----------------------------------------------------------
   22.3 PROJETS — nouveau gabarit (contenu libre + colonnes)
   ---------------------------------------------------------- */
.modular-projet .projet-title {
  color: var(--red);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.modular-projet .projet-body {
  color: var(--navy);
  line-height: 1.7;
}

.modular-projet .projet-body > *:last-child {
  margin-bottom: 0;
}

/* Colonnes en flex, réparties à parts égales, repli sur mobile */
.modular-projet .projet-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.modular-projet .projet-col {
  flex: 1 1 240px;
  min-width: 0;
}

.modular-projet .projet-col h3 {
  color: var(--red);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.modular-projet .projet-col ul {
  margin: 0;
  padding-left: 1.1rem;
}

.modular-projet .projet-col li {
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.modular-projet .projet-col > *:last-child {
  margin-bottom: 0;
}

/* Boutons du module : espacement au-dessus */
.modular-projet [role="group"] {
  margin-top: 2rem;
}

/* Variante « encadré rouge » */
.modular-projet.frame .projet-card {
  border: 3px solid var(--red);
  border-radius: var(--radius-card);
  padding: 2rem;
}

@media (max-width: 840px) {
  .modular-projet .projet-columns {
    flex-direction: column;
    gap: 1.25rem;
  }
}

/* ============================================================
   23. LISIBILITE EN NAVIGATION « THEME SOMBRE »
   ------------------------------------------------------------
   Certains navigateurs mobiles (Chrome Android « Auto Dark
   Theme », navigateurs axes vie privee) inversent eux-memes les
   couleurs des sites qui ne declarent aucune preference. Cette
   inversion algorithmique cassait le header et le menu, dont les
   couleurs sont codees en dur dans theme.css (#fff / #454d5d).

   `only light` indique au navigateur que le site est concu pour
   un fond clair : il cesse d'inverser et affiche la charte telle
   quelle. Le site reste identique pour tout le monde — c'est
   precisement le but : rester lisible, pas devenir sombre.
   ============================================================ */

:root {
  color-scheme: only light;
}

.dropmenu ul ul {
  visibility: visible !important;
}