/* ============================================================
   CNCDP — Feuille du site public · direction artistique « Douceur »
   ------------------------------------------------------------
   Refonte du 02/10/2026 : style B des maquettes (dossier maquettes/, hors dépôt), choisi par
   l'utilisateur parce que l'ancien rendu était jugé « criard » et « scolaire ». Fond blanc,
   grands panneaux arrondis en teintes claires de la palette, encre prune, violet réservé aux
   actions, police Figtree hébergée sur le serveur. Référence : Docs_technique/15-direction-artistique.md.

   Organisation :
     1. Police          5. Pied de page            9. Composants cn-* (pages GrapesJS et Twig)
     2. Jetons          6. Garde-fous débordement 10. Points de rupture des composants
     3. Socle           7. Ancien contenu GrapesJS 11. Avis (/avis et fiche)
     4. En-tête, menu   8. Bandeau de tête

   ⚠️ Cette feuille est AUSSI chargée dans le canevas de l'éditeur GrapesJS (data-cncdp-css) :
   les composants cn-* y rendent comme sur le site. Ne rien poser sur `body` qui changerait la
   mise en page du canevas (la disposition « pied de page en bas » vise `body.site` seulement).
   ============================================================ */

/* ------------------------------------------------------------
   1. Police — Figtree, hébergée sur le serveur (licence OFL, assets/fonts/figtree/OFL.txt)
   ------------------------------------------------------------
   Auparavant chargée depuis Google Fonts : l'adresse IP de chaque visiteur partait chez Google
   avant tout consentement (constat RGPD AUD-03 de l'audit du 07/09/2026). Fichiers variables :
   une seule ressource couvre toutes les graisses de 300 à 900. Découpage latin / latin étendu
   repris de Google Fonts : le navigateur ne télécharge que ce que la page utilise. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree/figtree-latin-Dj9csJy.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: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree/figtree-latin-ext-iZEjIKs.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Figtree";
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree/figtree-italique-latin-2oeNWgY.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: "Figtree";
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/figtree/figtree-italique-latin-ext-PwRAah8.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   2. Jetons
   ------------------------------------------------------------ */
:root {
    /* Palette administrable depuis /admin/apparence : base.html.twig redéfinit ces neuf
       variables après cette feuille (SiteExtension::COULEURS). Les noms ne changent pas. */
    --rose-clair: #ffdaeb; --rose-vif: #fd82bb; --rose-tres-clair: #ffe3e7;
    --violet-clair: #daafff; --violet-vif: #9d38da; --violet-profond: #9335e4;
    --orange-clair: #feeed4; --orange-vif: #de6d11; --orange-moyen: #fcbc63;

    /* Nuances dérivées des mêmes teintes, pour la lisibilité et les fonds (contrastes AA
       vérifiés sur blanc ; les vives ne servent jamais de couleur de texte). */
    --encre: #3b1a57;          /* texte et titres — 14,3:1 sur blanc */
    --encre-douce: #5c3f78;    /* texte secondaire — 8,6:1 sur blanc */
    --violet-texte: #7a2bb0;   /* liens — 7,4:1 sur blanc */
    --violet-fonce: #7f27b8;   /* survol des boutons — blanc dessus 7,3:1 */
    --rose-fonce: #b8306f;     /* icônes sur fond rose (graphisme seul) */
    --orange-fonce: #a84f06;   /* icônes sur fond orange ; blanc dessus 5,5:1 */
    --lilas: #f4ecfb;          /* violet clair très dilué : grands panneaux */
    --lilas-soutenu: #eadcf8;  /* survol, entrée de menu active, numéro d'avis */
    --lilas-trait: #d6c0ee;    /* filets et pointillés décoratifs */
    --trait-champ: #9a7fb5;    /* bord des champs de saisie — 3,5:1 sur blanc */
    --repere-saisie: #75608a;  /* texte indicatif des champs (placeholder) */
    --blanc: #ffffff;
    --aura-fond: #fcf8ff;      /* base presque blanche du bandeau */
    --pied-texte: #ecdff8;     /* texte du pied de page sur encre — 12:1 */

    /* Jetons d'avant la refonte, conservés : du contenu composé dans l'éditeur avant le
       02/10/2026 (styles par #identifiant) peut encore y faire référence. */
    --gris-tres-clair: #f8f9fa; --gris-clair: #e9ecef;
    --gris-moyen: #adb5bd; --gris-fonce: #495057; --noir-texte: #212529;
    --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem;
    --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem;
    --spacing-3xl: 4rem; --spacing-4xl: 6rem;
    --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
    --radius-xl: 1rem; --radius-2xl: 1.5rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);

    /* Typographie */
    --font-principale: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --corps: 1.125rem;         /* 18 px */
    --interligne: 1.7;
    --mesure: 66ch;            /* longueur de ligne du texte courant */

    /* Espacements */
    --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem;
    --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem;
    --retrait: clamp(12px, 1.6vw, 24px);        /* retrait des panneaux par rapport à l'écran */
    --gouttiere: clamp(1.25rem, 4vw, 3.5rem);   /* marge intérieure des panneaux */
    --largeur: 72rem;                           /* largeur utile maximale du contenu */
    --section-y: clamp(3.5rem, 7vw, 6rem);      /* respiration verticale des sections */
    --ecart-grille: clamp(1rem, 2vw, 1.5rem);

    /* Rayons, du plus grand au plus petit : la hiérarchie se lit aussi aux arrondis */
    --rayon-panneau: clamp(28px, 3.2vw, 40px);
    --rayon-carte: 28px;
    --rayon-tuile: 24px;
    --rayon-moyen: 18px;
    --rayon-petit: 12px;
    --pilule: 999px;

    /* Aura du bandeau : trois dégradés RADIAUX superposés (jamais un dégradé linéaire) */
    --aura:
        radial-gradient(52% 80% at 84% 40%, color-mix(in srgb, var(--rose-clair) 95%, transparent), color-mix(in srgb, var(--rose-clair) 45%, transparent) 45%, transparent 100%),
        radial-gradient(42% 62% at 56% 110%, color-mix(in srgb, var(--orange-moyen) 55%, transparent), color-mix(in srgb, var(--orange-moyen) 20%, transparent) 50%, transparent 100%),
        radial-gradient(55% 85% at 2% -4%, color-mix(in srgb, var(--violet-clair) 60%, transparent), color-mix(in srgb, var(--violet-clair) 25%, transparent) 50%, transparent 100%);
    --decalage: 1.25rem;       /* écart entre les trois cercles du décor de bandeau */

    /* Ligne de points ronds (le « chemin doux ») */
    --points-h: radial-gradient(circle, var(--lilas-trait) 1.4px, transparent 1.9px) 0 50% / 10px 4px repeat-x;

    --ombre-menu: 0 22px 48px -20px rgb(59 26 87 / 0.35), 0 0 0 1px rgb(59 26 87 / 0.06);
    --transition: 0.2s ease;
}

/* ------------------------------------------------------------
   3. Socle
   ------------------------------------------------------------ */
body {
    font-family: var(--font-principale);
    font-size: var(--corps);
    line-height: var(--interligne);
    color: var(--encre);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Pied de page toujours en bas, même sur une page courte (la 404 laissait une bande blanche
   sous le pied). Limité à body.site : le canevas de l'éditeur charge aussi cette feuille, et un
   body en flex y changerait la mise en page des blocs. */
body.site { display: flex; flex-direction: column; min-height: 100vh; }
body.site > main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 800; line-height: 1.2; color: inherit; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 800; }
sup { line-height: 0; }

/* Liens du contenu : soulignement fin et lilas, plein au survol. :where() garde la
   spécificité d'un simple `a` : chaque composant qui stylise ses liens reprend la main. */
:where(main) a {
    color: var(--violet-texte);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-decoration-color: var(--violet-clair);
    text-underline-offset: 0.22em;
    transition: color var(--transition), text-decoration-color var(--transition), background-color var(--transition);
}
:where(main) a:hover { color: var(--violet-fonce); text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--violet-vif); outline-offset: 3px; }
::selection { background: var(--rose-clair); color: var(--encre); }

/* Composants cn-* : la remise à zéro que Bootstrap ne fait pas (marges basses des titres,
   paragraphes et listes). :is() donne le poids d'un élément — assez pour passer devant le
   reboot de Bootstrap, pas assez pour gêner un composant. Les listes à classe perdent leurs
   puces et leur retrait : chaque composant de liste dessine les siens. */
:where(.cn-bandeau, .cn-section) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.cn-bandeau, .cn-section) :where(ul[class], ol[class]) { list-style: none; padding: 0; }

/* Lien d'évitement (base.html.twig) — RGAA 12.7 / WCAG 2.4.1.
   Hors de l'écran tant qu'il n'a pas le focus, puis ramené par-dessus l'en-tête.

   ⚠️ PAS de `display:none` ni de `visibility:hidden` : les deux retirent l'élément de l'ordre de
   tabulation, le lien ne serait alors atteignable par personne — c'est l'erreur classique qui
   rend un lien d'évitement purement décoratif. Le décalage hors écran, lui, le laisse focusable.
   z-index au-dessus de .site-header (1000), qui est `position: sticky` et le masquerait sinon.

   `main:focus { outline: none }` : la cible porte tabindex="-1" pour être focusable par
   programme ; sans cette règle, certains navigateurs dessinent un cadre autour de TOUTE la page
   au premier saut. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.75rem;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    border-radius: var(--pilule);
    background: var(--encre);
    color: var(--blanc);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0.75rem;
    color: var(--blanc);
}
main:focus {
    outline: none;
}

/* ------------------------------------------------------------
   4. En-tête et navigation
   ------------------------------------------------------------
   Balisage de base.html.twig et comportement de assets/site-nav.js INCHANGÉS par la refonte :
   seule la présentation change. ⚠️ site-nav.js lit `display` pour savoir si un sous-menu est
   déjà ouvert (premier toucher sur tablette) : les sous-menus s'affichent et se masquent par
   `display`, jamais par opacité seule. */
