/* Styles communs */

/* ---------- Polices locales (plus de dépendance à Google Fonts) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Icônes : sous-ensemble contenant uniquement les icônes du site
   (liste dans assets/fonts/icons-list.txt — pour une nouvelle icône, régénérer la police) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}
:where(.material-symbols-outlined) {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---------- Base ---------- */
@layer base{
  html,body{margin:0;padding:0;}
  body{overscroll-behavior:none;font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
  main>:first-child{margin-top:0!important;}
  main>:last-child{margin-bottom:0!important;}
}
::-webkit-scrollbar{display:none;}

/* Liens vers une section (#ancre) : défilement fluide, sans passer sous l'en-tête fixe */
html.is-loaded{scroll-behavior:smooth;} /* activé après le chargement : l'arrivée sur une #ancre depuis une autre page est immédiate */
[id]{scroll-margin-top:8.5rem;}

/* ---------- Animations au défilement (classes posées par assets/js/main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.reveal-zoom { transform: scale(.96); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Finitions : survols, focus, cartes ---------- */
a, button, summary, input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #4059aa;
  outline-offset: 2px;
}
main a[class*="rounded"][class*="bg-primary"]:hover,
main button[class*="rounded"][class*="bg-primary"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0, 20, 40, .35); }
main a[class*="rounded"][class*="bg-primary"]:active,
main button[class*="rounded"][class*="bg-primary"]:active { transform: translateY(0) scale(.98); }
main img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
main .group:hover img:not([class*="object-contain"]) { transform: scale(1.03); }

