/* Saira Condensed et Source Serif 4, auto-hébergées, sous-ensemble latin
   uniquement. Servies depuis notre domaine : pas de CDN, pas de transfert
   d'IP. Remplacent Caveat, qui était la police de wireframe de la maquette
   (voir PROJECT.md) et n'a jamais été une proposition de production. */
@font-face {
    font-family: 'Saira Condensed';
    src: url('/visuals/fonts/saira-condensed-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Saira Condensed';
    src: url('/visuals/fonts/saira-condensed-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('/visuals/fonts/source-serif-4-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('/visuals/fonts/source-serif-4-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Discipline de palette, à tenir avant d'ajouter la moindre couleur :
     dominantes  ink et azzurro (leurs déclinaisons comptent pour une teinte)
     régulière   ivoire, et le filet qui en dérive
     sporadiques rosso et verde
   Le verde ne sert qu'au bilan, où l'opposition des deux colonnes porte du
   sens. Le rosso ne sert qu'à la mise en garde, à la colonne « points faibles »
   et au soulignage, une à deux fois par article. Sorti de là, un accent
   supplémentaire ne signale plus rien : il décore. */
:root {
    --sqa-azzurro: #008ce5;
    --sqa-azzurro-lien: #0a66a8;
    --sqa-azzurro-sombre: #024b7d;
    --sqa-ink: #14141f;
    --sqa-ink-doux: #4a4a58;
    --sqa-rosso: #cd212a;
    /* Le rosso du drapeau ne tient pas 4.5:1 en texte sur fond ink. Variante
       éclaircie réservée au texte posé sur sombre ; les aplats gardent le rosso. */
    --sqa-rosso-sur-sombre: #ff7a80;
    /* Mesuré sur l'aplat azzurro-sombre de la plaque, le cas le moins favorable :
       #5cc2ff n'y donnait que 4,61:1 en libellé de 12,8 px. Passer sous le seuil
       ne tenait qu'à une retouche du bleu de fond. */
    --sqa-azzurro-sur-sombre: #7fcbff;
    --sqa-verde: #008c45;
    --sqa-verde-sur-clair: #046b37;
    --sqa-ivoire: #f2efe6;
    --sqa-papier: #ffffff;
    --sqa-filet: #d8d4c8;
    --sqa-filet-sombre: rgba(255, 255, 255, 0.16);

    --sqa-titre: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
    --sqa-corps: 'Source Serif 4', Charter, 'Bitstream Charter', 'Sitka Text', Georgia,
        'Liberation Serif', 'Times New Roman', serif;
    --sqa-label: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, 'Cascadia Mono', Consolas,
        'Liberation Mono', monospace;

    /* Échelle portée depuis Homepage.dc.html. La maquette est dessinée dans une
       carte de 680 px, le site rend dans 1220 px : facteur 1,8 appliqué à
       chaque valeur. Les rapports entre blocs sont donc ceux de la maquette,
       et non une échelle fluide réinventée. */
    --sqa-t-label: 0.8rem;      /* maquette 7 px  */
    --sqa-t-menu: 0.9rem;       /* maquette 8 px  */
    --sqa-t-petit: 1rem;        /* maquette 9 px  */
    --sqa-t-corps: 1.1875rem;   /* 19 px : lecture longue, remonte de 17 px */
    --sqa-t-chapo: 1.35rem;     /* maquette 11 px */
    --sqa-t-h3: 1.55rem;        /* maquette 13 px */
    --sqa-t-h4: 1.65rem;        /* maquette 14 px */
    --sqa-t-mosa: 1.8rem;       /* maquette 16 px */
    --sqa-t-logo: 1.95rem;      /* maquette 22 px, resserre pour la lisibilité du bandeau nav */
    --sqa-t-h2: 2.85rem;        /* maquette 24 px */
    --sqa-t-h1: 3.2rem;
    --sqa-t-une: 4rem;          /* maquette 36 px */

    --sqa-e-1: 0.35rem;         /* maquette 3-4 px  */
    --sqa-e-2: 0.9rem;          /* maquette 8 px    */
    --sqa-e-3: 1.35rem;         /* maquette 12 px   */
    --sqa-e-4: 1.8rem;          /* maquette 16 px   */
    --sqa-e-5: 2.7rem;          /* maquette 24 px   */
    --sqa-e-6: 4rem;

    --sqa-angle: 2px;
    --sqa-relief: 0 1px 2px rgba(20, 20, 31, 0.09);
    --sqa-vif: 130ms ease-out;
    --sqa-posé: 260ms cubic-bezier(0.32, 0.72, 0.3, 1);

    --sqa-large: 1220px;
    --sqa-lecture: 41rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--sqa-papier);
    color: var(--sqa-ink);
    font-family: var(--sqa-corps);
    font-size: var(--sqa-t-corps);
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--sqa-azzurro-lien);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--sqa-azzurro-sombre);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Saira Condensed n'est chargée qu'en 600 et 800 : les titres tiennent le
   grade intermédiaire (600), les accents forts (logo, plaque de marque)
   montent en 800. Jamais 700, poids non chargé. */
h1,
h2,
h3,
h4 {
    font-family: var(--sqa-titre);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
}

:focus-visible {
    outline: 3px solid var(--sqa-azzurro);
    outline-offset: 2px;
}

::selection {
    background: var(--sqa-azzurro);
    color: #fff;
}

.sqa-hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sqa-evitement {
    position: absolute;
    top: -4rem;
    left: var(--sqa-e-3);
    z-index: 200;
    padding: var(--sqa-e-2) var(--sqa-e-3);
    background: var(--sqa-ink);
    color: #fff;
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-petit);
    transition: top var(--sqa-vif);
}

.sqa-evitement:focus {
    top: var(--sqa-e-2);
    color: #fff;
}

.sqa-tricolore {
    display: flex;
    height: 5px;
}

.sqa-tricolore span {
    flex: 1;
}

.sqa-tricolore span:nth-child(1) { background: var(--sqa-verde); }
.sqa-tricolore span:nth-child(2) { background: var(--sqa-papier); }
.sqa-tricolore span:nth-child(3) { background: var(--sqa-rosso); }

.sqa-cadre {
    width: 100%;
    max-width: var(--sqa-large);
    margin-inline: auto;
    padding-inline: var(--sqa-e-3);
}

.sqa-entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sqa-papier);
    border-bottom: 2px solid var(--sqa-ink);
    transition: background var(--sqa-posé), border-color var(--sqa-posé);
}

