/* Page de présentation : donner envie d'étudier son emplacement. Couleurs : celles de l'application (style.css). */
.presentation { --large: 72rem; --ombre: 0 18px 50px -18px color-mix(in srgb, #1f2a24 45%, transparent); }
.presentation main { overflow-x: clip; }
.presentation h1, .presentation h2, .presentation h3 { letter-spacing: -.01em; }
.presentation a { color: var(--accent); }
.presentation .bouton { display: inline-block; text-decoration: none; }
.presentation .bouton.principal { color: var(--accent-texte); }
.p-grand { padding: 13px 24px; font-size: 1.05rem; font-weight: 650; }

/* Barre de navigation */
.p-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 10px max(16px, calc((100% - var(--large)) / 2));
  background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.p-marque { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--texte) !important; text-decoration: none; }
.p-marque { margin-right: auto; }
.p-nav nav { display: flex; gap: 18px; }
.p-nav-compte { color: var(--texte); font-weight: 600; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.p-nav-compte:hover { text-decoration: underline; }
.p-nav nav a { color: var(--doux); text-decoration: none; font-size: .95rem; }
.p-nav nav a:hover { color: var(--texte); }
.p-nav-cta { padding: 8px 16px; }
@media (max-width: 720px) { .p-nav nav { display: none; } .p-nav { gap: 14px; } }
/* Petit écran avec « Commencer » : le logo seul laisse la place aux deux boutons. */
@media (max-width: 480px) { body:not([data-vue=""]) .p-marque span { display: none; } }

/* Accroche */
.p-hero { max-width: var(--large); margin: 0 auto; padding: 56px 16px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.p-surtitre { margin: 0 0 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.p-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 0 0 18px; }
.p-hero h1 em { font-style: normal; color: var(--accent); }
.p-chapo { font-size: 1.12rem; line-height: 1.6; color: var(--doux); margin: 0 0 26px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.p-atouts { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--doux); font-size: .92rem; }
.p-atouts li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: 6px; }
.p-atouts strong { color: var(--texte); }
.p-hero-visuel { margin: 0; position: relative; }
.p-hero-visuel::before { content: ""; position: absolute; inset: -8% -10% -10% 8%; border-radius: 40px; z-index: -1;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--lieu-a) 22%, transparent), transparent 70%),
    radial-gradient(55% 55% at 75% 65%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); }
.p-hero-visuel img { border-radius: 14px; box-shadow: var(--ombre); transform: rotate(-1.2deg); transition: transform .3s; }
.p-hero-visuel button:hover img { transform: rotate(0) scale(1.01); }
.p-hero-visuel figcaption { margin-top: 18px; color: var(--doux); font-size: .95rem; text-align: center; }
@media (max-width: 860px) { .p-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; } }

/* Sections */
.p-section { max-width: var(--large); margin: 0 auto; padding: 56px 16px; }
.p-section > h2, .p-final h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 10px; line-height: 1.2; }
.p-intro { color: var(--doux); font-size: 1.08rem; max-width: 46rem; margin: 0 0 28px; }
.p-centre { text-align: center; margin-top: 28px; }

.p-questions { border-top: 1px solid var(--bord); }
.p-grille4, .p-grille3 { display: grid; gap: 16px; margin-top: 24px; }
.p-grille4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-grille3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .p-grille4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .p-grille3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .p-grille4 { grid-template-columns: minmax(0, 1fr); } }
.p-grille4 article, .p-grille3 article { background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 18px; }
.p-grille4 h3, .p-grille3 h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.p-grille4 p, .p-grille3 p { margin: 0; color: var(--doux); font-size: .95rem; line-height: 1.5; }
.p-pastille { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1.2rem; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Étapes */
.p-etapes { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 24px; }
.p-etapes ol { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.p-etapes li { counter-increment: etape; position: relative; padding-left: 52px; color: var(--doux); line-height: 1.55; }
.p-etapes li strong { display: block; color: var(--texte); font-size: 1.08rem; margin-bottom: 2px; }
.p-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-texte); font-weight: 800; }
@media (max-width: 860px) { .p-etapes { grid-template-columns: minmax(0, 1fr); } }

