/* ============================================================
   presidence_theme — Thème Présidence de la République de CI
   Chargé APRÈS global.css / light.css / css_override.php
   (header.php:250 via get_plugin_css) → ces règles gagnent.
   Réf. plan : runbook DEPLOIEMENT-RS11-POC §13.6.
   ============================================================ */

/* ------------------------------------------------------------
   Étape 1 — Accent de marque : bleu RS → orange ivoirien.
   Les 6 tokens ci-dessous pilotent l'intégralité de l'accent
   (boutons, liens au survol, focus, états actifs, badges) en
   modes clair ET sombre (css_override.php ne les redéfinit pas).
   Gamme dérivée de #DE6A17 (orange institutionnel sobre).
   ------------------------------------------------------------ */
:root {
    --colour-brand-primary-darkest: #8a3e0c;
    --colour-brand-primary-dark: #b85512;
    --colour-brand-primary-default: #de6a17;
    --colour-brand-primary-hover: #f17c22;
    --colour-brand-primary-light: #fbebdd;
    --colour-brand-primary-lightest: #fdf5ec;
}

/* ------------------------------------------------------------
   Étape 3 — Bandeau drapeau sous l'en-tête.
   Signature identitaire, posée UNE fois : liseré 2 px au bas du
   <header> (déjà position:relative dans global.css:4311).
   Règle drapeau : ratio 3:2:3 (blanc = 2/3 des autres), AUCUNE
   bordure. Couleurs officielles fixes, identiques clair/sombre
   (le blanc se fond sur en-tête clair : assumé, minimalisme).
   Le header du login est masqué nativement (pas de doublon).
   ------------------------------------------------------------ */
header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg,
        #f77f00 0 37.5%,
        #ffffff 37.5% 62.5%,
        #009e60 62.5% 100%);
}

/* ------------------------------------------------------------
   Étape 4 — La forme : ombres douces + rayons, à la place du
   « plat bordé ». Moins de traits = moins de charge cognitive.
   Familles couvertes : tuiles du tableau de bord (.HomePanel),
   cartes de résultats (.resource-card), modales ET menus
   Zone Équipe / Mon compte (#modal — chargés par ModalLoad).
   Ombres teintées encre chaude (23,21,15), jamais de gris pur.
   ------------------------------------------------------------ */
:root {
    --psd-shadow-card: 0 1px 2px rgba(23, 21, 15, .05), 0 10px 28px -14px rgba(23, 21, 15, .16);
    --psd-shadow-modal: 0 24px 70px -24px rgba(23, 21, 15, .38);
    --psd-radius-card: 14px;
    --psd-radius-modal: 16px;
}

/* Tuiles du tableau de bord */
.HomePanel {
    border-radius: var(--psd-radius-card);
    box-shadow: var(--psd-shadow-card);
}

/* Cartes de résultats de recherche */
.resource-card {
    border-radius: 12px;
    box-shadow: var(--psd-shadow-card);
}

/* Modales + menus d'en-tête (Zone Équipe, Mon compte, filtres…) */
#modal {
    border-radius: var(--psd-radius-modal);
    box-shadow: var(--psd-shadow-modal);
}

/* ------------------------------------------------------------
   Étape 5 — Barre de recherche « pilule ».
   La boîte visible est div.input-wrapper (form#simple_search_form,
   <search id="SearchBox">) : bordure grise → forme douce + ombre
   légère ; halo ORANGE au focus (rgba : lisible en clair ET sombre,
   focus visible = accessibilité) ; loupe et filtres deviennent des
   boutons fantômes ronds intégrés à la pilule.
   ------------------------------------------------------------ */
#SearchBox .input-wrapper {
    border: 0;
    border-radius: 999px;
    padding-left: 10px;
    box-shadow: 0 0 0 1px rgba(23, 21, 15, .08), 0 6px 18px -10px rgba(23, 21, 15, .18);
}
#SearchBox .input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(222, 106, 23, .30), 0 6px 18px -10px rgba(23, 21, 15, .18);
}
#SearchBox .input-wrapper button {
    background: transparent;
    border: 0;
    border-radius: 999px;
}
#SearchBox .input-wrapper button:hover {
    /* Retouche 1 (validée 11/07) : le survol vit SUR l'icône —
       le glyphe s'allume en orange, aucun fond ajouté. */
    background: transparent;
    color: var(--colour-brand-primary-default);
}
#ssearchbox::placeholder {
    color: var(--colour-typography-500, #73766f);
    opacity: 1;
}

/* ------------------------------------------------------------
   Étape 6 (révisée — audit mobile 11/07) — En-tête : teinte de
   surface, SANS verre, SANS sticky, SANS z-index.
   Pourquoi : dans RS rien ne défile JAMAIS derrière le header
   (body{overflow:hidden} ; seul #UICenter — un FRÈRE du header —
   défile) : le blur(14px) ne floutait que le fond uni du body
   (effet visuel nul, calque GPU permanent) et créait DEUX casses
   en mobile : son contexte d'empilement enfermait le panneau du
   burger (z 1001, DANS le header) sous #menu-overlay (z 1000,
   enfant de body) → liens incliquables ; et son containing block
   des position:fixed écrasait le panneau de filtres de recherche
   (#search-filters-panel, top/bottom résolus dans le repère du
   header) à 33px de haut. position:relative = valeur du cœur
   (ancre le liseré ::after) ; sans z-index, z 1001 > z 1000
   fonctionne nativement. color-mix avec surface-100 (le fond du
   body) = la même teinte que l'ancien 72% translucide, en plein.
   ------------------------------------------------------------ */
header {
    position: relative;
    background: color-mix(in srgb, var(--colour-surface-header-background) 72%, var(--colour-surface-100));
}

/* ------------------------------------------------------------
   En-tête mobile STABLE (retour utilisatrice + contre-expertise
   11/07). Le repli au scroll du cœur (classes is-collapsed/
   is-compact, js/header.js:79-88, ≤767 uniquement) REFLOW le
   contenu : le header passe de ~206 à ~78px, #UICenter est
   redimensionné (--uicenter-height) et le contenu saute de
   ~128px SOUS LE DOIGT — structurellement janky dans les deux
   sens (la barre d'iOS, elle, se replie en OVERLAY : le contenu
   ne bouge jamais). Choix : GÉOMÉTRIE STABLE — les classes du
   cœur deviennent inertes (il continue de les poser/retirer :
   zéro modification de js/header.js, son ResizeObserver ne tire
   plus, plus aucun clamp de scrollTop) ; l'écran est rendu par
   une compaction STATIQUE (~166px au lieu de 206) plutôt que
   par un mécanisme qui secoue le contenu. Réversible : retirer
   ce bloc restitue le repli du cœur.
   ------------------------------------------------------------ */
@media (max-width: 767px), (max-height: 480px) and (max-width: 940px) {
    /* Compaction statique v2 (analyse nav mobile 12/07) : le cœur empile
       logo/actions/search sur 3 rangées (global.css:4325) alors qu'il
       possède déjà le layout 2 rangées en desktop (global.css:5001-5006).
       On réactive ce même layout ici : wordmark à gauche, icônes à
       droite, recherche en dessous → ~114px au lieu de 170 (l'écran
       gagne 56px sur chaque page, toujours SANS variation au scroll —
       décision « géométrie stable »). La 2e branche du media = téléphone
       en PAYSAGE (l'en-tête mangeait ~45% de l'écran). */
    /* contre-expertise 12/07 : à ≥768 le cœur FIGE
       --uicenter-height: calc(100% - 144px) (global.css:4992) pour SON
       header de 144px — le nôtre fait ~118px → bande morte ~26px en bas
       en PAYSAGE téléphone (852×393…). On rebranche la variable sur la
       mesure JS (posée au chargement quel que soit le breakpoint,
       header.js:21) ; plugin chargé dernier → gagne à égalité. */
    :root {
        --uicenter-height: calc(100% - var(--js-header-container-bottom));
    }
    #header-container {
        /* retour Hady 12/07 : +2px d'air vertical */
        padding: 10px 16px;
        gap: 8px;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo actions"
            "search search";
        align-items: center;
    }
    #header-container .header-search-field {
        grid-area: search; /* le cœur ne pose ce nom qu'en ≥768 (global.css:5013) */
        width: 100%;
    }
    #header-container .actions {
        justify-content: flex-end;
        gap: 4px;
        /* piège grid min-width:auto : sans ceci la colonne S'ÉTIRE pour
           loger son contenu au lieu de le contraindre (633px mesurés).
           NB : les entrées du menu mobile sont dans le panneau parce que
           la 2e nav est rendue force_overflow côté SERVEUR
           (header.php:339), pas par le JS (header.js:212 sort sous
           1366px). ⚠ ne jamais poser transform/filter/backdrop-filter
           sur header ou .actions : le panneau Menu est position:fixed,
           un containing block le clipperait. */
        min-width: 0;
    }
    /* la nav « ⋮ » desktop est un enfant DIRECT de la grille sans zone
       assignée : auto-placée, elle affichait ses entrées EN LIGNE à côté
       du logo et poussait la rangée (et un overflow:hidden sur .actions
       aurait clippé le bouton ☰ de la nav mobile). Le cœur a sa nav
       mobile dédiée dans .actions (header.php:339, force_overflow) : la
       variante desktop n'a rien à faire ici. */
    #header-container > nav.primary-navigation {
        display: none;
    }
    #header-container .logo img {
        height: 35px; /* retour Hady 12/07 : lisibilité de la 2e ligne du logo */
        width: auto;
    }
    /* neutralisation du repli : mêmes propriétés que le cœur
       (global.css:4815-4820 max-height:0/opacity:0/margin:0/padding:0),
       spécificité supérieure (0,3,0 > 0,2,0) → état replié = état normal */
    #header-container .logo.is-collapsed,
    #header-container .actions.is-collapsed {
        max-height: 48px;
        opacity: 1;
        margin: 0;
        padding: 0;
    }
    /* is-compact ne change plus l'espacement (gap identique au normal) */
    #header-container.is-compact {
        gap: 8px;
    }
}

/* ------------------------------------------------------------
   Étape 7 — Barre de collection → dock flottant.
   #CollectionDiv est fixed pleine largeur (z-index 99, cœur) ;
   on détache le porteur des bords (marges), on arrondit les
   sections empilées (actions en haut, vignettes en bas), noir
   RÉCHAUFFÉ #1d1c17 au lieu du noir froid, ombre en drop-shadow
   (épouse la silhouette, onglet orange compris). Selects au
   trait accent. La fonction ne change pas — la forme si.
   ------------------------------------------------------------ */
/* Audit mobile 11/07 : le cœur cale le porteur à 100vw dans un conteneur
   fixed overflow:hidden SANS left ni width → notre marge gauche poussait
   les 14 px DROITS (coin arrondi + ombre) hors cadre et décentrait le
   bouton d'ouverture de +14 px. width:auto = le porteur remplit le
   conteneur MOINS ses marges : flottement symétrique, bouton recentré. */
