:root{
  --gris-fonce-ca: #4a5a76;
  --gris-clair-ca: #b5b5b6;
  --c-border: #d1d4d6;      /* gris lignes */
  --c-accent: #fdeee8;      /* aplat clair */
  --c-text: #111;
  --c-muted: rgba(17,17,17,.78);
  --c-bg: #f7f7f7;

  --ff-title: "Montserrat", "Arial Narrow", Arial, sans-serif;
  --ff-body: "Open Sans", Arial, system-ui, sans-serif;

  --max: 1100px;
  --pad: clamp(16px, 2.6vw, 30px);
  --gap: clamp(12px, 2vw, 25px);
  --radius: 20px;
  --shadow: 0 10px 24px rgba(0,0,0,.06);
  --line: 1px solid var(--c-border);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-text)}
body{font-family:var(--ff-body);line-height:1.3}

/* ============ */
/* Skip link    */
/* ============ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left: 16px;
  top: 16px;
  width:auto;height:auto;
  padding: 10px 12px;
  background:#fff;
  border: 2px solid var(--c-primary);
  border-radius: 10px;
  z-index: 9999;
}

/* ========================= */
/* Header + Navigation        */
/* ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(255,255,255,0);
  backdrop-filter: blur(10px);
  /*border-bottom: var(--line);*/
  z-index: 2000;
}

.header-inner{
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Logo */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img{
  display:block;
  width: clamp(150px, 20vw, 160px);
  height: auto;
}

/* Nav desktop */
.site-nav ul{
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: clamp(10px, 2vw, 18px);
  margin: 0;
  padding: 0;
}
.site-nav a{
  font-family: var(--ff-title);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 800;
  font-size: .95rem;
  color: var(--c-primary);
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 12px;
}
.site-nav a:hover{
  background: rgba(73,90,118,.08);
}

/* Burger (hidden on desktop) */
.nav-toggle{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Bouton burger */
.nav-burger{
  display: none;              /* restera activé via media query */
  width: 48px;
  height: 48px;
  border: 1px solid #1b9e39;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  cursor: pointer;

  /* centre les barres */
  position: relative;
  color: var(--c-primary, #495a76);
}

/* Les 3 barres (vrai burger) */
/* --- BARRES --- */
.nav-burger span{
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  background: currentColor;
  border-radius: 3px;

  /* clé du problème */
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

/* positions burger */
.nav-burger span:nth-child(1){
  transform: translateY(calc(-50% - 7px));
}
.nav-burger span:nth-child(2){
  transform: translateY(-50%);
}
.nav-burger span:nth-child(3){
  transform: translateY(calc(-50% + 7px));
}

/* --- ÉTAT OUVERT : CROIX --- */
#nav-toggle:checked + .nav-burger span:nth-child(1){
  transform: translateY(-50%) rotate(45deg);
}
#nav-toggle:checked + .nav-burger span:nth-child(2){
  opacity: 0;
}
#nav-toggle:checked + .nav-burger span:nth-child(3){
  transform: translateY(-50%) rotate(-45deg);
}



/* Mobile */
@media (max-width: 900px){
  .nav-burger{ display: inline-block; }
}

/* Backdrop (hidden by default) */
.nav-backdrop{
  display: none;
}

/* ========================= */
/* Mobile menu                */
/* ========================= */
@media (max-width: 900px){
  .header-inner{
    grid-template-columns: auto 1fr auto;
  }

  /* Turn nav into a panel */
  .site-nav{
    grid-column: 1 / -1;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  .nav-burger{
    justify-self: end;     /* pousse le bouton à droite */
  }

  .site-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    margin: 10px var(--pad);
    background: #fff;
    border: var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }

  .site-nav li + li{
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .site-nav a{
    display:block;
    padding: 14px 12px;
    border-radius: 10px;
  }

  /* Backdrop when menu is open */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.18);
    z-index: 1500;
    display: none;
  }

  /* OPEN state (checkbox checked) */
  #nav-toggle:checked ~ .site-nav{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 1600;
  }

  #nav-toggle:checked ~ .nav-backdrop{
    display: block;
  }
}

/* Optionnel : éviter que l’ancre soit cachée sous le header sticky */
section[id]{
  scroll-margin-top: 90px;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad);
}

/* HERO (couverture) */
/* Conteneur du hero */
#ifp .hero{
  margin: 0;
}

/* Bloc cover avec image (coins arrondis conservés ici) */
#ifp .hero-cover{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);

  /* Hauteur responsive */
  min-height: clamp(220px, 24vw, 380px);

  /* Image + overlay lisibilité */
  background-image:
    linear-gradient(rgba(70,103,110,.50), rgba(70,103,110,.50)),
    url("../img/gettyimages-669888208-612x612.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Placement du titre */
  display: flex;
  align-items: center;     /* vertical */
  justify-content: center; /* horizontal (tu peux mettre flex-start si tu veux à gauche) */
  padding: clamp(24px, 4vw, 48px) var(--pad);
}

