/* Fondation Dosne-Thiers — modèle Cenitz (voir outils/MODELE-CENITZ.md), une seule feuille */
@font-face { font-family: "Institut"; src: url(/assets/polices/institut-de-france.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Graphie"; src: url(/assets/polices/graphie-book.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphie"; src: url(/assets/polices/graphie-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Graphie"; src: url(/assets/polices/graphie-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noir: #000;
  --sombre: #1e1f17;
  --filet-sombre: #35362f;
  --vert: #648778;
  --eau: #77e2b6;
  --gris-clair: #b4b5a8;
  --bande: #dddad5;
  --filet-bouton: #a2a2a2;
  --filet-accordeon: #d4d4d4;
  --serif: "Institut", Georgia, serif;
  --sans: "Graphie", system-ui, sans-serif;
  --large: 1120px;
  --marge: clamp(20px, 8.3vw, 160px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--noir); font: 16px/26px var(--sans); }
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p a, li a, td a { color: var(--vert); text-decoration: none; }
p a:hover, li a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 400; margin: 0 0 .5em; text-wrap: balance; }
h5 { font: 600 16px/16px var(--sans); margin: 20px 0 0; }
p, ul, ol { margin: 0 0 1em; }
.invisible, .evitement:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.evitement:focus { position: fixed; z-index: 2000; top: 8px; left: 8px; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
.centre { text-align: center; }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-width: 310px; min-height: 58px; padding: 8px 20px;
  border: 1px solid var(--noir); font: 400 16px/16px var(--serif); letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; text-align: center;
  color: var(--noir) !important; background: transparent; transition: background .3s, color .3s, border-color .3s; }
.bouton:hover { background: var(--noir); color: #fff !important; }
.bouton-large { display: flex; width: 100%; min-height: 80px; border-color: var(--filet-bouton); }
.bouton-nu { border: 0; min-height: 80px; }
.bouton-nu:hover { background: none; color: var(--vert) !important; }
.bouton-don { display: inline-block; padding: 30px 90px; background: var(--vert); color: #fff !important; font: 400 18px/25px var(--serif);
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; text-align: center; transition: background .3s, color .3s; }
.bouton-don:hover { background: var(--eau); color: var(--noir) !important; }
.filet-vertical { display: block; width: 1px; height: 70px; background: var(--noir); margin: 30px auto; }

/* ---------- bouton de menu, recherche ---------- */
.menu > summary { position: absolute; z-index: 1200; top: 60px; left: 50px; width: 100px; height: 100px; list-style: none; cursor: pointer;
  border: 1px solid rgba(0,0,0,.3); background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; transition: border-color .3s; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span { display: block; width: 25px; height: 2px; border-radius: 3px; background: var(--noir); transition: margin .5s; }
.menu > summary span:nth-child(2) { margin-left: 14px; }
.menu > summary:hover { border-color: var(--eau); }
.menu > summary:hover span:nth-child(2) { margin-left: 0; }
.recherche-bouton { position: absolute; z-index: 1300; list-style: none; cursor: pointer; top: 60px; right: 50px; width: 100px; height: 100px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.3); color: #fff; transition: border-color .3s; }
.recherche-bouton:hover { border-color: var(--eau); color: #fff; }
.recherche-bouton::-webkit-details-marker { display: none; }
.recherche-bouton .croix, .recherche[open] .recherche-bouton .loupe { display: none; }
.recherche[open] .recherche-bouton .croix { display: block; }
.recherche[open] .recherche-bouton { position: fixed; border-color: var(--vert); }
.recherche-panneau { background: var(--sombre); color: #fff; padding: 172px 72px 60px; }
details.recherche .recherche-panneau { position: fixed; z-index: 1250; inset: 0 0 auto; max-height: 100vh; overflow-y: auto; min-height: 460px; }
.recherche[open]::before { content: ""; position: fixed; inset: 0; z-index: 1240; background: rgba(0,0,0,.45); }
.recherche-panneau input { width: 100%; background: transparent; border: 0; color: #fff; font: 400 48px/80px var(--serif); text-align: center; outline: none; }
.recherche-panneau input::placeholder { color: rgba(255,255,255,.45); }
.recherche-panneau input::-webkit-search-cancel-button { display: none; }
.recherche-resultats { list-style: none; max-width: 900px; margin: 30px auto 0; padding: 0; }
.recherche-resultats li { border-top: 1px solid var(--filet-sombre); }
.recherche-resultats a { display: block; padding: 18px 0; color: var(--gris-clair); text-decoration: none; }
.recherche-resultats a:hover { color: #fff; }
.recherche-resultats strong { display: block; font: 400 24px/30px var(--serif); margin-bottom: 6px; }
.recherche-resultats span { font-size: 14px; line-height: 22px; }
.recherche-resultats mark { background: none; color: var(--eau); }
.recherche-resultats .vide { padding: 18px 0; color: var(--gris-clair); text-align: center; }
.recherche-page { min-height: 70vh; }
/* sur fond sombre (accueil, actualité) */
.accueil .menu > summary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.actualite .menu > summary { background: transparent; border-color: rgba(255,255,255,.3); }
.accueil .menu > summary span, .actualite .menu > summary span { background: #fff; }

/* ---------- panneau du menu (à gauche) ---------- */
.menu[open] > summary { position: fixed; background: transparent; border-color: rgba(255,255,255,.3); }
.menu[open] > summary span { background: #fff; }
.panneau { position: fixed; z-index: 1100; inset: 0 auto 0 0; width: min(576px, 100vw); overflow-y: auto; background: var(--sombre);
  color: var(--gris-clair); padding: 200px 50px 50px; }
.menu[open]::before { content: ""; position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.45); }
.panneau-embleme { position: absolute; top: 60px; left: 409px; width: 115px; }
.panneau-embleme img { width: 100%; height: auto; }
.panneau ul { list-style: none; margin: 0; padding: 0; }
.panneau-rubriques > li > a { display: block; font: 400 33px/30px var(--serif); color: var(--gris-clair); text-decoration: none; padding: 10px 0; transition: color .3s; }
.panneau-rubriques a:hover, .panneau-rubriques a[aria-current] { color: #fff; text-decoration: none; }
.panneau-rubriques ul { display: none; padding: 4px 0 10px 2px; }
.panneau-rubriques li:hover > ul, .panneau-rubriques li:focus-within > ul { display: block; }
.panneau-rubriques ul a { font: 400 16px/28px var(--sans); color: var(--gris-clair); }
.panneau-bas { display: grid; grid-template-columns: 324px 1fr; margin-top: 40px; }
.panneau-liens a { font: 400 16px/25px var(--sans); color: var(--gris-clair); }
.panneau-liens a:hover { color: #fff; text-decoration: none; }
.suivez { font: 600 16px/24px var(--sans); color: #fff; margin: 0 0 6px; }
.reseaux { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.reseaux a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vert); color: #fff; transition: background .3s; }
.reseaux a:hover { background: var(--eau); color: var(--noir); }
.reseaux svg { width: 18px; height: 18px; }
.panneau .bouton-don { display: block; width: 100%; padding: 32px 20px; margin-top: 74px; }

/* ---------- en-tête de page : colonne blanche | photo ---------- */
.entete { display: grid; grid-template-columns: 55% 45%; min-height: 900px; }
.entete-texte { position: relative; padding: 271px 60px 80px 143px; }
.entete-logo { position: absolute; top: 61px; right: 60px; }
.entete-logo img { width: 295px; }
.entete h1 { font-size: 80px; line-height: 80px; margin: 0 0 50px; max-width: 639px; }
.entete h1::after { content: ""; display: block; width: 40px; height: 2px; background: var(--noir); margin-top: 106px; }
.chapo { max-width: 559px; }
.raccourcis { list-style: none; padding: 0; margin: 40px 0 0; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 559px; }
.raccourcis .bouton { width: 310px; }
.entete-image { background: var(--sombre) center / cover no-repeat; min-height: 100%; }

/* ---------- corps des pages ---------- */
.corps { max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 80px var(--marge) 120px; }
.corps > section + section { margin-top: 40px; }
.corps h2 { font-size: 80px; line-height: 80px; margin: 60px 0 50px; }
.corps h3 { font-size: 24px; line-height: 30px; }
.titres-centre h2, .titres-centre > section > h3 { text-align: center; }
.titres-centre h2 { font-weight: 100; }
.corps img { margin: 0 auto 30px; }
.colonnes { display: grid; gap: 60px; align-items: start; }
@media (min-width: 800px) { .colonnes-2 { grid-template-columns: 1fr 1fr; } .colonnes-3 { grid-template-columns: repeat(3, 1fr); } .colonnes-4 { grid-template-columns: repeat(4, 1fr); } }
.colonnes h2 { font-size: 20px; line-height: 26px; text-align: center; margin: 20px 0; font-weight: 400; }
.colonnes-3 { text-align: center; }
.colonnes h3 { font-size: 36px; line-height: 40px; text-align: center; margin: 0 0 30px; }
.colonnes h3::after { content: ""; display: block; width: 2px; height: 40px; background: var(--noir); margin: 30px auto 0; }
.colonnes h6 { font: 400 20px/24px var(--serif); margin: 0 0 16px; }
.colonnes-2 > div { text-align: left; }
.colonnes > div:has(> h3) { text-align: center; }
.corps h2.titre-moyen { font-size: 40px; line-height: 40px; margin-top: 40px; }
main details { border: 1px solid var(--filet-accordeon); padding: 0; margin: 0 0 -1px; }
main details > summary { cursor: pointer; font: 400 16px/20px var(--serif); letter-spacing: 1px; text-transform: uppercase; padding: 20px 50px 20px 24px; list-style: none; position: relative; }
details summary::-webkit-details-marker { display: none; }
main details > summary::after { content: "+"; position: absolute; right: 24px; top: 18px; font: 400 22px/1 var(--sans); }
main details[open] > summary::after { content: "–"; }
main details > :not(summary) { padding: 0 24px; }
details > ul { padding-left: 44px; }
details.voir-plus { border: 0; margin: 0; }
details.voir-plus summary { display: inline-flex; align-items: center; justify-content: center; min-width: 310px; min-height: 58px; border: 1px solid var(--noir); padding: 8px 20px; }
details.voir-plus summary::after { display: none; }
details.voir-plus[open] summary { background: var(--noir); color: #fff; }
details.voir-plus > :not(summary) { padding: 20px 0 0; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
td, th { border-bottom: 1px solid var(--filet-accordeon); padding: 6px 8px; text-align: left; vertical-align: top; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 30px 0; }
.galerie p { display: contents; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }
.visite-virtuelle iframe { width: 100%; height: 700px; border: 0; }

/* ---------- titres « Les / — actualités » ---------- */
.titre-tiret { font: 400 48px/58px var(--serif) !important; margin: 0 0 40px !important; text-align: left !important; }
.titre-tiret span { display: block; }
.titre-tiret span::before { content: ""; display: inline-block; width: 40px; height: 2px; background: var(--noir); vertical-align: middle; margin: 0 20px 0 0; }

/* ---------- accueil ---------- */
.hero { position: relative; height: 650px; color: #fff; overflow: hidden; background: var(--sombre); }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.hero-texte { position: relative; z-index: 1; padding: 164px var(--marge) 0; }
.hero-texte img { width: 449px; margin-bottom: 60px; }
.hero-texte h1 { font: 400 32px/32px var(--sans); }
@media (prefers-reduced-motion: reduce) { .hero video { display: none; } .hero { background: var(--sombre) url(/assets/img/accueil-affiche.jpg) center / cover; } }
.annonce { max-width: 1140px; margin: 130px auto 0; border: 1px solid rgba(0,0,0,.1); padding: 75px 20px 0; text-align: center; }
.annonce p { max-width: 668px; margin: 0 auto 40px; font: 400 20px/32px var(--serif); }
.annonce .filet-vertical { margin: 0 auto -35px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin-top: 130px; }
.duo-image img { width: 100%; height: 728px; object-fit: cover; margin: 0; }
.duo-texte { text-align: center; padding: 0 100px; }
.duo-texte h2 { font-size: 46px; line-height: 56px; margin: 0; }
.duo-texte p { max-width: 480px; margin: 0 auto; }
.accueil-actus { max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 130px var(--marge) 100px; }
.accueil-actus .bouton-large { max-width: 672px; margin: 0 auto; }
.olivier { background: var(--vert) url(/assets/img/motif-olivier.png) center / cover no-repeat; padding: 157px 0; }
.olivier > div { max-width: 1140px; margin: 0 auto; background: #fff; padding: 100px 50px 70px; text-align: center; }

/* ---------- cartes d'actualité ---------- */
.cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px 30px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte a { display: block; text-decoration: none !important; color: var(--noir); }
.carte-image { position: relative; display: block; }
.carte img { width: 100%; height: 264px; object-fit: cover; margin: 0; }
.carte .etiquette { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.etiquette { display: inline-block; background: var(--vert); color: #fff; font: 600 14px/41px var(--sans); padding: 0 29px; }
.carte-titre { display: block; text-align: center; padding: 30px 20px 0; }
.carte a:hover .carte-titre { color: var(--vert); }

/* ---------- actualité ---------- */
.entete-actu { background: var(--sombre); color: #fff; text-align: center; padding: 81px var(--marge) 380px; }
.bouton-retour { display: inline-flex !important; align-items: center; justify-content: center; width: 252px; height: 57px; border: 1px solid rgba(255,255,255,.3);
  font: 400 14px/1 var(--serif); letter-spacing: 1px; text-transform: uppercase; color: #fff !important; transition: border-color .3s; }
.bouton-retour:hover { border-color: var(--eau); text-decoration: none !important; }
.entete-actu h1 { font-size: 48px; line-height: 56px; max-width: 960px; margin: 44px auto 32px; }
.entete-actu .categorie { margin: 0; }
.image-une { position: relative; max-width: 960px; margin: -330px auto 0; }
.image-une img { width: auto; height: auto; max-width: 100%; max-height: 606px; margin: 0 auto; }
.fleche { position: absolute; top: 60px; color: #fff; padding: 10px; }
.fleche-prec { left: -170px; } .fleche-suiv { right: -170px; }
.fleche:hover { color: var(--eau); }
.texte-actu { max-width: 1200px; margin: 0 auto; padding: 50px 0 80px; }
.bande-grise { background: var(--bande); padding: 100px var(--marge); }
.bande-grise > * { max-width: var(--large); margin-left: auto; margin-right: auto; }
.bande-grise .bouton-large { max-width: 672px; margin: 0 auto; }

/* ---------- formulaire ---------- */
.formulaire { margin-top: 40px; }
.formulaire label { display: block; font-size: 16px; margin-bottom: 6px; }
.formulaire input:not([type=checkbox]), .formulaire select, .formulaire textarea { width: 100%; padding: 14px; border: 1px solid var(--filet-accordeon); background: #fff; font: inherit; color: inherit; border-radius: 0; }
.champs-2 { display: grid; gap: 0 30px; }
@media (min-width: 700px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.objet { display: none; }
.formulaire:has(option[value=bibliotheque]:checked) .objet-bibliotheque,
.formulaire:has(option[value=hotel]:checked) .objet-hotel,
.formulaire:has(option[value=crh]:checked) .objet-crh { display: block; }
.formulaire button { border: 0; cursor: pointer; }
.piege { position: absolute; left: -9999px; }
.message-formulaire { padding-top: 200px; min-height: 60vh; }

/* ---------- pied : trois colonnes égales, alignées haut et bas ---------- */
.pied { background: var(--sombre); color: #fff; }
.pied a { text-decoration: none !important; }
.pied-haut, .pied-bas { display: grid; grid-template-columns: repeat(3, 1fr); padding-left: 120px; padding-right: 120px; }
.pied-haut > * { margin: 0; }
.pied-haut { padding-top: 110px; padding-bottom: 100px; align-items: start; }
.pied-haut > :nth-child(2) { padding-left: 40px; }
.pied-haut > :last-child { text-align: right; }
.pied-titres { font: 400 36px/50px var(--serif); white-space: nowrap; }
.pied .bouton-don { white-space: nowrap; }
.pied-titres a { color: var(--gris-clair); }
.pied-titres a:hover, .pied-liens a:hover { color: #fff; }
.pied .reseaux a { width: 31px; height: 31px; }
.pied .reseaux svg { width: 15px; height: 15px; }
.pied-liens { font: 700 16px/30px var(--sans); margin: 34px 0 0 !important; padding: 0 !important; }
.pied-liens a { color: var(--gris-clair); }
.pied-bas { border-top: 1px solid var(--filet-sombre); font-size: 14px; line-height: 20px; }
.pied-bas > :first-child { padding-left: 0 !important; }
.pied-bas > :last-child { padding-right: 0 !important; }
.pied-bas > * { padding: 50px 40px; display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
.pied-bas > :nth-child(2) { border-left: 1px solid var(--filet-sombre); border-right: 1px solid var(--filet-sombre); text-align: center; align-items: center; }
.pied-bas > :nth-child(3) { text-align: right; align-items: flex-end; }
.pied-bas strong { font: 600 16px/26px var(--sans); }
.pied-bas img { width: 238px; }

/* ---------- tablette et téléphone ---------- */
@media (max-width: 1100px) {
  .entete h1, .corps h2 { font-size: 56px; line-height: 58px; }
  .pied-haut > *, .pied-bas > * { padding-left: 24px; padding-right: 24px; }
  .pied-haut, .pied-bas { padding-left: 16px; padding-right: 16px; }
  .fleche-prec { left: 10px; } .fleche-suiv { right: 10px; }
  .texte-actu { padding: 40px var(--marge) 60px; }
  .duo-texte { padding: 0 40px; }
}
@media (max-width: 800px) {
  .menu > summary, .recherche-bouton { top: 20px; width: 64px; height: 64px; }
  .recherche-panneau { padding: 110px 20px 40px; }
  .recherche-panneau input { font-size: 26px; line-height: 40px; }
  .menu > summary { left: 20px; } .recherche-bouton { right: 20px; }
  .panneau { padding: 120px 30px 40px; }
  .panneau-embleme { left: auto; right: 30px; top: 20px; width: 70px; }
  .panneau-rubriques > li > a { font-size: 28px; }
  .panneau-bas { grid-template-columns: 1fr; gap: 24px; }
  .entete { grid-template-columns: 1fr; min-height: 0; }
  .entete-texte { padding: 110px 20px 50px; }
  .entete-logo { display: none; }
  .entete h1, .corps h2 { font-size: 44px; line-height: 48px; }
  .entete-image { min-height: 320px; order: -1; }
  .corps { padding: 50px 20px 80px; }
  .hero { height: 560px; } .hero-texte { padding-top: 130px; } .hero-texte img { width: 260px; }
  .annonce { margin: 60px 20px 0; padding: 40px 20px 0; }
  .annonce p { font-size: 18px; line-height: 28px; }
  .duo { grid-template-columns: 1fr; margin-top: 80px; }
  .duo-image img { height: 360px; }
  .duo-texte { padding: 40px 20px 0; }
  .duo-texte h2 { font-size: 36px; line-height: 44px; }
  .accueil-actus { padding: 80px 20px 60px; }
  .olivier { padding: 80px 20px; } .olivier > div { padding: 60px 20px 40px; }
  .entete-actu { padding: 110px 20px 200px; }
  .entete-actu h1 { font-size: 34px; line-height: 42px; }
  .image-une { margin-top: -160px; padding: 0 20px; }
  .fleche { display: none; }
  .bouton, .raccourcis .bouton { min-width: 0; width: 100%; }
  .pied-haut, .pied-bas { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; }
  .pied-haut > *, .pied-bas > * { padding: 0; text-align: left !important; align-items: flex-start !important; min-height: 0; border: 0 !important; }
  .pied-bas { padding-bottom: 40px; }
  .bouton-don { padding: 24px 40px; }
  .visite-virtuelle iframe { height: 480px; }
}