/* ═══════════════════════════════════════════════════════════════
   WE SPEAK CITIZEN — direction graphique
   Néo-brutalisme : bordures épaisses, ombres dures sans flou,
   angles vifs, aplats des terres du Sud.

   Les couleurs et polices sont pilotées par les Réglages globaux
   d'Elementor ; cette feuille ne porte que ce qu'un réglage natif
   ne sait pas exprimer.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --wsc-bg:#F4F1F0;
  --wsc-surface:#FFFFFF;
  --wsc-ink:#14100F;
  --wsc-red:#811F1C;
  --wsc-red-d:#5C1614;
  --wsc-sand:#E9DCC9;
  --wsc-clay:#C9694E;
  --wsc-ochre:#E0A83C;
  --wsc-muted:#5E5E5E;

  --wsc-bd:3px;
  --wsc-sh:6px 6px 0 var(--wsc-ink);
  --wsc-sh-sm:4px 4px 0 var(--wsc-ink);
  --wsc-sh-lg:10px 10px 0 var(--wsc-ink);
  --wsc-ease:cubic-bezier(.2,.8,.3,1);
  --wsc-snap:cubic-bezier(.34,1.3,.5,1);
}

/* ── 1. Angles vifs, partout ────────────────────────────────────
   La règle la plus visible de la direction. Astra et Elementor
   posent des arrondis par défaut sur les boutons et les champs. */
body,
.elementor-button,
.elementor-widget-image img,
.elementor-element input:not([type="radio"]):not([type="checkbox"]),
.elementor-element textarea,
.elementor-element select,
.wp-block-button__link,
.ast-button,
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select,
.wpforms-container button{
  border-radius:0 !important;
}

body{background:var(--wsc-bg);color:var(--wsc-ink);}

/* Astra pose `overflow-x:hidden` sur body. Or `hidden` sur un seul axe force
   l'autre a `auto` : body devient alors un conteneur de defilement, ce qui
   neutralise `position:sticky` sur TOUTE la page. `clip` rogne le debord
   horizontal sans creer de conteneur de defilement. */
body{overflow-x:clip !important;}

/* Le tiroir de navigation d'Xpro reste dans le flux quand il est ferme :
   il est simplement pousse hors cadre (`position:fixed` + translation de
   400 px). Un element fixe echappe au rognage pose sur `body`, d'ou un
   defilement horizontal de 163 px sur mobile. On rogne donc aussi a la
   racine. `clip` ne cree pas de conteneur de defilement : les colonnes
   collantes ne sont pas affectees. */
html{overflow-x:clip;}

/* ── Sections a deux colonnes ──────────────────────────────────────
   Les largeurs en pourcentage d'Elementor ne deduisent pas la gouttiere :
   48 % + 52 % + 40 px de gap depassent la ligne et la colonne passe dessous.
   On interdit le retour a la ligne au-dela de la tablette et on autorise les
   colonnes a se comprimer : la gouttiere est alors absorbee proportionnellement.
   Effet de bord voulu : la rangee reprend la hauteur de la colonne la plus
   haute, ce qui redonne sa course au bloc collant. */
@media (min-width:1025px){
  .wsc-hero > .e-con-inner,
  .wsc-manifeste > .e-con-inner,
  .wsc-demarche > .e-con-inner,
  .wsc-citation > .e-con-inner{ flex-wrap:nowrap; }

  .wsc-hero > .e-con-inner > .e-con,
  .wsc-manifeste > .e-con-inner > .e-con,
  .wsc-demarche > .e-con-inner > .e-con,
  .wsc-citation > .e-con-inner > .e-con{ min-width:0; flex-shrink:1; }
}

/* ── 2. Titres ────────────────────────────────────────────────── */
.wsc-display h1,.wsc-display h2,.wsc-display h3,
h1.wsc-display,h2.wsc-display,h3.wsc-display{
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:1;
}
/* Accent didone du titre d'accueil — un seul accident typographique */
.wsc-serif{
  font-family:"Bodoni Moda",Didot,"Bodoni MT",Garamond,serif;
  font-weight:300;font-style:italic;
  text-transform:none;letter-spacing:-.015em;
  color:var(--wsc-red);
}

/* ── 3. Étiquette monospace ───────────────────────────────────── */
.wsc-eyebrow{
  display:inline-block;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--wsc-ink);color:var(--wsc-bg);
  padding:6px 11px;
  border:2px solid var(--wsc-ink);
}
.wsc-eyebrow--ochre{background:var(--wsc-ochre);color:var(--wsc-ink);}

/* ── 4. Boutons ───────────────────────────────────────────────── */
.elementor-button,.ast-button,.wpforms-submit{
  font-family:"JetBrains Mono",Consolas,monospace !important;
  font-weight:700 !important;
  letter-spacing:.06em;text-transform:uppercase;
  border:var(--wsc-bd) solid var(--wsc-ink) !important;
  box-shadow:var(--wsc-sh-sm);
  transition:transform .14s var(--wsc-ease),box-shadow .14s var(--wsc-ease),
             background .14s var(--wsc-ease);
}
.elementor-button:hover,.ast-button:hover,.wpforms-submit:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--wsc-ink);
}
.elementor-button:active,.ast-button:active,.wpforms-submit:active{
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--wsc-ink);
}
/* Bouton posé sur un fond sombre : l'ombre passe en crème */
.wsc-on-dark .elementor-button{
  border-color:var(--wsc-bg) !important;
  box-shadow:4px 4px 0 var(--wsc-bg);
}
.wsc-on-dark .elementor-button:hover{box-shadow:7px 7px 0 var(--wsc-bg);}

/* ── 5. Brique bento ──────────────────────────────────────────── */
.wsc-tile{
  border:var(--wsc-bd) solid var(--wsc-ink) !important;
  box-shadow:var(--wsc-sh);
  transition:transform .18s var(--wsc-ease),box-shadow .18s var(--wsc-ease);
}
.wsc-tile--hover:hover{
  transform:translate(-4px,-4px);
  box-shadow:var(--wsc-sh-lg);
}
/* Ombre rouge quand la brique est claire sur fond sombre */
.wsc-tile--shadow-red{box-shadow:6px 6px 0 var(--wsc-red);}
.wsc-tile--shadow-red.wsc-tile--hover:hover{box-shadow:10px 10px 0 var(--wsc-red);}
.wsc-tile--shadow-ochre{box-shadow:6px 6px 0 var(--wsc-ochre);}
.wsc-tile--shadow-cream{box-shadow:6px 6px 0 var(--wsc-bg);}

/* Chiffre massif dans une brique */
.wsc-figure{
  font-weight:800;letter-spacing:-.05em;line-height:.85;
  font-variant-numeric:tabular-nums;
}

/* ── 6. Image cadrée ──────────────────────────────────────────── */
.wsc-framed img{
  border:var(--wsc-bd) solid var(--wsc-ink);
  box-shadow:var(--wsc-sh-lg);
  display:block;width:100%;
}
/* Le visuel du hero déborde jusqu'au bord de la fenêtre */
.wsc-bleed-right img{border-right:none;}

/* ── 7. Bande de chiffres inclinée ────────────────────────────────
   Posée à cheval sur la couture entre deux sections : la section
   porteuse a une hauteur nulle, la bande est recentrée sur son bord. */
/* Un conteneur Elementor en pleine largeur ne genere PAS de .e-con-inner :
   c'est donc .wsc-band-seam lui-meme qui doit rogner et servir de repere. */
.wsc-band-seam{
  height:0 !important;padding:0 !important;
  position:relative;z-index:5;
  /* `clip` sur le seul axe horizontal : les bouts inclines sont rognes,
     le debord vertical de l'inclinaison reste visible. `hidden` forcerait
     l'axe vertical a `auto` et creerait un conteneur de defilement. */
  overflow-x:clip;overflow-y:visible;
  display:block !important;
}
.wsc-marquee{
  position:absolute;left:0;right:0;top:0;
  transform:translateY(-50%) rotate(-2.2deg);
  width:114%;margin-left:-7%;
  border-top:var(--wsc-bd) solid var(--wsc-ink);
  border-bottom:var(--wsc-bd) solid var(--wsc-ink);
  background:var(--wsc-red);
  box-shadow:0 8px 0 var(--wsc-ink);
  overflow:hidden;
}
.wsc-marquee-track{display:flex;width:max-content;animation:wsc-defile 46s linear infinite;}
.wsc-marquee:hover .wsc-marquee-track{animation-play-state:paused;}
.wsc-marquee-run{display:flex;flex-shrink:0;align-items:center;}
@keyframes wsc-defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.wsc-fig{display:flex;align-items:baseline;gap:12px;padding:18px 0;white-space:nowrap;}
.wsc-fig b{
  font-size:clamp(30px,3.4vw,48px);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--wsc-bg);
  font-variant-numeric:tabular-nums;
}
.wsc-fig i{
  font-style:normal;font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wsc-ochre);
}
.wsc-fig-sep{font-size:15px;color:var(--wsc-ochre);padding:0 26px;line-height:1;}

/* ── 8. Colonne collante ──────────────────────────────────────────
   Quatre conditions : position sticky + top, aucun ancêtre en
   overflow non visible, conteneur plus haut que le bloc collant,
   et la colonne doit s'étirer sur toute la hauteur de la rangée. */
