/* ==========================================================================
   CmonJob : feuille de style
   --------------------------------------------------------------------------
   D'OÙ VIENT CETTE VERSION
   La première direction (grands aplats bleus, trois polices, ombres portées,
   fiches épaisses) a été rejetée. Elle était « designée » là où un site
   d'emploi doit être LU. Refaite le 31/08/2026 d'après une analyse mesurée
   d'un site d'emploi grand public, dont la légèreté tient à une DISCIPLINE
   et non à un style :

     · aucune ombre portée, nulle part. La séparation se fait à la bordure 1 px.
     · arrondis de 4 px et 8 px uniquement. Le grand arrondi est réservé aux
       pastilles, où il porte un sens.
     · UNE famille de police. Deux graisses. Cinq tailles, pas six.
     · la couleur saturée ne touche JAMAIS une grande surface : boutons,
       liens, pastilles, rien d'autre.
     · aucun dégradé, aucune animation d'ambiance. Les transitions ne portent
       que sur la couleur, en 150 ms.
     · les photos servent le propos, elles ne le décorent pas : une par fiche
       métier, une par article, une au hero. Aucune dans les listes de métiers.

   CE QU'ON A REFUSÉ DE REPRENDRE
   Leurs polices sont servies en TTF non compressé (239 Ko + 284 Ko) et leur
   feuille n'a AUCUNE variable CSS : 100 couleurs écrites en dur sur 294 Ko.
   Ici tout passe par des tokens, et les polices sont en woff2 latin.

   SECONDE CORRECTION, 31/08/2026 : LE SOMBRE EN MOINS
   Le bleu marine dominait encore : titres, boutons, marque. La page tirait vers
   le sombre, ce qui ne va pas à un site qu'on ouvre le matin sur un téléphone.
   Trois changements : l'encre passe à un ANTHRACITE NEUTRE qui ne colore plus
   la page, l'action passe au VERT, et le jaune haute visibilité devient la
   couleur de marque, parce que c'est la plus claire dont on dispose et qu'elle
   vient du vêtement de travail.
   L'accueil ouvrait par ailleurs sur un titre seul, avec une moitié droite vide.
   Elle porte désormais un HERO : photo de travail réel, et posée dessus la bande
   horaire d'un métier.

   CE QUI RESTE DE NOUS
   La bande horaire 24 h, seule chose que ce site dit et qu'aucun autre n'affiche.
   Elle est passée du rang d'ornement à celui d'argument d'ouverture.

   TROISIÈME CORRECTION : LES VERTS ÉCLAIRCIS
   Le bouton et la réglette restaient trop foncés. La cause n'était pas le choix
   du vert mais le TEXTE BLANC posé dessus : porter du blanc oblige à un vert
   sombre. On a donc inversé, fond clair et texte encre, ce qui autorise un vert
   nettement plus lumineux. Et la réglette a perdu son second ton : un segment
   entre 21 h et 5 h EST la nuit, la position le dit déjà.

   ACCESSIBILITÉ, MESURÉE ET NON SUPPOSÉE (rapports recalculés le 31/08/2026)
   encre #1C2126 sur blanc              16,2:1
   gris  #5B6670 sur blanc               5,9:1
   encre sur vert clair #1FBE7A          6,7:1   (boutons, réglette)
   encre sur survol     #3ACF8E          8,1:1
   vert  #0B7A50 EN TEXTE sur blanc      5,4:1   (liens seulement)
   encre sur jaune #D8F227              12,9:1
   gris sur voile  #F2FAF6               5,5:1
   ⛔ jaune #D8F227 EN TEXTE sur blanc : 1,3:1. Fond uniquement.
   ⛔ blanc sur vert clair #1FBE7A : 2,4:1. C'est POUR ÇA que le texte des
      boutons est en encre et non en blanc.
   Seule surface sombre restante : le lien d'évitement au clavier, invisible
   tant qu'on ne tabule pas dessus.
   ========================================================================== */

