/* =====================================================================
   ADX FORMATION — Page « Qui sommes-nous ? » (bloc adx/page-qui-sommes-nous)
   Complète axf-front.css / axf-pillar.css : seuls les éléments propres
   à cette page sont stylés ici, tout le reste réutilise les classes
   existantes (hero pilier, axf-vertical-wrapper, kpi-card, team-card,
   axf-pillar…).
   ===================================================================== */

/* ---- Corps de page : espace hero/contenu + titre principal ----
   La page est rendue par UN SEUL bloc Gutenberg qui sort le hero et le
   corps : WordPress ne les laisse pas comme frères directement adjacents,
   donc le combinateur « + » de axf-pillar.css n'atteint pas ce bloc.
   On applique ici l'espace directement sur .axf-qsn-body via padding-top
   (pas de fusion de marges possible → toujours visible). */
.axf-qsn-body { padding-top: 120px; padding-bottom: 80px; font-family: 'Roboto', sans-serif; }
.axf-qsn-body .axf-section-title { font-size: 36px; }
.axf-qsn-subtitle {
    text-align: center; font-family: 'Oswald', sans-serif;
    font-size: 17px; letter-spacing: 2px; text-transform: uppercase;
    color: #8a7ba5; margin: -10px 0 50px;
}

/* Le wrapper vertical réutilise .axf-vertical-wrapper (home) ;
   on élargit simplement au gabarit de la page. */
.axf-qsn-wrapper { max-width: none; }

/* ---- Titres de sections ----
   H2 : barre jaune à gauche. H3 : puce carrée jaune, plus petit. */
.axf-qsn-h2 {
    position: relative; font-family: 'Oswald', sans-serif;
    font-size: 28px; font-weight: 700; text-transform: none;
    color: var(--axf-violet); margin: 0 0 18px; padding-left: 16px;
}
.axf-qsn-h2::before {
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 5px; background: var(--axf-jaune);
}
.axf-qsn-h3 {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--axf-violet); margin: 0 0 14px;
}
.axf-qsn-h3::before {
    content: ''; width: 10px; height: 10px; background: var(--axf-jaune);
    flex-shrink: 0;
}
.axf-qsn-h3--space { margin-top: 55px; }
.axf-qsn-block { margin: 70px 0 0; }
.axf-qsn-intro { font-size: 15px; line-height: 1.6; color: #555; margin: 0 0 30px; max-width: 860px; }
.axf-qsn-intro--center { margin: -10px auto 35px; text-align: center; }

/* ---- Frise « Notre Histoire » ---- */
.axf-qsn-timeline {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 30px; position: relative;
}
.axf-qsn-tl-item { text-align: center; position: relative; }
.axf-qsn-tl-year {
    font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 700;
    color: var(--axf-violet); margin-bottom: 12px;
}
.axf-qsn-tl-dot { position: relative; height: 18px; margin-bottom: 18px; }
.axf-qsn-tl-dot::before {
    /* ligne horizontale continue derrière les points */
    content: ''; position: absolute; top: 50%; left: -15px; right: -15px;
    height: 1px; background: #e0e0e0;
}
.axf-qsn-tl-item:first-child .axf-qsn-tl-dot::before { left: 25%; }
.axf-qsn-tl-item:last-child  .axf-qsn-tl-dot::before { right: 25%; }
.axf-qsn-tl-dot span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 3px solid var(--axf-jaune); box-sizing: border-box;
    box-shadow: 0 0 0 4px #fff;
}
.axf-qsn-tl-titre {
    font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--axf-violet); margin-bottom: 8px; line-height: 1.35;
}
.axf-qsn-tl-texte { font-size: 12.5px; line-height: 1.55; color: #888; }
.axf-qsn-tl-texte a { color: var(--axf-violet); font-weight: 700; text-decoration: underline; }

/* ---- Équipe : intro centrée + slogan ---- */
.axf-qsn-wrapper .axf-team-wrap { margin-top: 70px; }
h2.axf-team-head { margin-top: 0; } /* neutralise la marge par défaut des h2 */
.axf-qsn-tagline {
    margin-top: 35px; text-align: center;
    font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--axf-violet);
}

/* ---- Expertise · Nos domaines de formation (6 cartes détaillées) ----
   Réutilise la carte violette .axf-pillar de la home ; on ajoute une
   grille 3 colonnes et un paragraphe descriptif blanc. Les cartes de
   cette grille sont visibles d'emblée (pas d'animation dépendante du JS,
   contrairement aux jalons de l'intro qui gardent le comportement home). */
.axf-qsn-dom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.axf-qsn-dom-grid .axf-pillar { opacity: 1; transform: none; justify-content: flex-start; padding: 28px 24px; }
.axf-qsn-dom-texte {
    position: relative; z-index: 2;
    font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .85);
    margin: 12px 0 0;
}

