/* ===========================================================================
   TEC'OFFICE M08 — CONTACT : feuille des scenes de la page
   ---------------------------------------------------------------------------
   Regle d'or : rien n'est jamais cache par cette feuille seule.
   Chaque etat de depart passe par une variable (--sh-k, --fr-k...) dont la
   valeur par defaut vaut 1 (trait entier), ou par une classe que SEUL le
   script pose, et seulement quand GSAP est la. Sans GSAP, la page est lisible
   telle quelle. Les retours du formulaire (focus, envoi, succes, erreur) sont
   en CSS pur : ils marchent avec ou sans GSAP, et se reduisent a un fondu
   quand le visiteur refuse le mouvement.
   =========================================================================== */

/* ---- 0. HERO : masques du titre (poses par le script) --------------------- */
.phero h1 .h1m {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .1em .06em .12em; margin: -.1em -.06em -.12em;
  color: inherit; font-weight: inherit;
}
.phero h1 .h1i { display: inline-block; color: inherit; font-weight: inherit; }

/* ---- 1. TETES DE SECTION : le filet se trace ------------------------------ */
.sec-head.mv-sh { border-top-color: transparent; }
.sec-head.mv-sh::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--ink); pointer-events: none;
  transform: scaleX(var(--sh-k, 1)); transform-origin: left center;
}
.sec-head.mv-sh::before {
  transform: scaleX(var(--sh-b, 1)); transform-origin: left center;
}
.mvc-lg { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.mvc-lg > span { display: block; }

/* ---- 2. FIGURES : le calque ---------------------------------------------- */
.med .calque { display: block; width: 100%; height: 100%; overflow: hidden; }
.med .ref.mv-ref::before {
  transform: scaleX(var(--ref-k, 1)); transform-origin: right center;
}
.fig-accueil img { object-position: 50% 62%; }
.next .nxt img { object-position: 50% 58%; }

/* ---- 3. « VENEZ VOIR NOS REALISATIONS » : trois vraies photos ------------- */
.vreal { position: relative; display: block; color: var(--ink); }
.vr-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
  height: clamp(380px, 54vh, 540px);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
.vr-t {
  position: relative; display: block; overflow: hidden; min-height: 0;
  border-radius: 8px; background: var(--dark); border: 1px solid var(--line);
}
.vr-a { grid-row: 1 / 3; }
.vr-t img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
  transition: scale .6s cubic-bezier(.23, 1, .32, 1);
}
.vr-a img { object-position: 50% 60%; }
.vr-t::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 0 0 / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 0 0 / 14px 1px no-repeat,
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 100% 100% / 1px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 100% 100% / 14px 1px no-repeat;
  transition: inset .35s cubic-bezier(.23, 1, .32, 1);
}
.vr-cap {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2);
}
.vr-cap::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 36px; background: var(--ink);
  transition: width .45s cubic-bezier(.23, 1, .32, 1);
}
.vr-ref {
  font-family: var(--mono); font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.vr-cap b {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.05; letter-spacing: -.02em;
}
/* bloc + fleche en ligne : sur telephone la legende passe a la ligne et la
   fleche suit le dernier mot (en flex, elle partait seule au bord droit) */
.vr-go {
  display: block; min-height: 28px; line-height: 1.9;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2);
}
.vr-go i { display: inline-block; margin-left: 10px; font-style: normal; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.vreal:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
  .vreal:hover .vr-t img { scale: 1.06; }
  .vreal:hover .vr-t::after { inset: 5px; }
  .vreal:hover .vr-cap::before { width: 100%; }
  .vreal:hover .vr-go i { transform: translateX(6px); }
}
.vreal:active .vr-grid { transform: scale(.985); }
@media (max-width: 760px) {
  .vr-grid { height: clamp(300px, 86vw, 420px); gap: 8px; }
}

/* ---- 4. FORMULAIRE ---------------------------------------------------------
   a) le filet de rubrique (A · Identification ———) se trace */
.frub.mv-fr::after {
  transform: scaleX(var(--fr-k, 1)); transform-origin: left center;
}

