:root{
  --orange:#e07010;--orange-h:#b85508;--orange-soft:#fff3e6;--badge-text:#a34d07;
  --orange-btn:#e07010;--orange-btn-hover:#c25f0d;
  /* orange lisible sur fond sombre (AA) — cf. --badge-text pour fond clair */
  --orange-on-dark:#f08030;
  --dark:#151820;--dark2:#1e2230;--dark3:#262b3a;
  --bg:#f6f4ef;--surface:#fff;--surface2:#f0ede5;
  --border:rgba(40,30,10,.10);--text:#1e1b14;--muted:#6a6355;--faint:#b2ab9e;
  --shadow-sm:0 2px 10px rgba(30,20,5,.08);
  --shadow-md:0 8px 32px rgba(30,20,5,.13);
  --shadow-lg:0 20px 60px rgba(30,20,5,.18);
  --r-sm:.5rem;--r-md:.75rem;--r-lg:1rem;--r-xl:1.5rem;--r-2xl:2rem;--r-full:999px;
  --font:'Inter',system-ui,sans-serif;
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --nav-h:70px;--content:1200px;
  --transition:220ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"]{
  --bg:#101218;--surface:#181b25;--surface2:#1e2230;
  --border:rgba(255,245,220,.08);--text:#e8e3d4;--muted:#9e9488;--faint:#52504a;
  --orange:#f08030;--orange-h:#f09850;--orange-soft:#281a08;--badge-text:#f08030;
  --orange-btn:#f08030;--orange-btn-hover:#d66f22;--orange-on-dark:#f08030;
  --dark:#070810;--dark2:#0e1018;--dark3:#141820;
  --shadow-sm:0 2px 10px rgba(0,0,0,.3);
  --shadow-md:0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Les sections sont pleine largeur et portent leur propre padding : l'ancre
   doit poser leur bord supérieur exactement sous l'en-tête. Le 1rem qui
   figurait ici laissait dépasser une bande de la section précédente. */
html{scroll-padding-top:var(--nav-h);overflow-x:clip;overflow-anchor:none;width:100%}

/* Cibles d'ancre qui ne sont pas des sections pleine largeur (titre d'article
   légal, carte) : elles gardent une respiration, sans quoi elles viendraient
   se coller sous l'en-tête. */
.legal-art,.places-card{scroll-margin-top:1rem}

body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;width:100%;position:relative;overflow-x:clip}

img,svg,video,iframe{display:block;max-width:100%}

h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.1;text-wrap:balance}

p,li{text-wrap:pretty}

a{color:inherit;text-decoration:none}

button{font:inherit;cursor:pointer;background:none;border:none}

address{font-style:normal}

ul{list-style:none;padding:0}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:200;height:var(--nav-h)}

.site-header::before{content:'';position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border)}

.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;height:100%;max-width:1360px;margin:0 auto;padding:0 1.5rem}

.brand{display:flex;align-items:center;gap:1rem;min-width:0;flex-shrink:0;text-decoration:none}

.brand img{height:52px;width:auto}

.brand-sep{width:1px;height:32px;background:var(--border);flex-shrink:0}

.brand-copy{display:flex;flex-direction:column}

.brand-copy small{font-size:.75rem;color:var(--muted);line-height:1.3;white-space:nowrap}

.brand-copy strong{font-size:.875rem;font-weight:700;white-space:nowrap}

.site-nav{display:flex;align-items:center;justify-content:space-evenly;gap:.5rem;flex:1;flex-wrap:nowrap}

.site-nav a{font-size:.83rem;font-weight:600;padding:.45rem .48rem;border-radius:.5rem;
  white-space:nowrap;transition:background var(--transition),color var(--transition)}

.site-nav a:hover,.site-nav a.active{background:var(--orange-soft);color:var(--badge-text)}

.nav-cta{background:var(--orange-btn)!important;color:#fff!important;
  padding:.45rem .85rem!important;border-radius:var(--r-full)!important;margin-left:.35rem}

.nav-cta:hover{background:var(--orange-btn-hover)!important}

/* ── NAV DROPDOWN (Formations & carrières) ── */
.nav-dropdown{position:relative;display:flex;align-items:center}

.nav-dropdown summary{list-style:none;display:flex;align-items:center;gap:.3rem;font-size:.83rem;font-weight:600;
  padding:.45rem .48rem;border-radius:.5rem;cursor:pointer;white-space:nowrap;color:inherit;
  transition:background var(--transition),color var(--transition)}

.nav-dropdown summary::-webkit-details-marker{display:none}

.nav-dropdown summary::marker{content:''}

.nav-dropdown summary:hover,.nav-dropdown[open]>summary{background:var(--orange-soft);color:var(--badge-text)}

.nav-caret{font-size:.6rem;transition:transform .25s ease}

.nav-dropdown[open] .nav-caret{transform:rotate(180deg)}

.nav-submenu{list-style:none;margin:0;padding:.5rem;display:grid;gap:.1rem;max-height:calc(100dvh - var(--nav-h) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;
  position:absolute;top:calc(100% + .6rem);left:0;min-width:270px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);z-index:250}

.nav-submenu a{display:block;padding:.65rem .8rem;border-radius:.5rem;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap}

.nav-submenu a:hover{background:var(--orange-soft);color:var(--badge-text)}

.nav-submenu-top{font-weight:700;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent);border-radius:.5rem .5rem 0 0;margin-bottom:.35rem;padding-bottom:.85rem!important}

.nav-back{display:none}

/* Éléments propres au panneau mobile : invisibles sur la barre horizontale */
.nav-eyebrow,.nav-foot,.nav-ico{display:none}

.hdr-actions{display:flex;align-items:center;gap:.5rem}

.icon-btn{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:.9rem;border:1px solid var(--btn-edge);
  background:var(--surface);color:var(--text);
  transition:border-color var(--transition),background-color var(--transition)}

.icon-btn:hover{border-color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,var(--surface))}

.menu-btn{display:none;position:relative}

