/*
Theme Name:   fcpe-2026
Theme URI:    https://fcpe-pensio.ch
Description:  Theme enfant de GeneratePress pour le site de la Fondation collective FCPE-Pensio. Habillage "Encre & orange" 2026. Ne contient que style.css et functions.php : aucun gabarit du parent n'est copie, une mise a jour de GeneratePress ne peut donc pas le desynchroniser.
Author:       allea SA
Template:     generatepress
Version:      1.0.3
Requires PHP: 7.4
Text Domain:  fcpe-2026
*/

/* ==========================================================================
   Les COULEURS et la TYPOGRAPHIE ne sont pas dans ce fichier : elles vivent
   dans Personnalisation -> Couleurs (jetons globaux GeneratePress) et
   Personnalisation -> Typographie. Ces reglages sont stockes dans l'option
   generate_settings, partagee entre le theme parent et le theme enfant : ils
   survivent au changement de theme.
   ========================================================================== */

/* GeneratePress Site CSS */ /* Box shadow */
.box-shadow {
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.3);
}
.left-box-shadow {
	box-shadow: -5px 10px 36px -10px rgba(0,0,0,0.2);
}

/* Sidebar */
.inside-right-sidebar ul.wp-block-categories-list {
	display: flex;
	flex-direction: column;
	row-gap: 0.3em;
	list-style: none;
	margin-left: 0.1em;
	margin-bottom: 0;
}

.inside-right-sidebar ul.wp-block-categories-list li a {
	color: var(--contrast);
}

.inside-right-sidebar ul.wp-block-categories-list li a:hover {
	color: var(--base);
}

@media (max-width: 768px) {
	.sidebar.is-right-sidebar {
		margin-top: 60px;
	}
} /* End GeneratePress Site CSS */


/* ==========================================================================
   FCPE-PENSIO -- HABILLAGE " ENCRE & ORANGE " (08.2026)
   --------------------------------------------------------------------------
   Pour revenir en arriere : supprimer tout ce qui suit le marqueur
   " End GeneratePress Site CSS " ci-dessus.

   Les COULEURS et la TYPOGRAPHIE ne sont pas ici : elles vivent dans
   Personnalisation -> Couleurs (jetons globaux GeneratePress) et
   Personnalisation -> Typographie. C'est leur bon endroit -- GeneratePress et
   GenerateBlocks n'ecrivent aucune couleur en dur, tout passe par les jetons.
   Ce fichier ne contient que ce que les reglages natifs ne savent pas faire.

   (!) Les classes .gb-container-* et .gb-headline-* sont des HACHAGES generes
   par GenerateBlocks. Elles changent si le bloc correspondant est reconstruit.
   La liste des blocs vises est tenue a jour dans CLAUDE.md.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. JETONS DE COMPOSANT
   -------------------------------------------------------------------------- */

:root{
  --fcpe-ink:#0B1B2C;            /* = --contrast   */
  --fcpe-nav:#12293F;            /* = --contrast-2 */
  --fcpe-muted:#5E7186;          /* texte secondaire sur clair */

  /* Echelle orange. L'orange de marque #F49635 ne fait que 2,5:1 sur fond
     clair : il reste reserve aux aplats et aux fonds sombres. Sur clair on
     descend en teinte pour rester lisible. */
  --fcpe-amber:#F49635;          /* aplats, texte sur encre    7,1:1 */
  --fcpe-amber-600:#D07B1F;      /* survol des aplats                */
  --fcpe-amber-700:#B8681A;      /* gros chiffres sur clair    3,9:1 */
  --fcpe-amber-800:#A85C14;      /* petit texte accent/clair   4,6:1 */

  --fcpe-line:rgba(11,27,44,.11);
  --fcpe-line-dark:rgba(255,255,255,.15);

  --fcpe-shadow:0 1px 2px rgba(11,27,44,.05), 0 10px 26px -14px rgba(11,27,44,.24);
  --fcpe-shadow-h:0 2px 5px rgba(11,27,44,.07), 0 22px 44px -18px rgba(11,27,44,.32);

  --fcpe-radius:14px;
  --fcpe-ease:cubic-bezier(.22,.61,.36,1);
}


