/*
  qui-suis-je.css — ajout du 28 juillet 2026 (refonte contenu complet,
  rien de l'ancien texte conservé). Remplace/complète les styles
  existants pour les bandes 2 à 7. Couleurs mappées sur les vraies
  variables du site (voir tableau de correspondance dans le brief
  d'origine) :
    #1e4f4c / #1B3B35 → var(--bleu)
    #5a8a87            → var(--ocre)
    #3D5A58             → #3a3a3a (convention texte courant du site)
    #d4ecea / #f0f7f6   → var(--gris-sep)
    #CCA15C             → var(--dore)
    #f6fbfa (fond clair)→ var(--creme)

  MàJ 6 août 2026 : retours de Béatrice (teal trop clair — voir
  palettes.css séparément — et police/paragraphes perçus comme un peu
  petits). Diagnostic complet mené avec Loïc via comparaisons DevTools
  contre un site "modèle" de référence : taille (15px) et police
  héritée (Times New Roman) déjà identiques, l'écart venait surtout
  de la largeur de colonne et du line-height. Choix final validé par
  Béatrice : police Calibri (repli Carlito, clone libre/gratuit
  métriquement identique, pour Mac/Linux qui n'ont pas Calibri
  nativement), 16px, line-height 1.5 — appliqué à TOUT le texte
  courant de la page (uniquement les <p> de contenu ; titres, chapôs,
  phrases-clés et emphases restent en Georgia serif, inchangés).
  Justify retiré sur toute la page à la demande de Loïc (anciennes
  règles commentées, pas supprimées) — à généraliser au reste du site
  si Béatrice valide, le justify semblant gênant pour les personnes
  dyslexiques.
*/

/* Import Google Fonts — Carlito (clone libre/gratuit de Calibri,
   métriquement identique) pour les systèmes qui n'ont pas Calibri
   nativement (Mac, Linux). Calibri est déjà installée sur la
   quasi-totalité des PC Windows. */
@import url('https://fonts.googleapis.com/css2?family=Carlito:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC 2 : Pourquoi les adultes
   À ajouter dans assets/css/qui-suis-je.css, avant le bloc
   « Mon parcours ».

   Couleurs en dur à remplacer par les variables de palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-pq {
    /* max-width: 700px; -- ancienne valeur, plus étroite que le reste de la page (6 août 2026) */
    max-width: none;/*820px;*/
    margin: 0; /* auto;*/
}
.qsj-bande-symetrique .cadre.qsj-cadre-etroit {
    max-width: 1000px;/*none;*/
}
.ident-test-link.ident-test-link {
    color: var(--dore);
    text-decoration: underline;
    text-underline-offset: 2px;
}


.qsj-pq-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 25px;
    color: var(--bleu);
    text-align: center;
    margin: 0 0 26px;
}

.qsj-bande-symetrique {
  padding: 3rem !important;
}

.qsj-pq p {
    /* font-size: 15px; line-height: 1.72; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0 0 17px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-pq p:last-child { margin-bottom: 0; }

/* Chapô : plus grand, en serif, pour ouvrir le bloc */
.qsj-pq-chapo {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
     /* ajout (6 août 2026) : différencier davantage du texte courant */
    font-weight: 500 !important;
    line-height: 1.62 !important;
    color: var(--bleu) !important;
    margin-bottom: 22px !important;
}

/* Phrase-clé : seule mise en exergue du bloc.
   Volontairement sans encadré — un filet doré suffit. */
.qsj-pq-cle {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 19px !important;
    line-height: 1.5 !important;
    color: var(--bleu) !important;
    text-align: center;
    margin: 30px auto !important;
    padding: 20px 0;
    border-top: 1px solid var(--gris-sep);
    border-bottom: 1px solid var(--gris-sep);
    position: relative;
}

.qsj-pq-cle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 54px;
    height: 1px;
    margin-left: -27px;
    background: var(--dore);
}

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .qsj-pq-chapo { font-size: 16px !important; }
    .qsj-pq-cle {
        font-size: 17px !important;
        margin: 24px auto !important;
        padding: 17px 0;
    }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-pq p { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-pq p { text-align: left; hyphens: none; }
.qsj-pq-cle { text-align: center !important; hyphens: none; }
@media (max-width: 620px) { .qsj-pq p { text-align: left; hyphens: none; } }

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC : Mon parcours
   À ajouter dans assets/css/qui-suis-je.css

   Mêmes correspondances de couleurs que la page d'accueil —
   Loïc remplace les valeurs en dur par les variables de
   palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-parcours-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 25px;
    color: var(--bleu);
    text-align: center;
    margin: 0 0 30px;
}

