/* Vidal.I.T : couleurs et polices reprises de la plaquette (bleu nuit = fond d'origine du logo) */
:root{
  --nuit:#0E3B5C; --nuit-fonce:#0A2D47; --nuit-clair:#164C73;
  --creme:#F7F1E6; --peche:#F2B092; --peche-fonce:#EC9A75;
  --terre:#C9643B; --terre-texte:#A44C27;
  --encre:#15222C; --encre-doux:#4B5661;
  --filet:#E3DDD3; --doux:#F6F2EC;
  --sur-nuit:#D2DEE8; --sur-nuit-doux:#BCCEDD;
  --titre:"Hanken Grotesk", system-ui, sans-serif;
  --texte:"Atkinson Hyperlegible", system-ui, sans-serif;
  --rayon:14px;
  --marge:clamp(20px, 5vw, 56px);
  --section:clamp(64px, 9vw, 120px);
  --sortie:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{ font-family:var(--texte); color:var(--encre); background:#fff; font-size:clamp(17px, 1.05vw + 12px, 19px); line-height:1.6; }
img,svg{ display:block; max-width:100%; }
a{ color:var(--terre-texte); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
::selection{ background:var(--peche); color:var(--nuit); }
:focus-visible{ outline:3px solid var(--peche-fonce); outline-offset:3px; border-radius:4px; }
html{ scrollbar-color:var(--nuit-clair) var(--doux); }
ul,ol{ list-style:none; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.evitement{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--creme); color:var(--nuit); padding:10px 16px; border-radius:8px; font-weight:700; }
.evitement:focus{ top:12px; }

h1,h2,h3{ font-family:var(--titre); font-weight:800; letter-spacing:-0.025em; line-height:1.08; text-wrap:balance; color:var(--nuit); }
h1{ font-size:clamp(40px, 5.4vw, 76px); letter-spacing:-0.03em; }
h2{ font-size:clamp(30px, 3.4vw, 48px); }
h3{ font-size:clamp(20px, 1.5vw, 24px); letter-spacing:-0.015em; }
.h-petit{ font-size:clamp(22px, 1.8vw, 28px); }
p{ text-wrap:pretty; }
.ico{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.enveloppe{ width:100%; max-width:1240px; margin:0 auto; padding:0 var(--marge); }
.section{ padding:var(--section) 0; }
.section-douce{ background:var(--doux); }
.intro{ font-size:1.08em; color:var(--encre-doux); max-width:62ch; margin-top:18px; }

/* ---------- Boutons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 26px; border-radius:999px;
  background:var(--nuit); color:var(--creme); font-family:var(--titre); font-weight:700; font-size:17px; text-decoration:none;
  transition:background .25s var(--sortie), transform .25s var(--sortie), box-shadow .25s var(--sortie); border:0; cursor:pointer; }
.btn:hover{ background:var(--nuit-clair); transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(10,45,71,.6); }
.btn:active{ transform:none; }
.btn-peche{ background:var(--peche); color:var(--nuit-fonce); }
.btn-peche:hover{ background:var(--creme); }
.btn-petit{ min-height:44px; padding:0 18px; font-size:15.5px; }
.lien-tel{ display:inline-flex; align-items:center; gap:10px; color:var(--creme); font-family:var(--titre); font-weight:800; font-size:22px; letter-spacing:.01em; text-decoration:none; font-variant-numeric:tabular-nums; }
.lien-tel:hover{ color:var(--peche); }
.lien-tel .ico{ color:var(--peche); }
.lien-fleche{ display:inline-flex; align-items:center; gap:8px; font-family:var(--titre); font-weight:700; color:var(--nuit); text-decoration:none; border-bottom:2px solid var(--peche); padding-bottom:2px; }
.lien-fleche .ico{ width:18px; transition:transform .25s var(--sortie); }
.lien-fleche:hover .ico{ transform:translateX(4px); }

/* ---------- En-tête ---------- */
.entete{ position:sticky; top:0; z-index:40; background:var(--nuit); border-bottom:1px solid rgba(247,241,230,.12); }
.entete-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:76px; }
.marque img{ height:40px; width:auto; }
.menu{ display:flex; align-items:center; gap:clamp(14px, 2vw, 30px); }
.menu a:not(.btn){ color:var(--sur-nuit); text-decoration:none; font-family:var(--titre); font-weight:600; font-size:16px; padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.menu a:not(.btn):hover, .menu a[aria-current]{ color:var(--creme); border-color:var(--peche); }
.menu .btn{ background:var(--peche); color:var(--nuit-fonce); }
.menu .btn:hover{ background:var(--creme); }
.menu .btn .ico{ width:19px; height:19px; }
.menu-btn{ display:none; width:48px; height:48px; border:0; background:transparent; cursor:pointer; position:relative; }
.menu-btn i, .menu-btn i::before, .menu-btn i::after{ position:absolute; left:12px; width:24px; height:2px; background:var(--creme); border-radius:2px; transition:transform .3s var(--sortie), opacity .2s; }
.menu-btn i{ top:23px; } .menu-btn i::before{ content:""; left:0; top:-7px; } .menu-btn i::after{ content:""; left:0; top:7px; }
.menu-btn[aria-expanded="true"] i{ background:transparent; }
.menu-btn[aria-expanded="true"] i::before{ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .menu-btn{ display:block; }
  .menu{ position:absolute; left:0; right:0; top:76px; flex-direction:column; align-items:stretch; gap:0; background:var(--nuit);
    padding:8px var(--marge) 24px; border-bottom:1px solid rgba(247,241,230,.15); display:none; }
  .menu.ouvert{ display:flex; }
  .menu a:not(.btn){ padding:14px 0; font-size:19px; border-bottom:1px solid rgba(247,241,230,.12); }
  .menu .btn{ margin-top:18px; justify-content:center; min-height:54px; font-size:17px; }
}

/* ---------- Accueil : héros ---------- */
.hero{ background:var(--nuit); color:var(--creme); padding:clamp(56px, 8vw, 112px) 0 0; overflow:hidden; }
.hero-in{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.hero h1{ color:var(--creme); }
.accroche{ font-size:clamp(19px, 1.4vw, 23px); line-height:1.5; color:#E6E1D7; margin-top:28px; max-width:34em; }
.public{ color:var(--sur-nuit-doux); margin-top:16px; font-size:16px; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin-top:36px; }
.hero-qui{ color:var(--sur-nuit-doux); font-size:15.5px; padding-top:clamp(40px, 5vw, 72px); padding-bottom:28px; }
.hero-qui b{ color:var(--creme); font-family:var(--titre); }

.pastille{ width:52px; height:52px; border-radius:50%; background:var(--terre); display:grid; place-items:center; flex:none; }
.pastille .ico{ width:26px; height:26px; color:var(--creme); }


.puces-secteurs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.puces-secteurs a{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 22px 0 16px; border-radius:999px;
  background:#fff; border:1.5px solid var(--nuit); color:var(--nuit); text-decoration:none; font-family:var(--titre); font-weight:700; font-size:17px;
  transition:background .2s, color .2s, transform .25s var(--sortie); }
.puces-secteurs a .ico{ color:var(--terre-texte); transition:color .2s; }
.puces-secteurs a:hover{ background:var(--nuit); color:var(--creme); transform:translateY(-2px); }
.puces-secteurs a:hover .ico{ color:var(--peche); }

/* ---------- Quatre métiers ---------- */
.metiers{ margin-top:48px; border-top:2px solid var(--nuit); }
.metier{ display:grid; grid-template-columns:56px minmax(0, 1fr) minmax(0, .85fr); gap:0 clamp(20px, 3vw, 44px); padding:clamp(28px, 3vw, 40px) 0; border-bottom:1px solid var(--filet); }
.metier:last-child{ border-bottom:0; }
.rond{ width:52px; height:52px; border-radius:50%; background:var(--terre); color:#fff; display:grid; place-items:center; font-family:var(--titre); font-weight:800; font-size:22px; }
.metier h3{ font-size:clamp(24px, 2vw, 30px); }
.metier h3 small{ font-family:var(--texte); font-weight:400; font-size:16px; letter-spacing:0; color:var(--terre-texte); margin-left:8px; white-space:nowrap; }
.promesse{ font-weight:700; margin:10px 0 14px; }
.puces li{ position:relative; padding-left:22px; margin-bottom:6px; }
.puces li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--terre); }
.exemples{ display:grid; gap:12px; align-self:start; }
.exemple{ background:var(--doux); border-radius:var(--rayon); padding:18px 22px; font-size:.95em; line-height:1.5; }
.section-douce .exemple{ background:#fff; }
.exemple b{ display:block; color:var(--terre-texte); font-family:var(--titre); font-size:15px; margin-bottom:4px; }

/* ---------- Méthode ---------- */
.etapes{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:48px; counter-reset:e; }
.etape{ border-top:2px solid var(--nuit); padding-top:18px; }
.etape .n{ font-family:var(--titre); font-weight:800; font-size:44px; color:var(--terre-texte); line-height:1; }
.etape b{ display:block; font-family:var(--titre); font-size:21px; color:var(--nuit); margin:12px 0 6px; }
.etape p{ color:var(--encre-doux); }

/* ---------- Tarifs ---------- */
.grille-tarifs{ columns:2; column-gap:clamp(32px, 5vw, 72px); margin-top:48px; }
.groupe{ break-inside:avoid; margin-bottom:36px; }
.groupe h3{ font-size:21px; padding-bottom:10px; border-bottom:2px solid var(--nuit); }
.groupe h3 i{ font-style:normal; color:var(--terre-texte); margin-right:8px; }
.ligne{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:12px 0; border-bottom:1px solid var(--filet); }
.prix{ font-family:var(--titre); font-weight:800; color:var(--nuit); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:1.05em; }
.prix small{ font-weight:500; color:var(--encre-doux); font-size:.78em; margin-right:4px; }
.note{ font-size:15px; color:var(--encre-doux); margin-top:10px; }
.suivi{ background:var(--nuit); color:var(--creme); border-radius:var(--rayon); padding:24px 26px; }
.suivi h3{ color:var(--creme); border-color:rgba(247,241,230,.3); }
.suivi .ligne{ border:0; padding-bottom:0; }
.suivi .prix{ color:var(--peche); }
.suivi .note{ color:var(--sur-nuit-doux); }
.mentions{ font-size:15px; color:var(--encre-doux); max-width:72ch; }

/* ---------- Qui suis-je ---------- */
.moi-photo{ display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:start; }
.photo{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--rayon); }
.presentation{ font-size:1.12em; line-height:1.65; margin-top:24px; max-width:64ch; }
.atouts-titre{ margin-top:48px; }
.atouts{ display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; margin-top:22px; }
.atouts li{ display:grid; grid-template-columns:26px 1fr; gap:14px; }
.atouts .ico{ width:26px; height:26px; color:var(--terre-texte); stroke-width:2.4; margin-top:2px; }
.atouts b{ display:block; font-family:var(--titre); font-size:20px; color:var(--nuit); }
.atouts span{ color:var(--encre-doux); }
.astuce{ margin-top:40px; background:#fff; border-radius:var(--rayon); padding:20px 24px; max-width:72ch; }
.astuce b{ color:var(--terre-texte); }

/* ---------- Bloc contact ---------- */
.contact{ background:var(--nuit); color:var(--creme); padding:clamp(64px, 8vw, 112px) 0; }
.contact-in{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:40px 72px; align-items:end; }
.contact h2{ color:var(--creme); font-size:clamp(34px, 4vw, 56px); }
.contact p{ color:var(--sur-nuit); margin-top:18px; max-width:46ch; }
.contact-actions{ display:grid; gap:28px; justify-items:start; }
.contact-tel small{ display:block; color:var(--sur-nuit-doux); font-size:15px; margin-bottom:2px; }
.gros{ font-family:var(--titre); font-weight:800; font-size:clamp(34px, 3.6vw, 50px); color:var(--creme); text-decoration:none; letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gros:hover{ color:var(--peche); }
.gros-nuit{ color:var(--nuit); font-size:clamp(30px, 3vw, 40px); }
.gros-nuit:hover{ color:var(--terre-texte); }

/* ---------- En-tête des pages intérieures ---------- */
.tete-page{ background:var(--nuit); color:var(--creme); padding:clamp(56px, 7vw, 100px) 0 clamp(56px, 6vw, 88px); }
.tete-page h1{ color:var(--creme); max-width:18ch; }
.tete-page .accroche{ max-width:40em; }
.fil{ font-size:15px; color:var(--sur-nuit-doux); margin-bottom:28px; }
.fil a{ color:var(--peche); }

.choix-autre{ margin-top:40px; color:var(--encre-doux); }

/* ---------- Page métier ---------- */
.deux-col{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:32px clamp(40px, 6vw, 96px); align-items:start; }
.douleurs li{ font-family:var(--titre); font-weight:700; font-size:clamp(20px, 1.6vw, 24px); color:var(--nuit); line-height:1.3; padding:18px 0 18px 40px; border-bottom:1px solid var(--filet); position:relative; }
.douleurs li:first-child{ border-top:2px solid var(--nuit); }
.douleurs li::before{ content:""; position:absolute; left:4px; top:27px; width:16px; height:16px; border-radius:50%; border:3px solid var(--terre); }
.depart{ background:#fff; border-radius:var(--rayon); padding:26px 28px; }
.faq details{ border-bottom:1px solid var(--filet); }
.faq details:first-child{ border-top:2px solid var(--nuit); }
.faq summary{ cursor:pointer; list-style:none; font-family:var(--titre); font-weight:700; font-size:20px; color:var(--nuit); padding:20px 44px 20px 0; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:8px; top:28px; width:12px; height:12px; border-right:2.5px solid var(--terre-texte); border-bottom:2.5px solid var(--terre-texte); transform:rotate(45deg); transition:transform .3s var(--sortie); }
.faq details[open] summary::after{ transform:translateY(5px) rotate(-135deg); }
.faq details p{ padding:0 0 22px; color:var(--encre-doux); max-width:60ch; }
.autres{ padding-top:clamp(48px, 6vw, 80px); }

/* ---------- Rendez-vous ---------- */
.rdv{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:start; }
.rdv-agenda{ border:1.5px solid var(--filet); border-radius:var(--rayon); overflow:hidden; background:#fff; }
.rdv-cadre iframe{ width:100%; height:min(760px, 90vh); border:0; display:block; }
.rdv-attente{ padding:clamp(32px, 5vw, 64px); display:grid; gap:20px; justify-items:start; background:var(--doux); }
.rdv-ico{ width:48px; height:48px; color:var(--terre-texte); }
.rdv-attente p{ max-width:52ch; }
.rdv-etapes{ counter-reset:r; margin-top:20px; border-top:2px solid var(--nuit); }
.rdv-etapes li{ counter-increment:r; position:relative; padding:16px 0 16px 48px; border-bottom:1px solid var(--filet); color:var(--encre-doux); }
.rdv-etapes li::before{ content:counter(r); position:absolute; left:0; top:14px; width:32px; height:32px; border-radius:50%; background:var(--terre-texte); color:#fff; font-family:var(--titre); font-weight:800; display:grid; place-items:center; font-size:16px; }
.rdv-etapes b{ color:var(--nuit); }
.rdv-tel{ margin-top:36px; }
.rdv-tel p:first-child{ font-family:var(--titre); font-weight:700; color:var(--nuit); margin-bottom:4px; }

/* ---------- Page métier : journée avant / après ---------- */
.journee{ margin-top:44px; border-top:2px solid var(--nuit); }
.j-ligne{ display:grid; grid-template-columns:minmax(90px, 160px) minmax(0, 1fr) minmax(0, 1fr); gap:0 clamp(20px, 3vw, 44px); padding:22px 0; border-bottom:1px solid var(--filet); align-items:baseline; }
.j-tete{ padding:14px 0; font-family:var(--titre); font-weight:700; font-size:15px; color:var(--encre-doux); }
.j-tete span:last-child{ color:var(--terre-texte); }
.j-heure{ font-family:var(--titre); font-weight:800; font-size:clamp(20px, 1.6vw, 24px); color:var(--nuit); font-variant-numeric:tabular-nums; line-height:1.2; }
.j-avant{ color:var(--encre-doux); }
.j-apres{ color:var(--nuit); font-weight:700; position:relative; padding-left:22px; }
.j-apres::before{ content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:50%; background:var(--terre); }
.j-ligne small{ display:none; }

/* ---------- Page métier : assistant IA (moment signé de la page) ---------- */
.ia{ background:var(--nuit); color:var(--creme); }
.ia h2{ color:var(--creme); }
.ia .intro{ color:var(--sur-nuit); }
.ia-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px clamp(40px, 6vw, 96px); align-items:center; }
.ia-taches{ margin-top:30px; display:grid; gap:14px; }
.ia-taches li{ display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; }
.ia-taches .ico{ width:24px; height:24px; color:var(--peche); stroke-width:2.4; margin-top:2px; }
.ia-taches-clair .ico{ color:var(--terre-texte); }
.ia-prix{ margin-top:34px; padding-top:18px; border-top:1px solid rgba(247,241,230,.22); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; align-items:baseline; }
.ia-prix .prix{ color:var(--peche); font-size:1.3em; }
.ia-prix .prix small{ color:var(--sur-nuit-doux); }
.ia-europe{ margin-top:8px; font-size:15px; color:var(--sur-nuit-doux); }

.demo-chat{ background:var(--doux); border-radius:20px; overflow:hidden; color:var(--encre);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.18); }
.demo-chat figcaption{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff; padding:16px 20px; border-bottom:1px solid var(--filet); }
.demo-chat figcaption b{ font-family:var(--titre); color:var(--nuit); font-size:16.5px; line-height:1.3; }
.demo-chat figcaption small{ flex:none; font-size:13px; color:var(--terre-texte); border:1px solid currentColor; border-radius:999px; padding:2px 10px; }
.demo-fil{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:14px; min-height:420px; }
.demo-msg{ max-width:86%; display:grid; gap:4px; }
.demo-msg small{ font-size:12.5px; color:var(--encre-doux); font-family:var(--titre); font-weight:600; }
.demo-msg p{ padding:12px 16px; border-radius:16px; font-size:16px; line-height:1.45; }
.demo-humain{ align-self:flex-end; justify-items:end; }
.demo-humain p{ background:var(--nuit); color:var(--creme); border-bottom-right-radius:5px; }
.demo-ia{ align-self:flex-start; }
.demo-ia p{ background:#fff; border-bottom-left-radius:5px; box-shadow:0 1px 2px rgba(10,45,71,.08); }
.demo-ia small{ color:var(--terre-texte); }
.demo-note{ align-self:center; display:flex; gap:8px; align-items:center; margin-top:6px; background:var(--creme); color:var(--nuit); border-radius:999px; padding:9px 16px; font-size:14.5px; font-weight:700; text-align:left; }
.demo-note .ico{ width:18px; height:18px; color:var(--terre-texte); stroke-width:2.6; }
.demo-ecrit{ align-self:flex-start; background:#fff; border-radius:16px; padding:14px 16px; display:flex; gap:5px; }
.demo-ecrit i{ width:7px; height:7px; border-radius:50%; background:var(--encre-doux); animation:ecrit 1s infinite ease-in-out; }
.demo-ecrit i:nth-child(2){ animation-delay:.15s } .demo-ecrit i:nth-child(3){ animation-delay:.3s }
@keyframes ecrit{ 0%,80%,100%{ opacity:.25; transform:none; } 40%{ opacity:1; transform:translateY(-3px); } }
/* La conversation se déroule quand elle arrive à l'écran (classe posée par app.js, contenu visible sans JS) */
.demo-chat.anime .demo-fil > :not(.demo-ecrit){ opacity:0; transform:translateY(10px); }
.demo-chat.anime .demo-fil > .vu{ opacity:1; transform:none; transition:opacity .5s var(--sortie), transform .6s var(--sortie); }

/* ---------- Page métier : logiciel et tableau de bord ---------- */
.logiciel{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.3fr); gap:48px clamp(40px, 5vw, 80px); align-items:center; }
.logiciel-prix{ margin:32px 0 0; }
.logiciel-prix .ligne:first-child{ border-top:2px solid var(--nuit); }
.tdb{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 28px 64px -28px rgba(10,45,71,.45), 0 2px 8px rgba(10,45,71,.08); font-size:15px; line-height:1.4; }
.tdb-barre{ display:flex; align-items:center; gap:14px; background:var(--nuit); color:var(--creme); padding:12px 18px; }
.tdb-barre b{ font-family:var(--titre); font-size:15.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdb-points{ display:flex; gap:6px; }
.tdb-points i{ width:10px; height:10px; border-radius:50%; background:rgba(247,241,230,.3); }
.tdb-points i:first-child{ background:var(--peche); }
.tdb-maj{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--sur-nuit); white-space:nowrap; }
.tdb-maj i{ width:8px; height:8px; border-radius:50%; background:var(--peche); }
.tdb-corps{ background:#F8F5F0; padding:18px; display:grid; gap:14px; }
.tdb-nom{ font-family:var(--titre); font-weight:800; color:var(--nuit); font-size:18px; }
.tdb-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.tdb-kpis div, .tdb-carte{ background:#fff; border-radius:12px; padding:14px 16px; box-shadow:0 1px 2px rgba(10,45,71,.07); }
.tdb-kpis span{ display:block; color:var(--encre-doux); font-size:13.5px; }
.tdb-kpis b{ display:block; font-family:var(--titre); font-weight:800; color:var(--nuit); font-size:clamp(22px, 2vw, 28px); letter-spacing:-0.02em; margin:4px 0 2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tdb-kpis small{ color:var(--encre-doux); font-size:12.5px; }
.tdb-bas{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:12px; }
.tdb-titre{ font-family:var(--titre); font-weight:700; color:var(--nuit); font-size:14.5px; margin-bottom:12px; }
.tdb-graphe{ display:flex; align-items:stretch; gap:8px; height:168px; }
.tdb-graphe li{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; min-width:0; }
.tdb-graphe i{ display:block; width:100%; max-width:34px; height:calc(var(--h) * .68); min-height:4px; border-radius:6px 6px 2px 2px; background:#B8C9D8; }
.tdb-graphe .actuel i{ background:var(--terre); }
.tdb-graphe span{ font-size:12px; color:var(--encre-doux); white-space:nowrap; }
.tdb-graphe .tdb-val{ font-size:11px; font-variant-numeric:tabular-nums; }
.tdb-graphe .actuel span{ color:var(--terre-texte); font-weight:700; }
.tdb-liste li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; padding:9px 0; border-bottom:1px solid var(--filet); align-items:center; }
.tdb-liste li:last-child{ border-bottom:0; padding-bottom:0; }
.tdb-liste li:first-child{ padding-top:0; }
.tdb-lib{ color:var(--encre); font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tdb-liste b{ font-family:var(--titre); color:var(--nuit); font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.statut{ grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; border-radius:999px; padding:2px 10px 2px 8px; }
.statut::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.s-ok{ background:#E2F0E6; color:#1E6537; }
.s-retard{ background:#FBE2D8; color:#8F3210; }
.s-relance{ background:#FCEFD3; color:#7A4F00; }
.s-attente{ background:#E6EDF4; color:#2F4D66; }
.tdb figcaption{ padding:12px 18px; font-size:13.5px; color:var(--encre-doux); border-top:1px solid var(--filet); }

@media (max-width: 1100px){
  .logiciel{ grid-template-columns:1fr; }
}
@media (max-width: 960px){
  .ia-in{ grid-template-columns:1fr; }
  .demo-fil{ min-height:0; }
}
@media (max-width: 760px){
  .j-tete{ display:none; }
  .j-ligne{ grid-template-columns:1fr; gap:10px; padding:22px 0; }
  .j-ligne small{ display:block; font-family:var(--titre); font-weight:700; font-size:13.5px; color:var(--encre-doux); margin-bottom:2px; }
  .j-apres small{ color:var(--terre-texte); }
  .tdb-bas{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .tdb-kpis{ grid-template-columns:1fr; }
  .tdb-kpis div{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; gap:0 12px; }
  .tdb-kpis b{ grid-row:span 2; grid-column:2; align-self:center; }
  .tdb-maj{ display:none; }
  .demo-msg{ max-width:92%; }
}

/* ---------- Texte long (mentions) ---------- */
.texte-long{ max-width:780px; }
.texte-long h2{ margin:40px 0 12px; }
.texte-long h2:first-child{ margin-top:0; }
.texte-long p + p{ margin-top:12px; }
.a-completer{ background:#FFF1D6; padding:0 4px; border-radius:3px; }

/* ---------- Pied de page ---------- */
.pied{ background:var(--nuit-fonce); color:var(--sur-nuit); padding:56px 0 calc(104px + env(safe-area-inset-bottom)); font-size:16px; }
.pied-in{ display:grid; grid-template-columns:1.2fr 1fr auto; gap:32px 56px; align-items:start; }
.pied-logo{ width:200px; height:auto; }
.pied p{ margin-top:10px; }
.pied b{ color:var(--creme); font-family:var(--titre); }
.pied a{ color:var(--sur-nuit); }
.pied a:hover{ color:var(--creme); }
.pied-tel{ font-family:var(--titre); font-weight:800; font-size:22px; color:var(--creme) !important; text-decoration:none; }
.pied nav{ display:grid; gap:10px; }

/* ---------- Assistant (chatbot) ---------- */
.chat{ position:fixed; right:clamp(14px, 2vw, 28px); bottom:clamp(14px, 2vw, 28px); z-index:50; display:grid; justify-items:end; gap:14px; }
.chat-bouton{ display:inline-flex; align-items:center; gap:10px; min-height:56px; padding:0 22px 0 18px; border-radius:999px; border:0; cursor:pointer;
  background:var(--terre-texte); color:#fff; font-family:var(--titre); font-weight:700; font-size:17px;
  box-shadow:0 10px 28px -8px rgba(10,45,71,.55); transition:transform .25s var(--sortie), background .2s; }
.chat-bouton:hover{ background:#8A3E1F; transform:translateY(-2px); }
.chat[data-ouvert="true"] .chat-bouton{ display:none; }
.chat-panneau{ width:min(400px, calc(100vw - 28px)); height:min(560px, calc(100dvh - 110px)); background:#fff; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 60px -16px rgba(10,45,71,.5), 0 2px 8px rgba(10,45,71,.12); transform-origin:bottom right; }
.chat-panneau[hidden]{ display:none; }
.chat-panneau:not([hidden]){ animation:ouvrir .45s var(--sortie); }
@keyframes ouvrir{ from{ opacity:0; transform:translateY(14px) scale(.96); } }
.chat-panneau header{ background:var(--nuit); color:var(--creme); display:flex; align-items:center; justify-content:space-between; padding:14px 10px 14px 20px; font-family:var(--titre); }
.chat-fermer{ width:44px; height:44px; border:0; background:transparent; color:var(--creme); font-size:28px; line-height:1; cursor:pointer; border-radius:50%; }
.chat-fermer:hover{ background:rgba(247,241,230,.12); }
.chat-fil{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--doux); overscroll-behavior:contain; }
.msg{ max-width:88%; padding:11px 15px; border-radius:16px; font-size:16px; line-height:1.45; white-space:pre-wrap; }
.msg-ia{ background:#fff; color:var(--encre); border-bottom-left-radius:5px; align-self:flex-start; }
.msg-moi{ background:var(--nuit); color:var(--creme); border-bottom-right-radius:5px; align-self:flex-end; }
.msg-erreur{ background:#FBE9E1; color:#7A2E10; }
.msg-attente{ color:var(--encre-doux); }
.msg-attente::after{ content:"…"; display:inline-block; animation:points 1.2s steps(4) infinite; width:1.2em; overflow:hidden; vertical-align:bottom; }
@keyframes points{ from{ width:0; } to{ width:1.2em; } }
.chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--filet); }
.chat-form input{ flex:1; min-width:0; min-height:48px; border:1.5px solid var(--filet); border-radius:12px; padding:0 14px; font:inherit; font-size:16px; color:var(--encre); caret-color:var(--terre); }
.chat-form input:focus{ outline:none; border-color:var(--nuit); }
.chat-form button{ width:48px; height:48px; border:0; border-radius:12px; background:var(--nuit); color:var(--creme); display:grid; place-items:center; cursor:pointer; }
.chat-form button:disabled{ opacity:.5; cursor:wait; }
.chat-note{ font-size:13px; color:var(--encre-doux); padding:0 14px 12px; }

/* ---------- Petits écrans ---------- */
@media (max-width: 960px){
  .hero-in, .contact-in, .deux-col, .rdv, .moi-photo{ grid-template-columns:1fr; }
  .metier{ grid-template-columns:52px minmax(0, 1fr); }
  .exemples{ grid-column:2; margin-top:18px; }
  .etapes{ grid-template-columns:1fr 1fr; }
  .pied-in{ grid-template-columns:1fr 1fr; }
  .photo{ max-width:340px; }
}
@media (max-width: 640px){
  .grille-tarifs{ columns:1; }
  .atouts{ grid-template-columns:1fr; }
  .metier{ grid-template-columns:1fr; }
  .metier .rond{ margin-bottom:14px; }
  .exemples{ grid-column:1; }
  .etapes{ grid-template-columns:1fr; gap:22px; }
  .pied-in{ grid-template-columns:1fr; }
  .tete-secteur-in, .hero-in{ grid-template-columns:1fr; }
  .chat-bouton span{ font-size:16px; }
  .chat-panneau{ height:min(560px, calc(100dvh - 32px)); }
  .gros{ white-space:normal; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition-duration:.01ms !important; animation:none !important; } }
.contact-mail{ display:block; margin-top:8px; color:var(--peche); font-size:18px; }
.contact-mail:hover{ color:var(--creme); }

/* =====================================================================
   Galerie bleu nuit : mise en scène animée (esprit FLORA, couleurs Vidal.I.T)
   Animations seulement sous html.anim (posée si le visiteur accepte le mouvement)
   ===================================================================== */
:root{
  --serif:"Instrument Serif", "Times New Roman", serif;
  --canvas:#0A2D47; --carte:#0E3B5C; --carte-2:#164C73;
  --filet-nuit:rgba(247,241,230,.16); --filet-nuit-fort:rgba(247,241,230,.4);
  --papier:#FBF8F2;
  --rayon:24px;
}
body{ background:var(--papier); }
h1, h2{ font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.02; }
h1{ font-size:clamp(48px, 7.2vw, 96px); }
h2{ font-size:clamp(40px, 4.8vw, 68px); }
h1 em, h2 em{ font-style:italic; color:var(--terre-texte); }
.hero h1 em, .tete-page h1 em, .sombre h2 em, .contact h2 em, .ia h2 em{ color:var(--peche); }
.h-petit{ font-family:var(--titre); font-weight:800; font-size:clamp(22px, 1.8vw, 28px); letter-spacing:-0.02em; line-height:1.15; }

/* Scènes : sombre pour montrer, papier pour lire */
.section{ background:var(--papier); }
.section-douce{ background:var(--doux); }
.hero, .tete-page, .sombre, .contact, .ia, .entete{ background:var(--canvas); }
.sombre{ color:var(--sur-nuit); }
.sombre h2{ color:var(--creme); }
.sombre .intro, .sombre .choix-autre{ color:var(--sur-nuit); }
.sombre a:not(.btn){ color:var(--peche); }
.sombre-suite{ padding-top:0; }
.pied{ background:#071F33; border-top:1px solid var(--filet-nuit); }

/* En-tête : se fond dans la scène, devient translucide au défilement, se cache en descendant */
.entete{ border-bottom-color:transparent; transition:background .4s var(--sortie), border-color .4s, translate .5s var(--sortie); }
.entete.defile{ background:rgba(10,45,71,.82); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--filet-nuit); }
.entete.cache{ translate:0 -100%; }
.progression{ position:fixed; inset:0 0 auto; height:3px; z-index:100; background:var(--peche); transform-origin:left; transform:scaleX(var(--progres, 0)); pointer-events:none; }

/* Boutons aimantés (la position suit un peu la souris) */
.btn{ translate:var(--bx, 0) var(--by, 0); transition:background .25s var(--sortie), transform .25s var(--sortie), translate .5s var(--sortie), box-shadow .25s var(--sortie); }
.btn .ico{ transition:rotate .5s var(--sortie); }
.btn:hover .ico{ rotate:-10deg; }

/* ---------- Héros et maquettes flottantes ---------- */
.hero{ padding-top:clamp(40px, 6vw, 88px); }
.hero-in{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); }
.hero h1{ max-width:11ch; }
.collage{ position:relative; height:clamp(440px, 42vw, 580px); }
.collage-note{ font-size:13px; color:var(--sur-nuit-doux); text-align:right; margin-top:10px; }
.tuile{ position:absolute; width:min(300px, 64%); transform:translate3d(calc(var(--mx, 0) * 1px), calc((var(--py, 0) + var(--my, 0)) * 1px), 0) rotate(var(--rot)); will-change:transform; }
.tuile-c{ background:var(--carte); border:1px solid var(--filet-nuit-fort); border-radius:var(--rayon); padding:18px 20px; color:var(--creme); transition:border-color .4s, background .4s, scale .6s var(--sortie); }
.tuile:hover{ z-index:5; }
.tuile:hover .tuile-c{ border-color:var(--peche); background:var(--carte-2); scale:1.05; }
.t1{ top:0; left:6%; z-index:2; } .t2{ top:13%; right:0; z-index:3; } .t3{ top:43%; left:0; z-index:2; }
.t4{ bottom:13%; right:4%; z-index:4; } .t5{ bottom:0; left:20%; z-index:1; }
.s1{ top:0; left:4%; z-index:2; } .s2{ top:20%; right:0; z-index:3; } .s3{ top:50%; left:0; z-index:2; } .s4{ bottom:0; right:6%; z-index:4; }
.tu-role{ display:block; font-family:var(--titre); font-size:12.5px; font-weight:700; color:var(--peche); margin-bottom:6px; }
.tu-titre{ display:block; font-family:var(--titre); font-size:18px; line-height:1.25; color:var(--creme); }
.tu-det{ display:block; font-size:13.5px; color:var(--sur-nuit); margin-top:4px; }
.tu-puces{ display:flex; gap:6px; margin-top:12px; }
.tu-puces i{ font-style:normal; font-size:12.5px; border:1px solid var(--filet-nuit-fort); border-radius:999px; padding:3px 10px; }
.tu-bulle{ background:var(--creme); color:var(--encre); border-radius:14px 14px 14px 4px; padding:9px 13px; font-size:15px; line-height:1.4; margin-bottom:12px; }
.tu-bulle.tu-ia{ background:var(--carte-2); color:var(--creme); border-radius:14px 14px 4px 14px; margin-bottom:0; }
.tu-kpi{ display:block; font-family:var(--titre); font-weight:800; font-size:34px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.tu-barres{ display:flex; align-items:flex-end; gap:5px; height:46px; margin-top:12px; }
.tu-barres i{ flex:1; height:var(--h); border-radius:4px 4px 1px 1px; background:var(--filet-nuit-fort); transform-origin:bottom; }
.tu-barres i:last-child{ background:var(--peche); }
.tu-notif{ display:flex; gap:12px; align-items:center; }
.tu-notif .pastille{ width:40px; height:40px; } .tu-notif .pastille .ico{ width:20px; height:20px; }
.tu-notif b{ display:block; font-family:var(--titre); font-size:15.5px; line-height:1.25; }
.tu-notif small{ display:block; font-size:13px; color:var(--sur-nuit); margin-top:2px; }
.tu-texte{ font-size:15px; line-height:1.45; }

/* ---------- Bandeau des gains qui défile ---------- */
.defilant{ background:var(--canvas); border-block:1px solid var(--filet-nuit); overflow:hidden; padding:22px 0; }
.defilant-piste{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 48px; padding:0 var(--marge); }
.defilant-piste li{ display:flex; align-items:center; gap:14px; flex:none; white-space:nowrap; }
.defilant-piste .pastille{ width:40px; height:40px; } .defilant-piste .pastille .ico{ width:20px; height:20px; }
.defilant-piste b{ font-family:var(--serif); font-weight:400; font-size:clamp(24px, 2.4vw, 32px); color:var(--creme); }
.defilant-piste span:not(.pastille){ color:var(--sur-nuit-doux); font-size:16px; }
.defilant-piste .dup{ display:none; }

/* ---------- Liste géante des métiers ---------- */
.liste-metiers{ margin-top:48px; border-top:1px solid var(--filet-nuit); }
.liste-metiers a{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto 36px; align-items:center; gap:8px 32px; padding:clamp(16px, 2vw, 26px) 0; border-bottom:1px solid var(--filet-nuit); color:var(--creme); text-decoration:none; }
.liste-metiers a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--peche); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--sortie); }
.lm-nom{ font-family:var(--serif); font-size:clamp(38px, 6vw, 84px); line-height:1.02; letter-spacing:-0.025em; transition:translate .7s var(--sortie), color .3s, opacity .4s; }
.lm-court{ color:var(--sur-nuit-doux); font-size:16px; text-align:right; transition:color .3s; }
.lm-fleche{ width:32px; height:32px; color:var(--peche); opacity:0; translate:-14px 0; rotate:-45deg; transition:opacity .3s, translate .6s var(--sortie), rotate .6s var(--sortie); }
.liste-metiers a:hover .lm-nom, .liste-metiers a:focus-visible .lm-nom{ translate:clamp(12px, 2vw, 32px) 0; font-style:italic; color:var(--peche); }
.liste-metiers a:hover .lm-court, .liste-metiers a:focus-visible .lm-court{ color:var(--creme); }
.liste-metiers a:hover .lm-fleche, .liste-metiers a:focus-visible .lm-fleche{ opacity:1; translate:0 0; rotate:0deg; }
.liste-metiers a:hover::after, .liste-metiers a:focus-visible::after{ transform:scaleX(1); }
.liste-metiers:hover a:not(:hover) .lm-nom{ opacity:.35; }
.apercu{ position:fixed; left:0; top:0; z-index:60; width:280px; pointer-events:none; background:var(--carte); border:1px solid var(--filet-nuit-fort); border-radius:var(--rayon); padding:18px 20px; color:var(--creme); opacity:0; scale:.8; rotate:-6deg; transition:opacity .3s, scale .5s var(--sortie), rotate .7s var(--sortie); }
.apercu.visible{ opacity:1; scale:1; rotate:3deg; }
.apercu .pastille{ width:44px; height:44px; margin-bottom:12px; } .apercu .pastille .ico{ width:22px; height:22px; }
.apercu b{ display:block; font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.05; }
.apercu p{ font-size:14.5px; line-height:1.45; margin:10px 0 12px; color:var(--sur-nuit); }
.apercu p small{ display:block; color:var(--peche); font-family:var(--titre); font-weight:700; font-size:12.5px; margin-bottom:2px; }
.lm-kpi{ display:inline-block; font-size:13px; border:1px solid var(--filet-nuit-fort); border-radius:999px; padding:3px 12px; color:var(--sur-nuit); }
.lm-kpi b{ display:inline; font-family:var(--titre); font-weight:800; font-size:13px; color:var(--creme); }

/* ---------- Méthode : la frise se dessine au défilement ---------- */
.sombre .etape{ border-top-color:var(--filet-nuit); }
.sombre .etape .n{ display:inline-block; font-family:var(--serif); font-weight:400; font-size:68px; color:var(--peche); transition:translate .6s var(--sortie); }
.sombre .etape b{ color:var(--creme); }
.sombre .etape p{ color:var(--sur-nuit); }
.etape:hover .n{ translate:0 -8px; }
.etapes{ position:relative; }
.etapes::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--peche); transform-origin:left; z-index:1; }
.anim .etapes::before{ transform:scaleX(var(--p, 0)); }

/* ---------- Effets de survol des contenus ---------- */
.rond{ transition:rotate .6s var(--sortie), scale .6s var(--sortie); }
.metier:hover .rond{ rotate:-14deg; scale:1.12; }
.exemple{ border-radius:var(--rayon); transition:translate .5s var(--sortie), background .4s; }
.exemple:hover{ translate:0 -5px; background:var(--creme); }
.ligne{ transition:padding .45s var(--sortie), background .3s; }
.groupe:not(.suivi) .ligne:hover{ padding-inline:10px; background:rgba(242,176,146,.16); }
.atouts .ico, .ia-taches .ico{ transition:scale .5s var(--sortie), rotate .5s var(--sortie); }
.atouts li:hover .ico, .ia-taches li:hover .ico{ scale:1.3; rotate:-10deg; }
.douleurs li::before{ transition:background .3s, scale .4s var(--sortie); }
.douleurs li:hover::before{ background:var(--terre); scale:1.2; }
.faq summary{ transition:color .2s, padding .4s var(--sortie); }
.faq summary:hover{ color:var(--terre-texte); padding-left:8px; }
.puces-secteurs a{ transition:background .25s, color .25s, translate .4s var(--sortie); }
.puces-secteurs a:hover{ transform:none; translate:0 -3px; }
.tdb, .demo-chat{ transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .7s var(--sortie); }

/* ---------- En-tête des pages métier ---------- */
.tete-secteur-in{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:40px 64px; align-items:center; }
.tete-secteur h1{ max-width:none; }
.h1-nom{ display:block; font-style:italic; color:var(--peche); font-size:clamp(52px, 7.6vw, 96px); }
.h1-titre{ display:block; font-size:clamp(30px, 3.4vw, 46px); line-height:1.12; margin-top:14px; color:var(--creme); max-width:22ch; }
.tete-secteur .collage{ height:clamp(380px, 34vw, 480px); }

/* ---------- Animations (uniquement sous html.anim) ---------- */
.anim .revele{ opacity:0; translate:0 34px; filter:blur(6px); transition:opacity .9s var(--sortie), translate 1.1s var(--sortie), filter .9s var(--sortie); transition-delay:calc(var(--i, 0) * 70ms); }
.anim .revele.vu{ opacity:1; translate:0 0; filter:none; }
.anim .mot{ display:inline-block; opacity:0; translate:0 .45em; filter:blur(10px); }
.anim h1 .mot, .anim h2.vu .mot{ animation:mot 1s var(--sortie) forwards; animation-delay:calc(.12s + var(--i) * 55ms); }
@keyframes mot{ to{ opacity:1; translate:0 0; filter:none; } }
.anim .tuile-c{ animation:entree 1s var(--sortie) backwards, flotte 7s ease-in-out infinite; animation-delay:calc(.35s + var(--i, 0) * .12s), calc(var(--i, 0) * -1.4s); }
@keyframes entree{ from{ opacity:0; scale:.82; filter:blur(12px); } }
@keyframes flotte{ 50%{ translate:0 -10px; } }
.anim .tu-barres i{ animation:pousse 1.2s var(--sortie) backwards; animation-delay:calc(.9s + var(--j, 0) * 70ms); }
@keyframes pousse{ from{ transform:scaleY(0); } }
.anim .defilant-piste{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:0; padding:0; animation:defile 45s linear infinite; }
.anim .defilant-piste li{ padding-right:56px; }
.anim .defilant-piste .dup{ display:flex; }
.defilant:hover .defilant-piste{ animation-play-state:paused; }
@keyframes defile{ to{ transform:translateX(-50%); } }

@media (max-width: 960px){
  .tete-secteur-in, .hero-in{ grid-template-columns:1fr; }
  .collage, .tete-secteur .collage{ height:420px; max-width:540px; margin-inline:auto; }
  .collage-note{ text-align:center; }
}
@media (max-width: 760px){
  .liste-metiers a{ grid-template-columns:minmax(0, 1fr) 32px; }
  .lm-court{ grid-row:2; text-align:left; }
  .lm-fleche{ opacity:.7; translate:0 0; rotate:0deg; grid-row:1 / span 2; grid-column:2; }
}
@media (max-width: 640px){
  .collage, .tete-secteur .collage{ height:360px; }
  .tuile{ width:68%; }
  .tuile-c{ padding:14px 16px; }
  .t5, .s4{ display:none; }
  .tu-kpi{ font-size:28px; }
}

/* Retouches : lissage des maquettes, cascade d'entrée, en-tête au clavier, menu mobile */
.tuile{ transition:transform .9s var(--sortie); }
.tuile:nth-child(2) .tuile-c{ --i:1; } .tuile:nth-child(3) .tuile-c{ --i:2; } .tuile:nth-child(4) .tuile-c{ --i:3; } .tuile:nth-child(5) .tuile-c{ --i:4; }
.tu-barres i:nth-child(2){ --j:1; } .tu-barres i:nth-child(3){ --j:2; } .tu-barres i:nth-child(4){ --j:3; } .tu-barres i:nth-child(5){ --j:4; } .tu-barres i:nth-child(6){ --j:5; }
.entete:focus-within{ translate:0 0; }
@media (max-width: 900px){ .menu{ background:var(--canvas); } }
.sombre .liste-metiers a{ color:var(--creme); }
.sombre-suite .liste-metiers{ margin-top:0; }
@media (max-width: 960px){
  .tuile{ transform:rotate(var(--rot)); } /* sur petit écran : pas de parallaxe, les maquettes restent lisibles */
}
@media (max-width: 640px){
  .collage, .tete-secteur .collage{ height:380px; }
  .t1, .s1{ top:0; left:0; } .t2, .s2{ top:6%; right:0; } .t3, .s3{ top:48%; left:0; } .t4{ bottom:2%; right:0; }
}
.collage{ width:100%; }
.btn:hover{ box-shadow:none; }

/* Réseau de neurones en fond des scènes du haut de page */
.hero, .tete-page{ position:relative; isolation:isolate; overflow:hidden; }
.hero > :not(.reseau), .tete-page > :not(.reseau){ position:relative; z-index:1; }
.reseau{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(#000 65%, transparent); mask-image:linear-gradient(#000 65%, transparent); }

/* Aperçu des métiers : un exemple à la fois, qui apparaît en fondu */
.lm-ex{ list-style:none; }
.lm-ex li{ animation:ex-entree .55s var(--sortie); }
@keyframes ex-entree{ from{ opacity:0; translate:0 8px; filter:blur(4px); } }
.lm-compte{ display:block; margin-top:12px; font-size:12px; color:var(--sur-nuit-doux); }

/* Variantes des maquettes : empilées au même endroit (la maquette garde sa taille), une seule visible, changement en fondu */
.tuile-c{ display:grid; }
.tu-var{ grid-area:1 / 1; transition:opacity .7s var(--sortie), translate .8s var(--sortie), filter .7s var(--sortie), visibility 0s; }
.tu-var:not(.actif){ opacity:0; visibility:hidden; translate:0 8px; filter:blur(5px); transition-delay:0s, 0s, 0s, .7s; }

/* ---------- Tarif solidaire (associations) : des marches qui montent avec la réduction ---------- */
.paliers{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:end; margin-top:48px; }
.palier{ display:flex; flex-direction:column; gap:10px; min-height:calc(250px + var(--n) * 56px); background:var(--carte); border:1px solid var(--filet-nuit-fort); border-radius:var(--rayon); padding:26px 26px 28px; transition:border-color .4s, background .4s, translate .6s var(--sortie); }
.palier:hover{ border-color:var(--peche); translate:0 -6px; }
.palier:last-child{ background:var(--carte-2); border-color:var(--peche); }
.jauge{ display:flex; gap:6px; margin-bottom:auto; }
.jauge i{ flex:1; height:8px; border-radius:999px; background:var(--filet-nuit); }
.jauge i.plein{ background:var(--peche); }
.anim .palier.vu .jauge i.plein{ animation:remplir .9s var(--sortie) backwards; animation-delay:calc(.3s + var(--n) * .15s); transform-origin:left; }
@keyframes remplir{ from{ transform:scaleX(0); } }
.palier-pour{ font-family:var(--titre); font-weight:700; font-size:14.5px; color:var(--peche); margin-top:28px; }
.palier-titre{ font-family:var(--serif); font-weight:400; font-size:clamp(32px, 3vw, 44px); line-height:1.02; color:var(--creme); }
.palier p{ color:var(--sur-nuit); font-size:16.5px; }
.aides-bande{ display:flex; gap:18px; align-items:center; margin-top:16px; padding:22px 26px; border:1px dashed var(--peche); border-radius:var(--rayon); }
.aides-bande p{ color:var(--sur-nuit); max-width:none; }
.aides-bande b{ color:var(--creme); font-family:var(--titre); }
.solidaire-pied{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px; margin-top:40px; }
.solidaire-pied p{ color:var(--sur-nuit-doux); }
.sombre .mentions a, .mentions a{ font-weight:700; }
@media (max-width: 760px){
  .paliers{ grid-template-columns:1fr; }
  .palier{ min-height:0; }
  .palier-pour{ margin-top:18px; }
  .aides-bande{ align-items:flex-start; }
}
@media (max-width: 760px){ .aides-bande{ flex-direction:column; } }

/* Journée avant/après : les exemples d'un même moment sont empilés (la ligne garde sa hauteur), un seul visible */
.j-ligne:not(.j-tete){ display:grid; grid-template-columns:1fr; gap:0; padding:0; }
.j-var{ grid-area:1 / 1; display:grid; grid-template-columns:minmax(90px, 160px) minmax(0, 1fr) minmax(0, 1fr); gap:0 clamp(20px, 3vw, 44px); padding:22px 0; align-items:baseline; transition:opacity .6s var(--sortie), translate .7s var(--sortie), filter .6s var(--sortie), visibility 0s; }
.j-var:not(.actif){ opacity:0; visibility:hidden; translate:0 8px; filter:blur(4px); transition-delay:0s, 0s, 0s, .6s; }
.j-ligne:not(.j-tete):hover .j-heure{ color:var(--terre-texte); }
.j-heure{ transition:color .3s; }
.j-astuce{ display:none; margin-top:10px; font-size:15px; color:var(--encre-doux); }
.anim .j-astuce{ display:block; }
@media (max-width: 760px){
  .j-var{ grid-template-columns:1fr; gap:10px; }
  .j-astuce{ font-size:14.5px; }
}
.si-doigt{ display:none; }
@media (hover: none){ .si-souris{ display:none; } .si-doigt{ display:inline; } }

/* Ponctuation recollée au mot en italique qui la précède (couleur du titre, pas de l'italique) */
.ponct{ font-style:normal; }

/* Réseau de neurones : moins estompé vers le bas */
.reseau{ -webkit-mask-image:linear-gradient(#000 80%, transparent); mask-image:linear-gradient(#000 80%, transparent); }

/* Frise de la méthode : pourcentage discret au bout de la barre */
.anim .etapes::after{ counter-reset:pct var(--pct, 0); content:counter(pct) " %"; position:absolute; top:-30px; left:calc(var(--p, 0) * 100%); translate:-100% 0; font-family:var(--titre); font-weight:700; font-size:12.5px; color:var(--peche); opacity:.85; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }

@media (max-width: 760px){
  /* Frise verticale : la barre descend le long des étapes et atteint 100 % à l'étape 4 */
  .etapes{ grid-template-columns:1fr; gap:0; padding-left:52px; background:linear-gradient(var(--filet-nuit), var(--filet-nuit)) 19px 0 / 2px 100% no-repeat; }
  .etapes::before{ left:19px; right:auto; top:0; bottom:0; width:2px; height:auto; transform-origin:top; }
  .anim .etapes::before{ transform:scaleY(var(--p, 0)); }
  .anim .etapes::after{ top:calc(var(--p, 0) * 100%); left:20px; translate:-50% -50%; background:var(--canvas); border:1px solid var(--peche); border-radius:999px; padding:2px 8px; z-index:2; opacity:1; }
  .sombre .etape{ position:relative; border-top:0; padding:0 0 30px; }
  .etape::before{ content:""; position:absolute; left:-38px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--canvas); border:2px solid var(--filet-nuit-fort); transition:background .4s, border-color .4s, scale .5s var(--sortie); }
  .etape.atteinte::before{ background:var(--peche); border-color:var(--peche); scale:1.15; }
  .sombre .etape .n{ font-size:52px; }

  /* Maquettes du haut de page : une rangée qu'on fait glisser du doigt, sans chevauchement */
  .collage, .tete-secteur .collage{ height:auto; max-width:none; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--marge) * -1); padding:14px var(--marge) 18px; scrollbar-width:none; }
  .collage::-webkit-scrollbar{ display:none; }
  .tuile{ position:static; flex:0 0 76%; scroll-snap-align:center; transform:none; }
  .tuile-c{ height:100%; }
  .t5, .s4{ display:block; }
  .tuile:hover .tuile-c{ scale:1; }
  .collage-note{ text-align:left; margin-top:0; }
}
/* Les colonnes du haut de page ne doivent jamais grandir pour suivre la rangée de maquettes */
.hero-in > *, .tete-secteur-in > *{ min-width:0; }
@media (max-width: 760px){
  .etapes{ background-size:2px var(--fin, 100%); }
  .etapes::before{ bottom:auto; height:var(--fin, 100%); }
  .anim .etapes::after{ top:calc(var(--p, 0) * var(--fin, 100%)); }
}