/* =========================================================================
   RH Outremer — components.css
   Composants réutilisables : header/nav, boutons, badges, cartes,
   chiffres clés, bloc CTA, carrousel logos, footer, breadcrumb.
   Respecte la charte : parme jamais en texte courant sur fond blanc.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Header sticky + navigation (burger sur mobile)
   ------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--blanc);
    transition: box-shadow var(--transition), background var(--transition);
}
/* Ombre ajoutée par main.js au scroll. */
.site-header--scrolled {
    box-shadow: var(--ombre-header);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    min-height: var(--header-hauteur);
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bleu-dark);
    line-height: 1;
}
.nav__logo img {
    display: block;
    height: 48px;              /* 243x100 affiche en 117x48, soit 2x sur ecran retina */
    width: auto;
}
@media (max-width: 640px) {
    .nav__logo img { height: 36px; }   /* laisse la place au bouton burger */
}

/* Liste des liens */
.nav__liste {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
}
.nav__lien {
    color: var(--texte);
    font-weight: 500;
    font-size: var(--fs-small);
    padding-block: var(--esp-2);
    position: relative;
}
.nav__lien:hover,
.nav__lien[aria-current="page"] {
    color: var(--bleu);
}
.nav__lien[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--bleu);
    border-radius: var(--rayon-pill);
}

/* Le CTA de la nav réutilise .btn (voir plus bas). */
.nav__cta { margin-left: var(--esp-2); }

/* Entrées de compte : « Mon compte » / « Mon espace » / « Mes ressources »
   et « Déconnexion ». Pastilles parme pour qu'un client les repère d'un coup
   d'œil, distinctes des liens texte et du bouton bleu « Nous contacter ».
   Le texte reste en --bleu-dark : le parme n'est jamais une couleur de texte
   sur blanc (2,7:1). Contrastes : --bleu-dark sur --parme-15 posé sur blanc
   11,2:1 ; sur --parme plein (survol) 4,7:1. */
.nav__lien--compte,
.nav__lien--sortie {
    display: inline-flex;
    align-items: center;
    padding: var(--esp-1) var(--esp-4);
    border: 1px solid var(--parme);
    border-radius: var(--rayon-pill);
    color: var(--bleu-dark);
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}
.nav__lien--compte {
    background: var(--parme-15);
}
.nav__lien--compte:hover,
.nav__lien--compte[aria-current="page"] {
    background: var(--parme);
    color: var(--bleu-dark);
}
.nav__lien--sortie {
    background: transparent;
}
.nav__lien--sortie:hover {
    background: var(--parme-15);
    color: var(--bleu-dark);
}
/* La pastille marque déjà la page courante : pas de trait en plus. */
.nav__lien--compte[aria-current="page"]::after {
    content: none;
}

/* Bouton burger : masqué au-dessus de 1024px. */
.nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: var(--rayon-sm);
}
.nav__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--texte);
    border-radius: var(--rayon-pill);
    transition: transform var(--transition), opacity var(--transition);
}
/* Croix quand le menu est ouvert. */
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile first : menu en panneau déroulant --- */
@media (max-width: 1023px) {
    .nav__menu {
        position: fixed;
        inset: var(--header-hauteur) 0 auto 0;
        background: var(--blanc);
        border-top: 1px solid var(--surface);
        box-shadow: var(--ombre-header);
        padding: var(--esp-5) var(--esp-4) var(--esp-6);
        display: flex;
        flex-direction: column;
        gap: var(--esp-4);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    }
    .nav__menu.est-ouvert {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .nav__liste {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--esp-3);
        width: 100%;
    }
    .nav__lien { font-size: 1.05rem; }
    .nav__cta { margin-left: 0; width: 100%; }
    .nav__cta .btn { width: 100%; }
}

/* --- Desktop : menu horizontal, burger masqué --- */
@media (min-width: 1024px) {
    .nav__burger { display: none; }
    .nav__menu {
        display: flex !important;
        align-items: center;
        gap: var(--esp-5);
    }
}

/* --- Groupe déroulant « Qui sommes-nous ? » ---
   Le déclencheur est un vrai <button> : actionnable au clavier et au tactile
   sans contournement, et il n'entre pas dans la fermeture du burger,
   câblée sur les <a> du menu (main.js). */
.nav__groupe {
    position: relative;
}
.nav__lien--groupe {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.nav__lien--groupe[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
}
.nav__lien--groupe[aria-expanded="true"] {
    color: var(--bleu);
}
.nav__sous-lien {
    display: block;
    color: var(--texte);
    font-weight: 500;
    font-size: var(--fs-small);
}
.nav__sous-lien:hover,
.nav__sous-lien[aria-current="page"] {
    color: var(--bleu);
}

/* --- Mobile : accordéon dans le panneau burger --- */
@media (max-width: 1023px) {
    .nav__groupe { width: 100%; }
    .nav__lien--groupe {
        width: 100%;
        justify-content: space-between;
        font-size: 1.05rem;
    }
    .nav__sous-menu {
        display: none;
        flex-direction: column;
        gap: var(--esp-3);
        margin: var(--esp-3) 0 var(--esp-2);
        padding-left: var(--esp-4);
        border-left: 2px solid var(--parme);
    }
    .nav__lien--groupe[aria-expanded="true"] + .nav__sous-menu { display: flex; }
    .nav__sous-lien { font-size: 1rem; }
}

/* --- Desktop : carte flottante.
   L'ouverture dépend du seul attribut aria-expanded, piloté par main.js
   (clic, survol, focus). Une règle :hover ou :focus-within en CSS rouvrirait
   le menu juste après une fermeture par Échap. --- */
@media (min-width: 1024px) {
    .nav__sous-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 15rem;
        display: flex;
        flex-direction: column;
        gap: var(--esp-1);
        margin-top: var(--esp-2);
        padding: var(--esp-3);
        background: var(--blanc);
        border: 1px solid var(--surface);
        border-radius: var(--rayon-md);
        box-shadow: var(--ombre-carte);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }
    .nav__lien--groupe[aria-expanded="true"] + .nav__sous-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav__sous-lien {
        padding: var(--esp-2) var(--esp-3);
        border-radius: var(--rayon-sm);
        transition: background var(--transition), color var(--transition);
    }
    .nav__sous-lien:hover { background: var(--bleu-05); }
}

/* -------------------------------------------------------------------------
   2. Boutons
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-base);
    line-height: 1;
    padding: 0.85em 1.6em;
    border-radius: var(--rayon-pill);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

/* Primaire : bleu plein. */
.btn--primaire {
    background: var(--bleu);
    color: var(--blanc);
}
.btn--primaire:hover {
    background: var(--bleu-dark);
    color: var(--blanc);
}

/* Secondaire : contour bleu sur fond clair. */
.btn--secondaire {
    background: transparent;
    color: var(--bleu);
    border-color: var(--bleu);
}
.btn--secondaire:hover {
    background: var(--bleu);
    color: var(--blanc);
}

/* Variantes sur fond sombre. */
.btn--sur-sombre {
    background: var(--blanc);
    color: var(--bleu-dark);
}
.btn--sur-sombre:hover {
    background: var(--parme);
    color: var(--bleu-dark);
}
.btn--contour-clair {
    background: transparent;
    color: var(--blanc);
    border-color: var(--blanc-70);
}
.btn--contour-clair:hover {
    background: var(--blanc-15);
    color: var(--blanc);
    border-color: var(--blanc);
}

/* Bouton parme avec halo (CTA « PARLONS DE VOS PROJETS ! »). */
/* Texte en bleu profond : 4,7:1 sur parme (AA), 5,3:1 au survol.
   Le blanc n'y atteignait que 2,7:1 (corrigé le 09/10/2026). */
.btn--parme {
    background: var(--parme);
    color: var(--bleu-dark);
    box-shadow: 0 10px 28px rgba(164, 139, 255, 0.45);
}
.btn--parme:hover {
    filter: brightness(1.08);
    color: var(--bleu-dark);
}

/* Double chevron du CTA « PARLONS DE VOS PROJETS ! ». */
.btn__chevrons { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   3. Badge (pastille surtitre) et surtitre
   Parme utilisé en accent (fond teinté + point), pas en texte courant.
   ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.01em;
    color: var(--bleu-dark);
    background: var(--parme-15);
    border: 1px solid var(--parme);
    padding: 0.4em 0.9em;
    border-radius: var(--rayon-pill);
}
/* Petit losange parme façon « ❖ » (maquette bloc ADN). */
.badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--parme);
    border-radius: 2px;
    transform: rotate(45deg);
    flex-shrink: 0;
}
/* Sur fond sombre : le texte du badge passe en clair. */
.section--sombre .badge,
.badge--sur-sombre {
    color: var(--blanc);
    background: var(--blanc-15);
    border-color: var(--blanc-15);
}
/* Variante parme pleine (badge du hero). Texte bleu profond (4,7:1) : le
   blanc sur parme plafonne à 2,7:1 (corrigé le 10/10/2026, comme btn--parme). */
.badge--parme {
    background: var(--parme);
    border-color: var(--parme);
    color: var(--bleu-dark);
}
.badge--parme::before { background: var(--bleu-dark); }
/* Variante contour bleu sur fond blanc, avec icône en ligne (badge références). */
.badge--contour {
    background: var(--blanc);
    border-color: var(--bleu);
    color: var(--bleu-dark);
}
.badge--icone::before { display: none; }
.badge svg { width: 18px; height: 18px; color: var(--bleu); flex-shrink: 0; }

/* Surtitre (au-dessus d'un titre). Sur blanc : bleu (jamais parme). */
.surtitre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bleu);
    margin-bottom: var(--esp-2);
}

/* Accent parme réservé aux fonds sombres (ex. « à votre écoute »). */
.accent-parme { color: var(--parme); }

/* -------------------------------------------------------------------------
   4. Carte prestation
   ------------------------------------------------------------------------- */
.carte {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    background: var(--blanc);
    /* Fond clair : la couleur du texte est declaree ici, pour rester lisible
       meme imbriquee dans une section sombre. */
    color: var(--texte);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-lg);
    padding: var(--esp-6);
    box-shadow: var(--ombre-carte);
    transition: box-shadow var(--transition), transform var(--transition);
    height: 100%;
}
.carte:hover {
    box-shadow: var(--ombre-carte-survol);
    transform: translateY(-4px);
}
/* Icône ronde en tête de carte. */
.carte__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bleu-10);
    color: var(--bleu);
}
.carte__icone svg { width: 28px; height: 28px; }
/* Couleur declaree : sur une section sombre, le defaut :where() repeindrait le titre en blanc. */
.carte__titre { font-size: var(--fs-h3); color: var(--texte); }
.carte__texte { color: var(--texte-70); }
/* Lien « En savoir plus → » poussé en bas de carte. */
.carte__lien {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-weight: 600;
    color: var(--bleu);
}
.carte__lien:hover { gap: var(--esp-3); }

/* -------------------------------------------------------------------------
   5. Rectangle « chiffre clé » (avec icône coche)
   Utilisé sur le hero (fond sombre) : texte clair.
   ------------------------------------------------------------------------- */
.chiffre {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    background: var(--blanc-15);
    border: 1px solid var(--blanc-15);
    border-radius: var(--rayon-md);
    padding: var(--esp-4);
}
.chiffre__coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(164, 139, 255, 0.15);
    border: 2px solid var(--parme);
    color: var(--parme);
}
.chiffre__coche svg { width: 18px; height: 18px; }
/* Titre et sous-titre l'un sous l'autre (review du 24/10/2026). */
.chiffre__titre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--blanc);
}
.chiffre__sous {
    display: block;
    font-size: var(--fs-small);
    color: var(--blanc-70);
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   6. Bloc CTA commun (fond bleu foncé)
   ------------------------------------------------------------------------- */
/* Bande pleine largeur (fond bleu foncé), crochets d'angle parme + pinceau. */
.cta-bande {
    position: relative;
    overflow: hidden;
    background: var(--bleu-dark);
    color: var(--blanc);
    text-align: center;
    padding-block: var(--esp-9);
}
/* Crochets d'angle en L (haut-gauche et bas-droite). */
.cta-bande::before,
.cta-bande::after {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    border: 3px solid var(--parme);
    pointer-events: none;
}
.cta-bande::before { top: 28px;    left: 28px;  border-right: 0; border-bottom: 0; }
.cta-bande::after  { bottom: 28px; right: 28px; border-left: 0;  border-top: 0; }
/* Coup de pinceau en filigrane sur la gauche. */
.cta-bande__pinceau {
    position: absolute;
    left: -40px;
    top: 50%;
    width: 340px;
    transform: translateY(-50%) rotate(-18deg);
    color: var(--blanc);
    opacity: 0.10;
    pointer-events: none;
}
.cta-bande__contenu { position: relative; z-index: 1; }
.cta-bande__titre { color: var(--blanc); font-size: var(--fs-h1); }
.cta-bande__texte {
    color: var(--blanc);
    max-width: 46ch;
    margin: var(--esp-4) auto var(--esp-6);
    font-size: var(--fs-lead);
}
/* « à votre écoute » en parme (sur fond sombre : autorisé). */
.cta-bande__texte .accent-parme { color: var(--parme); font-weight: 600; }
@media (max-width: 640px) {
    .cta-bande::before, .cta-bande::after { width: 32px; height: 32px; }
    .cta-bande::before { top: 16px; left: 16px; }
    .cta-bande::after  { bottom: 16px; right: 16px; }
}

/* -------------------------------------------------------------------------
   7. Encart « Nouveauté » (hero)
   ------------------------------------------------------------------------- */
.encart-nouveaute {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    background: var(--blanc);
    border-radius: var(--rayon-md);
    padding: var(--esp-4) var(--esp-5);
    box-shadow: 0 12px 32px rgba(1, 34, 146, 0.22);
    max-width: 320px;
}
.encart-nouveaute__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--rayon-md);
    background: var(--parme-15);
    color: var(--parme);
}
.encart-nouveaute__icone svg { width: 24px; height: 24px; }
.encart-nouveaute__label {
    display: block;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--parme);
    line-height: 1.2;
}
.encart-nouveaute__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texte);
}
/* Tout l'encart mène à la boutique (review du 24/10/2026) : le lien du titre
   s'étend sur l'encart par un pseudo-élément, sans second lien ni JavaScript.
   L'encart est positionné (absolute dans le hero, relative sinon). */