:root {
  /* --- 8 couleurs, et c'est tout ---
     Le bleu marine dominant a été retiré le 31/08/2026 : il tirait la page vers le sombre,
     ce qui ne va pas à un site qu'on consulte le matin sur un téléphone, souvent dehors.
     L'encre est désormais un ANTHRACITE NEUTRE, pas un bleu : elle ne colore plus la page.
     La couleur d'action passe au VERT, qui dit « ça recrute » et qui n'est ni le cyan du
     site de référence, ni une teinte employée par les vingt et un autres sites du réseau.
     Et le JAUNE HAUTE VISIBILITÉ devient la couleur de marque : c'est la plus claire dont
     on dispose, et c'est celle du vêtement de travail. */
  --encre: #1C2126;      /* texte et titres. anthracite neutre, pas un bleu */
  --gris: #5B6670;       /* texte secondaire. 5,1:1 sur blanc, vérifié */
  --trait: #E4E7E9;      /* LA bordure. remplace toutes les ombres */
  --fond: #FAFBFB;       /* fond de page, presque blanc */
  --surface: #FFFFFF;    /* fiches, en-tête */
  /* DEUX verts, deux rôles, et c'est une contrainte mesurée, pas un caprice :
     un vert assez CLAIR pour ne pas assombrir la page ne peut PAS porter de texte blanc
     (#1FBE7A + blanc = 2,4:1, très en dessous du seuil). On inverse donc : le fond est
     clair et le texte posé dessus est l'encre. À l'inverse, un lien EST du texte : il lui
     faut un vert soutenu pour rester lisible sur blanc. Confondre les deux, c'est soit une
     page sombre, soit un texte illisible. */
  --vert-fond: #1FBE7A;      /* FOND de bouton et de réglette. texte encre par-dessus, 6,7:1 */
  --vert-fond-survol: #3ACF8E;/* survol, encore plus clair */
  --action: #0B7A50;         /* TEXTE : liens. 5,4:1 sur blanc. jamais un aplat */
  --vif: #D8F227;        /* haute visibilité. FOND uniquement, jamais du texte */
  --clair: #F2FAF6;      /* voile vert très pâle. bandeaux, jamais du texte dessus */
  --pastille: #F2F4F5;   /* fond des pastilles factuelles */

  /* --- une famille, deux graisses --- */
  --f: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- cinq tailles --- */
  --t-xl: 1.25rem;   /* 20 */
  --t-l: 1.125rem;   /* 18 */
  --t-m: 1rem;       /* 16 */
  --t-s: .875rem;    /* 14 */
  --t-xs: .75rem;    /* 12 */

  /* Conteneur élargi le 31/08/2026 : 1100 px était étroit face aux 1152 px d'Indeed et aux
     1336 px de Fiverr, et ça donnait au site un air de blog plutôt que de produit. */
  --large: 1280px;

  /* SYSTÈME D'ARRONDIS À TROIS NIVEAUX, relevé chez Fiverr et repris tel quel :
       16 px = une SURFACE (carte, tuile, panneau)
        8 px = un CONTRÔLE (bouton, puce, champ)
       9999  = un ROND (flèche, pastille)
     Trois niveaux qui veulent dire trois choses, au lieu de deux niveaux arbitraires. */
  --r-surface: 16px;
  --r-controle: 8px;
  --r-rond: 9999px;
  /* Anciens noms, conservés le temps que tout soit migré. */
  --r: var(--r-controle);
  --r-bloc: var(--r-surface);

  /* LA GOUTTIÈRE, en un seul endroit. Le rail d'articles doit se laisser tirer EXACTEMENT
     jusqu'au bord de l'écran, ni plus ni moins : il tirait 20 px alors que le conteneur en
     donne 16, donc il dépassait de 8 px et faisait défiler TOUTE la page à l'horizontale.
     Les deux valeurs sont désormais la même variable et ne peuvent plus diverger. */
  --gouttiere: 1rem;

  /* Filets à 0,8 px et non 1 px : signature discrète relevée sur les deux références. */
  --filet: .8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f);
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--action); }

/* 🔴 LA RÈGLE QUI FAIT LA LÉGÈRETÉ. Posée au niveau du système, pas au cas par
   cas : sinon une ombre revient toujours par une exception. */
* { box-shadow: none; }

/* 🔴 NE JAMAIS écrire un `padding` COMPLET sur une classe qu'on combine avec `.large`
   (`.large.section`, `.large.fil`…). Même spécificité : la règle déclarée en dernier
   gagne et remet la gouttière horizontale à zéro, donc le texte colle aux bords sur
   tout écran plus étroit que --large. N'écrire que l'axe voulu : `padding-block`,
   `padding-top`. Le défaut est resté invisible tant qu'on n'a regardé qu'en 1400 px,
   où le conteneur est plus étroit que la fenêtre. */
.large { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.mesure { max-width: 68ch; }

/* --- typographie : deux graisses, jamais plus ------------------------------ */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: 2rem; line-height: 1.15; }
@media (min-width: 768px) { h1 { font-size: 2.25rem; } }
h2 { font-size: var(--t-xl); margin-top: 2rem; }
@media (min-width: 768px) { h2 { font-size: 1.5rem; } }
h3 { font-size: var(--t-l); margin-top: 1.5rem; }
h4 { font-size: var(--t-m); margin-top: 1.25rem; }
p { margin: 0 0 1rem; }
.chapo { font-size: var(--t-l); color: var(--gris); max-width: 60ch; }
.surtitre {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris); margin: 0 0 .4rem;
}
.donnee { font-variant-numeric: tabular-nums; }

/* --- en-tête : collant, mais COMPACT ---------------------------------------
   Fiverr empile trois rangées de 168 px et les garde collées en permanence :
   19 % de la hauteur d'écran mangée en continu. Sur un site qu'on vient LIRE,
   c'est trop cher. On garde le principe (l'en-tête suit) et on refuse le poids :
   60 px, deux rangées, et la barre de catégories disparaît au défilement. */
.tete { background: var(--surface); border-bottom: var(--filet) solid var(--trait); position: sticky; top: 0; z-index: 30; }
/* Un en-tête collant cache la cible d'une ancre : sans ça, cliquer « BTP » dans la
   barre de catégories pose le titre du secteur SOUS l'en-tête, et le lecteur croit
   que le lien n'a rien fait. 60 px d'en-tête + une respiration. */
