/* ===========================================================================
   Vitrine Predixia Cabinet

   PARTI PRIS

   La page est composée comme un dossier clinique — non pas en imitant le
   papier, mais en lui empruntant sa structure : une réglure qui court le long
   du texte comme la marge d'un formulaire, des sections numérotées dans cette
   marge, et des lignes de conduite pointillées entre un libellé et sa valeur.
   Ce sont les gestes typographiques d'un imprimé médical.

   COULEURS
     papier   #F6F8F9   fond, un blanc légèrement bleuté
     surface  #FFFFFF   cartes
     encre    #0B1A22   texte
     accent   #076946   le vert PROFOND du logo, relevé sur son tracé.
                        6,73:1 sur blanc : il tient comme texte et comme fond
                        de bouton, ce que le vert clair du logo (#08A16B,
                        3,32:1) ne fait pas — celui-ci est réservé aux fonds
                        sombres, où il a la place de briller.
     profond  #022116   fonds sombres (imagerie : une visionneuse est noire).
                        Ramené sur la teinte du logo : un noir bleuté sous un
                        accent vert se lit comme deux marques.
     signal   #B03A2E   UNIQUEMENT les valeurs hors normes. Jamais décoratif.

   TYPOGRAPHIE
     display   empattement — le registre d'un imprimé médical, pas celui d'un
               logiciel en ligne. Aucune police chargée d'un serveur tiers.
     texte     pile système
     chiffres  monospace, chiffres tabulaires : des valeurs qui s'alignent

   Aucune requête sortante : la page doit s'ouvrir sur la connexion d'un
   cabinet, se lire sans JavaScript, et ne rien signaler à personne.
   =========================================================================== */

:root {
  /* Le contraste est monté d'un cran partout : le fond n'est plus un blanc
     hésitant, le texte courant n'est plus gris, et l'accent occupe des blocs
     entiers au lieu de n'apparaître qu'en filets. Une page pâle se lit comme
     une page qui n'ose pas. */
  --papier:    #FFFFFF;
  --surface:   #FFFFFF;
  --creux:     #E7EFF1;
  --encre:     #06161D;
  --attenue:   #3E525E;   /* le texte courant, pas un gris */
  --leger:     #6B7F8A;
  --trait:     #C9D8DE;
  --accent:    #076946;
  --accent-vif:#0BA36C;
  --accent-p:  #DAF1E9;
  /* L'encre POSÉE SUR l'accent. Elle ne peut pas être « blanc » une fois pour
     toutes : en thème sombre l'accent devient un vert menthe clair, et du
     blanc dessus tombe à 1,8:1 — le libellé du bouton d'appel disparaissait.
     Elle bascule donc avec le thème, comme l'accent lui-même. */
  --sur-accent:#FFFFFF;
  --sur-accent-doux:#CFEDDF;   /* le second plan, sur l'accent */
  --profond:   #022116;
  --nuit:      #01140D;
  --signal:    #A32E22;
  --signal-p:  #FAE6E3;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia,
             "Times New Roman", serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, "Noto Sans", sans-serif;
  --chiffres: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 72px; --e9: 104px; --e10: 148px;

  --marge: 56px;            /* la réglure : largeur de la marge du formulaire */
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:   #081410;
    --surface:  #10201B;
    --creux:    #162923;
    --encre:    #EBF4F1;
    --attenue:  #ACC3BB;
    --leger:    #7A998E;
    --trait:    #223F35;
    --accent:   #69D3AD;
    --accent-vif:#8EE1C3;
    --accent-p: #153228;
    --sur-accent:#081410;
    --sur-accent-doux:#14392A;
    --profond:  #050D0A;
    --nuit:     #030806;
    --signal:   #F0958A;
    --signal-p: #2A1512;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.62;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(42px, 6.8vw, 74px); line-height: 1.02; letter-spacing: -.028em; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.022em; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
p  { margin: 0; }
a  { color: inherit; }
em { font-style: italic; }

::selection { background: var(--accent-p); color: var(--encre); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.large  { width: min(1180px, 100% - 56px); margin-inline: auto; }
.etroit { width: min(780px, 100% - 56px); margin-inline: auto; }

.oeil {
  font-family: var(--texte);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent);
}

/* --- devanture ---------------------------------------------------------- */

.devanture {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--trait);
}
.devanture .large { display: flex; align-items: center; gap: var(--e5); height: 68px; }