/* b) champ actif : l'etiquette passe a l'encre, son numero devient une
      pastille, un filet d'encre se dessine sous le champ (gauche -> droite). */
.field { position: relative; }
.field label { transition: color .2s ease; }
.field label .fno {
  display: inline-block; border-radius: 2px; line-height: 1.5;
  transition: background-color .2s ease, color .2s ease, padding .22s cubic-bezier(.23, 1, .32, 1);
}
.field:focus-within label { color: var(--ink); }
.field:focus-within label .fno { background: var(--ink); color: var(--paper); padding: 0 6px; }
.field:has(.ferr:not(:empty)):focus-within label .fno { background: var(--err); color: #fff; }
.field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--ink); border-radius: 1px; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.23, 1, .32, 1);
}
.field:focus-within::after { transform: scaleX(1); }
.field:has(.ferr:not(:empty))::after { display: none; }
/* champ en erreur : la barre rouge se trace du haut vers le bas */
@keyframes mvc-barre { from { transform: scaleY(0); } to { transform: none; } }
.field:has(.ferr:not(:empty))::before {
  transform-origin: center top; animation: mvc-barre .3s cubic-bezier(.23, 1, .32, 1) both;
}

/* c) boutons : l'appui s'entend (scale .97, transition courte) */
.btn { transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease),
  transform .16s cubic-bezier(.23, 1, .32, 1); }
/* envoi en cours : un trait de sable court sous le libelle */
#devisSend { position: relative; overflow: hidden; }
@keyframes mvc-envoi { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
#devisSend:disabled::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36%; height: 2px; background: var(--sand);
  animation: mvc-envoi 1s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* d) retours d'envoi : un petit cartouche qui se deplie, la pastille se pose.
      Les classes .mvc-a / .mvc-b alternent (scenes-contact.js) pour rejouer
      l'arrivee a chaque nouveau message, meme sans GSAP. */
