/* ==========================================================================
   Nineteen Fifty Stars — mise en page
   Dépend de socle.css et composants.css.

   Points de rupture retenus :
     620px   téléphone → petite tablette
     900px   tablette portrait (l'iPad 820×1180 tombe ici)
     1200px  tablette paysage et ordinateur (l'iPad 1180×820 tombe ici)
   L'iPad est traité dans les deux sens : c'est l'angle mort classique, et
   c'est sur iPad qu'un projet se fait recaler.
   ========================================================================== */

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--e-4);
  background: color-mix(in srgb, var(--nuit) 72%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding var(--duree) var(--doux),
              background var(--duree) var(--doux),
              border-color var(--duree) var(--doux);
}
.entete.compact {
  padding-block: var(--e-2);
  background: color-mix(in srgb, var(--nuit) 92%, transparent);
  border-bottom-color: var(--trait);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--e-5);
}

.entete__logo {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  text-decoration: none;
  flex-shrink: 0;
}
.entete__marque {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--blanc-neon);
  text-shadow: 0 0 10px color-mix(in srgb, var(--bleu) 62%, transparent),
               0 0 26px color-mix(in srgb, var(--bleu-lueur) 42%, transparent);
}
.entete__nom {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-faible);
}

.entete__nav { margin-left: auto; }
.entete__nav ul {
  display: flex;
  gap: var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.entete__nav li { margin: 0; }
.entete__nav a {
  font-size: var(--t-petit);
  color: var(--texte-doux);
  text-decoration: none;
  position: relative;
  padding-block: var(--e-1);
}
/* La zone cliquable est étendue par un pseudo-élément : le texte ne bouge
   pas, le soulignement non plus, mais la cible atteint 44 px de haut —
   le minimum confortable au doigt, et l'iPad affiche cette navigation. */
.entete__nav a::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.5rem;
}

/* Le soulignement s'allume à partir du centre, sans déplacer le texte. */
.entete__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--bleu);
  transform: scaleX(0);
  transition: transform var(--duree-courte) var(--sortie);
  box-shadow: 0 0 8px var(--bleu-lueur);
}
.entete__nav a:hover { color: var(--blanc-neon); }
.entete__nav a:hover::after,
.entete__nav a:focus-visible::after { transform: scaleX(1); }

.entete__action { flex-shrink: 0; }

/* ------------------------------------------------------------- Ouverture */

.hero {
  position: relative;
  min-height: 100svh;          /* svh : évite le saut lié à la barre mobile */
  display: grid;
  place-items: center;
  padding-block: 9rem var(--e-8);
  overflow: hidden;
  text-align: center;
}

/* Le fond : deux halos qui se répondent, aucun fichier image. */
.hero__fond {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 28% 32%,
      color-mix(in srgb, var(--bleu-lueur) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 76% 68%,
      color-mix(in srgb, var(--rose-lueur) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.hero__interieur { position: relative; z-index: 1; }

.hero__logo {
  width: min(78vw, 540px);
  margin: 0 auto var(--e-7);
}
.hero__logo svg { width: 100%; height: auto; overflow: visible; }
.hero__logo #lueur { filter: blur(7px); }

.hero__titre { margin-bottom: var(--e-5); }

.hero__sous-titre {
  font-size: var(--t-moyen);
  color: var(--texte-doux);
  max-width: 54ch;
  margin: 0 auto var(--e-7);
}

.hero__actions {
  display: flex;
  gap: var(--e-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--e-7);
}

.hero__ancrage {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-petit);
  color: var(--texte-faible);
  margin: 0 auto;
}
.hero__puce {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bleu);
  box-shadow: 0 0 10px var(--bleu), 0 0 20px var(--bleu-lueur);
  flex-shrink: 0;
}

/* ----------------------------------------------------------- Preuve haute */

.preuve { border-top: 1px solid var(--trait); }

.preuve__grille {
  display: grid;
  gap: var(--e-8);
  align-items: center;
}

.preuve__faits {
  list-style: none;
  padding: 0;
  margin: var(--e-6) 0;
  display: grid;
  gap: var(--e-3);
}
.preuve__faits li {
  display: flex;
  gap: var(--e-4);
  align-items: baseline;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--trait);
  margin: 0;
  color: var(--blanc-neon);
}
.preuve__faits span {
  font-family: var(--titre);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  min-width: 9rem;
  flex-shrink: 0;
}

.preuve__visuels {
  display: flex;
  gap: var(--e-5);
  justify-content: center;
  align-items: flex-start;
}
.preuve__second { margin-top: var(--e-8); }