.site-header { position: sticky; top: 0; z-index: 1000; background: var(--blanc); }
.site-header > .container { max-width: none; padding: 0; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3) var(--esp-5);
    width: min(100% - 2 * (var(--retrait) + 0.5rem), 88rem);
    min-height: 5.25rem;
    margin-inline: auto;
}
.header-brand { display: inline-flex; flex: none; align-items: center; min-height: 2.75rem; border-radius: var(--rayon-petit); }
.brand-logo { display: block; width: auto; height: 2.5rem; max-width: none; }

.main-nav .nav-list { display: flex; align-items: center; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; }
.main-nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pilule);
    color: var(--encre);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition);
}
.main-nav a:hover { background: var(--lilas); color: var(--encre); text-decoration: none; }
.main-nav a[aria-current="page"] { background: var(--lilas-soutenu); }
/* Le parent d'une page de sous-menu active en garde une trace discrète. */
.nav-item.has-submenu:has(.submenu [aria-current="page"]) > a { background: var(--lilas); }

/* Chevron des entrées qui ouvrent un sous-menu */
.nav-item.has-submenu > a::after {
    content: "";
    flex: none;
    width: 0.4rem;
    height: 0.4rem;
    margin: -0.2rem 0 0 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.65;
    transform: rotate(45deg);
}

/* Sous-menu déroulant (bureau) : survol, :focus-within (clavier) et .open (toucher, posé par
   site-nav.js). Jusqu'au 28/09/2026, seul le survol ouvrait un sous-menu : « Consultation des
   avis », qui n'existe que dans un sous-menu, était inatteignable au clavier et au doigt. */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    min-width: 100%;
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    list-style: none;
    border-radius: var(--rayon-moyen);
    background: var(--blanc);
    box-shadow: var(--ombre-menu);
}
/* Passerelle invisible : le survol ne se perd pas entre l'entrée et le menu. */
.submenu::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 0.5rem; }
.nav-item.has-submenu:hover > .submenu,
.nav-item.has-submenu:focus-within > .submenu,
.nav-item.has-submenu.open > .submenu { display: block; }
.submenu li { position: relative; margin: 0; }
.submenu a { border-radius: var(--rayon-petit); }
/* Sous-menu de niveau 2 et plus : ouvre à droite */
.submenu .submenu { top: -0.5rem; left: 100%; margin: 0 0 0 0.25rem; }
.submenu .has-submenu > a::after { transform: rotate(-45deg); margin: 0 0 0 auto; padding-left: 0.5rem; }

/* Bouton d'ouverture du sous-menu, injecté par site-nav.js : masqué sur bureau, où les
   sous-menus s'ouvrent au survol. */
.submenu-toggle { display: none; }

.menu-toggle { display: none; }
.menu-toggle-label { display: none; }
.menu-toggle-label .fa-xmark { display: none; }
.menu-toggle:checked ~ .menu-toggle-label .fa-bars { display: none; }
.menu-toggle:checked ~ .menu-toggle-label .fa-xmark { display: inline; }

/* Entre 992 et 1379 px, le menu se resserre ; entre 992 et 1199 px, les libellés longs passent
   sur deux lignes dans leur pastille (« Demande pour la Commission des Avis »). Mesuré le
   02/10/2026 sur les maquettes, menu réel de la production : une ligne de 1200 à 1920 px. */
@media (min-width: 992px) and (max-width: 1379.98px) {
    .brand-logo { height: 2.125rem; }
    .main-nav a { padding-inline: 0.5rem; font-size: 0.875rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .header-inner { gap: var(--esp-4); }
    .brand-logo { height: 1.875rem; }
    .main-nav .nav-list > .nav-item { flex-shrink: 0; }
    .main-nav .nav-list > .nav-item > a {
        display: block;
        max-width: 10rem;
        padding: 0.4375rem 0.375rem;
        border-radius: var(--rayon-moyen);
        font-size: 0.84375rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
        text-wrap: balance;
    }
    .nav-item.has-submenu > a::after { display: inline-block; margin: 0 0 0.2rem 0.375rem; vertical-align: middle; }
    .submenu a { white-space: nowrap; }
}
/* Écran tactile en disposition bureau (tablette en paysage) : entrées de 44 px de haut. */
@media (min-width: 992px) and (pointer: coarse) {
    .main-nav a { min-height: 2.75rem; }
}

/* Menu déroulant jusqu'à 991 px (palier `lg` de Bootstrap et de la barre latérale du
   back-office). ⚠️ MOBILE_QUERY de assets/site-nav.js doit rester aligné sur ce palier. */
@media (max-width: 991.98px) {
    .header-inner { position: relative; min-height: 4.5rem; padding-block: 0.75rem; }
    .brand-logo { height: 2.125rem; }

    .menu-toggle-label {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        min-height: 2.75rem;
        margin: 0 0 0 auto;
        padding: 0.5rem 1.125rem;
        border: 1.5px solid var(--lilas-trait);
        border-radius: var(--pilule);
        background: var(--blanc);
        color: var(--encre);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
        transition: background-color var(--transition);
    }
    .menu-toggle-label:hover,
    .menu-toggle:checked ~ .menu-toggle-label { background: var(--lilas); }

    .main-nav {
        position: absolute;
        top: calc(100% - 0.25rem);
        right: 0;
        left: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0 0.5rem;
        border-radius: var(--rayon-tuile);
        background: var(--lilas);
        box-shadow: var(--ombre-menu);
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    .menu-toggle:checked ~ .main-nav {
        max-height: 80vh;
        /* dvh : la hauteur réellement visible, barre d'adresse mobile déployée comprise. */
        max-height: 80dvh;
        overflow-y: auto;
        padding: 0.5rem;
        opacity: 1;
    }
    .main-nav .nav-list { flex-direction: column; align-items: stretch; gap: 0.125rem; }
    .main-nav a {
        min-height: 3rem;
        padding: 0.75rem 1rem;
        border-radius: var(--rayon-petit);
        font-size: 1.0625rem;
        white-space: normal;
    }
    .main-nav a:hover { background: var(--lilas-soutenu); }
    .main-nav a[aria-current="page"] { background: var(--blanc); }
    .nav-item.has-submenu:has(.submenu [aria-current="page"]) > a { background: none; }

    .submenu {
        position: static;
        min-width: 0;
        margin: 0 0 0.25rem 1.25rem;
        padding: 0 0 0 0.625rem;
        border-left: 2px solid var(--lilas-trait);
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .submenu::before { display: none; }
    .submenu .submenu { margin-left: 0.75rem; }
    .submenu a { font-size: 1rem; }
    /* Dans le menu déroulé, seul le bouton ▾ (classe .open) déplie un sous-menu. */
    .nav-item.has-submenu:hover > .submenu,
    .nav-item.has-submenu:focus-within > .submenu { display: none; }
    .nav-item.has-submenu.open > .submenu { display: block; }

    /* Une entrée à sous-menu devient « lien + bouton » : le lien reste navigable, le bouton
       déplie. Le chevron ::after est retiré, c'est le bouton qui le porte. */
    .nav-item.has-submenu { display: flex; flex-wrap: wrap; align-items: center; }
    .nav-item.has-submenu > a { flex: 1; }
    .nav-item.has-submenu > a::after,
    .submenu .has-submenu > a::after { content: none; }
    .nav-item.has-submenu > .submenu { flex-basis: 100%; }
    .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 3rem;
        min-height: 3rem;
        padding: 0;
        border: 0;
        border-radius: var(--rayon-petit);
        background: transparent;
        color: var(--encre);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: transform var(--transition), background-color var(--transition);
    }
    .submenu-toggle:hover { background: var(--lilas-soutenu); }
    .nav-item.has-submenu.open > .submenu-toggle { transform: rotate(180deg); }
}

/* ------------------------------------------------------------
   5. Pied de page : panneau prune arrondi qui referme la page, en écho au bandeau
   ------------------------------------------------------------ */
.site-footer {
    margin: var(--retrait);
    border-radius: var(--rayon-panneau);
    background: var(--encre);
    color: var(--pied-texte);
    font-size: 1rem;
}
.site-footer > .container {
    width: min(100% - 2 * var(--gouttiere), var(--largeur));
    max-width: none;
    margin-inline: auto;
    padding: 0;
}
.footer-grid {
    display: grid;
    gap: var(--esp-6) var(--esp-7);
    padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--esp-6);
}
.footer-titre { margin: 0 0 var(--esp-3); color: var(--blanc); font-size: 1.125rem; letter-spacing: 0; }
.footer-col:first-child .footer-titre { font-size: 1.5rem; letter-spacing: -0.01em; }
.footer-col address { margin: 0; font-style: normal; line-height: 1.65; }
.footer-col p { margin: 0 0 0.125rem; line-height: 1.65; }
.site-footer a {
    color: var(--blanc);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--violet-clair) 55%, transparent);
    text-underline-offset: 0.22em;
    overflow-wrap: anywhere;
}
.site-footer a:hover { color: var(--blanc); text-decoration-color: var(--blanc); }
.site-footer :focus-visible { outline-color: var(--violet-clair); }
.site-footer i { margin-right: 0.375rem; color: var(--violet-clair); }
.footer-col p a { display: inline-block; padding-block: 0.3125rem; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3) var(--esp-6);
    padding-block: var(--esp-5) var(--esp-6);
    border-top: 1px solid rgb(236 223 248 / 0.18);
    font-size: 0.9375rem;
}
/* flex-wrap : sans lui, deux liens légaux ou plus débordaient de l'écran sous 400 px. */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }
.footer-legal a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.footer-copyright { margin: 0; color: var(--pied-texte); }

