/* Institut de Champel — Gynécologie — feuille de style unique du site.
   Ecrite a la main : aucune dependance, aucun chargement distant (la CSP de
   production n'autorise que les fichiers du site). Les pages anglaises vivent
   dans en/ : toutes les URL d'images ci-dessous sont donc relatives a css/. */

:root {
  --fond: #0b0907;
  --voile: rgba(11, 9, 7, .78);
  --panneau: rgba(24, 20, 16, .72);
  --surface: rgba(38, 32, 25, .55);
  --encre: #f6f1e8;
  --encre-2: #ddd4c6;
  --encre-3: #bdb2a2;
  --or: #cca54e;
  --laiton: #e3c47d;
  --ligne: rgba(204, 165, 78, .24);
  --ligne-forte: rgba(204, 165, 78, .5);
  --alerte: #f0cf8e;
  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --rayon: 2px;
  --ombre: 0 18px 50px rgba(0, 0, 0, .45);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Fond du site : les images du client, en trois calques.
     .fond             le cadre fixe, qui ne bouge jamais
     .fond-parallaxe   decale au defilement par js/site.js (parallaxe)
     .fond-plan        l image elle-meme, qui derive lentement (« respiration »)
   Le degrade de .fond::after passe par-dessus les deux et garde le texte lisible :
   c est lui qu il faut toucher pour eclaircir ou assombrir le fond, jamais
   l opacite de l image. L arene sur l accueil, le Colisee sur les autres pages. */
.fond {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #0b0907;
  overflow: hidden;
}
.fond-parallaxe {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.fond-plan {
  position: absolute;
  inset: 0;
  background: url(../img/fond-1280.webp) center / cover no-repeat;
  /* 1.06 = l echelle sur laquelle se pose la derniere image du film d ouverture :
     l entree dans le site est donc invisible. La derive ne fait que grandir
     l image (jamais retrecir), sinon un bord apparaitrait. */
  transform: scale(1.06);
  will-change: transform;
  animation: derive 54s ease-in-out infinite alternate;
}
.page-accueil .fond-plan {
  background-image: url(../img/fond-accueil-1280.webp);
}
@keyframes derive {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1%, -1.2%, 0); }
}
.fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 9, 7, .84) 0%, rgba(11, 9, 7, .9) 45%, rgba(11, 9, 7, .96) 100%);
}
.page-accueil .fond::after {
  background:
    linear-gradient(180deg, rgba(11, 9, 7, .58) 0%, rgba(11, 9, 7, .8) 50%, rgba(11, 9, 7, .95) 100%);
}
@media (min-width: 80rem) {
  .fond-plan { background-image: url(../img/fond-1920.webp); }
  .page-accueil .fond-plan { background-image: url(../img/fond-accueil-1920.webp); }
}
/* Mouvement refuse : l image reste parfaitement immobile. */
@media (prefers-reduced-motion: reduce) {
  .fond-plan { animation: none; transform: scale(1.06); }
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.1rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--laiton); }
a:hover { color: var(--or); }

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

/* ------------------------------------------------------------- mise en page */

.conteneur {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}
.conteneur.etroit { max-width: 56rem; }

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section + .section { padding-top: 0; }
.section-appel + .section-appel { padding-top: 0; }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--or);
  color: #17120c;
  padding: .7rem 1.1rem;
  font-weight: 600;
}
.lien-evitement:focus { left: 1rem; top: 1rem; }

main:focus { outline: none; }

/* ------------------------------------------------------------------ entete */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 9, 7, .72);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(8px);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* Menu dynamique : passe la premiere hauteur d ecran, la barre se resserre,
   s opacifie et prend une ombre. js/site.js pose la classe. */
