/* lavignettecritair.fr — feuille unique du site.
   Reproduit le rendu du thème Blocksy (mesuré le 10/10/2026 sur l'ancien site WordPress) pour ce
   que le site utilise. Points de rupture repris de Blocksy : 1000 px (barre latérale masquée,
   menu en bouton, en-tête collant), 690 px (téléphone). L'en-tête est nouveau (décision
   d'Olivier du 10/10/2026) : logo, menu des 5 rubriques et lien vers la recherche, collant à
   toutes les largeurs. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/open-sans-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette de Blocksy, dans l'ordre de ses numéros (classes fond-N et texte-N) */
  --couleur-1: #007f5f;
  --couleur-2: #55a630;
  --couleur-3: #365951;
  --couleur-4: #192c27;
  --couleur-5: #e6f0ee;
  --couleur-6: #f2f7f6;
  --couleur-7: #fbfcfc;
  --couleur-8: #fff;
  --lien: #2872fa;
  --lien-survol: #1559ed;
  --h3: #996699;
  --h4: #663333;
  --h5: #666;
  --largeur: min(1290px, 90vw);
  --largeur-etroite: min(820px, 90vw);
  --espace-vertical: 40px;
  --hauteur-entete: 120px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--couleur-8);
  color: var(--couleur-3);
  font: 400 18px/1.65 "Open Sans", sans-serif;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { color: #fff; background: var(--couleur-1); }

a { color: var(--lien); text-decoration: underline; transition: color .12s cubic-bezier(.455, .03, .515, .955); }
a:hover, a:focus { color: var(--lien-survol); }
img { max-width: 100%; height: auto; vertical-align: middle; }
iframe { max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.5; color: var(--couleur-4); }
h1 { font-size: 40px; color: var(--couleur-1); }
h2 { font-size: 35px; color: var(--couleur-2); }
h3 { font-size: 30px; color: var(--h3); }
h4 { font-size: 25px; color: var(--h4); }
h5 { font-size: 20px; color: var(--h5); }
h6 { font-size: 16px; }
p, ul, ol, figure { margin: 0 0 1.5em; }
ul, ol { padding-left: 2.5em; }
li > ul, li > ol { margin-bottom: 0; }
strong, b { font-weight: 700; }
sup, sub { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }

.lien-evitement {
  position: absolute; left: -10000px; top: 0;
  background: #fff; color: var(--couleur-4); padding: 1em; z-index: 200;
}
.lien-evitement:focus { left: 1em; }
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.conteneur { width: var(--largeur); margin: 0 auto; }

/* En-tête collant : logo, menu des rubriques, recherche ; les ancres (#…) s'arrêtent sous lui */
html { scroll-padding-top: calc(var(--hauteur-entete) + 10px); }
.entete { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.entete .conteneur { display: flex; align-items: center; min-height: var(--hauteur-entete); }
.logo { flex: none; line-height: 0; }
.logo img { display: block; width: auto; height: 99px; }
.menu { margin-left: auto; }
.menu ul { display: flex; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 0 16px; line-height: var(--hauteur-entete);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--couleur-3); text-decoration: none;
}
.menu a:hover, .menu a:focus, .menu a[aria-current], .menu a.actif { color: var(--couleur-1); }
.recherche-lien {
  display: flex; align-items: center; gap: 9px; margin-left: 16px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--couleur-3); text-decoration: none;
}
.recherche-lien:hover, .recherche-lien:focus { color: var(--couleur-1); }
.recherche-lien svg { width: 15px; height: 15px; fill: currentColor; }
.menu-bouton { display: none; }

/* Bandeau de la page : H1, chapeau, date de mise à jour */
.bandeau { background: var(--couleur-5); }
.bandeau-texte {
  display: flex; flex-direction: column; justify-content: center;
  width: var(--largeur-etroite); min-height: 200px; margin: 0 auto; padding: 50px 0; text-align: center;
}
.bandeau h1 { font-size: 48px; }
.bandeau.sobre h1 { font-size: 40px; }
.chapo { margin-top: 20px; font-size: 16px; font-weight: 700; }
.chapo p { margin: 0; }
.maj { margin: 20px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: capitalize; }

/* Corps : article et barre latérale (la recherche) */
.corps { display: grid; grid-template-columns: 79% 20%; column-gap: 1%; padding: var(--espace-vertical) 0; }
.article { min-width: 0; }
.article > :last-child { margin-bottom: 0; }
.barre { min-width: 0; }

.recherche {
  padding: 5px; background: #fff; box-shadow: 0 12px 18px -6px rgba(34, 56, 101, .04);
}
.recherche label { display: block; margin-bottom: 7.5px; font-size: 15px; }
.recherche div { display: flex; }
.recherche input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 0; border-bottom: 1px solid var(--couleur-5); border-radius: 0;
  font: inherit; font-size: 16px; color: var(--couleur-3); background: transparent;
}
.recherche input:focus { outline: none; border-color: var(--couleur-1); }
.recherche button {
  min-height: 40px; margin-left: 10px; padding: 5px 20px; border: 0; border-radius: 3px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: #fff; background: var(--couleur-1);
}
.recherche button:hover, .recherche button:focus { background: var(--couleur-2); }

/* Contenu */
.article h2, .article h3, .article h4, .article h5, .article h6 { margin-bottom: calc(.3em + 10px); }
.article > :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 1.5em; }
.encadre { padding: 1.5em; }
.encadre a { color: inherit; }
.fond-1 { background: var(--couleur-1); } .texte-1 { color: var(--couleur-1); }
.fond-2 { background: var(--couleur-2); } .texte-2 { color: var(--couleur-2); }
.fond-3 { background: var(--couleur-3); } .texte-3 { color: var(--couleur-3); }
.fond-4 { background: var(--couleur-4); } .texte-4 { color: var(--couleur-4); }
.fond-5 { background: var(--couleur-5); } .texte-5 { color: var(--couleur-5); }
.fond-6 { background: var(--couleur-6); } .texte-6 { color: var(--couleur-6); }
.fond-7 { background: var(--couleur-7); } .texte-7 { color: var(--couleur-7); }
.fond-8 { background: var(--couleur-8); } .texte-8 { color: var(--couleur-8); }

