@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/sourcesans3-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/sourcesans3-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --vert: #1f4d2b;
  --prairie: #3f7d3a;
  --soleil: #f5b700;
  --encre: #17201a;
  --gris: #4f5a53;
  --filet: #d9d3c4;
  --papier: #f6f3ec;
  --titre: "Bricolage Grotesque", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 1.125rem/1.6 "Source Sans 3", system-ui, sans-serif; color: var(--encre); background: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--vert); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
h3 { font-size: 1.2rem; margin: 1.8rem 0 .4rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
li { margin: .25em 0; }
figure { margin: 0; }

.cadre { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.saut { position: absolute; left: -999px; top: 0; padding: .6rem 1rem; background: var(--soleil); color: var(--encre); z-index: 9; }
.saut:focus { left: 0; }

.btn { display: inline-block; padding: .8rem 1.3rem; background: var(--soleil); color: var(--encre); font: 700 1.02rem/1.2 "Source Sans 3", sans-serif; text-decoration: none; border: 0; border-radius: 3px; cursor: pointer; }
.btn:hover { background: #e3a900; }
.lien-fleche { font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--soleil); padding-bottom: 1px; }
.lien-fleche::after { content: " ↓"; }

/* En-tête */
.entete { border-bottom: 1px solid var(--filet); }
.entete-l { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 14px; padding-bottom: 10px; }
.logo img { width: 210px; }
.btn-entete { padding: .55rem .9rem; font-size: .95rem; white-space: nowrap; }
.menu ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.menu li { margin: 0; flex: none; }
.menu a { color: var(--encre); text-decoration: none; font-size: .97rem; font-weight: 600; padding: 4px 0; border-bottom: 3px solid transparent; }
.menu a:hover { border-bottom-color: var(--filet); }
.menu a[aria-current] { border-bottom-color: var(--soleil); }
@media (max-width: 600px) {
  .logo img { width: 150px; }
  .btn-entete { padding: .5rem .7rem; font-size: .86rem; }
  .chapo { font-size: 1.12rem; }
  .menu ul { gap: 1.1rem; }
  .menu a { font-size: .92rem; }
}

/* Accueil */
.une-accueil { display: grid; grid-template-columns: 20px 1fr 20px; }
.une-texte { grid-column: 2; padding: 2.4rem 0 2rem; }
.une-photo { grid-column: 1 / -1; }
.une-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.une-accueil h1 { font-size: clamp(2.3rem, 5.6vw, 4.3rem); line-height: 1; letter-spacing: -.025em; }
.une-accueil .chapo { margin-top: 1.4rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.8rem; }
@media (min-width: 900px) {
  .une-accueil { grid-template-columns: minmax(20px, 1fr) minmax(0, 600px) minmax(0, 580px) minmax(0, 1fr); min-height: 560px; border-bottom: 1px solid var(--filet); }
  .une-texte { grid-column: 2; padding: 4rem 3rem 3.5rem 0; align-self: center; }
  .une-photo { grid-column: 3 / 5; }
  .une-photo img { height: 100%; aspect-ratio: auto; object-position: 40% 50%; }
}
.chapo { font-size: 1.28rem; line-height: 1.5; color: #2a332d; max-width: 38em; }

.titre-trait { position: relative; padding-top: 1rem; margin-bottom: 1.6rem; border-top: 1px solid var(--encre); }
.titre-trait::before { content: ""; position: absolute; left: 0; top: -3px; width: 72px; height: 5px; background: var(--soleil); }

.guides { margin-top: 3.5rem; }
.guides-g { display: grid; gap: 1.6rem 2.4rem; }
.guide { color: var(--encre); text-decoration: none; display: block; }
.guide:hover .guide-t { text-decoration: underline; text-decoration-color: var(--soleil); text-decoration-thickness: 3px; }
.guide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .8rem; }
.guide-t { display: block; font-family: var(--titre); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.guide-d { display: block; color: var(--gris); font-size: 1rem; margin-top: .35rem; }
.guide-grand .guide-t { font-size: 1.8rem; }
.guide-ligne { display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: auto 1fr; align-content: start; column-gap: .6rem; border-top: 1px solid var(--filet); padding-top: .9rem; }
.guide-ligne .guide-d { grid-column: 2; margin-top: .2rem; }
.guide-n { grid-row: span 2; font-family: var(--titre); font-weight: 700; font-size: 1.5rem; color: var(--prairie); line-height: 1; }
@media (min-width: 760px) {
  .guides-g { grid-template-columns: repeat(6, 1fr); }
  .guide-grand { grid-column: 1 / 4; grid-row: 1 / 3; }
  .guide-moyen { grid-column: 4 / 7; display: grid; grid-template-columns: 45% 1fr; grid-template-rows: auto 1fr; column-gap: 1.2rem; align-items: start; }
  .guide-moyen img { grid-row: span 2; margin: 0; aspect-ratio: 4 / 3; }
  .guide-grand img { aspect-ratio: 4 / 3; }
  .guide-ligne { grid-column: span 3; }
}
@media (min-width: 1000px) { .guide-ligne { grid-column: span 2; } }

.demande { margin-top: 4rem; }
.trois { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 1.2rem; }
.trois li { margin: 0; display: flex; gap: 1rem; }
.trois span { font-family: var(--titre); font-weight: 700; font-size: 2.6rem; line-height: .9; color: var(--soleil); -webkit-text-stroke: 1px #b98900; }
@media (min-width: 760px) {
  .trois { grid-template-columns: 1fr 1fr 1.4fr; gap: 0; }
  .trois li { padding: 0 1.6rem; border-left: 1px solid var(--filet); }
  .trois li:first-child { padding-left: 0; border-left: 0; }
}

/* Articles */
.tete { padding-top: 1.2rem; padding-bottom: 1.6rem; }
.tete h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 19em; margin: .6rem 0 1.1rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; color: var(--gris); }
.ariane li { margin: 0; }
.ariane li + li::before { content: "/"; margin-right: .5rem; color: var(--filet); }
.signature { font-size: .93rem; color: var(--gris); margin: 0; }
.photo-large img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .photo-large { padding: 0; } .photo-large img { aspect-ratio: 16 / 10; } }

.article-g { display: grid; gap: 2rem; margin-top: 2.4rem; }
.article-c { max-width: 44rem; min-width: 0; counter-reset: sec; }
@media (min-width: 1000px) {
  .article-g { grid-template-columns: 250px minmax(0, 1fr); gap: 4rem; }
  .marge { position: sticky; top: 1.2rem; align-self: start; max-height: calc(100vh - 2.4rem); overflow-y: auto; }
  .sec h2::before { position: absolute; margin-left: -3.2rem; width: 2.6rem; text-align: right; }
}
.sec { position: relative; }
.sec h2 { margin: 2.6rem 0 .9rem; }
.sec:first-child h2 { margin-top: 0; }
.sec h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: inline-block; margin-right: .6rem; color: var(--prairie); font-size: .9rem; letter-spacing: .04em; vertical-align: .35em; }
.sommaire { font-size: .95rem; }
.sommaire p, .reperes p { font-weight: 700; margin-bottom: .4rem; }
.sommaire ol { margin: 0; padding-left: 1.4em; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.reperes { margin-top: 1.6rem; padding-left: .9rem; border-left: 4px solid var(--soleil); font-size: .95rem; }
.reperes ul { list-style: none; padding: 0; margin: 0; }
.reperes li { margin: 0 0 .7rem; }
@media (max-width: 999px) {
  .marge .sommaire { display: none; }
  .marge:empty { display: none; }
}

sup.note { line-height: 0; font-size: .68em; margin-left: .1em; }
sup.note a { font-weight: 700; color: var(--prairie); text-decoration: none; padding: 0 .1em; }

table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: 1rem; display: block; overflow-x: auto; }
thead th { border-bottom: 2px solid var(--encre); text-align: left; }
th, td { padding: .5rem .8rem .5rem 0; vertical-align: top; }
tbody tr { border-bottom: 1px solid var(--filet); }
table:has(thead) { border-top: 0; }

.encart { margin: 2.2rem 0; padding: 1.1rem 0; border-top: 3px solid var(--soleil); border-bottom: 1px solid var(--filet); }
.encart p { margin-bottom: .5rem; }
.encart a { font-weight: 700; }

.faq { margin-top: 3rem; }
.faq h2 { margin-bottom: .6rem; }
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; list-style: none; padding: .85rem 2rem .85rem 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .6rem; font-size: 1.4rem; font-weight: 400; color: var(--prairie); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: .4rem; }

