/* ==========================================================================
   Talent Afrik — feuille de style principale
   Approche « mobile first » : les regles de base ciblent le telephone,
   les media queries elargissent progressivement la mise en page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design (variables)
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------------
     Couleurs de marque — relevees directement sur le logo Talent Afrik :
       bleu marine  #022140   (le « TA », le continent, le mot TALENT)
       orange       #FD6B08   (le « A », l'arc, le mot AFRIK)
     Les nuances ci-dessous sont des declinaisons de ces deux couleurs.
     ------------------------------------------------------------------------ */
  --brand-950: #010D1B;
  --brand-900: #01182F;
  --brand-800: #022140;   /* marine du logo */
  --brand-700: #05305A;
  --brand-600: #0A4275;
  --brand-500: #12558F;
  --brand-400: #3F80BC;
  --brand-100: #D9E4F0;
  --brand-50:  #F2F6FA;

  --accent-700: #8F3A08;
  --accent-600: #C4520A;  /* orange assombri : lisible en petit texte */
  --accent-500: #FD6B08;  /* orange du logo */
  --accent-400: #FF8A3D;
  --accent-100: #FFEEE1;

  --ink-900: #0F1720;
  --ink-700: #2E3A47;
  --ink-500: #5C6A79;
  --ink-400: #7E8B99;
  --ink-300: #A8B3BE;
  --line:     #E1E7ED;
  --line-soft:#EEF2F6;

  --bg:       #F7F9FB;
  --surface:  #FFFFFF;
  --surface-2:#F1F4F8;

  --danger:   #B4342B;
  --danger-bg:#FBEDEC;
  --success:  #1B7A4B;
  --success-bg:#E7F5ED;
  --warn:     #9A6510;
  --warn-bg:  #FCF3E1;

  /* Typographie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.125rem;

  /* Espacement / rayons / ombres */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(2,33,64,.06);
  --shadow-md: 0 4px 16px rgba(2,33,64,.09);
  --shadow-lg: 0 12px 34px rgba(2,33,64,.16);
  --container: 1160px;
  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-500); }
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.22; margin: 0 0 var(--sp-3);
  letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: .35rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; border: 0 !important; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--brand-700); color: #fff;
  padding: .6rem 1rem; z-index: 999; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.section { padding: var(--sp-6) 0; }
.section--tight { padding: var(--sp-5) 0; }
.stack > * + * { margin-top: var(--sp-4); }
.page-body { min-height: 55vh; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-600); margin-bottom: .35rem;
}
.section-head .link-more { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. En-tete
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--line);
}
/* Le flou est pose sur un pseudo-element plutot que sur .site-header
   directement. Un `backdrop-filter` (ou `filter`) applique a un element
   transforme cet element en "containing block" pour tous ses descendants
   en `position: fixed` (specification CSS). Comme le menu mobile
   (.main-nav.is-open) est en `position: fixed` et se trouve dans le
   DOM a l'interieur de .site-header, il se retrouvait positionne et
   redimensionne par rapport aux ~68px du bandeau d'en-tete au lieu de
   l'ecran entier : sa hauteur calculee tombait a 0, ce qui le rendait
   invisible au clic sur le bouton mobile (les 3 traits horizontaux).
   En deplacant le flou sur ::before (qui n'a pas d'enfant), le menu
   redevient positionne par rapport a la fenetre, comme prevu. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  z-index: -1;
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--header-h);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { width: auto; height: 40px; }

/* Selecteur de langue (haut de page, a cote du bouton menu).
   IMPORTANT : ne pas mettre `margin-left:auto` ici. En desktop, `.main-nav`
   a aussi `margin-left:auto` (voir plus bas) ; avec deux marges auto dans le
   meme conteneur flex, l'espace libre se repartit entre les deux, donc la
   position du selecteur de langue depend de la largeur du bloc connexion /
   inscription / mon-compte. Resultat observe : le menu langue « saute » vers
   la droite une fois l'utilisateur inscrit ou connecte (le bloc auth devient
   plus etroit, donc plus d'espace libre est redistribue au selecteur).
   En ne gardant la marge auto que sur `.main-nav`, le selecteur reste colle
   au logo et seul le bloc nav+auth est pousse a droite, quelle que soit sa
   largeur. */