/* ---- Expertise · Nos compétences spécifiques (4 encadrés) ----
   Texte descriptif complet sous la valeur : on autorise le retour à la
   ligne (le .kpi-lbl d'origine est en white-space:nowrap) et on laisse
   la hauteur s'adapter. Certains encadrés sont des liens (financement). */
.axf-qsn-stats { margin: 0; opacity: 1; transform: none; align-items: stretch; }
.axf-qsn-stats .axf-kpi-card { height: auto; min-height: 170px; padding: 25px 18px; box-sizing: border-box; }
a.axf-qsn-comp--link { text-decoration: none; cursor: pointer; }
a.axf-qsn-comp--link:hover { border-color: var(--axf-violet); }
.axf-qsn-stat-val {
    font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--axf-violet); white-space: nowrap;
}
.axf-qsn-stats .kpi-lbl.axf-qsn-stat-txt {
    white-space: normal; line-height: 1.5; font-size: 12px;
    max-width: 230px; margin: 10px auto 0; display: block;
}
a.axf-qsn-comp--link .axf-qsn-stat-txt::after {
    content: ' \2192'; color: var(--axf-jaune); font-weight: 700;
}

/* ---- Méthodologie (01 → 04) ---- */
.axf-qsn-met-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.axf-qsn-met-card {
    border: 1px solid #eee; border-radius: 4px; padding: 28px 22px;
    background: #fff; transition: all .3s ease;
}
.axf-qsn-met-card:hover {
    transform: translateY(-6px); border-color: var(--axf-violet);
    box-shadow: 0 15px 30px rgba(46, 31, 69, .08);
}
.axf-qsn-met-num {
    display: block; font-family: 'Oswald', sans-serif; font-size: 26px;
    font-weight: 700; color: var(--axf-jaune); margin-bottom: 12px;
}
.axf-qsn-met-titre {
    font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 500;
    color: var(--axf-violet); margin: 0 0 10px; line-height: 1.25;
}
.axf-qsn-met-texte { font-size: 13px; line-height: 1.55; color: #777; margin: 0; }

/* ---- Modalités (2 × 2, icône + texte) ---- */
.axf-qsn-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.axf-qsn-mod-card {
    display: flex; align-items: flex-start; gap: 20px;
    border: 1px solid #eee; border-radius: 4px; padding: 26px 24px;
    background: #fff; transition: all .3s ease;
}
.axf-qsn-mod-card:hover {
    border-color: var(--axf-violet);
    box-shadow: 0 15px 30px rgba(46, 31, 69, .08);
}
.axf-qsn-mod-icon {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(46, 31, 69, .05); color: var(--axf-violet);
    transition: all .3s ease;
}
.axf-qsn-mod-card:hover .axf-qsn-mod-icon { background: var(--axf-violet); color: var(--axf-jaune); }
.axf-qsn-mod-titre {
    font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--axf-violet); margin: 0 0 6px;
}
.axf-qsn-mod-texte { font-size: 13.5px; line-height: 1.6; color: #666; margin: 0; }

/* ---- Témoignages (citation) ---- */
.axf-qsn-quote {
    position: relative; padding: 45px 50px 40px 90px;
    background: #f7f6f9; border-left: 5px solid var(--axf-jaune);
}
.axf-qsn-quote-mark {
    position: absolute; top: 18px; left: 30px;
    font-family: 'Oswald', sans-serif; font-size: 70px; line-height: 1;
    color: rgba(46, 31, 69, .15);
}
.axf-qsn-quote-texte {
    font-size: 17px; line-height: 1.6; font-style: italic;
    color: #444; margin: 0 0 18px;
}
.axf-qsn-quote-link {
    display: inline-block; font-family: 'Oswald', sans-serif; font-size: 14px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--axf-violet); text-decoration: none;
    border-bottom: 2px solid var(--axf-jaune); padding-bottom: 2px;
    transition: color .3s ease;
}
.axf-qsn-quote-link:hover { color: #5e4682; }

/* ---- Certifications (badges + sous-groupe amiante) ---- */
.axf-certs.axf-qsn-chips {
    margin-top: 10px; padding-top: 0; border-top: none;
    justify-content: flex-start; gap: 14px;
    opacity: 1; transform: none; /* visibles sans dépendre de l'animation JS */
}
.axf-qsn-chip {
    display: inline-block; padding: 10px 20px;
    border: 1px solid #ddd; border-radius: 3px;
    font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px; color: var(--axf-violet);
    background: #fff; transition: all .3s ease;
}
.axf-qsn-chip:hover { border-color: var(--axf-violet); background: rgba(46, 31, 69, .03); }
.axf-qsn-cert-label {
    margin: 28px 0 0; font-size: 14px; font-weight: 700; color: #555;
}
.axf-qsn-chips--amiante { margin-top: 14px; }
.axf-qsn-chip--amiante {
    border-color: rgba(46, 31, 69, .35);
    background: rgba(46, 31, 69, .03);
}

/* =====================================================================
   LE CAMPUS — coordonnées, carte, accès, visuels et adresses utiles
   ===================================================================== */

/* Bandeau violet « ADX Formation « Le Campus » » */
.axf-qsn-camp-badge {
    display: inline-block; margin: 0 0 26px;
    padding: 10px 22px; background: var(--axf-violet); color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1.5px;
}

.axf-qsn-camp-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: start; }
.axf-qsn-camp-col { min-width: 0; }

