/* Calendrier des échéances.
   Reprend les variables de demo-style.css : aucune couleur inventée hors
   palette. Tout est préfixé par .calendrier pour ne pas toucher aux autres
   pages. L'ambiance saisonnière ne change que le bandeau d'en-tête et un
   décor en filigrane : la lisibilité des dates passe avant l'effet. */

.calendrier {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px 72px;
}

/* ---------- En-tête et ambiance ---------- */

.calendrier-entete {
    position: relative;
    overflow: hidden;
    padding: 24px 0 4px;
    isolation: isolate;
}

.calendrier-entete::after {
    content: "";
    position: absolute;
    inset: -40px -20px 0 -20px;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0;
    transition: opacity .5s ease;
    /* Le décor s'efface au bas du bandeau au lieu de s'arrêter sur une
       ligne droite au milieu du texte. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

.calendrier-saison {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    background: var(--amb-pastille, #eef3f8);
    color: var(--amb-accent, #1b5e8a);
    border: 1px solid var(--amb-bordure, #dde5ee);
}

.calendrier-saison[hidden] {
    display: none;
}

/* Une bulle ronde porte le picto de la saison en cours. Les huit dessins sont
   dans le HTML ; le CSS n'en laisse voir qu'un. */

.calendrier-saison-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--amb-accent, #1b5e8a) 15%, #fff);
    color: var(--amb-accent, #1b5e8a);
}

.calendrier-picto {
    display: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body:not([data-ambiance]) .calendrier-picto[data-picto="defaut"],
body[data-ambiance="automne"] .calendrier-picto[data-picto="automne"],
body[data-ambiance="hiver"] .calendrier-picto[data-picto="hiver"],
body[data-ambiance="printemps"] .calendrier-picto[data-picto="printemps"],
body[data-ambiance="ete"] .calendrier-picto[data-picto="ete"],
body[data-ambiance="noel"] .calendrier-picto[data-picto="noel"],
body[data-ambiance="halloween"] .calendrier-picto[data-picto="halloween"],
body[data-ambiance="nouvel_an"] .calendrier-picto[data-picto="nouvel_an"] {
    display: block;
}

.calendrier h1 {
    max-width: 760px;
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: #1b2a38;
}

.calendrier-intro {
    max-width: 700px;
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #4c5c6d;
}

/* ---------- Actions ---------- */

/* Le titre et sa phrase à gauche, les actions à droite : la hauteur de
   l'en-tête ne dépend plus du nombre de boutons. */

.calendrier-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

.calendrier-tete-texte {
    flex: 1 1 auto;
    min-width: 0;
}

/* Les commandes forment une colonne à droite du titre : actions, sujets,
   compteur. La hauteur du bloc reste comparable à celle du texte. */

.calendrier-controles {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    max-width: 470px;
}

.calendrier-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.calendrier-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #d8e1ea;
    border-radius: 9px;
    background: #fff;
    color: #2b3b4b;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}

.calendrier-action:hover {
    border-color: #b9c9d8;
    background: #f7fafc;
}

.calendrier-action:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.calendrier-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendrier-action-forte {
    border-color: #2b6f9e;
    background: #1b5e8a;
    color: #fff;
}

.calendrier-action-forte:hover {
    background: #164d72;
    border-color: #164d72;
}

/* ---------- Filtres par thème ---------- */

.calendrier-themes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

.calendrier-theme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    border: 1px solid #dde5ee;
    background: #f8fafc;
    color: #7a8899;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.calendrier-theme svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calendrier-theme[aria-pressed="true"] {
    color: var(--theme);
    border-color: color-mix(in srgb, var(--theme) 35%, #dde5ee);
    background: color-mix(in srgb, var(--theme) 8%, #fff);
}

.calendrier-theme[aria-pressed="false"] {
    opacity: .62;
    background: #fff;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: #c3cedb;
}

.calendrier-theme:focus-visible {
    outline: 2px solid var(--theme);
    outline-offset: 2px;
}

.calendrier-compteur {
    margin: 0;
    font-size: 13px;
    color: #71808f;
    font-variant-numeric: tabular-nums;
}

/* ---------- Grille des mois ---------- */

.calendrier-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
    margin-top: 16px;
}

.calendrier-mois {
    border: 1px solid #e2e9f0;
    border-radius: 12px;
    background: #fff;
    padding: 10px 10px 8px;
    box-shadow: 0 1px 2px rgba(27, 42, 56, .04);
}

.calendrier-mois[hidden] {
    display: none;
}

.calendrier-mois h2 {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #5d6e7f;
}

/* ---------- Grille d'un mois ---------- */

.calendrier-jours,
.calendrier-cases {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.calendrier-jours {
    margin-bottom: 4px;
}

.calendrier-jours span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a9b5c2;
}

.calendrier-case {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: #6b7a8a;
    font-variant-numeric: tabular-nums;
}

.calendrier-case-vide {
    visibility: hidden;
}

.calendrier-num {
    font-size: 12.5px;
    line-height: 1;
    font-weight: 500;
}

.calendrier-weekend .calendrier-num {
    color: #9aa8b6;
}

.calendrier-case-pleine {
    border-color: #cfe0ee;
    background: #f2f6fa;
    color: #1b2a38;
    cursor: pointer;
    transition: background .14s, border-color .14s, box-shadow .14s;
}

.calendrier-case-pleine .calendrier-num {
    font-weight: 700;
}

.calendrier-case-pleine:hover {
    background: #fff;
    border-color: #1b5e8a;
    box-shadow: 0 2px 6px rgba(27, 94, 138, .12);
}

.calendrier-case-pleine:focus-visible {
    outline: 2px solid #3498db;
    outline-offset: 1px;
}

.calendrier-points {
    display: flex;
    gap: 2px;
    height: 4px;
}

.calendrier-points i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme, #95a5a6);
}

/* Un thème coupé retire le marqueur, pas la case : la grille doit rester
   stable, sinon les numéros sautent d'une ligne à l'autre. */
.calendrier-case-pleine.calendrier-case-eteinte {
    border-color: transparent;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

.calendrier-case-eteinte .calendrier-points {
    display: none;
}

.calendrier-case-eteinte .calendrier-num {
    font-weight: 500;
    color: #6b7a8a;
}

/* Un élément masqué doit le rester : plusieurs composants de la fiche
   imposent un display qui battrait l'attribut hidden. */
.calendrier [hidden],
.calendrier-fiche [hidden] {
    display: none;
}

/* ---------- Bulle de survol ---------- */

.calendrier-bulle {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    max-width: 260px;
    padding: 8px 11px 9px;
    border-radius: 9px;
    background: #1b2a38;
    color: #f2f6fa;
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow: 0 10px 24px rgba(16, 30, 44, .28);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.calendrier-bulle.visible {
    opacity: 1;
}

.calendrier-bulle strong {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #9fb6c9;
}

.calendrier-bulle span {
    display: block;
}

.calendrier-bulle span + span {
    margin-top: 2px;
}

.calendrier-bulle .calendrier-bulle-plus {
    color: #9fb6c9;
    font-style: italic;
}

/* ---------- Autres échéances du même jour ---------- */

.calendrier-fiche-autres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eef2f6;
}

.calendrier-fiche-autres[hidden] {
    display: none;
}

.calendrier-fiche-autres-titre {
    flex: 0 0 100%;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b98a6;
}

.calendrier-fiche-autre {
    padding: 5px 10px;
    border: 1px solid #dde5ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #2b3b4b;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.calendrier-fiche-autre:hover {
    border-color: #1b5e8a;
    background: #fff;
    color: #1b5e8a;
}

/* ---------- Bas de page ---------- */

.calendrier-legende {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid #e2e9f0;
    max-width: 760px;
}

.calendrier-legende h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #1b2a38;
}

.calendrier-legende p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5b6b7c;
}

