/* Paroisse en musique — feuille de style principale
   Couleurs, polices et formes : charte graphique (dossier charte-graphique/ du projet). */

@font-face { font-family: "Baloo 2"; src: url("../polices/baloo2-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../polices/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../polices/nunito-italique-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
  /* Charte : couleurs du logo */
  --vert-foret: #004321;
  --vert-vif: #008841;
  --vert-pale: #e8f3ec;
  --jaune: #f8a400;
  --orange: #f35f34;
  --turquoise: #00a48f;
  --framboise: #bc0043;
  --orange-texte: #b8401b;
  --turquoise-texte: #00766a;
  --jaune-texte: #8a5a00;
  --encre: #16261c;
  --encre-douce: #4b5a51;
  --creme: #fbf7ef;

  /* Rôles utilisés dans les composants */
  --fond: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--creme);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --bordure: #d5dfd8;
  --accent: var(--vert-foret);
  --accent-texte: #ffffff;
  --accent-doux: var(--vert-pale);
  --lien: var(--vert-vif);
  --or: var(--orange-texte);
  --succes: #1f6b3a;
  --succes-fond: #e5f2e8;
  --erreur: #a3262a;
  --erreur-fond: #fbe9e7;
  --info-fond: var(--vert-pale);
  --rayon: 14px;
  --rayon-petit: 6px;
  --pilule: 999px;
  --ombre: 0 2px 10px rgba(0, 67, 33, .08);
  --police: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titres: "Baloo 2", "Nunito", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.6 var(--police); }
img { max-width: 100%; height: auto; }
a { color: var(--lien); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; color: var(--vert-foret); }
h1, h2, h3 { font-family: var(--police-titres); font-weight: 700; line-height: 1.2; margin: 0 0 .5em; color: var(--vert-foret); }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 1.4em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
small { color: var(--texte-doux); }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-texte); padding: .5rem 1rem; z-index: 10; }
.evitement:focus { left: 1rem; }
.piege { position: absolute; left: -9999px; }

.conteneur { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 720px; }
.section { padding-top: 1.5rem; padding-bottom: 2rem; }