.lang-switcher { position: relative; flex-shrink: 0; margin-left: auto; }
.lang-switcher__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 42px; padding: 0 .7rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-900); cursor: pointer; font-weight: 600; font-size: var(--fs-sm);
}
.lang-switcher__toggle:hover { background: var(--brand-50); }
.lang-switcher__flag { display: block; width: 20px; height: 15px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.lang-switcher__menu img { display: inline-block; width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: middle; }
.lang-switcher__chevron { font-size: .7rem; transition: transform .15s ease; }
.lang-switcher.is-open .lang-switcher__chevron { transform: rotate(180deg); }
.lang-switcher__menu {
  display: none; position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  min-width: 170px; margin: 0; padding: .4rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.lang-switcher.is-open .lang-switcher__menu { display: block; }
.lang-switcher__menu a {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--r-sm);
  color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap;
}
.lang-switcher__menu a:hover,
.lang-switcher__menu a.is-active { background: var(--brand-50); color: var(--brand-700); }
[dir="rtl"] .lang-switcher__menu { right: auto; left: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-900); cursor: pointer; flex-shrink: 0;
}
.nav-toggle__icon-close { display: none; }
.nav-toggle.is-open .nav-toggle__icon-open { display: none; }
.nav-toggle.is-open .nav-toggle__icon-close { display: block; }

.main-nav { display: none; }
.main-nav.is-open {
  display: flex; flex-direction: column; position: fixed;
  top: var(--header-h); left: 0; right: 0; bottom: 0;
  background: var(--surface); z-index: 55;
  box-shadow: var(--shadow-lg); padding: var(--sp-4);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Verrouille le defilement de la page derriere le panneau mobile ouvert.
   `overflow:hidden` seul est insuffisant sur la plupart des navigateurs
   mobiles (le defilement tactile de la page continue quand meme derriere
   le panneau) ; `position: fixed` est la technique fiable multiplateforme.
   Le `top` negatif (qui compense le defilement en cours) est pose/retire
   dynamiquement par main.js au moment de l'ouverture/fermeture. */
body.nav-locked {
  position: fixed; left: 0; right: 0; overflow: hidden; width: 100%;
}
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav li + li { margin-top: .15rem; }
/* « :not(.btn) » est indispensable : sans lui, ces regles ecraseraient la
   couleur et les marges du bouton d'appel a l'action place dans le menu. */
.main-nav a:not(.btn) {
  display: block; padding: .85rem .6rem; border-radius: var(--r-sm);
  color: var(--ink-700); font-weight: 600; font-size: var(--fs-md);
}
.main-nav a:not(.btn):hover,
.main-nav a:not(.btn).is-active { background: var(--brand-50); color: var(--brand-700); }
.main-nav .btn { display: inline-flex; }
.header-cta { margin-top: var(--sp-2); }
.header-cta .btn { width: auto; }

.main-nav__auth {
  /* Espacement resserre pour rester proche du rendu compact de la version
     ordinateur (ou ces boutons sont simplement cote a cote, sans grand
     espace ni ligne de separation epaisse). */
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}
/* « Publier une offre », Connexion et Inscription utilisent .btn--block,
   pensee pour d'autres boutons pleine largeur ailleurs sur le site. Ici, on
   veut au contraire des pastilles a la taille de leur texte, comme sur la
   version ordinateur — pas etirees sur toute la largeur de l'ecran. */
.header-cta .btn.btn--block,
.main-nav__auth .btn--block { width: auto; }
.main-nav__logout { margin: 0; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  /* Selecteur de langue repositionne juste avant le premier lien du menu
     (Accueil), au lieu de rester colle au logo. On lui transfere la marge
     auto qui poussait auparavant .main-nav a droite : il n'y a toujours
     qu'un seul margin-left:auto dans ce conteneur flex, donc le
     positionnement reste stable quelle que soit la largeur du bloc
     connexion / inscription / mon-compte (voir commentaire plus haut). */
  .lang-switcher { margin-left: auto; }
  .main-nav {
    display: flex; flex-direction: row; align-items: center; margin-left: 0;
    position: static; box-shadow: none; padding: 0; overflow: visible; background: transparent;
  }
  .main-nav ul { display: flex; align-items: center; gap: .2rem; }
  .main-nav li + li { margin-top: 0; }
  .main-nav a:not(.btn) { padding: .5rem .85rem; font-size: var(--fs-base); }
  .header-cta { margin-top: 0; margin-left: .4rem; }
  .header-cta .btn { width: auto; }
  .main-nav__auth {
    margin-top: 0; margin-left: .8rem; padding-top: 0; border-top: 0;
    flex-direction: row; align-items: center; gap: .5rem; padding-left: .8rem; border-left: 1px solid var(--line);
  }
  .main-nav__auth .btn { white-space: nowrap; }
  /* Les boutons Connexion/Inscription portent la classe .btn--block (utile
     en menu mobile empile, ou ils doivent remplir toute la largeur). A
     partir du desktop le menu redevient une ligne horizontale : sans ce
     correctif, .btn--block (width:100%) les force quand meme a s'etirer
     dans le flex row, ce qui donne des pastilles bien trop larges/hautes
     autour de « Connexion » / « Inscription ». On revient a une largeur
     naturelle, fluide, identique dans l'esprit a l'affichage mobile. */
  .main-nav__auth .btn--block { width: auto; }
  .brand img { height: 46px; }
}

/* --------------------------------------------------------------------------
   5. Boutons et elements de formulaire
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-base); font-weight: 650; line-height: 1.2;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s, transform .12s;
  text-align: center;
  /* Le libelle d'un bouton ne doit jamais se retrouver coupe lettre par
     lettre : white-space + flex-shrink:0 l'empechent de se faire ecraser
     par un conteneur flex voisin plus large (titre long, etc.), y compris
     quand overflow-wrap/word-break sont herites d'un parent (voir le
     correctif mobile plus bas dans ce fichier). */
  white-space: nowrap; flex-shrink: 0;
}
.btn:active { transform: translateY(1px); }
/* Marine : action principale, presente partout (rechercher, filtrer, valider). */
.btn--primary { background: var(--brand-800); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }

/* Orange du logo : action la plus importante d'une page (postuler, publier).
   Le libelle est en marine, comme le mot « AFRIK » du logo : c'est le seul
   couple qui reste lisible (rapport de contraste 7,3:1) sur cet orange vif. */
.btn--accent, .btn--gold {
  background: var(--accent-500); color: var(--brand-800); font-weight: 700;
}
.btn--accent:hover, .btn--gold:hover { background: var(--accent-400); color: var(--brand-800); }
.btn--outline { background: transparent; border-color: var(--line); color: var(--ink-900); }
.btn--outline:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); }
.btn--ghost { background: var(--surface-2); color: var(--ink-700); }
.btn--ghost:hover { background: var(--brand-50); color: var(--brand-700); }
.btn--light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--light:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--sm { padding: .45rem .8rem; font-size: var(--fs-sm); }
.btn--lg { padding: .9rem 1.5rem; font-size: var(--fs-md); }
.btn--block { width: 100%; }

.field { display: block; margin-bottom: var(--sp-4); }
.field > label, .label {
  display: block; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-900);
  margin-bottom: .35rem;
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-400); margin-top: .3rem; }

/* Mise en evidence d'un champ obligatoire non rempli, au moment ou l'envoi
   du formulaire est bloque par le navigateur (voir form-validation-i18n.js).
   Sans ca, un champ requis oublie plus bas dans un long formulaire bloque
   silencieusement l'envoi : rien ne semble se passer au clic sur
   "Soumettre". */
.field--invalid input, .field--invalid select, .field--invalid textarea {
  border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.field--invalid > label { color: var(--danger); }

/* Habillage traduit des <input type="file"> (voir file-input-i18n.js) :
   le champ natif reste dans le DOM mais invisible, superpose au faux
   bouton pour garder un clic/clavier/upload natifs. */
.file-field {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; max-width: 100%;
}
.file-field__btn {
  display: inline-flex; align-items: center; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink-900); font-weight: 600;
  font-size: var(--fs-sm); white-space: nowrap; flex-shrink: 0;
}
.file-field__name {
  font-size: var(--fs-sm); color: var(--ink-400); overflow-wrap: anywhere;
}
.file-field__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}
.account-logo-preview { margin-bottom: .5rem; }
.account-logo-preview img {
  border-radius: var(--r-md); border: 1px solid var(--line); object-fit: contain; background: #fff;
}

/* Bouton Favoris (page offre) : sous la date, jamais coupe lettre par lettre. */
.job-favorite-form { margin-top: var(--sp-3); }
.job-favorite-btn { white-space: nowrap; }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: .68rem .8rem; font-family: inherit; font-size: var(--fs-base);
  color: var(--ink-900); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s;
}
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B63' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.1rem;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.check { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-base); }
.check input { margin-top: .22rem; accent-color: var(--brand-600); }

