/* =========================================================================
   JoBLy Consulting — Système de composants partagé
   Réutilisable sur les 4 pages d'offre (Smart Agents / Apps / Flow / Data).
   Chaque "bloc" ci-dessous correspond à un composant Directus réutilisable.
   ========================================================================= */

:root{
  --teal:#49A57E;
  --teal-hover:#16724B;
  --black:#000000;
  --bleu-nuit:#00061B;
  --white:#FFFFFF;
  --gris:#97969E;
  --beige:#E8DCCF;
  --glass-bg:rgba(17,25,40,0.75);
  --glass-border:rgba(209,213,219,0.12);
  --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"Helvetica","Helvetica Neue",Arial,sans-serif;
  background:var(--black);color:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"American Typewriter","AmericanTypewriter","Courier New",monospace;font-weight:400;line-height:1.14;letter-spacing:-0.01em;}
a{color:var(--teal);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--teal-hover);}
img{max-width:100%;display:block;}

/* ---------- COMPONENT: navbar (sticky) ---------- */
body.nav-open{overflow:hidden;}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:transparent;transition:background .3s ease,backdrop-filter .3s ease;
}
.nav.scrolled{background:rgba(0,0,0,0.72);backdrop-filter:blur(10px);}
.nav .logo{font-size:30px;font-weight:300;letter-spacing:.02em;font-family:"Helvetica Neue",sans-serif;color:var(--white);display:inline-flex;align-items:center;}
.nav .logo img{height:52px;width:auto;display:block;}
.nav .logo .job{color:var(--teal);}
.nav .logo .ly{color:var(--gris);}
.nav .logo .sub{display:block;font-size:11px;letter-spacing:.35em;color:var(--gris);margin-top:-4px;font-weight:300;}
.nav-links{display:flex;gap:clamp(14px,2vw,30px);align-items:center;}
.nav-links a{color:var(--white);font-size:15px;font-weight:700;}
.nav-links a:hover,.nav-links a.active{color:var(--teal);}
.nav-cta{border:1px solid var(--teal);border-radius:8px;padding:9px 18px;color:var(--teal)!important;font-size:14px;}
.nav-cta:hover{background:var(--teal);color:var(--black)!important;}
.menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:26px;cursor:pointer;z-index:1002;}

@media(max-width:900px){
  .menu-toggle{display:block;}
  .nav.scrolled{background:var(--black);backdrop-filter:none;}
  .nav-links{
    display:flex;
    position:fixed;
    inset:0;                      /* plein écran */
    background:var(--black);      /* fond noir */
    flex-direction:column;        /* liens empilés verticalement */
    align-items:center;
    justify-content:center;
    gap:28px;
    transform:translateY(-100%);  /* caché au-dessus */
    transition:transform .35s ease;
    z-index:1001;
  }
  .nav-links.open{transform:translateY(0);}   /* descend en plein écran */
  .nav-links a{font-size:22px;}
}

/* ---------- COMPONENT: hero (paramétrable) ----------
   Variantes de fond (champ Directus "hero_background") :
     .hero                -> dégradé radial (défaut)
     .hero.hero--video    -> vidéo plein cadre (ajouter <video class="hero-video">) + overlay
     .hero.hero--solid    -> fond uni noir
   ----------------------------------------------------- */
.hero{
  position:relative;min-height:78vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:150px clamp(20px,5vw,64px) 90px;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #4AA57D 0%, var(--bleu-nuit) 60%, var(--black) 100%);
}
.hero.hero--solid{background:var(--black);}
/* en mode vidéo, le dégradé de secours reste visible tant que la vidéo n'a pas chargé */
.hero.hero--video{background:radial-gradient(circle at 50% 30%, #4AA57D 0%, var(--bleu-nuit) 60%, var(--black) 100%);}
/* full-bleed video/image background + overlay */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;   /* décoratif : ne doit jamais capter les clics (débloque .scroll-hint) */
  background:
    radial-gradient(circle at 50% 38%, rgba(74,165,125,.18) 0%, rgba(0,6,27,.55) 60%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.6) 100%);
}
.hero > *:not(.hero-video):not(.hero-overlay):not(.scroll-hint){position:relative;z-index:2;}
/* animated maturity words */
.kicker{display:flex;flex-wrap:wrap;gap:0;justify-content:center;font-size:13px;letter-spacing:.32em;color:var(--gris);margin-bottom:30px;font-weight:700;text-transform:uppercase;}
.kicker span{padding:0 11px;}
.kicker span + span::before{content:"·";color:rgba(151,150,158,.4);margin-right:22px;}
.kicker .on{color:var(--teal);}