.encart-nouveaute { position: relative; }
.encart-nouveaute__titre::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--rayon-md);
}
.encart-nouveaute:hover .encart-nouveaute__titre { color: var(--bleu); }
.encart-nouveaute__titre:focus-visible { outline: none; }
.encart-nouveaute:has(.encart-nouveaute__titre:focus-visible) {
    outline: 3px solid var(--bleu);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   8. Carrousel de logos (défilement continu, pause au survol)
   ------------------------------------------------------------------------- */
.carrousel-logos {
    overflow: hidden;
    width: 100%;
    /* Dégradé de fondu sur les bords. */
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.carrousel-logos__piste {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    width: max-content;
    padding-block: var(--esp-3);
    animation: defilement-logos 32s linear infinite;
}
.carrousel-logos:hover .carrousel-logos__piste,
.carrousel-logos__piste:focus-within {
    animation-play-state: paused;
}
/* Chaque logo dans sa carte blanche arrondie (maquette). */
.carrousel-logos__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    min-width: 190px;
    flex-shrink: 0;
    padding: var(--esp-4) var(--esp-5);
    background: var(--blanc);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-md);
    box-shadow: var(--ombre-carte);
    color: var(--texte-70);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.05rem;
    text-align: center;
    transition: box-shadow var(--transition), transform var(--transition);
}
.carrousel-logos__item:hover {
    box-shadow: var(--ombre-carte-survol);
    transform: translateY(-3px);
}
.carrousel-logos__item img {
    max-height: 72px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Défile sur la moitié : la piste contient 2 copies pour une boucle continue. */
@keyframes defilement-logos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .carrousel-logos__piste { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* -------------------------------------------------------------------------
   9. Breadcrumb (fil d'ariane)
   ------------------------------------------------------------------------- */
.breadcrumb {
    font-size: var(--fs-small);
    color: var(--texte-70);
    padding-block: var(--esp-4);
}
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--texte-70);
    opacity: 0.5;
}
.breadcrumb a { color: var(--texte-70); }
.breadcrumb a:hover { color: var(--bleu); }
.breadcrumb [aria-current="page"] { color: var(--texte); font-weight: 500; }

/* -------------------------------------------------------------------------
   10. Footer (fond sombre, territoires, contact, réseaux)
   ------------------------------------------------------------------------- */
.site-footer {
    background: var(--bleu-dark);
    color: var(--blanc-70);
    padding-block: var(--esp-8) var(--esp-6);
}
.site-footer a { color: var(--blanc-70); }
.site-footer a:hover { color: var(--blanc); }

.footer-grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .footer-grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer__logo {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--blanc);
    margin-bottom: var(--esp-3);
    display: inline-block;
}
.footer__logo img {
    display: block;
    height: 112px;             /* 300x193 affiche en 174x112 */
    width: auto;
}

.footer__presentation { max-width: 42ch; font-size: var(--fs-small); }

.footer__titre {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blanc);
    margin-bottom: var(--esp-4);
}
.footer__liste { display: flex; flex-direction: column; gap: var(--esp-2); }

/* Cartes des territoires cliquables. */
.footer-territoires {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
}
.footer-territoires a {
    display: inline-block;
    font-size: var(--fs-small);
    padding: 0.3em 0.8em;
    border: 1px solid var(--blanc-15);
    border-radius: var(--rayon-pill);
    background: var(--blanc-15);
    color: var(--blanc);
    transition: background var(--transition);
}
.footer-territoires a:hover { background: var(--bleu); }

/* Contact. */
.footer-contact { font-size: var(--fs-small); font-style: normal; display: flex; flex-direction: column; gap: var(--esp-2); }

/* Réseaux sociaux. */
.footer-reseaux { display: flex; gap: var(--esp-3); margin-top: var(--esp-4); }
.footer-reseaux a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blanc-15);
    color: var(--blanc);
}
.footer-reseaux a:hover { background: var(--bleu); }
.footer-reseaux svg { width: 20px; height: 20px; }

.footer__bas {
    margin-top: var(--esp-7);
    padding-top: var(--esp-5);
    border-top: 1px solid var(--blanc-15);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-4);
    justify-content: space-between;
    font-size: var(--fs-small);
}
.footer__bas-liens { display: flex; flex-wrap: wrap; gap: var(--esp-4); }
/* « Gérer les cookies » : un bouton (il rouvre le bandeau, ne mène nulle part)
   présenté comme les liens voisins (30/10/2026, retrait du consentement). */
.footer__bas-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--blanc-70);
    cursor: pointer;
}
.footer__bas-bouton:hover { color: var(--blanc); }

/* -------------------------------------------------------------------------
   11. En-tête de section (surtitre + titre + intro), réutilisable
   ------------------------------------------------------------------------- */
/* Titres de bloc colorés (maquette : « Notre ADN » bleu vif, etc.). */
.titre--bleu { color: var(--bleu); }
.titre--navy { color: var(--bleu-dark); }

.entete-section { margin-bottom: var(--esp-7); }
.entete-section .badge,
.entete-section .surtitre { margin-bottom: var(--esp-3); }
.entete-section h2 { margin-bottom: var(--esp-4); }
.entete-section__intro {
    color: var(--texte-70);
    font-size: var(--fs-lead);
    max-width: 60ch;
}
.entete-section.centre .entete-section__intro { margin-inline: auto; }
.section--sombre .entete-section__intro { color: var(--blanc-70); }

/* -------------------------------------------------------------------------
   12. Hero (page d'accueil)
   ------------------------------------------------------------------------- */
.hero {
    /* Bleu profond, légèrement éclairci côté visuel (maquette). */
    background:
        radial-gradient(120% 130% at 78% 25%, rgba(0, 51, 204, 0.55) 0%, transparent 55%),
        var(--bleu-dark);
    color: var(--blanc);
    padding-block: var(--esp-8) var(--esp-9);
    position: relative;
    overflow: hidden;
}
.hero__grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    /* Le visuel s'étire sur toute la hauteur de la colonne texte. */
    align-items: stretch;
}
@media (min-width: 1024px) {
    .hero__grille { grid-template-columns: 1.05fr 0.95fr; }
}
.hero h1 {
    color: var(--blanc);
    font-size: var(--fs-hero);
    margin-block: var(--esp-4);
}
.hero__intro {
    color: var(--blanc-70);
    font-size: var(--fs-lead);
    max-width: 60ch;
}
.hero__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
}
/* Colonne visuel : le visuel seul (agrandi), l'encart Nouveauté en surimpression. */
.hero__aside {
    position: relative;
    display: flex;
}
/* Le visuel du hero remplit la hauteur disponible (pas de ratio figé). */
.hero__image {
    flex: 1;
    width: 100%;
    min-height: 380px;
    max-height: 640px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--rayon-xl);
    box-shadow: var(--ombre-carte);
}
@media (min-width: 1024px) {
    .hero__image { min-height: 520px; }
}
.hero__aside .encart-nouveaute {
    position: absolute;
    left: var(--esp-5);
    bottom: var(--esp-5);
    z-index: 2;
}
@media (max-width: 560px) {
    .hero__aside .encart-nouveaute {
        left: var(--esp-3);
        right: var(--esp-3);
        bottom: var(--esp-3);
        max-width: none;
    }
}

/* Les 4 chiffres clés en 2x2 dans la colonne texte (maquette). */
.hero__chiffres {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: 1fr;
    margin-top: var(--esp-6);
}
@media (min-width: 480px) {
    .hero__chiffres { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   13. Visuel placeholder (dimensions réservées, anti-CLS)
   ------------------------------------------------------------------------- */
.placeholder-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--rayon-lg);
    background: var(--blanc-15);
    border: 1px dashed var(--blanc-70);
    color: var(--blanc-70);
    font-size: var(--fs-small);
    text-align: center;
    padding: var(--esp-5);
}
/* Variante sur fond clair (bloc ADN). */
.placeholder-visuel--clair {
    background: var(--surface);
    border-color: var(--bleu-10);
    color: var(--texte-70);
}

/* -------------------------------------------------------------------------
   14. Bloc « Notre ADN »
   ------------------------------------------------------------------------- */
.adn__grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 1024px) {
    /* Visuel seul à gauche, texte à droite. */
    .adn__grille { grid-template-columns: 1.05fr 0.95fr; }
    .adn__visuel { order: -1; }
}
.adn__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rayon-xl);
    box-shadow: var(--ombre-carte);
}
.adn__texte p + p { margin-top: var(--esp-4); }

/* Les 4 « brins » de l'ADN. */
.adn__brins {
    display: grid;
    gap: var(--esp-5);
    grid-template-columns: 1fr;
    margin-top: var(--esp-6);
}
@media (min-width: 640px) {
    .adn__brins { grid-template-columns: repeat(2, 1fr); }
}
.brin { display: flex; gap: var(--esp-3); }
.brin__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bleu-10);
    color: var(--bleu);
}
.brin__icone svg { width: 22px; height: 22px; }
/* Titre et texte l'un sous l'autre, le texte calé sur la marge du titre
   (review du 24/10/2026 : il s'affichait à la suite, sur la même ligne). */
.brin__titre { display: block; font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; color: var(--bleu); }
.brin__texte { display: block; color: var(--texte-70); font-size: var(--fs-small); margin-top: 2px; }

/* Slogan de l'ADN (fond clair : bleu foncé, jamais parme en texte). */
.adn__slogan {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
    margin-top: var(--esp-6);
}
.adn__slogan svg { width: 30px; height: 30px; color: var(--parme); flex-shrink: 0; }
/* « futur! » façon manuscrit parme (italique de General Sans à défaut de script). */
.adn__slogan .futur {
    font-style: italic;
    font-weight: 600;
    color: var(--parme);
}
.adn__boutons { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-6); }

/* -------------------------------------------------------------------------
   15. Hero de page intérieure (fil d'ariane + titre + accès rapides)
   ------------------------------------------------------------------------- */
/* Variante du hero sans colonne visuelle : contenu sur toute la largeur. */
.hero--page {
    padding-block: var(--esp-6) var(--esp-8);
}
.hero--page h1 {
    max-width: 18ch;
}
.hero--page .hero__intro {
    margin-top: var(--esp-4);
}

/* Fil d'ariane posé sur le fond sombre du hero. */
.breadcrumb--sur-sombre {
    margin-bottom: var(--esp-6);
}
.breadcrumb--sur-sombre a,
.breadcrumb--sur-sombre li:not(:last-child)::after {
    color: var(--blanc-70);
}
.breadcrumb--sur-sombre a:hover { color: var(--blanc); }
.breadcrumb--sur-sombre [aria-current="page"] { color: var(--blanc); }

/* Les 4 accès rapides vers les pôles (ancres internes). */
.hero-ancres {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-3);
    margin-top: var(--esp-7);
    list-style: none;
    padding: 0;
}
@media (min-width: 640px) {
    .hero-ancres { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .hero-ancres { grid-template-columns: repeat(4, 1fr); }
}
.hero-ancre {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    height: 100%;
    padding: var(--esp-4) var(--esp-5);
    background: var(--blanc-15);
    border: 1px solid var(--blanc-15);
    border-radius: var(--rayon-lg);
    color: var(--blanc);
    transition: background var(--transition), transform var(--transition);
}
.hero-ancre:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--blanc);
    transform: translateY(-2px);
}
.hero-ancre__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bleu);
}
.hero-ancre__icone svg { width: 26px; height: 26px; }
/* Filet vertical entre l'icône et le libellé (maquette). */
.hero-ancre__libelle {
    font-family: var(--police-titre);
    font-size: 1.05rem;
    line-height: 1.25;
    padding-left: var(--esp-4);
    border-left: 2px solid var(--blanc-70);
}

/* -------------------------------------------------------------------------
   16. En-tête de pôle : titre à barre verticale + encart partenaire
   ------------------------------------------------------------------------- */
.entete-pole {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--esp-5);
    margin-bottom: var(--esp-6);
}

/* Titre de section avec le trait vertical de la maquette. */
.titre-barre {
    position: relative;
    padding-left: var(--esp-4);
    color: var(--bleu-dark);
}
.titre-barre::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: var(--rayon-pill);
    background: var(--parme);
}
.titre-barre__intro {
    padding-left: var(--esp-4);
    margin-top: var(--esp-2);
    color: var(--texte-70);
}

/* Encart partenaire (OPCO Mobilités) à droite du titre. Qualiopi : section 41. */
.encart-partenaire {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
    max-width: 34rem;
}
.encart-partenaire__logo {
    width: auto;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
}
.encart-partenaire__titre {
    font-family: var(--police-titre);
    font-weight: 700;
    color: var(--bleu);
}
.encart-partenaire__texte {
    font-size: var(--fs-small);
    color: var(--bleu-dark);
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   17. Grille de cartes prestation + carrousel mobile
   Mobile : piste horizontale à balayage (le nombre de cartes empilées
   deviendrait ingérable). Desktop : grille classique.
   ------------------------------------------------------------------------- */
.grille-cartes {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .grille-cartes--2 { grid-template-columns: repeat(2, 1fr); }
    .grille-cartes--3 { grid-template-columns: repeat(2, 1fr); }
    .grille-cartes--4 { grid-template-columns: repeat(2, 1fr); }
    .grille-cartes--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .grille-cartes--3 { grid-template-columns: repeat(3, 1fr); }
    .grille-cartes--4 { grid-template-columns: repeat(4, 1fr); }
    .grille-cartes--5 { grid-template-columns: repeat(5, 1fr); }
}

/* --- Mobile : la grille devient une piste balayable --- */
@media (max-width: 767px) {
    .carrousel__piste {
        display: flex;
        gap: var(--esp-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Marge intérieure pour ne pas rogner l'ombre des cartes. */
        padding: var(--esp-2) var(--esp-1) var(--esp-4);
        margin-inline: calc(var(--esp-1) * -1);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .carrousel__piste::-webkit-scrollbar { display: none; }
    .carrousel__piste > .carte,
    .carrousel__piste > .carte-formation {
        flex: 0 0 82%;   /* on aperçoit la carte suivante : c'est l'indice de balayage */
        scroll-snap-align: center;
    }
}

/* Points de pagination, générés par main.js et masqués au-dessus de 768px. */
.carrousel__points {
    display: flex;
    justify-content: center;
    gap: var(--esp-2);
    margin-top: var(--esp-2);
}
@media (min-width: 768px) {
    .carrousel__points { display: none; }
}
.carrousel__point {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bleu-10);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.carrousel__point[aria-current="true"] {
    background: var(--bleu);
    transform: scale(1.35);
}

/* -------------------------------------------------------------------------
   18. Page contact : coordonnées et formulaire
   ------------------------------------------------------------------------- */
.contact-grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    /* Le formulaire, plus dense, prend la colonne la plus large. */
    .contact-grille { grid-template-columns: 0.85fr 1.15fr; }
}

/* --- Coordonnées --- */
.contact-liste {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--esp-5);
}
.contact-liste li {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
}
.contact-liste__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bleu-10);
    color: var(--bleu);
}
.contact-liste__icone svg { width: 22px; height: 22px; }
.contact-liste__label {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--texte-70);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.contact-liste__valeur {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--bleu-dark);
    font-style: normal;
    line-height: 1.4;
}
a.contact-liste__valeur:hover { color: var(--bleu); }

