/* ============================================================
   REFONTE — octobre 2026
   Les choix arrêtés avec Noam le 5 octobre, à partir de
   docs/maquette-site-vitrine.html. Chargée EN DERNIER sur les trois
   pages : elle corrige les feuilles existantes sans les réécrire.
   ============================================================ */

/* La police est servie par le site, plus par Google : aucune adresse IP de
   visiteur ne part chez un tiers avant qu'il ait consenti à quoi que ce soit. */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ---------- Mouvement : ce qui bougeait sans rien dire ---------- */
/* Plus d'apparition en fondu au défilement, plus de dégradé qui se déplace,
   plus de point qui pulse, plus de tache floue. Il reste le retour au survol. */
.fade-in { opacity: 1; transform: none; transition: none; }
.hero { animation: none; }
.hero::after { display: none; }
.hero-eyebrow::before { content: none; }
.hero h1 span { animation: none; background-size: 100% 0.38em; }

/* ---------- Accueil : l'en-tête sans carré de chiffres ---------- */
.hero-inner { grid-template-columns: 1fr; }
.hero-inner > div { max-width: 680px; }
/* Large écran seulement : plus large, le titre passerait sur le grand « S » (901 à 1024 px). */
@media (min-width: 1200px) { .hero-inner > div { max-width: 820px; } }
.hero-lead { margin-bottom: 0; }

/* ---------- Accueil : les deux expertises en panneaux photo ---------- */
.expertise-card.pan {
    min-height: 440px; padding: 36px; border: 0; color: var(--white);
    display: flex; flex-direction: column; justify-content: flex-end;
    background-size: cover; background-position: center;
}
/* Le voile marine qui rend le texte lisible. Il reprend le pseudo-élément
   qui portait la barre citron au survol des anciennes cartes. */
.expertise-card.pan::before {
    inset: 0; height: auto; transform: none; transition: none;
    background: linear-gradient(180deg, rgba(12, 20, 63, 0.25), rgba(12, 20, 63, 0.9) 62%);
}
.expertise-card.pan > * { position: relative; }
.expertise-card.pan:hover { transform: none; box-shadow: none; }
.expertise-card.pan h3 { color: var(--white); }
.expertise-card.pan p { color: rgba(255, 255, 255, 0.88); }
.expertise-card.pan .expertise-features li { color: var(--white); }
.pan-numerique { background-image: url('../img/eolienne.webp'); }
.pan-finance { background-image: url('../img/verre-nuages.webp'); }

/* ---------- Accueil : la méthode, étapes à gauche et photo à droite ---------- */
.method .section-header { text-align: left; margin-left: 0; max-width: 820px; }
.method-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.method-grid { grid-template-columns: 1fr; gap: 28px; }
.method-grid::before {
    display: block; top: 30px; bottom: 30px; left: 29px; right: auto;
    width: 0; height: auto; background: none; border-left: 2px dashed var(--sky);
}
.method-step { display: grid; grid-template-columns: 60px 1fr; gap: 4px 20px; text-align: left; padding: 0; }
.method-header { grid-row: 1 / 3; margin: 0; justify-content: flex-start; }
.method-icon { box-shadow: none; }
.method-step h3 { margin: 6px 0 4px; }
.method-photo {
    min-height: 440px; border-radius: var(--radius-lg);
    background: url('../img/atelier.webp') center / cover;
}
@media (max-width: 900px) {
    .method-deux { grid-template-columns: 1fr; gap: 32px; }
    .method-photo { min-height: 240px; order: -1; }
}

/* ---------- Accueil : le bandeau des logos clients ---------- */
/* Une seule teinte, le bleu de la charte : les fichiers de img/clients/ sont
   déjà teintés. Le défilement s'arrête au survol, et ne démarre pas du tout
   pour qui a demandé moins de mouvement à son système. */
