/* ==========================================================================
   BRL Digital : styles
   Mobile d'abord. Les couleurs passent toutes par les rôles de variables.css,
   pour qu'une section .clair change de couleur sans règle en plus.

   Mouvement : chaque animation a un état final lisible par défaut. Les
   animations ne s'ajoutent que si JS est actif (.js) et que le visiteur
   n'a pas demandé à réduire les animations.

   Sommaire : base, boutons, en-tête, sections, hero, sites en éventail,
   logos, avant/après, piliers, outils, réalisations, projets, tâches,
   tarifs, méthode, engagements, trio, FAQ, appel, pied de page,
   à fournir, mouvement.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-weight: var(--gras-texte);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3 {
  color: var(--titre);
  font-weight: var(--gras-titre);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }

p { text-wrap: pretty; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

p a,
.chapo a,
.qr-r a {
  color: var(--lien);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-thickness .2s;
}

p a:hover,
.chapo a:hover,
.qr-r a:hover { text-decoration-thickness: 2px; }

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

.clair :focus-visible { outline-color: var(--violet-fonce); }

address { font-style: normal; }

.violet { color: var(--accent-texte); }

.wrap {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.evitement {
  position: absolute;
  left: var(--e-4);
  top: -4rem;
  z-index: 100;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--pilule);
  background: var(--violet);
  color: var(--encre);
  font-weight: var(--gras-bouton);
  text-decoration: none;
  transition: top .2s;
}

.evitement:focus { top: var(--e-4); }

/* Coche violette, réutilisée par les interfaces dessinées */
.coche-violette {
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* ---------- Boutons : pilule, texte noir sur le violet ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--pilule);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--gras-bouton);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--sortie);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-violet {
  background: var(--violet);
  color: var(--encre);
}

.btn-violet:hover { background: var(--violet-survol); }

.btn-contour {
  border-color: var(--bordure);
  color: var(--titre);
  background: transparent;
}

.btn-contour:hover { border-color: var(--titre); }

.btn-petit {
  min-height: 2.5rem;
  padding: .5rem 1.125rem;
  font-size: .9375rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
}

/* Lien suivi d'une flèche */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--accent-texte);
  font-weight: var(--gras-bouton);
  text-decoration: none;
}

.lien-fleche::after {
  content: "";
  width: .5em;
  height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--sortie);
}

a:hover > .lien-fleche::after,
a.lien-fleche:hover::after { transform: translateX(4px) rotate(45deg); }

/* ---------- En-tête : barre en pilule, masquée quand on descend ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--e-3) var(--gouttiere) 0;
  transition: transform .45s var(--sortie);
}

.entete.cache { transform: translateY(-120%); }

.entete-in {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  max-width: var(--largeur);
  margin-inline: auto;
  padding: .5rem .5rem .5rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--pilule);
  transition: background-color .3s, border-color .3s;
}

.entete.defile .entete-in {
  background: rgba(20, 20, 22, .82);
  border-color: var(--trait-sombre);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Menu ouvert : pas de flou, sinon le panneau plein écran reste prisonnier de la barre */
.entete.ouvert .entete-in {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.marque { flex: none; margin-right: auto; }
.marque img { width: 7.5rem; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--pilule);
  background: var(--carte-1);
  color: var(--blanc);
  font: inherit;
  font-size: .9375rem;
  font-weight: var(--gras-bouton);
  cursor: pointer;
}

.burger-ico { position: relative; width: 1.125rem; height: .75rem; }

.burger-ico i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--sortie), top .3s var(--sortie);
}

.burger-ico i:first-child { top: 1px; }
.burger-ico i:last-child { top: 9px; }
.burger[aria-expanded="true"] .burger-ico i:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-ico i:last-child { top: 5px; transform: rotate(-45deg); }

/* Menu téléphone : panneau plein écran */
.nav {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  padding: 6rem var(--gouttiere) var(--e-6);
  background: var(--encre);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility 0s .3s;
}

.entete.ouvert .nav {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s;
}

.nav-liste { display: flex; flex-direction: column; }
.nav-liste > li { border-bottom: 1px solid var(--trait-sombre); }

.nav-liste > li > a,
.nav-bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--e-4) 0;
  border: 0;
  background: none;
  color: var(--blanc);
  font: inherit;
  font-size: 1.375rem;
  font-weight: var(--gras-titre);
  letter-spacing: -.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav-bouton svg {
  width: .75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  transition: transform .25s var(--sortie);
}

.nav-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.sous-menu { display: none; padding-bottom: var(--e-4); }
.nav-bouton[aria-expanded="true"] + .sous-menu { display: block; }

.sous-menu a {
  display: block;
  padding: var(--e-3) 0;
  text-decoration: none;
}

.sous-menu strong {
  display: block;
  color: var(--blanc);
  font-weight: var(--gras-bouton);
}

.sous-menu span {
  display: block;
  color: var(--gris-discret);
  font-size: var(--t-petit);
}

.nav a[aria-current="page"] { color: var(--violet); }

.nav-cta { display: none; } /* doublon du bouton Contact de la barre, toujours visible */

/* Téléphone : le bouton Contact reste dans la barre, à côté du menu */
.entete-cta { display: inline-flex; }

@media (max-width: 39.99em) {
  .entete-in { gap: var(--e-2); padding-left: 1rem; }
  .marque img { width: 6rem; }
  .entete-cta { padding-inline: .875rem; }
}

