/* ══════════════════════════════════════════════════════════════════════════
   PAGES LÉGALES — feuille commune à /legale et /confidentialite

   MÊME LANGAGE VISUEL QUE L'ACCUEIL, et c'est une décision, pas un hasard :
   le bandeau et le pied de page du site viennent tous deux de la maquette
   « Accueil CBR-CLOUD » (includes/header.css, pied-page.css). Une page coincée
   entre ces deux-là doit parler leur langue, sinon elle a l'air d'appartenir à
   un autre site — ce qui était exactement le cas de l'ancienne /legale : fond
   sombre, effet de verre, particules animées, sous un bandeau et au-dessus
   d'un pied clairs.

   Les valeurs reprises d'accueil-style.css, à l'identique :

       corps            DM Sans 400/500/700, 16 px, #4C5F7D
       titres           Poppins 600/700, #0B1F44, letter-spacing -0.02em
       bleu             #1257F0 · survol #0B44C4 · sur sombre #5B9BFF
       héros            linear-gradient(155deg, #0A1B3D, #071227, #050E1E)
       fonds doux       #F7FAFD · #F0F5FC
       filets           #DCE6F2 · #E8EEF6
       texte sur sombre #DCE6F5 (fort) · #B7C6DE (courant) · #8FA3C2 (faible)

   Tout est préfixé `lg-` et vit sous `.lg` : ces pages sont servies dans le
   gabarit public, à côté de Bootstrap 3, z-style.css, elements.css,
   fp-universal.css et fp-responsive.css. Rien ici ne doit fuir vers le reste
   du site, et rien du reste du site ne doit entrer sans qu'on l'ait voulu.

   CETTE FEUILLE REMPLACE cgu-cgv-style.css (988 lignes, supprimée) : elle ne
   servait plus qu'à /legale, les autres pages légales ayant déjà été reprises.
   ══════════════════════════════════════════════════════════════════════════ */

/* LE FOND DU SITE EST SOMBRE — z-style.css pose `body { background: #181a1b }`
   et des dégradés par-dessus. Ces pages sont CLAIRES : chaque section peint son
   propre fond, mais la moindre gouttière laisserait apparaître le noir du
   gabarit, et le pied de page est blanc de bout en bout. Le fond est donc
   neutralisé ici, comme le font déjà l'accueil, /service/domaines et
   /service/web. La règle vise `body`, qui n'est pas sous `.lg` — et cette
   feuille n'est chargée que par ces deux pages. */
body {
    background-color: #fff !important;
    background-image: none !important;
}

.lg {
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #4C5F7D;
    background: #fff;
    letter-spacing: normal;

    /* LA TAILLE DE BASE EST CELLE DE LA MAQUETTE, PAS CELLE DU SITE.
       assets/css/fp-universal.css pose `body { font-size: 14px !important }`.
       Le !important d'en face vise `body` et ne peut rien contre une valeur
       posée ici, sur un autre élément. Tout ce qui compte porte de toute façon
       sa taille explicite plus bas ; celle-ci sert aux conteneurs qui n'en
       déclarent pas. */
    font-size: 16px;
    line-height: 1.65;
}

/* ── LA POLICE, ET POURQUOI IL FAUT LA REDIRE ──────────────────────────────

   `.lg { font-family: 'DM Sans' }` ne suffit pas : la police ne se transmet que
   par HÉRITAGE, et l'héritage perd contre n'importe quelle règle qui vise
   l'élément. Or z-style.css, la feuille du site, pose

       body, h1, h2, h3, h4, h5, h6, a, p { font-family: 'Montserrat' }

   — des sélecteurs de TYPE. Sans cette garde, ils reprennent la main sur tous
   les paragraphes, tous les liens et tous les éléments qui en héritent. C'est
   exactement ce qui s'est produit ici à la première mesure : chapeau du héros,
   corps des articles, liens du sommaire et encadrés rendaient en Montserrat,
   le reste en DM Sans. Le défaut est documenté dans accueil-style.css, relevé
   en production le 27 août 2026 sur /solution-entreprise — et il ne se voit
   pas à l'œil, les deux polices étant proches. Il se MESURE.

   Ce n'est pas qu'esthétique : Montserrat est plus large à taille égale, donc
   un titre y gagne des lignes.

   `:where()` ramène la règle au poids de `.lg` seul, soit (0,1,0) : assez pour
   battre les sélecteurs de type de z-style.css, trop peu pour gêner une classe.
   Et comme elle vise les TYPES et non `*`, elle laisse tranquilles les icônes
   Font Awesome du reste du site, qui portent leur police par classe. */