.sqa-entete[data-compacte='oui'] {
    background: var(--sqa-ink);
    border-bottom-color: var(--sqa-filet-sombre);
}

.sqa-entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sqa-e-4);
    padding-block: var(--sqa-e-2);
}

.sqa-entete__barre > .sqa-marque {
    flex: 0 0 auto;
}

.sqa-entete__barre > .sqa-menu {
    flex: 1 1 auto;
    min-width: 0;
}


.sqa-marque {
    display: inline-flex;
    align-items: center;
    gap: var(--sqa-e-2);
    font-family: var(--sqa-titre);
    font-size: var(--sqa-t-logo);
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--sqa-ink);
    text-decoration: none;
    transition: color var(--sqa-vif);
}

/* Le logo est décoratif : le nom du site est déjà lisible juste à côté,
   donc alt vide plutôt qu'une description redondante au lecteur d'écran. */
.sqa-marque__logo {
    width: auto;
    height: 2.4rem;
    flex-shrink: 0;
}

.sqa-marque b {
    color: var(--sqa-azzurro);
    font-weight: inherit;
}

.sqa-entete[data-compacte='oui'] .sqa-marque {
    color: var(--sqa-papier);
}

/* `hidden` doit toujours l'emporter : sans ça, une règle display en media query
   réaffiche un panneau que le JS croit fermé. */
[hidden] {
    display: none !important;
}

.sqa-menu {
    display: none;
}

.sqa-menu-poche {
    padding-bottom: var(--sqa-e-3);
    border-top: 1px solid var(--sqa-filet);
}

.sqa-menu-poche a {
    color: var(--sqa-ink);
}

.sqa-entete[data-compacte='oui'] .sqa-menu-poche {
    border-top-color: var(--sqa-filet-sombre);
}

.sqa-entete[data-compacte='oui'] .sqa-menu-poche a {
    color: rgba(255, 255, 255, 0.85);
}

/* Le menu occupe l'espace libre entre le logo et les actions : on centre les
   entrées dedans plutôt que de les laisser buter contre la loupe. */
.sqa-menu__liste {
    display: flex;
    justify-content: center;
    gap: var(--sqa-e-3);
    list-style: none;
}

.sqa-menu__liste > li {
    white-space: nowrap;
}

.sqa-menu__lien {
    display: block;
    padding-block: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sqa-ink-doux);
    text-decoration: none;
    background: none;
    transition: color var(--sqa-vif);
}

.sqa-entete[data-compacte='oui'] .sqa-menu__lien {
    color: rgba(255, 255, 255, 0.72);
}

.sqa-menu__lien:hover,
.sqa-menu__lien[aria-expanded='true'] {
    color: var(--sqa-azzurro);
}

.sqa-rayon {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--sqa-papier);
    border-top: 2px solid var(--sqa-azzurro);
    border-bottom: 1px solid var(--sqa-filet);
    box-shadow: var(--sqa-relief);
}

.sqa-rayon[data-ouvert='oui'] {
    display: block;
}

.sqa-rayon__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sqa-e-4);
    padding-block: var(--sqa-e-3);
}

.sqa-rayon__titre {
    margin-bottom: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sqa-azzurro-lien);
}

.sqa-rayon__liste {
    list-style: none;
}

.sqa-rayon__liste a {
    display: block;
    padding-block: var(--sqa-e-1);
    font-size: var(--sqa-t-petit);
    color: var(--sqa-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sqa-filet);
    transition: color var(--sqa-vif);
}

.sqa-rayon__liste a:hover {
    color: var(--sqa-azzurro-lien);
}

.sqa-recherche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--sqa-ink);
    transition: color var(--sqa-vif);
}

.sqa-recherche:hover {
    color: var(--sqa-azzurro-lien);
}

.sqa-entete[data-compacte='oui'] .sqa-recherche {
    color: var(--sqa-papier);
}

.sqa-abo {
    padding: var(--sqa-e-2) var(--sqa-e-3);
    background: var(--sqa-rosso);
    color: var(--sqa-papier);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--sqa-vif);
}

.sqa-abo:hover {
    background: #a41a21;
    color: var(--sqa-papier);
}