/* Très petits écrans : le menu garde son icône, le mot reste lu par les lecteurs d'écran */
@media (max-width: 22.49em) {
  .burger { padding-inline: .8125rem; }
  .burger-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 75em) {
  .burger { display: none; }

  .nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }

  .nav-liste { flex-direction: row; align-items: center; gap: .125rem; }
  .nav-liste > li { position: relative; border: 0; }

  .nav-liste > li > a,
  .nav-bouton {
    gap: .375rem;
    width: auto;
    padding: .5rem .75rem;
    border-radius: var(--pilule);
    color: var(--gris-texte);
    font-size: .9375rem;
    font-weight: var(--gras-bouton);
    letter-spacing: 0;
    transition: color .2s, background-color .2s;
  }

  .nav-liste > li > a:hover,
  .nav-bouton:hover,
  .nav-groupe:focus-within .nav-bouton { color: var(--blanc); background: rgba(255, 255, 255, .06); }

  .nav-bouton svg { width: .625rem; }

  .sous-menu {
    position: absolute;
    top: 100%;
    left: -.5rem;
    display: block;
    width: 20rem;
    padding-top: .75rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s var(--sortie), visibility 0s .2s;
  }

  .sous-menu ul {
    padding: .5rem;
    border: 1px solid var(--trait-sombre);
    border-radius: var(--rayon);
    background: var(--carte-1);
    box-shadow: var(--ombre-fenetre);
  }

  .sous-menu a {
    padding: .75rem 1rem;
    border-radius: var(--rayon-s);
    transition: background-color .2s;
  }

  .sous-menu a:hover { background: var(--carte-2); }

  .nav-groupe:hover .sous-menu,
  .nav-bouton[aria-expanded="true"] + .sous-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s, transform .2s var(--sortie);
  }

  .nav-groupe:hover .nav-bouton svg { transform: rotate(180deg); }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--e-section);
  background: var(--fond);
  color: var(--texte);
}

.section-serree { padding-top: 0; }

.tete {
  max-width: 48rem;
  margin: 0 auto var(--e-7);
  text-align: center;
}

.tete-gauche { margin-inline: 0; text-align: left; }

.tete-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  max-width: none;
  text-align: left;
}

.tete-ligne > div { max-width: 40rem; }

.chapo {
  margin-top: var(--e-4);
  color: var(--texte);
  font-size: var(--t-chapo);
  line-height: 1.5;
}

.carte {
  display: block;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  text-decoration: none;
}

a.carte { transition: border-color .25s, transform .35s var(--sortie); }
a.carte:hover { border-color: #3A3A40; transform: translateY(-4px); }

.tuile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--bordure);
  border-radius: .75rem;
  background: var(--carte-haute);
}

.tuile svg {
  width: 1.375rem;
  fill: none;
  stroke: var(--accent-texte);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pastilles des interfaces dessinées */
.pastille {
  justify-self: start;
  padding: .125rem .5rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--pilule);
  color: var(--gris-texte);
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
  transition: background-color .4s, color .4s, border-color .4s;
}

.pastille-violet { border-color: transparent; background: var(--violet); color: var(--encre); }
.pastille-ok { border-color: #34343A; background: var(--carte-2); color: var(--blanc); }

/* Barres obliques du logo, avec parcimonie : coins d'image ou de panneau */
.barres {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: .3125rem;
}

.barres i {
  width: .625rem;
  height: 1.75rem;
  background: var(--violet);
  transform: skewX(-30deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(8rem, 6rem + 8vw, 11.5rem);
  text-align: center;
}

.hero-tete { position: relative; z-index: 1; }

.hero h1 { max-width: 14ch; margin-inline: auto; }

.hero-sous-titre {
  max-width: 40rem;
  margin: var(--e-5) auto 0;
  font-size: var(--t-chapo);
  line-height: 1.5;
}

.hero .actions { margin-top: var(--e-6); }

.hero-preuves {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-5);
  color: var(--discret);
  font-size: var(--t-petit);
}

.hero-preuves li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.hero-preuves li::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.hero-scene {
  position: relative;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}

/* Photo de nuit : elle éclaire l'interface par en dessous */
.hero-photo {
  position: absolute;
  inset: 24% 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--e-5);
  background: var(--carte-1);
  border-block: 1px dashed var(--trait-sombre);
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Hero : trois sites réels, en éventail ---------- */
.hero-scene { overflow-x: clip; }

.vitrine {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
  padding-bottom: clamp(4rem, 3rem + 4vw, 6rem);
}

/* --p vaut 1 sans JS (sites écartés) ; le JS le fait passer de 0 à 1 au défilement */
.vitrine-scene {
  position: relative;
  padding-top: 8%;
  perspective: 2200px;
}

.site { position: relative; }

.site-centre {
  z-index: 2;
  width: 84%;
  margin-inline: auto;
}

.site-gauche,
.site-droite {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 62%;
}

.site-gauche { left: -26%; }
.site-droite { right: -26%; }

.site-in { will-change: transform; }

.site-centre .site-in {
  transform: rotateX(calc((1 - var(--p, 1)) * 16deg)) scale(calc(.94 + var(--p, 1) * .06));
  transform-origin: 50% 0;
}

.site-gauche .site-in {
  transform: translateX(calc((1 - var(--p, 1)) * 22%)) rotate(calc(var(--p, 1) * -3deg)) scale(.96);
  transform-origin: 100% 100%;
}

.site-droite .site-in {
  transform: translateX(calc((1 - var(--p, 1)) * -22%)) rotate(calc(var(--p, 1) * 3deg)) scale(.96);
  transform-origin: 0 100%;
}

.vitrine .ecran { box-shadow: var(--ombre-fenetre); }

/* Les sites des côtés restent un cran en retrait */
.site-gauche .ecran-image,
.site-droite .ecran-image { filter: brightness(.62); }

.site-centre .barres { top: -.875rem; right: 1.5rem; }

.ecran-barre i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trait-sombre);
}

/* Étiquette : le nom du client et sa commune */
.site-legende {
  position: absolute;
  bottom: -1.125rem;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem .4375rem .75rem;
  border: 1px solid #34343A;
  border-radius: var(--pilule);
  background: var(--carte-2);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8);
  font-size: .8125rem;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
}