.lg :where(a, p, b, strong, em, li, label, dt, dd, span, div, button) {
    font-family: inherit;
}

/* L'INTERLIGNE DES TITRES : Bootstrap 3, que le gabarit public charge, pose
   `h1, h2, ..., h6 { line-height: 1.1 }` — un sélecteur de TYPE (0,0,1), contre
   lequel l'héritage depuis `.lg` ne pèse rien. Sans cette ligne, tous les
   intertitres seraient serrés à 1,1 au lieu de la valeur voulue. Le défaut est
   documenté et mesuré dans l'en-tête d'accueil-style.css. */
.lg :where(h1, h2, h3, h4) {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #0B1F44;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
    text-wrap: pretty;
}

/* `:where()` SUR LES PARAGRAPHES ET LES LIENS — le même piège deux fois.

   Écrite `.lg p`, la règle pèse (0,1,1) : une classe PLUS un type. Elle battrait
   donc `.lg-chapeau`, `.lg-note-texte` et toutes les classes à une seule
   classe, dont les marges tomberaient à zéro sans rien signaler. Écrite `.lg a`,
   elle repeindrait en bleu le texte des boutons qui sont des <a> — bleu sur
   bleu sur un bouton plein. `:where()` ramène le poids à celui d'un simple
   sélecteur de type : assez pour battre Bootstrap 3, trop peu pour gêner une
   classe de cette feuille. Les deux défauts ont déjà été payés sur l'accueil. */