#CollectionDiv {
    left: 0;
    width: 100%;
}
#CollectionDiv .collection-bar-holder {
    /* marges latérales seulement : le cœur positionne le conteneur en JS
       (les vignettes se cachent SOUS le bord bas) — une marge basse serait
       avalée. Dock affleurant en bas, flottant sur les côtés. */
    margin: 0 14px;
    width: auto;
    filter: drop-shadow(0 -8px 26px rgba(0, 0, 0, .35));
}
#CollectionDiv .collection-bar-toggle-button {
    border-radius: 10px 10px 0 0;
}
#CollectionDiv .collection-bar-actions-section {
    background: #1d1c17;
    border-radius: 14px 14px 0 0;
}
#CollectionDiv .collection-bar-thumbs-section {
    background: #1d1c17;
    border-radius: 0 0 14px 14px;
}
/* vignettes masquées → la section actions ferme le dock en bas */
#CollectionDiv .collection-bar-holder > .collection-bar-actions-section:last-child {
    border-radius: 14px;
}
#CollectionDiv .collection-bar-actions-section select {
    background-color: #26251d;
    border: 1px solid var(--colour-brand-primary-default);
    border-radius: 8px;
}

/* ------------------------------------------------------------
   Étape 8 + Retouche 4-A (validée 11/07) — Hiérarchie des
   tuiles : description en ITALIQUE LÉGÈRE, gris plus doux —
   registre éditorial, contraste net avec le titre.
   ------------------------------------------------------------ */
.HomePanel .tile-desc {
    color: var(--colour-typography-500, #73766f);
    font-style: italic;
    font-size: .95em;
    line-height: 1.55;
}

/* ------------------------------------------------------------
   Étape 9 — Typographie : corps Inter, titres Space Grotesk.
   Les deux polices sont LIVRÉES par RS (lib/fonts/) ; la police
   UI active (Atkinson, css/fonts/*.css chargé à header.php:191)
   écrase corps ET titres — notre plugin charge après (l.250) et
   reprend les MÊMES sélecteurs pour gagner la cascade.
   NB : le @font-face Space Grotesk n'existe que dans le fichier
   de police non chargé → on le déclare ici, ce qui répare aussi
   le hero (.text-style-global-header-hero) qui le référence.
   Les icônes Lucide passent par leurs propres règles de classe.
   ------------------------------------------------------------ */
/* Audit mobile 11/07 : les TTF variables du cœur pèsent ~1 Mo à eux deux —
   subsettés en woff2 (latin + latin étendu, axes de graisse conservés,
   pyftsubset) DANS le plugin : 212 Ko au total (−79%). Le TTF du cœur
   reste en source de repli pour les navigateurs sans woff2. */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable-latin.woff2") format("woff2"),
         url("../../../lib/fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/SpaceGrotesk-Variable-latin.woff2") format("woff2"),
         url("../../../lib/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700;
    font-display: swap;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-widget,
body, input, textarea, select, button {
    font-family: Inter, "Atkinson Hyperlegible Next", Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, .Title {
    font-family: "Space Grotesk", Inter, Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------
   Étape 10 — L'interface répond : survols orange translucide
   (color-mix : lisible en clair ET en sombre), cartes qui se
   soulèvent de 2 px, transitions courtes, et focus clavier
   orange visible (accessibilité). prefers-reduced-motion
   respecté : sans lui, aucun mouvement.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .HomePanel, .resource-card {
        transition: transform .16s ease, box-shadow .16s ease;
    }
    .TileNav ul li a, .show-thumbs-button, .TopInpageNav .InpageNavLeftBlock button {
        transition: background-color .12s ease;
    }
}
/* Audit mobile 11/07 : sur écran tactile, :hover reste « collé » après le
   tap (carte levée, fond teinté qui persistent) → lévitation et fonds de
   survol réservés aux pointeurs qui survolent vraiment. */
@media (hover: hover) and (pointer: fine) {
    .HomePanel:hover, .resource-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(23, 21, 15, .06), 0 16px 34px -14px rgba(23, 21, 15, .22);
    }
    .TileNav ul li a:hover {
        background: color-mix(in srgb, var(--colour-brand-primary-default) 12%, transparent);
        text-decoration: none;
    }
}
.TileNav ul li a {
    border-radius: 12px;
}
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--colour-brand-primary-default);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Étape 11 — Retenue : UNE emphase primaire par vue (le bouton
   Déposer de l'en-tête). Les actions de contenu (boutons des
   bandeaux in-page type « Recherche par description ») et le
   bouton du dock passent en style secondaire : contour orange,
   fond transparent (inset shadow = zéro décalage de layout).
   ------------------------------------------------------------ */
.TopInpageNav .InpageNavLeftBlock button {
    background: transparent;
    color: var(--colour-brand-primary-dark);
    box-shadow: inset 0 0 0 1.5px var(--colour-brand-primary-default);
}
#CollectionDiv .show-thumbs-button {
    background: transparent;
    color: var(--colour-brand-primary-hover);
    box-shadow: inset 0 0 0 1.5px var(--colour-brand-primary-default);
}
/* fonds de survol : pointeurs fins uniquement (cf. garde tactile étape 10) */
@media (hover: hover) and (pointer: fine) {
    .TopInpageNav .InpageNavLeftBlock button:hover {
        background: color-mix(in srgb, var(--colour-brand-primary-default) 12%, transparent);
    }
    #CollectionDiv .show-thumbs-button:hover {
        background: color-mix(in srgb, var(--colour-brand-primary-default) 18%, transparent);
    }
}

/* ------------------------------------------------------------
   Retouches validées le 11/07 (planche v3).
   R1+R2 — Icônes de l'en-tête NUES : suppression des pavés gris
   permanents (button.icon-menu, a.get-menu-content) ; au survol
   le GLYPHE s'allume en orange — rien ne s'ajoute derrière.
   Le bouton Déposer (plein) et les badges compteurs sont
   intacts. Transition sous prefers-reduced-motion uniquement.
   ------------------------------------------------------------ */
/* sélecteurs alignés sur le cœur (#header-container …, global.css:4729/4747)
   — même spécificité, notre feuille charge après → elle gagne.
   L'état « menu ouvert » (aria-expanded/active, carré sombre) est conservé :
   c'est un état, pas un survol. */
#header-container .actions .get-menu-content,
#header-container .actions > .primary-navigation button {
    background: transparent;
}
#header-container .actions .get-menu-content:hover,
#header-container .actions > .primary-navigation button:hover {
    background: transparent;
    color: var(--colour-brand-primary-default);
}
@media (prefers-reduced-motion: no-preference) {
    #header-container .actions .get-menu-content,
    #header-container .actions > .primary-navigation button,
    #SearchBox .input-wrapper button {
        transition: color .12s ease;
    }
}

/* ------------------------------------------------------------
   R3 — Liens de menu (Collections en vedette · Récent ·
   Directives) : gris doux graisse 500 ; survol = orange SANS
   soulignement ; page active (classe psd-active posée par le
   hook JS du plugin) = fin trait orange arrondi.
   ------------------------------------------------------------ */
#header-container .primary-navigation ul > li > a {
    color: var(--colour-typography-600, #5c574b);
    font-weight: 500;
}
#header-container .primary-navigation ul > li > a:hover {
    color: var(--colour-brand-primary-default);
    text-decoration: none;
}
#header-container .primary-navigation ul > li > a.psd-active {
    color: var(--colour-typography-900, #0c0d0c);
    position: relative;
}
#header-container .primary-navigation ul > li > a.psd-active::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    /* retour Hady 12/07 : les ancres font 44px (texte centré) — à -8px
       le trait flottait à ~20px du texte ; 9px le pose juste sous lui */
    bottom: 9px;
    height: 2px;
    border-radius: 2px;
    border: 0;
    background: var(--colour-brand-primary-default);
}
/* Audit mobile 11/07 : dans le panneau burger (items verticaux pleine
   largeur), le trait bas rasait le bord de l'item — le marqueur d'actif
   devient une fine barre latérale orange, grammaire des listes. */
#header-container .primary-navigation ul.menu-panel > li > a.psd-active::after {
    content: none;
}
#header-container .primary-navigation ul.menu-panel > li:has(> a.psd-active) {
    box-shadow: inset 3px 0 0 var(--colour-brand-primary-default);
}

/* ------------------------------------------------------------
   R5 — Apparition des menus/modales : fondu + élévation de 6 px
   en 180 ms (courbe douce). L'animation CSS se rejoue à chaque
   passage display:none → block (mécanisme d'ouverture RS).
   Aucun mouvement si l'utilisateur préfère réduire les
   animations.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    #modal {
        animation: psd-modal-in .18s ease-out;
    }
    #modal_overlay {
        animation: psd-fade-in .18s ease-out;
    }
}
@keyframes psd-modal-in {
    from { opacity: 0; transform: translateY(14px); }
}
@keyframes psd-fade-in {
    from { opacity: 0; }
}

/* ------------------------------------------------------------
   Retouche 6 (validée 11/07) — Menus & modales en VERRE DÉPOLI.
   Fond translucide dérivé du token surface-200 (light ≈ le gris
   d'origine ; remappé sombre par css_override → suit le thème
   tout seul, nos règles chargeant en dernier battent les deux
   fonds opaques codés en dur du cœur : #f3f3f3 / #262626).
   translateY(6px) permanent = panneau « décollé » du header ;
   l'animation psd-modal-in (from 14px) atterrit dessus.
   ------------------------------------------------------------ */
#modal {
    background-color: color-mix(in srgb, var(--colour-surface-200, #f3f3f3) 75%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(6px);
}

/* Items des menus (Zone Équipe / Mon compte) — avis expert UI/UX
   11/07 : un libellé sous icône est une étiquette de wayfinding,
   pas du texte de lecture → 12.5px médium (ratio « launcher » :
   grande icône / petit libellé, cf. iOS/Launchpad/Finder 11-13px).
   Distinction avec le pied 12.5px : par le poids (500) et le gris
   le plus sombre. L'item survolé s'allume entier (fond orange
   translucide : étape 10). */
#modal .TileNav ul li a {
    /* typography-700 : à 12.5px il faut le gris sombre (avis expert) —
       le 600 de RS (#73766f) tombe sous le seuil de confort. */
    color: var(--colour-typography-700, #4a4c48);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: .01em;
    /* audit mobile 11/07 : l'ancre inline réduisait la zone cliquable au
       glyphe + libellé — TOUTE la tuile devient la cible (≥44px). */
    display: block;
    min-height: 44px;
}
#modal .TileNav ul li a i {
    font-size: 40px;
    display: inline-block;
    margin-bottom: 10px; /* respiration icône → libellé */
}
#modal .TileNav ul li a:hover {
    color: var(--colour-brand-primary-dark, #b85512);
}

/* Titre du panneau (Zone Équipe, nom d'utilisateur) : étiquette
   en petites capitales discrètes — ne cible QUE les panneaux à
   grille d'icônes (:has(.TileNav)), jamais les autres modales. */
#modal .BasicsBox:has(.TileNav) h1 {
    font-size: 12px;
    font-family: Inter, "Atkinson Hyperlegible Next", Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--colour-typography-600, #5c574b);
}

/* Pied « Usage du disque » : atténué ; la jauge est injectée par
   le hook JS du plugin (classe psd-gauge). */
