/*

Theme Name: HAD Theme

Description: Thème sur-mesure pour HAD Sud Alsace

Author: Alsace Informatique

Version: 1.0.0

Text Domain: had-theme

*/



/* =================================================

    BASE 

   ================================================= */

html,

body {

  scroll-behavior: smooth;

  width: 100%;

  max-width: 100%;

}



:root {

  --primary-color: #159a94;

  --primary-hover: #117d78;

  --secondary-color: #e1f3f3;

  --text-color: #374151;

  --text-light: #6b7280;

  --bg-color: #ffffff;

  --bg-light: #f3f4f6;

  --white: #ffffff;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08);

  --section-spacing-top: clamp(1.75rem, 3vw, 2.75rem);

  --section-spacing-bottom: clamp(2.25rem, 4vw, 3.5rem);

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  color: var(--text-color);

  background-color: var(--bg-color);

  line-height: 1.6;

  font-family: "Inter", sans-serif;

  overflow-x: hidden;

  width: 100%;

}



main {

  overflow-x: hidden;

  width: 100%;

}



h1,

h2,

h3,

.logo,

.btn,

.card-btn,

.nav-cta,

.nav-contact {

  font-family: "Montserrat", sans-serif;

  overflow-wrap: break-word;

}



.bg-light {

  background-color: var(--bg-light);

}



/* =================================================

   HEADER / BANDEAU

   ================================================= */

header {

  background-color: var(--white);

  position: sticky;

  top: 0;

  z-index: 1100;

}



.badge {

  padding: 0.2rem 0.6rem;

  border-radius: 20px;

  color: var(--white);

  font-weight: 700;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  flex-shrink: 0;

}



.badge-red {

  background-color: #a92320;

}



.badge-green {

  background-color: #2fad66;

}



/* =================================================

   NAVIGATION

   ================================================= */

nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 2rem 15px 2rem;

  width: 100%;

  max-width: none;

  margin: 0;

  position: relative;

  background-color: var(--white);

  box-shadow: var(--shadow-sm);

}



.logo {

  display: flex;

  align-items: center;

  text-decoration: none;

  height: 100%;

}



.logo img {

  display: block;

  height: 70px;

  width: auto;

}



nav ul {

  display: flex;

  list-style: none;

  gap: clamp(1rem, 1.5vw, 2.2rem);

  align-items: center;

}



nav a {

  text-decoration: none;

  color: var(--text-color);

  font-weight: 500;

  font-size: 0.95rem;

  transition: all 0.3s;

  white-space: nowrap;

}



nav ul a {

  position: relative;

}



nav

  ul

  a:not(.nav-contact):not(.nav-cta):not(.nav-cta-green):not(.nav-cta-red):not(

    .nav-cta-support

  )::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -5px;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, var(--primary-color), #2fad66);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.25s ease;

}



nav

  ul

  a:not(.nav-contact):not(.nav-cta):not(.nav-cta-green):not(

    .nav-cta-red

  ):hover::after {

  transform: scaleX(1);

}



nav a:hover {

  color: var(--primary-color);

}



.nav-contact {

  background-color: #374151;

  color: var(--white);

  padding: 0.5rem 1.2rem;

  border-radius: 20px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



.nav-contact:hover {

  background-color: #1f2937;

  color: var(--white);

}



.nav-cta {

  color: var(--primary-color);

  font-weight: 600;

  border: 2px solid var(--primary-color);

  padding: 0.5rem 1.2rem;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



.nav-cta-green {

  color: #2fad66;

  font-weight: 600;

  border: 2px solid #2fad66;

  padding: 0.5rem 1.2rem;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



.nav-cta-red {

  color: #a92320;

  font-weight: 600;

  border: 2px solid #a92320;

  padding: 0.5rem 1.2rem;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



nav a.nav-cta-green:hover {

  background-color: #2fad66;

  color: var(--white);

}



nav a.nav-cta-red:hover {

  background-color: #a92320;

  color: var(--white);

}



nav a.nav-cta:hover {

  background-color: var(--primary-color);

  color: var(--white);

}



.menu-checkbox {

  display: none;

}



.menu-icon {

  display: none;

  font-size: 2rem;

  color: var(--primary-color);

  cursor: pointer;

  user-select: none;

}

/* ==========================================
   Badge HAS
========================================== */

.has-badge {
    position: fixed;
    top: 87%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 999;
}

.has-badge img {
    width: 125px;
    height: auto;
    display: block;

    border-top-left-radius: 0;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform .25s ease, box-shadow .25s ease;
}

.has-badge:hover img {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

@media (max-width: 1200px) {
    .has-badge {
        top: 65%;
        right: 12px;
    }

    .has-badge img {
        width: 105px;
    }
}

@media (max-width: 768px) {
    .has-badge {
        display: none;
    }
}


/* =================================================

   HERO / BANNIERE PRINCIPALE

   ================================================= */

.hero-banner {

  position: relative;

  background: var(--secondary-color);

  padding: 0;

  max-width: none;

  width: 100%;

  margin: 0;

  overflow: hidden;

}



.hero-content {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 1400px;

  margin: auto;

  padding: 0 2%;

  display: flex;

  align-items: center;

  justify-content: flex-start;

}



.hero-text {

  max-width: 600px;

  position: relative;

  z-index: 2;

  padding: 4rem 0;

  margin-left: -4rem;

  min-height: 600px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.hero-text h1 {

  font-size: 60px;

  color: #1c8f87;

  margin-bottom: 25px;

  line-height: 1.1;

}



.hero-text p {

  font-size: 20px;

  line-height: 1.6;

  margin-bottom: 30px;

}



.hero-image {

  position: absolute;

  right: 0;

  top: 0;

  height: 100%;

  width: 50%;

  z-index: 0;

}

/* =================================================

version de base


.hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: left center;

  display: block;

  -webkit-mask-image: linear-gradient(

    to left,

    rgba(0, 0, 0, 1) 68%,

    rgba(0, 0, 0, 0) 100%

  );

  mask-image: linear-gradient(

    to left,

    rgba(0, 0, 0, 1) 68%,

    rgba(0, 0, 0, 0) 100%

  );

}

   ================================================= */


   .hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: left 42%;

  display: block;

  -webkit-mask-image: linear-gradient(

    to left,

    rgba(0, 0, 0, 1) 68%,

    rgba(0, 0, 0, 0) 100%

  );

  mask-image: linear-gradient(

    to left,

    rgba(0, 0, 0, 1) 68%,

    rgba(0, 0, 0, 0) 100%

  );

}


.hero-actions {

  display: flex;

  gap: 1rem;

}



.hero-actions .btn {

  margin-left: 0;

}



/* =================================

   HERO PAGE ACTIVITES

================================= */



.page-activites .activites-hero {

  width: 100%;

  max-width: 100%;

  margin: 0;

  padding: 0;

  background: var(--secondary-color);

}



.page-activites .activites-hero-content {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 6.5rem 5%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.page-activites .activites-hero-text {

  width: 100%;

  max-width: 1000px;

  margin: 0 auto;

  text-align: center;

}



.page-activites .activites-hero-text h1 {

  color: var(--primary-color);

  font-size: 4.4rem;

  line-height: 1.1;

  margin: 0 0 1rem 0;

}



.page-activites .activites-hero-text p {

  font-size: 1.15rem;

  line-height: 1.7;

  margin: 0;

  color: var(--text-color);

}



/* =================================================

   SECTIONS

   ================================================= */

section {

  padding: var(--section-spacing-top) 5% var(--section-spacing-bottom);

  max-width: 1400px;

  margin: 0 auto;

}



.page-activites section {

  padding: 1.5rem 5%;

  scroll-margin-top: 140px;

}

.page-activites #suivi ul{
  text-align: left;
  color: #4f5b66;
  padding-left: 1.2rem;
}

section.bg-light {

  max-width: 100%;

  padding-left: 5%;

  padding-right: 5%;

}



section.bg-light > * {

  max-width: 1260px;

  margin-left: auto;

  margin-right: auto;

}



h2 {

  color: var(--primary-color);

  font-size: 2.2rem;

  margin-bottom: 3rem;

  text-align: center;

  position: relative;

}



h2::after {

  content: "";

  display: block;

  width: 60px;

  height: 4px;

  background: var(--primary-color);

  margin: 16px auto 0;

  border-radius: 2px;

}



/* =================================================

   Page Activité et soins 

   ================================================= */



.about {

  display: flex;

  align-items: center;

  gap: 5rem;

  padding: var(--section-spacing-top) 5% var(--section-spacing-bottom);

}



.about.row-reverse {

  flex-direction: row-reverse;

}



.about-text {

  flex: 1;

}



.about-text h2 {

  text-align: left;

  margin-bottom: 1.5rem;

}



.about-text h2::after {

  margin-left: 0;

  margin-right: 0;

}



.about-text p {

  font-size: 1.05rem;

  line-height: 1.8;

  max-width: 60ch;

  color: #4f5b66;

}



.about-image {

  flex: 1;

  display: flex;

  justify-content: flex-end;

}



.about-image img {

  width: 100%;

  max-width: 560px;

  height: auto;

  display: block;

  border-radius: 22px;

  object-fit: cover;

}



/* =================================================

   CARTES / TUILES

   ================================================= */

#activites h2{
  margin-bottom: 1.5rem!important;
}

#activites .text-activ-soins{
  margin-bottom: 1.5rem!important;
}

#activites .text-activ-soins p{
  text-align: center;
}


#activites .grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

/* En dessous de 1300 px : 4 colonnes */
@media (max-width: 1300px) {
    #activites .grid-container {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Avant-dernière carte */
    #activites .grid-container > :nth-last-child(2) {
        grid-column: 2;
    }

    /* Dernière carte */
    #activites .grid-container > :last-child {
        grid-column: 3;
    }
}

