.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );word-spacing:var( --e-global-typography-text-word-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );word-spacing:var( --e-global-typography-text-word-spacing );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );word-spacing:var( --e-global-typography-text-word-spacing );}}/* Start custom CSS for text-editor, class: .elementor-element-839cb0e *//* ======================================================================
   Police des titres CSS
   ====================================================================== */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap');

/* ======================================================================
   Icone CSS
   ====================================================================== */
:root {
  --gear: #2b7bcb;
  --person: #3c4650;
  --bg: #ffffff;
  --leaf: #28a745;
  --soil: #6b4a2f;
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-family: system-ui, sans-serif;
}
/* Taille de l'icône : plus petite mais bien visible */
.icon-plante {
  width: clamp(110px, 18vw, 160px);
  height: auto;
  display: block;
}
/* Ensemble : disparition douce en fin de cycle, puis la boucle repart */
.plante-groupe {
  animation: plante-cycle 6s ease-in-out infinite;
}
/* Terre : le monticule se forme */
.plante-sol {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: plante-sol 6s ease-out infinite;
}
/* Tige : sort de la terre */
.plante-tige {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: plante-tige 6s ease-out infinite;
}
/* Les trois feuilles s'ouvrent l'une après l'autre */
.plante-feuille {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.plante-feuille-g { animation: plante-feuille-g 6s ease-out infinite; }
.plante-feuille-d { animation: plante-feuille-d 6s ease-out infinite; }
.plante-feuille-h { animation: plante-feuille-h 6s ease-out infinite; }
@keyframes plante-cycle {
  0%, 92% { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes plante-sol {
  0%      { transform: scaleY(0); }
  8%, 100% { transform: scaleY(1); }
}
@keyframes plante-tige {
  0%      { stroke-dashoffset: 100; opacity: 0; }
  8%      { stroke-dashoffset: 100; opacity: 1; }
  38%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes plante-feuille-g {
  0%, 38% { transform: scale(0); }
  52%     { transform: scale(1.12); }
  58%, 100% { transform: scale(1); }
}
@keyframes plante-feuille-d {
  0%, 46% { transform: scale(0); }
  60%     { transform: scale(1.12); }
  66%, 100% { transform: scale(1); }
}
@keyframes plante-feuille-h {
  0%, 54% { transform: scale(0); }
  70%     { transform: scale(1.15); }
  76%, 100% { transform: scale(1); }
}
/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .plante-groupe, .plante-sol, .plante-tige, .plante-feuille { animation: none; }
}

/* ======================================================================
   Titre du poste CSS
   ====================================================================== */
/* Titre du poste : à côté de l'icône, gras, plus grand que les titres de listes */
.offre-entete {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 8px;
}
.offre-entete svg {
  flex: 0 0 auto;
}
h2.offre-titre {
  font-family: 'League Spartan', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); /* > 1.7rem des titres de listes */
  line-height: 1.15;
  margin: 0;
  padding: 0;
  color: #2b3440;
}
/* Conteneur de la publication (largeur de lecture) */
.offre {
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
  padding: 24px 16px 40px;
}

/* ======================================================================
   Titres des listes CSS
   ====================================================================== */
/* Titres des listes : League Spartan, gras, une couleur par liste */
h3.liste-titre {
  font-family: 'League Spartan', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 32px 0 14px;
  padding: 0;
}
h3.liste-titre--missions { color: #0056b3; }
h3.liste-titre--profil   { color: #28a745; }
h3.liste-titre--atouts   { color: #d9a000; }
h3.liste-titre--dossier  { color: #6d6e71; }
h3.liste-titre--info     { color: #004AAD; }

/* ======================================================================
   Mission CSS
   ====================================================================== */
/* Structure de la liste */
.missions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espace entre les blocs */
}
/* Style de chaque bloc mission */
.missions-list li {
  background-color: #f8f9fa; /* Couleur de fond par défaut (gris très clair) */
  color: #333333; /* Couleur du texte par défaut */
  padding: 16px 20px;
  border-radius: 8px; /* Coins arrondis */
  border-left: 4px solid #0056b3; /* Petite barre bleue decorative sur le côté */
  font-size: 1rem;
  font-weight: bold; /* Texte de la liste en gras */
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s ease; /* Effet de transition fluide */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Légère ombre */
}
/* Effet au survol avec la souris */
.missions-list li:hover {
  background-color: #0056b3; /* Couleur bleue au survol */
  color: #ffffff; /* Texte en blanc */
  border-left-color: #003366; /* Accentuation de la bordure */
  transform: translateX(6px); /* Légère avancée vers la droite lors du survol */
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
}

/* ======================================================================
   Profil requis CSS
   ====================================================================== */
/* Container de la liste */
.profil-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espace entre les blocs */
}
/* Style de chaque bloc profil par défaut */
.profil-list li {
  position: relative;
  background-color: #f8f9fa; /* Fond gris très clair par défaut */
  color: #333333; /* Couleur du texte par défaut */
  padding: 16px 20px 16px 48px; /* Espace supplémentaire à gauche pour la coche */
  border-radius: 8px; /* Coins arrondis */
  border-left: 4px solid #28a745; /* Petite barre verte decorative */
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s ease; /* Animation fluide */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Légère ombre */
}
/* Icône coche ("nike" / checkmark) à gauche */
.profil-list li::before {
  content: "✓"; /* Symbole coche */
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  color: #28a745; /* Coche verte par défaut */
  transition: color 0.3s ease;
}
/* Effet au survol de la souris (hover) */
.profil-list li:hover {
  background-color: #28a745; /* Le bloc vire au vert */
  color: #ffffff; /* Le texte passe en blanc */
  border-left-color: #1e7e34; /* Accentuation de la bordure */
  transform: translateX(6px); /* Légère avancée vers la droite */
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); /* Ombre verte au survol */
}
/* Changement de couleur de la coche au survol */
.profil-list li:hover::before {
  color: #ffffff; /* La coche passe aussi en blanc */
}

/* ======================================================================
   Autres atouts CSS
   ====================================================================== */
/* Conteneur de la liste */
.qualites-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espace entre les blocs */
}
/* Style de chaque bloc par défaut */
.qualites-list li {
  position: relative;
  background-color: #f8f9fa; /* Fond gris très clair par défaut */
  color: #333333; /* Couleur du texte par défaut */
  padding: 16px 20px 16px 44px; /* Espace à gauche pour le point */
  border-radius: 8px; /* Coins arrondis */
  border-left: 4px solid #d9a000; /* Petite barre jaune/dorée sur le côté */
  font-size: 1rem;
  font-weight: bold; /* Texte de la liste en gras par défaut */
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s ease; /* Animation fluide */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Légère ombre */
}
/* Petit point à gauche de chaque élément */
.qualites-list li::before {
  content: "•";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: #d9a000; /* Point jaune par défaut */
  transition: color 0.3s ease;
}
/* Effet au survol de la souris (hover) */
.qualites-list li:hover {
  background-color: #d9a000; /* Le bloc vire au jaune (ton ambré/doré pour le contraste) */
  color: #ffffff; /* Le texte passe en blanc */
  border-left-color: #b88600; /* Accentuation de la bordure */
  transform: translateX(6px); /* Légère avancée vers la droite */
  box-shadow: 0 4px 12px rgba(217, 160, 0, 0.35); /* Ombre jaune au survol */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Légère ombre sur le texte pour garantir la lisibilité */
}
/* Changement de couleur du point au survol */
.qualites-list li:hover::before {
  color: #ffffff; /* Le point passe aussi en blanc */
}

/* ======================================================================
   Dossier à fournir CSS
   ====================================================================== */
/* =====================================================================
   CSS — À coller dans : Apparence > Personnaliser > CSS additionnel
   (ou dans un bloc <style> au-dessus du HTML)
   Animation des icônes : uniquement quand la souris survole une ligne.
   ===================================================================== */
@property --mi-cut {
  syntax: '<color>';
  inherits: true;
  initial-value: #f3f3f3;
}
.mi-missions {
  --mi-gray: #6d6e71;
  --mi-light: #f3f3f3;
  max-width: 760px;
  margin: 0 auto;
}
.mi-missions .mi-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Un bloc par mission */
.mi-missions .mi-item {
  --mi-cut: var(--mi-light);
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 14px;
  padding: 14px 24px;
  background-color: var(--mi-light);
  color: var(--mi-gray);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color .3s ease, color .3s ease, --mi-cut .3s ease;
}
/* Survol : bloc gris, texte et icônes blancs */
.mi-missions .mi-item:hover {
  --mi-cut: var(--mi-gray);
  background-color: var(--mi-gray);
  color: #fff;
}
/* Icônes miniatures à côté du texte */
.mi-missions .mi-box {
  flex: 0 0 96px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mi-missions .mi-box svg {
  height: 64px;
  width: 64px;
  display: block;
  overflow: visible;
}
.mi-missions .mi-box svg.mi-wide { width: 96px; }
.mi-missions .mi-fill { fill: currentColor; }
.mi-missions .mi-cut  { fill: var(--mi-cut); }
/* ---------- Etat de repos : icônes identiques aux images ---------- */
.mi-missions .mi-cert     { opacity: 0; }
.mi-missions .mi-star     { opacity: 0; }
.mi-missions .mi-dip-text { opacity: 0; }
/* ---------- 1. CV : la photo apparaît, puis les traits ---------- */
.mi-missions .mi-cv-photo { transform-box: fill-box; transform-origin: center; }
.mi-missions .mi-cv-l     { transform-box: fill-box; transform-origin: 0 50%; }
.mi-missions .mi-item:hover .mi-cv-photo { animation: mi-cv-photo 4.5s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-cv-l1    { animation: mi-cv-l1 4.5s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-cv-l2    { animation: mi-cv-l2 4.5s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-cv-l3    { animation: mi-cv-l3 4.5s ease-in-out infinite; }
@keyframes mi-cv-photo {
  0%, 4%   { opacity: 0; transform: scale(.6); }
  14%, 95% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.6); }
}
@keyframes mi-cv-l1 { 0%, 18% { transform: scaleX(0); } 26%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mi-cv-l2 { 0%, 28% { transform: scaleX(0); } 40%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mi-cv-l3 { 0%, 42% { transform: scaleX(0); } 56%, 95% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
/* ---------- 2. Lettre : le crayon écrit, puis 2 personnes ---------- */
.mi-missions .mi-w { transform-box: fill-box; transform-origin: 0 50%; }
  .mi-missions .mi-item:hover .mi-w1 { animation: mi-w1 7s linear infinite; }
  .mi-missions .mi-item:hover .mi-w2 { animation: mi-w2 7s linear infinite; }
  .mi-missions .mi-item:hover .mi-w3 { animation: mi-w3 7s linear infinite; }
  .mi-missions .mi-item:hover .mi-w4 { animation: mi-w4 7s linear infinite; }
  .mi-missions .mi-item:hover .mi-w5 { animation: mi-w5 7s linear infinite; }
  .mi-missions .mi-item:hover .mi-w6 { animation: mi-w6 7s linear infinite; }
  @keyframes mi-w1 { 0%, 6% { transform: scaleX(0); } 14%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mi-w2 { 0%, 15% { transform: scaleX(0); } 22%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mi-w3 { 0%, 23% { transform: scaleX(0); } 36%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mi-w4 { 0%, 37% { transform: scaleX(0); } 50%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mi-w5 { 0%, 51% { transform: scaleX(0); } 64%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
  @keyframes mi-w6 { 0%, 65% { transform: scaleX(0); } 74%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.mi-missions .mi-item:hover .mi-pen { animation: mi-pen 7s linear infinite; }
@keyframes mi-pen {
    0%   { transform: translate(0px, 0px); }
    6%  { transform: translate(-223px, -264px); }
    14%  { transform: translate(-131px, -264px); }
    15%  { transform: translate(-223px, -217px); }
    22%  { transform: translate(-131px, -217px); }
    23%  { transform: translate(-223px, -147px); }
    36%  { transform: translate(-42px, -147px); }
    37%  { transform: translate(-223px, -88px); }
    50%  { transform: translate(-42px, -88px); }
    51%  { transform: translate(-223px, -26px); }
    64%  { transform: translate(-42px, -26px); }
    65%  { transform: translate(-223px, 32px); }
    74%  { transform: translate(-123px, 32px); }
    82%, 100% { transform: translate(0px, 0px); }
}
.mi-missions .mi-ppl { transform-box: fill-box; transform-origin: center bottom; }
.mi-missions .mi-item:hover .mi-ppl { animation: mi-ppl 7s ease-out infinite; }
@keyframes mi-ppl {
  0%, 83%  { opacity: 0; transform: scale(.3); }
  86%      { opacity: 1; transform: scale(1.12); }
  89%, 97% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1); }
}
/* ---------- 3. Prétention salariale : le « $ » apparaît progressivement ---------- */
.mi-missions .mi-item:hover .mi-dollar { animation: mi-dollar 4s ease-in-out infinite; }
@keyframes mi-dollar {
  0%, 8%   { opacity: 0; clip-path: inset(0 0 100% 0); }
  12%      { opacity: 1; }
  50%, 90% { opacity: 1; clip-path: inset(0 0 0 0); }
  100%     { opacity: 0; clip-path: inset(0 0 0 0); }
}
/* ---------- 4. Contact rapide : le téléphone vibre ---------- */
.mi-missions .mi-handset { transform-origin: 223px 223px; }
.mi-missions .mi-item:hover .mi-handset { animation: mi-ring 2s ease-in-out infinite; }
@keyframes mi-ring {
  0%, 45%, 100% { transform: rotate(0deg); }
  5%  { transform: rotate(-14deg); }
  10% { transform: rotate(12deg); }
  15% { transform: rotate(-14deg); }
  20% { transform: rotate(12deg); }
  25% { transform: rotate(-10deg); }
  30% { transform: rotate(8deg); }
  35% { transform: rotate(-5deg); }
  40% { transform: rotate(3deg); }
}
/* ---------- 5. Diplôme : le ruban part, le papier devient un mini rectangle « DIPLOME » + étoile ---------- */
.mi-missions .mi-scroll { transform-origin: 109px 71px; }
.mi-missions .mi-cert   { transform-box: fill-box; transform-origin: center; }
.mi-missions .mi-star   { transform-box: fill-box; transform-origin: center; }
.mi-missions .mi-item:hover .mi-ribbon   { animation: mi-ribbon 6s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-scroll   { animation: mi-scroll 6s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-cert     { animation: mi-cert 6s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-dip-text { animation: mi-dip-text 6s ease-in-out infinite; }
.mi-missions .mi-item:hover .mi-star     { animation: mi-star 6s ease-in-out infinite; }
@keyframes mi-ribbon {
  0%, 14%  { transform: translate(0px, 0px); opacity: 1; }
  32%, 94% { transform: translate(111px, -47px); opacity: 0; }
  100%     { transform: translate(0px, 0px); opacity: 1; }
}
@keyframes mi-scroll {
  0%, 30%  { opacity: 1; transform: scale(1); }
  46%, 94% { opacity: 0; transform: scale(.35); }
  100%     { opacity: 1; transform: scale(1); }
}
@keyframes mi-cert {
  0%, 34%  { opacity: 0; transform: scale(.3); }
  50%, 94% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.3); }
}
.mi-missions .mi-dip-text {
  fill: var(--mi-cut);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 1px;
}
@keyframes mi-dip-text {
  0%, 52%  { opacity: 0; }
  60%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes mi-star {
  0%, 60%  { opacity: 0; transform: scale(.2) rotate(-90deg); }
  72%      { opacity: 1; transform: scale(1.25) rotate(10deg); }
  78%, 94% { opacity: 1; transform: scale(1) rotate(0deg); }
  100%     { opacity: 0; transform: scale(1) rotate(0deg); }
}
/* Accessibilité : coupe les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .mi-missions * { animation: none !important; }
}
@media (max-width: 520px) {
  .mi-missions .mi-item { font-size: 16px; padding: 12px 16px; gap: 12px; }
  .mi-missions .mi-box { flex-basis: 76px; }
  .mi-missions .mi-box svg { height: 52px; width: 52px; }
  .mi-missions .mi-box svg.mi-wide { width: 76px; }
}

/* ======================================================================
   Information complémentaire CSS
   ====================================================================== */
/* ===== Liste d'informations SAF/FJKM ===== */
.saf-infos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.saf-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #f3f6fc;
  border-left: 5px solid #004AAD;
  border-radius: 10px;
  color: #111931;
  font-size: 1.15rem;      /* texte un peu agrandi */
  font-weight: 700;        /* tout le texte en gras */
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
/* Bloc qui vire au bleu, texte blanc */
.saf-info:hover {
  background: #004AAD;
  color: #fff;
}
/* Icône miniature : pastille blanche pour rester visible sur fond bleu */
.saf-icone {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #004AAD;
  border-radius: 50%;
  text-decoration: none;
}
.saf-icone svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.saf-texte { color: inherit; }
/* Texte sélectionné à la souris : toujours lisible */
.saf-info ::selection { background: #004AAD; color: #fff; }
.saf-info:hover ::selection { background: #fff; color: #004AAD; }
/* ===== Animations infinies (actives même au survol / sélection) ===== */
/* Localisation : le repère tourne au-dessus de la carte */
.saf-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: saf-tourne 2.4s linear infinite;
}
@keyframes saf-tourne {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}
/* E-mail : le « @ » se dessine progressivement */
.saf-at {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: saf-arobase 3s ease-in-out infinite;
}
@keyframes saf-arobase {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Sablier : le sable s'écoule, puis le sablier se retourne */
.saf-sablier {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: saf-retourne 5s ease-in-out infinite;
}
.saf-sable-haut {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: saf-vide 5s linear infinite;
}
.saf-sable-bas {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: saf-remplit 5s linear infinite;
}
.saf-filet { animation: saf-filet 5s linear infinite; }
@keyframes saf-retourne {
  0%, 85% { transform: rotate(0deg); }
  100%    { transform: rotate(180deg); }
}
@keyframes saf-vide {
  0%   { transform: scaleY(1); }
  80%, 100% { transform: scaleY(0); }
}
@keyframes saf-remplit {
  0%   { transform: scaleY(0); }
  80%, 100% { transform: scaleY(1); }
}
@keyframes saf-filet {
  0%, 78% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ======================================================================
   Mention d’alerte CSS
   ====================================================================== */
/* Mention d'alerte : texte rouge + icône attention en surbrillance rouge */
.alerte-saf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 14px 18px;
  background: #fff5f5;
  border-left: 5px solid #d32f2f;
  border-radius: 10px;
  color: #c62828;
}
.alerte-saf .alerte-texte {
  margin: 0;
  color: #c62828;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.alerte-saf .alerte-icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(211, 47, 47, 0.15);       /* halo rouge */
  box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.55);
  animation: alerte-pulse 1.8s ease-out infinite;
}
.alerte-saf .alerte-icone svg {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 6px rgba(211, 47, 47, 0.85));  /* surbrillance rouge */
}
@keyframes alerte-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(211, 47, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .alerte-saf .alerte-icone { animation: none; }
}/* End custom CSS */