/* ============================================
   COLLECTIF WEB — LES DEUX PAGES D'ATTERRISSAGE D'AUDIT
   Loi 25 et automatisation. Une seule feuille pour les deux : elles partagent
   toute leur charpente et ne diffèrent que par la couleur de leur dalle et par
   l'emblème qui s'y trace. `cw_ressources()` fait la correspondance, comme il
   la fait déjà du plan du site vers les pages légales.

   Aucune maquette gelée (D-107) : chaque bloc est extrait de la feuille où il
   a été validé, jamais réécrit. La provenance est notée au-dessus de chaque
   section. L'habillage commun (en-tête, menu, pied) vit dans commun.css.
   ============================================ */

/* ====== Sections de page — extrait de pme.css ====== */
.band { margin-bottom: clamp(88px, 11vw, 136px); }
.band__head { margin-bottom: var(--space-6); }
.band__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  padding-top: 22px;
  position: relative;
}
.band__head h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-w);
  background: var(--border);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
}
html.js .band__head h2::before { transform: scaleX(0); }
html.js .band__head.in h2::before { transform: scaleX(1); }
.band__head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); }
.band__head p { font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 76ch; margin: 0; }

/* ====== 1 · Hero à deux colonnes — charpente de `hero--pme` (pme.css).
   À droite, la fenêtre du formulaire prend la place de la photo teintée : la
   demande se dépose sans défiler, c'est le travail d'une page d'atterrissage.
   ====== */
.hero--audit {
  background: var(--surface);
  color: var(--fg);
  border: var(--border-w) solid var(--border);
  display: grid;
  grid-template-columns: 1fr .95fr;
  grid-template-rows: none;
  gap: 0;
  padding: 0;
  min-height: 480px;
  margin-bottom: clamp(88px, 11vw, 136px);
  position: relative;
  overflow: hidden;
}
.hero--audit .hero__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
}
.hero--audit .hero__title { font-size: clamp(36px, 4.4vw, 58px); max-width: 15ch; }
.hero--audit .hero__title em { color: var(--accent); }
.hero--audit .hero__sub { margin-top: 20px; color: var(--fg-soft); opacity: 1; max-width: 46ch; }

/* Le premier pas, annoncé — extrait de pme.css (D-046) */
.hero--audit .promesse {
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
}
.hero--audit .promesse .dot { color: var(--accent); }

/* La colonne du formulaire : le filet qui la sépare est celui que la photo
   portait sur PME. */
.hero--audit .hero__demande {
  border-left: var(--border-w) solid var(--border);
  background: var(--bg);
  padding: clamp(28px, 3.4vw, 44px);
  display: grid;
  align-content: center;
  min-width: 0;
}

/* ====== La fenêtre — extraite de contact.css ====== */
.fenetre {
  border: var(--border-w) solid var(--border);
  background: var(--surface);
}
.fenetre__barre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--border-soft);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fenetre__barre .pastilles { display: flex; gap: 5px; }
.fenetre__barre .pastilles i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }

/* ---- Le formulaire d'audit, posé dans la fenêtre ----
   Reprise du pont Gravity Forms de contact.css : `display: contents` efface
   les deux conteneurs de l'extension, et chaque champ se pose alors
   directement dans la mise en page. Ici les champs tiennent une colonne — la
   fenêtre est étroite —, sauf le nom et le courriel qui se partagent la
   ligne au-dessus de 1200 px. */
.form-audit .fenetre__corps { padding: clamp(20px, 2.2vw, 28px); }
.form-audit .gform_wrapper form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}
.form-audit .gform_wrapper .gform-body,
.form-audit .gform_wrapper .gform_fields { display: contents; }
.form-audit .gform_wrapper .gfield {
  flex: 1 1 100%;
  min-width: 0;
}
.form-audit .gform_wrapper label.gfield_label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  display: block;
  margin-bottom: 6px;
}
.form-audit .gform_wrapper input[type="text"],
.form-audit .gform_wrapper input[type="email"],
.form-audit .gform_wrapper input[type="url"],
.form-audit .gform_wrapper textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--rule-strong);
  padding: 12px 14px;
  width: 100%;
}
/* La hauteur vient d'ici, pas du nombre de lignes que Gravity Forms pose sur
   la balise (piège relevé sur Contact). Le champ reste étirable à la souris. */