/* --------------------------------------------------------------------------
   6. Hero + recherche
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--brand-950) 0%, var(--brand-800) 48%, var(--brand-700) 100%);
  padding: var(--sp-7) 0 var(--sp-6);
}
.hero::after {
  content: ""; position: absolute; right: -18%; top: -35%;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(253,107,8,.34), rgba(253,107,8,0) 64%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-400); background: rgba(253,107,8,.14);
  border: 1px solid rgba(253,107,8,.38); padding: .3rem .7rem; border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}
.hero h1 { color: #fff; font-size: 1.85rem; letter-spacing: -.03em; margin-bottom: var(--sp-3); }
.hero h1 em { font-style: normal; color: var(--accent-400); }
.hero p.lede { color: #BDD1E6; font-size: var(--fs-md); margin-bottom: var(--sp-5); max-width: 620px; }

.search-panel {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-lg); position: relative; z-index: 1;
}
.search-grid { display: grid; gap: var(--sp-3); }
.search-grid .field { margin: 0; }
.search-panel .btn { width: 100%; }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5); margin-top: var(--sp-5);
  position: relative; z-index: 1;
}
.hero-stats div strong { display: block; font-size: var(--fs-xl); color: #fff; line-height: 1.1; }
.hero-stats div span { font-size: var(--fs-sm); color: #9FB8D2; }

@media (min-width: 720px) {
  .hero { padding: var(--sp-8) 0 var(--sp-7); }
  .hero h1 { font-size: 2.6rem; }
  .search-grid { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
  .search-panel .btn { width: auto; min-width: 130px; }
  .hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   7. Cartes d'offres
   -------------------------------------------------------------------------- */
.job-list { display: grid; gap: var(--sp-3); }
.job-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.job-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); }
.job-list--grid .job-card { display: flex; flex-direction: column; }
.job-list--grid .job-card__foot { margin-top: auto; }
.job-card__top { display: flex; gap: var(--sp-3); align-items: flex-start; }
.job-logo {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-700); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-md);
  border: 1px solid var(--brand-100); text-transform: uppercase;
  overflow: hidden;
}
.job-logo--img { background: #fff; padding: 4px; }
.job-logo--img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.job-card__head { flex: 1; min-width: 0; }
.job-card__title { font-size: var(--fs-lg); margin: 0 0 .2rem; letter-spacing: -.02em; }
.job-card__title a { color: var(--ink-900); }
.job-card__title a::after { content: ""; position: absolute; inset: 0; }
.job-card:hover .job-card__title a { color: var(--brand-600); }
.job-card__company { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; }
.job-card__meta {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem;
  font-size: var(--fs-sm); color: var(--ink-500);
}
.job-card__meta span { display: inline-flex; align-items: center; gap: .32rem; }
.job-card__meta svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }
.job-card__summary {
  margin: .7rem 0 0; font-size: var(--fs-base); color: var(--ink-500);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft);
}
.job-card__date { font-size: var(--fs-xs); color: var(--ink-400); }
.job-card .btn { position: relative; z-index: 2; white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs);
  font-weight: 650; padding: .22rem .55rem; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink-500); border: 1px solid var(--line-soft);
}
.tag--brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.tag--accent, .tag--gold { background: var(--accent-100); color: var(--accent-700); border-color: #FBD9C1; }
.tag--new   { background: var(--success-bg); color: var(--success); border-color: #CBE8D8; }

@media (min-width: 720px) {
  .job-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .job-list--grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   8. Grilles pays / secteurs
   -------------------------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.tile {
  min-width: 0;
  display: flex; align-items: center; gap: .65rem; padding: .8rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-900); font-weight: 600; font-size: var(--fs-base);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.tile:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); }
.tile__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: var(--brand-50);
  color: var(--brand-600); display: flex; align-items: center; justify-content: center;
}
.tile__icon svg { width: 17px; height: 17px; }
.tile__flag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
img.tile__flag { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; }
.tile__body { min-width: 0; }
.tile__body strong { display: block; font-weight: 650; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.tile__body span { display: block; font-size: var(--fs-xs); color: var(--ink-400); font-weight: 500; }

@media (min-width: 620px)  { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tile-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   9. Mise en page listing (filtres + resultats)
   -------------------------------------------------------------------------- */
.listing { display: grid; gap: var(--sp-5); align-items: start; min-width: 0; }
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.filters h2 { font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.filters .field { margin-bottom: var(--sp-3); }
.filters__actions { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.filters__actions .btn { flex: 1; }
.filters-toggle { width: 100%; margin-bottom: var(--sp-4); }

.results-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.results-count { font-size: var(--fs-sm); color: var(--ink-500); }
.results-count strong { color: var(--ink-900); }
.sort-form { display: flex; align-items: center; gap: .5rem; }
.sort-form select { width: auto; padding: .4rem 2rem .4rem .6rem; font-size: var(--fs-sm); }

.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-4); }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .5rem .3rem .7rem;
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700);
  border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600;
}
.chip a { color: var(--brand-600); font-weight: 700; line-height: 1; padding: 0 .15rem; }