.burger{position:relative;width:20px;height:14px;display:block;flex-shrink:0}

.burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .4s cubic-bezier(.16,1,.3,1) .15s,opacity .2s ease,top .25s cubic-bezier(.16,1,.3,1)}

.burger span:nth-child(1){top:0}

.burger span:nth-child(2){top:6px}

.burger span:nth-child(3){top:12px}

.menu-btn.active .burger span{transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .2s ease .1s,top .25s cubic-bezier(.16,1,.3,1) .15s}

.menu-btn.active .burger span:nth-child(1){top:6px;transform:rotate(45deg)}

.menu-btn.active .burger span:nth-child(2){opacity:0}

.menu-btn.active .burger span:nth-child(3){top:6px;transform:rotate(-45deg)}

.nav-overlay{display:none}

.nav-links{display:contents}

/* Mise en évidence sur la barre horizontale (desktop uniquement).
   L'en-tête est translucide : sa couleur effective change selon la section qui
   défile derrière. Un simple aplat crème (#fff3e6) se confondait avec l'en-tête
   dès que l'arrière-plan était clair — contraste de forme mesuré à 1,00:1.
   On ajoute donc un liseré orange, qui dessine la pastille quelle que soit
   l'ambiance, et on fonce légèrement l'aplat de l'état sélectionné. */
@media(min-width:1281px){
  .site-nav a:hover,.nav-dropdown summary:hover{
    background:var(--orange-soft);color:var(--badge-text);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 45%,transparent)}
  .site-nav a.active,.nav-dropdown[open]>summary{
    background:color-mix(in srgb,var(--orange) 20%,var(--surface));
    color:var(--badge-text);
    box-shadow:inset 0 0 0 1.5px var(--orange)}
  .site-nav .nav-cta:hover,.site-nav .nav-cta.active{box-shadow:none}
}

/* ── WRAP / SECTION ── */
.wrap{max-width:var(--content);margin:0 auto;padding:0 1.5rem}

section{padding:clamp(3.5rem,6vw,6rem) 0}

.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;
  color:var(--badge-text);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.9rem}

.kicker::before{content:'';width:20px;height:2px;background:var(--orange);flex-shrink:0}

.section-title{font-size:clamp(1.8rem,3.5vw,2.8rem);margin-bottom:1rem;max-width:20ch}

/* ── Titres bicolores ────────────────────────────────────────────────
   CONVENTION : le titre nomme son sujet dans la couleur courante, puis
   bascule en orange sur le SECOND SEGMENT — la promesse, la conséquence,
   l'apposition. Le pivot est un signe deja present dans le titre :
   deux-points, tiret cadratin, virgule, ou le verbe.
   Un titre purement nominal (« Actualites. », « Nos sponsors. ») n'a pas de
   pivot : il reste d'une seule couleur, y couper serait arbitraire.

   <em> porte la mise en relief ; la deformation italique est neutralisee.

   COULEUR : --orange-btn, soit exactement l'orange des boutons. Le jeton du
   bouton est vise deliberement plutot que --orange, de valeur identique : les
   titres suivent ainsi toute reteinte du bouton. #e07010 en theme clair,
   #f08030 en theme sombre.

   ARBITRAGE ESTHETIQUE ASSUME : sur fond clair ce ton donne ~2,9:1, sous le
   seuil de 3,0 applicable au grand texte. C'est un choix delibere, du meme
   ordre que l'orange des boutons. Sur fond sombre les segments restent entre
   5,5 et 7,5:1. */
:root{--accent-title:var(--orange-btn)}

h1 em,h2 em,h3 em{color:var(--accent-title);font-style:normal}

.section-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);max-width:60ch;margin-bottom:2.5rem}

.aos-left{opacity:0;transform:translateX(-28px);transition:opacity .6s ease,transform .6s ease}

.aos-left.visible{opacity:1;transform:none}

.aos-right{opacity:0;transform:translateX(28px);transition:opacity .6s ease,transform .6s ease}

.aos-right.visible{opacity:1;transform:none}

.aos-scale{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s ease}

.aos-scale.visible{opacity:1;transform:none}

/* ── PIED DE PAGE ──
   Trois bandes qui occupent la largeur, et non des colonnes de liens qui
   s'allongent : le plan du site figure deja dans les menus deroulants de
   l'en-tete, presents sur chaque page, et le pied n'a pas a le redoubler.
   Ne pas y reintroduire de colonnes de liens : la plus longue commanderait
   a elle seule la hauteur, qui depassait une hauteur d'ecran sur un portable
   1280x800. */
footer{position:relative;background:var(--dark);color:rgba(255,255,255,.55);
  padding:1.9rem 0 1.1rem}

footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--orange) 50%,transparent)}

.footer-inner{max-width:var(--content);margin:0 auto;padding:0 1.5rem;
  display:flex;flex-direction:column;gap:1.05rem}

/* ── Bande 1 : identité à gauche, coordonnées à droite ── */
.footer-lead{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem 2.5rem}

.footer-id{display:flex;align-items:center;gap:.85rem;min-width:0}

/* La règle générique .footer-inner img pose align-self:flex-start ; ici le
   logo doit rester centré sur la baseline qui l'accompagne. */
.footer-id .footer-logo{height:38px;width:auto;flex-shrink:0;align-self:center}

/* Le filet orange vertical reprend le trait qui soulignait les titres de
   colonnes, désormais sans objet, et rattache la baseline au logo. */
.footer-baseline{position:relative;padding-left:.85rem;max-width:33ch;
  font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.55)}

.footer-baseline::before{content:'';position:absolute;left:0;top:.12em;
  bottom:.12em;width:2px;border-radius:1px;background:var(--orange)}

.footer-contact{display:flex;flex-direction:column;align-items:flex-end;
  gap:.05rem;font-size:.82rem;line-height:1.5;text-align:right}

.footer-contact p{display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:0 .65rem}

.footer-contact .footer-sep{color:rgba(255,255,255,.28)}