.form-audit .gform_wrapper textarea { height: 104px; min-height: 104px; resize: vertical; }
.form-audit .gform_wrapper input:focus,
.form-audit .gform_wrapper textarea:focus { border-color: var(--accent); outline: none; }
/* La couleur et la taille viennent de formulaires.css ; la fenêtre est étroite,
   la précision s'y arrête avant le bord. */
.form-audit .gform_wrapper .gfield_description { max-width: 44ch; }
.form-audit .gform_wrapper .gfield_required { color: var(--accent); }
.form-audit .gform_wrapper .gform_footer { order: 1; flex: 0 0 auto; margin: 0; }
.form-audit .gform_wrapper .gfield--type-html { order: 2; flex: 1 1 200px; align-self: center; }
.form-audit .cw-finalite {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  max-width: 40ch;
}
.form-audit .gform_wrapper .gform_validation_errors {
  border: 1.5px solid var(--alert);
  background: transparent;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg);
  flex: 1 1 100%;
  order: -1;
}
.form-audit .gform_wrapper .gfield_validation_message,
.form-audit .gform_wrapper .validation_message {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--alert);
  margin-top: 6px;
}

/* Demande reçue : la confirmation prend la place du formulaire, dans la
   fenêtre, sans que la page se recharge (contact.css). */
.form-audit .gform_confirmation_message {
  border: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--fg-soft);
  max-width: 52ch;
}
.form-audit .gform_confirmation_message strong { color: var(--fg); font-size: 22px; }

/* ====== 2 · La dalle du parcours — extraite d'expertises.css ======
   La Loi 25 reprend sa section 8 : dalle encre, bouclier-cadenas en
   filigrane. L'automatisation reprend sa section 7 : dalle vert profond, et
   son emblème est le schéma de scénario. Quatre étapes numérotées de part et
   d'autre — la séquence porte de l'information (l'ordre du parcours), d'où
   les numéros. */
.band--loi,
.band--ia {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.band--loi { background: var(--ink); }
.band--ia { background: var(--vert-deep); }
.band--loi > :not(.loi-bouclier),
.band--ia > :not(.ia-schema) { position: relative; z-index: 1; }

/* L'emblème en filigrane : contour qui se trace à l'arrivée de la dalle.
   Même technique pour les deux, un objet chacun. */
.loi-bouclier,
.ia-schema {
  position: absolute;
  right: clamp(24px, 6vw, 110px);
  top: 34px;
  width: clamp(190px, 22vw, 320px);
  pointer-events: none;
}
.loi-bouclier path,
.loi-bouclier rect,
.loi-bouclier circle,
.ia-schema path,
.ia-schema rect,
.ia-schema circle {
  fill: none;
  stroke: var(--vert-bright);
  stroke-width: 1.6;
  opacity: .3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out) .2s;
}
/* Sur la dalle verte, le vert clair du trait manquerait de nerf : l'emblème
   du scénario se trace en papier. */
.ia-schema path,
.ia-schema rect,
.ia-schema circle { stroke: var(--paper); opacity: .28; }
html:not(.js) .loi-bouclier path,
html:not(.js) .loi-bouclier rect,
html:not(.js) .loi-bouclier circle,
html:not(.js) .ia-schema path,
html:not(.js) .ia-schema rect,
html:not(.js) .ia-schema circle,
.band--loi.in .loi-bouclier path,
.band--loi.in .loi-bouclier rect,
.band--loi.in .loi-bouclier circle,
.band--ia.in .ia-schema path,
.band--ia.in .ia-schema rect,
.band--ia.in .ia-schema circle { stroke-dashoffset: 0; }
@media (max-width: 1100px) { .loi-bouclier, .ia-schema { display: none; } }
.band--loi .band__head h2,
.band--ia .band__head h2 { color: var(--paper); }
.band--loi .band__head h2::before,
.band--ia .band__head h2::before { background: rgba(237, 241, 239, .35); }
.band--loi .band__head h2 em { color: var(--vert-bright); }
.band--ia .band__head h2 em { color: var(--vert-pale); }
.band--loi .band__head p { color: rgba(237, 241, 239, .85); }

