/* ==========================================================================
   JOBUNT — Composants
   ========================================================================== */

/* ================================================================ HERO === */
/* Le titre occupe seul la hauteur de l'image, centré dedans. */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  padding-block:118px var(--s-7);
}
.hero__main{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center}
@media(max-width:860px){.hero{min-height:0;padding-block:120px var(--s-7)}}

/* ============================================================== NAVBAR ===
   Deux états, même blanc. Collée : barre pleine largeur, à plat, fine.
   Détachée : le même blanc en verre, resserré en pilule.

   La barre NE BOUGE JAMAIS (`top:0` dans les deux états). Le décollement
   vient d'un padding-top qui pousse la pilule vers le bas — sans ça, on
   voyait le fond blanc de la barre glisser vers le bas avant de disparaître.
   Le fond blanc vit dans un ::before qui se fond en 220 ms, pendant que la
   forme, elle, met 520 ms : le fondu est terminé avant que le mouvement se
   remarque. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:68px;display:flex;align-items:center;
  padding:0 var(--pad);
  transition:height var(--d-nav) var(--ease-nav),
             padding var(--d-nav) var(--ease-nav);
}
.nav::before{
  content:"";position:absolute;inset:0;
  background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--line);
  transition:opacity 220ms linear;
  pointer-events:none;
}
.nav.scrolled{height:74px;padding-top:14px}
.nav.scrolled::before{opacity:0}

.nav__in{
  position:relative;
  width:100%;max-width:var(--container);margin-inline:auto;height:100%;
  display:flex;align-items:center;gap:var(--s-6);
  color:var(--ink);
  padding-inline:0;
  border:1px solid transparent;border-radius:var(--r-pill);
  transition:max-width var(--d-nav) var(--ease-nav),
             padding var(--d-nav) var(--ease-nav),
             gap var(--d-nav) var(--ease-nav),
             background-color 240ms linear,
             border-color 240ms linear,
             box-shadow 240ms linear;
}
/* La pilule doit contenir logo + 5 liens + le bouton de langue + « Se
   connecter » + l'appel à l'action : ~1 050 px en français (le plus long).
   À 1 000 px, « Commencer gratuitement » en sortait (11/10) ; elle prend
   désormais la largeur du contenu de la page. */
.nav.scrolled .nav__in{
  max-width:1120px;gap:var(--s-5);
  padding-inline:30px 14px;
  background:var(--verre);
  border-color:var(--verre-bord);
  box-shadow:0 1px 2px rgba(16,22,28,.05), 0 16px 44px rgba(16,22,28,.15);
}
/* Le flou de la pilule est porté par une couche dessous (18/10) : posé sur
   .nav__in, il en faisait une « racine de fond », et le menu Outils, flouté
   lui aussi, ne voyait plus la page derrière lui. Rendu identique. */
.nav__in::before{
  content:"";position:absolute;inset:-1px -1px calc(-1px - var(--navmenu-h,0px)) -1px;z-index:-1;
  border-radius:inherit;pointer-events:none;clip-path:var(--navmenu-clip,none);
  transition:-webkit-backdrop-filter 240ms linear,backdrop-filter 240ms linear;
}
.nav.scrolled .nav__in::before{
  -webkit-backdrop-filter:saturate(1.9) blur(22px);
  backdrop-filter:saturate(1.9) blur(22px);
}
/* Menu Outils ouvert (js/page.js pose .is-menu et la forme) : la couche
   descend sous le panneau, découpée à la forme pilule + panneau. Un seul
   flou pour les deux, donc une seule teinte à la jonction. */
.nav__in.is-menu::before{border-radius:0}

.logo{height:18px;width:auto;color:inherit;flex:none}
.nav__brand{display:flex;align-items:center;flex:none}
.nav__brand .logo{height:22px}
.nav__links{display:flex;gap:var(--s-5);white-space:nowrap;margin-inline:auto;transition:gap var(--d-nav) var(--ease-nav)}
.nav.scrolled .nav__links{gap:20px}
/* « Postuler à une URL » marche sans compte : le lien est souligné du
   dégradé du système, comme l'onglet actif de la barre de l'application. */
/* Mis à l'écart des ancres de la page : c'est un outil, pas une section. */
.nav__links .nav__url{position:relative;color:var(--ink);margin-left:var(--s-5)}
.nav__links .nav__url::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  border-radius:2px;background:var(--grad);
}
.nav__links a{font-size:13.5px;color:var(--grey);transition:color var(--d1) var(--ease)}
.nav__links a:hover{color:var(--ink)}
/* Le menu « Outils » (18/10, demande de Landry) : Analyse de CV, Postuler
   avec un lien et Guides, rangés sous un seul onglet. Le panneau est celui
   du menu des langues : les noms seuls. Ouvert au survol (ici) et au clic
   ou au clavier (js/page.js). */
/* Le panneau part du bord bas de la barre : placé par rapport à .nav__in
   (top), par-dessus le trait du bas de la barre, sans bordure ni ombre
   vers le haut : il en prolonge le fond ; à l'horizontale, left:auto le
   laisse là où il serait sans positionnement, sous le bord gauche de
   « Outils ». */
.navmenu{margin-left:var(--s-5)}
.navmenu__b{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink)}
.navmenu__b .sym{width:14px;height:14px;transition:transform var(--d1) var(--ease)}
.navmenu__m{position:absolute;left:auto;top:100%;z-index:60;display:grid;min-width:200px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm);box-shadow:0 20px 28px -8px rgba(21,23,26,.14);
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--d1) var(--ease),transform var(--d1) var(--ease),visibility 0s linear var(--d1)}
/* Le pont entre l'onglet et le panneau (le bas de la barre) : la souris
   qui descend ne quitte pas le survol. */