/* ------------------------------------------------------------- Le chemin */

.chemin__titre { max-width: 20ch; }
.chemin__intro { font-size: var(--t-moyen); color: var(--texte-doux); margin-bottom: var(--e-8); }

.chemin__etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-5);
}
.etape { margin: 0; position: relative; padding-top: var(--e-7); }
.etape__rang {
  position: absolute;
  top: var(--e-5);
  right: var(--e-6);
  font-family: var(--titre);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--bleu) 45%, transparent);
}
.etape h3 { margin-bottom: var(--e-3); }
.etape__prix {
  margin-top: var(--e-5);
  font-family: var(--titre);
  font-weight: 600;
  color: var(--bleu);
  font-size: var(--t-petit);
}

/* ---------------------------------------------------------- Réalisations */

.cas {
  display: grid;
  gap: var(--e-7);
  align-items: center;
  padding-block: var(--e-8);
  border-bottom: 1px solid var(--trait);
}
.cas:last-child { border-bottom: 0; }
.cas__texte h3 { margin-bottom: var(--e-4); }
.cas__texte--seul { max-width: var(--largeur-texte); }

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

.tarifs__intro { font-size: var(--t-moyen); color: var(--texte-doux); margin-bottom: var(--e-8); }

.tarifs__grille {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: 1fr;
}

.offre { display: flex; flex-direction: column; }
.offre h3 { font-size: var(--t-h3); margin-bottom: var(--e-4); }

.offre__prix {
  font-family: var(--titre);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--blanc-neon);
  margin-bottom: var(--e-5);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.offre__prix span {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: var(--e-1);
}
.offre__unite {
  display: inline;
  font-size: var(--t-petit);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-doux);
  margin: 0;
}

.offre__inclus {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
  flex-grow: 1;
}
.offre__inclus li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-petit);
  margin-bottom: var(--e-3);
}
/* Une coche dessinée en CSS : pas d'icône à charger. */
.offre__inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 6px; height: 10px;
  border: solid var(--bleu);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.offre__hors {
  font-size: var(--t-micro);
  color: var(--texte-faible);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
  margin: 0;
  max-width: none;
}

.offre--vedette {
  border-color: color-mix(in srgb, var(--rose) 34%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rose-lueur) 8%, transparent), transparent 60%),
    var(--nuit-2);
}
.offre--vedette .offre__inclus li::before { border-color: var(--rose); }

.tarifs__mention {
  margin-top: var(--e-7);
  font-size: var(--t-petit);
  color: var(--texte-faible);
  max-width: none;
}

/* --------------------------------------------------------------- Méthode */

.methode__liste {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-6);
}
.methode__liste li {
  counter-increment: etape;
  position: relative;
  padding-left: 4rem;
  margin: 0;
}
.methode__liste li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.15em;
  font-family: var(--titre);
  font-size: 1.9rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--rose) 55%, transparent);
}
/* Le fil qui relie les étapes entre elles. */
.methode__liste li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.15rem; top: 2.6rem; bottom: calc(-1 * var(--e-6));
  width: 1px;
  background: linear-gradient(180deg, var(--trait-fort), transparent);
}
.methode__liste h3 { font-size: var(--t-moyen); margin-bottom: var(--e-2); }

.methode__promesse {
  margin-top: var(--e-8);
  padding: var(--e-5) var(--e-6);
  border-left: 2px solid var(--bleu);
  background: var(--voile);
  font-size: var(--t-moyen);
  color: var(--blanc-neon);
  max-width: none;
}

/* ----------------------------------------------------------- Qui je suis */

.apropos { border-top: 1px solid var(--trait); }
.apropos__interieur { display: grid; gap: var(--e-8); align-items: center; }

.apropos__phrase {
  font-family: var(--titre);
  font-size: var(--t-h3);
  margin-top: var(--e-7);
  max-width: 22ch;
}

.apropos__logo { display: grid; place-items: center; }
/* L'étoile du logo, agrandie en emblème. On affiche le SVG tel quel : il
   porte déjà ses trois couches de néon et ses couleurs. Un masque CSS les
   aurait aplaties en une silhouette, et la forme s'y perdait. */
.apropos__etoile {
  width: min(62vw, 300px);
  height: auto;
  filter:
    drop-shadow(0 0 22px color-mix(in srgb, var(--rose-lueur) 55%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, var(--bleu-lueur) 30%, transparent));
}

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

.contact { border-top: 1px solid var(--trait); }
.contact__interieur { display: grid; gap: var(--e-8); align-items: start; }