/* --------------------------------------------------------------------------
   2. EN-TETE ET NAVIGATION
   L'en-tete est transparent au-dessus du hero (GP Premium, .header-wrap).
   On ne touche pas a ce mecanisme.
   -------------------------------------------------------------------------- */

.inside-header{ padding:16px 40px; }

/* 335 px de logo etait trop imposant pour la hauteur de barre. */
.site-header .header-image{ width:250px; }

/* Etat colle : fond franc + ombre, pour se detacher du contenu qui defile. */
.sticky-enabled .main-navigation.is_stuck,
.main-navigation.navigation-stick{
  background-color:var(--fcpe-nav);
  box-shadow:0 10px 30px -16px rgba(0,0,0,.7);
}

/* Soulignement anime. Desktop seulement : sous 1231 px GeneratePress bascule
   en menu lateral (cf. @media max-width:1230px de generate-style). */
@media (min-width:1231px){
  .main-navigation .main-nav > ul > li > a{ position:relative; }
  .main-navigation .main-nav > ul > li > a::after{
    content:"";
    position:absolute; left:16px; right:16px; bottom:10px; height:2px;
    background:var(--fcpe-amber);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .26s var(--fcpe-ease);
  }
  .main-navigation .main-nav > ul > li:hover > a::after,
  .main-navigation .main-nav > ul > li.sfHover > a::after,
  .main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after{
    transform:scaleX(1);
  }
  /* pas de soulignement sous le selecteur de langue */
  .main-navigation .main-nav > ul > li.wpml-ls-item > a::after{ display:none; }
}

/* Sous-menu : GeneratePress le sert en gris clair #eaeaea / texte #515151,
   seul ilot clair d'une navigation sombre. */
.main-navigation ul ul{
  background-color:#173553;
  border-top:2px solid var(--fcpe-amber);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.65);
  padding:6px 0;
}
.main-navigation .main-nav ul ul li a{
  color:#DCE4EC;
  text-transform:none;
  letter-spacing:.01em;
  font-size:15px;
}
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a{
  color:var(--fcpe-ink);
  background-color:var(--fcpe-amber);
}
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a{
  color:var(--fcpe-amber);
  background-color:transparent;
}

/* Panneau lateral mobile */
.slideout-navigation{ background-color:var(--fcpe-ink); }

/* Selecteur de langue (WPML sert desormais les noms natifs, plus les drapeaux) */
.main-navigation .wpml-ls-item .wpml-ls-native{ letter-spacing:.06em; }


/* --------------------------------------------------------------------------
   3. HERO
   .gb-container-e3a83794 est partage par l'accueil ET les pages internes
   (le meme bloc a ete duplique ; seule l'image de fond differe).
   Le voile d'origine est une opacite uniforme de 0,4 : la photo reste
   bruyante derriere le texte. On la remplace par un degrade -- sombre en haut
   sous la navigation, sombre en bas pour le raccord, plus clair au centre.
   -------------------------------------------------------------------------- */

.gb-container-e3a83794::before{ opacity:.5; }

.gb-container-e3a83794::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,27,44,.92)  0%,
    rgba(11,27,44,.45) 42%,
    rgba(11,27,44,.58) 72%,
    rgba(11,27,44,.92) 100%);
}

/* Accueil : texte cale a gauche -> on ajoute un rabat sombre a gauche.
   Les pages internes ont un titre centre, elles gardent le degrade vertical. */
