/* =============================================================================
   Camabe — la page « Le site de votre cabinet » (25/09/2026) : site-vitrine/sites.php.
   Les modeles en vignettes vivantes (quatre ici, les huit sur modeles.php) (iframe du cabinet fictif, reduite),
   la liste de ce que contient le site, les trois etapes. Variables du socle
   seulement : les couleurs des modeles vivent dans site-cabinet/assets/site.css.
   ========================================================================== */

.st-intro { max-width: 720px; margin: 1rem 0 0; color: var(--encre-douce); font-size: 1.05rem; line-height: 1.6; }
.st-creux { background: var(--papier-creux); }

.st-modeles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 2.2rem; }
.st-modele { display: grid; gap: 14px; align-content: start; padding: 14px; border: 1px solid var(--trait); border-radius: 18px; background: var(--carte); box-shadow: var(--ombre); }
/* La barre d'adresse au-dessus de la vignette : le site vit au sous-domaine du cabinet. */
.st-modele__adresse { display: flex; align-items: center; gap: 8px; margin-bottom: -8px; padding: 7px 12px; border: 1px solid var(--trait); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--papier-creux); color: var(--encre-douce); font-size: .8rem; font-family: ui-monospace, Consolas, monospace; }
.st-modele__adresse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .7; }
.st-modele__vignette { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); }
.st-modele__vignette iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--echelle, .4)); transform-origin: 0 0; pointer-events: none; }
.st-modele__adresse + .st-modele__vignette { border-top-left-radius: 0; border-top-right-radius: 0; }
.st-modele__vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.st-modele__texte { display: grid; gap: 4px; padding: 0 6px 6px; }
.st-modele__texte h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.st-modele__texte p { margin: 0; color: var(--encre-douce); line-height: 1.5; }
.st-modele__lien { justify-self: start; margin-top: 4px; color: var(--accent); font-weight: 600; }

.st-duo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.st-liste { display: grid; gap: 14px; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.st-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--encre-douce); line-height: 1.55; }
.st-liste li strong { color: var(--encre); }
.st-liste svg { width: 22px; height: 22px; margin-top: 2px; color: var(--accent); }
.st-encadres { display: grid; gap: 16px; }

.st-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 1.8rem 0 0; padding: 0; list-style: none; counter-reset: st; }
.st-etapes li { position: relative; padding: 54px 20px 20px; border: 1px solid var(--trait); border-radius: 14px; background: var(--carte); color: var(--encre-douce); line-height: 1.55; counter-increment: st; }
.st-etapes li strong { color: var(--encre); }
.st-etapes li::before { content: counter(st); position: absolute; left: 20px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-pale); color: var(--accent); font-weight: 700; font-size: .85rem; }
.st-deja { margin-top: 26px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* L'encart « Et votre site ? » des pages de l'avocat (accueil, Pour vos clients). */
.accueil-site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 2.4rem; }
.accueil-site > div { flex: 1 1 420px; }
.accueil-site h3 { margin: 0 0 6px; }
.accueil-site p { margin: 0; }

@media (max-width: 900px) {
  .st-modeles, .st-duo, .st-etapes { grid-template-columns: minmax(0, 1fr); }
}

/* Le bouton « Voir tous les modeles » sous les quatre de sites.php, et la page modeles.php. */
.st-tous { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 2rem 0 0; color: var(--encre-douce); }
.st-retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 1rem; color: var(--encre-douce); font-size: .92rem; font-weight: 600; text-decoration: none; }
.st-retour::before { content: "\2190"; transition: transform .2s ease; }
.st-retour:hover { color: var(--accent); }
.st-retour:hover::before { transform: translateX(-3px); }
.st-modele__mise { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; padding: 0; list-style: none; }
.st-modele__mise li { padding: 3px 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--papier-creux); color: var(--encre-douce); font-size: .8rem; }
.st-encadres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.8rem; }
@media (max-width: 900px) {
  .st-encadres--trois { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .st-retour::before { transition: none; }
}

/* La page des modeles (plus de cent) : filtres par famille, recherche, paquets de vingt-quatre. */
.st-modele[hidden] { display: none; }
.st-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 6px; padding: 14px 0; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(10px); }
.st-filtres[hidden] { display: none; }
.st-filtres__familles { display: flex; flex-wrap: wrap; gap: 8px; }
.st-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); color: var(--encre); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.st-puce small { color: var(--encre-douce); font-weight: 500; }
.st-puce:hover { border-color: var(--accent); }
.st-puce[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--papier); }
.st-puce[aria-pressed="true"] small { color: inherit; opacity: .8; }
.st-puce:focus-visible, .st-recherche input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-recherche { display: grid; gap: 2px; margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--encre-douce); }
.st-recherche input { min-width: min(280px, 100%); min-height: 40px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); color: var(--encre); font: inherit; font-size: .95rem; }
.st-filtres__compte { margin: 0; color: var(--encre-douce); font-size: .9rem; }
.st-modeles[data-modeles] { margin-top: 1rem; }
.st-modele__famille { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent-pale); color: var(--accent); font-family: var(--sans, inherit); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.st-modele__mise li.st-modele__anime { border-color: var(--accent); color: var(--accent); }
.st-vide { margin: 2rem 0 0; color: var(--encre-douce); }
.st-plus { display: flex; justify-content: center; margin: 2.2rem 0 0; }
@media (max-width: 700px) {
  .st-recherche { margin-left: 0; width: 100%; }
  .st-recherche input { width: 100%; }
}

/* Texte lu par les lecteurs d ecran seulement (27/09). */
.st-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }