/* Mon Site par Odratta (/site/mon-site-par-odratta/), page entière sur fond noir.
   Joseph, 11/11/2026 : « Ameliore un maximum cette page, fond noir », puis « Devellope cette page avec tout les
   avantages de l'offre et les exemples » (le détail de l'offre, les demandes, le prix). Chargée après p-accueil.css (héros .pac-ms-heros,
   bande des clients .pac-clients), seulement sur cette page : chaque règle part de .pac-page-mon-site ou d'une classe ms-.

   Le noir est celui de l'en-tête et des héros du studio (#0a0b0e). La page redéfinit les rôles que lisent les composants
   communs (titres, liens, filets, FAQ, cadres de capture, appel) : ils passent seuls en clair sur noir. Le pied commun est déjà noir (site.css).
   Contrastes sur #0a0b0e : blanc 19,7 ; #c4c5cd 11,4 ; #a3a4ae 7,9 ; #8dafff 9,1 ; #5ee0a8 12,1.
   Sur #111318 (la bande des étapes) : #c4c5cd 10,6 ; #8dafff 8,4.

   Ordre : 1. Rôles sur noir  2. Héros  3. Ce qui est compris  4. Vos modifications  5. Des sites construits
           6. Clients  7. Le prix  8. Étapes  9. Questions  10. Appel final */

