
/* ==========================================================================
   COUCHE DE STYLE "ARC"
   Reprise du langage visuel du site Alpes Renovation Confort, adapte a la
   palette Plombier du Val de Marne. Blocs, boutons, cartes, bloc contact,
   formulaires, modale et ecran de confirmation.
   Cette couche est ajoutee apres le CSS d'origine : elle prend le dessus.
   ========================================================================== */

:root{
  --arc-nuit:#102A43;
  --arc-nuit-2:#16385C;
  --arc-nuit-3:#1E4E7E;
  --arc-cuivre:#EF7D2E;
  --arc-cuivre-2:#D9631A;
  --arc-bleu:#2E7FB8;
  --arc-brume:#F1F6FA;
  --arc-gris:#5A6B7B;
  --arc-bordure:#DCE4EB;
  --arc-blanc:#FFFFFF;
  --arc-display:"Archivo","Inter",system-ui,sans-serif;
  --arc-texte:"Public Sans","Inter",system-ui,sans-serif;
  --arc-rayon:10px;
  --arc-rayon-l:16px;
  --arc-ombre:0 1px 2px rgba(16,42,67,.06),0 8px 24px rgba(16,42,67,.08);
  --arc-ombre-forte:0 18px 50px rgba(16,42,67,.22);
  --arc-transition:.22s cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------- Typographie generale */
body{font-family:var(--arc-texte);}
h1,h2,h3,h4,.section-h2,.hero-h1{font-family:var(--arc-display);letter-spacing:-.02em;}
.section-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--arc-display);font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgba(239,125,46,.1);border:1px solid rgba(239,125,46,.32);
  color:var(--arc-cuivre-2);border-radius:100px;padding:.34rem .85rem;
}

/* --------------------------------------------------------------- Boutons */
.btn,.form-submit,.nav-cta,.svc-more{font-family:var(--arc-display);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:700;font-size:1rem;letter-spacing:.01em;
  padding:.95rem 1.5rem;border-radius:var(--arc-rayon);
  border:2px solid transparent;cursor:pointer;text-align:center;
  transition:var(--arc-transition);text-decoration:none;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;}