/* ── La frise ──────────────────────────────────────────────── */

.qsj-parcours-liste {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 820px;
}

.qsj-parcours-item {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 20px 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-parcours-item:last-child {
    border-bottom: 1px solid var(--gris-sep);
}

.qsj-parcours-date {
    flex: 0 0 118px;
    margin: 2px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    color: var(--ocre);
    letter-spacing: .01em;
}

.qsj-parcours-corps { flex: 1; }

.qsj-parcours-nom {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    color: var(--bleu);
    margin: 0 0 6px;
}

.qsj-parcours-texte {
    /* font-size: 14.5px; line-height: 1.62; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-parcours-texte + .qsj-parcours-texte {
    margin-top: 11px;
}

.qsj-parcours-texte a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.qsj-parcours-texte a:hover { color: var(--dore); }

.qsj-parcours-texte em {
    font-style: italic;
    color: var(--bleu);
}

/* ── Bandeau de chiffres ───────────────────────────────────── */

.qsj-parcours-chiffres {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 820px;
    margin: 30px auto 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-parcours-chiffres li {
    text-align: center;
}

.qsj-parcours-chiffres strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--dore);
    margin-bottom: 4px;
}

.qsj-parcours-chiffres span {
    display: block;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ocre);
}

/* ── Paragraphe pivot ──────────────────────────────────────── */

.qsj-parcours-pivot {
    max-width: 760px;
    margin: 34px auto 0;
    padding: 24px 28px;
    background: var(--creme);
    border-left: 2px solid var(--dore);
}

