/* =====================================================================
   FRANCE LEONBERG GROUP — feuille de style institutionnelle
   Signature : bleu marine + or discret + blanc chaud, serif classique,
   allure d'association de race officielle. Fait main, sans framework.
   ===================================================================== */

:root{
  --navy-900:#081426;
  --navy-800:#0d2340;   /* couleur primaire */
  --navy-700:#153158;
  --navy-600:#1d4173;
  --gold-700:#836316;
  --gold-600:#9a7b23;   /* or lisible sur blanc */
  --gold-500:#b8912f;   /* or accent */
  --gold-400:#c9a94a;   /* or clair sur marine */
  --gold-200:#e7dab1;
  --paper:#ffffff;
  --cream:#faf8f2;      /* fond de section chaud */
  --cream-2:#f4f0e5;
  --ink:#1b2531;
  --muted:#5a6470;
  --line:#e5e1d5;
  --line-2:#d8d3c3;
  --rule-navy:rgba(201,169,74,.30);

  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:"Helvetica Neue",Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --wrap:1140px;
  --read:760px;
  --shadow:0 1px 2px rgba(13,35,64,.06),0 8px 30px rgba(13,35,64,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--serif);
  font-size:18px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-700);text-underline-offset:3px;text-decoration-color:var(--gold-400)}
a:hover{color:var(--gold-700)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* lien d'évitement (accessibilité clavier) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold-500);color:var(--navy-900);padding:10px 18px;font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-decoration:none}
.skip-link:focus{left:8px;top:8px}

/* ---------- Éléments typographiques partagés ---------- */
.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold-600);
  margin:0 0 .8rem;
  display:inline-block;
}
.kicker.on-navy{color:var(--gold-400)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy-800);font-weight:700;line-height:1.18}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:.005em;margin:.2rem 0 .6rem}
h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.4rem 0 .9rem}
h3{font-size:1.2rem;margin:1.8rem 0 .5rem;color:var(--navy-700)}
p{margin:0 0 1.1rem}
hr.rule{border:0;height:1px;background:var(--line);margin:2.4rem 0}
.lead{font-size:1.18rem;color:#2b3644}

/* petit filet or décoratif */
.goldrule{width:64px;height:3px;background:linear-gradient(90deg,var(--gold-500),var(--gold-200));border:0;margin:0 0 1.4rem}
.goldrule.center{margin-left:auto;margin-right:auto}

/* ---------- Barre utilitaire ---------- */
.topbar{background:var(--navy-900);color:#c9d3e0;font-family:var(--sans);font-size:.78rem;letter-spacing:.03em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#dfe6ef;text-decoration:none}
.topbar a:hover{color:var(--gold-400)}
.topbar .tb-tag{color:var(--gold-400);text-transform:uppercase;letter-spacing:.18em;font-weight:700}

/* ---------- Bandeau d'en-tête / emblème ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;gap:22px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.brand .emblem{width:64px;height:auto;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(13,35,64,.16))}
.brand .wordmark{display:flex;flex-direction:column;line-height:1}
.brand .wm-name{
  font-family:var(--serif);font-weight:700;color:var(--navy-800);
  font-size:clamp(1.15rem,2.4vw,1.6rem);letter-spacing:.12em;text-transform:uppercase;
}
.brand .wm-sub{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-600);margin-top:.5rem;font-weight:600;
}
.masthead .mh-aside{margin-left:auto;text-align:right;font-family:var(--sans);font-size:.8rem;color:var(--muted);line-height:1.5}
.masthead .mh-aside strong{display:block;color:var(--navy-700);font-size:.86rem;letter-spacing:.02em}

/* ---------- Navigation principale ---------- */
.mainnav{background:var(--navy-800);position:relative;z-index:40}
.mainnav .wrap{display:flex;align-items:stretch;gap:0}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.mainnav > .wrap > ul{width:100%}
.mainnav li{position:relative}
.mainnav a,.mainnav .nav-top{
  display:flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:.83rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  color:#e7ecf3;text-decoration:none;padding:15px 18px;border:0;background:transparent;cursor:pointer;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s,background .15s;
}
.mainnav .nav-top::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--gold-400);border-bottom:1.5px solid var(--gold-400);transform:rotate(45deg);margin-left:4px;margin-top:-3px;opacity:.85}
.mainnav a:hover,.mainnav .nav-top:hover,.mainnav li:focus-within > a,.mainnav li:focus-within > .nav-top{
  color:#fff;background:var(--navy-700);border-bottom-color:var(--gold-400)
}
.mainnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold-500);background:var(--navy-700)}

