/* Fédération JBS : l'identité du logo « Fais jaillir le bonheur de savoir ».
   L'arche aux couleurs de l'arc-en-ciel, adoucies pour rester harmonieuses, l'arbre brun et ses cœurs bleus et jaunes,
   sur un fond crème. Pied de page en vagues, comme un air de vacances. Surcharge le moteur commun (sites/_moteur/site.css). */
:root{
  --ink:#2c2420; --soft:#5b524b; --label:#6e4424; --paper:#ffffff;
  --violet:#8d6cc0; --bleu:#3f7cc0; --bleu-f:#2f629c; --vert:#5aa56e; --jaune:#e8c34f; --orange:#ec9750; --rouge:#e06a5c; --brun:#6e4424;
  --bleu-t:#e8f0f9; --jaune-t:#fbf3d9; --vert-t:#e6f3e8;
  --arc:linear-gradient(90deg,var(--violet),var(--bleu) 22%,var(--vert) 44%,var(--jaune) 64%,var(--orange) 82%,var(--rouge));
  --cream:#fcf7ee; --sand:#f5ecdc; --sand-2:#e7dac4; --line:#ece3d5;
  --display:"Gelasio",Georgia,serif; --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
}
body{background:var(--paper);color:var(--ink);font:17px/1.7 var(--body)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}

/* Bandeau, en-tête et menu */
.util{background:var(--bleu-f);color:#fff;font-size:14px}
.util .wrap{justify-content:center}
.util a{border-bottom-color:rgba(255,255,255,.45)}
header{border-bottom:0}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--arc)}
.brand{flex-shrink:0}
.brand img{height:68px;width:auto}
@media (min-width:1061px) and (max-width:1200px){.brand img{height:56px}.menu a{padding:8px 5px;font-size:14px}.menu a.btn{padding:12px 14px}}
.menu a{color:var(--soft);font-weight:500}
.menu a:hover{color:var(--bleu-f)}
.menu a[aria-current="page"]{color:var(--bleu-f);border-bottom:2px solid var(--jaune)}
.menu a.btn{color:#fff;border:0}
.brand-nom{color:var(--brun)}

/* Titres */
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--ink);letter-spacing:-.005em}
h3{font-size:22px}
.lead,.soft{color:var(--soft)}
.kicker{color:var(--label);letter-spacing:.16em}
.kicker::before{width:12px;height:12px;border-radius:0 60% 0 60%;background:var(--vert)}