.entete.compacte {
  background: rgba(9, 7, 5, .94);
  border-bottom-color: var(--ligne);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.entete-barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 82rem;
  margin: 0 auto;
  padding: 1rem var(--gouttiere);
  transition: padding .3s ease;
}
/* La hauteur de la barre ne change JAMAIS : l'entete est dans le flux, et la
   moindre variation de hauteur decale tout le contenu sous elle. Mesure du
   17.09.2026 : avec un padding qui se reduisait, la page sursautait au seuil et
   pouvait osciller (le contenu remonte, on repasse sous 80 px, elle se redeploie).
   La compaction ne joue donc que sur des proprietes qui ne reflowent pas. */
.marque img { transition: transform .3s ease; transform-origin: left center; }
.entete.compacte .marque img { transform: scale(.82); }
.marque-nom { transition: opacity .3s ease; }
.marque {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--encre);
}
.marque img { height: 2.4rem; width: auto; object-fit: contain; }
.marque-nom {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .26em;
  line-height: 1.2;
  text-transform: uppercase;
}
.marque-nom span:last-child { color: var(--or); }

.bouton-menu {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--ligne-forte);
  color: var(--encre);
  font: inherit;
  font-size: .95rem;
  padding: .45rem .9rem;
  border-radius: var(--rayon);
  cursor: pointer;
}
.bouton-menu-signe::before { content: "+"; font-size: 1.1em; line-height: 1; }
.bouton-menu[aria-expanded="true"] .bouton-menu-signe::before { content: "×"; }

.menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.9rem, 2vw, 1.8rem);
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  color: var(--encre-2);
  text-decoration: none;
  font-size: .97rem;
  padding-block: .3rem;
  transition: color .2s ease;
}
/* le trait glisse depuis la gauche au survol : rien ne bouge en hauteur */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.menu a:hover, .menu a:focus-visible { color: var(--encre); }
.menu a:hover::after, .menu a:focus-visible::after, .menu a.ici::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--or); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .menu a::after { transition: none; }
}

.langues {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .85rem;
  letter-spacing: .12em;
}
.langues-titre {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.langue-active { color: var(--or); }
.langues a { color: var(--encre-3); text-decoration: none; }
.langues a:hover { color: var(--encre); }

@media (min-width: 62rem) {
  .bouton-menu { display: none; }
  .menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.4rem);
  }
}
@media (max-width: 61.999rem) {
  .menu {
    display: none;
    width: 100%;
    order: 3;
    padding-block: 1rem 1.2rem;
    border-top: 1px solid var(--ligne);
  }
  .entete-barre { flex-wrap: wrap; }
  .menu.ouvert { display: block; }
  .menu ul { flex-direction: column; gap: .2rem; }
  .menu a { display: block; padding: .6rem 0; font-size: 1.05rem; }
  .langues { margin-top: .9rem; }
}

/* -------------------------------------------------------------------- porte */
/* L accueil n est pas une page a lire : c est une porte. Le film se termine sur
   l arene, et ce menu parait par-dessus en fondu. Sans JavaScript, il est
   simplement la des le chargement. */
.porte {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 8vh, 6rem);
}
.porte-dedans { width: 100%; }
.porte-menu { max-width: 46rem; }
.porte-accroche {
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.1rem;
}
.porte-titre {
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  letter-spacing: -.015em;
  margin-bottom: clamp(2rem, 5vh, 3.4rem);
}
.porte-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ligne);
}
.porte-nav li { border-bottom: 1px solid var(--ligne); }
.porte-nav a {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(.7rem, 1.6vh, 1.05rem) .2rem;
  text-decoration: none;
  color: var(--encre);
  transition: color .22s ease, padding-left .22s ease, background-color .22s ease;
}
.porte-nav a:hover, .porte-nav a:focus-visible {
  color: var(--laiton);
  padding-left: 1.1rem;
  background: linear-gradient(90deg, rgba(204, 165, 78, .12), rgba(204, 165, 78, 0) 65%);
}
.porte-numero {
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--or);
  flex: 0 0 2.4rem;
}
.porte-libelle {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.15;
}
.porte .vers-suite { margin-top: clamp(1.6rem, 4vh, 2.6rem); }
@media (prefers-reduced-motion: reduce) {
  .porte-nav a { transition: none; }
}

