/* =========================================================
   Les actions du CCIE
   Charte : indigo CCIE + degrade vert/teal du logo.
   Un seul accent (le degrade), un seul systeme de rayons :
   blocs 14px, boutons et etiquettes en pilule.
   ========================================================= */

:root{
  /* marque */
  --ink:        #241C39;
  --ink-deep:   #1A1429;
  --brand:      #3F3457;
  --brand-soft: #6E6389;
  --grn:        #8CEE7A;
  --tea:        #2FD0A2;
  --accent-ink: #0C7757;   /* teal assombri : lisible sur fond clair */

  /* surfaces claires */
  --bg:      #FFFFFF;
  --bg-2:    #F6F5FA;
  --card:    #FFFFFF;
  --line:    #E5E2EE;
  --line-2:  #D7D2E4;
  --text:    #241C39;
  --muted:   #5C5578;
  --shadow:  0 1px 2px rgba(36,28,57,.05), 0 12px 32px -18px rgba(36,28,57,.35);
  --shadow-h:0 1px 2px rgba(36,28,57,.06), 0 22px 44px -20px rgba(36,28,57,.42);

  /* surfaces sombres (hero, appel au don, pied de page) */
  --dark:    #241C39;
  --dark-2:  #2E2547;
  --dark-line:rgba(255,255,255,.14);
  --dark-tx: #F1EEF9;
  --dark-mu: #B4ABD0;

  --chip-on:   #241C39;   /* categorie courante dans la barre collante */
  --chip-on-tx:#FFFFFF;

  --r:    14px;
  --r-sm: 10px;
  --pill: 999px;
  --wrap: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
}

:root{ color-scheme:light; }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.chip,.btn,.group__title,.hero__title{
  font-family:"Outfit", ui-sans-serif, system-ui, sans-serif;
}