.home .gb-container-e3a83794::after{
  background:
    linear-gradient(180deg,
      rgba(11,27,44,.94)  0%,
      rgba(11,27,44,.38) 38%,
      rgba(11,27,44,.52) 70%,
      rgba(11,27,44,.92) 100%),
    linear-gradient(90deg,
      rgba(11,27,44,.72)  0%,
      rgba(11,27,44,0)   58%);
}

/* Le contenu doit repasser au-dessus du voile.
   (!) Ne rien ajouter d'autre ici : les paddings de ce conteneur sont definis
   par page ET par breakpoint dans les CSS GenerateBlocks. Les ecraser depuis
   ici casserait le responsive. */
.gb-container-933452f0{ z-index:2; }

/* Sur-titre de l'accueil */
p.gb-headline-48fa4c90{
  color:var(--fcpe-amber);
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  margin-bottom:18px;
}

/* Titre de l'accueil : 68 px en dur cassait sur les fenetres etroites. */
h1.gb-headline-6d0434ca{
  font-size:clamp(36px, 5.1vw, 62px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
  margin-bottom:26px;
  text-shadow:0 2px 24px rgba(4,12,22,.35);
}
h1.gb-headline-6d0434ca .gb-highlight{ color:var(--fcpe-amber); }

/* Le <br> code en dur dans le titre gene la mise a l'echelle fluide. */
@media (max-width:900px){
  h1.gb-headline-6d0434ca br{ display:none; }
}

/* Titre des heros de pages internes */
h1.gb-headline-320e38e0{
  font-size:clamp(30px, 4.2vw, 48px);
  letter-spacing:-.026em;
  text-shadow:0 2px 20px rgba(4,12,22,.4);
  /* " capitalize " Force Une Capitale A Chaque Mot : faux en francais. */
  text-transform:none;
}


/* --------------------------------------------------------------------------
   4. TITRES DE SECTION
   Cibles nommement : dans ce theme les gros chiffres cles sont eux aussi des
   h2.gb-headline, une regle generique sur h2 les ecraserait.
   Accueil fa4fb7d8 - La Fondation c1d1ec1d - Fonctionnement d89da172 bf34ca23
   - Organisation 8692f44e - News 0540c597 - Contact 85a6c82f d3937af9
   -------------------------------------------------------------------------- */

h2.gb-headline-fa4fb7d8,
h2.gb-headline-c1d1ec1d,
h2.gb-headline-d89da172,
h2.gb-headline-bf34ca23,
h2.gb-headline-8692f44e,
h2.gb-headline-0540c597,
h2.gb-headline-85a6c82f,
h2.gb-headline-d3937af9,
.fcpe-h2{
  position:relative;
  padding-top:24px;
  font-size:clamp(28px, 3.3vw, 40px);
  margin-bottom:26px;
}
h2.gb-headline-fa4fb7d8::before,
h2.gb-headline-c1d1ec1d::before,
h2.gb-headline-d89da172::before,
h2.gb-headline-bf34ca23::before,
h2.gb-headline-8692f44e::before,
h2.gb-headline-0540c597::before,
h2.gb-headline-85a6c82f::before,
h2.gb-headline-d3937af9::before,
.fcpe-h2::before{
  content:"";
  position:absolute; top:0; left:0;
  width:52px; height:3px;
  background:var(--fcpe-amber);
  border-radius:2px;
}

/* Chapeau : le premier paragraphe porte le message de la section. */
h2.gb-headline-fa4fb7d8 + p.wp-block-paragraph,
h2.gb-headline-c1d1ec1d + p.wp-block-paragraph,
.fcpe-h2 + p.wp-block-paragraph{
  font-size:19px;
  line-height:1.65;
  color:var(--fcpe-ink);
}

/* Longueur de ligne. Le conteneur fait 1200 px : au-dela de ~75 caracteres
   l'oeil perd la ligne suivante. Concerne surtout le pave de l'accueil. */
.gb-container-73d71902 > p.wp-block-paragraph{ max-width:74ch; }

/* Degrades gris d'origine (rgba 207,212,212) reteintes en encre. */
.gb-container-71cfbdfd{
  background-image:linear-gradient(90deg, rgba(11,27,44,.06), var(--base-3) 30%);
}
.gb-container-a225b655{
  background-image:linear-gradient(270deg, rgba(11,27,44,.06), rgba(255,255,255,0) 30%);
}


/* --------------------------------------------------------------------------
   5. CHIFFRES CLES  (page La Fondation)
   Chaque chiffre a son propre hachage : 23176340 - 5c5a6514 - ccadea36 - 76c92fa1
   -------------------------------------------------------------------------- */

h2.gb-headline-23176340,
h2.gb-headline-5c5a6514,
h2.gb-headline-ccadea36,
h2.gb-headline-76c92fa1,
.fcpe-stats h2.gb-headline{
  color:var(--fcpe-amber-700);
  font-weight:700;
  font-size:clamp(46px, 5.4vw, 68px);
  letter-spacing:-.035em;
  border-color:rgba(244,150,53,.45);
  padding-left:14px;
  padding-top:4px;
}
p.gb-headline-660c0a79,
p.gb-headline-34e56c89,
p.gb-headline-895b1ecb,
p.gb-headline-e350b002,
.fcpe-stats p.gb-headline{
  color:var(--fcpe-muted);
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
}


/* --------------------------------------------------------------------------
   6. COMPOSANTS REUTILISABLES
   Classes a poser dans l'editeur : GenerateBlocks -> Avance -> Classes CSS.
   -------------------------------------------------------------------------- */

.fcpe-card{
  background:#fff;
  border:1px solid var(--fcpe-line);
  border-radius:var(--fcpe-radius);
  padding:30px 28px;
  box-shadow:var(--fcpe-shadow);
  transition:box-shadow .3s var(--fcpe-ease),
             transform .3s var(--fcpe-ease),
             border-color .3s var(--fcpe-ease);
}
.fcpe-card:hover{
  box-shadow:var(--fcpe-shadow-h);
  transform:translateY(-3px);
  border-color:rgba(244,150,53,.5);
}
.fcpe-card h3{ font-size:20px; margin-bottom:10px; color:var(--fcpe-ink); }
.fcpe-card p{ color:var(--fcpe-muted); margin-bottom:0; }

/* pastille d'icone en tete de carte */
.fcpe-card > .gb-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:18px;
  border-radius:12px;
  background:rgba(244,150,53,.13);
  color:var(--fcpe-amber-800);
}
.fcpe-card > .gb-icon svg{ width:22px; height:22px; }