.sqa-bascule {
    display: inline-flex;
    align-items: center;
    gap: var(--sqa-e-1);
    padding: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
}

.sqa-entete[data-compacte='oui'] .sqa-bascule {
    color: var(--sqa-papier);
}

.sqa-une {
    display: grid;
    border-bottom: 2px solid var(--sqa-ink);
}

.sqa-une__vedette {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--sqa-e-2);
    min-height: 31.5rem;
    padding: var(--sqa-e-5) var(--sqa-e-4);
    background: var(--sqa-ink);
    color: var(--sqa-papier);
}

.sqa-une__titre {
    font-size: var(--sqa-t-une);
    color: var(--sqa-papier);
    text-transform: uppercase;
    letter-spacing: -0.005em;
}

.sqa-une__titre a {
    color: inherit;
    text-decoration: none;
}

.sqa-une__titre a:hover {
    color: var(--sqa-azzurro);
}

.sqa-une__signature {
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-petit);
    color: rgba(255, 255, 255, 0.66);
}

/* Le lien du titre est étiré sur tout le bloc, et l'appel « Lire l'article » est
   dessiné en pseudo-élément du bloc, placé en dernier par `order`.
   Résultat : un seul lien vers l'article, ancre = le titre exactement, et la
   totalité de la une reste cliquable comme sur la maquette. */
.sqa-une__titre a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Scopé à `.sqa-une` : les pages marque réutilisent `.sqa-une__vedette` comme
   en-tête et ne doivent pas hériter de l'appel à l'action. */
.sqa-une .sqa-une__vedette::after {
    content: 'Lire l\'article \2192';
    order: 9;
    width: max-content;
    margin-top: var(--sqa-e-2);
    padding: var(--sqa-e-2) var(--sqa-e-3);
    border: 2px solid var(--sqa-papier);
    color: var(--sqa-papier);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background var(--sqa-vif), color var(--sqa-vif);
}

.sqa-une .sqa-une__vedette:hover::after,
.sqa-une .sqa-une__vedette:focus-within::after {
    background: var(--sqa-papier);
    color: var(--sqa-ink);
}

.sqa-une__seconds {
    display: flex;
    flex-direction: column;
    background: var(--sqa-papier);
}

.sqa-brève {
    display: flex;
    gap: var(--sqa-e-3);
    padding: var(--sqa-e-3);
    border-bottom: 1px solid var(--sqa-filet);
    transition: background var(--sqa-vif);
}

.sqa-brève:last-child {
    border-bottom: 0;
}

.sqa-brève:hover {
    background: var(--sqa-ivoire);
}

.sqa-brève__vignette {
    flex: 0 0 7.9rem;
    aspect-ratio: 70 / 52;
    object-fit: cover;
    background: var(--sqa-ivoire);
}

.sqa-brève__titre {
    margin-block: var(--sqa-e-1);
    font-size: var(--sqa-t-h4);
    font-weight: 600;
    line-height: 1.25;
}

.sqa-brève__titre a {
    color: var(--sqa-ink);
    text-decoration: none;
}

.sqa-brève__titre a:hover {
    color: var(--sqa-azzurro-lien);
}

.sqa-etiquette {
    display: inline-block;
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sqa-azzurro-lien);
}

.sqa-etiquette--fort {
    color: var(--sqa-rosso);
}

.sqa-mosaique__legende .sqa-etiquette--fort,
.sqa-une__vedette .sqa-etiquette--fort {
    color: var(--sqa-rosso-sur-sombre);
}

.sqa-etiquette--claire {
    color: var(--sqa-azzurro);
}

.sqa-date {
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    color: var(--sqa-ink-doux);
}

.sqa-section {
    padding-block: var(--sqa-e-5);
}


.sqa-section--ivoire {
    background: var(--sqa-ivoire);
}

.sqa-section__entete {
    display: flex;
    align-items: baseline;
    gap: var(--sqa-e-3);
    margin-bottom: var(--sqa-e-3);
}

/* En capitales, un titre paraît plus gros qu'il n'est : sans cette réduction
   il rivalisait avec le H1 des pages marque et modèle. */
.sqa-section__titre {
    font-size: var(--sqa-t-h2);
    text-transform: uppercase;
}

.sqa-portail ~ * .sqa-section__titre,
.sqa-article ~ * .sqa-section__titre {
    font-size: var(--sqa-t-mosa);
}

/* Filet court posé à droite du titre, pas une règle pleine largeur. */
.sqa-section__filet {
    width: 6.75rem;
    height: 3px;
    background: var(--sqa-azzurro);
}

.sqa-mosaique {
    display: grid;
    gap: var(--sqa-e-3);
}

.sqa-mosaique__phare {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 22.5rem;
    background: var(--sqa-ink);
}

.sqa-mosaique__phare img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sqa-mosaique__legende {
    position: relative;
    width: 100%;
    padding: var(--sqa-e-3);
    background: rgba(20, 20, 31, 0.82);
    color: var(--sqa-papier);
}

.sqa-mosaique__legende h3 {
    margin-top: var(--sqa-e-1);
    font-size: var(--sqa-t-mosa);
}

/* Les deux vignettes de droite portent un titre court en bas à gauche,
   sur un fond plein étroit plutôt qu'un voile sur toute la largeur. */