.contact__rgpd {
  margin-top: var(--e-5);
  font-size: var(--t-micro);
  color: var(--texte-faible);
}

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

.pied {
  border-top: 1px solid var(--trait);
  padding-block: var(--e-7);
  background: var(--nuit-2);
}
.pied__interieur { display: grid; gap: var(--e-6); }
.pied__marque { display: flex; align-items: center; gap: var(--e-4); }
.pied__logo {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--blanc-neon);
  text-shadow: 0 0 12px color-mix(in srgb, var(--bleu) 55%, transparent);
}
.pied__marque p { margin: 0; font-size: var(--t-petit); }
.pied__discret { color: var(--texte-faible); }

.pied__nav ul {
  display: flex;
  gap: var(--e-5);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pied__nav li { margin: 0; }
.pied__nav a {
  font-size: var(--t-petit);
  color: var(--texte-doux);
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.pied__nav a::before {
  content: "";
  position: absolute;
  inset: -0.7rem -0.5rem;
}
.pied__nav a:hover { color: var(--blanc-neon); text-decoration: underline; }

.pied__mention { font-size: var(--t-micro); color: var(--texte-faible); margin: 0; max-width: none; }

/* ==========================================================================
   620px et plus — la grille des tarifs passe à deux colonnes
   ========================================================================== */

@media (min-width: 620px) {
  .tarifs__grille { grid-template-columns: repeat(2, 1fr); }
  .chemin__etapes { grid-template-columns: repeat(2, 1fr); }
  .pied__interieur {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .pied__nav { justify-self: end; }
  .pied__mention { grid-column: 1 / -1; }
}

/* ==========================================================================
   900px et plus — iPad en portrait (820×1180) tombe ici
   ========================================================================== */

@media (min-width: 900px) {
  .preuve__grille { grid-template-columns: 1fr 1fr; }
  .chemin__etapes { grid-template-columns: repeat(3, 1fr); }

  .cas { grid-template-columns: 0.9fr 1.1fr; }
  .cas--inverse .cas__visuel { order: 2; }

  .apropos__interieur { grid-template-columns: 1.3fr 0.7fr; }
  .contact__interieur { grid-template-columns: 0.9fr 1.1fr; }

  .methode__liste { grid-template-columns: repeat(2, 1fr); gap: var(--e-7) var(--e-8); }
  /* Sur deux colonnes, le fil vertical ne relie plus rien : on le retire. */
  .methode__liste li:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   1200px et plus — iPad en paysage (1180×820) et ordinateur
   ========================================================================== */

@media (min-width: 1200px) {
  .tarifs__grille { grid-template-columns: repeat(3, 1fr); }
  .offre--large { grid-column: span 2; }
  .hero__titre { font-size: clamp(3rem, 4.5vw, 4.2rem); }
}

/* ==========================================================================
   Hauteur réduite — iPad en paysage, portable peu haut
   Le plein écran d'ouverture devient étouffant sous 720px de haut.
   ========================================================================== */

@media (max-height: 720px) and (min-width: 900px) {
  .hero { min-height: auto; padding-block: 8rem var(--e-8); }
  .hero__logo { width: min(50vw, 400px); margin-bottom: var(--e-5); }
}

/* ==========================================================================
   Téléphone — sous 900px, la navigation d'en-tête s'efface
   Les ancres restent joignables par le pied de page et le bouton d'action.
   ========================================================================== */

@media (max-width: 1279px) {
  .entete__nom { display: none; }
}

@media (max-width: 1139px) {
  .entete__interieur { gap: var(--e-4); }
}

@media (max-width: 899px) {
  .entete__nav { display: none; }
  .entete__interieur { justify-content: space-between; }
  .entete__action { margin-left: auto; }

  .preuve__visuels { flex-direction: column; align-items: center; }
  .preuve__second { margin-top: var(--e-6); }
  .cas--inverse .cas__visuel { order: 0; }
}

@media (max-width: 480px) {
  .entete__action { padding: var(--e-2) var(--e-4); font-size: var(--t-micro); }
  .etape__rang { font-size: 2rem; }
  .methode__liste li { padding-left: 3rem; }
}

/* ==========================================================================
   Bascule « version sobre »
   Un dirigeant de PME l'a dit mieux que moi : le fait que ce site s'arrête de
   bouger sur demande prouve plus de sérieux technique que toute l'animation.
   Autant le rendre visible et cliquable au lieu de l'enterrer dans une
   préférence système que personne ne sait où régler.
   ========================================================================== */

.sobre-bascule {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pill);
  color: var(--texte-doux);
  font-family: var(--titre);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--duree-courte) var(--doux),
              color var(--duree-courte) var(--doux);
}
.sobre-bascule:hover { border-color: var(--trait-fort); color: var(--blanc-neon); }

/* Cible tactile : 44 px minimum. Réduit à son voyant, le bouton ne faisait
   que 26 px de large sur mobile. */
.sobre-bascule { min-width: 44px; min-height: 44px; justify-content: center; }

/* Le voyant : allumé quand le site bouge, éteint quand il est calme.
   L'état est aussi porté par aria-pressed — la couleur n'est jamais seule. */
.sobre-bascule__voyant {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bleu);
  box-shadow: 0 0 8px var(--bleu), 0 0 16px var(--bleu-lueur);
  transition: background var(--duree-courte) var(--doux),
              box-shadow var(--duree-courte) var(--doux);
}
.sobre-bascule[aria-pressed="true"] .sobre-bascule__voyant {
  background: var(--texte-faible);
  box-shadow: none;
}

/* Sous 1140 px, le libellé s'efface et il ne reste que le voyant. Le bouton
   garde son nom accessible par aria-label, posé dans le HTML. */
@media (max-width: 1139px) {
  .sobre-bascule__texte { display: none; }
  .sobre-bascule { padding: var(--e-2); }
}

/* Version sobre : plus rien ne bouge, tout est en place, les lueurs restent.
   Ce n'est pas une page appauvrie — c'est la même page, immobile. */
.sobre [data-anime] { opacity: 1 !important; transform: none !important; }
.sobre #lueur, .sobre #tube, .sobre #coeur { opacity: 1 !important; }
.sobre *, .sobre *::before, .sobre *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
.sobre { scroll-behavior: auto !important; }

/* ==========================================================================
   Ce qui vous appartient
   ========================================================================== */

.vous { border-top: 1px solid var(--trait); }
.vous__intro { font-size: var(--t-moyen); color: var(--texte-doux); margin-bottom: var(--e-8); }

.vous__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--e-6);
}
.vous__liste li {
  margin: 0;
  padding-left: var(--e-6);
  border-left: 1px solid var(--trait-fort);
}
.vous__liste h3 {
  font-size: var(--t-moyen);
  margin-bottom: var(--e-2);
  color: var(--blanc-neon);
}
.vous__liste p { color: var(--texte-doux); }

