/* /site/ : site vitrine et site corporate (reprise de odratta.com/site/, 09/11/2026).
   Classes propres : psi-. Le reste vient de site.css (héros noir, FAQ, appel) et de studio.css
   (navigateur, bandes de sites, étapes, avis). Tout mouvement s'arrête sous prefers-reduced-motion. */

/* ---------- Fond noir ----------
   Joseph, 11/11/2026 : « je veux que tu améliores cette page et que tu mettes le fond noir ». Toute la page passe sur
   le noir de l'en-tête (#0a0b0e), avec les mêmes valeurs que /studio/, passée en noir le même jour (studio.css § 20) :
   les deux pages du Studio se suivent sans écart de teinte. Bandes grises en #121319, cartes et champs en #15151d,
   bleu ciel (#8dafff) pour les icônes, les liens survolés et les soulignements, focus blanc comme l'en-tête et le pied.
   Le pied commun est déjà noir sur tout le site (site.css §3.21) et garde ses propres couleurs.
   Les jetons sont redéfinis sur la racine même, là où site.css les déclare : les jetons qui en dérivent (--c-texte,
   --trait, --secondaire-texte…) suivent sans être recopiés. L'en-tête, le héros et l'appel final ont leurs propres
   couleurs. Le reste du site reste en blanc (Joseph, 08/11/2026).
   Contrastes sur #0a0b0e : texte 18,1:1, texte secondaire 11,4:1, légendes 7,1:1, bleu ciel 9,1:1, petit texte bleu
   11,8:1 ; sur les cartes #15151d : texte secondaire 10,6:1 ; blanc sur le bleu du bouton 5,8:1 (5,0:1 au survol).
   Le bleu #2e57e7 ne sert jamais de couleur de texte sur le noir (3,4:1) : il garde les aplats, les boutons et les
   pastilles numérotées. */
:root:has(> body.page-site) {
  color-scheme: dark;
  --papier: #0a0b0e;
  --encre: #f4f5f8;
  --ardoise: #c4c5cd;
  --ardoise-2: #9a9aa3;
  --filet: rgb(255 255 255 / 0.13);
  --filet-fort: rgb(255 255 255 / 0.3);
  --filet-encre: rgb(255 255 255 / 0.55);
  --gris-fond: #121319;
  --surface: #15151d;
  --surface-2: #1d1d27;
  --survol: rgb(255 255 255 / 0.07);
  --bord-controle: rgb(255 255 255 / 0.5);
  --bleu-survol: #3a62ee;       /* plus clair au survol, sur le noir ; blanc dessus 5,0:1 */
  --bleu-appui: #2549c9;
  --bleu-clair: #8dafff;
  --calque: rgb(46 87 231 / 0.2);
  --calque-2: rgb(46 87 231 / 0.3);
  --bord-bleu: rgb(141 175 255 / 0.5);
  --bleu-texte: #b3c8ff;
  --bord-champ-sombre: #767a86;
  --focus: #fff;
  --gris-300: #3f434e;          /* barres de défilement internes */
  --gris-400: #6e717c;          /* lettres sans site de l'index A à Z */
  --toast-fond: var(--surface-2);
  --toast-texte: var(--encre);
  --ombre-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --ombre-2: 0 12px 32px -12px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --ombre-3: 0 24px 64px -24px rgb(0 0 0 / 0.85);
  --ombre-douce: 0 1px 2px rgb(0 0 0 / 0.4), 0 22px 44px -26px rgb(0 0 0 / 0.8);
  scrollbar-color: var(--filet-fort) var(--papier);
}
/* L'en-tête est déjà noir et lit ses propres couleurs (--e-*) ; seuls ses boutons du socle (Contact en blanc,
   Odramail en contour) lisent --encre et --blanc : l'en-tête garde l'encre claire du reste du site pour eux. --blanc et
   l'échelle des gris du socle ne sont pas redéfinis ici pour la même raison. */