.contact-maillage {
    margin-top: var(--esp-6);
    padding: var(--esp-5);
    background: var(--surface);
    border-radius: var(--rayon-lg);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
.contact-maillage__titre {
    font-family: var(--police-titre);
    font-weight: 600;
    color: var(--bleu-dark);
    margin-bottom: var(--esp-2);
}

/* --- Formulaire --- */
.contact-formulaire {
    background: var(--blanc);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte);
    padding: var(--esp-6);
}
.contact-formulaire__titre {
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
    margin-bottom: var(--esp-5);
}

.champ { margin-bottom: var(--esp-4); }
.champ label {
    display: block;
    margin-bottom: var(--esp-1);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--texte);
}
.champ__option { font-weight: 400; color: var(--texte-70); }
.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: 0.7em 0.9em;
    font: inherit;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-sm);
    transition: border-color var(--transition);
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
    border-color: var(--bleu);
}
/* Champ en erreur : la couleur ne porte pas seule l'information, le message
   sous le champ la double. */
.champ .est-invalide { border-color: #be1e2d; }
.champ__erreur {
    margin-top: var(--esp-1);
    font-size: var(--fs-small);
    color: #8c1420;
    min-height: 1.2em;
}
.champ__mention {
    font-size: var(--fs-small);
    color: var(--texte-70);
    margin-bottom: var(--esp-4);
}

/* Piège à robots : masqué à l'écran comme aux lecteurs d'écran, jamais rempli
   par un visiteur humain. */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-retour {
    margin-top: var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border-radius: var(--rayon-sm);
    font-size: var(--fs-small);
    display: none;
}
.form-retour--ok,
.form-retour--erreur { display: block; }
.form-retour--ok {
    background: rgba(0, 51, 204, 0.08);
    color: var(--bleu-dark);
    border-left: 3px solid var(--bleu);
}
.form-retour--erreur {
    background: rgba(190, 30, 45, 0.08);
    color: #8c1420;
    border-left: 3px solid #be1e2d;
}

/* --- Formulaire complet : sections, champs appariés, cases à cocher --- */
.champ-groupe {
    border: none;
    padding: 0;
    margin: 0 0 var(--esp-5);
}
.champ-groupe > legend {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--bleu-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0 var(--esp-3);
    border-bottom: 1px solid var(--surface);
    width: 100%;
    margin-bottom: var(--esp-4);
}

/* Deux champs courts côte à côte dès qu'il y a la place. */
.champ-duo {
    display: grid;
    gap: 0 var(--esp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .champ-duo { grid-template-columns: 1fr 1fr; }
}

/* Liste des missions : cases à cocher en colonnes. */
.cases {
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-sm);
    padding: var(--esp-4);
}
.cases__legende {
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--texte);
    padding: 0 var(--esp-2);
}
.cases__liste {
    display: grid;
    gap: var(--esp-2);
    grid-template-columns: 1fr;
}
@media (min-width: 560px) {
    .cases__liste { grid-template-columns: 1fr 1fr; }
}
.cases__liste label {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-2);
    font-weight: 400;
    font-size: var(--fs-small);
    margin: 0;
    cursor: pointer;
}
.cases__liste input[type="checkbox"] {
    width: auto;
    margin-top: 0.2em;
    accent-color: var(--bleu);
    flex-shrink: 0;
}
.champ__aide {
    margin-top: var(--esp-3);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
/* Prestations à cocher (refonte du 17/09/2026) : des tuiles tapables de 44px
   minimum, une colonne sur les petits écrans, deux dès 560px. */
.cases__liste--tuiles { gap: var(--esp-3); }
.cases__liste .case-tuile {
    align-items: center;
    min-height: 44px;
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-sm);
    background: var(--blanc);
    transition: border-color var(--transition), background var(--transition);
}
.cases__liste .case-tuile:hover { border-color: var(--bleu); }
.cases__liste .case-tuile input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0;
}
.cases__liste .case-tuile:has(input:checked) {
    border-color: var(--bleu);
    background: var(--bleu-05);
    font-weight: 600;
}
.cases__liste .case-tuile:has(input:focus-visible) {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   14. Sélecteur de langue FR / EN
   Traducteur de confort (GTranslate gratuit, voir traduction.js).
   Le widget d'origine n'est jamais affiché : ces deux boutons le pilotent.
   ------------------------------------------------------------------------- */
/* Masqué tant que traduction.js n'a pas retiré l'attribut hidden :
   sans JavaScript, aucun bouton inerte ne s'affiche. */
.langues[hidden] {
    display: none;
}
.langues {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface);
    border-radius: var(--rayon-pill);
    flex-shrink: 0;
}
.langues__btn {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--police-texte);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--texte-70);
    padding: 0.3rem 0.65rem;
    border-radius: var(--rayon-pill);
    line-height: 1;
    transition: background var(--transition), color var(--transition);
}
.langues__btn:hover {
    color: var(--bleu);
}
.langues__btn.est-actif {
    background: var(--blanc);
    color: var(--bleu-dark);
    box-shadow: 0 1px 3px rgba(1, 34, 146, 0.12);
}

/* Dans le panneau burger, le sélecteur passe en tête et s'étale. */
@media (max-width: 1023px) {
    .nav__menu .langues {
        order: -1;
        align-self: flex-start;
    }
    .langues__btn {
        font-size: 0.875rem;
        padding: 0.4rem 0.9rem;
    }
}

/* Hôte technique de GTranslate : il ne doit jamais se voir.
   Le widget y injecte son propre sélecteur, qu'on neutralise aussi.

   Les deux !important qui suivent sont la seule exception assumée à la règle
   du projet : Google injecte ses propres styles avec !important, on ne peut
   les défaire autrement. Ne pas étendre cette exception au reste du fichier. */
.gtranslate-hote {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gt_switcher_wrapper,
.goog-te-banner-frame,
.goog-te-gadget {
    display: none !important;
}
/* Google Translate décale parfois le body pour loger sa barre : on annule. */
body {
    top: 0 !important;
}

/* -------------------------------------------------------------------------
   15. Bandeau cookies (RGPD)
   Consentement préalable au chargement de GA4 et de GTranslate.
   ------------------------------------------------------------------------- */
.bandeau-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    background: var(--blanc);
    border-top: 3px solid var(--bleu);
    box-shadow: 0 -4px 20px rgba(1, 34, 146, 0.16);
}
.bandeau-cookies__texte {
    flex: 1 1 340px;
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--texte);
}
/* Phrase de contexte, présente seulement quand le bandeau est rouvert
   depuis un clic sur EN. Vide le reste du temps. */
.bandeau-cookies__contexte {
    color: var(--bleu-dark);
}
.bandeau-cookies__lien {
    color: var(--bleu);
    text-decoration: underline;
}
.bandeau-cookies__lien:hover {
    color: var(--bleu-dark);
}
.bandeau-cookies__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}

@media (max-width: 640px) {
    .bandeau-cookies {
        flex-direction: column;
        align-items: stretch;
        padding: var(--esp-4);
    }
    .bandeau-cookies__actions {
        justify-content: stretch;
    }
    .bandeau-cookies__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   16. Pages juridiques (mentions, confidentialité, CGV)
   Prose longue : largeur de lecture contenue, hiérarchie sobre.
   ------------------------------------------------------------------------- */
.texte-legal {
    max-width: var(--largeur-texte);
}
.texte-legal h2 {
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
    margin-top: var(--esp-7);
    margin-bottom: var(--esp-3);
}
.texte-legal h2:first-child {
    margin-top: 0;
}
.texte-legal h3 {
    font-size: 1.05rem;
    color: var(--bleu);
    margin-top: var(--esp-5);
    margin-bottom: var(--esp-2);
}
.texte-legal p,
.texte-legal ul {
    margin-bottom: var(--esp-4);
}
.texte-legal ul {
    padding-left: var(--esp-5);
    list-style: disc;
}
.texte-legal li {
    margin-bottom: var(--esp-2);
}
.texte-legal a {
    color: var(--bleu);
    text-decoration: underline;
}

/* Date de version, en tête d'un document juridique. */
.version-document {
    font-size: var(--fs-small);
    color: var(--texte-70);
    margin-bottom: var(--esp-6);
}

/* Sommaire d'un document long (CGV : 16 articles et 3 annexes). */
.sommaire {
    margin-block: var(--esp-6);
    padding: var(--esp-5);
    background: var(--surface);
    border-radius: var(--rayon-md);
}
.sommaire h2 {
    margin-top: 0;
    font-size: 1.05rem;
}
.sommaire__liste {
    counter-reset: article;
    columns: 2;
    column-gap: var(--esp-5);
    font-size: var(--fs-small);
}
.sommaire__liste li {
    break-inside: avoid;
    margin-bottom: var(--esp-2);
}
/* La numérotation reprend celle des articles (list-style est neutralisé
   par le reset, on la reconstruit). */
.sommaire ol.sommaire__liste li::before {
    counter-increment: article;
    content: counter(article) '. ';
    color: var(--texte-70);
}
.sommaire__liste--annexes {
    columns: 1;
    margin-top: var(--esp-4);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--bleu-10);
}
.sommaire a { text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .sommaire__liste { columns: 1; }
}

/* Encadré légal reproduit mot pour mot (annexes du code de la consommation).
   Le cadre le distingue du reste : c'est un texte réglementaire, pas une
   clause rédigée par le vendeur. */
.encadre-legal {
    margin-bottom: var(--esp-5);
    padding: var(--esp-5);
    background: var(--surface);
    color: var(--texte);
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-md);
    font-size: var(--fs-small);
}
.encadre-legal__titre {
    font-family: var(--police-titre);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bleu-dark);
}
.encadre-legal p:not(.encadre-legal__titre) { color: var(--texte-70); }
.encadre-legal p:last-child { margin-bottom: 0; }

/* Liste dont les items portent déjà leur propre repère (« 1° », « 2° »). */
.texte-legal ul.sans-puce {
    list-style: none;
    padding-left: 0;
}

/* Champs du formulaire type de rétractation : ligne à compléter à la main.
   Sélecteur aligné sur .texte-legal ul, sinon les puces reprennent le dessus. */
.texte-legal ul.liste-formulaire {
    list-style: none;
    padding-left: 0;
}
.liste-formulaire li {
    padding-bottom: var(--esp-3);
    border-bottom: 1px dashed var(--bleu-10);
}

/* Mention de langue : rappel que le français fait foi. */
.mention-langue {
    margin-top: var(--esp-7);
    padding: var(--esp-4);
    background: var(--surface);
    border-left: 3px solid var(--bleu);
    border-radius: var(--rayon-sm);
    font-size: var(--fs-small);
}

/* Donnée que la cliente doit encore fournir. Visible exprès :
   ces pages ne doivent pas partir en ligne avec des trous. */
.a-completer {
    display: inline-block;
    padding: 0.1em 0.5em;
    background: #FFF3CD;
    border: 1px dashed #B8860B;
    border-radius: var(--rayon-sm);
    font-size: 0.9em;
    font-weight: 600;
    color: #7A5B00;
}

/* -------------------------------------------------------------------------
   19. Rubrique « Qui sommes-nous ? » : page cabinet, cartes équipe, profils
   ------------------------------------------------------------------------- */

/* --- Hero de la page cabinet (variante sans colonne visuelle) --- */
.hero--cabinet {
    padding-block: var(--esp-6) var(--esp-9);
}
.hero--cabinet h1 {
    text-transform: uppercase;
    max-width: 16ch;
}
.hero__sous-titre {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blanc);
    margin-bottom: var(--esp-5);
}
/* Ligne « DROM-COM | FRANCE HEXAGONALE » avec repère (icône, pas d'emoji). */
.hero__geo {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
    font-family: var(--police-titre);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blanc);
}
.hero__geo svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--parme);
}
.hero__slogan {
    margin-top: var(--esp-5);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.25;
    color: var(--blanc);
}

/* Section qui remonte sur le hero avec un grand rayon (maquette). */
.section--arrondie {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--esp-7) * -1);
    border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
    /* Sans cela, la piste balayable du carrousel gonfle la largeur de
       défilement du document sous 768px (mesuré à 457px pour 386px de
       fenêtre), même si body{overflow-x:hidden} masque le débordement. */
    overflow: hidden;
}

/* Titre de section souligné d'un court trait parme. */
.titre-souligne {
    position: relative;
    padding-bottom: var(--esp-4);
    color: var(--bleu);
}
.titre-souligne::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: var(--rayon-pill);
    background: var(--parme);
}

/* --- Carte membre de l'équipe (bâtie sur .carte) --- */
.carte-membre {
    gap: var(--esp-4);
    padding: var(--esp-5);
}
.carte-membre__entete {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
}
.carte-membre__photo {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}
.carte-membre__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carte-membre__nom {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: 1.15;
    color: var(--bleu);
}
.carte-membre__fonction {
    display: block;
    margin-top: var(--esp-2);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bleu-dark);
}
/* Coordonnées : une ligne par canal, filets de séparation comme la maquette. */
.carte-membre__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    padding-block: var(--esp-4);
    border-top: 1px solid var(--surface);
    border-bottom: 1px solid var(--surface);
}
.carte-membre__contact {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--fs-small);
    color: var(--bleu);
    /* Les adresses longues ne doivent pas élargir la carte. */
    overflow-wrap: anywhere;
}
.carte-membre__contact svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--bleu);
}
.carte-membre .btn { margin-top: auto; }

/* --- Étiquettes de domaines --- */
.etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
}
.etiquette {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.75em;
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--bleu-dark);
    background: var(--bleu-05);
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-pill);
}
/* Variante pleine du hero de profil (maquette 2). */
.etiquette--pleine {
    color: var(--blanc);
    background: var(--bleu);
    border-color: var(--bleu);
    font-weight: 500;
}

/* --- Hero d'une page profil --- */
.profil-hero {
    background: var(--surface);
    padding-block: var(--esp-5) var(--esp-8);
}
.profil-hero__grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-6);
    align-items: center;
}
@media (min-width: 768px) {
    .profil-hero__grille { grid-template-columns: 280px 1fr; }
}
.profil-hero__photo {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    overflow: hidden;
}
.profil-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profil-hero h1 {
    color: var(--bleu);
    margin-bottom: var(--esp-2);
}
.profil-hero__fonction {
    font-family: var(--police-titre);
    font-size: var(--fs-h3);
    color: var(--texte);
}
/* Localisation et mobilité : icônes sur charte, jamais d'emoji. */
.profil-hero__lieux {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-5);
    margin-top: var(--esp-4);
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte);
}
.profil-hero__lieu {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
}
.profil-hero__lieu svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--bleu);
}
.profil-hero .etiquettes { margin-top: var(--esp-5); }
.profil-hero__accroche {
    margin-top: var(--esp-5);
    max-width: var(--largeur-texte);
    color: var(--texte-70);
}