html { scroll-padding-top: 76px; }
[id] { scroll-margin-top: 76px; }
.tete .rang { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; min-height: 60px; }
.marque { font-weight: 700; font-size: var(--t-xl); text-decoration: none; color: var(--encre); }
.marque em { font-style: normal; background: var(--vif); padding: 0 .25rem; border-radius: 2px; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-left: auto; font-size: var(--t-s); }
.menu a { color: var(--gris); text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--encre); }

/* --- LA BARRE DE CATÉGORIES ------------------------------------------------
   C'est LE geste signature de Fiverr, et il coûte presque rien : une rangée
   plate de 41 px, du texte gris de 16 px, 20 px entre les libellés, aucune
   décoration. Sur leur site elle déborde volontairement de l'écran et cache
   cinq catégories sur quatorze derrière un chevron.
   ⛔ On ne reprend PAS ce débordement. Fiverr peut se le permettre parce qu'il
   VEND ; ici la navigation par métier EST le produit, donc tout doit être
   visible. Elle passe simplement à la ligne sur les petits écrans. */
.barre-categories { background: var(--surface); border-bottom: var(--filet) solid var(--trait); }
.barre-categories ul {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0; min-height: 41px;
}
.barre-categories li { padding: 0 10px; }
.barre-categories li:first-child { padding-left: 0; }
.barre-categories a {
  display: inline-block; padding: 8px 0;
  font-size: var(--t-m); font-weight: 400; color: var(--gris); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.barre-categories a:hover { color: var(--encre); border-bottom-color: var(--encre); }
/* Elle défile avec la page : l'en-tête collant garde la marque et le menu,
   pas la totalité de la navigation. */
@media (max-width: 640px) { .barre-categories { display: none; } }

/* --- LE HERO ---------------------------------------------------------------
   L'accueil ouvrait sur un titre seul et une moitié droite VIDE. Un hero doit
   dire en un écran ce que le site fait de particulier : ici, une photo de
   travail réel et, posée dessus, la bande horaire d'un métier. C'est la seule
   information que ce site donne et qu'aucun autre site d'emploi n'affiche, donc
   c'est elle qui doit ouvrir.
   Fond très pâle, jamais saturé : la couleur reste sur les boutons. */
.hero { background: var(--clair); border-bottom: var(--filet) solid var(--trait); }
.hero-grille { display: grid; gap: 2rem; padding-block: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding-block: 4rem; }
}
/* LE TIC TYPOGRAPHIQUE, et c'est le levier anti-générique le moins cher qui existe.
   Fiverr pose son titre de hero à 72 px en graisse 280 avec un interlettrage de
   -0,06 em, contre 18 px en graisse 700 sur ses cartes. C'est ce contraste
   extrême taille/graisse qui signe la page, pas la couleur.
   Ici : grand, LÉGER (500 et non 700), et resserré. Atkinson n'a que deux
   graisses, donc on descend à 400 sur les très grandes tailles où le gras
   deviendrait lourd. */
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 14ch;
}
.hero .chapo { margin-top: 1.1rem; }

/* --- LE CARROUSEL DU HERO --------------------------------------------------
   Il fait défiler cinq métiers, chacun avec sa photo et sa réglette horaire.
   L'intérêt n'est pas le mouvement, c'est de montrer la signature du site sur
   plusieurs exemples au lieu d'un.

   Les diapositives sont EMPILÉES dans une seule cellule de grille : la hauteur
   du bloc est celle de la plus haute, elle ne change jamais d'une diapositive à
   l'autre, et la page ne saute donc pas. C'est ce qui distingue un carrousel
   propre d'un carrousel qui fait sursauter la page à chaque passage.

   Sans JavaScript, la première diapositive s'affiche et les commandes restent
   masquées : on ne montre pas des boutons qui ne feraient rien. */
.carrousel { position: relative; }
.carrousel-piste { display: grid; }
.diapo {
  grid-area: 1 / 1; min-width: 0;
  transition: opacity .35s;
}
.diapo[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .diapo { transition: none; } }

.diapo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: var(--filet) solid var(--trait); border-radius: var(--r-bloc);
}
.hero-fiche {
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-bloc); padding: .8rem .9rem;
  margin: -3.25rem 1rem 0; position: relative;
}
@media (min-width: 900px) { .hero-fiche { margin: -3.5rem 1.5rem 0 -1.5rem; } }
.hero-fiche .surtitre { margin-bottom: .15rem; }
.hero-fiche strong { display: block; font-size: var(--t-l); margin-bottom: .4rem; }
.hero-fiche strong a { color: var(--encre); text-decoration: none; }
.hero-fiche strong a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hero-fiche .horaire { margin-top: 0; }

/* Commandes : deux flèches et des points. Assez grandes pour le pouce (44 px). */
.carrousel-cmd { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; justify-content: center; }
.carrousel-cmd button {
  min-width: 44px; min-height: 44px; cursor: pointer;
  background: var(--surface); color: var(--encre);
  border: var(--filet) solid var(--trait); border-radius: var(--r-rond);
  font-family: inherit; font-size: var(--t-m); line-height: 1;
  transition: border-color .15s, background-color .15s;
}
.carrousel-cmd button:hover { border-color: var(--encre); }
.carrousel-points { display: flex; gap: .35rem; }
.carrousel-points button {
  min-width: 12px; min-height: 12px; width: 12px; height: 12px; padding: 0;
  border-radius: var(--r-rond); background: var(--trait); border: 0;
}
.carrousel-points button[aria-current="true"] { background: var(--vert-fond); }
/* La cible tactile reste de 44 px alors que le point n'en fait que 12. */
.carrousel-points button::after { content: ""; position: absolute; inset: -16px; }
.carrousel-points { position: relative; }
.carrousel-points button { position: relative; }

