/* =========================================================
   Veridata Compliance — Feuille de style commune
   Palette sobre navy / gris, beaucoup de blanc, pas d'emoji
   ========================================================= */

:root {
  --navy: #16264a;
  --navy-900: #0b1f33;
  --navy-800: #0f2942;
  --navy-700: #16375a;
  --navy-600: #1f4a75;
  --accent: #2f6fed;
  --accent-dark: #1f52b8;
  --gray-900: #1c232c;
  --gray-700: #4a5462;
  --gray-500: #6c7684;
  --gray-300: #d7dce2;
  --gray-100: #f4f6f8;
  --white: #ffffff;
  --radius: 6px;
  /*--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;*/
  --font-main:"Segoe UI", Arial, sans-serif; 
  /* pour le wave*/
  --wave-thickness: 70;
  --wave-gap: 235;
  --text-muted: #1c232c;
  --bg-tint: #769699;

  /* Palette étendue violet / turquoise / bleu / vert — cohérente avec
     l'évolution des couleurs du site (bouton ruban, badges icônes,
     survols de cartes). Le bleu et le navy existants ci-dessus restent
     la base ; ces variables ajoutent le violet/turquoise/vert. */
  --purple: #6c3aa8;
  --purple-dark: #4e2a80;
  --turquoise: #2a9d8f;
  --green: #4a968a;
  --card-border: #b79bd6;

  --bg-soft: #f5f6fb;
  --icon-blue: #2f6fd6;
  --icon-orange: #e08a2b;
  --icon-purple: #6741d9;
  --icon-green: #2f9e63;
  --icon-sage: #7a9d6e;
  
  --icon-slate: #4a5266;

}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--gray-900);
  background-color: var(--white);
  line-height: 1.65;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

p {
  color: var(--gray-900);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-dark);
}

.text-navy { color: var(--navy-900) !important; }
.bg-navy { background-color: var(--navy-900) !important; }
.bg-navy-800 { background-color: var(--navy-800) !important; }
.bg-gray-100 { background-color: rgba(141, 162, 170,0.95) !important; }
.bg-purple-100 { background-color: rgba(102, 94, 145,0.7) !important; }

/* ---------- Boutons ---------- */
.btn-accent {
  background-color: var(--purple);
  border: 1px solid var(--purple);
  color: var(--white);
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, border-color 0.15s ease;

   box-sizing: border-box;    /* le padding ne s'ajoute plus à la largeur déclarée */
  display: inline-flex;      /* corrige le vrai problème : sans ça, un <a> reste "inline" par défaut, et son padding vertical chevauche le texte autour au lieu de le pousser */
  align-items: center;
  justify-content: center;
  max-width: 100%;           /* ne dépasse jamais la largeur du parent */
  text-align: center;
}
.btn-accent:hover {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.btn-outline-light-navy {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--radius);
}
.btn-outline-light-navy:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-navy {
  background-color: transparent;
  border: 1px solid var(--navy-700);
  color: var(--navy-900);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius);
}
.btn-outline-navy:hover {
  background-color: var(--navy-900);
  color: var(--white);
}

/* ---------- Navbar ---------- */
.navbar-veridata {
  background-color: #130F22;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.navbar-veridata .navbar-brand {
  color: var(--white);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.navbar-brand-accent {
  font-weight: 300;
  font-style: italic;
  font-family: 'Quicksand', 'Century Gothic', sans-serif;
}
.navbar-brand-logo {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-logo {
  height: 80px;       /* ajustez selon les proportions de votre logo */
  width: auto;
  display: block;
}
.navbar-veridata .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
}
.navbar-veridata .nav-link:hover,
.navbar-veridata .nav-link.active {
  color: var(--green);
}
.navbar-veridata .btn-accent {
  margin-left: 0.5rem;
}

/* À partir de lg : on force toute la chaîne flex de la navbar à s'étirer
   (au lieu du align-items:center par défaut de Bootstrap), pour que le
   parallélogramme "Prendre contact" puisse occuper toute la hauteur de la
   navbar sans calcul de marge approximatif. Le logo et les liens texte
   restent centrés verticalement à l'intérieur de leur bloc désormais
   étiré, grâce aux display:flex/align-items:center ajoutés ci-dessous. */
@media (min-width: 992px) {
  .navbar-veridata {
    align-items: stretch;
  }
  .navbar-veridata .navbar-collapse {
    align-items: stretch;
  }
  .navbar-veridata .navbar-nav {
    align-items: stretch;
  }
  .navbar-veridata .navbar-brand-logo {
    display: flex;
    align-items: center;
  }
  .navbar-veridata .nav-link {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

/* Icône LinkedIn dans la navbar */
.nav-link-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  padding: 0.5rem 0.6rem !important;
}
.nav-link-linkedin:hover {
  color: var(--white);
}

/* Bouton "Prendre contact" — reste dans le flux normal de la navbar, juste
   à côté du LinkedIn (pas détaché au bord de l'écran). En mobile : bouton
   classique pleine largeur. À partir de lg : parallélogramme (deux côtés
   parallèles, contrairement à un trapèze) qui remplit toute la hauteur du
   <li> — lequel est maintenant étiré sur toute la hauteur de la navbar
   grâce aux règles align-items:stretch ci-dessus, donc plus besoin de
   deviner une marge négative. */
.navbar-contact-parallelogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 1.5rem;
  background-color: var(--purple);
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background-color 0.2s ease;
}
.navbar-contact-parallelogram:hover {
  background-color: var(--green);
  color: var(--white);
}
@media (min-width: 992px) {
  .navbar-contact-parallelogram {
    width: auto;
    height: 100%;
    margin-top: 0;
    padding: 0 1.9rem;
    border-radius: 0;
    clip-path: polygon(15% 0, 100% 0, 85% 100%, 0% 100%);
  }
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(135deg, rgba(78, 42, 128, 0.85)  0%,rgba(74, 150, 138, 0.85)  100%);
  color: var(--white);
  padding: 2rem 0 1.5rem;
}
.hero h1 {
  color: var(--white);
  font-size: 2.5rem;
}
.hero p.lead {
  color: rgba(255, 255, 255, 0.85);
}
.hero-tags .badge {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.55rem 1.15rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.hero-tags .badge:hover {
  background-color: rgba(255, 255, 255, 0.24);
}

.hero-carousel {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 560px;
}

/* Le widget carrousel entier (indicateurs + images) devient la
   couche de fond : callé en absolute sur toute la hauteur réelle
   du hero, quelle qu'elle soit. On ne touche PAS à la mécanique
   interne de Bootstrap (float/margin-right sur .carousel-item,
   nécessaires à l'animation de slide) — seulement à sa hauteur,
   via height:100% au lieu d'un 560px figé. */
#heroCarousel.carousel {
  position: absolute;
  inset: 0;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item {
  height: 100%; /* remplace le 560px fixe : suit la vraie hauteur du hero */
}
.hero-carousel .carousel-item {
  background-color: var(--navy-800);
}
.hero-carousel .carousel-item img {
  width: 100%;
  height: 100%; /* remplace le 560px fixe */
  object-fit: cover;
  filter: saturate(0.9);
}

.bg-violet{
  background: linear-gradient(135deg, rgba(78, 42, 128, 0.85) 0%, rgba(255,255,255,0.85) 15%, rgba(255,255,255,0.85) 90%, rgba(78, 42, 128, 0.85) 100%);
  /*background: linear-gradient(135deg, rgba(78, 42, 128, 0.85)  0%,rgba(74, 150, 138, 0.85)  100%);*/
}

.hero-carousel .hero-overlay {
  position: absolute;
  inset: 0;
  /*background: linear-gradient(135deg, rgba(74, 150, 138, 0.85) 0%, rgba(78, 42, 128, 0.85) 100%);*/
  background: linear-gradient(135deg, rgba(78, 42, 128, 0.85)  0%,rgba(74, 150, 138, 0.85)  100%);
  z-index: 1;
  pointer-events: none;
}

/* LE CHANGEMENT CLÉ : plus de position:absolute + inset:0 ici.
   .hero-content reste dans le flux normal (position:relative,
   seulement pour s'empiler visuellement au-dessus de l'image et
   du voile grâce au z-index) — donc s'il a besoin de plus de
   place, il pousse la hauteur du hero au lieu d'être rogné. */
.hero-carousel .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 560px; /* garde la même hauteur visuelle par défaut */
  padding: 2rem 0;
}

.hero-carousel .carousel-indicators {
  z-index: 3;
  margin-bottom: 0.5rem;
}
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  margin: 0 4px;
}
.hero-carousel .carousel-indicators .active {
  background-color: var(--white);
}

