/* Mihane : signalétique de rue. Encre, papier, un seul vert pour l'action à faire. */
:root {
  --encre: #111111;
  --papier: #F5F3EE;
  --blanc: #FFFFFF;
  --vert: #12A867;
  --gris: #5C5A55;
  --gris-fonce: #3D3B37;
  --trait: #D9D5CB;
  --bord-champ: #8A8780;
  --fond-champ: #E9E6DE;
  --erreur: #B3261E;
  --titre-lat: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --titre-ar: 'Noto Kufi Arabic', 'Readex Pro', sans-serif;
  --texte: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); color: var(--encre); background: var(--papier); font-size: 16px; line-height: 1.45; }
body.pro { background: var(--blanc); }
a { color: var(--encre); text-underline-offset: 3px; }
button { font: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pro .page { border-inline: 1px solid var(--trait); background: var(--blanc); }
@media (max-width: 480px) { .pro .page { border-inline: none; } }

.titre { margin: 0; font-family: var(--titre-lat); font-weight: 700; line-height: .95; }
[dir="rtl"] .titre { font-family: var(--titre-ar); font-weight: 800; line-height: 1.3; }
.titre-xl { font-size: 52px; }
.titre-l { font-size: 44px; }
.titre-m { font-size: 38px; }
[dir="rtl"] .titre-xl, [dir="rtl"] .titre-l { font-size: 38px; }

/* Logo : plaque d'enseigne */
.plaque { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.plaque-ar { background: var(--encre); color: var(--vert); font-family: var(--titre-ar); font-weight: 800; font-size: 16px; line-height: 1; padding: 6px 8px 9px; }
.plaque-lat { font-family: var(--titre-lat); font-weight: 700; font-size: 22px; letter-spacing: 1.5px; }
.plaque.grand .plaque-ar { font-size: 30px; padding: 10px 12px 14px; }
.plaque.grand .plaque-lat { font-size: 34px; letter-spacing: 2px; }
.sur-noir .plaque-ar { background: var(--vert); color: var(--encre); }

/* Barres */
.barre { min-height: 60px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--encre); }
.barre.noire { background: var(--encre); color: var(--blanc); border-bottom: none; }
.icone-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: inherit; margin-inline-start: -8px; }
[dir="rtl"] .fleche { transform: scaleX(-1); }
.etape { font-family: var(--titre-lat); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; }
[dir="rtl"] .etape { font-family: var(--texte); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.progression { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.progression span { height: 6px; background: var(--trait); }
.progression .fait { background: var(--encre); }
.lien-discret { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; }
.bouton-texte { min-height: 44px; border: none; background: transparent; color: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 4px; }

/* Choix de la langue */
.langue-tete { padding: 40px 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.langue-consigne { display: flex; flex-direction: column; gap: 2px; }
.langue-consigne .ar { font-family: var(--titre-ar); font-weight: 600; font-size: 18px; text-align: right; }
.langue-consigne .fr { font-size: 16px; color: var(--gris); }
.langue-choix { flex: 1; min-height: 190px; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px; text-decoration: none; }
.langue-choix.ar { background: var(--encre); color: var(--blanc); }
.langue-choix.fr { color: var(--encre); border-top: 2px solid var(--encre); }
.langue-choix .mot-ar { font-family: var(--titre-ar); font-weight: 800; font-size: 64px; line-height: 1.1; }
.langue-choix .mot-fr { font-family: var(--titre-lat); font-weight: 700; font-size: 72px; line-height: .95; }
.langue-choix.ar svg { color: var(--vert); margin-bottom: 14px; }
.langue-choix.fr svg { margin-bottom: 8px; }
.pied { padding: 14px 24px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gris); border-top: 2px solid var(--encre); }

/* Accueil */
.choix { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; text-decoration: none; color: var(--encre); border-bottom: 2px solid var(--encre); }
.choix.principal { background: var(--vert); border-top: 2px solid var(--encre); }
.surtitre { font-family: var(--titre-lat); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; }
[dir="rtl"] .surtitre { font-family: var(--texte); font-weight: 600; letter-spacing: 0; }
.choix .gris { color: var(--gris); }
.choix-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choix-entete svg { flex-shrink: 0; }
.choix .gros { font-family: var(--titre-lat); font-weight: 700; font-size: 40px; line-height: 1; }
.choix .moyen { font-family: var(--titre-lat); font-weight: 700; font-size: 34px; line-height: 1; }
[dir="rtl"] .choix .gros, [dir="rtl"] .choix .moyen { font-family: var(--titre-ar); font-weight: 800; font-size: 28px; line-height: 1.35; }
.bas-de-page { margin-top: auto; padding: 20px 24px; font-size: 15px; color: var(--gris); }
.bas-de-page a { font-weight: 600; color: var(--encre); }

/* Formulaires */
.contenu { padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 22px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ > label, .lbl { font-size: 16px; font-weight: 600; }
.facultatif { font-weight: 400; color: var(--gris); }
.saisie { height: 60px; border: 2px solid var(--encre); border-radius: 4px; padding: 0 16px; font: inherit; font-size: 19px; color: var(--encre); background: var(--blanc); width: 100%; }
.saisie:focus { outline: 3px solid var(--vert); outline-offset: 1px; }
.saisie[aria-invalid="true"] { border-color: var(--erreur); }
.tel { display: flex; direction: ltr; }
.tel .prefixe { height: 60px; padding: 0 14px; border: 2px solid var(--encre); border-right: none; border-radius: 4px 0 0 4px; background: var(--fond-champ); display: flex; align-items: center; font-size: 19px; }
.tel .saisie { border-radius: 0 4px 4px 0; flex: 1; min-width: 0; }
.saisie-tel { height: 68px; font-size: 26px; letter-spacing: 1px; font-weight: 500; }
[dir="rtl"] .saisie-tel { text-align: right; }
.erreur { margin: 0; color: var(--erreur); font-size: 15px; font-weight: 500; }
.boite-erreur { padding: 12px 16px; border: 2px solid var(--erreur); border-radius: 4px; color: var(--erreur); font-weight: 500; background: var(--blanc); }

.bandeau-lieu { margin: 20px 24px 0; padding: 14px 16px; background: var(--encre); color: var(--blanc); display: flex; align-items: center; gap: 12px; border-radius: 4px; }
.bandeau-lieu svg { color: var(--vert); flex-shrink: 0; }
.bandeau-lieu small { display: block; font-size: 12px; letter-spacing: 1px; color: var(--vert); font-weight: 600; }
.bandeau-lieu strong { font-size: 17px; }

.bloc-lieu { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--encre); color: var(--blanc); border-radius: 4px; }
.bloc-lieu .saisie { border-color: var(--blanc); }
.bloc-lieu > .champ > label { font-size: 15px; font-weight: 400; }
.bloc-lieu-titre { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--vert); }
[dir="rtl"] .bloc-lieu-titre { font-family: var(--titre-ar); font-weight: 800; }
.bloc-lieu .erreur { color: #FF9C94; }
.lien-btn { min-height: 48px; border: none; background: transparent; color: inherit; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.statut-position { margin: 0; font-size: 14px; min-height: 1em; text-align: center; }

.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tuile { position: relative; }
.tuile input { position: absolute; opacity: 0; pointer-events: none; }
.tuile span { min-height: 64px; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); font-size: 16px; font-weight: 500; padding: 0 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tuile input:checked + span { background: var(--vert); }
.tuile input:focus-visible + span { outline: 3px solid var(--encre); outline-offset: 2px; }
.tuile .coche { display: none; }
.tuile input:checked + span .coche { display: inline; }

.depot { min-height: 64px; border: 2px dashed var(--encre); border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 18px; font-weight: 600; cursor: pointer; position: relative; padding: 8px 12px; text-align: center; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot:focus-within { outline: 3px solid var(--vert); outline-offset: 2px; }
.aide { margin: 0; font-size: 14px; color: var(--gris); }
.fichiers-choisis { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--gris-fonce); }

.accord { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.accord input { width: 26px; height: 26px; margin: 0; accent-color: var(--encre); flex-shrink: 0; }

.btn-go { min-height: 68px; border-radius: 4px; background: var(--vert); border: 2px solid var(--encre); color: var(--encre); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; font-family: var(--titre-lat); font-weight: 700; font-size: 28px; letter-spacing: 1px; cursor: pointer; width: 100%; text-decoration: none; }
[dir="rtl"] .btn-go { font-family: var(--titre-ar); font-weight: 800; font-size: 24px; letter-spacing: 0; }
.btn-go[disabled] { opacity: .7; cursor: progress; }

/* Parcours candidat : une question par écran */
.js-seulement { display: none !important; }
.js .js-seulement { display: revert !important; }
.js .progression.js-seulement { display: grid !important; }
.js .btn-go.js-seulement, .js .porte-bas.js-seulement, .js .btn-position.js-seulement { display: flex !important; }
.js .sans-js-seulement { display: none; }

.parcours form { display: flex; flex-direction: column; flex: 1; }
.ecran { padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.ecran + .ecran { border-top: 2px solid var(--encre); }
.js .ecran { display: none; border-top: none; flex: 1; }
.js .ecran.actif { display: flex; animation: apparition .22s ease-out; }
@keyframes apparition { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .js .ecran.actif { animation: none; } }
.ecran .titre:focus { outline: none; }
.ecran .btn-go { margin-top: auto; }
.bandeau-lieu-parcours { margin: 0; }

/* Porte du haut : « Je veux travailler » */
.porte-haut { position: relative; display: flex; flex-direction: column; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); cursor: pointer; overflow: hidden; }
.porte-haut input, .tuile-img input, .choix-ligne input { position: absolute; opacity: 0; pointer-events: none; }
/* Les deux portes ont la même structure et le même poids : bandeau d'image 2:1, puis titre et flèche. */
.porte-visuel, .porte-bas-visuels { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; background: var(--papier); border-bottom: 2px solid var(--encre); color: var(--encre); overflow: hidden; }
.porte-visuel .visuel-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.porte-visuel .visuel-picto { width: 26%; height: auto; }
.porte-texte { padding: 12px 16px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.porte-texte > svg { flex-shrink: 0; }
.porte-libelle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.porte-libelle strong { font-family: var(--titre-lat); font-weight: 700; font-size: 32px; line-height: 1; }
[dir="rtl"] .porte-libelle strong { font-family: var(--titre-ar); font-weight: 800; font-size: 26px; line-height: 1.4; }
.porte-libelle span { font-size: 16px; color: var(--gris-fonce); }
.porte-coche { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 4px; background: var(--encre); color: var(--vert); display: none; align-items: center; justify-content: center; }
.porte-coche .coche { display: block; }
/* .choisi est posé par le script : même rendu sur les navigateurs qui ignorent :has() */
.porte-haut:has(input:checked), .porte-haut.choisi { border-width: 3px; }
.porte-haut:has(input:checked) .porte-texte, .porte-haut.choisi .porte-texte { background: var(--vert); }
.porte-haut:has(input:checked) .porte-coche, .porte-haut.choisi .porte-coche { display: flex; }
.porte-haut:has(input:focus-visible) { outline: 3px solid var(--vert); outline-offset: 3px; }

/* Porte du bas : « J'ai un métier » */
.porte-bas { flex-direction: column; padding: 0; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); color: var(--encre); cursor: pointer; text-align: start; width: 100%; overflow: hidden; font: inherit; }
.porte-bas-visuels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.porte-bas-visuels > span { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.porte-bas-visuels > span + span { border-inline-start: 2px solid var(--encre); }
.porte-bas-visuels .visuel-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.porte-bas-visuels .visuel-picto { width: 50%; height: auto; }
.porte-bas .porte-texte { width: 100%; }
.porte-bas:active, .porte-haut:active { transform: translateY(1px); }
.porte-bas:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }

/* Catalogue des métiers */
.catalogue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuile-img { position: relative; display: flex; flex-direction: column; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); cursor: pointer; overflow: hidden; }
.tuile-visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--papier); border-bottom: 2px solid var(--encre); overflow: hidden; }
.tuile-visuel .visuel-img { width: 100%; height: 100%; object-fit: cover; }
.tuile-visuel .visuel-picto { width: 46%; height: auto; }
.tuile-nom { flex: 1; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 1px; min-height: 64px; }
.tuile-nom strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
[dir="rtl"] .tuile-nom strong { font-family: var(--titre-ar); font-weight: 800; font-size: 17px; line-height: 1.4; }
.tuile-nom small { font-size: 12px; color: var(--gris); }
.tuile-coche { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 4px; background: var(--encre); color: var(--vert); display: none; align-items: center; justify-content: center; }
.tuile-coche .coche { display: block; }
.tuile-img:has(input:checked), .tuile-img.choisi { border-width: 3px; }
.tuile-img:has(input:checked) .tuile-nom, .tuile-img.choisi .tuile-nom { background: var(--vert); }
.tuile-img:has(input:checked) .tuile-nom small, .tuile-img.choisi .tuile-nom small { color: var(--encre); }
.tuile-img:has(input:checked) .tuile-coche, .tuile-img.choisi .tuile-coche { display: flex; }
.tuile-img:has(input:focus-visible) { outline: 3px solid var(--vert); outline-offset: 2px; }

/* Choix en lignes (expérience, zone) */
.liste-choix { display: flex; flex-direction: column; gap: 8px; }
.choix-ligne { position: relative; display: block; }
.choix-ligne span { min-height: 64px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); font-size: 19px; font-weight: 600; cursor: pointer; }
.choix-ligne.compact span { min-height: 56px; font-size: 17px; }
.choix-ligne .coche { display: none; }
.choix-ligne input:checked + span { background: var(--vert); border-width: 3px; }
.choix-ligne input:checked + span .coche { display: block; }
.choix-ligne input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }
.btn-position { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--encre); border-radius: 4px; background: var(--encre); color: var(--blanc); font-size: 18px; font-weight: 600; cursor: pointer; }
.btn-position svg { color: var(--vert); }
.separateur { margin: 0; text-align: center; font-size: 14px; color: var(--gris); }
.sous-titre-ville { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--gris); }

