/* ===== Glassora · Page devis — commande sur-mesure ===== */
/* Tokens de base.css : --navy, --gold, --champ, --line, --tgray, --bg, --lux. */

.gl-devis-page .wrap{max-width:1180px}
.gl-devis{padding:8px 0 20px}

/* ---- Hero éditorial ---- */
.gl-devis__hero{max-width:760px;margin:0 0 clamp(40px,6vw,68px)}
.gl-devis__eyebrow{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 20px}
.gl-devis__eyebrow--sm{margin:0 0 10px;letter-spacing:.16em;font-size:11px}
.gl-devis__title{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.4vw,66px);line-height:1.02;letter-spacing:-.015em;color:var(--navy);margin:0 0 22px}
.gl-devis__lead{font-family:var(--body);color:var(--tgray);font-size:clamp(16px,1.4vw,18px);line-height:1.75;margin:0;max-width:60ch}

/* ---- Grille ---- */
.gl-devis__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(34px,4vw,52px)}
.gl-devis__main{min-width:0}

/* ---- Sélection / composition ---- */
.gl-devis__selection{display:flex;gap:22px;align-items:center;margin:0 0 40px;padding:0 0 34px;border-bottom:1px solid var(--line)}
.gl-devis__selection-media{position:relative;flex:0 0 auto;width:118px;height:118px;display:flex;align-items:center;justify-content:center;background:var(--photo-bg,#f2f1f5);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.gl-devis__selection-media img{width:100%;height:100%;object-fit:contain;padding:12px}
/* Etiquette de face : posee EN SURIMPRESSION, pas dans le flux — la boite
   fait 118px de cote et l'image l'occupe entierement ; une etiquette en flux
   ecraserait l'apercu qu'elle est censee nommer. Elle n'apparait que sur une
   gravure recto/verso, ou il y a deux vignettes a distinguer. */
.gl-devis__selection-face{position:absolute;left:0;right:0;bottom:0;font-family:var(--head);font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--navy);background:rgba(255,255,255,.88);padding:3px 0}
.gl-devis__selection-name{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.1;color:var(--navy);margin:2px 0 0}
.gl-devis__selection-detail{font-family:var(--body);font-size:13.5px;color:var(--tgray);line-height:1.65;white-space:pre-wrap;margin:12px 0 0}
.gl-devis__logo-note{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--gold-ink);margin:10px 0 0}
/* Invite contextuelle dans le formulaire : elle explique ce qu'il faut écrire
   pour qu'une demande soit chiffrable du premier coup. Filet doré plutôt que
   fond coloré — le formulaire est filaire, un aplat y ferait tache. */
.gl-devis__hint{font-family:var(--body);font-size:13.5px;line-height:1.6;color:var(--tgray);margin:0 0 26px;padding:12px 0 12px 14px;border-left:2px solid var(--gold-ink)}
.gl-devis__hint strong{color:var(--navy);font-weight:600}

/* ---- Titre de section numéroté ---- */
.gl-devis__section{display:flex;align-items:baseline;gap:14px;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin:0 0 26px}
.gl-devis__section span{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--gold-ink);letter-spacing:0}

/* ---- Champs (style filaire éditorial) ---- */
.gl-devis__field{display:block;margin:0 0 26px}
.gl-devis__field>span{display:block;font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.gl-devis__field>span em{font-style:normal;color:var(--gold-ink)}
.gl-devis__field small{display:block;font-family:var(--body);color:var(--tgray);font-size:12px;margin-top:8px}
.gl-devis input[type=text],
.gl-devis input[type=email],
.gl-devis input[type=tel],
.gl-devis input[type=number],
.gl-devis select{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:11px 2px;font-family:var(--body);font-size:16px;color:var(--navy);background:transparent;transition:border-color .35s var(--ease)}
.gl-devis input::placeholder{color:#a9a7a2}
.gl-devis input:focus,
.gl-devis select:focus,
.gl-devis textarea:focus{outline:none;border-color:var(--gold)}
.gl-devis select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center no-repeat}
.gl-devis textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:14px;font-family:var(--body);font-size:16px;color:var(--navy);background:#fff;resize:vertical;min-height:120px;transition:border-color .35s var(--ease)}
.gl-devis__field--file input[type=file]{width:100%;font-family:var(--body);font-size:13px;color:var(--tgray);padding:10px 0}
.gl-devis__row{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* ---- Panneau conciergerie ---- */
.gl-devis__side{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(26px,2.4vw,34px);position:sticky;top:110px;box-shadow:0 24px 60px rgba(17,24,39,.05)}
.gl-devis__side-title{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.06;color:var(--navy);margin:0 0 26px}
.gl-devis__submit{width:100%;margin-top:6px;border:0;background:var(--gold);color:var(--lux);font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:18px;border-radius:var(--r-btn);cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease)}
.gl-devis__submit:hover{background:#b9975a;transform:translateY(-1px)}
.gl-devis__assur{list-style:none;margin:26px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.gl-devis__assur li{position:relative;padding-left:24px;font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--tgray)}
.gl-devis__assur li::before{content:'';position:absolute;left:0;top:7px;width:9px;height:9px;border:1.5px solid var(--gold);border-radius:50%}
.gl-devis__config{font-family:var(--body);font-size:13px;color:var(--tgray);line-height:1.6;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.gl-devis__config a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:1px}
.gl-devis__config a:hover{color:var(--gold-ink)}

/* ---- Confirmation ---- */
.gl-devis--sent{max-width:620px;margin:40px auto;text-align:center;padding:40px 20px 60px}
.gl-devis--sent .gl-devis__eyebrow{display:block}
.gl-devis--sent .gl-devis__lead{margin:0 auto 30px}
.gl-devis__back{display:inline-flex;font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:4px}
.gl-devis__back:hover{color:var(--gold-ink)}

/* ---- Responsive ---- */
@media(max-width:900px){
	.gl-devis__grid{grid-template-columns:1fr;gap:38px}
	.gl-devis__side{position:static;order:2}
}
@media(max-width:520px){
	.gl-devis__row{grid-template-columns:1fr;gap:0}
	.gl-devis__selection{flex-direction:column;align-items:flex-start;text-align:left}
	.gl-devis__selection-media{width:96px;height:96px}
}