/* ==========================================================================
   COFIMA INTERNATIONAL Feuille de style principale
   Charte graphique : navy profond, bleu accent COFIMA, gris clair, filet bleu moyen
   ========================================================================== */

:root{
  /* --- Couleurs de marque --- */
  --navy-deep:   #162c56;   /* fond header sombre / footer */
  --navy:        #204081;   /* bleu principal COFIMA (logo) */
  --navy-light:  #2850a1;
  --accent:      #4b79c8;   /* bleu accent (couleur de survol du site actuel) */
  --accent-dark: #3a5fa0;
  --blue-mid:       #4A70B7;   /* bleu moyen COFIMA filet "grand livre", labels, liens */
  --blue-mid-light: #8CA6D9;   /* variante claire du bleu moyen, réservée au texte sur fond sombre (navy/slate) pour préserver le contraste */
  --slate:       #2e363a;   /* section sombre (déjà utilisée sur l'ancien site) */
  --brown:       #8B5A2B;   /* accent brun validé client dividers, hover secondaire, détails du hero */
  --brown-dark:  #5C3B1C;
  --brown-light: #C99B6A;   /* variante claire validée client, réservée au texte/détails sur fond sombre (nav, footer, hero) */
  --gray-bg:     #f6f7f9;
  --gray-line:   #e3e6ea;
  --gray-mid:    #949599;   /* usage réservé : labels, bordures, texte large contraste insuffisant pour du texte de paragraphe sur blanc */
  --gray-text:   #667085;   /* gris plus soutenu, pour le texte de paragraphe courant (contraste AA) */
  --ink:         #172334;
  --white:       #ffffff;

  --font-display: "Lora", Georgia, serif;
  --font-body:    "Inter", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(14,32,56,.06);
  --shadow-md: 0 10px 30px rgba(14,32,56,.10);
  --shadow-lg: 0 20px 50px rgba(14,32,56,.16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,.font-display{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--navy-deep);
  letter-spacing:-0.01em;
}

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

.text-navy{ color:var(--navy) !important; }
.text-accent{ color:var(--accent) !important; }
.text-blue-mid{ color:var(--blue-mid) !important; }
.bg-navy{ background-color:var(--navy) !important; }
.bg-navy-deep{ background-color:var(--navy-deep) !important; }
.bg-gray{ background-color:var(--gray-bg) !important; }
.bg-slate{ background-color:var(--slate) !important; }

/* --------------------------------------------------------------------
   Éléments "grand livre" signature visuelle du site (ligne + repère)
   -------------------------------------------------------------------- */
.ledger-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:.9rem;
}
.ledger-eyebrow::before{
  content:"";
  display:inline-block;
  width:26px;
  height:2px;
  background:var(--blue-mid);
}
.ledger-rule{
  position:relative;
  border:0;
  height:1px;
  background:var(--gray-line);
  margin:0 0 2.75rem 0;
}
.ledger-rule::after{
  content:"";
  position:absolute;
  left:0; top:-1px;
  width:64px;
  height:3px;
  background:var(--blue-mid);
}
.section-head{ max-width:720px; margin-bottom:2.75rem; }
.section-head.mx-auto{ text-align:center; }

/* --------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------- */
.btn{ border-radius:var(--radius); font-weight:600; padding:.7rem 1.6rem; letter-spacing:.01em; }
.btn-cofima{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
}
.btn-cofima:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn-outline-cofima{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
}
.btn-outline-cofima:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn-outline-navy{
  background:transparent;
  border:1px solid var(--navy);
  color:var(--navy);
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

/* --------------------------------------------------------------------
   Barre supérieure
   -------------------------------------------------------------------- */
.topbar{
  background:var(--navy-deep);
  color:#b9c4d8;
  font-size:.83rem;
  padding:.45rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar a{ color:#b9c4d8; }
.topbar a:hover{ color:var(--brown-light); }
.topbar .divider{ opacity:.3; margin:0 .9rem; }
.topbar .social-mini a{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--blue-mid); margin-left:.4rem; color:#fff;
  transition:background-color .2s ease;
}
.topbar .social-mini a:hover{ background:var(--brown); }
.lang-switch{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; letter-spacing:.02em; }
.lang-switch span{ opacity:.4; }
.lang-switch a{ color:#b9c4d8; }
.lang-switch a.active{ color:var(--brown-light); }
.lang-switch a:hover{ color:var(--brown-light); }

/* --------------------------------------------------------------------
   Navigation principale
   -------------------------------------------------------------------- */
.main-nav{
  background:#fff;
  padding:.85rem 0;
  border-bottom:1px solid var(--gray-line);
  transition:box-shadow .25s ease, padding .25s ease, background-color .25s ease;
}
.main-nav.is-stuck{
  box-shadow:var(--shadow-md);
  padding:.55rem 0;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* Halo lumineux discret : sur fond sombre (footer), le logo COFIMA/MGI (bleu navy)
   se fond visuellement dans le bleu (contraste ~1.1:1 mesuré) ; le dégradé radial
   fait disparaître tout contour de "cadre" tout en restant assez opaque au centre
   pour que le texte du logo reste lisible. Plus nécessaire dans la nav (fond blanc). */
.logo-halo{ position:relative; display:inline-flex; align-items:center; line-height:0; z-index:1; }
.logo-halo::before{
  content:""; position:absolute; inset:-22px -34px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.68) 40%, rgba(255,255,255,.24) 68%, rgba(255,255,255,0) 88%);
}

.main-nav .navbar-brand{
  display:inline-flex; align-items:center; line-height:0;
  padding:.35rem .55rem;
}
.main-nav .navbar-brand img{ height:40px; transition:height .25s ease; }
.main-nav.is-stuck .navbar-brand img{ height:34px; }

@media (min-width:992px){ .main-nav .container{ padding-right:.4rem; } }
.main-nav-right{ display:flex; align-items:center; gap:1.1rem; margin-left:1.25rem; }
.mgi-header-logo-link{
  display:inline-flex; align-items:center; flex-shrink:0;
  line-height:0; padding:.3rem .5rem;
  transition:opacity .2s ease;
}
.mgi-header-logo-link:hover{ opacity:.8; }
.mgi-header-logo{ height:32px; width:auto; transition:height .25s ease; }
.main-nav.is-stuck .mgi-header-logo{ height:26px; }

.main-nav .navbar-toggler{ border-color:rgba(22,44,86,.3); padding:.3rem .5rem; }
.main-nav .navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(22,44,86,.2); }
.main-nav .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(22,44,86,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.main-nav .nav-link{
  font-weight:600;
  font-size:.84rem;
  color:var(--navy-deep);
  padding:.5rem .65rem !important;
  position:relative;
}
.main-nav .dropdown-toggle::after{ display:none; }
.main-nav .nav-link .chev{ font-size:.7em; margin-left:.15rem; transition:transform .2s ease, color .2s ease; display:inline-block; color:rgba(22,44,86,.55); }
.main-nav .nav-item.dropdown:hover .chev{ transform:rotate(180deg); color:var(--brown); }
.main-nav .nav-link::before{
  content:'';
  position:absolute; left:.65rem; right:.65rem; bottom:.2rem;
  height:2px; background:var(--brown);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color:var(--brown); }
.main-nav .nav-link:hover::before,
.main-nav .nav-link.active::before{ transform:scaleX(1); }

/* Dropdown liste simple (plus de mega-menu multi-colonnes), fondu + glissement à l'ouverture */
.dropdown-menu{
  display:block; min-width:17.2rem;
  border:0; border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:.5rem; margin-top:.5rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
}
.main-nav .nav-item.dropdown:hover > .dropdown-menu,
.dropdown-menu.show{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.dropdown-menu .dropdown-item{
  font-size:.9rem; font-weight:500; padding:.7rem .9rem; border-radius:4px;
  color:var(--navy);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, background-color .15s ease, color .15s ease;
}
.main-nav .nav-item.dropdown:hover > .dropdown-menu .dropdown-item,
.dropdown-menu.show .dropdown-item{ opacity:1; transform:translateY(0); }
/* Cascade : chaque lien apparaît avec un léger délai par rapport au précédent */
.dropdown-menu > .dropdown-item:nth-of-type(1){ transition-delay:0ms; }
.dropdown-menu > .dropdown-item:nth-of-type(2){ transition-delay:35ms; }
.dropdown-menu > .dropdown-item:nth-of-type(3){ transition-delay:70ms; }
.dropdown-menu > .dropdown-item:nth-of-type(4){ transition-delay:105ms; }
.dropdown-menu > .dropdown-item:nth-of-type(5){ transition-delay:140ms; }
.dropdown-menu .dropdown-item:hover{ background:rgba(32,64,129,.06); color:var(--blue-mid); }

/* --------------------------------------------------------------------
   Hero carrousel photo COFIMA, grille de fond, accents géométriques
   -------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--navy-deep);
  overflow:hidden;
  min-height:88vh;
  display:flex;
  align-items:center;
}

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{ position:absolute; inset:0; height:100%; z-index:0; }
.hero-carousel-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center center;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(20,40,80,.42) 0%, rgba(32,64,129,.28) 50%, rgba(20,40,80,.5) 100%);
}

/* Ralentit le fondu enchaîné natif de Bootstrap (0,6s par défaut) pour un enchaînement plus posé */
.hero-carousel.carousel-fade .carousel-item{ transition-duration:1.1s; }
.hero-carousel.carousel-fade .active.carousel-item-start,
.hero-carousel.carousel-fade .active.carousel-item-end{ transition:opacity 0s 1.1s; }

/* Ken Burns 4 variantes. Démarre dès que Bootstrap engage la transition (pas seulement une fois
   .active posée) pour que le mouvement soit déjà en cours quand le fondu se termine sinon l'image
   reste figée pendant tout le crossfade puis "saute" brutalement à la fin. */
.carousel-item:is(.active, .carousel-item-next, .carousel-item-prev, .carousel-item-start, .carousel-item-end) .hero-carousel-img.kb-zoom{ animation:kb-zoom 7s linear forwards; }
.carousel-item:is(.active, .carousel-item-next, .carousel-item-prev, .carousel-item-start, .carousel-item-end) .hero-carousel-img.kb-pan-x{ animation:kb-pan-x 7s linear forwards; }
.carousel-item:is(.active, .carousel-item-next, .carousel-item-prev, .carousel-item-start, .carousel-item-end) .hero-carousel-img.kb-pan-y{ animation:kb-pan-y 7s linear forwards; }
.carousel-item:is(.active, .carousel-item-next, .carousel-item-prev, .carousel-item-start, .carousel-item-end) .hero-carousel-img.kb-fade{ animation:kb-fade 7s linear forwards; }
@keyframes kb-zoom{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
@keyframes kb-pan-x{ from{ transform:scale(1.09) translateX(2.5%); } to{ transform:scale(1.09) translateX(-2.5%); } }
@keyframes kb-pan-y{ from{ transform:scale(1.09) translateY(-2.5%); } to{ transform:scale(1.09) translateY(2.5%); } }
@keyframes kb-fade{ from{ transform:scale(1.03); } to{ transform:scale(1.08); } }

.hero-carousel .carousel-indicators{ z-index:3; bottom:1.4rem; margin-bottom:0; gap:.3rem; }
.hero-carousel .carousel-indicators [data-bs-target]{
  width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.4);
  border:0; opacity:1; transition:background-color .25s ease, width .25s ease;
}
.hero-carousel .carousel-indicators .active{ background:var(--brown-light); width:34px; }
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ z-index:3; width:4rem; opacity:1; }
.hero-carousel-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:1.1rem; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .2s ease, border-color .2s ease;
}
.hero-carousel .carousel-control-prev:hover .hero-carousel-arrow,
.hero-carousel .carousel-control-next:hover .hero-carousel-arrow{ background:var(--brown); border-color:var(--brown); }
@media (max-width:767px){
  .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ display:none; }
}