/* Le vert profond est plus clair que l'encre : les gris posés sur la dalle
   Loi 25 y tombent sous 4,5 de contraste — 4,36 pour le texte des étapes,
   relevé au banc. Sur cette dalle, les textes prennent le papier à 90 %, la
   valeur qu'Expertises a retenue pour son propre fond vert. */
.band--ia .band__head p,
.band--ia .loi-steps .step p,
.band--ia .preuves p,
.band--ia .preuves .note { color: rgba(246, 248, 247, .9); }

.loi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-6) 0; position: relative; }
.loi-steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vert-bright);
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) .1s;
}
html:not(.js) .loi-steps::before { transform: scaleX(1); }
.loi-steps.in::before { transform: scaleX(1); }
@media (max-width: 1000px) { .loi-steps::before { display: none; } }
.loi-steps .step .num {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--vert-bright);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--vert-bright);
  background: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  position: relative;
}
.loi-steps .step h3 { margin: 0 0 4px; font-size: 17px; color: var(--paper); }
.loi-steps .step p { margin: 0; font-size: 16px; color: rgba(237, 241, 239, .72); max-width: 34ch; }
html.js .loi-steps .step { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0s), transform var(--dur-slow) var(--ease-out) var(--d, 0s); }
html.js .loi-steps.in .step { opacity: 1; transform: none; }
.loi-steps .step:nth-child(2) { --d: .09s; }
.loi-steps .step:nth-child(3) { --d: .18s; }
.loi-steps .step:nth-child(4) { --d: .27s; }

.preuves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.preuves p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(237, 241, 239, .8); max-width: 52ch; }
.preuves b { color: var(--paper); }
/* La note court sur toute la largeur de la dalle : elle ferme les preuves,
   elle ne fait pas une colonne de lecture de plus. */
.preuves .note { grid-column: 1 / -1; max-width: none; color: rgba(237, 241, 239, .7); }
.band--loi .btn--paper,
.band--ia .btn--paper { color: var(--paper); border-color: var(--paper); }

/* ====== Les trois services de l'automatisation — liste à filets d'expertises.css.
   Sur la page Loi 25 cette section n'existe pas ; les règles ne coûtent rien. */
.filets { list-style: none; margin: 0; padding: 0; }
.filets li { border-bottom: 1.5px solid var(--rule); padding: var(--space-4) 0; }
.filets li:first-child { border-top: 1.5px solid var(--rule); }
.filets h3 { margin: 0 0 6px; font-size: 20px; }
.filets p { margin: 0; font-size: var(--fs-body); color: var(--fg-soft); max-width: 60ch; }
.filets--cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-6); }
.filets--cols li { border-bottom: 0; }
html.js .filets li { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0s), transform var(--dur-slow) var(--ease-out) var(--d, 0s); }
html.js .filets.in li { opacity: 1; transform: none; }
.filets li:nth-child(2) { --d: .09s; }
.filets li:nth-child(3) { --d: .18s; }

/* ====== 3 · Le relevé — fenêtre et liste extraites de pme.css §5 ====== */
.conf-liste { display: grid; grid-template-columns: 1fr 1fr; }
.conf-liste .conf { padding: var(--space-4) var(--space-5); border-top: 1.5px solid var(--border-soft); }
.conf-liste .conf:nth-child(-n+2) { border-top: 0; }
.conf-liste .conf:nth-child(odd) { border-right: 1.5px solid var(--border-soft); }
.conf-liste h3 { margin: 0 0 6px; font-size: 19px; }
.conf-liste p { margin: 0; font-size: var(--fs-body); color: var(--fg-soft); max-width: 52ch; }
.fenetre__note {
  border-top: 1.5px solid var(--border-soft);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
  max-width: none;
}
.fenetre__note b { color: var(--fg); }