@media (min-width: 992px) {
    .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 991.98px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Liens du pied de page au doigt : 44 px de haut (ligne de 24 px + 2 × 10 px). */
@media (max-width: 991.98px), (pointer: coarse) {
    .footer-col p a { padding-block: 0.625rem; }
}

/* ------------------------------------------------------------
   6. Garde-fous contre le débordement horizontal
   ------------------------------------------------------------
   Le HTML des pages est composé dans GrapesJS : une largeur fixe, une image trop grande ou un
   tableau large y sont vite introduits. Pas d'`overflow-x: hidden` sur body : cela casserait
   `position: sticky` du header dans plusieurs navigateurs. */
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
.page-content table, .avis-contenu table { display: block; width: 100%; overflow-x: auto; }
.avis-contenu a { overflow-wrap: anywhere; }


/* ------------------------------------------------------------
   7. Ancien contenu GrapesJS (pages composées avant le 02/10/2026)
   ------------------------------------------------------------
   Règles du lot responsive du 28/09/2026, écrites pour le balisage d'avant la refonte
   (Bootstrap, styles par #identifiant). Depuis la refonte, elles ne s'appliquent plus qu'aux
   pages qui ne contiennent AUCUN composant cn-* : `:not(:has(> .cn-bandeau, > .cn-section))`
   sur la racine. Sans cette garde, la règle du h1 (poids d'un identifiant) écrasait la taille
   des titres de bandeau cn-* sur mobile. À retirer quand plus aucune page ne porte l'ancien
   balisage. */

/* ============================================================
   Contenu des pages éditoriales — adaptation aux écrans étroits (28/09/2026)
   ------------------------------------------------------------
   Les pages sont composées dans GrapesJS, qui écrit leurs styles en règles `#identifiant`
   (componentFirst) : 2.6rem pour chaque titre de bandeau, 70px de remplissage, etc. Relevé du
   28/09/2026 sur les 9 pages de production : AUCUNE media query. Rien ne s'adaptait donc au
   téléphone — titre de 42 px sur 4 à 7 lignes entre 320 et 390 px, bandeau de 495 px de haut.
   Ces règles adaptent toutes les pages sans rien écrire en base (choix de l'utilisateur, plutôt
   qu'une migration de contenu).

   Deux conventions :
   - `:is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section))` : `.page-content` est le conteneur des pages
     sur le site (dynamic.html.twig), `[data-gjs-type="wrapper"]` la racine du canvas de
     l'éditeur, qui charge aussi cette feuille. Les vues 📱 et 📲 de l'éditeur montrent donc ce
     que verra le visiteur.
   - `:not(#_)` ajoute le poids d'un identifiant (1,0,0) sans rien filtrer (aucun élément ne
     porte l'id « _ ») : c'est ce qui passe devant une règle `#ixyz` de GrapesJS SANS
     `!important`. Réservé à ce que le site impose sous un palier. ⚠️ Un réglage fait dans la vue
     Mobile ou Tablette de l'éditeur sur CES propriétés est ignoré (13-responsive.md).
   ============================================================ */

/* Titre principal : échelle fluide sous 992 px — 30 px à 390 px, puis 2.6rem (la valeur
   harmonisée des bandeaux, Version20260909000020) atteinte vers 900 px. Au-dessus de 992 px,
   la taille choisie dans l'éditeur s'applique telle quelle. Les classes `display-*` ont leur
   propre échelle, plus bas. */
@media (max-width: 991.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) h1:not(#_, [class*="display-"]) {
        font-size: clamp(1.875rem, 1.2rem + 3vw, 2.6rem);
    }
    /* Sans règle de l'éditeur (sinon celle-ci l'emporte) : titres de section et `display-*` de
       Bootstrap 4, dont les tailles sont fixes (RFS désactivé) — `display-4` faisait 56 px sur
       un téléphone. */
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2rem); }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .display-1 { font-size: clamp(3rem, 1.5rem + 6vw, 6rem); }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .display-2 { font-size: clamp(2.75rem, 1.4rem + 5.5vw, 5.5rem); }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .display-3 { font-size: clamp(2.5rem, 1.3rem + 4.5vw, 4.5rem); }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .display-4 { font-size: clamp(2.25rem, 1.25rem + 3.5vw, 3.5rem); }
}

/* Bandeau de tête — le premier bloc qui porte le h1 : remplissage 70/60 px ramené à 48/40 px sur
   téléphone, sous-titre de 1.2rem à 1.05rem. Repéré par sa structure (bloc > .container > h1),
   la même sur toutes les pages : les identifiants, eux, changent d'une page à l'autre. */
@media (max-width: 575.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) > :has(> .container > h1):not(#_) {
        padding-top: 3rem;
        padding-bottom: 2.5rem;
    }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) > :has(> .container > h1) > .container > h1 + p:not(#_) {
        font-size: 1.05rem;
    }
}

/* Titres dans une grille de colonnes étroites (576–991 px : trois cartes de 240 px à 768 px) :
   césure à la française plutôt que coupure brute — « Organisation/s » sur l'accueil. Limitée
   aux mots d'au moins 12 lettres ; Safari ignore cette limite et coupe plus volontiers. */
@media (min-width: 576px) and (max-width: 991.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .row :is(h2, h3, h4, h5, h6) {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
    }
}
/* La césure dépend des dictionnaires du navigateur (absents de Chrome sans tête, par exemple) :
   dans les grilles de 3 et 4 colonnes, les titres de carte sans taille réglée dans l'éditeur
   descendent aussi d'un cran — 1.5rem → 1.25rem pour un h4, ce qui fait tenir « Organisations »
   dans une carte de 240 px. */
@media (min-width: 768px) and (max-width: 991.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) :is([class*="col-md-3"], [class*="col-md-4"]) h3 { font-size: 1.4rem; }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) :is([class*="col-md-3"], [class*="col-md-4"]) h4 { font-size: 1.25rem; }
}

/* Colonnes Bootstrap empilées (sous 768 px pour les `col-md-*`) :
   - un retrait latéral pensé pour la disposition côte à côte décalait la colonne par rapport à
     sa voisine (Contact : padding-left 2.5rem) ; il revient à la gouttière de Bootstrap. Les
     utilitaires `p-*` (en !important) et les rangées `no-gutters` ne sont pas concernés ;
   - deux colonnes sans marge se touchaient (Contact : 0 px entre le formulaire et « Nos
     coordonnées »). Marge de 1rem, SAUF si l'éditeur en a posé une (règle #id) ou une classe
     `mb-*`. Convention : un fond ou un cadre se pose sur un bloc DANS la colonne, pas sur la
     colonne elle-même — c'est ainsi que sont construits tous les blocs de l'éditeur. */
@media (max-width: 767.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .row:not(.no-gutters) > [class*="col-md-"]:not(#_) {
        padding-left: 15px;
        padding-right: 15px;
    }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .row > [class*="col-md-"]:not(:last-child) {
        margin-bottom: 1rem;
    }
}

/* Cibles tactiles : boutons Bootstrap du contenu à 44 px de haut (31 px pour `btn-sm` — les
   trois boutons de l'accueil —, 38 px pour `btn`). Le remplissage se calcule depuis la taille
   de police du bouton (ligne de 1.5em + 2 px de bordure) ; un remplissage réglé dans l'éditeur
   reste prioritaire. `btn-lg` dépasse déjà 44 px. */
@media (max-width: 991.98px), (pointer: coarse) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) .btn:not(.btn-lg) {
        padding-top: max(0.375rem, calc((2.75rem - 1.5em - 2px) / 2));
        padding-bottom: max(0.375rem, calc((2.75rem - 1.5em - 2px) / 2));
    }
}

/* Lecteur PDF (bloc « 📄 Lecteur PDF », page du Code) sur téléphone : Android n'affiche pas un
   PDF encadré et l'iPhone n'en montre que la première page — le cadre occupait 640 px d'écran
   vide. Sous 768 px, il est masqué et le lien de repli qui le suit (« Ouvrir le PDF dans un
   nouvel onglet ») devient un bouton. Le texte d'introduction du repli (« Le
   document ne s'affiche pas ? ») est éteint par `font-size: 0` : il n'a plus de sens sans cadre.
   Décision de l'utilisateur du 28/09/2026. */
@media (max-width: 767.98px) {
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) iframe[src$=".pdf" i]:not(#_) {
        display: none;
    }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) iframe[src$=".pdf" i] + p:not(#_) {
        font-size: 0;
        margin: 0;
        text-align: left;
    }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) iframe[src$=".pdf" i] + p a:not(#_) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 3rem;
        padding: 0.75rem 1.25rem;
        border-radius: var(--radius-md);
        background: var(--violet-vif);
        color: var(--blanc);
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
    }
    :is(.page-content, [data-gjs-type="wrapper"]):not(:has(> .cn-bandeau, > .cn-section)) iframe[src$=".pdf" i] + p a:not(#_)::before {
        content: "📄";
    }
}


/* ------------------------------------------------------------
   8. Bandeau de tête « aura »
   ------------------------------------------------------------
   Panneau arrondi en retrait des bords de l'écran : trois dégradés radiaux qui se fondent
   (--aura), titre en encre prune. Le décor (.cn-bandeau__decor, div vide aria-hidden) dessine
   trois cercles fins décalés, violet, rose et orange : les lignes du profil du logo.

   Quatre motifs, au choix de l'administrateur dans l'éditeur (propriété « Motif » du bandeau),
   retenus par l'utilisateur le 02/10/2026 parmi les déclinaisons des maquettes :
     .cn-bandeau--halo     B1 · halo réduit, rentré dans le panneau à droite (accueil)
     .cn-bandeau--eclipse  B2 · bord de trois très grands cercles, le long du côté droit
     .cn-bandeau--lever    B3 · sommet des cercles, qui se lève depuis le bord bas
     .cn-bandeau--contour  B5 · trois lignes qui suivent le bord arrondi du panneau
   Sans motif, pas de décor. Tous restent derrière le texte (z-index -1) et ne prennent pas de
   hauteur au bandeau, sauf sur téléphone où halo et lever ajoutent un peu d'air dessous. */