.site-legende::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--violet);
}

.site-legende b { color: var(--blanc); font-weight: var(--gras-bouton); }
.site-legende span { color: var(--gris-discret); }

.site-gauche .site-legende,
.site-droite .site-legende { display: none; }

/* Sur téléphone, l'étiquette « à fournir » de la photo passerait sur la légende */
.hero-photo .a-fournir { display: none; }

.vitrine figcaption {
  margin-top: var(--e-7);
  color: var(--discret);
  font-size: var(--t-petit);
  text-align: center;
}

.vitrine figcaption a {
  color: var(--lien);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width: 48em) {
  .hero-photo .a-fournir { display: inline-block; }
  .vitrine-scene { padding-top: 6%; }
  .site-centre { width: 68%; }
  .site-gauche,
  .site-droite { width: 50%; }
  .site-gauche { left: -10%; }
  .site-droite { right: -10%; }
}

@media (min-width: 75em) {
  .site-gauche .site-legende,
  .site-droite .site-legende { display: inline-flex; bottom: 1.25rem; transform: none; }
  .site-gauche .site-legende { left: 1.25rem; }
  .site-droite .site-legende { left: auto; right: 1.25rem; }

  /* Sur les côtés, le nom suffit : la commune passerait sous le site du centre */
  .site-gauche .site-legende span,
  .site-droite .site-legende span { display: none; }
}

/* ---------- Bande de logos ---------- */
.logos { padding-block: var(--e-6) 0; text-align: center; }

.logos-texte {
  margin-bottom: var(--e-4);
  color: var(--discret);
  font-size: var(--t-petit);
}

.logos-defile {
  display: flex;
  justify-content: center;
  padding: var(--e-5) var(--gouttiere);
  border-block: 1px solid var(--trait-sombre);
  overflow: hidden;
}

/* Prêt pour les vrais logos : une piste dupliquée qui défile en boucle */
.logos-piste {
  display: flex;
  align-items: center;
  gap: var(--e-9);
  width: max-content;
  animation: defile 40s linear infinite;
}

.logos-piste img { height: 2rem; width: auto; opacity: .75; }

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

/* ---------- Piliers : quatre cartes de taille égale ---------- */
.piliers { display: grid; gap: var(--e-4); }
.piliers > li { display: flex; }

.pilier {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--e-3) var(--e-3) var(--e-5);
}

.pilier h3 { margin: var(--e-5) var(--e-3) 0; }

.pilier > p {
  margin: var(--e-2) var(--e-3) 0;
  font-size: 1rem;
}

.pilier > p:not(.pilier-prix) { flex: 1; }

.pilier-prix {
  padding-top: var(--e-4);
  color: var(--titre);
  font-size: var(--t-petit) !important;
  font-weight: var(--gras-bouton);
}

.pilier .lien-fleche { margin: var(--e-3) var(--e-3) 0; font-size: .9375rem; }

.pilier-visuel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  height: 10.5rem;
  padding: var(--e-4);
  overflow: hidden;
  border: 1px solid var(--trait-sombre);
  border-radius: calc(var(--rayon) - .5rem);
  background: var(--carte-2);
  font-size: .8125rem;
  line-height: 1.35;
}

/* Être trouvé : une recherche et son résultat */
.v-champ {
  padding: .5rem .875rem .5rem 2rem;
  border: 1px solid var(--trait-sombre);
  border-radius: var(--pilule);
  background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%238E8F93' stroke-width='2'/%3E%3Cpath d='M20 20l-4.5-4.5' stroke='%238E8F93' stroke-width='2'/%3E%3C/svg%3E") .75rem center / .875rem no-repeat;
  color: var(--blanc);
}

.v-frappe { display: inline-block; white-space: nowrap; }

.v-resultat {
  display: grid;
  gap: .125rem;
  padding: .625rem .875rem;
  border-left: 2px solid var(--violet);
  border-radius: 0 8px 8px 0;
  background: var(--carte-1);
}

.v-resultat b { color: var(--blanc); font-weight: var(--gras-bouton); }
.v-resultat span { color: var(--gris-discret); font-size: .75rem; }
.v-resultat .v-ouvert { color: var(--violet); }

/* Suivre vos clients : un prospect avance d'une colonne à l'autre */
.v-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: .5rem;
}

.v-colonnes > div { display: grid; gap: .375rem; }
.v-colonnes span { color: var(--gris-discret); font-size: .6875rem; line-height: 1.35; }

.v-colonnes i {
  height: 1.75rem;
  border: 1px solid var(--trait-sombre);
  border-radius: 6px;
  background: var(--carte-1);
}

.v-jeton {
  position: absolute;
  top: calc(1rem + .9284rem + .375rem);
  left: 1rem;
  display: grid;
  place-items: center;
  width: calc((100% - 3rem) / 3);
  height: 1.75rem;
  border: 1px solid var(--violet);
  border-radius: 6px;
  background: #24223F;
  color: var(--blanc);
  font-size: .6875rem;
  font-weight: var(--gras-bouton);
  white-space: nowrap;
  transform: translateX(calc(200% + 1rem));
}

/* Gagner du temps : des réglages activés */
.v-reglages p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4375rem .625rem;
  border: 1px solid var(--trait-sombre);
  border-radius: 8px;
  background: var(--carte-1);
  color: var(--gris-texte);
}

.interrupteur {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1rem;
  border-radius: var(--pilule);
  background: var(--violet);
}

.interrupteur::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--encre);
  transform: translateX(.75rem);
}