/* Orange éclairci : le pied de page est toujours sur var(--dark), c'est
   exactement le cas d'usage de --orange-on-dark. */
.footer-contact a{color:var(--orange-on-dark);font-weight:600;
  padding:.15rem 0;transition:color var(--transition)}

.footer-contact a:hover{color:#fff}

/* ── Bande 2 : plan du site à gauche, partenaires à droite ── */
.footer-links{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 2rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.07)}

.footer-nav,.footer-partners{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.15rem 1.35rem}

.footer-nav a,.footer-partners a{position:relative;display:inline-block;
  font-size:.85rem;line-height:1.5;padding:.22rem 0;
  color:rgba(255,255,255,.62);transition:color var(--transition)}

.footer-partners{gap:.15rem 1.1rem}

.footer-partners a{font-size:.8rem;color:rgba(255,255,255,.52)}

/* Soulignement déployé depuis la gauche : il ne prend aucune place dans le
   flux et n'allonge donc pas la ligne au survol, contrairement à un chevron
   ou une flèche ajoutée au texte. */
.footer-nav a::after,.footer-partners a::after{content:'';position:absolute;
  left:0;right:0;bottom:.08rem;height:1px;background:var(--orange-on-dark);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition)}

.footer-nav a:hover,.footer-partners a:hover{color:var(--orange-on-dark)}

.footer-nav a:hover::after,.footer-partners a:hover::after{transform:scaleX(1)}

.footer-partners-label{font-family:var(--font-display);font-size:.8rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.56)}

/* ── Bande 3 : mentions ── */
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.5rem 1.25rem;padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.09);font-size:.78rem}

/* Numero de version : place DANS le span du copyright et non comme
   4e enfant de .footer-bottom, qui est un flex a 3 blocs deja justifie
   space-between - un bloc de plus en aurait change la repartition et le
   point de repli. Opacite .5, celle de .footer-legal a, mesuree AA. */
.site-version{color:rgba(255,255,255,.5);white-space:nowrap}

.footer-legal{display:flex;flex-wrap:wrap;gap:.15rem 1.25rem}

.footer-legal a{color:rgba(255,255,255,.5);font-size:.78rem;padding:.2rem 0;
  transition:color var(--transition)}

.footer-legal a:hover{color:var(--orange-on-dark)}

.footer-back-top{display:inline-flex;align-items:center;gap:.4rem;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);padding:.3rem .8rem;
  border-radius:var(--r-full);font-weight:600;font-size:.78rem;
  transition:background var(--transition),border-color var(--transition),color var(--transition)}

.footer-back-top:hover{background:rgba(224,112,16,.15);
  border-color:var(--orange-on-dark);color:var(--orange-on-dark)}

/* Seuil MESURE, pas arrondi : l'identité demande 300 px et les coordonnées
   330 px, écart compris = 670 px de contenu, soit une fenêtre de 718 px.
   Empiler dès 1024 px laissait donc 300 px de vide inutile entre 880 et
   1024 px. En dessous du seuil les deux bandes hautes s'empilent à gauche
   plutôt que de comprimer les liens. */
@media(max-width:880px){
  .footer-lead{flex-direction:column;align-items:flex-start;gap:.85rem}
  .footer-contact{align-items:flex-start;text-align:left}
  .footer-contact p{justify-content:flex-start}
  .footer-links{flex-direction:column;align-items:flex-start;gap:.7rem}
}

@media(max-width:1280px) and (hover:hover){
  .site-nav a:hover{background:rgba(224,112,16,.14);color:var(--orange);transform:translateX(2px)}
  .site-nav .nav-cta:hover{transform:none}
}

@media(min-width:1281px) and (max-width:1919px){
  .header-inner{gap:.75rem}
}

/* ── SKIP LINK (accessibilité clavier) ── */
.skip{position:absolute;left:1rem;top:-100px;background:var(--orange-btn);color:#fff;
  padding:.5rem 1.2rem;border-radius:var(--r-full);z-index:300;font-weight:700}

.skip:focus{top:1rem}

/* ── FOCUS CLAVIER ──
   L'anneau par défaut du navigateur (noir) disparaît sur l'en-tête et le pied
   de page sombres : on impose un anneau orange doublé de blanc, visible sur
   tous les fonds du site. */
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;
  border-radius:var(--r-sm);box-shadow:0 0 0 5px rgba(255,255,255,.55)}

[data-theme="dark"] :focus-visible{box-shadow:0 0 0 5px rgba(0,0,0,.55)}

.site-header :focus-visible,footer :focus-visible,.site-nav :focus-visible{
  box-shadow:0 0 0 5px rgba(0,0,0,.45)}

/* ── BOUTONS ── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;
  border-radius:var(--r-full);font-weight:700;font-size:.9rem;
  border:1px solid transparent;transition:all var(--transition);min-height:48px;cursor:pointer;white-space:nowrap}

.btn-primary{background:var(--orange-btn);color:#fff;border-color:var(--orange-btn)}

.btn-primary:hover{background:var(--orange-btn-hover);border-color:var(--orange-btn-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(224,112,16,.35)}

.btn-ghost-white{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}

.btn-ghost-white:hover{background:rgba(255,255,255,.18)}

/* RESEAU SECONDAIRE
   Deux colonnes egales, texte a gauche et illustration a droite. Employe par
   formation.html et formation-continue.html : deux pages, la regle descend
   donc ici (critere du chapitre 2). Le repli sous 768 px et la variante
   #formation-continue .reseau-secondary restent en page - le premier parce
   qu'il est ecrit dans une media query propre a chaque page, la seconde parce
   qu'elle ne concerne qu'une section. Toutes deux sont servies apres cette
   feuille et gardent donc la main. */
.reseau-secondary{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}