.sqa-mosaique__cote .sqa-mosaique__legende {
    width: auto;
    margin: var(--sqa-e-2);
    padding: var(--sqa-e-2);
}

.sqa-mosaique__cote .sqa-mosaique__legende h3 {
    margin-top: 0;
    font-family: var(--sqa-corps);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.sqa-mosaique__legende a {
    color: var(--sqa-papier);
    text-decoration: none;
}

.sqa-mosaique__legende a:hover {
    text-decoration: underline;
}

.sqa-mosaique__cote {
    display: grid;
    gap: var(--sqa-e-3);
}

.sqa-grille-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--sqa-e-5) var(--sqa-e-4);
    list-style: none;
}

.sqa-fiche__image {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: var(--sqa-ivoire);
    margin-bottom: var(--sqa-e-2);
}

.sqa-fiche__titre {
    margin-block: var(--sqa-e-1);
    font-size: var(--sqa-t-h3);
    font-weight: 600;
    line-height: 1.22;
}

.sqa-fiche__titre a {
    color: var(--sqa-ink);
    text-decoration: none;
}

.sqa-fiche__titre a:hover {
    color: var(--sqa-azzurro-lien);
    text-decoration: underline;
}

.sqa-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sqa-e-3);
    margin-bottom: var(--sqa-e-3);
    padding: 0;
    border-bottom: 1px solid var(--sqa-filet);
    list-style: none;
}

.sqa-filtres__bouton {
    padding-bottom: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sqa-ink-doux);
    border-bottom: 2px solid transparent;
    transition: color var(--sqa-vif), border-color var(--sqa-vif);
}

.sqa-filtres__bouton:hover {
    color: var(--sqa-azzurro-lien);
}

.sqa-filtres__bouton[aria-pressed='true'] {
    color: var(--sqa-ink);
    border-bottom-color: var(--sqa-azzurro);
}

.sqa-alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sqa-e-1);
    margin-bottom: var(--sqa-e-3);
    list-style: none;
}

.sqa-alphabet a,
.sqa-alphabet span {
    display: block;
    min-width: 2.2rem;
    padding: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.sqa-alphabet a {
    color: var(--sqa-ink);
    transition: border-color var(--sqa-vif), color var(--sqa-vif);
}

.sqa-alphabet a:hover {
    color: var(--sqa-azzurro-lien);
    border-bottom-color: var(--sqa-azzurro);
}

/* Les lettres sans marque restent lisibles : elles portent l'information
   « cette lettre est vide », donc elles doivent passer le contraste. */
.sqa-alphabet span {
    color: #6f6b5e;
}

.sqa-marques {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--sqa-e-3);
    list-style: none;
}

.sqa-vignette-marque {
    display: block;
    height: 100%;
    padding: var(--sqa-e-3) var(--sqa-e-2);
    text-align: center;
    text-decoration: none;
    background: var(--sqa-papier);
    border: 1px solid var(--sqa-filet);
    transition: border-color var(--sqa-vif), background var(--sqa-vif);
}

.sqa-vignette-marque:hover {
    border-color: var(--sqa-azzurro);
    background: var(--sqa-ivoire);
}

.sqa-vignette-marque__ecusson {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--sqa-e-2);
    border: 2px solid var(--sqa-filet);
    border-radius: 50%;
    color: var(--sqa-ink-doux);
    font-family: var(--sqa-titre);
    font-size: 0.9rem;
    font-weight: 800;
    transition: border-color var(--sqa-vif), color var(--sqa-vif);
}

.sqa-vignette-marque:hover .sqa-vignette-marque__ecusson {
    border-color: var(--sqa-azzurro);
    color: var(--sqa-azzurro-lien);
}

.sqa-vignette-marque__nom {
    display: block;
    font-family: var(--sqa-titre);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sqa-ink);
}

.sqa-vignette-marque__meta {
    display: block;
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: var(--sqa-ink-doux);
}

/* Ouverture de page pour marque et modèle. Même bande sombre que la une, mais
   dimensionnée pour un en-tête de document : ni la hauteur d'un hero d'accueil,
   ni la bande écrasée que produisait un override inline. */
.sqa-portail {
    background: var(--sqa-ink);
    color: var(--sqa-papier);
    padding-block: var(--sqa-e-5);
}

.sqa-portail__contenu {
    max-width: var(--sqa-large);
}

.sqa-portail__titre {
    margin-block: var(--sqa-e-2);
    font-size: var(--sqa-t-une);
    color: var(--sqa-papier);
    text-transform: uppercase;
}

.sqa-portail__chapo {
    max-width: 62ch;
    font-size: var(--sqa-t-chapo);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
}

/* Vignette de modèle, distincte de la vignette de marque : filet azzurro à
   gauche et alignement à gauche, pour qu'on ne confonde pas un modèle de la
   marque courante avec une marque concurrente dans la même page. */
.sqa-modeles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--sqa-e-3);
    list-style: none;
}

.sqa-vignette-modele {
    display: block;
    height: 100%;
    padding: var(--sqa-e-3);
    text-decoration: none;
    background: var(--sqa-papier);
    border: 1px solid var(--sqa-filet);
    border-left: 3px solid var(--sqa-azzurro);
    transition: border-color var(--sqa-vif), background var(--sqa-vif);
}

