/* Page contact. Toute nouvelle règle doit être préfixée par body[data-page="contact"] pour rester isolée. */

/* Styles hérités de la page 1.0. À consolider dans ce bloc uniquement. */
.ct-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.ct-side h2{font-size:clamp(2rem,4.5vw,3.4rem);letter-spacing:-.03em;margin-bottom:1.2rem}
.ct-side>p{color:var(--grey);font-weight:300;max-width:44ch;line-height:1.85}
.ct-list{margin-top:2.4rem;display:grid;gap:1.1rem}
.ct-item{display:flex;gap:1rem;align-items:flex-start}
.ct-ic{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,213,98,.07)}
.ct-ic svg{width:19px;height:19px;fill:var(--gold)}
.ct-item b{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.25rem}
.ct-item a,.ct-item span.val{color:var(--grey);font-size:.98rem;transition:color .3s}
.ct-item a:hover{color:#fff}
.ct-form{border:1px solid var(--line);border-radius:26px;padding:clamp(1.8rem,4vw,3rem);background:linear-gradient(150deg,rgba(255,213,98,.06),rgba(15,15,18,.7) 50%)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:flex;flex-direction:column;gap:.4rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2)}
.form input,.form select,.form textarea{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;color:#fff;font-family:var(--text);font-size:.95rem;padding:.85rem 1rem;outline:none;transition:border-color .3s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold)}
.form select option{background:#111}
.form .full{grid-column:1/-1}
.form textarea{min-height:130px;resize:vertical}
.form-ok{grid-column:1/-1;color:#39d98a;font-size:.9rem;display:none}
.form-privacy{margin:.1rem 0 0;color:#a9a9b2;font-size:.72rem;line-height:1.6;letter-spacing:0;text-transform:none}
.ct-mail{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.5rem,3.5vw,2.3rem);color:var(--gold);display:inline-block;border-bottom:1.5px solid transparent;transition:border-color .4s;margin-top:.4rem}
.ct-mail:hover{border-color:var(--gold)}
.ct-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
.ct-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
@media(max-width:960px){.ct-wrap{grid-template-columns:1fr}.form{grid-template-columns:1fr}}

/* V1.16 — cadres parallaxe des photos de contact */
.ct-photos .ct-ph{display:block;overflow:hidden;border-radius:16px;border:1px solid var(--line);aspect-ratio:4/3}
.ct-photos .ct-ph img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;aspect-ratio:auto}

/* ==================== V1.17.2 — Donnez-nous trente minutes ====================
   Architecture : héros → règle d'orientation → Guillaume pleine largeur →
   respiration → Eloïse pleine largeur → formulaire. Jamais deux téléphones
   sur la même ligne, jamais deux cartes symétriques. Appels en matière or
   statique (aucun liquid glass, aucune animation autonome). */

/* Règle d'orientation : deux règles EMPILÉES, filets or, largeurs libres. */
body[data-page="contact"] .ct-orient{max-width:880px}
body[data-page="contact"] .ct-orient-lead{margin:1.1rem 0 0;color:var(--ink);font-weight:600}
body[data-page="contact"] .ct-rules{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:1.2rem}
body[data-page="contact"] .ct-rule{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;display:grid;gap:.4rem}
body[data-page="contact"] .ct-rule b{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
body[data-page="contact"] .ct-rule span{color:var(--grey);font-weight:300;line-height:1.8;max-width:62ch}
body[data-page="contact"] .ct-rule-go{color:var(--grey-2);font-size:.92rem;min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
body[data-page="contact"] .ct-rule-go:hover,body[data-page="contact"] .ct-rule-go:focus-visible{color:#fff}
body[data-page="contact"] .ct-orient-note{margin:1.4rem 0 0;color:var(--ink);font-weight:600;max-width:62ch}
body[data-page="contact"] .ct-orient-write{margin:.7rem 0 0}
body[data-page="contact"] .ct-orient-write a{color:var(--grey-2);font-size:.92rem;min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
body[data-page="contact"] .ct-orient-write a:hover,body[data-page="contact"] .ct-orient-write a:focus-visible{color:#fff}

/* Interlocuteurs : deux séquences pleine largeur asymétriques, jamais côte
   à côte. Le portrait d'Eloïse passe visuellement à droite en desktop
   (order sur la figure seule — l'ordre DOM et la tabulation sont intacts). */
body[data-page="contact"] .ct-person{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
body[data-page="contact"] .ct-person--eloise{grid-template-columns:1fr minmax(200px,320px)}
body[data-page="contact"] .ct-person--eloise .ct-person-photo{order:2}
body[data-page="contact"] .ct-person-photo{margin:0}
body[data-page="contact"] .ct-person-photo img{width:100%;height:auto;border-radius:22px;border:1px solid var(--line)}
body[data-page="contact"] .ct-person-role{color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin:.5rem 0 1rem}
body[data-page="contact"] .ct-person-topics{color:var(--grey);font-weight:300;line-height:1.85;max-width:62ch}
body[data-page="contact"] .ct-person-word{margin-top:1.3rem;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.1rem,2vw,1.4rem);color:#fff;max-width:46ch;line-height:1.6}
body[data-page="contact"] .ct-person-promise{margin-top:1.1rem;color:var(--grey);font-size:.92rem;font-weight:300;max-width:52ch}
/* Respiration entre les deux interlocuteurs. */
body[data-page="contact"] #eloise{padding-top:0;margin-top:clamp(2.2rem,9vh,5.5rem)}
body[data-page="contact"] #guillaume{padding-bottom:0}

/* Appel : même matière or aplat que le bouton du site — statique, franche. */
body[data-page="contact"] .ct-call{display:inline-flex;flex-direction:column;gap:.15rem;margin-top:1.5rem;padding:.85rem 1.7rem;min-height:44px;border-radius:18px;background:var(--gold);color:#0a0a0d;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
body[data-page="contact"] .ct-call-label{font-weight:700;letter-spacing:.02em}
body[data-page="contact"] .ct-call-num{font-variant-numeric:tabular-nums;font-size:1.02rem;font-weight:600}
body[data-page="contact"] .ct-call:hover{box-shadow:0 6px 24px rgba(255,213,98,.3)}
body[data-page="contact"] .ct-call:focus-visible{outline:2px solid #fff;outline-offset:3px}
body[data-page="contact"] .ct-call:active{transform:translateY(1px)}

/* Email : lien secondaire calme, adresse visible et copiable — sous l'appel,
   jamais sur la même ligne (flex bloc à largeur de contenu). */
body[data-page="contact"] .ct-write{display:flex;width:fit-content;flex-direction:column;gap:.15rem;margin:1.1rem 0 0 0;min-height:44px;justify-content:center;color:var(--grey);text-decoration:none;transition:color .3s}
body[data-page="contact"] .ct-write:hover,body[data-page="contact"] .ct-write:focus-visible{color:#fff}
body[data-page="contact"] .ct-write-label{font-size:.98rem}
body[data-page="contact"] .ct-write-addr{font-size:.9rem;color:var(--grey-2)}
body[data-page="contact"] .ct-call{display:flex;width:fit-content}

/* Empilement mobile : portrait, nom, périmètre, appel pleine largeur, email,
   espace important, personne suivante. */
@media(max-width:960px){
  body[data-page="contact"] .ct-person,
  body[data-page="contact"] .ct-person--eloise{grid-template-columns:1fr;gap:1.4rem}
  body[data-page="contact"] .ct-person--eloise .ct-person-photo{order:0}
  body[data-page="contact"] .ct-person-photo{max-width:220px}
  body[data-page="contact"] .ct-call{width:100%;align-items:center;text-align:center;margin-right:0}
  body[data-page="contact"] .ct-write{margin-right:0}
  body[data-page="contact"] #eloise{margin-top:clamp(3rem,12vh,6rem)}
}
@media (prefers-reduced-motion:reduce){
  body[data-page="contact"] .ct-call,body[data-page="contact"] .ct-call:active{transform:none;transition:none}
}