/* FILET ORANGE DES BOUTONS A FOND CLAIR
   .btn-outline, .icon-btn, .membre-filter-btn et la carte .durabilite-cta
   posent un fond blanc ou --surface sur un fond lui aussi clair. Leur filet
   --border ne donnait que 1,15:1 sur blanc et 1,12 sur --bg : la limite du
   bouton etait invisible. --orange donne 3,23:1 contre le remplissage blanc du
   bouton et 2,94 contre --bg en theme clair, 6,41 et 6,99 en theme sombre.
   Le seuil des composants d'interface (WCAG 1.4.11) est de 3,0 : il est tenu
   des deux cotes en sombre, tenu du cote du remplissage en clair, et manque de
   0,06 du cote de --bg - meme ecart que celui deja assume au chapitre 13 pour
   les segments orange des titres sur ce meme fond.
   Le survol ne peut plus se signaler par la seule couleur du filet, qui etait
   deja --orange : il ajoute un fond teinte a 10 %. */
:root{--btn-edge:var(--orange)}

.btn-outline{background:transparent;border-color:var(--btn-edge);color:var(--text)}

.btn-outline:hover{border-color:var(--orange);color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,transparent)}

/* ── LIEN EXTERNE ── */
.ext-link{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem 1.1rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.8);font-size:.875rem;font-weight:600;
  transition:background var(--transition);margin-top:.75rem}

.ext-link:hover{background:rgba(255,255,255,.1)}