.wsc-sticky-col{align-self:stretch !important;}
.wsc-sticky{position:sticky;top:120px;}

/* ── 9. Fond photographique voilé ─────────────────────────────────
   Opacités calibrées par mesure de contraste WCAG (pire cas 5,9:1). */
.wsc-veil-ink > .e-con-inner::before,
.wsc-veil-red > .e-con-inner::before,
.wsc-veil-cream > .e-con-inner::before{content:none;}
.wsc-veil-ink::before,.wsc-veil-red::before,.wsc-veil-cream::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
}
.wsc-veil-ink::before{background:linear-gradient(rgba(20,16,15,.72),rgba(20,16,15,.64));}
.wsc-veil-red::before{background:linear-gradient(rgba(129,31,28,.8),rgba(92,22,20,.86));}
.wsc-veil-cream::before{background:linear-gradient(rgba(244,241,240,.84),rgba(244,241,240,.9));}
.wsc-veil-ink > *,.wsc-veil-red > *,.wsc-veil-cream > *{position:relative;z-index:1;}

/* ── 10. Trame verticale ──────────────────────────────────────── */
.wsc-warp::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(20,16,15,.05) 38px 42px);
}
.wsc-warp-light::after{
  background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(244,241,240,.09) 38px 42px);
}

/* ── 11. Formulaire WPForms ───────────────────────────────────── */
.wpforms-container .wpforms-field-label{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:10.5px !important;font-weight:700 !important;
  letter-spacing:.09em;text-transform:uppercase;
}
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container textarea,
.wpforms-container select{
  border:2px solid var(--wsc-ink) !important;
  background:var(--wsc-bg) !important;
  padding:13px 15px !important;
  transition:box-shadow .14s var(--wsc-ease),transform .14s var(--wsc-ease);
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus{
  outline:none !important;background:var(--wsc-surface) !important;
  box-shadow:4px 4px 0 var(--wsc-red) !important;
  transform:translate(-2px,-2px);
}
.wpforms-container .wpforms-error{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11px !important;font-weight:700;
  background:var(--wsc-red);color:var(--wsc-bg);
  padding:6px 10px;display:inline-block;margin-top:8px;
}
.wpforms-container button[type=submit]{
  background:var(--wsc-red) !important;color:var(--wsc-bg) !important;
  padding:15px 26px !important;
}

/* ── 12. Accessibilité ────────────────────────────────────────── */
.wsc-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{outline:3px solid var(--wsc-red);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .wsc-marquee-track{animation:none;width:100%;overflow-x:auto;}
  .wsc-marquee{transform:none;width:100%;margin-left:0;}
  .wsc-marquee-run:nth-child(2){display:none;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ── 13. Points de rupture ────────────────────────────────────── */
@media (max-width:1024px){
  /* Colonnes empilees : plus de course, le bloc collant redevient normal. */
  .wsc-sticky{position:static;}

  /* Deux colonnes de 320 px dans le hero sont illisibles : on empile.
     Elementor pilote la largeur par la variable --width, c'est donc elle
     qu'il faut redefinir, pas la propriete width seule. */
  .wsc-hero > .e-con-inner > .e-con{ --width:100%; }
}
@media (max-width:767px){
  .wsc-fig b{font-size:26px;}
  .wsc-tile{box-shadow:4px 4px 0 var(--wsc-ink);}
}

/* ═══════════════════════════════════════════════════════════════
   14. ADAPTATION AU DOM D'ELEMENTOR
   Une classe posee sur un widget atterrit sur son ENVELOPPE
   (.elementor-widget-*), pas sur le <h2>/<ul> interne. Tout ce qui
   doit epouser son texte doit donc viser l'element interne.
   ═══════════════════════════════════════════════════════════════ */

/* ── Etiquette monospace : bloc plein qui epouse son texte ───── */
.wsc-eyebrow{background:none !important;border:0 !important;padding:0 !important;}
.wsc-eyebrow .elementor-heading-title{
  display:inline-block;
  background:var(--wsc-ink);color:var(--wsc-bg);
  border:2px solid var(--wsc-ink);
  padding:6px 11px;
}
.wsc-eyebrow--ochre .elementor-heading-title{
  background:var(--wsc-ochre);color:var(--wsc-ink);
}

/* ── Titre du hero : deux registres inclines en sens inverse ─── */
.wsc-hero-title{position:relative;}
.wsc-tilt-a{transform:rotate(-1.7deg);transform-origin:0% 100%;position:relative;z-index:1;}
.wsc-tilt-b{transform:rotate(2.4deg);transform-origin:18% 0%;position:relative;z-index:2;}
/* Le chevauchement se mesure en em pour tenir a toutes les tailles.
   Il doit porter sur le TITRE (136 px), pas sur l'enveloppe du widget
   restee a 16 px : sur l'enveloppe, -.30em ne vaudrait que 5 px. */
.wsc-hero-l3{margin:0 !important;}
.wsc-hero-l3 .elementor-heading-title{
  display:block;
  margin-top:-.30em;
  margin-left:1.1em;
  /* Halo creme : detache la didone des capitales qu'elle recouvre,
     sans l'epaissir comme le ferait un contour. */
  text-shadow:0 0 10px var(--wsc-bg),0 0 22px var(--wsc-bg),0 0 34px var(--wsc-bg);
}

/* ── Puces de regions ───────────────────────────────────────── */
.wsc-chips .elementor-icon-list-items{gap:8px;flex-wrap:wrap;}
.wsc-chips .elementor-icon-list-item{
  border:2px solid var(--wsc-ink);
  background:var(--wsc-sand);
  padding:6px 10px;
}
.wsc-chips .elementor-icon-list-icon{display:none !important;}

/* ── Numero en pastille debordant l'angle de la brique ───────── */
.wsc-tile{position:relative;}
.wsc-num{position:absolute !important;left:-3px;top:20px;z-index:3;width:auto !important;}
.wsc-num .elementor-heading-title{
  display:inline-block;
  background:var(--wsc-ink);color:var(--wsc-bg);
  padding:6px 9px;
}
/* La brique degage la place de la pastille */
.wsc-tile:has(> .wsc-num){padding-left:74px !important;}

/* ── Boutons : Elementor annule l'ombre, on la reimpose ──────── */
.elementor-button,.wpforms-submit{box-shadow:var(--wsc-sh-sm) !important;}
.elementor-button:hover,.wpforms-submit:hover{box-shadow:7px 7px 0 var(--wsc-ink) !important;}
.elementor-button:active{box-shadow:1px 1px 0 var(--wsc-ink) !important;}
.wsc-on-dark .elementor-button{box-shadow:4px 4px 0 var(--wsc-bg) !important;}
.wsc-on-dark .elementor-button:hover{box-shadow:7px 7px 0 var(--wsc-bg) !important;}

/* ── Visuel du hero : deborde jusqu'au bord de la fenetre ────── */
/* Elargir l'image plutot que la tirer par une marge negative : la marge
   deplace le bloc sans le redimensionner, donc le bord droit n'atteignait
   jamais la fenetre. Ici le visuel deborde franchement de son conteneur. */
@media (min-width:1025px){
  .wsc-hero-art{margin-right:0 !important;overflow:visible;}
  /* Un seul niveau elargi : appliquer le calc a l'enveloppe ET a l'image
     cumulait deux fois le debord. */
  .wsc-hero-art .elementor-widget-image img{
    width:calc(100% + 72px) !important;
    max-width:none !important;
  }
  .wsc-hero-art img{border-right:0 !important;}
}

/* ── Vignettes projet : image calee en haut, texte en retrait ── */
.wsc-proj{overflow:hidden;padding:0 !important;}
.wsc-proj .wsc-proj-img{margin:0 !important;width:100%;}
.wsc-proj .wsc-proj-img img{
  display:block;width:100%;
  aspect-ratio:16/10;object-fit:cover;
  border-bottom:var(--wsc-bd) solid var(--wsc-ink);
  transition:transform .45s var(--wsc-ease);
}
.wsc-proj:hover .wsc-proj-img img{transform:scale(1.05);}
.wsc-proj-bd{padding:22px 24px 26px !important;}

/* ── Citation : la phrase porte la section ──────────────────── */
.wsc-citation h2.elementor-heading-title{letter-spacing:-.035em;}

/* ── Encadre de citation du manifeste ───────────────────────── */
.wsc-quote-box{
  background:var(--wsc-ochre);
  border:var(--wsc-bd) solid var(--wsc-ink);
  box-shadow:var(--wsc-sh-sm);
  padding:18px 20px !important;
}

@media (max-width:1024px){
  /* Plus d'inclinaison ni de decalage : sur une colonne etroite, un retrait
     de 150 px pousserait la didone hors du cadre. Le chevauchement reste,
     mais reduit. */
  .wsc-tilt-a,.wsc-tilt-b{transform:none;}
  .wsc-hero-l3 .elementor-heading-title{
    margin-left:0 !important;
    margin-top:-.16em !important;
  }
  /* La pastille de numero reprend sa place dans le flux */
  .wsc-tile:has(> .wsc-num){padding-left:26px !important;}
  .wsc-num{position:static !important;margin-bottom:12px;}
}

/* ═══════════════════════════════════════════════════════════════
   15. MISE AU DIAPASON AVEC LA MAQUETTE LOCALE
   Ce que la conversion en widgets natifs avait laissé de côté :
   l'en-tête, les pistes de progression des colonnes collantes,
   le sommaire collant de la page Agir et le rythme bento.
   ═══════════════════════════════════════════════════════════════ */

/* ── 15.1 En-tête ────────────────────────────────────────────────
   Xpro pose la classe `xtb-header-sticky` mais laisse la position à
   `static` : c'est cette feuille qui épingle réellement l'en-tête. */
header.xpro-theme-builder-header{
  position:sticky;top:0;z-index:100;
}
.admin-bar header.xpro-theme-builder-header{top:32px;}
@media screen and (max-width:782px){
  .admin-bar header.xpro-theme-builder-header{top:46px;}
}

.wsc-header{transition:box-shadow .2s var(--wsc-ease),min-height .2s var(--wsc-ease);}
.wsc-header.is-stuck{
  min-height:64px !important;
  box-shadow:0 6px 0 var(--wsc-ink);
}

/* Marque : pavé rouge bordé, calligraphie posée au masque ─────────
   Le fichier d'origine (wsc-marque.png) est un aplat rouge de
   282 × 516. Xpro n'impose que la hauteur : sans `width:auto`, la
   largeur reste celle de l'attribut HTML et l'image est écrasée à
   282 × 46. On l'escamote — son texte alternatif reste lu — et on
   peint la calligraphie au masque depuis la source vectorielle,
   comme sur la maquette : une seule source, couleur pilotée par le
   thème, net à toutes les densités d'écran. */
/* Répartition de la ligne d'en-tête.
   Elementor donne 100 % à tout conteneur enfant : la marque et le bloc
   d'actions se partageaient la largeur en deux moitiés de 596 px. La marque
   n'a besoin que de 174 px, mais elle les gardait, et le menu — confiné aux
   402 px qui lui restaient — repassait sur deux rangs. La marque ne prend
   donc plus que sa mesure, les actions prennent le reste, et rien ne se
   replie sur cette ligne. */
.wsc-header > .e-con-inner{--flex-wrap:nowrap;flex-wrap:nowrap;}
.wsc-brand{align-items:center;--width:auto;flex:0 0 auto !important;}
.wsc-header > .e-con-inner > .e-con:last-child{--width:auto;flex:1 1 auto !important;min-width:0;}
.wsc-header .xpro-elementor-horizontal-navbar-nav{flex-wrap:nowrap;}
/* Les intitulés des boutons tenaient sur deux lignes faute de place */
.wsc-header .elementor-button{white-space:nowrap;}

.wsc-brand > .elementor-widget-xpro-site-logo{width:auto;flex:0 0 auto;}
.wsc-brand .xpro-site-logo{
  position:relative;
  width:38px;height:44px;
  background:var(--wsc-red);
  border:2px solid var(--wsc-ink);
  padding:5px 6px;
  transition:transform .18s var(--wsc-snap);
}
.wsc-brand .xpro-site-logo img{
  position:absolute;width:1px;height:1px;
  clip-path:inset(50%);overflow:hidden;
}
.wsc-brand .xpro-site-logo::after{
  content:'';display:block;width:100%;height:100%;
  background:var(--wsc-bg);
  -webkit-mask:url(/wp-content/uploads/wsc/logo-mark.svg) no-repeat center/contain;
          mask:url(/wp-content/uploads/wsc/logo-mark.svg) no-repeat center/contain;
}
.wsc-brand:hover .xpro-site-logo{transform:rotate(-4deg) translateY(-2px);}

.wsc-brand-txt{gap:4px !important;width:auto !important;}
.wsc-brand-txt .elementor-heading-title,
.wsc-brand-txt .elementor-heading-title a{text-decoration:none;color:inherit;}

/* Navigation : pastilles monospace, comme la maquette ──────────── */
.wsc-header .xpro-elementor-horizontal-navbar-nav{gap:4px;}
.wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--wsc-ink);
  padding:7px 10px;
  border:2px solid transparent;
  white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s,
             transform .14s var(--wsc-ease);
}
.wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link:hover{
  background:var(--wsc-ochre);
  border-color:var(--wsc-ink);
  color:var(--wsc-ink);
  transform:translateY(-2px);
}
/* La page lue se signale par un aplat rouge. On couvre la page elle-même
   ET les fiches projet, qui sont des pages enfants : c'est alors l'entrée
   « Projets » qui s'allume. WordPress écrit ces états sous deux graphies
   (tirets et tirets bas selon la classe) — il faut donc les lister toutes,
   sans quoi une fiche projet n'allume rien. */
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-parent > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current_page_parent > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current-page-ancestor > a,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li.current_page_ancestor > a{
  background:var(--wsc-red);
  color:var(--wsc-bg);
  border-color:var(--wsc-ink);
}

/* Le budget de la ligne d'en-tete est desormais traite au § 18.6 :
   huit entrees ne se reglent pas comme sept. */
/* Le voile du tiroir Xpro est dimensionné en `100vw`, unité qui inclut la
   barre de défilement : il dépassait de sa largeur et créait un défilement
   horizontal de 21 px sur toutes les pages. */
.xpro-elementor-horizontal-menu-overlay{
  left:0 !important;right:0 !important;
  width:auto !important;max-width:100% !important;
}

/* Sous 1024 px, Xpro bascule le menu en tiroir : les pastilles
   redeviennent des lignes pleine largeur. */
@media (max-width:1024px){
  /* Elementor donne 100 % à tout conteneur enfant : la marque et les actions
     occupaient chacune toute la ligne et l'en-tête passait sur deux rangs. */
  .wsc-header > .e-con-inner{--flex-wrap:nowrap;flex-wrap:nowrap;}
  .wsc-brand{--width:auto;flex:0 1 auto !important;min-width:0;}
  .wsc-header > .e-con-inner > .e-con:last-child{--width:auto;flex:0 0 auto !important;}

  .wsc-header .xpro-elementor-horizontal-navbar-nav{gap:8px;}
  .wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
    font-size:16px;padding:14px 16px;
    border-color:var(--wsc-ink);background:var(--wsc-surface);
  }
  .wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link:hover{
    transform:none;
  }
}

