/* ==========================================================================
   SMYRNAE RH PRO — Feuille de style commune
   Design system : Navy #1A365D / Gris #F7FAFC / Accent bleu #3182CE / Accent orange #ED8936
   ========================================================================== */

:root{
  --navy:#1A365D;
  --navy-dark:#0F2436;
  --navy-light:#2C5282;
  --gray-bg:#F7FAFC;
  --accent:#3182CE;
  --orange:#ED8936;
  --border:#E2E8F0;
  --text:#1A202C;
  --muted:#718096;
  --success:#2F855A;
  --warning:#C05621;
  --danger:#C53030;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--gray-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.font-heading{font-family:'Poppins',sans-serif;}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:#EDF2F7;}
::-webkit-scrollbar-thumb{background:#A0AEC0;border-radius:4px;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.5rem;border-radius:.5rem;font-weight:600;font-size:.9rem;
  transition:all .2s ease;cursor:pointer;white-space:nowrap;border:1px solid transparent;
}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-light);}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:#2b6cb0;}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:#dd7724;}
.btn-outline{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-outline-accent{background:transparent;border:1.5px solid var(--accent);color:var(--accent);}
.btn-outline-accent:hover{background:var(--accent);color:#fff;}
.btn-outline-white{background:transparent;border:1.5px solid #fff;color:#fff;}
.btn-outline-white:hover{background:#fff;color:var(--navy);}
.btn-ghost{background:transparent;color:var(--navy);}
.btn-ghost:hover{background:#EDF2F7;}
.btn-sm{padding:.45rem 1rem;font-size:.8rem;}
.btn-lg{padding:.9rem 2rem;font-size:1rem;}
.btn-danger{background:#FED7D7;color:var(--danger);}
.btn-danger:hover{background:#FEB2B2;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Cartes ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:.9rem;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.card-hover{transition:all .25s ease;}
.card-hover:hover{box-shadow:0 12px 24px -8px rgba(26,54,93,.18);transform:translateY(-3px);}

/* ---------- Badges statut ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;}
.badge-dot{width:.4rem;height:.4rem;border-radius:999px;display:inline-block;}
.badge-green{background:#F0FFF4;color:#276749;}
.badge-green .badge-dot{background:#38A169;}
.badge-blue{background:#EBF8FF;color:#2B6CB0;}
.badge-blue .badge-dot{background:#3182CE;}
.badge-orange{background:#FFFAF0;color:#B7791F;}
.badge-orange .badge-dot{background:#ED8936;}
.badge-red{background:#FFF5F5;color:#C53030;}
.badge-red .badge-dot{background:#E53E3E;}
.badge-gray{background:#F7FAFC;color:#4A5568;}
.badge-gray .badge-dot{background:#A0AEC0;}

/* ---------- Champs de formulaire ---------- */
.field-label{display:block;font-size:.82rem;font-weight:600;color:#2D3748;margin-bottom:.35rem;}
.field-input, select.field-input, textarea.field-input{
  width:100%;padding:.65rem .9rem;border:1.5px solid var(--border);border-radius:.55rem;
  font-size:.92rem;background:#fff;transition:border-color .15s, box-shadow .15s;
}
.field-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(49,130,206,.15);}
.field-hint{font-size:.75rem;color:var(--muted);margin-top:.3rem;}

/* ---------- Navigation active ---------- */
.nav-link{position:relative;color:#4A5568;font-weight:500;padding-bottom:4px;}
.nav-link:hover{color:var(--navy);}
.nav-link.active{color:var(--navy);font-weight:700;}
.nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--orange);}

/* ---------- Sidebar dashboards ---------- */
/* Menu latéral des portails — compact, et repliable en barre d'icônes */
/* Le positionnement est géré ici et non par des classes utilitaires :
   celles-ci sont injectées après cette feuille et gagnaient la cascade,
   ce qui laissait le menu dans le flux sur mobile et écrasait le contenu. */
.portal-sidebar{width:14.5rem;position:sticky;top:0;transition:width .2s ease;}
.sidebar-link{
  display:flex;align-items:center;gap:.65rem;
  padding:.45rem .7rem;border-radius:.5rem;
  color:#CBD5E0;font-weight:500;font-size:.82rem;line-height:1.2;
  transition:background .15s,color .15s;position:relative;
}
.sidebar-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-link.active{background:var(--accent);color:#fff;}
.sidebar-link i{width:1.05rem;text-align:center;font-size:.85rem;flex-shrink:0;}
.sidebar-badge{
  margin-left:auto;background:var(--orange);color:#fff;
  font-size:.6rem;font-weight:700;padding:.1rem .35rem;border-radius:999px;line-height:1.2;
}
.sidebar-badge-bleu{background:var(--accent);}

/* --- Mode replié (bureau uniquement) --- */
@media (min-width:1024px){
  .portal-sidebar.reduite{width:4.25rem;}
  .portal-sidebar.reduite .sidebar-texte{display:none;}
  /* Plus serré en mode replié : la barre d'icônes tient sans ascenseur */
  .portal-sidebar.reduite .sidebar-link{justify-content:center;padding:.35rem 0;gap:0;}
  .portal-sidebar.reduite .sidebar-link > span:not(.sidebar-badge){display:none;}
  .portal-sidebar.reduite .sidebar-link i{font-size:1rem;}
  .portal-sidebar.reduite .sidebar-badge{
    position:absolute;top:.15rem;right:.55rem;margin-left:0;
    min-width:.95rem;text-align:center;
  }
  /* L'intitulé de section devient un simple filet de séparation */
  .portal-sidebar.reduite .sidebar-section{font-size:0;padding:.4rem .7rem .2rem;margin-top:0;}
  .portal-sidebar.reduite .sidebar-section::after{
    content:'';display:block;height:1px;background:rgba(255,255,255,.14);
  }
  .portal-sidebar.reduite #sidebarReduceBtn i{transform:rotate(180deg);}
}

/* ---------- Divers ---------- */
.section-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:999px;background:#EBF8FF;color:var(--accent);font-weight:700;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;}
.hero-gradient{background:linear-gradient(120deg, rgba(15,36,54,.94) 0%, rgba(26,54,93,.86) 55%, rgba(49,130,206,.7) 100%);}
.stat-number{font-family:'Poppins',sans-serif;font-weight:800;}
.avatar{border-radius:999px;object-fit:cover;background:#E2E8F0;}
.table-modern th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--border);background:#FBFCFE;}
.table-modern td{padding:.9rem 1.1rem;border-bottom:1px solid #EDF2F7;font-size:.88rem;}
.table-modern tr:last-child td{border-bottom:none;}
.progress-track{background:#EDF2F7;border-radius:999px;height:.5rem;overflow:hidden;}
.progress-fill{height:100%;border-radius:999px;background:var(--accent);}

.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--navy);color:#fff;padding:.9rem 1.3rem;border-radius:.6rem;box-shadow:0 12px 28px rgba(0,0,0,.25);font-size:.88rem;z-index:999;display:flex;align-items:center;gap:.6rem;opacity:0;transform:translateY(12px);transition:all .3s ease;}
.toast.show{opacity:1;transform:translateY(0);}

.modal-overlay{position:fixed;inset:0;background:rgba(15,24,36,.55);display:flex;align-items:center;justify-content:center;z-index:998;padding:1rem;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{background:#fff;border-radius:1rem;max-width:32rem;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 60px rgba(0,0,0,.3);}

.step-dot{width:2rem;height:2rem;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;background:#E2E8F0;color:#718096;}
.step-dot.active{background:var(--accent);color:#fff;}
.step-dot.done{background:var(--success);color:#fff;}

@media (max-width: 1024px){
  .desktop-only{display:none !important;}
}

/* ==========================================================================
   Compléments version PHP — sidebar mobile, toasts typés, zones de dépôt
   ========================================================================== */

/* ---------- Sidebar rétractable sur mobile ---------- */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,24,36,.5);z-index:39;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.sidebar-backdrop.open{opacity:1;visibility:visible;}

@media (max-width:1023px){
  .portal-sidebar{position:fixed;top:0;left:0;z-index:40;transform:translateX(-100%);transition:transform .25s ease;}
  .portal-sidebar.open{transform:translateX(0);}
  /* Hors du flux : le contenu occupe toute la largeur de l'écran */
  body{display:block;}
  body > .flex-1{width:100%;min-width:0;}
}

/* ---------- Toasts typés ---------- */
.toast-error{background:var(--danger);}
.toast-warning{background:var(--warning);}
.toast-info{background:var(--accent);}

/* ---------- Zone de dépôt de fichier ---------- */
.dropzone{border:2px dashed var(--border);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.dropzone:hover,.dropzone-active{border-color:var(--accent);background:#F7FBFF;}
.dropzone input[type=file]{display:none;}

/* ---------- Tableaux : état vide ---------- */
.table-empty{padding:3rem 1rem;text-align:center;color:var(--muted);font-size:.9rem;}

/* ---------- Fil de discussion ---------- */
.bulle-recue{background:#fff;border-radius:.75rem;border-top-left-radius:0;padding:.75rem;box-shadow:0 1px 2px rgba(16,24,40,.05);font-size:.88rem;color:#2D3748;max-width:28rem;}
.bulle-envoyee{background:var(--accent);color:#fff;border-radius:.75rem;border-top-right-radius:0;padding:.75rem;box-shadow:0 1px 2px rgba(16,24,40,.08);font-size:.88rem;margin-left:auto;max-width:28rem;}

/* ---------- Interrupteur ---------- */
.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.switch .switch-track{width:3rem;height:1.5rem;background:#CBD5E0;border-radius:999px;transition:background .2s;position:relative;}
.switch .switch-thumb{position:absolute;top:.125rem;left:.125rem;width:1.25rem;height:1.25rem;background:#fff;border-radius:999px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.switch input:checked + .switch-track{background:#38A169;}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(1.5rem);}

/* ---------- Onglets de filtres ---------- */
.filtre-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;border-radius:.5rem;font-size:.8rem;font-weight:600;border:1.5px solid var(--navy);color:var(--navy);white-space:nowrap;transition:all .15s;}
.filtre-tab:hover{background:#EDF2F7;}
.filtre-tab.active{background:var(--navy);color:#fff;}

/* Coordonnées, références et adresses e-mail : jamais de mot insécable
   assez long pour pousser une colonne hors de l'écran. */
footer li,.card .font-mono,.break-anywhere{overflow-wrap:anywhere;}

/* ---------- Petits écrans : boutons et tableaux ---------- */
@media (max-width:480px){
  /* Un intitulé long ne doit pas pousser la page au-delà de l'écran */
  .btn{padding:.6rem 1rem;font-size:.8rem;white-space:normal;}
  .btn-lg{padding:.75rem 1.25rem;font-size:.88rem;}
  .btn-sm{padding:.4rem .75rem;font-size:.75rem;}
  .table-modern th,.table-modern td{padding-left:.6rem;padding-right:.6rem;}
}

/* Un tableau large défile horizontalement dans sa carte, jamais la page */
.card.overflow-x-auto,.table-scroll{max-width:100%;}

/* ---------- Impression (factures, contrats) ---------- */
@media print{
  .no-print,.portal-sidebar,header,footer,.toast{display:none !important;}
  body{background:#fff;}
  .card{box-shadow:none;border-color:#CBD5E0;}
}

/* ---------- Sections de la sidebar (menus longs) ---------- */
.sidebar-section{
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding:.7rem .7rem .25rem;margin-top:.15rem;
}
.sidebar-section:first-child{margin-top:0;}

/* ---------- GED : vignettes de dossiers et lignes de documents ---------- */
.ged-dossier{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1px solid var(--border);border-radius:.7rem;background:#fff;transition:all .15s;}
.ged-dossier:hover{border-color:var(--accent);box-shadow:0 6px 16px -8px rgba(26,54,93,.25);transform:translateY(-2px);}
.ged-ligne{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;border-bottom:1px solid #EDF2F7;transition:background .12s;}
.ged-ligne:last-child{border-bottom:none;}
.ged-ligne:hover{background:#F7FAFC;}
.ged-fil{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);}
.ged-fil a{color:var(--accent);}
.ged-fil a:hover{text-decoration:underline;}

/* ---------- RH : grille du registre de présence ---------- */
.presence-case{display:flex;align-items:center;justify-content:center;height:2.1rem;border-radius:.35rem;font-size:.68rem;font-weight:600;}
.presence-present{background:#F0FFF4;color:#276749;}
.presence-absent{background:#FFF5F5;color:#C53030;}
.presence-retard{background:#FFFAF0;color:#B7791F;}
.presence-conge{background:#EBF8FF;color:#2B6CB0;}
.presence-mission{background:#EBF4FF;color:#4C51BF;}
.presence-teletravail{background:#FAF5FF;color:#6B46C1;}
.presence-ferie,.presence-vide{background:#F7FAFC;color:#A0AEC0;}

/* ---------- Organigramme ---------- */
.org-carte{border:1px solid var(--border);border-radius:.7rem;background:#fff;padding:.9rem 1rem;}
.org-branche{border-left:2px solid var(--border);margin-left:1.25rem;padding-left:1.25rem;}

/* --- Sous-menu « Nos Services » (mobile, balise <details>) --------------- */
#mobileMenu summary::-webkit-details-marker { display: none; }
#mobileMenu summary { list-style: none; }
#mobileMenu details[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary { list-style: none; }
.faq-liste details[open] > summary .fa-chevron-down { transform: rotate(180deg); }

/* ==========================================================================
   Page d'accueil — slider du hero, révélation au défilement, compteurs
   ========================================================================== */

/* ---------- Slider ---------- */
.hero-slider{position:relative;overflow:hidden;background:var(--navy-dark);}
.hero-piste{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease, visibility .9s;
}
.hero-slide.is-active{opacity:1;visibility:visible;}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;}

/* Chaque diapositive entre avec son propre effet, appliqué à l'image :
   fondu, zoom, glissement gauche/droite et mise au point. */
.hero-slide.is-active img{
  animation-duration:1.3s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-fill-mode:both;
}
.hero-slide.effet-fondu.is-active img   {animation-name:heroFondu;}
.hero-slide.effet-zoom.is-active img    {animation-name:heroZoom;}
.hero-slide.effet-glisseG.is-active img {animation-name:heroGlisseG;}
.hero-slide.effet-glisseD.is-active img {animation-name:heroGlisseD;}
.hero-slide.effet-nettete.is-active img {animation-name:heroNettete;}

@keyframes heroFondu   {from{transform:scale(1.04);}                    to{transform:scale(1);}}
@keyframes heroZoom    {from{transform:scale(1.22);}                    to{transform:scale(1);}}
@keyframes heroGlisseG {from{transform:translateX(9%)  scale(1.12);}    to{transform:translateX(0) scale(1);}}
@keyframes heroGlisseD {from{transform:translateX(-9%) scale(1.12);}    to{transform:translateX(0) scale(1);}}
@keyframes heroNettete {from{transform:scale(1.14);filter:blur(14px);}  to{transform:scale(1);filter:blur(0);}}

/* Voile dégradé : sombre derrière le texte, très léger sur le reste de
   l'image pour qu'elle reste nettement visible. */
.hero-voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      rgba(15,36,54,.92) 0%,
      rgba(15,36,54,.80) 30%,
      rgba(26,54,93,.42) 55%,
      rgba(26,54,93,.14) 80%,
      rgba(26,54,93,.08) 100%),
    linear-gradient(to top, rgba(15,36,54,.45) 0%, rgba(15,36,54,0) 40%);
}
@media (max-width:767px){
  /* Sur mobile le texte occupe toute la largeur : il faut un voile uniforme */
  .hero-voile{background:linear-gradient(to bottom, rgba(15,36,54,.88) 0%, rgba(15,36,54,.78) 60%, rgba(15,36,54,.86) 100%);}
}
.hero-contenu h1,.hero-contenu p{text-shadow:0 1px 12px rgba(10,22,36,.45);}
.hero-contenu{position:relative;z-index:3;}

/* Textes du hero : un bloc par diapositive, empilés dans la même case */
.hero-textes{display:grid;}
.hero-textes > .hero-texte{grid-area:1 / 1;}
.hero-texte{
  opacity:0;visibility:hidden;transform:translateY(.75rem);
  transition:opacity .55s ease,transform .55s ease,visibility .55s;
  pointer-events:none;
}
.hero-texte.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;}

/* Étiquette de la diapositive courante */
.hero-etiquettes{position:absolute;right:1.5rem;bottom:3.4rem;z-index:3;}
.hero-etiquette{
  position:absolute;right:0;bottom:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  color:#fff;font-size:.8rem;font-weight:600;
  opacity:0;visibility:hidden;transform:translateY(.5rem);
  transition:opacity .5s ease,transform .5s ease,visibility .5s;
}
.hero-etiquette:hover{background:rgba(255,255,255,.22);}
.hero-etiquette.is-active{opacity:1;visibility:visible;transform:translateY(0);}

/* Flèches */
.hero-fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:2.75rem;height:2.75rem;border-radius:999px;
  display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;backdrop-filter:blur(6px);transition:background .2s,transform .2s;
}
.hero-fleche:hover{background:rgba(255,255,255,.28);}
.hero-fleche.prec{left:1rem;}
.hero-fleche.suiv{right:1rem;}
@media (min-width:1024px){.hero-fleche{display:flex;}}

/* Pastilles */
.hero-pastilles{
  position:absolute;left:0;right:0;bottom:3.4rem;z-index:4;
  display:flex;justify-content:center;gap:.5rem;
}
.hero-pastille{
  width:2rem;height:.3rem;border-radius:999px;
  background:rgba(255,255,255,.3);transition:background .25s,width .25s;
}
.hero-pastille.is-active{background:var(--orange);width:3rem;}

/* Barre de progression de la lecture automatique */
.hero-progression{position:absolute;left:0;top:0;height:3px;width:100%;z-index:4;background:rgba(255,255,255,.12);}
.hero-progression span{display:block;height:100%;width:0;background:var(--orange);}
.hero-progression.anime span{animation:heroBarre linear forwards;}
@keyframes heroBarre{from{width:0;}to{width:100%;}}

/* ---------- Barre de recherche du hero ---------- */
.hero-recherche{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);border-radius:.9rem;
}
.hero-recherche input,.hero-recherche select{
  width:100%;background:transparent;border:0;color:#fff;font-size:.9rem;padding:.65rem .25rem;outline:none;
}
.hero-recherche input::placeholder{color:rgba(255,255,255,.65);}
.hero-recherche select option{color:var(--text);}

/* ---------- Bandeau de réassurance ---------- */
.reassurance{position:relative;z-index:5;margin-top:-2.75rem;}

/* ---------- Révélation au défilement ----------
   Animation pilotée par le défilement, entièrement en CSS : aucun script
   n'est impliqué, donc une section ne peut jamais rester invisible. Les
   navigateurs sans animation-timeline affichent simplement le contenu. */
@keyframes revelation{
  from{opacity:0;transform:translateY(1.5rem);}
  to{opacity:1;transform:none;}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:revelation linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 20%;
    }
  }
}

/* ---------- Divers accueil ---------- */
.etape-num{
  width:2.75rem;height:2.75rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:800;
}
.service-vignette{height:11rem;width:100%;object-fit:cover;}
.puce-metier{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .9rem;border-radius:999px;border:1px solid var(--border);
  background:#fff;font-size:.8rem;color:#4A5568;transition:all .2s;
}
.puce-metier:hover{border-color:var(--accent);color:var(--accent);}

/* Animations désactivées si l'utilisateur les a refusées */
@media (prefers-reduced-motion:reduce){
  .hero-texte{transition:opacity .01ms;transform:none;}
  .hero-slide{transition:opacity .01ms;}
  .hero-slide.is-active img{animation:none;}
  .hero-progression span{animation:none;}
}

/* ==========================================================================
   Communication — bandeau de flash infos et encarts publicitaires
   ========================================================================== */

.flash-barre{
  background:var(--navy-dark);color:#CBD5E0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.82rem;overflow:hidden;max-width:100%;
}
.flash-titre{
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  padding:.55rem .85rem;margin:.35rem 0;border-radius:.4rem;
  background:var(--orange);color:#fff;
  font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
}
/* min-width:0 est indispensable : sans lui l'élément flexible adopte la
   largeur de son contenu défilant et pousse la page hors de l'écran. */
.flash-fenetre{flex:1 1 0;min-width:0;overflow:hidden;position:relative;height:2.6rem;}
.flash-fenetre::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:3rem;
  background:linear-gradient(90deg,rgba(15,36,54,0),var(--navy-dark));
  pointer-events:none;
}
.flash-defile{
  display:flex;align-items:center;gap:2.5rem;height:100%;
  width:max-content;white-space:nowrap;
  animation:flashDefile 45s linear infinite;
}
.flash-defile li{display:inline-flex;align-items:center;gap:.5rem;}
.flash-defile a{color:#fff;}
.flash-defile a:hover{color:var(--orange);text-decoration:underline;}
.flash-pastille{width:.4rem;height:.4rem;border-radius:999px;flex-shrink:0;}
.flash-barre:hover .flash-defile{animation-play-state:paused;}
@keyframes flashDefile{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Sans défilement : la liste reste lisible et se parcourt à la main */
@media (prefers-reduced-motion:reduce){
  .flash-defile{animation:none;}
  .flash-fenetre{overflow-x:auto;}
}

/* ---------- Encarts publicitaires ---------- */
.pub-encart{position:relative;}
.pub-mention{
  position:absolute;top:.5rem;right:.5rem;z-index:2;
  padding:.15rem .5rem;border-radius:.3rem;
  background:rgba(26,32,44,.6);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.pub-section{padding:2.5rem 0;}

/* ---------- Bandeau « Ils nous font confiance » ---------- */
.reference-puce{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:.6rem 1.25rem;border-radius:.6rem;
  border:1px solid var(--border);background:#fff;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;color:var(--navy);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
a.reference-puce:hover{border-color:var(--accent);box-shadow:0 6px 16px -8px rgba(26,54,93,.25);transform:translateY(-2px);}

/* Défilement continu du bandeau, avec fondu sur les deux bords */
.confiance-fenetre{
  position:relative;overflow:hidden;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.confiance-defile{
  display:flex;align-items:center;gap:1rem;
  width:max-content;padding:.35rem 0;
  animation-name:confianceDefile;animation-timing-function:linear;animation-iteration-count:infinite;
}
.confiance-defile li{display:flex;flex-shrink:0;}
.confiance-fenetre:hover .confiance-defile,
.confiance-fenetre:focus-within .confiance-defile{animation-play-state:paused;}
@keyframes confianceDefile{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Sans défilement : le bandeau se parcourt à la main */
@media (prefers-reduced-motion:reduce){
  .confiance-defile{animation:none;}
  .confiance-fenetre{overflow-x:auto;}
}

/* ---------- Galerie ---------- */
.galerie-vignette{position:relative;overflow:hidden;border-radius:.9rem;background:#EDF2F7;}
.galerie-vignette img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.galerie-item:hover .galerie-vignette img{transform:scale(1.06);}
.galerie-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,36,54,.35);color:#fff;font-size:1.5rem;transition:background .2s;
}
.galerie-item:hover .galerie-play{background:rgba(15,36,54,.55);}

/* ---------- Tchat WhatsApp flottant ---------- */
.tchat-wa{position:fixed;right:1.25rem;bottom:1.25rem;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;}

.tchat-wa-bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#fff;border:none;cursor:pointer;
  padding:.85rem 1.15rem;border-radius:999px;font-weight:600;font-size:.9rem;
  box-shadow:0 12px 26px rgba(37,211,102,.38);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.tchat-wa-bouton:hover{background:#1ebe5b;transform:translateY(-2px);box-shadow:0 16px 32px rgba(37,211,102,.45);}
.tchat-wa-bouton:focus-visible{outline:3px solid #0F2436;outline-offset:3px;}
.tchat-wa-icone,.tchat-wa-croix{font-size:1.45rem;line-height:1;}
.tchat-wa-croix{display:none;}
.tchat-wa.ouvert .tchat-wa-icone{display:none;}
.tchat-wa.ouvert .tchat-wa-croix{display:inline;}
.tchat-wa.ouvert .tchat-wa-texte{display:none;}
.tchat-wa.ouvert .tchat-wa-bouton{padding:.9rem 1.05rem;background:#0F2436;box-shadow:0 12px 26px rgba(15,36,54,.35);}

/* Pastille d'appel : elle s'efface dès la première ouverture */
.tchat-wa-bouton::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  border:2px solid rgba(37,211,102,.55);animation:tchatWaPulse 2.4s ease-out infinite;
}
.tchat-wa-bouton{position:relative;}
.tchat-wa.ouvert .tchat-wa-bouton::after,
.tchat-wa.vu .tchat-wa-bouton::after{display:none;}
@keyframes tchatWaPulse{0%{transform:scale(1);opacity:.8;}70%{transform:scale(1.35);opacity:0;}100%{opacity:0;}}

.tchat-wa-panneau{
  width:min(21rem,calc(100vw - 2.5rem));background:#fff;border-radius:1rem;overflow:hidden;
  box-shadow:0 22px 48px rgba(15,36,54,.28);border:1px solid #E2E8F0;
  animation:tchatWaEntree .22s ease-out;
  /* Sur un écran court, le panneau se limite à la hauteur disponible
     et c'est son corps qui défile : l'en-tête et le bouton d'envoi
     restent toujours visibles. */
  display:flex;flex-direction:column;max-height:calc(100vh - 6.5rem);
}
.tchat-wa-entete,.tchat-wa-forme{flex-shrink:0;}
.tchat-wa-corps{flex:1 1 auto;overflow-y:auto;min-height:0;}
@keyframes tchatWaEntree{from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}

.tchat-wa-entete{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:#075E54;color:#fff;}
.tchat-wa-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.tchat-wa-nom{font-family:var(--font-titre,inherit);font-weight:600;font-size:.92rem;line-height:1.2;overflow-wrap:anywhere;}
.tchat-wa-etat{font-size:.72rem;color:#C7E9DF;display:flex;align-items:center;gap:.35rem;margin-top:.15rem;}
.tchat-wa-point{width:.45rem;height:.45rem;border-radius:50%;background:#7BE495;flex-shrink:0;}
.tchat-wa-fermer{margin-left:auto;color:#C7E9DF;background:none;border:none;cursor:pointer;font-size:1.05rem;padding:.2rem;line-height:1;}
.tchat-wa-fermer:hover{color:#fff;}

.tchat-wa-corps{padding:1rem;background:#ECE5DD;}
.tchat-wa-bulle{
  background:#fff;border-radius:.2rem .8rem .8rem .8rem;padding:.7rem .85rem;
  font-size:.85rem;color:#2D3748;line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.tchat-wa-horaires{font-size:.74rem;color:#4A5568;margin-top:.6rem;display:flex;align-items:center;gap:.35rem;}
.tchat-wa-libelle-sujets{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#4A5568;margin:.9rem 0 .45rem;font-weight:600;}
.tchat-wa-sujets{display:flex;flex-wrap:wrap;gap:.4rem;}
.tchat-wa-sujet{
  background:#fff;border:1px solid #CBD5E0;border-radius:999px;cursor:pointer;
  padding:.35rem .7rem;font-size:.76rem;color:#2D3748;transition:all .15s ease;
}
.tchat-wa-sujet:hover,.tchat-wa-sujet.actif{background:#25D366;border-color:#25D366;color:#fff;}

.tchat-wa-forme{padding:.9rem 1rem 1rem;background:#fff;}
.tchat-wa-champ{
  width:100%;border:1px solid #CBD5E0;border-radius:.6rem;padding:.6rem .7rem;
  font-size:.85rem;font-family:inherit;color:#2D3748;resize:vertical;min-height:3.75rem;
}
.tchat-wa-champ:focus{outline:none;border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.18);}
.tchat-wa-envoi{
  width:100%;margin-top:.6rem;background:#25D366;color:#fff;border:none;cursor:pointer;
  padding:.65rem;border-radius:.6rem;font-weight:600;font-size:.87rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .2s;
}
.tchat-wa-envoi:hover{background:#1ebe5b;}
.tchat-wa-mention{font-size:.68rem;color:#A0AEC0;text-align:center;margin-top:.55rem;line-height:1.4;}

/* Les toasts se placent au-dessus du bouton pour ne pas le masquer */
body:has(.tchat-wa) .toast{bottom:6.25rem;}

@media (max-width:480px){
  .tchat-wa{right:.85rem;bottom:.85rem;left:.85rem;align-items:flex-end;}
  .tchat-wa-panneau{width:100%;}
  .tchat-wa-texte{display:none;}
  .tchat-wa-bouton{padding:.95rem 1.05rem;}
}

@media (prefers-reduced-motion:reduce){
  .tchat-wa-bouton::after{animation:none;display:none;}
  .tchat-wa-panneau{animation:none;}
  .tchat-wa-bouton:hover{transform:none;}
}