/* GOOD ALLURE PRO / ÉVÉNEMENTS — le même système, un ton différent.
   Côté marque on vend une allure, ici un savoir-faire : plus de chiffres, plus
   de preuves, moins de silence. Mais la même page blanche, la même Jost, la même
   échelle. Un client qui passe de goodallure.com à pro. ne doit pas sentir qu'il
   a changé de maison. */

/* Hero pro : le discours à gauche, la photo à droite. Pas de texte sur l'image :
   sur une photo d'atelier, il n'existe aucune zone calme où le poser. */
.phero{
  display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:center;
  padding-block:clamp(32px,4vw,64px) clamp(40px,5vw,72px);
}
@media (min-width:960px){.phero{grid-template-columns:1fr 1fr}}
.phero__m{aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.phero__m img{width:100%;height:100%;object-fit:cover}
.phero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* Les preuves : quatre faits, pas quatre adjectifs. */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line);
}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--paper);padding:20px var(--pad)}
.fact__n{font-size:var(--t-xl);text-transform:uppercase;color:var(--ink)}
.fact__l{margin-top:6px;font-size:var(--t-s);color:var(--ink-50);max-width:24ch}

/* Les métiers */
.job__m{aspect-ratio:3/4;overflow:hidden;background:var(--tile);position:relative}
.job__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.job:hover .job__m img{transform:scale(1.03)}
.job__n{
  position:absolute;left:0;top:0;padding:5px 9px;background:var(--ink-full);color:var(--paper);
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;
}
.job h3{font-size:var(--t-m);font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:12px 0 8px}
.job ul{margin-top:12px;display:grid;gap:6px}
.job li{position:relative;padding-left:16px;font-size:var(--t-s);color:var(--ink-50)}
.job li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--ink-35)}

/* Le comparatif : le tableau que personne ne fait, et qui répond à la seule
   question que le client se pose vraiment. */
.cmp{width:100%;border-collapse:collapse;margin-top:16px}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{
  font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-35);border-bottom-color:var(--ink-full);
}
.cmp tbody th{width:26%;color:var(--ink);font-weight:700}
.cmp td{font-size:var(--t-m);color:var(--ink-50)}
.cmp .win{color:var(--ink-full)}
@media (max-width:760px){
  /* Un tableau ne rétrécit pas : il défile dans sa propre boîte plutôt que
     d'écraser ses colonnes ou de faire déborder la page. */
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp{min-width:560px}
}

.who{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.who span{padding:8px 14px;border:1px solid var(--line);font-size:var(--t-s);color:var(--ink-50)}

/* FAQ native : <details>, zéro JS, accessible par défaut */
.faq{border-top:1px solid var(--line);margin-top:16px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-size:var(--t-m);min-height:44px;display:flex;align-items:center;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 20px;font-size:var(--t-m);color:var(--ink-50);max-width:72ch}

/* Le devis : le formulaire EST la page, tout le reste sert à y amener. */
.devis{display:grid;grid-template-columns:1fr;gap:28px;padding-block:clamp(48px,6vw,80px)}
@media (min-width:960px){.devis{grid-template-columns:.8fr 1.2fr}}
.devis .p{color:rgba(255,255,255,.62)}
.devis a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.form{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.row{grid-template-columns:1fr 1fr}}
.field label{
  display:block;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.5);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:13px 14px;font:inherit;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:0;
  transition:border-color .25s;
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#fff}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{background:#000;color:#fff}
/* L'erreur ne se signale pas par une couleur — il n'y en a pas sur ce site. */
.field--bad input,.field--bad textarea,.field--bad select{border-color:#fff;border-width:2px}
.err{margin-top:5px;font-size:var(--t-s);color:#fff}

.form__send{
  justify-self:start;margin-top:4px;
  background:var(--paper);color:var(--ink-full);border-color:var(--paper);
}
.form__send:hover{background:transparent;color:var(--paper)}
.form__note{font-size:var(--t-s);color:rgba(255,255,255,.45)}
.form__ok{border:1px solid rgba(255,255,255,.4);padding:20px 22px}
.form__ok h3{font-size:var(--t-m);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.form__ok p{margin-top:6px;color:rgba(255,255,255,.7)}