/* Page « Création et refonte de site » : complète ads.css (même système, une seule version adaptative).
   Seuls les blocs propres à cette page sont ici : démonstration du site sur téléphone,
   cinq questions du visiteur, trois interventions possibles, options mensuelles.
   Toutes les valeurs viennent de assets/tokens.css. */

/* ---------- Démonstration du haut de page : un site sur téléphone ----------
   Temps 1 : page d'accueil fourre-tout, le visiteur ne trouve pas sa prestation et repart.
   Temps 2 : la page de la prestation, un bouton d'appel, une demande reçue, la courbe. */
.sd-barre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 40px;
  padding: 0 var(--e-3-5);
  border-radius: var(--r-pilule);
  background: var(--illu-google-barre);
  font-size: var(--t-13);
  color: var(--illu-google-texte);
  overflow: hidden;
}

.sd-url {
  display: grid;
  min-width: 0;
}

.sd-url > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-url b {
  font-weight: 400;
  color: var(--encre);
  background: var(--jaune-doux);
  border-radius: var(--r-4);
  padding: 0 var(--e-0-5);
}

.sd-url1 {
  animation: ga-sortie var(--duree-url) ease-in var(--duree-demo-url-sortie) both;
}

.sd-url2 {
  opacity: 0;
  animation: ga-apparait var(--duree-url) ease-out var(--duree-demo-url-entree) forwards;
}

.sd-ph1 {
  align-self: start;
}

.sd-d1 {
  animation-delay: var(--duree-demo-1);
}

.sd-d2 {
  animation-delay: var(--duree-demo-2);
}

.sd-d3 {
  animation-delay: var(--duree-demo-3);
}

.sd-d4 {
  animation-delay: var(--duree-demo-4);
}

.sd-avant {
  display: flex;
  flex-direction: column;
  gap: var(--e-2-5);
  padding: var(--e-3);
  border-radius: var(--r-champ);
  border: 1px solid var(--illu-site-filet);
  background: var(--illu-site-fond);
}

.sd-av-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sd-logo-gris {
  width: 74px;
  height: 14px;
  border-radius: var(--r-4);
  background: var(--illu-logo);
}

.sd-burger {
  display: flex;
  flex-direction: column;
  gap: var(--e-0-75);
}

.sd-burger i {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--illu-burger);
}

.sd-av-bandeau {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-3-5);
  border-radius: var(--r-10);
  background: linear-gradient(135deg, var(--illu-bandeau-1), var(--illu-bandeau-2));
  font-family: var(--police);
}

.sd-av-bandeau strong {
  font-size: var(--t-15);
  font-weight: 500;
  color: var(--encre-2);
}

.sd-av-bandeau span {
  font-size: var(--t-11);
  line-height: 1.4;
  color: var(--gris);
}

.sd-av-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

.sd-av-services span {
  padding: var(--e-0-75) var(--e-1-75);
  border-radius: var(--r-6);
  border: 1px solid var(--illu-etiquette-filet);
  font-size: var(--t-10-5);
  color: var(--illu-etiquette-texte);
}

.sd-av-lignes i {
  display: block;
  height: 6px;
  margin: var(--e-1-25) 0;
  border-radius: var(--r-3);
  background: var(--illu-gris-clair);
}

.sd-av-contact {
  font-size: var(--t-11);
  color: var(--illu-texte-pale);
}

.sd-alerte {
  animation-delay: var(--duree-demo-alerte);
}

.sd-apres {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3-5);
  border-radius: var(--r-champ);
  background: var(--blanc);
  font-family: var(--police);
}

.sd-fil {
  font-size: var(--t-11-5);
  color: var(--gris);
}

.sd-titre {
  font-size: var(--t-17);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.sd-photo {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--e-1-25);
  height: 78px;
}

.sd-photo span {
  border-radius: var(--r-8);
  background: linear-gradient(135deg, var(--illu-photo-bleu-1), var(--illu-photo-bleu-2));
  position: relative;
  overflow: hidden;
}

.sd-photo span:nth-child(2) {
  background: linear-gradient(135deg, var(--illu-photo-sable-1), var(--illu-photo-sable-2));
}

.sd-photo span:nth-child(3) {
  background: linear-gradient(135deg, var(--illu-photo-pierre-1), var(--illu-photo-pierre-2));
}

.sd-photo span::after {
  content: "";
  position: absolute;
  inset: var(--e-2-5) var(--e-3-5);
  border: 2px solid var(--blanc-a70);
  border-radius: var(--r-3);
}

.sd-photo em {
  position: absolute;
  left: var(--e-1-5);
  bottom: var(--e-1-5);
  padding: var(--e-0-75) var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--encre-a72);
  color: var(--blanc);
  font-style: normal;
  font-size: var(--t-10-5);
}

.sd-avis {
  font-size: var(--t-13);
  color: var(--etoile);
}

.sd-avis b {
  font-weight: 500;
}