/* ── 15.2 Rythme bento ───────────────────────────────────────────
   Les largeurs en pourcentage d'Elementor ne déduisent pas la
   gouttière : 64 % + 32 % + 26 px dépassent la ligne, et la rangée
   se disloque. Une vraie grille de six colonnes règle le problème
   à la racine — c'est aussi ce que fait la maquette. Un conteneur
   en pleine largeur ne génère pas de `.e-con-inner` : les deux cas
   sont donc traités. */
.wsc-bento.e-con-full,
.wsc-bento.e-con-boxed > .e-con-inner{
  display:grid !important;
  grid-template-columns:repeat(6,1fr);
  gap:var(--wsc-bento-gap,26px);
  align-items:stretch;
}
.wsc-bento.e-con-full > .e-con,
.wsc-bento.e-con-boxed > .e-con-inner > .e-con{
  width:auto !important;
  grid-column:span var(--wsc-span,2);
}
.wsc-b-2{--wsc-span:2;}
.wsc-b-3{--wsc-span:3;}
.wsc-b-4{--wsc-span:4;}
.wsc-b-6{--wsc-span:6;}

/* La grande fiche respire davantage et adopte un cadrage plus large */
.wsc-proj.wsc-b-4 .wsc-proj-img img,
.wsc-proj.wsc-b-6 .wsc-proj-img img{aspect-ratio:16/9;}
.wsc-proj.wsc-b-4 .wsc-proj-bd{padding:26px 28px 28px !important;}
.wsc-proj.wsc-b-4 .wsc-proj-bd h3.elementor-heading-title{font-size:clamp(24px,2.6vw,32px);}
/* Les fiches d'une même rangée sont à hauteur égale : le lien de fin
   doit rester calé en bas quelle que soit la longueur du résumé. */
.wsc-proj .wsc-proj-bd{flex-grow:1;}
.wsc-proj .wsc-proj-bd > .elementor-widget-button{margin-top:auto;}

@media (max-width:1000px){
  .wsc-bento.e-con-full,
  .wsc-bento.e-con-boxed > .e-con-inner{grid-template-columns:repeat(2,1fr);}
  .wsc-bento.e-con-full > .e-con,
  .wsc-bento.e-con-boxed > .e-con-inner > .e-con{grid-column:span 1;}
  /* Compte impair : la dernière prend la rangée entière plutôt que
     d'y rester seule sur une moitié. */
  .wsc-b-orphan{grid-column:span 2 !important;}
  .wsc-proj.wsc-b-4 .wsc-proj-img img{aspect-ratio:16/10;}
  .wsc-proj.wsc-b-4 .wsc-proj-bd{padding:22px 24px 26px !important;}
}
@media (max-width:720px){
  .wsc-bento.e-con-full,
  .wsc-bento.e-con-boxed > .e-con-inner{grid-template-columns:1fr;}
  .wsc-bento.e-con-full > .e-con,
  .wsc-bento.e-con-boxed > .e-con-inner > .e-con{grid-column:span 1 !important;}
}

