/* RECRUTABLE — Accueil, version 2 (proposition du 11 novembre 2026).
   Se charge APRÈS mosaique.css. Le haut reste sombre ; tout ce qui suit
   les deux portes est posé dans des encadrés BLANCS à en-tête vert, sur le
   fond sombre, comme le formulaire de « Déposer une annonce » (vert
   #0F7A50, filet #B9C6BC, angles droits). Carlito, corps justifié, puces à
   gauche, boutons centrés et phrase dessous centrée, photos en 3:2,
   aucun JavaScript. */

:root {
  --v2-vert: #0F7A50; --v2-vert-fonce: #0B5E3D; --v2-blanc: #FFFFFF; --v2-papier: #F6F8F6;
  --v2-encre: #101C17; --v2-gris: #55665D; --v2-filet: #B9C6BC; --v2-filet-doux: #DCE4DE;
}

/* ---------- Les deux portes : plus petites, isolées, un symbole chacune ---------- */
.v2-portes { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 52rem; margin: 0 auto; padding: 2.75rem 16px 3rem; }
@media (min-width: 40rem) { .v2-portes { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.v2-porte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--filet); background: linear-gradient(180deg, rgba(200, 214, 247, .05), transparent 60%);
  transition: border-color .25s, background-color .25s; }
.v2-porte:hover { border-color: rgba(200, 214, 247, .55); background-color: rgba(200, 214, 247, .04); }
.v2-picto { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid rgba(200, 214, 247, .45);
  color: var(--accent); margin-bottom: 1rem; }
.v2-picto svg { width: 1.9rem; height: 1.9rem; }
.v2-porte h2 { font-size: 1.55rem; letter-spacing: -.01em; }
.v2-porte .qui { text-align: center; hyphens: manual; color: var(--gris); margin: .5rem 0 0; font-size: 1rem; max-width: 26ch; }
.v2-porte .action { margin: 1.25rem 0 0; }
.v2-porte .action p { font-size: .85rem; max-width: 32ch; }

/* ---------- Le bandeau des métiers, celui de « Déposer une annonce » ---------- */
.bandeau-metiers { width: 100%; height: 132px; background: #0B1410 url("images/bandeau-metiers.jpg") center 38% / cover no-repeat;
  border-block: 1px solid var(--filet); }
@media (min-width: 64rem) { .bandeau-metiers { height: 160px; } }
@media (max-width: 30rem) { .bandeau-metiers { height: 92px; } }