@media (min-width: 900px) {
  .vous__liste { grid-template-columns: repeat(2, 1fr); gap: var(--e-7) var(--e-8); }
}

/* ==========================================================================
   Téléphone dans l'en-tête
   Une icône à toutes les largeurs — c'est sur mobile qu'on appelle le plus.
   Le numéro en toutes lettres n'apparaît qu'à partir de 1 440 px ; en dessous,
   il reste lu par les lecteurs d'écran.

   Budget de l'en-tête, mesuré : tous les éléments visibles à 1 440 px font
   1 165 px. Dans le conteneur de 1 180 px, il ne restait que 15 px de marge —
   trop peu pour une police de repli plus large que Chakra Petch au chargement.
   D'où un en-tête plus large que la colonne de contenu, à partir de 1 440 px.
   ========================================================================== */

@media (min-width: 1440px) {
  .entete__interieur { width: min(100% - var(--gouttiere) * 2, 1320px); }
}

/* Libellé court du bouton d'action : sous 400 px, « Parler de votre projet »
   ne tient pas à côté du logo et de deux boutons de 44 px. Deux textes réels
   plutôt qu'un contenu CSS : ils restent traduisibles. */
.entete__action-court { display: none; }
@media (max-width: 400px) {
  .entete__action-long { display: none; }
  .entete__action-court { display: inline; }
}
@media (max-width: 480px) {
  .entete__interieur { gap: var(--e-3); }
}

.entete__tel {
  position: relative;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pill);
  font-size: var(--t-petit);
  flex-shrink: 0;
}
.entete__tel:hover,
.entete__tel:focus-visible { border-color: var(--trait-fort); }

@media (max-width: 1439px) {
  .entete__tel { padding: 0; }
  .entete__tel .tel__numero {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.contact__tel { margin-top: var(--e-5); color: var(--texte-doux); }
.pied__tel .tel { font-size: var(--t-petit); }

/* Même traitement que la navigation : la cible tactile atteint 44 px sans
   que le texte bouge. C'est au doigt, sur mobile, que ce lien sert. */
.contact__tel .tel,
.pied__tel .tel { position: relative; }
.contact__tel .tel::before,
.pied__tel .tel::before {
  content: "";
  position: absolute;
  inset: -0.7rem -0.5rem;
}