/* Infra Society, charpente commune du site vitrine (refonte, bloc B1) : jetons, en-tête, menu mobile, pied, et les
   composants que les pages refaites (B2 à B8) partagent.

   Le dessin est celui de Maël (v8/assets/site.css, identity.css, refinement.css), repris à la main, règle par règle.
   Trois règles d'écriture (refonte/blocs/B1-charpente.md, § 5.1) :
   - aucune règle nue : l'en-tête sous .site-header, le menu sous .mobile-menu, le pied sous .site-footer ; tout le
     reste sous body.refait, classe que chaque page refaite pose sur son corps. Sur une page dont le corps est ancien,
     cette feuille ne touche que l'en-tête, le menu et le pied ;
   - des jetons à nous (--ch-…) : jamais --orange ni --ease, que site.css et l'espace membre emploient avec d'autres
     valeurs ;
   - la charpente fixe elle-même toutes les propriétés héritées (police, taille, interligne, graisse, couleur, marges,
     rendu du texte) : elle rend à l'identique sur une page ancienne (qui charge site.css et ses règles nues), sur une
     page refaite (qui ne la charge plus) et sur le guide (qui ne l'a jamais chargée).
   Aucune ressource d'un tiers, aucune image chargée d'un fichier : les seules images sont écrites dans la feuille
   (`data:`, oreilles et coche), sans requête ; la seule police nouvelle, Switzer, est servie par nous (licence ITF Free
   Font License 2.0 jointe : commun/polices/LICENCE-Switzer-ITF-FFL.txt).
   Feuille partagée : gelée après la validation de B1 (principe 11 du plan). */

@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../polices/Switzer-Variable.woff2) format("woff2");
}

/* ------------------------------------------------------------------ jetons (valeurs du site de Maël, noms à nous) */
.skip-link, .site-header, .mobile-menu, .site-footer, body.refait {
  --ch-encre: #202125; --ch-papier: #f7f7f7; --ch-blanc: #fff; --ch-gris: #68696d; --ch-filet: #deded9;
  --ch-orange: #f76b1c; --ch-orange-texte: #b94c0d; --ch-bleu: #3d5ac7; --ch-vert: #117654;
  --ch-courbe: cubic-bezier(.22, .72, .24, 1); --ch-cadre: 1224px;
  --ch-texte: "Inter", Arial, sans-serif; --ch-switzer: "Switzer", "Inter", Arial, sans-serif;   /* titres : Inter (DEC-87) ; Switzer : en-tête, boutons, étiquettes, et à la place d'Oracle (P-85) */
  /* Bouton orange (DEC-97 ; variante A choisie par le fondateur, P-75) : le texte blanc de la maquette ne se lit pas
     (2,97 pour 1, il faut 4,5) ; texte encre sur l'orange de Maël (5,42) ; au survol, un orange plus clair (6,49 :
     l'orange plus sombre de la maquette tomberait à 4,32 sous l'encre). */
  --ch-bouton-fond: #f76b1c; --ch-bouton-texte: #202125; --ch-bouton-survol: #f98546;
}

/* ------------------------------------------------------------------ propriétés héritées, fixées par la charpente */
.site-header, .mobile-menu, .site-footer {
  box-sizing: border-box; color: var(--ch-encre); font-family: var(--ch-texte); font-size: 16px; font-weight: 400;
  font-style: normal; line-height: 1.5; letter-spacing: normal; word-spacing: normal; text-transform: none;
  text-align: left; text-indent: 0; text-wrap: wrap; white-space: normal; text-rendering: auto;
  -webkit-font-smoothing: antialiased; font-feature-settings: normal; font-variation-settings: normal; font-optical-sizing: none;
  list-style: none; overflow-wrap: normal; hyphens: manual;
}
:is(.site-header, .mobile-menu, .site-footer) *, :is(.site-header, .mobile-menu, .site-footer) *::before,
:is(.site-header, .mobile-menu, .site-footer) *::after { box-sizing: border-box; }
:is(.site-header, .mobile-menu, .site-footer) :is(h2, p, ul, li) { margin: 0; padding: 0; }
:is(.site-header, .mobile-menu, .site-footer) a { color: inherit; text-decoration: none; }
:is(.site-header, .mobile-menu, .site-footer) img { display: block; max-width: 100%; }
:is(.site-header, .mobile-menu, .site-footer) button { font: inherit; color: inherit; margin: 0; }