.cn-bandeau {
    --bandeau-y: clamp(2.5rem, 4.5vw, 3.75rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: var(--retrait) var(--retrait) 0;
    padding-block: var(--bandeau-y);
    border-radius: var(--rayon-panneau);
    background-color: var(--aura-fond);
    background-image: var(--aura);
}
.cn-bandeau--accueil { --bandeau-y: clamp(3rem, 6vw, 5rem); }
.cn-bandeau--fiche { --bandeau-y: clamp(2rem, 3.6vw, 3rem); }

.cn-bandeau__in {
    position: relative;
    width: min(100% - 2 * var(--gouttiere), var(--largeur));
    margin-inline: auto;
}
.cn-bandeau__titre {
    max-width: 20ch;
    color: var(--encre);
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
}
/* Accueil : titre plus grand, mais sur 2 à 3 lignes et non 4 — le bandeau reste compact. */
.cn-bandeau--accueil .cn-bandeau__titre {
    max-width: 24ch;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    line-height: 1.02;
}
.cn-bandeau--fiche .cn-bandeau__titre {
    max-width: 32ch;
    font-size: clamp(1.625rem, 2.8vw, 2.375rem);
    line-height: 1.12;
}
.cn-bandeau__chapo {
    max-width: 54ch;
    margin-top: var(--esp-4);
    color: var(--encre-douce);
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    line-height: 1.55;
}

.cn-retour {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    margin-bottom: var(--esp-5);
    padding: 0.5rem 1.125rem;
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.cn-retour:hover { background: var(--lilas-soutenu); color: var(--encre); text-decoration: none; }
.cn-bandeau .cn-avis__meta { margin-bottom: var(--esp-3); }
.cn-bandeau .cn-avis__numero { background: var(--blanc); }

/* --- Décor : trois cercles fins décalés --------------------------------- */
.cn-bandeau__decor {
    display: none;
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--violet-vif) 40%, transparent);
    border-radius: 50%;
    pointer-events: none;
}
.cn-bandeau__decor::before,
.cn-bandeau__decor::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid;
    border-radius: 50%;
}
.cn-bandeau__decor::before {
    border-color: color-mix(in srgb, var(--rose-vif) 60%, transparent);
    transform: translate(calc(-1 * var(--decalage)), calc(var(--decalage) / 2.5));
}
.cn-bandeau__decor::after {
    border-color: color-mix(in srgb, var(--orange-moyen) 85%, transparent);
    transform: translate(calc(-2 * var(--decalage)), calc(var(--decalage) / 1.25));
}
:is(.cn-bandeau--halo, .cn-bandeau--eclipse, .cn-bandeau--lever, .cn-bandeau--contour) > .cn-bandeau__decor { display: block; }

/* B1 · Halo réduit : le halo de trois cercles, rentré dans le panneau à droite. */
.cn-bandeau--halo > .cn-bandeau__decor {
    --decalage: 0.7rem;
    top: 50%;
    right: clamp(2rem, 7vw, 7rem);
    width: clamp(7rem, 11vw, 10rem);
    transform: translateY(-50%);
}
.cn-bandeau--accueil.cn-bandeau--halo > .cn-bandeau__decor {
    --decalage: 0.85rem;
    width: clamp(8rem, 14vw, 12.5rem);
}

/* B2 · Éclipse : trois très grands cercles centrés hors du panneau ; on n'en voit que le bord
   gauche, trois courbes qui longent le côté droit sur toute la hauteur. */
.cn-bandeau--eclipse > .cn-bandeau__decor {
    --d: clamp(26rem, 48vw, 44rem);
    --decalage: 1.1rem;
    top: 50%;
    right: calc(var(--d) * -0.86);
    width: var(--d);
    transform: translateY(-50%);
}

/* B3 · Lever : seul le sommet des cercles est visible, trois arcs qui se lèvent depuis le bord
   bas. Les cercles se décalent vers le HAUT pour rester visibles au-dessus du bord. */
.cn-bandeau--lever > .cn-bandeau__decor {
    --d: clamp(14rem, 26vw, 24rem);
    --decalage: 1rem;
    right: clamp(1.5rem, 9vw, 9rem);
    bottom: calc(var(--d) * -0.74);
    width: var(--d);
}
.cn-bandeau--lever > .cn-bandeau__decor::before { transform: translate(calc(-1 * var(--decalage)), calc(-0.45 * var(--decalage))); }
.cn-bandeau--lever > .cn-bandeau__decor::after { transform: translate(calc(-2 * var(--decalage)), calc(-0.9 * var(--decalage))); }
/* Accueil : titre plus large, arcs rangés plus à droite pour ne pas passer sous sa fin. */
.cn-bandeau--accueil.cn-bandeau--lever > .cn-bandeau__decor {
    --d: clamp(14rem, 24vw, 22rem);
    right: clamp(1.5rem, 4vw, 4rem);
}

/* B5 · Contour : les trois lignes suivent le bord arrondi du panneau et s'effacent vers la
   gauche. Le motif le plus discret, et le seul qui ne dépend pas de la longueur du titre. */
