@charset "utf-8";
/* ============================================================
   SPOT LMS — PAGES PUBLIQUES
   Fichier  : css_file/style_faq_v1.css
   Pages    : /open_FAQ.php           → §2 à §8   (scope #faq-page)
              /conditions_of_use.php  → §9 à §12  (scope #cgu-page)

   Pourquoi un fichier dédié plutôt qu'une extension de
   style_tutorial_v1.css :
     - open_FAQ.php est une page publique : elle ne charge NI la
       chaîne CSS du template SPOT (fct_codeup_css_v1.inc.php),
       NI Font Awesome. Aucun repère graphique ne peut donc
       reposer sur une icône : tout est dessiné en CSS.
     - Elle a besoin de règles de niveau page (html / body /
       .footer) que style_tutorial_v1.css — strictement confiné
       sous #tuto-page — ne doit jamais porter.
     - Le motif accordéon n'existe pas dans le fichier tutoriel.
   Les jetons visuels (palette, rayons, ombres, dégradé du hero,
   barre de titre #d1ecf1 / #0c5460) sont repris à l'identique
   pour que la famille reste cohérente.

   Pourquoi conditions_of_use.php partage CE fichier plutôt que
   d'en avoir un troisième :
     - c'est la page jumelle d'open_FAQ.php (même nature publique,
       même bandeau « fermer », même logo, même pied de page) ;
     - le montage du pied de page (§1) est rigoureusement le même
       et FRAGILE : le dupliquer, c'est prendre le risque de le
       voir diverger d'un fichier à l'autre ;
     - les deux pages sont les seules vitrines publiques de
       l'outil : elles doivent bouger ensemble.

   Scope    : tout est confiné sous #faq-page ou #cgu-page, sauf
              le montage du pied de page (§1) qui est de niveau
              document et sert aux DEUX pages.

   ⚠ conditions_of_use.php repose sur des onglets Bootstrap dont
     l'apparence appartient au template SPOT : AUCUNE règle de ce
     fichier ne cible les classes d'onglets Bootstrap (nav-tabs,
     nav-item, nav-link, tab-content, tab-pane) ni leurs états.
     Ne pas en ajouter — vérifiable par un simple grep.
   ============================================================ */

/* ------------------------------------------------------------
   1. Montage du pied de page — FRAGILE, GÉOMÉTRIE INCHANGÉE
      Repris tel quel de l'ancien <style> inline : le pied de
      page est en position absolue, collé en bas ; html doit
      donc rester positionné et faire au moins 100 % de hauteur,
      et body doit réserver exactement la hauteur du footer.
      Les 3 valeurs 100 % / 60px / 60px sont solidaires :
      NE PAS les désynchroniser.
   ------------------------------------------------------------ */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    background: #f8fafc;
    color: #334155;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    /* centrage vertical : le contenu ne doit pas dépasser 60px */
    display: flex;
    align-items: center;
}

.footer .container {
    width: 100%;
}

/* remplace .container .text-muted { margin: 20px 0 } : marges
   annulées pour que le centrage flex tienne dans les 60px */
.footer .text-muted {
    margin: 0;
    font-size: .88rem;
    letter-spacing: .01em;
}

.footer a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(8, 145, 178, .28);
    transition: color .2s ease, border-color .2s ease;
}

.footer a:hover,
.footer a:focus {
    color: #0e7490;
    border-bottom-color: #0e7490;
    text-decoration: none;
}

/* Bandeau « fermer » affiché aux visiteurs déjà connectés :
   alignement sur la nouvelle facture, sans toucher au PHP. */
body > .alert-warning {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #fde68a;
    border-radius: 0;
    padding: 10px 16px;
    background: #fffbeb;
}

body > .alert-warning .btn-warning {
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    padding: 6px 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
}

/* ------------------------------------------------------------
   2. Variables — scopées sur le wrapper de page
   ------------------------------------------------------------ */
#faq-page {
    --faq-white: #ffffff;
    --faq-bg: #f8fafc;
    --faq-border: #e2e8f0;
    --faq-border-soft: #f1f5f9;
    --faq-dark: #1e293b;
    --faq-text: #334155;
    --faq-label: #64748b;
    --faq-accent: #0891b2;
    --faq-accent-soft: rgba(8, 145, 178, .16);
    --faq-accent-tint: rgba(8, 145, 178, .05);

    --faq-head-bg: #d1ecf1; /* couleur projet SPOT LMS — NE PAS CHANGER */
    --faq-head-fg: #0c5460;

    --faq-radius: 12px;
    --faq-radius-lg: 16px;
    --faq-shadow: 0 2px 10px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);
    --faq-shadow-h: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);

    padding-bottom: 36px;
}

/* Anciens espaceurs <p>&nbsp;</p> du gabarit d'origine.
   Ils sont conservés dans le HTML (contenu strictement
   inchangé) mais neutralisés : les espacements sont désormais
   pilotés par la mise en page. */