/* --- boutons --- */
.fcpe-btn,
.fcpe-btn-ghost{
  display:inline-flex; align-items:center; gap:.55em;
  padding:15px 28px;
  border-radius:9px;
  font-size:16px; font-weight:700;
  text-decoration:none !important;
  box-shadow:none;
  transition:background-color .22s var(--fcpe-ease),
             border-color .22s var(--fcpe-ease),
             color .22s var(--fcpe-ease),
             transform .14s var(--fcpe-ease);
}
.fcpe-btn{
  background:var(--fcpe-amber);
  color:var(--fcpe-ink) !important;
}
.fcpe-btn:hover, .fcpe-btn:focus{
  background:var(--fcpe-amber-600);
  color:#fff !important;
  transform:translateY(-1px);
}
.fcpe-btn-ghost{
  color:#fff !important;
  border:1px solid rgba(255,255,255,.38);
  font-weight:600;
}
.fcpe-btn-ghost:hover, .fcpe-btn-ghost:focus{
  border-color:var(--fcpe-amber);
  color:var(--fcpe-amber) !important;
  background:rgba(244,150,53,.08);
}
.fcpe-btn-ghost.is-light{ color:var(--fcpe-ink) !important; border-color:var(--fcpe-line); }
.fcpe-btn-ghost.is-light:hover{ color:var(--fcpe-amber-800) !important; border-color:var(--fcpe-amber); }

