/* Page vitrine — présentation du service aux familles et aux résidences.

   Direction : le vert pin du produit devient la matière dominante (bandes
   pleines) au lieu d'un simple bandeau, le papier chaud sert de respiration.
   Chaque visuel est présenté dans le cadre de l'appareil sur lequel il
   apparaît vraiment — borne verticale, téléphone, téléviseur, écran de bureau.
   C'est la signature de la page, et c'est la vérité du produit : le service
   n'existe que parce qu'il traverse quatre écrans très différents.

   Titres en Fraunces (serif à peine dévissée, chaleureuse, lisible de loin),
   corps en Atkinson Hyperlegible — la même fonte accessible que les autres
   fronts, ici pour des lecteurs qui ont souvent passé soixante ans. */

:root {
  --pin-nuit: #10251F;   /* bandes pleines, cadres d'appareils */
  --pin: #2E5B4F;        /* vert du produit */
  --pin-clair: #517D6F;
  --papier: #F3F1E8;
  --craie: #FBFAF4;
  --encre: #16211C;
  --encre-douce: #55655C;
  --abricot: #D98E3D;    /* accent : ce qui appelle l'œil */
  --abricot-pale: #F7E7D2;
  --trait: #DCDCCE;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --corps: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --colonne: 72rem;
  --marche: clamp(3.5rem, 7vw, 6.5rem);   /* respiration entre sections */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--abricot); outline-offset: 3px; border-radius: 4px; }

.surtitre {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--abricot);
}

/* ================= barre supérieure ================= */

.barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--pin-nuit); color: var(--papier);
}
.marque {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; font-family: var(--serif);
  font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em;
}
.marque-plaque {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--papier); color: var(--pin-nuit);
  border-radius: 8px; font-size: 1.05rem;
}
.barre-acces { display: flex; gap: .5rem; }

/* ================= boutons ================= */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--corps); font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
  padding: .5rem 1.1rem; border-radius: 999px;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bouton-grand { font-size: 1.05rem; padding: .8rem 1.6rem; }