#modal p.clearerleft {
    color: var(--colour-typography-500, #73766f);
    font-size: 12.5px;
}
.psd-gauge {
    display: inline-block;
    vertical-align: middle;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    border: 0;
    background: color-mix(in srgb, currentColor 18%, transparent);
    margin-left: 10px;
    position: relative;
    overflow: hidden;
}
.psd-gauge i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: var(--colour-brand-primary-default);
}

/* ------------------------------------------------------------
   Retouche 7 (validée 11/07) — Page de dépôt : la zone Uppy
   rejoint la charte. Zone douce arrondie à peine teintée, halo
   orange au survol d'un fichier glissé (classe Uppy
   --isDraggingOver), lien « parcourir » orange, cibles
   Mon appareil / Caméra en cartes souples aux glyphes orange,
   « Propulsé par Uppy » masqué. Uppy n'est utilisé que sur les
   écrans de dépôt : portée globale sans risque.
   ------------------------------------------------------------ */
.uppy-Dashboard .uppy-Dashboard-AddFiles {
    border: 1.5px dashed color-mix(in srgb, var(--colour-brand-primary-default) 35%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--colour-brand-primary-default) 3%, transparent);
}
.uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-AddFiles {
    border-color: var(--colour-brand-primary-default);
    border-style: solid;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--colour-brand-primary-default) 25%, transparent);
    background: color-mix(in srgb, var(--colour-brand-primary-default) 8%, transparent);
}
.uppy-Dashboard .uppy-Dashboard-browse {
    color: var(--colour-brand-primary-default);
    font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
    .uppy-Dashboard .uppy-Dashboard-browse:hover {
        color: var(--colour-brand-primary-hover);
        border-bottom-color: currentColor;
    }
}
.uppy-Dashboard .uppy-DashboardTab-btn {
    background: var(--colour-surface-50, #fff);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(23, 21, 15, .05), 0 8px 20px -12px rgba(23, 21, 15, .16);
    padding: 12px 18px;
    color: var(--colour-brand-primary-default);
}
@media (hover: hover) and (pointer: fine) {
    .uppy-Dashboard .uppy-DashboardTab-btn:hover {
        background: var(--colour-surface-50, #fff);
        box-shadow: 0 2px 4px rgba(23, 21, 15, .06), 0 12px 26px -12px rgba(23, 21, 15, .22);
    }
}
/* !important justifié : les icônes Uppy portent des fills en STYLE
   INLINE (bleu/vert d'usine), imbattables autrement. Scopé aux
   seuls glyphes des cartes de la page de dépôt. */
.uppy-Dashboard .uppy-DashboardTab-btn svg,
.uppy-Dashboard .uppy-DashboardTab-btn svg path,
.uppy-Dashboard .uppy-DashboardTab-btn svg g,
.uppy-Dashboard .uppy-DashboardTab-btn svg rect,
.uppy-Dashboard .uppy-DashboardTab-btn svg circle,
.uppy-Dashboard .uppy-DashboardTab-btn svg polygon {
    fill: currentColor !important;
    /* certains glyphes Uppy portent fill="currentcolor" MAIS une
       `color` bleue posée sur le <svg> par uppy.min.css → on force
       l'héritage de l'orange du bouton. */
    color: inherit !important;
}
.uppy-Dashboard .uppy-DashboardTab-name {
    color: var(--colour-typography-600, #5c574b);
}
/* UNE seule carte par cible : Uppy imbrique un mini-cadre blanc
   ombré (.uppy-DashboardTab-inner) autour de l'icône → neutralisé,
   seule notre carte (le bouton) porte fond/ombre/rayon. */
.uppy-Dashboard .uppy-DashboardTab-inner {
    background: transparent;
    box-shadow: none;
    border: 0;
}
/* gouttière entre les cartes (les items Uppy sont collés d'usine) ; le
   liséré d'usine sous chaque item rayait le bas de nos cartes ombrées */
.uppy-Dashboard .uppy-DashboardTab {
    margin: 0 7px 10px;
    border-bottom: 0;
}
/* en colonne étroite Uppy garde width:100% : les 7px latéraux la faisaient
   déborder de la liste → gouttière verticale seule en mobile */
@media (max-width: 768px) {
    .uppy-Dashboard .uppy-DashboardTab {
        margin: 0 0 10px;
    }
}

/* ------------------------------------------------------------
   Retouche 8 (validée 11/07) — Page de connexion.
   Logo centré plus grand ; carte flottante ; champs adoucis avec
   halo orange au focus (grammaire de la pilule) ; bouton pilule
   pleine largeur ; liens calmes gris → orange au survol ; fuseau
   horaire masqué (réglage de profil, pas un choix d'accueil) ;
   pied institutionnel en petites capitales + crédit discret
   (.psd-credit injecté par le hook JS).
   ------------------------------------------------------------ */
/* ============================================================
   CONNEXION v2 — L'ÉPURE (planche v13, validée 11/07).
   Référence iCloud : fond nu, un objet. Desktop : logo
   Collections numériques en haut-gauche, phrase en majesté +
   bande verte à gauche, carte blanche à droite (sceau 88px +
   « Connexion »). Mobile/tablette (<1000px) : logo centré
   au-dessus de la carte (PAS le sceau — consigne), carte pleine
   largeur. Le diaporama login est retiré (photo transférée au
   diaporama d'accueil, slideshow ref 2 → homepage_show). Héro,
   sceau, titre, placeholders et crédit sont injectés par le
   hook psdLoginEpure (hooks/all.php).
   ============================================================ */
/* wordmark : 200px, centré (mobile) ; épinglé haut-gauche ≥1000 */
#LoginHeader img.LoginHeaderImg, .LoginHeaderImg {
    display: block;
    margin: 0 auto 18px;
    width: 200px;
    max-width: 200px;
}
@media (min-width: 1000px) {
    #LoginHeader {
        position: fixed; /* la page login ne défile pas en desktop */
        top: 28px;
        left: 4.5%;
        z-index: 2;
    }
    #LoginHeader img.LoginHeaderImg, .LoginHeaderImg { margin: 0; }
}
/* carte : blanc plein, arête douce — plus de verre */
#login_box {
    position: relative;
    background: #fff;
    border: 1px solid #eceae4;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(60, 45, 25, .05),
                0 26px 54px -26px rgba(60, 45, 25, .25);
    padding: 28px 30px 24px;
}
/* sceau (desktop seulement — mobile : le wordmark suffit) + titre */
.psd-seal { display: none; }
@media (min-width: 1000px) {
    .psd-seal { display: block; margin: 0 auto 10px; }
}
.psd-ctitle {
    font-family: "Space Grotesk", Inter, Arial, sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--colour-typography-600, #5c574b);
    text-align: center;
    margin: 0 0 18px;
}
/* étiquettes : lues par les lecteurs d'écran, remplacées à l'écran
   par les placeholders (posés par le hook) */
#loginform .field-input > label:not(.checkbox-label) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#loginform .checkbox-label {
    font-size: 11.5px;
    color: var(--colour-typography-600, #5c574b);
}
#CentralSpaceLogin input[type="text"],
#CentralSpaceLogin input[type="password"] {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}
#CentralSpaceLogin input::placeholder {
    color: var(--colour-typography-500, #73766f);
    opacity: 1;
}
/* héro desktop : phrase + sous-titre + bande verte pleine largeur */
.psd-login-hero { display: none; }
@media (min-width: 1000px) {
    .psd-login-hero { display: block; max-width: 470px; text-align: left; }
    .psd-login-hero h2 {
        font-family: "Space Grotesk", Inter, Arial, sans-serif;
        font-weight: 700;
        font-size: clamp(34px, 3.4vw, 46px);
        line-height: 1.08;
        letter-spacing: -.015em;
        color: #1d1c17;
        margin: 0;
        text-wrap: balance;
    }
    .psd-login-hero p {
        font-size: 15px;
        color: var(--colour-typography-500, #73766f);
        line-height: 1.6;
        max-width: 410px;
        margin: 16px 0 0;
    }
    .psd-login-hero .psd-green {
        height: 2px;
        border-radius: 2px;
        background: #009e60; /* le vert du drapeau, seul (consigne) */
        margin-top: 22px;
    }
}

/* page : blanc nu ; desktop = deux pôles (héro | carte) ; en dessous
   de 1000px le héro disparaît et la colonne se centre seule */
#UICenter.LoginPage {
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}
@media (min-width: 1000px) {
    #UICenter.LoginPage {
        justify-content: space-between;
        padding: 0 7% 0 4.5%;
        /* le cœur impose la largeur en content-box : le padding (11,5 % =
           166 px à 1440) s'AJOUTAIT → défilement horizontal réel (audit
           12/07 — les balayages mesuraient #UICenter, l'élément fautif
           lui-même, d'où le faux 0) */
        box-sizing: border-box;
    }
}
#UICenter.LoginPage #CentralSpaceLogin {
    /* le cœur pose overflow-y:scroll (gouttière permanente) → auto,
       barre masquée, défilement conservé (petites hauteurs d'écran) */
    position: relative;
    z-index: 1;
    background: transparent;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: none;
}
#UICenter.LoginPage #CentralSpaceLogin::-webkit-scrollbar {
    display: none;
}
@media (min-width: 1000px) {
    #UICenter.LoginPage #CentralSpaceLogin { width: 344px; }
}
/* filet : si un diaporama login est réactivé un jour, il reste discret
   (il est aujourd'hui désactivé côté données) */
#UICenter.LoginPage #login-slideshow { display: none; }

/* ------------------------------------------------------------
   Connexion v2 — petits écrans (≤999px) : logo centré au-dessus
   de la carte (le wordmark, PAS le sceau), carte pleine largeur
   avec marges. Le cœur cale 422px fixes à ≤768 (déborderait à
   390) → plafonné. Sélecteur sur le conteneur stable (le parent
   peut porter « slides » sans « slideshow-enabled »).
   ------------------------------------------------------------ */