.cn-bandeau--contour { --contour: 0.625rem; --pas: 0.45rem; }
.cn-bandeau--contour > .cn-bandeau__decor {
    inset: var(--contour);
    aspect-ratio: auto;
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--violet-vif) 55%, transparent);
    border-radius: calc(var(--rayon-panneau) - var(--contour));
    -webkit-mask-image: linear-gradient(to left, #000 12%, transparent 62%);
    mask-image: linear-gradient(to left, #000 12%, transparent 62%);
}
.cn-bandeau--contour > .cn-bandeau__decor::before,
.cn-bandeau--contour > .cn-bandeau__decor::after { border-width: 1.5px; transform: none; }
.cn-bandeau--contour > .cn-bandeau__decor::before {
    inset: var(--pas);
    border-color: color-mix(in srgb, var(--rose-vif) 80%, transparent);
    border-radius: max(4px, calc(var(--rayon-panneau) - var(--contour) - var(--pas) - 1.5px));
}
.cn-bandeau--contour > .cn-bandeau__decor::after {
    inset: calc(2 * var(--pas));
    border-color: color-mix(in srgb, var(--orange-moyen) 95%, transparent);
    border-radius: max(4px, calc(var(--rayon-panneau) - var(--contour) - 2 * var(--pas) - 1.5px));
}

/* --- Tablette ------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 991.98px) {
    .cn-bandeau__chapo { max-width: 42ch; }
    .cn-bandeau--fiche .cn-bandeau__titre { max-width: 24ch; }
    .cn-bandeau--halo > .cn-bandeau__decor,
    .cn-bandeau--accueil.cn-bandeau--halo > .cn-bandeau__decor { right: 1.75rem; width: 7rem; }
    .cn-bandeau--eclipse > .cn-bandeau__decor { --d: 24rem; --decalage: 0.9rem; }
    .cn-bandeau--lever { padding-bottom: calc(var(--bandeau-y) + 2.5rem); }
    .cn-bandeau--lever > .cn-bandeau__decor { right: 1.5rem; }
}

/* --- Téléphone ------------------------------------------------------------ */
@media (max-width: 639.98px) {
    .cn-bandeau { --bandeau-y: 2.25rem; }
    .cn-bandeau--accueil { --bandeau-y: 2.5rem; }
    .cn-bandeau--fiche { --bandeau-y: 1.75rem; }
    .cn-bandeau__chapo { font-size: 1.0625rem; }

    /* Halo : petit, dans le coin bas, à demi rogné, sous le texte. */
    .cn-bandeau--halo { padding-bottom: calc(var(--bandeau-y) + 1.25rem); }
    .cn-bandeau--halo > .cn-bandeau__decor,
    .cn-bandeau--accueil.cn-bandeau--halo > .cn-bandeau__decor {
        --decalage: 0.45rem;
        top: auto;
        right: 1.5rem;
        bottom: -1.75rem;
        width: 4.75rem;
        transform: none;
    }
    /* Éclipse : courbes serrées contre le bord ; le texte s'arrête avant elles. */
    .cn-bandeau--eclipse > .cn-bandeau__decor { --d: 16rem; --decalage: 0.6rem; right: calc(var(--d) * -0.9); }
    .cn-bandeau--eclipse > .cn-bandeau__in { padding-right: 1.75rem; }
    /* Lever : arcs plus petits, un peu d'air sous le texte. */
    .cn-bandeau--lever { padding-bottom: calc(var(--bandeau-y) + 2.75rem); }
    .cn-bandeau--lever > .cn-bandeau__decor,
    .cn-bandeau--accueil.cn-bandeau--lever > .cn-bandeau__decor {
        --d: 11rem;
        --decalage: 0.7rem;
        right: 1rem;
        bottom: calc(var(--d) * -0.78);
    }
    /* Contour : lignes plus serrées, fondu plus long. */
    .cn-bandeau--contour { --contour: 0.45rem; --pas: 0.35rem; }
    .cn-bandeau--contour > .cn-bandeau__decor {
        -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 80%);
        mask-image: linear-gradient(to left, #000 20%, transparent 80%);
    }
}


/* ------------------------------------------------------------
   9. Composants cn-* — blocs « Douceur » de l'éditeur et gabarits Twig
   ------------------------------------------------------------
   Repris de la maquette B validée. Règles communes à tout composant : seulement des classes
   (aucun id), aucune mise en page en JavaScript, chaque composant correct seul et dans
   n'importe quel ordre (l'administrateur compose les pages avec les blocs). Sur fond blanc,
   les surfaces sont teintées ; dans un panneau teinté (.cn-section--teinte), elles deviennent
   blanches (variable --surface). */

/* -------------------------------------------------------------------------
   5. Sections et conteneurs
   ------------------------------------------------------------------------- */
.cn-section { padding-block: var(--section-y); }

/* Deux sections blanches qui se suivent ne doublent pas leur respiration. */
.cn-section:not(.cn-section--teinte) + .cn-section:not(.cn-section--teinte) { padding-top: 0; }

/* Le contenu s'aligne au même bord, qu'il soit sur fond blanc ou dans un panneau. */
.cn-section__in {
    --marge: calc(var(--retrait) + var(--gouttiere));
    width: min(100% - 2 * var(--marge), var(--largeur));
    margin-inline: auto;
}

/* Panneau teinté : arrondi, en retrait des bords. Couleurs alternées par ordre. */
.cn-section--teinte {
    --fond-panneau: var(--lilas);
    margin-inline: var(--retrait);
    border-radius: var(--rayon-panneau);
    background: var(--fond-panneau);
}
.cn-section--teinte ~ .cn-section--teinte { --fond-panneau: var(--orange-clair); }
.cn-section--teinte ~ .cn-section--teinte ~ .cn-section--teinte { --fond-panneau: var(--lilas); }
.cn-section--teinte + .cn-section--teinte { margin-top: var(--retrait); }
.cn-section--teinte > .cn-section__in { --marge: var(--gouttiere); }

/* Dans un panneau, les surfaces deviennent blanches (voir 8.) */
.cn-section--teinte:not(.cn-section--acces) { --surface: var(--blanc); }

/* Accès rapides : pas de panneau, ce sont les cartes teintées qui portent la couleur. */
.cn-section--acces { margin-inline: 0; background: none; }
.cn-section--acces > .cn-section__in { --marge: calc(var(--retrait) + var(--gouttiere)); }
.cn-section--teinte + .cn-section--acces,
.cn-section--acces + .cn-section--teinte { margin-top: 0; }
.cn-section--intro + .cn-section--acces { padding-top: 0; }

.cn-section--intro { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.cn-section--catalogue { padding-top: clamp(2.5rem, 5vw, 4rem); }

.cn-section__titre {
    max-width: 32ch;
    margin-bottom: var(--esp-6);
    font-size: clamp(1.75rem, 2.7vw, 2.375rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.cn-section__intro {
    max-width: var(--mesure);
    margin-top: -1rem;
    margin-bottom: var(--esp-6);
    color: var(--encre-douce);
    font-size: 1.1875rem;
}

.cn-texte { max-width: var(--mesure); }
.cn-texte > * + * { margin-top: 1.1em; }
.cn-texte > .cn-section__titre + * { margin-top: 0; }

.cn-texte-fort {
    max-width: 36em;
    font-size: clamp(1.1875rem, 1.9vw, 1.4375rem);
    line-height: 1.6;
}

.cn-note {
    width: fit-content;
    max-width: 100%;
    margin-top: var(--esp-6);
    padding: 0.75rem 1.25rem;
    border-radius: var(--rayon-moyen);
    background: var(--surface, var(--lilas));
    color: var(--encre-douce);
    font-size: 1rem;
}
.cn-note i { margin-right: 0.375rem; color: var(--violet-vif); }
.cn-note strong { color: var(--encre); }

/* -------------------------------------------------------------------------
   6. Dispositions
   ------------------------------------------------------------------------- */
.cn-duo {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.cn-grille {
    display: grid;
    gap: var(--ecart-grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* -------------------------------------------------------------------------
   7. Boutons
   ------------------------------------------------------------------------- */
.cn-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--pilule);
    background: var(--violet-vif);
    color: var(--blanc);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.cn-bouton:hover { background: var(--violet-fonce); }

.cn-bouton--second {
    border-color: var(--violet-clair);
    background: var(--blanc);
    color: var(--encre);
}
.cn-bouton--second:hover { border-color: var(--violet-vif); background: var(--lilas); }
.cn-bouton--second i { color: var(--violet-vif); }

/* Action principale d'une page : plus ample, entourée d'un léger halo lilas */
.cn-bouton--fort {
    min-height: 3.75rem;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 800;
    box-shadow: 0 0 0 0.5rem var(--lilas);
}
.cn-bouton--fort:hover { box-shadow: 0 0 0 0.5rem var(--lilas-soutenu); }

.cn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-3) var(--esp-4);
    margin-top: var(--esp-6);
}
.cn-actions:has(.cn-bouton--fort) { gap: var(--esp-4) var(--esp-5); padding-inline-start: 0.5rem; }

/* -------------------------------------------------------------------------
   8. Surfaces teintées qui alternent (cartes, tarifs, événements, bureau…)
      Sur fond blanc : fond teinté, cercle d'icône blanc.
      Dans un panneau teinté : fond blanc, cercle d'icône teinté.
   ------------------------------------------------------------------------- */
:is(.cn-carte, .cn-tarif, .cn-evenement, .cn-personne, .cn-similaire, .cn-etape) {
    --teinte: var(--lilas);
    --accent: var(--violet-vif);
}
:is(.cn-carte, .cn-tarif, .cn-evenement, .cn-personne, .cn-similaire, .cn-etape):nth-child(3n + 2) {
    --teinte: var(--rose-tres-clair);
    --accent: var(--rose-fonce);
}
:is(.cn-carte, .cn-tarif, .cn-evenement, .cn-personne, .cn-similaire, .cn-etape):nth-child(3n) {
    --teinte: var(--orange-clair);
    --accent: var(--orange-fonce);
}

.cn-section--teinte:not(.cn-section--acces) :is(.cn-carte__icone, .cn-tarif__icone, .cn-personne__initiales) {
    background: var(--teinte);
}

/* Carte */
.cn-carte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--teinte));
}
.cn-carte__icone {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: var(--esp-2);
    border-radius: 50%;
    background: var(--blanc);
    color: var(--accent);
    font-size: 1.375rem;
}
/* Dans les tuiles étroites, l'équilibrage ferait des lignes trop courtes. */
:is(.cn-carte__titre, .cn-evenement__titre, .cn-avis__titre, .cn-similaire__titre, .cn-etape__titre) { text-wrap: pretty; }

.cn-carte__titre {
    font-size: 1.3125rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.cn-carte__texte { color: var(--encre-douce); }
.cn-carte__action { margin-top: auto; }
.cn-carte__texte:has(+ .cn-carte__action) { margin-bottom: var(--esp-3); }

/* Carte de document : icône et titre sur une ligne, plus compacte */
.cn-carte--document {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--esp-4);
    row-gap: var(--esp-2);
}
.cn-carte--document .cn-carte__icone { width: 3.25rem; height: 3.25rem; margin: 0; font-size: 1.25rem; }
.cn-carte--document .cn-carte__texte { grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   9. Encart et liste de documents
   ------------------------------------------------------------------------- */
.cn-encart {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--orange-clair));
}
.cn-encart > * + * { margin-top: var(--esp-4); }
.cn-encart__titre {
    font-size: 1.3125rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.cn-encart p { font-size: 1.0625rem; }
.cn-encart__chiffre {
    padding: 0.875rem 1.25rem;
    border-radius: var(--rayon-moyen);
    background: var(--blanc);
    color: var(--encre-douce);
}
.cn-encart__chiffre strong { color: var(--encre); font-size: 1.125rem; }
.cn-encart .cn-actions { margin-top: var(--esp-5); }

.cn-documents { display: grid; gap: var(--esp-2); }
.cn-documents a {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: 3.25rem;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}
.cn-documents a:hover { background: var(--lilas); }
.cn-documents i {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--orange-clair);
    color: var(--orange-fonce);
    font-size: 1rem;
}

/* -------------------------------------------------------------------------
   10. Bureau, organisations, valeurs
   ------------------------------------------------------------------------- */
.cn-personnes {
    display: grid;
    gap: var(--ecart-grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.cn-personne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--esp-4);
    align-items: center;
    padding: var(--esp-5);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--teinte));
}
.cn-personne__initiales {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--encre);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.cn-personne__role {
    align-self: end;
    color: var(--encre-douce);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}
.cn-personne__nom {
    align-self: start;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.3;
}

.cn-organisations {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.cn-organisations li { display: flex; }
.cn-organisations a {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-height: 4.75rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--rayon-tuile);
    background: var(--surface, var(--lilas));
    color: var(--encre);
    text-decoration: none;
}
.cn-organisations a:hover { background: var(--lilas-soutenu); }
.cn-organisations__sigle { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.cn-organisations__nom { color: var(--encre-douce); font-size: 0.9375rem; line-height: 1.4; }

.cn-valeurs {
    display: grid;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
}
.cn-valeurs li {
    position: relative;
    padding-left: 2rem;
    line-height: 1.5;
}
.cn-valeurs li::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--violet-clair);
}

/* -------------------------------------------------------------------------
   11. Étapes : un chemin de points ronds entre des pastilles numérotées
   ------------------------------------------------------------------------- */
.cn-etapes {
    --pastille: 3.5rem;
    --ecart-etapes: clamp(1.5rem, 3vw, 2.5rem);
    display: grid;
    gap: var(--ecart-etapes);
    counter-reset: cn-etape;
}
.cn-etape {
    position: relative;
    counter-increment: cn-etape;
    min-height: var(--pastille);
    padding-left: calc(var(--pastille) + 1.25rem);
}
.cn-etape::before {
    content: counter(cn-etape);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--pastille);
    height: var(--pastille);
    border-radius: 50%;
    background: var(--surface, var(--teinte));
    color: var(--encre);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
}
/* Chemin vertical (mobile et tablette) */
.cn-etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--pastille) + 0.625rem);
    bottom: calc(-1 * var(--ecart-etapes) + 0.625rem);
    left: calc(var(--pastille) / 2 - 2px);
    width: 4px;
    background: radial-gradient(circle, var(--violet-clair) 1.5px, transparent 2px) 50% 0 / 4px 10px repeat-y;
}
.cn-etape__titre {
    padding-top: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.cn-etape p {
    margin-top: var(--esp-2);
    color: var(--encre-douce);
    font-size: 1.0625rem;
}
.cn-etape p strong { color: var(--encre); }

/* -------------------------------------------------------------------------
   12. Tarifs
   ------------------------------------------------------------------------- */
.cn-tarifs {
    display: grid;
    gap: var(--ecart-grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.cn-tarif {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--esp-2);
    align-content: start;
    justify-items: start;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--teinte));
}
.cn-tarif__icone {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--esp-2);
    border-radius: 50%;
    background: var(--blanc);
    color: var(--accent);
    font-size: 1.25rem;
}
.cn-tarif__public {
    align-self: start;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}