.hero-content{ position:relative; z-index:2; padding:4rem .75rem 10rem; width:100%; }

/* --------------------------------------------------------------------
   Texte du hero composition centrée, posée directement sur la photo, sans carte
   -------------------------------------------------------------------- */
.hero-layout{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:2rem; width:100%; margin:0 auto;
}
.hero-text{
  display:flex; flex-direction:column; align-items:center;
  /* background:rgba(22,44,86,.46); */
  border-radius:20px;
  padding:2.25rem 1.75rem;
  width:100%; max-width:720px;
  box-shadow:0 25px 60px -22px rgba(2,7,16,.55);
  -webkit-backdrop-filter:blur(4px); 
  /* backdrop-filter:blur(4px); */
}
.hero-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blue-mid); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .9rem; border-radius:8px; margin-bottom:1.15rem;
  box-shadow:0 10px 22px -8px rgba(74,112,183,.6);
  transition:opacity .3s ease;
}
.hero-tab.is-pulsing{ animation:eyebrow-pulse .6s ease both; }
@keyframes eyebrow-pulse{ 0%{ opacity:1; } 40%{ opacity:.4; } 100%{ opacity:1; } }
.hero-text h1{
  font-family:var(--font-body);
  font-weight:800;
  color:#fff;
  text-shadow:0 4px 18px rgba(2,7,16,.5);
  font-size:clamp(1.15rem, 2.6vw, 2.2rem);
  line-height:1.14;
  margin-bottom:1rem;
  white-space:nowrap;
}
.hero-cta{ max-width:100%; }
.hero-text .btn{
  font-size:.92rem; padding:.65rem 1.25rem;
  white-space:nowrap; flex-shrink:0;
}
.hero-text .btn-cofima{ background:var(--blue-mid); border-color:var(--blue-mid); }
.hero-text .btn-cofima:hover{ background:#3d5fa0; border-color:#3d5fa0; }
@media (max-width:420px){
  .hero-text h1{ white-space:normal; font-size:1.25rem; }
  .hero-text .btn{ font-size:.8rem; padding:.55rem .9rem; }
}

/* Description qui change à chaque photo du carrousel sous le message fixe du
   cabinet, une légende centrée propre à chaque cliché raconte une facette
   différente de la vie du cabinet. */
.hero-caption-wrap{ display:flex; flex-direction:column; align-items:center; max-width:480px; }
.hero-slide-index{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.65); margin:0 0 .75rem;
}
.hero-slide-index b{ color:#fff; font-weight:600; }
.hero-caption-rule{ width:40px; height:2px; background:var(--brown-light); margin-bottom:.9rem; }
.hero-slide-caption{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.15rem; line-height:1.42; color:#fff; margin:0;
  text-shadow:0 4px 18px rgba(2,7,16,.6);
}
.hero-slide-caption.cap-in-up{ animation:cap-in-up .55s cubic-bezier(.16,1,.3,1) both; }
.hero-slide-caption.cap-in-down{ animation:cap-in-down .55s cubic-bezier(.16,1,.3,1) both; }
.hero-slide-caption.cap-in-left{ animation:cap-in-left .55s cubic-bezier(.16,1,.3,1) both; }
.hero-slide-caption.cap-in-right{ animation:cap-in-right .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes cap-in-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes cap-in-down{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes cap-in-left{ from{ opacity:0; transform:translateX(-20px); } to{ opacity:1; transform:translateX(0); } }
@keyframes cap-in-right{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:translateX(0); } }

/* Desktop encart de texte aligné à gauche (~48% de largeur), légende du
   slide courant à droite ; sur mobile/tablette le layout reste empilé et centré. */
@media (min-width:992px){
  .hero-layout{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:3rem;
  }
  .hero-text{
    align-items:flex-start; text-align:left;
    width:56%; max-width:660px; padding:2.75rem 2.5rem;
  }
  .hero-caption-wrap{ align-items:flex-end; text-align:right; }
}

/* Animations d'entrée du hero indépendantes du scroll, jouées une fois au chargement, échelonnées */
.hero-anim-up,
.hero-anim-up-d1, .hero-anim-up-d2, .hero-anim-up-d3, .hero-anim-up-d4{
  opacity:0; animation-name:hero-in-up; animation-fill-mode:both;
  animation-duration:.8s; animation-timing-function:cubic-bezier(.16,1,.3,1);
}
.hero-anim-up{ animation-delay:.05s; }
.hero-anim-up-d1{ animation-delay:.15s; }
.hero-anim-up-d2{ animation-delay:.25s; }
.hero-anim-up-d3{ animation-delay:.35s; }
.hero-anim-up-d4{ animation-delay:.45s; }
@keyframes hero-in-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-anim-up, .hero-anim-up-d1, .hero-anim-up-d2, .hero-anim-up-d3, .hero-anim-up-d4{ opacity:1; animation:none; }
  .hero-carousel-img{ animation:none !important; }
  .hero-tab.is-pulsing{ animation:none; }
  .hero-slide-caption.cap-in-up, .hero-slide-caption.cap-in-down,
  .hero-slide-caption.cap-in-left, .hero-slide-caption.cap-in-right{ animation:none; }
}

@media (max-width:576px){
  .hero-stats{ flex-wrap:wrap; row-gap:1rem; }
}
@media (max-width:991px){
  .hero{ min-height:auto; padding:0; }
  .hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item{ min-height:78vh; }
  .hero-content{ padding:4.5rem .75rem 4rem; }

  /* Menu mobile : nav toujours sur fond blanc, dropdowns en accordéon inline (pas de boîte blanche flottante) */
  .navbar-collapse .nav-link{ padding:.75rem 1rem !important; }
  .navbar-collapse .nav-link::before{ display:none; }
  .navbar-collapse .dropdown-menu{
    position:static; float:none; box-shadow:none; margin-top:0;
    padding:0 0 0 1rem; min-width:0; background:transparent;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
  }
  .navbar-collapse .dropdown-menu.show{ max-height:600px; }
  .navbar-collapse .dropdown-item{
    padding:.65rem .9rem; color:rgba(22,44,86,.75); opacity:1; transform:none;
  }
  .navbar-collapse .dropdown-item:hover{ background:rgba(22,44,86,.06); color:var(--navy-deep); }
}

/* --------------------------------------------------------------------
   Bandeau MGI Worldwide (page d'accueil)
   -------------------------------------------------------------------- */
.mgi-band{ background:#fff; padding:2.2rem 0 3.5rem; overflow-x:auto; }
@media (min-width:768px){ .mgi-band{ padding-bottom:4.75rem; } }
.mgi-band-inner{
  display:flex; align-items:center; justify-content:center;
  gap:1.75rem; flex-wrap:nowrap; white-space:nowrap; width:max-content; margin:0 auto;
}
.mgi-band-logo-link{ display:inline-flex; flex-shrink:0; transition:opacity .2s ease; }
.mgi-band-logo-link:hover{ opacity:.75; }
.mgi-band-logo{ height:32px; width:auto; }
.mgi-band-text{ margin:0; color:var(--gray-text); font-size:.95rem; white-space:nowrap; }
.mgi-band-cta{
  display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
  font-weight:600; font-size:.88rem; color:var(--blue-mid); white-space:nowrap;
}
.mgi-band-cta:hover{ color:var(--navy); }
@media (max-width:767px){
  .mgi-band-logo{ height:26px; }
  .mgi-band-text{ font-size:.85rem; }
  .mgi-band-cta{ font-size:.8rem; }
  /* En dessous de la largeur desktop, la phrase ne tient plus sur une seule ligne : on
     abandonne le défilement horizontal caché (mauvaise UX mobile, pas de scrollbar visible)
     au profit d'un retour à la ligne centré, sur plusieurs lignes si besoin. */
  .mgi-band{ overflow-x:visible; }
  .mgi-band-inner{
    flex-wrap:wrap; white-space:normal; width:100%;
    text-align:center; row-gap:.85rem;
  }
  .mgi-band-text{ white-space:normal; flex-basis:100%; order:2; }
  .mgi-band-logo-link{ order:1; }
  .mgi-band-cta{ order:3; }
}
/* La section suivante hérite du padding-top générique de 5.5rem (section{padding:5.5rem 0})
   qui, cumulé au padding propre de .mgi-band, créait un espace excessif à cette jonction précise. */
.mgi-band + section{ padding-top:3rem; }

/* --------------------------------------------------------------------
   Séparateurs de section géométriques (page d'accueil)
   -------------------------------------------------------------------- */
.divider-host{ position:relative; overflow:hidden; }
.section-divider{
  position:absolute; left:0; right:0;
  height:60px; z-index:2; pointer-events:none;
}
.section-divider.is-bottom{ bottom:-1px; }
.section-divider.is-top{ top:-1px; }
@media (min-width:768px){ .section-divider{ height:100px; } }
/* Variante réduite : pour les bandeaux fins (ex. .mgi-band) où la hauteur normale du
   divider dépasserait celle de la section et chevaucherait son contenu. */
.section-divider--sm{ height:40px; }
@media (min-width:768px){ .section-divider--sm{ height:56px; } }
.divider-diagonal{ clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.divider-diagonal-rev{ clip-path:polygon(0 0, 100% 100%, 0 100%); }
.divider-chevron{ clip-path:polygon(0 100%, 50% 0, 100% 100%); }
.divider-svg svg{ width:100%; height:100%; display:block; }

.glow-orb{
  position:absolute; z-index:0; border-radius:50%;
  filter:blur(70px); pointer-events:none;
  background:rgba(74,112,183,.35);
}

/* --------------------------------------------------------------------
   Bandes de statistiques (compteurs)
   -------------------------------------------------------------------- */
.stats-strip{ background:var(--navy); }
.stats-strip--home{
  background:
    radial-gradient(60% 160% at 88% 0%, rgba(74,112,183,.4) 0%, rgba(74,112,183,0) 60%),
    radial-gradient(55% 140% at 8% 100%, rgba(0,95,189,.35) 0%, rgba(0,95,189,0) 60%),
    var(--navy);
}
.stat-item{ text-align:center; padding:2.4rem 1rem; border-left:1px solid rgba(255,255,255,.12); }
.stat-item:first-child{ border-left:0; }
.stat-num{
  font-family:var(--font-mono);
  font-size:2.6rem; font-weight:600; color:#fff; line-height:1;
}
.stat-num .unit{ font-size:1.6rem; color:var(--blue-mid-light); }
.stat-num .prefix{ font-size:1.5rem; color:var(--blue-mid-light); margin-right:.15rem; }
.stat-label{ color:#c3ceE0; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin-top:.5rem; }

/* --------------------------------------------------------------------
   Page International MGI Worldwide
   -------------------------------------------------------------------- */
.mgi-intro p{ text-align:justify; text-justify:inter-word; }
.mgi-logo-showcase{
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:2.5rem 2rem;
  display:flex; align-items:center; justify-content:center; height:100%;
}
.mgi-logo-showcase img{ width:100%; max-width:400px; height:auto; }

.mgi-stat-card{
  text-align:center; padding:1.6rem .75rem; height:100%;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
}
.mgi-stat-card .stat-num{ font-size:1.9rem; }
.mgi-stat-card .stat-label{ margin-top:.4rem; }

.video-embed-caption{
  font-family:var(--font-mono); font-size:.78rem; font-weight:600;
  letter-spacing:.03em; color:var(--blue-mid); text-align:center; margin-bottom:.75rem;
}
.video-embed-frame{
  position:relative; width:100%; padding-top:56.25%; height:0; overflow:hidden;
  border:1px solid var(--gray-line); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.video-embed-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-embed-youtube-link{
  display:flex; align-items:center; justify-content:center;
  gap:.4rem; margin-top:.75rem; font-size:.85rem; font-weight:600; color:var(--gray-text);
}
.video-embed-youtube-link:hover{ color:var(--accent); }
.video-embed-youtube-link i{ font-size:1.05rem; color:#ff0000; }

.presence-scope-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--gray-line); border-radius:999px;
  padding:.55rem 1.2rem; font-weight:600; font-size:.9rem; color:var(--navy-deep);
  box-shadow:var(--shadow-sm);
}
.presence-scope-tag i{ color:var(--blue-mid); font-size:1.05rem; }

/* --------------------------------------------------------------------
   Cartes services
   -------------------------------------------------------------------- */
.service-card{
  background:#fff;
  border:1px solid var(--gray-line);
  border-radius:var(--radius);
  padding:2.2rem 1.9rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .25s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-card:hover::before{ transform:scaleY(1); }
.service-card .service-ref{
  font-family:var(--font-mono); font-size:.72rem; color:var(--blue-mid); letter-spacing:.1em;
}
.service-card:has(.service-icon){ overflow:visible; }
.service-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--gray-bg); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
  position:absolute; top:0; left:50%;
  transform:translate(-50%, -50%);
  z-index:2;
}
.service-card:hover .service-icon{ background:var(--navy); color:#fff; }
.service-icon + h3{ margin-top:1.75rem; }
.service-card h3{ font-size:1.18rem; margin-bottom:.6rem; }
.service-card p{ color:var(--gray-text); font-size:.94rem; margin-bottom:1.1rem; }
.service-card .learn-more{ font-weight:600; font-size:.87rem; }
.service-card--compact h3{ font-size:1.02rem; }
.service-card--compact p{ font-size:.88rem; }

/* Cartes services variantes page d'accueil (photo / dégradé) */
.service-card--media,
.service-card--accent{ padding:0; }
.service-card--media .service-media,
.service-card--accent .service-media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
}
.service-card--media .service-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.service-card--media:hover .service-media img{ transform:scale(1.06); }
.service-card--media .service-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,43,87,.1) 0%, rgba(0,43,87,.82) 100%);
}
.service-card--accent .service-media{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display:flex; align-items:center; justify-content:center;
}
.service-card--accent .service-media i{ font-size:2.5rem; color:#fff; }

/* Photo collaborateurs section "Qui sommes-nous" (page À propos) */
.about-photo-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-lg);
}
.about-photo-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.about-photo-card:hover .about-photo-img{ transform:scale(1.06); }
.about-photo-badge{
  position:absolute; left:1.25rem; bottom:1.25rem; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(135deg, #204081 0%, #4A70B7 100%);
  color:#fff; padding:1rem 1.4rem; border-radius:14px;
  box-shadow:0 14px 30px -12px rgba(20,40,80,.5);
}
.about-photo-badge-num{ font-family:var(--font-mono); font-size:1.6rem; font-weight:700; line-height:1; }
.about-photo-badge-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; opacity:.9; margin-top:.2rem; }
@media (prefers-reduced-motion: reduce){
  .about-photo-img{ transition:none; }
}
.service-card--media .service-ref--media,
.service-card--accent .service-ref--media{
  position:absolute; left:14px; top:14px; z-index:1;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff !important; padding:.3rem .7rem; border-radius:20px;
  border:1px solid rgba(255,255,255,.28);
}
.service-card--media .service-body,
.service-card--accent .service-body{ padding:1.6rem 1.75rem 1.9rem; }

