/* Pages thématiques de La Maplouine — même charte que la page d'accueil,
   réduite à ce qu'un article demande. Les polices sont celles du site, servies
   depuis /fonts : aucune requête vers un tiers, donc rien à déclarer au RGPD. */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;
  src:url("/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/jost-latin-500-normal.woff2") format("woff2")}

:root{
  --granite:#3E5361;--deep:#1F3A4D;--gold:#E8D45E;--channel:#A4CDF5;
  --sand:#FAECD3;--ink:#201E1D;--paper:#FFFDF9;--rule:rgba(62,83,97,.22);
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--deep)}
a:hover{color:var(--granite)}

/* ---------- bandeau supérieur ----------
   Recopié de la page d'accueil, valeur pour valeur : logotype de 78 px avec sa
   signature, quatre liens de dossiers, pastille de langue en absolu. Un
   bandeau qui change d'une page à l'autre donne l'impression de changer de
   site. Si la charte du haut bouge sur l'accueil, elle doit bouger ici aussi —
   les deux blocs sont jumeaux et doivent le rester. */
header{position:sticky;top:0;z-index:20;background:rgba(250,236,211,.95);
  backdrop-filter:saturate(150%) blur(9px);border-bottom:1px solid var(--rule)}
.bar{position:relative;display:flex;justify-content:center;align-items:center;
  padding:26px 96px;max-width:1080px;margin:0 auto}
.lockup{display:flex;align-items:center;gap:20px;text-decoration:none;text-align:left;
  color:inherit}
.lockup img{width:78px;height:78px;flex:0 0 78px}
.wordmark{font-family:var(--serif);font-style:italic;font-weight:300;font-size:48px;
  line-height:1;color:var(--ink);white-space:nowrap}
.wordmark b{font-weight:500;font-style:normal;color:var(--gold)}
.subword{display:block;font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--granite);margin-top:9px;white-space:normal}
.dossiersnav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.dossiersnav a{font-family:var(--sans);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--granite);text-decoration:none;font-weight:500;
  white-space:nowrap}
.dossiersnav a:hover{color:var(--deep)}
.langlien{position:absolute;right:28px;top:50%;transform:translateY(-50%);
  display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 14px;border:1px solid var(--rule);
  border-radius:999px;color:var(--granite);text-decoration:none;font-weight:500}
.langlien:hover{background:var(--granite);color:var(--sand);border-color:var(--granite)}

.wrap{max-width:760px;margin:0 auto;padding:0 28px}
.large{max-width:1080px}
main{padding:56px 0 24px}
.fil{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--granite);
  margin:0 0 22px}
.fil a{text-decoration:none}
h1{font-family:var(--serif);font-weight:300;font-style:italic;line-height:1.14;
  font-size:clamp(36px,4.8vw,56px);margin:0 0 22px;letter-spacing:-.005em}
h2{font-family:var(--serif);font-weight:300;font-style:italic;line-height:1.18;
  font-size:clamp(27px,3.1vw,38px);margin:56px 0 20px}
h3{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:.03em;margin:0 0 8px}
p{margin:0 0 18px}
.chapo{font-size:19.5px;line-height:1.6;color:var(--deep)}
/* Texte justifié, comme un livre. La césure est indispensable : sans elle, une
   colonne de 700 px — et plus encore une colonne de téléphone à trente-cinq
   signes — s'ouvre en rivières de blanc entre les mots. Les pages déclarent
   leur langue, le navigateur coupe donc selon les règles du français ou de
   l'anglais. lang="fr" sur <html> est ce qui fait marcher la césure. */
