/* ============================================================
   OFFRES.CSS — styles de la refonte 4 offres (mobile first)
   Palette : uniquement les variables de variables.css
============================================================ */

/* ── Menu déroulant « Les offres » ── */
.nav-item-deroulant{position:relative}
.nav-item-deroulant > .nav-link{display:inline-flex;align-items:center;gap:5px}
.nav-item-deroulant > .nav-link svg{transition:transform .18s ease}
.nav-item-deroulant:hover > .nav-link svg,
.nav-item-deroulant:focus-within > .nav-link svg{transform:rotate(180deg)}
.nav-deroulant{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  background:var(--white);
  border:1px solid var(--gray);
  border-radius:10px;
  padding:8px 0;
  min-width:215px;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 12px 32px rgba(2,12,29,.12);
  z-index:95;
}
.nav-deroulant::before{
  content:"";
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}
.nav-item-deroulant:hover .nav-deroulant,
.nav-item-deroulant:focus-within .nav-deroulant{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(4px);
}
.nav-deroulant a{
  font-family:var(--font-serif);
  font-size:15px;
  color:var(--dark);
  padding:9px 18px;
  white-space:nowrap;
  transition:background .12s ease;
}
.nav-deroulant a:hover{background:var(--blue-light)}
@media (max-width:768px){
  .nav-item-deroulant{display:flex;flex-direction:column;align-items:center}
  .nav-deroulant{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    border:0;
    box-shadow:none;
    background:transparent;
    padding:6px 0 0;
    min-width:0;
    align-items:center;
  }
  .nav-deroulant::before{display:none}
  .nav-deroulant a{font-size:14px;padding:6px 12px;opacity:.85}
}

/* ── Bandeau OPCO permanent ── */
.topbar{
  background:var(--blue);
  color:var(--white);
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.4;
  text-align:center;
  padding:8px 16px;
}
.topbar strong{color:var(--green-mint);font-weight:600}

/* ── Hero promesse ── */
.hero{gap:20px}
.hero-subtitle{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  color:var(--dark);
  margin:0;
}
.hero-cta-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:28px;
}
.btn-primary{
  display:inline-block;
  background:var(--blue);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  padding:14px 28px;
  border-radius:999px;
  transition:background .2s ease;
}
.btn-primary:hover{background:var(--dark)}
.link-secondary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
.link-secondary:hover{color:var(--blue)}
.link-secondary img{transition:transform .2s ease}
.link-secondary:hover img{transform:translate(3px,-3px)}
.link-secondary--bleu{color:var(--blue)}
.link-secondary--bleu:hover{color:var(--dark)}
.hero-mention{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--dark);
  opacity:.7;
  margin-top:14px;
}

/* ── Bandeau de confiance (défilement continu) ── */
.trust-band{
  padding:32px 0;
  text-align:center;
}
.trust-surtitre{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dark);
  opacity:.6;
  margin-bottom:14px;
}
.trust-marquee{
  overflow:hidden;
  width:100%;
}
.trust-track{
  display:flex;
  width:max-content;
  animation:trust-scroll 35s linear infinite;
}
.trust-names{
  display:flex;
  align-items:center;
  flex-shrink:0;
  font-family:var(--font-condensed);
  font-size:20px;
  line-height:1.8;
  color:var(--dark);
  white-space:nowrap;
}
.trust-names span{white-space:nowrap}
.trust-sep{color:var(--blue);margin:0 14px}
@keyframes trust-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .trust-track{animation:none}
}

/* ── Sections génériques de la refonte ── */
.bloc-section{
  padding:var(--section-pad-v) var(--side-padding);
  max-width:var(--page-width);
  margin:0 auto;
}
.bloc-section .section-title{margin-bottom:36px}

/* ── Trois situations ── */
.situations-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.situation-card{
  background:var(--blue-light);
  border-radius:var(--radius-card);
  padding:28px 24px;
}
.situation-card:nth-child(2){background:var(--green-light)}
.situation-card:nth-child(3){background:var(--peach)}
.situation-title{
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.3;
  margin-bottom:12px;
  color:var(--dark);
}
.situation-desc{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
}

/* ── Trois différences ── */
.diff-list{display:flex;flex-direction:column;gap:28px;max-width:820px}
.diff-item{display:flex;gap:18px;align-items:flex-start}
.diff-num{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--blue);
  color:var(--white);
  font-family:var(--font-condensed);
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
}
.diff-title{
  font-family:var(--font-serif);
  font-size:21px;
  line-height:1.3;
  margin-bottom:8px;
  color:var(--dark);
}
.diff-desc{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
}

/* ── Groupes d'offres en colonnes ── */
.offres-columns{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.offres-col{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.offres-col .training-card{width:100%;max-width:none}
#offres .training-card{cursor:pointer}
.training-card--wide{margin-top:32px}
@media (min-width:900px){
  .training-card--wide{flex-direction:row}
  .training-card--wide .card-header{width:38%;min-width:300px;height:auto;min-height:220px}
  .training-card--wide .card-body{flex:1}
  .offres-col--sans-label{padding-top:40px}
}
.offres-group-label{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0;
}
@media (min-width:900px){
  .offres-columns{grid-template-columns:repeat(3,1fr);gap:24px}
}
.offer-format-note{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--dark);
  margin-top:4px;
}

/* ── Cas clients (preuve) ── */
.cases-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.case-card{
  background:var(--pink-white);
  border:1px solid var(--gray);
  border-radius:var(--radius-card);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.case-client{
  font-family:var(--font-condensed);
  font-size:22px;
  color:var(--dark);
}
.case-what{
  font-family:var(--font-serif);
  font-size:17px;
  color:var(--blue);
}
.case-desc{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
}
.case-block-label{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  margin-top:8px;
}

/* ── Bloc financement ── */
.financement-section{
  background:var(--cream);
  padding:var(--section-pad-v) var(--side-padding);
}
.financement-inner{max-width:820px;margin:0 auto}
.financement-desc{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--dark);
  margin-bottom:24px;
}
.financement-points{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:24px;
}
.financement-point{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  color:var(--dark);
}
.financement-point::before{
  content:"";
  flex-shrink:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--green-mint-alt);
  margin-top:5px;
}