.cn-tarif__prix {
    align-self: end;
    font-size: clamp(2.25rem, 3.4vw, 2.875rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.cn-tarif__note { color: var(--encre-douce); font-size: 0.9375rem; line-height: 1.5; }

/* -------------------------------------------------------------------------
   13. Événements
   ------------------------------------------------------------------------- */
.cn-evenements {
    display: grid;
    gap: var(--ecart-grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.cn-evenement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--teinte));
}
.cn-evenement__repere { display: flex; flex-direction: column; line-height: 1.1; }
.cn-evenement__date {
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.cn-evenement__type {
    margin-top: var(--esp-2);
    color: var(--encre-douce);
    font-size: 0.9375rem;
    font-weight: 600;
}
.cn-evenement__titre { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -0.01em; }
.cn-evenement__texte { color: var(--encre-douce); }
.cn-evenement .cn-statut { margin-top: auto; }

.cn-statut {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-size: 0.9375rem;
    font-weight: 600;
}
.cn-statut i { color: var(--accent, var(--violet-vif)); }
.cn-section--teinte:not(.cn-section--acces) .cn-statut { background: var(--lilas); }

/* -------------------------------------------------------------------------
   14. Formulaire et coordonnées
   ------------------------------------------------------------------------- */
.cn-formulaire { display: grid; gap: var(--esp-5); max-width: 40rem; }
.cn-champ { display: grid; gap: var(--esp-2); }
.cn-champ__label { font-size: 1rem; font-weight: 600; }
.cn-champ__requis { color: var(--violet-texte); font-weight: 800; }
.cn-champ__saisie {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1.125rem;
    border: 1.5px solid var(--trait-champ);
    border-radius: var(--rayon-moyen);
    background: var(--blanc);
    color: var(--encre);
    font-size: 1.0625rem;
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cn-champ__saisie::placeholder { color: var(--repere-saisie); opacity: 1; }
.cn-champ__saisie:hover { border-color: var(--violet-vif); }
.cn-champ__saisie:focus-visible {
    border-color: var(--violet-vif);
    outline: none;
    box-shadow: 0 0 0 4px var(--lilas-soutenu);
}
textarea.cn-champ__saisie { min-height: 10rem; resize: vertical; }
select.cn-champ__saisie {
    appearance: none;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%233b1a57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 1.25rem center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.cn-formulaire .cn-bouton { justify-self: start; margin-top: var(--esp-2); }
.cn-formulaire__mention { color: var(--encre-douce); font-size: 0.9375rem; }

.cn-coordonnees {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--rayon-carte);
    background: var(--surface, var(--orange-clair));
}
.cn-coordonnees .cn-section__titre { margin-bottom: var(--esp-5); font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
.cn-coord {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
}
.cn-coord + .cn-coord {
    margin-top: var(--esp-5);
    padding-top: var(--esp-5);
    background: radial-gradient(circle, var(--orange-moyen) 1.4px, transparent 1.9px) 0 0 / 10px 4px repeat-x;
}
.cn-coord__icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--orange-fonce);
    font-size: 1.125rem;
}
.cn-coord__titre { margin-bottom: 0.125rem; font-size: 1.0625rem; }

/* -------------------------------------------------------------------------
   15. Lecteur de PDF
   ------------------------------------------------------------------------- */
.cn-lecteur { margin-top: clamp(2rem, 4vw, 3rem); }
.cn-lecteur__cadre {
    overflow: hidden;
    border: 1.5px solid var(--lilas-trait);
    border-radius: var(--rayon-carte);
    background: var(--lilas);
}
.cn-lecteur__cadre iframe {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 32rem;
    border: 0;
    background: var(--blanc);
}
.cn-lecteur__repli {
    padding: 0.875rem 1.5rem;
    color: var(--encre-douce);
    font-size: 0.9375rem;
}
.cn-lecteur__repli a { font-weight: 600; }
.cn-lecteur__actions { margin-top: var(--esp-5); }

/* -------------------------------------------------------------------------
   16. Catalogue des avis
   ------------------------------------------------------------------------- */
.cn-catalogue {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.cn-filtres {
    padding: var(--esp-5);
    border-radius: var(--rayon-carte);
    background: var(--lilas);
}

.cn-recherche { display: grid; gap: var(--esp-2); }
.cn-recherche__champ { position: relative; }
.cn-recherche__champ i {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    color: var(--encre-douce);
    transform: translateY(-50%);
    pointer-events: none;
}
.cn-recherche__champ input {
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1.125rem 0.625rem 2.75rem;
    border: 1.5px solid var(--trait-champ);
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-size: 1rem;
}
.cn-recherche__champ input::placeholder { color: var(--repere-saisie); opacity: 1; }
.cn-recherche__champ input:focus-visible {
    border-color: var(--violet-vif);
    outline: none;
    box-shadow: 0 0 0 4px var(--lilas-soutenu);
}
.cn-recherche__bouton { width: 100%; }

.cn-facette { background: var(--points-h); background-position: 0 0; }
.cn-recherche + .cn-facette { margin-top: var(--esp-4); }
.cn-facette__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    min-height: 3rem;
    padding: 0.625rem 0.25rem;
    border-radius: var(--rayon-petit);
    list-style: none;
    cursor: pointer;
}
.cn-facette__titre::-webkit-details-marker { display: none; }
.cn-facette__titre h2 { font-size: 1rem; line-height: 1.3; letter-spacing: 0; }
.cn-facette__titre::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin: -0.25rem 0.5rem 0 0;
    border-right: 2px solid var(--encre);
    border-bottom: 2px solid var(--encre);
    transform: rotate(45deg);
    transition: transform var(--transition);
}
.cn-facette[open] > .cn-facette__titre::after { margin-top: 0.25rem; transform: rotate(-135deg); }

.cn-facette .cn-facette__liste {
    display: grid;
    gap: 0.125rem;
    padding-bottom: var(--esp-4);
}
.cn-facette__liste a {
    display: block;
    padding: 0.4375rem 0.875rem;
    border-radius: var(--rayon-petit);
    color: var(--encre);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none;
}
.cn-facette__liste a:hover { background: var(--blanc); }
.cn-facette__liste a[aria-current]:not([aria-current="false"]) {
    background: var(--violet-vif);
    color: var(--blanc);
    font-weight: 600;
}
.cn-facette .cn-facette__liste--annees {
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: var(--esp-2);
}
.cn-facette__liste--annees a {
    padding: 0.375rem 0.5rem;
    border-radius: var(--pilule);
    background: var(--blanc);
    font-weight: 600;
    text-align: center;
}
.cn-facette__liste--annees a:hover { background: var(--lilas-soutenu); }
.cn-facette .cn-facette__enfants {
    display: grid;
    gap: 0.125rem;
    margin: 0.125rem 0 0.375rem 0.875rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--lilas-trait);
}
.cn-facette__enfants a { font-size: 0.875rem; }

.cn-resultats__compte { color: var(--encre-douce); font-size: 1.0625rem; }
.cn-resultats__compte strong { color: var(--encre); font-size: 1.25em; }

.cn-avis { padding-block: var(--esp-6); }
.cn-avis + .cn-avis { background: var(--points-h); background-position: 0 0; }
.cn-avis:last-child { padding-bottom: 0; }
.cn-avis > * + * { margin-top: var(--esp-3); }

