/* ==========================================================================
   Trousse de départ des démos b2web : socle NEUTRE.
   Le design (couleurs, polices, sections) est propre à chaque démo et va dans
   ressources/demo.css. Ici : remise à zéro, réglages, comportements communs
   (boutons avec flèche, survols, apparitions, menu mobile, FAQ, bandeau).
   ========================================================================== */

/* --- Réglages : à redéfinir dans demo.css -------------------------------- */
:root {
  --c-fond: #ffffff;
  --c-fond-2: #f4f4f2;          /* sections alternées */
  --c-texte: #16181d;
  --c-texte-doux: #5b6170;
  --c-trait: rgba(22, 24, 29, .12);
  --c-accent: #1f6feb;          /* couleur de marque du client */
  --c-accent-texte: #ffffff;    /* texte sur l'accent */
  --c-sombre: #111318;          /* sections sombres */
  --c-sombre-texte: #f4f4f2;

  --f-titre: system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texte: system-ui, -apple-system, "Segoe UI", sans-serif;

  --conteneur: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 10vw, 136px);   /* espacement vertical des sections */
  --rayon: 14px;
  --rayon-bouton: 6px;          /* forme des boutons : À CHOISIR selon le style de la démo (carré, arrondi, pilule…) */
  --ombre: 0 24px 48px -28px rgba(0, 0, 0, .35);
  --courbe: cubic-bezier(.22, 1, .36, 1);
}

/* --- Remise à zéro ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--c-fond); color: var(--c-texte); font: 400 17px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--f-titre); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 84px); }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Mise en page --------------------------------------------------------- */
.conteneur { width: min(100% - 2 * var(--gouttiere), var(--conteneur)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--alt { background: var(--c-fond-2); }
.section--sombre { background: var(--c-sombre); color: var(--c-sombre-texte); }
.surtitre { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
/* (aucun décor imposé au surtitre : chaque démo choisit le sien) */
.chapeau { font-size: clamp(18px, 1.6vw, 21px); color: var(--c-texte-doux); max-width: 62ch; }
.section--sombre .chapeau { color: color-mix(in srgb, var(--c-sombre-texte) 72%, transparent); }

/* --- Boutons : flèche et survol ------------------------------------------ */
.bouton { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border: 1px solid transparent; border-radius: var(--rayon-bouton);
  font-weight: 600; line-height: 1; cursor: pointer; transition: translate .3s var(--courbe), background-color .3s, color .3s, box-shadow .3s, border-color .3s; }
.bouton--accent { background: var(--c-accent); color: var(--c-accent-texte); }
.bouton--sombre { background: var(--c-texte); color: var(--c-fond); }
.bouton--contour { border-color: currentColor; background: transparent; }
.bouton .fleche { position: relative; width: 18px; height: 18px; overflow: hidden; flex: none; }
.bouton .fleche svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: translate .35s var(--courbe); }
.bouton .fleche svg + svg { translate: -130% 0; }
@media (hover: hover) {
  .bouton:hover { translate: 0 -2px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-accent) 70%, transparent); }
  .bouton:hover .fleche svg { translate: 130% 0; }
  .bouton:hover .fleche svg + svg { translate: 0 0; }
  .bouton--contour:hover { background: var(--c-texte); color: var(--c-fond); border-color: var(--c-texte); }
  .lien-fleche:hover .fleche svg { translate: 130% 0; }
  .lien-fleche:hover .fleche svg + svg { translate: 0 0; }
  .carte-survol { transition: translate .4s var(--courbe), box-shadow .4s var(--courbe); }
  .carte-survol:hover { translate: 0 -6px; box-shadow: var(--ombre); }
  .carte-survol .image-zoom img { transition: scale .8s var(--courbe); }
  .carte-survol:hover .image-zoom img { scale: 1.06; }
}
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.lien-fleche .fleche { position: relative; width: 18px; height: 18px; overflow: hidden; }
.lien-fleche .fleche svg { position: absolute; inset: 0; transition: translate .35s var(--courbe); }
.lien-fleche .fleche svg + svg { translate: -130% 0; }
.image-zoom { overflow: hidden; border-radius: var(--rayon); }
.image-zoom img { width: 100%; height: 100%; object-fit: cover; }

/* --- En-tête et menu mobile ---------------------------------------------- */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .35s, box-shadow .35s, padding .35s; padding-block: 22px; }
.entete.est-defile { background: color-mix(in srgb, var(--c-fond) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--c-trait); padding-block: 12px; }
.bouton-menu { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--c-texte); color: var(--c-fond); cursor: pointer; place-items: center; }
.panneau-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 6px; padding: 96px var(--gouttiere) 40px;
  background: var(--c-fond); opacity: 0; visibility: hidden; translate: 0 -12px; transition: opacity .35s, translate .35s var(--courbe), visibility 0s .35s; }
.panneau-menu a { padding: 14px 0; border-bottom: 1px solid var(--c-trait); font: 600 26px/1.2 var(--f-titre); }
html.menu-ouvert .panneau-menu { opacity: 1; visibility: visible; translate: none; transition: opacity .35s, translate .35s var(--courbe); }
html.menu-ouvert { overflow: hidden; }
@media (max-width: 900px) { .nav-ordi { display: none !important; } .bouton-menu { display: grid; } }