/* Titre dans la cover */
#ifp .hero-cover h1{
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: var(--ff-title);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 900;
  line-height: 1.05;
  font-size: clamp(1.6rem, 4.8vw, 2.6rem);
  text-shadow: -3px 3px 10px rgba(0,0,0,0.64);
}

/* Sous-titre dans le H1 */
#ifp .hero-cover .grisFonce-CA{
  display: inline-block;
  color: rgba(255,255,255,.92);
  font-weight: 800;
}

/* Contenu sous la cover (fond normal, pas d'image) */
#ifp .hero-content{
  padding: clamp(20px, 3vw, 32px) var(--pad) 0 var(--pad);
  border-radius: var(--radius);
  /*border: 2px solid var(--gris-fonce-ca);*/
  margin-top: calc(var(--pad) * 1.8);
  box-shadow: 0 0px 10px rgba(0,0,0,.3);
}

#ifp .hero-content .accroche{
  margin: 0 0 14px 0;
  /*max-width: 52rem;*/

  font-family: var(--ff-title);
  /*text-transform: uppercase;*/
  letter-spacing: .05em;
  font-weight: 750;
  color: var(--gris-fonce-ca);
}

#ifp .hero-content p{
  margin: 0 0 12px 0;
  /*max-width: 52rem;*/
  color: var(--c-muted, rgba(17,17,17,.78));
  /*text-align: center;*/
}

/* Optionnel : un peu d'air en bas */
#ifp .hero-content p:last-child{
  padding-bottom: clamp(16px, 2.5vw, 24px);
}

.grisClair-CA {
  color: var(--gris-clair-ca);
}
.grisFonce-CA {
  color: var(--gris-fonce-ca);
}

/* Micro-texte en capitale type PDF */
#ifp .accroche{
  margin:0;
  font-family: var(--ff-title);
  color: var(--gris-clair-ca);
  letter-spacing: .06em;
  /*text-transform: uppercase;*/
  font-weight: 700;
  font-size: 1.3rem;
  line-height:1.1;
  text-align: center;
}

#ifp h1{
  margin:0;
  font-family: var(--ff-title);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: right;
  font-weight: 900;
  color: var(--gris-clair-ca);
  line-height: 1;
  font-size: clamp(1.8rem, 4.6vw, 2.7rem);
}

#ifp .subtitle{
  margin:0;
  font-family: var(--ff-title);
  text-transform: uppercase;
  color: var(--gris-clair-ca);
  letter-spacing: .02em;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
}

/* Titres sections */
#ifp section{margin-top: calc(var(--pad) * 1.8)}
h2{
  margin:0 0 30px 0;
  font-family: var(--ff-title);
  /*text-transform: uppercase;*/
  color: var(--gris-fonce-ca);
  letter-spacing: .03em;
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.1;
  text-align: center;
}
#ifp h2#reasons-title {
  color: #fff;
  text-align: center;
}

#ifp p, #ifp a{margin:0;color:var(--c-muted)}

/* Grilles responsive */
#ifp .grid-2{
  display:grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  #ifp .grid-2{ grid-template-columns: 1fr 1fr; }
}

/* Cards (blocs avantages / contenus) */
#ifp .card{
  height: auto;
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(12px, 2vw, 20px);
}
#ifp address.card{
  background: var(--gris-fonce-ca);
  text-align: center;
}

#ifp .card--accent{
  background: var(--c-accent);
  border-color: rgba(73,90,118,.18);
}

#ifp h3{
  margin:0 0 8px 0;
  font-family: var(--ff-title);
  text-transform: uppercase;
  color: var(--gris-fonce-ca);
  letter-spacing: .03em;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;
}

/* Avantages en grille */
#ifp .imgReasons {
  border-radius: var(--radius);
}
#ifp .sevenReasons{
  background-color: var(--gris-fonce-ca);
  padding:var(--pad);
  border-radius: var(--radius);

  box-shadow: 0 0px 10px rgba(0,0,0,.3);
}
#ifp .reasons{
  display:grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--gap);
}
@media (min-width: 900px){
  #ifp .reasons{ grid-template-columns: 1fr 1fr; }
}

#ifp .goodreasons-visual{
  padding: 0;
  overflow: hidden;
}
#ifp .goodreasons-figure{
  margin: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
#ifp .goodreasons-figure img{
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop : cette vignette se place à droite en bas (si tu veux 2 colonnes) */
@media (min-width: 900px){
  #ifp .goodreasons-visual{
    grid-column: 2;           /* colonne droite */
  }
}

/* Flux Good reasons */
#ifp .reasons-flow{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 900px){
  #ifp .reasons-flow{
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gap) * 1.2);
  }
}

#ifp .reasons-col{
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Image finale */
#ifp .goodreasons-visual{
  padding: 0;
  overflow: hidden;
}