#faq-page .faq-void {
    display: none;
}

/* ------------------------------------------------------------
   3. Bandeau logo
   ------------------------------------------------------------ */
#faq-page .faq-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 26px 0 20px;
    padding: 18px 20px;
    background: var(--faq-white);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    box-shadow: var(--faq-shadow);
}

#faq-page .faq-logo {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   4. En-tête de page — même code visuel que .tuto-hero
   ------------------------------------------------------------ */
#faq-page .faq-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0 0 30px;
    padding: 32px 36px;
    border-radius: var(--faq-radius-lg);
    background: linear-gradient(120deg, #0891b2 0%, #0e7490 46%, #1e40af 100%);
    box-shadow: 0 10px 30px rgba(8, 145, 178, .26), 0 2px 8px rgba(15, 23, 42, .10);
}

/* halo décoratif discret, purement graphique */
#faq-page .faq-hero::after {
    content: '';
    position: absolute;
    top: -150px;
    right: -95px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

/* Marque décorative : trois barres empilées, métaphore
   graphique d'une liste. Aucun caractère, aucun libellé. */
#faq-page .faq-hero-mark {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: var(--faq-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

#faq-page .faq-hero-mark span {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .92);
}

#faq-page .faq-hero-mark span:nth-child(1) { width: 100%; }
#faq-page .faq-hero-mark span:nth-child(2) { width: 68%; background: rgba(255, 255, 255, .62); }
#faq-page .faq-hero-mark span:nth-child(3) { width: 84%; background: rgba(255, 255, 255, .78); }

#faq-page .faq-hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

#faq-page .faq-hero-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, .18);
}

#faq-page .faq-hero-rule {
    width: 46px;
    height: 3px;
    margin: 12px 0 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}

#faq-page .faq-hero-sub {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .015em;
    color: rgba(255, 255, 255, .90);
}

/* ------------------------------------------------------------
   5. La liste de questions
      Parti pris : accent unique (cyan) pour les 15 entrées.
      L'ordre des questions vient de la base et ne peut pas être
      regroupé par thème ; un cycle de couleurs y serait donc
      décoratif et laisserait croire à un classement inexistant.
      La lisibilité vient du rythme vertical et du contraste
      fort entre l'état replié et l'état déplié.
   ------------------------------------------------------------ */
#faq-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#faq-page .faq-item {
    position: relative;
    background: var(--faq-white);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    box-shadow: var(--faq-shadow);
    overflow: hidden; /* indispensable : coins arrondis de la barre de titre */
    transition: box-shadow .25s ease, border-color .2s ease;
}

/* barre d'accent à gauche — même code visuel que .tuto-section */
#faq-page .faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 2;
    background: var(--faq-accent);
    transition: width .2s ease;
}

#faq-page .faq-item:hover {
    box-shadow: var(--faq-shadow-h);
    border-color: rgba(8, 145, 178, .38);
}

#faq-page .faq-item:hover::before {
    width: 5px;
}

/* ------------------------------------------------------------
   5.1 L'intitulé — bouton pleine largeur
   ------------------------------------------------------------ */
#faq-page .faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 17px 22px 17px 25px;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
    white-space: normal;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.005em;
    color: var(--faq-dark);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

#faq-page .faq-q:hover {
    background: var(--faq-accent-tint);
    color: var(--faq-accent);
}

#faq-page .faq-q:focus {
    outline: 0;
}

#faq-page .faq-q:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: -3px;
}

#faq-page .faq-q-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ------------------------------------------------------------
   5.2 Chevron d'affordance — dessiné en CSS (aucune icône
       n'est disponible sur cette page publique)
   ------------------------------------------------------------ */
#faq-page .faq-q-mark {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--faq-accent-soft);
    transition: background-color .2s ease, transform .2s ease;
}

#faq-page .faq-q-mark::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -3px 0 0 -4px;
    border-right: 2px solid var(--faq-accent);
    border-bottom: 2px solid var(--faq-accent);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .25s ease, border-color .2s ease;
}

#faq-page .faq-q:hover .faq-q-mark {
    background: var(--faq-accent);
}

#faq-page .faq-q:hover .faq-q-mark::before {
    border-color: #ffffff;
}

/* ------------------------------------------------------------
   5.3 État déplié — la question ouverte prend les couleurs
       maison #d1ecf1 / #0c5460 et devient l'en-tête de la
       carte qu'elle commande.

       DÉROGATION ASSUMÉE à la charte « barre de titre » :
       PAS de passage en majuscules ni de corps réduit.
       Le motif de la charte s'applique à des libellés courts
       (« point de vue », « Généralités ») ; ici les intitulés
       sont des phrases entières allant jusqu'à ~110 caractères.
       Les capitaliser au clic dégraderait la lisibilité au
       moment exact où le lecteur lit, et provoquerait un saut
       de mise en page. Casse et corps restent donc inchangés
       entre l'état replié et l'état déplié : seule la couleur
       et la graisse marquent le changement d'état.
   ------------------------------------------------------------ */