/* Captures */
.p-agrandir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; }
.p-agrandir:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.p-agrandir img, .p-cadre img { display: block; width: 100%; height: auto; }
.p-cadre { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre); background: #fff; }
/* Aperçu d'une capture haute : le haut de la page, fondu vers le bas ; le reste en cliquant. */
.p-apercu { border: 0; box-shadow: none; background: none; overflow: visible; display: grid; gap: 14px; }
.p-apercu .p-agrandir { position: relative; overflow: hidden; max-height: 26rem; border: 1px solid var(--bord); box-shadow: var(--ombre); background: #fff; }
.p-apercu .p-agrandir::after { content: "Agrandir"; position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 0 12px; text-align: center;
  font-weight: 650; font-size: .9rem; color: var(--accent); background: linear-gradient(transparent, rgba(255, 255, 255, .96) 70%); }
.p-apercu .p-second { max-height: 12rem; }

/* Lecteurs */
.p-lecteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; align-items: center; padding: 36px 0; border-top: 1px solid var(--bord); }
.p-lecteur:first-of-type { border-top: 0; }
.p-inverse .p-lecteur-texte { order: 2; }
.p-qui { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 700; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.p-rond { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: .9rem; }
.p-lecteur h3 { font-size: 1.5rem; margin: 0 0 12px; line-height: 1.2; }
.p-cherche { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; font-size: .97rem; }
.p-lecteur ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 7px; line-height: 1.5; }
@media (max-width: 860px) {
  .p-lecteur { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .p-inverse .p-lecteur-texte { order: 0; }
}

/* Exemple */
.p-exemple { background: var(--surface); border-radius: 24px; border: 1px solid var(--bord); padding-left: 24px; padding-right: 24px; max-width: calc(var(--large) - 32px); }
.p-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.p-galerie figure { margin: 0; }
.p-galerie .p-agrandir { height: 17rem; overflow: hidden; border: 1px solid var(--bord); background: #fff; box-shadow: var(--ombre); }
.p-galerie img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.p-galerie figcaption { margin-top: 10px; color: var(--doux); font-size: .93rem; }
.p-galerie figcaption strong { color: var(--texte); }
@media (max-width: 860px) { .p-galerie { grid-template-columns: minmax(0, 1fr); } .p-exemple { margin: 0 16px; padding-left: 16px; padding-right: 16px; } }

/* Confiance et appel final */
.p-note { margin-top: 22px; color: var(--doux); font-size: .95rem; }
.p-final { text-align: center; padding: 64px 16px 72px; margin-top: 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--fond)), var(--fond)); border-top: 1px solid var(--bord); }
.p-final p { color: var(--doux); font-size: 1.08rem; margin: 0 0 24px; }
.p-pied { text-align: center; padding: 20px 16px 32px; }

/* Visionneuse */
.p-visionneuse { border: 0; border-radius: 16px; padding: 18px; max-width: min(96vw, 1100px); max-height: 94vh; background: var(--surface); color: var(--texte); }
.p-visionneuse::backdrop { background: rgba(10, 15, 12, .72); }
.p-visionneuse img { display: block; max-width: 100%; max-height: calc(94vh - 110px); margin: 0 auto; border-radius: 8px; }
.p-visionneuse p { margin: 12px 4px 0; color: var(--doux); }
.p-visionneuse form { position: sticky; top: 0; text-align: right; height: 0; }
.p-fermer { position: relative; top: -6px; right: -6px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bord);
  background: var(--surface); color: var(--texte); font-size: 1.4rem; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .p-hero-visuel img { transform: none; transition: none; } }

/* Famille annoncée dont le rapport complet est en préparation */
.p-bientot { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* Tarifs */
.p-tarifs article { display: flex; flex-direction: column; gap: 2px; }
.p-tarif-public { color: var(--accent) !important; font-weight: 700; font-size: .85rem !important; text-transform: uppercase; letter-spacing: .05em; }
.p-prix { color: var(--texte) !important; font-size: 1.9rem !important; font-weight: 800; margin-top: 12px !important; line-height: 1.1 !important; }
.p-prix small { font-size: .9rem; font-weight: 600; color: var(--doux); }
.p-tarif-plus { margin-top: auto !important; padding-top: 14px; font-size: .9rem !important; }

/* Deux portes : créateur d'activité, ou entreprise / collectivité qui installe un site */
.p-portes { display: grid; gap: 12px; max-width: 34rem; }
.p-porte { display: grid; gap: 4px; padding: 16px 20px; border-radius: 14px; text-decoration: none; border: 2px solid var(--accent);
  background: var(--surface); color: var(--texte) !important; transition: transform .15s, box-shadow .15s; position: relative; padding-right: 48px; }
.p-porte::after { content: "→"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--accent); }
.p-porte strong { font-size: 1.12rem; line-height: 1.3; }
.p-porte span { color: var(--doux); font-size: .95rem; }
.p-porte:hover, .p-porte:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.p-porte-principale { background: var(--accent); color: var(--accent-texte) !important; }
.p-porte-principale span { color: color-mix(in srgb, var(--accent-texte) 82%, transparent); }
.p-porte-principale::after { color: var(--accent-texte); }
.p-exemple-lien { margin: 14px 0 0; }