/* Récapitulatif */
.recap { border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); }
.recap-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--trait); }
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne .etiquette { grid-column: 1; }
.recap-ligne .valeur { grid-column: 1; display: block; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
[dir="rtl"] .recap-ligne .valeur[dir="ltr"] { text-align: right; }
.recap-ligne button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: 0 4px; border: none; background: transparent; color: var(--encre); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.depot-recap { justify-content: flex-start; text-align: start; padding: 14px 16px; background: var(--blanc); }
.depot-texte { display: flex; flex-direction: column; gap: 2px; }
.depot-texte strong { font-size: 17px; }
.depot-texte small { font-size: 13px; font-weight: 400; color: var(--gris); }
.accord-texte { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris-fonce); }

/* Ticket */
.ticket-intro { padding: 36px 24px 24px; }
.ticket { margin: 0 20px; background: var(--blanc); border: 2px solid var(--encre); border-radius: 4px; }
.ticket-tete { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--vert); border-bottom: 2px solid var(--encre); font-size: 13px; font-weight: 500; }
.ticket-tete .plaque-ar { font-size: 14px; padding: 5px 7px 8px; }
.ticket-tete .plaque-lat { font-size: 18px; }
.ticket-num { padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.etiquette { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--gris); }
[dir="rtl"] .etiquette { letter-spacing: 0; font-size: 13px; }
.numero { font-family: var(--titre-lat); font-weight: 700; font-size: clamp(48px, 16vw, 68px); line-height: .9; letter-spacing: .5px; }
[dir="rtl"] .numero { text-align: right; }
.perfo { position: relative; height: 0; border-top: 2px dashed var(--encre); margin: 0 20px; }
.perfo::before, .perfo::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--papier); border: 2px solid var(--encre); transform: rotate(45deg); }
.perfo::before { left: -34px; border-left-color: var(--papier); border-bottom-color: var(--papier); }
.perfo::after { right: -34px; border-right-color: var(--papier); border-top-color: var(--papier); }
.ticket dl { margin: 0; padding: 18px 20px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ticket dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.ticket .large { grid-column: span 2; }
.message-ticket { margin: 24px 20px 0; display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.4; font-weight: 500; }
.message-ticket svg { flex-shrink: 0; }
.alerte-arnaque { margin: 20px 20px 0; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); font-size: 15px; font-weight: 600; line-height: 1.45; }
.alerte-arnaque svg { flex-shrink: 0; color: var(--vert); }
@media (min-width: 960px) { .alerte-arnaque { max-width: 520px; margin: 20px 48px 0; } }
.note-bas { margin: auto 0 0; padding: 20px 24px; font-size: 14px; line-height: 1.45; border-top: 2px solid var(--encre); }
.maj { margin: 0 20px 16px; padding: 10px 14px; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); font-weight: 600; }