/* ── 15.3 Piste de progression des colonnes collantes ─────────────
   Le bloc épinglé annonce l'étape en cours de lecture : numéro en
   grand, intitulé, durée, jauge et pastilles. Le module sert deux
   fois — la démarche en 6 phases sur l'accueil, la chronologie sur
   Découvrir. */
.wsc-track-display{
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch;
  gap:0 !important;padding:0 !important;
  background:var(--wsc-red);
  border:var(--wsc-bd) solid var(--wsc-ink);
  box-shadow:6px 6px 0 var(--wsc-ink);
  flex-wrap:nowrap !important;
}
.wsc-on-dark .wsc-track-display{
  border-color:var(--wsc-bg);
  box-shadow:6px 6px 0 var(--wsc-bg);
}
.wsc-track-num{
  width:auto !important;flex:0 0 auto !important;
  padding:14px 18px !important;justify-content:center;
  border-right:var(--wsc-bd) solid var(--wsc-ink);
  transition:opacity .18s var(--wsc-ease),transform .18s var(--wsc-ease);
}
.wsc-on-dark .wsc-track-num{border-right-color:var(--wsc-bg);}
.wsc-track-num .elementor-heading-title{
  font-size:clamp(40px,4vw,60px);font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--wsc-bg);
  font-variant-numeric:tabular-nums;
}
.wsc-track-cur{
  width:auto !important;flex:1 1 auto !important;min-width:0;
  padding:14px 18px !important;justify-content:center;
  gap:6px !important;
  transition:opacity .18s var(--wsc-ease);
}
.wsc-track-cur .wsc-track-title .elementor-heading-title{
  font-size:18px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.1;color:var(--wsc-bg);
}
.wsc-track-cur .wsc-track-meta .elementor-heading-title{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(244,241,240,.74);
}
/* Court fondu au passage d'une étape à la suivante */
.wsc-track-display.is-swap .wsc-track-num{opacity:0;transform:translateY(-8px);}
.wsc-track-display.is-swap .wsc-track-cur{opacity:0;}

.wsc-track-bar{
  padding:0 !important;
  height:14px;min-height:14px;
  background:var(--wsc-ink);
  border:2px solid var(--wsc-ink);
  overflow:hidden;
  flex-direction:row !important;
  justify-content:flex-start !important;
}
.wsc-on-dark .wsc-track-bar{border-color:var(--wsc-bg);}
/* La progression se regle par `flex-basis`, pas par `width` : Elementor
   pose `flex-basis:var(--flex-basis)` sur tout element, et sur un element
   flexible cette base l'emporte sur la largeur — une largeur posee ici,
   meme en `!important`, restait sans effet. La valeur passe par une
   variable : un `!important` de feuille l'emporterait sur un style en
   ligne, alors qu'une variable en ligne traverse. */
.wsc-track-fill{
  flex-grow:0 !important;flex-shrink:0 !important;
  flex-basis:var(--wsc-fill,0px) !important;
  height:100% !important;min-height:0;
  padding:0 !important;
  background:var(--wsc-ochre);
  transition:flex-basis .35s var(--wsc-ease);
}
.wsc-track-dots{
  flex-direction:row !important;
  gap:8px !important;padding:0 !important;
  flex-wrap:nowrap !important;
}
.wsc-track-dot{
  width:16px !important;height:16px;min-height:16px;
  flex:0 0 16px !important;padding:0 !important;
  border:2px solid rgba(20,16,15,.4);
  background:transparent;
  transition:background .2s,border-color .2s,transform .2s var(--wsc-snap);
}
.wsc-on-dark .wsc-track-dot{border-color:rgba(244,241,240,.42);}
.wsc-track-dot.is-on{
  background:var(--wsc-ochre);
  border-color:var(--wsc-ink);
  transform:rotate(45deg);
}
.wsc-on-dark .wsc-track-dot.is-on{border-color:var(--wsc-bg);}

/* Variante empilée : la chronologie annonce une année et un lieu,
   pas un numéro et un intitulé — l'année mérite toute la largeur. */
.wsc-track--stack{flex-direction:column !important;}
.wsc-track--stack .wsc-track-num{
  border-right:none;
  padding:18px 22px 0 !important;
}
.wsc-track--stack .wsc-track-num .elementor-heading-title{
  font-size:clamp(44px,4.6vw,64px);line-height:.9;
}
.wsc-track--stack .wsc-track-cur{padding:6px 22px 18px !important;}
.wsc-track--stack .wsc-track-title{display:none !important;}
/* Sur fond clair, la jauge se lit mieux creusée en crème */
.wsc-histoire .wsc-track-bar{background:var(--wsc-bg);}

/* La métadonnée est saisie dans chaque étape pour rester modifiable
   depuis l'éditeur ; c'est le bloc épinglé qui l'affiche. */
.wsc-step-meta{display:none !important;}

/* ── 15.4 Étapes pilotées au défilement ─────────────────────────
   Les règles d'aspect sont regroupées plus bas, au § 18.1 : la revue
   d'août a demandé de rehausser le contraste des étapes non lues, ce
   qui a rendu ce bloc caduc. Seule la transition subsiste ici. */
.wsc-js .wsc-step{
  transition:opacity .3s var(--wsc-ease),background-color .3s var(--wsc-ease),
             border-color .3s var(--wsc-ease),box-shadow .3s var(--wsc-ease),
             transform .18s var(--wsc-ease);
}

/* Colonnes empilées : le suivi au défilement n'a plus de sens, il est donc
   éteint. Les étapes doivent alors reprendre leur aspect plein — sans cette
   reprise, elles resteraient toutes à 42 % d'opacité, c'est-à-dire illisibles,
   puisque aucune ne serait jamais désignée comme lue. */
@media (max-width:1024px){
  .wsc-js .wsc-step{opacity:1 !important;transform:none !important;}
  .wsc-js .wsc-on-dark .wsc-step{
    background-color:var(--wsc-bg) !important;
    border-color:var(--wsc-bg) !important;
    box-shadow:4px 4px 0 var(--wsc-red) !important;
  }
  .wsc-js .wsc-on-dark .wsc-step .elementor-heading-title{color:var(--wsc-ink) !important;}
  .wsc-js .wsc-on-dark .wsc-step .elementor-widget-text-editor{color:var(--wsc-muted) !important;}
  .wsc-js .wsc-on-dark .wsc-step .wsc-num .elementor-heading-title{
    background:var(--wsc-red);color:var(--wsc-bg) !important;
  }
  .wsc-js .wsc-histoire .wsc-step.is-on{box-shadow:4px 4px 0 var(--wsc-ink) !important;}
  /* Jauge et pastilles n'ont plus rien à mesurer : on les retire plutôt que
     de laisser une jauge figée à zéro. La chronologie retire aussi son
     bloc d'affichage, l'année étant déjà portée par chaque étape. */
  .wsc-track-bar,.wsc-track-dots{display:none !important;}
  .wsc-track--stack{display:none !important;}
}

/* ── 15.4 bis Bandeau des fiches projet ────────────────────
   Le visuel etait pose a son format d'origine : une photo 4:3 de 1 280 px
   s'affichait en 1 425 × 1 069, soit plus d'une hauteur d'ecran avant
   d'atteindre le premier mot. La maquette en fait une bande large, recadree
   au centre ; sur mobile le cadre se resserre pour que le sujet reste lisible. */
.wsc-fp-photo{line-height:0;}
.wsc-fp-photo img{
  display:block;width:100%;
  aspect-ratio:1160/380;
  object-fit:cover;object-position:center;
}
@media (max-width:720px){
  .wsc-fp-photo img{aspect-ratio:3/2;}
}

/* ── 15.5 Sommaire collant de la page Agir ───────────────────────── */
.wsc-ag-body > .e-con-inner{align-items:flex-start;}
.wsc-ag-nav{align-self:stretch !important;flex:0 0 246px !important;}
/* Le corps prend ce qui reste. Elementor donne 100 % à tout conteneur
   enfant, largeur qui s'ajoute aux 246 px du sommaire et renvoie la
   colonne à la ligne : on la remplace par une base flexible nulle. */
.wsc-ag-main{--width:auto;flex:1 1 0 !important;min-width:0;}
.wsc-ag-lbl .elementor-heading-title{
  display:inline-block;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--wsc-ink);color:var(--wsc-bg);
  padding:8px 11px;
}
/* Le numéro d'ordre est calculé par la feuille : ajouter ou retirer une
   entrée depuis l'éditeur renumérote le sommaire sans rien ressaisir. */
.wsc-ag-list{gap:8px !important;padding:0 !important;counter-reset:wsc-ag;}
.wsc-ag-link{counter-increment:wsc-ag;}
.wsc-ag-link .elementor-heading-title a::before{
  content:counter(wsc-ag,decimal-leading-zero);
  color:var(--wsc-red);flex:0 0 auto;
}
.wsc-ag-link.is-on .elementor-heading-title a::before{color:var(--wsc-ochre);}
.wsc-ag-link .elementor-heading-title a,
.wsc-ag-link .elementor-heading-title{
  display:flex;align-items:baseline;gap:10px;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;
  color:var(--wsc-ink);
  padding:11px 12px;
  border:2px solid var(--wsc-ink);
  background:var(--wsc-surface);
  line-height:1.25;
  transition:background .14s,color .14s,transform .14s var(--wsc-ease),
             box-shadow .14s var(--wsc-ease);
}
.wsc-ag-link .elementor-heading-title a:hover{
  background:var(--wsc-ochre);
  transform:translate(-2px,-2px);
  box-shadow:3px 3px 0 var(--wsc-ink);
}
.wsc-ag-link.is-on .elementor-heading-title a{
  background:var(--wsc-red);color:var(--wsc-bg);
  box-shadow:3px 3px 0 var(--wsc-ink);
}
.wsc-ag-sec{scroll-margin-top:110px;}