/* --------------------------------------------------------------------
   Cartes "Nos activités" bloc de couleur pleine, icône, gros numéro
   (cartes Audit / Expertise / Conseil juridique uniquement)
   -------------------------------------------------------------------- */
.activity-card{
  position:relative; overflow:visible; height:100%;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:18px;
  padding:2.6rem 1.9rem 2rem;
  min-height:360px;
  display:flex; flex-direction:column;
  color:#fff;
  box-shadow:0 10px 26px -16px rgba(20,40,80,.16);
  transition:background .28s ease, transform .25s ease, box-shadow .28s ease, border-color .28s ease;
}
.activity-card--navy{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); }
.activity-card--blue{ background:linear-gradient(135deg, var(--accent-dark) 0%, var(--navy) 100%); }
.activity-card--brown{ background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dark) 100%); }
.activity-card--navy:hover{ box-shadow:0 24px 46px -18px rgba(32,64,129,.55); }
.activity-card--blue:hover{ box-shadow:0 24px 46px -18px rgba(58,95,160,.55); }
.activity-card--brown:hover{ box-shadow:0 24px 46px -18px rgba(139,90,43,.55); }

/* Carte "service phare" (Audit) reste en permanence dans l'état actif bleu */
.activity-card--active{
  background:linear-gradient(135deg, #204081 0%, #4A70B7 100%);
  border-color:transparent;
  box-shadow:0 22px 44px -18px rgba(32,64,129,.5);
}
.activity-card--active:hover{ transform:translateY(-4px); box-shadow:0 28px 54px -18px rgba(32,64,129,.6); }

/* Cartes par défaut (blanches) basculent vers le même état actif bleu au survol/focus */
@media (hover:hover) and (pointer:fine){
  .activity-card:not(.activity-card--active):hover,
  .activity-card:not(.activity-card--active):focus-within{
    background:linear-gradient(135deg, #204081 0%, #4A70B7 100%);
    border-color:transparent;
    transform:translateY(-4px);
    box-shadow:0 24px 46px -18px rgba(32,64,129,.45);
  }
}

.activity-card-number{
  position:absolute; right:.6rem; top:-1.3rem; z-index:0;
  font-family:var(--font-display); font-weight:700; font-size:7rem; line-height:1;
  color:rgba(255,255,255,.15); pointer-events:none; -webkit-user-select:none; user-select:none;
}
.activity-card-icon-bg{
  position:absolute; left:-1.1rem; bottom:-1.4rem; z-index:0;
  font-size:9rem; color:rgba(255,255,255,.12); pointer-events:none;
}
.activity-card-body{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1; }
.activity-card-icon-tile{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px; flex-shrink:0;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:1.4rem; color:#fff; margin-bottom:1.3rem;
}
.activity-card-body h3{ color:#fff; font-size:1.2rem; margin-bottom:.7rem; }
.activity-card-body p{
  color:rgba(255,255,255,.82); font-size:.92rem; line-height:1.6;
  margin-bottom:1.6rem; flex:1;
}

/* Déclinaisons propres au carrousel "Nos activités" (accueil uniquement) badge
   circulaire flottant à cheval sur le bord supérieur, numéro fantôme clair et
   textes navy/gris par défaut sur fond blanc. Scopées via ".activity-card X" :
   .svc-card (page Services) réutilise ces mêmes classes descendantes sans
   porter la classe "activity-card", donc conserve son style d'origine ci-dessus. */
.activity-card .activity-card-number{
  right:1rem; top:-.6rem; font-size:5.5rem;
  transition:color .28s ease;
}
.activity-card:not(.activity-card--active) .activity-card-number{ color:#EDEFF3; }
.activity-card .activity-card-icon-tile{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
  width:68px; height:68px; border-radius:50%; z-index:2;
  background:var(--blue-mid); color:#fff; margin-bottom:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 10px 22px -8px rgba(74,112,183,.5);
  transition:background .28s ease, color .28s ease;
}
.activity-card--active .activity-card-icon-tile{ background:#fff; color:var(--navy-deep); }
.activity-card .activity-card-body{ padding-top:4.25rem; }
.activity-card .activity-card-body h3{ transition:color .28s ease; }
.activity-card:not(.activity-card--active) .activity-card-body h3{ color:var(--navy-deep); }
.activity-card .activity-card-body p{ transition:color .28s ease; }
.activity-card:not(.activity-card--active) .activity-card-body p{ color:#595959; }
@media (hover:hover) and (pointer:fine){
  .activity-card:not(.activity-card--active):hover .activity-card-number,
  .activity-card:not(.activity-card--active):focus-within .activity-card-number{ color:rgba(255,255,255,.18); }
  .activity-card:not(.activity-card--active):hover .activity-card-icon-tile,
  .activity-card:not(.activity-card--active):focus-within .activity-card-icon-tile{ background:#fff; color:var(--navy-deep); }
  .activity-card:not(.activity-card--active):hover .activity-card-body h3,
  .activity-card:not(.activity-card--active):focus-within .activity-card-body h3{ color:#fff; }
  .activity-card:not(.activity-card--active):hover .activity-card-body p,
  .activity-card:not(.activity-card--active):focus-within .activity-card-body p{ color:rgba(255,255,255,.82); }
}

.activity-card-btn{
  display:inline-flex; align-items:center; align-self:flex-start;
  background:#fff; border:1.5px solid var(--blue-mid); border-radius:999px; height:46px; padding:0;
  overflow:hidden; text-decoration:none; color:var(--blue-mid);
  box-shadow:0 8px 18px -8px rgba(9,20,40,.18);
  transition:box-shadow .25s ease, border-color .28s ease, color .28s ease;
}
.activity-card--active .activity-card-btn{ border-color:#fff; color:var(--navy-deep); }
.activity-card-btn:hover{ box-shadow:0 10px 22px -6px rgba(9,20,40,.28); }
@media (hover:hover) and (pointer:fine){
  .activity-card:not(.activity-card--active):hover .activity-card-btn,
  .activity-card:not(.activity-card--active):focus-within .activity-card-btn{ border-color:#fff; color:var(--navy-deep); }
}
.activity-card-btn-label{
  max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  font-weight:600; font-size:.85rem;
  transition:max-width .35s ease, opacity .25s ease, margin .35s ease;
}
.activity-card-btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex-shrink:0; font-size:1.05rem;
}
@media (hover:hover) and (pointer:fine){
  .activity-card:hover .activity-card-btn-label,
  .activity-card:focus-within .activity-card-btn-label{
    max-width:220px; opacity:1; margin-left:1.1rem;
  }
}
@media (hover:none), (pointer:coarse){
  .activity-card-btn-label{ max-width:220px; opacity:1; margin-left:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .activity-card, .activity-card-btn-label{ transition:none; }
}

/* --------------------------------------------------------------------
   Grille "Nos activités" les 6 cartes affichées simultanément,
   sans carrousel (3 colonnes desktop / 2 tablette / 1 mobile).
   -------------------------------------------------------------------- */
.activities-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
  align-items:stretch;
}
@media (max-width:1023px){
  .activities-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:639px){
  .activities-grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------
   Cards "Nos services" (page Services) grille de 6 cards uniformes,
   même langage visuel que .charte-card (page Nous connaître) : fond blanc,
   bordure top navy, badge cercle bleu moyen, aucune hiérarchie entre elles.
   -------------------------------------------------------------------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
@media (max-width:1023px){
  .svc-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:639px){
  .svc-grid{ grid-template-columns:1fr; }
}
.svc-card{
  scroll-margin-top:100px;
  position:relative; height:100%;
  background:#fff; border-top:4px solid var(--navy); border-radius:20px;
  box-shadow:var(--shadow-sm);
  padding:3.75rem 1.9rem 2.2rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc-card-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:50%; z-index:2;
  background:var(--blue-mid); color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -8px rgba(74,112,183,.5);
}
.svc-card h3{ color:var(--navy); font-weight:700; font-size:1.25rem; margin-bottom:.85rem; }
.svc-card-intro{ color:var(--gray-text); font-size:.95rem; line-height:1.6; margin-bottom:1.4rem; text-align:justify; }
.svc-card-list{ margin:0; padding:0; list-style:none; }
.svc-card-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  margin-bottom:.75rem; color:var(--gray-text); font-size:.92rem; line-height:1.55;
}
.svc-card-list li:last-child{ margin-bottom:0; }
.svc-card-list li i{ color:var(--blue-mid); font-size:1.05rem; margin-top:.15rem; flex-shrink:0; }
.svc-card-link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.4rem; font-weight:600; font-size:.88rem; color:var(--blue-mid);
  text-decoration:none; transition:gap .2s ease;
}
.svc-card-link:hover{ gap:.65rem; color:var(--navy-deep); }

.svc-detail-points{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:1.75rem; }
.svc-detail-point{ display:flex; gap:1.25rem; align-items:flex-start; }
.svc-detail-point-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:50%; margin-top:.1rem;
  background:rgba(74,112,183,.1); color:var(--blue-mid); font-size:1.2rem;
}
.svc-detail-point-body h3{ font-size:1.05rem; color:var(--navy-deep); margin-bottom:.4rem; }
.svc-detail-point-body p{ color:var(--gray-text); font-size:.95rem; line-height:1.7; margin:0; text-align:justify; }
@media (prefers-reduced-motion: reduce){
  .svc-card{ transition:none; }
}

/* Page de détail d'un service (accédée depuis "En savoir plus") cartes de
   renvoi vers les autres domaines */
.other-service-card{
  display:flex; align-items:center; gap:1rem; height:100%;
  background:#fff; border:1px solid var(--gray-line); border-radius:16px;
  padding:1.25rem 1.5rem; text-decoration:none; color:var(--navy-deep);
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.other-service-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-md);
  border-color:transparent; color:var(--navy-deep);
}
.other-service-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:48px; height:48px; border-radius:50%;
  background:rgba(74,112,183,.1); color:var(--blue-mid); font-size:1.25rem;
}
.other-service-title{ font-weight:600; flex:1; }
.other-service-arrow{ color:var(--blue-mid); font-size:1.1rem; flex-shrink:0; transition:transform .25s ease; }
.other-service-card:hover .other-service-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .other-service-card, .other-service-arrow{ transition:none; }
}

/* --------------------------------------------------------------------
   Bloc "Notre charte" (accordéon)
   -------------------------------------------------------------------- */
.charte-section{ position:relative; overflow:hidden; background:linear-gradient(160deg, var(--slate) 0%, var(--navy-deep) 100%); }
.charte-section > .container{ position:relative; z-index:1; }
.charte-watermark{
  position:absolute; z-index:0; top:50%; left:14%;
  width:560px; max-width:60vw; height:auto;
  transform:translate(-38%, -50%);
  opacity:.1; pointer-events:none; -webkit-user-select:none; user-select:none;
}
@media (max-width:991px){
  .charte-watermark{ left:50%; width:420px; max-width:80vw; transform:translate(-50%, -50%); }
}
.charte-block{ background:var(--slate); border-radius:var(--radius); overflow:hidden; }
.panel-navy{ background:var(--navy-deep); border-radius:var(--radius); overflow:hidden; }
.accordion-cofima .accordion-item{
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0;
  border-left:3px solid transparent; padding-left:.9rem;
  transition:border-left-color .3s ease;
}
.accordion-cofima .accordion-item:last-child{ border-bottom:0; }
.accordion-cofima .accordion-item:has(.accordion-button:not(.collapsed)){ border-left-color:var(--brown-light); }
.accordion-cofima .accordion-button{
  background:transparent; color:#fff; font-family:var(--font-mono); font-size:.95rem;
  letter-spacing:.03em; padding:1.15rem 0; box-shadow:none;
}
.accordion-cofima .accordion-button:not(.collapsed){ color:var(--blue-mid-light); background:transparent; }
.accordion-cofima .accordion-button::after{ filter:invert(1); }
.accordion-icon{
  font-size:1.05rem; margin-right:.7rem; opacity:.7; color:#fff;
  transition:color .2s ease, opacity .2s ease;
}
.accordion-cofima .accordion-button:not(.collapsed) .accordion-icon{ color:var(--brown-light); opacity:1; }
.accordion-cofima .accordion-body{ color:#d7dde6; padding:0 0 1.4rem; font-size:.94rem; }
.accordion-cofima .accordion-body a{ color:#d7dde6; }
.accordion-cofima ul{ padding-left:1.1rem; }
.accordion-cofima .accordion-collapse.show .accordion-body{
  animation:accordion-body-in .4s ease both;
}
@keyframes accordion-body-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .accordion-cofima .accordion-collapse.show .accordion-body{ animation:none; }
}

/* --------------------------------------------------------------------
   Présence & réseau international vidéo YouTube (embed standard)
   -------------------------------------------------------------------- */
.video-embed-card{
  background:#fff; border-radius:16px; padding:1.1rem; height:100%;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-md);
}
.video-embed-card-title{
  color:var(--navy); font-weight:600; font-size:1rem; margin-bottom:.85rem;
}
.video-embed-card .video-embed-frame{ border-radius:10px; }
.video-embed-card .video-embed-youtube-link{ margin-top:.75rem; }

/* Bannière chiffres-clés MGI Worldwide pleine largeur, en haut de la section.
   Image très large et plate (ratio ~6.8:1) : sur mobile, une largeur 100% la
   rendrait minuscule et illisible, donc on garde sa hauteur et on permet le
   défilement horizontal plutôt que de l'écraser. */
.mgi-stats-card{
  background:#fff; border-radius:16px; box-shadow:var(--shadow-md);
  padding:1.75rem 1.5rem; margin-bottom:3rem;
  overflow-x:auto;
}
.mgi-stats-img{ width:100%; height:auto; display:block; }
@media (max-width:767px){
  .mgi-stats-card{ padding:1.1rem 1rem; }
  .mgi-stats-img{ width:auto; max-width:none; height:52px; }
}

/* Variante texte de la bannière chiffres MGI Worldwide mêmes chiffres que
   l'image de référence, mais en HTML/CSS (compteurs animés, toujours nets
   quelle que soit la largeur d'écran, contrairement à une image étirée). */
.mgi-stats-row{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  overflow-x:visible; row-gap:1.5rem;
}
.mgi-stat-block{ display:flex; flex-direction:column; align-items:center; padding:0 1.6rem; }
.mgi-stat-number{
  font-family:var(--font-mono); font-weight:700; line-height:1;
  font-size:clamp(1.7rem, 4vw, 2.5rem); color:var(--navy);
}
.mgi-stat-caption{
  margin-top:.45rem; font-size:.76rem; color:var(--gray-text);
  text-transform:uppercase; letter-spacing:.04em; text-align:center;
}
.mgi-stat-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue-mid); flex-shrink:0; }
@media (max-width:576px){
  .mgi-stat-dot{ display:none; }
  .mgi-stat-block{ padding:0 1rem; width:45%; }
}

.presence-map-card{
  border-radius:16px; overflow:hidden; background:#fff; height:100%;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-md); padding:1.1rem;
}
.presence-map-card-title{
  color:var(--navy); font-weight:600; font-size:1rem; margin-bottom:.85rem;
}
.presence-map-img{ width:100%; height:auto; display:block; border-radius:10px; }
.presence-cta{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  margin-top:auto; padding-top:1rem; font-weight:600; font-size:.92rem; color:var(--navy);
  transition:gap .2s ease, color .2s ease;
}
.presence-cta i{ transition:transform .25s ease; }
.presence-cta:hover{ color:var(--blue-mid); gap:.75rem; }
.presence-cta:hover i{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .presence-cta, .presence-cta i{ transition:none; }
}

/* --------------------------------------------------------------------
   Équipe
   -------------------------------------------------------------------- */
.team-card{
  text-align:center; background:#fff; border-radius:16px; overflow:hidden;
  border:1px solid var(--gray-line);
  box-shadow:0 10px 26px -18px rgba(20,40,80,.18);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 40px -16px rgba(32,64,129,.28);
  border-color:transparent;
}
.team-photo{
  width:100%; aspect-ratio:1/1.08;
  overflow:hidden; background:var(--gray-bg);
  position:relative;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .45s ease; }
.team-card:hover .team-photo img{ transform:scale(1.07); }
.team-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,40,80,0) 60%, rgba(20,40,80,.5) 100%);
  opacity:0; transition:opacity .3s ease;
}
.team-card:hover .team-photo::after{ opacity:1; }
.team-photo .ph-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--gray-mid); font-size:2.2rem; background:linear-gradient(160deg,#eef1f5,#e2e6ec);
}
.team-email-btn{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:#fff; color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center; font-size:.92rem;
  opacity:0; transform:translateY(8px);
  box-shadow:0 8px 18px -8px rgba(9,20,40,.4);
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.team-email-btn:hover{ background:var(--blue-mid); color:#fff; }
.team-card:hover .team-email-btn{ opacity:1; transform:translateY(0); }
.team-card h4{ font-size:1.02rem; margin:1rem 1rem .35rem; color:var(--navy-deep); }
.team-card .job{
  display:inline-flex; margin:0 1rem 1.2rem;
  color:var(--blue-mid); background:rgba(74,112,183,.1);
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  padding:.28rem .75rem; border-radius:999px;
}
@media (prefers-reduced-motion: reduce){
  .team-card, .team-photo img, .team-photo::after, .team-email-btn{ transition:none; }
}

/* --------------------------------------------------------------------
   Actualités
   -------------------------------------------------------------------- */
.news-card{ display:flex; flex-direction:column; border:1px solid var(--gray-line); border-radius:var(--radius); overflow:hidden; height:100%; background:#fff; transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.news-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.news-card .news-img{ aspect-ratio:16/10; overflow:hidden; background:var(--gray-bg); }
.news-card .news-img img{ width:100%; height:100%; object-fit:cover; }
.news-card .news-body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.news-card .news-date{ font-family:var(--font-mono); font-size:.72rem; color:var(--blue-mid); letter-spacing:.08em; text-transform:uppercase; }
.news-card h3{ font-size:1.08rem; margin:.5rem 0 .6rem; line-height:1.35; }
.news-card p{ color:var(--gray-text); font-size:.9rem; margin-bottom:1.1rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-card .news-body > a{ margin-top:auto; align-self:flex-start; }
.news-card .news-body > a i{ transition:transform .2s ease; display:inline-block; }
.news-card .news-body > a:hover i{ transform:translateX(3px); }

.news-gallery-preview{
  display:grid; grid-template-columns:2fr 1fr; gap:2px;
  aspect-ratio:16/10; overflow:hidden; background:var(--gray-bg);
}
.news-gallery-main{ overflow:hidden; }
.news-gallery-thumbs{ display:grid; grid-template-rows:1fr 1fr; gap:2px; }
.news-gallery-main img,
.news-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.news-card:hover .news-gallery-main img,
.news-card:hover .news-gallery-thumb img{ transform:scale(1.07); }
.news-gallery-thumb{ position:relative; overflow:hidden; }
.news-gallery-more{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,43,87,.68); color:#fff; font-weight:600; font-size:1.05rem;
}

/* --------------------------------------------------------------------
   Actualité mise en avant (page liste)
   -------------------------------------------------------------------- */
.featured-news{
  display:grid; grid-template-columns:1.1fr 1fr;
  background:#fff; border:1px solid var(--gray-line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
  color:inherit;
}
.featured-news:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.featured-news-media{ position:relative; overflow:hidden; min-height:320px; background:var(--gray-bg); }
.featured-news-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.featured-news:hover .featured-news-media img{ transform:scale(1.05); }
.featured-news-badge{
  position:absolute; left:1.1rem; top:1.1rem; z-index:1;
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--navy-deep); color:#fff; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.45rem .85rem; border-radius:999px;
}
.featured-news-badge i{ color:var(--brown-light); }
.featured-news-body{ padding:2.4rem 2.6rem; display:flex; flex-direction:column; justify-content:center; }
.featured-news-body h3{ font-size:1.6rem; margin:.6rem 0 .9rem; line-height:1.3; }
.featured-news-body p{ color:var(--gray-text); font-size:.98rem; margin-bottom:1.3rem; }
.featured-news-link{ color:var(--accent); }
.featured-news-link i{ transition:transform .2s ease; display:inline-block; }
.featured-news:hover .featured-news-link{ color:var(--accent-dark); }
.featured-news:hover .featured-news-link i{ transform:translateX(3px); }
@media (max-width:767px){
  .featured-news{ grid-template-columns:1fr; }
  .featured-news-media{ min-height:220px; }
  .featured-news-body{ padding:1.6rem 1.5rem; }
  .featured-news-body h3{ font-size:1.25rem; }
}

/* --------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------- */
.pagination{ gap:.35rem; }
.pagination .page-link{
  margin-left:0; border:1px solid var(--gray-line); border-radius:8px !important;
  color:var(--navy-deep); font-weight:600; font-size:.9rem; min-width:42px; text-align:center;
}
.pagination .page-link:hover{ background:var(--gray-bg); color:var(--navy-deep); }
.pagination .page-link:focus{ box-shadow:0 0 0 3px rgba(75,121,200,.15); }
.pagination .page-item.active .page-link{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .page-item.disabled .page-link{ color:var(--gray-mid); background:#fff; border-color:var(--gray-line); }

/* --------------------------------------------------------------------
   Page détail actualité galerie & lightbox
   -------------------------------------------------------------------- */
.actualite-content{ font-size:1rem; line-height:1.75; color:var(--ink); text-align:justify; }
.actualite-content p{ margin-bottom:1.1rem; }
.actualite-gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:.9rem;
}
.actualite-gallery-item{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; position:relative; }
.actualite-gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.actualite-gallery-item:hover img{ transform:scale(1.07); }

.lightbox-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(0,20,45,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
  padding:2rem;
}
.lightbox-overlay.is-open{ opacity:1; visibility:visible; }
.lightbox-overlay img{ max-width:100%; max-height:90vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; z-index:2001;
  width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,.22); }

/* --------------------------------------------------------------------
   Clients / partenaires cards logo défilantes (marquee)
   -------------------------------------------------------------------- */
.clients-strip{ background:var(--gray-bg); padding-bottom:7rem; }
@media (max-width:767px){
  .clients-strip{ padding-bottom:5rem; }
}

.partner-card{
  height:130px; width:210px; flex:0 0 auto;
  background:#fff; border:1px solid #E5E7EB; border-radius:16px;
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  padding:1.75rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.partner-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.partner-card img{
  max-width:100%; max-height:100%; object-fit:contain;
  transition:transform .2s ease;
}
.partner-card:active img{ transform:scale(1.12); }
.partner-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--gray-mid); font-size:1.1rem;
}
@media (max-width:479px){
  .partner-card{ height:100px; width:170px; padding:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
  .partner-card, .partner-card img{ transition:none; }
}

/* --------------------------------------------------------------------
   Bandes défilantes (équipe / partenaires)
   -------------------------------------------------------------------- */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x:auto; }
  .marquee-track{ animation:none; }
  .marquee-track .marquee-dup{ display:none; }
}
.team-marquee .marquee-track{ animation-duration:55s; gap:1.5rem; padding:.5rem .75rem 1.75rem; }
.team-marquee .team-card{ flex:0 0 auto; width:230px; }
.partners-marquee .marquee-track{ animation-duration:28s; gap:1.5rem; align-items:center; padding:.75rem .25rem 1rem; }
.team-marquee .team-card{ flex:0 0 auto; width:230px; }

