/* Pages publiques (accueil, contact, pages légales), pages de compte (connexion, inscription, démarrage) et espace
   administrateur. AUCUNE couleur n'est définie ici : tout vient des variables de app/style.css.
   Principe : peu de blocs, beaucoup d'espace, un seul message fort par écran, une seule animation par section. */

body.page-simple, body.page-accueil { min-height: 100vh; display: flex; flex-direction: column; }
.aller-contenu {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; border-radius: var(--rayon-petit);
  background: var(--surface); border: 1px solid var(--trait-fort); color: var(--encre); text-decoration: none;
}
.aller-contenu:focus { top: 12px; }
.en-ligne { display: inline; margin: 0; }
.ligne.centre { justify-content: center; }
.bouton.grand { height: 50px; padding: 0 26px; font-size: 15.5px; border-radius: 10px; }

/* ------------------------------------------------------------------ en-tête fixe */
.haut-site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; border-bottom: 1px solid transparent;
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.haut-site.defile, .page-simple .haut-site {
  background: color-mix(in srgb, var(--fond) 88%, transparent); border-bottom-color: var(--filet);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.haut-site-interieur { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.haut-site .marque { padding: 0; }
.liens-haut { display: flex; align-items: center; gap: 24px; }
.lien-haut { position: relative; color: var(--encre-2); text-decoration: none; font-size: 14.5px; white-space: nowrap; transition: color var(--duree-courte) var(--courbe); }
.liens-haut .bouton { white-space: nowrap; }
.lien-haut::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--argent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--duree) var(--courbe);
}
.lien-haut:hover, .lien-haut:focus-visible, .lien-haut[aria-current="page"] { color: var(--encre); }
.lien-haut:hover::after, .lien-haut:focus-visible::after, .lien-haut[aria-current="page"]::after { transform: scaleX(1); }
.page-plateforme .liens-haut { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.bascule-theme svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ contenu et pied de page */
.contenu-simple { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 120px 24px 80px; view-transition-name: contenu; }
.contenu-simple:focus { outline: none; }
.page-accueil .contenu-simple { max-width: none; padding: 0; overflow-x: clip; }
.messages { max-width: 640px; margin: 0 auto 18px; }
.pied-site { padding: 40px 24px 48px; border-top: 1px solid var(--filet); }
.pied-site-interieur { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.liens-pied { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.liens-pied a { color: var(--encre-3); text-decoration: none; font-size: 13.5px; transition: color var(--duree-courte) var(--courbe); }
.liens-pied a:hover, .liens-pied a:focus-visible { color: var(--encre); }
/* Sur téléphone, l'icône de thème quitte l'en-tête (trop étroit) et ce lien la remplace en bas de page. */
.lien-pied-theme { display: none; background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--encre-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-pied-theme:hover, .lien-pied-theme:focus-visible { color: var(--encre); }
.marque.petite { padding: 0; }
.marque.petite .mot { font-size: 17px; }
.marque.petite .symbole { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ accueil : hero */
.surtitre { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-encre); }
.hero {
  max-width: 1180px; margin: 0 auto; padding: 168px 24px 120px; display: grid; gap: 72px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hero-texte { display: flex; flex-direction: column; }
.hero .surtitre { margin-bottom: 22px; }
.hero h1 { font-size: clamp(42px, 5.2vw, 66px); line-height: 1.04; font-weight: 500; letter-spacing: -.005em; }
.hero-sous { font-size: 18px; color: var(--encre-2); margin-top: 26px; max-width: 470px; line-height: 1.6; }
.hero-actions { margin: 40px 0 16px; gap: 12px; }

/* ------------------------------------------------------------------ accueil : maquette du produit (données fictives)
   Une seule animation : le créneau proposé (pointillés) se valide, puis recommence. */
.maquette { margin: 0; border-radius: 16px; border: 1px solid var(--trait); background: var(--surface); overflow: hidden; }
.maquette-barre { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-2); }
.pastilles { display: inline-flex; gap: 6px; }
.pastilles i { width: 8px; height: 8px; border-radius: 50%; background: var(--trait-fort); }
.maquette-titre { flex: 1; font-size: 12.5px; color: var(--encre-3); letter-spacing: .02em; }
.maquette-ecran { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 20px; }
.maquette-date { font-family: var(--police-titre); font-size: 21px; font-weight: 500; color: var(--argent-vif); }
.maquette-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.maquette-tuiles div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); }
.maquette-tuiles b { font-family: var(--police-titre); font-size: 24px; font-weight: 500; line-height: 1; color: var(--argent-vif); font-variant-numeric: lining-nums tabular-nums; }
.maquette-tuiles span { font-size: 11px; color: var(--encre-3); }
.maquette-planning { display: flex; flex-direction: column; gap: 10px; }
.maquette-heures { display: flex; justify-content: space-between; margin-left: 104px; font-size: 10.5px; color: var(--encre-3); }
.maquette-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.maquette-ligne .nom { color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piste { position: relative; height: 18px; border-radius: 5px; background: var(--surface-2); }
.barre { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; background: var(--argent-sombre); }
.barre.b1 { left: 5%; width: 74%; }
.barre.b2 { left: 15%; width: 74%; }
.barre.b3 { left: 20%; width: 75%; }
.barre.proposee { background: transparent; border: 1px dashed var(--accent); }
.barre.proposee::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--argent-sombre);
  opacity: 0; animation: validee 7s var(--courbe) 1.2s infinite;
}
.conge {
  position: absolute; top: 2px; bottom: 2px; left: 2%; right: 30%; display: flex; align-items: center; padding-left: 8px;
  border-radius: 4px; background: var(--bleu-doux); color: var(--bleu); font-size: 10.5px; font-style: normal;
}
@keyframes validee { 0%, 40% { opacity: 0; } 48%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ------------------------------------------------------------------ accueil : sections */
.bloc-vitrine { max-width: 1180px; margin: 0 auto; padding: 112px 24px; display: flex; flex-direction: column; gap: 56px; }
.titre-section { font-size: clamp(30px, 3.2vw, 42px); font-weight: 500; line-height: 1.12; text-align: center; color: var(--argent-vif); }
.grille-benefices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.benefice { display: flex; flex-direction: column; gap: 12px; }
.benefice svg { width: 28px; height: 28px; color: var(--argent); }
.benefice h3 { font-family: var(--police-titre); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--argent-vif); }
.benefice p { color: var(--encre-2); }

.deux-colonnes-assistant { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.assistant-texte { display: flex; flex-direction: column; gap: 18px; }
.assistant-texte .titre-section { text-align: left; }
.assistant-texte p { max-width: 420px; }
.conversation { display: flex; flex-direction: column; gap: 14px; min-height: 270px; padding: 28px; border-radius: 16px; background: var(--surface); }
.bulle { max-width: 88%; padding: 12px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.bulle-question { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--bouton-fond); color: var(--bouton-encre); font-weight: 500; }
.frappe { display: inline-block; max-width: 34ch; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.bulle-reponse { position: relative; align-self: flex-start; border-bottom-left-radius: 4px; background: var(--surface-2); }
.bulle-reponse strong { color: var(--argent-vif); font-weight: 600; }
.bulle-reponse .sources { margin-top: 10px; }
.bulle-reponse .source { cursor: default; background: var(--surface-3); }
.points { display: none; gap: 5px; position: absolute; left: 16px; top: 18px; }
.points i { width: 6px; height: 6px; border-radius: 50%; background: var(--encre-3); animation: point 1s var(--courbe) infinite; }
.points i:nth-child(2) { animation-delay: 150ms; }
.points i:nth-child(3) { animation-delay: 300ms; }
.legende { margin-top: auto; text-align: right; }
/* La conversation se joue quand elle devient visible (site.js) : c'est la seule animation de la section.
   Sans JavaScript, tout est simplement affiché. */
.js .conversation:not(.joue):not(.jouee) .bulle { opacity: 0; }
.conversation.joue .bulle-question { animation: fondu var(--duree) var(--courbe) both; }
.conversation.joue .frappe { animation: frappe 1.1s steps(31, end) 150ms both; }
.conversation.joue .bulle-reponse { animation: fondu var(--duree) var(--courbe) 1.45s both; }
.conversation.joue .points { display: inline-flex; animation: fondu-sortie 1.1s linear 1.45s both; }
.conversation.joue .texte-reponse { opacity: 0; animation: fondu var(--duree-longue) var(--courbe) 2.5s forwards; }
@keyframes frappe { from { max-width: 0; } to { max-width: 34ch; } }
@keyframes point { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes fondu-sortie { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* Dernier écran : l'appel à essayer, avec les trois garanties en une ligne. */
.appel-final { max-width: 760px; margin: 0 auto; padding: 112px 24px 128px; display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.appel-final .ligne { margin-top: 12px; }
.garanties { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--encre-3); font-size: 14px; }
.garanties li { position: relative; padding-left: 16px; }
.garanties li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.choix-demo { color: var(--encre-3); font-size: 14px; }

/* ------------------------------------------------------------------ pages de compte : sans cadre, centrées */
.carte-compte { max-width: 400px; margin: 4vh auto 0; padding: 0; background: none; }
.carte-compte.pile { gap: 18px; }
.carte-compte h1 { font-size: 34px; }
.carte-compte form { display: flex; flex-direction: column; gap: 16px; }
.carte-compte form p:has(> input, > select, > textarea, > label), .carte-compte form div:has(> input, > select, > textarea) { display: flex; flex-direction: column; gap: 6px; }
.carte-compte label { font-size: 13px; font-weight: 500; color: var(--encre-2); }
.carte-compte input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .carte-compte select {
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--rayon-petit); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  transition: border-color var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe);
}
.carte-compte input:hover { border-color: var(--argent-sombre); }
.carte-compte input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.carte-compte button[type=submit], .carte-compte button:not(.bouton) {
  height: 46px; padding: 0 18px; border-radius: var(--rayon-petit); border: none; background: var(--bouton-fond); color: var(--bouton-encre);
  font-weight: 600; cursor: pointer; transition: background var(--duree-courte) var(--courbe), transform 90ms var(--courbe);
}
.carte-compte button[type=submit]:hover, .carte-compte button:not(.bouton):hover { background: var(--bouton-fond-survol); }
.carte-compte button[type=submit]:active, .carte-compte button:not(.bouton):active { transform: scale(.98); }
.carte-compte ul.errorlist, .carte-compte .errorlist { list-style: none; margin: 0; padding: 8px 12px; border-radius: var(--rayon-petit); background: var(--rouge-doux); color: var(--rouge); font-size: 13.5px; }
.carte-compte .helptext, .carte-compte small { font-size: 12.5px; color: var(--encre-3); }
.carte-compte .champ { gap: 6px; }
.carte-compte .champ .aide { font-size: 12.5px; color: var(--encre-3); }
.carte-compte hr { margin: 4px 0; background: var(--filet); height: 1px; border: none; }
.carte-compte .accroche { color: var(--encre-2); font-size: 16px; margin-top: -6px; }
.liens-compte { text-align: center; margin-top: 20px; }

/* ------------------------------------------------------------------ contact, pages légales */
.page-contact { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.formulaire-contact { padding: 0; background: none; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.texte-legal { max-width: 720px; margin: 0 auto; }
.texte-legal h1 { font-size: 36px; margin-top: 8px; }
.texte-legal h2 { font-size: 22px; margin-top: 26px; }
.texte-legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texte-legal p, .texte-legal li { color: var(--encre-2); }

/* ------------------------------------------------------------------ espace administrateur */
.page-plateforme .contenu-simple, .page-plateforme .haut-site-interieur, .page-plateforme .pied-site-interieur { max-width: 1280px; }
.page-plateforme .nombre { font-size: 32px; }
.saisie.auto { width: auto; }
.saisie.court { width: 100px; }
.saisie.moyen { width: 170px; }
.saisie.large { width: 260px; }

/* ------------------------------------------------------------------ écrans moyens et téléphone (mobile d'abord : tout reste lisible) */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 132px; gap: 56px; }
  .deux-colonnes-assistant { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .grille-benefices { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; }
  .masque-etroit { display: none; }
}
@media (max-width: 760px) {
  .haut-site-interieur { padding: 12px 16px; }
  .liens-haut { gap: 12px; }
  .contenu-simple { padding: 96px 16px 56px; }
  .hero { padding: 112px 16px 80px; }
  .hero h1 { font-size: clamp(38px, 11vw, 50px); }
  .hero-sous { font-size: 16.5px; }
  .hero-actions .bouton { flex: 1 1 auto; }
  .maquette-ecran { padding: 18px 16px 20px; }
  .maquette-heures { margin-left: 92px; }
  .maquette-ligne { grid-template-columns: 84px minmax(0, 1fr); font-size: 11.5px; }
  .conge { right: 4%; }
  .bloc-vitrine { padding: 80px 16px; gap: 36px; }
  .conversation { padding: 18px; }
  .appel-final { padding: 80px 16px 96px; }
  .carte-compte { margin-top: 0; }
  .saisie.large, .saisie.moyen { width: 100%; }
  .pied-site { padding: 32px 16px 40px; }
  .pied-site-interieur { flex-direction: column; align-items: flex-start; }
}
.version-courte { display: none; }
@media (max-width: 420px) {
  .version-longue { display: none; }
  .version-courte { display: inline; }
  .haut-site .marque .mot { font-size: 19px; letter-spacing: .28em; margin-right: -.28em; }
  .haut-site-interieur { gap: 8px; }
  .liens-haut { gap: 12px; }
  .liens-haut .bascule-theme { display: none; }
  .lien-pied-theme { display: inline; }
  .maquette-tuiles { gap: 6px; }
  .maquette-tuiles div { padding: 8px 9px; }
}
@media (max-width: 350px) {
  .haut-site .marque .mot { font-size: 17px; letter-spacing: .22em; margin-right: -.22em; }
  .lien-haut { font-size: 13.5px; }
}