.btn:active{transform:translateY(0);}
.btn svg{flex:none;}
.btn-copper{
  background:var(--arc-cuivre);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(239,125,46,.3);
}
.btn-copper:hover{background:var(--arc-cuivre-2);box-shadow:0 10px 26px rgba(239,125,46,.36);}
.btn-outline{border-color:rgba(255,255,255,.55);}
.nav-cta{
  border-radius:var(--arc-rayon);font-weight:700;letter-spacing:.01em;
  transition:var(--arc-transition);
}
.arc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--arc-display);font-weight:700;font-size:1rem;
  padding:.95rem 1.5rem;border-radius:var(--arc-rayon);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:var(--arc-transition);text-align:center;
}
.arc-btn:hover{transform:translateY(-2px);text-decoration:none;}
.arc-btn svg{flex:none;}
.arc-btn--primaire{background:var(--arc-cuivre);color:#fff;box-shadow:0 6px 18px rgba(239,125,46,.3);}
.arc-btn--primaire:hover{background:var(--arc-cuivre-2);box-shadow:0 10px 26px rgba(239,125,46,.36);}
.arc-btn--contour{background:transparent;color:var(--arc-nuit);border-color:var(--arc-bordure);}
.arc-btn--contour:hover{background:var(--arc-nuit);color:#fff;border-color:var(--arc-nuit);}
.arc-btn--wa{background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.3);}
.arc-btn--wa:hover{background:#1EB855;color:#fff;}
.arc-btn--large{width:100%;padding-block:1.1rem;font-size:1.05rem;}
.arc-btn[aria-busy="true"]{opacity:.7;pointer-events:none;}

/* ------------------------------------------------- Cartes et blocs ronds */
.svc-card,.zone-card,.gal-item,.rev-card,.step-card,.why-card,.about-photo-wrap{
  border-radius:var(--arc-rayon-l);
}
.svc-card{
  border:1px solid var(--arc-bordure);box-shadow:0 1px 2px rgba(16,42,67,.05);
  overflow:hidden;transition:var(--arc-transition);
}
.svc-card:hover{
  border-color:var(--arc-cuivre);box-shadow:var(--arc-ombre);transform:translateY(-3px);
}
.zone-card{border:1px solid var(--arc-bordure);box-shadow:0 1px 2px rgba(16,42,67,.05);}
.gal-item{overflow:hidden;}

/* ============================== BLOC CONTACT ============================= */
.arc-contact{background:var(--arc-brume);}
.arc-contact__inner{
  max-width:1280px;margin:0 auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  padding-block:clamp(3.5rem,8vw,6rem);
}
.arc-contact__titre{text-align:center;max-width:44rem;margin:0 auto clamp(2rem,4vw,3rem);}
.arc-contact__titre h2{
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.08;margin:.7rem 0 .6rem;color:var(--arc-nuit);
}
.arc-contact__titre h2 em{font-style:normal;color:var(--arc-cuivre);}
.arc-contact__titre p{color:var(--arc-gris);font-size:1.02rem;margin:0;}

.bloc-contact{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start;}
@media (min-width:980px){
  .bloc-contact{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem;}
}

.carte-form{
  background:var(--arc-blanc);border:1px solid var(--arc-bordure);
  border-radius:var(--arc-rayon-l);padding:clamp(1.4rem,4vw,2.2rem);
  box-shadow:var(--arc-ombre);
}
.carte-form h3{
  font-size:clamp(1.35rem,3vw,1.75rem);margin:0 0 .4rem;color:var(--arc-nuit);line-height:1.15;
}
.carte-form > p{color:var(--arc-gris);font-size:.95rem;margin:0 0 1.6rem;}

.aside-contact{
  background:var(--arc-nuit);color:#C3D3E1;border-radius:var(--arc-rayon-l);
  padding:clamp(1.4rem,4vw,2.2rem);text-align:center;
}
.aside-contact__logo{
  display:block;width:min(84%,220px);height:auto;margin:0 auto 1.4rem;
}
.aside-contact h4{color:#fff;font-size:1.3rem;margin:0 0 .6rem;line-height:1.2;}
.aside-contact > p{font-size:.97rem;line-height:1.6;margin:0 0 1.7rem;}
.coord{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:1rem;text-align:left;}
.coord li{display:flex;gap:.85rem;align-items:flex-start;}
.coord__ico{
  width:40px;height:40px;flex:none;border-radius:10px;
  background:rgba(239,125,46,.16);color:var(--arc-cuivre);
  display:grid;place-items:center;
}
.coord__lbl{
  display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8CA6BC;margin-bottom:.1rem;
}
.coord a,.coord span.val{
  font-family:var(--arc-display);font-weight:700;font-size:1.06rem;color:#fff;
  line-height:1.25;word-break:break-word;text-decoration:none;
}
.coord a:hover{color:var(--arc-cuivre);}
.reseaux{margin-bottom:1.4rem;}
.reseaux__lbl{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8CA6BC;margin-bottom:.7rem;
}
.reseaux__liens{display:flex;justify-content:center;gap:.6rem;}
.reseau{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:#fff;transition:var(--arc-transition);
}
.reseau:hover{transform:translateY(-3px);color:#fff;text-decoration:none;}
.reseau--wa:hover{background:#25D366;border-color:#25D366;}
.reseau--tel:hover{background:var(--arc-cuivre);border-color:var(--arc-cuivre);}
.reseau--mail:hover{background:var(--arc-bleu);border-color:var(--arc-bleu);}
.aside-contact__note{
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;
  font-size:.88rem;color:#8CA6BC;line-height:1.55;margin:0;
}

/* ------------------------------------------------------------- Les champs */
.form-grille{display:grid;grid-template-columns:1fr;gap:1rem;}
@media (min-width:560px){.form-grille{grid-template-columns:1fr 1fr;}}
.champ{display:flex;flex-direction:column;gap:.4rem;position:relative;}
.champ--double{grid-column:1/-1;}
.champ label{font-size:.86rem;font-weight:600;color:var(--arc-nuit);}
.champ label .opt{font-weight:400;color:var(--arc-gris);}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:var(--arc-texte);font-size:1rem;color:var(--arc-nuit);
  background:#fff;border:1px solid var(--arc-bordure);border-radius:var(--arc-rayon);
  padding:.8rem .9rem;transition:var(--arc-transition);appearance:none;-webkit-appearance:none;
}
.champ textarea{min-height:110px;resize:vertical;}
.champ select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235A6B7B' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--arc-cuivre);box-shadow:0 0 0 3px rgba(239,125,46,.18);
}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:#C0431C;background:#FEF7F4;}
.champ__err{font-size:.8rem;color:#A63817;font-weight:600;}
.tel-groupe{display:grid;grid-template-columns:7.5rem 1fr;gap:.5rem;}
.tel-groupe > *{min-width:0;}
.tel-groupe select{padding-left:.7rem;font-size:.94rem;text-overflow:ellipsis;}
.pot-de-miel{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;}
.form-legal{font-size:.8rem;color:var(--arc-gris);line-height:1.5;margin:.9rem 0 0;}
.form-etat{
  display:none;margin-top:1rem;padding:.85rem 1rem;border-radius:var(--arc-rayon);
  font-size:.92rem;font-weight:600;
}
.form-etat.visible{display:block;}
.form-etat--erreur{background:#FCEDE7;color:#A63817;border:1px solid #F0C4B4;}

/* ------------------------------------------- Autocompletion des communes */
.auto-liste{
  position:absolute;top:100%;left:0;right:0;z-index:30;margin:.25rem 0 0;
  background:#fff;border:1px solid var(--arc-cuivre);border-radius:var(--arc-rayon);
  box-shadow:var(--arc-ombre-forte);max-height:15rem;overflow-y:auto;
  list-style:none;padding:.3rem;display:none;
}
.auto-liste.ouverte{display:block;}
.auto-liste li{
  padding:.55rem .7rem;border-radius:6px;cursor:pointer;font-size:.95rem;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.auto-liste li:hover,.auto-liste li[aria-selected="true"]{background:var(--arc-brume);}
.auto-liste li mark{background:none;color:var(--arc-cuivre-2);font-weight:700;}
.auto-liste .cp{font-size:.8rem;color:var(--arc-gris);flex:none;}

/* ---------------------------------------------- Ecran de confirmation */
.form-succes{text-align:center;padding:clamp(.5rem,3vw,1.5rem) 0;}
.form-succes__coche{
  width:72px;height:72px;margin:0 auto 1.4rem;border-radius:50%;
  background:#FDEEE1;color:var(--arc-cuivre-2);display:grid;place-items:center;
}
.form-succes h3{font-size:clamp(1.3rem,3.4vw,1.7rem);margin:0 0 .5rem;color:var(--arc-nuit);}
.form-succes > p{color:var(--arc-gris);margin:0 0 1.5rem;}
.form-succes__suite{
  text-align:left;background:var(--arc-brume);border-radius:var(--arc-rayon);
  padding:1.15rem 1.3rem 1.15rem 2.4rem;margin:0 0 1.6rem;
  display:grid;gap:.5rem;font-size:.95rem;color:var(--arc-nuit);
}
.succes-actions{display:flex;flex-direction:column;align-items:center;gap:.55rem;}
.succes-actions .arc-btn{width:100%;max-width:19rem;}
.succes-ou{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--arc-gris);
  display:flex;align-items:center;gap:.7rem;width:100%;max-width:19rem;
}
.succes-ou::before,.succes-ou::after{content:"";flex:1;height:1px;background:var(--arc-bordure);}

/* ================================ MODALE ================================ */
.modale{position:fixed;inset:0;z-index:1200;display:none;padding:1rem;overflow-y:auto;}
.modale.ouverte{display:block;}
.modale__fond{position:fixed;inset:0;background:rgba(8,20,32,.72);backdrop-filter:blur(3px);animation:arcFondu .2s ease;}
.modale__boite{
  position:relative;z-index:1;background:#fff;border-radius:var(--arc-rayon-l);
  width:100%;max-width:47rem;margin:2vh auto 3rem;box-shadow:var(--arc-ombre-forte);
  animation:arcMonte .26s cubic-bezier(.2,.8,.3,1);
}
.modale__entete{position:relative;padding:1.5rem clamp(1.3rem,4vw,2rem) 0;}
.modale__entete h3{
  font-family:var(--arc-display);font-size:clamp(1.3rem,3.5vw,1.7rem);
  margin:0 0 .35rem;padding-right:2.5rem;color:var(--arc-nuit);line-height:1.15;
}
.modale__entete p{color:var(--arc-gris);font-size:.94rem;margin:0 0 1.4rem;}
.modale__corps{padding:0 clamp(1.3rem,4vw,2rem) clamp(1.5rem,4vw,2rem);}
.modale__fermer{
  position:absolute;top:1.1rem;right:clamp(1.1rem,4vw,1.6rem);width:38px;height:38px;
  border:1px solid var(--arc-bordure);background:#fff;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--arc-gris);transition:var(--arc-transition);
}
.modale__fermer:hover{background:var(--arc-nuit);color:#fff;border-color:var(--arc-nuit);}
body.arc-bloque{overflow:hidden;}
@keyframes arcFondu{from{opacity:0}to{opacity:1}}
@keyframes arcMonte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width:639px){
  .modale{padding:.5rem;}
  .modale__boite{margin:.5rem auto 4.5rem;}
  .modale__entete{padding:1.1rem 1.05rem 0;}
  .modale__entete h3{font-size:1.26rem;padding-right:2.4rem;}
  .modale__entete p{font-size:.86rem;line-height:1.4;margin-bottom:.9rem;}
  .modale__fermer{top:.85rem;right:.85rem;width:34px;height:34px;}
  .modale__corps{padding:0 1.05rem 1.15rem;}
  .modale__corps .form-grille{grid-template-columns:1fr 1fr;gap:.55rem;}
  .modale__corps .champ--double{grid-column:1/-1;}
  .modale__corps .champ--court{grid-column:auto;}
  .modale__corps .champ label{font-size:.76rem;}
  .modale__corps .champ input,
  .modale__corps .champ select,
  .modale__corps .champ textarea{padding:.58rem .65rem;font-size:16px;border-radius:8px;}
  .modale__corps .tel-groupe{grid-template-columns:5.4rem 1fr;gap:.4rem;}
  .modale__corps .tel-groupe select{font-size:.78rem;padding-inline:.4rem;padding-right:1.35rem;background-position:right .4rem center;}
  .modale__corps textarea{min-height:60px;}
  .modale__corps .arc-btn--large{padding-block:.85rem;font-size:.98rem;}
  .modale__corps .form-legal{font-size:.72rem;line-height:1.35;}
}
@media (max-width:599px){
  .champ input,.champ select,.champ textarea{font-size:16px;}
  .tel-groupe{grid-template-columns:5.4rem 1fr;}
}

/* ================================ AVIS =================================== */
.arc-avis{background:var(--arc-nuit-2);}
.arc-avis__inner{
  max-width:1280px;margin:0 auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  padding-block:clamp(3.5rem,8vw,6rem);
}
.arc-avis__entete{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
.arc-avis__entete h2{
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.08;color:#fff;margin:.7rem 0 0;
}
.arc-avis__entete h2 em{font-style:normal;color:var(--arc-cuivre);}
.arc-avis .section-chip{
  background:rgba(239,125,46,.16);border-color:rgba(239,125,46,.4);color:#F6A863;
}
.arc-avis__note{
  display:flex;align-items:center;gap:.9rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--arc-rayon-l);padding:.9rem 1.2rem;
}
.arc-avis__chiffre{
  font-family:var(--arc-display);font-weight:800;font-size:2.1rem;line-height:1;color:#fff;
}
.arc-avis__note-txt{
  display:flex;flex-direction:column;gap:.25rem;
  font-size:.86rem;color:#9FB6C9;line-height:1.4;
}
.arc-avis__note-txt strong{display:block;color:#fff;font-size:.95rem;font-weight:600;}

.avis-etoiles{letter-spacing:.08em;font-size:1rem;line-height:1;white-space:nowrap;}
.avis-etoiles .pleine{color:#F6A863;}
.avis-etoiles .vide{color:rgba(255,255,255,.28);}

.arc-avis__grille{display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media (min-width:760px){.arc-avis__grille{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.arc-avis__grille{grid-template-columns:repeat(3,1fr);}}

.avis-carte{
  display:flex;flex-direction:column;gap:.85rem;height:100%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  border-radius:var(--arc-rayon-l);padding:1.5rem;
  color:#C3D3E1;text-decoration:none;transition:var(--arc-transition);
}
.avis-carte:hover{
  background:rgba(255,255,255,.08);border-color:rgba(239,125,46,.5);
  transform:translateY(-3px);text-decoration:none;
}
.avis-carte__haut{display:flex;align-items:center;gap:.8rem;}
.avis-carte__pastille{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--arc-display);font-weight:700;font-size:1.1rem;color:#fff;
}
.avis-carte__nom{
  display:block;font-family:var(--arc-display);font-weight:700;font-size:1rem;
  color:#fff;line-height:1.25;
}
.avis-carte__lieu{display:block;font-size:.83rem;color:#8CA6BC;margin-top:.1rem;}
.avis-carte__note{display:flex;align-items:center;justify-content:space-between;gap:.8rem;}
.avis-carte__date{font-size:.78rem;color:#8CA6BC;}
.avis-carte__travaux{
  margin:0;font-size:.92rem;line-height:1.5;color:#D9E4EE;
  padding-left:.85rem;border-left:2px solid rgba(239,125,46,.55);
}
.avis-carte__texte{margin:0;font-size:1rem;line-height:1.55;color:#fff;font-weight:600;}
.avis-carte__reponse{
  background:rgba(255,255,255,.05);border-radius:var(--arc-rayon);
  padding:.85rem 1rem;font-size:.87rem;line-height:1.5;
}
.avis-carte__reponse-lbl{
  display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8CA6BC;margin-bottom:.35rem;
}
.avis-carte__reponse p{margin:0;color:#C3D3E1;}
.avis-carte__lien{
  margin-top:auto;padding-top:.4rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--arc-display);font-weight:700;font-size:.85rem;color:#F6A863;
}
.avis-carte:hover .avis-carte__lien{color:var(--arc-cuivre);}
.arc-avis__pied{margin-top:clamp(1.6rem,4vw,2.4rem);text-align:center;}
.arc-avis__pied .arc-btn{border-color:rgba(255,255,255,.35);color:#fff;}
.arc-avis__pied .arc-btn:hover{background:#fff;color:var(--arc-nuit);border-color:#fff;}

/* ========================= ZONE D'INTERVENTION =========================== */
.arc-zone{background:var(--arc-blanc);}
.arc-zone__inner{
  max-width:1280px;margin:0 auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
  padding-block:clamp(3.5rem,8vw,6rem);
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:center;
}
@media (min-width:1000px){
  .arc-zone__inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
}
.arc-zone__texte h2{
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.1;color:var(--arc-nuit);margin:.7rem 0 .9rem;
}
.arc-zone__texte h2 em{font-style:normal;color:var(--arc-cuivre);}
.arc-zone__regle{width:56px;height:3px;background:var(--arc-cuivre);border-radius:3px;margin-bottom:1.3rem;}
.arc-zone__texte p{color:var(--arc-gris);font-size:1.02rem;line-height:1.65;margin:0 0 1rem;}
.arc-zone__fort{
  color:var(--arc-nuit) !important;font-weight:600;
  background:var(--arc-brume);border-left:3px solid var(--arc-cuivre);
  border-radius:0 var(--arc-rayon) var(--arc-rayon) 0;padding:.9rem 1.1rem;
}
.arc-zone__deps{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 1.6rem;list-style:none;padding:0;}
.arc-zone__deps li{
  font-family:var(--arc-display);font-weight:700;font-size:.85rem;
  border:1px solid var(--arc-bordure);border-radius:100px;padding:.4rem .9rem;color:var(--arc-nuit);
}
.arc-zone__deps li.principal{background:var(--arc-nuit);border-color:var(--arc-nuit);color:#fff;}

.carte-zone{
  background:#fff;border:1px solid var(--arc-bordure);border-radius:var(--arc-rayon-l);
  padding:clamp(.7rem,2vw,1.1rem);box-shadow:var(--arc-ombre);overflow:hidden;
}
.carte-zone__svg{display:block;width:100%;height:auto;border-radius:var(--arc-rayon);}
.carte-zone__legende{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:center;
  padding:.9rem .4rem .3rem;font-size:.84rem;color:var(--arc-gris);
}
.carte-zone__legende span{display:inline-flex;align-items:center;gap:.5rem;}
.legende-pastille{width:14px;height:14px;border-radius:50%;flex:none;}
.legende-pastille--siege{background:var(--arc-cuivre);}
.legende-pastille--ville{background:var(--arc-nuit-3);width:10px;height:10px;}
.legende-cercle{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px dashed var(--arc-cuivre);
}