@media (max-width: 767px) {
  .hero-carousel,
  .hero-carousel .hero-content {
    min-height: 720px; /* la couche d'image (height:100%) suit automatiquement */
  }
}







/* ---------- Bandeau Secteur ---------- */
.sector-band {
  background-color: var(--white-100);
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--white-300);
}
.sector-band .sector-ico {
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.1;
}
.sector-band .sector-label {
  color: var(--gray-900);
  font-size: 1rem;
}




/* Chiffres multicolores : une teinte distincte par chiffre clé */
.stats-band .stat-number.stat-c1 { color: var(--accent); }
.stats-band .stat-number.stat-c2 { color: #0f8a5f; }
.stats-band .stat-number.stat-c3 { color: #b8860b; }
.stats-band .stat-number.stat-c4 { color: var(--navy-900); }

/* ---------- Cards offre ---------- */
.card-offre {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  background-color: var(--white);
  text-align: center;
}
.card-offre:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(11, 31, 51, 0.08);
  transform: translateY(-2px);
}
.card-offre .offre-index {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Tags cible ---------- */
.tag-besoin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--gray-900);
  font-weight: 500;
  height: 100%;
  background: white;
}
.tag-besoin i {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  margin-right: 0 !important;
}
.tag-besoin:hover {
  border-color: var(--accent);
  color: var(--navy-900);
}

/* ---------- Section générique ---------- */
.section {
  padding: 1.5rem 0;
  position: relative;
}
.section-sm {
  padding: 3rem 0;
}
.section-header .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- Bloc contact bas de page ---------- */
.cta-band {
  background: linear-gradient(135deg, rgba(74, 150, 138, 0.85) 0%, rgba(78, 42, 128, 0.85) 100%);
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Footer ---------- */
.footer-veridata {
  background: linear-gradient(135deg, rgba(74, 150, 138, 0.85) 0%, rgba(78, 42, 128, 0.85) 100%);
  color: rgba(255, 255, 255, 0.65);
  padding: 2.5rem 0;
  font-size: 0.9rem;
}
.footer-veridata a {
  color: rgba(255, 255, 255, 0.75);
}
.footer-veridata a:hover {
  color: var(--white);
}

/* ---------- Dropdown navbar (Ressources) ---------- */
  /* =========================================================
     LE TRUC : on force le menu à toujours être "display:block"
     (au lieu du display:none par défaut de Bootstrap), et c'est
     l'opacité + la visibilité qui gèrent l'affichage. Comme ça,
     on peut faire une vraie transition en fondu, ce qu'on ne
     peut pas faire avec display:none/block.
     ========================================================= */
@media (min-width: 992px){
  .dropdown-menu{
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    border: 1px solid #e4e4e4;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  /* le clic normal de Bootstrap (mobile/tactile) : la classe .show
     est ajoutée par son JS quand on clique sur le lien */
  .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    
  }

  /* le survol automatique : UNIQUEMENT sur les appareils qui ont
     une vraie souris (pointer:fine + hover:hover) — jamais sur
     tactile, où ça n'aurait aucun sens */
  @media (hover: hover) and (pointer: fine){
    .dropdown:hover > .dropdown-menu{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      background: var(--turquoise);
    }
  }
}
  .dropdown-item:hover{ background: #6c3aa8; color: white; }
  .dropdown-item {color: white; }

/* ---------- Bandeau défilant "observation reçue" ----------
   Barre fixe en bas de l'écran, couleur d'alerte plus douce
   (ambre) pour rester visible sans être agressive, texte qui
   défile en continu, icône qui pulse légèrement pour capter
   l'attention. Peut être masquée par le visiteur (réapparaît
   après un délai, cf. script.js). */
:root {
  --urgent: #b87272;
  --urgent-dark: #935a5a;
  --urgent-icon: #ffd60a;
}
.ticker-observation {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, var(--urgent) 0%, rgba(78, 42, 128, 0.85) 100%);
  box-shadow: 0 -0.4rem 1.5rem rgba(0, 0, 0, 0.35);
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  animation: tickerFlash 6s ease-in-out infinite;
}
.ticker-observation .ticker-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 0.9rem 0;
}
.ticker-observation .ticker-track {
  display: inline-flex;
  align-items: center;
  animation: tickerScroll 11s linear infinite;
  will-change: transform;
}
.ticker-observation:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-observation .ticker-link {
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0 3rem;
}
.ticker-observation .ticker-link i {
  color: var(--urgent-icon);
  animation: tickerIconPulse 1.8s ease-in-out infinite;
}
.ticker-observation .ticker-link:hover {
  text-decoration: underline;
  color: var(--white);
}
.ticker-observation .ticker-close {
  flex: 0 0 auto;
  background-color: rgba(0, 0, 0, 0.12);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 1.2rem;
  cursor: pointer;
}
.ticker-observation .ticker-close:hover {
  color: var(--white);
  background-color: var(--urgent-dark);
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes tickerIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes tickerFlash {
  0%, 88%, 100% { box-shadow: 0 -0.4rem 1.5rem rgba(0, 0, 0, 0.3); }
  94% { box-shadow: 0 -0.4rem 2rem rgba(255, 255, 255, 0.3); }
}
@media (max-width: 768px) {
  .ticker-observation .ticker-viewport {
    padding: 0.65rem 0;
  }
  .ticker-observation .ticker-link {
    font-size: 0.85rem;
    padding: 0 1.5rem;
  }
  .ticker-observation .ticker-close {
    font-size: 1.15rem;
    padding: 0 0.85rem;
  }
}
@media (max-width: 400px) {
  .ticker-observation .ticker-link {
    font-size: 0.78rem;
    padding: 0 1rem;
  }
  .ticker-observation .ticker-link i {
    margin-right: 0.4rem !important;
  }
}
.footer-veridata {
  padding-bottom: 3.75rem;
}

/* ---------- Réseaux professionnels (footer) ---------- */
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
}
.footer-social:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--white);
}




/* ---------- Icône + ruban flèche ----------
   Composants réutilisés sur les cartes services, analyses et veille :
   un badge icône coloré en haut, un ruban en forme de flèche (clip-path)
   collé au coin bas-gauche de la carte à la place d'un bouton classique. */