/* Tablette : 2 colonnes normales */
@media (max-width: 930px) {
    #activites .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #activites .grid-container > :nth-last-child(2),
    #activites .grid-container > :last-child {
        grid-column: span 1;
    }
}

/* Mobile : 1 colonne */
@media (max-width: 480px) {
    #activites .grid-container {
        grid-template-columns: 1fr;
    }
}


.tile {

  width: 100%;

  min-height: 220px;

  background: var(--white);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: var(--shadow-md);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  text-decoration: none;

  color: inherit;

  display: block;

}



.tile:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

}



.tile-img {

  height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.tile-img img {

  max-width: 90%;

  max-height: 100%;

}



.tile img {

  transition: transform 0.3s ease;

}



.tile:hover img {

  transform: scale(1.05);

}



.tile h3 {

  padding: 1.2rem;

  text-align: center;

  font-size: 1.05rem;

  color: var(--text-color);

}



/* =================================================

   BOUTONS/CARD

   ================================================= */



.btn {

  display: inline-block;

  background-color: var(--primary-color);

  color: var(--white);

  padding: 1rem 2.5rem;

  text-decoration: none;

  border-radius: 50px;

  font-weight: 600;

  font-size: 1rem;

  transition: all 0.3s ease;

  border: 2px solid var(--primary-color);

}



.btn:hover {

  background-color: var(--primary-hover);

  border-color: var(--primary-hover);

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

}



.btn-blue {

  background-color: #003a9b;

  color: var(--white);

  border-color: #003a9b;

}



.btn-blue:hover {

  background-color: #002b74;

  border-color: #002b74;

}



.target-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

}



.target-card {

  background: var(--white);

  border-radius: 20px;

  padding: 3rem 2rem;

  text-align: center;

  text-decoration: none;

  color: var(--text-color);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  box-shadow: var(--shadow-md);

  transition: all 0.3s ease;

  border-top: 4px solid transparent;

}



.target-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);

  border-top: 4px solid var(--primary-color);

}



.target-icon {

  width: 120px;

  height: 120px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

}



.target-icon img {

  width: 100%;

  display: block;

  transition: transform 0.3s ease;

}



.target-card:hover .target-icon img {

  transform: scale(1.1);

}



.target-card h3 {

  color: var(--primary-color);

  font-size: 1.3rem;

  margin-bottom: 1rem;

}



.target-card p {

  font-size: 1rem;

  color: var(--text-light);

  margin-bottom: 2rem;

  flex-grow: 1;

}



.card-btn {

  background: var(--primary-color);

  color: var(--white);

  padding: 0.7rem 1.6rem;

  border-radius: 30px;

  font-weight: 600;

  font-size: 1rem;

  transition: all 0.3s ease;

}



.target-card:hover .card-btn {

  transform: translateY(-2px);

}



#publics h2 {

  position: relative;

  margin-bottom: 3rem;

}



#publics h2::after {

  content: "";

  display: block;

  width: 60px;

  height: 4px;

  background: var(--primary-color);

  margin: 12px auto 0;

  border-radius: 2px;

  transform: translateX(5px);

}



/* =================================================

   PAGE PATIENTS ET AIDANT

   ================================================= */

.page-menu {

  max-width: 1100px;

  margin: 2rem auto;

  padding: 0.5rem;



  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 4rem;



  background: var(--secondary-color);

  border-radius: 30px;

}



.page-menu a {

  text-decoration: none;

  color: var(--primary-color);



  padding: 0.5rem 1.2rem;

  border-radius: 20px;



  font-size: 1.3rem;

  font-weight: 500;



  transition: all 0.3s ease;

}



.page-menu a:hover {

  background: var(--primary-color);

  color: white;

}



.parcours-section {

  padding: 4rem 5%;

}



.parcours {

  position: relative;

  max-width: 800px;

  margin: 3rem auto;

}


.parcours ul{
  padding-left: 1.2rem;
}


.parcours::before {

  content: "";

  position: absolute;

  left: 15px;

  top: 0;

  width: 3px;

  height: 100%;

  background: var(--primary-color);

  opacity: 0.2;

}



.etape {

  display: flex;

  align-items: flex-start;

  gap: 1.5rem;

  margin-bottom: 2.5rem;

  position: relative;

}



.point {

  width: 30px;

  height: 30px;

  background: var(--primary-color);

  border-radius: 50%;

  flex-shrink: 0;

  position: relative;

  z-index: 2;

}



.contenu {

  background: var(--white);

  padding: 1.5rem;

  border-radius: 16px;

  box-shadow: var(--shadow-sm);

  flex: 1;

}



.contenu h3 {

  color: var(--primary-color);

  margin-bottom: 0.5rem;

  font-size: 1.2rem;

}



.contenu p {

  color: var(--text-color);

  line-height: 1.6;

}



.section-intro {

  max-width: 800px;

  margin: 0 auto 2rem;

  text-align: center;

  color: var(--text-light);

  font-size: 1.05rem;

  line-height: 1.7;

}



.medicaments-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;



  max-width: 1100px;

  margin: 0 auto;

  padding: 0 1rem;

}



.med-card {

  background: var(--white);

  border-radius: 18px;

  padding: 1.5rem;

  box-shadow: var(--shadow-md);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  background: var(--secondary-color);

}



.med-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



.med-card h3 {

  color: var(--primary-color);

  margin-bottom: 0.8rem;

  font-size: 1.2rem;

}



.med-card p {

  color: var(--text-color);

  line-height: 1.6;

  font-size: 1rem;

}



.droits-section {

  padding: 4rem 5%;

}



.droits-container {

  max-width: 900px;

  margin: 2rem auto 0;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.droit-card {

  background: var(--white);

  padding: 1.8rem;

  border-radius: 16px;

  box-shadow: var(--shadow-sm);

  border-left: 5px solid var(--primary-color);

  transition: all 0.3s ease;

}

.droit-card .btn{
padding: 1rem 2rem;
margin-top: 0.8rem!important;
    font-size: 0.8rem;
}



.droit-card:hover {

  transform: translateX(5px);

  box-shadow: var(--shadow-md);

}



.droit-card h3 {

  color: var(--primary-color);

  margin-bottom: 0.8rem;

  font-size: 1.2rem;

}



.droit-card p {

  color: var(--text-color);

  line-height: 1.6;

  font-size: 1rem;

}



.directives {

  margin-top: 1.5rem;

  padding: 1rem 1.2rem;



  background: #e8f5f4;

  border-left: 4px solid var(--primary-color);



  border-radius: 12px;



  font-size: 0.95rem;

  line-height: 1.6;

}



.section-intro {

  max-width: 800px;

  margin: 0 auto;

  text-align: center;

  color: var(--text-light);

  line-height: 1.7;

}



.aidant-section {

  padding: 4rem 5%;

}



.aidant-card {

  max-width: 1100px;

  margin: 2rem auto 0;

  display: flex;

  /*align-items: center;*/

  gap: 2rem;



  background: #f0f9f8;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: var(--shadow-sm);

}



.aidant-image {

  flex: 1;

}



.aidant-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;



  -webkit-mask-image: linear-gradient(

    to right,

    rgba(0, 0, 0, 1) 70%,

    rgba(0, 0, 0, 0.6) 85%,

    rgba(0, 0, 0, 0) 100%

  );



  mask-image: linear-gradient(

    to right,

    rgba(0, 0, 0, 1) 70%,

    rgba(0, 0, 0, 0.6) 85%,

    rgba(0, 0, 0, 0) 100%

  );

}



.aidant-content {

  flex: 1;

  padding: 2rem;

}



.aidant-content .intro {

  margin-bottom: 1rem;

  font-weight: 500;

}



.aidant-content ul {

  padding-left: 1.2rem;

  margin-bottom: 1rem;

}



.aidant-content li {

  line-height: 1.6;

}



.reclamation-section {

  padding: 3rem 5%;

}



.reclamation-card {

  max-width: 800px;

  margin: 0 auto;



  background: #f0f9f8;

  border-radius: 20px;

  padding: 2.5rem;



  text-align: center;



  box-shadow: var(--shadow-md);

}



.reclamation-card h3 {

  color: var(--primary-color);

  margin-bottom: 1rem;

}



.reclamation-card p {

  color: var(--text-color);

  margin-bottom: 1rem;

  line-height: 1.6;

  text-align: left;

}



/* =================================================

   CARROUSEL PARTENAIRES

   ================================================= */



.partners-wrapper {

  overflow: hidden;

  width: 75vw;

  left: 50%;

  transform: translateX(-50%);

  position: relative;

  padding: 2rem 0;

  -webkit-mask-image: linear-gradient(

    to right,

    transparent,

    black 15%,

    black 85%,

    transparent

  );

  mask-image: linear-gradient(

    to right,

    transparent,

    black 15%,

    black 85%,

    transparent

  );

}



.partners-track {

  display: flex;

  width: max-content;

  animation: marquee 35s linear infinite;

}



.partners-track:hover {

  animation-play-state: paused;

}