@media (min-width: 900px) {
    .calendrier-legende {
        max-width: none;
        columns: 2;
        column-gap: 44px;
    }
    .calendrier-legende h2 {
        column-span: all;
    }
    .calendrier-legende p {
        break-inside: avoid;
    }
}

/* ---------- Fiche détaillée ---------- */

.calendrier-fiche {
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #22313f;
    box-shadow: 0 24px 60px rgba(16, 30, 44, .28);
}

.calendrier-fiche::backdrop {
    background: rgba(18, 30, 42, .45);
    backdrop-filter: blur(2px);
}

.calendrier-fiche-corps {
    position: relative;
    padding: 26px 26px 22px;
    overflow-y: auto;
    max-height: calc(100vh - 64px);
}

.calendrier-fermer {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #f2f6f9;
    color: #5b6b7c;
    cursor: pointer;
}

.calendrier-fermer:hover {
    background: #e6edf3;
}

.calendrier-fermer svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.calendrier-fiche-date {
    margin: 0 40px 6px 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fiche-accent, #1b5e8a);
}

.calendrier-fiche h2 {
    margin: 0 40px 12px 0;
    font-size: 22px;
    line-height: 1.25;
    color: #1b2a38;
}

.calendrier-fiche-resume {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: #33465a;
}