/* Se former à l'IA : une consigne et sa vérification */
.v-bulle {
  align-self: flex-end;
  max-width: 85%;
  padding: .5rem .75rem;
  border-radius: 12px 12px 4px 12px;
  background: var(--carte-1);
  border: 1px solid var(--trait-sombre);
  color: var(--blanc);
}

.v-reponse { display: grid; gap: .3125rem; padding: .25rem .25rem 0; }
.v-reponse i { height: .375rem; border-radius: 3px; background: var(--trait-sombre); transform-origin: left; }
.v-reponse i:nth-child(2) { width: 88%; }
.v-reponse i:nth-child(3) { width: 60%; }

.v-verifie {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  align-self: flex-start;
  color: var(--violet);
  font-weight: var(--gras-bouton);
}

.v-verifie::before {
  content: "";
  width: .875rem;
  height: .875rem;
  border-radius: 4px;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0B0C' stroke-width='1.8'/%3E%3C/svg%3E") center / 80% no-repeat;
}

@media (min-width: 40em) {
  .piliers { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {
  .piliers { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Réalisations : captures dans des cadres d'écran ---------- */
.realisations { display: grid; gap: var(--e-7) var(--e-5); }

.realisation { display: block; text-decoration: none; }

.ecran {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  transition: border-color .3s;
}

.realisation:hover .ecran { border-color: #3A3A40; }

.ecran-barre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--bordure);
}

.ecran-barre span {
  margin-left: auto;
  margin-right: auto;
  padding: .125rem .75rem;
  border-radius: var(--pilule);
  background: var(--encre);
  color: var(--gris-discret);
  font-size: .6875rem;
}

.ecran-image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 0 0 calc(var(--rayon) - 1px) calc(var(--rayon) - 1px);
}

.ecran-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 1.2s var(--sortie);
}

.realisation:hover .ecran-image img { transform: scale(1.05); }

.ecran-vide {
  display: grid;
  place-items: center;
  padding: var(--e-5);
  background: var(--carte-2);
}

.realisation-texte { padding-top: var(--e-5); }
.realisation-texte p { margin-top: var(--e-2); font-size: 1rem; }
.realisation h3 { transition: color .25s; }
.realisation:hover h3 { color: var(--violet); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3) !important;
}

.tags span {
  padding: .1875rem .625rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  color: var(--discret);
  font-size: var(--t-mini);
}

.realisation-une .barres { top: -.875rem; right: 1.5rem; }

@media (min-width: 48em) {
  .realisations { grid-template-columns: 1.55fr 1fr; }
  .realisation-une { grid-row: span 2; }
  .realisation-une .realisation-texte { max-width: 34rem; }
  .realisation-une h3 { font-size: 1.625rem; }
}

/* ---------- Réalisations : la liste des projets, un écran à la fois ---------- */
.projets { display: grid; gap: var(--e-5); }

.projets-liste {
  display: flex;
  gap: var(--e-2);
  margin-inline: calc(var(--gouttiere) * -1);
  padding: 2px var(--gouttiere);
  overflow-x: auto;
  scrollbar-width: none;
}

.projets-liste::-webkit-scrollbar { display: none; }

.projets-liste button {
  position: relative;
  flex: none;
  display: grid;
  gap: .125rem;
  overflow: hidden;
  padding: .875rem 1.125rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, background-color .25s;
}

.projets-liste button:hover { border-color: #3A3A40; }
.projets-liste button[aria-selected="true"] { border-color: var(--violet); background: var(--carte-haute); }
.projets-liste b { color: var(--titre); font-weight: var(--gras-bouton); }
.projets-liste span { color: var(--discret); font-size: var(--t-mini); }

/* Le temps qui reste avant le projet suivant */
.projets-temps {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
}

.projet { display: grid; gap: var(--e-5); }
.projet[hidden] { display: none; }
.projet .ecran { box-shadow: var(--ombre-fenetre); }
.projet-texte p { max-width: 40rem; }

.projet-fonctions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.projet-fonctions li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem .375rem .5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  color: var(--titre);
  font-size: var(--t-petit);
}

.projet-fonctions li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

@media (min-width: 62em) {
  .projets { grid-template-columns: 18rem 1fr; gap: var(--e-7); align-items: start; }

  .projets-liste {
    position: sticky;
    top: 7rem;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .projets-liste button { padding: 1.125rem 1.25rem 1.25rem; }
  .projets-liste span { font-size: var(--t-petit); }
}

/* ---------- Tarifs (section claire) : on choisit, le prix suit ---------- */
.tarifs { display: grid; gap: var(--e-6); align-items: start; }

.tf,
.tm { min-width: 0; margin: 0; padding: 0; border: 0; }

.tf legend,
.tm legend {
  margin-bottom: var(--e-3);
  padding: 0;
  color: var(--titre);
  font-weight: var(--gras-bouton);
}

.tf { display: grid; gap: var(--e-3); }
.tm { margin-top: var(--e-6); }

/* Les boutons radio restent dans la page pour le clavier, mais invisibles */
.tf-option input,
.tm-bascule input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tf-option {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .125rem var(--e-4);
  padding: 1rem 1.25rem 1rem 3.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}

.tf-option::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -.625rem;
  border: 2px solid var(--trait-clair);
  border-radius: 50%;
  background: var(--carte);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}

.tf-option:hover { border-color: var(--ardoise-discret); }

.tf-option:has(input:checked) {
  border-color: var(--violet-fonce);
  box-shadow: 0 0 0 1px var(--violet-fonce);
}

.tf-option:has(input:checked)::before {
  border-color: var(--violet-fonce);
  background: var(--violet-fonce);
  box-shadow: inset 0 0 0 .25rem var(--carte);
}

.tf-option:has(input:focus-visible) { outline: 2px solid var(--violet-fonce); outline-offset: 3px; }