.partners-group {

  display: flex;

  align-items: center;

  gap: 4rem;

  padding-right: 4rem;

}



.partner-logo {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

}



.partner-logo:hover {

  transform: scale(1.05);

}



.partner-logo img {

  max-width: 150px;

  height: auto;

  object-fit: contain;

}



@keyframes marquee {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



/* =================================================

   FOOTER



footer {

  background-color: var(--text-color);

  color: var(--bg-light);

  padding: 4rem 5% 1.5rem;

}



.footer-content {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr)

    minmax(0, 1fr) minmax(0, 1fr);

  column-gap: clamp(1.6rem, 2.6vw, 3rem);

  row-gap: 1.8rem;

  max-width: 1400px;

  margin: 0 auto;

  align-items: start;

}



.footer-col {

  min-width: 0;

}



.footer-col h3 {

  color: var(--white);

  font-size: 1.1rem;

  margin-bottom: 1.2rem;

}



.footer-col p {

  font-size: 0.95rem;

  line-height: 1.8;

}



.footer-address {

  display: flex;

  align-items: flex-start;

  gap: 8px;

}



.footer-address .footer-address-icon {

  flex-shrink: 0;

  margin-left: -26px;

  margin-top: 4px;

}



.footer-address .footer-address-text {

  display: inline-block;

}



.footer-col a {

  color: var(--bg-light);

  text-decoration: none;

  transition: color 0.2s;

  display: block;

}



.footer-col a:hover {

  color: var(--primary-color);

  text-decoration: underline;

}



.footer-bottom {

  text-align: center;

  margin-top: 4rem;

  padding-top: 1.5rem;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  font-size: 0.9rem;

  color: #9ca3af;

}



.footer-bottom a {

  color: #9ca3af;

}



.footer-bottom a:hover {

  color: var(--white);

}



.footer-col a.btn:hover {

  color: var(--white);

  text-decoration: none;

}



.footer-contact {

  display: block;

}



.footer-contact-phone {

  display: flex;

  align-items: center;

  gap: 8px;

}



.footer-contact-icon {

  width: 18px;

  height: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-left: -26px;

}



.footer-contact-number {

  display: inline-block;

}



.footer-contact-btn {

  padding: 0.5rem 1.2rem;

  font-size: 0.9rem;

  margin-left: -1.2rem;

  margin-top: 0.8rem;

}


 ================================================= */

/* =================================================
   NOUVEAU FOOTER
================================================= */

.site-footer {
  background: var(--text-color, #263746);
  color: #fff;
  padding: 3.5rem 5% 1.5rem;
}

.footer-inner {
  width: min(1400px, 100%);
  margin: 0 auto;
}

.footer-sector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);

    margin-bottom: 3.5rem;
    padding: clamp(1.75rem, 3vw, 2.6rem)
             clamp(1.5rem, 3vw, 3rem);

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 22px;

    background: linear-gradient(135deg, #0b6764 0%, #0b837d 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .18);
}


.footer-sector__content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-sector__icon {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-sector__icon svg {
    width: 38px;
    height: 38px;
    color: var(--primary-color);
}

.footer-sector__text h2 {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: clamp(1.6rem, 2vw, 2rem);
}

.footer-sector__text p {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

.footer-sector__button {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    padding: 1rem 1.8rem;

    border-radius: 999px;
    background: #fff;
    color: var(--primary-color);

    text-decoration: none;
    font-weight: 600;

    transition: .3s ease;
}

.footer-sector__button svg {
    width: 20px;
    height: 20px;
}

.footer-sector__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}


.site-footer .footer-content {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(230px, 1.2fr) minmax(220px, 1fr) minmax(180px, .8fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  max-width: none;
  margin: 0;
}

.site-footer .footer-logo {
  display: block;
  max-height: 90px;
  margin-bottom: 1rem;
}

.site-footer .footer-col h3 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 1.1rem;
}

.site-footer .footer-col p,
.site-footer .footer-col a {
  font-size: .95rem;
  line-height: 1.65;
}

.site-footer .footer-col a {
  color: rgba(255,255,255,.9);
  text-decoration: none;
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-address,
.footer-phone {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.footer-phone {
  align-items: center;
  width: fit-content;
  margin-bottom: 1rem;
  font-weight: 700;
}

.footer-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: .18rem;
  color: #ef5b57;
}

.footer-inline-icon--phone {
  margin-top: 0;
  color: #42c878;
}

.footer-inline-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: var(--primary-color, #0b837d);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: transform .2s ease, filter .2s ease;
}

.footer-contact-button:hover,
.footer-contact-button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.site-footer .social-links {
  display: flex;
  gap: .75rem;
  margin-top: .4rem;
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  transition: transform .2s ease, filter .2s ease;
}

.site-footer .social-links a:hover,
.site-footer .social-links a:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  filter: brightness(1.12);
  text-decoration: none;
}

.site-footer .social-links svg {
  display: block;
  width: 21px;
  height: 21px;
}

.site-footer .social-fb { background: #1877f2; }
.site-footer .social-ig {
  background: radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.site-footer .social-in { background: #0a66c2; }

.site-footer .footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #b8c0c8;
  text-align: center;
  font-size: .88rem;
}

.site-footer .footer-bottom p {
  margin: 0;
}

.site-footer .footer-bottom p + p {
  margin-top: .55rem;
}

.site-footer .footer-bottom a {
  color: #d7dde2;
}

.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible {
  color: #fff;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .7rem;
}

@media (max-width: 1240px) {

  .site-footer .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {

    .footer-sector {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-sector__content {
        flex-direction: column;
    }

    .footer-sector__button {
        justify-self: center;
    }

}


@media (max-width: 770px) {
  .footer-sector__content {
    display: block;
  }

  .site-footer .footer-content {
    grid-template-columns: 1fr;
  }
}

/* --- ESPACE CARRIÈRES & FORMATIONS --- */

.btn-green {

  background-color: #2fad66;

  border-color: #2fad66;

}



.btn-green:hover {

  background-color: #258c52;

  border-color: #258c52;

}



.carrieres-section {

  --carrieres-left-accent: #2fad66;

  --carrieres-formation-accent: #a92320;

  padding: var(--section-spacing-top) 5% var(--section-spacing-bottom);

  background-color: var(--secondary-color);

  max-width: 100%;

  margin: 0;

}



.carrieres-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

  max-width: 1400px;

  margin: 0 auto;

}



.carrieres-text h2 {

  color: var(--carrieres-left-accent);

  text-align: left;

  margin-bottom: 1.5rem;

}



.carrieres-text h2::after {

  background: var(--carrieres-left-accent);

  margin: 16px 0 0 0;

}



.carrieres-intro {

  font-size: 1.15rem;

  color: var(--text-color);

  margin-bottom: 2.5rem;

}



.avantages-list {

  list-style: none;

  margin-bottom: 3rem;

}



.avantages-list li {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1.5rem;

  font-size: 1.05rem;

  color: var(--text-color);

}



.avantages-list li svg {

  flex-shrink: 0;

  margin-top: 2px;

  stroke: var(--carrieres-left-accent);

}



.carrieres-image-wrapper {

  position: relative;

  border-radius: 20px;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  height: 100%;

}



.formation-card {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  right: 0;

  background: #ffffff;

  padding: 3.2rem 3rem;

  border-radius: 24px;

  box-shadow: var(--shadow-lg);

  max-width: 520px;

  border-left: 8px solid var(--carrieres-formation-accent);

  z-index: 2;

}



.formation-icon {

  background-color: var(--carrieres-formation-accent);

  width: 64px;

  height: 64px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

}



.formation-card h3 {

  color: var(--carrieres-formation-accent);

  font-size: 1.8rem;

  margin-bottom: 1rem;

}



.formation-card p {

  color: var(--text-color);

  font-size: 1.05rem;

  margin-bottom: 1.35rem;

  line-height: 1.65;

}



.card-link {

  color: var(--carrieres-formation-accent);

  font-weight: 700;

  text-decoration: none;

  transition: transform 0.3s;

  display: inline-block;

}



.card-link:hover {

  transform: translateX(5px);

}



.btn-red {

  background-color: #a92320;

  border-color: #a92320;

}



.btn-red:hover {

  background-color: #8f1f1d;

  border-color: #8f1f1d;

}



.reveal {

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.8s ease-out;

}



.reveal.reveal-left {

  transform: translateX(-50px);

}



.reveal.reveal-right {

  transform: translateX(50px);

}



.reveal.show {

  opacity: 1;

  transform: translate(0, 0);

}



.social-links {

  display: flex;

  gap: 0.8rem;

  margin-top: 0.5rem;

}



.social-links a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.1);

  color: var(--white);

  transition: all 0.3s ease;

}



.social-links a:hover {

  background-color: var(--primary-color);

  color: var(--white);

  transform: translateY(-3px);

  text-decoration: none;

}



.social-links a.social-fb {

  background-color: #1877f2;

}



.social-links a.social-ig {

  background: linear-gradient(

    45deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

}



.social-links a.social-in {

  background-color: #0a66c2;

}



.social-links a.social-fb:hover {

  background-color: #1877f2;

  filter: brightness(1.15);

}



.social-links a.social-ig:hover {

  background: linear-gradient(

    45deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

  filter: brightness(1.15);

}



.social-links a.social-in:hover {

  background-color: #0a66c2;

  filter: brightness(1.15);

}



/* =================================================

   PAGE CONTACT

   ================================================= */

.contact-hero {

  width: 100%;

  background: linear-gradient(135deg, #e8f5f4 0%, #f7fbfb 100%);

  padding: 4rem 5% 2rem;

  max-width: none;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 3rem;

}



.contact-hero-content {

  max-width: 1400px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 3rem;

}



.contact-hero-text {

  max-width: 600px;

}



.contact-hero-text h1 {

  font-size: 3.5rem;

  color: var(--primary-color);

  margin-bottom: 1rem;

}



.contact-hero-text p {

  font-size: 1.4rem;

  color: var(--text-color);

}



.contact-hero-image {

  flex: 1;

  display: flex;

  justify-content: flex-end;

}



.contact-hero-image img {

  max-width: 520px;

  width: 100%;

}



.contact-section {

  padding: 3rem 5% 4rem;

}



.contact-grid {

  max-width: 1400px;

  margin: auto;

  display: grid;

  grid-template-columns: 1.6fr 0.8fr 1fr;

  gap: 2rem;

  align-items: start;

}



.contact-form-card {

  grid-row: span 2;

}



.contact-info-card {

  border-radius: 30px;

  padding: 1.5rem 2rem;

  text-align:center;

}



.contact-info-card:first-child {

  background: #e8f5f4;

}



.contact-info-card,

.highlight-item {

  transition: all 0.3s ease;

}



.contact-info-card:hover,

.highlight-item:hover {

  transform: translateY(-4px);

  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12);

}



.contact-form-card h2,

.contact-info-card h2 {

  font-size: 1.4rem;

  margin: 0 0 0.5rem;

  line-height: 1.2;

}



.contact-info-card h3 {

  margin: 0.5rem 0 0.3rem;

  font-size: 1.1rem;

}



.contact-info-card p {

  margin: 0 0 0.25rem;

  line-height: 1.5;

}



.contact-info-card p:first-of-type {

  margin-top: 0;

}



.map-card h2,

.callback-text h2 {

  color: var(--primary-color);

  margin-bottom: 1.5rem;

  font-size: 2rem;

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.horaires-card {

  background: #e8f5f4;

}



.contact-form input,

.contact-form select,

.contact-form textarea,

.callback-form input {

  width: 100%;

  padding: 1rem 1.2rem;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  font-size: 1rem;

  font-family: "Inter", sans-serif;

  background: #fff;

}



.contact-form textarea {

  resize: vertical;

  min-height: 140px;

}



.contact-form input[type="file"] {

  padding: 0.8rem;

  background: var(--bg-light);

  cursor: pointer;

}



.contact-info-column {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.contact-info-card .btn {

  text-align: center;

}



.contact-form .btn {

  display: block;

  width: fit-content;

  margin: 0.5rem auto 0 auto;

}



.info-block {

  margin-bottom: 1.2rem;

}



.info-block h3 {

  color: var(--text-color);

  margin-bottom: 0.5rem;

  font-size: 1.2rem;

}



.info-block p {

  color: var(--text-light);

  line-height: 1.8;

  font-size: 1rem;

}



.map-card iframe {

  border-radius: 18px;

  min-height: 420px;

  width: 100%;

}



.map-card .btn {

  display: block;

  width: fit-content;

  margin: 1.5rem auto 0 auto;

}



.btn-outline {

  background: transparent;

  color: var(--primary-color);

  border: 2px solid var(--primary-color);

}



.btn-outline:hover {

  background: var(--primary-color);

  color: var(--white);

}



.callback-section {

  padding: 0 5% 4rem;

}



.callback-content {

  max-width: 1400px;

  margin: 0 auto;

  background: linear-gradient(135deg, #e8f5f4 0%, #f5fbfb 100%);

  border-radius: 24px;

  padding: 2rem 2.5rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 2rem;

}



.callback-text p {

  font-size: 1.15rem;

  color: var(--text-color);

}



.callback-form {

  display: flex;

  gap: 1rem;

  flex: 1;

  max-width: 600px;

}



.contact-highlights {

  max-width: 1400px;

  margin: 0 auto 4rem;

  padding: 0 5%;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

}



.highlight-item {

  background: var(--white);

  border-radius: 20px;

  box-shadow: var(--shadow-sm);

  padding: 1.5rem;

  text-align: center;

}



.highlight-item h3 {

  color: var(--text-color);

  font-size: 1.1rem;

}



.form-row {

  display: flex;

  gap: 1rem;

}



.form-row input {

  flex: 1;

}



@media (max-width: 768px) {

  .form-row {

    flex-direction: column;

  }

}



.file-drop-area {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  border: 2px dashed var(--primary-color);

  border-radius: 14px;

  background-color: var(--secondary-color);

  transition: background-color 0.3s ease;

  cursor: pointer;

}



.file-drop-area:hover {

  background-color: #d0efef;

}



.file-msg {

  font-size: 1rem;

  font-weight: 500;

  color: var(--primary-color);

}



/* =================================================

   CORRECTION ZONE DE TÉLÉCHARGEMENT CF7

   ================================================= */

.file-drop-area .wpcf7-form-control-wrap {

  position: absolute !important;

  top: 0;

  left: 0;

  width: 100% !important;

  height: 100% !important;

  z-index: 10;

}



#cv-upload {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  cursor: pointer;

  z-index: 10;

}



#file-list {

  margin-top: 1rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.file-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: var(--bg-light);

  padding: 0.7rem 1rem;

  border-radius: 8px;

  font-size: 0.9rem;

  border: 1px solid #d1d5db;

}



.file-remove {

  cursor: pointer;

  color: #a92320;

  font-weight: bold;

  font-size: 1.2rem;

  padding: 0 0.5rem;

}



.upload-error {

  color: #a92320;

  font-size: 0.9rem;

  font-weight: 500;

  margin-top: 0.5rem;

  min-height: 1.2rem;

}



/* Champ de honeypot pour bots */

.hp-field {

  opacity: 0;

  position: absolute;

  top: 0;

  left: 0;

  height: 0;

  width: 0;

  z-index: -1;

}



/* =================================================

   PAGE RECRUTEMENT

   ================================================= */



.benefits-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));

  gap: 2rem;

  margin-top: 3rem;

}



.benefit-card {

  background: var(--white);

  border-radius: 16px;

  padding: 2.5rem 2rem;

  box-shadow: var(--shadow-md);

  border-top: 4px solid var(--primary-color);

}



.benefit-card.green {

  border-color: #2fad66;

}



.benefit-card.red {

  border-color: #a92320;

}



.benefit-list li::before {

  content: "•";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--primary-color);

  font-weight: bold;

  font-size: 1.2rem;

}



.benefit-card.green .benefit-list li::before {

  color: #2fad66;

}



.benefit-card.red .benefit-list li::before {

  color: #a92320;

}



.benefit-card h3 {

  font-size: 1.25rem;

  margin-bottom: 1.5rem;

  color: var(--text-color);

  display: flex;

  align-items: center;

  gap: 10px;

}



.benefit-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.benefit-list li {

  position: relative;

  padding-left: 20px;

  margin-bottom: 0.8rem;

  font-size: 0.95rem;

  color: var(--text-color);

  line-height: 1.5;

}



.benefit-list li::before {

  content: "•";

  position: absolute;

  left: 0;

  top: 0;

  color: var(--primary-color);

  font-weight: bold;

  font-size: 1.2rem;

}



.benefit-card.red .benefit-list li::before {

  color: #a92320;

}



.benefit-card.green .benefit-list li::before {

  color: #2fad66;

}



.benefit-card.orange .benefit-list li::before {

  color: #f59e0b;

}



.benefit-card.blue {

  border-color: var(--primary-color);

}



.benefit-card.blue .benefit-list li::before {

  color: var(--primary-color);

}



.custom-details {

  background: var(--bg-light);

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  margin-bottom: 1rem;

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:

    box-shadow 0.3s ease,

    border-color 0.3s ease;

}



.custom-details:hover {

  box-shadow: var(--shadow-md);

  border-color: #d1d5db;

}



.custom-details summary {

  padding: 1.2rem 1.5rem;

  font-weight: 600;

  font-size: 1.1rem;

  color: var(--primary-color);

  cursor: pointer;

  list-style: none;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: "Montserrat", sans-serif;

}



.custom-details summary::-webkit-details-marker {

  display: none;

}



.custom-details summary::after {

  content: "+";

  font-size: 1.5rem;

  color: var(--primary-color);

  transition: transform 0.3s ease;

}



.custom-details[open] summary::after {

  transform: rotate(45deg);

}



.details-content {

  background: var(--white);

  padding: 1.5rem;

  border-top: 1px solid #e5e7eb;

}



.details-content ul {

  list-style-type: none;

  padding-left: 0;

  margin: 0;

}



.details-content li {

  position: relative;

  padding-left: 20px;

  margin-bottom: 0.6rem;

  font-size: 0.95rem;

  color: var(--text-color);

  line-height: 1.5;

}



.details-content li:last-child {

  margin-bottom: 0;

}



.details-content li::before {

  content: "•";

  position: absolute;

  left: 0;

  color: var(--primary-color);

  font-weight: bold;

  font-size: 1.2rem;

  top: -2px;

}



/* =================================================

   PAGE PROFESSIONNELS & PARTENAIRES

   ================================================= */


.section-intro-intervenant{
  display: flex;
    justify-content: center;
    padding-top: 0.8rem;
}



.pdf-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.pdf-list li {

  padding-left: 0 !important;

}



.pdf-list li::before {

  display: none;

}



.pdf-link {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0.8rem 0;

  color: var(--text-color);

  text-decoration: none;

  border-bottom: 1px solid #f3f4f6;

  transition:

    color 0.2s ease,

    padding-left 0.3s ease;

  font-weight: 500;

}



.pdf-list li:last-child .pdf-link {

  border-bottom: none;

}



.pdf-link:hover {

  color: var(--primary-color);

  padding-left: 8px;

}



.pdf-icon {

  color: #a92320;

  flex-shrink: 0;

}



.flex-center {

  display: flex !important;

  justify-content: center;

  flex-wrap: wrap;

  gap: 2.5rem;

}



.flex-center .target-card {

  flex: 1;

  max-width: 450px;

  width: 100%;

}



@media (max-width: 1200px) {

  .flex-center .target-card {

    max-width: 500px;

  }

}



/* POUR LA REDIRECTION PROPRE VERS LE FORMULAIRE DE CONTACT POUR DEMANDER LE CATALOGUE DE FORMATIONS*/

#contact-form {

  scroll-margin-top: 300px;

}



.partner-section {

  max-width: 1200px;

  margin: 0 auto;

  gap: 6rem;

}



.partner-section .about-text,

.partner-section .about-image {

  flex: 1;

}



.partner-section .about-image {

  display: flex;

  justify-content: center;

  align-items: center;

}



.partner-section .about-image img {

  width: auto;

  max-width: 280px;

  height: auto;

  border-radius: 0;

  object-fit: unset;

}



/* =================================================

   PAGE FORMATIONS

   ================================================= */

.btn-outline-red {

  background: transparent;

  color: #a92320;

  border: 2px solid #a92320;

}



.btn-outline-red:hover {

  background-color: #a92320 !important;

  border-color: #a92320 !important;

  color: var(--white) !important;

}



.formation-grid {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  max-width: 1000px;

  margin: 0 auto;

}



.formation-item {

  display: flex;

  background: var(--white);

  border-radius: 16px;

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  border: 1px solid #e5e7eb;

}



.formation-item:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-md);

  border-color: #fca5a5;

}