.wrap p, .encart p, .faq dd, .lieux .quoi, .autres span,
.ill figcaption{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
/* Les sources restent au fil de l'eau : elles portent des adresses longues,
   qu'on laisse se couper n'importe où — justifier par-dessus creuserait des
   trous d'une ligne à l'autre. */
.sources li{text-align:left}
/* Ce qui est court ou capitalisé ne se justifie pas : une ligne isolée étirée
   sur toute la largeur se voit tout de suite. */
.wrap .fil, .ill .credit, .btn, .bar nav a, footer nav a{text-align:left;hyphens:manual}
.fleuron{display:flex;justify-content:center;gap:20px;margin:0 0 24px;line-height:0}
.fleuron .herm{width:17px;height:auto;color:var(--granite);opacity:.85;flex:0 0 auto}
.hr{border:0;border-top:1px solid var(--rule);margin:44px 0;width:110px}

.encart{background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:26px 28px;margin:38px 0}
.encart p:last-child{margin-bottom:0}

.lieux{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:2px}
.lieux li{background:var(--paper);border:1px solid var(--rule);padding:16px 20px}
.lieux .ou{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--granite);margin-bottom:5px}
.lieux .quoi{margin:6px 0 0;font-size:16px;color:var(--ink)}

.faq dt{font-weight:500;margin:26px 0 6px}
.faq dd{margin:0;color:var(--ink)}

.cta{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 0}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border-radius:2px;background:var(--deep);color:var(--sand);
  border:1px solid var(--deep)}
.btn.ghost{background:transparent;color:var(--deep)}
.btn:hover{background:var(--granite);border-color:var(--granite);color:var(--sand)}

.autres{display:grid;gap:16px;margin:26px 0 0}
.autres a{display:block;background:var(--paper);border:1px solid var(--rule);
  padding:18px 22px;text-decoration:none}
.autres strong{display:block;font-weight:500;margin-bottom:5px}
.autres span{color:var(--ink);font-size:16px}

/* ---------- illustrations ----------
   L'image déborde la colonne de texte de part et d'autre : elle respire sans
   devenir une pleine largeur qui couperait la lecture. Sous 900 px elle revient
   à la largeur du texte. Les dimensions sont écrites dans la balise, de sorte
   que le navigateur réserve la place et que le texte ne saute pas. */
.ill{margin:40px -60px 34px}
.ill img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:var(--paper)}
.ill figcaption{margin:12px 60px 0;font-size:14.5px;line-height:1.55;color:var(--granite)}
.ill .credit{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--granite);opacity:.6}
@media (max-width:900px){
  .ill{margin-left:0;margin-right:0}
  .ill figcaption{margin-left:0;margin-right:0}
}

footer{border-top:1px solid var(--rule);margin-top:64px;padding:38px 0 56px;
  font-size:14px;color:var(--granite)}
footer .wrap{max-width:1080px}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
footer a{text-decoration:none}
.sources{font-size:13.5px;color:var(--granite);line-height:1.6}
.sources summary{cursor:pointer;font-weight:500;color:var(--deep)}
.sources ul{margin:14px 0 0;padding-left:20px}
.sources li{margin-bottom:7px;overflow-wrap:anywhere}

/* Le bandeau mobile reprend lui aussi les valeurs de l'accueil, et jusqu'au
   seuil : 760 px là-bas, 760 px ici. La signature se replie, la pastille de
   langue s'accroche en haut à droite, l'en-tête tient en deux lignes. */
@media (max-width:760px){
  .bar{padding:20px 20px 18px;flex-direction:column;gap:16px}
  .lockup{gap:16px}
  .lockup img{width:62px;height:62px;flex-basis:62px}
  .wordmark{font-size:38px}
  .subword{display:none}
  .langlien{top:14px;right:16px;transform:none;padding:5px 10px;font-size:10px;
    letter-spacing:.12em}
  .dossiersnav{gap:9px 14px;align-items:center;margin-top:0}
  .dossiersnav a{font-size:10.5px;letter-spacing:.07em}
}
@media (max-width:700px){
  main{padding:36px 0 12px}
}
@media (max-width:400px){
  .wordmark{font-size:32px}
  .lockup img{width:54px;height:54px;flex-basis:54px}
  .subword{font-size:10px;letter-spacing:.18em}
}