#faq-page .faq-q[aria-expanded="true"] {
    background: var(--faq-head-bg);
    color: var(--faq-head-fg);
    font-weight: 700;
    border-bottom: 1px solid rgba(12, 84, 96, .12);
}

#faq-page .faq-q[aria-expanded="true"] .faq-q-mark {
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 1px 2px rgba(12, 84, 96, .10);
}

#faq-page .faq-q[aria-expanded="true"] .faq-q-mark::before {
    margin-top: -1px;
    border-color: var(--faq-head-fg);
    transform: rotate(-135deg);
}

#faq-page .faq-q[aria-expanded="true"]:hover .faq-q-mark {
    background: #ffffff;
}

#faq-page .faq-q[aria-expanded="true"]:hover .faq-q-mark::before {
    border-color: var(--faq-head-fg);
}

#faq-page .faq-item:has(.faq-q[aria-expanded="true"]) {
    border-color: rgba(8, 145, 178, .38);
    box-shadow: var(--faq-shadow-h);
}

/* ------------------------------------------------------------
   5.4 Le corps de réponse
   ------------------------------------------------------------ */
#faq-page .faq-a {
    padding: 22px 26px 24px 25px;
    background: var(--faq-white);
}

#faq-page .faq-a-body {
    /* Pas de max-width : le texte occupe toute la largeur de la
       carte. Décision client prise sur conditions_of_use.php
       (cf. §9) et reportée ici pour que les deux pages publiques
       aient la même largeur de texte. */
    font-size: .95rem;
    line-height: 1.72;
    color: var(--faq-text);
}

/* Le contenu vient de la base et peut porter son propre balisage :
   on cadre les cas courants sans rien imposer d'exotique. */
#faq-page .faq-a-body > *:first-child {
    margin-top: 0;
}

#faq-page .faq-a-body > *:last-child {
    margin-bottom: 0;
}

#faq-page .faq-a-body p {
    margin: 0 0 14px;
}

#faq-page .faq-a-body ul,
#faq-page .faq-a-body ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

#faq-page .faq-a-body li {
    margin-bottom: 8px;
}

#faq-page .faq-a-body a {
    color: var(--faq-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--faq-accent-soft);
    overflow-wrap: anywhere;
    transition: border-color .2s ease;
}

#faq-page .faq-a-body a:hover,
#faq-page .faq-a-body a:focus {
    color: #0e7490;
    border-bottom-color: #0e7490;
    text-decoration: none;
}

#faq-page .faq-a-body strong,
#faq-page .faq-a-body b {
    color: var(--faq-dark);
    font-weight: 700;
}

#faq-page .faq-a-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

#faq-page .faq-a-body table {
    max-width: 100%;
}

/* Séparateur entre deux volets d'une même réponse */
#faq-page .faq-a-body hr {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: var(--faq-border);
}

/* ------------------------------------------------------------
   6. Responsive — de 360 px à 1920 px
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    #faq-page .faq-hero {
        padding: 28px 28px;
        gap: 20px;
    }

    #faq-page .faq-hero-title {
        font-size: 1.5rem;
    }

    #faq-page .faq-a {
        padding: 20px 20px 22px;
    }
}

@media (max-width: 767.98px) {
    #faq-page .faq-brand {
        margin: 18px 0 16px;
        padding: 14px 16px;
    }

    #faq-page .faq-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 20px;
        margin-bottom: 22px;
    }

    #faq-page .faq-hero-mark {
        width: 52px;
        height: 52px;
        padding: 0 12px;
        gap: 6px;
    }

    #faq-page .faq-hero-title {
        font-size: 1.32rem;
    }

    #faq-page .faq-hero-sub {
        font-size: .93rem;
    }

    #faq-page .faq-list {
        gap: 12px;
    }

    #faq-page .faq-q {
        gap: 12px;
        padding: 15px 16px 15px 19px;
        font-size: .96rem;
    }

    #faq-page .faq-a {
        padding: 18px 16px 20px 19px;
    }
}

@media (max-width: 479.98px) {
    #faq-page .faq-hero {
        padding: 18px 16px;
        border-radius: var(--faq-radius);
    }

    #faq-page .faq-hero-mark {
        width: 46px;
        height: 46px;
        padding: 0 11px;
        gap: 5px;
        border-radius: 12px;
    }

    #faq-page .faq-hero-mark span {
        height: 3px;
    }

    #faq-page .faq-hero-title {
        font-size: 1.18rem;
    }

    #faq-page .faq-hero-rule {
        margin: 10px 0 8px;
    }

    #faq-page .faq-item {
        border-radius: 10px;
    }

    #faq-page .faq-q {
        gap: 10px;
        padding: 14px 13px 14px 17px;
        font-size: .92rem;
    }

    #faq-page .faq-q-mark {
        width: 26px;
        height: 26px;
    }

    #faq-page .faq-a {
        padding: 16px 14px 18px 17px;
    }

    #faq-page .faq-a-body {
        font-size: .9rem;
    }

    .footer .text-muted {
        font-size: .8rem;
        padding: 0 8px;
    }
}

/* ------------------------------------------------------------
   7. Accessibilité — mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #faq-page .faq-item,
    #faq-page .faq-item::before,
    #faq-page .faq-q,
    #faq-page .faq-q-mark,
    #faq-page .faq-q-mark::before,
    #faq-page .collapsing {
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   8. Impression — la FAQ doit s'imprimer ENTIÈRE, même si les
      réponses sont repliées à l'écran.
   ------------------------------------------------------------ */
