/* Site public PAOLIA — version « épurée » (fond beige, bleu nuit, texte gris foncé ; pages minimalistes).
   Palette imposée : bleu #30496F (titres, boutons, bandes), beige #FFEED6 (fonds), texte #272727. Les autres teintes de beige sont des nuances choisies de cette base.
   Reprend les consignes de la maquette validée : voir RAPPORT_CONSIGNES_ACCUEIL.md. Chargé après vitrine.css et decouverte.css.
   Règles : aucun dégradé de couleur, aucun soulignement, aucun vert, aucun style en ligne (CSP), mouvement sobre et réduit sur demande. */

/* ---------- Police : League Spartan (auto-hébergée, graisse variable 100 à 900) ---------- */
@font-face { font-family: "League Spartan"; src: url("/static/vendor/fonts/league-spartan-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "League Spartan"; src: url("/static/vendor/fonts/league-spartan-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetons : palette à respecter ---------- */
body.epure {
  color-scheme: light;
  /* Couleurs de la charte */
  --bleu: #30496F; --beige: #FFEED6; --texte: #272727;
  /* Nuances de beige (choisies) et de bleu pour les états */
  --beige-clair: #FDF7EF; --beige-2: #F8E7CE; --beige-3: #F2E1C8; --filet: #E8D7BD; --filet-fort: #D7C6AA; --bleu-2: #3D5882; --doux: #55514A; --gris: #5B574D;
  /* Variables partagées avec vitrine.css et decouverte.css */
  --nuit: var(--bleu); --nuit-2: var(--bleu-2); --cadran: var(--bleu); --cadran-texte: var(--bleu);
  --papier: var(--beige); --papier-2: var(--beige-2); --carte: var(--beige-clair); --encre: var(--texte); --trait: var(--filet); --trait-fort: var(--filet-fort);
  --bouton: var(--bleu); --bouton-texte: var(--beige); --focus: var(--bleu); --voyant: #8A5200; --erreur: #B42318;
  --ombre-1: 0 1px 2px rgb(39 39 39 / .06); --ombre-2: 0 18px 40px -22px rgb(48 73 111 / .3);
  --elan: cubic-bezier(.16, 1, .3, 1);
  --police: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--police); background: var(--beige); color: var(--texte); font-weight: 400;
}
html { scroll-snap-type: y proximity; }
body.epure :focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
body.epure .entete :focus-visible, body.epure #contact :focus-visible { outline-color: var(--beige); }
body.epure a, body.epure .lien-bouton, body.epure .lien-d { text-decoration: none; }
body.epure h1, body.epure h2, body.epure h3 { color: var(--bleu); font-weight: 600; letter-spacing: -.02em; }
body.epure h1 { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 650; max-width: 20ch; }
body.epure h2 { max-width: 26ch; }
body.epure .section { padding: clamp(2.75rem, 5vw, 4rem) 0; background: var(--beige); border-top: 1px solid var(--filet); }
body.epure .section.alt { background: var(--beige-2); }
body.epure .section > .conteneur { width: min(1120px, 100% - 3rem); }
body.epure .entete-section { margin-bottom: 2rem; }
body.epure .chapeau, body.epure .chapeau.doux { color: var(--doux); opacity: 1; }

/* Rubriques : petit texte encadré d'un trait fin, sans point ni soulignement */
body.epure .etiquette, body.epure .etiquette-etape { display: inline-block; width: fit-content; max-width: 100%; margin: 0 0 1.3rem; padding: .4rem .85rem; border: 1px solid var(--filet-fort); border-radius: 8px; background: transparent;
  font: 500 .98rem/1.3 var(--police); letter-spacing: 0; text-transform: none; color: var(--bleu); }
body.epure .etiquette::before, body.epure .etiquette::after, body.epure .etiquette-etape::before, body.epure .etiquette-etape::after { content: none; display: none; }
body.epure .etiquette-etape { margin-bottom: 1rem; font-weight: 500; color: var(--doux); }
body.epure .surlignage { background: none; padding: 0; margin: 0; color: inherit; }

/* ---------- Barre du haut : bleu #30496F plein ---------- */
body.epure .entete { position: fixed; top: .85rem; left: 0; right: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; color: var(--beige); }
body.epure .entete .conteneur { pointer-events: auto; width: min(1120px, 100% - 1.5rem); min-height: 3.5rem; gap: .6rem; padding: .3rem .45rem .3rem 1.1rem;
  background: var(--bleu); border: 1px solid var(--bleu); border-radius: 40px; box-shadow: 0 16px 34px -18px rgb(48 73 111 / .6); }
body.epure .marque { display: inline-flex; align-items: center; gap: .55rem; line-height: 1; flex: none; padding: 0; background: none; border-radius: 0; }
body.epure .marque img { height: 34px; width: auto; transform-origin: 50% 50%; animation: arrive-logo 2.2s cubic-bezier(.22, .9, .28, 1) .1s both; }
body.epure .marque-cadre { display: block; font-size: 1.2rem; overflow: hidden; width: max-content; }
body.epure .marque-nom { display: block; color: var(--beige); }
body.epure .marque .marque-nom .mot-svg { height: 34px; }
@keyframes arrive-logo { from { opacity: 0; transform: rotate(540deg) scale(.8); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
/* le nom défile lettre par lettre : chaque lettre sort du gouvernail (de gauche à droite, sans fondu), l'une après l'autre, pendant qu'il tourne */
.mot-svg { display: block; width: auto; fill: currentColor; }
@keyframes lettre { from { transform: translateX(-200px); clip-path: inset(0 100% 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes recentre { from { transform: translateX(calc(var(--mot) * 1.28)); } to { transform: none; } }
body.epure .nav { gap: .1rem; }
body.epure .nav a:not(.btn) { color: rgb(255 238 214 / .82); padding: .5rem .7rem; font-size: .92rem; border-radius: 40px; white-space: nowrap; transition: color .2s ease, background .2s ease; }
body.epure .nav a:not(.btn):hover, body.epure .nav a[aria-current="true"] { color: var(--beige); background: rgb(255 238 214 / .14); }
body.epure .entete .btn { white-space: nowrap; min-height: 42px; }
body.epure .entete .btn-connexion { background: var(--beige); color: var(--bleu); border-color: var(--beige); font-weight: 700; }      /* plein et clair sur le bandeau foncé : le bouton se voit tout de suite */
body.epure .entete .btn-connexion:hover { background: #F2E1C8; border-color: #F2E1C8; }
/* Bandeau : les deux liens de gauche et les deux de droite collés au logo animé du centre ; « Se connecter » reste à l'extrémité droite */
.nav-g, .nav-d { display: contents; }
@media (min-width: 1001px) {
  body.epure .entete .conteneur { position: relative; display: flex; align-items: center; width: min(1040px, 100% - 1.5rem); min-height: 4.3rem; }
  body.epure .entete .nav { position: absolute; inset: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 14.5rem minmax(0, 1fr); align-items: center; pointer-events: none; }
  body.epure .entete .nav a { pointer-events: auto; }
  body.epure .entete .nav-g, body.epure .entete .nav-d { display: flex; align-items: center; gap: .5rem; }                  /* espace entre les deux liens de chaque côté */
  body.epure .entete .nav-g { grid-column: 1; justify-content: center; }                                     /* centré entre le bord gauche et le logo */
  body.epure .entete .nav-d { grid-column: 3; justify-content: center; padding-right: 9.6rem; }                /* centré entre le logo et « Se connecter » (9.6rem réservés au bouton) */
  body.epure .entete .btn-connexion { position: relative; margin-left: auto; z-index: 2; }
  body.epure .entete .bande-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
body.epure .entete .btn-demo { background: var(--beige); border-color: var(--beige); color: var(--bleu); }
body.epure .entete .btn-demo:hover { background: #F2E1C8; border-color: #F2E1C8; }
body.epure .menu-bouton { background: transparent; color: var(--beige); border-color: rgb(255 238 214 / .45); border-radius: 40px; }

/* ---------- Boutons : pilule, réponse immédiate à l'appui, halo d'appel espacé ---------- */
body.epure .btn { position: relative; overflow: hidden; border-radius: 40px; font-weight: 600; background: var(--bleu); border-color: var(--bleu); color: var(--beige); box-shadow: none;
  transition: background .2s ease, border-color .2s ease, transform .1s ease-out; }
body.epure .btn:hover { filter: none; background: var(--bleu-2); border-color: var(--bleu-2); box-shadow: none; }
body.epure .btn:active { transform: scale(.97); }
body.epure .btn::after { transition: transform .3s var(--elan); }
body.epure .btn:hover::after { transform: translateX(4px); }
body.epure .btn-sec { background: var(--beige-clair); color: var(--bleu); border-color: var(--filet-fort); }
body.epure .btn-sec:hover { background: var(--beige-2); border-color: var(--bleu); }
.ondulation { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgb(255 238 214 / .5); transform: scale(0); animation: onde .7s ease-out forwards; }
@keyframes onde { to { transform: scale(24); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  body.epure .hero-centre .actions .btn:not(.btn-sec), body.epure .entete .btn-demo { animation: appel-halo 10s ease-out 3s infinite; }
  body.epure .hero-centre .actions .btn:not(.btn-sec)::after { animation: appel-fleche 10s ease-in-out 3s infinite; }
  body.epure .hero-centre .actions .btn:not(.btn-sec):hover, body.epure .hero-centre .actions .btn:not(.btn-sec):focus-visible, body.epure .entete .btn-demo:hover { animation: none; }
  @keyframes appel-halo { 0% { box-shadow: 0 0 0 0 rgb(48 73 111 / .4); } 8% { box-shadow: 0 0 0 16px rgb(48 73 111 / 0); } 16% { box-shadow: 0 0 0 0 rgb(48 73 111 / .4); } 24%, 100% { box-shadow: 0 0 0 16px rgb(48 73 111 / 0); } }
  @keyframes appel-fleche { 0%, 8%, 24%, 100% { transform: translateX(0); } 3% { transform: translateX(6px); } 6% { transform: translateX(2px); } 19% { transform: translateX(6px); } 22% { transform: translateX(2px); } }
}
body.epure .entete .btn-demo { --halo: 244 240 228; }
@media (prefers-reduced-motion: no-preference) { body.epure .entete .btn-demo { animation-name: appel-halo-clair; } @keyframes appel-halo-clair { 0% { box-shadow: 0 0 0 0 rgb(255 238 214 / .5); } 8% { box-shadow: 0 0 0 14px rgb(255 238 214 / 0); } 16% { box-shadow: 0 0 0 0 rgb(255 238 214 / .5); } 24%, 100% { box-shadow: 0 0 0 14px rgb(255 238 214 / 0); } } }

/* ---------- Accueil : plein écran, sans cadre, quadrillage fin ---------- */
body.epure .heros, body.epure .section-demo { scroll-snap-align: start; }
body.epure .heros { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 7rem 0 5rem; background: var(--beige); color: var(--texte); overflow: visible; }
body.epure .heros::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--beige-3) 1px, transparent 1px), linear-gradient(90deg, var(--beige-3) 1px, transparent 1px);
  background-size: 64px 64px; background-position: 50% 0; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%); }
body.epure .hero-centre { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
body.epure .hero-centre h1 { margin-inline: auto; }
body.epure .hero-centre .chapeau { margin-inline: auto; max-width: 58ch; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
body.epure .hero-centre .actions { justify-content: center; }
.marque-hero { --mot: clamp(3.4rem, 6vw, 4.3rem); --emb: var(--mot); display: flex; align-items: center; justify-content: center; margin: 0 0 2.2rem; }
.mh-logo { position: relative; z-index: 2; display: block; flex: none; width: var(--emb); }
.mh-logo img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
@keyframes gouvernail-tourne { from { transform: rotate(720deg); } to { transform: none; } }
@keyframes arrive-embleme { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.mh-cadre { display: block; overflow: hidden; width: max-content; padding: .2em 0; margin-left: 0; }
.mh-nom { display: block; padding-left: calc(var(--mot) * .3); color: var(--bleu); }
.mh-nom .mot-svg { height: var(--mot); }

.defiler { position: absolute; left: 50%; bottom: 1.5rem; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid var(--filet-fort); border-radius: 20px; display: none; }
.defiler::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--bleu); animation: molette 1.8s var(--elan) 5; }
@keyframes molette { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
html.js .defiler { display: block; }
@keyframes entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
body.epure .heros .btn:not(.btn-sec) { background: var(--bleu); border-color: var(--bleu); color: var(--beige); }
body.epure .heros .btn:not(.btn-sec):hover { background: var(--bleu-2); border-color: var(--bleu-2); }
body.epure .heros .btn-sec { background: var(--beige-clair); color: var(--bleu); border-color: var(--filet-fort); }

/* ---------- Apparition au défilement (transition d'entrée puis transition de survol immédiate) ---------- */
html.js body.epure .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--elan), transform .8s var(--elan); transition-delay: calc(var(--i, 0) * 80ms); }
html.js body.epure .reveal.vu { opacity: 1; transform: none; }
html.js body.epure .reveal.pose { transition: transform .3s var(--elan), border-color .25s ease; transition-delay: 0s; }
/* Le titre, le chapeau et les trois cartes de l'accueil s'affichent directement, sans apparition : ni masqués par le script, ni animés. */
html.js body.epure .heros .reveal { opacity: 1; transform: none; }

/* ---------- Pages de contenu : texte aux couleurs normales, filets fins ---------- */
/* Ma démonstration */
body.epure .section-demo { min-height: 100svh; padding-top: 5rem; padding-bottom: 3rem; }
body.epure .parcours li::before { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--gris); font: 600 .8rem/1.6 var(--police); letter-spacing: .1em; }
body.epure .parcours li:hover::before { transform: none; background: none; }
body.epure .assurances li::before { color: var(--bleu); }
body.epure #assistant { background: var(--beige-clair); border: 1px solid var(--filet-fort); border-radius: 14px; box-shadow: none; }
body.epure .progression span { background: var(--bleu); }
body.epure .progression { background: var(--filet); }
body.epure .champ input[type="text"], body.epure .champ textarea { border-radius: 14px; background: var(--beige-clair); }

/* Le constat */
#probleme .deux-colonnes > div:first-child { position: sticky; top: 6.5rem; align-self: start; }
body.epure .constat { gap: 0; }
body.epure .constat li { position: relative; display: block; padding: 1.7rem 0 1.7rem 4rem; border: 0; border-top: 1px solid var(--filet-fort); border-radius: 0; background: none; box-shadow: none; }
body.epure .constat li:last-child { border-bottom: 1px solid var(--filet-fort); }
body.epure .constat .num { position: absolute; left: 0; top: 1.8rem; font: 600 .8rem/1 var(--police); letter-spacing: .14em; color: var(--gris); }
body.epure .constat .c-icone { display: none; }
body.epure .c-corps { display: block; padding: 0; }
body.epure .c-corps b { display: block; margin-bottom: .25rem; font-size: 1.08rem; font-weight: 600; color: var(--bleu); }
body.epure .c-corps > span:last-child { color: var(--doux); }

/* Ce que PAOLIA apporte */
.fonctions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4rem; }
body.epure .fonction, body.epure .f-vedette, body.epure .f-large { position: relative; display: block; grid-column: auto; padding: 1.7rem 0 2rem; border: 0; border-top: 1px solid var(--filet-fort); border-radius: 0; background: none; box-shadow: none; color: var(--texte); transform: none; }
body.epure .fonction .icone { display: block; width: auto; height: auto; margin: 0 0 .9rem; background: none; color: var(--bleu); }
body.epure .fonction .icone svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.epure .fonction h3 { margin: 0 0 .4rem; font-size: 1.12rem; color: var(--bleu); max-width: none; }
body.epure .fonction p { margin: 0; color: var(--doux); font-size: .98rem; }
body.epure .f-num { position: absolute; top: 1.8rem; right: 0; font: 600 .76rem/1 var(--police); letter-spacing: .14em; color: var(--gris); }
body.epure .f-mini { display: none; }
.f-niveaux { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 1rem 0 0; padding: 0; }
.f-niveaux li { font-size: .9rem; font-weight: 500; color: var(--doux); }
.f-cta { margin-top: 1.2rem; }
body.epure .fonction:hover { border-top-color: var(--bleu); }
body.epure .fonction .icone svg { transition: transform .3s var(--elan); }
body.epure .fonction:hover .icone svg { transform: translateY(-2px); }

/* Notre approche */
body.epure .approche { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4rem; }
body.epure .approche li { position: relative; display: block; padding: 1.7rem 0 0; background: none; border: 0; border-top: 1px solid var(--filet-fort); border-radius: 0; box-shadow: none; color: var(--texte); }
body.epure .approche li::before, body.epure .approche li::after { content: none; display: none; }
body.epure .a-num { display: block; width: auto; height: auto; margin: 0 0 .7rem; background: none; box-shadow: none; color: var(--gris); font: 600 .8rem/1 var(--police); letter-spacing: .14em; }
body.epure .approche b { display: block; margin-bottom: .3rem; font-size: 1.12rem; font-weight: 600; color: var(--bleu); }
body.epure .approche li span:last-child { color: var(--doux); }

/* Contact : bande bleue #30496F, texte beige, sans carte */
body.epure #contact { background: var(--bleu); border-top: 0; padding: clamp(3rem, 6vw, 4.5rem) 0; }
body.epure .contact-carte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 5vw, 4rem); padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--beige); align-items: start; }
body.epure #contact h2 { color: var(--beige); } body.epure #contact .chapeau { color: rgb(255 238 214 / .78); }
body.epure #contact .etiquette { border-color: rgb(255 238 214 / .4); color: var(--beige); }
.contact-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.contact-points li { display: grid; gap: .15rem; padding: 1.1rem 0 1.1rem 1.6rem; border-top: 1px solid rgb(255 238 214 / .2); position: relative; }
.contact-points li:last-child { border-bottom: 1px solid rgb(255 238 214 / .2); }
.contact-points li::before { content: ""; position: absolute; left: 0; top: 1.65rem; width: .55rem; height: .55rem; border-radius: 50%; background: rgb(255 238 214 / .6); }
.contact-points b { color: var(--beige); font-weight: 600; } .contact-points span { color: rgb(255 238 214 / .75); font-size: .95rem; }
.contact-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding-top: 1.4rem; }
.contact-actions .rdv-msg { flex-basis: 100%; order: 3; margin: 0; color: rgb(255 238 214 / .78); }
.contact-actions .rdv-msg[hidden] { display: none; }
body.epure #contact .btn:not(.btn-sec) { background: var(--beige); border-color: var(--beige); color: var(--bleu); }
body.epure #contact .btn:not(.btn-sec):hover { background: #F2E1C8; border-color: #F2E1C8; }
body.epure #contact .btn-sec { background: transparent; color: var(--beige); border-color: rgb(255 238 214 / .5); }
body.epure #contact .btn-sec:hover { background: rgb(255 238 214 / .12); border-color: var(--beige); }