@media (max-width:1024px){
  /* Le sommaire redevient une barre horizontale défilante. La base fixe de
     246 px doit être levée, sinon les deux colonnes restent côte à côte et
     le corps se retrouve écrasé à quelques pixels. */
  .wsc-ag-nav{
    flex:0 0 100% !important;
    width:100% !important;
    align-self:auto !important;
    position:sticky;top:78px;z-index:20;
    background:var(--wsc-bg);
    padding:12px 0 !important;
    border-bottom:2px solid var(--wsc-ink);
  }
  .wsc-ag-lbl{display:none !important;}
  .wsc-ag-list{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    padding-bottom:4px !important;
  }
  .wsc-ag-list > .elementor-widget{flex:0 0 auto;width:auto !important;}
  .wsc-ag-link .elementor-heading-title a{white-space:nowrap;}
  .wsc-ag-link .elementor-heading-title a:hover{transform:none;}
  .wsc-ag-cta{display:none !important;}
  .wsc-ag-main{flex:1 1 100% !important;width:100% !important;}

  /* Deux boutons pleins et un menu déroulant ne tiennent pas sur une ligne
     de 375 px : l'en-tete passait à 139 px sur deux rangs. L'appel à don
     reste, l'invitation au partenariat rejoint le tiroir. */
  .wsc-header .elementor-widget-button:last-of-type{display:none;}
}
@media (max-width:560px){
  .wsc-header .elementor-widget-button{display:none;}
}

/* ── 15.6 Cohérence des colonnes collantes ─────────────────────── */
/* Les deux nouvelles sections rejoignent la liste des rangées qui ne
   doivent pas se replier au-delà de la tablette (cf. § « Sections à
   deux colonnes »). */
@media (min-width:1025px){
  /* Elementor pilote le retour à la ligne par la variable `--flex-wrap` :
     redéfinir la seule propriété `flex-wrap` reste sans effet. */
  .wsc-histoire > .e-con-inner,
  .wsc-mission > .e-con-inner,
  .wsc-ag-body > .e-con-inner{--flex-wrap:nowrap;flex-wrap:nowrap;}
  .wsc-histoire > .e-con-inner > .e-con,
  .wsc-mission > .e-con-inner > .e-con,
  .wsc-ag-body > .e-con-inner > .e-con{min-width:0;flex-shrink:1;}
}

/* ═══════════════════════════════════════════════════════════════
   16. FIL D'ARIANE, PAGE CONTACT ET MODALE DES COORDONNÉES
   ═══════════════════════════════════════════════════════════════ */

/* ── 16.1 Fil d'Ariane ───────────────────────────────────────────
   Bandeau d'encre posé sous l'en-tête, sur toutes les pages sauf
   l'accueil. Son contenu est déduit de la hiérarchie des pages :
   une fiche projet affiche donc « Accueil / Nos projets / … » sans
   qu'on ait rien à saisir. */
.wsc-crumb{
  background:var(--wsc-ink);
  border-bottom:var(--wsc-bd) solid var(--wsc-ink);
}
.wsc-crumb-in{
  max-width:1220px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;flex-wrap:wrap;
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(244,241,240,.6);
}
.wsc-crumb-in a{color:var(--wsc-ochre);text-decoration:none;}
.wsc-crumb-in a:hover{text-decoration:underline;}
.wsc-crumb-sep{margin:0 9px;opacity:.5;}
.wsc-crumb-cur{color:var(--wsc-bg);}
@media (max-width:600px){
  .wsc-crumb-in{font-size:10px;padding:10px 20px;}
  .wsc-crumb-sep{margin:0 6px;}
}

/* ── 16.2 Page Contact ───────────────────────────────────────────
   La section n'avait pas de nom : impossible de lui demander de ne
   pas replier ses colonnes. Elle rejoint donc la liste des rangées
   à deux colonnes (§ « Sections à deux colonnes »), le formulaire
   et la colonne de coordonnées reprennent leur place côte à côte,
   et la colonne collante retrouve sa course. */
@media (min-width:1025px){
  .wsc-contact > .e-con-inner{--flex-wrap:nowrap;flex-wrap:nowrap;}
  .wsc-contact > .e-con-inner > .e-con{min-width:0;flex-shrink:1;}
}

/* Carte de coordonnées : étiquette monospace, valeur en gras,
   filet de séparation entre les lignes. */
.wsc-ct-card{padding-bottom:10px !important;}
.wsc-ct-row{
  padding:14px 0 !important;
  gap:6px !important;
  border-bottom:2px solid rgba(20,16,15,.18);
}
.wsc-ct-row:last-child{border-bottom:none;}
.wsc-ct-row .elementor-heading-title{
  font-family:"JetBrains Mono",Consolas,monospace !important;
  font-size:9.5px !important;font-weight:700 !important;
  letter-spacing:.11em !important;text-transform:uppercase !important;
  color:var(--wsc-red) !important;
  line-height:1.2 !important;
}
.wsc-ct-row .elementor-widget-text-editor{
  font-size:13.5px !important;font-weight:600;
  line-height:1.45 !important;color:var(--wsc-ink) !important;
}
.wsc-ct-row a{
  color:var(--wsc-red);text-decoration:none;
  border-bottom:2px solid currentColor;
}

/* Bloc de don : deux actions empilées, pleine largeur */
.wsc-ct-don .elementor-widget-button,
.wsc-ct-don .elementor-button{width:100%;}
.wsc-ct-don .elementor-button{justify-content:center;}

/* ── 16.3 Modale des coordonnées bancaires ───────────────────────
   L'enveloppe est posée par le thème, le contenu vient d'un modèle
   Elementor : les coordonnées restent modifiables à la souris.
   L'attribut `hidden` tient lieu d'état fermé tant que le script
   n'a pas pris la main — sans JavaScript, le bouton reste un lien
   vers la page Soutenir et la modale ne s'affiche jamais vide. */
.wsc-don-modal[hidden]{display:none;}
.wsc-don-modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .2s var(--wsc-ease),visibility .2s;
}
.wsc-don-modal.is-open{opacity:1;visibility:visible;}
.wsc-don-veil{position:absolute;inset:0;background:rgba(20,16,15,.78);}
.wsc-don-box{
  position:relative;
  background:var(--wsc-bg);
  width:100%;max-width:600px;max-height:88vh;overflow-y:auto;
  border:var(--wsc-bd) solid var(--wsc-ink);
  box-shadow:12px 12px 0 var(--wsc-red);
  transform:translate(6px,6px);
  transition:transform .22s var(--wsc-snap);
}
.wsc-don-modal.is-open .wsc-don-box{transform:none;}
.wsc-don-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--wsc-ink);
  background:var(--wsc-bg);color:var(--wsc-ink);
  box-shadow:3px 3px 0 var(--wsc-ink);
  transition:background .14s,color .14s,transform .14s var(--wsc-ease);
}
.wsc-don-close:hover{background:var(--wsc-red);color:var(--wsc-bg);}
.wsc-don-close:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--wsc-ink);}
.wsc-don-close svg{width:14px;height:14px;}

.wsc-don-hd{border-bottom:var(--wsc-bd) solid var(--wsc-ink);}
.wsc-don-hd .elementor-heading-title{padding-right:44px;}

/* Relevé : étiquette de largeur fixe, valeur qui prend le reste et
   se coupe proprement si l'IBAN est long. */
.wsc-don-bank .wsc-bank-row{
  align-items:flex-start;
  padding:14px 0 !important;
  border-bottom:2px solid rgba(20,16,15,.14);
}
.wsc-don-bank .wsc-bank-row:last-child{border-bottom:none;}
.wsc-bank-dt{
  width:108px !important;flex:0 0 108px !important;
  padding-top:3px !important;
}
.wsc-bank-dt p{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  line-height:1.3;margin:0;
}
.wsc-bank-dd{flex:1 1 auto !important;width:auto !important;min-width:0;}
.wsc-bank-dd p{font-weight:600;line-height:1.45;margin:0;word-break:break-word;}
.wsc-bank-mono p{
  font-family:"JetBrains Mono",Consolas,monospace;
  font-size:13.5px;letter-spacing:.02em;
}
.wsc-don-note{border-top:var(--wsc-bd) solid var(--wsc-ink);}
.wsc-don-note strong{font-weight:800;}
.wsc-don-note a{color:inherit;}
.wsc-don-foot{border-top:var(--wsc-bd) solid var(--wsc-ink);}
.wsc-btn-ghost .elementor-button{border-color:var(--wsc-ink) !important;}

