/* ==========================================================================
   JOBUNT — L'APPLICATION
   --------------------------------------------------------------------------
   Tout ce qui vit DERRIÈRE la connexion. Le système reste celui du site
   (tokens.css, base.css, components.css) : on n'ajoute ici que la coquille
   — barre d'application, mise en page à deux colonnes — et les quelques
   pièces qui n'existent que dans le produit.

   Différence de ton assumée avec le site public : ici on travaille. Les
   respirations sont plus courtes (--s-6 au lieu de --section), les titres
   plus petits, et le dégradé se fait encore plus rare — il ne marque plus
   que l'état actif et ce qui est réglé.
   ========================================================================== */

/* La largeur de l'application : 1120 px sur TOUTES les pages (demande de
   Landry, 30/09). Elle était de 860 px — la pilule détachée de la landing —
   sauf sur Sociétés et Offres (1120, pour le rail et deux colonnes) : la
   barre et le contenu changeaient de largeur en passant d'Offres à
   « Postuler à une URL ». Désormais ils tombent au même endroit partout. */
:root{ --app-w:1120px; }

/* La place de la barre de défilement est TOUJOURS réservée. « Postuler à une
   URL » est la seule page assez courte pour ne pas défiler : sous Windows, sa
   barre de défilement (17 px) manquait, la page se centrait sur 17 px de plus,
   et la barre comme le contenu glissaient de 8 px par rapport à Offres ou
   Sociétés — des marges gauche et droite différentes d'une page à l'autre
   (remarqué par Landry le 01/10). */
html{scrollbar-gutter:stable}

/* ============================================================== COQUILLE ===
   La barre ne flotte pas et ne se transforme pas, contrairement à celle du
   site : dans un outil, une barre qui bouge au défilement est un bruit. Elle
   est collée, pleine largeur, posée sur un filet. */
.appbar{
  position:sticky;top:0;z-index:100;
  height:62px;
  background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--line);
}
.appbar__in{
  width:100%;max-width:var(--app-w);margin-inline:auto;
  padding-inline:var(--pad);
  height:100%;display:flex;align-items:center;gap:var(--s-6);
}
.appbar__brand{display:flex;align-items:center;color:var(--ink);flex:none}
.appbar__brand .logo{height:22px;width:auto;display:block}

/* Liens de navigation : l'actif est le seul à porter le dégradé, et il le
   porte SOUS le texte, pas dedans — un mot en dégradé se lit moins bien
   qu'un mot à l'encre. */
.appnav{display:flex;align-items:center;gap:2px;flex:1 1 auto}
.appnav a{
  position:relative;
  padding:8px 13px;border-radius:var(--r-pill);
  font-size:14px;color:var(--grey);
  transition:color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.appnav a:hover{color:var(--ink);background:var(--surface-3)}
.appnav a[aria-current="page"]{color:var(--ink);font-weight:500}
.appnav a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--grad);
}
/* Écran pas encore construit : on le montre, on ne le cache pas — la barre
   dit où va le produit. Mais il n'emmène nulle part. */
.appnav a[data-bientot]{color:var(--grey-3);cursor:default;pointer-events:none}
.appnav a[data-bientot]::after{
  content:"bientôt";position:static;display:inline-block;
  margin-left:7px;height:auto;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-3);background:none;
}

/* -------------------------------------------------------------- COMPTE --- */
.appbar__end{display:flex;align-items:center;gap:var(--s-3);flex:none;position:relative}
/* « Candidatures », passé à côté du compte : les liens de la barre, sans
   prendre la place restante. */
.appnav--fin{flex:none}

/* ---------------------------------------------------------- PASTILLE ----
   Photo de profil, ou a defaut un degrade PASTEL tire de l'adresse : deux
   teintes de la famille du bleu et de l'orange du systeme, eclaircies. Il
   parait tire au sort mais il est deterministe (cf. `pastel()` dans
   app-shell.js) — un degrade reellement aleatoire changerait a chaque
   chargement, et on ne se reconnaitrait plus.

   Le fond passe par `--av-bg` : c'est le JS qui le pose, la valeur par defaut
   ne sert que le temps du chargement. Les initiales sont a l'ENCRE, pas en
   blanc : sur un pastel, du blanc ne tient pas. */
.avat{
  position:relative;overflow:hidden;
  width:34px;height:34px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;
  background:var(--av-bg,var(--grad));
  background-size:cover;background-position:center;
  color:var(--ink);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;
  user-select:none;
}
.avat--lg{width:74px;height:74px;font-size:23px;font-weight:300}
/* Une photo remplace les initiales — les garder par-dessus les rendrait
   illisibles sur la moitie des images. */
.avat.is-photo .avat__ini{display:none}

/* La grande pastille est un bouton : c'est le seul endroit ou l'on voit la
   photo, donc le seul ou la changer a du sens. */
.avat--btn{
  border:0;padding:0;cursor:pointer;font-family:inherit;
  transition:box-shadow var(--d1) var(--ease);
}
.avat--btn:hover{box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line-2)}
.avat--btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.avat__over{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(21,23,26,.45);color:#fff;
  opacity:0;transition:opacity var(--d1) var(--ease);
}
.avat__over .sym{stroke-width:2}
.avat--btn:hover .avat__over,.avat--btn:focus-visible .avat__over{opacity:1}

/* Aucun cadre, ni au survol ni une fois ouvert : la pastille se suffit, et
   un contour qui apparaît au clic ajoutait une forme de plus à côté du menu
   qui, lui, en a déjà une. Seul le chevron réagit. */
