/* MyPC Professionnels — page Hébergement Docker pour IA (1er novembre 2026 ; maquette dans maquettes/hebergement-docker/ ;
   revue du 2 novembre 2026 : en-tête pro commun, plus de formulaire).
   Composants propres à cette page, posés sur tokens.css et style.css du site pro (charte du site pro, décision du
   propriétaire du 1er novembre 2026) : aucune couleur nouvelle, seulement les jetons existants.
   1. (en-tête : celui du site pro)          5. Pourquoi MyPC, tarifs
   2. Héros et fenêtre de l’IA               6. FAQ
   3. Étapes, notice pour l’IA               7. Apparition au défilement
   4. Blocs de code (bouton Copier) */

/* Les ancres arrivent sous l'en-tête collant : marge de style.css (barre, plus les onglets dès 64em). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Code en ligne dans le texte. */
.heb-hero code,
.section code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 0.1em 0.55em;
  border-radius: var(--rayon-1);
  background: var(--c-surface-marque);
  color: var(--c-marque);
  overflow-wrap: anywhere;
}

/* --- 2. Héros -------------------------------------------------------------- */
.heb-hero {
  padding-block: var(--esp-6) var(--esp-8);
  background: var(--c-marque-fonce);
  color: var(--c-texte-inverse);
}
.heb-hero .breadcrumb { margin-bottom: var(--esp-5); }
.heb-hero__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-7); align-items: center; }
.heb-hero__surtitre { color: var(--c-texte-inverse-2); }
.heb-hero__titre {
  margin-top: var(--esp-2);
  color: var(--c-texte-inverse);
  font-size: var(--fs-6);
  line-height: var(--lh-serre);
  text-wrap: balance;
}
.heb-hero__titre code {
  padding: 0 0.2em;
  background: var(--c-survol-inverse);
  color: var(--c-accent-survol);
  font-size: 0.9em;
}
.heb-hero__accroche {
  margin-top: var(--esp-4);
  font-family: var(--police-titre);
  font-size: var(--fs-4);
  font-weight: var(--graisse-moyenne);
  line-height: var(--lh-titre);
}
.heb-hero__lead { max-width: var(--mesure); margin-top: var(--esp-3); color: var(--c-texte-inverse-2); }
.heb-hero__actions { margin-top: var(--esp-6); }
.heb-hero__atouts {
  display: grid;
  gap: var(--esp-2) var(--esp-5);
  margin: var(--esp-6) 0 0;
  padding: var(--esp-5) 0 0;
  border-top: var(--trait-fin) solid var(--c-separateur-inverse);
  list-style: none;
  color: var(--c-texte-inverse-2);
  font-size: var(--fs-1);
}
.heb-hero__atouts li { display: flex; gap: var(--esp-2); align-items: center; }
.heb-hero__atouts .icon { color: var(--c-accent-survol); }
@container page (min-width: 40em) { .heb-hero__atouts { grid-template-columns: repeat(2, minmax(0, max-content)); } }
@container page (min-width: 64em) {
  .heb-hero { padding-block: var(--esp-7) var(--esp-9); }
  .heb-hero__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--esp-8); }
  .heb-hero__titre { font-size: var(--fs-7); }
}