/* --- Corps d'une page profil : colonne principale + colonne latérale --- */
.profil-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--esp-5);
    align-items: start;
}
@media (min-width: 1024px) {
    .profil-grille { grid-template-columns: 2fr 1fr; }
}
.profil-colonne {
    display: flex;
    flex-direction: column;
    gap: var(--esp-5);
}
/* Bloc de contenu : reprend .carte, avec un titre à icône. */
.bloc-profil__titre {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--fs-h3);
    color: var(--bleu);
}
.bloc-profil__titre svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--bleu);
}
.bloc-profil p + p { margin-top: var(--esp-4); }
/* Liste à puces des sujets accompagnés. */
.liste-puces {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    margin-top: var(--esp-3);
}
.liste-puces li {
    position: relative;
    padding-left: var(--esp-5);
    color: var(--texte-70);
}
.liste-puces li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--parme);
}
/* Liste de diplômes : une ligne par entrée, séparées d'un filet. */
.liste-filets li {
    padding-block: var(--esp-3);
    color: var(--texte);
}
.liste-filets li + li { border-top: 1px solid var(--surface); }

/* Encart du slogan dans « Sa vision ». Parme en fond, texte bleu : le parme
   n'est jamais employé en texte courant sur fond clair (charte). */
.encart-slogan {
    margin-top: var(--esp-4);
    padding: var(--esp-4) var(--esp-5);
    text-align: center;
    font-family: var(--police-titre);
    font-weight: 600;
    color: var(--bleu-dark);
    background: var(--parme-15);
    border-radius: var(--rayon-md);
}
/* Citation favorite (page profil d'Armand). */
.citation {
    color: var(--texte);
    font-style: italic;
}
.citation__auteur {
    display: block;
    margin-top: var(--esp-3);
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-small);
    color: var(--bleu);
}
/* Lien LinkedIn du bloc latéral. */
.lien-linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* --- Page « Les partenaires » : contenu en préparation --- */
.bloc-attente {
    max-width: var(--largeur-texte);
    margin-inline: auto;
    text-align: center;
}
.bloc-attente p { color: var(--texte-70); }
.bloc-attente .btn { margin-top: var(--esp-5); }

/* -------------------------------------------------------------------------
   24. Canevas des pages prestation
   Composants partages par les 13 pages du silo. Aucune couleur hors charte :
   les pastilles violettes et le bouton dore des maquettes ne sont pas repris.
   ------------------------------------------------------------------------- */

/* --- Hero de page prestation : accroche et phrase forte du document. --- */
.hero__accroche {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-lead);
    color: var(--parme);
    margin-bottom: var(--esp-5);
}
.hero__intro + .hero__intro { margin-top: var(--esp-4); }
.hero__phrase-forte {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--blanc);
    margin-top: var(--esp-5);
    max-width: 34ch;
}

/* --- Bande des piliers : variante claire du composant « chiffre cle ».
       Le composant d'origine est reserve aux fonds sombres (--blanc-15). --- */
.bande-piliers {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .bande-piliers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .bande-piliers { grid-template-columns: repeat(4, 1fr); }
}
.chiffre--clair {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--esp-3);
    background: var(--blanc);
    border-color: rgba(1, 34, 146, 0.08);
    box-shadow: var(--ombre-carte);
    padding: var(--esp-5) var(--esp-4);
}
.chiffre--clair .chiffre__coche {
    background: rgba(0, 51, 204, 0.08);
    border-color: var(--bleu);
    color: var(--bleu);
    width: 44px;
    height: 44px;
}
.chiffre--clair .chiffre__coche svg { width: 22px; height: 22px; }
.chiffre--clair .chiffre__titre {
    color: var(--bleu-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-small);
}
.chiffre--clair .chiffre__sous { color: var(--texte-70); }

/* --- Carte solution : format numerote avec sa liste « ideal pour ». --- */
.carte-solution {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    background: var(--blanc);
    color: var(--texte);
    border: 1px solid rgba(1, 34, 146, 0.08);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte);
    padding: var(--esp-6);
}
.carte-solution__entete {
    display: flex;
    align-items: center;
    gap: var(--esp-4);
}
.carte-solution__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-family: var(--police-titre);
    font-weight: 600;
}
.carte-solution__titre {
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
}
.carte-solution__accroche {
    font-weight: 600;
    color: var(--bleu);
}
.carte-solution__texte { color: var(--texte-70); }
.carte-solution__ideal-titre {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bleu-dark);
    margin-bottom: var(--esp-2);
}
.carte-solution__ideal {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    color: var(--texte-70);
    font-size: var(--fs-small);
}
.carte-solution__ideal li {
    position: relative;
    padding-left: var(--esp-5);
}
.carte-solution__ideal li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--parme);
}
/* Le bouton est colle en bas : les trois cartes s'alignent quelle que soit
   la longueur de leur liste. */
.carte-solution .btn { margin-top: auto; }

/* --- Frise du processus : horizontale en desktop, verticale en mobile. --- */
.processus {
    display: grid;
    gap: var(--esp-6);
    grid-template-columns: 1fr;
    counter-reset: etape;
}
.processus__etape {
    position: relative;
    padding-left: calc(44px + var(--esp-5));
}
.processus__numero {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blanc);
    border: 2px solid var(--bleu);
    color: var(--bleu);
    font-family: var(--police-titre);
    font-weight: 600;
    z-index: 1;
}
/* Filet de liaison : vertical en mobile, horizontal en desktop. */
.processus__etape:not(:last-child)::before {
    content: '';
    position: absolute;
    background: rgba(0, 51, 204, 0.18);
    left: 21px;
    top: 44px;
    width: 2px;
    height: calc(100% + var(--esp-6) - 44px);
}
.processus__titre {
    font-size: 1.05rem;
    color: var(--bleu-dark);
    margin-bottom: var(--esp-2);
}
.processus__texte {
    color: var(--texte-70);
    font-size: var(--fs-small);
}
@media (min-width: 1024px) {
    .processus {
        grid-template-columns: repeat(7, 1fr);
        gap: var(--esp-4);
    }
    .processus__etape {
        padding-left: 0;
        padding-top: calc(44px + var(--esp-4));
    }
    .processus__numero { left: 0; }
    .processus__etape:not(:last-child)::before {
        left: 44px;
        top: 21px;
        width: calc(100% + var(--esp-4) - 44px);
        height: 2px;
    }
}

/* --- FAQ : questions en H3, reponses courtes. --- */
/* Deux colonnes en desktop : la longueur de ligne reste lisible sans laisser la
   moitie droite de la page vide. En colonnes CSS et non en grille (review V1,
   17/10/2026) : une grille alignait chaque rangée sur la réponse la plus
   longue et laissait un blanc sous sa voisine. Chaque question suit désormais
   la précédente avec le même écart ; l'ordre de lecture (haut puis droite)
   reste celui du HTML. */
.faq { display: block; }
.faq > div {
    break-inside: avoid;
    padding-bottom: var(--esp-5);
}
.faq > div:last-child { padding-bottom: 0; }
@media (min-width: 1024px) {
    .faq { columns: 2; column-gap: var(--esp-7); }
}
.faq__question {
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
    margin-bottom: var(--esp-2);
}
.faq__reponse { color: var(--texte-70); }

/* --- Maillage territorial en pied d'article. --- */
.maillage {
    border-top: 1px solid rgba(1, 34, 146, 0.12);
    padding-top: var(--esp-5);
}
.maillage__titre {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bleu-dark);
    margin-bottom: var(--esp-4);
}
.maillage__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-4);
}
.maillage__liens a {
    color: var(--bleu);
    font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   25. Carte tarif (canevas prestation)
   Un seul composant pour les trois usages des maquettes : achat en boutique,
   demande de devis, et formules d'accompagnement. Aucun dore ni vert : les
   maquettes en emploient, ils sont hors charte.
   ------------------------------------------------------------------------- */
.carte-tarif {
    background: var(--blanc);
    border: 1px solid rgba(1, 34, 146, 0.08);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte);
    padding: var(--esp-6);
    color: var(--texte);
}
.carte-tarif__titre {
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
}
.carte-tarif__intro {
    color: var(--texte-70);
    font-size: var(--fs-small);
    margin-top: var(--esp-3);
}
.carte-tarif__lignes {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
}
.tarif-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    background: var(--surface);
    border: 1px solid rgba(1, 34, 146, 0.06);
    border-radius: var(--rayon-md);
    padding: var(--esp-4);
}
.tarif-ligne__libelle {
    font-size: var(--fs-small);
    color: var(--texte-70);
}
.tarif-ligne__prix {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--bleu-dark);
    margin-top: 2px;
}
/* Palier sur devis : meme structure, accent parme au lieu du prix chiffre. */
.tarif-ligne--devis {
    background: rgba(164, 139, 255, 0.10);
    border-color: rgba(164, 139, 255, 0.35);
}
.tarif-ligne--devis .tarif-ligne__prix { color: var(--bleu); }
.carte-tarif__mention {
    font-size: var(--fs-small);
    color: var(--texte-70);
    margin-top: var(--esp-4);
}
/* Zone d'action de la carte-tarif (fiche produit boutique) : le bouton ou
   l'etat non cliquable occupe toute la largeur de la carte. Portee au seul
   conteneur __action pour ne pas toucher les boutons des tarif-ligne des
   pages prestation, qui restent alignes a droite de leur ligne. */
.carte-tarif__action { margin-top: var(--esp-5); }
.carte-tarif__action .btn { width: 100%; }
/* Repere budgetaire « a partir de » : un seul montant, pas de paliers. */
.tarif-ligne--repere { flex-direction: column; align-items: flex-start; }
.tarif-ligne--repere .tarif-ligne__prix { font-size: 1.6rem; }

/* --- Liste a coches sur fond sombre (arguments d'une section sombre). --- */
.liste-coches {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    margin-top: var(--esp-6);
}
.liste-coches li {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
}
.liste-coches__coche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-sm);
    background: rgba(164, 139, 255, 0.20);
    border: 1px solid var(--parme);
    color: var(--parme);
}
.liste-coches__coche svg { width: 16px; height: 16px; }

/* --- Grille « argumentaire + carte tarif » d'une section sombre. --- */
.grille-offre {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .grille-offre { grid-template-columns: 1fr 1fr; }
}

/* --- Figure légendée dans une grille d'offre (visuel + mention du docx). --- */
.figure-legende { margin: 0; }
.figure-legende img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rayon-xl);
    box-shadow: var(--ombre-carte);
}
.figure-legende figcaption {
    margin-top: var(--esp-3);
    font-family: var(--police-titre);
    font-weight: 600;
    color: var(--bleu-dark);
}

/* --- Lien de telechargement d'un document public (plaquette PDF). --- */
.lien-document {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-3);
    background: var(--blanc);
    border: 1px solid rgba(1, 34, 146, 0.12);
    border-radius: var(--rayon-md);
    padding: var(--esp-4) var(--esp-5);
    color: var(--bleu);
    font-weight: 600;
    box-shadow: var(--ombre-carte);
}
.lien-document:hover { box-shadow: var(--ombre-carte-survol); }
.lien-document svg { width: 24px; height: 24px; flex-shrink: 0; }
.lien-document__meta {
    display: block;
    font-weight: 400;
    font-size: var(--fs-small);
    color: var(--texte-70);
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   26. Complements du canevas prestation (pages du 10/09/2026)
   ------------------------------------------------------------------------- */

/* Ligne d'information dans une carte tarif : delai, modalites, livrable.
   Meme structure qu'un palier, mais la valeur n'est pas un prix. */
.tarif-ligne--info .tarif-ligne__prix {
    font-size: var(--fs-base);
    color: var(--texte);
}

/* Liste d'arguments numerotes, distincte de la frise « processus » qui, elle,
   decrit un deroule chronologique. */
.liste-numerotee {
    display: grid;
    gap: var(--esp-5);
    grid-template-columns: 1fr;
    counter-reset: argument;
}
@media (min-width: 768px) {
    .liste-numerotee { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .liste-numerotee { grid-template-columns: repeat(3, 1fr); }
}
.liste-numerotee li {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
}
.liste-numerotee__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 51, 204, 0.08);
    color: var(--bleu);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
}
.section--sombre .liste-numerotee__numero {
    background: rgba(164, 139, 255, 0.20);
    color: var(--parme);
}

/* Bandeau de mots-cles en pied d'article : repris tel quel des documents. */
.mots-cles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--esp-2) var(--esp-4);
    margin-top: var(--esp-6);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bleu);
}
.mots-cles li { position: relative; }
.mots-cles li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(var(--esp-2) * -1 - 1px);
    top: 0.35em;
    bottom: 0.35em;
    width: 2px;
    border-radius: var(--rayon-pill);
    background: var(--parme);
}

/* Liste simple a puces parme, pour les livrables et les thematiques. */
.liste-puces {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .liste-puces--2 { grid-template-columns: repeat(2, 1fr); }
}
.liste-puces li {
    position: relative;
    padding-left: var(--esp-5);
    color: var(--texte-70);
}
.liste-puces li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--parme);
}
.section--sombre .liste-puces li { color: var(--blanc-70); }

/* Sous-titre a l'interieur d'un bloc de contenu (distinct de .processus__titre,
   qui reste colle a son numero dans la frise). */
.sous-titre-bloc {
    font-size: 1.05rem;
    color: var(--bleu-dark);
    margin-top: var(--esp-6);
    margin-bottom: var(--esp-4);
}
.section--sombre .sous-titre-bloc { color: var(--blanc); }

/* Mention discrete utilisable sur fond clair comme sur fond sombre : l'opacite
   agit sur la couleur heritee, contrairement a une couleur figee. */
.texte-mention {
    font-size: var(--fs-small);
    opacity: 0.75;
    margin-top: var(--esp-4);
}


/* -------------------------------------------------------------------------
   27. Variantes claires des composants sans fond propre
   Ces composants heritent du fond de leur section. En section sombre, leurs
   couleurs figees doivent etre reprises. Les composants qui posent leur propre
   fond (carte, carte-tarif, carte-solution, encadre-legal) n'ont pas besoin
   d'y figurer : ils declarent deja leur couleur de texte.
   ------------------------------------------------------------------------- */
.section--sombre .processus__titre,
.section--sombre .titre-barre,
.section--sombre .maillage__titre,
.section--sombre .carte-solution__ideal-titre {
    color: var(--blanc);
}
.section--sombre .processus__texte,
.section--sombre .titre-barre__intro {
    color: var(--blanc-70);
}
.section--sombre .processus__numero {
    background: transparent;
    border-color: var(--parme);
    color: var(--parme);
}
.section--sombre .processus__etape:not(:last-child)::before {
    background: rgba(164, 139, 255, 0.35);
}