/* sous-menus (desktop) */
.mainnav ul ul{
  position:absolute;top:100%;left:0;min-width:264px;flex-direction:column;flex-wrap:nowrap;
  background:var(--navy-800);border:1px solid var(--rule-navy);border-top:3px solid var(--gold-500);
  box-shadow:0 18px 40px rgba(8,20,38,.35);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;
}
.mainnav li:hover > ul,.mainnav li:focus-within > ul{opacity:1;visibility:visible;transform:translateY(0)}
.mainnav ul ul a{
  padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.06);text-transform:none;
  letter-spacing:.01em;font-size:.86rem;font-weight:500;border-left:3px solid transparent
}
.mainnav ul ul a:hover,.mainnav ul ul a[aria-current="page"]{background:var(--navy-700);border-left-color:var(--gold-400);border-bottom-color:rgba(255,255,255,.06)}

/* navigation mobile (disclosure sans JS) */
.mobnav{display:none;background:var(--navy-800);color:#fff}
.mobnav summary{
  list-style:none;cursor:pointer;padding:13px 24px;font-family:var(--sans);
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:10px
}
.mobnav summary::-webkit-details-marker{display:none}
.mobnav summary .bars{display:inline-block;width:20px;height:2px;background:var(--gold-400);position:relative}
.mobnav summary .bars::before,.mobnav summary .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--gold-400)}
.mobnav summary .bars::before{top:-6px}.mobnav summary .bars::after{top:6px}
.mobnav .mob-panel{padding:6px 0 16px;border-top:1px solid var(--rule-navy)}
.mobnav .mob-group{padding:6px 24px}
.mobnav .mob-group > span{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);margin:10px 0 4px;font-weight:700}
.mobnav a{display:block;color:#e7ecf3;text-decoration:none;padding:8px 24px;font-size:.98rem}
.mobnav a:hover,.mobnav a[aria-current="page"]{background:var(--navy-700);color:#fff}

/* ---------- Fil d'Ariane ---------- */
.crumbs{background:var(--cream);border-bottom:1px solid var(--line)}
.crumbs .wrap{padding:11px 24px;font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.crumbs a{color:var(--navy-700);text-decoration:none}
.crumbs a:hover{color:var(--gold-700)}
.crumbs span[aria-current]{color:var(--ink)}
.crumbs .sep{margin:0 8px;color:var(--gold-500)}

/* ---------- Héros (accueil) ---------- */
.hero{position:relative;background:var(--navy-800);color:#eef2f7;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(201,169,74,.14),transparent 46%),
    linear-gradient(180deg,var(--navy-700),var(--navy-900));
}
.hero .watermark{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:min(460px,52vw);opacity:.06;z-index:-1;pointer-events:none}
.hero .wrap{padding:74px 24px}
.hero .frame{max-width:720px;border-left:3px solid var(--gold-500);padding-left:28px}
.hero h1{color:#fff;font-size:clamp(2.1rem,5vw,3.35rem);margin:.4rem 0 1rem}
.hero .lead{color:#d6deea;font-size:clamp(1.05rem,2.2vw,1.28rem);max-width:60ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* boutons */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  padding:13px 24px;border-radius:2px;border:1.5px solid transparent;transition:all .16s;cursor:pointer
}
.btn-gold{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500)}
.btn-gold:hover{background:var(--gold-400);border-color:var(--gold-400);color:var(--navy-900)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--gold-400);color:var(--gold-400)}
.btn-navy{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn-navy:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff}

/* ---------- Bandeau piliers ---------- */
.pillars{background:var(--navy-900);border-top:1px solid var(--rule-navy)}
.pillars .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-navy)}
.pillars .cell{background:var(--navy-900);padding:26px 22px;color:#dfe6ef}
.pillars .cell .n{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold-400);text-transform:uppercase;font-weight:700}
.pillars .cell h3{color:#fff;font-size:1.06rem;margin:.5rem 0 .4rem}
.pillars .cell p{font-size:.92rem;color:#b9c4d2;margin:0;line-height:1.6}

/* ---------- Sections de contenu ---------- */
.section{padding:56px 0}
.section.cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.tight{padding:40px 0}
.section-head{max-width:var(--read);margin-bottom:.5rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* mise en page article + aside */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.layout.solo{grid-template-columns:minmax(0,var(--read));justify-content:center}
.prose{max-width:var(--read)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prose li{margin:.4rem 0}
.prose li::marker{color:var(--gold-600)}
.prose blockquote{
  margin:1.6rem 0;padding:.4rem 0 .4rem 22px;border-left:3px solid var(--gold-500);
  font-style:italic;color:#33404f;background:linear-gradient(90deg,var(--cream),transparent)
}
.prose .note{font-size:.92rem;color:var(--muted);font-style:italic}
.signature{font-family:var(--serif);font-style:italic;color:var(--navy-700);font-size:1.1rem;margin-top:1.4rem}

/* aside / carte latérale */
.aside{position:sticky;top:22px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold-500);box-shadow:var(--shadow)}
.card .card-h{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--navy-700);padding:16px 20px 0}
.card .card-b{padding:12px 20px 20px;font-size:.95rem;line-height:1.65}
.card .card-b p{margin:0 0 .7rem}
.card .card-b .lbl{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-600);font-weight:700;display:block;margin-bottom:2px}
.card.navy{background:var(--navy-800);border-color:var(--navy-800);border-top-color:var(--gold-500);color:#dbe3ee}
.card.navy .card-h{color:var(--gold-400)}
.card.navy .card-b{color:#c8d2df}
.card.navy .card-b a{color:#fff;text-decoration-color:var(--gold-400)}

/* liste institutionnelle (index de pages) */
.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-bottom:1px solid var(--line)}
.index-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;text-decoration:none;color:var(--navy-700);font-size:.98rem}
.index-list a:hover{color:var(--gold-700)}
.index-list a::after{content:"›";color:var(--gold-500);font-size:1.1rem}

/* ---------- Grille de cartes ---------- */
.cardgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.tile{background:var(--paper);border:1px solid var(--line);padding:0;transition:box-shadow .18s,transform .18s;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.tile:hover{transform:translateY(-2px)}
.tile .tile-photo{width:100%;height:160px;object-fit:cover;object-position:center 38%;display:block;flex:0 0 auto}
.tile .tile-body{padding:20px 22px 24px}
.tile .t-k{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-600);font-weight:700}
.tile h3{margin:.5rem 0 .5rem;font-size:1.12rem}
.tile p{font-size:.94rem;color:var(--muted);margin:0}
.tile a.tile-link{text-decoration:none;color:inherit;display:block}

/* ---------- Bandeau photo (accueil) ---------- */
.hero-photo{position:relative;background:var(--navy-900);border-top:3px solid var(--gold-500);isolation:isolate}
.hero-photo img{width:100%;height:clamp(240px,42vw,480px);object-fit:cover;display:block}
.hero-photo .cap{
  position:absolute;right:24px;bottom:20px;max-width:340px;
  background:rgba(8,20,38,.72);color:#eef2f7;font-family:var(--sans);
  font-size:.78rem;line-height:1.55;padding:12px 16px;
  border-left:3px solid var(--gold-500);backdrop-filter:blur(2px)
}

/* ---------- Photo éditoriale dans un article ---------- */
.prose-photo{margin:1.8rem 0;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--paper)}
.prose-photo img{display:block;width:100%;height:auto}
.prose-photo figcaption{
  font-family:var(--sans);font-size:.78rem;color:var(--muted);
  padding:10px 14px;border-top:3px solid var(--gold-500);letter-spacing:.01em
}

/* ---------- Liste des étalons ---------- */
.stud-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.stud-list li{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--paper)}
.stud-list li .idx{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--gold-600);min-width:26px;letter-spacing:.04em}
.stud-list li .nm{font-family:var(--serif);font-weight:600;color:var(--navy-800);font-size:1rem;line-height:1.35}