/* ---------- Formulaires : erreurs, statut, chargement ---------- */
.field-error { box-shadow: 0 0 0 2px #ba1a1a !important; }
.field-error-msg { margin-top: .35rem; font-size: 13px; line-height: 18px; color: #ba1a1a; font-weight: 500; }
.form-status { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .85rem 1rem; border-radius: .75rem; font-size: 14px; line-height: 20px; font-weight: 500; animation: status-in .35s cubic-bezier(.16, 1, .3, 1); }
.form-status--success { background: #a4f2d8; color: #002018; }
.form-status--error { background: #ffdad6; color: #93000a; }
@keyframes status-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.btn-spinner { width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
button:disabled { cursor: wait; opacity: .8; }

/* En-tête : ombre renforcée une fois la page défilée */
header.is-scrolled { box-shadow: 0 6px 24px -8px rgba(15, 41, 66, .18); }

/* Sections ciblées par une ancre : léger surlignage à l'arrivée */
@keyframes target-flash { from { box-shadow: inset 0 0 0 9999px rgba(64, 89, 170, .06); } to { box-shadow: none; } }
section:target, div:target { animation: target-flash 1.6s ease-out; }

/* Respect des préférences « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  html.is-loaded { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Carrousels ---------- */
.hero-slide { transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; }
.hero-slide.inactive { opacity: 0; pointer-events: none; transform: scale(1.02); }
.hero-slide.active { opacity: 1; pointer-events: auto; transform: scale(1); }

/* ---------- Transitions entre les pages ---------- */
/* Navigateurs récents (Chrome, Edge, Safari 18+) : fondu natif, l'en-tête reste immobile */
@view-transition { navigation: auto; }
header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out .22s ease-in both; }
::view-transition-new(root) { animation: page-in .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* Autres navigateurs : apparition douce du contenu au chargement */
@supports not (view-transition-name: none) {
  main { animation: page-in .45s cubic-bezier(.16, 1, .3, 1) both; }
}

/* Barre de progression pendant le chargement d'une page */
#page-progress {
  position: fixed; top: 0; left: 0; z-index: 100; height: 3px; width: 0;
  background: linear-gradient(90deg, #4059aa, #88d5bd);
  box-shadow: 0 0 8px rgba(64, 89, 170, .5);
  opacity: 0; transition: width 2.5s cubic-bezier(.1, .7, .2, 1), opacity .3s;
  pointer-events: none;
}
#page-progress.is-loading { width: 85%; opacity: 1; }

/* Offres d'emploi / accordéons : ouverture douce */
details[open] > .job-body { animation: accordion-in .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes accordion-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Édition visuelle (personnes connectées) ---------- */
.mse-bar { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: #0f2942; color: #fff; box-shadow: 0 12px 32px -8px rgba(0,20,40,.45); font: 500 14px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; max-width: calc(100vw - 32px); }
.mse-bar .mse-actions { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.mse-bar.is-editing .mse-actions { display: flex; }
.mse-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: #4059aa; color: #fff; font-weight: 600; cursor: pointer; border: 0; }
.mse-btn .material-symbols-outlined { font-size: 18px; }
.mse-btn:hover { background: #264191; }
.mse-save { background: #0d9488; }
.mse-save:hover { background: #0f766e; }
.mse-save:disabled { background: #475569; cursor: not-allowed; opacity: .7; }
.mse-cancel { background: transparent; border: 1px solid rgba(255,255,255,.35); }
.mse-count { padding: 0 6px; color: #b0c9e8; font-size: 13px; }
.mse-link { color: #a4f2d8; font-size: 13px; text-decoration: underline; padding: 0 6px; }
.mse-toast { position: absolute; left: 0; bottom: calc(100% + 10px); padding: 10px 14px; border-radius: 10px; background: #166534; color: #fff; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: all .25s; pointer-events: none; }
.mse-toast.is-visible { opacity: 1; transform: none; }
.mse-toast.is-error { background: #b91c1c; }
.mse-editing [data-edit] { outline: 1px dashed rgba(64, 89, 170, .55); outline-offset: 3px; border-radius: 3px; cursor: text; min-width: 1ch; }
.mse-editing [data-edit]:hover { outline: 2px solid #4059aa; background-color: rgba(64, 89, 170, .06); }
.mse-editing [data-edit]:focus { outline: 2px solid #0d9488; background-color: rgba(13, 148, 136, .06); }
.mse-editing [data-edit-img], .mse-editing [data-edit-bg] { cursor: pointer; outline: 2px dashed rgba(13, 148, 136, .8); outline-offset: -2px; }
.mse-editing [data-edit-img]:hover, .mse-editing [data-edit-bg]:hover { outline: 3px solid #0d9488; filter: brightness(.92); }
.mse-editing .mse-changed { outline: 2px solid #f59e0b !important; }
.mse-editing .reveal { opacity: 1 !important; transform: none !important; }
@media (max-width: 640px) { .mse-bar { left: 8px; right: 8px; bottom: 8px; } .mse-count, .mse-link { display: none; } }

/* Barre d'administration WordPress : décaler l'en-tête fixe */
body.admin-bar > header { top: 32px; }
@media (max-width: 782px) { body.admin-bar > header { top: 46px; } }

/* Contenu rédigé dans l'éditeur WordPress (pages et articles ajoutés) */
.masmara-prose { color: #191c1e; font-size: 16px; line-height: 1.75; }
.masmara-prose > * + * { margin-top: 1em; }
.masmara-prose h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: #001428; margin-top: 1.8em; }
.masmara-prose h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: #001428; margin-top: 1.5em; }
.masmara-prose a { color: #4059aa; text-decoration: underline; }
.masmara-prose ul { list-style: disc; padding-left: 1.4em; }
.masmara-prose ol { list-style: decimal; padding-left: 1.4em; }
.masmara-prose img { border-radius: 12px; height: auto; }
.masmara-prose blockquote { border-left: 4px solid #4059aa; padding-left: 1em; color: #43474d; font-style: italic; }
.masmara-pagination .nav-links { display: flex; gap: .5rem; justify-content: center; }
.masmara-pagination .page-numbers { padding: .5rem .9rem; border-radius: .5rem; background: #eceef0; }
.masmara-pagination .current { background: #0f2942; color: #fff; }