/* Bloc de coordonnees sur fond clair (pages territoire). Le composant
   .footer-contact existe deja mais est calibre pour le pied de page sombre. */
.coordonnees {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    font-style: normal;
    color: var(--texte-70);
}
.coordonnees a { color: var(--bleu); }

/* -------------------------------------------------------------------------
   28. Carte formation (catalogue des formations Inter, 15/09/2026)
   Seule carte du design system avec une image en tete. Evolution signalee
   au journal : aucun composant existant ne pouvait porter un visuel 4:3.
   ------------------------------------------------------------------------- */
.carte-formation {
    display: flex;
    flex-direction: column;
    gap: var(--esp-4);
    background: var(--blanc);
    color: var(--texte);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-lg);
    padding: var(--esp-5);
    box-shadow: var(--ombre-carte);
    transition: box-shadow var(--transition);
}
.carte-formation:hover { box-shadow: var(--ombre-carte-survol); }
.carte-formation__visuel {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--rayon-md);
}
.carte-formation__titre {
    font-size: var(--fs-lead);
    color: var(--bleu);
    line-height: 1.25;
}
.carte-formation__texte {
    font-size: var(--fs-small);
    color: var(--texte-70);
    line-height: 1.55;
}
/* Formation annoncee : badge non cliquable, colle en bas de carte. */
.carte-formation__badge {
    margin-top: auto;
    align-self: flex-start;
}
.carte-formation--a-venir .carte-formation__titre { color: var(--bleu-dark); }
.carte-formation--a-venir .carte-formation__visuel { opacity: 0.9; }
/* Variante compacte : les formations annoncées, en retrait des formations disponibles. */
.carte-formation--compacte {
    gap: var(--esp-3);
    padding: var(--esp-4);
}
.carte-formation--compacte .carte-formation__visuel { aspect-ratio: 16 / 9; }
.carte-formation--compacte .carte-formation__titre { font-size: var(--fs-base); }
/* Intertitre discret d'une sous-section (« À venir »). */
.intertitre-discret {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-70);
    margin-block: var(--esp-8) var(--esp-4);
}

/* -------------------------------------------------------------------------
   29. Fiche formation (gabarit standardisé, 15/09/2026)
   Deux colonnes : contenu principal et informations pratiques. La colonne
   latérale passe sous le contenu en dessous de 1024px. Les rubriques sont le
   miroir de la future table formations du sprint 4.
   ------------------------------------------------------------------------- */
.fiche {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .fiche { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Fiche produit boutique : .article__contenu (au lieu de .fiche-meta) ouvre
   la colonne principale. Sans marge propre, elle collerait son dernier
   paragraphe au premier .fiche-bloc (qui n'a qu'une marge basse). */
.fiche__principal > .article__contenu { margin-bottom: var(--esp-6); }

/* Mots-clés dans le hero sombre. */
.hero .mots-cles {
    justify-content: flex-start;
    margin-top: var(--esp-4);
    color: var(--parme);
}

/* Titre et mentions réglementaires en tête du contenu. */
.fiche-meta {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
    margin-bottom: var(--esp-6);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
.fiche-meta__titre { font-size: var(--fs-h3); color: var(--bleu-dark); margin-bottom: var(--esp-2); }

/* Bloc de contenu : titre à icône ronde, puis texte ou liste. */
.fiche-bloc { margin-bottom: var(--esp-7); }
.fiche-bloc__titre {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-size: var(--fs-h3);
    color: var(--bleu);
    margin-bottom: var(--esp-4);
}
.fiche-bloc__icone,
.fiche-infos__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--bleu);
}
.fiche-bloc__icone svg,
.fiche-infos__icone svg { width: 20px; height: 20px; }

/* Encart animateur : présentation du formateur, texte de la cliente. */
.encart-animateur {
    padding: var(--esp-5);
    border-left: 4px solid var(--parme);
    border-radius: var(--rayon-md);
    background: var(--surface);
    color: var(--texte);
}

/* Programme : un module par carte claire. */
.module {
    padding: var(--esp-4) var(--esp-5);
    border-radius: var(--rayon-md);
    background: var(--surface);
}
.module + .module { margin-top: var(--esp-3); }
.module__jour {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--parme);
    margin-block: var(--esp-5) var(--esp-3);
}
.module__titre { font-size: var(--fs-base); color: var(--bleu-dark); }
.module .liste-puces { margin-top: var(--esp-2); }
.module p { color: var(--texte-70); margin-top: var(--esp-2); }

/* Indicateurs : trois valeurs, ou la mention « nouvelle formation ». */
.indicateurs {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .indicateurs { grid-template-columns: repeat(3, 1fr); } }
.indicateur {
    padding: var(--esp-5);
    border-radius: var(--rayon-md);
    background: var(--surface);
    text-align: center;
}
.indicateur__valeur {
    display: block;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--bleu);
}
.indicateur__libelle { font-size: var(--fs-small); color: var(--texte-70); }

/* Colonne latérale : informations pratiques, une rubrique par ligne. */
.fiche-infos {
    padding: var(--esp-5);
    background: var(--blanc);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte);
}
.fiche-infos > div { padding-block: var(--esp-4); border-top: 1px solid var(--surface); }
.fiche-infos > div:first-child { padding-top: 0; border-top: 0; }
.fiche-infos > div:last-child { padding-bottom: 0; }
.fiche-infos dt {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bleu);
    margin-bottom: var(--esp-2);
}
.fiche-infos dd {
    padding-left: calc(40px + var(--esp-3));
    font-size: var(--fs-small);
    color: var(--texte-70);
    line-height: 1.55;
}
.fiche-infos dd p + p { margin-top: var(--esp-2); }
.fiche-infos dd .liste-puces { margin-top: 0; font-size: inherit; }
.fiche-infos dd .liste-puces li { color: inherit; }
.fiche-infos__tarif { font-family: var(--police-titre); font-weight: 700; font-size: var(--fs-lead); color: var(--bleu-dark); }

/* Bandeau intra-entreprise : composant commun aux fiches, une seule définition. */
.bandeau-intra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-5) var(--esp-7);
    margin-top: var(--esp-8);
    padding: var(--esp-6);
    border-radius: var(--rayon-lg);
    background: var(--bleu-dark);
    color: var(--blanc);
}
.bandeau-intra__titre { font-size: var(--fs-h3); color: var(--blanc); margin-bottom: var(--esp-2); }
.bandeau-intra__titre .accent-parme { color: var(--parme); }
.bandeau-intra__texte { color: var(--blanc-70); }
.bandeau-intra__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    font-family: var(--police-titre);
    font-weight: 600;
}
.bandeau-intra__contacts a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-intra__contacts a:hover { color: var(--parme); }

/* -------------------------------------------------------------------------
   30. Rubrique partenaires : cartes formules, formulaire de partenariat
       (avenant du 17/09/2026). Jetons existants uniquement : les dégradés
       violets et formes libres des maquettes ne sont pas repris.
   ------------------------------------------------------------------------- */

/* --- Carte formule : une identité par formule, portée par la carte (filet
       supérieur, pastille, nom coloré), jamais par le bouton.
       Contraste AA mesuré : bleu sur blanc 8,9:1, bleu profond sur blanc 12,8:1,
       parme sur blanc 2,7:1 (insuffisant). La carte Signature passe donc sur fond
       bleu profond, où le parme atteint 4,7:1. --- */
.carte-formule {
    --accent: var(--bleu);
    position: relative;
    border-top: 4px solid var(--accent);
}
.carte-formule__titre { font-size: var(--fs-h3); line-height: 1.15; }
.carte-formule__prefixe { display: block; color: var(--texte); }
.carte-formule__nom { color: var(--accent); }
.carte-formule .btn { margin-top: auto; align-self: flex-start; }

/* Deux formules seulement (Marketplace RH devient une option, 28/09/2026) :
   grille resserrée pour que les cartes ne s'étirent pas sur toute la largeur. */
.grille-formules { max-width: 960px; margin-inline: auto; }

/* Signature, formule mise en avant : fond bleu profond, accent parme, bordure parme. */
.carte-formule--signature {
    --accent: var(--parme);
    background: var(--bleu-dark);
    color: var(--blanc);
    border-color: var(--parme);
}
.carte-formule--signature .carte-formule__prefixe { color: var(--blanc); }
.carte-formule--signature .carte__texte { color: var(--blanc-70); }
.carte-formule--signature .carte__icone { background: var(--parme); color: var(--bleu-dark); }
.carte-formule__badge {
    position: absolute;
    top: calc(var(--esp-4) * -1);
    right: var(--esp-5);
    padding: 0.35em 0.9em;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--parme);
    background: var(--bleu-dark);
    color: var(--parme);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* En desktop la carte mise en avant est légèrement surélevée ; en mobile
   l'empilement reste régulier, le badge suffit (petit dégagement pour qu'il
   ne touche pas la carte précédente). */
@media (max-width: 1023px) {
    .carte-formule--signature { margin-top: var(--esp-3); }
}
@media (min-width: 1024px) {
    .carte-formule--signature {
        transform: translateY(-8px);
        box-shadow: var(--ombre-carte-survol);
    }
    .carte-formule--signature:hover { transform: translateY(-12px); }
}

/* --- Bloc Marketplace RH : texte de référence du document, sur fond surface. --- */
.bloc-marketplace {
    display: grid;
    gap: var(--esp-5);
    padding: var(--esp-6);
    border-radius: var(--rayon-lg);
    background: var(--surface);
}
@media (min-width: 1024px) {
    .bloc-marketplace { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.bloc-marketplace p { color: var(--texte-70); max-width: var(--largeur-texte); }
.bloc-marketplace p + p { margin-top: var(--esp-3); }
.bloc-marketplace__question {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-lead);
    color: var(--bleu-dark);
}

/* --- Bande finale sans bouton : le texte reste centré, sans marge résiduelle. --- */
.cta-bande--sans-bouton .cta-bande__texte { margin-bottom: 0; }

/* --- Page formulaire : formulaire large, colonne de réassurance à droite. --- */
.partenariat-grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .partenariat-grille { grid-template-columns: minmax(0, 1fr) 360px; }
}
.contact-formulaire__intro {
    margin-top: calc(var(--esp-5) * -1);
    margin-bottom: var(--esp-5);
    color: var(--texte-70);
}

/* --- Choix de formule : deux cartes radio, filet et pastille de leur formule.
       L'état sélectionné garde son cadre bleu, renforcé d'une ombre et d'un fond. --- */
.formules-choix {
    display: grid;
    gap: var(--esp-3);
    grid-template-columns: 1fr;
    padding-top: var(--esp-3);   /* place pour le badge de la formule mise en avant */
}
@media (min-width: 640px) {
    .formules-choix { grid-template-columns: repeat(2, 1fr); }
}
.formule-choix {
    --accent: var(--bleu);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-5) var(--esp-4);
    text-align: center;
    border: 2px solid var(--bleu-10);
    border-top: 4px solid var(--accent);   /* filet de la formule, après le raccourci border */
    border-radius: var(--rayon-md);
    background: var(--blanc);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.formule-choix:hover { border-color: var(--bleu); border-top-color: var(--accent); }
.formule-choix input {
    position: absolute;
    top: var(--esp-3);
    left: var(--esp-3);
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--bleu);
}
.formule-choix:has(input:checked) {
    border-color: var(--bleu);
    border-top-color: var(--accent);
    background: var(--bleu-05);
    box-shadow: var(--ombre-carte-survol);
}
.formule-choix--signature { --accent: var(--parme); }
.formule-choix--signature .formule-choix__icone { background: var(--parme); color: var(--bleu-dark); }
/* Option Marketplace RH sous les deux formules : une tuile sur toute la largeur. */
.cases__liste.cases__liste--une { grid-template-columns: 1fr; margin-top: var(--esp-4); }
/* Remise de -15 % : toujours en gras et en bleu, cochée ou non. */
.case-tuile__remise { font-weight: 600; color: var(--bleu); }
.formule-choix__badge {
    position: absolute;
    top: calc(var(--esp-3) * -1);
    right: var(--esp-3);
    padding: 0.25em 0.7em;
    border-radius: var(--rayon-pill);
    background: var(--bleu-dark);
    color: var(--parme);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.formule-choix:has(input:focus-visible) {
    outline: 2px solid var(--bleu);
    outline-offset: 2px;
}
.formule-choix__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bleu-10);
    color: var(--bleu);
}
.formule-choix__icone svg { width: 24px; height: 24px; }
.formule-choix__nom {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.2;
    color: var(--texte);
}
.formule-choix__nom span { display: block; color: var(--bleu); }
.formule-choix__texte { font-size: var(--fs-small); color: var(--texte-70); }

/* --- Oui / Non sur une ligne. --- */
.choix-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-5);
}
.choix-ligne label {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}
.choix-ligne input { width: auto; accent-color: var(--bleu); }
/* Case de consentement (commande) : le libellé est un seul bloc de texte,
   sinon le flex du label éclate le texte, le lien vers les CGV et les
   termes protégés de traduction.js en colonnes (review du 24/10/2026). */
.choix-ligne--consentement label { align-items: flex-start; }
.choix-ligne--consentement input { margin-top: 0.25em; flex-shrink: 0; }
.choix-ligne__texte { flex: 1; min-width: 0; }

/* --- Compteur de caractères sous le champ commentaires. --- */
.champ__compteur {
    margin-top: var(--esp-1);
    text-align: right;
    font-size: var(--fs-small);
    color: var(--texte-70);
}

/* --- Bouton d'envoi et sa phrase d'accompagnement. --- */
.form-envoi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-4) var(--esp-5);
}
.form-envoi__note { font-size: var(--fs-small); color: var(--texte-70); max-width: 28ch; }

/* --- Confirmation affichée à la place du formulaire. --- */
.form-confirmation {
    padding: var(--esp-6);
    border-radius: var(--rayon-md);
    background: var(--bleu-05);
    border: 1px solid var(--bleu-10);
}
.form-confirmation h3 { color: var(--bleu-dark); margin-bottom: var(--esp-2); }
.form-confirmation p { color: var(--texte-70); }