.hero .eyebrow{
  display:inline-block;color:var(--teal);background:var(--white);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  margin-bottom:20px;padding:8px 18px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.hero h1{font-size:clamp(36px,5.6vw,62px);max-width:18ch;margin:0 auto;text-shadow:0 2px 30px rgba(0,0,0,.5);}
.hero .lead{font-weight:700;font-size:clamp(18px,2.2vw,24px);color:var(--beige);margin:20px auto 0;max-width:34ch;line-height:1.35;}
.hero .desc{font-size:clamp(15px,1.6vw,18px);color:#cfd2da;max-width:62ch;margin:24px auto 36px;}
.hero .desc p{margin:0;}
.hero .audience{display:flex;gap:14px 26px;flex-wrap:wrap;justify-content:center;margin-bottom:34px;}
.hero .audience span{font-size:14px;color:#cfd2da;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 16px;}
.hero .audience b{color:var(--teal);}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;
  transform:translateX(-50%);
  color:var(--gris);font-size:24px;
  animation:bob 2s infinite;
  z-index:3;               /* au-dessus de .hero-overlay (z-index:1) */
  cursor:pointer;
  background:none;border:none;padding:0;
  font-family:inherit;
}


@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- COMPONENT: section shell ---------- */
.section{padding:clamp(56px,8vw,100px) clamp(20px,5vw,64px);}
.section .inner{max-width:var(--maxw);margin:0 auto;}
.section-head{max-width:820px;margin:0 auto 50px;text-align:center;}
.section-head .eyebrow{display:inline-block;color:var(--teal);font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,4.4vw,46px);}
.section-head p{color:var(--gris);font-size:clamp(16px,1.8vw,19px);margin-top:16px;}

/* brushstroke behind titles (bandeau pastel) */
.brush{position:relative;display:inline-block;isolation:isolate;}
.brush::before{
  content:"";position:absolute;z-index:-1;left:-8%;right:-8%;width:116%;
  top:50%;height:1.55em;transform:translateY(-50%);
  background-image:url("https://joblyapps.backend.myjobly.fr/assets/77C10F6A-25B8-4436-ACAD-C9E643F19279");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;pointer-events:none;
}

/* ---------- COMPONENT: alternating feature row ---------- */
.feature-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);
  align-items:center;max-width:var(--maxw);margin:0 auto;
  padding:clamp(36px,5vw,56px) 0;
}
.feature-row + .feature-row{border-top:1px solid rgba(255,255,255,.07);}
.feature-row.reverse .fr-media{order:2;}
.fr-text .kicker{color:var(--teal);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:12px;}
.fr-text h3{font-size:clamp(22px,2.8vw,30px);margin-bottom:16px;}
.fr-text p{color:#c7cad2;font-size:16px;margin-bottom:14px;}
.fr-text ul{list-style:none;margin:18px 0 22px;display:grid;gap:10px;}
.fr-text li{position:relative;padding-left:26px;color:#dfe1e7;font-size:15.5px;}
.fr-text li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--teal);transform:rotate(45deg);}
.fr-media{
  position:relative;border-radius:16px;min-height:240px;
  background:var(--glass-bg);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:30px;
}
.fr-media .glyph{font-size:clamp(48px,8vw,86px);opacity:.9;filter:drop-shadow(0 6px 24px rgba(73,165,126,.4));}
.fr-media .badge{position:absolute;top:14px;left:14px;z-index:2;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;}
/* image plein cadre à la place du glyphe (champ Directus optionnel) */
.fr-media.fr-media--image{padding:0;}
.fr-media .fr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.fr-media.fr-media--image .badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Helvetica","Helvetica Neue",sans-serif;line-height:1;
  color:var(--teal);background:var(--white);
  padding:9px 14px 9px 16px;border-radius:999px;
  letter-spacing:.18em;text-indent:.18em;
  box-shadow:0 6px 18px rgba(0,0,0,.35);text-shadow:none;
}
@media(max-width:820px){
  .feature-row{grid-template-columns:1fr;}
  .feature-row.reverse .fr-media{order:0;}
}

/* ---------- COMPONENT: intro-card (grand tableau agentique) ---------- */
.intro-block{background:radial-gradient(circle at 50% 0%, rgba(74,165,125,.45) 0%, var(--bleu-nuit) 70%);}
.intro-card{
  max-width:980px;margin:0 auto;
  background:var(--glass-bg);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);border-radius:16px;
  padding:clamp(28px,4vw,52px);
}
.intro-card h2{font-size:clamp(26px,3.8vw,42px);margin-bottom:20px;}
.intro-card .p-18{font-size:18px;color:#dfe1e7;margin-bottom:28px;max-width:70ch;}
.layers{
  display:grid;
  gap:14px;
}
.panel-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;

  padding:16px 20px;
  border-radius:12px;

  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.05);
}