/* ---------- 1. Rôles sur noir ---------- */
body.pac-page-mon-site { background: #0a0b0e; color-scheme: dark; scrollbar-color: #3a3c45 #0a0b0e; }
/* Le fond de html (blanc, site.css) se voyait au rebond du défilement sur iPhone, en haut et en bas de la page. */
html:has(body.pac-page-mon-site) { background: #0a0b0e; }
.pac-page-mon-site main {
  --papier: #0a0b0e;
  --encre: #fff;
  --ardoise: #c4c5cd;
  --ardoise-2: #a3a4ae;
  --gris-400: rgb(255 255 255 / 0.55);
  --filet: rgb(255 255 255 / 0.14);
  --filet-fort: rgb(255 255 255 / 0.36);
  --filet-encre: rgb(255 255 255 / 0.72);
  --trait: 1px solid rgb(255 255 255 / 0.72);
  --trait-fin: 1px solid rgb(255 255 255 / 0.14);
  --gris-fond: #111318;
  --surface: #15171c;
  --surface-2: #1b1d23;
  --survol: rgb(255 255 255 / 0.06);
  --bord-controle: rgb(255 255 255 / 0.42);
  --bleu-clair: #8dafff;
  --bord-bleu: rgb(141 175 255 / 0.5);
  --bleu-texte: #8dafff;
  --focus: #fff;
  --c-texte: #fff; --c-texte-2: #c4c5cd; --c-filet: rgb(255 255 255 / 0.14); --c-filet-fort: rgb(255 255 255 / 0.36);
  --c-trait: rgb(255 255 255 / 0.72); --c-accent: #8dafff; --c-fond: #0a0b0e;
  --texte-2: #c4c5cd; --texte-3: #a3a4ae; --fond-gris: #111318;
  --ombre-1: none;
  --ombre-2: 0 18px 40px -18px rgb(0 0 0 / 0.9);
  --ms-vert: #5ee0a8;
  color: var(--encre);
}
.pac-page-mon-site main :not(input, textarea)::selection { background: #fff; color: #0a0b0e; }
/* Le trait sous le mot de chaque titre : le bleu de la marque, éclairci pour se lire sur le noir. */
.pac-page-mon-site main .mark { text-decoration-color: #5b7cf0; }
.pac-page-mon-site main :where(p, li, dd, td, figcaption, span) > a:where(:not([class])):hover { color: #fff; }

/* ---------- 2. Héros ----------
   L'illustration se pose sur un filet, comme les dessins de l'Hébergement : il marque la fin du héros sur un fond
   qui continue noir. Sous les boutons, deux faits de l'offre, sans cadre. */
.pac-page-mon-site .pac-ms-heros { border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.ms-heros-prix { margin: 14px 0 0; font-size: var(--t-5); line-height: 1.5; color: #c4c5cd; }
.ms-heros-prix b { font-weight: 600; color: #fff; }
.ms-heros-faits { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 0; list-style: none; font-size: var(--t-6); color: #c4c5cd; }
.ms-heros-faits li { display: inline-flex; align-items: center; gap: 8px; }
.ms-heros-faits .ic { flex: none; width: 17px; height: 17px; color: #8dafff; }

/* ---------- 3. Ce qui est compris ----------
   Quatre lignes, comme un bon de commande : à gauche la partie de l'offre et sa phrase, à droite ce qu'elle contient,
   coché. Un filet clair ouvre la liste, un filet fin sépare les parties. Sur ordinateur, le nom de la partie reste à
   l'écran tant qu'on lit sa liste (la création en compte neuf lignes), comme la tête de la FAQ. */
.ms-quatre { margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.ms-part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); padding: clamp(28px, 3vw, 40px) 0; border-bottom: var(--trait-fin); }
.ms-part:last-child { padding-bottom: 0; border-bottom: 0; }
.ms-part-tete { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--haut-entete) + 32px); min-width: 0; }
.ms-part-tete h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); font-weight: 620; line-height: 1.12; letter-spacing: -0.022em; color: #fff; }
.ms-part-tete p { max-width: 34ch; margin: 10px 0 0; color: var(--ardoise); }
.ms-part-tete .lien-fort { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: var(--t-6); }
.ms-part-tete .lien-fort .ic { width: 16px; height: 16px; transition: transform 160ms var(--facile); }
.ms-part-tete .lien-fort:hover .ic { transform: translateX(3px); }
.ms-part-liste { grid-column: 7 / -1; display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.ms-part-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; color: #e4e5ea; line-height: 1.5; }
.ms-part-liste .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--ms-vert); }
.ms-part-liste a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.5); text-underline-offset: 0.2em; }
/* Ce qui n'est pas compris, dit aussi clairement : un cadre en pointillé, plus discret que les quatre parties. */
.ms-apart { margin-top: clamp(40px, 4vw, 56px); padding: clamp(24px, 3vw, 36px); border: 1px dashed rgb(255 255 255 / 0.26); border-radius: var(--r-bloc); }
.ms-apart h3 { margin: 0; font-size: var(--t-4); font-weight: 600; line-height: 1.3; color: #fff; }
.ms-apart ul { columns: 2; column-gap: var(--e-3); margin: 18px 0 0; padding: 0; list-style: none; }
.ms-apart li { position: relative; break-inside: avoid; padding: 0 0 10px 22px; line-height: 1.5; color: #e4e5ea; }
.ms-apart li::before { content: ""; position: absolute; top: 0.75em; left: 0; width: 10px; height: 1px; background: rgb(255 255 255 / 0.5); }
.ms-apart li a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.5); text-underline-offset: 0.2em; }
.ms-apart p { margin: 8px 0 0; font-size: var(--t-6); color: var(--ardoise-2); }
@media (max-width: 599px) { .ms-apart ul { columns: 1; } }
@media (max-width: 1023px) {
  .ms-part { display: block; }
  .ms-part-tete { position: static; }
  .ms-part-tete p { max-width: 52ch; }
  .ms-part-liste { margin-top: 22px; }
}

/* ---------- 4. Vos modifications ----------
   À gauche le principe et un avis réel ; à droite un fil de messages, comme sur WhatsApp : les demandes du client à
   droite, en bleu, les réponses d'Odratta à gauche. Aucun mouvement : c'est un exemple à lire, pas une démonstration.
   Le titre et le haut du fil partent de la même ligne. */
.ms-demandes { border-top: 1px solid rgb(255 255 255 / 0.1); }
.ms-demandes-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.ms-demandes-texte { grid-column: 1 / span 5; min-width: 0; }
.ms-demandes-texte > p { max-width: 46ch; margin: 18px 0 0; color: var(--ardoise); }
.ms-avis { margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 24px; border-top: var(--trait-fin); }
.ms-avis blockquote { margin: 0; }
.ms-avis blockquote p { margin: 0; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: #fff; }
.ms-avis figcaption { margin-top: 12px; font-size: var(--t-6); color: var(--ardoise-2); }
.ms-avis figcaption b { font-weight: 600; color: #fff; }
.ms-fil { grid-column: 7 / -1; justify-self: end; width: 100%; max-width: 540px; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 20px; background: #15171c; }
.ms-fil-tete { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 20px; border-bottom: 1px solid rgb(255 255 255 / 0.1); font-size: var(--t-6); font-weight: 600; color: #fff; }
.ms-fil-tete .ic { flex: none; width: 20px; height: 20px; color: var(--ms-vert); }
.ms-fil-liste { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 20px 26px; list-style: none; }
.ms-bulle { align-self: flex-end; max-width: 86%; padding: 10px 14px; border: 1px solid rgb(141 175 255 / 0.32); border-radius: 16px 16px 4px 16px; background: rgb(141 175 255 / 0.14); font-size: var(--t-6); line-height: 1.45; color: #fff; }
.ms-bulle-odratta { align-self: flex-start; border-color: rgb(255 255 255 / 0.1); border-radius: 16px 16px 16px 4px; background: #1b1d23; color: #e4e5ea; }
@media (max-width: 1023px) {
  .ms-demandes-grille { display: block; }
  .ms-fil { margin-top: 48px; }
}
@media (max-width: 599px) {
  .ms-fil-liste { padding: 18px 14px 22px; }
  .ms-bulle { max-width: 92%; }
}

/* ---------- 5. Des sites construits par Odratta ----------
   Un mur de captures, la première en grand : 7 + 5 colonnes, alignées par le haut, puis trois tiers. Chaque capture
   mène à la fiche du site ; au survol, le cadre s'éclaire et la flèche avance. Sous 700 px, les captures défilent de côté. */
.ms-sites { border-top: 1px solid rgb(255 255 255 / 0.1); }
.ms-mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) var(--e-3); margin: 0; padding: 0; list-style: none; }
.ms-mur > li { grid-column: span 4; min-width: 0; }
.ms-mur > .ms-mur-grand { grid-column: 1 / span 7; }
.ms-mur > .ms-mur-moyen { grid-column: 8 / -1; align-self: start; }
.ms-site { display: block; color: inherit; text-decoration: none; border-radius: var(--r-bloc); }
.ms-site .st-navigateur { background: #15171c; border-color: rgb(255 255 255 / 0.12); transition: border-color 180ms ease, transform 260ms var(--facile); }
.ms-site .st-navigateur-barre { background: #15171c; border-bottom-color: rgb(255 255 255 / 0.1); color: #a3a4ae; }
.ms-site .st-navigateur-vue { background: #15171c; }
.ms-site-nom { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; color: #fff; }
.ms-mur-grand .ms-site-nom { font-size: var(--t-3); }
.ms-site-fleche { flex: none; width: 18px; height: 18px; color: #8dafff; transition: transform 160ms var(--facile); }
.ms-site-meta { display: block; margin-top: 4px; font-size: var(--t-6); line-height: 1.45; color: var(--ardoise-2); }
/* Ce que montre le site, sous le lien pour que le nom du lien reste court. */
.ms-site-desc { max-width: 52ch; margin: 8px 0 0; font-size: var(--t-6); line-height: 1.55; color: var(--ardoise); }
@media (hover: hover) {
  .ms-site:hover .st-navigateur { border-color: rgb(255 255 255 / 0.4); transform: translateY(-3px); }
  .ms-site:hover .ms-site-fleche { transform: translateX(3px); }
}
.ms-site:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.ms-sites-suite { margin: clamp(36px, 4vw, 48px) 0 0; }
.ms-sites-suite .lien-fort { display: inline-flex; align-items: center; gap: 6px; }
.ms-sites-suite .lien-fort .ic { width: 18px; height: 18px; }
@media (max-width: 1023px) {
  .ms-mur > li, .ms-mur > .ms-mur-moyen { grid-column: span 6; align-self: start; }
  .ms-mur > .ms-mur-grand { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .ms-mur {
    display: flex; gap: 16px; margin-inline: calc(var(--marge) * -1); padding: 0 var(--marge) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
    scrollbar-width: thin; scrollbar-color: #3a3c45 transparent;
  }
  .ms-mur > li, .ms-mur > .ms-mur-grand, .ms-mur > .ms-mur-moyen { flex: 0 0 82%; scroll-snap-align: start; }
  .ms-mur-grand .ms-site-nom { font-size: var(--t-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-site .st-navigateur, .ms-site-fleche, .ms-part-tete .lien-fort .ic { transition: none; }
  .ms-site:hover .st-navigateur { transform: none; }
}

/* ---------- 6. Clients ----------
   La bande de l'accueil (p-accueil.css, déjà sur fond noir), ouverte ici par un filet. */
.ms-clients { padding-block: clamp(56px, 6vw, 80px); border-top: 1px solid rgb(255 255 255 / 0.1); }

/* ---------- 7. Le prix ----------
   À gauche ce qui fixe le montant et ce que paie l'abonnement (les quatre parties, chacune renvoyant à son détail),
   à droite la fiche du prix : le montant de départ en grand, puis quatre lignes comme sur un bon de commande, et le
   bouton blanc des héros. */
.ms-prix { border-top: 1px solid rgb(255 255 255 / 0.1); }
.ms-prix-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.ms-prix-texte { grid-column: 1 / span 5; min-width: 0; }
.ms-prix-texte p { max-width: 42ch; margin: 18px 0 0; color: var(--ardoise); }
.ms-prix-paie { max-width: 30rem; margin-top: clamp(28px, 3vw, 40px); padding-top: 22px; border-top: var(--trait-fin); }
.ms-prix-paie h3 { margin: 0; font-size: var(--t-6); font-weight: 600; line-height: 1.4; color: #fff; }
.ms-prix-paie ul { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.ms-prix-paie a { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 8px 0; line-height: 1.5; color: #e4e5ea; text-decoration: none; }
.ms-prix-paie .ic { width: 20px; height: 20px; margin-top: 2px; color: var(--ms-vert); }
.ms-prix-paie a span { text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.28); text-underline-offset: 0.22em; transition: text-decoration-color 150ms ease; }
.ms-prix-paie a:hover span { color: #fff; text-decoration-color: #fff; }
@media (prefers-reduced-motion: reduce) { .ms-prix-paie a span { transition: none; } }
.ms-tarif { grid-column: 7 / -1; min-width: 0; padding: clamp(28px, 3.4vw, 44px); border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--r-bloc); background: #15171c; }
.ms-tarif-montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: var(--t-5); color: var(--ardoise); }
.ms-tarif-montant b { font-family: var(--police-titre); font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.ms-tarif-ttc { margin: 10px 0 0; font-size: var(--t-6); color: var(--ardoise-2); }
.ms-tarif dl { margin: 28px 0 0; border-top: 1px solid rgb(255 255 255 / 0.14); }
.ms-tarif dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.ms-tarif dt { font-size: var(--t-6); line-height: 1.6; color: var(--ardoise-2); }
.ms-tarif dd { margin: 0; line-height: 1.5; color: #fff; }
.ms-tarif .btn { --fond: #fff; --texte: #0a0b0e; --fond-survol: #e8e8ee; --fond-appui: #d6d6de; width: 100%; justify-content: center; margin-top: 28px; border-color: #fff; }
.ms-tarif-note { margin: 14px 0 0; font-size: var(--t-6); color: var(--ardoise-2); }
@media (max-width: 1023px) {
  .ms-prix-grille { display: block; }
  .ms-tarif { max-width: 560px; margin-top: 36px; }
}
@media (max-width: 599px) {
  .ms-tarif dl > div { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 379px) {
  .ms-tarif dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- 8. Étapes ----------
   La seule bande d'un noir relevé (#111318) : quatre étapes sur une ligne, reliées par un filet ; le numéro en bleu. */
.ms-etapes { background: #111318; border-block: 1px solid rgb(255 255 255 / 0.1); }
.ms-etapes-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--e-3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ms-etapes-liste li { position: relative; min-width: 0; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 0.22); }
.ms-etapes-liste li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #8dafff; }
.ms-etape-num { display: block; margin-bottom: 14px; font-family: var(--police-titre); font-size: var(--t-2); font-weight: 560; line-height: 1; color: #8dafff; font-variant-numeric: tabular-nums; }
.ms-etapes-liste h3 { margin: 0 0 10px; font-size: var(--t-4); font-weight: 600; line-height: 1.3; color: #fff; }
.ms-etapes-liste p { margin: 0; font-size: var(--t-6); line-height: 1.55; color: var(--ardoise); }
@media (max-width: 1023px) { .ms-etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ms-etapes-liste { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ms-etape-num { display: inline; margin: 0 10px 0 0; font-size: var(--t-4); }
  .ms-etapes-liste h3 { display: inline; }
  .ms-etapes-liste p { margin-top: 8px; }
}

/* ---------- 9. Questions ----------
   La FAQ commune (§ faq de site.css) lit les rôles redéfinis plus haut ; seule la couleur au survol change. */
.pac-page-mon-site .faq-liste summary:hover, .pac-page-mon-site .faq-liste summary:hover .ic { color: #8dafff; }
.pac-page-mon-site .faq-liste details[open] summary .ic { color: #fff; }

/* ---------- 10. Appel final ----------
   La bande bleue de l'appel passe au noir, ouverte par un filet ; Odra s'y pose, pouce levé. Bouton blanc à texte
   noir, comme dans le héros. */
.pac-page-mon-site .ms-appel .appel {
  --focus: #fff;
  background: #0a0b0e; border-top: 1px solid rgb(255 255 255 / 0.16);
}
.pac-page-mon-site .ms-appel .appel p { color: #c4c5cd; }
.pac-page-mon-site .ms-appel .appel .btn { --texte: #0a0b0e; --fond-survol: #e8e8ee; --fond-appui: #d6d6de; }
.pac-page-mon-site .ms-appel .mark { text-decoration-color: #5b7cf0; }
.pac-page-mon-site .ms-appel .st-canaux a { color: #fff; }
.pac-page-mon-site .ms-appel .st-adresse { color: #a3a4ae; }