/* Page d'accueil de holorientation.com (index.html, et 404.html). Style sombre et bleu : fond noir bleuté, accents bleu
   vif et cyan, titres dans une police condensée (Barlow Condensed), phrase du haut de page en Barlow (même famille,
   largeur normale) ; licence libre OFL, dans polices/. Texte courant dans la police du système. Pensée d'abord pour le
   téléphone (on y arrive souvent par un code QR). Contrastes vérifiés sur fond sombre (texte : 4,5 au moins). */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("polices/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("polices/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("polices/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("polices/barlow-300.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --fond: #0b0f17;
  --fond-2: #0f1420;
  --carte: #121a29;
  --carte-2: #172033;
  --bordure: rgba(148, 163, 184, .16);
  --bordure-forte: rgba(148, 163, 184, .28);
  --texte: #e9eef6;
  --pale: #c7d0dd;
  --doux: #9fabbd;
  --bleu: #5b9bff;
  --bleu-vif: #2f6bff;
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --grenat: #c2183b;
  --rayon: 18px;
  --ombre: 0 30px 80px -30px rgba(0, 0, 0, .85);
  --police-titres: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --police-texte: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --entete: 68px;
}

/* Deux langues : seul le texte de la langue de <html lang> se voit (accueil.js la choisit). */
html[lang="fr"] [data-lang="en"],
html[lang="en"] [data-lang="fr"] { display: none !important; }
[hidden] { display: none !important; }
/* Ancien code QR (#v1.…) : la page part vers /q/, rien à montrer. */
html.redirection body { visibility: hidden; }

/* ─────────────────────────────── Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 12px); }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 1.0625rem/1.65 var(--police-texte); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--police-titres); text-wrap: balance; }
/* Titres des sections et des lignes comme le modèle d'Amine : Barlow Condensed 600, en minuscules avec majuscule
   initiale, lettres resserrées (mesuré sur le modèle : même hauteur d'x, même épaisseur, même largeur). */
h2 {
  font-weight: 600; font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em;
  font-synthesis: none;
}
h3 { font-weight: 600; font-size: 1.6rem; line-height: 1.06; letter-spacing: -.03em; font-synthesis: none; }
p, ul, ol, figure { margin: 0; }
a { color: var(--bleu); text-underline-offset: .2em; text-decoration-thickness: .07em; }
a:hover { color: #8cb9ff; }
img { display: block; max-width: 100%; height: auto; }
sup { line-height: 0; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid #8fbaff; outline-offset: 3px; border-radius: 6px; }
.conteneur { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.evitement {
  position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .7rem 1.1rem; border-radius: 12px;
  background: #fff; color: var(--fond); font-weight: 700; text-decoration: none;
}
.evitement:focus { top: 1rem; }
.surtitre { color: var(--cyan); font: 600 .78rem/1.3 var(--police-texte); letter-spacing: .22em; text-transform: uppercase; }

/* ─────────────────────────────── En-tête ─────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 50; height: var(--entete); margin-bottom: calc(-1 * var(--entete));
  background: rgba(11, 15, 23, .42); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(148, 163, 184, .1); transition: background-color .25s ease;
}
.entete.defile { background: rgba(11, 15, 23, .88); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; }
.marque {
  display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none;
  font: 700 1.55rem/1 var(--police-titres); letter-spacing: .01em;
}
.marque:hover { color: #fff; }
/* Logo « H-trajet » (images/logo.svg) ; le mot reste en texte, à côté. */
.marque .logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px rgba(34, 211, 238, .3)); }
.langues { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.langues button {
  appearance: none; border: 0; margin: 0; min-width: 46px; min-height: 38px; padding: 0 .85rem; border-radius: 999px;
  background: transparent; color: #c4cede; font: 600 .85rem/1 var(--police-texte); letter-spacing: .08em; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.langues button:hover { color: #fff; }
.langues button[aria-pressed="true"] { background: #fff; color: var(--fond); }
.sans-js .langues { display: none; }
.entete-droite { display: flex; align-items: center; gap: .6rem; }

/* ─────────── Compte du panel admin (compte.js) : bonhomme et flèche, petit menu, fenêtre de connexion ─────────── */
.compte { position: relative; }
.sans-js .compte { display: none; }
.compte-bouton {
  position: relative; appearance: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  margin: 0; padding: 0 .75rem 0 .65rem; border-radius: 999px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s;
}
.compte-bouton:hover, .compte-bouton[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.compte-icone { width: 22px; height: 22px; fill: currentColor; }
.compte-fleche { width: 9px; height: 6px; fill: currentColor; transition: transform .2s; }
.compte-bouton[aria-expanded="true"] .compte-fleche { transform: rotate(180deg); }
/* Connecté : un petit point cyan sur le bonhomme. */
.compte:not([data-etat="deconnecte"]) .compte-bouton::after {
  content: ""; position: absolute; top: 8px; left: 27px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 0 2px var(--fond);
}
.compte-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: flex; flex-direction: column; gap: 2px;
  min-width: 232px; padding: .45rem; border-radius: 14px; background: var(--carte); border: 1px solid var(--bordure-forte);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
}
.compte-choix {
  appearance: none; display: block; width: 100%; margin: 0; padding: .7rem .85rem; border: 0; border-radius: 10px;
  background: transparent; color: var(--texte); font: 600 .95rem/1.25 var(--police-texte); text-align: left;
  text-decoration: none; cursor: pointer;
}
.compte-choix:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.compte-nom {
  padding: .55rem .85rem .6rem; margin-bottom: .2rem; border-bottom: 1px solid var(--bordure);
  color: #fff; font: 700 1.05rem/1.2 var(--police-texte); overflow-wrap: anywhere;
}
.compte-note { padding: .1rem .85rem .55rem; color: var(--doux); font-size: .86rem; line-height: 1.45; }

.fenetre-compte {
  width: min(430px, 100% - 2rem); max-height: calc(100% - 2rem); padding: 0; border: 1px solid var(--bordure-forte);
  border-radius: 22px; background: linear-gradient(180deg, #141d2e, #0e1420); color: var(--texte); box-shadow: var(--ombre);
}
.fenetre-compte::backdrop { background: rgba(4, 7, 12, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fenetre-compte[data-mode="connexion"] [data-mode="inscription"],
.fenetre-compte[data-mode="inscription"] [data-mode="connexion"] { display: none !important; }
.formulaire-compte { position: relative; display: grid; gap: 1rem; padding: 2.1rem 1.75rem 1.6rem; }
.formulaire-compte h2 { padding-right: 2.5rem; font-size: 2.2rem; }
.champ { display: grid; gap: .4rem; }
.champ-nom { color: var(--pale); font: 600 .86rem/1.2 var(--police-texte); }
.champ input {
  width: 100%; min-height: 48px; padding: 0 .95rem; border-radius: 12px; border: 1px solid var(--bordure-forte);
  background: rgba(255, 255, 255, .04); color: var(--texte); font: 400 1rem/1 var(--police-texte);
  transition: border-color .2s, box-shadow .2s;
}
.champ input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(91, 155, 255, .25); }
.formulaire-aide { margin-top: -.3rem; color: var(--doux); font-size: .82rem; line-height: 1.45; }
.formulaire-erreur {
  padding: .65rem .85rem; border-radius: 10px; background: rgba(194, 24, 59, .14); border: 1px solid rgba(194, 24, 59, .5);
  color: #ffb9c5; font-size: .9rem; line-height: 1.45;
}
.formulaire-envoyer, .bouton-plein {
  appearance: none; min-height: 50px; margin: .2rem 0 0; padding: 0 1.4rem; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--bleu-vif), #19b4d6); color: #fff; font: 700 1rem/1 var(--police-texte);
  cursor: pointer; transition: filter .2s, transform .2s;
}
.formulaire-envoyer:hover, .bouton-plein:hover { filter: brightness(1.08); }
.formulaire-envoyer:disabled { opacity: .6; cursor: progress; }
.formulaire-bascule { color: var(--doux); font-size: .92rem; text-align: center; }
.formulaire-bascule button {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; color: var(--bleu); font: 600 .92rem/1.4 var(--police-texte);
  cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.fenetre-fermer {
  appearance: none; position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 38px; height: 38px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); color: #fff;
  font: 400 1.5rem/1 var(--police-texte); cursor: pointer;
}
.fenetre-fermer:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 374px) {
  .conteneur { width: min(100% - 2rem, 1160px); }
  .marque { font-size: 1.35rem; gap: .45rem; }
  .marque .logo { width: 30px; height: 30px; }
  .langues button { min-width: 40px; padding: 0 .6rem; }
  .entete-droite { gap: .4rem; }
  .compte-bouton { padding: 0 .55rem 0 .5rem; }
}
@media (max-width: 420px) { .marque span { font-size: 1.3rem; } }

/* ─────────────── Haut de page plein écran : photo assombrie et teintée de bleu ─────────────── */
.accueil {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--entete) + 3rem) 0 8.5rem; text-align: center;
}
.accueil-fond {
  position: absolute; inset: 0; z-index: -2; background: #0b1426 url("images/fond-tabaret-telephone.webp") center 40% / cover no-repeat;
  filter: saturate(.45) brightness(.75) contrast(1.05);
}
.accueil::before, .introuvable::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(34, 211, 238, .09), rgba(34, 211, 238, 0) 70%),
    linear-gradient(180deg, rgba(7, 11, 20, .78) 0%, rgba(7, 11, 20, .5) 38%, rgba(7, 11, 20, .62) 70%, var(--fond) 100%),
    linear-gradient(rgba(29, 78, 216, .42), rgba(29, 78, 216, .42));
}
.accueil-contenu { display: flex; flex-direction: column; align-items: center; perspective: 900px; }
/* Phrase d'accroche : une phrase par ligne (« NE CHERCHEZ PLUS. » mesure 7,13 em : elle tient sur une ligne dès 320 px
   de large), « Demandez ! » en cyan sur sa propre ligne ; de l'air autour. Avec une souris (et sans « réduire les
   animations »), accueil.js ajoute .suit-souris et met à jour les quatre variables : le titre se tourne un peu vers elle.
   Sinon (téléphone…), aucune transformation. */
.accueil h1 {
  margin: 0; color: #fff; font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem);
  line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.accueil h1 .accent { display: block; color: var(--cyan); }
.suit-souris .accueil h1 {
  transform: translate3d(var(--depl-x, 0px), var(--depl-y, 0px), 0) rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg));
  will-change: transform;
}
.accueil-phrase {
  margin-top: 1.7rem; max-width: 30rem; color: #d3dceb; font: 300 clamp(1rem, .93rem + .3vw, 1.15rem)/1.6 "Barlow",
  var(--police-texte); letter-spacing: .012em;
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 50px; padding: .85rem 1.7rem;
  border-radius: 999px; font: 700 1rem/1.2 var(--police-texte); text-align: center; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s;
}
.bouton-blanc { background: #fff; color: var(--fond); box-shadow: 0 14px 40px -14px rgba(34, 211, 238, .6); }
.bouton-blanc:hover { color: var(--fond); background: #eaf6ff; transform: translateY(-2px); box-shadow: 0 18px 46px -14px rgba(34, 211, 238, .75); }
.defiler {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: .55rem; padding: .4rem .8rem; color: rgba(255, 255, 255, .78); text-decoration: none;
  font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.defiler:hover { color: #fff; }
.defiler .ico { width: 1.2rem; height: 1.2rem; animation: rebond 2.2s ease-in-out infinite; }
@media (min-width: 768px) {
  .accueil-fond { background-image: url("images/fond-tabaret.webp"); background-position: center 35%; }
}

/* ─────────────────────────────── Sections ─────────────────────────────── */
.section { padding: 5rem 0; }
.section-entete { max-width: 48rem; margin-bottom: 2.75rem; }
.section-entete h2 { margin-top: .8rem; }
.section-entete h2.surtitre { margin: 0; }   /* « Comment ça marche » : le titre de la section, en petit */
.section-intro { margin-top: 1.1rem; color: var(--pale); font-size: 1.12rem; }
@media (min-width: 900px) { .section { padding: 7rem 0; } }

/* Comment ça marche, d'après le modèle d'Amine : des lignes qui alternent texte et image. Texte : un titre précédé d'une
   fine barre de couleur, un paragraphe gris clair aéré, un lien de la même couleur avec un petit triangle. Image : la
   borne blanche (sans rien derrière), puis trois photos de la vraie borne, chacune posée sur une grande bulle de lumière
   douce et floue (bleu, cyan, violet). La section suit le haut de page : même fond, avec une lueur bleue en haut. */
.fonctionnement {
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(47, 107, 255, .12), rgba(47, 107, 255, 0) 70%), var(--fond);
  overflow: hidden; overflow: clip;
}
.fonctionnement { padding-bottom: 8rem; }   /* la dernière bulle s'efface avant la section suivante */
.fonctionnement .section-entete { margin-bottom: 1rem; }
@media (min-width: 900px) { .fonctionnement { padding-bottom: 11rem; } }
.ligne { --couleur: var(--bleu); --barre: var(--couleur); --halo: rgba(47, 107, 255, .26); display: grid; gap: 2.75rem;
  align-items: center; }
.ligne + .ligne { margin-top: 6rem; }
.ligne.degrade { --couleur: var(--cyan); --barre: linear-gradient(180deg, var(--cyan), var(--bleu-vif)); }
.ligne.cyan { --couleur: var(--cyan); --halo: rgba(34, 211, 238, .2); }
.ligne.violet { --couleur: var(--violet); --halo: rgba(167, 139, 250, .24); }
.ligne-texte { max-width: 34rem; }
/* La barre se place à hauteur des lettres de la première ligne (Barlow Condensed : capitales de 0,70 em). */
.ligne-texte h3 {
  position: relative; padding-left: calc(4px + .34em); font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem);
}
.ligne-texte h3::before {
  content: ""; position: absolute; left: 0; top: .31em; width: 4px; height: .54em; border-radius: 2px; background: var(--barre);
}
.ligne-texte h3 .phrase { display: block; }   /* une phrase par ligne */
.ligne-texte p { margin-top: 1.25rem; color: #aab2c0; font-size: 1.1rem; line-height: 1.68; }
.lien-fleche {
  display: inline-flex; align-items: center; gap: .55em; margin-top: 1.6rem; color: var(--couleur); font-weight: 600;
  font-size: 1.03rem; text-decoration: none;
}
.lien-fleche::after {   /* petit triangle « ▸ » */
  content: ""; flex: none; border-left: .42em solid currentColor; border-top: .27em solid transparent;
  border-bottom: .27em solid transparent; transition: transform .2s ease;
}
.lien-fleche:hover { color: var(--couleur); text-decoration: underline; text-underline-offset: .25em; }
.lien-fleche:hover::after { transform: translateX(3px); }
.ligne-image { position: relative; isolation: isolate; justify-self: center; width: 100%; margin: 0; }
/* La borne blanche, le Gee-Gees à l'écran (images/borne-hologramme.webp, fond transparent, reflet au sol déjà dans
   l'image ; elle regarde vers la gauche, donc vers le texte) : rien derrière. */
.hologramme { max-width: 440px; aspect-ratio: 4 / 5; }
.hologramme img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) { .hologramme { max-width: 480px; } }
/* Si le rendu 3D manque, la capture de la borne prend sa place (accueil.js), dans un cadre d'écran. */
.hologramme.repli { aspect-ratio: auto; max-width: 300px; }
.hologramme.repli img {
  height: auto; padding: 8px; border-radius: 28px; background: linear-gradient(160deg, #2c3550, #0d111a);
  border: 1px solid var(--bordure-forte); box-shadow: var(--ombre);
}
/* Les trois lignes « bulle » (d'après les modèles d'Amine) : au premier plan, nos captures dans des cadres (écran de la
   borne, fenêtres, téléphones) ; derrière, la bulle : une photo de la vraie borne, assombrie et un peu floue, découpée en
   grand cercle doux qui se fond dans le fond (masque radial), avec un léger halo de la couleur de la ligne. */
.compo { --taille-bulle: 118%; max-width: 560px; }
.compo-carte, .compo-telephones { --taille-bulle: 150%; }   /* compositions larges : la photo se voit autour */
.fond-bulle {
  position: absolute; z-index: -2; left: 50%; top: 50%; width: var(--taille-bulle); max-width: none; height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); object-fit: cover; border-radius: 50%; pointer-events: none;
  filter: blur(2px) brightness(.55) saturate(.8); opacity: .8;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, 0) 100%);
}
.fond-2 { object-position: 30% 50%; }   /* la visiteuse et l'écran */
.fond-3 { object-position: 60% 50%; }   /* la borne et les deux visiteuses */
.compo::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: var(--taille-bulle); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo), rgba(0, 0, 0, 0) 100%);
}
/* Grandeur nature : la vraie borne vue de face (écran de 107 × 190 cm, cadre de 15 cm en haut et sur les côtés, 25 cm
   en bas) : large cadre blanc comme la vraie borne, barre noire et module de caméra en haut, petit logo ARHT
   discret en haut à droite, fin liseré sombre autour de l'écran, légère ombre portée. Les marges suivent la largeur de
   la borne (en %), les détails aussi (en cqw, la borne étant un conteneur) : nette à toutes les tailles. L'ombre est une
   ombre de boîte (box-shadow), pas un filtre drop-shadow : Chrome redessinait le filtre et l'ombre clignotait (Amine). Les
   fins traits autour de l'écran sont en pixels entiers : une fraction de pixel scintille quand la page défile. */