img{ max-width:100%; display:block; }
p{ margin:0 0 .9em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
@media (max-width:640px){ .wrap{ width:calc(100% - 2rem); } }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  white-space:nowrap;
  padding:.7rem 1.35rem;
  border-radius:var(--pill);
  font-size:.95rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn--accent{
  background-image:linear-gradient(103deg, var(--grn), var(--tea));
  color:#12281F;              /* texte sombre sur degrade clair : contraste largement AA */
  box-shadow:0 6px 18px -12px rgba(20,60,45,.55);
}
.btn--accent:hover{ box-shadow:0 10px 22px -12px rgba(20,60,45,.7); transform:translateY(-1px); }
.btn--accent:active{ transform:translateY(0) scale(.985); }

.btn--line{
  border-color:var(--line-2); background:transparent; color:var(--text);
}
.btn--line:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.btn--line:active{ transform:translateY(1px); }

.btn--sm{ padding:.55rem 1.05rem; font-size:.875rem; }
.btn--lg{ padding:.95rem 1.9rem; font-size:1.05rem; }

/* ---------- navigation ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__in{
  height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav__brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.nav__brand img{ height:38px; width:auto; }
.nav__end{ display:flex; align-items:center; gap:1rem; }

/* selecteur de langue */
.langs{
  display:flex; align-items:center; gap:.1rem;
  border:1px solid rgba(255,255,255,.2); border-radius:var(--pill); padding:.18rem;
}
.langs a, .langs__on{
  display:inline-block; padding:.24rem .5rem; border-radius:var(--pill);
  font-size:.75rem; font-weight:600; letter-spacing:.03em; line-height:1.4;
  text-decoration:none;
}
.langs a{ color:var(--dark-mu); transition:color .18s var(--ease), background-color .18s var(--ease); }
.langs a:hover{ color:var(--dark-tx); background:rgba(255,255,255,.1); }
.langs__on{ background:var(--dark-tx); color:var(--ink); }

@media (max-width:520px){
  .nav__end{ gap:.6rem; }
  .langs{ padding:.12rem; }
  .langs a, .langs__on{ padding:.2rem .38rem; font-size:.7rem; }
}

.nav__brandtext{
  color:var(--dark-mu); font-size:.72rem; line-height:1.25; letter-spacing:.01em;
  padding-left:.9rem; border-left:1px solid rgba(255,255,255,.16);
}
@media (max-width:760px){
  .nav__in{ height:64px; }
  .nav__brand img{ height:32px; }
  .nav__brandtext{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(47,208,162,.16), transparent 58%),
    radial-gradient(80% 70% at 8% 100%, rgba(140,238,122,.09), transparent 60%),
    var(--dark);
  color:var(--dark-tx);
  padding:clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 5rem);
  min-height:clamp(420px, 56vh, 560px);
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__in{ width:min(100% - 2.5rem, var(--wrap)); }
/* le titre et le chapo ont leur propre mesure : les raccourcis, eux,
   doivent tenir sur une seule ligne en desktop */
.hero__copy{ max-width:none; }
.hero__title{
  margin:0 0 1.1rem;
  font-size:clamp(2.6rem, 6.4vw, 4.5rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:600;
}
/* le titre est long : sur petit ecran on laisse le texte couler
   plutot que d'ajouter une ligne a la coupure forcee */
@media (max-width:620px){
  .hero__title br{ display:none; }
}
.hero__accent{
  background-image:linear-gradient(100deg, var(--grn), var(--tea));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  max-width:46ch; color:var(--dark-mu);
  font-size:clamp(1rem,1.6vw,1.14rem); margin:0 0 2rem;
}

/* raccourcis de navigation par categorie */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.62rem 1.1rem .62rem 1.2rem;
  border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:var(--dark-mu);
  font-size:.94rem; font-weight:500; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease);
}
.chip:hover{ border-color:rgba(255,255,255,.45); color:var(--dark-tx); }
.chip:active{ transform:scale(.98); }
.chip__n{
  min-width:1.7rem; padding:.06rem .45rem; border-radius:var(--pill);
  background:rgba(255,255,255,.12); font-size:.78rem; font-weight:600;
  font-variant-numeric:tabular-nums; text-align:center; color:var(--dark-tx);
}
/* raccourcis du hero : surface pleine, degrade reserve au compteur */
.chip--solid{
  background:var(--dark-tx); border-color:transparent; color:var(--ink); font-weight:600;
}
.chip--solid:hover{ background:#fff; color:var(--ink); transform:translateY(-1px); }
.chip--solid .chip__n{
  background-image:linear-gradient(103deg, var(--grn), var(--tea));
  color:#12281F;
}

/* filigrane : la carte tient toute la section, le texte passe par-dessus */
.hero__map{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* fondu sur les bords, pour que la carte n'ait pas d'arete franche */
  -webkit-mask-image:radial-gradient(140% 135% at 58% 44%, #000 48%, rgba(0,0,0,.62) 80%, transparent 100%);
          mask-image:radial-gradient(140% 135% at 58% 44%, #000 48%, rgba(0,0,0,.62) 80%, transparent 100%);
}
.map{ width:100%; height:100%; display:block; }

/* carte peinte : le noir du fond disparait en fusion, seuls les lavis restent */
.map__paint{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.45;   /* mesure : le sous-titre garde 5,2:1 sur les zones les plus claires */
}
/* la fusion porte sur le calque entier : le noir de l'image se dissout
   dans l'indigo du hero, seuls les lavis clairs subsistent */
.hero__map.has-paint{ mix-blend-mode:screen; }
.hero__map.has-paint .map{ display:none; }
.map__land path{
  fill:rgba(255,255,255,.055);
  stroke:rgba(255,255,255,.26); stroke-width:.85; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference){
  /* la carte n'apparait qu'une fois posee par le script : sans JS elle reste visible */
  .map.is-ready{ opacity:0; transform:scale(1.05); }
  .map.is-drawn{
    opacity:1; transform:none;
    transition:opacity 1.2s var(--ease), transform 1.6s var(--ease);
  }
}

@media (max-width:900px){
  /* le texte occupe toute la largeur : le filigrane s'efface d'autant */
  .map__land path{ fill:rgba(255,255,255,.028); stroke:rgba(255,255,255,.105); }
}

/* ---------- barre collante ---------- */
.stickybar{
  position:sticky; top:72px; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)){ .stickybar{ background:var(--bg); } }
@media (prefers-reduced-transparency: reduce){ .stickybar{ background:var(--bg); backdrop-filter:none; } }

.stickybar__in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0; min-height:60px;
}
.stickybar__label{ font-weight:600; font-size:.95rem; white-space:nowrap; }
.filters--sm .chip{
  padding:.42rem .85rem; font-size:.85rem; gap:.5rem;
  border-color:var(--line-2); background:transparent; color:var(--muted);
}
.filters--sm .chip:hover{ border-color:var(--brand-soft); color:var(--text); }
.filters--sm .chip__n{ background:var(--bg-2); color:var(--text); font-size:.72rem; }
.filters--sm .chip.is-on{ background:var(--chip-on); border-color:transparent; color:var(--chip-on-tx); font-weight:600; }
.filters--sm .chip.is-on:hover{ color:var(--chip-on-tx); }
.filters--sm .chip.is-on .chip__n{ background:rgba(127,127,127,.22); color:var(--chip-on-tx); }

@media (max-width:820px){
  .stickybar{ top:64px; }
  .stickybar__label{ display:none; }
  .stickybar__in{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; min-height:0; padding:.6rem 0; }
  .stickybar__in::-webkit-scrollbar{ display:none; }
  .filters--sm{ flex-wrap:nowrap; }
}

/* ---------- groupes ---------- */
.group{ padding:clamp(3.5rem,7vw,6rem) 0; scroll-margin-top:140px; }
.group--alt{ background:var(--bg-2); }
@media (max-width:820px){ .group{ scroll-margin-top:126px; } }

.group__head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3rem); }
.group__title{
  margin:0 0 .7rem; font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.08; letter-spacing:-.028em; font-weight:600;
}
.group__lead{ color:var(--muted); font-size:1.05rem; max-width:56ch; }

