/* ============ Identité ============ */
.brand__logo{width:62px;height:62px}
.brand{gap:13px;font-size:1.16rem}
.footer-logo{width:180px;height:180px;margin:-40px 0 -26px -22px}

/* ============ Sections sombres ============ */
.section--ink{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.section--ink:before{content:"";position:absolute;left:-6%;top:-20%;width:34%;height:140%;background:var(--blue);clip-path:polygon(28% 0,100% 0,72% 100%,0 100%);opacity:.5}
.section--ink .shell{position:relative;z-index:1}
.section--ink a{color:var(--yellow)}

/* ============ Chapô sur deux colonnes ============ */
.lead-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:start}
.lead-split h2{margin-bottom:0}
.lead-split__text{font-size:1.14rem;margin:0;padding-top:8px}

/* ============ Listes ============ */
.check-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:13px}
.check-list li{position:relative;padding-left:32px;font-size:1rem}
.check-list li:before{content:"";position:absolute;left:0;top:.52em;width:16px;height:3px;background:var(--yellow)}
.check-list--minus li:before{background:var(--green)}
.section--ink .check-list--minus li:before{background:var(--yellow);opacity:.55}
.problem-result{margin-top:26px;padding-left:22px;border-left:5px solid var(--yellow);font-size:1.08rem}
.problem-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(35px,6vw,90px);align-items:center}

/* ============ Circuit / cascade ============ */
.flow{list-style:none;counter-reset:flow;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.flow__step{position:relative;padding:30px 28px 26px 0;border-top:3px solid var(--blue)}
.flow__step+.flow__step{padding-left:28px;border-left:1px solid var(--line)}
.flow__step:after{content:"→";position:absolute;right:-9px;top:-19px;font:800 1.5rem/1 Montserrat;color:var(--yellow);background:var(--cream);padding:0 4px;z-index:1}
.flow__step:last-child:after{content:none}
.flow__number{display:block;font:800 2.1rem/1 Montserrat;color:var(--blue);margin-bottom:14px}
.flow__step h3{font-size:1.06rem;margin-bottom:11px}
.flow__tags{font-size:.86rem;color:#4a6180;margin:0;font-weight:700}

/* ============ Bandeau de questions ============ */
.tag-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;position:relative;z-index:1}
.tag-row span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);padding:13px 20px;font:700 .95rem Montserrat}

/* ============ Promesses ============ */
.promise-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,70px);margin-top:42px}
.promise{display:flex;gap:22px;padding:28px 0;border-top:1px solid var(--line)}
.promise:nth-child(-n+2){border-top:3px solid var(--blue)}
.promise__number{font:800 1.5rem/1 Montserrat;color:var(--yellow);flex:none;padding-top:3px}
.promise h3{font-size:1.14rem;margin-bottom:9px}
.promise p{font-size:.95rem;margin:0}

/* ============ Interfaces ============ */
.interfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.interface{background:#fff;border-top:7px solid var(--green);padding:26px 24px 30px;display:flex;flex-direction:column}
.interface:nth-child(2){border-top-color:var(--yellow)}
.interface:nth-child(3){border-top-color:var(--blue)}
.interface:nth-child(4){border-top-color:var(--ink)}
.interface__who{font:800 .7rem Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:13px}
.interface h3{font-size:1.1rem;margin-bottom:11px}
.interface p:last-child{font-size:.93rem;margin:0}

/* ============ Trois principes ============ */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:1px solid rgba(255,255,255,.4)}
.pillar{padding:30px 30px 10px 0}
.pillar+.pillar{padding-left:30px;border-left:1px solid rgba(255,255,255,.3)}
.pillar h3{font-size:1.2rem;color:var(--yellow);margin-bottom:12px}
.pillar p{font-size:.96rem;margin:0}