/* Pied de page */
body.epure .pied { background: var(--beige); color: var(--doux); border-top: 1px solid var(--filet); }
.pied-marque { display: inline-flex; align-items: center; gap: .55rem; color: var(--bleu); }
.pied-marque img { height: 30px; width: auto; display: block; }
.pied-marque .pied-mot { height: 30px; width: auto; display: block; }
body.epure .pied a { color: var(--texte); }

/* ---------- Icônes dessinées à l'arrivée de la carte (attribut pathLength posé par anime.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.trace .fonction:not(.vu) .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  body.trace .fonction.vu .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace-icone .8s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .08s) both; }
  @keyframes trace-icone { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* ---------- Adaptation ---------- */
@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  body.epure .nav { top: calc(100% + .5rem); left: .75rem; right: .75rem; border-radius: 22px; background: var(--bleu); border: 1px solid var(--bleu); padding: .5rem 1rem 1rem; }
  body.epure .nav a:not(.btn) { color: rgb(255 238 214 / .9); }
  body.epure .entete .btn-demo, body.epure .entete .btn-connexion { display: none; }
  html.js body.epure .nav .btn-connexion-nav { display: inline-flex; margin-top: .8rem; background: var(--beige); color: var(--bleu); border-color: var(--beige); }
  #probleme .deux-colonnes > div:first-child { position: static; }
  .fonctions, body.epure .approche { grid-template-columns: 1fr; gap: 0; }
  body.epure .contact-carte { grid-template-columns: 1fr; }
  body.epure .heros { padding-top: 7rem; padding-bottom: 8rem; }
  body.epure .section-demo { min-height: auto; padding-top: 4.5rem; }
  body.epure .constat li { padding-left: 3.2rem; }
}
@media (min-width: 901px) and (max-width: 1100px) { .fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Accessibilité : transparence, contraste, mouvement ---------- */
@media (prefers-contrast: more) {
  body.epure .entete .conteneur, body.epure .nav { border-color: var(--beige); }
  body.epure { --doux: #3A3730; --filet-fort: #8F856B; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  body.epure *, body.epure *::before, body.epure *::after { animation: none !important; transition: none !important; }
  html.js body.epure .reveal, html.js body.epure .hero-centre h1, html.js body.epure .hero-centre .chapeau, html.js body.epure .hero-centre .actions { opacity: 1; transform: none; }
  .marque-cadre, .mh-cadre { max-width: none; } .marque-nom, .mh-nom { transform: none; }
  .defiler { display: none; }
}

/* Toutes les écritures de la page en League Spartan (y compris l'assistant de démonstration et les champs) */
body.epure, body.epure *, body.epure *::before, body.epure *::after { font-family: var(--police); }
body.epure .c-corps b, body.epure .approche b, body.epure .fonction h3 { font-weight: 600; }
body.epure .chapeau, body.epure .fonction p, body.epure .c-corps > span:last-child { font-weight: 400; }
body.epure .nav a:not(.btn) { font-weight: 500; }

/* League Spartan paraît plus petite que Inter à corps égal : légère mise à l'échelle générale pour garder des petits textes lisibles */
html:has(body.epure) { font-size: 105%; }

/* Fond uni : plus de quadrillage derrière le premier écran */
body.epure .heros::before { content: none; display: none; }

/* L'IA maîtrisée par l'entreprise : mêmes teintes, mêmes filets et même police que le reste du site */
body.epure .ia-titre { max-width: 30ch; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.12; }
body.epure .ia-corps { margin-top: .4rem; align-items: center; }
body.epure .ia-citation { margin: 0 0 1.2rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--bleu); max-width: 20ch; }
body.epure .ia-humain { margin: 0 0 1.6rem; font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 600; color: var(--bleu); }
body.epure .ia-actions { margin-top: 2.4rem; }
body.epure #ia-cadre .approche { display: grid; margin: 0; padding: 0; list-style: none; }
@media (max-width: 900px) { body.epure #ia-cadre .approche { grid-template-columns: 1fr; } }

/* Signature sous le logo : métiers et phrase, en graisse légère et petite taille, comme le logotype (300) */
body.epure .marque-signature { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: -1.2rem 0 2.2rem; padding: 0; text-align: center; }
body.epure .ms-metiers { display: flex; flex-wrap: wrap; justify-content: center; font-size: .8rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); }
body.epure .ms-metiers span { display: inline-flex; align-items: center; }
body.epure .ms-metiers span + span::before { content: ""; flex: none; width: .16em; height: .16em; margin: 0 1.2em; border-radius: 50%; background: currentColor; opacity: .5; position: relative; top: -.08em; }
html.js body.epure .marque-signature { opacity: 0; animation: entre .9s var(--elan) .3s both; }
@media (prefers-reduced-motion: reduce) { html.js body.epure .marque-signature { opacity: 1; transform: none; } }
@media (max-width: 520px) { body.epure .ms-metiers { font-size: .72rem; letter-spacing: .12em; } body.epure .ms-metiers span + span::before { margin: 0 .8em; } }

/* Titre et trois flyers (CRM IA, Agent IA, Formation IA) : même carte, mêmes mouvements que l'encart de la formation et que les icônes de la démonstration */
body.epure .titre-partenaire { max-width: none; font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.15; }
@media (max-width: 760px) { body.epure .titre-partenaire { max-width: 20ch; } body.epure .saut-titre { display: none; } }      /* deux lignes sur grand écran ; sur téléphone, retour à la ligne naturel */
body.epure .offres { list-style: none; width: 100%; max-width: 980px; margin: 2rem auto 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: left; }
body.epure .offres li { display: block; }
body.epure .offre { display: grid; grid-template-rows: auto auto 1fr auto; row-gap: .35rem; height: 100%; padding: 1.3rem 1.3rem 1.15rem; background: var(--beige-clair); border: 1px solid var(--filet-fort);
  border-radius: 14px; color: var(--texte); text-decoration: none; transition: border-color .25s ease, transform .3s var(--elan); }
body.epure .offre .icone { display: block; margin-bottom: .25rem; color: var(--bleu); }
body.epure .offre .icone svg { display: block; width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.epure .offre b { font-size: 1.2rem; font-weight: 600; color: var(--bleu); }
body.epure .offre-texte { color: var(--doux); font-size: .96rem; line-height: 1.45; }
body.epure .offre-cta { justify-self: start; display: inline-flex; align-items: center; margin-top: .8rem; padding: .62rem 1.15rem; border-radius: 40px; background: var(--bleu); color: var(--beige); font-size: .95rem; font-weight: 600; line-height: 1.2;
  transition: background .2s ease, transform .2s var(--elan); }
body.epure .offre-cta::after { content: "\2192"; display: inline-block; margin-left: .55rem; transition: transform .25s var(--elan); }
body.epure .offre:hover, body.epure .offre:focus-visible { border-color: var(--bleu); transform: translateY(-4px); }
body.epure .offre:hover .offre-cta, body.epure .offre:focus-visible .offre-cta { background: var(--bleu-2); }
body.epure .offre:hover .offre-cta::after, body.epure .offre:focus-visible .offre-cta::after { transform: translateX(5px); }
body.epure .hero-centre .chapeau-suite { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* icônes dessinées à l'arrivée, puis une très légère flottaison décalée d'un flyer à l'autre (propriété `translate`, sans conflit avec le survol) */
  body.trace .offres li:not(.vu) .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  body.trace .offres li.vu .icone svg * { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace-icone .9s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .1s) both; }
  body.epure .offres li.pose { animation: flotte 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.4s); }
  body.epure .offres li.pose:hover { animation-play-state: paused; }
  /* appel à l'action : halo périodique et flèche, comme les boutons de la démonstration, décalés d'une carte à l'autre ; arrêtés au survol */
  body.epure .offre-cta { animation: appel-halo 7s ease-out calc(2s + (var(--i, 4) - 4) * 1.2s) infinite; }
  body.epure .offre-cta::after { animation: appel-fleche 7s ease-in-out calc(2s + (var(--i, 4) - 4) * 1.2s) infinite; }
  body.epure .offre:hover .offre-cta, body.epure .offre:focus-visible .offre-cta, body.epure .offre:hover .offre-cta::after, body.epure .offre:focus-visible .offre-cta::after { animation: none; }
  @keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
}
@media (max-width: 800px) {
  body.epure .offres { grid-template-columns: 1fr; max-width: 460px; gap: .8rem; margin-top: 1.6rem; }
  body.epure .offre { grid-template-rows: auto auto auto auto; }
}