/* --------------------------------------------------------------------
   CTA bandeau
   -------------------------------------------------------------------- */
.cta-band{ background:var(--navy-deep); position:relative; overflow:hidden; }
.cta-band--home{
  background:
    radial-gradient(60% 180% at 92% 0%, rgba(74,112,183,.32) 0%, rgba(74,112,183,0) 60%),
    radial-gradient(50% 140% at 4% 100%, rgba(0,95,189,.28) 0%, rgba(0,95,189,0) 60%),
    var(--navy-deep);
}
.cta-band::before{
  content:""; position:absolute; right:-8%; top:-40%; width:420px; height:420px;
  border:1px solid rgba(74,112,183,.18); border-radius:50%;
}
.cta-band::after{
  content:""; position:absolute; right:2%; top:-10%; width:280px; height:280px;
  border:1px solid rgba(74,112,183,.14); border-radius:50%; pointer-events: none; /* ← Ajoute cette ligne */
}
.cta-band h2{ font-size:1.9rem; }

/* --------------------------------------------------------------------
   Fil d'ariane / bannière de page interne
   -------------------------------------------------------------------- */
.page-banner{
  position:relative; overflow:hidden;
  background-image:
    linear-gradient(135deg, rgba(32,64,129,.55) 0%, rgba(74,112,183,.5) 100%),
    url('../images/hero-carousel/siege-cotonou.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:5.5rem 0 3.2rem;
}
.page-banner::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 64% at 84% 82%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(34% 46% at 8% 12%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 70%);
}
.page-banner .container{ position:relative; z-index:1; }
.page-banner h1{
  color:#fff; margin-bottom:.6rem; font-size:clamp(1.9rem,3vw,2.6rem);
  font-family:var(--font-body); font-weight:800; letter-spacing:-0.01em;
  text-shadow:0 2px 14px rgba(2,7,16,.45);
}
.breadcrumb-cofima{ font-size:.85rem; color:rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(2,7,16,.4); }
.breadcrumb-cofima a{ color:rgba(255,255,255,.85); }
.breadcrumb-cofima a:hover{ color:#fff; }
.breadcrumb-cofima .sep{ margin:0 .5rem; opacity:.5; }

/* --------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------- */
.form-control, .form-select{
  border-radius:4px; border:1px solid var(--gray-line); padding:.65rem .9rem; font-size:.94rem;
}
.form-control:focus, .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(75,121,200,.15); }
label{ font-size:.85rem; font-weight:600; color:var(--navy-deep); margin-bottom:.35rem; }

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
    opacity: 1; /* Important pour Firefox */
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer{ background:var(--navy-deep); color:#b9c4d8; border-top:3px solid #fff; }
.site-footer h5{ color:#fff; font-family:var(--font-body); font-size:1rem; letter-spacing:.02em; margin-bottom:1.2rem; }
.site-footer a{ color:#b9c4d8; }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:.55rem; font-size:.9rem; }
.footer-divider{ border-top:1px solid rgba(255,255,255,.1); margin:2.6rem 0 1.6rem; }
.mgi-disclaimer{ font-size:.76rem; line-height:1.6; color:var(--gray-text); margin:0 0 1.6rem; max-width:980px; }
.mgi-disclaimer a{ color:var(--accent-dark); text-decoration:underline; }
.mgi-disclaimer a:hover{ color:var(--brown); }
.mgi-disclaimer-row{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-bottom:1.6rem;
  background:#fff; border-radius:var(--radius); padding:1.4rem 1.6rem;
}
.mgi-footer-logo-link{
  flex-shrink:0; display:inline-flex; align-items:center;
  line-height:0; padding:.3rem .5rem;
  transition:opacity .2s ease;
}
.mgi-footer-logo-link:hover{ opacity:.8; }
.mgi-footer-logo{ height:24px; width:auto; }
.mgi-disclaimer-row .mgi-disclaimer{ margin:0; flex:1 1 260px; min-width:240px; }
.social-round a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); margin-right:.5rem; color:#fff;
}
.social-round a:hover{ background:#fff; color:var(--navy-deep); }
.mgi-social-label{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#7c8aa3; margin-bottom:.5rem; }
.social-round--mgi a{ width:30px; height:30px; font-size:.85rem; }
.footer-bottom{ font-size:.83rem; color:#8b98af; }
.mgi-badge{ opacity:.85; }

/* --------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------- */
#back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:999;
  width:44px; height:44px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .25s ease;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background:var(--navy); }
/* La bannière cookies occupe désormais toute la largeur en bas d'écran : on masque
   le bouton "retour en haut" tant qu'elle est affichée, pour éviter qu'il ne
   se retrouve caché sous la bannière (tous deux en position fixe, bas d'écran). */
body:has(.cookie-consent:not([hidden])) #back-to-top{ display:none; }

/* --------------------------------------------------------------------
   Bannière cookies
   -------------------------------------------------------------------- */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  display:flex; justify-content:stretch;
}
.cookie-consent[hidden]{ display:none; }
.cookie-consent-card{
  background:#fff; box-shadow:var(--shadow-md);
  padding:1.5rem clamp(1.25rem, 4vw, 3rem); width:100%;
}
.cookie-consent-main{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  max-width:1320px; margin:0 auto;
}
.cookie-consent-text{ font-size:.9rem; color:var(--gray-text); margin:0; flex:1 1 320px; }
.cookie-consent-text a{ font-weight:600; }
.cookie-consent-actions{ display:flex; flex-wrap:wrap; gap:.6rem; flex-shrink:0; }
.btn-cookie{
  border-radius:999px; padding:.55rem 1.1rem; font-size:.85rem; font-weight:600;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-cookie--solid{ background:var(--navy); color:#fff; }
.btn-cookie--solid:hover{ background:var(--blue-mid); }
.btn-cookie--outline{ background:#fff; border-color:var(--gray-line); color:var(--navy); }
.btn-cookie--outline:hover{ border-color:var(--navy); }
.btn-cookie--ghost{ background:transparent; color:var(--gray-text); }
.btn-cookie--ghost:hover{ color:var(--navy); }

.cookie-consent-panel{
  margin:1.1rem auto 0; padding-top:1.1rem; border-top:1px solid var(--gray-line);
  max-width:1320px;
}
.cookie-consent-option{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.cookie-consent-option-title{ font-weight:600; color:var(--navy); font-size:.88rem; margin-bottom:.2rem; }
.cookie-consent-option-text{ font-size:.8rem; color:var(--gray-text); margin:0; }
.cookie-consent-option input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; margin-top:.2rem; accent-color:var(--blue-mid); }
#cookieSavePrefs{ margin-top:.4rem; }

@media (max-width:576px){
  .cookie-consent-card{ padding:1.25rem; }
  .cookie-consent-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .btn-cookie{ text-align:center; }
  #cookieSavePrefs{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .btn-cookie{ transition:none; }
}

/* --------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
section{ padding:5.5rem 0; }
@media (max-width:767px){
  section{ padding:3.5rem 0; }
  .stat-item{ border-left:0; border-top:1px solid rgba(255,255,255,.12); }
  .stat-item:first-child{ border-top:0; }
}

/* --------------------------------------------------------------------
   Petits mobiles (< 480px)
   -------------------------------------------------------------------- */
@media (max-width:480px){
  /* Logo COFIMA réduit pour que logo + menu hamburger + logo MGI tiennent
     sur une même ligne dans la nav mobile, sans passer à la ligne. */
  .main-nav .navbar-brand{ padding:.25rem .35rem; }
  .main-nav .navbar-brand img{ height:26px; }
  .main-nav-right{ gap:.6rem; margin-left:.5rem; }
  .mgi-header-logo{ height:20px; }
  .main-nav .navbar-toggler{ padding:.25rem .4rem; }
  .hero-content{ padding:2rem .75rem 2.5rem; }
  .hero-content .lead{ font-size:1rem; }
  .page-banner{ padding:2.75rem 0; }
  .service-card{ padding:1.6rem 1.3rem; }
  .cta-band h2{ font-size:1.4rem; }
  .stat-num{ font-size:2.1rem; }
}

/* --------------------------------------------------------------------
   Cards "Vocation / Objectifs / Valeurs" (page Nous connaître, #charte)
   traitement uniforme des 3 cards, scopé via .charte-card pour ne pas
   affecter les autres pages qui réutilisent .service-card/.service-icon.
   -------------------------------------------------------------------- */
.charte-card{
  border:0; border-top:4px solid var(--navy); border-radius:20px;
  box-shadow:var(--shadow-sm);
  padding:3.75rem 1.9rem 2.2rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.charte-card::before{ display:none; }
.charte-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--navy); }
.charte-card .service-icon{
  width:68px; height:68px; font-size:1.6rem;
  background:var(--blue-mid); color:#fff;
  box-shadow:0 10px 22px -8px rgba(74,112,183,.5);
}
.charte-card:hover .service-icon{ background:var(--blue-mid); color:#fff; }
.charte-card h3{ color:var(--navy); font-weight:700; font-size:1.25rem; margin-bottom:1rem; }
.charte-card-text{ line-height:1.7; }

.charte-objective{ display:flex; gap:.85rem; align-items:flex-start; }
.charte-objective + .charte-objective{ margin-top:1.75rem; }
.charte-objective-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--blue-mid); color:#fff; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.charte-objective-title{ color:var(--navy); font-weight:700; margin-bottom:.3rem; }
.charte-objective-text{ color:var(--gray-text); font-size:.92rem; line-height:1.6; margin:0; }

.charte-values{ list-style:none; padding-left:0; margin:0; color:var(--gray-text); font-size:.94rem; }
.charte-values li{ position:relative; padding-left:1.6rem; margin-bottom:1rem; }
.charte-values li:last-child{ margin-bottom:0; }
.charte-values li::before{
  content:"\2713"; position:absolute; left:0; top:0;
  color:var(--blue-mid); font-weight:700; font-size:1.05rem; line-height:1.4;
}
@media (prefers-reduced-motion: reduce){
  .charte-card{ transition:none; }
}

/* --------------------------------------------------------------------
   Cards page "Carrières" même langage que .svc-card/.charte-card
   -------------------------------------------------------------------- */
.career-card{
  background:#fff; border-top:4px solid var(--navy); border-radius:20px;
  box-shadow:var(--shadow-sm); padding:2.4rem 2rem;
  position:relative; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.career-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.career-card-badge{
  width:68px; height:68px; border-radius:50%; z-index:2;
  background:var(--blue-mid); color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -8px rgba(74,112,183,.5);
}
.career-card h3{ color:var(--navy); font-weight:700; font-size:1.25rem; margin-bottom:.85rem; }
.career-card p{ color:var(--gray-text); line-height:1.7; margin:0; }
@media (prefers-reduced-motion: reduce){
  .career-card{ transition:none; }
}

/* Photo + carte "Pourquoi nous rejoindre ?" fusionnées en un seul bloc (section
   Ressources, page Carrières) le badge est à cheval sur la jointure photo/texte
   plutôt qu'empilé au-dessus d'une carte séparée. */
.career-visual-card{
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.career-visual-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.career-visual-photo{ aspect-ratio:16/10; overflow:hidden; }
.career-visual-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.career-visual-body{ position:relative; padding:2.75rem 2rem 2.4rem; }
.career-visual-body .career-card-badge{
  position:absolute; top:0; left:50%; transform:translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce){
  .career-visual-card{ transition:none; }
}

/* Onglets "Recrutement / Demande de stage" (page Carrières) */
.cofima-tabs{ border-bottom:2px solid var(--gray-line); gap:.5rem; flex-wrap:wrap; }
.cofima-tabs .nav-link{
  border:0; border-bottom:3px solid transparent; border-radius:0;
  padding:.75rem 1.5rem; font-weight:600; font-size:.95rem; color:var(--gray-text);
  transition:color .2s ease, border-color .2s ease;
}
.cofima-tabs .nav-link:hover{ color:var(--navy); border-color:var(--gray-line); }
.cofima-tabs .nav-link.active{ color:var(--navy); border-color:var(--blue-mid); background:transparent; }
@media (prefers-reduced-motion: reduce){
  .cofima-tabs .nav-link{ transition:none; }
}

.career-form-wrap{ max-width:640px; margin:0 auto 2.5rem; }
.career-form-wide{ max-width:840px; margin:0 auto; padding:3rem; }
@media (max-width:576px){
  .career-form-wide{ padding:2rem 1.5rem; }
}

/* Cartes "Offres d'emploi" (onglet Offres, page Carrières) */
.offer-card{ display:flex; flex-direction:column; }
.offer-meta{ margin:0 0 1rem; }
.offer-meta li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--gray-text); margin-bottom:.4rem;
}
.offer-meta i{ color:var(--blue-mid); }
.offer-card .offer-desc{ flex:1; margin-bottom:1.4rem; }
.offer-card .btn{ align-self:flex-start; }

/* Cartes "Formations" (page Formations) */
.formation-card{
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-sm); height:100%; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.formation-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.formation-card__media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--blue-mid) 100%);
}
.formation-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.formation-card__media-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9); font-size:2.6rem;
}
.formation-card__date{
  position:absolute; bottom:.75rem; left:.75rem;
  background:rgba(255,255,255,.95); color:var(--navy); font-weight:600; font-size:.8rem;
  padding:.35rem .75rem; border-radius:30px; display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:0 6px 16px -6px rgba(15,42,74,.35);
}
.formation-card__date i{ color:var(--blue-mid); }
.formation-card__body{ padding:1.75rem; display:flex; flex-direction:column; flex:1; }
.formation-card__body h3{ color:var(--navy); font-weight:700; font-size:1.2rem; margin-bottom:.5rem; }
.formation-card__lieu{
  display:flex; align-items:center; gap:.4rem; font-size:.85rem;
  color:var(--gray-text); margin-bottom:.85rem;
}
.formation-card__lieu i{ color:var(--blue-mid); }
.formation-card__desc{
  flex:1; margin-bottom:1.4rem; color:var(--gray-text);
  line-height:1.7; text-align:justify; text-justify:inter-word;
}
.formation-card__body .btn{ align-self:flex-start; }
@media (prefers-reduced-motion: reduce){
  .formation-card{ transition:none; }
}

