/* Mini-app carte de visite : DA de la carte (vagues turquoise / menthe / orange)
   + DA du site cyrilneau.fr (texte bleu nuit, accents orange, Poppins / Inter). */
:root {
  /* Carte */
  --turquoise: #3ee6ec;
  --menthe: #6dd3b8;
  --orange: #f08a1f;

  /* Site */
  --bleu-nuit: #052a75;
  --orange-texte: #e07800;
  --bleu-clair: #c2d2ff;
  --gris: #5c5c66;
  --jaune: #fdd36c;

  --fond-page: #f2f6ff;
  --fond: #ffffff;
  --fond-doux: #f7faff;
  --whatsapp: #25d366;
  --vert-valide: #16a34a;   /* pastille ✓ des cases cochées */

  /* Icône « info » (Bootstrap Icons info-circle-fill), posée en masque : prend la couleur du texte */
  /* Icône « play » (Bootstrap Icons play-circle-fill), même principe : boutons ▶ des modules */
  --icone-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z'/%3E%3C/svg%3E");
  --icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E");

  --rayon: 16px;
  --ombre: 0 4px 14px rgba(5, 42, 117, .07);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Pas d'encadré bleu au toucher (Android) ni de contour après un clic ; le contour reste pour la navigation au clavier */
html { -webkit-tap-highlight-color: transparent; }
/* Piège à robots des formulaires : hors de l'écran, jamais vu ni atteint au clavier */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bleu-nuit);
  background: var(--fond-page);
}

.app {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--fond);
}

h1, h2, .btn, .titre-bloc, .promesse-titre { font-family: "Poppins", "Inter", sans-serif; }

svg.icone { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }

/* ---------- En-tête à vagues ---------- */

/* Les vagues descendent sous l'en-tête jusqu'au bas de la photo (150 - 64 + 104 = 190 px) */
.entete { position: relative; height: 150px; overflow-x: clip; }   /* les vagues débordent en bas, jamais sur les côtés */
.vagues { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 190px; overflow: visible; }   /* le flou du dernier étage n'est pas coupé net */

.identite { position: relative; text-align: center; padding: 0 16px; }   /* au-dessus des vagues de l'en-tête */
.avatar {
  width: 104px;
  height: 104px;
  margin-top: -64px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #e6ecf8;
  box-shadow: var(--ombre);
}
.identite h1 { margin: 8px 0 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }

/* ---------- Promesse de prix ---------- */

.promesse { position: relative; isolation: isolate; overflow-x: clip; text-align: center; padding: 24px 16px 8px; }
/* Tache orange floue à droite de la pastille de prix (même rendu que sur la page Réalisations) */
.promesse::before {
  content: "";
  position: absolute;
  top: 40px;
  right: -110px;
  z-index: -1;
  width: 280px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 138, 31, .32), rgba(240, 138, 31, 0));
  pointer-events: none;
}
.promesse-titre { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.promesse-titre strong { color: var(--orange-texte); }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 6px 14px;
  border: 1px solid var(--bleu-clair);
  border-radius: 999px;
  background: var(--fond);
  box-shadow: var(--ombre);
  font-weight: 600;
  font-size: .9rem;
}
.pastille svg { width: 16px; height: 16px; fill: var(--orange-texte); }
.conditions { margin: 8px 0 0; font-size: .8rem; color: var(--gris); }

/* ---------- Menu ---------- */

.menu { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 8px; }

.btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: var(--rayon);
  background: var(--fond);
  box-shadow: var(--ombre);
  color: var(--bleu-nuit);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.btn .libelle { flex: 1; }

.btn-principal { border-color: var(--orange); background: #fff6ec; }
.btn-principal .icone { color: var(--orange-texte); }
.chevron { transition: transform .3s ease; }
.ouvert .chevron { transform: rotate(180deg); }

.btn-bientot { border-style: dashed; box-shadow: none; color: var(--gris); cursor: default; }
.badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff1d6;
  color: #8a5a00;
  font-family: "Inter", sans-serif;
  font-size: .72rem;
  font-weight: 600;
}