@media (max-width: 999px) {
    #UICenter.LoginPage #CentralSpaceLogin {
        width: min(422px, calc(100% - 24px));
        padding-top: var(--space-32, 32px);
        box-sizing: border-box; /* le padding 16px du cœur débordait (content-box) */
    }
}
@media (max-width: 768px) {

    /* --------------------------------------------------------
       Audit mobile 11/07 — fixes critiques.
       (1) MODALES : ModalCentre() (js/global.js:907-920) pose des
       largeurs INLINE desktop (1235/550/440px) sans plafond
       viewport → Zone Équipe/Mon compte coupées à 390px. Le
       !important est requis contre le style inline ; le cœur n'a
       AUCUNE règle #modal en media query.
       -------------------------------------------------------- */
    #modal {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        /* le verre (retouche 6) s'applique à un panneau qui DÉFILE : le
           blur se ré-échantillonne à chaque frame de scroll (coûteux sur
           Android modeste) → fond plein en mobile, même teinte. */
        background-color: var(--colour-surface-200, #f3f3f3);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* sélecteur de fichier existant : 420px fixes > 390px viewport */
    .displayexisting_options {
        width: 100%;
    }
    /* --------------------------------------------------------
       (2) CARTES DE RÉSULTATS : largeurs figées 202/320px à tous
       les viewports — le correctif mobile du cœur est resté
       commenté (global.css:4935 « TODO »). On livre son intention :
       cartes pleine largeur, images en carré fluide.
       -------------------------------------------------------- */
    .resource-card.normal, .resource-card.xl {
        width: 100%;
    }
    /* v2 (12/07, retour utilisateur) : le carré fluide (aspect-ratio:1)
       LETTERBOXAIT les petits aperçus dans un grand vide blanc. L'image
       prend sa largeur pleine au ratio NATUREL, plafonnée à 60vh (les
       portraits très hauts restent contenus). Le wrapper du cœur porte
       width/height en STYLE INLINE (render_functions.php:2951) →
       !important requis. */
    .resource-card-image.normal, .resource-card-image.xl {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
    .resource-card-image .ImageColourWrapper {
        width: 100% !important;
        height: auto !important;
        background-color: transparent !important;
    }
    .resource-card-image .ImageColourWrapper img {
        width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }
    /* (3) hero : le h1 hérite d'une largeur figée 352px qui déborde
       du bloc 360px (padding compris) — audit cœur global.css:3453 */
    #HomeSiteTextInner { width: min(360px, 100%); }
    #HomeSiteTextInner h1 { width: auto; }
}

/* ------------------------------------------------------------
   VUE LISTE des résultats — le tableau (colonnes configurables,
   ~704px minimum) débordait de l'écran mobile et imposait
   l'ascenseur HORIZONTAL à toute la page. Deux verrous :
   (1) #CentralSpaceResources est un conteneur FLEX : son enfant
   .BasicsBox a min-width:auto → il refuse de rétrécir sous la
   largeur intrinsèque du tableau (704px) quel que soit l'écran
   → min-width:0 l'autorise à suivre le viewport ;
   (2) le tableau défile alors DANS .Listview (overflow-x:auto),
   jamais la page. Hors media query : les colonnes de la liste
   sont configurables par profil, le débordement peut arriver à
   toute largeur (inoffensif quand ça tient : rien ne défile).
   ------------------------------------------------------------ */
#CentralSpaceResources > .BasicsBox {
    min-width: 0;
}
.Listview {
    overflow-x: auto;
    max-width: 100%;
}

/* Tuiles du dash ET des Collections en vedette : 2 colonnes trop
   étroites sous 480px (le cœur ne bascule en 1 colonne qu'à 360) */
@media (max-width: 480px) {
    #HomePanelContainer, .FeaturedSimpleLinks {
        grid-template-columns: 1fr;
    }
}

/* Audit mobile 11/07 — cibles tactiles ≥ 44px (reco WCAG/HIG) : la loupe
   d'usine fait 36px (la pilule de 48px l'absorbe sans changer de forme),
   les items du panneau burger 36px — c'est LA navigation mobile. */
@media (pointer: coarse), (max-width: 768px) {
    #SearchBox .input-wrapper > button:first-of-type {
        width: 44px;
        height: 44px;
    }
    #header-container .primary-navigation ul.menu-panel > li {
        height: auto;
        min-height: 44px;
    }
}
#CentralSpaceLogin input[type="text"],
#CentralSpaceLogin input[type="password"] {
    border: 1px solid #d9d4c7;
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 13px;
}
#CentralSpaceLogin input[type="text"]:focus,
#CentralSpaceLogin input[type="password"]:focus {
    border-color: transparent;
    outline: none;
    box-shadow: 0 0 0 3px rgba(222, 106, 23, .30);
}
#CentralSpaceLogin input[type="submit"] {
    width: 100%;
    border-radius: 999px;
}
/* Connexion v2.1 (retours 11/07) — RYTHME VERTICAL unifié : champs à
   12px, actions secondaires recollées, liens en colonne à pas constant */
#loginform .field-input {
    margin-bottom: 12px;
    position: relative;
}
/* quand l'erreur suit le champ mot de passe, sa propre marge haute
   prend le relais : ni marge NI padding du cœur (24px !) ne se cumulent
   → écarts strictement égaux au-dessus et en-dessous */
#loginform .field-input:has(+ .error-panel) {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* « Afficher le mot de passe » : recollé sous son champ, petit et gris
   (l'ancienne zone tactile de 44px créait un trou injustifié) */
#loginform .show-hide-password { margin-top: 4px; }
#loginform .show-hide-password a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #73766f;
    text-decoration: none;
    padding: 4px 0;
}
#loginform .show-hide-password a i {
    font-size: 13px;
    line-height: 1; /* le glyphe Lucide porte une hauteur de ligne qui
                       le décalait du centre optique du texte */
    display: inline-flex;
    align-items: center;
}
/* « Se souvenir de moi » → INTERRUPTEUR (grammaire iOS, planche v13).
   Le cœur dessine une case cochée dans le <span> : entièrement redessiné. */
#loginform .checkbox-field .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: #5c574b;
    cursor: pointer;
}
#loginform .checkbox-field .checkbox-label .label-text {
    line-height: 1.3;
    margin: 0;
    padding: 0;
}
#loginform .checkbox-field input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
#loginform .checkbox-field .checkbox-label > span {
    flex: none;
    display: inline-block;
    width: 36px;
    height: 22px;
    border-radius: 999px;
    background: #e4dfd5;
    border: 0;
    box-shadow: none;
    position: relative;
    transition: background .18s ease;
}
#loginform .checkbox-field .checkbox-label > span::before { content: none; }
#loginform .checkbox-field .checkbox-label > span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(23, 21, 15, .28);
    transition: transform .18s ease;
}
#loginform .checkbox-field input:checked + span { background: #de6a17; }
#loginform .checkbox-field input:checked + span::after { transform: translateX(14px); }
#loginform .checkbox-field input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(222, 106, 23, .30);
}
@media (prefers-reduced-motion: reduce) {
    #loginform .checkbox-field .checkbox-label > span,
    #loginform .checkbox-field .checkbox-label > span::after { transition: none; }
}
/* bouton : respiration constante au-dessus */
#login_box .button { margin-top: 18px; }
/* liens : une colonne, pas vertical CONSTANT (10px), petits et calmes */
#CentralSpaceLogin .login-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 11.5px;
    margin-top: 18px;
}
#CentralSpaceLogin .login-link {
    display: block; /* flux texte naturel : les retours à la ligne restent
                       alignés à gauche (flex poussait le lien à droite) */
    line-height: 1.6;
}
/* ancre à pictogramme (cadenas) : couple icône/texte centré au flex */
#CentralSpaceLogin .login-link a#account_pw_reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#CentralSpaceLogin .login-link a#account_pw_reset i {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin: 0;
}
#CentralSpaceLogin a,
#CentralSpaceLogin .login-links a,
#CentralSpaceLogin .login-link a {
    color: var(--colour-typography-600, #5c574b);
    text-decoration: none;
}
#CentralSpaceLogin a:hover,
#CentralSpaceLogin .login-links a:hover,
#CentralSpaceLogin .login-link a:hover {
    color: var(--colour-brand-primary-default);
    text-decoration: none;
}
/* l'invitation à demander un compte garde un accent discret */
#CentralSpaceLogin a#account_apply {
    color: var(--colour-brand-primary-dark, #b85512);
    font-weight: 600;
}
/* ⚠ ne masquer QUE le champ fuseau : son wrapper contient AUSSI le
   pied de page (bug du 11/07 : le crédit était avalé avec). */
#loginform .field-input:has(> #user_local_tz) {
    display: none;
}

/* ------------------------------------------------------------
   Retouche 13 (validée 11/07) — L'erreur de connexion : une
   ligne, dans le MÊME matériau que la carte (verre neutre) —
   l'alerte vit dans l'icône et le texte (rouge profond), pas
   dans un fond coloré. Le titre « champs obligatoires » (clé
   partagée, intouchable) n'apparaît QUE si le panneau liste
   des champs manquants (liens). La carte fait « non » (shake
   macOS) à l'apparition d'une erreur.
   ------------------------------------------------------------ */
/* Connexion v2 (planche v13c) : l'erreur façon Apple — le pictogramme
   porte seul la couleur, le texte reste GRIS et explique. Plus de
   panneau : une ligne nue, déplacée SOUS le champ mot de passe par le
   hook psdLoginEpure. La secousse de la carte est conservée. */
#CentralSpaceLogin .error-panel {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0; /* bord gauche EXACTEMENT sur l'axe des champs (v2.2) */
    margin: 12px 0; /* respiration ÉGALE de part et d'autre (v2.2) */
    color: #73766f; /* gris FIXE : le login est toujours clair, la
                       variable peut résoudre sombre pour l'anonyme */
    font-size: 12px;
    line-height: 1.45;
}
#CentralSpaceLogin .error-panel .icon-triangle-alert {
    color: #b3362a;
    font-size: 15px;
    flex: none;
    margin-top: 1px;
}
/* le cœur focalise le panneau (tabindex=-1, lecteurs d'écran) : pas
   d'anneau de focus visuel sur un élément non navigable au clavier */
#CentralSpaceLogin .error-panel:focus {
    outline: none;
}
#CentralSpaceLogin .error-panel .error-panel-title {
    font-weight: 600;
    margin-bottom: 3px;
}
/* le titre « champs obligatoires » ne se montre QUE pour le vrai
   cas champs vides (le panneau contient alors des liens ancres).
   ⚠ Scopé au SEUL panneau du login (#login-errors, login.php:206) :
   sur user_request.php le message d'erreur LUI-MÊME vit dans
   .error-panel-title (l.138) — la règle générique le faisait
   disparaître entièrement (audit 11/07, bloquant). */
#CentralSpaceLogin #login-errors:not(:has(a)) .error-panel-title {
    display: none;
}
/* liens vers les champs manquants : rouge profond, soulignés (action) */
#CentralSpaceLogin .error-panel a {
    color: #8a2620;
    font-weight: 600;
    text-decoration: underline;
}
/* la carte fait « non » — désactivé si l'utilisateur réduit les animations */
@media (prefers-reduced-motion: no-preference) {
    #CentralSpaceLogin:has(.error-panel) #login_box {
        animation: psd-shake .5s ease;
    }
}
@keyframes psd-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
#login-footer {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--colour-typography-700, #4a4c48);
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 26px;
}
@media (min-width: 1000px) {
    /* desktop : pied posé au bas de la page (elle ne défile pas) */
    #login-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 16px;
        margin: 0;
    }
}
/* crédit v2 (planche v13d) : « Design by » puis le logo Lya & Co,
   chacun à la ligne, l'ensemble cliquable (injecté par le hook) */
#login-footer a.psd-credit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin: 8px auto 0;
    opacity: .8;
    text-decoration: none;
    color: var(--colour-typography-500, #73766f);
    font-size: 8.5px;
    letter-spacing: .14em;
}
#login-footer a.psd-credit img {
    display: block;
    height: 18px;
    width: auto;
}
@media (hover: hover) and (pointer: fine) {
    #login-footer a.psd-credit:hover { opacity: 1; }
}

/* ------------------------------------------------------------
   Retouche 9 (validée 11/07) — Panneau de filtres : la couleur
   revient au survol. Liens gris doux graisse 500 (icônes <i>
   héritent), « Effacer les filtres » encore plus discret, seul
   le bouton Rechercher (.searchbutton, tokens) reste fort.
   ------------------------------------------------------------ */