/* Terminal décoratif. */
.heb-terminal {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: var(--trait-fin) solid var(--c-separateur-inverse);
  border-radius: var(--rayon-3);
  background: #0e1230; /* plus sombre que --c-marque-fonce, pour détacher l'écran du héros */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.heb-terminal__barre { display: flex; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-bottom: var(--trait-fin) solid var(--c-separateur-inverse); }
.heb-terminal__barre span { width: 0.625rem; height: 0.625rem; border-radius: var(--rayon-pilule); background: var(--c-separateur-inverse); }
.heb-terminal__ecran {
  margin: 0;
  padding: var(--esp-5);
  color: var(--c-texte-inverse);
  /* Passe à la ligne sur écran étroit ou texte agrandi, plutôt que de défiler ; break-spaces : les espaces
     d'alignement passent à la ligne eux aussi, au lieu de dépasser du cadre. */
  white-space: break-spaces;
  overflow-wrap: anywhere;
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: var(--fs-1);
  line-height: 1.9;
}
.heb-terminal__invite { color: var(--c-accent-survol); }
.heb-terminal__etape { color: var(--c-texte-inverse-2); }
.heb-terminal__ok { color: #7ee2a8; } /* vert lisible sur l'écran sombre (contraste > 7:1) */
.heb-terminal__fin { color: #7ee2a8; font-weight: var(--graisse-forte); }
@container page (min-width: 48em) { .heb-terminal__ecran { font-size: var(--fs-2); } }

/* --- 3. Étapes, notice pour l'IA ------------------------------------------ */
@container page (min-width: 48em) { .heb-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 64em) { .heb-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* « Ce que vous faites vous-même », puis le texte à copier ; côte à côte dès 64em. minmax(0, …) : une longue ligne
   de la notice n'élargit jamais la colonne. */
.heb-notice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: start; }
@container page (min-width: 64em) { .heb-notice { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.heb-bloc,
.heb-code { min-width: 0; }
.heb-bloc > * + * { margin-top: var(--esp-4); }
.heb-bloc__titre { font-size: var(--fs-4); line-height: var(--lh-titre); }
.heb-bloc p,
.heb-bloc li { max-width: var(--mesure); }
.heb-liste { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
.heb-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
.heb-liste__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rayon-pilule);
  background: var(--c-accent-pale);
  color: var(--c-marque);
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
}
/* Le texte de la notice passe à la ligne : il se lit sans défiler en largeur (« Copier » garde ses lignes). Double
   classe : passe avant .heb-code pre code (section 4). */
.heb-code.heb-notice__texte pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Hauteur bornée : la page reste lisible sur téléphone ; la notice défile dans son cadre (atteignable au clavier :
   tabindex sur le <pre>), et « Copier » prend tout le texte. */
.heb-notice__texte pre { max-height: min(32rem, 70vh); overflow-y: auto; }
.heb-notice__texte pre:focus-visible { outline: var(--focus-largeur) solid var(--c-focus-inverse); outline-offset: calc(-1 * var(--focus-largeur)); }
/* Dès 64em, « Ce que vous faites vous-même » reste sous les yeux pendant la lecture de la notice. */
@container page (min-width: 64em) {
  .heb-notice > .heb-bloc { position: sticky; top: calc(var(--hauteur-entete) + var(--cible-tactile) + var(--esp-5)); }
}

.heb-encadre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--rayon-2);
  background: var(--c-surface-marque);
}
.heb-encadre .icon { margin-top: var(--esp-1); color: var(--c-marque); }
.heb-encadre strong { color: var(--c-marque); }
.heb-encadre p { max-width: var(--mesure); }
/* Encadré « Votre IA bloque ? » (demande du propriétaire du 2 novembre 2026 : plus visible, couleur et un peu plus
   grand). */
.heb-encadre--aide {
  border-inline-start: calc(var(--trait-moyen) * 2) solid var(--c-accent);
  background: var(--c-accent-pale);
  font-size: var(--fs-3);
}
.heb-encadre--aide .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; }

/* Téléchargement de la notice : texte (pour l'IA) et PDF (à lire). */
.heb-telecharger__titre { color: var(--c-marque); font-weight: var(--graisse-forte); }
.heb-telecharger__boutons { margin-top: var(--esp-2); }

/* --- 4. Blocs de commandes ------------------------------------------------ */
.heb-code { overflow: hidden; border-radius: var(--rayon-2); background: var(--c-marque-fonce); }
.heb-code + .heb-code { margin-top: var(--esp-3); }
.heb-code__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: var(--cible-tactile);
  padding: 0 var(--esp-2) 0 var(--esp-4);
  border-bottom: var(--trait-fin) solid var(--c-separateur-inverse);
}
.heb-code__label { color: var(--c-accent-survol); font-size: var(--fs-1); font-weight: var(--graisse-moyenne); }
.heb-code pre { margin: 0; padding: var(--esp-4); overflow-x: auto; }
.heb-code pre code {
  padding: 0;
  background: none;
  color: var(--c-texte-inverse);
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: var(--fs-1);
  line-height: var(--lh-texte);
  white-space: pre;
  overflow-wrap: normal;
}
@container page (min-width: 48em) { .heb-code pre code { font-size: var(--fs-2); } }
.heb-copier {
  display: inline-flex;
  gap: var(--esp-2);
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--esp-3);
  border: var(--trait-fin) solid var(--c-separateur-inverse);
  border-radius: var(--rayon-pilule);
  background: none;
  color: var(--c-texte-inverse);
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
}
.heb-copier:hover { background: var(--c-survol-inverse); }
.heb-copier:focus-visible { outline: var(--focus-largeur) solid var(--c-focus-inverse); outline-offset: var(--focus-decalage); }
.heb-copier.is-copie { border-color: #7ee2a8; color: #7ee2a8; }

/* --- 5. Pourquoi MyPC, tarifs --------------------------------------------- */
.heb-atouts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
@container page (min-width: 40em) { .heb-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 64em) { .heb-atouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.heb-atout__tete { display: flex; gap: var(--esp-3); align-items: center; }
.heb-atout__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--rayon-2);
  background: var(--c-accent-pale);
  color: var(--c-marque);
}
.heb-atout__titre { min-width: 0; font-size: var(--fs-3); line-height: var(--lh-titre); overflow-wrap: break-word; }
.heb-atout p { margin-top: var(--esp-3); color: var(--c-texte-2); }
.heb-atout--fort { border: var(--trait-moyen) solid var(--c-accent); box-shadow: var(--ombre-2); }
.heb-atout--fort .heb-atout__icone { background: var(--c-accent); color: var(--c-sur-accent); }
.heb-atout--fort p { color: var(--c-texte); }
.heb-atout .heb-atout__badge {
  justify-self: start;
  width: fit-content;
  margin-top: var(--esp-3);
  padding: 0.25rem var(--esp-3);
  border-radius: var(--rayon-pilule);
  background: var(--c-accent-pale);
  color: var(--c-marque);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
}