.fcpe-alt{ background-color:var(--base-3); }


/* --------------------------------------------------------------------------
   7. APPARITION AU DEFILEMENT
   animation-timeline: view() -- zero JavaScript. Les navigateurs qui ne
   connaissent pas la propriete ignorent tout le bloc et affichent le contenu
   normalement (@supports).
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* (!) ne pas etendre cette liste aux blocs situes au-dessus de la ligne de
       flottaison : leur plage d'animation n'a pas commence au premier rendu,
       ils resteraient a opacite 0. Les chiffres cles de l'accueil sont dans ce
       cas, ils en sont volontairement exclus. */
    .fcpe-reveal,
    .fcpe-cards > .fcpe-card,
    .gb-grid-wrapper-1b61c491 > .gb-grid-column{
      animation:fcpe-rise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    @keyframes fcpe-rise{
      from{ opacity:0; transform:translateY(20px); }
      to  { opacity:1; transform:none; }
    }
  }
}


/* --------------------------------------------------------------------------
   8. BOUTONS NATIFS ET FORMULAIRES
   -------------------------------------------------------------------------- */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background){
  border-radius:9px;
  font-weight:700;
  padding:14px 28px;
  transition:background-color .22s var(--fcpe-ease),
             color .22s var(--fcpe-ease),
             transform .14s var(--fcpe-ease);
}

