/* Pages de contenu et demande ecrite (D-80) — complement de site.css.
 *
 * Aucune regle n'est posee en style inline dans les gabarits : le theme
 * WordPress le faisait, et a 375 px aucune media query ne pouvait l'atteindre.
 * Tout ce qui se met en grille ici passe a une colonne sous 860 px, et chaque
 * enfant de grille porte min-width: 0 pour qu'un Eurocode ou une adresse
 * e-mail ne pousse jamais la page au-dela de l'ecran.
 */

/* — icones en ligne : Icone::svg n'a pas de taille propre — */
.gat-doc-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.gat-wa .gat-doc-ico { color: #3f8f74; }

/* — en-tete de page — */
.gat-crumbs + .gat-page { padding-top: var(--space-4); }
.gat-doc { overflow-wrap: break-word; }
.gat-doc a, .gat-doc code { overflow-wrap: anywhere; }
.gat-doc-tete { margin-bottom: calc(var(--space-8) * 1.2); }
.gat-doc-tete .gat-lede { margin: 0; }
/* .gat h1 vaut (0,1,1) : la classe seule perdrait. */
.gat h1.gat-doc-titre { font-size: 44px; line-height: 1.05; margin: var(--space-2) 0 var(--space-6); max-width: 24ch; text-wrap: balance; }
.gat-doc-maj { font-size: 13px; color: var(--muted); margin: var(--space-4) 0 0; }

.gat-doc-sommaire { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); font-size: 14px; }
.gat-doc-sommaire a { text-decoration: none; }
.gat-doc-sommaire a:hover { text-decoration: underline; }

.gat-doc-section { margin-top: calc(var(--space-8) * 1.6); scroll-margin-top: 140px; }
.gat-doc-section > h2:first-child,
.gat-doc-section > .gat-content:first-child > h2:first-child { margin-top: 0; }
.gat-doc .gat-content strong { color: var(--ink); font-weight: 600; }
.gat-doc .gat-content ol { padding-left: 1.3em; }
.gat-doc .gat-content code { font-size: .92em; color: var(--color-accent-700); }

/* — les trois chemins vers un conseiller — */
.gat-doc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: calc(var(--space-8) * 1.2) 0 0; }
.gat-doc-actions .btn { max-width: 100%; text-align: center; }
.gat-doc-confirm { font-size: 13px; color: var(--muted); margin: var(--space-3) 0 0; max-width: 70ch; }

/* — tableau de definitions a deux colonnes — */
.gat-doc-infos {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  margin: var(--space-6) 0; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.gat-doc-infos dt, .gat-doc-infos dd {
  margin: 0; padding: var(--space-3) var(--space-6); font-size: 14px; min-width: 0;
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px;
}
.gat-doc-infos dt { font-family: var(--font-heading); font-weight: 500; color: var(--ink);
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px, var(--color-neutral-200); }
.gat-doc-infos dd { color: var(--muted); }
.gat-doc-infos-code dt code { font-size: 15px; font-weight: 600; letter-spacing: .06em; }

/* — les quatre equipements — */
.gat-doc-equip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-4); list-style: none; margin: var(--space-6) 0; padding: 0;
}
.gat-doc-equip li {
  display: grid; gap: var(--space-2); align-content: start; min-width: 0;
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  border-left: 3px solid var(--color-accent-600); scroll-margin-top: 140px;
}
.gat-doc-equip strong { font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.gat-doc-equip span { font-size: 14px; color: var(--muted); }

/* — le guide photo — */
.gat-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--space-4); list-style: none; margin: var(--space-6) 0 0; padding: 0;
}
.gat-photo-carte {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: 0 0 0 1px var(--line);
  scroll-margin-top: 140px;
}
.gat-photo-carte:target { box-shadow: 0 0 0 2px var(--color-accent-600); }
.gat-vignette { width: 100%; height: auto; max-height: 110px; color: var(--color-neutral-700); margin-bottom: var(--space-2); }
.gat-vignette .hl { fill: var(--color-accent-300); stroke: var(--color-accent-700); }
.gat-photo-n { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.gat .gat-photo-carte h3 { font-size: 17px; margin: 0; }
.gat .gat-photo-carte p { font-size: 13px; color: var(--muted); margin: 0; }

/* — recherche dans le corps de page — */
.gat-doc-recherche { margin: var(--space-6) 0; }
.gat-doc-recherche label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.gat-doc-recherche-ligne { display: flex; gap: var(--space-2); }
.gat-doc-recherche-ligne .input { flex: 1 1 auto; min-width: 0; }
.gat-doc-recherche-ligne .btn { flex: none; }

/* — FAQ : details/summary, sans JavaScript — */
.gat-faq { max-width: 74ch; }
.gat .gat-faq h2 { font-size: 24px; margin: calc(var(--space-8) * 1.6) 0 var(--space-3); }
.gat .gat-faq h2:first-child { margin-top: 0; }
.gat-faq details { background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px; }
.gat-faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 500; font-size: 16px; color: var(--ink);
}
.gat-faq summary::-webkit-details-marker { display: none; }
.gat-faq summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--color-accent-700); }
.gat-faq details[open] summary::after { content: "−"; }
.gat-faq-reponse { padding: 0 0 var(--space-6); color: var(--muted); }
.gat-faq-reponse p:last-child { margin-bottom: 0; }

