@font-face { font-family: "Rubik"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/rubik-300.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/rubik-400.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/rubik-500.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/rubik-600.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/rubik-700.woff2") format("woff2"); }

:root {
  --vert-fouillouse: #228655;
  --vert-profond: #1a6b44;
  --bleu-commune: #48add5;
  --bleu-pale: #89cbe4;
  --citron: #bfd200;
  --charbon: #282828;
  --ardoise: #4f5355;
  --creme: #f5f1ee;
  --trait-fin: #dedede;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: "Rubik", system-ui, sans-serif; line-height: 1.6; color: var(--charbon); background: #fff; }
img { max-width: 100%; height: auto; }
a { color: var(--vert-profond); text-underline-offset: 3px; }
a:hover { color: var(--charbon); }
:focus-visible { outline: 3px solid var(--bleu-commune); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 600; color: var(--vert-profond); }
h3 { font-size: 1.1rem; font-weight: 600; }
.cadre { width: min(1120px, 100% - 32px); margin-inline: auto; }
.colonne-texte { max-width: 760px; margin-left: max(16px, calc((100% - 1120px) / 2)); }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--charbon); color: #fff; padding: 8px 14px; z-index: 100; }
.lien-evitement:focus { left: 8px; }

.bouton { display: inline-block; padding: .7em 1.3em; background: var(--vert-fouillouse); color: #fff; font-weight: 500; text-decoration: none; border-radius: 3px; border: 2px solid var(--vert-fouillouse); }
.bouton:hover { background: var(--charbon); border-color: var(--charbon); color: #fff; }
.bouton-citron { background: var(--citron); border-color: var(--citron); color: var(--charbon); }
.bouton-citron:hover { background: var(--charbon); border-color: var(--charbon); color: #fff; }

.entete { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid var(--vert-fouillouse); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--charbon); }
.marque span { display: flex; flex-direction: column; line-height: 1.2; }
.marque strong { font-size: 1.15rem; color: var(--vert-profond); }
.marque small { font-size: .8rem; color: var(--ardoise); }
.menu { display: none; width: 100%; flex-direction: column; padding: 6px 0 12px; }
.menu.ouvert { display: flex; }
.menu a { padding: 10px 2px; color: var(--charbon); text-decoration: none; font-weight: 500; }
.menu a:hover { text-decoration: underline; }
.menu .bouton { margin-top: 6px; text-align: center; }
.bouton-menu { background: var(--vert-fouillouse); color: #fff; border: 0; padding: 10px 16px; font: inherit; font-weight: 500; cursor: pointer; border-radius: 3px; }

.ouverture { background: var(--vert-fouillouse); color: #fff; padding: clamp(36px, 7vw, 84px) 0 clamp(56px, 9vw, 110px); clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.ouverture-grille { display: grid; gap: 28px; align-items: center; }
.ouverture h1 { color: #fff; max-width: 14em; }
.lieu { margin: 0 0 10px; padding-left: 14px; border-left: 4px solid var(--citron); font-weight: 500; }
.chapo { font-size: 1.1rem; font-weight: 300; margin: 0 0 1.4em; max-width: 36em; }
.ouverture-logo { display: none; background: #fff; padding: 14px; border-radius: 0; transform: rotate(-3deg); }

.recherche { display: grid; gap: 6px; max-width: 520px; }
.recherche label { font-weight: 500; font-size: .92rem; }
.recherche input, .recherche select { width: 100%; padding: 12px 14px; font: inherit; border: 0; border-radius: 0; background: #fff; color: var(--charbon); margin-bottom: 8px; }

.recherche button { justify-self: start; cursor: pointer; font: inherit; font-weight: 500; }
.recherche-claire { margin-bottom: 28px; padding: 18px; background: var(--creme); max-width: none; border-left: 6px solid var(--vert-fouillouse); }
.recherche-claire input, .recherche-claire select { border: 1px solid var(--trait-fin); }

.semaine { background: var(--creme); padding: 40px 0 48px; }
.semaine-grille { display: grid; gap: 24px; }
.une-liste { list-style: none; counter-reset: une; margin: 0; padding: 0; display: grid; gap: 0; }
.une-liste li { counter-increment: une; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--ardoise); }
.une-liste li::before { content: counter(une); grid-row: span 2; font-size: 1.8rem; font-weight: 700; color: var(--vert-fouillouse); line-height: 1; }
.une-liste li:first-child { border-top: 4px solid var(--vert-fouillouse); padding-top: 18px; }
.une-liste li:first-child .une-nom { font-size: 1.5rem; }
.une-nom { font-weight: 600; font-size: 1.15rem; color: var(--charbon); text-decoration: none; }
.une-nom:hover { text-decoration: underline; }
.une-secteur { color: var(--ardoise); font-size: .92rem; }
.lien-fiche { font-weight: 500; }

.repertoire-zone { padding: 44px 0 20px; }
.compte { color: var(--ardoise); margin: 0 0 14px; }
.repertoire { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--charbon); }
.entree { display: grid; gap: 2px; padding: 12px 4px; border-bottom: 1px solid var(--trait-fin); }
.entree[hidden] { display: none; }
.entree-nom { font-weight: 500; font-size: 1.05rem; color: var(--charbon); text-decoration: none; }
.entree-nom:hover { color: var(--vert-fouillouse); text-decoration: underline; }
.entree-secteur { color: var(--ardoise); font-size: .92rem; }
.entree-secteur a { color: var(--ardoise); }
.vide { padding: 20px 4px; }

.secteurs-zone { padding: 40px 0; background: var(--creme); margin-top: 28px; }
.index-secteurs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.index-secteurs li { break-inside: avoid; padding: 4px 0; border-bottom: 1px dotted var(--ardoise); display: flex; justify-content: space-between; gap: 8px; }
.index-secteurs span { color: var(--ardoise); }

.referencer { padding: 48px 0; }
.referencer .colonne-texte { border-left: 6px solid var(--citron); padding-left: 20px; }
.faq-zone { padding: 8px 0 56px; }
details { border-bottom: 1px solid var(--trait-fin); padding: 12px 0; }
summary { cursor: pointer; font-weight: 500; }
details p { margin: 10px 0 0; color: var(--ardoise); }

.tete-page { background: var(--creme); padding: 28px 0 22px; border-bottom: 3px solid var(--citron); }
.tete-page h1 { color: var(--vert-profond); margin-bottom: .3em; }
.tete-page .chapo { color: var(--ardoise); margin: 0; }
.fil { font-size: .9rem; color: var(--ardoise); margin-bottom: 12px; }
.secteurs-fiche { margin: 0; color: var(--ardoise); }
.texte-zone { padding: 40px 0 56px; }
.avis-fiche { padding: 14px 18px; background: #eaf6fb; border-left: 5px solid var(--bleu-commune); }
.texte-legal h2 { margin-top: 1.6em; }
.texte-legal h3 { margin-top: 1.2em; color: var(--ardoise); }

.pied { background: var(--charbon); color: #e9e9e9; padding-top: 36px; border-top: 6px solid var(--vert-fouillouse); }
.pied-colonnes { display: grid; gap: 24px; padding-bottom: 24px; }
.pied-titre { font-weight: 600; color: #fff; margin: 0 0 6px; }
.pied a:not(.bouton) { color: var(--bleu-pale); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 6px; }
.pied address { font-style: normal; }
.mention { border-top: 1px solid #4a4a4a; padding: 14px 0; font-size: .85rem; color: #bdbdbd; }

@media (min-width: 640px) {
  .index-secteurs { columns: 3; }
  .entree { grid-template-columns: 1fr 1fr; gap: 16px; align-items: baseline; }
}
@media (min-width: 960px) {
  .semaine-grille { grid-template-columns: 1fr 1.5fr; gap: 56px; }
  .bouton-menu { display: none; }
  .menu { display: flex; flex-direction: row; align-items: center; width: auto; gap: 20px; padding: 0; }
  .menu .bouton { margin: 0; }
  .ouverture-grille { grid-template-columns: 1.6fr 1fr; }
  .ouverture-logo { display: block; justify-self: center; width: 200px; height: 200px; }
  .index-secteurs { columns: 4; }
  .pied-colonnes { grid-template-columns: 2fr 1.5fr 1.5fr; }
}

/* blocks communs du framework */
.block-title { margin: 0 0 1rem; }
.block-title-heading { margin: 0 0 .4rem; }
.block-title-subtitle { color: var(--ardoise); margin: 0; }
.block-title[data-align="center"] { text-align: center; }
.block-title[data-align="right"] { text-align: right; }
.block-text { line-height: 1.6; max-width: 760px; margin-inline: auto; padding: 16px; }
.block-image-media { display: block; width: 100%; height: auto; }
.block-image-caption { font-size: .85rem; color: var(--ardoise); margin-top: .4rem; }
.block-form-wrap { max-width: 640px; margin: 24px auto; padding: 0 16px; }
.block-form-field { margin-bottom: 14px; }
.block-form-label { display: block; font-weight: 500; margin-bottom: 4px; }
.block-form-input { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--trait-fin); border-radius: 0; }
.block-form-checkbox { margin-right: 8px; }
.block-form-submit { padding: .7em 1.3em; border: 2px solid var(--vert-fouillouse); background: var(--vert-fouillouse); color: #fff; font: inherit; font-weight: 500; border-radius: 3px; cursor: pointer; }
.form-message-success, .form-message-error { display: none; padding: 12px 16px; margin-top: 12px; }
.form-message-success { background: #e7f3ec; border-left: 5px solid var(--vert-fouillouse); }
.form-message-error { background: #fdecea; border-left: 5px solid #b3261e; }