/* =========================================================
   Page Maritime — maritime.css
   Scoped sur .page-maritime
   Chargée APRÈS secteurs.css (voir $extraCss dans maritime.php)
   ========================================================= */

.page-maritime{
  --mar-blue:      #1b6fb8;
  --mar-blue-dark: #14568f;
  --mar-blue-soft: #eaf3fb;
  --mar-sand:      #f5e6a8;
}

/* =========================================================
   1) HERO — titre + citation
   ========================================================= */
.page-maritime .mar-hero-inner{ display: block; }

.page-maritime .mar-hero-inner .hero-text{ max-width: 900px; }

/* H1 avec l'ancre à gauche */
.page-maritime .mar-h1{
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-maritime .mar-h1-ico{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(44px, 4vw, 60px);
  height: clamp(44px, 4vw, 60px);
}

.page-maritime .mar-h1-ico img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 560px){
  .page-maritime .mar-h1{ gap: 12px; }
  .page-maritime .mar-h1-ico{ width: 38px; height: 38px; }
}

.page-maritime .mar-hero-quote{
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 24px 0 0;
  padding: 18px 20px 18px 22px;

  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);

  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.1rem, .5vw + 1rem, 1.4rem);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.94);
}

/* filet dégradé or -> vert, comme sur l'accueil */
.page-maritime .mar-hero-quote::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(233,207,131,.95), rgba(25,180,106,.75));
}

@media (max-width: 560px){
  .page-maritime .mar-hero-quote{ padding-left: 16px; margin-top: 18px; }
}

/* =========================================================
   2) MISSIONS — les cartes viennent de secteurs.css
   ========================================================= */
.page-maritime .mar-main .sect-block{ max-width: 92ch; }

/* =========================================================
   3) SECTION ISM — pleine largeur, posée sur la vague
   ========================================================= */
.page-maritime .mar-ism-section{
  position: relative;
  margin-top: 8px;
  padding: var(--sectionPadY) 0;
  background: #ffffff;
}

@media (max-width: 700px){
  
}

.page-maritime .mar-ism-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 32px 34px;

  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.90);
  box-shadow: 0 22px 60px rgba(16,24,40,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-maritime .mar-ism-kicker{
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.05rem, .5vw + .9rem, 1.35rem);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--mar-blue-dark);
}

.page-maritime .mar-ism-claim{
  position: relative;
  margin: 0 0 30px;
  padding: 30px 34px;
  text-align: center;

  /* même traitement verre que les cartes de profil */
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(16,24,40,.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);

  font-family: var(--font-title);
  font-size: clamp(1.08rem, .55vw + 1rem, 1.38rem);
  line-height: 1.6;
  color: var(--text);
}

.page-maritime .mar-ism-claim b{
  font-weight: 700;
  color: var(--text);
}