/* --- Colonne de réassurance sur fond bleu foncé. --- */
.reassurance {
    padding: var(--esp-6);
    border-radius: var(--rayon-lg);
    background: var(--bleu-dark);
    color: var(--blanc);
}
.reassurance__titre {
    color: var(--blanc);
    font-size: var(--fs-h3);
    margin-bottom: var(--esp-5);
    padding-top: var(--esp-3);
    border-top: 3px solid var(--parme);
    max-width: 16ch;
}
.reassurance__liste {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--esp-5);
}
.reassurance__liste li {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-4);
}
.reassurance__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blanc);
    color: var(--bleu);
}
.reassurance__icone svg { width: 22px; height: 22px; }
.reassurance__item-titre {
    display: block;
    font-family: var(--police-titre);
    font-weight: 600;
    color: var(--blanc);
}
.reassurance__item-texte { font-size: var(--fs-small); color: var(--blanc-70); }
.reassurance__encart {
    margin-top: var(--esp-6);
    padding: var(--esp-5);
    border-radius: var(--rayon-md);
    background: var(--blanc-15);
}
.reassurance__encart-titre { color: var(--blanc); font-size: var(--fs-base); margin-bottom: var(--esp-2); }
.reassurance__encart p { font-size: var(--fs-small); color: var(--blanc-70); margin-bottom: var(--esp-4); }

/* --- Bande de trois engagements sous le formulaire. --- */
@media (min-width: 1024px) {
    .bande-piliers--3 { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   31. Habillage local de la page Event Signature
   -------------------------------------------------------------------------
   Rapprochement visuel de la maquette cliente, par CSS seul. Toutes les règles
   sont préfixées par body:has(#mots-cles-titre) : cet identifiant n'existe que
   sur prestations/event-signature.html, les neuf autres pages du silo ne sont
   donc jamais atteintes. Aucun composant partagé n'est modifié : les variantes
   sont locales. Couleurs : jetons de charte en transparence, rien de nouveau.
   ------------------------------------------------------------------------- */

/* --- Formes décoratives du hero (blobs bleu et parme de la maquette). ---
   Posées devant le fond existant, qui reste la dernière couche. Contraste du
   texte blanc mesuré : 7,2:1 au pire croisement, au-dessus du seuil AAA. */
body:has(#mots-cles-titre) .hero {
    background:
        radial-gradient(38% 46% at 88% 12%, rgba(164, 139, 255, 0.30) 0%, rgba(164, 139, 255, 0) 70%),
        radial-gradient(42% 48% at 6% 88%, rgba(0, 51, 204, 0.55) 0%, rgba(0, 51, 204, 0) 72%),
        radial-gradient(30% 36% at 72% 78%, rgba(164, 139, 255, 0.18) 0%, rgba(164, 139, 255, 0) 70%),
        radial-gradient(120% 130% at 78% 25%, rgba(0, 51, 204, 0.55) 0%, transparent 55%),
        var(--bleu-dark);
}

/* --- Zones image : fond teinté et ombre marquée, pour qu'elles se lisent
   comme un emplacement préparé et non comme un cadre vide. --- */
body:has(#mots-cles-titre) .hero__aside picture,
body:has(#mots-cles-titre) .figure-legende picture {
    display: block;
    border-radius: var(--rayon-xl);
    background: linear-gradient(140deg, var(--bleu-05), var(--parme-15));
}
body:has(#mots-cles-titre) .hero__image {
    box-shadow: 0 18px 48px rgba(1, 34, 146, 0.28);
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -1px;
}
body:has(#mots-cles-titre) .figure-legende img {
    box-shadow: 0 16px 40px rgba(1, 34, 146, 0.18);
    border: 1px solid var(--bleu-10);
}

/* --- Cartes « Pourquoi choisir cette prestation ? » : fond teinté, la carte
   centrale en parme comme sur la maquette. --- */
body:has(#mots-cles-titre) section[aria-labelledby="pourquoi-titre"] .carte {
    background: var(--bleu-05);
    border-color: var(--bleu-10);
}
body:has(#mots-cles-titre) section[aria-labelledby="pourquoi-titre"] .carte:nth-child(2) {
    background: var(--parme-15);
}

/* --- Trait de couleur sous chaque titre de carte (bleu, parme, bleu). --- */
body:has(#mots-cles-titre) section[aria-labelledby="pourquoi-titre"] .carte__titre::after {
    content: '';
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-top: var(--esp-3);
    border-radius: var(--rayon-pill);
    background: var(--bleu);
}
body:has(#mots-cles-titre) section[aria-labelledby="pourquoi-titre"] .carte:nth-child(2) .carte__titre::after {
    background: var(--parme);
}

/* -------------------------------------------------------------------------
   32. Actualités : carte de liste, article et pagination (lot 4b)
   ------------------------------------------------------------------------- */
.carte-actualite {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--blanc);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-lg);
    overflow: hidden;
    box-shadow: var(--ombre-carte);
    transition: box-shadow var(--transition), transform var(--transition);
}
.carte-actualite:hover {
    box-shadow: var(--ombre-carte-survol);
    transform: translateY(-2px);
}
.carte-actualite__visuel {
    display: block;
    width: 100%;
    height: 12rem;
    object-fit: cover;
    background: var(--surface);
}
.carte-actualite__corps {
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    padding: var(--esp-6);
}
.carte-actualite__date {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--bleu);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.carte-actualite__titre {
    font-size: var(--fs-h4);
    color: var(--bleu-dark);
}
.carte-actualite__titre a {
    color: inherit;
    text-decoration: none;
}
.carte-actualite__titre a:hover { text-decoration: underline; }
.carte-actualite__texte { color: var(--texte-70); }
.carte-actualite .carte__lien { margin-top: auto; }

/* --- Article : corps de texte lisible, largeur de lecture bornée. --- */
.article { max-width: 46rem; margin-inline: auto; }
.article__entete { margin-bottom: var(--esp-6); }
.article__dates {
    margin-top: var(--esp-3);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
.article__visuel {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rayon-xl);
    box-shadow: var(--ombre-carte);
    margin-bottom: var(--esp-6);
}
.article__contenu > * + * { margin-top: var(--esp-4); }
.article__contenu h2 { margin-top: var(--esp-7); }
.article__contenu h3 { margin-top: var(--esp-6); }
/* Le reset global retire les puces : le contenu rédigé par la cliente les
   reprend, comme les pages légales. */
.article__contenu ul { list-style: disc; padding-left: var(--esp-5); }
.article__contenu ol { list-style: decimal; padding-left: var(--esp-5); }
.article__contenu li + li { margin-top: var(--esp-2); }
.article__contenu img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rayon-lg);
}
.article__contenu blockquote {
    padding-left: var(--esp-4);
    border-left: 3px solid var(--parme);
    color: var(--texte-70);
    font-style: italic;
}

/* --- Pagination des actualités. --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--esp-5);
    margin-top: var(--esp-7);
    font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   33. Mes ressources (espace membres, défaut de recette n° 4)
   ------------------------------------------------------------------------- */
/* Fond clair sous les cartes blanches : mêmes jetons que .section--surface,
   posé ici en modificateur plutôt que sur inc/compte-layout.php (qui sert
   aussi la connexion et le changement de mot de passe, hors périmètre du
   défaut). Sans lui, les cartes blanches se fondaient dans le fond blanc de
   l'espace membres, sans aucune séparation visible. */
.mes-ressources {
    background: var(--surface);
    border-radius: var(--rayon-lg);
    padding: var(--esp-6);
}
.mes-ressources__sous-titre {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bleu-dark);
    margin-top: var(--esp-5);
    margin-bottom: var(--esp-2);
}

/* -------------------------------------------------------------------------
   34. Espace membres : lisibilité et respiration (recette du 27/09/2026)
   ------------------------------------------------------------------------- */
/* Tout est borné à body.espace-membre (posé par inc/compte-layout.php) :
   le site public ne change pas. Les écrans de compte réutilisent des
   composants pensés pour l'administration, dont le fond périwinkle détache
   les blocs ; ici le fond est blanc, d'où les filets et le texte renforcés. */

/* Titres : de l'air sous chaque titre avant le bloc qui suit. */
.espace-membre main h1 {
    margin-bottom: var(--esp-6);
}
.espace-membre .admin-bloc h2,
.espace-membre article h2 {
    margin-bottom: var(--esp-4);
}
.espace-membre .badge + .carte__titre,
.espace-membre .badge + .carte-tarif__titre {
    margin-top: var(--esp-3);
}

/* Texte secondaire en couleur pleine : --texte-70 sur blanc ou sur --surface
   paraissait délavé. --texte atteint 17,4:1 sur blanc et 16:1 sur --surface. */
.espace-membre .carte__texte,
.espace-membre .carte-tarif__intro,
.espace-membre .tarif-ligne__libelle,
.espace-membre .admin-aide {
    color: var(--texte);
}

/* Thème de l'administration (27/09/2026) : fond #ADB8DB déclaré dans
   admin.css (section 10), blocs et cartes blancs détachés par le filet et
   l'ombre de ce thème, faute de contraste suffisant (1,97:1). Sur ce fond,
   seuls --texte (8,83:1), --bleu-dark (6,48:1) et --bleu (4,54:1) sont admis
   en texte. */
.espace-membre main h1 {
    color: var(--bleu-dark);
}
.espace-membre .admin-bloc,
.espace-membre .carte,
.espace-membre .carte-tarif {
    border: 1px solid var(--admin-filet);
    box-shadow: var(--admin-ombre);
}
/* Page courte : le contenu s'étire jusqu'au pied de page, qui reste en bas
   de l'écran au lieu de laisser le fond lavande reparaître dessous. */
body.espace-membre {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.espace-membre main {
    flex: 1 0 auto;
}
/* Le conteneur gris de « Mes ressources » n'a plus lieu d'être : les cartes
   blanches se posent directement sur le fond. */
.espace-membre .mes-ressources {
    background: transparent;
    padding: 0;
}
/* Page protégée : le contenu rédigé passe dans une carte blanche. */
.espace-membre article {
    background: var(--blanc);
    border: 1px solid var(--admin-filet);
    border-radius: var(--rayon-lg);
    box-shadow: var(--admin-ombre);
    padding: var(--esp-6);
}

/* Champs de saisie : bordure --bleu-dark à 60 %, soit 4,1:1 sur blanc
   (seuil de 3:1 pour un composant d'interface), au lieu de --bleu-10 (1,1:1). */
.espace-membre input[type="text"],
.espace-membre input[type="email"],
.espace-membre input[type="password"],
.espace-membre input[type="tel"],
.espace-membre select,
.espace-membre textarea {
    border-color: rgba(1, 34, 146, 0.6);
}

/* Pages protégées (contenu rédigé dans l'éditeur) : paragraphes et titres
   espacés, comme sur les actualités. */
.espace-membre article > * + * {
    margin-top: var(--esp-4);
}
.espace-membre article > h2,
.espace-membre article > h3 {
    margin-top: var(--esp-6);
}
/* Badge des cartes à sa largeur de contenu, comme sur la carte prestation
   (.carte est une colonne flex qui l'étirait sur toute la largeur). */
.espace-membre .carte .badge {
    align-self: flex-start;
}

/* -------------------------------------------------------------------------
   35. Formulaire de commande : code postal et ville sur une ligne
   ------------------------------------------------------------------------- */
.champ-ligne {
    display: grid;
    gap: 0 var(--esp-4);
}
@media (min-width: 560px) {
    .champ-ligne { grid-template-columns: 10rem 1fr; }
}

/* -------------------------------------------------------------------------
   36. Formulaire de commande aux couleurs de l'espace client (27/09/2026)
   ------------------------------------------------------------------------- */
/* Demande de Willy : même lisibilité que l'espace client. Le fond #ADB8DB,
   jusqu'ici réservé à l'administration et à l'espace client, arrive ici sur
   une page publique, mais seulement sur la zone du formulaire (le hero de la
   page reste celui du site). Sur ce fond, seuls --texte (8,83:1),
   --bleu-dark (6,48:1) et --bleu (4,54:1) sont admis en texte : tout le
   contenu est posé dans des cartes blanches. */
.commande-zone {
    background: #ADB8DB;
}
.commande-zone .fiche__principal,
.commande-zone .fiche__aside > .carte-tarif,
.commande-zone > .conteneur > p {
    background: var(--blanc);
    border: 1px solid rgba(1, 34, 146, 0.18);
    border-radius: var(--rayon-lg);
    box-shadow: 0 10px 30px rgba(1, 34, 146, 0.20);
}
.commande-zone .fiche__principal,
.commande-zone > .conteneur > p {
    padding: var(--esp-6);
}
@media (max-width: 639px) {
    .commande-zone .fiche__principal,
    .commande-zone > .conteneur > p {
        padding: var(--esp-5) var(--esp-4);
    }
}
/* Champs visibles sur la carte blanche : fond --surface, bordure à 4,1:1. */
.commande-zone .champ input[type="text"],
.commande-zone .champ input[type="tel"],
.commande-zone .champ input[type="email"],
.commande-zone .champ select,
.commande-zone .champ textarea {
    background: var(--surface);
    border-color: rgba(1, 34, 146, 0.6);
}
/* Filet de sécurité : un bloc de champ caché ne s'affiche jamais. */
.champ[hidden] {
    display: none;
}


/* -------------------------------------------------------------------------
   37. Produit « À venir » en boutique (recette du 30/09/2026)
   Carte en retrait des produits disponibles : fond --surface, filet
   pointillé bleu, pas d'effet de survol. Le badge est sur fond bleu profond
   (blanc à 12,8:1) : le parme plein porterait un texte blanc à 2,7:1.
   ------------------------------------------------------------------------- */
.carte--a-venir {
    background: var(--surface);
    border: 2px dashed var(--bleu);
    box-shadow: none;
}
.carte--a-venir:hover {
    box-shadow: none;
    transform: none;
}
.carte--a-venir .carte__titre { color: var(--bleu-dark); }
.badge--a-venir {
    align-self: flex-start;
    background: var(--bleu-dark);
    border-color: var(--bleu-dark);
    color: var(--blanc);
}
.badge--a-venir::before { background: var(--parme); }
.carte-tarif__a-venir {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
}

/* -------------------------------------------------------------------------
   38. Pages de détail des formules de partenariat (09/10/2026)
   Une identité par formule, comme les cartes de la section 30 : Visibilité
   sur fond clair, nom en bleu (8,1:1 sur --surface) ; Signature sur fond
   bleu profond, nom et surtitre en parme (4,7:1). Le parme n'est jamais posé
   en texte sur fond clair. Dégradés violets et logo « infini » des maquettes
   non repris.
   ------------------------------------------------------------------------- */
.formule-hero {
    --accent: var(--bleu);
    background: var(--surface);
    padding-block: var(--esp-5) var(--esp-8);
}
.formule-hero--signature {
    --accent: var(--parme);
    background: var(--bleu-dark);
    color: var(--blanc);
}
.formule-hero__grille {
    display: grid;
    gap: var(--esp-7);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .formule-hero__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.formule-hero h1 {
    font-size: var(--fs-hero);
    line-height: 1.05;
    color: var(--bleu-dark);
    margin-block: var(--esp-2) var(--esp-5);
}
.formule-hero__nom { display: block; color: var(--accent); }
.formule-hero__accroche {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-lead);
    line-height: 1.35;
    color: var(--bleu-dark);
    max-width: 44ch;
}
.formule-hero__texte p {
    color: var(--texte);
    max-width: var(--largeur-texte);
    margin-top: var(--esp-4);
}
.formule-hero--signature h1,
.formule-hero--signature .formule-hero__accroche { color: var(--blanc); }
.formule-hero--signature .surtitre { color: var(--parme); }
.formule-hero--signature .formule-hero__texte p { color: var(--blanc-70); }

/* --- Encart tarif : déclinaison de la carte-tarif (fond blanc, couleurs propres). --- */
.carte-tarif--formule .carte__icone { margin-bottom: var(--esp-4); }
.formule-hero--signature .carte-tarif--formule .carte__icone {
    background: var(--bleu-dark);
    color: var(--parme);
}
.formule-prix {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--esp-2);
    margin-top: var(--esp-2);
}
.formule-prix__montant {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1;
    color: var(--bleu);
}
.formule-hero--signature .formule-prix__montant { color: var(--bleu-dark); }
.formule-prix__unite {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--bleu-dark);
}
/* Offre de lancement : même teinte parme légère que les paliers « sur devis ». */
.formule-offre {
    display: flex;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
    padding: var(--esp-4);
    border-radius: var(--rayon-md);
    background: rgba(164, 139, 255, 0.10);
    border: 1px solid rgba(164, 139, 255, 0.35);
}
.formule-offre svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--bleu); }
.formule-offre__titre {
    font-family: var(--police-titre);
    font-weight: 600;
    color: var(--bleu-dark);
}
.formule-offre p { font-size: var(--fs-small); color: var(--texte); margin-top: var(--esp-1); }
.formule-linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    margin-top: var(--esp-5);
    color: var(--bleu);
    font-weight: 600;
}
.formule-linkedin svg { width: 24px; height: 24px; flex-shrink: 0; }