/* En-tête */
.entete { background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 5; }
.entete-interieur { display: flex; align-items: center; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; text-decoration: none; padding: .35rem 0; }
.logo img { display: block; width: 180px; height: auto; }
@media (max-width: 480px) { .logo img { width: 150px; } }
.menu-bouton { display: none; margin-left: auto; }
.menu { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.menu a { color: var(--vert-foret); text-decoration: none; padding: .45rem .85rem; border-radius: var(--pilule); font-size: .98rem; font-weight: 700; }
.menu a:hover, .menu a[aria-current] { background: var(--accent-doux); color: var(--accent); }
.menu a.compte { border: 2px solid var(--vert-foret); }
@media (max-width: 900px) {
  .menu-bouton { display: inline-block; background: none; border: 2px solid var(--vert-foret); border-radius: var(--pilule); padding: .4rem 1rem; color: var(--vert-foret); font: inherit; font-weight: 700; }
  .menu { display: none; width: 100%; flex-direction: column; padding-bottom: .8rem; }
  .menu.ouvert { display: flex; }
}

/* Pied */
.pied { background: var(--creme); border-top: 4px solid var(--vert-foret); margin-top: 4rem; padding: 2.2rem 0; font-size: .95rem; }
.pied-logo { display: block; width: 240px; height: auto; margin-bottom: .6rem; }
.pied a { color: var(--vert-foret); }
.pied-interieur { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pied-titre { font-family: var(--police-titres); font-weight: 600; font-size: 1.1rem; margin-bottom: .3rem; }
.pied nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: flex-start; }

/* Accueil */
.bandeau { background: var(--vert-pale) url("../img/portee.svg") no-repeat center bottom / 100% 70px; padding: 3.5rem 0 4.5rem; text-align: center; }
.bandeau a { color: var(--vert-foret); }
.bandeau h1 { max-width: 760px; margin: 0 auto .4em; }
.chapeau { font-size: 1.1rem; color: var(--texte-doux); }
.recherche-principale { display: flex; gap: .5rem; max-width: 640px; margin: 1.5rem auto 1rem; position: relative; }
.recherche-principale input { flex: 1; font-size: 1.1rem; padding: .8rem 1.2rem; border-radius: var(--pilule); border: 2px solid var(--bordure); }
.recherche-principale input:focus { border-color: var(--vert-vif); }
.liturgie-du-jour { font-size: .95rem; color: var(--texte-doux); }

/* Titres de section */
.titre-section { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.titre-section h1, .titre-section h2 { margin-bottom: .4em; }

/* Boutons */
.bouton, button.bouton { display: inline-block; background: var(--accent); color: var(--accent-texte); border: 2px solid var(--accent); border-radius: var(--pilule);
  padding: .6rem 1.3rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; }
.bouton:hover { background: var(--vert-vif); border-color: var(--vert-vif); color: #fff; }
.bouton.secondaire { background: transparent; color: var(--accent); }
.bouton.secondaire:hover { background: var(--vert-pale); color: var(--vert-foret); border-color: var(--vert-foret); }
.bouton.petit { padding: .35rem .7rem; font-size: .9rem; }
.bouton.danger { background: var(--erreur); border-color: var(--erreur); color: #fff; }
.lien, .lien-danger { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: .9rem; }
.lien-danger { color: var(--erreur); }
.bouton-icone { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 6px; padding: .2rem .55rem; cursor: pointer; color: var(--texte); }
.form-action { display: inline; }

/* Messages */
.message { padding: .8rem 1rem; border-radius: var(--rayon); margin: 1rem 0; background: var(--info-fond); }
.message ul { margin: 0; padding-left: 1.2rem; }
.message-succes { background: var(--succes-fond); color: var(--succes); }
.message-erreur { background: var(--erreur-fond); color: var(--erreur); }
.vide { color: var(--texte-doux); font-style: italic; }
.avertissement { color: var(--or); font-size: .9rem; font-weight: 600; }

/* Cartes de chants */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.carte-chant { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.1rem 1.25rem; transition: box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column; gap: .35rem; height: 100%; }
.carte-tete { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.carte-chant h3 { margin: 0; font-size: 1.25rem; }
.carte-chant h3 a { color: var(--vert-foret); text-decoration: none; }
.carte-chant h3 a:hover { color: var(--vert-vif); text-decoration: underline; }
.carte-chant p { margin: 0; }
.auteurs, .cote { font-size: .9rem; color: var(--texte-doux); }
.carte-chant form:last-child { margin-top: auto; padding-top: .4rem; }
.medias { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.carte-chant:hover { box-shadow: var(--ombre); border-color: var(--vert-vif); }
.media { font-size: .75rem; font-weight: 700; border-radius: var(--pilule); padding: .05rem .55rem; background: var(--creme); color: var(--texte-doux); }
.media-audio { color: var(--turquoise-texte); }
.media-partition { color: var(--orange-texte); }

/* Puces */
.puces { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .3rem 0; }
.puce { display: inline-block; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--texte); text-decoration: none; border: 1px solid transparent; }
.puce:hover, .puce.active { border-color: var(--accent); color: var(--accent); }
.puce-temps { background: var(--vert-pale); color: var(--vert-foret); font-weight: 700; }
.puce-moment { background: var(--jaune); color: var(--encre); }
.puce-retirer { background: var(--accent); color: var(--accent-texte); }
.puce-retirer:hover { color: var(--accent-texte); filter: brightness(1.15); }

/* Favori */
.form-favori { margin: 0; }
.favori { background: none; border: 1px solid var(--bordure); border-radius: 999px; width: 2.1rem; height: 2.1rem; cursor: pointer; color: var(--texte-doux); font-size: 1.05rem; line-height: 1; }
.favori.actif { color: var(--framboise); border-color: var(--framboise); background: rgba(188, 0, 67, .07); }

/* Tuiles */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.tuile { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  color: var(--texte); text-decoration: none; }
a.tuile:hover { border-color: var(--vert-vif); box-shadow: var(--ombre); }
.tuile strong { font-family: var(--police-titres); font-size: 1.2rem; color: var(--vert-foret); }
.tuile span { font-size: .88rem; color: var(--texte-doux); }

/* Mises en page */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.trois-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 800px) { .deux-colonnes, .trois-colonnes { grid-template-columns: 1fr; } }
.encart { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.encart h2:first-child, .encart h3:first-child { margin-top: 0; }
.encart-accent { border-color: var(--vert-pale); background: var(--vert-pale); }
.encart-accent a:not(.bouton) { color: var(--vert-foret); }
.grille-temps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.grille-temps h2 { margin-top: 0; }

/* Formulaires */
label { display: block; font-weight: 600; font-size: .92rem; margin: .8rem 0 .25rem; }
label.case { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; margin: .5rem 0; }
label.case input { margin-top: .3rem; }
input, select, textarea { font: inherit; color: var(--texte); background: var(--surface); border: 1px solid #b9c7be; border-radius: var(--rayon-petit); padding: .5rem .7rem; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--vert-vif); }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem 1.2rem 1.2rem; margin: 1.2rem 0; }
legend { font-family: var(--police-titres); font-weight: 700; color: var(--vert-foret); padding: 0 .4rem; }
.formulaire { max-width: 640px; }
.formulaire-large { max-width: none; }
.formulaire > .bouton, .formulaire > button { margin-top: 1rem; }
.formulaire.compact label { margin-top: .5rem; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.trois-champs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 700px) { .deux-champs, .trois-champs { grid-template-columns: 1fr; } }
.aide { font-size: .88rem; color: var(--texte-doux); margin: .3rem 0 .6rem; }
.ligne-formulaire { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.ligne-formulaire input, .ligne-formulaire select { width: auto; flex: 1 1 140px; }
.ligne-formulaire input.court { flex: 0 0 5rem; }
.ligne-formulaire input.large { flex: 3 1 240px; }
.ligne-formulaire label { margin: 0; font-weight: 400; font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; flex: 1 1 140px; }
.ligne-formulaire label.large { flex: 3 1 260px; }
.barre-enregistrer { position: sticky; bottom: 0; background: var(--fond); border-top: 1px solid var(--bordure); padding: .8rem 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.barre-enregistrer label { margin: 0; }
.barre-enregistrer select, .barre-enregistrer input { width: auto; }

/* Recherche */
.filtres { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: .3rem 1rem; align-items: end; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: .4rem 1rem 1rem; }
.filtres label { margin-top: .6rem; }
.filtres-plus { grid-column: 1 / -2; }
.filtres-plus summary { cursor: pointer; color: var(--accent); margin-top: .8rem; }
.filtres-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
.filtre-actions { align-self: end; }
@media (max-width: 1000px) { .filtres { grid-template-columns: 1fr 1fr; } .filtre-texte, .filtres-plus { grid-column: 1 / -1; } }
@media (max-width: 560px) { .filtres, .filtres-grille { grid-template-columns: 1fr; } }
.barre-resultats { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.barre-resultats p { margin: 0; }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 2rem 0 0; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; list-style: none; margin: .2rem 0 0; padding: .3rem 0; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); text-align: left; }
.suggestions a { display: block; padding: .4rem .8rem; text-decoration: none; color: var(--texte); }
.suggestions a:hover { background: var(--accent-doux); }

/* Fil d'Ariane */
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 1rem; font-size: .9rem; color: var(--texte-doux); }
.ariane li + li::before { content: "›"; margin-right: .3rem; }

/* Fiche chant */
.fiche-tete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.fiche-actions { display: flex; gap: .5rem; align-items: center; }
.incipit { font-style: italic; color: var(--texte-doux); }
.caracteristiques { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0; padding: 1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.caracteristiques dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }
.caracteristiques dd { margin: 0; font-weight: 600; }
.fiche-corps { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; margin-top: 1rem; }
@media (max-width: 860px) { .fiche-corps { grid-template-columns: 1fr; } }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--rayon); }
.audio { margin: .5rem 0; }
.audio figcaption { font-size: .9rem; color: var(--texte-doux); }
.audio audio { width: 100%; }
.bloc-paroles { margin: 0 0 1.2rem; }
.bloc-paroles.refrain p { font-weight: 600; }
.titre-bloc { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--or); margin-bottom: .2rem; font-weight: 400 !important; }
.paroles-grand-format .paroles { font-size: 1.6rem; line-height: 1.5; }
.paroles-grand-format .fiche-laterale { display: none; }
.paroles-grand-format .fiche-corps { grid-template-columns: 1fr; }
.liste-fichiers { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-fichiers li { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--bordure); }
.liste-fichiers small { display: block; }

/* Pages éditoriales */
.avec-sommaire { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 800px) { .avec-sommaire { grid-template-columns: 1fr; } }
.sommaire { display: flex; flex-direction: column; gap: .2rem; align-self: start; position: sticky; top: 80px; }
.sommaire-titre { font-family: var(--police-titres); font-weight: 700; color: var(--vert-foret); margin-bottom: .4rem; }
.sommaire a { text-decoration: none; padding: .3rem .8rem; border-radius: var(--pilule); color: var(--texte); }
.sommaire a[aria-current] { background: var(--vert-pale); color: var(--vert-foret); font-weight: 700; }
.contenu-editorial { max-width: 760px; }
.contenu-editorial ul { padding-left: 1.3rem; }
.contenu-editorial li { margin-bottom: .3rem; }

/* Onglets, listes, tableaux */
.onglets { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--bordure); margin: 0 0 1.5rem; }
.onglets a { padding: .5rem .9rem; text-decoration: none; color: var(--texte-doux); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.liste-simple { list-style: none; padding: 0; margin: 0 0 1rem; }
.liste-simple li { padding: .5rem 0; border-bottom: 1px solid var(--bordure); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.tableau { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); font-size: .95rem; display: block; overflow-x: auto; }
.tableau thead, .tableau tbody { display: table; width: 100%; border-collapse: collapse; }
.tableau tbody { display: table-row-group; }
.tableau thead { display: table-header-group; }
.tableau th, .tableau td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texte-doux); background: var(--surface-2); }
.tableau td.actions { white-space: nowrap; }
.tableau td.actions form { margin-right: .5rem; }
.etiquette { display: inline-block; font-size: .78rem; padding: .05rem .5rem; border-radius: 4px; background: var(--surface-2); color: var(--texte-doux); }
.etiquette-publie, .etiquette-actif, .etiquette-valide { background: var(--succes-fond); color: var(--succes); }
.etiquette-en_attente, .etiquette-partage { background: var(--info-fond); color: var(--accent); }
.etiquette-desactive, .etiquette-archive { background: var(--erreur-fond); color: var(--erreur); }

/* Programmes */
.programme-mise-en-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 2rem; }
@media (max-width: 900px) { .programme-mise-en-page { grid-template-columns: 1fr; } }
.lignes-programme { list-style: none; counter-reset: ligne; padding: 0; margin: 0; }
.ligne-programme { counter-increment: ligne; background: var(--surface); border: 1px solid var(--bordure); border-left: 4px solid var(--bordure); border-radius: var(--rayon);
  padding: .8rem 1rem; margin-bottom: .6rem; }
