/* rodriguepoclet.fr — pages piliers /developpement et /hebergement (docs/maquettes/piliers/).
   Point de rupture unique à 900 px ; entre 900 et 1 440 px, titres en clamp() et grilles en auto-fill. */

/* ---------- commun ---------- */
.section--nuit { background: var(--nuit); color: var(--sur-nuit); }
.section--nuit .surtitre { color: var(--orange-clair); }
.section--nuit .section__chapo { color: var(--sur-nuit-doux); }
.section--nuit :focus-visible, .appel-pilier__bloc :focus-visible { outline-color: var(--orange); }
.section--blanche .carte-contenu { background: var(--fond); }
.c-mot { color: #8FC7FF; }

/* En-têtes de section : sur les maquettes, l'écart avec le contenu, l'écart entre surtitre et titre et la largeur
   du titre et du chapô changent d'une section à l'autre. Chaque section les règle par ces variables.
   Sous 1 200 px, le chapô ne prend pas plus de 40 % de la ligne : le titre garde ses deux lignes. */
.section__titres { gap: var(--tete-titres, 12px); }
.section__titres, .section__titre { max-width: var(--tete-titre, 760px); }
.prestations, .performance, .socle { --tete-titre: 700px; --tete-chapo: 440px; }
.infrastructure { --tete-titres: 18px; }
.preuve { --tete-titres: 18px; --tete-titre: 720px; --tete-chapo: 380px; }
.performance, .socle, .tableau, .tarifs-orbit, .demarrer { --tete-titres: 14px; }
.tableau, .tarifs-orbit, .demarrer { --tete-titre: none; }
.tarifs-orbit { --tete-chapo: 460px; }
.section__tete > .lien-souligne, .faq__tete .lien-souligne { font-size: 16px; }

@media (min-width: 900px) {
  .section__titre { font-size: clamp(40px, 3.6vw, 52px); }
  .section__tete { margin-bottom: var(--tete-ecart, 44px); }
  .section__chapo { max-width: min(var(--tete-chapo, 400px), 40%); }
  .prestations, .preuve, .performance, .infrastructure { --tete-ecart: 56px; }
  .tableau, .tarifs-orbit, .demarrer { --tete-ecart: 48px; }
  .socle { --tete-ecart: 40px; }
}

/* ---------- héros ---------- */
.heros-pilier { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; padding: 64px var(--marge) 112px; }
.heros-pilier__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.heros-pilier__titre { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -0.03em; }
.heros-pilier__intro { color: var(--encre-douce); font-size: 21px; line-height: 1.55; }
.heros-pilier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.heros-pilier__actions .lien-souligne { font-size: 17px; }
.heros-pilier__preuve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--gris); font-size: 15px; }
.heros-pilier__preuve strong { color: var(--encre); }
/* Un fait du bandeau ne se coupe pas : sous 900 px, la ligne passe à la suivante entre deux faits. */
.heros-pilier__fait { white-space: nowrap; }
.heros-pilier__preuve .etoiles { color: var(--orange); }