/* --- LA BARRE DE RECHERCHE -------------------------------------------------
   Fiverr et Indeed ouvrent tous deux sur une barre de recherche : c'est la porte
   d'entrée d'un site qu'on vient consulter avec une question en tête, pas lire
   du haut vers le bas. Elle est ARRONDIE et pleine largeur, c'est leur signature
   commune, et c'est le seul endroit où l'on s'autorise un grand rayon.
   ⚠️ Elle cherche vraiment : l'index des 48 pages est embarqué dans la page. Une
   barre décorative qui ne trouve rien serait pire que pas de barre du tout. */
.recherche { position: relative; margin-top: 1.75rem; max-width: 42rem; }
.recherche-champ {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 2px solid var(--encre);
  /* Rayon 12 et non 100 : le champ en gelule est LE defaut de tous les sites
     d'emploi. Fiverr pose un rectangle de 60 px a peine adouci, avec un bouton
     carre encastre dedans, et c'est ce qui le rend reconnaissable. */
  border-radius: 12px; padding: .35rem .35rem .35rem 1.1rem; min-height: 60px;
}
.recherche input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--t-m); color: var(--encre);
  min-height: 44px; min-width: 0;
}
.recherche input::placeholder { color: var(--gris); }
.recherche button {
  border: 0; cursor: pointer; border-radius: var(--r-controle);
  background: var(--vert-fond); color: var(--encre);
  font-family: inherit; font-weight: 700; font-size: var(--t-m);
  padding: .65rem 1.4rem; min-height: 48px;
  transition: background-color .15s;
}
.recherche button:hover { background: var(--vert-fond-survol); }

.recherche-resultats {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem); z-index: 20;
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-bloc); overflow: hidden; list-style: none; margin: 0; padding: 0;
}
.recherche-resultats li { border-top: var(--filet) solid var(--trait); }
.recherche-resultats li:first-child { border-top: 0; }
.recherche-resultats a { display: block; padding: .65rem 1rem; text-decoration: none; color: var(--encre); }
.recherche-resultats a:hover, .recherche-resultats a:focus { background: var(--clair); }
.recherche-resultats .ou { display: block; font-size: var(--t-xs); color: var(--gris); margin-top: .1rem; }
.recherche-vide { padding: .8rem 1rem; font-size: var(--t-s); color: var(--gris); }

/* Raccourcis sous la barre : les recherches les plus probables, en un clic.
   C'est la rangée de puces que Fiverr et Indeed placent au même endroit. */
.raccourcis { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding: 0; list-style: none; align-items: baseline; }
.raccourcis .intro { font-size: var(--t-s); color: var(--gris); margin-right: .2rem; }
.raccourcis a {
  display: inline-block; font-size: var(--t-s); text-decoration: none;
  color: var(--encre); background: var(--surface);
  border: var(--filet) solid var(--trait); border-radius: var(--r-rond); padding: .3rem .75rem;
  transition: border-color .15s, background-color .15s;
}
.raccourcis a:hover { border-color: var(--action); background: var(--clair); }

/* --- tuiles de secteur : le pavé de catégories, autre marque de fabrique
   des deux références. Elles disent en un écran l'étendue du site. */
.secteurs { display: grid; gap: .75rem; margin-top: 1.5rem; padding: 0; list-style: none; }
@media (min-width: 620px) { .secteurs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .secteurs { grid-template-columns: repeat(4, 1fr); } }
.secteurs a {
  display: block; height: 100%; text-decoration: none; color: var(--encre);
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-bloc); padding: 1rem;
  transition: border-color .15s;
}
.secteurs a:hover { border-color: var(--action); }
.secteurs strong { display: block; font-size: var(--t-m); }
.secteurs span { display: block; font-size: var(--t-s); color: var(--gris); margin-top: .2rem; }
.secteurs .compte { font-weight: 700; color: var(--action); }

