@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,500;0,600;0,700;0,800;1,600&family=Manrope:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --navy-deep:#0e3252;
  --navy:#1f6096;
  --navy-mid:#2d7bb8;
  --teal:#1f9c93;
  --teal-soft:#dbf2ef;
  --green:#3f9548;
  --green-soft:#dcefd9;
  --gold:#e3a530;
  --gold-soft:#f7dfa3;
  --magenta:#c81a7f;
  --magenta-soft:#f6d6e9;
  --paper:#ffffff;
  --paper-2:#ffffff;
  --surface:#f6f8f7;
  --ink:#12222f;
  --ink-soft:#5b6b76;
  --line:rgba(14,50,82,0.12);
  --card:#ffffff;
  --shadow:0 1px 2px rgba(10,30,50,0.05), 0 16px 36px -18px rgba(10,30,50,0.18);
  --radius:22px;
  --radius-sm:14px;
  --dot-1:var(--gold);
  --dot-2:var(--green);
  --dot-3:var(--navy-mid);
  --dot-4:var(--magenta);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Jost',system-ui,sans-serif; color:var(--ink); margin:0 0 .4em; text-wrap:balance; font-weight:700; letter-spacing:-0.01em; }
p{margin:0 0 1em; color:var(--ink-soft); line-height:1.65;}
a{color:inherit;}
.mono{font-family:'Manrope',sans-serif;}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px;}
img{max-width:100%;}
button{font-family:inherit;}

.eyebrow{ font-family:'Jost',sans-serif; font-style:italic; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--green); font-weight:600; }

/* icônes SVG (jeu Solar, license CC BY 4.0 — voir LISEZ-MOI.md) : taille et alignement
   cohérents partout, couleur héritée du texte/fond environnant via currentColor. */
.ico-svg{ display:inline-block; width:1em; height:1em; vertical-align:-0.14em; flex-shrink:0; }
.ico-svg.lg{ width:1.3em; height:1.3em; }
.eyebrow.pill{ display:inline-flex; align-items:center; gap:7px; background:var(--green-soft); color:var(--navy-deep); border-radius:6px; padding:6px 14px; letter-spacing:.08em; }

/* decorative accents, à la maquette de référence (points, anneaux pointillés, croix, triangles) */
.deco-dot{ position:absolute; border-radius:50%; z-index:3; }
.deco-dot.d-sm{width:12px; height:12px;} .deco-dot.d-md{width:18px; height:18px;} .deco-dot.d-lg{width:26px; height:26px;}
.deco-dot.c1{background:var(--dot-1);} .deco-dot.c2{background:var(--dot-2);} .deco-dot.c3{background:var(--dot-3);} .deco-dot.c4{background:var(--dot-4);}
.deco-ring{ position:absolute; border-radius:50%; border:2px dashed var(--line); z-index:1; pointer-events:none; }
.deco-cross{ position:absolute; z-index:3; color:var(--line); font-size:1.3rem; line-height:1; pointer-events:none; font-family:'Jost',sans-serif; }
.deco-cross.on-dark{ color:rgba(255,255,255,.5); }
.deco-tri{ position:absolute; width:0; height:0; z-index:1; pointer-events:none; opacity:.55; }
.deco-tri.right{ border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid var(--gold); }