.panel-row h4{
  margin:0;
  color:var(--teal);
  font-weight:700;
  font-family:"American Typewriter",monospace;
}

.panel-row p{
  margin:0;
  color:#cfd2da;
  font-size:15.5px;
}

@media(max-width:600px){
  .panel-row{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  .panel-row h4{
    margin:0;
  }

  .panel-row p{
    margin:0;
  }
}

.panel-kicker{
  display:block;
  font-family:"American Typewriter",monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:8px;
}

/* ---------- COMPONENT: cards 3-col ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;max-width:var(--maxw);margin:0 auto;}
.card{
  background:var(--glass-bg);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--glass-border);border-radius:14px;padding:30px 26px 28px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);border-color:rgba(73,165,126,.5);box-shadow:0 18px 50px rgba(0,0,0,.5);}
.card.signature{border-color:rgba(73,165,126,.55);}
.card.signature::before{
  content:"SIGNATURE";position:absolute;
  top:26px;right:-52px;width:180px;
  text-align:center;
  background:var(--teal);color:var(--black);font-size:11px;font-weight:700;
  letter-spacing:.12em;line-height:1;padding:6px 0;
  transform:rotate(45deg);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.card .num{font-family:"American Typewriter",monospace;font-size:13px;color:var(--teal);letter-spacing:.1em;margin-bottom:14px;}
.card .glyph{font-size:34px;margin-bottom:14px;}
.card h3{font-size:22px;margin-bottom:14px;line-height:1.25;}
.card p{color:#c7cad2;font-size:15px;flex-grow:1;}
.card .link{margin-top:20px;font-weight:700;font-size:15px;color:var(--teal);}
.card .link:hover{color:var(--teal-hover);}

/* card variants (paramétrables) :
   .card.card--static  -> non cliquable (pas d'effet de survol)
   .card.card--media   -> image de couverture en haut (à la place du glyphe) */
.card.card--static{cursor:default;}
.card.card--static:hover{transform:none;border-color:var(--glass-border);box-shadow:none;}
.card.card--media{padding:0;overflow:hidden;}
.card.card--media .card-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex-grow:1;}
.card.card--media h3{font-size:20px;}

/* offers grid: larger cards, prose-led, no icon */
.cards.offers{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:24px;}
.cards.offers .card h3{font-size:26px;}
.cards.offers .card p{font-size:16px;}

.cards.offers .card {
  padding-top: 0;                /* l'image colle en haut */
}

.card.card--media .card-cover{
  width:100%;
  height:auto;              /* l'image garde ses proportions, pas de recadrage */
  aspect-ratio:auto;        /* annule le 16/9 forcé */
  object-fit:contain;       /* screenshot affiché en entier, sans recadrage */
  object-position:top;
  display:block;
  margin:0;                 /* bord à bord haut/gauche/droite */
  background:#fff;          /* fond blanc derrière le screenshot */
  max-height:260px;
}