/* ── NAVIGATION MOBILE (panneau plein écran jusqu'à 1280px, en-tête toujours visible) ── */
@media(max-width:1280px){
  .brand img{height:38px}
  .theme-btn{display:none}
  .menu-btn{display:flex}
  .hdr-actions .theme-btn{display:none}
  /* Panneau : plein écran sous l'en-tête, qui reste visible et cliquable */
  .site-nav{
    display:flex;flex-direction:column;
    position:fixed;top:var(--nav-h);right:0;bottom:0;left:0;
    height:calc(100dvh - var(--nav-h));width:100%;max-width:100vw;
    background:linear-gradient(168deg,var(--dark) 0%,var(--dark2) 55%,var(--dark3) 100%);
    z-index:210;
    padding:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
    box-shadow:0 20px 50px rgba(5,4,2,0);
    border-top:1px solid rgba(255,255,255,.08);
    justify-content:flex-start
  }
  .site-nav.open{transform:translateX(0);box-shadow:0 20px 50px rgba(5,4,2,.4)}
  .nav-overlay{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:rgba(8,6,4,.5);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:205;
    opacity:0;pointer-events:none;transition:opacity .35s ease
  }
  .nav-overlay.open{display:block;opacity:1;pointer-events:auto}

  /* Intitulé de section du panneau */
  .nav-eyebrow{
    display:flex;align-items:center;gap:.6rem;
    max-width:520px;margin:0 auto;width:100%;
    padding:1.15rem 1.25rem .6rem;
    font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.42);
    opacity:0;transform:translateY(-6px);
    transition:opacity .35s ease .05s,transform .45s cubic-bezier(.22,1,.36,1) .05s
  }
  .nav-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;
    background:var(--orange-on-dark);flex-shrink:0}
  .nav-eyebrow::after{content:'';flex:1;height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.16),transparent)}
  .site-nav.open .nav-eyebrow{opacity:1;transform:none}

  .nav-links{position:relative;display:grid;gap:.45rem;
    padding:.25rem 1.25rem 1.5rem;max-width:520px;margin:0 auto;width:100%}

  /* Le conteneur <details> doit être un bloc pleine largeur, sinon le <summary>
     reste dimensionné à son contenu et la carte est plus étroite que les autres. */
  .nav-dropdown{display:block;position:static;width:100%}

  /* Entrées de premier niveau : cartes cliquables */
  .site-nav a,
  .nav-dropdown summary{
    display:flex;align-items:center;gap:.8rem;
    padding:.7rem .8rem;min-height:58px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:1rem;
    color:rgba(255,246,238,.92);font-size:1rem;font-weight:600;letter-spacing:.005em;
    white-space:normal;
    opacity:0;transform:translateX(16px);
    transition:background .22s ease,border-color .22s ease,color .22s ease,
               transform .5s cubic-bezier(.22,1,.36,1),opacity .35s ease
  }
  .site-nav.open a,.site-nav.open .nav-dropdown summary{opacity:1;transform:none}
  .site-nav.open .nav-links>:nth-child(1),
  .site-nav.open .nav-links>:nth-child(1)>summary{transition-delay:.06s}
  .site-nav.open .nav-links>:nth-child(2),
  .site-nav.open .nav-links>:nth-child(2)>summary{transition-delay:.11s}
  .site-nav.open .nav-links>:nth-child(3),
  .site-nav.open .nav-links>:nth-child(3)>summary{transition-delay:.16s}
  .site-nav.open .nav-links>:nth-child(4),
  .site-nav.open .nav-links>:nth-child(4)>summary{transition-delay:.21s}
  .site-nav.open .nav-links>:nth-child(5),
  .site-nav.open .nav-links>:nth-child(5)>summary{transition-delay:.26s}
  .site-nav.open .nav-links>:nth-child(6),
  .site-nav.open .nav-links>:nth-child(6)>summary{transition-delay:.31s}

  .nav-ico{display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex-shrink:0;border-radius:.72rem;
    background:rgba(224,112,16,.13);border:1px solid rgba(224,112,16,.2);
    color:var(--orange-on-dark);
    transition:background .22s ease,border-color .22s ease,color .22s ease}
  .nav-ico svg{width:19px;height:19px}
  .nav-label{flex:1;min-width:0}
  .nav-caret{display:none}

  /* Chevron « entrer » */
  .site-nav a::after,
  .nav-dropdown summary::after{
    content:'\203A';display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;flex-shrink:0;border-radius:50%;
    background:rgba(255,255,255,.06);color:rgba(255,255,255,.45);
    font-size:1.1rem;line-height:1;padding-bottom:3px;
    transition:transform .22s ease,background .22s ease,color .22s ease}

  .site-nav a:hover,.site-nav a:active,
  .nav-dropdown summary:hover,.nav-dropdown[open]>summary{
    background:rgba(224,112,16,.14);border-color:rgba(224,112,16,.42);color:#fff}
  .site-nav a:hover .nav-ico,.site-nav a:active .nav-ico,
  .nav-dropdown summary:hover .nav-ico,.nav-dropdown[open]>summary .nav-ico{
    background:rgba(224,112,16,.26);border-color:rgba(224,112,16,.45);color:#fff}
  .site-nav a:active::after,.nav-dropdown summary:active::after{
    transform:translateX(3px);background:rgba(224,112,16,.3);color:#fff}

  /* Page courante */
  .site-nav a.active,.nav-dropdown summary.active{
    background:rgba(224,112,16,.15);border-color:rgba(224,112,16,.5);color:#fff}
  .site-nav a.active .nav-ico,.nav-dropdown summary.active .nav-ico{
    background:var(--orange-btn);border-color:transparent;color:#fff}

  /* Appel à l'action Contact */
  .site-nav .nav-cta{margin:.7rem 0 0;justify-content:center;gap:.6rem;
    background:var(--orange-btn)!important;border-color:transparent!important;color:#fff!important;
    border-radius:1rem!important;padding:.9rem 1.25rem!important;
    font-size:1.02rem;font-weight:700;min-height:58px}
  .site-nav .nav-cta .nav-ico{width:22px;height:22px;background:none;border:0;color:#fff}
  .site-nav .nav-cta .nav-ico svg{width:20px;height:20px}
  .site-nav .nav-cta .nav-label{flex:0 0 auto}
  .site-nav .nav-cta::after{content:'\2192';width:auto;height:auto;
    background:none;color:#fff;font-size:1.05rem;padding:0}
  .site-nav .nav-cta:hover,.site-nav .nav-cta:active{background:var(--orange-btn-hover)!important}

  /* Second niveau : panneau qui glisse par-dessus, l'en-tête reste accessible */
  .nav-submenu{
    display:flex!important;flex-direction:column;gap:.2rem;
    /* .site-nav porte un transform : il est donc le bloc conteneur de ce
       position:fixed. Son bord supérieur est déjà à var(--nav-h) du haut
       de l'écran ; répéter var(--nav-h) ici décalait le panneau de 71 px
       vers le bas et laissait voir le premier niveau au-dessus. */
    position:fixed;top:0;left:0;right:0;bottom:0;
    margin:0;padding-block:1.15rem calc(1.6rem + env(safe-area-inset-bottom,0px));
    padding-inline:max(1.25rem,calc((100% - 480px)/2));
    background:linear-gradient(168deg,var(--dark) 0%,var(--dark2) 58%,var(--dark3) 100%);
    border:0;border-radius:0;box-shadow:none;min-width:0;max-width:none;
    /* Le max-height du menu déroulant desktop (100dvh - --nav-h - 1.5rem) doit
       être neutralisé ici : sur le panneau plein écran il rabotait 24 px en bas,
       par lesquels le premier niveau — dont le bouton Contact orange —
       réapparaissait sur les écrans courts. */
    max-height:none;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s
  }
  .nav-dropdown.is-open .nav-submenu{
    transform:translateX(0);visibility:visible;
    transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s
  }

  /* Le sous-menu est un enfant en position fixe de .site-nav, qui porte un
     transform : il est donc positionné par rapport à ce panneau ET suit son
     défilement. Sur un écran court le premier niveau déborde et défile ; le
     sous-menu se décalait alors d'autant vers le haut, laissant apparaître en
     bas de l'écran le bouton Contact orange du premier niveau. Tant qu'un
     sous-menu est ouvert, le panneau ne défile plus (et main.js remet son
     défilement à zéro) : les deux plans restent superposés au pixel près. */
  .site-nav.has-submenu{overflow:hidden}
  .nav-back{
    display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
    width:auto;max-width:100%;margin:0 0 1.1rem;
    padding:.5rem 1rem .5rem .7rem;min-height:44px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
    color:rgba(255,255,255,.92);font-family:inherit;font-size:.92rem;font-weight:700;
    letter-spacing:.005em;cursor:pointer;text-align:left;border-radius:999px;
    transition:background .22s ease,border-color .22s ease,color .22s ease
  }
  .nav-back svg{flex-shrink:0;width:16px;height:16px;transition:transform .25s ease}
  .nav-back:hover,.nav-back:active{
    background:rgba(224,112,16,.16);border-color:rgba(224,112,16,.42);color:#fff}
  .nav-back:hover svg,.nav-back:active svg{transform:translateX(-3px)}

  .nav-submenu a{
    display:flex;align-items:center;gap:.75rem;
    padding:.7rem .85rem;min-height:48px;
    background:transparent;border:1px solid transparent;border-radius:.8rem;
    font-size:.95rem;font-weight:600;color:rgba(255,255,255,.66);
    white-space:normal;opacity:1;transform:none;
    transition:background .2s ease,color .2s ease,border-color .2s ease}
  .nav-submenu a::before{content:'';width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.24);flex-shrink:0;
    transition:background .2s ease,transform .2s ease}
  .nav-submenu a:hover,.nav-submenu a:active{
    background:rgba(224,112,16,.12);border-color:rgba(224,112,16,.3);color:#fff}
  .nav-submenu a:hover::before,.nav-submenu a:active::before{
    background:var(--orange-on-dark);transform:scale(1.5)}
  .nav-submenu a::after{content:none}

  .nav-submenu-top{
    background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.11)!important;
    border-bottom-width:1px!important;color:#fff!important;font-weight:700!important;
    min-height:54px;margin-bottom:.6rem!important;
    padding:.85rem!important;border-radius:.9rem!important}
  .nav-submenu-top::before{background:var(--orange-on-dark)!important}

  /* Pied du panneau : thème + contacts directs */
  .nav-foot{
    display:flex;flex-direction:column;gap:.85rem;
    max-width:520px;width:100%;margin:auto auto 0;
    padding:1rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(255,255,255,.08);
    opacity:0;transform:translateY(8px);
    transition:opacity .35s ease .3s,transform .45s cubic-bezier(.22,1,.36,1) .3s}
  .site-nav.open .nav-foot{opacity:1;transform:none}
  .nav-theme{
    display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
    padding:.4rem 1rem .4rem .45rem;min-height:44px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
    border-radius:999px;color:rgba(255,255,255,.85);
    font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
    transition:background .22s ease,border-color .22s ease,color .22s ease}
  .nav-theme:hover,.nav-theme:active{
    background:rgba(224,112,16,.14);border-color:rgba(224,112,16,.42);color:#fff}
  .nav-theme-ico{display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;flex-shrink:0;border-radius:50%;
    background:rgba(224,112,16,.16);color:var(--orange-on-dark)}
  .nav-theme-ico svg{width:16px;height:16px}
  .nav-foot-contact{display:flex;flex-wrap:wrap;gap:.1rem 1.2rem}
  .nav-foot-contact a{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.4rem 0;min-height:32px;
    background:none;border:0;border-radius:0;
    color:rgba(255,255,255,.55);font-size:.83rem;font-weight:600;
    opacity:1;transform:none;transition:color .2s ease}
  .nav-foot-contact a svg{width:15px;height:15px;flex-shrink:0;opacity:.75}
  .nav-foot-contact a::after{content:none}
  .nav-foot-contact a:hover,.nav-foot-contact a:active{
    background:none;color:var(--orange-on-dark)}
}

@media(max-width:1280px) and (min-width:769px){
  .header-inner{padding:0 1rem;gap:.5rem}
}

/* Pied de page sur téléphone : bandes centrées, sans le mur de partenaires
   — la page « Liens & partenaires », atteignable depuis la bande de
   navigation, les reprend tous avec leur description. */
@media(max-width:640px){
  footer{padding:1.5rem 0 .9rem}
  .footer-inner{gap:.8rem;text-align:center}
  .footer-lead{align-items:center;gap:.7rem}
  .footer-id{flex-direction:column;align-items:center;gap:.5rem;width:100%}
  .footer-id .footer-logo{height:32px}
  /* La baseline est reprise mot pour mot dans le bloc de présentation de la
     page d'accueil ; sur trois lignes de téléphone elle ne fait qu'allonger. */
  .footer-baseline{display:none}
  .footer-contact{align-items:center;text-align:center;width:100%}
  .footer-contact p{justify-content:center}
  .footer-contact .footer-sep{display:none}
  .footer-links{align-items:center;gap:.45rem;padding-top:.8rem}
  .footer-nav{justify-content:center;gap:.1rem 1.05rem}
  .footer-partners{display:none}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;
    gap:.5rem;padding-top:.75rem;font-size:.72rem;line-height:1.45}
  .footer-bottom>span{max-width:36ch}
  .footer-legal a{font-size:.74rem}
  .footer-legal{justify-content:center}
  /* Le bouton flottant de retour en haut assure déjà cette fonction sur
     téléphone : le doublon alourdirait la barre sans rien apporter. */
  .footer-bottom .footer-back-top{display:none}
}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* logo-transparent-fix */
img.logo-transparent, .site-header img, .footer-inner img, .brand img{background:transparent!important;box-shadow:none!important;border:0!important;mix-blend-mode:normal;}

.footer-inner img{align-self:flex-start}

/* ── BARRE DE PROGRESSION DE LECTURE ── */
.reading-progress{position:fixed;top:var(--nav-h);left:0;height:3px;width:0%;
  background:var(--orange);z-index:199;transition:width .1s linear;pointer-events:none}

/* ── BOUTON RETOUR EN HAUT (flottant) ── */
.scroll-top-btn{position:fixed;right:1.25rem;bottom:1.25rem;z-index:150;
  width:46px;height:46px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--orange-btn);color:#fff;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s,background var(--transition)}

.scroll-top-btn.visible{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear 0s}

.scroll-top-btn:hover{background:var(--orange-btn-hover)}

.scroll-top-btn svg{width:20px;height:20px}

@media(max-width:768px){.scroll-top-btn{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));width:42px;height:42px}}

@media(prefers-reduced-motion:reduce){.scroll-top-btn{transition:opacity .01ms,visibility .01ms}}

/* ── EN-TÊTE COMPACT (très petits écrans) — mutualisé depuis les 6 pages ── */
@media(max-width:520px){
  .brand-sep{display:none}
  .brand-copy small{display:none}
  .brand{gap:.6rem;align-items:flex-end}
  .brand-copy strong{font-size:.78rem;line-height:1}
}

/* ── ANIMATIONS PARTAGÉES ── */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ── EN-TÊTE DE PAGE INTÉRIEURE ──
   Socle commun aux cinq pages qui l'emploient. Seule la hauteur minimale
   reste declaree page par page, dans leur bloc <style> : elle se regle sur
   la longueur du titre et du chapeau de chacune. */
#hero-liens{background:var(--dark);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:3rem 0}

@media(max-width:640px){#hero-liens{padding:2.5rem 0}}

#hero-liens .kicker{color:var(--orange)}

#hero-liens h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;max-width:26ch;margin-bottom:1rem}

#hero-liens p{color:rgba(255,255,255,.75);max-width:60ch;font-size:1.05rem}

.liens-section{padding:clamp(3rem,5vw,4.5rem) 0}

.liens-section:nth-of-type(even){background:var(--surface)}


/* ════════════════════════════════════════════════════════════════════
   COMPOSANT PARTAGE : LISTE DE LIENS (.liens-item)
   Employe par liens-partenaires.html (3 sections, 25 entrees) ET par le
   panneau « Notre reseau » de index.html. Definition unique pour les deux
   pages : une retouche du composant n'a pas a etre repercutee a deux
   endroits. Ne pas la redescendre dans un <style> de page.
   Structure attendue :
     <a class="liens-item" href="..." target="_blank" rel="noopener noreferrer">
       <span class="liens-item-icon" aria-hidden="true">EMOJI</span>
       <span class="liens-item-text">
         <span class="liens-item-name">Nom</span>
         <span class="liens-item-url">domaine.ch</span>
       </span>
       <span class="liens-item-arrow" aria-hidden="true">-></span>
     </a>
   Une entree sans adresse connue emploie <span class="liens-item"> a la
   place de <a>, sans ligne d'URL ni fleche.
   ════════════════════════════════════════════════════════════════════ */
.liens-list{column-count:2;column-gap:3rem;margin-top:2rem}

@media(max-width:760px){.liens-list{column-count:1}}

.liens-item{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 0;
  border-bottom:1px solid var(--border);break-inside:avoid;color:var(--text);transition:color var(--transition)}

.liens-item-icon{flex-shrink:0;font-size:1.15rem;width:2.75rem;height:2.75rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border);transition:all var(--transition)}

.liens-item:hover .liens-item-icon{background:var(--orange-soft);border-color:rgba(224,112,16,.3);transform:scale(1.06)}

.liens-item-text{flex:1;min-width:0}

.liens-item-name{display:block;font-weight:600;font-size:.95rem;line-height:1.35}

.liens-item-url{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem;word-break:break-word;transition:color var(--transition)}

.liens-item-arrow{flex-shrink:0;color:var(--orange);opacity:0;transform:translateX(-4px);
  transition:opacity var(--transition),transform var(--transition);margin-top:.1rem}

.liens-item:hover{color:var(--orange)}

.liens-item:hover .liens-item-url{color:var(--orange-h)}

.liens-item:hover .liens-item-arrow{opacity:1;transform:translateX(0)}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION
   Le site est aussi imprimé : statuts, mentions légales, protection des
   données et annuaire des membres. On repasse en clair quel que soit le
   thème actif, on retire tout ce qui n'a pas de sens sur papier (navigation,
   boutons, lecteurs vidéo, barre de progression) et on explicite la cible
   des liens externes, invisible autrement.
   ═══════════════════════════════════════════════════════════════════════ */
@media print{
  /* Le thème sombre gaspille l'encre et rend le texte illisible en niveaux
     de gris : on force la palette claire, y compris si data-theme="dark". */
  :root,[data-theme="dark"]{
    --bg:#fff;--surface:#fff;--surface2:#fff;--text:#000;--muted:#333;
    --border:#bbb;--dark:#fff;--dark2:#fff;--dark3:#fff;
    --shadow-sm:none;--shadow-md:none;--shadow-lg:none;
  }
  html,body{background:#fff!important;color:#000!important}

  /* Éléments sans objet sur papier. */
  .site-header,.site-nav,.nav-theme,.reading-progress,.scroll-top-btn,.skip,
  .footer-back-top,.membre-toolbar,
  .video-poster,.contact-form,.president-toggle{display:none!important}
  video,iframe{display:none!important}

  /* Les fonds sombres pleine largeur deviennent blancs : leurs textes en
     blanc translucide seraient invisibles. */
  #formation-teaser,#contact,footer,.spark-card,.debouche-bridge.on-dark{
    background:#fff!important;color:#000!important}
  #formation-teaser *,#contact *,footer *,.spark-card *{color:#000!important}

  main{padding-top:0!important}
  section{padding:1.2rem 0!important;page-break-inside:auto}
  h1,h2,h3,h4{page-break-after:avoid;color:#000!important}
  p,li{orphans:3;widows:3}
  img{max-width:100%!important;page-break-inside:avoid}

  /* Cartes : on évite qu'une fiche soit coupée entre deux pages. */
  .membre-card,.sponsor-tile,.news-card,.card,.liens-item{
    page-break-inside:avoid;break-inside:avoid;
    border:1px solid #bbb!important;box-shadow:none!important}

  /* Un lien imprimé perd sa cible : on l'écrit, sauf pour les ancres
     internes et les liens dont l'intitulé est déjà l'adresse. */
  a{color:#000!important;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.72em;
    word-break:break-all;color:#444}
  a[href^="#"]::after,a[href^="tel:"]::after,a[href^="mailto:"]::after,
  .liens-item::after,.member-external-link::after{content:""}

  .btn,.btn-primary,.btn-sec,.btn-outline{
    border:1px solid #666!important;background:none!important;color:#000!important}

  @page{margin:1.6cm}
}


/* ════════════════════════════════════════════════════════════════════
   PAGES LÉGALES (mentions-legales, protection-donnees)
   Ces deux pages partagent exactement la meme mise en forme : elle vit
   donc ici plutot que recopiee dans le bloc <style> de chacune.
   ════════════════════════════════════════════════════════════════════ */

/* Justification ramenee de 78 a 70 caracteres : au-dela, l'oeil peine a
   retrouver le debut de la ligne suivante sur un texte long et dense. */
.legal-wrap{max-width:70ch;margin:0 auto;counter-reset:art}

.legal-updated{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem}

/* Sommaire sur deux colonnes des 720 px : la liste tenait sur une colonne
   etroite et laissait un large vide a droite du cartouche. */
.legal-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.15rem 1.4rem;margin-bottom:2.25rem}
.legal-toc h2{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--badge-text);
  margin-bottom:.7rem;font-family:var(--font);font-weight:700}
.legal-toc ol{list-style:none;counter-reset:toc;display:grid;gap:.32rem}
@media(min-width:720px){.legal-toc ol{grid-template-columns:1fr 1fr;gap:.4rem 2rem}}
.legal-toc li{counter-increment:toc;font-size:.9rem;display:flex;gap:.5rem;align-items:baseline}
.legal-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--badge-text);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;flex:none}
.legal-toc a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--transition)}
.legal-toc a:hover{border-bottom-color:var(--badge-text)}

/* Articles numerotes, le chiffre reprenant celui du sommaire. Le filet passe
   du DESSOUS de chaque titre au-DESSUS de chaque article : il separe alors
   deux articles au lieu de couper le titre de son propre texte. */
.legal-art{counter-increment:art;margin-bottom:1.9rem;padding-top:1.4rem;
  border-top:1px solid var(--border);scroll-margin-top:2rem}
.legal-art:first-of-type{border-top:0;padding-top:0}

.legal-art h2{font-size:1.3rem;line-height:1.25;margin-bottom:.65rem;
  padding-bottom:0;border-bottom:0;display:flex;align-items:baseline;gap:.6rem}
.legal-art h2::before{content:counter(art,decimal-leading-zero);
  font-family:var(--font);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  color:var(--badge-text);flex:none;position:relative;top:-.15em}

.legal-art h3{font-size:1rem;margin:1.2rem 0 .35rem;font-family:var(--font);font-weight:700}

/* Blancs resserres : le texte etait aere au point que chaque paragraphe
   paraissait isole. Interlignage legerement releve en compensation, pour
   que le gain de densite ne se paie pas en confort de lecture. */
.legal-art p{margin-bottom:.6rem;line-height:1.68}
.legal-art ul{margin:0 0 .75rem 1.1rem;display:grid;gap:.28rem}
.legal-art li{padding-left:.2rem;line-height:1.6}
.legal-art dl{margin:0 0 .85rem}
.legal-art dt{font-weight:600;margin-top:.65rem}
.legal-art dd{margin:.1rem 0 0 1.1rem;color:var(--muted)}

.legal-adresse{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1rem 1.25rem;margin-bottom:.95rem;line-height:1.7}

/* Aplat orange remplace par un filet lateral sur fond neutre : l'aplat
   --orange-soft jurait avec les cartouches --surface voisins. */
.legal-note{border-left:2px solid var(--badge-text);background:var(--surface);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:.85rem 1.1rem;margin:.95rem 0;font-size:.92rem}
.legal-note strong{color:var(--badge-text)}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.92rem}
.legal-table th,.legal-table td{text-align:left;padding:.6rem .75rem;border:1px solid var(--border);
  vertical-align:top}
.legal-table th{background:var(--surface);font-weight:600}
@media(max-width:640px){
  .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
  .legal-table thead{display:none}
  .legal-table tr{margin-bottom:1rem;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
  .legal-table td{border:0;border-bottom:1px solid var(--border)}
  .legal-table td:last-child{border-bottom:0}
  .legal-table td::before{content:attr(data-th);display:block;font-weight:600;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:.2rem}
}


/* ==========================================================================
   Pages Formations — règles communes à formation.html et formation-continue.html
   --------------------------------------------------------------------------
   Descendues des blocs <style> de ces deux pages en v73 : elles y étaient
   recopiées à l'identique, ce que le critère de répartition du chapitre 2
   interdit (une règle qui sert à deux pages ou plus vit dans styles.css).
   Placées en fin de fichier : elles conservent ainsi la précédence qu'elles
   avaient en tant que styles de page vis-à-vis du reste de styles.css.
   L'ordre interne est celui du bloc <style> de formation.html.
   ========================================================================== */

#hero-formation{padding:0;background:var(--dark);color:#fff;min-height:70vh;display:flex;flex-direction:column;position:relative;overflow:hidden}

.hero-f-overlay{position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 20% 60%,rgba(224,112,16,.14) 0%,transparent 70%)}

.hero-f-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--content);margin:0 auto;padding:5rem 1.5rem 4rem}