/* bandeau utilitaire sombre, au-dessus de l'en-tête — contact + réseaux sociaux */
.topbar{ background:var(--navy-deep); color:rgba(255,255,255,.82); font-size:.76rem; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; flex-wrap:wrap; }
.topbar-contacts{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.topbar-contacts span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar .social-row{ margin-top:0; }
.topbar .social-link{ width:26px; height:26px; }
.topbar .social-link svg{ width:13px; height:13px; }
@media (max-width:640px){ .topbar-contacts span:nth-child(2){display:none;} }

header.site{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand-row{ display:flex; align-items:center; gap:16px; padding-block:12px; }
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0;}
.brand img{height:48px; width:48px; border-radius:12px; display:block; background:#fff; object-fit:contain; padding:2px; box-shadow:var(--shadow);}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text b{font-family:'Jost',sans-serif; color:var(--navy-deep); font-size:1.3rem; font-weight:800; letter-spacing:.01em;}
.brand-text span{color:var(--green); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; font-family:'Manrope',sans-serif; font-weight:600;}
/* bande de navigation horizontale, claire */
.nav-row{background:transparent; border-top:1px solid var(--line);}
.nav-row .wrap{display:flex; align-items:center; justify-content:center; gap:2px; flex-wrap:wrap; padding-block:5px;}
.nav-btn{background:transparent; border:none; color:var(--ink); padding:11px 14px; font-weight:700; font-size:.83rem; font-family:inherit; cursor:pointer; white-space:nowrap; border-radius:8px; transition:background .15s,color .15s;}
.nav-btn:hover{background:var(--surface); color:var(--navy-deep);}
.nav-btn.active{background:var(--navy-deep); color:#fff;}
.nav-group{position:relative;}
.nav-group-trigger::after{content:" \25BE"; font-size:.7em; display:inline-block; transition:transform .15s ease;}
.nav-group.open .nav-group-trigger, .nav-group:hover .nav-group-trigger{background:var(--surface); color:var(--navy-deep);}
.nav-group.open .nav-group-trigger::after{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 38px -14px rgba(10,30,50,.25);
  padding:9px; display:flex; flex-direction:column; gap:2px; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-group.open .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .16s ease, transform .16s ease, visibility 0s; }
.nav-dropdown button{background:transparent; border:none; color:var(--ink); text-align:left; padding:10px 13px; border-radius:10px; font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s,color .15s;}
.nav-dropdown button:hover{background:var(--surface);}
.nav-dropdown button.active{background:var(--navy-deep); color:#fff;}
.nav-dropdown button.nav-highlight{background:var(--green); color:#fff; margin-top:4px;}
.nav-dropdown button.nav-highlight:hover{filter:brightness(1.1);}
.nav-dropdown button.nav-highlight.active{background:var(--gold); color:var(--navy-deep);}
/* sur les appareils avec souris : ouverture au survol, comme sur CERCODE */
@media (hover:hover) and (pointer:fine){
  .nav-group:hover .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .16s ease, transform .16s ease, visibility 0s; }
  .nav-group:hover .nav-group-trigger::after{transform:rotate(180deg);}
}
@media (max-width:760px){ .nav-row .wrap{gap:0; position:relative;} .nav-btn{padding:11px 10px; font-size:.78rem;}
  /* évite un débordement horizontal : ancré à son bouton (position:relative sur .nav-group),
     un menu de 240px de large déborde de l'écran dès que le bouton est proche d'un bord —
     à gauche ou à droite selon le menu (visibility:hidden garde sa boîte dans le calcul du
     scrollWidth de la page, même fermé). On ancre donc le menu à la barre de nav entière
     (.nav-row .wrap, position:relative) plutôt qu'à son bouton, avec une marge de 16px
     de chaque côté : sa largeur ne peut alors jamais dépasser celle de l'écran. */
  .nav-group{ position:static; }
  .nav-dropdown{ left:16px; right:16px; min-width:0; width:auto; max-width:none; }
}

/* bande annonce — actions à venir */
.banner-avenir{
  background:linear-gradient(90deg, var(--gold), #f0c26a 55%, var(--gold));
  color:var(--navy-deep); border-bottom:1px solid rgba(0,0,0,.08); overflow:hidden;
}
.banner-avenir .wrap{display:flex; align-items:center; gap:14px; padding-block:9px; position:relative;}
.banner-avenir .ba-tag{font-family:'Manrope',sans-serif; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; background:var(--navy-deep); color:#fff; padding:4px 10px; border-radius:20px; flex-shrink:0; white-space:nowrap;}
.banner-avenir .ba-track{flex:1; position:relative; height:20px; overflow:hidden;}
.banner-avenir .ba-item{position:absolute; inset:0; display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:700; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.banner-avenir .ba-item.show{opacity:1; transform:translateY(0);}
.banner-avenir .ba-item .ba-date{font-family:'Manrope',sans-serif; font-size:.72rem; background:rgba(14,50,82,.12); padding:2px 8px; border-radius:12px; flex-shrink:0;}
.banner-avenir .ba-cta{background:var(--navy-deep); color:#fff; border:none; padding:7px 14px; border-radius:6px; font-size:.78rem; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0;}
.banner-avenir .ba-cta:hover{filter:brightness(1.25);}
.banner-avenir .ba-close{background:none; border:none; color:var(--navy-deep); font-size:1rem; cursor:pointer; opacity:.6; flex-shrink:0; padding:2px 4px;}
.banner-avenir .ba-close:hover{opacity:1;}
@media (max-width:640px){ .banner-avenir .ba-tag{display:none;} .banner-avenir .ba-item{font-size:.8rem;} }

section{padding-block:64px;}
section.tight{padding-block:40px;}
.section-head{max-width:680px; margin-bottom:36px;}
.section-head.center{max-width:640px; margin-inline:auto; text-align:center;}
.view{display:none; background:var(--paper);}
.view.active{display:block; animation: viewEnter 280ms cubic-bezier(.33,1,.68,1) both;}
@keyframes viewEnter{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .view.active{ animation:none !important; } }

.hero{ position:relative; background:var(--paper); color:var(--ink); padding-block:32px 0; }
.hero .wrap{position:relative;}

/* grand panneau sombre arrondi qui porte le message et la photo, à la manière de la maquette de référence */
.hero-panel{
  position:relative; overflow:hidden; border-radius:36px;
  background:
    radial-gradient(480px 320px at 96% 4%, rgba(227,165,48,.18), transparent 62%),
    radial-gradient(420px 300px at 2% 100%, rgba(63,149,72,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy));
  box-shadow:0 30px 60px -30px rgba(10,30,50,.45);
}
/* pas de padding/gap ici : la photo doit toucher les bords du panneau (haut/droite/bas)
   plutôt que flotter comme une carte séparée — voir .hero-copy et .hero-photo-frame. */
.hero-panel-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; min-height:480px; }
.hero-copy{ padding:46px 28px 46px 42px; display:flex; flex-direction:column; justify-content:center; }
/* couche de fond décorative de la hero, déplacée en parallaxe par parallax.js — mêmes dimensions
   que le padding-box de .hero-panel (inset:0) pour que les % top/left des pastilles ne bougent pas. */
.parallax-bg{ position:absolute; inset:0; pointer-events:none; z-index:1; }

/* éléments animés en parallaxe (scroll et/ou souris) — voir parallax.js.
   will-change prévient le navigateur qu'un transform va changer souvent, pour qu'il
   promeuve la couche au compositeur GPU à l'avance plutôt qu'au premier frame animé. */
[data-speed]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){
  /* filet de sécurité CSS : si le JS n'a pas encore tourné, ces éléments restent
     immobiles pour les personnes qui ont demandé moins de mouvement. */
  [data-speed]{ transform:none !important; }
}
.hero h1{color:#fff; font-size:clamp(2rem,3.6vw,2.85rem); line-height:1.1;}
.hero h1 .hl{color:var(--gold);}
.hero .lead{color:rgba(255,255,255,.78); font-size:1rem; max-width:50ch;}
.hero-eyebrow{color:var(--gold-soft);}
.slogan{ font-family:'Caveat',cursive; font-weight:700; color:var(--green-soft); font-size:1.55rem; margin-top:-4px; line-height:1;}
.cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--radius-sm); font-weight:700; font-size:.9rem; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .12s ease, filter .15s ease, background .15s ease; }
.btn:active{transform:translateY(1px);}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{background:var(--surface);}
.btn-ghost-dark{background:transparent; border-color:rgba(255,255,255,.35); color:#fff;}
.btn-ghost-dark:hover{background:rgba(255,255,255,.12);}
.btn-line{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-line:hover{background:var(--green-soft);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{filter:brightness(1.12);}
.btn-green{background:var(--green); color:#fff;}
.btn-green:hover{filter:brightness(1.1);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-sm{padding:8px 15px; font-size:.78rem;}

/* photo réelle à fond perdu sur le bord droit du panneau (pas une carte séparée) :
   elle touche le haut, la droite et le bas du panneau, avec les mêmes coins arrondis
   que lui de ce côté-là. Sa jonction avec le texte, à gauche, se fond dans la couleur
   du panneau : plutôt qu'un calque de couleur posé par-dessus (qui reste visible comme
   un voile), la photo elle-même devient progressivement transparente à cet endroit
   (mask-image), ce qui laisse apparaître le dégradé du panneau juste en-dessous —
   un vrai fondu entre les deux, pas une teinte superposée.  */
.hero-photo-frame{ position:relative; overflow:hidden; border-radius:0 36px 36px 0; }
.hero-photo-frame img,
.hero-photo-frame video{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.stat-tile{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow);}
.stat-tile b{display:block; font-family:'Jost',sans-serif; font-size:1.7rem; color:var(--navy-deep);}
.stat-tile span{font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}
@media (max-width:860px){
  .hero-panel-grid{grid-template-columns:1fr; min-height:0;}
  .hero-copy{padding:32px 24px 24px;}
  /* empilée sous le texte : la photo touche maintenant le bas du panneau, plus la droite */
  .hero-photo-frame{aspect-ratio:16/10; height:auto; border-radius:0 0 36px 36px;}
  /* empilée : le fondu (mask-image) passe à la verticale, du haut de la photo vers le texte au-dessus */
  .hero-photo-frame img,
  .hero-photo-frame video{
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  }
  .stat-row{grid-template-columns:repeat(2,1fr); margin-top:20px;}
}
@media (max-width:520px){
  .hero-panel{border-radius:26px;}
  .hero-photo-frame{border-radius:0 0 26px 26px;}
}

/* mot du president */
.president-block{ display:grid; grid-template-columns:.5fr 1.5fr; gap:32px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px; }
@media (max-width:760px){ .president-block{grid-template-columns:1fr;} }
.avatar-stage{ position:relative; width:210px; margin:0 auto; padding:26px 0; }
.avatar-ring{ width:170px; height:170px; border-radius:44% 56% 58% 42% / 46% 40% 60% 54%; margin:0 auto; padding:6px; background:linear-gradient(150deg,var(--gold),var(--green)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); position:relative; z-index:2;}
.avatar-ring-inner{ width:100%; height:100%; border-radius:40% 60% 55% 45% / 48% 38% 62% 52%; background:var(--navy-deep); display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-size:2.1rem; color:#fff; font-weight:800; border:3px solid #fff; overflow:hidden;}
.avatar-ring-inner img{width:100%; height:100%; object-fit:cover;}
.avatar-badge{
  position:absolute; left:-8px; bottom:8px; z-index:3; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 30px -14px rgba(10,30,50,.35); padding:8px 12px; display:flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; color:var(--navy-deep); white-space:nowrap;
}
.avatar-badge .ico{width:26px; height:26px; border-radius:8px; background:var(--green-soft); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0;}
.quote-mark{font-family:'Jost',sans-serif; font-size:3rem; color:var(--gold); line-height:.6; display:block; margin-bottom:6px;}
.signature{font-family:'Jost',sans-serif; font-weight:800; color:var(--navy); margin-top:14px;}
.signature span{display:block; font-family:'Manrope',sans-serif; font-weight:500; font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}

/* grid cards generic */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}}

/* rangée de piliers avec icônes cerclées et séparateurs — à la "Medical Aid / Trust Funds / Funds Raised" */
.piliers-row{ display:flex; align-items:flex-start; justify-content:center; gap:0; text-align:center; flex-wrap:wrap; }
.pilier{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; min-width:180px; padding:4px 26px; border-left:1px solid var(--line); }
.pilier:first-child{ border-left:none; }
@media (max-width:760px){ .piliers-row{flex-direction:column; gap:24px;} .pilier{border-left:none; padding:0; width:100%;} }
.pilier .picon{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; border:1.5px solid var(--line); background:#fff; }
.pilier:nth-child(1) .picon{border-color:var(--teal); color:var(--teal);}
.pilier:nth-child(2) .picon{border-color:var(--gold); color:var(--gold);}
.pilier:nth-child(3) .picon{border-color:var(--green); color:var(--green);}
.pilier h4{font-size:.98rem; margin-bottom:2px;}
.pilier p{font-size:.82rem; max-width:24ch; margin:0;}

/* liste à puces avec coche — à la maquette de référence */
/* cartes Vision / Mission — badge icône coloré plutôt qu'une bordure de couleur en haut */
.vm-card{ transition:transform .15s ease, box-shadow .15s ease; }
.vm-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(10,30,50,.25); }
.vm-card .vm-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px; }
.vm-card h3{ font-size:1.15rem; color:var(--navy-deep); margin-bottom:10px; }

.check-list{ list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink); }
.check-list .tick{ flex-shrink:0; width:19px; height:19px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.66rem; margin-top:1px; }

/* carte de service mise en avant (fond sombre) parmi des cartes claires */
.feature-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:22px 18px; text-align:center; transition:transform .15s ease, box-shadow .15s ease; }
.feature-card:hover{ transform:translateY(-3px); }
.feature-card .ico{ width:44px; height:44px; border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin:0 auto 12px; }
.feature-card h4{font-size:.92rem; margin-bottom:6px;}
.feature-card p{font-size:.78rem; margin:0;}
.feature-card.highlight{
  background:
    linear-gradient(195deg, rgba(14,50,82,.92) 15%, rgba(14,50,82,.55) 55%, rgba(31,96,150,.4)),
    url('images/don-bocal.jpg') center/cover;
  border-color:transparent;
}
.feature-card.highlight .ico{background:rgba(255,255,255,.16); color:#fff;}
.feature-card.highlight h4{color:#fff;}
.feature-card.highlight p{color:rgba(255,255,255,.75);}

/* variante « photo » — bloc coloré + badge icône qui chevauche, comme les cartes Treatment/Food Support de la maquette */
.feature-card.photo{ padding:0 0 20px; text-align:left; overflow:visible; }
.feature-card.photo .photo-block{ height:120px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; position:relative; overflow:visible; margin-bottom:30px; }
.feature-card.photo .badge{
  position:absolute; left:16px; bottom:-22px; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff;
  border:4px solid #fff; box-shadow:var(--shadow);
}
.feature-card.photo .body{ padding:0 18px; }
.feature-card.photo h4{font-size:.95rem;}
.feature-card.photo p{font-size:.8rem;}

.obj-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start; transition:transform .15s ease, box-shadow .15s ease;}
.obj-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(10,30,50,.25); }
.obj-num{ font-family:'Manrope',sans-serif; font-size:.68rem; font-weight:700; color:var(--navy-deep); background:var(--green-soft); border-radius:4px; padding:2px 9px; flex-shrink:0; margin-top:2px;}
.domaine-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow); font-weight:600; font-size:.88rem;}
.domaine-dot{width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0;}

/* lucarne (dormer window) member cards */
.lucarne-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:980px){.lucarne-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.lucarne-grid{grid-template-columns:1fr;}}
.lucarne{
  position:relative; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:70px 70px 18px 18px; padding:34px 18px 22px; text-align:center; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.lucarne:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -20px rgba(10,30,50,.28); }
.lucarne::before{
  content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(90deg,var(--navy),var(--green),var(--gold),var(--magenta));
}
.lucarne .photo{ width:88px; height:88px; border-radius:50%; margin:0 auto 12px; background:var(--navy-deep); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-weight:800; font-size:1.5rem; border:4px solid var(--paper-2); box-shadow:0 0 0 2px var(--line); overflow:hidden;}
.lucarne .photo img{width:100%; height:100%; object-fit:cover;}
.lucarne h3{font-size:1rem; margin-bottom:2px;}
.lucarne .role{ color:var(--navy); font-size:.76rem; font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-weight:600;}
.lucarne .bio{ margin-top:10px; font-size:.8rem; color:var(--ink-soft); text-align:left; line-height:1.45;}

/* documentation / bibliotheque */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.chip-select{ border:1px solid var(--line); border-radius:8px; padding:8px 15px; font-size:.8rem; background:var(--card); cursor:pointer; transition:background .15s,border-color .15s; }
.chip-select.active{border-color:var(--navy-deep); background:var(--navy-deep); font-weight:700; color:#fff;}
.doc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:760px){.doc-grid{grid-template-columns:1fr;}}

/* marquee des partenaires */
.marquee-wrap{overflow:hidden; position:relative; -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; gap:18px; width:max-content; animation:marquee-scroll 28s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-item{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 18px; box-shadow:var(--shadow); white-space:nowrap;}
.marquee-item img{width:32px; height:32px; object-fit:contain; border-radius:6px; background:#fff; flex-shrink:0;}
.marquee-item .ph{width:32px; height:32px; border-radius:6px; background:var(--gold-soft); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-weight:800; font-size:.85rem; flex-shrink:0;}
.marquee-item b{font-size:.85rem; color:var(--navy-deep);}
.partenaire-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:900px){.partenaire-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.partenaire-grid{grid-template-columns:1fr;}}
.partenaire-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
.partenaire-card .plogo{width:56px; height:56px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px;}
.partenaire-card .ph-big{width:56px; height:56px; border-radius:10px; background:var(--gold-soft); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-weight:800; font-size:1.1rem;}

/* projets en cours */
.projet-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:900px){.projet-grid{grid-template-columns:1fr;}}
.projet-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;}
.projet-card h3{font-size:1.05rem; color:var(--navy-deep); margin-bottom:4px;}
.projet-card .statut{display:inline-block; font-family:'Manrope',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--gold-soft); color:var(--navy); margin-bottom:10px;}
.projet-fiche{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:12px;}
@media (max-width:520px){.projet-fiche{grid-template-columns:1fr;}}
.projet-fiche div b{display:block; font-family:'Manrope',sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:2px;}
.projet-fiche div span{font-size:.85rem; color:var(--ink);}

/* stages & emplois */
.stage-list{display:flex; flex-direction:column; gap:14px;}
.stage-item{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.stage-item .type-tag{display:inline-block; font-family:'Manrope',sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--green-soft); color:var(--navy-deep); margin-bottom:6px;}
.stage-item h4{font-size:.98rem; color:var(--navy-deep); margin-bottom:3px;}

/* actions à venir */
.action-list{display:flex; flex-direction:column; gap:14px;}
.action-card{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 22px; display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;}
.action-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(10,30,50,.25); }
.action-card .ac-date{flex-shrink:0; background:var(--navy-deep); color:#fff; border-radius:10px; padding:8px 14px; text-align:center; min-width:64px;}
.action-card .ac-date b{display:block; font-family:'Jost',sans-serif; font-size:1.2rem; line-height:1.1;}
.action-card .ac-date span{display:block; font-family:'Manrope',sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-soft);}
.action-card .ac-body{flex:1; min-width:200px;}
.action-card h4{font-size:1.02rem; color:var(--navy-deep); margin-bottom:4px;}
.action-card p{font-size:.87rem; margin:0 0 4px;}
.doc-card{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); padding:18px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;}
.doc-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(10,30,50,.25); }
.doc-card .type{font-family:'Manrope',sans-serif; font-size:.66rem; color:var(--green); text-transform:uppercase; letter-spacing:.05em;}
.doc-card h4{font-size:.94rem; margin:6px 0 6px;}
.doc-card p{font-size:.83rem; margin-bottom:8px;}
.doc-card .theme-tag{font-size:.68rem; color:var(--navy); background:var(--navy-mid,var(--green-soft)); background:color-mix(in srgb, var(--navy) 12%, transparent); border-radius:4px; padding:3px 10px; display:inline-block;}