.tf-nom { color: var(--titre); font-size: 1.125rem; font-weight: var(--gras-titre); }
.tf-pages { grid-column: 1; color: var(--discret); font-size: var(--t-petit); }

.tf-prix {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--titre);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  white-space: nowrap;
}

.tm-bascule {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: .3125rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: var(--carte);
}

.tm-bascule label { position: relative; z-index: 1; cursor: pointer; }

.tm-bascule span {
  display: block;
  padding: .6875rem 1.375rem;
  border-radius: var(--pilule);
  color: var(--texte);
  font-size: .9375rem;
  font-weight: var(--gras-bouton);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  transition: color .3s;
}

.tm-bascule input:checked + span { background: var(--violet); color: var(--encre); }
.tm-bascule input:focus-visible + span { outline: 2px solid var(--violet-fonce); outline-offset: 2px; }

.tm-bascule > i {
  position: absolute;
  top: .3125rem;
  bottom: .3125rem;
  left: .3125rem;
  display: none;
  width: calc(50% - .3125rem);
  border-radius: var(--pilule);
  background: var(--violet);
  transition: transform .5s var(--sortie);
}

.tarifs-note { margin-top: var(--e-5); color: var(--discret); font-size: var(--t-petit); }

.tarifs-panneau {
  padding: var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  box-shadow: 0 30px 60px -40px rgba(11, 11, 12, .35);
}

.tp {
  display: grid;
  gap: var(--e-5);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--bordure);
}

.tp + .tp { padding-top: var(--e-5); }

.tp-nom { color: var(--titre); font-size: 1.25rem; font-weight: var(--gras-titre); }
.tp-nom span { margin-left: .375rem; color: var(--discret); font-size: var(--t-petit); font-weight: var(--gras-texte); }

.tp-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem;
  margin-top: var(--e-3);
  color: var(--discret);
}

.tp-prix strong {
  color: var(--titre);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: var(--gras-titre);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
}

.tp-prix small { font-size: var(--t-petit); }
.tp-prix small:first-child { flex-basis: 100%; }
.tp-sous { margin-top: var(--e-2); font-size: 1rem; }
.tp-haut .btn { margin-top: var(--e-5); }

.tp-titre {
  margin-bottom: var(--e-3);
  color: var(--titre);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
}

/* Le plan du site : une étiquette par page */
.tp-plan ul { display: flex; flex-wrap: wrap; gap: .5rem; }

.tp-plan li {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--bordure);
  border-radius: .5rem;
  background: var(--papier);
  color: var(--titre);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
}

.tp-plan li::before {
  content: "";
  width: .625rem;
  height: .75rem;
  border: 1.5px solid var(--violet-fonce);
  border-radius: 2px;
}

.tp-inclus { padding-top: var(--e-5); }
.tp-inclus ul { display: grid; gap: .5rem var(--e-5); }

.tp-inclus li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  color: var(--titre);
  font-size: 1rem;
}

.tp-inclus li::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.tp-inclus .tp-mois-seul { color: var(--violet-fonce); font-weight: var(--gras-bouton); }

.tp-conditions {
  margin-top: var(--e-5);
  padding: .875rem 1rem;
  border-radius: var(--rayon-s);
  background: var(--papier);
  color: var(--ardoise);
  font-size: var(--t-petit);
}

