/* Pages « création de site internet à <ville> » (v2, doctrine « sur mesure » du 23/09/2026).
   Complète eoche.v2.css, sans rien y redéfinir de global : toutes les classes sont préfixées pv-,
   les rares réglages de briques communes sont limités au corps .page-ville.
   Rien de décoratif : cadres d'appareils avec de vraies captures, cartes blanches, texte lisible.
   Échelle des titres et taille du texte courant : celles du site (eoche.v2.css). Cette feuille ne les
   redéfinit pas sur téléphone, les titres de niveau 3 propres aux villes y restent à 22 px. */

/* ── Première vue : le titre entièrement blanc, un vrai site en cadres ─────── */
/* La seconde moitié du H1 commence sa propre ligne, à toutes les largeurs : jamais une expression
   coupée (« ce qu'il / faut lire », « le site / n'est que »), lignes équilibrées. Même couleur que la
   première moitié : un demi-titre en rouge était un tic de gabarit.
   La première moitié se coupe au plus loin, sans l'équilibrage global des titres qui séparait « site / internet ». */
.page-ville .page-heros__titre { text-wrap: wrap; }
.pv-titre__suite { display: block; text-wrap: balance; }
/* Fougères et Laval (gelées) gardent le texte de leur ancien surtitre de lieu, en gris et non plus en orange :
   le fil d'Ariane reste la seule touche de couleur au-dessus du titre. */