#SearchBoxPanel .search-actions-secondary a {
    color: var(--colour-typography-600, #5c574b);
    font-weight: 500;
}
#SearchBoxPanel .search-actions-primary a {
    color: var(--colour-typography-500, #73766f);
    font-weight: 500;
}
#SearchBoxPanel .search-actions-secondary a:hover,
#SearchBoxPanel .search-actions-primary a:hover {
    color: var(--colour-brand-primary-default);
    text-decoration: none;
}
/* le soulignement du cœur vit sur le <span> interne des liens */
#SearchBoxPanel .search-actions-secondary a span,
#SearchBoxPanel .search-actions-primary a span {
    text-decoration: none;
}
.uppy-Dashboard .uppy-Dashboard-poweredBy {
    display: none;
}
@media (prefers-reduced-motion: no-preference) {
    #SearchBox .input-wrapper {
        transition: box-shadow .15s ease;
    }
}

/* ------------------------------------------------------------
   Vague 2 mobile (11/07) — Éradication du bleu résiduel du cœur.
   RS n'a rebrandé qu'une partie de son accent : plusieurs bleus
   codés en dur subsistent (light.css / global.css) — non remappés
   en mode sombre. Ils jurent avec l'identité orange. Un seul
   passage, tous les endroits (règle de cohérence). Sélecteurs
   MIROIR du cœur : notre feuille charge après → gagne à
   spécificité égale, en clair ET en sombre.
   ------------------------------------------------------------ */

/* (a) Chevron des <select> simples : le cœur laisse un chevron BLEU
   #2E99E6 (global.css:721) alors qu'il a passé les select2 en gris.
   GRIS MOYEN UNIQUE #909390, lisible sur fond clair ET sombre : le
   sombre RS peut être FORCÉ par préférence (css_override l'émet alors
   SANS media query) — aucune garde prefers-color-scheme ne peut donc
   modéliser le vrai mode. Un caret n'est pas un moment de marque :
   jamais l'orange. (Audit 11/07 : l'ancienne paire clair/sombre
   rendait le chevron invisible en mode forcé.) */
select, .sp-replacer {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-size: 18px;
    background-position: right 10px center;
}

/* (b) Bouton des boîtes de dialogue jQuery UI : le cœur le remplit en
   BLEU #1679c0 (light.css:697) — et sa spécificité (0,2,1) bat même le
   remappage sombre du cœur, donc bleu dans LES DEUX modes. On mirroir
   le sélecteur → orange de marque plein, texte blanc (action primaire,
   grammaire du bouton « Déposer »). Bordure grise du cœur retirée. */
.ui-dialog .ui-dialog-buttonpane button {
    background-color: var(--colour-brand-primary-default);
    color: #fff;
    border: 0;
    border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
    .ui-dialog .ui-dialog-buttonpane button:hover {
        background-color: var(--colour-brand-primary-dark);
        color: #fff;
        text-decoration: none;
    }
}

/* (c) Sélection d'une ressource : contour et teinte de ligne passaient
   au bleu #2E99E6 / #d5eafa (light.css:78-79). Contour orange de marque ;
   teinte via color-mix (s'adapte au fond clair ET sombre de la ligne). */
.ResourcePanel.Selected {
    outline: 3px solid var(--colour-brand-primary-default);
}
tr[id^="ResourceShell"].Selected {
    background-color: color-mix(in srgb, var(--colour-brand-primary-default) 14%, transparent);
}

/* (d) Survol des actions groupées en vue liste : bleu → orange (comme
   tous nos survols). */
.ListViewBulkActions span:hover {
    color: var(--colour-brand-primary-default);
}

/* (e) Pastille du gestionnaire de plugins (admin) : dernier îlot bleu. */
.PluginDisplay .Pill {
    background-color: var(--colour-brand-primary-default);
}

/* (f) iPhone : filet contre la détection automatique d'iOS (numéros/cotes
   transformés en liens téléphone BLEUS). Le meta format-detection (hook)
   coupe la détection ; ce filet neutralise tout lien tel: résiduel
   (contenu HTML déjà généré, vieux caches). */
a[href^="tel:"] {
    color: inherit;
    text-decoration: inherit;
}

/* ------------------------------------------------------------
   Retouche 14 (11/07) — filet de sortie mobile (≤1235px).
   ModalLoad (cœur, js/global.js:846) rend les écrans-modales
   (Mon compte, Zone Équipe, Messages, Réglages…) en PLEINE PAGE
   sans fermeture : croix réservée à edit.php, overlay/Échap
   inexistants hors modale. Pilule fantôme « Retour » injectée
   par le hook JS en tête de #CentralSpace sur les pages console
   (/pages/user/, /pages/team/). Masquée au-delà de 1235px : les
   mêmes écrans redeviennent des modales du cœur.
   ------------------------------------------------------------ */
.psd-back-pill {
    /* v3 minimaliste 2026 (direction 12/07) : texte seul, SANS contour
       ni icône — zone tactile 44px invisible. Styles HORS media query :
       le bandeau de collection l'affiche à TOUTES les largeurs (>1235 il
       retombait sur le bouton brut du cœur — relecture 12/07 soir). */
    display: none; /* le filet console ne se montre qu'en ≤1235 (ci-dessous) */
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    margin: 8px 0 4px 8px;
    padding: 0;
    border: 0;
    border-radius: 10px; /* arrondi de l'outline de focus */
    background: transparent;
    color: var(--colour-typography-700, #4a4c48);
    font-size: 24px; /* taille de l'icône corner-up-left */
    line-height: 1;
    cursor: pointer;
    /* c'est un <button> : le chrome des boutons du cœur (ombre 0 1px 3px,
       appearance) créait un « carré ombré » — neutralisé */
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}
@media (max-width: 1235px) {
    .psd-back-pill {
        display: inline-flex;
    }
}
@media (hover: hover) and (pointer: fine) {
    /* survol famille retour v4 (icônes) : teinte, comme la pagination */
    .psd-back-pill:hover {
        background: transparent;
        color: var(--colour-brand-primary-dark);
    }
}

/* ============================================================
   AUDIT COMPLET 11/07 — corrections en lot (workflow 7 agents
   + balayage runtime). Chaque règle cite le mécanisme du cœur
   qu'elle corrige. Tout est hors-cœur.
   ============================================================ */

/* ---- A. LARGEURS FIGÉES DU CŒUR (débordements horizontaux) ---- */
/* champs 420/285px (global.css:970) : jamais plus larges que leur
   conteneur — partout (desktop intact, ses conteneurs sont plus larges) */
.Question .stdwidth, .stdwidth, .dynamickeywords,
.Question .medwidth, .medwidth {
    max-width: 100%;
    box-sizing: border-box;
}
/* recherche avancée : champs figés 550px (global.css:853, aucune règle mobile) */
@media (max-width: 767px) {
    #CentralSpace .SearchWidth {
        width: 100%;
        max-width: 550px;
        box-sizing: border-box;
    }
}
/* formulaires en pleine page mobile (édition, partage, console) : champs
   pleins, étiquettes AU-DESSUS (le float 200/300px mangeait la largeur) */
@media (max-width: 768px) {
    .Question label, .QuestionSubmit label { float: none; display: block; width: auto; }
    .Question .stdwidth, .stdwidth, .dynamickeywords { width: 100%; max-width: 420px; }
    .Question .medwidth, .medwidth { width: 100%; max-width: 285px; }
    .CategoryBox { width: 100%; max-width: 414px; box-sizing: border-box; }
    .Question .Fixed { float: none; width: auto; }
    .Question .tickset { float: none; width: auto; max-width: 100%; }
    /* filtres « Mes actions » : 700px figés (global.css:2594) */
    .FormFilter { width: auto; max-width: 100%; }
    /* formulaires de modale rendus pleine page : min-width 600px (global.css:2108) */
    .modalform { min-width: 0; }
    /* messages rapides : largeurs figées 333/388px */
    .message-container { width: calc(100% - 80px); }
    .message-divider { width: auto; margin-right: 20px; }
}
/* grille d'édition : l'enfant de colonne ne doit pas l'élargir */
.BasicsBoxEdit .BasicsBoxLeft { min-width: 0; }
/* sorties de rapport & purge : la table .InfoTable est émise NUE
   (reporting_functions.php:279) → elle défile dans son cadre, jamais
   la page (même patron que la vue liste) */
#CentralSpace .InfoTable {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
/* team_report : panneau e-mail périodique 400px INLINE → max-width gagne */
#EmailSetup .Fixed { max-width: 100%; }
/* valeurs longues insécables : clé API 64 hex (profil), URLs */
.Question .Fixed { overflow-wrap: anywhere; }
/* titre de la fiche : noms de fichiers insécables */
.RecordHeader h1 { overflow-wrap: anywhere; }

/* selects sans plafond : leur largeur intrinsèque suit les libellés
   (français plus long → « Actions… » 504px, groupe 450px) */
@media (max-width: 767px) {
    #CentralSpace select {
        max-width: calc(100vw - 48px);
    }
    /* recherche avancée : la grille de cases à cocher est une TABLE
       (5 paires de colonnes ≈ 696px de min-content) → paires en flux
       qui reviennent à la ligne (le marqueur data-psd-page est posé
       par le hook JS à chaque navigation) */
    body[data-psd-page="search_advanced.php"] #CentralSpace table {
        width: auto;
    }
    body[data-psd-page="search_advanced.php"] #CentralSpace tr {
        display: block;
    }
    body[data-psd-page="search_advanced.php"] #CentralSpace td {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
}
/* Collections en vedette : tuiles FIGÉES à 390px par le cœur (grille +
   tuile + carte interne) → grille fluide, tuiles pleines colonnes */
@media (max-width: 850px) {
    .BasicsBox.FeaturedSimpleLinks {
        width: auto;
        max-width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    }
    a.FeaturedSimpleTile,
    .FeaturedSimpleTile .HomePanel {
        width: auto;
        max-width: 100%;
    }
}

/* ---- B. FICHE & APERÇU ---- */
/* aperçu plein écran : l'image « scr » (jusqu'à 1400px) vit HORS de tout
   .RecordPanel — la seule contrainte du cœur (global.css:1035) ne
   s'applique pas ; height INLINE posée sur la copie d'annotation */
#PreviewImageLarge, #previewimagecopy {
    max-width: min(100%, calc(100vw - 110px));
    height: auto !important;
}
/* lecteurs vidéo/audio : figés 700×394 (video_player.php:146), recopiés
   en style INLINE par video.js */
@media (max-width: 768px) {
    .videojscontent .video-js {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 700 / 394;
    }
}
/* trou 769-850px : l'image de fiche (max 740px) déborde du panneau —
   le cœur ne la fluidifie qu'à ≤768 (global.css:6249) */
@media (max-width: 850px) {
    .RecordPanel .Picture { max-width: 100%; }
}
/* outils d'image (plugin transform) : zone de recadrage CALÉE à 600px
   (coordonnées du crop en px affichés — ne PAS rétrécir) → elle défile
   dans la fiche, la page ne panne plus */