/* Les repères sous le hero : des faits, pas des arguments de vente. */
.hero-chiffres { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.hero-chiffres li {
  font-size: var(--t-s); background: var(--surface);
  border: var(--filet) solid var(--trait); border-radius: var(--r-rond); padding: .3rem .75rem;
}
.hero-chiffres b { font-weight: 700; }

/* --- tête de page : plus de grand aplat de couleur ------------------------- */
.entete { background: var(--surface); border-bottom: var(--filet) solid var(--trait); padding: 2rem 0; }
@media (min-width: 768px) { .entete { padding: 3rem 0; } }
.entete h1 { max-width: 20ch; }
.entete .chapo { margin-top: .75rem; }
.appui { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }

/* --- boutons : deux, pas cinq --------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .6rem 1.15rem; border-radius: var(--r); text-decoration: none;
  font-weight: 700; font-size: var(--t-m); border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton-plein { background: var(--vert-fond); color: var(--encre); }
.bouton-plein:hover { background: var(--vert-fond-survol); }
.bouton-bord { border-color: var(--trait); color: var(--encre); background: var(--surface); }
.bouton-bord:hover { border-color: var(--encre); }

/* --- LA fiche. bordure, pas d'ombre, pas de translation au survol ---------- */
.fiche {
  position: relative;
  background: var(--surface);
  border: var(--filet) solid var(--trait);
  border-radius: var(--r-bloc);
  padding: 1.1rem;
  transition: border-color .15s;
}
.fiche:hover { border-color: #A9B4BE; }

/* La fiche entière est cliquable par un pseudo-élément sur le lien du titre :
   un seul lien dans le DOM, zone de clic maximale, aucun div cliquable. */
.fiche h3 { margin: 0; font-size: var(--t-l); }
.fiche h3 a { color: var(--encre); text-decoration: none; }
.fiche h3 a::after { content: ""; position: absolute; inset: 0; }
.fiche h3 a:hover { text-decoration: underline; text-underline-offset: 2px; }
.fiche p { margin: .35rem 0 0; font-size: var(--t-s); color: var(--gris); }

.liste { display: grid; gap: .75rem; margin-top: 1.5rem; padding: 0; list-style: none; }
@media (min-width: 680px) { .liste-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .liste-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- LE RAIL HORIZONTAL ---------------------------------------------------
   Le troisième geste commun aux deux références : une rangée qui déborde
   volontairement du bord de l'écran. La grille dit « voilà tout » ; le rail dit
   « il y en a d'autres ». Sur vingt articles, c'est la vérité.

   Défilement natif, aucun JavaScript : `scroll-snap` fait le travail que des
   milliers de lignes de bibliothèque font moins bien, et ça marche au doigt, à la
   molette, au clavier et sans script. Les flèches sont en trop ici, la barre de
   défilement suffit et elle est comprise de tout le monde.

   Le `padding` + `margin` négatif fait passer les cartes sous le bord du conteneur :
   sans ça, la dernière carte s'arrêterait pile au bord et le rail aurait l'air d'une
   grille tronquée plutôt que d'une suite. */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 78vw);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 var(--gouttiere) 1rem; margin: 1.5rem calc(-1 * var(--gouttiere)) 0;
  scrollbar-width: thin;
}
.rail > .fiche { scroll-snap-align: start; }
@media (min-width: 620px) { .rail { grid-auto-columns: minmax(240px, 46%); } }
@media (min-width: 900px) { .rail { grid-auto-columns: minmax(240px, 30%); } }
@media (min-width: 1200px) { .rail { grid-auto-columns: minmax(240px, 23.5%); } }
/* Le rail se pousse tout seul jusqu'au bord de la fenêtre sur mobile, où le
   conteneur a déjà sa gouttière. */
@media (min-width: 1330px) { .rail { padding-left: 0; margin-left: 0; } }

/* --- photos ---------------------------------------------------------------
   `aspect-ratio` + `width/height` explicites dans le HTML : la place est réservée AVANT
   que l'image n'arrive, donc la page ne saute pas au chargement. C'est le défaut qui a
   produit un CLS de 0,998 sur un autre site du réseau.
   Pas d'ombre, pas d'arrondi large : une photo se pose, elle ne flotte pas. */
.couverture {
  margin: 0 0 1.5rem;
  border: var(--filet) solid var(--trait);
  border-radius: var(--r-bloc);
  overflow: hidden;
  background: var(--pastille);
}
.couverture img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }
.couverture figcaption { font-size: var(--t-xs); color: var(--gris); padding: .5rem .75rem; border-top: var(--filet) solid var(--trait); background: var(--surface); }

/* Vignette de fiche, POSÉE SOUS LE TITRE (cf. carte() dans cmonjob-gen.mjs).
   Elle déborde du padding latéral pour toucher les deux bordures : la carte reste
   une carte, pas une photo avec une légende. */
.fiche .vignette {
  display: block; margin: .75rem -1rem 0;
  border-top: var(--filet) solid var(--trait);
  border-bottom: var(--filet) solid var(--trait);
  background: var(--pastille);
}
.fiche .vignette img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
/* Le résumé qui suit la photo a besoin de reprendre son air. */
.fiche .vignette + p { margin-top: .75rem; }

/* --- pastilles : c'est ELLES qui portent la hiérarchie, pas la taille du texte
   gris = factuel · vif = ce qui décide (horaires, tension) ------------------ */
.pastille {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  padding: .2rem .5rem; border-radius: var(--r-rond);
  background: var(--pastille); color: var(--gris);
}
.pastille-vive { background: var(--vif); color: var(--encre); }
.pastilles { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }

/* --- L'ÉLÉMENT SIGNATURE : la bande horaire 24 h --------------------------
   Allégée : plus fine, sans animation, sans hachures. C'est une donnée, elle
   doit se lire, pas s'admirer. Elle reste la seule chose que ce site dit et
   qu'aucun autre site d'emploi n'affiche. */
.horaire { margin: .6rem 0 0; }
.horaire-piste {
  position: relative; height: 14px; border-radius: 2px;
  background: var(--pastille); border: var(--filet) solid var(--trait); overflow: hidden;
}
/* Les plages étaient en encre anthracite : la réglette formait un gros barreau noir en
   travers de la page, exactement l'effet sombre dont on ne voulait plus. Elles passent au
   VERT, la couleur d'action du site, et le code se lit tout seul :
     vert        = on travaille
     vert foncé  = on travaille de nuit
     et une coupure ne se dessine pas : c'est le VIDE entre deux plages */
/* UN SEUL TON, et c'est une simplification voulue. Il y avait un vert foncé pour la nuit :
   c'est ce qui rendait la réglette sombre, et c'était REDONDANT. Un segment placé entre
   21 h et 5 h EST la nuit : l'axe 0-24 le dit déjà, et la légende sous la piste le nomme.
   Une distinction que la position exprime déjà n'a pas besoin d'une seconde couleur. */
.horaire-plage { position: absolute; top: 0; bottom: 0; background: var(--vert-fond); }
.horaire-legende {
  display: flex; justify-content: space-between; margin-top: .25rem;
  font-size: var(--t-xs); color: var(--gris); font-variant-numeric: tabular-nums;
}
.horaire-mots { margin-top: .3rem; font-size: var(--t-xs); color: var(--gris); }

/* --- sections ------------------------------------------------------------- */
.section { padding-block: 2.5rem; }   /* ⚠️ padding-block et non padding : voir plus bas */
@media (min-width: 768px) { .section { padding-block: 3.5rem; } }
.section-blanche { background: var(--surface); border-top: var(--filet) solid var(--trait); border-bottom: var(--filet) solid var(--trait); }
.tete-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tete-section a { font-size: var(--t-s); }

/* --- corps d'article ------------------------------------------------------ */
.corps { max-width: 68ch; }
.corps h2 { margin-top: 2.25rem; }
.corps ul, .corps ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.corps li { margin-bottom: .35rem; }
.corps a { text-underline-offset: 2px; }

.encadre {
  border: var(--filet) solid var(--trait); border-left: 3px solid var(--vif);
  background: var(--surface); border-radius: 0 var(--r) var(--r) 0;
  padding: .9rem 1rem; margin: 1.5rem 0;
}
.encadre p:last-child { margin-bottom: 0; }

details.faq { border-bottom: var(--filet) solid var(--trait); padding: .8rem 0; }
details.faq summary { cursor: pointer; font-weight: 700; font-size: var(--t-m); list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; float: right; color: var(--gris); font-weight: 400; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: .6rem 0 0; }

/* --- repères d'une fiche métier ------------------------------------------- */
.reperes {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--trait);
  border: var(--filet) solid var(--trait); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 620px) { .reperes { grid-template-columns: repeat(2, 1fr); } }
