/* papier.css — design system « journal papier » de Moment2Vie.
   Chargé après demo-style.css sur les pages refondues : il pose les variables,
   les polices auto-hébergées et les composants du châssis (manchette,
   rubriques, une, encadré d'échéances, portes, liste, lettre).

   Les couleurs de rubrique sont sémantiques et fixes. Le châssis, lui, prend
   la teinte de la rubrique choisie par le visiteur via les variables de rôle
   --accent* posées par body.theme-r / theme-t / theme-d. */

/* --- polices auto-hébergées -------------------------------------------
   Fichiers produits par tools/get_fonts.py. Aucune requête vers un tiers. */
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Source Serif 4 est une police variable : un seul fichier porte 400 et 700. */
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/serif-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --papier:#fdfbf6; --papier-creux:#f5efe4; --encre:#191713; --encre-doux:#5c574d;
  --filet:#d8d0c0; --filet-fort:#191713;
  --rouge:#a4262c; --bleu:#1b5e8a; --vert:#2e6b4f; --or:#9a6b12;
  /* couleurs de rubrique : sémantiques, ne suivent pas le thème */
  --retraite:#8a5c00; --retraite-pale:#fbf3e3;
  --travail:#1f4e79;  --travail-pale:#eef3f8;
  --demenagement:#2e6b4f; --demenagement-pale:#edf4f0;
  /* châssis : prend la teinte de la rubrique, rouge de marque par défaut */
  --accent:#a4262c; --accent-fonce:#7d1c21; --accent-pale:#f8f3e9; --accent-bord:#e3d8c4;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.theme-r{--accent:#8a5c00;--accent-fonce:#634200;--accent-pale:#fbf3e3;--accent-bord:#e6d3a8}