/* Avec :has, seule la formule choisie s'affiche, dans le mode choisi */
@supports selector(:has(*)) {
  .tp,
  .tp-mois,
  .tp-inclus .tp-mois-seul,
  .tp-conditions { display: none; }

  .tp + .tp { padding-top: 0; }

  .tarifs:has(#f-essentiel:checked) .tp-essentiel,
  .tarifs:has(#f-vitrine:checked) .tp-vitrine,
  .tarifs:has(#f-plus:checked) .tp-plus { display: grid; }

  .tarifs:has(#m-mois:checked) .tp-achat { display: none; }
  .tarifs:has(#m-mois:checked) .tp-mois,
  .tarifs:has(#m-mois:checked) .tp-conditions { display: block; }
  .tarifs:has(#m-mois:checked) .tp-inclus .tp-mois-seul { display: flex; }

  .tm-bascule > i { display: block; }
  .tm-bascule input:checked + span { background: none; }
  .tm-bascule:has(#m-mois:checked) > i { transform: translateX(100%); }
}

/* Les autres points de départ */
.departs { margin-top: var(--e-7); }

.departs-titre {
  margin-bottom: var(--e-4);
  color: var(--titre);
  font-weight: var(--gras-bouton);
  text-align: center;
}

.departs ul { display: grid; gap: var(--e-3); }

.departs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
  text-decoration: none;
  transition: border-color .25s, transform .35s var(--sortie);
}

.departs a:hover { border-color: var(--ardoise-discret); transform: translateY(-3px); }
.departs b { color: var(--titre); font-weight: var(--gras-bouton); }
.departs span { color: var(--discret); font-size: var(--t-petit); white-space: nowrap; }

@media (min-width: 40em) {
  .tp-inclus ul { grid-template-columns: 1fr 1fr; }
  /* Autant de colonnes que de cartes : pas de case vide ni de carte orpheline */
  .departs ul { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
  .departs a { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .125rem; }
}

@media (min-width: 62em) {
  .tarifs { grid-template-columns: 5fr 7fr; gap: var(--e-8); }
  .tarifs-panneau { padding: var(--e-6); }
  .tp { grid-template-columns: 1fr 1fr; }
}

/* ---------- Méthode : une frise qui s'allume au fil de la lecture ---------- */
.methode {
  display: grid;
  gap: var(--e-7);
  align-items: start;
}

.methode .tete { margin-bottom: var(--e-6); }

.etapes {
  position: relative;
  display: grid;
  gap: var(--e-6);
  margin-bottom: var(--e-6);
}

/* La ligne qui relie les étapes, et sa partie déjà parcourue */
.etapes::before,
.etapes::after {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 1.375rem;
  bottom: 1.375rem;
  width: 2px;
  background: var(--bordure);
}

.etapes::after {
  background: var(--accent-texte);
  transform: scaleY(var(--p, 1));
  transform-origin: top;
}

.etapes li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--e-4);
  align-items: start;
}

.etape-num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--accent-texte);
  border-radius: 50%;
  background: var(--accent-texte);
  color: var(--encre);
  font-weight: var(--gras-titre);
  transition: border-color .4s, background-color .4s, color .4s;
}

.etapes li > div { transition: opacity .5s; }

/* Avec le suivi au défilement : une étape s'allume quand la ligne l'atteint */
.etapes[data-suivi] li:not(.atteint) .etape-num {
  border-color: var(--bordure);
  background: var(--carte);
  color: var(--discret);
}

.etapes[data-suivi] li:not(.atteint) > div { opacity: .4; }

.etapes p { margin-top: var(--e-1); }

.etape-vous {
  margin-top: var(--e-3) !important;
  padding: .5rem .875rem;
  border-radius: var(--rayon-s);
  background: var(--carte);
  border: 1px solid var(--bordure);
  color: var(--discret);
  font-size: var(--t-petit);
}

.etape-vous b { color: var(--titre); font-weight: var(--gras-bouton); }

.portrait figcaption {
  margin-top: var(--e-3);
  color: var(--discret);
  font-size: var(--t-petit);
  text-align: center;
}

.portrait-vide {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--e-5);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
}

@media (min-width: 62em) {
  .methode { grid-template-columns: 1.2fr 1fr; gap: var(--e-9); }
  .portrait { position: sticky; top: 7rem; }
}

/* ---------- Engagements ---------- */
.engagements { display: grid; gap: var(--e-4); }

.engagement { padding: var(--e-6) var(--e-5); }
.engagement h3 { margin-top: var(--e-5); }
.engagement p { margin-top: var(--e-2); font-size: 1rem; }

@media (min-width: 40em) {
  .engagements { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 75em) {
  .engagements { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Les trois marques ---------- */
.trio { display: grid; gap: var(--e-4); }
.trio > li { display: flex; }

.trio-carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--e-6) var(--e-5);
}

.trio-mot {
  color: var(--titre);
  font-size: clamp(2.25rem, 1.4rem + 2vw, 3.25rem);
  font-weight: var(--gras-titre);
  line-height: 1;
  letter-spacing: -.03em;
}

.trio-marque {
  margin-top: var(--e-4);
  color: var(--titre);
  font-weight: var(--gras-bouton);
}

.trio-carte > p:not(.trio-mot):not(.trio-marque):not(.trio-ici-txt) {
  flex: 1;
  margin: var(--e-2) 0 var(--e-5);
  font-size: 1rem;
}

.trio-ici { border-color: var(--violet); }
.trio-ici .trio-mot { color: var(--violet); }
.trio-ici-txt { color: var(--discret); font-size: var(--t-petit); }

.studio-lien { margin-top: var(--e-6); text-align: center; }

@media (min-width: 62em) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- FAQ (section claire) ---------- */
.faq { display: grid; gap: var(--e-6); }
.faq .tete { margin-bottom: 0; }
.faq-liste { border-top: 1px solid var(--bordure); }
.qr { border-bottom: 1px solid var(--bordure); }

.qr summary {
  position: relative;
  display: block;
  padding: var(--e-5) var(--e-7) var(--e-5) 0;
  color: var(--titre);
  font-size: 1.125rem;
  font-weight: var(--gras-bouton);
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}

.qr summary:hover { color: var(--accent-texte); }
.qr summary::-webkit-details-marker { display: none; }

.qr summary i {
  position: absolute;
  right: 0;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  border: 1px solid var(--bordure);
  border-radius: 50%;
  background: var(--carte);
  transition: background-color .25s, border-color .25s;
}

.qr[open] summary i { background: var(--encre); border-color: var(--encre); }

.qr summary i::before,
.qr summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .75rem;
  height: 2px;
  margin: -1px 0 0 -.375rem;
  background: var(--titre);
  transition: transform .3s var(--sortie), background-color .25s;
}

.qr[open] summary i::before,
.qr[open] summary i::after { background: var(--papier); }

.qr summary i::after { transform: rotate(90deg); }
.qr[open] summary i::after { transform: rotate(0); }

.qr-r { padding: 0 var(--e-7) var(--e-5) 0; }

@media (min-width: 62em) {
  .faq { grid-template-columns: 1fr 1.6fr; gap: var(--e-9); align-items: start; }
  .faq .tete { position: sticky; top: 7rem; }
}

/* ---------- Appel à l'action final ---------- */
.appel { padding-block: var(--e-section); }

.appel-panneau {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--e-5);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  background: var(--carte);
  text-align: center;
}

.barres-appel { top: -.875rem; left: 2rem; }

.appel-panneau h2 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }

.appel-texte {
  max-width: 36rem;
  margin: var(--e-4) auto 0;
  font-size: var(--t-chapo);
  line-height: 1.5;
}

.appel-question {
  margin-top: var(--e-7);
  color: var(--titre);
  font-weight: var(--gras-bouton);
}

.appel-choix {
  display: grid;
  gap: var(--e-3);
  max-width: 48rem;
  margin: var(--e-4) auto 0;
}

.appel-choix a {
  position: relative;
  display: grid;
  gap: .125rem;
  padding: 1.125rem 3rem 1.125rem 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte-haute);
  text-align: left;
  text-decoration: none;
  transition: border-color .25s, transform .35s var(--sortie);
}