.reperes li { background: var(--surface); padding: .85rem 1rem; }
.reperes .valeur { font-weight: 700; font-size: var(--t-m); }

/* --- offres et formations ------------------------------------------------- */
.offres { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.offre { position: relative; background: var(--surface); border: var(--filet) solid var(--trait); border-radius: var(--r-bloc); padding: .9rem 1rem; }
.offre h3 { margin: 0; font-size: var(--t-l); }
.offre h3 a { color: var(--encre); text-decoration: none; }
.offre h3 a::after { content: ""; position: absolute; inset: 0; }
.offre h3 a:hover { text-decoration: underline; }
.offre p { margin: .3rem 0 0; font-size: var(--t-s); color: var(--gris); }
.source { margin-top: .6rem; font-size: var(--t-xs); color: var(--gris); }

/* --- signature d'auteur : Google demande une paternité claire sur du YMYL -- */
.auteur { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-top: .75rem; font-size: var(--t-s); color: var(--gris); }
.auteur strong { color: var(--encre); }

/* --- pied de page --------------------------------------------------------- */
.pied { background: var(--surface); border-top: var(--filet) solid var(--trait); padding: 2.5rem 0 1.5rem; margin-top: 3rem; font-size: var(--t-s); color: var(--gris); }
.pied a { color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.pied-colonnes { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pied-colonnes { grid-template-columns: 1.6fr 1fr 1fr; } }
.pied h2 { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--encre); margin: 0 0 .6rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .3rem; }
.pied-bas { margin-top: 2rem; padding-top: 1rem; border-top: var(--filet) solid var(--trait); font-size: var(--t-xs); }

/* --- accessibilité -------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--encre); color: var(--surface); padding: .6rem 1rem; border-radius: var(--r); }
.fil { font-size: var(--t-s); color: var(--gris); padding-top: .75rem; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* --- LE SOMMAIRE ----------------------------------------------------------
   Numéroté, et pour une fois la numérotation dit quelque chose de vrai : les
   sections d'une fiche se lisent DANS L'ORDRE (ce qu'on fait, comment y entrer,
   ce qu'on gagne, à quelles heures). Ce n'est pas un ornement, c'est la trame.
   Google y puise parfois des liens de section dans ses résultats. */
.sommaire {
  margin: 1.75rem 0; padding: 1rem 1.15rem;
  background: var(--clair); border: var(--filet) solid var(--trait);
  border-radius: var(--r-surface);
}
.sommaire-titre {
  margin: 0 0 .5rem; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gris);
}
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sommaire li { counter-increment: s; display: flex; gap: .6rem; padding: .28rem 0; }
.sommaire li::before {
  content: counter(s, decimal-leading-zero);
  font-variant-numeric: tabular-nums; font-size: var(--t-xs); font-weight: 700;
  color: var(--gris); padding-top: .18rem; flex: none;
}
.sommaire a { color: var(--encre); text-decoration: none; border-bottom: var(--filet) solid transparent; }
.sommaire a:hover, .sommaire a:focus { border-bottom-color: var(--encre); }