.navmenu__m::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.navmenu:hover .navmenu__m,.navmenu.is-open .navmenu__m{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Barre détachée : le panneau prend le même verre qu'elle. Le flou vient
   de la couche de la pilule (.is-menu) ; le sien ne sert que sans script. */
.nav.scrolled .navmenu__m{top:calc(100% + 1px);background:var(--verre);border-color:var(--verre-bord);box-shadow:0 26px 40px -14px rgba(16,22,28,.2)}
.nav.scrolled .nav__in:not(.is-menu) .navmenu__m{-webkit-backdrop-filter:saturate(1.9) blur(22px);backdrop-filter:saturate(1.9) blur(22px)}
.navmenu:hover .navmenu__b .sym,.navmenu.is-open .navmenu__b .sym{transform:rotate(180deg)}
/* Menu ouvert sur la barre détachée : la pilule et le panneau ne forment
   qu'un bloc. L'ombre de la pilule passerait sous le panneau : elle
   s'efface le temps que le menu est ouvert. */
.nav.scrolled .nav__in.is-menu{box-shadow:none;border-color:transparent}
/* Le contour du bloc : la bordure de la pilule et celle du panneau
   deviennent un seul trait qui fait le tour de la forme (tracé par
   js/page.js), sans ligne à la jonction. */
.nav.scrolled .nav__in.is-menu .navmenu__m{border-color:transparent}
.nav__in::after{content:"";position:absolute;inset:-1px -1px calc(-1px - var(--navmenu-h,0px)) -1px;z-index:61;pointer-events:none;
  background:no-repeat 0 0/100% 100%}
.nav.scrolled .nav__in.is-menu::after{background-image:var(--navmenu-trait,none)}
.nav__links .navmenu__m a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.nav__links .navmenu__m a:hover,.nav__links .navmenu__m a:focus-visible{background:var(--surface-3);color:var(--ink)}
.nav__links .navmenu__m a[aria-current]{color:var(--ink);font-weight:500}
.nav__end{display:flex;align-items:center;gap:20px;flex:none;margin-left:auto}
.nav__login{font-size:13.5px;color:var(--grey);white-space:nowrap}
.nav__login:hover{color:var(--ink)}
.nav .btn--sm{height:36px}
@media(max-width:1180px){.nav__links{display:none}}
/* « Commencer gratuitement » : le bouton espace ses morceaux de 8 px, soit
   deux espaces à cette taille. Ici ce n'est que du texte : un espace suffit. */
.btn .nav__plus{margin-left:calc(.28em - 8px)}
@media(max-width:520px){
  .nav__login{display:none}.nav__in{gap:var(--s-4)}
  /* Sur téléphone, « Commencer » seul : avec « gratuitement » et le bouton de
     langue, la barre débordait de l'écran en français. */
  .nav__plus{display:none}
  .nav__end{gap:10px}
  .nav.scrolled .nav__in{padding-inline:18px 10px}
}

/* ============================================================= BOUTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 24px;
  border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);
  font-size:14.5px;font-weight:500;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--d1) var(--ease),transform var(--d1) var(--ease),
             box-shadow var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.btn:hover{background:#25292F;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:none}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--grey-3)}
.btn--blue{background:var(--blue)}
.btn--blue:hover{background:var(--blue-deep)}
.btn--sm{height:38px;padding:0 18px;font-size:13.5px}
.btn--block{width:100%}

/* ============================================================ SYMBOLES ===
   Gamme maison, formes arrondies : bouts et jonctions ronds, coins à 2 px,
   trait 1.6. Aucun cadre coloré — le symbole vit dans le texte. */
.sym{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sym--lg{width:26px;height:26px}
.sym--sm{width:17px;height:17px;stroke-width:1.7}
/* Symbole d'accent : le trait prend le dégradé au lieu de currentColor. */
.sym--grad{stroke:url(#g-accent)}

/* Tuile : seul endroit où le symbole reçoit un fond, dans les 4 blocs. */
/* Carré plein, l'une des deux couleurs du dégradé, symbole en fond de page
   par-dessus. C'est le seul aplat de couleur du système. */
.symtile{
  width:48px;height:48px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--blue);
  transition:background var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.symtile--alt{background:var(--salmon)}
.symtile .sym{stroke:var(--page)}
.card:hover .symtile,.feat:hover .symtile{transform:translateY(-2px)}
.card:hover .symtile{background:var(--blue-deep)}
.card:hover .symtile--alt{background:#B04F13}

/* ============================================================== CARTES === */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:26px 24px;
  transition:transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease),
             border-color var(--d2) var(--ease);
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
/* Carte numérotée : le chiffre passe du dégradé à l'orange.
   `background-image` ne s'interpole pas — on ne peut donc PAS animer la
   disparition du dégradé. On empile un second chiffre en orange, identique,
   et on fond son opacité : la bascule devient continue. */
.card__no,.step__n{position:relative}
.card__no::after,.step__n::after{
  content:attr(data-n);
  position:absolute;inset:0;
  color:var(--salmon);
  -webkit-text-fill-color:var(--salmon);
  opacity:0;
  transition:opacity var(--d2) var(--ease);
  pointer-events:none;
}
.card--hover:hover .card__no::after,
.card--hover:hover .step__n::after{opacity:1}

/* Carte sans chiffre : un lavis très léger apparaît au survol et SUIT le
   curseur — le centre du radial est piloté par --mx/--my, mis à jour au
   pointermove (voir main.js). La couleur, orange ou bleu, est tirée au sort
   au chargement : deux cartes voisines n'ont pas forcément la même. */
.wash{position:relative;isolation:isolate}
.wash::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
                             var(--wash-c) 0%, transparent 72%);
  transition:opacity var(--d2) var(--ease);
}
.wash:hover::before{opacity:1}
.wash--blue{--wash-c:rgba(80,119,140,.16)}
.wash--orange{--wash-c:rgba(205,93,25,.15)}
.card__no{
  display:block;font-size:44px;font-weight:300;line-height:1;letter-spacing:-.04em;
  margin-bottom:var(--s-2);
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card .h3{margin:0 0 8px}
/* L'icône d'une carte respire avant le titre (11/10, demande de Landry). */
.card > .symtile{margin-bottom:var(--s-4)}
.card p{margin:0;color:var(--grey);font-size:14.5px}

.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:44px;
}
@media(max-width:860px){.panel{padding:26px}}
@media(max-width:560px){.panel{padding:22px 18px}}

/* ================================================= RECHERCHE EN PHRASE ===
   Pas un formulaire : une phrase à trous. Chaque valeur est un jeton
   qu'on ouvre sur place. */
.phrase{
  font-weight:300;font-size:26px;line-height:1.65;letter-spacing:-.02em;
  color:var(--ink);
  /* La phrase ne peut pas remplir la ligne au pixel près : les jetons
     changent de longueur à chaque choix. On la centre, elle reste alors
     équilibrée quelle que soit la combinaison. */
  text-align:center;
  max-width:26ch;margin-inline:auto;
}
/* Sur écran large la phrase tient sur une seule ligne : la taille est
   calculée pour ça, pas choisie. */
@media(min-width:1100px){
  .phrase{max-width:none;white-space:nowrap;font-size:23px;line-height:1.5}
}
@media(max-width:860px){.phrase{font-size:19px;line-height:1.7}}
.tok{
  /* Aligné sur la ligne de base : les symboles (centrés à part) n'en ont
     pas, et en `center` le mot remontait au-dessus du reste de la phrase. */
  display:inline-flex;align-items:baseline;gap:6px;
  font-weight:400;
  /* Le mot choisi est écrit EN dégradé bleu -> orange (demande de Landry,
     01/10) : ni trait, ni case. Le dégradé est découpé sur les lettres ;
     `color` reste le repli des navigateurs sans background-clip:text. */
  color:var(--blue);
  background:var(--grad-texte, var(--grad));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  border:0;padding:0 2px;margin:0 1px;
  cursor:pointer;
  transition:opacity var(--d1) var(--ease);
}
.tok:hover,.tok.open{opacity:.72}
/* Le symbole devant la valeur (métier, ville, rayon) : trait en dégradé,
   à la taille de la phrase. */
.tok > .sym{width:1em;height:1em;stroke-width:2;opacity:1}

.tok svg{align-self:center;color:var(--salmon);opacity:.7;transition:transform var(--d1) var(--ease)}
.tok.open svg:not(.tok__ico){transform:rotate(180deg)}

.tokwrap{position:relative;display:inline-block}
/* Un jeton et la ponctuation qui le suit ne se séparent pas : le navigateur
   s'autorise une coupure juste après un bloc en ligne, et une ligne
   commençait par « , où . » sur téléphone. La liste déroulante, elle, garde
   ses retours à la ligne. */
.nobr{white-space:nowrap}
.nobr .tokmenu{white-space:normal}
.tokmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:20;
  min-width:230px;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
  font-size:14.5px;font-weight:400;letter-spacing:0;
}
.tokmenu[hidden]{display:none}
.tokmenu button{
  display:flex;width:100%;align-items:center;gap:10px;
  padding:9px 10px;border:0;border-radius:var(--r-xs);
  background:none;text-align:left;cursor:pointer;color:var(--ink);
}
.tokmenu button:hover{background:var(--surface-2)}
.tokmenu button[aria-selected="true"]{color:var(--blue)}

/* ============================================== APERÇU DES RÉSULTATS ===== */
.preview{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);
}
.preview__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--grey-2);
}
.co{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.co:last-child{border-bottom:0}
/* Démo de l'accueil : chaque changement de la phrase redonne la liste, ligne
   après ligne — on voit que la recherche a répondu. */
#previewList .co{animation:co-entre 320ms var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes co-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#previewList .co{animation:none}}
.co__km{width:66px;flex:none;font-weight:300;font-size:23px;letter-spacing:-.03em;line-height:1}
.co__km span{font-size:12px;color:var(--grey-2);margin-left:2px;letter-spacing:0}
/* Téléphone : la colonne des distances (66 px) et les marges laissaient
   140 px au nom de la société, coupé sur trois lignes. L'en-tête de la liste
   passe sur deux lignes au lieu de deux colonnes étroites. */
@media(max-width:560px){
  .panel .preview{margin-inline:-6px}
  .preview__head{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px}
  .co{gap:12px;padding:12px 14px}
  .co__km{width:48px;font-size:19px}
}
.co__mark{
  width:40px;height:40px;flex:none;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;
}
/* La marque en couleur : dégradé bleu -> orange propre à chaque société
   (avant le 18/10 ; ne sert plus que d'appui aux anciens appels). */
.co__mark--grad{border-color:transparent;background:var(--mk-bg,var(--grad))}
/* La marque d'une société (18/10, demande de Landry) : l'icône de son secteur
   en blanc sur le carré plein du système (.symtile), posée par
   `jobuntPoserMarque()` (symbols.js) — accueil, Sociétés, Offres, Postuler,
   fiche, pages Emploi. */
.co__mark--sect{border-color:transparent;background:var(--blue)}
.co__mark--sect .sym{stroke:#fff}
/* La lettre de la société, en capitale blanche (taille posée par le script). */
.co__ini{color:#fff;font-weight:500;line-height:1;letter-spacing:-.02em;user-select:none}
.co__main{flex:1;min-width:0}
.co__n{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.co__a{color:var(--grey-2);font-size:13px}
.co__src{font-size:12px;color:var(--grey-3);flex:none}
@media(max-width:520px){.co__src{display:none}}

/* ============================================= BANDEAU DES SOURCES ======= */
.sources{
  display:flex;align-items:center;justify-content:center;gap:var(--s-6);
  flex-wrap:wrap;padding:22px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.sources__t{font-size:13.5px;color:var(--grey);flex:1;min-width:240px}
.sources__l{display:flex;gap:var(--s-5);flex-wrap:wrap}
.sources__l span{font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em}

/* ============================================================= ÉTAPES ==== */
.step{display:grid;grid-template-columns:46px 1fr;gap:0 18px;align-items:start}
.step__n{
  display:block;margin-bottom:var(--s-3);
  font-size:44px;font-weight:300;line-height:1;letter-spacing:-.04em;
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.step__t{font-weight:500;font-size:16px;letter-spacing:-.015em;padding-top:6px}
.step p{grid-column:2;margin:8px 0 0;color:var(--grey);font-size:14.5px}

/* ====================================================== 4 BLOCS FEATURE == */
.feat{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;
  padding-block:var(--s-8);
}
@media(max-width:900px){.feat{grid-template-columns:1fr;gap:var(--s-6)}}
/* Sans min-width:0, une URL insecable elargit la colonne de grille. */
.feat>*{min-width:0}
.url{overflow-wrap:anywhere}
.feat--flip .feat__media{order:-1}
@media(max-width:900px){.feat--flip .feat__media{order:0}}
.feat__t{margin:18px 0 10px}
.feat__media{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px;min-height:320px;
  display:flex;flex-direction:column;justify-content:center;
}
@media(max-width:900px){.feat__media{min-height:240px}}

/* ============================================== FONCTIONNALITÉS ÉPINGLÉES ==
   La section ne défile pas comme les autres : on y entre, la vue se fige, et
   chaque coup de molette remplace la fonctionnalité affichée par la suivante.
   Une fois la pile parcourue, la page repart normalement.

   Mécanique, sans dépendance ni détournement de la molette :
     .featpin        haute d'un écran par fonctionnalité (--feat-n, posé par le JS)
     .featpin__stage collé en haut sur toute cette hauteur — c'est l'écran figé
     .featpin__deck  les fonctionnalités superposées dans la MÊME case de grille
   Le défilement reste donc celui du navigateur : molette, barre, clavier,
   trackpad et lecteur d'écran continuent de fonctionner comme partout. */
/* Le pas : ce qu'il faut defiler pour passer d'une fonctionnalite a la
   suivante. Moins d'un ecran — a 100vh la traversee tirait en longueur. */
.featpin{
  --feat-pas:70vh;
  position:relative;
  height:calc(100vh + (var(--feat-n, 4) - 1) * var(--feat-pas));
  height:calc(100svh + (var(--feat-n, 4) - 1) * var(--feat-pas));
}

.featpin__stage{
  position:sticky;top:0;z-index:1;
  height:100vh;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.featpin__stage > .wrap{width:100%}
.featpin__stage .head{margin-bottom:var(--s-7)}
/* La barre flotte sur les 76 premiers px : l'étage centre son contenu dans
   ce qui reste, sinon le sur-titre passe dessous sur un écran de 800 px. */
.featpin__stage{padding-top:76px}


/* ---- La pile ------------------------------------------------------------
   Toutes les fonctionnalités occupent la même case : la pile fait la hauteur
   de la plus haute et ne bouge plus d'une fonctionnalité à l'autre. Celle
   qu'on a passée sort par le haut, celle qui vient entre par le bas. */
.featpin__deck{display:grid}
.featpin__deck > .feat{
  grid-area:1 / 1;
  padding-block:0;
  /* Le cadre illustré garde la hauteur de la pile d'une fonctionnalité à
     l'autre : c'est son contenu qui change, pas sa taille. */
  align-items:stretch;
  opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease), transform .48s var(--ease), visibility 0s .48s;
}
.featpin__deck > .feat.is-past{transform:translateY(-26px)}
.featpin__deck > .feat.is-next{transform:translateY(26px)}
.featpin__deck > .feat.is-live{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--ease) .06s, transform .48s var(--ease);
}

/* ---- Le rail ------------------------------------------------------------
   Quatre traits pour dire « il en reste trois » : sans lui, l'écran figé
   ressemble à un blocage. Cliquable pour sauter directement.

   Les traits ne changent pas de taille : seule leur couleur passe au dégradé.
   Un trait qui s'allonge ajoutait un mouvement de plus à un écran qui en a
   déjà un — celui de la fonctionnalité qui se remplace. */
.featpin__rail{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:var(--s-7)}
.featpin__go{
  appearance:none;-webkit-appearance:none;
  width:44px;height:3px;padding:0;border:0;border-radius:2px;
  background:var(--surface-3);cursor:pointer;
  transition:background-color .3s var(--ease);
}
.featpin__go:hover{background:var(--line-2)}
.featpin__go.is-on{background-image:var(--grad);background-color:transparent}
.featpin__go:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* La colonne de texte, elle, reste centrée en face du cadre. */
.featpin__deck > .feat > div:first-child{display:flex;flex-direction:column;justify-content:center}

/* Écran bas (≤ 860 px) : écarts un peu plus courts pour que titre, cadre et
   traits tiennent sous la barre flottante. */
@media(max-height:860px){
  .featpin__stage .head{margin-bottom:var(--s-6)}
  .featpin__rail{margin-top:var(--s-6)}
}

/* ---- Replis -------------------------------------------------------------
   Sur téléphone, ou si l'on préfère moins d'animation, l'épingle disparaît :
   les fonctionnalités reprennent leur empilement normal, toutes visibles. */
@media(max-width:900px), (prefers-reduced-motion: reduce){
  .featpin{height:auto}
  .featpin__stage{position:static;height:auto;overflow:visible;display:block;padding-top:0}
  .featpin__rail{display:none}
  .featpin__deck{display:block}
  .featpin__deck > .feat{
    opacity:1;visibility:visible;transform:none;transition:none;
    padding-block:var(--s-8);
  }
}
/* Téléphone : 64 px au-dessus ET au-dessous de chaque fonctionnalité, plus
   un cadre de 240 px souvent à moitié vide, faisaient de longs blancs. */
@media(max-width:600px){
  .featpin__deck > .feat{padding-block:var(--s-6)}
  .featpin__stage .head{margin-bottom:0}
  .feat{gap:var(--s-5)}
  .feat__media{padding:22px;min-height:0}
}

/* ====================================================== RUBAN D'ÉTAT ===== */
.track{padding:2px 0}
.track__bar{position:relative;height:2px;background:var(--surface-3);border-radius:2px;margin:22px 0 0}
.track__done{position:absolute;inset:0 auto 0 0;background:var(--ink);border-radius:2px}
.track__st{position:absolute;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--surface-3)}
.track__st.on{background:var(--ink);border-color:var(--ink)}
.track__st.now{background-image:var(--grad);border-color:transparent;
  box-shadow:0 0 0 4px rgba(31,90,255,.10)}
.track__lbl{position:relative;height:36px;margin-top:12px}
.track__lbl span{position:absolute;top:0;font-size:12px;color:var(--grey-2);
  white-space:nowrap;transform:translateX(-50%);text-align:center}
.track__lbl span:first-of-type{transform:none;text-align:left}
.track__lbl span:last-of-type{transform:translateX(-100%);text-align:right}
.track__lbl b{display:block;color:var(--ink);font-weight:500;font-size:12.5px}
.track__lbl i{font-style:normal}

/* =============================================================== TARIFS == */
.toggle{
  display:inline-flex;padding:4px;gap:2px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
}
.toggle button{
  height:34px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:none;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--grey);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.toggle button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

/* `width:100%` n'est pas decoratif — meme piege que `.faq` : sans lui,
   `margin-inline:auto` dans une section en flex-colonne annule l'etirement et
   la grille se dimensionne sur son contenu. Elle mesurait 738px en mensuel et
   820px en semestre (le paragraphe « pourquoi » n'existe qu'en semestre) : les
   deux cartes changeaient de largeur et se decalaient de 41px a chaque bascule.

   Les SEPT rangees sont declarees ici, pas dans la carte, et chaque carte les
   reprend en `subgrid` : nom, phrase, prix, mention, liste, bouton, note. Deux
   cartes voisines partagent donc la hauteur de chaque rangee — c'est la seule
   facon, en CSS pur, d'aligner deux boutons qui n'ont ni la meme liste
   au-dessus ni la meme note en dessous. La cinquieme rangee (`1fr`) est la
   liste : c'est elle qui absorbe l'ecart. */
.plans{
  width:100%;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(4,auto) 1fr auto auto;
  gap:var(--s-4);max-width:820px;margin-inline:auto;
}
.plan{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px 30px;
  grid-row:1 / -1;
  display:grid;grid-template-rows:subgrid;
}
/* Une seule colonne : les cartes se suivent, elles n'ont plus rien a aligner
   entre elles. Sans ce repli elles occuperaient les MEMES rangees et se
   superposeraient. */
@media(max-width:760px){
  .plans{grid-template-columns:1fr;grid-template-rows:none}
  .plan{grid-row:auto;display:flex;flex-direction:column}
}
/* Le contour à l'encre au survol seulement (17/10, Landry) ; Pro garde son
   ombre et son badge. */
.plan{transition:border-color var(--d2) var(--ease)}
.plan:hover{border-color:var(--ink)}
.plan--on{box-shadow:var(--shadow)}
/* Rangee du bouton : il garde sa hauteur propre et se pose en haut. */
.plan > .btn{align-self:start}
.plan__flag{
  position:absolute;top:-11px;left:30px;
  height:22px;padding:0 12px;border-radius:var(--r-pill);
  background-image:var(--grad);color:#fff;font-size:12px;font-weight:500;
  display:inline-flex;align-items:center;
}
.plan__n{font-weight:500;font-size:16px}
.plan__d{color:var(--grey);font-size:14px;margin-top:4px}
.plan__p{display:flex;align-items:baseline;gap:7px;margin:20px 0 4px}
.plan__p b{font-weight:300;font-size:38px;letter-spacing:-.035em;line-height:1}
.plan__p span{font-size:14px;color:var(--grey)}
.plan__note{font-size:13px;color:var(--grey-2);min-height:34px}
.plan ul{list-style:none;margin:20px 0 24px;padding:0}
.plan li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14.5px}
.plan li .sym{stroke:url(#g-accent);margin-top:3px}
/* Derniere rangee, partagee par les deux cartes : on se cale en haut, sinon
   la note flotte au milieu de la hauteur reservee par la plus longue. */
.plan__sub{font-size:12.5px;color:var(--grey-2);text-align:center;margin-top:10px;align-self:start}
/* Rien sous le bouton (17/10, Landry : « trop haute ») : le paragraphe des
   3 mois, qui obligeait à réserver trois lignes vides, est retiré, et la note
   vide de la carte Gratuit disparaît. */
.plan__sub:empty{display:none}
/* Deux colonnes : la dernière rangée, souvent vide, garde l'écart de la grille
   (16 px) au-dessus d'elle ; le bas de la carte le rend, pour que l'espace
   sous le bouton égale le haut de la carte. */
@media(min-width:761px){.plan{padding-bottom:calc(34px - var(--s-4))}}

/* ================================================================= FAQ === */
/* `width:100%` n'est pas decoratif : sans lui, `margin-inline:auto` dans une
   section en flex-colonne annule l'etirement et la boite se dimensionne sur
   son contenu — elle s'elargissait donc en depliant une reponse. */
.faq{width:100%;max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:16px;font-weight:400;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--grey);border-bottom:1.6px solid var(--grey);
  transform:translateY(-70%) rotate(45deg);border-radius:2px;
  transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--blue)}
.faq summary:hover::after{border-color:var(--ink)}
.faq p{margin:0 0 24px;color:var(--grey);font-size:14.5px;max-width:64ch}

/* =============================================================== BANDE ===
   Section à fond bleu. Elle séquence la page : on en croise trois en
   descendant, et elles cadencent la lecture. Le bleu ne porte jamais de
   texte long — le contenu passe dans des conteneurs blancs. */
/* Pleine largeur, sans arrondi : la bande coupe la page en travers.
   Le retrait horizontal est porté par le .wrap qu'elle contient. */
/* Les bandes font au moins la hauteur de l'écran et centrent leur contenu :
   c'est ce qui donne son rythme à la descente. */
.band{
  background:var(--band);
  color:var(--ink);
  padding-block:var(--section);
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}
.band > .wrap{width:100%}
.band__main{flex:1;display:flex;flex-direction:column;justify-content:center}
.band__foot{flex:none}
/* L'appel final est deux fois moins haut : c'est une conclusion, pas une
   section de contenu. */
.band.cta{min-height:50vh}
/* Le pré-footer (18/10, demande de Landry) : la même bande sur toutes les
   pages, à la hauteur qu'elle a sur l'accueil (base.css, #top > .band). Les
   bandes d'appel au fil d'une page (.band--page) gardent la leur. */
.band.cta:not(.band--page){padding-block:var(--s-8)}
@media(max-width:860px){.band.cta:not(.band--page){padding-block:var(--s-7)}}
@media (max-width:699px),(orientation:landscape) and (max-height:500px){.band.cta:not(.band--page){padding-block:var(--s-8)}}
@media(max-width:860px){.band{min-height:0}}

/* ============================================================== PHOTO ====
   Sections dont le fond est une photographie. Le voile (--scrim) garantit
   le contraste du texte blanc ; les conteneurs, eux, restent blancs. */
.photo{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#fff;
}
.photo::before{
  content:"";position:absolute;inset:0;
  background:var(--scrim);
  pointer-events:none;
}
.photo > *{position:relative;z-index:1}
.photo .display,.photo .h1,.photo .h2,.photo .h3{color:#fff}
.photo .lead,.photo .micro,.photo .small{color:rgba(255,255,255,.86)}
/* Sur la photo, le dégradé du sur-titre ne tiendrait pas : on repasse au
   blanc. C'est le seul endroit du site où le détail perd sa couleur. */
.photo .eyebrow{
  background-image:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:rgba(255,255,255,.82);
  -webkit-text-fill-color:rgba(255,255,255,.82);
}
.photo .band__note{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.86)}
.photo .card{color:var(--ink);box-shadow:0 2px 8px rgba(10,16,22,.16),0 24px 60px rgba(10,16,22,.24)}
.photo .card .h3{color:var(--ink);font-weight:300}
.photo .btn--ghost{
  background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.photo .btn--ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.75)}

/* --------------------------------------------------------------- SOURCES --
   Trois formats, deux largeurs. Le JPEG est déclaré EN PREMIER : les
   navigateurs qui ignorent image-set() gardent cette ligne, les autres
   écrasent avec la seconde et choisissent l'AVIF. Photos Pexels, libres
   de droits pour l'usage commercial. Régénérer avec optimize-photos.py. */
.photo--1{
  background-image:url(../img/img1-2000.jpg);
  background-image:image-set(url(../img/img1-2000.avif) type("image/avif"),
                             url(../img/img1-2000.webp) type("image/webp"),
                             url(../img/img1-2000.jpg)  type("image/jpeg"));
}
.photo--2{
  background-image:url(../img/img2-2000.jpg);
  background-image:image-set(url(../img/img2-2000.avif) type("image/avif"),
                             url(../img/img2-2000.webp) type("image/webp"),
                             url(../img/img2-2000.jpg)  type("image/jpeg"));
}
.photo--3{
  background-image:url(../img/img3-2000.jpg);
  background-image:image-set(url(../img/img3-2000.avif) type("image/avif"),
                             url(../img/img3-2000.webp) type("image/webp"),
                             url(../img/img3-2000.jpg)  type("image/jpeg"));
}
/* L'appel final : trois personnes sous un ciel bleu, recadrées à 2:1 en
   gardant le bas — la bande est large et basse, le ciel suffit au texte. */
.photo--5{
  background-image:url(../img/img5-2000.jpg);
  background-image:image-set(url(../img/img5-2000.avif) type("image/avif"),
                             url(../img/img5-2000.webp) type("image/webp"),
                             url(../img/img5-2000.jpg)  type("image/jpeg"));
  background-position:center bottom;
}

@media (max-width:1000px){
  .photo--5{
  background-image:url(../img/img5-1000.jpg);
    background-image:image-set(url(../img/img5-1000.avif) type("image/avif"),
                               url(../img/img5-1000.webp) type("image/webp"),
                               url(../img/img5-1000.jpg)  type("image/jpeg"));
  }
  .photo--1{
  background-image:url(../img/img1-1000.jpg);
    background-image:image-set(url(../img/img1-1000.avif) type("image/avif"),
                               url(../img/img1-1000.webp) type("image/webp"),
                               url(../img/img1-1000.jpg)  type("image/jpeg"));
  }
  .photo--2{
  background-image:url(../img/img2-1000.jpg);
    background-image:image-set(url(../img/img2-1000.avif) type("image/avif"),
                               url(../img/img2-1000.webp) type("image/webp"),
                               url(../img/img2-1000.jpg)  type("image/jpeg"));
  }
  .photo--3{
  background-image:url(../img/img3-1000.jpg);
    background-image:image-set(url(../img/img3-1000.avif) type("image/avif"),
                               url(../img/img3-1000.webp) type("image/webp"),
                               url(../img/img3-1000.jpg)  type("image/jpeg"));
  }
}

/* Le sur-titre de la bande est en dégradé : c'est lui qui la signale. */
.band .eyebrow{
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Les conteneurs restent blancs : c'est le contraste avec le gris qui
   détache le contenu, pas une bordure. */
.band .card{background:var(--surface);border-color:transparent;box-shadow:var(--shadow-sm)}
.band__note{
  margin:var(--s-7) auto 0;max-width:78ch;text-align:center;
  padding-top:var(--s-5);border-top:1px solid var(--line-2);
  color:var(--grey);font-size:var(--fs-small);
}

/* ============================================================== APPEL ==== */
.cta{text-align:center}

/* ============================================================== FOOTER === */
.foot{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-7)}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s-6)}
@media(max-width:960px){.foot__grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot .logo{height:22px}
.foot__t{font-size:var(--fs-micro);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-2);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0}
.foot li a{font-size:14px;color:var(--grey);transition:color var(--d1) var(--ease)}
.foot li a:hover{color:var(--ink)}
.foot__end{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:12.5px;color:var(--grey-2)}