/* « Je crée mon Agent IA » : halo périodique et flèche comme sur les boutons de la démonstration (arrêtés au survol et si les animations sont réduites) */
@media (prefers-reduced-motion: no-preference) {
  body.epure #ia-cadre .ia-actions .btn { animation: appel-halo 6s ease-out 1.5s infinite; }
  body.epure #ia-cadre .ia-actions .btn::after { animation: appel-fleche 6s ease-in-out 1.5s infinite; }
  body.epure #ia-cadre .ia-actions .btn:hover, body.epure #ia-cadre .ia-actions .btn:focus-visible { animation: none; }
  body.epure #ia-cadre .ia-actions .btn:hover::after, body.epure #ia-cadre .ia-actions .btn:focus-visible::after { animation: none; }
}

/* ---------- Bande bleue : seul logo de la page, avec l'animation d'arrivée du gouvernail et des lettres ---------- */
body.epure .bande-centre { display: flex; flex-direction: column; align-items: center; gap: .22rem; min-width: 0; }
body.epure .lien-marque { display: block; line-height: 1; }
body.epure .bande-centre .marque-hero { --mot: 2.25rem; margin: 0; }
body.epure .bande-centre .mh-nom { color: var(--beige); }
body.epure .bande-centre .marque-signature { margin: 0; gap: 0; }
body.epure .bande-centre .ms-metiers { font-size: .56rem; letter-spacing: .18em; color: rgb(255 238 214 / .8); }
body.epure .bande-centre .ms-metiers a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; transition: color .2s ease; }
body.epure .bande-centre .ms-metiers a:hover { color: var(--beige); }
body.epure .bande-centre .ms-metiers a + a::before { content: ""; flex: none; width: .16em; height: .16em; margin: 0 1.1em; border-radius: 50%; background: currentColor; opacity: .5; }
body.epure .heros { padding-top: 7rem; }
@media (min-width: 1001px) { body.epure .entete .nav a:not(.btn) { padding: .45rem .6rem; font-size: .9rem; } }
@media (max-width: 900px) { body.epure .heros { padding-top: 7rem; } body.epure .bande-centre .marque-hero { --mot: 2rem; } }
@media (max-width: 520px) { body.epure .bande-centre .marque-hero { --mot: 1.7rem; } body.epure .bande-centre .ms-metiers { font-size: .52rem; letter-spacing: .1em; } body.epure .bande-centre .ms-metiers a + a::before { margin: 0 .7em; } }
/* Entre 901 et 1000 px, le menu est replié comme sur téléphone pour ne pas toucher le logo */
@media (min-width: 901px) and (max-width: 1000px) {
  body.epure .menu-bouton { display: inline-flex; align-items: center; }
  body.epure .entete .btn-demo, body.epure .entete .btn-connexion { display: none; }
  body.epure .nav { position: absolute; top: calc(100% + .5rem); left: .75rem; right: .75rem; margin: 0; flex-direction: column; gap: 0; border-radius: 22px; background: var(--bleu); border: 1px solid var(--bleu); padding: .5rem 1rem 1rem; }
  html.js body.epure .nav { display: none; }
  html.js body.epure .nav.ouvert { display: flex; }
  html.js body.epure .nav .btn-connexion-nav { display: inline-flex; margin-top: .8rem; background: var(--beige); color: var(--bleu); border-color: var(--beige); }
  body.epure .nav a:not(.btn) { padding: .8rem .4rem; font-size: 1.05rem; color: rgb(255 238 214 / .9); }
}
/* Replié (téléphone et tablette) : le logo reste au centre exact du bandeau, quel que soit le bouton Menu */
@media (max-width: 1000px) {
  body.epure .entete .conteneur { position: relative; min-height: 4.2rem; }
  body.epure .entete .bande-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (min-width: 1181px) { body.epure .entete .nav-g, body.epure .entete .nav-d { gap: 1.5rem; } }

/* ---------- Ouverture de la landing : le gouvernail tourne seul, les lettres défilent, la bande se déploie avec elles, puis le menu arrive ---------- */
/* Le fond de la bande passe sur un pseudo-élément pour pouvoir s'élargir sans déformer le logo ni les liens. */
body.epure .entete .conteneur { background: none; border: 0; box-shadow: none; isolation: isolate; }
body.epure .entete .conteneur::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100%; box-sizing: border-box; transform: translateX(-50%);
  background: var(--bleu); border: 1px solid var(--bleu); border-radius: 40px; box-shadow: 0 16px 34px -18px rgb(48 73 111 / .6); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes bandeau-deploie { 0% { width: 4.3rem; opacity: 0; } 8% { width: 4.3rem; opacity: 1; } 100% { width: 100%; opacity: 1; } }
  /* Les libellés de la bande sont animés par vitrine.js (Web Animations) : ils glissent avec le bord de la bande, rigidement, et sortent de derrière le logo.
     En attendant, ils sont masqués ; vitrine.js lève le masque (classe bande-prete) ou, au pire après 4 s, bande-statique. */
  html.js:not(.bande-prete):not(.bande-statique) body.epure .entete :is(.nav a, .ms-metiers a, .btn-connexion, .menu-bouton) { opacity: 0; }
  html.js body.epure .bande-centre .marque-signature { opacity: 1; animation: none; }
}