.card-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.card-icon-badge.icon-accent    { background-color: var(--accent); }
.card-icon-badge.icon-navy      { background-color: var(--navy-900); }
.card-icon-badge.icon-green     { background-color: var(--green); }
.card-icon-badge.icon-amber     { background-color: #b8860b; }
.card-icon-badge.icon-turquoise { background-color: var(--turquoise); }
.card-icon-badge.icon-purple    { background-color: var(--purple); }

/* Ruban flèche : forme trapèze, icône fixe + libellé "Voir plus" masqué
   par défaut et révélé au survol, le ruban s'élargissant et passant au
   vert. Reste collé au coin bas-gauche de la carte (overflow: hidden
   sur la carte impose de garder le ruban à ras plutôt que "suspendu"
   sous la bordure comme dans le modèle de référence). */
.card-corner-arrow {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 56px;
  height: 44px;
  background-color: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  display: flex;
  align-items: center;
  padding-left: 14px;
  padding-right: 18px;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.3s ease, background-color 0.25s ease;
}
.card-corner-arrow i {
  color: var(--white);
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.card-corner-arrow .corner-text {
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.card-service:hover .card-corner-arrow,
.card-ressource:hover .card-corner-arrow,
.card-article-home:hover .card-corner-arrow {
  width: 132px;
  background-color: var(--green);
}
.card-service:hover .card-corner-arrow .corner-text,
.card-ressource:hover .card-corner-arrow .corner-text,
.card-article-home:hover .card-corner-arrow .corner-text {
  opacity: 1;
  transition: opacity 0.25s ease 0.12s;
}
.card-service:hover .card-corner-arrow i,
.card-ressource:hover .card-corner-arrow i,
.card-article-home:hover .card-corner-arrow i {
  transform: translateX(3px);
}

.h5{
 color: black;
}

/* ---------- Bouton ruban de présentation de section ----------
   Motif réutilisable : bloc titre à gauche (liseré + eyebrow) et
   bouton ruban violet en haut à droite, qui passe au vert au survol.
   À utiliser pour présenter une section avec un lien "voir plus". */
.section-header-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.section-header-split .section-title-block {
  position: relative;
  padding-left: 1.1rem;
  border-left: 3px solid var(--navy-900);
}
.section-header-split .section-title-block .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 0.35rem;
}
.section-header-split .section-title-block h2 {
  margin: 0;
}
.ribbon-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--purple);
  border: 1px solid var(--purple);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65rem 2.1rem 0.65rem 1.35rem;
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ribbon-tag:hover {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--purple);
}

/* ---------- Cartes service (Accueil + page Offres) ----------
   Cadre bordé, icône colorée, ruban flèche en coin bas-gauche
   plutôt qu'un bouton classique. */
.card-service {
  display: block;
  position: relative;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.85rem 1.6rem 3.5rem;
  height: 100%;
  background-color: var(--white);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.card-service:hover {
  box-shadow: 0 0.85rem 2rem rgba(11, 31, 51, 0.18);
  transform: translateY(-4px);
  border-color: var(--card-border);
  background-color: var(--navy-900);
}
.card-service h3 {
  margin: 0 0 0.65rem;
}


.card-service p {
  margin-bottom: 0;
}
.card-service:hover h3,
.card-service:hover p {
  color: var(--white) !important;
}

/* ---------- Ressources ----------
   Même langage visuel que les cartes services : icône colorée + ruban
   flèche en coin bas-gauche. */
.card-ressource:hover {
  box-shadow: 0 0.85rem 2rem rgba(11, 31, 51, 0.18);
  transform: translateY(-3px);
  background-color: var(--navy-900);
}
.card-ressource {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
  overflow: hidden;
  padding-bottom: 3.25rem !important;
}
.card-ressource.card-analyse:hover {
  border-color: var(--card-border);
}
.card-ressource.card-veille:hover {
  border-color: var(--card-border);
}
.card-ressource:hover h3,
.card-ressource:hover p {
  color: var(--white) !important;
}
.card-ressource:hover .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}
.filter-btn {
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.filter-btn.active,
.filter-btn:hover {
  background-color: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}
.badge-analyse {
  background-color: var(--accent);
  color: var(--white);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
}
.badge-veille {
  background-color: var(--gray-300);
  color: var(--gray-900);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
}
.card-ressource {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
  background-color: var(--white);
}

/* ---------- Landing urgence ---------- */
.hero-urgence {
  background: linear-gradient(135deg, #3a1414 0%, var(--navy-900) 55%);
}
.tag-urgence {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  display: inline-block;
}

/* ---------- Formulaire contact ---------- */
.form-label {
  font-weight: 600;
  color: var(--navy-900);
}
.form-control, .form-select {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem rgba(47, 111, 237, 0.15);
}
#champ-delai {
  display: none;
}
#form-feedback {
  display: none;
}

/* ---------- Images (photos placeholder, à remplacer) ---------- */
.img-rounded {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 1rem 2.5rem rgba(11, 31, 51, 0.12);
}
.consultant-photo {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 1rem 2.5rem rgba(11, 31, 51, 0.15);
  border: 4px solid var(--white);
}

/* ---------- Pourquoi un consultant externe ---------- */
.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.why-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--gray-100);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* ---------- Cartes articles (accueil) ----------
   Même langage visuel que les cartes services/ressources. */
.card-article-home {
  display: block;
  position: relative;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 3.25rem;
  height: 100%;
  background-color: var(--white);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.card-article-home:hover {
  box-shadow: 0 0.85rem 2rem rgba(11, 31, 51, 0.18);
  transform: translateY(-3px);
  border-color: var(--card-border);
  background-color: var(--navy-900);
}
.card-article-home:hover h3 {
  color: var(--white) !important;
}

/* ---------- Divers ---------- */
.badge-secteur {
  background-color: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-weight: 500;
  padding: 0.35rem 0.8rem;
}
blockquote.note-interne {
  border-left: 3px solid var(--accent);
  background-color: var(--gray-100);
  padding: 1rem 1.25rem;
  color: var(--gray-700);
  font-size: 0.95rem;
}


/* ---------- Bandeau referentiel ---------- */

.refer-logo {
  height: 70px;      /* augmente la taille */
  width: 450px;
  object-fit: contain;
  max-width: 100%;
}

.refer-logo1 {
  height: 120px;      /* augmente la taille */
  width: 450px;
  object-fit: contain;
  max-width: 100%;
}

/* ---------- Bandeau "Ils nous ont fait confiance" ----------
   Emplacement volontaire : juste avant le bloc CTA final, pour
   renforcer la crédibilité au moment où le visiteur envisage de
   prendre contact. Logos en placeholder texte tant que les vrais
   logos clients ne sont pas disponibles (cf. commentaire HTML). */
.trust-band {
  padding: 3rem 0;
  border-top: 1px solid var(--gray-300);
}
.trust-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-500);
}
.trust-logo-placeholder {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  color: var(--gray-500);
  font-weight: 600;
  font-size: 0.9rem;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.trust-logo-placeholder:hover {
  opacity: 1;
  filter: none;
  color: var(--navy-900);
  border-color: var(--accent);
}

 /* ---------- Vague décorative en fond, pleine largeur d'écran ----------
     Astuce "full-bleed" : on sort du conteneur centré (max-width) en se
     positionnant par rapport au <body> (position:relative) et en utilisant
     100vw + left:50% + translateX(-50%) pour recouvrir tout l'écran,
     même si la section elle-même est centrée avec une largeur max. */
  .bg-swoosh-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    transform: translate(-50%, -50%); /* centré à la fois horizontalement et verticalement */
    z-index: 0;
    overflow-x: hidden;  /* cache le débordement horizontal (évite la barre de scroll du 100vw) */
    overflow-y: visible; /* mais laisse les vagues déborder verticalement librement */
    pointer-events: none; /* laisse cliquer/survoler à travers */
  }

  .bg-swoosh-wrap svg{
    display: block;
    width: 100%;
    height: 400px; /* hauteur "de référence" du SVG, sert juste à calibrer l'échelle */
    overflow: visible; /* désactive le découpage par défaut du SVG à son viewBox */
  }

  .wave-path{
    fill: none;
    stroke-width: var(--wave-thickness);
    stroke-linecap: round; /* bouts arrondis */
  }

  /* la 2ᵉ vague est une copie de la 1ère, juste décalée vers le bas */
  /* la 2ᵉ vague (groupe entier, forme + couleur) est décalée vers le bas */
  .wave-2-group{
    transform: translateY(calc(var(--wave-gap) * 1px));
  }

  /* tout le contenu réel passe au-dessus du SVG de fond */
  .services-header,
  .services-grid{
    position: relative;
    z-index: 1;
  }





   /* why us section*/

    .why-us-section{
    /*background: linear-gradient(135deg, rgba(74,150,138,0.85) 0%, rgba(255,255,255,0.85) 20%, rgba(255,255,255,0.85) 80%, rgba(74,150,138,0.85) 100%);
      */
    background: linear-gradient(135deg, rgba(78, 42, 128, 0.85) 0%, rgba(255,255,255,0.85) 15%, rgba(255,255,255,0.85) 90%, rgba(78, 42, 128, 0.85) 100%);
    padding: 70px 0;
  }

  .why-us-title{
    font-weight: 800;
    color: #101f2f;
    font-size: 1.6rem;
  }

  /* ---------- Chaque colonne ---------- */
  .why-us-item{
    padding: 10px 28px;
  }

  /* ---------- Le trait vertical entre les colonnes ----------
     On ne met le border-left qu'à partir de md (768px), c'est-à-dire
     seulement quand les 4 colonnes sont bien alignées sur UNE seule
     rangée. En dessous (mobile, 2 par ligne), pas de trait : ça
     éviterait un trait mal placé sur la colonne qui redescend à la ligne. */
  @media (min-width: 768px){
    .why-us-item:not(:first-child){
      border-left: 1px solid #d8d5cf;
    }
  }

  .why-us-icon{
    font-size: 2.4rem;
    color: #33507a;
    margin-bottom: 14px;
    display: inline-block;
  }

  .why-us-heading{
    font-size: 1.05rem;
    font-weight: 700;
    color: #33507a;
    margin-bottom: 8px;
  }

  .why-us-text{
    font-size: 0.85rem;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.5;
  }


  /*Une approche */