/* --- Contenu : la liste à gauche, « Pour qui ? » et « Conditions » à droite. --- */
.formule-contenu {
    display: grid;
    gap: var(--esp-6);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 1024px) {
    .formule-contenu { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.formule-contenu__cote { display: grid; gap: var(--esp-6); }
/* Blocs d'information, pas des liens : aucun effet de survol. */
.formule-bloc:hover { box-shadow: var(--ombre-carte); transform: none; }
.formule-bloc__titre { font-size: var(--fs-h3); color: var(--bleu-dark); }
.formule-bloc__titre .accent-bleu { color: var(--bleu); }
.formule-bloc__corps { display: flex; gap: var(--esp-4); align-items: flex-start; }
.formule-bloc__corps .carte__icone { flex-shrink: 0; }
.formule-bloc .liste-puces li { color: var(--texte); }

/* Liste à coches sur fond clair : coche bleue sur pastille bleu-10 (la
   variante d'origine, parme, est réservée aux sections sombres). */
.liste-coches--clair { margin-top: var(--esp-2); }
.liste-coches--clair .liste-coches__coche {
    border-radius: 50%;
    background: var(--bleu-10);
    border-color: transparent;
    color: var(--bleu);
}
.liste-coches--clair li { color: var(--texte); }

/* -------------------------------------------------------------------------
   39. Boutique : distinction gratuit / payant (10/10/2026)
   Le prix devient l'élément fort de la carte. Payant en bleu (8,9:1 sur
   blanc), gratuit en --parme-fonce (6,0:1 sur le fond parme-08). Badge
   « Gratuit » en parme plein, texte bleu profond (4,7:1, règle de btn--parme).
   Le badge de type reste affiché à côté ; dans le hero de la fiche, il passe
   en translucide (badge--sur-sombre) pour ne pas se confondre avec « Gratuit ».
   ------------------------------------------------------------------------- */
.carte__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-2);
}
.badge--gratuit {
    background: var(--parme);
    border-color: var(--parme);
    color: var(--bleu-dark);
}
.badge--gratuit::before { background: var(--bleu-dark); }
.carte .prix {
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--bleu);
}
/* Carte gratuite : fond teinté et filet haut parme, déclaré après le
   raccourci border de .carte pour ne pas être écrasé. */
.carte--gratuite {
    background: var(--parme-08);
    border-top: 4px solid var(--parme);
}
.carte--gratuite .prix { color: var(--parme-fonce); }

/* Fiche produit : même code couleur dans la carte tarif. */
.carte-tarif--payant .tarif-ligne__prix { color: var(--bleu); }
.carte-tarif--gratuite { border-top: 4px solid var(--parme); }
.carte-tarif--gratuite .tarif-ligne {
    background: var(--parme-08);
    border-color: var(--parme-15);
}
.carte-tarif--gratuite .tarif-ligne__prix { color: var(--parme-fonce); }
.carte-tarif .tarif-ligne__prix { font-weight: 700; }

/* -------------------------------------------------------------------------
   40. Page Formation sur mesure (10/10/2026, photos et FAQ le 13/10/2026)
   Le panneau d'accroche a laissé la place à la photo de salle fournie par
   la cliente (figure-legende) ; ne restent que la colonne de texte voisine
   et la phrase de contact sous la FAQ.
   ------------------------------------------------------------------------- */
.faq__contact {
    margin-top: var(--esp-6);
    max-width: var(--largeur-texte);
    color: var(--texte-70);
}
/* Colonne de texte voisine : badge, titre, paragraphe et encart espacés. */
.approche__texte > * + * { margin-top: var(--esp-4); }
.approche__texte > .badge + h2 { margin-top: var(--esp-3); }

/* -------------------------------------------------------------------------
   41. Encart Qualiopi (13/10/2026, audit du 8 décembre)
   Règle de la marque : la mention « La certification qualité a été délivrée
   au titre de… » est collée directement sous le logo, seule, sans aucun
   autre élément à côté. La référence du certificat descend en dessous,
   séparée par un espace net et un filet. Même largeur pour le logo et la
   mention, pour que la mention se lise comme la légende du logo.
   ------------------------------------------------------------------------- */
.encart-qualiopi {
    max-width: 19rem;
}
.encart-qualiopi__marque {
    margin: 0;
}
.encart-qualiopi__logo {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
}
.encart-qualiopi__mention {
    max-width: 13rem;
    margin-top: var(--esp-2);
    font-size: var(--fs-small);
    line-height: 1.45;
    color: var(--bleu-dark);
}
.encart-qualiopi__certificat {
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--bleu-10);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--texte-70);
}
/* Page Formation sur mesure : encart sous les cartes de modalités. */
.modalites__qualiopi {
    margin-top: var(--esp-8);   /* review V1 : plus d'air sous les cartes de modalités */
}

/* -------------------------------------------------------------------------
   42. CGV V10bis (13/10/2026)
   Renvoi vers les CGV Formation en tête du document.
   ------------------------------------------------------------------------- */
.encart-renvoi {
    padding: var(--esp-4) var(--esp-5);
    border-left: 4px solid var(--parme);
    background: var(--parme-08);
    border-radius: var(--rayon-md);
}

/* -------------------------------------------------------------------------
   43. Boutique : offres réservées et plaquette (13/10/2026)
   Public autorisé rappelé sur la carte tarif et au formulaire de commande
   (CGV V10bis, article 2), plaquette PDF sous la carte tarif.
   ------------------------------------------------------------------------- */
.carte-tarif__public {
    margin-top: var(--esp-3);
    font-weight: 600;
    color: var(--bleu-dark);
}
.encart-public {
    margin-bottom: var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border-left: 4px solid var(--bleu);
    background: var(--bleu-05);
    border-radius: var(--rayon-md);
    font-weight: 600;
    color: var(--texte);
}
/* Renvoi des particuliers vers le contact (21/10/2026) : fiche et formulaire
   de commande. Texte et lien en --texte et --bleu-dark, lisibles sur blanc
   comme sur le fond D1 de .commande-zone. */
.renvoi-particuliers {
    margin-top: var(--esp-2);
    font-size: var(--fs-small);
    color: var(--texte);
}
.encart-public + .renvoi-particuliers { margin: calc(-1 * var(--esp-2)) 0 var(--esp-4); }
.renvoi-particuliers a {
    font-weight: 600;
    color: var(--bleu-dark);
    text-decoration: underline;
}
.fiche__aside .lien-document {
    margin-top: var(--esp-4);
}
/* Précision sous le prix (« par candidat évalué », échéancier Premium). */
.prix-mention {
    margin-top: var(--esp-1);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
.carte-tarif__mention--prix { font-weight: 600; color: var(--texte); }

/* -------------------------------------------------------------------------
   44. Annuaire des partenaires (15/10/2026, refondu le 21/10/2026, review V1 lot 6)
   Page qui-sommes-nous/partenaires.html. Jetons existants uniquement.
   Chaque fiche est un <details> : contenu présent dans le HTML servi,
   replié par le navigateur, sans JavaScript.
   Contrastes AA mesurés en recette (couleur calculée sur fond composé) :
     index actif blanc sur --bleu 8,95:1 ; lettre --bleu sur blanc 8,95:1 ;
     lettre vide --texte-70 sur --surface 6,16:1 ; badges : référencé
     15,96:1, Visibilité 10,68:1, Signature --bleu-dark sur --parme 4,69:1
     (jamais de blanc sur le parme), emplacement 12,76:1 ; nom 12,76:1 ;
     lieu et site 6,41:1 ; secteur --parme-fonce 6,42:1 ; mention du niveau
     6,41:1 ; « À venir » : titre 10,74:1, texte 14,64:1, lien 7,53:1.
   ------------------------------------------------------------------------- */

/* --- Recherche : un champ et un bouton, sans dépendance JavaScript. --- */
.recherche {
    max-width: 40rem;
    margin-block: var(--esp-5) var(--esp-4);
}
.recherche label {
    display: block;
    margin-bottom: var(--esp-1);
    font-weight: 600;
    font-size: var(--fs-small);
}
.recherche__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}
.recherche input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.7em 0.9em;
    font: inherit;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid rgba(0, 51, 204, 0.35);
    border-radius: var(--rayon-sm);
}
.recherche input:focus-visible {
    outline: 2px solid var(--bleu);
    outline-offset: 1px;
    border-color: var(--bleu);
}
.recherche__aide {
    margin-top: var(--esp-1);
    font-size: var(--fs-small);
    color: var(--texte-70);
}
/* Bilan d'une recherche de la boutique (« 3 produits pour … », ou le catalogue
   complet quand rien ne correspond), review V1 du 17/10/2026. */
.recherche__resultat {
    margin-bottom: var(--esp-5);
    font-size: var(--fs-small);
}

/* --- Annuaire refondu (review V1, lot 6, 21/10/2026) : cartes carrées et
       homogènes sur le modèle du catalogue des formations, fiche dépliée sur
       place sans réafficher le logo, index sur une seule rangée.
       Contrastes AA mesurés en recette : voir le journal (lot 6). --- */
.annuaire { background: var(--surface); }

/* --- En-tête clair de l'annuaire (review V1, lot 6 bis, maquette de la
       cliente) : blanc vers --surface, halo parme et bleu à droite, mêmes
       textes et même gabarit que les autres en-têtes. Les couleurs de texte
       repassent sur la charte claire (jamais de parme en texte sur blanc). --- */
.hero--clair {
    background:
        radial-gradient(55% 85% at 92% 15%, rgba(164, 139, 255, 0.30) 0%, transparent 62%),
        radial-gradient(45% 70% at 72% 105%, rgba(0, 51, 204, 0.10) 0%, transparent 65%),
        linear-gradient(180deg, var(--blanc) 0%, var(--surface) 100%);
    color: var(--texte);
    border-bottom: 1px solid var(--bleu-10);
}
.hero--clair h1 { color: var(--bleu-dark); }
/* Accent du titre : bleu de la charte (texte sur fond clair) ; dégradé bleu
   vers parme foncé là où le navigateur sait découper le fond au texte. */
.hero--clair h1 .accent-parme { color: var(--bleu); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero--clair h1 .accent-parme {
        background: linear-gradient(90deg, var(--bleu) 0%, var(--parme-fonce) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.hero--clair .hero__intro { color: var(--texte); }
.hero--clair .breadcrumb--sur-sombre a,
.hero--clair .breadcrumb--sur-sombre li:not(:last-child)::after { color: var(--texte-70); }
.hero--clair .breadcrumb--sur-sombre a:hover { color: var(--bleu); }
.hero--clair .breadcrumb [aria-current="page"] { color: var(--texte); }
.hero--clair .texte-mention { color: var(--texte-70); opacity: 1; }

/* Outils : titre et recherche sur une ligne en bureau, l'index dessous. */
.annuaire-outils {
    display: grid;
    gap: var(--esp-4);
    grid-template-areas: "titre" "recherche" "index";
    margin-bottom: var(--esp-3);
}
.annuaire-outils__titre { grid-area: titre; }
.annuaire-recherche { grid-area: recherche; margin: 0; max-width: 32rem; }
.annuaire-index { grid-area: index; min-width: 0; }
@media (min-width: 1024px) {
    .annuaire-outils {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
        grid-template-areas: "titre recherche" "index index";
        align-items: end;
        column-gap: var(--esp-7);
    }
    .annuaire-recherche { max-width: none; }
}

/* --- Index alphabétique : une seule rangée, qui défile à l'horizontale
       quand l'écran est trop étroit (jamais d'empilement). « Tous » puis A à
       Z ; une lettre sans partenaire n'est pas un lien. --- */
.annuaire-index ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.annuaire-index li { flex: 0 0 auto; scroll-snap-align: start; }
/* Tant que la rangée ne tient pas sur l'écran, un fondu à droite signale
   qu'elle défile ; la marge finale laisse la dernière lettre en sortir. */
@media (max-width: 1279px) {
    .annuaire-index ul {
        padding-right: var(--esp-7);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
    }
}
.annuaire-index a,
.annuaire-index__vide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--esp-2);
    border-radius: var(--rayon-pill);
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 0.95rem;
}
.annuaire-index a {
    color: var(--bleu);
    background: var(--blanc);
    border: 1px solid var(--bleu-10);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(1, 34, 146, 0.06);
    transition: background var(--transition), border-color var(--transition);
}
.annuaire-index a:hover { background: var(--bleu-05); border-color: rgba(0, 51, 204, 0.35); }
.annuaire-index a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.annuaire-index li:first-child a { padding-inline: var(--esp-4); }
.annuaire-index a[aria-current="page"] {
    color: var(--blanc);
    background: var(--bleu);
    border-color: var(--bleu);
}
.annuaire-index__vide {
    color: var(--texte-70);
    font-weight: 400;
}

.annuaire-resultat {
    margin-bottom: var(--esp-5);
    font-size: var(--fs-small);
}
.annuaire-vide {
    margin-bottom: var(--esp-5);
    font-weight: 600;
}

/* --- Grille : cartes de même format, une puis deux à cinq colonnes. Une
       fiche dépliée grandit sur place ; ses voisines gardent leur taille. --- */
.annuaire-grille {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 560px) {
    .annuaire-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
}
@media (min-width: 900px) {
    .annuaire-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .annuaire-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .annuaire-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Carte : même gabarit pour les trois niveaux, seul le badge (et la
       bordure parme de Signature, décorative) change. --- */
.partenaire {
    position: relative;
    background: var(--blanc);
    color: var(--texte);
    border: 1px solid var(--bleu-10);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-carte);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.partenaire:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-2px); }