.formation-date-badge {

  background-color: #a92320;

  color: var(--white);

  min-width: 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

}



.formation-date-badge .day {

  font-size: 2.8rem;

  font-weight: 700;

  line-height: 1;

  font-family: "Montserrat", sans-serif;

}



.formation-date-badge .month {

  font-size: 1.2rem;

  font-weight: 600;

  letter-spacing: 2px;

}



.formation-content {

  padding: 2rem;

  flex-grow: 1;

}



.formation-tags {

  margin-bottom: 0.8rem;

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.tag {

  font-size: 0.75rem;

  font-weight: 600;

  padding: 0.3rem 0.8rem;

  border-radius: 20px;

  text-transform: uppercase;

}



.tag-inf {

  background-color: #eaf7f0;

  color: #2fad66;

}



.tag-med {

  background-color: var(--secondary-color);

  color: var(--primary-color);

}



.formation-content h3 {

  font-size: 1.4rem;

  color: var(--text-color);

  margin-bottom: 0.8rem;

}



.formation-content p {

  color: var(--text-light);

  font-size: 0.95rem;

  margin-bottom: 1.5rem;

}



.formation-meta {

  display: flex;

  gap: 1.5rem;

  color: #4b5563;

  font-weight: 500;

  font-size: 0.9rem;

}



.formation-meta span {

  display: flex;

  align-items: center;

  gap: 6px;

}



.formation-action {

  display: flex;

  align-items: center;

  padding: 2rem;

  background-color: #f9fafb;

  border-left: 1px solid #e5e7eb;

}



#agenda h2::after,

#inscription h2::after {

  background: #a92320 !important;

}