/* rapports */
.rapport-list{display:flex; flex-direction:column; gap:10px;}
.rapport-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--shadow); flex-wrap:wrap;}
.rapport-item .meta{font-size:.76rem; color:var(--ink-soft);}
.rapport-item .titre{font-weight:700; font-size:.92rem;}
.tag-type{ font-family:'Manrope',sans-serif; font-size:.64rem; text-transform:uppercase; padding:3px 8px; border-radius:4px; border:1px solid var(--line); color:var(--ink-soft); margin-right:8px;}
.empty-note{color:var(--ink-soft); font-size:.86rem; font-style:italic;}

/* forms / panels */
.two-col{display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:start;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;}}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px;}
.field label{font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.field input[type=text], .field input[type=tel], .field input[type=email], .field input[type=date], .field select, .field textarea{
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:.94rem;
  background:var(--paper-2); color:var(--ink); font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
.radio-group{display:flex; gap:10px; flex-wrap:wrap;}
.radio-pill{ border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:.84rem; cursor:pointer; display:flex; align-items:center; gap:9px; background:var(--paper-2); transition:border-color .15s, background .15s;}
.radio-pill input{ display:none; }
.radio-pill.checked{border-color:var(--navy); background:var(--surface); box-shadow:0 0 0 2px var(--navy);}
.pay-icon{ display:inline-flex; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; flex-shrink:0; }
.pay-logo{ width:44px; height:44px; flex-shrink:0; border-radius:6px; object-fit:contain; background:#f5f5f5; padding:3px; }
.checkline{display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--ink-soft); margin:12px 0 16px;}
.checkline input{margin-top:3px; accent-color:var(--green);}
.receipt{ border:1px dashed var(--green); background:var(--green-soft); border-radius:var(--radius); padding:18px; margin-top:16px;}
.receipt h4{margin-bottom:8px; color:var(--navy-deep);}

table{width:100%; border-collapse:collapse; font-size:.86rem;}
th{text-align:left; color:var(--ink-soft); text-transform:uppercase; font-size:.68rem; letter-spacing:.04em; border-bottom:1px solid var(--line); padding:9px 12px;}
td{padding:9px 12px; border-bottom:1px solid var(--line);}

/* gestion admin */
.quiz-select{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px;}
.g-panel{display:none;}
.dcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; text-align:center; box-shadow:var(--shadow);}
.dcard b{display:block; font-family:'Jost',sans-serif; font-size:1.5rem; color:var(--navy);}
.dcard span{font-size:.7rem; color:var(--ink-soft); text-transform:uppercase;}

/* badge — carte recto/verso */
.badge-stage{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:20px 0;}
.idcard{width:280px; min-height:460px; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 12px 28px rgba(0,0,0,.28); font-family:'Manrope',sans-serif;}

/* --- recto --- */
.idcard-front{background:#fff; display:flex; flex-direction:column;}
.icf-top{background:#fff; text-align:center; padding:18px 0 4px;}
.icf-top img{width:74px;}
.icf-goldstrip{height:14px; background:linear-gradient(90deg,var(--gold),var(--gold-soft,var(--gold)));}
.icf-navy{background:linear-gradient(165deg,var(--navy-deep),var(--navy)); color:#fff; padding:48px 18px 22px; text-align:center; position:relative; flex:1; display:flex; flex-direction:column;}
.icf-photo-wrap{width:92px; height:92px; border-radius:50%; overflow:hidden; background:var(--gold); border:4px solid #fff; position:absolute; left:50%; top:-46px; transform:translateX(-50%); box-shadow:0 6px 16px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-weight:800; font-size:1.55rem; color:var(--navy-deep);}
.icf-name{margin-top:8px; font-family:'Jost',sans-serif; font-weight:800; letter-spacing:.02em; color:var(--gold); font-size:1.02rem; text-transform:uppercase; line-height:1.25;}
.icf-role{font-size:.76rem; margin:2px 0 16px; color:rgba(255,255,255,.92);}
.icf-rows{display:flex; flex-direction:column; gap:8px; text-align:left; margin-bottom:16px;}
.icf-row{display:flex; align-items:flex-start; gap:8px; font-size:.74rem; word-break:break-word;}
.icf-row .sq{width:8px; height:8px; margin-top:3px; background:var(--gold); flex:none; border-radius:2px;}
.icf-qr{width:56px; height:56px; margin:auto auto 0; border-radius:6px; background:#fff; padding:4px;}

/* --- verso --- */
.idcard-back{background:var(--navy-deep); color:#fff; padding:26px 20px 18px; display:flex; flex-direction:column;}
.icb-content{position:relative; z-index:2; display:flex; flex-direction:column; flex:1;}
.icb-logo{width:64px; margin:0 auto 16px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.icb-bullets{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:12px;}
.icb-bullets li{position:relative; padding-left:20px; font-size:.78rem; line-height:1.42;}
.icb-bullets li::before{content:''; position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%; background:var(--gold);}
.icb-dates{font-size:.78rem; margin-bottom:16px; display:flex; flex-direction:column; gap:5px;}
.icb-dates p{color:#fff;}
.icb-contact{text-align:center; font-family:'Manrope',sans-serif; font-weight:700; font-size:.86rem; margin-bottom:14px; word-break:break-word; color:var(--gold);}
.icb-restriction{border:2px solid var(--gold); border-radius:7px; padding:10px 12px; font-size:.72rem; text-align:center; margin-top:auto; color:#fff;}
.icf-role{color:rgba(255,255,255,.92);}
.icb-signature{align-self:flex-end; font-size:.76rem; margin-top:18px; border-top:1px solid rgba(255,255,255,.35); padding-top:4px; width:110px; text-align:center;}
.icb-pattern{position:absolute; width:110px; height:100px; opacity:.35; background-image:radial-gradient(circle, rgba(255,255,255,.9) 1.3px, transparent 1.5px); background-size:13px 13px; z-index:1;}
.icb-pattern-tl{top:0; left:0; clip-path:polygon(0 0,100% 0,45% 100%,0 55%);}
.icb-pattern-br{bottom:0; right:0; clip-path:polygon(55% 100%,100% 45%,100% 100%);}
.icb-chevron{position:absolute; width:0; height:0; z-index:1; opacity:.9;}
.icb-chevron-tr{top:14px; right:14px; border-left:70px solid transparent; border-top:70px solid var(--gold); opacity:.9;}
.icb-chevron-tr::after{content:''; position:absolute; top:14px; right:-56px; border-left:56px solid transparent; border-top:56px solid var(--navy-deep);}
.icb-chevron-bl{bottom:14px; left:14px; border-right:70px solid transparent; border-bottom:70px solid var(--gold); opacity:.9;}
.icb-chevron-bl::after{content:''; position:absolute; bottom:14px; left:-56px; border-right:56px solid transparent; border-bottom:56px solid var(--navy-deep);}

.qr-fake{ width:100%; height:100%; border-radius:4px; background:
  repeating-linear-gradient(45deg, var(--ink) 0 3px, transparent 3px 6px),
  repeating-linear-gradient(-45deg, var(--ink) 0 3px, transparent 3px 6px);
  background-blend-mode:multiply; opacity:.8;}

@media print{
  body *{visibility:hidden;}
  #badge-print-area, #badge-print-area *{visibility:visible;}
  #badge-print-area{position:fixed; top:20px; left:0; right:0; display:flex; justify-content:center; gap:24px;}
}

footer{background:var(--navy-deep); color:rgba(255,255,255,.75); padding-block:48px 26px; margin-top:24px; border-radius:32px 32px 0 0;}
footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr .8fr; gap:30px;}
.social-row{display:flex; gap:10px; margin-top:2px;}
.social-link{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s, transform .15s;}
.social-link:hover{background:var(--green); border-color:var(--green); transform:translateY(-2px);}
.social-link svg{width:17px; height:17px; fill:currentColor;}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr;}}
footer h5{color:#fff; font-family:'Manrope',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:11px;}
footer p, footer li{color:rgba(255,255,255,.65); font-size:.85rem;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.footer-link{background:none; border:none; padding:0; margin-top:0; cursor:pointer; color:var(--gold-soft); font-size:.85rem; text-decoration:underline; font-family:inherit; text-align:left;}
.footer-link:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:26px; padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.74rem; color:rgba(255,255,255,.45);}

.close-detail{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.82rem;text-decoration:underline;padding:0;}


/* Lien externe dans le menu Ressources (ex. outil interne SIGS) */
.nav-dropdown a{background:transparent; border:none; color:var(--ink); text-align:left; padding:10px 13px; border-radius:10px; font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:background .15s,color .15s; text-decoration:none; display:block;}
.nav-dropdown a:hover{background:var(--surface);}

/* ===================== RÉSULTATS & IMPACT (suivi-évaluation / SIGS) ===================== */
.resultats-intro{max-width:680px;}
.resultats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px;}
@media (max-width:900px){.resultats-grid{grid-template-columns:1fr;}}
.resultat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius,16px); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:10px;}
.resultat-card .rc-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.resultat-card .rc-statut{font-family:'Manrope',sans-serif; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--green-soft,#dcefd9); color:var(--green,#3f9548);}
.resultat-card .rc-statut.en-cours{background:var(--gold-soft,#f7dfa3); color:var(--navy,#1f6096);}
.resultat-card .rc-domaine{font-size:.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.resultat-card h4{margin:0; font-size:1.02rem; color:var(--navy-deep);}
.mini-stat-row{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 2px;}
.mini-stat{background:var(--surface,#f4f7f5); border:1px solid var(--line); border-radius:10px; padding:8px 12px; min-width:74px; text-align:center; flex:1;}
.mini-stat b{display:block; font-family:'Jost',sans-serif; font-size:1.15rem; color:var(--navy-deep); line-height:1.1;}
.mini-stat span{font-size:.64rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em;}
.resultat-card p.rc-synthese{font-size:.85rem; color:var(--ink-soft); margin:0; line-height:1.5;}
.resultats-empty{margin-top:20px;}

/* Bloc résultats à l'intérieur d'une fiche projet (page Projets en cours) */
.projet-card .rc-resultats{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.projet-card .rc-resultats .rc-label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green); font-weight:700; margin-bottom:8px; display:block;}


/* ═══════════════════════════════════════════════════════════════════════
   DESIGN UPGRADE — UI & ANIMATIONS (inspiré de Squarespace)
   Fluid type · Cubic-bezier easing · Hero reveal · Cards · Micro-interactions
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Courbes d'accélération nommées (design tokens) ── */
:root{
  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-in-out:    cubic-bezier(.645,.045,.355,1);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-cta:       cubic-bezier(.33,1,.68,1);
}

/* ── @keyframes ── */
@keyframes heroFade{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
@keyframes underlineSlideIn{
  from{ transform:scaleX(0); transform-origin:left; }
  to  { transform:scaleX(1); transform-origin:left; }
}

/* ── Hero — fondu à l'entrée dans la vue accueil ── */
#view-accueil.active .hero-panel{
  animation: heroFade 700ms var(--ease-out-quart) both;
}
#view-accueil.active .banner-avenir{
  animation: fadeInUp 500ms var(--ease-out-quart) 200ms both;
}

/* ── Titres de section — taille fluide + barre décorative ── */
.section-head h2{
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.section-head h2::after{
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
  margin-top: 12px;
}
.section-head.center h2::after{ margin-inline:auto; }

/* ── Eyebrow — petite barre accent (hors pill et hero) ── */
.eyebrow:not(.pill):not(.hero-eyebrow){
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow:not(.pill):not(.hero-eyebrow)::before{
  content: '';
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Boutons — cubic-bezier + élévation au survol ── */
.btn{
  transition:
    transform 280ms var(--ease-out-quart),
    filter 200ms var(--ease-cta),
    background 160ms var(--ease-cta),
    box-shadow 280ms var(--ease-out-quart);
}
.btn:not(:disabled):hover{ transform:translateY(-2px); box-shadow:0 8px 22px -8px rgba(10,30,50,.22); }
.btn:active{ transform:translateY(1px) !important; box-shadow:none !important; }

/* ── Variante flèche : la flèche glisse de gauche au survol ── */
.btn-arrow{
  overflow: hidden;
  position: relative;
  padding-left: 44px;
}
.btn-arrow::before{
  content: '→';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(-160%);
  opacity: 0;
  transition:
    transform 300ms var(--ease-out-quart),
    opacity 240ms var(--ease-cta);
  font-size: 1rem;
}
.btn-arrow:hover::before{
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* ── Dropdown nav — easing plus naturel ── */
.nav-dropdown{
  transition:
    opacity 200ms var(--ease-out-quart),
    transform 200ms var(--ease-out-quart),
    visibility 0s linear 200ms;
}
.nav-group.open .nav-dropdown,
.nav-group:hover .nav-dropdown{
  transition:
    opacity 200ms var(--ease-out-quart),
    transform 200ms var(--ease-out-quart),
    visibility 0s;
}

/* ── Cartes — transition cubic-bezier + élévation plus marquée ── */
.feature-card, .vm-card, .obj-card, .lucarne, .doc-card{
  transition: transform 380ms var(--ease-out-quart), box-shadow 380ms var(--ease-out-quart);
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -22px rgba(10,30,50,.3); }
.vm-card:hover,
.obj-card:hover   { transform:translateY(-4px);  box-shadow:0 22px 44px -18px rgba(10,30,50,.28); }
.lucarne:hover    { transform:translateY(-6px);  box-shadow:0 30px 56px -24px rgba(10,30,50,.32); }
.doc-card:hover   { transform:translateY(-4px);  box-shadow:0 22px 44px -18px rgba(10,30,50,.26); }

.action-card{
  transition:
    transform 380ms var(--ease-out-quart),
    box-shadow 380ms var(--ease-out-quart),
    border-left-color 180ms var(--ease-cta);
}
.action-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(10,30,50,.28);
  border-left-color: var(--navy);
}

/* ── Tuiles stat — rebond léger ── */
.stat-tile{
  transition: transform 280ms var(--ease-spring), box-shadow 280ms var(--ease-out-quart);
}
.stat-tile:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 30px -12px rgba(10,30,50,.2); }

/* ── Espacement de section — valeurs fluides ── */
section      { padding-block: clamp(44px, 3.5vw + 20px, 80px); }
section.tight{ padding-block: clamp(28px, 2.5vw + 14px, 52px); }

/* ── Réseaux sociaux — rebond printemps ── */
.social-link{
  transition:
    background 160ms var(--ease-cta),
    border-color 160ms var(--ease-cta),
    transform 280ms var(--ease-spring);
}
.social-link:hover{ transform:translateY(-3px) scale(1.1); }

/* ── Marque — micro-scale ── */
.brand{ transition: transform 280ms var(--ease-spring); }
.brand:hover{ transform:scale(1.015); }

/* ── Liens pied de page — underline animé ── */
.footer-link{
  text-decoration: none;
  position: relative;
}
.footer-link::after{
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-out-quart);
}
.footer-link:hover{ color:#fff; }
.footer-link:hover::after{ transform:scaleX(1); }

/* ── Filtres / chips — légère élévation ── */
.chip-select{
  transition:
    background 150ms var(--ease-cta),
    border-color 150ms var(--ease-cta),
    color 150ms var(--ease-cta),
    transform 200ms var(--ease-spring);
}
.chip-select:not(.active):hover{ transform:translateY(-1px); }

/* ── Icônes des piliers ── */
.pilier .picon{ transition:transform 280ms var(--ease-spring); }
.pilier:hover .picon{ transform:scale(1.1); }

/* ── Chips domaine ── */
.domaine-chip{
  transition: transform 240ms var(--ease-spring), box-shadow 240ms var(--ease-out-quart);
}
.domaine-chip:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(10,30,50,.18); }

/* ── Cartes partenaires ── */
.partenaire-card{
  transition: transform 320ms var(--ease-out-quart), box-shadow 320ms var(--ease-out-quart);
}
.partenaire-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px -14px rgba(10,30,50,.22); }

/* ── Items rapport ── */
.rapport-item{
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
}
.rapport-item:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(10,30,50,.18); }

/* ── Items stage ── */
.stage-item{
  transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart);
}
.stage-item:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(10,30,50,.18); }

/* ── Accessibilité : désactivation si mouvement réduit demandé ── */
@media (prefers-reduced-motion: reduce){
  #view-accueil.active .hero-panel,
  #view-accueil.active .banner-avenir{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
  .btn, .btn-arrow::before,
  .feature-card, .vm-card, .obj-card, .lucarne, .doc-card, .action-card,
  .stat-tile, .social-link, .brand, .chip-select, .pilier .picon, .domaine-chip,
  .partenaire-card, .rapport-item, .stage-item,
  .footer-link::after, .nav-dropdown{
    transition: none !important; animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN UPGRADE (suite) — Rythme visuel · Typographie · Micro-détails
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sections à fond teinté — rythme visuel alterné ── */
section.section-surface{ background: var(--surface); }

/* ── Hero — titre plus grand et plus impactant ── */
.hero h1{
  font-size: clamp(2.1rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hero .lead{
  font-size: clamp(.9rem, .82rem + .4vw, 1.05rem);
  line-height: 1.7;
}

/* ── Feature cards photo — overlay brightness au survol ── */
.feature-card.photo .photo-block{
  transition: filter 420ms var(--ease-out-quart);
}
.feature-card.photo:hover .photo-block{
  filter: brightness(.88) saturate(1.08);
}

/* ── Stat tiles ── */
.stat-tile{ border-top: none; }

/* ── Sous-titres de section — fluid ── */
.view section > .wrap > h3{
  font-size: clamp(1.05rem, .88rem + .85vw, 1.45rem);
}

/* ── Citation président — plus impactante ── */
.quote-mark{ font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: .5; }


/* ── Piliers — fond soft sur l'icône au survol ── */
.pilier:nth-child(1):hover .picon{ background: var(--teal-soft); }
.pilier:nth-child(2):hover .picon{ background: var(--gold-soft); }
.pilier:nth-child(3):hover .picon{ background: var(--green-soft); }

/* ── Marquee — fondu plus large aux extrémités ── */
.marquee-wrap{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ── Header sticky — ombre plus subtile au scroll ── */
header.site{
  box-shadow: 0 1px 0 var(--line), 0 4px 16px -8px rgba(10,30,50,.08);
  transition: box-shadow 300ms var(--ease-cta, cubic-bezier(.33,1,.68,1));
}

/* ── Section head p — légèrement plus grand ── */
.section-head > p{
  font-size: clamp(.88rem, .82rem + .3vw, 1rem);
  max-width: 72ch;
  line-height: 1.7;
}

/* ── Action card — date badge amélioré ── */
.action-card .ac-date{
  transition: background 200ms var(--ease-cta, cubic-bezier(.33,1,.68,1));
}
.action-card:hover .ac-date{ background: var(--navy-mid); }

/* ── Rapport item tag ── */
.rapport-item{ border-left: 3px solid transparent; transition: border-left-color 200ms var(--ease-cta, cubic-bezier(.33,1,.68,1)), transform 280ms var(--ease-out-quart, cubic-bezier(.165,.84,.44,1)), box-shadow 280ms var(--ease-out-quart, cubic-bezier(.165,.84,.44,1)); }
.rapport-item:hover{ border-left-color: var(--navy-mid); }

/* ── Stat tiles — chiffres fluides ── */
.stat-tile b{ font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.1rem); }

/* ── Piliers — titres fluides ── */
.pilier h4{ font-size: clamp(.95rem, .85rem + .5vw, 1.12rem); }

/* ── Header — état scrollé : backdrop plus opaque ── */
header.site.scrolled{
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line), 0 8px 28px -10px rgba(10,30,50,.14);
}

/* ── Bouton nav — underline reveal sur la variante active ── */
.nav-btn.active{
  background: var(--navy-deep);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(31,96,150,.35);
}

/* ── Feature card highlight — légère révélation du fond au survol ── */
.feature-card.highlight{
  background-size: cover, cover;
  transition: transform 380ms var(--ease-out-quart, cubic-bezier(.165,.84,.44,1)),
              box-shadow 380ms var(--ease-out-quart, cubic-bezier(.165,.84,.44,1)),
              filter 400ms var(--ease-out-quart, cubic-bezier(.165,.84,.44,1));
}
.feature-card.highlight:hover{ filter: brightness(1.05); }

/* ── Section view-apropos / bureau — fond teinté ── */
#view-apropos > section{ background: var(--surface); }

/* ── Obj cards — numéro plus visible ── */
.obj-num{
  font-size: .75rem;
  padding: 3px 11px;
  font-weight: 800;
}

/* ── Lucarne — gradient en haut plus fin ── */
.lucarne::before{ height: 4px; }

/* ============================================================
   COMPOSANTS SQUARESPACE-INSPIRÉS — REFONTE ACCUEIL
   ============================================================ */

/* ─── 1. HÉRO PLEIN ÉCRAN ─── */
.sq-hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  padding-bottom:80px; overflow:hidden; color:#fff;
}
.sq-hero-bg{ position:absolute; inset:0; z-index:0; }
.sq-hero-bg video,
.sq-hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.sq-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(14,50,82,.82) 0%, rgba(14,50,82,.55) 55%, rgba(14,50,82,.25) 100%);
}
.sq-hero-inner{ position:relative; z-index:2; width:100%; }
.sq-hero-content{ max-width:680px; }
.sq-hero-content .eyebrow{ color:rgba(255,255,255,.7); font-size:.72rem; }
.sq-hero-content h1{
  color:#fff; font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.08; margin:10px 0 20px;
}
.sq-hero-content h1 .hl{ color:var(--gold); }
.sq-hero-lead{
  color:rgba(255,255,255,.82); font-size:clamp(1rem,1.2vw,1.15rem);
  max-width:54ch; margin-bottom:28px; line-height:1.65;
}
.sq-hero-note{
  color:rgba(255,255,255,.5); font-size:.76rem; margin-top:16px; margin-bottom:0;
}
.sq-hero-scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
}
.sq-scroll-line{
  width:1px; height:40px; background:rgba(255,255,255,.4); margin:0 auto;
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{opacity:0;transform:scaleY(0);transform-origin:top;}
  20%{opacity:1;}
  80%{opacity:1;transform:scaleY(1);transform-origin:top;}
  100%{opacity:0;transform:scaleY(0);transform-origin:bottom;}
}
@media(max-width:680px){
  .sq-hero{ min-height:80vh; padding-bottom:60px; align-items:center; }
  .sq-hero-overlay{ background:rgba(14,50,82,.72); }
}

/* ─── 2. CAROUSEL ─── */
/* ─── 2. CAROUSEL — style Squarespace ─── */
.sq-carousel-section{ padding:72px 0 48px; }
.sq-carousel-head{ margin-bottom:40px; max-width:520px; }
.sq-carousel-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }

/*
  .sq-carousel-clip : clip la piste horizontalement
  Les boutons sont en DEHORS de ce clip → jamais rognés
*/
.sq-carousel-clip{
  overflow:hidden;
  padding-left:clamp(16px, 5vw, 60px); /* décalage gauche = peek de gauche */
}
.sq-carousel-track{
  display:flex;
  gap:18px;
  transition:transform 680ms cubic-bezier(.76,0,.24,1);
  will-change:transform;
}

/* Carte paysage 16/10, ~46 vw */
.sq-slide{
  flex:0 0 clamp(300px, 46vw, 580px);
  min-width:0;
  aspect-ratio:16/10;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  background:var(--navy-deep);
  transform:scale(.97);
  transition:transform 680ms cubic-bezier(.76,0,.24,1), box-shadow 680ms;
}
.sq-slide.sq-slide-active{
  transform:scale(1);
  box-shadow:0 8px 40px -8px rgba(10,30,50,.35);
}
.sq-slide-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 700ms cubic-bezier(.76,0,.24,1);
}
.sq-slide:hover .sq-slide-img{ transform:scale(1.05); }
.sq-slide::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(8,22,42,.90) 0%,
    rgba(8,22,42,.40) 45%,
    rgba(8,22,42,.04) 100%);
}
.sq-slide-body{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:20px 24px 26px;
}
.sq-slide-cat{
  display:block; font-size:.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.12em; color:var(--gold); margin-bottom:8px;
}
.sq-slide-body h3{
  font-size:clamp(.95rem,1.8vw,1.35rem); font-family:'Jost',sans-serif;
  font-weight:700; color:#fff; margin-bottom:8px; line-height:1.2;
}
.sq-slide-body p{
  font-size:.8rem; color:rgba(255,255,255,.78); margin-bottom:14px;
  line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.sq-slide-link{
  display:inline-block; background:none;
  border:1.5px solid rgba(255,255,255,.55); color:#fff;
  font-size:.76rem; font-weight:700; padding:6px 15px; border-radius:var(--radius-sm);
  cursor:pointer; font-family:inherit;
  transition:background 160ms, border-color 160ms;
}
.sq-slide:hover .sq-slide-link{ background:rgba(255,255,255,.18); border-color:#fff; }

/* Footer des contrôles : dots à gauche, boutons à droite */
.sq-carousel-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(16px,5vw,60px) 0;
  gap:16px;
}
.sq-carousel-dots{ display:flex; gap:6px; align-items:center; }
.sq-carousel-dot{
  width:6px; height:6px; border-radius:3px; border:none;
  background:var(--line); cursor:pointer; padding:0;
  transition:background 220ms, width 220ms;
}
.sq-carousel-dot.active{ background:var(--navy-deep); width:22px; }

.sq-carousel-nav{ display:flex; gap:8px; flex-shrink:0; }
.sq-carousel-btn{
  border:none; cursor:pointer; font-family:'Jost',sans-serif; font-weight:700;
  font-size:.85rem; padding:11px 20px; border-radius:var(--radius-sm);
  background:var(--navy-deep); color:#fff;
  transition:background 160ms, opacity 300ms;
  line-height:1; white-space:nowrap;
}
.sq-carousel-btn:hover{ background:var(--navy); }
.sq-carousel-prev{
  background:transparent; color:var(--navy-deep);
  border:1.5px solid var(--line);
  opacity:0; pointer-events:none;
  transition:background 160ms, opacity 300ms;
}
.sq-carousel-prev.visible{ opacity:1; pointer-events:auto; }
.sq-carousel-prev:hover{ background:var(--surface); }

/* Responsive */
@media(max-width:860px){
  .sq-slide{ flex:0 0 clamp(260px,68vw,420px); }
}
@media(max-width:560px){
  .sq-slide{ flex:0 0 84vw; aspect-ratio:4/3; }
  .sq-carousel-clip{ padding-left:16px; }
  .sq-carousel-footer{ padding:16px 16px 0; }
  .sq-carousel-prev{ display:none; }
}

/* ─── 3. STATS ─── */
.sq-stats-section{ padding:60px 0; }
.sq-stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.sq-stat{ padding:36px 28px; text-align:center; border-right:1px solid var(--line); }
.sq-stat:last-child{ border-right:none; }
.sq-stat-num{
  display:block; font-family:'Jost',sans-serif;
  font-size:clamp(2.4rem,4vw,3.5rem); font-weight:800; color:var(--navy-deep);
  line-height:1; margin-bottom:8px;
}
.sq-stat-lbl{
  display:block; font-size:.76rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em; line-height:1.3;
}
@media(max-width:760px){
  .sq-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .sq-stat:nth-child(2){ border-right:none; }
  .sq-stat:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}

/* ─── 4. VALUE PROPS ─── */
.sq-value-section{ padding:72px 0; }
.sq-value-head{ max-width:560px; margin-bottom:48px; }
.sq-value-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:10px; }
.sq-value-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
}
.sq-value-block{
  padding:36px 40px 36px 0; border-right:1px solid var(--line);
}
.sq-value-block:last-child{ border-right:none; padding-right:0; padding-left:40px; }
.sq-value-block:nth-child(2){ padding-left:40px; padding-right:40px; }
.sq-value-icon{
  width:52px; height:52px; border-radius:14px; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition:transform 200ms cubic-bezier(.34,1.56,.64,1);
}
.sq-value-block:hover .sq-value-icon{ transform:scale(1.12); }
.sq-value-block:nth-child(2) .sq-value-icon{ background:var(--gold-soft); color:var(--gold); }
.sq-value-block:nth-child(3) .sq-value-icon{ background:var(--teal-soft); color:var(--teal); }
.sq-value-block h3{ font-size:1.2rem; margin-bottom:12px; color:var(--ink); }
.sq-value-block p{ font-size:.92rem; color:var(--ink-soft); line-height:1.65; margin:0; }
@media(max-width:760px){
  .sq-value-grid{ grid-template-columns:1fr; }
  .sq-value-block,.sq-value-block:last-child,.sq-value-block:nth-child(2){
    padding:28px 0; border-right:none; border-bottom:1px solid var(--line);
  }
  .sq-value-block:last-child{ border-bottom:none; }
}