/* ---------- Ligne principale ---------- */
.process-row{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;   /* tient sur une seule ligne */
  width: 100%;
}

/* ---------- Une étape ---------- */
.process-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;   /* les 4 étapes se partagent l'espace dispo, à parts égales */
  min-width: 0;  /* autorise à rétrécir sous la largeur naturelle du texte */
  padding: 0 2px;
}

/* boîte qui contient le cercle : hauteur fixe, sert de repère pour aligner les flèches */
.process-icon-wrap{
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}

.process-icon-circle{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-icon-circle i{
  font-size: 1.3rem;
  color: var(--navy);
}

/* le petit badge numéroté, en chevauchement du coin haut-gauche du cercle */
.process-badge{
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-title{
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 6px 0;
}

.process-text{
  font-size: 0.75rem;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Flèche entre deux étapes ----------
   même hauteur que .process-icon-wrap : reste alignée avec le CENTRE
   des cercles, peu importe que le texte en dessous fasse 2 ou 3 lignes. */
.process-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 0 2px 14px 2px;
  color: var(--navy);
  font-size: 0.95rem;
  flex: 0 0 auto;  /* la flèche garde sa taille, ne se réduit pas */
}

/* ---------- Mobile : repasse en grille 2x2 sans flèches ---------- */
@media (max-width: 480px){
  .process-row{
    flex-wrap: wrap;
  }
  .process-arrow{
    display: none;
  }
  .process-step{
    flex: 0 0 45%;
    margin-bottom: 24px;
  }
}



/*expertises de la page expertises*/
  /* =========================================================
     SECTION 1 — "Des enjeux étroitement liés"
     Même logique que le composant des 4 étapes numérotées,
     mais sans badge, avec une flèche double (↔).
     ========================================================= */
  .issues-section{ padding: 60px 0; }
  .issues-title{ font-weight: 800; color: var(--navy); font-size: 1.6rem; margin-bottom: 10px; }
  .issues-text{ color: var(--gray-900); font-size: 0.95rem; }

  .issue-row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .issue-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
  }

  .issue-icon-circle{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }

  .issue-icon-circle i{ font-size: 1.5rem; color: var(--navy); }

  .issue-title{ font-weight: 800; color: var(--navy); font-size: 0.95rem; margin-bottom: 4px; }
  .issue-text{ font-size: 0.78rem; color: var(--gray-900); line-height: 1.4; }

  /* même hauteur que .issue-icon-circle pour rester alignée avec le centre des cercles */
  .issue-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin: 0 4px 12px 4px;
    color: var(--navy);
    font-size: 1.1rem;
    flex: 0 0 auto;
  }

  @media (max-width: 767px){
    .issue-row{ flex-wrap: wrap; }
    .issue-arrow{ display: none; }
    .issue-step{ flex: 0 0 45%; margin-bottom: 20px; }
  }


   /* =========================================================
     Page expertise SECTION 2 — "Nos cinq domaines d'expertise"
     Lignes qui alternent icône/texte gauche-droite + fond
     blanc/bleu clair.
     ========================================================= */
  .expertise-section{ padding: 60px 0 20px; }
  .expertise-title{ font-weight: 800; color: var(--navy); font-size: 1.6rem; margin-bottom: 6px; }
  .expertise-subtitle{ color: var(--gray-900); font-size: 0.95rem; margin-bottom: 10px; }

  .expertise-item{ 
    padding: 40px 0; 
    margin-top: 2px;
    margin-bottom: 5px;
    border: 0.5px solid #6e619f;
    border-radius: var(--radius);
    

    
  }
  .expertise-item.bg-tint{ 
    background: #7696999a; 
    margin-top: 2px;
    margin-bottom: 5px;
    border: 0.5px solid #769699;
    border-radius: var(--radius);
  }

  /* 3 colonnes : icône / texte (plus large) / bouton.
     Le bouton reste TOUJOURS en 3ᵉ position (order:3).
     Seules icône et texte permutent, via .expertise-row-swap
     sur les lignes paires — et seulement à partir de 768px :
     en dessous, tout reste empilé dans l'ordre du HTML
     (icône, puis texte, puis bouton), quelle que soit la ligne. */
  .expertise-icon-col{ order: 1; }
  .expertise-text-col{ order: 2; }
  .expertise-btn-col{ order: 3; text-align: right; }

  @media (min-width: 768px){
    .expertise-row-swap .expertise-icon-col{ order: 2; }
    .expertise-row-swap .expertise-text-col{ order: 1; }
  }

  .expertise-icon-principal{
    font-size: 4.5rem;
    color: var(--navy);
    text-align: center;
    display: block;
    border-left: 1px solid #a9a3c0;
    border-right: 1px solid #a9a3c0;
  }

  .expertise-item h3{ color: var(--navy); font-weight: 800; font-size: 1.15rem; margin-bottom: 8px; }
  .expertise-item p{ color: var(--gray-900); font-size: 0.9rem; margin-bottom: 14px; }

  .expertise-tags{ margin-bottom: 18px; }
  .tag-pill{
    display: inline-block;
    background: #e4e9f7;
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 6px 6px 0;
  }