@media (max-width: 768px) {
    .BasicsBox:has(#cropimgdiv) { overflow-x: auto; }
}
/* vue bande : un panorama plus large que l'écran n'est pas réduit par
   le filet JS du cœur (StripResizeResults) */
.ImageStripLink { max-width: 100%; min-width: 0; }
.ImageStrip { max-width: 100%; object-fit: contain; }

/* ---- C. BARRE D'OUTILS DES RÉSULTATS : pagination ---- */
/* le pager est en position:absolute SANS règle mobile (global.css:831) :
   sa position statique = le HAUT du bloc → superposé au compteur ≤~700px.
   Retour dans le flux, sous les blocs de gauche. */
@media (max-width: 767px) {
    .SearchSticky .TopInpageNavLeft { float: none; width: auto; }
    .SearchSticky div.TopInpageNavRight,
    .SearchSticky div.TopInpageNavRight .TopInpageNavRight {
        position: static;
        display: block;
        width: auto;
        text-align: left;
        margin-top: 4px;
    }
}

/* ---- D. DIALOGUES jQuery UI : largeurs INLINE 300-450px ---- */
@media (max-width: 768px) {
    .ui-dialog {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
    }
    .ui-dialog .ui-dialog-content { max-width: 100%; box-sizing: border-box; }
}

/* ---- E. DOCK : bande 769-840px — largeurs fixes du cœur
   (328+328+48+gaps = 768px) + nos marges 14px rognaient le bouton
   vignettes (conteneur overflow:hidden) → champs fluides à parts égales */
@media (min-width: 769px) and (max-width: 840px) {
    #CollectionDiv .collection-bar-actions-form .field { flex: 1 1 0; }
    #CollectionDiv .collection-bar-actions-form select,
    #CollectionDiv .collection-bar-name-input {
        width: 100%;
        min-width: 0;
    }
}

/* ---- F. CIBLES TACTILES ≥44px — 2e passe (zones résultats, fiche,
   dock, dépôt, login, dash). Zones de frappe étendues par pseudo-élément :
   AUCUN décalage visuel, le tap sur ::after remonte à l'élément. ---- */
@media (pointer: coarse), (max-width: 768px) {
    .resource-card-action-menu,
    .resource-card-action-bar .check,
    .resource-card-tools .resource-card-add-remove,
    .update_result_order_button,
    .TopInpageNavRight a.prevPageLink,
    .TopInpageNavRight a.nextPageLink,
    .icondisplay a,
    .ListTools a {
        position: relative;
    }
    .resource-card-action-menu::after,
    .resource-card-action-bar .check::after,
    .resource-card-tools .resource-card-add-remove::after,
    .update_result_order_button::after,
    .TopInpageNavRight a.prevPageLink::after,
    .TopInpageNavRight a.nextPageLink::after,
    .icondisplay a::after,
    .ListTools a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    /* checkbox native de la vue liste */
    td > .checkselectmedium { transform: scale(1.8); transform-origin: left center; }
    /* fiche & aperçu : précédent/suivant/agrandir/fermer + outils */
    a.prevLink, a.nextLink, a.maxLink, a.closeLink, .backtoresults .upLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    #PreviewTools { height: auto; min-height: 41px; }
    .ToolsOptionLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
    }
    .RecordTools li > a, .RecordTools li > .DisabledLink {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    .RecordPanel .RecordDownloadSpace .DownloadDBlend a { line-height: 44px; }
    /* dépôt : croix « retirer » 18px et crayon 16px d'Uppy */
    .uppy-Dashboard-Item-action--remove {
        width: 44px; height: 44px; padding: 13px; top: -14px; right: -14px;
    }
    .uppy-Dashboard-Item-action--edit { width: 44px; height: 44px; padding: 14px; }
    .backtoresults .prevLink, .backtoresults .nextLink {
        display: inline-flex; align-items: center;
        min-height: 44px; padding-left: 12px; padding-right: 12px;
    }
    /* dash, formulaires (NB : « Afficher le mot de passe » a son style
       compact dédié — connexion v2.1, le 44px créait un trou visuel) */
    .DashTileActions .tool { width: 44px; height: 44px; }
    .QuestionSubmit input[type="submit"] { min-height: 44px; }
}
@media (pointer: coarse) {
    /* dock : retrait de vignette (24px d'usine ; 44 mangerait la carte de 92px) */
    .collection-bar-resource-card-remove { width: 38px; height: 38px; font-size: 22px; }
    /* dock : valider/annuler la création de collection */
    .collection-bar-name-input button { width: 44px; height: 44px; }
    /* collections en vedette : menu ⋮ */
    .FeaturedSimpleTile .top-right-menu { width: 44px; height: 44px; align-items: center; }
    /* gérer les collections : corbeille */
    #collection_delete {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- G. SURVOLS DU CŒUR COLLANTS AU TACTILE (repos rétabli) ---- */
@media (hover: none) {
    .resource-card:hover { box-shadow: var(--psd-shadow-card); }
    .resource-card-action-menu:hover { background: transparent; }
    .resource-card-add-remove:hover {
        background-color: transparent;
        color: var(--colour-surface-900);
    }
    /* état « déjà dans la collection » : conserver le rond plein */
    .resource-card-add-remove.removeFromCollection:not(.DisplayNone):hover {
        background-color: var(--colour-surface-900);
        border-color: var(--colour-surface-900);
        color: var(--colour-surface-50);
    }
    .ImageStrip:hover { transform: scale(1); box-shadow: none; }
    .collection-bar-resource-card-remove:hover { background: var(--colour-transparency-white-70); }
}
/* tuiles-liens du dash : l'ombre noire dure du cœur (a.HomePanel:hover,
   light.css:637, spécificité 0,2,1) battait notre élévation ET collait
   au tactile — neutralisée (= ombre de repos), élévation réservée aux
   vrais survols */
a.HomePanel:hover {
    box-shadow: var(--psd-shadow-card);
}
@media (hover: hover) and (pointer: fine) {
    a.HomePanel:hover {
        box-shadow: 0 2px 4px rgba(23, 21, 15, .06), 0 16px 34px -14px rgba(23, 21, 15, .22);
    }
}
/* la tuile-ancre des Collections en vedette CONTIENT son menu ⋮
   position:fixed (render_functions.php:5104) : notre lévitation en
   faisait le containing block → menu projeté hors de sa position.
   L'ancre ne bouge plus (0,2,1 > 0,2,0) ; la carte interne, si. */
@media (hover: hover) and (pointer: fine) {
    a.FeaturedSimpleTile:hover { transform: none; }
}

/* ---- H. HORS-CHARTE (suite et fin de l'éradication) ---- */
/* pastille « Archivé » : bleue en clair (global.css:5397) ET en sombre
   (css_override alternates-blue) → chip orange autoporteuse, une seule
   règle pour les deux modes ; border:0 neutralise la bordure sombre */
.resource-card-status.archive {
    color: var(--colour-brand-primary-darkest, #8a3e0c);
    background: var(--colour-brand-primary-light, #fbebdd);
    border: 0;
}
/* pulse du dock : le cœur flashe BLEU #4593EE (global.css:5676) — la
   DERNIÈRE définition d'un @keyframes du même nom remplace la sienne */
@keyframes pulse-bg {
    0%   { background-color: var(--colour-brand-primary-default); }
    50%  { background-color: var(--colour-brand-primary-hover); }
    100% { background-color: var(--colour-brand-primary-default); }
}
/* halo de focus BLEU du cœur sur TOUS les champs (light.css:437,
   hsla 205° — persiste même en sombre) → halo orange de la pilule.
   Le login (spécificité ID) garde ses règles dédiées. */
input:focus, textarea:focus, select:focus,
.RecordPanel .RecordDownloadSpace .DownloadDBlend a:focus {
    box-shadow: 0 0 0 3px rgba(222, 106, 23, .30);
}
/* état « activé » des outils d'aperçu (annotations/zoom) : vert RS
   #79BC41 (light.css:543) — dernier accent étranger vivant */
.ToolsOptionLink:hover,
.ToolsOptionLink.Enabled,
a.Enabled, a:visited.Enabled {
    color: var(--colour-brand-primary-hover);
}
/* Uppy : accents d'usine (bleu #1269cf, vert #1bb240) → marque.
   uppy.min.css charge AVANT nous : la cascade suffit. */
.uppy-StatusBar-progress { background-color: var(--colour-brand-primary-default); }
.uppy-StatusBar-spinner { fill: var(--colour-brand-primary-default); }
.uppy-StatusBar-actionBtn { color: var(--colour-brand-primary-default); }
.uppy-StatusBar-actionBtn--upload { background-color: var(--colour-brand-primary-default); }
.uppy-StatusBar-actionBtn--upload:hover { background-color: var(--colour-brand-primary-dark); }
.uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload { color: var(--colour-brand-primary-default); }
.uppy-c-btn-primary { background-color: var(--colour-brand-primary-default); }
.uppy-c-btn-primary:hover { background-color: var(--colour-brand-primary-dark); }
.uppy-c-textInput:focus {
    border-color: var(--colour-brand-primary-default);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-brand-primary-default) 15%, transparent);
}
.uppy-Dashboard .uppy-Dashboard-browse:focus {
    border-bottom: 1px solid var(--colour-brand-primary-default);
}
/* rouges bruts : e-mail invalide (team_user_edit) + erreur photo du
   profil (style INLINE color:red du cœur → !important requis) */
.emailinvalid {
    background-color: color-mix(in srgb, var(--colour-feedback-error-default, #c20101) 14%, transparent);
}
#profile_image_validate {
    color: var(--colour-feedback-error-default, #c20101) !important;
    font-size: 13px;
}
/* vue carte : liens des contrôles Leaflet (bleu de la lib) */
.leaflet-container a { color: var(--colour-typography-700, #4a4c48); }
/* Directives (plugin brand_guidelines) : le bouton « table des matières »
   vire BLEU #1679c0 au survol en mobile (style.css:348 du plugin) — et le
   survol COLLE après le tap. Orange foncé, et seulement au vrai survol. */
button#guidelines-toc:hover {
    background-color: var(--colour-brand-primary-default);
}
@media (hover: hover) and (pointer: fine) {
    button#guidelines-toc:hover {
        background-color: var(--colour-brand-primary-dark);
    }
}

/* ============================================================
   CARTES DE RÉSULTATS ENRICHIES (planche v14, validée 11/07).
   Tout existe déjà dans le markup du cœur (pilule d'état, barre
   de type icône+extension, boutons +/− vers le dock, titre) —
   ici : l'habillage à notre charte. La vue cartes est la vue
   par défaut du cœur ($default_display = thumbs).
   ============================================================ */
/* titre : 2 lignes maximum, 600 */
.resource-card-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* pastilles d'état : Actif vert doux, En attente ambre (l'Archivé
   orange vit déjà plus haut) — mêmes formes que la planche */
.resource-card-status.active {
    color: #1e5c3c;
    background: #e3f0e7;
    border: 0;
}
.resource-card-status.pending {
    color: #7a4b00;
    background: #f7ecd9;
    border: 0;
}
/* barre de type : icône du type + extension, petit gris assumé */
.resource-card-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--colour-typography-500, #73766f);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
}
.resource-card-type i { font-size: 14px; }
/* boutons +/− : anneau orange TOUJOURS visible (grammaire pilule) ;
   « − » (déjà en collection) = disque plein */
.resource-card-tools .resource-card-add-remove {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--colour-brand-primary-default);
    border-radius: 50%;
    background: transparent;
    color: var(--colour-brand-primary-default);
    display: flex;
    align-items: center;
    justify-content: center;
}
.resource-card-tools .resource-card-add-remove.removeFromCollection:not(.DisplayNone) {
    background: var(--colour-brand-primary-default);
    border-color: var(--colour-brand-primary-default);
    color: #fff;
}
@media (hover: hover) and (pointer: fine) {
    .resource-card-tools .resource-card-add-remove:hover {
        background: var(--colour-brand-primary-default);
        color: #fff;
    }
    .resource-card-tools .resource-card-add-remove.removeFromCollection:not(.DisplayNone):hover {
        background: var(--colour-brand-primary-dark);
        border-color: var(--colour-brand-primary-dark);
        color: #fff;
    }
}