/* --- FAQ (details/summary) ----------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--c-trait); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; list-style: none; cursor: pointer; font: 600 clamp(18px, 1.6vw, 21px)/1.3 var(--f-titre); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { position: relative; width: 22px; height: 22px; flex: none; transition: rotate .4s var(--courbe); }
.faq-item .plus::before, .faq-item .plus::after { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; margin-top: -1px; background: currentColor; }
.faq-item .plus::after { rotate: 90deg; }
.faq-item[open] .plus { rotate: 45deg; }
.faq-reponse { overflow: hidden; color: var(--c-texte-doux); }
.faq-reponse > div { padding-bottom: 24px; max-width: 70ch; }

/* --- Bandeau défilant ----------------------------------------------------- */
[data-bandeau] { overflow: hidden; }
[data-bandeau] > .piste { display: flex; width: max-content; gap: var(--bandeau-espace, 64px); animation: defile var(--bandeau-duree, 40s) linear infinite; }
@keyframes defile { to { translate: calc(-50% - var(--bandeau-espace, 64px) / 2) 0; } }

/* --- Apparitions au défilement (site.js ajoute .est-visible) --------------- */
.js [data-reveal] { opacity: 0; transition: opacity .9s var(--courbe), translate .9s var(--courbe), scale .9s var(--courbe), clip-path 1.1s var(--courbe); transition-delay: var(--delai, 0s); }
.js [data-reveal="haut"], .js [data-reveal=""] { translate: 0 40px; }
.js [data-reveal="gauche"] { translate: -48px 0; }
.js [data-reveal="droite"] { translate: 48px 0; }
.js [data-reveal="zoom"] { scale: .94; }
.js [data-reveal="rideau"] { opacity: 1; clip-path: inset(0 0 100% 0); }
.js [data-reveal].est-visible { opacity: 1; translate: none; scale: none; clip-path: inset(0 0 0 0); }
/* Titres mot par mot : site.js découpe les éléments [data-mots] */
.js [data-mots] .mot { display: inline-block; opacity: 0; translate: 0 .6em; transition: opacity .7s var(--courbe), translate .7s var(--courbe); transition-delay: calc(var(--i) * 45ms + var(--delai, 0s)); }
.js [data-mots].est-visible .mot { opacity: 1; translate: none; }

/* --- Formulaire de démo --------------------------------------------------- */
.champ { width: 100%; padding: 15px 16px; border: 1px solid var(--c-trait); border-radius: 10px; background: var(--c-fond); transition: border-color .2s, box-shadow .2s; }
.champ:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent); }
.merci { padding: 28px; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-fond)); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-mots] .mot { opacity: 1; translate: none; scale: none; clip-path: none; }
}

/* --- Formulaire en étapes ------------------------------------------------- */
[data-etape] { margin: 0; padding: 0; border: 0; min-width: 0; }
[data-etape][hidden] { display: none; }
.etapes-barre { height: 6px; border-radius: 99px; background: var(--c-trait); overflow: hidden; }
.etapes-barre > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c-accent); transition: width .5s var(--courbe); }
.choix { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--c-trait); border-radius: 12px; cursor: pointer;
  font-weight: 600; transition: border-color .2s, background-color .2s, translate .2s var(--courbe); }
.choix input { accent-color: var(--c-accent); }
.choix:has(input:checked) { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 9%, var(--c-fond)); }
@media (hover: hover) { .choix:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-trait)); } }

/* --- Avant / après -------------------------------------------------------- */
.avant-apres { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--rayon); touch-action: pan-y; user-select: none; cursor: ew-resize; }
.avant-apres img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.avant-apres .avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.avant-apres .poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: #fff; }
.avant-apres .poignee::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: #fff; color: var(--c-texte); font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }

/* --- Icônes vivantes : accélèrent au survol de la carte -------------------- */
.icone-anim { --vitesse: 1; display: inline-block; }
.icone-anim--tourne { animation: icone-tourne calc(10s / var(--vitesse)) linear infinite; }
.icone-anim--vacille { transform-origin: 50% 90%; animation: icone-vacille calc(2.4s / var(--vitesse)) ease-in-out infinite; }
.icone-anim--flotte { animation: icone-flotte calc(3s / var(--vitesse)) ease-in-out infinite; }
.icone-anim--pulse { animation: icone-pulse calc(2s / var(--vitesse)) ease-in-out infinite; }
.carte-survol:hover .icone-anim, .icone-anim:hover { --vitesse: 3.2; }
@keyframes icone-tourne { to { rotate: 360deg; } }
@keyframes icone-vacille { 0%, 100% { scale: 1 1; rotate: -3deg; } 50% { scale: 1.06 .94; rotate: 3deg; } }
@keyframes icone-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes icone-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }

/* --- Bouton d'appel avec ondes -------------------------------------------- */
.appel-ondes { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-texte); color: var(--c-fond); flex: none; }
.appel-ondes::before, .appel-ondes::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: .6; animation: ondes 2.4s var(--courbe) infinite; }
.appel-ondes::after { animation-delay: 1.2s; }
.appel-ondes svg { width: 26px; height: 26px; animation: sonne 2.4s ease-in-out infinite; }
@keyframes ondes { from { scale: 1; opacity: .6; } to { scale: 1.9; opacity: 0; } }
@keyframes sonne { 0%, 60%, 100% { rotate: 0deg; } 65%, 75%, 85% { rotate: -14deg; } 70%, 80%, 90% { rotate: 14deg; } }

/* --- Crédit b2web (pied de page) ------------------------------------------ */
.credit-b2web { margin: 0; font-size: 14px; opacity: .75; }
.credit-b2web a { text-decoration: underline; text-underline-offset: 3px; }