/* ====== 4 · Le guide — carte d'article extraite d'accueil.css ======
   Le texte tient la colonne large, la carte se pose à côté : c'est la même
   carte que sur l'accueil, à une seule instance. */
.guide-preuve { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-7); align-items: center; }
.guide-preuve .band__head { margin-bottom: 0; }
.guide-preuve__lien { margin: var(--space-5) 0 0; }

.article-card { border: var(--border-w) solid var(--border); background: var(--surface); display: grid; grid-template-rows: auto 1fr; }
.article-card .ph-photo {
  aspect-ratio: 16 / 9;
  border: 0;
  border-bottom: 1.5px dashed var(--rule-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  padding: var(--space-4);
}
.article-card__cover { aspect-ratio: 16 / 9; border-bottom: 1.5px dashed var(--rule-strong); overflow: hidden; }
.article-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-card .body { padding: var(--space-4); display: grid; gap: 8px; align-content: start; }
.article-card .meta { font-family: var(--font-sans); font-weight: 500; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.article-card h3 { font-size: 18px; margin: 0; }
.article-card h3 a { color: inherit; text-decoration: none; }
.article-card h3 a:hover { color: var(--accent); }
.article-card p { margin: 0; font-size: var(--fs-small); color: var(--fg-soft); }

/* ====== 5 · Questions fréquentes ======
   Le composant vit dans le design system ; seul le bouton qui porte l'état
   vient d'obnl.css. */
.faq-item .q { align-items: baseline; }
.faq-item .q button {
  all: inherit;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.faq-item .q button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ====== 6 · La clôture — dalle encre du bandeau Loi 25 de l'accueil ====== */
.cta-block--ink { background: var(--ink); }
@media (min-width: 901px) {
  .cta-block { grid-template-columns: 1fr auto; align-items: center; }
}
.cta-block .actions { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ====== Motion (D-058) ====== */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Entrée orchestrée du hero — la colonne du formulaire suit le texte */
html.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .hero__inner > :nth-child(2) { transition-delay: .1s; }
html.js .hero__inner > :nth-child(3) { transition-delay: .18s; }
html.js .hero--audit .hero__demande { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out) .24s, transform .7s var(--ease-out) .24s; }
html.js .hero--go .hero__inner > *,
html.js .hero--go.hero--audit .hero__demande { opacity: 1; transform: none; }

/* ====== Responsive ====== */
@media (max-width: 1100px) {
  .hero--audit { grid-template-columns: 1fr; }
  .hero--audit .hero__demande { border-left: 0; border-top: var(--border-w) solid var(--border); }
  .hero--audit .hero__title { max-width: 20ch; }
  .guide-preuve { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 1000px) {
  .loi-steps { grid-template-columns: 1fr 1fr; }
  .preuves { grid-template-columns: 1fr; }
  .filets--cols { grid-template-columns: 1fr; }
  .filets--cols li { border-bottom: 1.5px solid var(--rule); }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Le widget anti-robot de Cloudflare fait 300 px fixes et refuse de rétrécir :
     il imposait sa largeur à toute la fenêtre du formulaire, qui sortait de la
     marge de droite. On rend son retrait à la colonne. */
  .hero--audit .hero__demande { padding-left: 0; padding-right: 0; }
  .loi-steps { grid-template-columns: 1fr; }
  .conf-liste { grid-template-columns: 1fr; }
  .cta-block { padding: var(--space-6) var(--space-5); }
  .cta-block .actions .btn { width: 100%; justify-content: center; }
  .conf-liste .conf:nth-child(odd) { border-right: 0; }
  .conf-liste .conf:nth-child(2) { border-top: 1.5px solid var(--border-soft); }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
}
/* Sous 375 px, même sans retrait il reste moins de 300 px : le widget se met à
   l'échelle. Au-dessus, il garde sa taille d'origine. */
@media (max-width: 374px) {
  .form-audit .gf-turnstile-container { zoom: .8; }
}