@media print {
    html {
        min-height: 0;
    }

    body {
        margin-bottom: 0;
        background: #ffffff;
    }

    .footer {
        position: static;
        height: auto;
        padding: 10px 0;
        background: none;
    }

    body > .alert-warning {
        display: none;
    }

    #faq-page {
        padding-bottom: 0;
    }

    #faq-page .faq-brand {
        margin: 0 0 12px;
        padding: 0 0 10px;
        border: 0;
        border-bottom: 1px solid #cbd5e1;
        border-radius: 0;
        box-shadow: none;
    }

    #faq-page .faq-hero {
        margin: 0 0 16px;
        padding: 0 0 12px;
        background: none !important;
        border-bottom: 2px solid #0c5460;
        border-radius: 0;
        box-shadow: none;
        color: #0c5460;
    }

    #faq-page .faq-hero::after {
        display: none;
    }

    #faq-page .faq-hero-mark {
        display: none;
    }

    #faq-page .faq-hero-title,
    #faq-page .faq-hero-sub {
        color: #0c5460;
        text-shadow: none;
    }

    #faq-page .faq-hero-rule {
        background: #0c5460;
    }

    /* on déplie tout : sans cela l'impression serait vide */
    #faq-page .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    #faq-page .faq-list {
        gap: 10px;
    }

    #faq-page .faq-item {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #b8c4cf;
    }

    #faq-page .faq-q,
    #faq-page .faq-q[aria-expanded="true"] {
        background: #d1ecf1 !important;
        color: #0c5460 !important;
        font-size: .92rem;
        font-weight: 700;
        padding: 8px 12px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #faq-page .faq-q-mark {
        display: none;
    }

    #faq-page .faq-a {
        padding: 10px 12px;
    }

    #faq-page .faq-a-body {
        font-size: .86rem;
        line-height: 1.55;
    }
}

/* ============================================================
   ============================================================
   CONDITIONS D'UTILISATION — /conditions_of_use.php
   §9 à §12 · scope #cgu-page

   Page publique à 4 onglets (conditions de service,
   confidentialité, sécurité, mentions légales). Le contenu de
   chaque onglet est un document juridique long, restitué tel
   quel depuis la base de traduction : on ne maîtrise ni son
   balisage ni sa longueur.

   Parti pris de lecture — deux leviers :
     1. RYTHME VERTICAL. Interligne 1.78 (vs 1.5 par défaut) et
        marges exprimées en em, donc solidaires du corps de
        texte : le rythme tient à toutes les tailles d'écran.
     2. HIÉRARCHIE. Les titres venus de la base (h1→h6) reçoivent
        des paliers nettement distincts, dont un repère graphique
        (barre d'accent) sur les trois niveaux les plus hauts,
        pour qu'on puisse BALAYER le document sans le lire.

   ⚠ PAS DE max-width SUR LE CORPS DE TEXTE — DÉCISION CLIENT.
     Une première version bridait .cgu-prose à 72ch (~80 signes),
     règle typographique classique pour un texte long. Le client
     l'a explicitement rejetée : le vide laissé à droite de la
     colonne lui déplaît et la page s'en trouve allongée. Le
     texte occupe donc toute la largeur de la colonne. Ne pas
     réintroduire de max-width ici sans son accord — la même
     limitation a été retirée de .faq-a-body (§5.4) pour que les
     deux pages publiques restent cohérentes.

   Le texte n'est plus justifié (l'ancien .text-spot l'était) :
   sans césure, la justification creuse des rivières de blanc
   dans les paragraphes juridiques, qui sont longs et remplis de
   mots interminables. Le drapeau à droite est plus lisible.
   ============================================================ */

/* ------------------------------------------------------------
   9. Variables — scopées sur le wrapper de page
   ------------------------------------------------------------ */