/* Côté entreprise */
.pro .saisie { height: 50px; border: 1.5px solid var(--bord-champ); font-size: 17px; padding: 0 14px; }
.pro .champ { gap: 6px; }
.pro .champ > label { font-size: 14px; }
.pro .erreur { font-size: 14px; }
.intro-pro { padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.intro-pro p { margin: 0; font-size: 15px; color: var(--gris); line-height: 1.5; }
.section { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-top: 1px solid var(--trait); }
.section-titre { display: flex; align-items: baseline; gap: 10px; font-size: 17px; font-weight: 600; margin: 0; }
.num { font-family: var(--titre-lat); font-weight: 700; font-size: 20px; color: var(--gris); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-noir { min-height: 56px; border-radius: 4px; background: var(--encre); color: var(--blanc); border: none; font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 20px; cursor: pointer; text-decoration: none; width: 100%; }
.accord.petit { font-size: 14px; gap: 10px; color: var(--gris-fonce); line-height: 1.5; }
.accord.petit input { width: 22px; height: 22px; }

.etapes { margin: 0 24px; padding: 0; list-style: none; }
.etapes li { display: flex; gap: 16px; }
.etapes .repere { display: flex; flex-direction: column; align-items: center; }
.etapes .carre { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--trait); }
.etapes .carre.fait { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.etapes .carre.encours { background: var(--vert); border-color: var(--encre); }
.etapes .liaison { width: 2px; height: 40px; background: var(--trait); }
.etapes .liaison.fait { background: var(--encre); }
.etapes .texte { display: flex; flex-direction: column; padding-top: 3px; }
.etapes .texte strong { font-size: 17px; font-weight: 600; }
.etapes .texte span { font-size: 14px; color: var(--gris); }

.filtres { padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 12px; border-bottom: 2px solid var(--encre); }
.filtres-entete { display: flex; align-items: flex-end; justify-content: space-between; }
.compte { font-family: var(--titre-lat); font-weight: 700; font-size: 22px; }
.filtres-ligne { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre { height: 40px; padding: 0 10px; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--blanc); font-size: 14px; font-weight: 500; color: var(--encre); flex-shrink: 0; }
select.filtre.actif { background: var(--vert); }
.puce { position: relative; flex-shrink: 0; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span { height: 40px; padding: 0 12px; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--blanc); font-size: 14px; font-weight: 500; display: flex; align-items: center; cursor: pointer; white-space: nowrap; }
.puce input:checked + span { background: var(--vert); }
.filtre-zones .puce span { white-space: normal; height: auto; min-height: 40px; padding: 8px 12px; line-height: 1.25; }
.puce input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }
.js .sans-js { display: none; }

.ligne-cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 20px; border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--encre); min-height: 64px; }
.ligne-cand:hover { background: var(--papier); }
.ligne-cand strong { font-size: 17px; font-weight: 600; }
.ligne-cand .col-dist { font-family: var(--titre-lat); font-weight: 700; font-size: 20px; text-align: end; }
.ligne-cand .col-date { font-size: 13px; text-align: end; }
.ligne-cand.selectionnee { background: #E4F3EB; }
.ligne-cand.selectionnee .col-nom { text-decoration: underline; text-underline-offset: 4px; }
.sous { font-size: 14px; color: var(--gris); }
.sous.droite { font-size: 13px; text-align: end; }
.vide { padding: 40px 24px; color: var(--gris); text-align: center; line-height: 1.5; }

.fiche-tete { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 6px; border-bottom: 2px solid var(--encre); }
.surtitre-gris { font-family: var(--titre-lat); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; color: var(--gris); }
.fiche-tete .meta { font-size: 15px; color: var(--gris-fonce); }
.fiche-tete .titre { line-height: 1.15; overflow-wrap: anywhere; }
.fiche dl { margin: 0; }
.fiche-item { padding: 14px 20px; border-bottom: 1px solid var(--trait); }
.fiche-item dd { margin: 3px 0 0; font-size: 17px; font-weight: 500; }
.fiche-item dd.detail { margin-top: 2px; font-size: 14px; color: var(--gris); font-weight: 400; }
.tel-grand { font-family: var(--titre-lat); font-weight: 700; font-size: 26px !important; letter-spacing: .5px; }
.docs-bloc { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.doc { height: 150px; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--papier); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; text-decoration: none; color: var(--gris-fonce); font-size: 14px; }
.doc img { width: 100%; height: 100%; object-fit: cover; }
.actions-bas { position: sticky; bottom: 0; margin-top: auto; display: grid; grid-template-columns: 2fr 1fr; border-top: 2px solid var(--encre); background: var(--blanc); }
.actions-bas a, .actions-bas button { height: 72px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-family: var(--titre-lat); font-weight: 700; font-size: 24px; letter-spacing: 1px; color: var(--encre); }
.actions-bas .appeler { background: var(--vert); border-inline-end: 2px solid var(--encre); }

/* Messages */
.flash { padding: 12px 16px; background: var(--vert); border: 2px solid var(--encre); border-radius: 4px; font-weight: 500; }
.page .flash { margin: 16px 20px 0; }

/* Admin */
.admin-barre { background: var(--encre); padding: 0 32px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.admin-barre nav { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; }
.onglet { height: 60px; display: flex; align-items: center; gap: 8px; color: var(--blanc); text-decoration: none; font-size: 15px; border-bottom: 4px solid transparent; }
.onglet.actif { border-bottom-color: var(--vert); font-weight: 600; }
.pastille { background: var(--vert); color: var(--encre); font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.admin-barre .bouton-texte { color: var(--blanc); }
.admin-corps { display: flex; flex-wrap: wrap; gap: 40px; padding: 32px; align-items: flex-start; }
.admin-principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.admin-principal section { display: flex; flex-direction: column; gap: 14px; }
.admin-cote { flex: 1 1 320px; max-width: 100%; border: 2px solid var(--encre); border-radius: 4px; }
.admin-cote-tete { padding: 16px 18px; border-bottom: 2px solid var(--encre); background: var(--papier); }
.admin-cote form, .admin-cote .bloc { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.admin-cote .bloc + .bloc, .admin-cote form + .bloc { border-top: 1px solid var(--trait); }
.h2 { margin: 0; font-family: var(--titre-lat); font-weight: 700; font-size: 30px; line-height: 1; }
.h2.petit { font-size: 26px; }
.tableau-boite { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--gris); text-align: start; border-bottom: 2px solid var(--encre); white-space: nowrap; }
td { padding: 13px 14px; font-size: 15px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td.fort { font-weight: 600; white-space: normal; min-width: 160px; }
td.code { font-family: var(--titre-lat); font-weight: 700; font-size: 18px; }
td.gris { color: var(--gris); }
td.droite, th.droite { text-align: end; }
.actions { display: inline-flex; gap: 6px; }
.btn-petit { height: 38px; padding: 0 14px; border-radius: 4px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--encre); background: var(--blanc); color: var(--encre); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.btn-petit.vert { background: var(--vert); }
.btn-petit.noir { background: var(--encre); color: var(--blanc); }
.btn-pointille { min-height: 46px; border: 1.5px dashed var(--encre); border-radius: 4px; background: var(--blanc); font-size: 14px; font-weight: 600; color: var(--encre); cursor: pointer; }
.qr-apercu { display: flex; gap: 16px; align-items: center; }
.qr-apercu .qr { width: 132px; height: 132px; flex-shrink: 0; padding: 8px; border: 2px solid var(--encre); background: var(--blanc); }
.qr svg, .affiche-qr svg { width: 100%; height: auto; display: block; }
.qr-code { font-family: var(--titre-lat); font-weight: 700; font-size: 32px; line-height: 1; }
.qr-infos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qr-infos .url { font-size: 13px; color: var(--gris); overflow-wrap: anywhere; }
.qr-infos a { font-size: 14px; font-weight: 600; }
.recherche { display: flex; gap: 8px; max-width: 520px; }
.recherche .saisie { height: 44px; font-size: 15px; border-width: 1.5px; }
.etat-inactif { color: var(--gris); }
.admin-connexion { max-width: 380px; margin: 80px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 600px) {
  .admin-corps { padding: 20px 16px; }
  .admin-barre { padding: 0 16px; gap: 12px; }
}

/* =========================================================================
   Supports imprimés : autocollant 20 × 20 cm et affiche A5 (mesures en mm)
   Ordre de lecture : image « c'est pour moi » → Gratuit + titre → geste expliqué → effort levé → marque
   ========================================================================= */
.affiche-page { background: #DDDAD2; }
.affiche-outils { max-width: 148mm; margin: 24px auto 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 8px; }
.autocollant-outils { max-width: 206mm; }
.autocollant-aide { width: 100%; }

/* Éléments communs */
.ac-gratuit { position: absolute; top: 5mm; left: 15mm; padding: 1.6mm 3mm 2.2mm; border-radius: 1mm; background: var(--encre); color: var(--vert); font-family: var(--titre-ar); font-weight: 800; font-size: 5.6mm; line-height: 1.2; }
.ac-gratuit [lang="fr"] { font-family: var(--titre-lat); font-weight: 700; }
.ac-mode { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6mm; text-align: right; }
.ac-picto { width: 15mm; height: 15mm; margin-bottom: 1mm; }
.ac-scan { font-family: var(--titre-ar); font-weight: 800; font-size: 8mm; line-height: 1.2; }
.ac-comment { font-size: 4.4mm; font-weight: 500; line-height: 1.35; }
.ac-effort { font-family: var(--titre-ar); font-weight: 800; font-size: 4.8mm; line-height: 1.3; padding: .8mm 2.4mm 1.2mm; background: var(--blanc); border-radius: .8mm; }
.ac-fr { font-size: 3.3mm; font-weight: 600; }
.ac-qr { flex-shrink: 0; padding: 4.5mm; border: 1.2mm solid var(--encre); background: var(--blanc); }
.ac-qr svg { width: 100%; height: auto; display: block; }
.ac-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 5mm; background: var(--encre); color: var(--blanc); }
.ac-bas .plaque-ar { background: var(--vert); color: var(--encre); }
.ac-url { font-family: var(--titre-lat); font-weight: 700; color: var(--vert); }

/* Autocollant : fichier 206 × 206 mm, coupe à 3 mm */
.autocollant { page: autocollant; position: relative; width: 206mm; height: 206mm; margin: 0 auto 40px; display: flex; flex-direction: column; overflow: hidden; background: var(--vert); color: var(--encre); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.autocollant-coupe { position: absolute; inset: 3mm; border: .4mm dashed rgba(255, 255, 255, .95); pointer-events: none; }
.ac-visuel { position: relative; height: 82mm; flex-shrink: 0; overflow: hidden; border-bottom: 1.2mm solid var(--encre); background: var(--papier); }
.ac-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-titre { position: relative; padding: 4mm 15mm 0; display: flex; flex-direction: column; text-align: right; }
.ac-titre .ar { font-family: var(--titre-ar); font-weight: 800; font-size: 14mm; line-height: 1.15; }
.ac-titre .fr { font-family: var(--titre-lat); font-weight: 700; font-size: 6mm; line-height: 1; }
.ac-action { padding: 3mm 15mm 0; display: flex; align-items: center; gap: 6mm; }
.ac-action .ac-qr { width: 74mm; height: 74mm; }
.autocollant .ac-bas { padding: 4mm 15mm 7mm; }
.autocollant .ac-bas .plaque-ar { font-size: 6mm; padding: 1.7mm 2.2mm 2.7mm; }
.autocollant .ac-bas .plaque-lat { font-size: 7.4mm; letter-spacing: .5mm; }
.autocollant .ac-url { font-size: 6.2mm; }
@page autocollant { size: 206mm 206mm; margin: 0; }

/* Affiche A5 : 148 × 210 mm */
.affiche { page: affiche-a5; width: 148mm; height: 210mm; margin: 0 auto 40px; display: flex; flex-direction: column; overflow: hidden; background: var(--vert); color: var(--encre); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.af-visuel { position: relative; height: 66mm; flex-shrink: 0; overflow: hidden; border-bottom: 1mm solid var(--encre); background: var(--papier); }
.af-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-gratuit { position: static; align-self: flex-end; margin-bottom: 1.5mm; font-size: 4.2mm; }
.af-titre { position: relative; padding: 3.5mm 9mm 0; display: flex; flex-direction: column; text-align: right; }
.af-titre .ar { font-family: var(--titre-ar); font-weight: 800; font-size: 11.5mm; line-height: 1.15; }
.af-titre .fr { font-family: var(--titre-lat); font-weight: 700; font-size: 5.2mm; line-height: 1; }
.af-secteurs { margin-top: 2.5mm; padding-top: 2mm; border-top: .5mm solid var(--encre); display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.af-secteurs span:first-child { font-family: var(--titre-ar); font-weight: 800; font-size: 3.9mm; }
.af-secteurs [lang="fr"] { font-size: 2.9mm; font-weight: 600; }
.af-action { padding: 3.5mm 9mm 0; display: flex; align-items: center; gap: 5mm; }
.af-qr { width: 56mm; height: 56mm; padding: 3.5mm; border-width: 1mm; }
.af-mode .ac-picto { width: 11mm; height: 11mm; }
.af-mode .ac-scan { font-size: 6.2mm; }
.af-mode .ac-comment { font-size: 3.5mm; }
.af-mode .ac-effort { font-size: 3.8mm; }
.af-mode .ac-fr { font-size: 2.7mm; }
.af-confiance { margin: 3.5mm 9mm 0; padding: 2mm 3mm; display: flex; flex-direction: column; align-items: flex-end; gap: .6mm; border: .5mm solid var(--encre); border-radius: 1mm; text-align: right; }
.af-confiance span:first-child { font-family: var(--titre-ar); font-weight: 800; font-size: 3.9mm; }
.af-confiance [lang="fr"] { font-size: 2.9mm; font-weight: 600; }
.af-bas { padding: 3.5mm 9mm; }
.af-bas .plaque-ar { font-size: 4.6mm; padding: 1.3mm 1.8mm 2.1mm; }
.af-bas .plaque-lat { font-size: 5.8mm; letter-spacing: .4mm; }
.af-lieu { display: flex; flex-direction: column; align-items: flex-end; }
.af-lieu strong { font-size: 3.3mm; }
.af-lieu .ac-url { font-size: 4.4mm; }
@page affiche-a5 { size: A5; margin: 0; }

@media print {
  .affiche-page { background: none; }
  .affiche-outils { display: none; }
  .affiche, .autocollant { margin: 0; }
  .autocollant-coupe { display: none; }
}

/* Zones (filtres entreprise) et position facultative */
.filtre-zones { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtre-zones .filtres-ligne { gap: 6px; }
.aide-zones:empty { display: none; }
.position-site { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 4px; border-bottom: 2px solid var(--encre); }
.position-site .bouton-texte { padding: 0; text-align: start; color: var(--gris-fonce); }
.btn-position-option { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px dashed var(--encre); border-radius: 4px; background: var(--blanc); color: var(--encre); font: inherit; text-align: start; cursor: pointer; }
.btn-position-option svg { flex-shrink: 0; color: var(--vert); }
.btn-position-option.fait { border-style: solid; background: #E4F3EB; }
.liste-zones .choix-ligne span { min-height: 60px; }

/* Page Confidentialité */
.texte-legal { padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 12px; line-height: 1.6; }
.texte-legal h2 { margin: 14px 0 0; font-size: 18px; }
.texte-legal p, .texte-legal ul { margin: 0; }
.texte-legal ul { padding-inline-start: 22px; }
.texte-legal .chapeau { font-size: 17px; color: var(--gris-fonce); }
.texte-legal .alerte-arnaque { margin: 16px 0 0; }
.pied { flex-wrap: wrap; }
.lien-confidentialite { width: 100%; color: var(--gris); }
@media (min-width: 960px) { .texte-legal { padding: 40px 48px 56px; max-width: 680px; } }

/* Erreur */
.erreur-page { padding: 60px 24px; display: flex; flex-direction: column; gap: 20px; }

/* =========================================================================
   Espace entreprise (liste + fiche) — téléphone d'abord
   ========================================================================= */
.espace { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--blanc); }
.espace-compte { display: flex; align-items: center; gap: 10px; min-width: 0; }
.espace-entreprise { font-size: 14px; color: var(--blanc); opacity: .8; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espace-tete .bouton-texte { color: var(--blanc); }
.espace-corps { flex: 1; display: flex; flex-direction: column; }
.lbl-bureau { display: none; }
.filtre-groupe { display: contents; }
.liste-tete, .ligne-cand .col-profil, .ligne-cand .col-exp, .ligne-cand .col-quartier { display: none; }
.pastille-doc { margin-inline-start: 6px; padding: 1px 6px; border: 1px solid var(--encre); border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.panneau-fiche { display: none; }
.avec-fiche .colonne-filtres, .avec-fiche .liste { display: none; }
.avec-fiche .panneau-fiche { display: flex; flex-direction: column; flex: 1; }
.fiche { display: flex; flex-direction: column; flex: 1; }
.fiche-retour { justify-content: flex-start; gap: 4px; }
.fiche-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 40px; text-align: center; color: var(--gris); }
.fiche-vide p { margin: 0; max-width: 260px; line-height: 1.5; }
.actions-bas .action-copier { display: none; }
.action-copier, .action-sms { font-family: var(--titre-lat); }

/* =========================================================================
   Ordinateur et grande tablette (≥ 960 px)
   ========================================================================= */
.panneau-marque { display: none; }

@media (min-width: 960px) {
  /* --- Candidat : affiche d'un côté, parcours de l'autre --- */
  .candidat .cadre { display: grid; grid-template-columns: minmax(400px, 42%) minmax(0, 1fr); min-height: 100vh; }
  .panneau-marque { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 36px; padding: 48px 56px; background: var(--vert); color: var(--encre); overflow-y: auto; }
  .panneau-accroche { display: flex; flex-direction: column; gap: 6px; }
  [dir="ltr"] .panneau-accroche { text-align: left; }
  [dir="rtl"] .panneau-accroche { text-align: right; }
  .panneau-accroche .ar { font-family: var(--titre-ar); font-weight: 800; font-size: clamp(46px, 4.6vw, 72px); line-height: 1.2; }
  .panneau-accroche .fr { font-family: var(--titre-lat); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
  .panneau-secteurs { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 3px solid var(--encre); font-size: 15px; font-weight: 600; }
  .panneau-secteurs [lang="ar"] { font-family: var(--titre-ar); font-weight: 800; font-size: 20px; }
  .panneau-etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 20px; font-weight: 600; }
  .panneau-etapes li { display: flex; align-items: center; gap: 16px; }
  .panneau-etapes .n { width: 30px; font-family: var(--titre-lat); font-weight: 700; font-size: 44px; line-height: .8; }
  .panneau-qr { margin-top: auto; display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: 4px; background: var(--encre); color: var(--blanc); }
  .panneau-qr .qr { width: 116px; height: 116px; flex-shrink: 0; padding: 8px; background: var(--blanc); }
  .panneau-qr .qr svg { width: 100%; height: auto; display: block; }
  .panneau-qr p { margin: 0; font-size: 16px; line-height: 1.45; }

  .candidat .page { width: 100%; max-width: 780px; margin: 0 auto; }
  /* Le logo est déjà dans l'affiche : pas de doublon dans le parcours. */
  .candidat .barre > .plaque, .langue-tete > .plaque { display: none; }
  .candidat .barre:has(> .plaque) { justify-content: flex-end; }
  .candidat .barre { padding: 0 32px; }
  .ecran { padding: 40px 48px 48px; }
  .ecran .btn-go { margin-top: 12px; }
  .ecran > .champ, .ecran > .btn-go, .ecran > .btn-position, .ecran > .statut-position, .ecran > .separateur,
  .ecran > .liste-choix:not(.liste-zones), .ecran > .erreur, .recap, .accord-texte { max-width: 560px; }
  .portes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .liste-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .langue-tete { padding: 48px; }
  .langue-choix { padding: 40px 48px; }
  .pied { padding: 16px 48px; }
  .choix { padding: 32px 48px; }
  .bas-de-page { padding: 24px 48px; }
  .ticket-intro { padding: 48px 48px 24px; }
  .ticket { max-width: 520px; margin: 0 48px; }
  .maj { max-width: 520px; margin: 0 48px 16px; }
  .message-ticket { max-width: 520px; margin: 24px 48px 0; }
  .note-bas { padding: 20px 48px; }

  /* --- Pages d'accès entreprise : carte centrée --- */
  body.carte { background: var(--papier); }
  .carte .page { max-width: 680px; min-height: 0; margin: 48px auto; border: 2px solid var(--encre); border-radius: 4px; background: var(--blanc); }
  .carte .section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .carte .section > .section-titre, .carte .section > .grille-2, .carte .section > .erreur { grid-column: 1 / -1; }

  /* --- Espace entreprise : filtres | liste | fiche --- */
  .espace { height: 100vh; }
  .espace-tete { padding: 0 24px; }
  .espace-entreprise { max-width: 360px; }
  .espace-corps { display: grid; grid-template-columns: 270px minmax(0, 1fr) 420px; min-height: 0; }
  .espace-corps > * { min-height: 0; overflow-y: auto; }
  .colonne-filtres, .avec-fiche .colonne-filtres { display: block; border-inline-end: 2px solid var(--encre); background: var(--papier); }
  .filtres { padding: 24px; gap: 18px; border-bottom: none; }
  .position-site { padding: 0 24px 24px; }
  .filtres-ligne { flex-direction: column; flex-wrap: nowrap; gap: 18px; }
  .filtre-groupe { display: flex; flex-direction: column; gap: 6px; }
  .lbl-bureau { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); }
  .filtre { width: 100%; height: 44px; }
  .puce span { width: 100%; height: 44px; }
  .avec-fiche .liste { display: block; }
  .liste-tete { position: sticky; top: 0; z-index: 1; display: grid; padding: 12px 20px; border-bottom: 2px solid var(--encre); background: var(--blanc); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); }
  .liste-tete .droite { text-align: end; }
  .ligne-cand, .liste-tete { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1.1fr) 80px 96px; column-gap: 14px; align-items: center; }
  .ligne-cand { min-height: 56px; padding: 10px 20px; }
  .ligne-cand > * { grid-row: 1; }
  .ligne-cand .col-nom { grid-column: 1; font-size: 16px; }
  .ligne-cand .col-profil { grid-column: 2; display: block; font-size: 15px; }
  .ligne-cand .col-exp { grid-column: 3; display: block; }
  .ligne-cand .col-quartier { grid-column: 4; display: block; }
  .ligne-cand .col-dist { grid-column: 5; font-size: 18px; }
  .ligne-cand .col-date { grid-column: 6; }
  .ligne-cand .col-resume { display: none; }
  .panneau-fiche, .avec-fiche .panneau-fiche { display: flex; flex-direction: column; border-inline-start: 2px solid var(--encre); }
  .fiche-retour { display: none; }
  .fiche-tete { padding-top: 28px; }
  .actions-bas { grid-template-columns: 1.4fr 1fr; }
  .actions-bas .action-sms { display: none; }
  .actions-bas .action-copier { display: flex; font-size: 20px; }
}

/* Petits écrans d'ordinateur : on garde l'essentiel dans la liste */
@media (min-width: 960px) and (max-width: 1279px) {
  .espace-corps { grid-template-columns: 240px minmax(0, 1fr) 360px; }
  .ligne-cand, .liste-tete { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 72px; }
  .ligne-cand .col-exp, .ligne-cand .col-quartier, .ligne-cand .col-date,
  .liste-tete span:nth-child(3), .liste-tete span:nth-child(4), .liste-tete span:nth-child(6) { display: none; }
  .ligne-cand .col-dist { grid-column: 3; }
  .catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Formulaire de contact entreprise --- */
.js [data-objet][data-cache] { display: none !important; }
.objets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.objets .tuile span { justify-content: center; text-align: center; font-size: 15px; padding: 8px 10px; line-height: 1.25; }
.saisie.zone-texte { height: auto; min-height: 140px; padding: 12px 16px; line-height: 1.45; resize: vertical; }
.carte .section > .champ-large, .carte .section > .objets, .carte .section > .aide { grid-column: 1 / -1; }
.message-texte { white-space: pre-line; min-width: 260px; max-width: 420px; }

/* --- Page de présentation entreprises (vitrine) --- */
body.vitrine { background: var(--blanc); }
.v-conteneur { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.v-tete { border-bottom: 2px solid var(--encre); }
.v-tete-ligne { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-hero { display: grid; gap: 28px; padding: 36px 20px 44px; }
.v-hero-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.v-titre { font-size: 46px; }
.v-chapo { margin: 0; font-size: 18px; line-height: 1.5; color: var(--gris-fonce); max-width: 34em; }
.btn-cta { min-height: 60px; width: 100%; padding: 0 22px; border: 2px solid var(--encre); border-radius: 4px; background: var(--vert); color: var(--encre); display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 17px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
.btn-cta:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.v-note { margin: 0; font-size: 14px; color: var(--gris); }
.v-visuel img { display: block; width: 100%; height: auto; border: 2px solid var(--encre); border-radius: 4px; background: var(--papier); }
.v-section { border-top: 2px solid var(--encre); padding: 40px 0; }
.v-h2 { margin: 0 0 18px; font-family: var(--titre-lat); font-weight: 700; font-size: 34px; line-height: 1; }
.v-etapes { list-style: none; margin: 0; padding: 0; display: grid; }
.v-etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-content: start; gap: 12px; padding: 18px 0; border-top: 1px solid var(--trait); }
.v-etapes strong { font-size: 18px; }
.v-etapes p, .v-texte, .v-regle p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--gris-fonce); }
.v-num { width: 36px; height: 36px; border-radius: 4px; background: var(--encre); color: var(--vert); display: inline-flex; align-items: center; justify-content: center; font-family: var(--titre-lat); font-weight: 700; font-size: 22px; }
.v-deux { display: grid; gap: 28px; }
.v-metiers { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-metiers li { padding: 6px 12px; border: 1.5px solid var(--encre); border-radius: 4px; font-size: 15px; font-weight: 500; }
.v-regle { align-self: start; padding: 28px; border-radius: 4px; background: var(--encre); color: var(--blanc); }
.v-regle .v-h2 { color: var(--vert); }
.v-regle p { color: #E8E6E1; }
.v-regle strong { color: var(--blanc); }
.v-fin .v-conteneur { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.v-pied { border-top: 2px solid var(--encre); }
.v-pied-ligne { padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--gris); }
.v-pied a { color: var(--encre); font-weight: 500; }

@media (max-width: 560px) {
  .objets { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .v-conteneur { padding: 0 32px; }
  .v-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; padding: 72px 32px; }
  .v-titre { font-size: 64px; }
  .btn-cta { width: auto; }
  .v-section { padding: 56px 0; }
  .v-h2 { font-size: 40px; }
  .v-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .v-etapes li { grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--encre); padding-top: 20px; }
  .v-deux { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
  .v-pied-ligne { padding: 24px 32px; }
}