.bouton-plein { background: var(--abricot); color: var(--pin-nuit); border-color: var(--abricot); }
.bouton-plein:hover { background: #E9A253; border-color: #E9A253; }

.bouton-ligne { color: var(--papier); border-color: rgba(243, 241, 232, .45); }
.bouton-ligne:hover { border-color: var(--papier); background: rgba(243, 241, 232, .1); }

.bouton-clair { background: var(--papier); color: var(--pin-nuit); border-color: var(--papier); }
.bouton-clair:hover { background: #FFFFFF; border-color: #FFFFFF; }

/* sur fond papier, le bouton secondaire s'encre au lieu de s'éclaircir */
.section .bouton-ligne, .final .bouton-ligne { color: var(--pin-nuit); border-color: rgba(22, 33, 28, .3); }
.section .bouton-ligne:hover, .final .bouton-ligne:hover { border-color: var(--pin-nuit); background: rgba(22, 33, 28, .05); }

/* ================= cadres d'appareils ================= */

.cadre {
  margin: 0;
  background: var(--pin-nuit);
  padding: .7rem;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(16, 37, 31, .18);
  width: 100%;
}
.cadre .ecran {
  position: relative; overflow: hidden;
  border-radius: 12px;
  background: #1D3A32;
  display: grid;
}
.cadre img { width: 100%; height: 100%; object-fit: cover; display: block; grid-area: 1 / 1; }
.cadre figcaption {
  margin-top: .8rem; text-align: center;
  font-size: .85rem; color: rgba(243, 241, 232, .72);
}

.cadre-borne .ecran { aspect-ratio: 9 / 16; }
.cadre-telephone { padding: .5rem; border-radius: 28px; }
.cadre-telephone .ecran { aspect-ratio: 9 / 19; border-radius: 20px; }
.cadre-tv { padding: .6rem; border-radius: 12px; }
.cadre-tv .ecran { aspect-ratio: 16 / 9; border-radius: 5px; }
.cadre-bureau { padding: .55rem; border-radius: 12px; }
.cadre-bureau .ecran { aspect-ratio: 16 / 9; border-radius: 5px; }

/* emplacement en attente d'image : dit quel fichier déposer */
.a-fournir { display: none; }
.cadre.sans-image .a-fournir {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; padding: 1.2rem; text-align: center;
  background: repeating-linear-gradient(-45deg,
    rgba(243, 241, 232, .045) 0 10px, transparent 10px 20px);
  color: rgba(243, 241, 232, .8);
}
.cadre.sans-image .fichier {
  font-family: var(--mono); font-size: .82rem; font-weight: 600;
  color: var(--abricot); word-break: break-all;
}
.cadre.sans-image .format {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(243, 241, 232, .3); border-radius: 999px; padding: .1rem .6rem;
}
.cadre.sans-image .quoi { font-size: .85rem; line-height: 1.35; max-width: 22ch; }

/* ================= mise en page commune ================= */

/* demi-marche de chaque côté : deux sections voisines en composent une entière,
   sinon l'espace double au raccord et la page se disloque */
.section {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: calc(var(--marche) / 2) clamp(1.25rem, 4vw, 2.5rem);
}
.titre-section {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 2.5rem;
}

/* ================= accroche ================= */

.hero { background: var(--pin-nuit); color: var(--papier); }
/* bande pleine à l'extérieur, colonne de texte alignée sur les sections qui
   suivent à l'intérieur — sinon l'accroche décroche sur écran large */
.hero-dedans {
  max-width: var(--colonne); margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(3.5rem, 7vw, 6rem);
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
.hero-texte { max-width: 34rem; }
/* Sur le fond vert nuit, un cadre vert nuit disparaît et la capture flotte :
   il lui faut une monture claire pour se détacher. Elle est portée par un
   élément intérieur, sinon la légende se retrouve enfermée dedans. */
.hero-cadre {
  max-width: 21rem; justify-self: end;
  background: none; border: none; box-shadow: none; padding: 0;
}
.hero-cadre .monture {
  background: rgba(243, 241, 232, .14);
  border: 1px solid rgba(243, 241, 232, .38);
  border-radius: 20px; padding: .7rem;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
}
.hero-cadre .ecran { border: 1px solid rgba(243, 241, 232, .16); }

/* ---- poser le badge (js/landing.js) ----
   Le porte-clés MIFARE déborde de la monture, à hauteur de main, comme tenu
   devant le lecteur. Touché, il se penche vers la borne ; la borne « lit »
   (voile et anneau qui tourne), puis la seconde capture apparaît en fondu.
   Trois états portés par la figure : rien, .en-lecture, .badge-pose. */
.hero-cadre .monture { position: relative; }
.hero-cadre img.apres { opacity: 0; transition: opacity .5s ease; }
.hero-cadre.badge-pose img.apres { opacity: 1; }

.badge-mifare {
  position: absolute; z-index: 2;
  right: -1.7rem; top: 52%;
  width: 3.4rem; padding: 0; border: 0; background: none;
  cursor: pointer; line-height: 0;
  transform: translateY(-50%);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.badge-mifare svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4)); }
.badge-mifare .anneau { fill: none; stroke: rgba(243, 241, 232, .75); stroke-width: 3; }
.badge-mifare .corps { fill: var(--abricot); }
.badge-mifare .attache { fill: var(--pin-nuit); opacity: .5; }
.badge-mifare .ondes { fill: none; stroke: var(--pin-nuit); stroke-width: 3; stroke-linecap: round; }
.badge-mifare .ondes .pointe { fill: var(--pin-nuit); stroke: none; }
.badge-mifare:hover { transform: translateY(-50%) scale(1.06); }
/* touché : penché vers la borne, comme posé sur le lecteur */
.hero-cadre.en-lecture .badge-mifare, .hero-cadre.badge-pose .badge-mifare {
  transform: translateY(-50%) translateX(-.9rem) rotate(-10deg);
}
.hero-cadre.badge-pose .badge-mifare:hover { transform: translateY(-50%) translateX(-.9rem) rotate(-10deg) scale(1.06); }
/* au repos, une onde qui s'élargit invite à toucher */
.badge-mifare::after {
  content: ""; position: absolute; inset: 20% 4% 4%;
  border-radius: 14px; border: 2px solid var(--abricot);
  opacity: 0; pointer-events: none;
  animation: onde-badge 2.4s ease-out infinite;
}
.hero-cadre.en-lecture .badge-mifare::after, .hero-cadre.badge-pose .badge-mifare::after { animation: none; }

.lecture {
  grid-area: 1 / 1; z-index: 1;
  display: grid; place-items: center; align-content: center; gap: .7rem;
  background: rgba(16, 37, 31, .66); color: var(--papier);
  font-size: .85rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.hero-cadre.en-lecture .lecture { opacity: 1; }
.lecture-anneau {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 3px solid rgba(243, 241, 232, .22); border-top-color: var(--abricot);
  animation: tourne .8s linear infinite;
}

.hero-cadre figcaption { display: grid; gap: .15rem; }
.hero-cadre .etat-accueil, .hero-cadre .aide-accueil { display: none; }
.hero-cadre.badge-pose .etat-veille, .hero-cadre.badge-pose .aide-veille { display: none; }
.hero-cadre.badge-pose .etat-accueil, .hero-cadre.badge-pose .aide-accueil { display: block; }
.hero-cadre .aide { font-size: .78rem; color: rgba(243, 241, 232, .5); }

@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes onde-badge {
  0% { opacity: .8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}

.hero-titre {
  font-size: clamp(2.9rem, 7.5vw, 5.2rem);
  letter-spacing: -.03em; line-height: .98;
  margin: 1.1rem 0 1.5rem;
}
.hero-titre .ligne { display: block; }
.hero-titre .accent { color: var(--abricot); font-style: italic; }

.chapo { font-size: 1.18rem; color: rgba(243, 241, 232, .84); max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.note { margin-top: 1rem; font-size: .9rem; color: rgba(243, 241, 232, .6); }

/* ================= ce que ça change ================= */

.deux-colonnes {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.colonne-titre {
  font-size: 1.5rem; color: var(--pin);
  padding-bottom: .8rem; margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--trait);
}
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.points li { color: var(--encre-douce); }
.points strong {
  display: block; color: var(--encre);
  font-family: var(--serif); font-weight: 600; font-size: 1.12rem;
  letter-spacing: -.01em; line-height: 1.25; margin-bottom: .25rem;
}

/* ================= comment ça se passe ================= */

.liste-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 6vw, 5rem); }
.etape {
  display: grid; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem);
}
.rang {
  font-family: var(--mono); font-size: 1rem; font-weight: 600;
  color: var(--abricot);
  align-self: start; padding-top: .35rem;
}
.etape-texte h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; }
.etape-texte p { color: var(--encre-douce); max-width: 34rem; }
/* le téléphone est plus étroit que la borne : il ne doit pas s'étirer */
.etape .cadre-telephone { max-width: 11.5rem; justify-self: center; }