.cards.cards--pills{
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.card.card--pill{
  padding:22px 22px 24px;
}
.card.card--pill h3{font-size:20px;margin-bottom:8px;}
.card.card--pill p{font-size:14.5px;color:#c7cad2;}

@media(max-width:900px){
  .cards.cards--pills{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:560px){
  .cards.cards--pills{grid-template-columns:1fr;}
}

.cards-foot{
  max-width:var(--maxw);margin:30px auto 0;text-align:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:20px 26px;color:var(--gris);font-size:15.5px;
}
.cards-foot strong{color:var(--white);}

/* ---------- COMPONENT: academy band (enabler transverse) ---------- */
.academy-band{
  max-width:var(--maxw);margin:30px auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;justify-content:space-between;
  padding:26px 30px;border-radius:14px;text-decoration:none;
  background:linear-gradient(100deg, rgba(73,165,126,.16) 0%, rgba(0,0,0,.45) 60%);
  border:1px solid rgba(73,165,126,.35);transition:border-color .2s ease,transform .2s ease;
  margin:30px auto 60px;
}
.academy-band:hover{border-color:var(--teal);transform:translateY(-3px);}
.academy-band .ab-left{display:flex;align-items:center;gap:18px;min-width:0;}
.academy-band .ab-glyph{font-size:34px;flex:0 0 auto;}
.academy-band .ab-txt h4{font-family:"Helvetica",sans-serif;font-size:19px;color:var(--white);margin-bottom:4px;}
.academy-band .ab-txt p{color:#c7cad2;font-size:15px;}
.academy-band .ab-cta{flex:0 0 auto;color:var(--teal);font-weight:700;font-size:15px;}
.academy-band .badge-q{display:inline-block;font-size:11px;letter-spacing:.12em;color:var(--teal);border:1px solid rgba(73,165,126,.5);border-radius:6px;padding:2px 8px;margin-left:8px;vertical-align:middle;}

/* ---------- COMPONENT: stats banner (fond blanc) ---------- */
.stats{background:var(--white);}
/* zone optionnelle au-dessus du bandeau : image (ex: logo Qualiopi) ou texte */
.stats .topper{max-width:var(--maxw);margin:0 auto 34px;text-align:center;}
.stats .topper img{
  height:120px;width:auto;display:inline-block;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  border-radius:8px;
}
.stats .topper p{color:#4a4a52;font-size:16px;margin-top:12px;}
.stats .topper h3{color:var(--bleu-nuit);font-size:clamp(20px,3vw,28px);}
.stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;max-width:var(--maxw);margin:0 auto;text-align:center;}
.stat .num{font-family:"American Typewriter",monospace;font-size:clamp(34px,5vw,52px);color:var(--teal);line-height:1;}
.stat .num span{color:var(--bleu-nuit);}
.stat .label{color:#4a4a52;font-size:15px;margin-top:10px;}

/* ---------- COMPONENT: CTA ---------- */
.cta{text-align:center;background:radial-gradient(circle at 50% 120%, rgba(74,165,125,.45) 0%, var(--black) 60%);}
.cta h2{font-size:clamp(26px,4.2vw,42px);max-width:20ch;margin:0 auto 18px;}
.cta p{color:var(--gris);max-width:52ch;margin:0 auto 30px;font-size:17px;}
.btn-primary{
  display:inline-block;background:var(--teal);color:var(--black);font-weight:700;font-size:16px;
  padding:15px 32px;border-radius:10px;transition:background .2s ease,transform .2s ease;
  box-shadow:0 8px 30px rgba(73,165,126,.3);
}
.btn-primary:hover{background:var(--teal-hover);color:var(--white);transform:translateY(-2px);}

/* ---------- COMPONENT: FAQ ---------- */
.faq{max-width:820px;margin:0 auto;}

.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;                    /* espace entre chaque item */
}

.faq-item{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{border-color:rgba(73,165,126,.5);}

.faq-item summary{
  list-style:none;             /* retire la flèche native */
  cursor:pointer;
  padding:20px 24px;
  font-weight:600;
  font-size:17px;
  color:var(--white);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{
  content:"+";
  font-size:22px;
  color:var(--teal);
  transition:transform .2s ease;
  flex:0 0 auto;
}
.faq-item[open] summary::after{content:"\2212";}  /* signe moins quand ouvert */

.faq-answer{
  padding:0 24px 20px;
  color:#c7cad2;
  font-size:15.5px;
  line-height:1.6;
}
.faq-answer p{margin:0;}

/* ============================================================
   Bloc Contact — aligné sur le nouveau layout (thème sombre)
   Variables utilisées : --white, --black, vert d'accent #49A57E
   ============================================================ */

.contact-section {
    padding-block: 80px;
}

.contact-inner {
    max-width: 640px;
    margin-inline: auto;
}

/* Champs empilés verticalement (fini l'alignement horizontal cassé) */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 32px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.contact-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Astérisque APRÈS le label, dans le flux (plus de span baladeur) */
.contact-required {
    color: #49A57E;
    margin-left: 4px;
}

/* Inputs / select / textarea : même style unifié */
.contact-input,
.contact-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    font-family: inherit;
    color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    transition: border-color .2s ease, background .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.contact-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.contact-input:focus,
.contact-select:focus {
    outline: none;
    border-color: #49A57E;
    background: rgba(255, 255, 255, 0.06);
}

.contact-textarea {
    resize: vertical;
    min-height: 130px;
}

/* Petite flèche pour le select */
.contact-select {
    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='%2349A57E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}

.contact-select option {
    background: var(--black);
    color: var(--white);
}

/* État erreur (posé par le JS de validation) */
.contact-input--error {
    border-color: #E75F6D !important;
}

/* Bouton : réutilise .btn-primary du site, pleine largeur ici */
.contact-submit {
    width: 100%;
    margin-top: 6px;
    cursor: pointer;
    border: none !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- Modal d'erreur ---------- */
.contact-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
}

/* Ouverture via #open-modal dans l'URL (comme l'ancien comportement) */
.contact-modal:target {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-modal-card {
    position: relative;
    max-width: 440px;
    width: calc(100% - 40px);
    padding: 32px;
    background: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    text-align: center;
    color: var(--white);
}

.contact-modal-card h3 {
    margin: 0 0 12px;
    color: var(--white);
}

.contact-modal-msg {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}

.contact-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 26px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.contact-modal-close:hover {
    color: var(--white);
}

@media (max-width: 600px) {
    .contact-section { padding-block: 56px; }
}

/* ---------- COMPONENT: cross-offer nav (continuum) ---------- */
.continuum{border-top:1px solid rgba(255,255,255,.08);}
.continuum .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;max-width:var(--maxw);margin:0 auto;}
.continuum a.tile{
  display:block;padding:22px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);transition:border-color .2s ease,transform .2s ease;
}
.continuum a.tile:hover{border-color:rgba(73,165,126,.5);transform:translateY(-4px);}
.continuum a.tile.current{border-color:var(--teal);background:rgba(73,165,126,.08);}
.continuum .tile .step{font-family:"American Typewriter",monospace;font-size:12px;color:var(--teal);letter-spacing:.12em;}
.continuum .tile h4{font-family:"Helvetica",sans-serif;font-size:18px;color:var(--white);margin:8px 0 6px;}
.continuum .tile p{color:var(--gris);font-size:14px;}

/* ---------- COMPONENT: references carousel ---------- */
.refs{padding:48px 0 56px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.4);overflow:hidden;}
.refs h4{text-align:center;font-family:"Helvetica",sans-serif;font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:30px;}
.refs .marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.refs .track{display:flex;width:max-content;gap:56px;align-items:center;animation:scroll-x 38s linear infinite;}
.refs .marquee:hover .track{animation-play-state:paused;}
.refs .track span{
  flex:0 0 auto;font-size:clamp(16px,2vw,22px);font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.78);font-family:"Helvetica Neue",sans-serif;white-space:nowrap;
}
/* light variant (fond blanc) */
.refs.light{background:var(--white);border-color:rgba(0,0,0,.08);}
.refs.light h4{color:#6a6a72;}
.refs.light .track span{color:#2a2a30;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.refs .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}}
.footer{padding:46px clamp(20px,5vw,64px) 70px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:var(--gris);font-size:14px;}
.footer .logo{font-size:24px;margin-bottom:12px;display:inline-block;color:var(--white);}
.footer .logo .job{color:var(--teal);}
.footer .logo .ly{color:var(--gris);}
.footer a{color:var(--gris);}
.footer a:hover{color:var(--teal);}

/* ---------- COMPONENT: site-footer (bloc Directus 3 colonnes) ---------- */
.site-footer{background:var(--black);border-top:1px solid rgba(255,255,255,.08);padding:54px clamp(20px,5vw,64px) 70px;position:relative;}
.site-footer .cols{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px 80px;
}
.site-footer .col{
  flex:0 0 auto;
  min-width:180px;
}
.site-footer .col h4{font-family:"Helvetica",sans-serif;font-weight:700;font-size:16px;color:var(--white);margin-bottom:16px;letter-spacing:.02em;}
.site-footer .col a{display:block;color:var(--gris);font-size:15px;margin-bottom:8px;text-decoration:none;}
.site-footer .col a:hover{color:var(--teal);}
.site-footer .socials{display:flex;gap:12px;margin-top:4px;}
.site-footer .socials a{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;margin:0;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--white);font-size:15px;
}
.site-footer .socials a:hover{border-color:var(--teal);color:var(--teal);}
.site-footer .lang-icon{font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;}
.site-footer .legal-bar{max-width:var(--maxw);margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);color:var(--gris);font-size:13px;text-align:center;}
.site-footer .legal-bar a{color:var(--gris);}
.site-footer .legal-bar a:hover{color:var(--teal);}
.to-top{position:absolute;right:26px;bottom:26px;color:var(--gris);font-size:22px;text-decoration:none;}
.to-top:hover{color:var(--teal);}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

.french-flag {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    background: linear-gradient(to right, blue 33.33%, white 33.33%, white 66.66%, red 66.66%);
}

.english-flag {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    background: url('https://joblyapps.backend.myjobly.fr/assets/4BAC8257-9454-4877-9957-2ECEDEDDDA2D') no-repeat center center;
    background-size: cover;
}

/* print */
@media print{
  .nav{display:none;}
  .section{padding:26px;}
  .card,.feature-row,.faq details{break-inside:avoid;}
}