.marque {
  font-family: var(--display); font-size: 21px; text-decoration: none;
  letter-spacing: -.02em; display: flex; align-items: center; gap: 9px;
}
/* La marque remplace la pastille de couleur qui tenait sa place : le logo
   porte déjà sa forme et sa teinte, une seconde pastille à côté ferait deux
   signes pour une seule marque. L'image est décorative — le nom est écrit
   juste à côté — donc elle sort de l'arbre d'accessibilité. */
.marque img {
  width: 44px; height: 44px; display: block; align-self: center;
}
.marque span { color: var(--accent); }

.devanture nav { margin-left: auto; display: flex; gap: var(--e5); align-items: center; }
.devanture nav a { font-size: 14.5px; color: var(--attenue); text-decoration: none;
                   transition: color .15s; }
.devanture nav a:hover { color: var(--encre); }
/* Le bouton d'appel est un lien DANS la navigation : « .devanture nav a »
   l'emportait sur « .bouton » — deux classes contre une — et lui repeignait
   son libellé en gris de navigation. Sur le fond plein du bouton, le mot
   devenait illisible ; c'est le seul appel à l'action de l'entête. */
.devanture nav a.bouton { color: var(--sur-accent); }

/* Le sélecteur de langue. Trois codes de deux lettres, pas trois noms de
   langue : « Deutsch » à côté de « Demander une démonstration » ferait deux
   mots longs qui se disputent la même fin de bandeau. La langue courante est
   marquée par « aria-current », et c'est cet attribut — pas une classe de
   plus — qui la peint : l'état est déjà dit une fois, dans le HTML. */
.langues { display: flex; gap: 2px; margin: 0; align-items: center; }
.devanture nav .langues a {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 8px; border-radius: 3px; line-height: 1;
}
.devanture nav .langues a[aria-current] {
  color: var(--encre); background: color-mix(in srgb, var(--encre) 8%, transparent);
}

/* Sous 900 px la navigation se replie déjà ; le sélecteur reste, parce qu'un
   lecteur qui tombe sur la mauvaise langue n'a rien d'autre à quoi se
   raccrocher. */
@media (max-width: 900px) {
  .langues { margin-left: auto; }
}

.bouton {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 13px 24px; border-radius: 3px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--sur-accent);
  box-shadow: 0 1px 0 rgba(0,0,0,.12); text-decoration: none;
  font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .15s;
}
.bouton:hover { filter: brightness(1.1); }
.bouton:active { transform: translateY(1px); }
.bouton.creux { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton.creux:hover { background: var(--creux); filter: none; }

/* --- la réglure : marge de formulaire ----------------------------------- */

.reglure { position: relative; padding-left: var(--marge); }
.reglure::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--trait);
}
.reglure > .numero {
  position: absolute; left: 0; top: 2px;
  font-family: var(--chiffres); font-size: 12px; color: var(--accent);
  letter-spacing: .04em;
}

/* --- ouverture ---------------------------------------------------------- */

.ouverture { padding: var(--e10) 0 var(--e9); }
.ouverture .large {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--e8); align-items: center;
}
.ouverture h1 { margin-top: var(--e4); }
.ouverture h1 em { color: var(--accent); font-style: normal; }
.chapeau { font-size: 19.5px; color: var(--attenue); margin-top: var(--e5); max-width: 47ch; }
.actions { display: flex; gap: var(--e3); margin-top: var(--e6); flex-wrap: wrap; align-items: center; }
.actions small { color: var(--leger); font-size: 13px; }

/* --- la fiche interactive ----------------------------------------------- */

.fiche {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(11,26,34,.04),
              0 6px 14px -6px rgba(11,26,34,.10),
              0 28px 60px -30px rgba(11,26,34,.30);
  overflow: hidden;
}
.fiche .barre {
  display: flex; align-items: center; gap: 6px;
  padding: 10px var(--e4); background: var(--creux);
  border-bottom: 1px solid var(--trait);
}
.fiche .barre b {
  font-family: var(--texte); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--leger);
}
.fiche .barre .pastilles { margin-left: auto; display: flex; gap: 5px; }
.fiche .barre .pastilles i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--trait); display: block;
}