.qsj-parcours-pivot p {
    /* font-size: 15px; line-height: 1.68; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0 0 13px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-parcours-pivot p:first-child {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    color: var(--bleu);
}

.qsj-parcours-pivot p:last-child { margin-bottom: 0; }

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .qsj-parcours-item {
        flex-direction: column;
        gap: 4px;
    }
    .qsj-parcours-date {
        flex: none;
        font-size: 13px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .qsj-parcours-chiffres {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .qsj-parcours-pivot { padding: 20px 18px; }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-parcours-texte,
.qsj-parcours-pivot p { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-parcours-texte,
.qsj-parcours-pivot p { text-align: left; hyphens: none; }
@media (max-width: 620px) {
    .qsj-parcours-texte,
    .qsj-parcours-pivot p { text-align: left; hyphens: none; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC 4 : Ma démarche
   À ajouter dans assets/css/qui-suis-je.css.

   Couleurs en dur à remplacer par les variables de palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--bleu)  → pastilles numérotées (teal très foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-dem {
    max-width: 820px;
    margin: 0 auto;
}

.qsj-dem-sur {
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ocre);
    margin: 0 0 8px;
}

.qsj-dem-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 25px;
    color: var(--bleu);
    margin: 0 0 16px;
}

.qsj-dem-chapo {
    /* font-size: 14.5px; line-height: 1.68; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0 0 8px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-dem a {
    color: var(--bleu);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.qsj-dem a:hover { color: var(--dore); }

/* ── La liste ──────────────────────────────────────────────── */

.qsj-dem-liste {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.qsj-dem-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-dem-item:last-child {
    border-bottom: 1px solid var(--gris-sep);
}

.qsj-dem-num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: .04em;
    margin-top: 1px;
}

.qsj-dem-corps { flex: 1; }

.qsj-dem-corps p {
    /* font-size: 14.5px; line-height: 1.68; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0 0 11px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-dem-corps p:last-child { margin-bottom: 0; }

.qsj-dem-nom {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16.5px !important;
    line-height: 1.4 !important;
    color: var(--bleu) !important;
    margin-bottom: 8px !important;
}

.qsj-dem-corps em {
    font-style: italic;
    color: var(--bleu);
}

/* Phrase d'appui du principe 03 */
.qsj-dem-appui {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: var(--bleu) !important;
    padding-left: 15px;
    border-left: 2px solid var(--dore);
    margin-top: 14px !important;
}

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 620px) {
    .qsj-dem-item { gap: 14px; }
    .qsj-dem-num {
        flex: 0 0 29px;
        width: 29px;
        height: 29px;
        font-size: 11px;
    }
    .qsj-dem-nom { font-size: 15.5px !important; }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-dem-chapo,
.qsj-dem-corps p { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-dem-chapo,
.qsj-dem-corps p { text-align: left; hyphens: none; }
.qsj-dem-nom { text-align: left !important; hyphens: none; }
@media (max-width: 620px) {
    .qsj-dem-chapo,
    .qsj-dem-corps p { text-align: left; hyphens: none; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC 5 : Les instruments que j'utilise
   À ajouter dans assets/css/qui-suis-je.css.

   Couleurs en dur à remplacer par les variables de palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-ins {
    max-width: 820px;
    margin: 0 auto;
}

.qsj-ins-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 25px;
    color: var(--bleu);
    text-align: center;
    margin: 0 0 18px;
}

.qsj-ins-chapo {
    /* font-size: 15px; line-height: 1.7; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    max-width: 700px;
    margin: 0 auto 32px;
    text-align: center;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

/* ── Les deux groupes ──────────────────────────────────────── */

.qsj-ins-groupe {
    padding: 22px 0 4px;
    border-top: 1px solid var(--gris-sep);
}

.qsj-ins-h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 19px;
    color: var(--bleu);
    margin: 0 0 8px;
}

.qsj-ins-def {
    /* font-size: 14px; line-height: 1.62; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: var(--bleu);/*var(--ocre);*/
    margin: 0 0 18px;
    max-width: 700px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

/* ── Les listes ────────────────────────────────────────────── */

.qsj-ins-liste {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    margin: 0;
}

.qsj-ins-liste dt {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ocre);
    padding: 9px 20px 9px 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-ins-liste dd {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--bleu);
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-ins-liste dt:first-of-type,
.qsj-ins-liste dd:first-of-type {
    border-top: 0;
}

/* ── Note de fin ───────────────────────────────────────────── */

.qsj-ins-fin {
    /* font-size: 14px; line-height: 1.68; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    max-width: 700px;
    margin: 28px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--gris-sep);
    position: relative;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-ins-fin::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 54px;
    height: 1px;
    background: var(--dore);
}

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .qsj-ins-chapo { text-align: left; }
    .qsj-ins-liste { grid-template-columns: 1fr; }
    .qsj-ins-liste dt {
        padding: 12px 0 2px;
        letter-spacing: .04em;
        text-transform: uppercase;
        font-size: 11.5px;
    }
    .qsj-ins-liste dd {
        padding: 0 0 4px;
        border-top: 0;
    }
    .qsj-ins-liste dd:first-of-type { border-top: 0; }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-ins-def,
.qsj-ins-fin { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-ins-def,
.qsj-ins-fin { text-align: left; hyphens: none; }
@media (max-width: 620px) {
    .qsj-ins-def,
    .qsj-ins-fin { text-align: left; hyphens: none; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC 6 : Ce sur quoi le bilan s'appuie
   À ajouter dans assets/css/qui-suis-je.css.

   Couleurs en dur à remplacer par les variables de palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-ap {
    /* max-width: 700px; -- ancienne valeur, plus étroite que le reste de la page (6 août 2026) */
    max-width: 820px;
    margin: 0 auto;
}

.qsj-ap-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 25px;
    color: var(--bleu);
    text-align: center;
    margin: 0 0 26px;
}

.qsj-ap p {
    /* font-size: 15px; line-height: 1.72; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0 0 17px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-ap > p:last-child { margin-bottom: 0; }

/* Encadré d'ouverture : la contrepartie du paragraphe de refus.
   Fond clair et filet doré — le même vocabulaire graphique que
   le paragraphe pivot du bloc « Mon parcours ». */
.qsj-ap-ouverture {
    background: #fff;
    border-left: 2px solid var(--dore);
    padding: 22px 26px;
    margin: 26px 0;
}

.qsj-ap-ouverture p {
    margin-bottom: 13px;
    font-family: Calibri, Carlito, Arial, sans-serif;
}
.qsj-ap-ouverture p:last-child { margin-bottom: 0; }

.qsj-ap-ouverture strong {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 17px;
    color: var(--bleu);
}

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .qsj-ap-ouverture {
        padding: 18px 16px;
        margin: 22px 0;
    }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-ap p,
.qsj-ap-ouverture p { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-ap p,
.qsj-ap-ouverture p { text-align: left; hyphens: none; }
@media (max-width: 620px) {
    .qsj-ap p,
    .qsj-ap-ouverture p { text-align: left; hyphens: none; }
}

/* ══════════════════════════════════════════════════════════════
   PAGE « QUI SUIS-JE » — BLOC 7 : Le cadre
   À ajouter dans assets/css/qui-suis-je.css, en dernier.

   Couleurs en dur à remplacer par les variables de palettes.css :
     var(--bleu)  → titre (teal foncé)
     var(--ocre)  → accent (teal clair)
     #3a3a3a  → texte courant
     var(--gris-sep)  → filet
     var(--dore)  → accent doré
   ══════════════════════════════════════════════════════════════ */

.qsj-cad {
    max-width: 780px;
    margin: 0 auto;
}

.qsj-cad-titre {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-size: 25px;
    color: var(--bleu);
    text-align: center;
    margin: 0 0 14px;
}

.qsj-cad-chapo {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.62 !important;
    color: var(--bleu) !important;
    text-align: center;
    max-width: 620px;
    margin: 0 auto 30px;
    
}

/* ── Les mentions ──────────────────────────────────────────── */

.qsj-cad-liste {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--gris-sep);
}

.qsj-cad-liste dt {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ocre);
    padding: 15px 22px 15px 0;
    border-bottom: 1px solid var(--gris-sep);
}

.qsj-cad-liste dd {
    /* font-size: 14.5px; line-height: 1.62; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--gris-sep);
    font-family: Calibri, Carlito, Arial, sans-serif;
}

/* Les deux numéros : chiffres détachés, en serif, pour qu'on
   puisse les relire et les recopier sans erreur.
   Ciblés par CLASSE et non par nth-of-type : toute ligne insérée
   dans la liste décalerait les sélecteurs de position.
   Reste volontairement en Georgia (pas Calibri) : ce sont des
   identifiants officiels (ADELI/RPPS/ORCID), pas du texte courant. */
.qsj-cad-liste dd.qsj-cad-num {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 17px;
    letter-spacing: .06em;
    color: var(--bleu);
}

.qsj-cad-liste dd:last-of-type { border-bottom: 1px solid var(--gris-sep); }
.qsj-cad-liste dt:last-of-type { border-bottom: 1px solid var(--gris-sep); }

.qsj-cad a {
    color: var(--bleu);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.qsj-cad a:hover { color: var(--dore); }

/* ── La ligne « Publication » ──────────────────────────────── */

.qsj-cad-livre {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.qsj-cad-livre img {
    flex: 0 0 auto;
    width: 96px;
    height: auto;
    border: 1px solid var(--gris-sep);
}

.qsj-cad-livre span { flex: 1; }

/* ── Formation et veille ───────────────────────────────────── */

.qsj-cad-note {
    margin: 26px 0 0;
    padding: 20px 24px;
    background: var(--creme);
    border-left: 2px solid var(--dore);
}

.qsj-cad-note p {
    /* font-size: 14.5px; line-height: 1.68; -- valeurs d'origine (6 août 2026) */
    font-size: 16px;
    line-height: 1.5;
    color: #3a3a3a;
    margin: 0;
    font-family: Calibri, Carlito, Arial, sans-serif;
}

.qsj-cad-note strong {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: var(--bleu);
}

/* ── Appel à l'action doux ─────────────────────────────────── */

.qsj-cad-cta {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.62;
    color: var(--bleu);
    text-align: center;
    max-width: 600px;
    margin: 32px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--gris-sep);
}

/* ── Adaptatif ─────────────────────────────────────────────── */

@media (max-width: 700px) {
    .qsj-cad-chapo { text-align: left; }
    .qsj-cad-liste { grid-template-columns: 1fr; }
    .qsj-cad-liste dt {
        padding: 14px 0 3px;
        border-bottom: 0;
    }
    .qsj-cad-liste dd {
        padding: 0 0 14px;
    }
    .qsj-cad-liste dt:last-of-type { border-bottom: 0; }
    .qsj-cad-note { padding: 17px 16px; }
}

/* ── Justification du texte courant ────────────────────────── */
/* .qsj-cad-liste dd,
.qsj-cad-note p { text-align: justify; text-justify: inter-word; hyphens: auto; } -- ancien (6 août 2026) */
.qsj-cad-liste dd,
.qsj-cad-note p { text-align: left; hyphens: none; }
.qsj-cad-chapo, .qsj-cad-cta { text-align: center; hyphens: none; }
@media (max-width: 700px) {
    .qsj-cad-liste dd,
    .qsj-cad-note p,
    .qsj-cad-chapo { text-align: left; hyphens: none; }
}


/* ══ BANDE 1 — Portrait (nouveau, pas dans le brief d'origine —
   juste titre + photo, sans texte d'accompagnement) ══ */

.qsj-portrait {
  text-align: center;
}
.qsj-portrait-titre {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: normal;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--bleu);
  margin: 0 0 1.5rem;
}
.qsj-portrait-photo {
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 3px solid var(--ocre);
  display: block;
  margin: 0 auto;
}