.lg :where(p) { margin: 0; text-wrap: pretty; }
.lg :where(ul, ol, dl, dd) { margin: 0; padding: 0; list-style: none; }
:where(.lg) a { color: #1257F0; text-decoration: none; }
:where(.lg) a:hover,
:where(.lg) a:focus { color: #0B44C4; text-decoration: underline; }

/* LE MASQUAGE PASSE PAR L'ATTRIBUT, PAS PAR UNE CLASSE — et le `!important`
   n'est pas un réflexe : `hidden` est sans effet sur un élément qu'une feuille
   passe en `display: flex`, et c'est le cas des liens du sommaire et des listes
   à puces. Le filtre de /cgu-cgv ne pose et ne retire que cet attribut ; il n'a
   donc jamais à écrire `element.style.display`, dont la remise à vide
   DÉTRUIRAIT la mise en page au lieu de la rétablir. */
.lg [hidden] { display: none !important; }

.lg ::selection { background: rgba(18, 87, 240, .18); }
.lg :focus-visible { outline: 2px solid #1257F0; outline-offset: 2px; border-radius: 4px; }
.lg :where(strong, b) { font-weight: 700; color: #2B3E5C; }

/* ══════════════════════════════════════════════════════════════════════════
   TRAME
   ══════════════════════════════════════════════════════════════════════════ */

.lg-conteneur {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. HÉROS
   ══════════════════════════════════════════════════════════════════════════ */

.lg-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #0A1B3D 0%, #071227 60%, #050E1E 100%);
}

/* La lueur d'angle de l'accueil. `pointer-events: none` : elle couvre 620 px et
   passerait sinon devant le fil d'Ariane. */
.lg-hero::before {
    content: '';
    position: absolute;
    top: -160px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 87, 240, .20), transparent 65%);
    pointer-events: none;
}

.lg-hero .lg-conteneur { position: relative; }
.lg-hero-inner { padding: 44px 0 56px; }

.lg-fil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #8FA3C2;
    margin-bottom: 26px;
}

.lg-fil a { color: #B7C6DE; }
.lg-fil a:hover,
.lg-fil a:focus { color: #fff; text-decoration: none; }
.lg-fil svg { flex: 0 0 auto; }
.lg-fil [aria-current] { color: #DCE6F5; }

.lg-surtitre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5B9BFF;
    margin-bottom: 16px;
}

.lg-titre {
    font-size: clamp(32px, 3.4vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    margin-bottom: 18px;
    max-width: 780px;
}

.lg-chapeau {
    font-size: 17px;
    line-height: 1.65;
    color: #B7C6DE;
    max-width: 680px;
}

/* ── LA RANGÉE DE MÉTADONNÉES ──────────────────────────────────────────────
   Quatre repères que l'on vient chercher sur une page légale — l'entité, son
   numéro, la date d'entrée en vigueur, le droit applicable — et qui n'ont pas à
   se chercher dans un paragraphe. C'est la forme des trois « preuves » du héros
   de l'accueil : filet vertical entre les colonnes, libellé faible au-dessus,
   valeur forte en dessous. */
.lg-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.lg-meta-item { padding-right: 20px; min-width: 0; }
.lg-meta-item + .lg-meta-item {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.lg-meta-cle {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8FA3C2;
    margin-bottom: 8px;
}

.lg-meta-val {
    display: block;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    color: #DCE6F5;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. CORPS — sommaire collant + flux d'articles
   ══════════════════════════════════════════════════════════════════════════ */

.lg-corps { background: #F7FAFD; border-top: 1px solid #E8EEF6; }
.lg-corps-inner { padding: 56px 0 72px; }

/* `minmax(0, 1fr)` ET JAMAIS `1fr` : `1fr` vaut `minmax(auto, 1fr)`, et cet
   `auto` est un plancher de contenu minimal — la colonne refuse de descendre
   sous son plus long mot insécable et déborde en silence, le
   `body { overflow-x: hidden }` de fp-responsive.css rattrapant le débordement
   sans rien signaler. Le défaut a été relevé sur /cgu-cgv. */
.lg-grille {
    display: grid;
    grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* ── LE SOMMAIRE ───────────────────────────────────────────────────────────
   `top: 104px` ET NON `top: 0` : le bandeau du site est `position: sticky`
   (includes/header.css) et mesure 88 px au-dessus de 1400, 76 entre 1281 et
   1400, 60 en dessous. Collé à 0, le sommaire se rangerait DERRIÈRE lui. Les
   trois valeurs plus bas suivent ces trois hauteurs, avec 16 px d'air.

   Ce n'est PAS le même réglage que `scroll-padding-top`, déjà posé sur `html`
   par includes/header.css pour les ancres : celui-là place la cible d'un lien,
   celui-ci place un élément collant. Les deux sont nécessaires, et il ne faut
   surtout pas ajouter un `scroll-margin-top` sur les articles — il
   s'ADDITIONNERAIT à la réserve existante et ferait atterrir chaque ancre une
   hauteur de barre trop bas. */
.lg-sommaire {
    position: sticky;
    top: 104px;
    background: #fff;
    border: 1px solid #DCE6F2;
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 1px 2px rgba(11, 31, 68, .04), 0 18px 40px -32px rgba(11, 31, 68, .45);
}

.lg-som-titre {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1257F0;
    margin-bottom: 14px;
}

.lg-som-liste { display: flex; flex-direction: column; gap: 2px; }

/* ── LE CHAMP DE RECHERCHE (/cgu-cgv) ──────────────────────────────────────
   16 px ET NON 14 : sous 16 px, Safari sur iPhone ZOOME la page à la mise au
   point d'un champ, et n'en ressort pas. Le dépôt a déjà payé ce défaut le
   24 août 2026. Le champ paraît un cran plus grand que les liens du sommaire,
   et c'est le prix à payer. */
.lg-recherche {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #0B1F44;
    background: #F7FAFD;
    border: 1px solid #DCE6F2;
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 14px;
    outline: none;
}

.lg-recherche::placeholder { color: #9AA7BA; font-weight: 400; }
.lg-recherche:focus {
    border-color: #1257F0;
    box-shadow: 0 0 0 3px rgba(18, 87, 240, .14);
}

.lg-som-groupe + .lg-som-groupe { margin-top: 14px; }

.lg-som-groupe-titre {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #69778F;
    margin-bottom: 6px;
    padding-left: 10px;
}

.lg-som-lien {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #4C5F7D;
    padding: 7px 10px;
    border-radius: 8px;
    transition: background-color 160ms ease, color 160ms ease;
}

.lg-som-lien:hover,
.lg-som-lien:focus {
    background: #F0F5FC;
    color: #1257F0;
    text-decoration: none;
}

.lg-som-puce {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9FC0F5;
    position: relative;
    top: -2px;
}

.lg-som-lien:hover .lg-som-puce,
.lg-som-lien:focus .lg-som-puce { background: #1257F0; }

.lg-som-pied {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E8EEF6;
    font-size: 13.5px;
    line-height: 1.6;
    color: #69778F;
}

/* ── LE FLUX D'ARTICLES ────────────────────────────────────────────────────
   `min-width: 0` sur la colonne pour la même raison que `minmax(0, 1fr)`
   au-dessus : sans lui, une adresse électronique longue dans un article
   élargit toute la colonne. */
.lg-flux { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* ── LES TROIS GROUPES (/cgu-cgv) ──────────────────────────────────────────
   CGU, CGV, Conditions spécifiques. /legale et /confidentialite n'en ont pas :
   leurs articles sont des enfants directs du flux. */
.lg-groupe { display: flex; flex-direction: column; gap: 14px; }
.lg-groupe + .lg-groupe { margin-top: 16px; }

.lg-groupe-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
}

.lg-etiquette {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: #1257F0;
    padding: 6px 12px;
    border-radius: 7px;
}

.lg-groupe-titre { font-size: 22px; font-weight: 600; min-width: 0; }

/* Le filet prend la place qui reste à droite du titre. `min-width: 0` sur le
   titre pour qu'il rende cette place plutôt que de pousser le filet dehors. */
.lg-groupe-filet { flex: 1; height: 1px; background: #DCE6F2; }

.lg-vide {
    border: 1px dashed #C8D8EF;
    border-radius: 14px;
    background: #fff;
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.7;
}

.lg-bloc {
    background: #fff;
    border: 1px solid #DCE6F2;
    border-radius: 16px;
    padding: 28px 30px 30px;
    box-shadow: 0 1px 2px rgba(11, 31, 68, .04), 0 14px 34px -30px rgba(11, 31, 68, .5);
}

.lg-bloc-entete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.lg-bloc-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #F0F5FC;
    color: #1257F0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.lg-bloc-titre {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
}

.lg-bloc-corps { display: flex; flex-direction: column; gap: 14px; }

/* `:where(p)` ET NON `p` : écrite `.lg-bloc-corps p`, la règle pèse (0,2,1) et
   écrase la taille de `.lg-note-texte` (0,1,0), qui est pourtant plus précise
   dans l'intention. Mesuré : l'encadré rendait à 15,5 px au lieu de 15. Avec
   `:where()` la règle tombe à (0,1,0) et c'est l'ordre du fichier qui tranche —
   les classes des blocs particuliers, déclarées plus bas, gagnent. */
.lg-bloc-corps :where(p) { font-size: 15.5px; line-height: 1.75; }

.lg-sous-titre {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1257F0;
    margin-top: 4px;
}

/* ── LA LISTE À PUCES ──────────────────────────────────────────────────────
   Une <ul> réelle, remise à plat par la règle `:where(ul)` du haut : la
   sémantique de liste compte sur un texte juridique — un lecteur d'écran
   annonce « liste de six éléments », et ce dénombrement est une information. */
.lg-liste { display: flex; flex-direction: column; gap: 10px; }

.lg-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.7;
}

.lg-item::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1257F0;
    margin-top: 9px;
}

/* ── LE TABLEAU CLÉ / VALEUR ───────────────────────────────────────────────
   UNE GRILLE, PAS UN <table> DANS UN CADRE DÉFILANT. fp-responsive.js enroule
   d'office tout élément en `overflow-x: auto` sur téléphone et triple sa
   hauteur ; une grille, elle, passe simplement à une colonne sous 720 px, et
   la valeur se lit sous son libellé. C'est aussi une liste de définitions dans
   le balisage (<dl>), ce qu'est réellement « Raison sociale : CBR-Cloud Inc. ». */
.lg-def {
    border: 1px solid #E8EEF6;
    border-radius: 12px;
    overflow: hidden;
}

.lg-def-ligne {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: baseline;
    padding: 12px 18px;
    background: #FBFCFE;
}

.lg-def-ligne + .lg-def-ligne { border-top: 1px solid #E8EEF6; }

.lg-def-cle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #69778F;
}

.lg-def-val {
    font-size: 15px;
    font-weight: 500;
    color: #2B3E5C;
    margin: 0;
    text-wrap: pretty;
}

/* ── L'ENCADRÉ ─────────────────────────────────────────────────────────────
   Deux tons seulement : le bleu pour ce qu'il faut retenir, l'ambre pour ce qui
   engage le lecteur (délais, conservation, suppression). Pas de rouge : rien
   sur ces pages n'est une alerte. */
.lg-note {
    border: 1px solid #D6E4FB;
    border-left: 3px solid #1257F0;
    border-radius: 12px;
    background: #F4F8FE;
    padding: 18px 20px;
}

.lg-note--attention {
    border-color: #F3E2C0;
    border-left-color: #C98A16;
    background: #FDF8EE;
}

.lg-note-titre {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #0B1F44;
    margin-bottom: 6px;
}

.lg-note-texte { font-size: 15px; line-height: 1.7; }

/* ── L'APPEL FINAL ─────────────────────────────────────────────────────────
   Bloc sombre en bas de page : le même contraste que le héros, pour refermer. */
.lg-fin {
    background: linear-gradient(155deg, #0A1B3D 0%, #071227 100%);
    border-radius: 18px;
    padding: 32px 34px;
    margin-top: 8px;
}

.lg-fin-titre { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.lg-fin-texte { font-size: 15.5px; line-height: 1.7; color: #B7C6DE; margin-bottom: 22px; max-width: 640px; }
.lg-fin-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* `border: 0` et `appearance: none` : le bouton PDF de /cgu-cgv est un vrai
   <button> — c'est une commande, pas une navigation, et un <a href="#"> est
   interdit sur les pages publiques de ce dépôt (PagesPubliquesLiensMortsTest).
   Sans ces deux lignes il arriverait avec le cadre gris du navigateur. */
.lg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.lg-btn--plein { background: #1257F0; color: #fff; }
.lg-btn--plein:hover,
.lg-btn--plein:focus { background: #0B44C4; color: #fff; text-decoration: none; }

.lg-btn--bloc { display: flex; width: 100%; }

.lg-btn--fant {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #DCE6F5;
}

.lg-btn--fant:hover,
.lg-btn--fant:focus {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    text-decoration: none;
}

/* Le renvoi discret entre les trois documents légaux, sous le flux. */
.lg-voisins {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 20px;
    font-size: 14.5px;
    color: #69778F;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADAPTATION
   ══════════════════════════════════════════════════════════════════════════ */

/* Entre 1281 et 1400 px la barre passe à 76 px, sous 1281 à 60 px. */
@media (max-width: 1400px) { .lg-sommaire { top: 92px; } }
@media (max-width: 1280px) { .lg-sommaire { top: 76px; } }

@media (max-width: 1024px) {
    /* LE SOMMAIRE PASSE AU-DESSUS ET CESSE D'ÊTRE COLLANT. Collé en une
       colonne, il resterait à l'écran pendant toute la lecture des articles et
       mangerait le tiers de la hauteur utile. */
    .lg-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .lg-sommaire { position: static; top: auto; }
    .lg-som-liste {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 12px;
    }
}

@media (max-width: 900px) {
    .lg-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
    /* Le filet vertical ne vaut qu'entre deux colonnes voisines : sur deux
       rangées, il en faut un sur l'élément de droite seulement. */
    .lg-meta-item,
    .lg-meta-item + .lg-meta-item { padding-left: 0; border-left: none; }
    .lg-meta-item:nth-child(even) {
        padding-left: 22px;
        border-left: 1px solid rgba(255, 255, 255, .12);
    }
}

@media (max-width: 720px) {
    .lg-conteneur { padding: 0 20px; }
    .lg-hero-inner { padding: 32px 0 40px; }
    .lg-corps-inner { padding: 36px 0 48px; }

    .lg-titre { font-size: 30px; }
    .lg-chapeau { font-size: 16px; }

    .lg-meta { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; padding-top: 22px; }
    .lg-meta-item:nth-child(even) { padding-left: 0; border-left: none; }
    .lg-meta-item { padding-right: 0; }

    .lg-som-liste { grid-template-columns: minmax(0, 1fr); }

    .lg-bloc { padding: 22px 20px 24px; border-radius: 14px; }
    .lg-bloc-titre { font-size: 19px; }
    .lg-bloc-entete { gap: 12px; margin-bottom: 14px; }

    /* L'ÉTIQUETTE PASSE AU-DESSUS DU TITRE DE GROUPE. Sur une ligne à 335 px,
       « Spécifique » et « Conditions spécifiques aux services » se partageaient
       la largeur, et le titre tombait sur trois lignes de deux mots. Le filet
       n'a plus de place à prendre : il disparaît. */
    .lg-groupe-entete { flex-wrap: wrap; gap: 10px; }
    .lg-groupe-titre { font-size: 20px; flex: 1 1 100%; }
    .lg-groupe-filet { display: none; }

    /* La valeur passe sous son libellé — voir l'en-tête du tableau clé/valeur :
       jamais de cadre défilant à cet endroit. */
    .lg-def-ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; }

    .lg-fin { padding: 26px 22px; border-radius: 16px; }
    .lg-fin-titre { font-size: 20px; }
    .lg-fin-boutons { flex-direction: column; align-items: stretch; }
    .lg-fin-boutons > * { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION — le PDF, c'est la page
   Un document juridique fabriqué à part deviendrait un SECOND texte, qui
   divergerait de la page à la première modification d'un article. On retire
   donc ce qui n'est pas le texte : bandeau, pied, sommaire, appel final.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
    .navigation-bar, .navigation-bar-modern, .sticky-wrapper, .header-top-area,
    .ac-pied, .lg-sommaire, .lg-fin, .lg-fil { display: none !important; }

    body, .lg, .lg-corps { background: #fff !important; }
    .lg-hero { background: #fff !important; }
    .lg-hero::before { display: none !important; }
    .lg-titre { color: #000 !important; }
    .lg-chapeau, .lg-meta-val { color: #333 !important; }
    .lg-meta { border-top-color: #bbb !important; }
    .lg-meta-item + .lg-meta-item { border-left-color: #bbb !important; }
    .lg-meta-cle { color: #555 !important; }

    .lg-grille { display: block; }
    .lg-bloc { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
    .lg-bloc-titre { break-after: avoid-page; page-break-after: avoid; }

    /* Sur papier, un lien sans son adresse est perdu. */
    .lg a[href^="http"]::after,
    .lg a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
    .lg *, .lg *::before, .lg *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}