/* ─── 5. PROCESSUS ─── */
.sq-process-section{ padding:72px 0; }
.sq-process-head{ max-width:560px; margin-bottom:56px; }
.sq-process-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:10px; }
.sq-process-list{ display:flex; flex-direction:column; gap:64px; }
.sq-process-step{
  display:grid; grid-template-columns:80px 1fr 1fr; gap:32px 40px; align-items:center;
}
.sq-process-step-alt{ grid-template-columns:1fr 1fr 80px; }
.sq-process-step-alt .sq-process-num{ order:3; justify-self:end; }
.sq-process-num{
  font-family:'Jost',sans-serif; font-size:3.5rem; font-weight:800;
  color:var(--line); line-height:1; white-space:nowrap;
}
.sq-process-body h3{ font-size:1.25rem; margin-bottom:12px; }
.sq-process-body p{ font-size:.92rem; color:var(--ink-soft); line-height:1.65; margin:0; }
.sq-process-img{
  border-radius:18px; aspect-ratio:4/3; background-size:cover;
  background-position:center; overflow:hidden;
}
@media(max-width:860px){
  .sq-process-step,.sq-process-step-alt{ grid-template-columns:1fr; gap:20px; }
  .sq-process-step-alt .sq-process-num{ order:0; justify-self:start; }
  .sq-process-img{ aspect-ratio:16/7; }
  .sq-process-list{ gap:48px; }
}