/* ---------- Niveaux de cotation ---------- */
.levels{display:grid;gap:16px;counter-reset:lvl}
.level{border:1px solid var(--line);border-left:4px solid var(--gold-500);background:var(--paper);padding:18px 22px;box-shadow:var(--shadow)}
.level h3{margin:0 0 .3rem;display:flex;align-items:baseline;gap:12px;color:var(--navy-800)}
.level h3 .lvnum{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--navy-700);padding:3px 9px;border-radius:2px;font-weight:700}
.level h3 .lvname{color:var(--gold-700);letter-spacing:.04em}
.level p{margin:.3rem 0 0;font-size:.95rem;color:#33404f}

/* ---------- Table repères ---------- */
.spec{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.spec caption{text-align:left;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:700;margin-bottom:.6rem}
.spec th,.spec td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{background:var(--cream);color:var(--navy-700);font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;width:42%}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}

/* ---------- Callout / gouvernance / adhésion ---------- */
.callout{background:var(--cream);border:1px solid var(--line-2);border-left:4px solid var(--gold-500);padding:22px 24px;margin:1.6rem 0}
.callout .kicker{margin-bottom:.4rem}
.gov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:18px;margin-top:1rem}
.gov-item{background:var(--paper);border:1px solid var(--line);padding:18px 20px}
.gov-item .role{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:700}
.gov-item .who{font-family:var(--serif);color:var(--navy-800);font-size:1.1rem;font-weight:700;margin-top:.2rem}
.gov-item p{margin:.3rem 0 0;font-size:.9rem;color:var(--muted)}

