/* Infra Society, la page Consultation (site/consultation.html ; refonte, bloc B7, construit en avance sur la branche
   refonte-b1).

   Le dessin est celui de la page Consultation de Maël (pages-liens/consultation.html ; assets/pages.css et
   design-v8.css), repris à la main avec les valeurs FINALES de sa cascade, relevées dans le navigateur à 1440, 1000,
   760, 600, 390 et 360 px : tête en colonne, carte, « Ce que vous emportez », questions, fin. Comme chez lui, la page
   n'a pas l'en-tête du site ; elle garde le pied de la charpente (fiche B7). Toutes les règles sont portées par
   body.ch-consultation (aucune règle nue, P-42) ; ses noms de classes sont gardés, sauf quatre qui existent aussi dans
   commun/styles/site.css (P-43) : .chapeau → .chapeau-consult, .trait → .trait-consult, .corps → .inclus2-corps,
   .coches → .coches-consult.

   Différences avec la maquette, et leurs raisons (refonte/differences-maquette.json) :
   - ni réservation en ligne, ni formulaire, ni encaissement (DEC-12, DEC-46, DEC-08) : la carte garde sa colonne
     « infos » et porte, à la place des jours et des heures, un lien « Demander une consultation » vers notre messagerie
     (fiche B7, § 3.1) ;
   - aucun prix (« Tarif à l'ouverture ») ; nos textes publiés pour décrire l'offre (C-2 : l'offre de Maël, un travail
     préparé après l'heure, n'est pas décidée) ;
   - Switzer, graisse 550, à la place de la police de titre de la maquette (P-85) ;
   - ECTO de métal en pose fixe (son image animée tourne sans fin : principe 14) ;
   - bouton : texte encre sur l'orange (le blanc de la maquette n'atteint pas 4,5 pour 1 : DEC-97) ;
   - « + » des questions dessiné, pas écrit (il ne s'ajoute pas au nom de la question lu à voix haute).
   Aucun script. Seule animation : l'entrée des blocs (0,7 s, une fois), coupée sous « mouvement réduit » par la
   charpente. Aucune ressource d'un autre site. */

/* ------------------------------------------------------------------ page et colonnes */
body.ch-consultation .consult { position: relative; font-family: var(--ch-switzer); line-height: 1.6; color: var(--ch-encre); }
body.ch-consultation .colonne { position: relative; margin-inline: auto; }
body.ch-consultation .colonne.etroite { width: min(900px, calc(100% - 60px)); }
body.ch-consultation .colonne.resa-large { width: min(1040px, calc(100% - 60px)); }

/* entrée des blocs (pages.css de Maël : « monte ») */
@keyframes consultation-monte { from { opacity: 0; transform: translateY(14px); } }
body.ch-consultation .apparait { animation: consultation-monte .7s var(--ch-courbe) both; }
body.ch-consultation .apparait-2 { animation-delay: .16s; }

/* ------------------------------------------------------------------ tête en colonne */
/* 30/09/2026, réponse du fondateur : la Consultation prend l'en-tête du site (P-102 révisée). Posé par-dessus le haut de
   la page, comme sur les autres pages refaites, il y réserve sa place : 160 px (80 sous l'en-tête, comme Contact et les
   mentions légales), 122 px sous 600 px de large (56 sous l'en-tête). Avant, sans en-tête : 48 px. */
