/* Site vitrine de 7Campus : couleurs et police de la marque (marque/README.md). */

/* Poppins servie par le site lui-même (licence OFL, polices/OFL.txt) : aucun appel à un tiers. */
@font-face {
  font-family: Poppins;
  font-weight: 400;
  font-display: swap;
  src: url('polices/poppins-400.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-weight: 500;
  font-display: swap;
  src: url('polices/poppins-500.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-weight: 600;
  font-display: swap;
  src: url('polices/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-weight: 700;
  font-display: swap;
  src: url('polices/poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-weight: 800;
  font-display: swap;
  src: url('polices/poppins-800.woff2') format('woff2');
}

/* L'angle de la bordure animée de l'offre Pro. */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --nuit: #060d1f;
  --nuit-2: #0b1733;
  --marine: #0d1b3d;
  --emeraude: #00a651;
  --emeraude-fonce: #007a3d;
  --emeraude-pale: #e3f5ea;
  --menthe: #4ade80;
  --cyan: #22d3ee;
  --orange: #f97316;
  --texte: #0d1b3d;
  --gris: #4f5f73;
  --gris-clair: #6c7a91;
  --gris-nuit: #a9b8cd;
  --fond: #f5f8f6;
  --surface: #fff;
  --bordure: #e2e8e4;
  --rayon: 22px;
  --largeur: 1180px;
  --douceur: cubic-bezier(0.2, 0.7, 0.2, 1);

  interpolate-size: allow-keywords;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--emeraude-fonce);
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Les icônes du site, tracées au trait (images/icones.svg). */
svg {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible {
  outline: 3px solid var(--menthe);
  outline-offset: 3px;
}

.conteneur {
  width: min(100% - 2rem, var(--largeur));
  margin-inline: auto;
}

.evitement {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  color: #fff;
  background: var(--emeraude-fonce);
  border-radius: 10px;
}

.evitement:focus {
  top: 1rem;
}

/* ---------- Apparition au défilement (effets.js) ---------- */

[data-reveler] {
  --attente: calc(var(--delai, 0) * 110ms);

  transition:
    opacity 0.9s var(--douceur) var(--attente),
    translate 0.9s var(--douceur) var(--attente);
}

@media (scripting: enabled) {
  [data-reveler]:not(.visible) {
    opacity: 0;
    translate: 0 28px;
  }
}

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

.bouton,
.bouton-clair,
.bouton-verre,
.bouton-contour {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.bouton {
  color: #fff;
  background: var(--emeraude-fonce);
}

.bouton-petit {
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
}

.bouton-lumineux {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #00c05e, var(--emeraude) 50%, #047857);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 15%),
    0 12px 32px -8px rgb(0 166 81 / 65%),
    0 0 60px -12px rgb(34 197 94 / 55%);
}

.bouton-lumineux::after {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  content: '';
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 45%), transparent);
  transform: skewX(-20deg);
  animation: eclat 4s ease-in-out infinite;
}

.bouton-lumineux:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 20%),
    0 18px 40px -8px rgb(0 166 81 / 75%),
    0 0 80px -10px rgb(34 197 94 / 65%);
}

.bouton svg {
  transition: transform 0.25s;
}

.bouton:hover svg {
  transform: translateX(3px);
}

.bouton-verre {
  color: #fff;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 16%);
  backdrop-filter: blur(8px);
}

.bouton-verre:hover {
  background: rgb(255 255 255 / 13%);
}

.bouton-verre svg {
  fill: currentcolor;
  stroke: none;
}

.bouton-clair {
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bordure);
}

.bouton-contour {
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--bordure);
}

.bouton-contour:hover {
  color: var(--emeraude-fonce);
  border-color: var(--emeraude);
}

@keyframes eclat {
  0%,
  60% {
    left: -60%;
  }

  100% {
    left: 130%;
  }
}

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

.entete {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background 0.35s,
    border-color 0.35s,
    backdrop-filter 0.35s;
}

.entete .conteneur {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}

/* Les deux logos superposés : blanc sur l'accroche, marine une fois l'en-tête dépoli. */
.marque {
  display: grid;
  flex: none;
}

.marque img {
  grid-area: 1 / 1;
  width: auto;
  max-width: none;
  height: 2.2rem;
  transition: opacity 0.35s;
}

.logo-fonce {
  opacity: 0;
}

.navigation {
  display: flex;
  gap: 0.4rem 1.6rem;
  align-items: center;
}

.navigation a:not(.bouton) {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgb(255 255 255 / 82%);
  text-decoration: none;
  transition: color 0.25s;
}

.navigation a:not(.bouton):hover {
  color: #fff;
}

/* Le sélecteur de langue : la langue de la page en surbrillance, l'autre à un clic. */
.langues {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
}

.navigation .langues a {
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 999px;
}

.navigation .langues a[aria-current='page'] {
  color: var(--nuit);
  background: #fff;
}