.partenaire--signature:hover { box-shadow: 0 0 0 1px var(--parme), var(--ombre-carte-survol); }
.partenaire[open] { border-color: rgba(0, 51, 204, 0.35); transform: none; }

/* Carte fermée, dans l'ordre de la cliente : logo, nom, lieu, site. */
.partenaire__carte,
.partenaire--a-venir {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--esp-2);
    /* Même hauteur pour toutes les cartes fermées : nom sur deux lignes au
       plus, domaine sur une ligne (l'adresse complète est dans la fiche). */
    min-height: 25rem;
    padding: var(--esp-5) var(--esp-4);
    text-align: center;
}
.partenaire__carte {
    cursor: pointer;
    list-style: none;
    border-radius: var(--rayon-lg);
}
.partenaire__carte::-webkit-details-marker { display: none; }
.partenaire__carte:focus-visible {
    outline: 2px solid var(--bleu);
    outline-offset: 2px;
}
.partenaire__logo {
    display: grid;
    place-items: center;
    width: 7.5rem;
    aspect-ratio: 1;
    margin-block: var(--esp-2);
    padding: var(--esp-2);
    background: var(--blanc);
    border: 1px solid var(--surface);
    border-radius: var(--rayon-md);
    box-shadow: 0 2px 10px rgba(1, 34, 146, 0.06);
    overflow: hidden;
    flex-shrink: 0;
}
.partenaire__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.partenaire__initiales {
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.75rem;
    color: var(--bleu-dark);
}
.partenaire__nom {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--bleu-dark);
    overflow-wrap: anywhere;
}
/* Secteur, sous le nom (maquette et spécification du 17/10) : une ligne,
   tronqué par des points de suspension s'il est long, pour garder la hauteur
   commune ; le libellé complet reste dans le HTML et en infobulle. */
.partenaire__secteur {
    display: block;
    max-width: 100%;
    margin-top: -2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--parme-fonce);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.partenaire__ligne {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--texte-70);
    overflow-wrap: anywhere;
}
.partenaire__ligne--site > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.partenaire__icone {
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.15em;
    flex-shrink: 0;
    color: var(--bleu);
}
/* Indice d'ouverture : chevron rond, tourné quand la fiche est dépliée. */
.partenaire__voir {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: auto;
    border-radius: var(--rayon-pill);
    color: var(--bleu);
    background: var(--bleu-05);
    transition: background var(--transition);
}
.partenaire__voir svg { width: 1.1rem; height: 1.1rem; transition: transform var(--transition); }
.partenaire__carte:hover .partenaire__voir { background: var(--bleu-10); }
.partenaire[open] .partenaire__voir svg { transform: rotate(180deg); }

/* Badge du niveau, lisible sans la couleur (le libellé suffit). */
.badge-partenaire {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: var(--rayon-pill);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--texte);
    background: var(--surface);
    border: 1px solid rgba(26, 26, 26, 0.12);
}
.badge-partenaire--visibilite {
    color: var(--bleu-dark);
    background: var(--bleu-10);
    border-color: var(--bleu-10);
}
.badge-partenaire--signature {
    color: var(--bleu-dark);
    background: var(--parme);
    border-color: var(--parme);
}
.badge-partenaire--a-venir {
    color: var(--bleu-dark);
    background: var(--blanc);
    border-color: rgba(0, 51, 204, 0.25);
}

/* --- Fiche dépliée : le complément seulement (secteur, présentation,
       coordonnées, mention du niveau), aligné à gauche pour la lecture. --- */
.partenaire__fiche {
    margin-inline: var(--esp-4);
    padding-block: var(--esp-4) var(--esp-5);
    border-top: 1px solid var(--bleu-10);
    font-size: var(--fs-small);
    line-height: 1.6;
}
.partenaire__presentation { margin-bottom: var(--esp-3); overflow-wrap: anywhere; }
.partenaire__coordonnees {
    display: grid;
    gap: var(--esp-3);
    margin-top: var(--esp-4);
}
.partenaire__coordonnees dt { font-weight: 600; }
.partenaire__coordonnees dd { margin: 0; overflow-wrap: anywhere; }
.partenaire__niveau {
    margin-top: var(--esp-4);
    padding-top: var(--esp-3);
    border-top: 1px dashed var(--bleu-10);
    font-size: 0.8rem;
    color: var(--texte-70);
}

/* --- Signature : même format que les autres, bordure parme et lueur parme
       en tête de carte. Décoratif : le badge porte l'information. --- */
.partenaire--signature {
    /* Trait parme de 2 px : bordure de 1 px + ombre de 1 px, pour garder la
       hauteur des autres cartes. */
    border-color: var(--parme);
    box-shadow: 0 0 0 1px var(--parme), var(--ombre-carte);
    background: linear-gradient(180deg, rgba(164, 139, 255, 0.14) 0, var(--blanc) 9rem);
}
.partenaire--signature[open] { border-color: var(--parme); }

/* --- Emplacement « À venir » : même gabarit, mène aux formules. Pointillés
       décoratifs, le texte porte l'information. --- */
.partenaire--a-venir {
    /* Bordure de 2 px comprise : même hauteur que les fiches (1 px de bordure). */
    min-height: calc(25rem + 2px);
    background: var(--bleu-05);
    border: 2px dashed rgba(0, 51, 204, 0.35);
    box-shadow: none;
    text-decoration: none;
}
.partenaire--a-venir:hover { background: var(--bleu-10); box-shadow: none; }
.partenaire--a-venir:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.partenaire--a-venir .partenaire__logo {
    color: var(--bleu);
    background: var(--blanc);
    border-color: transparent;
}
.partenaire--a-venir .partenaire__logo svg { width: 2.5rem; height: 2.5rem; }
.partenaire--a-venir .partenaire__ligne { color: var(--texte); }
.partenaire__cta {
    margin-top: auto;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--bleu);
}
.partenaire__cta::after { content: " →"; }
.partenaire--a-venir:hover .partenaire__cta { text-decoration: underline; }

/* --- Mobile : cartes en ligne (logo à gauche) pour ne pas empiler dix
       grands carrés ; même ordre de lecture. --- */
@media (max-width: 559px) {
    .partenaire__carte,
    .partenaire--a-venir {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        column-gap: var(--esp-4);
        row-gap: var(--esp-1);
        align-items: center;
        justify-items: stretch;
        min-height: 12.5rem;
        padding: var(--esp-4);
        text-align: left;
    }
    .partenaire__carte > *,
    .partenaire--a-venir > * { grid-column: 2; }
    .partenaire__logo {
        grid-column: 1;
        grid-row: 1 / span 5;
        width: 5rem;
        margin: 0;
    }
    .partenaire__voir {
        grid-column: 3;
        grid-row: 1 / span 5;
        margin: 0;
    }
    .partenaire--a-venir { min-height: calc(12.5rem + 2px); }
    /* Colonne de texte étroite : le nom garde trois lignes, le secteur deux. */
    .partenaire__nom { -webkit-line-clamp: 3; line-clamp: 3; }
    .partenaire__secteur {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
    }
    .partenaire__cta { margin-top: var(--esp-1); }
}

@media (prefers-reduced-motion: reduce) {
    .partenaire,
    .partenaire__voir svg { transition: none; }
    .partenaire:hover { transform: none; }
}

/* -------------------------------------------------------------------------
   45. Review V1, mise en page (17/10/2026)
   ------------------------------------------------------------------------- */

/* --- « À propos de l'espace Partenaires » (page des formules) : bloc centré
       dans la page, titre compris, texte justifié en bureau. Césure activée
       (lang="fr") pour éviter les espaces trop larges ; en mobile, colonne
       trop étroite pour justifier proprement : texte aligné à gauche. --- */
/* Largeur en rem, commune au titre et au texte : en ch, le titre (police plus
   grande) serait plus large que le texte et ne s'alignerait pas dessus. */
.a-propos-partenaires .conteneur > * {
    max-width: 43rem;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .a-propos-partenaires .texte-legal p {
        text-align: justify;
        hyphens: auto;
    }
}

/* --- En-tête de la boutique sur le parme de la charte. Le blanc échoue sur
       ce fond (2,7:1) : textes en --texte et --bleu-dark, badge sur blanc.
       Contrastes mesurés en recette (journal du 17/10/2026). --- */
.hero--parme { background: var(--parme); color: var(--texte); }
.hero--parme h1 { color: var(--texte); }
.hero--parme h1 .accent-parme { color: var(--bleu-dark); }
.hero--parme .hero__intro { color: var(--texte); }
.hero--parme .breadcrumb a,
.hero--parme .breadcrumb li:not(:last-child)::after,
.hero--parme .breadcrumb [aria-current="page"] { color: var(--texte); }
.hero--parme .breadcrumb a:hover { color: var(--bleu-dark); }
.hero--parme .badge--parme {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--bleu-dark);
}

/* -------------------------------------------------------------------------
   46. Review V1, contenu (17/10/2026)
   ------------------------------------------------------------------------- */

/* --- « +N » à la suite des étiquettes d'une carte de l'équipe : compétences
       visibles seulement sur la fiche. Discret : sans fond, contour en
       pointillés, chiffre en --bleu (8,9:1 sur blanc). --- */
.etiquette--plus {
    color: var(--bleu);
    background: transparent;
    border-style: dashed;
    border-color: rgba(0, 51, 204, 0.45);
    font-weight: 600;
}

/* --- Carte « Recrutement en cours » : un poste ouvert, pas un profil (ni
       contacts, ni étiquettes, ni bouton). Fond surface pour la distinguer
       des membres sans l'effacer. --- */
.carte-membre--poste {
    background: var(--surface);
    box-shadow: none;
    border: 1px dashed rgba(0, 51, 204, 0.3);
}
.carte-membre--poste:hover { box-shadow: none; transform: none; }

/* --- Légende sous une photo : accroche en titre, suite en texte courant
       (page Intra, sur le modèle du visuel de la cliente). --- */
.figure-legende figcaption .figure-legende__accroche {
    display: block;
    font-size: var(--fs-h3);
    line-height: 1.25;
    color: var(--bleu-dark);
}
.figure-legende figcaption:has(.figure-legende__accroche) {
    font-family: var(--police-texte);
    font-weight: 400;
    color: var(--texte);
}

/* -------------------------------------------------------------------------
   47. Boutique : visuel de l'en-tête (review V1, lot 7, 20/10/2026)
   ------------------------------------------------------------------------- */

/* Visuel décoratif collé au bord droit de l'en-tête parme. Son côté gauche
   se fond dans le parme par un dégradé CSS (l'image n'est pas retouchée).
   Le texte reste dans la moitié gauche, sur le parme plein : contrastes
   inchangés (--texte 6,4:1, --bleu-dark 4,7:1). En dessous de 1024 px, le
   texte occupe toute la largeur : le visuel est masqué plutôt que rétréci. */
.hero__visuel-droite { display: none; }

@media (min-width: 1024px) {
    .hero__visuel-droite {
        display: block;
        position: absolute;
        inset-block: 0;
        right: 0;
        width: 52%;
        margin: 0;
    }
    .hero__visuel-droite img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 70% center;
    }
    /* Fondu : parme plein au bord gauche du visuel, transparent au tiers. */
    .hero__visuel-droite::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--parme) 0%, rgba(164, 139, 255, 0.85) 12%, rgba(164, 139, 255, 0) 45%);
    }
    /* Texte au-dessus du visuel, borné à la moitié gauche. */
    .hero--visuel .conteneur { position: relative; z-index: 1; }
    .hero--visuel .hero__contenu { max-width: 46%; }
}

/* -------------------------------------------------------------------------
   48. Pages légales modifiables (CGV, 21/10/2026)
   ------------------------------------------------------------------------- */

/* Encadré légal saisi dans l'éditeur comme une citation : le rendu lui donne
   la classe encadre-legal ; on retire les marges et l'italique par défaut. */
/* Une adresse longue dans le texte (Légifrance) se coupe plutôt que de faire
   déborder la page en mobile (constaté à 390 px le 21/10/2026). */
.texte-legal a { overflow-wrap: anywhere; }
.texte-legal blockquote.encadre-legal {
    margin-inline: 0;
    font-style: normal;
}

/* Pages légales en deux colonnes dès 1 024 px (21/10/2026) : le texte garde sa
   largeur de lecture, aligné à gauche sur l'en-tête ; le sommaire occupe la
   colonne de droite, collé au bord droit du conteneur (mêmes marges que les
   autres pages) et reste visible au défilement. Uniquement en CSS : le <main>
   servi ne change pas, donc la référence des CGV non plus. En dessous de
   1 024 px, rien ne change (sommaire en tête du texte). */
@media (min-width: 1024px) {
    .texte-legal:has(> .sommaire) {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, var(--largeur-texte)) minmax(14rem, 20rem);
        justify-content: space-between;
        column-gap: var(--esp-7);
        row-gap: 0;
        align-items: start;
    }
    .texte-legal:has(> .sommaire) > * {
        grid-column: 1;
        min-width: 0;
    }
    /* Le sommaire couvre toutes les rangées de la colonne de droite. */
    .texte-legal:has(> .sommaire) > .sommaire {
        grid-column: 2;
        grid-row: 1 / span 999;
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
    }
    .texte-legal:has(> .sommaire) .sommaire__liste { columns: 1; }
    /* En grille, les marges verticales ne fusionnent plus : on retire au titre
       la marge basse du paragraphe qui le précède, pour garder l'espacement
       d'une colonne simple. */
    .texte-legal:has(> .sommaire) > h2:not(:first-child) {
        margin-top: calc(var(--esp-7) - var(--esp-4));
    }
}


/* Bandeau de l'aperçu d'un brouillon (administration) : jamais servi au
   public. Blanc sur --bleu-dark. */
.apercu-bandeau {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: var(--esp-3) var(--esp-4);
    background: var(--bleu-dark);
    color: var(--blanc);
    font-size: var(--fs-small);
    text-align: center;
}
.apercu-bandeau a { color: var(--blanc); text-decoration: underline; }