.appel-choix a::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.25rem;
  border-top: 2px solid var(--violet);
  border-right: 2px solid var(--violet);
  transform: rotate(45deg);
  transition: transform .25s var(--sortie);
}

.appel-choix a:hover { border-color: var(--violet); transform: translateY(-3px); }
.appel-choix a:hover::after { transform: translateX(4px) rotate(45deg); }
.appel-choix b { color: var(--titre); font-weight: var(--gras-bouton); }
.appel-choix span { color: var(--discret); font-size: var(--t-petit); }

.appel-tel { margin-top: var(--e-6); color: var(--discret); font-size: var(--t-petit); }

@media (min-width: 48em) {
  .appel-choix { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Pied de page ---------- */
.pied {
  position: relative;
  overflow: hidden;
  padding-top: var(--e-8);
  border-top: 1px solid var(--trait-sombre);
  font-size: var(--t-petit);
}

.pied-grille { display: grid; gap: var(--e-6); }

.pied-marque img { width: 9rem; margin-bottom: var(--e-4); }
.pied-marque p { max-width: 20rem; color: var(--discret); }

.pied-titre {
  margin-bottom: var(--e-3);
  color: var(--blanc);
  font-weight: var(--gras-bouton);
}

.pied-col li + li { margin-top: var(--e-2); }

.pied-col a,
.pied address a { text-decoration: none; transition: color .2s; }

.pied-col a:hover,
.pied-bas a:hover { color: var(--blanc); }

.pied address { display: grid; gap: var(--e-2); }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait-sombre);
  color: var(--discret);
}

.pied-bas a { color: var(--discret); text-decoration: none; transition: color .2s; }

.pied-legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }

/* Le logo en très grand, à peine visible, coupé par le bas de page */
.pied-filigrane {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  height: clamp(5rem, 2rem + 13vw, 13rem);
  margin: var(--e-7) auto 0;
  padding-inline: var(--gouttiere);
  overflow: hidden;
  opacity: .07;
  pointer-events: none;
}

.pied-filigrane img { width: 100%; }

@media (min-width: 22em) {
  .pied-grille { grid-template-columns: repeat(2, 1fr); gap: var(--e-6) var(--e-5); }
  .pied-marque { grid-column: 1 / -1; }
}

@media (min-width: 62em) {
  .pied-grille { grid-template-columns: 1.4fr repeat(4, 1fr); }
  .pied-marque { grid-column: auto; }
  .pied-legal { margin-left: auto; }
}

/* Au doigt : des zones de clic d'au moins 44 px, sans changer la mise en page */
@media (pointer: coarse) {
  .lien-fleche { min-height: 2.75rem; }
  .pied-col li + li { margin-top: 0; }
  .pied-col a,
  .pied address a { display: inline-block; padding-block: .6875rem; }
  .pied address { gap: 0; }
  .pied address span { padding-block: .25rem; }
  .pied-legal a { display: inline-block; padding-block: .6875rem; }
  .pied-legal { row-gap: 0; }
  .pied-marques a { padding-block: .75rem; }
  .vitrine figcaption a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
}

/* ==========================================================================
   Composants communs à toutes les pages
   (sortis de accueil.css pour servir aussi aux pages intérieures)
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Petit titre au-dessus des H2, avec la barre oblique du logo */
.sur-titre {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: var(--e-4);
  color: var(--accent-texte);
  font-size: var(--t-petit);
  font-weight: var(--gras-bouton);
  letter-spacing: .01em;
  line-height: 1.4;
}

.sur-titre::before {
  content: "";
  width: .3125rem;
  height: 1rem;
  background: currentColor;
  transform: skewX(-30deg);
}

.btn-grand { min-height: 3.5rem; padding: 1rem 1.875rem; font-size: 1.0625rem; }

/* Boutons aimantés : le JS règle « translate », le survol garde « transform » */
.btn[data-aimant] {
  transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--sortie), translate .45s var(--sortie);
}

/* Lueur qui suit la souris sur les cartes */
.lueur { position: relative; }

.lueur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(26rem circle at var(--lx, 50%) var(--ly, 0%), rgba(128, 121, 247, .12), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}

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

/* Sections claires : des feuilles posées sur le fond sombre */
.section.clair {
  margin-inline: clamp(.5rem, 1.2vw, 1.25rem);
  border-radius: clamp(1.5rem, 3vw, 2.75rem);
}

/* ---------- Barre de lecture ---------- */
.progression {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: 2px;
  pointer-events: none;
}

.progression i {
  display: block;
  height: 100%;
  background: var(--violet);
  transform: scaleX(var(--lu, 0));
  transform-origin: left;
}

/* Quadrillage visible seulement autour de la souris */
.hero-grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--trait-sombre) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait-sombre) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center -1px;
  opacity: .6;
  -webkit-mask-image: radial-gradient(30rem 24rem at var(--mx, 50%) var(--my, 22rem), #000, transparent 72%);
  mask-image: radial-gradient(30rem 24rem at var(--mx, 50%) var(--my, 22rem), #000, transparent 72%);
  pointer-events: none;
}

.hero-grille::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(20rem 16rem at var(--mx, 50%) var(--my, 22rem), rgba(128, 121, 247, .14), transparent 70%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: var(--e-5);
  padding: .4375rem 1rem .4375rem .8125rem;
  border: 1px solid var(--bordure);
  border-radius: var(--pilule);
  background: rgba(20, 20, 22, .72);
  color: var(--texte);
  font-size: var(--t-petit);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-badge span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--violet);
}