/* ---------- La zone des encadrés blancs ---------- */
.v2-zone { max-width: calc(64rem + 32px); margin: 0 auto; padding: 3rem 16px 0; display: grid; gap: 2.5rem; }
.v2-encadre { background: var(--v2-blanc); color: var(--v2-encre); border: 1px solid var(--v2-filet); min-width: 0; }
.v2-tete { background: var(--v2-vert); color: #fff; padding: 1.35rem 1.5rem 1.2rem; }
.v2-tete h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.15; }
.v2-sur { margin: 0 0 .35rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-align: left; }
.v2-corps { padding: 1.5rem; }
@media (min-width: 48rem) { .v2-corps { padding: 1.75rem 2rem 2rem; } }
.v2-corps p { color: var(--v2-encre); }
.v2-encadre a:not(.btn) { color: var(--v2-vert-fonce); text-decoration-color: rgba(15, 122, 80, .45); }
.v2-encadre a:not(.btn):hover { color: var(--v2-vert); }
.v2-btn { background: var(--v2-vert); color: #fff; }
.v2-btn:hover { background: var(--v2-vert-fonce); color: #fff; box-shadow: 0 0 0 4px rgba(15, 122, 80, .18); }
.v2-encadre .action p { color: var(--v2-gris); }
.v2-note { font-size: .88rem; color: var(--v2-gris) !important; margin: 1.25rem 0 0; }

/* L'en-tête des dossiers porte les chiffres */
.v2-tete-chiffres { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.v2-chiffres { display: flex; flex-wrap: wrap; gap: 0; margin: 0; }
.v2-chiffres div { padding: 0 1.1rem; border-left: 1px solid rgba(255, 255, 255, .28); }
.v2-chiffres div:first-child { border-left: 0; padding-left: 0; }
.v2-chiffres dt { font-size: .74rem; color: rgba(255, 255, 255, .78); order: 2; }
.v2-chiffres div { display: flex; flex-direction: column-reverse; }
.v2-chiffres dd { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1; color: #fff; }
.v2-chiffres dd.v2-petit { font-size: 1.05rem; padding-top: .7rem; }

/* La légende des familles, avec leurs symboles */
.v2-familles { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.v2-familles li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .45rem; border: 1px solid var(--v2-filet-doux);
  border-radius: 999px; font-size: .85rem; color: var(--v2-gris); background: var(--v2-papier); }
.v2-familles li .symbole { width: 1.05rem; height: 1.05rem; color: var(--famille-fonce, var(--v2-vert)); }
.v2-familles b { color: var(--v2-encre); }

/* Les fiches : un symbole de famille, le métier, des puces lisibles */
.v2-fiches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 44rem) { .v2-fiches { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .v2-fiches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-fiches li { min-width: 0; }
.v2-fiches a { display: flex; gap: .85rem; align-items: flex-start; height: 100%; padding: 1rem; text-decoration: none; color: var(--v2-encre);
  border: 1px solid var(--v2-filet-doux); border-top: 3px solid var(--famille-fonce, var(--v2-vert)); background: var(--v2-blanc);
  transition: box-shadow .2s, transform .2s; }
.v2-fiches a:hover { box-shadow: 0 8px 22px rgba(16, 28, 23, .12); transform: translateY(-2px); }
.v2-rond { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--famille-clair, #E7F2EC); color: var(--famille-fonce, var(--v2-vert)); }
.v2-rond .symbole { width: 1.4rem; height: 1.4rem; }
.v2-texte { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.v2-famille { font-size: .76rem; color: var(--v2-gris); }
.v2-texte b { font-size: 1.05rem; line-height: 1.25; color: var(--v2-encre); }
.v2-fiches a:hover b { text-decoration: underline; text-underline-offset: .2em; }
.v2-puces { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.v2-puces span { font-size: .76rem; padding: .1rem .5rem; border-radius: 999px; background: var(--v2-papier); border: 1px solid var(--v2-filet-doux); color: var(--v2-encre); }
.v2-ref { font-size: .72rem; color: var(--v2-gris); font-family: Consolas, "Liberation Mono", monospace; }

/* Les couleurs des familles, foncées pour le fond blanc */
.fam-sante { --famille-fonce: #3555B8; --famille-clair: #E6ECFA; } .fam-agriculture { --famille-fonce: #2E7D4F; --famille-clair: #E3F2E8; }
.fam-hotellerie { --famille-fonce: #B85A16; --famille-clair: #FBEBDD; } .fam-batiment { --famille-fonce: #6E4AA6; --famille-clair: #EFE8F8; }
.fam-industrie { --famille-fonce: #B2452F; --famille-clair: #F9E5E0; } .fam-transport { --famille-fonce: #157F88; --famille-clair: #DFF2F3; }
.fam-commerce { --famille-fonce: #A83A70; --famille-clair: #F8E4EE; } .fam-bureau { --famille-fonce: #5450A8; --famille-clair: #E9E8F8; }
.fam-autre { --famille-fonce: #55665D; --famille-clair: #ECEFED; }

/* ---------- Une bande de photos 3:2, pour séparer ---------- */
.bande-photos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.bande-photos li { aspect-ratio: 3 / 2; overflow: hidden; max-width: 100%; }
.bande-photos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
@media (max-width: 30rem) { .bande-photos { grid-template-columns: repeat(3, 1fr); gap: 1px; } }

/* ---------- La CVthèque : une photo, le texte, le bouton ---------- */
.v2-deux { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .v2-deux { grid-template-columns: 2fr 3fr; gap: 2rem; } }
.v2-photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; max-width: 100%; }
.v2-photo img { width: 100%; height: 100%; object-fit: cover; }
.v2-coches { list-style: none; padding: 0; margin: 0 0 .5rem; }
.v2-coches li { position: relative; padding: .35rem 0 .35rem 1.6rem; color: var(--v2-encre); border-top: 1px solid var(--v2-filet-doux); }
.v2-coches li::before { content: ""; position: absolute; left: .2rem; top: .8rem; width: .7rem; height: .4rem;
  border-left: 2px solid var(--v2-vert); border-bottom: 2px solid var(--v2-vert); transform: rotate(-45deg); }
.v2-cvtheque .action { margin: 1.25rem 0 0; }

/* ---------- Le vérificateur, en clair ---------- */
.v2-verifier { display: grid; grid-template-columns: 1fr; gap: 1rem 1.5rem; margin: 1.25rem 0 0; padding: 1.25rem; background: var(--v2-papier); border: 1px solid var(--v2-filet-doux); }
@media (min-width: 48rem) { .v2-verifier { grid-template-columns: 1.4fr 1.1fr auto; align-items: end; } }
.v2-verifier .action { margin: 0; }
.v2-champ label { display: block; font-weight: 700; font-size: .92rem; margin: 0 0 .35rem; color: var(--v2-encre); }
.v2-champ input, .v2-champ select { width: 100%; font: inherit; color: var(--v2-encre); background: var(--v2-blanc);
  border: 1px solid var(--v2-filet); border-radius: 0; padding: .6em .75em; }
.v2-champ input::placeholder { color: #7F8F87; }
.v2-champ input:focus, .v2-champ select:focus { outline: 2px solid var(--v2-vert); outline-offset: 1px; border-color: var(--v2-vert); }
.v2-champ select option { color: var(--v2-encre); background: var(--v2-blanc); }
.v2-resultat { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--v2-vert); background: var(--v2-papier); }
.v2-resultat h3 { color: var(--v2-encre); font-size: 1.1rem; margin-bottom: .4rem; }
.v2-resultat ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.v2-depliant { border-top: 1px solid var(--v2-filet-doux); margin-top: 1.25rem; padding-top: .9rem; }
.v2-depliant summary { cursor: pointer; font-weight: 700; color: var(--v2-encre); }
.v2-depliant summary:hover { color: var(--v2-vert); }
.v2-regions { list-style: none; padding: 0; margin: .75rem 0 0; columns: 1; }
@media (min-width: 40rem) { .v2-regions { columns: 2; } }
@media (min-width: 64rem) { .v2-regions { columns: 3; } }
.v2-regions a { display: inline-block; padding: .2rem 0; }

/* ---------- Les métiers recherchés : sur une bande verte, photos gardées ---------- */
.v2-metiers { background: var(--v2-vert-fonce); margin-top: 3.5rem; border-block: 1px solid rgba(255, 255, 255, .12); }
.v2-metiers-dedans { max-width: calc(76rem + 32px); margin: 0 auto; padding: 3rem 16px 3.25rem; }
.v2-metiers h2 { color: #fff; text-align: center; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 2rem; }
.v2-metiers figure.photo figcaption { color: rgba(255, 255, 255, .82); }
.v2-metiers figure.photo figcaption b { color: #fff; }
.v2-metiers .cadre-photo img { filter: none; }
.v2-metiers + .pied { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .v2-fiches a, .v2-porte { transition: none; } .v2-fiches a:hover { transform: none; } }