/* bande d'adhésion / appel */
.cta-band{background:var(--navy-800);color:#eef2f7;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 90% 0,rgba(201,169,74,.16),transparent 55%);pointer-events:none}
.cta-band .wrap{padding:52px 24px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band .ct-txt{flex:1 1 420px}
.cta-band h2{color:#fff;margin:.2rem 0 .6rem}
.cta-band p{color:#cdd6e2;margin:0;max-width:56ch}
.cta-band .ct-act{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 4px;position:relative;font-family:var(--serif);font-weight:700;color:var(--navy-800);font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--gold-600);font-size:1.5rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 4px 16px;color:#33404f}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--navy-900);color:#aab6c6;font-size:.9rem;border-top:3px solid var(--gold-500)}
.site-footer .wrap{padding:52px 24px 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px}
.site-footer .f-brand{display:flex;gap:16px;align-items:flex-start}
.site-footer .f-brand .emblem{width:52px;flex:0 0 auto}
.site-footer .f-name{font-family:var(--serif);color:#fff;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:1.02rem}
.site-footer .f-tag{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400);margin-top:.4rem}
.site-footer p{margin:.7rem 0 0;line-height:1.65}
.site-footer h4{color:#fff;font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1rem;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.5rem 0}
.site-footer a{color:#c3cddb;text-decoration:none}
.site-footer a:hover{color:var(--gold-400)}
.site-footer .f-contact .lbl{display:block;color:var(--gold-400);font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin-top:.9rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#8794a6}
.foot-bottom .disc{max-width:70ch}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:36px}
  .aside{position:static}
  .pillars .grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .mainnav,.masthead .mh-aside{display:none}
  .mobnav{display:block}
  .masthead .wrap{padding-top:16px;padding-bottom:16px}
  .brand .emblem{width:52px}
  .hero .wrap{padding:52px 24px}
  .cta-band .wrap{padding:40px 24px}
  .foot-grid{grid-template-columns:1fr}
  .pillars .grid{grid-template-columns:1fr}
  .hero-photo .cap{left:16px;right:16px;max-width:none;bottom:14px;font-size:.74rem;padding:10px 14px}
}

/* ---------- Impression ---------- */
@media print{
  .topbar,.mainnav,.mobnav,.cta-band,.hero-cta,.site-footer{display:none!important}
  body{font-size:12pt;color:#000}
  .hero,.pillars{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}