.entete[data-defile] {
  background: rgb(255 255 255 / 82%);
  border-bottom-color: rgb(13 27 61 / 8%);
  backdrop-filter: blur(16px) saturate(1.6);
}

.entete[data-defile] .logo-clair {
  opacity: 0;
}

.entete[data-defile] .logo-fonce {
  opacity: 1;
}

.entete[data-defile] .navigation a:not(.bouton) {
  color: var(--texte);
}

.entete[data-defile] .navigation a:not(.bouton):hover {
  color: var(--emeraude-fonce);
}

.entete[data-defile] .langues {
  border-color: var(--bordure);
}

.entete[data-defile] .navigation .langues a[aria-current='page'] {
  color: #fff;
  background: var(--marine);
}

@media (max-width: 860px) {
  .navigation > a:not(.bouton) {
    display: none;
  }
}

@media (max-width: 480px) {
  .marque img {
    height: 1.65rem;
  }

  .navigation {
    gap: 0.5rem;
  }

  .navigation .bouton {
    white-space: nowrap;
  }
}

/* ---------- Fonds animés ---------- */

.aurore {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.nappe {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(70px);
  animation: derive 18s ease-in-out infinite alternate;
}

.nappe-1 {
  top: -22vw;
  left: -12vw;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgb(0 166 81 / 90%), transparent 65%);
}

.nappe-2 {
  top: -14vw;
  right: -16vw;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgb(37 99 235 / 75%), transparent 65%);
  animation-duration: 23s;
  animation-delay: -7s;
}

.nappe-3 {
  top: 22vw;
  left: 28vw;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, rgb(34 211 238 / 45%), transparent 65%);
  animation-duration: 27s;
  animation-delay: -12s;
}

.faisceau {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 130vw;
  height: 95vh;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 158deg,
    rgb(255 255 255 / 7%) 172deg,
    rgb(74 222 128 / 20%) 180deg,
    rgb(255 255 255 / 7%) 188deg,
    transparent 202deg
  );
  filter: blur(8px);
  transform: translateX(-50%);
}

.sol {
  position: absolute;
  right: -50%;
  bottom: -6%;
  left: -50%;
  height: 62%;
  background-image:
    linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(64deg);
  transform-origin: center top;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 55%, transparent);
  animation: avance 12s linear infinite;
}

@keyframes derive {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(6vw, 4vw) scale(1.15);
  }

  100% {
    transform: translate(-4vw, 6vw) scale(0.95);
  }
}

@keyframes avance {
  to {
    background-position: 0 64px;
  }
}

/* ---------- Accroche ---------- */

.heros {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 7.25rem;
  color: #fff;
  background: var(--nuit);
}

.heros::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 14rem;
  pointer-events: none;
  content: '';
  background: linear-gradient(transparent, var(--nuit) 85%);
}

.heros-texte {
  max-width: 62rem;
  text-align: center;
}

.pastille-nouveau {
  position: relative;
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  overflow: hidden;
  padding: 0.35rem 0.95rem 0.35rem 0.35rem;
  font-size: 0.88rem;
  color: #dce6f2;
  text-decoration: none;
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.pastille-nouveau::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 16%) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: reflet 5s ease-in-out infinite;
}

.pastille-etiquette {
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--emeraude);
  border-radius: 999px;
}

.icone-fleche {
  color: var(--menthe);
}

@keyframes reflet {
  0%,
  55% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.heros h1 {
  margin: 1.3rem 0 1.1rem;
  font-size: clamp(2.7rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.degrade {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--menthe),
    var(--cyan) 30%,
    #a7f3d0 55%,
    var(--menthe) 80%
  );
  background-clip: text;
  background-size: 250% 100%;
  animation: coule 9s linear infinite;
}

@keyframes coule {
  to {
    background-position: 250% 0;
  }
}

.chapeau {
  max-width: 44rem;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  color: #b9c6da;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.2rem;
}

.garanties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: center;
  padding: 0;
  margin: 1.8rem 0 0;
  font-size: 0.92rem;
  color: var(--gris-nuit);
  list-style: none;
}