.appbar__me{
  display:flex;align-items:center;gap:9px;
  padding:0;border:0;border-radius:var(--r-pill);
  background:none;cursor:pointer;color:var(--ink);font-size:13.5px;
  font-family:inherit;
}
.appbar__me .sym{
  width:15px;height:15px;color:var(--grey-2);
  transition:color var(--d1) var(--ease),transform var(--d2) var(--ease);
}
.appbar__me:hover .sym{color:var(--ink)}
.appbar__me[aria-expanded="true"] .sym{color:var(--ink);transform:rotate(180deg)}
.appbar__me:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;
  min-width:212px;padding:6px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
}
.menu[hidden]{display:none}
.menu__who{padding:10px 12px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu__who b{display:block;font-weight:500;font-size:13.5px}
.menu__who span{display:block;margin-top:2px;font-size:12px;color:var(--grey-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu a,.menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border:0;border-radius:var(--r-xs);
  background:none;text-align:left;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);font-family:inherit;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.menu a:hover,.menu button:hover{background:var(--surface-3);color:var(--ink)}
.menu .sym{width:17px;height:17px;color:var(--grey)}


/* ================================================================= PAGE === */
.wrap.page{max-width:var(--app-w)}
.page{padding-block:var(--s-7) var(--s-9)}

/* Les trois blocs s'alignent en HAUT et en BAS : le nom sur le haut de la
   pastille, l'adresse sur son bas. D'ou `align-items:stretch` sur la rangee
   et `space-between` dans la colonne — la colonne prend exactement la hauteur
   de la pastille, et ses deux lignes se posent aux extremites. Un simple
   `align-items:center` laissait le nom depasser en haut et l'adresse en bas. */
.page__head{
  display:flex;align-items:stretch;gap:var(--s-4);
  margin-bottom:var(--s-6);
}
.page__head h1{margin:0;line-height:1}
.page__who{
  min-width:0;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-between;
}
/* Les marges verticales des deux lignes sont a zero : c'est la repartition
   qui place, pas l'espacement. */
.page__sub{margin:0;font-size:13.5px;color:var(--grey);line-height:1}
.page__act{display:flex;gap:var(--s-4);margin:0;align-self:center;flex:none}
/* Téléphone : « Changer la photo » prenait la place du nom, coupé en deux
   lignes, et flottait à mi-hauteur. Il passe dessous, aligné sur le texte. */
@media(max-width:560px){
  .page__head{flex-wrap:wrap;row-gap:var(--s-3)}
  .page__act{flex-basis:100%;align-self:auto}
}

/* Étiquette de plan, à côté du nom. Le Pro prend le dégradé ; le gratuit
   reste un contour — sans quoi les deux se valent visuellement et
   l'abonnement ne se voit plus. */
.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;
}
.tag--pro{border-color:transparent;background:var(--grad);color:#fff}
.tag--warn{border-color:rgba(205,93,25,.34);color:var(--salmon-text);background:var(--salmon-wash)}

/* ========================================================= DEUX COLONNES == */
.dash{display:grid;grid-template-columns:176px minmax(0,1fr);gap:var(--s-6)}

/* Le rail suit le défilement : les sections font plusieurs écrans à elles
   toutes, et sans rail collé on perd le plan de l'écran dès la deuxième. */
.rail{position:sticky;top:calc(62px + var(--s-5));align-self:start}
.rail a{
  display:block;padding:8px 13px;border-radius:var(--r-xs);
  font-size:13.5px;color:var(--grey);
  transition:color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.rail a:hover{color:var(--ink);background:var(--surface-3)}
.rail a.is-on{color:var(--ink);font-weight:500;background:var(--surface)}
.rail__sep{height:1px;background:var(--line);margin:var(--s-3) 13px}

.secs{display:grid;gap:var(--s-5);min-width:0}

/* Section réglable. `scroll-margin-top` : sans lui, un saut d'ancre depuis le
   rail colle le titre SOUS la barre d'application, qui est elle aussi collée. */
.sect{scroll-margin-top:calc(62px + var(--s-4));padding:30px 30px 32px}
.sect__top{margin-bottom:var(--s-5)}
.sect__t{font-size:17px;font-weight:500;letter-spacing:-.015em}
.sect__d{margin-top:6px;font-size:13px;color:var(--grey);line-height:1.55;max-width:62ch}
.sect__foot{
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);
}
/* L'état d'enregistrement vit à côté du bouton, pas en surimpression : une
   notification qui passe se rate, une ligne qui reste se lit. */
.sect__etat{font-size:13px;color:var(--grey-2)}
.sect__etat.is-ok{color:var(--blue-deep)}
.sect__etat.is-ko{color:var(--salmon)}

/* ------------------------------------------------------------ CHAMPS ----
   Le site public n'a que des champs texte : la liste déroulante et la zone
   de texte n'existent que dans le produit, elles sont donc déclarées ici.
   `appearance:none` retire le chevron du système, remplacé par le nôtre —
   sinon chaque navigateur en dessine un différent, et aucun n'est arrondi. */
/* Un `<select>` non repris par js/menu.js (script absent, ou une zone qu'on
   n'a pas parcourue) doit rester presentable : on lui garde son chevron. */
select.input{
  appearance:none;cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787E88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 10.2 12 14.6l4.4-4.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}
textarea.input{
  height:auto;padding:12px 15px;line-height:1.55;
  resize:vertical;min-height:88px;font-family:inherit;
}

/* ------------------------------------------------- LISTES DEROULANTES ----
   Le menu du navigateur n'est pas stylable : on le redessine (js/menu.js).
   COURT et defilant — une liste de soixante pays affichee d'un bloc recouvre
   le formulaire et oblige a viser. */
.pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  min-width:100%;max-height:216px;overflow-y:auto;overscroll-behavior:contain;
  padding:5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
  /* Barre de defilement fine : celle du systeme est large et grise, et se
     voit plus que le menu qui la porte. */
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.pop[hidden]{display:none}
.pop::-webkit-scrollbar{width:9px}
.pop::-webkit-scrollbar-track{background:transparent}
.pop::-webkit-scrollbar-thumb{
  background:var(--line-2);border-radius:var(--r-pill);
  border:3px solid var(--surface);
}
.pop::-webkit-scrollbar-thumb:hover{background:var(--grey-3)}

/* Le menu des indicatifs est plus large que son champ : le champ ne montre
   que « +41 », le menu doit montrer le pays. */
.pop--pays{min-width:262px}

.pop__it{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--r-xs);
  font-size:13.5px;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;
}
/* `is-vise` = la ligne sous le curseur OU sous les fleches : une seule
   apparence pour les deux, sinon on ne sait plus ce que Entree validera. */
.pop__it:hover,.pop__it.is-vise{background:var(--surface-3);color:var(--ink)}
.pop__it.is-choisi{font-weight:500;color:var(--ink)}
.pop__av{display:flex;align-items:center;flex:none;line-height:0}
.pop__t{overflow:hidden;text-overflow:ellipsis}
.pop__c{margin-left:auto;padding-left:var(--s-4);font-size:12.5px;color:var(--grey-2)}
.pop__vide{margin:0;padding:10px;font-size:13px;color:var(--grey-2)}

/* Le `<select>` reste dans le document — il porte la valeur — mais c'est le
   bouton qu'on voit. */
.lst{position:relative;display:block}
.lst select{display:none}
.lst__bouton{
  display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;cursor:pointer;font-family:inherit;
  background:var(--surface);
}
.lst__val{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lst__bouton .sym{flex:none;color:var(--grey);transition:transform var(--d2) var(--ease)}
.lst__bouton[aria-expanded="true"]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(80,119,140,.16)}
.lst__bouton[aria-expanded="true"] .sym{transform:rotate(180deg)}

/* Réservé aux lecteurs d'écran. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Indicatif + numero. L'indicatif est une liste, pas un champ libre : « 0041 »,
   « 41 » et « +41 » sont tous ecrits par des gens de bonne foi, et il faudrait
   les normaliser apres coup. Largeur fixe pour que le numero ne danse pas
   quand on passe de « Suisse +41 » a « Liechtenstein +423 ». */
.tel{display:grid;grid-template-columns:122px minmax(0,1fr);gap:var(--s-3)}
.tel__ind{position:relative;display:block}
/* Le menu deborde du champ : rien ne doit le rogner. */
.tel,.field{overflow:visible}
/* Le drapeau est DANS le champ, a gauche : il commente ce qu'on tape au lieu
   de vivre a cote. `pointer-events:none` pour que le clic tombe dans le
   champ, y compris pile sur le drapeau. */
.tel__ind .input{padding-left:44px}
.tel__dr{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;line-height:0;pointer-events:none;
}
.fl{display:block;width:21px;height:15px}
/* Pays non dessine : son code a deux lettres, dans une tuile de la meme
   taille que les drapeaux — la ligne ne bouge pas d'un pays a l'autre. */
.iso{
  display:grid;place-items:center;width:21px;height:15px;
  border:1px solid var(--line-2);border-radius:3px;
  font-size:9px;font-weight:500;letter-spacing:.02em;color:var(--grey);
}
@media(max-width:560px){.tel{grid-template-columns:110px minmax(0,1fr)}}

/* Deux champs côte à côte. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.duo .field,.duo .field:first-of-type{margin-top:0}
.duo+.field{margin-top:var(--s-5)}
.duo--etroit{grid-template-columns:minmax(0,1fr) 132px}

/* ============================================================== LISTE CV ===
   Une ligne par CV. Le CV par défaut porte le point du dégradé — c'est celui
   qui partira si l'on ne choisit rien au moment de postuler, l'information
   la plus utile de la liste. */
.cvl{display:grid;gap:10px}
.cvl__it{
  display:flex;align-items:center;gap:var(--s-4);
  padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);
}
.cvl__pu{
  width:36px;height:36px;flex:none;border-radius:var(--r-xs);
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);
}
.cvl__pu .sym{width:17px;height:17px;color:var(--grey)}
.cvl__it.is-def .cvl__pu{background:var(--grad);border-color:transparent}
.cvl__it.is-def .cvl__pu .sym{color:#fff}
.cvl__main{flex:1 1 auto;min-width:0}
.cvl__n{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.cvl__meta{margin-top:2px;font-size:12px;color:var(--grey-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvl__act{display:flex;align-items:center;gap:var(--s-4);flex:none}

/* Bouton de rang trois : pas un bouton, un mot. Réservé aux actions de
   liste, où un vrai bouton par ligne ferait un mur de pilules. */
.lien{
  border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;color:var(--grey);
  border-bottom:1px solid var(--line-2);
  transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.lien:hover{color:var(--ink);border-bottom-color:var(--ink)}
.lien--danger:hover{color:var(--salmon);border-bottom-color:var(--salmon)}
.lien:disabled{opacity:.4;cursor:default;pointer-events:none}

/* Zone de dépôt du fichier. Trait PLEIN, comme les lignes de CV juste
   au-dessus : le pointille signale d'ordinaire un provisoire, alors que
   c'est une carte de la liste comme les autres. */
.depot{
  display:flex;align-items:center;gap:13px;
  padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);cursor:pointer;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.depot:hover,.depot.is-survol{border-color:var(--blue);background:var(--blue-wash)}
.depot .sym{color:var(--grey);flex:none}
.depot__s{flex:1 1 auto;min-width:0}
.depot__t{display:block;font-size:14px;font-weight:500}
.depot__d{display:block;margin-top:2px;font-size:12px;color:var(--grey-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================================================================ QUOTA ===
   Jauge. Elle ne se remplit pas de couleur : elle se remplit d'encre, et ne
   passe à l'orange qu'une fois le seuil approché. Une jauge colorée en
   permanence ne sait plus alerter. */
.meter{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.meter__b{height:100%;border-radius:3px;background:var(--ink);
  transition:width var(--d2) var(--ease),background var(--d2) var(--ease)}
.meter.is-tendu .meter__b{background:var(--grad)}
.meter.is-plein .meter__b{background:var(--salmon)}
.quota__l{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-3);margin-bottom:9px;flex-wrap:wrap}
/* `flex:none` : sans lui le chiffre se fait comprimer par la légende et
   « 0 / 3 » se casse en deux lignes dès 390 px de large. */
.quota__n{flex:none;white-space:nowrap;font-size:21px;font-weight:300;letter-spacing:-.02em}
.quota__r{font-size:12.5px;color:var(--grey-2)}

/* Bloc d'information neutre à l'intérieur d'une section. */
.bloc{
  padding:15px 17px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.bloc--danger{border-color:rgba(205,93,25,.28);background:var(--salmon-wash);color:var(--salmon-text)}
.bloc b{font-weight:500}
.bloc a{color:inherit;border-bottom:1px solid var(--line-2)}
.bloc a:hover{border-bottom-color:currentColor}

/* ============================================================== MESSAGE ===
   Passage court en bas de l'écran après une action qui n'a pas de place
   propre (import de fichiers, export). */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:200;
  max-width:min(520px,calc(100vw - 32px));
  padding:13px 19px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-size:13.5px;
  box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease);
}
.toast.is-vu{opacity:1;transform:translate(-50%,0)}
.toast.is-ko{background:var(--salmon-text)}

/* ================================================================ ÉCRANS == */
@media(max-width:980px){
  .dash{grid-template-columns:1fr;gap:var(--s-5)}
  /* Le rail devient une barre de jetons qui défile : collé en colonne il
     mangerait un tiers de la hauteur utile. */
  .rail{
    position:static;display:flex;gap:var(--s-2);
    overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  }
  .rail::-webkit-scrollbar{display:none}
  .rail a{white-space:nowrap;border-radius:var(--r-pill);border:1px solid var(--line)}
  .rail a.is-on{border-color:var(--ink)}
  .rail__sep{display:none}
}
/* Téléphone (10/10) : les onglets étaient simplement masqués, et le menu du
   compte ne propose que « Mon compte » — impossible d'aller des Sociétés aux
   Offres ou aux Candidatures. Ils passent sur une seconde ligne sous la
   barre, qui défile de côté si elle déborde (même geste que le rail du
   Profil). La barre reste collée, sans bouger au défilement. */
@media(max-width:860px){
  .appbar{height:auto}
  .appbar__in{flex-wrap:wrap;row-gap:0;justify-content:space-between;gap:var(--s-4)}
  .appbar__brand,.appbar__end{height:56px}
  .appnav{
    order:3;flex:1 0 100%;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding:0 calc(var(--pad) - 9px) 6px;
  }
  .appnav::-webkit-scrollbar{display:none}
  .appnav a{white-space:nowrap;flex:none;font-size:13px;padding:7px 9px}
  .appnav a[aria-current="page"]::after{left:9px;right:9px}
  .appnav--fin{order:0;flex:none;margin:0;padding:0;overflow:visible}
  .sect{scroll-margin-top:calc(100px + var(--s-4))}
  .sect{padding:24px 20px 26px}
  .duo,.duo--etroit{grid-template-columns:1fr}
  .page{padding-block:var(--s-5) var(--s-8)}
}
@media(max-width:560px){
  .cvl__it{flex-wrap:wrap}
  .cvl__act{width:100%;justify-content:flex-end}
}

/* ================================================================ VIDE ====
   Ecran sans contenu : un symbole, une phrase, une sortie. La tuile est le
   seul aplat de couleur du systeme — c'est ici qu'elle sert le mieux, quand
   il n'y a rien d'autre a regarder. */
.vide{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  text-align:center;padding-block:var(--s-9);
}
.vide .lead{max-width:44ch}
.vide .row{margin-top:var(--s-3)}

/* ==========================================================================
   ÉCRAN SOCIÉTÉS
   --------------------------------------------------------------------------
   La phrase est celle de la page d'accueil (.panel, .phrase, .tokwrap, .tok,
   .tokmenu) ; le rail des filtres reprend le rail de l'écran Profil (.dash,
   liens du rail, .check, .toggle des tarifs) ; la carte est une .card qui
   porte les pièces de la ligne d'aperçu (.co__mark, .co__n, .co__a, .co__km)
   avec le lavis des cartes sans chiffre (.wash). On ne déclare ici que ce que
   ces pièces n'avaient pas à faire : écrire dans un jeton, filtrer une liste,
   en choisir des éléments.
   ========================================================================== */

/* ---- La largeur ------------------------------------------------------------
   Cet écran prend la largeur du site au repos (1120 px) : un rail de filtres
   et deux colonnes de cartes ne tiennent pas dans 860. La barre
   d'application suit — barre et contenu tombent toujours au même endroit. */
body.is-large{--app-w:1120px}

/* L'application respire moins que le site. */
.page > .head{margin-bottom:var(--s-6)}

/* ---- La phrase -------------------------------------------------------------
   Sur le site, la phrase tient sur une ligne (`nowrap` au-delà de 1000 px)
   avec des valeurs choisies d'avance. Ici les valeurs viennent d'un
   référentiel de 345 postes : figée sur une ligne, elle déborderait. Elle
   revient à la ligne, et reste centrée. */
.page .phrase{white-space:normal;max-width:none}

/* ---- Le trou où l'on écrit ---------------------------------------------------
   Le jeton où l'on ÉCRIT garde les lettres en dégradé : c'est le CHAMP qui
   porte le découpage (le fond de la case sert au bleu pâle de saisie). Quand
   on y écrit, il prend le fond
   --blue-wash de l'état ouvert du système. Le champ n'a aucune apparence
   propre et sa largeur est mesurée sur le texte par le script. `.tok` est en
   inline-flex : la règle `[hidden]` du navigateur ne suffit plus. */
.tok[hidden]{display:none}
.tok--champ{cursor:text;--tok-fond:transparent;-webkit-text-fill-color:currentColor;
  background:var(--tok-fond);border-radius:6px}
.tok--champ .tok__in{background:var(--grad-texte, var(--grad));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tok--champ .tok__in::placeholder{-webkit-text-fill-color:var(--grey-2)}
.tok--champ:hover{opacity:1}
.tok--champ:focus-within{--tok-fond:var(--blue-wash)}
/* Le chevron (18/10, demande de Landry) : on voit qu'on peut changer le mot
   sans qu'une phrase d'aide l'explique. Il pivote quand la liste est ouverte.
   Le jeton colle à la ponctuation : plus de marge propre, l'écart avant le
   chevron suffit. */
.tok--champ{gap:3px;margin:0;padding:0 2px}
.tok--champ .tok__chev{width:.62em;height:.62em;margin:0 -.17em 0 -.06em;stroke-width:2.2;flex:none;color:var(--salmon);opacity:.75;
  transition:transform var(--d1) var(--ease)}
.tok--champ:has(.tok__in[aria-expanded="true"]) .tok__chev{transform:rotate(180deg)}
/* Les recherches récentes, sous la phrase : des pastilles qui la relancent. */
.quete__recentes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:var(--s-4) 0 0}
.quete__recentes[hidden]{display:none}
.quete__recente{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;max-width:100%;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;cursor:pointer;
  font:inherit;font-size:13px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.quete__recente:hover{color:var(--ink);border-color:var(--grey-3)}
.quete__recente .sym{width:14px;height:14px;flex:none}
.tok__in{
  font:inherit;color:inherit;letter-spacing:inherit;caret-color:var(--blue);
  width:4ch;min-width:1ch;padding:0;margin:0;
  border:0;outline:0;background:transparent;cursor:text;
}
.tok__in::placeholder{color:var(--grey-2);opacity:1}
.tok.is-vide{color:var(--grey-2)}

/* ---- La liste, juste sous le trou : .tokmenu, plus longue qu'à l'accueil ---
   Là-bas trois ou quatre valeurs, ici jusqu'à dix. Elle ne sort jamais de
   l'écran (le script la recale), et la ligne visée au clavier a l'apparence
   de la ligne sous la souris. */
.tokmenu{
  max-height:328px;max-width:calc(100vw - 32px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.tokmenu button.is-vise{background:var(--surface-2)}
.tokmenu__t,.tokmenu__vide{display:block;text-align:left}
.tokmenu__t{padding:8px 10px 4px;font-size:12px;color:var(--grey-2)}
.tokmenu__vide{padding:9px 10px;font-size:13.5px;color:var(--grey-2)}

/* ============================================================ RAIL + LISTE */
.dash.soc{grid-template-columns:236px minmax(0,1fr);margin-top:var(--s-6)}
.soc__liste{min-width:0}

/* ---- Le rail ---------------------------------------------------------------
   Collé comme celui de l'écran Profil ; il défile pour lui-même quand il est
   plus haut que l'écran, sans entraîner la page. */
.filtres{
  position:sticky;top:calc(62px + var(--s-5));align-self:start;
  max-height:calc(100vh - 62px - var(--s-5) * 2);
  /* Il défile vers le bas, jamais de côté : une ligne trop longue passe à
     la ligne (demande de Landry, 30/09). */
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.filtres__bouton{display:none}
.filtres__corps{display:grid;gap:var(--s-5);padding-bottom:var(--s-4)}
.filtres__haut{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:0 13px;min-height:22px;
}
.filtres__titre{font-size:14px;font-weight:500;color:var(--ink)}
.filtres__haut .lien{font-size:13px}
.filtres__g{display:grid;gap:2px;min-width:0}
.filtres__g[hidden]{display:none}
/* La sélection, séparée de ce qui filtre par un filet franc (01/10). */
.filtres__g--selection{margin-top:var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line-2)}
.filtres__g--selection .filtres__note{padding-top:6px}
.filtre[hidden]{display:none}
.filtres__t{padding:0 13px 6px;font-size:12px;color:var(--grey-2);letter-spacing:.02em}
.filtres__liste{display:grid;gap:2px;min-width:0}
.filtres__note{margin:0;padding:0 13px;font-size:13px;line-height:1.5;color:var(--grey)}
.filtres__note b{font-weight:500;color:var(--ink)}
.filtres__note a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.filtres__note a:hover{border-bottom-color:var(--ink)}
.filtres__note[hidden]{display:none}
.filtres__liens{display:grid;justify-items:start;gap:6px;padding:8px 13px 0}
.filtres .lien:disabled{color:var(--grey-3);cursor:default;border-bottom-color:transparent}
.filtres .lien[hidden]{display:none}

/* Un choix du rail : le lien du rail de l'écran Profil, devenu bouton, avec
   son compte au bout. Allumé, il passe à l'encre sur le blanc — comme la
   section en cours là-bas. */
.filtre{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 13px;border:0;border-radius:var(--r-xs);background:none;
  font:inherit;font-size:13.5px;color:var(--grey);text-align:left;cursor:pointer;
  transition:color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.filtre:hover{color:var(--ink);background:var(--surface-3)}
.filtre:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.filtre.is-on{color:var(--ink);font-weight:500;background:var(--surface)}
.filtre:disabled{color:var(--grey-3);background:none;cursor:default}
.filtre__t{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.filtre__n{flex:none;font-size:12px;font-weight:400;color:var(--grey-2)}
.filtres__plus{justify-self:start;margin:4px 13px 0;font-size:13px}

/* La case du système, à la mesure d'une ligne de rail. */
.filtres .check{
  margin:0;padding:7px 13px;align-items:center;border-radius:var(--r-xs);
  transition:background var(--d1) var(--ease);
}
.filtres .check:hover{background:var(--surface-3)}
.filtres .check span{font-size:13.5px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.filtres__note{overflow-wrap:anywhere}
.filtres .check .filtre__n{margin-left:auto;font-size:12px;color:var(--grey-2)}

/* Le sélecteur des tarifs, sur toute la largeur du rail. */
.filtres .toggle{display:flex;margin:0 5px}
.filtres .toggle button{flex:1 1 0;min-width:0;height:30px;padding:0 4px;font-size:12.5px}

/* ---- La liste ---------------------------------------------------------- */
.res__head{margin:0 0 var(--s-4);min-height:21px}
.grid > .vide{grid-column:1 / -1;padding-block:var(--s-8)}
.res__plus{display:flex;justify-content:center;margin-top:var(--s-6)}
.res__plus[hidden]{display:none}

/* ---- La carte --------------------------------------------------------------
   Plus fine que la carte du site : deux rangées. Qui (marque, nom, activité
   et commune), puis comment la joindre — e-mail, téléphone, site — à côté de
   « Postuler ». La source n'y figure plus : elle se choisit dans le rail. Le
   pied se pose en bas quelle que soit la hauteur — deux cartes voisines ont
   la même hauteur, leurs pieds tombent au même endroit. */
/* ⚠️ Composition fixe (demande de Landry, 01/10) : toutes les cartes ont la
   même charpente, quelles que soient leurs données.
   - l'en-tête a une hauteur FIXE : le filet tombe au même endroit partout ;
   - dessous, trois lignes d'informations alignées à gauche, même quand il en
     manque (la place reste réservée) ;
   - « Postuler » dans le coin bas-droit, à la même distance du bas et du bord
     (20 px, le rembourrage de la carte, identique sur les quatre côtés). */
.card.res{padding:20px}
.res{display:flex;flex-direction:column;min-width:0}
/* Choisie pour le lot : le filet passe à l'encre, comme le plan choisi des
   tarifs (.plan--on). */
.res--choisi{border-color:var(--ink)}
.res__top{display:flex;align-items:flex-start;gap:14px;height:44px;flex:none;margin-bottom:14px}
.res__top .co__main{min-width:0;flex:1 1 auto}
.res__top .co__n{line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res__top .co__a{margin-top:2px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le favori et la case du lot, au bout de la ligne. Le favori est un bouton
   de symbole, comme l'œil des mots de passe (.field__eye) ; allumé, son
   trait prend le dégradé — ce qui est « réglé ». */
.res__marques{display:flex;align-items:center;flex:none;margin:-6px -9px -6px 0}
.res__fav{
  width:34px;height:34px;display:grid;place-items:center;
  border:0;background:none;border-radius:var(--r-sm);cursor:pointer;color:var(--grey-3);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.res__fav:hover{background:var(--surface-2);color:var(--ink)}
.res__fav:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.res__fav[aria-pressed="true"]{color:var(--ink)}
.res__fav[aria-pressed="true"] .sym{stroke:url(#g-accent)}
/* Le serveur met parfois plus d'une seconde à répondre : sans ce retour, un
   clic semblait perdu, et l'on recliquait. */
.res__fav:disabled{opacity:.45;cursor:progress}
/* La case du système (.check) porte une marge haute pensée pour un
   formulaire. */
.check.res__sel{margin:0;padding:7px}

/* Trois lignes, toujours : la hauteur est réservée même quand la société n'a
   qu'un e-mail, pour que toutes les cartes aient la même composition. */
.res__coord{
  min-width:0;list-style:none;margin:0;padding:0;
  display:grid;grid-template-rows:repeat(3,22px);align-content:start;gap:3px;
}
.res__coord li{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;height:22px;
  font-size:13.5px;white-space:nowrap}
.res__coord .sym{color:var(--grey-2);flex:none}
.res__coord a{
  min-width:0;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease);
}
.res__coord a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.res__coord .tag{flex:none}
.res__rien{color:var(--grey-2)}

/* Le pied : les trois lignes à gauche, les actions à droite, « Postuler »
   collé en bas — donc dans le coin de la carte. */
.res__foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 var(--s-4);
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.res__act{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  align-self:stretch;gap:6px;flex:none;
}
.res__act .co__km{width:auto;flex:none}
.res__act .tag{flex:none}
/* Au survol, « Postuler » s'estompe au lieu de sauter : ni décalage ni ombre
   (demande de Landry, 01/10). */
.res__act .btn{transition:opacity var(--d2) var(--ease)}
.res__act .btn:hover{transform:none;box-shadow:none;opacity:.72}
.res__act .btn--blue:hover{background:var(--blue)}

/* ---- Pendant la recherche --------------------------------------------------
   La silhouette d'une carte, aux gris du système : la grille garde sa forme
   et rien ne saute quand la réponse arrive. */
.res--attente{pointer-events:none;animation:res-attente 1.1s var(--ease) infinite alternate}
.res--attente .co__mark{border-color:transparent;background:var(--surface-3)}
.res--attente i{display:block;height:9px;border-radius:var(--r-pill);background:var(--surface-3)}
.res--attente .co__main i:first-child{width:62%;margin-top:7px}
.res--attente .co__main i + i{width:38%;margin-top:10px}
.res--attente .res__coord i{align-self:center}
.res--attente .res__coord i:first-child{width:72%}
.res--attente .res__coord i + i{width:48%}
@keyframes res-attente{from{opacity:1}to{opacity:.55}}

/* ---- Écrans moyens et téléphones ----------------------------------------
   Le rail ne tient plus à côté des cartes : il passe au-dessus, replié
   derrière un bouton — déplié en colonne, il repousserait la liste d'un
   écran entier. */
@media(max-width:980px){
  .dash.soc{grid-template-columns:1fr;gap:var(--s-4)}
  .filtres{position:static;max-height:none;overflow:visible}
  .filtres__bouton{display:inline-flex}
  .filtres__corps{
    display:none;margin-top:var(--s-3);padding:var(--s-4) var(--s-2);
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-5) var(--s-3);
  }
  .filtres.is-ouvert .filtres__corps{display:grid}
  .filtres__haut{grid-column:1 / -1}
}

/* ---- Le lot ----------------------------------------------------------------
   Le verre de la barre détachée de la page d'accueil (.nav.scrolled
   .nav__in) : même blanc à 72 %, même flou, même ombre. */
.lot{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:var(--s-4);
  max-width:calc(100vw - 32px);padding:8px 8px 8px 20px;
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--verre);
  -webkit-backdrop-filter:saturate(1.9) blur(22px);
  backdrop-filter:saturate(1.9) blur(22px);
  box-shadow:0 1px 2px rgba(16,22,28,.05),0 16px 44px rgba(16,22,28,.15);
  font-size:13.5px;white-space:nowrap;
}
.lot[hidden]{display:none}
.lot__n b{font-weight:500}
/* Sur téléphone la barre ne se replie pas en colonne étroite au milieu de
   l'écran — elle masquait les cartes : elle prend la largeur, en deux lignes.
   Le compte et l'action principale, puis les deux actions secondaires. */
@media(max-width:620px){
  .lot{
    left:16px;right:16px;bottom:14px;transform:none;max-width:none;
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;
    padding:12px 12px 14px 16px;border-radius:var(--r-md);white-space:normal;
  }
  .lot__n{grid-column:1;grid-row:1}
  .lot__postuler{grid-column:2;grid-row:1}
  .lot__vider{grid-column:1;grid-row:2;justify-self:start}
  .lot__carriere{grid-column:2;grid-row:2;justify-self:end}
}
/* La barre flotte au-dessus des dernières cartes : on réserve sa place en bas
   de page tant qu'elle est là, sinon la dernière carte reste dessous. */
body:has(.lot:not([hidden])) .page{padding-bottom:150px}

/* ==========================================================================
   POSTULER
   --------------------------------------------------------------------------
   Assemblé avec les pièces de l'écran Profil : .sect, .field, .input, .check,
   .bloc, .cvl, .tag — et .faq pour déplier les candidatures d'un lot.
   ========================================================================== */
.cand__retour{margin:0 0 var(--s-5)}
.cand__head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.cand__head .h2{line-height:1.15}
.cand__head .page__sub{margin-top:8px;line-height:1.45}

/* Des pièces en inline-flex, grid ou flex : la règle `[hidden]` du
   navigateur ne les masque plus. */
.cand [hidden]{display:none !important}

/* `.field:first-of-type{margin-top:0}` colle le premier champ à ce qui le
   précède : ici c'est souvent une liste ou un bloc, pas l'en-tête. */
.cand .field:first-of-type{margin-top:var(--s-5)}
.cand .sect__top + .field{margin-top:0}
.cand .bloc + .check{margin-top:var(--s-5)}

/* Une ligne de CV (.cvl__it) qu'on choisit d'un clic : le filet passe à
   l'encre, comme la carte choisie de la liste des sociétés. */
.cand__cv{width:100%;text-align:left;cursor:pointer;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.cand__cv:hover{border-color:var(--line-2)}
.cand__cv[aria-pressed="true"]{border-color:var(--ink);background:var(--surface)}
.cand__cv:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.cand__var{display:grid;justify-items:start;gap:7px;margin-top:10px}
.cand__var .lien{text-align:left}
.cand__pj{margin:var(--s-4) 0 0}
.cand__pdf{display:inline-block;margin-top:10px}
/* La langue de la lettre (17/10) : la bascule ne s'étire pas. */
.cand__langue{margin-top:var(--s-5)}
.cand__langue .toggle{justify-self:start;align-self:start;width:max-content}
/* Écran Candidatures : le style, puis le téléchargement. */
.suivi__pdf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.suivi__pdf .toggle{max-width:100%;overflow-x:auto}
.suivi__pdf .toggle button{padding:0 14px;white-space:nowrap}

/* La mise en page de la lettre (17/10, js/lettre-pdf.js) : trois boutons,
   chacun avec sa page en miniature. Le choisi prend le filet encre, comme le
   CV choisi juste au-dessus. La page reste blanche en thème sombre : c'est
   du papier. */
.mep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mep__o{
  display:grid;justify-items:center;align-content:start;gap:14px;
  padding:20px 16px 18px;min-width:0;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:inherit;font:inherit;cursor:pointer;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease);
}
.mep__o:hover{border-color:var(--line-2)}
.mep__o[aria-pressed="true"]{border-color:var(--ink);background:var(--surface)}
.mep__o:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mep__o:disabled{cursor:default}
.mep__o:disabled:not([aria-pressed="true"]){opacity:.45}
.mep__o:disabled:hover{border-color:var(--line)}
.mep__txt{display:grid;gap:4px;min-width:0}
.mep__n{font-size:14px;font-weight:500;line-height:1.3}
.mep__d{font-size:12.5px;line-height:1.45;color:var(--grey-2)}

.mep__page{
  --l:#C7CCD3; --f:#3E434A;
  position:relative;display:block;width:min(100%,92px);aspect-ratio:210/297;
  background:#fff;border:1px solid var(--line-2);border-radius:2px;
  box-shadow:0 1px 3px rgba(21,23,26,.07);overflow:hidden;
}
.mep__b,.mep__t{position:absolute;display:block}
.mep__t,.mep__b--exp,.mep__b--dest,.mep__b--col{
  background:repeating-linear-gradient(to bottom,var(--l) 0 1.5px,transparent 1.5px 4.5px);
}
.mep__b--obj{height:2px;background:var(--f)}
/* Classique : coordonnées à gauche, société à droite, texte pleine largeur. */
.mep__page--classique .mep__b--exp{left:12%;top:7%;width:28%;height:12%}
.mep__page--classique .mep__b--dest{left:56%;top:24%;width:32%;height:8%}
.mep__page--classique .mep__b--obj{left:12%;top:40%;width:56%}
.mep__page--classique .mep__t{left:12%;right:12%;top:45%;height:38%}
/* Moderne : le nom en tête, un filet, puis le texte. */
.mep__page--moderne .mep__b--nom{left:11%;top:7%;width:46%;height:5%;background:var(--f)}
.mep__page--moderne .mep__b--filet{left:11%;right:11%;top:16%;height:1px;background:var(--f)}
.mep__page--moderne .mep__b--obj{left:11%;top:33%;width:60%}
.mep__page--moderne .mep__t{left:11%;right:11%;top:38%;height:42%}
/* Épurée : une colonne d'informations, un filet vertical, le texte. */
.mep__page--epure .mep__b--col{left:9%;top:8%;width:24%;height:36%}
.mep__page--epure .mep__b--regle{left:38%;top:7%;bottom:7%;width:1px;background:var(--f)}
.mep__page--epure .mep__b--obj{left:44%;top:8%;width:40%}
.mep__page--epure .mep__t{left:44%;right:9%;top:14%;height:48%}
/* Sur téléphone, les trois l'une sous l'autre : la miniature à gauche, le
   nom et la description à droite. */
@media (max-width:640px){
  .mep{grid-template-columns:1fr;gap:10px}
  .mep__o{grid-template-columns:56px 1fr;justify-items:start;align-items:center;
    gap:16px;padding:14px 16px;text-align:left}
  .mep__page{width:56px}
}

.cand__lot{max-width:none}
.cand__lot summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:15px}
.cand__lot summary .co__a{font-size:13px}
.cand__lot .bloc{margin-bottom:var(--s-3)}
.cand__lot details[open] .bloc:last-child{margin-bottom:var(--s-5)}
.cand__lot .cand__texte{
  margin:6px 0 0;max-width:none;white-space:pre-wrap;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
}

.cand__fin{display:grid;gap:var(--s-4);justify-items:start;margin-top:var(--s-5)}
.cand__bilan{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cand__bilan li{display:flex;align-items:center;gap:10px;min-width:0;font-size:13.5px}

/* ==========================================================================
   ÉCRAN OFFRES
   --------------------------------------------------------------------------
   Tout vient de l'écran Sociétés : la phrase, le rail, la carte `.res`. On ne
   déclare ici que ce qu'une annonce a et qu'une société n'a pas — ses
   conditions (contrat, taux, date de publication).
   ========================================================================== */

/* La rangée des conditions, entre le titre et le pied. Même place que
   « Recrute · <poste> » sur la carte d'une société (`.res__rec`), et mêmes
   jetons : des `.tag` du système, rien de nouveau. Elle disparaît quand
   l'annonce ne dit ni le contrat ni le taux — une rangée vide se lirait
   comme une information manquante. */
/* Un intitule d'annonce peut faire quatre lignes (« Chef de rang / Cuisinier /
   Femme ou valet de chambre / Receptionniste / Barman / Plongeur (H/F) »).
   Deux cartes voisines n'avaient alors plus rien a voir en hauteur, et la plus
   courte se creusait d'un trou sous son texte — exactement le defaut releve
   sur l'ecran Societes. L'intitule est borne a deux lignes ; l'entier reste
   lisible au survol (`title`). */
.res--off .co__n{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.res--off .co__a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res__cond{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 12px}
.res__quand{font-size:12.5px;color:var(--grey-2)}

/* La source reste lisible sur la carte, contrairement à l'écran Sociétés :
   la même annonce vit sur trois sites, et c'est le site qui la reçoit. C'est
   le `.co__src` de la ligne d'aperçu de l'accueil, à sa place d'origine. */
.res--off .co__src{flex:none}

/* De la couleur sur la carte d'une annonce (demande de Landry, 30/09) :
   - la marque sur un dégradé bleu -> orange du système, propre à chaque
     société (`degrade()` dans offres.js pose `--mk-bg`) ; son motif passe au
     blanc ;
   - les conditions (CDI, taux…), qui ne se cliquent pas, à l'orange ;
   - « Postuler », le seul bouton, au bleu (`.btn--blue` du système). */
/* 01/10 (Landry) : contour orange, plus d'aplat — CDI, 100 %, Recrute. */
.tag--orange{border-color:var(--salmon);background:transparent;color:var(--salmon)}

/* La carte d'une annonce suit la même charpente que celle d'une société
   (01/10) : un en-tête de hauteur fixe — l'intitulé tient sur deux lignes —,
   le filet, puis trois lignes à gauche (conditions, date, « Lire
   l'annonce ») et « Postuler » dans le coin. */
.res--off .res__top{height:62px;margin-bottom:16px}
.res--off .res__top .co__n{white-space:normal}

/* Le pied d'une annonce (retravaillé le 01/10) : une grille de trois rangées
   sous le filet — les conditions, la date et la source, puis « Lire
   l'annonce » ET « Postuler » sur la même rangée. La liste s'efface
   (`display:contents`) pour que ses lignes se posent dans la grille. Le
   bouton reste dans le coin, à 20 px du bas et du bord. */
.res--off .res__foot{grid-template-rows:26px 20px 38px;row-gap:10px;align-items:center;padding-top:16px}
.res--off .res__coord{display:contents}
.res--off .res__coord > li{height:auto;grid-column:1 / -1}
.res--off .res__coord > li:last-child{grid-column:1;grid-row:3}
.res--off .res__act{grid-column:2;grid-row:3;align-self:center}
.res--off .res__quand,.res--off .res__coord .co__src{font-size:12.5px;color:var(--grey-2)}
.res__sep{color:var(--grey-3)}
/* L'aperçu de l'accueil cache la source sous 520 px ; sur la carte d'une
   annonce elle reste (c'est elle qui reçoit la candidature), quitte à se
   couper en « … ». */
@media(max-width:520px){.res--off .res__coord .co__src{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis}}
.res__coord .res__cond{display:flex;align-items:center;gap:6px;margin:0;min-width:0;overflow:hidden}

/* Sous le chapo : l'autre chemin vers une candidature, quand l'annonce n'est
   sur aucun des sites interroges. Un cran sous le chapo — c'est une issue, pas
   une promesse de l'ecran. */
.head__aussi{
  margin:var(--s-4) auto 0;max-width:52ch;
  font-size:13.5px;line-height:1.6;color:var(--grey-2);
}

/* ⚠️ Les cartes ne s'étirent plus à la hauteur de leur rangée — sur cet écran
   seulement. `.res__foot` est collé en bas par `margin-top:auto` : c'est ce
   qui aligne les pieds de deux cartes voisines, et c'est juste tant qu'elles
   se ressemblent. Déplier un descriptif triple la hauteur de l'une, et la
   voisine se creusait alors d'un trou de 300 px au-dessus de son pied —
   exactement le défaut relevé le 15/09, « des trous vides pris pour une
   recherche remplie ».

   L'écran Sociétés garde l'étirement : rien n'y grandit après coup. */
.res__gr{align-items:start}

/* ==========================================================================
   ÉCRAN CANDIDATURES
   --------------------------------------------------------------------------
   Un tableau de bord, pas une liste de résultats : il garde la largeur
   ordinaire de l'application (860 px). Les sections sont celles de l'écran
   Profil (`.panel.sect`), le sélecteur d'états est celui des tarifs
   (`.toggle`), chaque candidature est un dépliant (`.faq`, comme « Les
   candidatures » de l'écran Postuler), le taux de réponse est la jauge de
   quota (`.meter`) et le trajet est le ruban d'état de l'accueil
   (`.track`). N'est déclaré ici que ce qui n'existait nulle part : la rangée
   de chiffres du bilan et les quelques lignes du dépliant.
   ========================================================================== */

/* ---- Le bilan --------------------------------------------------------------
   Les chiffres sont en Light, comme les prix des tarifs : dans cet écran,
   ce sont eux que l'on regarde en premier. */
/* Même piège que sur l'écran Postuler : `.btn` et `.toggle` sont en
   `inline-flex`, et la règle `[hidden]` du navigateur ne suffit plus. */
.suivi [hidden]{display:none !important}

.bil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
.bil__it b{display:block;font-size:27px;font-weight:300;letter-spacing:-.025em;line-height:1}
.bil__it span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--grey-2)}
.bil__taux{margin-top:var(--s-6)}
.bil__taux[hidden]{display:none}

/* La même jauge que le quota, lue à l'endroit : sur l'écran Profil, le
   dégradé dit « ça se remplit » ; ici il dit « ça répond ». Une classe par
   sens, sinon le nom ment. */
.meter--bon .meter__b{background-image:var(--grad)}

/* ---- Les états -------------------------------------------------------------
   Le sélecteur des tarifs, à cinq crans. Il revient à la ligne plutôt que de
   déborder : cinq libellés avec leur compte ne tiennent pas sur 390 px. */
.suivi__etats{display:flex;flex-wrap:wrap;margin-bottom:var(--s-4);max-width:100%}
.suivi__etats button{display:inline-flex;align-items:center;gap:7px}
.suivi__etats button .num{font-weight:400;font-size:12px;color:var(--grey-2)}
.suivi__etats button.on .num{color:var(--grey)}
.suivi__compte{margin:0 0 var(--s-3)}

/* ---- La liste --------------------------------------------------------------
   Le dépliant du système, resserré : une FAQ respire, une liste de travail
   doit tenir à l'écran. */
.suivi__liste{max-width:none}
.suivi__liste > .vide{padding-block:var(--s-7)}
.suivi__liste details:first-child{border-top:1px solid var(--line)}
.suivi__liste summary{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  padding:15px 34px 15px 0;font-size:14.5px;
}
.suivi__q{font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.suivi__liste summary .co__a{font-size:13px}
.suivi__liste summary .tag{flex:none}
.suivi__d{margin-left:auto;flex:none;font-size:12.5px;color:var(--grey-2)}
/* La ligne de suivi (02/10) : la société, l'état, la date ; dessous l'objet
   et le destinataire ; puis le ruban sur toute la largeur. */
/* Pas de nowrap : un objet long qui ne revient pas à la ligne élargit toute
   la colonne (le contenu minimal d'un élément de grille), page comprise. */
.suivi__liste summary .suivi__objet{flex-basis:100%;margin-top:-2px;min-width:0;overflow-wrap:anywhere}
/* Les points du ruban sont des <i> vides : droits, comme tout le système. */
.suivi__ruban i{font-style:normal}
/* Le chevron du dépliant reste à hauteur du nom, pas au milieu du ruban. */
.suivi__liste summary::after{top:25px}
/* Sur téléphone, « Voir la liste » et « Envoyer les relances » tiennent à
   deux sur la ligne (ils s'empilaient à 390 px une fois la page à sa vraie
   largeur — elle débordait avant, ce qui leur laissait de la place). */
@media(max-width:520px){
  #relances .sect__foot{gap:8px}
  #relances .sect__foot .btn{padding-inline:13px}
}
.suivi__ruban{flex-basis:100%;min-width:0;padding:0 2px 2px}
.suivi__ruban .track__bar{margin-top:14px}
.suivi__corps{display:grid;gap:var(--s-5);padding:var(--s-3) 0 var(--s-6)}
.suivi__corps > .track{margin-bottom:var(--s-3)}

.suivi__bloc{display:grid;gap:7px;justify-items:start}
.suivi__t{font-size:12px;color:var(--grey-2);letter-spacing:.02em}
.suivi__n{margin:0;font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.suivi__kv{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:5px var(--s-4);
  margin:0;width:100%;font-size:13.5px;line-height:1.5;
}
.suivi__kv dt{color:var(--grey-2)}
.suivi__kv dd{margin:0;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.suivi__kv dd a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.suivi__kv dd a:hover{border-bottom-color:var(--ink)}
.suivi__bloc .cand__texte{
  margin:4px 0 0;max-width:none;white-space:pre-wrap;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.suivi__act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-2)}

/* ---- Ce qui fait répondre --------------------------------------------------
   Une ligne par variante d'objet : le libellé et son taux, puis la jauge du
   quota. La même pièce sert deux fois dans l'écran, c'est voulu. */
.suivi__objs{display:grid;gap:var(--s-5)}
.suivi__objs .quota__r{min-width:0;overflow-wrap:anywhere}

@media(max-width:560px){
  .bil{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Replié sur trois rangées, le sélecteur n'est plus une pilule : la pilule
     ne décrit qu'une ligne. Il prend le rayon des cartes. */
  .suivi__etats{border-radius:var(--r-md)}
  .suivi__kv{grid-template-columns:1fr;gap:2px}
  .suivi__kv dt{margin-top:7px}
  .suivi__d{margin-left:0}
}

/* ============================================ PAGE OUVERTE AUX VISITEURS ===
   postuler-url.html se visite sans compte : c'est la porte « Postuler à une
   URL » de la landing. Elle porte les deux barres, et la session choisit
   (`app-shell.js` pose `data-visiteur` sur le body). Tant que la session n'a
   pas répondu, c'est la barre de l'application : le cas le plus courant, et
   celui qui ne doit pas clignoter. */
.nav--visiteur{display:none}
body[data-visiteur] .nav--visiteur{display:flex}
body[data-visiteur] .appbar,
body[data-visiteur] [data-membre]{display:none}
[data-visiteur-seul]{display:none}
body[data-visiteur] [data-visiteur-seul]{display:block}
/* Un bouton pour le visiteur seul : il garde l'affichage du bouton. */
body:not([data-visiteur]) [data-visiteur-btn]{display:none}
/* L'appel final du membre, sans la ligne des 3 candidatures : le bouton
   garde l'écart qu'elle lui donnait. */
.band.cta .btn[data-membre]{margin-top:var(--s-6)}
.nav__links a[aria-current="page"]{color:var(--ink)}
/* La barre de la landing est FIXE (68 px), celle de l'application collante :
   sans ce décalage, le titre passerait dessous. */
body[data-visiteur] .page{padding-top:calc(68px + var(--s-7))}
@media(max-width:860px){
  body[data-visiteur] .page{padding-top:calc(68px + var(--s-5))}
}

/* ==========================================================================
   LA FICHE AGRANDIE (js/fiche.js)
   --------------------------------------------------------------------------
   Une carte de Sociétés ou d'Offres se clique : elle grandit jusqu'au centre
   de l'écran et dit tout ce qu'elle n'avait pas la place de dire (demande de
   Landry, 01/10). Première fenêtre du système, faite de ses pièces : la carte,
   la marque, les étiquettes, le sur-titre, les boutons — et, pour le voile,
   le verre de la barre du lot (même blanc, même flou).
   ========================================================================== */

/* La carte : on devine qu'elle s'ouvre. Pas de saut au survol — le lavis
   qui suit le curseur suffit, comme partout sur les cartes. */
.res--cliquable{cursor:pointer}
.res--cliquable:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Pendant que la fiche est ouverte, la carte d'où elle vient s'efface : c'est
   elle qui a grandi. */
.res--source{opacity:0;transition:none}

/* La page ne défile plus derrière. `scrollbar-gutter:stable` (plus haut)
   garde la place de la barre : rien ne bouge à l'ouverture. */
html.fiche-ouverte,html.fiche-ouverte body{overflow:hidden}
/* Un message né d'une action de la fiche (favori refusé…) passe devant. */
html.fiche-ouverte .toast{z-index:410}

.fiche-racine{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;padding:32px 16px;
}
.fiche__voile{
  position:absolute;inset:0;
  background:rgba(244,244,244,.55);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  opacity:0;transition:opacity var(--d2) var(--ease);
}
.fiche-racine.is-ouverte .fiche__voile{opacity:1}

.fiche{
  position:relative;z-index:1;
  width:min(680px,100%);max-height:min(760px,calc(100dvh - 64px));
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  border-color:var(--line-2);box-shadow:var(--shadow-lg);
  /* Le fondu de secours (navigateur sans View Transitions, ou carte sortie
     de la liste) ; le passage normal est plus bas. */
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity 240ms var(--ease),transform 340ms var(--ease-nav);
}
.fiche-racine.is-ouverte .fiche{opacity:1;transform:none}
.fiche:focus{outline:none}

.fiche__corps{overflow-y:auto;overscroll-behavior:contain;padding:28px 28px 8px}

/* Le bouton de fermeture : le bouton de symbole du favori (.res__fav),
   la croix étant le « + » tourné. */
.fiche__fermer{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:var(--r-sm);background:var(--surface);cursor:pointer;color:var(--grey);
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease);
}
.fiche__fermer:hover{background:var(--surface-3);color:var(--ink)}
.fiche__fermer:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fiche__fermer .sym{transform:rotate(45deg)}

.fiche__tete{display:flex;align-items:flex-start;gap:18px;padding-right:40px}
.co__mark.fiche__marque{width:56px;height:56px;border-radius:14px}
.fiche__qui{min-width:0;display:grid;gap:6px}
.fiche__n{margin:0;font-size:24px;line-height:1.25;font-weight:300;letter-spacing:-.02em;
  overflow-wrap:anywhere}
.fiche .fiche__sous{margin:0;font-size:14px;line-height:1.5;color:var(--grey)}

.fiche__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}

.fiche__bloc{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.fiche__t{display:block;margin:0 0 12px}

/* Libellé à gauche, valeur à droite — les paires de l'écran Candidatures
   (.suivi__kv), à la taille des cartes. */
.fiche__kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 18px;margin:0;font-size:14px}
.fiche__kv dt{color:var(--grey-2)}
.fiche__kv dd{margin:0;min-width:0;color:var(--ink-2);overflow-wrap:anywhere}
.fiche__kv a{color:var(--ink-2);border-bottom:1px solid var(--line-2);
  transition:color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.fiche__kv a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Les coordonnées : les lignes de la carte (.res__coord), sans limite de
   trois ni troncature. */
.fiche .res__coord{grid-template-rows:none;gap:8px}
.fiche .res__coord li{height:auto;min-height:22px;white-space:normal}
.fiche .res__coord a{white-space:normal;overflow-wrap:anywhere}

/* `.card p` (le système) grise et grossit les paragraphes des cartes : la
   fiche est une carte, on reprend la main sur les siens. */
.fiche .fiche__texte,.fiche .fiche__texte p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2);white-space:pre-line;
  overflow-wrap:anywhere}
.fiche .fiche__texte.faint{color:var(--grey-2)}
/* Le descriptif d'une annonce : paragraphes, intertitres et puces. */
.fiche .fiche__texte p{margin:0 0 10px}
.fiche .fiche__texte p:last-child{margin-bottom:0}
.fiche__texte strong{font-weight:500;color:var(--ink)}
.fiche .fiche__texte .fiche__inter{margin-top:16px;font-weight:500;color:var(--ink)}
.fiche__texte .fiche__inter:first-child{margin-top:0}
.fiche__texte ul{margin:0 0 10px;padding-left:18px}
.fiche__texte li{margin:3px 0}
.fiche__texte li::marker{color:var(--grey-2)}

/* Les offres d'une société : une ligne par annonce. */
.fiche__offres{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fiche__offres li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:14px;min-width:0}
.fiche__offres a{min-width:0;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.fiche__offres a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.fiche__offres .co__src{white-space:nowrap}

/* Le pied, hors du défilement : les actions restent à portée. « Postuler »
   à droite, au bleu du site, qui s'estompe au survol comme sur les cartes. */
.fiche__pied{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;
  padding:16px 28px;border-top:1px solid var(--line);background:var(--surface);
}
.fiche__pied .fiche__gauche{margin-right:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fiche__pied .btn{transition:opacity var(--d2) var(--ease)}
.fiche__pied .btn:hover{transform:none;box-shadow:none;opacity:.72}
.fiche__pied .btn--blue:hover{background:var(--blue)}
.fiche__pied .btn--ghost:hover{background:var(--surface)}

@media(max-width:620px){
  .fiche-racine{padding:16px}
  .fiche{max-height:calc(100dvh - 32px)}
  .fiche__corps{padding:22px 20px 8px}
  .fiche__pied{padding:14px 20px}
  .fiche__tete{gap:14px}
  .co__mark.fiche__marque{width:46px;height:46px;border-radius:12px}
  .fiche__n{font-size:20px}
  .fiche__kv{grid-template-columns:1fr;gap:2px}
  .fiche__kv dt{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .fiche{transition:none;transform:none}
}

/* ---- Le passage carte <-> fiche --------------------------------------------
   Transition d'éléments partagés (View Transitions API, js/fiche.js). La
   première version étirait la fiche depuis la carte : le contenu, écrasé,
   devait être caché, et l'on ne voyait passer qu'un rectangle blanc. Ici :
   - le CADRE (`fiche-cadre`) glisse et grandit de la carte à la fiche ; il
     découpe son contenu sans l'étirer — le contenu de la fiche se découvre
     à mesure, celui de la carte s'efface ;
   - la marque, le titre et « Postuler » voyagent chacun de leur place dans
     la carte à leur place dans la fiche, lisibles de bout en bout ;
   - la page se floute en fondu.
   Même courbe que la barre qui se détache (--ease-nav), à l'aller comme au
   retour. */
html.vt-fiche::view-transition-group(*){
  animation-duration:520ms;animation-timing-function:cubic-bezier(.32,.72,0,1);
}
html.vt-fiche::view-transition-old(root),
html.vt-fiche::view-transition-new(root){animation-duration:380ms;animation-timing-function:var(--ease)}
html.vt-fiche::view-transition-group(fiche-cadre){
  overflow:clip;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-lg);
}
/* L'image de la FICHE garde sa taille, collée en haut à gauche : le cadre
   la découvre en grandissant, la recouvre en rétrécissant — jamais étirée.
   L'image de la CARTE, petite et brève, suit le cadre (elle n'est visible
   que quand le cadre a presque sa taille à elle). */
html.vt-ouvre::view-transition-new(fiche-cadre),
html.vt-ferme::view-transition-old(fiche-cadre){
  inline-size:auto;block-size:auto;inset:0 auto auto 0;mix-blend-mode:normal;
}
html.vt-ouvre::view-transition-old(fiche-cadre),
html.vt-ferme::view-transition-new(fiche-cadre){
  inline-size:100%;block-size:100%;inset:0;mix-blend-mode:normal;
}
html.vt-ouvre::view-transition-old(fiche-cadre){animation:vt-fiche-sortie 200ms var(--ease) both}
html.vt-ouvre::view-transition-new(fiche-cadre){animation:vt-fiche-entree 300ms var(--ease) 70ms both}
html.vt-ferme::view-transition-old(fiche-cadre){animation:vt-fiche-sortie 240ms var(--ease) both}
html.vt-ferme::view-transition-new(fiche-cadre){animation:vt-fiche-entree 220ms var(--ease) 140ms both}
/* Le titre et la ligne d'activité changent de corps (14,5 -> 24 px) : les
   deux images suivent la HAUTEUR du groupe, et le relais est bref — un
   fondu sur toute la durée laissait voir deux titres superposés. */
html.vt-fiche::view-transition-old(fiche-titre),html.vt-fiche::view-transition-new(fiche-titre),
html.vt-fiche::view-transition-old(fiche-sous),html.vt-fiche::view-transition-new(fiche-sous){
  inline-size:auto;block-size:100%;inset:0 auto auto 0;mix-blend-mode:normal;
}
html.vt-fiche::view-transition-old(fiche-titre),
html.vt-fiche::view-transition-old(fiche-sous){animation:vt-fiche-sortie 130ms linear both}
html.vt-fiche::view-transition-new(fiche-titre),
html.vt-fiche::view-transition-new(fiche-sous){animation:vt-fiche-entree 170ms linear 60ms both}
@keyframes vt-fiche-sortie{to{opacity:0}}
@keyframes vt-fiche-entree{from{opacity:0}}

/* ============================================== POSTULER À UNE URL =======
   La scène « Collez le lien » de l'accueil (.sc-field, .sc-extract) portée
   en vrai : mêmes mesures, même rayon. La barre s'allume en bleu quand on y
   écrit, comme la scène quand le lien arrive. */
.lienbar{display:block}
.lienbar__f{display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 10px 10px 18px;min-height:60px;
  transition:border-color 300ms var(--ease)}
.lienbar__f:focus-within{border-color:var(--blue)}
.lienbar__champ{flex:1;min-width:0;display:flex;align-items:center;gap:11px;cursor:text}
.lienbar__champ .sym{color:var(--grey-2)}
.lienbar__in{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:14.5px;color:var(--ink)}
.lienbar__in::placeholder{color:var(--grey-2);opacity:1}
.lienbar__f .btn{flex:none}
.lienbar__etat{margin:10px 0 0 4px;min-height:1em}
.lienbar__etat:empty{display:none}

.extrait{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:6px var(--s-5);padding:16px 18px 16px 20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  animation:extrait-entre 460ms var(--ease) both}
@keyframes extrait-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.extrait__txt{min-width:0}
.extrait__t{margin:0}
.extrait__s{margin:3px 0 0}
.extrait__act{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;justify-content:flex-end}
.extrait__note{grid-column:1 / -1;margin:6px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.extrait__note:empty{display:none}
@media(max-width:620px){
  .extrait{grid-template-columns:1fr}
  .extrait__act{justify-content:flex-start}
  .lienbar__f{flex-wrap:wrap;padding:10px 10px 10px 14px}
  .lienbar__f .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.extrait{animation:none}}

/* ============================================ LE GUIDE DE LA CLÉ GEMINI ==
   (js/cle-guide.js) Une fiche agrandie un peu plus large, qui joue la
   création d'une clé sur une reproduction de Google AI Studio. La scène est
   dessinée à 640 × 400 et mise à l'échelle par le script. Les couleurs de la
   scène sont celles d'AI Studio (thème sombre), pas celles du système :
   c'est une capture animée, le candidat doit y reconnaître ce qu'il verra. */
/* La scène prend toute la largeur du texte (demande de Landry, 01/10) : la
   fiche d'un guide est donc plus haute que les autres pour tenir sans défiler. */
.fiche.fiche--guide{width:min(760px,100%);max-height:min(880px,calc(100dvh - 40px))}
/* Derrière un guide, la page reste visible, simplement floutée (demande de
   Landry, 01/10) : le voile est presque transparent, le flou fait le travail.
   On voit encore le Profil d'où l'on vient. */
.fiche-racine:has(.fiche--guide) .fiche__voile{
  background:rgba(244,244,244,.18);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  backdrop-filter:saturate(1.2) blur(10px);
}
.fiche--guide .fiche__tete .symtile{flex:none}
.guide{margin-top:22px}
.guide__cadre{position:relative;width:100%;aspect-ratio:640 / 400;overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--line-2);background:#131314;
  box-shadow:0 1px 2px rgba(16,22,28,.06),0 12px 32px rgba(16,22,28,.12)}
.guide__ecran{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;
  font-family:var(--font);font-size:12px;color:#e3e3e3;letter-spacing:0}
.guide__ecran [hidden]{display:none !important}
.guide__barre{height:34px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#202124;border-bottom:1px solid #2f3033}
.guide__points{display:flex;gap:6px}
.guide__points i{width:9px;height:9px;border-radius:50%;background:#5f6368}
.guide__url{flex:1;height:22px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:11px;
  background:#131314;color:#c4c7c5;font-size:11.5px}
.guide__url .sym{width:12px;height:12px;stroke:#9aa0a6}
.guide__page{position:absolute;top:34px;left:0;right:0;bottom:0;display:flex;
  transition:opacity 400ms var(--ease)}
.guide__page.is-vide{opacity:0}
.guide__menu{width:150px;flex:none;padding:14px 10px;background:#1b1c1d;display:flex;flex-direction:column;gap:2px}
.guide__studio{margin:0 0 12px 6px;font-size:13px;font-weight:500;color:#e3e3e3}
.guide__item{padding:6px 8px;border-radius:14px;color:#c4c7c5;font-size:11.5px}
.guide__item--sous{padding-left:18px}
.guide__item.is-actif{background:#004a77;color:#c2e7ff}
.guide__main{position:relative;flex:1;padding:18px 20px}
.guide__haut{display:flex;align-items:center;justify-content:space-between}
.guide__h{margin:0;font-size:18px;font-weight:400;color:#e3e3e3}
.guide__creer{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:15px;
  background:#a8c7fa;color:#062e6f;font-size:12px;font-weight:500;transition:transform 150ms var(--ease)}
.guide__creer .sym{width:13px;height:13px;stroke:#062e6f}
.guide__table{margin-top:18px;border:1px solid #2f3033;border-radius:10px;overflow:hidden}
.guide__th,.guide__ligne{display:grid;grid-template-columns:1.3fr 1.4fr .8fr 34px;align-items:center;gap:8px;padding:9px 12px}
.guide__th{background:#1b1c1d;color:#9aa0a6;font-size:11px}
.guide__vide{padding:26px 12px;text-align:center;color:#9aa0a6}
.guide__ligne{border-top:1px solid #2f3033;color:#c4c7c5;animation:guide-entre 380ms var(--ease) both}
.guide__ligne b{font-weight:500;color:#e3e3e3}
.guide__code{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#9aa0a6}
.guide__copier{width:26px;height:26px;display:grid;place-items:center;border-radius:13px;transition:background 150ms}
.guide__copier .sym{width:14px;height:14px;stroke:#c4c7c5}
.guide__copier.is-presse{background:#3c4043}
.guide__dialogue{position:absolute;left:50%;top:44%;width:330px;transform:translate(-50%,-50%);
  padding:18px;border-radius:14px;background:#282a2c;box-shadow:0 12px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:6px;animation:guide-dialogue 260ms var(--ease) both}
.guide__dt{margin:0 0 6px;font-size:15px;color:#e3e3e3}
.guide__lbl{font-size:10.5px;color:#9aa0a6;margin-top:4px}
.guide__champ{height:30px;display:flex;align-items:center;padding:0 10px;border:1px solid #5f6368;border-radius:6px;
  color:#e3e3e3;font-size:12px}
.guide__champ--select{color:#c4c7c5}
.guide__caret{width:1px;height:14px;margin-left:1px;background:#a8c7fa;animation:guide-caret 1s steps(1) infinite}
.guide__btns{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.guide__annuler{padding:6px 10px;color:#a8c7fa;font-size:12px}
.guide__ok{padding:6px 14px;border-radius:15px;background:#a8c7fa;color:#062e6f;font-size:12px;font-weight:500;
  transition:transform 150ms var(--ease)}
.guide__creer.is-presse,.guide__ok.is-presse,.guide__jbtn.is-presse{transform:scale(.94)}
.guide__copie{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 14px;border-radius:6px;
  background:#e3e3e3;color:#1f1f1f;font-size:11.5px;animation:guide-copie 260ms var(--ease) both}
/* Retour dans Jobunt : la section Clé Gemini de l'écran Profil, en miniature. */
.guide__jobunt{position:absolute;top:34px;left:0;right:0;bottom:0;padding:44px 90px;background:var(--page);color:var(--ink);
  display:flex;flex-direction:column;gap:6px;animation:guide-entre 320ms var(--ease) both}
.guide__jt{margin:0 0 8px;font-size:16px;font-weight:500;color:var(--ink)}
.guide__jobunt .guide__lbl{color:var(--grey)}
.guide__champ--jobunt{height:38px;border-color:var(--line-2);border-radius:var(--r-xs);background:var(--surface);color:var(--ink);
  font-family:ui-monospace,Consolas,monospace;font-size:12px}
.guide__jbtn{align-self:flex-start;margin-top:12px;padding:9px 18px;border-radius:var(--r-pill);background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:500;transition:transform 150ms var(--ease)}
.guide__jok{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--blue-deep);font-size:12.5px}
.guide__jok .sym{width:15px;height:15px}
/* Le curseur : une flèche blanche cernée de noir, et une onde au clic. */
.guide__curseur{position:absolute;left:0;top:0;z-index:5;width:0;height:0;pointer-events:none;
  transition:transform 700ms cubic-bezier(.45,.05,.25,1)}
.guide__curseur svg{position:absolute;left:-3px;top:-2px;width:22px;height:22px;max-width:none;fill:#fff;stroke:#111;stroke-width:1.4;stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.guide__onde{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;
  background:rgba(80,119,140,.45);opacity:0;transform:scale(.3)}
.guide__curseur.is-clic .guide__onde{animation:guide-onde 420ms var(--ease)}
@keyframes guide-onde{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes guide-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@keyframes guide-dialogue{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes guide-copie{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes guide-caret{50%{opacity:0}}

/* Les étapes, sous la scène, sur UNE ligne : les numéros se suivent et seule
   l'étape qui se joue déplie son texte — la fiche tient sans défiler. Celle
   en cours a son numéro dans le dégradé, celles passées au bleu. */
.guide__etapes{list-style:none;margin:16px 0 0;padding:0;display:flex;align-items:center;gap:8px;min-height:46px}
.guide__etape{display:flex;align-items:center;gap:12px;min-width:0;font-size:14px;line-height:1.45;color:var(--grey)}
.guide__etape b{font-weight:500;color:var(--ink)}
.guide__texte{display:none;min-width:0}
.guide__etape.is-actif{flex:1}
.guide__etape.is-actif .guide__texte{display:block;animation:guide-entre 300ms var(--ease) both}
.guide__num{flex:none;width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);font-size:12.5px;color:var(--grey-2);
  transition:background 300ms var(--ease),color 300ms var(--ease),border-color 300ms var(--ease)}
.guide__etape.is-fait .guide__num{border-color:var(--blue);color:var(--blue)}
/* Les numéros se cliquent (rejouer depuis cette étape). */
button.guide__num{padding:0;background:var(--surface);font-family:inherit;cursor:pointer}
button.guide__num:hover{border-color:var(--blue);color:var(--blue)}
button.guide__num:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.guide__etape.is-actif .guide__num{border-color:transparent;background:var(--grad);color:#fff}
.guide__liens{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;font-size:13px}
/* Les liens directs des etapes (10/10) : dans le texte de l etape en cours,
   et en raccourcis numerotes sous la scene, visibles toute la lecture. */
.guide__lien{margin-left:6px;white-space:nowrap}
.guide__raccourcis{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.guide__raccourci{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);
  font-size:13px;color:var(--ink);text-decoration:none;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.guide__raccourci:hover{border-color:var(--blue);background:var(--blue-wash)}
.guide__raccourci .guide__num{width:22px;height:22px;font-size:11.5px;border-color:var(--blue);color:var(--blue)}
.guide__raccourci .sym{width:14px;height:14px;color:var(--grey)}
/* Les fournisseurs sans animation : la meme numerotation, en liste. */
.guide__liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.guide__liste li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--grey)}
.guide__liste .guide__num{margin-top:-2px;border-color:var(--blue);color:var(--blue)}
.guide__liste .guide__texte{display:block}
.guide__liste b{font-weight:500;color:var(--ink)}
.guide__rejouer{font-size:13px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
/* Le champ et son bouton, dans le pied de la fiche. */
.guide__form{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.guide__form .input{flex:1;min-width:200px;height:44px}
.guide__form .notice{flex-basis:100%;margin:0}
.fiche--guide .fiche__corps{padding-bottom:18px}
@media (prefers-reduced-motion:reduce){
  .guide__curseur{transition:none}
  .guide__ligne,.guide__dialogue,.guide__copie,.guide__jobunt{animation:none}
}

/* La carte qui ouvre un guide (clé Gemini, boîte mail), dans le Profil. */
.guidecarte[hidden]{display:none}
.guidecarte{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:var(--s-5);text-align:left}
.guidecarte__txt{flex:1;min-width:0;display:grid;gap:3px}
.guidecarte .co__n{font-size:15px}
.guidecarte .guidecarte__d{margin:0;font-size:13.5px;line-height:1.45;color:var(--grey)}
.guidecarte .btn{flex:none}
.guidecarte .symtile{flex:none;width:42px;height:42px}
@media(max-width:620px){.guidecarte{flex-wrap:wrap}.guidecarte .btn{width:100%}}

/* ============================================= LE GUIDE DE LA BOÎTE MAIL ==
   (js/boite-guide.js) Même fiche et même moteur que le guide de la clé. La
   scène Gmail reprend le compte Google — thème clair, bleu Google — pour que
   le candidat y reconnaisse ce qu'il verra. */
/* La fiche en trois temps, au rythme des fiches du système : l'adresse
   (24 px sous l'en-tête), le guide dans un .fiche__bloc (filet, 24 + 20 px),
   le mot de passe dans le pied. */
.boite__adresse{margin-top:24px}
.boite__adresse .field{margin:0}
.boite__reconnu{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13.5px;line-height:1.45;
  color:var(--blue-deep)}
.boite__reconnu .sym{flex:none;width:16px;height:16px;margin-top:1px}
.boite__reconnu.is-inconnu{color:var(--grey)}
.boite__reconnu.is-inconnu .sym{display:none}
.boite__titre{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;
  margin-bottom:12px}
.boite__titre .eyebrow{margin:0}
.boite__liens{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.boite__liens:empty{display:none}
.boite__liens .guide__raccourcis{margin:0}
.boite__zone{margin:0}
.boite__guide .guide{margin-top:0}
.fiche__bloc.boite__guide{padding-top:18px}
.boite__guide .guide__etapes{margin-top:12px}
/* La scène Gmail a moins à montrer que celle d'AI Studio : 640 × 330 au lieu
   de 640 × 400. Elle garde toute la largeur, la fiche tient sans défiler. */
.boite__guide .guide__cadre{aspect-ratio:640 / 330}
.boite__guide .guide__ecran{height:330px}
.boite__guide .boite__page{padding:12px 26px}
.boite__guide .boite__entete{padding-bottom:10px;margin-bottom:12px}
.boite__guide .guide__jobunt{padding:28px 90px}
/* Le pied : le libellé au-dessus, puis le champ et le bouton sur une ligne. */
.boite__form .field__label{flex-basis:100%;margin:0 0 -2px}
@media(max-width:620px){.boite__titre{flex-direction:column;gap:6px}}
.fiche .boite__consigne{margin:0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.boite__consigne b{font-weight:500;color:var(--ink)}
.boite__zone .notice{margin:0}
.boite__manuel{margin-top:14px}
.boite__barre{background:#dee3ea;border-bottom-color:#c7ccd3}
.boite__url{background:#fff;color:#3c4043}
.boite__page{position:absolute;top:34px;left:0;right:0;bottom:0;background:#fff;color:#1f1f1f;
  padding:16px 26px;transition:opacity 400ms var(--ease)}
.boite__page.is-vide{opacity:0}
.boite__entete{font-size:14px;color:#444746;padding-bottom:12px;border-bottom:1px solid #e3e3e3;margin-bottom:16px}
.boite__vue{display:flex;flex-direction:column;gap:8px;animation:guide-entre 320ms var(--ease) both}
.boite__h{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:400;color:#1f1f1f;margin-bottom:6px}
.boite__retour{font-size:18px;color:#444746}
.boite__carte{border:1px solid #e3e3e3;border-radius:12px;padding:6px 0}
.boite__ct{padding:8px 16px 6px;font-size:13px;font-weight:500;color:#1f1f1f}
.boite__rang{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:12.5px;
  color:#1f1f1f;transition:background 200ms}
.boite__rang.is-vise{background:#e9eef6}
.boite__actif{display:flex;align-items:center;gap:5px;color:#146c2e}
.boite__actif .sym{width:14px;height:14px;stroke:#146c2e}
.boite__gris{color:#444746;font-size:11.5px}
.boite__texte{font-size:11.5px;line-height:1.5;color:#444746;max-width:520px}
.boite__texte--fort{color:#1f1f1f;margin-top:4px}
.boite__lbl{font-size:10.5px;color:#444746;margin-top:6px}
.boite__champ{width:300px;height:36px;display:flex;align-items:center;padding:0 12px;border:1px solid #747775;
  border-radius:4px;font-size:12.5px;color:#1f1f1f}
.boite__caret{background:#0b57d0}
.boite__creer{align-self:flex-start;margin-top:8px;padding:8px 18px;border-radius:18px;background:#0b57d0;color:#fff;
  font-size:12px;font-weight:500;transition:transform 150ms var(--ease)}
.boite__creer.is-presse,.boite__ok.is-presse{transform:scale(.94)}
.boite__dialogue{position:absolute;left:50%;top:48%;width:360px;transform:translate(-50%,-50%);
  padding:22px 22px 18px;border-radius:24px;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.28);
  display:flex;flex-direction:column;gap:8px;animation:guide-dialogue 260ms var(--ease) both}
.boite__dt{font-size:17px;color:#1f1f1f;margin-bottom:2px}
.boite__mdp{margin:6px 0;padding:14px;border-radius:8px;background:#fef7e0;text-align:center}
.boite__mdp span{font-family:ui-monospace,Consolas,monospace;font-size:17px;letter-spacing:.06em;color:#1f1f1f;
  padding:1px 3px;border-radius:2px;transition:background 200ms}
.boite__mdp span.is-selection{background:#a8c7fa}
.boite__ok{align-self:flex-end;margin-top:4px;padding:7px 18px;border-radius:18px;color:#0b57d0;font-size:12.5px;
  font-weight:500;transition:transform 150ms var(--ease)}
.boite__touche{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:7px 14px;border-radius:8px;
  background:#1f1f1f;color:#fff;font-size:12px;font-family:ui-monospace,Consolas,monospace;
  box-shadow:0 4px 14px rgba(0,0,0,.25);animation:guide-copie 260ms var(--ease) both}
@media (prefers-reduced-motion:reduce){.boite__vue,.boite__dialogue,.boite__touche{animation:none}}

/* ---- Adresse d'envoi : les réglages manuels repliés (01/10) -------------
   Le dépliant de la FAQ (.faq), resserré comme la liste des candidatures :
   c'est un réglage de secours, pas une question à lire. */
.faq.reglages{max-width:none;margin:var(--s-5) 0 0}
/* Un seul filet, au-dessus : celui du pied (.sect__foot) ferme le dépliant. */
.faq.reglages details{border-top:1px solid var(--line);border-bottom:0}
.faq.reglages summary{padding:15px 34px 15px 0;font-size:14px;color:var(--grey)}
.faq.reglages details[open] summary{color:var(--ink)}
.reglages__corps{display:grid;gap:var(--s-5);padding:var(--s-2) 0 var(--s-6)}
.reglages__corps .duo{margin:0}

/* ============================================================ PREMIERS PAS ==
   (premiers-pas.html, js/premiers-pas.js) Juste apres la confirmation du
   code : une carte blanche sur la photo du site, comme les e-mails. Pas de
   classe .photo ici : ses regles (titres et boutons en blanc) gagneraient
   l'interieur de la carte. */
.seuil{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;padding:26px 16px 48px;background-color:#567F95;
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  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"))}
@media (max-width:1000px){
  .seuil{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"))}
}
.seuil::before{content:"";position:absolute;inset:0;background:var(--scrim);opacity:.55;pointer-events:none}
.seuil > *{position:relative;z-index:1}
.seuil__top{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:28px}
.seuil__top > a:first-child{flex:none}
.seuil__top .logo{display:block;height:24px;color:#fff}
.seuil__tard{font-size:13.5px;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.seuil__tard:hover{border-bottom-color:#fff}
.seuil__tard[hidden]{display:none}
.seuil__carte{width:100%;max-width:600px;margin-block:auto;background:var(--surface);
  border-radius:var(--r-lg);padding:34px 40px 32px;
  box-shadow:0 2px 8px rgba(10,16,22,.16),0 24px 60px rgba(10,16,22,.28)}
@media (max-width:520px){.seuil__carte{padding:26px 22px 24px;border-radius:var(--r-md)}}
.seuil__tete{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.seuil__tete .eyebrow{color:var(--salmon)}
.seuil__prog{display:grid;grid-template-columns:repeat(4,28px);gap:6px}
.seuil__prog i{height:4px;border-radius:var(--r-pill);background:var(--line-2);
  transition:background 300ms var(--ease)}
.seuil__prog i.is-actif{background:var(--blue-soft)}
.seuil__prog i.is-fait{background:var(--grad)}
.seuil__etape[hidden]{display:none}
.seuil__etape .h2{margin:0 0 24px;font-size:27px;outline:none}
.seuil__lead{margin:-14px 0 24px;color:var(--grey);font-size:14.5px;line-height:1.6}
.seuil__etape .btn--block{margin-top:var(--s-6)}
.seuil__cvl{margin-bottom:var(--s-4)}
.seuil__cvl:empty{display:none}
.seuil .guidecarte{margin-bottom:var(--s-5)}
.seuil .sect__foot{margin-top:14px;padding-top:0;border-top:0}
.seuil__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;
  padding-top:20px;border-top:1px solid var(--line)}
.seuil__pied[hidden]{display:none}
.seuil__suite{display:flex;align-items:center;gap:20px}
.seuil__suite [hidden]{display:none}
.seuil__bilan{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:12px}
.seuil__bilan li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--grey)}
.seuil__bilan li.is-fait{color:var(--ink)}
.seuil__bilan .sym{flex:none;color:var(--blue)}
.seuil__bilan a{margin-left:auto;font-size:13.5px}
.seuil__point{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2)}
.seuil__note{margin:14px 0 0;text-align:center;font-size:13px;color:var(--grey)}

/* Quota gratuit épuisé (11/10) : l'offre Pro sous le message de l'envoi. */
.offrepro{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:var(--s-4);padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.offrepro p{margin:0;flex:1 1 260px;font-size:14px;color:var(--ink-2)}

/* ------------------------------------------------- PREMIER ÉCRAN DU LIEN --
   (11/10, demande de Landry) Sur « Postuler avec un lien », l'en-tête et la
   barre occupent tout le premier écran, centrés ; les guides viennent au
   défilement. La barre de l'application (≈ 61 px) se déduit pour un membre ;
   pour un visiteur, la barre flotte au-dessus et le rembourrage la couvre. */
main.cand[data-urlapply]{min-height:calc(100vh - 61px);min-height:calc(100svh - 61px);
  display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--s-7)}
body[data-visiteur] main.cand[data-urlapply]{min-height:100vh;min-height:100svh}
main.cand[data-urlapply] > .secs{width:100%}
/* Centré dans l'en-tête (18/10) : autant d'air au-dessus qu'au-dessous, la
   barre fixe du visiteur en plus. Sur téléphone, la barre de l'application
   passe sur deux lignes (≈ 113 px). */
main.cand[data-urlapply]{padding-block:var(--s-7)}
/* La carte du lien tient le centre (18/10) : trois rangées, le titre posé
   au-dessus, la carte au milieu ; la rangée du haut un peu plus grande la
   descend légèrement sous le milieu. */
main.cand[data-urlapply]{display:grid;grid-template-rows:1.12fr auto .88fr;justify-content:stretch}
main.cand[data-urlapply] > .head{grid-row:1;align-self:end}
main.cand[data-urlapply] > .secs{grid-row:2}
body[data-visiteur] main.cand[data-urlapply]{padding-top:calc(68px + var(--s-7))}
@media(max-width:860px){
  main.cand[data-urlapply]{padding-block:var(--s-5);min-height:calc(100vh - 113px);min-height:calc(100svh - 113px)}
  body[data-visiteur] main.cand[data-urlapply]{padding-top:calc(68px + var(--s-5))}
}
/* L'en-tête sur photo (18/10) : le texte passe en blanc par .photo ; ce qui
   s'ouvre ensuite (le texte à coller, l'annonce lue) garde l'encre sur son
   fond blanc, et l'état sous la barre reste lisible sur le voile. */
.urlhero .faint{color:rgba(255,255,255,.72)}
.urlhero .panel,.urlhero .extrait{color:var(--ink)}
.urlhero .extrait .micro{color:var(--grey-2)}
.urlhero .extrait .faint{color:var(--grey-2)}
.urlhero .extrait .btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);-webkit-backdrop-filter:none;backdrop-filter:none}
.urlhero .extrait .btn--ghost:hover{background:var(--surface-2);border-color:var(--grey-3)}
.urlhero .lienbar__etat,.urlhero .lienbar__etat.is-ok,.urlhero .lienbar__etat.is-ko{color:rgba(255,255,255,.92)}
.urlhero .lienbar__etat.is-ko{font-weight:500}
.urlhero .lienbar__etat a{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.urlhero .lienbar__f{box-shadow:0 2px 8px rgba(10,16,22,.16),0 24px 60px rgba(10,16,22,.24)}

/* Le choix de l'apparence dans l'en-tête du profil (11/10) : le sélecteur
   des tarifs, en plus petit. */
.page__act{align-items:center;flex-wrap:wrap}
.toggle--sm button{height:28px;padding:0 12px;font-size:12.5px}
.toggle--icones button{width:34px;padding:0;display:inline-grid;place-items:center}
/* Téléphone : la colonne garde sa place à côté de la pastille. */
@media(max-width:560px){.page__who{flex:1 1 0;gap:8px}}
.page__act{gap:var(--s-3)}
.field > .toggle{display:flex;width:max-content;max-width:100%}
.field > .toggle + .field__hint{display:block;margin-top:8px}

/* Écran Compte : sans prénom, le titre est l'adresse e-mail, d'un seul tenant ;
   elle se coupe où il faut plutôt que de toucher le bord (360 px, 17/10). */
[data-moi-nom]{overflow-wrap:anywhere}

/* Tactile : 16 px, sinon Safari iOS zoome sur le champ (la règle de components.css
   est écrasée par celle-ci, chargée après). */
@media (pointer:coarse){.lienbar__in{font-size:16px}.tok__in{padding-block:6px;margin-block:-6px}}