.hero-f-badge{display:inline-flex;align-items:center;gap:.85rem;padding:.5rem 1.05rem;
  background:linear-gradient(180deg,rgba(224,112,16,.24),rgba(224,112,16,.12));
  border:1px solid rgba(224,112,16,.45);border-radius:.85rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  margin-bottom:1.5rem;width:fit-content;max-width:100%}

.hero-f-badge .hb-dot{width:7px;height:7px;border-radius:50%;background:var(--orange-on-dark);
  flex-shrink:0;animation:pulse 2s ease-in-out infinite}

.hero-f-badge .hb-text{display:flex;flex-direction:column;align-items:center;
  gap:.1rem;line-height:1.2;text-align:center;min-width:0}

.hero-f-badge .hb-l1{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.92);white-space:nowrap}

.hero-f-badge .hb-l2{font-size:.63rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-on-dark);white-space:nowrap}

@media(max-width:420px){
  .hero-f-badge{gap:.6rem;padding:.45rem .8rem}
  .hero-f-badge .hb-l1{font-size:.74rem}
  .hero-f-badge .hb-l2{font-size:.56rem;letter-spacing:.08em}
}

.hero-f-title{font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1.0;max-width:18ch;margin-bottom:1.25rem}

.hero-f-sub{font-size:clamp(.95rem,1.5vw,1.2rem);color:rgba(255,255,255,.65);max-width:54ch;margin-bottom:2.5rem}