/* Les onglets de la fiche de spécialité.
   À quatre spécialités ils se partageaient la largeur ; à dix, se la partager
   donnerait dix colonnes de six caractères où « Chirurgie dentaire » tiendrait
   sur quatre lignes. Ils défilent donc horizontalement, chacun à sa largeur
   naturelle — et c'est le bon geste ici : le nombre d'onglets EST l'argument
   de la page, il ne faut pas le cacher derrière un menu. */
.onglets {
  display: flex; border-bottom: 1px solid var(--trait);
  overflow-x: auto; scrollbar-width: none;
  /* Le défilement s'arrête sur un onglet entier, jamais au milieu d'un mot. */
  scroll-snap-type: x proximity;
}
.onglets::-webkit-scrollbar { display: none; }
/* Le fondu du bord droit. Sans lui, le dernier onglet est coupé net et se lit
   comme un défaut d'affichage plutôt que comme « il y en a d'autres » — or
   c'est justement le nombre de spécialités qui porte l'argument de la page.
   Le masque disparaît quand la bande est arrivée au bout : « animation-timeline »
   suit le défilement, sans une ligne de script. */
.onglets {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  animation: devoiler-la-fin linear;
  animation-timeline: scroll(self inline);
}
@keyframes devoiler-la-fin {
  to {
    -webkit-mask-image: linear-gradient(to right, #000 100%, #000);
            mask-image: linear-gradient(to right, #000 100%, #000);
  }
}
/* Là où « animation-timeline » n'existe pas, le fondu reste en place : il
   suggère un peu à tort qu'il reste des onglets à la fin, ce qui coûte moins
   cher qu'un dernier onglet tranché net. */
.onglets button {
  flex: 0 0 auto; padding: 13px 14px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--attenue);
  white-space: nowrap; scroll-snap-align: start;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.fiche .corps { padding: var(--e5); }
.fiche .identite {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--e4); padding-bottom: var(--e3); border-bottom: 1px solid var(--trait);
}
.fiche .identite b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; }
.fiche .identite span { font-family: var(--chiffres); font-size: 12px; color: var(--attenue); }

.bloc { margin-top: var(--e5); }
.bloc h4 {
  font-family: var(--texte); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--accent);
  margin-bottom: var(--e3);
}

/* Ligne de conduite pointillée : le geste d'un imprimé, pas d'un tableau. */
.champs { display: grid; gap: 9px; }
.champs div { display: flex; align-items: baseline; gap: var(--e2); font-size: 14.5px; }
.champs .cle { flex: 0 1 auto; }
.champs .conduite {
  flex: 1 1 auto; height: 1px; margin-bottom: 4px;
  background-image: linear-gradient(to right, var(--trait) 0 2px, transparent 2px 5px);
  background-size: 5px 1px; background-repeat: repeat-x;
}
.champs .val {
  flex: 0 0 auto; font-family: var(--chiffres); font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--attenue);
}
.champs .val.hors { color: var(--signal); font-weight: 600; }
.champs .val.hors::after {
  content: "H"; margin-left: 6px; padding: 1px 4px; border-radius: 2px;
  background: var(--signal-p); font-size: 10px; letter-spacing: .04em;
}

.note {
  margin-top: var(--e5); font-size: 13.5px; line-height: 1.55; color: var(--attenue);
  border-left: 2px solid var(--accent); padding: 2px 0 2px var(--e3);
}

/* --- sections ----------------------------------------------------------- */

