/* Le site public d'inspire. — une seule feuille pour toutes les pages.
   La CSP de ces pages refuse tout style en ligne, tout script et toute
   ressource extérieure : tout le rendu passe donc par ces classes, et les
   polices sont des piles de secours (aucun @font-face, aucun Google Fonts). */

:root {
  --police-titre: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --police-marque: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fond: #F3F4F8;
  --encre: #14142B;
  --encre-douce: #4A4B63;
  --discret: #5E6079;
  --gris: #8A8CA6;
  --bord: #DCDEEA;
  --bord-fort: #C9CBDB;
  --carte: #FFFFFF;
  --carte-douce: #F7F7FB;
  --accent: #3A3FD9;
  --accent-pale: #ECEDFB;
  --lien-survol: #14142B;
  --bouton: #3A3FD9;
  --bouton-survol: #2D31B8;
  --sur-bouton: #FFFFFF;
  --ombre: 0 18px 48px rgba(20, 20, 43, 0.10);

  /* Les bandeaux « nuit » restent sombres dans les deux thèmes. */
  --nuit: #14142B;
  --nuit-texte: #F1F2FA;
  --nuit-doux: #C6C8DC;
  --nuit-discret: #A9ABC4;
  --nuit-carte: #1E1E3A;
  --nuit-bord: #2E2E52;
  --nuit-accent: #9FA4FF;
  --nuit-lien: #B9BCFF;
  --vert: #5BD69B;
  --vert-terminal: #7BE0A8;

  --erreur-fond: #FDEDED;
  --erreur-bord: #E8A3A3;
  --erreur-texte: #6B1414;

  --halo-logo: none;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0D0F22;
    --encre: #ECEDF8;
    --encre-douce: #B6B8D2;
    --discret: #9A9CB8;
    --gris: #7E80A0;
    --bord: #2A2D4E;
    --bord-fort: #3B3F66;
    --carte: #161931;
    --carte-douce: #1C1F3C;
    --accent: #A3A7FF;
    --accent-pale: #262A55;
    --lien-survol: #FFFFFF;
    --bouton: #4F55E8;
    --bouton-survol: #6268F2;
    --sur-bouton: #FFFFFF;
    --ombre: 0 18px 48px rgba(0, 0, 0, 0.45);

    --nuit: #070819;
    --nuit-carte: #12142C;
    --nuit-bord: #2A2D52;

    --erreur-fond: #3A1518;
    --erreur-bord: #8A3A40;
    --erreur-texte: #FFD9DB;

    /* L'infini violet se perdrait sur le bleu nuit : un halo léger le détache. */
    --halo-logo: drop-shadow(0 0 10px rgba(163, 167, 255, 0.35));
  }
}

/* ---------- Socle ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); }
a:hover { color: var(--lien-survol); }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, p, ul, ol, dl, figure { margin: 0; }

.lien-evitement {
  position: absolute;
  left: -10000px;
  top: 8px;
  background: var(--carte);
  color: var(--encre);
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 10;
}
.lien-evitement:focus { left: 8px; }

/* ---------- Mise en page ---------- */

.enveloppe {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.enveloppe-etroite { max-width: 900px; }

.colonne { display: flex; flex-direction: column; }
.rangee { display: flex; flex-wrap: wrap; }
.centre-v { align-items: center; }
.haut { align-items: flex-start; }
.bas { align-items: flex-end; }
.etire { align-items: stretch; }

.e6 { gap: 6px; }
.e8 { gap: 8px; }
.e10 { gap: 10px; }
.e12 { gap: 12px; }
.e14 { gap: 14px; }
.e16 { gap: 16px; }
.e18 { gap: 18px; }
.e20 { gap: 20px; }
.e24 { gap: 24px; }
.e28 { gap: 28px; }
.e32 { gap: 32px; }
.e36 { gap: 36px; }
.e40 { gap: 40px; }
.e48 { gap: 48px; }

/* Les proportions des colonnes de la proposition (flex: grow shrink base). */
.col-principale { flex: 999 1 560px; min-width: 0; }
.col-principale-520 { flex: 999 1 520px; min-width: 0; }
.col-280 { flex: 1 1 280px; }
.col-300 { flex: 1 1 300px; }
.col-360 { flex: 1 1 360px; }
.col-380 { flex: 1 1 380px; }
.col-420 { flex: 1 1 420px; min-width: 0; }
.col-440 { flex: 1 1 440px; min-width: 0; }
.fixe { flex: 0 0 auto; }

.section { padding-top: 0; padding-bottom: 96px; }
.section-72 { padding-bottom: 72px; }
.section-tete { padding-top: 72px; padding-bottom: 48px; }

.depart { align-self: flex-start; }
.section-temps { padding-top: 88px; padding-bottom: 72px; }
.section-invitation { padding-top: 72px; padding-bottom: 96px; }
.liste-nue { list-style: none; padding: 0; }

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
}
.marque:hover { color: var(--encre); }
.marque img { width: 50px; height: auto; display: block; filter: var(--halo-logo); }

.marque-nom {
  font-family: var(--police-marque);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.01em;
}

.nav-principale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 15px;
  flex: 1 1 auto;
}
.nav-principale a { text-decoration: none; color: var(--encre-douce); }
.nav-principale a:hover { color: var(--encre); }
.nav-principale a[aria-current="page"] { color: var(--encre); font-weight: 600; }

