/* Infra Society, l'accueil (refonte, bloc B2, construit en avance sur la branche refonte-b1).

   Le dessin est celui de Maël (v8/index.html ; assets/site.css, refinement.css, identity.css, product-demos.css),
   repris à la main, règle par règle, dans l'ordre de sa cascade finale ; toutes les règles sont portées par
   body.ch-accueil (aucune règle nue, P-42) ; ses noms de classes sont gardés, sauf .section → .volet et .ecto →
   .ecto-fixe (P-89). La charpente (commun/styles/charpente.css) porte l'en-tête, le pied, les boutons, l'étiquette,
   l'en-tête de section, la liste à coches et l'apparition douce.

   Différences avec la maquette, et leurs raisons (refonte/DECISIONS-A-CONSIGNER.md, P-74 à P-89 ; la page de
   comparaison les liste) :
   - fond de l'ouverture : gradient.js n'est pas repris ; il est redessiné par notre code (commun/scripts/pages/accueil.js,
     WebGL), animé avec un bouton pause (P-95) ; le dégradé CSS ci-dessous est l'image de repli, tirée du rendu de Maël
     à 3 s (sans JavaScript, sous « mouvement réduit », sans WebGL ni précision haute) (P-84) — pas la première image
     de notre programme, qui part d'un abricot calme ;
   - Oracle → Switzer, graisse 550 (P-85) ;
   - barre du document, ECTO flottants, tampons et reflet argenté figés (P-87) ; le fond et les aperçus animés ont un
     bouton pause, s'arrêtent hors de l'écran et ne bougent pas sous « mouvement réduit » (P-95) ;
   - aperçus de l'espace : écrits dans la page (leurs vues et leurs états), animés par notre script, qui suit le moteur
     de Maël (product-demos.js, transposé à la main, DEC-93), sans donnée (P-86, P-95, P-96) ;
   - aucun masque gravé sur les cartes (aucune source vérifiable, DEC-96) ;
   - onglet inactif et étape inactive assombris pour atteindre 4,5 pour 1 (principe 14).
   Aucune ressource d'un autre site : les images viennent de images/ (registre images/LICENCES.md). */

/* ------------------------------------------------------------------ ouverture */
body.ch-accueil .hero { position: relative; padding-top: 136px; isolation: isolate; }
/* Le rendu de gradient.js (WebGL, animé sans fin) : un champ abricot, deux reflets roses, une touche violette au bord
   gauche et un trait irisé en haut à gauche ; relevé sur des captures faites avec la carte graphique (P-84). */