/* ==========================================================================
   SCÈNES DES CARTES D'ILLUSTRATION
   Chaque carte joue ce que son texte affirme, et rien de plus : les cinq
   l'écran Offres, l'écran Postuler, le lien dont on extrait le poste, la
   ligne de suivi d'une candidature. Ce sont les vrais écrans (10/10).
   Elles ne tournent que lorsqu'elles sont à l'écran (voir main.js).
   ========================================================================== */

.sc-caret{
  display:inline-block;width:1.5px;height:1em;vertical-align:-.14em;
  background:var(--ink);margin-left:2px;
  animation:scBlink 1.05s steps(1) infinite;
}
@keyframes scBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ------------------------------------- composants réels de l'application --
   (10/10, demande de Landry : les scènes doivent montrer les vrais écrans.)
   Copies de css/app.css, que l'accueil ne charge pas — il porte des règles
   globales. Toutes rangées sous .sc-app : rien ne déborde sur la landing. À
   tenir alignées si les cartes de l'application changent. */
.sc-app{overflow:hidden;position:relative}
.sc-app .tag{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--grey);
  background:var(--surface);white-space:nowrap;
}
.sc-app .tag--orange{border-color:var(--salmon);background:transparent;color:var(--salmon)}
.sc-app .card.res{padding:18px 20px}
.sc-app .res{display:flex;flex-direction:column;min-width:0}
.sc-app .res__top{display:flex;align-items:flex-start;gap:14px;height:44px;flex:none;margin-bottom:16px}
.sc-app .res__top .co__main{min-width:0;flex:1 1 auto}
.sc-app .res__top .co__n{line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-app .res__top .co__a{margin-top:2px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-app .res__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 var(--s-4);
  padding-top:16px;border-top:1px solid var(--line);
}
.sc-app .res__coord{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sc-app .res__coord li{display:flex;align-items:center;gap:8px;min-width:0;min-height:22px;font-size:13.5px;white-space:nowrap}
.sc-app .res__coord .sym{color:var(--grey-2);flex:none}
.sc-app .res__coord a{color:var(--ink-2)}
.sc-app .res__cond{display:flex;align-items:center;gap:8px}
.sc-app .res__quand{font-size:12.5px;color:var(--grey-2)}
.sc-app .res__sep{color:var(--grey-3)}
.sc-app .res__act{display:flex;align-items:flex-end}
.sc-app .co__mark--sect .sym{stroke:#fff}
.sc-app .cvl__it{
  display:flex;align-items:center;gap:var(--s-4);padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
}
.sc-app .cvl__pu{width:36px;height:36px;flex:none;border-radius:var(--r-xs);display:grid;place-items:center;
  background:var(--grad);border:0}
.sc-app .cvl__pu .sym{width:17px;height:17px;color:#fff}
.sc-app .cvl__main{display:grid;min-width:0}
.sc-app .cvl__n{font-size:14px;font-weight:500}
.sc-app .cvl__meta{margin-top:2px;font-size:12px;color:var(--grey-2)}
.sc-app .bloc{
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.sc-app .bloc b{font-weight:500}
.sc-app .suivi__q{font-weight:500;letter-spacing:-.01em}
.sc-app .suivi__d{margin-left:auto;flex:none;font-size:12.5px;color:var(--grey-2)}

/* ------------------------------------------------- 01 · l'écran Offres --- */
.sc-phrase{margin:0 0 16px;font-size:17px;font-weight:300;letter-spacing:-.01em;color:var(--ink)}
.sc-tok{display:inline-block;min-width:3.2em;padding:0 2px;color:var(--ink);font-weight:400;
  border-bottom:1.5px solid var(--line-2);transition:border-color 300ms var(--ease)}
.sc-tok:empty::before{content:"…";color:var(--grey-3)}
.sc-tok.is-on{border-image:var(--grad) 1;border-bottom:1.5px solid}
.sc-res{display:grid;gap:12px}
.sc-carte{opacity:0;transform:translateY(12px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease)}
.sc-carte.is-in{opacity:1;transform:none}
.sc-carte + .sc-carte{-webkit-mask-image:linear-gradient(#000 35%,transparent 92%);
  mask-image:linear-gradient(#000 35%,transparent 92%)}
.sc-compte{margin:10px 0 0;color:var(--grey-2);opacity:0;transition:opacity 420ms var(--ease)}
.sc-compte.is-in{opacity:1}

/* ------------------------------------------------ 02 · l'écran Postuler -- */
.sc-etape{display:grid;align-content:start;gap:0;transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
/* Les deux temps occupent la même case : la boîte prend la hauteur du plus grand. */
.sc-app[data-scene="letter"]{display:grid;grid-template-columns:minmax(0,1fr);align-content:center}
.sc-etape{grid-area:1 / 1}
.sc-etape--apres{opacity:0;transform:translateY(12px);pointer-events:none}
.sc-app.is-redige .sc-etape--avant{opacity:0;transform:translateY(-12px)}
.sc-app.is-redige .sc-etape--apres{opacity:1;transform:none}
.sc-lbl{margin:18px 0 8px}
.sc-app .sc-input{display:flex;align-items:center;height:auto;min-height:44px;padding:11px 15px;
  font-size:13.5px;line-height:1.55;color:var(--ink);white-space:normal}
.sc-app .sc-input.is-armed{border-color:var(--blue)}
.sc-app .sc-corps{display:block;min-height:124px;padding:13px 15px;color:var(--ink-2)}
.sc-check{margin-top:12px;align-items:center;cursor:default}
.sc-case{flex:none;width:19px;height:19px;border-radius:6px;border:1px solid var(--line-2);
  background:var(--surface);position:relative}
.sc-case.is-on{background:var(--ink);border-color:var(--ink)}
.sc-case.is-on::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid var(--on-ink);border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}
.sc-rediger{justify-self:start;margin-top:16px;transition:transform 200ms var(--ease)}
.sc-rediger.is-hit{transform:scale(.95)}
.sc-bloc{margin-bottom:4px}

/* ------------------------------------------------ 03 · coller un lien --- */
.sc-field{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 13px 13px 18px;min-height:60px;
  transition:border-color 300ms var(--ease);
}
.sc-field.is-armed{border-color:var(--blue)}
.sc-url{flex:1;min-width:0;font-size:13.5px;color:var(--grey-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-go{
  display:inline-flex;align-items:center;height:34px;padding:0 15px;flex:none;
  border-radius:var(--r-pill);background:var(--surface-3);color:var(--faint);
  font-size:13px;font-weight:500;
  transition:background 300ms var(--ease),color 300ms var(--ease),
             transform 200ms var(--ease);
}
.sc-go.is-armed{background:var(--ink);color:var(--on-ink)}
.sc-go.is-hit{transform:scale(.94)}

.sc-extract{
  margin-top:12px;padding:14px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  opacity:0;transform:translateY(10px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease);
}
.sc-extract.is-in{opacity:1;transform:none}
.sc-extract .micro{margin-top:7px !important}
.sc-extract__act{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:16px}
.sc-url:empty::before{content:attr(data-vide)}

/* ----------------------------------------- 04 · l'écran Candidatures ---- */
.sc-suivi{padding:16px 0 8px;border-top:1px solid var(--line)}
.sc-suivi:first-child{border-top:0;padding-top:0}
.sc-suivi__l{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:14.5px}
.sc-suivi .co__a{margin-top:8px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-suivi .suivi__ruban{margin-top:6px}
.sc-suivi .suivi__ruban .track__bar{margin-top:16px}
.sc-suivi--pale{opacity:.45;margin-top:12px}
.sc-app .tag--warn{border-color:rgba(205,93,25,.34);color:var(--salmon-text);background:var(--salmon-wash)}
.sc-etat{transition:border-color 300ms var(--ease),color 300ms var(--ease)}
.sc-etat.is-reponse{border-color:var(--blue);color:var(--blue-deep)}
.sc-hint{margin-top:12px}

/* ------------------------------------------------------- 04 · le suivi -- */
.track__done{transition:width 640ms var(--ease)}
.track__st{transition:background 340ms var(--ease),border-color 340ms var(--ease),
                      box-shadow 340ms var(--ease)}
.track__lbl span{opacity:.42;transition:opacity 340ms var(--ease)}
.track__lbl span.is-in{opacity:1}

@media (prefers-reduced-motion: reduce){
  .sc-caret{animation:none;opacity:0}
}


/* ==========================================================================
   PAGES D'ACCÈS — connexion, inscription
   Écran coupé en deux : le formulaire sur le fond de page à gauche, une
   photographie pleine hauteur à droite. Sous 900 px la photo disparaît :
   sur un téléphone, elle ne ferait que repousser le formulaire.
   ========================================================================== */

.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
@media(max-width:900px){.auth{grid-template-columns:1fr}}

.auth__pane{
  display:flex;flex-direction:column;
  padding:26px var(--pad) var(--s-5);
}
.auth__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
/* Le lien du logo ne rétrécit jamais : sans ça, « Pas encore de compte ?
   Commencer gratuitement » l'écrasait en un trait sur téléphone. */
.auth__top > a{flex:none}
.auth__top .logo{height:22px;color:var(--ink)}
.auth__switch{font-size:13.5px;color:var(--grey);white-space:nowrap}
.auth__switch a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.auth__switch a:hover{border-bottom-color:var(--ink)}
@media(max-width:480px){
  .auth__switch{white-space:normal;text-align:right;font-size:13px;line-height:1.5}
}

.auth__body{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s-5)}
.auth__card{
  width:100%;max-width:432px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 36px 32px;
  view-transition-name:auth-card;
}
@media(max-width:520px){.auth__card{padding:28px 22px 24px;border-radius:var(--r-md)}}
.auth__card .h2{font-size:27px}
.auth__lead{margin:10px 0 0;color:var(--grey);font-size:14.5px}
.auth__foot{max-width:432px;margin:var(--s-5) auto 0;text-align:center}

/* Le volet illustré. */
.auth__art{
  position:relative;display:flex;align-items:flex-end;
  padding:var(--s-8) var(--s-7);
  /* Le panneau est identique sur les trois écrans d'accès : en le nommant,
     le navigateur le reconnaît d'une page à l'autre et le MAINTIENT au lieu
     de le fondre. Seule la carte du formulaire change réellement. */
  view-transition-name:auth-art;
}
@media(max-width:900px){.auth__art{display:none}}
.auth__claim{position:relative;z-index:1;max-width:22ch}
.auth__claim .h2{color:#fff;font-size:32px}
.auth__claim p{margin:14px 0 0;color:rgba(255,255,255,.86);font-size:14.5px;max-width:34ch}

/* ------------------------------------------------------------- CHAMPS --- */
.field{display:block;margin-top:var(--s-5)}
.field:first-of-type{margin-top:0}
.field__label{
  display:block;margin-bottom:8px;
  font-size:13px;font-weight:500;color:var(--ink-2);
}
.input{
  width:100%;height:48px;padding:0 15px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:15px;
  transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease);
}
.input::placeholder{color:var(--grey-3)}
.input:hover{border-color:var(--grey-3)}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(80,119,140,.16)}
.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.field__aside{font-size:13px;color:var(--grey)}
.field__aside:hover{color:var(--ink)}
.field__hint{margin-top:7px;font-size:12.5px;color:var(--grey-2)}

/* Champ en erreur : le seul endroit où l'orange sert d'alerte. */
.field.is-error .input{border-color:var(--salmon);box-shadow:0 0 0 3px rgba(205,93,25,.14)}
.field__error{margin-top:7px;font-size:12.5px;color:var(--salmon)}

/* Œil du mot de passe. */
.field__wrap{display:block;position:relative}
.field__wrap .input{padding-right:46px}
.field__eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  border:0;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--grey);
}
.field__eye:hover{background:var(--surface-2);color:var(--ink)}

/* Case à cocher. */
.check{display:flex;gap:11px;align-items:flex-start;margin-top:var(--s-5);cursor:pointer}
.check input{
  appearance:none;flex:none;width:19px;height:19px;margin:1px 0 0;
  border:1px solid var(--line-2);border-radius:6px;background:var(--surface);
  cursor:pointer;position:relative;
  transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{
  content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid var(--on-ink);border-width:0 1.8px 1.8px 0;transform:rotate(43deg);
}
.check input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.check span{font-size:13px;line-height:1.5;color:var(--grey)}
.check a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.check a:hover{border-bottom-color:var(--ink)}

/* Emplacement du widget anti-robot. */
/* Turnstile : simple point d'ancrage, sans habillage. Il reste masqué tant
   que Cloudflare ne s'y rend pas — le widget n'existe qu'en production, et
   un cadre vide en attendant ne dit rien à personne. La mention écrite sous
   le bouton (.auth__note) suffit à informer. */
.turnstile{margin-top:var(--s-4)}
.turnstile--live{display:block;min-height:66px}

.auth .btn--block{margin-top:var(--s-6)}
.auth__note{margin-top:var(--s-4);text-align:center;font-size:12.5px;color:var(--grey-2)}


/* -------------------------------------------- Message dans un formulaire --
   Une seule zone par formulaire, neutre ou en alerte. */
/* Même matière que les cartes de la landing : un conteneur posé, une ombre
   légère, et le lavis orange qui suit le curseur (voir .wash plus haut).
   `isolation:isolate` est indispensable — sans elle le ::before en z-index
   négatif passerait derrière le fond de la carte d'accès. */
.notice{
  position:relative;isolation:isolate;
  margin-top:var(--s-4);padding:14px 16px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);
  font-size:13.5px;line-height:1.55;
  box-shadow:var(--shadow-sm);
}
.notice::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
                             rgba(205,93,25,.15) 0%, transparent 72%);
  transition:opacity var(--d2) var(--ease);
}
/* Le message ne bouge pas : seul le lavis s'allume. */
.notice:hover::before{opacity:1}

/* En alerte, le lavis se renforce plutôt que de repeindre tout le fond :
   le message reste lisible, la couleur reste un accent. */
.notice--alert{border-color:rgba(205,93,25,.30);color:var(--salmon-text)}
.notice--alert::before{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
                             rgba(205,93,25,.22) 0%, rgba(205,93,25,.05) 72%);
  opacity:1;
}

/* Bouton occupé : on coupe l'interaction sans faire sauter la mise en page. */
.btn.is-busy{opacity:.72;cursor:progress;pointer-events:none}
/* Sans ca, « Enregistrer mon CV » avait l'air actionnable avant tout choix de
   fichier : on cliquait dans le vide. */
.btn:disabled:not(.is-busy){opacity:.38;cursor:not-allowed}
.btn:disabled:not(.is-busy):hover{transform:none;box-shadow:none;background:var(--ink)}

/* Page de confirmation d'inscription. */
.auth__mail{
  display:flex;align-items:center;gap:12px;margin-top:var(--s-5);
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:14px;
}
.auth__mail b{font-weight:500;word-break:break-all}
.btn--link{
  background:none;border:0;padding:0;height:auto;
  color:var(--ink);font-size:13.5px;font-weight:500;
  border-bottom:1px solid var(--line-2);border-radius:0;cursor:pointer;
}
.btn--link:hover{background:none;transform:none;box-shadow:none;border-bottom-color:var(--ink)}

/* Saisie du code a 6 chiffres — chiffres tabulaires, largement espaces, pour
   qu'on relise sa frappe d'un coup d'oeil. */
.input--code{
  height:60px;
  font-size:26px;
  font-weight:500;
  letter-spacing:.34em;
  text-indent:.34em;   /* compense l'espacement ajoute apres le dernier chiffre */
  text-align:center;
}
.input--code::placeholder{letter-spacing:.34em;color:var(--grey-3);font-weight:400}

/* Bouton « Renvoyer un code » pendant le délai de garde : il reste lisible
   mais visiblement inerte, et affiche le temps restant plutôt que rien. */
.btn--link.is-attente{
  color:var(--grey-2);
  cursor:default;
  pointer-events:none;
  border-bottom-color:transparent;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------- SÉLECTEUR DE LANGUE --
   (js/i18n.js le remplit dans tout [data-langues]) FR · DE · EN, la langue en
   cours en encre, les autres en gris. */
.langues{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--grey-2);letter-spacing:.02em}
.langues a{color:var(--grey);text-decoration:none;border-bottom:1px solid transparent}
.langues a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.langues a.is-on{color:var(--ink);font-weight:500}
.foot__end .langues{margin-left:14px}
/* Le bouton de langue de la barre : discret, au niveau de « Se connecter ». */
.langmenu{position:relative;flex:none}
.langmenu__b{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 8px 0 10px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.04em;color:var(--grey)}
.langmenu__b:hover,.langmenu__b[aria-expanded="true"]{color:var(--ink);border-color:var(--grey-3)}
.langmenu__b .sym{width:14px;height:14px}
.langmenu__m{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:150px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(21,23,26,.12)}
.langmenu__m[hidden]{display:none}
.langmenu__m a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.langmenu__m a:hover{background:var(--surface-3);color:var(--ink)}
.langmenu__m a.is-on{color:var(--ink);font-weight:500}
.auth__langues{margin:var(--s-5) 0 0;text-align:center}
.menu__langues{padding:10px 14px 4px;border-top:1px solid var(--line);margin-top:4px}
.seuil__droite{display:flex;align-items:center;gap:18px}
.seuil .langues,.seuil .langues a{color:rgba(255,255,255,.8)}
.seuil .langues a.is-on{color:#fff}

/* ------------------------------------------------- BOUTON CLAIR / SOMBRE --
   (js/theme.js) Rond, discret, du même gabarit que le bouton de langue. */
.themebtn{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;flex:none;
  border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--grey);cursor:pointer;
  transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.themebtn:hover{color:var(--ink);border-color:var(--grey-3)}
.themebtn svg{display:block}
.themebtn--menu{width:28px;height:28px;margin-left:auto}
.menu__langues{display:flex;align-items:center;gap:10px}
.auth__langues .themebtn{width:26px;height:26px;margin-left:10px;vertical-align:middle}
.seuil .themebtn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)}
.seuil .themebtn:hover{color:#fff;border-color:rgba(255,255,255,.7)}

/* --------------------------------------------------------- FOCUS CLAVIER --
   (11/10, WCAG 2.4.7) Filet de sécurité : tout ce qu'on atteint au clavier
   montre où l'on est, même sans règle dédiée. Rien ne change à la souris. */
:where(a,button,summary,[tabindex],input[type=checkbox],input[type=radio],select):focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
/* Lien d'évitement : invisible tant qu'on ne tabule pas. */
.evitement{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-size:14px;font-weight:500;text-decoration:none;transition:top var(--d1) var(--ease)}
.evitement:focus{top:12px}

/* Mentions légales à portée de chaque page de l'application (11/10). */
.auth__legal{margin-top:6px;text-align:center;font-size:12px;color:var(--grey-2)}
.auth__legal a{color:var(--grey-2)}
.auth__legal a:hover{color:var(--ink)}

/* ---------------------------------------------------------------- GUIDES --
   (11/10) Les articles pour postuler en Suisse : une colonne de lecture,
   les pièces du système (eyebrow, lead, card, btn), rien d'autre. */
.art{padding-top:calc(var(--s-8) + 64px);padding-bottom:var(--s-8)}
.art__in{max-width:720px;margin:0 auto}
.fil{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-5);padding:0;list-style:none;font-size:13px;color:var(--grey)}
.fil li+li::before{content:"/";margin-right:6px;color:var(--grey-2)}
.fil a{color:var(--grey)}
.fil a:hover{color:var(--ink)}
.art h1{font-size:clamp(34px,5vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:300;margin:12px 0 0}
.art__lead{margin-top:var(--s-4);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-2)}
.art__meta{margin-top:var(--s-4);font-size:13px;color:var(--grey)}
.sommaire{margin:var(--s-6) 0 0;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.sommaire__t{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.sommaire ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.sommaire a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.sommaire a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.art__corps{margin-top:var(--s-6);font-size:17px;line-height:1.7;color:var(--ink-2)}
.art__corps h2{margin:var(--s-7) 0 0;font-size:clamp(24px,3vw,30px);line-height:1.2;color:var(--ink);scroll-margin-top:110px}
.art__corps h3{margin:var(--s-5) 0 0;font-size:19px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.art__corps p{margin:var(--s-3) 0 0}
.art__corps ul,.art__corps ol{margin:var(--s-3) 0 0;padding-left:22px;display:grid;gap:8px}
.art__corps strong{font-weight:500;color:var(--ink)}
.art__corps a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.art__corps a:hover{border-bottom-color:var(--ink)}
.exemple{margin:var(--s-4) 0 0;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.exemple__t{display:block;margin-bottom:10px;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.exemple p{margin:0 0 10px}
.exemple p:last-child{margin-bottom:0}
.encart{margin:var(--s-4) 0 0;padding:16px 20px;border-left:3px solid var(--blue);background:var(--blue-wash);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15.5px}
.art__cta{margin-top:var(--s-7);padding:32px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-align:center}
.art__cta h2{margin:0;font-size:26px;line-height:1.2;color:var(--ink)}
.art__cta p{margin:10px auto 0;max-width:46ch;color:var(--grey)}
.art__cta .btn{margin-top:20px}
.voisins{margin-top:var(--s-7)}
.voisins__t{font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.voisins__g{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.voisin{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  transition:border-color var(--d1) var(--ease)}
.voisin:hover{border-color:var(--grey-3)}
.voisin b{display:block;font-weight:500;color:var(--ink);font-size:15.5px;line-height:1.35}
.voisin span{display:block;margin-top:6px;font-size:13.5px;color:var(--grey);line-height:1.5}
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--s-6)}
@media(max-width:640px){.guides{grid-template-columns:1fr}}
.guides .voisin{padding:24px}
.guides .voisin b{font-size:19px;font-weight:400;letter-spacing:-.01em}
@media(max-width:640px){.art{padding-top:calc(var(--s-7) + 56px)}.art__corps{font-size:16px}.exemple{padding:20px}.art__cta{padding:24px 20px}}

/* ====================================== PAGES EMPLOI (14/10) ============ */
/* /emploi/<métier>/<lieu> : les chiffres du jour sur une ligne, et les listes
   de métiers et de villes en colonnes serrées (deux sur téléphone, sinon la
   page s'étire sur des mètres). */
.voisins__g.chiffres{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s-6)}
.chiffres b{font-size:28px;font-weight:300;letter-spacing:-.03em;line-height:1.1}
.voisins__g.liens{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){
  .voisins__g.chiffres,.voisins__g.liens{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .liens .voisin,.chiffres .voisin{padding:12px 14px}
  .liens .voisin b{font-size:14.5px}
}
/* Pages Emploi, Lettre et Employeur (17/10) : plus larges que les guides,
   moins que les sections de la landing, et centrées — le texte occupe toute
   la colonne, sans laisser de vide à droite. */
.art__in--large{max-width:920px}
.art__in--large .voisins__g.liens{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.art__in--large .voisins__g.liens{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.art__in--large .voisins__g.liens{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* -------------------------------------------------- SÉQUENCE (17/10) --
   Les pages Emploi, Lettre et Employeur se lisent comme la landing : un
   en-tête sur photo, puis des sections claires et des bandes à photo de
   fond (emploi_pages.texte / bande / bande_cta). Mêmes photos, même voile. */
.photo--6{
  background-image:url(../img/img6-2000.jpg);
  background-image:image-set(url(../img/img6-2000.avif) type("image/avif"),
                             url(../img/img6-2000.webp) type("image/webp"),
                             url(../img/img6-2000.jpg)  type("image/jpeg"));
  background-position:center 82%;
}
@media (max-width:1000px){.photo--6{
  background-image:url(../img/img6-1000.jpg);
  background-image:image-set(url(../img/img6-1000.avif) type("image/avif"),
                             url(../img/img6-1000.webp) type("image/webp"),
                             url(../img/img6-1000.jpg)  type("image/jpeg"));
}}
.photo--7{
  background-image:url(../img/img7-2000.jpg);
  background-image:image-set(url(../img/img7-2000.avif) type("image/avif"),
                             url(../img/img7-2000.webp) type("image/webp"),
                             url(../img/img7-2000.jpg)  type("image/jpeg"));
  background-position:center 72%;
}
@media (max-width:1000px){.photo--7{
  background-image:url(../img/img7-1000.jpg);
  background-image:image-set(url(../img/img7-1000.avif) type("image/avif"),
                             url(../img/img7-1000.webp) type("image/webp"),
                             url(../img/img7-1000.jpg)  type("image/jpeg"));
}}
.photo--8{
  background-image:url(../img/img8-2000.jpg);
  background-image:image-set(url(../img/img8-2000.avif) type("image/avif"),
                             url(../img/img8-2000.webp) type("image/webp"),
                             url(../img/img8-2000.jpg)  type("image/jpeg"));
  background-position:center 62%;
}
@media (max-width:1000px){.photo--8{
  background-image:url(../img/img8-1000.jpg);
  background-image:image-set(url(../img/img8-1000.avif) type("image/avif"),
                             url(../img/img8-1000.webp) type("image/webp"),
                             url(../img/img8-1000.jpg)  type("image/jpeg"));
}}

/* L'en-tête : moins haut que celui de la landing, le contenu suit. */
.hero--page{min-height:64vh;padding-block:140px var(--s-8)}
.hero--page .fil{justify-content:center;color:rgba(255,255,255,.72)}
.hero--page .fil a{color:rgba(255,255,255,.84)}
.hero--page .fil a:hover{color:#fff}
.hero--page .fil li+li::before{color:rgba(255,255,255,.5)}
.hero--page .h1{margin:var(--s-3) auto 0;max-width:22ch}
.hero--page .lead{margin:var(--s-5) auto 0;max-width:62ch}
.hero__meta{margin:var(--s-4) auto 0;max-width:72ch}
@media(max-width:860px){.hero--page{min-height:0;padding-block:120px var(--s-7)}}
/* La photo 3 (deux visages en bas) : cadrée haut, sous le titre il reste du ciel. */
.hero--page.photo--3{background-position:center 12%}

/* Les sections claires qui suivent : plus de place réservée à la barre. */
.art--suite{padding-top:var(--s-8)}
.art--suite .art__corps,.band--page .art__corps{margin-top:0}
.art--suite .art__corps>:first-child,.band--page .art__corps>:first-child{margin-top:0}

/* Les bandes : la hauteur de leur contenu, pas celle de l'écran. */
.band--page{min-height:0;padding-block:clamp(88px,10vw,140px)}
.band--page .art__corps{color:rgba(255,255,255,.88)}
.band--page .art__corps h2{color:#fff}
.band--page .art__corps a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.band--page .art__corps a:hover{border-bottom-color:#fff}
.band--page.cta .h1{margin:var(--s-4) auto 0;max-width:22ch}
.band--page.cta .lead{margin:var(--s-5) auto var(--s-6);max-width:56ch}
.bande__texte{margin:var(--s-5) auto 0;max-width:68ch;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.88)}
.bande__texte p{margin:0 0 10px}
.bande__texte a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.bande__texte a:hover{border-bottom-color:#fff}

/* Les quatre paragraphes de la lettre : les cartes numérotées de la landing
   (« Comment ça marche »), sur une ligne. On rend aux titres et au texte
   leurs réglages de carte, que .art__corps écraserait. */
.etapes{margin-top:var(--s-5)}
.art__corps .etapes .h3{margin:0 0 8px;font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink)}
.art__corps .etapes p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey)}
@media(min-width:641px) and (max-width:900px){.etapes.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Écran Compte (17/10) : les cartes de tarifs de la landing, dans la section
   Abonnement. La carte Gratuit dit qu'on y est déjà. */
.tarifs-compte{margin-top:var(--s-5);text-align:center}
.tarifs-compte .toggle{margin-bottom:var(--s-5)}
.tarifs-compte .plans{text-align:left}
.btn.is-actuel{cursor:default;pointer-events:none;opacity:.6}

/* ============================================================ TACTILE ===
   Écrans tactiles (17/10, audit responsive) : 44 px au moins pour tout ce
   qu'on touche du doigt (Apple HIG, WCAG 2.5.5), et des champs à 16 px pour
   que Safari iOS ne zoome pas à la saisie. Deux moyens :
   - les vrais boutons et les champs prennent 44 px de haut ;
   - les petits éléments dont la taille fait le dessin (rond du mode sombre,
     menu de langue, logo, liens-textes) gardent leur aspect : une zone
     invisible (::after), centrée, agrandit la surface de toucher.
   Sur ordinateur (souris), rien ne change. */
@media (pointer:coarse){
  .input,textarea.input,select.input,.lienbar__in,.tok__in{font-size:16px}
  .btn--sm,.toggle button,.filtre{min-height:44px}
  .nav .btn--sm{height:40px}
  .field__eye{width:44px;height:44px}
  .check{min-height:44px}
  .lienbar__in{min-height:44px}
  .toggle button{min-width:44px}

  .themebtn,.langmenu__b,.nav__brand,.nav__login,.appbar__me,.appbar__brand,
  .featpin__go,.tok,.lien,.btn--link,.field__aside,.nav .btn--sm,.fil a{position:relative}
  .themebtn::after,.langmenu__b::after,.nav__brand::after,.nav__login::after,.appbar__me::after,
  .appbar__brand::after,.featpin__go::after,.tok::after,.lien::after,.btn--link::after,
  .field__aside::after,.nav .btn--sm::after,.fil a::after{
    content:"";position:absolute;left:50%;top:50%;
    width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);
  }

  /* Le pied de page : des liens empilés, chacun sa ligne de 44 px. */
  .foot li{padding:0}
  .foot li a{display:inline-block;padding-block:12px;min-width:44px}
  /* FR · DE · EN : plus d'écart, et chaque code haut de 44 px. */
  .langues{gap:14px}
  .langues a{position:relative}
  .langues a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* Les mots allemands très longs (« Produktionsmitarbeiter ») se coupent dans
   les cartes étroites du téléphone au lieu de toucher le bord (17/10). */
.voisin b,.voisin span,.co__n{overflow-wrap:anywhere;hyphens:auto}

/* ================================================== ANALYSE DE CV (18/10) ==
   Outil gratuit, page publique. Le dépôt est celui de Mon compte (.depot,
   app.css) ; la note reprend le chiffre en dégradé des étapes (.step__n),
   les contrôles la coche des tarifs (.plan li). Deux marques seulement pour
   ce qui ne va pas : un anneau (à vérifier), un disque (à corriger), dans
   l'orange de l'accent. Aucun texte en couleur. */
.outil{margin-top:var(--s-6);padding:28px}
.outil__prive{display:flex;gap:9px;align-items:flex-start;margin:var(--s-4) 0 0;font-size:13.5px;line-height:1.55;color:var(--grey)}
.outil__prive .sym{width:17px;height:17px;margin-top:1px;stroke:url(#g-accent)}
.outil .sect__etat{margin:var(--s-3) 0 0}
.depot.is-busy{cursor:progress;opacity:.75}

.outil__res{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line);scroll-margin-top:96px}
.note{display:flex;align-items:center;gap:var(--s-5)}
.note__c{display:flex;align-items:baseline;gap:4px;flex:none}
.note__n{
  font-size:64px;font-weight:300;line-height:1;letter-spacing:-.04em;
  background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.note__sur{font-size:17px;color:var(--grey-2)}
.note__v{display:block;font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.note__d{display:block;margin-top:4px;font-size:14px;color:var(--grey)}
.note__barre{margin-top:var(--s-5);height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.note__barre span{display:block;height:100%;border-radius:4px;background:var(--grad);transition:width .8s var(--ease)}

.verifs__t{display:block;margin:var(--s-6) 0 0;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.verifs{list-style:none;margin:var(--s-3) 0 0;padding:0}
.verif{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.verif:first-child{border-top:0}
.verif__m{width:18px;height:18px;margin-top:3px;border-radius:50%;stroke-width:2}
.verif--ok .verif__m{stroke:url(#g-accent)}
.verif--av .verif__m{border:1.6px solid var(--salmon)}
.verif--ko .verif__m{background:var(--salmon)}
.verif__t{display:block;font-size:15.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.verif__d{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--grey)}
.verifs__bien summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.verifs__bien summary::-webkit-details-marker{display:none}
.verifs__bien summary::after{content:"";width:7px;height:7px;margin-left:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--d1) var(--ease)}
.verifs__bien[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.verifs__encore{margin-top:var(--s-6)}
@media(max-width:560px){
  .outil{padding:22px 18px}
  .note{gap:var(--s-4)}
  .note__n{font-size:52px}
}
/* Quatre voisins (l'outil s'ajoute aux guides, 18/10) : deux par deux plutôt
   que trois et un orphelin. */
.voisins__g:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.voisins__g:has(> :nth-child(4):last-child){grid-template-columns:1fr}}

/* Analyse de CV, deux notes (18/10) : recruteur suisse | robots (ATS). La
   bascule est celle des tarifs ; les mots-clés sont des étiquettes (.tag,
   app.css), orange pâle pour ceux qui manquent. */
.outil__annonce{margin-top:var(--s-4)}
.outil__annonce textarea{min-height:76px}
.outil__bascule{display:flex;width:max-content;max-width:100%;margin-bottom:var(--s-5)}
.outil__bascule button{display:inline-flex;align-items:center;gap:6px}
.outil__onglet-n{font-weight:400;color:var(--grey-2)}
.outil__bascule button.on .outil__onglet-n{color:var(--ink)}
.motscles{margin-top:var(--s-5)}
.motscles__t{display:block;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.motscles__l{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.motscles__l .tag{white-space:normal;height:auto;min-height:24px;padding-block:2px}
.motscles__n{margin:var(--s-4) 0 0;font-size:13.5px;line-height:1.55;color:var(--grey)}
.outil__brut{
  margin:var(--s-3) 0 0;padding:16px 18px;max-height:360px;overflow:auto;
  white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 inherit;font-family:inherit;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
@media(max-width:560px){.outil__bascule button{padding:0 12px;font-size:13px}}
/* ------------------------------------------------ PAGE OUTIL (18/10) --
   L'analyse de CV se présente comme un produit : le titre et l'outil côte
   à côte dans l'en-tête sur photo, les résultats juste dessous, puis la
   séquence des pages Emploi (sections claires, bandes photo, appel final). */
.hero--outil{padding-block:132px var(--s-8)}
.outil-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(40px,5vw,80px);align-items:center;text-align:left}
.outil-hero .fil{color:rgba(255,255,255,.72)}
.outil-hero .fil a{color:rgba(255,255,255,.84)}
.outil-hero .fil a:hover{color:#fff}
.outil-hero .fil li+li::before{color:rgba(255,255,255,.5)}
.outil-hero .display{margin:var(--s-3) 0 0;font-size:clamp(34px,3.4vw,48px)}
.outil-hero .lead{margin:var(--s-5) 0 0;max-width:48ch}
.outil-hero__points{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:10px}
.outil-hero__points li{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.9)}
.outil-hero__points .sym{flex:none;stroke:#fff}
.hero--outil .outil{margin-top:0;padding:28px;color:var(--ink);box-shadow:0 2px 8px rgba(10,16,22,.16),0 24px 60px rgba(10,16,22,.24)}
/* Le cadre d'import (18/10) : le dépôt en zone large, des écarts réguliers,
   et l'état masqué tant qu'il est vide pour ne pas creuser le bas. */
.hero--outil .depot{padding:22px 20px;gap:16px}
.hero--outil .depot__t{font-size:15px}
.hero--outil .depot__d{margin-top:3px;font-size:12.5px}
.hero--outil .outil__annonce{margin-top:var(--s-5)}
.hero--outil .outil .sect__etat{margin-top:14px}
.hero--outil .outil .sect__etat:empty{display:none}
.outil__sortie{padding-top:var(--s-7)}
.outil__sortie:has(> [hidden]){display:none}
.outil__sortie .outil__res{max-width:820px;margin:0 auto;padding:36px;border-top:1px solid var(--line)}
.outil-cartes{align-items:stretch}
.outil-cartes .card p a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.outil-cartes .card p a:hover{border-bottom-color:var(--ink)}
/* Les contrôles (18/10) : la coche des tarifs (.plan li), un libellé court
   en encre et une ligne d'explication. Sur deux colonnes, les rangées des
   deux cartes s'alignent (subgrid) : les listes partent à la même hauteur.
   Un bouton ramène au dépôt, dans l'en-tête. */
.outil-liste{list-style:none;margin:var(--s-5) 0 0;padding:var(--s-5) 0 0;border-top:1px solid var(--line);display:grid;gap:14px;align-content:start}
.outil-liste li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--grey)}
.outil-liste li .sym{flex:none;stroke:url(#g-accent);margin-top:2px}
.outil-liste strong{display:block;margin-bottom:2px;font-size:14.5px;font-weight:500;color:var(--ink)}
.outil-cta{margin:var(--s-7) 0 0;text-align:center}
/* « Comment ça marche » plus haut que les autres bandes de page, plus
   près de la bande pleine page de la landing. */
.band--page.outil-etapes{min-height:88vh}
@media(min-width:961px){.outil-cartes > .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}}
.outil-voisins{max-width:760px;margin:var(--s-8) auto 0}
.outil-voisins .voisins{margin-top:0}
@media(max-width:960px){
  .outil-hero{grid-template-columns:minmax(0,1fr);text-align:center}
  .outil-hero .fil{justify-content:center}
  .outil-hero .lead{margin-inline:auto}
  .outil-hero__points{width:max-content;max-width:100%;margin-inline:auto}
  .hero--outil .outil{width:100%;max-width:560px;margin-inline:auto;text-align:left}
  .outil-cartes.g2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){.hero--outil{padding-block:112px var(--s-7)}}
@media(max-width:560px){
  .hero--outil .outil,.outil__sortie .outil__res{padding:22px 18px}
  .hero--outil .depot{padding:18px 16px;gap:14px}
  .hero--outil .outil__annonce{margin-top:var(--s-4)}
  .outil-hero .display{font-size:31px}
  .outil-hero__points li{font-size:14px;text-align:left}
}