/* -------------------------------------------------------------------- heros */

.heros {
  padding-block: clamp(4rem, 12vw, 9rem) clamp(3rem, 7vw, 6rem);
}
.heros-compact { padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem); }
.heros h1 span { display: block; }
.heros h1 span + span { color: var(--encre-3); }
.surtitre {
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.2rem;
}
.chapo {
  max-width: 44rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--encre-2);
  margin-top: 1.4rem;
}
.mention { color: var(--encre-3); font-size: .9rem; margin-top: 1.4rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.8rem 0 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.4rem;
  border-radius: var(--rayon);
  border: 1px solid var(--ligne-forte);
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  background: none;
  color: var(--encre);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-or { background: var(--or); border-color: var(--or); color: #17120c; }
.btn-or:hover, .btn-or:focus-visible { background: var(--laiton); border-color: var(--laiton); color: #17120c; }
.btn-ligne:hover, .btn-ligne:focus-visible { border-color: var(--or); color: var(--laiton); background: rgba(204, 165, 78, .1); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--or); border-color: var(--or); color: #17120c; }

.vers-suite {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.6rem;
  color: var(--encre-3);
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vers-suite:hover { color: var(--or); }

/* ------------------------------------------------------------------- blocs */

.cartes, .duo, .etapes, .principes, .faq {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
}
.cartes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.duo { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.principes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.carte, .principe {
  background: var(--panneau);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.carte p, .principe p { color: var(--encre-3); margin-bottom: 0; }
.carte h3, .principe h3 { margin-bottom: .5rem; }

.numero {
  display: block;
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--or);
  margin-bottom: .9rem;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 1px solid var(--ligne-forte);
  padding-bottom: .15rem;
}
.lien-fleche:hover { border-bottom-color: var(--or); }

.etapes { display: grid; gap: 0; }
.etape {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--ligne);
}
.etape:last-child { border-bottom: 1px solid var(--ligne); }
.etape .numero { margin-bottom: 0; padding-top: .35rem; }
.etape p { color: var(--encre-3); margin-bottom: 0; }
@media (max-width: 40rem) {
  .etape { grid-template-columns: 1fr; gap: .4rem; }
}

.bandeau {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 60rem) { .bandeau { grid-template-columns: 1.1fr 1fr; } }
.bandeau-image {
  width: 100%;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bandeau-texte p { color: var(--encre-3); }

.image-large {
  display: block;
  width: 100%;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.image-legende {
  margin-top: .8rem;
  color: var(--encre-3);
  font-size: .9rem;
  letter-spacing: .02em;
}

.texte-large { font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem); max-width: 46rem; }

.appel {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--panneau);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.appel p { color: var(--encre-3); max-width: 44rem; }

.note {
  border-left: 2px solid var(--or);
  background: var(--surface);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.note p { color: var(--encre-2); }

.alerte {
  color: var(--alerte);
  font-size: .95rem;
}

/* --------------------------------------------------------------------- faq */

.faq { display: grid; }
.faq-item { border-top: 1px solid var(--ligne); }
.faq-item:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.3rem;
  cursor: pointer;
  list-style: none;
  color: var(--encre);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .numero { margin: 0; flex: 0 0 2.6rem; }
.faq-question { flex: 1; }
.faq-signe { flex: 0 0 auto; color: var(--or); }
.faq-signe::before { content: "+"; }
.faq details[open] .faq-signe::before { content: "–"; }
.faq-reponse { padding: 0 0 1.4rem 3.6rem; }
.faq-reponse p { color: var(--encre-3); margin: 0; }
@media (max-width: 40rem) {
  .faq-reponse { padding-left: 0; }
}

/* --------------------------------------------------------------- documents */

.filtres {
  display: grid;
  gap: 1rem;
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--panneau);
  margin-bottom: 2.5rem;
}
.filtres .btn { justify-content: center; }
.champ { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.champ label { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: rgba(11, 9, 7, .6);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--rayon);
  padding: .65rem .8rem;
}
textarea { resize: vertical; }
input::placeholder { color: #8d8478; }

.documents-vide {
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--surface);
}
.documents-vide p { color: var(--encre-3); }
.documents-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

/* ----------------------------------------------------------------- contact */

.contact { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 62rem) { .contact { grid-template-columns: 1fr 1.25fr; } }
.coordonnees {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--panneau);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.coordonnees-raison b { color: var(--encre); }
.coordonnees-ligne span {
  display: inline-block;
  min-width: 6.5rem;
  color: var(--encre-3);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.formulaire {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--panneau);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.1rem;
}
.formulaire h2 { margin-bottom: 0; }
.obligatoires, .aide { color: var(--encre-3); font-size: .9rem; margin: 0; }

/* -------------------------------------------------------------- politique */

.sommaire {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--panneau);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: 2.5rem;
}
.sommaire h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.sommaire ol { margin: 0; padding-left: 1.2rem; color: var(--encre-3); }
.sommaire li { margin-bottom: .3rem; }
.politique-section { padding-block: 1.8rem; border-top: 1px solid var(--ligne); }
.politique-section h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.politique-section h2 .numero { display: inline; margin: 0 .4rem 0 0; }
.politique-section p { color: var(--encre-3); }
.politique-section:last-child { border-bottom: 1px solid var(--ligne); }
.politique-officiel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.politique-officiel a { display: inline-flex; align-items: center; gap: .5rem; }

/* -------------------------------------------------------------------- pied */

.pied {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--ligne);
  background: rgba(8, 6, 5, .9);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.pied-haut {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pied .marque-nom { font-size: .9rem; }
.pied-accroche { color: var(--encre-3); margin-top: .9rem; }
.pied-adresse p { color: var(--encre-3); margin-bottom: .6rem; }
.pied-adresse b { color: var(--encre); }
.pied-liens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied-liens a { color: var(--encre-3); text-decoration: none; }
.pied-liens a:hover { color: var(--or); }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ligne);
  color: var(--encre-3);
  font-size: .88rem;
}
.pied-bas p { margin: 0; }
.pied-bas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }
.pied-bas a { color: var(--encre-3); text-decoration: none; }
.pied-bas a:hover { color: var(--or); }
.pied-bas p:last-child { margin-left: auto; }

/* ------------------------------------------------ ouverture en mosaique (accueil) */
/* Pose par js/intro-init.js avant tout rendu, puis jouee par js/logo-intro.js :
   la page reste cachee tant que la mosaique n'a pas fini. Soudee a html.arrivee,
   deja defini plus bas. */
html.intro-pending .entete,
html.intro-pending main,
html.intro-pending .pied { visibility: hidden; }
html.intro-pending body { background: #050506; }
html.intro-active { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ------------------------------------------- arrivee dans le site apres le film */
/* js/site.js pose html.arrivee quand le film se termine : l entete descend et
   le titre monte, le temps d une seconde. Rien de tout cela si le visiteur
   demande moins d animations. */
@keyframes descend { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes monte {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Le raccord invisible : a la fin du film, l image du fond est deja exactement
   celle de la derniere image ; seul le voile sombre manque. On le fait monter en
   1,1 s pendant que le texte arrive, au lieu de l appliquer d un coup. */
@keyframes assombrir { from { opacity: 0; } to { opacity: 1; } }
html.arrivee .fond::after { animation: assombrir 1.1s ease-out both; }
html.arrivee .entete { animation: descend .55s .25s cubic-bezier(.2, .8, .2, 1) both; }
html.arrivee .porte-menu { animation: paraitre 1.3s .15s ease-out both; }
@keyframes paraitre { from { opacity: 0; } to { opacity: 1; } }
html.arrivee .heros .surtitre { animation: monte .6s .35s cubic-bezier(.2, .8, .2, 1) both; }
html.arrivee .heros h1 { animation: monte .7s .45s cubic-bezier(.2, .8, .2, 1) both; }
html.arrivee .heros .chapo { animation: monte .7s .58s cubic-bezier(.2, .8, .2, 1) both; }
html.arrivee .heros .actions { animation: monte .7s .7s cubic-bezier(.2, .8, .2, 1) both; }
html.arrivee .heros .mention,
html.arrivee .heros .vers-suite { animation: monte .7s .82s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  html.arrivee .fond::after,
  html.arrivee .porte-menu,
  html.arrivee .entete,
  html.arrivee .heros .surtitre,
  html.arrivee .heros h1,
  html.arrivee .heros .chapo,
  html.arrivee .heros .actions,
  html.arrivee .heros .mention,
  html.arrivee .heros .vers-suite { animation: none; }
}

/* ------------------------------------------------------------------ assistant */
/* Bulle d'assistance, en bas a droite. Uniquement du texte : pas de voix, pas de
   pieces jointes. js/site.js la revele ; sans JavaScript elle reste cachee,
   puisqu'elle ne servirait a rien. */
.assistant { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 45; }
.assistant[hidden] { display: none; }
.assistant-bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem .6rem .6rem;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: rgba(16, 13, 10, .92);
  color: var(--encre);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: var(--ombre);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.assistant-bouton:hover, .assistant-bouton:focus-visible { border-color: var(--or); color: var(--laiton); }
.assistant-marque img { display: block; border-radius: 50%; border: 1px solid var(--ligne); }
.assistant-panneau {
  position: absolute;
  right: 0;
  bottom: calc(100% + .7rem);
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100svh - 7rem));
  display: flex;
  flex-direction: column;
  background: rgba(14, 11, 9, .97);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  backdrop-filter: blur(10px);
}
.assistant-panneau[hidden] { display: none; }
.assistant-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ligne);
}
.assistant-titre { margin: 0; font-family: var(--serif); font-size: 1rem; color: var(--encre); }
.assistant-fermer {
  background: none; border: 0; color: var(--encre-3);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .1rem .3rem;
}
.assistant-fermer:hover { color: var(--encre); }
.assistant-avis {
  margin: 0;
  padding: .7rem 1rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--encre-3);
  border-bottom: 1px solid var(--ligne);
}
.assistant-fil {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: .8rem;
  overflow-y: auto;
  font-size: .95rem;
}
.assistant-message { max-width: 90%; padding: .6rem .8rem; border-radius: var(--rayon); }
.assistant-message p { margin: 0; }
.assistant-message b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .3rem;
}
.assistant-de-julius { background: var(--surface); border: 1px solid var(--ligne); }
.assistant-de-vous { background: rgba(204, 165, 78, .12); margin-left: auto; }
.assistant-de-vous b { color: var(--encre-3); }
.assistant-attente { color: var(--encre-3); font-style: italic; }
.assistant-forme {
  display: flex;
  gap: .5rem;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--ligne);
}
.assistant-forme input { flex: 1; min-width: 0; font-size: .95rem; padding: .55rem .7rem; }
.assistant-forme .btn { padding: .55rem 1rem; font-size: .9rem; }
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 30rem) {
  .assistant-libelle { display: none; }
  .assistant-bouton { padding: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-bouton { transition: none; }
}

/* ------------------------------------------------ bouton « revoir l'introduction » */
.revoir-intro {
  position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 40;
  background: rgba(11, 9, 7, .6); color: var(--texte, #f2ece3); border: 1px solid rgba(242, 236, 227, .35);
  border-radius: 40px; padding: .55rem 1.1rem; font: inherit; font-size: .85rem; letter-spacing: .03em;
  cursor: pointer; backdrop-filter: blur(6px);
}
.revoir-intro:hover, .revoir-intro:focus-visible { border-color: var(--or, #d8c08a); color: var(--or, #d8c08a); outline: none; }
@media print { .revoir-intro { display: none; } }

/* ------------------------------- fin d'ouverture : le site se pose, sans zoom */
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
html.ouverture-fin .entete,
html.ouverture-fin main,
html.ouverture-fin .pied,
html.ouverture-fin .assistant { animation: apparaitre 1.1s .1s ease both; }