.sources { margin-top: 3rem; font-size: .92rem; color: var(--gris); }
.sources h2 { font-size: 1.1rem; font-family: "Source Sans 3", sans-serif; letter-spacing: 0; color: var(--encre); margin-bottom: .5rem; }
.sources li:target { background: #fff3c9; }

.bandeau { background: var(--vert); color: #fff; margin-top: 4rem; padding: 3rem 0; }
.bandeau h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.bandeau p { color: #dfe9e1; max-width: 34em; }
.bandeau-g { display: grid; gap: 1rem 4rem; }
@media (min-width: 900px) { .bandeau-g { grid-template-columns: 1fr 1.2fr; } .bandeau-g .btn { grid-column: 2; justify-self: start; } .bandeau-g h2 { grid-row: span 2; } }

.voisins { margin-top: 3.5rem; }
.voisins ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 2rem; }
.voisins li { margin: 0; padding: .8rem 0; border-bottom: 1px solid var(--filet); }
.voisins a { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: var(--encre); text-decoration: none; }
.voisins a:hover { text-decoration: underline; }
@media (min-width: 760px) { .voisins ul { grid-template-columns: repeat(3, 1fr); } }

.texte h2 { font-size: 1.4rem; margin: 2.2rem 0 .7rem; }
.texte table { display: table; }
.liste-simple { columns: 2 220px; }
.merci, .tete:only-child { padding-bottom: 3rem; }

/* Blog */
.tete-blog { padding-bottom: 0; }
.tete-blog h1 { margin-bottom: .9rem; }
.renvoi-guide { font-size: 1rem; color: var(--gris); }
.rubriques { margin-top: 1.4rem; border-top: 1px solid var(--encre); border-bottom: 1px solid var(--filet); }
.rubriques ul { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; list-style: none; margin: 0; padding: .7rem 0; }
.rubriques li { margin: 0; }
.rubriques a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .97rem; }
.rubriques a:hover { text-decoration: underline; }
.rubriques a[aria-current] { box-shadow: inset 0 -3px 0 var(--soleil); }
.blog-g { margin-top: 2rem; }
.blog-g > * { max-width: 980px; }
.billet-meta { font-size: .9rem; color: var(--gris); margin-bottom: .35rem; }
.billet-meta a { color: var(--prairie); font-weight: 600; text-decoration: none; }
.billet-une { display: grid; gap: 1.2rem 2.4rem; padding-bottom: 2rem; border-bottom: 1px solid var(--encre); }
.billet-une img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.billet-une h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .7rem; }
.billet-une h2 a, .billets h2 a { color: var(--encre); text-decoration: none; }
.billet-une h2 a:hover, .billets h2 a:hover { text-decoration: underline; text-decoration-color: var(--soleil); text-decoration-thickness: 3px; }
@media (min-width: 900px) { .billet-une { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.billets { list-style: none; padding: 0; margin: 0; }
.billets li { display: grid; grid-template-columns: 1fr 96px; gap: .8rem 1rem; align-items: start; margin: 0; padding: 1.3rem 0; border-bottom: 1px solid var(--filet); }
.billets h2 { font-size: 1.35rem; line-height: 1.15; margin-bottom: .45rem; }
.billets .billet-txt p:last-child { margin: 0; color: #2a332d; }
.billet-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 699px) { .billet-img img { aspect-ratio: 1; } .billets h2 { font-size: 1.15rem; } }
@media (min-width: 700px) { .billets li { grid-template-columns: 1fr 240px; gap: .8rem 2rem; padding: 1.5rem 0; } }
.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 2rem 0 0; font-weight: 600; }
.pagination li { margin: 0; }
.pagination span { color: var(--gris); }
.encart-ou { font-weight: 400; }
.encart-ou a { font-weight: 400; }
.voisins .billet-meta { margin: .3rem 0 0; }

/* Formulaire */
.contact-g { display: grid; gap: 2rem; padding-top: 1.2rem; padding-bottom: 3rem; }
.contact-txt h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin: .6rem 0 1rem; }
.note-bas { font-size: .97rem; color: var(--gris); border-top: 1px solid var(--filet); padding-top: 1rem; }
@media (min-width: 980px) { .contact-g { grid-template-columns: 5fr 7fr; gap: 4rem; } .contact-txt { position: sticky; top: 1rem; align-self: start; } }