.garanties li {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.garanties svg {
  color: var(--menthe);
}

/* La scène en 3D : le navigateur, le téléphone et les puces flottantes. */
.scene {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
  margin-top: 3.2rem;
  perspective: 1800px;
}

.scene-plateau {
  position: relative;
  width: min(1100px, 100%);
  margin-inline: auto;
  transform: rotateX(var(--rx, 14deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--douceur);
}

.halo {
  position: absolute;
  inset: 8% 6% -6%;
  background: radial-gradient(ellipse at center, rgb(0 166 81 / 55%), transparent 65%);
  filter: blur(60px);
  transform: translateZ(-120px);
}

.navigateur {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--nuit-2);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  box-shadow:
    0 50px 120px -30px rgb(0 0 0 / 70%),
    0 0 0 1px rgb(255 255 255 / 4%);
}

.navigateur-barre {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  height: 2.4rem;
  padding: 0 0.95rem;
  background: linear-gradient(#18233f, #111a33);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.navigateur-barre > span {
  width: 11px;
  height: 11px;
  background: #ff5f57;
  border-radius: 50%;
}

.navigateur-barre > span:nth-child(2) {
  background: #febc2e;
}

.navigateur-barre > span:nth-child(3) {
  background: #28c840;
}

.navigateur-adresse {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.22rem 1.2rem;
  margin: 0 auto;
  font-size: 0.78rem;
  color: var(--gris-nuit);
  background: rgb(255 255 255 / 6%);
  border-radius: 8px;
  transform: translateX(-1.5rem);
}

.navigateur-adresse svg {
  color: var(--menthe);
}

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

.telephone {
  position: relative;
  aspect-ratio: 390 / 844;
  padding: 9px;
  margin: 0;
  background: linear-gradient(145deg, #2c3856, #0a1226);
  border-radius: 38px;
  box-shadow:
    0 40px 80px -20px rgb(0 0 0 / 60%),
    inset 0 0 0 1px rgb(255 255 255 / 15%);
}

.telephone::before {
  position: absolute;
  top: 17px;
  left: 50%;
  z-index: 2;
  width: 30%;
  height: 18px;
  content: '';
  background: #05080f;
  border-radius: 999px;
  transform: translateX(-50%);
}

.telephone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 30px;
}

.telephone-heros {
  position: absolute;
  right: -3%;
  bottom: -16%;
  width: 22%;
  animation: flotte 7s ease-in-out infinite;
}

@keyframes flotte {
  0%,
  100% {
    transform: translateZ(110px) translateY(0) rotate(3deg);
  }

  50% {
    transform: translateZ(110px) translateY(-14px) rotate(3deg);
  }
}

.puce {
  --z: 100px;

  position: absolute;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  background: rgb(13 23 48 / 72%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 16px;
  box-shadow: 0 20px 50px -15px rgb(0 0 0 / 60%);
  backdrop-filter: blur(14px) saturate(1.4);
  animation: flotte-puce 6s ease-in-out infinite;
}

.puce strong {
  display: block;
  font-weight: 600;
}

.puce small {
  font-size: 0.75rem;
  color: var(--gris-nuit);
}

.puce-1 {
  --z: 130px;

  top: 20%;
  left: -7%;
}

.puce-2 {
  --z: 80px;

  top: 9%;
  right: -6%;
  animation-delay: -2s;
}

.puce-3 {
  --z: 150px;

  bottom: 34%;
  left: -5%;
  animation-delay: -4s;
}

@keyframes flotte-puce {
  0%,
  100% {
    transform: translateZ(var(--z)) translateY(0);
  }

  50% {
    transform: translateZ(var(--z)) translateY(-10px);
  }
}

.puce-icone {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.2rem;
  border-radius: 12px;
}

.puce-icone.vert {
  color: var(--menthe);
  background: rgb(34 197 94 / 18%);
}

.puce-icone.orange {
  color: #fb923c;
  background: rgb(249 115 22 / 18%);
}

.anneau {
  --pc: 77;

  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: conic-gradient(var(--menthe) calc(var(--pc) * 1%), rgb(255 255 255 / 12%) 0);
  border-radius: 50%;
}

.anneau b {
  display: grid;
  place-items: center;
  width: 80%;
  height: 80%;
  font-size: 0.6rem;
  background: #0d1730;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .heros {
    padding-top: 7rem;
  }

  .scene {
    margin-top: 3rem;
  }

  .puce-2,
  .puce-3 {
    display: none;
  }

  .puce-1 {
    top: auto;
    bottom: -6%;
    left: 2%;
    font-size: 0.75rem;
  }

  .telephone-heros {
    width: 30%;
    border-radius: 26px;
    padding: 6px;
  }

  .telephone-heros img {
    border-radius: 21px;
  }

  .telephone-heros::before {
    top: 11px;
    height: 12px;
  }
}

/* ---------- Bande défilante ---------- */

.bande {
  position: relative;
  z-index: 3;
  padding: 1.1rem 0;
  overflow: hidden;
  background: var(--nuit);
  border-block: 1px solid rgb(255 255 255 / 8%);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.bande-piste {
  display: flex;
  width: max-content;
  animation: defile 40s linear infinite;
}

.bande-piste span {
  display: inline-flex;
  gap: 2.5rem;
  align-items: center;
  padding-right: 2.5rem;
  font-weight: 600;
  color: rgb(255 255 255 / 55%);
  white-space: nowrap;
}

.bande-piste span::after {
  width: 6px;
  height: 6px;
  content: '';
  background: var(--emeraude);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--menthe);
}

@keyframes defile {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Chiffres ---------- */

.chiffres {
  padding: 4rem 0 5rem;
  color: #fff;
  background: var(--nuit);
}

.chiffres-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.chiffres-grille > div {
  padding-left: 1.4rem;
  border-left: 1px solid rgb(255 255 255 / 12%);
}

.chiffres strong {
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: transparent;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff, #a7f3d0);
  background-clip: text;
}

.chiffres strong span {
  color: inherit;
}

.chiffres-grille > div > span {
  display: block;
  max-width: 15rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--gris-nuit);
}

@media (max-width: 860px) {
  .chiffres-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Sections ---------- */

section {
  padding-block: 6.5rem;
}

.heros,
.chiffres {
  padding-bottom: 0;
}

.chiffres {
  padding-bottom: 5rem;
}

.titre-section {
  max-width: 46rem;
  margin: 0 auto 3.2rem;
  text-align: center;
}

.titre-section h2,
.securite h2,
.contact h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
}

.titre-section p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--gris);
}