/* Accroche sans visuel (page « implanter un site ») */
.p-hero-seul { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }

/* ---------- Une page, deux publics ---------- */
[data-vue="createur"] [data-pour="site"], [data-vue="site"] [data-pour="createur"] { display: none !important; }
/* Troisième public : achat d'un terrain non constructible */
[data-vue="createur"] [data-pour="terrain"], [data-vue="site"] [data-pour="terrain"],
[data-vue="terrain"] [data-pour="createur"], [data-vue="terrain"] [data-pour="site"], [data-vue="terrain"] #lecteurs { display: none !important; }
[data-vue="terrain"] .p-etapes[data-pour="terrain"] { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
[data-vue="terrain"] .p-tarifs [data-public="terrain"] { border-color: var(--accent); box-shadow: var(--ombre); }
.p-illu .p-houppier { fill: color-mix(in srgb, var(--c) 30%, var(--surface)); stroke: var(--c); stroke-width: 3; stroke-linejoin: round; }
.p-illu .p-arbre { stroke: var(--c); stroke-width: 5; stroke-linecap: round; }
.p-illu .p-limite { fill: none; stroke: color-mix(in srgb, var(--c) 60%, transparent); stroke-width: 2; stroke-dasharray: 3 5; }

/* Aiguillage : deux grands onglets en tête de page */
.p-aiguillage { max-width: var(--large); margin: 28px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  position: relative; }
.p-aiguillage [role="tab"] { font: inherit; text-align: left; cursor: pointer; display: grid; gap: 2px; padding: 16px 22px;
  border: 2px solid var(--bord); background: var(--surface); color: var(--texte); transition: background .2s, border-color .2s, color .2s; }
.p-aiguillage [role="tab"]:first-child { border-radius: 16px 0 0 16px; border-right-width: 1px; }
.p-aiguillage [role="tab"]:last-child { border-radius: 0 16px 16px 0; border-left-width: 1px; }
.p-aiguillage [role="tab"]:not(:first-child):not(:last-child) { border-radius: 0; border-left-width: 1px; border-right-width: 1px; }
.p-aiguillage [role="tab"] strong { font-size: 1.12rem; }
.p-aiguillage [role="tab"] span { color: var(--doux); font-size: .92rem; }
.p-aiguillage [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.p-aiguillage [role="tab"][aria-selected="true"] span { color: color-mix(in srgb, var(--accent-texte) 82%, transparent); }
.p-aiguillage [role="tab"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
[data-vue="site"] .p-aiguillage [role="tab"][aria-selected="true"] { background: var(--lieu-a); border-color: var(--lieu-a); }
@media (max-width: 640px) {
  .p-aiguillage { grid-template-columns: 1fr; gap: 8px; }
  .p-aiguillage [role="tab"]:first-child, .p-aiguillage [role="tab"]:last-child, .p-aiguillage [role="tab"]:not(:first-child):not(:last-child) { border-radius: 14px; border-width: 2px; }
}
.p-hero { padding-top: 32px; }

/* Une adresse, deux regards */
.p-regards { padding-top: 24px; }
.p-regards h2 { margin-bottom: 26px; }
.p-centre { text-align: center; }
.p-regards-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0; }
.p-regard { font: inherit; text-align: left; cursor: pointer; color: var(--texte); background: var(--surface); border: 1px solid var(--bord);
  border-radius: 20px; padding: 24px 26px; display: grid; gap: 10px; transition: transform .2s, box-shadow .2s, opacity .2s; position: relative; }
.p-regard:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.p-regard-createur { border-top: 6px solid var(--accent); }
.p-regard-site { border-top: 6px solid var(--lieu-a); }
[data-vue="createur"] .p-regard-site, [data-vue="site"] .p-regard-createur { opacity: .55; }
[data-vue="createur"] .p-regard-createur, [data-vue="site"] .p-regard-site { box-shadow: var(--ombre); }
.p-regard-qui { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.p-regard-createur .p-regard-qui { color: var(--accent); }
.p-regard-site .p-regard-qui { color: var(--lieu-a); }
.p-regard-question { margin: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.25; }
.p-regard dl { margin: 4px 0 0; display: grid; gap: 8px; }
.p-regard dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--bord); padding-bottom: 6px; }
.p-regard dt { color: var(--doux); font-size: .92rem; }
.p-regard dd { margin: 0; font-weight: 750; text-align: right; }
.p-regard dd small { display: block; font-weight: 400; color: var(--doux); font-size: .8rem; }
.p-regard-note { margin: 4px 0 0; color: var(--doux); }
.p-regard-note strong { font-size: 1.7rem; color: var(--texte); }
/* Le lieu commun, au centre : les deux regards partent du même point */
.p-regard-lieu { display: grid; justify-items: center; gap: 2px; padding: 0 22px; color: var(--texte); position: relative; z-index: 1; }
.p-regard-lieu svg { color: var(--attention); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .18)); }
.p-regard-lieu strong { font-size: 1.15rem; }
.p-regard-lieu span { color: var(--doux); font-size: .85rem; }
.p-regard-lieu::before, .p-regard-lieu::after { content: ""; position: absolute; top: 34%; width: 22px; border-top: 2px dashed var(--bord); }
.p-regard-lieu::before { left: 0; } .p-regard-lieu::after { right: 0; }
@media (max-width: 860px) {
  .p-regards-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .p-regard-lieu { order: -1; padding: 0; }
  .p-regard-lieu::before, .p-regard-lieu::after { display: none; }
}