.sqa-vignette-modele:hover {
    border-color: var(--sqa-azzurro);
    background: var(--sqa-ivoire);
}

.sqa-vignette-modele__nom {
    display: block;
    font-family: var(--sqa-titre);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--sqa-ink);
}

.sqa-vignette-modele__meta {
    display: block;
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    color: var(--sqa-ink-doux);
}

.sqa-outils {
    display: grid;
    gap: var(--sqa-e-3);
}

.sqa-outil {
    padding: var(--sqa-e-3);
    background: var(--sqa-papier);
    border: 1px solid var(--sqa-filet);
}

.sqa-outil__titre {
    margin-bottom: var(--sqa-e-4);
    font-family: var(--sqa-label);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sqa-outil__champs {
    display: flex;
    flex-direction: column;
    gap: var(--sqa-e-2);
}

.sqa-outil__separateur {
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-petit);
    font-weight: 700;
    text-align: center;
    color: var(--sqa-ink-doux);
}

.sqa-outil__action {
    width: 100%;
    margin-top: var(--sqa-e-1);
    text-align: center;
}

.sqa-outil__sortie {
    margin-top: var(--sqa-e-3);
    padding: var(--sqa-e-2);
    background: var(--sqa-ivoire);
    border: 1px solid var(--sqa-filet);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-petit);
    font-variant-numeric: tabular-nums;
}

.sqa-outil__sortie:empty {
    display: none;
}

.sqa-champ {
    display: block;
    margin-bottom: var(--sqa-e-3);
}

.sqa-champ__label {
    display: block;
    margin-bottom: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sqa-ink-doux);
}

.sqa-champ__saisie {
    width: 100%;
    min-height: 3.15rem;
    padding: var(--sqa-e-2) var(--sqa-e-3);
    background: var(--sqa-papier);
    border: 1px solid var(--sqa-filet);
    border-radius: var(--sqa-angle);
    transition: border-color var(--sqa-vif);
}

.sqa-champ__saisie:focus {
    border-color: var(--sqa-azzurro);
}

.sqa-champ__saisie[aria-invalid='true'] {
    border-color: var(--sqa-rosso);
}

.sqa-champ__erreur {
    display: block;
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: var(--sqa-rosso);
}

.sqa-bouton {
    display: inline-block;
    padding: var(--sqa-e-3) var(--sqa-e-5);
    background: var(--sqa-azzurro-lien);
    color: var(--sqa-papier);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-menu);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    border-radius: var(--sqa-angle);
    transition: background var(--sqa-vif);
}

.sqa-bouton:hover {
    background: var(--sqa-azzurro-sombre);
    color: var(--sqa-papier);
}



.sqa-avis {
    padding: var(--sqa-e-3);
    margin-bottom: var(--sqa-e-3);
    border: 1px solid var(--sqa-filet);
    background: var(--sqa-ivoire);
}

.sqa-avis--succes {
    border-color: var(--sqa-verde);
}

.sqa-avis--erreur {
    border-color: var(--sqa-rosso);
}

.sqa-article {
    max-width: var(--sqa-lecture);
    margin-inline: auto;
    padding-block: var(--sqa-e-5);
}

.sqa-article__entete {
    margin-bottom: var(--sqa-e-4);
}

.sqa-article__titre {
    margin-block: var(--sqa-e-2);
    font-size: calc(var(--sqa-t-h1) * 1.12);
    text-transform: uppercase;
}

.sqa-article__chapo {
    font-size: var(--sqa-t-chapo);
    line-height: 1.5;
    color: var(--sqa-ink-doux);
}

.sqa-article__signature {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sqa-e-2);
    padding-top: var(--sqa-e-2);
    border-top: 1px solid var(--sqa-filet);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: var(--sqa-ink-doux);
}

.sqa-article__signature--maj {
    margin-top: var(--sqa-e-5);
}

/* Image de tête. Le sélecteur d'enfant direct la distingue des figures posées
   dans le corps du texte, qui ne prennent pas la même respiration. */
.sqa-article > figure {
    margin-block: var(--sqa-e-6) var(--sqa-e-5);
}

.sqa-article img,
.sqa-corps img {
    display: block;
    width: 100%;
    height: auto;
}

.sqa-article > figure figcaption {
    margin-top: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    line-height: 1.5;
    color: var(--sqa-ink-doux);
}

.sqa-article__essentiel {
    margin-top: var(--sqa-e-4);
}

.sqa-article__essentiel ul {
    padding-left: var(--sqa-e-3);
    list-style: square;
}

.sqa-article__essentiel li + li {
    margin-top: var(--sqa-e-1);
}

.sqa-sommaire {
    margin-top: var(--sqa-e-4);
    padding: var(--sqa-e-3);
    border-top: 1px solid var(--sqa-filet);
    border-bottom: 1px solid var(--sqa-filet);
}

.sqa-sommaire ol {
    padding-left: var(--sqa-e-3);
    font-size: var(--sqa-t-petit);
}

.sqa-sommaire li + li {
    margin-top: var(--sqa-e-1);
}

/* Respiration entre blocs du corps. Volontairement plus large que l'ecart
   courant : les paragraphes sont courts (4 a 5 lignes max), c'est le blanc
   entre eux qui donne le rythme de lecture et rend le texte chunkable. */