/* ---- Coordonnées (adresse / horaires / recharge) ---- */
.axf-qsn-camp-infos {
    list-style: none; margin: 0; padding: 24px 26px;
    border: 2px solid var(--axf-violet); background: #f7f6fa;
}
.axf-qsn-camp-info {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 15px; line-height: 1.5; color: #322546; font-weight: 500;
}
.axf-qsn-camp-info + .axf-qsn-camp-info { margin-top: 18px; }
.axf-qsn-camp-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--axf-violet); color: var(--axf-jaune);
}

.axf-qsn-camp-note {
    margin: 20px 0 0; padding: 16px 20px;
    background: #f1eff5; border-left: 4px solid var(--axf-jaune);
    font-size: 14px; line-height: 1.6; color: #55506a; font-style: italic;
}

/* ---- Les 3 visuels ---- */
.axf-qsn-camp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.axf-qsn-camp-photos:empty { display: none; }
.axf-qsn-camp-photo { margin: 0; position: relative; overflow: hidden; background: #ece8f2; }
.axf-qsn-camp-photo img {
    display: block; width: 100%; height: 170px; object-fit: cover;
    transition: transform .45s ease;
}
.axf-qsn-camp-photo:hover img { transform: scale(1.06); }
.axf-qsn-camp-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 10px; background: rgba(46, 31, 69, .82); color: #fff;
    font-family: 'Oswald', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: .8px; line-height: 1.3;
}

/* ---- Carte Google Maps ---- */
.axf-qsn-camp-map {
    position: relative; padding-top: 62%; overflow: hidden;
    border: 8px solid #fff; box-shadow: 0 10px 30px rgba(46, 31, 69, .14);
    background: #ece8f2;
}
.axf-qsn-camp-map iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.axf-qsn-camp-dir {
    display: inline-block; margin-top: 14px;
    font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--axf-violet); text-decoration: none;
    border-bottom: 2px solid var(--axf-jaune); padding-bottom: 2px;
}
.axf-qsn-camp-dir::after { content: ' \2192'; color: var(--axf-jaune); font-weight: 700; }
.axf-qsn-camp-dir:hover { color: #000; }

/* ---- Encadrés secondaires (accès, gares, taxis) ---- */
.axf-qsn-camp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.axf-qsn-camp-mini + .axf-qsn-camp-mini,
.axf-qsn-camp-duo + .axf-qsn-camp-mini { margin-top: 16px; }
.axf-qsn-camp-mini {
    padding: 18px 20px; background: #f7f6fa; border: 1px solid #e6e1ee;
}
.axf-qsn-camp-mini h4,
.axf-qsn-camp-carte h4 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
    font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; color: var(--axf-violet);
}
.axf-qsn-camp-mini h4 svg,
.axf-qsn-camp-carte h4 svg { color: var(--axf-jaune); flex: 0 0 auto; }