@media (max-width:560px){
  .wsc-don-modal{padding:14px;}
  .wsc-don-box{box-shadow:6px 6px 0 var(--wsc-red);}
  .wsc-don-bank .wsc-bank-row{flex-wrap:wrap;}
  .wsc-bank-dt{width:100% !important;flex:0 0 100% !important;}
}

/* ═══════════════════════════════════════════════════════════════
   17. DEMANDES DU CLIENT — TYPOGRAPHIE, GRIS, MARQUE
   ═══════════════════════════════════════════════════════════════ */

/* ── 17.1 Une seule police : Archivo ─────────────────────────────
   Le client a tranché pour une famille unique, choisie parmi celles
   déjà employées. Des trois, Archivo est la seule qui tienne à la
   fois en grand titre et en texte courant : JetBrains Mono est une
   machine à écrire, Bodoni Moda une didone d'affiche.

   C'est aussi une police libre, donc identique chez tous les
   visiteurs et sans licence à acquérir — ce qui n'était pas le cas
   d'Avenir Next, absente de Windows et d'Android. Elementor la sert
   depuis Google Fonts dès lors qu'elle figure dans les réglages, il
   n'y a donc aucun fichier à héberger ici. */
:root{
  --wsc-sans:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* La monospace des étiquettes et la didone de l'accueil ont cédé la
   place : tout ce qui portait un nom de police porte le même. */
body,
button, input, select, textarea,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button, .ast-button, .wpforms-submit,
.wpforms-container .wpforms-field-label,
.wpforms-container input, .wpforms-container textarea, .wpforms-container select,
.wsc-eyebrow .elementor-heading-title,
.wsc-crumb-in,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link,
.wsc-ag-link .elementor-heading-title a,
.wsc-ag-lbl .elementor-heading-title,
.wsc-track-cur .wsc-track-meta .elementor-heading-title,
.wsc-bank-dt p, .wsc-bank-mono p,
.wsc-fig i, .wsc-serif,
.wsc-ct-row .elementor-heading-title,
.wsc-num .elementor-heading-title{
  font-family:var(--wsc-sans) !important;
}

/* Les titres et les éléments d'interface en gras franc. Le corps de
   texte reste un cran en dessous — du gras sur un paragraphe entier
   se lit mal, et la hiérarchie disparaîtrait. */
.elementor-widget-heading .elementor-heading-title,
.elementor-button, .ast-button, .wpforms-submit,
.wsc-eyebrow .elementor-heading-title,
.wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link,
.wsc-ag-link .elementor-heading-title a,
.wsc-crumb-in{
  font-weight:700 !important;
}

/* L'accent didone de l'accueil disparaît avec le reste : une seule
   police sur tout le site, c'est la demande. */
.wsc-serif{
  font-style:normal;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.03em;
}

/* ── 17.2 Plus d'inclinaison ─────────────────────────────────────
   La signature du hero et la bande de chiffres reprennent l'horizontale.
   La bande garde son débord latéral : c'est lui qui la fait passer
   d'un bord à l'autre de la fenêtre, indépendamment de la rotation. */
.wsc-tilt-a,.wsc-tilt-b{transform:none !important;}
.wsc-hero-l3 .elementor-heading-title{
  margin-top:-.06em !important;
  margin-left:0 !important;
  text-shadow:none;
}
.wsc-marquee{
  transform:translateY(-50%) !important;
  width:104%;margin-left:-2%;
}

/* ── 17.3 Le noir cède la place au gris de la charte ──────────────
   #5E5E5E est le gris de la baseline du logo officiel. Il remplace
   l'encre presque noire sur les aplats, les bordures et les ombres. */
:root{
  --wsc-ink:#5E5E5E;
  /* Le texte secondaire doit rester distinct du gris principal sans
     tomber sous le seuil de lisibilité. Mesure faite sur le fond
     crème : #8A8A8A n'atteint que 3,07:1 et échoue au niveau AA ;
     #6F6F6F frôle le seuil à 4,47:1. #6B6B6B tient à 4,74:1 tout en
     restant visiblement plus clair que l'encre. */
  --wsc-muted:#6B6B6B;
}
/* Regle retiree : elle forcait le creme dans TOUTE section sombre, y compris
   dans les briques a fond clair qu'elle contient — d'ou la carte « Financer un
   projet » dont le texte avait disparu. Chaque widget porte maintenant la
   couleur adaptee a son propre fond. */

/* ── 17.4 La marque officielle ───────────────────────────────────
   Le fichier fourni est le verrouillage complet : calligraphie,
   « WE SPEAK CITIZEN » et baseline. Dans un en-tête de 78 px, la
   baseline tomberait à trois pixels de haut, donc illisible. On
   n'affiche donc que la calligraphie, découpée du fichier officiel,
   et les deux lignes de texte restent composées dans la police du
   site — à leur taille, elles se lisent. */
.wsc-brand .xpro-site-logo{
  width:auto;height:48px;
  background:none;
  border:0;
  padding:0;
  display:flex;align-items:center;
  transition:transform .18s var(--wsc-snap);
}
.wsc-brand .xpro-site-logo::after{content:none;}
.wsc-brand .xpro-site-logo img{
  position:static;
  width:auto !important;height:48px !important;
  clip-path:none;overflow:visible;
  display:block;
}
.wsc-brand:hover .xpro-site-logo{transform:translateY(-2px);}

@media (max-width:1024px){
  .wsc-brand .xpro-site-logo,
  .wsc-brand .xpro-site-logo img{height:42px !important;}
}

/* ── 17.5 La signature du hero ───────────────────────────────────
   Réduite d'un tiers à la demande du client, et rendue sensible aux
   largeurs : une valeur fixe de 102 px était ingérable sur un
   téléphone. L'interligne se resserre à mesure que le corps grandit,
   sinon les trois lignes se décollent les unes des autres. */
/* Pas de `max-width` en `ch` sur le conteneur : l'unite se calcule sur la
   taille de police de l'element qui la porte, et le conteneur est reste a
   16 px — 20ch y valent 183 px, pas la largeur du titre. Les trois lignes
   sont de toute facon des titres distincts, rien n'a besoin d'etre borne. */
.wsc-hero-title .elementor-heading-title{line-height:.95;}

/* ═══════════════════════════════════════════════════════════════
   18. REVUE CLIENT — AOÛT 2026
   ═══════════════════════════════════════════════════════════════ */

/* ── 18.1 Contraste des étapes non lues ──────────────────────────
   Les étapes en attente étaient atténuées par l'opacité : 42 % sur
   fond gris, 46 % sur fond crème. Mesuré, cela donne 2,39:1 et
   1,95:1 — très loin des 4,5:1 exigés au niveau AA. Même à 85 %
   d'opacité, la version claire n'atteint toujours pas le seuil.

   L'atténuation du texte est donc abandonnée : c'est le remplissage
   de l'étape lue qui porte le signal, pas l'effacement des autres.
   Le contraste remonte à 5,9:1 sur fond gris et 5,77:1 sur crème. */
.wsc-js .wsc-step{opacity:1 !important;}

.wsc-js .wsc-on-dark .wsc-step{
  background-color:rgba(244,241,240,.07) !important;
  border-color:rgba(244,241,240,.32) !important;
}
.wsc-js .wsc-on-dark .wsc-step .elementor-heading-title{color:var(--wsc-bg) !important;}
.wsc-js .wsc-on-dark .wsc-step .elementor-widget-text-editor{color:var(--wsc-bg) !important;}

/* L'étape lue reste franchement distincte : aplat crème plein,
   texte encre, ombre rouge. */
.wsc-js .wsc-on-dark .wsc-step.is-on{
  background-color:var(--wsc-bg) !important;
  border-color:var(--wsc-bg) !important;
  box-shadow:6px 6px 0 var(--wsc-red) !important;
}
.wsc-js .wsc-on-dark .wsc-step.is-on .elementor-heading-title{color:var(--wsc-ink) !important;}
.wsc-js .wsc-on-dark .wsc-step.is-on .elementor-widget-text-editor{color:var(--wsc-muted) !important;}

/* Chronologie sur fond clair : même principe, l'ombre et le décalage
   signalent l'étape lue sans effacer les autres. */
.wsc-js .wsc-histoire .wsc-step{opacity:1 !important;}
.wsc-js .wsc-histoire .wsc-step.is-on{
  box-shadow:6px 6px 0 var(--wsc-red) !important;
  transform:translate(-3px,-3px);
}

/* ── 18.2 Les régions ne sont pas des boutons ────────────────────
   Bordure et aplat leur donnaient l'apparence de boutons cliquables
   alors qu'elles ne mènent nulle part. On les ramène à ce qu'elles
   sont : une énumération, séparée par des points médians. */
.wsc-chips .elementor-icon-list-items{
  gap:0 !important;
  align-items:baseline;
}
.wsc-chips .elementor-icon-list-item{
  border:0 !important;
  background:none !important;
  padding:0 !important;
}
.wsc-chips .elementor-icon-list-item:not(:last-child)::after{
  content:'·';
  margin:0 10px;
  opacity:.5;
}
.wsc-chips .elementor-icon-list-text{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}

/* ── 18.3 La page lue, signalée dans le pied de page ─────────────
   Le pied de page n'avait aucun indicateur : ses liens passaient en
   doré au survol, et rien d'autre. Le lien doré aperçu sur les
   captures était donc simplement celui sous le curseur. */
.wsc-footer .wsc-pied-actif > a,
.wsc-footer .wsc-pied-actif .elementor-icon-list-text{
  color:var(--wsc-ochre) !important;
  font-weight:700;
}
.wsc-footer .wsc-pied-actif{position:relative;}
.wsc-footer .wsc-pied-actif > a::before{
  content:'';
  position:absolute;left:-12px;top:.62em;
  width:5px;height:5px;
  background:var(--wsc-ochre);
}

/* ── 18.4 « Fait racine » conclut, il ne concurrence plus ────────
   Les deux lignes se disputaient l'attention : même graisse, même
   corps, et l'italique en plus. L'italique est déjà retiré ; la
   troisième ligne descend maintenant sous les deux premières pour
   devenir la chute plutôt qu'un second titre. Le rouge suffit à la
   distinguer. */
.wsc-hero-l3 .elementor-heading-title{
  color:var(--wsc-red) !important;
  letter-spacing:-.02em;
}

/* ── 18.5 Contraste des aplats ocre et des fonds gris ───────────
   Effet de bord de la demande « plus de noir » : partout où l'encre
   presque noire servait d'ancre foncée, le contraste a chuté.
   Deux familles de cas, mesurées puis corrigées.

   1. Texte sombre SUR ocre — #5E5E5E n'y donne que 3,04:1, sous le
      seuil AA de 4,5 pour du texte de 11 px. Un gris plus dense le
      rétablit à 4,93:1, en restant franchement gris. */
.wsc-eyebrow--ochre .elementor-heading-title{color:#3F3F3F !important;}

/*   2. Texte ocre SUR le gris — 3,04:1 également. L'ocre de la charte
      est trop sombre pour du petit texte sur ce fond ; une teinte
      plus pâle de la même famille atteint 4,65:1 sans quitter
      l'accent doré. */
.wsc-on-dark .wsc-eyebrow--ochre .elementor-heading-title{color:#3F3F3F !important;}
/* Les intitulés de colonne du pied de page uniquement : viser aussi
   les étiquettes de la citation était une erreur, elles ont leur
   propre aplat ocre et l'ocre pâle y devenait invisible. */
.wsc-footer .elementor-widget-heading:not(.wsc-eyebrow) .elementor-heading-title{color:#F5D9A0 !important;}

/* Les liens du pied de page étaient à 2,53:1 sur le gris. */
.wsc-footer .elementor-icon-list-text{color:#E6E1DF !important;}
.wsc-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text{color:#F5D9A0 !important;}

/* La pastille de numéro et la piste, dont l'aplat vient de la feuille
   et non des réglages du widget. */
.wsc-track-title .elementor-heading-title,
.wsc-track-num .elementor-heading-title{color:var(--wsc-bg) !important;}
.wsc-track-meta .elementor-heading-title{color:#F0E4E2 !important;}

/* La page lue dans le pied de page : l'ocre sur le gris ne donnait
   que 3,3:1. Le crème gras porte le signal, la pastille ocre le
   souligne sans avoir à être lue. */
.wsc-footer .wsc-pied-actif > a .elementor-icon-list-text{
  color:var(--wsc-bg) !important;
  font-weight:700;
}

/* ── 18.6 L'en-tête à huit entrées ───────────────────────────────
   L'ajout de « Voyages Apprenants » porte le menu à huit entrées.
   À l'ancienne échelle, elles se retrouvaient comprimées entre la
   marque et les deux boutons.

   Trois leviers, dans cet ordre : la ligne s'élargit, les entrées et
   les boutons se resserrent, et le menu reçoit l'espace restant au
   lieu d'être coincé entre deux blocs fixes. */
@media (min-width:1025px){
  /* La ligne d'en-tête peut être plus large que le corps du site :
     rien ne l'oblige à s'aligner sur la mesure du texte. */
  .wsc-header > .e-con-inner{max-width:1340px;}

  /* Le menu prend ce qui reste, et se cale à droite sans écraser
     ses entrées. La marque et les actions gardent leur mesure. */
  .wsc-header > .e-con-inner > .e-con:last-child{
    flex:1 1 auto !important;
    justify-content:flex-end;
    gap:18px !important;
  }
  .wsc-header .elementor-widget-xpro-horizontal-menu{
    flex:1 1 auto;
    min-width:0;
  }
  .wsc-header .xpro-elementor-horizontal-navbar-nav{
    justify-content:flex-end;
    gap:2px;
  }
}

/* Entrées resserrées : le corps descend d'un cran et les marges
   latérales se réduisent, ce qui rend une centaine de pixels. */
.wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
  font-size:10.5px;
  padding:6px 8px;
  letter-spacing:.01em;
}

/* Boutons plus discrets : ce sont des rappels, pas le sujet de la
   ligne. Ils restent sur une seule ligne. */
.wsc-header .elementor-button{
  font-size:10px !important;
  padding:9px 12px !important;
  letter-spacing:.05em;
}

@media (max-width:1400px){
  .wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
    font-size:10px;padding:6px 6px;
  }
}

/* ── 18.7 L'équipe opérationnelle ────────────────────────────────
   Quatre fiches par rangée sur écran confortable, deux sur tablette,
   une sur téléphone. Les largeurs sont posées en pourcentage dans les
   réglages ; ici on ne règle que le cadre du portrait et le corps.

   Les portraits n'ayant pas été transmis, chaque fiche porte un cadre
   d'attente à la proportion définitive : la mise en page est donc déjà
   celle du résultat final, et déposer les photos ne déplacera rien. */
.wsc-membre{overflow:hidden;padding:0 !important;}
.wsc-membre-photo{
  aspect-ratio:4/5;
  min-height:0 !important;
  border-bottom:var(--wsc-bd) solid var(--wsc-ink);
  position:relative;
}
/* Repère visuel discret : on doit voir au premier coup d'œil qu'il
   manque une image, sans que cela ressemble à une erreur. */
.wsc-membre-photo::after{
  content:'Portrait à venir';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#8A7F6B;
}
.wsc-membre-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  position:relative;z-index:1;
}
.wsc-membre-bd .elementor-heading-title{line-height:1.15;}
.wsc-membre-role p{line-height:1.4;margin:0;}

@media (max-width:1000px){
  .wsc-equipe > .e-con{--width:48% !important;width:48% !important;}
}
@media (max-width:600px){
  .wsc-equipe > .e-con{--width:100% !important;width:100% !important;}
}

/* ── 18.8 Le bandeau d'une fiche projet ouvre sa vidéo ───────────
   Le bandeau devient le déclencheur, mais rien ne le dit tant qu'on
   n'a pas cliqué. Il lui faut donc trois signaux : un voile qui
   assombrit légèrement l'image, un bouton de lecture, et une mention
   explicite — l'icône seule se confond avec un ornement.

   Ces règles ne s'appliquent qu'aux fiches dotées d'une vidéo :
   la classe est posée par le script, jamais dans le contenu. */
.wsc-fp-video{
  position:relative;
  cursor:pointer;
  display:block;
}
.wsc-fp-video::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(20,16,15,.12),rgba(20,16,15,.38));
  transition:background .2s var(--wsc-ease);
}
.wsc-fp-video::after{
  content:'▶  Voir la vidéo du projet';
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  padding:15px 24px;
  background:var(--wsc-red);
  color:var(--wsc-bg);
  border:var(--wsc-bd) solid var(--wsc-bg);
  box-shadow:6px 6px 0 rgba(20,16,15,.35);
  font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;
  transition:transform .16s var(--wsc-ease),box-shadow .16s var(--wsc-ease);
}
.wsc-fp-video:hover::before{background:linear-gradient(rgba(20,16,15,.2),rgba(20,16,15,.5));}
.wsc-fp-video:hover::after{
  transform:translate(-50%,-50%) translate(-3px,-3px);
  box-shadow:9px 9px 0 rgba(20,16,15,.35);
}
.wsc-fp-video:focus-visible{outline:3px solid var(--wsc-ochre);outline-offset:-6px;}

/* Une fois le lecteur en place, l'habillage n'a plus lieu d'être. */
.wsc-fp-video[data-wsc-live="1"]::before,
.wsc-fp-video[data-wsc-live="1"]::after{content:none;}
.wsc-fp-video[data-wsc-live="1"]{cursor:default;aspect-ratio:16/9;}
.wsc-fp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

@media (max-width:600px){
  .wsc-fp-video::after{font-size:10px;padding:12px 16px;}
}

/* ── 18.9 Ombres portées des briques ─────────────────────────────
   Les variantes d'ombre étaient déclarées à la même spécificité que
   la règle de base, et un palier de largeur posé plus bas dans la
   feuille reprenait la main : une brique claire posée sur un fond
   sombre se retrouvait avec une ombre grise, donc invisible.

   Les variantes sont donc réaffirmées ici, en fin de feuille, avec
   leur point de rupture propre. L'ombre d'une brique claire doit
   contraster avec le fond qui la porte, jamais s'y confondre. */
.wsc-tile--shadow-cream{box-shadow:6px 6px 0 var(--wsc-bg);}
.wsc-tile--shadow-red{box-shadow:6px 6px 0 var(--wsc-red);}
.wsc-tile--shadow-ochre{box-shadow:6px 6px 0 var(--wsc-ochre);}

.wsc-tile--shadow-cream.wsc-tile--hover:hover{box-shadow:10px 10px 0 var(--wsc-bg);}
.wsc-tile--shadow-red.wsc-tile--hover:hover{box-shadow:10px 10px 0 var(--wsc-red);}
.wsc-tile--shadow-ochre.wsc-tile--hover:hover{box-shadow:10px 10px 0 var(--wsc-ochre);}

@media (max-width:767px){
  .wsc-tile--shadow-cream{box-shadow:4px 4px 0 var(--wsc-bg);}
  .wsc-tile--shadow-red{box-shadow:4px 4px 0 var(--wsc-red);}
  .wsc-tile--shadow-ochre{box-shadow:4px 4px 0 var(--wsc-ochre);}
}

/* ── 18.10 Le relevé bancaire sans balise de paragraphe ────────
   Elementor n'enveloppe le contenu d'un widget « éditeur de texte »
   dans un <p> que si la saisie en contenait un. Les lignes du relevé
   sont des chaînes simples : elles sortent nues dans le conteneur du
   widget, et toutes les règles écrites sur `.wsc-bank-dt p` ou
   `.wsc-bank-mono p` restaient donc lettre morte — étiquettes et
   chiffres retombaient au style courant. Le défaut ne se voyait pas
   tant que les valeurs affichaient « À compléter » ; il se voit dès
   qu'un IBAN s'y trouve. Le balisage optimisé d'Elementor supprime
   en outre le `div.elementor-widget-container` : le texte est fils
   direct du widget. On vise donc les deux formes.

   Les chiffres passent en écriture tabulaire : dans une police
   proportionnelle le 1 est plus étroit que les autres, et un numéro
   de compte s'en trouve visuellement déformé. */
.wsc-bank-dt.elementor-widget-text-editor,
.wsc-bank-dt .elementor-widget-container{
  font-family:var(--wsc-sans);
  font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  line-height:1.3;
}
.wsc-bank-dd.elementor-widget-text-editor,
.wsc-bank-dd .elementor-widget-container{
  font-family:var(--wsc-sans);
  font-weight:600;line-height:1.45;
  word-break:break-word;
}
.wsc-bank-mono.elementor-widget-text-editor,
.wsc-bank-mono .elementor-widget-container{
  font-size:13.5px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}

/* ── 18.11 Point de fuite d'une photographie recadrée ──────────
   Une bannière de fiche projet est une bande très allongée (1160/380) :
   d'une photographie au format 3/2, elle ne retient qu'une tranche de
   la moitié de la hauteur. Centrée, cette tranche coupe le haut des
   visages sur la photo de Tawesna. La remonter d'un cran conserve les
   visages entiers sans perdre les mains, qui portent le mouvement.
   Le recadrage a été comparé à 50 %, 35 % et 20 % avant d'arbitrer. */
.wsc-cadrage-haut img{object-position:50% 35% !important;}

/* ── 18.12 L'en-tête entre 1 025 et 1 440 px ──────────────────
   Huit entrées, deux boutons et la marque ne tiennent sur une ligne
   qu'au-delà d'environ 1 325 px. En dessous, la liste déborde ; comme
   elle est alignée à droite, le débordement s'échappe vers la GAUCHE
   et les premières entrées passent par-dessus le logo. C'est le
   défaut signalé : « Accueil » et « Découvrir » sous la marque.

   Le composant Xpro n'offre que deux seuils, tablette ou mobile : son
   menu tiroir ne s'ouvre qu'à 1 024 px. Toute la bande intermédiaire
   est donc traitée ici, en trois paliers. Chacun rend de la place là
   où elle coûte le moins, et jamais sur le corps du texte : les liens
   sont déjà à 10 px, les réduire les rendrait illisibles.

   Les seuils sont pris avec du mou. Un réglage au pixel près tiendrait
   sur cette machine et se casserait ailleurs, au moindre écart de
   rendu des polices ; chaque palier garde donc au moins la largeur
   d'une entrée de menu en réserve. */

/* Palier 1 — l'espacement se resserre, à toutes les largeurs de bureau.
   Mesure faite : même à 1 440 px l'en-tête d'origine ne disposait que de
   8 px de réserve, parce que le corps des liens grandit lui aussi avec
   la fenêtre. Le réglage n'est donc pas réservé aux petites largeurs :
   il rend une centaine de pixels partout, pour un écart visuel de
   quatre pixels par lien. */
@media (min-width:1025px){
  .wsc-header{padding-left:16px !important;padding-right:16px !important;}
  .wsc-header > .e-con-inner{gap:0 18px !important;}
  .wsc-header .xpro-elementor-horizontal-navbar-nav{gap:0 !important;}
  .wsc-header .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link{
    padding-left:4px !important;padding-right:4px !important;
  }
  .wsc-header .elementor-button{padding-left:9px !important;padding-right:9px !important;}
}

/* Palier 2 — le second appel à l'action s'efface. Il reste présent
   dans le pied de page et sur chaque page ; le don, lui, ne bouge pas. */
@media (min-width:1025px) and (max-width:1319px){
  .wsc-header .wsc-h-cta2{display:none !important;}
}

/* Palier 3 — seule la calligraphie subsiste. Ce qui disparaît n'est
   que la répétition écrite du sigle, et cela libère 128 px d'un coup :
   la marge repasse au-dessus de 60 px jusqu'à 1 025 px. */
@media (min-width:1025px) and (max-width:1159px){
  .wsc-header .wsc-brand-txt{display:none !important;}
}

/* ── 18.13 Les logos des partenaires ────────────────────────
   Neuf logos d'origines différentes, aux proportions qui vont du carré
   au format 5:1. Chacun est posé sur une plaque blanche plutôt que
   directement sur le beige de la tuile : la plupart des chartes
   graphiques — celle de la GIZ notamment — imposent un fond neutre, et
   cela réunit sous une même forme des fichiers dont certains sont
   transparents et d'autres non.

   Le `max-width` n'est pas décoratif, il est structurel. Sans lui, la
   largeur naturelle du fichier — 591 px pour SOFAC — devient la largeur
   minimale de l'image, donc de la tuile : la rangée se disloquait, une
   tuile à 781 px à côté d'une à 378. Une hauteur maximale seule n'y
   suffit pas : elle ne contraint pas le calcul de largeur minimale. */
.wsc-logo-plaque{
  min-height:96px;
  align-items:center !important;
  border:2px solid rgba(20,16,15,.10);
  margin-bottom:4px;
  flex-wrap:nowrap !important;
  min-width:0;
}
.wsc-logo-plaque > .elementor-widget-image{
  width:auto !important;
  min-width:0;
  flex:0 1 auto;
}
.wsc-logo img{
  width:auto;height:auto;
  max-height:56px;
  max-width:190px;
  object-fit:contain;
  display:block;
}
/* Deux logos dans la même plaque — AFD et GERES financent ensemble :
   un filet les sépare sans les hiérarchiser. */
.wsc-logo-plaque > .elementor-widget-image + .elementor-widget-image{
  border-left:2px solid rgba(20,16,15,.12);
  padding-left:16px;
}
.wsc-logo-plaque > .elementor-widget-image + .elementor-widget-image img{
  max-height:48px;max-width:120px;
}

@media (max-width:767px){
  .wsc-logo-plaque{min-height:72px;}
  .wsc-logo img{max-height:46px;max-width:150px;}
}

/* Les logos quasi carrés — bloc-marque de la République, Institut
   français, SES — perdent leur ligne de signature s'ils sont bornes à
   la même hauteur que les logos allongés : à 56 px de haut, le
   « Liberté Égalité Fraternité » tombe sous trois pixels. On leur
   accorde donc plus de hauteur et moins de largeur, ce qui égalise le
   poids visuel plutôt que l'encombrement. */
.wsc-logo--haut img{max-height:74px;max-width:150px;}
@media (max-width:767px){.wsc-logo--haut img{max-height:62px;}}

/* ── 18.14 L'équipe, par rangs ─────────────────────────────
   Treize fiches alignées sans distinction ne disaient rien de
   l'organisation. Quatre intertitres les regroupent désormais :
   présidence, direction, programmes et projets, médiation culturelle.

   Les fiches gardent toutes le même format. C'est un choix : faire
   grossir la carte du président aurait brisé la grille et imposé un
   second cadrage photo. La hiérarchie passe par l'ordre et par le
   titre de rang, pas par la taille — le procédé tient quel que soit le
   nombre de personnes dans chaque rang.

   L'étiquette occupe toute la largeur : dans une rangée qui se replie,
   c'est ce qui force le retour à la ligne et ouvre proprement le rang. */
.wsc-equipe-rang{
  width:100% !important;
  flex:0 0 100% !important;
  padding:22px 0 2px !important;
  border-top:2px solid rgba(20,16,15,.14);
  margin-top:14px;
}
.wsc-equipe > .wsc-equipe-rang:first-child{
  border-top:0;margin-top:0;padding-top:0 !important;
}
.wsc-equipe-rang .elementor-heading-title{line-height:1.2;}

@media (max-width:767px){
  .wsc-equipe-rang{padding-top:18px !important;margin-top:10px;}
}