.page-site .entete { --encre: #121a33; }
/* Le soulignement des mots marqués passe au bleu ciel : le bleu de la marque s'éteint sur le noir. */
.page-site main .mark { text-decoration-color: var(--bleu-clair); }
.page-site :is(.heros-produit, .appel, .st-offre) .mark { text-decoration-color: rgb(255 255 255 / 0.85); }
@media print {
  :root:has(> body.page-site) { color-scheme: light; --papier: #fff; --encre: #111; --ardoise: #333; --ardoise-2: #555; --gris-fond: #fff; --surface: #fff; --filet: #ddd; --filet-fort: #bbb; --filet-encre: #111; --bleu-clair: #1835b3; --bleu-texte: #1835b3; --calque: #fff; }
}

.psi-titre { max-width: 30ch; margin-bottom: 48px; }
@media (max-width: 1023px) { .psi-titre { margin-bottom: 36px; } }

/* ---------- Héros ----------
   Le texte à gauche ; à droite, l'illustration des sites (.heros-illustration, site.css §3.5 ; Joseph, 11/11/2026 :
   « pas les mêmes illustrations, même style mais adapté ») : le plan coté Odratta posé sur le filet bas du héros et
   sa maquette au trait, le site fini à son adresse avec sa carte et sa zone d'intervention, deux pastilles tirées de
   la page. Sous 900 px, l'illustration passe sous le texte. */
.psi-heros { padding-bottom: 0; }
.psi-heros-grille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 80px); align-items: end; }
.psi-heros-texte { align-self: start; min-width: 0; padding-bottom: clamp(56px, 6vw, 88px); }
.psi-heros h1 { max-width: 14ch; font-size: var(--t-0); }
.psi-faits { display: grid; gap: 10px; margin: 32px 0 0; padding: 20px 0 0; list-style: none; border-top: var(--trait-fin); font-size: var(--t-6); font-weight: 500; line-height: 1.4; }
.psi-faits li { display: flex; align-items: flex-start; gap: 10px; }
.psi-faits .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.psi-faits-puce { font-weight: 600; }
.psi-externe .ic { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -1px; }
@media (max-width: 899px) {
  .psi-heros-grille { grid-template-columns: minmax(0, 1fr); }
  .psi-heros-texte { padding-bottom: 40px; }
}