#cgu-page {
    --cgu-white: #ffffff;
    --cgu-bg: #f8fafc;
    --cgu-border: #e2e8f0;
    --cgu-border-soft: #f1f5f9;
    --cgu-dark: #1e293b;
    --cgu-text: #334155;
    --cgu-label: #64748b;
    --cgu-accent: #0891b2;
    --cgu-accent-soft: rgba(8, 145, 178, .16);
    --cgu-accent-tint: rgba(8, 145, 178, .05);

    --cgu-head-bg: #d1ecf1; /* couleur projet SPOT LMS — NE PAS CHANGER */
    --cgu-head-fg: #0c5460;

    --cgu-radius: 12px;
    --cgu-shadow: 0 2px 10px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .04);

    padding-bottom: 40px;
}

/* Anciens espaceurs <p>&nbsp;</p> du gabarit d'origine.
   Conservés dans le HTML (aucun contenu retiré) mais neutralisés :
   les espacements sont désormais pilotés par la mise en page. */
#cgu-page .cgu-void {
    display: none;
}

/* ------------------------------------------------------------
   10. Bandeau logo — identique à .faq-brand, à dessein :
       les deux pages publiques s'ouvrent sur le même en-tête.
   ------------------------------------------------------------ */
#cgu-page .cgu-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 26px 0 22px;
    padding: 18px 20px;
    background: var(--cgu-white);
    border: 1px solid var(--cgu-border);
    border-radius: var(--cgu-radius);
    box-shadow: var(--cgu-shadow);
}

#cgu-page .cgu-logo {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------
   11. Le document

   11.0 Le porte-onglets — TENUE SUR UNE SEULE LIGNE

   Les libellés viennent de la base et sont longs : en français,
   « Politique de Protection des Données Personnelles » à lui
   seul fait 48 signes, et les quatre onglets cumulent 106
   signes. Aux réglages Bootstrap d'origine (1rem, padding
   .5rem/1rem) la barre réclame 945 px — mesuré sur les métriques
   réelles de Noto Sans — alors que la colonne en offre 920 au
   plus large : le dernier onglet basculait sur une seconde
   ligne. Exigence client : une seule ligne.

   La compaction est donc calculée, pas approximée : trois
   paliers alignés sur la grille Bootstrap (voir le tableau des
   media queries plus bas), qui ramènent la barre à 795 / 729 /
   665 px pour 920 / 770 / 690 px disponibles.

   ⚠ PÉRIMÈTRE DE CES RÈGLES — à ne pas élargir.
     Ce sont les SEULES règles du fichier qui touchent aux
     classes d'onglets Bootstrap. Elles sont :
       - toutes scopées sous #cgu-page .cgu-tabbar, donc sans
         effet sur les onglets du reste de l'application ;
       - strictement dimensionnelles (padding, font-size,
         letter-spacing, white-space, flex, débordement).
     Aucune couleur, aucune bordure, aucun arrondi, aucune
     ombre, aucun traitement de l'état actif : l'apparence
     reste celle du template SPOT. Ne rien ajouter d'autre.

   ⚠ Pourquoi le débordement est porté par .cgu-tabbar et non
     par la liste elle-même : Bootstrap tire l'onglet actif de
     1 px vers le bas (margin-bottom: -1px) pour que sa bordure
     blanche recouvre le filet de la barre. Un overflow posé sur
     la liste rognerait ce dépassement et ferait réapparaître un
     trait sous l'onglet actif. Posé sur le conteneur parent, il
     laisse ce mécanisme intact.
   ------------------------------------------------------------ */
#cgu-page .cgu-tabbar {
    margin: 0;
    /* soupape : si la place manque malgré la compaction, la barre
       défile horizontalement plutôt que de passer à la ligne */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#cgu-page .cgu-tabbar .nav-tabs {
    flex-wrap: nowrap;
}

#cgu-page .cgu-tabbar .nav-item {
    flex: 0 0 auto;
}

#cgu-page .cgu-tabbar .nav-link {
    white-space: nowrap;
    padding: .5rem .72rem;
    font-size: .875rem;
    letter-spacing: -.008em;
}

/* 11.1 La carte-document.
   Un document par panneau d'onglet. L'écart de 26px sous la
   barre d'onglets est délibéré : la carte ne se « soude » pas
   à l'onglet actif, ce qui éviterait d'avoir à connaître — et
   donc à retoucher — la géométrie interne des onglets. */
#cgu-page .cgu-doc {
    position: relative;
    margin: 26px 0 0;
    background: var(--cgu-white);
    border: 1px solid var(--cgu-border);
    border-radius: var(--cgu-radius);
    box-shadow: var(--cgu-shadow);
    overflow: hidden; /* indispensable : coins arrondis de la barre de titre */
}

/* Filet d'accent en tête de carte : seul repère chromatique qui
   distingue les quatre documents. Il vit SOUS la barre de titre,
   qui reste #d1ecf1 dans les quatre cas (règle absolue). */
#cgu-page .cgu-doc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: var(--cgu-doc-accent);
}