.axf-qsn-camp-liste { list-style: none; margin: 0; padding: 0; }
.axf-qsn-camp-liste li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed #e0dae9;
    font-size: 13.5px; color: #5a5468;
}
.axf-qsn-camp-liste li:last-child { border-bottom: 0; }
.axf-qsn-camp-liste strong { color: var(--axf-violet); font-weight: 600; }
.axf-qsn-camp-liste a { color: #5a5468; text-decoration: none; white-space: nowrap; }
.axf-qsn-camp-liste a:hover { color: var(--axf-violet); text-decoration: underline; }
.axf-qsn-camp-liste--taxi li { flex-wrap: wrap; }

/* ---- Hébergements / restaurants ---- */
.axf-qsn-camp-duo--large { margin-top: 30px; gap: 22px; }
.axf-qsn-camp-carte {
    padding: 24px 26px; background: #fff; border: 1px solid #e6e1ee;
    box-shadow: 0 6px 20px rgba(46, 31, 69, .06);
}
.axf-qsn-camp-lieux { list-style: none; margin: 0; padding: 0; }
.axf-qsn-camp-lieu {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px 0; border-top: 1px solid #efecf4;
}
.axf-qsn-camp-lieu:first-child { border-top: 0; padding-top: 0; }
.axf-qsn-camp-lieu-nom {
    font-family: 'Oswald', sans-serif; font-size: 14.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; color: var(--axf-violet);
}
.axf-qsn-camp-lieu-adr { font-size: 13px; line-height: 1.45; color: #6b6580; }
.axf-qsn-camp-lieu-tel { font-size: 13.5px; font-weight: 600; color: #5a5468; text-decoration: none; }
.axf-qsn-camp-lieu-tel:hover { color: var(--axf-violet); text-decoration: underline; }

/* Emplacement réservé : visible dans l'éditeur uniquement. */
.axf-qsn-camp-photo--vide {
    display: flex; align-items: center; justify-content: center; height: 170px;
    border: 1px dashed #b9aed0; background: #f4f1f8;
    font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1px;
    text-transform: uppercase; color: #8a7ba5; text-align: center; padding: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .axf-qsn-camp-grid { grid-template-columns: 1fr; gap: 28px; }
    .axf-qsn-camp-duo--large { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .axf-qsn-camp-badge { font-size: 13px; padding: 9px 16px; letter-spacing: 1px; }
    .axf-qsn-camp-infos { padding: 18px 18px; }
    .axf-qsn-camp-photos { grid-template-columns: 1fr 1fr; gap: 8px; }
    .axf-qsn-camp-photo img { height: 120px; }
    .axf-qsn-camp-photo:nth-child(3) { grid-column: 1 / -1; }
    .axf-qsn-camp-duo { grid-template-columns: 1fr; }
    .axf-qsn-camp-carte { padding: 20px 18px; }
    .axf-qsn-camp-map { border-width: 5px; padding-top: 72%; }
    .axf-qsn-camp-liste li { flex-direction: column; gap: 2px; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .axf-qsn-dom-grid { grid-template-columns: 1fr 1fr; }
    .axf-qsn-met-grid { grid-template-columns: 1fr 1fr; }
    .axf-qsn-timeline { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
    .axf-qsn-tl-item:first-child .axf-qsn-tl-dot::before,
    .axf-qsn-tl-item:last-child  .axf-qsn-tl-dot::before { left: -15px; right: -15px; }
    .axf-qsn-stats { flex-wrap: wrap; }
    .axf-qsn-stats .axf-kpi-card { flex: 1 1 45%; }
}
@media (max-width: 700px) {
    .axf-qsn-body { padding-top: 60px; }
    .axf-qsn-body .axf-section-title { font-size: 26px; padding: 0 15px; }
    .axf-qsn-subtitle { font-size: 13px; padding: 0 15px; }
    .axf-qsn-timeline { grid-template-columns: 1fr; }
    .axf-qsn-tl-dot { display: none; }
    .axf-qsn-dom-grid, .axf-qsn-met-grid, .axf-qsn-mod-grid { grid-template-columns: 1fr; }
    .axf-qsn-stats .axf-kpi-card { flex: 1 1 100%; }
    .axf-qsn-quote { padding: 40px 25px 35px; }
    .axf-qsn-quote-mark { display: none; }
}

/* =====================================================================
   MOBILE — RESSERREMENT DES ESPACES

   Les blocs conservaient leurs marges de bureau (70px entre blocs,
   40px de gouttière dans la frise), ce qui créait de longues zones
   vides une fois la grille repliée sur une colonne.
   ===================================================================== */

@media (max-width: 700px) {
    .axf-qsn-body { padding-top: 34px; }

    /* Espacement inter-blocs : 70px -> 40px. */
    .axf-qsn-block { margin: 40px 0 0; }

    /* Frise : la gouttière verticale de 40px se cumulait avec les marges
       internes des éléments une fois passée sur une seule colonne. */
    .axf-qsn-timeline { gap: 22px; }
    .axf-qsn-tl-item { margin: 0; }

    /* Grilles repliées : gouttière homogène. */
    .axf-qsn-dom-grid,
    .axf-qsn-met-grid,
    .axf-qsn-mod-grid { gap: 14px; }

    /* Les cartes n'ont plus besoin d'une hauteur plancher sur une colonne. */
    .axf-qsn-stats { gap: 12px; }
    .axf-qsn-stats .axf-kpi-card { min-height: 0; padding: 20px 16px; }

    .axf-qsn-dom-grid .axf-pillar { padding: 22px 18px; }
    .axf-qsn-met-carte { padding: 22px 18px; }
    .axf-qsn-mod-carte { padding: 20px 18px; }

    .axf-qsn-quote { padding: 28px 20px 26px; margin-top: 34px; }

    .axf-qsn-intro { margin: 0 0 20px; }
}

@media (max-width: 480px) {
    .axf-qsn-block { margin: 32px 0 0; }
    .axf-qsn-body .axf-section-title { font-size: 23px; }
}