/* passer sur téléphone */
.passer-mobile {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 1.6rem; padding: .9rem 1.1rem .9rem .9rem;
  background: var(--craie); border: 1px solid var(--trait);
  border-radius: 12px; max-width: 30rem;
}
.passer-mobile[hidden] { display: none; }
.passer-qr { flex: 0 0 auto; display: flex; line-height: 0; }
.passer-qr svg { width: 6.5rem; height: 6.5rem; border-radius: 4px; }
.passer-titre { font-weight: 700; margin-bottom: .15rem; }
.passer-detail { color: var(--encre-douce); font-size: .9rem; line-height: 1.45; }

/* ================= le salon ================= */

.salon {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
}
.salon-texte p { color: var(--encre-douce); }
.salon-texte .titre-section { margin-bottom: 1.2rem; }
.salon-texte .souligne {
  margin-top: 1.2rem; padding-left: 1rem;
  border-left: 3px solid var(--abricot);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.35;
  color: var(--encre);
}

/* ================= côté résidence ================= */

.equipe { background: var(--pin); color: var(--papier); }
.equipe-dedans {
  max-width: var(--colonne); margin: 0 auto;
  padding: var(--marche) clamp(1.25rem, 4vw, 2.5rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
.equipe-texte h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: .9rem 0 1.1rem; }
.equipe-texte p { color: rgba(243, 241, 232, .84); margin-bottom: 1.8rem; }
.equipe .cadre { box-shadow: 0 18px 40px rgba(10, 26, 21, .3); }

/* ================= en quatre mots ================= */

.cartes-mots {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}
.carte {
  background: var(--craie); border: 1px solid var(--trait);
  border-radius: 14px; padding: 1.5rem 1.4rem;
}
/* le mot porte la carte : c'est lui qu'on retient, le reste l'explique */
.carte h3 {
  font-size: 1.6rem; color: var(--pin-nuit);
  letter-spacing: -.02em; margin-bottom: .9rem;
  padding-bottom: .7rem; border-bottom: 2px solid var(--abricot);
}
.carte-tete {
  font-weight: 700; color: var(--encre);
  margin-bottom: .45rem; line-height: 1.3;
}
.carte p { color: var(--encre-douce); font-size: .95rem; }

/* ================= appel final ================= */

.final {
  max-width: var(--colonne); margin: 0 auto;
  padding: calc(var(--marche) / 2) clamp(1.25rem, 4vw, 2.5rem) var(--marche);
  text-align: center;
}
.final h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1.8rem; }
.final-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ================= pied ================= */

.pied {
  background: var(--pin-nuit); color: rgba(243, 241, 232, .7);
  padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem);
  text-align: center; font-size: .9rem;
}
.pied-liens { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: .9rem; }
.pied-liens a { color: var(--papier); font-weight: 700; text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }

/* ================= apparition ================= */

[data-apparait] { opacity: 0; transform: translateY(18px); }
[data-apparait].visible {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}

/* ================= fenêtres étroites ================= */

/* entre-deux : deux colonnes pleines plutôt que trois mots et un orphelin */
@media (min-width: 34rem) and (max-width: 66rem) {
  .cartes-mots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  .hero-dedans, .salon, .equipe-dedans { grid-template-columns: minmax(0, 1fr); }
  .hero-texte { max-width: 32rem; }
  .hero-cadre { justify-self: center; max-width: 17rem; }
  .salon .cadre, .equipe .cadre { max-width: 34rem; margin-inline: auto; }
  .etape { grid-template-columns: auto minmax(0, 1fr); }
  .etape .cadre { grid-column: 2; max-width: 14rem; }
  .etape .cadre-telephone { justify-self: start; }
}

@media (max-width: 34rem) {
  .marque-nom { display: none; }
  .bouton { font-size: .9rem; padding: .45rem .9rem; }
  .hero-actions .bouton, .final-actions .bouton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-apparait] { opacity: 1; transform: none; }
  [data-apparait].visible { transition: none; }
  .badge-mifare, .hero-cadre img.apres, .lecture { transition: none; }
  .badge-mifare::after { animation: none; }
}