input[type="submit"],
button[type="submit"],
a.wp-block-button__link:not(.has-background){
  background-color:var(--fcpe-amber);
  color:var(--fcpe-ink);
}
input[type="submit"]:hover, input[type="submit"]:focus,
button[type="submit"]:hover, button[type="submit"]:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus{
  background-color:var(--fcpe-amber-600);
  color:#fff;
  transform:translateY(-1px);
}

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select{
  border-radius:9px;
  border:1px solid var(--fcpe-line);
  padding:13px 15px;
  transition:border-color .2s var(--fcpe-ease), box-shadow .2s var(--fcpe-ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, textarea:focus, select:focus{
  border-color:var(--fcpe-amber);
  box-shadow:0 0 0 3px rgba(244,150,53,.20);
  outline:none;
  background-color:#fff;
}
.wpcf7 label{ font-weight:600; color:var(--fcpe-ink); }


/* --------------------------------------------------------------------------
   9. LIENS DE CONTENU
   Soulignement discret qui s'epaissit et passe a l'orange au survol.
   -------------------------------------------------------------------------- */

.entry-content a:not(.fcpe-btn):not(.fcpe-btn-ghost):not(.gb-button):not(.wp-block-button__link):not(.gb-block-image){
  text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(20,69,111,.38);
  transition:box-shadow .2s var(--fcpe-ease), color .2s var(--fcpe-ease);
}
.entry-content a:not(.fcpe-btn):not(.fcpe-btn-ghost):not(.gb-button):not(.wp-block-button__link):not(.gb-block-image):hover{
  box-shadow:inset 0 -2px 0 var(--fcpe-amber);
  color:var(--fcpe-ink);
}
.entry-content a:has(img),
.entry-content a img{ box-shadow:none; }


/* --------------------------------------------------------------------------
   10. PIED DE PAGE
   -------------------------------------------------------------------------- */

/* Titre de colonne : le soulignement tirete d'origine faisait bricole. */
h3.gb-headline-9d5dc98f{
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--fcpe-amber);
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:22px;
}

/* Partenaires : etait une colonne a hauteur bloquee (150 px) qui se
   rembobinait mal en deux colonnes. On passe en pastilles qui s'enroulent. */
.gb-container-873debc0{
  max-height:none;
  flex-direction:row;
  flex-wrap:wrap;
  column-gap:10px;
  row-gap:10px;
}
.gb-container-873debc0 > p{
  padding:8px 15px;
  border:1px solid var(--fcpe-line-dark);
  border-radius:999px;
  font-size:14px;
  transition:border-color .22s var(--fcpe-ease),
             background-color .22s var(--fcpe-ease);
}
.gb-container-873debc0 > p:hover{
  border-color:rgba(244,150,53,.65);
  background-color:rgba(244,150,53,.09);
}
.gb-container-873debc0 > p a{ box-shadow:none !important; }
.gb-container-873debc0 > p:hover a{ color:var(--fcpe-amber) !important; }

p.gb-headline-2fcf1847{ letter-spacing:-.02em; }

a.generate-back-to-top{
  background-color:var(--fcpe-ink);
  border-radius:10px;
}
a.generate-back-to-top:hover, a.generate-back-to-top:focus{
  background-color:var(--fcpe-amber);
  color:var(--fcpe-ink);
}


/* --------------------------------------------------------------------------
   11. DIVERS
   -------------------------------------------------------------------------- */

.entry-content .gb-block-image img,
.entry-content .wp-block-image img{ border-radius:12px; }

::selection{ background:rgba(244,150,53,.28); color:var(--fcpe-ink); }

/* Anneau de focus visible au clavier. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--fcpe-amber);
  outline-offset:2px;
  border-radius:4px;
}

html{ scrollbar-color:#B7C2CE transparent; }

/* Un paragraphe sans lien dans la liste des partenaires (separateur/espaceur)
   ne doit pas recevoir le traitement pastille. */
.gb-container-873debc0 > p:not(:has(a)){
  border:none;
  padding:0;
  display:none;
}


/* --------------------------------------------------------------------------
   12. BANDEAUX DE L'ACCUEIL  (blocs natifs WordPress, classes stables)
   Ajoute en 1.0.2. L'accueil ne contient plus un pave de cinq paragraphes
   mais trois sections : chiffres cles, introduction en cartes, appel a
   l'action. Elles sont ecrites en blocs core (group / heading / paragraph /
   buttons) et non en GenerateBlocks : elles ne dependent d'aucun hachage et
   survivent a une reconstruction dans l'editeur.

   Deux pieges de GeneratePress traites ici :
   - wp:group enveloppe ses enfants dans .wp-block-group__inner-container, et
     GeneratePress lui pose un padding de 60px. On le remet a zero et on gere
     les rythmes verticaux nous-memes.
   - display:contents sur ce meme div pour que la grille porte sur les vrais
     enfants, quelle que soit la version de WordPress.
   -------------------------------------------------------------------------- */

.fcpe-band{ padding-block:clamp(54px, 6.5vw, 92px); }

.fcpe-band  > .wp-block-group__inner-container,
.fcpe-stats > .wp-block-group__inner-container,
.fcpe-cards > .wp-block-group__inner-container,
.fcpe-stat  > .wp-block-group__inner-container,
.fcpe-card  > .wp-block-group__inner-container,
.fcpe-years > .wp-block-group__inner-container,
.fcpe-year  > .wp-block-group__inner-container{ padding:0; }

.fcpe-stats > .wp-block-group__inner-container,
.fcpe-cards > .wp-block-group__inner-container,
.fcpe-years > .wp-block-group__inner-container{ display:contents; }


/* --- bandeau des chiffres cles, sous le hero ------------------------------ */

.fcpe-stats-band{
  background-color:var(--base-3);
  border-bottom:1px solid var(--fcpe-line);
  padding-block:clamp(40px, 4.6vw, 64px);
}

.fcpe-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px, 3vw, 44px);
}
@media (max-width:900px){ .fcpe-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:430px){ .fcpe-stats{ grid-template-columns:1fr; } }

/* Meme langage visuel que les chiffres de la page La Fondation :
   filet haut + filet gauche, chiffre en orange fonce. */