.surtitre {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--emeraude-fonce);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.securite .surtitre,
.contact .surtitre {
  color: var(--menthe);
}

.icone {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  font-size: 1.35rem;
  color: var(--emeraude-fonce);
  background: var(--emeraude-pale);
  border-radius: 14px;
}

.bientot {
  margin-left: 0.4rem;
  padding: 0.12rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #c2410c;
  white-space: nowrap;
  vertical-align: middle;
  background: #fff1e6;
  border-radius: 999px;
}

/* ---------- Visite guidée ---------- */

.visite {
  background: radial-gradient(ellipse at 100% 0%, rgb(0 166 81 / 8%), transparent 50%), var(--fond);
}

.visite-grille {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) 2fr;
  gap: 2.5rem;
  align-items: center;
}

.visite-onglets {
  display: grid;
  gap: 0.6rem;
}

.visite-onglets button {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.4rem;
  overflow: hidden;
  font: inherit;
  color: var(--gris);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.visite-onglets button:hover {
  background: rgb(255 255 255 / 60%);
}

.visite-onglets button[aria-selected='true'] {
  background: #fff;
  border-color: var(--bordure);
  box-shadow: 0 18px 40px -22px rgb(13 27 61 / 30%);
}

.onglet-titre {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texte);
}

.onglet-texte {
  max-height: 0;
  overflow: hidden;
  font-size: 0.93rem;
  opacity: 0;
  transition:
    max-height 0.5s var(--douceur),
    opacity 0.4s;
}

[aria-selected='true'] .onglet-texte {
  max-height: 8rem;
  opacity: 1;
}

.onglet-barre {
  position: absolute;
  right: 1.25rem;
  bottom: 0.6rem;
  left: 1.25rem;
  height: 3px;
  overflow: hidden;
  background: rgb(0 166 81 / 12%);
  border-radius: 3px;
  opacity: 0;
}

.onglet-barre::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(90deg, var(--emeraude), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
}

[aria-selected='true'] .onglet-barre {
  opacity: 1;
}

[aria-selected='true'] .onglet-barre::after {
  animation: progression 7s linear forwards;
}

.visite-grille:hover .onglet-barre::after,
.visite-grille:focus-within .onglet-barre::after {
  animation-play-state: paused;
}

@keyframes progression {
  to {
    transform: scaleX(1);
  }
}

.visite-ecran {
  box-shadow: 0 40px 90px -30px rgb(13 27 61 / 45%);
}

.visite-images {
  position: relative;
  aspect-ratio: 1440 / 900;
}

.visite-images img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.7s,
    transform 1.2s var(--douceur);
}

.visite-images img.actif {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 960px) {
  .visite-grille {
    grid-template-columns: 1fr;
  }

  .visite-ecran {
    order: -1;
  }
}

/* ---------- Fonctionnalités : la mosaïque ---------- */

.fonctionnalites {
  background: #fff;
}

.mosaique {
  display: grid;
  grid-template-areas:
    'a a a a b b'
    'c c d d b b'
    'c c e e f f'
    'g g g h h h';
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.tuile {
  position: relative;
  padding: 1.9rem;
  overflow: hidden;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 26px;
  transition:
    transform 0.4s var(--douceur),
    box-shadow 0.4s,
    opacity 0.9s var(--douceur) var(--attente, 0s),
    translate 0.9s var(--douceur) var(--attente, 0s);
}

.tuile:hover {
  box-shadow: 0 30px 60px -30px rgb(13 27 61 / 30%);
  transform: translateY(-4px);
}

.tuile h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.3rem;
}

.tuile p {
  margin: 0;
  color: var(--gris);
}

/* La lueur qui suit la souris (effets.js). */
.lueur::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 0%),
    rgb(0 166 81 / 13%),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s;
}

.lueur:hover::before {
  opacity: 1;
}

.tuile > * {
  position: relative;
}