/* Visuel du développement : un éditeur de code (décoratif) et deux pastilles. */
.heros-pilier__visuel { position: relative; padding: 24px 0 40px; }
.editeur { overflow: hidden; border-radius: 20px; background: var(--nuit); color: var(--sur-nuit-doux); font: clamp(11.5px, .94vw, 13.5px)/1.8 var(--police-code); box-shadow: 0 32px 64px rgba(20, 27, 45, .22); }
.editeur__barre { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid rgba(244, 245, 248, .08); color: #8A93A5; font-size: 12px; }
.editeur__point { width: 10px; height: 10px; border-radius: 50%; background: #3A4256; }
.editeur__onglet { padding: 4px 10px; }
.editeur__onglet--actif { margin-left: 12px; border-radius: 6px; background: rgba(244, 245, 248, .06); color: var(--sur-nuit); }
.editeur__code { margin: 0; padding: 20px 24px 28px; overflow: hidden; font: inherit; white-space: pre; }
/* Sous 900 px, l'éditeur ne garde que la méthode du hook, sans retrait, comme la maquette mobile (décision du 30/09). */
.editeur__seulement-mobile { display: none; }
.badge-flottant { position: absolute; display: flex; align-items: center; border-radius: 999px; font-weight: 600; }
.badge-flottant--copie { left: -28px; bottom: 0; gap: 12px; padding: 14px 20px; background: var(--blanc); color: var(--encre); font-size: 15px; box-shadow: 0 16px 36px rgba(20, 27, 45, .16); }
.badge-flottant__icone { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFF1E0; color: var(--orange-texte); }
.badge-flottant--reponse { right: -16px; top: 0; padding: 10px 16px; background: var(--orange); color: var(--nuit); font-size: 14px; box-shadow: 0 12px 28px rgba(245, 146, 29, .3); }

/* ---------- services (développement) ---------- */
.services-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.service { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 24px; background: var(--fond); transition: transform .4s var(--courbe), box-shadow .4s; }
.service__icone { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--blanc); color: var(--orange-texte); }
.service__titre { font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.service__declencheur { color: var(--encre-douce); font-size: 17px; font-weight: 600; line-height: 1.5; }
.service__texte { color: var(--gris); font-size: 16px; }
.service__texte a { font-weight: 600; }
.service__preuve { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--trait-doux); }
.service__preuve-label { color: var(--orange-texte); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.service__preuve-texte { color: var(--encre-douce); font-size: 15px; line-height: 1.5; }
.service__bouton { align-self: flex-start; min-height: 48px; padding: 0 22px; }

/* ---------- pourquoi moi (développement) ---------- */
.pourquoi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.pourquoi__tete { display: flex; flex-direction: column; gap: 28px; }
.signature { display: flex; align-items: center; gap: 16px; color: var(--sur-nuit-doux); font-size: 16px; line-height: 1.5; }
.signature strong { color: var(--sur-nuit); }
.signature__photo { width: 64px; height: 64px; flex-shrink: 0; border: 2px solid var(--orange); border-radius: 50%; object-fit: cover; }
.pourquoi__points { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 40px 48px; list-style: none; }
.pourquoi__point { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(244, 245, 248, .14); }
.pourquoi__numero { color: var(--orange-clair); font: 700 18px/1 var(--police-titre); }
.pourquoi__titre { font-size: 24px; line-height: 1.2; }
.pourquoi__texte { color: var(--sur-nuit-doux); font-size: 16px; }

/* ---------- méthode (développement) ---------- */
.methode__titre { margin-bottom: 56px; }
.methode { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; }
.methode__etape { display: flex; flex-direction: column; gap: 14px; }
.methode__repere { display: flex; align-items: center; gap: 12px; }
.methode__repere::after { content: ''; flex-grow: 1; height: 2px; background: var(--trait-doux); }
.methode__etape:last-child .methode__repere::after { display: none; }
.methode__numero { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--orange); border-radius: 50%; background: var(--blanc); color: var(--orange-texte); font: 700 17px/1 var(--police-titre); }
.methode__etape:last-child .methode__numero { background: var(--orange); color: var(--nuit); }
.methode__corps { display: flex; flex-direction: column; gap: 14px; }
.methode__nom { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; letter-spacing: -0.01em; }
.methode__texte { color: var(--gris); font-size: 15px; }

/* ---------- tarifs (développement) ---------- */
.tarifs { padding: 0 var(--marge) 112px; }
.tarifs__bloc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 56px; border-radius: 28px; background: var(--blanc); }
.tarifs__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tarifs__titre { font-size: clamp(36px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.tarifs__chapo { color: var(--encre-douce); font-size: 18px; line-height: 1.65; }
.tarifs__texte .bouton { min-height: 56px; padding: 0 28px; }
.tarifs__formules { display: flex; flex-direction: column; gap: 16px; }
.formule { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 20px; background: var(--fond); }
.formule__nom { display: flex; flex-direction: column; gap: 6px; color: var(--gris); font-size: 15px; }
.formule__nom strong { color: var(--encre); font-size: 17px; font-weight: 600; }
.formule__prix { font: 700 40px/1 var(--police-titre); white-space: nowrap; }
.formule__prix--texte { font-size: 32px; }
.formule__unite { color: var(--gris); font: 500 17px/1 var(--police-texte); }
.tarifs__gratuit { display: flex; align-items: center; gap: 10px; padding-left: 8px; color: var(--encre-douce); font-size: 15px; font-weight: 600; }
.tarifs__gratuit svg { color: var(--orange-texte); }

/* ---------- références ---------- */
.references { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--trait-doux); color: var(--gris); font-size: 15px; }
.references strong { color: var(--encre); font-weight: 600; }
.references span { font: 700 20px/1.2 var(--police-titre); }

/* ---------- avis choisis ---------- */
.avis-choisis__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; }
.avis-choisis__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px; }
.avis-choisis .tuile-malt { gap: 32px; padding: 40px; border-radius: 24px; }
/* Sous 1 100 px environ, la tuile est trop étroite pour le logo et le libellé côte à côte : le libellé passe dessous. */
.avis-choisis .tuile-malt__tete { flex-wrap: wrap; row-gap: 8px; }
.avis-choisis .tuile-malt__logo { height: 34px; }
.avis-choisis .tuile-malt__note { gap: 10px; }
.avis-choisis .tuile-malt__chiffre { font-size: 88px; }
.avis-choisis .tuile-malt__detail { font-size: 17px; }
.avis-choisis .avis { gap: 14px; }
.avis-choisis .avis__guillemet { padding-top: 12px; font-size: 52px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; }
.faq__tete { position: sticky; top: calc(var(--hauteur-entete) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.faq__titre { font-size: clamp(36px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.faq__intro { color: var(--gris); font-size: 17px; }
.faq__liste { border-top: 1px solid var(--trait); }
.faq__question { border-bottom: 1px solid var(--trait); }
.faq__intitule { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 24px 0; font: 700 21px/1.3 var(--police-titre); cursor: pointer; list-style: none; }
.faq__intitule::-webkit-details-marker { display: none; }
.faq__intitule svg { flex-shrink: 0; color: var(--orange-texte); transition: transform .25s; }
.faq__question[open] .faq__intitule svg { transform: rotate(180deg); }
.faq__reponse { padding: 0 48px 28px 0; color: var(--encre-douce); font-size: 17px; line-height: 1.65; }
.faq__reponse a { font-weight: 600; }

/* ---------- appel final ---------- */
.appel-pilier { padding: 112px var(--marge); }
.appel-pilier__bloc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; padding: 80px 72px; border-radius: 32px; background: var(--nuit); color: var(--sur-nuit); }
.appel-pilier__texte { display: flex; flex-direction: column; gap: 20px; }
.appel-pilier__titre { font-size: clamp(40px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.appel-pilier__chapo { color: var(--sur-nuit-doux); font-size: 19px; }
.appel-pilier__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.appel-pilier__actions .bouton { min-height: 60px; padding: 0 34px; }
.appel-pilier__note { color: var(--sur-nuit-doux); font-size: 15px; }
.appel-pilier--centre .appel-pilier__bloc { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; text-align: center; }
.appel-pilier--centre .appel-pilier__texte { align-items: center; gap: 24px; }
.appel-pilier--centre .appel-pilier__titre { font-size: clamp(44px, 4.45vw, 64px); }
.appel-pilier--centre .appel-pilier__chapo { max-width: 600px; }
.appel-pilier--centre .appel-pilier__actions { align-items: center; }

@media (max-width: 899px) {
  /* Maquettes mobiles : sections de 56 px, titres de 32 px, écart entre en-tête et contenu propre à chaque section. */
  .section { padding: 56px 20px; }
  .section__titre { font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; }
  .section__tete { margin-bottom: var(--tete-ecart-mobile, 28px); }
  .performance, .tarifs-orbit, .avis-choisis { --tete-ecart-mobile: 24px; }
  .socle, .tableau { --tete-ecart-mobile: 20px; }
  .demarrer { --tete-ecart-mobile: 16px; }
  .heros-pilier { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 32px 20px 56px; }
  .heros-pilier__texte { gap: 22px; }
  .heros-pilier .surtitre { gap: 10px; font-size: 12px; }
  .heros-pilier__titre { font-size: 38px; line-height: 1.08; }
  .heros-pilier__intro { font-size: 17px; }
  .heros-pilier__actions { flex-direction: column; align-items: stretch; align-self: stretch; gap: 6px; }
  .heros-pilier__actions .bouton { min-height: 56px; }
  .heros-pilier__actions .lien-souligne { align-self: center; min-height: 48px; font-size: 16px; }
  .heros-pilier__preuve { flex-direction: column; align-self: stretch; gap: 6px; font-size: 14px; text-align: center; }
  .heros-pilier__visuel { padding: 8px 0 0; }
  .editeur { border-radius: 16px; font-size: 11.5px; line-height: 1.75; }
  .editeur__barre { padding: 10px 14px; font-size: 11px; }
  .editeur__code { padding: 14px 16px 18px; }
  .editeur__hors-mobile, .editeur__retrait { display: none; }
  .editeur__seulement-mobile { display: inline; }
  .badge-flottant { position: static; }
  .badge-flottant--copie { justify-content: center; margin-top: 14px; padding: 12px 16px; font-size: 14px; box-shadow: 0 8px 20px rgba(20, 27, 45, .1); }
  .badge-flottant--reponse { display: none; }
  .services-grille { gap: 14px; }
  /* L'icône et le titre de chaque carte sur une ligne (maquette mobile). */
  .service { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 24px; border-radius: 20px; }
  .service > :not(.service__icone, .service__titre) { grid-column: 1 / -1; }
  .service__icone { width: 40px; height: 40px; border-radius: 12px; }
  .service__titre { font-size: 21px; }
  .service__declencheur { font-size: 16px; }
  .service__texte { font-size: 15px; }
  .service__preuve { gap: 4px; padding-top: 12px; }
  .service__preuve-label { font-size: 11px; }
  .service__preuve-texte { font-size: 14px; }
  .service__bouton { align-self: stretch; min-height: 50px; }
  .pourquoi { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pourquoi__points { gap: 22px; }
  .pourquoi__point { gap: 8px; padding-top: 18px; }
  .pourquoi__numero { font-size: 16px; }
  .pourquoi__titre { font-size: 21px; }
  .pourquoi__texte { font-size: 15px; }
  .methode__titre { margin-bottom: 28px; }
  .methode { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .methode__etape { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .methode__repere { flex-direction: column; gap: 0; }
  .methode__repere::after { width: 2px; height: auto; }
  .methode__numero { width: 40px; height: 40px; font-size: 15px; }
  .methode__corps { gap: 6px; padding: 6px 0 28px; }
  .methode__nom { font-size: 19px; }
  .tarifs { padding: 0 20px 56px; }
  .tarifs__bloc { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 24px; border-radius: 24px; }
  /* Sur mobile, les formules passent entre le titre et le texte (maquette). */
  .tarifs__texte { display: contents; }
  .tarifs__titre { order: -2; font-size: 30px; }
  .tarifs__formules { order: -1; gap: 12px; }
  .tarifs__chapo { font-size: 16px; }
  .tarifs__texte .bouton { align-self: stretch; min-height: 54px; }
  .formule { align-items: center; gap: 12px; padding: 18px 20px; border-radius: 16px; }
  .formule__nom { gap: 4px; font-size: 13px; }
  .formule__nom strong { font-size: 16px; }
  .formule__prix { font-size: 28px; }
  .formule__prix--texte { font-size: 22px; }
  .formule__unite { font-size: 14px; }
  .references { gap: 4px 14px; margin-top: 24px; padding-top: 20px; }
  .references span { font-size: 16px; }
  .avis-choisis__grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .avis-choisis__liste { gap: 20px; }
  .avis-choisis .avis:nth-child(n+3) { display: none; }
  .avis-choisis .avis { gap: 12px; }
  .avis-choisis .avis__guillemet { padding-top: 10px; font-size: 44px; }
  .avis-choisis .avis__texte { font-size: 15px; }
  .avis-choisis .avis__auteur { font-size: 14px; }
  .avis-choisis .tuile-malt { gap: 18px; padding: 24px; border-radius: 20px; }
  .avis-choisis .tuile-malt__logo { height: 26px; }
  .avis-choisis .tuile-malt__label { font-size: 12px; }
  /* La note et son détail sur une ligne (maquette mobile). */
  .avis-choisis .tuile-malt__note { flex-direction: row; align-items: baseline; gap: 14px; }
  .avis-choisis .tuile-malt__chiffre { flex-shrink: 0; font-size: 56px; }
  .avis-choisis .tuile-malt__detail { font-size: 15px; }
  .avis-choisis .tuile-malt__lien { font-size: 15px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq__tete { position: static; gap: 12px; }
  .faq__titre { font-size: 32px; }
  .faq__intro { font-size: 16px; }
  .faq__intitule { padding: 18px 0; font-size: 18px; }
  .faq__reponse { padding: 0 0 20px; font-size: 15px; }
  .appel-pilier { padding: 56px 20px; }
  .appel-pilier__bloc { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 24px; border-radius: 24px; }
  .appel-pilier__titre { font-size: 32px; }
  .appel-pilier--centre .appel-pilier__titre { font-size: 38px; }
  .appel-pilier--centre .appel-pilier__bloc, .appel-pilier--centre .appel-pilier__texte { gap: 16px; }
  .appel-pilier__chapo { font-size: 16px; }
  .appel-pilier__actions, .appel-pilier--centre .appel-pilier__actions { align-items: stretch; }
  .appel-pilier__actions .bouton { min-height: 56px; }
  .appel-pilier__note { text-align: center; }
}

/* ---------- mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .heros-pilier__texte > * { animation: apparition .9s var(--courbe) both; }
  .heros-pilier__texte > :nth-child(2) { animation-delay: .1s; }
  .heros-pilier__texte > :nth-child(3) { animation-delay: .2s; }
  .heros-pilier__texte > :nth-child(4) { animation-delay: .3s; }
  .heros-pilier .pastille { animation: pouls 2s ease-out infinite; }
  .badge-flottant--copie { animation: flotte 6s ease-in-out infinite; }
  .service:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(20, 27, 45, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .faq__intitule svg { transition: none; }
}

/* =================== hébergement =================== */

/* ---------- héros ---------- */
/* Titre, recherche, puis texte et boutons l'un au-dessus de l'autre (maquette du 29/09/2026). */
.heros-pilier--hebergement { display: flex; flex-direction: column; align-items: stretch; gap: 48px; padding-bottom: 96px; }
.heros-pilier--hebergement .heros-pilier__texte { max-width: 900px; gap: 24px; }
.heros-pilier__suite { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 1000px; }
.heros-pilier--hebergement .heros-pilier__intro { font-size: 22px; }
.heros-pilier--hebergement .heros-pilier__actions { gap: 16px 32px; }
.heros-pilier--hebergement .heros-pilier__actions .bouton { min-height: 68px; padding: 0 40px; font-size: 20px; }
.heros-pilier--hebergement .heros-pilier__actions .lien-souligne { font-size: 19px; }
.heros-pilier__appel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.heros-pilier__rassurance { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; color: var(--gris); font-size: 15px; }
.heros-pilier__rassurance a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.heros-pilier__preuve--centre { justify-content: center; font-size: 14px; text-align: center; }
.benefices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; list-style: none; }
.benefice { display: flex; gap: 18px; padding: 28px; border-radius: 20px; background: var(--blanc); }
.benefice__icone { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #FFF1E0; color: var(--orange-texte); }
.benefice__texte { color: var(--gris); font-size: 16px; line-height: 1.55; }
.benefice__texte strong { display: block; margin-bottom: 4px; color: var(--encre); font-size: 18px; }

/* ---------- barre de navigateur (recherche, tableau de bord) ---------- */
.barre-navigateur { height: 36px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--trait-doux); background: #F0EEE8; }
.barre-navigateur__point { width: 9px; height: 9px; border-radius: 50%; background: var(--trait); }
.barre-navigateur__adresse { margin-left: 12px; color: var(--gris); font-size: 12px; }

/* ---------- recherche : la même boutique, avant et avec Orbit (docs/maquettes/animations/) ---------- */
/* Chaque scène est dessinée sur la grille de la maquette, 568 × 430. --u vaut un pixel de cette grille à l'échelle de
   la fenêtre (unités de conteneur), avec ou sans JavaScript. data-phase, posé par public/js/recherche.js, vaut serp,
   vise, clic, chargement ou fin ; « fin » (la page chargée et son temps) est l'état sans JavaScript. */
.recherche { display: flex; flex-direction: column; gap: 14px; }
.recherche__formes { position: absolute; width: 0; height: 0; overflow: hidden; }
.recherche__onglets { display: none; }
.recherche__onglet { position: relative; min-height: 52px; overflow: hidden; border: 1.5px solid var(--trait-doux); border-radius: 14px; background: var(--blanc); color: var(--gris); font: 700 17px/1 var(--police-titre); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.recherche__onglet[data-onglet="avant"][aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--sur-nuit); }
.recherche__onglet[data-onglet="apres"][aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: var(--nuit); }
.recherche__avancement { position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background: currentColor; opacity: .45; }
.recherche__fenetres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.recherche__fenetre { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.recherche__fenetre--avant { --cible: 356; --duree-chargement: 2.8s; }
.recherche__fenetre--apres { --cible: 110; --duree-chargement: .15s; }
.recherche__etiquette { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 0 4px; }
.recherche__nom { display: inline-flex; align-items: center; gap: 12px; color: var(--encre); font: 700 clamp(24px, 2.1vw, 30px)/1.1 var(--police-titre); }
.recherche__nom::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--gris); }
.recherche__fenetre--apres .recherche__nom { color: var(--orange-texte); }
.recherche__fenetre--apres .recherche__nom::before { background: var(--orange); }
.recherche__detail { color: var(--gris); font-size: 15px; }
.recherche__navigateur { overflow: hidden; border: 1px solid var(--trait-doux); border-radius: 18px; background: var(--blanc); box-shadow: 0 32px 64px rgba(20, 27, 45, .18); }
.recherche__cadre { aspect-ratio: 568 / 430; container-type: inline-size; }
.recherche__scene { --u: calc(100cqw / 568); position: relative; height: 100%; overflow: hidden; background: var(--blanc); color: var(--encre); font-size: calc(15 * var(--u)); line-height: 1.3; }
/* Barre d'adresse : « Recherche », puis l'adresse de la boutique une fois la page chargée (data-phase="fin", état sans
   JavaScript). Sans :has(), l'adresse de la boutique reste affichée. */
.recherche__adresse-recherche { display: none; }
.recherche__navigateur:has(.recherche__scene:not([data-phase="fin"])) .recherche__adresse-recherche { display: inline; }
.recherche__navigateur:has(.recherche__scene:not([data-phase="fin"])) .recherche__adresse-boutique { display: none; }
.recherche__legende { color: var(--gris); font-size: 14px; text-align: center; }
.recherche__consigne { display: none; }

/* La page de résultats */
.recherche__serp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding: calc(20 * var(--u)); }
.recherche__champ { height: calc(44 * var(--u)); flex-shrink: 0; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(18 * var(--u)); border: 1px solid #DDD8CC; border-radius: calc(22 * var(--u)); }
.recherche__champ svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--gris); }
.recherche__resultats { display: flex; flex-direction: column; gap: calc(12 * var(--u)); list-style: none; }
.recherche__resultat { position: relative; height: calc(70 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.recherche__domaine { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--gris); font-size: calc(12.5 * var(--u)); }
.recherche__favicon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #E2DED5; }
.recherche__resultat--comparatif .recherche__favicon { background: #DDE7F3; }
.recherche__resultat--promotion .recherche__favicon { background: #E4EFD9; }
.recherche__resultat--nous .recherche__favicon { background: var(--orange); }
.recherche__titre { color: #2B4DB3; font-size: calc(16 * var(--u)); font-weight: 600; white-space: nowrap; text-underline-offset: calc(3 * var(--u)); }
.recherche__extrait { width: 82%; height: calc(8 * var(--u)); margin-top: calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: #ECE9E2; }
.recherche__resultat--comparatif .recherche__extrait { width: 88%; }
.recherche__resultat--promotion .recherche__extrait { width: 76%; }
.recherche__resultat--nous .recherche__extrait { width: 84%; }
.recherche__rang { position: absolute; top: calc(17 * var(--u)); right: 0; padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: var(--encre); color: var(--sur-nuit); font-size: calc(12 * var(--u)); font-weight: 700; }
.recherche__fenetre--apres .recherche__rang { background: var(--orange); color: var(--nuit); }

/* La boutique */
.recherche__page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--blanc); }
.recherche__entete { height: calc(46 * var(--u)); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(18 * var(--u)); border-bottom: 1px solid #EFEDE7; }
.recherche__boutique { font: 700 calc(17 * var(--u))/1 var(--police-titre); }
.recherche__menu { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.recherche__menu > span { width: calc(46 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--gris); }
.recherche__menu > span:nth-child(2) { width: calc(38 * var(--u)); }
.recherche__menu > span:nth-child(3) { width: calc(52 * var(--u)); }
.recherche__menu > .recherche__panier { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--orange); }
.recherche__banniere { height: calc(118 * var(--u)); flex-shrink: 0; display: flex; align-items: center; gap: calc(16 * var(--u)); margin: calc(14 * var(--u)) calc(14 * var(--u)) 0; padding: calc(22 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--nuit); }
.recherche__accroche { flex-grow: 1; height: 100%; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.recherche__accroche > span { width: 78%; height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--sur-nuit); }
.recherche__accroche > span:nth-child(2) { width: 52%; }
.recherche__accroche > .recherche__bouton { width: calc(92 * var(--u)); height: calc(24 * var(--u)); margin-top: auto; border-radius: calc(12 * var(--u)); background: var(--orange); }
.recherche__vedette { width: calc(96 * var(--u)); height: calc(96 * var(--u)); flex-shrink: 0; margin: calc(-10 * var(--u)) 0; }
.recherche__produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); }
.recherche__produit { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.recherche__visuel-produit { height: calc(92 * var(--u)); display: flex; justify-content: center; padding: calc(6 * var(--u)); border-radius: calc(8 * var(--u)); background: #FFE2BF; }
.recherche__produit:nth-child(2) .recherche__visuel-produit { background: #DDE7F3; }
.recherche__produit:nth-child(3) .recherche__visuel-produit { background: #E4EFD9; }
.recherche__visuel-produit svg { width: auto; height: 100%; }
.recherche__libelle-produit { width: 72%; height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--encre); }
.recherche__prix-produit { width: 36%; height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--orange-texte); }

/* Le chargement, le temps et le curseur */
.recherche__attente { position: absolute; inset: 0; display: none; flex-direction: column; background: #FAF9F6; }
.recherche__squelette-entete { height: calc(46 * var(--u)); flex-shrink: 0; border-bottom: 1px solid #EFEDE7; }
.recherche__squelette-banniere { height: calc(118 * var(--u)); flex-shrink: 0; margin: calc(14 * var(--u)) calc(14 * var(--u)) 0; border-radius: calc(10 * var(--u)); background: #ECE9E2; }
.recherche__squelette-produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); }
.recherche__squelette-produits > span { height: calc(92 * var(--u)); border-radius: calc(8 * var(--u)); background: #ECE9E2; }
.recherche__chargement { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); background: rgba(246, 245, 241, .55); color: var(--gris); font-size: calc(14 * var(--u)); font-weight: 600; }
.recherche__roue { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border: calc(4 * var(--u)) solid var(--trait); border-top-color: var(--gris); border-radius: 50%; }
.recherche__progression { position: absolute; top: 0; left: 0; width: 0; height: calc(3 * var(--u)); background: var(--orange); }
.recherche__temps { position: absolute; top: calc(62 * var(--u)); left: calc(14 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: var(--encre); color: var(--sur-nuit); font-size: calc(13 * var(--u)); font-weight: 700; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(20, 27, 45, .18); }
.recherche__fenetre--apres .recherche__temps { background: var(--orange); color: var(--nuit); }
.recherche__curseur { position: absolute; top: calc(44 * var(--u)); left: calc(470 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); opacity: 0; pointer-events: none; transition: top 1s cubic-bezier(.45, 0, .2, 1), left 1s cubic-bezier(.45, 0, .2, 1), opacity .2s; }
.recherche__curseur svg { width: 100%; height: 100%; }
.recherche__curseur::before { content: ''; position: absolute; top: calc(-12 * var(--u)); left: calc(-12 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: rgba(245, 146, 29, .5); opacity: 0; }

/* Les phases */
.recherche__scene[data-phase="serp"] .recherche__page,
.recherche__scene[data-phase="vise"] .recherche__page,
.recherche__scene[data-phase="clic"] .recherche__page { visibility: hidden; }
.recherche__scene:not([data-phase="fin"]) .recherche__temps { display: none; }
.recherche__scene[data-phase="chargement"] .recherche__attente { display: flex; }
.recherche__scene[data-phase="chargement"] .recherche__progression { width: 90%; transition: width var(--duree-chargement) linear; }
.recherche__scene[data-phase="serp"] .recherche__curseur { opacity: 1; }
.recherche__scene[data-phase="vise"] .recherche__curseur,
.recherche__scene[data-phase="clic"] .recherche__curseur { top: calc(var(--cible) * var(--u)); left: calc(150 * var(--u)); opacity: 1; }
.recherche__scene[data-phase="chargement"] .recherche__curseur,
.recherche__scene[data-phase="fin"] .recherche__curseur { transition: none; }
.recherche__scene[data-phase="vise"] .recherche__resultat--nous .recherche__titre,
.recherche__scene[data-phase="clic"] .recherche__resultat--nous .recherche__titre { text-decoration: underline; }

/* ---------- preuve Francopieces ---------- */
/* Largeurs finales des barres (sans JavaScript) : valeur / 900, comme les chiffres de content/pages/hebergement.php. */
@media (min-width: 900px) {
  .preuve__titre { font-size: clamp(44px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.03em; }
}
.preuve__etapes { display: flex; flex-direction: column; gap: 28px; list-style: none; }
.preuve__etape { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(120px, 180px); gap: 32px; align-items: center; }
.preuve__legende { display: flex; flex-direction: column; gap: 4px; }
.preuve__etiquette { font: 700 20px/1.2 var(--police-titre); }
.preuve__detail { color: var(--sur-nuit-doux); font-size: 14px; line-height: 1.45; }
.preuve__piste { height: 20px; overflow: hidden; border-radius: 10px; background: rgba(244, 245, 248, .06); }
.preuve__jauge { display: block; width: 100%; height: 100%; border-radius: 10px; background: var(--gris); }
.preuve__etape--orbit .preuve__jauge { width: calc(320 / 900 * 100%); background: var(--orange-clair); }
.preuve__etape--cache .preuve__jauge { width: max(6px, calc(7 / 900 * 100%)); background: var(--orange); }
.preuve__valeur { font: 700 52px/1 var(--police-titre); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.preuve__unite { font-size: 22px; }
.preuve__etape--cache .preuve__etiquette, .preuve__etape--cache .preuve__valeur { color: var(--orange-clair); }
.preuve__pied { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(244, 245, 248, .12); }
.preuve__complementarite { font-size: 19px; line-height: 1.6; }
.preuve__suite { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.preuve__lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--orange-clair); font-size: 17px; font-weight: 600; text-decoration: none; }
.preuve__lien:hover { color: var(--sur-nuit); }
.preuve__source { color: #A9B1C2; font-size: 13px; line-height: 1.55; }

/* ---------- performance ---------- */
.atouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.atout { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--fond); }
.atout__visuel { padding: 24px 24px 0; background: #EFEDE7; }
.atout__visuel img { width: 100%; }
.atout__corps { display: flex; flex-direction: column; gap: 12px; padding: 28px 32px 32px; }
.atout__titre { font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; }
.atout__texte { color: var(--gris); font-size: 16px; }
.atout__sources { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--trait-doux); color: var(--gris); font-size: 13px; line-height: 1.5; }

/* ---------- histoire ---------- */
.histoire { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.histoire__portrait { position: relative; width: min(400px, 100%); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.histoire__orbite { position: absolute; inset: 0; width: 100%; height: 100%; }
.histoire__photo { position: relative; width: 85%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.histoire__texte { display: flex; flex-direction: column; gap: 22px; }
.histoire__titre { font-size: clamp(32px, 3.05vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.histoire__paragraphe { color: var(--encre-douce); font-size: 18px; line-height: 1.7; }
.histoire__signature { color: var(--orange-texte); font: 700 26px/1.2 var(--police-titre); }

/* ---------- infrastructure (maquette A‴ du 02/10/2026) ---------- */
/* Mon expertise (liseré orange) posée sur le socle Infomaniak, à la même largeur : les deux blocs se touchent. */
.infrastructure .section__chapo { max-width: 620px; font-size: 20px; }
.infra__expertise { border: 1.5px solid var(--orange); border-radius: 24px 24px 0 0; background: rgba(244, 245, 248, .05); }
.infra__socle { border: 1px solid rgba(244, 245, 248, .16); border-top: 0; border-radius: 0 0 24px 24px; background: rgba(244, 245, 248, .03); }
.infra__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 28px 40px 0; }
.infra__tete--socle { padding: 24px 40px; border-bottom: 1px solid rgba(244, 245, 248, .12); }
.infra__nom { display: flex; align-items: center; gap: 16px; min-height: 40px; font-size: 22px; line-height: 1.2; }
.infra__logo-rp { width: 40px; height: 40px; }
.infra__logo-infomaniak { width: 166px; height: auto; }
.infra__separateur { width: 1px; height: 24px; background: rgba(244, 245, 248, .24); }
.infra__role { color: var(--sur-nuit-doux); font-size: 15px; font-weight: 600; }
.infra__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 28px 40px 40px; list-style: none; }
/* Titres des points et des cartes en h4 : la base (site.css) ne règle que h1 à h3. */
.infra-point__titre, .infra-carte__titre { margin: 0; font-family: var(--police-titre); font-weight: 700; letter-spacing: -0.01em; }
.infra-point { display: flex; flex-direction: column; gap: 10px; }
.infra-point svg { color: var(--orange-clair); }
.infra-point__titre { font-size: 19px; line-height: 1.25; }
.infra-point__texte { color: var(--sur-nuit-doux); font-size: 15px; line-height: 1.55; }
/* Grille secondaire : thème, chiffre, légende, titre et texte restent alignés d'une carte à l'autre. */
.infra-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.infra-carte { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; align-content: start; padding: 40px clamp(24px, 2.8vw, 40px); }
.infra-carte + .infra-carte { border-left: 1px solid rgba(244, 245, 248, .12); }
.infra-carte__theme { color: var(--orange-clair); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.infra-carte__chiffre { font: 700 clamp(52px, 5.5vw, 80px)/1 var(--police-titre); letter-spacing: -0.03em; white-space: nowrap; }
.infra-carte__unite { font-size: .55em; }
.infra-carte__legende { color: var(--sur-nuit-doux); font-size: 15px; line-height: 1.55; }
.infra-carte__titre { margin-top: 16px; font-size: 21px; line-height: 1.25; }
.infra-carte__texte { color: var(--sur-nuit-doux); font-size: 15px; line-height: 1.65; }
.infra-certifications { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 40px; border-top: 1px solid rgba(244, 245, 248, .12); }
.infra-certifications__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.infra-certifications__titre { margin-right: 6px; color: var(--sur-nuit-doux); font-size: 14px; font-weight: 600; }
.infra-certifications__liste { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.infra-certifications__element { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid rgba(244, 245, 248, .2); border-radius: 17px; font-size: 13px; font-weight: 700; }
.infra-certifications__lien { display: inline-flex; align-items: center; min-height: 44px; color: var(--orange-clair); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.infra-certifications__lien:hover { color: var(--sur-nuit); }
.infra-pied { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 56px; }
.infra-pied__conclusion { font: 700 28px/1.3 var(--police-titre); }
.infra-pied__conclusion span { color: var(--orange-clair); }
/* margin-top : le haut des lettres de la source tombe à la hauteur de celui de la conclusion (mesuré à 1 440 px). */
.infra-pied__source { margin-top: 2px; color: #A9B1C2; font-size: 13px; line-height: 1.55; }
@media (min-width: 1100px) {
  .infra__points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- socle et tableau de bord : vitrines ---------- */
.atouts-socle { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; list-style: none; }
.atouts-socle li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--trait-doux); border-radius: 20px; background: var(--blanc); font-size: 15px; font-weight: 600; }
.atouts-socle svg { color: var(--orange-texte); }
.vitrine { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch; }
.vitrine__visuel { display: flex; align-items: center; justify-content: center; min-height: 420px; padding: 40px; border: 1px solid var(--trait-doux); border-radius: 24px; background: var(--blanc); }
.vitrine__image { width: 100%; max-width: 560px; }
.vitrine__liste { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.vitrine__onglet { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 18px; border: 1px solid transparent; border-radius: 18px; }
.vitrine__onglet.is-actif { border-color: var(--trait-doux); background: var(--blanc); box-shadow: 0 12px 32px rgba(20, 27, 45, .08); }
.vitrine__titre { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.vitrine__texte { color: var(--gris); font-size: 15px; line-height: 1.55; }
.vitrine__progression { display: none; height: 3px; overflow: hidden; border-radius: 2px; background: var(--sable); }
.vitrine__progression > span { display: block; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left center; }
.vitrine__onglet.is-actif .vitrine__progression > span { transform: scaleX(1); }
.vitrine--cadre { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.vitrine--cadre .vitrine__visuel { order: 1; display: block; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 32px 64px rgba(0, 0, 0, .35); }
.vitrine--cadre .vitrine__image { max-width: none; }
.section--nuit .vitrine__onglet { padding: 20px 22px 16px; border-radius: 16px; }
.section--nuit .vitrine__onglet.is-actif { border-color: rgba(244, 245, 248, .18); background: rgba(244, 245, 248, .06); box-shadow: none; }
.section--nuit .vitrine__titre { font-size: 19px; }
.section--nuit .vitrine__texte { color: var(--sur-nuit-doux); }
.section--nuit .vitrine__progression { background: rgba(244, 245, 248, .1); }
.tableau__transition { margin-top: 48px; font: 700 28px/1.3 var(--police-titre); text-align: center; }
.tableau__transition span { color: var(--orange-clair); }

/* ---------- configurateur et devis ---------- */
.configurateur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.configurateur__choix { display: flex; flex-direction: column; gap: 40px; }
.configurateur__etape { display: flex; flex-direction: column; gap: 16px; }
.configurateur__titre { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.configurateur__taux { color: var(--gris); font: 500 16px/1.4 var(--police-texte); letter-spacing: 0; }
.configurateur__serveurs { display: flex; flex-direction: column; gap: 10px; }
.configurateur__sauvegardes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.configurateur__heures { display: flex; flex-wrap: wrap; gap: 8px; }
.configurateur__note { color: var(--gris); font-size: 15px; }
.configurateur__note strong { color: var(--encre); }
.choix { position: relative; border: 2px solid var(--trait-doux); border-radius: 16px; background: var(--blanc); color: var(--encre); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
/* Sans JavaScript, les boutons du configurateur ne font rien : pas de curseur main ni de survol (la classe js est posée par public/js/main.js). */
html:not(.js) .choix { cursor: default; }
html.js .choix:hover { border-color: var(--encre); }
/* Bordure et ombre en --orange-texte (5,6:1) plutôt que --orange (2,3:1) : WCAG 1.4.11. */
.choix[aria-pressed="true"] { border-color: var(--orange-texte); background: #FFF7EC; box-shadow: 0 0 0 1px var(--orange-texte); }
.choix--serveur { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; }
.choix__corps { display: flex; flex-direction: column; gap: 5px; }
.choix__nom { font-size: 17px; font-weight: 700; }
.choix__persona { color: var(--gris); font-weight: 500; }
.choix__detail { color: var(--gris); font-size: 14px; line-height: 1.45; }
.choix__tech { color: var(--gris); font: 12.5px/1.4 var(--police-code); }
.choix__prix { font: 700 24px/1 var(--police-titre); white-space: nowrap; }
.choix--sauvegarde { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; }
.choix--sauvegarde .choix__prix { margin-top: auto; font-size: 19px; }
.choix__conseil { position: absolute; top: -12px; right: 16px; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--nuit); font-size: 12px; font-weight: 700; }
.choix--heures { width: 64px; height: 52px; border-radius: 14px; font-size: 16px; font-weight: 700; text-align: center; }
.choix--heures[aria-pressed="true"] { border-color: var(--nuit); background: var(--nuit); color: var(--sur-nuit); box-shadow: none; }
.choix--heures.is-conseille::after { content: ''; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border: 2px solid var(--blanc); border-radius: 50%; background: var(--orange); }
.inclus { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 16px; background: var(--fond); }
.inclus__titre { font-size: 15px; font-weight: 600; }
.inclus__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px 24px; color: var(--encre-douce); font-size: 15px; list-style: none; }
.inclus__element { display: flex; gap: 10px; }
.inclus__element svg { flex-shrink: 0; color: var(--orange-texte); }
.inclus__element--vedette { grid-column: 1 / -1; color: var(--encre); font-weight: 700; }
.inclus__detail { color: var(--gris); font-weight: 500; }
.devis { position: sticky; top: calc(var(--hauteur-entete) + 24px); display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 24px; background: var(--nuit); color: var(--sur-nuit); }
.devis :focus-visible { outline-color: var(--orange); }
.devis__titre { color: var(--orange-clair); font: 600 13px/1.4 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; }
.devis__ligne { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; }
.devis__ligne > span:last-child { white-space: nowrap; }
.devis__inclus, .devis__detail { padding-left: 14px; border-left: 2px solid rgba(244, 245, 248, .12); color: var(--sur-nuit-doux); font-size: 13.5px; }
.devis__inclus { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.devis__inclus li { display: flex; justify-content: space-between; gap: 12px; }
.devis__vedette span:first-child { color: var(--sur-nuit); font-weight: 600; }
.devis__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 4px; padding-top: 20px; border-top: 1px solid rgba(244, 245, 248, .14); color: var(--sur-nuit-doux); font-size: 15px; }
.devis__montant { color: var(--orange-clair); font: 700 48px/1 var(--police-titre); white-space: nowrap; }
.devis__bouton { width: 100%; min-height: 56px; font-size: 16px; }
.devis__note { color: var(--sur-nuit-doux); font-size: 13px; line-height: 1.5; text-align: center; }

/* ---------- comment ça marche ---------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; list-style: none; }
.etape { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 24px; background: var(--blanc); }
.etape__numero { color: var(--orange-texte); font: 700 56px/1 var(--police-titre); }
.etape__titre { font-size: 24px; line-height: 1.2; }
.etape__texte { color: var(--gris); font-size: 16px; }
.demarrer__appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 48px; color: var(--gris); font-size: 15px; }
.demarrer__appel .bouton { min-height: 56px; padding: 0 28px; font-size: 16px; }

@media (max-width: 899px) {
  .heros-pilier--hebergement { gap: 22px; padding-bottom: 56px; }
  .heros-pilier--hebergement .heros-pilier__texte { gap: 22px; }
  .heros-pilier__suite { align-items: stretch; gap: 22px; }
  .heros-pilier--hebergement .heros-pilier__intro { font-size: 17px; }
  .heros-pilier--hebergement .heros-pilier__actions .bouton { min-height: 56px; padding: 0 30px; font-size: 17px; }
  .heros-pilier--hebergement .heros-pilier__actions .lien-souligne { font-size: 16px; }
  .heros-pilier__appel { align-items: stretch; align-self: stretch; }
  .heros-pilier__rassurance { flex-direction: column; gap: 0; font-size: 14px; }
  .benefices { gap: 12px; }
  .benefice { padding: 20px; border-radius: 16px; }
  .benefice__icone { display: none; }
  .benefice__texte { font-size: 15px; }
  .benefice__texte strong { font-size: 17px; }
  .heros-pilier__preuve--centre { font-size: 13px; }
  .barre-navigateur { height: 26px; gap: 6px; padding: 0 10px; }
  .barre-navigateur__point { width: 7px; height: 7px; }
  .barre-navigateur__adresse { margin-left: 6px; font-size: 10px; }
  .recherche { gap: 10px; }
  .recherche__fenetres { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .recherche__nom { font-size: 22px; }
  .recherche__nom::before { width: 12px; height: 12px; }
  .recherche__detail { font-size: 13px; }
  .recherche__navigateur { border-radius: 11px; box-shadow: 0 24px 48px rgba(20, 27, 45, .16); }
  .recherche__legende { font-size: 13px; line-height: 1.5; }
  /* Avec public/js/recherche.js : une seule fenêtre à la fois, choisie par les onglets, qui remplacent les étiquettes.
     Sans le script (ou quand le mouvement est réduit), les deux fenêtres restent l'une sous l'autre.
     Ces règles ont un double juste en dessous, sous @media (scripting: enabled) : toute modification vaut pour les deux. */
  .recherche.is-interactive .recherche__onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recherche.is-interactive .recherche__fenetres { gap: 0; }
  .recherche.is-interactive .recherche__fenetre { grid-area: 1 / 1; }
  .recherche.is-interactive .recherche__etiquette { display: none; }
  .recherche.is-interactive:not([data-active="apres"]) .recherche__fenetre--apres,
  .recherche.is-interactive[data-active="apres"] .recherche__fenetre--avant { visibility: hidden; }
  .recherche.is-interactive .recherche__consigne { display: inline; }
  /* JavaScript actif et mouvement non réduit : recherche.js passera à une seule fenêtre. Cette disposition est prise dès
     le premier rendu, sans attendre le script différé, pour que la suite de la page ne remonte pas quand il s'exécute
     (décalage de mise en page) ; la place des onglets, encore masqués, est gardée : 62 px = min-height de l'onglet
     (52 px) + gap de .recherche sous 900 px (10 px).
     Les règles .is-interactive ci-dessus restent pour les navigateurs qui ignorent la caractéristique scripting :
     toute modification vaut pour les deux blocs. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .recherche__onglets[hidden] + .recherche__fenetres { margin-top: 62px; }
    .recherche__fenetres { gap: 0; }
    .recherche__fenetre { grid-area: 1 / 1; }
    .recherche__etiquette { display: none; }
    .recherche:not([data-active="apres"]) .recherche__fenetre--apres,
    .recherche[data-active="apres"] .recherche__fenetre--avant { visibility: hidden; }
    .recherche__consigne { display: inline; }
  }
  .preuve__titre { font-size: 34px; line-height: 1.08; }
  .preuve__etapes { gap: 24px; }
  .preuve__etape { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiquette valeur" "piste piste" "detail detail"; gap: 10px 12px; }
  .preuve__legende { display: contents; }
  .preuve__etiquette { grid-area: etiquette; font-size: 18px; }
  .preuve__valeur { grid-area: valeur; font-size: 34px; }
  .preuve__unite { font-size: 16px; }
  .preuve__piste { grid-area: piste; height: 14px; border-radius: 7px; }
  .preuve__detail { grid-area: detail; font-size: 13px; }
  .preuve__pied { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; padding-top: 24px; }
  .preuve__complementarite { font-size: 16px; }
  .atouts { gap: 16px; }
  .atout { border-radius: 20px; }
  .atout__visuel { padding: 16px 16px 0; }
  .atout__corps { gap: 10px; padding: 20px 22px 24px; }
  .atout__titre { font-size: 20px; }
  .atout__texte { font-size: 15px; }
  .atout__sources { margin-top: 4px; padding-top: 10px; font-size: 12px; }
  /* Portrait de 220 px, photo de 180 px (maquette mobile). */
  .histoire { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .histoire__portrait { width: min(220px, 100%); }
  .histoire__photo { width: calc(180 / 220 * 100%); }
  .histoire__texte { gap: 20px; }
  .histoire__titre { font-size: 30px; }
  .histoire__paragraphe { font-size: 16px; }
  .histoire__signature { font-size: 22px; }
  .infrastructure .section__chapo { font-size: 17px; }
  .infra__expertise { border-radius: 20px 20px 0 0; }
  .infra__socle { border-radius: 0 0 20px 20px; }
  .infra__tete { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px 0; }
  .infra__tete--socle { gap: 8px; padding: 20px; }
  .infra__nom { gap: 12px; min-height: 32px; font-size: 19px; }
  .infra__logo-rp { width: 32px; height: 32px; }
  .infra__logo-infomaniak { width: 136px; }
  .infra__separateur { height: 20px; }
  .infra__role { font-size: 14px; }
  .infra__points { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 20px 24px; }
  .infra-point { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; }
  .infra-point svg { grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; }
  .infra-point__titre { font-size: 17px; line-height: 1.3; }
  .infra-point__texte { font-size: 14px; }
  .infra-cartes { grid-template-columns: minmax(0, 1fr); }
  .infra-carte { row-gap: 10px; padding: 24px 20px; }
  .infra-carte + .infra-carte { border-top: 1px solid rgba(244, 245, 248, .12); border-left: 0; }
  .infra-carte__theme { font-size: 12px; }
  .infra-carte__chiffre { font-size: 56px; }
  .infra-carte__legende { font-size: 14px; line-height: 1.5; }
  .infra-carte__titre { margin-top: 10px; font-size: 18px; line-height: 1.3; }
  .infra-carte__texte { line-height: 1.6; }
  .infra-certifications { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .infra-certifications__groupe { flex-direction: column; align-items: flex-start; gap: 12px; }
  .infra-certifications__titre { font-size: 13px; }
  .infra-certifications__liste { gap: 8px; }
  .infra-certifications__element { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12px; }
  .infra-pied { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .infra-pied__conclusion { font-size: 22px; }
  .infra-pied__source { font-size: 12px; line-height: 1.5; }
  .atouts-socle { gap: 8px; margin-bottom: 20px; }
  .atouts-socle li { height: 34px; padding: 0 14px; font-size: 14px; }
  .atouts-socle svg { display: none; }
  .vitrine, .vitrine--cadre { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vitrine__visuel { min-height: 0; padding: 20px; border-radius: 18px; }
  .vitrine--cadre .vitrine__visuel { order: 0; border-radius: 12px; }
  .vitrine__liste { gap: 8px; }
  .vitrine__onglet, .section--nuit .vitrine__onglet { padding: 16px 18px 14px; border-radius: 14px; }
  .vitrine__titre, .section--nuit .vitrine__titre { font-size: 18px; }
  .vitrine__texte { font-size: 14px; }
  .tableau__transition { margin-top: 20px; font-size: 21px; text-align: left; }
  .configurateur { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .configurateur__choix { gap: 28px; }
  .configurateur__titre { font-size: 20px; }
  .configurateur__taux { font-size: 14px; }
  .configurateur__serveurs { gap: 8px; }
  .configurateur__heures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choix--heures { width: auto; height: 48px; border-radius: 12px; font-size: 15px; }
  .choix--serveur { gap: 12px; padding: 16px 18px; border-radius: 14px; }
  .choix__prix { font-size: 20px; }
  /* Les sauvegardes en lignes : nom et détail à gauche, prix à droite (maquette mobile). */
  .configurateur__sauvegardes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .choix--sauvegarde { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 16px 18px; border-radius: 14px; }
  .choix--sauvegarde .choix__nom, .choix--sauvegarde .choix__detail { grid-column: 1; }
  .choix--sauvegarde .choix__nom { font-size: 16px; }
  .choix--sauvegarde .choix__detail { font-size: 13px; line-height: 1.4; }
  .choix--sauvegarde .choix__prix { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 16px; }
  .inclus { gap: 10px; padding: 18px; border-radius: 14px; }
  .inclus__titre, .inclus__liste { font-size: 14px; }
  .devis { position: static; gap: 12px; padding: 24px; border-radius: 20px; }
  .devis__ligne { font-size: 15px; }
  .devis__montant { font-size: 38px; }
  .devis__bouton { min-height: 54px; }
  .etapes { gap: 16px; }
  .etape { gap: 10px; padding: 24px; border-radius: 20px; }
  .etape__numero { font-size: 40px; }
  .etape__titre { font-size: 20px; }
  .etape__texte { font-size: 15px; }
  .demarrer__appel { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; font-size: 14px; text-align: center; }
  .demarrer__appel .bouton { min-height: 54px; }
}

@keyframes recherche-clic { from { opacity: .9; scale: .3; } to { opacity: 0; scale: 1.7; } }
@keyframes recherche-apparait { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }
@keyframes recherche-avancement { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: no-preference) {
  .recherche__roue { animation: tour 1s linear infinite; }
  .recherche__scene[data-phase="clic"] .recherche__curseur::before { animation: recherche-clic .45s ease-out both; }
  .recherche__temps { animation: recherche-apparait .3s ease-out both; }
  /* --duree-scene est posée sur chaque onglet par public/js/recherche.js, qui relance la barre de l'onglet actif à
     chaque scène en retirant puis remettant is-en-cours. */
  .recherche.is-en-cours .recherche__onglet[aria-pressed="true"] .recherche__avancement { animation: recherche-avancement var(--duree-scene, 6s) linear both; }
}

/* ---------- états posés par public/js/hebergement.js ---------- */
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vitrine.is-interactive .vitrine__progression { display: block; }
.vitrine__bouton { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
/* Toute la carte de l'onglet est cliquable ; l'anneau de focus l'entoure. */
.vitrine__bouton::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.vitrine__bouton:focus-visible { outline: none; }
.vitrine__bouton:focus-visible::after { outline: 2px solid var(--orange-texte); outline-offset: 2px; }
.section--nuit .vitrine__bouton:focus-visible::after { outline-color: var(--orange); }
.vitrine.is-interactive .vitrine__onglet:not(.is-actif):hover { border-color: var(--trait-doux); }
.section--nuit .vitrine.is-interactive .vitrine__onglet:not(.is-actif):hover { border-color: rgba(244, 245, 248, .18); }

@media (prefers-reduced-motion: no-preference) {
  .vitrine.is-auto .vitrine__onglet.is-actif .vitrine__progression > span { animation: progression 6s linear both; }
}