.entete-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.lien-connexion {
  text-decoration: none;
  color: var(--encre);
  font-size: 15px;
  padding: 10px 12px;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  text-decoration: none;
  background: var(--bouton);
  color: var(--sur-bouton);
  font: inherit;
  font-weight: 600;
  padding: 15px 24px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.bouton:hover { background: var(--bouton-survol); color: var(--sur-bouton); }
.bouton-petit { font-size: 15px; padding: 11px 18px; }
.bouton-large { padding: 16px 26px; }

.bouton-secondaire {
  display: inline-block;
  text-decoration: none;
  color: var(--encre);
  padding: 15px 22px;
  border-radius: 8px;
  border: 1px solid var(--bord-fort);
  background: var(--carte);
}
.bouton-secondaire:hover { color: var(--encre); border-color: var(--encre-douce); }

.lien-fort { text-decoration: none; font-weight: 600; }

/* ---------- Typographie ---------- */

.surtitre {
  font-family: var(--police-mono);
  font-size: 14px;
  color: var(--accent);
}
.etiquette {
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
}

.titre-hero, .titre-page, .titre-section, .titre-moyen, .titre-bloc, .titre-carte, .titre-rubrique, .phrase-appel {
  font-family: var(--police-titre);
  font-weight: 700;
}

.titre-hero {
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.titre-page {
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 900px;
  text-wrap: balance;
}
.titre-page-large { max-width: 960px; }
.titre-page-72 { font-size: clamp(42px, 5.4vw, 72px); }
.titre-section {
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.titre-moyen {
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.titre-rubrique {
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.titre-bloc {
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.titre-bloc-gras { font-weight: 700; }
.titre-carte {
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.titre-30 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; }
.phrase-appel {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.chapo { max-width: 640px; color: var(--encre-douce); font-size: 20px; }
.chapo-580 { max-width: 580px; }
.chapo-560 { max-width: 560px; }
.chapo-620 { max-width: 620px; }
.chapo-660 { max-width: 660px; }
.texte-doux { color: var(--encre-douce); }
.texte-19 { font-size: 19px; }
.texte-18 { font-size: 18px; }
.texte-15 { font-size: 15px; }
.bloc-titre { max-width: 760px; }

/* ---------- Héros de l'accueil ---------- */

.hero { padding-top: 72px; padding-bottom: 56px; }
.hero-image { flex: 1 1 360px; display: flex; justify-content: center; }
.hero-image img { width: min(440px, 100%); height: auto; filter: var(--halo-logo); }

/* ---------- Captures ---------- */

.capture { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cadre {
  border: 1px solid var(--bord);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: var(--ombre);
}
.cadre img { display: block; width: 100%; height: auto; }
.legende { font-family: var(--police-mono); font-size: 13px; color: var(--discret); }

.capture-dictee { flex: 1 1 520px; max-width: 860px; }
.capture-moitie { flex: 1 1 420px; }
.capture-pleine { flex: 1 1 100%; }
.capture-appareils { flex: 1 1 420px; max-width: 560px; }
.capture-ouverture { max-width: 360px; }

.apercu { padding-top: 8px; padding-bottom: 88px; }

.rangee-captures { padding-top: 8px; }

/* ---------- Appareils et scènes animées ----------
   Les captures sont posées DANS des appareils dessinés ici (génériques : aucune
   marque, aucune forme déposée), et le graphe, les relations, le dessin au
   stylet et la biométrie sont des SVG animés par cette feuille seule — la CSP
   du site refuse tout script et tout style en ligne. Chaque écran garde le
   rapport d'aspect de sa capture : rien n'est déformé ni rogné. Sous « mouvement
   réduit », tout s'arrête sur l'état final (le dessin fini, les liens tracés,
   les notes ouvertes). Les délais de chaque élément, et le parcours du stylet,
   sont calculés (fin de cette section), pas écrits à la main. */

:root {
  --cadre-appareil: #121318;
  --bord-appareil: #3A3D48;
  --alu-haut: #E4E6EC;
  --alu-bas: #C9CCD6;
  --ombre-sol: rgba(20, 20, 43, 0.22);
  --ombre-appareil: 0 24px 50px rgba(20, 20, 43, 0.18), 0 6px 14px rgba(20, 20, 43, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bord-appareil: #4A4E5E;
    --alu-haut: #A9ADBA;
    --alu-bas: #80848F;
    --ombre-sol: rgba(0, 0, 0, 0.55);
    --ombre-appareil: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

.ecran { display: block; width: 100%; height: auto; }

/* La scène produit de l'accueil : l'ordinateur au fond, la tablette et le
   téléphone devant. Tout est en pourcentage de la largeur de la scène, si
   bien qu'elle se réduit d'un bloc, sans défilement. */
.scene-produit { display: flex; flex-direction: column; gap: 22px; }
.scene { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 100 / 71; }
.scene::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -2.5%;
  height: 7%;
  background: radial-gradient(closest-side, var(--ombre-sol), transparent);
  z-index: 0;
}
.scene > div { position: absolute; z-index: 1; }
.scene .app-ordinateur { left: 17%; top: 0; width: 66%; }
.scene .app-tablette { left: 1%; bottom: 0; width: 35%; z-index: 2; }
.scene .app-telephone { right: 3%; bottom: 0; width: 12.5%; z-index: 3; }
.scene-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; text-align: center; }

/* L'écran de bureau : une vitre noire à bord fin, un menton d'aluminium sans
   aucun signe, un pied droit et sa platine. */
.ordinateur-corps {
  background: linear-gradient(var(--alu-haut), var(--alu-bas));
  border-radius: 14px;
  padding-bottom: 6.5%;
  box-shadow: var(--ombre-appareil);
}
.ordinateur-vitre {
  background: var(--cadre-appareil);
  border-radius: 14px 14px 0 0;
  padding: 1.3%;
  box-shadow: inset 0 0 0 1px var(--bord-appareil);
}
.ordinateur-vitre .ecran { border-radius: 3px; }
/* Le fût (::before, découpé en trapèze) et la platine (::after) : deux pseudo-
   éléments, pour que la découpe du fût ne rogne pas la platine qui le déborde. */
.ordinateur-pied { position: relative; width: 17%; margin: 0 auto; padding-top: 8.5%; }
.ordinateur-pied::before {
  content: "";
  position: absolute;
  inset: 0 0 8% 0;
  background: linear-gradient(90deg, var(--alu-bas), var(--alu-haut) 45%, var(--alu-bas));
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.ordinateur-pied::after {
  content: "";
  position: absolute;
  left: -35%;
  right: -35%;
  bottom: 0;
  height: 12%;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(var(--alu-haut), var(--alu-bas));
  box-shadow: 0 6px 12px var(--ombre-sol);
}

/* La tablette : un cadre fin, des coins arrondis, l'écran à fleur. */
.tablette-cadre {
  position: relative;
  background: var(--cadre-appareil);
  padding: 2.4%;
  border-radius: 5% / 6.6%;
  box-shadow: inset 0 0 0 2px var(--bord-appareil), var(--ombre-appareil);
}
.tablette-cadre .ecran { border-radius: 1.6% / 2.1%; }
.tablette-ecran { position: relative; }

/* Le téléphone : des coins très arrondis, un îlot de caméra discret, logé dans
   le haut du cadre pour ne rien cacher de la capture. */
.telephone-cadre {
  position: relative;
  background: var(--cadre-appareil);
  padding: 10% 4% 5%;
  border-radius: 17% / 8%;
  box-shadow: inset 0 0 0 2px var(--bord-appareil), var(--ombre-appareil);
}
.telephone-cadre .ecran { border-radius: 13% / 6%; }
.telephone-cadre::after {
  content: "";
  position: absolute;
  top: 1.3%;
  left: 50%;
  width: 24%;
  height: 2.1%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050507;
}

/* Un appareil seul, dans une rangée de captures. */
.capture-appareil { padding: 6px 4px 0; }
.app-seule { position: relative; width: 100%; }

/* ---------- Les scènes SVG (graphe, relations) ---------- */

.cadre-scene { background: var(--carte); line-height: 0; }
.scene-svg { display: block; width: 100%; height: auto; }
.scene-svg text { font-family: var(--police-texte); }
.capture-scene-relations { flex: 1 1 520px; max-width: 900px; margin: 0 auto; }
.rubrique-chapo { padding-top: 10px; max-width: 300px; }

/* Le graphe des notes, à l'allure de l'application : fond sombre fixe, nœuds à
   la couleur de leur thème, la note ouverte qui pulse, un flux sur les liens. */
.gr-fond { fill: #222222; }
.gr-maille { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1.5; }
.gr-arete {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  animation: trace 0.9s ease-out both;
}
/* l'opacité nulle au départ : WebKit peint sinon le bout arrondi d'un tiret encore vide */
@keyframes trace { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; } }
.gr-flux {
  fill: none;
  stroke: #4FD3FF;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 5 34;
  opacity: 0.85;
  animation: gr-flux 1.2s linear infinite, apparait 0.8s ease both;
}
@keyframes gr-flux { to { stroke-dashoffset: -39; } }
@keyframes apparait { from { opacity: 0; } }
.gr-noeud, .rl-noeud { transform-box: fill-box; transform-origin: center; animation: pop 0.55s ease-out both; }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }
.gr-halo { fill: #C3D2DA; opacity: 0.16; }
.gr-coeur { fill: var(--theme); stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; }
.th-bleu { --theme: #4C9AFF; }
.th-ambre { --theme: #E0A21B; }
.th-vert { --theme: #57B894; }
.gr-centre .gr-halo { fill: #4C9AFF; opacity: 0.3; }
.gr-centre .gr-coeur { stroke: rgba(255, 255, 255, 0.6); stroke-width: 3; }
.gr-pulse {
  fill: none;
  stroke: #4C9AFF;
  stroke-width: 2.4;
  opacity: 0.65;
  transform-box: fill-box;
  transform-origin: center;
  animation: gr-pulse 2.4s ease-out infinite;
}
@keyframes gr-pulse {
  0% { transform: scale(0.7); opacity: 0.65; }
  70% { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.scene-graphe text {
  fill: #E4EDF2;
  font-size: 22px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #222222;
  stroke-width: 6px;
  stroke-linejoin: round;
}

/* Le léger flottement des nœuds : trois rythmes, déphasés, jamais en même temps. */
.flotte { animation: flotte-1 7s ease-in-out infinite alternate; }
.flotte.f2 { animation-name: flotte-2; animation-duration: 9s; }
.flotte.f3 { animation-name: flotte-3; animation-duration: 11s; }
@keyframes flotte-1 { from { transform: translate(0, -3px); } to { transform: translate(2px, 3px); } }
@keyframes flotte-2 { from { transform: translate(-3px, 1px); } to { transform: translate(2px, -2px); } }
@keyframes flotte-3 { from { transform: translate(2px, 2px); } to { transform: translate(-2px, -3px); } }

/* Les relations entre entités : chaque flèche se trace, son prédicat apparaît,
   puis elle s'efface et se retrace à son tour (une boucle de 14 s, décalée
   d'une relation à l'autre — jamais tout d'un coup). */
.rl-fond { fill: var(--carte); }
.rl-lien {
  fill: none;
  stroke: var(--discret);
  stroke-opacity: 0.65;
  stroke-width: 2.6;
  stroke-dasharray: 1 1;
  animation: rl-trace 14s ease-in-out infinite both;
}
@keyframes rl-trace {
  0% { stroke-dashoffset: 1; opacity: 1; }
  5% { stroke-dashoffset: 0; }
  93% { stroke-dashoffset: 0; opacity: 1; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rl-flux {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 26;
  opacity: 0.55;
  animation: rl-flux 1.6s linear infinite, rl-flux-montre 14s ease infinite both;
}
@keyframes rl-flux { to { stroke-dashoffset: -30; } }
@keyframes rl-flux-montre {
  0%, 5% { opacity: 0; }
  9%, 93% { opacity: 0.55; }
  97%, 100% { opacity: 0; }
}
.rl-pred { transform-box: fill-box; transform-origin: center; animation: rl-montre 14s ease infinite both; }
@keyframes rl-montre {
  0%, 4% { opacity: 0; }
  8%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.rl-pred rect { fill: var(--carte); stroke: var(--bord-fort); stroke-width: 1.5; }
.rl-pred text { fill: var(--encre); font-size: 20px; font-weight: 600; text-anchor: middle; }
.rl-pointe { fill: var(--discret); }
.rl-noeud circle { fill: var(--type); stroke: var(--carte); stroke-width: 3; }
.rl-noeud text { fill: var(--encre); font-size: 22px; paint-order: stroke; stroke: var(--carte); stroke-width: 5px;
  stroke-linejoin: round; }
.t-individu { --type: #4C9AFF; }
.t-organisation { --type: #E0837A; }
.t-lieu { --type: #57B894; }
.t-objet { --type: #8593A0; }

/* ---------- Le dessin au stylet ----------
   Le trait se révèle sous la pointe (stroke-dashoffset, sur un tracé de
   longueur 1) pendant que le stylet suit le même tracé par des transformations
   calées sur sa longueur : les deux avancent à la même vitesse, dans les
   quatre navigateurs, sans offset-path. */
.dessin-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trait { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; stroke-dasharray: 1 1; }
.trait-plan { stroke: #1D1D1F; animation: trait-plan 10s linear infinite both; }
.trait-cercle { stroke: #C0392B; animation: trait-cercle 10s linear infinite both; }
.dessin-stylet { animation: stylet-parcours 10s linear infinite both; }
.stylet-corps { fill: #FAFAFC; stroke: #B9BCC9; stroke-width: 1.5; }
.stylet-bague { fill: #D5D8E2; }
.stylet-pointe { fill: #5E6170; }
.stylet-reflet { fill: #FFFFFF; }
.stylet-ombre { fill: #14142B; opacity: 0.06; }

/* Sur un téléphone, la scène se resserre : l'ordinateur prend la largeur, la
   tablette et le téléphone passent devant son pied, plus grands, pour rester lisibles. */
@media (max-width: 640px) {
  .scene { aspect-ratio: 100 / 128; }
  .scene-legende { flex-direction: column; align-items: center; }
  .scene .app-ordinateur { left: 3%; width: 94%; }
  .scene .app-tablette { left: 0; width: 58%; }
  .scene .app-telephone { right: 1%; width: 23%; }
  .ordinateur-corps, .ordinateur-vitre { border-radius: 9px 9px 0 0; }
  .ordinateur-corps { border-radius: 9px; }
  .scene-graphe text { font-size: 27px; stroke-width: 8px; }
  .rl-noeud text { font-size: 26px; }
  .rl-pred { transform: scale(1.12); }
}

/* Mouvement réduit : rien ne bouge, tout est à son état final. Les règles par
   élément (délais, rythmes) sont plus précises que celles-ci : d'où !important. */
@media (prefers-reduced-motion: reduce) {
  .scene-svg *, .dessin-trace *, .bio-scene * { animation: none !important; }
}

/* ---------- La biométrie, sur le téléphone ----------
   Une boucle de 6 s : l'écran verrouillé, le visage balayé par une ligne de
   lecture, la coche, le cadenas qui s'ouvre, les notes derrière ; puis le
   verrou revient, comme après cinq minutes sans geste. Sans animation, l'écran
   reste ouvert sur les notes. */
.telephone-ecran { position: relative; }
.bio-scene { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 13% / 6%; overflow: hidden; }
.bio-voile { opacity: 0; animation: bio-voile 6s ease-in-out infinite both; }
@keyframes bio-voile {
  0%, 47% { opacity: 1; transform: translateY(0); }
  57% { opacity: 0; transform: translateY(-70px); }
  86% { opacity: 0; transform: translateY(0); }
  96%, 100% { opacity: 1; transform: translateY(0); }
}
.bio-fond { fill: #14142B; }
.bio-nom { fill: #F1F2FA; font-family: var(--police-marque); font-weight: 700; font-size: 64px; text-anchor: middle; }
.bio-anse { fill: none; stroke: #E8E9F5; stroke-width: 16; stroke-linecap: round; animation: bio-anse 6s ease-in-out infinite both; }
@keyframes bio-anse {
  0%, 37% { transform: translateY(0); }
  44%, 80% { transform: translateY(-30px); }
  81%, 100% { transform: translateY(0); }
}
.bio-corps { fill: #E8E9F5; }
.bio-coins { fill: none; stroke: #9FA4FF; stroke-width: 10; stroke-linecap: round; }
.bio-visage { fill: none; stroke: #E8E9F5; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  animation: bio-visage 6s ease infinite both; }
@keyframes bio-visage { 0%, 30% { opacity: 1; } 34%, 80% { opacity: 0; } 81%, 100% { opacity: 1; } }
.bio-ligne { fill: #4FD3FF; animation: bio-ligne 6s ease-in-out infinite both; }
@keyframes bio-ligne {
  0%, 6% { opacity: 0; transform: translateY(0); }
  8% { opacity: 1; }
  19% { transform: translateY(330px); }
  29% { opacity: 1; transform: translateY(0); }
  31%, 100% { opacity: 0; transform: translateY(0); }
}
.bio-ok { transform-box: fill-box; transform-origin: center; animation: bio-ok 6s ease-out infinite both; }
.bio-ok circle { fill: #2FBF71; }
.bio-ok path { fill: none; stroke: #FFFFFF; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bio-ok {
  0%, 30% { opacity: 0; transform: scale(0.6); }
  35%, 80% { opacity: 1; transform: scale(1); }
  81%, 100% { opacity: 0; transform: scale(0.6); }
}
.bio-invite { fill: #F1F2FA; font-family: var(--police-texte); font-size: 34px; font-weight: 600; text-anchor: middle; }
.bio-repli { fill: #A9ABC4; font-family: var(--police-texte); font-size: 28px; text-anchor: middle; }
.capture-telephone-seul { flex: 0 1 300px; max-width: 300px; margin: 0 auto; }

/* Calculé (et non écrit à la main) : les délais de chaque nœud et de chaque lien, le parcours du stylet sur le tracé. */
.gr-arete.ga-0 { animation-delay: 0.85s; }
.gr-flux.ga-0 { animation-delay: 0.00s, 1.75s; }
.gr-arete.ga-1 { animation-delay: 1.15s; }
.gr-flux.ga-1 { animation-delay: 0.83s, 2.05s; }
.gr-arete.ga-2 { animation-delay: 1.15s; }
.gr-flux.ga-2 { animation-delay: 0.46s, 2.05s; }
.gr-arete.ga-3 { animation-delay: 1.45s; }
.gr-flux.ga-3 { animation-delay: 0.09s, 2.35s; }
.gr-arete.ga-4 { animation-delay: 1.75s; }
.gr-flux.ga-4 { animation-delay: 0.92s, 2.65s; }
.gr-arete.ga-5 { animation-delay: 1.75s; }
.gr-flux.ga-5 { animation-delay: 0.55s, 2.65s; }
.gr-arete.ga-6 { animation-delay: 2.05s; }
.gr-flux.ga-6 { animation-delay: 0.18s, 2.95s; }
.gr-arete.ga-7 { animation-delay: 2.05s; }
.gr-flux.ga-7 { animation-delay: 1.01s, 2.95s; }
.gr-arete.ga-8 { animation-delay: 2.35s; }
.gr-flux.ga-8 { animation-delay: 0.64s, 3.25s; }
.gr-arete.ga-9 { animation-delay: 2.35s; }
.gr-flux.ga-9 { animation-delay: 0.27s, 3.25s; }
.gr-arete.ga-10 { animation-delay: 2.35s; }
.gr-flux.ga-10 { animation-delay: 1.10s, 3.25s; }
.gr-arete.ga-11 { animation-delay: 2.65s; }
.gr-flux.ga-11 { animation-delay: 0.73s, 3.55s; }
.gr-arete.ga-12 { animation-delay: 2.65s; }
.gr-flux.ga-12 { animation-delay: 0.36s, 3.55s; }
.gr-arete.ga-13 { animation-delay: 2.65s; }
.gr-flux.ga-13 { animation-delay: 1.19s, 3.55s; }
.gr-arete.ga-14 { animation-delay: 2.65s; }
.gr-flux.ga-14 { animation-delay: 0.82s, 3.55s; }
.gr-arete.ga-15 { animation-delay: 2.65s; }
.gr-flux.ga-15 { animation-delay: 0.45s, 3.55s; }
.gn-0 { animation-delay: 0.20s; }
.fd-0 { animation-delay: -0.0s; }
.gn-1 { animation-delay: 0.50s; }
.fd-1 { animation-delay: -1.3s; }
.gn-2 { animation-delay: 0.80s; }
.fd-2 { animation-delay: -2.6s; }
.gn-3 { animation-delay: 1.10s; }
.fd-3 { animation-delay: -3.9s; }
.gn-4 { animation-delay: 1.40s; }
.fd-4 { animation-delay: -5.2s; }
.gn-5 { animation-delay: 1.70s; }
.fd-5 { animation-delay: -6.5s; }
.gn-6 { animation-delay: 2.00s; }
.fd-6 { animation-delay: -7.8s; }
.gn-7 { animation-delay: 2.30s; }
.fd-7 { animation-delay: -9.1s; }
.rl-lien.rr-0, .rl-pred.rr-0 { animation-delay: 1.90s; }
.rl-flux.rr-0 { animation-delay: 0.00s, 1.90s; }
.rl-lien.rr-1, .rl-pred.rr-1 { animation-delay: 2.60s; }
.rl-flux.rr-1 { animation-delay: 1.19s, 2.60s; }
.rl-lien.rr-2, .rl-pred.rr-2 { animation-delay: 3.30s; }
.rl-flux.rr-2 { animation-delay: 0.78s, 3.30s; }
.rl-lien.rr-3, .rl-pred.rr-3 { animation-delay: 4.00s; }
.rl-flux.rr-3 { animation-delay: 0.37s, 4.00s; }
.rl-lien.rr-4, .rl-pred.rr-4 { animation-delay: 4.70s; }
.rl-flux.rr-4 { animation-delay: 1.56s, 4.70s; }
.rl-lien.rr-5, .rl-pred.rr-5 { animation-delay: 5.40s; }
.rl-flux.rr-5 { animation-delay: 1.15s, 5.40s; }
.rl-lien.rr-6, .rl-pred.rr-6 { animation-delay: 6.10s; }
.rl-flux.rr-6 { animation-delay: 0.74s, 6.10s; }
.rl-lien.rr-7, .rl-pred.rr-7 { animation-delay: 6.80s; }
.rl-flux.rr-7 { animation-delay: 0.33s, 6.80s; }
.rl-lien.rr-8, .rl-pred.rr-8 { animation-delay: 7.50s; }
.rl-flux.rr-8 { animation-delay: 1.52s, 7.50s; }
.rl-lien.rr-9, .rl-pred.rr-9 { animation-delay: 8.20s; }
.rl-flux.rr-9 { animation-delay: 1.11s, 8.20s; }
.rl-lien.rr-10, .rl-pred.rr-10 { animation-delay: 8.90s; }
.rl-flux.rr-10 { animation-delay: 0.70s, 8.90s; }
.rl-lien.rr-11, .rl-pred.rr-11 { animation-delay: 9.60s; }
.rl-flux.rr-11 { animation-delay: 0.29s, 9.60s; }
.rl-lien.rr-12, .rl-pred.rr-12 { animation-delay: 10.30s; }
.rl-flux.rr-12 { animation-delay: 1.48s, 10.30s; }
.rn-0 { animation-delay: 0.10s; }
.fr-0 { animation-delay: -0.0s; }
.rn-1 { animation-delay: 0.21s; }
.fr-1 { animation-delay: -1.7s; }
.rn-2 { animation-delay: 0.32s; }
.fr-2 { animation-delay: -3.4s; }
.rn-3 { animation-delay: 0.43s; }
.fr-3 { animation-delay: -5.1s; }
.rn-4 { animation-delay: 0.54s; }
.fr-4 { animation-delay: -6.8s; }
.rn-5 { animation-delay: 0.65s; }
.fr-5 { animation-delay: -8.5s; }
.rn-6 { animation-delay: 0.76s; }
.fr-6 { animation-delay: -10.2s; }
.rn-7 { animation-delay: 0.87s; }
.fr-7 { animation-delay: -0.9s; }
.rn-8 { animation-delay: 0.98s; }
.fr-8 { animation-delay: -2.6s; }
.rn-9 { animation-delay: 1.09s; }
.fr-9 { animation-delay: -4.3s; }
.rn-10 { animation-delay: 1.20s; }
.fr-10 { animation-delay: -6.0s; }
.rn-11 { animation-delay: 1.31s; }
.fr-11 { animation-delay: -7.7s; }
.rn-12 { animation-delay: 1.42s; }
.fr-12 { animation-delay: -9.4s; }
.rn-13 { animation-delay: 1.53s; }
.fr-13 { animation-delay: -0.1s; }
.rn-14 { animation-delay: 1.64s; }
.fr-14 { animation-delay: -1.8s; }
@keyframes stylet-parcours {
  0% { transform: translate(790px, 570px); }
  5% { transform: translate(310px, 250px); }
  13.147% { transform: translate(720px, 250px); }
  16.923% { transform: translate(720px, 440px); }
  19.308% { transform: translate(600px, 440px); }
  22.885% { transform: translate(600px, 620px); }
  28.647% { transform: translate(310px, 620px); }
  36% { transform: translate(310px, 250px); }
  41% { transform: translate(632.1px, 271.7px); }
  41.425% { transform: translate(646.8px, 268.2px); }
  41.852% { transform: translate(662px, 267px); }
  42.279% { transform: translate(677.2px, 268.2px); }
  42.703% { transform: translate(691.9px, 271.7px); }
  43.123% { transform: translate(705.7px, 277.5px); }
  43.536% { transform: translate(718.2px, 285.2px); }
  43.941% { transform: translate(728.9px, 294.9px); }
  44.338% { transform: translate(737.7px, 306px); }
  44.729% { transform: translate(744.1px, 318.3px); }
  45.114% { transform: translate(748px, 331.5px); }
  45.496% { transform: translate(749.4px, 345px); }
  45.878% { transform: translate(748px, 358.5px); }
  46.262% { transform: translate(744.1px, 371.7px); }
  46.653% { transform: translate(737.7px, 384px); }
  47.05% { transform: translate(728.9px, 395.1px); }
  47.455% { transform: translate(718.2px, 404.8px); }
  47.868% { transform: translate(705.7px, 412.5px); }
  48.288% { transform: translate(691.9px, 418.3px); }
  48.712% { transform: translate(677.2px, 421.8px); }
  49.139% { transform: translate(662px, 423px); }
  49.567% { transform: translate(646.8px, 421.8px); }
  49.991% { transform: translate(632.1px, 418.3px); }
  50.411% { transform: translate(618.3px, 412.5px); }
  50.824% { transform: translate(605.8px, 404.8px); }
  51.229% { transform: translate(595.1px, 395.1px); }
  51.626% { transform: translate(586.3px, 384px); }
  52.016% { transform: translate(579.9px, 371.7px); }
  52.401% { transform: translate(576px, 358.5px); }
  52.783% { transform: translate(574.6px, 345px); }
  53.165% { transform: translate(576px, 331.5px); }
  53.55% { transform: translate(579.9px, 318.3px); }
  53.94% { transform: translate(586.3px, 306px); }
  54.338% { transform: translate(595.1px, 294.9px); }
  54.743% { transform: translate(605.8px, 285.2px); }
  55.156% { transform: translate(618.3px, 277.5px); }
  55.575% { transform: translate(632.1px, 271.7px); }
  56% { transform: translate(646.8px, 268.2px); }
  62% { transform: translate(790px, 570px); }
  100% { transform: translate(790px, 570px); }
}
.dessin-stylet { transform: translate(790px, 570px); }
@keyframes trait-plan {
  0%, 5% { stroke-dashoffset: 1; opacity: 0; }
  5.5% { opacity: 1; }
  36%, 82% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes trait-cercle {
  0%, 41% { stroke-dashoffset: 1; opacity: 0; }
  41.5% { opacity: 1; }
  56%, 82% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
/* ---------- fin des scènes ---------- */

/* ---------- Grilles de cases ---------- */

/* La grille « collée » : des cases séparées d'un filet d'un pixel. */
.grille-collee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--bord);
  border: 1px solid var(--bord);
  border-radius: 16px;
  overflow: hidden;
}
.grille-collee-240 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.case {
  background: var(--carte);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-28 { padding: 28px; gap: 8px; }
.case-24 { padding: 24px; gap: 6px; }

.icone {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-pale);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.icone svg { display: block; }

/* La liste de fonctions : des petites cartes en grille. */
.grille-fonctions {
  list-style: none;
  padding: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}
.fonction {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 18px;
}
.fonction .icone { margin-bottom: 12px; }
.fonction strong { display: block; }
.fonction span:last-child { color: var(--encre-douce); font-size: 15px; }

.rubrique {
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid var(--bord);
}
.rubrique-suite { margin-top: 48px; }
.rubrique-tete { padding-top: 24px; }

/* ---------- Cartes et encadrés ---------- */

.encadre {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 40px;
}
.encadre-36 { padding: 36px; }
.encadre-32 { padding: 32px; }
.encadre-30 { padding: 30px; }

.encadre-nuit {
  background: var(--nuit);
  color: var(--nuit-texte);
  border: 1px solid var(--nuit-bord);
  border-radius: 16px;
  padding: 32px;
}
.encadre-nuit ul { color: var(--nuit-doux); }

.liste-puces { padding-left: 20px; color: var(--encre-douce); display: flex; flex-direction: column; gap: 6px; }
.liste-puces-8 { gap: 8px; }
.liste-puces-10 { gap: 10px; }
.liste-puces strong { color: var(--encre); }

.liste-etapes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.liste-etapes li {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--bord);
  border-radius: 12px;
}
.liste-etapes-pleines li { background: var(--carte); }
.liste-etapes-560 { max-width: 560px; margin-top: 12px; }
.numero { font-family: var(--police-mono); color: var(--accent); }

/* ---------- Bandeau nuit (l'appareil de calcul) ---------- */

.bandeau-nuit { background: var(--nuit); color: var(--nuit-texte); }
.bandeau-nuit .surtitre { color: var(--nuit-accent); }
.bandeau-nuit .texte-nuit { color: var(--nuit-doux); }
.bandeau-nuit a { color: var(--nuit-lien); }
.bandeau-nuit a:hover { color: #FFFFFF; }
.bandeau-interieur { padding-top: 96px; padding-bottom: 96px; }
.bandeau-interieur-88 { padding-top: 88px; padding-bottom: 88px; }

.appareil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--nuit-bord);
  border-radius: 12px;
  background: var(--nuit-carte);
  flex-wrap: wrap;
}
.appareil-nom { flex: 1; }
.appareil-etat { font-family: var(--police-mono); color: var(--nuit-discret); font-size: 13px; }
.voyant { width: 10px; height: 10px; border-radius: 50%; background: var(--gris); flex: none; }
.voyant-pret { background: var(--vert); }

.terminal {
  flex: 1 1 380px;
  min-width: 0;
  background: var(--nuit-carte);
  border: 1px solid var(--nuit-bord);
  border-radius: 14px;
  padding: 24px;
  font-family: var(--police-mono);
  font-size: 14px;
  color: var(--nuit-doux);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.terminal-commentaire { color: var(--gris); }
.terminal-commande { word-break: break-all; color: var(--nuit-texte); }
.terminal-ok { color: var(--vert-terminal); }

/* ---------- Sécurité : le trajet d'une note ---------- */

.etape-trajet {
  flex: 1 1 200px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.etape-chiffree { background: var(--carte-douce); }
.etape-trajet strong { font-weight: 600; }
.chiffre-mono { font-family: var(--police-mono); font-size: 15px; }
.fleche {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: 22px;
}

/* ---------- Mac : les trois temps ---------- */

.grille-temps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.temps {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt28 { margin-top: 28px; }

/* ---------- Tarifs ---------- */

.grille-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.offre {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.offre-nuit { background: var(--nuit); color: var(--nuit-texte); border-color: var(--nuit-bord); }
.offre-nuit .etiquette { color: var(--nuit-accent); }
.offre-nuit dt, .offre-nuit .prix-unite { color: var(--nuit-discret); }
.prix {
  font-family: var(--police-titre);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.prix-devis { font-size: 44px; line-height: 1.1; }
.prix-unite {
  font-family: var(--police-texte);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--discret);
}
.offre dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 16px;
}
.offre dt { color: var(--discret); }
.offre dd { margin: 0; font-weight: 600; }
/* Ce que chaque offre comprend (✓) ou non (—) : la marque est décorative, une
   mention hors écran dit « non inclus » aux lecteurs d'écran. */
.offre-fonctions {
  list-style: none;
  padding: 16px 0 0;
  border-top: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 15px;
  flex: 1;
}
.offre-fonctions li { display: flex; gap: 10px; }
.marque-fonction { flex: none; width: 1.1em; font-weight: 700; color: var(--accent); }
.inclus-non { color: var(--discret); }
.inclus-non .marque-fonction { color: var(--gris); font-weight: 400; }
.offre-nuit .offre-fonctions { border-color: var(--nuit-bord); }
.offre-nuit .marque-fonction { color: var(--nuit-accent); }
.offre-nuit .inclus-non, .offre-nuit .inclus-non .marque-fonction { color: var(--nuit-discret); }
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bouton-offre {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--encre);
  padding: 13px 18px;
  border-radius: 8px;
  border: 1px solid var(--bord-fort);
  font-weight: 600;
}
.bouton-offre:hover { color: var(--encre); border-color: var(--encre-douce); }
.bouton-offre-plein { background: var(--bouton); color: var(--sur-bouton); border-color: var(--bouton); }
.bouton-offre-plein:hover { background: var(--bouton-survol); color: var(--sur-bouton); border-color: var(--bouton-survol); }

.question {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 18px 22px;
}
.question summary { cursor: pointer; font-weight: 600; }
.question p { margin: 10px 0 0; color: var(--encre-douce); }
.titre-questions { margin-bottom: 10px; font-size: 36px; letter-spacing: -0.02em; line-height: 1.2; }
.section-questions { padding-bottom: 112px; }

/* ---------- Formulaire d'invitation ---------- */

.formulaire {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 15px; font-weight: 500; }
.facultatif { font-weight: 400; color: var(--discret); }
.champ input, .champ textarea {
  font: inherit;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--bord-fort);
  background: var(--carte);
  color: var(--encre);
  width: 100%;
}
.champ textarea { resize: vertical; }
.consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--encre-douce);
}
.consentement input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--bouton); }
.note-formulaire { font-size: 14px; color: var(--discret); }

/* Le champ piège : hors de l'écran, mais pas display:none — certains robots
   sautent les champs masqués ; ils remplissent volontiers celui-ci. */
.piege {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inséré par le serveur à la place de <!--ERREUR--> quand la demande est refusée. */
.erreur {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--erreur-bord);
  border-radius: 8px;
  background: var(--erreur-fond);
  color: var(--erreur-texte);
  font-size: 15px;
}

/* ---------- Pages courtes (résultat, 404) ---------- */

.page-courte { padding-top: 96px; padding-bottom: 120px; max-width: 760px; }

/* ---------- Pied ---------- */

.pied { border-top: 1px solid var(--bord); }
.pied-interieur {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  font-size: 14px;
  color: var(--discret);
}
.pied-marque { font-family: var(--police-marque); font-weight: 700; font-size: 18px; color: var(--encre); }
.pied-droits { flex: 1 1 auto; }
.pied-interieur a { text-decoration: none; color: var(--encre-douce); }
.pied-interieur a:hover { color: var(--encre); text-decoration: underline; }

/* ---------- Petits écrans ---------- */

@media (max-width: 640px) {
  .encadre, .encadre-36 { padding: 24px; }
  .encadre-32, .encadre-30, .encadre-nuit, .offre, .formulaire { padding: 24px; }
  .case { padding: 24px; }
  .hero { padding-top: 40px; }
  .section-tete { padding-top: 48px; }
  .bandeau-interieur, .bandeau-interieur-88 { padding-top: 64px; padding-bottom: 64px; }
  .section { padding-bottom: 72px; }
  /* Les étapes du trajet s'empilent : la flèche descend au lieu d'aller à droite. */
  .fleche { flex-basis: 100%; transform: rotate(90deg); }
  .prix { font-size: 48px; }
}