@font-face {
  font-family: "Mona Sans";
  src: url("assets/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --griotte: #2b0814;
  --grenat: #6e1230;
  --porcelaine: #f7f5f6;
  --encre: #1a0d13;
  --nacre: #f0dec8;
  --cendre: #6f6469;
  --marge: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--porcelaine);
  color: var(--encre);
  font: 400 17px/1.55 "Mona Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 620; font-stretch: 92%; letter-spacing: -.028em; line-height: 1.03; text-wrap: balance; }
h2 { font-size: clamp(36px, 5.2vw, 72px); }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #c2183f; outline-offset: 2px; }
.scene :focus-visible, .entete :focus-visible, .equipe :focus-visible, .essai :focus-visible, .formule-forte :focus-visible, .menu-mobile :focus-visible { outline-color: var(--nacre); }
.ecran :focus-visible { outline-color: var(--grenat); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -999px; z-index: 30; background: var(--nacre); color: var(--encre); padding: 10px 16px; }
.evitement:focus { left: 8px; top: 8px; }
[hidden] { display: none !important; }

/* Boutons */
.bouton { display: inline-block; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s; white-space: nowrap; }
.bouton:hover { transform: translateY(-1px); }
.bouton-nacre { background: var(--nacre); color: var(--griotte); }
.bouton-grenat { background: var(--grenat); color: #fff; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 32px; padding: 12px var(--marge); background: var(--griotte); color: var(--nacre); }
.marque { font-size: 22px; font-weight: 680; font-stretch: 92%; letter-spacing: -.03em; text-decoration: none; }
.menu { display: flex; gap: 28px; margin-right: auto; margin-left: 16px; font-size: 15px; }
.menu a { text-decoration: none; opacity: .86; }
.menu a:hover, .menu a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.entete .bouton { padding: 9px 18px; font-size: 15px; }
.burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; margin: 7px auto; background: var(--nacre); }
.menu-mobile { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 20px var(--marge) 32px; background: var(--griotte); color: var(--nacre); }
.menu-mobile[open] { display: flex; flex-direction: column; gap: 24px; }
.menu-mobile nav { display: flex; flex-direction: column; flex: 1; }
.menu-mobile nav a { padding: 14px 0; font-size: 36px; font-weight: 600; font-stretch: 92%; letter-spacing: -.025em; text-decoration: none; }
.menu-mobile .bouton { text-align: center; }
.fermer { align-self: flex-end; min-height: 44px; border: 0; background: none; color: var(--nacre); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

/* Scène d'accueil */
.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: 24px var(--marge) 44px;
  color: var(--nacre);
  background: radial-gradient(760px 620px at 50% 44%, #72142f 0%, #4a0d22 46%, var(--griotte) 100%);
}
.scene h1 { font-size: clamp(44px, 5.2vw, 78px); font-stretch: 86%; color: #fff; }
.scene-texte > p { margin-top: 24px; max-width: 26em; font-size: 19px; line-height: 1.45; }
.scene-action { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.scene small { font-size: 14px; opacity: .86; }

/* Téléphone */
.telephone {
  height: clamp(640px, calc(100svh - 110px), 780px);
  padding: 10px;
  border-radius: 58px;
  background: linear-gradient(135deg, #8a7f82, #2c2528 28%, #1a1416 62%, #6c6265);
  box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 50px 90px -24px rgba(0,0,0,.72), 0 0 120px rgba(240,222,200,.09);
}
.ecran { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0 14px 14px; border-radius: 48px; background: var(--porcelaine); color: var(--encre); overflow: hidden; }
.barre { position: relative; flex: none; height: 50px; padding: 15px 16px 0; font-size: 14px; font-weight: 620; }
.barre::after { content: ""; position: absolute; top: 12px; left: 50%; width: 104px; height: 28px; margin-left: -52px; border-radius: 16px; background: #000; }
.app-tete { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.app-tete strong { font-size: 25px; font-weight: 660; font-stretch: 92%; letter-spacing: -.03em; }
.app-tete select { max-width: 178px; min-height: 36px; border: 1px solid #dbd5d8; border-radius: 999px; padding: 0 8px; background: #fff; font-size: 12.5px; }
.demande { flex: none; align-self: flex-end; max-width: 86%; margin-bottom: 10px; padding: 8px 13px; border-radius: 18px 18px 4px 18px; background: var(--grenat); color: #fff; font-size: 14px; line-height: 1.3; }

.pile { position: relative; flex: 1; min-height: 190px; margin-bottom: 12px; }
.carte {
  position: absolute; inset: 0 0 calc(var(--rang, 0) * 2px); display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border-radius: 26px; background: #fff; box-shadow: 0 1px 0 #e9e4e6, 0 14px 30px -14px rgba(43,8,20,.3);
  transform: translateY(calc(var(--rang, 0) * 10px)) scale(calc(1 - var(--rang, 0) * .045));
  transform-origin: 50% 100%; touch-action: pan-y; user-select: none; cursor: grab; overflow: hidden;
}
.carte:active { cursor: grabbing; }
.carte-tete { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cendre); }
.carte h3 { font-size: 30px; font-weight: 620; line-height: 1.1; }
.carte p { font-size: 16.5px; line-height: 1.42; color: #3d2f35; padding: 12px 14px; border-radius: 14px; background: var(--porcelaine); }
.glisse { display: flex; align-items: center; gap: 12px; margin-top: auto; min-height: 52px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #f1e6e9; color: var(--grenat); font-size: 13.5px; font-weight: 600; }
.glisse i { flex: none; position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--grenat); }
.glisse i::after { content: ""; position: absolute; left: 14px; top: 15px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.tampon { position: absolute; top: 16px; padding: 3px 12px; border: 2px solid; border-radius: 10px; background: #fff; font-weight: 700; font-size: 17px; opacity: 0; pointer-events: none; }
.tampon-oui { right: 16px; color: var(--grenat); transform: rotate(6deg); }
.tampon-non { left: 16px; color: var(--cendre); transform: rotate(-6deg); }
.vide { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; }
.vide h3 { font-size: 30px; }
.vide p { color: var(--cendre); }

.gestes { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.gestes button { min-height: 50px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; }
.geste-non { padding: 0 18px; border: 1px solid #d3cbcf; background: none; }
.geste-oui { border: 0; background: var(--grenat); color: #fff; }
.geste-oui:hover { background: #7f1638; }
.retour { flex: none; min-height: 38px; margin: 10px 4px 8px; font-size: 13px; line-height: 1.35; color: var(--cendre); }
.suggestions { flex: none; display: flex; gap: 6px; margin: 0 -14px 8px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.suggestions button { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid #dbd5d8; border-radius: 999px; background: #fff; font-size: 13px; cursor: pointer; }
.composer { flex: none; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 3px 3px 3px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #dbd5d8; }
.composer input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; font-size: 16px; outline-offset: -2px; }
.composer input::placeholder { color: var(--cendre); }
.composer button { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--encre); color: #fff; cursor: pointer; }
.composer svg { width: 22px; height: 22px; }
.ondes { display: none; flex: 1; align-items: center; gap: 4px; height: 40px; }
.ondes i { width: 3px; height: 8px; border-radius: 2px; background: var(--grenat); animation: onde .7s ease-in-out infinite alternate; }
.ondes i:nth-child(2n) { animation-delay: -.25s; }
.ondes i:nth-child(3n) { animation-delay: -.5s; }
.ecoute input { display: none; }
.ecoute .ondes { display: flex; }
.ecoute button { background: var(--grenat); }
@keyframes onde { to { height: 28px; } }

/* Tableau de l'entreprise */
.tableau h2 { font-size: 22px; color: #fff; letter-spacing: -.015em; line-height: 1.2; }
.tableau ol { list-style: none; margin: 18px 0; padding: 0; }
.tableau li { display: flex; gap: 12px; padding: 12px 8px; border-top: 1px solid rgba(240,222,200,.2); border-radius: 8px; }
.tableau li strong { display: block; font-size: 15px; font-weight: 560; line-height: 1.3; }
.etat { display: block; margin-top: 2px; font-size: 13.5px; }
.etat.attend { color: #fff; font-weight: 620; }
.etat.fait, .etat.refus { opacity: .82; }
.mention { font-size: 13px; line-height: 1.4; opacity: .82; }

/* Pastilles de logos */
.logo { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(26,13,19,.08); font-size: 14px; font-weight: 700; color: var(--encre); }
.logo svg, .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Vidéo */

/* Outils */
.outils { padding: 0 0 clamp(64px, 9vw, 130px); }
.outils-tete { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; padding: 0 var(--marge) 44px; }
.outils-tete p { color: var(--cendre); }
.defile { display: grid; gap: 12px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rang { display: flex; gap: 12px; width: max-content; animation: defile var(--duree) linear infinite; }
.rang:nth-child(2) { animation-direction: reverse; }
.defile:hover .rang, .defile.arrete .rang { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - 6px)); } }
.outil { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #e8e3e5; font-weight: 520; white-space: nowrap; }
.outil .logo { box-shadow: none; width: 36px; height: 36px; }
.pause { display: block; margin: 14px var(--marge) 0; min-height: 44px; border: 0; background: none; padding: 0; color: var(--cendre); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.annuaire { margin: 40px var(--marge) 0; }
.recherche input { width: 100%; padding: 12px 0; border: 0; border-bottom: 2px solid var(--encre); border-radius: 0; background: none; font-size: clamp(26px, 3.6vw, 48px); font-weight: 560; font-stretch: 92%; letter-spacing: -.02em; }
.recherche input::placeholder { color: #85797e; }
.familles { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.familles button { min-height: 38px; padding: 0 14px; border: 1px solid #d3cbcf; border-radius: 999px; background: none; font-size: 14px; cursor: pointer; }
.familles button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.liste-outils { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 20px; }
.liste-outils li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15.5px; }
.liste-outils.replie li:nth-child(n+25) { display: none; }
.tout-voir { margin-top: 18px; min-height: 44px; padding: 0 20px; border: 1px solid var(--encre); border-radius: 999px; background: none; font-weight: 600; cursor: pointer; }
.aucun { margin-top: 12px; }

/* Équipe */
.equipe { padding: clamp(64px, 9vw, 130px) var(--marge); background: var(--griotte); color: var(--nacre); }
.equipe h2 { color: #fff; }
.equipe-intro { max-width: 40em; margin-top: 20px; font-size: 19px; line-height: 1.45; }
.mur { margin-top: 40px; line-height: 1.04; }
.mur button { padding: 0 .36em 0 0; border: 0; background: none; color: rgba(240,222,200,.62); font-size: clamp(38px, 6.4vw, 92px); font-weight: 600; font-stretch: 88%; letter-spacing: -.03em; cursor: pointer; transition: color .15s; }
.mur button:hover { color: var(--nacre); }
.mur button[aria-pressed="true"] { color: #fff; text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.fiche { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; min-height: 76px; margin-top: 32px; font-size: 20px; line-height: 1.35; }
.fiche p { flex: 1 1 30em; max-width: 40em; }
.fiche-logos { display: flex; gap: 8px; }
.fiche-logos .logo { width: 40px; height: 40px; padding: 8px; }
.usage-interne { max-width: 44em; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(240,222,200,.24); font-size: 15px; }

/* Contrôle */
.controle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); align-items: center; padding: clamp(64px, 9vw, 130px) var(--marge); }
.recu { justify-self: center; width: min(100%, 370px); padding: 28px 26px 22px; background: #fff; transform: rotate(-2.2deg); box-shadow: 0 34px 60px -28px rgba(43,8,20,.48); border-radius: 4px; }
.recu-titre { font-size: 26px; font-weight: 640; font-stretch: 92%; letter-spacing: -.02em; }
.recu dl { margin: 18px 0; }
.recu dl div { padding: 10px 0; border-top: 1px dashed #c7bdc1; }
.recu dt { font-size: 13px; color: var(--cendre); }
.recu dd { margin: 0; font-weight: 540; }
.recu-mention { font-size: 13px; color: var(--grenat); font-weight: 620; }
.controle-texte dl { margin: 32px 0 0; }
.controle-texte dt { margin-top: 22px; font-size: 21px; font-weight: 620; letter-spacing: -.012em; }
.controle-texte dd { margin: 4px 0 0; max-width: 34em; color: #40323a; }

/* Démarrage : une vraie suite d'étapes */
.demarrage { padding: 0 var(--marge) clamp(64px, 9vw, 130px); }
.demarrage ol { counter-reset: e; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: 40px 0 0; padding: 0; }
.demarrage li { counter-increment: e; border-top: 2px solid var(--encre); padding-top: 14px; color: #40323a; }
.demarrage li::before { content: counter(e); display: block; font-size: 44px; font-weight: 600; font-stretch: 88%; color: var(--grenat); line-height: 1.1; margin-bottom: 10px; }
.demarrage strong { display: block; color: var(--encre); font-size: 20px; font-weight: 620; line-height: 1.2; margin-bottom: 6px; }

/* Prix sur l'accueil */
.prix-court { padding: clamp(64px, 9vw, 110px) var(--marge); background: #fff; }
.prix-lignes { margin: 32px 0 20px; border-bottom: 1px solid #d3cbcf; }
.prix-lignes a { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; padding: 18px 0; border-top: 1px solid #d3cbcf; text-decoration: none; }
.prix-lignes a:hover strong { color: var(--grenat); }
.prix-lignes strong { font-size: clamp(30px, 4vw, 54px); font-weight: 600; font-stretch: 90%; letter-spacing: -.025em; }
.prix-lignes span { font-size: clamp(19px, 2vw, 26px); }

/* Questions */
.questions { padding: clamp(64px, 9vw, 110px) var(--marge); }
.questions h2 { margin-bottom: 32px; }
.questions details { max-width: 54em; border-top: 1px solid #d3cbcf; }
.questions details:last-child { border-bottom: 1px solid #d3cbcf; }
.questions summary { padding: 16px 0; font-size: 19px; font-weight: 560; cursor: pointer; }
.questions details p { padding-bottom: 18px; max-width: 42em; color: #40323a; }

/* Essai */
.essai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding: clamp(64px, 9vw, 130px) var(--marge); background: var(--griotte); color: var(--nacre); }
.essai h2 { color: #fff; }
.essai-texte p { margin-top: 20px; max-width: 30em; font-size: 19px; line-height: 1.45; }
.formulaire { display: grid; gap: 16px; }
.formulaire label { display: grid; gap: 6px; font-size: 15px; }
.formulaire input, .formulaire textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(240,222,200,.42); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font-size: 16px; }
.formulaire [aria-invalid="true"] { border-color: var(--nacre); border-width: 2px; }
.formulaire .bouton { justify-self: start; }
.formulaire-message { font-size: 14px; }

/* Tarifs et blog */
.tete-page { padding: clamp(48px, 7vw, 96px) var(--marge); background: var(--griotte); color: var(--nacre); }
.tete-page h1 { color: #fff; font-size: clamp(44px, 7vw, 100px); font-stretch: 88%; }
.tete-page p { margin-top: 18px; font-size: 19px; line-height: 1.45; max-width: 36em; }
.formules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.formule { padding: clamp(32px, 5vw, 72px) var(--marge); background: #fff; }
.formule h2 { font-size: 28px; letter-spacing: -.02em; }
.montant { margin: 18px 0 26px; font-size: clamp(64px, 8vw, 116px); font-weight: 600; font-stretch: 86%; letter-spacing: -.04em; line-height: 1; }
.montant span { display: block; margin-top: 8px; font-size: 18px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
.formule ul { list-style: none; margin: 0 0 30px; padding: 0; }
.formule li { padding: 11px 0; border-top: 1px solid #e3dde0; }
.formule-forte { background: var(--grenat); color: var(--nacre); }
.formule-forte h2, .formule-forte .montant { color: #fff; }
.formule-forte li { border-color: rgba(240,222,200,.28); }
.blog { padding: clamp(40px, 6vw, 80px) var(--marge); }
.billet { max-width: 44em; }
.etiquette { display: inline-block; margin-bottom: 14px; padding: 3px 12px; border-radius: 999px; background: var(--grenat); color: #fff; font-size: 14px; font-weight: 600; }
.billet h2 { font-size: clamp(30px, 3.6vw, 48px); }
.billet-resume { margin-top: 14px; font-size: 19px; color: #40323a; }
.billet summary { margin-top: 16px; font-weight: 600; cursor: pointer; min-height: 32px; }
.billet-corps p { margin-top: 14px; max-width: 38em; }
.billet-corps p:first-child { color: var(--grenat); font-weight: 560; }

/* Pied */
.pied { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; justify-content: space-between; padding: 26px var(--marge); background: var(--encre); color: var(--nacre); font-size: 14px; }

/* Écrans moyens : le tableau passe sous le téléphone */
/* Tâches par métier */
.metiers { padding: clamp(56px, 8vw, 112px) var(--marge); background: var(--porcelaine); color: var(--encre); }
.metiers h2 { max-width: 16em; }
.metiers-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.metiers-choix button { border: 1px solid #d8cfd3; border-radius: 999px; padding: 10px 15px; background: transparent; color: var(--encre); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.metiers-choix button[aria-pressed="true"] { background: var(--grenat); border-color: var(--grenat); color: #fff; }
.metiers h3 { margin-top: 38px; font-size: clamp(22px, 2.4vw, 32px); }
.metiers-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 14px 0 0; padding: 0; list-style: none; }
.metiers-liste li { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid #e3dbdf; font-size: 17px; font-weight: 500; line-height: 1.3; }
.metiers-plus { display: none; margin-top: 18px; border: 2px solid var(--encre); border-radius: 999px; padding: 12px 18px; background: transparent; color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; }
.metiers-commun ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 44px; margin: 14px 0 0; padding: 0 0 0 19px; }
.metiers-note { margin-top: 26px; color: var(--cendre); }
@media (max-width: 760px) {
  .metiers-choix { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); padding-bottom: 6px; scrollbar-width: none; }
  .metiers-choix button { flex: none; }
  .metiers-liste, .metiers-commun ul { grid-template-columns: minmax(0, 1fr); }
  .metiers-liste.replie li:nth-child(n+7) { display: none; }
  .metiers-liste.replie + .metiers-plus:not([hidden]) { display: inline-block; }
}

@media (max-width: 1099px) {
  .scene { grid-template-columns: minmax(0, 1fr) 372px; }
  .tableau { grid-column: 1 / -1; }
  .menu { gap: 18px; margin-left: 0; }
}

/* Téléphones : l'appareil du visiteur devient le téléphone de la démonstration */
@media (max-width: 760px) {
  .menu { display: none; }
  .entete { justify-content: space-between; gap: 10px; padding: 8px var(--marge); }
  .entete .bouton { margin-left: auto; }
  .burger { display: block; }
  .scene { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 0 40px; background: radial-gradient(420px 500px at 50% 50%, #72142f, var(--griotte)); }
  .scene-texte, .tableau { padding: 0 var(--marge); }
  .scene h1 { font-size: 43px; }
  .scene-texte > p { margin-top: 12px; font-size: 17px; }
  .telephone { height: 620px; padding: 0; border-radius: 30px; background: none; box-shadow: 0 28px 60px -22px rgba(0,0,0,.6); }
  .ecran { border-radius: 30px; padding-top: 16px; }
  .barre { display: none; }
  .outils-tete, .controle, .essai, .formules { grid-template-columns: minmax(0, 1fr); }
  .demarrage ol { grid-template-columns: minmax(0, 1fr); }
  .liste-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  .liste-outils li { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
  .recu { transform: rotate(-1.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rang { animation: none; width: auto; flex-wrap: wrap; }
  .ondes i { animation: none; height: 18px; }
  .bouton, .mur button { transition: none; }
}

/* Haut de page : carte de journée par métier */
.scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.scene .tableau { padding: clamp(16px, 2vw, 26px); border-radius: 22px; background: var(--porcelaine); color: var(--encre); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.tableau-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 14px; }
.scene .tableau h2 { font-size: 20px; color: var(--encre); }
.tableau-tete select { max-width: 100%; border: 2px solid var(--grenat); border-radius: 999px; padding: 7px 12px; background: #fff; color: var(--grenat); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.scene .tableau :focus-visible { outline-color: var(--grenat); }
.scene .tableau ol { margin: 0; }
.scene .tableau li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 13px 0; border-top: 1px solid #e3dbdf; border-radius: 0; }
.scene .tableau li .logo { width: 36px; height: 36px; padding: 7px; }
.ligne-corps small { display: block; font-size: 13.5px; opacity: 1; color: var(--cendre); }
.scene .tableau li strong { font-size: 16.5px; font-weight: 650; line-height: 1.28; color: var(--encre); }
.scene .tableau .etat { justify-self: end; text-align: right; font-size: 13.5px; line-height: 1.25; color: var(--cendre); opacity: 1; }
.scene .tableau .etat b { display: block; color: var(--grenat); font-weight: 700; }
.scene .tableau .etat span { display: block; }
.valider { border: 0; border-radius: 999px; padding: 10px 15px; background: var(--grenat); color: #fff; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.valider:hover { background: #861a3d; }
.scene .mention { padding-top: 13px; border-top: 1px solid #e3dbdf; color: var(--cendre); opacity: 1; font-size: 14px; }

/* Téléphone en 3D, au milieu de la page */
.appli { padding: clamp(64px, 8vw, 112px) var(--marge) clamp(56px, 7vw, 96px); text-align: center; background: radial-gradient(760px 620px at 50% 68%, #7a1636, var(--griotte)); color: #f5e9ea; perspective: 1500px; overflow: hidden; }
.appli h2 { max-width: 15em; margin-inline: auto; color: #fff; }
.appli > p { max-width: 34em; margin: 18px auto 0; font-size: 19px; line-height: 1.45; }
.appli-atouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 22px 0 46px; padding: 0; list-style: none; color: var(--nacre); font-weight: 650; }
.appli .telephone { margin-inline: auto; text-align: left; transform: rotateX(13deg) rotateY(-11deg) rotateZ(2deg); transition: transform .55s cubic-bezier(.2, .7, .2, 1); box-shadow: 34px 52px 90px -28px rgba(0, 0, 0, .75); }
.appli .telephone:hover, .appli .telephone:focus-within { transform: none; }
.app-tete { justify-content: flex-start; }

@media (max-width: 1099px) {
  .scene { grid-template-columns: minmax(0, 1fr); }
  .scene .tableau { grid-column: auto; }
}
@media (max-width: 760px) {
  .scene { padding: 24px var(--marge) 44px; gap: 24px; background: radial-gradient(420px 500px at 50% 60%, #72142f, var(--griotte)); }
  .scene-texte, .scene .tableau { padding-inline: 0; }
  .scene .tableau { padding: 16px; }
  .scene .tableau li { grid-template-columns: 36px minmax(0, 1fr); }
  .scene .tableau .etat { grid-column: 2; justify-self: start; text-align: left; margin-top: 3px; }
  .scene .tableau .etat b, .scene .tableau .etat span { display: inline; }
  .scene .tableau .etat span { margin-left: 6px; }
  .appli .telephone { width: min(100%, 330px); height: 640px; padding: 10px; border-radius: 44px; background: #1a0d13; transform: rotateX(7deg) rotateY(-5deg); }
  .appli .telephone .ecran { border-radius: 34px; padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .appli .telephone { transition: none; }
}
@media (min-width: 761px) {
  .appli .telephone { width: 372px; }
}

/* Sections du bas : titres plus fins, cartes, plus d'air */
main > section:not(.scene):not(.appli):not(.outils) h2 { font-size: clamp(30px, 3.5vw, 48px); font-weight: 600; font-stretch: 100%; letter-spacing: -.025em; line-height: 1.1; }
.tete-section { max-width: 44em; margin: 0 auto clamp(30px, 4vw, 52px); text-align: center; }
.tete-section p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--cendre); }
.equipe, .controle, .demarrage, .tarifs, .questions { display: block; padding: clamp(60px, 7.5vw, 104px) var(--marge); background: var(--porcelaine); color: var(--encre); }
.equipe h2, .questions h2 { color: var(--encre); }
.demarrage, .questions { background: #fff; }
.equipe :focus-visible { outline-color: var(--grenat); }
.usage-interne { max-width: 44em; margin: 36px auto 0; text-align: center; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--cendre); }
.cartes { max-width: 1120px; margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 16px; }
.cartes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloc { padding: 24px; border: 1px solid #e7e0e3; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -22px rgba(43, 8, 20, .35); color: #40323a; font-size: 15.5px; line-height: 1.5; }
.demarrage .bloc { background: var(--porcelaine); }
.bloc h3 { margin: 0 0 7px; font-size: 18px; font-weight: 640; font-stretch: 100%; letter-spacing: -.012em; line-height: 1.25; color: var(--encre); }
.bloc p { margin: 0; }
.expert-logos { display: flex; gap: 7px; margin-bottom: 16px; }
.etape { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--grenat); color: #fff; font-size: 14px; font-weight: 700; }

/* Formules */
.tarifs-page { padding-top: clamp(36px, 5vw, 64px); }
.formules-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); justify-content: center; gap: 22px; }
.offre { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid #e7e0e3; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px -30px rgba(43, 8, 20, .45); }
.offre-forte { border: 1.5px solid var(--grenat); box-shadow: 0 26px 60px -28px rgba(110, 18, 48, .6); }
.offre-badge { position: absolute; top: -13px; left: 30px; padding: 4px 13px; border-radius: 999px; background: var(--grenat); color: #fff; font-size: 13px; font-weight: 650; }
.offre h3 { font-size: 21px; font-weight: 650; font-stretch: 100%; letter-spacing: -.015em; }
.offre-pour { margin-top: 5px; font-size: 15px; color: var(--cendre); }
.offre-prix { margin: 22px 0 20px; font-size: 46px; font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--encre); }
.offre-prix span { font-size: 14.5px; font-weight: 450; letter-spacing: 0; color: var(--cendre); }
.offre ul { flex: 1; margin: 0 0 26px; padding: 0; list-style: none; }
.offre li { position: relative; margin-top: 11px; padding-left: 28px; font-size: 15.5px; line-height: 1.4; color: #40323a; }
.offre li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #f3e4e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' stroke='%236e1230' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.offre .bouton { text-align: center; }
.bouton-contour { border: 1.5px solid #d8cfd3; background: #fff; color: var(--encre); }
.bouton-contour:hover { border-color: var(--grenat); }
.offre-note { max-width: 44em; margin: 24px auto 0; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--cendre); }

/* Questions */
.faq { max-width: 760px; margin: 0 auto; }
.questions .faq details { max-width: none; margin-bottom: 10px; padding: 0 20px; border: 1px solid #e7e0e3; border-radius: 14px; background: #fff; }
.questions .faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 17px 0; font-size: 16.5px; font-weight: 600; list-style: none; }
.questions .faq summary::-webkit-details-marker { display: none; }
.questions .faq summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; color: var(--grenat); }
.questions .faq details[open] summary::after { content: "\2212"; }
.questions .faq details p { font-size: 15.5px; line-height: 1.5; }

/* Formulaire final */
.essai { align-items: center; }
.formulaire { padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: #fff; color: var(--encre); }
.formulaire .bouton { background: var(--grenat); color: #fff; }
.formulaire-message { color: var(--cendre); }
.essai .formulaire :focus-visible { outline-color: var(--grenat); }
.formulaire input, .formulaire textarea { background: var(--porcelaine); border: 1px solid #e7e0e3; }

/* Pied de page */
.pied { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 28px; align-items: start; padding: clamp(40px, 5vw, 64px) var(--marge); background: var(--griotte); color: var(--nacre); font-size: 14.5px; }
.pied p { max-width: 24em; margin-top: 10px; opacity: .8; line-height: 1.45; }
.pied h2 { margin: 0 0 10px; font-size: 14px; font-weight: 650; font-stretch: 100%; letter-spacing: 0; color: #fff; }
.pied a { display: block; margin-top: 7px; color: var(--nacre); text-decoration: none; opacity: .85; overflow-wrap: anywhere; }
.pied a:hover { opacity: 1; text-decoration: underline; }
.pied :focus-visible { outline-color: var(--nacre); }

/* Pages légales */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--marge) clamp(56px, 7vw, 88px); background: none; color: var(--encre); font-size: 16px; line-height: 1.6; }
.legal h1 { margin-bottom: 26px; font-size: clamp(32px, 4vw, 48px); font-weight: 620; font-stretch: 100%; color: var(--encre); }
.legal h2 { margin: 28px 0 7px; font-size: 19px; font-weight: 640; font-stretch: 100%; letter-spacing: -.01em; line-height: 1.3; }
.legal ul { padding-left: 20px; }
.legal-date { margin-top: 32px; font-size: 14px; color: var(--cendre); }

/* Scène 3D du téléphone */
.appli { perspective: 1250px; perspective-origin: 50% 40%; padding-bottom: clamp(70px, 8vw, 120px); }
.appli-atouts { margin-bottom: 64px; }
.scene3d { --rx: 8deg; --ry: -16deg; --rz: 2.5deg; position: relative; width: 372px; max-width: 100%; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.appli .telephone, .appli .telephone:hover, .appli .telephone:focus-within { transform: translateZ(0); transition: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, -1px 1px 0 #6a6064, -2px 2px 0 #5a5155, -3px 3px 0 #4c4448, -4px 4px 0 #40393c, -5px 5px 0 #352f32, -6px 6px 0 #2d2729, -7px 7px 0 #262124, -8px 8px 0 #1f1b1d, -9px 9px 0 #1a1618, -10px 10px 0 #151214, -40px 60px 90px -20px rgba(0, 0, 0, .75); }
.sol { position: absolute; left: 4%; right: -4%; bottom: -46px; height: 80px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(28px); transform: translateZ(-90px); pointer-events: none; }
.puce { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 16px; background: #fff; color: var(--encre); text-align: left; white-space: nowrap; box-shadow: 0 26px 46px -16px rgba(0, 0, 0, .65); pointer-events: none; }
.puce strong { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.25; }
.puce span:not(.logo) { display: block; font-size: 12.5px; line-height: 1.25; color: var(--cendre); }
.puce-1 { left: -190px; top: 10%; transform: translateZ(110px); }
.puce-2 { right: -205px; top: 25%; transform: translateZ(170px); }
.puce-3 { left: -165px; top: 58%; transform: translateZ(150px); }
.puce-4 { right: -180px; top: 72%; transform: translateZ(90px); }
@media (max-width: 1000px) {
  .puce-3, .puce-4 { display: none; }
  .puce-1 { left: -12px; top: -30px; transform: translateZ(70px); }
  .puce-2 { right: -12px; top: auto; bottom: 160px; transform: translateZ(90px); }
}
@media (max-width: 860px) {
  .cartes-3 { grid-template-columns: minmax(0, 1fr); }
  .formules-cartes { grid-template-columns: minmax(0, 1fr); }
  .pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-marque { grid-column: 1 / -1; }
  .essai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .scene3d { width: min(100%, 330px); }
  .appli .telephone { width: 100%; }
  .puce { padding: 8px 12px 8px 8px; }
  .puce strong { font-size: 13px; }
  .bloc { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene3d { transition: none; }
}

/* Toutes les tâches du métier, ouvertes depuis la carte du haut */
.voir-tout { display: block; width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 14px 16px; background: var(--grenat); color: #fff; font: inherit; font-size: 15.5px; font-weight: 650; cursor: pointer; }
.voir-tout:hover { background: #861a3d; }
.tout-metier { padding: clamp(40px, 5vw, 72px) var(--marge); background: var(--porcelaine); color: var(--encre); scroll-margin-top: 70px; }
.tout-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; max-width: 1180px; margin: 0 auto 26px; }
main > section.tout-metier h2 { max-width: 22em; font-size: clamp(24px, 2.6vw, 36px); }
.tout-fermer { flex: none; border: 1.5px solid #d8cfd3; border-radius: 999px; padding: 9px 16px; background: #fff; color: var(--encre); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.tout-groupes { max-width: 1180px; margin: 0 auto; columns: 2; column-gap: 18px; }
.groupe { break-inside: avoid; margin-bottom: 18px; padding: 22px; border: 1px solid #e7e0e3; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -22px rgba(43, 8, 20, .35); }
.groupe h3 { margin: 0 0 8px; font-size: 18px; font-weight: 650; font-stretch: 100%; letter-spacing: -.012em; color: var(--grenat); }
.groupe ul { margin: 0; padding: 0; list-style: none; }
.groupe li { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid #f0eaec; font-size: 15px; line-height: 1.32; color: var(--encre); }
.groupe li:first-child { border-top: 0; }
@media (max-width: 860px) {
  .tout-groupes { columns: 1; }
  .groupe { padding: 18px; }
}

.outils { padding-top: clamp(60px, 7.5vw, 104px); }
.demarrage ol.cartes { max-width: 1120px; margin: 0 auto; counter-reset: none; }
.demarrage li.bloc { padding: 24px; border: 1px solid #e7e0e3; }
.demarrage li.bloc::before { content: none; }
@media (max-width: 760px) {
  .puce-2 { display: none; }
}
/* Sur téléphone, le bouton de l'en-tête suffit */
@media (max-width: 760px) {
  .scene-action .bouton { display: none; }
  .scene-action { margin-top: 12px; }
}

/* Piège à robots du formulaire, invisible pour les visiteurs */
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Menu des métiers : un vrai bouton plein, avec sa flèche bien visible */
.tableau-tete select { appearance: none; -webkit-appearance: none; border: 0; padding: 11px 44px 11px 16px; background: var(--grenat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; color: #fff; box-shadow: 0 8px 18px -8px rgba(110, 18, 48, .8); }
.tableau-tete select:hover { background-color: #861a3d; }
.tableau-tete select option { background: #fff; color: var(--encre); }

/* Comparatif */
.pourquoi { padding: clamp(60px, 7.5vw, 104px) var(--marge); background: var(--porcelaine); }
.pourquoi-noms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.pourquoi-noms li { padding: 9px 16px; border: 1px solid #e0d8dc; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; }
.face-action { margin-top: 28px; text-align: center; }
.cartes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.face h3 { margin-bottom: 12px; font-size: 21px; }
.face dl { margin: 0; }
.face dt { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--cendre); }
.face dd { margin: 2px 0 0; }
.face dt:last-of-type { color: var(--grenat); }
.face dd:last-of-type { font-weight: 600; color: var(--encre); }
@media (max-width: 1000px) { .cartes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cartes-4, .cartes-2 { grid-template-columns: minmax(0, 1fr); } }