.calendrier-fiche-detail {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.62;
    color: #4c5c6d;
}

.calendrier-fiche-themes {
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.calendrier-etiquette {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: color-mix(in srgb, var(--theme) 10%, #fff);
    color: var(--theme);
    border: 1px solid color-mix(in srgb, var(--theme) 25%, #fff);
}

.calendrier-fiche-confiance {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8a6d1f;
    background: #fdf6e3;
    border-left: 3px solid #e0b54a;
    border-radius: 0 6px 6px 0;
    padding: 7px 10px;
}

.calendrier-fiche-confiance[data-niveau="ferme"] {
    color: #2f6b46;
    background: #edf7f0;
    border-left-color: #4a9d6a;
}

.calendrier-fiche-confiance[data-niveau="repere"] {
    color: #4c5c6d;
    background: #f3f6f9;
    border-left-color: #a9b7c5;
}

.calendrier-fiche-source {
    margin: 0 0 16px;
    font-size: 13px;
    color: #6b7a89;
}

.calendrier-fiche-source a {
    color: #1b5e8a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.calendrier-fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 4px;
}

.calendrier-fiche-lien,
.calendrier-fiche-agenda {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.calendrier-fiche-lien {
    background: #1b5e8a;
    color: #fff;
    border: 1px solid #1b5e8a;
}

.calendrier-fiche-lien:hover {
    background: #164d72;
}

.calendrier-fiche-agenda {
    background: #fff;
    color: #2b3b4b;
    border: 1px solid #d8e1ea;
}

.calendrier-fiche-agenda:hover {
    background: #f7fafc;
}

/* ---------- Ambiances saisonnières ---------- */

/* Sept ambiances, deux intensités. En discret, seule la teinte du bandeau
   change : le calendrier reste un outil. En net, un décor apparaît et le
   message saisonnier s'affiche. Rien ne bouge sans consentement : les
   animations sont coupées par prefers-reduced-motion. */

body[data-ambiance="printemps"] {
    --amb-accent: #2f855a;
    --amb-pastille: #eef8f1;
    --amb-bordure: #d5ebdd;
}
body[data-ambiance="ete"] {
    --amb-accent: #b7791f;
    --amb-pastille: #fdf6e6;
    --amb-bordure: #f0e3c4;
}
body[data-ambiance="automne"] {
    --amb-accent: #b05e1b;
    --amb-pastille: #fdf1e6;
    --amb-bordure: #f0dcc8;
}
body[data-ambiance="hiver"] {
    --amb-accent: #2c6f9e;
    --amb-pastille: #eef5fb;
    --amb-bordure: #d6e5f2;
}
body[data-ambiance="halloween"] {
    --amb-accent: #c05621;
    --amb-pastille: #fdf0e6;
    --amb-bordure: #f2d5bf;
}
body[data-ambiance="noel"] {
    --amb-accent: #b83232;
    --amb-pastille: #fdeeee;
    --amb-bordure: #f2cece;
}
body[data-ambiance="nouvel_an"] {
    --amb-accent: #a67c1a;
    --amb-pastille: #fdf8e7;
    --amb-bordure: #eee0b8;
}

/* Discret : un halo de couleur en haut du bandeau, rien de plus. */
body[data-intensite="discret"] .calendrier-entete::after {
    opacity: .5;
    background-image: radial-gradient(circle at 18% 0%,
        color-mix(in srgb, var(--amb-accent) 16%, transparent) 0,
        transparent 62%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Net : le décor devient un motif identifiable, en filigrane, et le bandeau
   prend une teinte de fond. Le masque du motif et le dégradé du fond
   s'éteignent avant la grille des mois. */
body[data-intensite="net"] .calendrier-entete {
    /* Le fond se fond dans la page : un bord droit au bas du bandeau se
       verrait comme une découpe. */
    background: linear-gradient(to bottom,
        var(--amb-fond-net, transparent) 0%,
        var(--amb-fond-net, transparent) 72%,
        transparent 100%);
}

body[data-intensite="net"] .calendrier-entete::after {
    opacity: 1;
}

body[data-ambiance="halloween"] {
    --amb-fond-net: #fdf6ef;
}
body[data-ambiance="noel"] {
    --amb-fond-net: #fdf5f5;
}
body[data-ambiance="nouvel_an"] {
    --amb-fond-net: #fdfaef;
}

body[data-ambiance="automne"][data-intensite="net"] .calendrier-entete::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23b05e1b' fill-opacity='.10'%3E%3Cpath d='M40 30c14 2 22 12 20 26-14-2-22-12-20-26z'/%3E%3Cpath d='M150 96c12 4 18 14 14 26-12-4-18-14-14-26z'/%3E%3Cpath d='M92 168c12 2 19 11 17 23-12-2-19-11-17-23z'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-ambiance="halloween"][data-intensite="net"] .calendrier-entete::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23c05621' fill-opacity='.13'%3E%3Cellipse cx='60' cy='60' rx='20' ry='17'/%3E%3Cellipse cx='162' cy='140' rx='16' ry='14'/%3E%3Cellipse cx='102' cy='196' rx='13' ry='11'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.55'%3E%3Cpath d='M52 56l4 8 8 4-8 4-4 8-4-8-8-4 8-4zM160 136l3 6 6 3-6 3-3 6-3-6-6-3 6-3z'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-ambiance="noel"][data-intensite="net"] .calendrier-entete::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23b83232' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M50 40l14 14M64 40L50 54M170 70l12 12M182 70l-12 12M100 170l12 12M112 170l-12 12'/%3E%3C/g%3E%3Cg fill='%23b83232' fill-opacity='.10'%3E%3Ccircle cx='140' cy='30' r='3'/%3E%3Ccircle cx='30' cy='140' r='2.5'/%3E%3Ccircle cx='196' cy='190' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-ambiance="nouvel_an"][data-intensite="net"] .calendrier-entete::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23a67c1a' fill-opacity='.12'%3E%3Crect x='48' y='30' width='4' height='12' rx='2' transform='rotate(24 50 36)'/%3E%3Crect x='168' y='104' width='4' height='12' rx='2' transform='rotate(-38 170 110)'/%3E%3Crect x='92' y='176' width='4' height='12' rx='2' transform='rotate(62 94 182)'/%3E%3Crect x='28' y='118' width='3' height='9' rx='1.5' transform='rotate(-14 29 122)'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .calendrier-entete::after,
    .calendrier-action,
    .calendrier-theme,
    .calendrier-case-pleine {
        transition: none;
    }
    .calendrier-fiche {
        animation: none;
    }
}

@media (max-width: 820px) {
    .calendrier-tete {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .calendrier-controles {
        align-items: stretch;
        max-width: none;
        min-width: 0;
        width: 100%;
    }
    .calendrier-actions,
    .calendrier-themes {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .calendrier-grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .calendrier-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .calendrier-mois {
        padding: 10px 10px 8px;
    }
    .calendrier-case {
        height: 30px;
    }
    .calendrier-num {
        font-size: 12px;
    }
}

@media (max-width: 620px) {
    .calendrier {
        padding: 0 14px 48px;
    }
    .calendrier-entete {
        padding-top: 18px;
    }
    .calendrier-entete::after {
        background-size: 160px 160px;
    }
    .calendrier h1 {
        font-size: 22px;
    }
    .calendrier-themes {
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 0;
        max-width: 100%;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .calendrier-themes::-webkit-scrollbar {
        display: none;
    }
    .calendrier-theme {
        flex: 0 0 auto;
    }
    .calendrier-actions {
        gap: 6px;
    }
    .calendrier-action {
        padding: 7px 10px;
        font-size: 12.5px;
    }
    .calendrier-fiche-corps {
        padding: 22px 18px 18px;
    }
    .calendrier-fiche h2 {
        font-size: 19px;
    }
}