/* ---------- Fenêtre d'application commune aux cartes 02 à 04 ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #34343A;
  border-radius: .875rem;
  background: #121214;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
  color: var(--gris-texte);
  font-size: .75rem;
  line-height: 1.4;
}

.app-barre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--trait-sombre);
  background: #1C1C20;
}

.app-barre i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.app-barre i:nth-child(2) { background: #FEBC2E; }
.app-barre i:nth-child(3) { background: #28C840; }

.app-barre span {
  overflow: hidden;
  margin-inline: auto;
  padding: .125rem .875rem;
  border-radius: var(--pilule);
  background: var(--encre);
  color: var(--gris-discret);
  font-size: .6875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Emplacements à fournir : visibles jusqu'à la mise en ligne ---------- */
.a-fournir {
  display: inline-block;
  max-width: 32rem;
  padding: .375rem .75rem;
  border: 1px dashed var(--violet);
  border-radius: var(--rayon-s);
  color: var(--accent-texte);
  font-size: var(--t-mini);
  font-weight: var(--gras-bouton);
  line-height: 1.4;
  text-align: center;
}

.clair .a-fournir { border-color: var(--violet-fonce); }

/* ==========================================================================
   Mouvement : uniquement avec JS et sans demande de réduction
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Apparition au défilement */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--sortie) var(--d, 0s), transform .8s var(--sortie) var(--d, 0s);
  }

  .js [data-reveal].vu { opacity: 1; transform: none; }

  /* Entrée du hero au chargement */
  .js [data-entree] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--sortie) calc(var(--d, 0s) * .5), transform .7s var(--sortie) calc(var(--d, 0s) * .5);
  }

  .js.charge [data-entree] { opacity: 1; transform: none; }

  /* Titres : les mots montent un par un */
  .mot {
    display: inline-block;
    overflow: hidden;
    padding-bottom: .1em;
    margin-bottom: -.1em;
    vertical-align: top;
  }

  .mot > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .9s var(--sortie) calc(var(--i) * 55ms + var(--d, 0s));
  }

  .vu .mot > span,
  .vu.mot > span { transform: none; }

  /* Interfaces : en pause jusqu'à ce qu'elles soient à l'écran */
  .js [data-anime] *,
  .js [data-anime] *::before,
  .js [data-anime] *::after { animation-play-state: paused; }

  .js [data-anime].joue *,
  .js [data-anime].joue *::before,
  .js [data-anime].joue *::after { animation-play-state: running; }

  .js [data-anime].rejoue *,
  .js [data-anime].rejoue *::before,
  .js [data-anime].rejoue *::after { animation: none !important; }

  .js .v-frappe { animation: frappe 1.3s steps(16) .3s both; }
  .js .v-resultat { animation: monte .6s var(--sortie) 1.8s both; }

  .js .v-jeton { animation: avance 3.2s var(--sortie) .4s both; }

  .js .interrupteur { animation: allume-fond .35s var(--sortie) both; }
  .js .interrupteur::after { animation: allume-bouton .35s var(--sortie) both; }
  .js .v-reglages p:nth-child(1) .interrupteur,
  .js .v-reglages p:nth-child(1) .interrupteur::after { animation-delay: .5s; }
  .js .v-reglages p:nth-child(2) .interrupteur,
  .js .v-reglages p:nth-child(2) .interrupteur::after { animation-delay: 1.1s; }
  .js .v-reglages p:nth-child(3) .interrupteur,
  .js .v-reglages p:nth-child(3) .interrupteur::after { animation-delay: 1.7s; }

  .js .v-bulle { animation: monte .6s var(--sortie) .3s both; }
  .js .v-reponse i { animation: trace .7s var(--sortie) both; }
  .js .v-reponse i:nth-child(1) { animation-delay: 1s; }
  .js .v-reponse i:nth-child(2) { animation-delay: 1.25s; }
  .js .v-reponse i:nth-child(3) { animation-delay: 1.5s; }
  .js .v-verifie { animation: monte .5s var(--sortie) 2.2s both; }

  /* Changement de projet : l'écran arrive, le temps du suivant défile */
  .projet:not([hidden]) .ecran { animation: monte .6s var(--sortie); }
  .projet:not([hidden]) .projet-texte { animation: monte .6s var(--sortie) .1s both; }

  .projets.auto [aria-selected="true"] .projets-temps { animation: temps var(--auto, 7s) linear both; }
  .projets.pause .projets-temps,
  .projets:hover .projets-temps,
  .projets:focus-within .projets-temps { animation-play-state: paused; }

  /* Tarifs : les pages du plan arrivent une à une */
  .tp-plan li { animation: monte .4s var(--sortie) calc(var(--i) * 60ms) both; }
  .tp-inclus .tp-mois-seul { animation: monte .4s var(--sortie) both; }
}

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

@keyframes frappe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes monte {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes apparait {
  from { opacity: .25; }
}

@keyframes glisse {
  from { opacity: 0; transform: translateX(-14px); }
}

@keyframes avance {
  0%, 12% { transform: translateX(0); }
  45%, 57% { transform: translateX(calc(100% + .5rem)); }
  90%, 100% { transform: translateX(calc(200% + 1rem)); }
}

@keyframes allume-fond {
  from { background: var(--trait-sombre); }
}

@keyframes allume-bouton {
  from { transform: none; background: var(--gris-discret); }
}

@keyframes trace {
  from { transform: scaleX(0); }
}

@keyframes descend {
  from { transform: scaleY(0); }
}

@keyframes coche {
  from { background-color: transparent; background-size: 0; border-color: var(--gris-discret); }
}

@keyframes photo {
  from { opacity: 0; transform: scale(.7); }
}

@keyframes bascule-sortie {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes bascule-entree {
  from { opacity: 0; }
}

@keyframes choisit {
  from { border-color: var(--trait-sombre); color: var(--gris-texte); background: transparent; }
}

/* Lien ou bouton centré sous un bloc */
.lien-centre { margin-top: var(--e-6); text-align: center; }
.lien-centre .lien-fleche { margin-left: var(--e-2); }