.tuile-bulletin {
  display: grid;
  grid-area: a;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.5rem;
  align-items: center;
  min-height: 25rem;
  padding-right: 0;
  padding-bottom: 0;
  background: linear-gradient(135deg, var(--fond), #e8f7ee);
}

.tuile-bulletin .tuile-texte {
  padding-bottom: 1.9rem;
}

.document-scanne {
  align-self: end;
  margin-right: -2%;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 30px 60px -20px rgb(13 27 61 / 35%);
  transform: rotate(-4deg) translateY(10%);
  transition: transform 0.6s var(--douceur);
}

.tuile-bulletin:hover .document-scanne {
  transform: rotate(-2deg) translateY(6%);
}

.document-scanne img {
  display: block;
  width: 100%;
  height: auto;
}

.rayon-scan {
  position: absolute;
  top: -24%;
  right: 0;
  left: 0;
  height: 24%;
  background: linear-gradient(to bottom, transparent, rgb(0 166 81 / 20%) 85%, #22c55e);
  box-shadow: 0 2px 16px rgb(34 197 94 / 70%);
  animation: balayage 4s ease-in-out infinite;
}

@keyframes balayage {
  0% {
    top: -24%;
  }

  65%,
  100% {
    top: 100%;
  }
}

.badge-verifie {
  position: absolute;
  top: 34%;
  right: 10%;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--emeraude);
  border-radius: 999px;
  box-shadow: 0 12px 28px -6px rgb(0 166 81 / 65%);
  animation: tampon 4s ease-in-out infinite;
}

@keyframes tampon {
  0%,
  55% {
    opacity: 0;
    transform: scale(1.6) rotate(-8deg);
  }

  65%,
  92% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: scale(1) rotate(-8deg);
  }
}

.tuile-recu {
  display: flex;
  flex-direction: column;
  grid-area: b;
  padding-bottom: 0;
}

.imprimante {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 20rem;
  margin-top: 1.6rem;
}

.imprimante-fente {
  position: relative;
  z-index: 2;
  width: 88%;
  height: 20px;
  background: linear-gradient(#22304f, #0d1730);
  border-radius: 10px;
  box-shadow:
    inset 0 -5px 8px rgb(0 0 0 / 45%),
    0 8px 16px -6px rgb(13 27 61 / 40%);
}

.ticket {
  width: 76%;
  margin-top: -9px;
  overflow: hidden;
}

.ticket img {
  --dent: 7px;

  display: block;
  width: 100%;
  height: auto;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% /
    calc(2 * var(--dent)) 100%;
  transform: translateY(-100%);
  transition: transform 2.8s cubic-bezier(0.3, 0.6, 0.3, 1) 0.5s;
}

.tuile-recu.visible .ticket img {
  transform: translateY(0);
}

.tuile-famille {
  display: flex;
  flex-direction: column;
  grid-area: c;
  padding-bottom: 0;
  background: radial-gradient(circle at 50% 100%, #d9f3e3, var(--fond) 65%);
}

.telephone-tuile {
  width: min(64%, 15rem);
  margin: 2rem auto -30%;
}

.notification {
  position: absolute;
  top: 9%;
  right: 5%;
  left: 5%;
  z-index: 3;
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--texte);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 35px -10px rgb(13 27 61 / 45%);
  animation: notif 6.5s ease-in-out infinite;
}

.notification-app {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.62rem;
  color: var(--gris-clair);
}

.notification-app img {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.notification strong {
  font-size: 0.76rem;
}

@keyframes notif {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-140%);
  }

  16%,
  72% {
    opacity: 1;
    transform: translateY(0);
  }

  82%,
  100% {
    opacity: 0;
    transform: translateY(-140%);
  }
}

.tuile-finances {
  grid-area: d;
}

.barres {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
  height: 6rem;
  margin-top: 1.4rem;
}

.barres span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, #22c55e, var(--emeraude));
  border-radius: 6px 6px 2px 2px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1s var(--douceur);
}

.barres span:nth-child(even) {
  background: linear-gradient(180deg, #fdba74, var(--orange));
}

.barres span:nth-child(1) {
  --h: 62%;
}

.barres span:nth-child(2) {
  --h: 38%;
  transition-delay: 0.08s;
}

.barres span:nth-child(3) {
  --h: 84%;
  transition-delay: 0.16s;
}

.barres span:nth-child(4) {
  --h: 46%;
  transition-delay: 0.24s;
}

.barres span:nth-child(5) {
  --h: 70%;
  transition-delay: 0.32s;
}

.barres span:nth-child(6) {
  --h: 30%;
  transition-delay: 0.4s;
}

.barres span:nth-child(7) {
  --h: 100%;
  transition-delay: 0.48s;
}

.tuile-finances.visible .barres span {
  transform: scaleY(1);
}

.tuile-bilingue {
  grid-area: e;
}

.tuile .bascule-mots {
  position: relative;
  height: 2.4rem;
  margin-top: 1.3rem;
  overflow: hidden;
}

.mot {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.45rem;
  font-weight: 800;
  color: transparent;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--emeraude), #0ea5e9);
  background-clip: text;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.5s,
    transform 0.5s var(--douceur);
}