.formulaire { border-top: 4px solid var(--vert); padding-top: 1.2rem; }
.formulaire fieldset { border: 0; margin: 0 0 1.8rem; padding: 0; }
.formulaire legend { font-family: var(--titre); font-weight: 700; font-size: 1.6rem; padding: 0; margin-bottom: .4rem; }
.q { font-weight: 700; margin: 1.2rem 0 .5rem; }
.choix { display: grid; gap: 6px; }
@media (min-width: 560px) { .choix { grid-template-columns: 1fr 1fr; } }
.choix label { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--filet); border-radius: 2px; cursor: pointer; line-height: 1.3; }
.choix label:has(input:checked) { border-color: var(--vert); background: #eef3ee; }
.choix input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--vert); }
.champ { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0; }
.champ label { font-weight: 700; }
.option { font-weight: 400; color: var(--gris); font-size: .92rem; }
.duo { display: grid; gap: 0 .8rem; grid-template-columns: 1fr 1fr; }
.duo > input, .duo > select { margin: 0; }
@media (max-width: 520px) { .duo { grid-template-columns: 1fr; gap: .5rem; } }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: .65rem .75rem; font: inherit; font-size: 1.05rem; color: var(--encre); background: #fff; border: 1px solid #b9b2a2; border-radius: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); outline: 2px solid var(--soleil); outline-offset: 0; }
.accords { display: grid; gap: .9rem; margin: 1.4rem 0; font-size: .97rem; line-height: 1.45; }
.accords label { display: flex; gap: .7rem; align-items: flex-start; }
.accords input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--vert); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boutons { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.boutons .btn:only-child { margin-left: auto; }
.btn-retour { background: none; border: 0; padding: .5rem 0; font: inherit; font-weight: 700; color: var(--vert); text-decoration: underline; cursor: pointer; }
.progression { display: none; margin: 0 0 .4rem; font-size: .92rem; font-weight: 700; color: var(--prairie); }
.alerte { border-left: 4px solid #b3261e; padding: .4rem 0 .4rem 1rem; margin-bottom: 1rem; }
.alerte p { font-weight: 700; margin: 0; }
.erreur { border-color: #b3261e !important; }
.par-etapes .progression { display: block; }
.par-etapes .etape { display: none; }
.par-etapes .etape.active { display: block; }
.formulaire:not(.par-etapes) [data-suivant], .formulaire:not(.par-etapes) [data-precedent] { display: none; }

/* Pied */
.pied { background: var(--encre); color: #cfd8d1; margin-top: 4rem; padding: 2.8rem 0 1.4rem; font-size: .97rem; }
.pied a { color: #f2f5f2; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied-g { display: grid; gap: 2rem; }
.pied-a p { margin-top: 1rem; max-width: 30em; }
.pied-l { list-style: none; padding: 0; margin: 0; }
@media (min-width: 800px) { .pied-g { grid-template-columns: 1.6fr 1fr 1fr; } }
.pied-bas { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #34413a; font-size: .86rem; color: #a9b5ad; }