.ligne-programme.remplie { border-left-color: var(--accent); }
.ligne-tete { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; }
.ligne-moment { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--or); min-width: 9rem; }
.ligne-moment::before { content: counter(ligne) ". "; }
.ligne-chant { font-family: var(--police-titres); font-size: 1.2rem; font-weight: 700; color: var(--vert-foret); }
.ligne-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.ligne-details summary { cursor: pointer; font-size: .88rem; color: var(--texte-doux); margin-top: .4rem; }
.ligne-infos { font-size: .9rem; color: var(--texte-doux); margin: .3rem 0 0; }
.ajout-ligne { background: var(--surface-2); padding: .8rem 1rem; border-radius: var(--rayon); }
.liste-exports { list-style: none; padding: 0; margin: 0; }
.liste-exports li { padding: .4rem 0; }
.liste-exports small { display: block; }
.lien-partage { font-size: .85rem; }
.actions-programme { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Gestion */
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.chiffres div { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .8rem 1rem; }
.chiffres strong { display: block; font-size: 1.8rem; font-family: var(--police-titres); color: var(--vert-foret); }
.chiffres span { font-size: .85rem; color: var(--texte-doux); }
.classement { padding-left: 1.3rem; margin: 0; }
.classement li { padding: .15rem 0; }
.classement-termes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .classement-termes { grid-template-columns: 1fr 1fr; } }
.classement-termes .libelle { font-weight: 600; margin: .6rem 0 .2rem; }
.classement-termes label.case { margin: .15rem 0; font-size: .92rem; }
.fichier-attributs input, .fichier-attributs select { flex: 1 1 90px; font-size: .88rem; padding: .3rem .5rem; }
.barre-outils { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .3rem; }
.barre-outils button { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 6px; padding: .25rem .6rem; cursor: pointer; font: inherit; font-size: .85rem; color: var(--texte); }