/* ── Variantes violettes (univers Second Cerveau) ── */
.diff-num--purple{background:var(--purple)}
.not-list{display:flex;flex-direction:column;gap:14px}
.not-list li{
  position:relative;
  padding-left:30px;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
}
.not-list li::before{
  content:"✕";
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
  color:var(--orange);
}
/* ── Encart générique ── */
.encart{
  background:var(--lavender);
  border-radius:var(--radius-card);
  padding:22px 24px;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
  margin:28px 0;
}
.encart--lavande{background:var(--lavender)}
.encart--menthe{background:var(--green-light)}

/* ── Badge distanciel ── */
.badge-distanciel{
  background:var(--green-mint);
  border-color:var(--green-mint);
  color:var(--dark);
  font-weight:600;
}

/* ── Carte formateur : photo toujours à hauteur de l'encart (desktop) ── */
@media (min-width:769px){
  .instructor-card .instructor-photo{
    height:auto;
    align-self:stretch;
    min-height:630px;
  }
}

/* ── Liens vers les autres offres dans le hero ── */
main .formation-hero{position:relative}
.offre-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-serif);
  font-size:14px;
  color:var(--dark);
  opacity:.7;
  transition:opacity .15s ease;
  z-index:2;
  white-space:nowrap;
}
.offre-nav:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.offre-nav--prev{left:22px}
.offre-nav--next{right:22px}
@media (max-width:1200px){.offre-nav{display:none}}
@media (min-width:1201px){
  main .formation-hero .formation-hero-inner{padding-left:180px;padding-right:180px}
}

/* ── Heros compacts sur les pages internes (photo mise en avant) ── */
main .formation-hero{padding:20px var(--side-padding) 14px}
main .formation-title{font-size:clamp(22px,2.4vw,28px);margin-bottom:2px;line-height:1.05}
main .formation-subtitle{font-size:clamp(13px,1.3vw,15px);margin-bottom:0;line-height:1.4}
main .formation-back{margin-bottom:4px;font-size:12px}
main .offre-photo{margin-top:10px}
main .formation-content{padding-bottom:28px}
main .formation-main .formation-section:last-child{margin-bottom:0}
@media (max-width:768px){
  main .formation-hero{padding:18px 24px 14px}
}

/* ── Bandeau photo sous le hero des pages offres ── */
.offre-photo{
  max-width:var(--content-width);
  margin:20px auto 0;
  padding:0 16px;
}
.offre-photo img{
  display:block;
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
  border-radius:var(--radius-large);
}
@media (max-width:768px){
  .offre-photo img{aspect-ratio:16/10}
}

/* ── Footer compact en deux colonnes ── */
.footer-section{min-height:0;padding:56px var(--side-padding) 120px}
.footer-content{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:48px;width:100%;margin-left:0}
.footer-nav{gap:20px}
.footer-infos{display:flex;flex-direction:column;gap:28px;width:374px;max-width:100%}
@media (min-width:900px){
  .footer-nav{margin-left:480px}
  .footer-infos{margin-left:auto}
}
@media (max-width:768px){
  .footer-content{flex-direction:column;gap:32px}
  .footer-infos{width:100%}
}

/* ── Grille de logos clients ── */
.logos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 22px;
  align-items:center;
}
.logos-grid img{
  width:100%;
  height:72px;
  object-fit:contain;
  background:var(--white);
  border-radius:8px;
  padding:10px 12px;
}

/* ── Pages offres : cartes de formats ── */
.format-cards{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.format-card{
  background:var(--white);
  border:1px solid var(--gray);
  border-radius:var(--radius-card);
  padding:24px;
}
.format-card-header{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.format-duree{
  font-family:var(--font-condensed);
  font-size:24px;
  color:var(--blue);
}
.format-nom{
  font-family:var(--font-serif);
  font-size:19px;
  color:var(--dark);
}
.format-effectif{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--dark);
  opacity:.65;
  margin-left:auto;
}
.format-desc{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--dark);
}
.format-nom em{
  font-style:normal;
  font-size:14px;
  opacity:.6;
}
.format-list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.format-list li{
  position:relative;
  padding-left:18px;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  color:var(--dark);
}
.format-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
}

/* ── CTA de bas de page offres ── */
.offre-cta-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:12px;
}

/* ── Responsive ≥768px ── */
@media (min-width:768px){
  .topbar{font-size:14px}
  .hero-cta-row{flex-direction:row;justify-content:center;gap:26px}
  .situations-grid{grid-template-columns:repeat(3,1fr)}
  .cases-grid{grid-template-columns:repeat(3,1fr)}
  .trust-names{font-size:24px}
  .format-cards{gap:24px}
}