/* ------------------------------------------------------------------ cadre, lien d'évitement */
.site-header.wrap, .site-footer .wrap, body.refait .wrap { width: calc(100% - 60px); max-width: var(--ch-cadre); margin-inline: auto; }
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px; background: var(--ch-blanc); color: var(--ch-encre);
  font: 400 16px/1.5 var(--ch-texte); text-decoration: none; transform: translateY(-160%);
  box-sizing: border-box; letter-spacing: normal; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased;
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------------ boutons (en-tête, menu, pied, pages refaites) */
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; padding: 10px 18px;
  background: var(--ch-bouton-fond); color: var(--ch-bouton-texte); border: 1px solid transparent; border-radius: 3px;
  font-family: var(--ch-switzer); font-size: 14px; font-weight: 500; line-height: 1.5; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background .25s, transform .3s var(--ch-courbe), box-shadow .3s;
}
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button > svg { width: 17px; height: 20px; flex-shrink: 0; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button:hover { background: var(--ch-bouton-survol); box-shadow: 0 7px 18px #d45b1322; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button:active { transform: translateY(1px); }
/* le libellé écrit deux fois roule d'une ligne au survol ; le second est caché des lecteurs d'écran */
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-label { position: relative; display: block; height: 21px; overflow: hidden; line-height: 21px; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-label > span { display: block; transition: transform .4s var(--ch-courbe); }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button:hover .button-label > span { transform: translateY(-100%); }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-white { background: var(--ch-blanc); color: var(--ch-encre); }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-white:hover { background: #f6f3ec; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-outline { background: transparent; color: var(--ch-encre); border-color: #c6c6bf; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-outline:hover { background: var(--ch-blanc); border-color: #9f9f96; box-shadow: 0 7px 18px #d45b1322; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-glass { background: #ffffff38; color: var(--ch-encre); border-color: #20212518; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-glass:hover { background: #ffffff78; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-ink { background: var(--ch-encre); color: var(--ch-blanc); border-color: var(--ch-encre); }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .button-ink:hover { background: #3b3c40; box-shadow: none; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .compact { min-height: 36px; padding: 7px 14px; gap: 10px; border-radius: 30px; }
:is(.site-header, .mobile-menu, .site-footer, body.refait) .compact svg { display: none; }
:is(.site-footer, body.refait) .text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; }
:is(.site-footer, body.refait) .text-link svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .3s var(--ch-courbe); }

/* ------------------------------------------------------------------ en-tête */
/* Chez Maël, l'en-tête est posé par-dessus le haut de la page (position absolue) : c'est le cas sur une page refaite
   (body.refait). Sur une page dont le corps est encore ancien (panneaux saturés, texte blanc), il reste dans le flux
   jusqu'au bloc de cette page (P-41, P-83). Couleurs : « verre » par défaut (l'accueil, sur son fond dégradé) ;
   .header-plain sur les autres pages, comme chez Maël. */
.site-header {
  position: relative; z-index: 20; height: 64px; margin-top: 16px; display: flex; align-items: center;
  justify-content: space-between; background: transparent; font-family: var(--ch-switzer); font-size: 14px; line-height: 1.5;
}
body.refait > .site-header { position: absolute; top: 16px; left: 0; right: 0; margin-top: 0; }
.site-header .brand { display: block; flex-shrink: 0; line-height: 0; }
.site-header .brand img { width: 104px; height: 53px; object-fit: contain; }
.site-header nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; }
.site-header nav a { padding: 12px 17px; border-radius: 30px; white-space: nowrap; transition: background .3s; }
.site-header nav a:hover { background: #ffffff40; }
.site-header nav a[aria-current] { background: #ffffff70; }
.site-header.header-plain nav a:hover { background: #eeeeef; }
.site-header.header-plain nav a[aria-current] { background: #e8e8e9; }
.site-header .nav-actions { display: flex; align-items: center; gap: 24px; }
.site-header .nav-actions > a:not(.button) { white-space: nowrap; }
.site-header .menu-toggle { display: none; }

/* ------------------------------------------------------------------ menu mobile */
/* Sans JavaScript, il s'affiche dans le flux sous l'en-tête (la navigation reste lisible à toutes les largeurs) ;
   avec JavaScript, il est fermé jusqu'au bouton. `scripting` évite tout clignotement au chargement ; la classe ch-js,
   posée par charpente.js, sert aux navigateurs qui ne connaissent pas cette requête. */
.mobile-menu { display: block; position: static; padding: 8px 30px 24px; background: var(--ch-papier); font-family: var(--ch-texte); }
.mobile-menu > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--ch-filet); font-size: 28px; line-height: 1.5; }
.mobile-menu a.button { margin-top: 28px; padding: 12px 20px; font-size: 16px; text-align: center; }
@media (min-width: 601px) { .mobile-menu { display: none; } }
@media (scripting: enabled) { .mobile-menu:not(.est-ouvert) { display: none; } }
.ch-js .mobile-menu:not(.est-ouvert) { display: none; }
.mobile-menu.est-ouvert { display: block; position: fixed; inset: 80px 0 0; z-index: 30; padding: 30px; overflow: auto; }
body.menu-open { overflow: hidden; }
/* fondu de sortie de Maël (180 ms) : classe posée par charpente.js au clic d'un lien vers une autre page du site, jamais
   sous « mouvement réduit » ; retirée au retour en arrière (pageshow) */
body.page-leaving { opacity: 0; transition: opacity .18s ease; }
/* sans JavaScript, sur une page refaite, l'en-tête posé par-dessus la page couvrirait le haut de la liste */
body.refait > .mobile-menu:not(.est-ouvert) { padding-top: 78px; }

/* ------------------------------------------------------------------ pied (sans frise : aucune source vérifiable, DEC-96) */
.site-footer { margin-top: 110px; overflow: hidden; background: transparent; }
/* le dégradé part du fond de la page, quel qu'il soit (blanc des pages anciennes, papier des pages refaites) */
.site-footer .footer-base { padding-top: 30px; background: linear-gradient(#f2ddc500, #f2ddc5); }
.site-footer .footer-invitation { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 25px 0 58px; }
.site-footer .footer-invitation h2 { font-family: var(--ch-texte); font-size: 42px; font-weight: 400; line-height: 1.15; letter-spacing: -.05em; text-wrap: wrap; color: var(--ch-encre); }
.site-footer .footer-invitation p { max-width: 490px; margin-top: 21px; font-size: 15px; line-height: 1.6; color: #5d5143; }
.site-footer .footer-actions { display: flex; flex-direction: column; gap: 12px; min-width: 235px; }
.site-footer .footer-actions .button { justify-content: space-between; }
/* le bas du pied de Maël, puis, à nous, les liens légaux (principe 6) */
.site-footer .footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px;
  padding: 26px 0 20px; border-top: 1px solid #b99f7c55; font-size: 12px; line-height: 1.5; color: #4d463e;
}
.site-footer .footer-brand { display: block; flex-shrink: 0; margin-right: 3px; }
.site-footer .footer-brand img { width: 95px; height: auto; }
.site-footer .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 25px; margin-left: auto; font-size: 13px; }
.site-footer .footer-bottom > a { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.site-footer .footer-bottom svg { width: 14px; height: 20px; flex-shrink: 0; }
.site-footer .footer-bottom a:hover, .site-footer .footer-legal a:hover { text-decoration: underline; }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 25px; padding: 0 0 31px; font-size: 13px; line-height: 1.5; color: #4d463e; }
.site-footer .footer-legal a { text-decoration: underline; text-decoration-color: #b99f7c; text-underline-offset: .25em; }

/* Zones cliquables d'au moins 24 px de haut (WCAG 2.2, critère 2.5.8) pour les liens de texte de la charpente :
   un rembourrage vertical, repris par une marge négative égale, n'en déplace aucun. */
.site-header .nav-actions > a:not(.button), .site-footer .footer-bottom a, .site-footer .footer-legal a { padding-block: 3px; margin-block: -3px; }

/* ------------------------------------------------------------------ anneau de focus (charpente et pages refaites) */
/* Celui de Maël. Les corps anciens gardent l'anneau du navigateur : sur leurs panneaux violets, ce bleu ne se verrait pas. */
:is(.site-header, .mobile-menu, .site-footer, body.refait) :is(a, button, summary):focus-visible,
.skip-link:focus-visible { outline: 2px solid var(--ch-bleu); outline-offset: 5px; }

/* ------------------------------------------------------------------ points de rupture (ceux de Maël) */
@media (max-width: 1100px) {
  .site-header .nav-actions { gap: 15px; }
  .site-header nav { gap: 0; }
  .site-header nav a { padding: 10px 12px; }
}
@media (max-width: 1000px) {
  .site-footer .footer-invitation { gap: 30px; }
  .site-footer .footer-invitation h2 { font-size: 36px; }
  .site-footer .footer-bottom nav { gap: 18px; }
}
@media (max-width: 809px) {
  .site-header.wrap, .site-footer .wrap, body.refait .wrap { width: calc(100% - 40px); }
  .site-header { margin-top: 12px; }
  body.refait > .site-header { top: 12px; margin-top: 0; }
  .site-header nav { position: static; transform: none; margin-left: auto; margin-right: 20px; }
  .site-header nav a { padding: 9px; font-size: 12px; }
  .site-header .nav-actions { display: none; }
  .site-footer { margin-top: 90px; }
}
@media (max-width: 600px) {
  .site-header { height: 54px; }
  .site-header .brand img { width: 91px; height: 46px; }
  .site-header nav { display: none; }
  body:not(.refait) > .mobile-menu.est-ouvert { top: 66px; }   /* en-tête dans le flux : juste sous lui (12 + 54 px) ; 80 px sur une page refaite, comme chez Maël */
  :is(.site-header, .mobile-menu, .site-footer, body.refait) .button { min-height: 43px; padding: 10px 14px; gap: 12px; font-size: 12px; }
  .mobile-menu a.button { padding: 12px 20px; font-size: 16px; }
  :is(.site-footer, body.refait) .text-link { font-size: 12px; gap: 7px; }
  :is(.site-footer, body.refait) .text-link svg { width: 15px; }
  .site-footer { margin-top: 75px; }
  .site-footer .footer-base { padding-top: 0; }
  .site-footer .footer-invitation { display: block; padding: 20px 0 35px; }
  .site-footer .footer-invitation h2 { font-size: 32px; }
  .site-footer .footer-invitation p { max-width: 300px; margin-top: 18px; font-size: 14px; }
  .site-footer .footer-actions { max-width: 300px; min-width: 0; margin-top: 27px; }
  .site-footer .footer-actions .button { min-height: 45px; font-size: 13px; }
  .site-footer .footer-bottom { gap: 24px; padding-top: 25px; font-size: 11px; }
  .site-footer .footer-brand img { width: 91px; }
  .site-footer .footer-bottom nav { order: 3; width: 100%; margin: 0; gap: 25px; font-size: 13px; line-height: 1.8; }
  .site-footer .footer-bottom > a:last-child { order: 4; font-size: 12px; }
}
/* Le bouton rond n'apparaît que là où il peut servir : sous 600 px, et si les scripts tournent (requête `scripting`,
   ou classe ch-js pour les navigateurs qui ne la connaissent pas). */
@media (max-width: 600px) {
  .site-header .menu-toggle {
    flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 40px; height: 40px;
    padding: 0; border: 1px solid #20212520; border-radius: 50%; background: transparent; cursor: pointer;
  }
  .ch-js .site-header .menu-toggle { display: flex; }
  .site-header .menu-toggle span { display: block; width: 16px; height: 1px; background: var(--ch-encre); transition: transform .3s; }
  .site-header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 600px) and (scripting: enabled) { .site-header .menu-toggle { display: flex; } }

/* ==================================================================== pages refaites (B2 à B8) : base et composants
   Rien de ce qui suit ne s'applique tant qu'aucune page ne porte body.refait (B1 n'en pose aucune). */

html:has(> body.refait) { scroll-behavior: smooth; scroll-padding-top: 30px; }
body.refait, body.refait *, body.refait *::before, body.refait *::after { box-sizing: border-box; }
body.refait {
  margin: 0; background: var(--ch-papier); color: var(--ch-encre); font: 400 16px/1.5 var(--ch-texte); font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
}
body.refait.ch-accueil { --ch-papier: #f8f7f4; }   /* l'accueil de Maël ; ses pages intérieures gardent #f7f7f7 (site.css:218) */
body.refait a { color: inherit; text-decoration: none; }
body.refait :is(button, input, select, textarea) { font: inherit; }
body.refait button { color: inherit; cursor: pointer; border: 0; background: none; }
body.refait button:disabled { cursor: default; }
body.refait img { max-width: 100%; display: block; }
body.refait svg { width: 20px; height: 20px; flex-shrink: 0; }
body.refait :is(h1, h2, h3, p) { margin: 0; }
/* La feuille de Maël écrit 500 pour les titres, mais son fichier Inter est l'Inter Regular statique (graisse 400, taille
   optique « texte »), déclaré pour toutes les graisses : la maquette les montre donc en 400. Notre Inter variable en
   graisse 400, taille optique fixée (font-optical-sizing: none), rend exactement les mêmes largeurs (mesurées à 16, 24,
   40 et 42 px) : c'est ce que montre la maquette (P-74). */
body.refait :is(h1, h2, h3) { font-weight: 400; }
body.refait h2 { font-size: 40px; line-height: 1.13; letter-spacing: -.05em; }
body.refait h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.035em; }
body.refait p { color: var(--ch-gris); }
body.refait ul { padding: 0; margin: 0; list-style: none; }

/* étiquette (surtitre) */
body.refait .eyebrow { font-family: var(--ch-switzer); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ch-orange-texte); }

/* en-tête de section, et sa signature « oreilles » (le haut d'ECTO : notre tracé, commun/styles/site.css) */
body.refait .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 52px; }
body.refait .section-heading p { font-size: 16px; line-height: 1.6; max-width: 410px; }
body.refait .oreilles { position: relative; }
body.refait .oreilles::before {
  content: ""; position: absolute; top: -30px; left: 0; width: 52px; height: 20px; background: var(--ch-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 14 67 25'%3E%3Cpath d='M123.527 30L93 17L97.5 35L149 35.5L153.5 25L123.527 17V30Z' fill='black' stroke='black' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 14 67 25'%3E%3Cpath d='M123.527 30L93 17L97.5 35L149 35.5L153.5 25L123.527 17V30Z' fill='black' stroke='black' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* liste à coches : la coche est dessinée par nous (un disque vert, une coche blanche), pas lue à voix haute */
body.refait .check-list { display: grid; gap: 13px; margin: 25px 0 32px; font-size: 14px; line-height: 1.5; }
body.refait .check-list li { position: relative; padding-left: 30px; }
body.refait .check-list li::before {
  content: ""; position: absolute; left: 1.5px; top: 1.5px; width: 17px; height: 17px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4.7 8.8l2.6 2.6 5-5.4' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat, #2f8a63;   /* la couleur de la coche de Maël : 3,97 pour 1 au moins (graphique : 3 exigé) */
}

/* questions fréquentes : le « + » est dessiné (deux traits), sans caractère : il n'est pas lu à voix haute */
body.refait .faq-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }
body.refait .faq-section h2 { margin-top: 20px; }
body.refait .faq-list { border-top: 1px solid var(--ch-filet); }
body.refait .faq-list details { padding: 24px 0; border-bottom: 1px solid var(--ch-filet); }
body.refait .faq-list summary { display: flex; justify-content: space-between; gap: 25px; font-size: 17px; cursor: pointer; list-style: none; }
body.refait .faq-list summary::-webkit-details-marker { display: none; }
body.refait .faq-list summary::after {
  content: ""; flex-shrink: 0; width: 20px; height: 30px; color: #7b7b76; transition: transform .3s var(--ch-courbe);   /* 30 px : la ligne du « + » de Maël (20 px de corps) */
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
}
body.refait .faq-list details[open] summary::after { transform: rotate(45deg); }
body.refait .faq-list details p { padding-top: 17px; font-size: 14px; line-height: 1.7; }

/* fenêtre décorative (barre de titre d'une application) */
body.refait .window-chrome { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 13px; background: #fbfbfc; border-bottom: 1px solid #ededef; }
body.refait .window-chrome > span { width: 5px; height: 5px; border-radius: 50%; background: #cfd1d8; }
body.refait .window-chrome > b { margin-left: auto; font-size: 9px; font-weight: 400; color: #6b6e7b; }   /* #7f8290 chez Maël : 3,69 pour 1 ; ici 4,9 */

/* bande d'appel (sans masque gravé : aucune source vérifiable, DEC-96) */
body.refait .join-strip {
  position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: space-between; align-items: center;
  gap: 30px; margin-top: 130px; padding: 42px; border: 1px solid #ece0d4; border-radius: 22px;
  background: linear-gradient(110deg, #fcf7ef 0%, #faf0e5 55%, #f2d9c1 100%);
}
body.refait .join-strip > div { max-width: 650px; }
body.refait .join-strip > div p { max-width: 540px; margin-top: 20px; font-size: 15px; line-height: 1.7; color: #5d5143; }   /* 5,68 pour 1 au pire */
body.refait .join-strip > .button { flex-shrink: 0; }
@media (max-width: 1100px) { body.refait .join-strip { padding: 32px; } }

/* étapes fixes « 01 / 02 » */
body.refait .consultation-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 30px 0; padding-top: 24px; border-top: 1px solid var(--ch-filet); }
body.refait .consultation-steps span { font-size: 13px; color: var(--ch-encre); }
body.refait .consultation-steps p { margin-top: 10px; font-size: 13px; line-height: 1.65; }

/* la ligne qui suit un lien « écrire » (mailto:) : l'adresse, lisible */
body.refait .note-ecrire { margin-top: 12px; font-size: 14px; color: var(--ch-gris); }

/* apparition douce : masquée SEULEMENT si le script a posé la classe (hors « mouvement réduit ») */
.js-motion body.refait [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ch-courbe), transform .85s var(--ch-courbe); }
.js-motion body.refait [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 809px) {
  body.refait h2 { font-size: 34px; }
  body.refait .section-heading { margin-bottom: 35px; align-items: flex-start; }
  body.refait .section-heading p { max-width: 290px; font-size: 14px; }
  body.refait .check-list { font-size: 12px; }
  body.refait .faq-section { gap: 40px; }
}
@media (max-width: 600px) {
  body.refait h2 { font-size: 32px; line-height: 1.16; letter-spacing: -.055em; }
  body.refait .section-heading { display: block; margin-bottom: 30px; }
  body.refait .section-heading p, body.refait .section-heading > .text-link { margin-top: 20px; }
  body.refait .section-heading p { font-size: 14px; }
  body.refait .faq-section { display: block; }
  body.refait .faq-list { margin-top: 30px; }
  body.refait .faq-list summary { font-size: 16px; }
  body.refait .window-chrome { height: 25px; padding: 0 9px; }
  body.refait .window-chrome > b { font-size: 7px; }
  body.refait .window-chrome > span { width: 4px; height: 4px; }
  body.refait .join-strip { display: block; margin-top: 75px; padding: 27px; }
  body.refait .join-strip > div p { font-size: 14px; }
  body.refait .join-strip > .button { margin-top: 24px; }
  body.refait .consultation-steps { grid-template-columns: 1fr; gap: 19px; margin: 24px 0; padding-top: 23px; }
  body.refait .consultation-steps p { margin-top: 7px; }
}

/* ------------------------------------------------------------------ corps anciens sans JavaScript (P-40) */
/* Les blocs à apparition douce de site.css restent à opacité 0 si aucun script ne tourne (IS-289) : sans script,
   ils s'affichent d'emblée. Aucun effet pour les visiteurs qui ont JavaScript. */
@media (scripting: none) { [data-apparait] { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  html:has(> body.refait) { scroll-behavior: auto; }
  :is(.skip-link, .site-header, .mobile-menu, .site-footer, body.refait),
  :is(.site-header, .mobile-menu, .site-footer, body.refait) *,
  :is(.site-header, .mobile-menu, .site-footer, body.refait) *::before,
  :is(.site-header, .mobile-menu, .site-footer, body.refait) *::after { animation: none !important; transition: none !important; }
  .js-motion body.refait [data-reveal] { opacity: 1; transform: none; }
}