/* Accordéon de la demande : en-tête et contenu dans un seul bloc */
.accordeon {
  border: 1.5px solid var(--orange);
  border-radius: var(--rayon);
  background: var(--fond-doux);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.accordeon .btn-principal { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ouvert .panneau { grid-template-rows: 1fr; }
.panneau-interieur { overflow: hidden; }
.etapes { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 18px; }
/* Blocs du formulaire selon le projet (création/refonte ou démo) */
.sous-etapes { display: flex; flex-direction: column; gap: 14px; }
.sous-etapes[hidden] { display: none; }
.etapes .sous-etapes > .bulle:first-child { margin-top: 14px; }

/* Bulle façon conversation */
.bulle { display: flex; align-items: flex-end; gap: 8px; }
.bulle img { width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.bulle p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--fond);
  box-shadow: var(--ombre);
  font-size: .92rem;
}

.choix { display: flex; flex-direction: column; gap: 8px; }
.choix label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: var(--rayon);
  background: var(--fond);
  font-size: .92rem;
  cursor: pointer;
}
/* Rond vide comme par défaut, coche validée une fois choisi */
.choix input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #8a8f9c;
  border-radius: 50%;
  background: #fff center / 12px no-repeat;
}
.choix input:checked {
  border-color: var(--orange);
  background-color: var(--orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
}
.choix input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.choix input[type="checkbox"] { border-radius: 6px; } /* case carrée pour l'engagement */
.choix label:has(input:checked) { border-color: var(--orange); background: #fff6ec; }
/* Case « Autre » : le champ de précision s'ouvre dans la même case une fois cochée */
.choix label.autre { flex-wrap: wrap; }
.choix .autre-precision {
  display: none;
  flex-basis: 100%;
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: 10px;
  background: #fff;
  color: var(--bleu-nuit);
  font: inherit;
  font-size: 1rem; /* 16px : évite le zoom automatique sur iPhone */
}
.choix label.autre:has(input:checked) .autre-precision { display: block; }
.choix .autre-precision:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

.saviez {
  margin: 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff4d6;
  font-size: .85rem;
}
.saviez-titre { display: block; margin-bottom: 2px; font-family: "Poppins", sans-serif; font-weight: 600; color: #8a5a00; }

.champ { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 500; }
.champ input, .champ textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: 12px;
  background: var(--fond);
  color: var(--bleu-nuit);
  font: inherit;
  font-size: 1rem; /* 16px : évite le zoom automatique sur iPhone */
  font-weight: 400;
}
.champ textarea { min-height: 88px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.champ input:disabled { opacity: .45; }
/* Suggestions de fin d'adresse mail (@gmail.com…) sous le champ */
.suggestions-mail { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.suggestions-mail button { padding: 6px 12px; border: 1.5px solid var(--bleu-clair); border-radius: 99px; background: #fff; color: var(--bleu-nuit); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; }
.facultatif { color: var(--gris); font-weight: 400; }
/* Question à choix sous un intitulé (même style d'intitulé que les champs) */
.question { display: flex; flex-direction: column; gap: 6px; }
.question > span { font-size: .85rem; font-weight: 500; }
.delai { margin: 0; font-size: .85rem; font-weight: 500; color: var(--bleu-nuit); text-align: center; }

.aide { margin: 0; font-size: .8rem; color: var(--gris); text-align: center; }

/* Raccourcis de contact */
.raccourcis { margin-top: 8px; padding: 16px; border-radius: var(--rayon); background: var(--fond-doux); }
.titre-bloc { margin: 0 0 12px; font-size: .9rem; font-weight: 600; text-align: center; }
.icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.icones a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--bleu-nuit);
  font-size: .75rem;
  font-weight: 500;
  text-decoration: none;
}
.rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--bleu-clair);
  background: var(--fond);
  box-shadow: var(--ombre);
}
.rond .icone { width: 22px; height: 22px; }
.rond-wa { border-color: var(--whatsapp); background: var(--whatsapp); color: #fff; }

.secondaires { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.secondaires .btn { flex-direction: column; justify-content: center; gap: 6px; text-align: center; font-size: .88rem; }
.secondaires .icone { color: var(--orange-texte); }

/* Pied de page */
.pied { position: relative; isolation: isolate; overflow: clip; padding: 24px 16px 32px; text-align: center; font-size: .85rem; }
/* Petite tache orange floue en bas, centrée sous le lien du site */
.pied::before {
  content: "";
  position: absolute;
  left: calc(50% - 100px);
  bottom: -90px;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 138, 31, .32), rgba(240, 138, 31, 0));
  pointer-events: none;
}
.pied a { color: var(--gris); }
.pied img { display: block; width: 28px; height: 28px; margin: 0 auto 8px; }

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

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Menu à gauche, titre à droite */
  gap: 12px;
  padding: 16px;
  background: #e6ecf8;
}
.barre a { display: flex; align-items: center; gap: 6px; color: var(--bleu-nuit); font-weight: 600; text-decoration: none; }
.barre h1 { margin: 0; font-size: min(1.15rem, calc((100vw - 120px) / 16.3)); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }   /* tient sur une ligne, même sur petit écran */

.page { padding: 24px 16px 32px; container-type: inline-size; } /* sert de référence aux rangées du mur */
/* Taches orange floues en arrière-plan (contrepoids au bleu des titres) : derrière tout le contenu,
   elles débordent dans les marges et les espaces entre les cases. Jamais sous les titres (halo blanc). */
.page { position: relative; isolation: isolate; overflow-x: clip; }
.page::after, .wall::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.page::after { border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 138, 31, .32), rgba(240, 138, 31, 0)); }
.page::after { bottom: 20px; left: -140px; width: 340px; height: 340px; }   /* derrière la fin de page */
.wall { position: relative; }
.wall::before {
  inset: 12% -16px 18%;
  background:
    radial-gradient(170px 220px at 0% 30%, rgba(240, 138, 31, .30), rgba(240, 138, 31, 0)),
    radial-gradient(170px 220px at 100% 75%, rgba(240, 138, 31, .26), rgba(240, 138, 31, 0));
}
/* Mockup iPad : la vidéo (800×800) a des marges blanches à gauche et à droite.
   On rogne au cadre de l'iPad (x 108 → 692 px) pour qu'il occupe toute la largeur. */