/* --- « SUR LE MÊME SUJET » ------------------------------------------------
   Chaque lien DIT POURQUOI il est là. C'est ce que ne font ni Fiverr, ni Indeed,
   ni la quasi-totalité des blocs « articles liés » du web, qui alignent des titres
   sans justifier la parenté. Ici la raison est calculée (même secteur, même rythme,
   métier cité dans l'article), donc elle est vraie et elle vaut la place qu'elle prend. */
.connexes { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--encre); }
.connexes h2 { margin: 0 0 1rem; font-size: var(--t-l); }
.connexes ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .connexes ul { grid-template-columns: repeat(2, 1fr); } }
/* La CARTE porte la boîte ; le LIEN ne porte que le titre. L'ancre reste ainsi un
   intitulé propre au lieu d'avaler l'étiquette et la justification. La surface ::after
   rend toute la carte cliquable, sans changer le texte du lien. */
.connexes .connexe {
  position: relative; padding: .85rem 1rem;
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-surface);
  transition: border-color .15s, background-color .15s;
}
.connexes .connexe:hover, .connexes .connexe:focus-within { border-color: var(--encre); background: var(--clair); }
.connexes .connexe-titre a { color: var(--encre); text-decoration: none; }
.connexes .connexe-titre a::after { content: ""; position: absolute; inset: 0; }
.connexes .connexe-titre a:hover { text-decoration: underline; }
.connexe-quoi {
  display: block; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris);
}
.connexe-titre { display: block; font-weight: 700; margin-top: .15rem; }
.connexe-pourquoi { display: block; font-size: var(--t-s); color: var(--gris); margin-top: .2rem; }

/* --- LE COMPARATEUR -------------------------------------------------------
   Trois colonnes qui se lisent en parallèle. La réglette est posée HAUT dans chaque
   colonne, avant les faits : c'est elle qu'on vient comparer, le reste explique. */
.comp-choix-rang { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
@media (min-width: 700px) { .comp-choix-rang { grid-template-columns: repeat(3, 1fr); } }
.comp-choix { display: flex; flex-direction: column; gap: .3rem; }
.comp-choix > span {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gris);
}
.comp-choix select {
  font-family: inherit; font-size: var(--t-m); color: var(--encre);
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-controle); padding: .6rem .7rem; min-height: 44px;
}
.comp-choix select:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

.comp-grille { display: grid; gap: .75rem; align-items: start; }
@media (min-width: 700px) { .comp-grille { grid-template-columns: repeat(3, 1fr); } }
.comp-col {
  background: var(--surface); border: var(--filet) solid var(--trait);
  border-radius: var(--r-surface); padding: 1.15rem;
}
.comp-col h2 { margin: .1rem 0 .9rem; font-size: var(--t-l); }
.comp-col h2 a { color: var(--encre); text-decoration: none; }
.comp-col h2 a:hover { text-decoration: underline; }
/* Les faits en <dl> : c'est une liste de définitions, et c'en est vraiment une.
   L'étiquette au-dessus de la valeur, pour que les trois colonnes s'alignent
   ligne à ligne même quand un texte est plus long que ses voisins. */
.comp-faits { margin: 1rem 0 0; }
.comp-faits dt {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gris); margin-top: .8rem;
}
.comp-faits dd { margin: .15rem 0 0; font-size: var(--t-s); }
.comp-note { margin-top: 1rem; font-size: var(--t-s); color: var(--gris); }

/* Alignement LIGNE À LIGNE des colonnes du comparateur.
   Sans ça, « Tension » se retrouve à trois hauteurs différentes selon la longueur du
   texte au-dessus, et l'œil ne peut plus comparer horizontalement : c'est pourtant
   toute la raison d'être de la page.
   `subgrid` fait porter aux colonnes les rangées de la grille parente. Le `display:
   contents` sur la liste de définitions la fait disparaître de la mise en page pour que
   ses dt/dd deviennent des rangées de plein droit.
   Sous @supports : les navigateurs sans subgrid gardent le rendu en cartes indépendantes,
   qui reste lisible. On n'impose pas une dégradation à tous pour un alignement. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .comp-grille { grid-template-rows: auto auto auto repeat(8, auto); }
    .comp-col { display: grid; grid-row: span 11; grid-template-rows: subgrid; gap: 0; }
    .comp-faits { display: contents; }
    /* La marge qui espaçait les faits ne peut plus vivre sur la liste : elle passe
       sur les étiquettes, qui sont désormais les rangées. */
    .comp-col .horaire { margin-bottom: .6rem; }
  }
}

/* --- LES OFFRES -----------------------------------------------------------
   Une annonce n'a PAS d'image : pas de vignette, pas de cadre gris vide qui ferait
   croire à une panne. C'est la discipline d'Indeed, et ici elle est justifiée par les
   données, pas copiée : le flux ne fournit aucune illustration. */