/* Tarifs : la formule du public choisi est mise en avant */
.p-tarifs article { transition: box-shadow .2s, border-color .2s, transform .2s; }
[data-vue="createur"] .p-tarifs [data-public="createur"], [data-vue="site"] .p-tarifs [data-public="site"] {
  border: 2px solid var(--accent); box-shadow: var(--ombre); transform: translateY(-4px); }
[data-vue="site"] .p-tarifs [data-public="site"] { border-color: var(--lieu-a); }

/* Chaque public a sa couleur dans toute la page : vert pour les créateurs, bleu pour les entreprises et collectivités. */
body[data-vue="site"] { --accent: #1d4ed8; }
@media (prefers-color-scheme: dark) { body[data-vue="site"] { --accent: #60a5fa; --accent-texte: #0b1730; } }
[data-vue="site"] .p-aiguillage [role="tab"][aria-selected="true"] { background: var(--accent); border-color: var(--accent); }
[data-vue="site"] .p-tarifs [data-public="site"] { border-color: var(--accent); }
/* Couleurs fixes de chaque public, quelle que soit la vue choisie */
.presentation { --vert-createur: #2f6b4f; --bleu-site: #1d4ed8; }
@media (prefers-color-scheme: dark) { .presentation { --vert-createur: #7cc3a0; --bleu-site: #60a5fa; } }
.p-regard-createur { border-top-color: var(--vert-createur); }
.p-regard-createur .p-regard-qui, .p-tarifs [data-public="createur"] .p-tarif-public { color: var(--vert-createur) !important; }
.p-regard-site { border-top-color: var(--bleu-site); }
.p-regard-site .p-regard-qui, .p-tarifs [data-public="site"] .p-tarif-public { color: var(--bleu-site) !important; }
[data-vue="createur"] .p-tarifs [data-public="createur"] { border-color: var(--vert-createur); }

/* ================= Écran d'arrivée : le choix d'abord ================= */
.p-hero .p-hero-titre { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 0 0 18px; }
.p-hero .p-hero-titre em { font-style: normal; color: var(--accent); }

/* Tant qu'aucun choix n'est fait : seul l'écran d'arrivée est visible */
body[data-vue=""] .p-contenu, body[data-vue=""] .p-nav nav, body[data-vue=""] .p-nav-cta, body[data-vue=""] .p-pied { display: none; }
body:not([data-vue=""]) .p-accueil { display: none; }

.p-accueil { min-height: calc(100vh - 62px); min-height: calc(100svh - 62px); display: flex; flex-direction: column; justify-content: center;
  align-items: center; padding: 28px 16px 22px; text-align: center; overflow: hidden; }
.p-accueil-titre { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0; letter-spacing: -.02em; animation: p-monte .7s ease-out both; }
.p-accueil-sous { color: var(--doux); font-size: 1.15rem; line-height: 1.5; max-width: 44rem; margin: 14px auto 18px; animation: p-monte .7s .1s ease-out both; }
.p-accueil-sous strong { color: var(--texte); }
.p-accueil-consigne { font-weight: 650; margin: 0 0 22px; animation: p-monte .7s .15s ease-out both; }
.p-accueil-pied { color: var(--doux); font-size: .85rem; margin: 30px 0 0; animation: p-fondu 1s .8s both; }
.p-choix { display: flex; gap: 22px; width: min(100%, 1200px); }
.p-choix-carte { --c: #2f6b4f; --c-clair: #e3f0e8; flex: 1 1 0; font: inherit; color: var(--texte); cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 22px 26px 24px; border-radius: 26px;
  border: 2px solid color-mix(in srgb, var(--c) 30%, transparent); background: linear-gradient(170deg, var(--c-clair), var(--surface) 70%);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--c) 70%, transparent);
  transition: flex-grow .5s cubic-bezier(.2,.8,.2,1), transform .35s, box-shadow .35s, border-color .35s, opacity .4s;
  animation: p-monte .8s cubic-bezier(.2,.8,.2,1) both; }
.p-choix-site { --c: #1d4ed8; --c-clair: #e2e9fb; animation-delay: .15s; }
.p-choix-terrain { --c: #6b5b1f; --c-clair: #f2ecd9; animation-delay: .3s; }
@media (prefers-color-scheme: dark) { .p-choix-terrain { --c: #d6c27a; --c-clair: #2b2614; } }
@media (prefers-color-scheme: dark) {
  .p-choix-createur { --c: #7cc3a0; --c-clair: #1c2b23; } .p-choix-site { --c: #60a5fa; --c-clair: #18233a; }
}
.p-choix-carte .p-illu { grid-column: 1 / -1; width: 100%; height: auto; max-height: 230px; margin-bottom: 10px; }
.p-choix-titre { grid-column: 1; font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; color: var(--c); }
.p-choix-sous { grid-column: 1; color: var(--doux); font-size: .98rem; }
.p-choix-question { grid-column: 1; margin-top: 10px; font-style: italic; color: var(--texte); }
.p-choix-fleche { grid-column: 2; grid-row: 2 / span 3; align-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.6rem; background: var(--c); color: #fff; transition: transform .35s; }
.p-choix-carte:hover, .p-choix-carte:focus-visible { flex-grow: 1.35; transform: translateY(-6px); border-color: var(--c);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 80%, transparent); outline: none; }
.p-choix-carte:hover .p-choix-fleche, .p-choix-carte:focus-visible .p-choix-fleche { transform: translateX(6px); }
.p-choix:has(.p-choix-carte:hover) .p-choix-carte:not(:hover) { opacity: .75; }
@media (max-width: 760px) {
  .p-choix { flex-direction: column; gap: 14px; }
  .p-choix-carte { padding: 16px 18px 18px; border-radius: 20px; }
  .p-choix-carte .p-illu { max-height: 130px; }
  .p-choix-carte:hover { flex-grow: 1; }
  .p-accueil-sous { margin-bottom: 12px; font-size: 1.02rem; }
  .p-accueil-consigne { margin-bottom: 14px; }
}

/* Illustrations : traits simples, couleur du public */
.p-illu { overflow: visible; }
.p-illu .p-sol, .p-illu .p-route { fill: none; stroke: color-mix(in srgb, var(--c) 35%, transparent); stroke-width: 2; stroke-dasharray: 5 6; }
.p-illu .p-boutique rect:first-child, .p-illu .p-batiment > rect:first-child { fill: var(--surface); stroke: var(--c); stroke-width: 3; }
.p-illu .p-store { fill: var(--c); }
.p-illu .p-rayures { stroke: var(--surface); stroke-width: 4; }
.p-illu .p-porte { fill: var(--c); opacity: .85; }
.p-illu .p-vitre { fill: color-mix(in srgb, var(--c) 22%, transparent); }
.p-illu .p-fenetres { stroke: color-mix(in srgb, var(--c) 55%, transparent); stroke-width: 6; stroke-linecap: round; }
.p-illu .p-gens circle { fill: var(--c); }
.p-illu .p-epingle path { fill: #c2410c; } .p-illu .p-epingle circle { fill: #fff; }

/* Les clients convergent vers la boutique */
.p-illu .p-epingle { animation: p-rebond 2.4s ease-in-out infinite; transform-origin: 120px 34px; }
.p-g1 { animation: p-vers-droite 3.2s ease-in-out infinite; }
.p-g2 { animation: p-vers-gauche 3.6s .4s ease-in-out infinite; }
.p-g3 { animation: p-vers-droite2 4s 1.2s ease-in-out infinite; }
.p-g4 { animation: p-vers-gauche2 3.4s 1.8s ease-in-out infinite; }
.p-g5 { animation: p-vers-droite3 4.4s 2.4s ease-in-out infinite; }
@keyframes p-vers-droite { 0% { transform: translateX(0); opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateX(105px); opacity: 0 } }
@keyframes p-vers-gauche { 0% { transform: translateX(0); opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateX(-105px); opacity: 0 } }
@keyframes p-vers-droite2 { 0% { transform: translateX(0); opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateX(85px); opacity: 0 } }
@keyframes p-vers-gauche2 { 0% { transform: translateX(0); opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateX(-87px); opacity: 0 } }
@keyframes p-vers-droite3 { 0% { transform: translateX(0); opacity: 0 } 15% { opacity: 1 } 80% { opacity: 1 } 100% { transform: translateX(125px); opacity: 0 } }
@keyframes p-rebond { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

/* Les salariés arrivent des communes voisines, par les routes */
.p-s1 { offset-path: path("M0 30 Q 70 40 112 80"); animation: p-trajet 3.4s ease-in-out infinite; }
.p-s2 { offset-path: path("M240 26 Q 170 44 128 80"); animation: p-trajet 3.8s .6s ease-in-out infinite; }
.p-s3 { offset-path: path("M0 140 Q 60 120 110 100"); animation: p-trajet 3.2s 1.2s ease-in-out infinite; }
.p-s4 { offset-path: path("M240 142 Q 180 122 130 100"); animation: p-trajet 3.6s 1.8s ease-in-out infinite; }
.p-s5 { offset-path: path("M0 30 Q 70 40 112 80"); animation: p-trajet 3.4s 2.1s ease-in-out infinite; }
.p-s6 { offset-path: path("M240 142 Q 180 122 130 100"); animation: p-trajet 3.6s 2.7s ease-in-out infinite; }
@keyframes p-trajet { 0% { offset-distance: 0%; opacity: 0 } 12% { opacity: 1 } 85% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
.p-choix-carte:hover .p-gens circle { animation-duration: 1.8s; }
.p-batiment .p-fenetres { animation: p-lumieres 3s steps(2) infinite; }
@keyframes p-lumieres { 50% { stroke: color-mix(in srgb, var(--c) 85%, transparent); } }

@keyframes p-monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes p-fondu { from { opacity: 0; } to { opacity: 1; } }

/* Départ : la carte choisie s'étire, l'autre s'efface, puis la page du public apparaît */
.p-depart-createur .p-choix-createur, .p-depart-site .p-choix-site, .p-depart-terrain .p-choix-terrain { flex-grow: 3; transform: scale(1.02); }
.p-depart-terrain .p-choix-createur, .p-depart-terrain .p-choix-site, .p-depart-createur .p-choix-terrain, .p-depart-site .p-choix-terrain,
.p-depart-createur .p-choix-site, .p-depart-site .p-choix-createur { flex-grow: .0001; opacity: 0; padding-left: 0; padding-right: 0; border-width: 0; }
.p-depart-createur .p-accueil-titre, .p-depart-site .p-accueil-titre, .p-depart-createur .p-accueil-sous, .p-depart-site .p-accueil-sous, .p-depart-createur .p-accueil-consigne, .p-depart-site .p-accueil-consigne { opacity: 0; transition: opacity .4s; }
body:not([data-vue=""]) .p-contenu { animation: p-monte .7s cubic-bezier(.2,.8,.2,1) both; }

/* Sections dévoilées au défilement */
.p-revele { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.p-revele.p-visible { opacity: 1; transform: none; }
.p-revele .p-grille4 > *, .p-revele .p-grille3 > *, .p-revele .p-galerie > * { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.p-revele.p-visible .p-grille4 > *, .p-revele.p-visible .p-grille3 > *, .p-revele.p-visible .p-galerie > * { opacity: 1; transform: none; }
.p-revele.p-visible :is(.p-grille4, .p-grille3, .p-galerie) > :nth-child(2) { transition-delay: .1s; }
.p-revele.p-visible :is(.p-grille4, .p-grille3, .p-galerie) > :nth-child(3) { transition-delay: .2s; }
.p-revele.p-visible :is(.p-grille4, .p-grille3, .p-galerie) > :nth-child(4) { transition-delay: .3s; }
.p-revele.p-visible :is(.p-grille4, .p-grille3, .p-galerie) > :nth-child(n+5) { transition-delay: .4s; }

/* Aiguillage compact une fois le choix fait */
.p-aiguillage { margin-top: 18px; max-width: 520px; }
.p-aiguillage [role="tab"] { padding: 10px 18px; text-align: center; }
.p-aiguillage [role="tab"] strong { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .p-illu *, .p-choix-carte, .p-accueil-titre, .p-accueil-sous, .p-accueil-consigne, .p-contenu { animation: none !important; }
  .p-revele, .p-revele * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.p-choix-carte:hover, .p-choix-carte:focus-visible { flex-grow: 1.18; }
.p-choix-titre { white-space: nowrap; }
@media (max-width: 760px) { .p-choix-titre { white-space: normal; } .p-choix-carte .p-illu { max-height: 105px; } .p-accueil { padding-top: 18px; } }
/* Départ : la carte non choisie s'efface d'abord (contenu compris), puis se replie */
.p-choix-carte { overflow: hidden; }
.p-choix-carte > * { transition: opacity .18s; }
.p-depart-createur .p-choix-site > *, .p-depart-site .p-choix-createur > * { opacity: 0; }
.p-depart-createur .p-choix-site, .p-depart-site .p-choix-createur { transition: opacity .2s, flex-grow .45s .12s cubic-bezier(.2,.8,.2,1), padding .45s .12s, border-width .2s; }
.p-depart-createur .p-choix-createur .p-gens circle, .p-depart-site .p-choix-site .p-gens circle { animation-duration: .9s; }
/* Téléphone : cartes empilées, hauteur naturelle (la base flexible à 0 les écrasait) */
@media (max-width: 760px) {
  .p-choix-carte, .p-choix-carte:hover, .p-choix-carte:focus-visible { flex: none; }
  .p-depart-createur .p-choix-site, .p-depart-site .p-choix-createur { flex: none; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; transition: opacity .2s, max-height .45s .12s, padding .45s .12s; }
  .p-choix-carte { max-height: 600px; }
  .p-accueil { justify-content: flex-start; }
}
/* Titres, sous-titres et questions alignés d'une carte à l'autre */
.p-choix-carte { grid-template-rows: auto auto minmax(2.9em, auto) auto; align-items: start; }
.p-choix-sous { line-height: 1.45; }
.p-choix-fleche { align-self: end; margin-bottom: 4px; }
/* Interrupteur compact, côte à côte même sur téléphone */
@media (max-width: 640px) {
  .p-aiguillage { grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 12px; }
  .p-aiguillage [role="tab"] { padding: 9px 8px; }
  .p-aiguillage [role="tab"]:not(:first-child):not(:last-child) { border-radius: 0; border-width: 2px 1px; }
  .p-aiguillage [role="tab"] strong { font-size: .88rem; }
  .p-aiguillage [role="tab"]:first-child { border-radius: 12px 0 0 12px; border-right-width: 1px; }
  .p-aiguillage [role="tab"]:last-child { border-radius: 0 12px 12px 0; border-left-width: 1px; }
}
.p-aiguillage [role="tab"] { align-content: center; }
.p-num-etape { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-texte); font-weight: 800; }
.p-ouverture .p-grille4 article { position: relative; }