/* Fenêtre modale "Postuler" (onglet Offres, page Carrières) */
.postuler-modal-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--gray-bg); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.postuler-file-field{ position:relative; }
.postuler-file-name{ display:block; margin-top:.35rem; }
#postulerSubmitBtn:disabled{ opacity:.75; cursor:progress; }

/* --------------------------------------------------------------------
   Pages légales (Mentions légales / Politique de confidentialité)
   -------------------------------------------------------------------- */
.legal-content{
  max-width:800px; margin:0 auto;
  color:#595959; font-size:1rem; line-height:1.7;
}
.legal-content h2{
  color:var(--navy); font-size:1.5rem; margin:3rem 0 1.1rem;
  padding-top:1.5rem; border-top:1px solid var(--gray-line);
}
.legal-content h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-content h3{ color:var(--navy); font-size:1.18rem; margin:2rem 0 .85rem; }
.legal-content h4{ color:var(--navy); font-size:1rem; margin:1.4rem 0 .6rem; }
.legal-content p{ margin-bottom:1.1rem; text-align:justify; text-justify:inter-word; }
.legal-content ul, .legal-content ol{ margin-bottom:1.1rem; padding-left:1.4rem; }
.legal-content li{ margin-bottom:.5rem; }
.legal-content a{ color:var(--blue-mid); text-decoration:none; }
.legal-content a:hover{ text-decoration:underline; }
.legal-content strong{ color:var(--ink); }