.page-ville .page-heros__lieu { color: #C4C4CC; }
.pv-scene { margin: 0; }
.pv-scene__cadres { position: relative; padding: 0 9% 9% 0; }
.pv-scene__nav { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 50px 90px -40px rgba(0, 0, 0, 0.9); }
.pv-scene__tel { position: absolute; right: 0; bottom: 0; width: 25%; }
/* Le téléphone devant, à gauche : il ne recouvre que la marge du site vu sur ordinateur,
   jamais son texte, et reste dans la hauteur de la scène (il ne mord plus sur la phrase au-dessus). */
.pv-scene--tel .pv-scene__cadres { padding: 13% 0 13% 27%; }
.pv-scene--tel .pv-scene__tel { top: 50%; bottom: auto; left: 0; right: auto; width: 34%; translate: 0 -50%; }
.pv-scene__legende { margin-top: 22px; max-width: 54ch; font-size: 16px; line-height: 1.5; color: #C4C4CC; }

/* Vitré : la vraie photo de Baptiste dans une carte blanche à ombre douce (la page parle de la personne
   qui répond au téléphone). Sur téléphone, la carte passe en ligne : la photo à gauche, la légende à droite,
   pour que la première vue reste courte. */
.pv-portrait { display: grid; width: min(400px, 100%); margin: 0 0 0 auto; padding: 12px 12px 20px; border-radius: var(--r-l); background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.pv-portrait__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-l) - 10px); }
.pv-portrait__legende { padding: 16px 8px 0; font-size: 16px; line-height: 1.5; color: #3F3F46; }
.pv-portrait__legende b { font-weight: 700; color: var(--texte-clair); }

/* Pas de mot seul en dernière ligne d'un paragraphe quand le navigateur sait l'éviter */
.page-ville main p, .page-ville main li, .page-ville main figcaption { text-wrap: pretty; }

/* ── Notes sous un bloc, liens de fin de section ───────────────────── */
.pv-note { max-width: 72ch; margin-top: 24px; line-height: 1.6; color: #3F3F46; }
.pv-note a, .pv-prose a, .pv-trois a, .pv-offres .offre__description a { color: var(--rouge-profond); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pv-liens { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 18px; }

/* ── Deux sections de même couleur qui se suivent : un simple filet ── */
.pv-section:not(.feuille), .pv-zone { padding-top: 0; }
.pv-section:not(.feuille) > .enveloppe,
.pv-zone > .enveloppe { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--ligne-claire); }

/* ── Texte courant visible (taille du site : 17 px sur téléphone, 18 px sur ordinateur) ── */
.pv-prose { max-width: 68ch; }
.pv-prose p { line-height: 1.7; color: #3F3F46; }
.pv-prose p + p { margin-top: 1em; }
.pv-prose b { font-weight: 700; color: var(--texte-clair); }
.pv-prose__titre { margin-bottom: 14px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }

/* Laval : les trois constats du relevé des 751 sites, une ligne chacun, le chiffre dans sa phrase */
.pv-releve { display: grid; margin: 1.1em 0 1.2em; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.pv-releve li { padding: 14px 0; border-bottom: 1px solid var(--ligne-claire); line-height: 1.6; color: #3F3F46; }
.pv-releve b { font-weight: 700; color: var(--texte-clair); }

/* Chapeau en deux phrases : la seconde suit la première sans nouvel en-tête */
.pv-chapeau-suite { margin-top: -4px; }

/* ── Section de texte seul : le titre à gauche, le texte à droite sur ordinateur ── */
@media (min-width: 1024px) {
  .pv-cote > .enveloppe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 0 72px; }
  .pv-cote .tete-section { grid-row: span 2; margin-bottom: 0; }
  .pv-cote .pv-prose, .pv-cote .pv-liens { grid-column: 2; }
  .pv-cote .pv-prose { padding-top: 8px; }
}

/* ── Châteaubourg : les projets d'automatisation, liste commune du site (.cas__liste) sur fond blanc ── */
/* La phrase qui suit le chapeau le prolonge : pas le grand blanc d'une nouvelle partie entre les deux. */
.pv-commandes .tete-section { margin-bottom: 20px; }
.pv-cas__titre { margin-top: clamp(40px, 5vw, 56px); margin-bottom: 16px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.2; }
.pv-cas + .pv-liens { margin-top: 22px; }

/* ── Trois cartes : un titre, une phrase ───────────────────────────── */
.pv-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv-trois__carte { display: grid; align-content: start; gap: 10px; padding: 28px 26px; border-radius: var(--r-l); background: #fff; border: 1px solid rgba(9, 9, 11, 0.06); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -24px rgba(9, 9, 11, 0.28); }
.blanc .pv-trois__carte { background: var(--clair); box-shadow: none; }
.pv-trois__titre { font-size: clamp(22px, 1.8vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.pv-trois__texte { font-size: 17px; line-height: 1.6; color: #3F3F46; }

/* ── Analyse longue repliée, signée avec la photo de Baptiste ──────── */
.pv-analyse { max-width: 900px; margin-top: clamp(28px, 4vw, 44px); }
.pv-analyse .detail__resume { min-height: 80px; padding: 14px 22px 14px 16px; }
.pv-analyse__qui { display: flex; align-items: center; gap: 14px; }
.pv-analyse__photo { flex: none; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.pv-analyse__libelle { display: grid; gap: 2px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.pv-analyse__libelle small { font-size: 14.5px; font-weight: 500; color: #52525B; }
.pv-analyse .detail__prose { padding: 6px 24px 30px; }
.pv-analyse .prose { color: #3F3F46; }
.pv-analyse .prose h3 { color: var(--texte-clair); }
.pv-analyse__signature { font-style: italic; color: #52525B; }
@media (min-width: 1024px) { .pv-analyse .prose { font-size: 18px; } }

/* ── Pour aller plus loin : l'analyse repliée en fin de page, même grille que les questions ── */
.pv-plus__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(24px, 6vw, 96px); }
.pv-plus .tete-section { margin-bottom: 0; }
.pv-plus .pv-analyse { max-width: none; margin-top: 0; }

/* ── Rennes : les trois lignes d'un devis, sans numéro (ce ne sont pas des étapes) ── */
.pv-devis { display: grid; max-width: 980px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-claire); }
.pv-devis__ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: baseline; gap: 8px 40px; padding: 26px 0; border-bottom: 1px solid var(--ligne-claire); }
.pv-devis__question { font-size: clamp(22px, 1.9vw, 25px); letter-spacing: -0.02em; line-height: 1.25; }
.pv-devis__reponse { font-weight: 600; line-height: 1.5; color: var(--texte-clair); }

/* ── Fougères : texte et capture côte à côte, la suite repliée sous le texte ── */
.pv-deux__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texte visuel" "suite visuel"; align-items: start; gap: 26px 64px; }
.pv-deux__texte { grid-area: texte; }
.pv-deux__visuel { grid-area: visuel; }
.pv-deux__suite { grid-area: suite; }
.pv-deux__suite .pv-analyse { margin-top: 0; }
.pv-capture { margin: 0; }
.pv-capture figcaption { margin-top: 14px; font-size: 16px; line-height: 1.5; color: #52525B; }
.pv-demarrage { max-width: 780px; margin-top: clamp(36px, 5vw, 56px); padding: 26px 28px; border-radius: var(--r-l); background: var(--clair); }
.pv-demarrage h3 { margin-bottom: 10px; font-size: clamp(22px, 1.8vw, 24px); letter-spacing: -0.02em; }
.pv-demarrage p { line-height: 1.65; color: #3F3F46; }
.pv-demarrage p + p { margin-top: 0.8em; }

/* ── Nos réalisations : captures réelles en cartes blanches ────────── */
.pv-refs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
/* position relative : le texte masqué « nouvel onglet » du lien (sr-only, en absolu) reste dans la carte.
   Sans elle, il sortait du carrousel une fois l'animation finie et élargissait la page à 702 px sur téléphone. */
.pv-ref { position: relative; display: grid; align-content: start; justify-items: start; gap: 10px; padding: 14px 14px 20px; border-radius: var(--r-l); background: #fff; border: 1px solid rgba(9, 9, 11, 0.06); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -24px rgba(9, 9, 11, 0.28); }
.pv-ref .cadre-nav { justify-self: stretch; margin-bottom: 8px; box-shadow: none; }
.pv-ref__nom, .pv-ref__texte, .pv-ref .lien-fleche, .pv-ref__statut, .pv-ref__sans { padding-inline: 8px; }
.pv-ref--texte > * { padding-inline: 0; }
.pv-ref__nom { font-size: clamp(22px, 1.7vw, 24px); letter-spacing: -0.02em; line-height: 1.15; }
.pv-ref__texte { font-size: 17px; line-height: 1.55; color: #3F3F46; }
.pv-ref .lien-fleche { font-size: 16px; color: var(--texte-clair); }
.pv-ref--texte { padding: 28px 24px; background: var(--blanc); }
.pv-ref__sans { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ligne-claire); font-size: 16px; line-height: 1.5; color: #52525B; }
/* Statut : même libellé, même place (après la phrase) et même ton que dans les listes de projets du site */
.pv-ref__statut { font-size: 15px; font-weight: 600; color: #52525B; }

/* Un avis mot pour mot et les notes des plateformes (brique commune notesPlateformes, sans retouche ici) */
.pv-avis { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: 32px 56px; margin-top: clamp(56px, 7vw, 96px); }
.pv-avis__titre { font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.03em; line-height: 1.1; }
.pv-avis__titre + .pv-notes { margin-top: 20px; }
/* Liens des plateformes en ligne (et non en bloc en ligne) : la virgule qui suit reste collée au lien au lieu
   de commencer la ligne suivante. La marge intérieure garde la zone de 44 px au doigt. */
.pv-notes .notes__lien { display: inline; }
.pv-avis .avis-vedette { background: #fff; border-color: rgba(9, 9, 11, 0.06); box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 14px 34px -24px rgba(9, 9, 11, 0.28); }

/* ── Ce que nous faisons : un lien de devis par offre, un seul bouton sous la liste ── */
/* Le lien ouvre le devis sur la bonne offre. Hauteur de 44 px au doigt (min-height du lien-fleche du site).
   En bloc en ligne et non en flex : sur deux lignes, la flèche suit le dernier mot au lieu de partir au bord de la carte. */
.pv-offre__devis { display: inline-block; justify-self: start; padding-block: 10px; font-size: 17px; line-height: 1.4; color: var(--texte-clair); text-wrap: pretty; }
.pv-offre__devis::after { content: "\00a0\2192"; }
.pv-offres__action { margin-top: 28px; }
@media (min-width: 1024px) {
  /* Le texte de l'offre à gauche, le délai et le lien de devis l'un sous l'autre à droite */
  .pv-offres .offre { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr); row-gap: 4px; }
  .pv-offres .offre__texte { grid-row: 1 / span 2; }
  .pv-offres .offre__fait { grid-column: 2; align-self: end; }
  .pv-offres .pv-offre__devis { grid-column: 2; align-self: start; }
}
@media (max-width: 1023px) {
  .pv-offres .offre { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .pv-offres .offre__fait { margin-top: 4px; }
}

/* ── Méthode : les conditions en une phrase ────────────────────────── */
.pv-conditions { max-width: 72ch; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--ligne-claire); line-height: 1.6; color: #3F3F46; }

/* ── Où nous intervenons : les autres villes et leur distance réelle ── */
.pv-zone__grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 32px 64px; }
.pv-zone .tete-section { margin-bottom: 24px; }
.pv-zone__adresse { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.pv-zone__adresse svg { flex: none; color: var(--rouge-profond); }
.pv-villes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pv-ville { position: relative; display: grid; gap: 4px; padding: 18px 56px 18px 22px; border-radius: var(--r-l); background: var(--clair); color: #3F3F46; transition: background-color 0.25s ease; }
.pv-ville__nom { line-height: 1.35; }
.pv-ville__nom b { font-weight: 700; color: var(--texte-clair); }
.pv-ville__distance { font-size: 16px; line-height: 1.45; color: #52525B; }
.pv-ville::after { content: "\2192"; position: absolute; top: 50%; right: 22px; margin-top: -0.7em; font-size: 18px; font-weight: 600; color: var(--rouge-profond); transition: transform 0.3s var(--ease); }
.pv-ville:hover { background: var(--clair-2); }
.pv-ville:hover::after { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════
   ORDINATEUR, TABLETTE ET TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════ */
/* Ordinateur : les H1 des villes sont deux fois plus longs que ceux des autres pages,
   une taille sous l'échelle commune pour qu'ils tiennent en trois ou quatre lignes. */
@media (min-width: 1024px) {
  .page-ville .page-heros__titre { max-width: 21ch; font-size: clamp(44px, 4vw, 58px); line-height: 1.02; }
}

/* Tablette : « Création de site internet » tient sur une ligne (taille de l'échelle commune) */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-ville .page-heros__titre { max-width: 26ch; }
}

@media (max-width: 1023px) {
  .pv-scene--tel .cadre-nav__url { max-width: 78%; }
  .pv-trois { grid-template-columns: minmax(0, 1fr); }
  .pv-avis, .pv-zone__grille, .pv-plus__grille { grid-template-columns: minmax(0, 1fr); }
  .pv-plus__grille { gap: 24px; }
  .pv-deux__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "visuel" "suite"; gap: 32px; }
  .pv-scene { max-width: 640px; }
  .pv-portrait { margin: 0; }

  /* Réalisations : un carrousel au doigt dès la tablette, la carte suivante reste visible
     (trois projets sur une grille de deux laissaient une case vide) */
  .pv-refs {
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    grid-template-columns: none;
    gap: 16px;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 4px var(--gouttiere) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .pv-refs::-webkit-scrollbar { display: none; }
  .pv-ref { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .pv-trois { gap: 12px; }
  .pv-trois__carte { padding: 22px 20px; }
  .pv-analyse .detail__resume { padding: 12px 14px 12px 12px; }
  .pv-analyse__photo { width: 44px; height: 44px; }
  .pv-analyse__libelle { font-size: 16px; }
  .pv-analyse__libelle small { font-size: 14px; }
  .pv-analyse .detail__prose { padding: 4px 16px 22px; }

  .pv-devis__ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }

  /* Réalisations : une carte et le bord de la suivante */
  .pv-refs { grid-auto-columns: 84%; gap: 12px; }

  /* Offres : le bouton unique à la largeur du pouce, comme ceux de la première vue et de l'appel final */
  .pv-offres__action .bouton { width: 100%; }

  .pv-demarrage { padding: 20px 18px; }

  /* Portrait de Vitré : une carte en ligne, la photo à gauche, la légende à droite */
  .pv-portrait { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; margin: 0; padding: 10px 16px 10px 10px; }
  .pv-portrait__photo { width: 112px; border-radius: calc(var(--r-l) - 12px); }
  .pv-portrait__legende { padding: 0; }
  .pv-ville { padding: 16px 48px 16px 18px; }
  .pv-ville::after { right: 18px; }
}