@font-face{font-family:"Bricolage";src:url(polices/bricolage-normal-400-800.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"SourceSerif";src:url(polices/sourceserif-normal-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"SourceSerif";src:url(polices/sourceserif-italic-400.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--fond:#ffffff;--encre:#16241d;--vert:#1f4d3a;--vert-clair:#e6efe9;--citron:#e9e35b;--citron-pale:#fbf9d3;--gris:#5b6660;--filet:#d5ddd8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:18px/1.65 "SourceSerif",Georgia,serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--vert);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.cadre{max-width:1180px;margin:0 auto;padding:0 24px}
.bandeau{background:var(--vert);color:#fff;font:600 13px/1.45 "Bricolage",sans-serif;letter-spacing:.01em}
.bandeau .cadre{padding-top:9px;padding-bottom:9px}
header.tete{border-bottom:1px solid var(--filet)}
header.tete .haut{display:flex;align-items:baseline;justify-content:space-between;gap:8px 28px;padding-top:18px;padding-bottom:10px;flex-wrap:wrap}
.logo{font:800 27px/1 "Bricolage",sans-serif;color:var(--vert);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.logo span{background:var(--citron);padding:0 6px;margin-left:2px;color:var(--encre)}
.devise{font:500 15px/1.4 "Bricolage",sans-serif;color:var(--gris);margin:0}
.devise b{color:var(--vert);font-weight:700}
nav.menu{padding-bottom:14px}
nav.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 22px;flex-wrap:wrap;font:500 15px "Bricolage",sans-serif}
nav.menu a{color:var(--encre);text-decoration:none}
nav.menu a:hover,nav.menu a[aria-current]{color:var(--vert);text-decoration:underline}
nav.menu li.paris a{font-weight:700;color:var(--vert)}
nav.menu li.paris a::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--citron);margin-right:6px;vertical-align:2px;box-shadow:0 0 0 1px var(--vert)}
h1,h2,h3{font-family:"Bricolage",sans-serif;letter-spacing:-.015em;line-height:1.14}
/* accueil */
.ouverture{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:48px 0 36px}
.sur{font:700 13px "Bricolage",sans-serif;text-transform:uppercase;letter-spacing:.09em;color:var(--vert);margin:0 0 12px}
.ouverture h1{font-size:54px;margin:0 0 20px;font-weight:800}
.ouverture h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--citron) 62%)}
.chapeau{font-size:21px;color:var(--gris);margin:0 0 26px}
.ouverture figure{margin:0}
.ouverture figure img{border-radius:4px}
.legende,figcaption{font:13px/1.45 "Bricolage",sans-serif;color:var(--gris);margin-top:8px}
.actions{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap}
.bouton{display:inline-block;font:700 16px "Bricolage",sans-serif;background:var(--vert);color:#fff;padding:13px 22px;border-radius:999px;text-decoration:none}
.bouton.clair{background:transparent;color:var(--vert);box-shadow:inset 0 0 0 2px var(--vert)}
.paris-bloc{border-top:3px solid var(--encre);border-bottom:1px solid var(--filet);padding:26px 0 30px;margin-bottom:8px}
.paris-bloc .grille-paris{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start}
.paris-bloc h2{font-size:28px;margin:0 0 8px}
.paris-bloc p{margin:0 0 10px;font-size:17px}
.carte-paris{display:grid;grid-template-columns:120px 1fr;gap:16px;text-decoration:none;color:var(--encre)}
.carte-paris img{aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.carte-paris b{font:700 19px/1.25 "Bricolage",sans-serif;display:block;margin-bottom:6px;color:var(--vert)}
.carte-paris span{font-size:16px;color:var(--gris);line-height:1.5}
.parcours{background:var(--vert-clair);padding:56px 0 64px;margin-top:24px}
.parcours h2{font-size:36px;margin:0 0 8px}
.parcours .sous{color:var(--gris);margin:0 0 34px}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:etape}
.etape{position:relative;padding:0 26px 0 0}
.etape::before{counter-increment:etape;content:counter(etape);display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--vert);color:#fff;font:800 24px "Bricolage",sans-serif;position:relative;z-index:1}
.etape::after{content:"";position:absolute;top:27px;left:54px;right:0;border-top:2px dashed var(--vert)}
.etape:last-child::after{display:none}
.etape h3{font-size:23px;margin:18px 0 8px}
.etape p{margin:0 0 10px;font-size:17px}
.etape a,.etape span.l{font:600 15px "Bricolage",sans-serif}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:64px 0;align-items:start}
.deux h2{font-size:34px;margin:0 0 14px}
.liste-q{list-style:none;padding:0;margin:0;border-top:1px solid var(--filet)}
.liste-q li{border-bottom:1px solid var(--filet);padding:14px 0}
.liste-q b{font-family:"Bricolage",sans-serif;display:block;font-size:18px}
.etude{border-left:6px solid var(--citron);padding:6px 0 6px 22px}
.etude img{max-height:340px;width:100%;object-fit:cover;border-radius:4px}
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:8px 0 56px}
.carte{text-decoration:none;color:var(--encre)}
.carte img{aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.carte .rub{font:700 12px "Bricolage",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--vert);margin:12px 0 4px;display:block}
.carte h3{font-size:20px;margin:0 0 6px}
.carte .d{font-size:16px;color:var(--gris);line-height:1.5;display:block}
.carte:hover h3{text-decoration:underline}
.titre-section{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:3px solid var(--encre);padding-top:14px;margin-bottom:18px;flex-wrap:wrap}
.titre-section h2{font-size:28px;margin:0}
.titre-section a{font:600 15px "Bricolage",sans-serif}
.bientot{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 36px}
.bientot li{border-bottom:1px dashed var(--filet);padding:10px 0;font:500 17px/1.4 "Bricolage",sans-serif}
.bientot em{font-style:normal;color:var(--gris);font-size:14px;display:block}
.avis{background:#fff;border:2px solid var(--encre);padding:18px 22px;font-size:16px;margin:0 0 56px}
.avis b{font-family:"Bricolage",sans-serif}
.actu-bloc{border-bottom:1px solid var(--filet);padding:18px 0 26px}
.actu-lien{display:grid;grid-template-columns:120px 1fr;gap:18px;text-decoration:none;color:var(--encre);align-items:start}
.actu-lien img{aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.actu-lien b{font:700 21px/1.25 "Bricolage",sans-serif;display:block;margin-bottom:6px;color:var(--vert)}
.actu-lien span{font-size:16px;color:var(--gris);line-height:1.5}
.actu-lien:hover b{text-decoration:underline}
.infos{font:600 14px/1.4 "Bricolage",sans-serif;color:var(--vert);margin:-6px 0 14px}
/* pied */
footer.pied{background:var(--encre);color:#d7e2dc;padding:44px 0 30px;font:15px/1.6 "Bricolage",sans-serif}
footer.pied .colonnes{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
footer.pied a{color:#fff}
footer.pied ul{list-style:none;margin:0;padding:0}
footer.pied li{margin:0 0 4px}
footer.pied .nom{font-weight:800;font-size:19px;color:#fff;display:block;margin-bottom:6px}
footer.pied .independance{border-top:1px solid #39463f;margin-top:30px;padding-top:18px;font-size:14px;color:#aab8b0}
footer.pied .independance p{margin:0 0 6px}
/* pages intérieures */
.fil{font:14px "Bricolage",sans-serif;color:var(--gris);padding-top:26px;margin:0}
.fil a{color:var(--gris)}
.article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding:26px 0 56px}
.sommaire{position:sticky;top:20px;align-self:start;font:15px/1.5 "Bricolage",sans-serif;border-top:3px solid var(--vert);padding-top:12px}
.sommaire ol{padding-left:18px;margin:8px 0 18px}
.sommaire li{margin:0 0 6px}
.sommaire a{color:var(--encre);text-decoration:none}
.sommaire a:hover{text-decoration:underline}
.sommaire .meta{color:var(--gris);font-size:14px;border-top:1px solid var(--filet);padding-top:10px}
.article h1{font-size:44px;margin:0 0 18px}
.corps{max-width:720px}
.corps h2{font-size:28px;margin:42px 0 12px}
.corps figure{margin:32px 0}
.corps figure img{border-radius:4px}
.corps figure.ancien img{border:1px solid var(--filet);padding:8px;background:#f6f5ef;border-radius:0}
.corps li{margin:0 0 6px}
.encadre{background:var(--vert-clair);padding:20px 24px;margin:28px 0;font-size:17px}
.encadre.citron{background:var(--citron-pale);border-left:6px solid var(--citron)}
.encadre h2{font-size:20px;margin:0 0 8px}
.encadre ul{margin:6px 0 10px;padding-left:20px}
.encadre p{margin:0 0 6px}
figure.tab{margin:30px 0}
figure.tab figcaption{font:700 16px "Bricolage",sans-serif;color:var(--encre);margin:0 0 8px}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font:15px/1.45 "Bricolage",sans-serif;margin:0}
th,td{border-bottom:1px solid var(--filet);padding:10px 8px;text-align:left;vertical-align:top}
thead th{background:var(--vert);color:#fff}
tbody th{font-weight:600}
p.source{font:13px/1.4 "Bricolage",sans-serif;color:var(--gris);margin:8px 0 0}
.c-tete{padding:6px 0 10px}
.c-tete h1{font-size:44px;margin:10px 0 12px}
.c-tete .intro{font-size:20px;color:var(--gris);max-width:760px;margin:0 0 30px}
.simple{max-width:760px;padding-bottom:56px}
.simple h2{font-size:26px;margin:34px 0 10px}
.suite{background:var(--vert-clair);padding:44px 0 20px}
.suite .cartes{padding-bottom:28px}
@media (max-width:900px){
 .ouverture,.deux{grid-template-columns:1fr;gap:28px}
 .ouverture h1{font-size:38px}
 .etapes{grid-template-columns:1fr;gap:30px}
 .etape::after{display:none}
 .cartes{grid-template-columns:1fr 1fr}
 .paris-bloc .grille-paris{grid-template-columns:1fr}
 footer.pied .colonnes{grid-template-columns:1fr}
 .article{grid-template-columns:minmax(0,1fr);gap:20px}
 .sommaire{position:static}
 .article h1,.c-tete h1{font-size:34px}
}
@media (max-width:520px){
 .cadre{padding:0 16px}
 body{font-size:17px}
 .cartes,.bientot{grid-template-columns:1fr}
 nav.menu ul{gap:6px 14px;font-size:14px}
 .ouverture{padding-top:28px}
 .ouverture h1{font-size:33px}
 .parcours h2,.deux h2{font-size:28px}
 .carte-paris{grid-template-columns:88px 1fr}
 table{font-size:13px}
 .logo{font-size:24px}
}