#prescription h2::after {

  display: none;

}



.prescription-grid {

  display: flex;

justify-content: center;

}



.presc-card {

  background: var(--white);

  border-radius: 12px;

  padding: 1.5rem;

  display: flex;

  align-items: center;

  gap: 15px;

  text-decoration: none;

  color: var(--text-color);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.presc-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);

}



.presc-icon {

  background: #fbe8e8;

  color: #a92320;

  width: 48px;

  height: 48px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition:

    background 0.3s ease,

    color 0.3s ease;

}



.presc-card:hover .presc-icon {

  background: #a92320;

  color: var(--white);

}



.presc-text {

  display: flex;

  flex-direction: column;

}



.presc-text h4 {

  font-size: 1.05rem;

  margin-bottom: 0.2rem;

  color: var(--primary-color);

  font-family: "Inter", sans-serif;

  font-weight: 700;

}



.presc-text span {

  font-size: 0.85rem;

  color: var(--text-light);

}



/* =================================================

   PAGE ACTUALITÉS

   ================================================= */

  .hero-content .social-links {

  display: flex;

  gap: 0.8rem;

  margin-top: 0.5rem;

}



.hero-content .social-links a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background-color: rgba(255, 255, 255, 0.1);

  color: var(--white);

  transition: all 0.3s ease;

}



.hero-content .social-links a:hover {

  background-color: var(--primary-color);

  color: var(--white);

  transform: translateY(-3px);

  text-decoration: none;

}



.hero-content .social-links a.social-fb {

  background-color: #1877f2;

}



.hero-content .social-links a.social-ig {

  background: linear-gradient(

    45deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

}



.hero-content .social-links a.social-in {

  background-color: #0a66c2;

}



.hero-content .social-links a.social-fb:hover {

  background-color: #1877f2;

  filter: brightness(1.15);

}



.hero-content .social-links a.social-ig:hover {

  background: linear-gradient(

    45deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

  filter: brightness(1.15);

}



.hero-content .social-links a.social-in:hover {

  background-color: #0a66c2;

  filter: brightness(1.15);

}

.news-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));

  grid-auto-rows: 1fr;

  gap: 2.5rem;

  max-width: 1400px;

  margin: 0 auto;

}



.news-card {

  background: var(--white);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition:

    transform 0.8s ease,

    box-shadow 0.8s ease;

  display: flex;

  flex-direction: column;

  border: 1px solid #e5e7eb;

  text-decoration: none;

  height: 100%;

}



.news-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-lg);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

}