@media (min-width: 960px) {
  .listing { grid-template-columns: 288px minmax(0, 1fr); gap: var(--sp-6); }
  .filters { position: sticky; top: calc(var(--header-h) + 16px); }
  .filters-toggle { display: none; }
  .filters { display: block !important; }
}

/* --------------------------------------------------------------------------
   10. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .35rem; margin-top: var(--sp-6); list-style: none; padding: 0;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px;
  height: 40px; padding: 0 .6rem; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm);
}
.pagination a:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }
.pagination .is-current { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pagination .is-disabled { opacity: .45; }
.pagination .gap { border: 0; background: none; min-width: 20px; }

/* --------------------------------------------------------------------------
   11. Page offre
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-400); margin-bottom: var(--sp-4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .35rem; color: var(--ink-300); }

.job-hero {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.job-hero h1 { font-size: var(--fs-2xl); margin-bottom: .4rem; }
.job-hero .company { font-size: var(--fs-md); font-weight: 650; color: var(--brand-600); }
.job-hero .job-card__meta { margin-top: var(--sp-4); font-size: var(--fs-base); }

.company-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--line-soft);
}
.company-facts__item {
  flex: 1 1 220px; background: var(--surface-2); border-radius: var(--r-md);
  padding: .7rem .9rem;
}
.company-facts__label {
  display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs);
  color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem;
}
.company-facts__label svg { width: 14px; height: 14px; flex-shrink: 0; }
.company-facts__value { display: block; font-weight: 650; font-size: var(--fs-sm); color: var(--ink-900); }

.job-layout { display: grid; gap: var(--sp-5); align-items: start; }
.job-content h2 {
  font-size: var(--fs-lg); margin-top: var(--sp-6); padding-bottom: .5rem;
  border-bottom: 2px solid var(--brand-100);
}
.job-content h2:first-child { margin-top: 0; }
.job-content ul, .job-content ol { padding-left: 1.1rem; list-style-type: disc; }
.job-content li::marker { color: var(--accent-500); }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.panel h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.panel--apply { border-color: var(--brand-100); background: var(--brand-50); }

/* ---------------------------------------------------------------------- */
/* Comptes publics : inscription, connexion, tableau de bord              */
/* ---------------------------------------------------------------------- */
.auth-shell { max-width: 460px; margin: 0 auto; }
.auth-shell h1 { font-size: var(--fs-xl); margin-bottom: .4rem; }
.auth-shell .panel { margin-top: 1.5rem; }

.role-toggle { display: flex; gap: .6rem; }
.role-toggle__option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem;
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm);
}
.role-toggle__option input { accent-color: var(--brand-600); }
.role-toggle__option:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }

.account-shell { max-width: 760px; margin: 0 auto; }
.account-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.account-header h1 { margin: .3rem 0 .1rem; font-size: var(--fs-xl); }
.account-jobs__row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line-soft);
}
.account-jobs__row:last-child { border-bottom: 0; }
.account-jobs__row > div:first-child { min-width: 0; }
.account-jobs__favorite-form { flex-shrink: 0; }
.panel--source { background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-500); }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex; justify-content: space-between; gap: var(--sp-3); padding: .55rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-base); margin: 0;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--ink-400); font-size: var(--fs-sm); }
.spec-list .v { font-weight: 650; color: var(--ink-900); text-align: right; }

@media (min-width: 960px) {
  .job-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-6); }
  .job-aside { position: sticky; top: calc(var(--header-h) + 16px); }
}