.cn-avis__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2) var(--esp-3);
    font-size: 0.9375rem;
    line-height: 1.4;
}
.cn-avis__numero {
    padding: 0.25rem 0.75rem;
    border-radius: var(--pilule);
    background: var(--lilas-soutenu);
    color: var(--encre);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.cn-avis__date { color: var(--encre-douce); }

.cn-avis__titre {
    font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
    line-height: 1.28;
    letter-spacing: -0.012em;
}
.cn-avis__titre a,
.cn-similaire__titre a {
    color: var(--encre);
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
}
.cn-avis__titre a:hover,
.cn-similaire__titre a:hover { text-decoration-color: var(--violet-vif); }
.cn-avis__resume {
    max-width: var(--mesure);
    color: var(--encre-douce);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.cn-etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
}
.cn-avis .cn-etiquettes { margin-top: var(--esp-4); }
.cn-etiquette {
    padding: 0.25rem 0.875rem;
    border-radius: var(--pilule);
    background: var(--orange-clair);
    color: var(--encre);
    font-size: 0.875rem;
    line-height: 1.45;
}
.cn-etiquette--plus { background: var(--lilas-soutenu); font-weight: 800; }

/* -------------------------------------------------------------------------
   17. Fiche d'un avis
   ------------------------------------------------------------------------- */
.cn-fiche {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
.cn-fiche__principal > .cn-note { margin-top: var(--esp-5); }

.cn-resume {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--rayon-carte);
    background: var(--lilas);
}
.cn-resume__titre { margin-bottom: var(--esp-3); font-size: 1.5rem; letter-spacing: -0.01em; }
.cn-resume p { max-width: 62ch; font-size: 1.1875rem; line-height: 1.7; }

.cn-indexation { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cn-indexation__titre {
    font-size: clamp(1.5rem, 2.3vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.cn-indexation__sous-titre {
    margin: var(--esp-6) 0 var(--esp-3);
    font-size: 1.125rem;
    line-height: 1.35;
}
.cn-indexation__sous-titre small { color: var(--encre-douce); font-size: 0.875em; font-weight: 400; }

.cn-definitions {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
}
.cn-definitions dt,
.cn-definitions dd {
    padding-block: 0.875rem;
    background: var(--points-h);
    background-position: 0 0;
}
.cn-definitions dt:first-of-type,
.cn-definitions dt:first-of-type + dd { background: none; }
.cn-definitions dt {
    padding-right: var(--esp-5);
    color: var(--encre-douce);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}
.cn-definitions dd { line-height: 1.55; }
.cn-definitions__liste { display: grid; gap: var(--esp-2); }
.cn-definitions__liste li { position: relative; padding-left: 1.25rem; }
.cn-definitions__liste li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0.125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--violet-clair);
}
.cn-parent { color: var(--encre-douce); }

.cn-references { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.cn-reference {
    padding: 0.375rem 1rem;
    border-radius: var(--pilule);
    background: var(--orange-clair);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.cn-infos { display: grid; }
.cn-infos dt {
    padding-top: 0.875rem;
    background: radial-gradient(circle, var(--orange-moyen) 1.4px, transparent 1.9px) 0 0 / 10px 4px repeat-x;
    color: var(--encre-douce);
    font-size: 0.875rem;
    font-weight: 600;
}
.cn-infos dt:first-of-type { padding-top: 0; background: none; }
.cn-infos dd { padding: 0.125rem 0 0.875rem; font-weight: 600; line-height: 1.45; }
.cn-infos dd:last-of-type { padding-bottom: 0; }

.cn-similaire {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-5) clamp(1.5rem, 2.4vw, 1.75rem);
    border-radius: var(--rayon-tuile);
    background: var(--surface, var(--teinte));
}
.cn-similaire__titre { font-size: 1.125rem; line-height: 1.35; }
/* toute la tuile est cliquable */
.cn-similaire__titre a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.cn-similaire:hover { background: var(--lilas-soutenu); }


/* -------------------------------------------------------------------------
   Médias et champs posés depuis la palette de l'éditeur (assets/editeur-douceur.js)
   ------------------------------------------------------------------------- */
.cn-image { display: block; width: 100%; height: auto; border-radius: var(--rayon-carte); }
/* Vidéo : une carte cliquable vers la plateforme (le serveur retire toute iframe externe). */
.cn-video { position: relative; display: block; overflow: hidden; border-radius: var(--rayon-carte); background: var(--encre); }
.cn-video img { display: block; width: 100%; height: auto; opacity: 0.85; transition: opacity var(--transition); }
.cn-video:hover img { opacity: 1; }
.cn-video__lecture {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--violet-vif);
    font-size: 1.5rem;
    transform: translate(-50%, -50%);
}
/* Champ à étiquette englobante (blocs de formulaire) : toute la zone est cliquable. */
label.cn-champ { margin: 0; font-weight: inherit; cursor: pointer; }

/* ------------------------------------------------------------
   10. Points de rupture des composants
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    .cn-duo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
    .cn-duo--contact { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .cn-catalogue { grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr); }
    .cn-fiche { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); }

    /* Étapes en ligne : le chemin de points devient horizontal. */
    .cn-etapes { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .cn-etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cn-etapes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cn-etape {
        padding-top: calc(var(--pastille) + 1.25rem);
        padding-left: 0;
    }
    .cn-etape__titre { padding-top: 0; }
    .cn-etape:not(:last-child)::after {
        top: calc(var(--pastille) / 2 - 2px);
        right: calc(-1 * var(--ecart-etapes) + 0.75rem);
        bottom: auto;
        left: calc(var(--pastille) + 0.75rem);
        width: auto;
        height: 4px;
        background: radial-gradient(circle, var(--violet-clair) 1.5px, transparent 2px) 0 50% / 10px 4px repeat-x;
    }
}

@media (min-width: 900px) {
    .cn-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
    .cn-grille--3,
    .cn-evenements,
    .cn-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cn-grille--3 > :last-child:nth-child(odd),
    .cn-evenements > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Sous 992 px : filtres du catalogue compacts, deux facettes fermées par ligne — sur téléphone
   ils occupaient tout le premier écran avant le premier avis. */
@media (max-width: 991.98px) {
    .cn-filtres {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--esp-2);
        padding: var(--esp-3);
        border-radius: var(--rayon-tuile);
    }
    .cn-recherche {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: var(--esp-1);
    }
    .cn-recherche__bouton { width: auto; padding-inline: 1.25rem; }
    .cn-recherche + .cn-facette { margin-top: 0; }
    .cn-facette { border-radius: var(--rayon-moyen); background: var(--blanc); }
    .cn-facette[open] { grid-column: 1 / -1; }
    .cn-facette__titre { min-height: 2.75rem; padding: 0.5rem 0.75rem 0.5rem 1rem; }
    .cn-facette__titre h2 { font-size: 0.9375rem; }
    .cn-facette .cn-facette__liste {
        max-height: 10.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 0.5rem 0.75rem;
    }
    .cn-facette .cn-facette__liste--annees { max-height: none; padding-inline: 0.75rem; }
    .cn-facette__liste--annees a { background: var(--lilas); }
    .cn-facette__liste a:hover { background: var(--lilas); }
}

/* Sous 768 px : le PDF ne s'affiche plus en cadre (Android ne l'affiche pas, l'iPhone n'en
   montre que la première page) ; le lien de repli devient l'accès principal au document.
   Décision de l'utilisateur du 28/09/2026, reprise pour le composant cn-lecteur. */
@media (max-width: 767.98px) {
    .cn-lecteur__cadre { border: 0; background: var(--orange-clair); }
    .cn-lecteur__cadre iframe { display: none; }
    .cn-lecteur__repli {
        padding: var(--esp-5);
        color: var(--encre);
        font-size: 1.0625rem;
    }
    .cn-lecteur__repli a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 3rem;
        margin-top: var(--esp-3);
        padding: 0.625rem 1.25rem;
        border: 2px solid var(--orange-moyen);
        border-radius: var(--pilule);
        background: var(--blanc);
        color: var(--encre);
        font-weight: 600;
        text-align: center;
        text-decoration: none;
    }
    .cn-lecteur__repli a:hover { border-color: var(--orange-fonce); }

    .cn-definitions { grid-template-columns: minmax(0, 1fr); }
    .cn-definitions dt { padding-bottom: 0; }
    .cn-definitions dd { padding-top: 0.25rem; background: none; }
}

@media (max-width: 639.98px) {
    body { font-size: 1.0625rem; }
    .cn-section__titre { margin-bottom: var(--esp-5); }
    .cn-section__intro { font-size: 1.0625rem; }
    .cn-actions > .cn-bouton { flex: 1 1 100%; }
    .cn-actions:has(.cn-bouton--fort) { padding-inline: 0.5rem; }
    .cn-formulaire .cn-bouton { justify-self: stretch; }
    .cn-personne { padding: var(--esp-4) var(--esp-5); }
    .cn-organisations a { min-height: 0; padding: 0.75rem 1.25rem; }
    .cn-tarif { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 479.98px) {
    .cn-recherche { grid-template-columns: minmax(0, 1fr); }
    .cn-recherche__bouton { width: 100%; }
}

/* ------------------------------------------------------------
   11. Avis — liste (/avis) et fiche (gabarits templates/avis/)
   ------------------------------------------------------------
   Refonte « Douceur » du 02/10/2026 : aucun attribut `style` dans les gabarits, tout passe par
   les règles ci-dessous. Le 11/10/2026, la colonne de facettes de /avis a laissé la place à la
   disposition « barre et panneaux » (maquette n°2) : barre de filtres, panneaux sous la barre,
   liste en cartes. Le bandeau, la fiche et les avis similaires utilisent les composants cn-*
   (sections 8 et 9). Classes ciblées par les tests : data-facette, .avis-row, .avis-recherche,
   .avis-facette-tous, [data-avis-total]. */

/* --- Barre de recherche et de filtres (maquette n°2, choisie le 11/10/2026) -------------
   Recherche sur une ligne, puis un bouton par champ du guide d'indexation. Chaque bouton est le
   <summary> d'un <details name="avis-filtres"> ; son panneau se place SOUS la barre, sur toute sa
   largeur (position absolue par rapport à .avis-barre). assets/avis-facettes.js réserve la hauteur
   du panneau ouvert sur .avis-barre-zone : il pousse la liste au lieu de la recouvrir. Sans
   script, il la recouvre — tout reste utilisable. */
.avis-barre-zone { transition: padding-bottom 0.2s ease; }
.avis-barre {
    position: relative;
    display: grid;
    gap: var(--esp-3);
    padding: var(--esp-3);
    border-radius: var(--rayon-tuile);
    background: var(--lilas);
}

.avis-recherche { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2); margin: 0; }
.avis-recherche-champ { position: relative; min-width: 0; }
.avis-recherche-champ i {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    color: var(--encre-douce);
    transform: translateY(-50%);
    pointer-events: none;
}
.avis-recherche-champ input {
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1.125rem 0.625rem 2.75rem;
    border: 1.5px solid var(--trait-champ);
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    /* 16 px minimum : en dessous, iOS Safari zoome à la prise de focus. */
    font-size: 1rem;
}
.avis-recherche-champ input::placeholder { color: var(--repere-saisie); opacity: 1; }
.avis-recherche-champ input:focus-visible {
    border-color: var(--violet-vif);
    outline: none;
    box-shadow: 0 0 0 4px var(--lilas-soutenu);
}
.avis-recherche-bouton {
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 0;
    border-radius: var(--pilule);
    background: var(--violet-vif);
    color: var(--blanc);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition);
}
.avis-recherche-bouton:hover, .avis-recherche-bouton:focus-visible { background: var(--violet-fonce); }