body.ch-accueil .hero-gradient {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  background:
    linear-gradient(144deg, #f19b5700 110px, #f19b57cc 152px, #f19b57e0 184px, #efa665 190px, #eac998 194px, #dfd1a1 196px, #99c8a5 198px, #71b9ba 200px, #8599cd 202px, #ce99c5 204px, #f1a4a6 206px, #f7b48e 208px, #f3c08500 214px),
    radial-gradient(ellipse 13% 18% at 0% 0%, #cfd6a6, #cfd6a600),
    radial-gradient(ellipse 16% 10% at 17% 29%, #f8b88eb3, #f8b88e00),
    radial-gradient(ellipse 7% 15% at 0% 40%, #d99bd0bf, #d99bd000),
    radial-gradient(ellipse 22% 13% at 80% 44%, #f6aa92e6, #f6aa9266 55%, #f6aa9200),
    #f3c085;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%);
          mask-image: linear-gradient(#000 55%, transparent 100%);
}
body.ch-accueil .hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #fcf7ee35, transparent 75%), linear-gradient(0deg, var(--ch-papier) 0%, #f8f7f4a8 14%, transparent 40%);
}
/* le voile orange de Maël, à 3,5 % (le fichier est déjà chargé par la page : cartes des offres, couvertures) */
body.ch-accueil .hero-shade::after {
  content: ""; position: absolute; inset: 0; opacity: .035; mix-blend-mode: soft-light;
  background: url(../../../images/fonds/fond-orange-aube.jpg) center / cover;
}
body.ch-accueil .hero h1 {
  max-width: 820px; font: 550 64px/1.03 var(--ch-switzer); letter-spacing: -.055em; color: var(--ch-encre);
  animation: ch-entree 1s var(--ch-courbe) both;
}
body.ch-accueil .hero-subrow {
  display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-top: 32px;
  animation: ch-entree 1s .14s var(--ch-courbe) both;
}
body.ch-accueil .hero-subrow > p { max-width: 700px; font-size: 16px; line-height: 1.5; color: #3e4247; }
body.ch-accueil .hero-actions { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
@keyframes ch-entree { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ch-change { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ aperçu de l'espace (illustration animée, P-86, P-95) */
body.ch-accueil .demo-stage { position: relative; display: flow-root; isolation: isolate; }
body.ch-accueil .demo-glass {
  position: relative; display: block; overflow: hidden; isolation: isolate; container-type: inline-size;
  width: calc(100% - 44px); max-width: 1240px; margin: 52px auto 0; padding: 0; aspect-ratio: 2;
  border: 0; border-radius: 22px 22px 0 0; background: transparent; scroll-margin-top: 30px;
}

/* Illustrations de l'espace (product-demos.css de Maël) : unités de conteneur, nettes à toutes les tailles. */
body.ch-accueil .pd {
  --pd-encre: #222426; --pd-gris: #747976; --pd-filet: #e8eae6;
  position: relative; width: 100%; height: 100%; aspect-ratio: 1.28; color: var(--pd-encre);
  font-family: var(--ch-switzer); font-weight: 400; line-height: 1.5; text-align: left;
}
body.ch-accueil .pd * { box-sizing: border-box; }
body.ch-accueil .pd-window {
  position: absolute; inset: 6.5% 5.5% 0; overflow: hidden; border: 5px solid #ffffff6b; border-radius: 16px 16px 0 0;
  background: #fcfcfa; box-shadow: 0 8px 26px #172f4929;
}
body.ch-accueil .pd-ui { position: relative; display: flex; width: 100%; height: 100%; font-size: 2.25cqw; }
body.ch-accueil .pd-main { flex: 1; min-width: 0; background: #fafbf9; }
body.ch-accueil .pd-topbar {
  display: flex; align-items: center; justify-content: space-between; height: 9cqw; padding: 0 4cqw;
  border-bottom: 1px solid var(--pd-filet); background: #fff; font-size: 1.9cqw; color: var(--pd-gris);
}
body.ch-accueil .pd-logo { width: 12cqw; height: auto; max-height: 6cqw; object-fit: contain; object-position: left; }
body.ch-accueil .pd-top-label { font-size: 1.8cqw; }
body.ch-accueil .pd-topbar i { margin: 0 1.5cqw; font-style: normal; color: #a4aba8; }
body.ch-accueil .pd-topbar b { font-weight: 500; color: var(--pd-encre); }
body.ch-accueil .pd-body { position: relative; padding: 3.7cqw 4cqw 2cqw; }
body.ch-accueil .pd-body :is(h3, h4, p) { margin: 0; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; color: inherit; }
body.ch-accueil .pd-heading h3 { font-size: 4cqw; letter-spacing: -.04em; }
body.ch-accueil .pd-heading p { margin-top: 1cqw; font-size: 2cqw; line-height: 1.5; color: var(--pd-gris); }
body.ch-accueil .pd-overline { display: block; margin-bottom: 1.4cqw; font-size: 1.6cqw; letter-spacing: .075em; text-transform: uppercase; color: #8f633f; }
body.ch-accueil .pd svg { width: 2.8cqw; height: 2.8cqw; flex-shrink: 0; vertical-align: middle; }
/* cartes « à la une » */
body.ch-accueil .pd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
body.ch-accueil .pd-card { overflow: hidden; border: 1px solid #dce2e4; border-radius: 1.7cqw; background: #fff; }
body.ch-accueil .pd-card > img { display: block; width: 100%; height: 16cqw; object-fit: cover; object-position: center 43%; }
body.ch-accueil .pd-card > div { padding: 2cqw; }
body.ch-accueil .pd-card h4 { min-height: 6.6cqw; margin: 1.3cqw 0 2.1cqw; font-size: 2.65cqw; line-height: 1.23; }
body.ch-accueil .pd-tag { display: inline-flex; align-items: center; gap: .45em; font-size: 1.6cqw; font-weight: 500; color: #617080; }
/* rubriques de la Bibliothèque */
body.ch-accueil .pd-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 3cqw; }
body.ch-accueil .pd-door { position: relative; min-height: 23cqw; padding: 2.5cqw; overflow: hidden; border: 1px solid #e0e4de; border-radius: 1.6cqw; background: #fff; }
body.ch-accueil .pd-door h4 { max-width: 65%; font-size: 2.5cqw; line-height: 1.14; letter-spacing: -.035em; }
body.ch-accueil .pd-door p { max-width: 57%; margin-top: 1.4cqw; font-size: 1.5cqw; line-height: 1.55; color: var(--pd-gris); }
body.ch-accueil .pd-door > span {
  position: absolute; bottom: 1.8cqw; left: 2.5cqw; right: 2.5cqw; display: flex; justify-content: space-between;
  padding-top: 1.1cqw; border-top: 1px solid var(--pd-filet); font-size: 1.5cqw;
}
body.ch-accueil .pd-book {
  position: absolute; top: 3.5cqw; right: 2.8cqw; width: 9cqw; height: 12.5cqw; padding: 1.2cqw .9cqw;
  border-radius: .4cqw; background: center / cover; box-shadow: .5cqw .7cqw #293a5112; color: #fff; transform: rotate(-6deg);
}
body.ch-accueil .pd-book img { display: block; width: 4.3cqw; margin-bottom: 2cqw; }
body.ch-accueil .pd-book b { display: block; padding-right: .9cqw; font-size: 1.55cqw; font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
body.ch-accueil .pd-book-news { background-image: url(../../../images/fonds/fond-bleu-cyan-halo.jpg); }
body.ch-accueil .pd-book-methods { background-image: url(../../../images/fonds/fond-bleu-violet-voile.jpg); }
body.ch-accueil .pd-book-tools { top: 5cqw; height: 10.5cqw; background-image: url(../../../images/fonds/fond-orange-aube.jpg); transform: rotate(4deg); }
body.ch-accueil .pd-book-newsletter { background-image: url(../../../images/fonds/fond-turquoise-vert-aube.jpg); }
body.ch-accueil .pd[data-view="library"] .pd-doors { gap: 1.6cqw; margin-top: 2cqw; }
/* le kit reçu par e-mail */
body.ch-accueil .pd-prompt { margin-top: 2.8cqw; padding: 2.5cqw; border: 1px solid #e1e1d9; border-radius: 1.4cqw; background: #fffefa; }
body.ch-accueil .pd-prompt > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2cqw; font-size: 2cqw; }
body.ch-accueil .pd-prompt strong { font-weight: 500; }
body.ch-accueil .pd-copy { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.3cqw; border: 1px solid #d9dedc; border-radius: 1cqw; background: #fff; font-size: 1.8cqw; }
body.ch-accueil .pd-copy svg { width: 1em; height: 1em; margin-right: .35em; vertical-align: -.12em; }
body.ch-accueil .pd-prompt p { margin-top: 1cqw; font-size: 2.1cqw; line-height: 1.6; letter-spacing: 0; color: #616763; }
body.ch-accueil .pd-checklist { margin-top: 2.7cqw; }
body.ch-accueil .pd-checklist > div { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 0; font-size: 1.9cqw; }
body.ch-accueil .pd-checklist i {
  display: grid; place-items: center; flex-shrink: 0; width: 2.6cqw; height: 2.6cqw; border: 1.5px solid #c9cdc8;
  border-radius: 50%; background: transparent; font-size: 1.9cqw; font-style: normal;
}
body.ch-accueil .pd-checklist i svg { width: 62%; height: 62%; opacity: 0; transform: scale(.6); transition: opacity .24s, transform .32s cubic-bezier(.22, 1, .36, 1); }
/* un numéro d'Infra Brief */
body.ch-accueil .pd-brief-card { display: flex; max-height: 35cqw; margin-top: 3cqw; overflow: hidden; border: 1px solid #dce4df; border-radius: 1.6cqw; background: #fff; transition: margin .5s; }
body.ch-accueil .pd-body:not(.pd-reading) .pd-brief-card { max-height: 46cqw; }
body.ch-accueil .pd-brief-cover {
  display: flex; flex-direction: column; justify-content: space-between; width: 40%; min-height: 27cqw; padding: 3cqw 2.5cqw;
  background: url(../../../images/fonds/fond-turquoise-vert-aube.jpg) center / cover; color: #fff;
}
body.ch-accueil .pd-brief-cover strong { font-size: 4.7cqw; font-weight: 400; line-height: 1; letter-spacing: -.04em; }
body.ch-accueil .pd-body:not(.pd-reading) .pd-brief-cover { min-height: 36cqw; }
body.ch-accueil .pd-brief-cover > span { font-size: 1.2cqw; letter-spacing: .13em; text-transform: uppercase; }
body.ch-accueil .pd-brief-copy { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 3cqw; }
body.ch-accueil .pd-brief-copy h4 { margin: 2cqw 0 3cqw; font-size: 3.1cqw; }
body.ch-accueil .pd-brief-copy > span { font-size: 1.7cqw; color: #377965; }
/* l'aperçu large (accueil d'un membre), dans le cadre de verre de l'ouverture */
body.ch-accueil .demo-glass .pd-wide { aspect-ratio: 2; }
body.ch-accueil .demo-glass .pd-wide .pd-window {
  inset: 0; border: 6px solid #ffffff85; border-radius: 22px 22px 0 0; background-clip: padding-box; box-shadow: none;
  -webkit-mask-image: linear-gradient(#000 0%, #000 93%, #000a 97%, transparent 100%);
          mask-image: linear-gradient(#000 0%, #000 93%, #000a 97%, transparent 100%);
}
body.ch-accueil .pd-wide .pd-ui { font-size: 1.1cqw; }
body.ch-accueil .pd-sidebar { flex-shrink: 0; width: 17%; padding: 2.4cqw 1.2cqw 5cqw; border-right: 1px solid var(--pd-filet); background: #f0f2ee; }
body.ch-accueil .pd-sidebar .pd-logo { width: 9cqw; max-height: 5cqw; margin: .3cqw 1cqw 3cqw; }
body.ch-accueil .pd-nav > div {
  display: flex; align-items: center; gap: 1cqw; margin-bottom: .5cqw; padding: 1.15cqw .9cqw; border-radius: .8cqw;
  font-size: 1.15cqw; white-space: nowrap;
}
body.ch-accueil .pd-nav b { font-size: 1.6cqw; font-weight: 400; color: #68776d; }
body.ch-accueil .pd[data-view="home"] .pd-nav [data-cible="nav-home"],
body.ch-accueil .pd:is([data-view="library"], [data-view="guides"], [data-view="guide"]) .pd-nav [data-cible="nav-library"] { background: #e4e9e3; }
body.ch-accueil .pd-wide .pd-topbar { height: 5.1cqw; padding: 0 3.6cqw; font-size: 1.1cqw; }
body.ch-accueil .pd-wide .pd-body { max-width: 83cqw; padding: 2.5cqw 3.6cqw 5cqw; }
body.ch-accueil .pd-welcome {
  display: flex; align-items: center; justify-content: space-between; min-height: 12cqw; padding: 2cqw 3cqw;
  border-radius: 1.8cqw; background: url(../../../images/fonds/fond-sable-bleu-aube.jpg) center / cover; color: #fff;
}
body.ch-accueil .pd-welcome h3 { font-size: 3.7cqw; letter-spacing: -.045em; }
body.ch-accueil .pd-welcome > img { width: 7cqw; max-height: 8cqw; object-fit: contain; }
body.ch-accueil .pd-section-title { display: flex; align-items: center; justify-content: space-between; margin: 2cqw 0 1.2cqw; font-size: 1.9cqw; }
body.ch-accueil .pd-section-title > span { display: inline-flex; align-items: center; gap: .3em; font-size: 1cqw; color: var(--pd-gris); }
body.ch-accueil .pd-wide .pd-cards { gap: 1.8cqw; }
body.ch-accueil .pd-wide .pd-card > img { height: 11cqw; }
body.ch-accueil .pd-wide .pd-card > div { padding: 1.5cqw; }
body.ch-accueil .pd-wide .pd-card h4 { min-height: 0; margin: .6cqw 0 1cqw; font-size: 1.9cqw; }
body.ch-accueil .pd-wide .pd-tag { font-size: .95cqw; }
body.ch-accueil .pd-wide svg { width: 1.8cqw; height: 1.8cqw; }

/* ------------------------------------------------------------------ aperçus animés (P-95) : états, curseur, pauses */
/* Chaque aperçu porte ses états dans la page (data-view : la vue affichée) ; commun/scripts/pages/accueil.js les
   enchaîne comme les démonstrations de Maël (product-demos.js : mêmes vues, mêmes temps), sans rien écrire dans la page.
   Sans JavaScript ou sous « mouvement réduit » : la première vue, fixe. */
body.ch-accueil .hero-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; }
body.ch-accueil .hero-toile.est-prete { opacity: 1; }
body.ch-accueil .pd-vue { display: none; }
body.ch-accueil .pd[data-view="home"] .pd-vue[data-pour="home"], body.ch-accueil .pd[data-view="library"] .pd-vue[data-pour="library"],
body.ch-accueil .pd[data-view="guides"] .pd-vue[data-pour="guides"], body.ch-accueil .pd[data-view="guide"] .pd-vue[data-pour="guide"] { display: block; }
body.ch-accueil .pd-fil { display: none; }
body.ch-accueil .pd[data-view="home"] .pd-fil[data-pour~="home"], body.ch-accueil .pd[data-view="library"] .pd-fil[data-pour~="library"],
body.ch-accueil .pd[data-view="guides"] .pd-fil[data-pour~="guides"], body.ch-accueil .pd[data-view="guide"] .pd-fil[data-pour~="guide"] { display: inline; }
body.ch-accueil .pd-body.pd-change { animation: pd-entree .3s ease-out; }
@keyframes pd-entree { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* la rubrique « Guides & méthodes », puis le guide ouvert */
body.ch-accueil .pd-results { margin-top: 3.5cqw; }
body.ch-accueil .pd-cover {
  position: relative; display: flex; align-items: flex-end; height: 24cqw; margin: -3.7cqw -4cqw 0; padding: 3cqw 4cqw;
  background-size: cover; background-position: center 45%;
}
body.ch-accueil .pd-cover-solaire { background-image: url(../../../images/photos/photo-solaire-centrale-wisconsin.jpg); }
body.ch-accueil .pd-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, #182d3cc7); }
body.ch-accueil .pd-cover > span { position: relative; color: #fff; }
body.ch-accueil .pd-cover .pd-tag { font-size: 1.8cqw; color: #fff; }
body.ch-accueil .pd-cover h3 { margin-top: 1cqw; font-size: 3.5cqw; color: #fff; }
body.ch-accueil .pd-guide-body > p { margin: 2.5cqw 0; font-size: 1.9cqw; line-height: 1.5; color: var(--pd-gris); }
body.ch-accueil .pd-method-row { display: flex; align-items: center; gap: 2cqw; padding: 1.5cqw 0; border-bottom: 1px solid var(--pd-filet); font-size: 2cqw; }
body.ch-accueil .pd-method-row b { font-size: 1.6cqw; font-weight: 400; color: #5a77b2; }
body.ch-accueil .pd-action {
  display: flex; align-items: center; justify-content: space-between; margin-top: 2.7cqw; padding: 1.6cqw 2cqw;
  border-radius: 1.1cqw; background: #24292d; color: #fff; font-size: 2cqw;
}
body.ch-accueil .pd-wide .pd-door { min-height: 15.3cqw; padding: 1.8cqw; }
body.ch-accueil .pd-wide .pd-door h4 { font-size: 1.8cqw; }
body.ch-accueil .pd-wide .pd-door p { max-width: 54%; margin-top: .8cqw; font-size: 1.1cqw; }
body.ch-accueil .pd-wide .pd-door > span { bottom: 1.1cqw; left: 1.8cqw; right: 1.8cqw; padding-top: .6cqw; font-size: 1cqw; }
body.ch-accueil .pd-wide .pd-book { top: 1.6cqw; right: 3cqw; width: 7cqw; height: 9.5cqw; padding: 1cqw .8cqw; }
body.ch-accueil .pd-wide .pd-book img { width: 3.2cqw; margin-bottom: 1.3cqw; }
body.ch-accueil .pd-wide .pd-book b { padding-right: .7cqw; font-size: 1.26cqw; }
body.ch-accueil .pd-wide .pd-book-tools { top: 2.8cqw; height: 8cqw; }
body.ch-accueil .pd-wide .pd-heading h3 { font-size: 2.8cqw; }
body.ch-accueil .pd-wide .pd-heading p { margin-top: .5cqw; font-size: 1.25cqw; }
body.ch-accueil .pd-wide .pd-overline { margin-bottom: .8cqw; font-size: 1cqw; }
body.ch-accueil .pd-wide .pd-results { margin-top: 2cqw; }
body.ch-accueil .pd-wide .pd-cover { height: 20cqw; margin: -2.5cqw -3.6cqw 0; padding: 2cqw 3.6cqw; }
body.ch-accueil .pd-wide .pd-cover h3 { font-size: 2.8cqw; }
body.ch-accueil .pd-wide .pd-cover .pd-tag { font-size: 1.1cqw; }
body.ch-accueil .pd-wide .pd-guide-body > p { margin: 1.6cqw 0; font-size: 1.2cqw; }
body.ch-accueil .pd-wide .pd-method-row { padding: 1cqw 0; font-size: 1.25cqw; }
body.ch-accueil .pd-wide .pd-method-row b { font-size: 1cqw; }
body.ch-accueil .pd-wide .pd-action { margin-top: 1.4cqw; padding: 1cqw 1.5cqw; font-size: 1.2cqw; }
/* le kit : le prompt copié, puis les coches */
body.ch-accueil .pd-copie-ok { display: none; align-items: center; }
body.ch-accueil .pd-copie .pd-copier { display: none; }
body.ch-accueil .pd-copie .pd-copie-ok { display: inline-flex; }
body.ch-accueil .pd-checklist > div { transition: color .3s; }
body.ch-accueil .pd-checklist i { transition: background .25s, border-color .25s, color .25s; }
body.ch-accueil .pd-checklist .pd-done i { border-color: #1f8a63; background: #1f8a63; color: #fff; }
body.ch-accueil .pd-checklist .pd-done i svg { opacity: 1; transform: none; }
/* Infra Brief : le numéro s'ouvre, le geste utile se déplie, puis l'action à essayer */
body.ch-accueil .pd-brief-reading {
  max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transform: translateY(3cqw);
  transition: opacity .6s, transform .6s, max-height .8s cubic-bezier(.4, 0, .2, 1), margin .8s;
}
body.ch-accueil .pd-reading .pd-brief-reading { max-height: 60cqw; margin-top: 3cqw; opacity: 1; transform: none; }
body.ch-accueil .pd-reading .pd-brief-card { margin-top: 1.8cqw; }
body.ch-accueil .pd-reading-more .pd-brief-card {
  max-height: 0; margin-top: 0; border-width: 0; opacity: 0; pointer-events: none;
  transition: max-height .9s cubic-bezier(.4, 0, .2, 1), margin .9s, opacity .5s;
}
body.ch-accueil .pd-brief-reading h4 { font-size: 2.9cqw; }
body.ch-accueil .pd-brief-reading p { margin-top: 1.4cqw; font-size: 2.1cqw; line-height: 1.6; color: var(--pd-gris); }
body.ch-accueil .pd-brief-next { margin-top: 3cqw; padding-top: 2.3cqw; border-top: 1px solid var(--pd-filet); }
body.ch-accueil .pd-reading:not(.pd-reading-more) .pd-brief-next { display: none; }
/* le curseur (celui de Maël) et son clic */
body.ch-accueil .pd-pointer {
  position: absolute; left: 72%; top: 78%; z-index: 5; width: 5.4cqw; height: 5.4cqw; color: #446dcc; opacity: 0;
  pointer-events: none; filter: drop-shadow(0 2px 2px #21376326); transform: translate(-14%, -12%);
  transition: left .8s cubic-bezier(.4, 0, .16, 1), top .8s cubic-bezier(.4, 0, .16, 1), opacity .25s;
}
body.ch-accueil .pd-pointer > svg { width: 100%; height: 100%; transform: rotate(var(--lean, 0deg)); transform-origin: 20% 15%; transition: transform .25s; }
body.ch-accueil .pd-pointer.is-visible { opacity: 1; }
body.ch-accueil .pd-pointer.is-clicked > svg { animation: pd-press .32s ease; }
body.ch-accueil .pd-pointer > i {
  position: absolute; left: 14%; top: 12%; width: 2cqw; height: 2cqw; border: 2px solid #446dcc5c; border-radius: 50%;
  opacity: 0; transform: translate(-50%, -50%);
}
body.ch-accueil .pd-pointer.is-clicked > i { animation: pd-ring .65s ease-out; }
body.ch-accueil .pd-wide .pd-pointer { width: 3.2cqw; height: 3.2cqw; }
@keyframes pd-press { 50% { transform: scale(.86); } }
@keyframes pd-ring { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); } }
/* Les boutons pause : dans l'ouverture, le petit bouton rond de la barre de l'aperçu (.motion-toggle chez Maël), qui
   arrête aussi le fond ; sous chaque illustration d'onglet, son bouton discret « Mettre en pause » (.subtle-button).
   Cachés (attribut hidden) tant que rien ne bouge. */
body.ch-accueil .pause-animations {
  position: absolute; top: calc(6px + 2.55cqw); right: calc(6px + 3.6cqw); z-index: 6; display: grid; place-items: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%; background: #f3f3f0; color: var(--ch-encre); font-size: 12px;
  line-height: 1; transform: translateY(-50%);
}
body.ch-accueil .pause-animations:hover { background: #e8e8e3; }
body.ch-accueil .pause-animations svg { display: block; width: 10px; height: 10px; }   /* dessinés : un caractère ▶ peut sortir en émoji sur un téléphone */
body.ch-accueil .feature-media { display: flex; flex-direction: column; align-self: center; width: 100%; min-width: 0; }   /* largeur posée : centré dans la colonne du mobile, il se réduirait à rien (l'illustration mesure sa largeur sur son conteneur) */
body.ch-accueil .pause-apercu { position: relative; align-self: flex-end; padding: 10px 0 2px; font-size: 11px; color: var(--ch-gris); }   /* un ajout (la page de Maël n'a pas de pause) ; son gris des petits textes, #797b7c, donnerait 4,1 pour 1 ; ici 5,12 */
body.ch-accueil .pause-apercu:hover { color: var(--ch-encre); }
body.ch-accueil :is(.pause-animations, .pause-apercu)[hidden] { display: none; }
body.ch-accueil .lecture-symbole, body.ch-accueil .lecture-texte, body.ch-accueil .est-en-pause .pause-symbole, body.ch-accueil .est-en-pause .pause-texte { display: none; }
body.ch-accueil .est-en-pause .lecture-symbole, body.ch-accueil .est-en-pause .lecture-texte { display: inline; }
@media (max-width: 600px) {
  body.ch-accueil .pd-wide .pd-door { min-height: 24cqw; padding: 2cqw; }
  body.ch-accueil .pd-wide .pd-door h4 { font-size: 3cqw; }
  body.ch-accueil .pd-wide .pd-door p { max-width: 65%; font-size: 2.2cqw; }
  body.ch-accueil .pd-wide .pd-door > span { bottom: 1.6cqw; font-size: 2.3cqw; }
  body.ch-accueil .pd-wide .pd-book { top: 4cqw; right: 2cqw; width: 7cqw; }
  body.ch-accueil .pd-wide .pd-book b { padding-right: 1.4cqw; font-size: 2.55cqw; }
  body.ch-accueil .pd-wide .pd-heading h3 { font-size: 4.5cqw; }
  body.ch-accueil .pd-wide .pd-heading p { font-size: 2.8cqw; }
  body.ch-accueil .pd-wide .pd-overline { font-size: 2cqw; }
  body.ch-accueil .pd-wide .pd-cover { height: 27cqw; margin: -3cqw -3cqw 0; padding: 3cqw; }
  body.ch-accueil .pd-wide .pd-cover h3 { font-size: 4.5cqw; }
  body.ch-accueil .pd-wide .pd-cover .pd-tag { font-size: 2.5cqw; }
  body.ch-accueil .pd-wide .pd-guide-body > p { margin: 2cqw 0; font-size: 2.8cqw; }
  body.ch-accueil .pd-wide .pd-method-row { padding: 2cqw 0; font-size: 2.8cqw; }
  body.ch-accueil .pd-wide .pd-method-row b { font-size: 2.3cqw; }
  body.ch-accueil .pd-wide .pd-action { margin-top: 2cqw; padding: 2cqw; font-size: 2.8cqw; }
  body.ch-accueil .pd-wide .pd-pointer { width: 6cqw; height: 6cqw; }
  body.ch-accueil .pause-animations { top: calc(4px + 4cqw); right: calc(4px + 3cqw); }
}
@media (prefers-reduced-motion: reduce) { body.ch-accueil .pd-pointer, body.ch-accueil .hero-toile { display: none; } }   /* réglage posé en cours de visite : l'image de repli revient */

/* ------------------------------------------------------------------ volets (sections) */
body.ch-accueil .volet { padding-top: 124px; padding-bottom: 20px; }
body.ch-accueil .intro-section { padding-top: 70px; }
body.ch-accueil .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.ch-accueil .showcase {
  position: relative; display: flex; align-items: center; justify-content: center; height: 400px; margin-bottom: 32px;
  overflow: hidden; border-radius: 18px;
}
body.ch-accueil .showcase-blue { background: url(../../../images/fonds/fond-bleu-violet-voile.jpg) center / cover; }
body.ch-accueil .showcase-peach { background: url(../../../images/fonds/fond-corail-lilas-aube.jpg) center / cover; }
body.ch-accueil .showcase :is(.mini-document, .toolkit-stack) { z-index: 1; }
body.ch-accueil .mini-document {
  width: 72%; padding: 24px; border: 1px solid #fff8; border-radius: 11px; background: #fffffff0;
  box-shadow: 0 14px 30px #27343e15; transform: rotate(-3deg); transition: transform .6s var(--ch-courbe);
}
body.ch-accueil .showcase:hover .mini-document { transform: rotate(0) translateY(-6px); }
body.ch-accueil .document-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 9px; letter-spacing: .08em; color: #777e8b; }
body.ch-accueil .document-top > span { text-transform: uppercase; }
body.ch-accueil .mini-document h3 { font-size: 26px; letter-spacing: -.04em; }
body.ch-accueil .mini-document > p { margin: 10px 0 20px; font-size: 10px; }
body.ch-accueil .document-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #e3e5e7; font-size: 11px; }
body.ch-accueil .document-line > span { font-size: 9px; color: #a2a2a2; }
body.ch-accueil .document-line svg { width: 14px; margin-left: auto; color: var(--ch-vert); }
/* la barre de progression tournait sans fin chez Maël : ici, figée remplie (P-87) */
body.ch-accueil .document-progress { height: 2px; margin-top: 12px; overflow: hidden; background: #e5e8ed; }
body.ch-accueil .document-progress i { display: block; width: 100%; height: 100%; background: #6e88b6; }
body.ch-accueil .ecto-fixe { height: auto; aspect-ratio: 320 / 284; object-fit: contain; }
/* les ECTO flottaient sans fin chez Maël : ici, fixes (P-87) */
body.ch-accueil .showcase-ecto { position: absolute; right: 20px; bottom: 25px; z-index: 2; width: 96px; filter: drop-shadow(0 5px 5px #533f1615); }
body.ch-accueil .toolkit-stack { position: relative; width: 72%; }
body.ch-accueil .toolkit-back {
  position: absolute; inset: -13px 5px 12px -5px; border: 1px solid #fff9; border-radius: 12px; background: #ffffff69; transform: rotate(-7deg);
}
body.ch-accueil .toolkit-paper {
  position: relative; padding: 25px; border-radius: 12px; background: #fffdf8f5; box-shadow: 0 14px 30px #633e3e10;
  transform: rotate(3deg); transition: transform .6s var(--ch-courbe);
}
body.ch-accueil .showcase:hover .toolkit-paper { transform: rotate(0) translateY(-5px); }
body.ch-accueil .toolkit-paper h3 { margin-bottom: 22px; font-size: 27px; line-height: 1.13; }
body.ch-accueil .toolkit-file { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #e7e1db; }
body.ch-accueil .toolkit-file > span { font-size: 9px; color: #aaa39b; }
body.ch-accueil .toolkit-file strong { font-size: 12px; font-weight: 400; }
body.ch-accueil .toolkit-file small { display: block; margin-top: 3px; font-size: 10px; color: #888078; }
body.ch-accueil .toolkit-file > svg { width: 18px; margin-left: auto; color: #aa7651; }
body.ch-accueil .card-title { max-width: 340px; margin-bottom: 16px; font-size: 24px; line-height: 1.3; }
body.ch-accueil .card-copy { max-width: 520px; min-height: 76px; margin-bottom: 23px; font-size: 15px; line-height: 1.65; }

/* ------------------------------------------------------------------ onglets : Bibliothèque, Kits, Infra Brief */
body.ch-accueil .features { padding-top: 140px; }
body.ch-accueil .feature-tabs {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0;
  width: 100%; margin-bottom: 36px; border-bottom: 1px solid var(--ch-filet);
}
/* #737579 chez Maël : 4,31 pour 1 sur le papier ; le gris de la charte fait 5,12 (principe 14) */
body.ch-accueil .feature-tabs > [role="tab"] {
  position: relative; min-width: 0; padding: 20px 0 22px; font-size: 19px; text-align: left; white-space: nowrap; color: var(--ch-gris);
}
body.ch-accueil .feature-tabs > [aria-selected="true"] { color: var(--ch-orange-texte); }
/* la barre de l'onglet choisi : fixe (la dernière feuille de Maël l'arrête aussi) */
body.ch-accueil .tab-progress {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--ch-orange);
  transform: scaleX(0); transform-origin: left;
}
body.ch-accueil .feature-tabs > [aria-selected="true"] .tab-progress { transform: scaleX(1); }
body.ch-accueil .feature-panel { position: relative; display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 64px; min-height: 470px; }
/* les ancres de l'ancienne Bibliothèque (#guides, #carrousels) : hors de la grille, en tête du panneau */
body.ch-accueil .ancre { position: absolute; top: 0; left: 0; }
body.ch-accueil .feature-nom { display: none; }
body.ch-accueil .feature-visual {
  position: relative; display: block; overflow: hidden; isolation: isolate; container-type: inline-size;
  width: 100%; aspect-ratio: 1.28; align-self: center; padding: 0; border-radius: 20px; background: center / cover;
}
body.ch-accueil .visuel-bibliotheque { background-image: url(../../../images/fonds/fond-bleu-violet-voile.jpg); }
body.ch-accueil .visuel-kits { background-image: url(../../../images/fonds/fond-sable-bleu-aube.jpg); }
body.ch-accueil .visuel-infra-brief { background-image: url(../../../images/fonds/fond-turquoise-vert-aube.jpg); }
body.ch-accueil .feature-copy h3 { margin: 0 0 24px; font-size: 36px; line-height: 1.13; letter-spacing: -.045em; }
body.ch-accueil .feature-copy p { font-size: 16px; line-height: 1.75; }
body.ch-accueil .feature-copy.ch-change { animation: ch-change .6s var(--ch-courbe); }

/* ------------------------------------------------------------------ quatre étapes */
body.ch-accueil .steps-card { display: grid; grid-template-columns: 54% 46%; gap: 0; padding: 24px; border-radius: 20px; background: #fff; }
body.ch-accueil .steps-visual { position: relative; height: 450px; overflow: hidden; border-radius: 12px; }
body.ch-accueil .steps-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .4s; }
body.ch-accueil .steps-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #24435533, transparent); }
body.ch-accueil .step-slip {
  position: absolute; bottom: 25px; left: 25px; right: 25px; z-index: 1; min-height: 112px; padding: 24px;
  border-radius: 10px; background: #fffffff0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* un titre (h3 chez Maël) dans une illustration cachée des lecteurs d'écran : même apparence que les h3 de la charpente */
body.ch-accueil .step-slip-titre { display: block; max-width: 320px; font-size: 25px; font-weight: 400; line-height: 1.3; letter-spacing: -.035em; }
body.ch-accueil .step-slip .ecto-fixe { position: absolute; top: 26px; right: 18px; width: 68px; }
body.ch-accueil .steps-copy { display: flex; flex-direction: column; padding: 20px 24px 20px 40px; }
body.ch-accueil .steps-list { display: grid; gap: 14px; }
/* #a1a2a1 chez Maël : 2,56 pour 1 sur le blanc ; ici 4,74 (principe 14) */
body.ch-accueil .steps-list button {
  padding: 0; border-radius: 5px; font-size: 24px; line-height: 1.3; letter-spacing: -.035em; text-align: left;
  color: #737373; transition: color .25s, background .25s;
}
body.ch-accueil .steps-list button > span { display: inline-block; width: 28px; font-size: 10px; letter-spacing: 0; vertical-align: middle; }
body.ch-accueil .steps-list button:hover { color: var(--ch-orange-texte); }
body.ch-accueil .steps-list button[aria-pressed="true"] { color: var(--ch-encre); }
body.ch-accueil .steps-list button[aria-pressed="true"] > span { color: var(--ch-orange-texte); }
body.ch-accueil .steps-textes { margin-top: auto; padding-top: 34px; }
body.ch-accueil .step-texte { font-size: 14px; line-height: 1.6; }
body.ch-accueil .step-n { font-weight: 400; color: var(--ch-encre); }

/* ------------------------------------------------------------------ nos portes (section des offres, P-81) */
body.ch-accueil .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 28px; }
body.ch-accueil .price-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border: 1px solid #e2e2dc; border-radius: 18px; background: #fff; box-shadow: none;
}
body.ch-accueil .price-card.pro { border-color: #b8bdc6; }
/* le liseré argenté tournait sans fin chez Maël : ici, fixe (P-87) */
body.ch-accueil .price-card.pro::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1px; border-radius: inherit;
  background: conic-gradient(from 0deg, #d8dde4, #8792a2, #fafcfe, #929baa, #d8dde4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
body.ch-accueil .plan-banner { position: relative; height: 150px; background: url(../../../images/fonds/fond-orange-aube.jpg) center / cover; }
body.ch-accueil .pro .plan-banner { background-image: url(../../../images/fonds/fond-sable-bleu-aube.jpg); }
body.ch-accueil .plan-tag {
  position: absolute; top: 24px; left: 26px; padding: 7px 14px; border-radius: 30px; background: #ffffffeb;
  font-family: var(--ch-switzer); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ch-encre);
}
body.ch-accueil .plan-stamp { position: absolute; top: 50%; right: 23px; width: 132px; height: 132px; transform: translateY(-50%); }
/* le tampon tournait au survol chez Maël : ici, fixe (P-87) */
body.ch-accueil .plan-ring { width: 100%; height: 100%; }
body.ch-accueil .plan-ring text { font-family: var(--ch-switzer); font-size: 9px; font-weight: 500; letter-spacing: 1px; fill: #713917; }
body.ch-accueil .pro .plan-ring text { fill: #435369; }
body.ch-accueil .plan-ecto { position: absolute; top: 50%; left: 50%; width: 67px; height: auto; filter: drop-shadow(0 7px 6px #57331920); transform: translate(-50%, -50%); transition: filter .3s; }
/* au survol et au focus, ECTO change de pose et son ombre s'accentue, comme chez Maël (qui change l'image par script) :
   ici, deux images et aucune ligne de script ; aucun mouvement */
body.ch-accueil .plan-ecto-actif { visibility: hidden; }
body.ch-accueil .price-card:is(:hover, :focus-within) .plan-ecto-repos { visibility: hidden; }
body.ch-accueil .price-card:is(:hover, :focus-within) .plan-ecto-actif { visibility: visible; }
body.ch-accueil .price-card:is(:hover, :focus-within) .plan-ecto { filter: drop-shadow(0 10px 8px #57331938); }
body.ch-accueil .plan-content { display: flex; flex: 1; flex-direction: column; padding: 30px 32px 34px; }
body.ch-accueil .plan-content h3 { margin: 0 0 12px; font-size: 30px; letter-spacing: -.04em; }
/* 50 px chez Maël (deux lignes) ; nos textes publiés en font trois : 75 px, pour que les deux cartes restent alignées */
body.ch-accueil .plan-content > p:not(.billing-note, .note-ecrire) { max-width: 420px; min-height: 75px; font-size: 15px; line-height: 1.65; }
body.ch-accueil .plan-choice { display: flex; align-items: center; min-height: 48px; margin-top: 18px; }
body.ch-accueil .price { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; }
/* Oracle chez Maël → Switzer 550 (P-85) ; des mots et non des prix (DEC-99) : un corps plus petit, sur une ligne */
body.ch-accueil .price > strong { font: 550 56px/1.1 var(--ch-switzer); letter-spacing: -.05em; color: var(--ch-encre); }
body.ch-accueil .price-texte > strong { font-size: 40px; }
body.ch-accueil .plan-content .billing-note { min-height: 22px; margin-top: 12px; font-size: 13px; }
body.ch-accueil .plan-content .check-list { flex: 1; gap: 14px; margin: 26px 0 32px; font-size: 14px; }
body.ch-accueil .plan-content .button { align-self: stretch; justify-content: space-between; margin-top: 0; padding-inline: 18px; font-size: 14px; }

/* ------------------------------------------------------------------ points de rupture (ceux de Maël) */
@media (min-width: 1440px) {
  body.ch-accueil .volet:not(.intro-section) { padding-top: 140px; }
  body.ch-accueil .showcase { height: 425px; }
}
@media (max-width: 1100px) {
  body.ch-accueil .hero-subrow { align-items: flex-start; }
  body.ch-accueil .hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }
  body.ch-accueil .steps-copy { padding-left: 28px; }
  body.ch-accueil .steps-list button { font-size: 21px; }
  body.ch-accueil .card-copy { min-height: 100px; }
}
@media (max-width: 1000px) {
  body.ch-accueil .feature-panel { gap: 36px; }
  body.ch-accueil .feature-copy h3 { font-size: 32px; }
  body.ch-accueil .feature-copy p { font-size: 15px; }
}
@media (max-width: 809px) {
  body.ch-accueil .hero { padding-top: 126px; }
  body.ch-accueil .hero h1 { max-width: 650px; font-size: 54px; }
  body.ch-accueil .hero-subrow { display: block; }
  body.ch-accueil .hero-actions { flex-direction: row; align-items: center; margin-top: 25px; }
  body.ch-accueil .demo-glass { width: calc(100% - 26px); margin-top: 38px; }
  body.ch-accueil .volet:not(.intro-section) { padding-top: 90px; }
  body.ch-accueil .showcase { height: 330px; }
  body.ch-accueil .mini-document { width: 80%; padding: 18px; }
  body.ch-accueil .mini-document h3 { font-size: 21px; }
  body.ch-accueil .document-line { font-size: 9px; }
  body.ch-accueil .showcase-ecto { right: 10px; bottom: 10px; width: 70px; }
  body.ch-accueil .toolkit-stack { width: 80%; }
  body.ch-accueil .toolkit-paper { padding: 19px; }
  body.ch-accueil .toolkit-paper h3 { margin-bottom: 18px; font-size: 22px; }
  body.ch-accueil .toolkit-file { padding: 10px 0; }
  body.ch-accueil .toolkit-file strong { font-size: 11px; }
  body.ch-accueil .toolkit-file small { font-size: 9px; }
  body.ch-accueil .card-title { font-size: 23px; }
  body.ch-accueil .card-copy { font-size: 14px; }
  body.ch-accueil .feature-tabs > [role="tab"] { font-size: 16px; }
  body.ch-accueil .feature-panel { grid-template-columns: 1fr 1fr; gap: 28px; }
  body.ch-accueil .feature-copy h3 { font-size: 28px; }
  body.ch-accueil .feature-copy p { font-size: 14px; }
  body.ch-accueil .feature-copy .check-list { font-size: 12px; }
  body.ch-accueil .steps-card { padding: 16px; }
  body.ch-accueil .steps-visual { height: 390px; }
  body.ch-accueil .steps-copy { padding: 15px 8px 15px 24px; }
  body.ch-accueil .steps-list button { font-size: 18px; }
  body.ch-accueil .steps-list button > span { width: 21px; }
  body.ch-accueil .step-texte { font-size: 12px; }
  body.ch-accueil .step-slip { bottom: 16px; left: 16px; right: 16px; padding: 18px; }
  body.ch-accueil .step-slip-titre { max-width: 170px; font-size: 20px; }
  body.ch-accueil .step-slip .ecto-fixe { top: 43px; right: 12px; width: 45px; }
  body.ch-accueil .plan-content { padding: 25px; }
  body.ch-accueil .plan-content h3 { font-size: 27px; }
  body.ch-accueil .plan-content > p:not(.billing-note, .note-ecrire) { min-height: 70px; font-size: 14px; }
  body.ch-accueil .plan-stamp { right: 12px; width: 118px; height: 118px; }
  body.ch-accueil .plan-banner { height: 138px; }
  body.ch-accueil .plan-content .check-list { font-size: 13px; }
  body.ch-accueil .price > strong { font-size: 48px; }
  body.ch-accueil .price-texte > strong { font-size: 34px; }
}
@media (max-width: 600px) {
  body.ch-accueil .hero { padding-top: 117px; }
  body.ch-accueil .hero h1 { font-size: 40px; line-height: 1.06; }
  body.ch-accueil .hero-subrow { margin-top: 25px; }
  body.ch-accueil .hero-subrow > p { font-size: 14px; line-height: 1.65; }
  body.ch-accueil .desktop-break { display: none; }
  body.ch-accueil .hero-actions { gap: 18px; }
  body.ch-accueil .hero-gradient { background: radial-gradient(ellipse 45% 16% at 100% 45%, #f6aa92d9, #f6aa9200), #f3c085; }
  body.ch-accueil .demo-glass { width: 100%; margin: 0; aspect-ratio: 1.16; }
  body.ch-accueil .demo-glass .pd-wide { aspect-ratio: 1.16; }
  body.ch-accueil .demo-glass .pd-wide .pd-window { border-width: 4px; border-radius: 18px 18px 0 0; }
  body.ch-accueil .pd-window { border-width: 3px; }
  body.ch-accueil .pd-wide .pd-sidebar { width: 12%; padding-inline: 1cqw; }
  body.ch-accueil .pd-sidebar .pd-logo { width: 7cqw; margin: 1cqw 0 4cqw; }
  body.ch-accueil .pd-nav > div { justify-content: center; margin-bottom: 2cqw; padding: 2cqw 0; font-size: 0; }
  body.ch-accueil .pd-nav svg { width: 4cqw; height: 4cqw; }
  body.ch-accueil .pd-wide .pd-topbar { height: 8cqw; padding-inline: 3cqw; font-size: 2.3cqw; }
  body.ch-accueil .pd-wide .pd-body { max-width: none; padding: 3cqw 3cqw 5cqw; }
  body.ch-accueil .pd-wide .pd-welcome { min-height: 18cqw; }
  body.ch-accueil .pd-wide .pd-welcome h3 { font-size: 5.5cqw; }
  body.ch-accueil .pd-wide .pd-welcome > img { flex-shrink: 0; width: 12cqw; max-height: 14cqw; }
  body.ch-accueil .pd-wide .pd-section-title { margin: 3cqw 0 2cqw; font-size: 3.4cqw; }
  body.ch-accueil .pd-wide .pd-section-title > span { font-size: 2.2cqw; }
  body.ch-accueil .pd-wide .pd-card > img { height: 18cqw; }
  body.ch-accueil .pd-wide .pd-card h4 { font-size: 3cqw; }
  body.ch-accueil .pd-wide .pd-tag { font-size: 2.1cqw; }
  body.ch-accueil .pd:not(.pd-wide) { aspect-ratio: 1.1; }
  body.ch-accueil .volet { padding-bottom: 0; }
  body.ch-accueil .volet:not(.intro-section) { padding-top: 75px; }
  body.ch-accueil .intro-section { padding-top: 42px; }
  body.ch-accueil .two-up { grid-template-columns: 1fr; gap: 50px; }
  body.ch-accueil .showcase { height: 335px; margin-bottom: 23px; }
  body.ch-accueil .mini-document { width: 74%; }
  body.ch-accueil .mini-document h3 { font-size: 24px; }
  body.ch-accueil .mini-document > p { font-size: 9px; }
  body.ch-accueil .document-line { font-size: 10px; }
  body.ch-accueil .showcase-ecto { width: 80px; }
  body.ch-accueil .toolkit-stack { width: 77%; }
  body.ch-accueil .toolkit-paper { padding: 20px; }
  body.ch-accueil .toolkit-paper h3 { font-size: 25px; }
  body.ch-accueil .toolkit-file { padding: 11px 0; }
  body.ch-accueil .toolkit-file strong { font-size: 12px; }
  body.ch-accueil .toolkit-file small { font-size: 10px; }
  body.ch-accueil .card-title { font-size: 23px; }
  body.ch-accueil .card-copy { min-height: 0; margin-bottom: 20px; font-size: 14px; line-height: 1.65; }
  body.ch-accueil .feature-tabs { grid-template-columns: 1.15fr .7fr 1fr; margin-bottom: 24px; }
  body.ch-accueil .feature-tabs > [role="tab"] { padding: 17px 0; font-size: 13px; }
  body.ch-accueil .feature-panel { display: flex; flex-direction: column; align-items: stretch; gap: 30px; min-height: 0; }
  body.ch-accueil .feature-visual { aspect-ratio: 1.1; }
  body.ch-accueil .feature-copy h3 { margin-top: 0; font-size: 32px; }
  body.ch-accueil .feature-copy p { font-size: 15px; }
  body.ch-accueil .feature-copy .check-list { margin: 22px 0; font-size: 13px; }
  body.ch-accueil .steps-card { grid-template-columns: 1fr; padding: 13px; }
  body.ch-accueil .steps-visual { height: 295px; }
  body.ch-accueil .steps-copy { padding: 27px 12px 10px; }
  body.ch-accueil .steps-list { gap: 13px; }
  body.ch-accueil .steps-list button { font-size: 21px; }
  body.ch-accueil .steps-list button > span { width: 26px; }
  body.ch-accueil .steps-textes { padding-top: 24px; }
  body.ch-accueil .step-texte { font-size: 13px; }
  body.ch-accueil .step-slip { min-height: 100px; padding: 18px; }
  body.ch-accueil .step-slip-titre { max-width: 220px; font-size: 22px; }
  body.ch-accueil .step-slip .ecto-fixe { top: 35px; width: 55px; }
  body.ch-accueil .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  body.ch-accueil .plan-content { padding: 26px; }
  body.ch-accueil .plan-content > p:not(.billing-note, .note-ecrire) { min-height: 0; }
  body.ch-accueil .plan-banner { height: 140px; }
  body.ch-accueil .plan-tag { top: 23px; left: 24px; font-size: 13px; }
  body.ch-accueil .plan-stamp { right: 19px; width: 124px; height: 124px; }
  body.ch-accueil .plan-content h3 { font-size: 28px; }
  body.ch-accueil .plan-content .billing-note { font-size: 12px; }
  body.ch-accueil .plan-content .check-list { font-size: 13px; }
  body.ch-accueil .plan-content .button { font-size: 13px; }
  body.ch-accueil .plan-choice { display: none; }
  body.ch-accueil .price { margin-top: 25px; }
  body.ch-accueil .price > strong { font-size: 54px; }
  body.ch-accueil .price-texte > strong { font-size: 38px; }
}
@media (max-width: 380px) {
  body.ch-accueil .feature-tabs > [role="tab"] { font-size: 11px; }
}

/* ------------------------------------------------------------------ onglets et étapes : avec et sans JavaScript */
/* Sans script, les trois panneaux et les quatre textes se lisent l'un sous l'autre : les onglets et la liste des
   étapes, qui ne feraient rien, sont retirés ; chaque panneau et chaque texte porte alors son nom. Avec script
   (requête `scripting`, ou classe ch-js posée par charpente.js pour les navigateurs qui ne la connaissent pas), un
   seul panneau et un seul texte à la fois, choisis par commun/scripts/pages/accueil.js. */
@media (scripting: none) {
  body.ch-accueil .feature-tabs, body.ch-accueil .steps-list { display: none; }
  body.ch-accueil .feature-nom {
    display: block; margin-bottom: 18px; font-family: var(--ch-switzer); font-size: 11px; font-weight: 500;
    letter-spacing: .09em; text-transform: uppercase; color: var(--ch-orange-texte); grid-column: 1 / -1;
  }
  body.ch-accueil .feature-panel + .feature-panel { margin-top: 60px; }
  body.ch-accueil .steps-textes { margin-top: 0; padding-top: 0; }
  body.ch-accueil .step-texte + .step-texte { margin-top: 14px; }
}
@media (scripting: enabled) {
  body.ch-accueil .feature-panel:not(.est-actif), body.ch-accueil .step-texte:not(.est-actif), body.ch-accueil .step-n { display: none; }
}
.ch-js body.ch-accueil .feature-panel:not(.est-actif), .ch-js body.ch-accueil .step-texte:not(.est-actif), .ch-js body.ch-accueil .step-n { display: none; }