/* --------------------------------------------------------------------------
   12. Articles
   -------------------------------------------------------------------------- */
.article-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.article-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .16s, box-shadow .16s;
}
.article-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); }
.article-card__media {
  aspect-ratio: 16 / 9; background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
  display: flex; align-items: flex-end; padding: var(--sp-3); position: relative;
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.article-card__media .tag { position: relative; z-index: 1; background: rgba(255,255,255,.92);
  color: var(--brand-700); border-color: transparent; }
.article-card__body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.article-card__body h3 { font-size: var(--fs-md); margin-bottom: .4rem; }
.article-card__body h3 a { color: var(--ink-900); }
.article-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.article-card:hover h3 a { color: var(--brand-600); }
.article-card__excerpt { font-size: var(--fs-sm); color: var(--ink-500); margin: 0 0 var(--sp-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__foot { margin-top: auto; font-size: var(--fs-xs); color: var(--ink-400);
  display: flex; gap: .6rem; }

.prose { max-width: 720px; font-size: var(--fs-md); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-left: 1.25rem; list-style-type: disc; }
.prose li::marker { color: var(--accent-500); }
.prose blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-4); border-left: 3px solid var(--accent-500);
  background: var(--accent-100); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink-700);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.article-hero-media {
  aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-5);
  background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
}
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: var(--fs-sm);
  color: var(--ink-400); margin-bottom: var(--sp-5); }

@media (min-width: 700px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .article-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   13. Blocs divers
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--brand-900), var(--brand-700));
  color: #fff; border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #BDD1E6; max-width: 560px; margin: 0 auto var(--sp-5); }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.empty-state {
  text-align: center; padding: var(--sp-7) var(--sp-4); background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-500);
}
.empty-state h3 { color: var(--ink-900); }

.alert { padding: .8rem 1rem; border-radius: var(--r-md); font-size: var(--fs-base);
  margin-bottom: var(--sp-4); border: 1px solid transparent; }
.alert--success { background: var(--success-bg); color: var(--success); border-color: #CBE8D8; }
.alert--error   { background: var(--danger-bg);  color: var(--danger);  border-color: #F2D2CF; }
.alert--info    { background: var(--brand-50);   color: var(--brand-700); border-color: var(--brand-100); }
.alert--warn    { background: var(--warn-bg);    color: var(--warn); border-color: #F0DDB6; }

.notice-demo {
  display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm);
  background: var(--warn-bg); border: 1px solid #F0DDB6; color: var(--warn);
  padding: .7rem .9rem; border-radius: var(--r-md); margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-900); color: #A9BCD0; margin-top: var(--sp-7);
  padding: var(--sp-7) 0 var(--sp-5); font-size: var(--fs-md);
}
.footer-grid { display: grid; gap: var(--sp-6); }
.footer-brand img { width: auto; height: 52px; margin-bottom: 1rem; }
.footer-brand p { margin-top: .5rem; max-width: 340px; line-height: 1.6; }
.footer-col h3 {
  color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .45rem; }
.footer-col a { color: #A9BCD0; }
.footer-col a:hover { color: var(--accent-400); }
.footer-countries { columns: 2; column-gap: var(--sp-4); }
.footer-bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: var(--fs-xs); color: #7E93AB;
}
.footer-bottom a { color: #7E93AB; }
.footer-bottom a:hover { color: var(--accent-400); }

@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; min-width: 0; }
}

/* --------------------------------------------------------------------------
   15. Impression
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .job-aside, .filters, .pagination, .cta-band { display: none !important; }
  body { background: #fff; }
  .job-hero, .panel { border: 0; padding: 0; }
}

/* Reduction des animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   16. Correctifs mobile (telephone uniquement)
   N'affecte jamais l'affichage a partir de 720px (voir min-width plus haut) :
   tout ce bloc est confine sous 719px et ne modifie rien pour l'ordinateur.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Empeche les mots/URLs longs de faire deborder les conteneurs de texte */
  h1, h2, h3, h4, p, li, blockquote, .job-hero, .prose, .panel {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Marges laterales reduites mais jamais collees au bord sur petit ecran */
  .container { padding-left: var(--sp-3); padding-right: var(--sp-3); }

  /* Le fil d'ariane peut contenir des titres longs : autorise le retour a la ligne propre */
  .breadcrumb { line-height: 1.5; }

  /* Cartes offres/tuiles : evite tout debordement horizontal residuel */
  .job-card, .tile, .panel, .job-hero { max-width: 100%; }

  /* Boutons pleine largeur sur mobile pour eviter le texte coupe */
  .search-panel .btn { width: 100%; }

  /* Texte du footer legerement plus grand pour rester lisible sur petit ecran */
  .site-footer { font-size: 1.0625rem; }
}