/* La  partie expertise de la page d'acceuill*/


 .expertises-wrap{ max-width: 1200px; margin: 0 auto; }

  .expertises-title{
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--navy);
    margin-bottom: 40px;
  }

  /* ---------- Grille des 5 cartes ---------- */
  .expertises-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  @media (max-width: 992px){
    .expertises-grid{ grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px){
    .expertises-grid{ grid-template-columns: repeat(2, 1fr); }
  }





  /* ---------- La carte : même logique de hover que les cartes Services
     (fond blanc -> marine, texte -> blanc), juste centrée au lieu
     d'alignée à gauche ---------- */
  .expertise-card{
    position: relative;
    border: 1px solid var(--card-border);
    overflow: hidden; 
    border-radius: var(--radius);
    background: #fff;
    padding: 34px 20px 58px 20px;
    text-align: center;
    min-height: 230px;
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .25s ease;
  }

  .expertise-card:hover{
    background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    transform: translateY(-3px);
  }

  .expertise-icon{
    font-size: 2.3rem;
    color: var(--navy);
    margin-bottom: 16px;
    transition: color .25s ease;
  }

  .expertise-card h3{
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 8px 0;
    transition: color .25s ease;
  }

  .expertise-card p{
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    transition: color .25s ease;
  }

  .expertise-card:hover .expertise-icon,
  .expertise-card:hover h3,
  .expertise-card:hover p{
    color: #fff;
  }

  /* ---------- Le ruban "En savoir plus" — identique à celui des Services ---------- */
  .corner-arrow{
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 56px;
    height: 44px;
    background-color: var(--navy-900);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 18px;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.3s ease, background-color 0.25s ease;
  }

  .corner-arrow i{ color: #fff; font-size: 0.95rem; flex-shrink: 0; }

  .corner-arrow .corner-text{
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .expertise-card:hover .corner-arrow{
    width: 78%;
    background: var(--green);
  }

  .expertise-card:hover .corner-arrow .corner-text{
    opacity: 1;
    transition: opacity .25s ease .15s;
  }



  /*page expertise principale*/



  /* =========================================================
     SECTION 1— "Une intervention adaptée à votre situation"
     ========================================================= */
  .section.intervention-section{
    background: #fff;
    padding: 50px 0 60px;
  }
  .intervention-title{ font-weight:800; color:var(--navy); font-size:1.5rem; margin-bottom:6px; }
  .intervention-subtitle{ color:var(--gray-900); font-size:0.95rem; margin-bottom:30px; }

  .intervention-box{
    border: 1px solid #9b6eb0;
    border-radius: 10px;
    padding: 30px 30px 34px 30px;
  }

  .intervention-row{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    
  }
  .intervention-item{
    flex: 1 1 220px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border: 1px solid #9b6eb0;
    border-radius: 10px;
  }
  .intervention-item i{
    font-size: 1.6rem;
    color: var(--navy);
    flex-shrink: 0;
  }
  .intervention-item h4{
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 4px 0;
  }
  .intervention-item p{
    font-size: 0.85rem;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
  }


  /*pour le fichier data_integrity_expertise reutilisé pour les autres expertises*/ 

   /* ---------- Bande du haut : une seule barre, icône+texte séparés
     par des traits verticaux (pas des badges individuels) ---------- */
  .pills-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid #e6e9f2;
    border-bottom: 1px solid #e6e9f2;
    padding: 16px 0;
    margin-bottom: 44px;
  }
  .pills-row1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 16px 0;
    margin-bottom: 44px;
  }
  .pill-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
  }
  .textwhite{color:white}

    .pill-item{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
  }
  /* le trait vertical entre deux éléments, seulement à partir de
     768px (pas de sens une fois que ça retombe à la ligne) */
  @media (min-width: 768px){
    .pill-item + .pill-item{
      border-left: 1px solid #e0e3ee;
    }
  }
  .pill-item i{ font-size: 1rem; color: var(--navy); }

  /* ---------- Bloc principal : texte à gauche, grille à droite ---------- */
  .data-check-row{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .data-check-text-col{ flex: 1 1 280px; max-width: 320px; }
  .data-check-grid-col{ flex: 2 1 500px; }

  .data-check-title{
    font-weight: 800;
    color: var(--navy);
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 14px 0;
  }
  .data-check-text{
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
  }

  /* ---------- Grille des 6 cartes "risques" ---------- */
  .risk-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 768px){
    .risk-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px){
    .risk-grid{ grid-template-columns: 1fr; }
  }

  .risk-card{
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 18px;
    background: #fff;
  }
  .risk-card-icons{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .risk-card-icons .main-icon{ font-size: 1.6rem; color: var(--navy); }
  .risk-card-icons .warn-icon{ font-size: 0.95rem; color: #dc3545; }

  .risk-card h4{
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 6px 0;
  }
  .risk-card p{
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
  }

/*partie des cadres déroulants*/

 /* ---------- Grille 3 colonnes ---------- */
  .services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 900px){
    .services-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .services-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- La carte ---------- */
  .svc-card{
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 30px 26px 24px 26px;
    text-align: center;
    background: #fff;
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  .svc-card:hover{
    box-shadow: 0 10px 22px rgba(22,38,74,.08);
    border-color: #d7ddee;
  }

  .svc-icon{
    font-size: 2.2rem;
    color: var(--purple-dark);
    margin-bottom: 14px;
  }
  .svc-title{
    font-weight: 800;
    color: var(--navy);
    font-size: 1.02rem;
    margin: 0 0 8px 0;
  }
  .svc-desc{
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
  }

.svc-more h5{ font-size: 0.82rem; font-weight: 800; color: var(--navy); margin: 14px 0 6px 0; }
.svc-more ul{ margin: 0 0 10px 0; padding-left: 18px; }
.svc-more ul li{ font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 4px; }
.svc-more-btn{
  display: block; align-items: center; gap: 6px; margin-top: 8px;
  border: 1.5px solid var(--purple-dark); color: #fff; background: var(--purple);
  border-radius: 6px; padding: 8px 16px; font-weight: 700; font-size: 0.8rem;
  text-decoration: none; transition: background .2s ease, color .2s ease;
  text-align: center;
  
}
.svc-more-btn:hover{ background: var(--green); color: #fff; }

  /* ---------- Le contenu caché qui se déplie ----------
     max-height:0 + overflow:hidden au repos (occupe 0 espace réel,
     pas juste invisible) -> max-height suffisant + opacity:1 quand
     la carte a la classe .is-open, ajoutée par le JS au clic. */
  .svc-more{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    text-align: left;
    transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  }
  .svc-card.is-open .svc-more{
    max-height: 400px; /* large marge, juste un plafond */
    opacity: 1;
    margin-top: 14px;
  }
  .svc-more-inner{
    border-top: 1px solid #edeff5;
    padding-top: 14px;
  }
  .svc-more p{
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 10px 0;
  }
  .svc-more ul{
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ---------- Le bouton rond avec la flèche ----------
     Il tourne de 180° et change de couleur quand la carte est ouverte. */
  .svc-toggle{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--purple-dark);
    background: #fff;
    color: var(--purple-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 16px;
    transition: transform .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .svc-toggle:hover{
    background: var(--purple-dark);
    color: #fff;
  }
  .svc-card.is-open .svc-toggle{
    transform: rotate(180deg);
    background: var(--purple-dark);
    color: #fff;
  }

  /*suite de la page data integrity expertise*/

   /* =========================================================
     SECTION 1 — Maîtriser l'ensemble du cycle de vie des données
     Rangée de 5 étapes reliées par des flèches.
     ========================================================= */
  .lifecycle-row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .lifecycle-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
  }
  .lifecycle-icon{
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1.5px solid var(--card-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .lifecycle-icon i{ font-size: 1.4rem; color: var(--navy); }
  .lifecycle-title{ font-weight: 800; color: var(--navy); font-size: 0.88rem; margin: 0 0 4px 0; }
  .lifecycle-text{ font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; margin: 0; }

  /* la flèche reste à la même hauteur que le centre des icônes,
     peu importe la longueur du texte en dessous */
  .lifecycle-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    margin: 0 2px;
    color: #b7bdd6;
    font-size: 1rem;
    flex: 0 0 auto;
  }

  @media (max-width: 900px){
    .lifecycle-row{ flex-wrap: wrap; row-gap: 24px; }
    .lifecycle-arrow{ display: none; }
    .lifecycle-step{ flex: 0 0 45%; }
  }

  /* =========================================================
     SECTION 2 — Des environnements GxP variés
     Deux boîtes côte à côte.
     ========================================================= */
  .env-row{
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .env-box{
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 24px 26px;
  }
  .env-box.env-domains{ flex: 1 1 560px; }
  .env-box.env-tools{ flex: 1 1 380px; }

  .env-box-title{
    font-weight: 800;
    color: var(--navy);
    font-size: 0.95rem;
    margin: 0 0 18px 0;
  }

  .domains-grid{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .domain-item{
    flex: 1 1 0;
    min-width: 90px;
    text-align: center;
  }
  .domain-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
  }
  .domain-icon i{ font-size: 1.15rem; color: var(--navy); }
  .domain-item h5{ font-weight: 800; color: var(--navy); font-size: 0.85rem; margin: 0 0 3px 0; }
  .domain-item p{ font-size: 0.72rem; color: var(--text-muted); margin: 0; line-height: 1.3; }

  .tools-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .tool-pill{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 12px 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy);
    background: #fbfbfd;
  }

  @media (max-width: 767px){
    .domains-grid{ justify-content: flex-start; }
    .domain-item{ flex: 0 0 30%; }
    .tools-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* =========================================================
     SECTION 3 — Notre méthode
     Grille 3 colonnes x 2 lignes, icône+badge à gauche, texte à droite.
     ========================================================= */
  .method-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
  }
  .method-item{
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .method-icon-wrap{
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }
  .method-icon-circle{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid var(--card-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .method-icon-circle i{ font-size: 1.3rem; color: var(--navy); }
  .method-badge{
    position: absolute;
    top: -6px;
    left: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .method-text h4{ font-weight: 800; color: var(--navy); font-size: 0.95rem; margin: 4px 0 4px 0; }
  .method-text p{ font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

  @media (max-width: 900px){
    .method-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .method-grid{ grid-template-columns: 1fr; }
  }


  /* =========================================================
     SECTION 5 — Questions fréquentes (accordéon)
     ========================================================= */
  .faq-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .faq-item{
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .faq-question{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--navy);
    cursor: pointer;
  }
  .faq-question i{
    flex-shrink: 0;
    transition: transform .3s ease;
    color: var(--navy);
  }
  .faq-item.is-open .faq-question i{ transform: rotate(180deg); }

  /* même principe de dépliage que pour les cartes de services :
     max-height:0 au repos (occupe 0 espace réel) -> valeur large + opacity:1 à l'ouverture */
  .faq-answer{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
  }
  .faq-item.is-open .faq-answer{
    max-height: 300px;
    opacity: 1;
  }
  .faq-answer-inner{
    padding: 0 20px 18px 20px;
    border-top: 1px solid #f0f1f7;
    padding-top: 14px;
  }
  .faq-answer-inner p{
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* =========================================================
     NOUVEAU — le rond numéroté plein (fond navy, chiffre blanc),
     à utiliser À LA PLACE de .lifecycle-icon pour "Notre méthode"
     (la rangée et les flèches, elles, réutilisent .lifecycle-row /
     .lifecycle-arrow tels quels).
     ========================================================= */
  .method-step-number{
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--purple);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem;
    margin-bottom: 12px;
  }



  /*Nouveaux style pour le fichier remediation_expertises*/
 *{ box-sizing: border-box; }
  body{ font-family:"Segoe UI", Arial, sans-serif; margin:0; color:#1b1b1b; background:var(--bg-page); }
  .container{ max-width:1140px; margin:0 auto; padding:0 20px; }
  .section{ padding: 46px 0; }
  .section-title{ font-weight:800; color:var(--navy); font-size:1.4rem; margin:0 0 6px 0; }
  .section-subtitle{ color:var(--text-muted); font-size:0.92rem; margin:0 0 26px 0; }


  /* =========================================================
     NOUVEAU — mise en page en 2 colonnes pour la section 1 :
     process à gauche, image à droite. Le titre/sous-titre restent
     en pleine largeur au-dessus (classes .section-title/-subtitle
     déjà existantes).
     ========================================================= */
  .intro-row{
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .intro-process-col{ flex: 1 1 520px; }
  .intro-image-col{ flex: 1 1 260px; display: flex; justify-content: center; }
  .intro-image-col img{ max-width: 100%; height: auto; border-radius: 12px; }
  @media (max-width: 900px){
    .intro-image-col{ order: -1; max-width: 320px; margin: 0 auto; }
  }

  /* =========================================================
     DÉJÀ DANS TON CSS — .lifecycle-row / .lifecycle-step /
     .lifecycle-icon / .lifecycle-text / .lifecycle-arrow, déjà
     utilisés pour "Maîtriser l'ensemble du cycle de vie des données".
     ========================================================= */
  .lifecycle-row{ display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
  .lifecycle-step{ display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 0; min-width: 0; padding: 0 6px; }
  .lifecycle-icon{ width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid var(--card-border); background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; flex-shrink: 0; }
  .lifecycle-icon i{ font-size: 1.3rem; color: var(--navy); }
  .lifecycle-title{ font-weight: 800; color: var(--navy); font-size: 0.85rem; margin: 0 0 4px 0; }
  .lifecycle-text{ font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; margin: 0; }
  .lifecycle-arrow{ display: flex; align-items: center; justify-content: center; height: 52px; margin: 0 2px; color: #b7bdd6; font-size: 1rem; flex: 0 0 auto; }
  @media (max-width: 700px){
    .lifecycle-row{ flex-wrap: wrap; row-gap: 20px; }
    .lifecycle-arrow{ display: none; }
    .lifecycle-step{ flex: 0 0 45%; }
  }

  /* =========================================================
     DÉJÀ DANS TON CSS — .tools-grid / .tool-pill / .tool-pill-icon
     / .tools-grid-row, déjà utilisés pour "Des systèmes variés".
     ========================================================= */
  .tools-grid{ display: grid; gap: 10px; }
  .tool-pill{ display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--card-border); border-radius: 6px; padding: 14px 8px; font-size: 0.8rem; font-weight: 700; color: var(--navy); background: #fbfbfd; }
  .tool-pill-icon{ flex-direction: column; gap: 8px; padding: 16px 8px; }
  .tool-pill-icon i{ font-size: 1.3rem; color: var(--navy); }
  .tools-grid-row{ grid-template-columns: repeat(8, 1fr); }
  @media (max-width: 992px){ .tools-grid-row{ grid-template-columns: repeat(4, 1fr); } }
  @media (max-width: 560px){ .tools-grid-row{ grid-template-columns: repeat(2, 1fr); } }

  /* =========================================================
     NOUVEAU — section teintée "Une remédiation fondée sur les
     risques" : fond de section + 3 cartes icône/titre/texte.
     ========================================================= */
  .principle-section{ background-color: rgba(141, 162, 170,0.95)  }
  .principle-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 900px){ .principle-grid{ grid-template-columns: 1fr; } }
  .principle-card{
    background: #fff;
    border-radius: 10px;
    padding: 22px;
  }
  .principle-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .principle-icon{
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-tint);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .principle-icon i{ font-size: 1.15rem; color: var(--navy); }
  .principle-card h4{
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0;
  }
  .principle-card p{
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
  }

  /*Ajouté pour le fichier autit-inspec*/
    /* ===== NOUVEAU — "Périmètres évalués" : grille icône + libellé ===== */
  .perimeter-section{ background: #fff; }
  .perimeter-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
  @media (max-width: 900px){ .perimeter-grid{ grid-template-columns: repeat(2, 1fr); } }
  .perimeter-item{ display: flex; align-items: center; gap: 14px; }
  .perimeter-icon{ width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--card-border); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .perimeter-icon i{ font-size: 1.2rem; color: var(--navy); }
  .perimeter-item span{ font-weight: 700; color: var(--navy); font-size: 0.88rem; line-height: 1.3; }


  /*fichier formation_expertise*/

  /* ===== NOUVEAU — "Nos formations GxP" : cartes avec bouton "En savoir plus" ===== */
  .formation-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 1100px){ .formation-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 700px){ .formation-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px){ .formation-grid{ grid-template-columns: 1fr; } }
  .formation-card{ border: 1px solid var(--card-border); border-radius: 10px; padding: 22px 18px; background: #fff; display: flex; flex-direction: column; transition: box-shadow .25s ease, border-color .25s ease; }
  .formation-card:hover{ box-shadow: 0 10px 22px rgba(22,38,74,.08); border-color: #d7ddee; }
  .formation-icon{ width: 42px; height: 42px; border-radius: 10px; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
  .formation-icon i{ font-size: 1.2rem; color: var(--navy); }
  .formation-card h3{ font-size: 0.92rem; font-weight: 800; color: var(--navy); margin: 0 0 8px 0; line-height: 1.35; }
  .formation-card p{ font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px 0; flex-grow: 1; }
  .formation-link{ display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 700; font-size: 0.82rem; text-decoration: none; }
  .formation-link i{ font-size: 0.8rem; transition: transform .2s ease; }
  .formation-link:hover{ text-decoration: underline; }
  .formation-link:hover i{ transform: translateX(3px); }

  /* ===== NOUVEAU — "Quelques concepts qui marquent les esprits" ===== */
  .concept-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 900px){ .concept-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .concept-grid{ grid-template-columns: 1fr; } }
  .concept-item{ border: 1px solid var(--card-border); border-radius: 10px; padding: 18px; background: #fff; }
  .concept-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .concept-icon{ width: 38px; height: 38px; border-radius: 50%; background: var(--bg-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .concept-icon i{ font-size: 1.05rem; color: var(--navy); }
  .concept-item h4{ font-size: 0.88rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.3; }
  .concept-item p{ font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin: 0; }


  /* page à propos */

  /* ===== NOUVEAU — "Le fondateur" ===== */
  .founder-row{ display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; }

  

  .founder-info-col{ flex: 1 1 380px; min-width: 280px; }
  .founder-name{ font-weight: 800; color: var(--navy); font-size: 1.5rem; margin: 0 0 4px 0; }
  .founder-role{ font-weight: 700; color: #3854c9; font-size: 0.95rem; margin: 0 0 16px 0; }
  .founder-text{ color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin: 0 0 14px 0; }

  .founder-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px 0; }
  .founder-tag{ background: var(--bg-tint); color: var(--navy); font-size: 0.78rem; font-weight: 700; padding: 6px 16px; border-radius: 20px; }

  /* ===== NOUVEAU — "Notre ambition" (bande pleine largeur, fond navy) ===== */
  .ambition-band{ background: var(--purple); padding: 32px 0; }
  .ambition-row{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .ambition-icon{ font-size: 2.6rem; color: #fff; flex-shrink: 0; }
  .ambition-title{ color: #fff; font-weight: 800; font-size: 1.05rem; margin: 0 0 8px 0; line-height: 1.4; }
  .ambition-text{ color: #c7cee8; font-size: 0.85rem; line-height: 1.6; margin: 0; max-width: 720px; }

    /* ===== NOUVEAU — "Une expertise centrale, des compétences complémentaires" ===== */
  .central-row{ display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; }
  .central-text-col{ flex: 1 1 480px; }
  .central-image-col{ flex: 1 1 320px; }
  @media (max-width: 900px){ .central-image-col{ order: -1; max-width: 400px; margin: 0 auto; } }

  .central-intro-bold{ font-weight: 800; color: var(--navy); font-size: 0.95rem; margin: 0 0 8px 0; }
  .central-intro-text{ color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 26px 0; }

  .central-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
  @media (max-width: 560px){ .central-grid{ grid-template-columns: 1fr; } }
  .central-item{ display: flex; gap: 12px; align-items: flex-start; }
  .central-item i{ font-size: 1.3rem; color: var(--navy); flex-shrink: 0; margin-top: 2px; }
  .central-item h4{ font-weight: 800; color: var(--navy); font-size: 0.88rem; margin: 0 0 4px 0; }
  .central-item p{ color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; margin: 0; }

  .central-image-col img{ width: 100%; height: auto; border-radius: 12px; display: block; }
  .central-caption{ color: var(--text-muted); font-size: 0.82rem; text-align: center; margin-top: 14px; line-height: 1.5; }

 









  /* ----- Fil d'Ariane — généré automatiquement, voir le script
     en bas de page. Sur chaque page, il suffit d'écrire :
       <nav class="breadcrumb-bar" data-breadcrumb="À propos"></nav> ----- */
  .breadcrumb-bar{ display: block; padding: 14px 0 0; font-size: 0.82rem; }
  .breadcrumb-bar .breadcrumb-link{ color: #fff; text-decoration: none; font-weight: 700; }
  .breadcrumb-bar .breadcrumb-link:hover{ text-decoration: underline; }
  .breadcrumb-bar .breadcrumb-sep{ color: rgba(255,255,255,.55); margin: 0 8px; }
  .breadcrumb-bar .breadcrumb-current{ color: rgba(255,255,255,.85); }

  .hero-row{ display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
  .hero-text-col{ flex: 1 1 460px; }

.hero-image-col{
  position: relative;
  width: 100%; max-width: 520px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  overflow: hidden; /* nécessaire pour que la photo respecte les coins arrondis */
}

/* Remplace aspect-ratio : ce pseudo-élément force la hauteur de la
   boîte à toujours valoir 75% de sa largeur (ratio 4:3), de façon
   fiable sur tous les navigateurs, y compris les plus anciens. */
.hero-image-col::before{
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 → 3 ÷ 4 = 75% */
}

.hero-image-col img{
  position: absolute;
  inset: 20px; /* reproduit exactement la marge qu'avait ton padding:20px */
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

@media (max-width: 991.98px){
  .hero-image-col{ margin-bottom: 28px; }
}
@media (max-width: 900px){
  .hero-image-col{ order: -1; margin-bottom: 8px; }
}
  .hero-eyebrow{
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    font-size: 0.78rem;
    color: #fff;
    margin: 22px 0 12px 0;
  }
  .hero-title{
    font-weight: 800;
    color: #fff;
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 18px 0;
  }
  .hero-text{
    color: rgba(255,255,255,.9);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 14px 0;
    max-width: 520px;
  }
  .hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }


  .btn-hero-primary{
    background-color: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  
  .btn-hero-primary:hover{ 
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
   }
  .btn-hero-outline{
    display: inline-flex; align-items: center;
    background: transparent; color: #fff;
    border: 1.5px solid #fff;
    border-radius: 8px; padding: 11px 22px;
    font-weight: 700; font-size: 0.9rem;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
    font-size: 0.9rem;
  }
  .btn-hero-outline:hover{ background: #fff; color: #4e2a80; }

  .hero-image-wrap{
    width: 100%; max-width: 420px;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1.5px dashed rgba(255,255,255,.55);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.85rem; font-weight: 600; text-align: center;
    padding: 20px;
  }
  @media (max-width: 991.98px){
    .hero-image-col{ margin-bottom: 28px; }
  }




  
  /*Page offre*/
    /* ===== NOUVEAU — "Le déroulement d'une mission" =====
     5 étapes numérotées, reliées par un trait horizontal, avec
     une icône, un titre et une description sous chaque numéro. */
  .mission-row{ position: relative; display: flex; justify-content: space-between; }

  /* Le trait horizontal passe derrière les pastilles numérotées
     (z-index inférieur), centré sur leur hauteur. */
  .mission-line{
    position: absolute;
    top: 15px;
    left: 6%; right: 6%;
    height: 2px;
    background: var(--card-border);
    z-index: 0;
  }

  .mission-step{
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0 8px;
  }

  .mission-number{
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-weight: 800; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px auto;
  }

  .mission-icon{
    width: 58px; height: 58px;
    border-radius: 50%;
    border: 1.5px solid var(--card-border);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px auto;
  }
  .mission-icon i{ font-size: 1.4rem; color: var(--navy); }

  .mission-step h4{ font-weight: 800; color: var(--navy); font-size: 0.92rem; margin: 0 0 6px 0; }
  .mission-step p{ font-size: 0.78rem; color: var(--gray-900); line-height: 1.45; margin: 0; }
  

  @media (max-width: 820px){
    .mission-row{ flex-wrap: wrap; row-gap: 32px; }
    .mission-line{ display: none; }
    .mission-step{ flex: 0 0 45%; }
  }
  @media (max-width: 480px){
    .mission-step{ flex: 0 0 100%; }
  }

  /* Si la police de base était à 100% (16px), passez-la à 112.5% (18px) */
html {
  font-size: 114%; 
}


/*Pour les différents services*/
  /* =========================================================
     SECTION 1 — « Quand faire appel à nous ? »
     4 colonnes : icône ronde + libellé centré, sans carte.
     ========================================================= */
  
  /* =========================================================
     GABARIT réutilisé tel quel (identique à la page précédente)
     ========================================================= */
  .whenus-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
  }
  .whenus-item{ text-align: center; padding: 0 8px; }
  /* plus besoin des media queries ici non plus */
  .whenus-icon{
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px auto;
  }
  .whenus-icon i{ font-size: 1.3rem; }
  .whenus-item p{ font-size: 0.86rem; color: #333; line-height: 1.4; margin: 0; font-weight: 500; }


  .support-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
  }
  .support-card{
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 26px 16px;
    text-align: center;
  }
  .support-icon{
    width: 46px; height: 46px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px auto;
    font-size: 1.15rem;
  }
  .support-card h4{ font-weight: 700; color: var(--navy); font-size: 0.88rem; margin: 0; line-height: 1.35; }


  .benefits-row{ display: flex; gap: 20px; margin-bottom: 28px; }
  .benefits-card{
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 22px;
  }
  .benefits-card-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .benefits-icon{
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
  }
  .benefits-card h4{ font-weight: 700; color: var(--navy); font-size: 0.9rem; margin: 0; }
  /* Petit tiret décoratif entre le titre et la description,
     comme sur la maquette. */
  .benefits-divider{ width: 22px; height: 2px; background: var(--card-border); margin: 0 0 12px 0; }
  .benefits-card p{ font-size: 0.8rem; color: var(--gray-900); line-height: 1.45; margin: 0; }
  .support-card p{ font-size: 0.8rem; color: var(--gray-900); line-height: 1.45; margin: 0; }

  .benefits-links{
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
    font-size: 0.84rem;
    color: var(--gray-900);
  }

  .benefits-links .sep{ margin: 0 12px; color: #b7bcd6; }

  @media (max-width: 900px){
    .benefits-row{ flex-wrap: wrap; }
    .benefits-card{ flex: 0 0 100%; }
  }
  @media (max-width: 560px){
    .benefits-links .sep{ display: block; margin: 6px 0; }
  }

  .tint-navy   { background: rgba(27,42,107,.10);  color: var(--navy); }
  .tint-sage   { background: rgba(122,157,110,.16); color: var(--icon-sage); }
  .tint-purple { background: rgba(124,92,191,.14);  color: var(--icon-purple); }
  .tint-slate  { background: rgba(74,82,102,.12);   color: var(--icon-slate); }

  /*Page formation*/

   /* =========================================================
     SECTION 1 — Nos principaux thèmes de formation
     Grille de 9 cartes (3 x 3) : badge coloré + titre en tête
     de carte, description en dessous.
     ========================================================= */
  .themes-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .theme-card{
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 22px;
  }
  .theme-card-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }
  .theme-icon{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.82rem;
  }
  .theme-card h4{ font-weight: 700; color: var(--navy); font-size: 0.92rem; margin: 0; }
  .theme-card p{ font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

  /* Couleurs des badges (une par thème) */
  .theme-icon.t-navy  { background: rgba(27,42,107,.12);  color: var(--navy); }
  .theme-icon.t-green { background: rgba(47,158,99,.14);  color: #2f9e63; }
  .theme-icon.t-cyan  { background: rgba(23,162,184,.14); color: #17a2b8; }
  .theme-icon.t-dark  { background: rgba(52,58,74,.12);   color: #343a4a; }
  .theme-icon.t-red   { background: rgba(217,83,79,.14);  color: #d9534f; }
  .theme-icon.t-pink  { background: rgba(214,51,132,.14); color: #d63384; }
  .theme-icon.t-blue  { background: rgba(47,111,214,.14); color: #2f6fd6; }
  .theme-icon.t-teal  { background: rgba(32,150,140,.14); color: #20968c; }
  .theme-icon.t-purple{ background: rgba(103,65,217,.14); color: #6741d9; }

  @media (max-width: 900px){
    .themes-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .themes-grid{ grid-template-columns: 1fr; }
  }

  /* =========================================================
     SECTION 2 — Formation phare : les neuf concepts
     Bandeau navy (titre + sous-titre) + grille 3x3 sur fond
     dégradé clair, chaque item avec une bordure gauche colorée.
     ========================================================= */
  .concepts-card{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--card-border);
  }
  .concepts-head{
    background: var(--navy);
    padding: 32px 30px 26px;
    text-align: center;
  }
  .concepts-head h2{ color: #fff; font-weight: 800; font-size: 1.3rem; margin: 0 0 8px 0; }
  .concepts-head p{ color: rgba(255,255,255,.75); font-size: 0.88rem; margin: 0; }

  .concepts-body{
    background: linear-gradient(180deg, #eef1fb 0%, #f7f8fd 100%);
    padding: 26px 30px 30px;
  }
  .concepts-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .concept-item{
    background: #fff;
    border-left: 4px solid var(--card-border);
    border-radius: 6px;
    padding: 14px 16px;
    font-size: 0.86rem;
    color: #2b2b2b;
    font-weight: 600;
    line-height: 1.4;
  }
  .concept-item.c-blue  { border-left-color: #2f6fd6; }
  .concept-item.c-teal  { border-left-color: #20a488; }
  .concept-item.c-purple{ border-left-color: #6741d9; }

  @media (max-width: 700px){
    .concepts-grid{ grid-template-columns: 1fr; }
    .concepts-head, .concepts-body{ padding-left: 20px; padding-right: 20px; }
  }

    /* =========================================================
     NOUVEAU — grille de logos, largeur auto-adaptative : le
     nombre de colonnes se recalcule tout seul selon la largeur
     disponible, pas besoin de media queries dédiées.
     ========================================================= */
  .confi-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 22px;
  }

  .confi-item{
    background: #fff;
    /*border: 1px solid var(--card-border);*/
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* La boîte a une hauteur FIXE, identique pour les 8 logos.
     object-fit:contain redimensionne chaque image pour qu'elle
     tienne entièrement dans cette boîte (sans la déformer ni la
     recadrer), quelle que soit sa taille ou son ratio d'origine.
     max-width/max-height (et non width/height:100%) empêchent un
     petit logo d'être étiré artificiellement en grand. */
  .confi-logo-box{
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confi-logo-box img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
   
  }


  /* Légende optionnelle sous le logo — supprime les <p class=
     "confi-name"> dans le HTML si tu ne veux pas de nom affiché. */
  .confi-name{
    font-size: 1rem;
    color: var(--text-gray);
    font-weight: 600;
    text-align: center;
    margin: 0;
  }

  .img-expertise{
    opacity: 0.85;
  }

  .img-service{
    opacity: 0.85;
  }






  /* ---------- Widget de consentement cookies (Google Analytics) ----------
   Cadre compact en bas à gauche, plutôt qu'une bannière pleine largeur.
   Masqué par défaut : script.js choisit d'afficher soit le cadre complet
   (.cookie-card), soit le petit bouton rond (.cookie-reopen-btn) une fois
   qu'un choix a été enregistré, pour pouvoir le rouvrir à tout moment. */
/* .cookie-card {
  display: none;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1060;
  width: 320px;
  max-width: calc(100vw - 40px);
  background-color: var(--white);
  border-radius: 16px;
  box-shadow: 0 1rem 2.5rem rgba(11, 31, 51, 0.22);
  padding: 1.5rem 1.35rem 1.25rem;
  animation: cookieCardIn 0.25s ease;
}
@keyframes cookieCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--purple);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.cookie-card-title {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
  color: var(--navy-900);
}
.cookie-card-text {
  font-size: 0.85rem;
  color: var(--gray-700);
  margin-bottom: 1rem;
}
.cookie-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}


.cookie-reopen-btn {
  display: none;
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1060;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--purple);
  color: var(--white);
  font-size: 1.25rem;
  box-shadow: 0 0.6rem 1.5rem rgba(11, 31, 51, 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.cookie-reopen-btn:hover {
  background-color: var(--purple);
  transform: translateY(-2px);
} */



/* Bouton de bascule de langue FR/EN, dans la navbar */
.nav-link-lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 0.7rem;
  margin-left: 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-link-lang-switch:hover {
  background-color: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}
.navbar-collapse .nav-link-lang-switch {
  width: auto;
  margin: 0.5rem 0 0;
}