/* VB Safety · accueil sur téléphone (≤ 700 px), V13.
   Premier écran aligné à gauche, choix du métier, cartes qui défilent, barre d'action fixe.
   Rien ne change au-delà de 700 px : les éléments ajoutés par accueil.js y restent masqués. */

.seg, .rail-dots, .barre-action { display: none; }

@media (max-width: 700px) {
  :root { --gouttiere: 20px; --gris-lisible: #B8BCC6; }

  /* ---------- Premier écran : même composition que sur ordinateur, à l'échelle du téléphone ---------- */
  .scene { min-height: 100vh; min-height: 100svh; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
  .scene .centre { align-items: center; padding: 20px 0 8px; }
  .scene .centre > div { width: 100%; text-align: left; }
  .scene .enonce { font-size: clamp(34px, 10.2vw, 44px); line-height: 1.02; letter-spacing: -.045em; }
  .scene .enonce > span:not(.h1-kw) { text-wrap: wrap; }
  .scene .enonce .h1-kw { margin: 0 0 16px; max-width: 30ch; font: 700 11.5px/1.55 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); text-wrap: balance; }
  .scene .enonce .seconde { margin-top: 2px; color: #A1A1AA; }
  .scene .trait { display: block; width: 36px; margin: 22px 0 20px; }
  .scene .note { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: #A1A1AA; text-align: left; }
  .scene .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
  .scene .btn-hero { min-height: 46px; padding: 0 16px; border-radius: 6px; font-size: 13.5px; }
  .scene .btn-hero.ghost { display: none; } /* le contact reste en bas à gauche, comme sur ordinateur */
  .scene .bas { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .scene .bas .courriel { display: inline; font-size: 15px; }
  .scene .scroll-cue { flex-direction: row; gap: 10px; font: 500 12.5px var(--sans); letter-spacing: 0; text-transform: none; color: #A1A1AA; }
  .scene .scroll-cue .line { width: 1px; height: 22px; background: linear-gradient(var(--signal), rgba(224, 108, 52, 0)); animation: none; }
  .haut .lang-link, .haut.has-menu .menu-btn:not([hidden]) { border-color: rgba(255, 255, 255, .14); }

  /* Le métier défile dans la phrase d'introduction */
  .note-mob .nm-l1, .note-mob .nm-l2 { display: block; }
  .note-mob .nm-l2 { white-space: nowrap; }
  .nm-pile { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: 3px; margin-bottom: -3px; }
  .note-metier { grid-area: 1 / 1; justify-self: start; color: #FAFAFA; font-weight: 600; opacity: 0; transform: translateY(105%);
    transition: transform .55s cubic-bezier(.7, 0, .2, 1), opacity .3s ease; }
  .note-metier.actif { opacity: 1; transform: none; }
  .note-metier.sort { opacity: 0; transform: translateY(-105%); transition: transform .5s cubic-bezier(.7, 0, .2, 1), opacity .4s ease; }

  /* Titre : apparaît d'un seul bloc */
  .scene .enonce > span:not(.h1-kw), .scene .enonce .invis { animation: none; }
  .scene .enonce { animation: bloc-in .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .scene .trait { transform-origin: left; animation: trait-trace .6s cubic-bezier(.2, .75, .15, 1) .75s both; }
  .scene .note-mob { animation: hero-up .7s ease-out .9s both; }
  .scene .hero-cta { animation: hero-up .7s ease-out 1.05s both; }
  .scene .bas { animation: hero-fade .8s ease-out 1.3s both; }
  .vb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- Sections ---------- */
  .section { padding: 56px var(--gouttiere); }
  .section-title { font-size: clamp(28px, 8.4vw, 36px); letter-spacing: -.028em; text-wrap: balance; }
  .section-lead, .pillar p, .dive-head p, .spaces-note { color: var(--gris-lisible); }

  /* Rails horizontaux (approche, outils) : une carte par écran, la suivante visible au bord */
  .rail { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; }

  .pillars.rail { margin-top: 24px; background: none; border: 0; border-radius: 0; overflow-x: auto; align-items: stretch; }
  .pillars.rail .pillar { border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 22px 20px 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); min-height: 172px; }
  .pillars.rail .pillar h3 { font-size: 19px; }

  /* Cartes de même hauteur, boutons alignés en bas */
  .dives.rail { margin-top: 16px; gap: 12px; align-items: stretch; }
  .dives.rail .dive { display: flex; flex-direction: column; border-radius: 20px; padding: 22px 20px; background: rgba(13, 27, 43, .92); }
  .dives.rail .dive-head { flex: 1; }
  .dives.rail .dive-cta { margin-top: auto; }
  .dives.rail .dive-head h3 { font-size: 30px; }

  /* Points de position sous un rail */
  .rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .rail-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .rail-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: width .25s, background-color .25s; }
  .rail-dots button[aria-current="true"]::before { width: 18px; background: #FAFAFA; }

  /* Sélecteur de métier au-dessus des outils, collé en haut pendant la lecture */
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; position: sticky; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 30; margin-top: 24px; padding: 3px; border-radius: 12px; background: rgba(20, 36, 56, .82); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
  .seg button { min-height: 40px; padding: 0 6px; border: 0; border-radius: 9px; background: none; color: #B8BCC6; font: 600 13.5px var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
  .seg button[aria-selected="true"] { background: #FAFAFA; color: #0E1E30; }

  /* ---------- Barre d'action fixe ---------- */
  .barre-action { display: flex; gap: 8px; position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px; border-radius: 16px; background: rgba(16, 30, 48, .86); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; pointer-events: none; }
  .barre-action.visible { transform: none; opacity: 1; pointer-events: auto; }
  .barre-action a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 11px; font: 600 14.5px var(--sans); text-decoration: none; color: #FAFAFA; }
  .barre-action a.principal { background: #C4521C; }
  .barre-action a.second { flex: 0 0 auto; padding: 0 16px; background: rgba(255, 255, 255, .07); }
  body.a-barre .site-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .note-metier { transition: none; }
  .barre-action, .rail-dots button::before, .seg button { transition: none; }
  .rail { scroll-behavior: auto; }
}
.note-mob { display: none; }
@media (max-width: 700px) { .note-mob { display: block; } }
@keyframes bloc-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes trait-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .scene .enonce, .scene .trait, .scene .note-mob, .scene .hero-cta, .scene .bas { animation: none; }
  .note-metier, .note-metier.sort { transition: none; }
}

/* ---------- Menu sur téléphone : s'ouvre sous l'en-tête (comme les autres pages), bouton qui devient une croix ---------- */
@media (max-width: 700px) {
  .menu-ico, .menu-ico::before, .menu-ico::after { transition: transform .25s ease, background-color .2s; }
  .haut.open .menu-ico { background: transparent; }
  .haut.open .menu-ico::before { transform: translateY(5px) rotate(45deg); }
  .haut.open .menu-ico::after { transform: translateY(-5px) rotate(-45deg); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .menu-ico, .menu-ico::before, .menu-ico::after { transition: none; }
}

/* Barre du bas : libellé sur une ligne, centré, y compris sur petits écrans */
@media (max-width: 700px) {
  .barre-action a { text-align: center; white-space: nowrap; }
}
@media (max-width: 360px) {
  .barre-action { left: 8px; right: 8px; gap: 6px; padding: 6px; }
  .barre-action a { font-size: 13.5px; letter-spacing: -.01em; }
  .barre-action a.second { padding: 0 12px; }
}

/* Phrase d'accueil : « Une version dédiée [aux sapeurs-pompiers] », seul le métier change */
@media (max-width: 700px) {
  .note-mob .nm-version { white-space: normal; color: #D4D4D8; }
}

/* Bouton principal : « Outils CMR pour [métier] » sur téléphone, texte d'origine sur ordinateur */
.cta-tel { display: none; }
@media (max-width: 700px) {
  .note-mob { display: none !important; }
  .scene .btn-hero.primary .cta-ordi { display: none; }
  .scene .btn-hero.primary .cta-tel { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; }
  .scene .btn-hero.primary .note-metier { color: #fff; font-weight: 700; }
}
@media (max-width: 360px) {
  .scene .btn-hero.primary { max-width: 100%; padding: 10px 14px; font-size: 14px; gap: 10px; }
  .scene .btn-hero.primary .cta-tel { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
}

/* Bouton principal : « Outils CMR pour » en texte normal, le métier en gras */
@media (max-width: 700px) {
  .scene .btn-hero.primary .cta-tel { font-weight: 400; }
  .scene .btn-hero.primary .note-metier { font-weight: 700; color: #fff; }
}

/* Ordinateur : même bouton « Outils CMR pour [métier] », le métier en gras */
@media (min-width: 701px) {
  .scene .btn-hero.primary .cta-ordi { display: none; }
  .scene .btn-hero.primary .cta-tel { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; font-weight: 400; }
  .scene .btn-hero.primary .note-metier { font-weight: 700; color: #fff; }
  .scene .btn-hero.primary .nm-pile { display: inline-grid; overflow: hidden; padding-bottom: 3px; margin-bottom: -3px; }
  .scene .btn-hero.primary .note-metier { grid-area: 1 / 1; justify-self: start; opacity: 0; transform: translateY(105%); transition: transform .55s cubic-bezier(.7, 0, .2, 1), opacity .3s ease; }
  .scene .btn-hero.primary .note-metier.actif { opacity: 1; transform: none; }
  .scene .btn-hero.primary .note-metier.sort { opacity: 0; transform: translateY(-105%); transition: transform .5s cubic-bezier(.7, 0, .2, 1), opacity .4s ease; }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) { .scene .btn-hero.primary .note-metier, .scene .btn-hero.primary .note-metier.sort { transition: none; } }

/* Bouton principal : « Suivi CMR » en texte normal, la suite en gras (téléphone et ordinateur) */
.scene .btn-hero.primary .note-metier { font-weight: 400; white-space: nowrap; }
.scene .btn-hero.primary .note-metier b { font-weight: 700; color: #fff; }

/* Ordinateur : sélecteur des métiers au-dessus des cartes « Outils » (même style que sur téléphone), une carte à la fois */
.metiers { display: none; }
@media (min-width: 701px) {
  .metiers { display: flex; width: max-content; max-width: 100%; margin: 44px auto 0; padding: 4px; gap: 2px; border-radius: 12px; background: rgba(20, 36, 56, .82); border: 1px solid rgba(255, 255, 255, .1); }
  .metiers button { min-height: 42px; padding: 0 26px; border: 0; border-radius: 9px; background: none; color: #B8BCC6; font: 600 14.5px var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
  .metiers button .n { display: none; }
  .metiers button:hover { color: #fff; }
  .metiers button[aria-selected="true"] { background: #FAFAFA; color: #0E1E30; }
  .metiers button:focus { outline: none; }
  .metiers button:focus-visible { outline: 1px solid rgba(224, 108, 52, .55); outline-offset: 2px; }
  .dives.choix { margin-top: 28px; }
  .dives.choix > .dive:not(.choisie) { display: none; }
  .dives.choix > .dive.choisie { animation: metier-in .35s ease-out; }
}
@keyframes metier-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dives.choix > .dive.choisie { animation: none; } .metiers button, .metiers button .n { transition: none; } }

/* Ordinateur : « Notre approche » épinglée à l'écran, les trois blocs apparaissent au fil du défilement */
@media (min-width: 1100px) {
  #approche .pillars { gap: 20px; margin-top: 56px; background: none; border: 0; border-radius: 0; overflow: visible; }
  #approche .pillar { position: relative; padding: 32px 30px 34px; gap: 12px; background: linear-gradient(170deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; overflow: hidden; }
  #approche .pillar::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(.18); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
  #approche .pillar .num { font: 700 13px var(--sans); letter-spacing: .02em; color: var(--signal); }
  #approche .pillar h3 { font-size: 21px; margin-top: 4px; }
  #approche .pillar p { font-size: 15px; }
  #approche.epingle { height: calc(100vh + 900px); padding: 0 clamp(16px, 5vw, 76px); }
  #approche.epingle .section-inner { position: sticky; top: 0; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 64px 0; }
  #approche.epingle .pillar { opacity: 0; transform: translateY(36px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  #approche.epingle .pillar.vu { opacity: 1; transform: none; }
  #approche.epingle .pillar.vu::before { transform: scaleX(1); }
}

/* Bouton principal du premier écran : texte centré dans le bouton */
.scene .btn-hero.primary { justify-content: center; }
.scene .btn-hero.primary .nm-pile .note-metier { justify-self: center; }

/* Ordinateur : bouton « Demander une démo » fixé en bas, au centre, après le premier écran */
@media (min-width: 701px) {
  .barre-action { display: flex; position: fixed; z-index: 50; left: 50%; bottom: 22px; padding: 6px; border-radius: 14px; background: rgba(16, 30, 48, .82); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transform: translate(-50%, calc(100% + 30px)); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; pointer-events: none; }
  .barre-action.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .barre-action a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 34px; border-radius: 10px; background: #C4521C; color: #fff; font: 600 15px var(--sans); text-decoration: none; white-space: nowrap; }
  .barre-action a:hover { background: #EA7A44; }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) { .barre-action { transition: none; } }

/* Téléphone : « Notre approche », trois blocs empilés qui apparaissent au défilement */
@media (max-width: 700px) {
  #approche .pillars { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; background: none; border: 0; border-radius: 0; overflow: visible; }
  #approche .pillar { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 24px 20px 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
  #approche .pillar .num { font: 700 13px var(--sans); letter-spacing: .02em; color: var(--signal); }
  #approche .pillar h3 { font-size: 20px; }
  #approche .pillar::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(.18); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .2s; }
  #approche .pillars.apparition .pillar { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  #approche .pillars.apparition .pillar.vu-tel { opacity: 1; transform: none; }
  #approche .pillars.apparition .pillar.vu-tel::before { transform: scaleX(1); }
}

/* Téléphone : premier écran centré comme sur ordinateur */
@media (max-width: 700px) {
  .scene .centre > div { text-align: center; }
  .scene .enonce .h1-kw { margin-left: auto; margin-right: auto; }
  .scene .trait { margin: 22px auto 20px; transform-origin: center; }
  .scene .note { margin-left: auto; margin-right: auto; text-align: center; }
  .scene .hero-cta { justify-content: center; }
  .scene .hero-cta .btn-hero.primary { width: 100%; max-width: 340px; }
  #approche .section-lead, #plateforme .section-lead { text-align: center; text-align-last: center; }
}

/* Pied de page allégé sur téléphone : marque, adresse, liens légaux, mentions. Secteurs, ressources et plateforme restent dans le menu. */
@media (max-width: 700px) {
  .site-foot { padding-top: 36px; }
  .foot-grid { display: block; }
  .foot-brand p, .foot-col:nth-child(2), .foot-col:nth-child(3), .foot-col:nth-child(4), .foot-col .foot-h, .foot-col a[data-goto="contact"] { display: none; }
  .foot-col { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
  .foot-col a { font-size: 13.5px; }
  .foot-col a[href^="mailto:"] { flex-basis: 100%; color: #D4D4D8; }
  .foot-bottom { margin-top: 20px; padding-top: 14px; font-size: 12px; }
  .foot-bottom span + span { display: none; }
}

/* Téléphone : « Outils », trois grands blocs empilés (plus de défilement de côté), qui apparaissent au défilement */
@media (max-width: 700px) {
  .dives.pile { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; overflow: visible; }
  .dives.pile .dive { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; padding: 26px 22px 24px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(13, 27, 43, .92)); border: 1px solid rgba(255, 255, 255, .1); }
  .dives.pile .dive::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: left; transform: scaleX(.18); transition: transform .9s cubic-bezier(.2, .7, .2, 1) .2s; }
  .dives.pile .dive-head h3 { font-size: 32px; }
  .dives.pile .dive-cta { margin-top: 22px; }
  .dives.pile.apparition .dive { opacity: 0; transform: translateY(32px) scale(.98); transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
  .dives.pile.apparition .dive.vu-tel { opacity: 1; transform: none; }
  .dives.pile.apparition .dive.vu-tel::before { transform: scaleX(1); }
  /* Titres centrés sur toutes leurs lignes */
  #approche .section-title, #plateforme .section-title, #approche .kicker, #plateforme .kicker { text-align: center; text-align-last: center; margin-left: auto; margin-right: auto; }
  #usage .usage-cols, #usage .usage-cols p, #usage .usage-cols h3 { text-align: center; }
}

/* Téléphone : tout centré ; « Sur intervention / chantier / atelier » en cartes qui défilent de côté */
@media (max-width: 700px) {
  .section-inner > .kicker, #plateforme .kicker, #usage .kicker { display: block; text-align: center; }
  .dives.pile .dive, .dives.pile .dive-head, .dives.pile .dive-body, .dive .focus, .dive .plie-btn { text-align: center; }
  .dives.pile .dive { align-items: center; }
  .dive .dive-cta { justify-content: center; }
  .dive .plie-btn { margin-left: auto; margin-right: auto; }
  .dive-list { text-align: left; }
  #contact .section-inner > *, .contact-grid > div:first-child { text-align: center; }
  .usage-cols { display: flex; gap: 12px; margin: 32px calc(-1 * var(--gouttiere, 16px)) 0; padding: 4px var(--gouttiere, 16px) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: center; }
  .usage-cols::-webkit-scrollbar { display: none; }
  .usage-col { flex: 0 0 78%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
  .usage-col b { display: block; }
}
@media (max-width: 700px) {
  .dives.rail { margin-top: 28px; }
  .dives.rail > .dive { flex: 0 0 86%; text-align: center; align-items: center; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(13, 27, 43, .92)); }
  .dives.rail .dive-cta { justify-content: center; width: 100%; }
}
@media (max-width: 700px) { .dives.rail .dive-head { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } .dives.rail .dive-head h3, .dives.rail .portal-kicker { text-align: center; } }