/* ---------- emplacements photo ---------- */
.shot{
  position:relative; margin:0; overflow:hidden; background:var(--bg-2);
  border-radius:var(--r) var(--r) 0 0;
}
.shot--21{ aspect-ratio:21/9; }
.shot--16{ aspect-ratio:16/9; }
.shot--43{ aspect-ratio:4/3; }
.shot--32{ aspect-ratio:3/2; }
.shot img{ width:100%; height:100%; object-fit:cover; }

/* etat vide : degrade discret de la marque + nom du fichier attendu */
.shot.is-empty{
  background:
    linear-gradient(135deg, rgba(140,238,122,.16), rgba(47,208,162,.13) 45%, rgba(63,52,87,.10)),
    var(--bg-2);
  display:grid; place-items:center;
  border:1px dashed var(--line-2);
}
.shot.is-empty::after{
  content:attr(data-src);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.72rem; color:var(--muted); letter-spacing:.01em;
  padding:.35rem .7rem; border-radius:var(--pill);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  max-width:88%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- grille plaidoyer ---------- */
.grid--adv{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.4rem; }
.card{
  grid-column:span 12;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{ box-shadow:var(--shadow-h); transform:translateY(-2px); border-color:var(--line-2); }
.card__body{ padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card__title{
  margin:.1rem 0 .35rem; font-size:1.28rem; line-height:1.22;
  letter-spacing:-.02em; font-weight:600;
}
.card--feat .card__title{ font-size:clamp(1.6rem,2.6vw,2.1rem); }
.card--sm .card__title{ font-size:1.12rem; }

@media (min-width:900px){
  .card--md{ grid-column:span 6; }
  /* la derniere rangee ne compte plus que deux fiches : moitie chacune,
     avec une image plus haute que celles du dessus pour garder du rythme */
  .card--sm{ grid-column:span 6; }
  .card--feat{ grid-column:span 12; flex-direction:row; }
  .card--feat .shot{ flex:0 0 46%; aspect-ratio:auto; border-radius:var(--r) 0 0 var(--r); }
  .card--feat .card__body{ padding:2.2rem 2.4rem; justify-content:center; }
}
@media (min-width:640px) and (max-width:899px){
  .card--md, .card--sm{ grid-column:span 6; }
}

.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .6rem; }
.tag{
  display:inline-block; padding:.24rem .68rem; border-radius:var(--pill);
  background:var(--bg-2); border:1px solid var(--line);
  font-size:.76rem; font-weight:500; color:var(--muted); line-height:1.5;
}
.tag--hi{
  background-image:linear-gradient(103deg, var(--grn), var(--tea));
  border-color:transparent; color:#12281F; font-weight:600;
}
.meta{
  color:var(--muted); font-size:.87rem; margin:0 0 .85rem;
  font-variant-numeric:tabular-nums;
}
.sep{ opacity:.5; padding:0 .18rem; }

/* texte repliable */
.rt{ color:var(--muted); font-size:.97rem; }
.rt.is-clamped{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.card--feat .rt.is-clamped{ -webkit-line-clamp:5; }
.more{
  align-self:flex-start; margin-top:.9rem; padding:0;
  background:none; border:0; cursor:pointer;
  color:var(--accent-ink); font-weight:600; font-size:.9rem;
  font-family:"IBM Plex Sans",sans-serif;
  border-bottom:1px solid currentColor; line-height:1.5;
}
.more:hover{ opacity:.75; }
.more[hidden]{ display:none; }

/* ---------- affaires resolues : colonnes ---------- */
.masonry{ columns:3; column-gap:1.4rem; }
@media (max-width:1024px){ .masonry{ columns:2; } }
@media (max-width:680px){ .masonry{ columns:1; } }

.case{
  break-inside:avoid; margin:0 0 1.4rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.case:hover{ box-shadow:var(--shadow-h); transform:translateY(-2px); }
/* plus d'image dans ces cartes : le recit porte seul, la marge du haut s'ouvre */
.case__body{ padding:1.45rem 1.4rem 1.5rem; font-size:.95rem; color:var(--muted); }
.case__body .tags{ margin-bottom:.75rem; }

.quote{
  margin:1.05rem 0 0; padding:.85rem 0 .1rem 1rem;
  border-left:2px solid var(--accent-ink);
  color:var(--text); font-size:.94rem;
}
.quote p{ font-style:italic; margin-bottom:.45rem; }
.quote footer{ font-style:normal; font-size:.8rem; color:var(--muted); font-weight:500; }

/* ---------- mobilisations : blocs ---------- */
.rows{ display:flex; flex-direction:column; gap:1.4rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.row{
  display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
  transition:box-shadow .25s var(--ease);
}
.row:hover{ box-shadow:var(--shadow-h); }
.row .shot{ border-radius:0; height:100%; aspect-ratio:auto; min-height:200px; }
.row__body{ padding:1.6rem 1.8rem 1.75rem; color:var(--muted); font-size:.97rem; }
.row__title{
  margin:.1rem 0 .35rem; font-size:1.32rem; line-height:1.24;
  letter-spacing:-.02em; font-weight:600; color:var(--text);
}
.row__body .btn{ margin-top:1.1rem; }

@media (max-width:820px){
  .row{ grid-template-columns:1fr; }
  .row .shot{ aspect-ratio:16/9; min-height:0; }
  .row__body{ padding:1.3rem 1.35rem 1.5rem; }
}

/* ---------- saisines ARCOM ---------- */
.arcom{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); box-shadow:var(--shadow); overflow:hidden;
}
.arcom__head{
  padding:1.7rem 1.9rem; border-bottom:1px solid var(--line);
  background:linear-gradient(103deg, rgba(140,238,122,.10), rgba(47,208,162,.08));
}
.arcom__title{ margin:0 0 .35rem; font-size:1.4rem; letter-spacing:-.02em; font-weight:600; }
.arcom__head p{ color:var(--muted); font-size:.94rem; max-width:62ch; }
@media (max-width:760px){ .arcom__head{ padding:1.4rem; } }

.seq{ list-style:none; margin:0; padding:0; }
.seq__item{
  display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:1.6rem; align-items:start;
  padding:1.5rem 1.9rem;
}
.seq__item + .seq__item{ border-top:1px solid var(--line); }
.seq__quote{ margin:0 0 .7rem; }
.seq__quote p{
  margin:0; font-family:"Outfit",sans-serif; font-size:1.12rem; line-height:1.38;
  letter-spacing:-.015em; color:var(--text); font-weight:500;
}
.seq__meta{
  margin:0 0 .5rem; font-size:.82rem; font-weight:600; color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.seq__note{ margin:0; font-size:.9rem; color:var(--muted); }
.seq__link{ margin:.6rem 0 0; font-size:.87rem; }
.seq__link a{ color:var(--accent-ink); font-weight:600; text-underline-offset:3px; }
.shot--mini{ border-radius:var(--r-sm); }

@media (max-width:820px){
  .seq__item{ grid-template-columns:1fr; padding:1.3rem 1.35rem; }
  .seq__item .shot--mini{ order:-1; }
}

/* ---------- dimension europeenne ---------- */
.euro{ padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--line); }
.euro__title{
  margin:0 0 clamp(2rem,4vw,3rem); font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.08; letter-spacing:-.028em; font-weight:600; max-width:18ch;
}
.euro__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2rem; align-items:start; }
@media (max-width:900px){ .euro__grid{ grid-template-columns:1fr; } }

.euro__hero{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.euro__heroBody{ padding:1.5rem 1.7rem 1.7rem; color:var(--muted); font-size:.97rem; }
.euro__kicker{
  font-family:"Outfit",sans-serif; font-size:1.24rem; line-height:1.3;
  letter-spacing:-.02em; font-weight:600; color:var(--text); margin-bottom:.6rem;
}

.euro__list{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.euro__list li{
  padding:1rem 1.2rem; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line);
}
.euro__list strong{ display:block; font-family:"Outfit",sans-serif; font-weight:600; font-size:1rem; letter-spacing:-.012em; }
.euro__list span{ display:block; color:var(--muted); font-size:.9rem; margin-top:.15rem; }

/* ---------- appel au don ---------- */
/* la section recoit le focus au saut : pas de contour, le deplacement suffit */
.cta:focus{ outline:none; }
.cta{ scroll-margin-top:96px;
  background:
    radial-gradient(90% 120% at 92% 10%, rgba(47,208,162,.20), transparent 60%),
    var(--dark);
  color:var(--dark-tx);
  padding:clamp(3rem,6vw,5rem) 0;
}
.cta__in{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,3.5rem); align-items:start;
}
/* le formulaire est long : le texte reste a hauteur d'oeil pendant qu'on le remplit */
@media (min-width:901px){
  .cta__copy{ position:sticky; top:150px; }
}
@media (max-width:900px){ .cta__in{ grid-template-columns:1fr; } }

/* le formulaire de paiement arrive avec ses propres styles :
   on lui donne une surface claire et une largeur, rien de plus */
.cta__form{
  background:#fff; color:#241C39;
  border-radius:var(--r); padding:clamp(1.1rem,2.5vw,1.6rem);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
  min-height:120px;
}
/* si le formulaire ne se charge pas, la carte s'efface et le lien prend le relais */
.cta__form.is-fallback{ background:none; box-shadow:none; padding:0; min-height:0; }
.cta__fallback[hidden]{ display:none; }
.cta__form :where(iframe, form, div){ max-width:100%; }
.cta__form iframe{ width:100%; border:0; display:block; }
.cta__title{
  margin:0 0 .6rem; font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.1; letter-spacing:-.028em; font-weight:600; max-width:22ch;
}
.cta__sub{ color:var(--dark-mu); max-width:50ch; font-size:1.02rem; }

/* ---------- pied de page ---------- */
.foot{ background:var(--dark); color:var(--dark-mu); padding:2.2rem 0 2.8rem; border-top:1px solid rgba(255,255,255,.08); }
.foot__in{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.foot__logo{ height:30px; width:auto; }
.foot__in p{ font-size:.85rem; margin:0; }

/* ---------- apparitions au defilement ---------- */
@media (prefers-reduced-motion: no-preference){
  .r{ opacity:0; transform:translateY(18px); }
  .r.is-in{
    opacity:1; transform:none;
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:var(--d, 0ms);
  }
}

/* =========================================================
   L'activite en chiffres : une photo et trois blocs.
   Pas de graphique : quatre reperes se lisent mieux en toutes
   lettres qu'en barres.
   ========================================================= */
.facts{ background:var(--bg-2); border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0; }
.facts__in{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,5vw,3.6rem); align-items:start;
}
.facts__shot{
  border-radius:var(--r); position:sticky; top:150px;
}
.shot--34{ aspect-ratio:3/4; }

.facts__title{
  margin:0 0 1.6rem; font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.1; letter-spacing:-.028em; font-weight:600;
}

.fact{ padding:1.4rem 0; border-top:1px solid var(--line-2); }
.fact:first-of-type{ border-top:0; padding-top:0; }
.fact__n{
  margin:0; font-family:"Outfit",sans-serif; font-weight:600;
  font-size:clamp(2.6rem,5.6vw,3.6rem); line-height:1;
  letter-spacing:-.04em; color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.fact__n--sm{ font-size:clamp(1.9rem,3.4vw,2.4rem); }
.fact__k{
  margin:.4rem 0 0; font-family:"Outfit",sans-serif; font-weight:600;
  font-size:1.06rem; letter-spacing:-.015em; color:var(--text);
}
.fact__k--head{ font-size:1.24rem; margin:0 0 1.1rem; }
.fact__note{ margin:.35rem 0 0; color:var(--muted); font-size:.92rem; max-width:46ch; }

.fact__pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; }

@media (max-width:900px){
  .facts__in{ grid-template-columns:1fr; }
  .facts__shot{ position:static; max-width:420px; }
  .shot--34{ aspect-ratio:4/3; }
}
@media (max-width:560px){
  .fact__pair{ grid-template-columns:1fr; gap:1.3rem; }
}

/* =========================================================
   Projets a venir : chantiers ouverts, signales par un
   lisere degrade qui les distingue des actions menees.
   ========================================================= */
.projs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
@media (max-width:820px){ .projs{ grid-template-columns:1fr; } }

.proj{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.proj::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background-image:linear-gradient(103deg, var(--grn), var(--tea));
}
.proj:hover{ box-shadow:var(--shadow-h); transform:translateY(-2px); }
.proj .shot{ border-radius:0; }
.proj__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.proj__title{
  margin:0 0 .7rem; font-size:1.22rem; line-height:1.25;
  letter-spacing:-.02em; font-weight:600;
}

/* lien partenaire : le logo si le fichier est la, le nom sinon */
.partner{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.2rem;
  padding:.6rem .95rem; border:1px solid var(--line-2); border-radius:var(--pill);
  text-decoration:none; color:var(--muted); font-size:.87rem; font-weight:500;
  width:max-content;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.partner:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.partner img{ height:20px; width:auto; }
.partner .logotext{
  font-family:"Outfit",sans-serif; font-weight:600; font-size:.95rem;
  letter-spacing:-.01em; color:var(--text);
}