/* Déclinaisons d'accent — pilotent le filet, les barres de titre
   internes et les puces de liste du document concerné. */
#cgu-page .cgu-doc { --cgu-doc-accent: #0891b2; }
#cgu-page .cgu-doc--tos { --cgu-doc-accent: #0891b2; }
#cgu-page .cgu-doc--privacy { --cgu-doc-accent: #3b82f6; }
#cgu-page .cgu-doc--security { --cgu-doc-accent: #8b5cf6; }
#cgu-page .cgu-doc--legal { --cgu-doc-accent: #64748b; }

/* 11.2 Barre de titre — RÈGLE ABSOLUE : fond #d1ecf1 / #0c5460,
   capitales, letter-spacing .08em. Les intitulés sont ici des
   libellés courts (« Mentions légales »), le motif s'applique
   donc sans réserve — contrairement à la FAQ (cf. §5.3). */
#cgu-page .cgu-doc-head {
    padding: 22px 34px 20px;
    background: var(--cgu-head-bg);
    color: var(--cgu-head-fg);
    border-bottom: 1px solid rgba(12, 84, 96, .14);
}

#cgu-page .cgu-doc-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cgu-head-fg);
    overflow-wrap: break-word;
}

/* Filet sous le titre : rappelle .faq-hero-rule / .tuto-hero */
#cgu-page .cgu-doc-rule {
    width: 44px;
    height: 3px;
    margin: 13px 0 0;
    border-radius: 2px;
    background: rgba(12, 84, 96, .38);
}

/* Sous-titre — n'existe que sur l'onglet Sécurité (texte 2736) */
#cgu-page .cgu-doc-sub {
    margin: 13px 0 0;
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .012em;
    color: rgba(12, 84, 96, .88);
}

#cgu-page .cgu-doc-body {
    padding: 34px;
}

/* ------------------------------------------------------------
   11.3 Le corps de texte juridique

   Le balisage vient de la base : on ne peut rien imposer, on
   peut seulement cadrer TOUS les cas plausibles. D'où une
   couverture large (h1→h6, p, ul/ol, table, blockquote, hr…)
   plutôt que quelques classes qui ne seraient jamais posées.
   ------------------------------------------------------------ */
#cgu-page .cgu-prose {
    /* aucune max-width : le texte occupe toute la colonne (cf. §9) */
    font-size: .97rem;
    line-height: 1.78;
    color: var(--cgu-text);
    text-align: left; /* et non justify : cf. préambule §9 */
    overflow-wrap: break-word;
}

#cgu-page .cgu-prose > *:first-child {
    margin-top: 0;
}

#cgu-page .cgu-prose > *:last-child {
    margin-bottom: 0;
}

#cgu-page .cgu-prose p {
    margin: 0 0 1.05em;
}

/* Titres de section — repérables au balayage grâce à la barre
   d'accent. Grosse marge HAUTE, petite marge basse : le titre
   appartient visuellement au bloc qu'il ouvre, pas au précédent.

   POURQUOI h3 EST TRAITÉ COMME UN TITRE DE PREMIER PLAN :
   le contenu réel stocké en base n'emploie QUE des <h3> comme
   niveau de section (vérifié sur les quatre documents : 12, 10,
   15 et 2 occurrences, aucun h1 ni h2). Réserver le repère
   graphique à h1/h2 l'aurait donc rendu invisible en pratique.
   Les trois niveaux sont marqués, avec une gradation nette : si
   un rédacteur imbrique un jour h2 ET h3, la hiérarchie tient
   (corps, graisse et épaisseur de barre diffèrent). */
#cgu-page .cgu-prose h1,
#cgu-page .cgu-prose h2,
#cgu-page .cgu-prose h3 {
    position: relative;
    color: var(--cgu-dark);
    letter-spacing: -.005em;
}

#cgu-page .cgu-prose h1::before,
#cgu-page .cgu-prose h2::before,
#cgu-page .cgu-prose h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    border-radius: 2px;
    background: var(--cgu-doc-accent, var(--cgu-accent));
}

#cgu-page .cgu-prose h1,
#cgu-page .cgu-prose h2 {
    margin: 2.15em 0 .7em;
    padding-left: 16px;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.38;
}

#cgu-page .cgu-prose h1::before,
#cgu-page .cgu-prose h2::before {
    width: 4px;
}

/* Rang subordonné : barre plus fine et adoucie, corps plus petit */
#cgu-page .cgu-prose h3 {
    margin: 1.9em 0 .6em;
    padding-left: 14px;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.45;
}

#cgu-page .cgu-prose h3::before {
    width: 3px;
    opacity: .62;
}

/* Rangs profonds : plus de graisse ni de corps disponibles sans
   entrer en concurrence avec h3 — on bascule sur la capitale
   espacée, qui lit comme un intertitre sans peser. */