/* ---------- Départ de l'ouverture : seulement quand la page est chargée et au repos ----------
   Avant, l'en-tête est masqué (au pire 3,2 s, filet purement CSS si vitrine.js ne répond pas) ; vitrine.js ajoute alors bande-lance et toutes les animations
   démarrent ensemble, au même instant. Avec « réduire les animations », rien n'est masqué ni animé. */
@media (prefers-reduced-motion: no-preference) {
  html body.epure .entete { opacity: 0; animation: entete-filet .01s 3.2s both; }
  @keyframes entete-filet { to { opacity: 1; } }
  html:is(.bande-lance, .bande-statique) body.epure .entete { opacity: 1; animation: none; }
  /* les éléments qui bougent sont promus en calques avant le départ (rastérisés d'avance), puis rendus au navigateur une fois l'ouverture finie */
  html:not(.bande-prete):not(.bande-statique) body.epure .entete :is(.conteneur::before, .nav a, .ms-metiers a, .btn-connexion, .menu-bouton, .mh-logo, .mh-logo img, .mot-svg .lt) { will-change: transform, opacity; }
  html.bande-lance body.epure .entete .conteneur::before { animation: bandeau-deploie 2.2s cubic-bezier(.45, .05, .2, 1) .1s both; }
  html.bande-lance .mot-svg .lt { animation: lettre .65s var(--elan) both; animation-delay: calc(.4s + var(--n) * .14s); }
  html.bande-lance .marque-hero { animation: recentre 1.7s cubic-bezier(.45, .05, .2, 1) .4s both; }
  html.bande-lance .mh-logo { animation: arrive-embleme .9s var(--elan) .1s both; }
  html.bande-lance .mh-logo img { animation: gouvernail-tourne 2.52s cubic-bezier(.25, .46, .45, .94) .1s both; }       /* tourne jusqu'à l'arrivée du dernier libellé (2,62 s) */
}