/* ========================================================================== PAS SI POULET — feuille de style du site du collectif citoyen de Blévy. Charte issue du moodboard officiel : Lin #EDE4D3 · Brique #A64B2A · Olive #5B6236 · Blé #D9A441 · Terre #26221B Règle des deux ambiances, héritée de la maquette : le ROUGE appartient à l'acte 2 (la bascule, le problème) et à l'appel à signer ; le VERT appartient aux actes 1 et 3 (le village, la réponse). Jamais de rouge et de vert en fond sur une même section — sinon le récit perd sa couleur de repère. ========================================================================== */ :root{ --vert:#5B6236; /* olive */ --nuit:#26221B; /* terre */ --creme:#EDE4D3; /* lin */ --rouge:#A64B2A; /* brique */ --craie:#D9A441; /* blé */ --inter:'Inter',system-ui,-apple-system,sans-serif; --anton:'Anton',Impact,sans-serif; --manu:'Caveat',cursive; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--inter);background:var(--creme);color:var(--nuit);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block;height:auto} a{color:inherit} h1,h2,h3,.anton{font-family:var(--anton);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05} h2{font-size:clamp(1.9rem,4.5vw,3rem)} /* Un contour visible au clavier, sur les deux fonds de la charte. */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{ outline:3px solid var(--craie);outline-offset:3px} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} section{padding:88px 0} /* La barre de navigation est collante : sans cette marge de défilement, un clic sur « Le dossier » amène le titre de la section SOUS la barre, et le visiteur atterrit au milieu d'un paragraphe. */ section[id],header[id]{scroll-margin-top:84px} .eyebrow{font-weight:800;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;opacity:.75;margin-bottom:14px;color:var(--vert)} .manu{font-family:var(--manu);font-size:1.7rem;line-height:1.2} .src{font-size:.78rem;opacity:.65;margin-top:10px} .lead{max-width:64ch;margin-top:14px} /* Sections sur fond sombre ou olive : l'accent passe au blé, sinon il disparaît. */ .sombre,.olive{color:var(--creme)} .sombre{background:var(--nuit)} .olive{background:var(--vert)} .sombre .eyebrow,.olive .eyebrow{color:var(--craie);opacity:1} /* Apparition au défilement. Le masquage n'est appliqué que si `head.js` a posé la classe `js` sur — sans JavaScript, le texte reste simplement visible plutôt que de disparaître définitivement. `head.js` est chargé de façon bloquante dans : la classe est donc là avant le premier rendu, il n'y a pas de clignotement. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .js .reveal.on{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---------- NAVIGATION ---------- */ nav{position:sticky;top:0;z-index:50;background:var(--nuit);color:var(--creme);border-bottom:2px solid rgba(234,224,213,.12)} .navrow{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1180px;margin:0 auto} .brand{text-decoration:none;display:flex;align-items:center;gap:12px} .brand img{flex:none} .brand .bname{font-family:var(--anton);font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;line-height:1} .brand .bsub{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.7;margin-top:4px} .navlinks{display:flex;gap:22px;align-items:center;font-size:.86rem;font-weight:600} .navlinks a{text-decoration:none;opacity:.85} .navlinks a:hover,.navlinks a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:4px} .burger{display:none;background:none;border:2px solid rgba(237,228,211,.4);color:var(--creme);font-size:1.15rem;line-height:1;padding:7px 11px;cursor:pointer} .mobilemenu{display:none;background:var(--nuit);border-top:1px solid rgba(237,228,211,.15);padding:10px 24px 18px;flex-direction:column;gap:2px} .mobilemenu a{color:var(--creme);text-decoration:none;font-weight:600;font-size:1rem;padding:12px 4px;border-bottom:1px solid rgba(237,228,211,.1)} .mobilemenu a:last-child{border-bottom:none} .mobilemenu.open{display:flex} @media(max-width:860px){ .burger{display:block} .navlinks a:not(.btn){display:none} } /* Sur les petits téléphones, la barre doit contenir trois choses seulement : le logo, « Je signe », le menu. La ligne « Collectif citoyen · Blévy » passe à la trappe — elle est répétée dans le hero deux centimètres plus bas. */ @media(max-width:520px){ .navrow{padding:10px 16px} .navlinks{gap:12px} .brand .bsub{display:none} .brand .bname{font-size:1rem} header.hero{padding:56px 0 56px} } /* ---------- BOUTONS ---------- */ /* `white-space:nowrap` : « Je signe » sur deux lignes dans la barre de navigation d'un téléphone, c'est le bouton le plus important du site qui devient illisible. Aucun libellé de bouton n'est assez long pour justifier un retour à la ligne. */ .btn{display:inline-block;background:var(--rouge);color:#fff;font-family:var(--anton);text-transform:uppercase;letter-spacing:.05em;padding:12px 26px;text-decoration:none;border:none;font-size:1rem;cursor:pointer;white-space:nowrap;transition:transform .15s ease} .btn:hover,.btn:focus-visible{transform:translateY(-2px)} .btn.small{padding:9px 18px;font-size:.85rem} .btn.ghost{background:transparent;border:2px solid currentColor;color:inherit} .btn.wide{display:block;text-align:center} /* ---------- HERO ---------- */ header.hero{background:var(--nuit);color:var(--creme);padding:96px 0 72px;position:relative;overflow:hidden} .hero h1{font-size:clamp(2.6rem,7vw,5.2rem);max-width:19ch} .hero h1 .accent{color:var(--craie)} .hero .sub{margin:22px 0 26px;font-size:1.08rem;max-width:52ch;opacity:.92} .hero .manu{color:var(--craie);margin-top:12px} .hero .eyebrow{color:var(--craie);opacity:1} .figures{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(234,224,213,.15);margin-top:56px;border:2px solid rgba(234,224,213,.15)} .figures>div{background:var(--nuit);padding:26px 20px;text-align:center} .figures .num{font-family:var(--anton);font-size:clamp(1.9rem,4.5vw,3rem);color:var(--craie)} .figures .lab{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.85;margin-top:6px} @media(max-width:640px){.figures{grid-template-columns:1fr}} /* Trait de craie continu, clin d'œil au logo. */ .chalk{position:absolute;inset:auto 0 0 0;height:5px;background:repeating-linear-gradient(90deg,var(--creme) 0 26px,transparent 26px 40px);opacity:.35} /* ---------- BANDEAUX ---------- */ .bandeau{background:var(--vert);color:var(--creme);text-align:center;padding:20px 24px;font-family:var(--anton);text-transform:uppercase;font-size:clamp(1rem,2.6vw,1.4rem);letter-spacing:.04em} .bandeau-chiffre{background:var(--vert);color:var(--creme);text-align:center;padding:56px 24px} .bandeau-chiffre .gros{font-family:var(--anton);font-size:clamp(2.4rem,7vw,4.2rem);color:var(--craie);line-height:1} .bandeau-chiffre p{margin:10px auto 0;font-size:1.02rem;max-width:56ch} /* ---------- ACTES ---------- */ .acte h2{margin-bottom:22px} .acte p{max-width:64ch} .acte2{border-top:6px solid var(--rouge)} .acte2 .eyebrow,.acte2 h2{color:var(--rouge)} .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} @media(max-width:860px){.grid2{grid-template-columns:1fr;gap:34px}} /* Acte 2 : la colonne de gauche fait trois fois la hauteur de l'infographie. Centrée, celle-ci flotterait au milieu d'un grand vide ; alignée en haut, elle est lue en même temps que le paragraphe qu'elle illustre. */ .acte2 .grid2{align-items:start} /* Jauge : les 115 mètres, à l'échelle du regard. */ .jauge{background:#fff;border:2px solid var(--nuit);padding:28px 24px} .jauge .titre{font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px} .jbar{position:relative;height:70px} .jline{position:absolute;left:6%;right:6%;top:34px;border-top:3px dashed var(--rouge)} .jend{position:absolute;top:14px;width:3px;height:44px;background:var(--nuit)} .jend.l{left:6%}.jend.r{right:6%} .jico{position:absolute;top:0;font-size:1.5rem} .jico.l{left:2%}.jico.r{right:2%} .jdist{position:absolute;left:0;right:0;top:44px;text-align:center;font-family:var(--anton);font-size:1.6rem;color:var(--rouge)} .jlegend{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;margin-top:8px} .jfacts{margin-top:22px;display:grid;gap:10px;font-size:.95rem} .jfacts b{color:var(--rouge)} /* ---------- CARTES ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px} @media(max-width:860px){.cards{grid-template-columns:1fr}} .card{background:#fff;border:2px solid var(--nuit);padding:26px} .card .rang{font-family:var(--anton);font-size:.85rem;opacity:.35;margin-bottom:6px} .card .num{font-family:var(--anton);font-size:2.4rem;color:var(--vert)} .card.alerte .num{color:var(--rouge)} .card .titre{font-weight:800;margin-bottom:8px} .card p{font-size:.95rem;margin-top:8px} /* Bandeau « le dossier », en pied de section. */ .docline{margin-top:34px;background:var(--nuit);color:var(--creme);padding:24px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between} .docline .t{font-family:var(--anton);text-transform:uppercase;font-size:1.2rem} .docline .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* Ce qui n'est pas encore publiable est annoncé comme tel, jamais simulé. */ .pending{display:inline-flex;align-items:center;gap:8px;border:2px dashed currentColor;padding:9px 16px;font-size:.85rem;font-weight:600;opacity:.85} /* ---------- PORTRAITS ---------- */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px} @media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pgrid{grid-template-columns:1fr}} .pcard{background:var(--nuit);border:2px solid rgba(234,224,213,.2);padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px} .pcard .phrase{font-family:var(--manu);font-size:1.6rem;color:var(--craie);line-height:1.15} .pcard .qui{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.8;margin-top:16px} /* ---------- ACTUALITÉS ---------- */ .timeline{margin-top:36px;border-left:3px solid var(--vert);padding-left:28px;display:grid;gap:28px;max-width:760px} .tl{position:relative} .tl::before{content:"";position:absolute;left:-36px;top:6px;width:13px;height:13px;background:var(--vert);border-radius:50%} .tl.alerte::before{background:var(--rouge)} .tl .date{font-weight:800;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--vert)} .tl.alerte .date{color:var(--rouge)} .tl h3{font-size:1.15rem;margin:4px 0 6px} .tl p{font-size:.95rem;max-width:62ch} .tl a{color:var(--rouge);font-weight:600} /* ---------- MÉDIAS / VIDÉO ---------- */ .medias{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;margin-top:36px;align-items:start} @media(max-width:860px){.medias{grid-template-columns:1fr}} /* La carte vidéo : une vignette cliquable, pas un lecteur intégré — france.tv n'autorise pas l'iframe, et un lecteur qui refuse de démarrer est pire que pas de lecteur du tout. */ .videocard{display:block;text-decoration:none;background:var(--nuit);color:var(--creme);border:2px solid rgba(234,224,213,.25);transition:transform .15s ease} .videocard:hover,.videocard:focus-visible{transform:translateY(-3px)} .videocard .vign{aspect-ratio:16/9;background:linear-gradient(155deg,#31384f,#1b1b16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px} .videocard .vign .quand{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .videocard .play{width:62px;height:62px;border:3px solid var(--craie);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--craie);font-size:1.4rem} .videocard .chaine{font-family:var(--anton);text-transform:uppercase;font-size:1.05rem;letter-spacing:.08em} .videocard .txt{padding:18px 20px} .videocard .txt b{font-family:var(--anton);font-weight:400;text-transform:uppercase;font-size:1.1rem;display:block;margin-bottom:6px} .videocard .txt p{font-size:.92rem;opacity:.9} .videocard .txt .go{display:inline-block;margin-top:10px;color:var(--craie);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase} .presselist{display:grid;gap:2px;background:rgba(234,224,213,.2);border:2px solid rgba(234,224,213,.2)} .presselist div{background:var(--nuit);padding:16px 18px} .presselist .titre{font-weight:800;font-size:.95rem} .presselist .quand{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--craie);margin-bottom:4px} .presselist p{font-size:.9rem;opacity:.9;margin-top:4px} /* ---------- TUILES TYPOGRAPHIQUES ---------- */ .tile{background:var(--vert);color:var(--creme);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;gap:6px} .tile .tnum{font-family:var(--anton);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--craie);line-height:1} .tile .tword{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.9} .tile .tmanu{font-family:var(--manu);font-size:1.5rem;line-height:1.2;color:var(--craie)} .tile.brique{background:var(--rouge)} .tile.brique .tnum{color:#fff} .tuiles4{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* Sur un téléphone, « Natura 2000 » à 1,6 rem plus 22 px de marge intérieure de chaque côté impose une largeur minimale de tuile que la colonne ne peut plus contenir : la grille déborde alors la page vers la droite. On resserre donc la typographie et les marges plutôt que d'empiler les quatre tuiles, ce qui allongerait la section de trois écrans. */ @media(max-width:560px){ .tuiles4{gap:10px} .tuiles4 .tile{padding:14px} .tuiles4 .tnum{font-size:clamp(1.1rem,5.2vw,1.6rem)} .tuiles4 .tword{font-size:.7rem;letter-spacing:.1em} } /* ---------- RÉSEAUX ---------- */ .reseaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px} .rescard{border:2px solid rgba(234,224,213,.25);padding:22px;text-decoration:none;display:block;transition:transform .15s ease} .rescard:hover,.rescard:focus-visible{transform:translateY(-3px);border-color:var(--craie)} .rescard b{font-family:var(--anton);font-weight:400;text-transform:uppercase;font-size:1.1rem;display:block;margin-bottom:6px} .rescard .handle{color:var(--craie);font-weight:600;font-size:.9rem} .rescard p{font-size:.9rem;margin-top:8px;opacity:.9} /* ---------- ET CHEZ VOUS ---------- */ .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px} @media(max-width:760px){.vgrid{grid-template-columns:1fr}} .vcard{background:var(--nuit);border:2px solid rgba(234,224,213,.2);padding:22px} .vcard .lieu{font-family:var(--anton);text-transform:uppercase;font-size:1.1rem;color:var(--craie)} .vcard p{font-size:.92rem;margin-top:8px} .vcard .src{color:rgba(234,224,213,.7)} /* ---------- CITATIONS ---------- */ .quote{border-left:4px solid var(--rouge);background:rgba(166,75,42,.06);padding:18px 22px;margin:20px 0;font-size:1.02rem;font-style:italic;line-height:1.55} .quote .qwho{display:block;font-style:normal;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:10px} .sombre .quote,.olive .quote{background:rgba(237,228,211,.07);border-left-color:var(--craie)} .bigquote{text-align:center;padding:34px 26px;border:2px solid rgba(237,228,211,.4)} .bigquote .qtext{font-family:var(--manu);font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.25;color:var(--craie)} .bigquote .qwho{display:block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:14px} /* ---------- FAQ ---------- */ .faq details{background:#fff;border:2px solid var(--nuit);margin-top:14px} .faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:800;font-size:1rem;display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--anton);font-size:1.3rem;color:var(--rouge);flex:none} .faq details[open] summary::after{content:"–"} .faq .rep{padding:0 20px 20px;font-size:.95rem;max-width:70ch} /* ---------- PÉTITION ---------- */ .petition{background:var(--creme);border-top:6px solid var(--rouge);text-align:center} .petition h2{font-size:clamp(2rem,5vw,3.4rem);color:var(--rouge)} .petition .sous{max-width:56ch;margin:20px auto 30px} .petition .arguments{max-width:520px;margin:0 auto 30px;text-align:left;font-size:.95rem;display:grid;gap:10px} .petition .arguments .chapeau{font-weight:800;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;opacity:.7} .btn.geant{font-size:1.2rem;padding:16px 40px} .compteur{font-family:var(--anton);font-size:1.4rem;margin-top:26px;color:var(--vert)} .compteur .cnum{color:var(--rouge)} /* Jauge de progression vers le prochain palier de la pétition. */ .progress{max-width:420px;margin:12px auto 0;height:12px;background:#fff;border:2px solid var(--nuit)} .progress span{display:block;height:100%;background:var(--rouge)} /* Le QR code : ce qui fait signer sur un marché, où personne ne tape une URL. */ .qrbloc{max-width:620px;margin:40px auto 0;background:#fff;border:2px solid var(--nuit);padding:26px;display:flex;gap:24px;align-items:center;text-align:left} @media(max-width:560px){.qrbloc{flex-direction:column;text-align:center}} .qrbloc img{width:150px;flex:none} .qrbloc b{font-family:var(--anton);font-weight:400;text-transform:uppercase;font-size:1.1rem;display:block;margin-bottom:6px} .qrbloc p{font-size:.92rem} .qrbloc .liens{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase} .qrbloc .liens a{color:var(--rouge)} /* ---------- PARTAGE ---------- */ .share{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .share a,.share button{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--nuit);background:#fff;color:var(--nuit);padding:10px 18px;font-family:var(--inter);font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s ease} .share a:hover,.share button:hover,.share a:focus-visible,.share button:focus-visible{transform:translateY(-2px)} .share .wa{border-color:#128C4A;color:#128C4A} .share .fb{border-color:#1656A0;color:#1656A0} /* ---------- RELANCE ---------- */ .relance{background:var(--nuit);color:var(--creme);text-align:center;padding:34px 24px} .relance p{font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.05rem,2.6vw,1.5rem);margin-bottom:16px} /* ---------- PRESSE ---------- */ .pitch{background:rgba(234,224,213,.07);border-left:4px solid var(--craie);padding:24px 26px;margin-top:30px;max-width:70ch} .pitch .manu{color:var(--craie);margin-bottom:8px} .pressegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px} @media(max-width:860px){.pressegrid{grid-template-columns:1fr}} .pcase{border:2px solid rgba(234,224,213,.25);padding:22px} .pcase b{font-family:var(--anton);font-weight:400;text-transform:uppercase;display:block;margin-bottom:8px;font-size:1.05rem} .pcase p{font-size:.92rem} /* ---------- BARRE COLLANTE MOBILE ---------- */ .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--rouge);display:none;justify-content:center;padding:10px 16px;box-shadow:0 -4px 14px rgba(0,0,0,.25)} .stickycta a{color:#fff;font-family:var(--anton);text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:10px} .stickycta.visible{display:flex} @media(min-width:861px){.stickycta{display:none !important}} body.has-sticky{padding-bottom:56px} /* ---------- PIED DE PAGE ---------- */ footer{background:var(--nuit);color:var(--creme);padding:48px 0;border-top:2px solid rgba(234,224,213,.15);text-align:center} footer .manu{color:var(--craie)} footer .fliens{margin-top:18px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:.9rem;font-weight:600} footer .fliens a{color:var(--creme)} footer .legal{font-size:.78rem;opacity:.6;margin-top:18px;max-width:70ch;margin-left:auto;margin-right:auto} /* ---------- PAGES SECONDAIRES (mentions légales) ---------- */ .page{padding:64px 0 88px;max-width:760px} .page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:8px} .page h2{font-size:1.3rem;margin:34px 0 10px;color:var(--vert)} .page p,.page li{font-size:.98rem} .page ul{margin:8px 0 0 20px} .page a{color:var(--rouge);font-weight:600} .retour{display:inline-block;margin-top:34px;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge)} /* ---------- PAGE 404 ---------- */ .hero404{min-height:70vh;display:flex;align-items:center} .hero404 h1{font-size:clamp(2.2rem,6vw,4rem)} /* ========================================================================== PETITES CLASSES D'AJUSTEMENT Elles remplacent les attributs `style=` de la maquette d'origine. Ce n'est pas une coquetterie : la politique de sécurité de contenu servie par nginx interdit tout style en ligne (c'est ce qui protège la page d'une injection de contenu). Un `style="..."` ajouté ici serait donc purement et simplement ignoré par le navigateur — il faut passer par une classe. ========================================================================== */ .mt-xs{margin-top:8px} .mt-s{margin-top:10px} .mt-sm{margin-top:12px} .mt-m{margin-top:14px} .mt-l{margin-top:22px} .mt-xl{margin-top:26px} .mt-2xl{margin-top:34px} .mb-xs{margin-bottom:6px} .nomt{margin-top:0} .center{text-align:center} .carre{aspect-ratio:1/1} .petit{font-size:.95rem} .note{font-size:.85rem;opacity:.8} .doux{opacity:.9} .lisible{max-width:70ch} .citation-courte{font-style:italic;font-size:.88rem} .ctas{display:flex;gap:14px;flex-wrap:wrap} .stack{display:grid;gap:14px} .sep-haut{border-top:2px solid var(--nuit)} .c-vert{color:var(--vert)} .c-rouge{color:var(--rouge)} .c-craie{color:var(--craie)} .lien-rouge{color:var(--rouge);font-weight:600} .lien-craie{color:var(--craie);font-weight:600} .fnom{font-family:var(--anton);text-transform:uppercase;font-size:1.3rem} .maj{opacity:.7;font-size:.9rem} .vcard.phare{border-color:var(--craie)} /* Avancement de la pétition. À REMETTRE À JOUR en même temps que le compteur affiché dans index.html : largeur = signatures ÷ palier visé. 368 ÷ 500 ≈ 74 %. */ .progress .jauge-petition{width:74%} /* ---------- IMPRESSION ---------- */ /* Le QR code et le dossier circulent en papier sur le marché du village. */ @media print{ nav,.stickycta,.share,.relance,.btn{display:none !important} body{background:#fff;font-size:12pt} section{padding:18px 0} .sombre,.olive,header.hero{background:#fff !important;color:#000 !important} .hero h1 .accent,.eyebrow{color:#000 !important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all} }