/* Boutons */
.btn{border:1px solid var(--bleu);background:var(--bleu);color:#fff;border-radius:4px;font-weight:600}
.btn:hover{background:var(--bleu-f);border-color:var(--bleu-f);color:#fff}
.btn.line,.btn.line.gold{background:#fff;color:var(--bleu-f);border-color:var(--bleu)}
.btn.line:hover{background:var(--bleu-t);color:var(--bleu-f)}

/* Accueil : le logo, ou une photo dans l'arche arc-en-ciel */
.hero{background:var(--cream)}
.hero h1{color:var(--ink)}
.facts{border-top-color:var(--sand-2)}
.facts b{font-family:var(--display);font-weight:600;font-size:26px;color:var(--bleu-f)}
.facts div:nth-child(2) b{color:var(--vert)}.facts div:nth-child(3) b{color:var(--orange)}
.panel{background:var(--sand);border:1px solid var(--line);border-radius:var(--r)}
.panel .tag{border-radius:6px;color:var(--soft)}
.hero-grid .panel.has-photo:not(.est-logo){aspect-ratio:4/5;border:0;padding:12px;background:var(--arc);border-radius:999px 999px 10px 10px;box-shadow:0 18px 40px -26px rgba(44,36,32,.5)}
.hero-grid .panel.has-photo:not(.est-logo) img{border-radius:999px 999px 4px 4px}
.hero-grid .panel.est-logo{border:0;background:transparent;aspect-ratio:1}
.hero-grid .panel.est-logo img{padding:0}

/* Cartes : chaque carte prend une couleur de l'arche */
.box{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.box h3{font-size:24px}
.cards-photos .box{border-top:5px solid var(--bleu)}
.cards-photos .box:nth-child(6n+2){border-top-color:var(--vert)}.cards-photos .box:nth-child(6n+3){border-top-color:var(--jaune)}
.cards-photos .box:nth-child(6n+4){border-top-color:var(--orange)}.cards-photos .box:nth-child(6n+5){border-top-color:var(--rouge)}.cards-photos .box:nth-child(6n){border-top-color:var(--violet)}
.box .panel{border-radius:0}
.box a.more{color:var(--bleu-f)}

/* Listes */
.facts-i{border-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.facts-i li,.facts-i li.avec-icone{display:grid;grid-template-columns:1fr;gap:8px;align-content:start;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--cream)}
.facts-i li .soft{grid-column:auto}
.facts-i b{font:600 19px/1.3 var(--display);color:var(--ink)}
.icone{width:48px;height:48px;border:0;background:#fff;color:var(--bleu);box-shadow:0 0 0 1px var(--line)}
.facts-i li:nth-child(6n+2) .icone{color:var(--vert)}.facts-i li:nth-child(6n+3) .icone{color:#c99a1c}
.facts-i li:nth-child(6n+4) .icone{color:var(--orange)}.facts-i li:nth-child(6n+5) .icone{color:var(--rouge)}.facts-i li:nth-child(6n) .icone{color:var(--violet)}
.rows{border-top:3px solid var(--jaune)}
.rows li h3{font-size:21px}
.notes div{border-top:3px solid var(--vert);color:var(--soft)}
.notes div:nth-child(3n+2){border-top-color:var(--jaune)}.notes div:nth-child(3n){border-top-color:var(--bleu)}
.notes b{font-family:var(--display);font-weight:600;color:var(--ink)}

/* En-têtes de pages */
.phead.j{background:var(--cream)}
.phead.j .lead{color:var(--soft)}
.phead.j .kicker{color:var(--label)}
.subnav{gap:6px 22px}
.subnav a{border:0;padding:4px 0;background:none;color:var(--bleu-f);text-decoration:underline;text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:5px}
.subnav a:hover{color:var(--ink)}
section[id]{scroll-margin-top:110px}

/* Bandeau d'appel, inscriptions */
.band,.band .inner{background:var(--bleu-t)}
.band .inner{border-radius:var(--r)}
.sign{border:1px solid var(--line);border-top:5px solid var(--bleu);border-radius:var(--r);background:#fff}
.signup .sign:nth-child(2){border-top-color:var(--orange)}.signup .sign:nth-child(3){border-top-color:var(--vert)}
.sign .lvl{font-family:var(--display);font-weight:600;color:var(--ink)}
.stage div,.stage-card{border-radius:var(--r)}
.notice{border-color:var(--sand-2);background:var(--cream);border-radius:10px}

/* Partenaires et qualifications */
.qualif{border-radius:var(--r);border-top:5px solid var(--bleu)}
.qualif:nth-child(6n+2){border-top-color:var(--vert)}.qualif:nth-child(6n+3){border-top-color:var(--jaune)}
.qualif:nth-child(6n+4){border-top-color:var(--orange)}.qualif:nth-child(6n+5){border-top-color:var(--rouge)}.qualif:nth-child(6n){border-top-color:var(--violet)}

/* Tableaux, dates à retenir, diaporama */
.tw{border:1px solid var(--line);border-radius:var(--r);background:#fff}
th{background:var(--cream);color:var(--label);font-weight:600}
td,th{border-color:var(--line)!important}
td.lv{font-family:var(--display);font-weight:600;color:var(--bleu-f)}
.formula div{border:1px solid var(--line);border-radius:var(--r);border-left:5px solid var(--jaune)}
.formula div:nth-child(3n+2){border-left-color:var(--vert)}.formula div:nth-child(3n){border-left-color:var(--orange)}
.formula b{font-family:var(--display);font-weight:600;font-size:36px;color:var(--bleu-f)}
.diapo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.diapo-btn{border-color:var(--sand-2)}
.diapo-points button{border-color:var(--bleu)}
.diapo-points button[aria-current="true"]{background:var(--bleu)}

/* Coordonnées et formulaires */
.cgrid div{border-top-color:var(--jaune)}
.cgrid .k{color:var(--label)}
input,textarea,select{border-radius:10px}
input:focus,textarea:focus{border-color:var(--bleu)}

/* Pied de page : trois vagues douces, bleu, vert, puis le crème du pied */
footer{background:var(--cream);border-top:0;position:relative;margin-top:110px}
footer::before{content:"";position:absolute;left:0;right:0;top:-89px;height:90px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 26c120 20 240 20 360 0s240-20 360 0 240 20 360 0 240-20 360 0v64H0z' fill='%23d6e6f6'/%3E%3Cpath d='M0 50c120-18 240-18 360 0s240 18 360 0 240-18 360 0 240 18 360 0v40H0z' fill='%23d9eedc'/%3E%3Cpath d='M0 72c120 14 240 14 360 0s240-14 360 0 240 14 360 0 240-14 360 0v18H0z' fill='%23fcf7ee'/%3E%3C/svg%3E") center/100% 100% no-repeat}
footer h4{color:var(--label)}
footer a{color:var(--soft)}
footer a:hover{color:var(--bleu-f)}
.flogos img{height:110px}

@media (max-width:640px){.hero-grid .panel.has-photo:not(.est-logo){display:none}.hero-grid .panel.est-logo{width:min(240px,70%);margin-inline:auto}.facts{grid-template-columns:1fr 1fr}footer{margin-top:70px}footer::before{top:-59px;height:60px}}
@media (max-width:480px){.btn{width:100%;justify-content:center}.ctas{display:grid}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}