.groupe { margin-bottom: 1.5em; }
.encadre > :last-child { margin-bottom: 0; }

figcaption { margin-top: .5em; font-size: 14px; text-align: center; }
.aligncenter { display: table; margin-left: auto; margin-right: auto; text-align: center; }
.alignright { display: table; float: right; margin: .3em 0 .3em 1.5em; }
.alignleft { display: table; float: left; margin: .3em 1.5em .3em 0; }
.aligncenter > figcaption, .alignright > figcaption, .alignleft > figcaption { display: table-caption; caption-side: bottom; }
.video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* Tableaux */
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; border: 1px solid var(--couleur-5); }
.tableau table.fixe { table-layout: fixed; }
.tableau thead { border-bottom: 3px solid var(--couleur-5); }
.tableau th, .tableau td { padding: .5em; border: 1px solid var(--couleur-5); vertical-align: middle; }
.tableau .fixe th, .tableau .fixe td, .tableau.aligncenter th, .tableau.aligncenter td { word-break: break-word; }
.tableau th { font-weight: 600; text-align: center; }
.tableau.rayures tbody tr:nth-child(odd) { background: #f0f0f0; }

/* Colonnes (empilées sous 782 px, comme dans WordPress) */
.colonnes { display: flex; gap: 1.5em; margin-bottom: 1.5em; }
.colonne { flex-grow: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.colonne[style*="flex-basis"] { flex-grow: 0; }
.centre-v { align-self: center; }
.colonne > :last-child { margin-bottom: 0; }

/* Sommaire (bloc de Rank Math) */
.sommaire { margin-bottom: 1.5em; }
.sommaire ol { margin: 0; counter-reset: item; }
.sommaire li { display: block; }
.sommaire li::before { content: counters(item, ".") ". "; counter-increment: item; }

/* Accueil et mentions légales : colonne étroite, sans barre latérale ; image pleine largeur */
.corps.etroit { display: block; width: 100%; }
.etroit .article > * { max-width: var(--largeur-etroite); margin-left: auto; margin-right: auto; }
.etroit .article > .alignfull { max-width: none; }
.alignfull img { width: 100%; }

/* Partage */
.partage { margin-top: 50px; }
.partage-titre { margin: 0 0 15px; font-size: 14px; font-weight: 600; line-height: 1.65; }
.partage div { display: flex; flex-wrap: wrap; gap: 15px; }
.partage a {
  display: flex; align-items: center; justify-content: center;
  width: 65px; height: 35px; border-radius: 3px; background: var(--couleur-1);
  transition: background .12s cubic-bezier(.455, .03, .515, .955);
}
.partage a:hover, .partage a:focus { background: var(--couleur-2); }
.partage svg { width: 15px; height: 15px; fill: #fff; }

/* Pied de page */
.pied { padding: 25px 0; background: var(--couleur-6); text-align: center; font-size: 12px; line-height: 1.3; }
.pied p { width: var(--largeur); margin: 0 auto; }

@media (max-width: 999.98px) {
  :root { --espace-vertical: 60px; --hauteur-entete: 70px; }
  .entete .conteneur { flex-wrap: wrap; }
  .logo img { height: 60px; }
  .recherche-lien { margin-left: auto; }
  .recherche-lien span { display: none; }
  .recherche-lien svg { width: 22px; height: 22px; }
  .menu-bouton {
    display: flex; align-items: center; justify-content: center;
    width: 45px; height: 45px; margin-left: 12px; padding: 0; border: 0; border-radius: 3px;
    background: var(--couleur-1); color: #fff; cursor: pointer;
  }
  .menu-bouton svg { width: 22px; height: 22px; fill: currentColor; }
  .menu-bouton .fermer { display: none; }
  .menu-bouton[aria-expanded="true"] .ouvrir { display: none; }
  .menu-bouton[aria-expanded="true"] .fermer { display: block; }
  .menu { display: none; order: 1; flex-basis: 100vw; margin: 0 calc((100% - 100vw) / 2); }
  .menu.ouvert { display: block; }
  .menu ul { display: block; background: var(--couleur-6); border-top: 1px solid var(--couleur-5); }
  .menu li + li { border-top: 1px solid var(--couleur-5); }
  .menu a { padding: 0 5vw; line-height: 48px; font-size: 14px; }
  .corps { display: block; }
  .barre { display: none; }
}

@media (max-width: 781px) {
  .colonnes { flex-wrap: wrap; }
  .colonne { flex-basis: 100% !important; }
}

@media (max-width: 689.98px) {
  :root { --largeur: 88vw; --largeur-etroite: 88vw; --espace-vertical: 30px; }
  .bandeau h1, .bandeau.sobre h1 { font-size: 30px; }
  .menu a { padding: 0 6vw; }
  .pied { padding: 15px 0; }
}

/* Page de recherche (/recherche/), sans barre latérale */
.sans-barre { display: block; }
.recherche-page { max-width: 600px; margin: 0 auto 2em; }
.resultats-info { font-weight: 600; }
.resultats { list-style: none; padding: 0; }
.resultats li { margin-bottom: 1.2em; }
.resultats a { font-size: 20px; font-weight: 600; }
.resultats p { margin: .2em 0 0; font-size: 16px; }