/* Sommaire cliquable (page Politique de confidentialité) */
.legal-toc{
  background:var(--gray-bg); border:1px solid var(--gray-line); border-radius:var(--radius);
  padding:2.2rem 2.5rem; margin-bottom:3rem;
}
.legal-toc p{ margin:0 0 1.2rem; font-weight:700; color:var(--navy); text-transform:uppercase; font-size:.85rem; letter-spacing:.05em; }
.legal-toc ol{ columns:1; margin:0; padding-left:1.5rem; }
.legal-toc li{ margin-bottom:.9rem; font-size:1.05rem; line-height:1.5; }
.legal-toc li:last-child{ margin-bottom:0; }
.legal-toc a{ color:var(--blue-mid); font-weight:600; }
@media (max-width:576px){
  .legal-toc{ padding:1.5rem 1.25rem; }
  .legal-toc ol{ padding-left:1.2rem; }
  .legal-toc li{ font-size:.98rem; }
}

/* Tableaux (types de données, sous-traitants) */
.legal-table-wrap{ overflow-x:auto; margin-bottom:1.6rem; }
.legal-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.legal-table th{
  background:var(--navy); color:#fff; text-align:left;
  padding:.75rem 1rem; font-weight:600;
}
.legal-table td{ padding:.75rem 1rem; border-bottom:1px solid var(--gray-line); vertical-align:top; }
.legal-table tbody tr:nth-child(even){ background:var(--gray-bg); }