/* Colonnes de pays en pied de page : une seule colonne sous 480px pour rester lisible */
@media (max-width: 480px) {
  .footer-countries { columns: 1; }
}

/* Tres petits ecrans (vieux telephones, ~360px et moins) */
@media (max-width: 380px) {
  .container { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  h1 { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   Editeur riche (Quill) sur le formulaire public "Publier une offre",
   identique a celui de l'admin.
   -------------------------------------------------------------------------- */
.rich-editor-mount { background: #fff; border-radius: var(--r-md); overflow: hidden; }
.rich-editor-mount .ql-toolbar.ql-snow {
  border-color: var(--line); border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
}
.rich-editor-mount .ql-container.ql-snow {
  border-color: var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm); min-height: 220px;
}
.rich-editor-mount .ql-editor { min-height: 220px; line-height: 1.6; }
.rich-editor-mount .ql-editor h1 { font-size: 1.6em; }
.rich-editor-mount .ql-editor h2 { font-size: 1.4em; }
.rich-editor-mount .ql-editor h3 { font-size: 1.2em; }
.rich-editor-mount .ql-editor h4 { font-size: 1.08em; }
.rich-editor-mount .ql-editor h5 { font-size: 1em; font-weight: 700; }
.rich-editor-mount .ql-editor h6 { font-size: .92em; font-weight: 700; text-transform: uppercase; }

@media (max-width: 719px) {
  .rich-editor-mount .ql-toolbar.ql-snow { padding: 6px; }
  .rich-editor-mount .ql-editor { min-height: 180px; }
}

/* --------------------------------------------------------------------------
   Emplacements publicitaires Google AdSense (voir /admin/publicites)
   -------------------------------------------------------------------------- */
.ad-slot {
  max-width: 100%;
  overflow: hidden;
  margin: var(--sp-6, 1.5rem) auto;
  text-align: center;
  min-height: 0;
}
.ad-slot:empty { display: none; margin: 0; }
.ad-slot ins.adsbygoogle { max-width: 100%; }

/* --------------------------------------------------------------------------
   Support RTL (arabe) — le japper `dir="rtl"` est pose sur <html> par le
   middleware de langue. On inverse ici les proprietes directionnelles les
   plus visibles sans reconstruire toute la mise en page.
   -------------------------------------------------------------------------- */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .header-inner { flex-direction: row-reverse; }
/* Pas de marge auto ici non plus en RTL, meme raison qu'en LTR plus haut :
   seul `.main-nav` doit porter la marge auto qui le pousse a l'extremite. */
[dir="rtl"] .lang-switcher { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .breadcrumb ol { flex-direction: row-reverse; }
[dir="rtl"] .tags,
[dir="rtl"] .btn-row,
[dir="rtl"] .job-card__meta,
[dir="rtl"] .job-card__foot,
[dir="rtl"] .search-grid,
[dir="rtl"] .company-facts,
[dir="rtl"] .pagination { direction: rtl; }
[dir="rtl"] .job-card__top { flex-direction: row-reverse; }
[dir="rtl"] .job-hero > div:first-child { flex-direction: row-reverse; }
[dir="rtl"] .main-nav__auth { border-left: 0; }
@media (min-width: 900px) {
  [dir="rtl"] .main-nav__auth { border-left: 0; border-right: 1px solid var(--line); padding-left: 0; padding-right: .8rem; margin-left: 0; margin-right: .8rem; }
  [dir="rtl"] .header-cta { margin-left: 0; margin-right: .4rem; }
}


/* --------------------------------------------------------------------------
   16. Calque "ouvrir dans le navigateur" (navigateur integre TikTok)
   -------------------------------------------------------------------------- */
.iab-overlay {
  --iab-cyan: #12E8DA;
  --iab-pink: #FE2C55;
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(480px 320px at 88% 4%, rgba(254,44,85,.16), transparent 70%),
    radial-gradient(420px 300px at 6% 96%, rgba(18,232,218,.10), transparent 70%),
    #0A0A0C;
  display: flex; flex-direction: column;
  padding: max(8px, env(safe-area-inset-top)) 14px 24px;
  overflow-y: auto;
}

/* Le calque s'affiche par-dessus le navigateur integre lui-meme : le vrai
   menu "..." de ce navigateur reste visible tout en haut de l'ecran (hors
   de notre page, dans la barre du navigateur). La fleche doit donc pointer
   le plus haut et le plus a droite possible, au plus pres de ce bouton
   reel, pour qu'il n'y ait aucune ambiguite sur l'endroit a toucher. */
.iab-overlay__hero { align-self: flex-end; text-align: right; margin: 0 2px clamp(1.1rem, 4.5vh, 2.2rem) 0; }
.iab-overlay__arrow {
  width: 50px; height: 50px; margin-left: auto;
  filter: drop-shadow(0 0 8px var(--iab-pink)) drop-shadow(0 0 18px rgba(254,44,85,.55));
  animation: iab-arrow-drift 2.4s ease-in-out infinite;
}
.iab-overlay__arrow svg { width: 100%; height: 100%; }
@keyframes iab-arrow-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4px, -4px); }
}
.iab-overlay__badge {
  display: inline-block; margin-top: .5rem; padding: .55rem 1rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-full); color: #fff; font-weight: 800; font-size: .9rem;
  letter-spacing: .01em; white-space: nowrap;
}