#cgu-page .cgu-prose h4,
#cgu-page .cgu-prose h5,
#cgu-page .cgu-prose h6 {
    margin: 1.6em 0 .5em;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cgu-label);
}

#cgu-page .cgu-prose ul,
#cgu-page .cgu-prose ol {
    margin: 0 0 1.05em;
    padding-left: 24px;
}

#cgu-page .cgu-prose li {
    margin-bottom: .5em;
}

#cgu-page .cgu-prose li:last-child {
    margin-bottom: 0;
}

#cgu-page .cgu-prose li::marker {
    color: var(--cgu-doc-accent, var(--cgu-accent));
    font-weight: 700;
}

#cgu-page .cgu-prose a {
    color: var(--cgu-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--cgu-accent-soft);
    overflow-wrap: anywhere;
    transition: color .2s ease, border-color .2s ease;
}

#cgu-page .cgu-prose a:hover,
#cgu-page .cgu-prose a:focus {
    color: #0e7490;
    border-bottom-color: #0e7490;
    text-decoration: none;
}

#cgu-page .cgu-prose strong,
#cgu-page .cgu-prose b {
    color: var(--cgu-dark);
    font-weight: 700;
}

#cgu-page .cgu-prose em,
#cgu-page .cgu-prose i {
    color: var(--cgu-dark);
}

#cgu-page .cgu-prose hr {
    height: 1px;
    margin: 1.9em 0;
    border: 0;
    background: var(--cgu-border);
}

#cgu-page .cgu-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Citation / encadré d'avertissement, fréquent en juridique */
#cgu-page .cgu-prose blockquote {
    margin: 1.5em 0;
    padding: 14px 18px;
    background: var(--cgu-bg);
    border-left: 3px solid var(--cgu-doc-accent, var(--cgu-accent));
    border-radius: 0 8px 8px 0;
    font-size: .95rem;
    color: var(--cgu-text);
}

#cgu-page .cgu-prose blockquote > *:last-child {
    margin-bottom: 0;
}

/* Tableaux (durées de conservation, cookies, sous-traitants…) */
#cgu-page .cgu-prose table {
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.3em;
    border-collapse: collapse;
    font-size: .92rem;
    line-height: 1.6;
}

#cgu-page .cgu-prose th,
#cgu-page .cgu-prose td {
    padding: 9px 12px;
    border: 1px solid var(--cgu-border);
    text-align: left;
    vertical-align: top;
}

#cgu-page .cgu-prose th {
    background: var(--cgu-bg);
    color: var(--cgu-dark);
    font-weight: 700;
}

#cgu-page .cgu-prose code,
#cgu-page .cgu-prose kbd {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--cgu-border-soft);
    font-size: .9em;
    color: var(--cgu-dark);
}

/* ------------------------------------------------------------
   11.4 Responsive — de 360 px à 1920 px
   ------------------------------------------------------------ */
/* Les trois paliers ci-dessous suivent la grille Bootstrap, pas
   des valeurs rondes : la largeur réellement offerte au texte
   change à 1200 et à 992 px, parce que col-lg-10 offset-lg-1 ne
   s'applique plus en dessous de lg. Largeurs mesurées sur les
   métriques Noto Sans, libellés français (les plus longs) :

     palier            colonne   barre d'onglets
     xl  >= 1200 px     920 px     795 px   (Bootstrap : 945 → débordait)
     lg  992-1199 px    770 px     729 px
     md  768- 991 px    690 px     665 px
     <= 767 px             —       retour à la ligne (cf. plus bas) */
@media (max-width: 1199.98px) {
    #cgu-page .cgu-tabbar .nav-link {
        padding: .5rem .55rem;
        font-size: .82rem;
    }
}

@media (max-width: 991.98px) {
    /* la colonne perd l'offset lg et se resserre à 690 px :
       on compacte une dernière fois */
    #cgu-page .cgu-tabbar .nav-link {
        padding: .5rem .42rem;
        font-size: .76rem;
    }

    #cgu-page .cgu-doc-head {
        padding: 19px 26px 18px;
    }

    #cgu-page .cgu-doc-body {
        padding: 28px 26px 30px;
    }
}