/* ─── 6. TÉMOIGNAGES ─── */
.sq-testimonials-section{ padding:72px 0; }
.sq-testimonials-head{ max-width:520px; margin-bottom:44px; }
.sq-testimonials-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:10px; }
.sq-testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.sq-testimonial{
  background:var(--surface); border-radius:20px; padding:32px 28px;
  border:1px solid var(--line);
  transition:transform 280ms cubic-bezier(.165,.84,.44,1),box-shadow 280ms ease;
}
.sq-testimonial:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 6px rgba(10,30,50,.04),0 20px 40px -20px rgba(10,30,50,.18);
}
.sq-quote-mark{
  font-family:'Jost',sans-serif; font-size:4rem; line-height:.8; color:var(--gold);
  display:block; margin-bottom:12px; font-weight:800;
}
.sq-testimonial > p{ font-size:.92rem; color:var(--ink); line-height:1.65; margin-bottom:20px; }
.sq-testimonial-author{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.sq-author-avatar{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.78rem; flex-shrink:0;
}
.sq-testimonial-author > div > b{ display:block; font-size:.9rem; color:var(--ink); }
.sq-testimonial-author > div > span{ display:block; font-size:.76rem; color:var(--ink-soft); }
.sq-testimonial-link{
  color:var(--navy); font-size:.82rem; font-weight:700; cursor:pointer;
  border:none; background:none; padding:0; font-family:inherit;
  text-decoration:underline; text-underline-offset:3px;
}
@media(max-width:760px){ .sq-testimonials-grid{ grid-template-columns:1fr; } }

/* ─── 7. CARTES TYPOLOGIQUES ─── */
.sq-types-section{ padding:72px 0; }
.sq-types-head{ max-width:680px; margin-bottom:32px; }
.sq-types-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:10px; }
.sq-types-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.sq-type-tab{
  background:transparent; border:1.5px solid var(--line); color:var(--ink);
  padding:8px 18px; border-radius:8px; font-size:.82rem; font-weight:700;
  font-family:inherit; cursor:pointer; transition:background 150ms,color 150ms,border-color 150ms;
}
.sq-type-tab:hover{ background:var(--surface); }
.sq-type-tab.active{ background:var(--navy-deep); color:#fff; border-color:var(--navy-deep); }
.sq-types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sq-type-card{
  border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
  position:relative; display:flex; flex-direction:column;
  transition:box-shadow 260ms ease,transform 260ms cubic-bezier(.165,.84,.44,1);
}
.sq-type-card:hover{
  box-shadow:0 4px 6px rgba(10,30,50,.05),0 20px 40px -16px rgba(10,30,50,.2);
  transform:translateY(-3px);
}
.sq-type-card-img{ height:160px; background-size:cover; background-position:center; flex-shrink:0; }
.sq-type-card-body{ padding:18px 18px 56px; flex:1; }
.sq-type-tag{
  display:inline-block; font-size:.66rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--navy-mid); margin-bottom:6px;
}
.sq-type-card-body h3{ font-size:1rem; margin-bottom:6px; }
.sq-type-card-body p{ font-size:.82rem; color:var(--ink-soft); margin-bottom:12px; line-height:1.55; }
.sq-type-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.sq-type-tags span{ font-size:.66rem; background:var(--surface); color:var(--ink-soft); border-radius:4px; padding:3px 9px; font-weight:600; }
.sq-type-arrow{
  position:absolute; right:14px; bottom:14px; width:36px; height:36px;
  border-radius:50%; background:var(--navy-deep); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  cursor:pointer; opacity:0; transform:translateY(6px);
  transition:opacity 200ms ease,transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.sq-type-card:hover .sq-type-arrow{ opacity:1; transform:translateY(0); }
@media(max-width:900px){ .sq-types-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .sq-types-grid{ grid-template-columns:1fr; } }

/* ─── 8. FAQ ACCORDION ─── */
.sq-faq-section{ padding:72px 0; }
.sq-faq-head{ max-width:520px; margin-bottom:44px; }
.sq-faq-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-top:10px; }
.sq-faq-list{ max-width:800px; border-top:1px solid var(--line); }
.sq-faq-item{ border-bottom:1px solid var(--line); }
.sq-faq-q{
  width:100%; background:none; border:none; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:20px 0; text-align:left; cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:700; color:var(--ink); transition:color 150ms;
}
.sq-faq-q:hover{ color:var(--navy); }
.sq-faq-q > span:first-child{ flex:1; }
.sq-faq-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:400;
  color:var(--ink-soft); transition:border-color 200ms,background 200ms,color 200ms,transform 250ms cubic-bezier(.34,1.56,.64,1);
}
.sq-faq-item.open .sq-faq-icon{
  border-color:var(--navy-deep); background:var(--navy-deep); color:#fff; transform:rotate(45deg);
}
.sq-faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 320ms cubic-bezier(.165,.84,.44,1);
}
.sq-faq-item.open .sq-faq-a{ grid-template-rows:1fr; }
.sq-faq-a > div{
  overflow:hidden; font-size:.94rem; color:var(--ink-soft); line-height:1.7; padding-bottom:0;
  transition:padding-bottom 320ms cubic-bezier(.165,.84,.44,1);
}
.sq-faq-item.open .sq-faq-a > div{ padding-bottom:20px; }
.sq-faq-footer{
  margin-top:36px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.sq-faq-footer p{ margin:0; color:var(--ink-soft); font-size:.92rem; }

/* ─── 9. CTA FINAL ─── */
.sq-final-cta{
  padding:88px 0;
  background:linear-gradient(140deg, var(--navy-deep) 0%, var(--navy) 60%, var(--teal) 100%);
  color:#fff; text-align:center;
}
.sq-final-content{ max-width:600px; margin:0 auto; }
.sq-final-content h2{
  color:#fff; font-size:clamp(1.9rem,3.5vw,3rem); margin:12px 0 20px;
}
.sq-final-content > p{
  color:rgba(255,255,255,.78); font-size:1rem; line-height:1.65;
  margin-bottom:0; max-width:48ch; margin-inline:auto;
}
.sq-final-note{
  margin-top:16px !important; font-size:.75rem !important;
  color:rgba(255,255,255,.45) !important; margin-bottom:0 !important; letter-spacing:.03em;
}
@media(prefers-reduced-motion:reduce){
  .sq-scroll-line,.sq-carousel-track,.sq-faq-a,.sq-faq-icon,
  .sq-type-arrow,.sq-value-icon,.sq-slide{ animation:none !important; transition:none !important; }
}

/* ── GLOBAL RESPONSIVE — PROTECTIONS TRANSVERSALES ──────────────────────────
   Empêche tout débordement horizontal quelle que soit la vue ou la section.
   Les images, vidéos et iframes ne débordent plus hors de leur conteneur.
   Les longues URLs ou mots non sécables tronquent plutôt que de pousser l'écran.
   La règle de 16 px minimum de marge latérale est garantie sur tout élément
   dont la largeur serait autrement calculée sur 100 % de la viewport.      */
html { overflow-x: clip; }
body { overflow-x: clip; min-width: 0; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* Navigation mobile : empêche le menu de déborder sous 400 px */
@media (max-width: 400px) {
  .nav-row .wrap { padding-inline: 12px; }
  .wrap { padding-inline: 12px; }
  h1 { font-size: clamp(1.4rem, 6vw, 2.2rem); }
  h2 { font-size: clamp(1.2rem, 5vw, 1.8rem); }
}

/* Petit utilitaire d'overflow horizontal pour les tableaux de données publics */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sur les très petits écrans, les deux sections côte à côte du bureau exécutif
   et des partenaires s'empilent même si elles n'avaient pas de breakpoint propre */
@media (max-width: 480px) {
  .two-col, .grid-2 { grid-template-columns: 1fr !important; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}