body.ch-consultation .tete { display: grid; gap: 14px; justify-items: center; padding-top: 160px; text-align: center; }
body.ch-consultation .ecto-metal-tete { width: 110px; height: 110px; margin-bottom: 4px; object-fit: contain; }
body.ch-consultation .titre-consult { max-width: 790px; font: 550 50px/1.08 var(--ch-switzer); letter-spacing: -.05em; color: #1f2430; text-wrap: balance; }   /* équilibré : les coupures de la maquette, Switzer étant un peu moins large */
body.ch-consultation .chapeau-consult { max-width: 700px; font-size: 16px; line-height: 1.7; }
body.ch-consultation .prix-consult { margin-top: 4px; font: 550 40px/1.1 var(--ch-switzer); letter-spacing: -.05em; color: #1f2430; }
body.ch-consultation .sous-prix { margin-top: -10px; font-size: 13px; line-height: 1.7; }
body.ch-consultation .petit-titre { margin: 34px 0 14px; font: 400 12px/normal var(--ch-switzer); letter-spacing: normal; color: var(--ch-gris); text-align: center; }

/* ------------------------------------------------------------------ la carte (celle de la réservation de Maël, sans ses jours ni ses heures) */
body.ch-consultation .resa {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; border: 1px solid #e5e5e1; border-radius: 24px;
  background: var(--ch-blanc);
}
body.ch-consultation .resa > * + * { border-left: 1px solid #efece6; }
body.ch-consultation .resa-info { display: grid; align-content: start; gap: 8px; padding: 32px; border-right: 1px solid #e7e7e2; background: #fafaf8; }
body.ch-consultation .resa-logo { width: 30px; height: auto; }
body.ch-consultation .resa-org { font-size: 13px; line-height: normal; color: var(--ch-gris); }
body.ch-consultation .resa-titre { font: 550 29px/1.15 var(--ch-switzer); letter-spacing: -.04em; color: var(--ch-encre); }
body.ch-consultation .resa-texte { display: grid; gap: 6px; font-size: 14px; line-height: 1.7; }
body.ch-consultation .resa-texte b { font-weight: 500; color: var(--ch-encre); }
body.ch-consultation .resa-details { display: grid; gap: 14px; margin-top: 16px; font-size: 13px; font-weight: 500; line-height: 1.35; }
body.ch-consultation .resa-details li { display: flex; align-items: flex-start; gap: 10px; }
body.ch-consultation .resa-details svg { width: 17px; height: 17px; color: #79818c; }
body.ch-consultation .resa-ecrire { display: grid; align-content: start; justify-items: start; gap: 14px; padding: 32px 26px; }
body.ch-consultation .resa-ecrire h3 { max-width: 520px; }
body.ch-consultation .resa-ecrire > p:not(.note-ecrire) { max-width: 520px; font-size: 14px; line-height: 1.7; }
body.ch-consultation .resa-ecrire .note-ecrire { max-width: 520px; margin-top: 0; font-size: 13px; line-height: 1.6; }
body.ch-consultation :is(.note-ecrire, .qr p) a { text-decoration: underline; text-underline-offset: 2px; }

/* bouton de la maquette (« btn-site ») : pilule orange, flèche à part ; texte encre (DEC-97) */
body.ch-consultation .btn-site {
  display: inline-flex; align-items: stretch; min-height: 45px; overflow: hidden; border-radius: 30px;
  background: var(--ch-bouton-fond); color: var(--ch-bouton-texte); font: 500 14px/1.2 var(--ch-switzer); transition: background-color .3s;
}
body.ch-consultation .btn-site:hover { background: var(--ch-bouton-survol); }
body.ch-consultation .btn-site span { display: flex; align-items: center; padding: 0 24px; }
body.ch-consultation .btn-site i { display: grid; place-items: center; width: 52px; }
body.ch-consultation .btn-site svg { width: 14px; height: 10px; }

/* ------------------------------------------------------------------ « Ce que vous emportez » */
body.ch-consultation .trait-consult { height: 0; margin: 55px 0 27px; border: 0; border-top: 1px solid #deded9; }
body.ch-consultation .inclus2 { overflow: hidden; border: 1px solid #e6e5e0; border-radius: 20px; background: var(--ch-blanc); }
body.ch-consultation .bande2 {
  display: flex; align-items: center; height: 116px; padding-left: clamp(18px, 4vw, 30px);
  background: url(../../../images/fonds/fond-sable-bleu-aube.jpg) center / cover;
}
body.ch-consultation .ecto-bande { width: 82px; height: auto; }
body.ch-consultation .inclus2-corps { display: grid; gap: 16px; padding: 32px; }
body.ch-consultation .inclus2-corps h2 { font: 550 30px/1.17 var(--ch-switzer); letter-spacing: -.035em; color: var(--ch-encre); }
body.ch-consultation .coches-consult { display: grid; gap: 12px; }
body.ch-consultation .coches-consult li { position: relative; padding-left: 32px; font-size: 15px; line-height: 1.75; color: var(--ch-encre); }
body.ch-consultation .coches-consult li::before {
  content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #4a5263 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3L9.5 3.5' stroke='white' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center / 12px auto no-repeat;
}

/* ------------------------------------------------------------------ questions */
body.ch-consultation .faq-ouverte { display: grid; gap: 10px; }
body.ch-consultation .qr { padding: 23px 0; border-bottom: 1px solid #deded9; }
body.ch-consultation .qr summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; font-size: 18px;
  line-height: normal; color: var(--ch-encre); cursor: pointer; list-style: none;
}
body.ch-consultation .qr summary::-webkit-details-marker { display: none; }
body.ch-consultation .qr summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: #1f2430;
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat, #eceef2;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s, color .3s;
}
body.ch-consultation .qr[open] summary::after { transform: rotate(45deg); background-color: #1f2430; color: var(--ch-blanc); }
body.ch-consultation .qr p { padding: 0 18px 18px; font-size: 14px; line-height: 1.75; }

/* ------------------------------------------------------------------ fin */
body.ch-consultation .fin { display: grid; justify-items: center; gap: 22px; margin: 40px 0 15px; }
body.ch-consultation .retour { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
body.ch-consultation .retour svg { width: 14px; height: 10px; color: #4a5263; transform: rotate(180deg); }

/* ------------------------------------------------------------------ paliers de Maël */
@media (max-width: 1000px) {
  body.ch-consultation .resa-info { padding: 25px; }
  body.ch-consultation .resa-ecrire { padding: 25px 20px; }
  body.ch-consultation .resa-titre { font-size: 25px; }
  body.ch-consultation .resa-texte { font-size: 13px; }
}
@media (max-width: 899px) {
  body.ch-consultation .resa { grid-template-columns: minmax(0, 1fr); }
  body.ch-consultation .resa > * + * { border-left: 0; border-top: 1px solid #efece6; }
}
@media (max-width: 760px) {
  body.ch-consultation .colonne.etroite, body.ch-consultation .colonne.resa-large { width: calc(100% - 40px); }
  body.ch-consultation .resa { border-radius: 20px; }
  body.ch-consultation .resa-info { border-right: 0; }
}
@media (max-width: 600px) {
  body.ch-consultation .tete { padding-top: 122px; }
  body.ch-consultation .ecto-metal-tete { width: 85px; height: 85px; }
  body.ch-consultation .titre-consult { font-size: 36px; }
  body.ch-consultation .chapeau-consult { font-size: 14px; }
  body.ch-consultation .prix-consult { font-size: 35px; }
  body.ch-consultation .sous-prix { font-size: 12px; }
  body.ch-consultation .resa { border-radius: 18px; }
  body.ch-consultation .resa-info { border-bottom: 1px solid #deded9; }
  body.ch-consultation .resa-titre { font-size: 26px; }
  body.ch-consultation .resa-ecrire { padding: 24px; }
  body.ch-consultation .trait-consult { margin: 42px 0 24px; }
  body.ch-consultation .inclus2-corps { padding: 25px; }
  body.ch-consultation .inclus2-corps h2 { font-size: 26px; }
  body.ch-consultation .qr { padding: 21px 0; }
  body.ch-consultation .qr summary { font-size: 16px; }
  body.ch-consultation .btn-site { font-size: 13px; text-align: center; }
}
@media (max-width: 360px) {
  body.ch-consultation .resa-ecrire { padding: 21px; }
}