.mot.actif {
  opacity: 1;
  transform: translateY(0);
}

.mot.sortant {
  opacity: 0;
  transform: translateY(-100%);
}

.tuile-appel {
  grid-area: f;
}

.appel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.appel span {
  aspect-ratio: 1;
  background: #d1fae5;
  border: 2px solid #22c55e;
  border-radius: 50%;
}

.appel .absent {
  animation: absent 4s ease-in-out infinite;
}

.appel .retard {
  animation: retard 4s ease-in-out infinite;
}

@keyframes absent {
  0%,
  35% {
    background: #d1fae5;
    border-color: #22c55e;
    box-shadow: 0 0 0 0 rgb(239 68 68 / 0%);
  }

  45%,
  90% {
    background: #fee2e2;
    border-color: #ef4444;
    box-shadow: 0 0 0 6px rgb(239 68 68 / 18%);
  }

  100% {
    background: #d1fae5;
    border-color: #22c55e;
  }
}

@keyframes retard {
  0%,
  50% {
    background: #d1fae5;
    border-color: #22c55e;
  }

  60%,
  90% {
    background: #fef3c7;
    border-color: #f59e0b;
  }

  100% {
    background: #d1fae5;
    border-color: #22c55e;
  }
}

.tuile-excel {
  grid-area: g;
}

.import {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0;
  margin: 1.4rem 0 0;
  list-style: none;
}

.import li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.5s,
    transform 0.5s var(--douceur);
}

.import svg {
  font-size: 1.1rem;
  color: var(--emeraude);
  stroke-width: 3;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.5s 0.3s;
}

.tuile-excel.visible .import li {
  opacity: 1;
  transform: none;
}

.tuile-excel.visible .import svg {
  stroke-dashoffset: 0;
}

.import li:nth-child(2),
.import li:nth-child(2) svg {
  transition-delay: 0.25s;
}

.import li:nth-child(3),
.import li:nth-child(3) svg {
  transition-delay: 0.5s;
}

.import li:nth-child(4),
.import li:nth-child(4) svg {
  transition-delay: 0.75s;
}

.tuile-autres {
  grid-area: h;
  color: #fff;
  background: radial-gradient(circle at 100% 0%, rgb(0 166 81 / 30%), transparent 55%), var(--nuit);
  border-color: transparent;
}

.tuile-autres h3 {
  margin-top: 0;
}

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 1.1rem 0 0;
  list-style: none;
}

.etiquettes li {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  color: #dce6f2;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
}

.etiquettes .bientot {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  color: #fdba74;
  background: rgb(249 115 22 / 12%);
  border-color: rgb(249 115 22 / 40%);
}