.news-image {

  height: 220px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.news-category {

  position: absolute;

  top: 15px;

  left: 15px;

  background: var(--primary-color);

  color: var(--white);

  padding: 5px 14px;

  border-radius: 20px;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;

}



.news-content {

  padding: 2rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.news-date {

  font-size: 0.85rem;

  color: var(--text-light);

  margin-bottom: 1rem;

  display: flex;

  align-items: center;

  gap: 6px;

  font-weight: 500;

}



.news-content h3 {

  font-size: 1.3rem;

  color: var(--text-color);

  margin-bottom: 1rem;

  line-height: 1.4;

  font-family: "Montserrat", sans-serif;

}



.news-content p {

  color: var(--text-light);

  font-size: 0.95rem;

  margin-bottom: 1.5rem;

  flex-grow: 1;

}



.news-link {

  color: var(--primary-color);

  font-weight: 600;

  text-decoration: none;

  display: inline-block;

  transition:

    color 0.3s ease,

    transform 0.3s ease;

}



.news-card:hover .news-link {

  color: var(--primary-hover);

  transform: translateX(5px);

}



.pagination {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 4rem;

}



.page-link,

.page-numbers {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 40px;

  height: 40px;

  padding: 0 15px;

  border-radius: 8px;

  background: var(--white);

  color: var(--text-color);

  text-decoration: none;

  font-weight: 600;

  border: 1px solid #e5e7eb;

  transition: all 0.3s ease;

}



.page-link:hover,

a.page-numbers:hover {

  background: var(--bg-light);

  border-color: #d1d5db;

}



.page-link.active,

span.page-numbers.current {

  background: var(--primary-color);

  color: var(--white);

  border-color: var(--primary-color);

}



/* =================================================

   BANDEAU ACTUS / FORMATIONS

   ================================================= */



.news-bar {

  background-color: #111827;

  color: #ffffff;

  display: flex;

  align-items: center;

  padding: 8px 2%;

  font-family: "Inter", sans-serif;

  font-size: 0.85rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.news-item {

  display: flex;

  align-items: center;

  flex: 1;

  overflow: hidden;

}



.news-item:first-child {

  border-right: 2px solid rgba(255, 255, 255, 0.5);

  margin-right: 15px;

  padding-right: 15px;

}



.news-item .badge {

  flex-shrink: 0;

  z-index: 2;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  padding: 4px 8px;

  border-radius: 4px;

  margin-right: 15px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.ticker-wrapper {

  flex-grow: 1;

  overflow: hidden;

  position: relative;

  display: flex;

  align-items: center;

  -webkit-mask-image: linear-gradient(

    to right,

    transparent,

    black 2%,

    black 98%,

    transparent

  );

  mask-image: linear-gradient(

    to right,

    transparent,

    black 2%,

    black 98%,

    transparent

  );

}



.ticker-track {

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

  padding-left: 15px;

  animation: scrollTicker 25s linear infinite;

}



.ticker-slow {

  animation-duration: 30s;

}



.ticker-track:hover {

  animation-play-state: paused;

}



.ticker-track a {

  color: #e2e8f0;

  font-weight: 500;

  text-decoration: none;

  transition: color 0.2s ease;

}



.ticker-track a:hover {

  color: #ffffff;

  text-decoration: underline;

  text-decoration-thickness: 2px;

  text-underline-offset: 4px;

}



.ticker-separator {

  color: rgba(255, 255, 255, 0.2);

  font-size: 1rem;

  margin: 0 15px;

}



@keyframes scrollTicker {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* =================================================

   RESPONSIVE / MOBILE

   ================================================= */


@media (max-width: 1640px) {

  .menu-icon {

    display: block;

  }



  nav ul {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color: var(--white);

    flex-direction: column;

    align-items: flex-start;

    padding: 1.5rem 7%;

    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

    gap: 1rem;

  }



  .menu-checkbox:checked ~ ul {

    display: flex;

  }



  nav ul li {

    width: 100%;

  }



  nav ul a {

    display: inline-flex;

    width: auto;

    max-width: none;

    padding: 0.35rem 0.2rem;

  }



  nav ul a.nav-contact,

  nav ul a.nav-cta,

  nav ul a.nav-cta-green,

  nav ul a.nav-cta-red {

    display: inline-flex;

    justify-content: flex-start;

    width: auto;

    max-width: none;

    padding: 0.48rem 0.95rem;

  }

}

@media (max-width: 1500px) {

  .hero-text {

    margin-left: 0;

    padding-left: 2rem;

  }

}



@media (max-width: 1200px) {

  .hero-banner {

    padding-top: 4.5rem;

  }



  .target-grid {

    grid-template-columns: 1fr;

    max-width: 500px;

    margin: 0 auto;

  }



  .hero-content {

    flex-direction: column;

    text-align: center;

    gap: 1.25rem;

    padding-bottom: 2rem;

  }



  .hero-text {

    max-width: 700px;

    min-height: auto;

    padding: 2rem 0 0;

    margin-left: 0;

    align-items: center;

  }



  .hero-text h1 {

    font-size: 2.2rem;

  }



  .hero-text p {

    margin-left: auto;

    margin-right: auto;

  }



  .hero-image {

    position: relative;

    width: 100%;

    display: block;

  }



  .hero-actions {

    justify-content: center;

    flex-wrap: wrap;

  }



  .hero-actions .btn {

    margin-left: 0;

  }



  .hero-image img {

    width: 100%;

    height: auto;

    display: block;

    -webkit-mask-image: linear-gradient(

      to top,

      rgba(0, 0, 0, 1) 60%,

      rgba(0, 0, 0, 0) 100%

    );

    mask-image: linear-gradient(

      to top,

      rgba(0, 0, 0, 1) 60%,

      rgba(0, 0, 0, 0) 100%

    );

  }



  .about {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

  }



  .about-text {

    order: 1;

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

  }



  .about-text h2 {

    text-align: center;

  }



  .about-image {

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

  }



  .about-image img {

    width: 100%;

    height: auto;

    object-fit: cover;

    object-position: center;

    display: block;

  }



  .about-text h2::after,

  .about h2::after {

    margin-left: auto;

    margin-right: auto;

  }



  .partners {

    justify-content: flex-start;

    gap: 1rem;

    min-height: 84px;

  }



  .partner-logo {

    width: 140px;

    flex: 0 0 auto;

  }



  .news-bar {

    grid-template-columns: 1fr;

  }



  .news-item:first-child {

    border-right: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  }



  .carrieres-grid {

    grid-template-columns: 1fr;

    gap: 3rem;

  }



  .carrieres-image-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 2rem;

    margin-bottom: 2rem;

  }



  .formation-card {

    position: relative;

    top: auto;

    right: auto;

    transform: none;

    margin-top: 0;

    max-width: 100%;

  }



  .avantages-list li {

    font-size: 1rem;

  }



  .footer-content {

    grid-template-columns: repeat(2, minmax(220px, 1fr));

    gap: 1.2rem;

  }



  .aidant-card {

    flex-direction: column;

    align-items: stretch;

    gap: 1rem;

  }



  .aidant-image,

  .aidant-content {

    width: 100%;

  }



  .aidant-image {

    order: 1;

  }



  .aidant-content {

    order: 2;

    padding: 0 1.2rem 1.2rem;

  }



  .aidant-image img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    -webkit-mask-image: none;

    mask-image: none;

    border-radius: 18px 18px 0 0;

    -webkit-mask-image: linear-gradient(

      to bottom,

      rgba(0, 0, 0, 1) 70%,

      rgba(0, 0, 0, 0)

    );

    mask-image: linear-gradient(

      to bottom,

      rgba(0, 0, 0, 1) 70%,

      rgba(0, 0, 0, 0)

    );

  }

}



/* =========================

   <= 1150px

   Ajustements intermédiaires

   ========================= */

@media (max-width: 1150px) {

  .news-bar {

    flex-direction: column;

    padding: 0;

  }



  .news-item {

    width: 100%;

    padding: 8px 5%;

  }



  .news-item:first-child {

    border-right: none;

    border-bottom: 2px solid rgba(255, 255, 255, 0.2);

    margin-right: 0;

    padding-right: 5%;

  }

}



/* =========================

   <= 1100px

   Contact

   ========================= */

@media (max-width: 1100px) {

  .contact-hero-content {

    flex-direction: column;

    text-align: center;

  }



  .contact-hero-image {

    justify-content: center;

  }



  .contact-grid {

    grid-template-columns: 1fr;

  }



  .contact-grid {

    grid-template-columns: 1fr;

  }



  .page-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 0.8rem 1rem;

    padding: 1rem;

    margin: 1.25rem auto 1.5rem;

    border-radius: 24px;

    max-width: 100%;

  }



  .page-menu a {

    font-size: 1rem;

    line-height: 1.2;

    padding: 0.45rem 0.7rem;

    white-space: nowrap;

  }



  .activites-hero-text h1 {

    font-size: 2.6rem;

    line-height: 1.15;

  }

}



/* =========================

   <= 768px

   Tablette / mobile

   ========================= */

@media (max-width: 900px) {

  .footer-content {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.2rem;

  }

}



@media (max-width: 768px) {

  .contact-hero-text h1 {

    font-size: 2.5rem;

  }



  .contact-hero-text p {

    font-size: 1.1rem;

  }



  .contact-form-card h2,

  .contact-info-card h2,

  .map-card h2,

  .formation-item {

    flex-direction: column;

  }



  .formation-date-badge {

    flex-direction: row;

    gap: 10px;

    min-height: 80px;

  }



  .formation-date-badge .day {

    font-size: 2rem;

  }



  .formation-action {

    border-left: none;

    border-top: 1px solid #e5e7eb;

    justify-content: center;

  }



  .activites-hero-content {

    padding: 5rem 1rem 2rem;

  }



  .page-menu {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 0.55rem 0.8rem;

    padding: 0.9rem 0.8rem;

    border-radius: 24px;

    max-width: 100%;

  }



  .page-menu a {

    font-size: 0.85rem;

    line-height: 1.2;

    padding: 0.35rem 0.4rem;

    white-space: nowrap;

  }



  .activites-hero-text h1 {

    font-size: 1.2rem;

    line-height: 1;

    margin-top: 1.2rem;

  }



  .parcours-section {

    padding-top: 2rem;

  }



  .parcours-section h2 {

    font-size: 2rem;

    line-height: 1.15;

    text-align: center;

    margin-top: 0.5rem;

  }



  .activity-section .about,

  #Obstétrique .about,

  #chimiotherapie .about {

    display: flex;

    flex-direction: column !important;

  }



  .activity-section .about-text,

  #Obstétrique .about-text,

  #chimiotherapie .about-text {

    order: 1;

  }



  .activity-section .about-image,

  #Obstétrique .about-image,

  #chimiotherapie .about-image {

    order: 2;

  }



  .medicaments-grid {

    grid-template-columns: 1fr;

    gap: 1rem;

    padding: 0;

  }



  .med-card {

    padding: 1.25rem;

  }



  #medicaments h2 {

    font-size: 2rem;

    line-height: 1.15;

    text-align: center;

  }



  .footer {

    padding: 1.4rem 1rem 0.8rem;

  }



  .footer-content {

    gap: 0.9rem 1rem;

  }



  .footer-col h3 {

    font-size: 1rem;

    margin-bottom: 0.35rem;

  }



  .footer-col p,

  .footer-col a,

  .footer-col li {

    font-size: 0.95rem;

    line-height: 1.4;

  }


  .footer-contact-btn {

    padding: 0.7rem 1rem;

    font-size: 0.95rem;

    border-radius: 18px;

    width: auto;

    min-width: 0;

  }



  .social-links {

    gap: 0.45rem;

    margin-top: 0.4rem;

  }



  .social-links a {

    width: 36px;

    height: 36px;

  }



  .footer-bottom {

    margin-top: 0.8rem;

    padding-top: 0.7rem;

    font-size: 0.82rem;

  }

}



/* =========================

   <= 640px

   Petit mobile

   ========================= */

@media (max-width: 640px) {

  footer {

    padding: 1.6rem 1rem 0.9rem;

  }



  .footer-content {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem 1rem;

    align-items: start;

  }



  .footer-address-col,

  .footer-contact-col,

  .footer-sectors-col,

  .footer-col h3 {

    font-size: 1rem;

    margin-bottom: 0.45rem;

  }



  .footer-col p,

  .footer-col a,

  .footer-col li {

    font-size: 0.92rem;

    line-height: 1.45;

  }



  .footer-contact-btn {

    width: 100%;

    max-width: 100%;

    padding: 0.75rem 0.9rem;

    font-size: 0.9rem;

  }



  .social-links {

    gap: 0.5rem;

  }



  .footer-bottom {

    margin-top: 1rem;

    padding-top: 0.8rem;

  }

}