.sqa-corps > * + * {
    margin-top: var(--sqa-e-5);
}

.sqa-corps p {
    line-height: 1.78;
}

/* Les titres du corps sont agrandis par multiplicateur et non par valeur fixe :
   l'échelle mobile redéfinit les tokens, une taille en dur y resterait celle du
   grand écran. La marge basse dépasse l'écart courant, sinon la fusion des
   marges la ramènerait à cet écart et le titre resterait collé à son texte. */
.sqa-corps h2 {
    margin-block: var(--sqa-e-6) var(--sqa-e-5);
    font-size: calc(var(--sqa-t-h2) * 1.1);
}

.sqa-corps h3 {
    margin-block: var(--sqa-e-5) var(--sqa-e-3);
    font-size: calc(var(--sqa-t-h3) * 1.2);
    font-weight: 600;
}

.sqa-corps ul,
.sqa-corps ol {
    padding-left: var(--sqa-e-3);
}

.sqa-corps li {
    margin-bottom: var(--sqa-e-1);
}

.sqa-corps ul { list-style: square; }
.sqa-corps ol { list-style: decimal; }

.sqa-corps blockquote {
    padding: var(--sqa-e-3);
    background: var(--sqa-ivoire);
    font-size: var(--sqa-t-chapo);
    font-style: italic;
}

.sqa-corps figure figcaption {
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: var(--sqa-ink-doux);
}

.sqa-tableau-cadre {
    overflow-x: auto;
}

.sqa-corps table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sqa-t-petit);
}

.sqa-corps th,
.sqa-corps td {
    padding: var(--sqa-e-2);
    text-align: left;
    border-bottom: 1px solid var(--sqa-filet);
}

.sqa-corps th {
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sqa-corps td {
    font-variant-numeric: tabular-nums;
}

/* Alternance de fond : sur un tableau de caractéristiques à 5 colonnes, l'œil
   perd sa ligne sans elle. */
.sqa-corps tbody tr:nth-child(even) {
    background: var(--sqa-ivoire);
}

/* Surlignage d'un chiffre ou d'un verdict dans le fil du texte. Le `mark` natif
   est jaune système : il jure avec la palette et ne se voit pas à l'impression. */
.sqa-corps mark {
    padding: 0.05em 0.2em;
    background: rgba(0, 140, 229, 0.16);
    color: inherit;
}

.sqa-corps blockquote cite {
    display: block;
    margin-top: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--sqa-ink-doux);
}

/* ── BANQUE DE COMPOSANTS ÉDITORIAUX ──────────────────────────────────────
   Ces classes s'utilisent dans le corps des contenus, pas dans les gabarits.
   Un site sans contenu publié les ferait donc apparaître comme mortes : le
   contrôle de code mort les ignore jusqu'au marqueur de fermeture. */

/* Encadré — remarque, mise en garde, verdict. */
.sqa-encadre {
    padding: var(--sqa-e-3);
    background: var(--sqa-ivoire);
    border: 1px solid var(--sqa-filet);
    border-left: 4px solid var(--sqa-azzurro);
}

.sqa-encadre__titre {
    margin-bottom: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sqa-azzurro-lien);
}

.sqa-encadre--attention {
    border-left-color: var(--sqa-rosso);
}

.sqa-encadre--attention .sqa-encadre__titre {
    color: var(--sqa-rosso);
}

/* Le verdict prend l'encre et non le verde : c'est le ton de la conclusion,
   pas celui d'un feu vert. Le verde reste réservé au bilan, seul endroit où
   l'opposition de deux couleurs porte du sens. */
.sqa-encadre--verdict {
    border-left-color: var(--sqa-ink);
}

.sqa-encadre--verdict .sqa-encadre__titre {
    color: var(--sqa-ink);
}

/* Chiffre clé — rupture pleine largeur sur fond sombre. */
.sqa-chiffre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sqa-e-2) var(--sqa-e-3);
    padding: var(--sqa-e-4) var(--sqa-e-3);
    background: var(--sqa-ink);
    border-top: 3px solid var(--sqa-azzurro);
    color: rgba(255, 255, 255, 0.82);
}

.sqa-chiffre__valeur {
    font-family: var(--sqa-titre);
    font-size: var(--sqa-t-une);
    font-weight: 800;
    line-height: 0.9;
    color: var(--sqa-azzurro-sur-sombre);
}

.sqa-chiffre__texte {
    flex: 1 1 14rem;
    font-size: var(--sqa-t-petit);
}

.sqa-chiffre__texte strong {
    color: var(--sqa-papier);
}

/* Bilan — points forts contre points faibles. Une seule colonne tant que la
   place manque : deux colonnes de 3 mots sont illisibles sur téléphone. */
.sqa-bilan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sqa-e-2);
}

.sqa-bilan__col {
    padding: var(--sqa-e-3);
    background: var(--sqa-ivoire);
    border-top: 3px solid var(--sqa-filet);
}

.sqa-bilan__col--pour {
    border-top-color: var(--sqa-verde);
}

.sqa-bilan__col--contre {
    border-top-color: var(--sqa-rosso);
}

.sqa-bilan__titre {
    margin-bottom: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sqa-bilan__col--pour .sqa-bilan__titre {
    color: var(--sqa-verde-sur-clair);
}

.sqa-bilan__col--contre .sqa-bilan__titre {
    color: var(--sqa-rosso);
}

/* À retenir — synthèse d'une phrase entre deux paragraphes. */
.sqa-retenir {
    padding-left: var(--sqa-e-3);
    border-left: 3px solid var(--sqa-azzurro);
    font-size: var(--sqa-t-chapo);
}

/* Exergue — la rupture la plus forte : reprend la manuscrite des titres.
   Réservée à une phrase par article, sinon l'effet s'annule. */
.sqa-exergue {
    margin-block: var(--sqa-e-5);
    padding-block: var(--sqa-e-3);
    border-top: 1px solid var(--sqa-filet);
    border-bottom: 1px solid var(--sqa-filet);
    font-family: var(--sqa-titre);
    font-size: var(--sqa-t-h2);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--sqa-azzurro-sombre);
}

/* Fiche technique — couples libellé/valeur alignés. */
.sqa-fiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--sqa-filet);
    border: 1px solid var(--sqa-filet);
}

.sqa-fiche__ligne {
    padding: var(--sqa-e-2);
    background: var(--sqa-papier);
}

.sqa-fiche__libelle {
    display: block;
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sqa-ink-doux);
}

.sqa-fiche__valeur {
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Contrôles — liste de vérifications. */
.sqa-controles {
    padding-left: 0;
    list-style: none;
}

.sqa-controles li {
    position: relative;
    padding-left: var(--sqa-e-4);
}

.sqa-controles li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--sqa-azzurro-lien);
}

/* Étapes — procédure numérotée. Le compteur porte la numérotation pour que
   le repère visuel survive à un `list-style` retiré. */
.sqa-etapes {
    padding-left: 0;
    list-style: none;
    counter-reset: sqa-etape;
}

.sqa-etapes li {
    position: relative;
    padding-left: var(--sqa-e-5);
    counter-increment: sqa-etape;
}

.sqa-etapes li::before {
    content: counter(sqa-etape);
    position: absolute;
    left: 0;
    top: 0.1em;
    min-width: 1.6rem;
    padding: 0.05rem 0.35rem;
    background: var(--sqa-azzurro-sombre);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    text-align: center;
    color: var(--sqa-papier);
}

/* Plaque de marque — le seul bloc du corps qui quitte la colonne de lecture et
   qui prend le bleu du site en aplat. Il réunit le lien remontant vers la
   marque et ses dernières publications : deux blocs voisins auraient été lus
   comme du remplissage. Les sélecteurs sont qualifiés par `.sqa-plaque` parce
   que `.sqa-corps ul` et `.sqa-corps li` sont plus spécifiques qu'une classe
   seule et reprendraient la main sur la liste. */
.sqa-plaque {
    display: grid;
    gap: var(--sqa-e-4);
    padding: var(--sqa-e-4) var(--sqa-e-3);
    background: var(--sqa-azzurro-sombre);
    color: rgba(255, 255, 255, 0.86);
}

.sqa-plaque__sur {
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sqa-azzurro-sur-sombre);
}

.sqa-plaque__nom {
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-titre);
    font-size: var(--sqa-t-h2);
    font-weight: 600;
    line-height: 1;
    color: var(--sqa-papier);
}

.sqa-plaque__etat {
    margin-top: var(--sqa-e-1);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    letter-spacing: 0.06em;
    color: var(--sqa-azzurro-sur-sombre);
}

.sqa-plaque__accroche {
    margin-top: var(--sqa-e-2);
    font-size: var(--sqa-t-petit);
}

.sqa-plaque__lien {
    display: inline-block;
    margin-top: var(--sqa-e-3);
    padding: var(--sqa-e-1) var(--sqa-e-2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sqa-papier);
    transition: background var(--sqa-vif), border-color var(--sqa-vif);
}

.sqa-plaque__lien:hover,
.sqa-plaque__lien:focus-visible {
    background: var(--sqa-papier);
    border-color: var(--sqa-papier);
    color: var(--sqa-azzurro-sombre);
}

.sqa-plaque .sqa-plaque__liste {
    padding-left: 0;
    list-style: none;
}

.sqa-plaque .sqa-plaque__liste li {
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.sqa-plaque .sqa-plaque__liste a {
    display: block;
    padding-block: var(--sqa-e-2);
    text-decoration: none;
    color: inherit;
}

.sqa-plaque__rubrique {
    display: block;
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sqa-azzurro-sur-sombre);
}

.sqa-plaque__titre {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--sqa-t-petit);
    color: var(--sqa-papier);
}

.sqa-plaque .sqa-plaque__liste a:hover .sqa-plaque__titre,
.sqa-plaque .sqa-plaque__liste a:focus-visible .sqa-plaque__titre {
    text-decoration: underline;
    text-decoration-color: var(--sqa-azzurro-sur-sombre);
    text-underline-offset: 0.16em;
}

/* Annotation de marge — repère technique tenu hors du fil de lecture, comme
   dans un manuel d'atelier. Dans le flux tant que la place manque : en
   dessous de 64rem, la marge extérieure n'existe pas. */
.sqa-note {
    padding-left: var(--sqa-e-2);
    border-left: 2px solid var(--sqa-filet);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    line-height: 1.5;
    color: var(--sqa-ink-doux);
}