/* ============ Comparaison ============ */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.versus__col{background:#fff;padding:30px 28px;border-top:7px solid var(--line)}
.versus__col--strong{background:var(--blue);color:#fff;border-top-color:var(--yellow)}
.versus__label{font:800 .72rem Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:14px}
.versus__col--strong .versus__label{color:var(--yellow)}
.versus p:last-child{margin:0;font-size:1.02rem}
.between-worlds{margin-top:22px;background:var(--ink);color:#fff;padding:36px 34px}
.between-worlds h3{font-size:1.35rem;color:var(--yellow);margin-bottom:14px;max-width:760px}
.between-worlds p{margin:0;max-width:900px}
.between-worlds strong{color:var(--yellow)}

/* ============ Bandeau de chiffres ============ */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px;margin-top:44px;position:relative;z-index:1}
.stat-band .stat{border-top:7px solid var(--yellow);padding-top:14px}
.stat-band .stat__number{font:800 clamp(2.2rem,3.6vw,3.3rem)/.9 Montserrat;color:#fff;letter-spacing:-.05em}
.stat-band .stat p{font-size:.88rem;margin:12px 0 0}
.operator-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.operator-row span{background:var(--blue);color:#fff;padding:11px 17px;font:700 .8rem Montserrat}
.operator-row__next{background:transparent!important;color:var(--ink)!important;border:1px dashed var(--blue)}

/* ============ Frise du parcours ============ */
.timeline{list-style:none;padding:0;margin:48px 0 0;position:relative}
.timeline:before{content:"";position:absolute;left:29px;top:12px;bottom:12px;width:2px;background:rgba(255,255,255,.28)}
.timeline__item{display:grid;grid-template-columns:60px 1fr;gap:clamp(22px,4vw,48px);padding-bottom:42px;position:relative}
.timeline__item:last-child{padding-bottom:0}
.timeline__number{font:800 1.3rem/58px Montserrat;color:var(--ink);background:var(--yellow);width:60px;height:60px;border-radius:50%;text-align:center;position:relative;z-index:1}
.timeline__body{padding-top:9px;max-width:760px}
.timeline__body h3{font-size:1.5rem;color:var(--yellow);margin-bottom:12px}
.timeline__body p{font-size:1.01rem}
.timeline__meta{font-size:.87rem;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);color:#c9d8e8}
.timeline__meta span{font:800 .68rem Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--green);background:#fff;padding:4px 9px;margin-right:11px}

/* ============ Critères ============ */
.criteria-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,80px);position:relative;z-index:1}
.criteria-grid h2{font-size:clamp(1.5rem,2.4vw,2.05rem)}

/* ============ Phases ============ */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.phase{background:#fff;padding:30px 28px 34px;border-top:7px solid var(--line)}
.phase--now{border-top-color:var(--green);box-shadow:0 14px 30px #132b4a14}
.phase__when{font:800 .78rem Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:12px}
.phase--now .phase__when{color:var(--green)}
.phase h3{font-size:1.32rem;margin-bottom:12px}
.phase p:last-child{font-size:.95rem;margin:0}

/* ============ Engagements ============ */
.commitments{margin:26px 0 0}
.commitments>div{padding:19px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:20px}
.commitments dt{font:800 .95rem Montserrat;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.commitments dd{margin:0;font-size:.97rem}

/* ============ Bande d'appel à l'action ============ */
.section--cta{background:var(--yellow);padding:70px 0}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap}
.cta-band .eyebrow{color:var(--ink);opacity:.72}
.cta-band h2{margin:0;max-width:640px}
.cta-band p{margin:0}
.cta-band .button{background:var(--ink);color:#fff;margin-right:10px}
.button--dark-outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.cta-band .button--dark-outline{background:transparent;color:var(--ink)}

/* ============ Vidéo ============ */
.video-feature{margin:0 0 54px;background:var(--ink);position:relative}
.video-feature video{display:block;width:100%;max-height:70vh;background:#000}
.video-feature figcaption{padding:20px 26px;color:#fff;font-weight:700}
.video-feature figcaption .eyebrow{display:block;margin-bottom:6px}
.video-band{background:var(--ink);color:#fff;padding:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden}
.video-band__copy{padding:70px max(20px,calc((100vw - 1180px)/2)) 70px max(20px,calc((100vw - 1180px)/2));padding-right:6vw}
.video-band__copy h2{color:var(--yellow)}
.video-band video{display:block;width:100%;height:100%;object-fit:cover;background:#000;min-height:330px}

/* ============ Lightbox ============ */
body.has-lightbox{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(8px,2vw,26px);padding:clamp(14px,3vw,34px);background:#071a30f2;opacity:0;transition:opacity .2s ease}
/* `display:grid` ci-dessus annule le display:none par defaut de [hidden] :
   sans cette regle la lightbox fermee recouvre la page et bloque tous les clics. */
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__stage{margin:0;display:grid;justify-items:center;gap:14px;min-width:0}
.lightbox__stage img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 22px 70px #000}
.lightbox__stage figcaption{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;justify-content:center;color:#fff;font:700 .95rem Montserrat;text-align:center}
.lightbox__counter{font:700 .78rem Lato;color:#9fb6cd;letter-spacing:.08em}
.lightbox__nav,.lightbox__close{border:0;background:#ffffff1f;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .18s ease}
.lightbox__nav{width:clamp(42px,5vw,58px);height:clamp(58px,8vw,78px);font:400 clamp(2rem,4vw,2.8rem)/1 Arial}
.lightbox__nav[hidden],.lightbox__close[hidden]{display:none}
.lightbox__nav:hover,.lightbox__close:hover{background:#ffffff36}
.lightbox__close{position:absolute;right:clamp(14px,3vw,34px);top:clamp(14px,3vw,34px);width:46px;height:46px;font:400 2rem/1 Arial;z-index:2}
.lightbox__nav:focus-visible,.lightbox__close:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.gallery-item img{cursor:zoom-in}
.gallery-item img:focus-visible{outline:4px solid var(--blue);outline-offset:3px}

/* ============ Apparition au défilement ============ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ Responsive ============ */
@media(max-width:980px){
  .flow{grid-template-columns:1fr 1fr}
  .flow__step:nth-child(2):after{content:none}
  .flow__step:nth-child(3){padding-left:0;border-left:0}
  .interfaces{grid-template-columns:1fr 1fr}
  .stat-band{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:1fr}
  .pillar{padding:26px 0 8px}
  .pillar+.pillar{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.3)}
  .promise-list{grid-template-columns:1fr}
  .promise:nth-child(2){border-top:1px solid var(--line)}
}
@media(max-width:760px){
  .brand__logo{width:52px;height:52px}
  .footer-logo{width:150px;height:150px;margin:-32px 0 -20px -18px}
  .lead-split,.problem-grid,.criteria-grid,.versus,.phases,.video-band{grid-template-columns:1fr}
  .problem-grid .photo-panel{order:-1}
  .flow{grid-template-columns:1fr;margin-top:32px}
  .flow__step{padding:24px 0 22px;border-top:1px solid var(--line)}
  .flow__step:first-child{border-top:3px solid var(--blue)}
  .flow__step+.flow__step{padding-left:0;border-left:0}
  .flow__step:after{content:none}
  .interfaces{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr 1fr}
  .timeline:before{left:22px}
  .timeline__item{grid-template-columns:46px 1fr;gap:18px;padding-bottom:34px}
  .timeline__number{width:46px;height:46px;font-size:1.05rem;line-height:44px}
  .timeline__body h3{font-size:1.28rem}
  .commitments>div{grid-template-columns:1fr;gap:7px}
  .cta-band{flex-direction:column;align-items:flex-start}
  .cta-band .button{margin-bottom:10px}
  .between-worlds{padding:28px 22px}
  .video-band__copy{padding:54px 20px}
  .video-feature{margin-bottom:38px}
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto;padding-top:74px}
  .lightbox__stage{grid-row:1}
  .lightbox__nav{position:absolute;bottom:clamp(14px,3vw,34px);width:64px;height:52px}
  .lightbox__nav--prev{left:clamp(14px,3vw,34px)}
  .lightbox__nav--next{right:clamp(14px,3vw,34px)}
  .lightbox__stage img{max-height:64vh}
}

/* ============ Visuels de page ============ */
.photo-panel--brochure{background-image:url('/assets/images/travail-tablette.jpeg');background-position:center 30%}
.photo-panel--presentation{background-image:url('/assets/images/faf-presentation.jpeg')}
.photo-panel--victoire{background-image:url('/assets/images/faf-victoire.jpeg')}
.hero--pay:before{background:linear-gradient(90deg,rgba(19,43,74,.96) 0%,rgba(19,43,74,.9) 42%,rgba(19,43,74,.62) 72%,rgba(19,43,74,.4) 100%),url('/assets/images/faf-mp-pay-brochure.jpeg') center 40%/cover}
.hero--demarche:before{background:linear-gradient(90deg,rgba(19,43,74,.96) 0%,rgba(19,43,74,.88) 45%,rgba(19,43,74,.55) 78%,rgba(19,43,74,.3) 100%),url('/assets/images/pd-certificat-trio.jpeg') center 26%/cover}
.gallery-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-item--wide{grid-column:span 2}
.gallery-item:not(.gallery-item--wide) img{height:280px}
.gallery-item--wide img{height:280px}
@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-item:not(.gallery-item--wide) img,.gallery-item--wide img{height:250px}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}.gallery-item--wide{grid-column:auto}.gallery-item:not(.gallery-item--wide) img,.gallery-item--wide img{height:260px}}
.section-more{margin:32px 0 0;position:relative;z-index:1}

/* ============ Navigation : bascule burger plus tôt (8 entrées + logo agrandi) ============ */
.site-nav{gap:21px}
.site-nav{position:static}
@media(max-width:1120px){
  .site-nav{display:none;position:absolute;top:100%;left:20px;right:20px;background:#fff;padding:22px;box-shadow:0 18px 34px #132b4a33;flex-direction:column;align-items:flex-start;gap:16px;z-index:5;font-size:.95rem}
  .site-nav.is-open{display:flex}
  .menu-toggle{display:block}
}
/* Contraste des listes sur fond bleu */
.section--blue .check-list li:before{background:var(--yellow)}
.section--blue .check-list--minus li:before{background:#fff;opacity:.6}

/* ============ Contact ============ */
.hero--contact:before{background:linear-gradient(90deg,rgba(19,43,74,.96) 0%,rgba(19,43,74,.86) 48%,rgba(19,43,74,.5) 80%,rgba(19,43,74,.3) 100%),url('/assets/images/faf-reunion.jpeg') center 30%/cover}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.contact-card{background:#fff;border-top:7px solid var(--blue);padding:28px 26px 32px}
.contact-card:nth-child(2){border-top-color:var(--yellow)}
.contact-card:nth-child(3){border-top-color:var(--green)}
.contact-card__label{font:800 .72rem Montserrat;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:16px}
.contact-card__lines{display:grid;gap:8px;margin:0;font-weight:700;font-size:1.02rem}
.contact-card__lines a{text-decoration:none;border-bottom:2px solid var(--yellow);justify-self:start;word-break:break-word}
.contact-card__lines a:hover{border-bottom-color:var(--blue)}
.contact-card__note{font-size:.86rem;color:#4a6180;margin:16px 0 0}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* =====================================================================
   ÉCHELLE TYPOGRAPHIQUE — source unique de vérité
   Chargée en dernier, elle remplace les clamps dispersés dans
   main.css / content.css / refinement.css. Chaque taille suit une
   progression linéaire clamp(min, rem + vw, max) : plus de sauts
   brusques entre le mobile et le grand écran.
   ===================================================================== */

body{font-size:clamp(1rem,.94rem + .26vw,1.125rem)}

h1{font-size:clamp(2rem,1.32rem + 1.82vw,3.5rem);line-height:1.05;letter-spacing:-.032em}
h2{font-size:clamp(1.5rem,1.146rem + 1.13vw,2.5rem);line-height:1.14;letter-spacing:-.025em}
h3{font-size:clamp(1.04rem,1rem + .16vw,1.14rem);line-height:1.3}

/* Heros : un cran en dessous de l'échelle précédente, à toutes les largeurs */
.hero h1{font-size:clamp(2.05rem,1.42rem + 1.79vw,3.6rem);line-height:1.04;letter-spacing:-.038em}
.hero--compact h1{font-size:clamp(1.9rem,1.12rem + 1.48vw,3rem)}
.hero p:not(.eyebrow){font-size:clamp(1rem,.95rem + .3vw,1.16rem)}
.hero__inner{padding:clamp(62px,5.4vw,96px) 0 clamp(68px,6.2vw,108px)}
.hero{min-height:min(660px,84vh)}
.hero--compact{min-height:min(430px,58vh)}

/* Titres de page hors hero */
.founder h1{font-size:clamp(2rem,1.32rem + 1.82vw,3.5rem)}
.simple-page h1{font-size:clamp(1.9rem,1.2rem + 1.6vw,3.1rem)}
.article__header h1{font-size:clamp(1.85rem,1.1rem + 1.4vw,2.9rem)}

/* Chapôs et textes d'accroche */
.section-lead,.lead-split__text,.article__lead,.founder-lead,.quote-block p,.gallery-lead{font-size:clamp(1rem,.95rem + .3vw,1.14rem)}

/* Chiffres */
.stat__number{font-size:clamp(2.35rem,1.5rem + 3vw,4rem)}
.stat-band .stat__number{font-size:clamp(1.9rem,1.3rem + 1.55vw,2.95rem)}
.stat p{font-size:clamp(.84rem,.81rem + .12vw,.92rem)}

/* Numéros de séquence */
.step__number{font-size:clamp(1.8rem,1.4rem + 1.3vw,2.3rem)}
.flow__number{font-size:clamp(1.65rem,1.35rem + 1.05vw,2.1rem)}
.promise__number{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.timeline__number{font-size:clamp(1.05rem,.95rem + .35vw,1.3rem)}

/* Titres de composants */
.timeline__body h3{font-size:clamp(1.2rem,1.05rem + .62vw,1.5rem)}
.phase h3{font-size:clamp(1.12rem,1.02rem + .42vw,1.32rem)}
.between-worlds h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem)}
.pillar h3{font-size:clamp(1.06rem,1rem + .3vw,1.2rem)}
.interface h3,.flow__step h3,.promise h3{font-size:clamp(1rem,.96rem + .26vw,1.14rem)}
.criteria-grid h2{font-size:clamp(1.3rem,1.06rem + .72vw,1.85rem)}
.cta-band h2{font-size:clamp(1.45rem,1.16rem + 1.1vw,2.25rem)}
.video-band__copy h2{font-size:clamp(1.5rem,1.15rem + 1.35vw,2.4rem)}
.press-card h2,.press-card h3,.news-card h2{font-size:clamp(1.02rem,.96rem + .26vw,1.16rem)}
.article__content h2{font-size:clamp(1.3rem,1.13rem + .6vw,1.6rem)}
.award h3{font-size:clamp(.96rem,.93rem + .18vw,1.05rem)}
.contact-card__lines{font-size:clamp(.96rem,.93rem + .18vw,1.06rem)}

/* Interface et navigation */
.site-nav{font-size:clamp(.78rem,.76rem + .1vw,.84rem)}
.brand{font-size:clamp(.98rem,.92rem + .22vw,1.14rem)}
.nav-cta,.button{font-size:clamp(.72rem,.7rem + .1vw,.78rem);padding:clamp(11px,1vw,13px) clamp(15px,1.4vw,19px)}
.eyebrow{font-size:clamp(.68rem,.66rem + .08vw,.75rem)}
.footer-grid{font-size:clamp(.84rem,.82rem + .09vw,.9rem)}
.footer-name{font-size:clamp(1.25rem,1.1rem + .55vw,1.6rem)}
.tag-row span{font-size:clamp(.84rem,.8rem + .18vw,.95rem)}
.gallery-item figcaption{font-size:clamp(.88rem,.85rem + .14vw,.98rem)}

/* Rythme vertical proportionnel à la largeur */
.section{padding:clamp(58px,6.4vw,104px) 0}
.quote-block{padding:clamp(62px,6.6vw,104px) 0}
.listing,.article{padding:clamp(48px,4.6vw,76px) 0}
.section--cta{padding:clamp(48px,4.4vw,70px) 0}

@media(max-width:520px){
  .brand small{display:none}
  .hero .button,.cta-band .button{display:block;width:100%;text-align:center;margin-right:0;margin-bottom:10px}
  .quote-block .button{display:block;width:100%;text-align:center}
}
.hero--compact .hero__inner{padding:clamp(52px,4.4vw,78px) 0 clamp(58px,4.9vw,86px)}
/* Les titres de carte doivent rester distincts du corps de texte sur petit écran */
.interface h3,.flow__step h3,.promise h3{font-size:clamp(1.04rem,1rem + .16vw,1.14rem)}

/* Le menu déroulant garde un texte confortable au doigt (doit rester
   après l'échelle typographique, qui ramènerait .site-nav à .8rem). */
@media(max-width:1120px){
  .site-nav{font-size:1rem;gap:17px}
  .site-nav .nav-cta{font-size:.78rem;margin-top:4px}
}

/* ============ Filet anti-blocage de clics ============
   Tous les habillages decoratifs sont en position absolue et peuvent
   recouvrir du contenu cliquable (.section--blue:before couvre par
   exemple 38 % de la largeur a droite). On les rend traversants. */
.hero:before,.hero:after,
.section--blue:before,.section--ink:before,
.quote-block:before,.pay__visual:before,
.photo-panel:after,.flow__step:after{pointer-events:none}

/* ============ Empilement : l'en-tete au-dessus de tout ============
   .hero est en position:relative sans z-index : il ne cree donc aucun
   contexte d'empilement et son enfant .hero__inner (z-index:2 dans
   content.css) remontait a la racine, a egalite avec .site-header (2).
   A egalite c'est l'ordre du DOM qui gagne, donc le hero passait devant
   et masquait le menu deroulant sur mobile.
   On confine chaque section decoree, et on remonte l'en-tete. */
.hero,.section--blue,.section--ink,.quote-block,.pay,.video-band{z-index:0}
.site-header{z-index:30}

/* ============ Mentions legales du pied de page ============ */
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 28px}
.legal-line{margin:0;flex:1 1 640px;font-size:clamp(.66rem,.64rem + .08vw,.72rem);line-height:1.55;color:#9db0c4;letter-spacing:.005em}
.legal-copyright{margin:0;flex:0 0 auto;white-space:nowrap}
@media(max-width:760px){.footer-bottom{flex-direction:column;gap:12px}.legal-line{flex:1 1 auto}}

/* ============ Visuels des nouvelles sections ============ */
.photo-panel--forum{background-image:url('/assets/images/forum-ivindo-groupe.jpeg');background-position:center 32%}
.photo-panel--ministere{background-image:url('/assets/images/audience-ministerielle.jpeg');background-position:center 40%}
/* ---- Decalage des photos du carrousel vers la droite ----
   Le hero est bien plus large que haut (2.9:1) alors que les photos font
   1.5:1 a 1.8:1 : avec background-size:cover elles remplissent exactement la
   largeur et ne sont rognees qu'en hauteur. Il n'y a donc aucun jeu
   horizontal, et un background-position-x ne decalerait rien.
   On elargit plutot le conteneur des diapos de 15% vers la droite : le cover
   se calcule sur ce conteneur plus large, l'image est agrandie d'autant et
   son contenu glisse vers la droite, hors du degrade. Le debord est masque
   par overflow:hidden du hero, et la couverture reste garantie a toutes les
   tailles puisque cover s'applique toujours. */
.hero--carousel .hero-slide:first-child{background-position:center 28%}

/* ============ Intertitres de galerie ============ */
.gallery-section{font-size:clamp(1.15rem,1rem + .55vw,1.5rem);margin:54px 0 22px;padding-bottom:12px;border-bottom:3px solid var(--yellow);letter-spacing:-.015em}
.gallery-section:first-of-type{margin-top:8px}
.gallery-grid+.gallery-section{margin-top:56px}

/* ============ Nouveaux panneaux et paire de photos ============ */
.photo-panel--officielle{background-image:url('/assets/images/pd-photo-officielle.jpeg');background-position:center 38%}
.photo-panel--famille{background-image:url('/assets/images/pd-photo-famille.jpeg');background-position:center 38%}
/* Deux photos empilees a la place d'un panneau unique */
.photo-duo{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-height:440px}
.photo-duo img{display:block;width:100%;height:100%;min-height:210px;object-fit:cover;object-position:center 26%}
.photo-duo img:first-child{clip-path:polygon(0 0,100% 5%,100% 100%,0 100%)}
.photo-duo img:last-child{clip-path:polygon(0 0,100% 0,100% 95%,0 100%)}
@media(max-width:760px){.photo-duo{order:-1;min-height:0;grid-template-rows:auto auto}.photo-duo img{min-height:190px;height:190px}}

/* ---- Degrade du hero : liberer la moitie droite ----
   L'ancien degrade tenait 87% d'opacite jusqu'a 38% de la largeur et etait
   encore a 50% au milieu : c'est lui qui mangeait la photo, plus que le
   cadrage. On garde la zone du texte protegee (jusqu'a ~36%) puis on chute
   beaucoup plus vite pour rendre la photo lisible sur toute la droite. */
.hero--carousel:before{background:linear-gradient(90deg,rgba(19,43,74,.95) 0%,rgba(19,43,74,.82) 36%,rgba(19,43,74,.45) 54%,rgba(19,43,74,.13) 70%,rgba(19,43,74,.03) 87%,rgba(19,43,74,0) 100%)}

/* ---- Hero du carrousel : la photo occupe la partie droite ----
   En plein cadre avec cover, "rogner a gauche" et "pousser a droite" sont
   contradictoires : rogner a gauche ramene le sujet vers le degrade. Les deux
   ne tiennent que si la photo n'occupe plus toute la largeur. Le quart gauche
   devient donc un aplat encre qui porte le texte, la photo demarre a 26% et
   n'est plus rognee horizontalement du tout : seule son extremite gauche
   passe sous la fin du degrade. */
@media(min-width:901px){
  .hero--carousel{background:var(--ink)}
  .hero--carousel .hero-slides{left:32%;right:0}
  /* Opacite PLEINE jusqu'au-dela du bord de la photo (32%) : c'est ce qui
     masque l'arete verticale. Un .99 laissait la ligne transparaitre. */
  .hero--carousel:before{background:linear-gradient(90deg,rgba(19,43,74,1) 0%,rgba(19,43,74,1) 36%,rgba(19,43,74,.66) 48%,rgba(19,43,74,.24) 62%,rgba(19,43,74,.05) 76%,rgba(19,43,74,0) 88%)}
}
/* Au-dela de 1400px on pousse la photo plus loin a droite : le texte
   s'arrete vers 55% de la largeur et masquait encore des visages. */
@media(min-width:1400px){
  .hero--carousel .hero-slides{left:40%}
  .hero--carousel:before{background:linear-gradient(90deg,rgba(19,43,74,1) 0%,rgba(19,43,74,1) 44%,rgba(19,43,74,.6) 56%,rgba(19,43,74,.2) 68%,rgba(19,43,74,.04) 80%,rgba(19,43,74,0) 90%)}
}
/* Sous 900px la colonne de texte occupe toute la largeur : photo plein cadre
   et voile vertical, sinon le texte deviendrait illisible. */
@media(max-width:900px){
  .hero--carousel .hero-slides{left:0;right:0}
  .hero--carousel:before{background:linear-gradient(180deg,rgba(19,43,74,.72) 0%,rgba(19,43,74,.86) 55%,rgba(19,43,74,.94) 100%)}
}