/* --------------------------------------------------------------------------
   Socle du site : bandeau de navigation fin et pied de site, communs aux 11 fiches.
   Posé par tools/socle.py. Chaque page porte sa couleur dans --ton.

   Écran large : bandeau de 44 px collé en haut, menus déroulants par domaine.
   Téléphone   : barre de 52 px posée SUR la photo (transparente), qui devient pleine
                 en défilant et se cache quand on descend (immersion) ; menu hamburger
                 plein écran, domaines en accordéon.
   Impression  : ni bandeau ni pied, le PDF reste la fiche seule.
   -------------------------------------------------------------------------- */
.site-bandeau,.site-pied{--ton:#04260C;font-family:var(--texte,"Barlow",Arial,sans-serif);color:#fff}
.site-bandeau a,.site-pied a{color:inherit;text-decoration:none}
.site-bandeau ul,.site-pied ul{list-style:none;margin:0;padding:0}
.site-logo img{display:block;height:22px;width:auto}
.site-bascule{position:absolute;opacity:0;pointer-events:none}
.site-langue{display:flex;gap:2px;margin:0;font-weight:600;font-size:13px;letter-spacing:.04em}
.site-langue a{padding:3px 7px;border-radius:4px;opacity:.65}
.site-langue a[aria-current]{opacity:1;background:rgba(255,255,255,.18)}
.site-langue a[aria-disabled]{cursor:default}

/* ============================ écran large ============================ */
@media screen and (min-width:900px){
  .site-bandeau{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;height:44px;
    padding:0 max(20px, calc((100% - 1536px) / 2 + 20px));background:var(--ton);box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .site-burger{display:none}
  .site-nav{flex:1;display:flex;align-items:center;justify-content:space-between}
  .site-nav > ul{display:flex;align-items:center;gap:6px}
  .site-nav > ul > li > a,.site-nav summary{display:block;padding:7px 12px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
  .site-nav summary{list-style:none}
  .site-nav summary::-webkit-details-marker{display:none}
  .site-nav summary::after{content:"";display:inline-block;margin-left:7px;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-3px) rotate(45deg);opacity:.7}
  .site-nav > ul > li > a:hover,.site-nav summary:hover,.site-nav details[open] summary{background:rgba(255,255,255,.12)}
  .site-nav [aria-current="page"]{box-shadow:inset 0 -2px 0 #8CC152}
  .site-nav .menu{position:relative;display:flex;align-items:center}
  .site-nav .menu > .menu-tete{padding-right:4px}
  .site-nav .menu summary{padding:7px 9px}
  .site-nav .menu summary::after{margin-left:0}
  .site-nav .dans > .menu-tete{box-shadow:inset 0 -2px 0 #8CC152}
  .site-nav .menu:hover > .menu-tete,.site-nav .menu:hover summary{background:rgba(255,255,255,.12)}
  .site-nav details ul::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
  .site-nav details ul{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;padding:6px;border-radius:8px;
    background:var(--ton);box-shadow:0 12px 30px -10px rgba(0,0,0,.55)}
  .site-nav details ul a{display:block;padding:8px 12px;border-radius:5px;font-size:14px}
  .site-nav details ul a:hover{background:rgba(255,255,255,.12)}
  .site-contact{background:#8CC152;color:#0c2a10 !important}
  .site-outils{display:flex;align-items:center;gap:16px}
  .site-scheier{font-size:13px;opacity:.8}
  .site-scheier::after{content:" ↗"}
}

/* ============================ téléphone ============================ */
@media screen and (max-width:899px){
  body{padding-top:0}
  .site-bandeau{position:fixed;top:0;left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;
    padding:0 6px 0 16px;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));transition:background .25s,transform .25s}
  .site-bandeau.plein{background:var(--ton);box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .site-bandeau.cache{transform:translateY(-100%)}
  .site-logo img{height:20px}
  .site-burger{position:relative;z-index:2;width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
  .site-burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
  .site-bascule:checked ~ .site-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-bascule:checked ~ .site-burger span:nth-child(2){opacity:0}
  .site-bascule:checked ~ .site-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-nav{position:fixed;inset:0;z-index:1;padding:72px 22px 28px;background:var(--ton);overflow-y:auto;
    display:flex;flex-direction:column;justify-content:space-between;visibility:hidden;opacity:0;transition:opacity .2s}
  .site-bascule:checked ~ .site-nav{visibility:visible;opacity:1}
  .site-nav > ul > li{border-bottom:1px solid rgba(255,255,255,.14)}
  .site-nav > ul > li > a,.site-nav summary{display:block;padding:16px 2px;font-size:19px;font-weight:600}
  .site-nav summary{list-style:none;display:flex;justify-content:space-between}
  .site-nav summary::-webkit-details-marker{display:none}
  .site-nav summary::after{content:"+";font-weight:400;opacity:.8}
  .site-nav details[open] summary::after{content:"−"}
  .site-nav .menu{position:relative}
  .site-nav .menu > .menu-tete{padding-right:56px}
  .site-nav .menu summary{position:absolute;top:0;right:0;width:52px;height:56px;padding:0;justify-content:center;align-items:center;font-size:22px}
  .site-nav .dans > .menu-tete{color:#A5D46A}
  .site-nav details ul{padding:0 0 12px 12px}
  .site-nav details ul a{display:block;padding:10px 0;font-size:16px;opacity:.9}
  .site-nav [aria-current="page"]{color:#A5D46A}
  .site-contact{margin-top:18px;text-align:center;border-radius:10px;background:#8CC152;color:#0c2a10 !important}
  .site-nav > ul > li:last-child{border:0}
  .site-outils{display:flex;align-items:center;justify-content:space-between;padding-top:24px}
  .site-langue a{font-size:15px;padding:6px 12px}
  .site-scheier::after{content:" ↗"}
}

/* ============================ pied de site : une ligne ============================ */
.site-pied{background:var(--ton);position:relative}
.site-pied p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;max-width:1536px;margin:0 auto;padding:12px 20px;font-size:13px}
.site-pied p > a,.site-pied p > span:first-child{opacity:.85}
.site-pied p > a:hover{opacity:1;text-decoration:underline}
.site-pied .site-langue{margin-left:6px}
@media screen and (max-width:899px){.site-pied p{justify-content:flex-start;gap:8px 16px;padding:16px 18px 22px}.site-pied p > span:first-child{flex-basis:100%}}
@media print{.site-bandeau,.site-pied,.site-scene{display:none !important}}

/* ============================ la scène ============================
   Portraits (1024 px) et paysages (1536 px) n'ont pas la même largeur. Sur un écran plus large
   que la fiche, les marges ne restent pas blanches : la photo de la fiche, floutée et assombrie,
   remplit l'écran, et la fiche est posée dessus comme un document. Bandeau et pied restent pleine
   largeur, ce sont eux qui donnent l'unité entre les pages. */
@media screen and (min-width:900px){
  body{background:#16211a}
  .site-scene{position:fixed;inset:-60px;z-index:-1;background-position:center 30%;background-size:cover;background-repeat:no-repeat;
    filter:blur(34px) brightness(.5) saturate(1.15)}
  .fiche{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px -20px rgba(0,0,0,.7)}
  .site-pied{position:relative}
}

@media screen and (max-width:899px){.site-scene{display:none}}

/* ============================ fiche PDF contre coordonnées (fiche-pdf.js) ============================ */
.hm-fenetre{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;font-family:var(--texte,"Barlow",Arial,sans-serif)}
.hm-fenetre[hidden]{display:none}
.hm-voile{position:absolute;inset:0;background:rgba(6,18,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hm-boite{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;color:#122617;border-radius:16px;padding:28px 28px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.hm-fermer{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F4EF;font-size:22px;line-height:1;cursor:pointer;color:#22332A}
.hm-sur{margin:0 0 4px;font-weight:600;color:#096338;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.hm-sur:empty{display:none}
.hm-boite h2{margin:0 0 8px;font:700 30px/1.05 var(--display,"Antonio",sans-serif);text-transform:uppercase;color:#04260C}
.hm-accroche{margin:0 0 18px;font-size:15.5px;line-height:1.45;color:#3B4740}
.hm-boite form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.hm-boite label{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:600}
.hm-boite label.large{grid-column:1 / -1}
.hm-boite em{color:#B3261E;font-style:normal}
.hm-boite input,.hm-boite select{font:inherit;font-weight:400;padding:10px 11px;border:1px solid #C9D2C6;border-radius:8px;background:#fff;color:inherit}
.hm-boite input:focus,.hm-boite select:focus{outline:2px solid #8CC152;outline-offset:1px;border-color:transparent}
.hm-accord{display:block !important;font-weight:400 !important;padding-left:26px;position:relative}
.hm-accord input{position:absolute;left:0;top:3px;margin:0}
.hm-piege{position:absolute !important;left:-9999px}
.hm-msg{margin:0;min-height:0;font-size:14px}
.hm-msg.ko{color:#8A1F17}.hm-msg.ok{color:#1F4D12}
.hm-envoyer{padding:13px;border:0;border-radius:10px;background:#8CC152;color:#0c2a10;font:600 17px/1 var(--texte,"Barlow",sans-serif);cursor:pointer}
.hm-envoyer:disabled{opacity:.6}
html.hm-ouverte{overflow:hidden}
.hm-bouton{position:fixed;z-index:40;right:22px;bottom:22px;display:flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border-radius:40px;
  background:#8CC152;color:#0c2a10;font:600 15px/1 var(--texte,"Barlow",sans-serif);text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.hm-bouton::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v11m0 0 4-4m-4 4-4-4M5 19h14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3v11m0 0 4-4m-4 4-4-4M5 19h14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
@media (max-width:560px){.hm-boite{padding:24px 18px 18px}.hm-boite form{grid-template-columns:1fr}}
/* téléphone : le bouton n'apparaît qu'une fois la photo d'ouverture dépassée, et se retire en bas de page,
   pour ne jamais masquer un titre ni la ligne légale */
@media (max-width:899px){
  .hm-bouton{right:12px;bottom:12px;padding:10px 14px 10px 12px;font-size:14px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
  .hm-bouton.visible{opacity:1;transform:none;pointer-events:auto}
}
@media print{.hm-fenetre,.hm-bouton{display:none !important}}

/* ============================ accueil : ce qui n'est pas encore en ligne ============================
   Les cartes de l'affiche sans page publiée (socle.py leur retire le lien) restent lisibles mais
   passent légèrement désaturées ; celles qui mènent quelque part réagissent au survol. Écran seulement : la
   fiche PDF de l'accueil garde les couleurs de l'affiche. */
@media screen{
  .accueil a[data-page][aria-disabled]{filter:grayscale(.55);opacity:.78;cursor:default;transition:opacity .2s}
  .accueil a[data-page][aria-disabled]:hover{opacity:.88}
  .accueil a[data-page][href]{transition:filter .2s}
  .accueil a[data-page][href]:hover{filter:brightness(1.08) saturate(1.1)}
}