/* ---- PLACEHOLDERS « sans aperçu » : le cube RS → le SCEAU ---- */
/* tuiles du dash : le cœur masque dash_placeholder.svg (le cube) en
   teinte brand 20% (global.css:445-461) → même mécanique, notre
   silhouette (le PNG des armoiries sert de masque alpha) */
.tile-placeholder > .thumbs-tile-image {
    mask-image: url('../img/armoiries.png');
    -webkit-mask-image: url('../img/armoiries.png');
    height: 96px;
    width: 96px;
    opacity: .45; /* le cœur l'estompe à .2 — sceau plus présent (retour 11/07) */
}
/* PNG no_preview du cœur (rapports, demandes…) → sceau estompé */
img[src*="gfx/no_preview/"] {
    content: url('../img/armoiries.png');
    opacity: .25;
}

/* ============================================================
   UX v15 (planche validée 11/07) — habillage des trois piliers.
   ============================================================ */
/* « Vider » : bouton DESTRUCTIF (!important requis : la règle bouton
   générique du cœur a une spécificité supérieure et gagnerait sinon) → style secondaire (il était le
   jumeau visuel du bouton principal, collé à lui) */
input.resetform, button.resetform {
    background: transparent !important;
    color: var(--colour-typography-600, #5c574b) !important;
    border: 1.5px solid #d9d4c7 !important;
    box-shadow: none;
    font-weight: 500;
}
/* erreur PERSISTANTE sous le champ fautif */
.psd-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #8a2620;
    font-size: 12px;
    margin-top: 4px;
}
.psd-field-error::before {
    content: "!";
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b3362a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    margin-top: 1px;
}
.FieldSaveError input, .FieldSaveError textarea, .FieldSaveError select {
    border-color: transparent;
    box-shadow: 0 0 0 2.5px rgba(179, 54, 42, .40);
}
/* toast succès : accent vert doux dans la grammaire du chip Actif */
.toastify-Success {
    background: #1d1c17;
}
.toastify-Success .icon-check { color: #7fd6a4; }
/* note d'auto-enregistrement (Préférences) */
.psd-autosave-note {
    display: inline-block;
    font-size: 12.5px;
    color: var(--colour-typography-600, #5c574b);
    background: color-mix(in srgb, var(--colour-brand-primary-default) 8%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 6px 0 14px;
}
/* barre d'étape de la revue de dépôt */
.psd-stepbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin: 8px 0 14px;
    border: 1px solid var(--colour-surface-300, #e6e2da);
    border-radius: 12px;
}
.psd-stepbar .psd-stepcount {
    font-family: "Space Grotesk", Inter, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--colour-brand-primary-dark, #b85512);
}
.psd-stepbar .psd-stepback {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* famille retour v3 : texte nu, zone 44px */
    color: var(--colour-typography-700, #4a4c48);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.psd-stepback:hover {
    color: var(--colour-brand-primary-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
    .psd-stepbar .psd-stepback:hover { color: var(--colour-brand-primary-default); }
}

/* ---- I. CONSOLE & LOGIN ---- */
/* tuiles user_home/team_home : hauteur figée 100px du cœur — les
   libellés français sur 2 lignes affleuraient */
.TileNav li { height: auto; min-height: 100px; }
/* « Retour à la connexion » (mot de passe oublié / demande de compte) :
   lien gris nu posé sur la photo → pilule de verre (le login est
   TOUJOURS clair : blanc fixe assumé, css_override ne s'y applique pas) */
#CentralSpaceLogin > a.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-height: 44px;
    padding: 0 16px;
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    text-decoration: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #CentralSpaceLogin > a.text-link { background: rgba(255, 255, 255, .92); }
}

/* ==================================================================
   NAV MOBILE v2 (analyse 12/07, lots 1-2 validés « vazy go »)
   ================================================================== */

/* 1.2 — Héros d'accueil ramené à ~200px en mobile (il occupait ~360px :
   premier contenu utile aux 2/3 de l'écran). Décoratif assumé, titre
   recadré. En paysage téléphone il disparaît (hauteur déjà rare). */
@media (max-width: 767px) {
    #hero_banner {
        aspect-ratio: auto;
        height: 200px;
        min-height: 0;
        overflow: hidden;
    }
    #hero_banner #HomeSiteText h1 {
        font-size: clamp(22px, 6vw, 28px);
    }
}
@media (max-height: 480px) and (max-width: 940px) {
    #hero_banner { display: none; }
}

/* 1.3 — Entrées du menu déroulant à hauteur tactile (44px ; elles
   faisaient 16px de haut — HIG/WCAG 2.5.8). Le ul du panneau mobile
   n'a PAS de classe propre → on cible les li de toute la nav (ceux de
   la nav desktop vivent dans une rangée de 48px : inchangés à l'œil). */
nav.primary-navigation li a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* 1.4 — Cibles tactiles des modes d'affichage des résultats (24×20
   affiché : on garde le dessin, on étend la zone de frappe — même
   procédé ::after que le reste du thème). Idem chevrons multi-pages
   de la visionneuse (.PDFnav) et bouton de sens de tri. */
@media (hover: none), (max-width: 767px) {
    .InpageNavLeftBlock.icondisplay a,
    .PDFnav,
    #searchSortOrderContainer button,
    button.sort-order-button {
        position: relative;
    }
    .InpageNavLeftBlock.icondisplay a::after,
    .PDFnav::after,
    #searchSortOrderContainer button::after,
    button.sort-order-button::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* 1.6 — Bouton flottant du dock : bas-DROITE au lieu de bas-centre
   (il recouvrait le contenu au point le plus lu de la page ; le cœur
   le centre en ≤768 par margin-left:calc(50%…), global.css:6216).
   Déplacement par MARGES uniquement (position:absolute serait clippé
   par l'overflow:hidden de #CollectionDiv et cassé par le translateY
   de .state-closed — global.css:5697). */
@media (max-width: 768px) {
    #CollectionDiv .collection-bar-toggle-button {
        margin-left: auto;
        margin-right: 18px;
    }
}
/* Badge compteur : data-psd-count posé par le hook JS (nombre
   d'éléments de la collection en cours), masqué à zéro. */
#CollectionDiv .collection-bar-toggle-button {
    position: relative;
}
#CollectionDiv .collection-bar-toggle-button[data-psd-count]:not([data-psd-count="0"])::after {
    content: attr(data-psd-count);
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #1d1c17;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* 1.7 — Tirer-pour-rafraîchir Android : un geste vers le bas en haut
   de liste rechargeait la page (saisie perdue). Le document ne
   défilant jamais (body overflow:hidden), on confine l'overscroll. */
body,
#UICenter {
    overscroll-behavior-y: contain;
}

/* 2.2 — Barre d'outils des résultats condensée en mobile : ~380px de
   contrôles avant la première carte. On garde compteur + modes
   d'affichage (zones 44px ci-dessus) + tri ; on retire l'accessoire :
   nombre par page, menu Actions (opérations de lot = desktop ; le
   dock a les siennes) et bouton « déposer ici » (icône 48px en
   en-tête). Résultat ≈ 120px. */
@media (max-width: 767px) {
    .TopInpageNavLeft .InpageNavLeftBlock:has(> select#resultsdisplay),
    .TopInpageNavLeft .ActionsContainer,
    /* « Déposer ici » est un <button onclick> SANS href
       (render_functions.php:3218) — un sélecteur a[href] est mort */
    .TopInpageNavLeft .InpageNavLeftBlock:has(> button[onclick*="upload_batch"]) {
        display: none;
    }
    /* MAIS en mode sélection, le même .ActionsContainer porte les
       actions de la sélection (relier/partager/télécharger —
       search.php:1326) : on le rétablit quand la sélection est active
       (le bouton « Modifier la sélection » l'atteste). */
    .TopInpageNavLeft:has(#EditSelectedResourcesBtn, #ClearSelectedResourcesBtn) .ActionsContainer {
        display: block;
    }
    .TopInpageNavLeft {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
    }
}

/* 2.4 — « Réduire les animations » respecté globalement (le cœur
   l'ignore : pulse-bg du dock, compte à rebours du diaporama,
   transitions du panneau filtres — global.css:5670/3430/4469). Nos
   propres blocs étaient déjà gardés individuellement ; ceci couvre
   le cœur. Durées quasi nulles plutôt que none : les handlers
   d'animationend/transitionend du cœur continuent de se déclencher. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 2.1 — La loupe de la visionneuse (mobile/tactile) : taper l'image
   ouvre un plein écran pinch/double-tap/glisser au lieu de QUITTER
   (l'image entière était un lien de sortie, preview.php:361). */
.psd-loupe {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(16, 15, 11, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: contain;
}
.psd-loupe img {
    max-width: 100vw;
    max-height: 100vh;
    transform-origin: 0 0;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
.psd-loupe-fermer {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 19px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
html.psd-loupe-ouverte,
html.psd-loupe-ouverte body {
    overflow: hidden;
}
/* image de la visionneuse : pleine largeur et centrée en mobile
   (le garde-fou général la plafonnait à 100vw - 110px ≈ 280px) */
@media (max-width: 767px), (hover: none) {
    #CentralSpace img#PreviewImageLarge {
        max-width: calc(100vw - 24px) !important;
        display: block;
        margin: 0 auto;
    }
    /* retour unifié : liens marqués par le hook (doublon de la pilule,
       outil d'annotation desktop) */
    #CentralSpace a.psd-cache-mobile {
        display: none !important;
    }
}
/* centrage : sur preview.php, #CentralSpace lui-même est inline-block
   RÉTRÉCI à l'image (chaîne table→#CentralSpace→#CentralSpaceContainer,
   tous à 367px) — pleine largeur + table centrée, scopé à la page */
@media (max-width: 767px) {
    body[data-psd-page="preview.php"] #CentralSpaceContainer,
    body[data-psd-page="preview.php"] #CentralSpace {
        display: block;
        /* !important justifié : le cœur pose width:94% en style INLINE
           sur #CentralSpaceContainer (JS) — 366px sur 390 */
        width: 100% !important;
    }
    body[data-psd-page="preview.php"] #CentralSpace table:has(img#PreviewImageLarge) {
        margin-left: auto;
        margin-right: auto;
    }
}