@media (max-width: 1000px) {
  .mosaique {
    grid-template-areas:
      'a a'
      'b c'
      'd e'
      'f g'
      'h h';
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .mosaique {
    grid-template-areas: 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h';
    grid-template-columns: 1fr;
  }

  .tuile-bulletin {
    grid-template-columns: 1fr;
    padding-right: 1.9rem;
  }

  .tuile-bulletin .tuile-texte {
    padding-bottom: 0;
  }

  .document-scanne {
    margin-right: 0;
  }

  .import {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sécurité ---------- */

.securite {
  color: #fff;
  background:
    radial-gradient(ellipse at 80% 50%, rgb(0 166 81 / 20%), transparent 55%), var(--nuit);
}

.securite-grille {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.securite-chapeau {
  max-width: 34rem;
  font-size: 1.05rem;
  color: #b9c6da;
}

.securite-liste {
  display: grid;
  gap: 0.9rem;
  padding: 0;
  margin: 2rem 0 0;
  list-style: none;
}

.securite-liste li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  color: #b9c6da;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 18px;
  transition:
    background 0.3s,
    border-color 0.3s;
}

.securite-liste li:hover {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(74 222 128 / 30%);
}

.securite-liste .icone {
  flex: none;
  color: var(--menthe);
  background: rgb(34 197 94 / 14%);
}

.securite-liste strong {
  color: #fff;
}

.bouclier {
  position: relative;
  display: grid;
  place-items: center;
  width: min(26rem, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.onde {
  position: absolute;
  inset: 22%;
  border: 1px solid rgb(74 222 128 / 45%);
  border-radius: 50%;
  animation: onde 4.5s ease-out infinite;
}

.onde:nth-child(2) {
  animation-delay: -1.5s;
}

.onde:nth-child(3) {
  animation-delay: -3s;
}

@keyframes onde {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

.orbite {
  position: absolute;
  inset: 6%;
  border: 1px dashed rgb(255 255 255 / 16%);
  border-radius: 50%;
  animation: tourne 30s linear infinite;
}

.satellite {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.35rem;
  color: var(--menthe);
  background: #0f1d3d;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 15px;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 60%);
  animation: contre 30s linear infinite;
}

.satellite:nth-child(1) {
  top: -1.6rem;
  left: calc(50% - 1.6rem);
}

.satellite:nth-child(2) {
  bottom: 8%;
  left: 3%;
}

.satellite:nth-child(3) {
  right: 3%;
  bottom: 8%;
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

@keyframes contre {
  to {
    transform: rotate(-360deg);
  }
}

.bouclier-coeur {
  position: relative;
  display: grid;
  place-items: center;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 28%;
  box-shadow:
    0 0 90px rgb(34 197 94 / 45%),
    0 0 0 1px rgb(255 255 255 / 12%);
}

.bouclier-coeur img {
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .securite-grille {
    grid-template-columns: 1fr;
  }

  .bouclier {
    width: min(20rem, 90%);
  }
}

/* ---------- Bientôt : la feuille de route ---------- */

.prochainement {
  background:
    radial-gradient(ellipse at 0% 100%, rgb(14 165 233 / 8%), transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgb(0 166 81 / 8%), transparent 50%), var(--fond);
}

.feuille {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.feuille-colonne {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: 0 30px 60px -40px rgb(13 27 61 / 35%);
}

.feuille-colonne h3 {
  margin: 0.8rem 0 1.4rem;
  font-size: 1.5rem;
}

.feuille-colonne ul {
  display: grid;
  gap: 1.1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.feuille-colonne li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: var(--gris);
}

.feuille-colonne li strong {
  color: var(--texte);
}

.feuille-colonne .icone {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.15rem;
}

.etat {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0.85rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
}

.etat span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.etat.en-cours {
  color: var(--emeraude-fonce);
  background: var(--emeraude-pale);
}

.etat.en-cours span {
  background: var(--emeraude);
  animation: pouls 1.8s ease-out infinite;
}

.etat.prevu {
  color: #0369a1;
  background: #e0f2fe;
}

.etat.prevu span {
  background: #0ea5e9;
}

.feuille-colonne:has(.prevu) .icone {
  color: #0369a1;
  background: #e0f2fe;
}

@keyframes pouls {
  0% {
    box-shadow: 0 0 0 0 rgb(0 166 81 / 55%);
  }

  100% {
    box-shadow: 0 0 0 9px rgb(0 166 81 / 0%);
  }
}

@media (max-width: 860px) {
  .feuille {
    grid-template-columns: 1fr;
  }
}

/* ---------- Démarrer ---------- */

.demarrer {
  background: #fff;
}

.etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes::before {
  position: absolute;
  top: 1.4rem;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  content: '';
  background: linear-gradient(90deg, var(--emeraude), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s cubic-bezier(0.4, 0.1, 0.2, 1) 0.3s;
}

.etapes.visible::before {
  transform: scaleX(1);
}

.etapes li {
  position: relative;
  text-align: center;
}

.etapes li::before {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto 1.2rem;
  font-weight: 800;
  color: var(--emeraude-fonce);
  content: counter(etape);
  counter-increment: etape;
  background: #fff;
  border: 2px solid var(--emeraude);
  border-radius: 50%;
  box-shadow:
    0 0 0 7px #fff,
    0 10px 25px -8px rgb(0 166 81 / 55%);
}

.etapes h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.etapes p {
  max-width: 16rem;
  margin: 0 auto;
  font-size: 0.95rem;
  color: var(--gris);
}

@media (max-width: 760px) {
  .etapes {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .etapes::before {
    display: none;
  }
}

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

.tarifs {
  background: var(--fond);
}

.offres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.5rem 1.6rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  transition:
    transform 0.4s var(--douceur),
    box-shadow 0.4s,
    opacity 0.9s var(--douceur) var(--attente, 0s),
    translate 0.9s var(--douceur) var(--attente, 0s);
}

.offre:hover {
  box-shadow: 0 30px 60px -30px rgb(13 27 61 / 30%);
  transform: translateY(-5px);
}

.offre.vedette {
  isolation: isolate;
  border-color: transparent;
  box-shadow: 0 30px 70px -30px rgb(0 166 81 / 60%);
}

.offre.vedette::before {
  position: absolute;
  inset: -2px;
  z-index: -2;
  content: '';
  background: conic-gradient(
    from var(--angle),
    var(--emeraude),
    var(--cyan),
    var(--menthe),
    #0ea5e9,
    var(--emeraude)
  );
  border-radius: calc(var(--rayon) + 2px);
  animation: tourne-angle 6s linear infinite;
}

.offre.vedette::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: #fff;
  border-radius: var(--rayon);
}

@keyframes tourne-angle {
  to {
    --angle: 360deg;
  }
}

.ruban {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  padding: 0.3rem 0.95rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--emeraude), #0ea5e9);
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgb(0 166 81 / 60%);
  transform: translateX(-50%);
}

.offre h3 {
  margin: 0;
  font-size: 1.3rem;
}

.offre h3 .bientot {
  display: block;
  width: fit-content;
  margin: 0.35rem 0 0;
}

.pour {
  margin: 0.25rem 0 1.1rem;
  font-size: 0.9rem;
  color: var(--gris);
}

.prix {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.prix small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gris);
  letter-spacing: 0;
}

.minimum {
  margin: 0.2rem 0 1.1rem;
  font-size: 0.85rem;
  color: var(--gris);
}

.offre ul {
  flex: 1;
  padding-left: 1.1rem;
  margin: 0 0 1.5rem;
}

.offre li {
  margin-bottom: 0.4rem;
  font-size: 0.93rem;
}

.offre li::marker {
  color: var(--emeraude);
}

.calculateur {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.5rem 1.8rem;
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.calculateur .champs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.calculateur label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
}

.calculateur input,
.calculateur select {
  width: 9rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
}

.calculateur output {
  display: block;
}

.calculateur strong {
  font-size: 1.2rem;
  color: var(--emeraude-fonce);
}

.notes-tarifs {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--gris);
}

@media (max-width: 1000px) {
  .offres {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
}

@media (max-width: 640px) {
  .offres,
  .calculateur {
    grid-template-columns: 1fr;
  }
}

/* ---------- Questions ---------- */

.questions-section {
  background: #fff;
}

.questions {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
  margin-inline: auto;
}

details {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

details[open] {
  background: #fff;
  box-shadow: 0 20px 40px -25px rgb(13 27 61 / 25%);
}

summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--emeraude);
  content: '+';
  transition: transform 0.35s var(--douceur);
}

details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  padding: 0 1.35rem 1.25rem;
  margin: 0;
  color: var(--gris);
}

/* Ouverture en douceur, là où le navigateur le permet. */
details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s var(--douceur),
    content-visibility 0.4s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--nuit);
}

.aurore-douce .nappe {
  opacity: 0.4;
}

.contact-grille {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}

.contact-texte p {
  font-size: 1.08rem;
  color: #b9c6da;
}

.contact .garanties {
  flex-direction: column;
  align-items: flex-start;
}

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1rem;
  padding: 2rem;
  color: var(--texte);
  background: rgb(255 255 255 / 97%);
  border-radius: 26px;
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / 65%);
}