.formmsg:not(:empty) {
  position: relative; padding: 15px 18px 15px 58px; border-radius: 0 6px 6px 0;
  animation: mvc-carte-a .34s cubic-bezier(.23, 1, .32, 1) both;
}
#devisMsg:not(:empty) {
  background: var(--white); border: 1px solid var(--line2); border-left: 3px solid var(--ink); color: var(--ink);
}
#devisErr:not(:empty) {
  background: #fdf7f5; border: 1px solid rgba(140, 47, 34, .28); border-left: 3px solid var(--err);
}
.formmsg:not(:empty)::before {
  position: absolute; left: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1;
  animation: mvc-pastille-a .36s cubic-bezier(.23, 1, .32, 1) .1s both;
}
#devisMsg:not(:empty)::before { content: "✓"; background: var(--ink); color: var(--paper); }
#devisErr:not(:empty)::before { content: "!"; background: var(--err); color: #fff; }
.formmsg.mvc-b:not(:empty) { animation-name: mvc-carte-b; }
.formmsg.mvc-b:not(:empty)::before { animation-name: mvc-pastille-b; }
@keyframes mvc-carte-a {
  from { opacity: 0; clip-path: polygon(0 0, 18% 0, 18% 100%, 0 100%); transform: translateY(6px); }
  to   { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}
@keyframes mvc-carte-b {
  from { opacity: 0; clip-path: polygon(0 0, 18% 0, 18% 100%, 0 100%); transform: translateY(6px); }
  to   { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; }
}
@keyframes mvc-pastille-a { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes mvc-pastille-b { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.ferr:not(:empty) { animation: mvc-retour .24s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes mvc-retour { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---- 5. CARTES « QUI CONTACTER » : la barre de tete se trace ------------- */
.fiche.mv-fi::before {
  transform: scaleX(var(--fi-k, 1)); transform-origin: left center;
}

/* ---- 6. ANIMATIONS REDUITES -----------------------------------------------
   GSAP n'est jamais charge : les scenes ne tournent pas. Restent les retours
   d'interface, ramenes a un simple fondu, sans aucun deplacement. */
html.doux .field::after { transform: none; opacity: 0; transition: opacity .2s linear; }
html.doux .field:focus-within::after { opacity: 1; }
html.doux .field label .fno { transition: background-color .2s linear, color .2s linear; }
@keyframes mvc-fondu { from { opacity: 0; } to { opacity: 1; } }
html.doux .formmsg:not(:empty),
html.doux .formmsg.mvc-b:not(:empty),
html.doux .formmsg:not(:empty)::before,
html.doux .formmsg.mvc-b:not(:empty)::before,
html.doux .ferr:not(:empty),
html.doux .field:has(.ferr:not(:empty))::before { animation: mvc-fondu .2s linear both; }
html.doux #devisSend:disabled::after { animation: none; left: 0; width: 100%; opacity: .6; }
html.doux .vr-grid, html.doux .vr-t img { transition: none; }
html.doux .vreal:active .vr-grid { transform: none; }

/* ===========================================================================
   7. TELEPHONES ET TABLETTES — passe « responsive » du 07/10
   ---------------------------------------------------------------------------
   Tout ce qui suit est borne sous 1280 px : le bureau reste strictement tel
   qu'il a ete valide. En-tete, menu, pied de page et « Poursuivre la visite »
   ne sont pas traites ici (feuille commune).
   =========================================================================== */

/* ---- 7a. Tablettes et telephones (<= 1100 px) ----------------------------- */
@media (max-width: 1100px) {
  /* saisie a 16 px : en dessous, iOS zoome sur le champ au toucher */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* reperes mono : 10 px au minimum (8,5 a 9,5 px au bureau) */
  .plref, .plref .crumb, .crumb { font-size: 10px; }
  .pc-lab, .phero-facts span, .sec .sec-tag, .hours-cap, .hours-hd, .hours dt,
  .med .ref, .med figcaption, .med figcaption em, .devis-ref .rid, .devis-ref .rtx,
  .frub, .formnote, .sc-lab, .sc-steps span, .fiche-role, .fiche-specs dt,
  .vr-ref, .lg-no { font-size: 10px; }
  .hours dd { font-size: 12px; }
  .field label, .ferr, .fiche-specs dd, .card .cmore, .vr-go { font-size: 10.5px; }

  /* fin de planche : titre a l'echelle de l'ecran, moins de vide autour */
  .endcta h2 { font-size: clamp(30px, 5.4vw, 58px); }
}

/* ---- 7b. Tablettes (761 - 1100 px) ---------------------------------------- */
@media (min-width: 761px) and (max-width: 1100px) {
  /* coordonnees : les trois cases cote a cote, comme au bureau (une colonne
     etiree sur toute la largeur laissait les cases a moitie vides) */
  .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 20 px de cote (et non 22) : a 768, « 14 rue des Charpentiers » tient
     sur une ligne au lieu de trois (il manquait 0,5 px) */
  .cbox { padding: 26px 20px 28px; }
  .cbox .big { font-size: clamp(16px, 2.1vw, 21px); }

  /* « Qui contacter » : trois fiches en ligne, lues de gauche a droite
     (en deux colonnes, la troisieme restait seule sur sa rangee) */
  #interlocuteurs .cards { grid-template-columns: 1fr; gap: 18px; }
  #interlocuteurs .fiche {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "top top" "h3 specs" "p specs" "p more";
    grid-template-rows: auto auto auto 1fr; column-gap: clamp(28px, 4.4vw, 52px);
    align-items: start;
  }
  #interlocuteurs .fiche > .fiche-top { grid-area: top; }
  #interlocuteurs .fiche > h3 { grid-area: h3; }
  #interlocuteurs .fiche > p { grid-area: p; margin-bottom: 0; max-width: none; }
  #interlocuteurs .fiche > .fiche-specs { grid-area: specs; margin-top: clamp(18px, 2.2vh, 24px); }
  #interlocuteurs .fiche > .cmore { grid-area: more; align-self: end; justify-self: start; margin-top: 14px; }
  .fiche-role { max-width: none; }

  .endcta .ctain { padding-top: clamp(96px, 11vh, 132px); padding-bottom: clamp(96px, 11vh, 132px); }
  /* titres de section a l'echelle de la tablette (29 px a 768 : trop menus) */
  .sec .sec-head h2 { font-size: clamp(30px, 4.4vw, 48px); }
}

/* ---- 7c. Telephones (<= 760 px) ------------------------------------------- */
@media (max-width: 760px) {
  /* lecture : 15 px au moins pour les textes courants */
  .cbox p.sub, .devis-head p, .studycard p, .card p { font-size: 15px; line-height: 1.6; }
  .legal p { font-size: 15px; line-height: 1.6; }
  .sec .sec-tag { max-width: none; line-height: 1.8; }
  .hours-cap { line-height: 1.7; }

  /* releve d'ouverture : le jour ne se coupe plus, l'amplitude passe a la
     ligne apres la barre oblique */
  .hours div { grid-template-columns: auto minmax(0, 1fr); }
  .hours dt { white-space: nowrap; }
  .hours dd .hr { white-space: nowrap; }
  /* le texte d'exemple du message tient en entier (16 px : quatre lignes) */
  .field textarea { min-height: 148px; }
  .devis-ref .rid, .devis-ref .rtx { letter-spacing: .1em; }
  .endcta .ctaref .rtx { text-wrap: balance; }

  /* cibles au doigt : 44 px, sans changer la mise en page (marges negatives) */
  .cbox .big { min-height: 44px; }
  .crumb a { min-height: 44px; margin: -8px 0; }

  /* legende de la figure : un peu plus d'air au-dessus du bas de l'image */
  .med figcaption { line-height: 1.75; }

  /* fiches « Qui contacter » : deux caracteristiques en colonnes, alignees
     d'une fiche a l'autre (le retour a la ligne variait selon la fiche) */
  .fiche-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 12px; }
  .fiche-specs div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 0; border-bottom: 0; }
  .fiche-specs dd { text-align: left; }

  /* retours d'envoi : plus lisibles a l'oeil nu */
  .formmsg:not(:empty) { font-size: 11px; letter-spacing: .08em; line-height: 1.75; padding-left: 54px; }
  .formnote { letter-spacing: .1em; line-height: 1.9; }

  /* bandeau final : l'etiquette mono ne rivalise plus avec le titre */
  .endcta .ctaref { font-size: 11.5px; letter-spacing: .14em; line-height: 1.7; }
}

/* ---- 7d. Telephones (<= 600 px) : boutons a la largeur du pouce ----------- */
@media (max-width: 600px) {
  main .btn { font-size: 11.5px; letter-spacing: .1em; }
  .devis-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  #devisSend, #acces .prose .btn, .endcta .cta-row .btn { width: 100%; justify-content: center; }
  .endcta .cta-row { gap: 12px; }
  /* quatre reperes de l'etude : 2 x 2 plutot que 3 + 1 orphelin */
  .sc-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
}

/* ---- 7e. Telephone a l'horizontale : le haut de page ne mange plus l'ecran */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 761px) and (max-width: 1279px) {
  :root { --sp: 72px; }
  .sec .sec-head { margin-bottom: 30px; }
  .endcta { margin-top: 84px; }
  .endcta .ctain { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1279px) {
  .phero { min-height: 0; }
  .phero-in { padding-top: 34px; padding-bottom: 30px; }
  .phero h1 { margin: 16px 0 14px; }
  .phero-cart { margin-top: 20px; }
  /* aucune image plus haute que l'ecran couche */
  .h-m { height: clamp(220px, 62vh, 300px); }
  .vr-grid { height: clamp(240px, 70vh, 320px); }
}

/* ===========================================================================
   8. RELECTURE du 07/10 — finitions telephone et tablette
   =========================================================================== */
/* mots composes qui ne se coupent plus sur leur trait d'union
   (« rendez- / vous », « cout- / copie »), a toutes les largeurs */
.ce-nw { white-space: nowrap; }

/* l'intertitre « ML-02 Vos donnees » collait au paragraphe : « .lg-mt » seul
   perdait contre « .legal h3 » (marge remise a 0). A toutes les largeurs ;
   un cran plus serre sur telephone, comme le reste du bloc. */
.legal h3.lg-mt { margin-top: 1.6em; }
@media (max-width: 760px) {
  .legal h3.lg-mt { margin-top: 1.1em; }
}

/* « Vos donnees et vos droits » sous le bouton d'envoi : au bureau, rien ne
   le distinguait du texte qui l'entoure. Souligne a toutes les largeurs. */
.formnote a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  /* l'etiquette de la carte etude restait a 9,5 px : « .studycard .sc-lab »
     l'emportait sur la regle des 10 px (specificite) */
  .studycard .sc-lab { font-size: 10px; }

  /* pas de mot seul en derniere ligne : etiquettes et sous-textes courts
     equilibres, paragraphes composes « au mieux » (navigateurs recents) */
  .sec .sec-tag, .cbox p.sub, .fiche-role { text-wrap: balance; }
  .sec .lead, .sec-lede, .prose p, .phero .plede, .endcta p, .devis-head p, .studycard p,
  .card p, .legal p, .formnote { text-wrap: pretty; }
}

/* tablettes : l'etiquette de section tient sur une ou deux lignes, a cote du
   titre (« Du lundi au vendredi, / Metz (57) » se coupait sans necessite) */
@media (min-width: 761px) and (max-width: 1100px) {
  .sec .sec-tag { max-width: 46ch; }
}

/* ===========================================================================
   9. PLAN D'ACCES — la carte Google Maps, sous « Tout est au meme endroit »
   ---------------------------------------------------------------------------
   Seul le cadre est dessine ici. Son contenu est pose par consentement.js :
   avant l'accord du visiteur, une attente sur papier quadrille (« Afficher la
   carte », « Ouvrir dans Google Maps ») ; apres, l'iframe. Rien de Google ne
   se charge sans accord. Meme vocabulaire que la figure 02 a cote : cadre
   arrondi, reperes d'angle, legende sous un filet avec sa barre d'encre.
   =========================================================================== */
.acces-col { min-width: 0; }
.carte-fig { margin: clamp(34px, 4.6vh, 52px) 0 0; }
.carte-acces {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: 8px; border: 1px solid var(--line2);
  background: var(--paper2);
  /* teintes du bouton « Afficher la carte » : consentement.css ne les pose que
     sur le bandeau et le panneau, l'attente heritait de variables vides
     (bouton sans fond ni bordure) */
  --ck-encre: var(--ink); --ck-papier: var(--paper); --ck-mute: var(--mute); --ck-ligne: var(--line);
}
/* reperes d'angle a l'encre, comme un cadrage de planche (sur l'attente
   seulement : sur la vraie carte, ils couvriraient les commandes de Google) */
.carte-acces::after {
  content: ""; position: absolute; inset: 9px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--ink2), var(--ink2)) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 0 / 1px 14px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 0 / 14px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 100% / 1px 14px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 0 100% / 14px 1px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 100% / 1px 14px no-repeat,
    linear-gradient(var(--ink2), var(--ink2)) 100% 100% / 14px 1px no-repeat;
  opacity: .7;
}
.carte-acces:has(iframe)::after { display: none; }
.carte-acces iframe { display: block; }

.carte-cap {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2);
  font-family: var(--mono); font-size: 9px; line-height: 1.7; letter-spacing: .17em; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.carte-cap::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 3px; width: 36px; background: var(--ink);
}
.carte-cap .cc-ref { color: var(--ink); }

/* bureau : la colonne de droite (texte + plan) est plus haute que les trois
   photos ; elles accompagnent la lecture au lieu de laisser un trou dessous */
@media (min-width: 1101px) {
  #acces .vreal { position: sticky; top: clamp(96px, 12vh, 112px); }
}
@media (max-width: 1100px) {
  .carte-cap { font-size: 10px; }
}
/* telephone : un plan plus haut que large ne se lit pas, un plan trop plat
   non plus. 4/3, avec un minimum pour que l'attente tienne en entier a 360 px */
@media (max-width: 760px) {
  .carte-fig { margin-top: 28px; }
  .carte-acces { aspect-ratio: 4 / 3; min-height: 264px; }
  .carte-cap { letter-spacing: .12em; }
}