.borne-face { width: 54%; margin: 0 auto; container-type: inline-size; }
.borne-cadre {
  position: relative; padding: 10.95% 10.95% 18.25%; border-radius: 1.6cqw;
  background: linear-gradient(170deg, #f7f5f1 0%, #ebe7e0 50%, #dcd7ce 100%);
  box-shadow: 0 24px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1.2cqw 2.4cqw rgba(80, 64, 40, .12);
}
.borne-barre {
  position: absolute; top: 3.5cqw; left: 25cqw; right: 25cqw; height: 2.9cqw; border-radius: .8cqw;
  background: linear-gradient(#1c1d20, #060607);
}
.borne-camera {
  position: absolute; top: 6.9cqw; left: 50%; width: 6.2cqw; height: 2.6cqw; transform: translateX(-50%);
  border-radius: .7cqw; background: radial-gradient(circle, #050506 0 .5cqw, #34363b .62cqw);
  box-shadow: inset 0 0 0 .15cqw rgba(255, 255, 255, .14);
}
.borne-marque {
  position: absolute; top: 2.4cqw; right: 3.4cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  color: #a59e92; font: 600 2.2cqw/1 var(--police-texte); letter-spacing: .08em;
}
.borne-marque svg { width: 3.6cqw; height: 3.15cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.borne-ecran {
  overflow: hidden; border: 2px solid #2a2b2f; border-radius: 2px; background: #e9eef4;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);   /* petit biseau clair autour du liseré */
}
.borne-ecran img { width: 100%; }
/* Fenêtres (barre grise à trois feux et un titre) : la carte du trajet et la maquette 3D, qui se chevauchent. */
.fenetre {
  overflow: hidden; margin: 0; border-radius: 14px; background: #0e1522; border: 1px solid var(--bordure-forte);
  box-shadow: var(--ombre);
}
.fenetre-barre {
  display: flex; align-items: center; gap: .75rem; height: 34px; padding: 0 .85rem; background: #1a2232;
  border-bottom: 1px solid var(--bordure);
}
.feux { display: inline-flex; gap: 6px; }
/* Les trois feux d'une fenêtre de Mac (demande d'Amine) : rouge, jaune, vert, avec leur fin contour plus foncé. */
.feux i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #e0443e; }
.feux i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 .5px #dea123; }
.feux i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 .5px #1aab29; }
.fenetre-titre {
  flex: 1; max-width: 70%; margin-right: auto; height: 22px; padding: 0 .9rem; border-radius: 999px; overflow: hidden;
  background: #0f1520; color: #9aa6b8; font-size: .72rem; line-height: 22px; text-align: center; white-space: nowrap;
  text-overflow: ellipsis;
}
.fenetre img { width: 100%; }
.compo-carte { padding-bottom: 22%; }
.fenetre-principale { width: 78%; }
.fenetre-seconde { position: absolute; right: 0; bottom: 0; width: 52%; }
/* Téléphones : le début du trajet et l'arrivée, le second un peu plus bas. */
.compo-telephones { display: flex; align-items: flex-start; justify-content: center; }
/* Chaque téléphone est un iPhone (demande d'Amine) : contour en titane, boutons sur les côtés (action et volume à gauche,
   marche à droite), bord noir, puis l'écran : barre d'état (heure, réseau, Wi-Fi, batterie) autour de la Dynamic Island,
   la capture, et la barre d'accueil en bas. Les mesures suivent la largeur du téléphone (cqw) : net à toutes les tailles. */
.telephone-cadre { width: 44%; margin: 0; container-type: inline-size; }   /* la mesure (cqw) de ce qu'il contient */
.telephone-coque {
  position: relative; padding: 1.3cqw; border-radius: 15.5cqw;
  background: linear-gradient(135deg, #8a9099 0%, #3b4048 22%, #6c727c 50%, #30343b 78%, #7d838d 100%);
  box-shadow: var(--ombre), inset 0 0 0 .3cqw rgba(255, 255, 255, .16);
}
.telephone-boutons i {
  position: absolute; left: -1.3cqw; width: 1.6cqw; border-radius: .7cqw 0 0 .7cqw;
  background: linear-gradient(90deg, #5a606a, #a3a9b3 55%, #5a606a);
}
.telephone-boutons i:nth-child(1) { top: 17%; height: 4.5%; }               /* bouton action */
.telephone-boutons i:nth-child(2) { top: 24.5%; height: 8%; }               /* volume + */
.telephone-boutons i:nth-child(3) { top: 34%; height: 8%; }                 /* volume - */
.telephone-boutons i:nth-child(4) { left: auto; right: -1.3cqw; top: 27%; height: 13%; border-radius: 0 .7cqw .7cqw 0; }
.telephone-ecran {
  position: relative; overflow: hidden; border: 2.4cqw solid #050506; border-radius: 14.2cqw; background: var(--statut);
}
.telephone-1 { --statut: #d8dbd6; }   /* couleur du haut de chaque capture : la barre d'état s'y fond */
.telephone-2 { --statut: #eef2f5; }
.telephone-statut {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 13.5cqw; padding: 0 3cqw;
  color: #0b0b0c; font: 600 4.6cqw/1 system-ui, -apple-system, "Helvetica Neue", sans-serif; letter-spacing: -.01em;
}
.telephone-heure { justify-self: center; }
.telephone-ilot { width: 30cqw; height: 8.6cqw; border-radius: 999px; background: #000; }
.telephone-icones { justify-self: center; width: 17cqw; height: 3cqw; fill: currentColor; }
.telephone-ecran img { display: block; width: 100%; }
.telephone-barre-accueil {
  position: absolute; left: 50%; bottom: 1.1cqw; width: 34cqw; height: 1.1cqw; margin-left: -17cqw; border-radius: 1cqw;
  background: rgba(255, 255, 255, .82);   /* claire sur le fond sombre du bas de la page du téléphone */
}
.telephone-2 { margin-left: -6%; margin-top: 18%; }
/* Téléphone : bulle plus petite, moins de chevauchement. */
@media (max-width: 599px) {
  .compo, .compo-carte, .compo-telephones { --taille-bulle: 104%; }
  .borne-face { width: 64%; }
  .compo-carte { padding-bottom: 36%; }
  .fenetre-principale { width: 84%; }
  .fenetre-seconde { width: 50%; }
  .fenetre-seconde .feux { display: none; }
  .fenetre-seconde .fenetre-titre { max-width: none; margin: 0; padding: 0 .6rem; }
  .telephone-cadre { width: 45%; }
  .telephone-2 { margin-left: 5%; margin-top: 14%; }
}
@media (min-width: 900px) {
  .ligne { grid-template-columns: 5fr 6fr; gap: 5.5rem; }
  .ligne.inverse { grid-template-columns: 6fr 5fr; }
  .ligne.inverse .ligne-texte { order: 2; }
  .ligne + .ligne { margin-top: 9rem; }
  .ligne-image { justify-self: end; }
  .ligne.inverse .ligne-image { justify-self: start; }
}

/* Membres de l'équipe (bas de page), cachés tant que MEMBRES_EQUIPE (accueil.js) est vide. */
.membres { margin-top: 1.5rem; }
.membres h3 { margin-bottom: 1rem; color: var(--doux); font: 400 1rem/1.4 var(--police-texte); letter-spacing: 0; }
.membres-liste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.membres-liste li {
  display: inline-flex; align-items: center; gap: .7rem; padding: .4rem 1.1rem .4rem .4rem; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--bordure); font-weight: 600;
}
.initiales {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--bleu-vif), var(--cyan)); font: 700 1.05rem/1 var(--police-titres); letter-spacing: .04em;
}

/* Bande finale. */
.visite {
  padding: 6rem 0; text-align: center; border-top: 1px solid var(--bordure);
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(34, 211, 238, .16), rgba(34, 211, 238, 0) 70%),
    radial-gradient(ellipse 70% 70% at 50% 0%, rgba(47, 107, 255, .2), rgba(47, 107, 255, 0) 70%), var(--fond);
}
.visite h2 { max-width: 18ch; margin-inline: auto; font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.2rem); }
.visite-phrase { margin-top: 1rem; color: var(--pale); font-size: 1.12rem; }
@media (min-width: 900px) { .visite { padding: 8rem 0; } }

/* ─────────────────────────────── Pied de page ─────────────────────────────── */
.pied { padding: 3.5rem 0 1.5rem; background: #070a10; border-top: 1px solid var(--bordure); color: var(--doux); font-size: .92rem; }
.pied-grille { display: grid; gap: 2.2rem; }
.pied-marque p { margin-top: 1rem; max-width: 22rem; }
.pied-colonne h2 {
  margin-bottom: .9rem; color: #fff; font: 600 .76rem/1.3 var(--police-texte); letter-spacing: .2em; text-transform: uppercase;
}
.pied-colonne ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.pied-colonne a { color: var(--pale); text-decoration: none; }
.pied-colonne a:hover { color: #fff; text-decoration: underline; }
.pied-mentions p + p { margin-top: .6rem; }
.pied-mentions a { text-decoration: underline; }
.pied-bas { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--bordure); color: #8a96a8; font-size: .85rem; }
@media (min-width: 700px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-mentions { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .pied-grille { grid-template-columns: 1.3fr .8fr 1.6fr; gap: 3.5rem; } .pied-mentions { grid-column: auto; } }

/* ─────────────────────────────── Page introuvable (404.html) ─────────────────────────────── */
.introuvable { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 3rem 0; text-align: center; }
.introuvable h1 { margin-top: 1rem; color: #fff; font-weight: 800; font-size: clamp(3.2rem, 2rem + 7vw, 6.5rem); line-height: .9; text-transform: uppercase; }
.introuvable p { margin-top: 1rem; color: var(--pale); }
.introuvable .surtitre { margin-top: 0; color: var(--cyan); }
.introuvable .bouton { margin-top: 2rem; }

/* ─────────────────────────────── Animations ─────────────────────────────── */
@keyframes rebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Apparition douce des sections au défilement (accueil.js ajoute .anime seulement si c'est possible). */
.anime .revele { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.anime .revele.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .entete, .evitement, .defiler { display: none !important; }
  .anime .revele { opacity: 1; transform: none; }
}

/* Panel admin (admin/index.html) : ses styles sont dans admin/admin.css (même thème sombre que cette page). */