.clients { text-align: center; }
.clients-defile {
    overflow: hidden; margin-top: 32px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients-piste {
    display: flex; align-items: center; gap: 64px; width: max-content;
    list-style: none; margin: 0; padding: 0;
    animation: clientsDefile 36s linear infinite;
}
.clients-defile:hover .clients-piste { animation-play-state: paused; }
.clients-piste img { display: block; height: 46px; width: auto; }
.clients-piste img.logo-haut { height: 62px; }
@keyframes clientsDefile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .clients-defile { -webkit-mask-image: none; mask-image: none; }
    .clients-piste { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
    .clients-piste [aria-hidden="true"] { display: none; }
}

/* ---------- Formation : la photo des plans, un bandeau de verre au pied ---------- */
/* Même matière que la page de connexion du portail CRA. */
.page-hero.tete-plans {
    background: url('../img/plans.webp') center / cover;
    padding: 0; min-height: 600px; display: flex; align-items: flex-end;
}
.page-hero.tete-plans::before {
    display: block; inset: 0; width: auto; aspect-ratio: auto;
    background: rgba(12, 20, 63, 0.14); opacity: 1; filter: none;
}
.tete-plans .page-hero-inner { max-width: var(--container); width: 100%; padding-top: 140px; padding-bottom: 32px; }
.bandeau-verre {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center;
    padding: 28px 36px; border-radius: var(--radius-lg); color: var(--primary);
    background: rgba(238, 244, 249, 0.82); border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
            backdrop-filter: blur(18px) saturate(1.3);
}
.tete-plans .hero-eyebrow,
.tete-claire .hero-eyebrow {
    padding: 0; margin: 0; background: none; border: 0; border-radius: 0;
    color: var(--secondary-fonce); font-size: 12px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.tete-plans h1 { color: var(--primary); margin: 10px 0 0; font-size: clamp(1.8rem, 3.1vw, 2.5rem); }
.tete-plans h1 span,
.tete-claire h1 span { color: var(--secondary-fonce); }
.tete-plans .page-hero-lead { color: var(--primary); font-size: 1rem; margin-bottom: 18px; }
.tete-plans .cta-note { color: var(--muted); }
@media (max-width: 820px) {
    .page-hero.tete-plans { min-height: 520px; }
    .bandeau-verre { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
}

/* ---------- Formation : le programme, un tronc et trois branches ---------- */
.tronc { margin-top: 48px; position: relative; padding-left: 68px; }
.tronc-temps { position: relative; padding-bottom: 52px; }
.tronc-temps:last-child { padding-bottom: 8px; }
/* Le trait part 6 px sous la pastille et s'arrête 6 px avant la suivante. */
.tronc-temps:not(:last-child)::before {
    content: ''; position: absolute; left: -49px; top: 46px; bottom: 6px;
    border-left: 3px solid var(--sky);
}
.tronc-num {
    position: absolute; z-index: 2; left: -68px; top: 0; width: 40px; height: 40px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--primary); color: var(--white); font-size: 16px; font-weight: 800;
}
.tronc-temps h3 { font-size: 1.375rem; line-height: 40px; margin: 0; }
.tronc-fil {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px;
    margin: 28px 0 0; padding: 0; list-style: none; position: relative;
}
.tronc-fil::before {
    content: ''; position: absolute; left: -30px; top: 25px;
    right: calc((100% - 88px) / 3 - 26px); border-top: 3px solid var(--sky);
}
.tronc-fil::after {
    content: ''; position: absolute; left: -49px; top: -22px; width: 21px; height: 50px;
    border-left: 3px solid var(--sky); border-bottom: 3px solid var(--sky);
    border-bottom-left-radius: var(--radius-md);
}
.tronc-picto {
    position: relative; z-index: 1; width: 52px; height: 52px; margin-bottom: 18px;
    display: grid; place-items: center; border-radius: 50%;
    background: #e6eff7; box-shadow: 0 0 0 6px var(--white); color: var(--primary);
}
.tronc-picto svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.tronc-fil strong { display: block; font-size: 1.09rem; font-weight: 800; }
.tronc-fil p { font-size: 14.5px; color: var(--muted); margin: 5px 0 0; max-width: 300px; }
@media (max-width: 820px) {
    .tronc-fil { grid-template-columns: 1fr; gap: 24px; }
    .tronc-fil::before { display: none; }
}

/* ---------- Carrières : en-tête clair, photo encadrée ---------- */
.page-hero.tete-claire { background: linear-gradient(180deg, #f7f6ec, var(--cream)); color: var(--primary); }
.page-hero.tete-claire::before { display: none; }
.tete-claire .page-hero-inner {
    max-width: var(--container); display: grid; grid-template-columns: 1fr 0.85fr;
    gap: 48px; align-items: center;
}
.tete-claire h1 { color: var(--primary); }
.tete-claire .page-hero-lead { color: var(--muted); }
.tete-claire .btn-secondary { color: var(--primary); background: transparent; border-color: rgba(19, 31, 86, 0.3); }
.tete-cadre {
    min-height: 360px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    background: url('../img/mains.webp') center / cover;
}
@media (max-width: 900px) {
    .tete-claire .page-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .tete-cadre { min-height: 220px; }
}

/* ---------- Pied de page : il débordait sur téléphone ---------- */
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Corrections après la première revue (5 octobre 2026)
   ============================================================ */

/* L'en-tête d'accueil était d'un bleu saturé : un voile marine plus sombre,
   posé sur la photo sans mélange de couleurs. Le texte s'aligne sur le
   bord gauche du conteneur, comme le reste de la page. */
.hero {
    background:
        linear-gradient(90deg, rgba(12, 20, 63, 0.94) 0%, rgba(12, 20, 63, 0.88) 42%, rgba(12, 20, 63, 0.6) 100%),
        url('../img/reunion.webp') center right / cover no-repeat;
    background-blend-mode: normal;
}
.hero-inner { display: block; width: 100%; }

/* Le menu : des liens marine sur une pastille presque opaque. Mesuré à 2,8
   de contraste avant, en gris sur une pastille translucide. */
.header-pill { background: rgba(255, 255, 255, 0.95); }
.header-pill .nav-desktop a { color: var(--primary); }

/* Le contour de navigation au clavier était citron : invisible sur blanc
   (1,38 de contraste). Un anneau marine doublé de blanc se voit sur les
   fonds clairs comme sur les fonds sombres. */
:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 3px solid var(--primary); outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--white);
}

/* Les panneaux d'expertise : le voile démarre plus sombre, pour que le titre
   reste lisible quand il tombe sur une partie claire de la photo. */
.expertise-card.pan::before {
    background: linear-gradient(180deg, rgba(12, 20, 63, 0.55) 0%, rgba(12, 20, 63, 0.86) 38%, rgba(12, 20, 63, 0.94) 100%);
}

/* Le bandeau de verre occupe toute la largeur de l'image, à 28 px des bords,
   comme dans la maquette retenue. */
.tete-plans .page-hero-inner { max-width: none; padding: 140px 28px 28px; }

/* Les deux grandes sections de la page formation : un marine uni à la place
   du dégradé bleu, qui dominait la page. */
.modalites,
.final-cta { background: var(--primary); }

/* Qui a demandé moins de mouvement n'a ni défilement lissé ni bandeau animé. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .header-pill, .btn { transition: none; }
}

/* ============================================================
   Corrections après la deuxième revue (5 octobre 2026)
   ============================================================ */

/* Bandeau de verre : le surtitre et la note étaient en bleu et en gris,
   mesurés entre 3,7 et 4,4 de contraste. En marine, ils passent le seuil
   de 4,5. Le bouton en attente garde toute son opacité : c'est la note
   dessous qui dit qu'il n'est pas encore actif. */
.tete-plans .hero-eyebrow,
.tete-plans .cta-note { color: var(--primary); }


/* L'en-tête de la section expertises n'a plus ni titre ni phrase : sa
   marge du bas laissait un vide de 80 px avant les panneaux. */
#expertises .section-header { margin-bottom: 24px; }

/* ============================================================
   Corrections après la troisième revue (6 octobre 2026)
   ============================================================ */

/* Carrières, « Pourquoi nous rejoindre » : les titres n'ont pas la même
   longueur, donc les textes ne démarraient pas au même endroit. Une largeur
   fixe pour le titre aligne les quatre lignes. */
.valeur-card h3 { flex: 0 0 210px; margin-bottom: 0; }
.valeur-card:hover { background: var(--cream); }
@media (max-width: 540px) { .valeur-card h3 { flex-basis: auto; } }

/* Carrières, dépôt du CV : le champ était retiré de la page, donc impossible
   à atteindre au clavier. Il reste présent mais invisible, et la zone de
   dépôt montre le contour quand il a le focus. */
.file-drop { position: relative; }
.file-drop input[type="file"] {
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.file-drop:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }

/* Formation, bouton final en attente : il était délavé à 50 % sur le marine. */


/* ============================================================
   Dernières corrections de la boucle de revue (6 octobre 2026)
   ============================================================ */

/* Les boutons en attente (« Rejoindre la liste d'attente », « Bientôt
   disponible ») : un gris plein et lisible, qui dit clairement « pas encore »
   au lieu d'un bouton citron délavé ou d'un bouton qui a l'air actif. */
.btn[disabled],
.tete-plans .btn[disabled],
.final-cta .btn[disabled],
.offre-cta-btn[disabled],
.offre-card.featured .offre-cta-btn[disabled] {
    opacity: 1; cursor: not-allowed; box-shadow: none; transform: none;
    background: #e9edf2; color: #45526a; border-color: #e9edf2;
}
.btn[disabled]:hover,
.offre-cta-btn[disabled]:hover { background: #e9edf2; transform: none; box-shadow: none; }


/* ============================================================
   Corrections après la quatrième revue (6 octobre 2026)
   ============================================================ */

/* L'emblème « S » reste sur tablette et téléphone : plus discret et calé en
   bas à droite, pour ne pas passer sous le titre. */
@media (max-width: 900px) {
    .hero::before {
        display: block; top: auto; bottom: -6%; right: -24%;
        width: min(78vw, 460px); transform: none; opacity: 0.16;
    }
}

/* Survols sans déplacement : la pastille du menu ne grossit plus, le texte
   des valeurs ne se décale plus. */
.header-pill.collapsed:hover { transform: none; }
.valeur-card:hover { padding-left: 12px; }
@media (max-width: 540px) {
    .valeur-card { align-items: flex-start; }
    .valeur-card:hover { padding-left: 8px; }
    .valeur-card h3 { text-align: left; }
}


/* Programme sur tablette et téléphone : le picto à gauche, le texte à droite
   sur toute la largeur, au lieu d'une colonne étroite. */
@media (max-width: 820px) {
    .tronc-fil li { display: grid; grid-template-columns: 52px 1fr; column-gap: 18px; align-items: start; }
    .tronc-picto { grid-row: span 2; margin-bottom: 0; }
    .tronc-fil strong { align-self: end; }
    .tronc-fil p { max-width: none; }
}

/* Très petits téléphones (320 px) : les colonnes peuvent rétrécir sous la
   largeur de leur plus long mot, la page ne défile plus de côté. */
.bandeau-verre > div, .candidature-info, .candidature-info ~ * { min-width: 0; }
@media (max-width: 360px) {
    .bandeau-verre h1, .candidature-info h2 { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
    .bandeau-verre .btn { white-space: normal; max-width: 100%; }
}

/* Carrières, les valeurs : la bande de survol a la même hauteur et les mêmes
   marges sur chaque ligne (la première et la dernière n'avaient pas de marge
   en haut ou en bas, leur bande était plus courte). Le carré du picto passe
   en blanc pour rester visible sur la bande crème. */
.valeur-card,
.valeur-card:first-child,
.valeur-card:last-child { padding: 28px 20px; transition: background 0.2s ease; }
.valeur-card:hover { padding-left: 20px; background: var(--cream); }
.valeur-icon { transition: background 0.2s ease; }
.valeur-card:hover .valeur-icon { background: var(--white); }
@media (max-width: 540px) {
    .valeur-card,
    .valeur-card:first-child,
    .valeur-card:last-child,
    .valeur-card:hover { padding: 24px 12px; }
}

/* Carrières, en-tête : de la profondeur sans effet voyant. Une lumière douce
   vient du haut à gauche, le beige se densifie en bas à droite, et la photo
   repose sur un second plan décalé, comme deux feuilles superposées. */
.page-hero.tete-claire {
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(255, 255, 255, 0.95), transparent 62%),
        radial-gradient(760px 520px at 96% 108%, rgba(203, 198, 160, 0.38), transparent 66%),
        linear-gradient(180deg, #f7f6ec, var(--cream));
    box-shadow: inset 0 -1px 0 rgba(19, 31, 86, 0.08);
}
.tete-cadre {
    position: relative;
    box-shadow: 0 2px 4px rgba(19, 31, 86, 0.06), 0 28px 56px -18px rgba(19, 31, 86, 0.34);
}
.tete-cadre::before {
    content: ''; position: absolute; z-index: -1; inset: 22px -22px -22px 22px;
    border-radius: var(--radius-lg); background: rgba(19, 31, 86, 0.07);
}
.tete-claire .page-hero-inner > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
    .tete-cadre::before { inset: 12px -10px -12px 12px; }
}

/* Le second plan passait par-dessus la photo (elle est le fond du cadre).
   Il devient une ombre pleine décalée : toujours derrière, jamais dessus. */
.tete-cadre::before { display: none; }
.tete-cadre {
    box-shadow: 22px 22px 0 0 rgba(19, 31, 86, 0.07),
                0 2px 4px rgba(19, 31, 86, 0.06), 0 28px 56px -18px rgba(19, 31, 86, 0.3);
}
@media (max-width: 900px) {
    .tete-cadre { box-shadow: 10px 12px 0 0 rgba(19, 31, 86, 0.07), 0 18px 36px -16px rgba(19, 31, 86, 0.3); }
}

/* ============================================================
   Accueil : les cartes d'expertise, version retenue le 6 octobre
   ============================================================ */

/* Carte blanche, photo en bandeau, un picto en pastille à cheval sur la
   photo. Au survol : la carte se soulève, le trait citron se dessine en
   haut, la photo avance doucement, la pastille et les points passent au
   citron. */
.expertise-card.carte { padding: 0; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.expertise-card.carte::before { z-index: 1; transition: transform 0.5s ease; }
.expertise-fenetre { height: 190px; overflow: hidden; }
.expertise-photo { height: 100%; background-size: cover; background-position: center; transition: transform 1.1s ease; }
.photo-serveurs { background-image: url('../img/baie-verte.webp'); }
.photo-tours { background-image: url('../img/tours-foret.webp'); }
.expertise-corps { position: relative; padding: 44px 36px 36px; }
.expertise-pastille {
    position: absolute; top: -26px; left: 36px; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; background: var(--white); color: var(--primary);
    box-shadow: 0 6px 16px -6px rgba(19, 31, 86, 0.35);
    transition: background 0.35s ease, transform 0.35s ease;
}
.expertise-pastille svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.expertise-card.carte .expertise-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.expertise-card.carte .expertise-features li { align-items: center; font-weight: 600; }
.expertise-card.carte .expertise-features li::before {
    flex: 0 0 8px; width: 8px; height: 8px; margin-top: 0; border-radius: 50%;
    background: rgba(19, 31, 86, 0.22); background-image: none;
    transition: background 0.3s ease, transform 0.3s ease;
}
.expertise-card.carte:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(19, 31, 86, 0.3); border-color: transparent; }
.expertise-card.carte:hover .expertise-photo { transform: scale(1.06); }
.expertise-card.carte:hover .expertise-pastille { background: var(--accent); transform: translateY(-3px); }
.expertise-card.carte:hover .expertise-features li::before { background: var(--accent); transform: scale(1.5); }
.expertise-card.carte:hover .expertise-features li:nth-child(2)::before { transition-delay: 0.08s; }
.expertise-card.carte:hover .expertise-features li:nth-child(3)::before { transition-delay: 0.16s; }
.expertise-card.carte:hover .expertise-features li:nth-child(4)::before { transition-delay: 0.24s; }
@media (max-width: 480px) {
    .expertise-card.carte .expertise-features { grid-template-columns: 1fr; }
    .expertise-corps { padding: 44px 24px 28px; }
    .expertise-pastille { left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .expertise-card.carte, .expertise-card.carte::before, .expertise-photo, .expertise-pastille,
    .expertise-card.carte .expertise-features li::before { transition: none; }
    .expertise-card.carte:hover, .expertise-card.carte:hover .expertise-photo,
    .expertise-card.carte:hover .expertise-pastille { transform: none; }
}

/* ============================================================
   Accueil : le passage de l'en-tête aux expertises (6 octobre)
   ============================================================ */

/* L'en-tête se termine par deux coins arrondis soulignés d'un liseré
   citron, posés sur un fond crème à trame de points. Seule exception aux
   rayons de la charte (8 / 16 px) : c'est un bord de section, pas une carte. */
.hero { position: relative; z-index: 1; border-radius: 0 0 44px 44px; border-bottom: 5px solid var(--accent); }
#expertises {
    position: relative; margin-top: -49px; padding-top: calc(var(--section-py) + 49px);
    background: radial-gradient(rgba(19, 31, 86, 0.11) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--cream);
}
#expertises .section-eyebrow { background: var(--white); }
@media (max-width: 700px) {
    .hero { border-radius: 0 0 28px 28px; }
    #expertises { margin-top: -33px; padding-top: calc(var(--section-py) + 33px); }
}
/* La montée des cartes suit le défilement (script en bas de page). Elle passe
   par « translate », séparé du « transform » du survol. */
#expertises .expertise-card.carte { translate: 0 var(--montee, 0px); will-change: translate; }

/* Programme : la jonction entre le coude et le trait horizontal se voyait
   encore à certains niveaux de zoom, où les deux morceaux s'arrondissent
   différemment. Le coude va maintenant jusqu'au centre du premier picto et le
   trait horizontal en repart : le raccord est caché sous le picto. */
.tronc-fil::after { width: 75px; }
.tronc-fil::before { left: 26px; }

/* ============================================================
   Réponses de Marième du 6 octobre
   ============================================================ */

/* Le grand « S » de l'accueil : on le voit maintenant en entier. Il débordait
   du cadre à droite ; il est ramené à l'intérieur, un peu plus petit, et
   reste à droite du titre sans passer dessous. */
.hero::before { top: 50%; right: 5%; width: min(32vw, 440px); }
@media (max-width: 900px) {
    .hero::before { top: auto; bottom: 5%; right: 5%; width: min(38vw, 210px); }
}

/* La page de mentions légales : un en-tête clair, puis une colonne de texte. */
.legale-tete { padding: 150px 0 56px; background: linear-gradient(180deg, #f7f6ec, var(--cream)); }
.legale-tete h1 { color: var(--primary); margin: 14px 0 12px; }
.legale-tete p { color: var(--muted); font-size: 1.0625rem; max-width: 620px; margin: 0; }
.legale { padding: 64px 0 96px; }
.legale-corps > * { max-width: 760px; }
.legale-corps h2 { font-size: 1.375rem; margin: 44px 0 12px; scroll-margin-top: 110px; }
.legale-corps h2:first-child { margin-top: 0; }
.legale-corps p { margin: 0 0 12px; }
.legale-corps ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.legale-corps li { margin-bottom: 6px; color: var(--muted); }
.legale-corps a { color: var(--secondary-fonce); text-decoration: underline; }
.legale-corps a:hover { color: var(--primary); }

.legale-date { margin-top: 40px; font-size: 14px; color: var(--muted); }

/* ============================================================
   Les logos clients : couleurs d'origine, une ligne fixe (7 octobre)
   ============================================================ */
/* Le bandeau ne défile plus : sept logos tiennent sur une ligne, juste après
   les expertises. Sous 1100 px, ils passent sur deux ou trois rangées. */
.clients { background: var(--white); }
.clients-defile { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.clients-piste {
    animation: none; width: auto; display: flex; flex-wrap: nowrap;
    justify-content: space-between; align-items: center; gap: 24px;
}
.clients-piste img { height: 38px; width: auto; }
.clients-piste img.logo-haut { height: 52px; }
@media (max-width: 1100px) {
    .clients-piste { flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
}

/* ============================================================
   Formation : la page en cinq blocs (7 octobre)
   ============================================================ */
/* En-tête : la date en pastille, le prix d'appel sous le bouton. */
.tete-plans .hero-eyebrow { background: var(--accent); color: var(--primary); padding: 6px 14px; border-radius: 999px; display: inline-block; }
.tete-prix { display: block; margin-top: 14px; font-weight: 700; color: var(--primary); font-size: 1.0625rem; }
.tete-prix small { font-weight: 500; color: var(--muted); }
/* « Pour qui » sous les chiffres clés, dans le même bloc. */
.format-sous-titre { margin: 56px 0 24px; text-align: center; font-size: 1.375rem; }
/* Les modalités, ramenées à une ligne sous les formules. */
.offres-modalites { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 36px auto 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; color: var(--primary); }
.offres-modalites li { display: flex; align-items: center; gap: 10px; }
.offres-modalites li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(19, 31, 86, 0.2); }
a.offre-cta-btn { display: block; text-align: center; text-decoration: none; }
/* La préinscription : fond clair, le formulaire dans une carte. */
.preinscription { background: radial-gradient(rgba(19, 31, 86, 0.11) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--cream); border-top: 5px solid var(--accent); scroll-margin-top: 80px; }
.preinscription .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.preinscription h2 { margin: 14px 0; }
.preinscription .date { display: inline-block; background: var(--primary); color: var(--white); font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: 14px; }
.preinscription .raisons { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.preinscription .raisons li { padding-left: 26px; position: relative; font-weight: 600; color: var(--primary); }
.preinscription .raisons li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(19, 31, 86, 0.2); }
.preinscription-form { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 24px 48px -24px rgba(19, 31, 86, 0.3); display: grid; gap: 16px; }
.preinscription-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); }
.preinscription-form input, .preinscription-form select { font: inherit; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid rgba(19, 31, 86, 0.2); background: var(--white); color: var(--primary); }
.preinscription-form .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preinscription-form .petit { font-size: 13px; color: var(--muted); margin: 0; }
.preinscription-form .petit a { color: var(--secondary-fonce); text-decoration: underline; }
@media (max-width: 860px) {
    .preinscription .grille { grid-template-columns: 1fr; gap: 32px; }
    .preinscription-form .deux { grid-template-columns: 1fr; }
    .preinscription-form { padding: 24px; }
}
/* Les colonnes de la préinscription peuvent rétrécir sous leur contenu
   (très petits téléphones) : sans ça, le menu déroulant élargissait la page. */
.preinscription .grille > * { min-width: 0; }
.preinscription-form label { min-width: 0; }
.preinscription-form input, .preinscription-form select { width: 100%; min-width: 0; }
.preinscription-form, .preinscription-form label { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .preinscription-form .deux { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Carrières : le haut de page en deux moitiés (7 octobre)
   ============================================================ */
/* Le texte sur marine à gauche, la photo bord à bord à droite, l'emblème en
   filigrane, et une carte qui mène au poste ouvert. Remplace l'en-tête clair. */
.page-hero.tete-claire { position: relative; overflow: hidden; background: var(--primary); box-shadow: none; padding: 0; border-bottom: 5px solid var(--accent); }
.page-hero.tete-claire::after {
    content: ''; position: absolute; left: -110px; bottom: -150px; width: 480px; aspect-ratio: 1;
    background: url('../img/embleme-s.svg') no-repeat center / contain; opacity: 0.1; pointer-events: none;
}
.tete-claire .page-hero-inner { max-width: none; padding: 0; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.tete-claire .page-hero-inner > div:first-child { position: relative; z-index: 1; padding: 150px 56px 80px max(24px, calc((100vw - var(--container)) / 2 + 24px)); }
.tete-cadre { position: relative; min-height: 600px; border-radius: 0 0 0 44px; box-shadow: none; background: url('../img/carrieres-discussion.webp') center / cover; }
.tete-claire h1 { color: var(--white); font-size: clamp(2rem, 3.3vw, 2.9rem); }
.tete-claire h1 span { color: var(--accent); }
.tete-claire .hero-eyebrow { color: var(--accent); }
.tete-claire .page-hero-lead { color: rgba(255, 255, 255, 0.88); }
.tete-claire .btn-secondary { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.tete-claire .hero-ctas { flex-wrap: wrap; }
.tete-poste {
    display: block; position: absolute; left: -40px; bottom: 44px; z-index: 2; width: 340px; padding: 20px 22px;
    background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 24px 48px -18px rgba(12, 20, 63, 0.55);
    text-decoration: none; color: var(--primary); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tete-poste:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -18px rgba(12, 20, 63, 0.6); }
.tete-poste small { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-fonce); }
.tete-poste small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(206, 231, 86, 0.35); }
.tete-poste strong { display: block; margin: 8px 0 6px; font-size: 1.0625rem; line-height: 1.3; }
.tete-poste span { display: block; font-size: 14px; color: var(--muted); }
.tete-poste em { display: inline-block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 14px; border-bottom: 2px solid var(--accent); }
@media (max-width: 900px) {
    .tete-claire .page-hero-inner { grid-template-columns: 1fr; }
    .tete-claire .page-hero-inner > div:first-child { padding: 130px 24px 40px; }
    .tete-cadre { min-height: 320px; border-radius: 0; }
    .tete-poste { left: 16px; right: 16px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .tete-poste { transition: none; } .tete-poste:hover { transform: none; } }

/* ============================================================
   Corrections de la nuit du 7 octobre : formulaires, boutons, mobile
   ============================================================ */

/* Formulaires : un seul dessin pour les trois, des bordures qui se voient
   (3,7:1 sur blanc, contre 1,3:1 avant), un texte de 16 px qui ne déclenche
   pas le zoom automatique des iPhone. */
.form-group input, .form-group select, .form-group textarea,
.preinscription-form input, .preinscription-form select {
    border: 1px solid #7a849c; border-radius: 8px;
    font-size: 16px; font-weight: 500; line-height: 1.4;
}
.champ-erreur { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #a32a1c; }
[aria-invalid="true"] { border-color: #a32a1c !important; box-shadow: 0 0 0 1px #a32a1c; }
.form-statut {
    display: none; margin: 0 0 16px; padding: 14px 16px; border-radius: 8px;
    background: #fdf3d6; border: 1px solid #d9b34a; color: #5b4300; font-size: 14.5px; line-height: 1.5;
}
.form-statut.show { display: block; }
.form-statut a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Les boutons de formule de la page Formation sont de vrais liens : ils
   n'ont plus l'apparence « éteinte » (opacité réduite, curseur interdit) des
   anciens boutons désactivés. */
a.offre-cta-btn { opacity: 1; cursor: pointer; }
a.offre-cta-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.offre-card.featured a.offre-cta-btn:hover { background: var(--accent-dark); color: var(--primary); border-color: var(--accent-dark); }
.tete-prix small { color: #4d5a70; }

/* Titres : jamais un mot seul sur la dernière ligne. */
h1, h2, h3 { text-wrap: balance; }

/* Mobile : le menu replié n'affiche plus deux icônes. Seule celle de la
   pastille reste : un toucher déplie la pastille, comme sur ordinateur. */
.header-pill.collapsed .nav-toggle { opacity: 0; pointer-events: none; }
/* Au clavier, le bouton caché reparaît quand il reçoit le focus : on voit où l'on est. */
.header-pill.collapsed .nav-toggle:focus-visible { opacity: 1; }
@media (max-width: 800px) {
    /* Le portrait réserve sa place avant son chargement : sans largeur, le
       cadre mesurait 0 px et la page « sautait » vers le formulaire de contact. */
    .associate-photo-wrap { width: 100%; }
}

/* Envoi réussi : le même encadré, en vert. */
.form-statut.ok { background: #e9f4ec; border-color: #2f7a4f; color: #1d5234; }
.form-statut.ok a { color: inherit; }

/* ===== Page Carrières : en-tête, « Pourquoi nous rejoindre » et processus (10 octobre 2026) ===== */
/* Formes décalées derrière les deux photos, pour la profondeur. Plus de carte « Poste ouvert »
   sur la photo : elle cachait un visage sur téléphone. Le processus garde son schéma en
   quatre colonnes, les boules numérotées sont remplacées par une icône et une flèche. */
.vd-tete { background: var(--cream); padding: clamp(120px, 13vw, 150px) 0 clamp(56px, 7vw, 96px); }
.vd-tete .section-eyebrow { background: #fdfdfb; }
.vd-tete { position: relative; z-index: 2; background: linear-gradient(180deg, #f6f5ea 0%, var(--cream) 100%); padding-bottom: 0; }
.vd-grille { align-items: start; }
.vd-grille > div:first-child { padding-bottom: clamp(56px, 7vw, 96px); }
.vd-tete .vd-img { position: relative; overflow: visible; margin-bottom: -84px; }
.vd-tete .vd-img::before { content: ""; position: absolute; inset: -26px -24px 26px 26px; border-radius: 28px 28px 28px 120px; background: var(--sky); }
.vd-tete .vd-img img { position: relative; border-radius: 28px 28px 28px 120px; box-shadow: 0 2px 4px rgba(19, 31, 86, 0.08), 0 34px 60px -24px rgba(19, 31, 86, 0.42); }
section.vd-pourquoi { padding-top: calc(clamp(72px, 9vw, 128px) + 60px) !important; background: linear-gradient(180deg, #eef4f9 0%, #e6eef6 100%); }
.vd-pourquoi .section-eyebrow { background: #fdfdfb; }
/* Le processus : le schéma d origine (quatre étapes centrées), une petite icône par étape et une flèche entre deux. */
.process-grid::before { display: none; }
.process-num { display: block; width: 30px; height: 30px; margin: 0 auto 20px; border-radius: 0; font-size: 0; color: transparent; background: none center / contain no-repeat; box-shadow: none; }
.process-step:nth-child(1) .process-num { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23131f56%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M10%209H8%22%2F%3E%3Cpath%20d%3D%22M16%2013H8%22%2F%3E%3Cpath%20d%3D%22M16%2017H8%22%2F%3E%3C%2Fsvg%3E"); }
.process-step:nth-child(2) .process-num { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23131f56%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.127.96.361%201.903.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.907.339%201.85.573%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E"); }
.process-step:nth-child(3) .process-num { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23131f56%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E"); }
.process-step:nth-child(4) .process-num { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23131f56%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.process-step + .process-step::before { content: ""; position: absolute; left: -24px; top: 4px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b9d13f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3Cpath%20d%3D%22m13%206%206%206-6%206%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.process-step h3 { font-size: 1.125rem; }
.process-step p { font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .process-step + .process-step::before { display: none; } .process-num { margin-bottom: 14px; } }
.vd-promesses > div { border-top-color: rgba(19, 31, 86, 0.16); }
.vd-pourquoi .vd-pphoto { overflow: visible; margin-left: 26px; border-radius: 0; }
.vd-pourquoi .vd-pphoto::before { content: ""; position: absolute; inset: 26px 26px -26px -26px; border-radius: 120px 28px 28px 28px; background: var(--sky); }
.vd-pourquoi .vd-pphoto img { position: relative; border-radius: 120px 28px 28px 28px; box-shadow: 0 2px 4px rgba(19, 31, 86, 0.08), 0 34px 60px -24px rgba(19, 31, 86, 0.38); }
.vd-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vd-tete h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--primary); margin: 16px 0 0; }
.vd-tete h1 span { color: var(--primary); padding-bottom: 12px; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 12%27%3E%3Cpath d=%27M0 6c5-6 15-6 20 0s15 6 20 0%27 fill=%27none%27 stroke=%27%23cee756%27 stroke-width=%274%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") repeat-x 0 100% / 40px 12px; }
.vd-lead { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); max-width: 48ch; margin: 30px 0 28px; }
.vd-tete .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.vd-tete .btn-secondary { color: var(--primary); background: transparent; border-color: rgba(19, 31, 86, 0.3); }
.vd-img { margin: 0; height: clamp(360px, 38vw, 500px); border-radius: 28px 28px 28px 140px; overflow: hidden; }
.vd-img img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%; display: block; }
.vd-poste { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: clamp(40px, 5vw, 64px); padding: 24px 0 28px; border-top: 1px solid rgba(19, 31, 86, 0.16); color: var(--primary); text-decoration: none; }
.vd-poste small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary-fonce); }
.vd-poste strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; }
.vd-poste span { color: var(--muted); font-size: 15px; }
.vd-poste em { margin-left: auto; font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.vd-poste:hover em { text-decoration-color: var(--primary); }
.vd-pourquoi { background: #fdfdfb; padding: clamp(72px, 9vw, 128px) 0; }
.vd-pgrille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.vd-pphoto { margin: 0; position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: 140px 28px 28px 28px; overflow: hidden; }
.vd-pphoto img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 30%; display: block; }
.vd-pourquoi h2 { margin: 16px 0 16px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; text-align: left; }
.vd-intro { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; max-width: 48ch; margin: 0 0 40px; }
.vd-promesses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.vd-promesses > div { padding: 22px 0 26px; border-top: 1px solid rgba(19, 31, 86, 0.14); }
.vd-promesses h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--primary); }
.vd-promesses p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); }
.vd-poste strong { font-size: 1.125rem; }
.vd-img { border-radius: 28px 28px 28px 120px; }
.vd-pphoto { border-radius: 120px 28px 28px 28px; aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
  .vd-grille { grid-template-columns: 1fr; }
  .vd-img { height: 280px; }
  .vd-tete { padding-bottom: 48px; }
  .vd-grille > div:first-child { padding-bottom: 0; }
  .vd-tete .vd-img { margin-bottom: 0; margin-right: 14px; }
  .vd-tete .vd-img::before { inset: -14px -14px 14px 14px; border-radius: 20px 20px 20px 80px; }
  .vd-tete .vd-img img { border-radius: 20px 20px 20px 80px; }
  .vd-pourquoi { padding-top: clamp(72px, 9vw, 128px) !important; }
  .vd-poste em { margin-left: 0; width: 100%; }
  .vd-pgrille { grid-template-columns: 1fr; gap: 36px; }
  .vd-pourquoi .vd-pphoto { position: relative; top: auto; aspect-ratio: 4 / 3; margin-left: 14px; margin-bottom: 14px; }
  .vd-pourquoi .vd-pphoto::before { inset: 14px 14px -14px -14px; border-radius: 80px 20px 20px 20px; }
  .vd-pourquoi .vd-pphoto img { border-radius: 80px 20px 20px 20px; }
  .vd-promesses { grid-template-columns: 1fr; }
}

/* ===== Cartes d'expertise : alignement quand les deux textes n'ont pas la même longueur (11 octobre 2026) ===== */
/* Les deux listes se posent en bas de leur carte, sur la même ligne, sous un filet commun.
   Une ligne de liste sur deux lignes garde sa puce en face de la première. */
.expertise-card.carte { display: flex; flex-direction: column; }
.expertise-card.carte .expertise-corps { flex: 1; display: flex; flex-direction: column; }
.expertise-card.carte .expertise-corps > p { margin-bottom: 28px; }
.expertise-card.carte .expertise-features { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(19, 31, 86, 0.1); align-items: start; gap: 14px 24px; }
.expertise-card.carte .expertise-features li { align-items: flex-start; line-height: 1.4; }
.expertise-card.carte .expertise-features li::before { margin-top: 0.5em; flex-shrink: 0; }
/* Les deux listes ont la même hauteur (deux rangées de deux lignes), pour que leur filet
   soit à la même hauteur dans les deux cartes. Inutile quand les cartes s'empilent. */
@media (min-width: 701px) {
    .expertise-card.carte .expertise-features { min-height: calc(24px + 14px + 5.6em); align-content: start; }
}


/* « Espace consultants » dans le menu : bleu SMART et une petite flèche, pour dire qu'on
   quitte le site vers le portail (choix A de Noam, 22 octobre). Deux classes pour passer
   devant `.header-pill .nav-desktop a` et les `.nav-mobile a` des feuilles de page. */
.nav-desktop a.lien-portail,
.nav-mobile a.lien-portail { color: var(--secondary-fonce); font-weight: 600; }
.nav-desktop a.lien-portail:hover,
.nav-mobile a.lien-portail:hover { color: var(--primary); }
.lien-portail::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.3em;
    vertical-align: -0.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Les boutons ne se soulèvent plus (point 4 de la maquette d'audit, choix de Noam du 22
   octobre). Le principal s'assombrit seulement ; les secondaires (« Candidature
   spontanée », « Postuler ») passent d'un contour transparent à un aplat discret, visible
   au repos. Placé en fin de feuille pour l'emporter sur components.css et les feuilles
   de page. */
@media (prefers-reduced-motion: no-preference) {
    .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
}
.btn-primary:hover { background: var(--accent-dark); transform: none; box-shadow: none; }
.btn-outline,
.vd-tete .btn-secondary {
    background: rgba(19, 31, 86, 0.07);
    color: var(--primary);
    border: 0;
}
.btn-outline:hover,
.vd-tete .btn-secondary:hover {
    background: rgba(19, 31, 86, 0.13);
    color: var(--primary);
}

/* Page 404 (404.html) : l'en-tête des pages légales, assez haut pour que le pied de page
   ne remonte pas juste sous le texte. */
.erreur-404 { min-height: 62vh; }
.legale-tete .erreur-actions { margin-top: 28px; }