/* ==========================================================================
   Devenia — couche CSS partagée par les 10 pages.

   Elle est chargée APRÈS le <style> en ligne de chaque page : à spécificité
   égale, ce sont donc ses règles qui font autorité. On y regroupe uniquement
   ce qui doit rester identique partout : les garde-fous de largeur mobile et
   le wordmark. Le reste du style demeure propre à chaque page.
   ========================================================================== */

:root{
  /* Bleu du point du wordmark : assez clair pour rester lisible sur l'en-tête
     marine (--ink #0D1330) comme sur le pied de page. */
  --azure:#5B8DEF;
}

/* --------------------------------------------------------------------------
   1) Garde-fous de largeur

   Rien ne doit pouvoir rendre le document plus large que l'écran. Sur iOS
   Safari, un débordement horizontal fait dézoomer la page entière : le
   contenu se retasse dans la partie gauche et la droite reste vide.

   On évite volontairement overflow-x:hidden sur html/body, qui masquerait le
   symptôme et casserait les en-têtes en position:sticky. On traite la cause.
   -------------------------------------------------------------------------- */
img, svg, video, iframe, canvas, table{ max-width:100%; }

/* Un conteneur flex refuse par défaut de descendre sous la largeur min-content
   de son contenu ; sans min-width:0 il pousse le document vers la droite. */
.wrap, .nav, .nav-right, .nav-links{ min-width:0; }

/* Plutôt que d'élargir le document, la barre de navigation passe à la ligne. */
.nav{ flex-wrap:wrap; }
.nav-right{ flex-wrap:wrap; justify-content:flex-end; }

/* Les enfants de grille/flex doivent pouvoir descendre sous leur largeur
   min-content, sinon un seul libellé long élargit toute la piste. */
.partners-grid > *, .tiers > *, .who-grid > *, .grid > *,
.program-grid > *, .video-grid > *, .radar-card > *{ min-width:0; }

@media (max-width:420px){
  /* Sur les plus petits écrans, un libellé de bouton peut passer à la ligne :
     un .btn en white-space:nowrap et width:100% imposait sinon sa largeur
     min-content à sa carte, et donc au document (298px pour 264 disponibles
     sur un écran de 320px). */
  .btn{ white-space:normal; }
}

@media (max-width:860px){
  /* Les deux boutons longs de l'accueil sont en white-space:nowrap : ils ne
     peuvent pas se rétrécir et forçaient le document à ~627px de large, quelle
     que soit la taille du téléphone. La règle d'origine ciblait
     « .nav > a.btn-ghost », or ces liens sont enfants de .nav-right : le
     sélecteur ne correspondait à aucun élément et ne masquait donc rien. */
  .nav-right > a.btn-ghost{ display:none; }

  /* L'en-tête peut grandir au lieu de rogner un wordmark passé sur deux lignes. */
  .nav{ height:auto; min-height:66px; row-gap:8px; }
}

/* --------------------------------------------------------------------------
   2) Wordmark « Devenia • »

   Le point bleu doit rester collé immédiatement à droite de « Devenia », sur
   la même ligne, quelle que soit la largeur de l'écran.
   -------------------------------------------------------------------------- */
.logo{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:.34em;
  min-width:0;
}

/* Le mot et son point forment un bloc indivisible : nowrap sur le conteneur,
   et aucun rétrécissement possible pour le point. position:relative pour
   servir d'ancre à .logo-dot, devenu une cible positionnée derrière le mot
   (voir plus bas). */
.logo-word{
  /* position:relative + z-index crée son PROPRE contexte d'empilement :
     sans le z-index, le z-index négatif de .logo-dot remonte chercher le
     contexte d'empilement le plus proche plus haut dans le DOM (souvent
     bien au-delà de .logo-word), et la cible se retrouve occultée par un
     arrière-plan opaque ailleurs sur la page — repéré en testant le pied de
     page (fonctionnait par accident dans la nav seulement parce que
     position:sticky crée elle-même un contexte d'empilement). */
  position:relative;
  z-index:0;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  white-space:nowrap;
  flex:0 0 auto;
  /* La cible (voir .logo-dot) déborde maintenant jusqu'à ~1.3em à droite du
     mot (agrandie le 23 sept 2026, voir .logo-dot) : cette marge réserve la
     place pour elle avant un éventuel suffixe de page (.logo-sub) ou lien
     « ← Retour » (.logo + a), pour qu'ils ne se retrouvent pas sous la lueur. */
  margin-right:0;
}
/* Pont réseau au-dessus du mot (test, non publié tant que Mathieu ne le demande pas).
   Positionné en absolu pour ne pas décaler le suffixe « — page ». */