.formulaire label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.formulaire .large {
  grid-column: 1 / -1;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: none;
  border-color: var(--emeraude);
  box-shadow: 0 0 0 4px rgb(0 166 81 / 15%);
}

.formulaire .piege {
  display: none;
}

.mention-donnees {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gris);
}

@media (max-width: 860px) {
  .contact-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .formulaire {
    grid-template-columns: 1fr;
    padding: 1.4rem;
  }
}

/* ---------- Pied de page ---------- */

.pied {
  padding-block: 3.5rem 3rem;
  font-size: 0.92rem;
  color: var(--gris-nuit);
  background: var(--nuit);
  border-top: 1px solid rgb(255 255 255 / 8%);
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}

.pied img {
  height: 2.2rem;
  width: auto;
}

.pied-marque p {
  max-width: 20rem;
  margin: 1rem 0 0;
}

.pied h2 {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pied ul {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pied li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.pied a {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--gris-nuit);
  text-decoration: none;
  transition: color 0.2s;
}

.pied a:hover {
  color: var(--menthe);
}

.pied li > svg,
.pied a svg {
  margin-top: 0.15em;
  color: var(--menthe);
}

@media (max-width: 860px) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }

  .pied-marque {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pied-grille {
    grid-template-columns: 1fr;
  }
}

/* Le contact WhatsApp, sous les garanties de l'essai. */
.whatsapp {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  margin-top: 1.8rem;
}

.contact-texte .whatsapp span {
  font-size: 0.95rem;
  color: var(--gris-nuit);
}

.lien-courriel {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding-left: 0.4rem;
  color: #dce6f2;
  text-decoration: none;
}

.lien-courriel:hover {
  color: var(--menthe);
}

.lien-courriel svg {
  color: var(--menthe);
}

.whatsapp .bouton-verre svg {
  font-size: 1.15rem;
  fill: none;
  stroke: #25d366;
}

/* ---------- Pages de remerciement et page introuvable ---------- */

.merci {
  display: grid;
  place-items: center;
  min-height: 80vh;
  text-align: center;
}

.carte {
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.merci .carte {
  max-width: 34rem;
  margin: 1rem;
}

.merci h1 {
  font-size: 1.5rem;
}

.merci p {
  margin-top: 1rem;
  color: var(--gris);
}

.merci .bouton-clair {
  margin-left: 0.5rem;
}

/* ---------- Mouvement réduit : tout s'affiche, rien ne bouge ---------- */

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

  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-reveler]:not(.visible) {
    opacity: 1;
    translate: none;
  }

  .ticket img,
  .barres span,
  .import li {
    opacity: 1;
    transform: none;
  }

  .import svg {
    stroke-dashoffset: 0;
  }

  .notification,
  .badge-verifie {
    opacity: 1;
    transform: none;
  }
}