/* ---------- Sites en ligne et index A à Z ---------- */
.psi-sites .psi-titre { margin-bottom: 24px; }
.psi-sites .st-sites { margin-top: 40px; }
/* Les deux rangées de sites s'effacent aux bords de l'écran au lieu d'y être coupées net (12/11/2026). */
.psi-sites .st-sites .st-defile {
  --psi-fondu: clamp(24px, 6vw, 96px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--psi-fondu), #000 calc(100% - var(--psi-fondu)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--psi-fondu), #000 calc(100% - var(--psi-fondu)), transparent);
}
.psi-az > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--bord-controle); border-radius: var(--r-bouton); background: var(--surface); font-weight: 600; cursor: pointer; list-style: none; transition: background-color 150ms ease, border-color 150ms ease; }
.psi-az > summary::-webkit-details-marker { display: none; }
.psi-az > summary:hover { background: var(--survol); border-color: var(--encre); }
.psi-az > summary .ic { width: 18px; height: 18px; }
.psi-az-plus { margin-left: 4px; color: var(--ardoise); transition: transform 220ms var(--facile); }
.psi-az[open] .psi-az-plus { transform: rotate(45deg); }
.psi-az-panneau { margin-top: 20px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--filet); border-radius: var(--r-bloc); background: var(--surface); box-shadow: var(--ombre-1); }
.psi-az-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.psi-az-haut h3 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); letter-spacing: -0.02em; }
.psi-az-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.psi-az-recherche { position: relative; }
.psi-az-recherche[hidden] { display: none; }
.psi-az-recherche .ic { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--ardoise); transform: translateY(-50%); pointer-events: none; }
.psi-az-recherche input { width: min(320px, 72vw); min-height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--bord-controle); border-radius: var(--r-bouton); background: var(--surface); color: var(--encre); font: inherit; font-size: var(--t-5); }
.psi-az-recherche input::placeholder { color: var(--ardoise-2); }
.psi-az-fermer { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-bouton); background: transparent; color: var(--ardoise); font: inherit; font-size: var(--t-6); font-weight: 600; cursor: pointer; }
.psi-az-fermer[hidden] { display: none; }
.psi-az-fermer:hover { background: var(--survol); color: var(--encre); }
.psi-az-fermer .ic { width: 18px; height: 18px; }
.psi-az-regle { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 20px; padding: 10px 0; border-block: 1px solid var(--filet); }
.psi-az-regle a, .psi-az-regle span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-petit); font-size: var(--t-6); font-weight: 600; text-decoration: none; }
.psi-az-regle a { color: var(--encre); }
.psi-az-regle a:hover { background: var(--calque); color: var(--bleu-texte); }
.psi-az-regle a[aria-disabled="true"] { color: var(--gris-400); pointer-events: none; }
.psi-az-regle span { color: var(--gris-400); }
.psi-az-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 8px; }
.psi-az-liste { max-height: min(640px, 70vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.psi-az-groupe { scroll-margin-top: 8px; }
.psi-az-groupe[hidden] { display: none; }
.psi-az-groupe h4 { position: sticky; top: 0; z-index: 1; padding: 14px 0 6px; background: var(--surface); font-size: var(--t-3); color: var(--bleu-texte); }
.psi-az-groupe ul { margin: 0; padding: 0; list-style: none; }
.psi-az-groupe li[hidden] { display: none; }
.psi-az-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--filet); color: var(--encre); text-decoration: none; }
.psi-az-nom { font-weight: 600; }
.psi-az-meta { grid-column: 1; font-size: var(--t-6); color: var(--ardoise); }
.psi-az-ville::before { content: " · "; }
.psi-az-dom { grid-column: 1; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--ardoise-2); }
.psi-az-fleche { grid-column: 2; grid-row: 1 / span 3; width: 18px; height: 18px; color: var(--ardoise); transition: transform 160ms var(--facile), color 150ms ease; }
.psi-az-item:hover .psi-az-nom, .psi-az-item:focus-visible .psi-az-nom { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 3px; }
.psi-az-item:hover .psi-az-fleche { color: var(--bleu-clair); transform: translateX(3px); }
.psi-az-vide { padding: 24px 0; }
.psi-az-vide[hidden] { display: none; }
.psi-az-vide p { margin: 0; color: var(--ardoise); }
.psi-az-revoir { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--bleu-texte); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.psi-az-apercu { display: none; }
@media (min-width: 1100px) {
  .psi-az-corps { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .psi-az-item { grid-template-columns: minmax(0, 13fr) minmax(0, 7fr) auto; }
  .psi-az-meta { grid-column: 1; }
  .psi-az-dom { grid-column: 2; grid-row: 1 / span 2; }
  .psi-az-fleche { grid-column: 3; grid-row: 1 / span 2; }
  .psi-az-apercu:not([hidden]) { display: block; align-self: start; padding-top: 14px; }
}
.psi-az-apercu-nom { margin: 16px 0 2px; font-family: var(--police-titre); font-size: var(--t-3); font-weight: 600; color: var(--encre); }
.psi-az-apercu-meta { margin: 0; font-size: var(--t-6); color: var(--ardoise); }

/* ---------- Site vitrine, site corporate ---------- */
.psi-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px); }
.psi-type h3 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); letter-spacing: -0.02em; }
.psi-type-pour { max-width: 48ch; margin: 12px 0 0; font-size: var(--t-5); color: var(--ardoise); }
.psi-type-porte { margin: 24px 0 0; padding: 0; list-style: none; border-top: var(--trait); }
.psi-type-porte li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: var(--trait-fin); font-weight: 500; }
.psi-type-porte .ic { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--bleu-clair); }
.psi-exemple { margin: 32px 0 0; }
.psi-exemple figcaption { display: grid; gap: 4px; margin-top: 16px; font-size: var(--t-6); line-height: 1.5; color: var(--ardoise); }
.psi-exemple figcaption > a { justify-self: start; font-family: var(--police-titre); font-size: var(--t-4); font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 4px; }
.psi-exemple figcaption > a:hover { color: var(--bleu-texte); text-decoration-color: currentColor; }
.psi-exemple-meta { font-weight: 500; color: var(--encre); }
.psi-aussi { margin: 24px 0 0; padding: 0; list-style: none; }
.psi-aussi li { padding: 12px 0 12px 16px; border-left: 2px solid var(--filet-fort); font-size: var(--t-6); line-height: 1.5; color: var(--ardoise); }
.psi-aussi li + li { margin-top: 8px; }
.psi-aussi a { font-weight: 600; color: var(--encre); text-underline-offset: 3px; }
.psi-aussi a:hover { color: var(--bleu-texte); }
@media (max-width: 899px) { .psi-types { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Mon Site par Odratta ----------
   Sur la page noire, le bandeau noir de studio.css se confondrait avec le fond : l'offre devient une carte Marine
   (--nuit, le rôle que site.css donne déjà à « la carte Mon Site »), dans la largeur du contenu. Blanc 18:1 et texte
   secondaire 10,2:1 sur la Marine. */
.page-site .st-offre { padding: var(--e-section) 0 0; background: none; }
.page-site .st-offre-grille { padding: clamp(28px, 5vw, 72px); border: 1px solid var(--nuit-filet); border-radius: var(--r-bloc); background: var(--nuit); }
.page-site :is(.st-offre-chapo, .st-offre-compris dd) { color: var(--nuit-texte); }
.page-site .st-offre-compris, .page-site .st-offre-compris > div { border-color: var(--nuit-filet); }
@media (max-width: 599px) { .page-site .st-offre-grille { padding: 28px 22px; } }

/* ---------- Quelques sites, vus de près ---------- */
.psi-reals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px var(--e-3); }
.psi-real { min-width: 0; }
.psi-real h3 { margin-top: 20px; font-size: var(--t-3); }
.psi-real h3 a { color: var(--encre); text-decoration: none; }
.psi-real h3 a:hover { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 4px; }
.psi-real-meta { margin: 6px 0 0; font-size: var(--t-6); font-weight: 500; color: var(--ardoise); }
.psi-real-fait { max-width: 52ch; margin: 10px 0 0; }
.psi-real .st-lien-externe { margin-top: 4px; }
.psi-glisser { display: none; }
@media (max-width: 899px) {
  .psi-reals { display: flex; gap: 16px; margin-inline: calc(-1 * var(--marge)); padding: 4px var(--marge) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
  .psi-reals::-webkit-scrollbar { display: none; }
  .psi-real { flex: 0 0 min(84%, 420px); scroll-snap-align: start; }
  .psi-glisser { display: block; margin: 16px 0 0; font-size: var(--t-6); color: var(--ardoise); }
}

/* ---------- Avis ---------- */
.psi-avis figure { background: var(--surface); }

/* ---------- Ce qu'on règle, page par page ---------- */
.psi-travail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.psi-travail-figure { position: sticky; top: calc(var(--haut-entete) + 24px); margin: 0; }
.psi-travail-figure figcaption { margin-top: 16px; font-size: var(--t-6); line-height: 1.5; color: var(--ardoise); }
.psi-travail-figure figcaption a { color: var(--encre); font-weight: 600; text-underline-offset: 3px; }
.psi-travail-figure figcaption .psi-externe { font-weight: 500; white-space: nowrap; }
.psi-calque { position: absolute; inset: 0; }
.psi-zone { position: absolute; border: 2px solid var(--bleu); border-radius: var(--r-petit); background: rgb(46 87 231 / 0.07); }
.psi-repere { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.psi-points { margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.psi-points li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0; border-bottom: var(--trait-fin); }
.psi-points li > * { grid-column: 2; }
.psi-points-num { grid-column: 1 !important; grid-row: 1 / span 3; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.psi-points li:nth-child(5) .psi-points-num, .psi-points li:nth-child(6) .psi-points-num { background: transparent; border: 1px solid var(--filet-fort); color: var(--ardoise); }
.psi-points h3 { font-size: var(--t-5); line-height: 1.4; }
/* 12/11/2026 : plus de pastille colorée (badge décoratif) ; la précision se lit comme une note, sous le titre. */
.psi-hors { justify-self: start; margin-top: 2px; font-size: var(--t-6); font-style: italic; line-height: 1.4; color: var(--ardoise-2); }
.psi-points p { margin: 4px 0 0; font-size: var(--t-6); line-height: 1.55; color: var(--ardoise); }
@media (max-width: 1023px) {
  .psi-travail { grid-template-columns: minmax(0, 1fr); }
  .psi-travail-figure { position: static; }
}

/* ---------- Étapes ---------- */
.psi-etapes { --c-fond: var(--gris-fond); }
/* « Vous validez » : la coche et le mot en bleu clair, sans pastille (12/11/2026). */
.st-etapes .psi-valide { display: inline-flex; align-items: center; justify-self: start; gap: 6px; margin-top: 8px; font-size: var(--t-6); font-weight: 600; color: var(--bleu-texte); }
.psi-valide .ic { width: 14px; height: 14px; }

/* ---------- Ce qui est compris ---------- */
.psi-compris { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-3); margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.psi-compris li { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: var(--trait-fin); font-weight: 500; line-height: 1.45; }
.psi-compris .ic { flex: none; width: 22px; height: 22px; color: var(--bleu-clair); }
.psi-a-part { max-width: 34em; margin: 32px 0 0; color: var(--ardoise); }
.psi-a-part b { color: var(--encre); font-weight: 600; }
/* Les deux temps de la facture (11/11/2026) : sur le noir, l'aplat bleu laisse place à une carte sombre (#15151d), pour que
   l'appel final reste le seul grand aplat bleu de la page. Les deux frais se lisent côte à côte, reliés par un filet
   qui porte « puis » ; sous 900 px, l'un sous l'autre, le filet devient horizontal. */
.psi-facture { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; margin-top: 48px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--filet-fort); border-radius: var(--r-bloc); background: var(--surface); color: var(--encre); }
.psi-facture h3 { font-size: var(--t-3); color: var(--encre); }
.psi-facture p { max-width: 46ch; margin: 10px 0 0; color: var(--ardoise); }
.psi-facture .psi-facture-puis { align-self: stretch; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: 10px; max-width: none; margin: 0; font-size: var(--t-6); font-weight: 600; color: var(--bleu-texte); }
.psi-facture-puis::before, .psi-facture-puis::after { content: ''; width: 1px; background: var(--filet-fort); }
.psi-facture-pied { margin: 16px 0 0; font-size: var(--t-6); color: var(--ardoise); }
@media (max-width: 899px) {
  .psi-compris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psi-facture { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .psi-facture .psi-facture-puis { grid-template-rows: none; grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; gap: 12px; }
  .psi-facture-puis::before { width: 24px; height: 1px; }
  .psi-facture-puis::after { width: 100%; height: 1px; }
}
@media (max-width: 599px) { .psi-compris { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ensuite ---------- */
.psi-apres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: start; }
.psi-apres > h2 { grid-column: 1 / span 5; position: sticky; top: calc(var(--haut-entete) + 32px); }
.psi-apres > ul { grid-column: 7 / -1; margin: 0; padding: 0; list-style: none; border-top: var(--trait); }
.psi-apres li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: var(--trait-fin); }
.psi-apres li > .ic { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--bleu-clair); }
.psi-apres h3 { font-size: var(--t-4); }
.psi-apres p { max-width: 56ch; margin: 6px 0 0; color: var(--ardoise); }
@media (max-width: 1023px) {
  .psi-apres > h2, .psi-apres > ul { grid-column: 1 / -1; }
  .psi-apres > h2 { position: static; margin-bottom: 36px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .psi-az > summary, .psi-az-plus, .psi-az-fleche { transition: none; }
  .psi-az-item:hover .psi-az-fleche { transform: none; }
  .psi-reals { scroll-snap-type: none; }
}