.heb-machine {
  display: flex;
  gap: var(--esp-3);
  align-items: center;
  margin-bottom: var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--rayon-3);
  background: var(--c-surface-marque);
  color: var(--c-marque);
}
.heb-offres { display: grid; gap: var(--esp-5); }
@container page (min-width: 48em) { .heb-offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.heb-offre { position: relative; display: flex; flex-direction: column; }
.heb-offre--avant { border: var(--trait-moyen) solid var(--c-accent); box-shadow: var(--ombre-2); }
.heb-offre__badge {
  position: absolute;
  top: 0;
  right: var(--esp-5);
  transform: translateY(-50%);
  padding: 0.375rem var(--esp-3);
  border-radius: var(--rayon-pilule);
  background: var(--c-accent);
  color: var(--c-sur-accent);
  font-size: var(--fs-1);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
}
.heb-offre__nom { font-size: var(--fs-5); }
.heb-offre__pour { margin-top: var(--esp-1); color: var(--c-texte-2); }
.heb-offre__prix {
  margin-top: var(--esp-4);
  color: var(--c-marque);
  font-family: var(--police-titre);
  font-size: var(--fs-7);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-serre);
  font-variant-numeric: tabular-nums;
}
.heb-offre__prix small { font-size: var(--fs-4); }
.heb-offre__unite { color: var(--c-texte-2); }
.heb-offre__aide { margin-top: var(--esp-5); padding: var(--esp-4); border-radius: var(--rayon-2); background: var(--c-surface); }
.heb-offre__aide-titre { color: var(--c-marque); font-weight: var(--graisse-forte); }
.heb-offre__aide ul { display: grid; gap: var(--esp-2); margin: var(--esp-2) 0 0; padding-left: var(--esp-5); font-size: var(--fs-1); }
.heb-offre__bouton { margin-top: auto; align-self: stretch; justify-content: center; }
.heb-offre > .coches,
.heb-offre__aide { margin-bottom: var(--esp-6); }
.heb-conditions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2) var(--esp-5);
  margin: var(--esp-6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-texte-2);
  font-size: var(--fs-1);
  text-align: center;
}
.heb-conditions li:first-child { color: var(--c-marque); font-weight: var(--graisse-forte); }

/* --- 6. FAQ ---------------------------------------------------------------- */
.heb-faq { max-width: calc(52rem + 2 * var(--gouttiere-large)); }
.heb-final .solution__titre { margin-top: 0; }
.heb-faq .faq__reponse p { max-width: var(--mesure); }
/* FAQ par thèmes en cartes (demande du propriétaire du 2 novembre 2026, sur le modèle de la FAQ du portail Ntcloud) :
   intertitre et phrase d'introduction par groupe ; chaque question dans sa carte (fond de la section inchangé), un
   simple « + » à droite (× une fois ouverte), contour orange quand elle est ouverte. */
.heb-faq__groupe { margin: var(--esp-7) 0 0; color: var(--c-marque); font-size: var(--fs-4); }
.heb-faq .section-head + .heb-faq__groupe { margin-top: 0; }
.heb-faq__intro { margin: var(--esp-1) 0 var(--esp-4); color: var(--c-texte-2); font-size: var(--fs-1); }
.heb-faq .faq { gap: var(--esp-3); }
.heb-faq .faq__item {
  border: var(--trait-fin) solid var(--c-bordure);
  border-radius: var(--rayon-3);
  background: var(--c-fond);
  box-shadow: var(--ombre-1);
}
.heb-faq .faq__item[open] { border-color: var(--c-accent); }
.heb-faq .faq__item > summary { padding: var(--esp-4); border-radius: var(--rayon-3); }
.heb-faq .faq__reponse { padding: 0 var(--esp-4) var(--esp-4); font-size: var(--fs-2); }
.heb-faq .faq__rond,
.heb-faq .faq__item[open] > summary .faq__rond { border: 0; background: none; color: var(--c-marque); }
@container page (min-width: 40em) {
  .heb-faq .faq__item > summary { padding-inline: var(--esp-5); }
  .heb-faq .faq__reponse { padding-inline: var(--esp-5); }
}

/* --- 7. Apparition au défilement (hebergement.js, seulement sans « réduire les animations ») --- */
.heb-apparait { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--courbe), transform 400ms var(--courbe); }
.heb-apparait.is-visible { opacity: 1; transform: none; }