body.theme-t{--accent:#1f4e79;--accent-fonce:#16395a;--accent-pale:#eef3f8;--accent-bord:#c9d8e6}
body.theme-d{--accent:#2e6b4f;--accent-fonce:#1f4d38;--accent-pale:#edf4f0;--accent-bord:#c6dccd}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--papier);color:var(--encre);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.conteneur{max-width:1140px;margin:0 auto;padding:0 24px}

/* --- bandeau de fraîcheur ---------------------------------------------- */
.bandeau-fraicheur{background:var(--accent-fonce);color:#f4efe4;font-size:12.5px;letter-spacing:.02em}
.bandeau-fraicheur .conteneur{display:flex;justify-content:space-between;gap:14px;height:34px;align-items:center}
.bandeau-fraicheur b{font-weight:600;color:#fff}
.bandeau-fraicheur .point{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7fbf8f;margin-right:7px;vertical-align:1px}

/* --- manchette ---------------------------------------------------------- */
header.manchette{position:static;background:var(--papier);box-shadow:none;padding:20px 0 0}
.ligne-haut{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux);padding-bottom:10px}
.titre-journal{font-family:var(--serif);font-weight:700;font-size:72px;line-height:.95;letter-spacing:-2px;text-align:center;margin:2px 0 14px}
.titre-journal a{color:inherit}

/* demo-style.css impose Poppins a tous les liens : des qu'un titre porte un
   lien, ce lien repassait en sans-serif et le titre paraissait en Poppins
   alors que son h2 etait bien en Source Serif. Une regle pour la classe
   entiere, plutot qu'un correctif par composant. */
h1 a, h2 a, h3 a, h4 a, .titre-journal a{font-family:inherit;font-weight:inherit;letter-spacing:inherit}
.titre-journal span{color:var(--accent)}
.promesse{font-family:var(--serif);font-size:19.5px;line-height:1.45;text-align:center;max-width:44em;margin:0 auto 18px;color:#2c2822;text-wrap:balance}
.promesse em{font-style:italic}
.rubriques{border-top:3px solid var(--accent-fonce);border-bottom:1px solid var(--filet-fort);margin-top:6px}
.rubriques .conteneur{display:flex;align-items:center;gap:26px;height:46px}
.rubriques a{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.rubriques a:hover,.rubriques a.on{color:var(--accent)}
.rubriques .rech{margin-left:auto;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--encre-doux);border:1px solid var(--accent-bord);border-radius:999px;padding:7px 14px;background:#fff;display:flex;align-items:center;gap:7px}
.rubriques .rech input{border:none;background:none;font:inherit;color:inherit;width:150px;outline:none}

/* --- bandeau « votre rubrique » ---------------------------------------- */
.edition{background:var(--accent-pale);border-bottom:1px solid var(--accent-bord);font-size:13.5px;color:#3b362e}
.edition b{color:var(--accent);font-weight:600;flex:0 0 auto;white-space:nowrap}
.edition.choisie .sep{display:none}
.edition .conteneur{display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 24px}
.edition .sep{color:#b3a893}
.bascule{margin-left:auto;display:flex;align-items:center;gap:6px}
.bascule-lab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a8272;margin-right:4px;white-space:nowrap}
/* Sans rubrique choisie, « Choisir ma rubrique » est déjà affiché à gauche :
   le libellé du sélecteur ferait doublon. */
.edition:not(.choisie) .bascule-lab{display:none}
.puce{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;border:1px solid var(--accent-bord);border-radius:100px;background:#fff;font-size:12px;line-height:1.5;color:#4a453c;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.puce i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.puce.r i{background:var(--retraite)} .puce.t i{background:var(--travail)} .puce.d i{background:var(--demenagement)}
.puce:hover{border-color:#a09886;background:#faf7f0}
.puce.r.on{background:var(--retraite);border-color:var(--retraite);color:#fff;font-weight:600}
.puce.t.on{background:var(--travail);border-color:var(--travail);color:#fff;font-weight:600}
.puce.d.on{background:var(--demenagement);border-color:var(--demenagement);color:#fff;font-weight:600}
.puce.on i{background:#fff;opacity:.85}

/* --- une ---------------------------------------------------------------- */
.une{padding:26px 0 0}
.grille-une{display:grid;grid-template-columns:1fr 300px;gap:0}
.principal{padding-right:30px;border-right:1px solid var(--filet)}
.principal figure{position:relative;overflow:hidden;border-radius:3px}
.principal figure img{width:100%;height:380px;object-fit:cover;object-position:center 55%}
.principal figcaption{font-size:11.5px;color:#7a7365;margin-top:6px;font-style:italic}
.rubrique{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--encre-doux);margin:14px 0 6px}
.rubrique::before{content:"";width:8px;height:8px;background:currentColor;border-radius:1px}
.rubrique.r{color:var(--retraite)} .rubrique.t{color:var(--travail)} .rubrique.d{color:var(--demenagement)}
.principal h2{font-family:var(--serif);font-weight:700;font-size:41px;line-height:1.1;letter-spacing:-.8px;margin-bottom:12px}
.principal h2 a:hover{color:var(--accent)}
.chapo{font-family:var(--serif);font-size:19px;line-height:1.5;color:#332e27}
.signature{font-size:12.5px;color:var(--encre-doux);margin-top:12px;padding-top:10px;border-top:1px solid var(--filet)}
.signature b{font-weight:600;color:var(--encre)}

/* --- marge droite : échéances + en bref -------------------------------- */
.marge{padding-left:26px}
.encadre{border-top:3px solid var(--accent-fonce);background:var(--accent-pale);padding:14px 16px 12px;margin-bottom:22px}
.encadre h3{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.encadre .sous{font-size:12px;color:var(--encre-doux);margin-bottom:12px}
.ech{display:flex;gap:11px;padding:9px 0;border-top:1px solid #e4dccc;align-items:flex-start}
.ech:hover .ech-t{color:var(--accent)}
.ech-d{flex:0 0 38px;text-align:center;line-height:1;font-family:var(--serif);font-weight:700;font-size:20px}
.ech-d small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-doux);margin-top:3px}
.ech-t{display:block;font-size:13.5px;line-height:1.3;font-weight:600}
.ech-m{display:block;font-size:11.5px;color:var(--encre-doux);margin-top:2px}
.urgent{color:var(--rouge);font-weight:600}
.pied-encadre{margin-top:11px;padding-top:10px;border-top:1px solid #e4dccc;font-size:12.5px;display:flex;flex-direction:column;gap:5px}
.pied-encadre a{color:var(--accent);font-weight:600}
.enbref h3{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;border-top:3px solid var(--accent-fonce);padding-top:9px;margin-bottom:2px}
.enbref a{display:block;padding:11px 0;border-bottom:1px solid var(--filet)}
.enbref .t{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.28;font-weight:600}
.enbref a:hover .t{color:var(--accent)}
.enbref .m{display:block;font-size:11.5px;color:var(--encre-doux);margin-top:3px}
.neuf{display:inline-block;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--rouge);padding:2px 5px;border-radius:2px;vertical-align:2px;margin-left:6px}

/* --- trois portes ------------------------------------------------------- */
.portes{margin-top:34px;border-top:1px solid var(--filet-fort);padding-top:0}
.portes .conteneur{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
/* Le titre de section vit dans la meme grille que les trois portes :
   sans cela il occupe une cellule et decale la troisieme porte. */
.portes .tete-section{grid-column:1/-1;padding:18px 0 22px;margin-bottom:0}
.porte{padding:22px 26px 20px;border-right:1px solid var(--filet);border-top:3px solid var(--filet);margin-top:-3px}
.porte:last-child{border-right:none;padding-right:0}
.porte:first-child{padding-left:0}
.porte.r{border-top-color:var(--retraite)} .porte.t{border-top-color:var(--travail)} .porte.d{border-top-color:var(--demenagement)}
.porte .num{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--encre-doux)}
.porte.r .num{color:var(--retraite)} .porte.t .num{color:var(--travail)} .porte.d .num{color:var(--demenagement)}
.porte h3{font-family:var(--serif);font-size:22px;line-height:1.2;margin:4px 0 8px;letter-spacing:-.3px}
.porte p{font-size:14px;color:var(--encre-doux);margin-bottom:12px}
.porte .outil{display:inline-block;font-size:13.5px;font-weight:600;border-bottom:2px solid var(--encre);padding-bottom:2px;margin-bottom:12px}
.porte.r .outil:hover{border-color:var(--retraite);color:var(--retraite)}
.porte.t .outil:hover{border-color:var(--travail);color:var(--travail)}
.porte.d .outil:hover{border-color:var(--demenagement);color:var(--demenagement)}
.porte .art{display:block;font-size:13px;line-height:1.35;color:#3b362e;padding:6px 0;border-top:1px dotted var(--filet)}

/* --- derniers articles -------------------------------------------------- */
.derniers{margin-top:34px;padding-top:26px;border-top:3px solid var(--accent-fonce)}
.tete-section{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.tete-section h2{font-family:var(--serif);font-size:30px;letter-spacing:-.5px}
.tete-section a{font-size:13px;color:var(--accent);font-weight:600;white-space:nowrap}
.duo{display:grid;grid-template-columns:380px 1fr;gap:32px}
.carte-img figure{overflow:hidden;border-radius:3px}
.carte-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.carte-img h3{font-family:var(--serif);font-size:24px;line-height:1.18;margin:10px 0 6px;letter-spacing:-.3px}
.carte-img p{font-size:14px;color:var(--encre-doux)}
.carte-img .m{font-size:12px;color:var(--encre-doux);margin-top:8px}
.liste-articles a{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--filet)}
.liste-articles a:first-child{border-top:1px solid var(--filet)}
.liste-articles img{flex:0 0 72px;width:72px;height:54px;object-fit:cover;border-radius:2px}
.liste-articles .tx{flex:1;min-width:0}
.liste-articles .t{display:block;font-family:var(--serif);font-size:18.5px;line-height:1.25;font-weight:600}
.liste-articles a:hover .t{color:var(--accent)}
.liste-articles .m{font-size:12px;color:var(--encre-doux);white-space:nowrap}
sup{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0}
.liste-articles .cat{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#8c8577;margin-bottom:2px}
.liste-articles .cat.r{color:var(--retraite)} .liste-articles .cat.t{color:var(--travail)} .liste-articles .cat.d{color:var(--demenagement)}

/* --- lettre incluse (newsletter.html) -----------------------------------
   Le HTML de l'inclusion est partagé par tout le site : on le restyle ici
   sans le réécrire, pour que l'accueil garde son papier jusqu'en bas. */
.newsletter{margin-top:40px;background:var(--accent-pale);border-top:3px solid var(--accent-fonce);border-bottom:1px solid var(--filet);padding:0;color:var(--encre)}
.newsletter .container{max-width:1140px;padding:32px 24px;text-align:left}
.newsletter-content{max-width:620px;margin:0;text-align:left}
.newsletter-title{font-family:var(--serif);font-size:29px;line-height:1.15;letter-spacing:-.5px;margin-bottom:8px}
.newsletter-description{font-size:14.5px;color:#3b362e;margin-bottom:14px}
.newsletter-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.newsletter-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-doux)}
.newsletter input[type=email]{width:100%;padding:12px 13px;border:1px solid var(--filet);border-radius:3px;font-family:var(--sans);font-size:15px;min-height:46px;background:#fff}
.categories-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--encre-doux);margin-bottom:8px}
.categories-hint{font-weight:400;text-transform:none;letter-spacing:0;color:#8a8272}
.button-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.button-tag{font-family:var(--sans);font-size:13px;padding:7px 13px;border:1px solid var(--accent-bord);border-radius:100px;background:#fff;color:#4a453c;cursor:pointer}
.button-tag.active{background:var(--accent-fonce);border-color:var(--accent-fonce);color:#fff;font-weight:600}
.newsletter-consents{border-top:1px solid var(--filet);padding-top:12px;margin-bottom:14px}
.newsletter-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--encre-doux);margin:0;line-height:1.5}
.newsletter-consent strong{color:var(--encre);font-weight:600}
.newsletter-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none}
.submit-button2{background:var(--accent-fonce);color:#fff;border:none;border-radius:3px;padding:12px 22px;font-family:var(--sans);font-size:14.5px;font-weight:600;min-height:46px;cursor:pointer}
.submit-button2:hover{background:var(--accent)}
.newsletter-detail{font-size:11.5px;color:var(--encre-doux);margin-top:10px;line-height:1.5}
.newsletter-detail a{color:var(--accent);text-decoration:underline}
.newsletter-honeypot{position:absolute;left:-9999px}

/* --- pied de page inclus (footer.html) ---------------------------------- */
footer{background:var(--papier-creux);color:var(--encre);padding:34px 0 26px;margin-top:44px;border-top:1px solid var(--filet)}
footer .container{max-width:1140px;padding:0 24px}
.footer-content{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:26px}
.footer-logo{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.footer-logo span{color:var(--accent)}
.footer-description{font-size:13px;color:var(--encre-doux);margin-bottom:14px;max-width:34em}
.footer-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.footer-title::after{display:none}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:6px}
.footer-link a{font-size:13px;color:#3b362e}
.footer-link a:hover{color:var(--accent)}
.social-links{display:flex;gap:8px}
.social-link{width:32px;height:32px;border-radius:50%;border:1px solid var(--filet);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--encre-doux)}
.social-link:hover{border-color:var(--accent);color:var(--accent)}
.contact-info{font-size:13px;color:#3b362e}
.contact-item{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.copyright{border-top:1px solid var(--filet);padding-top:14px;font-size:12px;color:var(--encre-doux)}

@media(max-width:1150px) and (min-width:901px){.bascule-lab{display:none}}
@media (max-width:940px){
  .grille-une{grid-template-columns:1fr}
  .principal{padding-right:0;border-right:none;border-bottom:1px solid var(--filet);padding-bottom:20px}
  .marge{padding-left:0;padding-top:20px}
  .portes .conteneur{grid-template-columns:1fr}
  .porte{border-right:none;border-bottom:1px solid var(--filet);padding:18px 0}
  .duo{grid-template-columns:1fr}
  .titre-journal{font-size:44px}
  .promesse{font-size:15.5px;line-height:1.45;padding:0 2px}
  .principal figure img{height:auto;aspect-ratio:4/3;object-position:center}
  .bascule{margin-left:0;flex-wrap:wrap;row-gap:8px;width:100%}
  .bascule-lab{flex:0 0 100%;margin:0}
  .puce{font-size:11.5px;padding:4px 9px 4px 8px;gap:5px}
  .edition .sep{display:none}
  .principal h2{font-size:31px}
  .chapo{font-size:17px}
  .rubriques .conteneur{gap:16px;height:auto;padding:10px 24px;overflow-x:auto}
  .rubriques a{font-size:11px}
  .rubriques .rech{display:none}
  .ligne-haut{font-size:10px}
  .bandeau-fraicheur .conteneur{font-size:11px;height:auto;padding:6px 24px;flex-wrap:wrap;gap:2px}
  .edition .conteneur{height:auto;padding:10px 24px;font-size:12.5px;flex-direction:column;align-items:flex-start;gap:5px}
  .footer-content{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:560px){
  .footer-content{grid-template-columns:1fr}
  .liste-articles img{flex:0 0 56px;width:56px;height:42px}
  .liste-articles .t{font-size:16.5px}
}

/* --- La lettre : un encadre de service, pas un bandeau publicitaire --- */
/* Deux colonnes : le texte explique, le formulaire agit. Une colonne unique
   laissait 500 px de vide a droite de la lettre. */
.newsletter .newsletter-content{max-width:100%}
.newsletter #id-newsletter-step3{max-width:62ch}
.newsletter .lettre-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:64px;row-gap:18px;align-items:start}
.newsletter .lettre-texte{max-width:46ch}
.newsletter .newsletter-form-stacked{grid-column:2;grid-row:1 / span 2}
.newsletter .newsletter-title{font-family:var(--serif);font-size:30px;line-height:1.1;letter-spacing:-.01em;margin-bottom:8px}
.newsletter .newsletter-description{font-size:15px;line-height:1.5;color:var(--encre-doux);max-width:54ch}
.newsletter .newsletter-label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);font-weight:600;margin-bottom:6px}
.newsletter input[type="email"]{width:100%;border:1px solid var(--filet-fort);background:#fff;padding:11px 13px;font-family:inherit;font-size:15px;color:var(--encre);border-radius:0}
.newsletter input[type="email"]:focus{outline:2px solid var(--accent);outline-offset:1px}
.newsletter .categories-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-doux);font-weight:600}
.newsletter .categories-hint{text-transform:none;letter-spacing:0;font-weight:400}
.newsletter .button-tag{border:1px solid var(--filet);background:#fff;color:var(--encre);font-family:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:0;cursor:pointer}
.newsletter .button-tag:hover{border-color:var(--accent);color:var(--accent)}
.newsletter .button-tag.selected{background:var(--accent);border-color:var(--accent);color:#fff}
.newsletter .newsletter-form-stacked .submit-button2{width:auto;background:var(--encre);color:var(--papier);border:0;border-radius:0;font-family:inherit;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:13px 24px;font-weight:700;cursor:pointer;margin-top:4px}
.newsletter .submit-button2:hover{background:var(--accent)}
.newsletter .newsletter-detail{font-size:12.5px;line-height:1.5;color:var(--encre-doux)}
.newsletter .newsletter-detail a{color:var(--accent);text-decoration:underline}

@media (max-width: 900px) {
  /* La lettre repasse sur une colonne : deux colonnes de 125 px hachaient
     le texte et le formulaire. */
  .newsletter .lettre-grille{grid-template-columns:1fr;column-gap:0;row-gap:20px}
  .newsletter .newsletter-form-stacked{grid-column:1;grid-row:auto}
  .newsletter .lettre-texte{max-width:none}
  .newsletter .newsletter-title{font-size:26px}
}

/* =====================================================================
   Pages internes : meme papier, memes filets. L'accueil a sa une, les
   autres pages reprennent la manchette en plus petit et les memes regles
   de typographie ; demo-style.css fournit encore la grille des cartes.
   ===================================================================== */
.manchette-page{padding:14px 0 0}
.manchette-page .titre-journal{font-size:42px;letter-spacing:-1px;margin:0 0 10px;text-align:left}
.manchette-page .ligne-haut{padding-bottom:6px}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

.page{padding:34px 0 10px}
.section-title{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1.06;letter-spacing:-1px;text-align:left;margin:0 0 10px;color:var(--encre)}
.page-chapo{font-family:var(--serif);font-size:19px;line-height:1.5;color:#332e27;max-width:60ch;margin-bottom:22px}

/* Filtres de rubrique : des onglets de journal, pas des pilules bleues. */
.article-tabs,.tabs{border-bottom:1px solid var(--filet-fort);display:flex;justify-content:flex-start;gap:26px;margin:0 0 26px;flex-wrap:wrap}
.article-tab{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--encre-doux);background:none;border:0;padding:0 0 10px;border-bottom:3px solid transparent;cursor:pointer}
.article-tab:hover{color:var(--accent)}
.article-tab.active,.article-tab[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--accent)}

/* Cartes d'articles : ni ombre ni coin arrondi, un filet. */
.article-card{background:transparent;border:0;border-top:1px solid var(--filet);border-radius:0;box-shadow:none;padding:18px 0 0;overflow:visible}
.article-card:hover{box-shadow:none;transform:none}
.article-image{border-radius:0;overflow:hidden;margin-bottom:12px}
.article-image img{border-radius:0;aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}
.article-category{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--encre-doux);background:none;border:0;border-radius:0;padding:0;margin-bottom:6px}
.article-card[data-cat="r"] .article-category{color:var(--retraite)}
.article-card[data-cat="t"] .article-category{color:var(--travail)}
.article-card[data-cat="d"] .article-category{color:var(--demenagement)}
.article-title{font-family:var(--serif);font-size:25px;line-height:1.16;letter-spacing:-.3px;font-weight:700;margin:0 0 8px}
.article-card:hover .article-title{color:var(--accent)}
.article-excerpt{font-size:15px;line-height:1.55;color:#3b362e}
.article-meta{font-size:12px;letter-spacing:.04em;color:#7a7365;margin-top:10px}

/* Boutons et liens d'action */
.btn,.btn-primary{display:inline-flex;align-items:center;gap:8px;border-radius:0;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:11px 18px;background:var(--encre);color:var(--papier);border:0}
.btn:hover,.btn-primary:hover{background:var(--accent)}

/* Pied de page : le colophon du journal, pas un bandeau social. */
footer{background:var(--papier-creux);border-top:3px solid var(--accent-fonce);padding:34px 0 18px;color:var(--encre)}
footer h3,footer .footer-title{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--encre);margin-bottom:10px}
footer a{color:#3b362e;font-size:13.5px;text-decoration:none}
footer a:hover{color:var(--accent);text-decoration:underline}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer .social-links a,footer .social-icons a{background:none;border:1px solid var(--filet);border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--encre-doux)}
footer .social-links a:hover,footer .social-icons a:hover{border-color:var(--accent);color:var(--accent)}
footer .copyright,footer .footer-bottom{border-top:1px solid var(--filet);margin-top:20px;padding-top:12px;font-size:12px;color:#7a7365}
.floating-action{right:24px;bottom:24px;width:44px;height:44px;border-radius:0;background:var(--encre);color:var(--papier);border:0;box-shadow:none}
.floating-action:hover{background:var(--accent)}

/* --- Page article : une colonne de lecture, pas un bandeau de couleur --- */
.article-full{background:transparent;box-shadow:none;border-radius:0;padding:0}
.article-full-header{background:transparent;color:var(--encre);padding:0 0 18px;border-radius:0;margin-bottom:24px;border-bottom:1px solid var(--filet)}
.article-full-category{background:none;border:0;border-radius:0;padding:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.article-full-title{font-family:var(--serif);font-size:48px;line-height:1.07;letter-spacing:-1px;font-weight:700;margin:10px 0 16px;color:var(--encre);text-wrap:balance;max-width:26ch}
.article-full-meta{background:none;border:0;border-top:1px solid var(--filet);border-radius:0;padding:12px 0 0;color:var(--encre-doux);font-size:12.5px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.article-author-name{color:var(--encre);font-weight:600}
.article-author-label,.article-ai-notice,.article-date,.article-read-time{color:var(--encre-doux)}
.article-ai-notice a{color:var(--accent);text-decoration:underline}
.author-avatar{border-radius:50%;width:38px;height:38px;object-fit:cover}
.article-full-featured-image{border-radius:0;margin:0 0 26px;overflow:hidden}
.article-full-featured-image img{border-radius:0;width:100%;height:auto}
.article-full-content{max-width:70ch;margin:0 auto}
.article-full-content p{font-size:17.5px;line-height:1.72;margin-bottom:1.05em}
.article-lead{font-family:var(--serif);font-size:21px;line-height:1.5;color:#332e27;border-left:3px solid var(--accent);padding-left:16px;margin-bottom:1.4em}
.article-full-content h2{font-family:var(--serif);font-size:30px;line-height:1.2;margin:1.6em 0 .5em;letter-spacing:-.4px;color:var(--encre)}
.article-full-content h3{font-family:var(--serif);font-size:22px;line-height:1.25;margin:1.4em 0 .4em;color:var(--encre)}
.article-full-content blockquote{border-left:3px solid var(--accent);padding-left:18px;font-family:var(--serif);font-size:20px;line-height:1.5;color:#332e27;margin:1.4em 0}
.article-full-content table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0}
.article-full-content thead tr,.article-full-content tr,.article-full-content table{background:none;background-image:none}
.article-full-content th{text-align:left;border-bottom:2px solid var(--filet-fort);padding:9px 8px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre);background:none;font-weight:700}
.article-full-content td{color:var(--encre);background:none}
.article-full-content td{border-bottom:1px solid var(--filet);padding:9px 8px;vertical-align:top}
.article-full-content a{color:var(--accent);text-decoration:underline}
.article-full-content ul,.article-full-content ol{padding-left:1.3em;margin-bottom:1.1em}
.article-full-content li{margin-bottom:.5em;line-height:1.68}
.article-full-content figure{margin:1.6em 0}
.article-full-content figcaption{font-size:12px;color:#7a7365;font-style:italic;margin-top:6px}
/* Tableaux de l'ancien site : fond blanc, ombre et degrade arc-en-ciel.
   Dans le journal, un tableau n'est qu'un filet et des colonnes alignees. */
.article-full-content .table-responsive,.table-responsive{background:none;background-image:none;box-shadow:none;border-radius:0;border-top:2px solid var(--filet-fort);padding:0;margin:1.5em 0;overflow-x:auto}
.article-full-content .modern-table,.modern-table{background:none;box-shadow:none;border-radius:0;border-collapse:collapse;width:100%}
.article-full-content .modern-table tr,.modern-table tr{background:none;box-shadow:none;border-radius:0}
.article-full-content .modern-table td,.modern-table td{border-bottom:1px solid var(--filet);padding:9px 8px;color:var(--encre)}
.article-full-content .modern-table th,.modern-table th{background:none;color:var(--encre);border-bottom:2px solid var(--filet-fort);padding:9px 8px}
.modern-table::before,.modern-table th:not(:last-child)::after{display:none}

/* Titres de page : tous les h1 des pages internes sont des titres de journal. */
.conteneur h1,.container h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:1.07;letter-spacing:-1px;color:var(--encre)}

/* --- Calendrier : des cases et des filets, pas des cartes flottantes --- */
.calendrier-mois{border-radius:0;box-shadow:none;border:1px solid var(--filet);background:#fff;overflow:hidden}
.calendrier-mois h2,.calendrier-mois h3,.calendrier-mois-nom{font-family:var(--serif);font-weight:700;letter-spacing:.02em}
.calendrier-case{border-radius:0}
.calendrier-case-pleine{border-radius:2px}
.calendrier-action{border-radius:0;border:1px solid var(--filet-fort);background:#fff;color:var(--encre);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;box-shadow:none}
.calendrier-action:hover{background:var(--accent-pale);border-color:var(--accent);color:var(--accent)}
.calendrier-action-forte{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.calendrier-action-forte:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.calendrier-theme{border-radius:100px;border:1px solid var(--filet);background:#fff;box-shadow:none}
.calendrier-fiche{border-radius:0;border:1px solid var(--filet-fort);box-shadow:none;background:#fff}
.calendrier-fiche-date{font-family:var(--serif);font-weight:700}
.calendrier-bulle{border-radius:0;border:1px solid var(--filet-fort);box-shadow:none}
.calendrier-entete{background:transparent;border:0;padding:0}
.calendrier-saison{border-radius:100px;border:1px solid var(--accent-bord);background:var(--accent-pale);color:var(--accent-fonce)}
.page-calendrier h1,.calendrier h1,.page-outils h1,.outils h1{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1.06;letter-spacing:-1px;color:var(--encre)}
/* --- Outils : des entrees de catalogue, pas des cartes flottantes --- */
.section-subtitle{font-family:var(--serif);font-size:18px;line-height:1.5;color:#4a443b;text-align:left;max-width:62ch;margin:0 0 26px}
.outils-grille{gap:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--filet-fort)}
.outil-carte{background:none;border:0;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet);border-radius:0;box-shadow:none;padding:22px 24px 20px;display:block}
.outil-carte:nth-child(3n){border-right:0}
.outil-carte:hover{box-shadow:none;transform:none;background:var(--accent-pale)}
.outil-icone{background:none;border:0;border-radius:0;width:auto;height:auto;color:var(--accent);font-size:19px;margin-bottom:10px}
.outil-titre{font-family:var(--serif);font-size:23px;line-height:1.18;letter-spacing:-.3px;font-weight:700;margin:0 0 8px;color:var(--encre)}
.outil-texte{font-size:14.5px;line-height:1.55;color:#3b362e;margin-bottom:12px}
.outil-lien{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);border-bottom:1px solid var(--accent-bord);padding-bottom:2px}
.outil-carte:hover .outil-lien{border-bottom-color:var(--accent)}
@media (max-width:900px){.outils-grille{grid-template-columns:1fr}.outil-carte{border-right:0;padding:20px 0}}
/* Pages de texte (a-propos, mentions, vie privee) : une colonne lisible.
   70 caracteres environ, h2 en serif, interligne de lecture. */
.container-texte{max-width:760px}
.container-texte p{max-width:100%;font-size:17px;line-height:1.68;margin-bottom:.9em;color:#2b271f}
.container-texte h2{font-family:var(--serif);font-weight:700;color:var(--encre);letter-spacing:-.4px;line-height:1.2;font-size:27px;margin:1.5em 0 .45em}
.container-texte h3{font-family:var(--serif);font-weight:700;color:var(--encre);letter-spacing:-.2px;line-height:1.25;font-size:21px;margin:1.3em 0 .4em}
.container-texte ul,.container-texte ol{padding-left:1.2em}
.container-texte li{line-height:1.65;margin-bottom:.4em}
.container-texte .article-full-title{font-size:44px;margin-bottom:18px}
/* Sous 780 px, sept rubriques ne tiennent pas sur une ligne : la navigation
   passait en debordement horizontal et les dernieres rubriques disparaissaient. */
@media (max-width:780px){
  .rubriques .conteneur{flex-wrap:wrap;overflow:visible;row-gap:8px;column-gap:16px;padding-top:10px;padding-bottom:10px}
  .rubriques a{font-size:11px;letter-spacing:.08em}
  .rubriques .rech{padding:5px 12px}
  .manchette-page .titre-journal{font-size:34px}
}
@media (max-width:600px){
  .ligne-haut{justify-content:space-between;gap:10px;font-size:9.5px;letter-spacing:.1em}
  .ligne-haut .site{text-align:right}
}
/* --- Calculateurs : le h1 vit dans .outil-entete, hors du .conteneur --- */
main.outil h1,.outil-entete h1{font-family:var(--serif);font-weight:700;font-size:42px;line-height:1.07;letter-spacing:-1px;color:var(--encre);margin-bottom:10px}
main.outil h2{font-family:var(--serif);font-weight:700;font-size:25px;line-height:1.25;letter-spacing:-.3px;color:var(--encre)}
main.outil h3{font-family:var(--serif);font-weight:700;color:var(--encre)}
main.outil p{max-width:78ch;line-height:1.65}
.choix-logement button{border-radius:0;box-shadow:none;border:1px solid var(--filet);background:#fff}
.choix-logement button:hover{border-color:var(--accent);box-shadow:none;transform:none}
.choix-logement button.actif,.choix-logement button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-fonce)}
.bouton,.bouton-checklist{border-radius:0;box-shadow:none;background:var(--encre);color:var(--papier);border:1px solid var(--encre);font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.bouton:hover{background:var(--accent);border-color:var(--accent)}
.atelier-piece,.piece-carte,.resultat{border-radius:0;box-shadow:none;border:1px solid var(--filet)}
main.outil input,main.outil select,main.outil textarea{border-radius:0;border:1px solid var(--filet);background:#fff;color:var(--encre);padding:9px 12px}
main.outil input:focus,main.outil select:focus,main.outil textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
main.outil fieldset{border-radius:0;border:1px solid var(--filet);background:transparent;padding:12px 16px;margin:0 0 18px}
main.outil legend{padding:0 6px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-doux);font-weight:600}
main.outil .retraite-resultat,main.outil .resultat,main.outil .resultat-carte{border-radius:0;background:var(--papier-creux);border:1px solid var(--filet);box-shadow:none}
main.outil .retraite-champ label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--encre);font-weight:600}
main.outil .aide,main.outil .champ-aide{color:var(--encre-doux)}
/* --- Recherche : le formulaire manquait, la page n'offrait que des onglets --- */
.recherche-page{display:flex;max-width:640px;margin:0 0 14px;border:1px solid var(--filet-fort);background:#fff}
.recherche-page input{flex:1;min-width:0;border:0;background:transparent;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--encre)}
.recherche-page input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.recherche-page button{border:0;background:var(--encre);color:var(--papier);padding:0 22px;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer}
.recherche-page button:hover{background:var(--accent)}
.recherche-aide{max-width:56ch;font-size:14px;color:var(--encre-doux);margin:0 0 22px}
.recherche-aide[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main.outil .courrier-type{border-radius:0;border:1px solid var(--filet);background:#fff}
main.outil .courrier-type span{border-radius:0;background:#fff;border:1px solid var(--filet);box-shadow:none}
main.outil .courrier-type input:checked + span{border-color:var(--accent);background:var(--accent-pale);box-shadow:none}
main.outil .courrier-type input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
main.outil .courrier-colonne-resultat{border-radius:0;background:var(--papier-creux);border:1px solid var(--filet)}
main.outil .courrier-lettre{border-radius:0;background:#fff;border:1px solid var(--filet)}
main.outil .courrier-bloc{border-radius:0}
/* Les liens du corps gardaient le bleu #1b6fa8 de l'ancienne charte : sur du
   papier creme, un bleu de terminal jure avec le rouge de la manchette. */
main a,.article-full-content a,.container-texte a{color:var(--accent)}
main a:hover,.article-full-content a:hover,.container-texte a:hover{color:var(--accent-fonce)}
main.outil .courrier-apercu{border-radius:0;border:1px solid var(--filet);box-shadow:none}
main.outil .courrier-echeance dd{color:var(--accent)}
main.outil .courrier-echeance .depasse dd{color:#a4262c}
main.outil .courrier-sources a{color:var(--accent)}
main.outil .courrier-sources a:hover{color:var(--accent-fonce)}
/* --- Derniers restes de l'ancien monde --- */
/* Les icones Font Awesome portaient un bleu de lien ; dans un journal elles
   prennent la couleur du texte qui les entoure. */
.fas,.far,.fab{color:inherit}
.social-link,.article-social-link,.author-avatar{border:1px solid var(--filet);color:var(--encre)}
.social-link:hover,.article-social-link:hover{color:var(--accent);border-color:var(--accent)}
/* Controles : ce sont des etiquettes et des boutons, pas des pastilles. Les
   avatars et les icones de personne restent ronds, ce sont des visages. */
.rubriques a.rech,a.rech,.article-tag,.feedback-btn,.calendrier-saison,.calendrier-saison-picto,.calendrier-theme{border-radius:0}
/* --- Pages d'etat (confirmation, desinscription) ---
   Le contenu flottait en haut d'une page vide, avec deux liens colles. */
.newsletter-action{max-width:620px;margin:0 auto;padding:32px 0 64px;min-height:calc(100vh - 200px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.newsletter-action .newsletter-title{font-family:var(--serif);font-weight:700;font-size:44px;
  line-height:1.1;letter-spacing:-1px;color:var(--encre);margin:0 0 12px}
.newsletter-action .newsletter-description{max-width:52ch;font-size:16px;color:var(--encre-doux);margin:0 0 22px}
.newsletter-action .newsletter-detail{font-size:14px;color:var(--encre-doux)}
.newsletter-action .sep{margin:0 10px;color:var(--filet-fort)}
.newsletter-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 22px}
.submit-button2{border-radius:0;border:1px solid var(--filet-fort);background:#fff;color:var(--encre);
  padding:10px 16px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;cursor:pointer}
.submit-button2:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--papier)}
.submit-button2:disabled{opacity:.5;cursor:default}
/* --- Bandeau de resultat du calculateur de volume ---
   Il etait sticky sous la manchette : en scrollant, il recouvrait le formulaire
   et les meubles, sans qu'on puisse s'en defaire. Il reprend sa place dans le
   flux. Et il s'appelait « .bandeau », comme le bandeau de fraicheur de la une :
   papier.css, charge en dernier, le repeignait en rouge sombre sous un texte
   presque noir. */
.bandeau{position:static;z-index:auto;background:#fff;border:1px solid var(--filet);border-radius:0;
  box-shadow:none;padding:14px 18px;margin:18px 0 22px}
.bandeau .volume .nombre{color:var(--encre)}
.bandeau .volume .unite,.bandeau .volume .fourchette,.bandeau .vehicule .detail{color:var(--encre-doux)}
.bandeau .vehicule .nom{color:var(--encre);font-weight:600}
/* Calculateur de volume : les fonds bleutes venaient de #dde5ee et #e8f3fb.
   Un journal n'a pas de surlignage bleu : la piece active se marque au filet
   et au papier creux, les compteurs au rouge de presse. */
main.outil aside.pieces{border-radius:0;border:1px solid var(--filet);background:#fff;padding:18px}
main.outil .piece-ligne{border-radius:0}
main.outil .piece-ligne:hover{background:var(--papier-creux)}
main.outil .piece-ligne.actif,main.outil .piece-ligne[aria-current="true"]{background:var(--papier-creux);box-shadow:inset 3px 0 0 var(--accent)}
main.outil .puce-nb{border-radius:0;background:var(--accent-pale);color:var(--accent-fonce);border:1px solid var(--accent-bord)}
main.outil .ligne{background:transparent;border-radius:0;border-bottom:1px solid var(--filet)}
main.outil .ligne:hover{background:#faf6ee}
main.outil .tri-badge{border-radius:0;border:1px solid var(--filet);color:var(--encre-doux)}
main.outil button.moins,main.outil button.plus{border-radius:0;border:1px solid var(--filet);background:#fff;color:var(--encre)}
main.outil button.moins:hover,main.outil button.plus:hover{border-color:var(--accent);color:var(--accent)}
main.outil .champ-nom{border-radius:0}
/* Le camion etait dessine dans le bleu de l'ancienne charte : en niveaux de
   gris, il tient le role d'une vignette de journal. */
main.outil .bandeau .camion svg{filter:grayscale(1) contrast(1.05)}
main.outil .bandeau .camion{mix-blend-mode:multiply}
/* Les pictogrammes de meubles heritaient d'un bleu #2980b9 (stroke:currentColor). */
/* outils.css peint les lignes presentes en bleu #2980b9, trait et pictogramme ;
   trois classes contre deux, il faut donc reprendre la main explicitement. */
main.outil .picto{color:var(--encre-doux)}
main.outil .ligne.on{border-left:3px solid var(--filet)}
main.outil .ligne.on .picto{color:var(--encre-doux)}
main.outil .ligne.on:hover{border-left-color:var(--accent)}
main.outil .ligne.on:hover .picto{color:var(--accent)}
main.outil .piece-ligne.actif .picto{color:var(--accent)}

/* ------------------------------------------------------------------ */
/* Communautes                                                         */
/* Une fiche par moment de vie, puis ses derniers articles.            */
/* ------------------------------------------------------------------ */

.page-communautes{padding-top:30px}
.page-communautes .page-chapo{max-width:78ch;margin-bottom:28px}

.communaute{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  padding:38px 0 34px;
  border-top:1px solid var(--filet);
}
.communaute:first-of-type{border-top:3px solid var(--encre)}

.communaute.c-r{--rub:#8a5c00}
.communaute.c-t{--rub:#1f4e79}
.communaute.c-d{--rub:#2e6b4f}

.communaute-num{
  display:block;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--rub);
  margin-bottom:10px;
}
.communaute-nom{
  font-family:var(--serif);
  font-size:34px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 12px;
  padding:0;
}
.communaute-nom a{color:var(--encre);font-family:inherit;font-weight:inherit;text-decoration:none;border:0}
.communaute-nom a:hover{color:var(--accent)}
.communaute-desc{
  font-size:16px;
  line-height:1.62;
  color:var(--encre-doux);
  max-width:58ch;
  margin:0 0 14px;
}
.communaute-meta{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-doux);
  margin:0;
}
.communaute-meta strong{color:var(--encre);font-weight:600}

.communaute-soustitre{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--encre-doux);
  font-weight:600;
  margin:0 0 10px;
  padding:0;
}
.communaute-articles{list-style:none;margin:0 0 18px;padding:0}
.communaute-articles li{border-bottom:1px solid var(--filet)}
.communaute-articles a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  text-decoration:none;
  border:0;
}
.communaute-articles .t{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.32;
  color:var(--encre);
}
.communaute-articles a:hover .t{color:var(--accent)}
.communaute-articles .d{
  flex:none;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--encre-doux);
}
.communaute-outils{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.communaute-outil{
  font-size:12px;
  letter-spacing:.06em;
  padding:7px 12px;
  border:1px solid var(--filet-fort) !important;
  color:var(--encre) !important;
  text-decoration:none;
}
.communaute-outil:hover{background:var(--papier-creux)}
.communaute-suite{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.communaute-suite a{color:var(--accent);text-decoration:none;border:0}
.communaute-suite a:hover{border-bottom:1px solid var(--accent)}

@media (max-width:860px){
  .communaute{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .communaute-nom{font-size:28px}
}