.fcpe-stat{
  border-top:2px solid rgba(244,150,53,.45);
  border-left:2px solid rgba(244,150,53,.45);
  padding:14px 0 4px 16px;
}
p.fcpe-stat__value{
  margin:0 0 6px;
  color:var(--fcpe-amber-700);
  font-weight:700;
  font-size:clamp(36px, 4.2vw, 52px);
  line-height:1;
  letter-spacing:-.035em;
  /* GeneratePress pose overflow-wrap:break-word : sans ca " 1200+ " se coupe
     en deux lignes des que la colonne se resserre. */
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
p.fcpe-stat__label{
  margin:0;
  color:var(--fcpe-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.4;
}


/* --- section d'introduction et cartes ------------------------------------- */

.fcpe-lead{
  font-size:19px;
  line-height:1.65;
  color:var(--fcpe-ink);
  max-width:70ch;
  margin-bottom:clamp(30px, 3.6vw, 48px);
}

.fcpe-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px, 2.2vw, 28px);
}
@media (max-width:768px){ .fcpe-cards{ grid-template-columns:1fr; } }

h3.fcpe-card__title{ margin:0 0 10px; }


/* --- appel a l'action ----------------------------------------------------- */

.fcpe-cta{
  background-color:var(--fcpe-ink);
  text-align:center;
}
.fcpe-cta h2.fcpe-cta__title{
  color:#fff;
  font-size:clamp(26px, 3vw, 36px);
  margin:0 0 14px;
  text-wrap:balance;
}
p.fcpe-cta__text{
  color:rgba(255,255,255,.72);
  font-size:16px;
  max-width:60ch;
  margin:0 auto clamp(26px, 3vw, 36px);
}
.fcpe-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.fcpe-cta__actions .wp-block-button{ margin:0; }

/* (!) .fcpe-btn et .fcpe-btn-ghost de la section 6 ont ete ecrits pour des
   boutons GenerateBlocks, ou la classe est portee par le lien lui-meme. Sur un
   bloc core, elle atterrit sur le DIV .wp-block-button qui enveloppe le lien :
   sans ce reset on obtient un cadre en double et deux paddings empiles. */
.wp-block-button.fcpe-btn,
.wp-block-button.fcpe-btn-ghost{
  display:inline-block;
  padding:0; border:0; background:none; box-shadow:none; transform:none;
}
.wp-block-button.fcpe-btn:hover,
.wp-block-button.fcpe-btn-ghost:hover{ background:none; transform:none; }

/* Le bouton primaire herite deja de l'aplat orange (section 8).
   Ici on ne decrit que la variante fantome, posee sur fond encre. */
.fcpe-btn-ghost > .wp-block-button__link,
.fcpe-btn-ghost > .wp-block-button__link:not(.has-background){
  background-color:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.38);
  font-weight:600;
}
.fcpe-btn-ghost > .wp-block-button__link:hover,
.fcpe-btn-ghost > .wp-block-button__link:focus{
  background-color:rgba(244,150,53,.10);
  border-color:var(--fcpe-amber);
  color:var(--fcpe-amber);
}


/* --------------------------------------------------------------------------
   13. REPORTINGS GROUPES PAR ANNEE  (/news/, les trois langues)
   Ajoute en 1.0.2. Les 19 liens etaient une liste plate de paragraphes ; ils
   sont desormais des listes par annee. Le libelle ne porte plus que le mois,
   l'annee etant le titre du groupe.
   -------------------------------------------------------------------------- */

.fcpe-years{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:clamp(16px, 2vw, 28px);
  margin-top:10px;
  margin-bottom:30px;
}

h3.fcpe-year__title{
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--fcpe-amber-800);
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--fcpe-line);
}

ul.fcpe-year__list{ list-style:none; margin:0; padding:0; }
ul.fcpe-year__list li{ margin:0 0 2px; }
ul.fcpe-year__list a{
  display:block;
  padding:5px 0;
  font-size:15px;
  /* le soulignement de contenu (section 9) alourdit une liste de liens */
  box-shadow:none !important;
}
ul.fcpe-year__list a:hover{ color:var(--fcpe-amber-800); }