#ifp .goodreasons-visual figure{
  margin: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

#ifp .goodreasons-visual img{
  width: 100%;
  height: auto;
  display: block;
}

/* Map Eurofactor pleine largeur */
#ifp .map-full, #ifp .map-demiFull{
  margin: 0;
  border: var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: var(--pad);
}

#ifp .map-full img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 8px);
}

#ifp .map-demiFull img{
  width: 60%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 8px);
  margin: 0 auto;
}
@media (max-width: 768px){
  #ifp .map-demiFull img{
    width: 100%;
  }
}

#ifp .map-full figcaption{
  margin-top: 10px;
  font-size: .95rem;
  color: var(--c-muted);
  text-align: center;
}

/* Figures (carte + schéma) */
#ifp figure{
  margin:0;
  border: var(--line);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding: var(--pad);
}
#ifp figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius: calc(var(--radius) - 8px);
}
#ifp figcaption{
  margin-top: 10px;
  color: var(--c-muted);
  font-size: .95rem;
}

/* Liste étapes (The operation) */
#ifp .steps{margin:0;padding-left:1.15rem}
#ifp .steps li{margin:6px 0;color:var(--c-muted)}
#ifp .steps strong{color:var(--gris-fonce-ca)}

/* Contacts */
#ifp .contacts{
  display:grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  #ifp .contacts{ grid-template-columns: 1fr 1fr; }
}
#ifp address{font-style:normal}
#ifp .contact-name{
  font-family: var(--ff-title);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
#ifp .contact-role{margin:0 0 10px 0;color:#fff}
#ifp .contact-links a{color:#fff;text-decoration:none}
#ifp .contact-links a:hover{text-decoration:underline}
#ifp .contact-links {color: #fff}

/* Footer mentions */
#ifp footer{
  margin-top: calc(var(--pad) * 3);
  padding-top: var(--pad);
  border-top: var(--line);
  color: rgba(0,0,0,.70);
  font-size: .9rem;
}
/* Footer brand / logo */
#ifp .footer-brand{
  margin-top: var(--gap);
  display: flex;
  justify-content: flex-end; /* aligné à droite comme souvent dans les PDFs */
}

#ifp .footer-brand img{
  max-width: 120px;   /* ajuste si besoin */
  width: 100%;
  height: auto;
}

/* Accessibilité utilitaire */
#ifp .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================
   Slider "Good reasons" (mobile only)
   - 1 clic = 1 slide
   - pas de dots
   - pas de position:absolute (pas de hauteur énorme)
   Requiert le JS basé sur scrollTo(offsetLeft)
   ========================= */

.reasons-slider{ position: relative; }
.reasons-slider .slider-btn{ display:none; }

@media (max-width: 899px){
  /* Layout: viewport puis 2 boutons sur une ligne */
  #ifp .reasons-slider{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 12px;
  }
  #ifp .reasons-slider .slider-viewport{
    grid-column: 1 / -1;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    /* pas de padding horizontal ici */
    padding: 0;
  }
  #ifp .reasons-flow {
    display: block;
  }
  #ifp .reasons-slider .slider-viewport::-webkit-scrollbar{ display:none; }

  #ifp .reasons-slider .slider-track{
    display: flex;
    gap: 0;
    align-items: flex-start;
    transform: none !important;
  }

  /* 1 slide = 100% du viewport, avec gutter interne */
  #ifp .reasons-slider .slide{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: 0 10px; /* gutter */
    scroll-snap-align: start;
  }

  /* La card remplit le slide + centrage vertical */
  #ifp .reasons-slider .slide .card{
    width: 100%;
    max-width: 100%;

    display: flex;              /* <-- ajout */
    flex-direction: column;     /* <-- ajout */
    justify-content: center;    /* <-- ajout : centre verticalement */
    align-items: center;        /* <-- ajout : centre horizontalement (optionnel) */
    text-align: center;         /* <-- mieux ici que sur * */
  }

  /* Sécurité anti-débordement */
  #ifp .reasons-slider .slide .card *{
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Optionnel : éviter que les marges des titres “cassent” le centrage */
  #ifp .reasons-slider .slide .card h3{
    margin-top: 0;
  }
  #ifp .reasons-slider .slide .card p:last-child{
    margin-bottom: 0;
  }

  /* Boutons visibles et alignés */
  #ifp .reasons-slider .slider-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: static; /* IMPORTANT: pas d'overlay */
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    cursor: pointer;
    font-family: var(--ff-body);
    font-size: 45px;
    padding: 0 0 10px;
  }
  #ifp .reasons-slider .slider-prev{ justify-self: start; }
  #ifp .reasons-slider .slider-next{ justify-self: end; }

  #ifp .card {
    height: 255px;
  }
  #ifp .goodreasons-visual{
    display: none !important;
  }
}