.hero-f-btns{display:flex;flex-wrap:wrap;gap:.75rem}

.debouche-bridge{margin-top:2rem;padding:1.5rem 1.75rem;background:var(--surface);border:1px dashed var(--orange);
  border-radius:var(--r-xl);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem}

.debouche-bridge p{margin:0;font-size:.92rem;color:var(--muted);max-width:52ch}

.debouche-bridge strong{color:var(--text)}

.debouche-bridge .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.35;height:auto;flex-shrink:0}

@media(max-width:640px){
  .debouche-bridge{flex-direction:column;align-items:stretch}
  .debouche-bridge .btn{width:100%;justify-content:center}
}

#contact-formation{background:var(--orange-btn)}

.cf-inner{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;max-width:860px;margin:0 auto}

.cf-inner h2{font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin-bottom:.75rem}

.cf-inner p{color:rgba(255,255,255,.95);font-size:1rem;line-height:1.65}

.cf-btns{display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}

.cf-btns .btn{background:#fff;color:var(--orange-btn);border-color:#fff;white-space:nowrap}

.cf-btns .btn:hover{background:rgba(255,255,255,.9)}

.cf-btns .btn-sec{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}

.cf-btns .btn-sec:hover{background:rgba(255,255,255,.22)}

@media(max-width:768px){
  .cf-inner{grid-template-columns:1fr}
}