/* Avertissement du shortcode [fcpe_reportings] : un fichier du dossier dont le
   nom ne porte pas de date lisible n'est pas liste. Visible des seules
   personnes qui peuvent editer les pages. */
p.fcpe-years__alerte{
  margin:0 0 30px;
  padding:14px 16px;
  border-left:3px solid var(--fcpe-amber);
  background:rgba(244,150,53,.08);
  border-radius:0 8px 8px 0;
  font-size:14px;
  line-height:1.55;
  color:var(--fcpe-ink);
}


/* --------------------------------------------------------------------------
   14. DECORATIONS SVG RETEINTEES
   Ajoute en 1.0.2. Les trois motifs decoratifs datent de la palette bleue
   d'origine : dashed-curvy-line.svg en #4678bb, light-blue_dots.svg en
   rgba(208,233,243,1), pool-tiles_vector.svg en #d3d3d3.

   Plutot que de televerser des copies reteintees et de reediter les blocs, on
   garde les fichiers d'origine et on les utilise comme MASQUE : la couleur
   vient alors de background-color et se pilote entierement d'ici. Les URL sont
   relatives a ce fichier, donc valables sur n'importe quel domaine.

   Le masque n'est pose que sur des pseudo-elements ::before. Sur un element
   reel il masquerait aussi son contenu : pour .gb-container-05970008, dont le
   motif est le fond de l'element lui-meme, on passe par une URI de donnees
   (le motif ne fait que quelques dizaines d'octets une fois reecrit).
   -------------------------------------------------------------------------- */

/* Courbes tiretees, page La Fondation (fr, de, en) : bleu -> ardoise */
.gb-container-54e4e0da::before{
  background-image:none;
  background-color:var(--fcpe-muted);
  -webkit-mask-image:url(../../uploads/2024/01/dashed-curvy-line.svg);
          mask-image:url(../../uploads/2024/01/dashed-curvy-line.svg);
  -webkit-mask-repeat:repeat-y;          mask-repeat:repeat-y;
  -webkit-mask-position:center center;   mask-position:center center;
  -webkit-mask-size:40%;                 mask-size:40%;
}

/* Trame de points derriere les chiffres cles : bleu pale -> orange tres dilue.
   L'orange etant bien plus sature que le bleu d'origine, l'opacite de 0.3
   posee par GenerateBlocks donnait une trame criarde : on descend a 0.16. */
.gb-container-71cfbdfd::before{
  background-image:none;
  background-color:var(--fcpe-amber);
  opacity:.16;
  -webkit-mask-image:url(../../uploads/2024/01/light-blue_dots.svg);
          mask-image:url(../../uploads/2024/01/light-blue_dots.svg);
  -webkit-mask-repeat:repeat;            mask-repeat:repeat;
  -webkit-mask-size:200px;               mask-size:200px;
}

/* Damier du panneau " Securite - Flexibilite ", page Fonctionnement.
   Ce panneau est sombre : une teinte encre y serait invisible, on prend blanc. */
.gb-container-05c0deeb::before{
  background-image:none;
  background-color:#FFFFFF;
  opacity:.10;
  -webkit-mask-image:url(../../uploads/2024/01/pool-tiles_vector.svg);
          mask-image:url(../../uploads/2024/01/pool-tiles_vector.svg);
  -webkit-mask-repeat:repeat;            mask-repeat:repeat;
  -webkit-mask-size:50px;                mask-size:50px;
}

/* Colonne a trame de points (fond de l'element, pas d'un pseudo-element) :
   motif reecrit en URI de donnees, en orange dilue. */
.gb-container-05970008{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cpattern id='a' width='5' height='5' patternUnits='userSpaceOnUse' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' fill='%23F49635'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");
  opacity:.5;
}