.sd-boutons,
.sd-mini-bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.sd-appel,
.sd-devis {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1-5);
  padding: var(--e-2) var(--e-3-5);
  border-radius: var(--r-pilule);
  font-size: var(--t-13);
  font-weight: 500;
}

.sd-appel {
  background: var(--jaune);
  color: var(--encre);
}

.sd-devis {
  border: 1.5px solid var(--encre);
}

.sd-recu .ga-appel-icone {
  animation: ga-halo var(--duree-demo-halo) ease-out var(--duree-demo-recu) 2;
}

@media (prefers-reduced-motion: reduce) {
  .sd-url1 {
    display: none;
  }

  .sd-url2 {
    opacity: 1;
    animation: none;
  }
}

/* Pont fiche Google → site : la page d'arrivée sous la fiche */
.sd-mini {
  display: flex;
  flex-direction: column;
  gap: var(--e-1-5);
  padding: var(--e-3-5) var(--e-4);
  border-radius: var(--r-18);
  background: var(--blanc);
  border: 1.5px solid var(--encre);
}

.sd-mini-url {
  font-size: var(--t-12);
  color: var(--gris);
  overflow-wrap: anywhere;
}

.sd-mini-url b {
  font-weight: 400;
  color: var(--encre);
  background: var(--jaune-doux);
  border-radius: var(--r-4);
  padding: 0 var(--e-0-5);
}

.sd-mini strong {
  font-size: var(--t-16);
  font-weight: 500;
}

.liens-duo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-5-5);
}

/* ---------- Les cinq questions du visiteur ---------- */
.besoins {
  display: flex;
  flex-direction: column;
  gap: var(--e-4-25);
  padding-top: var(--e-3);
}

.besoins h3 {
  font-size: var(--t-22);
  letter-spacing: -.02em;
}

.besoins ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-3);
}

.besoins li {
  padding: var(--e-4-5);
  border-radius: var(--r-20);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.besoin-num {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jaune);
  font-size: var(--t-petit);
  font-weight: 500;
}

.besoins strong {
  font-size: var(--t-17);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.besoins li > span:last-child {
  font-size: var(--t-14-5);
  line-height: 1.5;
  color: var(--gris);
}

/* ---------- Trois interventions possibles sur un site existant ---------- */
.choix {
  padding: var(--e-5-5);
  border-radius: var(--r-carte);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.choix.fonce {
  background: var(--encre);
  color: var(--s-texte);
}

.choix-tag {
  font-size: var(--t-12-5);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.choix.fonce .choix-tag {
  color: var(--jaune);
}

.choix h3 {
  font-size: var(--t-21);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.choix p {
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--gris);
}

.choix.fonce p {
  color: var(--s-texte-2);
}

.choix .choix-prix {
  margin-top: auto;
  padding-top: var(--e-3-5);
  border-top: 1px solid var(--filet);
  font-size: var(--t-15);
  font-weight: 500;
  color: var(--encre);
}

.choix.fonce .choix-prix {
  border-color: var(--s-filet);
  color: var(--s-texte);
}

.choix-prix b {
  font-size: var(--t-24);
  font-weight: 500;
  letter-spacing: -.03em;
}

.realisation .choix-tag {
  align-self: flex-start;
}

/* ---------- Options mensuelles sous les tarifs ---------- */
.options {
  display: flex;
  flex-direction: column;
  gap: var(--e-3-5);
}

.options-titre {
  font-size: var(--t-15);
  color: var(--gris);
}

.options-titre b {
  font-weight: 500;
  color: var(--encre);
}

.options-grille {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--e-4);
}

.option {
  padding: var(--e-5-25) var(--e-5-5);
  border-radius: var(--r-carte);
  background: var(--jaune-doux);
  display: flex;
  flex-direction: column;
  gap: var(--e-2-5);
}

.option-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-1-5) var(--e-4);
}

.option h3 {
  font-size: var(--t-21);
  letter-spacing: -.02em;
}

.option-prix {
  font-size: var(--t-15);
  color: var(--gris);
  white-space: nowrap;
}

.option-prix strong {
  font-size: var(--t-32);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--encre);
}

.option > p {
  font-size: var(--t-15-5);
  line-height: 1.55;
  color: var(--encre-2);
}

.option .option-note {
  font-size: var(--t-14-5);
  color: var(--gris);
  padding-left: var(--e-3);
  border-left: 2px solid var(--encre);
}

@media (max-width: 1040px) {
  .besoins ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .besoins li:last-child {
    grid-column: 1 / -1;
  }

  .options-grille {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .besoins ol {
    grid-template-columns: 1fr;
  }

  .choix,
  .option {
    padding: var(--e-5);
  }

  .sd-titre {
    font-size: var(--t-16);
  }
}

/* Zone masquée (réalisations en attente d’accord) : .section impose display:flex, hidden doit primer. */
.section[hidden] {
  display: none;
}