.page-maritime .mar-ism-title{
  margin: 28px 0 14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.page-maritime .mar-ism-title:first-of-type{ margin-top: 0; }

.page-maritime .mar-ism-offer{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.page-maritime .mar-ism-item{
  position: relative;
  padding: 24px 22px 22px;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(16,24,40,.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);

  transition: background .18s ease, border-color .18s ease, transform .22s ease;
}

.page-maritime .mar-ism-item:hover{
  transform: translateY(-2px);
  background: rgba(16,24,40,.035);
  border-color: rgba(16,24,40,.14);
}

.page-maritime .mar-ism-item h3{
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
}

.page-maritime .mar-ism-item p{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
}

.page-maritime .mar-ism-item-wide{
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 18px 26px;

  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(16,24,40,.02);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);

  text-align: center;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}

.page-maritime .mar-ism-flag{
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.page-maritime .mar-ism-body{ max-width: 88ch; }

.page-maritime .mar-ism-body p{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.page-maritime .mar-ism-body p:last-child{ margin-bottom: 0; }

.page-maritime .mar-ism-body b{ color: var(--text); font-weight: 700; }

@media (max-width: 780px){
  .page-maritime .mar-ism-inner{ padding: 24px 20px 26px; }
  .page-maritime .mar-ism-offer{ grid-template-columns: 1fr; }
}

/* =========================================================
   4) DUO — deux profils, un concept
   ========================================================= */
.page-maritime .mar-duo-panel{
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: 26px;

  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-maritime .mar-duo-panel > h2{
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.01em;
}

@media (max-width: 560px){
  .page-maritime .mar-duo-panel{ padding: 20px 16px; }
}

/* =========================================================
   5) CTA
   ========================================================= */
.page-maritime .mar-cta{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.page-maritime .mar-cta-text{ margin: 0 auto 20px; max-width: 72ch; }

.page-maritime .mar-cta .sect-cta{ justify-content: center; }

@media (max-width: 560px){
  .page-maritime .mar-cta .sect-cta .btn{ width: 100%; }
}

/* =========================================================
   6) RENVOI depuis la page Secteurs
   ========================================================= */
.page-secteurs .sect-renvoi span{
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .92rem;
}

/* --- duo re-scope --- */
/* =========================================================
   Duo — regles reprises de notre-equipe.css et re-scopees
   sous .page-maritime. Genere automatiquement, ne pas editer
   a la main : relancer scope_duo.py apres modification de
   notre-equipe.css.
   ========================================================= */

/* Les 2 blocs côte à côte */
.page-maritime .duo-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 10px;
  min-width: 0;
}

.page-maritime .duo-card{
  position: relative;
  padding: 24px 16px 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .18s ease, border-color .18s ease;
  min-width: 0;
}

.page-maritime .duo-card:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.20);
}

/* trait de couleur supérieur */
.page-maritime .duo-card::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 2px;
  border-radius: 999px;
  opacity: .85;
  pointer-events: none;
}

.page-maritime .duo-card.duo-ergo::before{
  background: linear-gradient(90deg, rgba(233,207,131,.95), transparent 70%);
}

.page-maritime .duo-card.duo-nav::before{
  background: linear-gradient(90deg, rgba(29,83,128,.95), transparent 70%);
}

.page-maritime .duo-ico{
  line-height: 1;
  margin: 6px 0 12px;
  display: block;
}

.page-maritime .duo-ico img{
  display: block;
  width: 45px;   /* règle ici */
  height: 45px;  /* règle ici */
  object-fit: contain;
}

.page-maritime .duo-label{
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.page-maritime .duo-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.page-maritime .duo-tag{
  font-size: .83rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
  max-width: 100%;
}

.page-maritime .duo-tag{
  overflow-wrap: anywhere;
}

/* Séparateur */
.page-maritime .duo-sep{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px;
  min-width: 0;
}

.page-maritime .duo-sep::before,
.page-maritime .duo-sep::after{
  content: "";
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.page-maritime .duo-sep-symbol{
  font-size: .80rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .08em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Bloc fusion */
.page-maritime .duo-fusion{
  position: relative;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}

.page-maritime .duo-fusion::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 80px at 8% 50%, rgba(233,207,131,.12), transparent 70%),
    radial-gradient(120px 80px at 92% 50%, rgba(29,128,70,.10), transparent 70%);
  pointer-events: none;
}

.page-maritime .duo-fusion-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}

.page-maritime .duo-fusion-body{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.page-maritime .duo-fusion-body strong{
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  color: rgba(255,255,255,.95);
  margin-bottom: 5px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-maritime .duo-fusion-body span{
  font-size: .90rem;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px){
.page-maritime .duo-grid{
    grid-template-columns: 1fr;
  }
.page-maritime .duo-card{
    padding: 20px 14px 16px;
  }
.page-maritime .duo-fusion{
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
.page-maritime .duo-fusion-ico{
    width: 40px;
    height: 40px;
  }
/* Sur mobile, les tags peuvent revenir à la ligne au besoin */
  .page-maritime .duo-tag{
    white-space: normal;
  }
}

/* =========================================================
   7) DUO — correctifs de contraste
   Le duo était conçu pour le hero sombre de « Notre équipe ».
   Ici il vit sur fond clair : on retourne les couleurs.
   ========================================================= */
.page-maritime .duo-card{
  background: rgba(16,24,40,.02);
  border: 1px solid var(--line);
}

.page-maritime .duo-label{
  color: var(--text);
}

.page-maritime .duo-tag{
  color: var(--muted);
  border-color: var(--line);
  background: rgba(16,24,40,.03);
}

.page-maritime .duo-sep-symbol{
  color: rgba(11,18,32,.45);
}

.page-maritime .duo-fusion{
  background: var(--mar-blue-soft);
  border: 1px solid rgba(27,111,184,.18);
}

.page-maritime .duo-fusion-body strong{
  color: var(--text);
}

.page-maritime .duo-fusion-body span{
  color: var(--muted);
}

.page-maritime .duo-ico img{
  filter: none;
}

/* Les deux filets qui encadrent « alliance des deux » étaient en blanc
   translucide — invisibles sur le fond clair de cette page. */
.page-maritime .duo-sep::before,
.page-maritime .duo-sep::after{
  background: linear-gradient(90deg,
    transparent,
    rgba(11,18,32,.16),
    transparent);
}

/* Le badge de l'éclair : même problème, fond et bordure blancs. */
.page-maritime .duo-fusion-ico{
  border: 1px solid rgba(27,111,184,.20);
  background: rgba(255,255,255,.75);
  box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

/* CTA : .lead est blanc (prévu pour le hero) — ici le panneau est clair */
.page-maritime .mar-cta-text{
  color: var(--muted);
  text-shadow: none;
}

/* survol des cartes du duo : garder un texte lisible sur fond clair */
.page-maritime .duo-card:hover,
.page-maritime .duo-card:hover .duo-label{
  color: var(--text);
}
/* =========================================================
   8) FOND ANIMÉ — halos bleus dérivants
   Six disques flous de tailles et d'opacités différentes,
   qui dérivent lentement sur des trajectoires distinctes.
   Le flou les fond dans le blanc : on perçoit une respiration,
   jamais des formes.
   Seul « transform » est animé -> composé par le GPU.
   ========================================================= */
.page-maritime .mar-ism-section{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-maritime .mar-orbs{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-maritime .mar-orb{
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
  opacity: 1;
  filter: blur(110px);
}

/* le contenu repasse au-dessus des halos */
.page-maritime .mar-ism-section > .container{
  position: relative;
  z-index: 1;
}

/* --- Les six halos --- */
.page-maritime .mar-orb-1{
  width: 1000px; height: 1000px;
  top: -340px; left: -260px;
  background: radial-gradient(circle at 50% 50%,
    rgba(96,160,212,.12) 0%, rgba(96,160,212,.06) 40%, rgba(96,160,212,.02) 70%, rgba(226,190,110,0) 100%);
  animation: mar-float-1 21s ease-in-out infinite;
}

.page-maritime .mar-orb-2{
  width: 880px; height: 880px;
  top: -12%; right: -280px;
  background: radial-gradient(circle at 50% 50%,
    rgba(232,199,120,.10) 0%, rgba(232,199,120,.05) 40%, rgba(232,199,120,.01) 70%, rgba(232,199,120,0) 100%);
  animation: mar-float-2 26s ease-in-out infinite;
}

.page-maritime .mar-orb-3{
  width: 1180px; height: 1180px;
  bottom: -520px; left: 8%;
  background: radial-gradient(circle at 50% 50%,
    rgba(126,182,224,.09) 0%, rgba(126,182,224,.05) 40%, rgba(126,182,224,.01) 70%, rgba(126,182,224,0) 100%);
  animation: mar-float-3 30s ease-in-out infinite;
}

.page-maritime .mar-orb-4{
  width: 820px; height: 820px;
  top: 18%; left: 30%;
  background: radial-gradient(circle at 50% 50%,
    rgba(226,190,110,.07) 0%, rgba(226,190,110,.04) 40%, rgba(226,190,110,.01) 70%, rgba(226,190,110,0) 100%);
  animation: mar-float-4 24s ease-in-out infinite;
}

.page-maritime .mar-orb-5{
  width: 960px; height: 960px;
  bottom: -400px; right: -180px;
  background: radial-gradient(circle at 50% 50%,
    rgba(120,180,225,.11) 0%, rgba(120,180,225,.05) 40%, rgba(120,180,225,.01) 70%, rgba(120,180,225,0) 100%);
  animation: mar-float-5 28s ease-in-out infinite;
}

/* une touche de sable, très discrète, pour rappeler la charte */
.page-maritime .mar-orb-6{
  width: 900px; height: 900px;
  top: 38%; left: -320px;
  background: radial-gradient(circle at 50% 50%,
    rgba(233,207,131,.09) 0%, rgba(233,207,131,.05) 40%, rgba(233,207,131,.01) 70%, rgba(233,207,131,0) 100%);
  animation: mar-float-6 33s ease-in-out infinite;
}

/* --- Trajectoires : longues et lentes.
   L'amplitude rend le mouvement perceptible, la lenteur le rend supportable.
   La variation d'opacité fait respirer la densité : c'est elle qu'on
   remarque du coin de l'œil, plus que le déplacement lui-même. --- */
@keyframes mar-float-1{
  0%,100%{ transform: translate3d(0,0,0) scale(1);        opacity: .75; }
  33%    { transform: translate3d(360px,210px,0) scale(1.22); opacity: 1.15; }
  66%    { transform: translate3d(190px,-150px,0) scale(.90); opacity: .70; }
}

@keyframes mar-float-2{
  0%,100%{ transform: translate3d(0,0,0) scale(1);          opacity: 1.05; }
  40%    { transform: translate3d(-400px,250px,0) scale(1.28); opacity: .70; }
  70%    { transform: translate3d(-210px,-130px,0) scale(.88);  opacity: 1.10; }
}

@keyframes mar-float-3{
  0%,100%{ transform: translate3d(0,0,0) scale(1);           opacity: .80; }
  30%    { transform: translate3d(-320px,-230px,0) scale(1.20); opacity: 1.15; }
  65%    { transform: translate3d(340px,-90px,0) scale(.92);    opacity: .75; }
}

@keyframes mar-float-4{
  0%,100%{ transform: translate3d(0,0,0) scale(1);           opacity: .70; }
  50%    { transform: translate3d(-430px,190px,0) scale(1.32);  opacity: 1.20; }
}

@keyframes mar-float-5{
  0%,100%{ transform: translate3d(0,0,0) scale(1);          opacity: 1.10; }
  35%    { transform: translate3d(290px,-320px,0) scale(1.24); opacity: .72; }
  75%    { transform: translate3d(-200px,-140px,0) scale(.94);  opacity: 1.05; }
}

@keyframes mar-float-6{
  0%,100%{ transform: translate3d(0,0,0) scale(1);           opacity: .78; }
  45%    { transform: translate3d(380px,-280px,0) scale(1.26);  opacity: 1.12; }
}

@media (max-width: 780px){
  .page-maritime .mar-orb{ filter: blur(72px); }
  .page-maritime .mar-orb-1{ width: 620px; height: 620px; top: -200px; left: -200px; }
  .page-maritime .mar-orb-2{ width: 560px; height: 560px; right: -220px; }
  .page-maritime .mar-orb-3{ width: 700px; height: 700px; bottom: -320px; }
  .page-maritime .mar-orb-4{ display: none; }
  .page-maritime .mar-orb-5{ width: 600px; height: 600px; bottom: -260px; right: -180px; }
  .page-maritime .mar-orb-6{ width: 560px; height: 560px; left: -220px; }
}

/* Accessibilité : mouvement figé si la personne l'a demandé.
   Les halos restent, la composition tient sans animation. */
@media (prefers-reduced-motion: reduce){
  .page-maritime .mar-orb{ animation: none; }
}

/* =========================================================
   9) DUO DÉTAILLÉ — nom, fonction, biographie
   Les cartes d'origine ne portaient qu'une étiquette :
   elles doivent maintenant respirer.
   ========================================================= */

/* les deux cartes à parts égales, et non 1.08 / .92 */
.page-maritime .duo-grid{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.page-maritime .duo-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 22px 20px;
  min-height: 0;
}

.page-maritime .duo-ico{
  margin-bottom: 12px;
}

.page-maritime .duo-name{
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
}

.page-maritime .duo-label{
  display: block;
  margin: 2px 0 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .94rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.page-maritime .duo-bio{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.72;
}

.page-maritime .duo-bio b{
  color: var(--text);
  font-weight: 700;
}

/* les étiquettes se calent en bas, quelle que soit la longueur du texte */
.page-maritime .duo-tags{
  margin-top: auto;
}

@media (max-width: 780px){
  .page-maritime .duo-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .page-maritime .duo-card{ padding: 20px 18px; }
}

.page-maritime .mar-cta-title{
  margin: 0 0 10px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.01em;
}