.iab-overlay__card {
  margin: auto 0; width: 100%; max-width: 460px; align-self: center;
  background: #17171A; border: 1px solid rgba(255,255,255,.06);
  border-radius: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  padding: 2.1rem 1.6rem 1.8rem; text-align: center;
}

.iab-overlay__brand {
  margin: 0 0 1.1rem; font-size: clamp(1.7rem, 7vw, 2.1rem); font-weight: 900;
  letter-spacing: .01em; color: #fff; text-transform: uppercase;
  text-shadow: -2px 0 0 var(--iab-cyan), 2px 0 0 var(--iab-pink);
}
.iab-overlay__lead {
  margin: 0 0 1.8rem; color: rgba(255,255,255,.78); font-size: 1.15rem;
  font-weight: 700; line-height: 1.35;
}

.iab-overlay__step {
  display: flex; align-items: flex-start; gap: .9rem; text-align: left;
  background: rgba(255,255,255,.03); border-radius: 18px; padding: 1.1rem 1.2rem;
  position: relative; overflow: hidden;
}
.iab-overlay__step + .iab-overlay__step { margin-top: 1rem; }
.iab-overlay__step::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 4px; border-radius: var(--r-full);
}
.iab-overlay__step--1::before { background: var(--iab-cyan); }
.iab-overlay__step--2::before { background: var(--iab-pink); }

.iab-overlay__num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
}
.iab-overlay__step--1 .iab-overlay__num { background: rgba(18,232,218,.22); color: var(--iab-cyan); }
.iab-overlay__step--2 .iab-overlay__num { background: rgba(254,44,85,.22); color: var(--iab-pink); }

.iab-overlay__step p {
  margin: 0; color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.4;
}
.iab-overlay__dots {
  display: inline-flex; align-items: center; gap: 2px; vertical-align: middle;
  margin: 0 .15rem; padding: .35rem .5rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.1);
}
.iab-overlay__dots span { width: 4px; height: 4px; border-radius: 50%; background: #fff; }

.iab-overlay__underline {
  text-decoration: underline; text-decoration-color: var(--iab-pink);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.iab-overlay__extlink { width: 16px; height: 16px; color: var(--iab-pink); margin-top: .5rem; }


@media (prefers-reduced-motion: reduce) {
  .iab-overlay__arrow { animation: none; }
}

/* --- Boutons de partage (offres et articles) ------------------------------ */
.share-buttons {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.share-buttons__label { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
.share-buttons__list { display: flex; gap: .6rem; }
.share-btn {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; flex-shrink: 0; transition: opacity .15s ease;
}
.share-btn svg { width: 19px; height: 19px; }
.share-btn:hover { opacity: .85; }
.share-btn--whatsapp { background: #25D366; }
.share-btn--facebook { background: #1877F2; }
.share-btn--telegram { background: #229ED9; }
.share-btn--linkedin { background: #0A66C2; }