@media (max-width: 767.98px) {
    /* MOBILE — retour au comportement Bootstrap d'origine.
       L'exigence « une seule ligne » vise l'écran large du
       client ; sous 768 px elle n'a plus de sens. À 360 px, le
       seul libellé « Politique de Protection des Données
       Personnelles » dépasse la largeur de l'écran : le forcer
       sur une ligne provoquerait soit un défilement horizontal
       de toute la page, soit un onglet inatteignable. On rend
       donc à la barre son passage à la ligne et au libellé sa
       césure — tous les onglets restent visibles et cliquables
       sans manipulation. */
    #cgu-page .cgu-tabbar {
        overflow-x: visible;
        overflow-y: visible;
    }

    #cgu-page .cgu-tabbar .nav-tabs {
        flex-wrap: wrap;
    }

    #cgu-page .cgu-tabbar .nav-link {
        white-space: normal;
        padding: .45rem .6rem;
        font-size: .84rem;
        letter-spacing: normal;
    }

    #cgu-page .cgu-brand {
        margin: 18px 0 16px;
        padding: 14px 16px;
    }

    #cgu-page .cgu-doc {
        margin-top: 20px;
    }

    #cgu-page .cgu-doc-head {
        padding: 16px 18px 15px;
    }

    #cgu-page .cgu-doc-title {
        font-size: 1.02rem;
        letter-spacing: .07em;
    }

    #cgu-page .cgu-doc-rule {
        margin-top: 11px;
    }

    #cgu-page .cgu-doc-sub {
        font-size: .92rem;
    }

    #cgu-page .cgu-doc-body {
        padding: 22px 18px 24px;
    }

    #cgu-page .cgu-prose {
        font-size: .94rem;
        line-height: 1.72;
    }

    #cgu-page .cgu-prose h1,
    #cgu-page .cgu-prose h2 {
        font-size: 1.1rem;
        padding-left: 14px;
    }

    #cgu-page .cgu-prose h3 {
        font-size: 1rem;
        padding-left: 12px;
    }
}

@media (max-width: 479.98px) {
    #cgu-page .cgu-doc {
        border-radius: 10px;
    }

    #cgu-page .cgu-doc-head {
        padding: 14px 15px 13px;
    }

    #cgu-page .cgu-doc-title {
        font-size: .94rem;
        letter-spacing: .06em;
    }

    #cgu-page .cgu-doc-body {
        padding: 19px 15px 21px;
    }

    #cgu-page .cgu-prose {
        font-size: .9rem;
        line-height: 1.7;
    }

    #cgu-page .cgu-prose h1,
    #cgu-page .cgu-prose h2 {
        font-size: 1.04rem;
        padding-left: 13px;
    }

    #cgu-page .cgu-prose h3 {
        font-size: .96rem;
        padding-left: 11px;
    }

    #cgu-page .cgu-prose ul,
    #cgu-page .cgu-prose ol {
        padding-left: 20px;
    }

    #cgu-page .cgu-prose th,
    #cgu-page .cgu-prose td {
        padding: 7px 9px;
    }
}

/* ------------------------------------------------------------
   12. Impression / archivage PDF

   LIMITE ASSUMÉE : seul le document affiché s'imprime. Déplier
   les quatre onglets exigerait de surcharger la règle Bootstrap
   qui masque les panneaux inactifs, ce que la consigne client
   interdit. Le comportement obtenu reste le bon : on imprime le
   document qu'on lit, pas les trois autres.

   La barre d'onglets est masquée : c'est un organe de
   navigation, il n'a pas de sens sur papier. C'est le SEUL
   effet de ce fichier sur les onglets, et il passe par notre
   propre conteneur .cgu-tabbar, jamais par une classe Bootstrap.
   Une ligne à retirer si le client préfère la conserver.
   ------------------------------------------------------------ */
@media print {
    #cgu-page {
        padding-bottom: 0;
    }

    #cgu-page .cgu-brand {
        margin: 0 0 14px;
        padding: 0 0 10px;
        border: 0;
        border-bottom: 1px solid #cbd5e1;
        border-radius: 0;
        box-shadow: none;
    }

    #cgu-page .cgu-tabbar {
        display: none;
    }

    #cgu-page .cgu-doc {
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    #cgu-page .cgu-doc::before {
        display: none;
    }

    /* la barre de titre est conservée à l'identique : c'est
       l'identité de la marque sur un document archivé */
    #cgu-page .cgu-doc-head {
        padding: 10px 14px;
        background: #d1ecf1 !important;
        color: #0c5460 !important;
        border-bottom: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #cgu-page .cgu-doc-title {
        font-size: 1rem;
    }

    #cgu-page .cgu-doc-sub {
        font-size: .88rem;
    }

    #cgu-page .cgu-doc-body {
        padding: 16px 0 0;
    }

    #cgu-page .cgu-prose {
        font-size: .86rem;
        line-height: 1.6;
        color: #1f2933;
    }

    /* un titre ne doit jamais rester seul en bas de page, ni un
       paragraphe se couper sur une ligne isolée */
    #cgu-page .cgu-prose h1,
    #cgu-page .cgu-prose h2,
    #cgu-page .cgu-prose h3,
    #cgu-page .cgu-prose h4,
    #cgu-page .cgu-prose h5,
    #cgu-page .cgu-prose h6 {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #cgu-page .cgu-prose p,
    #cgu-page .cgu-prose li {
        orphans: 3;
        widows: 3;
    }

    #cgu-page .cgu-prose table,
    #cgu-page .cgu-prose blockquote {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #cgu-page .cgu-prose a {
        color: #0c5460;
        border-bottom: 0;
    }
}