/* très petits écrans : logo réduit pour préserver la rangée unique */
@media (max-width: 374px) {
    #header-container .logo img { height: 28px; }
}

/* contre-expertise 12/07 : le cœur fige ul.menu-panel > li à 36px
   (global.css:4650) sous nos ancres de 44px — survol décalé et zones
   qui se chevauchent dans le panneau ⋮ DESKTOP. ⚠ préfixe #header-container
   obligatoire : la règle cœur est en (1,2,2), sans lui la nôtre (0,2,3)
   perdait — NO-OP documenté §20 du runbook. */
#header-container .primary-navigation ul.menu-panel > li {
    height: auto;
}

/* Options 1+2 (12/07) — bandeau de contexte de collection : « ← Retour ·
   Collection “nom” » en tête des résultats d'une collection (la page
   n'affichait NI titre NI sortie — constat utilisateur). Le bouton
   réutilise .psd-back-pill. */
.psd-colbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 10px;
    min-width: 0;
}
.psd-colbar .psd-back-pill {
    display: inline-flex; /* la classe est display:none >1235 (filet console) */
    flex: none;
    margin: 0;
}
.psd-colbar-name {
    font-weight: 600;
    font-size: 15px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================================================================
   Retours utilisateur 12/07 (2e série) — grilles d'icônes & panneau
   de filtres
   ================================================================== */

/* Les menus d'icônes (Mon compte, Zone Équipe…) sont des ul de li
   FLOTTANTS à largeur fixe (cœur : float:left + width:114px) : dès
   qu'une étiquette fait deux lignes, le flottant suivant s'accroche
   dessus — trous et éléments décalés (screenshots utilisateur).
   Une vraie grille encaisse les hauteurs variables, partout. */
.TileNav > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.TileNav > ul > li {
    float: none;
    width: auto;
}

/* Panneau de filtres de la recherche (≤767) : boutons et liens
   flottaient à droite en quinconce — pile ordonnée, alignée à gauche,
   cibles confortables. */
@media (max-width: 767px) {
    /* l'empilement vertical vient de la grid du cœur
       (#simplesearchbuttons, global.css:4572) — ici : cibles 44px */
    #search-filters-panel a,
    #search-filters-panel button,
    #search-filters-panel input[type="submit"] {
        justify-content: flex-start;
        text-align: left;
        min-height: 44px;
    }
}

/* Fiche — barre retour / préc. / suiv. (itérée 3× le 12/07, état v3
   minimaliste) : retour TEXTE NU à gauche, pagination groupée à droite
   en glyphes 44px. S'applique aussi à la fiche en MODALE desktop. */
/* v2 (retour utilisateur) — pattern iOS : RETOUR seul à GAUCHE,
   pagination ← → GROUPÉE à droite ; boutons affirmés AU REPOS (fond
   blanc plein, pas un effet de survol) ; pas de chevron ajouté dans la
   pilule. L'ordre DOM du cœur est prev|up|next → réordonné en flex. */
.RecordHeader .backtoresults {
    display: flex;
    align-items: center;
    gap: 8px;
}
.RecordHeader .backtoresults .upLink {
    order: 1;
    margin-right: auto; /* pousse la pagination à droite */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px; /* arrondi de l'outline de focus */
    background: transparent;
    color: var(--colour-typography-700, #4a4c48);
    font-size: 24px; /* icône corner-up-left */
    line-height: 1;
    text-decoration: none;
}
.RecordHeader .backtoresults .prevLink,
.RecordHeader .backtoresults .nextLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0; /* le padding du cœur faisait un ovale 70×46 */
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    border-radius: 999px; /* arrondi de l'outline de focus */
    background: transparent;
    color: var(--colour-typography-700, #4a4c48);
    text-decoration: none;
}
.RecordHeader .backtoresults .prevLink { order: 2; }
.RecordHeader .backtoresults .nextLink { order: 3; }
/* en MODALE le cœur émet aussi agrandir/fermer (view.php:495-517) :
   sans order ils sautaient à l'extrême gauche */
.RecordHeader .backtoresults .maxLink { order: 4; }
.RecordHeader .backtoresults .closeLink { order: 5; }
@media (hover: hover) and (pointer: fine) {
    .RecordHeader .backtoresults .upLink:hover {
        color: var(--colour-brand-primary-dark);
    }
    .RecordHeader .backtoresults .prevLink:hover,
    .RecordHeader .backtoresults .nextLink:hover {
        color: var(--colour-brand-primary-dark); /* glyphe : teinte seule */
    }
}
/* ≤767 : la barre est FLOTTÉE à droite par le cœur — le titre s'enroule
   autour (« Accueil du » esseulé). Rangée pleine largeur sous le titre :
   ← à gauche, pilule au centre, → à droite. */
@media (max-width: 767px) {
    .RecordHeader .backtoresults {
        float: none;
        width: 100%;
        margin: 2px 0 10px;
    }
}

/* ============================================================
   D2 (12/07, planche menu validée) — nav desktop « tout en ligne ».
   MÉCANISME (aucun patch cœur) : le serveur rend les 6 liens en ligne ;
   c'est js/header.js:192-228 qui rétrograde dans le panneau ⋮ ceux qui
   dépassent la largeur disponible (promote/demote au resize, seuil 6 =
   notre nombre exact de liens → seule la LARGEUR décide). On libère donc
   la place en CSS pur et le cœur promeut tout seul ; le bouton ⋮ se
   masque de lui-même quand le panneau est vide (global.css:4712 :has()).
   ⚠ header.js:246 RÉSERVE 400px pour la recherche EN DUR (miroir du
   clamp cœur) quel que soit notre CSS : rétrécir la recherche n'élargit
   PAS le budget calculé, mais évite le débordement RÉEL de la rangée
   (le calcul du cœur ignore le padding du header). Budget à 1470px :
   liens ~580px ≤ 1470 − 3×gap − (logo + 400 + actions).
   Si la fenêtre est plus étroite (<≈1450), le cœur replie proprement les
   derniers liens dans ⋮ : dégradation officielle, rien n'est perdu.
   ============================================================ */
@media (min-width: 1366px) {
    #header-container {
        gap: 14px;
        padding: 16px 24px;
    }
    #header-container .logo {
        width: 170px;
    }
    /* réel 350px — le cœur dimensionne par flex-basis (flex: 0 1 400px),
       pas par width ; il en RÉSERVE 400 dans son calcul : marge de
       sécurité anti-débordement, la rangée réelle respire de 50px */
    #header-container .header-search-field {
        flex-basis: 350px;
    }
    #header-container > nav.primary-navigation > ul {
        gap: 8px;
    }
    #header-container > nav.primary-navigation > ul > li > a {
        font-size: 12.5px;
        white-space: nowrap; /* un lien qui s'enroule fausse la mesure du cœur */
    }
    #header-container .actions {
        gap: 4px;
    }
    #header-container .actions > .get-menu-content {
        width: 42px;
    }
    #header-container .actions .UploadButton {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================================
   M2 (12/07, planche menu validée) — le panneau du menu ☰ devient un
   TIROIR latéral gauche pleine hauteur. Scope : la nav MOBILE rendue
   dans .actions (header.php:339, force_overflow — masquée ≥1366 par le
   cœur) ; le panneau ⋮ de la nav desktop reste un menu déroulant.
   menu_overlay.js:112-134 pose top/left EN INLINE (et les re-pose au
   scroll/resize) → nos !important l'emportent (CSS !important > inline).
   Contenu (en-tête, sections, icônes, clones) : psdTiroir(), hooks/all.php.
   ============================================================ */
#header-container .actions > nav.primary-navigation ul.menu-panel {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    bottom: 0;
    height: auto; /* top+bottom portent la hauteur ; 100dvh + padding débordait (content-box) */
    max-height: none;
    box-sizing: border-box;
    width: min(320px, 86vw);
    margin: 0;
    border-radius: 0;
    padding: 0 10px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 48px rgba(24, 18, 8, .22);
}
@media (prefers-reduced-motion: no-preference) {
    #header-container .actions > nav.primary-navigation.is-open ul.menu-panel {
        animation: psd-tiroir-in .26s cubic-bezier(.32, .72, .33, 1);
    }
    @keyframes psd-tiroir-in {
        from { transform: translateX(-100%); }
    }
}
/* le cœur clone un bouton fermer générique dans la nav ≤767
   (menu_overlay.js:158) — le tiroir a le sien dans l'en-tête */
#header-container .actions > nav.primary-navigation [data-menu-trigger-close] {
    display: none;
}
/* en-tête du tiroir : logo + fermer. pointer-events:none sur le li
   (un clic quelconque DANS le panneau ferme le menu via le listener
   document du cœur, menu_overlay.js:54-68) ; seul ✕ reste cliquable
   et ferme par la même remontée de clic — zéro JS de fermeture. */
#header-container .actions > nav.primary-navigation .psd-tiroir-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 10px 2px 10px 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(60, 50, 30, .08);
    pointer-events: none;
}
#header-container .actions > nav.primary-navigation .psd-tiroir-tete img {
    height: 26px;
    width: auto;
}
/* ⚠ préfixe obligatoire : le cœur style les button de cette nav en
   (1,2,1)/(1,2,2) (global.css:4729/4736) — sans lui, background/color
   seraient des NO-OP (contre-expertise 12/07). :active explicitement
   neutralisé : le carré sombre du cœur (global.css:4741) est un état
   voulu pour ☰, pas pour un bouton fermer. */
#header-container .actions > nav.primary-navigation .psd-tiroir-fermer {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--colour-typography-600, #5c574b);
    cursor: pointer;
}
#header-container .actions > nav.primary-navigation .psd-tiroir-fermer:hover,
#header-container .actions > nav.primary-navigation .psd-tiroir-fermer:active {
    color: var(--colour-brand-primary-default);
    background: transparent;
}
/* intitulés de section : petites capitales grises, non cliquables
   (pointer-events:none — sinon un clic dessus fermerait le tiroir) */
#header-container .actions > nav.primary-navigation .psd-tiroir-section {
    pointer-events: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--colour-typography-400, #8d867a);
    padding: 18px 12px 4px;
    height: auto;
}
/* icônes d'entrée : gabarit fixe pour aligner les libellés.
   inline-block requis : dans les CLONES l'icône est imbriquée dans un
   span.wrap-icon (pas un flex item direct) — sans display, width et
   text-align seraient inertes (contre-expertise 12/07). */
#header-container .actions > nav.primary-navigation ul.menu-panel .psd-tiroir-ico {
    display: inline-block;
    font-size: 19px;
    width: 24px;
    flex: 0 0 24px;
    text-align: center;
    margin-right: 10px;
    color: var(--colour-typography-400, #8d867a);
}
#header-container .actions > nav.primary-navigation ul.menu-panel a.psd-active .psd-tiroir-ico {
    color: var(--colour-brand-primary-default);
}
/* clone « Mon compte » d'un utilisateur AVEC photo : l'ancre porte une
   img.ProfileImage au lieu d'un <i> — la règle de taille du cœur
   (global.css:4797) ne matche plus la classe d'ancre retirée : on
   contraint au gabarit des icônes (contre-expertise 12/07). */
#header-container .actions > nav.primary-navigation ul.menu-panel img.ProfileImage {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}