/* modele.css : pages secteur /modeles/<secteur> et aperçu des exemples (aussi utilisé par les pages métier) */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.page-hero .cta-row { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; margin-top: var(--s-1); }
.page-hero .cta-row .btn { width: 100%; }
.hero-shot { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-ia); aspect-ratio: 4 / 3; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }
.hero-shot figcaption { position: absolute; left: var(--s-2); bottom: var(--s-2); }
.preview { margin: 0 auto; width: 100%; max-width: 1100px; transition: max-width .25s; }
.preview[data-device="tablette"] { max-width: 768px; }
.preview[data-device="mobile"] { max-width: 390px; }
.preview .mock-win { position: relative; background: var(--c-bg); border-radius: var(--r-lg); box-shadow: var(--shadow-ia); overflow: hidden; border: 1px solid var(--c-line); }
.preview .mock-bar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1h) var(--s-2); border-bottom: 1px solid var(--c-line); background: var(--c-bg-alt); }
.preview .mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ph-2); flex: none; }
.preview .mock-bar i:nth-child(1) { background: var(--c-dot-red); }
.preview .mock-bar i:nth-child(2) { background: var(--c-agence); }
.preview .mock-bar i:nth-child(3) { background: var(--c-dot-green); }
.preview .mock-url { margin-left: var(--s-1); flex: 1; min-width: 0; height: 24px; border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-line); font-size: var(--fs-12); color: var(--c-ink-3); display: flex; align-items: center; padding-inline: var(--s-1h); overflow: hidden; white-space: nowrap; }
.preview iframe { display: block; width: 100%; height: min(640px, 70vh); border: 0; background: var(--c-bg); }

.box .note { font-size: var(--fs-14); color: var(--c-ink-3); }
.others { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.others .thumb { height: 160px; }

@media (min-width: 641px) {
  .page-hero .cta-row { flex-direction: row; flex-wrap: wrap; width: auto; }
  .page-hero .cta-row .btn { width: auto; }
  .preview iframe { height: min(760px, 75vh); }
  .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1101px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
}

/* Pages secteur : besoins du secteur, encart « métier absent » */
.steps-4 .h3 { font-size: var(--fs-20); }
.sec-absent { margin-top: var(--s-4); background: var(--c-bg-ia); border: 1px solid var(--c-ia-line); }
.sec-absent .pack-title { font-size: var(--fs-20); }
@media (min-width: 641px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pages métier : barre au-dessus de l'aperçu (version, description, bouton) */
.vpick { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-1h); max-width: 1100px; margin: 0 auto var(--s-3); text-align: center; }
.vpick .billing button { padding-inline: var(--s-2); }
.vpick-desc { color: var(--c-ink-2); font-size: var(--fs-14); }
@media (min-width: 641px) { .vpick .billing button { padding-inline: var(--s-3); } }
@media (min-width: 900px) {
  .vpick { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-1h); border-radius: var(--r-pill); background: var(--c-bg); border: 1px solid var(--c-line); box-shadow: var(--shadow-soft); text-align: left; }
  .vpick-desc { justify-self: start; }
}

/* Barre de la fenêtre d'aperçu : indication de défilement et ouverture dans un nouvel onglet */
.preview .mock-dots { display: flex; gap: var(--s-1); flex: none; }
.mock-hint { display: inline-flex; margin-left: auto; align-items: center; gap: var(--s-05); flex: none; padding: var(--s-05) var(--s-1h); border-radius: var(--r-pill); background: var(--c-ia-soft); color: var(--c-ia-strong); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; }
.mock-hint .ic { animation: mock-nudge 1.6s ease-in-out infinite; }
@keyframes mock-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.mock-hint-long { display: none; }
.mock-open { display: inline-flex; align-items: center; gap: var(--s-05); flex: none; min-height: 32px; padding: 0 var(--s-1h); border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-ink); font-family: var(--f-title); font-size: var(--fs-12); font-weight: 500; text-decoration: none; }
.mock-open:hover { border-color: var(--c-ia); color: var(--c-ia); }
.preview .mock-url { display: none; }
@media (min-width: 641px) { .preview .mock-url { display: flex; } }
@media (min-width: 900px) { .mock-hint-long { display: inline; } .mock-hint-short { display: none; } }
@media (prefers-reduced-motion: reduce) { .mock-hint .ic { animation: none; } }

/* Pages conseillées et mentions (pages métier et secteur) : deux cartes de même hauteur, pied de carte teinté */
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.pm-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-3) 0; border: 1px solid var(--c-line); border-radius: var(--r-xl); background: var(--c-bg); overflow: hidden; }
.pm-head { display: flex; align-items: center; gap: var(--s-2); }
.pm-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-md); background: var(--c-ia-soft); color: var(--c-ia); }
.pm-card-agence .pm-ic { background: var(--c-agence-soft); color: var(--c-agence-text); }
.pm-pages { display: flex; flex-direction: column; }
.pm-pages li { display: flex; align-items: flex-start; gap: var(--s-2); padding-block: var(--s-1h); border-bottom: 1px solid var(--c-line); }
.pm-pages li:last-child { border-bottom: 0; }
.pm-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--c-ia-soft); color: var(--c-ia-strong); font-weight: 700; font-size: var(--fs-14); }
.pm-pages b { display: block; font-weight: 600; color: var(--c-ink); padding-top: 2px; }
.pm-pages small { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--c-ink-3); }
.pm-foot { display: flex; flex-direction: column; gap: var(--s-1h); margin: auto calc(var(--s-3) * -1) 0; padding: var(--s-3); background: var(--c-bg-ia); border-top: 1px solid var(--c-ia-line); }
.pm-card-agence .pm-foot { background: var(--c-agence-bg); border-top-color: var(--c-agence-line); }
.pm-plans { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-2); }
.pm-foot .note { font-size: var(--fs-14); color: var(--c-ink-2); }
.pm-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--fs-14); }
.pm-links a { color: var(--c-agence-text); font-weight: 600; text-underline-offset: 3px; }

@media (min-width: 641px) {
  .pm-card { padding: var(--s-5) var(--s-5) 0; }
  .pm-foot { margin-inline: calc(var(--s-5) * -1); padding: var(--s-3) var(--s-5); }
}
@media (min-width: 1101px) {
  .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
.pm-card-agence .pm-n { background: var(--c-agence-soft); color: var(--c-agence-text); }

/* Autres secteurs : toute la carte est cliquable */
.sect-card { transition: box-shadow .2s, transform .2s; }
.sect-card:hover { box-shadow: var(--shadow); }
.sect-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-1) var(--s-1h) var(--s-05); }
.sect-meta { display: flex; align-items: center; gap: var(--s-1); font-size: var(--fs-14); color: var(--c-ink-3); }
.sect-name { font-family: var(--f-title); font-weight: 600; font-size: var(--fs-20); }
.sect-link { color: var(--c-ink-2); font-size: var(--fs-14); text-decoration: none; }
.sect-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sect-link:focus-visible { outline: none; }
.sect-card:focus-within { outline: 2px solid var(--c-ia); outline-offset: 2px; }
.sect-more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-05); font-weight: 600; font-size: var(--fs-14); color: var(--c-ia); }
.sect-more .ic { transition: transform .2s; }
.sect-card:hover .sect-name { color: var(--c-ia); }
.sect-card:hover .sect-more .ic { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .sect-card, .sect-more .ic { transition: none; } .sect-card:hover .sect-more .ic { transform: none; } }