.logo-word::before{
  content:"";
  position:static;
  display:block;
  width:4.65em;
  height:.7em;
  margin:0 0 -.38em;
  background:url("/assets/logo-bridge.svg") center bottom / 100% 100% no-repeat;
  pointer-events:none;
  position:relative;
  z-index:1;
}
.logo-word::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3.6em;
  height:3.6em;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center;
  background:radial-gradient(circle, rgba(247,199,132,.22) 0%, rgba(255,122,89,.08) 42%, rgba(255,122,89,0) 72%);
  filter:blur(.5em);
  z-index:-1;
  opacity:0;
  pointer-events:none;
  animation:logoBridgeFlood 16s linear infinite;
}
@keyframes logoBridgeBeat{
  0%, 14%{ filter:brightness(1) saturate(1); }
  26%{ filter:brightness(2.05) saturate(1.2); }
  100%{ filter:brightness(1) saturate(1); }
}
@keyframes logoBridgeFlood{
  0%, 18%{ opacity:0; filter:blur(.55em); transform:translate(-50%,-50%) scale(1.05); }
  30%{ opacity:.16; filter:blur(.7em); transform:translate(-50%,-50%) scale(1.5); }
  52%{ opacity:.05; filter:blur(1em); transform:translate(-50%,-50%) scale(2.3); }
  70%, 100%{ opacity:0; filter:blur(1.25em); transform:translate(-50%,-50%) scale(2.9); }
}
@media (prefers-reduced-motion:reduce){
  .logo-word::before{ animation:none; }
  .logo-word::after{ animation:none; opacity:0; }
}
.logo-name{ position:relative; z-index:1; }
.logo-dot{ display:none; }
.logo-d{
  background:linear-gradient(90deg,#F7C784 0%,#F2A94E 42%,#FF7A59 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.nav{ height:auto; min-height:74px; align-items:center; }

/* 23 sept 2026 : le point est devenu une « cible » à trois anneaux bleus,
   façon lever de soleil (demande de Mathieu). Positionnée en absolu, à
   l'endroit où vivait le point (juste après le mot), mais en arrière-plan :
   le texte « Devenia » reste un flex item normal (z-index auto) qui passe
   donc devant ce descendant à z-index négatif, sans avoir à toucher le HTML
   des 16 pages qui partagent ce wordmark.
   Anneaux en radial-gradient plutôt qu'en box-shadow à spread : à ce
   rapport taille/étalement, le spread de box-shadow rendait un carré aux
   coins arrondis au lieu d'un cercle (limite de rendu de Chromium à fort
   spread sur border-radius:50%) — repéré par capture zoomée. Le gradient
   reste un cercle parfait quelle que soit la taille.
   Agrandie à 1.8em et bandes élargies (23 sept 2026, retouche demandée par
   Mathieu : "la résolution de la cible est mauvaise") — à 1.5em, chaque
   anneau ne faisait que ~1,5-2px de large : à cette épaisseur, l'anti-
   aliasing du navigateur floute quasi tout l'anneau, d'où le rendu "mauvaise
   résolution". Anneaux et espaces élargis proportionnellement dans une
   cible un peu plus grande pour laisser assez de pixels à chaque bande.
   L'animation a aussi changé de nature : l'ancienne version mettait toute
   la forme à l'échelle (scale) en boucle, ce qui rééchantillonnait le
   gradient à chaque frame et ajoutait SON PROPRE flou pendant le pulse —
   la cible au repos ne bouge donc plus (reste nette en permanence) ; l'effet
   de battement vit maintenant uniquement dans les anneaux ::before/::after
   ci-dessous (voir @keyframes logoRingPing), qui sont de simples cercles
   fins et se prêtent bien à l'agrandissement animé. */
.logo-dot{
  position:absolute;
  right:-.95em; top:50%;
  width:1.32em; height:1.32em;
  transform:translateY(-50%);
  border-radius:50%;
  z-index:-1;
  /* var(--surf-dark, #0D1330) : cette variable de thème clair/sombre n'existe
     que sur index.html. #0D1330 correspond au fond marine statique du
     nav/pied de page des 15 autres pages (var(--ink) chez elles). */
  background:radial-gradient(circle,
    var(--azure) 0% 18%,
    var(--surf-dark, #0D1330) 18% 32%,
    rgba(91,141,239,.7) 32% 48%,
    var(--surf-dark, #0D1330) 48% 62%,
    rgba(91,141,239,.5) 62% 78%,
    var(--surf-dark, #0D1330) 78% 90%,
    rgba(91,141,239,.35) 90% 100%
  );
  filter:drop-shadow(0 0 .08em rgba(91,141,239,.4));
  pointer-events:none;
  /* 23 sept 2026, demande de Mathieu : "je veux que tout à partir du centre
     s'anime" — jusqu'ici seuls les 2 anneaux ::before/::after bougeaient,
     la cible elle-même (le dégradé statique) restait figée. On ne remet PAS
     un scale sur cet élément (c'est justement ce qui causait le flou par
     rééchantillonnage, voir plus haut) : à la place, sa lueur (drop-shadow)
     respire en synchronisation avec les anneaux ci-dessous, sans jamais
     redimensionner le dégradé lui-même — la cible reste toujours nette, mais
     participe visuellement au même battement, comme si tout rayonnait depuis
     le centre. */
  animation:logoCoreGlow 3s ease-in-out infinite;
}
@keyframes logoCoreGlow{
  0%, 100%{ filter:drop-shadow(0 0 .08em rgba(91,141,239,.4)); }
  50%{ filter:drop-shadow(0 0 .22em rgba(91,141,239,.75)); }
}
/* Battement de cœur réel des anneaux (23 sept 2026, demande de Mathieu :
   "pas d'effet earth beat pour les anneaux de la cible") — deux anneaux fins
   superposés à la cible, qui s'agrandissent et s'effacent en boucle,
   décalés d'une demi-période l'un par rapport à l'autre (façon écho radar /
   pouls). Partent d'une échelle proche de 0 (23 sept 2026 : "à partir du
   centre") pour qu'on les voie vraiment naître au centre et grandir à
   travers toute la cible, plutôt qu'apparaître déjà à mi-chemin. */
.logo-dot::before, .logo-dot::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid var(--azure);
  opacity:0;
  /* 3s (était 1.8s) : demande de Mathieu, "l'animation est trop rapide" —
     un battement plus lent et plus posé. */
  animation:logoRingPing 3s ease-out infinite;
}
.logo-dot::after{ animation-delay:1.5s; }
@keyframes logoRingPing{
  0%{ transform:scale(.1); opacity:.85; }
  70%{ transform:scale(1.4); opacity:0; }
  100%{ transform:scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .logo-dot::before, .logo-dot::after{ animation:none; opacity:0; }
}

/* Le lien de retour placé juste après le wordmark reste d'un seul tenant :
   sans cela « ← » et « Retour » se retrouvaient sur deux lignes. */
.logo + a{ white-space:nowrap; }

/* Le suffixe de page (« — Tableau de bord »), lui, peut passer à la ligne. */
.logo-sub{ white-space:normal; min-width:0; }

@media (max-width:600px){
  /* Un cran plus compact pour que « Devenia • » et le suffixe de page tiennent
     confortablement jusqu'à 320px de large. */
  .logo-sub{ font-size:.84em; opacity:.92; }
}

/* --------------------------------------------------------------------------
   3) Étiquettes de métier (.tag)

   Un titre de poste, un secteur ou un programme de formation sans espaces
   (mot composé long, sigle collé) ne doit jamais élargir sa pastille au-delà
   de la carte qui la contient : sans ces règles, le texte débordait de la
   pastille arrondie sur les profils d'entreprise (répertoire et tableau de
   bord) dès qu'un libellé dépassait la largeur prévue.
   -------------------------------------------------------------------------- */
.tag{ display:inline-block; white-space:normal; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }

button,
input[type="button"],
input[type="submit"],
input[type="reset"]{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  -webkit-tap-highlight-color:transparent;
}
button:focus,
.btn:focus,
a.btn:focus{ outline:none; }
button,
input[type="button"],
input[type="submit"],
.btn,
a.btn,
.prog-add,
.prog-link,
.filter-chip,
.filter-toggle,
.category-chip{
  transition:transform .12s ease, filter .12s ease;
}
button:active:not(:disabled),
input[type="button"]:active,
input[type="submit"]:active,
.btn:active,
a.btn:active,
.prog-add:active,
.prog-link:active,
.filter-chip:active,
.filter-toggle:active,
.category-chip:active{
  transform:translateY(2px) scale(.985);
  filter:brightness(.96);
}
@media (prefers-reduced-motion:reduce){
  button:active, .btn:active, a.btn:active, .prog-add:active{ transform:none; }
}
/* Ancres #company-<id> et postes (entreprises.html) : la cible n'est plus
   cachée sous l'en-tête collant (23 oct. 2026). */
[id^="company-"], .metier-card{ scroll-margin-top:calc(var(--dv-head, 96px) + 12px); }