/* Soulignage — trait de marqueur sous une expression décisive. */
.sqa-souligne {
    text-decoration: underline;
    text-decoration-color: var(--sqa-rosso);
    text-decoration-thickness: 0.16em;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: none;
}

/* ── FIN BANQUE ─────────────────────────────────────────────────────────── */

.sqa-pied {
    padding-block: var(--sqa-e-4);
    background: var(--sqa-ink);
    color: rgba(255, 255, 255, 0.78);
}

.sqa-pied a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color var(--sqa-vif);
}

.sqa-pied a:hover {
    color: var(--sqa-azzurro);
    text-decoration: underline;
}

.sqa-pied__grille {
    display: grid;
    gap: var(--sqa-e-4);
    margin-bottom: var(--sqa-e-4);
}

/* Le seul filet latéral coloré du site. Il porte le verde du tricolore sur le
   bloc d'identité : c'est un signe de marque, pas un accent décoratif de carte
   (le motif que la règle anti-fingerprint vise). */
.sqa-pied__identite {
    padding-left: var(--sqa-e-3);
    border-left: 4px solid var(--sqa-verde);
}

.sqa-pied__titre {
    margin-bottom: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.sqa-pied__liste {
    list-style: none;
    line-height: 1.8;
    font-size: var(--sqa-t-petit);
}

/* Maquette : bloc de marque du pied à 16 px contre 22 px en navigation. */
.sqa-pied .sqa-marque {
    font-size: 1.8rem;
}

.sqa-pied .sqa-marque__logo {
    height: 2.2rem;
}

.sqa-pied__mention {
    padding-top: var(--sqa-e-3);
    border-top: 1px solid var(--sqa-filet-sombre);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: rgba(255, 255, 255, 0.62);
}

.sqa-fil {
    padding-block: var(--sqa-e-2);
    font-family: var(--sqa-label);
    font-size: var(--sqa-t-label);
    color: var(--sqa-ink-doux);
}

.sqa-fil ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sqa-e-1);
    list-style: none;
}

.sqa-fil li:not(:last-child)::after {
    content: '›';
    margin-left: var(--sqa-e-1);
    color: var(--sqa-filet);
}

@media (min-width: 48rem) {
    .sqa-menu {
        display: block;
    }

    .sqa-bascule,
    .sqa-menu-poche {
        display: none;
    }

    .sqa-une {
        grid-template-columns: 55fr 45fr;
    }

    .sqa-une__seconds {
        border-left: 1px solid var(--sqa-filet);
    }

    .sqa-mosaique {
        grid-template-columns: 3fr 2fr;
    }

    .sqa-outils {
        grid-template-columns: repeat(2, 1fr);
    }

    .sqa-pied__grille {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }

    .sqa-article__chapo {
        font-size: 1.3rem;
    }
}

@media (min-width: 64rem) {
    .sqa-cadre {
        padding-inline: var(--sqa-e-4);
    }

    .sqa-une__vedette {
        padding: var(--sqa-e-5) var(--sqa-e-4);
    }

    /* La plaque déborde la colonne de lecture des deux côtés : c'est ce
       débordement qui la sort du fil de l'article. Le conteneur fait 1220 px
       pour 41rem de texte, la marge disponible absorbe les 5rem. */
    .sqa-plaque {
        grid-template-columns: 1fr 1.15fr;
        margin-inline: -5rem;
        padding: var(--sqa-e-5) var(--sqa-e-4);
    }

    /* L'annotation rejoint la marge extérieure. Le flottant laisse le texte
       reprendre sa place tout seul sous la note, sans réserver de gouttière. */
    .sqa-note {
        float: right;
        width: 11rem;
        margin-right: -13rem;
        margin-left: var(--sqa-e-3);
        padding-left: 0;
        border-left: 0;
        border-top: 2px solid var(--sqa-filet);
        padding-top: var(--sqa-e-1);
    }
}

/* Bloc mobile placé après les règles de base : à spécificité égale, c'est la
   dernière déclaration qui gagne. Le mettre plus haut le rendait inopérant.
   Sous le point de bascule, la barre ne garde que le logo, le nom et le menu. */
@media (max-width: 47.99rem) {
    /* L'échelle portée de la maquette est calibrée pour 1220 px. Sur 375 px
       elle est intenable : le titre de une occuperait tout l'écran. On revient
       au facteur mobile, en gardant les mêmes rapports entre niveaux. */
    :root {
        --sqa-t-une: 2.4rem;
        --sqa-t-h1: 2rem;
        --sqa-t-h2: 1.75rem;
        --sqa-t-mosa: 1.35rem;
        --sqa-t-h4: 1.3rem;
        --sqa-t-h3: 1.25rem;
    }

    .sqa-une__vedette {
        min-height: auto;
        padding: var(--sqa-e-5) var(--sqa-e-3);
    }

    .sqa-portail {
        padding-block: var(--sqa-e-4);
    }

    .sqa-mosaique__phare {
        min-height: 14rem;
    }

    .sqa-recherche,
    .sqa-entete__barre .sqa-abo {
        display: none;
    }

    .sqa-marque {
        gap: var(--sqa-e-1);
        font-size: 1rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .sqa-marque__logo {
        height: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .sqa-entete,
    .sqa-pied,
    .sqa-filtres,
    .sqa-abo {
        display: none;
    }

    body {
        font-size: 11pt;
    }
}