/* Specific to the contact page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

/* T14 a T16 : micro-conversions */
  .micro{margin-top:2.2rem;padding:1.6rem 1.7rem;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface)}

.micro h3{font-size:1.2rem;margin-bottom:.6rem}

/* 10/10, card 226: on this page the written question opens its own section right
   under the h1, so its heading is an h2 (an h3 there skipped a level). It keeps the
   h3 look it had: same size, weight and spacing. */
.micro h2{font-size:1.2rem;font-weight:600;letter-spacing:-.005em;margin-bottom:.6rem}

.micro p{color:var(--ink-2);max-width:var(--measure)}

.micro form{margin-top:1.1rem;display:grid;gap:.9rem}

.micro .m-row{display:flex;flex-wrap:wrap;gap:.8rem}
.micro form > .btn{justify-self:start}

.micro input[type=text],.micro input[type=email],.micro textarea{
    flex:1;min-width:13rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
    font:inherit;color:var(--ink)}

.micro textarea{min-height:110px;width:100%}

@media (hover:hover){.micro input:hover,.micro textarea:hover{border-color:var(--muted)}}

.micro .m-note{font-size:.9rem;color:var(--muted)}

.micro .m-neutral{font-weight:600;color:var(--ink)}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* 23/10: the banner takes the padding of .hero-title-only (base.css), title at
   the bottom of the photo; its own uneven padding of 06/10 is gone. */

/* Colonne de gauche : bloc téléphone */
    .callbox{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(1.6rem,1rem + 2vw,2.4rem)}

/* 07/10, « uniformiser sur toutes les autres pages »: this box is the contact
   page's callback block, and its number now has the size she approved on the
   home page (base.css .cv-tel). It was 32 px on a phone and 41.6 px on a desktop. */
.callbox .cv-tel{display:inline-block;margin-top:.4rem}

.callbox .kicker{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The rows' sentences now inherit var(--body); the bold row label (.rl) keeps its
   own .92rem. Was 1rem (16 px). */
.callbox .row{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink-2)}

.callbox .row + .row{margin-top:0}

.callbox .rl{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:.2rem}

/* Textarea aligné sur .field input/select */
    .field textarea{width:100%;min-height:120px;padding:.7rem .9rem;border:1px solid var(--line-strong);
      border-radius:var(--r);background:var(--paper);font:inherit;color:var(--ink);line-height:1.55;resize:vertical}

@media (hover:hover){.field textarea:hover{border-color:var(--muted)}}

.field .opt{font-weight:400;color:var(--muted)}

/* Cartes agences */
    .ag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}

.ag-card{background:var(--paper);padding:clamp(1.6rem,1rem + 1.6vw,2.1rem)}

/* 25/10, Valérie: « mettre les villes en rouge », as on the home page. */
.ag-card .an{font-family:"Source Serif 4",Georgia,serif;font-size:1.4rem;font-weight:500;letter-spacing:-.01em;color:var(--accent)}

.ag-card .az{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:.3rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Address and opening hours are content: var(--body), the address at the 1.6 line
   height of the other addresses. Were 1rem / 1.55 (16 px) and .95rem (15.2 px). */
.ag-card address{font-style:normal;color:var(--ink-2);font-size:var(--body);margin-top:1rem;line-height:1.6}

.ag-card .at{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}

@media (hover:hover){.ag-card .at:hover{border-bottom-color:var(--accent);color:var(--accent)}}

.ag-card .ah{color:var(--muted);font-size:var(--body);margin-top:.6rem}

/* Façade de carte (pas d'iframe) */
    .map-facade{margin-top:clamp(1.6rem,1rem + 1.5vw,2.2rem);border:1px solid var(--line-strong);border-radius:var(--r);
      background:var(--tint);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:.8rem;text-align:center;padding:2.5rem 1.5rem}

.map-facade .ml{font-family:"Source Serif 4",Georgia,serif;font-size:1.25rem;color:var(--accent)}

.map-facade .ms{color:var(--muted);font-size:.98rem;max-width:46ch}

/* FAQ */
    .faq{border-top:1px solid var(--line);max-width:var(--measure)}

.faq details{border-bottom:1px solid var(--line)}

.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
      padding:1.4rem 0;min-height:var(--target);font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.15rem,1rem + .5vw,1.4rem);
      font-weight:500;color:var(--ink)}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{content:"+";font-family:Figtree;font-weight:600;color:var(--accent);font-size:1.5rem;line-height:1}

.faq details[open] summary::after{content:"-"}

@media (hover:hover){.faq summary:hover{color:var(--accent)}}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   FAQ answers now inherit var(--body). Was 1.05rem (16.8 px). */
.faq .fa{color:var(--ink-2);padding:0 0 1.4rem;max-width:60ch}

@media (max-width:900px){
      .ag-grid{grid-template-columns:1fr}
    }

/* 22/10, Lucas: « juste le titre sur la photo et en dessous le texte qui
   l'accompagne ». The standfirst left the photo, so the wider side veil of
   13/10 (card 227, the line ending on the white hat) is gone: it would override
   the veil .hero-title-only gets from base.css. */

/* 25/10, Lucas: « Votre prénom et Votre téléphone en rouge, et plus bas Voir la
   carte des agences, titre en rouge aussi ». This page only: the callback form is
   shared (parts/callback.php), its labels stay blue elsewhere. */
.convert .field>label{color:var(--accent)}