.offre-carte { display: flex; flex-direction: column; }
.offre-carte h3 { margin: 0; font-size: var(--t-m); }
.offre-carte .donnee { margin: .25rem 0 0; font-size: var(--t-s); color: var(--gris); }
.offre-carte .pastilles { margin-top: .5rem; }
.offre-quand { margin: .6rem 0 0; font-size: var(--t-xs); color: var(--gris); }

/* Le texte de l'annonce vient d'un tiers : il peut contenir des lignes très longues,
   des majuscules partout, des listes mal formées. On le contient au lieu de le
   laisser casser la mise en page. */
.offre-texte { overflow-wrap: anywhere; }
.offre-texte p { margin: .6rem 0; }

.offre-postuler { margin: 1.5rem 0 .4rem; }
/* Le seul bouton plein de la page : ce qu'on est venu faire. Tout le reste est du texte. */
.offre-postuler .bouton { font-size: var(--t-m); padding: .8rem 1.5rem; }

/* --- L'ENCART -------------------------------------------------------------
   Il interrompt la lecture, donc il doit le mériter : il n'apparaît que quand des postes
   sont réellement ouverts (cf. encartOffres dans le générateur). Voile vert clair et
   filet à gauche : on voit tout de suite que c'est un aparté, pas la suite du texte. */
.encart {
  margin: 1.75rem 0;
  padding: 1rem 1.15rem;
  background: var(--clair);
  border: var(--filet) solid var(--trait);
  border-left: 3px solid var(--vert-fond);
  border-radius: var(--r-surface);
}
.encart-eyebrow {
  margin: 0; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gris);
}
/* H2 par sémantique (l'encart est une section nommée), mais pas par la taille : il ne
   doit pas concurrencer les titres du texte qui l'entoure. */
.encart-titre { margin: .3rem 0 .7rem; font-size: var(--t-l); }
.encart-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.encart-liste li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.encart-liste a { font-weight: 700; }
.encart-note { margin: .8rem 0 0; font-size: var(--t-xs); color: var(--gris); }

/* Second encart : les conditions de travail officielles. Filet gris et non vert, pour
   qu'on distingue au premier coup d'œil l'encart d'OFFRES (une action possible) de
   l'encart de CONDITIONS (une information à connaître avant de postuler). */
.encart-contexte { border-left-color: var(--gris); background: var(--pastille); }
.encart-contexte .encart-liste li { display: list-item; margin-left: 1.1rem; }
.encart-contexte .encart-liste { list-style: disc; display: block; }
.encart-contexte .encart-liste li + li { margin-top: .3rem; }

/* --- TUILES DE SECTEUR AVEC PHOTO -----------------------------------------
   La photo est au-dessus, le texte en dessous : on reconnaît un secteur à sa scène
   avant son libellé. `aspect-ratio` fixe réserve la place, donc aucun décalage. */
.secteurs a { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.secteur-photo { display: block; background: var(--pastille); border-bottom: var(--filet) solid var(--trait); }
.secteur-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .4s ease; }
.secteurs a:hover .secteur-photo img { transform: scale(1.04); }
.secteur-texte { display: block; padding: 1rem; }

/* --- LA BANDE VIDÉO -------------------------------------------------------
   Pleine largeur, hauteur bornée. Le voile n'est PAS là pour assombrir la page mais pour
   garantir le contraste du texte quelle que soit l'image qui passe dessous. */
.bande-video { position: relative; overflow: hidden; background: var(--encre); }
.bande-video-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.bande-video-voile {
  position: absolute; inset: 0;
  /* Un aplat, pas un dégradé : le dégradé est l'un des tics visuels qu'on s'interdit ici. */
  background: rgba(28, 33, 38, .62);
}
.bande-video-texte {
  position: relative;
  padding-block: 3.5rem;
  color: #fff;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: center;
}
/* ⚠️ Le seul endroit du site où du texte blanc est posé sur un fond sombre. Le voile à
   0,62 sur l'encre donne un fond effectif proche de #3B4045 : blanc dessus = 9,2:1.
   Mesuré, pas supposé. */
.bande-video-texte .surtitre { color: #C8CDD1; }
.bande-video-texte h2 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.25rem); max-width: 18ch; }
.bande-video-texte p { color: #E6E9EB; max-width: 52ch; margin-top: .75rem; }
@media (min-width: 768px) { .bande-video-texte { padding-block: 5rem; min-height: 380px; } }

/* --- APPARITION AU DÉFILEMENT ---------------------------------------------
   Discrète et courte : 8 px de translation, 400 ms. Une animation qu'on remarque est une
   animation qui gêne, surtout sur un site qu'on consulte pour trouver du travail.
   Le déclenchement est en JavaScript : sans script, tout est visible d'emblée (l'état par
   défaut est `opacity: 1`), donc aucun contenu ne peut disparaître. */
.paraitre { opacity: 1; }
.js-anim .paraitre { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.js-anim .paraitre.vu { opacity: 1; transform: none; }

/* ⛔ COUPURE NETTE. Un mouvement peut déclencher nausées et vertiges chez une partie des
   visiteurs, et le réglage système existe pour ça : on le respecte sans compromis.
   La vidéo n'est même pas chargée (voir le script du générateur), et rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .paraitre, .js-anim .paraitre.vu { opacity: 1; transform: none; transition: none; }
  .secteurs a:hover .secteur-photo img { transform: none; }
  .bande-video-media { display: none; }
}