.mockup-cadre { overflow: hidden; aspect-ratio: 584 / 800; margin: 0 0 24px; background: #fff; }
.mockup-cadre video { display: block; width: calc(800 / 584 * 100%); max-width: none; height: auto; margin-left: calc(-108 / 584 * 100%); }
/* Carrousel iPad : diapos côte à côte, même format que la vidéo rognée (584 × 800) */
.ipad-carrousel { position: relative; margin: 0 0 24px; overflow: hidden; }
.ipad-piste { display: flex; transition: transform .5s ease; }
.ipad-slide { position: relative; flex: 0 0 100%; aspect-ratio: 584 / 800; background: #fff; }
.ipad-slide .mockup-cadre { margin: 0; }
/* Modèles : l'image remplit l'écran (haut de page), le cadre d'iPad évidé est posé par-dessus */
.ipad-ecran { position: absolute; left: 5.9%; top: 4.05%; width: 88%; height: 92.15%; overflow: hidden; border-radius: 2.6% / 1.9%; background: #fff; }
.ipad-ecran img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ipad-image::after { content: ""; position: absolute; inset: 0; background: url("img/realisations/mockups/cadre-ipad.png") center / 100% 100% no-repeat; pointer-events: none; }
/* Flèches posées sur les bords du cadre */
.ipad-fleche {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--bleu-nuit);
  box-shadow: 0 2px 8px rgba(5, 42, 117, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ipad-precedent { left: 4px; }
.ipad-suivant { right: 4px; }
.ipad-fleche .icone { width: 18px; height: 18px; }
.ipad-fleche:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ipad-piste { transition: none; }
}
.featured { margin-bottom: 32px; }
.featured h2 { margin: 0 0 12px; font-size: 1.1rem; }
/* Titres des sections de la page Réalisations : même style que « Votre site, en mieux. » de l'accueil */
.titre-section {
  margin: 80px 0 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  text-align: center;
  color: var(--bleu-nuit);
}
.page > .titre-section:first-child { margin-top: 58px; }
/* Fond de triangles autour des titres (même image que l'avant/après de l'accueil), sur toute la largeur,
   fondu en haut et en bas ; le carrousel et le mur passent par-dessus */
.titre-section { position: relative; isolation: isolate; }
.titre-section::before {
  content: "";
  position: absolute;
  top: -50px;
  bottom: -76px;   /* déborde sous le haut du carrousel et des cases */
  left: -16px;
  right: -16px;
  z-index: -1;
  background: url("img/realisations/mockups/fond-triangles.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  pointer-events: none;
}
/* Nuage blanc juste derrière le texte : les triangles restent autour, jamais sous les lettres */
.titre-section span {
  display: inline-block;   /* un seul bloc pour toutes les lignes : le halo d'une ligne ne recouvre pas l'autre */
  background: var(--fond);
  box-shadow: 0 0 8px 6px var(--fond);
}
/* Fond de triangles derrière le titre et le téléphone, sur toute la largeur de l'écran,
   fondu en haut et en bas pour ne pas finir net au-dessus du bouton */
.ba-scene { position: relative; isolation: isolate; }
.ba-scene::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 0;
  left: -16px;
  right: -16px;
  z-index: -1;
  background: url("img/realisations/mockups/fond-triangles.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 85%, transparent);
  pointer-events: none;
}
/* Titre centré juste au-dessus du téléphone, coupé en deux lignes (police du site en attendant le titre définitif) */
.featured .titre-aerien {
  margin: 30px 0 -4px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  text-align: center;
  color: var(--bleu-nuit);
}
.sous-titre-ba { margin: 4px 0 -6px; font-size: .85rem; color: var(--gris); text-align: center; }
.note { margin: 8px 0 0; font-size: .8rem; color: var(--gris); text-align: center; }

/* Avant / après : la barre en dessous choisit la page affichée,
   qui fait des allers-retours haut ↔ bas en continu. */
/* Téléphone posé directement sur la page, sans cadre, bouton « maintenir » en dessous */
.ba {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 10 / 17;   /* assez haute pour que le téléphone prenne ~3/4 de la largeur */
  max-height: calc(100svh - 140px);   /* petits écrans : téléphone + bouton + mention tiennent ensemble à l'écran */
  margin-inline: auto;   /* plafonnée en hauteur, la scène rétrécit en largeur (ratio gardé) : on la recentre */
  padding: 12px;
  container-type: size;
}
/* Téléphone : cadre PNG (1089 × 1986, écran évidé) posé par-dessus l'écran où défile la capture.
   Position de l'écran mesurée sur le PNG, débordant d'un pixel sous le cadre pour ne laisser aucun liseré.
   Le défilement est piloté en JS (voir index.html). */
.mockup-mobile {
  position: relative;
  height: 100%;
  aspect-ratio: 1089 / 1986;   /* pas d'ombre : son halo voilait les triangles du fond autour du téléphone */
}
.mockup-mobile .ecran {
  position: absolute;
  left: 6.8%;
  top: 2.65%;
  width: 86.4%;
  height: 94.65%;
  overflow: hidden;
  border-radius: 11.5% / 5.8%;
  background: #fff;
}
/* Trottoir sous l'encoche, en haut de la page seulement : c'est un rembourrage de l'image, il part avec le défilement.
   Couleur = en-tête de chaque site : blanc pour l'avant, gris anthracite pour l'après. */
.mockup-mobile .ecran { --trottoir: 7.5%; --trottoir-couleur: #242321; }
.site-avant { --trottoir-couleur: #fff; }
.mockup-mobile .ecran img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: content-box;
  padding-top: var(--trottoir);   /* % de la largeur de l'écran */
  background: var(--trottoir-couleur);
}
.mockup-mobile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/realisations/mockups/cadre-telephone.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Les deux sites superposés dans l'écran : seul le site change (d'un coup, comme un chargement), le téléphone reste */
.site { position: absolute; inset: 0; overflow: hidden; }
.ba[data-vue="apres"] .site-avant, .ba[data-vue="avant"] .site-apres { opacity: 0; pointer-events: none; }

/* Bouton « maintenir » : la jauge orange se remplit pendant l'appui (--charge de 0 à 1, piloté en JS) */
.ba-maintenir {
  --charge: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin: 12px 0 0;
  padding: 0 16px;
  border: 2px solid var(--orange);
  border-radius: 999px;
  overflow: hidden;
  background: var(--fond);
  color: #2a1600;   /* noir chaud : lisible sur le blanc comme sur l'orange (6,9:1) */
  font-family: "Poppins", sans-serif;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;   /* pas de menu contextuel sur appui long */
  -webkit-tap-highlight-color: transparent;   /* pas de rectangle bleu au toucher (Android) */
  touch-action: manipulation;   /* la page peut défiler depuis le bouton ; la charge continue pendant le scroll (événements tactiles) */
}
.ba-maintenir:focus:not(:focus-visible) { outline: none; }
/* Invitation : le bouton mime un appui (léger enfoncement + petit rebond) jusqu'au premier vrai appui */
.ba-maintenir.invite { animation: invite-appui 2.8s ease-in-out infinite; }
@keyframes invite-appui {
  0%, 70%, 100% { transform: scale(1); }
  76% { transform: scale(.965); }
  84% { transform: scale(1.015); }
  90% { transform: scale(.995); }
  95% { transform: scale(1.003); }
}
@media (prefers-reduced-motion: reduce) {
  .ba-maintenir.invite { animation: none; }
}
/* La jauge s'ouvre depuis le milieu ; le texte s'efface à mesure qu'elle se remplit, puis « Relâchez » apparaît à 100 % */
.ba-jauge { position: absolute; inset: 0; background: var(--orange); transform-origin: center; transform: scaleX(var(--charge)); }
.ba-maintenir > .icone, .ba-libelle { position: relative; opacity: calc(1 - var(--charge)); }
.ba-maintenir.arme > .icone, .ba-maintenir.arme .ba-libelle { opacity: 1; transition: opacity .2s ease; }
.ba-maintenir:focus-visible { outline: 3px solid var(--bleu-nuit); outline-offset: 3px; }

/* Relâchement : la jauge se resserre vers le centre du bouton... */
.ba-bloc { position: relative; }
.ba-maintenir.vidange .ba-jauge { transform-origin: center; transform: scaleX(0); transition: transform .3s cubic-bezier(.6, 0, .9, .4); }
/* ...et devient une goutte orange qui file jusqu'au loader, puis s'y dissout */
.ba-envoi {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
  opacity: 0;
  pointer-events: none;
}
.ba-envoi.part { animation: envoi-goutte .7s cubic-bezier(.3, .55, .35, 1) .2s forwards; }   /* ralentit en arrivant en haut */
@keyframes envoi-goutte {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  85% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.8); }
}

/* Loader « tirer pour rafraîchir » (comme Chrome Android) : caché au-dessus de l'écran,
   il descend et tourne avec la charge, tourne sur place au rechargement, puis rétrécit et disparaît. */
.mockup-mobile .ecran { container-type: size; }
.chargeur {
  position: absolute;
  top: 0;
  left: 50%;
  width: 13cqw;
  aspect-ratio: 1;
  margin-left: -6.5cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transform: translateY(calc(-150% + var(--charge, 0) * 16cqh)) rotate(calc(var(--charge, 0) * 300deg));
  pointer-events: none;
}
.chargeur svg { display: block; width: 100%; height: 100%; }
.chargeur circle { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: center; }
.ba.recharge .chargeur svg { animation: chargeur-tourne .7s linear infinite; }
.ba.sortie .chargeur { transform: translateY(calc(-150% + 16cqh)) scale(0); transition: transform .3s ease-in; }
@keyframes chargeur-tourne { to { transform: rotate(360deg); } }
/* Rechargement : page vide de la couleur de fond du site qui arrive, puis le site s'affiche d'un coup */
.ba.page-vide .site { opacity: 0; }
.ba.page-vide[data-cible="apres"] .ecran { background: #f6f5f3; }
.ba.page-vide[data-cible="avant"] .ecran { background: #f4efeb; }

/* Mur de tableaux : tailles variées, trous comblés automatiquement.
   Unité de rangée = (largeur colonne - gap) / 2 : deux rangées font un carré parfait.
   100cqw = largeur utile de .page, donc celle du mur. */
.wall { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc((100cqw - 30px) / 4); grid-auto-flow: dense; gap: 10px; }
.frame {
  position: relative;
  margin: 0;
  border: 1.5px solid var(--bleu-clair);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  font-size: .85rem;
  background: var(--fond-doux);
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame.carre { grid-row: span 2; }
.frame.tall { grid-row: span 3; }
.frame.big { grid-row: span 4; }
.frame.wide { grid-column: span 2; }
/* Logos sur fond blanc : affichés en entier, avec une marge */
.frame.logo { background: #fff; }
.frame.logo img { object-fit: contain; object-position: center; padding: 12px; }
.frame.wide.logo img { padding: 10px 72px; } /* bandeaux : le logo ne passe pas sous l'étiquette */
/* Logos avec beaucoup de blanc autour : agrandis pour remplir la case */
.frame.logo img.zoom-rca { transform: scale(1.5); }
.frame.logo img.zoom-bandeau { transform: scale(1.3); }

/* Modules (page Réalisations) : démos à essayer, pleine largeur, même cadre que le mur */
.modules-intro { margin: -6px 0 12px; color: var(--gris); font-size: .85rem; text-align: center; }
.modules { display: flex; flex-direction: column; gap: 12px; }
.frame.module { aspect-ratio: 960 / 536; }

/* Avant-après : l'image « après » couvre la droite de la poignée */
.avant-apres { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.avant-apres img { position: absolute; inset: 0; object-position: center; pointer-events: none; }
.avant-apres .aa-apres { clip-path: inset(0 0 0 var(--pos)); }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .35); pointer-events: none; }
.aa-poignee::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e07800'%3E%3Cpath d='M5.5 4 1.5 8l4 4zM10.5 4l4 4-4 4z'/%3E%3C/svg%3E") center / 20px no-repeat;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.aa-repere { position: absolute; top: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .45); color: #fff; font-size: .72rem; font-weight: 600; pointer-events: none; }
.aa-repere-avant { left: 10px; }
.aa-repere-apres { right: 10px; }
.avant-apres input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avant-apres:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Plan cliquable : vidéo de démo en boucle */
.video-module video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Carte : aperçu dessiné, puis la vraie carte Google Maps au clic */
.carte-module { flex-direction: column; }
.carte-dessin, .carte-module iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte-epingle { position: relative; width: 34px; height: 34px; margin-bottom: 10px; color: var(--orange); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.carte-afficher { position: relative; padding: 8px 16px; border: 0; border-radius: 99px; background: var(--fond); box-shadow: var(--ombre); color: var(--bleu-nuit); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }

/* Sites en page entière : défilement très lent haut ↔ bas.
   La durée se règle par case (--duree), selon la longueur de la page. */
.frame.defile { display: block; container-type: size; }
.frame.defile img { height: auto; animation: defile-site var(--duree, 25s) ease-in-out infinite alternate; }
@keyframes defile-site {
  0%, 8% { transform: translateY(0); }
  92%, 100% { transform: translateY(calc(-100% + 100cqh)); }
}
@media (prefers-reduced-motion: reduce) {
  .frame.defile img { animation: none; }
}

/* Carte de visite : cadrée au centre (sinon le bas de la carte est rogné) */
.frame img.centre { object-position: center; }

/* Étiquette de nature (logo, carte de visite, packaging), collée en bas à gauche du cadre.
   Pas sur les templates de sites. */
.etiquette {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 12px 5px 10px;
  border-top: 1.5px solid var(--bleu-clair);   /* même contour que le cadre */
  border-right: 1.5px solid var(--bleu-clair);
  border-radius: 0 12px 0 0;                    /* même rayon que le cadre */
  background: #e6ecf8;
  color: #7d8597;   /* même gris que le bouton Avant / Après non sélectionné */
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

/* Vidéo d'écran mobile (menu QR code) : affichée en entier sur fond blanc, sans rogner les côtés */
.frame.video-menu { background: #fff; }
.frame.video-menu video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Case à deux images : glisse de gauche à droite toutes les 4 s.
   La piste [1, 2, 1] repart sans à-coup sur la copie de la première image. */
.frame.slide { display: block; }
.slide-piste { display: flex; width: 300%; height: 100%; animation: slide-gd 8s ease-in-out infinite; }
.frame.slide { background: #f6f6f6; } /* gris du fond des mockups */
.slide-piste img { width: calc(100% / 3); flex-shrink: 0; object-fit: contain; object-position: center; }
@keyframes slide-gd {
  0%, 42.5% { transform: translateX(calc(-200% / 3)); }
  50%, 92.5% { transform: translateX(calc(-100% / 3)); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .slide-piste { animation: none; transform: translateX(calc(-200% / 3)); }
}

.fin { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.fin h2 { margin: 0; font-size: 1.2rem; text-align: center; }
.fin p { margin: 0 0 4px; font-size: .9rem; color: var(--gris); text-align: center; line-height: 1.5; }
.fin .btn { justify-content: center; text-align: center; }
/* Lien secondaire, volontairement plus discret que le bouton principal */
.lien-discret { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px; color: var(--gris); font-size: .9rem; font-weight: 500; text-decoration: none; }
.lien-discret .icone { width: 16px; height: 16px; transition: transform .2s ease; }
.lien-discret:hover .icone, .lien-discret:focus-visible .icone { transform: translateX(3px); }
.app:has(~ .retour-flottant) .page { padding-bottom: 96px; } /* place pour le bouton flottant */

/* Retour au menu flottant : caché sous l'écran, glisse vers le haut au défilement */
.retour-flottant {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: 999px;
  background: #e6ecf8;
  color: var(--bleu-nuit);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(5, 42, 117, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 24px));
  transition: transform .5s ease, opacity .5s ease;
}
.retour-flottant.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .retour-flottant { transition: none; }
}

/* Formulaire de demande */
.etapes .bulle { margin-top: 14px; }
.etapes .bulle:first-child { margin-top: 0; }
.choix-ligne { flex-direction: row; flex-wrap: wrap; }
.choix-ligne label { flex: 1; justify-content: center; padding: 12px 10px; }
.rgpd { margin: 0; font-size: .78rem; color: var(--gris); }
/* Recette des boutons CTA du site cyrilneau.fr */
.btn-envoyer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
  padding: 13px 40px;
  border-style: solid;
  border-width: 4px 2px 1px 0;
  border-color: rgba(194, 210, 255, .76);
  border-radius: 24px;
  background: linear-gradient(169deg, rgba(194, 210, 255, .37) 0%, rgba(255, 255, 255, .56) 51%);
  box-shadow: 3px 5px 10px rgba(0, 0, 0, .27);
  color: #5c5c66;
  font-family: "Space Grotesk", "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-envoyer .icone { width: 18px; height: 18px; }
.btn-envoyer:disabled, .btn-envoyer[aria-disabled="true"] { opacity: .45; box-shadow: none; cursor: default; }
a.btn-envoyer { text-decoration: none; }
.merci { padding: 4px 16px 18px; }
.icones a { line-height: 1.3; text-align: center; }
.reco { display: block; font-size: .68rem; font-weight: 500; color: var(--gris); }

/* ---------- Page devis ---------- */
/* Bulle « i » : le détail s'ouvre sous la ligne */
.info { display: inline; }
.info summary {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background: var(--orange);
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
  font-size: 0;   /* la lettre « i » reste pour les lecteurs d'écran, l'icône la remplace à l'écran */
  vertical-align: middle;
  cursor: pointer;
  list-style: none;
}
.info summary::-webkit-details-marker { display: none; }
.info-texte { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--fond-doux); color: var(--gris); font-size: .78rem; }
/* Bulle en liste (ex. ce qui est inclus dans la boutique) : 2 colonnes, coches comme les garanties */
.info-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 2px 0 0; padding: 0; list-style: none; line-height: 1.35; }
.info-liste li { display: flex; gap: 6px; }
.info-liste li::before { content: "✓"; color: var(--orange-texte); font-weight: 700; }
.info-note { margin: 10px 0 0; }

/* Estimation en direct */
.estimation { padding: 14px 16px; border-radius: var(--rayon); background: var(--fond); box-shadow: var(--ombre); font-size: .85rem; }
.estimation-titre { margin: 0 0 8px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: .95rem; }
.estimation-ligne, .estimation-total { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.estimation-ligne span:last-child, .estimation-total span:last-child { white-space: nowrap; }
.estimation-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--bleu-clair); font-weight: 600; font-size: .92rem; color: var(--bleu-nuit); }
.estimation-total + .estimation-ligne { margin-top: 10px; }
.estimation-note { margin: 6px 0 0; font-size: .78rem; color: var(--gris); }
.choix-ligne.serre label { gap: 6px; padding: 12px 6px; font-size: .88rem; white-space: nowrap; }
.estimation-note + .estimation-ligne { margin-top: 10px; }

/* Page devis : mise en page, étapes, cartes */
.devis { padding: 16px 16px 132px; }   /* place pour la barre fixe */

.progression { display: flex; gap: 4px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: etape; }
.progression li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--gris);
  font-size: .68rem;
  font-weight: 500;
  text-align: center;
  counter-increment: etape;
}
.progression li::before {
  content: counter(etape);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: 50%;
  background: var(--fond);
  font-size: .78rem;
  font-weight: 600;
}
.progression li.actif { color: var(--bleu-nuit); font-weight: 600; }
.progression li.actif::before { border-color: var(--orange); background: var(--orange); color: #fff; }
.progression li.fait::before { content: "✓"; border-color: var(--orange); color: var(--orange-texte); }

.etape-retour { margin: 0 0 8px; padding: 4px 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.etape-titre { margin: 0; font-family: "Poppins", sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1.25; outline: none; }
.etape-intro { margin: 4px 0 16px; color: var(--gris); font-size: .85rem; }

/* Formules : deux colonnes à 85 % de large, côte à côte, qu'on fait glisser.
   La colonne suivante dépasse sur le bord de l'écran pour montrer qu'il y a autre chose à côté. */
.socles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 12px;
  margin: 0 -16px;
  padding: 4px 16px 12px;   /* place pour l'ombre et le contour de focus */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
.socles::-webkit-scrollbar { display: none; }
.socle-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 16px 14px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: var(--rayon);
  background: var(--fond);
  box-shadow: var(--ombre);
  cursor: pointer;
}
.socle-carte:last-child { scroll-snap-align: end; }
.socle-carte input { position: absolute; opacity: 0; pointer-events: none; }
/* Toute la colonne choisit la formule ; les bulles « i » restent au-dessus */
.socle-tete { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.socle-tete::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.socle-inclus .info, .socle-inclus .inclus-play { position: relative; z-index: 2; }
/* Bouton ▶ des modules : ouvre leur démo ; zone de toucher plus grande que l'icône */
.inclus-play {
  width: 26px;
  height: 26px;
  margin: -4px 0 -4px 0;
  padding: 0;
  border: 0;
  background: var(--orange);
  -webkit-mask: var(--icone-play) center / 18px no-repeat;
  mask: var(--icone-play) center / 18px no-repeat;
  font-size: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* Démo d'un module (devis) : fenêtre par-dessus la page */
.demo { width: calc(100% - 32px); max-width: 448px; padding: 14px; border: 0; border-radius: var(--rayon); background: var(--fond); box-shadow: 0 24px 60px rgba(5, 20, 50, .35); color: inherit; }
.demo::backdrop { background: rgba(5, 20, 50, .55); }
.demo[open] { animation: demo-entree .25s ease-out; }
@keyframes demo-entree { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.demo-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.demo-titre { margin: 0; font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 700; }
.demo-fermer { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--fond-doux); color: var(--bleu-nuit); font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.demo-contenu video { display: block; width: 100%; height: auto; border-radius: 12px; }
.demo-legende { margin-top: 10px; color: var(--gris); font-size: .82rem; line-height: 1.4; }
.demo-legende p { margin: 0; }
.demo-legende ul { margin: 6px 0 0; padding-left: 18px; }
.demo-legende li + li { margin-top: 3px; }
.socle-nom { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--orange-texte); }
.socle-prix { display: flex; align-items: baseline; gap: 4px; }
.socle-prix strong { font-family: "Poppins", sans-serif; font-size: 2rem; line-height: 1; }
.socle-prix small { color: var(--gris); font-size: .72rem; }
.socle-accroche { color: var(--gris); font-size: .78rem; line-height: 1.35; }
.socle-carte:has(input:checked) { border-color: var(--orange); background: #fff6ec; }
/* Pastille ✓ verte : formules et cases de fonctionnalités cochées */
.socle-carte:has(input:checked)::after,
.grille > .option:has(> .option-tete input:checked)::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vert-valide) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.socle-carte:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }

.socle-inclus { margin-top: 4px; font-size: .82rem; }
.socle-inclus ul { margin: 0; padding-left: 18px; line-height: 1.45; list-style: none; }
.socle-inclus li { position: relative; }
.socle-inclus li + li { margin-top: 4px; }
/* Puce et « + » dessinés au même endroit, pour qu'ils s'alignent */
.socle-inclus li::before { content: "•"; position: absolute; left: -18px; width: 12px; text-align: center; font-weight: 700; }
/* Rubriques de l'inclus (Fonctionnalités générales, Design…), séparées par un filet comme sur le site ; le premier filet sépare aussi du prix */
.inclus-rubrique { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--bleu-clair); color: var(--orange-texte); font-size: .8rem; font-weight: 600; }
/* Ce que l'Avancé ajoute à l'Essentiel : « + » orange, comme sur le site */
.socle-inclus li.inclus-plus::before { content: "+"; color: var(--orange); }

/* Étape 0 « Que souhaitez-vous ? » : trois grandes cartes, icône à gauche */
.choix-projet { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.choix-carte {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
  padding: 18px 16px;
  border: 1.5px solid var(--bleu-clair);
  border-radius: var(--rayon);
  background: var(--fond);
  box-shadow: var(--ombre);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choix-icone { grid-row: 1 / 3; width: 30px; height: 30px; color: var(--orange); }
.choix-nom { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 700; }
.choix-desc { color: var(--gris); font-size: .8rem; line-height: 1.35; }
.choix-carte:hover, .choix-carte.actif { border-color: var(--orange); }
.choix-carte.actif { background: #fff6ec; }
.choix-carte:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }


/* Cartes d'options : prix en gris tant que la case n'est pas cochée */
.options { display: flex; flex-direction: column; gap: 10px; }
.option { border: 1.5px solid var(--bleu-clair); border-radius: var(--rayon); background: var(--fond); box-shadow: var(--ombre); }
.option:has(> .option-tete input:checked) { border-color: var(--orange); background: #fff6ec; }
.option-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.option-tete input, .option-upsell input {
  appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #8a8f9c;
  border-radius: 6px;
  background: #fff center / 12px no-repeat;
}
/* Coche verte, comme la pastille ✓ des cases de l'étape 2 */
.option-tete input:checked, .option-upsell input:checked {
  border-color: var(--vert-valide);
  background-color: var(--vert-valide);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
}
.option-tete input:focus-visible, .option-upsell input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.option-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.option-nom { font-size: .95rem; font-weight: 600; }
.option-desc { color: var(--gris); font-size: .8rem; line-height: 1.35; }
.option-prix { color: #a9adb8; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.option:has(> .option-tete input:checked) > .option-tete .option-prix { color: var(--orange-texte); }

/* Upsell dans la même case (ex. impression des cartes de visite) : encadré en pointillés sous la carte cochée */
.option-upsell { display: flex; align-items: center; gap: 12px; margin: 0 16px 14px 48px; padding: 10px 12px; border: 1.5px dashed var(--bleu-clair); border-radius: 12px; background: var(--fond); cursor: pointer; }
.option-upsell:has(input:checked) { border-style: solid; border-color: var(--orange); }
.option-upsell:has(input:checked) .option-prix { color: var(--orange-texte); }

/* « Voir détails » sous une carte. Ouvert : le lien et son texte partagent le même encadré gris */
.option-plus { margin: 0 16px 12px 48px; }
.option-plus[open] { padding: 8px 10px 10px; border-radius: 10px; background: var(--fond-doux); }
.option-plus[open] > .info-texte { margin-top: 6px; padding: 0; background: none; }
.option-plus summary { display: inline-flex; align-items: center; gap: 6px; color: var(--orange-texte); font-size: .78rem; font-weight: 500; cursor: pointer; list-style: none; }
.option-plus summary::-webkit-details-marker { display: none; }
.option-plus summary::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
}

/* Sélecteur de quantité sous une carte (langues, pages) */
.quantite { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px 48px; }
.quantite button {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  background: var(--fond);
  color: var(--orange-texte);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.quantite button:disabled { opacity: .35; cursor: default; }
.quantite-nombre { min-width: 84px; font-size: .9rem; font-weight: 600; text-align: center; }

/* Questions de la boutique, sous sa carte */
.option-sous { padding: 14px 16px 16px; border-top: 1px solid var(--bleu-clair); }
/* Prérequis d'une case cochée (boutique, boost d'avis) : ce qu'il faut au client */
.prerequis-titre { margin: 0 0 6px; font-size: .88rem; font-weight: 600; }
.prerequis-liste { margin: 0; padding-left: 18px; color: var(--gris); font-size: .84rem; line-height: 1.45; }
.prerequis-liste li + li { margin-top: 4px; }
.prerequis-texte { margin: 0; color: var(--gris); font-size: .84rem; line-height: 1.45; }
.prerequis-note { margin: 10px 0 0; color: var(--gris); font-size: .8rem; font-style: italic; }

/* Fonctionnalités en cases avec icône (2 par ligne).
   Chaque case occupe 5 rangées partagées avec sa voisine (icône, nom, description, prix, réglage) :
   les noms, descriptions et prix d'une même ligne tombent au même niveau. */
/* Sélecteurs en « > » : seules les cases de la grille sont visées, pas ce qui est rangé dedans */
.options.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grille > .option { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 6px; padding: 14px; }
.grille > .option > .option-tete, .grille > .option > .option-tete > .option-texte { display: contents; }
/* Toute la case reste cliquable : un calque du label la couvre ; sélecteur, « Voir détails » et prérequis passent par-dessus */
.grille > .option > .option-tete::after { content: ""; position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.grille > .option > .quantite, .grille > .option > .option-plus, .grille > .option > .option-sous { position: relative; z-index: 1; }
/* Case qui s'étale sur toute la largeur (posé par le script) : « Voir détails » ouvert, ou case déployée */
.grille > .option.large { grid-column: 1 / -1; }
.grille > .option > .option-tete input { position: absolute; opacity: 0; pointer-events: none; }
.grille > .option:has(> .option-tete input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Icône orange, verte une fois la case cochée (comme la pastille ✓) */
.option-icone { width: 30px; height: 30px; margin-bottom: 4px; color: var(--orange); }
.option:has(> .option-tete input:checked) > .option-tete .option-icone { color: var(--vert-valide); }
/* Description sur 3 lignes réservées : prix au même niveau d'une ligne de cases à l'autre */
.grille > .option > .option-tete .option-desc { min-height: calc(1.35em * 3); overflow-wrap: anywhere; }
.grille > .option > .quantite { gap: 6px; padding: 0; }
.grille > .option > .quantite button { flex-shrink: 0; width: 28px; height: 28px; font-size: 1rem; }
.grille > .option > .quantite .quantite-nombre { flex: 1; min-width: 0; font-size: .8rem; white-space: nowrap; }
.grille > .option > .option-plus { margin: 0; }

/* Case déployée (cochée, avec prérequis) : pleine largeur, ses prérequis dedans */
.grille > .option.deployee { display: flex; flex-direction: column; gap: 6px; grid-row: auto; }
/* Case pleine largeur : seule sur sa ligne, plus besoin de réserver 3 lignes de description */
.grille > .option.large > .option-tete .option-desc { min-height: 0; }
.grille > .option > .option-sous { margin-top: 8px; padding: 14px 0 0; cursor: default; }

/* Transitions douces quand une case s'agrandit (View Transitions, voir enDouceur() dans devis.html).
   Les cases nommées glissent et grandissent lentement, départ et arrivée en douceur ; leur contenu passe en fondu enchaîné
   de l'ancien au nouvel état, sans être étiré. La page elle-même ne fond pas (sinon tout clignote). */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
/* Fondu court (et de même durée des deux côtés : pas de baisse de luminosité) pour éviter le texte en double */
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: none; object-position: top left; animation-duration: .18s; }
::view-transition-old(root) { animation: none; opacity: 0; }
::view-transition-new(root) { animation: none; }
/* Zones qui bougent quand une case s'ouvre (les cases sont nommées par le script) */
.devis .estimation { view-transition-name: estimation; }
.devis-barre { view-transition-name: barre; }
#aide-devis { view-transition-name: aide; }

/* Coordonnées */
.garanties { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; color: var(--gris); font-size: .82rem; }
.garanties li { display: flex; gap: 8px; }
.garanties li::before { content: "✓"; color: var(--orange-texte); font-weight: 700; }

.aide-etape { margin: 16px 0 0; }
.devis .estimation { margin-top: 20px; }
.confirmation { display: flex; flex-direction: column; gap: 8px; padding: 32px 0; text-align: center; }
.confirmation p { margin: 0; }

/* Barre fixe en bas : total en direct + étape suivante */
.devis-barre {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--fond);
  box-shadow: 0 -4px 16px rgba(5, 42, 117, .10);
}
.barre-total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barre-libelle { color: var(--gris); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.barre-montant { font-family: "Poppins", sans-serif; font-size: .92rem; font-weight: 600; }
.barre-unique { color: var(--gris); font-size: .75rem; }
.barre-montant:empty, .barre-unique:empty { display: none; }
/* Même recette que les boutons du site, en plus compact */
.btn-suivant {
  flex-shrink: 0;
  padding: 10px 22px;
  border-style: solid;
  border-width: 3px 2px 1px 0;
  border-color: rgba(194, 210, 255, .76);
  border-radius: 24px;
  background: linear-gradient(169deg, rgba(194, 210, 255, .37) 0%, rgba(255, 255, 255, .56) 51%);
  box-shadow: 3px 5px 10px rgba(0, 0, 0, .22);
  color: #5c5c66;
  font-family: "Space Grotesk", "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-suivant:disabled { opacity: .45; box-shadow: none; cursor: default; }