/* MyPC Particuliers — page Hébergement IA (11 novembre 2026, demande du propriétaire : « une version pour particuliers,
   avec les mêmes textes et arguments, aux couleurs des particuliers et plus orientée particuliers »).
   Reprise de site/professionnels/assets/hebergement.css (mêmes composants, mêmes jetons : tokens.css est identique dans
   les deux parties), posée sur style.css des particuliers, avec ce qui change :
   - le héros prend le bandeau photo sous voile des pages particuliers (.page-head) au lieu du fond marine plein ;
   - les offres ont le filet orange en haut des formules de la messagerie des particuliers (.formule-part) ;
   - section 8 : les composants du site pro dont la page a besoin et que style.css des particuliers n'a pas (étapes
     numérotées, bandeau final, bouton souple, lien externe, section serrée, liste de questions).
   1. (en-tête : celui des pages particuliers)  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)             8. Composants repris du site pro */

/* 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 -------------------------------------------------------------- */
/* Bandeau photo sous voile des pages particuliers (.page-head de style.css : photo, voile, couleur du texte) ; seule la
   hauteur change, pour loger la fenêtre de l'IA. */
.heb-hero { padding-block: var(--esp-6) var(--esp-8); }
.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; border-top: var(--trait-fort) solid var(--c-accent); }
.heb-offre--avant { border: var(--trait-moyen) solid var(--c-accent); border-top-width: var(--trait-fort); 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; }

/* --- 8. Composants repris du site pro (site/professionnels/assets/style.css, mêmes règles) --- */
.section--serree { padding-block: var(--esp-7); }
@media (min-width: 48em) { .section--serree { padding-block: var(--esp-8); } }
.btn--souple { padding-inline: var(--esp-5); white-space: normal; }
.actions .btn--souple { flex-shrink: 1; min-width: 0; }
.lien-externe .icon { display: inline-block; margin-inline-start: var(--esp-1); vertical-align: middle; }
.faq { display: grid; }

/* Comment ça marche : étapes numérotées (compteur CSS, liste ordonnée). */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: var(--esp-6); }
.etape { counter-increment: etape; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-2) var(--esp-4); align-items: start; align-content: start; }
.etape::before {
  content: counter(etape);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--rayon-pilule);
  background: var(--c-accent-pale);
  color: var(--c-marque);
  font-family: var(--police-titre);
  font-size: var(--fs-4);
  font-weight: var(--graisse-forte);
  line-height: var(--lh-serre);
}
.etape__titre { font-size: var(--fs-4); align-self: center; }
.etape p { color: var(--c-texte-2); }
@media (min-width: 48em) { .etapes { column-gap: var(--esp-7); } }
@container page (min-width: 64em) {
  .etapes { column-gap: var(--esp-6); }
  .etape { grid-template-columns: minmax(0, 1fr); }
  .etape::before { grid-row: auto; }
  .etape__titre { align-self: start; }
}

/* Bandeau final : marine, pastille d'icône, titre, phrase et boutons. */
.solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: start;
  padding: var(--esp-6) var(--esp-4);
  border-radius: var(--rayon-3);
  background: var(--c-marque);
  color: var(--c-texte-inverse);
}
.solution__icon {
  display: grid;
  place-items: center;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--rayon-2);
  background: var(--c-survol-inverse);
  color: var(--c-accent-survol);
}
.solution__titre { margin-top: var(--esp-2); color: var(--c-texte-inverse); font-size: var(--fs-5); line-height: var(--lh-serre); }
.solution__lead { max-width: var(--mesure); margin-top: var(--esp-3); color: var(--c-texte-inverse-2); }
@container page (min-width: 48em) {
  .solution { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-6); padding: var(--esp-7); }
  .solution__actions { grid-column: 2; }
  .solution__titre { font-size: var(--fs-6); }
  .solution__lead { font-size: var(--fs-3); }
}
@container page (min-width: 64em) {
  .solution { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .solution__actions { grid-column: auto; }
}

/* Cartes « Un site pour vous, si… » (.publics de style.css) : mêmes seuils que sur la page Messagerie, sur le conteneur
   de la page (ceux de style.css visent le conteneur « messagerie », propre à cette page-là). */
@container page (min-width: 40em) { .publics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (min-width: 75em) { .publics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Encadré « Vous avez un numéro SIRET ? » sous les conditions (11 novembre 2026) : accès immédiat par la boutique pro. */
.heb-pro { max-width: 52rem; margin: var(--esp-6) auto 0; }