.avis-filtres { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.avis-filtre-bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.avis-filtre-bouton::-webkit-details-marker { display: none; }
.avis-filtre-bouton:hover { background: var(--lilas-soutenu); }
.avis-filtre[open] > .avis-filtre-bouton { background: var(--encre); color: var(--blanc); }
.avis-filtre-bouton i { font-size: 0.6875rem; transition: transform 0.2s ease; }
.avis-filtre[open] > .avis-filtre-bouton i { transform: rotate(180deg); }
.avis-filtre-nb {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: var(--pilule);
    background: var(--violet-vif);
    color: var(--blanc);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Panneau d'un champ : toutes ses valeurs, mots-clés en gras, termes associés dessous. */
.avis-panneau {
    position: absolute;
    top: calc(100% + var(--esp-2));
    right: 0;
    left: 0;
    z-index: 30;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--rayon-carte);
    background: var(--blanc);
    box-shadow: var(--ombre-menu);
    animation: avis-panneau-apparition 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes avis-panneau-apparition {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes avis-panneau-apparition {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}
.avis-panneau-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2) var(--esp-4); margin-bottom: var(--esp-4); }
.avis-panneau-titre { margin: 0; color: var(--encre); font-size: 1.375rem; line-height: 1.2; }
.avis-panneau-actions { display: flex; gap: var(--esp-2); margin-left: auto; }
.avis-panneau-actions a,
.avis-panneau-fermer {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid var(--lilas-trait);
    border-radius: var(--pilule);
    background: var(--blanc);
    color: var(--encre);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.avis-panneau-actions a:hover, .avis-panneau-fermer:hover { background: var(--lilas); color: var(--encre); text-decoration: none; }
.avis-panneau-fermer[hidden] { display: none; }

.avis-panneau-colonnes { columns: 3 16rem; column-gap: var(--esp-6); }
.avis-panneau-bloc { break-inside: avoid; margin: 0 0 var(--esp-4); }
.avis-facette-liste { display: grid; gap: 0.0625rem; margin: 0; padding: 0; list-style: none; }
.avis-facette-liste li { margin: 0; }
/* Valeurs sans terme associé : réparties une à une sur les colonnes (tout « Contexte de la
   demande » tenait dans la première, demande du 11/10/2026). En bloc, une grille ne se
   fragmente pas d'une colonne à l'autre. */
.avis-panneau-bloc--plat { display: block; break-inside: auto; }
.avis-panneau-bloc--plat > li { padding-bottom: 0.0625rem; break-inside: avoid; }
.avis-panneau-lien {
    display: block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--rayon-petit);
    color: var(--encre);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none;
}
a.avis-panneau-lien:hover, a.avis-panneau-lien:focus-visible { background: var(--lilas); color: var(--encre); text-decoration: none; }
.avis-panneau-lien--mot { font-weight: 700; }
li.is-actif > .avis-panneau-lien { background: var(--violet-vif); color: var(--blanc); }
li.is-actif > a.avis-panneau-lien:hover { background: var(--violet-fonce); color: var(--blanc); }
/* Valeur qu'aucun avis ne porte sous les filtres en cours : visible (l'index est complet), mais
   inactive — composant désactivé, hors du champ des contrastes WCAG. */
.avis-panneau-lien.est-vide { color: color-mix(in srgb, var(--encre-douce) 55%, white); cursor: default; }
.avis-facette-enfants { margin: 0.125rem 0 0.25rem 0.75rem; padding-left: 0.5rem; border-left: 2px solid var(--lilas-trait); }
.avis-facette-enfants .avis-panneau-lien { font-size: 0.875rem; }
.avis-panneau-annees { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.avis-panneau-annees .avis-panneau-lien { padding: 0.375rem 1rem; border-radius: var(--pilule); background: var(--lilas); font-weight: 600; }
.avis-panneau-annees .avis-panneau-lien.est-vide { background: transparent; box-shadow: inset 0 0 0 1px var(--lilas-soutenu); }

/* 44 px de haut au doigt, sans alourdir le panneau à la souris. `(pointer: coarse)` : une
   tablette en paysage affiche la disposition de bureau. */
@media (max-width: 991.98px), (pointer: coarse) {
    .avis-panneau-lien { padding-block: 0.5rem; }
    .avis-filtre-actif { min-height: 2.5rem; }
}
@media (max-width: 575.98px) {
    .avis-recherche { grid-template-columns: minmax(0, 1fr); }
    .avis-filtre-bouton { padding-inline: 0.875rem; font-size: 0.875rem; }
    .avis-panneau-actions { margin-left: 0; }
}

/* --- Rechargement du catalogue (Turbo Frame #avis-catalogue) ----------------------------
   Pendant la requête, la liste s'estompe (Turbo pose `busy` sur la frame) ; avis-facettes.js
   achève ce fondu avant de laisser Turbo rendre, puis le nouveau contenu apparaît en fondu. */
.avis-resultats { animation: avis-apparition 0.42s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.2s ease-out; }
turbo-frame[busy] .avis-resultats { opacity: 0.5; }
@keyframes avis-apparition {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* `prefers-reduced-motion` n'éteint PAS ces animations (choix du 09/09/2026, 05-avis.md) :
   seul le glissement vertical est retiré, il reste un fondu. */
@media (prefers-reduced-motion: reduce) {
    @keyframes avis-apparition {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* --- Filtres actifs ----------------------------------------------------------------------- */
.avis-filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); }
.avis-filtres-actifs-titre { color: var(--encre-douce); font-size: 0.9375rem; }
.avis-filtre-actif {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.875rem;
    border-radius: var(--pilule);
    background: var(--violet-vif);
    color: var(--blanc);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.avis-filtre-actif:hover, .avis-filtre-actif:focus-visible { background: var(--violet-fonce); color: var(--blanc); text-decoration: none; }
.avis-filtre-actif-recherche { background: var(--lilas-soutenu); color: var(--encre); }
.avis-filtre-actif-reset { background: var(--blanc); color: var(--orange-fonce); box-shadow: inset 0 0 0 1.5px var(--orange-moyen); }
.avis-filtre-actif-reset:hover, .avis-filtre-actif-reset:focus-visible { background: var(--orange-clair); color: var(--orange-fonce); }

/* --- Liste : nombre d'avis et cartes ------------------------------------------------------ */
.avis-liste-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3) var(--esp-5);
    margin: var(--esp-6) 0 var(--esp-4);
}
.avis-liste-tete .avis-filtres-actifs { margin: 0; }
.avis-compte { margin: 0 0 0 auto; color: var(--encre-douce); font-size: 1.0625rem; }
.avis-compte strong { color: var(--encre); font-size: 1.25em; }

.avis-cartes { display: grid; gap: var(--ecart-grille); }
@media (min-width: 992px) {
    .avis-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La carte entière est cliquable : le lien du titre s'étend par ::after. */
.avis-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding: var(--esp-5);
    border: 1.5px solid var(--lilas-soutenu);
    border-radius: var(--rayon-tuile);
    background: var(--blanc);
    transition: border-color var(--transition);
}
.avis-carte:hover { border-color: var(--violet-clair); }
.avis-carte:focus-within { border-color: var(--violet-vif); }
.avis-carte > * { margin: 0; }
.avis-carte-titre { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.avis-carte-titre a { color: var(--encre); text-decoration: none; }
.avis-carte-titre a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.avis-carte-titre a:hover { color: var(--encre); text-decoration: underline; text-decoration-color: var(--violet-vif); text-decoration-thickness: 2px; }
.avis-carte-titre a:focus-visible { outline: none; }
.avis-carte-titre a:focus-visible::after { outline: 3px solid var(--violet-vif); outline-offset: 3px; }
.avis-carte-resume { color: var(--encre-douce); font-size: 1rem; line-height: 1.55; }
.avis-row-pdf { color: var(--orange-fonce); font-weight: 600; }
.avis-carte-index { display: grid; gap: 0.25rem; margin-top: auto; padding-top: var(--esp-2); font-size: 0.875rem; line-height: 1.45; }
.avis-carte-index div { margin: 0; }
.avis-carte-index dt { display: inline; color: var(--encre-douce); font-weight: 600; }
.avis-carte-index dd { display: inline; margin: 0; }
.avis-carte-plus { display: inline-block; padding: 0 0.4375rem; border-radius: var(--pilule); background: var(--lilas-soutenu); font-weight: 700; font-size: 0.8125rem; }

/* --- Aucun résultat --------------------------------------------------------------------- */
.avis-vide {
    display: grid;
    justify-items: center;
    gap: var(--esp-3);
    padding: clamp(2.5rem, 6vw, 4rem) var(--esp-5);
    border-radius: var(--rayon-carte);
    background: var(--lilas);
    color: var(--encre-douce);
    text-align: center;
}
.avis-vide-icone { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--blanc); color: var(--violet-vif); font-size: 1.5rem; }
.avis-vide-titre { margin: 0; color: var(--encre); font-size: 1.375rem; }
.avis-vide p { margin: 0; }

/* --- Fiche d'un avis -------------------------------------------------------------------- */
.avis-pdf-bouton { margin-top: var(--esp-5); }
.avis-pdf-bouton i { font-size: 1.25rem; }
.avis-pdf-bouton small { font-weight: 600; opacity: 0.85; }
.avis-indexation-precision { color: var(--encre-douce); font-size: 0.9375rem; }
.avis-contenu a { overflow-wrap: anywhere; }

/* --- Pages d'erreur (templates/bundles/TwigBundle/Exception/) ------------------------- */
.cn-erreur { margin-bottom: var(--section-y); }
.cn-erreur__code {
    margin-bottom: var(--esp-3);
    color: var(--violet-vif);
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}