/* Le Studio : styles de la page « contact ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Page Contact (v4)
================================================================== */

/* Hero : les autres moyens de nous joindre */
/* La taille suit la largeur utile (écran moins les deux gouttières), pour que le « t » final ne sorte jamais du cadre, même sur mobile */
.phero .wordmark{font-size:clamp(4rem,min(calc((100vw - 2 * var(--gutter)) / 3.4),45svh),34rem);letter-spacing:-.06em}
.phero__copy{max-inline-size:none}
.ways li{display:grid;gap:4px;padding-block:12px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.ways .meta{color:var(--on-night-2)}
.ways a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px}
.ways__name{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.035em;line-height:1.1;overflow-wrap:anywhere;transition:transform var(--d-2) var(--ease-out)}
.ways svg{inline-size:18px;block-size:18px;flex:none;color:var(--on-night-2);transition:color var(--d-1) ease,transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ways a:hover .ways__name{transform:translateX(8px)}
  .ways a:hover svg{color:var(--accent);transform:translate(3px,-3px)}
}

/* Formulaire : la suite à gauche, le formulaire dans un cadre blanc à droite */
.brief{display:grid;gap:clamp(48px,6vw,80px)}
.brief__side{display:grid;gap:clamp(32px,4vw,56px);align-content:start}
.brief__side h2{font-size:var(--fs-h2m);max-inline-size:8em}
.next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;padding-block:clamp(18px,2vw,26px)}
.next li .rule{grid-column:1/-1;margin-block-end:clamp(8px,1vw,14px)}
.next .meta{color:var(--ink-2);grid-row:2 / span 2;padding-block-start:.35em}
.next p{color:var(--ink-2);max-inline-size:24em}
.brief__card{background:var(--white);border-radius:var(--r-frame);padding:clamp(24px,3.4vw,60px)}
@media (min-width:1024px){
  .brief{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter)}
  .brief__side{position:sticky;inset-block-start:clamp(96px,14vh,140px);align-self:start}
}

/* Champs */
.form{display:grid;gap:clamp(28px,3vw,40px)}
.form[hidden]{display:none}
.form__row{display:grid;gap:clamp(28px,3vw,40px)}
@media (min-width:700px){ .form__row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)} }
.form fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.field{display:grid;gap:10px;align-content:start}
.field label,.field legend{font-weight:450;letter-spacing:-.01em;padding:0}
.field legend{margin-block-end:14px}
.field__opt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-inline-start:8px;font-weight:400}
.form input[type="text"],.form input[type="email"],.form textarea{inline-size:100%;font:inherit;font-size:var(--fs-lg);letter-spacing:-.015em;line-height:1.4;color:var(--ink);background:transparent;border:0;border-block-end:1px solid var(--ink-2);border-radius:0;padding:8px 0 10px;transition:border-color var(--d-1) ease,box-shadow var(--d-1) ease}
.form textarea{resize:vertical;min-block-size:8.5rem}
.form ::placeholder{color:var(--ink-2);opacity:1}
.form input:focus,.form textarea:focus{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.form [aria-invalid="true"]{border-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.field__help{font-size:var(--fs-sm);color:var(--ink-2)}
.field__error{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-sm);color:var(--ink)}
.field__error::before{content:"";inline-size:8px;block-size:8px;background:var(--accent);flex:none;translate:0 -.05em}
.field__error[hidden]{display:none}

/* Choix en pastilles : un vrai bouton radio sous chaque pastille */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid rgb(13 13 13 / .28);font-size:var(--fs-sm);letter-spacing:-.01em;pointer-events:none;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
.choice input:checked + span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.choice input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.field--choice[data-invalid] .choice span{border-color:var(--accent)}
@media (hover:hover) and (pointer:fine){ .choice:hover input:not(:checked) + span{border-color:var(--ink)} }

/* Envoi */
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-block-start:8px}
.form__note{color:var(--ink-2);font-size:var(--fs-sm)}
.brief__card .pill{transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.brief__card .pill:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .brief__card .pill--accent:hover{background:var(--ink);color:var(--white);border-color:var(--ink)} }

/* Message prêt */
.sent{display:grid;gap:20px;justify-items:start;padding-block:clamp(16px,4vw,64px);transition:opacity var(--d-2) ease,transform var(--d-2) var(--ease-out)}
.sent[hidden]{display:none}
.sent.is-pre{opacity:0;transform:translateY(16px)}
.sent:focus{outline:none}
.sent__mark{display:grid;place-items:center;inline-size:60px;block-size:60px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.sent__mark svg{inline-size:22px;block-size:22px}
.sent h3{font-size:var(--fs-h2s);letter-spacing:-.05em;line-height:1}
.sent p{color:var(--ink-2);max-inline-size:30em}
.sent p a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:from-font}
@media (prefers-reduced-motion: reduce){ .sent.is-pre{transform:none} .brief__card .pill:active{transform:none} }

/* Calendrier Cal.com (15 oct. 2026) */
.cal__alt{color:var(--ink-2)}
.cal__alt a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.cal__card{padding:clamp(8px,1.2vw,20px);min-block-size:640px}
.cal__embed{inline-size:100%;min-block-size:620px;overflow:auto}
.cal__wait{padding:clamp(16px,2vw,32px);color:var(--ink-2)}
.cal__wait a{color:var(--ink);text-decoration:underline}
.brief__intro{color:var(--ink-2);max-inline-size:24em}

/* Lien vers le formulaire de la page : flèche vers le bas, qui descend au survol (12 nov. 2026) */
/* 12 nov. 2026 : « Remplir le formulaire » prend la même flèche en diagonale que « Réserver un appel » (retour de Jeremy) */

/* Envoi par Netlify Forms (12 nov. 2026) : champ piège invisible pour les robots, message si l'envoi échoue */
.form__piege{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
.form__echec{color:#B03A00;font-size:var(--fs-sm)}
.form__echec a{text-decoration:underline;text-underline-offset:.2em}
.form [type=submit]:disabled{opacity:.5;cursor:progress}