/* =========================

   <= 380px

   Très petits écrans (Montres, petits mobiles)

   ========================= */

@media (max-width: 380px) {

  .target-grid,

  .carrieres-grid,

  .benefits-grid,

  .news-grid {

    grid-template-columns: minmax(0, 1fr) !important;

  }



  .target-card,

  .formation-card,

  .benefit-card,

  .news-card,

  .presc-card,

  .footer-content {

    grid-template-columns: minmax(0, 1fr) !important;

  }



  .btn,

  .card-btn,

  .nav-cta,

  .nav-cta-green,

  .nav-cta-red {

    padding: 0.8rem 1rem !important;

    white-space: normal !important;

    height: auto;

    text-align: center;

    width: 100%;

  }



  h1,

  h2,

  h3,

  .hero-text h1,

  .activites-hero-text h1 {

    font-size: 1.6rem !important;

    overflow-wrap: anywhere !important;

  }



  .avantages-list li {

    gap: 0.5rem !important;

  }



  .avantages-list li span {

    min-width: 0;

    overflow-wrap: anywhere !important;

  }



  .footer-address .footer-address-icon,

  .footer-contact-icon,

  .footer-contact-btn {

    margin-left: 0;

  }

}



/* =================================================

   Page dons

   ================================================= */



.don-cheque-card {

  max-width: 900px;

  background-color: var(--white);

  border-radius: 28px;

  padding: 2rem;

  box-shadow: var(--shadow-md);

  border: 1px solid rgba(21, 154, 148, 0.08);

}



.don-cheque-top {

  display: flex;

  align-items: center;

  gap: 1.2rem;

  margin-bottom: 1.5rem;

}



.don-cheque-icon {

  width: 64px;

  height: 64px;

  border-radius: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--secondary-color);

  color: var(--primary-color);

}



.don-cheque-title {

  font-size: 1.4rem;

  color: var(--primary-color);

  margin-bottom: 0.3rem;

  font-weight: 600;

}



.don-cheque-intro {

  font-size: 0.95rem;

  color: var(--text-light);

  line-height: 1.6;

}



.don-cheque-text {

  font-size: 1rem;

  line-height: 1.8;

  color: var(--text-color);

  margin-bottom: 1.2rem;

}



.don-address-box {

  background-color: var(--bg-light);

  border-left: 4px solid var(--primary-color);

  border-radius: 16px;

  padding: 1.2rem;

  margin-bottom: 1.5rem;

  line-height: 1.7;

  color: var(--text-color);

}



.don-cheque-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}



.don-cheque-footer p {

  font-size: 0.95rem;

  color: var(--text-light);

}



/* =================================================

   RESPONSIVE PAGE DONS

   ================================================= */



@media (max-width: 768px) {

  .don-cheque-card {

    padding: 1.5rem;

    border-radius: 22px;

  }



  .don-cheque-top {

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

  }



  .don-cheque-icon {

    width: 56px;

    height: 56px;

    border-radius: 16px;

  }



  .don-cheque-footer {

    flex-direction: column;

    align-items: flex-start;

  }



  .don-cheque-footer p {

    font-size: 0.9rem;

  }

}

/* =================================================

   PAGE DONS PARTIE 2

   ================================================= */

.don-hero-banner {

  padding: 6.5rem 5% 4.5rem;

}



.hero-center {

  max-width: 1100px;

  margin: 0 auto;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.hero-title-don {

  font-size: clamp(3rem, 5.5vw, 4.6rem);

  font-weight: 700;

  line-height: 1.1;

  color: var(--primary-color);

  margin-bottom: 1.4rem;

}



.hero-subtitle-don {

  font-size: 1.18rem;

  line-height: 1.85;

  color: var(--text-color);

  max-width: 820px;

  margin: 0 auto;

}



@media (max-width: 768px) {

  .don-hero-banner {

    padding: 5.2rem 5% 3.2rem;

  }



  .hero-title-don {

    font-size: clamp(2.4rem, 8vw, 3.2rem);

  }



  .hero-subtitle-don {

    font-size: 1rem;

    max-width: 100%;

  }

}



.don-why {

  padding: 1rem 0 4rem;

  background-color: var(--bg-color);

}



.don-container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 5%;

}



.don-why-list {

  list-style: none;

  max-width: 900px;

  margin: 0 auto;

  display: grid;

  gap: 1rem;

  justify-content: center;

}



.don-why-list li {

  position: relative;

  padding-left: 2rem;

  font-size: 1.04rem;

  line-height: 1.7;

  color: var(--text-color);

}



.don-why-list li::before {

  content: "✓";

  position: absolute;

  left: 0;

  top: 0;

  color: #2fad66;

  font-weight: 700;

  font-size: 1.15rem;

}



.don-how .don-container {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.don-how h2 {

  width: 100%;

}



.don-cheque-card {

  width: min(100%, 900px);

  margin: 0 auto;

  background-color: var(--white);

  border-radius: 28px;

  padding: 2rem;

  box-shadow: var(--shadow-md);

  border: 1px solid rgba(21, 154, 148, 0.08);

}



.btn-don {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.85rem 1.6rem;

  border-radius: 999px;

  background-color: var(--primary-color);

  color: var(--white);

  text-decoration: none;

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  box-shadow: 0 4px 10px rgba(21, 154, 148, 0.15);

}

/* =================================================

   BOUTON DONS 

   ================================================= */

.btn-don:hover {

  background-color: var(--primary-hover);

  transform: translateY(-2px);

  color: var(--white);

}



.nav-cta-support {

  color: #eab308;

  font-weight: 600;

  border: 2px solid #eab308;

  padding: 0.5rem 1.2rem;

  border-radius: 30px;

  display: inline-flex;

  align-items: center;

  white-space: nowrap;

}



nav a.nav-cta-support:hover {

  background-color: #eab308;

  color: var(--white);

}



/* =================================================

   CARD METIER/ PAGE PROFESSIONELS

   ================================================= */

.metiers-grid {

  margin-top: 2.5rem;

}



.metier-card {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.metier-card h3 {

  margin-bottom: 0.2rem;

}



.metier-card p {

  color: var(--text-color);

  margin-bottom: 0.2rem;

}



.metier-details {

  margin-top: auto;

  border-top: 1px solid rgba(21, 154, 148, 0.12);

  padding-top: 1rem;

}



.metier-details summary {

  list-style: none;

  cursor: pointer;

  font-weight: 600;

  color: var(--primary-color);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.metier-details summary::-webkit-details-marker {

  display: none;

}



.metier-details summary::after {

  content: "▾";

  font-size: 1rem;

  transition: transform 0.25s ease;

}



.metier-details[open] summary::after {

  transform: rotate(180deg);

}



.metier-details-content {

  padding-top: 0.9rem;

}



.metier-details-content ul {

  list-style: none;

  padding-left: 0;

  display: grid;

  gap: 0.55rem;

}



.metier-details-content li {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  color: var(--text-light);

}



.metier-details-content li::before {

  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: var(--primary-color);

  display: inline-block; /* IMPORTANT */

  flex-shrink: 0;

}



.section-intro {

  max-width: 850px;

  margin: 0 auto;

  text-align: center;

  color: var(--text-light);

  font-size: 1.05rem;

}



.metier-img {

  height: 230px;

}



.metier-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



@media (max-width: 768px) {

  .metier-details summary {

    font-size: 0.95rem;

  }



  .metier-details-content li {

    font-size: 0.95rem;

  }

}



.target-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

  align-items: stretch;

}



.metier-card {

  justify-content: flex-start !important;

  align-self: start;

  height: 100% !important;

}



.metier-img {

  height: 230px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.2rem;

}



.metier-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.metier-card h3 {

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



.metier-card p {

  min-height: 96px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  text-align: center;

}



.metier-card .metier-details {

  margin-top: auto;

  width: 100%;

}



.fin-reprise {

  margin-top: 1.2rem;

  padding: 0.9rem 1.2rem;

  background: #e8f5f4;

  border-left: 4px solid var(--primary-color);

  border-radius: 10px;

  font-size: 0.95rem;

  line-height: 1.6;

  color: var(--text-color);

}



/* =================================================

   CORRECTION GRILLE 4 MÉTIERS

   ================================================= */

/* Forcer les 4 cartes sur la même ligne */

.target-grid.metiers-grid {

  grid-template-columns: repeat(4, 1fr);

  width: 100%;

  max-width: 1400px;

}



/* Sur les tablettes et petits écrans, on passe à 2 par ligne pour éviter que le texte soit illisible */

@media (max-width: 1150px) {

  .target-grid.metiers-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* Sur mobile, on repasse sur 1 seule colonne */

@media (max-width: 768px) {

  .target-grid.metiers-grid {

    grid-template-columns: 1fr;

  }

}



/* =================================================

   CORECTION CENTRE PAGE ACCUEIL

   ================================================= */

.about-text p {

  max-width: 700px;

  margin: 0 auto;

  text-align: left;

}

.target-grid {

  display: grid;

  grid-template-columns: repeat(3, 300px); /* largeur fixe */

  justify-content: center; /* centre les cards */

  gap: 2.5rem;

}



/* =================================================

   COULEURS DYNAMIQUES DES BADGES ACTUALITÉS

   ================================================= */

.news-grid .news-card:nth-child(3n + 1) .news-category {

  background-color: #2fad66;

}



.news-grid .news-card:nth-child(3n + 2) .news-category {

  background-color: var(--primary-color);

}



.news-grid .news-card:nth-child(3n) .news-category {

  background-color: #a92321;

}



/* =================================================

   MISE EN FORME DU CONTENU DES ARTICLES (SINGLE)

   ================================================= */

.the-content p,

.the-content ul,

.the-content ol,

.the-content blockquote {

  margin-bottom: 2rem;

}



.the-content h2,

.the-content h3 {

  margin-top: 3.5rem;

  margin-bottom: 1.5rem;

  color: var(--primary-color);

}



.the-content img,

.the-content figure {

  margin: 3rem auto;

  border-radius: 12px;

  display: block;

  max-width: 100%;

  height: auto;

}



.the-content > *:last-child {

  margin-bottom: 0;

}


/* =================================================

   COMPATIBILITÉ CONTACT FORM 7 (Wordpress)

   ================================================= */

span.wpcf7-form-control-wrap {

  display: block !important;

  width: 100% !important;

}



.wpcf7-form p {

  margin: 0 !important;

  padding: 0 !important;

}

.wpcf7-form br {

  display: none !important;

}



.wpcf7-form input[type="submit"] {

  background-color: var(--primary-color) !important;

  color: var(--white) !important;

  padding: 1rem 2rem !important;

  border-radius: 8px !important;

  border: none !important;

  font-size: 1.1rem;

  font-family: "Montserrat", sans-serif;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  width: auto;

}



.wpcf7-form input[type="submit"]:hover {

  background-color: var(--primary-hover) !important;

  transform: translateY(-2px);

}



.wpcf7-form input[type="submit"].btn-red {

  background-color: #a92320 !important;

  width: 100% !important;

}



.wpcf7-form input[type="submit"].btn-red:hover {

  background-color: #8a1c1a !important;

}



@media (max-width: 768px) {

  .wpcf7-form div[style*="grid-template-columns"] {

    grid-template-columns: 1fr !important;

  }

}



/* =================================================

   PAGE DONS / LEG

   ================================================= */



.don-legs-card {

  margin-top: 2rem;

}



.don-legs-card .don-cheque-icon {

  background-color: #fff7e8;

  color: #d4a017;

}

.don-legs-card svg {

  width: 50px;

  height: 50px;

}



/* =================================================

   PAGE PARTENAIRES

   ================================================= */



.partner-about {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6rem;

  padding-left: 0 !important;

  padding-right: 0!important;

}



.partner-about.row-reverse {

  flex-direction: row-reverse;

}



.partner-about-text {

  width: 52%;

  flex: 0 0 52%;

}



.partner-about-text h2 {

  text-align: left;

  margin-bottom: 1.5rem;

}



.partner-about-text h2::after {

  margin-left: 0;

  margin-right: 0;

}



.partner-about-text p {

  font-size: 1.05rem;

  line-height: 1.8;

  max-width: none;

  color: #4f5b66;

}



.partner-about-image {

  width: 38%;

  flex: 0 0 38%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.partner-about-image img {

  max-width: 100%;

  height: auto;

  display: block;

  object-fit: contain;

}

.bg-light .partner-about,

section .partner-about {

  padding-left: 0 !important;

}

.partner-about.row-reverse .partner-about-text {

  margin-left: auto;

  text-align: left;

}


@media (max-width: 950px) {

.partner-about {

flex-direction: column;

}



.partner-about.row-reverse {

  flex-direction: column;

}

.partner-about.row-reverse .partner-about-text {

  margin-left: 0;

}

}


/* =================================================

   CORECTION CENTRE PAGE ACCUEIL

   ================================================= */

.about-text p {

  max-width: 700px;

  margin: 0 auto;

  text-align: left;

}



.target-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 300px));

  justify-content: center;

  gap: 2.5rem;

}



/* =================================================

   PAGINATION FORMATIONS

   ================================================= */

#agenda .page-link.active,

#agenda span.page-numbers.current {

  background: #a92320;

  border-color: #a92320;

  color: var(--white);

}



#agenda a.page-numbers:hover {

  border-color: #a92320;

  color: #a92320;

  background: var(--bg-light);

}