section { padding: var(--e9) 0; }
section.creuse { background: var(--creux); }
section.sombre {
  background: var(--profond); color: #DCEBEE;
}
section.sombre h2 { color: #fff; }
section.sombre .oeil { color: #4FBEC5; }
section.sombre p { color: #9CB6BC; }
section.sombre .reglure::before { background: #1B3A41; }
section.sombre .reglure > .numero { color: #4FBEC5; }
section.sombre .carte {
  background: #0C2A31; border-color: #17414A;
}
section.sombre .carte p { color: #93AFB6; }

.intro { max-width: 62ch; margin-bottom: var(--e8); }
.intro h2 { margin-top: var(--e3); }
.intro p { color: var(--attenue); margin-top: var(--e4); font-size: 19px; }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: var(--e5); }
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 4px;
  padding: var(--e5) var(--e5) var(--e6);
  border-top: 3px solid var(--accent);
  transition: box-shadow .2s, transform .2s;
}
.carte:hover { box-shadow: 0 14px 30px -18px rgba(6,22,29,.45); transform: translateY(-3px); }
.carte h3 { margin-bottom: var(--e3); }
.carte p { color: var(--attenue); font-size: 15.5px; }

.sequence { display: grid; gap: var(--e7); }
.sequence .reglure { padding-bottom: var(--e2); }
.sequence h3 { margin-bottom: var(--e2); }
.sequence p { color: var(--attenue); font-size: 15.5px; max-width: 62ch; }
code {
  font-family: var(--chiffres); font-size: .88em; padding: 1px 5px;
  background: var(--accent-p); border-radius: 2px; color: var(--accent);
}
section.sombre code { background: #10343B; color: #6FD0D6; }

/* --- les chiffres ------------------------------------------------------- */

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: var(--e6) var(--e5); }
.chiffres div { border-top: 2px solid var(--accent); padding-top: var(--e3); }
.chiffres b {
  display: block; font-family: var(--chiffres); font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.chiffres span { display: block; font-size: 14px; color: var(--attenue); margin-top: 4px; }

/* --- l'ordonnance imprimée ---------------------------------------------- */

.ordonnance {
  background: var(--surface); border: 1px solid var(--trait);
  padding: var(--e6) var(--e7); border-radius: 3px;
  box-shadow: 0 20px 44px -26px rgba(11,26,34,.4);
  font-size: 14.5px; max-width: 460px;
}
.ordonnance .tete { border-bottom: 1px solid var(--trait); padding-bottom: var(--e3); }
.ordonnance .tete b { font-size: 15px; }
.ordonnance .tete span { display: block; font-size: 12px; color: var(--leger); }
.ordonnance h4 { font-size: 22px; margin: var(--e5) 0 var(--e2); }
.ordonnance .qui { font-size: 13px; color: var(--attenue); margin-bottom: var(--e5); }
.ordonnance .ligne { margin-bottom: var(--e4); }
.ordonnance .ligne b { display: block; }
.ordonnance .ligne .dci { font-size: 12px; color: var(--leger);
                          text-transform: uppercase; letter-spacing: .05em; }
.ordonnance .ligne .pos { font-size: 13.5px; color: var(--attenue); }
.ordonnance .ns { font-size: 12px; color: var(--signal); }
.ordonnance .signe { text-align: right; margin-top: var(--e6);
                     font-family: var(--display); font-size: 15px; }

/* --- appel -------------------------------------------------------------- */

.appel { background: var(--profond); color: #E6F2F4; text-align: center; }
.appel h2 { color: #fff; }
.appel p { color: #9CB6BC; margin-top: var(--e4); font-size: 18px; }
.appel .actions { justify-content: center; margin-top: var(--e7); }
.appel .bouton.creux { color: #E6F2F4; border-color: #1E464D; }
.appel .bouton.creux:hover { background: #0E2F36; }

/* --- le pied de page ------------------------------------------------------
   Il ferme la page sur le NOIR VERT, un cran sous la section d'appel qui le
   précède : deux fonds sombres identiques se seraient soudés en un seul bloc,
   et l'appel à l'action aurait perdu ses limites.
   ------------------------------------------------------------------------- */
footer {
  background: var(--nuit); color: #8FA9A0; font-size: 14px;
  padding: var(--e8) 0 var(--e5);
}
footer .large {
  display: grid; gap: var(--e7);
  grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr;
  align-items: start;
}
footer h3 {
  font-family: var(--texte); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--accent-vif);
  margin: 0 0 var(--e4);
}
footer p { margin: 0 0 var(--e3); line-height: 1.6; }
footer b { color: #D5E6E0; font-weight: 600; }
footer a { color: #B9CFC7; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }

.pied-marque .marque { color: #fff; margin-bottom: var(--e4); }
.pied-marque .marque span { color: var(--accent-vif); }
.pied-marque .marque img { width: 40px; height: 40px; }
.pied-marque p { max-width: 34ch; margin-bottom: var(--e5); }
.pied-marque .bouton { font-size: 14px; padding: 11px 18px; }

.pied-liens { display: flex; flex-direction: column; }
.pied-liens > a { padding: 3px 0; }

footer .large.pied-bas {
  /* « footer .large » est une grille de quatre colonnes, et sa spécificité —
     un élément plus une classe — l'emportait sur « .pied-bas » seule : la
     ligne du bas se rangeait dans la grille, et la mention de droite
     atterrissait dans la deuxième colonne au lieu de la marge. */
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin-top: var(--e8); padding-top: var(--e4);
  border-top: 1px solid #14261F; font-size: 13px; color: #6B857C;
}
footer .pousse { margin-left: auto; text-align: right; }

@media (max-width: 940px) {
  :root { --marge: 40px; }
  .ouverture { padding: var(--e8) 0 var(--e7); }
  .ouverture .large { grid-template-columns: 1fr; gap: var(--e7); }
  .large, .etroit { width: calc(100% - 32px); }
  .devanture nav a:not(.bouton) { display: none; }
  section { padding: var(--e8) 0; }
  .ordonnance { padding: var(--e5); }
  footer .large { grid-template-columns: 1fr 1fr; gap: var(--e6); }
  footer .pousse { margin-left: 0; text-align: left; }
}

/* ===========================================================================
   VISUELS

   Tout est dessiné en SVG, rien n'est photographié. Trois raisons :
   une photo de banque d'images ment sur le produit, un cliché médical réel
   pose une question de consentement qu'on n'a pas à poser pour une page de
   vente, et un dessin se recolore avec le thème.
   =========================================================================== */

.visuel { border-radius: 5px; overflow: hidden; }

/* --- la visionneuse : cadre sombre, image, vignettes ---------------------- */

.visionneuse {
  background: #050D10; border: 1px solid #17414A; border-radius: 5px;
  overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.85);
}
.visionneuse .hud {
  display: flex; align-items: center; gap: var(--e4);
  padding: 9px var(--e4); border-bottom: 1px solid #143137;
  font-family: var(--chiffres); font-size: 11px; color: #6E939C;
  letter-spacing: .03em;
}
.visionneuse .hud .actif { color: #4FBEC5; }
.visionneuse .hud .pousse { margin-left: auto; }
.visionneuse .image { display: block; width: 100%; height: auto; background: #000; }
.visionneuse .vignettes {
  display: flex; gap: 6px; padding: var(--e3) var(--e4);
  border-top: 1px solid #143137; overflow-x: auto;
}
.visionneuse .vignettes span {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 3px;
  border: 1px solid #1B4048; overflow: hidden;
}
.visionneuse .vignettes span:first-child { border-color: #4FBEC5; }
.visionneuse .vignettes svg { display: block; width: 100%; height: 100%; }

/* --- la courbe de croissance -------------------------------------------- */

.courbe {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 5px;
  padding: var(--e5);
}
.courbe .tete { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e4); }
.courbe .tete b { font-family: var(--display); font-size: 17px; }
.courbe .tete span { font-family: var(--chiffres); font-size: 12px; color: var(--attenue); }
.courbe .tete .pousse { margin-left: auto; }
.courbe svg { display: block; width: 100%; height: auto; }
.courbe .legende {
  display: flex; gap: var(--e4); margin-top: var(--e3);
  font-size: 12px; color: var(--leger);
}
.courbe .legende i {
  display: inline-block; width: 18px; height: 2px; margin-right: 6px;
  vertical-align: middle; border-radius: 1px;
}

/* --- la colonne d'agenda ------------------------------------------------- */

.agenda {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 5px;
  padding: var(--e4); font-size: 13px;
}
.agenda .jour {
  font-family: var(--texte); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--leger);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--trait);
}
.agenda .creneau {
  display: grid; grid-template-columns: 46px 3px 1fr auto; gap: var(--e3);
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--trait);
}
.agenda .creneau:last-child { border-bottom: 0; }
.agenda .h { font-family: var(--chiffres); font-size: 12px; color: var(--attenue); }
.agenda .filet { align-self: stretch; border-radius: 2px; background: var(--accent); }
.agenda .creneau.libre .filet { background: var(--trait); }
.agenda .creneau.hors .filet { background: var(--signal); }
.agenda .qui b { display: block; font-size: 13.5px; }
.agenda .qui span { font-size: 11.5px; color: var(--leger); }
.agenda .marque {
  font-family: var(--chiffres); font-size: 10px; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; background: var(--accent-p); color: var(--accent);
}
.agenda .creneau.hors .marque { background: var(--signal-p); color: var(--signal); }
.agenda .creneau.libre .qui b { color: var(--leger); font-weight: 400; }
.agenda .creneau.libre .marque { background: transparent; color: var(--leger); }

/* --- le schéma corporel -------------------------------------------------- */

.corporel {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 5px;
  padding: var(--e5); display: grid; grid-template-columns: 1fr 1.15fr;
  gap: var(--e5); align-items: center;
}
.corporel svg { display: block; width: 100%; height: auto; max-height: 260px; }
.corporel h4 { font-size: 17px; margin-bottom: var(--e2); }
.corporel p { font-size: 14px; color: var(--attenue); }
.corporel .lesion { font-family: var(--chiffres); font-size: 12px; color: var(--attenue);
                    margin-top: var(--e3); }
.corporel .lesion b { color: var(--signal); }

.deux-colonnes {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e7); align-items: center;
}
@media (max-width: 940px) {
  .deux-colonnes, .corporel { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PHOTOGRAPHIES

   Téléchargées et servies avec le site, jamais chargées depuis un CDN : une
   page qui appelle un serveur tiers lui signale, à chaque visite, qu'un
   médecin la consulte. Elles portent leurs dimensions pour que rien ne saute
   au chargement, et « lazy » pour ne pas les charger avant d'être vues.
   =========================================================================== */

.bande {
  position: relative; overflow: hidden;
  height: clamp(240px, 34vw, 400px);
  background: var(--profond);
}
.bande img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Un voile, sinon le texte se pose sur ce que la photo veut bien lui offrir. */
.bande::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
      rgba(7,32,38,.94) 0%, rgba(7,32,38,.80) 42%, rgba(7,32,38,.28) 100%);
}
.bande .propos {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.bande .propos p {
  font-family: var(--display); font-size: clamp(21px, 2.9vw, 32px);
  line-height: 1.24; color: #fff; max-width: 22ch; letter-spacing: -.015em;
}
.bande .propos span {
  display: block; margin-top: var(--e4); font-size: 15px; color: #9CB6BC;
  max-width: 44ch;
}

.figure { border-radius: 5px; overflow: hidden; border: 1px solid var(--trait); }
.figure img { display: block; width: 100%; height: auto; }

.appel { position: relative; overflow: hidden; }
.appel .fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18; filter: grayscale(.35);
}
.appel .etroit { position: relative; z-index: 2; }

.credit {
  font-size: 12px; color: var(--leger); margin-top: var(--e5);
}

/* ===========================================================================
   CONTRASTE

   La page alterne clair et sombre au lieu de flotter dans un blanc uniforme,
   et l'accent occupe un bloc entier plutôt que des filets.
   =========================================================================== */

/* --- l'ouverture, sur fond d'encre -------------------------------------- */

.ouverture {
  position: relative; overflow: hidden;
  background: var(--nuit); color: #EAF4F6;
  padding: var(--e10) 0 var(--e9);
}
.ouverture .fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .22; filter: grayscale(.5) contrast(1.1);
}
.ouverture::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 40%,
      rgba(3,16,21,.96) 0%, rgba(3,16,21,.86) 45%, rgba(3,16,21,.62) 100%);
}
.ouverture .large { position: relative; z-index: 2; }
.ouverture h1 { color: #fff; }
.ouverture h1 em { color: var(--accent-vif); font-style: normal; }
.ouverture .oeil { color: var(--accent-vif); }
.ouverture .chapeau { color: #B9CDD4; }
.ouverture .actions small { color: #7E98A1; }
.ouverture .bouton.creux { color: #EAF4F6; border-color: #2A5058; }
.ouverture .bouton.creux:hover { background: #0C272E; }

/* La devanture reste lisible au-dessus de l'encre puis du papier. */
.devanture { border-bottom-color: var(--trait); }

/* --- le bloc des chiffres, en pleine couleur ---------------------------- */

/* Les teintes de cette section étaient écrites en dur, et en CYAN : elles
   dataient de l'ancien accent sarcelle. Sous un accent vert elles juraient,
   et en thème sombre elles auraient posé du blanc sur du vert menthe. Elles
   suivent maintenant l'accent, par ses deux jetons. */
section.accent { background: var(--accent); color: var(--sur-accent); }
section.accent h2 { color: var(--sur-accent); }
section.accent .oeil { color: var(--sur-accent-doux); }
section.accent .intro p { color: var(--sur-accent-doux); }
section.accent .chiffres div { border-top-color: var(--sur-accent-doux); }
section.accent .chiffres b { color: var(--sur-accent); }
section.accent .chiffres span { color: var(--sur-accent-doux); }

/* --- séparateur entre deux sections claires ----------------------------- */

section.creuse { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }

/* --- le diaporama des écrans ---------------------------------------------
   Une bande qui défile horizontalement, avec accrochage. Le choix compte :
   une pile d'images superposées ne se lit plus si le script ne s'exécute pas,
   et l'on se retrouve avec quinze captures empilées ou une seule visible sans
   moyen d'en changer. Ici, la page sans JavaScript reste un diaporama : on
   fait glisser au doigt, on parcourt au clavier, la vue s'aligne d'elle-même.
   ------------------------------------------------------------------------- */
section.ecrans { background: var(--profond); color: #CFE2E6; overflow: hidden; }
section.ecrans h2 { color: #fff; }
section.ecrans .oeil { color: var(--accent-vif); }
section.ecrans .intro p { color: #9DB6BD; }
section.ecrans .intro b { color: #fff; font-weight: 600; }

.diaporama { position: relative; margin-top: var(--e7); }

.bande-vues {
  /* Les vues ne s'étirent PAS à la hauteur de la plus grande : une capture
     d'écran de bureau large de 1600 et une capture de téléphone haute de 2400
     n'ont rien à voir, et l'alignement étiré laissait un demi-écran de vide
     sous les légendes courtes. */
  display: flex; align-items: flex-start; gap: var(--e5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scroll-padding-inline: var(--marge);
  padding: var(--e2) var(--marge) var(--e6);
  /* La barre de défilement du système traverse la bande sombre d'un gris
     clair : on la masque, la position étant déjà donnée par les pastilles. */
  scrollbar-width: none;
}
.bande-vues::-webkit-scrollbar { display: none; }
.bande-vues:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 4px; }

.bande-vues figure {
  flex: 0 0 min(920px, 82vw); margin: 0; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--e4);
}
.bande-vues img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  background: #fff;
  /* Une capture d'interface claire posée sur un fond très sombre flotte sans
     bord. Le liseré la pose, l'ombre lui donne son épaisseur. */
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.bande-vues figcaption { display: flex; flex-direction: column; gap: var(--e2); }
.bande-vues figcaption b {
  font-family: var(--display); font-size: 21px; font-weight: 600; color: #fff;
  letter-spacing: -.01em;
}
.bande-vues figcaption span {
  font-size: 15px; line-height: 1.55; color: #9DB6BD;
  max-width: 62ch;
}

/* Le téléphone : une capture verticale n'a pas à occuper la largeur d'un
   écran de bureau — elle serait haute de deux mille pixels. */
.bande-vues figure.telephone { flex-basis: min(300px, 56vw); align-items: center; }
.bande-vues figure.telephone img {
  border-radius: 22px;
  /* Sa hauteur est bornée à celle d'une capture de bureau : sans cela, une
     seule vue verticale étirait la section entière de mille pixels. */
  height: min(540px, 58vh); width: auto;
}
.bande-vues figure.telephone figcaption { align-self: stretch; }

/* --- ce que le script ajoute --------------------------------------------- */
.diaporama .fleche {
  position: absolute; top: calc(50% - 90px); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .93); color: var(--profond);
  border: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  font-size: 20px; line-height: 1;
}
.diaporama .fleche:hover { background: #fff; }
.diaporama .fleche:disabled { opacity: 0; pointer-events: none; }
.diaporama .fleche.avant { left: 12px; }
.diaporama .fleche.apres { right: 12px; }

.diaporama .pastilles {
  display: flex; justify-content: center; gap: var(--e2);
  flex-wrap: wrap; padding-bottom: var(--e6);
}
.diaporama .pastilles button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .28);
}
.diaporama .pastilles button[aria-current="true"] {
  background: var(--accent-vif); transform: scale(1.35);
}
.diaporama .compteur {
  text-align: center; font-family: var(--chiffres); font-size: 12px;
  color: #6E8C95; padding-bottom: var(--e6);
}

@media (max-width: 900px) {
  .bande-vues { scroll-padding-inline: 16px; padding-inline: 16px; }
  .bande-vues figure { flex-basis: 88vw; }
  .bande-vues figure.telephone { flex-basis: 62vw; }
  .diaporama .fleche { display: none; }   /* le doigt suffit */
}

@media (prefers-reduced-motion: reduce) {
  .bande-vues { scroll-behavior: auto; }
}

/* --- la page de demande de démonstration ----------------------------------
   Deux colonnes : la raison de remplir à gauche, le formulaire à droite. Un
   formulaire seul sur une page blanche ressemble à un péage ; à côté de ce
   qu'il ouvre, il ressemble à une porte. Sous 900 px la colonne d'arguments
   passe AU-DESSUS et non en dessous : sur un téléphone, on décide de remplir
   avant de voir les champs, pas après.
   ------------------------------------------------------------------------- */
.demande { padding-block: var(--e8, 64px) var(--e9, 96px); }
.demande .large {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--e7, 48px); align-items: start;
}
.demande h1 { margin-top: var(--e3); }
.demande .chapeau { margin-top: var(--e4); }

.atouts { list-style: none; padding: 0; margin-top: var(--e6, 32px); display: grid; gap: var(--e4); }
.atouts li {
  padding-left: var(--e5); border-left: 2px solid var(--accent);
  color: var(--attenue); font-size: 15.5px; line-height: 1.55;
}
.atouts li b { display: block; color: var(--encre); font-size: 16px; margin-bottom: 2px; }

.formulaire {
  background: var(--surface); border: 1px solid var(--trait); border-radius: 4px;
  padding: var(--e6, 32px);
}
.formulaire h2 { font-size: 22px; margin-bottom: var(--e5); }

.paire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); }
.champ { display: block; margin-bottom: var(--e4); }
.champ label { display: block; font-size: 13px; font-weight: 600; color: var(--attenue);
               margin-bottom: 6px; }
/* L'astérisque d'obligation porte son sens dans « title », et le lecteur
   d'écran l'annonce ; la bordure du champ ne suffirait pas. */
.champ abbr { color: var(--accent); text-decoration: none; border: 0; }

.champ input, .champ select, .champ textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px; font: inherit; font-size: 15px;
  color: var(--encre); background: var(--papier);
  border: 1px solid var(--trait); border-radius: 3px;
}
.champ textarea { resize: vertical; min-height: 76px; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* Le navigateur peint lui-même les champs invalides APRÈS une tentative
   d'envoi. On ne l'anticipe pas : un champ rouge avant qu'on y ait touché
   accuse quelqu'un qui n'a encore rien fait. */
.champ input:user-invalid, .champ select:user-invalid {
  border-color: #B4232A;
}
.champ .aide { display: block; margin-top: 6px; font-size: 12.5px; color: var(--leger); }

/* Le piège à robots. Il sort du flux SANS « display:none » ni
   « visibility:hidden » : plusieurs automates savent lire ces deux-là et
   sautent le champ. Une position hors écran se remplit, elle. */
.piege {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.envoi { margin-top: var(--e5); }
.envoi .bouton { width: 100%; justify-content: center; }
.envoi .bouton[disabled] { opacity: .55; cursor: progress; }

.reponse {
  margin-top: var(--e4); padding: 12px 14px; border-radius: 3px;
  font-size: 14.5px; line-height: 1.5;
}
.reponse.attente { color: var(--leger); }
.reponse.reussi  { color: var(--accent); background: var(--sur-accent-doux); }
.reponse.rate    { color: #B4232A; background: color-mix(in srgb, #B4232A 8%, transparent); }

.mentions { margin-top: var(--e5); font-size: 12.5px; color: var(--leger); line-height: 1.55; }
.mentions a { color: inherit; }

@media (max-width: 900px) {
  .demande .large { grid-template-columns: 1fr; }
  .paire { grid-template-columns: 1fr; }
}

/* Le sous-titre de la page de demande : il dit le geste, quand le titre dit
   la promesse. Deux niveaux, parce qu'une page de formulaire doit répondre à
   « pourquoi » avant « quoi faire ». */
.sous-titre {
  margin-top: var(--e3); font-family: var(--display);
  font-size: 21px; color: var(--accent); line-height: 1.3;
}