/* — contact — */
.gat-doc-deux { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(var(--space-8) * 1.6); align-items: start; }
.gat-coord { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.gat-coord a {
  display: flex; align-items: center; gap: var(--space-4); min-width: 0;
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink);
  font-family: var(--font-heading); font-weight: 500; font-size: 16px;
}
.gat-coord a:hover { box-shadow: 0 0 0 1px var(--color-accent-600); color: var(--color-accent-700); }
.gat-coord .gat-doc-ico { width: 22px; height: 22px; color: var(--color-accent-600); }
.gat-coord a.gat-wa .gat-doc-ico { color: #3f8f74; }
.gat-coord small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--muted); }
.gat-coord span { min-width: 0; }
.gat-agences { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--space-3); list-style: none; margin: var(--space-4) 0; padding: 0; }
.gat-agences li { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--color-neutral-200); font-family: var(--font-heading); font-weight: 500; }
.gat-doc-note { font-size: 13px; color: var(--muted); }

/* ══════════════════════════════════════════════ demande ecrite ══ */

.gat-devis .gat-form-layout > * { min-width: 0; }
.gat-devis .gat-form-main { background: var(--color-neutral-100); }
.gat .gat-devis h2 { font-size: 20px; margin: calc(var(--space-8) * 1.2) 0 var(--space-3); }
.gat .gat-devis .gat-form-main > form > h2:first-of-type { margin-top: 0; }
.gat-devis fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.gat-devis-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-6); }
.gat-devis-champ { display: grid; gap: 5px; align-content: start; min-width: 0; }
.gat-devis-champ-large { grid-column: 1 / -1; }
.gat-devis-champ > label, .gat-equip-q legend { font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: var(--ink); }
.gat-devis-champ .facultatif { font-weight: 400; color: var(--muted); }
.gat-devis-aide { font-size: 12px; color: var(--muted); margin: 0; }
.gat-devis .input[aria-invalid="true"] { border-color: #a4392a; }
.gat-devis select.input { appearance: auto; }
.gat-devis-erreur { font-size: 12px; color: #a4392a; margin: 0; }
.gat-devis-alerte {
  margin: 0 0 var(--space-6); padding: 12px 16px; border-radius: var(--radius-md);
  border-left: 3px solid #a4392a; background: color-mix(in srgb, #a4392a 7%, transparent); font-size: 14px;
}
.gat-devis-alerte ul { margin: var(--space-2) 0 0; padding-left: 1.1em; }

/* La reference venue d'une fiche. */
.gat-devis-ref {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-accent-100); box-shadow: 0 0 0 1px var(--color-accent-300);
}
.gat-devis-ref .code { font-family: var(--font-mono); font-weight: 600; letter-spacing: .04em; color: var(--color-accent-700); overflow-wrap: anywhere; }
.gat-devis-ref .nom { font-size: 14px; color: var(--muted); min-width: 0; }

/* Oui / Non / Je ne sais pas : le segment de site.css, a la taille du pouce. */
.gat-equip-q { padding: var(--space-4) 0; background: linear-gradient(to right, var(--line), var(--line)) no-repeat bottom / 100% 1px; }
.gat-equip-q legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; }
.gat-equip-q .gat-devis-aide { clear: both; margin-bottom: var(--space-3); }
.gat-equip-q .gat-devis-aide a { white-space: nowrap; }
.gat-devis .seg { max-width: 100%; background: var(--color-neutral-100); }
.gat-devis .seg-opt { min-height: 40px; padding-inline: 14px; font-size: 14px; }
.gat-devis .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-600); outline-offset: -2px; }

/* Le champ piege, hors de vue et hors du parcours clavier. */
.gat-devis-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gat-devis-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: calc(var(--space-8) * 1.2); }
.gat-devis-avis {
  margin: var(--space-8) 0 0; padding-top: var(--space-4); font-size: 12px; color: var(--muted);
  background: linear-gradient(to right, var(--line), var(--line)) no-repeat top / 100% 1px;
}
.gat-devis-avis p { margin: 0 0 var(--space-2); }

.gat-devis .gat-side-card .btn { width: 100%; }

/* — le recu — */
.gat-merci { max-width: 70ch; }
.gat-merci-numero {
  display: inline-block; margin: var(--space-4) 0; padding: var(--space-4) var(--space-6);
  font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-accent-700); background: var(--color-accent-100);
  border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-accent-300); overflow-wrap: anywhere;
}
.gat-merci .gat-steps { margin-top: var(--space-6); }

@media (max-width: 960px) {
  .gat-doc-deux { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .gat h1.gat-doc-titre { font-size: 30px; }
  .gat-doc-infos { grid-template-columns: minmax(0, 1fr); }
  .gat-doc-infos dt { background: var(--color-neutral-200); }
  .gat-devis-champs { grid-template-columns: minmax(0, 1fr); }
  .gat-devis .gat-form-main { padding: var(--space-6); }
  .gat-doc-actions .btn, .gat-devis-envoi .btn { width: 100%; }
  .gat-merci-numero { font-size: 22px; }
}

@media (max-width: 400px) {
  .gat-devis .seg-opt { padding-inline: 10px; font-size: 13px; }
}