/* Bloc coordonnées (éditeur, RCCM, IFU...) */
.legal-info-box{
  background:var(--gray-bg); border-radius:var(--radius);
  padding:1.6rem 1.9rem; margin:1.5rem 0;
}
.legal-info-box dl{ display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.2rem; margin:0; }
.legal-info-box dt{ font-weight:600; color:var(--navy); white-space:nowrap; }
.legal-info-box dd{ margin:0; }
@media (max-width:576px){
  .legal-info-box dl{ grid-template-columns:1fr; gap:.15rem 0; }
  .legal-info-box dt{ margin-top:.5rem; }
}

/* Surbrillance des champs à compléter avant mise en ligne */
.todo-highlight{
  background:#fff3cd; color:#7a5900; font-weight:700;
  padding:.05rem .45rem; border-radius:4px; border:1px solid #ffe69c;
}

/* Blocs numérotés (annexe "Formulaire d'exercice de droits", politique de confidentialité) */
.legal-block{
  border:1px solid var(--gray-line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:2rem;
}
.legal-block-header{
  background:#F2F2F2; color:var(--navy); font-weight:700; text-transform:uppercase;
  font-size:.85rem; letter-spacing:.05em; padding:1rem 1.5rem;
}
.legal-block-panel{ background:#fff; }
.legal-block-item{
  display:flex; align-items:flex-start; gap:1.1rem;
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--gray-line);
}
.legal-block-item:last-child{ border-bottom:0; }
.legal-block-badge{
  flex-shrink:0; width:30px; height:30px; border-radius:7px; margin-top:.1rem;
  background:var(--navy); color:#fff; font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
}
.legal-block-text{ padding-top:.2rem; line-height:1.6; }
.legal-block-note{
  margin:0; padding:1.1rem 1.5rem; border-top:1px solid var(--gray-line);
  font-style:italic; color:var(--gray-mid); font-size:.88rem; line-height:1.6;
}
.legal-block-panel--cta{ padding:1.6rem 1.5rem; }
.legal-block-panel--cta p{ margin-bottom:1.1rem; }