/* =================================================

   MISE EN FORME DES BADGES DE DATES SUR LA PAGE FORMATIONS

   ================================================= */

.formation-date-badge .month {

  text-transform: uppercase;

  letter-spacing: 2px;

}



/* =================================================

   BARRE D'ANNONCE EN HAUT DE PAGE

   ================================================= */

.top-announcement-bar {

  background: linear-gradient(135deg, #a92320 0%, #8f1f1d 100%);

  color: var(--white);

  text-align: center;

  padding: 0.6rem 5%;

  font-size: 0.95rem;

  font-weight: 500;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);

}



.top-announcement-bar a {

  color: var(--white);

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 6px;

}



.top-announcement-bar a:hover {

  text-decoration: underline;

  text-underline-offset: 4px;

}



.top-announcement-bar .arrow {

  font-weight: bold;

  transition: transform 0.3s ease;

}



.top-announcement-bar a:hover .arrow {

  transform: translateX(4px);

  text-decoration: none;

}



/* =================================================

   GESTION INTELLIGENTE DU BOUTON ACCUEIL

   ================================================= */



/* On cache le bouton "Accueil" (le 1er lien) en dessous de 1635px */

@media (max-width: 1635px) {

  nav ul li:first-child {

    display: none;

  }

}



/* On le réaffiche à l'intérieur du menu burger (en dessous de 1535px) */

@media (max-width: 1400px) {

  nav ul li:first-child {

    display: block;

    width: 100%;

  }

}



/* =================================================

   CONSENTEMENT RGPD (CF7)

   ================================================= */

.rgpd-consent .wpcf7-list-item {

  display: block !important;

  margin: 0 !important;

}



.rgpd-consent label {

  display: flex !important;

  align-items: flex-start !important;

  gap: 12px !important;

  cursor: pointer;

}



/* Force l'apparence native et bloque les redimensionnements */

.rgpd-consent input[type="checkbox"] {

  appearance: auto !important;

  -webkit-appearance: checkbox !important;

  width: 18px !important;

  height: 18px !important;

  min-width: 18px !important;

  padding: 0 !important;

  margin: 3px 0 0 0 !important;

  flex-shrink: 0 !important;

  accent-color: var(--primary-color);

}



/* Cible le conteneur de texte généré par CF7 */

.rgpd-consent .wpcf7-list-item-label {

  font-size: 0.85rem;

  line-height: 1.5;

  color: var(--text-light);

}



.rgpd-consent a {

  color: var(--primary-color);

  text-decoration: underline;

  text-underline-offset: 2px;

}



.rgpd-consent a:hover {

  color: var(--primary-hover);

}





/* =================================================

   GLISSEMENT DE LA NAVIGATION AVANT LE BURGER

   ================================================= */

@media (max-width: 1565px) {

  nav {

    padding-left: 1rem; /* Pousse le logo au bord gauche */

    padding-right: 1rem;

  }

  

  nav ul {

    gap: clamp(0.5rem, 1vw, 1rem); /* Resserre les liens de manière fluide */

  }

}





.contact-map {

    position: relative;

    height: 450px;

    width: 100%;

    background: #f4f7f9;

    overflow: hidden;

    border-radius: 18px;

}



.map-placeholder {

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 2rem;

    text-align: center;

    background: linear-gradient(135deg, #f4f7f9 0%, #e9eff3 100%);

    border: 1px solid #d1d9e0;

}



.map-placeholder p {

    color: #4a5568;

    font-family: 'Montserrat', sans-serif;

    font-size: 0.95rem;

    line-height: 1.6;

    margin-bottom: 1.5rem;

    max-width: 450px;

}



.map-placeholder .btn-primary {

    cursor: pointer;

    transition: transform 0.2s ease;

}



.map-placeholder .btn-primary:hover {

    transform: translateY(-2px);

}


/* =================================================

   legal-page

   ================================================= */ 

.legal-page h2{
    text-align: left;
    margin-bottom: 1rem;
    margin-top: 3rem;
}



.legal-page h2:first-of-type{
  
  margin-top: 0!important;
}

   .legal-page h2::after{
    display: none;
   }


/* =================================================

   Prescrire une HAD

   ================================================= */ 


#prescription .prescription-container{
  display: flex;
}

#prescription .prescription-container .presc-left{
  padding-right: 30px;
}

#prescription .prescription-container .presc-left h2{
  text-align: left;
}

#prescription .prescription-container .presc-left p{
  text-align: left;
}

#prescription .prescription-container .presc-right{
  max-width: 40%;
}

#prescription .prescription-container .presc-right img{
  max-width: 100%;
  border-radius: 20px;
}


@media (max-width: 1150px) {

#prescription .prescription-container{
  flex-direction: column-reverse;
}

#prescription .prescription-container .presc-left{
  padding-right: 0;
}

#prescription .prescription-container .presc-left h2{
  text-align: center;
}

#prescription .prescription-container .presc-left p{
  text-align: center;
  margin: 0!important;
}

#prescription .prescription-container .presc-right{
  max-width: 100%;
}

#prescription .prescription-container .presc-right img{
  max-width: 100%;
  border-radius: 20px;
}


}